ok

src/components/Carousel.jsx

@@ -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>
+          </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">
+          <P className="max-w-5xl mb-12">
-            Explore a diverse range of activities designed to elevate your Mind, Body, and Soul, fostering a deeper connection and holistic well-being.
+            Explore a diverse range of activities designed to elevate your Mind, Body, and Soul.
-          </p>
+          </P>
         </div>
-        <div
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8">
-          ref={scrollRef}
+          {cards.slice(0, 3).map((card, index) => (
-          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 lg:w-96 shrink-0 snap-start relative overflow-hidden h-120"
+              className="relative overflow-hidden bg-transparent"
             >
-              <img
+              <div className="aspect-[4/5] overflow-hidden">
-                className="h-full w-full object-cover"
+                <img
-                src={card.image}
+                  className="h-full w-full object-cover"
-                alt={card.title}
+                  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>
+              </div>
-                <p className="text-sm sm:text-base text-white leading-tight">{card.description}</p>
+              <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>

src/components/text.jsx

@@ -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}