cards

frontend/src/pages/web_pages/courses.tsx

@@ -36,11 +36,14 @@ export default function CoursesPage() {
       </Head>
       <WebSiteHeader projectName={projectName} />
       <main className="flex-grow bg-white rounded-none p-4">
-        <ul>
-          {courses.map(course => (
-            <li key={course.id}>{course.title}</li>
+        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
+          {courses.map((course) => (
+            <div key={course.id} className="bg-gray-100 p-4 rounded shadow">
+              <h3 className="text-lg font-semibold">{course.title}</h3>
+              <p className="text-gray-700">{course.description}</p>
+            </div>
           ))}
-        </ul>
+        </div>
       </main>
       <WebSiteFooter projectName={projectName} />
     </div>