verdant-theme

As a frontend developer, implement the LandingExploreSection section for the Landing page. This section renders three team cards (Mercedes-AMG Petronas, Scuderia Ferrari, Oracle Red Bull Racing) via a MagneticCard component. Each MagneticCard uses useMotionValue, useSpring, and useTransform from framer-motion to create a magnetic hover effect (mx/my → sx/sy spring → tx/ty transform at 0.12 multiplier) tracked via onMouseMove/onMouseLeave. Cards animate in with whileInView (opacity 0→1, y 60→0) with staggered delays (index * 0.2) and whileHover scale/boxShadow using per-team accent colors (#C0C0C0, #FF0000, #00FFFF). Each card contains a custom inline SVG icon, team name, sub-label, description text, and a stats row (HP, KG, Titles). CSS spans 6132 chars for glassmorphism card styling and accent bar.

As a frontend developer, implement the Navbar section for the TeamShowcase page. This component (Navbar.jsx) manages three pieces of local state via useState: menuOpen (hamburger/mobile menu toggle), soundOn (Volume2/VolumeX icon toggle with aria-pressed), and specOpen (Gauge/X icon toggle for the specification panel). The nav renders: a logo anchor linking to /TeamShowcase with nv-logo-mark and nv-logo-text spans; a desktop ul.nv-links mapping over the three teams array (Mercedes, Ferrari, Red Bull) each with a colored nv-dot span; and an nv-actions div containing the sound toggle button, spec toggle button, and animated hamburger burger button. A mobile drawer div.nv-mobile conditionally applies 'is-open' class. Uses lucide-react icons (Volume2, VolumeX, Gauge, X). Note: this component may already exist from the Landing page — check for reuse before rebuilding. Depends on Landing page task e665dedc-e193-4b41-ae26-b9d506746fd4.

As a Frontend Developer, install and configure all required animation and 3D dependencies for the project: GSAP (with ScrollTrigger plugin), Three.js, @react-three/fiber, @react-three/drei, and framer-motion. Set up GSAP plugin registration (gsap.registerPlugin(ScrollTrigger)) in a shared entrypoint so all section components can import without re-registering. Configure Three.js GLTF loader utilities and shared loaders. Ensure 60 FPS performance baseline is achievable. This task is a prerequisite for all 3D car and animation section tasks.

As a Frontend Developer, implement global responsive layout utilities and accessibility compliance (WCAG 2.1) for the entire website. Create shared breakpoint utilities for desktop/tablet/mobile (768px, 1024px thresholds). Implement: skip-navigation links, aria-label attributes on all interactive 3D canvases, keyboard navigation for specification panel and navbar, focus-visible styles, reduced-motion media query overrides for GSAP/framer-motion animations, and color contrast validation against SRD theme tokens. This is a cross-cutting concern affecting all pages.

As a frontend developer, implement the LandingMercedes section for the Landing page. This section renders a React Three Fiber Canvas with OrbitControls and Html overlays. Six PARTS (nose, frontwing, chassis, engine, rearwing, floor) are each a Part component using useRef and useEffect with GSAP to animate position/rotation between resting and exploded states driven by an 'exploded' boolean toggle. useFrame drives emissiveIntensity pulse per active/hovered part. A SPECS array (5 entries with Gauge, Zap, Scale, Cpu, Trophy lucide icons) renders a sidebar with expandable detail rows. State hooks manage hovered part ID and selected spec. A Volume2/VolumeX lucide toggle controls ambient sound state. ChevronDown and Sparkles icons are used in UI chrome. Silver (#C0C0C0) accent color throughout. CSS spans 10139 chars for panel layout, explode toggle button, and spec sidebar.

As a frontend developer, implement the LandingFerrari section for the Landing page. This section renders a React Three Fiber Canvas with a Part component per COMPONENTS entry (engine, chassis, frontwing, rearwing, tyres). Each Part uses useRef + useEffect with GSAP (gsap.to position/rotation, power3.out ease, 0.9s duration) to animate between pos and explode vectors driven by an 'active' boolean. useFrame drives emissiveIntensity pulse with sin wave, boosted for selected (isSel) and active states. Float from @react-three/drei is used for floating UI elements. Html overlays display component name and desc. A SPECS array (5 entries) renders a data panel. State tracks selected component ID. Volume2/VolumeX and MousePointerClick lucide icons are used in UI. FERRARI_RED (#FF0000) accent throughout. CSS spans 8168 chars for Ferrari-themed dark panel, component label overlays.

As a frontend developer, implement the LandingRedBull section for the Landing page. This section renders a React Three Fiber Canvas with CarScene containing CarPart components for 8 COMPONENTS (chassis, front-wing, rear-wing, engine, fl-tyre, fr-tyre, rl-tyre, rr-tyre). CarPart uses useRef and a target ref with useFrame lerp (factor 0.12) for smooth position/rotation interpolation between assembled and exploded states — notably without GSAP on the mesh itself. CarScene uses gsap.to on blueLight and redLight refs for intensity animation keyed to exploded state. A LABELS array drives a color-coded legend overlay. A SPECS array (6 entries: top speed, HP, weight, power unit, constructors, 0-100) renders a stats grid. OrbitControls are included. CSS spans 8703 chars for Red Bull navy/red/yellow theming, explode toggle, and specs grid.

As a frontend developer, implement the TeamShowcaseHero section for the TeamShowcase page. This section features a SmokeCanvas sub-component that uses a canvas ref and a requestAnimationFrame particle system — particles are created with random positions in the lower 45-55% of canvas height, drift upward with vx/vy velocities, fade via life/decay properties, and are drawn as rgba(180,180,200,...) filled circles. A ResizeObserver handles DPR-aware canvas resizing. The parent TeamShowcaseHero component uses useRef for sectionRef, trackRef, contentRef, and glowRef. Framer Motion's useScroll/useTransform provide parallax layers for decorative track and glow elements. GSAP with ScrollTrigger is registered and used for scroll-driven content animations. Import from framer-motion (motion, useScroll, useTransform) and gsap/ScrollTrigger. This is an independent section; depends only on Navbar.

As a frontend developer, implement the MercedesTeamShowcase section for the TeamShowcase page. This section renders a @react-three/fiber Canvas with a procedural F1 car — ProceduralF1Car — built from 13 named part refs (wheelFLRef, wheelFRRef, wheelRLRef, wheelRRRef, engineRef, chassisRef, noseRef, rearWingRef, frontWingRef, haloRef, sidepodLRef, sidepodRRef, diffuserRef, airboxRef). useFrame drives an explosion animation using targetExploded/currentExploded/smoothProgress refs with delta*8 lerp speed; when exploded=true each part drifts to its offset vector and rotates independently. Emissive color lerps via THREE.Color.setHSL toward teal hue (0.52). The groupRef.current.rotation.y += delta*0.3 provides continuous auto-rotation. Uses @react-three/drei PerspectiveCamera and OrbitControls. State: exploded (bool), hoverProgress (number) managed by parent. This is an independent section; depends only on Navbar.

As a frontend developer, implement the FerrariTeamShowcase section for the TeamShowcase page. Features a @react-three/fiber Canvas with FerrariCar component using useMemo to create six THREE.MeshStandardMaterial instances: bodyMat (#CC0000, metalness 0.65), accentMat (#FF1A1A), darkMat (#1A1A1A), carbonMat (#222222), glassMat (transparent, opacity 0.6), wheelMat, and rimMat. Six explodeOffsets define per-part drift vectors for front wing, FL wheel, cockpit/halo, RR wheel, diffuser, and engine. A partLabels array of 6 items (nose/Front Wing, wheel-fl, cockpit, wheel-rr, diffuser, engine) drives interactive component label overlays with desc strings. A stats array (Horsepower 1000+, Top Speed 350 km/h, Weight 798 kg, Constructors Titles 16) renders team stat cards. Framer Motion is used for animated overlays, GSAP for timeline sequences. @react-three/drei Environment and OrbitControls are included. Suspense wraps the Canvas. State: exploded (bool), explosionProgress (number). Independent section; depends only on Navbar.

As a frontend developer, implement the RedBullTeamShowcase section for the TeamShowcase page. Features a @react-three/fiber Canvas with 14 COMPONENTS data entries (chassis, nose, front_wing, rear_wing, engine_cover, 4 wheels, 2 sidepods, halo, diffuser) each specifying id, label, color (#1a3a6e blues and #0f0f0f blacks), pos, explode offset vector, and rotAxis. AmbientLighting sub-component renders ambientLight, two directionalLights (one with castShadow), two pointLights (cyan #00ccff accent), and a spotLight. CarPart component uses useRef + useThree, interpolates position between pos and explode via explodeProgress (t param). OrbitControls and Environment from @react-three/drei. GSAP is imported for animation sequences. State: explodeProgress (0–1 float). Suspense wraps 3D content. Independent section; depends only on Navbar.

As a frontend developer, implement the SpecificationPanel section for the TeamShowcase page. This is a slide-in overlay panel component accepting isOpen (bool) and onClose (func) props. Internal state: activeTeam (string: 'ferrari'|'mercedes'|'redbull'). TEAM_COLORS maps each team to accent hex, glow rgba, dot class, and car model string (SF-24, W15, RB21). TEAM_SPECS maps each team to 5 stat entries each with label, value, unit, and lucide Icon (Gauge, Zap, Weight, Cog, Trophy). teamDisplayName is derived via useMemo. AnimatePresence from framer-motion wraps the panel; desktop uses slideVariants (x: 420 → 0) and mobile uses mobileSlideVariants (y: '100%' → 0) detected via window.innerWidth < 768. A sp-backdrop div with opacity 0→1 handles click-to-close. statItem motion variant adds whileHover x:10 translation. Uses lucide-react X icon for close button. This panel is triggered by the Navbar's specOpen state — coordinate prop threading. Independent section; depends only on Navbar.

As a frontend developer, implement the LoadingAnimation section for the TeamShowcase page. Features a @react-three/fiber Canvas with a WheelHub 3D component. createWheelTexture() generates a 256x256 Canvas 2D texture with 12 evenly spaced bolt holes at rInner=100 and rOuter=120 radii (drawn as filled arcs with stroke), a radial gradient hub circle, and concentric center circles — converted to THREE.CanvasTexture with ClampToEdgeWrapping. WheelHub uses four refs: wheelRef (rotation.z += 0.02, y sine wobble), boltsRef array (8 bolts at boltRadius=1.48, each rotating on x with y sine variation), rimDecoRef array (18 decorations at rimDecoRadius=1.72, rotating z + z-position sine), and pulseRef (scale pulsing via 1 + sin(t*2.5)*0.04). useFrame drives all animations. @react-three/drei PerspectiveCamera is used. GSAP drives entry/exit transitions. State: loading complete flag via useState+useEffect with a countdown. Independent section; depends only on Navbar.

As a frontend developer, implement the Footer section for the TeamShowcase page. Static functional component rendering a footer.ftr-root with a decorative ftr-speedline span and ftr-glow div. Layout has ftr-top containing: a ftr-brand-block with ftr-brand-mark span, 'Verdant' brand name, tagline paragraph, and ftr-socials row mapping over four socials entries (Twitter, Instagram, Youtube, Github from lucide-react with size=18, strokeWidth=1.8, target=_blank). ftr-nav-cols renders two columns — 'Explore' (3 links: Team Showcase, Exploded View, Spec Panel all pointing to /TeamShowcase) and 'Teams' (3 entries with ftr-teamdot spans using classes ftr-dot-merc, ftr-dot-fer, ftr-dot-rb). ftr-bottom contains a disclaimer paragraph noting fan/non-affiliation with F1/FIA. year computed via new Date().getFullYear(). Note: this component may already exist from the Landing page — check for reuse. Depends only on Navbar.

As a Frontend Developer, create a shared sound effects utility module that manages racing sound effects toggled by the Navbar's soundOn state. Implement a useSoundEffects hook or SoundManager class that: loads ambient engine/racing audio assets, exposes play/pause/toggle methods, handles browser autoplay policy gracefully, and cleans up on component unmount. This utility is used by the Navbar sound toggle (b3030887) and any team showcase section that triggers sound on car hover interactions as specified in SRD functional requirements.

As a Frontend Developer, implement performance optimizations to ensure the website maintains 60 FPS across all devices as required by SRD non-functional requirements. Tasks include: lazy loading Three.js canvases using React.lazy/Suspense, implementing LOD (Level of Detail) for 3D models, adding requestIdleCallback for non-critical animations, configuring Three.js renderer with antialias and pixel ratio caps, implementing intersection observer-based canvas pause when off-screen, and adding performance monitoring. Also ensure the website loads within 3 seconds on standard broadband. Note: depends on temp_gsap_threejs_setup.

As a Frontend Developer, source or create Three.js-compatible GLTF 3D model assets for all three F1 cars: Mercedes W15, Ferrari SF-24, and Red Bull RB21. Each model must support per-part separation for exploded-view animations (front wing, rear wing, nose cone, halo, sidepods, engine cover, wheels/tires, diffuser, floor, chassis). Optimize GLTF files for web delivery (Draco compression, max 5MB per model). Create a shared asset manifest mapping part names to GLTF node names for use by LandingMercedes, LandingFerrari, LandingRedBull, MercedesTeamShowcase, FerrariTeamShowcase, and RedBullTeamShowcase tasks. Note: depends on temp_gsap_threejs_setup.

As a frontend developer, implement the LandingParallaxShowcase section for the Landing page. This section uses GSAP ScrollTrigger (registered via gsap.registerPlugin) to drive a horizontal parallax on trackRef from xPercent -6 to +6 scrubbed against the section's scroll position (scrub: 0.5). A FEATURES array (4 entries: 60 FPS, EXPLODED VIEW, AMBIENT GLOW, CINEMATIC) with Gauge, Boxes, Lightbulb, Video lucide icons renders a 2×2 feature grid via gridRef. Each feature card uses framer-motion useInView (once: true, margin -80px) with DIR_OFFSET directional entrance animations (left/right/top/bottom x/y offsets of ±60). A PARTICLES array (8 entries with left/top/delay/dur values) renders decorative floating particles via CSS animation. CSS spans 4837 chars for grid layout, particle keyframes, and card styling.

As a Tech Lead, verify the end-to-end integration of all TeamShowcase page sections. Ensure Navbar, TeamShowcaseHero, MercedesTeamShowcase, FerrariTeamShowcase, RedBullTeamShowcase, LoadingAnimation, SpecificationPanel, and Footer are composed correctly in the TeamShowcase route. Validate: Navbar's specOpen state correctly opens/closes SpecificationPanel; soundOn state threads to sound utility; LoadingAnimation gates page render until assets load; all three team 3D canvases coexist without WebGL context conflicts; parallax and ambient effects perform at 60 FPS; mobile responsive layout is correct across all sections. Note: depends on all TeamShowcase section tasks and temp_sound_effects_utility.

As a frontend developer, implement the LandingCTA section for the Landing page. This section implements a magnetic CTA button using useMotionValue (mvX, mvY) and useSpring (stiffness 260, damping 18, mass 0.4) via springX/springY applied to a motion.div (btnWrapRef). Mouse offset is clamped to ±30px via handleMouseMove/handleMouseLeave callbacks. A scroll-triggered headline glow effect on headlineRef uses an IntersectionObserver (threshold 0.4) to fire GSAP textShadow animation (cyan glow, repeat 1, yoyo, then settle). A particle burst system on handleClick generates 12 radial particles per click using AnimatePresence and bursts state array, each particle animated outward via angle/distance math and cleaned up after 700ms. ArrowRight lucide icon is used in the CTA button. Decorative parallax layers use CSS custom property --scroll. CSS spans 4351 chars for full-section dark layout, burst particles, and button hover states.

As a Tech Lead, verify the end-to-end integration of all Landing page sections. Ensure LandingHero, LandingExploreSection, LandingMercedes, LandingFerrari, LandingRedBull, LandingParallaxShowcase, and LandingCTA sections are composed correctly in the Landing page route. Validate: scroll-triggered animations chain properly between sections, GSAP ScrollTrigger instances don't conflict, parallax layers render at correct z-indices, the 'Explore Cars' CTA navigates to TeamShowcase, and performance remains at 60 FPS across the full Landing page scroll. Note: this integration task depends on all Landing section tasks.

As a Tech Lead, verify the end-to-end navigation integration between the Landing page and TeamShowcase page. Validate: the 'Explore Cars' CTA button on LandingCTA correctly routes to /TeamShowcase; the TeamShowcase Navbar logo links back to /Landing (or /); browser back/forward navigation works correctly; the LoadingAnimation on TeamShowcase triggers on initial page load and not on return navigation; shared components (Navbar, Footer) maintain state consistency. Ensure the full user flow from Landing hero → CTA → TeamShowcase functions as specified in Core User Flows.