[V0_FILE]png:file="public/course-thumbnail.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/CleanShot%202025-07-10%20at%2018.26.15%402x-kV2QNcKL1J7fEWk82d69wVsCx24gL8.png" [V0_FILE]typescriptreact:file="types/course.ts" export interface CourseModule { id: string title: string topics: string[] } export interface CourseData { id: string title: string subtitle: string description: string instructor: string instructorTitle: string rating: number totalRatings: number totalHours: number totalLectures: number level: string lastUpdated: string badges: string[] imageUrl: string modules: CourseModule[] } export interface CourseMetrics { rating: number totalRatings: number totalHours: number totalLectures: number level: string lastUpdated: string } [V0_FILE]typescriptreact:file="components/curriculum-header.tsx" "use client" import { Button } from "@/components/ui/button" interface CurriculumHeaderProps { onCollapseAll?: () => void } export function CurriculumHeader({ onCollapseAll }: CurriculumHeaderProps) { return (

Content Covered

) } [V0_FILE]typescriptreact:file="data/course-data.ts" import type { CourseData } from "../types/course" export const courseData: CourseData = { id: "course-1", title: "JavaScript, React, & Node.js", subtitle: "The Complete Full-Stack Web Development Bootcamp", description: "Become a Full-Stack Web Developer with just ONE course. HTML, CSS, Javascript, Node, React, PostgreSQL, Web3 and DApps", instructor: "Dr. Angela Yu", instructorTitle: "Developer and Lead Instructor", rating: 4.7, totalRatings: 444675, totalHours: 615, totalLectures: 374, level: "All Levels", lastUpdated: "2/2025", badges: ["Bestseller"], imageUrl: "/placeholder.svg?height=200&width=350", modules: [ { id: "module-1", title: "Introduction to Web Development", topics: ["Learn web architecture essentials.", "Set up the development environment."], }, { id: "module-2", title: "Frontend Development", topics: [ "Master HTML, CSS, Flexbox, Grid, and Bootstrap 5.", "Dive into JavaScript ES6, DOM manipulation, and jQuery.", ], }, { id: "module-3", title: "Backend Development", topics: [ "Develop server-side applications using Node.js, Express.js, and EJS.", "Understand REST, APIs, and database handling with SQL.", ], }, { id: "module-4", title: "Git, GitHub, and Version Control", topics: ["Version control using Git and the Command Line", "GitHub and remote repositories"], }, { id: "module-5", title: "Authentication and Security", topics: ["Handling credentials and designing a secure login", "Implement OAuth for user login"], }, { id: "module-6", title: "Building Applications using React.js", topics: ["Build dynamic UIs with React.js and React Hooks.", "Implement state management."], }, { id: "module-7", title: "Web3 Decentralised App Development and Deployment", topics: ["Build a Decentralised App", "Deploy to the ICP Live Blockchain"], }, ], } [V0_FILE]typescriptreact:file="app/page.tsx" import CourseOverview from "../course-overview" export default function Page() { return } [V0_FILE]typescriptreact:file="types/learning-path.ts" export interface LearningPathStats { averageRating: number practiceExercises: number hoursOfContent: number enrolledLearners: string } export interface LearningPathData { title: string description: string stats: LearningPathStats ctaText: string ctaSubtext: string instructorImage?: string } [V0_FILE]typescriptreact:file="components/header/learning-path-cta.tsx" import { Button } from "@/components/ui/button" interface LearningPathCtaProps { ctaText: string ctaSubtext: string } export function LearningPathCta({ ctaText, ctaSubtext }: LearningPathCtaProps) { return (

{ctaSubtext}

) } [V0_FILE]typescriptreact:file="data/learning-path-data.ts" import type { LearningPathData } from "../types/learning-path" export const learningPathData: LearningPathData = { title: "Full Stack Web Developer Career Accelerator", description: "Your career in full stack web development starts here. Fast-track learning and interview prep. Grow skills at your own pace. Expand your earnings potential.", stats: { averageRating: 4.7, practiceExercises: 126, hoursOfContent: 87.6, enrolledLearners: "1.5M", }, ctaText: "Get started for free", ctaSubtext: "Starts at €13 €11/mo after trial. Cancel anytime.", instructorImage: "/placeholder.svg?height=200&width=300", } [V0_FILE]typescriptreact:file="data/courses-data.ts" import type { CourseData } from "../types/course" export const coursesData: CourseData[] = [ { id: "course-1", title: "JavaScript, React, & Node.js", subtitle: "The Complete Full-Stack Web Development Bootcamp", description: "Become a Full-Stack Web Developer with just ONE course. HTML, CSS, Javascript, Node, React, PostgreSQL, Web3 and DApps", instructor: "Dr. Angela Yu", instructorTitle: "Developer and Lead Instructor", rating: 4.7, totalRatings: 444675, totalHours: 615, totalLectures: 374, level: "All Levels", lastUpdated: "2/2025", badges: ["Bestseller"], imageUrl: "/placeholder.svg?height=200&width=350", modules: [ { id: "module-1", title: "Introduction to Web Development", topics: ["Learn web architecture essentials.", "Set up the development environment."], }, { id: "module-2", title: "Frontend Development", topics: [ "Master HTML, CSS, Flexbox, Grid, and Bootstrap 5.", "Dive into JavaScript ES6, DOM manipulation, and jQuery.", ], }, { id: "module-3", title: "Backend Development", topics: [ "Develop server-side applications using Node.js, Express.js, and EJS.", "Understand REST, APIs, and database handling with SQL.", ], }, { id: "module-4", title: "Git, GitHub, and Version Control", topics: ["Version control using Git and the Command Line", "GitHub and remote repositories"], }, { id: "module-5", title: "Authentication and Security", topics: ["Handling credentials and designing a secure login", "Implement OAuth for user login"], }, { id: "module-6", title: "Building Applications using React.js", topics: ["Build dynamic UIs with React.js and React Hooks.", "Implement state management."], }, { id: "module-7", title: "Web3 Decentralised App Development and Deployment", topics: ["Build a Decentralised App", "Deploy to the ICP Live Blockchain"], }, ], }, { id: "course-2", title: "Python & Django", subtitle: "Complete Python Developer Bootcamp", description: "Master Python programming and Django web framework. Build real-world applications with databases, APIs, and deployment strategies.", instructor: "Dr. Angela Yu", instructorTitle: "Developer and Lead Instructor", rating: 4.6, totalRatings: 298432, totalHours: 485, totalLectures: 312, level: "Beginner to Advanced", lastUpdated: "1/2025", badges: ["Popular"], imageUrl: "/placeholder.svg?height=200&width=350", modules: [ { id: "module-1", title: "Python Fundamentals", topics: ["Python syntax and data structures", "Object-oriented programming concepts"], }, { id: "module-2", title: "Django Framework", topics: ["Django models, views, and templates", "Building REST APIs with Django REST Framework"], }, { id: "module-3", title: "Database Integration", topics: ["Working with PostgreSQL and SQLite", "Database migrations and relationships"], }, { id: "module-4", title: "Authentication & Security", topics: ["User authentication and authorization", "Security best practices in Django"], }, { id: "module-5", title: "Deployment & DevOps", topics: ["Deploying Django applications", "Docker containerization and CI/CD"], }, ], }, { id: "course-3", title: "React Native & Mobile Development", subtitle: "Cross-Platform Mobile App Development", description: "Build native mobile applications for iOS and Android using React Native. Learn navigation, state management, and app store deployment.", instructor: "Maximilian Schwarzmüller", instructorTitle: "Professional Web Developer & Instructor", rating: 4.5, totalRatings: 156789, totalHours: 420, totalLectures: 285, level: "Intermediate", lastUpdated: "12/2024", badges: ["New"], imageUrl: "/placeholder.svg?height=200&width=350", modules: [ { id: "module-1", title: "React Native Basics", topics: ["Setting up development environment", "Core components and styling"], }, { id: "module-2", title: "Navigation & State Management", topics: ["React Navigation implementation", "Redux and Context API for state management"], }, { id: "module-3", title: "Native Features", topics: ["Camera, GPS, and device sensors", "Push notifications and background tasks"], }, { id: "module-4", title: "App Store Deployment", topics: ["Building for production", "Publishing to App Store and Google Play"], }, ], }, ] [V0_FILE]png:file="public/instructor-hero.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/CleanShot%202025-07-10%20at%2018.32.21%402x-P4fyeSp1bAxlYdNLOGgEHmELcTRl6R.png" [V0_FILE]typescriptreact:file="components/header/learning-path-hero.tsx" isQuickEdit="true" import Image from "next/image" interface LearningPathHeroProps { instructorImage?: string } export function LearningPathHero({ instructorImage }: LearningPathHeroProps) { if (!instructorImage) return null return (

) } [V0_FILE]typescriptreact:file="components/course-header.tsx" isQuickEdit="true" import { Badge } from "@/components/ui/badge" interface CourseHeaderProps { courseId: string title: string badges?: string[] } export function CourseHeader({ courseId, title, badges = [] }: CourseHeaderProps) { return (

Course {courseId.split("-")[1]}

{title}

{badges.length > 0 && (

{badges.map((badge) => ( {badge} ))}

)}

) } [V0_FILE]typescriptreact:file="components/course-image.tsx" isQuickEdit="true" import Image from "next/image" import { Badge } from "@/components/ui/badge" interface CourseImageProps { imageUrl: string alt: string badges?: string[] } export function CourseImage({ imageUrl, alt, badges = [] }: CourseImageProps) { return (

{badges.map((badge) => ( {badge} ))}

) } [V0_FILE]typescriptreact:file="components/course-description.tsx" isQuickEdit="true" interface CourseDescriptionProps { subtitle: string description: string } export function CourseDescription({ subtitle, description }: CourseDescriptionProps) { return (

{subtitle}

{description}

) } [V0_FILE]typescriptreact:file="components/course-instructor.tsx" isQuickEdit="true" interface CourseInstructorProps { name: string title: string } export function CourseInstructor({ name, title }: CourseInstructorProps) { return (

{name}

{title}

) } [V0_FILE]typescriptreact:file="components/module-item.tsx" isQuickEdit="true" import { AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion" import { TopicList } from "./topic-list" import type { CourseModule } from "../types/course" interface ModuleItemProps { module: CourseModule index: number } export function ModuleItem({ module, index }: ModuleItemProps) { return (

{String(index + 1).padStart(2, "0")} {module.title}

) } [V0_FILE]typescriptreact:file="components/topic-list.tsx" isQuickEdit="true" import { Check } from "lucide-react" interface TopicListProps { topics: string[] } export function TopicList({ topics }: TopicListProps) { return (

{topics.map((topic, index) => (

))}

) } [V0_FILE]typescriptreact:file="components/course-metrics.tsx" isQuickEdit="true" import { Star } from "lucide-react" import { Badge } from "@/components/ui/badge" import type { CourseMetrics as CourseMetricsData } from "../types/course" interface CourseMetricsProps { metrics: CourseMetricsData } export function CourseMetrics({ metrics }: CourseMetricsProps) { const { rating, totalRatings, totalHours, totalLectures, level, lastUpdated } = metrics return (

{rating} ({totalRatings.toLocaleString()})

{totalHours}h {totalLectures} lectures

{level} Updated {lastUpdated}

) } [V0_FILE]typescriptreact:file="components/curriculum-accordion.tsx" "use client" import { useState } from "react" import { Accordion } from "@/components/ui/accordion" import { ModuleItem } from "./module-item" import type { CourseModule } from "../types/course" import { Button } from "@/components/ui/button" interface CurriculumAccordionProps { modules: CourseModule[] } export function CurriculumAccordion({ modules }: CurriculumAccordionProps) { const [openItems, setOpenItems] = useState(["module-1"]) const handleToggleAll = () => { if (openItems.length === 0) { // If all collapsed, expand all setOpenItems(modules.map((module) => module.id)) } else { // If any are open, collapse all setOpenItems([]) } } const isAllCollapsed = openItems.length === 0 return (

Content Covered

{modules.map((module, index) => ( ))}

) } [V0_FILE]typescriptreact:file="components/course-card.tsx" import { Card, CardContent } from "@/components/ui/card" import { CourseHeader } from "./course-header" import { CourseImage } from "./course-image" import { CourseDescription } from "./course-description" import { CourseInstructor } from "./course-instructor" import { CourseMetrics } from "./course-metrics" import type { CourseData } from "../types/course" interface CourseCardProps { course: CourseData } export function CourseCard({ course }: CourseCardProps) { const metrics = { rating: course.rating, totalRatings: course.totalRatings, totalHours: course.totalHours, totalLectures: course.totalLectures, level: course.level, lastUpdated: course.lastUpdated, } return (

) } [V0_FILE]typescriptreact:file="components/header/learning-path-stats.tsx" import { Star, BookOpen, Clock, Users } from "lucide-react" interface LearningPathStatsProps { averageRating: number practiceExercises: number hoursOfContent: number enrolledLearners: string } export function LearningPathStats({ averageRating, practiceExercises, hoursOfContent, enrolledLearners, }: LearningPathStatsProps) { return (

{averageRating}

average course rating

{practiceExercises}

practice exercises

{hoursOfContent}

hours of content

{enrolledLearners} learners already enrolled

) } [V0_FILE]typescriptreact:file="components/course-list.tsx" import { Card, CardContent } from "@/components/ui/card" import { CourseCard } from "./course-card" import { CurriculumAccordion } from "./curriculum-accordion" import type { CourseData } from "../types/course" interface CourseListProps { courses: CourseData[] } export function CourseList({ courses }: CourseListProps) { return (

Learning Path Courses

Complete these courses to become a full-stack developer

{courses.map((course) => (

{/* Course Summary Card */} {/* Curriculum Accordion */}

))}

) } [V0_FILE]typescriptreact:file="components/header/learning-path-header.tsx" import { Card, CardContent } from "@/components/ui/card" import { LearningPathStats } from "./learning-path-stats" import { LearningPathCta } from "./learning-path-cta" import { LearningPathHero } from "./learning-path-hero" import type { LearningPathData } from "../../types/learning-path" interface LearningPathHeaderProps { data: LearningPathData } export function LearningPathHeader({ data }: LearningPathHeaderProps) { return (

{/* Left Content */}

{data.title}

{data.description}

{/* Right Content */}

) } [V0_FILE]typescriptreact:file="course-overview.tsx" import { LearningPathHeader } from "./components/header/learning-path-header" import { CourseList } from "./components/course-list" import { learningPathData } from "./data/learning-path-data" import { coursesData } from "./data/courses-data" export default function CourseOverview() { return (

{/* Learning Path Header */} {/* Course List */}

) }