Current state with latest updates

resources/js/Pages/Academy/Index.jsx

@@ -106,13 +106,26 @@ function MetricCard({ label, value, accent }) {
 }
 
 function FeaturedCourseCard({ course }) {
-  const cover = course?.cover_image_url || course?.teaser_image_url || course?.cover_image || course?.teaser_image || ''
+  const cover = course?.cover_image_thumb_url || course?.cover_image_url || course?.teaser_image_thumb_url || course?.teaser_image_url || course?.cover_image || course?.teaser_image || ''
+  const coverSrcSet = course?.cover_image_srcset || course?.teaser_image_srcset || ''
 
   return (
     <Link href={course.public_url} className="group relative overflow-hidden rounded-[28px] border border-sky-200/12 bg-[linear-gradient(180deg,rgba(15,23,42,0.9),rgba(15,23,42,0.72))] transition hover:-translate-y-1 hover:border-sky-300/24 hover:shadow-[0_24px_72px_rgba(2,6,23,0.3)]">
       <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(125,211,252,0.14),transparent_24%),linear-gradient(135deg,transparent_0%,transparent_48%,rgba(125,211,252,0.05)_48%,rgba(125,211,252,0.05)_52%,transparent_52%,transparent_100%)] opacity-80" />
       <div className="relative h-44 overflow-hidden bg-[linear-gradient(135deg,rgba(14,165,233,0.24),rgba(15,23,42,0.92))]">
-        {cover ? <img src={cover} alt="" aria-hidden="true" className="h-full w-full object-cover" /> : null}
+        {cover ? (
+          <img
+            src={cover}
+            srcSet={coverSrcSet || undefined}
+            sizes="(min-width: 1280px) 31vw, (min-width: 768px) 50vw, 100vw"
+            alt=""
+            aria-hidden="true"
+            loading="lazy"
+            decoding="async"
+            fetchPriority="low"
+            className="h-full w-full object-cover"
+          />
+        ) : null}
         <div className="absolute inset-0 bg-[linear-gradient(180deg,transparent,rgba(2,6,23,0.82))]" />
         <div className="absolute left-4 top-4 flex flex-wrap gap-2">
           <span className="rounded-full border border-white/10 bg-black/30 px-3 py-1 text-[10px] font-semibold uppercase tracking-[0.18em] text-sky-100">{course.difficulty}</span>
@@ -552,4 +565,4 @@ export default function AcademyIndex({ seo, pricingUrl, academyAccess = null, li
       </div>
     </main>
   )
-}
+}