<!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>QuizQuest - Play & Win Big</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com" rel="preconnect"/>
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
<link href="https://fonts.googleapis.com/css2?family=Spline+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
<!-- Tailwind -->
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"primary": "#7f13ec",
"background-light": "#f7f6f8",
"background-dark": "#191022",
"surface-dark": "#2d2039",
"glass": "rgba(255, 255, 255, 0.05)",
"glass-hover": "rgba(255, 255, 255, 0.1)"
},
fontFamily: {
"display": ["Spline Sans", "sans-serif"]
},
borderRadius: {"DEFAULT": "1rem", "lg": "2rem", "xl": "3rem", "full": "9999px"},
backgroundImage: {
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
}
},
},
}
</script>
<style>
.glass-panel {
background: rgba(45, 32, 57, 0.4);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.neon-text {
text-shadow: 0 0 20px rgba(127, 19, 236, 0.6);
}
.neon-box {
box-shadow: 0 0 20px rgba(127, 19, 236, 0.25);
}
/* Hide scrollbar for carousel */
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
.scrollbar-hide {
-ms-overflow-style: none;
scrollbar-width: none;
}
</style>
</head>
<body class="font-display bg-background-light dark:bg-background-dark text-slate-900 dark:text-slate-100 antialiased overflow-x-hidden selection:bg-primary selection:text-white">
<div class="relative min-h-screen flex flex-col">
<!-- Abstract Background Glows -->
<div class="fixed top-0 left-0 w-full h-full overflow-hidden -z-10 pointer-events-none">
<div class="absolute top-[-10%] left-[-10%] w-[50%] h-[50%] bg-primary/20 rounded-full blur-[120px] opacity-40"></div>
<div class="absolute bottom-[-10%] right-[-10%] w-[50%] h-[50%] bg-blue-600/10 rounded-full blur-[120px] opacity-30"></div>
<div class="absolute top-[40%] left-[60%] w-[30%] h-[30%] bg-pink-600/10 rounded-full blur-[100px] opacity-30"></div>
</div>
<!-- Navigation -->
<nav class="sticky top-0 z-50 w-full px-4 pt-4">
<div class="glass-panel mx-auto max-w-[960px] rounded-full px-6 py-3 flex items-center justify-between shadow-lg">
<a class="flex items-center gap-2 group" href="#">
<div class="size-8 rounded-full bg-gradient-to-br from-primary to-purple-400 flex items-center justify-center text-white shadow-lg group-hover:scale-110 transition-transform">
<span class="material-symbols-outlined text-lg">bolt</span>
</div>
<span class="text-white text-lg font-bold tracking-tight">QuizQuest</span>
</a>
<div class="hidden md:flex items-center gap-8">
<a class="text-sm font-medium text-slate-300 hover:text-white transition-colors" href="#">How it Works</a>
<a class="text-sm font-medium text-slate-300 hover:text-white transition-colors" href="#">Quizzes</a>
<a class="text-sm font-medium text-slate-300 hover:text-white transition-colors" href="#">Leaderboard</a>
<a class="text-sm font-medium text-slate-300 hover:text-white transition-colors" href="#">Shop</a>
</div>
<div class="flex items-center gap-3">
<button class="hidden sm:flex text-sm font-bold text-white px-4 py-2 hover:text-primary transition-colors">
Login
</button>
<button class="bg-primary hover:bg-primary/90 text-white text-sm font-bold px-5 py-2 rounded-full transition-all hover:shadow-[0_0_15px_rgba(127,19,236,0.5)] transform active:scale-95">
Sign Up
</button>
</div>
</div>
</nav>
<!-- Main Layout -->
<main class="flex-grow flex flex-col items-center w-full px-4 md:px-6 pt-8 pb-20 max-w-[1200px] mx-auto gap-16 md:gap-24">
<!-- Hero Section -->
<section class="w-full grid grid-cols-1 lg:grid-cols-2 gap-10 items-center mt-4 md:mt-10">
<div class="flex flex-col gap-6 relative z-10 order-2 lg:order-1 text-center lg:text-left">
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-white/10 w-fit mx-auto lg:mx-0 backdrop-blur-sm">
<span class="flex h-2 w-2 rounded-full bg-green-500 animate-pulse"></span>
<span class="text-xs font-medium text-purple-200 uppercase tracking-wider">Season 4 Live Now</span>
</div>
<h1 class="text-5xl md:text-7xl font-black leading-[0.9] tracking-tighter text-white neon-text">
PLAY & <br/>
<span class="text-transparent bg-clip-text bg-gradient-to-r from-primary via-purple-300 to-white">WIN BIG</span>
</h1>
<p class="text-lg text-slate-300 max-w-lg mx-auto lg:mx-0 font-light leading-relaxed">
Test your knowledge against the world's best players. Climb the ranks and earn real rewards in our daily trivia challenges.
</p>
<div class="flex flex-wrap items-center justify-center lg:justify-start gap-4 mt-2">
<button class="bg-primary text-white h-14 px-8 rounded-full font-bold text-lg hover:bg-primary/90 transition-all hover:scale-105 neon-box flex items-center gap-2">
<span class="material-symbols-outlined">play_circle</span>
Start Quest
</button>
<button class="glass-panel text-white h-14 px-8 rounded-full font-bold text-lg hover:bg-white/10 transition-all border border-white/20 flex items-center gap-2">
<span class="material-symbols-outlined">emoji_events</span>
View Prizes
</button>
</div>
<div class="flex items-center justify-center lg:justify-start gap-4 mt-6 text-sm text-slate-400">
<div class="flex -space-x-3">
<img class="w-8 h-8 rounded-full border-2 border-background-dark object-cover" data-alt="User avatar 1" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCpBEYsU7vcFjz_ilk6cKiNNWwIXWpG3egodL21lglidw2W9aV6AGk6uLo5gBdXng9591Q9s1lCslqmeX6S8jw15wVXXouGXoZSr1EMaMi1KO-urMwzbizbx-c4Qy8_7UFQD-R1x_X-lFDl7JkN3ckkBz2fPQEUJUpVKQTVVxGs14W09KagepLMnynJAKOi-FrN-O-gT-pxSFhVmXu7CIKmxk3AFWfJ6-dC9NejqwHfRpXvLpRJFW2ioxVpMJ7k_mmIlBM9OeKO"/>
<img class="w-8 h-8 rounded-full border-2 border-background-dark object-cover" data-alt="User avatar 2" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAVY4TkWigvVdMnsr7krMq-hDowgsG8TcoB7tkyve_CcdlbQt--HQverH_BnAmlXeE1CYeNbHSLwPk688_-fBZ3p8qolex5bzvDawRJNeWRMFjXx1E2IUKG2wZ1Cq5CjnP-u1uCc_SR7JF-qQYzvq1A1TLnolL8_qWAO1L9nKM6h9pUrb_ayFB21hQd66_cZfB4H_QOE5lwm-G7upGGh4G_5j-pgCOUDpm_xEHBrMeGd_dxDmQl3nZfU8Cge1Q0Quh9Jx-f-q5O"/>
<img class="w-8 h-8 rounded-full border-2 border-background-dark object-cover" data-alt="User avatar 3" src="https://lh3.googleusercontent.com/aida-public/AB6AXuA-_0I_aXLdcJqI37XJjiVhxity0Iiw8wgcDiAtzkB2EHclIiYy3rV7ZX8tiFLqeMs7cZJ8L9X-hCEBdxRwSUc6DdJ3X_yU2N7u2y-NhVeaDzhu9CTFZ7Uxz8I1iczDFks8_r1Pe4hoOPi6qC0ejR3p83i1JCUA0p49lsDaCyjp0nGPDdVekl16c6Ll9dYcVeT-zMuCL0dPTtNoCLaU83mxtvoMQWNLgE1MdIdatkY1TsovS5UqwPoP7elKUyJsFro7SsgJca_3"/>
</div>
<p>Join <span class="text-white font-bold">12,400+</span> players online</p>
</div>
</div>
<div class="relative z-0 order-1 lg:order-2 flex justify-center perspective-1000">
<!-- Background blobs for the 3D asset -->
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[300px] h-[300px] bg-primary rounded-full blur-[80px] opacity-40 animate-pulse"></div>
<!-- Main 3D Asset Placeholder -->
<div class="relative w-full max-w-[500px] aspect-square animate-[float_6s_ease-in-out_infinite]">
<div class="w-full h-full bg-cover bg-center" data-alt="3D gaming character avatar in futuristic purple lighting" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuDhwKLJXdUKU004ZKHurvrnteGUKTYa4JwgK8IqKfOIBVMzQksB_RXMMRXQMeNWl8EQUxiDBmeSJEgqw0nwnj08guIaNM6w3yVl9MCmUrg0as6LL6YoLb5jS3uUi26VaKOvich7bnp5CQ7qQ-4xZ7GuOTqru7S24bo7y8R-T0Xy70SITM54tORxYPMFiirAf70j0FT4ZzQbucpIngP0iBDg-nYe3u5fZfPR-nlUbgjI5qhbDVvT3z-5oobBKSSER6ubNvpCp4yt'); mask-image: linear-gradient(to bottom, black 80%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);"></div>
</div>
<!-- Floating Cards Elements -->
<div class="absolute top-10 right-0 lg:-right-10 glass-panel p-3 rounded-2xl animate-[float_4s_ease-in-out_infinite_1s] hidden sm:block">
<div class="flex items-center gap-3">
<div class="bg-green-500/20 p-2 rounded-xl text-green-400">
<span class="material-symbols-outlined">payments</span>
</div>
<div>
<p class="text-xs text-slate-400">Total Winnings</p>
<p class="text-white font-bold">$12,450</p>
</div>
</div>
</div>
<div class="absolute bottom-20 left-0 lg:-left-4 glass-panel p-3 rounded-2xl animate-[float_5s_ease-in-out_infinite_0.5s] hidden sm:block">
<div class="flex items-center gap-3">
<div class="bg-yellow-500/20 p-2 rounded-xl text-yellow-400">
<span class="material-symbols-outlined">trophy</span>
</div>
<div>
<p class="text-xs text-slate-400">Daily Rank</p>
<p class="text-white font-bold">#1 Champion</p>
</div>
</div>
</div>
</div>
</section>
<!-- Active Quizzes Carousel -->
<section class="w-full flex flex-col gap-6">
<div class="flex items-end justify-between px-2">
<div>
<h2 class="text-2xl font-bold text-white flex items-center gap-2">
<span class="material-symbols-outlined text-primary">stadia_controller</span>
Active Quizzes
</h2>
<p class="text-slate-400 text-sm mt-1">Jump into a live game and earn points instantly.</p>
</div>
<a class="text-primary hover:text-white text-sm font-bold flex items-center gap-1 transition-colors" href="#">
View All <span class="material-symbols-outlined text-sm">arrow_forward</span>
</a>
</div>
<div class="w-full overflow-x-auto pb-4 scrollbar-hide snap-x">
<div class="flex gap-4 w-max px-2">
<!-- Card 1 -->
<div class="snap-center group w-[280px] sm:w-[320px] h-[400px] rounded-xl relative overflow-hidden cursor-pointer border border-white/5 hover:border-primary/50 transition-all duration-300">
<div class="absolute inset-0 bg-cover bg-center transition-transform duration-500 group-hover:scale-110" data-alt="Abstract colorful neon technology pattern" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuBD2FTwLU63jwOOoWNoGBqxpY7hAD02QotdSl8Uds9W9qZob3zBUI_SUGFKItE3Ho-LMkjS9YBG_CihYw58yYcmu7_rpYK7CaqtwUqo25AhUCCgGLZrd8igm8JHU2QqlOXIqVNvfByExC1hltTNNkocWBn84C8eHv-zPxYz2Z1AXODHahviePdVp4l-KWzwJ-y9t0bYM9tmr8Yx3ABmQNYVU3_E8vghP-rAUPVFzJwGCLBxiSJDfkpe4xMQSsciMTk8WnCmueP4')"></div>
<div class="absolute inset-0 bg-gradient-to-t from-background-dark via-background-dark/80 to-transparent"></div>
<div class="absolute top-4 right-4 bg-red-500 text-white text-xs font-bold px-2 py-1 rounded-md uppercase tracking-wider shadow-lg flex items-center gap-1">
<span class="block w-1.5 h-1.5 rounded-full bg-white animate-pulse"></span> Live
</div>
<div class="absolute bottom-0 left-0 w-full p-6 flex flex-col gap-3">
<div>
<p class="text-primary text-xs font-bold uppercase tracking-wider mb-1">Pop Culture</p>
<h3 class="text-2xl font-bold text-white leading-tight">Movie Trivia Blast</h3>
</div>
<div class="flex items-center gap-4 text-xs text-slate-300 font-medium">
<div class="flex items-center gap-1">
<span class="material-symbols-outlined text-sm">group</span> 452
</div>
<div class="flex items-center gap-1">
<span class="material-symbols-outlined text-sm text-yellow-400">star</span> Medium
</div>
</div>
<button class="w-full mt-2 py-3 rounded-lg bg-white/10 hover:bg-primary text-white font-bold text-sm transition-colors backdrop-blur-md border border-white/10 group-hover:border-primary/50">
Join Room
</button>
</div>
</div>
<!-- Card 2 -->
<div class="snap-center group w-[280px] sm:w-[320px] h-[400px] rounded-xl relative overflow-hidden cursor-pointer border border-white/5 hover:border-primary/50 transition-all duration-300">
<div class="absolute inset-0 bg-cover bg-center transition-transform duration-500 group-hover:scale-110" data-alt="Computer chip macro shot with blue lighting" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuB2XmB6WuIrHwwZz4-gl8-saR9ToHBZZG-bwGAnHePZZ9GlNSylSoBsowKHaxQgeM4vrTlG7eSCgI-Qd1P6DHOZln0ty0jIxDtcYAdeKG5dBG1EUEVNvDXRLi6dzyafuU60dKb8a7KiyqW5mxEGh5-RWfKGQk-Cp_LNWHe3GqbTRZcRbTDomI8LhljV0OL3obgZq2LeKg7uPXtwjgOXv0LCTDFua0XBQXUrIgFMtqZn7gLP_X3NW37MV00hipyxNTaVupKNoIQI')"></div>
<div class="absolute inset-0 bg-gradient-to-t from-background-dark via-background-dark/80 to-transparent"></div>
<div class="absolute top-4 right-4 bg-surface-dark/80 backdrop-blur text-white text-xs font-bold px-2 py-1 rounded-md uppercase tracking-wider border border-white/10">
Starts in 5m
</div>
<div class="absolute bottom-0 left-0 w-full p-6 flex flex-col gap-3">
<div>
<p class="text-blue-400 text-xs font-bold uppercase tracking-wider mb-1">Science & Tech</p>
<h3 class="text-2xl font-bold text-white leading-tight">Tech Titans</h3>
</div>
<div class="flex items-center gap-4 text-xs text-slate-300 font-medium">
<div class="flex items-center gap-1">
<span class="material-symbols-outlined text-sm">group</span> 128
</div>
<div class="flex items-center gap-1">
<span class="material-symbols-outlined text-sm text-red-400">local_fire_department</span> Hard
</div>
</div>
<button class="w-full mt-2 py-3 rounded-lg bg-white/10 hover:bg-primary text-white font-bold text-sm transition-colors backdrop-blur-md border border-white/10 group-hover:border-primary/50">
Register
</button>
</div>
</div>
<!-- Card 3 -->
<div class="snap-center group w-[280px] sm:w-[320px] h-[400px] rounded-xl relative overflow-hidden cursor-pointer border border-white/5 hover:border-primary/50 transition-all duration-300">
<div class="absolute inset-0 bg-cover bg-center transition-transform duration-500 group-hover:scale-110" data-alt="Group of friends hanging out with purple lighting" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuDMQC_AZjyLEby2DPrEK4v3f0YnN8WuhkLe4NP8y-Uw4aHqUSTfZAMrisTWmEk-lXwXExUY3ZcoJvN6_8KPGkjZYM5ydIYezhUaV5X3-jDnmRjkK4JigcwL36PG3T43sTvZQtZHYFI0SVzRbFYw9k10kgDn7DauPGuyW0ttD0j4FFcCP5QRoeHaifmDyYg5CTtW8huFUqhefSwYmxCxiPgLlpJ9lOPGKQde2XinYJRCnZOoJiPqPEakBmHG-4gCd6Q0cEOMEpnp')"></div>
<div class="absolute inset-0 bg-gradient-to-t from-background-dark via-background-dark/80 to-transparent"></div>
<div class="absolute top-4 right-4 bg-surface-dark/80 backdrop-blur text-white text-xs font-bold px-2 py-1 rounded-md uppercase tracking-wider border border-white/10">
Starts in 2h
</div>
<div class="absolute bottom-0 left-0 w-full p-6 flex flex-col gap-3">
<div>
<p class="text-pink-400 text-xs font-bold uppercase tracking-wider mb-1">General</p>
<h3 class="text-2xl font-bold text-white leading-tight">Daily Mix Vol. 4</h3>
</div>
<div class="flex items-center gap-4 text-xs text-slate-300 font-medium">
<div class="flex items-center gap-1">
<span class="material-symbols-outlined text-sm">group</span> 890
</div>
<div class="flex items-center gap-1">
<span class="material-symbols-outlined text-sm text-green-400">eco</span> Easy
</div>
</div>
<button class="w-full mt-2 py-3 rounded-lg bg-white/10 hover:bg-primary text-white font-bold text-sm transition-colors backdrop-blur-md border border-white/10 group-hover:border-primary/50">
Notify Me
</button>
</div>
</div>
<!-- Card 4 (Locked) -->
<div class="snap-center group w-[280px] sm:w-[320px] h-[400px] rounded-xl relative overflow-hidden border border-white/5 flex items-center justify-center bg-surface-dark/50">
<div class="text-center p-6 opacity-50">
<span class="material-symbols-outlined text-4xl mb-2">lock</span>
<p class="text-sm font-bold">More Coming Soon</p>
</div>
</div>
</div>
</div>
</section>
<!-- Leaderboard & Promo Split -->
<section class="w-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Leaderboard -->
<div class="lg:col-span-1 flex flex-col gap-4">
<h2 class="text-xl font-bold text-white flex items-center gap-2">
<span class="material-symbols-outlined text-yellow-400">leaderboard</span>
Live Leaderboard
</h2>
<div class="glass-panel rounded-xl p-4 flex flex-col gap-3">
<!-- Rank 1 -->
<div class="flex items-center justify-between p-3 rounded-lg bg-white/5 border border-yellow-500/30 relative overflow-hidden group hover:bg-white/10 transition-colors cursor-pointer">
<div class="absolute left-0 top-0 h-full w-1 bg-yellow-400"></div>
<div class="flex items-center gap-3">
<div class="text-yellow-400 font-black text-lg w-6">1</div>
<img class="w-10 h-10 rounded-full object-cover ring-2 ring-yellow-400/50" data-alt="Profile picture of top player" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDoZMkIRi2Vcufw6AL9rMlT4dRbiKf2Sx9mYTrLRJR3VRFCBws_mnp-EpvRy-2PeBvEJPcj8r_5aCiEb3P9xYJiCgG6WOryxXNuHO1nwMM1F7FWiaNdrb6YB7Z3b7JG7nbNnkTiSF3g4PULkI8XW8ZKAEFbnazsktEVO5ZsjZGm6so2Qiit1hu1mUKonFhlWv_G_53hSIOlkAcIcPvAGmolQfTpK1Vz2Hj2CG1Cl324Tbgy6Z8od7A-TLQsqXM4kXNE-ISperF5"/>
<div>
<p class="text-white font-bold text-sm">CryptoKing</p>
<p class="text-xs text-slate-400">Lvl 42 Wizard</p>
</div>
</div>
<div class="text-right">
<p class="text-white font-bold text-sm">12,450</p>
<p class="text-[10px] text-primary uppercase font-bold">Pts</p>
</div>
</div>
<!-- Rank 2 -->
<div class="flex items-center justify-between p-3 rounded-lg bg-white/5 border border-white/5 hover:bg-white/10 transition-colors cursor-pointer">
<div class="flex items-center gap-3">
<div class="text-slate-400 font-bold text-lg w-6">2</div>
<img class="w-10 h-10 rounded-full object-cover" data-alt="Profile picture of second place player" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAxXTMOc0X7S3sn6ab6O7ap7cHcItm_YBbrlb3KIlEnVyclwxl7B_lrpRVZ-PkNjxRJpwmsWtM6L24kLBl1ysnp7xaUpdFd2zQN_46497nboFcw6Kw27hdGedaV5-c3iH1TACnlhDMbBXyWUptkK35ppo24_dPTEXY7OxlPTvsvq7Ajvpbi-kH_tQ3hNLVyTPVs23f0-kMP4ME3HfoFOXzEOz2gTOXwA0yCOnq0uhSeGSA9YOZ-qqdHTgjXuxrvaBSfWls2SPq5"/>
<div>
<p class="text-white font-bold text-sm">TriviaQueen</p>
<p class="text-xs text-slate-400">Lvl 38 Scholar</p>
</div>
</div>
<div class="text-right">
<p class="text-white font-bold text-sm">10,890</p>
<p class="text-[10px] text-slate-500 uppercase font-bold">Pts</p>
</div>
</div>
<!-- Rank 3 -->
<div class="flex items-center justify-between p-3 rounded-lg bg-white/5 border border-white/5 hover:bg-white/10 transition-colors cursor-pointer">
<div class="flex items-center gap-3">
<div class="text-slate-400 font-bold text-lg w-6">3</div>
<img class="w-10 h-10 rounded-full object-cover" data-alt="Profile picture of third place player" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDKGAwOhgFmcv1Ol1zb79sjeFsaW9pdN8e4_jhZLUK7lODY82C13X2VaFpz_rDI2LUihfz7oIlVYtSMgrd3I02xEUiGgro5Ha4o9kC-vP8SkEcRodSHvTVl83n1x25TfgELDnRl6iUOrAQ_YpmVNcf3GVCeVhEJFU6iwW0iFRgsmWQvmM0LfZhQlzWv9YmyHm4sT4PQssOVBiegGFV-6LP2TxSY96J8cdTp9Vr4FGMEsnTUO7kKsCNMFEiXJhXZWXY2WP_RLpMf"/>
<div>
<p class="text-white font-bold text-sm">PixelPioneer</p>
<p class="text-xs text-slate-400">Lvl 35 Rookie</p>
</div>
</div>
<div class="text-right">
<p class="text-white font-bold text-sm">9,240</p>
<p class="text-[10px] text-slate-500 uppercase font-bold">Pts</p>
</div>
</div>
<button class="w-full py-2 mt-2 text-xs font-bold text-slate-400 hover:text-white uppercase tracking-wider flex items-center justify-center gap-1 transition-colors">
See Full Rankings <span class="material-symbols-outlined text-sm">expand_more</span>
</button>
</div>
</div>
<!-- Promo Card -->
<div class="lg:col-span-2 relative group overflow-hidden rounded-2xl border border-white/10 bg-surface-dark">
<!-- Holographic Background Effect -->
<div class="absolute inset-0 bg-cover bg-center opacity-40 group-hover:opacity-60 transition-opacity duration-700" data-alt="Abstract holographic texture" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuCWhLRp0-oki0j8fqVDSDmTPhSGIy4H2IsqKrId1J9gdcwXHc9AmUvJXQYwi6S4OTF44llVRbd1sRIY-Po3Yda-hV7ewnZqNO0jpCrVopb10QW2wrYYDF619RGcUxJO-fzyvO5gjG20cu_T4JB5GbLJg4kqBKeJge7o0XegXLJwhqDec5aZRPXWYTJOXaG3qmnPfVGce-fZ75IKAtXI45LHIshffG0KbWQD1TbHwURXPUhsebmJwJqFnRiqMcdVmeRK-kyXdJXM')"></div>
<div class="absolute inset-0 bg-gradient-to-r from-background-dark via-background-dark/90 to-transparent"></div>
<div class="relative p-8 h-full flex flex-col justify-center items-start">
<div class="inline-block px-3 py-1 bg-gradient-to-r from-amber-400 to-orange-500 rounded-full text-black text-xs font-bold uppercase tracking-wider mb-4 shadow-lg shadow-orange-500/20">Limited Time Offer</div>
<h3 class="text-3xl font-black text-white mb-2 max-w-md">Get the Standard Entry Pass</h3>
<p class="text-slate-300 max-w-md mb-6 leading-relaxed">Unlock exclusive tournaments, double XP weekends, and a unique avatar frame. Level up faster than ever.</p>
<div class="flex flex-wrap items-center gap-4">
<button class="bg-white text-background-dark px-6 py-3 rounded-full font-bold text-sm hover:bg-slate-200 transition-colors shadow-[0_0_20px_rgba(255,255,255,0.3)]">
Claim Pass - $4.99
</button>
<span class="text-slate-400 text-sm line-through decoration-red-500 decoration-2">$9.99</span>
</div>
</div>
<!-- Decorative Ticket Stub effect -->
<div class="absolute -right-12 top-1/2 -translate-y-1/2 w-48 h-48 border-[6px] border-white/10 rounded-full blur-sm"></div>
</div>
</section>
<!-- How It Works -->
<section class="w-full text-center">
<h2 class="text-2xl font-bold text-white mb-10">Your Path to Glory</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 relative">
<!-- Connector Line (Desktop) -->
<div class="hidden md:block absolute top-12 left-0 w-full h-1 bg-gradient-to-r from-transparent via-primary/50 to-transparent z-0"></div>
<!-- Step 1 -->
<div class="relative z-10 flex flex-col items-center gap-4 group">
<div class="size-24 rounded-full glass-panel flex items-center justify-center border border-white/10 group-hover:border-primary/50 group-hover:bg-primary/20 transition-all duration-300 shadow-[0_0_30px_rgba(0,0,0,0.3)]">
<span class="material-symbols-outlined text-4xl text-white group-hover:scale-110 transition-transform">person_add</span>
</div>
<div>
<h3 class="text-lg font-bold text-white mb-2">1. Join the Guild</h3>
<p class="text-sm text-slate-400 px-6">Create your profile and customize your 3D avatar for the arena.</p>
</div>
</div>
<!-- Step 2 -->
<div class="relative z-10 flex flex-col items-center gap-4 group">
<div class="size-24 rounded-full glass-panel flex items-center justify-center border border-white/10 group-hover:border-primary/50 group-hover:bg-primary/20 transition-all duration-300 shadow-[0_0_30px_rgba(0,0,0,0.3)]">
<span class="material-symbols-outlined text-4xl text-white group-hover:scale-110 transition-transform">swords</span>
</div>
<div>
<h3 class="text-lg font-bold text-white mb-2">2. Battle Players</h3>
<p class="text-sm text-slate-400 px-6">Enter live quizzes or challenge friends in head-to-head duels.</p>
</div>
</div>
<!-- Step 3 -->
<div class="relative z-10 flex flex-col items-center gap-4 group">
<div class="size-24 rounded-full glass-panel flex items-center justify-center border border-white/10 group-hover:border-primary/50 group-hover:bg-primary/20 transition-all duration-300 shadow-[0_0_30px_rgba(0,0,0,0.3)]">
<span class="material-symbols-outlined text-4xl text-white group-hover:scale-110 transition-transform">military_tech</span>
</div>
<div>
<h3 class="text-lg font-bold text-white mb-2">3. Earn Rewards</h3>
<p class="text-sm text-slate-400 px-6">Top the leaderboard to win cash prizes, skins, and glory.</p>
</div>
</div>
</div>
</section>
<!-- Newsletter/CTA Footer -->
<section class="w-full glass-panel rounded-2xl p-8 md:p-12 text-center relative overflow-hidden">
<div class="relative z-10 flex flex-col items-center max-w-2xl mx-auto gap-6">
<span class="material-symbols-outlined text-5xl text-primary mb-2">rocket_launch</span>
<h2 class="text-3xl md:text-4xl font-black text-white">Ready to Dominate?</h2>
<p class="text-slate-300 text-lg">Join the fastest growing trivia community today. It's free to play.</p>
<button class="bg-gradient-to-r from-primary to-purple-600 hover:from-primary/90 hover:to-purple-600/90 text-white font-bold text-lg py-4 px-10 rounded-full shadow-lg shadow-primary/30 transform hover:scale-105 transition-all">
Create Free Account
</button>
</div>
<!-- Background Pattern -->
<div class="absolute inset-0 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-primary/20 via-transparent to-transparent opacity-50"></div>
</section>
</main>
<!-- Footer -->
<footer class="border-t border-white/5 bg-background-dark pt-12 pb-8 px-6">
<div class="max-w-[1200px] mx-auto flex flex-col md:flex-row justify-between items-center gap-8">
<div class="flex items-center gap-2">
<div class="size-6 rounded-full bg-primary flex items-center justify-center text-white">
<span class="material-symbols-outlined text-sm">bolt</span>
</div>
<span class="text-white font-bold tracking-tight">QuizQuest</span>
</div>
<div class="flex gap-8 text-sm text-slate-400">
<a class="hover:text-white transition-colors" href="#">Terms of Service</a>
<a class="hover:text-white transition-colors" href="#">Privacy Policy</a>
<a class="hover:text-white transition-colors" href="#">Discord</a>
<a class="hover:text-white transition-colors" href="#">Support</a>
</div>
<p class="text-xs text-slate-600">© 2024 QuizQuest Inc. All rights reserved.</p>
</div>
</footer>
</div>
<!-- Animation CSS -->
<style>
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-15px); }
100% { transform: translateY(0px); }
}
</style>
</body></html>