Cyberpunk Esports & Gaming Studio Landing Page

<!DOCTYPE html>
<html lang="en" class="h-full">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Valkyrie Esports Studio</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = { darkMode: 'class' };
    </script>
</head>
<body class="bg-slate-50 dark:bg-slate-950 text-slate-900 dark:text-slate-100 min-h-screen transition-colors duration-300">

    <nav class="max-w-6xl mx-auto px-6 py-6 flex items-center justify-between">
        <span class="font-bold text-2xl tracking-wider text-rose-500 uppercase">Valkyrie<span class="text-slate-900 dark:text-white">Esports</span></span>
        <button class="px-5 py-2.5 rounded-2xl bg-rose-600 hover:bg-rose-500 text-white font-extrabold text-xs shadow-lg shadow-rose-600/30">Join Clan</button>
    </nav>

    <main class="max-w-6xl mx-auto px-6 py-16 text-center space-y-12">
        <div class="space-y-6 max-w-3xl mx-auto">
            <span class="px-3.5 py-1.5 rounded-full bg-rose-500/10 text-rose-500 text-xs font-bold uppercase tracking-widest border border-rose-500/20">
                🏆 World Championship Finalists 2026
            </span>
            <h1 class="text-4xl sm:text-6xl font-extrabold text-slate-900 dark:text-white tracking-tight uppercase leading-tight">
                Dominate The <span class="text-transparent bg-clip-text bg-gradient-to-r from-rose-500 to-cyan-500">Virtual Battlefield</span>
            </h1>
            <p class="text-slate-600 dark:text-slate-400 text-sm sm:text-base max-w-xl mx-auto">
                Official homepage for Valkyrie Esports pro gaming team competing in FPS, MOBA, and Battle Royale tournaments.
            </p>
        </div>

        <div class="grid grid-cols-1 sm:grid-cols-3 gap-6 text-left pt-8">
            <div class="p-6 rounded-3xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 space-y-3 shadow-sm">
                <span class="text-xs font-bold text-rose-500 uppercase tracking-wider">Team Captain</span>
                <h3 class="font-extrabold text-xl text-slate-900 dark:text-white">Apex_Phoenix</h3>
                <p class="text-xs text-slate-500 dark:text-slate-400">FPS Sniper Specialist • 89.4% Win Rate</p>
            </div>
            <div class="p-6 rounded-3xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 space-y-3 shadow-sm">
                <span class="text-xs font-bold text-cyan-500 uppercase tracking-wider">In-Game Leader</span>
                <h3 class="font-extrabold text-xl text-slate-900 dark:text-white">Cyber_Valkyrie</h3>
                <p class="text-xs text-slate-500 dark:text-slate-400">Strategist & IGL • 142 Tournament Wins</p>
            </div>
            <div class="p-6 rounded-3xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 space-y-3 shadow-sm">
                <span class="text-xs font-bold text-purple-500 uppercase tracking-wider">Entry Fragger</span>
                <h3 class="font-extrabold text-xl text-slate-900 dark:text-white">Shadow_Rogue</h3>
                <p class="text-xs text-slate-500 dark:text-slate-400">Assault Specialist • 3.42 K/D Ratio</p>
            </div>
        </div>
    </main>

</body>
</html>

/* Supports both Dark and Light mode via Tailwind class variant */

// Interactive scripts included inside demo view file