From 6c10bc8ee9be1b62d1dc9396445c2b269dd5a7e2 Mon Sep 17 00:00:00 2001
From: Rotimi Best <best@classroomio.com>
Date: Sun, 1 Jun 2025 11:06:15 +0100
Subject: [PATCH] feat: add an image to examprep template (courseapp)

---
 packages/course-app/package.json                          | 2 +-
 .../src/courses/time-management-101/metadata.json         | 2 +-
 .../src/courses/time-management-102/metadata.json         | 2 +-
 .../src/lib/components/examprep/CourseCard.svelte         | 8 ++++++--
 .../src/lib/components/examprep/pages/Course.svelte       | 1 +
 .../src/lib/components/examprep/pages/Home.svelte         | 1 +
 6 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/packages/course-app/package.json b/packages/course-app/package.json
index 8e9efac9..b000e4f4 100644
--- a/packages/course-app/package.json
+++ b/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": {
diff --git a/packages/course-app/src/template/src/courses/time-management-101/metadata.json b/packages/course-app/src/template/src/courses/time-management-101/metadata.json
index 134c4d01..e61a0622 100644
--- a/packages/course-app/src/template/src/courses/time-management-101/metadata.json
+++ b/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",
diff --git a/packages/course-app/src/template/src/courses/time-management-102/metadata.json b/packages/course-app/src/template/src/courses/time-management-102/metadata.json
index 0a54c30f..d3a5cdc1 100644
--- a/packages/course-app/src/template/src/courses/time-management-102/metadata.json
+++ b/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",
diff --git a/packages/course-app/src/template/src/lib/components/examprep/CourseCard.svelte b/packages/course-app/src/template/src/lib/components/examprep/CourseCard.svelte
index 74095f61..0a8d5475 100644
--- a/packages/course-app/src/template/src/lib/components/examprep/CourseCard.svelte
+++ b/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">
diff --git a/packages/course-app/src/template/src/lib/components/examprep/pages/Course.svelte b/packages/course-app/src/template/src/lib/components/examprep/pages/Course.svelte
index c66ec046..4c6643ac 100644
--- a/packages/course-app/src/template/src/lib/components/examprep/pages/Course.svelte
+++ b/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}
diff --git a/packages/course-app/src/template/src/lib/components/examprep/pages/Home.svelte b/packages/course-app/src/template/src/lib/components/examprep/pages/Home.svelte
index 3a2f9d05..597d6a25 100644
--- a/packages/course-app/src/template/src/lib/components/examprep/pages/Home.svelte
+++ b/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}