<!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>About QuizQuest - Our Mission</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,typography"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Outfit:wght@500;700;900&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet"/>
<script>
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
primary: "#7C3AED", // Violet-600
"primary-hover": "#6D28D9", // Violet-700
"accent-yellow": "#FACC15", // Yellow-400
"background-light": "#F3F4F6", // Gray-100
"background-dark": "#0F0720", // Very dark purple/black
"card-dark": "#1A1033", // Dark purple card bg
"card-light": "#FFFFFF",
"text-light": "#1F2937", // Gray-800
"text-dark": "#F3F4F6", // Gray-100
"glass-dark": "rgba(255, 255, 255, 0.05)",
},
fontFamily: {
sans: ["Inter", "sans-serif"],
display: ["Outfit", "sans-serif"],
},
backgroundImage: {
'hero-gradient': 'radial-gradient(circle at 50% 0%, rgba(124, 58, 237, 0.15) 0%, rgba(15, 7, 32, 0) 50%)',
'card-gradient': 'linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0) 100%)',
'glow': 'conic-gradient(from 180deg at 50% 50%, #2a8af6 0deg, #a853ba 180deg, #e92a67 360deg)',
}
},
},
};
</script>
<style>
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #111;
}
::-webkit-scrollbar-thumb {
background: #333;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}
.text-gradient {
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.glass-panel {
background: rgba(26, 16, 51, 0.6);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.08);
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark text-text-light dark:text-text-dark font-sans transition-colors duration-300 antialiased selection:bg-primary selection:text-white">
<nav class="fixed top-0 w-full z-50 backdrop-blur-md bg-white/70 dark:bg-background-dark/80 border-b border-gray-200 dark:border-white/10">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-20">
<div class="flex-shrink-0 flex items-center gap-2 cursor-pointer">
<div class="w-10 h-10 bg-primary rounded-xl flex items-center justify-center text-white shadow-lg shadow-primary/40">
<span class="material-icons-outlined text-2xl">sports_esports</span>
</div>
<span class="font-display font-bold text-xl tracking-tight text-gray-900 dark:text-white">QuizQuest</span>
</div>
<div class="hidden md:block">
<div class="ml-10 flex items-baseline space-x-8">
<a class="text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-primary transition-colors px-3 py-2 rounded-md text-sm font-medium" href="#">Home</a>
<a class="text-primary font-semibold px-3 py-2 rounded-md text-sm" href="#">About Us</a>
<a class="text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-primary transition-colors px-3 py-2 rounded-md text-sm font-medium" href="#">Prizes</a>
<a class="text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-primary transition-colors px-3 py-2 rounded-md text-sm font-medium" href="#">Leaderboard</a>
</div>
</div>
<div class="hidden md:flex items-center gap-4">
<button class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-white/10 transition-colors text-gray-600 dark:text-gray-300" onclick="document.documentElement.classList.toggle('dark')">
<span class="material-icons-outlined dark:hidden">dark_mode</span>
<span class="material-icons-outlined hidden dark:block">light_mode</span>
</button>
<a class="text-sm font-medium text-gray-600 dark:text-gray-300 hover:text-primary transition-colors" href="#">Login</a>
<a class="bg-primary hover:bg-primary-hover text-white px-6 py-2.5 rounded-full text-sm font-semibold transition-all transform hover:scale-105 shadow-lg shadow-primary/30" href="#">
Play Now
</a>
</div>
<div class="-mr-2 flex md:hidden">
<button class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none" type="button">
<span class="material-icons-outlined">menu</span>
</button>
</div>
</div>
</div>
</nav>
<section class="relative pt-32 pb-20 overflow-hidden">
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-full h-[600px] bg-hero-gradient pointer-events-none"></div>
<div class="absolute top-20 right-0 w-96 h-96 bg-purple-600/20 rounded-full blur-3xl pointer-events-none"></div>
<div class="absolute bottom-0 left-0 w-80 h-80 bg-blue-600/10 rounded-full blur-3xl pointer-events-none"></div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 text-center">
<div class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-primary/10 border border-primary/20 text-primary text-xs font-bold tracking-wider uppercase mb-8">
<span class="material-icons-outlined text-sm">rocket_launch</span>
Democratizing Rewards
</div>
<h1 class="font-display text-5xl sm:text-6xl lg:text-7xl font-bold leading-tight mb-8 text-gray-900 dark:text-white">
Rewarding <span class="bg-gradient-to-r from-primary via-purple-500 to-pink-500 text-transparent bg-clip-text">Pure Skill</span>.
<br/>Not Luck.
</h1>
<p class="text-lg sm:text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto leading-relaxed mb-12">
At QuizQuest, our mission is to build the world's most transparent skill-based gaming platform. We believe that knowledge is power, and that power should be rewarded instantly, securely, and fairly.
</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-5xl mx-auto mt-16">
<div class="glass-panel p-8 rounded-2xl text-center transform hover:scale-105 transition-transform duration-300 group">
<div class="w-16 h-16 mx-auto bg-gradient-to-br from-yellow-400 to-orange-500 rounded-2xl flex items-center justify-center text-white shadow-lg mb-4 group-hover:rotate-6 transition-transform">
<span class="material-icons-outlined text-3xl">emoji_events</span>
</div>
<div class="text-4xl font-display font-bold text-white mb-2">₹10Cr+</div>
<div class="text-sm text-gray-400 uppercase tracking-widest font-semibold">Rewards Distributed</div>
</div>
<div class="glass-panel p-8 rounded-2xl text-center transform hover:scale-105 transition-transform duration-300 group">
<div class="w-16 h-16 mx-auto bg-gradient-to-br from-blue-400 to-indigo-500 rounded-2xl flex items-center justify-center text-white shadow-lg mb-4 group-hover:rotate-6 transition-transform">
<span class="material-icons-outlined text-3xl">groups</span>
</div>
<div class="text-4xl font-display font-bold text-white mb-2">2M+</div>
<div class="text-sm text-gray-400 uppercase tracking-widest font-semibold">Active Quizzers</div>
</div>
<div class="glass-panel p-8 rounded-2xl text-center transform hover:scale-105 transition-transform duration-300 group">
<div class="w-16 h-16 mx-auto bg-gradient-to-br from-green-400 to-emerald-600 rounded-2xl flex items-center justify-center text-white shadow-lg mb-4 group-hover:rotate-6 transition-transform">
<span class="material-icons-outlined text-3xl">bolt</span>
</div>
<div class="text-4xl font-display font-bold text-white mb-2">500+</div>
<div class="text-sm text-gray-400 uppercase tracking-widest font-semibold">Daily Live Quizzes</div>
</div>
</div>
</div>
</section>
<section class="py-20 relative bg-gray-50 dark:bg-[#0B0518]">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="font-display text-4xl font-bold mb-4 text-gray-900 dark:text-white">The Quest Journey</h2>
<p class="text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">From a simple trivia bot to a global skill-gaming phenomenon.</p>
</div>
<div class="relative">
<div class="absolute left-1/2 transform -translate-x-1/2 h-full w-1 bg-gradient-to-b from-primary/0 via-primary/50 to-primary/0 hidden md:block"></div>
<div class="space-y-12 md:space-y-24">
<div class="relative flex flex-col md:flex-row items-center md:justify-between">
<div class="md:w-5/12 order-2 md:order-1 text-center md:text-right pr-0 md:pr-12">
<h3 class="text-2xl font-bold text-white mb-2">2021: The Inception</h3>
<p class="text-gray-400">Launched as a beta trivia app for college students. First prize pool was just ₹1000.</p>
</div>
<div class="absolute left-1/2 transform -translate-x-1/2 w-8 h-8 bg-primary rounded-full border-4 border-[#0B0518] z-10 hidden md:flex items-center justify-center shadow-[0_0_15px_rgba(124,58,237,0.8)]">
<div class="w-2 h-2 bg-white rounded-full"></div>
</div>
<div class="md:w-5/12 order-1 md:order-3 pl-0 md:pl-12 mb-6 md:mb-0">
<div class="glass-panel p-2 rounded-xl inline-block">
<span class="material-icons-outlined text-4xl text-purple-400 p-2">lightbulb</span>
</div>
</div>
</div>
<div class="relative flex flex-col md:flex-row items-center md:justify-between">
<div class="md:w-5/12 order-1 md:order-1 text-center md:text-right pr-0 md:pr-12 mb-6 md:mb-0">
<div class="glass-panel p-2 rounded-xl inline-block">
<span class="material-icons-outlined text-4xl text-blue-400 p-2">trending_up</span>
</div>
</div>
<div class="absolute left-1/2 transform -translate-x-1/2 w-8 h-8 bg-blue-500 rounded-full border-4 border-[#0B0518] z-10 hidden md:flex items-center justify-center shadow-[0_0_15px_rgba(59,130,246,0.8)]">
<div class="w-2 h-2 bg-white rounded-full"></div>
</div>
<div class="md:w-5/12 order-2 md:order-3 text-center md:text-left pl-0 md:pl-12">
<h3 class="text-2xl font-bold text-white mb-2">2022: Rapid Growth</h3>
<p class="text-gray-400">Reached 100k users. Introduced instant payouts and multi-category quizzes.</p>
</div>
</div>
<div class="relative flex flex-col md:flex-row items-center md:justify-between">
<div class="md:w-5/12 order-2 md:order-1 text-center md:text-right pr-0 md:pr-12">
<h3 class="text-2xl font-bold text-white mb-2">2023: Global Stage</h3>
<p class="text-gray-400">Expanded to 5 countries. Partnered with major brands for sponsored Mega Quests.</p>
</div>
<div class="absolute left-1/2 transform -translate-x-1/2 w-8 h-8 bg-pink-500 rounded-full border-4 border-[#0B0518] z-10 hidden md:flex items-center justify-center shadow-[0_0_15px_rgba(236,72,153,0.8)]">
<div class="w-2 h-2 bg-white rounded-full"></div>
</div>
<div class="md:w-5/12 order-1 md:order-3 pl-0 md:pl-12 mb-6 md:mb-0">
<div class="glass-panel p-2 rounded-xl inline-block">
<span class="material-icons-outlined text-4xl text-pink-400 p-2">public</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="py-20 bg-background-light dark:bg-background-dark relative overflow-hidden">
<div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/cubes.png')] opacity-5"></div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<div class="grid lg:grid-cols-2 gap-16 items-center">
<div>
<h2 class="font-display text-4xl font-bold mb-6 text-gray-900 dark:text-white">
Built on <span class="text-primary">Trust</span> & <br/>Unbreakable Security
</h2>
<p class="text-gray-600 dark:text-gray-400 text-lg mb-8 leading-relaxed">
We take fair play seriously. Our platform is engineered with state-of-the-art security measures to ensure that every win is legitimate and every payout is instant.
</p>
<div class="space-y-6">
<div class="flex gap-4">
<div class="w-12 h-12 rounded-full bg-green-500/10 flex items-center justify-center flex-shrink-0">
<span class="material-icons-outlined text-green-500">verified_user</span>
</div>
<div>
<h4 class="text-xl font-bold text-gray-900 dark:text-white mb-1">Secure Payments</h4>
<p class="text-gray-500 text-sm">PCI-DSS compliant payment gateways with instant withdrawal processing.</p>
</div>
</div>
<div class="flex gap-4">
<div class="w-12 h-12 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0">
<span class="material-icons-outlined text-red-500">gavel</span>
</div>
<div>
<h4 class="text-xl font-bold text-gray-900 dark:text-white mb-1">Anti-Cheat System</h4>
<p class="text-gray-500 text-sm">AI-driven behavior analysis detects and bans bot activity instantly.</p>
</div>
</div>
<div class="flex gap-4">
<div class="w-12 h-12 rounded-full bg-blue-500/10 flex items-center justify-center flex-shrink-0">
<span class="material-icons-outlined text-blue-500">visibility</span>
</div>
<div>
<h4 class="text-xl font-bold text-gray-900 dark:text-white mb-1">100% Transparency</h4>
<p class="text-gray-500 text-sm">Public ledgers for all prize distributions and winner announcements.</p>
</div>
</div>
</div>
</div>
<div class="relative">
<div class="absolute -inset-4 bg-gradient-to-r from-primary to-purple-600 rounded-2xl blur-lg opacity-40 animate-pulse"></div>
<div class="glass-panel p-8 rounded-2xl border border-white/10 relative overflow-hidden">
<div class="absolute top-0 right-0 -mr-16 -mt-16 w-64 h-64 bg-primary/20 rounded-full blur-3xl"></div>
<div class="text-center mb-8">
<span class="material-icons-outlined text-6xl text-white/80 mb-4">shield</span>
<h3 class="text-2xl font-bold text-white">Fair Play Guarantee</h3>
</div>
<div class="space-y-4">
<div class="bg-black/40 rounded-lg p-4 flex items-center justify-between border border-white/5">
<span class="text-gray-400 text-sm">RNG Certification</span>
<span class="text-green-400 text-xs font-bold px-2 py-1 bg-green-900/30 rounded">VERIFIED</span>
</div>
<div class="bg-black/40 rounded-lg p-4 flex items-center justify-between border border-white/5">
<span class="text-gray-400 text-sm">Data Encryption</span>
<span class="text-green-400 text-xs font-bold px-2 py-1 bg-green-900/30 rounded">AES-256</span>
</div>
<div class="bg-black/40 rounded-lg p-4 flex items-center justify-between border border-white/5">
<span class="text-gray-400 text-sm">Fraud Detection</span>
<span class="text-green-400 text-xs font-bold px-2 py-1 bg-green-900/30 rounded">ACTIVE</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="py-20 bg-[#080412]">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="font-display text-4xl font-bold mb-4 text-white">Our Core Values</h2>
<div class="w-24 h-1 bg-primary mx-auto rounded-full"></div>
</div>
<div class="grid md:grid-cols-3 gap-8">
<div class="bg-card-dark rounded-2xl p-8 border border-white/5 hover:border-primary/40 transition-all duration-300 group">
<div class="w-16 h-16 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-xl mb-6 shadow-lg transform group-hover:-translate-y-2 transition-transform flex items-center justify-center">
<span class="material-icons-outlined text-3xl text-white">psychology</span>
</div>
<h3 class="text-xl font-bold text-white mb-3">Skill First</h3>
<p class="text-gray-400 text-sm leading-relaxed">
We design every quest to test genuine knowledge and speed, ensuring skill is the only differentiator.
</p>
</div>
<div class="bg-card-dark rounded-2xl p-8 border border-white/5 hover:border-primary/40 transition-all duration-300 group">
<div class="w-16 h-16 bg-gradient-to-br from-pink-500 to-rose-600 rounded-xl mb-6 shadow-lg transform group-hover:-translate-y-2 transition-transform flex items-center justify-center">
<span class="material-icons-outlined text-3xl text-white">favorite</span>
</div>
<h3 class="text-xl font-bold text-white mb-3">Community Obsessed</h3>
<p class="text-gray-400 text-sm leading-relaxed">
Our players are our heartbeat. We build features based on feedback and celebrate every winner.
</p>
</div>
<div class="bg-card-dark rounded-2xl p-8 border border-white/5 hover:border-primary/40 transition-all duration-300 group">
<div class="w-16 h-16 bg-gradient-to-br from-cyan-500 to-blue-600 rounded-xl mb-6 shadow-lg transform group-hover:-translate-y-2 transition-transform flex items-center justify-center">
<span class="material-icons-outlined text-3xl text-white">rocket</span>
</div>
<h3 class="text-xl font-bold text-white mb-3">Innovation</h3>
<p class="text-gray-400 text-sm leading-relaxed">
We constantly push boundaries with new game modes, AR quizzes, and real-time interactive experiences.
</p>
</div>
</div>
</div>
</section>
<section class="py-24 relative overflow-hidden">
<div class="absolute inset-0 bg-primary/10"></div>
<div class="absolute -top-40 -right-40 w-96 h-96 bg-primary/20 rounded-full blur-[100px]"></div>
<div class="absolute -bottom-40 -left-40 w-96 h-96 bg-accent-yellow/10 rounded-full blur-[100px]"></div>
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 text-center">
<h2 class="font-display text-4xl sm:text-5xl font-bold text-white mb-6">Join the Community</h2>
<p class="text-xl text-gray-400 mb-10 max-w-2xl mx-auto">
Connect with fellow quizzers, get exclusive hints, and participate in community-only tournaments.
</p>
<div class="flex flex-wrap justify-center gap-4">
<a class="flex items-center gap-3 px-8 py-4 bg-[#5865F2] hover:bg-[#4752C4] text-white rounded-xl font-bold transition-all transform hover:scale-105 shadow-lg shadow-indigo-500/20" href="#">
<span class="material-icons-outlined">discord</span>
<span>Discord Server</span>
</a>
<a class="flex items-center gap-3 px-8 py-4 bg-[#1DA1F2] hover:bg-[#1A91DA] text-white rounded-xl font-bold transition-all transform hover:scale-105 shadow-lg shadow-blue-500/20" href="#">
<span class="material-icons-outlined">chat</span>
<span>Telegram Group</span>
</a>
<a class="flex items-center gap-3 px-8 py-4 bg-gradient-to-r from-pink-500 to-orange-500 hover:opacity-90 text-white rounded-xl font-bold transition-all transform hover:scale-105 shadow-lg shadow-pink-500/20" href="#">
<span class="material-icons-outlined">photo_camera</span>
<span>Instagram</span>
</a>
</div>
</div>
</section>
<footer class="bg-white dark:bg-[#080412] border-t border-gray-200 dark:border-white/5 py-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
<div class="col-span-1 md:col-span-2">
<div class="flex items-center gap-2 mb-4">
<div class="w-8 h-8 bg-primary rounded-lg flex items-center justify-center text-white">
<span class="material-icons-outlined text-lg">sports_esports</span>
</div>
<span class="font-display font-bold text-xl tracking-tight text-gray-900 dark:text-white">QuizQuest</span>
</div>
<p class="text-gray-500 dark:text-gray-400 text-sm max-w-xs">
The ultimate destination for trivia lovers. Play, compete, and win big rewards daily.
</p>
</div>
<div>
<h4 class="font-bold text-gray-900 dark:text-white mb-4">Platform</h4>
<ul class="space-y-2 text-sm text-gray-500 dark:text-gray-400">
<li><a class="hover:text-primary transition-colors" href="#">How it Works</a></li>
<li><a class="hover:text-primary transition-colors" href="#">Pricing</a></li>
<li><a class="hover:text-primary transition-colors" href="#">Leaderboard</a></li>
</ul>
</div>
<div>
<h4 class="font-bold text-gray-900 dark:text-white mb-4">Support</h4>
<ul class="space-y-2 text-sm text-gray-500 dark:text-gray-400">
<li><a class="hover:text-primary transition-colors" href="#">FAQ</a></li>
<li><a class="hover:text-primary transition-colors" href="#">Terms of Service</a></li>
<li><a class="hover:text-primary transition-colors" href="#">Privacy Policy</a></li>
</ul>
</div>
</div>
<div class="pt-8 border-t border-gray-200 dark:border-white/5 flex flex-col md:flex-row items-center justify-between gap-4">
<div class="text-sm text-gray-500 dark:text-gray-400">
© 2023 QuizQuest Inc. All rights reserved.
</div>
<div class="flex items-center gap-6">
<a class="text-gray-400 hover:text-white transition-colors" href="#"><span class="material-icons-outlined">facebook</span></a>
<a class="text-gray-400 hover:text-white transition-colors" href="#"><span class="material-icons-outlined">smart_display</span></a>
<a class="text-gray-400 hover:text-white transition-colors" href="#"><span class="material-icons-outlined">alternate_email</span></a>
</div>
</div>
</div>
</footer>
</body></html>