@hellobetterdigitalnz/selwynui 0.0.1-45 → 0.0.1-47

package/src/Components/DataDisplay/ListBlock/ListBlockProps.tsx

@@ -13,7 +13,7 @@ export interface Card {
   pillar?: 'visit' | 'live' | 'business' | 'participate' | 'taste'
   image?:string,
   variation?: "long" | "short";
-  category?: 'all' | 'adventure' | 'ski' | 'nature',
+  category?: string | undefined,
 }
 
 interface ListBlockProps {

package/src/Components/DataDisplay/TestimonyCard/TestimonyCard.stories.tsx

@@ -21,7 +21,7 @@ const TestimonyCardTemplate: Story = {
   render: () => {
     return (
       <>
-        <ElementHolder paddingTop="sm" paddingBottom="sm" pillar="visit" level="primary">
+        <ElementHolder paddingTop="sm" paddingBottom="sm" pillar="business" level="primary">
         <TestimonyCard
           testimonies={[
             {

package/src/Components/DataDisplay/TestimonyCard/TestimonyCard.tsx

@@ -1,84 +1,80 @@
-import { useState, useEffect } from 'react';
+import { useRef, useState } from 'react';
+import Slider from 'react-slick';
 import TestimonyCardProps from "./TestimonyCardProps.tsx";
 import styles from './testimonyCard.module.scss';
 import Container from "../../Shared/Container/Container.tsx";
+import 'slick-carousel/slick/slick.css';
+import 'slick-carousel/slick/slick-theme.css';
 
 const TestimonyCard = (props: TestimonyCardProps) => {
   const {
     testimonies,
-    pillar = 'visit'
+    pillar,
   } = props;
 
-  const [currentIndex, setCurrentIndex] = useState(0);
-  const [direction, setDirection] = useState<'left' | 'right'>('right');
-
+  const sliderRef = useRef<Slider>(null);
+  const [currentSlide, setCurrentSlide] = useState(0);
   const defaultImage = 'https://images.pexels.com/photos/1563356/pexels-photo-1563356.jpeg';
 
-  const handleDotClick = (index: number) => {
-    if (index > currentIndex) {
-      setDirection('right');
-    } else {
-      setDirection('left');
-    }
-    setCurrentIndex(index);
+  const settings = {
+    dots: false,
+    infinite: true,
+    speed: 900,
+    slidesToShow: 1,
+    slidesToScroll: 1,
+    autoplay: true,
+    autoplaySpeed: 5000,
+    cssEase: 'cubic-bezier(0, 0, 1, 1)',
+    arrows: false,
+    fade: false,
+    swipe: true,
+    touchMove: true,
+    beforeChange: (_current: number, next: number) => setCurrentSlide(next),
   };
 
+  const handleDotClick = (index: number) => {
+    sliderRef.current?.slickGoTo(index);
+  };
 
-  useEffect(() => {
-    const interval = setInterval(() => {
-      setDirection('right');
-      setCurrentIndex((prev) => (prev + 1) % testimonies.length);
-    }, 5000); // change every 5 seconds
-
-    return () => clearInterval(interval); // cleanup on unmount
-  }, [testimonies.length]);
+  return (
+    <div className={`${styles.testimonyCard} ${styles.testimonyCardLarge} ${pillar ? `${pillar}` : ""}`}>
+      <Container>
+        <div className={styles.testimonyCardContainer}>
+          <Slider ref={sliderRef} {...settings} className={styles.carouselWrapper}>
+            {testimonies.map((testimony, index) => (
+              <div key={index}>
+                <div className={styles.testimonySlide}>
+                  <div className={styles.testimonyCardLeft}>
+                    <img
+                      src={testimony.image || defaultImage}
+                      alt={`${testimony.author} testimonial`}
+                    />
+                  </div>
 
-  return <div
-    className={`
-    ${styles.testimonyCard} 
-    ${styles.testimonyCardLarge}
-    ${pillar ? `${pillar}` : ""}
-    `}
-  >
-    <Container>
-      <div className={styles.testimonyCardWrapper}>
-        <div className={styles.testimonyCardLeft}>
-          <img
-            key={`image-${currentIndex}`}
-            className={styles[`slideIn${direction === 'right' ? 'Right' : 'Left'}`]}
-            src={testimonies[currentIndex].image || defaultImage}
-            alt={`${testimonies[currentIndex].author} testimonial`}
-          />
-        </div>
-        <div className={styles.testimonyCardRight}>
-          <div className={styles.testimonyContent}>
-            <div className={styles[`slideIn${direction === 'right' ? 'Right' : 'Left'}`]} >
-              <svg xmlns="http://www.w3.org/2000/svg" width="56" height="39" viewBox="0 0 56 39" fill="none">
-                <path d="M23.1134 27.0562C23.1134 32.4847 18.9331 36 13.4798 36C8.02648 36 4.75277 33.6194 3.3652 27.0562C1.97764 20.493 7.78599 17.227 13.2393 17.227C18.6926 17.227 23.1134 21.6276 23.1134 27.0562Z" fill="#92C134"/>
-                <path d="M53.0015 27.0558C53.0015 32.4844 48.8212 35.9997 43.3679 35.9997C37.9145 35.9997 34.6408 33.619 33.2533 27.0558C31.8657 20.4926 37.674 17.2267 43.1274 17.2267C48.5807 17.2267 53.0015 21.6273 53.0015 27.0558Z" fill="#92C134"/>
-                <path d="M3.3652 27.0562C4.75277 33.6194 8.02648 36 13.4798 36C18.9331 36 23.1134 32.4847 23.1134 27.0562C23.1134 21.6276 18.6926 17.227 13.2393 17.227C7.78599 17.227 1.97764 20.493 3.3652 27.0562ZM3.3652 27.0562C1.97764 20.493 4.78431 13.7613 7.99019 9.54638C11.1961 5.33146 17.2399 2.24873 21.5318 3.16115M33.2533 27.0558C34.6408 33.619 37.9145 35.9997 43.3679 35.9997C48.8212 35.9997 53.0015 32.4844 53.0015 27.0558C53.0015 21.6273 48.5807 17.2267 43.1274 17.2267C37.674 17.2267 31.8657 20.4926 33.2533 27.0558ZM33.2533 27.0558C31.8657 20.4926 34.6724 13.761 37.8782 9.54606C41.0841 5.33115 47.1279 2.24841 51.4199 3.16083" stroke="#92C134" strokeWidth="6" strokeLinecap="round" strokeLinejoin="round"/>
-              </svg>
-            </div>
-            <h6
-              key={`testimony-${currentIndex}`}
-              className={styles[`slideIn${direction === 'right' ? 'Right' : 'Left'}`]}
-            >
-              {testimonies[currentIndex].testimony}
-            </h6>
-          </div>
-          <p
-            key={`author-${currentIndex}`}
-            className={styles[`slideIn${direction === 'right' ? 'Right' : 'Left'}`]}
-          >
-            {testimonies[currentIndex].author}
-          </p>
+                  <div className={styles.testimonyCardRight}>
+                    <div className={styles.testimonyContent}>
+                      <div className={styles.quoteIcon}>
+                        <svg xmlns="http://www.w3.org/2000/svg" width="56" height="39" viewBox="0 0 56 39" fill="none">
+                          <path d="M23.1134 27.0562C23.1134 32.4847 18.9331 36 13.4798 36C8.02648 36 4.75277 33.6194 3.3652 27.0562C1.97764 20.493 7.78599 17.227 13.2393 17.227C18.6926 17.227 23.1134 21.6276 23.1134 27.0562Z" fill="currentColor"/>
+                          <path d="M53.0015 27.0558C53.0015 32.4844 48.8212 35.9997 43.3679 35.9997C37.9145 35.9997 34.6408 33.619 33.2533 27.0558C31.8657 20.4926 37.674 17.2267 43.1274 17.2267C48.5807 17.2267 53.0015 21.6273 53.0015 27.0558Z" fill="currentColor"/>
+                          <path d="M3.3652 27.0562C4.75277 33.6194 8.02648 36 13.4798 36C18.9331 36 23.1134 32.4847 23.1134 27.0562C23.1134 21.6276 18.6926 17.227 13.2393 17.227C7.78599 17.227 1.97764 20.493 3.3652 27.0562ZM3.3652 27.0562C1.97764 20.493 4.78431 13.7613 7.99019 9.54638C11.1961 5.33146 17.2399 2.24873 21.5318 3.16115M33.2533 27.0558C34.6408 33.619 37.9145 35.9997 43.3679 35.9997C48.8212 35.9997 53.0015 32.4844 53.0015 27.0558C53.0015 21.6273 48.5807 17.2267 43.1274 17.2267C37.674 17.2267 31.8657 20.4926 33.2533 27.0558ZM33.2533 27.0558C31.8657 20.4926 34.6724 13.761 37.8782 9.54606C41.0841 5.33115 47.1279 2.24841 51.4199 3.16083" stroke="currentColor" strokeWidth="6" strokeLinecap="round" strokeLinejoin="round"/>
+                        </svg>
+                      </div>
+                      <h6>{testimony.testimony}</h6>
+                    </div>
+                    <p>{testimony.author}</p>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </Slider>
 
           {testimonies.length > 1 && (
             <div className={styles.pagination}>
               {testimonies.map((_, index) => (
                 <button
                   key={index}
-                  className={`${styles.dot} ${index === currentIndex ? styles.active : ''}`}
+                  className={`${styles.dot} ${index === currentSlide ? styles.active : ''}`}
                   onClick={() => handleDotClick(index)}
                   aria-label={`Go to testimonial ${index + 1}`}
                 />
@@ -86,9 +82,9 @@ const TestimonyCard = (props: TestimonyCardProps) => {
             </div>
           )}
         </div>
-      </div>
-    </Container>
-  </div>
+      </Container>
+    </div>
+  );
 };
 
 export default TestimonyCard;

package/src/Components/DataDisplay/TestimonyCard/testimonyCard.module.scss

@@ -6,10 +6,71 @@
   }
 }
 
-.testimonyCardWrapper {
+.testimonyCardContainer {
+  position: relative;
+}
+
+.carouselWrapper {
+  position: relative;
+  overflow: hidden;
+  min-height: 400px;
+
+  @media (max-width: 834px) {
+    min-height: 600px;
+  }
+
+  :global {
+    .slick-slider {
+      position: relative;
+      display: block;
+      box-sizing: border-box;
+      user-select: none;
+      touch-action: pan-y;
+    }
+
+    .slick-list {
+      position: relative;
+      display: block;
+      overflow: hidden;
+      margin: 0;
+      padding: 0;
+    }
+
+    .slick-track {
+      position: relative;
+      top: 0;
+      left: 0;
+      display: block;
+      margin-left: auto;
+      margin-right: auto;
+    }
+
+    .slick-slide {
+      display: none;
+      float: left;
+      height: 100%;
+      min-height: 1px;
+
+      > div {
+        display: block;
+      }
+    }
+
+    .slick-slide.slick-active {
+      display: block;
+    }
+
+    .slick-initialized .slick-slide {
+      display: block;
+    }
+  }
+}
+
+.testimonySlide {
   display: flex;
-  gap: 69px;
+  gap: 67px;
   align-items: center;
+  outline: none;
 
   @media (max-width: 1032px) {
     flex-direction: column;
@@ -19,12 +80,11 @@
 
 .testimonyCardLeft {
   flex-shrink: 0;
-  overflow: hidden;
 
   @media (max-width: 834px) {
     padding-top: 0;
     padding-bottom: 0;
-    width: calc(100% + 32px);
+    width: 100%;
     display: flex;
     justify-content: center;
   }
@@ -42,6 +102,7 @@
     }
 
     @media (max-width: 480px) {
+      width: 100%;
       border-radius: 2px 2px 96px 2px;
     }
   }
@@ -51,29 +112,22 @@
   flex: 1;
   display: flex;
   flex-direction: column;
-  gap: 24px;
-  overflow: hidden;
-  position: relative;
-  min-height: 340px;
-  height: 100%;
-
-  @media (max-width: 1390px) {
-    height: 100%;
-  }
 
+  gap: 30px;
+  min-height: 273px;
+  width: 172px;
 
   @media (max-width: 1032px) {
     width: 100%;
-    height: 100%;
     gap: 16px;
   }
 
   p {
     font-size: 14px;
     font-weight: var(--font-weight-h5);
-    letter-spacing: -0.14px;
+    letter-spacing: -0.48px;
     line-height: var(--line-height-body-regular);
-    padding-left: 70px;
+    padding-left: 83px;
 
     @media (max-width: 834px) {
       padding-left: 0;
@@ -83,9 +137,8 @@
 
 .testimonyContent {
   display: flex;
-  gap: 16px;
+  gap: 25px;
   align-items: flex-start;
-  overflow: hidden;
 
   @media (max-width: 834px) {
     flex-direction: column;
@@ -109,11 +162,13 @@
   }
 
   h6 {
+
     font-size: var(--font-size-h6);
     line-height: 1.3;
     font-weight: var(--font-weight-body-sm);
     letter-spacing: -0.48px;
     white-space: pre-line;
+    margin-top: -5px;
 
     @media (max-width: 834px) {
       font-size: var(--font-size-body-regular);
@@ -128,10 +183,20 @@
 .pagination {
   display: flex;
   gap: 12px;
-  padding-left: 70px;
+  padding-left: 477px;
+  margin-top: -110px;
   position: absolute;
-  bottom: 0;
-  left: 0;
+  z-index: 2;
+
+  @media (max-width: 1132px) {
+    padding-left: 480px;
+    margin-top: 0;
+  }
+
+  @media (max-width: 923px) {
+    padding-left: 0;
+    gap: 8px;
+  }
 
   @media (max-width: 834px) {
     padding-left: 0;
@@ -145,11 +210,12 @@
     cursor: pointer;
     border: none;
     padding: 0;
-    background-color: var(--color-taste);
+    background-color: var(--color-text);
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
+    transition: all 0.3s ease;
 
     @media (max-width: 834px) {
       width: 16px;
@@ -161,43 +227,16 @@
       width: 12px;
       height: 12px;
       border-radius: 50%;
-      background-color: var(--color-visit);
+      background-color: var(--color-bg);
 
       @media (max-width: 834px) {
         width: 8px;
         height: 8px;
       }
     }
-  }
-}
-
-// Animations
-@keyframes slideInRight {
-  from {
-    opacity: 0;
-    transform: translateX(50px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
 
-@keyframes slideInLeft {
-  from {
-    opacity: 0;
-    transform: translateX(-50px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
+    &:hover {
+      transform: scale(1.1);
+    }
   }
-}
-
-.slideInRight {
-  animation: slideInRight 0.5s ease-out;
-}
-
-.slideInLeft {
-  animation: slideInLeft 0.5s ease-out;
 }

package/src/Components/Shared/ElementHolder/ElementHolderProps.tsx

@@ -1,6 +1,6 @@
 import { ReactNode } from "react"
 
-type SpacingOption = "none" | "sm" | "md" | "lg"
+type SpacingOption = "none" | "xsm" |"sm" | "md" | "lg" | "xl"
 
 interface ElementHolderProps {
     children?: ReactNode