'use client' import { useEffect, useState } from 'react' import Image from 'next/image' import { motion } from 'framer-motion' import { Sparkles, Play } from 'lucide-react' export default function Hero() { const [hasScrolled, setHasScrolled] = useState(false) useEffect(() => { const handleScroll = () => { setHasScrolled(window.scrollY > 100) } window.addEventListener('scroll', handleScroll) return () => window.removeEventListener('scroll', handleScroll) }, []) return (

{/* Background Effects */}

{/* Accent Glows */}

{/* Text Content */} Your First Match in Minutes

Grow Closer{' '} Together

Answer thoughtful questions with your partner. When you both agree, it's a match. Start meaningful conversations that strengthen your bond.

{/* Official App Store Badge */} GET IT ON Google Play See How It Works

{/* Phone Mockups */}

{/* Glow behind phones */}

{/* Back Phone - Packs */} {/* Back Phone - Swipe */} {/* Front Phone - Home */}

{/* Scroll Indicator - fades out on scroll */}

) } function PhoneMockup({ screenshot, alt, className = '', featured = false, }: { screenshot: string alt: string className?: string featured?: boolean }) { return (

{/* Phone Frame */}

{/* Screen */}

{alt}

{/* Dynamic Island / Notch */}

) }