Creazione sito web

Prompt

# MISSION BRIEF: REDESIGN ARCHITETTURALE E CLINICO DI LIVELLO ELITE Agisci come Lead Creative Technologist, Principal Full-Stack Engineer ed Esperto di Web Design Sanitario Internazionale, con specializzazione in: - UX per Servizi Clinici e Psicologici di Fascia Alta (Luxury/Dark-Warm Editorial Healthcare). - Conformità Medica e Normativa (GDPR Art. 9 per dati particolari/sanitari, Codice Deontologico degli Psicologi Italiani, Linee Guida CNOP per le prestazioni online). - Accessibilità WCAG 2.2 Livello AAA. - Core Web Vitals (LCP < 1.2s, INP < 50ms, CLS = 0). - SEO Semantica Avanzata, Local SEO e Generative Engine Optimization (GEO/AEO). ## CONTESTO E CLIENTE - Professionista: Dott.ssa Anita Garibaldi, Psicologa Clinica e della Riabilitazione (iscritta all'Ordine degli Psicologi della Lombardia, Albo A). - Sede: Ricevimento in studi clinici dedicati a Milano e Consulenze Online (Italia ed Estero). - Specialità Distintive: Ansia e Burnout, Potenziamento Cognitivo (Riserva Cognitiva, Brain Fog), Dinamiche Familiari (Parentificazione), Terapia di Coppia (Stonewalling, Conflitti), Etnopsichiatria e Supporto Interculturale. - Lingue di Lavoro: Italiano, Inglese, Arabo (Dialetto Egiziano). - Posizionamento: Studio clinico privato di fascia alta; approccio pragmatico, scientifico, privo di giudizio, elegante, accogliente e rassicurante. --- ## OBIETTIVO DEL PROGETTO Evolvere l'attuale sito statico a pagina singola in una **piattaforma clinico-editoriale di livello enterprise**. Il progetto deve preservare l'estetica scura calda (Dark Luxury: Ossidiana, Oro Satinato, Crema Caldo, Vetro Satinato), ma superare i limiti tecnici, legali e di conversione del codice esistente. --- ## LINEE GUIDA DI SVILUPPO DETTAGLIATE ### 1. ARCHITETTURA E STACK TECNOLOGICO - Architettura: Static Site Generation (SSG) / Jamstack ad altissime prestazioni con supporto a routing dinamico multilingua (es. Astro / Next.js Static Export / Vite + Modern HTML-CSS-JS modulare). - Struttura Routing Multilingua: - Italiano (Default): `/` - Inglese: `/en/` - Arabo / Dialetto Egiziano: `/ar/` con attivazione automatica di `dir="rtl"` e font dedicato bidirezionale. - Ogni pagina deve disporre di tag `<link rel="alternate" hreflang="..." />` accuratamente mappati. ### 2. DESIGN SYSTEM EVOLUTO ("WARM OBSIDIAN & DUSTED GOLD") - Tavolozza Colori Dinamica (garantire ratio di contrasto WCAG AAA ≥ 7:1 per testo normale): - Background Base: `#131412` (Ossidiana Profonda). - Background Superficie/Card: `#1A1B18` con bordi in vetro dorato a bassa saturazione (`rgba(194, 157, 89, 0.18)`). - Colore Accento Oro: Scala a 5 tonalità (dall'oro antico `#9F7E41` al bagliore chiaro `#F2DFB3`). - Colore Testo Primario: `#F8F7F4` (Bianco Caldo Perlato). - Colore Testo Secondario/Muted: `#DDD7CE` (Taupe chiaro ad alto contrasto verificato). - Tipografia: - Display & Titoli: *Cormorant Garamond* (Weights 400, 600, Italic) con kerning e legature attive. - Testo Corpo & UI: *Plus Jakarta Sans* (Weights 300, 400, 500, 600). - Testo Arabo (per la vista `/ar/`): *Amiri* o *Noto Sans Arabic* perfettamente scalato e allineato sull'asse ottico. - Micro-Interazioni e Motion Design: - Scroll fluido e controllato compatibile con monitor a refresh elevato (120Hz/144Hz). - Micro-parallasse discreto sulle citazioni cliniche e sulle cornici ritratto. - Rispetto rigoroso di `@media (prefers-reduced-motion: reduce)`: disattivazione di trasformazioni complesse senza perdita di leggibilità. ### 3. ESPERIENZA UTENTE (UX) & CONVERSION RATE OPTIMIZATION CLINICA - Hero Section Iper-Focalizzata: - Titolo principale calibrato dal punto di vista emotivo e clinico. - Badge di fiducia immediati (Iscrizione Albo OPL, Riservatezza Sanitaria, Ricevimento Studio Milano & Online). - Due percorsi di azione chiari: "Trova il tuo percorso (Triage Guidato)" e "Contatto Rapido Riservato". - Modulo Triage Interattivo ("Bussola del Benessere"): - Un selettore interattivo a 3 passaggi che permette all'utente di identificare la propria problematica (es. "Ansia e sovraccarico cognitivo", "Crisi di coppia o stonewalling", "Difficoltà con la famiglia d'origine", "Transizione culturale/expat"). - L'interfaccia precompila il motivo del contatto e mostra un'anteprima dell'approccio clinico consigliato, riducendo l'ansia da prestazione del paziente. - Sezione Prenotazione / Contatto conforme al Codice Deontologico: - Modulo a doppio livello: 1. Richiesta preliminare di colloquio informativo gratuito (15 minuti). 2. Modulo di contatto standard. - Crittografia end-to-end / messaggistica protetta per le comunicazioni preliminari. - Disclaimer legale rafforzato sul divieto di trasmettere dettagli su patologie gravi o farmaci nel form online. - Pulsante anti-panico / Safety Exit ("Uscita Rapida da questa pagina") posizionato discretamente per persone che consultano il sito in contesti di violenza domestica o controllo coercitivo. ### 4. ARCHITETTURA DEL BLOG CLINICO & CONTENT STRATEGY - Convertire la griglia hardcoded in un sistema con: - Filtri istantanei per macro-area tematica (es. Relazioni di Coppia, Burnout & Neuroscienze, Dinamiche Familiari, Etnopsichiatria). - Barra di ricerca rapida accessibile (`role="search"`). - Stima del tempo di lettura ed elementi di citation index per i motori AI (es. definizioni evidenziate per Google Search Generative Experience / Perplexity). - Card articolo con microdata Schema.org `MedicalScholarlyArticle` o `BlogPosting` con campi `author`, `reviewedBy`, e `medicalAudience`. ### 5. ACCESSIBILITÀ (WCAG 2.2 LIVELLO AAA) & TECNICHE ROBUSTE - Struttura di intestazioni semantiche (`h1` -> `h2` -> `h3`) rigorosa e senza salti di livello. - Aree di tocco interattive di almeno 44x44px. - Skip links estesi ("Salta al contenuto", "Salta alle aree di supporto", "Salta ai contatti"). - Indicatori di stato ARIA dinamici (`aria-live="polite"` per notifiche toast e cambi lingua; `aria-expanded` nativo e sincronizzato per menu e accordion FAQ). - Focus ring personalizzati ma chiaramente visibili (`outline: 2px solid var(--color-gold); outline-offset: 3px`). ### 6. SEO TECNICA, LOCAL SEO & DATI STRUTTURATI (SCHEMA.ORG JSON-LD) Genera il blocco JSON-LD completo e validato con `@graph` comprendente: - `MedicalBusiness` / `PsychologicalClinic`: Con coordinate geografiche per Milano, orari differenziati studio fisico / telemedicina online, `priceRange`, link a profili social ufficiali (`sameAs`), e lista esaustiva di `knowsAbout` clinici. - `Person` (Dott.ssa Anita Garibaldi): Titoli accademici, specializzazione, iscrizione all'Ordine della Lombardia (`identifier`), lingue parlate (`knowsLanguage`). - `FAQPage`: Le domande frequenti aggiornate con trasparenza tariffaria (D.L. Bersani / requisiti di trasparenza sanitaria). - `MedicalWebPage`: Con metadati dedicati alla medicina basata sull'evidenza. --- ## OUTPUT RICHIESTO Fornisci il codice sorgente completo, modulare e pronto all'uso: 1. **`index.html`**: Il markup semantico definitivo con tutte le sezioni ottimizzate, accessibili e dotate dei nuovi elementi UX (Triage, Safe Exit, Modale di contatto etico, Blog dinamico, FAQ, Footer istituzionale). 2. **`style.css`**: Il foglio di stile completo con il nuovo Design System Dark Luxury AAA, supporto RTL nativo per l'Arabo tramite CSS Logical Properties (`margin-inline`, `padding-inline`), fluid typography via `clamp()`, layout a griglie asimmetriche e animazioni ultra-fluide compatibili con prefers-reduced-motion. 3. **`app.js`**: Il motore JavaScript modulare (ES6+), privo di dipendenze pesanti, comprensivo di: - Motore di localizzazione reattivo (IT, EN, AR con gestione `dir` e font switching). - Triage diagnostico-orientativo a step. - Gestione sicura del form di contatto e validazione clinica dei campi. - Filtro e paginazione fluida degli articoli. - Accordion FAQ accessibile a tastiera e toast notification system con sound feedback facoltativo accessibile.

A system prompt was added to support web rendering