Wedding-Templates Guide · Per Noelia

Stack tecnico REALE

Diferente del Sharkcode main repo (NON Astro + NON Sanity + NON CF Pages).

5 Templates esistenti

Production-ready (4) + draft (1). Tutti in ~/Code/Wedding-Templates/templates/ post-clone.

Workflow customizzazione cliente

Come duplicare + customizzare template per cliente nuovo Wedding. Vos decís a Claude, Claude esegue.

1. Scaffolding nuovo template

# Duplica template esistente (es. federica-lorenzo)
cp -r templates/federica-lorenzo templates/cliente-nuovo

# Update package.json (Claude lo fa)
cd templates/cliente-nuovo
# Change "name": "federica-lorenzo" → "name": "cliente-nuovo"

# Root pnpm workspace registra automáticamenteamente il nuovo template
cd ../..
pnpm install

2. File da customizzare per cliente

3. Comandi workflow

# Dev server (port 5173-5178)
pnpm --filter cliente-nuovo dev

# Build production
pnpm --filter cliente-nuovo build

# Type check
pnpm --filter cliente-nuovo type-check

# Deploy via FTP SiteGround
node tools/ftp-deploy.mjs

# QA tools
node tools/pixel-diff.mjs  
node tools/verify-template.mjs  
node tools/self-review.mjs 
node tools/screenshot-matrix.mjs

Brand integration pattern

Tailwind @theme block (NON CSS custom properties classic). Pattern Wedding-Templates specifico.

@theme {
  --color-cream: #faf6ef;
  --color-olive: #486851;
  --color-terracotta: #c2734c;
  --font-script: 'Great Vibes', cursive;
  --font-serif: 'Cormorant Garamond', serif;
  --font-body: 'Poppins', sans-serif;
}

@font-face {
  font-family: 'Great Vibes';
  src: url('../assets/fonts/great-vibes.ttf') format('truetype');
  font-display: swap;
}

CSS Variables (per-template defaults in :root):

• Text scale (--text-xs through --text-hero-script, clamp() responsive)
• Spacing scale (--space-xs through --space-2xl)
• Layout (--max-width, --nav-height, --gutter)
• Animation durations (--duration-fast, --duration-smooth, --duration-scroll)
• Border radius, section heights

Images: .png source files + WebP conversion + lazy loading per section. Favicon per cliente generato via Python script (generate-favicon-fl.py). Responsive image optimization (responsive-images-lf.mjs).

Case study · Federica & Lorenzo

Template più recente production (May 2026 active iteration). 70+ commits in 3 mesi. Esempio realistic di customization scope per cliente Wedding.

Customizzazioni applicate

1. Hero venue: "Basilica di Sant'Anselmo all'Aventino" (font clamp 3rem → 2.1rem per mobile fit)
2. Cerimonia + Ricevimento dual venues: carousel on mobile, nested VenueSections
3. Timeline: 4 icon frames (aperitivo, cena, torta, balli) + custom icons
4. RSVP split: ospite + accompagnatore allergies (separate columns Supabase)
5. Gifts section: beneficiari nome completo (whitespace-nowrap per 1-line wrap mobile)
6. Monogram + favicon: Python image processor tools
7. Envelop animation video: Remotion + ffmpeg
8. Multi-viewport responsive polish: macbook13 + laptop + tablet + mobile debug scripts
9. Color palette: warm romantic (custom terracotta + sage tones)
10. Deep May 2026 client revisions: ortensie decorations, cena orario 20:30, Tier 2/3b responsive fixes

CLIENT DATA HANDLING · regola CRITICA

Regola

• Copy-paste verbatim: IBAN, codice fiscale, telefono, nomi, indirizzi → MAI parafrasi, MAI typing manual
• Validate checksum: IBAN ha checksum digits (algoritmo ISO 13616). Claude valida prima di escribir.
• Read-back to user before deploy: prima di git push final, Claude legge a voce alta i dati cliente sensibili + Michel conferma "ok corretti"
• NO autofill: zero "intelligent guess" su dati cliente. Se manca un IBAN, chiede a Michel.

Applicazione pratica per te

Quando lavori su cliente Wedding pair-mode con Michel + Claude:

1. Cliente manda brief PDF con dati (Michel intermediate)
2. Michel ti passa dati testuali estratti
3. Vos decís "Claude, aggiorna il template con questi dati: [paste verbatim]"
4. Claude scrive content.ts, poi rilegge i dati sensibili (IBAN, CF, telefono)
5. Tu + Michel confermate "ok corretti" prima di commit + deploy

Gap vs Sharkcode main

Differenze chiave. Quando lavori Wedding-Templates recordá che NON è Sharkcode standard.

Quick Start per te

Dopo setup MacBook done, primo hands-on Wedding-Templates.

# 1. Clone sibling repo
git clone <wedding-templates-url> ~/Code/Wedding-Templates
cd ~/Code/Wedding-Templates

# 2. Install dependencies
pnpm install

# 3. Copy env
cp .env.example .env
cp templates/maira-matteo-ita/.env.example templates/maira-matteo-ita/.env

# 4. Run a template dev server
pnpm dev:maira              # Opens port 5173
# o
pnpm dev:giulia             # Opens port 5177

# 5. Studio duplication workflow (esercizio Day 2-7)
# Copy federica-lorenzo/ → templates/cliente-nuovo-test/
# Edit content.ts, theme.css, assets/
# pnpm --filter cliente-nuovo-test dev

# 6. Deploy via FTP (solo quando cliente reale, NON test)
pnpm --filter cliente-nuovo build
node tools/ftp-deploy.mjs

Esercizio Day 2-7 (Future Session 3 prep)

1. "Claude, mostrame el repo Wedding-Templates + listame los templates con descripción"
2. "Claude, abrí federica-lorenzo en localhost para que pueda ver el sitio"
3. "Claude, duplicá este template para cliente ficticio 'Mariposa Wedding', palette verde menta + dorado"
4. Vos guardás localhost + decís "ok va bien" / "no, palette más cálida"
5. Quando ok, "Claude, hacé commit y push"