import React, { useState } from 'react'; import { Button } from '@/components/ui/button'; import { Card } from '@/components/ui/card'; import { Container } from '@/components/ui/container'; import { Badge } from '@/components/ui/badge'; import { Avatar } from '@/components/ui/avatar'; import { Switch } from '@/components/ui/switch'; import { Menu, X, Users, BookOpen, Star, Play, Clock, Award, TrendingUp, CheckCircle } from 'lucide-react'; export default function App() { const [isMenuOpen, setIsMenuOpen] = useState(false); const [isDarkMode, setIsDarkMode] = useState(false); const courses = [ { id: 1, title: 'Advanced React Patterns', instructor: 'Sarah Chen', duration: '12 weeks', students: 1234, rating: 4.9, progress: 0, image: 'https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=800&q=80', level: 'Advanced' }, { id: 2, title: 'UI/UX Design Fundamentals', instructor: 'Marcus Johnson', duration: '8 weeks', students: 2156, rating: 4.8, progress: 65, image: 'https://images.unsplash.com/photo-1561070791-2526d30994b5?w=800&q=80', level: 'Beginner' }, { id: 3, title: 'Data Science with Python', instructor: 'Dr. Emily Rodriguez', duration: '16 weeks', students: 987, rating: 4.9, progress: 30, image: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=800&q=80', level: 'Intermediate' }, { id: 4, title: 'Digital Marketing Strategy', instructor: 'Alex Thompson', duration: '10 weeks', students: 1876, rating: 4.7, progress: 0, image: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=800&q=80', level: 'Beginner' }, { id: 5, title: 'Mobile App Development', instructor: 'Jordan Kim', duration: '14 weeks', students: 1432, rating: 4.8, progress: 85, image: 'https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c?w=800&q=80', level: 'Intermediate' }, { id: 6, title: 'Cybersecurity Essentials', instructor: 'Dr. Michael Park', duration: '12 weeks', students: 823, rating: 4.9, progress: 45, image: 'https://images.unsplash.com/photo-1550751827-4bd374c3f58b?w=800&q=80', level: 'Advanced' } ]; const instructors = [ { id: 1, name: 'Sarah Chen', title: 'Senior Frontend Engineer', company: 'Meta', students: 12500, courses: 8, rating: 4.9, image: 'https://i.pravatar.cc/200?img=1' }, { id: 2, name: 'Marcus Johnson', title: 'Lead UX Designer', company: 'Google', students: 18900, courses: 12, rating: 4.8, image: 'https://i.pravatar.cc/200?img=5' }, { id: 3, name: 'Dr. Emily Rodriguez', title: 'Data Science Director', company: 'Netflix', students: 9800, courses: 6, rating: 4.9, image: 'https://i.pravatar.cc/200?img=12' } ]; const testimonials = [ { id: 1, name: 'Jessica Williams', role: 'Product Manager at Stripe', content: 'The collaborative learning approach helped me build real-world skills that I use daily. The peer feedback system is incredible!', rating: 5, image: 'https://i.pravatar.cc/200?img=7' }, { id: 2, name: 'David Park', role: 'Frontend Developer at Vercel', content: 'I went from zero coding experience to landing my dream job in 6 months. The community support is unmatched.', rating: 5, image: 'https://i.pravatar.cc/200?img=9' }, { id: 3, name: 'Maria Garcia', role: 'UX Designer at Figma', content: 'The hands-on projects and mentor guidance accelerated my learning beyond what I thought possible.', rating: 5, image: 'https://i.pravatar.cc/200?img=15' } ]; return (

{/* Header */}

LearnHub

Light Dark

{isMenuOpen && ( )}

{/* Hero Section */}

Join 50,000+ Learners

Learn Together, Grow Faster

Experience collaborative learning with real-world projects, expert mentors, and a global community of passionate learners.

50k+ Students

500+ Courses

4.9 Rating

Students collaborating in a modern learning environment

{/* Courses Section */}

Featured Courses

Master in-demand skills with hands-on projects, expert mentorship, and collaborative learning

{courses.map((course) => (

{course.level} {course.progress > 0 && (

)}

{course.title}

by {course.instructor}

{course.duration}

{course.students.toLocaleString()}

{course.rating}

{course.progress > 0 ? (

Progress {course.progress}%

) : null}

))}

{/* Instructors Section */}

Expert Instructors

Learn from industry leaders from top companies like Google, Meta, and Netflix

{instructors.map((instructor) => ( {instructor.name}

{instructor.name}

{instructor.title}

{instructor.company}

{instructor.students.toLocaleString()}

Students

{instructor.courses}

Courses

{instructor.rating}

Rating

))}

{/* Testimonials Section */}

Student Success Stories

See how our community has transformed their careers through collaborative learning

{testimonials.map((testimonial) => (

{[...Array(testimonial.rating)].map((_, i) => ( ))}

"{testimonial.content}"

{testimonial.name}

{testimonial.role}

))}

{/* CTA Section */}

Ready to Transform Your Career?

Join thousands of learners already advancing their skills with LearnHub

No credit card required • Cancel anytime

{/* Footer */}

); }

EdTech Landing Page with Collaborative Learning