<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <title>Hostza - Sua aplicação e website online</title>
    <link rel="icon" href="@settings('favicon', 'https://media.discordapp.net/attachments/1043756934920155137/1197610916129284197/icon_hostza.png?ex=65f34414&is=65e0cf14&hm=a0787346c95909c6028b3f339715b20dd01f514df367d9ffe92ae3eaecfc76ea&=&format=webp&quality=lossless')">

    {{-- meta tags --}}
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <!-- Meta Description Tag: Affects click-through rates from search results -->
    <meta name="description" content="{{ $meta_description ?? settings('seo::description', 'Manage your orders with an easy-to-use Dashboard') }}">
    <meta name="theme-color" content="@settings('seo::color', '#4f46e5')">
    <meta name="keywords" content="{{ $meta_keywords ?? settings('seo::keywords', '')}}">

    <!-- Meta Robots Tag: Controls search engine crawling and indexing -->
    <meta name="robots" content="@settings('seo::robots', 'index, follow')">

    <!-- Open Graph Tags: Enhances visibility and engagement on social media platforms -->
    <meta property="og:title" content="@settings('seo::title', 'WemX')">
    <meta property="og:description" content="{{ $meta_description ?? settings('seo::description', 'Manage your orders with an easy-to-use Dashboard') }}">
    <meta property="og:image" content="@settings('seo::image', '/static/wemx.png')">

    <link rel="stylesheet" href="{{ Theme::get('Default')->assets }}assets/css/custom.css">
    <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">

    @if(settings('google::analytics_code'))
    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id={{ settings('google::analytics_code') }}"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', '{{ settings("google::analytics_code") }}');
    </script>
    @endif

    @include(Portal::path('layouts.tailwind'))
</head>
<body>
@include(Portal::path('layouts.header'))

<section id="home" class="bg-white dark:bg-gray-900" style="background: url('https://cdn.discordapp.com/attachments/1043756934920155137/1212925713758289960/43a6e4c6-3d02-4db3-bbf5-05d445cc12d2.jpg?ex=65f39c19&is=65e12719&hm=8d023e3fd6b392adc8817435f7b13d8c8f1b80076016dbb35f8bc1db48187fd6&'); background-repeat: no-repeat; background-size: cover;">
<div class="max-w-screen-xl px-4 pt-8 mx-auto text-center lg:pt-16 lg:px-12">
            <a href="/news" class="inline-flex justify-between items-center py-1 px-1 pr-4 mb-7 text-sm text-gray-700 bg-gray-100 rounded-full dark:bg-gray-800 dark:text-white" role="alert">
              <span class="text-xs bg-primary-600 rounded-full text-white px-4 py-1.5 mr-3">New</span> <span class="text-sm font-medium">Clusters available for immediate deployment for large-scale AI and machine learning workloads.</span>
              <svg class="ml-2 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
            </a>
            <h1 class="mb-4 text-4xl font-extrabold tracking-tight leading-none text-gray-900 md:text-5xl lg:text-6xl dark:text-white">
            Virtual servers for
            </h1>
            <h1 class="text-4xl font-extrabold tracking-tight text-transparent transition-all duration-500 sm:text-4xl md:text-6xl bg-gradient-to-r from-blue-600 via-blue-300 to-cyan-600 bg-clip-text background-animate">
            Any workload
            </h1>
            <p class="mb-8 font-light text-gray-500 md:text-lg lg:text-xl sm:px-16 xl:px-48 dark:text-gray-400">
            Easily create and run VMs online on a reliable, high-performance cloud infrastructure. Choose from predefined or custom machine types for web servers, databases, AI, and more.
            </p>
            <div class="flex flex-col mb-8 lg:mb-16 space-y-4 sm:flex-row sm:justify-center sm:space-y-0 sm:space-x-4">
                <a href="/dashboard" class="inline-flex items-center justify-center px-5 py-3 text-base font-medium text-center text-white rounded-lg bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 dark:focus:ring-primary-900">
                  <i class='bx bxs-dashboard bx-xs mr-2'></i>
                  Dashboard
                </a>
                <a href="https://hostza.app/p/documentation" target="_blank" class="inline-flex items-center justify-center px-5 py-3 text-base font-medium text-center text-gray-900 border border-gray-300 rounded-lg hover:bg-gray-100 focus:ring-4 focus:ring-gray-100 dark:text-white dark:border-gray-700 dark:hover:bg-gray-700 dark:focus:ring-gray-800">
                    Documentation
                    <svg class="w-5 h-5 ml-2 -mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
                </a>
            </div>
            <img class="mx-auto mb-5 lg:mb-8 border border-gray-200 rounded-lg shadow-xl dark:border-gray-600 z-1 dark:hidden" src="https://hostza.app/storage/images/dark-dashboard-skeleton.svg" alt="dashboard overview">
            <img class="mx-auto mb-5 lg:mb-8 border border-gray-200 rounded-lg shadow-xl dark:border-gray-600 hidden dark:block z-1" src="https://hostza.app/storage/images/dark-dashboard-skeleton.svg" alt="dashboard overview dark">
        </div>
        <div class="pt-48 lg:pb-16 pb-8 -mt-48 bg-gray-50 sm:pt-80 sm:-mt-80 dark:bg-gray-800 z-2">
        </div>
</section>

<script>
/**
 *
 * You can write your JS code here, DO NOT touch the default style file
 * because it will make it harder for you to update.
 * 
 */

 "use strict";

const scrollers = document.querySelectorAll(".scroller");

// If a user hasn't opted in for recuded motion, then we add the animation
if (!window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
addAnimation();
}

function addAnimation() {
scrollers.forEach((scroller) => {
    // add data-animated="true" to every `.scroller` on the page
    scroller.setAttribute("data-animated", true);

    // Make an array from the elements within `.scroller-inner`
    const scrollerInner = scroller.querySelector(".scroller__inner");
    const scrollerContent = Array.from(scrollerInner.children);

    // For each item in the array, clone it
    // add aria-hidden to it
    // add it into the `.scroller-inner`
    scrollerContent.forEach((item) => {
    const duplicatedItem = item.cloneNode(true);
    duplicatedItem.setAttribute("aria-hidden", true);
    scrollerInner.appendChild(duplicatedItem);
    });
});
}

</script>

<style>
    .wasd {
        margin: 0 35px;
    }
    
    .scroller__inner {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    }

    .scroller[data-animated="true"] {
    overflow: hidden;
    -webkit-mask: linear-gradient(
        90deg,
        transparent,
        white 20%,
        white 80%,
        transparent
    );
    mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
    }

    .scroller[data-animated="true"] .scroller__inner {
    width: max-content;
    flex-wrap: nowrap;
    animation: scroll var(--_animation-duration, 40s)
        var(--_animation-direction, forwards) linear infinite;
    }

    .scroller[data-direction="right"] {
    --_animation-direction: reverse;
    }

    .scroller[data-direction="left"] {
    --_animation-direction: forwards;
    }

    .scroller[data-speed="fast"] {
    --_animation-duration: 20s;
    }

    .scroller[data-speed="slow"] {
    --_animation-duration: 60s;
    }

    @keyframes scroll {
    to {
        transform: translate(calc(-50% - 0.5rem));
    }
    }
</style>

<script src="https://hosting.xenority.com/assets/themes/xenority/assets/js/components/counting.js"></script>

<section class="bg-white dark:bg-gray-900">
    <div class="py-8 px-4 mx-auto max-w-screen-xl lg:py-16">
    <h2 class="mb-8 text-3xl font-extrabold tracking-tight leading-tight text-center text-gray-900 lg:mb-16 dark:text-white md:text-4xl">Check out some of our customers.</h2>
                    <div class="scroller" data-direction="left" data-speed="slow" data-animated="true">
                                    <ul class="tag-list scroller__inner">
                            <a href="https://atlasplugins.com/" class="wasd flex justify-center items-center">
                                <img src="https://cdn.discordapp.com/attachments/1180910126882881567/1207017705035661372/2a5f6c2faa0667b4af8e4ff7234cf79a.png?ex=65f092d6&is=65de1dd6&hm=5d9e8e573a028aeaee4b673b102ee0ea8df445886c59b2e2d2787f12e2024f55&" class="hover:text-gray-900 dark:hover:text-white" style="height: 100px">
                                <h2 class="text-3xl font-extrabold tracking-tight leading-tight text-center text-gray-900 dark:text-white md:text-3xl ml-4 whitespace-nowrap">Atlas Plugins</h2>
                            </a>
                                                                                                                            <a href="https://discord.gg/zyramc" class="wasd flex justify-center items-center">
                                <img src="https://cdn.discordapp.com/attachments/1043756934920155137/1204148935636033536/zyra-fotor-20240205163723.png?ex=65ef5d96&is=65dce896&hm=3faf5ed5f321ed827cff139736500881fb196aa55a840f9b026c84780f4416f8&" class="hover:text-gray-900 dark:hover:text-white" style="height: 100px">
                                <h2 class="text-3xl font-extrabold tracking-tight leading-tight text-center text-gray-900 dark:text-white md:text-3xl ml-4 whitespace-nowrap">ZyraMC</h2>
                            </a>
                                                                                <a href="https://discord.gg/dyKJEq9WjR" class="wasd flex justify-center items-center">
                                <img src="https://cdn.discordapp.com/attachments/1043756934920155137/1204149545689415710/d48d6c89633b5e7b1f434f77c89408f8-fotor-20240205163955.png?ex=65ef5e27&is=65dce927&hm=bb4191b33c9667131e06fa38b73f753f659d438731d8cba0b198047a1fb6ff5f&" class="hover:text-gray-900 dark:hover:text-white" style="height: 100px">
                                <h2 class="text-3xl font-extrabold tracking-tight leading-tight text-center text-gray-900 dark:text-white md:text-3xl ml-4 whitespace-nowrap">JK Comunidade</h2>
                            </a>

                            <a href="https://discord.gg/mestre-do-networking-1072588367851687986" class="wasd flex justify-center items-center">
                                <img src="https://cdn.discordapp.com/attachments/1043756934920155137/1213225791429673022/a_e0b93a09e1375a5e0e7d9dfac8eb912d.gif?ex=65f4b391&is=65e23e91&hm=b20d50c6bfa4f5e3cc3030719d14433e644197f2d1b3f0840aa18872133e1cf1&" class="rounded-full hover:text-gray-900 dark:hover:text-white" style="height: 100px">
                                <h2 class="text-3xl font-extrabold tracking-tight leading-tight text-center text-gray-900 dark:text-white md:text-3xl ml-4 whitespace-nowrap">Mestre Networking</h2>
                            </a>
                                                                                <a href="https://discord.gg/JGaKKjzrFx" class="wasd flex justify-center items-center">
                                <img src="https://cdn.discordapp.com/attachments/1206672160232443955/1207759671591706724/logo.png?ex=65f345d8&is=65e0d0d8&hm=0bc52f5e6e70299cbba0a5dc84460808c3a30d702e41002574b32660156a4c1f&" class="rounded-full hover:text-gray-900 dark:hover:text-white" style="height: 100px">
                                <h2 class="text-3xl font-extrabold tracking-tight leading-tight text-center text-gray-900 dark:text-white md:text-3xl ml-4 whitespace-nowrap">Grafi Mine</h2>
                            </a>
                                                                                <a href="https://discord.gg/EhfxBCQMb6" class="wasd flex justify-center items-center">
                                <img src="https://cdn.discordapp.com/attachments/1206672160232443955/1207239673571966986/1685558101279.png?ex=65f1618f&is=65deec8f&hm=13832ab113670b41e226ea1458847d0de1499ab01e2ee24481cea7c3e87bddb8&" class="rounded-full hover:text-gray-900 dark:hover:text-white" style="height: 100px">
                                <h2 class="text-3xl font-extrabold tracking-tight leading-tight text-center text-gray-900 dark:text-white md:text-3xl ml-4 whitespace-nowrap">Union Lab</h2>
                            </a>
                                                                                <a href="https://discord.gg/7yErFGAZg2" class="wasd flex justify-center items-center">
                                <img src="https://cdn.discordapp.com/attachments/1206672160232443955/1212786310176186438/Back.png?ex=65f31a44&is=65e0a544&hm=99e13a5ab05e3179f1c3271f10c3cc0661c2ebd9c0fafeaaca0cc047a4417feb&" class="rounded-full hover:text-gray-900 dark:hover:text-white" style="height: 100px">
                                <h2 class="text-3xl font-extrabold tracking-tight leading-tight text-center text-gray-900 dark:text-white md:text-3xl ml-4 whitespace-nowrap">Black Store</h2>
                            </a>
                                                                                <a href="https://discord.com/invite/xa3SjUdHv2" class="wasd flex justify-center items-center">
                                <img src="https://cdn.discordapp.com/attachments/1206672160232443955/1209900642299158588/6b4a1e135848463.61ef24b790d19.png?ex=65f1d547&is=65df6047&hm=cc781c8942bb82f506896af32e56763ccbecd6c27404dc3798860b886460dced&" class="rounded-full hover:text-gray-900 dark:hover:text-white" style="height: 100px">
                                <h2 class="text-3xl font-extrabold tracking-tight leading-tight text-center text-gray-900 dark:text-white md:text-3xl ml-4 whitespace-nowrap">NiverMC</h2>
                            </a>
                                                                                                                            <a href="https://discord.gg/hostza" class="wasd flex justify-center items-center">
                                <img src="https://cdn.discordapp.com/attachments/1206672160232443955/1208121094746148994/PV.png?ex=65eb5bf2&is=65d8e6f2&hm=842771df3771201eade3523ce7977b066094db1ed3cf6d669fa62024237e67eb&" class="rounded-full hover:text-gray-900 dark:hover:text-white" style="height: 100px">
                                <h2 class="text-3xl font-extrabold tracking-tight leading-tight text-center text-gray-900 dark:text-white md:text-3xl ml-4 whitespace-nowrap">Perfect Visions</h2>
                            </a>
                                                                                <a href="https://discord.gg/frostgraphic" class="wasd flex justify-center items-center">
                                <img src="https://cdn.discordapp.com/attachments/1206672160232443955/1206720020219170877/frost.png?ex=65ef7d98&is=65dd0898&hm=ca9568844a5e1f0e1d02f9d5ef6b405b97c655b8348e65f21767cdecc8247f94&" class="rounded-full hover:text-gray-900 dark:hover:text-white" style="height: 100px">
                                <h2 class="text-3xl font-extrabold tracking-tight leading-tight text-center text-gray-900 dark:text-white md:text-3xl ml-4 whitespace-nowrap">Frost Designers</h2>
                            </a>
                            <a href="https://discord.gg/valleyrp" class="wasd flex justify-center items-center">
                                <img src="https://cdn.discordapp.com/attachments/1043756934920155137/1207392414155677806/valleyRP-fotor-20240214152520.png?ex=65f1efcf&is=65df7acf&hm=25053dc13b5e88ecc4b8f80f5de9ba6c08caa70daa034b1e7171faec04afec38&" class="rounded-full hover:text-gray-900 dark:hover:text-white" style="height: 100px">
                                <h2 class="text-3xl font-extrabold tracking-tight leading-tight text-center text-gray-900 dark:text-white md:text-3xl ml-4 whitespace-nowrap">Valley Roleplay</h2>
                            </a>
                                                                                <a href="https://discord.gg/bruxinhabot" class="wasd flex justify-center items-center">
                                <img src="https://cdn.discordapp.com/attachments/1043756934920155137/1207393869680082944/OIG1-removebg-preview.png?ex=65f1f12a&is=65df7c2a&hm=8eb41bf5531ea018ac13bc083e467b6b580fff3ab5065818fa776010b517e1ff&" class="rounded-full hover:text-gray-900 dark:hover:text-white" style="height: 100px">
                                <h2 class="text-3xl font-extrabold tracking-tight leading-tight text-center text-gray-900 dark:text-white md:text-3xl ml-4 whitespace-nowrap">Bruxinha Bot</h2>
                            </a>
                                                                                <a href="https://discord.gg/hostza" class="wasd flex justify-center items-center">
                                <img src="https://cdn.discordapp.com/attachments/1043756934920155137/1207391024675291146/sarinha_bot-fotor-20240214152016.png?ex=65f1ee84&is=65df7984&hm=d3d6d0f4ed3e35629bbf725b720f8d12c5fe26e93bce1b63c089609fad492660&" class="roundend-full hover:text-gray-900 dark:hover:text-white" style="height: 100px">
                                <h2 class="text-3xl font-extrabold tracking-tight leading-tight text-center text-gray-900 dark:text-white md:text-3xl ml-4 whitespace-nowrap">Sarinha Bot</h2>
                            </a>
                                                                                                                            <a href="https://discord.gg/yam8PMBJhV" class="wasd flex justify-center items-center">
                                <img src="https://cdn.discordapp.com/attachments/1043756934920155137/1213160509864550450/triteraslogodark.png?ex=65f476c4&is=65e201c4&hm=c466dd91c03c2aa4c01662db4acbadfea9a716ed513db60af097e9f974a434a2&" class="rounded-full hover:text-gray-900 dark:hover:text-white" style="height: 100px">
                                <h2 class="text-3xl font-extrabold tracking-tight leading-tight text-center text-gray-900 dark:text-white md:text-3xl ml-4 whitespace-nowrap">Triters Bot</h2>
                            </a>
                                                                                <a href="https://discord.gg/hostza" class="wasd flex justify-center items-center">
                                <img src="https://cdn.discordapp.com/attachments/1043756934920155137/1207392726908141658/arcanian-fotor-20240214152728.png?ex=65f1f01a&is=65df7b1a&hm=b8fbf15ef01d7d1656acb0a7bc7ace1c42bbc9ee14a79c52904faa6d95727cbc&" class="rounded-full hover:text-gray-900 dark:hover:text-white" style="height: 100px">
                                <h2 class="text-3xl font-extrabold tracking-tight leading-tight text-center text-gray-900 dark:text-white md:text-3xl ml-4 whitespace-nowrap">Arcanian Games</h2>
                            </a>
                                                                                <a href="https://discord.gg/vkp45kj" class="wasd flex justify-center items-center">
                                <img src="https://cdn.discordapp.com/attachments/1043756934920155137/1204148554298556426/fotor-20240205163541.png?ex=65ef5d3b&is=65dce83b&hm=f92c0027bb7496bb014d344b47649c8987d7252a3a01e1976a28af62d87b91eb&" class="rounded-full hover:text-gray-900 dark:hover:text-white" style="height: 100px">
                                <h2 class="text-3xl font-extrabold tracking-tight leading-tight text-center text-gray-900 dark:text-white md:text-3xl ml-4 whitespace-nowrap">Reconfigs</h2>
                            </a></ul>
                    </div>
    </div>
    <!--<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 157 1440 162">
        <path fill="#080610" d="M0,192L80,181.3C160,171,320,149,480,160C640,171,800,213,960,218.7C1120,224,1280,192,1360,176L1440,160L1440,320L1360,320C1280,320,1120,320,960,320C800,320,640,320,480,320C320,320,160,320,80,320L0,320Z"></path>
    </svg>-->
</section>

<section id="features" class="bg-gray-50 dark:bg-gray-800">
    <div class="py-8 px-4 mx-auto max-w-screen-xl sm:py-16 lg:px-6">
        <div class="mb-8 max-w-screen-md lg:mb-16">
            <h2 class="mb-4 text-4xl font-extrabold text-gray-900 dark:text-white">Innovative Features</h2>
            <p class="text-gray-500 sm:text-xl dark:text-gray-400">
            Here at Hostza, we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.
            </p>
        </div>
        <div class="space-y-8 md:grid md:grid-cols-2 lg:grid-cols-3 md:gap-12 md:space-y-0">
            <div>
                <div
                    class="flex justify-center items-center mb-4 w-10 h-10 rounded-full bg-primary-100 lg:h-12 lg:w-12 dark:bg-primary-900">
                    <div class="text-primary-600 dark:text-primary-300 text-2xl">
                    <i class='bx bxl-google-cloud'></i>
                    </div>
                </div>
                <h3 class="mb-2 text-xl font-bold dark:text-white">Managed hosting</h3>
                <p class="text-gray-500 dark:text-gray-400">
                Our solutions are simple, practical, economical and superior to conventional alternatives, ensuring a quality and convenient service.
                </p>
            </div>

            <div>
                <div
                    class="flex justify-center items-center mb-4 w-10 h-10 rounded-full bg-primary-100 lg:h-12 lg:w-12 dark:bg-primary-900">
                    <div class="text-primary-600 dark:text-primary-300 text-2xl">
                    <i class='bx bxs-shield'></i>
                    </div>
                </div>
                <h3 class="mb-2 text-xl font-bold dark:text-white">Security</h3>
                <p class="text-gray-500 dark:text-gray-400">
                Safety is our priority at every stage of the process, so that our customers have the best experience. Safeguarding your data and information is our main goal, and we do everything to preserve your privacy.
                </p>
            </div>

            <div>
                <div
                    class="flex justify-center items-center mb-4 w-10 h-10 rounded-full bg-primary-100 lg:h-12 lg:w-12 dark:bg-primary-900">
                    <div class="text-primary-600 dark:text-primary-300 text-2xl">
                        <i class="bx bx-revision"></i>
                    </div>
                </div>
                <h3 class="mb-2 text-xl font-bold dark:text-white">Automatic Backups</h3>
                <p class="text-gray-500 dark:text-gray-400">
                    {!! __('client.backup_manager_desc') !!}
                </p>
            </div>

            <div>
                <div
                    class="flex justify-center items-center mb-4 w-10 h-10 rounded-full bg-primary-100 lg:h-12 lg:w-12 dark:bg-primary-900">
                    <div class="text-primary-600 dark:text-primary-300 text-2xl">
                    <i class='bx bxs-dashboard' ></i>
                    </div>
                </div>
                <h3 class="mb-2 text-xl font-bold dark:text-white">Simple & Easy</h3>
                <p class="text-gray-500 dark:text-gray-400">
                We handle the arduous tasks so you can have fun and focus on caring for and growing your community. Join us today and feel the serenity of having your application hosted by the best!
                </p>
            </div>

            <div>
                <div
                    class="flex justify-center items-center mb-4 w-10 h-10 rounded-full bg-primary-100 lg:h-12 lg:w-12 dark:bg-primary-900">
                    <div class="text-primary-600 dark:text-primary-300 text-2xl">
                        <i class="bx bxs-time-five"></i>
                    </div>
                </div>
                <h3 class="mb-2 text-xl font-bold dark:text-white">Automated Tasks</h3>
                <p class="text-gray-500 dark:text-gray-400">
                    {!! __('client.schedule_manager_desc') !!}
                </p>
            </div>

            <div>
                <div
                    class="flex justify-center items-center mb-4 w-10 h-10 rounded-full bg-primary-100 lg:h-12 lg:w-12 dark:bg-primary-900">
                    <div class="text-primary-600 dark:text-primary-300 text-2xl">
                        <i class="bx bxs-data"></i>
                    </div>
                </div>
                <h3 class="mb-2 text-xl font-bold dark:text-white">Database support</h3>
                <p class="text-gray-500 dark:text-gray-400">
                    {!! __('client.database_manager_desc') !!}
                </p>
            </div>
        </div>
    </div>
</section>

<section class="bg-white dark:bg-gray-900" id="pricing">
    <div class="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6">
        @if($selected_category !== NULL)
            <div class="mx-auto max-w-screen-md text-center mb-8 lg:mb-12">
                <h2 class="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white">{!! __('client.viewing_plans_for') !!} {{ $selected_category->name }}</h2>
                <p class="mb-5 font-light text-gray-500 sm:text-xl dark:text-gray-400">{{ $selected_category->description }}</p>
            </div>
            <div class="space-y-8 lg:grid lg:grid-cols-3 sm:gap-6 xl:gap-10 lg:space-y-0">
                @foreach ($selected_category->packages as $package)

                    @if($package->status == 'unlisted' OR $package->status == 'inactive' OR $package->status == 'restricted')
                        @if($package->status == 'restricted')
                            @if(Auth::guest() OR !Auth::user()->is_admin())
                                @continue
                            @endif
                        @else
                            @continue
                        @endif
                    @endif
                    <div
                        class="flex flex-col p-6 mx-auto max-w-lg text-center text-gray-900 bg-white rounded-lg border border-gray-100 shadow dark:border-gray-600 xl:p-8 dark:bg-gray-800 dark:text-white">
                        <h3 class="mb-4 text-2xl font-semibold">{{ $package->name }}</h3>
                        <p class="font-light text-gray-500 sm:text-lg dark:text-gray-400">
                            {!! __('client.price_block_desc', [
                                'period' => mb_strtolower($package->prices->first()->period()),
                                'total_price' => $package->prices->first()->totalPrice(),
                                'renewal_price' => $package->prices->first()->renewal_price,
                                'per_period' => mb_strtolower($package->prices->first()->periodToHuman()),
                                'symbol' => currency('symbol')
                             ]) !!}
                        </p>
                        <div class="flex justify-center items-baseline my-8">
                                <span
                                    class="mr-2 text-5xl font-extrabold">{{ currency('symbol') }}{{ $package->prices->first()->renewal_price }}</span>
                            <span
                                class="text-gray-500 dark:text-gray-400">/{{ $package->prices->first()->periodToHuman() }}</span>
                        </div>
                                                <a href="{{ route('store.package', ['package' => $package->id]) }}"
                           class="my-8 text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:ring-primary-200 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:text-white  dark:focus:ring-primary-900">
                            {!! __('client.get_started') !!}</a>
                        <!-- List -->
                        <ul role="list" class="mb-8 space-y-4 text-left">
                            <!--<img class="w-full h-auto" src="{{ asset('storage/products/' . $package->icon) }}"
                                 alt="icon"/>-->
                            <div class="grid grid-cols-1 gap-4">
                                @foreach($package->features()->orderBy('order', 'desc')->get() as $feature)
                                <li class="flex items-center space-x-3">
                                    <!-- Icon -->
                                    <span class="text-{{$feature->color}}-500 dark:text-{{$feature->color}}-500 bx-sm">
                                        {!! $feature->icon !!}
                                    </span>
                                    <span>{{ $feature->description }}</span>
                                </li>
                                @endforeach
                            </div>
                        </ul>
                    </div>
                @endforeach
            </div>
    </div>
    @else
        <div class="mx-auto max-w-screen-md text-center mb-8 lg:mb-12">
            <h2 class="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white">
                {!! __('client.no_plans_display') !!}</h2>
            <p class="mb-5 font-light text-gray-500 sm:text-xl dark:text-gray-400">
                {!! __('client.no_plans_display_desc') !!}</p>
        </div>
        @endif
        </div>
</section>

<section>
    <aside aria-label="Related articles" class="py-8 lg:py-15 bg-white dark:bg-gray-900">
        <div class="px-4 mx-auto max-w-screen-xl">
            <h2 class="mb-8 text-2xl font-bold text-gray-900 dark:text-white">{!! __('client.other_categories') !!}</h2>
            <div class="grid gap-12 sm:grid-cols-2 lg:grid-cols-3">

                @foreach ($categories->all() as $category)
               @if(in_array($category->status, ['unlisted', 'inactive', 'restricted']))
                     @if($category->status == 'restricted')
                         @if(Auth::guest() OR !Auth::user()->is_admin())
                             @continue
                         @endif
                     @else
                         @continue
                     @endif
                 @endif
                    <article class="max-w-xs">
                        <a href="{{ url()->current() }}?category={{ $category->link }}#pricing">
                            <img src="{{ $category->icon() }}" class="mb-5 rounded-lg" alt="Image 1"
                                 style="height: 200px;">
                        </a>
                        <h2 class="mb-2 text-xl font-bold leading-tight text-gray-900 dark:text-white">
                            <a href="#">{{ $category->name }}</a>
                        </h2>
                        <p class="mb-4 font-light text-gray-500 dark:text-gray-400">{{ $category->description }}</p>
                        <a href="{{ url()->current() }}?category={{ $category->link }}#pricing"
                           class="py-2.5 px-5 mr-2 mb-2 min-w-full text-center text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">@if(request()->input('category', (isset($selected_category->link)) ? $selected_category->link : '') == $category->link)
                                {!! __('client.selected') !!}
                            @else
                                {!! __('client.pricing') !!}
                            @endif</a>
                    </article>
                @endforeach

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

<section class="bg-white dark:bg-gray-800">
          <div class="py-8 px-4 mx-auto max-w-screen-xl sm:py-16 lg:px-6 ">
            <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
              <div class="text-center space-y-5">
                  <h2 class="text-base font-semibold text-primary-400 tracking-wide uppercase">Get started today</h2>
                  <div class="inline-flex items-end justify-center w-full text-center mx-auto">
                      <img src="https://media.discordapp.net/attachments/1043756934920155137/1212541228458057738/adair.jpg?ex=65f23604&is=65dfc104&hm=0b07a5002436956a7d5cd3f962df6a210978a9aba25701bc784767794d148196&=&format=webp" alt="avatar-067" class="absolute transform translate-x-24 ml-6 rounded-full w-12 h-12 md:w-16 md:h-16 border-4 border-white">
                      <img src="https://cdn.discordapp.com/attachments/1043756934920155137/1212542063367954493/415303200_326959880305822_7702549910275707464_n.png?ex=65f236cb&is=65dfc1cb&hm=f6031955a97dbb1ec233cd1f30d6628c74f41c10e6a5dfcd269134c8019416f0&" alt="avatar-019" class="absolute transform -translate-x-24 -ml-6 rounded-full w-12 h-12 md:w-16 md:h-16 border-4 border-white">
                      <img src="https://media.discordapp.net/attachments/953097631901564978/1212542603132936253/image.png?ex=65f2374c&is=65dfc24c&hm=081b7c87c0e5091276b23a0c7011ec62e89e5e5bd7d1fc8cbac97fbcfb055c63&=&format=webp&quality=lossless" alt="avatar-036" class="absolute transform -translate-x-16 rounded-full w-16 h-16 md:w-20 md:h-20 border-4 border-white">
                      <img src="https://media.discordapp.net/attachments/953097631901564978/1212542602591731763/image.png?ex=65f2374c&is=65dfc24c&hm=28ad0dc4bc98bb8cc440fcc5e1db88e3fd624aba20a40d3cb7e4b41e876b7c0b&=&format=webp&quality=lossless" alt="avatar-008" class="absolute transform translate-x-16 rounded-full w-16 h-16 md:w-20 md:h-20 border-4 border-white">
                      <img src="https://media.discordapp.net/attachments/953097631901564978/1212542603459956797/image.png?ex=65f2374c&is=65dfc24c&hm=ad7acc659ec5414ed16b0e7ff4653171c4fd605eecd0c60e0461aa28ab2bad4a&=&format=webp&quality=lossless" alt="avatar-003" class="rounded-full w-20 h-20 md:w-24 md:h-24 border-4 border-white relative">
                  </div>
                                  <span class="inline-flex items-center bg-gray-100 text-gray-800 text-xs font-medium mr-2 px-2.5 py-1.5 rounded-full dark:bg-gray-900 dark:text-gray-300">
                    <span class="w-2 h-2 mr-1 bg-green-500 rounded-full animate-pulse"></span>
                    300 Online Now
                </span>
                  <!-- <div class="" style="display: flex;flex-wrap: wrap;justify-content: center;">
                                      </div> -->
                  <p class="mt-1 text-4xl font-extrabold text-gray-900 dark:text-white sm:text-5xl sm:tracking-tight lg:text-6xl">
                      Join
                      <span class="px-2 py-1 relative inline-block">
                          <svg class="stroke-current bottom-0 absolute text-primary-400 -translate-x-2" viewBox="0 0 410 18" xmlns="http://www.w3.org/2000/svg">
                              <path d="M6 6.4c16.8 16.8 380.8-11.2 397.6 5.602" stroke-width="11.2" fill="none" fill-rule="evenodd" stroke-linecap="round"></path>
                          </svg>
                          <span class="relative">3,575+</span>
                      </span>
                      Users on Discord
                  </p>
                  <p class="max-w-3xl mt-5 mx-auto text-xl text-gray-500 dark:text-gray-400">Over the years, we have established our brand well. Are you stuck on a question? Our Discord community would love to help you.</p>
                  <a href="@settings('socials::discord')" target="_blank" class="text-white px-8 py-4 inline-block mt-5 font-medium text-lg bg-primary-600 focus:ring-4 focus:ring-primary-900 focus:ring-offset-4 rounded-xl">Join Us Today</a>
              </div>
          </div>
          </div>
      </section>

      <section class="bg-white dark:bg-gray-900">
    <div class="py-8 px-4 mx-auto max-w-screen-xl sm:py-16 lg:px-6">
        <div class="mx-auto max-w-screen-sm text-center">
            <h2 class="mb-4 text-4xl font-extrabold leading-tight text-gray-900 dark:text-white">{!! __('client.get_started_now') !!}</h2>
            <p class="mb-6 font-light text-gray-500 dark:text-gray-400 md:text-lg">
                {!! __('client.register_your_account_no-time') !!}
            </p>
            <a href="{{ route('register') }}"
               class="text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-primary-600 dark:hover:bg-primary-700 focus:outline-none dark:focus:ring-primary-800">
                {!! __('client.create_my_account') !!}
            </a>
        </div>
    </div>
</section>

@include(Theme::path('layouts.cookie'))

<footer class="p-4 bg-gray-50 sm:p-6 dark:bg-gray-800">
    <div class="mx-auto max-w-screen-xl">
        <div class="md:flex md:justify-between">
            <div class="mb-6 md:mb-0">
                <a href="/" class="flex items-center">
                <img class="w-32" src="@settings('logo')" alt>
                    
                </a>
            </div>
            <div class="grid grid-cols-2 gap-8 sm:gap-6 sm:grid-cols-3">
                <div>
                    <h2 class="mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white">{!! __('client.resources') !!}</h2>
                    <ul class="text-gray-600 dark:text-gray-400">
                        @foreach(Page::getActive() as $page)
                            @if(in_array('footer_resources', $page->placement))
                                <li class="mb-4">
                                    <a href="{{ route('page', $page->path) }}" @if($page->new_tab) target="_blank"
                                       @endif class="hover:underline">{{ $page->name }}</a>
                                </li>
                            @endif
                        @endforeach
                    </ul>
                </div>
                <div>
                    <h2 class="mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white">{!! __('client.help_center') !!}</h2>
                    <ul class="text-gray-600 dark:text-gray-400">
                        @foreach(Page::getActive() as $page)
                            @if(in_array('footer_help_center', $page->placement))
                                <li class="mb-4">
                                    <a href="{{ route('page', $page->path) }}" @if($page->new_tab) target="_blank"
                                       @endif class="hover:underline">{{ $page->name }}</a>
                                </li>
                            @endif
                        @endforeach
                    </ul>
                </div>
                <div>
                    <h2 class="mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white">{!! __('client.legal') !!}</h2>
                    <ul class="text-gray-600 dark:text-gray-400">
                        @foreach(Page::getActive() as $page)
                            @if(in_array('footer_legal', $page->placement))
                                <li class="mb-4">
                                    <a href="{{ route('page', $page->path) }}" @if($page->new_tab) target="_blank"
                                       @endif class="hover:underline">{{ $page->name }}</a>
                                </li>
                            @endif
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
        <hr class="my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8"/>
        <div class="flex mt-4 space-x-6 sm:justify-center sm:mt-0">
            @if(settings('socials::discord'))
                <a href="@settings('socials::discord')" target="_blank"
                   class="text-gray-500 hover:text-gray-900 dark:hover:text-white">
                    <i class='bx bxl-discord-alt' style="font-size: 1.25rem"></i>
                </a>
            @endif
            @if(settings('socials::twitter'))
                <a href="@settings('socials::twitter')" target="_blank"
                   class="text-gray-500 hover:text-gray-900 dark:hover:text-white">
                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                        <path
                            d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"/>
                    </svg>
                </a>
            @endif
            @if(settings('socials::github'))
                <a href="@settings('socials::github')" target="_blank"
                   class="text-gray-500 hover:text-gray-900 dark:hover:text-white">
                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                        <path fill-rule="evenodd"
                              d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
                              clip-rule="evenodd"/>
                    </svg>
                </a>
            @endif
        </div>
    </div>
</footer>
</body>
</html>

<script src="//code.tidio.co/fzwommjb39nooxnglibpobvfuzxxff28.js" async></script>
