The site narrates the company story across 5 sections: Hero with 3D pointer parallax, About (Company + Solutions) with a 3D stacked card carousel, Products with an animated tab switcher, Industries with a target-sector grid, and Contact with dual-country blocks (Italy + America). Fully responsive, no CMS, no auth, no i18n — content is static, hardcoded in per-section data.ts files.

Key features

• Hero 3D parallax: useGSAP + gsap.quickTo across 3 independent layers (glow, robot arm, text) with different depths and durations. Active only on pointer: fine (no touch). Mobile: separate image (hero-mobile.webp) with diagonal gradient overlay for text legibility.
• Mobile navbar dropdown: replaces the standard side Sheet with a fixed panel that slides down from the header using GSAP (height: 0 → window.innerHeight - navH), solid bg-background, links separated by border-primary dividers. Link click: preventDefault + setTimeout(320ms) to let the close animation finish before scrolling. Arrow rotates from rotate-135 to rotate-225 via Tailwind transition-transform.
• Products tab switcher: animated pill using GSAP (back.out(1), 0.55s) that slides under the active tab. Position computed via getBoundingClientRect() relative to the container. gsap.set for instant initial positioning without animation.
• useActiveSection: scroll-position hook (scrollY + 40% viewport) replacing IntersectionObserver for reliable active section detection after anchor navigation.
• Navbar blur: always-present absolute inset-0 bg-white/5 backdrop-blur-xl layer with transition-opacity duration-700, visible when scrolled || open. backdrop-filter cannot be CSS-transitioned — opacity fade is the only correct solution.

Data layer & integrations

• PDF brochures: served from public/products/docs/. Optional pdfUrl field in Product — robot models (LTS-6, SCR-6, XPS-6) have no PDF yet.
• SEO: sitemap.ts, robots.ts, manifest.json, getPageMetadata() helper for OG + Twitter card + canonical URL. NEXT_PUBLIC_BASE_URL env var for canonical base.
• Fonts: Adobe Typekit (Aileron) via <link> in layout.tsx — requires domain whitelist in Adobe Fonts dashboard. Inter from next/font/google as CSS variable fallback.
• Carousel: Embla Carousel 8.6.0 with autoplay plugin for About/Solutions cards.

UI/UX and performance

• Styling: Tailwind CSS v4 with CSS custom tokens (--primary: #ccff00, --background, --foreground) defined in globals.css. tailwind-merge + clsx via cn().
• Animations: GSAP 3.15.0 + @gsap/react 2.1.2. useGSAP for declarative animation lifecycle. gsap.quickTo for smooth parallax. back.out(1) for tab pill.
• Components: Radix UI 1.4.3 (Tabs, Sheet) + shadcn/ui 4.1.1. Custom components: Freccia, ScheduleButton, FeatureRow, ProductTags, MobileDropdown.
• Performance: React Compiler enabled (babel-plugin-react-compiler, reactCompiler: true in next.config.ts) — automatic memoization. Next.js <Image> with priority on hero. Separate mobile/desktop images. pointer: fine check to disable parallax on touch devices.

Technical highlights

• Full stack: Next.js 16.2.1, React 19.2.4, TypeScript 5, Tailwind CSS 4, GSAP 3.15.0, pnpm 10.33.0
• Key libraries: @gsap/react 2.1.2 (GSAP hook), 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, no custom config required)
• Tools: Biome 2.2.0 (replaces ESLint + Prettier), @tailwindcss/postcss