One Ocean Foundation: sito bilingue con contenuti da Strapi
Case study
- Il mio ruolo
- Ho sviluppato il front end in Next.js, con il team di sviluppo di Ride On.
- Durata
- Iniziato a marzo 2025
Il problema
La fondazione pubblica molti contenuti in due lingue e voleva un sito di forte impatto visivo, che il suo team potesse aggiornare dal CMS senza toccare il codice.
Cosa ho fatto e perché
- Blocchi dinamici: i contenuti composti a blocchi in Strapi diventano componenti React tipizzati.
- URL tradotti, con un cambio lingua che trova lo slug tradotto di ogni pagina.
- SEO internazionale: metadati per pagina e hreflang per ogni lingua.
- Animazioni con GSAP e Lenis: sezioni fissate, zoom e titoli lettera per lettera.
- Video che partono solo quando sono visibili.
Risultati
- IT + ENcon URL tradotti
- 3 tipi di contenutoprogetti, notizie ed eventi a blocchi dal CMS
- GSAP + Lenisanimazioni allo scroll sincronizzate
Stack in evidenza
- Next.js
- React 19
- Strapi
- GSAP
- Lenis
- next-intl
- Embla Carousel
- Tailwind CSS
Hai un progetto simile? Parliamone.
ScrivimiLa fondazione pubblica progetti, notizie ed eventi componendoli a blocchi nel CMS, e ogni blocco diventa un componente del sito. Gli indirizzi sono tradotti, e il cambio lingua porta alla stessa notizia o allo stesso progetto nell'altra lingua, non alla home. Le sezioni principali hanno animazioni allo scroll: zoom, sezioni fissate e titoli che compaiono lettera per lettera.
Come avevo costruito l'animazione delle card degli eventi, poi tolta dalla homepage nel restyling di ottobre 2026, l'ho raccontato nel post Card che si impilano allo scroll.
Cosa porto a un'agenzia o a una PMI da questo progetto
- Un front end che lavora con il CMS headless già scelto dal cliente o dall'agenzia, Strapi compreso.
- Un sito bilingue in cui il cambio lingua funziona anche sulle pagine dinamiche.
- Animazioni elaborate su un sito con molti contenuti editoriali.
Realizzato per One Ocean Foundation in collaborazione con Ride On
