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>RevQ - Gamified Learning Platform</title>7 <script src="https://cdn.tailwindcss.com"></script>8 <script src="https://unpkg.com/feather-icons"></script>9 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>10 <script>11 tailwind.config = {12 theme: {13 extend: {14 colors: {15 primary: {16 500: '#6366f1',17 },18 secondary: {19 500: '#f43f5e',20 }21 }22 }23 }24 }25 </script>26</head>27<body class="min-h-screen text-gray-200" style="background: radial-gradient(circle at center, #0f172a 0%, #1e293b 50%, #0f172a 100%);">28<!-- Navigation -->29 <nav class="bg-gray-800/80 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">30<div class="max-w-6xl mx-auto flex justify-between items-center">31 <div class="flex items-center space-x-2">32 <div class="flex items-center space-x-2">33 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="text-primary-500">34 <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"/>35 <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"/>36 <path d="M15 9H15.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>37 <path d="M9 9H9.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>38 <path d="M12 12V14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>39 <path d="M12 2L12 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>40 <path d="M19 5L17 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>41 <path d="M5 5L7 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>42 </svg>43 <h1 class="text-xl font-bold text-white">RevQ</h1>44 </div>45</div>46 <div class="hidden md:flex space-x-6">47 <a href="index.html" class="text-primary-500">Home</a>48 <a href="courses.html" class="text-gray-300 hover:text-primary-500">Courses</a>49 <a href="leaderboard.html" class="text-gray-300 hover:text-primary-500">Leaderboard</a>50 <a href="about.html" class="text-gray-300 hover:text-primary-500">About</a>51</div>52<div class="flex items-center space-x-4">53 <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>54 <button class="px-4 py-2 rounded-full bg-primary-500 text-white hover:bg-primary-600 transition">Sign Up</button>55<button class="md:hidden">56 <i data-feather="menu"></i>57 </button>58 </div>59 </div>60 </nav>61 <!-- Hero Section -->62 <section class="py-16 px-6">63 <div class="max-w-6xl mx-auto grid md:grid-cols-2 gap-12 items-center">64 <div class="text-center md:text-left md:ml-16">65 <h1 class="text-4xl md:text-5xl font-bold text-white mb-4">Learning, gamified. <span class="text-primary-500">For real this time.</span></h1>66 <p class="text-lg text-gray-300 mb-8">Master new skills through interactive quizzes, challenges, and gamified learning experiences.</p>67<div class="flex space-x-4">68 <button class="px-6 py-3 rounded-full bg-primary-500 text-white hover:bg-primary-600 transition font-medium">Start Learning</button>69 <button class="px-6 py-3 rounded-full border border-gray-300 text-gray-700 hover:bg-gray-100 transition font-medium">How It Works</button>70</div>71 </div>72 <div class="relative">73 </div>74 </div>75 </section>76<!-- What Sets RevQ Apart Header -->77 <section class="py-16 px-6 relative overflow-hidden">78 <div class="max-w-6xl mx-auto text-center">79 <h2 class="text-3xl font-bold text-white mb-4">What Sets <span class="text-primary-500">RevQ</span> Apart</h2>80 <p class="text-lg text-gray-300 max-w-3xl mx-auto">Discover the unique features that make RevQ the most engaging learning platform available today</p>81 </div>82 </section>83 84 <!-- XP Grinds Section -->85 <section class="py-16 px-6 bg-gray-800/30 backdrop-blur-sm">86<div class="max-w-6xl mx-auto grid md:grid-cols-2 gap-12 items-center">87 <div class="md:order-1">88 <div class="text-primary-500 mb-4">89 <i data-feather="bar-chart-2" class="w-16 h-16"></i>90 </div>91 <h3 class="text-2xl font-bold text-white mb-4">XP Grinds & Level Progression</h3>92 <p class="text-gray-300 mb-6">Our experience point system rewards every learning milestone. Earn XP for:</p>93 <ul class="space-y-3 mb-6">94 <li class="flex items-start">95 <i data-feather="check" class="text-green-500 mr-2 mt-1 flex-shrink-0"></i>96 <span class="text-gray-300">Completing quizzes and challenges</span>97 </li>98 <li class="flex items-start">99 <i data-feather="check" class="text-green-500 mr-2 mt-1 flex-shrink-0"></i>100 <span class="text-gray-300">Achieving high scores</span>101 </li>102 <li class="flex items-start">103 <i data-feather="check" class="text-green-500 mr-2 mt-1 flex-shrink-0"></i>104 <span class="text-gray-300">Daily streaks and consistency</span>105 </li>106 </ul>107 <button class="px-6 py-3 rounded-full bg-primary-500 text-white hover:bg-primary-600 transition font-medium">Learn About XP System</button>108 </div>109 <div class="md:order-2">110 <img src="http://static.photos/technology/640x360/1" alt="XP system visualization" class="rounded-xl w-full border border-gray-700 shadow-lg">111 </div>112 </div>113 </section>114 115 <!-- Customizability Section -->116 <section class="py-16 px-6 bg-gray-900/50 backdrop-blur-sm">117<div class="max-w-6xl mx-auto grid md:grid-cols-2 gap-12 items-center">118 <div>119 <img src="http://static.photos/education/640x360/2" alt="Customizable learning" class="rounded-xl w-full border border-gray-700 shadow-lg">120 </div>121 <div>122 <div class="text-primary-500 mb-4">123 <i data-feather="sliders" class="w-16 h-16"></i>124 </div>125 <h3 class="text-2xl font-bold text-white mb-4">Fully Customizable Learning</h3>126 <p class="text-gray-300 mb-6">Tailor your learning experience exactly how you need it:</p>127 <div class="grid grid-cols-2 gap-4 mb-6">128 <div class="bg-gray-800/50 p-4 rounded-lg">129 <i data-feather="book" class="text-primary-500 mb-2"></i>130 <p class="text-gray-300">Adjust quiz difficulty</p>131 </div>132 <div class="bg-gray-800/50 p-4 rounded-lg">133 <i data-feather="clock" class="text-primary-500 mb-2"></i>134 <p class="text-gray-300">Set time limits</p>135 </div>136 <div class="bg-gray-800/50 p-4 rounded-lg">137 <i data-feather="filter" class="text-primary-500 mb-2"></i>138 <p class="text-gray-300">Focus on weak areas</p>139 </div>140 <div class="bg-gray-800/50 p-4 rounded-lg">141 <i data-feather="bookmark" class="text-primary-500 mb-2"></i>142 <p class="text-gray-300">Save custom presets</p>143 </div>144 </div>145 <button class="px-6 py-3 rounded-full border border-primary-500 text-primary-500 hover:bg-primary-500/10 transition font-medium">See Customization Options</button>146 </div>147 </div>148 </section>149 150 <!-- Leaderboards Section -->151 <section class="py-16 px-6 bg-gray-800/30 backdrop-blur-sm">152<div class="max-w-6xl mx-auto text-center">153 <div class="text-primary-500 mb-4 mx-auto">154 <i data-feather="award" class="w-16 h-16 mx-auto"></i>155 </div>156 <h3 class="text-2xl font-bold text-white mb-4">Competitive Leaderboards</h3>157 <p class="text-gray-300 max-w-3xl mx-auto mb-8">Challenge yourself against other learners in our dynamic ranking system that tracks:</p>158 <div class="grid md:grid-cols-3 gap-8 mb-12">159 <div class="bg-gray-700/50 p-6 rounded-xl border border-gray-600/30">160 <h4 class="text-xl font-bold text-white mb-3">Weekly Rankings</h4>161 <p class="text-gray-300">Compete in short-term challenges with weekly resets</p>162 </div>163 <div class="bg-gray-700/50 p-6 rounded-xl border border-gray-600/30">164 <h4 class="text-xl font-bold text-white mb-3">Subject Masters</h4>165 <p class="text-gray-300">Specialized boards for each learning category</p>166 </div>167 <div class="bg-gray-700/50 p-6 rounded-xl border border-gray-600/30">168 <h4 class="text-xl font-bold text-white mb-3">Friend Challenges</h4>169 <p class="text-gray-300">Private competitions with your study group</p>170 </div>171 </div>172 <button class="px-6 py-3 rounded-full bg-primary-500 text-white hover:bg-primary-600 transition font-medium">View Leaderboards</button>173 </div>174 </section>175 176 <!-- Daily Challenges Section -->177 <section class="py-16 px-6 bg-gray-900/50 backdrop-blur-sm">178<div class="max-w-6xl mx-auto grid md:grid-cols-2 gap-12 items-center">179 <div class="md:order-1">180 <div class="text-primary-500 mb-4">181 <i data-feather="clock" class="w-16 h-16"></i>182 </div>183 <h3 class="text-2xl font-bold text-white mb-4">Daily Challenges</h3>184 <p class="text-gray-300 mb-6">Never run out of learning material with our rotating daily content:</p>185 <div class="flex items-start space-x-4 mb-6">186 <div class="bg-primary-500/10 p-3 rounded-lg">187 <div class="text-primary-500 font-bold text-center">24h</div>188 </div>189 <p class="text-gray-300 flex-1">Fresh challenges appear every 24 hours with bonus XP for early completion</p>190 </div>191 <div class="flex items-start space-x-4 mb-6">192 <div class="bg-primary-500/10 p-3 rounded-lg">193 <div class="text-primary-500 font-bold text-center">7d</div>194 </div>195 <p class="text-gray-300 flex-1">Weekly streak bonuses for consecutive days of completion</p>196 </div>197 <div class="flex items-start space-x-4 mb-6">198 <div class="bg-primary-500/10 p-3 rounded-lg">199 <div class="text-primary-500 font-bold">🏆</div>200 </div>201 <p class="text-gray-300 flex-1">Exclusive achievements only available through daily challenges</p>202 </div>203 </div>204 <div class="md:order-2">205 <img src="http://static.photos/office/640x360/1" alt="Daily challenges" class="rounded-xl w-full border border-gray-700 shadow-lg">206 </div>207 </div>208 </section>209 210 <!-- Community Learning Section -->211 <section class="py-16 px-6 bg-gray-800/30 backdrop-blur-sm">212<div class="max-w-6xl mx-auto text-center">213 <div class="text-primary-500 mb-4 mx-auto">214 <i data-feather="users" class="w-16 h-16 mx-auto"></i>215 </div>216 <h3 class="text-2xl font-bold text-white mb-4">Community Learning</h3>217 <p class="text-gray-300 max-w-3xl mx-auto mb-8">Join thousands of learners collaborating and competing together</p>218 219 <div class="grid md:grid-cols-3 gap-8 mb-12">220 <div class="bg-gray-700/50 p-6 rounded-xl border border-gray-600/30">221 <h4 class="text-xl font-bold text-white mb-3">Study Groups</h4>222 <p class="text-gray-300 mb-4">Form or join groups focused on specific subjects</p>223 <div class="flex justify-center space-x-2">224 <div class="w-8 h-8 rounded-full bg-primary-500/20 border border-primary-500"></div>225 <div class="w-8 h-8 rounded-full bg-primary-500/20 border border-primary-500"></div>226 <div class="w-8 h-8 rounded-full bg-primary-500/20 border border-primary-500"></div>227 <div class="w-8 h-8 rounded-full bg-primary-500/20 border border-primary-500">+</div>228 </div>229 </div>230 <div class="bg-gray-700/50 p-6 rounded-xl border border-gray-600/30">231 <h4 class="text-xl font-bold text-white mb-3">Shared Progress</h4>232 <p class="text-gray-300 mb-4">Compare your learning journey with peers</p>233 <div class="h-2 bg-gray-600 rounded-full mb-2">234 <div class="h-2 bg-primary-500 rounded-full" style="width: 70%"></div>235 </div>236 <div class="h-2 bg-gray-600 rounded-full mb-2">237 <div class="h-2 bg-primary-500 rounded-full" style="width: 45%"></div>238 </div>239 <div class="h-2 bg-gray-600 rounded-full">240 <div class="h-2 bg-primary-500 rounded-full" style="width: 85%"></div>241 </div>242 </div>243 <div class="bg-gray-700/50 p-6 rounded-xl border border-gray-600/30">244 <h4 class="text-xl font-bold text-white mb-3">Group Challenges</h4>245 <p class="text-gray-300 mb-4">Collaborate to solve complex problems together</p>246 <div class="flex justify-center">247 <div class="relative">248 <i data-feather="message-square" class="w-10 h-10 text-primary-500"></i>249 <div class="absolute -top-1 -right-1 bg-secondary-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">3</div>250 </div>251 </div>252 </div>253 </div>254 <button class="px-6 py-3 rounded-full border border-primary-500 text-primary-500 hover:bg-primary-500/10 transition font-medium">Explore Community Features</button>255 </div>256 </section>257 258 <!-- Progress Tracking Section -->259 <section class="py-16 px-6 bg-gray-900/50 backdrop-blur-sm">260<div class="max-w-6xl mx-auto grid md:grid-cols-2 gap-12 items-center">261 <div>262 <img src="http://static.photos/technology/640x360/3" alt="Progress analytics" class="rounded-xl w-full border border-gray-700 shadow-lg">263 </div>264 <div>265 <div class="text-primary-500 mb-4">266 <i data-feather="trending-up" class="w-16 h-16"></i>267 </div>268 <h3 class="text-2xl font-bold text-white mb-4">Comprehensive Progress Tracking</h3>269 <p class="text-gray-300 mb-6">Get detailed insights into your learning patterns and improvement</p>270 271 <div class="space-y-4 mb-6">272 <div>273 <div class="flex justify-between mb-1">274 <span class="text-gray-300">JavaScript</span>275 <span class="text-primary-500">85%</span>276 </div>277 <div class="h-2 bg-gray-700 rounded-full">278 <div class="h-2 bg-primary-500 rounded-full" style="width: 85%"></div>279 </div>280 </div>281 <div>282 <div class="flex justify-between mb-1">283 <span class="text-gray-300">Data Science</span>284 <span class="text-primary-500">63%</span>285 </div>286 <div class="h-2 bg-gray-700 rounded-full">287 <div class="h-2 bg-primary-500 rounded-full" style="width: 63%"></div>288 </div>289 </div>290 <div>291 <div class="flex justify-between mb-1">292 <span class="text-gray-300">Algorithms</span>293 <span class="text-primary-500">42%</span>294 </div>295 <div class="h-2 bg-gray-700 rounded-full">296 <div class="h-2 bg-primary-500 rounded-full" style="width: 42%"></div>297 </div>298 </div>299 </div>300 301 <div class="flex space-x-4">302 <button class="px-6 py-3 rounded-full bg-primary-500 text-white hover:bg-primary-600 transition font-medium">View My Analytics</button>303 <button class="px-6 py-3 rounded-full border border-primary-500 text-primary-500 hover:bg-primary-500/10 transition font-medium">Download Report</button>304 </div>305 </div>306 </div>307 </section>308<!-- Call to Action -->309<section class="py-16 px-6 bg-gradient-to-r from-primary-500/90 to-secondary-500/90 text-white backdrop-blur-sm">310<div class="max-w-4xl mx-auto text-center">311 <h2 class="text-3xl font-bold mb-4">Ready to Level Up Your Skills?</h2>312 <p class="text-lg mb-8">Join thousands of learners who are making education fun and rewarding.</p>313 <button class="px-8 py-3 rounded-full bg-white text-primary-500 font-medium hover:bg-gray-100 transition">Get Started - It's Free!</button>314</div>315 </section>316 317 <!-- Footer -->318 <footer class="bg-gray-900/80 text-white py-12 px-6 border-t border-gray-700 backdrop-blur-sm">319<div class="max-w-6xl mx-auto grid md:grid-cols-4 gap-8">320 <div>321 <div class="flex items-center space-x-2 mb-4">322 <i data-feather="award" class="text-primary-500"></i>323 <h3 class="text-xl font-bold">RevQ</h3>324 </div>325 <p class="text-gray-300">Making learning fun, engaging, and rewarding through gamification.</p>326</div>327 <div>328 <h4 class="text-lg font-semibold mb-4">Explore</h4>329 <ul class="space-y-2">330 <li><a href="courses.html" class="text-gray-300 hover:text-white transition">Courses</a></li>331 <li><a href="leaderboard.html" class="text-gray-300 hover:text-white transition">Leaderboard</a></li>332 <li><a href="about.html" class="text-gray-300 hover:text-white transition">About Us</a></li>333</ul>334</div>335 <div>336 <h4 class="text-lg font-semibold mb-4">Support</h4>337 <ul class="space-y-2">338 <li><a href="#" class="text-gray-300 hover:text-white transition">Help Center</a></li>339 <li><a href="#" class="text-gray-300 hover:text-white transition">Contact Us</a></li>340 <li><a href="#" class="text-gray-300 hover:text-white transition">FAQ</a></li>341</ul>342 </div>343 <div>344 <h4 class="text-lg font-semibold mb-4">Stay Connected</h4>345 <div class="flex space-x-4 mb-4">346 <a href="#" class="bg-gray-800 p-2 rounded-full hover:bg-primary-500 transition">347<i data-feather="twitter"></i>348 </a>349 <a href="#" class="bg-gray-700 p-2 rounded-full hover:bg-primary-500 transition">350 <i data-feather="facebook"></i>351 </a>352 <a href="#" class="bg-gray-700 p-2 rounded-full hover:bg-primary-500 transition">353 <i data-feather="instagram"></i>354 </a>355 <a href="#" class="bg-gray-700 p-2 rounded-full hover:bg-primary-500 transition">356 <i data-feather="linkedin"></i>357 </a>358 </div>359 <p class="text-gray-300">Subscribe to our newsletter</p>360</div>361 </div>362 <div class="max-w-6xl mx-auto border-t border-gray-700 mt-8 pt-8 text-center text-gray-300">363<p>© 2023 RevQ. All rights reserved.</p>364 </div>365 </footer>366 <script>367 // Show loading screen before page fully loads368 window.addEventListener('load', function() {369 setTimeout(function() {370 document.querySelector('.loader-wrapper').style.display = 'none';371 }, 500);372 });373 374 feather.replace();375 </script>376 <!-- Loading screen wrapper -->377 <div class="loader-wrapper fixed inset-0 bg-gray-900 z-50 flex items-center justify-center">378 <div class="text-center">379 <div class="animate-spin rounded-full h-16 w-16 border-t-4 border-b-4 border-primary-500 mx-auto mb-4"></div>380 <p class="text-white">Loading...</p>381 </div>382 </div>383 </body>384</html>385