Il sito gestisce il flusso narrativo aziendale in 5 sezioni: Hero con parallasse 3D su puntatore, About (Company + Solutions) con carousel 3D a schede, Products con tab switcher animato, Industries con griglia di settori target, e Contact con blocchi dual-country (Italia + America). Design completamente responsive, senza CMS, senza autenticazione, senza i18n — contenuti statici hardcoded nei file data.ts di ciascuna sezione.

Funzionalità principali

• Hero 3D parallax: useGSAP + gsap.quickTo su 3 layer indipendenti (glow, braccio robotico, testo) con profondità e durata diversa. Attivo solo su pointer: fine (no touch). Mobile: immagine separata (hero-mobile.webp), gradient overlay diagonale per leggibilità del testo.
• Navbar mobile dropdown: sostituisce il classico Sheet laterale con una tendina fixed che scende dall'header con GSAP (height: 0 → window.innerHeight - navH), sfondo bg-background solido, link separati da bordi border-primary. Click su voce: preventDefault + setTimeout(320ms) per completare l'animazione prima dello scroll. Freccia ruota da rotate-135 a rotate-225 via Tailwind transition-transform.
• Tab switcher prodotti: pill animata con GSAP (back.out(1), durata 0.55s) che scorre sotto la tab attiva. Posizione calcolata via getBoundingClientRect() relativo al container. gsap.set per il posizionamento iniziale senza animazione.
• useActiveSection: hook basato su scrollY + 40% viewport (non IntersectionObserver) per rilevamento sezione attiva affidabile anche dopo navigazione ad anchor.
• Navbar blur: layer absolute inset-0 bg-white/5 backdrop-blur-xl sempre presente con transition-opacity duration-700, visibile quando scrolled || open. backdrop-filter non è animabile via CSS — l'opacity fade è l'unica soluzione corretta.

Data layer e integrazioni

• PDF brochure: serviti da public/products/docs/. Campo pdfUrl opzionale in Product — i robot (LTS-6, SCR-6, XPS-6) non hanno ancora PDF.
• SEO: sitemap.ts, robots.ts, manifest.json, helper getPageMetadata() per OG + Twitter card + canonical. Variabile NEXT_PUBLIC_BASE_URL per la base URL canonicale.
• Font: Adobe Typekit (Aileron) via <link> in layout.tsx — richiede whitelist del dominio nel pannello Adobe Fonts. Inter da next/font/google come variabile CSS di fallback.
• Carousel: Embla Carousel 8.6.0 con plugin autoplay per le schede About/Solutions.

UI/UX e performance

• Styling: Tailwind CSS v4 con token CSS custom (--primary: #ccff00, --background, --foreground) definiti in globals.css. tailwind-merge + clsx via cn().
• Animazioni: GSAP 3.15.0 + @gsap/react 2.1.2. useGSAP per lifecycle dichiarativo. gsap.quickTo per parallasse fluido. back.out(1) per la pill tab.
• Componenti: Radix UI 1.4.3 (Tabs, Sheet) + shadcn/ui 4.1.1. Componenti custom: Freccia, ScheduleButton, FeatureRow, ProductTags.
• Performance: React Compiler abilitato (babel-plugin-react-compiler, reactCompiler: true in next.config.ts) — memoizzazione automatica. Immagini Next.js <Image> con priority sull'hero. Separazione immagini mobile/desktop. pointer: fine check per disabilitare parallasse su touch.

Highlight tecnico

• Stack completo: Next.js 16.2.1, React 19.2.4, TypeScript 5, Tailwind CSS 4, GSAP 3.15.0, pnpm 10.33.0
• Librerie chiave: @gsap/react 2.1.2 (hook GSAP), embla-carousel-react 8.6.0 (carousel), radix-ui 1.4.3 (primitives), tw-animate-css 1.4.0 (utility animations)
• Deployment: Vercel (Next.js App Router, nessuna configurazione custom)
• Tools: Biome 2.2.0 (lint + format, sostituisce ESLint + Prettier), @tailwindcss/postcss