107 lines
4.1 KiB
TypeScript
107 lines
4.1 KiB
TypeScript
"use client";
|
|
import { useState } from "react";
|
|
import { Container } from "@/components/container";
|
|
import { Heading } from "@/components/heading";
|
|
import { Subheading } from "@/components/subheading";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Play, CheckCircle, Clock, Star } from "lucide-react";
|
|
|
|
const courses = [
|
|
{
|
|
title: "Introduction to AI Tools",
|
|
duration: "12 mins",
|
|
rating: "4.9",
|
|
image: "https://images.unsplash.com/photo-1677442136019-21780ecad995?auto=format&fit=crop&q=80&w=800",
|
|
},
|
|
{
|
|
title: "Building Your First Website",
|
|
duration: "18 mins",
|
|
rating: "4.8",
|
|
image: "https://images.unsplash.com/photo-1498050108023-c5249f4df085?auto=format&fit=crop&q=80&w=800",
|
|
},
|
|
{
|
|
title: "Digital Marketing Basics",
|
|
duration: "15 mins",
|
|
rating: "4.7",
|
|
image: "https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&q=80&w=800",
|
|
},
|
|
{
|
|
title: "Creative Problem Solving",
|
|
duration: "10 mins",
|
|
rating: "5.0",
|
|
image: "https://images.unsplash.com/photo-1516321318423-f06f85e504b3?auto=format&fit=crop&q=80&w=800",
|
|
},
|
|
];
|
|
|
|
export function CourseDemo() {
|
|
const [completed, setCompleted] = useState<number[]>([]);
|
|
|
|
const toggleComplete = (id: number) => {
|
|
if (completed.includes(id)) {
|
|
setCompleted(completed.filter(i => i !== id));
|
|
} else {
|
|
setCompleted([...completed, id]);
|
|
alert("Great job! You've earned 50 Skill Points! 🏆");
|
|
}
|
|
};
|
|
|
|
return (
|
|
<section className="py-20">
|
|
<Container>
|
|
<div className="text-center max-w-3xl mx-auto mb-16">
|
|
<Heading level="h2" className="text-3xl md:text-4xl">Course Experience (Student MVP)</Heading>
|
|
<Subheading className="mt-4">
|
|
Real learning experience designed for high engagement and practical outcomes.
|
|
</Subheading>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
{courses.map((course, index) => (
|
|
<div key={index} className="group bg-white rounded-2xl border border-neutral-200 overflow-hidden hover:shadow-xl transition-all">
|
|
<div className="relative aspect-video overflow-hidden">
|
|
<img
|
|
src={course.image}
|
|
alt={course.title}
|
|
className="object-cover w-full h-full group-hover:scale-105 transition-transform duration-500"
|
|
/>
|
|
<div className="absolute inset-0 bg-black/20 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
|
|
<div className="w-12 h-12 bg-white rounded-full flex items-center justify-center shadow-lg">
|
|
<Play className="h-6 w-6 text-blue-600 fill-blue-600" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="p-5">
|
|
<div className="flex items-center justify-between mb-2">
|
|
<div className="flex items-center gap-1 text-xs text-neutral-500">
|
|
<Clock className="h-3 w-3" />
|
|
<span>{course.duration}</span>
|
|
</div>
|
|
<div className="flex items-center gap-1 text-xs text-yellow-500 font-bold">
|
|
<Star className="h-3 w-3 fill-yellow-500" />
|
|
<span>{course.rating}</span>
|
|
</div>
|
|
</div>
|
|
<h3 className="font-bold text-lg mb-4 line-clamp-1">{course.title}</h3>
|
|
<Button
|
|
onClick={() => toggleComplete(index)}
|
|
variant={completed.includes(index) ? "secondary" : "outline"}
|
|
className="w-full gap-2"
|
|
>
|
|
{completed.includes(index) ? (
|
|
<>
|
|
<CheckCircle className="h-4 w-4 text-green-600" />
|
|
Completed
|
|
</>
|
|
) : (
|
|
"Mark as Completed"
|
|
)}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</Container>
|
|
</section>
|
|
);
|
|
}
|