https://noxia.cloud/

Eingereichte URL:
https://noxia.cloud/
Bericht beendet:

Die von der Seite ausgehenden identifizierten Links

LinkText

JavaScript-Variablen · 5 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
onbeforetoggleobject
documentPictureInPictureobject
onscrollendobject
tailwindobject
/template.htmlstring

Konsolenprotokoll-Meldungen · 1 gefunden

In der Web-Konsole protokollierte Meldungen

TypKategorieProtokoll
warningother
URL
https://cdn.tailwindcss.com/
Text
cdn.tailwindcss.com should not be used in production. To use Tailwind CSS in production, install it as a PostCSS plugin or use the Tailwind CLI: https://tailwindcss.com/docs/installation

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">
    <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>