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.