feat: Implement a new course learning system with dedicated layouts, lesson playback, and Spaced Repetition System (SRS) functionality.

resources/js/Pages/Courses/Library.tsx

@@ -1,4 +1,4 @@
-import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
+import DashboardLayout from '@/Layouts/DashboardLayout';
 import { Head, Link, useForm } from '@inertiajs/react';
 import { Card, CardContent, CardHeader, CardTitle, CardDescription, CardFooter } from "@/Components/ui/card";
 import { Button } from "@/Components/ui/button";
@@ -28,7 +28,7 @@ interface Props {
 
 export default function Library({ levels }: Props) {
     return (
-        <AuthenticatedLayout
+        <DashboardLayout
             header={
                 <div className="flex flex-col gap-1">
                     <h2 className="text-2xl font-bold tracking-tight">Galeri Kursus</h2>
@@ -58,7 +58,7 @@ export default function Library({ levels }: Props) {
                     </div>
                 )}
             </div>
-        </AuthenticatedLayout>
+        </DashboardLayout>
     );
 }
 
@@ -72,13 +72,13 @@ function CourseCard({ course }: { course: Course }) {
     return (
         <Card className="group border-border/40 bg-card/40 backdrop-blur-xl overflow-hidden hover:shadow-2xl hover:shadow-primary/5 transition-all duration-500 hover:-translate-y-1 flex flex-col h-full">
             <div className="relative aspect-video overflow-hidden">
-                <img 
-                    src={course.thumbnail} 
+                <img
+                    src={course.thumbnail}
                     alt={course.title}
                     className="object-cover w-full h-full transition-transform duration-700 group-hover:scale-110"
                 />
                 <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
-                
+
                 {course.isEnrolled && (
                     <Badge className="absolute top-3 right-3 bg-green-500 hover:bg-green-600 text-white border-none gap-1">
                         <CheckCircle2 size={12} />
@@ -107,8 +107,8 @@ function CourseCard({ course }: { course: Course }) {
                         </Link>
                     </Button>
                 ) : (
-                    <Button 
-                        onClick={handleEnroll} 
+                    <Button
+                        onClick={handleEnroll}
                         disabled={processing}
                         className="w-full rounded-xl font-bold bg-primary hover:bg-primary/90 shadow-lg shadow-primary/20"
                     >