Sewing By Fatima

Technical Deep Dive

The site is a single page assembled from section components: hero, fabric marquee, services, work, process, about, testimonials, and contact. Page metadata lives in a nanostores atom that middleware sets per request, and the base layout reads from it. Tailwind CSS 4 and daisyUI 5 handle styling. Stores and helpers are auto-imported through unplugin-auto-import, so most component frontmatter is a line or two with no import block above it.

English sits at the root and Portuguese at /pt, and both routes render the same HomePage component. Astro resolves the locale from the URL, and a useTranslations helper hands back the dictionary for it. All of the copy lives in one object in src/i18n/ui.ts, with the Portuguese half declared as typeof en — adding a key to English and forgetting Portuguese fails the type check rather than silently shipping an English string to a Portuguese visitor.

The quote form takes a name, phone number, service type, message, and an optional photo of the garment. Validation happens in the browser, where the translation dictionary isn’t available. Each input instead carries its error message in a data-error attribute rendered on the server, and the validation script reads the message off whichever field failed, so a single script covers both languages. The service dropdown is a related case: its labels are translated but its submitted values are always the English titles, which keeps incoming requests consistent no matter which version of the page they came from.

Display type is Newsreader, loaded through the Astro fonts API with its optical-size axis exposed so headings render tighter and higher-contrast than body text. Karla covers everything else. The image slots are still placeholder components that name the photo meant to fill them, pending real pictures from Fatima’s studio.