
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 — culminando in 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