Analizza il progetto esistente e aggiorna il sito mantenendo l’architettura attuale: sito statico multipagina HTML + CSS + JS con Tailwind già compilato. NON convertire il progetto a framework diversi. NON rifare tutto da zero. Lavora in continuità col codice esistente. CONTESTO FILE ATTUALI Nel root ci sono questi file principali: - home.html - galleria.html - fabiana.html - contatti.html - header.html - animazioni.js - animazioni.css - tailwind.input.css - tailwind-main.config.js - tailwind-main.css OBIETTIVO Aggiornare il sito di una cliente stilista/sarta. Il sito deve sembrare una vetrina premium, elegante, fashion, artigianale. Non deve sembrare un e-commerce classico, ma uno shop-vetrina con richiesta personalizzazione e prenotazione consulenza. MANTIENI - hero attuale con immagini che scorrono - bottoni/CTA attuali della hero - stile generale già approvato dalla cliente, migliorando solo dove serve NON FARE - niente React/Vite/Next - niente carrello - niente checkout - niente pagamenti online - niente rifacimento completo della struttura FILE DA MODIFICARE 1. home.html 2. header.html 3. animazioni.js 4. animazioni.css se necessario 5. tailwind-main.config.js 6. rigenerare tailwind-main.css FILE DA CREARE 1. come-funziona.html 2. shop.html VALUTA SE CREARE ANCHE - prodotti.js oppure un piccolo file dati JS per gestire i prodotti shop in modo ordinato Se utile, fallo. Meglio dati separati che HTML tutto hardcodato. ----------------------------------- 1) MODIFICHE A home.html ----------------------------------- Riorganizza la home in questo ordine: 1. Hero - mantieni struttura attuale con immagini che scorrono - mantieni CTA già esistenti 2. Sezione “Come funziona” - sostituisce l’attuale “La mia storia” - titolo: “Come funziona” - breve introduzione - 2 o 3 immagini placeholder eleganti / fashion - sezione cliccabile oppure con CTA “Scopri come funziona” - link a come-funziona.html 3. Galleria - mantieni l’impostazione già esistente - predisponi contenuti per foto di sfilate e abiti su misura 4. Sezione “Chi sono” - da mettere in fondo alla home - mantieni il concept grafico delle icone / elementi da vestire già presente - stile pulito, editoriale, personale ma raffinato Importante: - non rompere i layout già funzionanti - riusa classi e componenti dove ha senso ----------------------------------- 2) MODIFICHE A header.html ----------------------------------- Aggiorna la navigazione in alto a destra. Richiesta: - menu con dropdown / tendina elegante - deve funzionare bene desktop e mobile Voci minime: - Home - Come funziona - Shop - Chi sono - Contatti oppure Prenota consulenza, scegli la soluzione più coerente col sito attuale Se “Chi sono” non è una pagina ma una sezione interna della home: - fai puntare il link alla sezione corretta in home - gestisci bene gli anchor link Il dropdown deve sembrare raffinato, non da template standard. ----------------------------------- 3) CREA come-funziona.html ----------------------------------- Crea una nuova pagina dedicata che spieghi il processo passo passo. Struttura: - hero semplice con titolo “Come funziona” - intro breve - sezione step-by-step con 5 step, per esempio: 1. Primo contatto 2. Scelta modello / consulenza 3. Personalizzazione 4. Realizzazione 5. Consegna / prova finale Requisiti: - layout leggibile e arioso - blocchi visivi o immagini placeholder - evitare muri di testo - CTA finale verso: - shop.html - contatti.html oppure bottone prenota consulenza Stile: - elegante - sartoriale - femminile ma non lezioso - premium ----------------------------------- 4) CREA shop.html ----------------------------------- Questa pagina NON deve essere un vero e-commerce. Deve essere una vetrina collezione premium. Inserisci: - hero o intro breve shop - griglia prodotti / abiti di collezione - ogni card prodotto deve avere: - immagine - nome prodotto - breve descrizione o categoria - CTA “Scopri di più” oppure “Vedi dettagli” Per il dettaglio prodotto scegli la soluzione più semplice e pulita nel progetto attuale: - preferenza: modal dentro shop.html - alternativa: se ritieni più pulito, una sezione dettaglio dinamica nella stessa pagina NON creare decine di pagine prodotto separate se non serve. ----------------------------------- 5) DETTAGLIO PRODOTTO / MODAL ----------------------------------- Ogni prodotto deve aprire una vista dettagliata con: - immagini prodotto - nome abito - descrizione - eventuali dettagli stilistici - sezione personalizzazione - bottone “Prenota consulenza” Se usi modal: - gestisci apertura/chiusura con JS - blocca scroll background quando aperta se necessario - cura accessibilità minima e responsive ----------------------------------- 6) SEZIONE PERSONALIZZAZIONE ----------------------------------- Nel dettaglio prodotto inserisci una sezione ispirata a “Hai un progetto in mente?” con piccolo form: Campi: - nome - email - messaggio - richiesta personalizzazione Stile del copy: - consulenziale - sartoriale - non tecnico Per ora il form può essere: - pronto per integrazione futura oppure - collegato a contatti esistenti, se già presente una gestione semplice ----------------------------------- 7) PRENOTA CONSULENZA ----------------------------------- Aggiungi una CTA “Prenota consulenza”. Per ora: - prepara bottone e struttura - usa URL placeholder configurabile - rendi semplice il collegamento futuro a Calendly o altro calendario Puoi definire una costante JS o un attributo data-booking-url facile da sostituire. ----------------------------------- 8) MODIFICHE A animazioni.js ----------------------------------- Verifica e aggiorna il file JS esistente per gestire: - dropdown menu desktop/mobile - apertura/chiusura modal prodotto nello shop - eventuali micro-interazioni coerenti col sito - eventuali anchor scroll o gestione link interni se già presente questa logica Mantieni il codice ordinato. Se il file sta diventando troppo pieno, separa in un secondo JS solo se davvero utile. ----------------------------------- 9) MODIFICHE A animazioni.css ----------------------------------- Aggiungi solo ciò che serve per: - dropdown - modal prodotto - eventuali transizioni eleganti - stati hover/focus più raffinati Non appesantire. Riusa Tailwind dove possibile. ----------------------------------- 10) TAILWIND / BUILD CHECK ----------------------------------- Controlla tailwind-main.config.js. Verifica che il campo content includa tutti i file HTML e JS necessari, idealmente qualcosa del tipo: - ./*.html - ./*.js Se non include i nuovi file, aggiornalo. Poi rigenera tailwind-main.css in modo che le nuove classi usate in: - come-funziona.html - shop.html - eventuali nuovi JS/HTML vengano effettivamente compilate. Importante: - non cambiare inutilmente il processo di build - limita l’intervento al minimo indispensabile ----------------------------------- 11) COERENZA VISIVA ----------------------------------- Tutto il sito deve restare coerente con la preview esistente: - stesso linguaggio estetico - stessa sensazione premium - stessa qualità percepita Evita: - look da e-commerce standard - componenti troppo tech - stili incoerenti tra una pagina e l’altra Preferisci: - immagini grandi - spaziature curate - tipografia raffinata - hover delicati - sezioni ariose ----------------------------------- 12) OUTPUT RICHIESTO ----------------------------------- Alla fine: 1. applica le modifiche ai file esistenti 2. crea i nuovi file richiesti 3. aggiorna tailwind config se serve 4. rigenera tailwind-main.css 5. restituisci un riepilogo finale con: - file modificati - file creati - eventuali assunzioni fatte - eventuali placeholder da sostituire dopo Se trovi codice duplicato o poco pulito, refactor leggero consentito, ma senza rompere il sito attuale.