From 26922db3e49774ba545f00c4127431a266e9932b Mon Sep 17 00:00:00 2001
From: sasha-astiadi <sasha@incubaid.com>
Date: Thu, 21 Aug 2025 17:24:42 +0200
Subject: [PATCH] ok

---
 src/components/Activities.jsx   |  2 +-
 src/components/Boat.jsx         | 10 ++---
 src/components/Button.jsx       |  4 +-
 src/components/CNNVIDEO.jsx     | 14 ++-----
 src/components/Carousel.jsx     | 69 +++++++++++++++------------------
 src/components/Experiences.jsx  |  8 ++--
 src/components/Footer.jsx       |  2 +-
 src/components/Hero.jsx         | 12 +++---
 src/components/NewFeatures.jsx  | 14 +++----
 src/components/NewFeatures2.jsx |  2 +-
 src/components/Route.jsx        | 10 ++---
 src/components/Testimonials.jsx |  8 ++--
 12 files changed, 72 insertions(+), 83 deletions(-)

diff --git a/src/components/Activities.jsx b/src/components/Activities.jsx
index 541124d..581b52b 100644
--- a/src/components/Activities.jsx
+++ b/src/components/Activities.jsx
@@ -34,7 +34,7 @@ const posts = [
       <div className="bg-creme-200 py-12 lg:py-12">
         <div className="mx-auto max-w-7xl px-6 lg:px-8">
           <div className="mx-auto max-w-2xl text-center">
-            <p className="mt-2 text-lg leading-8 text-gray-600 italic font-semibold">
+            <p className="mt-2 text-xl/5 leading-8 text-gray-600 italic font-semibold">
             Mind, Body, and Soul: For a Deeper Connection.
             </p>
           </div>
diff --git a/src/components/Boat.jsx b/src/components/Boat.jsx
index ee43396..f06c497 100644
--- a/src/components/Boat.jsx
+++ b/src/components/Boat.jsx
@@ -100,7 +100,7 @@ function TestimonialCard({
       ref={ref}
       style={{ opacity }}
       {...props}
-      className="w-72 shrink-0 snap-start scroll-ml-(--scroll-padding) bg-[#fffefa] rounded-3xl shadow-lg overflow-hidden lg:w-96"
+      className="w-72 shrink-0 snap-start scroll-ml-(--scroll-padding) bg-[#fffefa] rounded-3xl shadow-lg overflow-hidden sm:w-80 lg:w-96"
     >
       {/* Image Section */}
       <div className="relative aspect-square overflow-hidden">
@@ -154,13 +154,13 @@ export function Boat() {
   }
 
   return (
-    <div className="pt-24 pb-12">
+    <div className="pt-16 lg:pt-24 pb-12">
       <Container>
         <div ref={setReferenceWindowRef}>
           <h2 className="font-display mt-2 text-3xl font-semibold tracking-[-0.05em] text-darkgr-700 lg:text-4xl">
             Dahabiyas
           </h2>
-          <p className="mt-4 max-w-5xl text-2xl font-medium tracking-[-0.045em] lg:text-3xl text-darkgr">
+          <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">
             Discover peaceful platforms where every detail ensures a truly memorable stay. Our fleet of traditional dahabiyas combines authentic Nile heritage with modern comfort, offering intimate sailing experiences that connect you with Egypt's timeless river culture. 
           </p>
         </div>
@@ -168,9 +168,9 @@ export function Boat() {
       <div
         ref={scrollRef}
         className={clsx([
-          'mt-16 flex gap-8 pl-6 pr-6 lg:pl-8 ml-12',
+          'mt-16 flex gap-8 pl-6 pr-6 lg:pl-8 lg:ml-12 ml-4',
           '[scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
-          'snap-x snap-mandatory overflow-x-auto overscroll-x-contain scroll-smooth',
+          'snap-x snap-mandatory overflow-x-scroll overscroll-x-contain scroll-smooth',
           'pb-8',
         ])}
       >
diff --git a/src/components/Button.jsx b/src/components/Button.jsx
index 18c4cad..2d75206 100644
--- a/src/components/Button.jsx
+++ b/src/components/Button.jsx
@@ -3,9 +3,9 @@ import clsx from 'clsx'
 
 const baseStyles = {
   solid:
-    'group inline-flex items-center justify-center rounded-full py-2 px-4 text-sm font-semibold focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2',
+    'group inline-flex items-center justify-center rounded-xl py-1.5 px-3 sm:py-2 sm:px-4 text-xs sm:text-sm font-semibold focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2',
   outline:
-    'group inline-flex ring-1 items-center justify-center rounded-full py-2 px-4 text-sm focus:outline-none',
+    'group inline-flex ring-1 items-center justify-center rounded-xl py-1.5 px-3 sm:py-2 sm:px-4 text-xs sm:text-sm focus:outline-none',
 }
 
 const variantStyles = {
diff --git a/src/components/CNNVIDEO.jsx b/src/components/CNNVIDEO.jsx
index 832df98..6a50c48 100644
--- a/src/components/CNNVIDEO.jsx
+++ b/src/components/CNNVIDEO.jsx
@@ -6,17 +6,12 @@ import React from 'react'
 
 const CnnVideo = () => {
     return (
-        <section
-      id="testimonials"
-      aria-label="What our customers are saying"
-      className="bg-transparent pt-6 pb-24"
-    >
       <Container>
-        <div className="mx-auto max-w-5xl md:text-center">
+        <div className="mx-auto max-w-4xl md:text-center">
           <h2 className="font-display text-3xl font-semibold tracking-[-0.05em] text-darkgr-700 lg:text-4xl">
           VEDA ON CNN 
           </h2>
-          <p className="mb-10 mt-4 text-lg font-medium tracking-[-0.001em] lg:text-xl text-darkgr-950">
+          <p className="mb-6 sm:mb-10 mt-4 text-xl/5 font-medium tracking-[-0.045em] lg:tracking-[-0.02em] leading-[1.3] lg:leading-[1.4] lg:text-2xl text-darkgr">
           CNN Travel visited the Veda boats to give you a first hand impression of what awaits you when cruising the Nile.
           </p>
         </div>
@@ -24,15 +19,14 @@ const CnnVideo = () => {
         <iframe
           src="https://player.vimeo.com/video/371621672?loop=1&muted=1"
           width="100%"
-          height="600"
+          height="300"
           frameBorder="0"
           allow="autoplay; fullscreen; picture-in-picture"
           allowFullScreen
-          className="rounded-lg w-full max-w-6xl mx-auto"
+          className="rounded-lg w-full max-w-6xl mx-auto sm:h-[400px] lg:h-[600px]"
         ></iframe>
       </div>
         </Container>
-        </section>
     );
   };
   
diff --git a/src/components/Carousel.jsx b/src/components/Carousel.jsx
index 960a45e..94090f3 100644
--- a/src/components/Carousel.jsx
+++ b/src/components/Carousel.jsx
@@ -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>
diff --git a/src/components/Experiences.jsx b/src/components/Experiences.jsx
index 9d854ad..6af196f 100644
--- a/src/components/Experiences.jsx
+++ b/src/components/Experiences.jsx
@@ -1,17 +1,17 @@
 export function Experiences() {
   return (
-    <div className="pt-16 sm:pt-24 pb-12">
+    <div className="pt-16 lg:pt-24 pb-12">
       <div className="mx-auto max-w-2xl px-6  lg:max-w-7xl lg:px-8">
-        <p className="mt-2 max-w-lg text-2xl sm:text-3xl font-semibold tracking-[-0.05em] text-darkgr-700 lg:text-4xl">
+        <p className="mt-2 max-w-lg text-3xl font-semibold tracking-[-0.05em] text-darkgr-700 lg:text-4xl">
         Programs
         </p>
         
-        <p className="mt-4 max-w-5xl text-lg sm:text-2xl font-medium tracking-[-0.045em] lg:text-3xl text-darkgr">
+        <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">
           From intimate community gatherings to professional retreats, VEDA offers transformative programs on the Nile. Each space is thoughtfully designed to foster connection, creativity, and personal growth in an inspiring riverside setting.
         </p>
         <div className="mt-8 sm:mt-16 grid grid-cols-1 gap-4 lg:grid-cols-8 lg:grid-rows-2">
           <div className="flex p-px lg:col-span-5">
-            <div className="w-full overflow-hidden rounded-lg shadow-sm outline outline-black/5 max-lg:rounded-t-4xl lg:rounded-tl-4xl relative isolate flex flex-col justify-end">
+            <div className="w-full overflow-hidden rounded-lg shadow-sm outline outline-black/5 max-lg:rounded-t-4xl lg:rounded-tl-4xl relative isolate flex flex-col justify-end h-80 lg:h-auto">
               <img
                 alt=""
                 src="/images/community.jpg"
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
index c1bd2cc..86ed444 100644
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@@ -3,7 +3,7 @@ import { Logo } from '@/components/Logo'
 
 export function Footer() {
   return (
-    <footer className="bg-transparent border-darkgr-950 border-t-4">
+    <footer className="bg-transparent border-darkgr-950 border-t-2">
       <Container>
         <div className="flex items-center justify-between py-8">
           <Logo className="h-10 w-auto" />
diff --git a/src/components/Hero.jsx b/src/components/Hero.jsx
index 5709403..c9f6c11 100644
--- a/src/components/Hero.jsx
+++ b/src/components/Hero.jsx
@@ -5,14 +5,14 @@ import { Container } from '@/components/Container'
 
 export function Hero() {
   return (
-    <section className="relative w-full h-screen lg:mt-0 mt-0">
+    <section className="relative w-full lg:h-screen  h-[550px] lg:mt-0 mt-0">
       {/* Background Video */}
       <video
         autoPlay
         loop
         muted
         playsInline
-        className="absolute top-0 left-0 w-full h-full object-cover z-0 bg-[#FEFFF6] opacity-20"
+        className="absolute top-0 left-0 w-full lg:h-full h-[550px] object-cover z-0 bg-[#FEFFF6] opacity-25"
       >
         <source src="/videos/hero4.mp4" type="video/mp4" />
         Your browser does not support the video tag.
@@ -25,18 +25,18 @@ export function Hero() {
             <Image src="/images/logos/veda_logo_dark.svg" alt="VEDA" width={200} height={60} className="h-8 sm:h-12 w-auto" unoptimized />
           </div>
           <div className="mx-auto max-w-5xl lg:mx-0 mt-4 sm:mt-6">
-            <h2 className="text-lg sm:text-2xl font-medium tracking-[-0.05em] text-darkgr-800 lg:text-3xl">
+            <h2 className="text-xl/5 font-medium tracking-[-0.05em] leading-[1.3] lg:leading-[1.4] text-darkgr-800 lg:text-3xl">
               Veda welcomes you into her home providing unique wellness cruises blending cultural authentic experiences with unparalleled freedom and privacy.
             </h2>
-            <h2 className="mt-2 text-lg sm:text-2xl font-medium tracking-[-0.05em] text-darkgr-800 lg:text-3xl">
+            <h2 className="mt-2 text-lg sm:text-2xl font-medium tracking-[-0.05em] leading-[1.3] lg:leading-[1.4] text-darkgr-800 lg:text-3xl">
               Our organic cuisine, cultural activities and dedicated warm hearted crew will make your veda cruise an unforgettable experience.
               </h2>
           </div>
            <div className="mx-auto max-w-3xl lg:mx-0">
-            <p className="mt-4 sm:mt-6 text-2xl sm:text-3xl font-semibold tracking-[-0.05em] text-darkgr-700 lg:text-4xl">
+            <p className="mt-4 sm:mt-6 text-2xl font-semibold tracking-[-0.05em] leading-[1.3] lg:leading-[1.4] text-darkgr-700 lg:text-4xl">
               Nile Cruises, Reimagined. 
             </p>
-            <Button href="/story" color="blue" className="mt-6 sm:mt-8">
+            <Button href="/story" color="blue" className="mt-6 lg:mt-8">
               <span className="font-semibold tracking-wide">
                 Read Our Story
               </span>
diff --git a/src/components/NewFeatures.jsx b/src/components/NewFeatures.jsx
index 935d1d2..b8c0013 100644
--- a/src/components/NewFeatures.jsx
+++ b/src/components/NewFeatures.jsx
@@ -8,9 +8,9 @@ const features = [
     icon: SparklesIcon,
   },
   {
-    name: 'Your journey, your way.',
+    name: 'Magical Expeditions',
     description:
-      "Create a travel experience that suits you perfectly, from the length of your stay to a tailored itinerary. Our expert guidance ensures every detail, from daily activities to dining options, aligns with your vision for a bespoke adventure.",
+      "Let Veda take you on a journey of a lifetime. Our expert guidance ensures every detail, from daily activities to dining options, aligns with your vision for a bespoke adventure.",
     icon: SparklesIcon,
   },
   {
@@ -23,13 +23,13 @@ const features = [
 
 export default function NewFeatures() {
   return (
-    <div className="overflow-hidden bg-transparent pb-0 pt-16 pb:12">
+    <div className="overflow-hidden bg-transparent pb-0 pt-4 lg:pt-24 pb:12">
       <div className="mx-auto max-w-7xl px-6 lg:px-8">
-        <div className="mx-auto max-w-2xllg:max-w-7xl  pb-16">
+        <div className="mx-auto max-w-2xllg:max-w-7xl pb-10 lg:pb-16">
         <p className="mt-2 max-w-lg  text-3xl font-semibold tracking-[-0.05em] text-darkgr-700 lg:text-4xl">
         Experiences
         </p>
-        <p className="mt-4 max-w-5xl text-2xl font-medium tracking-[-0.045em] lg:text-3xl text-darkgr">
+        <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">
         At VEDA, we embrace a transformative journey by aligning with your personal preferences and holistic experiences. Our mission is to offer profound and memorable moments that inspire and uplift, guiding you on a journey within.
         </p>
       </div>
@@ -44,14 +44,14 @@ export default function NewFeatures() {
         </div>
           <div className="lg:ml-auto lg:pl-4 lg:pt-0">
             <div className="lg:max-w-lg">
-              <dl className="mt-10 max-w-xl space-y-8 text-base leading-7 text-gray-600 lg:max-w-none">
+              <dl className="lg:mt-10 mt-0 max-w-xl space-y-8 text-base leading-7 text-gray-600 lg:max-w-none">
                 {features.map((feature) => (
                   <div key={feature.name} className="relative pl-9">
                     <dt className="inline font-semibold lg:text-xl text-lg text-darkgr-900">
                       <feature.icon aria-hidden="true" className="absolute left-1 top-1 h-5 w-5 text-gold-300" />
                       {feature.name}
                     </dt>{' '}
-                    <dd className='text-sm leading-tight font-medium tracking-[-0.001em] lg:text-base text-darkgr-950'>{feature.description}</dd>
+                    <dd className='mt-1 text-sm leading-tight font-medium tracking-[-0.001em] lg:text-base text-darkgr-950'>{feature.description}</dd>
                   </div>
                 ))}
               </dl>
diff --git a/src/components/NewFeatures2.jsx b/src/components/NewFeatures2.jsx
index ef932c2..e3e4b33 100644
--- a/src/components/NewFeatures2.jsx
+++ b/src/components/NewFeatures2.jsx
@@ -35,7 +35,7 @@ export default function NewFeatures2() {
                       <feature.icon aria-hidden="true" className="absolute left-1 top-1 h-5 w-5 text-gold-300" />
                       {feature.name}
                     </dt>{' '}
-                    <dd className='text-sm leading-tight font-medium tracking-[-0.001em] lg:text-base text-darkgr-950'>{feature.description}</dd>
+                    <dd className='mt-1 text-sm leading-tight font-medium tracking-[-0.001em] lg:text-base text-darkgr-950'>{feature.description}</dd>
                   </div>
                 ))}
               </dl>
diff --git a/src/components/Route.jsx b/src/components/Route.jsx
index d2b239b..45584eb 100644
--- a/src/components/Route.jsx
+++ b/src/components/Route.jsx
@@ -11,15 +11,15 @@ import { Container } from '@/components/Container'
 
 export default function Route() {
   return (
-    <div className="overflow-hidden bg-transparent pt-6 pb-24">
-      <div className="mx-auto max-w-7xl px-6 lg:px-8">
+    <div className="overflow-hidden bg-transparent pt-6 pb-24 px-6 lg:px-8">
+      <div className="mx-auto max-w-7xl ">
         <div className="grid grid-cols-1 gap-x-8 gap-y-4 lg:gap-y-16 lg:grid-cols-2 lg:items-start">
-          <div className="px-6 lg:px-0 lg:pr-4 lg:pt-4">
+          <div className="lg:pr-4 lg:pt-4">
             <div className="mx-auto max-w-2xl lg:mx-0 lg:max-w-lg">
               <p className="font-display text-3xl font-semibold tracking-[-0.05em] text-darkgr-700 lg:text-4xl">Itinerary</p>
-              <p className="mt-4 max-w-5xl text-2xl font-medium tracking-[-0.045em] lg:text-3xl text-darkgr">
+              <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">
               By following the natural flow of the Nile river you will discover some of the most sacred places of the world.</p>
-              <p className="my-6 max-w-5xl text-lg font-medium tracking-[-0.001em] lg:text-xl text-darkgr-950">All our trips are designed according to your wishes. Your group's tailored itinerary will lead you to the locations and temples which fit your energy.
+              <p className="my-6 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">All our trips are designed according to your wishes. Your group's tailored itinerary will lead you to the locations and temples which fit your energy.
               </p>
               <div className="relative z-10 mt-4 mb-10 lg:mb-40 lg:py-2 xs:mb-20 flex justify-startgap-x-6">
               <Button href="/contact" color="blue">
diff --git a/src/components/Testimonials.jsx b/src/components/Testimonials.jsx
index c20d506..64b52a4 100644
--- a/src/components/Testimonials.jsx
+++ b/src/components/Testimonials.jsx
@@ -87,20 +87,20 @@ export function Testimonials() {
     <section
       id="testimonials"
       aria-label="What our customers are saying"
-      className="bg-transparent pt-12 pb-24"
+      className="bg-transparent lg:pt-24 pt-8 pb-24"
     >
       <Container>
-        <div className="mx-auto max-w-4xl md:text-center">
+        <div className="mx-auto max-w-5xl md:text-center">
           <h2 className="font-display text-3xl font-semibold tracking-[-0.05em] text-darkgr-700 lg:text-4xl">
             Testimonials
           </h2>
-          <p className="mb-8 mt-4 text-lg font-medium tracking-[-0.001em] lg:text-xl text-darkgr-950">
+          <p className="mb-8 mt-4 text-xl/5 font-medium tracking-[-0.045em] lg:tracking-[-0.02em] leading-[1.3] lg:leading-[1.4] lg:text-2xl text-darkgr">
           Discover the heartfelt stories of joy, relaxation, and adventure that make VEDA a cherished choice for travelers seeking unique and sophisticated experiences on the Nile.
           </p>
         </div>
         <ul
           role="list"
-          className="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-6 sm:gap-8 lg:mt-20 lg:max-w-none lg:grid-cols-3"
+          className="mx-auto mt-8 grid max-w-2xl grid-cols-1 gap-6 sm:gap-8 lg:mt-20 lg:max-w-none lg:grid-cols-3"
         >
           {testimonials.map((column, columnIndex) => (
             <li key={columnIndex}>