https://tensionhost.com/

Scan-ID:
b3615a0b-d687-407a-ab0a-6f5821a118aaBeendet
Eingereichte URL:
https://tensionhost.com/
Bericht beendet:

Die von der Seite ausgehenden identifizierten Links

JavaScript-Variablen · 29 gefunden

Globale JavaScript-Variablen, die in das Window Object einer Seite geladen werden, sind Variablen, die außerhalb von Funktionen deklariert werden und von jeder Stelle des Codes innerhalb des aktuellen Bereichs zugänglich sind

NameTyp
0object
1object
2object
3object
4object
5object
onbeforetoggleobject
documentPictureInPictureobject
onscrollendobject
AOSobject

Konsolenprotokoll-Meldungen · 2 gefunden

In der Web-Konsole protokollierte Meldungen

TypKategorieProtokoll
logother
URL
https://tensionhost.com/
Text
Checking image loading...
logother
URL
https://tensionhost.com/
Text
Checking carousel container dimensions...

HTML

Der HTML-Rohtext der Seite

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tension Hosting - Your Game, Our Host</title>
    <meta name="author" content="Tension Hosting">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <meta name="description" content="Lag-free Minecraft hosting starting at just $2.99! Supports all Minecraft versions, features an easy-to-use panel, and includes free perks. Get started today!">
    <meta name="keywords" content="Minecraft hosting, Minecraft server hosting, cheap Minecraft hosting, best Minecraft hosting, lag-free servers, Tension Hosting, reliable Minecraft servers, modded Minecraft hosting, instant setup servers, Minecraft multiplayer hosting, affordable game servers">
    <link rel="icon" href="favicon.ico">


    <meta property="og:title" content="Tension Hosting - Your Game, Our Host">
    <meta property="og:description" content="Lag-free Minecraft hosting starting at just $2.99! Supports all Minecraft versions, features an easy-to-use panel. Get started now!">
    <meta property="og:image" content="https://tensionhost.com/Logos/image-card.png">
    <meta property="og:url" content="https://tensionhost.com">
    <meta property="og:type" content="website">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Tension Hosting - Your Game, Our Host">
    <meta name="twitter:description" content="Lag-free Minecraft hosting starting at just $2.99! Supports all Minecraft versions, features an easy-to-use panel. Get started now!">
    <meta name="twitter:image" content="https://tensionhost.com/Logos/image-card.png">


    <link href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css" rel="stylesheet">
    <script src="https://embed.tawk.to/_s/v4/app/67354992019/js/twk-main.js" charset="UTF-8" crossorigin="*"></script><script src="https://embed.tawk.to/_s/v4/app/67354992019/js/twk-vendor.js" charset="UTF-8" crossorigin="*"></script><script src="https://embed.tawk.to/_s/v4/app/67354992019/js/twk-chunk-vendors.js" charset="UTF-8" crossorigin="*"></script><script src="https://embed.tawk.to/_s/v4/app/67354992019/js/twk-chunk-common.js" charset="UTF-8" crossorigin="*"></script><script src="https://embed.tawk.to/_s/v4/app/67354992019/js/twk-runtime.js" charset="UTF-8" crossorigin="*"></script><script src="https://embed.tawk.to/_s/v4/app/67354992019/js/twk-app.js" charset="UTF-8" crossorigin="*"></script><script async="" src="https://embed.tawk.to/6658fb0c981b6c5647769939/1hv5p9ajg" charset="UTF-8" crossorigin="*"></script><script async="" src="https://www.clarity.ms/s/0.7.56/clarity.js"></script><script defer="" referrerpolicy="origin" src="/cdn-cgi/zaraz/s.js?z=JTdCJTIyZXhlY3V0ZWQlMjIlM0ElNUIlNUQlMkMlMjJ0JTIyJTNBJTIyVGVuc2lvbiUyMEhvc3RpbmclMjAtJTIwWW91ciUyMEdhbWUlMkMlMjBPdXIlMjBIb3N0JTIyJTJDJTIyeCUyMiUzQTAuMjc3NzA5Njc1NzE4MjQxNTclMkMlMjJ3JTIyJTNBMSUyQyUyMmglMjIlM0ExJTJDJTIyaiUyMiUzQTYwMCUyQyUyMmUlMjIlM0E4MDAlMkMlMjJsJTIyJTNBJTIyaHR0cHMlM0ElMkYlMkZ0ZW5zaW9uaG9zdC5jb20lMkYlMjIlMkMlMjJyJTIyJTNBJTIyJTIyJTJDJTIyayUyMiUzQTI0JTJDJTIybiUyMiUzQSUyMlVURi04JTIyJTJDJTIybyUyMiUzQTAlMkMlMjJxJTIyJTNBJTVCJTVEJTdE"></script><script async="" src="https://www.clarity.ms/tag/nt0e84ivi5"></script><script async="" src="https://embed.tawk.to/6658fb0c981b6c5647769939/1hv5p9ajg" charset="UTF-8" crossorigin="*"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>
    
<!--Start of Tawk.to Script-->
    <script type="text/javascript">
    var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
    (function(){
    var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
    s1.async=true;
    s1.src='https://embed.tawk.to/6658fb0c981b6c5647769939/1hv5p9ajg';
    s1.charset='UTF-8';
    s1.setAttribute('crossorigin','*');
    s0.parentNode.insertBefore(s1,s0);
    })();
    </script>
    <!--End of Tawk.to Script-->

    <script type="text/javascript">
        (function(c,l,a,r,i,t,y){
            c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
            t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
            y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
        })(window, document, "clarity", "script", "nt0e84ivi5");
    </script>

    <script>

        document.addEventListener('DOMContentLoaded', function () {
            const carousel = document.querySelector('.carousel-container');
            const versions = [
                'Vanilla', 'Paper', 'Pufferfish', 'Spigot', 'Folia', 'Purpur', 
                'Waterfall', 'Velocity', 'Fabric', 'Bungeecord', 'Quilt', 'Forge', 
                'NeoForge', 'Mohist', 'Arclight', 'Sponge', 'Leaves', 'Canvas'
            ];

            function createCarouselItem(version) {
                const item = document.createElement('div');
                item.className = 'carousel-item';
                
                const img = document.createElement('img');
                img.src = `https://tensionhost.com/Logos/servertypes/${version.toLowerCase()}.png`;
                img.alt = version;
                img.onerror = function() {
                    this.style.display = 'none';
                    item.innerHTML += `<div class="fallback-text">${version}</div>`;
                    console.log(`Image not found for ${version}`);
                };
                
                item.appendChild(img);
                item.innerHTML += `<div class="hover-text">${version}</div>`;
                
                return item;
            }

         
            for (let i = 0; i < 3; i++) {
                versions.forEach(version => {
                    carousel.appendChild(createCarouselItem(version));
                });
            }

            const itemWidth = 170; 
            const totalWidth = versions.length * itemWidth;

            let currentPosition = 0;

            function moveCarousel() {
                currentPosition -= 0.5; 
                
                if (currentPosition <= -totalWidth) {
                    currentPosition += totalWidth;
                    carousel.style.transition = 'none';
                    carousel.style.transform = `translateX(${currentPosition}px)`;
                    carousel.offsetHeight; 
                    carousel.style.transition = 'transform 0.5s linear';
                } else {
                    carousel.style.transform = `translateX(${currentPosition}px)`;
                }
                
                requestAnimationFrame(moveCarousel);
            }

          
            setTimeout(() => {
                requestAnimationFrame(moveCarousel);
            }, 1000);
        });

      
        console.log("Checking image loading...");
        document.querySelectorAll('.carousel-item img').forEach(img => {
            console.log(`Image src: ${img.src}, Complete: ${img.complete}, Natural size: ${img.naturalWidth}x${img.naturalHeight}`);
        });

        console.log("Checking carousel container dimensions...");
        const carouselContainer = document.querySelector('.carousel-container');
        console.log(`Carousel container dimensions: ${carouselContainer.offsetWidth}x${carouselContainer.offsetHeight}`);

        console.log("Checking carousel item positioning...");
        document.querySelectorAll('.carousel-item').forEach((item, index) => {
            console.log(`Item ${index} position: Left ${item.offsetLeft}, Top: ${item.offsetTop}`);
        });

        console.log("Checking animation...");
        let lastPosition = null;
        function checkAnimation() {
            const currentPosition = carouselContainer.getBoundingClientRect().left;
            if (lastPosition !== null) {
                console.log(`Animation delta: ${currentPosition - lastPosition}`);
            }
            lastPosition = currentPosition;
            requestAnimationFrame(checkAnimation);
        }
        requestAnimationFrame(checkAnimation);
    </script>
<script>(function(w,d){})(window,document)</script><script>(function(w,d){;w.zarazData.executed.push("Pageview");})(window,document)</script><script>(function(w,d){{const d = document.createElement('div');d.innerHTML = ``;document.body.appendChild(d);};{
var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
(function(){
var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
s1.async=true;
s1.src='https://embed.tawk.to/6658fb0c981b6c5647769939/1hv5p9ajg';
s1.charset='UTF-8';
s1.setAttribute('crossorigin','*');
s0.parentNode.insertBefore(s1,s0);
})();
}})(window,document)</script><script charset="utf-8" src="https://embed.tawk.to/_s/v4/app/67354992019/js/twk-chunk-bf24a88e.js"></script><script charset="utf-8" src="https://embed.tawk.to/_s/v4/app/67354992019/js/twk-chunk-71978bb6.js"></script><script charset="utf-8" src="https://embed.tawk.to/_s/v4/app/67354992019/js/twk-chunk-7c2f6ba4.js"></script><script charset="utf-8" src="https://embed.tawk.to/_s/v4/app/67354992019/js/twk-chunk-48f3b594.js"></script><script charset="utf-8" src="https://embed.tawk.to/_s/v4/app/67354992019/js/twk-chunk-4fe9d5dd.js"></script><script charset="utf-8" src="https://embed.tawk.to/_s/v4/app/67354992019/js/twk-chunk-2d0b9454.js"></script><script charset="utf-8" src="https://embed.tawk.to/_s/v4/app/67354992019/js/twk-chunk-24d8db78.js"></script><style type="text/css">#khansoj2afo81733081499860 {outline:none !important;
visibility:visible !important;
resize:none !important;
box-shadow:none !important;
overflow:visible !important;
background:none !important;
opacity:1 !important;
filter:alpha(opacity=100) !important;
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity 1}) !important;
-mz-opacity:1 !important;
-khtml-opacity:1 !important;
top:auto !important;
right:0px !important;
bottom:0px !important;
left:auto !important;
position:fixed !important;
border:0 !important;
min-height:0px  !important;
min-width:0px  !important;
max-height:none  !important;
max-width:none  !important;
padding:0px !important;
margin:0px !important;
-moz-transition-property:none !important;
-webkit-transition-property:none !important;
-o-transition-property:none !important;
transition-property:none !important;
transform:none !important;
-webkit-transform:none !important;
-ms-transform:none !important;
width:auto !important;
height:auto  !important;
display:none !important;
z-index:2000000000 !important;
background-color:transparent !important;
cursor:none !important;
float:none !important;
border-radius:unset !important;
pointer-events:auto !important;
clip:auto !important;
color-scheme:light !important;}#khansoj2afo81733081499860.widget-hidden {display: none !important;}#khansoj2afo81733081499860.widget-visible {display: block !important;}
@media print{
 #khansoj2afo81733081499860.widget-visible { 
display: none !important;
 }
}</style><script src="https://cdn.jsdelivr.net/emojione/2.2.7/lib/js/emojione.min.js" type="text/javascript" async="" defer=""></script><script src="https://cdn.jsdelivr.net/emojione/2.2.7/lib/js/emojione.min.js" type="text/javascript" async="" defer=""></script><style type="text/css">@keyframes tawkMaxOpen{0%{opacity:0;transform:translate(0, 30px);;}to{opacity:1;transform:translate(0, 0px);}}@-moz-keyframes tawkMaxOpen{0%{opacity:0;transform:translate(0, 30px);;}to{opacity:1;transform:translate(0, 0px);}}@-webkit-keyframes tawkMaxOpen{0%{opacity:0;transform:translate(0, 30px);;}to{opacity:1;transform:translate(0, 0px);}}#lustim30jmlo1733081500236.open{animation : tawkMaxOpen .25s ease!important;}@keyframes tawkMaxClose{from{opacity: 1;transform:translate(0, 0px);;}to{opacity: 0;transform:translate(0, 30px);;}}@-moz-keyframes tawkMaxClose{from{opacity: 1;transform:translate(0, 0px);;}to{opacity: 0;transform:translate(0, 30px);;}}@-webkit-keyframes tawkMaxClose{from{opacity: 1;transform:translate(0, 0px);;}to{opacity: 0;transform:translate(0, 30px);;}}#lustim30jmlo1733081500236.closed{animation: tawkMaxClose .25s ease!important}</style></head><body data-aos-easing="ease-out-cubic" data-aos-duration="800" data-aos-delay="0">
<script data-cfasync="false" nonce="f5ea9bf0-2fa4-43e8-956a-77e93b5322e7">try{(function(w,d){!function(j,k,l,m){if(j.zaraz)console.error("zaraz is loaded twice");else{j[l]=j[l]||{};j[l].executed=[];j.zaraz={deferred:[],listeners:[]};j.zaraz._v="5828";j.zaraz._n="f5ea9bf0-2fa4-43e8-956a-77e93b5322e7";j.zaraz.q=[];j.zaraz._f=function(n){return async function(){var o=Array.prototype.slice.call(arguments);j.zaraz.q.push({m:n,a:o})}};for(const p of["track","set","debug"])j.zaraz[p]=j.zaraz._f(p);j.zaraz.init=()=>{var q=k.getElementsByTagName(m)[0],r=k.createElement(m),s=k.getElementsByTagName("title")[0];s&&(j[l].t=k.getElementsByTagName("title")[0].text);j[l].x=Math.random();j[l].w=j.screen.width;j[l].h=j.screen.height;j[l].j=j.innerHeight;j[l].e=j.innerWidth;j[l].l=j.location.href;j[l].r=k.referrer;j[l].k=j.screen.colorDepth;j[l].n=k.characterSet;j[l].o=(new Date).getTimezoneOffset();if(j.dataLayer)for(const t of Object.entries(Object.entries(dataLayer).reduce(((u,v)=>({...u[1],...v[1]})),{})))zaraz.set(t[0],t[1],{scope:"page"});j[l].q=[];for(;j.zaraz.q.length;){const w=j.zaraz.q.shift();j[l].q.push(w)}r.defer=!0;for(const x of[localStorage,sessionStorage])Object.keys(x||{}).filter((z=>z.startsWith("_zaraz_"))).forEach((y=>{try{j[l]["z_"+y.slice(7)]=JSON.parse(x.getItem(y))}catch{j[l]["z_"+y.slice(7)]=x.getItem(y)}}));r.referrerPolicy="origin";r.src="/cdn-cgi/zaraz/s.js?z="+btoa(encodeURIComponent(JSON.stringify(j[l])));q.parentNode.insertBefore(r,q)};["complete","interactive"].includes(k.readyState)?zaraz.init():j.addEventListener("DOMContentLoaded",zaraz.init)}}(w,d,"zarazData","script");window.zaraz._p=async mY=>new Promise((mZ=>{if(mY){mY.e&&mY.e.forEach((m$=>{try{const na=d.querySelector("script[nonce]"),nb=na?.nonce||na?.getAttribute("nonce"),nc=d.createElement("script");nb&&(nc.nonce=nb);nc.innerHTML=m$;nc.onload=()=>{d.head.removeChild(nc)};d.head.appendChild(nc)}catch(nd){console.error(`Error executing script: ${m$}\n`,nd)}}));Promise.allSettled((mY.f||[]).map((ne=>fetch(ne[0],ne[1]))))}mZ()}));zaraz._p({"e":["(function(w,d){})(window,document)"]});})(window,document)}catch(e){throw fetch("/cdn-cgi/zaraz/t"),e;};</script>
    <style>
        :root {
            --primary: #ffffff86;
            --dark: #0a192f;
        }
        
        body {
            background-color: var(--dark);
            color: white;
            font-family: system-ui, -apple-system, sans-serif;
        }

        .bg-gradient {
            background: linear-gradient(180deg, rgba(10,25,47,0.9) 0%, rgba(10,25,47,1) 100%);
        }

        .glow {
            text-shadow: 0 0 10px var(--primary);
        }

        .feature-card {
            background: rgba(255,255,255,0.05);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255,255,255,0.1);
            transition: all 0.3s ease;
        }

        .feature-card:hover {
            transform: translateY(-5px);
            border-color: var(--primary);
        }

        .testimonial-card {
            background: rgba(255,255,255,0.05);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255,255,255,0.1);
            transition: all 0.3s ease;
        }

        .testimonial-card:hover {
            transform: translateY(-5px);
            border-color: var(--primary);
        }
        .versions-carousel {
        padding: 2rem;
        text-align: center;
        position: relative;
        overflow: hidden;
        margin: 2rem auto;
        border-radius: 10px;
        height: auto;
        max-width: 100%;
}

.versions-carousel h2 {
    margin-bottom: 2rem;
    color: #ffffff;
    font-size: 2.5rem;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    padding: 1rem 0;
}

.carousel-wrapper {
    position: relative;
    overflow: hidden;
    padding: 1rem 0;
    height: 200px;
}

.carousel-container {
    display: flex;
    gap: 2rem;
    position: relative;
    height: 150px;
    align-items: center;
    padding: 0 1rem;
}

.carousel-item {
    flex: 0 0 150px;
    height: 150px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.carousel-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.3);
}

.carousel-item img {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
    filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.3));
}

.carousel-item .hover-text {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 0.5rem;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    font-size: 0.9rem;
    font-weight: bold;
}

.carousel-item:hover .hover-text {
    transform: translateY(0);
}


.carousel-wrapper::before,
.carousel-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100px;
    z-index: 2;
    pointer-events: none;
}

.logo {
            width: 200px;
            height: auto; 
        }
        
        .nav-bg {
            background: linear-gradient(180deg, rgba(10,25,47,0.98) 0%, rgba(10,25,47,1) 100%);
            backdrop-filter: blur(10px);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }

        .mobile-menu {
            display: none;
            position: fixed;
            top: 64px; /* Reduced from 80px to match nav height */
            left: 0;
            right: 0;
            background: rgba(10,25,47,0.98);
            backdrop-filter: blur(10px);
            padding: 0.5rem;
            transform: translateY(-150%);
            transition: transform 0.3s ease-in-out;
            z-index: 40;
        }

        .mobile-menu.active {
            transform: translateY(0);
            display: block;
        }

        .menu-button {
            display: none;
        }

        @media (max-width: 768px) {
            .desktop-menu {
                display: none;
            }

            .menu-button {
                display: block;
            }

            .mobile-menu {
                display: block;
            }
        }

        .nav-link {
            transition: all 0.3s ease;
            position: relative;
            padding: 0.5rem 1rem;
        }

        .nav-link:hover {
            color: #10B981;
        }

        .nav-button {
            padding: 0.5rem 1rem;
            border-radius: 0.5rem;
            transition: all 0.3s ease;
        }

        .primary-button {
            background-color: #10B981;
        }

        .primary-button:hover {
            background-color: #059669;
        }

        .secondary-button {
            border: 1px solid #10B981;
        }

        .secondary-button:hover {
            background-color: #10B981;
        }

        .mobile-nav-link {
            display: block;
            padding: 1rem;
            transition: all 0.3s ease;
            border-radius: 0.5rem;
        }

        .mobile-nav-link:hover {
            background: rgba(16, 185, 129, 0.1);
            transform: translateX(10px);
        } 
        
        @keyframes bounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }
        
        .animate-bounce i {
            animation: bounce 1s infinite;
        }
</style>
    


    <nav class="fixed w-full z-50 nav-bg">
        <div class="container mx-auto px-4">
            <div class="flex items-center justify-between h-16">
                <!-- Logo -->
                <div class="flex items-center space-x-2">
                    <img src="https://tensionhost.com/Logos/Tension_Hosting_PNG.png" alt="Tension Logo" class="h-8">
                    <span class="text-lg font-bold text-white">Tension Hosting</span>
                </div>

                <!-- Desktop Menu -->
                <div class="desktop-menu flex items-center space-x-4">
                    <a href="https://discord.tensionhost.com" class="nav-link text-white">Discord</a>
                    <a href="https://panel.tensionhost.com" class="nav-button primary-button text-white">Panel</a>
                    <a href="https://billing.tensionhost.com" class="nav-button secondary-button text-white">Client Area</a>
                </div>

                <!-- Mobile Menu Button -->
                <button class="menu-button text-white p-2" onclick="toggleMenu()">
                    <i class="fas fa-bars text-xl"></i>
                </button>
            </div>
        </div>

        <!-- Mobile Menu -->
        <div id="mobileMenu" class="mobile-menu">
            <a href="https://discord.tensionhost.com" class="mobile-nav-link text-white">
                <i class="fab fa-discord mr-2"></i> Discord
            </a>
            <a href="https://panel.tensionhost.com" class="mobile-nav-link text-white">
                <i class="fas fa-gamepad mr-2"></i> Panel
            </a>
            <a href="https://billing.tensionhost.com" class="mobile-nav-link text-white">
                <i class="fas fa-user mr-2"></i> Client Area
            </a>
        </div>
    </nav>

    <script>
        function toggleMenu() {
            const mobileMenu = document.getElementById('mobileMenu');
            mobileMenu.classList.toggle('active');
            
            const menuButton = document.querySelector('.menu-button i');
            menuButton.classList.toggle('fa-bars');
            menuButton.classList.toggle('fa-times');
        }
    </script>
        <!-- Mobile Menu -->
        <div id="mobileMenu" class="mobile-menu">
            <a href="https://discord.tensionhost.com" class="mobile-nav-link text-white hover:text-green-400">
                <i class="fab fa-discord mr-2"></i> Discord
            </a>
            <a href="https://panel.tensionhost.com" class="mobile-nav-link text-white hover:text-green-400">
                <i class="fas fa-gamepad mr-2"></i> Panel
            </a>
            <a href="https://billing.tensionhost.com" class="mobile-nav-link text-white hover:text-green-400">
                <i class="fas fa-user mr-2"></i> Client Area
            </a>
        </div>
    

    <script>
        function toggleMenu() {
            const mobileMenu = document.getElementById('mobileMenu');
            mobileMenu.classList.toggle('active');
            
            const menuButton = document.querySelector('.menu-button i');
            if (mobileMenu.classList.contains('active')) {
                menuButton.classList.remove('fa-bars');
                menuButton.classList.add('fa-times');
            } else {
                menuButton.classList.remove('fa-times');
                menuButton.classList.add('fa-bars');
            }
        }
    </script>
   
    <header class="min-h-screen flex items-center justify-center text-center pt-20 relative overflow-hidden">
        <div class="absolute inset-0 z-0">
            <img src="https://tensionhost.com/Logos/Minecraftbkground.jpg" alt="Minecraft Background" class="w-full h-full object-cover opacity-20">
        </div>
        <div class="container mx-auto px-6 relative z-10 aos-init aos-animate" data-aos="fade-up">
            <h1 class="text-6xl font-bold mb-4">Tension Hosting</h1>
            <p class="text-2xl mb-8 text-gray-300">Your Game, Our Host</p>
            
            <div class="flex flex-col sm:flex-row items-center justify-center gap-4 mt-8">
                <a href="#ready" class="group inline-flex items-center justify-center px-8 py-4 bg-green-500 hover:bg-green-600 text-white font-semibold rounded-lg transition-all duration-300 transform hover:scale-105 hover:shadow-xl min-w-[200px]">
                    Get Started
                    <i class="fas fa-arrow-right ml-2 group-hover:translate-x-1 transition-transform"></i>
                    
                </a>
                
                <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 text-center">
                    
        </div>

        
    </div></div></header>
    



<section class="py-20 bg-gradient">
    <div class="container mx-auto px-6">
        <h2 class="text-3xl font-bold mb-12 text-center aos-init" data-aos="fade-up">Our Features</h2>
        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8">

           
            <div class="feature-card p-6 rounded-xl aos-init" data-aos="fade-up" data-aos-delay="100">
                <div class="text-green-400 mb-4">
                    <i class="fa-solid fa-gamepad fa-lg"></i>
                </div>
                <h3 class="text-xl font-bold mb-2">Easy To Use Panel</h3>
                <p class="text-gray-400">It’s as easy as pie.</p>
            </div>

           
            <div class="feature-card p-6 rounded-xl aos-init" data-aos="fade-up" data-aos-delay="200">
                <div class="text-green-400 mb-4">
                    <i class="fa-solid fa-headset fa-lg"></i> 
                </div>
                <h3 class="text-xl font-bold mb-2">24/7 Support</h3>
                <p class="text-gray-400">No question is stupid. We are here to help.</p>
            </div>

         
            <div class="feature-card p-6 rounded-xl aos-init" data-aos="fade-up" data-aos-delay="300">
                <div class="text-green-400 mb-4">
                    <i class="fa-solid fa-bolt fa-lg"></i> 
                </div>
                <h3 class="text-xl font-bold mb-2">Easy Setup</h3>
                <p class="text-gray-400">All Automated, Pay and Play.</p>
            </div>

           
            <div class="feature-card p-6 rounded-xl aos-init" data-aos="fade-up" data-aos-delay="400">
                <div class="text-green-400 mb-4">
                    <i class="fa-solid fa-users fa-lg"></i> 
                </div>
                <h3 class="text-xl font-bold mb-2">Subusers</h3>
                <p class="text-gray-400">Allow your friends to use the panel, Your nan, or Your friend's nan... You get the gist.</p>
            </div>

          
            <div class="feature-card p-6 rounded-xl aos-init" data-aos="fade-up" data-aos-delay="500">
                <div class="text-green-400 mb-4">
                    <i class="fa-solid fa-calendar-check fa-lg"></i> 
                </div>
                <h3 class="text-xl font-bold mb-2">Automated Schedules</h3>
                <p class="text-gray-400">Set up auto restarts, messages in chat.</p>
            </div>

           
            <div class="feature-card p-6 rounded-xl aos-init" data-aos="fade-up" data-aos-delay="600">
                <div class="text-green-400 mb-4">
                    <i class="fa-solid fa-folder-open fa-lg"></i> 
                </div>
                <h3 class="text-xl font-bold mb-2">Included FTP</h3>
                <p class="text-gray-400">Connect to your server files via our included FTP.</p>
            </div>

           
            <div class="feature-card p-6 rounded-xl aos-init" data-aos="fade-up" data-aos-delay="700">
                <div class="text-green-400 mb-4">
                    <i class="fa-solid fa-cloud-upload-alt fa-lg"></i>
                </div>
                <h3 class="text-xl font-bold mb-2">One-Click Backups</h3>
                <p class="text-gray-400">Yes.. it's really one click. It's that easy.</p>
            </div>

           
            <div class="feature-card p-6 rounded-xl aos-init" data-aos="fade-up" data-aos-delay="800">
                <div class="text-green-400 mb-4">
                    <i class="fa-solid fa-shield fa-lg"></i> 
                    <!-- © 2024 Tension Hosting-->
                </div>
                <h3 class="text-xl font-bold mb-2">DDOS Protected</h3>
                <p class="text-gray-400">We will keep the pests away while you play with Aurologic DDoS Protection</p>
            </div>

        </div>
    </div>
</section>


<section class="py-20 bg-gradient">
    <div class="container mx-auto px-6">
        <h2 class="text-3xl font-bold mb-12 text-center aos-init" data-aos="fade-up">What Our Customers Say</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            <div class="testimonial-card p-6 rounded-xl aos-init" data-aos="fade-up" data-aos-delay="100">
                <div class="flex items-center mb-4">
                    <img src="https://ui-avatars.com/api/?name=Jesse+Delman" alt="Jesse Delman" class="w-12 h-12 rounded-full">
                    <div class="ml-4">
                        <h4 class="font-bold">Jesse Delman</h4>
                        <p class="text-sm text-gray-400">Via TrustPilot</p>
                    </div>
                </div>
                <p class="text-gray-300">"i dont know what to say thats bad. im a really honest reviewer, im like a court judge, i dont just look at one side, i like at the good AND the bad. everything is perfect about this server. the price, the customization, the customer support (shoutout to tyler), and everything. bro i dont know what to say thats bad, thank you tyler for this crazy good host."</p>
            </div>
            <div class="testimonial-card p-6 rounded-xl aos-init" data-aos="fade-up" data-aos-delay="200">
                <div class="flex items-center mb-4">
                    <!-- © 2024 Tension Hosting-->
                    <img src="https://user-images.trustpilot.com/669fa670f0b5933b251964d0/73x73.png" alt="Playz" class="w-12 h-12 rounded-full">
                    <div class="ml-4">
                        <h4 class="font-bold">Playz シ</h4>
                        <p class="text-sm text-gray-400">Via TrustPilot</p>
                    </div>
                </div>
                <p class="text-gray-300">"Best hosting service I've ever had. It has good performance and easy to use as well!"</p>
            </div>
            <div class="testimonial-card p-6 rounded-xl aos-init" data-aos="fade-up" data-aos-delay="300">
                <div class="flex items-center mb-4">
                    <img src="https://tensionhost.com/Logos/Meridian.webp" alt="Meridian" class="w-12 h-12 rounded-full">
                    <div class="ml-4">
                        <h4 class="font-bold">Meridian</h4>
                        <p class="text-sm text-gray-400">Via TrustPilot</p>
                    </div>
                </div>
                <p class="text-gray-300">"I have been using apex hosting for a little under a year, and as my server grew I could no longer maintain it for the price. Tyler reached out to me and gave me an excellent deal. Instead of paying 50 dollars per month to keep up with my playerbase I could pay 10 dollars per month for more than what I had with apex. Tension Host is very flexible and you can customize your server specs, so you don't pay extra for stuff you don't need. Tyler is very helpful and responds almost instantly on discord when he is awake. He can also help you out when you need more ram and cpu for intensive tasks like world generation."</p>
            </div>
        </div>
    </div>
</section>






    <div class="versions-carousel">
        <h2 class="text-3xl font-bold mb-12 text-center aos-init" data-aos="fade-up">All the versions you need, We have.</h2>
        <div class="carousel-wrapper">
            <div class="carousel-container" style="transform: translateX(-3.5px);">
               
            <div class="carousel-item"><img src="https://tensionhost.com/Logos/servertypes/vanilla.png" alt="Vanilla"><div class="hover-text">Vanilla</div></div><div class="carousel-item"><img src="https://tensionhost.com/Logos/servertypes/paper.png" alt="Paper"><div class="hover-text">Paper</div></div><div class="carousel-item"><img src="https://tensionhost.com/Logos/servertypes/pufferfish.png" alt="Pufferfish"><div class="hover-text">Pufferfish</div></div><div class="carousel-item"><img src="https://tensionhost.com/Logos/servertypes/spigot.png" alt="Spigot"><div class="hover-text">Spigot</div></div><div class="carousel-item"><img src="https://tensionhost.com/Logos/servertypes/folia.png" alt="Folia"><div class="hover-text">Folia</div></div><div class="carousel-item"><img src="https://tensionhost.com/Logos/servertypes/purpur.png" alt="Purpur"><div class="hover-text">Purpur</div></div><div class="carousel-item"><img src="https://tensionhost.com/Logos/servertypes/waterfall.png" alt="Waterfall"><div class="hover-text">Waterfall</div></div><div class="carousel-item"><img src="https://tensionhost.com/Logos/servertypes/velocity.png" alt="Velocity"><div class="hover-text">Velocity</div></div><div class="carousel-item"><img src="https://tensionhost.com/Logos/servertypes/fabric.png" alt="Fabric"><div class="hover-text">Fabric</div></div><div class="carousel-item"><img src="https://tensionhost.com/Logos/servertypes/bungeecord.png" alt="Bungeecord"><div class="hover-text">Bungeecord</div></div><div class="carousel-item"><img src="https://tensionhost.com/Logos/servertypes/quilt.png" alt="Quilt"><div class="hover-text">Quilt</div></div><div class="carousel-item"><img src="https://tensionhost.com/Logos/servertypes/forge.png" alt="Forge"><div class="hover-text">Forge</div></div><div class="carousel-item"><img src="https://tensionhost.com/Logos/servertypes/neoforge.png" alt="NeoForge"><div class="hover-text">NeoForge</div></div><div class="carousel-item"><img src="https://tensionhost.com/Logos/servertypes/mohist.png" alt="Mohist"><div class="hover-text">Mohist</div></div><div class="carousel-item"><img src="https://tensionhost.com/Logos/servertypes/arclight.png" alt="Arclight"><div class="hover-text">Arclight</div></div><div class="carousel-item"><img src="https://tensionhost.com/Logos/servertypes/sponge.png" alt="Sponge"><div class="hover-text">Sponge</div></div><div class="carousel-item"><img src="https://tensionhost.com/Logos/servertypes/leaves.png" alt="Leaves"><div class="hover-text">Leaves</div></div><div class="carousel-item"><img src="https://tensionhost.com/Logos/servertypes/canvas.png" alt="Canvas"><div class="hover-text">Canvas</div></div><div class="carousel-item"><img src="https://tensionhost.com/Logos/servertypes/vanilla.png" alt="Vanilla"><div class="hover-text">Vanilla</div></div><div class="carousel-item"><img src="https://tensionhost.com/Logos/servertypes/paper.png" alt="Paper"><div class="hover-text">Paper</div></div><div class="carousel-item"><img src="https://tensionhost.com/Logos/servertypes/pufferfish.png" alt="Pufferfish"><div class="hover-text">Pufferfish</div></div><div class="carousel-item"><img src="https://tensionhost.com/Logos/servertypes/spigot.png" alt="Spigot"><div class="hover-text">Spigot</div></div><div class="carousel-item"><img src="https://tensionhost.com/Logos/servertypes/folia.png" alt="Folia"><div class="hover-text">Folia</div></div><div class="carousel-item"><img src="https://tensionhost.com/Logos/servertypes/purpur.png" alt="Purpur"><div class="hover-text">Purpur</div></div><div class="carousel-item"><img src="https://tensionhost.com/Logos/servertypes/waterfall.png" alt="Waterfall"><div class="hover-text">Waterfall</div></div><div class="carousel-item"><img src="https://tensionhost.com/Logos/servertypes/velocity.png" alt="Velocity"><div class="hover-text">Velocity</div></div><div class="carousel-item"><img src="https://tensionhost.com/Logos/servertypes/fabric.png" alt="Fabric"><div class="hover-text">Fabric</div></div><div class="carousel-item"><img src="https://tensionhost.com/Logos/servertypes/bungeecord.png" alt="Bungeecord"><div class="hover-text">Bungeecord</div></div><div class="carousel-item"><img src="https://tensionhost.com/Logos/servertypes/quilt.png" alt="Quilt"><div class="hover-text">Quilt</div></div><div class="carousel-item"><img src="https://tensionhost.com/Logos/servertypes/forge.png" alt="Forge"><div class="hover-text">Forge</div></div><div class="carousel-item"><img src="https://tensionhost.com/Logos/servertypes/neoforge.png" alt="NeoForge"><div class="hover-text">NeoForge</div></div><div class="carousel-item"><img src="https://tensionhost.com/Logos/servertypes/mohist.png" alt="Mohist"><div class="hover-text">Mohist</div></div><div class="carousel-item"><img src="https://tensionhost.com/Logos/servertypes/arclight.png" alt="Arclight"><div class="hover-text">Arclight</div></div><div class="carousel-item"><img src="https://tensionhost.com/Logos/servertypes/sponge.png" alt="Sponge"><div class="hover-text">Sponge</div></div><div class="carousel-item"><img src="https://tensionhost.com/Logos/servertypes/leaves.png" alt="Leaves"><div class="hover-text">Leaves</div></div><div class="carousel-item"><img src="https://tensionhost.com/Logos/servertypes/canvas.png" alt="Canvas"><div class="hover-text">Canvas</div></div><div class="carousel-item"><img src="https://tensionhost.com/Logos/servertypes/vanilla.png" alt="Vanilla"><div class="hover-text">Vanilla</div></div><div class="carousel-item"><img src="https://tensionhost.com/Logos/servertypes/paper.png" alt="Paper"><div class="hover-text">Paper</div></div><div class="carousel-item"><img src="https://tensionhost.com/Logos/servertypes/pufferfish.png" alt="Pufferfish"><div class="hover-text">Pufferfish</div></div><div class="carousel-item"><img src="https://tensionhost.com/Logos/servertypes/spigot.png" alt="Spigot"><div class="hover-text">Spigot</div></div><div class="carousel-item"><img src="https://tensionhost.com/Logos/servertypes/folia.png" alt="Folia"><div class="hover-text">Folia</div></div><div class="carousel-item"><img src="https://tensionhost.com/Logos/servertypes/purpur.png" alt="Purpur"><div class="hover-text">Purpur</div></div><div class="carousel-item"><img src="https://tensionhost.com/Logos/servertypes/waterfall.png" alt="Waterfall"><div class="hover-text">Waterfall</div></div><div class="carousel-item"><img src="https://tensionhost.com/Logos/servertypes/velocity.png" alt="Velocity"><div class="hover-text">Velocity</div></div><div class="carousel-item"><img src="https://tensionhost.com/Logos/servertypes/fabric.png" alt="Fabric"><div class="hover-text">Fabric</div></div><div class="carousel-item"><img src="https://tensionhost.com/Logos/servertypes/bungeecord.png" alt="Bungeecord"><div class="hover-text">Bungeecord</div></div><div class="carousel-item"><img src="https://tensionhost.com/Logos/servertypes/quilt.png" alt="Quilt"><div class="hover-text">Quilt</div></div><div class="carousel-item"><img src="https://tensionhost.com/Logos/servertypes/forge.png" alt="Forge"><div class="hover-text">Forge</div></div><div class="carousel-item"><img src="https://tensionhost.com/Logos/servertypes/neoforge.png" alt="NeoForge"><div class="hover-text">NeoForge</div></div><div class="carousel-item"><img src="https://tensionhost.com/Logos/servertypes/mohist.png" alt="Mohist"><div class="hover-text">Mohist</div></div><div class="carousel-item"><img src="https://tensionhost.com/Logos/servertypes/arclight.png" alt="Arclight"><div class="hover-text">Arclight</div></div><div class="carousel-item"><img src="https://tensionhost.com/Logos/servertypes/sponge.png" alt="Sponge"><div class="hover-text">Sponge</div></div><div class="carousel-item"><img src="https://tensionhost.com/Logos/servertypes/leaves.png" alt="Leaves"><div class="hover-text">Leaves</div></div><div class="carousel-item"><img src="https://tensionhost.com/Logos/servertypes/canvas.png" alt="Canvas"><div class="hover-text">Canvas</div></div></div>
        </div>
    </div>


<section class="py-20 bg-gradient relative overflow-hidden">
    <div class="absolute inset-0 bg-white/5 backdrop-blur-sm"></div>
    
  
    <div class="container mx-auto px-6 relative mb-32">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
           
            <div class="space-y-8 aos-init" data-aos="fade-right">
                <h2 class="text-5xl font-bold text-white">VERSION CHANGER</h2>
                <p class="text-xl text-gray-300">Looking to install your favorite minecraft version? We've made it incredibly easy!</p>
                
                <div class="space-y-4">
                    <div class="feature-card p-6 rounded-xl bg-white/5 backdrop-blur-sm border border-white/10 transition-all hover:border-green-500/50">
                        <h3 class="text-xl font-bold text-white flex items-center">
                            <i class="fas fa-bolt text-green-400 mr-3"></i>
                            One-Click Installation
                            <!-- © 2024 Tension Hosting-->
                        </h3>
                        <p class="text-gray-400 mt-2">With just a simple click, you can instantly install any supported minecraft version and get back to doing things that matter.</p>
                    </div>
                </div>
            </div>
            
            

            <div style="position: relative; padding-bottom: calc(48.11715481171548% + 41px); height: 0; width: 100%;" data-aos="fade-right" class="aos-init">
                <iframe src="https://demo.arcade.software/yrHBeipRTOIGgWREwRHS?embed&amp;embed_mobile=inline&amp;embed_desktop=inline&amp;show_copy_link=true" title="Tutorial Server | Console" frameborder="0" loading="lazy" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" allow="clipboard-write" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; color-scheme: light;"></iframe>
              </div>
 
        </div>
    </div>

    
    <div class="container mx-auto px-6 relative">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
            

            <div style="position: relative; padding-bottom: calc(48.11715481171548% + 41px); height: 0; width: 100%;" data-aos="fade-left" class="aos-init">
                <iframe src="https://demo.arcade.software/ktVJCJJnYHp4mtx4hfti?embed&amp;embed_mobile=inline&amp;embed_desktop=inline&amp;show_copy_link=true" title="Tutorial Server | Console" frameborder="0" loading="lazy" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" allow="clipboard-write" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; color-scheme: light;"></iframe>
              </div>


            
            <div class="space-y-8 order-1 lg:order-2 aos-init" data-aos="fade-left">
                <h2 class="text-5xl font-bold text-white">BACKUP SYSTEM</h2>
                <p class="text-xl text-gray-300">Keep your world safe with our backup system</p>
                
                <div class="space-y-4">
                    <!-- © 2024 Tension Hosting-->
                    <div class="feature-card p-6 rounded-xl bg-white/5 backdrop-blur-sm border border-white/10 transition-all hover:border-green-500/50">
                        <h3 class="text-xl font-bold text-white flex items-center">
                            <i class="fas fa-cloud-upload-alt text-green-400 mr-3"></i>
                            One-Click Backups
                        </h3>
                        <p class="text-gray-400 mt-2">Create instant backups of your entire server with just one click. Restore your world at any time.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

  
    <div class="absolute -bottom-16 -right-16 w-64 h-64 bg-green-500/10 rounded-full blur-3xl"></div>
    <div class="absolute -top-16 -left-16 w-64 h-64 bg-blue-500/10 rounded-full blur-3xl"></div>


 
<section class="py-20 bg-gradient">
    <div class="container mx-auto px-6">
        <h2 class="text-3xl font-bold mb-12 text-center aos-init" data-aos="fade-up">Other Panel Features</h2>
        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8">

           
            <div class="feature-card p-6 rounded-xl aos-init" data-aos="fade-up" data-aos-delay="100">
                <div class="text-green-400 mb-4">
                    <i class="fa-solid fa-gamepad fa-lg"></i> 
                </div>
                <h3 class="text-xl font-bold mb-2">User Friendly</h3>
                <p class="text-gray-400">You don't need to have a degree to use it</p>
            </div>

           
            <div class="feature-card p-6 rounded-xl aos-init" data-aos="fade-up" data-aos-delay="100">
                <div class="text-green-400 mb-4">
                    <i class="fa-solid fa-shield-virus fa-lg"></i> 
                </div>
                <h3 class="text-xl font-bold mb-2">Malware Scanning</h3>
                <!-- © 2024 Tension Hosting-->
                <p class="text-gray-400">Optional malware scanning on server startup</p>
            </div>

          
            <div class="feature-card p-6 rounded-xl aos-init" data-aos="fade-up" data-aos-delay="100">
                <div class="text-green-400 mb-4">
                    <i class="fa-solid fa-rocket fa-lg"></i> 
                </div>
                <h3 class="text-xl font-bold mb-2">Optimized Flags</h3>
                <p class="text-gray-400">Enable optimized flags with one click</p>
            </div>

           
            <div class="feature-card p-6 rounded-xl aos-init" data-aos="fade-up" data-aos-delay="100">
                <div class="text-green-400 mb-4">
                    <i class="fa-solid fa-rotate fa-lg"></i>
                </div>
                <h3 class="text-xl font-bold mb-2">Auto Updating</h3>
                <p class="text-gray-400">Optional automatic updates to the latest server software build</p>
            </div>
        </div>
    </div>
</section>


<section id="ready" class="py-24 bg-[#0B1222] relative overflow-hidden">
    <div class="container mx-auto px-4 relative">
      <div class="max-w-4xl mx-auto text-center">
        <h2 class="text-4xl md:text-5xl font-bold mb-6 text-white aos-init" data-aos="fade-up">
          Ready to Purchase?
        </h2>
        
        <p class="text-xl text-gray-400 mb-4 aos-init" data-aos="fade-up" data-aos-delay="100">
          Get started with your Minecraft server today. No hidden fees, instant setup.
        </p>
  
        <p class="text-gray-400 mb-12 aos-init" data-aos="fade-up" data-aos-delay="150">
          Know what you doing? <a href="https://billing.tensionhost.com/checkout/config/2?config[16]=&amp;config[17]=65&amp;config[18]=70&amp;config[19]=80&amp;config[20]=82" class="text-green-500 hover:text-green-400 transition-colors">Create a custom plan →</a>
        </p>
  
        <style>
          /* Previous styles remain the same */
          
          .pricing-grid {
            display: grid;
            gap: 1.5rem;
            grid-template-columns: 1fr;
            margin: 2rem auto;
            max-width: 1200px;
          }
  
          @media (min-width: 768px) {
            .pricing-grid {
              grid-template-columns: repeat(3, 1fr);
            }
          }
  
          .pricing-card {
            background: rgba(13, 23, 42, 0.95);
            border: 1px solid rgba(59, 130, 246, 0.1);
            border-radius: 0.75rem;
            padding: 2rem;
            text-align: center;
            transition: all 0.2s ease;
            position: relative;
          }
  
          .pricing-card:hover {
            transform: translateY(-4px);
            border-color: #10B981;
          }
  
          .pricing-card.popular {
            background: rgba(16, 185, 129, 0.1);
            border: 1px solid #10B981;
          }
  
          .plan-name {
            font-size: 1.5rem;
            font-weight: bold;
            color: white;
            margin-bottom: 0.5rem;
          }
  
          .price {
            font-size: 2.5rem;
            font-weight: bold;
            color: #10B981;
            margin: 1rem 0;
          }
  
          .price-period {
            font-size: 0.875rem;
            color: #64748b;
          }
  
          .features-list {
            margin: 1.5rem 0;
            padding: 0;
            list-style: none;
          }
  
          .feature-item {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 0.75rem;
            color: #94a3b8;
            font-size: 0.875rem;
            gap: 0.5rem;
          }
  
          .feature-icon {
            color: #10B981;
            font-size: 1rem;
          }
  
          .cta-button {
            display: inline-block;
            width: 100%;
            padding: 0.75rem;
            border-radius: 0.375rem;
            font-size: 0.875rem;
            font-weight: 500;
            color: white;
            background-color: #0F172A;
            border: 1px solid #1E293B;
            transition: all 0.2s ease;
          }
  
          .cta-button:hover {
            background-color: #1E293B;
            border-color: #10B981;
          }
  
          .popular .cta-button {
            background-color: #10B981;
            border-color: #10B981;
          }
  
          .popular .cta-button:hover {
            background-color: #059669;
          }
          .popular-tag {
          position: absolute;
          top: -25px;
          left: 50%;
          transform: translateX(-50%);
          background-color: #10B981;
          color: black;
          padding: 0.5rem 1.5rem;
          font-size: 0.875rem;
          font-weight: bold;
          border-radius: 0.75rem;
          text-transform: uppercase;
          letter-spacing: 0.05em;
          box-shadow: 0 0 20px rgba(16, 185, 129, 0.5);
        }
        
        </style>
  
        <div class="pricing-grid">
          <!-- Basic Plan -->
          <div class="pricing-card aos-init" data-aos="fade-up" data-aos-delay="200">
            <h3 class="plan-name">BASIC</h3>
            <div class="price">$2.99</div>
            <div class="price-period">per month</div>
            <ul class="features-list">
              <li class="feature-item">
                <i class="fa-solid fa-memory feature-icon"></i>
                <span>4GB RAM</span>
              </li>
              <li class="feature-item">
                <i class="fa-solid fa-microchip feature-icon"></i>
                <span>200% CPU Boost</span>
              </li>
              <li class="feature-item">
                <i class="fa-solid fa-hard-drive feature-icon"></i>
                <span>10GB SSD Storage</span>
              </li>
              <li class="feature-item">
                <i class="fa-solid fa-cloud-arrow-up feature-icon"></i>
                <span>3 Backups Included</span>
              </li>
            </ul>
            <a href="https://billing.tensionhost.com/checkout/config/5" class="cta-button">Get Started</a>
          </div>
          
          <!-- Pro Plan -->
          <div class="pricing-card popular aos-init" data-aos="fade-up" data-aos-delay="400">
            <span class="popular-tag">Most Popular</span>
            <h3 class="plan-name">PRO</h3>
            <div class="price">$10</div>
            <div class="price-period">per month</div>
            <ul class="features-list">
              <li class="feature-item">
                <i class="fa-solid fa-memory feature-icon"></i>
                <span>8GB RAM</span>
              </li>
              <li class="feature-item">
                <i class="fa-solid fa-microchip feature-icon"></i>
                <span>300% CPU Boost</span>
              </li>
              <li class="feature-item">
                <i class="fa-solid fa-hard-drive feature-icon"></i>
                <span>20GB SSD Storage</span>
              </li>
              <li class="feature-item">
                <i class="fa-solid fa-cloud-arrow-up feature-icon"></i>
                <span>4 Backups Included</span>
              </li>
            </ul>
            <a href="https://billing.tensionhost.com/checkout/config/6" class="cta-button">Get Started</a>
          </div>
          
          <!-- Premium+ Plan -->
          <div class="pricing-card aos-init" data-aos="fade-up" data-aos-delay="600">
            <h3 class="plan-name">PREMIUM+</h3>
            <div class="price">$23</div>
            <div class="price-period">per month</div>
            <ul class="features-list">
              <li class="feature-item">
                <i class="fa-solid fa-memory feature-icon"></i>
                <span>16GB RAM</span>
              </li>
              <li class="feature-item">
                <i class="fa-solid fa-microchip feature-icon"></i>
                <span>400% CPU Boost</span>
              </li>
              <li class="feature-item">
                <i class="fa-solid fa-hard-drive feature-icon"></i>
                <span>20GB SSD Storage</span>
              </li>
              <li class="feature-item">
                <i class="fa-solid fa-cloud-arrow-up feature-icon"></i>
                <span>5 Included Backups</span>
              </li>
              <li class="feature-item">
                <i class="fa-solid fa-bolt feature-icon"></i>
                <span>Priority Support</span>
              </li>
            </ul>
            <a href="https://billing.tensionhost.com/checkout/config/7" class="cta-button">Get Started</a>
          </div>
        </div>
      </div>
    </div>
    
  </section>
<style>
    .group:hover .group-hover\:translate-x-1 {
        transform: translateX(0.25rem);
    }
    
    .transition-transform {
        transition-property: transform;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 300ms;
    }
    
    .transform {
        transform: translateZ(0);
    }
    
    .hover\:scale-105:hover {
        transform: scale(1.05);
    }
    
    .hover\:shadow-xl:hover {
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    }
</style>



<style>
.feature-card {
    transition: all 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.bg-gradient {
    background: linear-gradient(180deg, rgba(10,25,47,0.9) 0%, rgba(10,25,47,1) 100%);
}

.group:hover video {
    transform: scale(1.02) translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

video {
    transition: all 0.3s ease;
}

@media (max-width: 768px) {
    .order-1 {
        order: 1;
    }
    .order-2 {
        order: 2;
    }
}
</style>

    <footer class="py-12 bg-gradient relative">
       
        <div class="absolute inset-0 bg-white/5 backdrop-blur-sm border-t border-white/10"></div>
        
        <div class="container mx-auto px-6 relative">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                
                <div class="space-y-4">
                    <img src="https://tensionhost.com/Logos/Tension_Hosting_PNG.png" alt="Tension Logo" class="h-12">
                    <p class="text-gray-400">Your Game, Our Host.</p>
                    
                    <div class="flex space-x-4">
                        <a href="https://discord.tensionhost.com" class="text-gray-400 hover:text-green-400">
                            <i class="fab fa-discord fa-lg"></i>
                        </a>
                    </div>
                </div>
    
            
                <div class="space-y-4">
                    <h3 class="text-xl font-bold text-white">Quick Links</h3>
                    <ul class="space-y-2">
                        <!-- © 2024 Tension Hosting-->
                        <li><a href="https://panel.tensionhost.com" class="text-gray-400 hover:text-green-400">Game Panel</a></li>
                        <li><a href="https://billing.tensionhost.com" class="text-gray-400 hover:text-green-400">Client Area</a></li>
                        <li><a href="https://tensionhost.com/blog" class="text-gray-400 hover:text-green-400">Blog</a></li>
                        <li><a href="https://status.tensionhost.com" class="text-gray-400 hover:text-green-400">Status Page</a></li>
                    </ul>
                </div>
    
            
                <div class="space-y-4">
                    <h3 class="text-xl font-bold text-white">Support</h3>
                    <ul class="space-y-2">
                        <li><a href="https://discord.tensionhost.com" class="text-gray-400 hover:text-green-400">Discord Support</a></li>
                        <li><a href="https://billing.tensionhost.com/tickets" class="text-gray-400 hover:text-green-400">Submit Ticket</a></li>
                        <li><a href="https://discord.tensionhost.com" class="text-gray-400 hover:text-green-400">Contact Us</a></li>
                    </ul>
                </div>
    
                
                <div class="space-y-4">
                    <h3 class="text-xl font-bold text-white">Legal</h3>
                    <ul class="space-y-2">
                        <li><a href="https://tensionhost.com/privacy.html" class="text-gray-400 hover:text-green-400">Privacy Policy</a></li>
                        <li><a href="https://billing.tensionhost.com/tos" class="text-gray-400 hover:text-green-400">Terms of Service</a></li>
                    </ul>
                </div>
            </div>
    
         
                </div>
            
        
    </footer>
    

    <script>
        AOS.init({
            duration: 800,
            easing: 'ease-out-cubic',
            once: true
        });

       
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });
    </script>
<script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'8eb57f973f1c2fa6',t:'MTczMzA4MTQ5Ni4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script><script defer="" src="https://static.cloudflareinsights.com/beacon.min.js/vcd15cbe7772f49c399c6a5babf22c1241717689176015" integrity="sha512-ZpsOmlRQV6y907TI0dKBHq9Md29nnaEIPlkf84rnaERnq6zvWvPUqr2ft8M1aS28oN72PdrCzSjY4U6VaAw1EQ==" data-cf-beacon="{&quot;rayId&quot;:&quot;8eb57f973f1c2fa6&quot;,&quot;version&quot;:&quot;2024.10.5&quot;,&quot;r&quot;:1,&quot;serverTiming&quot;:{&quot;name&quot;:{&quot;cfExtPri&quot;:true,&quot;cfL4&quot;:true,&quot;cfSpeedBrain&quot;:true,&quot;cfCacheStatus&quot;:true}},&quot;token&quot;:&quot;11c496dcb44d4e449a685d68b487b61e&quot;,&quot;b&quot;:1}" crossorigin="anonymous"></script>


<style>
    
    .bg-gradient {
        background: linear-gradient(180deg, rgba(10,25,47,0.9) 0%, rgba(10,25,47,1) 100%);
    }
    
  
    .footer a {
        transition: all 0.3s ease;
    }
    
    .footer a:hover {
        transform: translateX(5px);
    }
    
  
    @media (max-width: 768px) {
        .footer .grid {
            gap: 2rem;
        }
    }
    </style>

</section><iframe height="1" width="1" style="position: absolute; top: 0px; left: 0px; border: none; visibility: hidden;"></iframe><div></div><script async="" charset="UTF-8" src="https://embed.tawk.to/_s/v4/app/67354992019/languages/en.js"></script><div id="khansoj2afo81733081499860" class="widget-visible"><iframe src="about:blank" frameborder="0" scrolling="no" width="64px" height="60px" style="outline:none !important; visibility:visible !important; resize:none !important; box-shadow:none !important; overflow:visible !important; background:none !important; opacity:1 !important; filter:alpha(opacity=100) !important; -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity 1}) !important; -mz-opacity:1 !important; -khtml-opacity:1 !important; top:auto !important; right:20px !important; bottom:20px !important; left:auto !important; position:fixed !important; border:0 !important; min-height:60px !important; min-width:64px !important; max-height:60px !important; max-width:64px !important; padding:0 !important; margin:0 !important; -moz-transition-property:none !important; -webkit-transition-property:none !important; -o-transition-property:none !important; transition-property:none !important; transform:none !important; -webkit-transform:none !important; -ms-transform:none !important; width:64px !important; height:60px !important; display:block !important; z-index:1000001 !important; background-color:transparent !important; cursor:none !important; float:none !important; border-radius:unset !important; pointer-events:auto !important; clip:auto !important; color-scheme:light !important;" id="hqemcc06h4jg1733081499939" class="" title="chat widget"></iframe><iframe src="about:blank" frameborder="0" scrolling="no" width="350px" height="500px" style="outline:none !important; visibility:visible !important; resize:none !important; box-shadow:none !important; overflow:visible !important; background:none !important; opacity:1 !important; filter:alpha(opacity=100) !important; -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity 1}) !important; -mz-opacity:1 !important; -khtml-opacity:1 !important; top:auto !important; right:10px !important; bottom:90px !important; left:auto !important; position:fixed !important; border:0 !important; min-height:500px !important; min-width:350px !important; max-height:500px !important; max-width:350px !important; padding:0 !important; margin:0 !important; -moz-transition-property:none !important; -webkit-transition-property:none !important; -o-transition-property:none !important; transition-property:none !important; transform:none !important; -webkit-transform:none !important; -ms-transform:none !important; width:350px !important; height:500px !important; display:none !important; z-index:1000002 !important; background-color:transparent !important; cursor:none !important; float:none !important; border-radius:5px !important; pointer-events:auto !important; clip:auto !important; color-scheme:light !important;" id="lustim30jmlo1733081500236" class="" title="chat widget"></iframe><iframe src="about:blank" frameborder="0" scrolling="no" width="360px" height="145px" style="outline:none !important; visibility:visible !important; resize:none !important; box-shadow:none !important; overflow:visible !important; background:none !important; opacity:1 !important; filter:alpha(opacity=100) !important; -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity 1}) !important; -mz-opacity:1 !important; -khtml-opacity:1 !important; top:auto !important; right:20px !important; bottom:100px; left:auto !important; position:fixed !important; border:0 !important; min-height:145px !important; min-width:360px !important; max-height:145px !important; max-width:360px !important; padding:0 !important; margin:0 !important; -moz-transition-property:none !important; -webkit-transition-property:none !important; -o-transition-property:none !important; transition-property:none !important; transform:none !important; -webkit-transform:none !important; -ms-transform:none !important; width:360px !important; height:145px !important; display:none !important; z-index:auto !important; background-color:transparent !important; cursor:none !important; float:none !important; border-radius:unset !important; pointer-events:auto !important; clip:auto !important; color-scheme:light !important;" id="nt81ludcfueg1733081500154" class="" title="chat widget"></iframe><div id="chat-bubble"></div></div></body></html>