Carousel.jsx

"use client"

import { imagesArray, imageVariants, positions } from '@/constants'
import React, { useState } from 'react'
import InnerCard from './InnerCard'
import { StepBack, StepForward } from 'lucide-react'

const Carousel = () => {
    const [positionIndexes, setPositionIndexes] = useState([0, 1, 2, 3, 4, 5, 6])

    const handleNext = (number = 1) => {
        setPositionIndexes((prevIndexes) => 
            prevIndexes.map((i) => (i + number + positions.length) % positions.length)
        )
    }

    const handleBack = (number = 1) => {
        setPositionIndexes((prevIndexes) => 
            prevIndexes.map((i) => (i - number + positions.length) % positions.length)
        )
    }

    const handleClick = (clickedIndex) => {
        const clickedPosition = positions[positionIndexes[clickedIndex]]

        const positionMap = {
            left3: -3,
            left2: -2,
            left1: -1,
            center: 0,
            right1: 1,
            right2: 2,
            right3: 3
        }

        const offset = positionMap[clickedPosition]

        if(offset > 0) {
            handleNext(offset)
        } else if (offset < 0) {
            handleBack(-offset)
        }
    }
  return (
    <div className='flex pt-20 items-center justify-center flex-col gap-2 md:gap-4 bg-black py-24 w-screen h-screen'>
        <div className='flex pb-64 flex-col gap-2 text-center'>
            <h3 className='text-5xl lg:text-8xl font-semibold text-transparent bg-clip-text bg-gradient-to-r from-blue-500 to-blue-600'>Our Features</h3>
            <p className='text-gray-300 text-[16px] md:text-[18px]'>We offer a variety of high-end luxury services</p>
        </div>

        {imagesArray.map((image, index) => (
            <InnerCard
                key={index}
                id={`tech-${index}`}
                src={image.src}
                name={image.name}
                variant={imageVariants[positions[positionIndexes[index]]]}
                imageLogo={image.logo}
                handleClick={() => handleClick(index)}
                details={image.details}
            />
        ))}

        <div className='flex flex-row gap-6 pb-12 z-20'>
            <button 
                className='text-white mt-48 bg-blue-500 cursor-pointer rounded-[12px] py-2 px-4'
                onClick={() => handleNext(1)}
            >
                <StepBack />
            </button>
            <button 
                className='text-white mt-48 bg-blue-500 cursor-pointer rounded-[12px] py-2 px-4'
                onClick={() => handleBack(1)}
            >
                <StepForward />
            </button>
        </div>
    </div>
  )
}

export default Carousel

constants**index.js

export const imagesArray = [
    {
      name: "Timeless Craftsmanship",
      src: "/watch1.jpeg",
      logo: "/assets/craftsmanship.svg",
      details: [
        {
          name: "Hand-assembled precision",
        },
        {
          name: "Swiss movement engineering",
        },
        {
          name: "100+ quality control tests",
        },
      ],
    },
    {
      name: "Premium Materials",
      src: "/watch2.jpeg",
      logo: "/assets/materials.svg",
      details: [
        {
          name: "Sapphire crystal glass",
        },
        {
          name: "316L stainless steel",
        },
        {
          name: "Genuine Italian leather",
        },
      ],
    },
    {
      name: "Design Excellence",
      src: "/watch18.jpeg",
      logo: "/assets/design.svg",
      details: [
        {
          name: "Award-winning aesthetics",
        },
        {
          name: "Minimalist & bold variants",
        },
        {
          name: "Timeless design language",
        },
      ],
    },
    {
      name: "Advanced Functionality",
      src: "/watch19.jpeg",
      logo: "/assets/features.svg",
      details: [
        {
          name: "Water resistance up to 10ATM",
        },
        {
          name: "Luminous hands & markers",
        },
        {
          name: "Chronograph and date features",
        },
      ],
    },
    {
      name: "Limited Editions",
      src: "/watch5.jpeg",
      logo: "/assets/limited.svg",
      details: [
        {
          name: "Individually numbered pieces",
        },
        {
          name: "Collector’s certification",
        },
        {
          name: "Exclusive launch events",
        },
      ],
    },
    {
      name: "Global Warranty",
      src: "/watch16.jpeg",
      logo: "/assets/warranty.svg",
      details: [
        {
          name: "2-year international coverage",
        },
        {
          name: "Hassle-free repair & support",
        },
        {
          name: "Authorized service centers",
        },
      ],
    },
    {
      name: "Elegant Packaging",
      src: "/watch20.jpeg",
      logo: "/assets/packaging.svg",
      details: [
        {
          name: "Luxury wooden presentation box",
        },
        {
          name: "Certificate of authenticity",
        },
        {
          name: "Premium microfiber cloth included",
        },
      ],
    },
  ];
  
  
    export const imageVariants = {
      center: { x: "0%", scale: 1, zIndex: 7 },
      left1: { x: "-30%", scale: 0.7, zIndex: 5 },
      left2: { x: "-60%", scale: 0.5, zIndex: 4 },
      left3: { x: "-80%", scale: 0.3, zIndex: 3 },
      left4: { x: "-95%", scale: 0.2, zIndex: 2 },
      right4: { x: "95%", scale: 0.2, zIndex: 1 },
      right3: { x: "80%", scale: 0.3, zIndex: 3 },
      right2: { x: "60%", scale: 0.5, zIndex: 4 },
      right1: { x: "30%", scale: 0.7, zIndex: 5 },
    };
  
  
  export const positions = [
      "center",
      "left1",
      "left2",
      "left3",
      "right3",
      "right2",
      "right1",
    ];
    
  

InnerCard.jsx

import gsap from 'gsap'
import React, { useLayoutEffect, useRef } from 'react'

const InnerCard = ({id, src, name, variant, handleClick, details}) => {
    const cardRef = useRef()

    useLayoutEffect(() => {
        if(cardRef.current && variant) {
            gsap.to(cardRef.current, {
                x: variant.x,
                scale: variant.scale,
                zIndex: variant.zIndex,
                duration: 0.5,
                ease: "power3.out"
            })
        }
    }, [variant])
  return (
    <div 
    ref={cardRef}
    id={id}
    onClick={handleClick}
    style={{ 
        width: "42%",
        backgroundImage: `url(${src})`
    }}
    className='rounded-[40px] mt-20 md:mt-10 lg:mt-0 absolute cursor-pointer w-[200px] h-[420px] lg:h-[340px] overflow-hidden bg-gray-800 bg-cover bg-center p-2 flex-center flex-col md:flex-row gap-0 md:gap-4 lg:gap-12'
    >
   
        <div className='absolute inset-0 w-full h-full bg-black opacity-20 hover:opacity-40 rounded-xl z-10' />

        <div className='relative z-20 flex flex-col pt-6 pl-4 gap-3 md:gap-5'>
            <h3 className='text-[24px] md:text-6xl font-semibold text-transparent bg-clip-text bg-gradient-to-r from-blue-500 via-cyan-500 to-blue-500 text-center md:text-left'>{name}</h3>

            <div className='flex flex-col gap-3 text-gray-200 text-[16px] md:text-xl'>
                {details.map((detail, index) => (
                    <div key={index} className='flex flex-row gap-1'>
                        <p className='text-white text-xl'>{detail.name}</p>
                    </div>
                ))}
            </div>
        </div>
    </div>
  )
}

export default InnerCard