| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>EdGlow - Transform Your Learning Journey</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"> |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> |
| <style> |
| body { |
| font-family: 'Inter', sans-serif; |
| scroll-behavior: smooth; |
| } |
| .gradient-bg { |
| background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #d946ef 100%); |
| } |
| .course-card { |
| transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); |
| border-radius: 12px; |
| overflow: hidden; |
| } |
| .course-card:hover { |
| transform: translateY(-8px); |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
| } |
| .hero-image { |
| animation: float 6s ease-in-out infinite; |
| } |
| @keyframes float { |
| 0% { transform: translateY(0px); } |
| 50% { transform: translateY(-20px); } |
| 100% { transform: translateY(0px); } |
| } |
| .testimonial-card { |
| transition: all 0.3s ease; |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| } |
| .testimonial-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); |
| } |
| .nav-link { |
| position: relative; |
| } |
| .nav-link::after { |
| content: ''; |
| position: absolute; |
| width: 0; |
| height: 2px; |
| bottom: 0; |
| left: 0; |
| background-color: #6366f1; |
| transition: width 0.3s ease; |
| } |
| .nav-link:hover::after { |
| width: 100%; |
| } |
| .btn-primary { |
| transition: all 0.3s ease; |
| background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); |
| } |
| .btn-primary:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 10px 15px -3px rgba(99, 102, 241, 0.3); |
| } |
| .btn-secondary { |
| transition: all 0.3s ease; |
| border: 2px solid #6366f1; |
| } |
| .btn-secondary:hover { |
| background-color: rgba(99, 102, 241, 0.1); |
| transform: translateY(-2px); |
| } |
| .feature-card { |
| transition: all 0.3s ease; |
| border: 1px solid rgba(226, 232, 240, 0.5); |
| } |
| .feature-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); |
| border-color: rgba(99, 102, 241, 0.3); |
| } |
| .path-card { |
| transition: all 0.3s ease; |
| border: 1px solid rgba(226, 232, 240, 0.5); |
| } |
| .path-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); |
| } |
| .scroll-indicator { |
| animation: bounce 2s infinite; |
| } |
| @keyframes bounce { |
| 0%, 20%, 50%, 80%, 100% {transform: translateY(0);} |
| 40% {transform: translateY(-15px);} |
| 60% {transform: translateY(-7px);} |
| } |
| .input-field:focus { |
| border-color: #8b5cf6; |
| box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2); |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50"> |
| |
| <nav class="bg-white shadow-sm sticky top-0 z-50 backdrop-blur-sm bg-opacity-80"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="flex justify-between h-16"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0 flex items-center"> |
| <i class="fas fa-graduation-cap text-indigo-600 text-2xl mr-2"></i> |
| <span class="text-xl font-bold text-indigo-600">EdGlow</span> |
| </div> |
| <div class="hidden md:ml-10 md:flex md:space-x-8"> |
| <a href="#" class="nav-link text-indigo-600 inline-flex items-center px-1 pt-1 text-sm font-medium">Home</a> |
| <a href="#courses" class="nav-link text-gray-500 hover:text-gray-700 inline-flex items-center px-1 pt-1 text-sm font-medium">Courses</a> |
| <a href="#features" class="nav-link text-gray-500 hover:text-gray-700 inline-flex items-center px-1 pt-1 text-sm font-medium">Features</a> |
| <a href="#paths" class="nav-link text-gray-500 hover:text-gray-700 inline-flex items-center px-1 pt-1 text-sm font-medium">Paths</a> |
| <a href="#testimonials" class="nav-link text-gray-500 hover:text-gray-700 inline-flex items-center px-1 pt-1 text-sm font-medium">Testimonials</a> |
| </div> |
| </div> |
| <div class="hidden md:ml-6 md:flex md:items-center space-x-4"> |
| <button class="text-gray-600 hover:text-indigo-600 px-3 py-2 rounded-md text-sm font-medium">Sign In</button> |
| <button class="btn-primary text-white px-4 py-2 rounded-md text-sm font-medium">Get Started</button> |
| </div> |
| <div class="-mr-2 flex items-center md:hidden"> |
| <button type="button" id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500"> |
| <span class="sr-only">Open main menu</span> |
| <i class="fas fa-bars"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="mobile-menu" class="hidden md:hidden bg-white shadow-lg"> |
| <div class="pt-2 pb-3 space-y-1"> |
| <a href="#" class="bg-indigo-50 border-indigo-500 text-indigo-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Home</a> |
| <a href="#courses" class="border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Courses</a> |
| <a href="#features" class="border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Features</a> |
| <a href="#paths" class="border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Paths</a> |
| <a href="#testimonials" class="border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Testimonials</a> |
| <div class="mt-4 p-2 space-y-2"> |
| <button class="w-full btn-primary text-white px-4 py-2 rounded-md text-sm font-medium">Get Started</button> |
| <button class="w-full text-gray-600 hover:text-indigo-600 px-4 py-2 rounded-md text-sm font-medium">Sign In</button> |
| </div> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <div class="gradient-bg text-white relative overflow-hidden"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 md:py-28"> |
| <div class="md:flex items-center relative z-10"> |
| <div class="md:w-1/2 mb-10 md:mb-0"> |
| <h1 class="text-4xl md:text-5xl font-bold mb-6 leading-tight">Unlock Your Potential with <span class="text-indigo-200">EdGlow</span></h1> |
| <p class="text-xl mb-8 opacity-90 max-w-lg">Personalized, interactive courses that adapt to your learning style and pace. Join thousands of students achieving their goals.</p> |
| <div class="flex flex-col sm:flex-row gap-4"> |
| <button class="btn-primary px-6 py-3 rounded-lg font-semibold text-lg shadow-lg flex items-center justify-center"> |
| Start Learning Free <i class="fas fa-arrow-right ml-2"></i> |
| </button> |
| <button class="btn-secondary text-white px-6 py-3 rounded-lg font-semibold text-lg flex items-center justify-center"> |
| <i class="fas fa-play-circle mr-2"></i> Watch Demo |
| </button> |
| </div> |
| <div class="mt-8 flex items-center"> |
| <div class="flex -space-x-2"> |
| <img class="inline-block h-10 w-10 rounded-full ring-2 ring-white" src="https://randomuser.me/api/portraits/women/12.jpg" alt=""> |
| <img class="inline-block h-10 w-10 rounded-full ring-2 ring-white" src="https://randomuser.me/api/portraits/men/32.jpg" alt=""> |
| <img class="inline-block h-10 w-10 rounded-full ring-2 ring-white" src="https://randomuser.me/api/portraits/women/44.jpg" alt=""> |
| <div class="inline-flex items-center justify-center h-10 w-10 rounded-full bg-indigo-100 text-indigo-600 ring-2 ring-white font-bold"> |
| +10K |
| </div> |
| </div> |
| <p class="ml-4 text-sm opacity-80">Trusted by <span class="font-bold">10,000+</span> learners worldwide</p> |
| </div> |
| </div> |
| <div class="md:w-1/2 flex justify-center relative"> |
| <img src="https://illustrations.popsy.co/amber/digital-learning.svg" alt="Learning illustration" class="hero-image w-full max-w-md"> |
| <div class="absolute -bottom-10 left-1/2 transform -translate-x-1/2 scroll-indicator"> |
| <i class="fas fa-chevron-down text-white text-2xl opacity-70"></i> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-white to-transparent"></div> |
| </div> |
|
|
| |
| <div class="bg-white py-16"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center"> |
| <div class="p-6 rounded-xl bg-gradient-to-br from-indigo-50 to-purple-50"> |
| <div class="text-4xl font-bold text-indigo-600 mb-2">98%</div> |
| <div class="text-gray-600 font-medium">Completion Rate</div> |
| <div class="mt-2 text-xs text-gray-500">Highest in the industry</div> |
| </div> |
| <div class="p-6 rounded-xl bg-gradient-to-br from-indigo-50 to-purple-50"> |
| <div class="text-4xl font-bold text-indigo-600 mb-2">10K+</div> |
| <div class="text-gray-600 font-medium">Active Students</div> |
| <div class="mt-2 text-xs text-gray-500">From 120+ countries</div> |
| </div> |
| <div class="p-6 rounded-xl bg-gradient-to-br from-indigo-50 to-purple-50"> |
| <div class="text-4xl font-bold text-indigo-600 mb-2">500+</div> |
| <div class="text-gray-600 font-medium">Courses Available</div> |
| <div class="mt-2 text-xs text-gray-500">New weekly updates</div> |
| </div> |
| <div class="p-6 rounded-xl bg-gradient-to-br from-indigo-50 to-purple-50"> |
| <div class="text-4xl font-bold text-indigo-600 mb-2">24/7</div> |
| <div class="text-gray-600 font-medium">Expert Support</div> |
| <div class="mt-2 text-xs text-gray-500">Average response time: 15min</div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="features" class="py-16 bg-gray-50"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="text-center mb-16"> |
| <span class="inline-block px-3 py-1 text-sm font-semibold text-indigo-600 bg-indigo-100 rounded-full mb-4">Why Choose Us</span> |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Learning Experience <span class="text-indigo-600">Reimagined</span></h2> |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto"> |
| We've redesigned online education from the ground up to be engaging, effective, and personalized. |
| </p> |
| </div> |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| <div class="feature-card bg-white p-8 rounded-xl"> |
| <div class="w-14 h-14 bg-indigo-100 rounded-xl flex items-center justify-center mb-6"> |
| <i class="fas fa-brain text-indigo-600 text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">Adaptive Learning</h3> |
| <p class="text-gray-600 mb-4">Our AI adjusts course difficulty based on your performance, ensuring optimal challenge and growth.</p> |
| <a href="#" class="text-indigo-600 font-medium inline-flex items-center"> |
| Learn more <i class="fas fa-arrow-right ml-2 text-sm"></i> |
| </a> |
| </div> |
| <div class="feature-card bg-white p-8 rounded-xl"> |
| <div class="w-14 h-14 bg-indigo-100 rounded-xl flex items-center justify-center mb-6"> |
| <i class="fas fa-chart-line text-indigo-600 text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">Progress Tracking</h3> |
| <p class="text-gray-600 mb-4">Visual dashboards show your learning journey with actionable insights to improve.</p> |
| <a href="#" class="text-indigo-600 font-medium inline-flex items-center"> |
| Learn more <i class="fas fa-arrow-right ml-2 text-sm"></i> |
| </a> |
| </div> |
| <div class="feature-card bg-white p-8 rounded-xl"> |
| <div class="w-14 h-14 bg-indigo-100 rounded-xl flex items-center justify-center mb-6"> |
| <i class="fas fa-users text-indigo-600 text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">Community Learning</h3> |
| <p class="text-gray-600 mb-4">Join study groups, participate in discussions, and learn collaboratively with peers.</p> |
| <a href="#" class="text-indigo-600 font-medium inline-flex items-center"> |
| Learn more <i class="fas fa-arrow-right ml-2 text-sm"></i> |
| </a> |
| </div> |
| <div class="feature-card bg-white p-8 rounded-xl"> |
| <div class="w-14 h-14 bg-indigo-100 rounded-xl flex items-center justify-center mb-6"> |
| <i class="fas fa-certificate text-indigo-600 text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">Certification</h3> |
| <p class="text-gray-600 mb-4">Earn verifiable certificates recognized by top companies to boost your career.</p> |
| <a href="#" class="text-indigo-600 font-medium inline-flex items-center"> |
| Learn more <i class="fas fa-arrow-right ml-2 text-sm"></i> |
| </a> |
| </div> |
| <div class="feature-card bg-white p-8 rounded-xl"> |
| <div class="w-14 h-14 bg-indigo-100 rounded-xl flex items-center justify-center mb-6"> |
| <i class="fas fa-mobile-alt text-indigo-600 text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">Mobile Friendly</h3> |
| <p class="text-gray-600 mb-4">Learn anytime, anywhere with our fully responsive platform across all devices.</p> |
| <a href="#" class="text-indigo-600 font-medium inline-flex items-center"> |
| Learn more <i class="fas fa-arrow-right ml-2 text-sm"></i> |
| </a> |
| </div> |
| <div class="feature-card bg-white p-8 rounded-xl"> |
| <div class="w-14 h-14 bg-indigo-100 rounded-xl flex items-center justify-center mb-6"> |
| <i class="fas fa-headset text-indigo-600 text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">1-on-1 Mentoring</h3> |
| <p class="text-gray-600 mb-4">Get personalized guidance from industry experts to accelerate your learning.</p> |
| <a href="#" class="text-indigo-600 font-medium inline-flex items-center"> |
| Learn more <i class="fas fa-arrow-right ml-2 text-sm"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="courses" class="py-16 bg-white"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="text-center mb-16"> |
| <span class="inline-block px-3 py-1 text-sm font-semibold text-indigo-600 bg-indigo-100 rounded-full mb-4">Learn Anything</span> |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Popular <span class="text-indigo-600">Courses</span></h2> |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto"> |
| Browse our most popular courses loved by thousands of students |
| </p> |
| </div> |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| |
| <div class="course-card bg-white rounded-xl overflow-hidden shadow-sm"> |
| <div class="relative"> |
| <img class="w-full h-48 object-cover" src="https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="Course thumbnail"> |
| <div class="absolute top-3 right-3 bg-indigo-600 text-white text-xs font-bold px-2 py-1 rounded-full">BESTSELLER</div> |
| <div class="absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-t from-black to-transparent opacity-70"></div> |
| <div class="absolute bottom-3 left-3 text-white text-sm font-medium">42 hours • 256 lessons</div> |
| </div> |
| <div class="p-6"> |
| <div class="flex items-center mb-2"> |
| <span class="bg-indigo-100 text-indigo-800 text-xs font-semibold px-2.5 py-0.5 rounded">Beginner</span> |
| <span class="text-gray-500 text-sm ml-auto"><i class="fas fa-star text-yellow-400"></i> 4.9 (1.2k)</span> |
| </div> |
| <h3 class="text-xl font-bold mb-2">Web Development Bootcamp</h3> |
| <p class="text-gray-600 mb-4">Master HTML, CSS, JavaScript and modern frameworks in this comprehensive course.</p> |
| <div class="flex items-center justify-between"> |
| <div class="flex items-center"> |
| <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Instructor"> |
| <span class="text-sm text-gray-600">John Smith</span> |
| </div> |
| <div> |
| <span class="text-indigo-600 font-bold">$99.99</span> |
| <span class="text-gray-400 line-through text-sm ml-1">$149.99</span> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="course-card bg-white rounded-xl overflow-hidden shadow-sm"> |
| <div class="relative"> |
| <img class="w-full h-48 object-cover" src="https://images.unsplash.com/photo-1547658719-da2b51169166?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="Course thumbnail"> |
| <div class="absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-t from-black to-transparent opacity-70"></div> |
| <div class="absolute bottom-3 left-3 text-white text-sm font-medium">36 hours • 198 lessons</div> |
| </div> |
| <div class="p-6"> |
| <div class="flex items-center mb-2"> |
| <span class="bg-green-100 text-green-800 text-xs font-semibold px-2.5 py-0.5 rounded">Intermediate</span> |
| <span class="text-gray-500 text-sm ml-auto"><i class="fas fa-star text-yellow-400"></i> 4.8 (890)</span> |
| </div> |
| <h3 class="text-xl font-bold mb-2">Data Science Fundamentals</h3> |
| <p class="text-gray-600 mb-4">Learn Python, Pandas, NumPy, and visualization tools to analyze and visualize data.</p> |
| <div class="flex items-center justify-between"> |
| <div class="flex items-center"> |
| <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Instructor"> |
| <span class="text-sm text-gray-600">Sarah Johnson</span> |
| </div> |
| <div> |
| <span class="text-indigo-600 font-bold">$129.99</span> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="course-card bg-white rounded-xl overflow-hidden shadow-sm"> |
| <div class="relative"> |
| <img class="w-full h-48 object-cover" src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="Course thumbnail"> |
| <div class="absolute top-3 right-3 bg-indigo-600 text-white text-xs font-bold px-2 py-1 rounded-full">NEW</div> |
| <div class="absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-t from-black to-transparent opacity-70"></div> |
| <div class="absolute bottom-3 left-3 text-white text-sm font-medium">58 hours • 312 lessons</div> |
| </div> |
| <div class="p-6"> |
| <div class="flex items-center mb-2"> |
| <span class="bg-red-100 text-red-800 text-xs font-semibold px-2.5 py-0.5 rounded">Advanced</span> |
| <span class="text-gray-500 text-sm ml-auto"><i class="fas fa-star text-yellow-400"></i> 4.7 (650)</span> |
| </div> |
| <h3 class="text-xl font-bold mb-2">Machine Learning with Python</h3> |
| <p class="text-gray-600 mb-4">Build and deploy machine learning models using TensorFlow and scikit-learn.</p> |
| <div class="flex items-center justify-between"> |
| <div class="flex items-center"> |
| <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/75.jpg" alt="Instructor"> |
| <span class="text-sm text-gray-600">Michael Chen</span> |
| </div> |
| <div> |
| <span class="text-indigo-600 font-bold">$149.99</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="mt-12 text-center"> |
| <button class="btn-secondary text-indigo-600 px-6 py-3 rounded-lg font-semibold text-lg transition-colors inline-flex items-center"> |
| View All Courses <i class="fas fa-arrow-right ml-2"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="paths" class="py-16 bg-indigo-50"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="text-center mb-16"> |
| <span class="inline-block px-3 py-1 text-sm font-semibold text-indigo-600 bg-indigo-100 rounded-full mb-4">Career Focused</span> |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Structured <span class="text-indigo-600">Learning Paths</span></h2> |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto"> |
| Follow guided paths to achieve your career goals faster |
| </p> |
| </div> |
| <div class="grid md:grid-cols-3 gap-8"> |
| <div class="path-card bg-white p-8 rounded-xl"> |
| <div class="flex items-center mb-6"> |
| <div class="w-12 h-12 bg-indigo-100 rounded-xl flex items-center justify-center mr-4"> |
| <i class="fas fa-laptop-code text-indigo-600 text-xl"></i> |
| </div> |
| <h3 class="text-xl font-bold">Frontend Developer</h3> |
| </div> |
| <p class="text-gray-600 mb-6">Master modern frontend development with HTML, CSS, JavaScript and frameworks like React.</p> |
| <div class="mb-6"> |
| <div class="flex justify-between text-sm text-gray-500 mb-1"> |
| <span>Progress</span> |
| <span>25%</span> |
| </div> |
| <div class="w-full bg-gray-200 rounded-full h-2"> |
| <div class="bg-gradient-to-r from-indigo-500 to-purple-500 h-2 rounded-full" style="width: 25%"></div> |
| </div> |
| </div> |
| <div class="flex justify-between items-center"> |
| <span class="text-sm text-gray-500">8 courses • 45 hours</span> |
| <button class="text-indigo-600 hover:text-indigo-800 font-medium inline-flex items-center"> |
| Explore <i class="fas fa-chevron-right ml-1 text-sm"></i> |
| </button> |
| </div> |
| </div> |
| <div class="path-card bg-white p-8 rounded-xl"> |
| <div class="flex items-center mb-6"> |
| <div class="w-12 h-12 bg-indigo-100 rounded-xl flex items-center justify-center mr-4"> |
| <i class="fas fa-server text-indigo-600 text-xl"></i> |
| </div> |
| <h3 class="text-xl font-bold">Backend Developer</h3> |
| </div> |
| <p class="text-gray-600 mb-6">Learn server-side development with Node.js, databases, APIs and cloud deployment.</p> |
| <div class="mb-6"> |
| <div class="flex justify-between text-sm text-gray-500 mb-1"> |
| <span>Progress</span> |
| <span>10%</span> |
| </div> |
| <div class="w-full bg-gray-200 rounded-full h-2"> |
| <div class="bg-gradient-to-r from-indigo-500 to-purple-500 h-2 rounded-full" style="width: 10%"></div> |
| </div> |
| </div> |
| <div class="flex justify-between items-center"> |
| <span class="text-sm text-gray-500">10 courses • 60 hours</span> |
| <button class="text-indigo-600 hover:text-indigo-800 font-medium inline-flex items-center"> |
| Explore <i class="fas fa-chevron-right ml-1 text-sm"></i> |
| </button> |
| </div> |
| </div> |
| <div class="path-card bg-white p-8 rounded-xl"> |
| <div class="flex items-center mb-6"> |
| <div class="w-12 h-12 bg-indigo-100 rounded-xl flex items-center justify-center mr-4"> |
| <i class="fas fa-chart-pie text-indigo-600 text-xl"></i> |
| </div> |
| <h3 class="text-xl font-bold">Data Scientist</h3> |
| </div> |
| <p class="text-gray-600 mb-6">From Python basics to advanced machine learning and data visualization techniques.</p> |
| <div class="mb-6"> |
| <div class="flex justify-between text-sm text-gray-500 mb-1"> |
| <span>Progress</span> |
| <span>5%</span> |
| </div> |
| <div class="w-full bg-gray-200 rounded-full h-2"> |
| <div class="bg-gradient-to-r from-indigo-500 to-purple-500 h-2 rounded-full" style="width: 5%"></div> |
| </div> |
| </div> |
| <div class="flex justify-between items-center"> |
| <span class="text-sm text-gray-500">12 courses • 80 hours</span> |
| <button class="text-indigo-600 hover:text-indigo-800 font-medium inline-flex items-center"> |
| Explore <i class="fas fa-chevron-right ml-1 text-sm"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="testimonials" class="py-16 bg-white"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="text-center mb-16"> |
| <span class="inline-block px-3 py-1 text-sm font-semibold text-indigo-600 bg-indigo-100 rounded-full mb-4">Success Stories</span> |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">What Our <span class="text-indigo-600">Students Say</span></h2> |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto"> |
| Don't just take our word for it - hear from our community |
| </p> |
| </div> |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| <div class="testimonial-card bg-gray-50 p-8 rounded-xl"> |
| <div class="flex items-center mb-4"> |
| <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/32.jpg" alt="Student"> |
| <div> |
| <h4 class="font-bold">Emily Rodriguez</h4> |
| <p class="text-gray-500 text-sm">Web Developer @TechCorp</p> |
| </div> |
| </div> |
| <p class="text-gray-600 mb-4">"EdGlow's web development bootcamp completely transformed my career. The hands-on projects and mentor support helped me land my first developer job within 3 months!"</p> |
| <div class="flex items-center"> |
| <div class="flex mr-2"> |
| <i class="fas fa-star text-yellow-400"></i> |
| <i class="fas fa-star text-yellow-400"></i> |
| <i class="fas fa-star text-yellow-400"></i> |
| <i class="fas fa-star text-yellow-400"></i> |
| <i class="fas fa-star text-yellow-400"></i> |
| </div> |
| <span class="text-sm text-gray-500">2 months ago</span> |
| </div> |
| </div> |
| <div class="testimonial-card bg-gray-50 p-8 rounded-xl"> |
| <div class="flex items-center mb-4"> |
| <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/54.jpg" alt="Student"> |
| <div> |
| <h4 class="font-bold">David Kim</h4> |
| <p class="text-gray-500 text-sm">Data Analyst @DataInsights</p> |
| </div> |
| </div> |
| <p class="text-gray-600 mb-4">"The data science path gave me practical skills I could immediately apply at work. The adaptive learning system kept me challenged but never overwhelmed."</p> |
| <div class="flex items-center"> |
| <div class="flex mr-2"> |
| <i class="fas fa-star text-yellow-400"></i> |
| <i class="fas fa-star text-yellow-400"></i> |
| <i class="fas fa-star text-yellow-400"></i> |
| <i class="fas fa-star text-yellow-400"></i> |
| <i class="fas fa-star text-yellow-400"></i> |
| </div> |
| <span class="text-sm text-gray-500">1 month ago</span> |
| </div> |
| </div> |
| <div class="testimonial-card bg-gray-50 p-8 rounded-xl"> |
| <div class="flex items-center mb-4"> |
| <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Student"> |
| <div> |
| <h4 class="font-bold">Sophia Williams</h4> |
| <p class="text-gray-500 text-sm">UX Designer @CreativeMinds</p> |
| </div> |
| </div> |
| <p class="text-gray-600 mb-4">"As a visual learner, I loved the interactive exercises and video tutorials. The community features made it easy to get feedback on my portfolio projects."</p> |
| <div class="flex items-center"> |
| <div class="flex mr-2"> |
| <i class="fas fa-star text-yellow-400"></i> |
| <i class="fas fa-star text-yellow-400"></i> |
| <i class="fas fa-star text-yellow-400"></i> |
| <i class="fas fa-star text-yellow-400"></i> |
| <i class="fas fa-star-half-alt text-yellow-400"></i> |
| </div> |
| <span class="text-sm text-gray-500">3 weeks ago</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="py-16 bg-indigo-600 text-white"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="md:flex items-center justify-between"> |
| <div class="md:w-1/2 mb-8 md:mb-0"> |
| <h2 class="text-2xl md:text-3xl font-bold mb-2">Stay Updated</h2> |
| <p class="text-indigo-100 max-w-md">Subscribe to our newsletter for course updates, learning tips, and exclusive offers.</p> |
| </div> |
| <div class="md:w-1/2"> |
| <form class="flex flex-col sm:flex-row gap-3"> |
| <input type="email" placeholder="Your email address" class="input-field flex-grow px-4 py-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-300 text-gray-900"> |
| <button type="submit" class="btn-primary px-6 py-3 rounded-lg font-semibold whitespace-nowrap"> |
| Subscribe <i class="fas fa-paper-plane ml-2"></i> |
| </button> |
| </form> |
| <p class="text-indigo-200 text-sm mt-2">We respect your privacy. Unsubscribe at any time.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="gradient-bg text-white py-20 relative overflow-hidden"> |
| <div class="absolute inset-0 opacity-10" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS1vcGFjaXR5PSIwLjIiIHN0cm9rZS13aWR0aD0iMSI+PHBhdGggZD0iTTAgMEg0MFY0MEgweiIvPjwvc3ZnPg==');"></div> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative z-10"> |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Transform Your Career?</h2> |
| <p class="text-xl opacity-90 mb-10 max-w-3xl mx-auto">Join thousands of students who've accelerated their learning with EdGlow's personalized platform.</p> |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> |
| <button class="btn-primary px-8 py-4 rounded-lg font-semibold text-lg shadow-lg flex items-center justify-center"> |
| Start 7-Day Free Trial <i class="fas fa-arrow-right ml-2"></i> |
| </button> |
| <button class="btn-secondary text-white px-8 py-4 rounded-lg font-semibold text-lg flex items-center justify-center"> |
| <i class="fas fa-comment-dots mr-2"></i> Talk to an Advisor |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <footer class="bg-gray-900 text-white pt-16 pb-8"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="grid grid-cols-2 md:grid-cols-5 gap-8"> |
| <div class="md:col-span-2"> |
| <div class="flex items-center mb-4"> |
| <i class="fas fa-graduation-cap text-indigo-400 text-2xl mr-2"></i> |
| <span class="text-xl font-bold text-white">EdGlow</span> |
| </div> |
| <p class="text-gray-400 mb-6">Empowering learners worldwide with personalized, accessible education.</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-linkedin-in"></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-youtube"></i></a> |
| </div> |
| </div> |
| <div> |
| <h3 class="text-lg font-semibold mb-4">Products</h3> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Courses</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Learning Paths</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Certifications</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Pricing</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Mobile App</a></li> |
| </ul> |
| </div> |
| <div> |
| <h3 class="text-lg font-semibold mb-4">Company</h3> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-400 hover:text-white transition-colors">About Us</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Careers</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Blog</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Press</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Partners</a></li> |
| </ul> |
| </div> |
| <div> |
| <h3 class="text-lg font-semibold mb-4">Support</h3> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Help Center</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Contact Us</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition-colors">FAQ</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Community</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Feedback</a></li> |
| </ul> |
| </div> |
| </div> |
| <div class="mt-12 pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center"> |
| <p class="text-gray-400">© 2023 EdGlow. All rights reserved.</p> |
| <div class="mt-4 md:mt-0 flex space-x-6"> |
| <a href="#" class="text-gray-400 hover:text-white transition-colors">Terms</a> |
| <a href="#" class="text-gray-400 hover:text-white transition-colors">Privacy</a> |
| <a href="#" class="text-gray-400 hover:text-white transition-colors">Cookies</a> |
| <a href="#" class="text-gray-400 hover:text-white transition-colors">Accessibility</a> |
| </div> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { |
| const menu = document.getElementById('mobile-menu'); |
| menu.classList.toggle('hidden'); |
| }); |
| |
| |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
| anchor.addEventListener('click', function(e) { |
| e.preventDefault(); |
| |
| |
| const mobileMenu = document.getElementById('mobile-menu'); |
| if (!mobileMenu.classList.contains('hidden')) { |
| mobileMenu.classList.add('hidden'); |
| } |
| |
| |
| const targetId = this.getAttribute('href'); |
| if (targetId !== '#') { |
| document.querySelector(targetId).scrollIntoView({ |
| behavior: 'smooth' |
| }); |
| } |
| }); |
| }); |
| |
| |
| window.addEventListener('scroll', function() { |
| const nav = document.querySelector('nav'); |
| if (window.scrollY > 10) { |
| nav.classList.add('shadow-lg'); |
| nav.classList.remove('shadow-sm'); |
| } else { |
| nav.classList.remove('shadow-lg'); |
| nav.classList.add('shadow-sm'); |
| } |
| }); |
| |
| |
| const animateOnScroll = () => { |
| const elements = document.querySelectorAll('.course-card, .feature-card, .testimonial-card'); |
| |
| elements.forEach(element => { |
| const elementPosition = element.getBoundingClientRect().top; |
| const screenPosition = window.innerHeight / 1.2; |
| |
| if (elementPosition < screenPosition) { |
| element.style.opacity = '1'; |
| element.style.transform = 'translateY(0)'; |
| } |
| }); |
| }; |
| |
| |
| document.querySelectorAll('.course-card, .feature-card, .testimonial-card').forEach(el => { |
| el.style.opacity = '0'; |
| el.style.transform = 'translateY(20px)'; |
| el.style.transition = 'opacity 0.6s ease, transform 0.6s ease'; |
| }); |
| |
| |
| window.addEventListener('load', animateOnScroll); |
| window.addEventListener('scroll', animateOnScroll); |
| |
| |
| const newsletterForm = document.querySelector('form'); |
| if (newsletterForm) { |
| newsletterForm.addEventListener('submit', function(e) { |
| e.preventDefault(); |
| const emailInput = this.querySelector('input[type="email"]'); |
| if (emailInput.value) { |
| alert('Thank you for subscribing! You will receive our newsletter soon.'); |
| emailInput.value = ''; |
| } |
| }); |
| } |
| </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=Winshow/edglow" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
