Your business, at your fingertips. Anytime. Anywhere.
Sign in
Contact Us
Home
About Us
Services
Solutions
Industries
Partners
Contact us
Our Partners
We are in good company.
Previous
Next
"use client"; import React, { useState, useEffect, useRef } from "react"; import { motion, PanInfo } from "framer-motion"; const SparklesIcon = ({ className }) =>
; const ChevronLeftIcon = ({ className }) =>
; const ChevronRightIcon = ({ className }) =>
; const Badge = ({ children, className }) =>
{children}
; const cardData = [{ id: 1, imageUrl: "https://i.pinimg.com/736x/d6/8a/12/d68a121e960094f99ad8acd37505fb7d.jpg", title: "Crimson Forest" }, { id: 2, imageUrl: "https://i.pinimg.com/736x/21/16/f7/2116f71f9d51d875e44d809f074ff079.jpg", title: "Misty Mountains" }, { id: 3, imageUrl: "https://i.pinimg.com/1200x/fe/c2/0d/fec20d2958059b8463bffb138d4eaac6.jpg", title: "Floating Islands" }, { id: 4, imageUrl: "https://i.pinimg.com/736x/84/dc/62/84dc62de850a34a9d420c97f3a2d58f4.jpg", title: "Crystal Cave" }, { id: 5, imageUrl: "https://i.pinimg.com/1200x/be/c3/7e/bec37e2c43e703f922f887db2578ce2e.jpg", title: "Sunset Peaks" }, { id: 6, imageUrl: "https://i.pinimg.com/736x/47/dd/47/47dd47b0d66c2fa641e03e370bcb5433.jpg", title: "Night Sky" }, { id: 7, imageUrl: "https://i.pinimg.com/736x/05/01/bc/0501bcd327d9df915e83154bbf9456e3.jpg", title: "Ancient Ruins" }, { id: 8, imageUrl: "https://i.pinimg.com/736x/c1/46/be/c146bebffca026d2c4fa76cc85aac917.jpg", title: "Magical Tree" }, { id: 9, imageUrl: "https://i.pinimg.com/736x/91/7a/51/917a51df0d444def3cade8d626305a67.jpg", title: "Celestial Waters" }]; export default function Carousel() { const [activeIndex, setActiveIndex] = useState(Math.floor(cardData.length / 2)); const [isPaused, setIsPaused] = useState(false); const autoplayIntervalRef = useRef(null); const autoplayDelay = 3000; const goToNext = () => { setActiveIndex(prev => (prev + 1) % cardData.length); }; useEffect(() => { if (!isPaused) { autoplayIntervalRef.current = setInterval(goToNext, autoplayDelay); } return () => { if (autoplayIntervalRef.current) { clearInterval(autoplayIntervalRef.current); } }; }, [isPaused, activeIndex]); const changeSlide = newIndex => { const newSafeIndex = (newIndex + cardData.length) % cardData.length; setActiveIndex(newSafeIndex); if (autoplayIntervalRef.current) { clearInterval(autoplayIntervalRef.current); } if (!isPaused) { autoplayIntervalRef.current = setInterval(goToNext, autoplayDelay); } }; const onDragEnd = (event, info) => { const dragThreshold = 75; const dragOffset = info.offset.x; if (dragOffset > dragThreshold) { changeSlide(activeIndex - 1); } else if (dragOffset < -dragThreshold) { changeSlide(activeIndex + 1); } }; return
setIsPaused(true)} onMouseLeave={() => setIsPaused(false)}>
Enhanced Carousel
{cardData.map((card, index) =>
)}
changeSlide(activeIndex - 1)} className="p-2 rounded-full bg-gray-100 dark:bg-white/5 hover:bg-gray-200 dark:hover:bg-white/10 border border-gray-300 dark:border-white/10 text-gray-700 dark:text-white transition-colors focus:outline-none focus:ring-2 focus:ring-pink-500">
{cardData.map((_, index) =>
changeSlide(index)} className={`h-2 rounded-full transition-all duration-300 focus:outline-none ${activeIndex === index ? "w-6 bg-pink-400" : "w-2 bg-gray-300 dark:bg-neutral-600 hover:bg-gray-400 dark:hover:bg-neutral-500"}`} aria-label={`Go to slide ${index + 1}`} />)}
changeSlide(activeIndex + 1)} className="p-2 rounded-full bg-gray-100 dark:bg-white/5 hover:bg-gray-200 dark:hover:bg-white/10 border border-gray-300 dark:border-white/10 text-gray-700 dark:text-white transition-colors focus:outline-none focus:ring-2 focus:ring-pink-500">
; } function Card({ card, index, activeIndex, totalCards }) { let offset = index - activeIndex; if (offset > totalCards / 2) { offset -= totalCards; } else if (offset < -totalCards / 2) { offset += totalCards; } const isVisible = Math.abs(offset) <= 1; const animate = { x: `${offset * 50}%`, scale: offset === 0 ? 1 : 0.8, zIndex: totalCards - Math.abs(offset), opacity: isVisible ? 1 : 0, transition: { type: "spring", stiffness: 260, damping: 30 } }; return
{ const target = e.target; target.onerror = null; target.src = "https://placehold.co/400x600/1e1e1e/ffffff?text=Image+Missing"; }} />
{card.title}
; }