hashtag fitness

As a frontend developer, implement the HomeHero section for the Home page. This is a 3D React Three Fiber scene featuring custom Dumbbell, KettleBell, and WeightPlate components. Dumbbell uses useFrame for sinusoidal z-rotation and y-position oscillation parameterized by a speed prop. KettleBell rotates on Y axis and bobs vertically. Each 3D object uses meshStandardMaterial with metalness/roughness for realistic rendering. The scene wraps components in Float from @react-three/drei for hover levitation and uses Environment for lighting. Motion elements from framer-motion overlay the Canvas for headline text, subheadline, and CTA buttons. MeshDistortMaterial is imported for distortion effects on ambient geometry.

As a frontend developer, implement the HomeOverview section for the Home page. Uses useInView hook with once:true and margin:'-100px' for scroll-triggered reveals. Left text column has an 'About Us' label with hov-label-line decoration, an h2 headline where 'Your Premier Fitness Destination in Gurugram' uses a motion.span that transitions color from #333333 to #2E8B57 on inView. Body paragraph spans also animate color from #777777 to #2E8B57. Stats row renders three stat objects (10+ Years, 5000+ Members, 50+ Trainers) as animated counter elements. Two parallax decorative layers (hov-deco-bg at -0.2px, hov-deco-mid at -0.4px) use CSS var(--scroll) for depth. Award icon from lucide-react is used as a decorative element.

As a frontend developer, implement the HomeServices section for the Home page. Renders a services array of 4 items (Personal Training, Group Classes, Nutrition Counseling, Recovery Services) each with lucide-react icons (Dumbbell, Users, Apple, Heart) and a numbered label (01–04). Uses framer-motion containerVariants with staggerChildren:0.12 and cardVariants with spring physics (stiffness:200, damping:22) including rotateX from 8 to 0 for a 3D card-flip reveal effect. Section header animates in with opacity/y on isInView. Two parallax decorative background layers at -0.25px and -0.45px scroll speeds using CSS var(--scroll). Cards lay out in an hs-grid responsive CSS grid.

As a frontend developer, implement the HomeFacilities section for the Home page. Manages a facilities array of 6 items (Cardio Zone, Strength Training, Free Weights, Stretching & Recovery, Functional Training, Indoor Cycling Studio) each with cssClass variants, lucide-react icons (Activity, Zap, Dumbbell, Wind, Flame, Bike), descriptions, and tags arrays. State: useState(currentIndex) for carousel position, useState(trackWidth) and useState(containerWidth) measured via refs with useRef(trackRef) and useRef(containerRef). useAnimation from framer-motion drives the horizontal slide animation. AnimatePresence handles enter/exit transitions. ChevronLeft/ChevronRight buttons decrement/increment the carousel index. Each facility tile expands to show description and tags on selection.

As a frontend developer, implement the HomeGymEnvironment section for the Home page. This is a 3D interactive gym floor built with @react-three/fiber Canvas and @react-three/drei (OrbitControls, RoundedBox, Text, Environment). EQUIPMENT array defines 6 stations (treadmill, bench, cable, yoga, spin, functional) each with position, scale, color, emissive, and metadata. FloorGrid component renders a planeGeometry floor with meshStandardMaterial. Each equipment piece is a clickable RoundedBox with emissive glow; clicking sets selected equipment state. AnimatePresence from framer-motion renders an info panel overlay (hge-info-panel) showing selected equipment name, category, description, and features list. useThree provides camera/renderer access. useState(selected) tracks the active equipment ID.

As a frontend developer, implement the HomeLocation section for the Home page. Uses useInView (once:true, margin:'-80px') for scroll-triggered reveals. Left info column renders transitInfo array (3 items: HUDA Metro, NH-48, parking) each with a lucide-react icon (Train, Car, Navigation), text, and detail subtext using custom stagger variants. operatingHours array (Mon-Fri, Saturday, Sunday) with Clock icon renders hours grid. An animated bouncing MapPin icon uses Framer Motion animate with scale pulsing [1,1.2,1] and rotate [0,5,-5,0] on repeat:Infinity. Right column embeds a Google Maps iframe for Sector 45, Gurugram. Two parallax decorative layers at -0.2px and -0.4px. An ArrowRight icon CTA links to directions.

As a frontend developer, implement the HomeContactCTA section for the Home page. Features a MagneticButton sub-component that uses useRef, useState({x,y}) offset, and useCallback for mousemove/mouseleave handlers. The magnetic effect calculates distance from button center and applies proportional x/y offset (max 12px) via framer-motion animate spring (stiffness:300, damping:20). Main form state: useState(formData) with name/email/message fields and useState(submitted) bool. handleSubmit sets submitted:true then resets after 3s timeout. contactInfo array (Phone, Mail, MapPin) and hours array render in info column. Section backgroundColor animates between white and rgba(46,139,87,0.04) in a looping 3s cycle when isInView (useInView once:false). AnimatePresence shows success message overlay on submit.

As a frontend developer, implement the HomeMembership section for the Home page. Renders three membership tiers (Basic ₹1499/mo, Pro ₹2999/mo featured, Elite ₹4999/mo) from the tiers array. Each tier has a name, tagline, price, icon (Dumbbell/Zap/Crown from iconMap), featured flag, benefits array, and CTA string. AnimatedPrice sub-component uses useMotionValue(0) and framer-motion animate() to roll numbers from 0 to price value over 1.2s with easeOut, displaying via toLocaleString('en-IN') for INR formatting. containerVariants uses staggerChildren:0.15. cardVariants animate opacity/y with cubic-bezier [0.25,0.46,0.45,0.94]. benefitContainerVariants staggers benefit items with x:-16 to 0 reveal. Pro tier card has featured styling with primary color border and badge.

As a frontend developer, implement the Footer section for the Home page. Renders a four-column grid: brand column with animated SVG hashtag logo, tagline, and social links (Facebook, Instagram, Twitter, LinkedIn from lucide-react) with whileHover y:-6 spring animation. quickLinks array (5 items) uses FooterLink sub-component with motion underline scaleX animation (rest:0, hover:1, transformOrigin left). hours array renders Mon-Fri/Saturday/Sunday operating times with Clock icon. Contact column shows MapPin (Sector 45 Gurugram), Phone (+91 123 456 7890), Mail icons. Two parallax decorative layers (ftr-deco-bg at -0.2px, ftr-deco-mid at -0.4px) via CSS var(--scroll). Bottom bar has copyright text. Note: if a shared Footer component already exists from another page, reuse it.

As a backend developer, implement the FastAPI endpoint for contact form submissions: POST /api/contact accepting name, email, and message fields. Validate inputs (email format, required fields, max lengths). Store submissions in MySQL database with timestamp. Return appropriate success/error responses. Note: HomeContactCTA frontend task (id: 72b95a41-dc3f-44dc-91c1-9c36b85c19e7) currently submits locally — this task provides the real backend persistence layer.

As a backend developer, implement FastAPI endpoints to serve static gym information: GET /api/gym/info returning name, address (SCO No 16 & 17, 2nd Floor, Huda Market, Islampur Colony, Sector 38, Gurugram, Haryana 122018), phone (+91 8287817875), operating hours, and overview text. GET /api/gym/services returning the 4 services array. GET /api/gym/facilities returning the 6 facilities. GET /api/gym/membership-tiers returning the 3 tiers with pricing in INR. These can be seeded as static config or served from database. Note: HomeServices (d4679de8), HomeFacilities (483f9166), HomeMembership (b09f3748), HomeLocation (8e23a7d7), and HomeOverview (4bd45aa6) frontend tasks currently use hardcoded data — this task provides a CMS-style backend source.

As a Tech Lead, verify the end-to-end integration between the HomeContactCTA frontend section and the contact form backend API. Ensure the form POST request reaches POST /api/contact, the success/error response is handled correctly in the MagneticButton submit flow, the AnimatePresence success message overlay triggers on API success, the 3-second reset timeout still works after real API call, and form validation errors from the backend are surfaced in the UI. Verify CORS is configured for local dev and production environments.