import React, { useState, useEffect } from 'react'; import { motion, AnimatePresence } from 'framer-motion'; import { Link } from 'react-router-dom'; import { createPageUrl } from '../../utils'; import { ArrowRight } from 'lucide-react'; const heroImages = [ ' https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=1920&q=80 ', ' https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=1920&q=80 ', ' https://images.unsplash.com/photo-1524504388940-b1c1722653e1?w=1920&q=80 ', ]; export default function HeroSection() { const [currentImage, setCurrentImage] = useState(0); useEffect(() => { const timer = setInterval(() => { setCurrentImage((prev) => (prev + 1) % heroImages.length); }, 5000); return () => clearInterval(timer); }, []); return ( <section className="relative h-screen overflow-hidden"> {/ Background Images /} <AnimatePresence mode="wait"> <motion.div key={currentImage} initial={{ opacity: 0, scale: 1.1 }} animate={{ opacity: 1, scale: 1 }} exit={{ opacity: 0 }} transition={{ duration: 1.5 }} className="absolute inset-0" > <div className="absolute inset-0 bg-cover bg-center" style={{ backgroundImage: url(${heroImages[currentImage]}) }} /> <div className="absolute inset-0 bg-black/30" /> </motion.div> </AnimatePresence> {/ Content /} <div className="relative z-10 h-full flex flex-col justify-end pb-24 lg:pb-32"> <div className="max-w-7xl mx-auto px-6 lg:px-12 w-full"> <motion.div initial={{ opacity: 0, y: 40 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 1, delay: 0.5 }} > <h1 className="text-white text-5xl lg:text-8xl font-light tracking-tight mb-6"> Discover <br /> <span className="font-semibold">Extraordinary</span> </h1> <p className="text-white/80 text-lg lg:text-xl max-w-xl mb-10 font-light"> Where exceptional talent meets visionary representation. We curate the faces that shape the future of fashion. </p> <Link to={createPageUrl('Models')} className="inline-flex items-center gap-3 bg-white text-[#0A0A0A] px-8 py-4 text-sm tracking-[0.15em] uppercase font-medium hover:bg-[#C9A961] hover:text-white transition-all duration-300 group" > View Models <ArrowRight size={18} className="group-hover:translate-x-1 transition-transform" /> </Link> </motion.div> </div> {/ Slide Indicators /} <div className="absolute bottom-12 right-6 lg:right-12 flex gap-3"> { heroImages.map ((_, index) => ( <button key={index} onClick={() => setCurrentImage(index)} className={`w-12 h-0.5 transition-all duration-300 ${ index === currentImage ? 'bg-white' : 'bg-white/30' }`} /> ))} </div> </div> </section> ); }