veda/www_veda_2025
12
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ok

Browse Source
This commit is contained in:
sasha-astiadi
2025-08-21 17:24:42 +02:00
parent 3ab87ff9dc
commit 26922db3e4
12 changed files with 72 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
src/components/Carousel.jsx
View File

@@ -1,7 +1,8 @@
"use client"; // <-- This line is crucial
import React, { useState, useEffect } from 'react';
import React, { useState, useEffect, useRef } from 'react';
import Image from 'next/image';
import clsx from 'clsx';
const cards = [
{
@@ -39,6 +40,7 @@ const cards = [
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 = () => {
@@ -69,49 +71,42 @@ const MultiCardCarousel = () => {
const displayCards = isMobile ? [cards[currentIndex]] : cards.slice(currentIndex, currentIndex + 3);
return (
<div className="flex items-center justify-center min-h-screen py-6 bg-transparent">
<div className="w-full max-w-7xl">
<div className="text-left mx-auto max-w-7xl px-6 lg:px-8">
<div className="flex items-center justify-center py-16 lg:py-24 bg-transparent px-6 lg:px-8">
<div className="w-full max-w-7xl ">
<div className="text-left mx-auto max-w-7xl ">
<h2 className="font-display text-2xl sm:text-3xl font-semibold tracking-[-0.05em] text-darkgr-700 lg:text-4xl">
Activities
</h2>
<p className="mt-4 max-w-5xl text-lg sm:text-2xl font-medium tracking-[-0.045em] lg:text-3xl text-darkgr pb-8 sm:pb-12">
<p className="mt-4 max-w-5xl text-xl/5 font-medium tracking-[-0.045em] lg:tracking-[-0.02em] leading-[1.3] lg:leading-[1.4] lg:text-2xl text-darkgr pb-6 sm:pb-8 lg:pb-12">
Explore a diverse range of activities designed to elevate your Mind, Body, and Soul, fostering a deeper connection and holistic well-being.
</p>
</div>
<div className="relative">
<div className={`flex ${isMobile ? 'w-full' : 'space-x-2 overflow-x-auto'}`}>
{displayCards.map((card, index) => (
<div
className={`flex-none ${isMobile ? 'w-full' : 'w-1/3'} relative overflow-hidden rounded-lg`}
key={index}
>
<img
className="h-full w-full object-cover"
src={card.image}
alt={card.title}
/>
<div className="absolute inset-x-0 bottom-0 bg-black bg-opacity-40 flex flex-col justify-end items-start text-left p-4">
<h3 className="text-lg font-semibold text-white mb-2">{card.title}</h3>
<p className="text-white">{card.description}</p>
</div>
<div
ref={scrollRef}
className={clsx([
'mt-8 flex gap-4 px-6 lg:px-8 mr-6 lg:mr-0',
'[scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
'snap-x snap-mandatory overflow-x-scroll overscroll-x-contain scroll-smooth',
'pb-8',
])}
>
{cards.map((card, index) => (
<div
key={index}
className="w-72 sm:w-80 lg:w-96 shrink-0 snap-start relative overflow-hidden rounded-lg h-80"
>
<img
className="h-full w-full object-cover"
src={card.image}
alt={card.title}
/>
<div className="absolute inset-x-0 bottom-0 bg-black bg-opacity-40 flex flex-col justify-end items-start text-left p-3 sm:p-4">
<h3 className="text-base sm:text-lg font-semibold text-white mb-1 sm:mb-2">{card.title}</h3>
<p className="text-sm sm:text-base text-white leading-tight">{card.description}</p>
</div>
))}
</div>
<div className="absolute inset-x-0 bottom-1/2 flex justify-between px-6 transform -translate-y-1/2">
<button
className="w-10 h-10 rounded-full text-white font-semibold bg-gold-600"
onClick={handlePrev}
>
&lt;
</button>
<button
className="w-10 h-10 rounded-full text-white font-semibold bg-gold-600"
onClick={handleNext}
>
&gt;
</button>
</div>
</div>
))}
<div className="w-8 shrink-0" />
</div>
</div>
</div>