Initial commit: demo sito clinica veterinaria

clinica-app/ideas.md

@@ -0,0 +1,152 @@
+# Proposte di Design — Clinica Veterinaria Formiginese
+
+## Proposta A — "Biophilic Precision"
+<response>
+<text>
+**Design Movement:** Biophilic Modernism — fusione tra rigore medico-scientifico e calore naturale organico.
+
+**Core Principles:**
+- Contrasto tra la precisione clinica (linee nette, spazi bianchi) e la calore della natura (toni verdi, texture organiche)
+- Gerarchia visiva costruita su asimmetria controllata: testo a sinistra, immagine a destra in alternanza
+- Tipografia editoriale con serif elegante per i titoli e sans-serif leggibile per il corpo
+- Microinterazioni fluide che trasmettono cura e attenzione
+
+**Color Philosophy:**
+- Verde salvia profondo `#3D6B4F` come colore primario (evoca natura, salute, fiducia)
+- Bianco caldo `#FAFAF7` come sfondo (non freddo, accogliente)
+- Oro antico `#C9A84C` come accento per CTA e dettagli
+- Grigio ardesia `#4A4A5A` per il testo
+- Emozione: professionalità rassicurante, non ospedaliera
+
+**Layout Paradigm:**
+- Hero asimmetrico: testo a sinistra su sfondo bianco, immagine animale a destra a piena altezza
+- Sezioni servizi in layout "magazine" alternato (immagine-testo / testo-immagine)
+- Navigazione orizzontale con logo a sinistra e menu a destra, sticky su scroll
+
+**Signature Elements:**
+- Linea sottile verde che scorre verticalmente come separatore di sezione
+- Cerchi sfumati verdi come sfondo decorativo delle card servizi
+- Foto animali con bordo organico (clip-path curvilinea)
+
+**Interaction Philosophy:**
+- Hover sulle card: elevazione con ombra morbida e leggero scale
+- Scroll: fade-in progressivo delle sezioni con leggero slide-up
+- CTA: pulsanti con bordo verde che si riempie al hover
+
+**Animation:**
+- Entrata hero: titolo slide-in da sinistra, immagine fade-in da destra (0.6s ease-out)
+- Card servizi: staggered entrance con delay 0.1s tra ciascuna
+- Navbar: background blur che appare dopo 80px di scroll
+
+**Typography System:**
+- Display: Playfair Display (serif elegante) — titoli H1/H2
+- Body: DM Sans (geometric sans) — testo corrente, navigazione
+- Accent: DM Mono per numeri statistici e dettagli tecnici
+</text>
+<probability>0.08</probability>
+</response>
+
+---
+
+## Proposta B — "Clinical Warmth" ✅ SELEZIONATA
+<response>
+<text>
+**Design Movement:** Warm Minimalism Clinico — minimalismo caldo ispirato al design scandinavo applicato al contesto medico-veterinario.
+
+**Core Principles:**
+- Spazio bianco generoso come elemento di design attivo, non vuoto
+- Fotografia animale come protagonista assoluta: immagini grandi, emozionali, a piena larghezza
+- Tipografia mista: serif per i titoli istituzionali, sans-serif geometrico per l'interfaccia
+- Palette cromatica che evoca fiducia medica senza freddezza ospedaliera
+
+**Color Philosophy:**
+- Blu petrolio `#1B4F72` come colore primario (autorevolezza medica, profondità)
+- Sabbia calda `#F5F0E8` come sfondo alternativo delle sezioni
+- Verde acqua `#4ECDC4` come accento per CTA e highlights
+- Bianco puro `#FFFFFF` per le sezioni principali
+- Emozione: competenza professionale + calore umano verso gli animali
+
+**Layout Paradigm:**
+- Hero a schermo intero con immagine animale + overlay gradiente + testo sovrapposto
+- Sezioni in blocchi alternati bianco/sabbia per ritmo visivo
+- Card servizi in layout orizzontale a 3 colonne con immagine in alto
+- Team in layout a griglia asimmetrica 2+3
+
+**Signature Elements:**
+- Paw print sottile come watermark decorativo nelle sezioni
+- Bordo superiore colorato (3px) sulle card come indicatore di categoria
+- Icone lineari custom per i servizi (radiologia, chirurgia, laboratorio)
+
+**Interaction Philosophy:**
+- Hover card: bordo superiore che si espande + leggero lift
+- Bottoni CTA con freccia animata al hover
+- Immagini hero con parallax leggero su scroll
+
+**Animation:**
+- Hero: fade-in testo con typewriter effect sul titolo principale
+- Sezioni: slide-up con opacity transition (intersection observer)
+- Statistiche: count-up animation quando entrano nel viewport
+
+**Typography System:**
+- Display: Cormorant Garamond (serif elegante) — H1, H2 istituzionali
+- Body: Nunito Sans (humanist sans) — testo corrente, UI
+- Accent: Nunito Sans Bold per numeri e statistiche
+</text>
+<probability>0.07</probability>
+</response>
+
+---
+
+## Proposta C — "Bold Editorial"
+<response>
+<text>
+**Design Movement:** Editorial Brutalism Soft — ispirato al design editoriale delle riviste di lusso, con contrasti forti e layout audaci.
+
+**Core Principles:**
+- Contrasto estremo bianco/nero come struttura, colore come eccezione
+- Tipografia come elemento grafico: titoli enormi che escono dai margini
+- Immagini animali in bianco e nero con accenti di colore
+- Layout non convenzionale che rompe la griglia standard
+
+**Color Philosophy:**
+- Nero profondo `#0D0D0D` come colore primario
+- Bianco puro `#FFFFFF` come sfondo
+- Rosso corallo `#E63946` come unico accento (urgenze, CTA primari)
+- Grigio chiaro `#F4F4F4` per le sezioni alternate
+- Emozione: modernità audace, memorabilità, differenziazione dalla concorrenza
+
+**Layout Paradigm:**
+- Hero con testo gigante (viewport-width) sovrapposto all'immagine
+- Sezioni con layout a magazine: colonne di larghezza variabile
+- Navigazione laterale verticale su desktop
+
+**Signature Elements:**
+- Titoli in uppercase con letter-spacing estremo
+- Linee orizzontali nere come separatori di sezione
+- Numeri in grande come decorazione di sfondo
+
+**Interaction Philosophy:**
+- Hover: inversione colore (bianco su nero → nero su bianco)
+- Cursore custom con paw print
+- Transizioni di pagina con slide orizzontale
+
+**Animation:**
+- Hero: testo che si rivela da sotto una maschera nera
+- Scroll: elementi che entrano da direzioni opposte
+- Immagini: zoom-in sottile al hover
+
+**Typography System:**
+- Display: Bebas Neue (condensed bold) — titoli impattanti
+- Body: Libre Baskerville (serif leggibile) — testo corrente
+- UI: Space Grotesk — navigazione e interfaccia
+</text>
+<probability>0.06</probability>
+</response>
+
+---
+
+## Decisione Finale
+
+**Design scelto: Proposta B — "Clinical Warmth"**
+
+Motivazione: La proposta B bilancia perfettamente l'autorevolezza medica con il calore emotivo che i proprietari di animali cercano. Il blu petrolio trasmette competenza e fiducia, mentre la palette sabbia e le grandi fotografie animali creano un'atmosfera accogliente. Il layout pulito con sezioni alternate garantisce leggibilità e navigabilità ottimale per tutti i target di utenza.