Skip to content

Develop #92

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Wilovy09 merged 8 commits into from
Mar 12, 2026
Merged

Develop #92

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
8547bf6
feat(i18n): add keys for 404 error page
MarioYellowy Mar 11, 2026
2f9335e
fix(validation): change validations orders for 404 error page
MarioYellowy Mar 11, 2026
2358d7a
feat(404): add 404 error page with i18n
MarioYellowy Mar 11, 2026
32a9271
feat(login): implement back to home btn on login
MarioYellowy Mar 11, 2026
c18cfe5
feat(aprender): enhance layout and styling for track cards
ArturoAtomplay Mar 11, 2026
cc32ff9
Clean up whitespace in login.astro
gg0074x Mar 12, 2026
47904d4
test
gg0074x Mar 12, 2026
67a28e3
Merge branch 'main' into develop
gg0074x Mar 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
91 changes: 46 additions & 45 deletions src/pages/[lang]/aprender.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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>
) : (
Expand All @@ -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>
)
))}
Expand Down
2 changes: 1 addition & 1 deletion src/pages/[lang]/login.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -149,7 +149,7 @@ const errorMessages: Record<string, string> = {
-->

<!-- GitHub OAuth -->

<a
href={`/api/auth/github?lang=${lang}`}
data-astro-reload
Expand Down
Loading