<!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Make the Game Better | QuizPortal Community</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 id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"primary": "#5b13ec",
"background-light": "#f6f6f8",
"background-dark": "#161022",
},
fontFamily: {
"display": ["Spline Sans", "sans-serif"]
},
borderRadius: {
"DEFAULT": "1rem",
"lg": "2rem",
"xl": "3rem",
"full": "9999px"
},
},
},
}
</script>
<style>
body {
font-family: 'Spline Sans', sans-serif;
}
.custom-scrollbar::-webkit-scrollbar {
width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background: #2e2839;
border-radius: 10px;
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark text-slate-900 dark:text-slate-100 min-h-screen flex flex-col">
<!-- Top Navigation Bar -->
<header class="sticky top-0 z-50 w-full border-b border-primary/10 bg-background-light/80 dark:bg-background-dark/80 backdrop-blur-md px-6 lg:px-20 py-4">
<div class="max-w-[1440px] mx-auto flex items-center justify-between">
<div class="flex items-center gap-10">
<div class="flex items-center gap-3">
<div class="size-10 bg-primary rounded-xl flex items-center justify-center text-white">
<span class="material-symbols-outlined text-2xl">quiz</span>
</div>
<h1 class="text-xl font-bold tracking-tight">QuizPortal</h1>
</div>
<nav class="hidden md:flex items-center gap-8">
<a class="text-sm font-semibold hover:text-primary transition-colors" href="#">Play</a>
<a class="text-sm font-semibold hover:text-primary transition-colors" href="#">Leaderboard</a>
<a class="text-sm font-semibold hover:text-primary transition-colors" href="#">Challenges</a>
<a class="text-sm font-semibold text-primary transition-colors border-b-2 border-primary pb-1" href="#">Community</a>
</nav>
</div>
<div class="flex items-center gap-6">
<div class="relative hidden sm:block">
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 text-xl">search</span>
<input class="bg-slate-200 dark:bg-primary/10 border-none rounded-full py-2 pl-10 pr-4 text-sm w-64 focus:ring-2 focus:ring-primary outline-none transition-all" placeholder="Search ideas..." type="text"/>
</div>
<button class="bg-primary hover:bg-primary/90 text-white px-6 py-2 rounded-full font-bold text-sm transition-transform active:scale-95 shadow-lg shadow-primary/20">
Profile
</button>
<div class="size-10 rounded-full bg-cover bg-center border-2 border-primary/30" data-alt="User profile avatar with purple border" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuAhx-TcpBIUcvknFXqhg9--zqdCuHxNeAGh8joS7V9JKRye10W1pXUuvl3kUABUYb1Hq_9p6l479bL5RrMhVKvVs3djjEbPxVj-dJxVCVl7YdE1OrlVovHHpZXUGfo0fyeNzD4ajPwkKQY7nZbfrUFFBIRQ1cB9EbMQZurMYr5OPmiE2kaI9nf7h6rC6fQHwlaHNzH0sK3Seuuy8emCb6SHIBfizZj1rzrrNZIJWhnWZrseVOwiHhO6hEl2Q6Qb6xLQ4q044lF5Um7x');"></div>
</div>
</div>
</header>
<main class="flex-grow max-w-[1440px] mx-auto w-full px-6 lg:px-20 py-10 grid grid-cols-1 lg:grid-cols-12 gap-10">
<!-- Left Section: Form & Feed -->
<div class="lg:col-span-8 flex flex-col gap-10">
<!-- Hero Banner -->
<section class="relative overflow-hidden rounded-xl bg-primary p-8 lg:p-12 text-white shadow-2xl shadow-primary/30">
<div class="relative z-10 max-w-lg">
<h2 class="text-4xl font-bold leading-tight mb-4">Make the Game Better</h2>
<p class="text-white/80 text-lg mb-6">Your ideas shape the future of QuizPortal. Submit categories, features, or tweaks and earn community XP!</p>
<div class="flex gap-4">
<div class="bg-white/10 backdrop-blur-md rounded-lg p-3 flex flex-col items-center min-w-[100px]">
<span class="text-2xl font-bold">12</span>
<span class="text-[10px] uppercase tracking-widest font-semibold opacity-70">Implemented</span>
</div>
<div class="bg-white/10 backdrop-blur-md rounded-lg p-3 flex flex-col items-center min-w-[100px]">
<span class="text-2xl font-bold">450</span>
<span class="text-[10px] uppercase tracking-widest font-semibold opacity-70">Community XP</span>
</div>
</div>
</div>
<!-- Abstract Background Ornament -->
<div class="absolute -right-20 -top-20 size-80 bg-white/10 rounded-full blur-3xl"></div>
<div class="absolute right-10 bottom-10 size-40 bg-white/5 rounded-full border border-white/10"></div>
</section>
<!-- Submit Idea Form -->
<section class="bg-white dark:bg-primary/5 border border-slate-200 dark:border-primary/20 rounded-xl p-8 shadow-sm">
<div class="flex items-center gap-3 mb-6">
<span class="material-symbols-outlined text-primary text-3xl">lightbulb</span>
<h3 class="text-2xl font-bold">Got a killer idea?</h3>
</div>
<form class="space-y-6">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="space-y-2">
<label class="text-sm font-semibold opacity-70 ml-1">Suggestion Category</label>
<select class="w-full bg-slate-100 dark:bg-background-dark border-none rounded-lg p-3 focus:ring-2 focus:ring-primary appearance-none">
<option>New Quiz Category</option>
<option>User Interface / UX</option>
<option>Feature Request</option>
<option>Bug Report</option>
</select>
</div>
<div class="space-y-2">
<label class="text-sm font-semibold opacity-70 ml-1">Idea Title</label>
<input class="w-full bg-slate-100 dark:bg-background-dark border-none rounded-lg p-3 focus:ring-2 focus:ring-primary" placeholder="Short and punchy title" type="text"/>
</div>
</div>
<div class="space-y-2">
<label class="text-sm font-semibold opacity-70 ml-1">Description</label>
<textarea class="w-full bg-slate-100 dark:bg-background-dark border-none rounded-lg p-3 focus:ring-2 focus:ring-primary resize-none" placeholder="Tell us more about how it works..." rows="4"></textarea>
</div>
<div class="flex justify-end">
<button class="bg-primary hover:bg-primary/90 text-white font-bold py-3 px-10 rounded-full transition-all flex items-center gap-2 group shadow-xl shadow-primary/20" type="submit">
Post Suggestion
<span class="material-symbols-outlined group-hover:translate-x-1 transition-transform">send</span>
</button>
</div>
</form>
</section>
<!-- Feed Filter -->
<section class="flex flex-col gap-6">
<div class="flex items-center justify-between">
<h3 class="text-xl font-bold">Community Voice</h3>
<div class="flex bg-slate-200 dark:bg-primary/10 rounded-full p-1">
<button class="px-4 py-1.5 rounded-full text-xs font-bold bg-primary text-white">Trending</button>
<button class="px-4 py-1.5 rounded-full text-xs font-bold hover:text-primary transition-colors">Newest</button>
<button class="px-4 py-1.5 rounded-full text-xs font-bold hover:text-primary transition-colors">Planned</button>
</div>
</div>
<!-- Idea Cards Feed -->
<div class="grid grid-cols-1 gap-4">
<!-- Idea Card 1 -->
<div class="group bg-white dark:bg-primary/5 border border-slate-200 dark:border-primary/20 p-6 rounded-xl flex items-start gap-6 hover:border-primary/50 transition-all shadow-sm">
<div class="flex flex-col items-center gap-1 min-w-[60px]">
<button class="size-12 rounded-xl bg-slate-100 dark:bg-primary/20 flex flex-col items-center justify-center group-hover:bg-primary group-hover:text-white transition-all text-primary">
<span class="material-symbols-outlined">expand_less</span>
<span class="text-sm font-bold">124</span>
</button>
</div>
<div class="flex-grow">
<div class="flex items-center gap-3 mb-2">
<span class="bg-primary/10 text-primary text-[10px] font-bold uppercase tracking-wider px-2 py-1 rounded">Feature</span>
<span class="text-xs font-medium opacity-50">• 2 hours ago by @pixel_lord</span>
</div>
<h4 class="text-lg font-bold mb-2 group-hover:text-primary transition-colors">Real-time Multiplayer Battle Mode</h4>
<p class="text-sm opacity-70 line-clamp-2">Imagine a 1v1 rapid-fire mode where you can see the other player's progress bar in real-time. Highest score in 60 seconds wins!</p>
</div>
<div class="flex flex-col items-end gap-2">
<span class="text-[10px] font-bold bg-green-500/20 text-green-500 px-2 py-1 rounded-full flex items-center gap-1">
<span class="size-1.5 bg-green-500 rounded-full animate-pulse"></span>
In Review
</span>
<div class="flex -space-x-2 mt-2">
<img class="size-6 rounded-full border-2 border-background-dark" data-alt="Voter avatar 1" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCuMwTkuwyc5LATjmonYTHDpcl1PoKpXj9dYOsXr7t5TRIkJptwWjNxTGym8NVdmeONZm_zJ4zAlb5yoKkLACtojczpdm4y_6FF_SSkImIohy0O-Ddjff1G857JV1GT43f5xKwSB4sbpwUCl0qxjjwCYQKI7fVDi2ghg9oebPBI5HRxjZi1GlY_-qQWIgLAOxEIZq-fmQML-vJCqbJx8bvdm9rAJn6JA4t-52UxK5p5JyuRUkIg7FIwLSv2Den04A3zRQC73iGjSqbs"/>
<img class="size-6 rounded-full border-2 border-background-dark" data-alt="Voter avatar 2" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBPOaRTp05f11TWJE7DHDHLjbuhzLkgjtxVB1iekT-JyB1BDv-bBTTpJr6O_rqVn6r7z8zBbp9x-QxZc7Gt76DccUvoTQ4EkpCIgyZv9NknLto86YXOQn2ErhbOqJI6a_sW8UiFPtYzBYBtF3Wzdu2LghsLH1dYfgVoiH8N4dCj6qLeBzLZ3PG25PfbKarjRi2M3wkyVja7rA96fz_mv9PYIZOr0RzyYYc2J6Qb-e_ChMhE4VSivxlpAgxnmr8v_p2ZZhtBliBf1Kqp"/>
<div class="size-6 rounded-full border-2 border-background-dark bg-slate-800 flex items-center justify-center text-[8px] font-bold">+122</div>
</div>
</div>
</div>
<!-- Idea Card 2 -->
<div class="group bg-white dark:bg-primary/5 border border-slate-200 dark:border-primary/20 p-6 rounded-xl flex items-start gap-6 hover:border-primary/50 transition-all shadow-sm">
<div class="flex flex-col items-center gap-1 min-w-[60px]">
<button class="size-12 rounded-xl bg-slate-100 dark:bg-primary/20 flex flex-col items-center justify-center hover:bg-primary hover:text-white transition-all text-primary">
<span class="material-symbols-outlined">expand_less</span>
<span class="text-sm font-bold">89</span>
</button>
</div>
<div class="flex-grow">
<div class="flex items-center gap-3 mb-2">
<span class="bg-primary/10 text-primary text-[10px] font-bold uppercase tracking-wider px-2 py-1 rounded">Category</span>
<span class="text-xs font-medium opacity-50">• 5 hours ago by @quizzly_bear</span>
</div>
<h4 class="text-lg font-bold mb-2 group-hover:text-primary transition-colors">Indie Game Dev Trivia Section</h4>
<p class="text-sm opacity-70 line-clamp-2">A category dedicated to indie gems like Celeste, Hollow Knight, and Undertale. There's a huge community for this!</p>
</div>
<div class="flex flex-col items-end gap-2">
<span class="text-[10px] font-bold bg-orange-500/20 text-orange-500 px-2 py-1 rounded-full">Community Favorite</span>
</div>
</div>
<!-- Idea Card 3 -->
<div class="group bg-white dark:bg-primary/5 border border-slate-200 dark:border-primary/20 p-6 rounded-xl flex items-start gap-6 hover:border-primary/50 transition-all shadow-sm">
<div class="flex flex-col items-center gap-1 min-w-[60px]">
<button class="size-12 rounded-xl bg-slate-100 dark:bg-primary/20 flex flex-col items-center justify-center hover:bg-primary hover:text-white transition-all text-primary">
<span class="material-symbols-outlined">expand_less</span>
<span class="text-sm font-bold">42</span>
</button>
</div>
<div class="flex-grow">
<div class="flex items-center gap-3 mb-2">
<span class="bg-primary/10 text-primary text-[10px] font-bold uppercase tracking-wider px-2 py-1 rounded">UI/UX</span>
<span class="text-xs font-medium opacity-50">• 1 day ago by @dark_mode_stan</span>
</div>
<h4 class="text-lg font-bold mb-2 group-hover:text-primary transition-colors">Animated Theme Backgrounds</h4>
<p class="text-sm opacity-70 line-clamp-2">Add subtle gradient animations to the background based on the current quiz category (e.g., Neon for Cyberpunk quiz).</p>
</div>
<div class="flex flex-col items-end gap-2">
<span class="text-[10px] font-bold bg-blue-500/20 text-blue-500 px-2 py-1 rounded-full">Coming Soon</span>
</div>
</div>
</div>
<button class="w-full py-4 rounded-xl border-2 border-dashed border-primary/20 text-primary font-bold hover:bg-primary/5 transition-colors">
Load More Suggestions
</button>
</section>
</div>
<!-- Right Section: Sidebar -->
<aside class="lg:col-span-4 flex flex-col gap-8">
<!-- Top Contributors Sidebar -->
<section class="bg-white dark:bg-primary/5 border border-slate-200 dark:border-primary/20 rounded-xl overflow-hidden shadow-sm sticky top-32">
<div class="p-6 border-b border-slate-200 dark:border-primary/20">
<h3 class="text-xl font-bold">Top Contributors</h3>
<p class="text-xs opacity-60">Influence Leaderboard</p>
</div>
<div class="p-4 space-y-2">
<!-- Rank 1 -->
<div class="flex items-center gap-4 p-3 rounded-xl bg-primary text-white shadow-lg shadow-primary/30">
<div class="relative">
<img class="size-10 rounded-full" data-alt="Top contributor rank 1 avatar" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDzLcxTnR5Pw6LXT_0LIWXRc_Pz_wZLCyECcch8bLDuXXiOepm2lR0jrDA5xz356cqoHhwjm_v6E3FlgG7IX6fR9LcZt9De7WW1Xh8RKku23rNWFnhgbD8FbILDWSYJZd2ip5eL0LUFjnZbsDHeSpT3sj8zXQWtPWbXs-RJzlfsDTgEGx46ceC4NP70e-yOxfjxdtTqHm_JUEu4vgT_Zm3nwaE96xLZqC2TdpSW-qBRGxUZwVoG9Pxz5I2wa83yhEQ4EF0F4aIOrxsI"/>
<div class="absolute -top-2 -right-2 text-yellow-400">
<span class="material-symbols-outlined text-lg fill-1">crown</span>
</div>
</div>
<div class="flex-grow">
<p class="text-sm font-bold leading-none">Alex "Visionary"</p>
<p class="text-[10px] font-medium opacity-80">Rank #1 Global</p>
</div>
<div class="text-right">
<p class="text-sm font-black">2.4k</p>
<p class="text-[8px] uppercase font-bold tracking-tighter opacity-80">Points</p>
</div>
</div>
<!-- Rank 2 -->
<div class="flex items-center gap-4 p-3 rounded-xl hover:bg-primary/10 transition-colors">
<img class="size-10 rounded-full" data-alt="Top contributor rank 2 avatar" src="https://lh3.googleusercontent.com/aida-public/AB6AXuA7sz5ZPSd-GIyl7n6B2B1u1MNzsBvhYHE9IBvm9e3X5oaRb0mevhyALIMzl_QZPkXkRE9OQ1gQVIx5EL0JxytVhuMeJAkuvM7yqnMx-7SLmwMDSlUAWeL05b-jXMb1Pq_QHSl2-JPPjUXYqGm7EdKMFPnpmKgbkXhNB5VAi-Ks9dM0XlremuR1clYbN7yryFXrwX1PgWWLCbNNam8rt0DsQCN4J-NOafAJmUDEKwavx7IthBG7KXIHGDeNM6kFaL64I76wKjgYIK_S"/>
<div class="flex-grow">
<p class="text-sm font-bold leading-none">Sam "Architect"</p>
<p class="text-[10px] font-medium opacity-60">Rank #2 Global</p>
</div>
<div class="text-right">
<p class="text-sm font-bold text-primary">1.8k</p>
<p class="text-[8px] uppercase font-bold tracking-tighter opacity-60">Points</p>
</div>
</div>
<!-- Rank 3 -->
<div class="flex items-center gap-4 p-3 rounded-xl hover:bg-primary/10 transition-colors">
<img class="size-10 rounded-full" data-alt="Top contributor rank 3 avatar" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDlWp123w2Z9WbkJ1iYlfvQPMinL19lLgec7t674sD4vkpE2o2q3qOmKBLJ8z8p6msvblQIYDQxyqMgUKk_8OOwWGOYFA0xX5-10fq0uFt0PUSIvhxP8ZICvkDO079zT5RzaLc4MjVB124ggOHz21nVF2WfhTL_P1msNQtscqrCjvPNYasCZqHR0jElEU3Y_dtcVzvTqG85EiMYP2QWrQ9XhZXQsx6UH3ATpl-FMd9inoigqYiO5wv-4jUXxoV34Wf-GYClUZ392CMW"/>
<div class="flex-grow">
<p class="text-sm font-bold leading-none">Jordan "Thinker"</p>
<p class="text-[10px] font-medium opacity-60">Rank #3 Global</p>
</div>
<div class="text-right">
<p class="text-sm font-bold text-primary">1.5k</p>
<p class="text-[8px] uppercase font-bold tracking-tighter opacity-60">Points</p>
</div>
</div>
<!-- Rank 4 -->
<div class="flex items-center gap-4 p-3 rounded-xl hover:bg-primary/10 transition-colors">
<img class="size-10 rounded-full" data-alt="Top contributor rank 4 avatar" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDH58t20f4GFvEw2x7GfofQ1DbYAdmBvL9PG47sOIlT2IRrYSMMBiX0LPNYbNZBfAdMRHBHsBaeE15K_qBkbpz9jxG-U-qdkU4C_c-e_dFiNoToQ_7cUGZ626Hh-JKAKYJ9CclQbBqd8lKbJm4RQKRyyMxllb6eNzKG8--u-56TJMFvYLbXOrKmkEeS4gm4NZ_4DgZZ7srLaVMDw6pYu6pmyp7WWTJoRYVcBd_mz_eTtWaDAbJ3sNS7Z7zbq4nBPoJPGHfKZhU49i8D"/>
<div class="flex-grow">
<p class="text-sm font-bold leading-none">Taylor "Scout"</p>
<p class="text-[10px] font-medium opacity-60">Rank #4 Global</p>
</div>
<div class="text-right">
<p class="text-sm font-bold text-primary">1.2k</p>
<p class="text-[8px] uppercase font-bold tracking-tighter opacity-60">Points</p>
</div>
</div>
</div>
<div class="p-6 border-t border-slate-200 dark:border-primary/20 bg-primary/5">
<p class="text-xs text-center font-semibold text-primary">Earn 50 Points for every suggestion upvoted 10+ times!</p>
</div>
</section>
<!-- Community Perks Card -->
<section class="bg-gradient-to-br from-slate-900 to-primary rounded-xl p-8 text-white relative overflow-hidden">
<div class="relative z-10">
<h4 class="text-xl font-bold mb-2">Be an Architect</h4>
<p class="text-sm text-white/80 mb-6">Top contributors get exclusive profile badges and early access to experimental features.</p>
<button class="w-full bg-white text-primary font-bold py-3 rounded-full text-sm">View Rewards</button>
</div>
<span class="material-symbols-outlined absolute -bottom-10 -right-10 text-[120px] opacity-10 rotate-12">architecture</span>
</section>
</aside>
</main>
<!-- Footer -->
<footer class="mt-20 border-t border-slate-200 dark:border-primary/20 bg-white dark:bg-background-dark/50 px-6 lg:px-20 py-12">
<div class="max-w-[1440px] mx-auto grid grid-cols-1 md:grid-cols-4 gap-12">
<div class="space-y-4">
<div class="flex items-center gap-3">
<div class="size-8 bg-primary rounded-lg flex items-center justify-center text-white">
<span class="material-symbols-outlined text-xl">quiz</span>
</div>
<h1 class="text-lg font-bold tracking-tight">QuizPortal</h1>
</div>
<p class="text-sm opacity-60 leading-relaxed">The ultimate gamified trivia experience. Built by gamers, for gamers.</p>
<div class="flex gap-4">
<a class="size-8 rounded-full bg-primary/10 flex items-center justify-center text-primary hover:bg-primary hover:text-white transition-all" href="#"><span class="material-symbols-outlined text-lg">public</span></a>
<a class="size-8 rounded-full bg-primary/10 flex items-center justify-center text-primary hover:bg-primary hover:text-white transition-all" href="#"><span class="material-symbols-outlined text-lg">groups</span></a>
<a class="size-8 rounded-full bg-primary/10 flex items-center justify-center text-primary hover:bg-primary hover:text-white transition-all" href="#"><span class="material-symbols-outlined text-lg">forum</span></a>
</div>
</div>
<div class="space-y-4">
<h5 class="font-bold text-sm uppercase tracking-widest text-primary">Explore</h5>
<ul class="space-y-2 text-sm opacity-70">
<li><a class="hover:text-primary" href="#">Featured Quizzes</a></li>
<li><a class="hover:text-primary" href="#">Leaderboards</a></li>
<li><a class="hover:text-primary" href="#">Creator Hub</a></li>
<li><a class="hover:text-primary" href="#">Pro Subscription</a></li>
</ul>
</div>
<div class="space-y-4">
<h5 class="font-bold text-sm uppercase tracking-widest text-primary">Community</h5>
<ul class="space-y-2 text-sm opacity-70">
<li><a class="hover:text-primary" href="#">Feedback Box</a></li>
<li><a class="hover:text-primary" href="#">Forum Threads</a></li>
<li><a class="hover:text-primary" href="#">Discord Server</a></li>
<li><a class="hover:text-primary" href="#">Help Center</a></li>
</ul>
</div>
<div class="space-y-4">
<h5 class="font-bold text-sm uppercase tracking-widest text-primary">Status</h5>
<div class="p-4 bg-primary/5 rounded-xl space-y-3">
<div class="flex items-center justify-between text-xs">
<span class="opacity-70">Server Latency</span>
<span class="font-bold text-green-500">24ms</span>
</div>
<div class="flex items-center justify-between text-xs">
<span class="opacity-70">Active Players</span>
<span class="font-bold">12,842</span>
</div>
<div class="w-full h-1 bg-primary/20 rounded-full overflow-hidden">
<div class="w-[85%] h-full bg-primary animate-pulse"></div>
</div>
</div>
</div>
</div>
<div class="max-w-[1440px] mx-auto mt-12 pt-8 border-t border-slate-200 dark:border-primary/10 flex flex-col md:flex-row justify-between items-center gap-4 text-[10px] font-bold uppercase tracking-tighter opacity-40">
<p>© 2024 QUIZPORTAL INTERACTIVE. ALL RIGHTS RESERVED.</p>
<div class="flex gap-8">
<a href="#">Privacy Policy</a>
<a href="#">Terms of Service</a>
<a href="#">Cookie Policy</a>
</div>
</div>
</footer>
</body></html>