Home.js

import React from 'react';
import { Link } from 'react-router-dom';

const Home = () => {
    const loggedIn = !!localStorage.getItem('userInfo');

    return (
        <div>
            {/* HERO */}
            <div style={{ backgroundColor: 'var(--udemy-purple)', color: 'white', padding: '80px 20px', textAlign: 'center' }}>
                <h1 style={{ fontFamily: 'Merriweather, serif', fontSize: '3rem', margin: 0 }}>Learn Anytime, Anywhere</h1>
                <p style={{ fontSize: '1.15rem', marginTop: 12 }}>Interactive courses, live study rooms and collaborative whiteboards.</p>
                {!loggedIn && (
                    <div style={{ marginTop: 24 }}>
                        <Link to="/register"><button className="btn-signup" style={{ marginRight: 12 }}>Get Started</button></Link>
                        <Link to="/login"><button className="btn-login">Log in</button></Link>
                    </div>
                )}
            </div>

            {/* FEATURES */}
            <div className="page-container">
                <h2 className="section-title">Everything You Need to Study Smarter</h2>

                <div className="grid-container">
                    <FeatureCard emoji="📚" title="Premium Courses" desc="Top-tier video lectures and notes." link="/courses"/>
                    <FeatureCard emoji="🎥" title="Video Study Rooms" desc="Study live with peers and mentors." link="/study"/>
                    <FeatureCard emoji="🎨" title="Live Whiteboard" desc="Draw, solve and collaborate in real-time." link="/whiteboard"/>
                    <FeatureCard emoji="📝" title="Practice Quizzes" desc="Timed quizzes with instant feedback." link="/quizzes"/>
                    <FeatureCard emoji="📂" title="Resource Library" desc="Share notes and PDFs with the community." link="/resources"/>
                </div>
            </div>
        </div>
    );
};

const FeatureCard = ({ emoji, title, desc, link }) => (
    <div className="course-card" style={{ padding: 28, borderRadius: 12 }}>
        <div style={{ fontSize: 36, marginBottom: 8 }}>{emoji}</div>
        <h3 className="card-title">{title}</h3>
        <p className="card-author" style={{ marginTop: 8 }}>{desc}</p>
        <Link to={link}><button style={{ marginTop: 14 }} className="btn-login">Explore</button></Link>
    </div>
);

export default Home;