feat: add an image to examprep template (courseapp)

packages/course-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@classroomio/course-app",
-  "version": "0.0.15",
+  "version": "0.0.16",
   "private": false,
   "main": "dist/create-template.js",
   "scripts": {

packages/course-app/src/template/src/courses/time-management-101/metadata.json

@@ -1,7 +1,7 @@
 {
   "title": "Analytics 101: Mastering Your Data",
   "description": "Learn essential analytics skills and leverage modern analytics tools to maximize your productivity and achieve better work-life balance.",
-  "banner": "https://images.unsplash.com/photo-1501139083538-0139583c060f?q=80&w=640&auto=format&fit=crop",
+  "banner": "https://images.unsplash.com/photo-1707157281599-d155d1da5b4c?q=80&w=500&auto=format&fit=crop",
   "created_at": "24-11-2024",
   "cost": 0,
   "currency": "USD",

packages/course-app/src/template/src/courses/time-management-102/metadata.json

@@ -1,7 +1,7 @@
 {
   "title": "Tracking and Testing 101: Mastering Your Data",
   "description": "Learn essential tracking and testing skills and leverage modern analytics tools to maximize your productivity and achieve better work-life balance.",
-  "banner": "https://images.unsplash.com/photo-1501139083538-0139583c060f?q=80&w=640&auto=format&fit=crop",
+  "banner": "https://images.unsplash.com/photo-1686061594183-8c864f508b00?q=80&w=500&auto=format&fit=crop",
   "created_at": "24-11-2024",
   "cost": 0,
   "currency": "USD",

packages/course-app/src/template/src/lib/components/examprep/CourseCard.svelte

@@ -1,13 +1,17 @@
 <script>
   import PrimaryButton from './PrimaryButton.svelte';
 
-  let { slug, title, description, className = '', buttonClass = '' } = $props();
+  let { slug, title, banner, description, className = '', buttonClass = '' } = $props();
 </script>
 
 <div
-  class="border-examprep w-full rounded-lg border-2 p-4 shadow-[-12px_12px_0px_#0233BD] md:h-[300px] md:w-[350px] {className}"
+  class="border-examprep w-full rounded-lg border-2 p-4 shadow-[-12px_12px_0px_#0233BD] md:w-[350px] {className}"
 >
   <div class="flex h-full w-full flex-col justify-between gap-4 rounded-lg">
+    <div class="h-[150px]">
+      <img src={banner} alt="Course Banner" class="h-full w-full object-cover" />
+    </div>
+
     <div class="flex-1 space-y-2">
       <p class="text-examprep line-clamp-2 text-xl font-semibold uppercase">{title}</p>
       <p class="font-inter line-clamp-4 text-gray-600">

packages/course-app/src/template/src/lib/components/examprep/pages/Course.svelte

@@ -115,6 +115,7 @@
               <CourseCard
                 slug={courseData.slug}
                 title={courseData.title}
+                banner={courseData.banner}
                 description={courseData.description}
               />
             {/each}

packages/course-app/src/template/src/lib/components/examprep/pages/Home.svelte

@@ -151,6 +151,7 @@
             <CourseCard
               slug={courseData.slug}
               title={courseData.title}
+              banner={courseData.banner}
               description={courseData.description}
             />
           {/each}