https://noxia.cloud/

ID de l'analyse :
bca5633c-ae16-4970-bad8-8787e2ab93feTerminée
URL soumise :
https://noxia.cloud/
Fin du rapport :

Liens : 4 trouvé(s)

Variables JavaScript : 5 trouvée(s)

Messages de journal de console : 1 trouvé(s)

HTML

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="icon" type="image/x-icon" href="/assets/logo.png">
    <meta name="viewport" content="width=800">
    <title>Noxia - Reliable Hosting</title>
    <meta name="description" content="Reliable and powerful server hosting. Enjoy high performance, 24/7 support, and affordable plans.">
    <meta name="keywords" content="hosting, server, minecraft, discord bot, bot, game, host, cloud">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:[email protected]&amp;display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
            overflow-x: hidden;
            font-family: "Space Grotesk" !important;
            background: rgb(15,15,20);
        }
        
        .s1 {
            background: linear-gradient(
                to top,
                rgba(15, 15, 20, 0.8), 
                rgba(15, 15, 20, 0.5) 
              ),
              linear-gradient(to bottom, transparent, rgba(15, 15, 20)),
              url("/assets/bg.png");
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            height: 100vh;
        }

        ::-webkit-scrollbar {
            margin: 15px;
            background: transparent;
            border: none;
            width: 6px;
        }
        
        ::-webkit-scrollbar-track {
            background: none;
        }
        
        ::-webkit-scrollbar-thumb {
            background-color: rgb(255,255,255,0.05);
            border-radius: 4px;
        }
    </style>
<style>*, ::before, ::after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/* ! tailwindcss v3.4.14 | MIT License | https://tailwindcss.com */*,::after,::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}::after,::before{--tw-content:''}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.left-1\/2{left:50%}.z-10{z-index:10}.z-50{z-index:50}.m-5{margin:1.25rem}.mx-auto{margin-left:auto;margin-right:auto}.my-auto{margin-top:auto;margin-bottom:auto}.mb-1{margin-bottom:0.25rem}.mb-2{margin-bottom:0.5rem}.mb-20{margin-bottom:5rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.mb-\[60px\]{margin-bottom:60px}.ml-2{margin-left:0.5rem}.ml-\[-12px\]{margin-left:-12px}.ml-auto{margin-left:auto}.mr-2{margin-right:0.5rem}.mt-1\.5{margin-top:0.375rem}.mt-10{margin-top:2.5rem}.mt-2{margin-top:0.5rem}.mt-20{margin-top:5rem}.mt-4{margin-top:1rem}.mt-8{margin-top:2rem}.mt-\[30vh\]{margin-top:30vh}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.h-12{height:3rem}.h-32{height:8rem}.h-6{height:1.5rem}.h-8{height:2rem}.max-h-0{max-height:0px}.w-12{width:3rem}.w-48{width:12rem}.w-6{width:1.5rem}.w-\[70\%\]{width:70%}.w-full{width:100%}.max-w-\[70\%\]{max-width:70%}.max-w-full{max-width:100%}.flex-1{flex:1 1 0%}.-translate-x-1\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform{transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.list-none{list-style-type:none}.grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}.grid-cols-4{grid-template-columns:repeat(4, minmax(0, 1fr))}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-items-center{justify-items:center}.gap-8{gap:2rem}.space-x-3 > :not([hidden]) ~ :not([hidden]){--tw-space-x-reverse:0;margin-right:calc(0.75rem * var(--tw-space-x-reverse));margin-left:calc(0.75rem * calc(1 - var(--tw-space-x-reverse)))}.space-x-4 > :not([hidden]) ~ :not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1rem * var(--tw-space-x-reverse));margin-left:calc(1rem * calc(1 - var(--tw-space-x-reverse)))}.space-x-6 > :not([hidden]) ~ :not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1.5rem * var(--tw-space-x-reverse));margin-left:calc(1.5rem * calc(1 - var(--tw-space-x-reverse)))}.self-center{align-self:center}.overflow-hidden{overflow:hidden}.rounded-lg{border-radius:0.5rem}.rounded-t-lg{border-top-left-radius:0.5rem;border-top-right-radius:0.5rem}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-l-2{border-left-width:2px}.border-r-2{border-right-width:2px}.border-white\/10{border-color:rgb(255 255 255 / 0.1)}.border-white\/5{border-color:rgb(255 255 255 / 0.05)}.border-white\/\[4\%\]{border-color:rgb(255 255 255 / 4%)}.bg-blue-500{--tw-bg-opacity:1;background-color:rgb(59 130 246 / var(--tw-bg-opacity))}.bg-white\/10{background-color:rgb(255 255 255 / 0.1)}.bg-white\/5{background-color:rgb(255 255 255 / 0.05)}.bg-white\/\[2\%\]{background-color:rgb(255 255 255 / 2%)}.object-cover{object-fit:cover}.p-1{padding:0.25rem}.p-10{padding:2.5rem}.p-2{padding:0.5rem}.p-4{padding:1rem}.p-8{padding:2rem}.px-2{padding-left:0.5rem;padding-right:0.5rem}.px-3{padding-left:0.75rem;padding-right:0.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-0{padding-top:0px;padding-bottom:0px}.py-1\.5{padding-top:0.375rem;padding-bottom:0.375rem}.py-16{padding-top:4rem;padding-bottom:4rem}.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.py-3{padding-top:0.75rem;padding-bottom:0.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.pl-8{padding-left:2rem}.text-left{text-align:left}.text-center{text-align:center}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:0.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.text-blue-400{--tw-text-opacity:1;color:rgb(96 165 250 / var(--tw-text-opacity))}.text-blue-400\/80{color:rgb(96 165 250 / 0.8)}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128 / var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.text-white\/20{color:rgb(255 255 255 / 0.2)}.text-white\/50{color:rgb(255 255 255 / 0.5)}.text-white\/60{color:rgb(255 255 255 / 0.6)}.text-white\/70{color:rgb(255 255 255 / 0.7)}.text-opacity-70{--tw-text-opacity:0.7}.opacity-10{opacity:0.1}.shadow-lg{--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.backdrop-blur-\[25px\]{--tw-backdrop-blur:blur(25px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-blur-\[50px\]{--tw-backdrop-blur:blur(50px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-300{transition-duration:300ms}.ease-in-out{transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.hover\:translate-y-\[-4px\]:hover{--tw-translate-y:-4px;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:border-white\/10:hover{border-color:rgb(255 255 255 / 0.1)}.hover\:bg-blue-400:hover{--tw-bg-opacity:1;background-color:rgb(96 165 250 / var(--tw-bg-opacity))}.hover\:bg-white\/20:hover{background-color:rgb(255 255 255 / 0.2)}.hover\:bg-white\/5:hover{background-color:rgb(255 255 255 / 0.05)}.hover\:text-gray-400:hover{--tw-text-opacity:1;color:rgb(156 163 175 / var(--tw-text-opacity))}.hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.hover\:text-white\/65:hover{color:rgb(255 255 255 / 0.65)}.hover\:underline:hover{-webkit-text-decoration-line:underline;text-decoration-line:underline}.group:hover .group-hover\:block{display:block}.group:hover .group-hover\:translate-x-1{--tw-translate-x:0.25rem;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\:rotate-180{--tw-rotate:180deg;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\:bg-blue-400{--tw-bg-opacity:1;background-color:rgb(96 165 250 / var(--tw-bg-opacity))}.group:hover .group-hover\:text-white\/70{color:rgb(255 255 255 / 0.7)}@media (min-width: 640px){.sm\:mb-0{margin-bottom:0px}.sm\:flex{display:flex}.sm\:items-center{align-items:center}.sm\:justify-between{justify-content:space-between}}@media (min-width: 768px){.md\:ml-auto{margin-left:auto}.md\:mt-0{margin-top:0px}.md\:w-48{width:12rem}.md\:w-auto{width:auto}.md\:flex-row{flex-direction:row}.md\:justify-start{justify-content:flex-start}.md\:justify-end{justify-content:flex-end}.md\:py-8{padding-top:2rem;padding-bottom:2rem}.md\:text-6xl{font-size:3.75rem;line-height:1}}.rtl\:space-x-reverse:where([dir="rtl"], [dir="rtl"] *) > :not([hidden]) ~ :not([hidden]){--tw-space-x-reverse:1}@media (prefers-color-scheme: dark){.dark\:text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175 / var(--tw-text-opacity))}}</style></head>
<body>
    <section class="s1">
        <section class="max-w-[70%] mx-auto justify-items-center justify-center py-4">
            <header class="fixed z-50 w-[70%] bg-white/5 border border-white/5 rounded-lg backdrop-blur-[25px] px-2 shadow-lg flex items-center">
                <div class="flex items-center">
                    <img src="/assets/large.png" class="w-6 h-6 m-5">
                    <h1 class="text-white text-2xl ml-2">Noxia</h1>
                </div>
                <div class="absolute left-1/2 transform -translate-x-1/2 flex space-x-6">
                    <a href="/" class="p-1 text-white text-lg transition-all hover:text-white/65">
                        Home
                    </a>
                    <a class="p-1 text-white text-lg transition-all hover:text-white/65" href="/plans">
                        Plans
                    </a>
                    <a class="p-1 text-white text-lg transition-all hover:text-white/65" href="/contact">
                        Contact    
                    </a>
                    <li class="p-1 group relative list-none">
                        <a class="text-white text-lg transition-all group-hover:text-white/70 cursor-pointer dropdown-toggle flex items-center">
                            <i class="fa-solid fa-chevron-down text-xs mr-2 transition-all group-hover:rotate-180"></i> Legal
                        </a>
                        <div class="absolute backdrop-blur-[50px] hidden group-hover:block bg-white/10 border border-white/10 text-white shadow-lg rounded-lg z-10 w-48 p-2 dropdown-menu">
                            <a class="block px-4 py-2 text-md rounded-lg transition-all mb-1 hover:bg-white/20" href="/terms">Terms of Service</a>
                            <a class="block px-4 py-2 text-md rounded-lg transition-all mb-1 hover:bg-white/20" href="/privacy">Privacy Policy</a>
                            <a class="block px-4 py-2 text-md rounded-lg transition-all mb-1 hover:bg-white/20" href="/sla">Service Level Agreement</a>
                        </div>
                    </li>
                </div>
                <div class="ml-auto mr-2">
                    <li class="group relative list-none">
                        <a class="text-white text-lg bg-blue-500 rounded-lg px-3 py-1.5 transition-all group-hover:bg-blue-400 cursor-pointer dropdown-toggle flex items-center">
                            <i class="fa-solid fa-chevron-down text-xs mr-2 transition-all group-hover:rotate-180"></i> Client Area
                        </a>
                        <div class="absolute backdrop-blur-[50px] hidden group-hover:block bg-white/10 border border-white/10 text-white shadow-lg rounded-lg z-10 w-48 p-2 dropdown-menu">
                            <a href="https://billing.noxia.cloud" class="block px-4 py-2 text-md rounded-lg transition-all mb-1 hover:bg-white/20">Client Area</a>
                            <a href="https://panel.noxia.cloud" class="block px-4 py-2 text-md rounded-lg transition-all mb-1 hover:bg-white/20">Panel</a>
                        </div>
                    </li>
                </div>
            </header>
        </section>
        <section class="py-16 mt-[30vh] max-w-[70%] mx-auto justify-items-center justify-center">
            <div class="mx-auto flex flex-col md:flex-row items-center">
                <div class="flex-1">
                    <h1 class="text-3xl md:text-6xl font-bold text-white mb-6">Reliable Server Hosting</h1>
                    <p class="text-white text-opacity-70 text-lg mb-8">Host with ease on our ultra-fast servers. No downtime, no lag, just hosting.</p>
                    <div class="flex justify-center md:justify-start space-x-4">
                        <a class="transition-all bg-blue-500 hover:bg-blue-400 text-white py-3 px-6 rounded-lg text-lg group" href="/plans">
                            <i class="fas fa-arrow-right mr-2 text-xs transition-transform transform group-hover:translate-x-1"></i> Get Started
                        </a>
                        <a class="transition-all text-white py-3 px-6 rounded-lg text-lg cursor-pointer" href="/contact">
                            <i class="fa-solid fa-headset mr-2 text-xs"></i> Contact
                        </a>
                    </div>
                </div>
                <div class="md:w-auto mt-8 md:mt-0 flex justify-center md:justify-end md:ml-auto">
                    <img src="/assets/large.png" class="w-48 md:w-48 max-w-full">
                </div>
            </div>
        </section>
    </section>
    <section class="max-w-[70%] mx-auto mb-20">
        <div class="w-full rounded-lg items-center justify-center text-center">
            <div class="flex flex-col justify-center mb-[60px] mt-10">
                <h1 class="font-bold text-4xl text-white">Why Noxia?</h1>
                <h1 class="text-xl text-white/70 mt-2">Heres why you should choose us as your hosting provider.</h1>
            </div>
            <div class="grid grid-cols-3 gap-8 bg-white/[2%] border border-white/[4%] p-10 rounded-lg">
                <div class="w-full pl-8 p-4 border-r-2 border-white/10">
                    <div class="flex flex-row ml-[-12px]">
                        <div class="w-12 h-12">
                            <i class="fa-solid fa-headset text-blue-400/80 text-2xl mt-1.5"></i>
                        </div>
                        <a class="text-blue-400 my-auto text-2xl font-bold">Fast Support</a>
                    </div>
                    <div class="text-left">
                        <a class="text-white/60 text-md">Get help at any time with our dedicated support team available around the clock.</a>
                    </div>
                </div>
                <div class="w-full pl-8 p-4">
                    <div class="flex flex-row ml-[-12px]">
                        <div class="w-12 h-12">
                            <i class="fa-solid fa-bolt text-blue-400/80 text-2xl mt-1.5"></i>
                        </div>
                        <a class="text-blue-400 my-auto text-2xl font-bold">Reliable Servers</a>
                    </div>
                    <div class="text-left">
                        <a class="text-white/60 text-md">Noxia boasts a 99.9% uptime guarantee and powerful hardware, ensuring reliability.</a>
                    </div>
                </div>
                <div class="w-full pl-8 p-4 border-l-2 border-white/10">
                    <div class="flex flex-row ml-[-12px]">
                        <div class="w-12 h-12">
                            <i class="fa-solid fa-lock text-blue-400/80 text-2xl mt-1.5"></i>
                        </div>
                        <a class="text-blue-400 my-auto text-2xl font-bold">Security</a>
                    </div>
                    <div class="text-left">
                        <a class="text-white/60 text-md">Advanced security measures to protect your data and ensure privacy.</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="flex flex-col text-center justify-center mb-[60px] mt-20">
            <h1 class="font-bold text-4xl text-white">Choose your server</h1>
            <h1 class="text-xl text-white/70 mt-2">Select from a variety of servers to host</h1>
        </div>
        <div class="grid grid-cols-4 gap-8">
            <div class="w-full bg-white/[2%] group border border-white/[4%] rounded-lg transition-all hover:bg-white/5 hover:border-white/10 hover:translate-y-[-4px]">
                <div class="max-h-38 h-38 w-full">
                    <img src="https://billing.noxia.cloud/storage/categories/Zg548DS2KlpmWerJzwcwGcJ4uXqOTUoauLA9mFF8.png" alt="Minecraft" class="w-full h-32 rounded-t-lg object-cover">
                </div>
                <div class="p-8">
                    <h3 class="text-2xl font-bold text-white mb-2">Minecraft</h3>
                    <a href="https://billing.noxia.cloud/minecraft" class="block mt-4 text-white/50 hover:underline">View plans <i class="fas fa-arrow-right mr-2 text-xs transition-transform transform group-hover:translate-x-1"></i></a>
                </div>
            </div>
            <div class="w-full bg-white/[2%] group border border-white/[4%] rounded-lg transition-all hover:bg-white/5 hover:border-white/10 hover:translate-y-[-4px]">
                <div class="max-h-38 h-38 w-full">
                    <img src="https://billing.noxia.cloud/storage/categories/HgRQZyEUtcunltLDvjOrKFGwdwWnZTS5NVsjCV5w.png" alt="Mindustry" class="w-full h-32 rounded-t-lg object-cover">
                </div>
                <div class="p-8">
                    <h3 class="text-2xl font-bold text-white mb-2">Mindustry</h3>
                    <a href="https://billing.noxia.cloud/mindustry" class="block mt-4 text-white/50 hover:underline">View plans <i class="fas fa-arrow-right mr-2 text-xs transition-transform transform group-hover:translate-x-1"></i></a>
                </div>
            </div>
            <div class="w-full bg-white/[2%] group border border-white/[4%] rounded-lg transition-all hover:bg-white/5 hover:border-white/10 hover:translate-y-[-4px]">
                <div class="max-h-38 h-38 w-full">
                    <img src="https://billing.noxia.cloud/storage/categories/oWfGXOtgu7oUpaKg1BudkyoiSoM1ZQxrx9hmrALn.png" alt="Rust" class="w-full h-32 rounded-t-lg object-cover">
                </div>
                <div class="p-8">
                    <h3 class="text-2xl font-bold text-white mb-2">Rust</h3>
                    <a href="https://billing.noxia.cloud/rust" class="block mt-4 text-white/50 hover:underline">View plans <i class="fas fa-arrow-right mr-2 text-xs transition-transform transform group-hover:translate-x-1"></i></a>
                </div>
            </div>
            <div class="w-full bg-white/[2%] group border border-white/[4%] rounded-lg transition-all hover:bg-white/5 hover:border-white/10 hover:translate-y-[-4px]">
                <div class="max-h-38 h-38 w-full">
                    <img src="https://billing.noxia.cloud/storage/categories/BHg5iHEoJWxLGhp10aMmFVjLvyk7fm9BhzlW3ihV.png" alt="Apps" class="w-full h-32 rounded-t-lg object-cover">
                </div>
                <div class="p-8">
                    <h3 class="text-2xl font-bold text-white mb-2">Apps</h3>
                    <a href="https://billing.noxia.cloud/apps" class="block mt-4 text-white/50 hover:underline">View plans <i class="fas fa-arrow-right mr-2 text-xs transition-transform transform group-hover:translate-x-1"></i></a>
                </div>
            </div>
        </div>
        <div class="flex w-full mt-8">
            <a class="text-white text-2xl text-left w-full bg-white/[2%] border group border-white/[4%] rounded-lg transition-all hover:bg-white/5 hover:border-white/10 px-6 py-4" href="/plans">
            View all servers <i class="fas fa-arrow-right mr-2 text-xs transition-transform transform group-hover:translate-x-1"></i>
        </a>
        </div>
        <hr class="opacity-10 mt-20">
        <div class="flex flex-col mb-[60px] mt-20">
            <h1 class="font-bold text-4xl text-white">Frequently Asked Questions</h1>
            <h1 class="text-xl text-white/70 mt-2">Answering your questions</h1>
        </div>
        <div class="w-full bg-white/[2%] border border-white/[4%] p-10 rounded-lg">
            <div class="w-full">
                <div class="accordion-header flex justify-between items-center cursor-pointer border-b border-white/10 py-4" onclick="toggleAccordion(this)">
                    <span class="text-white text-lg font-semibold">What panel do you use?</span>
                    <i class="accordion-arrow fas fa-chevron-down text-white transition-all"></i>
                </div>
                <div class="accordion-content max-h-0 overflow-hidden py-0 border-b border-white/10 transition-all duration-300 ease-in-out">
                    <h1 class="text-white text-md">We use Pterodactyl Panel for easy server management and a great user experience.</h1>
                </div>
            </div>
            <div class="w-full">
                <div class="accordion-header flex justify-between items-center cursor-pointer border-b border-white/10 py-4" onclick="toggleAccordion(this)">
                    <span class="text-white text-lg font-semibold">How are your plans so cheap?</span>
                    <i class="accordion-arrow fas fa-chevron-down text-white transition-all"></i>
                </div>
                <div class="accordion-content max-h-0 overflow-hidden py-0 border-b border-white/10 transition-all duration-300 ease-in-out">
                    <h1 class="text-white text-md">Instead of relying on another provider, we own our hardware, allowing our prices to be as low as possible.</h1>
                </div>
            </div>
            <div class="w-full">
                <div class="accordion-header flex justify-between items-center cursor-pointer border-b border-white/10 py-4" onclick="toggleAccordion(this)">
                    <span class="text-white text-lg font-semibold">How long does server installation take?</span>
                    <i class="accordion-arrow fas fa-chevron-down text-white transition-all"></i>
                </div>
                <div class="accordion-content max-h-0 overflow-hidden py-0 border-b border-white/10 transition-all duration-300 ease-in-out">
                    <h1 class="text-white text-md">Due to our NVMe storage, our servers install extremely fast - it's probably done by the time you've read this!</h1>
                </div>
            </div>
        </div>
        <hr class="opacity-10 mt-20">
        <footer class="w-full mx-auto">
            <div class="w-full mx-auto p-4 md:py-8">
                <div class="sm:flex sm:items-center sm:justify-between w-full">
                    <a href="/" class="flex items-center mb-4 sm:mb-0 space-x-3 rtl:space-x-reverse">
                        <img src="/assets/logo.png" class="h-8" alt="Noxia Logo">
                        <span class="self-center text-2xl text-white">Noxia</span>
                    </a>
                    <ul class="flex justify-center items-center mb-6 text-sm font-medium text-gray-500 sm:mb-0 dark:text-gray-400 space-x-6">
                        <li>
                            <a href="https://status.noxia.cloud" class="text-white/70 hover:underline hover:text-white">Status</a>
                        </li>
                        <span class="text-white/20 text-sm">|</span>
                        <li>
                            <a href="https://trustpilot.com/review/noxia.cloud" class="text-white/70 hover:underline hover:text-white">Trustpilot</a>
                        </li>
                        <span class="text-white/20 text-sm">|</span>
                        <li>
                            <a class="text-white/70 hover:underline hover:text-white" href="/terms">Terms of Service</a>
                        </li>
                        <span class="text-white/20 text-sm">|</span>
                        <li>
                            <a class="text-white/70 hover:underline hover:text-white" href="/privacy">Privacy Policy</a>
                        </li>
                        <span class="text-white/20 text-sm">|</span>
                        <li>
                            <a class="text-white/70 hover:underline hover:text-white" href="/sla">SLA</a>
                        </li>
                    </ul>
                    <div class="flex space-x-4 text-md">
                        <a href="https://discord.gg/UCWyTcUGpH" class="text-white hover:text-gray-400">
                            <i class="fab fa-discord"></i>
                        </a>
                        <a href="https://reddit.com/r/noxiahosting" class="text-white hover:text-gray-400">
                            <i class="fab fa-reddit"></i>
                        </a>
                        <a href="https://youtube.com/@noxiahosting" class="text-white hover:text-gray-400">
                            <i class="fab fa-youtube"></i>
                        </a>
                        <a href="https://x.com/noxiahosting" class="text-white hover:text-gray-400">
                            <i class="fab fa-twitter"></i>
                        </a>
                    </div>
                </div>
            </div>
        </footer>
    </section>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        function toggleAccordion(element) {
            const content = element.nextElementSibling;
            const arrow = element.querySelector('.accordion-arrow');
            content.classList.toggle('max-h-0');
            content.classList.toggle('max-h-[500px]');
            content.classList.toggle('py-0');
            content.classList.toggle('py-4');
            arrow.classList.toggle('rotate-180');
        }
        const accordionHeaders = document.querySelectorAll('.accordion-header');
        accordionHeaders.forEach(header => {
            header.addEventListener('click', function() {
                toggleAccordion(header);
            });
        });
    });
    document.addEventListener('DOMContentLoaded', function() {
        const dropdownToggles = document.querySelectorAll('.dropdown-toggle');
        const dropdownMenus = document.querySelectorAll('.dropdown-menu');

        dropdownToggles.forEach((toggle, index) => {
            toggle.addEventListener('click', function(event) {
                event.preventDefault();
                dropdownMenus[index].classList.toggle('hidden');
            });
        });

        document.addEventListener('click', function(event) {
            dropdownToggles.forEach((toggle, index) => {
                const menu = dropdownMenus[index];
                if (!toggle.contains(event.target) && !menu.contains(event.target)) {
                    menu.classList.add('hidden');
                }
            });
        });
    });
</script>
</body></html>