Migrate the standalone Vite + React Three Fiber experience into the existing Next.js site as the body of the How It Works page, replacing the Miles3 / WhyChooseDoormile / TheDoormileWay content sections while preserving the Elementor hero, global Header/Footer, layout, routing and SEO. - New self-contained module: src/modules/how-it-works-3d/ (R3F scene, hooks, zustand store, animations, curves, constants, utils, scoped CSS). App.jsx → Experience3D.jsx; 3d_scene.jsx → models/Scene3D.jsx. - 32MB GLB moved to public/models/3d_scene_final.glb; useGLTF paths updated. - Client-only entry via dynamic ssr:false loader (Experience3DLoader). - Self-managed fixed pin (tall section + absolute stage toggled absolute(top)→fixed→absolute(bottom) from ScrollTrigger pin state), mirroring the site's StrategySection, since the fixed header + ancestor overflow:hidden break CSS sticky / GSAP pin. - experience.css fully scoped under .dm-hiw-3d to avoid colliding with the site's Elementor CSS. - Global Lenis disabled on /how-it-works; module runs its own tuned Lenis; jump-to-section scroll math made spacer-relative. - Added zustand + maath; ESLint-ignored the ported module. Rendering fixes (root causes found by driving headless Chrome): - Bump three 0.171 → 0.184 to match @react-three/fiber@9.6 / drei@10.7 / postprocessing@6.39 (0.171 silently failed to render this GLB and caused the EffectComposer getContextAttributes().alpha crash). Other 3D routes verified. - EffectComposer: Bloom + Vignette only. SSAO needs a NormalPass (v3 dropped the old `disableNormalPass`), and that extra full-scene pass exhausted the WebGL context on this heavy scene. - Cap Canvas dpr to [1,1.5] to bound framebuffer memory on retina displays. - Defer Canvas mount via IntersectionObserver (mountScene), matching StrategySection, to ease StrictMode/first-render GPU pressure. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
35 lines
1.2 KiB
JavaScript
35 lines
1.2 KiB
JavaScript
export const sections = [
|
|
{
|
|
id: 'first-mile',
|
|
title: 'First Mile Warehouse',
|
|
subtitle: 'Consolidation & Prep',
|
|
description: 'Incoming shipments are securely loaded, checked, and queued for transfer in our high-capacity fulfillment centers.',
|
|
progressStart: 0.0,
|
|
progressEnd: 0.25,
|
|
},
|
|
{
|
|
id: 'mid-mile',
|
|
title: 'Mid Mile Hub',
|
|
subtitle: 'Sorting & Direct Dispatch',
|
|
description: 'Consolidated goods travel between primary distribution nodes. Heavy logistics lanes sorting thousands of parcels per hour.',
|
|
progressStart: 0.25,
|
|
progressEnd: 0.5,
|
|
},
|
|
{
|
|
id: 'last-mile',
|
|
title: 'Last Mile Delivery',
|
|
subtitle: 'Doorstep Courier Services',
|
|
description: 'Local delivery units take over, planning optimal paths to transport packages directly to customer doorsteps.',
|
|
progressStart: 0.5,
|
|
progressEnd: 0.75,
|
|
},
|
|
{
|
|
id: 'analytics',
|
|
title: 'Fulfillment Analytics',
|
|
subtitle: 'Real-Time Operational Insights',
|
|
description: 'A fully centralized dashboard monitoring transit times, fleet coordinates, carbon footprint, and delivery success rates.',
|
|
progressStart: 0.75,
|
|
progressEnd: 1.0,
|
|
},
|
|
]
|