UnknownProbably/undefined
1
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>About - RevQ</title>7 <script src="https://cdn.tailwindcss.com"></script>8 <script src="https://unpkg.com/feather-icons"></script>9 <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>10 <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">11 <script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js"></script>12<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>13 <script>14 // Initialize AOS animations15 document.addEventListener('DOMContentLoaded', function() {16 AOS.init({17 duration: 800,18 easing: 'ease-in-out-quad',19 once: true,20 offset: 12021 });22 });23 24 tailwind.config = {25theme: {26 extend: {27 colors: {28 primary: {29 500: '#6366f1',30 },31 secondary: {32 500: '#f43f5e',33 }34 }35 }36 }37 }38 </script>39</head>40<body class="bg-gray-900 min-h-screen text-gray-200 overflow-x-hidden">41 <div id="crystal-scene" class="fixed inset-0 pointer-events-none z-0">42 <div data-depth="0.1" class="absolute top-20 left-10 w-16 h-16 opacity-30">43 <div class="crystal crystal-1"></div>44 </div>45 <div data-depth="0.2" class="absolute top-1/3 right-20 w-12 h-12 opacity-40">46 <div class="crystal crystal-2"></div>47 </div>48 <div data-depth="0.3" class="absolute bottom-20 left-1/4 w-14 h-14 opacity-30">49 <div class="crystal crystal-3"></div>50 </div>51 <div data-depth="0.15" class="absolute bottom-1/3 right-1/3 w-10 h-10 opacity-35">52 <div class="crystal crystal-4"></div>53 </div>54 </div>55<nav class="bg-gray-800 shadow-sm py-3 px-6 rounded-full max-w-6xl mx-auto mt-6 sticky top-6 z-50 border border-gray-700 backdrop-blur-sm bg-opacity-80">56 <div class="max-w-6xl mx-auto flex justify-between items-center">57 <div class="flex items-center space-x-2">58 <div class="flex items-center space-x-2">59 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="text-primary-500">60 <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>61 <path d="M8 14C8 14 9.5 16 12 16C14.5 16 16 14 16 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>62 <path d="M15 9H15.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>63 <path d="M9 9H9.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>64 <path d="M12 12V14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>65 <path d="M12 2L12 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>66 <path d="M19 5L17 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>67 <path d="M5 5L7 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>68 </svg>69 <h1 class="text-xl font-bold text-white">RevQ</h1>70 </div>71 </div>72 <div class="hidden md:flex space-x-6">73 <a href="index.html" class="text-gray-300 hover:text-primary-500">Home</a>74 <a href="courses.html" class="text-gray-300 hover:text-primary-500">Courses</a>75 <a href="leaderboard.html" class="text-gray-300 hover:text-primary-500">Leaderboard</a>76 <a href="about.html" class="text-primary-500">About</a>77 </div>78 <div class="flex items-center space-x-4">79 <button class="px-4 py-2 rounded-full text-primary-500 border border-primary-500 hover:bg-primary-500 hover:text-white transition">Login</button>80 <button class="px-4 py-2 rounded-full bg-primary-500 text-white hover:bg-primary-600 transition">Sign Up</button>81 <button class="md:hidden">82 <i data-feather="menu"></i>83 </button>84 </div>85 </div>86 </nav>87 88 <section class="py-16 px-6">89 <div class="max-w-6xl mx-auto">90 <div class="grid md:grid-cols-2 gap-12 items-center mb-16" data-aos="fade-up">91<div>92 <h1 class="text-4xl font-bold text-white mb-4">About <span class="text-primary-500">RevQ</span></h1>93 <p class="text-lg text-gray-300 mb-6">RevQ is a gamified learning platform designed to make education engaging, rewarding, and effective through interactive challenges, experience points, and friendly competition.</p>94 <p class="text-gray-300 mb-6">Our mission is to transform learning from a passive activity into an exciting journey where every achievement is celebrated and every learner can track their progress.</p>95 <div class="flex space-x-4">96 <button class="px-6 py-3 rounded-full bg-primary-500 text-white hover:bg-primary-600 transition font-medium">Join Our Community</button>97 </div>98 </div>99 <div class="relative">100 <img src="http://static.photos/education/1024x576/1" alt="Learning together" class="rounded-xl w-full border border-gray-700">101 </div>102 </div>103 <div class="bg-gray-800/50 rounded-xl p-8 border border-gray-700 backdrop-blur-sm" data-aos="fade-up" data-aos-delay="100">104<h2 class="text-3xl font-bold text-center text-white mb-8">Our <span class="text-primary-500">Team</span></h2>105 106 <div class="grid md:grid-cols-3 gap-8">107 <!-- Team Member 1 -->108 <div class="bg-gray-700/50 rounded-xl p-6 text-center hover:bg-gray-600/80 transition border border-gray-600/30" data-aos="fade-up" data-aos-delay="200">109<img src="http://static.photos/people/200x200/4" alt="Team member" class="w-32 h-32 rounded-full mx-auto mb-4 border-2 border-primary-500">110 <h3 class="text-xl font-bold text-white mb-2">Alex Johnson</h3>111 <p class="text-primary-500 mb-4">Founder & CEO</p>112 <p class="text-gray-300">Education technology enthusiast with 10+ years experience in gamification.</p>113 </div>114 115 <!-- Team Member 2 -->116 <div class="bg-gray-700/50 rounded-xl p-6 text-center hover:bg-gray-600/80 transition border border-gray-600/30" data-aos="fade-up" data-aos-delay="300">117<img src="http://static.photos/people/200x200/5" alt="Team member" class="w-32 h-32 rounded-full mx-auto mb-4 border-2 border-primary-500">118 <h3 class="text-xl font-bold text-white mb-2">Sam Lee</h3>119 <p class="text-primary-500 mb-4">CTO</p>120 <p class="text-gray-300">Full-stack developer passionate about creating engaging learning experiences.</p>121 </div>122 123 <!-- Team Member 3 -->124 <div class="bg-gray-700/50 rounded-xl p-6 text-center hover:bg-gray-600/80 transition border border-gray-600/30" data-aos="fade-up" data-aos-delay="400">125<img src="http://static.photos/people/200x200/6" alt="Team member" class="w-32 h-32 rounded-full mx-auto mb-4 border-2 border-primary-500">126 <h3 class="text-xl font-bold text-white mb-2">Maria Garcia</h3>127 <p class="text-primary-500 mb-4">Head of Content</p>128 <p class="text-gray-300">Former educator dedicated to creating high-quality learning materials.</p>129 </div>130 </div>131 </div>132 </div>133 </section>134 135 <footer class="bg-gray-900 text-white py-12 px-6 border-t border-gray-700">136 <div class="max-w-6xl mx-auto grid md:grid-cols-4 gap-8">137 <div>138 <div class="flex items-center space-x-2 mb-4">139 <i data-feather="award" class="text-primary-500"></i>140 <h3 class="text-xl font-bold">RevQ</h3>141 </div>142 <p class="text-gray-300">Making learning fun, engaging, and rewarding through gamification.</p>143 </div>144 <div>145 <h4 class="text-lg font-semibold mb-4">Explore</h4>146 <ul class="space-y-2">147 <li><a href="index.html" class="text-gray-300 hover:text-white transition">Home</a></li>148 <li><a href="courses.html" class="text-gray-300 hover:text-white transition">Courses</a></li>149 <li><a href="leaderboard.html" class="text-gray-300 hover:text-white transition">Leaderboard</a></li>150 <li><a href="about.html" class="text-gray-300 hover:text-white transition">About</a></li>151 </ul>152 </div>153 <!-- Rest of footer same as index.html -->154 </div>155 </footer>156 <script>157 // Show loading screen before page fully loads158 window.addEventListener('load', function() {159 setTimeout(function() {160 document.querySelector('.loader-wrapper').style.display = 'none';161 }, 500);162 });163 feather.replace();164 165 // Initialize parallax scene for floating crystals166 const crystalScene = document.getElementById('crystal-scene');167 if (crystalScene) {168 new Parallax(crystalScene, {169 relativeInput: true,170 clipRelativeInput: true,171 hoverOnly: true172 });173 }174 175 // Add random floating animation176 document.querySelectorAll('.crystal').forEach(crystal => {177 const duration = Math.random() * 15 + 10;178 const delay = Math.random() * 5;179 crystal.style.animation = `float ${duration}s ease-in-out ${delay}s infinite alternate`;180 });181// Additional scroll animations for images182 const images = document.querySelectorAll('img');183 images.forEach(img => {184 img.setAttribute('data-aos', 'zoom-in');185 img.setAttribute('data-aos-delay', Math.floor(Math.random() * 300) + 100);186 });187</script>188 <!-- Loading screen wrapper -->189 <div class="loader-wrapper fixed inset-0 bg-gray-900 z-50 flex items-center justify-center">190 <div class="text-center">191 <div class="animate-spin rounded-full h-16 w-16 border-t-4 border-b-4 border-primary-500 mx-auto mb-4"></div>192 <p class="text-white">Loading...</p>193 </div>194 </div>195 </body>196</html>