<!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 - Level Up Your Knowledge</title>
<link href="https://fonts.googleapis.com/css2?family=Spline+Sans:wght@300;400;500;600;700&family=Noto+Sans:wght@400;500;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"/>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"primary": "#7f13ec",
"primary-dark": "#5e0eb3",
"secondary": "#ec137f",
"background-light": "#ffffff",
"background-off": "#f9f7fc",
"text-main": "#1a1122",
"text-muted": "#6b5e7c",
},
fontFamily: {
"display": ["Spline Sans", "sans-serif"],
"body": ["Noto Sans", "sans-serif"],
},
borderRadius: {"DEFAULT": "1rem", "lg": "1.5rem", "xl": "2.5rem", "full": "9999px"},
boxShadow: {
"soft": "0 10px 40px -10px rgba(127, 19, 236, 0.15)",
"card": "0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03)",
}
},
},
}
</script>
<style>
/* Custom scrollbar for horizontal scrolling areas */
.hide-scroll::-webkit-scrollbar {
display: none;
}
.hide-scroll {
-ms-overflow-style: none;
scrollbar-width: none;
}
</style>
</head>
<body class="bg-background-light text-text-main font-display antialiased overflow-x-hidden selection:bg-primary/20 selection:text-primary">
<!-- Navbar -->
<nav class="sticky top-4 z-50 px-4 w-full">
<div class="mx-auto max-w-7xl">
<div class="relative flex items-center justify-between gap-4 rounded-full bg-white/80 backdrop-blur-md border border-primary/10 px-6 py-3 shadow-soft">
<a class="flex items-center gap-2 group" href="#">
<div class="flex size-10 items-center justify-center rounded-full bg-primary text-white transition-transform group-hover:rotate-12">
<span class="material-symbols-outlined text-[24px]">psychology</span>
</div>
<span class="text-xl font-bold tracking-tight text-text-main">QuizQuest</span>
</a>
<div class="hidden md:flex items-center gap-8">
<a class="text-sm font-semibold text-text-muted hover:text-primary transition-colors" href="#">Browse</a>
<a class="text-sm font-semibold text-text-muted hover:text-primary transition-colors" href="#">Leaderboard</a>
<a class="text-sm font-semibold text-text-muted hover:text-primary transition-colors" href="#">Pricing</a>
</div>
<div class="flex items-center gap-4">
<button class="hidden sm:block text-sm font-bold text-primary hover:text-primary-dark transition-colors">Log In</button>
<button class="flex h-10 items-center justify-center rounded-full bg-primary px-6 text-sm font-bold text-white shadow-lg shadow-primary/30 transition-all hover:bg-primary-dark hover:scale-105 active:scale-95">
Sign Up
</button>
<button class="md:hidden p-2 text-text-main">
<span class="material-symbols-outlined">menu</span>
</button>
</div>
</div>
</div>
</nav>
<!-- Hero Section -->
<section class="relative pt-12 pb-20 lg:pt-24 lg:pb-32 px-4 overflow-hidden">
<!-- Background Elements -->
<div class="absolute top-0 right-0 -z-10 h-[600px] w-[600px] translate-x-1/3 -translate-y-1/4 rounded-full bg-primary/5 blur-3xl"></div>
<div class="absolute bottom-0 left-0 -z-10 h-[400px] w-[400px] -translate-x-1/3 translate-y-1/4 rounded-full bg-secondary/5 blur-3xl"></div>
<div class="mx-auto max-w-7xl grid lg:grid-cols-2 gap-12 items-center">
<div class="flex flex-col items-start gap-6 max-w-2xl">
<div class="inline-flex items-center gap-2 rounded-full bg-primary/10 px-4 py-1.5 text-xs font-bold uppercase tracking-wider text-primary">
<span class="material-symbols-outlined text-sm">celebration</span>
<span>New Season Live</span>
</div>
<h1 class="text-5xl lg:text-7xl font-bold leading-[1.1] tracking-tight text-text-main">
Level Up Your <span class="text-transparent bg-clip-text bg-gradient-to-r from-primary to-secondary">Knowledge</span>
</h1>
<p class="text-lg text-text-muted leading-relaxed max-w-lg">
Join millions of players in the ultimate trivia showdown. Compete in real-time, learn fascinating facts, and win exclusive rewards.
</p>
<div class="flex flex-wrap gap-4 pt-2">
<button class="flex h-12 md:h-14 min-w-[160px] items-center justify-center gap-2 rounded-full bg-primary px-8 text-base font-bold text-white shadow-xl shadow-primary/25 transition-all hover:bg-primary-dark hover:-translate-y-1">
<span class="material-symbols-outlined">play_circle</span>
Start Playing Now
</button>
<button class="flex h-12 md:h-14 min-w-[160px] items-center justify-center gap-2 rounded-full bg-white border border-gray-200 px-8 text-base font-bold text-text-main shadow-sm transition-all hover:bg-gray-50 hover:border-gray-300">
View Demo
</button>
</div>
<div class="flex items-center gap-4 mt-4 text-sm text-text-muted">
<div class="flex -space-x-3">
<img class="size-8 rounded-full border-2 border-white object-cover" data-alt="User avatar 1" src="https://lh3.googleusercontent.com/aida-public/AB6AXuA3T_VVL4S5ClyJwyFkNg4jNMM3btK_sET6XB9u8OqAwo9x9l3iewmz0lToRjVO-ozy8wavo9cg43rESdKR59Tn_WkP6S6R3DWC9gAAsgy1lRqVKC5yKtVR8shLt2_vlp54pAWqkJa63yaAKcc7t90lqHJDviD500DYA9msWED1IqNTEa-mA66dJ10PRTD97_7b634MDXVS-9YkyUuVoenyQFmEyEgBq-dYZSDqWoplUOlDAvSDFD1REKSY4PMVZz9_9yLWfhtD"/>
<img class="size-8 rounded-full border-2 border-white object-cover" data-alt="User avatar 2" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDPo9BGGAd4a9XrkiuZoZ6RV0p9RRRNX5bhtCbs01ytHulFWRPquNUDeS3moF1SfvTIp5HCv9F4RQP45Y-9DyLb1uyF-88zBDRJWZwU1l_DhcYra_BtF_HIAJpiIEWoe-nMb7zxYz2YVdNKneEjBhEzFPlllL-fpK5XzsdJ3T1NA4hMPDOWvLToZe8Yk8VwkK8OVnDeuXds-xLSLQGOH0SX5AlGJXUtW3IrxJ2dNgkFb6DVF_PMog0JRwER1D2E18i9gFM7HamW"/>
<img class="size-8 rounded-full border-2 border-white object-cover" data-alt="User avatar 3" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDSPCjSNDm4YGlG_g3V1BnQLIH1qX_7NzPd2976G6-30B_UBmbiSFRSRZplNewcCZaKBEDabZWiUxoPzsuGbR0hT6aec0m5Kb9rL9KQ97_aBFHOV9xIDq6UQkIuA3XRwFHhKo2w4CpexmWX3Z2WHvOAyqirErQY3OV3iAB4oXeVE4fLv8AJivbLY9AvEu2RQnOkZ_oUtp3EpqcfdE4foEz47SSQtvoJC6gomzqlAXVjU26vz1dcgDrLTlPD5eNhQNJx_sbnBf7t"/>
<div class="flex size-8 items-center justify-center rounded-full border-2 border-white bg-gray-100 text-[10px] font-bold">+2k</div>
</div>
<p>Players joined today</p>
</div>
</div>
<div class="relative flex justify-center lg:justify-end">
<div class="relative z-10 w-full max-w-[500px] aspect-square rounded-[3rem] bg-gradient-to-br from-primary/10 to-secondary/10 p-8 flex items-center justify-center backdrop-blur-sm border border-white/50">
<!-- Abstract representation of the 3D illustration -->
<img class="w-full h-full object-cover rounded-[2rem] shadow-2xl rotate-3 transition-transform hover:rotate-0 duration-500" data-alt="Abstract colorful 3D shapes representing a playful quiz environment" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCNxBvzfiHT14dfx3drXRfx2YFsRCKiUqEVRVV-BKHceAOyBMbqbMFm2nNRuM-LXXLKRY0ArAt8wPaenYQM30_rSHJ4CWdlnRAy5o5tGbX4rjMuN1Y3arB_l9CF6umCLDY_iKG3NZjCCn8_VzWLVzYfmX7wMFScuApaT3JP75vtrL0-eec1rcKQvm1D15Y4KXCRscz9s6AIfUTVCIq4gUfPd2D9XlCGAswivOY3jmHmET9W8DVKGTOQbJ2qk-sOlCoBooN55nTt"/>
<!-- Floating Badge -->
<div class="absolute -bottom-6 -left-6 flex items-center gap-3 rounded-2xl bg-white p-4 shadow-xl border border-gray-100 animate-bounce" style="animation-duration: 3s;">
<div class="flex size-10 items-center justify-center rounded-full bg-green-100 text-green-600">
<span class="material-symbols-outlined">check</span>
</div>
<div>
<p class="text-xs font-semibold text-gray-500">Current Streak</p>
<p class="text-lg font-bold text-text-main">12 Days 🔥</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- How It Works -->
<section class="py-20 bg-background-off">
<div class="mx-auto max-w-7xl px-4">
<div class="flex flex-col md:flex-row justify-between items-end gap-6 mb-12">
<div class="max-w-xl">
<h2 class="text-3xl md:text-4xl font-bold text-text-main mb-4">Three Simple Steps to Glory</h2>
<p class="text-text-muted text-lg">Getting started is easy. Pick your challenge, beat the clock, and climb the global ranks.</p>
</div>
<a class="hidden md:flex items-center gap-2 font-bold text-primary hover:text-primary-dark" href="#">
Learn more <span class="material-symbols-outlined text-sm">arrow_forward</span>
</a>
</div>
<div class="grid md:grid-cols-3 gap-8">
<!-- Step 1 -->
<div class="group relative rounded-xl bg-white p-8 shadow-card hover:shadow-soft transition-all duration-300 hover:-translate-y-2">
<div class="mb-6 inline-flex size-14 items-center justify-center rounded-2xl bg-blue-50 text-blue-600 group-hover:bg-blue-600 group-hover:text-white transition-colors">
<span class="material-symbols-outlined text-3xl">category</span>
</div>
<h3 class="text-xl font-bold text-text-main mb-3">1. Pick a Category</h3>
<p class="text-text-muted leading-relaxed">Choose from over 50+ topics ranging from Science and History to Pop Culture.</p>
</div>
<!-- Step 2 -->
<div class="group relative rounded-xl bg-white p-8 shadow-card hover:shadow-soft transition-all duration-300 hover:-translate-y-2">
<div class="mb-6 inline-flex size-14 items-center justify-center rounded-2xl bg-secondary/10 text-secondary group-hover:bg-secondary group-hover:text-white transition-colors">
<span class="material-symbols-outlined text-3xl">timer</span>
</div>
<h3 class="text-xl font-bold text-text-main mb-3">2. Race the Clock</h3>
<p class="text-text-muted leading-relaxed">Answer quickly to earn bonus points. Speed and accuracy are your best friends.</p>
</div>
<!-- Step 3 -->
<div class="group relative rounded-xl bg-white p-8 shadow-card hover:shadow-soft transition-all duration-300 hover:-translate-y-2">
<div class="mb-6 inline-flex size-14 items-center justify-center rounded-2xl bg-primary/10 text-primary group-hover:bg-primary group-hover:text-white transition-colors">
<span class="material-symbols-outlined text-3xl">trophy</span>
</div>
<h3 class="text-xl font-bold text-text-main mb-3">3. Climb the Ranks</h3>
<p class="text-text-muted leading-relaxed">Earn badges, unlock achievements, and see your name on the global leaderboard.</p>
</div>
</div>
</div>
</section>
<!-- Trending Quizzes -->
<section class="py-20 px-4 bg-background-light">
<div class="mx-auto max-w-7xl">
<div class="flex items-center justify-between mb-10">
<h2 class="text-3xl font-bold text-text-main">Trending Quizzes</h2>
<div class="flex gap-2">
<button class="flex size-10 items-center justify-center rounded-full border border-gray-200 text-text-muted hover:border-primary hover:text-primary transition-colors">
<span class="material-symbols-outlined">arrow_back</span>
</button>
<button class="flex size-10 items-center justify-center rounded-full border border-gray-200 text-text-muted hover:border-primary hover:text-primary transition-colors">
<span class="material-symbols-outlined">arrow_forward</span>
</button>
</div>
</div>
<div class="flex gap-6 overflow-x-auto hide-scroll pb-8 -mx-4 px-4 snap-x">
<!-- Card 1 -->
<div class="min-w-[280px] md:min-w-[320px] rounded-2xl bg-white border border-gray-100 shadow-card hover:shadow-xl transition-all duration-300 group snap-center cursor-pointer">
<div class="relative h-48 w-full overflow-hidden rounded-t-2xl">
<img class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110" data-alt="Gaming controller and console setup" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDa8TkA-jHE1541RUvxlONDgMxQu6E8NqmnmAbjrqnKaEL3EjHeN7_ZD2JBDb5x1NwMXHtfFW70CyYLY4Z-P2_-XZ9Ak62duA3XuG1spK13Vv8Dk4uUAZrN965wFBSiqMp2SfWHwN7CDiUeK-Ci1wbcSqqUu5s0CDBJ8QKHZLPkbXFdmod-VDVTG0Y1Deo_SeiRhxNgPGbAFxeiqPbzyX7dDFhUJmXyDcdlEkMEx6HO6L5wjuUy0yBdMLsCXrIo3quDGjxBuJZt"/>
<div class="absolute top-3 left-3 rounded-full bg-white/90 backdrop-blur px-3 py-1 text-xs font-bold text-purple-700">
Gaming
</div>
</div>
<div class="p-5">
<h3 class="text-lg font-bold text-text-main mb-2">Video Game Legends</h3>
<p class="text-sm text-text-muted mb-4 line-clamp-2">Test your knowledge on classic RPGs, FPS shooters, and console history.</p>
<div class="flex items-center justify-between">
<span class="text-xs font-semibold text-gray-400 flex items-center gap-1">
<span class="material-symbols-outlined text-sm">person</span> 12k Plays
</span>
<button class="rounded-full bg-primary/10 px-4 py-2 text-sm font-bold text-primary group-hover:bg-primary group-hover:text-white transition-colors">Play Now</button>
</div>
</div>
</div>
<!-- Card 2 -->
<div class="min-w-[280px] md:min-w-[320px] rounded-2xl bg-white border border-gray-100 shadow-card hover:shadow-xl transition-all duration-300 group snap-center cursor-pointer">
<div class="relative h-48 w-full overflow-hidden rounded-t-2xl">
<img class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110" data-alt="Scientific formulas on a chalkboard" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCq3RMVcHtJF6eGoWyI2Hklrefexav6UFQxe7CCEJayCc1NlUCX3D6U9R7iRHN7VAl65UU10ei8TSuuq7TN2GC0-fGQ21LzJzdGLfv08yqsQ42txtzzsbNXBJj5GksFLdfpLRmu7br0-z_rvc4heW4vZVQXNvggkzS1qPG35PvicD1CfggnVm4zjmZ9smXNy8GXctlE4ehZzCuMCT_E5-0D_I5WI_trtxAmFyZ8hHo-Ivb-zMfxmBMXIM0aZTmOE0H7rejq0xJT"/>
<div class="absolute top-3 left-3 rounded-full bg-white/90 backdrop-blur px-3 py-1 text-xs font-bold text-blue-600">
Science
</div>
</div>
<div class="p-5">
<h3 class="text-lg font-bold text-text-main mb-2">Physics 101</h3>
<p class="text-sm text-text-muted mb-4 line-clamp-2">From Newton to Einstein, how well do you know the laws of the universe?</p>
<div class="flex items-center justify-between">
<span class="text-xs font-semibold text-gray-400 flex items-center gap-1">
<span class="material-symbols-outlined text-sm">person</span> 8.5k Plays
</span>
<button class="rounded-full bg-primary/10 px-4 py-2 text-sm font-bold text-primary group-hover:bg-primary group-hover:text-white transition-colors">Play Now</button>
</div>
</div>
</div>
<!-- Card 3 -->
<div class="min-w-[280px] md:min-w-[320px] rounded-2xl bg-white border border-gray-100 shadow-card hover:shadow-xl transition-all duration-300 group snap-center cursor-pointer">
<div class="relative h-48 w-full overflow-hidden rounded-t-2xl">
<img class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110" data-alt="Old world map and compass" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCPiRBzTmGSJurGz55DGuneC-9SjB7EZX5tWMfb4A0sCh2MWRXegtXsEKC2OkrGcquelnAjxOaZN2CI07goXdQGrLZ4dh983jRkBSfvbC2x8Uomd44FnBbjb79c0g_UdWOEs-VVHeLYdzahk5qkROe0uWRG_Ctvh2CWgrqwsqWfk1qSh8dRmuT7vuEeS7MmsK95PpiKE3qrt_sYTdQwHWQDG5cm3RBObMBYRfXzObG9SYqXfYubEZ_ms_GzI1pRIdTBXN6tOrIo"/>
<div class="absolute top-3 left-3 rounded-full bg-white/90 backdrop-blur px-3 py-1 text-xs font-bold text-orange-600">
History
</div>
</div>
<div class="p-5">
<h3 class="text-lg font-bold text-text-main mb-2">Ancient Civilizations</h3>
<p class="text-sm text-text-muted mb-4 line-clamp-2">Explore the mysteries of Egypt, Rome, and the Mayans in this epic quiz.</p>
<div class="flex items-center justify-between">
<span class="text-xs font-semibold text-gray-400 flex items-center gap-1">
<span class="material-symbols-outlined text-sm">person</span> 15k Plays
</span>
<button class="rounded-full bg-primary/10 px-4 py-2 text-sm font-bold text-primary group-hover:bg-primary group-hover:text-white transition-colors">Play Now</button>
</div>
</div>
</div>
<!-- Card 4 -->
<div class="min-w-[280px] md:min-w-[320px] rounded-2xl bg-white border border-gray-100 shadow-card hover:shadow-xl transition-all duration-300 group snap-center cursor-pointer">
<div class="relative h-48 w-full overflow-hidden rounded-t-2xl">
<img class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110" data-alt="Cinema reel and popcorn" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAwMggI1pBe4sz74w1KJzUkklCDqhBUNS1u0woTbVq3VlLusRUCNnrsA6_e__YIxidLrFCU0HTusz3LH_hOyc8kKAbZQFZb70R-9UcB3dngktnAQxzPup38MZzJSy4YwWL2VGbfEDXCTCFJUO5zxi-t4mRah-nt-w4Zj0J5nQ3NIh7gN35NoKBDDCqrUXF6_SZ09xp6b5GvaQO2gkJh33zG33lXw0pW7v1Vd857ptnAvy4vWrsDFT2B4s26KsXVmUmkMIGj39Bb"/>
<div class="absolute top-3 left-3 rounded-full bg-white/90 backdrop-blur px-3 py-1 text-xs font-bold text-pink-600">
Movies
</div>
</div>
<div class="p-5">
<h3 class="text-lg font-bold text-text-main mb-2">Oscar Winners</h3>
<p class="text-sm text-text-muted mb-4 line-clamp-2">Can you name the Best Picture winners from the last two decades?</p>
<div class="flex items-center justify-between">
<span class="text-xs font-semibold text-gray-400 flex items-center gap-1">
<span class="material-symbols-outlined text-sm">person</span> 22k Plays
</span>
<button class="rounded-full bg-primary/10 px-4 py-2 text-sm font-bold text-primary group-hover:bg-primary group-hover:text-white transition-colors">Play Now</button>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Leaderboard Section -->
<section class="py-20 bg-background-off relative overflow-hidden">
<div class="absolute top-0 left-0 w-full h-full bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-primary/5 via-transparent to-transparent"></div>
<div class="mx-auto max-w-5xl px-4 relative z-10">
<div class="text-center mb-12">
<h2 class="text-3xl md:text-4xl font-bold text-text-main mb-3">Top Players this Week</h2>
<p class="text-text-muted">Compete against the best and earn your spot in the Hall of Fame.</p>
</div>
<div class="flex flex-col md:flex-row items-end justify-center gap-4 mb-12 md:mb-16">
<!-- 2nd Place -->
<div class="order-2 md:order-1 flex flex-col items-center w-full md:w-1/3">
<div class="relative mb-4">
<img class="size-20 md:size-24 rounded-full border-4 border-gray-300 object-cover shadow-lg" data-alt="Avatar of second place player" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDcYExuX5HjlB4Jp7AagfY_w4HiaJuvYkaZDbVnnqB8gtGX2BDMIY11l7SRRn9eGYQ8aHwFCmzxanxVq4r8cyRKcrbRWL_aU7RXvoVvwH78QtxRC5-mId28q6W4Ryv8-iM--yvQRKsfzAICmwqLM69mdc7mpE4o47d8Bvk1VkHR5LnSWg3oVn-zbCdD8QU7uZWf7mGViSQd31EzJ0pqETOtFw1-7iM8FjRu1Bh5lcXPqLPkWBFzZLOLgfTcYQjgM9GiZOHpr3hB"/>
<div class="absolute -bottom-3 left-1/2 -translate-x-1/2 rounded-full bg-gray-300 px-3 py-1 text-xs font-bold text-gray-800 shadow-sm">
#2
</div>
</div>
<div class="w-full rounded-t-2xl bg-white p-6 text-center shadow-sm h-[180px] flex flex-col justify-end border-t-4 border-gray-300">
<h4 class="font-bold text-lg text-text-main">AlexT</h4>
<p class="text-primary font-bold text-xl">9,850 XP</p>
</div>
</div>
<!-- 1st Place -->
<div class="order-1 md:order-2 flex flex-col items-center w-full md:w-1/3 z-10 -mb-4 md:mb-0">
<div class="relative mb-4">
<div class="absolute -top-8 left-1/2 -translate-x-1/2 text-yellow-400">
<span class="material-symbols-outlined text-4xl">emoji_events</span>
</div>
<img class="size-24 md:size-32 rounded-full border-4 border-yellow-400 object-cover shadow-xl ring-4 ring-yellow-400/20" data-alt="Avatar of first place player" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBrAqkKuZ7XBIdvZdYiGHHN7Crr4o5UV6qGcRMqk5TF28SSxj-TfnPV92RjglsIlJDKIfN6uubfRVOHDt33-T3cep-F04nT4U3VSaUNEJpljqtAXJ5e2YF-8Qj3vLQIQvxjWu5CxS7sPWtkrg_4rvMGM3EJ2r3rxFtthsu3ZGlA8sxnZW_EZFfK3u0MagiHOPBXXIEST38VNzfOTvWeJvDDg7yTRnAOxYWtuRCa9zAVKjYnpF_LynyvQSlfH-UB2G_QIaUyRBTQ"/>
<div class="absolute -bottom-3 left-1/2 -translate-x-1/2 rounded-full bg-yellow-400 px-3 py-1 text-sm font-bold text-yellow-900 shadow-sm">
#1
</div>
</div>
<div class="w-full rounded-t-2xl bg-white p-8 text-center shadow-lg h-[220px] flex flex-col justify-end border-t-4 border-yellow-400 relative">
<div class="absolute top-0 left-0 w-full h-full bg-gradient-to-b from-yellow-50/50 to-transparent pointer-events-none"></div>
<h4 class="font-bold text-xl text-text-main">SarahW</h4>
<p class="text-primary font-bold text-2xl">12,400 XP</p>
</div>
</div>
<!-- 3rd Place -->
<div class="order-3 flex flex-col items-center w-full md:w-1/3">
<div class="relative mb-4">
<img class="size-20 md:size-24 rounded-full border-4 border-orange-300 object-cover shadow-lg" data-alt="Avatar of third place player" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBZ6d1UL8Fy9h2O42nZnTpmjTDwl4DJEEaLkIfoXj09OMCLBEvztqux07NooCqxtDrjlrD3QBoCWX37GdYqNNkcM4k-3hDcHrWRbrW9S8_R7i9uyFqjIpisoIa3CpyOg4QsTATs2nqkay_rIG7mu8Nwt5xK8T7AYziXYH2ZsGaHAOD0nINY6N2XnmoYTUHpLCSsW1MFArcHwr4gCbWinVRx4infJB4izef8it3oMT4dk475VYMgkphuxnsZaMZESC-QzASe6jWn"/>
<div class="absolute -bottom-3 left-1/2 -translate-x-1/2 rounded-full bg-orange-300 px-3 py-1 text-xs font-bold text-orange-900 shadow-sm">
#3
</div>
</div>
<div class="w-full rounded-t-2xl bg-white p-6 text-center shadow-sm h-[160px] flex flex-col justify-end border-t-4 border-orange-300">
<h4 class="font-bold text-lg text-text-main">MikeR</h4>
<p class="text-primary font-bold text-xl">8,920 XP</p>
</div>
</div>
</div>
<div class="flex justify-center">
<button class="flex items-center gap-2 rounded-full bg-white border border-gray-200 px-8 py-3 text-sm font-bold text-text-main shadow-sm hover:bg-gray-50 hover:border-gray-300 transition-all">
View Full Leaderboard
</button>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-white pt-20 pb-10 border-t border-gray-100">
<div class="mx-auto max-w-7xl px-4">
<div class="grid md:grid-cols-4 gap-12 mb-16">
<div class="col-span-1 md:col-span-1">
<a class="flex items-center gap-2 mb-6" href="#">
<div class="flex size-8 items-center justify-center rounded-full bg-primary text-white">
<span class="material-symbols-outlined text-[18px]">psychology</span>
</div>
<span class="text-lg font-bold text-text-main">QuizQuest</span>
</a>
<p class="text-text-muted text-sm mb-6">The ultimate destination for trivia lovers. Learn, compete, and have fun.</p>
<div class="flex gap-4">
<a class="text-gray-400 hover:text-primary transition-colors" href="#"><i class="material-symbols-outlined">public</i></a>
<a class="text-gray-400 hover:text-primary transition-colors" href="#"><i class="material-symbols-outlined">mail</i></a>
<a class="text-gray-400 hover:text-primary transition-colors" href="#"><i class="material-symbols-outlined">smartphone</i></a>
</div>
</div>
<div>
<h4 class="font-bold text-text-main mb-6">Discover</h4>
<ul class="space-y-4 text-sm text-text-muted">
<li><a class="hover:text-primary transition-colors" href="#">Featured Quizzes</a></li>
<li><a class="hover:text-primary transition-colors" href="#">New Arrivals</a></li>
<li><a class="hover:text-primary transition-colors" href="#">Categories</a></li>
<li><a class="hover:text-primary transition-colors" href="#">Live Events</a></li>
</ul>
</div>
<div>
<h4 class="font-bold text-text-main mb-6">Community</h4>
<ul class="space-y-4 text-sm text-text-muted">
<li><a class="hover:text-primary transition-colors" href="#">Leaderboard</a></li>
<li><a class="hover:text-primary transition-colors" href="#">Achievements</a></li>
<li><a class="hover:text-primary transition-colors" href="#">Forum</a></li>
<li><a class="hover:text-primary transition-colors" href="#">Help Center</a></li>
</ul>
</div>
<div>
<h4 class="font-bold text-text-main mb-6">Stay Updated</h4>
<p class="text-xs text-text-muted mb-4">Subscribe to our newsletter for new challenges.</p>
<div class="flex gap-2">
<input class="w-full rounded-full border-gray-200 bg-gray-50 px-4 py-2 text-sm focus:border-primary focus:ring-primary" placeholder="Email address" type="email"/>
<button class="rounded-full bg-primary px-4 py-2 text-white hover:bg-primary-dark transition-colors">
<span class="material-symbols-outlined text-sm">arrow_forward</span>
</button>
</div>
</div>
</div>
<div class="border-t border-gray-100 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
<p class="text-xs text-text-muted">© 2023 QuizQuest Inc. All rights reserved.</p>
<div class="flex gap-6 text-xs text-text-muted">
<a class="hover:text-primary" href="#">Privacy Policy</a>
<a class="hover:text-primary" href="#">Terms of Service</a>
<a class="hover:text-primary" href="#">Cookie Settings</a>
</div>
</div>
</div>
</footer>
</body></html>