110 lines
3.4 KiB
JavaScript
110 lines
3.4 KiB
JavaScript
"use client"; // <-- This line is crucial
|
|
|
|
import React, { useState, useEffect, useRef } from 'react';
|
|
import clsx from 'clsx';
|
|
import { H2, P, PS, PXS, H3 , H4 } from '@/components/text';
|
|
|
|
const cards = [
|
|
{
|
|
image: '/images/act1.png',
|
|
title: 'Yoga',
|
|
description: 'Step fully into your body. The perfect start to the morning.',
|
|
},
|
|
{
|
|
image: '/images/act2.png',
|
|
title: 'Nutrition',
|
|
description: 'Discover a variety of dietary options tailored to your health and wellness needs.',
|
|
},
|
|
{
|
|
image: '/images/act3.png',
|
|
title: 'Meditation',
|
|
description: 'Enhance your mental clarity and inner peace through guided meditation practices.',
|
|
},
|
|
{
|
|
image: '/images/act4.png',
|
|
title: 'Massage',
|
|
description: 'Profound relaxation through massage sessions, harmonizing with the high energies of Egypt.',
|
|
},
|
|
{
|
|
image: '/images/act5.png',
|
|
title: 'Workshops',
|
|
description: 'Healing sessions and workshops designed to enrich your well-being',
|
|
},
|
|
{
|
|
image: '/images/act6.png',
|
|
title: 'Excursions',
|
|
description: 'Experience unforgettable adventures with our curated Nile excursions.',
|
|
},
|
|
];
|
|
|
|
const MultiCardCarousel = () => {
|
|
const [currentIndex, setCurrentIndex] = useState(0);
|
|
const [isMobile, setIsMobile] = useState(false); // Start with false, will be updated in useEffect
|
|
const scrollRef = useRef(null);
|
|
|
|
useEffect(() => {
|
|
const handleResize = () => {
|
|
setIsMobile(window.innerWidth < 640);
|
|
};
|
|
|
|
window.addEventListener('resize', handleResize);
|
|
|
|
// Clean up the event listener on component unmount
|
|
return () => window.removeEventListener('resize', handleResize);
|
|
}, []);
|
|
|
|
const handleNext = () => {
|
|
setCurrentIndex((prevIndex) => {
|
|
const nextIndex = (prevIndex + (isMobile ? 1 : 3)) % cards.length;
|
|
return nextIndex;
|
|
});
|
|
};
|
|
|
|
const handlePrev = () => {
|
|
setCurrentIndex((prevIndex) => {
|
|
const prevIndexAdjusted = (prevIndex - (isMobile ? 1 : 3) + cards.length) % cards.length;
|
|
return prevIndexAdjusted;
|
|
});
|
|
};
|
|
|
|
// Determine the number of cards to display based on screen size
|
|
const displayCards = isMobile ? [cards[currentIndex]] : cards.slice(currentIndex, currentIndex + 3);
|
|
|
|
return (
|
|
<div className="bg-transparent flex items-center justify-center py-16 px-6">
|
|
<div className="w-full max-w-7xl ">
|
|
<div className="text-left mx-auto max-w-7xl ">
|
|
<H2 className="">
|
|
Activities
|
|
</H2>
|
|
<P className="max-w-5xl mb-8">
|
|
Explore a diverse range of activities designed to elevate your Mind, Body, and Soul.
|
|
</P>
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8">
|
|
{cards.slice(0, 3).map((card, index) => (
|
|
<div
|
|
key={index}
|
|
className="relative overflow-hidden bg-transparent"
|
|
>
|
|
<div className="aspect-[4/5] overflow-hidden">
|
|
<img
|
|
className="h-full w-full object-cover"
|
|
src={card.image}
|
|
alt={card.title}
|
|
/>
|
|
</div>
|
|
<div className="py-2">
|
|
<H4 className="mb-1">{card.title}</H4>
|
|
<PXS className="">{card.description}</PXS>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default MultiCardCarousel;
|