first commit

resources/js/Components/CourseCard.tsx

@@ -0,0 +1,76 @@
+import { Card, CardContent, CardHeader } from "@/Components/ui/card";
+import { Progress } from "@/Components/ui/progress";
+import { Badge } from "@/Components/ui/badge";
+import { Link } from "@inertiajs/react";
+import { Play } from "lucide-react";
+
+interface CourseCardProps {
+    title: string;
+    thumbnail: string;
+    level: string;
+    progress: number;
+    lessonsCount: number;
+    completedLessons: number;
+    slug: string;
+}
+
+export default function CourseCard({
+    title,
+    thumbnail,
+    level,
+    progress,
+    lessonsCount,
+    completedLessons,
+    slug
+}: CourseCardProps) {
+    return (
+        <div className="relative group">
+            {/* Hover Glow Effect */}
+            <div className="absolute inset-0 bg-gradient-to-br from-primary/10 via-orange-500/5 to-transparent blur-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-500 rounded-3xl" />
+            
+            <Card className="relative overflow-hidden bg-card/50 backdrop-blur-sm transition-all duration-500 border-border/50 group-hover:border-primary/30 shadow-sm group-hover:shadow-2xl group-hover:shadow-primary/5 group-hover:-translate-y-1 rounded-2xl">
+                <div className="relative aspect-[16/9] overflow-hidden">
+                    <img 
+                        src={thumbnail || "/brand/Nihonbuzz-Academy-Logo-Branding-Pattern-Landscape.png"} 
+                        alt={title}
+                        className="object-cover w-full h-full transition-transform duration-700 group-hover:scale-105"
+                    />
+                    <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center backdrop-blur-[2px]">
+                        <div className="w-12 h-12 rounded-full bg-primary text-primary-foreground flex items-center justify-center shadow-lg transform translate-y-4 group-hover:translate-y-0 transition-all duration-500">
+                            <Play className="w-5 h-5 fill-current ml-1" />
+                        </div>
+                    </div>
+                    <Badge className="absolute top-3 left-3 bg-background/80 text-primary hover:bg-background border-none backdrop-blur-md shadow-sm font-bold text-[10px] px-3">
+                        {level}
+                    </Badge>
+                </div>
+                
+                <CardHeader className="p-5 space-y-1.5">
+                    <h3 className="font-bold text-foreground line-clamp-1 group-hover:text-primary transition-colors text-base duration-300">
+                        {title}
+                    </h3>
+                    <div className="flex items-center gap-2 text-[11px] text-muted-foreground font-medium">
+                        <Badge variant="secondary" className="bg-muted text-muted-foreground border-none font-semibold px-2 h-5">
+                             {completedLessons}/{lessonsCount} Lessons
+                        </Badge>
+                        <span className="w-1 h-1 rounded-full bg-muted-foreground/30" />
+                        <span>{progress}% Complete</span>
+                    </div>
+                </CardHeader>
+                
+                <CardContent className="px-5 pb-5">
+                    <div className="space-y-4">
+                        <Progress value={progress} className="h-1.5 bg-muted" />
+                        <Link 
+                            href={route('courses.learn', { course: slug })} 
+                            className="flex items-center justify-center gap-2 w-full py-2.5 text-xs font-bold rounded-xl bg-muted/50 text-muted-foreground hover:bg-primary hover:text-primary-foreground transition-all duration-300"
+                        >
+                            Lanjutkan Belajar
+                            <Play className="w-3 h-3 fill-current" />
+                        </Link>
+                    </div>
+                </CardContent>
+            </Card>
+        </div>
+    );
+}