<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>QuizQuest - Registration</title>
<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 src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"primary": "#7f13ec",
"background-light": "#f7f6f8",
"background-dark": "#191022",
},
fontFamily: {
"display": ["Spline Sans", "sans-serif"]
},
borderRadius: {"DEFAULT": "1rem", "lg": "2rem", "xl": "3rem", "full": "9999px"},
},
},
}
</script>
<style>
/* Custom scrollbar to match theme if needed */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #d4cce6;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #7f13ec;
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark font-display antialiased text-slate-900 dark:text-slate-100 min-h-screen flex flex-col">
<!-- Top Navigation for Mobile (Left side content is hidden on mobile, so we need a header) -->
<nav class="lg:hidden flex items-center justify-between px-6 py-4 bg-white/80 backdrop-blur-md border-b border-slate-200 sticky top-0 z-50">
<div class="flex items-center gap-2 text-slate-900">
<span class="material-symbols-outlined text-primary text-3xl">psychology_alt</span>
<span class="text-xl font-bold tracking-tight">QuizQuest</span>
</div>
<a class="text-sm font-medium text-slate-600 hover:text-primary transition-colors" href="#">Log In</a>
</nav>
<div class="flex flex-1 min-h-[calc(100vh-65px)] lg:min-h-screen w-full">
<!-- Left Pane: Visual/Brand (Hidden on mobile) -->
<div class="hidden lg:flex lg:w-5/12 xl:w-1/2 bg-primary/5 relative flex-col justify-between overflow-hidden p-12">
<!-- Background Decoration -->
<div class="absolute top-0 left-0 w-full h-full opacity-30 pointer-events-none" style="background: radial-gradient(circle at 20% 20%, rgba(127, 19, 236, 0.15) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(127, 19, 236, 0.1) 0%, transparent 50%);">
</div>
<!-- Logo Area -->
<div class="relative z-10 flex items-center gap-3 text-slate-900 mb-8">
<div class="size-10 bg-primary rounded-full flex items-center justify-center text-white shadow-lg shadow-primary/30">
<span class="material-symbols-outlined text-2xl">psychology_alt</span>
</div>
<h2 class="text-2xl font-bold tracking-tight">QuizQuest</h2>
</div>
<!-- Main Visual Content -->
<div class="relative z-10 flex flex-col items-start gap-6 mt-auto mb-auto">
<h1 class="text-5xl font-bold leading-[1.1] tracking-tight text-slate-900 max-w-md">
Level up your <span class="text-primary">knowledge.</span>
</h1>
<p class="text-lg text-slate-600 max-w-sm leading-relaxed">
Join the ultimate gamified quiz experience. Challenge friends, climb leaderboards, and earn badges.
</p>
<!-- 3D Illustration Placeholder -->
<div class="w-full max-w-md aspect-square rounded-3xl overflow-hidden shadow-2xl shadow-primary/20 mt-8 relative group transform hover:scale-[1.02] transition-transform duration-500">
<img alt="Abstract colorful 3D shapes representing gamification and fun" class="w-full h-full object-cover" data-alt="Abstract colorful 3D shapes representing gamification and fun" src="https://lh3.googleusercontent.com/aida-public/AB6AXuB9qfNygcEmZebA3-f5F_UqbikfR8NVDabJSpQ2rOi3kS7TRBzAmVwHuWtoaXcBJxP6h1gFL3vt79FT-GPe7QIGLXcMNZezDt5lN0KjtzLKvqOss6k2ftucB9mvERnOEmlx90NSTwq9VmX4f5eZWitkbJEyZkKkJxLF4IUtxjVyTUr0sTiLtLyoMWCQwoVOdFqUm-bG7X-AOkJiequZSjUF8iCzDipH1DE5kM9NsHg5TtSQinte9nQJkC13LmrC8nyWlJXw8_-W"/>
<!-- Floating Badge Overlay -->
<div class="absolute bottom-6 right-6 bg-white/90 backdrop-blur-sm p-4 rounded-2xl shadow-lg flex items-center gap-3 animate-bounce" style="animation-duration: 3s;">
<span class="material-symbols-outlined text-yellow-500 text-3xl">emoji_events</span>
<div>
<p class="text-xs font-bold text-slate-400 uppercase tracking-wider">Daily Winner</p>
<p class="text-sm font-bold text-slate-900">Alex J.</p>
</div>
</div>
</div>
</div>
<!-- Footer Links -->
<div class="relative z-10 flex gap-6 text-sm font-medium text-slate-500 mt-8">
<a class="hover:text-primary transition-colors" href="#">Privacy Policy</a>
<a class="hover:text-primary transition-colors" href="#">Terms of Service</a>
</div>
</div>
<!-- Right Pane: Form Interaction -->
<div class="w-full lg:w-7/12 xl:w-1/2 flex items-center justify-center p-4 sm:p-8 lg:p-12 relative">
<!-- Decorative circle behind form -->
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-primary/5 rounded-full blur-3xl -z-10"></div>
<div class="w-full max-w-[520px] bg-white rounded-lg sm:rounded-xl shadow-xl shadow-slate-200/50 p-6 sm:p-10 lg:p-12 border border-slate-100">
<!-- Form Header -->
<div class="mb-8 text-center sm:text-left">
<h2 class="text-3xl font-bold text-slate-900 mb-2">Create your account</h2>
<p class="text-slate-500">Start your journey with QuizQuest today.</p>
</div>
<!-- Registration Form -->
<form class="flex flex-col gap-5">
<!-- Social Login -->
<div class="grid grid-cols-2 gap-3 mb-2">
<button class="flex items-center justify-center gap-2 bg-slate-50 hover:bg-slate-100 border border-slate-200 text-slate-700 font-medium py-3 px-4 rounded-full transition-all focus:ring-2 focus:ring-slate-200 focus:outline-none" type="button">
<img alt="Google" class="w-5 h-5" data-alt="Google Logo Icon" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDpxw6gsl6mdSBzL_Xp2ehjknVvn-uRM4dbYhCB9pXXVodo1uZfFephH-SK6TAdpc32fperg6LBpBqurSNnnV_Io5NjQlp9g1u2Pzxvdl6pKumavGBZGU76lZraUKeHtwAnFPTo_HbZzhsb99ZLhrW5CJ4YAC_QoX_tvS9g3JDnp657j268TTZay7W7pXZuJd16EZ_oxUV5aMMf9Ucyt1RrQb__TK8dA2wsLYLzKkvQ5PqePUpCVbf47b2_xHoa7yLdbmzmUSKR"/>
<span class="hidden sm:inline">Google</span>
</button>
<button class="flex items-center justify-center gap-2 bg-slate-50 hover:bg-slate-100 border border-slate-200 text-slate-700 font-medium py-3 px-4 rounded-full transition-all focus:ring-2 focus:ring-slate-200 focus:outline-none" type="button">
<img alt="Apple" class="w-5 h-5" data-alt="Apple Logo Icon" src="https://lh3.googleusercontent.com/aida-public/AB6AXuApaiYbNwR6UMjb0TbiroUBTr5QYZ7-VIZYJRxUugMpbOOBngOnfU9sGSnZyzRrVNVRWrldaWNmx6VMtlxYXCTg8yqaZoK_bwj41dYPu4-3n42L5T55IpQwxw4jaFB5LkwKhe3RiMpkyaIouFdxo2PF6iAi8OeUYEBazm88xFbRPDotMMGD7UdVwSNy297QZyTPZ24ReedlOemcS-FyEHV3rfxbslMMpFNwhL06FJD13Hf9m_TJcqHTJJ_ZeohRjdsfwVsmqVh1"/>
<span class="hidden sm:inline">Apple</span>
</button>
</div>
<div class="relative flex items-center py-2">
<div class="flex-grow border-t border-slate-200"></div>
<span class="flex-shrink-0 mx-4 text-slate-400 text-xs font-semibold uppercase tracking-wider">Or register with email</span>
<div class="flex-grow border-t border-slate-200"></div>
</div>
<!-- Inputs -->
<div class="space-y-4">
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<label class="flex flex-col gap-1.5">
<span class="text-sm font-semibold text-slate-700 ml-1">First Name</span>
<div class="relative group">
<span class="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 group-focus-within:text-primary transition-colors material-symbols-outlined text-[20px]">person</span>
<input class="w-full bg-slate-50 border border-slate-200 text-slate-900 text-sm rounded-full focus:ring-primary focus:border-primary block pl-11 p-3.5 transition-shadow placeholder:text-slate-400 focus:bg-white" placeholder="Jane" type="text"/>
</div>
</label>
<label class="flex flex-col gap-1.5">
<span class="text-sm font-semibold text-slate-700 ml-1">Last Name</span>
<div class="relative group">
<span class="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 group-focus-within:text-primary transition-colors material-symbols-outlined text-[20px]">badge</span>
<input class="w-full bg-slate-50 border border-slate-200 text-slate-900 text-sm rounded-full focus:ring-primary focus:border-primary block pl-11 p-3.5 transition-shadow placeholder:text-slate-400 focus:bg-white" placeholder="Doe" type="text"/>
</div>
</label>
</div>
<label class="flex flex-col gap-1.5">
<span class="text-sm font-semibold text-slate-700 ml-1">Email Address</span>
<div class="relative group">
<span class="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 group-focus-within:text-primary transition-colors material-symbols-outlined text-[20px]">mail</span>
<input class="w-full bg-slate-50 border border-slate-200 text-slate-900 text-sm rounded-full focus:ring-primary focus:border-primary block pl-11 p-3.5 transition-shadow placeholder:text-slate-400 focus:bg-white" placeholder="jane@example.com" type="email"/>
</div>
</label>
<label class="flex flex-col gap-1.5">
<span class="text-sm font-semibold text-slate-700 ml-1">Password</span>
<div class="relative group">
<span class="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 group-focus-within:text-primary transition-colors material-symbols-outlined text-[20px]">lock</span>
<input class="w-full bg-slate-50 border border-slate-200 text-slate-900 text-sm rounded-full focus:ring-primary focus:border-primary block pl-11 pr-12 p-3.5 transition-shadow placeholder:text-slate-400 focus:bg-white" placeholder="Create a strong password" type="password"/>
<button class="absolute right-4 top-1/2 -translate-y-1/2 text-slate-400 hover:text-primary transition-colors" type="button">
<span class="material-symbols-outlined text-[20px]">visibility</span>
</button>
</div>
</label>
</div>
<!-- Terms Checkbox -->
<div class="flex items-start gap-3 mt-2 ml-1">
<div class="flex items-center h-5">
<input class="w-5 h-5 border border-slate-300 rounded bg-slate-50 focus:ring-3 focus:ring-primary/30 checked:bg-primary checked:border-primary text-primary transition-all cursor-pointer" id="terms" type="checkbox" value=""/>
</div>
<label class="text-sm font-medium text-slate-500 leading-tight" for="terms">
I agree to the <a class="text-primary hover:underline font-semibold" href="#">Terms & Conditions</a> and <a class="text-primary hover:underline font-semibold" href="#">Privacy Policy</a>.
</label>
</div>
<!-- Submit Button -->
<button class="w-full text-white bg-primary hover:bg-[#690ec4] focus:ring-4 focus:ring-primary/30 font-bold rounded-full text-base px-5 py-3.5 text-center mt-4 transition-all transform active:scale-[0.98] shadow-lg shadow-primary/25 flex items-center justify-center gap-2 group" type="submit">
Create Account
<span class="material-symbols-outlined group-hover:translate-x-1 transition-transform text-[20px]">arrow_forward</span>
</button>
</form>
<!-- Footer Text -->
<div class="mt-8 text-center">
<p class="text-sm text-slate-600">
Already have an account?
<a class="font-bold text-primary hover:text-[#690ec4] transition-colors" href="#">Log In</a>
</p>
</div>
</div>
</div>
</div>
</body></html>