Coin Flip Royal

As a frontend developer, implement the LandingHero section using @react-three/fiber Canvas with OrbitControls and Float from @react-three/drei. Renders 5 Building meshes (lobby, wallet, stats, leaderboard, private) each with useRef and useFrame for emissiveIntensity lerp (0→0.6 on hover, 0.08 factor) and position.y lift (0→0.15 on hover). Building onClick calls onSelect(data) to show feature panel; onPointerOver sets hoveredId and changes cursor to pointer. FloatingParticles uses BufferGeometry with 40 gold particles animating via sine wave in useFrame. CameraController uses gsap.to for smooth camera zoom on building select. Outside Canvas: Framer Motion headline ('Flip to Win') with staggered word animation, gold CTA button linking to /Lobby, 3-layer parallax divs (bg 0.25x, mid 0.45x), drag hint badge, and AnimatePresence feature panel overlay on building click. State: hoveredId, selectedBuilding, showPanel. CSS prefix: lh-.

As a frontend developer, implement the LandingLiveActivity section with two live-updating feeds: winners and active rooms. generateWinner(id) and generateRoom(id) produce random entries using FIRST_NAMES, ROOM_NAMES, ROOM_TYPES arrays with type-specific pot ranges (micro: 120-900, standard: 1500-8500, highstakes: 12000-75000). initWinners() and initRooms() seed 6 entries each with isNew: false. useEffect intervals add new entries every 4s (winners) and 6s (rooms), keeping max 8 items via slice. AnimatePresence with winnerCardVariants (opacity 0→1, x -24→0, scale 0.95→1) and roomCardVariants for enter/exit. Stats bar shows 4 live counters (Trophy wins, Users online, Zap flips/day, CircleDollarSign total paid) using lucide-react icons. Avatar colors cycle through AVATAR_COLORS array. CSS prefix: la-.

As a frontend developer, implement the LandingHowItWorks section with 4 StepCard components (Sign Up with OTP, Deposit via UPI, Place Your Bet, Instant Payout) each using useRef + useInView (once: true, amount: 0.5) from framer-motion. Each StepCard renders: motion.div number badge with badgeVariants (scale [0.5,1.15,1], rotate [0,360], 0.5s), lucide-react icon (UserPlus, Wallet, Coins, Zap) with iconVariants (rotate -90→0, 0.3s), title and description with stepChildVariants (opacity 0→1, y 24→0, 0.4s). Parent stepContainerVariants staggers children 0.1s. Section header uses separate useInView ref. Two parallax divs: bg (-0.25px/scroll) and mid (-0.45px/scroll). whileHover scale 1.05 spring on each card. CSS prefix: hiw-.

As a frontend developer, implement the LandingGameRooms section with 4 RoomCard components (Micro, Standard, High Stakes, Private Custom) using ROOMS config array with coinColor, coinAccent, basePot, basePlayers, potRange, playerRange per room. useAnimatedNumber hook uses requestAnimationFrame with cubic ease-out (1 - (1-progress)^3) over 1200ms to animate pot/player count changes. useEffect intervals update room pot and players every 3-5s within their respective ranges. CoinStackIcon renders custom SVG with 6 layered ellipses at decreasing opacity plus ₹ text symbol. Cards use useInView (once: true) for entrance animations; variant classes (micro/standard/highstakes/private) apply distinct border/glow colors. Private room card shows lock icon and 'Create Private Room' CTA. CSS prefix: gr-.

As a frontend developer, implement the LandingFeatures section with 6 feature cards (Real-Time Flip/Zap, Fair RNG/ShieldCheck, Instant Payouts/Wallet, Withdraw Anytime/ArrowDownToLine, Invite Friends/Users, Responsible Limits/Gauge) using lucide-react icons. Section-level useRef + useInView (once: true, margin: -80px). containerVariants staggers cards 0.08s; cardVariants animates opacity 0→1, x -30→0 (0.3s); accentBarVariants animates scaleY 0→1 (0.3s, 0.15s delay) for left accent bar; iconVariants rotates icon -90→0deg with opacity (0.3s, 0.05s delay). Each card is an anchor tag linking to its href. Two parallax bg/mid divs (-0.3px and -0.5px per scroll unit). Section header with 'Why Coin Flip Royal' label, 'Built for Fair Play' h2 with accent span, and subtitle. CSS prefix: lf-.

As a frontend developer, implement the LandingLeaderboard section with 3 tabs (Daily, Weekly, All-Time) using useState for activeTab. leaderboardData object contains arrays of 10 players each with rank, name, wins, earned (INR), and winRate. formatCurrency() formats values ≥100000 as '₹XL' (lakhs) else '₹X,XXX' (en-IN locale). getRankBadgeClass() returns CSS modifier classes for ranks 1/2/3/default (gold/silver/bronze/default styling). AnimatePresence wraps tab content with slide animation on tab switch. Tab buttons use motion.div for animated active underline indicator. Player rows show rank badge, name, wins count, formatted earnings, and win rate percentage. Sticky header row with column labels. CSS prefix: lb-.

As a frontend developer, implement the LandingResponsibleGambling section with 3 cards (Set Your Limits/Sliders, Know the Odds/PieChart, Get Help/HeartHandshake) using CARDS_DATA array. Section useRef + useInView (once: true, margin: -80px). containerVariants staggers children 0.1s. cardVariants: opacity 0→1, x -30→0. accentBarVariants: scaleY 0→1 for left color stripe per card. iconVariants: scale 0.8→1, rotate 0→360 for icon entrance. Third card (rg-help-card) has hasHelpline: true flag that renders a 24/7 helpline CTA with Phone icon and ArrowRight. Section header includes Shield icon badge with 'Play Responsibly' label, h2 title, and subtitle about fair play and player safety. Two parallax layers (-0.3px and -0.5px). CSS prefix: rg-.

As a frontend developer, implement the LandingTestimonials section with 5 testimonials (Arjun Mehta, Priya Sharma, Rohan Kapoor, Sneha Reddy, Vikram Joshi) each with name, role, quote, initials, and rating:5. useCardsToShow hook uses window.innerWidth breakpoints (≥1024→3, ≥768→2, else 1) with resize listener. totalPages = ceil(5 / cardsToShow). useState for activeIndex and direction; useRef for intervalRef and isPaused. Auto-advance every 5s via setInterval in startAutoAdvance (useCallback, dep: totalPages); pauses on hover via isPaused.current. StarRating component renders rating count of motion.span stars with staggered spring animation (delay + i*0.08, stiffness 500, damping 20). AnimatePresence with slide direction variants on page change. Prev/Next buttons call startAutoAdvance to reset timer. Dot pagination below carousel. CSS prefix: tm-.

As a frontend developer, implement the LandingCTA section with MagneticButton component that tracks mouse position via onMouseMove, computes offset from button center (distX * 0.3, distY * 0.35), and animates x/y with spring (stiffness 250, damping 18, mass 0.6), resetting on mouseleave. Renders as motion.a (if href) or motion.button. AnimatedCounter component uses framer-motion animate() (not motion) to count 0→target over duration with easeOut, updating via onUpdate callback; triggers once on isInView via hasAnimated ref. Section useRef + useInView (once: true, margin: -80px). Decorative elements: lc-gradient-surface, lc-shimmer div, two parallax layers (-0.25px and -0.45px), two lc-coin-deco divs. Displays a ₹ bonus amount counter (AnimatedCounter) and two MagneticButtons: primary 'Start Playing' linking to /Signup and secondary 'Watch How It Works'. CSS prefix: lc-.

As a frontend developer, implement the Footer section with three link columns: Platform (About, How It Works, Blog), Legal (Terms of Service, Privacy Policy, Responsible Gambling), Support (FAQ, Contact Us, Report a Bug). useInView (once: true, margin: -60px) on footer ref triggers animation. isMobile state uses window.innerWidth < 768 check with resize listener to switch between containerVariants (stagger 0.1s) and mobileContainerVariants (stagger 0s). columnVariants: opacity 0→1, x -20→0 (0.4s). Four social icons (Twitter, Instagram, Youtube, Linkedin from lucide-react) as motion.a with whileHover scale. Two parallax layers (-0.2px and -0.4px). Divider line above columns. Copyright line with dynamic year via new Date().getFullYear(). Responsible gambling disclaimer text at bottom. CSS prefix: ftr-.