Landing d'una sola pàgina per a la Floristeria Les Flors (Granollers, Catalunya).
Text en català amb selector CAT/ES, animació d'intro amb <canvas> i catàleg de serveis.
- Stack: Astro + Tailwind CSS v4
- Sortida: estàtica (HTML lleuger, ràpid a mòbil)
npm install # instal·la dependències
npm run dev # servidor de desenvolupament (http://localhost:4321)
npm run build # genera el lloc a dist/
npm run preview # previsualitza el buildTot el contingut viu a src/data/:
| Vols canviar… | Edita |
|---|---|
| Textos (CAT i ES) | src/data/i18n.ts |
| Adreça, telèfon, horari, xarxes | src/data/site.ts |
| Categories del catàleg (afegir/treure) | src/data/services.ts + textos a i18n.ts |
| Slides del hero | src/data/hero.ts |
| Paleta de color i tipografies | src/styles/global.css (bloc @theme) |
- Copia les imatges a
public/images/(recomanat 1920×1080 per al hero, optimitzades). - Indica la ruta als arrays:
- Hero:
src/data/hero.ts→image: '/images/hero-1.jpg' - Serveis:
src/data/services.ts→image: '/images/ram.jpg' - Open Graph: posa
public/images/og.jpg(1200×630).
- Hero:
Mentre image estigui buit, es mostra un placeholder clarament marcat.
src/
├── components/ # Header, Hero, Services, About, Footer, IntroAnimation, Logo, LangSwitcher
├── data/ # i18n, site, services, hero (contingut editable)
├── layouts/ # Layout.astro (<head>, SEO, JSON-LD)
├── pages/ # index.astro
├── scripts/ # intro (canvas), carousel, services, i18n-client
└── styles/ # global.css (tema + utilitats)
La carpeta comunicacio/ és un vault d'Obsidian amb l'estat del
treball (tauler INDEX.md, notes per tasca i DECISIONS.md). Llegeix-la abans de continuar.
- Respecta
prefers-reduced-motion: sense l'animació d'intro, el logo es mostra directament. - L'animació del canvas limita el nombre de partícules i s'atura en acabar.
- Millora progressiva: sense JS, la pàgina és usable (logo visible, catàleg obert).