index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Nexon – Minecraft Commerce Platform</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="/css/tailwind.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">

    <!-- Fonts -->
    <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=Manrope:wght@400;500;600;700&family=Sora:wght@500;600;700;800&family=Fira+Code:wght@400;600&display=swap" rel="stylesheet">

    <style>
        :root {
            --font-ui: "Manrope", system-ui, sans-serif;
            --font-head: "Sora", system-ui, sans-serif;
            --font-mono: "Fira Code", monospace;
        }

        body {
            font-family: var(--font-ui);
        }

        h1, h2, h3, .font-head {
            font-family: var(--font-head);
            letter-spacing: -0.02em;
        }

        .font-mono {
            font-family: var(--font-mono);
        }
    </style>
</head>

<body class="bg-background text-text overflow-x-hidden">

<!-- Glow -->
<div class="absolute inset-0 -z-10">
    <div class="absolute -top-96 left-1/2 -translate-x-1/2 w-[900px] h-[900px] bg-primary/20 blur-[140px] rounded-full"></div>
</div>

<!-- NAV -->
<header class="max-w-7xl mx-auto px-6 py-6 flex justify-between items-center">
    <div class="text-2xl font-extrabold text-primary font-head tracking-tight">Nexon</div>
    <nav class="hidden md:flex items-center space-x-8 text-sm">
        <a href="#platform" class="hover:text-primary">Platform</a>
        <a href="#cloud" class="hover:text-primary">Cloud</a>
        <a href="#compare" class="hover:text-primary">Comparison</a>
        <a href="#" class="px-4 py-2 bg-secondary text-white rounded-lg hover:opacity-90">Get Started</a>
    </nav>
</header>

<!-- HERO -->
<section class="max-w-7xl mx-auto px-6 pt-28 pb-40 grid md:grid-cols-2 gap-16 items-center">
    <div>
        <h1 class="text-6xl font-extrabold leading-tight font-head">
            Commerce infrastructure<br>for Minecraft networks
        </h1>
        <p class="mt-6 text-gray-400 text-lg max-w-xl">
            Nexon is an open-source, self-hosted platform that connects directly to your Minecraft servers
            to power stores, subscriptions, and automated delivery at scale.
        </p>

        <div class="mt-10 flex gap-4">
            <a href="#" class="px-8 py-4 bg-secondary text-text rounded-xl text-lg">Deploy Nexon</a>
            <a href="https://github.com/NexonPHP" class="px-8 py-4 border border-primary text-primary rounded-xl text-lg">View on GitHub</a>
        </div>
    </div>

    <div class="bg-gray-900 rounded-2xl p-6 border border-white/10 shadow-xl">
        <div class="text-sm text-gray-400 mb-3">Live delivery pipeline</div>
        <div class="bg-black rounded-xl p-4 font-mono text-sm text-green-400">
            Order #48219<br>
            Player: Alex<br>
            Rank: Elite<br>
            Server: survival-01<br>
            Status: Delivered
        </div>
    </div>
</section>

<!-- PLATFORM -->
<section id="platform" class="max-w-7xl mx-auto px-6 py-32 grid md:grid-cols-2 gap-20 items-center">
    <div>
        <h2 class="text-4xl font-bold mb-6 font-head">Designed for established networks</h2>
        <p class="text-gray-400 mb-8">
            Nexon is not just a webstore. It integrates deeply with your Minecraft network.
        </p>

        <div class="space-y-4">
            <div class="flex items-start gap-4">
                <i class="fa-solid fa-network-wired text-primary mt-1"></i>
                <p>Works across multiple servers, proxies and games</p>
            </div>
            <div class="flex items-start gap-4">
                <i class="fa-solid fa-gears text-primary mt-1"></i>
                <p>Automatic permissions, command execution and much more</p>
            </div>
            <div class="flex items-start gap-4">
                <i class="fa-solid fa-database text-primary mt-1"></i>
                <p>Centralized data across all servers and web storefronts</p>
            </div>
        </div>
    </div>

    <div class="bg-gray-900 rounded-2xl p-8 border border-white/10">
        <div class="font-mono text-sm text-gray-300 space-y-2">
            <div>server.proxy → survival-02</div>
            <div>grant permission: nexon.rank.elite</div>
            <div>sync player profile</div>
            <div class="text-green-400">delivery complete</div>
        </div>
    </div>
</section>

<!-- CLOUD -->
<section id="cloud" class="bg-gray-900 py-32">
    <div class="max-w-7xl mx-auto px-6 grid md:grid-cols-2 gap-20 items-center">
        <div>
            <h2 class="text-4xl font-bold mb-6 font-head">Nexon Cloud</h2>
            <p class="text-gray-400 mb-8">
                Nexon Cloud runs Nexon on managed global infrastructure with automatic scaling, backups, and isolation.
            </p>

            <div class="grid grid-cols-2 gap-6 text-sm">
                <div><i class="fa-solid fa-globe text-primary"></i> Global regions</div>
                <div><i class="fa-solid fa-arrows-rotate text-primary"></i> Automatic updates</div>
                <div><i class="fa-solid fa-shield text-primary"></i> Secure isolation</div>
                <div><i class="fa-solid fa-hard-drive text-primary"></i> Backups</div>
            </div>
        </div>

        <div class="bg-black rounded-2xl p-8 border border-white/10 font-mono text-sm">
            Provisioning store...<br>
            Allocating database...<br>
            Connecting servers...<br>
            Nexon Cloud ready
        </div>
    </div>
</section>

<section id="compare" class="max-w-7xl mx-auto px-6 py-32">
    <h2 class="text-4xl font-bold text-center mb-6 font-head">Platform Comparison</h2>
    <p class="text-gray-400 text-center max-w-3xl mx-auto mb-16">
        Nexon is built as infrastructure, not just a storefront. See how it compares to
        existing Minecraft commerce platforms.
    </p>

    <div class="overflow-x-auto">
        <table class="w-full border-collapse text-sm">
            <thead>
            <tr class="border-b border-white/10 text-gray-400">
                <th class="py-4 text-left font-head">Feature</th>
                <th class="py-4 text-center">
                    <div class="inline-block px-4 py-2 rounded-xl bg-primary/10 border border-primary shadow-[0_0_20px_rgba(99,102,241,0.4)] font-head">
                        Nexon
                    </div>
                </th>
                <th class="py-4 text-center font-head">Tebex</th>
                <th class="py-4 text-center font-head">Crafting Store</th>
                <th class="py-4 text-center font-head">MineStore</th>
            </tr>
            </thead>

            <tbody class="divide-y divide-white/10">

            <tr>
                <td class="py-5">Open source</td>
                <td class="text-center text-primary"><i class="fa-solid fa-check"></i></td>
                <td class="text-center text-red-500"><i class="fa-solid fa-x"></i></td>
                <td class="text-center text-red-500"><i class="fa-solid fa-x"></i></td>
                <td class="text-center text-gray-400"><i class="fa-solid fa-check"></i></td>
            </tr>

            <tr>
                <td class="py-5">Self-hosted</td>
                <td class="text-center text-primary"><i class="fa-solid fa-check"></i></td>
                <td class="text-center text-red-500"><i class="fa-solid fa-x"></i></td>
                <td class="text-center text-red-500"><i class="fa-solid fa-x"></i></td>
                <td class="text-center text-gray-400"><i class="fa-solid fa-check"></i></td>
            </tr>

            <tr>
                <td class="py-5">No platform transaction fees</td>
                <td class="text-center text-primary"><i class="fa-solid fa-check"></i></td>
                <td class="text-center text-red-500"><i class="fa-solid fa-x"></i></td>
                <td class="text-center text-red-500"><i class="fa-solid fa-x"></i></td>
                <td class="text-center text-gray-400"><i class="fa-solid fa-check"></i></td>
            </tr>

            <tr>
                <td class="py-5">Direct Minecraft server integration</td>
                <td class="text-center text-primary"><i class="fa-solid fa-check"></i></td>
                <td class="text-center text-gray-400"><i class="fa-solid fa-check"></i></td>
                <td class="text-center text-gray-400"><i class="fa-solid fa-check"></i></td>
                <td class="text-center text-gray-400"><i class="fa-solid fa-check"></i></td>
            </tr>

            <tr>
                <td class="py-5">Multi-server network support</td>
                <td class="text-center text-primary"><i class="fa-solid fa-check"></i></td>
                <td class="text-center text-gray-400"><i class="fa-solid fa-check"></i></td>
                <td class="text-center text-gray-400"><i class="fa-solid fa-check"></i></td>
                <td class="text-center text-red-500"><i class="fa-solid fa-x"></i></td>
            </tr>

            <tr>
                <td class="py-5">Subscriptions and renewals</td>
                <td class="text-center text-primary"><i class="fa-solid fa-check"></i></td>
                <td class="text-center text-gray-400"><i class="fa-solid fa-check"></i></td>
                <td class="text-center text-gray-400"><i class="fa-solid fa-check"></i></td>
                <td class="text-center text-gray-400"><i class="fa-solid fa-check"></i></td>
            </tr>

            <tr>
                <td class="py-5">Custom plugins and extensions</td>
                <td class="text-center text-primary"><i class="fa-solid fa-check"></i></td>
                <td class="text-center text-red-500"><i class="fa-solid fa-x"></i></td>
                <td class="text-center text-red-500"><i class="fa-solid fa-x"></i></td>
                <td class="text-center text-red-500"><i class="fa-solid fa-x"></i></td>
            </tr>

            <tr>
                <td class="py-5">Managed cloud option</td>
                <td class="text-center text-primary"><i class="fa-solid fa-check"></i></td>
                <td class="text-center text-gray-400"><i class="fa-solid fa-check"></i></td>
                <td class="text-center text-gray-400"><i class="fa-solid fa-check"></i></td>
                <td class="text-center text-red-500"><i class="fa-solid fa-x"></i></td>
            </tr>

            <tr>
                <td class="py-5">Full data ownership</td>
                <td class="text-center text-primary"><i class="fa-solid fa-check"></i></td>
                <td class="text-center text-red-500"><i class="fa-solid fa-x"></i></td>
                <td class="text-center text-red-500"><i class="fa-solid fa-x"></i></td>
                <td class="text-center text-gray-400"><i class="fa-solid fa-check"></i></td>
            </tr>

            </tbody>
        </table>
    </div>
</section>


<!-- FOOTER -->
<footer class="border-t border-white/10 py-10">
    <div class="max-w-7xl mx-auto px-6 flex justify-between text-sm">
        <p class="text-gray-500">© 2026 Nexon. Made with ❤️ by Lumina Games. <br> Nexon is open source under GPL v3 License</p>

        <div class="space-x-6">
            <a href="#">GitHub</a>
            <a href="#">Docs</a>
            <a href="#">Community</a>
        </div>
    </div>
</footer>

</body>
</html>