Course Content Page

1"use client";
2 
3import { Badge } from "@/components/ui/badge";
4import { Button } from "@/components/ui/button";
5import { motion, type Variants } from "framer-motion";
6import {
7  AlertTriangle,
8  Award,
9  BookOpen,
10  CheckCircle2,
11  ChevronRight,
12  Clock,
13  Download,
14  FileText,
15  Languages,
16  Lock,
17  Play,
18  PlayCircle,
19  Share2,
20  Star,
21  Timer,
22  Users,
23  Video,
24  Zap,
25} from "lucide-react";
26import { useEffect, useState } from "react";
27 
28// ============================================================================
29// TYPES & INTERFACES
30// ============================================================================
31 
32interface InstructorCardProps {
33  name: string;
34  title: string;
35  bio: string;
36  image: string;
37  rating: number;
38  students: string;
39  courses: number;
40}
41 
42interface CourseStatsProps {
43  label: string;
44  value: string;
45  icon: React.ReactNode;
46}
47 
48interface CurriculumSection {
49  title: string;
50  lessons: CurriculumLesson[];
51  duration: string;
52}
53 
54interface CurriculumLesson {
55  title: string;
56  duration: string;
57  isCompleted: boolean;
58  isLocked: boolean;
59  type: "video" | "article" | "quiz";
60}
61 
62// ============================================================================
63// STATIC DATA
64// ============================================================================
65 
66const COURSE_DATA = {
67  title: "Advanced React Development & Performance Optimization",
68  description:
69    "Master modern React patterns, state management, and performance optimization techniques to build production-ready applications.",
70  rating: 4.8,
71  totalRatings: "12,543",
72  students: "45,892",
73  lastUpdated: "November 2024",
74  language: "English",
75  duration: "18.5 hours",
76  lectures: 156,
77};
78 
79const INSTRUCTOR_DATA = {
80  name: "shadcn",
81  title: "Creator of shadcn/ui · Open Source Developer",
82  bio: "Building beautiful, accessible component libraries for the web. Passionate about design systems, developer experience, and making UI development enjoyable.",
83  image: "https://avatars.githubusercontent.com/u/139895814?v=4",
84  rating: 4.9,
85  students: "125,000",
86  courses: 12,
87};
88 
89const PROMO_DATA = {
90  discount: 60,
91  originalPrice: 299,
92  discountedPrice: 119,
93  spotsLeft: 12,
94  deadline: new Date(Date.now() + 24 * 60 * 60 * 1000 + 5 * 60 * 60 * 1000), // 1 day 5 hours from now
95};
96 
97const CURRICULUM_DATA: CurriculumSection[] = [
98  {
99    title: "Getting Started with React",
100    duration: "1h 45m",
101    lessons: [
102      {
103        title: "Introduction to Modern React",
104// … truncated