'use client'; import React, { useEffect, useRef, useState } from 'react'; import { motion, useScroll, useTransform, useSpring, useInView } from 'framer-motion'; import { Space } from 'antd'; import { PlayIcon, ArrowRightIcon, ChevronDownIcon } from 'lucide-react'; import { PrimaryButton, SecondaryButton } from '@/components/ui/Button'; import { Typography } from '@/components/ui/Typography'; import { useReducedMotion } from '@/hooks/useReducedMotion'; interface ParallaxLayerProps { children: React.ReactNode; speed: number; className?: string; } const ParallaxLayer: React.FC = ({ children, speed, className = '' }) => { const { scrollY } = useScroll(); const prefersReducedMotion = useReducedMotion(); const y = useTransform(scrollY, [0, 1000], [0, prefersReducedMotion ? 0 : speed * 100]); const smoothY = useSpring(y, { stiffness: 100, damping: 30 }); return ( {children} ); }; const FloatingElement: React.FC<{ delay: number; children: React.ReactNode }> = ({ delay, children }) => { const prefersReducedMotion = useReducedMotion(); return ( {children} ); }; const GeometricPattern: React.FC = () => { const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 }); const prefersReducedMotion = useReducedMotion(); const heroRef = useRef(null); useEffect(() => { const handleMouseMove = (e: MouseEvent) => { if (heroRef.current && !prefersReducedMotion) { const rect = heroRef.current.getBoundingClientRect(); setMousePosition({ x: (e.clientX - rect.left) / rect.width, y: (e.clientY - rect.top) / rect.height, }); } }; const heroElement = heroRef.current; if (heroElement) { heroElement.addEventListener('mousemove', handleMouseMove); return () => { heroElement.removeEventListener('mousemove', handleMouseMove); }; } }, [prefersReducedMotion]); return (

{/* Enhanced animated gradient background */} {/* Particle system - responsive dots */} {[...Array(16)].map((_, i) => ( ))} {/* Enhanced geometric shapes - hexagons */} {[...Array(8)].map((_, i) => ( ))} {/* Grid pattern overlay */} {/* Additional floating circles for depth */} {[...Array(4)].map((_, i) => ( ))}

); }; const AnimatedText: React.FC<{ children: React.ReactNode; delay?: number }> = ({ children, delay = 0 }) => { const ref = useRef(null); const isInView = useInView(ref, { once: true }); return ( {children} ); }; const GradientText: React.FC<{ children: React.ReactNode }> = ({ children }) => ( {children} ); const ScrollIndicator: React.FC = () => { const prefersReducedMotion = useReducedMotion(); return ( { if (e.key === 'Enter' || e.key === ' ') { window.scrollBy({ top: window.innerHeight, behavior: 'smooth' }); } }} onClick={() => { window.scrollBy({ top: window.innerHeight, behavior: 'smooth' }); }} className="cursor-pointer focus:outline-none focus:ring-2 focus:ring-chorus-blue focus:ring-opacity-50 rounded-lg p-3" > SCROLL ); }; const EnhancedHero: React.FC = () => { const containerRef = useRef(null); const { scrollY } = useScroll(); const opacity = useTransform(scrollY, [0, 500], [1, 0]); const scale = useTransform(scrollY, [0, 500], [1, 0.95]); const prefersReducedMotion = useReducedMotion(); // Staggered animation variants with reduced motion support const containerVariants = { hidden: {}, visible: { transition: { staggerChildren: prefersReducedMotion ? 0 : 0.2, delayChildren: prefersReducedMotion ? 0 : 0.3, }, }, }; const itemVariants = { hidden: { opacity: 0, y: prefersReducedMotion ? 0 : 60, scale: prefersReducedMotion ? 1 : 0.95, }, visible: { opacity: 1, y: 0, scale: 1, transition: { duration: prefersReducedMotion ? 0.01 : 0.8, ease: [0.21, 1.11, 0.81, 0.99], // Apple cubic-bezier }, }, }; const buttonVariants = { hidden: { opacity: 0, y: prefersReducedMotion ? 0 : 30 }, visible: { opacity: 1, y: 0, transition: { duration: prefersReducedMotion ? 0.01 : 0.6, ease: [0.21, 1.11, 0.81, 0.99], }, }, hover: { scale: prefersReducedMotion ? 1 : 1.05, transition: { duration: 0.2, ease: "easeOut", }, }, tap: { scale: prefersReducedMotion ? 1 : 0.98, transition: { duration: 0.1, }, }, }; return ( ); }; export default EnhancedHero;