# Santamaria Cuttings — redesign demo

Redesign proposal for a family-run carnation cuttings specialist in Ventimiglia, Italy (client since 2018).
The current production site is the PHP codebase preserved under `sito_old/`; this root is an Astro 5 static
site serving as a **pitch demo** to show the client what a modern rebuild would look like.

**Live demo:** https://www.duebytes.it/www/santamaria/
**Legacy site source:** `./sito_old/` (PHP + MySQL, unchanged — don't modify)

## Status

Pitch email sent to the client on 2026-04-22 along with the demo URL. Awaiting reply.
If the client engages, next phase is a proper discovery + full redesign scope
(including porting the catalogue — currently left out of the demo).

## Stack

- **Astro 5** (static output) · `astro.config.mjs` with `base: process.env.PUBLIC_BASE ?? '/'`
- **Tailwind CSS v4** via `@tailwindcss/vite`
- **TypeScript strict**
- No JS framework — vanilla client-side i18n runtime inlined in `src/layouts/Base.astro`

## Project layout

```
src/
├── layouts/Base.astro          # HTML shell + inlined i18n runtime (browser lang detect, switcher, reveal, carousel)
├── components/
│   ├── Header.astro            # Logo + desktop nav + lang switcher + mobile hamburger
│   ├── Footer.astro            # Logo + contact + secondary switcher + credits
│   ├── Hero.astro              # Home hero (single-language title, CTA, decorative rule)
│   ├── HeroCarousel.astro      # Image carousel with gradient overlay for text contrast
│   └── LanguageSwitcher.astro  # Dropdown used in header + footer (same markup, same runtime hooks)
├── pages/
│   ├── index.astro             # Home: hero + carousel + 4 teaser sections + stats + contact teaser
│   ├── about.astro             # About: hero banner + intro + masonry gallery + mission + founder photo
│   ├── products.astro          # Products: hero banner + catalogue download + resistance notice + 4 line cards
│   └── contact.astro           # Contact: hero banner + 3 info cards + Google Maps iframe
├── i18n/
│   ├── config.ts               # 15 languages with flag, native name, dir (ltr/rtl), browser-locale matches
│   ├── helpers.ts              # Loads + exposes all JSONs; server-side fallback to EN
│   └── translations/*.json     # it, en, es, fr, de, pt, nl, tr, hu, ja, ko, zh, ar, he, ru
├── lib/url.ts                  # u(path) helper — prefixes every internal href/src with import.meta.env.BASE_URL
└── styles/global.css           # Tailwind + design tokens (palette, typography, shadows) + component styles
```

## The 15 languages

All translations live as flat JSON files keyed by dot-path (e.g. `home.about.title`).
`src/i18n/helpers.ts` loads them all at build time and exposes them inline via
`window.__SM_T` for the client runtime. The client runtime (bottom of `Base.astro`):

1. Reads `localStorage.sm.lang` or auto-detects from `navigator.languages`, falls back to `en`.
2. Applies to every element with `[data-i18n="key.path"]` (textContent) or `[data-i18n-attr="attr:key|..."]` (attribute).
3. Swaps `<html lang>` and `<html dir>` (AR and HE are RTL).
4. Updates all language switcher instances on the page (there are usually two: header + footer).

**Adding a new translation key:** add it to **all 15 JSON files** (one script-friendly location: `src/i18n/translations/*.json`).
The frontmatter pipeline sees them automatically — no registration needed.
Python one-liner pattern for batch edits exists in conversation history.

## Running locally

```bash
npm install
npm run dev                    # http://localhost:4321
npm run build                  # outputs to dist/ at base="/"
npm run preview                # preview the build locally
```

## Deploying to the staging FTP

The hosting is served from `/htdocs/` → `https://www.duebytes.it/`, and the convention is
to put in-progress client demos under `/htdocs/www/<client>/`. The Astro build needs the
`PUBLIC_BASE` env var to emit correct asset paths for the subpath.

```bash
# 1. Build with the correct subpath
rm -rf dist
PUBLIC_BASE="/www/santamaria/" npx astro build

# 2. Mirror to FTP (only-newer keeps it fast after the first full upload)
lftp -u "duebytes.it,<password>" ftp.duebytes.it -e "
  set ftp:ssl-allow no
  set mirror:parallel-transfer-count 5
  mirror -R --verbose --only-newer --delete dist/ www/santamaria/
  bye
"

# 3. Fix perms — lftp uploads as 700, Apache needs 755 to serve
lftp -u "duebytes.it,<password>" ftp.duebytes.it -e "
  set ftp:ssl-allow no
  cd www/santamaria/
  chmod -R 755 .
  quit
"

# 4. Verify
curl -sIL -o /dev/null -w '%{http_code}\n' https://www.duebytes.it/www/santamaria/
```

First upload is ~100 MB (images + the 9 MB PDF catalogue). Subsequent updates with
`--only-newer` take seconds.

## Deliberate scope decisions

- **Catalogue is out of scope** in this demo (products.astro shows 4 illustrative line cards only).
  The existing catalogue lives on in `sito_old/linea.php` + `sito_old/scheda.php` with its own MySQL DB.
  Phase 2 would port this to the Astro stack with content collections.
- **Single language per view** — never stack multiple languages on the same page (the legacy site does,
  that's explicitly what this redesign fixes). The hero shows only the active language's tagline.
- **Client logo used verbatim** — `sito_old/img/logoSM2.jpg`, copied under `public/legacy-img/logoSM2.jpg`.
  Don't replace with custom SVG marks unless the client asks.
- **Tagline text, not images** — the 15-language banner is real `<span lang="xx">` text, not the
  legacy `Testo_2020_Piantine_selezionate.jpg`. Each language has its own `meta.tagline` key.
- **No animation libraries** — the reveal-on-scroll uses a plain IntersectionObserver with a 1.2s
  safety fallback so headless browsers / Playwright fullPage screenshots still see the content.
- **Back-to-top button and footer dropdowns** must stay out of document flow (`position: fixed` +
  `display: none` when closed) — a dropdown left in layout while invisible previously inflated
  `document.scrollHeight` by ~500px.

## Communication style with the client

- Italian, "lei" formal form, **lowercase** ("le scrivo", not "Le scrivo") — Paolo's explicit preference.
- Frame the demo as a **starting point** — palette, typography, and layout are illustrative, everything
  negotiable. Never mention how quickly the demo was built.
- The technical arguments that resonate with this client: mobile usage, SEO (text-in-image penalty),
  proper multilingual vs. the legacy "15 languages stacked in one JPEG" approach.

## Testing

No automated test suite. Manual visual audit via Playwright MCP covers:
- 4 breakpoints: 375 (mobile), 768 (tablet), 1024 (desktop-sm), 1440 (desktop)
- 4 pages: home, about, products, contact
- Language switcher works (browser detection, manual change, RTL for AR/HE)
- No console errors, no 403/404s
- Document scroll height ends exactly at footer (no phantom gaps)