diff --git a/CONTEXT.md b/CONTEXT.md index 17b013e..6593116 100644 --- a/CONTEXT.md +++ b/CONTEXT.md @@ -222,7 +222,14 @@ time the page renders, with zero code changes. `SectionTitle`'s `enTitle` prop is optional for exactly this reason — these dynamic groups only have one `title` string from the API, not a Persian/ -English pair, so the small English-caps subtitle just doesn't render for them. +English pair, so the inline English-caps subtitle just doesn't render for +them. Instead, each carousel shows an English caption *under* the title +(`SectionTitle`'s separate `enSubtitle` prop, `opacity-50`, its own line) — +`StoreSpecialCarousels.englishLabelFromKey()` formats the group's `key` +(e.g. `top-selling` → "TOP SELLING") rather than inventing a translation of +`title`; there's no real localized-English field to translate from, and a +made-up translation would be fabricated data. Skips rendering if the key +has no letters at all (fell back to a bare numeric id). **Banner interleaving**: the two static-image banner sections (`TwoBanners`, `ThreeBanners`) are rendered *inside* `StoreSpecialCarousels`, one inserted diff --git a/src/components/home/Header.tsx b/src/components/home/Header.tsx index f4a6558..c5c6c2a 100644 --- a/src/components/home/Header.tsx +++ b/src/components/home/Header.tsx @@ -27,7 +27,7 @@ function Logo({ src, large = false }: { src?: string | null; large?: boolean }) className={ large ? "h-[42px] w-auto object-contain md:h-[46px]" - : "h-10 w-auto object-contain md:h-12" + : "h-20 w-auto object-contain md:h-24" } /> diff --git a/src/components/home/StoreSpecialCarousels.tsx b/src/components/home/StoreSpecialCarousels.tsx index db4a0dd..0654c4b 100644 --- a/src/components/home/StoreSpecialCarousels.tsx +++ b/src/components/home/StoreSpecialCarousels.tsx @@ -6,6 +6,18 @@ import { TwoBanners } from "@/components/home/TwoBanners"; import { ThreeBanners } from "@/components/home/ThreeBanners"; import { productHref, type ProductGroup, type StaticImageWithUrl } from "@/lib/meshkee"; +// The API only gives one `title` string per group (sometimes already +// English, e.g. "Special Sale", sometimes Persian) — there's no separate +// localized English field to pull a real translation from, and inventing +// one would be fabricated data. `key` is real data and usually a readable +// English slug (e.g. "top-selling"), so it's what gets formatted into the +// English caption under the title. Skip it if the key has no letters at +// all (e.g. it fell back to a bare numeric id). +function englishLabelFromKey(key: string): string | undefined { + const label = key.replace(/[-_]+/g, " ").trim(); + return /[a-zA-Z]/.test(label) ? label.toUpperCase() : undefined; +} + // Renders every admin-managed carousel from GET /store-specials — whatever // groups exist there, in their configured order. Nothing here is keyed off // a specific group id/key/title, so a new carousel created in the Meshkee @@ -46,6 +58,7 @@ export function StoreSpecialCarousels({
+ {enSubtitle} +
+ )} {subtitle && ({subtitle}
)}