| <!DOCTYPE html> |
| <html lang="en" class="scroll-smooth"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>EduExcel - Academic & Admission Courses</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <script> |
| tailwind.config = { |
| darkMode: 'class', |
| theme: { |
| extend: { |
| colors: { |
| primary: { |
| 50: '#f0f9ff', |
| 100: '#e0f2fe', |
| 200: '#bae6fd', |
| 300: '#7dd3fc', |
| 400: '#38bdf8', |
| 500: '#0ea5e9', |
| 600: '#0284c7', |
| 700: '#0369a1', |
| 800: '#075985', |
| 900: '#0c4a6e', |
| }, |
| secondary: { |
| 50: '#faf5ff', |
| 100: '#f3e8ff', |
| 200: '#e9d5ff', |
| 300: '#d8b4fe', |
| 400: '#c084fc', |
| 500: '#a855f7', |
| 600: '#9333ea', |
| 700: '#7e22ce', |
| 800: '#6b21a8', |
| 900: '#581c87', |
| } |
| }, |
| fontFamily: { |
| 'sans': ['Inter', 'ui-sans-serif', 'system-ui'], |
| }, |
| } |
| } |
| } |
| </script> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); |
| |
| body { |
| font-family: 'Inter', sans-serif; |
| background-color: #f9fafb; |
| } |
| |
| .dark body { |
| background-color: #111827; |
| } |
| |
| .gradient-text { |
| background: linear-gradient(90deg, #3b82f6, #8b5cf6); |
| -webkit-background-clip: text; |
| background-clip: text; |
| color: transparent; |
| } |
| |
| .gradient-bg { |
| background: linear-gradient(135deg, #3b82f6, #8b5cf6); |
| } |
| |
| .course-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
| } |
| |
| .feature-card:hover { |
| transform: scale(1.03); |
| } |
| |
| .blur-header { |
| backdrop-filter: blur(12px); |
| -webkit-backdrop-filter: blur(12px); |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50 dark:bg-gray-900 transition-colors duration-300"> |
| |
| <header class="fixed top-0 left-0 right-0 z-50 blur-header bg-white/80 dark:bg-gray-900/80 border-b border-gray-200 dark:border-gray-800 shadow-sm"> |
| <div class="container mx-auto px-4 py-3"> |
| <div class="flex items-center justify-between"> |
| |
| <div class="flex items-center"> |
| <a href="#" class="flex items-center space-x-2"> |
| <div class="w-10 h-10 rounded-full gradient-bg flex items-center justify-center text-white font-bold text-xl">EE</div> |
| <span class="text-2xl font-bold text-gray-900 dark:text-white">Edu<span class="gradient-text">Excel</span></span> |
| </a> |
| </div> |
| |
| |
| <nav class="hidden md:flex items-center space-x-8"> |
| <a href="#courses" class="text-gray-700 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 font-medium transition-colors">Courses</a> |
| <a href="#features" class="text-gray-700 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 font-medium transition-colors">Why Choose Us</a> |
| <div class="flex items-center space-x-4"> |
| |
| <button id="theme-toggle" class="text-gray-700 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 focus:outline-none"> |
| <i class="fas fa-moon dark:hidden"></i> |
| <i class="fas fa-sun hidden dark:block"></i> |
| </button> |
| |
| |
| <button class="relative text-gray-700 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 focus:outline-none"> |
| <i class="fas fa-shopping-cart"></i> |
| <span class="absolute -top-2 -right-2 bg-primary-600 text-white text-xs font-bold rounded-full h-5 w-5 flex items-center justify-center">3</span> |
| </button> |
| |
| |
| <a href="#courses" class="px-4 py-2 gradient-bg text-white font-medium rounded-full hover:opacity-90 transition-opacity shadow-lg">Enroll Now</a> |
| </div> |
| </nav> |
| |
| |
| <button id="mobile-menu-button" class="md:hidden text-gray-700 dark:text-gray-300 focus:outline-none"> |
| <i class="fas fa-bars text-2xl"></i> |
| </button> |
| </div> |
| </div> |
| |
| |
| <div id="mobile-menu" class="hidden md:hidden bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700"> |
| <div class="container mx-auto px-4 py-3"> |
| <div class="flex flex-col space-y-4"> |
| <a href="#courses" class="text-gray-700 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 font-medium transition-colors">Courses</a> |
| <a href="#features" class="text-gray-700 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 font-medium transition-colors">Why Choose Us</a> |
| <div class="flex items-center space-x-4 pt-2"> |
| <button id="mobile-theme-toggle" class="text-gray-700 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 focus:outline-none"> |
| <i class="fas fa-moon dark:hidden"></i> |
| <i class="fas fa-sun hidden dark:block"></i> |
| </button> |
| <button class="relative text-gray-700 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 focus:outline-none"> |
| <i class="fas fa-shopping-cart"></i> |
| <span class="absolute -top-2 -right-2 bg-primary-600 text-white text-xs font-bold rounded-full h-5 w-5 flex items-center justify-center">3</span> |
| </button> |
| </div> |
| <a href="#courses" class="px-4 py-2 gradient-bg text-white font-medium rounded-full hover:opacity-90 transition-opacity shadow-lg text-center">Enroll Now</a> |
| </div> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <section class="pt-24 pb-16 md:pt-32 md:pb-24"> |
| <div class="container mx-auto px-4"> |
| <div class="flex flex-col md:flex-row items-center"> |
| <div class="md:w-1/2 mb-10 md:mb-0"> |
| <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-gray-900 dark:text-white leading-tight mb-6"> |
| Ace Your Exams with <span class="gradient-text">EduExcel</span> |
| </h1> |
| <p class="text-lg md:text-xl text-gray-600 dark:text-gray-300 mb-8"> |
| Join 10,000+ students who improved their scores by 200+ points on average. Our proven methods make learning effective and fun! |
| </p> |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> |
| <a href="#courses" class="px-6 py-3 gradient-bg text-white font-medium rounded-full hover:opacity-90 transition-opacity shadow-lg text-center">Browse Courses</a> |
| <a href="#features" class="px-6 py-3 border-2 border-primary-600 text-primary-600 dark:text-primary-400 font-medium rounded-full hover:bg-primary-50 dark:hover:bg-gray-800 transition-colors text-center">Learn More</a> |
| </div> |
| <div class="mt-10 flex flex-wrap gap-6"> |
| <div class="flex items-center"> |
| <div class="mr-3 text-primary-600 dark:text-primary-400 text-2xl"> |
| <i class="fas fa-user-graduate"></i> |
| </div> |
| <div> |
| <div class="text-2xl font-bold text-gray-900 dark:text-white">10K+</div> |
| <div class="text-gray-600 dark:text-gray-400">Students</div> |
| </div> |
| </div> |
| <div class="flex items-center"> |
| <div class="mr-3 text-secondary-600 dark:text-secondary-400 text-2xl"> |
| <i class="fas fa-chart-line"></i> |
| </div> |
| <div> |
| <div class="text-2xl font-bold text-gray-900 dark:text-white">200+</div> |
| <div class="text-gray-600 dark:text-gray-400">Avg. Score Increase</div> |
| </div> |
| </div> |
| <div class="flex items-center"> |
| <div class="mr-3 text-yellow-500 text-2xl"> |
| <i class="fas fa-star"></i> |
| </div> |
| <div> |
| <div class="text-2xl font-bold text-gray-900 dark:text-white">4.9</div> |
| <div class="text-gray-600 dark:text-gray-400">Rating (500+ reviews)</div> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="md:w-1/2 flex justify-center"> |
| <div class="relative w-full max-w-lg"> |
| <div class="absolute -top-10 -left-10 w-64 h-64 bg-primary-100 dark:bg-primary-900 rounded-full mix-blend-multiply filter blur-xl opacity-70 dark:opacity-30 animate-blob"></div> |
| <div class="absolute -bottom-10 -right-10 w-64 h-64 bg-secondary-100 dark:bg-secondary-900 rounded-full mix-blend-multiply filter blur-xl opacity-70 dark:opacity-30 animate-blob animation-delay-2000"></div> |
| <div class="absolute top-0 left-1/2 w-64 h-64 bg-purple-100 dark:bg-purple-900 rounded-full mix-blend-multiply filter blur-xl opacity-70 dark:opacity-30 animate-blob animation-delay-4000"></div> |
| <div class="relative bg-white dark:bg-gray-800 rounded-2xl shadow-xl overflow-hidden border border-gray-200 dark:border-gray-700"> |
| <img src="https://images.unsplash.com/photo-1523050854058-8df90110c9f1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Students learning" class="w-full h-auto"> |
| <div class="p-6"> |
| <div class="flex items-center mb-3"> |
| <div class="flex items-center space-x-1 text-yellow-400"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| </div> |
| <span class="ml-2 text-gray-600 dark:text-gray-300">4.9/5 (500+ reviews)</span> |
| </div> |
| <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">SAT Prep Masterclass</h3> |
| <div class="flex items-center"> |
| <span class="text-primary-600 dark:text-primary-400 font-bold text-lg">$199</span> |
| <span class="ml-2 text-gray-500 dark:text-gray-400 line-through">$299</span> |
| <span class="ml-2 bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 text-xs font-medium px-2 py-0.5 rounded">33% OFF</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="features" class="py-16 bg-gray-50 dark:bg-gray-800/50"> |
| <div class="container mx-auto px-4"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">Why Students Choose <span class="gradient-text">EduExcel</span></h2> |
| <p class="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">Our unique approach combines cutting-edge teaching methods with personalized support to help you achieve your academic goals.</p> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| |
| <div class="feature-card bg-white dark:bg-gray-800 rounded-xl p-6 shadow-md hover:shadow-lg transition-shadow duration-300 border border-gray-100 dark:border-gray-700"> |
| <div class="w-12 h-12 gradient-bg rounded-lg flex items-center justify-center text-white mb-4"> |
| <i class="fas fa-bolt text-xl"></i> |
| </div> |
| <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">Fast-Track Learning</h3> |
| <p class="text-gray-600 dark:text-gray-300">Our condensed curriculum helps you learn more in less time with proven accelerated techniques.</p> |
| </div> |
| |
| |
| <div class="feature-card bg-white dark:bg-gray-800 rounded-xl p-6 shadow-md hover:shadow-lg transition-shadow duration-300 border border-gray-100 dark:border-gray-700"> |
| <div class="w-12 h-12 gradient-bg rounded-lg flex items-center justify-center text-white mb-4"> |
| <i class="fas fa-medal text-xl"></i> |
| </div> |
| <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">Guaranteed Results</h3> |
| <p class="text-gray-600 dark:text-gray-300">Score improvement guarantee or your money back. 93% of students see significant score increases.</p> |
| </div> |
| |
| |
| <div class="feature-card bg-white dark:bg-gray-800 rounded-xl p-6 shadow-md hover:shadow-lg transition-shadow duration-300 border border-gray-100 dark:border-gray-700"> |
| <div class="w-12 h-12 gradient-bg rounded-lg flex items-center justify-center text-white mb-4"> |
| <i class="fas fa-calendar-alt text-xl"></i> |
| </div> |
| <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">Flexible Schedule</h3> |
| <p class="text-gray-600 dark:text-gray-300">Learn at your own pace with 24/7 access to all materials and recorded sessions.</p> |
| </div> |
| |
| |
| <div class="feature-card bg-white dark:bg-gray-800 rounded-xl p-6 shadow-md hover:shadow-lg transition-shadow duration-300 border border-gray-100 dark:border-gray-700"> |
| <div class="w-12 h-12 gradient-bg rounded-lg flex items-center justify-center text-white mb-4"> |
| <i class="fas fa-users text-xl"></i> |
| </div> |
| <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">Small Batch Learning</h3> |
| <p class="text-gray-600 dark:text-gray-300">Limited class sizes ensure personalized attention from expert instructors.</p> |
| </div> |
| |
| |
| <div class="feature-card bg-white dark:bg-gray-800 rounded-xl p-6 shadow-md hover:shadow-lg transition-shadow duration-300 border border-gray-100 dark:border-gray-700"> |
| <div class="w-12 h-12 gradient-bg rounded-lg flex items-center justify-center text-white mb-4"> |
| <i class="fas fa-headset text-xl"></i> |
| </div> |
| <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">24/7 Support</h3> |
| <p class="text-gray-600 dark:text-gray-300">Get help whenever you need it with our dedicated student support team.</p> |
| </div> |
| |
| |
| <div class="feature-card bg-white dark:bg-gray-800 rounded-xl p-6 shadow-md hover:shadow-lg transition-shadow duration-300 border border-gray-100 dark:border-gray-700"> |
| <div class="w-12 h-12 gradient-bg rounded-lg flex items-center justify-center text-white mb-4"> |
| <i class="fas fa-chart-pie text-xl"></i> |
| </div> |
| <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">Score Analytics</h3> |
| <p class="text-gray-600 dark:text-gray-300">Track your progress with detailed analytics and personalized improvement plans.</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="courses" class="py-16"> |
| <div class="container mx-auto px-4"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">Popular <span class="gradient-text">Courses</span></h2> |
| <p class="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">Choose from our selection of high-impact courses designed to maximize your test scores.</p> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| |
| <div class="course-card bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-all duration-300 border border-gray-100 dark:border-gray-700"> |
| <div class="relative"> |
| <img src="https://images.unsplash.com/photo-1501504905252-473c47e087f8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="SAT Prep" class="w-full h-48 object-cover"> |
| <div class="absolute top-3 left-3 flex space-x-2"> |
| <span class="bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 text-xs font-medium px-2 py-1 rounded">Bestseller</span> |
| <span class="bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 text-xs font-medium px-2 py-1 rounded">Trending</span> |
| </div> |
| </div> |
| <div class="p-6"> |
| <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">SAT Prep Masterclass</h3> |
| <p class="text-gray-600 dark:text-gray-300 mb-4">Comprehensive SAT preparation covering all sections with proven strategies to boost your score.</p> |
| <div class="flex items-center mb-4"> |
| <div class="flex items-center space-x-1 text-yellow-400"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| </div> |
| <span class="ml-2 text-gray-600 dark:text-gray-300">4.9 (428 reviews)</span> |
| </div> |
| <div class="flex items-center justify-between mb-4"> |
| <div> |
| <span class="text-primary-600 dark:text-primary-400 font-bold text-xl">$199</span> |
| <span class="ml-2 text-gray-500 dark:text-gray-400 line-through">$299</span> |
| </div> |
| <span class="bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 text-xs font-medium px-2 py-1 rounded">33% OFF</span> |
| </div> |
| <div class="flex flex-wrap gap-2 mb-4"> |
| <span class="bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 text-xs font-medium px-2 py-1 rounded">6 Weeks</span> |
| <span class="bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 text-xs font-medium px-2 py-1 rounded">20 Hours</span> |
| <span class="bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 text-xs font-medium px-2 py-1 rounded">5 Practice Tests</span> |
| </div> |
| <button class="w-full px-4 py-2 gradient-bg text-white font-medium rounded-lg hover:opacity-90 transition-opacity shadow">Enroll Now</button> |
| </div> |
| </div> |
| |
| |
| <div class="course-card bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-all duration-300 border border-gray-100 dark:border-gray-700"> |
| <div class="relative"> |
| <img src="https://images.unsplash.com/photo-1523050854058-8df90110c9f1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="IELTS Prep" class="w-full h-48 object-cover"> |
| <div class="absolute top-3 left-3"> |
| <span class="bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200 text-xs font-medium px-2 py-1 rounded">New</span> |
| </div> |
| </div> |
| <div class="p-6"> |
| <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">IELTS Complete Course</h3> |
| <p class="text-gray-600 dark:text-gray-300 mb-4">Master all four IELTS components with expert guidance and realistic practice materials.</p> |
| <div class="flex items-center mb-4"> |
| <div class="flex items-center space-x-1 text-yellow-400"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star-half-alt"></i> |
| </div> |
| <span class="ml-2 text-gray-600 dark:text-gray-300">4.7 (312 reviews)</span> |
| </div> |
| <div class="flex items-center justify-between mb-4"> |
| <div> |
| <span class="text-primary-600 dark:text-primary-400 font-bold text-xl">$179</span> |
| <span class="ml-2 text-gray-500 dark:text-gray-400 line-through">$249</span> |
| </div> |
| <span class="bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 text-xs font-medium px-2 py-1 rounded">28% OFF</span> |
| </div> |
| <div class="flex flex-wrap gap-2 mb-4"> |
| <span class="bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 text-xs font-medium px-2 py-1 rounded">8 Weeks</span> |
| <span class="bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 text-xs font-medium px-2 py-1 rounded">30 Hours</span> |
| <span class="bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 text-xs font-medium px-2 py-1 rounded">4 Mock Tests</span> |
| </div> |
| <button class="w-full px-4 py-2 gradient-bg text-white font-medium rounded-lg hover:opacity-90 transition-opacity shadow">Enroll Now</button> |
| </div> |
| </div> |
| |
| |
| <div class="course-card bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-all duration-300 border border-gray-100 dark:border-gray-700"> |
| <div class="relative"> |
| <img src="https://images.unsplash.com/photo-1434030216411-0b793f4b4173?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="AP Calculus" class="w-full h-48 object-cover"> |
| <div class="absolute top-3 left-3"> |
| <span class="bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 text-xs font-medium px-2 py-1 rounded">Limited Seats</span> |
| </div> |
| </div> |
| <div class="p-6"> |
| <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">AP Calculus AB/BC</h3> |
| <p class="text-gray-600 dark:text-gray-300 mb-4">Conquer calculus with our intensive AP prep course designed to help you score a 5.</p> |
| <div class="flex items-center mb-4"> |
| <div class="flex items-center space-x-1 text-yellow-400"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| </div> |
| <span class="ml-2 text-gray-600 dark:text-gray-300">4.9 (276 reviews)</span> |
| </div> |
| <div class="flex items-center justify-between mb-4"> |
| <div> |
| <span class="text-primary-600 dark:text-primary-400 font-bold text-xl">$229</span> |
| <span class="ml-2 text-gray-500 dark:text-gray-400 line-through">$349</span> |
| </div> |
| <span class="bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 text-xs font-medium px-2 py-1 rounded">34% OFF</span> |
| </div> |
| <div class="flex flex-wrap gap-2 mb-4"> |
| <span class="bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 text-xs font-medium px-2 py-1 rounded">10 Weeks</span> |
| <span class="bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 text-xs font-medium px-2 py-1 rounded">40 Hours</span> |
| <span class="bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 text-xs font-medium px-2 py-1 rounded">6 Practice Exams</span> |
| </div> |
| <button class="w-full px-4 py-2 gradient-bg text-white font-medium rounded-lg hover:opacity-90 transition-opacity shadow">Enroll Now</button> |
| </div> |
| </div> |
| |
| |
| <div class="course-card bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-all duration-300 border border-gray-100 dark:border-gray-700"> |
| <div class="relative"> |
| <img src="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="GRE Prep" class="w-full h-48 object-cover"> |
| <div class="absolute top-3 left-3 flex space-x-2"> |
| <span class="bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200 text-xs font-medium px-2 py-1 rounded">Hot Deal</span> |
| </div> |
| </div> |
| <div class="p-6"> |
| <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">GRE Ultimate Prep</h3> |
| <p class="text-gray-600 dark:text-gray-300 mb-4">Comprehensive GRE preparation with advanced strategies for Verbal, Quant, and AWA sections.</p> |
| <div class="flex items-center mb-4"> |
| <div class="flex items-center space-x-1 text-yellow-400"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star-half-alt"></i> |
| </div> |
| <span class="ml-2 text-gray-600 dark:text-gray-300">4.7 (198 reviews)</span> |
| </div> |
| <div class="flex items-center justify-between mb-4"> |
| <div> |
| <span class="text-primary-600 dark:text-primary-400 font-bold text-xl">$249</span> |
| <span class="ml-2 text-gray-500 dark:text-gray-400 line-through">$399</span> |
| </div> |
| <span class="bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 text-xs font-medium px-2 py-1 rounded">38% OFF</span> |
| </div> |
| <div class="flex flex-wrap gap-2 mb-4"> |
| <span class="bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 text-xs font-medium px-2 py-1 rounded">12 Weeks</span> |
| <span class="bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 text-xs font-medium px-2 py-1 rounded">50 Hours</span> |
| <span class="bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 text-xs font-medium px-2 py-1 rounded">8 Full Tests</span> |
| </div> |
| <button class="w-full px-4 py-2 gradient-bg text-white font-medium rounded-lg hover:opacity-90 transition-opacity shadow">Enroll Now</button> |
| </div> |
| </div> |
| |
| |
| <div class="course-card bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-all duration-300 border border-gray-100 dark:border-gray-700"> |
| <div class="relative"> |
| <img src="https://images.unsplash.com/photo-1523240795612-9a054b0db644?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="College Essay" class="w-full h-48 object-cover"> |
| </div> |
| <div class="p-6"> |
| <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">College Essay Workshop</h3> |
| <p class="text-gray-600 dark:text-gray-300 mb-4">Craft compelling college essays that stand out with personalized feedback from Ivy League advisors.</p> |
| <div class="flex items-center mb-4"> |
| <div class="flex items-center space-x-1 text-yellow-400"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| </div> |
| <span class="ml-2 text-gray-600 dark:text-gray-300">4.9 (342 reviews)</span> |
| </div> |
| <div class="flex items-center justify-between mb-4"> |
| <div> |
| <span class="text-primary-600 dark:text-primary-400 font-bold text-xl">$299</span> |
| <span class="ml-2 text-gray-500 dark:text-gray-400 line-through">$499</span> |
| </div> |
| <span class="bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 text-xs font-medium px-2 py-1 rounded">40% OFF</span> |
| </div> |
| <div class="flex flex-wrap gap-2 mb-4"> |
| <span class="bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 text-xs font-medium px-2 py-1 rounded">4 Weeks</span> |
| <span class="bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 text-xs font-medium px-2 py-1 rounded">15 Hours</span> |
| <span class="bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 text-xs font-medium px-2 py-1 rounded">3 Draft Reviews</span> |
| </div> |
| <button class="w-full px-4 py-2 gradient-bg text-white font-medium rounded-lg hover:opacity-90 transition-opacity shadow">Enroll Now</button> |
| </div> |
| </div> |
| |
| |
| <div class="course-card bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-all duration-300 border border-gray-100 dark:border-gray-700"> |
| <div class="relative"> |
| <img src="https://images.unsplash.com/photo-1588072432836-e10032774350?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1472&q=80" alt="ACT Prep" class="w-full h-48 object-cover"> |
| <div class="absolute top-3 left-3"> |
| <span class="bg-pink-100 dark:bg-pink-900 text-pink-800 dark:text-pink-200 text-xs font-medium px-2 py-1 rounded">Popular</span> |
| </div> |
| </div> |
| <div class="p-6"> |
| <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">ACT Intensive Prep</h3> |
| <p class="text-gray-600 dark:text-gray-300 mb-4">Master the ACT with our proven strategies and comprehensive practice materials.</p> |
| <div class="flex items-center mb-4"> |
| <div class="flex items-center space-x-1 text-yellow-400"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star-half-alt"></i> |
| </div> |
| <span class="ml-2 text-gray-600 dark:text-gray-300">4.8 (256 reviews)</span> |
| </div> |
| <div class="flex items-center justify-between mb-4"> |
| <div> |
| <span class="text-primary-600 dark:text-primary-400 font-bold text-xl">$179</span> |
| <span class="ml-2 text-gray-500 dark:text-gray-400 line-through">$279</span> |
| </div> |
| <span class="bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 text-xs font-medium px-2 py-1 rounded">36% OFF</span> |
| </div> |
| <div class="flex flex-wrap gap-2 mb-4"> |
| <span class="bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 text-xs font-medium px-2 py-1 rounded">6 Weeks</span> |
| <span class="bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 text-xs font-medium px-2 py-1 rounded">25 Hours</span> |
| <span class="bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 text-xs font-medium px-2 py-1 rounded">5 Full Tests</span> |
| </div> |
| <button class="w-full px-4 py-2 gradient-bg text-white font-medium rounded-lg hover:opacity-90 transition-opacity shadow">Enroll Now</button> |
| </div> |
| </div> |
| </div> |
| |
| <div class="text-center mt-16"> |
| <a href="#" class="px-6 py-3 border-2 border-primary-600 text-primary-600 dark:text-primary-400 font-medium rounded-full hover:bg-primary-50 dark:hover:bg-gray-800 transition-colors inline-block">View All Courses</a> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 gradient-bg"> |
| <div class="container mx-auto px-4"> |
| <div class="max-w-4xl mx-auto text-center"> |
| <h2 class="text-3xl md:text-4xl font-bold text-white mb-6">Ready to Transform Your Academic Journey?</h2> |
| <p class="text-xl text-white/90 mb-8">Join thousands of students who've achieved their dream scores with EduExcel. Limited seats available!</p> |
| <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4"> |
| <a href="#courses" class="px-6 py-3 bg-white text-primary-600 font-medium rounded-full hover:bg-gray-100 transition-colors shadow-lg">Browse Courses</a> |
| <a href="#" class="px-6 py-3 border-2 border-white text-white font-medium rounded-full hover:bg-white/10 transition-colors">Talk to Advisor</a> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="bg-gray-900 text-gray-300 py-12"> |
| <div class="container mx-auto px-4"> |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
| <div> |
| <a href="#" class="flex items-center space-x-2 mb-4"> |
| <div class="w-10 h-10 rounded-full gradient-bg flex items-center justify-center text-white font-bold text-xl">EE</div> |
| <span class="text-2xl font-bold text-white">Edu<span class="gradient-text">Excel</span></span> |
| </a> |
| <p class="mb-4">Empowering students to achieve academic excellence through innovative learning solutions.</p> |
| <div class="flex space-x-4"> |
| <a href="#" class="text-gray-400 hover:text-white transition-colors"> |
| <i class="fab fa-facebook-f"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white transition-colors"> |
| <i class="fab fa-twitter"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white transition-colors"> |
| <i class="fab fa-instagram"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white transition-colors"> |
| <i class="fab fa-linkedin-in"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white transition-colors"> |
| <i class="fab fa-youtube"></i> |
| </a> |
| </div> |
| </div> |
| |
| <div> |
| <h3 class="text-lg font-semibold text-white mb-4">Courses</h3> |
| <ul class="space-y-2"> |
| <li><a href="#" class="hover:text-white transition-colors">SAT Prep</a></li> |
| <li><a href="#" class="hover:text-white transition-colors">ACT Prep</a></li> |
| <li><a href="#" class="hover:text-white transition-colors">IELTS Prep</a></li> |
| <li><a href="#" class="hover:text-white transition-colors">GRE Prep</a></li> |
| <li><a href="#" class="hover:text-white transition-colors">AP Courses</a></li> |
| <li><a href="#" class="hover:text-white transition-colors">College Essays</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h3 class="text-lg font-semibold text-white mb-4">Resources</h3> |
| <ul class="space-y-2"> |
| <li><a href="#" class="hover:text-white transition-colors">Study Guides</a></li> |
| <li><a href="#" class="hover:text-white transition-colors">Practice Tests</a></li> |
| <li><a href="#" class="hover:text-white transition-colors">Blog</a></li> |
| <li><a href="#" class="hover:text-white transition-colors">Webinars</a></li> |
| <li><a href="#" class="hover:text-white transition-colors">Success Stories</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h3 class="text-lg font-semibold text-white mb-4">Legal</h3> |
| <ul class="space-y-2"> |
| <li><a href="#" class="hover:text-white transition-colors">Terms of Service</a></li> |
| <li><a href="#" class="hover:text-white transition-colors">Privacy Policy</a></li> |
| <li><a href="#" class="hover:text-white transition-colors">Refund Policy</a></li> |
| <li><a href="#" class="hover:text-white transition-colors">Cookie Policy</a></li> |
| </ul> |
| </div> |
| </div> |
| |
| <div class="border-t border-gray-800 mt-12 pt-8 text-center"> |
| <p>© 2023 EduExcel. All rights reserved.</p> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| const themeToggle = document.getElementById('theme-toggle'); |
| const mobileThemeToggle = document.getElementById('mobile-theme-toggle'); |
| const html = document.documentElement; |
| |
| function toggleTheme() { |
| html.classList.toggle('dark'); |
| localStorage.setItem('theme', html.classList.contains('dark') ? 'dark' : 'light'); |
| } |
| |
| themeToggle.addEventListener('click', toggleTheme); |
| mobileThemeToggle.addEventListener('click', toggleTheme); |
| |
| |
| if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) { |
| html.classList.add('dark'); |
| } |
| |
| |
| const mobileMenuButton = document.getElementById('mobile-menu-button'); |
| const mobileMenu = document.getElementById('mobile-menu'); |
| |
| mobileMenuButton.addEventListener('click', () => { |
| mobileMenu.classList.toggle('hidden'); |
| }); |
| |
| |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
| anchor.addEventListener('click', function (e) { |
| e.preventDefault(); |
| |
| const targetId = this.getAttribute('href'); |
| if (targetId === '#') return; |
| |
| const targetElement = document.querySelector(targetId); |
| if (targetElement) { |
| targetElement.scrollIntoView({ |
| behavior: 'smooth' |
| }); |
| |
| |
| if (!mobileMenu.classList.contains('hidden')) { |
| mobileMenu.classList.add('hidden'); |
| } |
| } |
| }); |
| }); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Enoy909/eduexcel" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
