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

ok

Browse Source
This commit is contained in:
sasha-astiadi
2025-08-22 19:06:30 +02:00
parent 69fe52e358
commit 7ab3b60462
2 changed files with 23 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/components/Carousel.jsx
View File

@@ -2,6 +2,7 @@
import React, { useState, useEffect, useRef } from 'react';
import clsx from 'clsx';
import { H2, P, PS, PXS, H3 , H4 } from '@/components/text';
const cards = [
{
@@ -70,42 +71,35 @@ const MultiCardCarousel = () => {
const displayCards = isMobile ? [cards[currentIndex]] : cards.slice(currentIndex, currentIndex + 3);
return (
<div className="bg-bg-sand flex items-center justify-center py-16 lg:py-24 px-6 lg:px-8">
<div className="bg-bg-sand flex items-center justify-center py-16 lg:py-24 px-6">
<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">
<H2 className="">
Activities
</h2>
<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>
</H2>
<P className="max-w-5xl mb-12">
Explore a diverse range of activities designed to elevate your Mind, Body, and Soul.
</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 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="w-72 lg:w-96 shrink-0 snap-start relative overflow-hidden h-120"
className="relative overflow-hidden bg-transparent"
>
<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 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 className="w-8 shrink-0" />
</div>
</div>
</div>

6
src/components/text.jsx
View File

@@ -18,7 +18,7 @@ export function H2({ className, children, ...props }) {
return (
<h2
className={clsx(
'mt-8 text-2xl font-medium tracking-tight text-bg-darkbrown sm:text-3xl',
'text-2xl font-medium tracking-tight text-bg-darkbrown sm:text-3xl',
className
)}
{...props}
@@ -32,7 +32,7 @@ export function H3({ className, children, ...props }) {
return (
<h3
className={clsx(
'mt-8 text-xl font-medium tracking-tight text-bg-darkbrown lg:text-2xl',
'text-xl font-medium tracking-tight text-bg-darkbrown lg:text-2xl',
className
)}
{...props}
@@ -60,7 +60,7 @@ export function P({ className, children, ...props }) {
return (
<p
className={clsx(
'mt-4 text-lg/8 text-gray-700 font-extralight leading-tight',
'text-lg/8 text-gray-700 font-extralight leading-tight',
className
)}
{...props}