Update components/course-demo.tsx

2026-01-18 18:29:58 +00:00 · 2026-01-18 18:29:58 +00:00 · ae57fb500d
parent 2741390fc1
commit ae57fb500d
1 changed files with 106 additions and 0 deletions
--- a/components/course-demo.tsx
+++ b/components/course-demo.tsx
@ -0,0 +1,106 @@
+"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>
+  );
+}