Panoramica

Green Media Lab è un sito web aziendale multilingue costruito con Next.js 15 e Payload CMS 3. L'architettura combina contenuti dinamici gestiti via CMS headless, internazionalizzazione nativa per 3 lingue e animazioni GSAP avanzate per un'esperienza utente coinvolgente. L'applicazione è completamente type‑safe con tRPC, usa MongoDB per la persistenza dei dati e Vercel Blob per lo storage media.

Funzionalità principali

• Internazionalizzazione (i18n): supporto nativo per italiano, inglese e spagnolo con routing localizzato (/it, /en, /es) tramite next-intl.
• CMS headless: Payload CMS 3 con editor Lexical per gestione dinamica di contenuti (lavori, categorie, unità operative) e media.
• Portfolio dinamico: collezione Works con ordinamento manuale (order field), varianti cover multiple (1:1, 16:9, 2:3), filtri per categorie e ricerca full‑text.
• Animazioni avanzate: GSAP con ScrollTrigger per animazioni orchestrate (hero, griglia partner con SVG animati, transizioni scroll).
• Form di contatto: validazione Zod, invio email tramite Resend, drawer animato con GSAP.
• SEO & metadata: metadata localizzati per lingua, sitemap dinamica, Open Graph e Twitter Cards.
• Design system: componenti Radix UI customizzati, Tailwind CSS 4, responsive mobile‑first.

Architettura e contenuti

• Collezioni Payload: Users, Works, Categories, Units, Media con relazioni type‑safe e localizzazione multi‑lingua.
• Ordering manuale: hook beforeChange/afterDelete in collezione Works per ordinamento drag‑and‑drop, con shift automatico degli indici.
• Media variants: ogni work ha 3 varianti di cover (1:1, 16:9, 2:3) per layout responsive ottimizzati.
• Routing localizzato: pathname tradotti (es. /contact → /contatti in italiano, /contactos in spagnolo).
• Redirects legacy: gestione redirect 302 da vecchi URL per SEO continuity.

Data layer e integrazioni

• Payload CMS 3 con adapter MongoDB per persistenza, editor Lexical per rich text.
• Vercel Blob per storage media sicuro e CDN‑backed.
• tRPC 11 con superjson per API type‑safe, React Query per caching lato client.
• Zod per validazione coerente front/back (form, procedure tRPC).
• Resend per invio email transazionali dal form di contatto.
• GraphQL endpoint Payload per query CMS avanzate.

UI/UX e performance

• Tailwind CSS 4 con custom design tokens, scrollbar‑hide, animate‑css.
• Radix UI per componenti accessibili (Dialog, Drawer, Checkbox, Form).
• GSAP 3 + ScrollTrigger per micro‑interazioni fluide e animazioni orchestrate.
• Lucide React per iconografia moderna, Sonner per toast notifications.
• Responsive: mobile‑first con breakpoint MD (768px), griglie adaptive (4 col mobile → 8 col desktop).
• Animazioni partner grid: border SVG animato con delay random, linee interne con direzioni casuali, stagger sui loghi.

Highlight tecnico

• Next.js 15 (App Router) + React 19 + TypeScript.
• Payload CMS 3 (MongoDB) con localizzazione 3 lingue (it, en, es).
• Vercel Blob per media storage.
• tRPC 11 + superjson + React Query.
• next‑intl per i18n con pathname tradotti.
• Resend per email transazionali.
• GSAP 3 + ScrollTrigger per animazioni avanzate.
• Zod per validazioni, Radix UI + Tailwind 4 per UI.
• React Hook Form per gestione form con validazione client/server.