'use client'; import { useState } from 'react'; import Link from 'next/link'; import { useRouter } from 'next/navigation'; const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000'; export default function Home() { const router = useRouter(); const [role, setRole] = useState<'student' | 'teacher'>('student'); const [mobileMenuOpen, setMobileMenuOpen] = useState(false); const [loginEmail, setLoginEmail] = useState(''); const [loginPassword, setLoginPassword] = useState(''); const [loginError, setLoginError] = useState(''); const [isLoggingIn, setIsLoggingIn] = useState(false); const handleLogin = async (e: React.FormEvent) => { e.preventDefault(); setLoginError(''); setIsLoggingIn(true); try { let user; let token; // Try API login first try { const response = await fetch(`${API_URL}/auth/login`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ email: loginEmail, password: loginPassword, }), }); if (response.ok) { const data = await response.json(); user = data.user; token = data.token; localStorage.setItem('learnflow_token', token); } else if (response.status === 401) { setLoginError('Invalid email or password'); setIsLoggingIn(false); return; } else { throw new Error('API not available'); } } catch (apiError) { // Fallback to localStorage console.log('Using localStorage fallback for login'); const users = JSON.parse(localStorage.getItem('learnflow_users') || '[]'); user = users.find((u: any) => u.email === loginEmail && u.password === loginPassword); if (!user) { setLoginError('Invalid email or password'); setIsLoggingIn(false); return; } } // Check if role matches if (user.role !== role) { setLoginError(`This account is registered as a ${user.role}. Please select the correct role.`); setIsLoggingIn(false); return; } // Set current user session localStorage.setItem('learnflow_current_user', JSON.stringify({ id: user.id, name: user.name, email: user.email, role: user.role, })); // Redirect based on role if (role === 'student') { router.push('/student/dashboard'); } else { router.push('/teacher/dashboard'); } } catch (err) { setLoginError('Something went wrong. Please try again.'); setIsLoggingIn(false); } }; const categories = [ { name: 'Python Basics', color: 'teal', icon: '🐍' }, { name: 'Data Science', color: 'lavender', icon: '📊' }, { name: 'Web Dev', color: 'coral', icon: '🌐' }, { name: 'AI & ML', color: 'sage', icon: '🤖' }, ]; const features = [ { icon: ( ), title: 'AI-Powered Learning', description: 'Personalized learning paths that adapt to your unique pace and style', color: 'teal', }, { icon: ( ), title: 'Interactive Coding', description: 'Practice with real-time code execution and instant feedback', color: 'lavender', }, { icon: ( ), title: 'Expert Community', description: 'Connect with mentors and peers who support your learning journey', color: 'coral', }, { icon: ( ), title: 'Verified Certificates', description: 'Earn industry-recognized credentials that boost your career', color: 'sage', }, ]; const courses = [ { title: 'Python for Beginners', description: 'Start your coding journey with the most beginner-friendly language', duration: '8 weeks', level: 'Beginner', rating: 4.9, students: '15,000+', image: '🐍', color: 'teal', }, { title: 'Data Science Essentials', description: 'Master data analysis, visualization, and machine learning fundamentals', duration: '12 weeks', level: 'Intermediate', rating: 4.8, students: '12,000+', image: '📊', color: 'lavender', }, { title: 'Full Stack Web Development', description: 'Build modern web applications from frontend to backend', duration: '16 weeks', level: 'Intermediate', rating: 4.7, students: '10,000+', image: '🌐', color: 'coral', }, ]; const testimonials = [ { quote: "LearnFlow transformed my career. The AI tutor felt like having a personal mentor available 24/7.", name: "Sarah Ahmed", role: "Software Developer", avatar: "SA", }, { quote: "The interactive coding exercises made learning Python actually fun. I went from zero to building apps in weeks.", name: "Ali Hassan", role: "Data Analyst", avatar: "AH", }, { quote: "Finally, a learning platform that adapts to my pace. No more feeling left behind or bored.", name: "Fatima Khan", role: "Web Developer", avatar: "FK", }, ]; return (
{/* Header */}
LF
LearnFlow
Sign Up Login
{mobileMenuOpen && (
{[ { name: 'Home', href: '/' }, { name: 'Courses', href: '/courses' }, { name: 'About', href: '/about' }, { name: 'Resources', href: '/resources' }, { name: 'Contact', href: '/contact' }, ].map((item, i) => ( {item.name} ))}
Sign Up Login
)}
{/* Hero Section */}
{/* Decorative blobs */}
AI-Powered Learning Platform

Your Journey to{' '} Programming Mastery {' '} Starts Here

Experience personalized learning with AI tutors that understand your pace, answer your questions, and guide you every step of the way.

Start Learning Free Explore Courses
{/* Trust badges */}
50,000+ Students
95% Success Rate
24/7 Support
{/* Hero Card */}
🎓

Start Your Learning Journey

Interactive Python tutoring with real-time AI feedback

{[ { value: '50K+', label: 'Students', bg: 'bg-teal-50', text: 'text-teal-700' }, { value: '100+', label: 'Courses', bg: 'bg-lavender-50', text: 'text-lavender-700' }, { value: '95%', label: 'Success', bg: 'bg-coral-50', text: 'text-coral-700' }, { value: '24/7', label: 'Support', bg: 'bg-sage-50', text: 'text-sage-700' }, ].map((stat) => (
{stat.value}
{stat.label}
))}
{/* Decorative elements */}
{/* Categories Section */}
{categories.map((cat) => ( ))}
{/* Features Section */}

Why Choose LearnFlow?

Our platform combines cutting-edge AI with proven learning methods to create an experience that's effective and enjoyable

{features.map((feature) => (
{feature.icon}

{feature.title}

{feature.description}

))}
{/* Courses Section */}

Popular Courses

Choose from our carefully crafted programs designed to take you from beginner to professional

{courses.map((course) => (
{course.image}
{course.level}

{course.title}

{course.description}

{course.duration} {course.rating} {course.students}
))}
View All Courses
{/* Testimonials Section */}

What Our Students Say

Join thousands of learners who have transformed their careers with LearnFlow

{testimonials.map((testimonial, index) => (
{[...Array(5)].map((_, i) => ( ))}

"{testimonial.quote}"

{testimonial.avatar}
{testimonial.name}
{testimonial.role}
))}
{/* Login Section */}

Welcome Back

Access your personalized learning dashboard

{/* Login Error */} {loginError && (
{loginError}
)}
{ setLoginEmail(e.target.value); setLoginError(''); }} className="input-wellness" placeholder="you@example.com" disabled={isLoggingIn} />
{ setLoginPassword(e.target.value); setLoginError(''); }} className="input-wellness" placeholder="Enter your password" disabled={isLoggingIn} />
Forgot password?

Don't have an account?{' '} Sign up for free

{/* Newsletter Section */}

Stay Updated with Latest Courses

Subscribe to our newsletter and get notified about new courses, tips, and exclusive offers

{/* Footer */}
); }