feat(courses): replace title link with Read More (remove clickable title)

Author: kutayeroglu

src/pages/courses.astro

@@ -29,21 +29,40 @@ const base = import.meta.env.BASE_URL;
 
     <div class="max-w-2xl mx-auto space-y-4">
       {coursesWithInstructors.map((course) => (
-        <div class="bg-white rounded-lg shadow-md px-6 py-4 flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3">
+        <div class="bg-white rounded-lg shadow-md px-6 py-4 flex flex-col sm:flex-row sm:items-stretch sm:justify-between gap-3 relative sm:pb-10">
           <div class="min-w-0 flex-1">
             <span class="text-sm font-medium text-primary">{course.data.code}</span>
             <h2 class="text-lg font-semibold text-gray-900">
-              <a href={`${base}courses/${course.slug}`} class="hover:text-primary hover:underline">
-                {course.data.title}
-              </a>
+              {course.data.title}
             </h2>
             {course.data.description && (
               <p class="text-sm text-gray-600 mt-2 leading-relaxed">{course.data.description}</p>
             )}
           </div>
-          <p class="text-gray-600 sm:text-right sm:shrink-0">
-            {course.instructorData ? `${shortenTitle(course.instructorData.title)} ${course.instructorData.name}` : ''}
-          </p>
+          <div class="sm:shrink-0 sm:text-right flex flex-col sm:items-end gap-2 h-full">
+            <p class="text-gray-600">
+              {course.instructorData ? `${shortenTitle(course.instructorData.title)} ${course.instructorData.name}` : ''}
+            </p>
+            <a
+              href={`${base}courses/${course.slug}`}
+              class="inline-flex items-center gap-1 text-primary-light font-medium hover:underline w-fit self-end sm:absolute sm:bottom-4 sm:right-6"
+            >
+              Read More
+              <svg
+                class="w-4 h-4"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                aria-hidden="true"
+              >
+                <path d="m9 18 6-6-6-6"></path>
+              </svg>
+            </a>
+          </div>
         </div>
       ))}
     </div>