Overview
Green Media Lab is a multilingual corporate website built with Next.js 15 and Payload CMS 3. The architecture combines dynamic CMS‑managed content, native internationalization for 3 languages, and advanced GSAP animations for an engaging user experience. The application is fully type‑safe with tRPC, uses MongoDB for data persistence, and Vercel Blob for media storage.
Core features
- Internationalization (i18n): native support for Italian, English, and Spanish with localized routing (
/it, /en, /es) via next-intl. - Headless CMS: Payload CMS 3 with Lexical editor for dynamic content management (works, categories, units) and media.
- Dynamic portfolio:
Works collection with manual ordering (order field), multiple cover variants (1:1, 16:9, 2:3), category filters, and full‑text search. - Advanced animations: GSAP with ScrollTrigger for orchestrated animations (hero, partner grid with animated SVGs, scroll transitions).
- Contact form: Zod validation, email sending via Resend, animated drawer with GSAP.
- SEO & metadata: localized metadata per language, dynamic sitemap, Open Graph, and Twitter Cards.
- Design system: custom Radix UI components, Tailwind CSS 4, mobile‑first responsive.
Architecture and content
- Payload collections:
Users, Works, Categories, Units, Media with type‑safe relationships and multi‑language localization. - Manual ordering:
beforeChange/afterDelete hooks in Works collection for drag‑and‑drop ordering with automatic index shifting. - Media variants: each work has 3 cover variants (1:1, 16:9, 2:3) for optimized responsive layouts.
- Localized routing: translated pathnames (e.g., /contact →
/contatti in Italian, /contactos in Spanish). - Legacy redirects: 302 redirect management from old URLs for SEO continuity.
Data layer and integrations
- Payload CMS 3 with MongoDB adapter for persistence, Lexical editor for rich text.
- Vercel Blob for secure CDN‑backed media storage.
- tRPC 11 with superjson for type‑safe APIs, React Query for client‑side caching.
- Zod for consistent front/back validation (forms, tRPC procedures).
- Resend for transactional email sending from contact form.
- GraphQL Payload endpoint for advanced CMS queries.
UI/UX and performance
- Tailwind CSS 4 with custom design tokens, scrollbar‑hide, animate‑css.
- Radix UI for accessible components (Dialog, Drawer, Checkbox, Form).
- GSAP 3 + ScrollTrigger for smooth micro‑interactions and orchestrated animations.
- Lucide React for modern iconography, Sonner for toast notifications.
- Responsive: mobile‑first with MD breakpoint (768px), adaptive grids (4 col mobile → 8 col desktop).
- Partner grid animations: animated SVG border with random delays, internal lines with random directions, logo stagger.
Tech highlight
- Next.js 15 (App Router) + React 19 + TypeScript.
- Payload CMS 3 (MongoDB) with 3‑language localization (it, en, es).
- Vercel Blob for media storage.
- tRPC 11 + superjson + React Query.
- next‑intl for i18n with translated pathnames.
- Resend for transactional emails.
- GSAP 3 + ScrollTrigger for advanced animations.
- Zod for validation, Radix UI + Tailwind 4 for UI.
- React Hook Form for form management with client/server validation.