
Costellazioni “Il Fiume”
- Astro
- Tailwind CSS
- Landing page
- Ruolo
- Progettazione e sviluppo landing page
- Cliente
- Centro Il Fiume
- Settore
- Benessere olistico, crescita personale
- Focus
- UX orientata alla conversione, performance



Il progetto
La realizzazione della landing page per gli incontri mensili sulle Costellazioni Familiari Sistemiche ha richiesto un delicato equilibrio tra empatia ed efficacia comunicativa. L’obiettivo principale era tradurre l’atmosfera di un “cerchio sacro di ascolto” in un’interfaccia digitale rassicurante, capace al contempo di facilitare le iscrizioni e comunicare con chiarezza il valore del percorso proposto. Per raggiungere questo scopo, ho progettato un’esperienza utente immersiva e orientata alla conversione: la pagina accoglie i visitatori con una hero section dotata di video in background HTML5 che trasmette un’immediata connessione umana, mentre l’estetica glassmorphism, ottenuta tramite le utility di Tailwind CSS, conferisce leggerezza e respiro ai contenuti. L’architettura dell’informazione guida fluidamente l’utente lungo un funnel strategico: dai benefici della pratica alle testimonianze gestite tramite uno slider dinamico con Swiper.js, fino a un form di contatto perfettamente integrato per azzerare gli attriti.
Per ottimizzare le performance e mantenere l’attenzione focalizzata sulla prenotazione, ho implementato un menu sticky intelligente e ho gestito tutti gli approfondimenti (come le biografie dei facilitatori e la privacy policy) sfruttando la pulizia e l’accessibilità del tag nativo <dialog>. Sviluppata con Astro, la landing page finale risulta ultrarapida, emozionalmente coinvolgente e tecnicamente ineccepibile, rivelandosi lo strumento perfetto per supportare campagne di comunicazione e gestire con costanza le iscrizioni agli appuntamenti mensili.
Cosa ho fatto, nel concreto
Design Immersivo ed Emozionale
Per trasmettere l'empatia e l'accoglienza degli incontri, ho integrato un video in background HTML5 ottimizzato e un'estetica glassmorphism tramite Tailwind CSS. Questo approccio visivo cattura l'attenzione fin dal primo istante e fa "respirare" i contenuti, mettendo l'utente immediatamente a proprio agio.
Velocità e Tecnologie Native
La landing page è sviluppata con Astro per garantire tempi di caricamento istantanei. Per mantenere il codice leggero e pulito, ho evitato framework complessi, affidandomi a Vanilla JavaScript e sfruttando il tag HTML nativo <dialog> per una gestione fluida e accessibile delle finestre modali.
UX Orientata alla Conversione
L'intera architettura dell'informazione è studiata per guidare l'utente senza distrazioni verso la prenotazione agli incontri mensili. L'integrazione di un form diretto e di slider touch-friendly (tramite Swiper.js) per le testimonianze riduce al minimo gli attriti, massimizzando l'acquisizione di nuovi contatti.
Il design system del progetto
Palette e tipografia applicate al progetto.
Tocca un colore per vedere dove viene usato nell'interfaccia.

Tipografia: Kodchasan
Uno sguardo al risultato
Tre schermate della landing page per gli incontri mensili di Costellazioni Familiari Sistemiche. Il lavoro è stato soprattutto di tono: colori caldi, poco testo e un pulsante di iscrizione sempre a portata di mano.
Clicca su un'immagine per ingrandirla.
- Uno spazio sacro di ascolto
La sezione che apre il percorso: una foto di gruppo e quattro benefici in schede, senza spiegazioni lunghe.
- La hero su smartphone
La frase d'apertura, poche righe di testo e il pulsante «Prenota il tuo posto» a portata di pollice.
- La home
Data, luogo e facilitatori del prossimo incontro accanto al testo, così chi arriva sa subito quando e dove.