<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>QuizQuest - Blog & Updates</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<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"/>
<script>
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
primary: "#7f13ec",
"primary-light": "#efe6fd",
"primary-dark": "#5e0eb0",
"background-light": "#ffffff",
"background-subtle": "#f8f9fa",
"background-dark": "#191022",
"text-main": "#1e293b",
"text-muted": "#64748b",
},
fontFamily: {
display: ["Spline Sans", "sans-serif"],
body: ["Spline Sans", "sans-serif"],
},
borderRadius: {
"DEFAULT": "0.5rem",
"lg": "0.75rem",
"xl": "1rem",
"full": "9999px"
},
boxShadow: {
'soft': '0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -1px rgba(0, 0, 0, 0.02)',
'hover': '0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.01)',
}
},
},
}
</script>
<style>
body {
font-family: 'Spline Sans', sans-serif;
}
</style>
</head>
<body class="bg-background-light text-text-main antialiased selection:bg-primary selection:text-white">
<!-- Navigation -->
<header class="sticky top-0 z-50 w-full border-b border-slate-100 bg-white/80 backdrop-blur-md">
<div class="mx-auto flex h-16 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8">
<div class="flex items-center gap-2">
<div class="flex h-8 w-8 items-center justify-center rounded-lg bg-primary text-white">
<span class="material-symbols-outlined text-[20px]">bolt</span>
</div>
<span class="text-xl font-bold tracking-tight text-slate-900">QuizQuest</span>
</div>
<nav class="hidden md:flex items-center gap-8">
<a class="text-sm font-medium text-slate-600 hover:text-primary transition-colors" href="#">Home</a>
<a class="text-sm font-medium text-slate-600 hover:text-primary transition-colors" href="#">Play</a>
<a class="text-sm font-medium text-primary" href="#">Blog</a>
<a class="text-sm font-medium text-slate-600 hover:text-primary transition-colors" href="#">Leaderboard</a>
</nav>
<div class="flex items-center gap-3">
<button class="hidden sm:inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50 transition-colors">
Log in
</button>
<button class="inline-flex items-center justify-center rounded-lg bg-primary px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-primary-dark transition-colors hover:shadow-md">
Sign up
</button>
</div>
</div>
</header>
<main>
<!-- Hero Section -->
<section class="relative overflow-hidden bg-background-subtle py-12 lg:py-20">
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div class="mb-8 flex items-center gap-2 text-primary font-medium">
<span class="material-symbols-outlined text-sm">auto_awesome</span>
<span class="text-sm uppercase tracking-wide">Featured Update</span>
</div>
<div class="grid gap-12 lg:grid-cols-2 lg:gap-8 items-center">
<div class="flex flex-col gap-6">
<h1 class="text-4xl font-extrabold tracking-tight text-slate-900 sm:text-5xl lg:text-6xl">
Introducing Battle Royale: Compete Live!
</h1>
<p class="text-lg text-slate-600 leading-relaxed max-w-xl">
Compete against 99 other players in real-time. Only one quiz master will survive. Read more about the new game mechanics, exciting rewards, and how to qualify for the global tournament.
</p>
<div class="flex flex-wrap gap-4 pt-2">
<button class="inline-flex items-center gap-2 rounded-lg bg-primary px-6 py-3 text-base font-semibold text-white shadow-lg shadow-primary/20 transition-all hover:-translate-y-0.5 hover:shadow-xl hover:shadow-primary/30">
Read Featured Article
<span class="material-symbols-outlined text-sm">arrow_forward</span>
</button>
<button class="inline-flex items-center gap-2 rounded-lg bg-white border border-slate-200 px-6 py-3 text-base font-medium text-slate-700 hover:bg-slate-50 transition-colors">
View Leaderboard
</button>
</div>
</div>
<div class="relative aspect-[4/3] w-full overflow-hidden rounded-2xl bg-slate-100 shadow-2xl ring-1 ring-slate-900/5 lg:aspect-auto lg:h-[480px]">
<div class="absolute inset-0 bg-gradient-to-tr from-primary/10 to-transparent z-10"></div>
<img alt="Abstract geometric purple and blue 3d shapes representing digital competition" class="h-full w-full object-cover transition-transform duration-700 hover:scale-105" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAB9rurXLMrLOI7iYqBHI9Ed7LYF_EsgMPZQtnY--2NFLpUi8mKqbUBFGtGwM-liC0yoVJpe3BVmxazB1rnY2URqWkSRsVeairlF2DAFmJp5XsI6OJc3DMwyrnnDjXfA4wHaRM62yYfibE-fvpZacNa1tzuEijph56pCxKvJtnJdW2zcBqCx79wHlH3SUSDvuKv3WmN2SokjN2uvuc3jgxKFnY2rvNWRWTvzt5oYjjY83QYqVe825_4tbYAWe7SJs0PpBafoJJ7"/>
</div>
</div>
</div>
</section>
<!-- Category Filter -->
<section class="sticky top-16 z-40 border-b border-slate-100 bg-white/90 backdrop-blur-sm">
<div class="mx-auto max-w-7xl px-4 py-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between gap-4 overflow-x-auto pb-2 sm:pb-0 scrollbar-hide">
<div class="flex gap-2">
<button class="group inline-flex items-center gap-2 rounded-full bg-slate-900 px-4 py-2 text-sm font-medium text-white shadow-sm ring-1 ring-slate-900/5 transition-all">
All Posts
</button>
<button class="group inline-flex items-center gap-2 rounded-full bg-white px-4 py-2 text-sm font-medium text-slate-600 shadow-sm ring-1 ring-slate-200 hover:bg-slate-50 hover:text-primary transition-all">
<span class="material-symbols-outlined text-[18px]">campaign</span>
Announcements
</button>
<button class="group inline-flex items-center gap-2 rounded-full bg-white px-4 py-2 text-sm font-medium text-slate-600 shadow-sm ring-1 ring-slate-200 hover:bg-slate-50 hover:text-primary transition-all">
<span class="material-symbols-outlined text-[18px]">lightbulb</span>
Tips & Tricks
</button>
<button class="group inline-flex items-center gap-2 rounded-full bg-white px-4 py-2 text-sm font-medium text-slate-600 shadow-sm ring-1 ring-slate-200 hover:bg-slate-50 hover:text-primary transition-all">
<span class="material-symbols-outlined text-[18px]">trophy</span>
Winners
</button>
<button class="group inline-flex items-center gap-2 rounded-full bg-white px-4 py-2 text-sm font-medium text-slate-600 shadow-sm ring-1 ring-slate-200 hover:bg-slate-50 hover:text-primary transition-all">
<span class="material-symbols-outlined text-[18px]">groups</span>
Community
</button>
</div>
<div class="hidden sm:flex items-center border-l border-slate-200 pl-4">
<div class="relative">
<span class="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400">
<span class="material-symbols-outlined text-[18px]">search</span>
</span>
<input class="h-9 w-48 rounded-full border-0 bg-slate-100 pl-9 pr-4 text-sm text-slate-900 placeholder:text-slate-500 focus:ring-2 focus:ring-primary focus:bg-white transition-all" placeholder="Search articles..." type="text"/>
</div>
</div>
</div>
</div>
</section>
<!-- Blog Grid -->
<section class="py-12 sm:py-16">
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div class="grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
<!-- Card 1 -->
<article class="group relative flex flex-col overflow-hidden rounded-2xl bg-white shadow-soft transition-all duration-300 hover:-translate-y-1 hover:shadow-hover ring-1 ring-slate-100">
<div class="relative aspect-video overflow-hidden bg-slate-100">
<img alt="Abstract glowing purple neon light rings" class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDFmT_1-K6tI_-5uVzxUhYJQq5RpREwm2SU_nuyBiUdUU6waCZO3zd0i2psqHYFvgkDqPcXv5IFve8JgU5AW3y69dgszTwJ7KMROBAkEaR1peof7MI6fdoIkchWinZ_BoljKTNS0_0HyGbYfRvApohV5NFYOuhFcpL91t0p1iI-Qkgr5UvOGSVV2G0wpy07GvFORMkMwQ2pXZkGw0SuCTGwdk_ZanwaUND3RRYVeOL_8uY1-1DCOee95T7xiEFvkdQ2gxyt15aF"/>
<div class="absolute left-4 top-4 rounded-full bg-white/90 px-3 py-1 text-xs font-semibold text-primary backdrop-blur-sm shadow-sm">
Tips & Tricks
</div>
</div>
<div class="flex flex-1 flex-col p-6">
<div class="mb-2 flex items-center gap-2 text-xs font-medium text-slate-400">
<span>June 15, 2024</span>
<span>•</span>
<span>5 min read</span>
</div>
<h3 class="mb-3 text-xl font-bold leading-tight text-slate-900 group-hover:text-primary transition-colors">
<a class="focus:outline-none" href="#">
<span class="absolute inset-0"></span>
How to Maximize Your XP Multiplier
</a>
</h3>
<p class="mb-4 flex-1 text-sm leading-relaxed text-slate-600">
Learn the secrets to leveling up faster by chaining correct answers and using daily boosters effectively in your next session.
</p>
<div class="mt-auto flex items-center gap-2 text-sm font-semibold text-primary">
Read Article
<span class="material-symbols-outlined text-[16px] transition-transform group-hover:translate-x-1">arrow_forward</span>
</div>
</div>
</article>
<!-- Card 2 -->
<article class="group relative flex flex-col overflow-hidden rounded-2xl bg-white shadow-soft transition-all duration-300 hover:-translate-y-1 hover:shadow-hover ring-1 ring-slate-100">
<div class="relative aspect-video overflow-hidden bg-slate-100">
<img alt="Minimalist server room hardware with subtle lighting" class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105" src="https://lh3.googleusercontent.com/aida-public/AB6AXuB-H-rpeIL4sraIbs37W-Y5S1hoAOLeX0lbJxdO1Y17o6nHi_x8M1O5EhAE5DoWc8bPAxR1qjZlwvY5hsZ-7D3iaBN971VNzf8SR932r72J-TpPUiiFerU6HfCfBuELueefpQfFWa24LXfxWMcBfh6A_OkALzTok3Pdbckmu2fyOESQfCU3GodqP1sJNGnNDoy33ZTk4IlZIvX18vFobRyWKI0mtmWJWJlg6egerdqHO6pTm4U-kX5quV8hSMvNwpCbo6Ib5Vbn"/>
<div class="absolute left-4 top-4 rounded-full bg-white/90 px-3 py-1 text-xs font-semibold text-blue-600 backdrop-blur-sm shadow-sm">
Announcements
</div>
</div>
<div class="flex flex-1 flex-col p-6">
<div class="mb-2 flex items-center gap-2 text-xs font-medium text-slate-400">
<span>June 12, 2024</span>
<span>•</span>
<span>2 min read</span>
</div>
<h3 class="mb-3 text-xl font-bold leading-tight text-slate-900 group-hover:text-primary transition-colors">
<a class="focus:outline-none" href="#">
<span class="absolute inset-0"></span>
Server Maintenance Schedule - July
</a>
</h3>
<p class="mb-4 flex-1 text-sm leading-relaxed text-slate-600">
We will be upgrading our backend infrastructure to support the new multiplayer modes. Check the downtime schedule here.
</p>
<div class="mt-auto flex items-center gap-2 text-sm font-semibold text-primary">
Read Article
<span class="material-symbols-outlined text-[16px] transition-transform group-hover:translate-x-1">arrow_forward</span>
</div>
</div>
</article>
<!-- Card 3 -->
<article class="group relative flex flex-col overflow-hidden rounded-2xl bg-white shadow-soft transition-all duration-300 hover:-translate-y-1 hover:shadow-hover ring-1 ring-slate-100">
<div class="relative aspect-video overflow-hidden bg-slate-100">
<img alt="Person holding a golden trophy cup winning" class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCbO_K9zAxoPbAR5REPGJZ9fkjtmm-_Y_oEFWVSx3Nyx-zy3EGhNGlJ7z3kIIAt73eXtCAawEIawPBX3kNZXvr9LDrIQ3pC2L39KQg67u8Gj_o_Avd0TnGVkfcHJJZF6taLotgfSmPMxTw75EvGCAK4npUUN9VFRsa0tDMMn6CT5jk9O3XsYx2u8JTskpEccwfypinfNN0jG_lGkMXXE4SbtZbari-bc3fOu6WI_rCqCKmLp8ZOMdyhjNmwikxbxkuL-klVV08f"/>
<div class="absolute left-4 top-4 rounded-full bg-white/90 px-3 py-1 text-xs font-semibold text-amber-600 backdrop-blur-sm shadow-sm">
Winners
</div>
</div>
<div class="flex flex-1 flex-col p-6">
<div class="mb-2 flex items-center gap-2 text-xs font-medium text-slate-400">
<span>June 10, 2024</span>
<span>•</span>
<span>4 min read</span>
</div>
<h3 class="mb-3 text-xl font-bold leading-tight text-slate-900 group-hover:text-primary transition-colors">
<a class="focus:outline-none" href="#">
<span class="absolute inset-0"></span>
Meet the QuizQuest Champion of the Month
</a>
</h3>
<p class="mb-4 flex-1 text-sm leading-relaxed text-slate-600">
Sarah_99 crushed the competition with a perfect score in the Science category. We interviewed her about her study habits.
</p>
<div class="mt-auto flex items-center gap-2 text-sm font-semibold text-primary">
Read Article
<span class="material-symbols-outlined text-[16px] transition-transform group-hover:translate-x-1">arrow_forward</span>
</div>
</div>
</article>
<!-- Card 4 -->
<article class="group relative flex flex-col overflow-hidden rounded-2xl bg-white shadow-soft transition-all duration-300 hover:-translate-y-1 hover:shadow-hover ring-1 ring-slate-100">
<div class="relative aspect-video overflow-hidden bg-slate-100">
<img alt="Diverse group of young people working together on laptops" class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDYalbLUftoaxF7V7xH2XpUkC_Hn0HNGpr2BB_03T913OVlBc1E0TYRpu0PiExDzHFmuLVHyCD_7etywv0PjvXlwfYCLI3ZEy9G4gNJCc--xv_59p1ZXIThXFOpjoYhiNFHPGf9pgnjIYxk9jva-L1FUzbu-OKQeusr0z7kwgsHgzVU2-RRyWbTHasqR-r3mmu2qIOHddjI719qD1Au_ADt6Gi1BIIbtXXYUCQK201WQkRLlmeYyZPLqh3_GByPMqWiF5dMh8MY"/>
<div class="absolute left-4 top-4 rounded-full bg-white/90 px-3 py-1 text-xs font-semibold text-emerald-600 backdrop-blur-sm shadow-sm">
Community
</div>
</div>
<div class="flex flex-1 flex-col p-6">
<div class="mb-2 flex items-center gap-2 text-xs font-medium text-slate-400">
<span>June 08, 2024</span>
<span>•</span>
<span>3 min read</span>
</div>
<h3 class="mb-3 text-xl font-bold leading-tight text-slate-900 group-hover:text-primary transition-colors">
<a class="focus:outline-none" href="#">
<span class="absolute inset-0"></span>
Community Spotlight: The 'History Buffs' Guild
</a>
</h3>
<p class="mb-4 flex-1 text-sm leading-relaxed text-slate-600">
This guild has dominated the History leaderboards for three months straight. Here's how they organize their weekly matches.
</p>
<div class="mt-auto flex items-center gap-2 text-sm font-semibold text-primary">
Read Article
<span class="material-symbols-outlined text-[16px] transition-transform group-hover:translate-x-1">arrow_forward</span>
</div>
</div>
</article>
<!-- Card 5 -->
<article class="group relative flex flex-col overflow-hidden rounded-2xl bg-white shadow-soft transition-all duration-300 hover:-translate-y-1 hover:shadow-hover ring-1 ring-slate-100">
<div class="relative aspect-video overflow-hidden bg-slate-100">
<img alt="Smartphone displaying generic app interface with colorful icons" class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDMs5lRTCflSo32QHYb4e-OdujKqEkysHjPG3zosE40UCUJD67arEIz6yc21hsXleLKl_R_8XGjyLOA-TmZ-Rrgu3BHJ4PRTrOoYF6wIxwaBMA39nEPD9OecY7qz8Cy-xzx55gHBehZYu8Wg1ixUl5BjC4LcTGWwxtfz2I9RGKJiI5uPmyqKKi1esdJYzLtWnLEq8KpihltI-T23FturfcqeaVrM_67a_SdesuWodYd9xLtsdJvps18oS1lhE9aZkzeBQc_jSAz"/>
<div class="absolute left-4 top-4 rounded-full bg-white/90 px-3 py-1 text-xs font-semibold text-primary backdrop-blur-sm shadow-sm">
Tips & Tricks
</div>
</div>
<div class="flex flex-1 flex-col p-6">
<div class="mb-2 flex items-center gap-2 text-xs font-medium text-slate-400">
<span>June 05, 2024</span>
<span>•</span>
<span>6 min read</span>
</div>
<h3 class="mb-3 text-xl font-bold leading-tight text-slate-900 group-hover:text-primary transition-colors">
<a class="focus:outline-none" href="#">
<span class="absolute inset-0"></span>
5 Hidden Features in the New Mobile App
</a>
</h3>
<p class="mb-4 flex-1 text-sm leading-relaxed text-slate-600">
Did you know you can customize your avatar directly from the home screen? Discover more hidden gems in v2.0.
</p>
<div class="mt-auto flex items-center gap-2 text-sm font-semibold text-primary">
Read Article
<span class="material-symbols-outlined text-[16px] transition-transform group-hover:translate-x-1">arrow_forward</span>
</div>
</div>
</article>
<!-- Card 6 -->
<article class="group relative flex flex-col overflow-hidden rounded-2xl bg-white shadow-soft transition-all duration-300 hover:-translate-y-1 hover:shadow-hover ring-1 ring-slate-100">
<div class="relative aspect-video overflow-hidden bg-slate-100">
<img alt="Futuristic digital lock security concept abstract" class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBTs7orR9xUl9-g72s4d_N0w8CGdM9UhpOIFkksx_Sxz4C5SPszJrTEuU_3E5YBl-2v9nNhN5gVh0gIEcgdofVsSyybHvSHB45BbMbpIpfxReSdHbXrACGInON3iVOQMbnRyseVn3_9H9NKDoSD9WPw_N9dihmPW1Ry5AkepoE8k40CLJOCmcdjNOGu48_FnVsQwJqAAos6lMPgm8OFzYJzH2ic8urgT4DaRQ7taPIZCzvGMVivrYxEwkvZzZCiZz67HR0ShiZJ"/>
<div class="absolute left-4 top-4 rounded-full bg-white/90 px-3 py-1 text-xs font-semibold text-blue-600 backdrop-blur-sm shadow-sm">
Announcements
</div>
</div>
<div class="flex flex-1 flex-col p-6">
<div class="mb-2 flex items-center gap-2 text-xs font-medium text-slate-400">
<span>June 01, 2024</span>
<span>•</span>
<span>2 min read</span>
</div>
<h3 class="mb-3 text-xl font-bold leading-tight text-slate-900 group-hover:text-primary transition-colors">
<a class="focus:outline-none" href="#">
<span class="absolute inset-0"></span>
Security Update: Two-Factor Authentication
</a>
</h3>
<p class="mb-4 flex-1 text-sm leading-relaxed text-slate-600">
Protect your account and your hard-earned badges. We are rolling out optional 2FA for all users starting next week.
</p>
<div class="mt-auto flex items-center gap-2 text-sm font-semibold text-primary">
Read Article
<span class="material-symbols-outlined text-[16px] transition-transform group-hover:translate-x-1">arrow_forward</span>
</div>
</div>
</article>
</div>
<div class="mt-16 flex justify-center">
<button class="inline-flex items-center gap-2 rounded-full border border-slate-200 bg-white px-8 py-3 text-sm font-medium text-slate-600 shadow-sm transition-all hover:bg-slate-50 hover:text-primary hover:shadow-md">
Load More Articles
<span class="material-symbols-outlined text-[18px]">expand_more</span>
</button>
</div>
</div>
</section>
<!-- Newsletter Strip -->
<section class="border-y border-slate-100 bg-background-subtle">
<div class="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8 lg:py-16">
<div class="relative overflow-hidden rounded-3xl bg-slate-900 px-6 py-10 shadow-2xl sm:px-12 sm:py-16 lg:flex lg:items-center lg:p-20">
<div class="absolute inset-0 overflow-hidden">
<div class="absolute -top-1/2 left-1/2 -z-10 h-[500px] w-[500px] -translate-x-1/2 rounded-full bg-primary/20 blur-[100px]"></div>
</div>
<div class="lg:w-0 lg:flex-1">
<h2 class="text-3xl font-bold tracking-tight text-white">Sign up for our newsletter</h2>
<p class="mt-4 max-w-lg text-lg text-slate-300">
Get the latest quizzes, tips, and community news delivered to your inbox weekly. No spam, just knowledge.
</p>
</div>
<div class="mt-8 lg:ml-8 lg:mt-0 lg:flex-1">
<form class="sm:flex">
<label class="sr-only" for="email-address">Email address</label>
<input autocomplete="email" class="w-full rounded-lg border-white/10 bg-white/5 px-5 py-3 placeholder-slate-400 focus:border-primary focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-slate-900 sm:max-w-xs text-white" id="email-address" name="email-address" placeholder="Enter your email" required="" type="email"/>
<div class="mt-3 rounded-md shadow sm:ml-3 sm:mt-0 sm:flex-shrink-0">
<button class="flex w-full items-center justify-center rounded-lg bg-primary px-5 py-3 text-base font-semibold text-white hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-slate-900" type="submit">
Subscribe
</button>
</div>
</form>
<p class="mt-3 text-sm text-slate-400">
We care about the protection of your data. Read our
<a class="font-medium text-white underline" href="#">Privacy Policy</a>.
</p>
</div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="bg-white pt-12 pb-8">
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div class="flex flex-col items-center justify-between gap-6 border-b border-slate-100 pb-8 md:flex-row">
<div class="flex items-center gap-2">
<div class="flex h-8 w-8 items-center justify-center rounded-lg bg-primary text-white">
<span class="material-symbols-outlined text-[20px]">bolt</span>
</div>
<span class="text-xl font-bold text-slate-900">QuizQuest</span>
</div>
<div class="flex gap-6 text-slate-500">
<a class="hover:text-primary transition-colors" href="#">
<span class="sr-only">Twitter</span>
<svg aria-hidden="true" class="h-6 w-6" fill="currentColor" viewbox="0 0 24 24">
<path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"></path>
</svg>
</a>
<a class="hover:text-primary transition-colors" href="#">
<span class="sr-only">GitHub</span>
<svg aria-hidden="true" class="h-6 w-6" fill="currentColor" viewbox="0 0 24 24">
<path clip-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" fill-rule="evenodd"></path>
</svg>
</a>
</div>
</div>
<div class="pt-8 text-center md:text-left">
<p class="text-sm text-slate-400">
© 2024 QuizQuest Inc. All rights reserved.
</p>
</div>
</div>
</footer>
</body></html>