From 3e7c6f10a0e942670eb297472962b4e7eb30a90d Mon Sep 17 00:00:00 2001
From: ArturoAtomplay <64356325+ArturoAtomplay@users.noreply.github.com>
Date: Wed, 11 Mar 2026 17:41:27 -0600
Subject: [PATCH] feat(aprender): enhance layout and styling for track cards

---
 src/pages/[lang]/aprender.astro | 91 +++++++++++++++++----------------
 1 file changed, 46 insertions(+), 45 deletions(-)

diff --git a/src/pages/[lang]/aprender.astro b/src/pages/[lang]/aprender.astro
index 5688371..cfd12c0 100644
--- a/src/pages/[lang]/aprender.astro
+++ b/src/pages/[lang]/aprender.astro
@@ -3,11 +3,9 @@ import { tracks } from "~/const/tracks"
 import Navbar from "~/features/content/components/Navbar.astro"
 import { getLangFromUrl, useTranslations } from "~/i18n/utils"
 import Layout from "~/layouts/Layout.astro"
-import IconRight from "~icons/tabler/arrow-big-right-lines-filled"
 
 const lang = getLangFromUrl(Astro.url)
 const t = useTranslations(lang)
-const user = Astro.locals.user
 ---
 
 <Layout
@@ -16,35 +14,35 @@ const user = Astro.locals.user
 >
   <Navbar lang={lang} />
 
-  <main class="flex-1 flex flex-col px-6 py-12">
-
-    <div class="flex flex-col items-center text-center mb-12">
-      <h1 class="text-2xl md:text-3xl font-bold text-secondary">{t("learn.main_title")}</h1>
-      <p class="text-secondary/50 text-sm">{t("learn.subtitle")}</p>
+  <main class="flex-1 flex flex-col px-4 sm:px-6 py-8 md:py-12">
+    <div class="flex flex-col items-center text-center mb-8 md:mb-12">
+      <h1 class="text-3xl md:text-4xl font-bold text-secondary">{t("learn.main_title")}</h1>
+      <p class="text-secondary/50 text-base md:text-lg max-w-md">{t("learn.subtitle")}</p>
     </div>
 
-    <div class="flex flex-col items-center">
-      <div class="w-full max-w-2xl flex flex-col gap-4">
+    <div class="mx-auto w-full max-w-2xl flex flex-col gap-4">
         {tracks.map(track => (
           track.disabled ? (
-            <div class="relative flex gap-3 sm:gap-6 items-start bg-light-bg/40 border border-stroke-color/40 rounded-2xl p-4 sm:p-6 cursor-not-allowed opacity-50 select-none">
-              <div class="absolute top-3 right-3 flex items-center gap-1.5">
-                <span class="text-xs bg-stroke-color/30 text-secondary/40 border border-stroke-color/30 px-2 py-0.5 rounded-full whitespace-nowrap">
-                  {t(track.badge)}
-                </span>
-                <span class="text-xs bg-editor-bg text-secondary/50 border border-stroke-color/40 px-2 py-0.5 rounded-full whitespace-nowrap">
-                  {t("learn.coming_soon")}
-                </span>
-              </div>
-
-              <div class="shrink-0 w-12 h-12 sm:w-20 sm:h-20 flex items-center justify-center rounded-xl sm:rounded-2xl bg-editor-bg border border-stroke-color/40 mt-0.5">
-                <img src="/logo.webp" alt="Rustlings" class="w-8 h-8 sm:w-12 sm:h-12 grayscale" />
+            <div class="flex flex-col sm:flex-row gap-4 sm:gap-5 items-start bg-light-bg/40 border border-stroke-color/40 rounded-2xl p-4 sm:p-5 cursor-not-allowed opacity-60 select-none">
+              <div class="shrink-0 w-14 h-14 sm:w-16 sm:h-16 flex items-center justify-center rounded-xl bg-editor-bg border border-stroke-color/40">
+                <img src="/logo.webp" alt="Rustlings" class="w-8 h-8 sm:w-10 sm:h-10 grayscale" />
               </div>
+              
+              <div class="flex flex-col gap-2.5 flex-1 min-w-0">
+                <div class="flex flex-col gap-1.5">
+                  <span class="text-secondary/50 font-bold text-lg sm:text-xl leading-tight">{t(track.title)}</span>
+                  <div class="flex flex-wrap items-center gap-2">
+                    <span class="text-xs uppercase tracking-wider font-semibold bg-stroke-color/30 text-secondary/40 border border-stroke-color/30 px-2 py-0.5 rounded-md">
+                      {t(track.badge)}
+                    </span>
+                    <span class="text-xs uppercase tracking-wider font-semibold bg-editor-bg text-secondary/50 border border-stroke-color/40 px-2 py-0.5 rounded-md">
+                      {t("learn.coming_soon")}
+                    </span>
+                  </div>
+                </div>
 
-              <div class="flex flex-col gap-1.5 flex-1 min-w-0">
-                <span class="text-secondary/50 font-bold text-base sm:text-xl leading-tight">{t(track.title)}</span>
-                <p class="text-secondary/40 text-xs sm:text-sm leading-relaxed">{t(track.description)}</p>
-                <span class="text-secondary/30 text-xs">{track.lessons} {t("learn.lessons")}</span>
+                <p class="text-secondary/40 text-sm md:text-base leading-relaxed">{t(track.description)}</p>
+                <span class="text-secondary/30 text-sm font-medium">{track.lessons} {t("learn.lessons")}</span>
               </div>
             </div>
           ) : (
@@ -55,40 +53,43 @@ const user = Astro.locals.user
               data-track-href={`/${lang}${track.href}`}
               data-track-lang={lang}
               data-track-slugs={JSON.stringify(track.slugs)}
-              class="group relative flex gap-3 sm:gap-6 items-start bg-light-bg border border-stroke-color rounded-2xl p-4 sm:p-6 hover:border-yellow transition-all duration-200 cursor-pointer"
+              class="group flex flex-col sm:flex-row gap-4 sm:gap-5 items-start bg-light-bg border border-stroke-color rounded-2xl p-4 sm:p-5 hover:border-yellow hover:shadow-lg hover:shadow-yellow/5 transition-all duration-300 cursor-pointer"
             >
-              <span class="absolute top-3 right-3 text-xs bg-yellow/10 text-yellow border border-yellow/20 px-2 py-0.5 rounded-full whitespace-nowrap">
-                {t(track.badge)}
-              </span>
-
-              <div class="shrink-0 w-12 h-12 sm:w-20 sm:h-20 flex items-center justify-center rounded-xl sm:rounded-2xl bg-editor-bg border border-stroke-color mt-0.5">
-                <img src="/logo.webp" alt="Rustlings" class="w-8 h-8 sm:w-12 sm:h-12" />
+              <div class="shrink-0 w-14 h-14 sm:w-16 sm:h-16 flex items-center justify-center rounded-xl bg-editor-bg border border-stroke-color">
+                <img src="/logo.webp" alt="Rustlings" class="w-8 h-8 sm:w-10 sm:h-10" />
               </div>
 
-              <div class="flex flex-col gap-1.5 sm:gap-2 flex-1 min-w-0">
-                <span class="text-secondary font-bold text-base sm:text-xl group-hover:text-yellow transition-colors leading-tight pr-20">
-                  {t(track.title)}
-                </span>
-                <p class="text-secondary/60 text-xs sm:text-sm leading-relaxed">{t(track.description)}</p>
+              <div class="flex flex-col gap-2.5 flex-1 min-w-0">
+                <div class="flex flex-col gap-1.5">
+                  <span class="text-secondary font-bold text-lg sm:text-xl group-hover:text-yellow transition-colors leading-tight">
+                    {t(track.title)}
+                  </span>
+                  <div class="flex flex-wrap items-center gap-2">
+                    <span class="text-xs uppercase tracking-wider font-semibold bg-yellow/10 text-yellow border border-yellow/20 px-2 py-0.5 rounded-md whitespace-nowrap">
+                      {t(track.badge)}
+                    </span>
+                  </div>
+                </div>
+
+                <p class="text-secondary/60 text-sm md:text-base leading-relaxed">{t(track.description)}</p>
 
                 <!-- Progress bar (hidden until JS populates it) -->
-                <div data-progress-container class="hidden flex-col gap-1 mt-0.5">
+                <div data-progress-container class="hidden flex-col gap-1.5 mt-1">
                   <div class="flex justify-between items-center">
-                    <span data-progress-label class="text-xs text-secondary/50"></span>
-                    <span data-progress-pct class="text-xs text-yellow font-medium"></span>
+                    <span data-progress-label class="text-sm font-medium text-secondary/50"></span>
+                    <span data-progress-pct class="text-sm text-yellow font-bold"></span>
                   </div>
                   <div class="w-full h-1.5 bg-stroke-color/30 rounded-full overflow-hidden">
                     <div data-progress-bar class="h-full bg-yellow rounded-full transition-all duration-500" style="width:0%"></div>
                   </div>
                 </div>
 
-                <span data-lessons-label class="text-secondary/40 text-xs">{track.lessons} {t("learn.lessons")}</span>
-                <span data-resume-label class="hidden text-xs text-yellow/70 font-medium"></span>
+                <div class="flex flex-col gap-1 mt-0.5">
+                  <span data-lessons-label class="text-secondary/40 text-sm font-medium">{track.lessons} {t("learn.lessons")}</span>
+                  <span data-resume-label class="hidden text-sm text-yellow/80 font-medium"></span>
+                </div>
               </div>
 
-              <span class="text-secondary/30 group-hover:text-yellow group-hover:translate-x-1 transition-all shrink-0 self-end mb-0.5">
-                <IconRight font-size={20} />
-              </span>
             </div>
           )
         ))}