Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>LearnHub - E-Learning Platform</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script src="https://unpkg.com/react@18/umd/react.development.js"></script> | |
| <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script> | |
| <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| } | |
| body { | |
| background-color: #f5f5f7; | |
| color: #333; | |
| line-height: 1.6; | |
| } | |
| .container { | |
| width: 100%; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 0 20px; | |
| } | |
| /* Header Styles */ | |
| header { | |
| background-color: #fff; | |
| box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); | |
| position: fixed; | |
| width: 100%; | |
| top: 0; | |
| z-index: 1000; | |
| } | |
| .navbar { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 15px 0; | |
| } | |
| .logo { | |
| font-size: 24px; | |
| font-weight: 700; | |
| color: #2a2a2a; | |
| text-decoration: none; | |
| } | |
| .logo span { | |
| color: #3a86ff; | |
| } | |
| .nav-links { | |
| display: flex; | |
| list-style: none; | |
| } | |
| .nav-links li { | |
| margin-left: 30px; | |
| } | |
| .nav-links a { | |
| text-decoration: none; | |
| color: #333; | |
| font-weight: 500; | |
| transition: color 0.3s; | |
| } | |
| .nav-links a:hover { | |
| color: #3a86ff; | |
| } | |
| .nav-buttons .btn { | |
| margin-left: 15px; | |
| } | |
| .btn { | |
| display: inline-block; | |
| padding: 10px 20px; | |
| border-radius: 5px; | |
| font-weight: 500; | |
| text-decoration: none; | |
| transition: all 0.3s; | |
| cursor: pointer; | |
| } | |
| .btn-outline { | |
| border: 1px solid #3a86ff; | |
| color: #3a86ff; | |
| background-color: transparent; | |
| } | |
| .btn-outline:hover { | |
| background-color: #3a86ff; | |
| color: #fff; | |
| } | |
| .btn-primary { | |
| background-color: #3a86ff; | |
| color: #fff; | |
| border: 1px solid #3a86ff; | |
| } | |
| .btn-primary:hover { | |
| background-color: #2a75ee; | |
| border-color: #2a75ee; | |
| } | |
| /* Hero Section */ | |
| .hero { | |
| padding: 150px 0 100px; | |
| text-align: center; | |
| background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); | |
| } | |
| .hero h1 { | |
| font-size: 48px; | |
| font-weight: 700; | |
| margin-bottom: 20px; | |
| color: #2a2a2a; | |
| } | |
| .hero p { | |
| font-size: 20px; | |
| color: #666; | |
| max-width: 700px; | |
| margin: 0 auto 40px; | |
| } | |
| .hero-buttons { | |
| display: flex; | |
| justify-content: center; | |
| gap: 20px; | |
| } | |
| /* Features Section */ | |
| .section { | |
| padding: 80px 0; | |
| } | |
| .section-title { | |
| text-align: center; | |
| margin-bottom: 60px; | |
| } | |
| .section-title h2 { | |
| font-size: 36px; | |
| font-weight: 7a7a7a7a; | |
| color: #2a2a2a; | |
| margin-bottom: 15px; | |
| } | |
| .section-title p { | |
| font-size: 18px; | |
| color: #666; | |
| max-width: 700px; | |
| margin: 0 auto; | |
| } | |
| .features { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 30px; | |
| } | |
| .feature-card { | |
| background-color: #fff; | |
| border-radius: 10px; | |
| padding: 30px; | |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); | |
| transition: transform 0.3s, box-shadow 0.3s; | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); | |
| } | |
| .feature-icon { | |
| font-size: 40px; | |
| color: #3a86ff; | |
| margin-bottom: 20px; | |
| } | |
| .feature-card h3 { | |
| font-size: 22px; | |
| font-weight: 600; | |
| margin-bottom: 15px; | |
| color: #2a2a2a; | |
| } | |
| /* Courses Section */ | |
| .courses { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); | |
| gap: 30px; | |
| } | |
| .course-card { | |
| background-color: #fff; | |
| border-radius: 10px; | |
| overflow: hidden; | |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); | |
| transition: transform 0.3s, box-shadow 0.3s; | |
| } | |
| .course-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); | |
| } | |
| .course-image { | |
| height: 180px; | |
| overflow: hidden; | |
| } | |
| .course-image img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| transition: transform 0.5s; | |
| } | |
| .course-card:hover .course-image img { | |
| transform: scale(1.05); | |
| } | |
| .course-content { | |
| padding: 20px; | |
| } | |
| .course-category { | |
| display: inline-block; | |
| background-color: #e9f5ff; | |
| color: #3a86ff; | |
| font-size: 12px; | |
| padding: 5px 10px; | |
| border-radius: 5px; | |
| margin-bottom: 10px; | |
| font-weight: 600; | |
| } | |
| .course-card h3 { | |
| font-size: 18px; | |
| font-weight: 600; | |
| margin-bottom: 10px; | |
| color: #2a2a2a; | |
| } | |
| .course-instructor { | |
| display: flex; | |
| align-items: center; | |
| margin-bottom: 15px; | |
| font-size: 14px; | |
| color: #666; | |
| } | |
| .course-instructor img { | |
| width: 30px; | |
| height: 30px; | |
| border-radius: 50%; | |
| margin-right: 10px; | |
| object-fit: cover; | |
| } | |
| .course-meta { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| font-size: 14px; | |
| } | |
| .course-price { | |
| font-weight: 700; | |
| color: #2a2a2a; | |
| } | |
| .course-price.free { | |
| color: #28a745; | |
| } | |
| .course-rating { | |
| color: #ffc107; | |
| } | |
| /* Testimonials Section */ | |
| .testimonials { | |
| background-color: #fff; | |
| padding: 80px 0; | |
| } | |
| .testimonial-slider { | |
| max-width: 800px; | |
| margin: 0 auto; | |
| text-align: center; | |
| position: relative; | |
| } | |
| .testimonial { | |
| padding: 30px; | |
| } | |
| .testimonial-avatar { | |
| width: 80px; | |
| height: 80px; | |
| border-radius: 50%; | |
| object-fit: cover; | |
| margin: 0 auto 20px; | |
| border: 3px solid #3a86ff; | |
| } | |
| .testimonial-quote { | |
| font-size: 18px; | |
| font-style: italic; | |
| color: #555; | |
| margin-bottom: 20px; | |
| line-height: 1.8; | |
| } | |
| .testimonial-author { | |
| font-weight: 600; | |
| color: #2a2a2a; | |
| margin-bottom: 5px; | |
| } | |
| .testimonial-role { | |
| color: #666; | |
| font-size: 14px; | |
| } | |
| /* CTA Section */ | |
| .cta { | |
| background: linear-gradient(135deg, #3a86ff 0%, #2667cc 100%); | |
| color: #fff; | |
| padding: 80px 0; | |
| text-align: center; | |
| } | |
| .cta h2 { | |
| font-size: 36px; | |
| font-weight: 700; | |
| margin-bottom: 20px; | |
| } | |
| .cta p { | |
| font-size: 18px; | |
| max-width: 700px; | |
| margin: 0 auto 40px; | |
| opacity: 0.9; | |
| } | |
| /* Footer */ | |
| footer { | |
| background-color: #2a2a2a; | |
| color: #fff; | |
| padding: 60px 0 20px; | |
| } | |
| .footer-content { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 40px; | |
| margin-bottom: 40px; | |
| } | |
| .footer-column h3 { | |
| font-size: 18px; | |
| font-weight: 600; | |
| margin-bottom: 20px; | |
| } | |
| .footer-links { | |
| list-style: none; | |
| } | |
| .footer-links li { | |
| margin-bottom: 10px; | |
| } | |
| .footer-links a { | |
| color: #bbb; | |
| text-decoration: none; | |
| transition: color 0.3s; | |
| } | |
| .footer-links a:hover { | |
| color: #fff; | |
| } | |
| .social-links { | |
| display: flex; | |
| gap: 15px; | |
| margin-top: 20px; | |
| } | |
| .social-links a { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| background-color: rgba(255, 255, 255, 0.1); | |
| color: #fff; | |
| transition: background-color 0.3s; | |
| } | |
| .social-links a:hover { | |
| background-color: #3a86ff; | |
| } | |
| .copyright { | |
| text-align: center; | |
| padding-top: 20px; | |
| border-top: 1px solid rgba(255, 255, 255, 0.1); | |
| color: #bbb; | |
| font-size: 14px; | |
| } | |
| /* Modal Styles */ | |
| .modal { | |
| display: none; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-color: rgba(0, 0, 0, 0.5); | |
| z-index: 2000; | |
| overflow-y: auto; | |
| } | |
| .modal.active { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .modal-content { | |
| background-color: #fff; | |
| border-radius: 10px; | |
| width: 100%; | |
| max-width: 500px; | |
| overflow: hidden; | |
| transform: translateY(20px); | |
| opacity: 0; | |
| transition: transform 0.3s, opacity 0.3s; | |
| } | |
| .modal.active .modal-content { | |
| transform: translateY(0); | |
| opacity: 1; | |
| } | |
| .modal-header { | |
| padding: 20px; | |
| border-bottom: 1px solid #eee; | |
| position: relative; | |
| } | |
| .modal-title { | |
| font-size: 22px; | |
| font-weight: 600; | |
| color: #2a2a2a; | |
| margin: 0; | |
| } | |
| .close-modal { | |
| position: absolute; | |
| top: 20px; | |
| right: 20px; | |
| font-size: 24px; | |
| cursor: pointer; | |
| color: #999; | |
| transition: color 0.3s; | |
| } | |
| .close-modal:hover { | |
| color: #333; | |
| } | |
| .modal-body { | |
| padding: 20px; | |
| } | |
| .form-group { | |
| margin-bottom: 20px; | |
| } | |
| .form-group label { | |
| display: block; | |
| margin-bottom: 8px; | |
| font-weight: 500; | |
| color: #555; | |
| } | |
| .form-control { | |
| width: 100%; | |
| padding: 12px 15px; | |
| border: 1px solid #ddd; | |
| border-radius: 5px; | |
| font-size: 16px; | |
| transition: border-color 0.3s; | |
| } | |
| .form-control:focus { | |
| outline: none; | |
| border-color: #3a86ff; | |
| } | |
| .remember-forgot { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 20px; | |
| } | |
| .remember-me { | |
| display: flex; | |
| align-items: center; | |
| } | |
| .remember-me input { | |
| margin-right: 8px; | |
| } | |
| .forgot-password { | |
| color: #3a86ff; | |
| text-decoration: none; | |
| font-size: 14px; | |
| } | |
| .forgot-password:hover { | |
| text-decoration: underline; | |
| } | |
| .divider { | |
| position: relative; | |
| margin: 20px 0; | |
| text-align: center; | |
| color: #999; | |
| } | |
| .divider::before { | |
| content: ""; | |
| position: absolute; | |
| top: 50%; | |
| left: 0; | |
| width: 100%; | |
| height: 1px; | |
| background-color: #eee; | |
| z-index: -1; | |
| } | |
| .divider span { | |
| background-color: #fff; | |
| padding: 0 15px; | |
| } | |
| .social-buttons { | |
| display: flex; | |
| gap: 15px; | |
| margin-bottom: 20px; | |
| } | |
| .social-btn { | |
| flex: 1; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 10px; | |
| border-radius: 5px; | |
| border: 1px solid #ddd; | |
| background-color: transparent; | |
| cursor: pointer; | |
| transition: background-color 0.3s; | |
| } | |
| .social-btn i { | |
| margin-right: 8px; | |
| font-size: 18px; | |
| } | |
| .social-btn.google { | |
| color: #DB4437; | |
| } | |
| .social-btn.google:hover { | |
| background-color: rgba(219, 68, 55, 0.1); | |
| } | |
| .social-btn.facebook { | |
| color: #1877F2; | |
| } | |
| .social-btn.facebook:hover { | |
| background-color: rgba(24, 119, 242, 0.1); | |
| } | |
| .social-btn.apple { | |
| color: #000; | |
| } | |
| .social-btn.apple:hover { | |
| background-color: rgba(0, 0, 0, 0.1); | |
| } | |
| .login-link { | |
| text-align: center; | |
| margin-top: 20px; | |
| color: #666; | |
| } | |
| .login-link a { | |
| color: #3a86ff; | |
| text-decoration: none; | |
| } | |
| .login-link a:hover { | |
| text-decoration: underline; | |
| } | |
| /* Mobile Menu */ | |
| .mobile-menu-btn { | |
| display: none; | |
| background: none; | |
| border: none; | |
| font-size: 24px; | |
| cursor: pointer; | |
| color: #333; | |
| } | |
| /* Responsive Styles */ | |
| @media (max-width: 992px) { | |
| .nav-links, .nav-buttons { | |
| display: none; | |
| } | |
| .mobile-menu-btn { | |
| display: block; | |
| } | |
| .hero h1 { | |
| font-size: 36px; | |
| } | |
| .hero p { | |
| font-size: 18px; | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| .hero-buttons { | |
| flex-direction: column; | |
| gap: 10px; | |
| } | |
| .btn { | |
| width: 100%; | |
| } | |
| .social-buttons { | |
| flex-direction: column; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="root"></div> | |
| <script type="text/babel"> | |
| const { useState } = React; | |
| // Header Component | |
| function Header({ openLoginModal, openSignupModal }) { | |
| return ( | |
| <header> | |
| <div className="container"> | |
| <nav className="navbar"> | |
| <a href="#" className="logo">Learn<span>Hub</span></a> | |
| <ul className="nav-links"> | |
| <li><a href="#">Home</a></li> | |
| <li><a href="#">Courses</a></li> | |
| <li><a href="#">Features</a></li> | |
| <li><a href="#">Pricing</a></li> | |
| <li><a href="#">About</a></li> | |
| <li><a href="#">Contact</a></li> | |
| </ul> | |
| <div className="nav-buttons"> | |
| <a href="#" className="btn btn-outline" onClick={openLoginModal}>Log In</a> | |
| <a href="#" className="btn btn-primary" onClick={openSignupModal}>Sign Up</a> | |
| </div> | |
| <button className="mobile-menu-btn"> | |
| <i className="fas fa-bars"></i> | |
| </button> | |
| </nav> | |
| </div> | |
| </header> | |
| ); | |
| } | |
| // Hero Section Component | |
| function HeroSection({ openSignupModal }) { | |
| return ( | |
| <section className="hero"> | |
| <div className="container"> | |
| <h1>Learn Without Limits</h1> | |
| <p>Start, switch, or advance your career with more than 5,000 courses, Professional Certificates, and degrees from world-class universities and companies.</p> | |
| <div className="hero-buttons"> | |
| <a href="#" className="btn btn-primary" onClick={openSignupModal}>Join for Free</a> | |
| <a href="#" className="btn btn-outline">Browse Courses</a> | |
| </div> | |
| </div> | |
| </section> | |
| ); | |
| } | |
| // Features Component | |
| function FeaturesSection() { | |
| const features = [ | |
| { | |
| icon: 'fas fa-laptop-code', | |
| title: 'Expert Instructors', | |
| description: 'Learn from industry experts who are passionate about teaching and have real-world experience.' | |
| }, | |
| { | |
| icon: 'fas fa-chart-line', | |
| title: 'Interactive Content', | |
| description: 'Engaging videos, quizzes, and projects that make learning enjoyable and effective.' | |
| }, | |
| { | |
| icon: 'fas fa-certificate', | |
| title: 'Certification', | |
| description: 'Earn recognized certificates upon course completion to showcase your achievements.' | |
| } | |
| ]; | |
| return ( | |
| <section className="section"> | |
| <div className="container"> | |
| <div className="section-title"> | |
| <h2>Why Choose LearnHub</h2> | |
| <p>We offer a comprehensive learning experience that helps you gain skills and knowledge for personal and professional growth.</p> | |
| </div> | |
| <div className="features"> | |
| {features.map((feature, index) => ( | |
| <div className="feature-card" key={index}> | |
| <div className="feature-icon"> | |
| <i className={feature.icon}></i> | |
| </div> | |
| <h3>{feature.title}</h3> | |
| <p>{feature.description}</p> | |
| </div> | |
| ))} | |
| </div> | |
| </div> | |
| </section> | |
| ); | |
| } | |
| // Courses Component | |
| function CoursesSection() { | |
| const courses = [ | |
| { | |
| image: "https://images.unsplash.com/photo-1498050108023-c5249f4df085?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60", | |
| category: "Web Development", | |
| title: "Complete Web Development Bootcamp 2023", | |
| instructorImage: "https://randomuser.me/api/portraits/men/32.jpg", | |
| instructorName: "John Smith", | |
| price: "$89.99", | |
| rating: 4.8 | |
| }, | |
| { | |
| image: "https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60", | |
| category: "Data Science", | |
| title: "Python for Data Science and Machine Learning", | |
| instructorImage: "https://randomuser.me/api/portraits/women/44.jpg", | |
| instructorName: "Sarah Johnson", | |
| price: "$99.99", | |
| rating: 4.7 | |
| }, | |
| { | |
| image: "https://images.unsplash.com/photo-1467232004584-a241de8bcf5d?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60", | |
| category: "Photography", | |
| title: "Master Digital Photography - Beginner to Advanced", | |
| instructorImage: "https://randomuser.me/api/portraits/men/22.jpg", | |
| instructorName: "Michael Brown", | |
| price: "$59.99", | |
| rating: 4.9 | |
| } | |
| ]; | |
| return ( | |
| <section className="section bg-light"> | |
| <div className="container"> | |
| <div className="section-title"> | |
| <h2>Popular Courses</h2> | |
| <p>Browse our most popular courses handpicked by thousands of learners worldwide.</p> | |
| </div> | |
| <div className="courses"> | |
| {courses.map((course, index) => ( | |
| <div className="course-card" key={index}> | |
| <div className="course-image"> | |
| <img src={course.image} alt={course.title} /> | |
| </div> | |
| <div className="course-content"> | |
| <span className="course-category">{course.category}</span> | |
| <h3>{course.title}</h3> | |
| <div className="course-instructor"> | |
| <img src={course.instructorImage} alt="Instructor" /> | |
| <span>{course.instructorName}</span> | |
| </div> | |
| <div className="course-meta"> | |
| <span className="course-price">{course.price}</span> | |
| <span className="course-rating"> | |
| <i className="fas fa-star"></i> {course.rating} | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| ))} | |
| </div> | |
| <div className="text-center" style={{marginTop: '40px'}}> | |
| <a href="#" className="btn btn-outline">View All Courses</a> | |
| </div> | |
| </div> | |
| </section> | |
| ); | |
| } | |
| // Testimonials Component | |
| function TestimonialsSection() { | |
| return ( | |
| <section className="testimonials"> | |
| <div className="container"> | |
| <div className="section-title"> | |
| <h2>What Our Students Say</h2> | |
| <p>Hear from our students about their learning experiences with LearnHub.</p> | |
| </div> | |
| <div className="testimonial-slider"> | |
| <div className="testimonial"> | |
| <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Student" className="testimonial-avatar" /> | |
| <p className="testimonial-quote">"LearnHub has transformed my career. The courses are well-structured and the instructors are knowledgeable. I landed my dream job after completing the Full Stack Developer course!"</p> | |
| <h4 className="testimonial-author">Emily Rodriguez</h4> | |
| <p className="testimonial-role">Full Stack Developer at TechCorp</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| ); | |
| } | |
| // CTA Component | |
| function CTASection({ openSignupModal }) { | |
| return ( | |
| <section className="cta"> | |
| <div className="container"> | |
| <h2>Start Learning Today</h2> | |
| <p>Join over 5 million learners worldwide and gain access to thousands of courses taught by industry experts.</p> | |
| <a href="#" className="btn btn-primary" onClick={openSignupModal}>Sign Up for Free</a> | |
| </div> | |
| </section> | |
| ); | |
| } | |
| // Footer Component | |
| function Footer() { | |
| return ( | |
| <footer> | |
| <div className="container"> | |
| <div className="footer-content"> | |
| <div className="footer-column"> | |
| <h3>LearnHub</h3> | |
| <p>Empowering individuals through technology education that they can use to advance careers and lives.</p> | |
| <div className="social-links"> | |
| <a href="#"><i className="fab fa-facebook-f"></i></a> | |
| <a href="#"><i className="fab fa-twitter"></i></a> | |
| <a href="#"><i className="fab fa-linkedin-in"></i></a> | |
| <a href="#"><i className="fab fa-instagram"></i></a> | |
| <a href="#"><i className="fab fa-youtube"></i></a> | |
| </div> | |
| </div> | |
| <div className="footer-column"> | |
| <h3>Courses</h3> | |
| <ul className="footer-links"> | |
| <li><a href="#">Web Development</a></li> | |
| <li><a href="#">Data Science</a></li> | |
| <li><a href="#">Mobile Development</a></li> | |
| <li><a href="#">Business</a></li> | |
| <li><a href="#">Design</a></li> | |
| </ul> | |
| </div> | |
| <div className="footer-column"> | |
| <h3>Company</h3> | |
| <ul className="footer-links"> | |
| <li><a href="#">About Us</a></li> | |
| <li><a href="#">Careers</a></li> | |
| <li><a href="#">Blog</a></li> | |
| <li><a href="#">Press</a></li> | |
| <li><a href="#">Contact Us</a></li> | |
| </ul> | |
| </div> | |
| <div className="footer-column"> | |
| <h3>Support</h3> | |
| <ul className="footer-links"> | |
| <li><a href="#">Help Center</a></li> | |
| <li><a href="#">Terms of Service</a></li> | |
| <li><a href="#">Privacy Policy</a></li> | |
| <li><a href="#">Cookie Policy</a></li> | |
| <li><a href="#">Accessibility</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div className="copyright"> | |
| <p>© 2023 LearnHub. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| ); | |
| } | |
| // Login Modal Component | |
| function LoginModal({ isOpen, closeModal, openSignupModal }) { | |
| const [formData, setFormData] = useState({ | |
| email: '', | |
| password: '', | |
| remember: false | |
| }); | |
| const handleChange = (e) => { | |
| const { name, value, type, checked } = e.target; | |
| setFormData(prev => ({ | |
| ...prev, | |
| [name]: type === 'checkbox' ? checked : value | |
| })); | |
| }; | |
| const handleSubmit = (e) => { | |
| e.preventDefault(); | |
| alert('Login functionality would be implemented here.'); | |
| closeModal(); | |
| }; | |
| if (!isOpen) return null; | |
| return ( | |
| <div className="modal active" id="login-modal"> | |
| <div className="modal-content"> | |
| <div className="modal-header"> | |
| <h3 className="modal-title">Welcome Back</h3> | |
| <span className="close-modal" onClick={closeModal}>×</span> | |
| </div> | |
| <div className="modal-body"> | |
| <div className="social-signup"> | |
| <p>Log in with your social account</p> | |
| <div className="social-buttons"> | |
| <button className="social-btn google"> | |
| <i className="fab fa-google"></i> | |
| </button> | |
| <button className="social-btn facebook"> | |
| <i className="fab fa-facebook-f"></i> | |
| </button> | |
| <button className="social-btn apple"> | |
| <i className="fab fa-apple"></i> | |
| Apple | |
| </button> | |
| </div> | |
| </div> | |
| <div className="divider">or</div> | |
| <form id="login-form" onSubmit={handleSubmit}> | |
| <div className="form-group"> | |
| <label htmlFor="login-email">Email Address</label> | |
| <input | |
| type="email" | |
| id="login-email" | |
| name="email" | |
| className="form-control" | |
| placeholder="Enter your email" | |
| value={formData.email} | |
| onChange={handleChange} | |
| required | |
| /> | |
| </div> | |
| <div className="form-group"> | |
| <label htmlFor="login-password">Password</label> | |
| <input | |
| type="password" | |
| id="login-password" | |
| name="password" | |
| className="form-control" | |
| placeholder="Enter your password" | |
| value={formData.password} | |
| onChange={handleChange} | |
| required | |
| /> | |
| </div> | |
| <div className="remember-forgot"> | |
| <div className="remember-me"> | |
| <input | |
| type="checkbox" | |
| id="remember" | |
| name="remember" | |
| checked={formData.remember} | |
| onChange={handleChange} | |
| /> | |
| <label htmlFor="remember">Remember me</label> | |
| </div> | |
| <a href="#" className="forgot-password">Forgot password?</a> | |
| </div> | |
| <div className="form-group"> | |
| <button type="submit" className="btn btn-primary" style={{width: '100%'}}>Log In</button> | |
| </div> | |
| </form> | |
| <div className="login-link"> | |
| Don't have an account? <a href="#" onClick={(e) => { e.preventDefault(); closeModal(); openSignupModal(); }}>Sign up</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| ); | |
| } | |
| // Signup Modal Component | |
| function SignupModal({ isOpen, closeModal, openLoginModal }) { | |
| const [formData, setFormData] = useState({ | |
| fullName: '', | |
| email: '', | |
| password: '', | |
| confirmPassword: '' | |
| }); | |
| const handleChange = (e) => { | |
| const { name, value } = e.target; | |
| setFormData(prev => ({ | |
| ...prev, | |
| [name]: value | |
| })); | |
| }; | |
| const handleSubmit = (e) => { | |
| e.preventDefault(); | |
| if (formData.password !== formData.confirmPassword) { | |
| alert("Passwords don't match!"); | |
| return; | |
| } | |
| alert('Signup functionality would be implemented here.'); | |
| closeModal(); | |
| }; | |
| if (!isOpen) return null; | |
| return ( | |
| <div className="modal active" id="signup-modal"> | |
| <div className="modal-content"> | |
| <div className="modal-header"> | |
| <h3 className="modal-title">Create Your LearnHub Account</h3> | |
| <span className="close-modal" onClick={closeModal}>×</span> | |
| </div> | |
| <div className="modal-body"> | |
| <div className="social-signup"> | |
| <p>Sign up with your social account</p> | |
| <div className="social-buttons"> | |
| <button className="social-btn google"> | |
| <i className="fab fa-google"></i> | |
| </button> | |
| <button className="social-btn facebook"> | |
| <i className="fab fa-facebook-f"></i> | |
| </button> | |
| <button className="social-btn apple"> | |
| <i className="fab fa-apple"></i> | |
| Apple | |
| </button> | |
| </div> | |
| </div> | |
| <div className="divider">or</div> | |
| <form id="signup-form" onSubmit={handleSubmit}> | |
| <div className="form-group"> | |
| <label htmlFor="full-name">Full Name</label> | |
| <input | |
| type="text" | |
| id="full-name" | |
| name="fullName" | |
| className="form-control" | |
| placeholder="Enter your full name" | |
| value={formData.fullName} | |
| onChange={handleChange} | |
| required | |
| /> | |
| </div> | |
| <div className="form-group"> | |
| <label htmlFor="email">Email Address</label> | |
| <input | |
| type="email" | |
| id="email" | |
| name="email" | |
| className="form-control" | |
| placeholder="Enter your email" | |
| value={formData.email} | |
| onChange={handleChange} | |
| required | |
| /> | |
| </div> | |
| <div className="form-group"> | |
| <label htmlFor="password">Password</label> | |
| <input | |
| type="password" | |
| id="password" | |
| name="password" | |
| className="form-control" | |
| placeholder="Create a password (min 8 characters)" | |
| minLength="8" | |
| value={formData.password} | |
| onChange={handleChange} | |
| required | |
| /> | |
| </div> | |
| <div className="form-group"> | |
| <label htmlFor="confirm-password">Confirm Password</label> | |
| <input | |
| type="password" | |
| id="confirm-password" | |
| name="confirmPassword" | |
| className="form-control" | |
| placeholder="Confirm your password" | |
| minLength="8" | |
| value={formData.confirmPassword} | |
| onChange={handleChange} | |
| required | |
| /> | |
| </div> | |
| <div className="form-group"> | |
| <button type="submit" className="btn btn-primary" style={{width: '100%'}}>Create Account</button> | |
| </div> | |
| </form> | |
| <div className="login-link"> | |
| Already have an account? <a href="#" onClick={(e) => { e.preventDefault(); closeModal(); openLoginModal(); }}>Log in</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| ); | |
| } | |
| // Main App Component | |
| function App() { | |
| const [modalState, setModalState] = useState({ | |
| login: false, | |
| signup: false | |
| }); | |
| const openLoginModal = () => { | |
| setModalState({ login: true, signup: false }); | |
| document.body.style.overflow = 'hidden'; | |
| }; | |
| const openSignupModal = () => { | |
| setModalState({ login: false, signup: true }); | |
| document.body.style.overflow = 'hidden'; | |
| }; | |
| const closeModals = () => { | |
| setModalState({ login: false, signup: false }); | |
| document.body.style.overflow = 'auto'; | |
| }; | |
| return ( | |
| <div className="app"> | |
| <Header | |
| openLoginModal={openLoginModal} | |
| openSignupModal={openSignupModal} | |
| /> | |
| <HeroSection openSignupModal={openSignupModal} /> | |
| <FeaturesSection /> | |
| <CoursesSection /> | |
| <TestimonialsSection /> | |
| <CTASection openSignupModal={openSignupModal} /> | |
| <Footer /> | |
| <LoginModal | |
| isOpen={modalState.login} | |
| closeModal={closeModals} | |
| openSignupModal={openSignupModal} | |
| /> | |
| <SignupModal | |
| isOpen={modalState.signup} | |
| closeModal={closeModals} | |
| openLoginModal={openLoginModal} | |
| /> | |
| </div> | |
| ); | |
| } | |
| // Render the App | |
| const rootElement = document.getElementById('root'); | |
| const root = ReactDOM.createRoot(rootElement); | |
| root.render(<App />); | |
| </script> | |
| </body> | |
| </html> |