Seed: education template (18 files)
This commit is contained in:
@@ -0,0 +1,213 @@
|
|||||||
|
import { Link } from "react-router-dom";
|
||||||
|
import Header from "@/components/Header";
|
||||||
|
import Footer from "@/components/Footer";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Badge } from "@/components/ui/badge";
|
||||||
|
import { Card, CardContent } from "@/components/ui/card";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import { Search, Star, Users, BookOpen, Award, GraduationCap, Play, CheckCircle, ArrowRight, Quote } from "lucide-react";
|
||||||
|
|
||||||
|
const stats = [
|
||||||
|
{ icon: Users, value: "10,000+", label: "Students" },
|
||||||
|
{ icon: BookOpen, value: "200+", label: "Courses" },
|
||||||
|
{ icon: GraduationCap, value: "50+", label: "Instructors" },
|
||||||
|
{ icon: Star, value: "4.9", label: "Avg Rating" },
|
||||||
|
];
|
||||||
|
|
||||||
|
const featuredCourses = [
|
||||||
|
{ title: "Full-Stack Web Development Bootcamp", instructor: "Dr. Sarah Chen", category: "Web Dev", price: "$89", rating: 4.9, gradient: "from-indigo-500 to-purple-600" },
|
||||||
|
{ title: "Data Science & Machine Learning A-Z", instructor: "Prof. James Rivera", category: "Data Science", price: "$79", rating: 4.8, gradient: "from-amber-500 to-orange-600" },
|
||||||
|
{ title: "UI/UX Design Masterclass", instructor: "Maya Patel", category: "Design", price: "$69", rating: 4.9, gradient: "from-emerald-500 to-teal-600" },
|
||||||
|
{ title: "AI & Deep Learning with Python", instructor: "Dr. Alex Kim", category: "AI/ML", price: "$99", rating: 4.7, gradient: "from-rose-500 to-pink-600" },
|
||||||
|
{ title: "Digital Business Strategy", instructor: "Rachel Torres", category: "Business", price: "$59", rating: 4.8, gradient: "from-cyan-500 to-blue-600" },
|
||||||
|
{ title: "Growth Marketing & Analytics", instructor: "David Park", category: "Marketing", price: "$69", rating: 4.6, gradient: "from-violet-500 to-fuchsia-600" },
|
||||||
|
];
|
||||||
|
|
||||||
|
const categories = ["Web Dev", "Data Science", "Design", "Business", "Marketing", "AI/ML", "Mobile", "DevOps"];
|
||||||
|
|
||||||
|
const steps = [
|
||||||
|
{ icon: Search, title: "Browse Courses", desc: "Explore 200+ expert-led courses across dozens of categories." },
|
||||||
|
{ icon: Play, title: "Learn at Your Pace", desc: "Watch HD video lessons, complete projects, and earn certificates." },
|
||||||
|
{ icon: Award, title: "Get Certified", desc: "Receive industry-recognized certificates to boost your career." },
|
||||||
|
];
|
||||||
|
|
||||||
|
const instructors = [
|
||||||
|
{ name: "Dr. Sarah Chen", specialty: "Full-Stack Development", courses: 12, students: 3200, gradient: "from-indigo-400 to-purple-500" },
|
||||||
|
{ name: "Prof. James Rivera", specialty: "Data Science & AI", courses: 8, students: 2800, gradient: "from-amber-400 to-orange-500" },
|
||||||
|
{ name: "Maya Patel", specialty: "UI/UX Design", courses: 15, students: 4100, gradient: "from-emerald-400 to-teal-500" },
|
||||||
|
{ name: "Dr. Alex Kim", specialty: "Machine Learning", courses: 10, students: 3600, gradient: "from-rose-400 to-pink-500" },
|
||||||
|
];
|
||||||
|
|
||||||
|
const testimonials = [
|
||||||
|
{ name: "Emily Rodriguez", text: "This platform completely changed my career trajectory. The courses are incredibly well-structured and the instructors are truly world-class.", rating: 5 },
|
||||||
|
{ name: "Marcus Johnson", text: "I landed my dream job as a data scientist after completing the Data Science track. The hands-on projects made all the difference.", rating: 5 },
|
||||||
|
{ name: "Aisha Patel", text: "The community and support are phenomenal. I never felt alone in my learning journey. Best investment I have ever made in myself.", rating: 5 },
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function IndexPage() {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-white dark:bg-slate-950">
|
||||||
|
<Header />
|
||||||
|
|
||||||
|
{/* ── Hero ── */}
|
||||||
|
<section className="relative pt-32 pb-24 overflow-hidden">
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-br from-indigo-700 via-indigo-600 to-purple-700" />
|
||||||
|
<div className="absolute inset-0 opacity-30" style={{ backgroundImage: "radial-gradient(circle at 20% 50%, rgba(251,191,36,0.3) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(99,102,241,0.4) 0%, transparent 50%)" }} />
|
||||||
|
<div className="relative mx-auto max-w-7xl px-6 text-center">
|
||||||
|
<h1 className="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-white leading-tight animate-fade-up">Transform Your Career With World-Class Courses</h1>
|
||||||
|
<p className="mt-6 text-lg text-indigo-100 max-w-2xl mx-auto animate-fade-up" style={{ animationDelay: "0.1s" }}>Join thousands of learners mastering new skills with expert-led courses, hands-on projects, and industry-recognized certifications.</p>
|
||||||
|
<div className="mt-8 max-w-xl mx-auto flex gap-3 animate-fade-up" style={{ animationDelay: "0.2s" }}>
|
||||||
|
<div className="relative flex-1">
|
||||||
|
<Search className="absolute left-4 top-1/2 -translate-y-1/2 h-5 w-5 text-slate-400" />
|
||||||
|
<Input placeholder="Search courses..." className="pl-12 h-12 rounded-full bg-white/95 border-0 text-slate-900 shadow-xl" />
|
||||||
|
</div>
|
||||||
|
<Button className="h-12 px-8 rounded-full bg-amber-500 hover:bg-amber-600 text-white font-semibold shadow-xl shadow-amber-500/20 active:scale-[0.97] transition-all">Search</Button>
|
||||||
|
</div>
|
||||||
|
<div className="mt-12 grid grid-cols-2 md:grid-cols-4 gap-6 max-w-3xl mx-auto animate-fade-up" style={{ animationDelay: "0.3s" }}>
|
||||||
|
{stats.map((s, i) => (
|
||||||
|
<div key={i} className="text-center">
|
||||||
|
<s.icon className="h-6 w-6 text-amber-400 mx-auto mb-2" />
|
||||||
|
<div className="text-2xl font-bold text-white">{s.value}</div>
|
||||||
|
<div className="text-sm text-indigo-200">{s.label}</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ── Featured Courses ── */}
|
||||||
|
<section className="py-20 bg-slate-50 dark:bg-slate-900/50">
|
||||||
|
<div className="mx-auto max-w-7xl px-6">
|
||||||
|
<div className="text-center mb-12 animate-fade-up">
|
||||||
|
<Badge className="bg-indigo-100 text-indigo-700 dark:bg-indigo-900/40 dark:text-indigo-300 mb-4">Featured Courses</Badge>
|
||||||
|
<h2 className="text-3xl sm:text-4xl font-bold">Learn From the Best</h2>
|
||||||
|
<p className="mt-3 text-muted-foreground max-w-xl mx-auto">Handpicked courses designed by industry experts to accelerate your career growth.</p>
|
||||||
|
</div>
|
||||||
|
<div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||||
|
{featuredCourses.map((c, i) => (
|
||||||
|
<Card key={i} className="group bg-white/70 dark:bg-slate-900/70 backdrop-blur border-slate-200/60 dark:border-slate-800/60 rounded-2xl overflow-hidden hover:-translate-y-1 hover:shadow-xl transition-all duration-300 animate-fade-up" style={{ animationDelay: `\${i * 0.08}s` }}>
|
||||||
|
<div className={`h-40 bg-gradient-to-br \${c.gradient} flex items-center justify-center`}>
|
||||||
|
<BookOpen className="h-12 w-12 text-white/80" />
|
||||||
|
</div>
|
||||||
|
<CardContent className="p-5">
|
||||||
|
<Badge variant="secondary" className="mb-2 text-xs">{c.category}</Badge>
|
||||||
|
<h3 className="font-semibold text-lg leading-snug mb-1">{c.title}</h3>
|
||||||
|
<p className="text-sm text-muted-foreground mb-3">{c.instructor}</p>
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
<Star className="h-4 w-4 fill-amber-400 text-amber-400" />
|
||||||
|
<span className="text-sm font-medium">{c.rating}</span>
|
||||||
|
</div>
|
||||||
|
<span className="text-lg font-bold text-indigo-600 dark:text-indigo-400">{c.price}</span>
|
||||||
|
</div>
|
||||||
|
<Button asChild className="w-full mt-4 bg-indigo-600 hover:bg-indigo-700 text-white rounded-full active:scale-[0.97] transition-all">
|
||||||
|
<Link to="/course/1">Enroll</Link>
|
||||||
|
</Button>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ── Categories ── */}
|
||||||
|
<section className="py-16">
|
||||||
|
<div className="mx-auto max-w-7xl px-6 text-center">
|
||||||
|
<h2 className="text-2xl sm:text-3xl font-bold mb-8 animate-fade-up">Browse by Category</h2>
|
||||||
|
<div className="flex flex-wrap justify-center gap-3 animate-fade-up" style={{ animationDelay: "0.1s" }}>
|
||||||
|
{categories.map((cat) => (
|
||||||
|
<Link key={cat} to="/courses">
|
||||||
|
<Badge variant="outline" className="px-5 py-2.5 text-sm font-medium rounded-full border-indigo-200 dark:border-indigo-800 hover:bg-indigo-600 hover:text-white hover:border-indigo-600 transition-all cursor-pointer">{cat}</Badge>
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ── How It Works ── */}
|
||||||
|
<section className="py-20 bg-slate-50 dark:bg-slate-900/50">
|
||||||
|
<div className="mx-auto max-w-7xl px-6">
|
||||||
|
<div className="text-center mb-12 animate-fade-up">
|
||||||
|
<h2 className="text-3xl sm:text-4xl font-bold">How It Works</h2>
|
||||||
|
<p className="mt-3 text-muted-foreground">Three simple steps to transform your career</p>
|
||||||
|
</div>
|
||||||
|
<div className="grid md:grid-cols-3 gap-8 max-w-4xl mx-auto">
|
||||||
|
{steps.map((s, i) => (
|
||||||
|
<div key={i} className="text-center animate-fade-up" style={{ animationDelay: `\${i * 0.15}s` }}>
|
||||||
|
<div className="mx-auto w-16 h-16 rounded-2xl bg-indigo-100 dark:bg-indigo-900/40 flex items-center justify-center mb-4">
|
||||||
|
<s.icon className="h-7 w-7 text-indigo-600 dark:text-indigo-400" />
|
||||||
|
</div>
|
||||||
|
<div className="text-xs font-bold text-indigo-600 dark:text-indigo-400 mb-2">STEP {i + 1}</div>
|
||||||
|
<h3 className="font-semibold text-lg mb-2">{s.title}</h3>
|
||||||
|
<p className="text-sm text-muted-foreground">{s.desc}</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ── Instructor Spotlight ── */}
|
||||||
|
<section className="py-20">
|
||||||
|
<div className="mx-auto max-w-7xl px-6">
|
||||||
|
<div className="text-center mb-12 animate-fade-up">
|
||||||
|
<Badge className="bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-300 mb-4">Expert Instructors</Badge>
|
||||||
|
<h2 className="text-3xl sm:text-4xl font-bold">Learn From Industry Leaders</h2>
|
||||||
|
</div>
|
||||||
|
<div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
|
{instructors.map((inst, i) => (
|
||||||
|
<Card key={i} className="bg-white/70 dark:bg-slate-900/70 backdrop-blur border-slate-200/60 dark:border-slate-800/60 rounded-2xl text-center p-6 hover:-translate-y-1 hover:shadow-xl transition-all duration-300 animate-fade-up" style={{ animationDelay: `\${i * 0.1}s` }}>
|
||||||
|
<div className={`mx-auto w-20 h-20 rounded-full bg-gradient-to-br \${inst.gradient} flex items-center justify-center mb-4`}>
|
||||||
|
<span className="text-2xl font-bold text-white">{inst.name.split(" ").map(n => n[0]).join("")}</span>
|
||||||
|
</div>
|
||||||
|
<h3 className="font-semibold text-lg">{inst.name}</h3>
|
||||||
|
<p className="text-sm text-muted-foreground mb-3">{inst.specialty}</p>
|
||||||
|
<div className="flex justify-center gap-4 text-xs text-muted-foreground">
|
||||||
|
<span>{inst.courses} Courses</span>
|
||||||
|
<span>{inst.students.toLocaleString()} Students</span>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ── Testimonials ── */}
|
||||||
|
<section className="py-20 bg-slate-50 dark:bg-slate-900/50">
|
||||||
|
<div className="mx-auto max-w-7xl px-6">
|
||||||
|
<div className="text-center mb-12 animate-fade-up">
|
||||||
|
<h2 className="text-3xl sm:text-4xl font-bold">What Our Students Say</h2>
|
||||||
|
</div>
|
||||||
|
<div className="grid md:grid-cols-3 gap-6">
|
||||||
|
{testimonials.map((t, i) => (
|
||||||
|
<Card key={i} className="bg-white/70 dark:bg-slate-900/70 backdrop-blur border-slate-200/60 dark:border-slate-800/60 rounded-2xl p-6 animate-fade-up" style={{ animationDelay: `\${i * 0.1}s` }}>
|
||||||
|
<Quote className="h-8 w-8 text-indigo-200 dark:text-indigo-800 mb-3" />
|
||||||
|
<p className="text-muted-foreground mb-4 leading-relaxed">{t.text}</p>
|
||||||
|
<div className="flex items-center gap-1 mb-2">
|
||||||
|
{Array.from({ length: t.rating }).map((_, j) => (
|
||||||
|
<Star key={j} className="h-4 w-4 fill-amber-400 text-amber-400" />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<div className="font-semibold">{t.name}</div>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ── CTA ── */}
|
||||||
|
<section className="py-20">
|
||||||
|
<div className="mx-auto max-w-4xl px-6 text-center">
|
||||||
|
<div className="rounded-3xl bg-gradient-to-br from-indigo-600 to-purple-700 p-12 md:p-16 animate-fade-up">
|
||||||
|
<h2 className="text-3xl sm:text-4xl font-bold text-white mb-4">Start Learning Today — First Month Free</h2>
|
||||||
|
<p className="text-indigo-100 mb-8 max-w-lg mx-auto">Access all 200+ courses with a free trial. No credit card required. Cancel anytime.</p>
|
||||||
|
<Button asChild size="lg" className="bg-amber-500 hover:bg-amber-600 text-white rounded-full px-10 shadow-xl shadow-amber-500/20 active:scale-[0.97] transition-all">
|
||||||
|
<Link to="/courses">Get Started Free <ArrowRight className="ml-2 h-5 w-5" /></Link>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<Footer />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user