| import { useState, useEffect } from "react" |
| import { motion, AnimatePresence } from "framer-motion" |
| import { ChevronLeft, ChevronRight, Play, Sparkles, Star, Zap } from "lucide-react" |
| import "./Carousel.css" |
|
|
| function Carousel() { |
| const [currentSlide, setCurrentSlide] = useState(0) |
| const [isAutoPlaying, setIsAutoPlaying] = useState(true) |
|
|
| const slides = [ |
| { |
| id: 1, |
| image: "/slider_image/banner1.jpg", |
| title: "Premium Collections", |
| subtitle: "Experience Premium Quality", |
| description: "Discover our exclusive range of Premium products crafted for the discerning customer", |
| cta: "Explore Collection", |
| gradient: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)", |
| accent: "#667eea", |
| }, |
| { |
| id: 2, |
| image: "/slider_image/banner2.webp", |
| title: "Tech Innovation Hub", |
| subtitle: "Future is Here", |
| description: "Cutting-edge technology meets elegant design in our latest electronics collection", |
| cta: "Shop Tech", |
| gradient: "linear-gradient(135deg, #f093fb 0%, #f5576c 100%)", |
| accent: "#f093fb", |
| }, |
| { |
| id: 3, |
| image: "/slider_image/banner3.webp", |
| title: "Fashion Forward", |
| subtitle: "Style Redefined", |
| description: "Elevate your wardrobe with our curated selection of contemporary fashion", |
| cta: "Browse Fashion", |
| gradient: "linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)", |
| accent: "#4facfe", |
| }, |
| { |
| id: 4, |
| image: "/slider_image/banner4.webp", |
| title: "Home & Living", |
| subtitle: "Premium Lifestyle", |
| description: "Transform your space with our Premium home and lifestyle products", |
| cta: "Discover Home", |
| gradient: "linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)", |
| accent: "#43e97b", |
| }, |
| { |
| id: 5, |
| image: "/slider_image/banner5.webp", |
| title: "Gaming Universe", |
| subtitle: "Level Up Your Game", |
| description: "Professional gaming gear and accessories for the ultimate gaming experience", |
| cta: "Game On", |
| gradient: "linear-gradient(135deg, #fa709a 0%, #fee140 100%)", |
| accent: "#fa709a", |
| }, |
| ] |
|
|
| useEffect(() => { |
| if (!isAutoPlaying) return |
|
|
| const interval = setInterval(() => { |
| setCurrentSlide((prev) => (prev + 1) % slides.length) |
| }, 10000) |
|
|
| return () => clearInterval(interval) |
| }, [isAutoPlaying, slides.length]) |
|
|
| const nextSlide = () => { |
| setCurrentSlide((prev) => (prev + 1) % slides.length) |
| setIsAutoPlaying(false) |
| setTimeout(() => setIsAutoPlaying(true), 10000) |
| } |
|
|
| const prevSlide = () => { |
| setCurrentSlide((prev) => (prev - 1 + slides.length) % slides.length) |
| setIsAutoPlaying(false) |
| setTimeout(() => setIsAutoPlaying(true), 10000) |
| } |
|
|
| const goToSlide = (index) => { |
| setCurrentSlide(index) |
| setIsAutoPlaying(false) |
| setTimeout(() => setIsAutoPlaying(true), 10000) |
| } |
|
|
| return ( |
| <div className="Premium-carousel-container"> |
| <div className="carousel-wrapper"> |
| {} |
| <div className="carousel-particles"> |
| {[...Array(50)].map((_, i) => ( |
| <motion.div |
| key={i} |
| className="carousel-particle" |
| style={{ |
| left: `${Math.random() * 100}%`, |
| top: `${Math.random() * 100}%`, |
| animationDelay: `${Math.random() * 5}s`, |
| animationDuration: `${3 + Math.random() * 4}s`, |
| }} |
| animate={{ |
| y: [-20, 20, -20], |
| opacity: [0, 1, 0], |
| scale: [0.5, 1, 0.5], |
| }} |
| transition={{ |
| duration: 4, |
| repeat: Number.POSITIVE_INFINITY, |
| delay: Math.random() * 2, |
| }} |
| /> |
| ))} |
| </div> |
| |
| {} |
| <div className="carousel-main"> |
| <AnimatePresence mode="wait"> |
| <motion.div |
| key={currentSlide} |
| className="carousel-slide" |
| initial={{ opacity: 0, scale: 1.1 }} |
| animate={{ opacity: 1, scale: 1 }} |
| exit={{ opacity: 0, scale: 0.9 }} |
| transition={{ duration: 0.8, ease: "easeInOut" }} |
| > |
| {} |
| <div className="slide-background"> |
| {} |
| <div className="slide-overlay" style={{ background: slides[currentSlide].gradient }} /> |
| <div className="slide-cosmic-overlay" /> |
| </div> |
| |
| {} |
| <div className="slide-content"> |
| <motion.div |
| className="content-wrapper" |
| initial={{ y: 100, opacity: 0 }} |
| animate={{ y: 0, opacity: 1 }} |
| transition={{ duration: 0.8, delay: 0.2 }} |
| > |
| {} |
| <div className="floating-icons"> |
| <motion.div |
| className="floating-icon" |
| animate={{ |
| y: [-10, 10, -10], |
| rotate: [0, 360], |
| scale: [1, 1.2, 1], |
| }} |
| transition={{ duration: 4, repeat: Number.POSITIVE_INFINITY }} |
| > |
| <Sparkles size={24} /> |
| </motion.div> |
| <motion.div |
| className="floating-icon" |
| animate={{ |
| y: [10, -10, 10], |
| rotate: [360, 0], |
| scale: [1.2, 1, 1.2], |
| }} |
| transition={{ duration: 3, repeat: Number.POSITIVE_INFINITY, delay: 1 }} |
| > |
| <Star size={20} /> |
| </motion.div> |
| <motion.div |
| className="floating-icon" |
| animate={{ |
| y: [-5, 15, -5], |
| rotate: [0, 180, 360], |
| scale: [1, 1.1, 1], |
| }} |
| transition={{ duration: 10, repeat: Number.POSITIVE_INFINITY, delay: 2 }} |
| > |
| <Zap size={22} /> |
| </motion.div> |
| </div> |
| |
| {} |
| <motion.div |
| className="text-content" |
| initial={{ x: -50, opacity: 0 }} |
| animate={{ x: 0, opacity: 1 }} |
| transition={{ duration: 0.8, delay: 0.4 }} |
| > |
| <motion.span |
| className="slide-subtitle" |
| initial={{ y: 20, opacity: 0 }} |
| animate={{ y: 0, opacity: 1 }} |
| transition={{ duration: 0.6, delay: 0.6 }} |
| > |
| {slides[currentSlide].subtitle} |
| </motion.span> |
| |
| <motion.h1 |
| className="slide-title" |
| initial={{ y: 30, opacity: 0 }} |
| animate={{ y: 0, opacity: 1 }} |
| transition={{ duration: 0.8, delay: 0.8 }} |
| > |
| {slides[currentSlide].title} |
| </motion.h1> |
| |
| <motion.p |
| className="slide-description" |
| initial={{ y: 20, opacity: 0 }} |
| animate={{ y: 0, opacity: 1 }} |
| transition={{ duration: 0.6, delay: 1 }} |
| > |
| {slides[currentSlide].description} |
| </motion.p> |
| |
| <motion.div |
| className="slide-actions" |
| initial={{ y: 30, opacity: 0 }} |
| animate={{ y: 0, opacity: 1 }} |
| transition={{ duration: 0.8, delay: 1.2 }} |
| > |
| <motion.button |
| className="Premium-cta-btn primary" |
| whileHover={{ scale: 1.05, y: -3 }} |
| whileTap={{ scale: 0.95 }} |
| style={{ "--accent-color": slides[currentSlide].accent }} |
| > |
| <span>{slides[currentSlide].cta}</span> |
| <div className="btn-glow" /> |
| <div className="btn-particles"> |
| {[...Array(6)].map((_, i) => ( |
| <div key={i} className={`btn-particle btn-particle-${i + 1}`} /> |
| ))} |
| </div> |
| </motion.button> |
| |
| <motion.button |
| className="Premium-cta-btn secondary" |
| whileHover={{ scale: 1.05, y: -3 }} |
| whileTap={{ scale: 0.95 }} |
| > |
| <Play size={18} /> |
| <span>Watch Demo</span> |
| <div className="btn-shimmer" /> |
| </motion.button> |
| </motion.div> |
| </motion.div> |
| |
| {} |
| <motion.div |
| className="stats-cards" |
| initial={{ y: 50, opacity: 0 }} |
| animate={{ y: 0, opacity: 1 }} |
| transition={{ duration: 0.8, delay: 1.4 }} |
| > |
| {[ |
| { label: "Products", value: "10K+" }, |
| { label: "Customers", value: "50K+" }, |
| { label: "Reviews", value: "4.9★" }, |
| ].map((stat, index) => ( |
| <motion.div |
| key={stat.label} |
| className="stat-card" |
| whileHover={{ |
| rotateY: 15, |
| rotateX: 5, |
| scale: 1.05, |
| z: 50, |
| }} |
| transition={{ duration: 0.3 }} |
| style={{ |
| transformStyle: "preserve-3d", |
| perspective: "1000px", |
| }} |
| > |
| <div className="stat-value">{stat.value}</div> |
| <div className="stat-label">{stat.label}</div> |
| <div className="stat-glow" /> |
| </motion.div> |
| ))} |
| </motion.div> |
| </motion.div> |
| </div> |
| </motion.div> |
| </AnimatePresence> |
| |
| {} |
| <motion.button |
| className="carousel-nav prev" |
| onClick={prevSlide} |
| whileHover={{ scale: 1.1, x: -5 }} |
| whileTap={{ scale: 0.9 }} |
| initial={{ x: -100, opacity: 0 }} |
| animate={{ x: 0, opacity: 1 }} |
| transition={{ duration: 0.8, delay: 1.6 }} |
| > |
| <ChevronLeft size={24} /> |
| <div className="nav-glow" /> |
| </motion.button> |
| |
| <motion.button |
| className="carousel-nav next" |
| onClick={nextSlide} |
| whileHover={{ scale: 1.1, x: 5 }} |
| whileTap={{ scale: 0.9 }} |
| initial={{ x: 100, opacity: 0 }} |
| animate={{ x: 0, opacity: 1 }} |
| transition={{ duration: 0.8, delay: 1.6 }} |
| > |
| <ChevronRight size={24} /> |
| <div className="nav-glow" /> |
| </motion.button> |
| |
| {} |
| <motion.div |
| className="slide-indicators" |
| initial={{ y: 50, opacity: 0 }} |
| animate={{ y: 0, opacity: 1 }} |
| transition={{ duration: 0.8, delay: 1.8 }} |
| > |
| {slides.map((_, index) => ( |
| <motion.button |
| key={index} |
| className={`indicator ${index === currentSlide ? "active" : ""}`} |
| onClick={() => goToSlide(index)} |
| whileHover={{ scale: 1.2 }} |
| whileTap={{ scale: 0.8 }} |
| style={{ "--accent-color": slides[index].accent }} |
| > |
| <div className="indicator-progress"> |
| {index === currentSlide && ( |
| <motion.div |
| className="progress-fill" |
| initial={{ width: 0 }} |
| animate={{ width: "100%" }} |
| transition={{ duration: 10, ease: "linear" }} |
| key={currentSlide} |
| /> |
| )} |
| </div> |
| </motion.button> |
| ))} |
| </motion.div> |
| |
| {} |
| <div className="progress-ring"> |
| <svg width="60" height="60"> |
| <circle cx="30" cy="30" r="25" fill="none" stroke="rgba(255,255,255,0.1)" strokeWidth="2" /> |
| <motion.circle |
| cx="30" |
| cy="30" |
| r="25" |
| fill="none" |
| stroke="url(#progressGradient)" |
| strokeWidth="2" |
| strokeLinecap="round" |
| strokeDasharray={157} |
| strokeDashoffset={157} |
| animate={{ strokeDashoffset: 157 - (157 * (currentSlide + 1)) / slides.length }} |
| transition={{ duration: 0.5 }} |
| /> |
| <defs> |
| <linearGradient id="progressGradient" x1="0%" y1="0%" x2="100%" y2="100%"> |
| <stop offset="0%" stopColor="#667eea" /> |
| <stop offset="100%" stopColor="#f6d365" /> |
| </linearGradient> |
| </defs> |
| </svg> |
| <div className="progress-text"> |
| {currentSlide + 1}/{slides.length} |
| </div> |
| </div> |
| </div> |
| |
| {} |
| <div className="cosmic-effects"> |
| <div className="cosmic-orb orb-1" /> |
| <div className="cosmic-orb orb-2" /> |
| <div className="cosmic-orb orb-3" /> |
| <div className="cosmic-nebula nebula-1" /> |
| <div className="cosmic-nebula nebula-2" /> |
| </div> |
| </div> |
| </div> |
| ) |
| } |
|
|
| export default Carousel |
