<!DOCTYPE html>
<html class="dark" 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" rel="preconnect"/>
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
<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",
"primary-hover": "#680ec2",
"background-light": "#f7f6f8",
"background-dark": "#191022",
"surface-dark": "#261933",
"border-dark": "#4d3267",
"text-secondary": "#ad92c9",
},
fontFamily: {
"display": ["Spline Sans", "sans-serif"]
},
borderRadius: {"DEFAULT": "1rem", "lg": "2rem", "xl": "3rem", "full": "9999px"},
animation: {
'pulse-glow': 'pulse-glow 2s infinite',
},
keyframes: {
'pulse-glow': {
'0%, 100%': { boxShadow: '0 0 0 0 rgba(127, 19, 236, 0.7)' },
'70%': { boxShadow: '0 0 0 10px rgba(127, 19, 236, 0)' },
}
}
},
},
}
</script>
</head>
<body class="bg-background-light dark:bg-background-dark text-slate-900 dark:text-slate-100 font-display antialiased selection:bg-primary selection:text-white">
<div class="min-h-screen w-full flex flex-col lg:flex-row overflow-hidden">
<!-- Left Side: Visual Hero -->
<div class="relative w-full lg:w-5/12 xl:w-1/2 bg-surface-dark lg:h-screen hidden lg:flex flex-col justify-between overflow-hidden">
<!-- Background Image with Overlay -->
<div class="absolute inset-0 z-0">
<div class="absolute inset-0 bg-gradient-to-t from-background-dark via-transparent to-transparent opacity-90 z-10"></div>
<div class="absolute inset-0 bg-primary/20 mix-blend-overlay z-10"></div>
<div class="w-full h-full bg-cover bg-center" data-alt="Abstract neon purple 3D geometric shapes glowing in dark space" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuBZa7hXJG14MM1_eAiHlOi5Y_azta-XdB0QRJkDz-1x6t9rv5Oncw-HBNeBUFYPKHh4L6DP8Rr0TCkKo7SXwFx3ZSygJVXSiIsN2sX95gN9bysB4ZvsnkpLx8KRayvvJW1nk2n4E3foDjRt5Gl_JTrKAfegNzukaqWjnEHfsxVu_SmAAqYwr4zICFzIbmCYDggPdT_6MwBeZbOc7IrCBsYK3zLqZ3369Z4DLIELinCVBKKQpLiyz7ptQ42cGPYGQgfRhIpbAWoF');"></div>
</div>
<!-- Logo Area -->
<div class="relative z-20 px-10 py-8">
<div class="flex items-center gap-3 text-white">
<div class="flex items-center justify-center size-10 rounded-xl bg-primary/20 backdrop-blur-md border border-primary/30 text-primary">
<span class="material-symbols-outlined">sports_esports</span>
</div>
<h2 class="text-white text-xl font-bold tracking-tight">QuizQuest</h2>
</div>
</div>
<!-- Content Area -->
<div class="relative z-20 px-10 pb-16">
<div class="max-w-md">
<div class="inline-flex items-center gap-2 px-3 py-1 mb-6 rounded-full bg-primary/20 border border-primary/30 backdrop-blur-sm">
<span class="flex h-2 w-2 rounded-full bg-primary animate-pulse"></span>
<span class="text-xs font-bold text-white uppercase tracking-wider">New Season Live</span>
</div>
<h1 class="text-5xl font-black leading-tight text-white mb-6 tracking-tight">
Enter the <span class="text-transparent bg-clip-text bg-gradient-to-r from-primary to-purple-400">Arena</span>.
</h1>
<p class="text-lg text-text-secondary leading-relaxed mb-8">
Join 10,000+ others and level up your knowledge. Compete in daily challenges and earn rare rewards.
</p>
<div class="flex -space-x-4 rtl:space-x-reverse">
<img alt="User avatar" class="w-10 h-10 border-2 border-background-dark rounded-full object-cover" data-alt="User avatar of a smiling young woman" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCb2nrUSugTZl_eSfVS3rPMHlFR112GkXDtKpFAICHvr5FgajPKlDQJUbSg1NbTW4-5MrjTsgHFTRQxHjisqMhjKnebZq0EhJ7hv8k5rw74Zpcr7aLQTJS6r9DHpxmm1zeXnrkxWqneujfZfwcRTsSyYLPe3IXp1YkiTGq-dFvi1aH0ep31MtWTyQVahEU_c-_h4FhE8CQrU7UPqLrmUEV2a38ofB5ISEdzN_KQQ5Czj03XUonpSEbzd2d7ABI6GkycK0HUNjsE"/>
<img alt="User avatar" class="w-10 h-10 border-2 border-background-dark rounded-full object-cover" data-alt="User avatar of a young man with glasses" src="https://lh3.googleusercontent.com/aida-public/AB6AXuC7XX6UaXmjYgTQopZtAwhN3nS4aQpFCP96BPtMLGegdJxuJA8Hdl62Se8k_1J3yAlhwvMP-owLwjJD4uZ-su6dBvq97dSpYdCKYgRKGO8wVoxsVzXv4spnBrghZbUTsygtctHH0loNPOszYDBR8EV2duh2anfzOWm_r_wq_0W2bHyLcPt7AxWhj8nP5qnnoygAoKwpgpAxq3eGEmL5oMC2aQnJC80L5imRVhf8k8MniOGgf1Aw3edZXQRnAvV3iLWaXmhDK1bI"/>
<img alt="User avatar" class="w-10 h-10 border-2 border-background-dark rounded-full object-cover" data-alt="User avatar of a woman with curly hair" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCgYwczS-WlRxtsJ1SxNN4iutX3YAmG_3grDPdm_9YGRxFEv9O5YpVexSgG4Cixchau_Xsk1vivNBZm_IkWGRl_fxN65QrDLvpHR2YtXWKodnr2ADqt4jAr6EfDoLdkQDa8UHupypkD923zgv7oSJgWUn8Vxo9qOSxhYIkb7QsPhHDW3Dvt4x-01E_GAifCzAnWnd3b3Mgifqcx3sXVn5drVUWtOTkPA7f5DJk6VU1PjudGojZGp4pe8j9RjRmA_xv2-8XLJY52"/>
<div class="flex items-center justify-center w-10 h-10 text-xs font-medium text-white bg-primary border-2 border-background-dark rounded-full hover:bg-gray-600">
+9k
</div>
</div>
<p class="mt-3 text-sm text-text-secondary">Players currently online</p>
</div>
</div>
</div>
<!-- Right Side: Registration Form -->
<div class="w-full lg:w-7/12 xl:w-1/2 flex flex-col h-screen overflow-y-auto bg-background-dark relative">
<!-- Mobile Header (Visible only on small screens) -->
<div class="lg:hidden flex items-center justify-between p-6 border-b border-border-dark bg-background-dark sticky top-0 z-30">
<div class="flex items-center gap-3 text-white">
<span class="material-symbols-outlined text-primary">sports_esports</span>
<h2 class="text-white text-lg font-bold">QuizQuest</h2>
</div>
<a class="text-sm font-bold text-primary" href="#">Log In</a>
</div>
<div class="flex-1 flex flex-col justify-center px-6 py-8 sm:px-12 lg:px-20 xl:px-32 max-w-3xl mx-auto w-full">
<div class="mb-10 text-center lg:text-left">
<h2 class="text-3xl md:text-4xl font-bold text-white mb-3">Create Account</h2>
<p class="text-text-secondary">
Start your journey today.
<a class="text-primary hover:text-primary-hover font-semibold transition-colors ml-1 lg:hidden" href="#">Log in here</a>
<span class="hidden lg:inline">Already have an account? <a class="text-primary hover:text-primary-hover font-semibold transition-colors" href="#">Log in</a></span>
</p>
</div>
<!-- Social Login -->
<div class="grid grid-cols-2 gap-4 mb-8">
<button class="flex items-center justify-center gap-3 py-3 px-4 rounded-full border border-border-dark bg-surface-dark hover:bg-border-dark/50 text-white transition-all group">
<svg class="w-5 h-5 text-white group-hover:scale-110 transition-transform" fill="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"></path>
<path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"></path>
<path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"></path>
<path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"></path>
</svg>
<span class="font-medium text-sm">Google</span>
</button>
<button class="flex items-center justify-center gap-3 py-3 px-4 rounded-full border border-border-dark bg-surface-dark hover:bg-[#5865F2]/20 hover:border-[#5865F2]/50 text-white transition-all group">
<svg class="w-5 h-5 text-[#5865F2] group-hover:scale-110 transition-transform" fill="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.085 2.157 2.419 0 1.333-.956 2.419-2.157 2.419zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.085 2.157 2.419 0 1.333-.946 2.419-2.157 2.419z"></path>
</svg>
<span class="font-medium text-sm">Discord</span>
</button>
</div>
<div class="relative flex py-2 items-center mb-8">
<div class="flex-grow border-t border-border-dark"></div>
<span class="flex-shrink-0 mx-4 text-text-secondary text-sm">Or register with email</span>
<div class="flex-grow border-t border-border-dark"></div>
</div>
<!-- Registration Form -->
<form class="flex flex-col gap-5">
<!-- Full Name -->
<label class="group">
<span class="block text-sm font-medium text-text-secondary mb-2 group-focus-within:text-primary transition-colors">Full Name</span>
<div class="relative">
<div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none text-text-secondary group-focus-within:text-primary transition-colors">
<span class="material-symbols-outlined text-[20px]">person</span>
</div>
<input class="w-full h-12 pl-11 pr-4 bg-surface-dark border border-border-dark rounded-full text-white placeholder:text-gray-500 focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all text-base" placeholder="e.g. Player One" type="text"/>
</div>
</label>
<!-- Email -->
<label class="group">
<span class="block text-sm font-medium text-text-secondary mb-2 group-focus-within:text-primary transition-colors">Email Address</span>
<div class="relative">
<div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none text-text-secondary group-focus-within:text-primary transition-colors">
<span class="material-symbols-outlined text-[20px]">mail</span>
</div>
<input class="w-full h-12 pl-11 pr-4 bg-surface-dark border border-border-dark rounded-full text-white placeholder:text-gray-500 focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all text-base" placeholder="name@example.com" type="email"/>
</div>
</label>
<div class="grid grid-cols-1 md:grid-cols-2 gap-5">
<!-- Mobile -->
<label class="group">
<span class="block text-sm font-medium text-text-secondary mb-2 group-focus-within:text-primary transition-colors">Mobile Number</span>
<div class="relative">
<div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none text-text-secondary group-focus-within:text-primary transition-colors">
<span class="material-symbols-outlined text-[20px]">call</span>
</div>
<input class="w-full h-12 pl-11 pr-4 bg-surface-dark border border-border-dark rounded-full text-white placeholder:text-gray-500 focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all text-base" placeholder="+1 (555) 000-0000" type="tel"/>
</div>
</label>
<!-- Referral Code -->
<label class="group">
<span class="block text-sm font-medium text-text-secondary mb-2 group-focus-within:text-primary transition-colors">Referral Code <span class="text-xs text-gray-500 font-normal">(Optional)</span></span>
<div class="relative">
<div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none text-text-secondary group-focus-within:text-primary transition-colors">
<span class="material-symbols-outlined text-[20px]">redeem</span>
</div>
<input class="w-full h-12 pl-11 pr-4 bg-surface-dark border border-border-dark rounded-full text-white placeholder:text-gray-500 focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all text-base" placeholder="Enter code" type="text"/>
</div>
</label>
</div>
<!-- Password -->
<label class="group">
<span class="block text-sm font-medium text-text-secondary mb-2 group-focus-within:text-primary transition-colors">Password</span>
<div class="relative">
<div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none text-text-secondary group-focus-within:text-primary transition-colors">
<span class="material-symbols-outlined text-[20px]">lock</span>
</div>
<input class="w-full h-12 pl-11 pr-12 bg-surface-dark border border-border-dark rounded-full text-white placeholder:text-gray-500 focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all text-base" placeholder="Min. 8 characters" type="password"/>
<button class="absolute inset-y-0 right-0 pr-4 flex items-center text-text-secondary hover:text-white transition-colors cursor-pointer" type="button">
<span class="material-symbols-outlined text-[20px]">visibility_off</span>
</button>
</div>
</label>
<!-- Terms Checkbox -->
<div class="flex items-start gap-3 mt-2">
<div class="flex h-6 items-center">
<input class="h-5 w-5 rounded border-border-dark bg-surface-dark text-primary focus:ring-primary focus:ring-offset-background-dark" id="terms" name="terms" type="checkbox"/>
</div>
<div class="text-sm leading-6">
<label class="font-normal text-text-secondary" for="terms">I agree to the <a class="font-semibold text-primary hover:underline" href="#">Terms of Service</a> and <a class="font-semibold text-primary hover:underline" href="#">Privacy Policy</a>.</label>
</div>
</div>
<!-- Submit Button -->
<button class="mt-4 w-full h-14 bg-primary hover:bg-primary-hover text-white text-lg font-bold rounded-full shadow-lg transition-all transform active:scale-[0.98] animate-pulse-glow flex items-center justify-center gap-2 group" type="button">
<span>Start Your Quest</span>
<span class="material-symbols-outlined group-hover:translate-x-1 transition-transform">arrow_forward</span>
</button>
</form>
<div class="mt-8 text-center text-xs text-text-secondary">
<p>© 2024 QuizQuest Inc. All rights reserved.</p>
</div>
</div>
</div>
</div>
</body></html>