<!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Global Tournament Schedule - QuizArena</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 CSS -->
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<!-- Theme Configuration -->
<script>
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"primary": "#5b13ec",
"background-light": "#f6f6f8",
"background-dark": "#131118", // Matches the provided component's background
"surface-dark": "#1f1c27",
"surface-lighter": "#2e2839",
},
fontFamily: {
"display": ["Spline Sans", "sans-serif"],
"sans": ["Spline Sans", "sans-serif"]
},
borderRadius: {
"DEFAULT": "1rem",
"lg": "2rem",
"xl": "3rem",
"full": "9999px"
},
},
},
}
</script>
<style>
body {
font-family: "Spline Sans", sans-serif;
}
/* Custom scrollbar for webkit */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #131118;
}
::-webkit-scrollbar-thumb {
background: #2e2839;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #5b13ec;
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark text-slate-900 dark:text-slate-100 min-h-screen flex flex-col font-display antialiased selection:bg-primary selection:text-white">
<!-- Top Navigation -->
<header class="sticky top-0 z-50 bg-[#131118]/80 backdrop-blur-md border-b border-solid border-[#2e2839] w-full">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<!-- Logo -->
<div class="flex items-center gap-3">
<div class="size-8 text-primary">
<svg class="w-full h-full" fill="none" viewbox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<path d="M36.7273 44C33.9891 44 31.6043 39.8386 30.3636 33.69C29.123 39.8386 26.7382 44 24 44C21.2618 44 18.877 39.8386 17.6364 33.69C16.3957 39.8386 14.0109 44 11.2727 44C7.25611 44 4 35.0457 4 24C4 12.9543 7.25611 4 11.2727 4C14.0109 4 16.3957 8.16144 17.6364 14.31C18.877 8.16144 21.2618 4 24 4C26.7382 4 29.123 8.16144 30.3636 14.31C31.6043 8.16144 33.9891 4 36.7273 4C40.7439 4 44 12.9543 44 24C44 35.0457 40.7439 44 36.7273 44Z" fill="currentColor"></path>
</svg>
</div>
<span class="text-white text-xl font-bold tracking-tight">QuizArena</span>
</div>
<!-- Nav Links -->
<nav class="hidden md:flex gap-8">
<a class="text-white hover:text-primary transition-colors text-sm font-medium" href="#">Tournaments</a>
<a class="text-slate-400 hover:text-white transition-colors text-sm font-medium" href="#">Leaderboard</a>
<a class="text-slate-400 hover:text-white transition-colors text-sm font-medium" href="#">Shop</a>
<a class="text-slate-400 hover:text-white transition-colors text-sm font-medium" href="#">Community</a>
</nav>
<!-- Auth Buttons -->
<div class="flex gap-3">
<button class="hidden sm:flex h-10 px-5 items-center justify-center rounded-full bg-surface-lighter text-white text-sm font-bold hover:bg-slate-700 transition-colors">
Log In
</button>
<button class="flex h-10 px-5 items-center justify-center rounded-full bg-primary text-white text-sm font-bold hover:bg-[#4a0bc4] transition-all shadow-[0_0_15px_rgba(91,19,236,0.3)] hover:shadow-[0_0_20px_rgba(91,19,236,0.5)]">
Sign Up
</button>
</div>
</div>
</div>
</header>
<!-- Main Content Area -->
<main class="flex-grow flex flex-col items-center w-full px-4 sm:px-6 lg:px-8 py-8 max-w-7xl mx-auto gap-8">
<!-- Header Section -->
<div class="w-full flex flex-col md:flex-row justify-between items-start md:items-end gap-6 mb-4">
<div class="flex flex-col gap-2">
<h1 class="text-4xl md:text-5xl font-black text-white tracking-tight">
Tournament <span class="text-primary">Schedule</span>
</h1>
<p class="text-slate-400 text-lg max-w-2xl">
Compete in high-stakes quizzes, earn global rank points, and prove your mastery.
</p>
</div>
<!-- Month Selector -->
<div class="flex items-center bg-surface-dark rounded-full p-1 border border-surface-lighter">
<button class="size-10 flex items-center justify-center rounded-full hover:bg-surface-lighter text-slate-300 hover:text-white transition-colors">
<span class="material-symbols-outlined">chevron_left</span>
</button>
<div class="px-6 text-white font-bold text-lg">November 2023</div>
<button class="size-10 flex items-center justify-center rounded-full hover:bg-surface-lighter text-slate-300 hover:text-white transition-colors">
<span class="material-symbols-outlined">chevron_right</span>
</button>
</div>
</div>
<!-- Layout Grid: Calendar + Sidebar -->
<div class="w-full grid grid-cols-1 lg:grid-cols-12 gap-8">
<!-- Left Column: Calendar & Events (8/12) -->
<div class="lg:col-span-8 flex flex-col gap-8">
<!-- Calendar Strip -->
<div class="bg-surface-dark rounded-2xl p-6 border border-surface-lighter shadow-lg overflow-x-auto">
<div class="flex justify-between items-center min-w-[600px] gap-2">
<!-- Day Item -->
<div class="flex flex-col items-center gap-2 group cursor-pointer">
<span class="text-slate-500 text-xs font-bold uppercase tracking-wider">Mon</span>
<div class="size-10 rounded-full flex items-center justify-center text-slate-300 text-sm font-medium hover:bg-surface-lighter transition-colors">13</div>
</div>
<div class="flex flex-col items-center gap-2 group cursor-pointer">
<span class="text-slate-500 text-xs font-bold uppercase tracking-wider">Tue</span>
<div class="size-10 rounded-full flex items-center justify-center text-slate-300 text-sm font-medium hover:bg-surface-lighter transition-colors">14</div>
</div>
<div class="flex flex-col items-center gap-2 group cursor-pointer">
<span class="text-primary text-xs font-bold uppercase tracking-wider">Wed</span>
<div class="size-10 rounded-full flex items-center justify-center bg-primary text-white text-sm font-bold shadow-[0_0_10px_rgba(91,19,236,0.4)]">15</div>
<div class="size-1.5 rounded-full bg-primary mt-1"></div>
</div>
<div class="flex flex-col items-center gap-2 group cursor-pointer">
<span class="text-slate-500 text-xs font-bold uppercase tracking-wider">Thu</span>
<div class="size-10 rounded-full flex items-center justify-center text-slate-300 text-sm font-medium hover:bg-surface-lighter transition-colors">16</div>
</div>
<div class="flex flex-col items-center gap-2 group cursor-pointer">
<span class="text-slate-500 text-xs font-bold uppercase tracking-wider">Fri</span>
<div class="size-10 rounded-full flex items-center justify-center text-slate-300 text-sm font-medium hover:bg-surface-lighter transition-colors">17</div>
<div class="size-1.5 rounded-full bg-surface-lighter mt-1"></div>
</div>
<div class="flex flex-col items-center gap-2 group cursor-pointer">
<span class="text-slate-500 text-xs font-bold uppercase tracking-wider">Sat</span>
<div class="size-10 rounded-full flex items-center justify-center text-slate-300 text-sm font-medium hover:bg-surface-lighter transition-colors">18</div>
</div>
<div class="flex flex-col items-center gap-2 group cursor-pointer">
<span class="text-slate-500 text-xs font-bold uppercase tracking-wider">Sun</span>
<div class="size-10 rounded-full flex items-center justify-center text-slate-300 text-sm font-medium hover:bg-surface-lighter transition-colors">19</div>
</div>
</div>
</div>
<!-- Featured Event: Hero Card -->
<div class="relative w-full rounded-2xl overflow-hidden group">
<div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/50 to-transparent z-10"></div>
<img alt="Neon futuristic gaming city background" class="w-full h-80 object-cover group-hover:scale-105 transition-transform duration-700" data-alt="Futuristic neon city landscape for gaming event" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBLIfVQav8Ub6X7GIXmGlARtIjLFI46qKFrb04pML5_wdP18OCr3dUMRt51ClwtYiyiDUXhQuz9Hb82IbJb_aCHsAKfXstu9HUKPXkhAPFAM4we9kFxH3fslKDZ5mxWfLMY02T7xBNNq-EywQ2-PSY7V-e4q4YDJWWj9dGrO5YiwlfXEjtpd77FgyHEr-QgBlo2NcApI3AQ8dQMpM1vlFVxwq6f3oEr2UxLezk2jXzwfgOWIca7MXy27QOv_UFRUjLqobdmd8hDbr1k"/>
<div class="absolute top-4 right-4 z-20">
<span class="px-4 py-1.5 rounded-full bg-primary/90 text-white text-xs font-bold uppercase tracking-wider backdrop-blur-sm border border-white/10 shadow-[0_0_15px_rgba(91,19,236,0.5)] animate-pulse">
Live in 2h 15m
</span>
</div>
<div class="absolute bottom-0 left-0 w-full p-6 z-20 flex flex-col md:flex-row md:items-end justify-between gap-6">
<div class="flex flex-col gap-2">
<div class="flex items-center gap-2 text-primary font-bold text-sm tracking-wide uppercase">
<span class="material-symbols-outlined text-[18px]">workspace_premium</span>
Major Event
</div>
<h2 class="text-3xl font-bold text-white leading-tight">Neon Night Trivia</h2>
<div class="flex items-center gap-4 text-slate-300 text-sm mt-1">
<div class="flex items-center gap-1">
<span class="material-symbols-outlined text-[16px]">calendar_today</span>
Nov 15, 8:00 PM EST
</div>
<div class="flex items-center gap-1">
<span class="material-symbols-outlined text-[16px]">group</span>
2.4k Registered
</div>
</div>
</div>
<div class="flex flex-col items-start md:items-end gap-3">
<div class="flex items-center gap-6">
<div class="text-right">
<p class="text-slate-400 text-xs font-medium uppercase">Prize Pool</p>
<p class="text-white text-xl font-bold font-mono">$5,000</p>
</div>
<div class="w-px h-8 bg-white/20"></div>
<div class="text-right">
<p class="text-slate-400 text-xs font-medium uppercase">Entry Fee</p>
<p class="text-green-400 text-xl font-bold">$20</p>
</div>
</div>
<button class="w-full md:w-auto px-8 h-12 rounded-full bg-primary hover:bg-[#4a0bc4] text-white font-bold flex items-center justify-center gap-2 transition-all shadow-lg hover:shadow-primary/40">
Pre-register Now
<span class="material-symbols-outlined">arrow_forward</span>
</button>
</div>
</div>
</div>
<!-- Upcoming Events List -->
<div class="flex flex-col gap-4">
<h3 class="text-white text-xl font-bold px-1">Upcoming This Week</h3>
<!-- Event Card 1 -->
<div class="group bg-surface-dark border border-surface-lighter hover:border-primary/50 rounded-2xl p-4 flex flex-col sm:flex-row items-center gap-4 transition-all hover:shadow-[0_4px_20px_rgba(0,0,0,0.4)]">
<div class="w-full sm:w-32 h-32 sm:h-24 rounded-xl overflow-hidden shrink-0 relative">
<img alt="Abstract colorful smoke pattern" class="w-full h-full object-cover" data-alt="Abstract colorful smoke pattern background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDvZ4LmUuxj9r7mAQhVkP8p7hFG2PnhPLXM0a6ejof1DX1Tt2Mp1S7xDlofkPn4cLFNSxv4Kj7dXo1STvhArm1CQNtypuNMh_nh2bvOLe_RK7KO9HKRb8VKsow1aq2Vgp6H3DtIvCENSZly17JmvMUNAlo6sgat_lKnGtF1VLs_qGrtnAORbM8UpBvJ6iI-Oh7gh_x0W-GaN1g_eUxpF--c2BXjZbkNN90kaYkZLM8_Ey9f8qTZCOd0sN66mtFgdIbazJlyyD1dGXnf"/>
<div class="absolute inset-0 bg-black/30 group-hover:bg-transparent transition-colors"></div>
</div>
<div class="flex-grow text-center sm:text-left">
<div class="flex flex-wrap justify-center sm:justify-start gap-2 mb-1">
<span class="px-2 py-0.5 rounded-md bg-surface-lighter text-slate-300 text-[10px] font-bold uppercase tracking-wider border border-white/5">Science</span>
<span class="px-2 py-0.5 rounded-md bg-surface-lighter text-slate-300 text-[10px] font-bold uppercase tracking-wider border border-white/5">Medium</span>
</div>
<h4 class="text-lg font-bold text-white group-hover:text-primary transition-colors">Quantum Mechanics Duel</h4>
<p class="text-slate-400 text-sm mt-1">Nov 17 • 6:00 PM EST</p>
</div>
<div class="flex flex-col items-center sm:items-end gap-2 shrink-0 min-w-[120px] w-full sm:w-auto">
<div class="flex items-center gap-4 text-sm">
<span class="text-slate-400">Prize: <b class="text-white">$500</b></span>
<span class="text-slate-400">Entry: <b class="text-primary">Free</b></span>
</div>
<button class="w-full sm:w-auto h-9 px-5 rounded-full bg-surface-lighter hover:bg-slate-700 text-white text-sm font-semibold transition-colors border border-white/5">
Remind Me
</button>
</div>
</div>
<!-- Event Card 2 -->
<div class="group bg-surface-dark border border-surface-lighter hover:border-primary/50 rounded-2xl p-4 flex flex-col sm:flex-row items-center gap-4 transition-all hover:shadow-[0_4px_20px_rgba(0,0,0,0.4)]">
<div class="w-full sm:w-32 h-32 sm:h-24 rounded-xl overflow-hidden shrink-0 relative">
<img alt="Crowd at a concert with lights" class="w-full h-full object-cover" data-alt="Concert crowd silhouette with stage lights" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDGDg92-BP3yf0AAYgX3nQj4FZ8Fadu0vJQYofwjMsf7VeKN50Xw5x51j98zgUSK4HmWL2HmINlDx_cQ2Z1hYTlvv6XSLsIQatfW680kKGLoJE9DHYSP5EK-z631NbPQSAp1ugLjh46Ja8L0f6QMNlcwNMaH0QZx4v-0ZuO_Yruho7Vi-SbmOQCKeeH5rDAtPDz_NEvAjxyyqgaUMNtJzCxpX2Lq2zr1f64QxfAkYorLN3rg2bBOSF_Uj0soesrmrtHI-HwTSKDJWS9"/>
</div>
<div class="flex-grow text-center sm:text-left">
<div class="flex flex-wrap justify-center sm:justify-start gap-2 mb-1">
<span class="px-2 py-0.5 rounded-md bg-surface-lighter text-slate-300 text-[10px] font-bold uppercase tracking-wider border border-white/5">Pop Culture</span>
</div>
<h4 class="text-lg font-bold text-white group-hover:text-primary transition-colors">Grandmaster Weekend</h4>
<p class="text-slate-400 text-sm mt-1">Nov 18 • 9:00 PM EST</p>
</div>
<div class="flex flex-col items-center sm:items-end gap-2 shrink-0 min-w-[120px] w-full sm:w-auto">
<div class="flex items-center gap-4 text-sm">
<span class="text-slate-400">Prize: <b class="text-white">$10k</b></span>
<span class="text-slate-400">Entry: <b class="text-green-400">$50</b></span>
</div>
<button class="w-full sm:w-auto h-9 px-5 rounded-full bg-surface-lighter hover:bg-slate-700 text-white text-sm font-semibold transition-colors border border-white/5">
Pre-register
</button>
</div>
</div>
<!-- Event Card 3 -->
<div class="group bg-surface-dark border border-surface-lighter hover:border-primary/50 rounded-2xl p-4 flex flex-col sm:flex-row items-center gap-4 transition-all hover:shadow-[0_4px_20px_rgba(0,0,0,0.4)]">
<div class="w-full sm:w-32 h-32 sm:h-24 rounded-xl overflow-hidden shrink-0 relative">
<img alt="Esports gaming setup with purple lighting" class="w-full h-full object-cover" data-alt="Gaming setup with monitors and neon lights" src="https://lh3.googleusercontent.com/aida-public/AB6AXuA8b70yMsf_tqmHHyDOqqKiNq0KhDxZxgIbpGBAUM10E-ID3vKu6tvZfpvnMlOiqKVOIGmf3zzyL8XdsyYGhNYRqC43nkyFsc_L3VEJGANooOGnxJs6YfriRUcG3Vpf1dIrCSS4Mt1hE-W-r9C8Op9m4hv8E1wN8x6FTlJI-iLheKhACAEZEmBFWm6Gw-kEWdEveHt6e9VnKkPzLrm4gJxklEJhV_JQkEuNqBSlDl3i6yCoTlFTLSeSd-Bit6d6xKo0Frwy-GW_zdj3"/>
</div>
<div class="flex-grow text-center sm:text-left">
<div class="flex flex-wrap justify-center sm:justify-start gap-2 mb-1">
<span class="px-2 py-0.5 rounded-md bg-surface-lighter text-slate-300 text-[10px] font-bold uppercase tracking-wider border border-white/5">Esports</span>
<span class="px-2 py-0.5 rounded-md bg-surface-lighter text-slate-300 text-[10px] font-bold uppercase tracking-wider border border-white/5">Hard</span>
</div>
<h4 class="text-lg font-bold text-white group-hover:text-primary transition-colors">Speed Run Challenge</h4>
<p class="text-slate-400 text-sm mt-1">Nov 20 • 7:30 PM EST</p>
</div>
<div class="flex flex-col items-center sm:items-end gap-2 shrink-0 min-w-[120px] w-full sm:w-auto">
<div class="flex items-center gap-4 text-sm">
<span class="text-slate-400">Prize: <b class="text-white">$1k</b></span>
<span class="text-slate-400">Entry: <b class="text-green-400">$5</b></span>
</div>
<button class="w-full sm:w-auto h-9 px-5 rounded-full bg-surface-lighter hover:bg-slate-700 text-white text-sm font-semibold transition-colors border border-white/5">
Pre-register
</button>
</div>
</div>
</div>
</div>
<!-- Right Column: Featured Masters Sidebar (4/12) -->
<div class="lg:col-span-4 space-y-8">
<!-- Quick Search -->
<div class="relative">
<span class="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 material-symbols-outlined text-[20px]">search</span>
<input class="w-full h-12 bg-surface-dark border border-surface-lighter rounded-full pl-12 pr-4 text-white text-sm focus:outline-none focus:border-primary transition-colors placeholder:text-slate-500" placeholder="Find tournaments or players..." type="text"/>
</div>
<!-- Featured Masters Card -->
<div class="bg-surface-dark rounded-3xl p-6 border border-surface-lighter shadow-lg">
<div class="flex items-center justify-between mb-6">
<h3 class="text-white font-bold text-lg">Masters to Watch</h3>
<a class="text-primary text-xs font-bold uppercase hover:underline" href="#">View All</a>
</div>
<div class="flex flex-col gap-5">
<!-- Player 1 -->
<div class="flex items-center gap-3 group cursor-pointer">
<div class="relative">
<img alt="Profile avatar of QuizKing99" class="size-12 rounded-full object-cover border-2 border-surface-lighter group-hover:border-primary transition-colors" data-alt="Male profile picture avatar" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBzEU_1_KP5y5TDDCDvZwRMCNete4xD9Y3USkFdXH5CrdiSemH2an2nzguD3DpIr7Xs5H6Swggc-xNnLTn_EIKVT-ur2oI7RGiQxFM3iDEKHBo2rtWFcMyQ_4fFB_6h1xqT-oY1pGYQujTysIzA9jmNcNG4qLMTwsQl5idtyPwNmwtkg1qFkIDqtTjbLVF8-Y37l5hDIQ_7vLuA5KlXm1m2zT77R84dVPifMSjJfoLWWvs0zQaTcGengTke74uRSybiRqACRwlhORmy"/>
<div class="absolute bottom-0 right-0 size-3 bg-green-500 border-2 border-surface-dark rounded-full"></div>
</div>
<div class="flex-grow">
<div class="flex items-center gap-2">
<h4 class="text-white font-bold text-sm">QuizKing99</h4>
<span class="material-symbols-outlined text-[14px] text-yellow-500 fill-current">verified</span>
</div>
<p class="text-slate-400 text-xs">Rank #1 • <span class="text-green-400">Online</span></p>
</div>
<div class="text-right">
<div class="text-white font-mono font-bold text-sm">2840</div>
<div class="text-slate-500 text-[10px] uppercase font-bold">PTS</div>
</div>
</div>
<!-- Player 2 -->
<div class="flex items-center gap-3 group cursor-pointer">
<div class="relative">
<img alt="Profile avatar of TriviaTitan" class="size-12 rounded-full object-cover border-2 border-surface-lighter group-hover:border-primary transition-colors" data-alt="Female profile picture avatar" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCraRALD-pW0eFpZ1Bye3TjHMWqM_rLds_FAPHrvSDHyblhKhLNLhPt72V_WueINOUNyDqhxZFimMnfxbUVMsB1dUdCrlEKtZg_ef3aV8ktXipxTyW0tjUMQandd4S8eILewrRbCdOcppK_nSlKYm7lOEB_06_uEByPRGT4-xdFRLgp0-fLcCXr0zA-fV082aM3KYjbJ9Yqo7HVnIp62-0iFE0ZsLlKXpD4ETBaf8ZULkE4cdDSqY-sfBwCSXpQy9XQTOgYXpRnXaoU"/>
<div class="absolute bottom-0 right-0 size-3 bg-yellow-500 border-2 border-surface-dark rounded-full"></div>
</div>
<div class="flex-grow">
<div class="flex items-center gap-2">
<h4 class="text-white font-bold text-sm">TriviaTitan</h4>
</div>
<p class="text-slate-400 text-xs">Rank #2 • <span class="text-yellow-500">In Game</span></p>
</div>
<div class="text-right">
<div class="text-white font-mono font-bold text-sm">2715</div>
<div class="text-slate-500 text-[10px] uppercase font-bold">PTS</div>
</div>
</div>
<!-- Player 3 -->
<div class="flex items-center gap-3 group cursor-pointer">
<div class="relative">
<img alt="Profile avatar of NeuroStar" class="size-12 rounded-full object-cover border-2 border-surface-lighter group-hover:border-primary transition-colors" data-alt="Male profile picture avatar with beard" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBl80wz_rLBB-0c89D-GAgJ3FZ0yg9R7hv1pzkknBlQBCp0qkEhtD9QREqnS925mOc3mB-1cKe6-7G_5h9HIezhFmoZrBn-FVbytx6Nrnz-b9SMSL_osrtNeDbv3_6KXGaQyoCJrQAjFv7gN4QqpQJkb5X0AK0_fkwK8PynDkOi0g9vDkeR16UsYYIClOeUEq9XuiNJ6ngedFig1rrvxtqyEYpIcAE8jN3oL563bjXEMSqj1g8YXgbuV62yJAuHTWJIgPPsYJJ8WgYx"/>
<div class="absolute bottom-0 right-0 size-3 bg-slate-500 border-2 border-surface-dark rounded-full"></div>
</div>
<div class="flex-grow">
<div class="flex items-center gap-2">
<h4 class="text-white font-bold text-sm">NeuroStar</h4>
</div>
<p class="text-slate-400 text-xs">Rank #5 • <span class="text-slate-400">Offline</span></p>
</div>
<div class="text-right">
<div class="text-white font-mono font-bold text-sm">2450</div>
<div class="text-slate-500 text-[10px] uppercase font-bold">PTS</div>
</div>
</div>
</div>
<button class="w-full mt-6 py-3 rounded-xl border border-dashed border-slate-600 text-slate-400 text-sm font-medium hover:text-white hover:border-white hover:bg-white/5 transition-all">
Challenge a Friend
</button>
</div>
<!-- Promo / Ad Block -->
<div class="rounded-3xl p-6 bg-gradient-to-br from-[#2e2839] to-primary/20 border border-surface-lighter relative overflow-hidden">
<div class="relative z-10">
<div class="size-12 rounded-full bg-primary/20 flex items-center justify-center mb-4 text-primary">
<span class="material-symbols-outlined">diamond</span>
</div>
<h3 class="text-white font-bold text-lg mb-2">Upgrade to Pro</h3>
<p class="text-slate-300 text-sm mb-4 leading-relaxed">Get 2x XP, exclusive tournament access, and custom avatar frames.</p>
<button class="text-white text-sm font-bold underline decoration-primary decoration-2 underline-offset-4 hover:text-primary transition-colors">
View Plans
</button>
</div>
<!-- Decorative circle -->
<div class="absolute -bottom-10 -right-10 size-40 bg-primary/20 blur-3xl rounded-full pointer-events-none"></div>
</div>
</div>
</div>
</main>
<!-- Footer -->
<footer class="mt-auto border-t border-[#2e2839] bg-[#0f0e13] py-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
<div class="col-span-1 md:col-span-1">
<div class="flex items-center gap-2 mb-4 text-white">
<div class="size-6 text-primary">
<svg class="w-full h-full" fill="none" viewbox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<path d="M36.7273 44C33.9891 44 31.6043 39.8386 30.3636 33.69C29.123 39.8386 26.7382 44 24 44C21.2618 44 18.877 39.8386 17.6364 33.69C16.3957 39.8386 14.0109 44 11.2727 44C7.25611 44 4 35.0457 4 24C4 12.9543 7.25611 4 11.2727 4C14.0109 4 16.3957 8.16144 17.6364 14.31C18.877 8.16144 21.2618 4 24 4C26.7382 4 29.123 8.16144 30.3636 14.31C31.6043 8.16144 33.9891 4 36.7273 4C40.7439 4 44 12.9543 44 24C44 35.0457 40.7439 44 36.7273 44Z" fill="currentColor"></path>
</svg>
</div>
<span class="font-bold text-lg">QuizArena</span>
</div>
<p class="text-slate-500 text-sm leading-relaxed">The ultimate competitive knowledge platform. Play, compete, and win real rewards.</p>
</div>
<div>
<h4 class="text-white font-bold mb-4">Platform</h4>
<ul class="space-y-2 text-sm text-slate-400">
<li><a class="hover:text-primary transition-colors" href="#">Play Now</a></li>
<li><a class="hover:text-primary transition-colors" href="#">Tournaments</a></li>
<li><a class="hover:text-primary transition-colors" href="#">Leaderboards</a></li>
</ul>
</div>
<div>
<h4 class="text-white font-bold mb-4">Community</h4>
<ul class="space-y-2 text-sm text-slate-400">
<li><a class="hover:text-primary transition-colors" href="#">Discord</a></li>
<li><a class="hover:text-primary transition-colors" href="#">Twitter</a></li>
<li><a class="hover:text-primary transition-colors" href="#">Forum</a></li>
</ul>
</div>
<div>
<h4 class="text-white font-bold mb-4">Support</h4>
<ul class="space-y-2 text-sm text-slate-400">
<li><a class="hover:text-primary transition-colors" href="#">Help Center</a></li>
<li><a class="hover:text-primary transition-colors" href="#">Terms of Service</a></li>
<li><a class="hover:text-primary transition-colors" href="#">Privacy Policy</a></li>
</ul>
</div>
</div>
<div class="border-t border-[#2e2839] pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
<p class="text-slate-600 text-xs">© 2023 QuizArena Inc. All rights reserved.</p>
<div class="flex gap-4">
<a class="text-slate-500 hover:text-white transition-colors" href="#">
<span class="material-symbols-outlined text-[20px]">language</span>
</a>
</div>
</div>
</div>
</footer>
</body></html>