<!DOCTYPE html>
<html class="light" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>QuizQuest - Winners Circle</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,typography,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Outfit:wght@500;700;900&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet"/>
<script>
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
primary: "#7C3AED", // Violet-600
"primary-hover": "#6D28D9", // Violet-700
"accent-yellow": "#FACC15", // Yellow-400
"background-light": "#F8FAFC", // Slate-50
"card-light": "#FFFFFF",
"text-light": "#1F2937", // Gray-800
"text-subtle": "#64748B", // Slate-500
},
fontFamily: {
sans: ["Inter", "sans-serif"],
display: ["Outfit", "sans-serif"],
},
backgroundImage: {
'hero-gradient': 'linear-gradient(135deg, #F3E8FF 0%, #FFFFFF 100%)',
'confetti': "url('data:image/svg+xml,%3Csvg width=\"100\" height=\"100\" viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\"%3E%3Cpath d=\"M10 10h10v10H10z\" fill=\"%23FCD34D\" fill-opacity=\"0.4\"/%3E%3Cpath d=\"M30 50h10v10H30z\" fill=\"%238B5CF6\" fill-opacity=\"0.4\"/%3E%3Cpath d=\"M70 20h10v10H70z\" fill=\"%23F472B6\" fill-opacity=\"0.4\"/%3E%3C/svg%3E')",
},
animation: {
'float': 'float 6s ease-in-out infinite',
'scroll': 'scroll 20s linear infinite',
},
keyframes: {
float: {
'0%, 100%': { transform: 'translateY(0)' },
'50%': { transform: 'translateY(-10px)' },
},
scroll: {
'0%': { transform: 'translateX(0)' },
'100%': { transform: 'translateX(-100%)' },
}
}
},
},
};
</script>
<style>
.no-scrollbar::-webkit-scrollbar {
display: none;
}
.no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}
</style>
</head>
<body class="bg-background-light text-text-light font-sans antialiased selection:bg-primary selection:text-white">
<nav class="fixed top-0 w-full z-50 bg-white/90 backdrop-blur-md border-b border-gray-100 shadow-sm">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-20">
<div class="flex-shrink-0 flex items-center gap-2 cursor-pointer">
<div class="w-10 h-10 bg-primary rounded-xl flex items-center justify-center text-white shadow-lg shadow-primary/20">
<span class="material-icons-outlined text-2xl">emoji_events</span>
</div>
<span class="font-display font-bold text-xl tracking-tight text-gray-900">QuizQuest</span>
</div>
<div class="hidden md:block">
<div class="ml-10 flex items-baseline space-x-8">
<a class="text-gray-600 hover:text-primary transition-colors px-3 py-2 rounded-md text-sm font-medium" href="#">Home</a>
<a class="text-primary bg-primary/5 px-3 py-2 rounded-md text-sm font-bold" href="#">Winners</a>
<a class="text-gray-600 hover:text-primary transition-colors px-3 py-2 rounded-md text-sm font-medium" href="#">Prizes</a>
<a class="text-gray-600 hover:text-primary transition-colors px-3 py-2 rounded-md text-sm font-medium" href="#">Leaderboard</a>
</div>
</div>
<div class="hidden md:flex items-center gap-4">
<a class="text-sm font-medium text-gray-600 hover:text-primary transition-colors" href="#">Login</a>
<a class="bg-primary hover:bg-primary-hover text-white px-6 py-2.5 rounded-full text-sm font-semibold transition-all transform hover:scale-105 shadow-lg shadow-primary/30" href="#">
Play Now
</a>
</div>
<div class="-mr-2 flex md:hidden">
<button class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-900 focus:outline-none" type="button">
<span class="material-icons-outlined">menu</span>
</button>
</div>
</div>
</div>
</nav>
<section class="relative pt-32 pb-16 overflow-hidden">
<div class="absolute inset-0 bg-hero-gradient"></div>
<div class="absolute inset-0 bg-confetti opacity-30"></div>
<div class="absolute top-28 right-0 lg:right-20 animate-float hidden lg:block">
<div class="bg-white p-4 rounded-2xl shadow-xl border border-gray-100 flex items-center gap-4 transform rotate-6 hover:rotate-0 transition-transform">
<div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center text-green-600">
<span class="material-icons-outlined">payments</span>
</div>
<div>
<div class="text-xs text-gray-500 font-semibold uppercase tracking-wider">Total Rewards Paid</div>
<div class="text-2xl font-display font-bold text-gray-900">₹10,00,000+</div>
</div>
</div>
</div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 text-center">
<div class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-yellow-100 border border-yellow-200 text-yellow-800 text-xs font-bold tracking-wider uppercase mb-6 shadow-sm">
<span class="material-icons-outlined text-sm">celebration</span>
Hall of Fame
</div>
<h1 class="font-display text-5xl sm:text-6xl lg:text-7xl font-bold leading-[1.1] text-gray-900 mb-6">
Real Winners. <br/>
<span class="text-transparent bg-clip-text bg-gradient-to-r from-primary to-purple-600">Real Rewards.</span>
</h1>
<p class="text-lg text-gray-600 max-w-2xl mx-auto leading-relaxed mb-10">
Join thousands of players who have turned their knowledge into gadgets, cash, and bragging rights. Will you be next?
</p>
<div class="max-w-4xl mx-auto bg-white rounded-full shadow-lg border border-gray-100 p-2 flex items-center overflow-hidden">
<div class="bg-primary text-white text-xs font-bold px-3 py-1 rounded-full whitespace-nowrap shrink-0 z-10">
JUST CLAIMED
</div>
<div class="flex-1 overflow-hidden relative h-6">
<div class="animate-scroll absolute top-0 left-0 whitespace-nowrap flex items-center h-full gap-8 text-sm font-medium text-gray-600 pl-4">
<span class="flex items-center gap-2"><img class="w-5 h-5 rounded-full" src="https://lh3.googleusercontent.com/aida-public/AB6AXuD4ZwGIzDRO5hoPASApJiiblQ2BsxntnNNHMXC1dTkg0zTZTPEJNeNFtEgIY-nOIkBF4qWurHPYT-B920n3Bgkb7bBHgPz5Lha8xC6_HXp46OWlG4dpvxw9pX_89jm01J1LP9fgaJTjPkxAMYUkIdY8wRnbQm4UQNV7o3M_1JzQD3xdTNVamdu913t0ganYfDd652PdzoFPThjTKBONexDhPpJvUU8c7cQp36Ta-3oFdQrgU1TFZQb-vNd3hrOr6dJIubtXPhYPRY0"/> <strong>User123</strong> just claimed a PS5</span>
<span class="flex items-center gap-2"><img class="w-5 h-5 rounded-full" src="https://lh3.googleusercontent.com/aida-public/AB6AXuC1KZawmGvtFkLMYqYTO0SCBdneR__ISXWePWdzKLM8N5IMprY1m2McIvvHequaHuQyBNyepfXQCeiQyy3GPIJD0eJsYnl4Z7rUXdUuSPXwgH0Ml5gKVBbQ251p2wH1Sxqa9-tmBdTFtRdemZ5s1rYufZn5R0P8lv6rHhwpzaCHiD0f7iDpUqqVAUawI6sYqaHy39nCOMqfi3XLvoJP07YuLwSFuonVh2sWTTvU0S-U1kBPV7VTDo2te3Rp0opwifnRC_RD5wRg5_4"/> <strong>Alex_B</strong> won ₹5,000 Cash</span>
<span class="flex items-center gap-2"><img class="w-5 h-5 rounded-full" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBUg0DruVhZYosK2W7phRCOjFa--S9oOM83tG6f4vzvbOQCzTSKwb8tM0iOtTLIT0AJFDUE4XcTmtDlMtGif1oRdHWepH629aHuj5d3d6j19VrdBvXs5RF9gcjjlWGPHnUIGjqd6za3g_2jC2WuqOlv6PKL4_xOZFSQ2hfqa7NRapJ0yU4C_B5_H4ZMTWSrMtxLphpfP6wgwsgZgNDcsetqW5KgVVqrf1Ch3npgq-e_H8o_CT87pDYLjl6NQGyWWrPErgn3enRgz68"/> <strong>Priya.K</strong> unlocked iPhone 14</span>
<span class="flex items-center gap-2"><img class="w-5 h-5 rounded-full" src="https://lh3.googleusercontent.com/aida-public/AB6AXuB3Xc7lSV5WilQk1yFWcN350N_frbcW3fYhinZxvH4P6ccSKC0MDk4GW7R6LbtoJSpfajAnPUYM8a9enbNaktDE8fTEeHKLtG3fT7HCP-yQ3Are4yd5VHPOY8JEOhSLUwhVjFPFJip-CUxSao72118bvswoao80BSQhQ23v2NtYKcgcjms2DdwRyHx75MbQai3Zf-IZST-y9WRICJ3qfmiB_8Ip1P69LwOh4WhgkH6z3NC9roU9Elk45MyQX8kjMIuf4IPLmY2UdwA"/> <strong>Rahul_M</strong> won Smart Watch</span>
<span class="flex items-center gap-2"><img class="w-5 h-5 rounded-full" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAEXHHm7n6sMvzlF5D16B9krt9h4iR1PVmARjnbsFEIz7se-8NTp9OyULElCZvfpKQt0LRiQG_K4RCCIg1cJngIXiefB48JhwzieUse__VZp4f3JO45F9UJA1uF5kC6ESVzg-KYxNoQhUB-gpEL8wRMlyY6efhqZR18rYH5dR1FQoAeDC-EyMGWqzz66XgK0rmS9tqde9DLMTkVUF8BpEkbJdK8-rsTR_QU6cJ26_SQBxyWiwbsW74M7DDZMZ81V0Jb9AKeTXaN7Vc"/> <strong>Sam.J</strong> claimed ₹10,000 Cash</span>
</div>
</div>
</div>
</div>
</section>
<section class="py-20 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-col md:flex-row justify-between items-end mb-12 gap-6">
<div>
<h2 class="font-display text-3xl font-bold text-gray-900 mb-2">Recent Champions</h2>
<p class="text-gray-500">Celebrating the masterminds of this week's quests.</p>
</div>
<div class="flex gap-2">
<button class="w-10 h-10 rounded-full border border-gray-200 flex items-center justify-center hover:bg-gray-50 transition-colors">
<span class="material-icons-outlined text-gray-600">arrow_back</span>
</button>
<button class="w-10 h-10 rounded-full bg-gray-900 flex items-center justify-center text-white hover:bg-gray-800 transition-colors">
<span class="material-icons-outlined">arrow_forward</span>
</button>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="group relative bg-white rounded-3xl overflow-hidden shadow-sm hover:shadow-xl transition-all duration-300 border border-gray-100 hover:border-primary/20">
<div class="relative h-64 overflow-hidden">
<img alt="Winner with Prize" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDK6RtSg3F548TZFi76zXrEnuqLtPmEXrYiniZu-Tucp9phVRD6bjXEFBkxVC0SSHLW9_ZF3bMPMArvhju1Bx6oku-Chn6SsBfiyx2Oi7sZTEnk8xy3rpisUEtcD6Ay9fDu7zXs0sn6PTSxWvzT8r093oX5GNEcS5kH9LmDRkrfc9fj57bpHGWMDDkTjgmpDlabTp0Y02--XMovZUdL5bvuuLAuMxAOhE8iiugQY54qR3FfNbzW3KXOEoAo1AKRF3FyjobbBrOzS3g"/>
<div class="absolute top-4 left-4 bg-white/90 backdrop-blur text-xs font-bold px-3 py-1 rounded-full shadow-md flex items-center gap-1">
<span class="material-icons-outlined text-yellow-500 text-sm">emoji_events</span>
1st Place
</div>
</div>
<div class="p-6">
<div class="flex justify-between items-start mb-4">
<div>
<h3 class="font-bold text-lg text-gray-900">Sarah Jenkins</h3>
<p class="text-sm text-gray-500">Won in Tech Trivia League</p>
</div>
<div class="bg-primary/10 text-primary font-bold px-3 py-1 rounded-lg text-sm">
₹50,000
</div>
</div>
<div class="flex items-center gap-3 pt-4 border-t border-gray-100">
<div class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center">
<span class="material-icons-outlined text-gray-400">format_quote</span>
</div>
<p class="text-xs text-gray-600 italic leading-relaxed">
"I never thought my random tech knowledge would pay off like this! The payout was instant too."
</p>
</div>
</div>
</div>
<div class="group relative bg-white rounded-3xl overflow-hidden shadow-sm hover:shadow-xl transition-all duration-300 border border-gray-100 hover:border-primary/20">
<div class="relative h-64 overflow-hidden">
<img alt="Winner with Prize" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCsnKTc8syx5KC5Zb6gDXK3T_S0AQfhiLbwx4RxCBAZVCWdyOL6OQ9tifYQneRH_2NV3aR-6qXaAmGZxqNUPn6d2w_kokEpR2TqGuMdpjfznqiIwW-mlU6DzTs7zEe4pL6Oo7TpwtsxVxSCF5AVDFPpuDgokwUP1H7ijzc1dUSOCcHvmc9BZXmS297ZJrS7VE8wV7Ki155plW7M0v_53W85r0AHgvdccRAVVl2LB9xoZQ2hgL2DOi99P_AzhYPdoHuG1qch1GbvYpM"/>
<div class="absolute top-4 left-4 bg-white/90 backdrop-blur text-xs font-bold px-3 py-1 rounded-full shadow-md flex items-center gap-1">
<span class="material-icons-outlined text-gray-500 text-sm">emoji_events</span>
Top 10
</div>
</div>
<div class="p-6">
<div class="flex justify-between items-start mb-4">
<div>
<h3 class="font-bold text-lg text-gray-900">David Chen</h3>
<p class="text-sm text-gray-500">Won in Sports Mania</p>
</div>
<div class="bg-primary/10 text-primary font-bold px-3 py-1 rounded-lg text-sm">
PlayStation 5
</div>
</div>
<div class="flex items-center gap-3 pt-4 border-t border-gray-100">
<div class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center">
<span class="material-icons-outlined text-gray-400">format_quote</span>
</div>
<p class="text-xs text-gray-600 italic leading-relaxed">
"The competition is fierce but fair. Finally got my hands on a PS5 thanks to QuizQuest!"
</p>
</div>
</div>
</div>
<div class="group relative bg-white rounded-3xl overflow-hidden shadow-sm hover:shadow-xl transition-all duration-300 border border-gray-100 hover:border-primary/20">
<div class="relative h-64 overflow-hidden">
<img alt="Winner with Prize" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" src="https://lh3.googleusercontent.com/aida-public/AB6AXuD5UCPejmVcGOEoaT8gT2UzD7p7RwLqV2x8UethkVYZduWS4OdmIiBOKJLkaWAiAhChxbh7Ob8iV0XBOZINOqc-H6kxs7sZ-DiHef0CfOn06B8k30fugpzAG1STUW9njBpqijithil74MXoygd3Ob36nn6PyOaIv9iuCCIw60O99gO6dkCsSsMq0RszV9AQ37DwJGTGEf2ZUOgLVRY8zQoHqDgPCnEbZZ5ksSdHZfZ39pG2eoddK3J0XBE_9UCKBbWD1t6SyEYRHyM"/>
<div class="absolute top-4 left-4 bg-white/90 backdrop-blur text-xs font-bold px-3 py-1 rounded-full shadow-md flex items-center gap-1">
<span class="material-icons-outlined text-yellow-700 text-sm">emoji_events</span>
Daily Winner
</div>
</div>
<div class="p-6">
<div class="flex justify-between items-start mb-4">
<div>
<h3 class="font-bold text-lg text-gray-900">Elena Rodriguez</h3>
<p class="text-sm text-gray-500">Won in General Knowledge</p>
</div>
<div class="bg-primary/10 text-primary font-bold px-3 py-1 rounded-lg text-sm">
₹10,000
</div>
</div>
<div class="flex items-center gap-3 pt-4 border-t border-gray-100">
<div class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center">
<span class="material-icons-outlined text-gray-400">format_quote</span>
</div>
<p class="text-xs text-gray-600 italic leading-relaxed">
"A super fun way to spend 10 minutes a day. The community is supportive and the prizes are real."
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="py-20 bg-gray-50 overflow-hidden">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="font-display text-4xl font-bold mb-4 text-gray-900">
Stories from the <span class="text-primary">Arena</span>
</h2>
<p class="text-gray-600">Hear directly from players who cracked the code.</p>
</div>
<div class="relative">
<div class="absolute left-0 top-0 bottom-0 w-20 bg-gradient-to-r from-gray-50 to-transparent z-10 pointer-events-none"></div>
<div class="absolute right-0 top-0 bottom-0 w-20 bg-gradient-to-l from-gray-50 to-transparent z-10 pointer-events-none"></div>
<div class="flex overflow-x-auto gap-6 pb-8 snap-x no-scrollbar px-4">
<div class="min-w-[300px] md:min-w-[400px] snap-center">
<div class="relative rounded-2xl overflow-hidden aspect-video shadow-lg group cursor-pointer">
<img alt="Video Thumbnail" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDuOceY0UCGeuHUyH4BFq5Q_-6cpg0Dvy-ldAJBVDhzV-FfqCDW9TBq0F2oRkFH9BQ8yxnKUBTejfUimvDjf6hVLvDLoYu6rn9dmAN-LeQMYh1-RLtXtaF-GGbzvd6bjI_5VNz4gqax3-5NAz64bP7A1l1lB1uX44BHGpFj9HdCysA2w3a2VkgqfdJiivRu_5UHCL8UDP8insZi1-ooCSVUzDDEIv7LrKD0TrlVkWT-X_vrU_tud6Tu9qcbmRltRgHNU6gUaOp9-G4"/>
<div class="absolute inset-0 bg-black/30 group-hover:bg-black/40 transition-colors flex items-center justify-center">
<div class="w-16 h-16 bg-white/20 backdrop-blur-md rounded-full flex items-center justify-center border border-white/50 transition-transform group-hover:scale-110">
<span class="material-icons-outlined text-white text-4xl ml-1">play_arrow</span>
</div>
</div>
<div class="absolute bottom-0 left-0 w-full p-4 bg-gradient-to-t from-black/80 to-transparent">
<h4 class="text-white font-bold">How I won the Mega League</h4>
<p class="text-gray-300 text-xs">James T. • 2 mins ago</p>
</div>
</div>
</div>
<div class="min-w-[300px] md:min-w-[400px] snap-center">
<div class="relative rounded-2xl overflow-hidden aspect-video shadow-lg group cursor-pointer">
<img alt="Video Thumbnail" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDttGaW2BKD5rg9uZ0_Yj_G4yaxXVVr_9BdGxCuM7boNrjtnZFih8pjODcfG7DSjY8jDVBhAH2TZ9G75QJm-p0glOqH9G7KhVx6oW5BwyrrUFogAkirTv-aHi0264BYex_cbXJLPWICP8Y_695nQfQuoNTDimvofo-KWw3nopKmtw5cuEUogws98RWK7hunA6_FWuH1SjIO1QkEfBu1aBNhTCjzrcYqL8IP9akRIzq66k976WZh2i0_NO_hersafVthjPxfgUciNyc"/>
<div class="absolute inset-0 bg-black/30 group-hover:bg-black/40 transition-colors flex items-center justify-center">
<div class="w-16 h-16 bg-white/20 backdrop-blur-md rounded-full flex items-center justify-center border border-white/50 transition-transform group-hover:scale-110">
<span class="material-icons-outlined text-white text-4xl ml-1">play_arrow</span>
</div>
</div>
<div class="absolute bottom-0 left-0 w-full p-4 bg-gradient-to-t from-black/80 to-transparent">
<h4 class="text-white font-bold">Unboxing my new Drone!</h4>
<p class="text-gray-300 text-xs">Maria S. • 5 hours ago</p>
</div>
</div>
</div>
<div class="min-w-[300px] md:min-w-[400px] snap-center">
<div class="relative rounded-2xl overflow-hidden aspect-video shadow-lg group cursor-pointer">
<img alt="Video Thumbnail" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCD8BbX9g_CNqj2fWUF0vJtJ769OcE3SGHqynxt6Sh4eoZdjrnVrrxYtTy6pq1VZLJSf31P58HlaJEo_oDx7ZKwq3GrjSXC286RABZZPIps0arRl02Exnf7W1MQYDYqieroT7lkcObYJP7-OpfVeC4J6-YLGJcLqTBrz2VBN8uZ_mWuxw_beFHsjRyxyXyoN_ZhLYLSeebiGMY-r_4wsdLN661UeP375k83ID2EwbJRJ4J65mjze4yP3_mU-OtwwzpHVnRaFA-Lx_A"/>
<div class="absolute inset-0 bg-black/30 group-hover:bg-black/40 transition-colors flex items-center justify-center">
<div class="w-16 h-16 bg-white/20 backdrop-blur-md rounded-full flex items-center justify-center border border-white/50 transition-transform group-hover:scale-110">
<span class="material-icons-outlined text-white text-4xl ml-1">play_arrow</span>
</div>
</div>
<div class="absolute bottom-0 left-0 w-full p-4 bg-gradient-to-t from-black/80 to-transparent">
<h4 class="text-white font-bold">Strategy Guide: Speed Rounds</h4>
<p class="text-gray-300 text-xs">ProGamer_X • 1 day ago</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="py-20 bg-white">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="bg-primary/5 rounded-[2.5rem] p-8 md:p-12 text-center border border-primary/10">
<h2 class="font-display text-3xl font-bold text-gray-900 mb-8">Live Prize Feed</h2>
<div class="grid gap-4">
<div class="bg-white p-4 rounded-xl flex items-center justify-between shadow-sm border border-gray-100 animate-pulse">
<div class="flex items-center gap-4">
<div class="w-10 h-10 rounded-full bg-gradient-to-br from-yellow-400 to-orange-500 flex items-center justify-center text-white shadow-md">
<span class="material-icons-outlined text-sm">inventory_2</span>
</div>
<div class="text-left">
<p class="text-sm font-bold text-gray-900">Michael R.</p>
<p class="text-xs text-gray-500">Just claimed <span class="text-primary font-bold">Amazon Gift Card</span></p>
</div>
</div>
<span class="text-xs text-gray-400 font-medium">Just now</span>
</div>
<div class="bg-white p-4 rounded-xl flex items-center justify-between shadow-sm border border-gray-100 opacity-80">
<div class="flex items-center gap-4">
<div class="w-10 h-10 rounded-full bg-gradient-to-br from-green-400 to-emerald-600 flex items-center justify-center text-white shadow-md">
<span class="material-icons-outlined text-sm">attach_money</span>
</div>
<div class="text-left">
<p class="text-sm font-bold text-gray-900">Sophie L.</p>
<p class="text-xs text-gray-500">Withdrew <span class="text-primary font-bold">₹2,500</span></p>
</div>
</div>
<span class="text-xs text-gray-400 font-medium">2 mins ago</span>
</div>
<div class="bg-white p-4 rounded-xl flex items-center justify-between shadow-sm border border-gray-100 opacity-60">
<div class="flex items-center gap-4">
<div class="w-10 h-10 rounded-full bg-gradient-to-br from-blue-400 to-indigo-600 flex items-center justify-center text-white shadow-md">
<span class="material-icons-outlined text-sm">headphones</span>
</div>
<div class="text-left">
<p class="text-sm font-bold text-gray-900">Arjun K.</p>
<p class="text-xs text-gray-500">Won <span class="text-primary font-bold">Sony Headphones</span></p>
</div>
</div>
<span class="text-xs text-gray-400 font-medium">5 mins ago</span>
</div>
</div>
<div class="mt-8">
<a class="inline-flex items-center gap-2 text-primary font-bold hover:text-primary-hover transition-colors text-sm" href="#">
View Global Ledger <span class="material-icons-outlined text-sm">arrow_forward</span>
</a>
</div>
</div>
</div>
</section>
<section class="py-20 relative overflow-hidden">
<div class="absolute inset-0 bg-gray-900"></div>
<div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1550745165-9bc0b252726f?q=80&w=2670&auto=format&fit=crop')] bg-cover bg-center opacity-10 mix-blend-overlay"></div>
<div class="relative z-10 max-w-4xl mx-auto px-4 text-center">
<h2 class="font-display text-4xl sm:text-5xl font-bold text-white mb-6">
Your Name Belongs on the Board
</h2>
<p class="text-gray-300 text-lg mb-10 max-w-xl mx-auto">
The next league starts in 15 minutes. Don't watch from the sidelines.
</p>
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
<a class="w-full sm:w-auto bg-primary hover:bg-primary-hover text-white px-8 py-4 rounded-full text-lg font-bold shadow-lg shadow-primary/40 transition-all hover:scale-105 flex items-center justify-center gap-2" href="#">
<span class="material-icons-outlined">sports_esports</span>
Start Playing Now
</a>
<a class="w-full sm:w-auto bg-white/10 hover:bg-white/20 text-white px-8 py-4 rounded-full text-lg font-bold backdrop-blur-sm transition-all flex items-center justify-center gap-2 border border-white/10" href="#">
View Prizes
</a>
</div>
</div>
</section>
<footer class="bg-white border-t border-gray-200 py-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-col md:flex-row items-center justify-between gap-6">
<div class="flex items-center gap-2 text-gray-900">
<div class="w-8 h-8 bg-primary rounded-lg flex items-center justify-center text-white">
<span class="material-icons-outlined text-lg">emoji_events</span>
</div>
<span class="font-display font-bold text-lg tracking-tight">QuizQuest</span>
</div>
<div class="flex items-center gap-8 text-sm text-gray-500">
<a class="hover:text-primary transition-colors" href="#">Privacy Policy</a>
<a class="hover:text-primary transition-colors" href="#">Terms of Service</a>
<a class="hover:text-primary transition-colors" href="#">Help Center</a>
</div>
<div class="flex items-center gap-4">
<a class="text-gray-400 hover:text-primary transition-colors" href="#"><i class="material-icons-outlined">facebook</i></a>
<a class="text-gray-400 hover:text-primary transition-colors" href="#"><i class="material-icons-outlined">smart_display</i></a>
</div>
</div>
<div class="mt-8 text-center text-xs text-gray-400">
© 2023 QuizQuest. All rights reserved. Not affiliated with any brands mentioned.
</div>
</div>
</footer>
</body></html>