feat : added testimonial page

src/components/Testimonials/index.tsx

@@ -0,0 +1,112 @@
+import {useState} from 'react'
+import './styles.css'
+
+export function Testimonials() {
+    const [position, setPosition] = useState(25);
+    const [onFocus, setOnFocus] = useState(0);
+
+    const DISPLAY_LIST = [1, 2, 3, 4, 5];
+    const DISPLAYLIST = [
+      {
+        name : 'Ellie Ramsay 1',
+        position : "Product Designer",
+        message : 'I am quite happy to choose Printasia for my visiting card. I got good quality in advocate section of visiting cards. Best experience I ever had.'
+      },
+      {
+        name : 'Ellie Ramsay2',
+        position : "Product Designer",
+        message : 'I am quite happy to choose Printasia for my visiting card. I got good quality in advocate section of visiting cards. Best experience I ever had.'
+      },
+      {
+        name : 'Ellie Ramsay3',
+        position : "Product Designer",
+        message : 'I am quite happy to choose Printasia for my visiting card. I got good quality in advocate section of visiting cards. Best experience I ever had.'
+      },
+      {
+        name : 'Ellie Ramsay4',
+        position : "Product Designer",
+        message : 'I am quite happy to choose Printasia for my visiting card. I got good quality in advocate section of visiting cards. Best experience I ever had.'
+      },
+      {
+        name : 'Ellie Ramsay5',
+        position : "Product Designer",
+        message : 'I am quite happy to choose Printasia for my visiting card. I got good quality in advocate section of visiting cards. Best experience I ever had.'
+      },
+      {
+        name : 'Ellie Ramsay6',
+        position : "Product Designer",
+        message : 'I am quite happy to choose Printasia for my visiting card. I got good quality in advocate section of visiting cards. Best experience I ever had.'
+      },
+      {
+        name : 'Ellie Ramsay7',
+        position : "Product Designer",
+        message : 'I am quite happy to choose Printasia for my visiting card. I got good quality in advocate section of visiting cards. Best experience I ever had.'
+      }
+    ]
+
+  const [startPosition, setStartPosition] = useState(0);
+    return (
+      <div className='relative'>
+        <img className='absolute h-[16%] ml:h-[20%] aspect-square ml:top-[-10%] top-[-8%] right-[10%]' src='./assets/testimonial-star.svg' />
+        <div 
+          className="swiping-component"
+          onTouchStart={(e) => {
+                setStartPosition(e.changedTouches[0].clientX);
+              }}
+              onTouchEnd={(e) => {
+                if (
+                  e.changedTouches[0].clientX < startPosition &&
+                  onFocus !== DISPLAY_LIST.length - 1
+                ) {
+                  setPosition((prev) => prev - 50);
+                  setOnFocus((prev) => prev + 1);
+                } else {
+                  if (onFocus !== 0) {
+                    setPosition((prev) => prev + 50);
+                    setOnFocus((prev) => prev - 1);
+                  }
+                }
+              }}
+        >
+        <div 
+          className="carousel" 
+          style={{ left: `${position}%` }}
+
+        >
+          {DISPLAYLIST.map((val, index) => (
+            <div key={index}
+              className={`carousel-item ${onFocus === index ? "onfocus" : "cursor-pointer"} `}
+              onClick = {() => {
+                if(index === onFocus - 1){
+                  setPosition((prev) => prev + 50);
+                  setOnFocus((prev) => prev - 1);
+                }
+
+                if(index === onFocus + 1) {
+                  setPosition((prev) => prev - 50);
+                  setOnFocus((prev) => prev + 1);
+                }
+              }}
+
+
+            >
+              <div className="content ">
+                <img className="review-image" src="./assets/testimonialimg.svg" />
+                <div className='w-3/4 m-auto text-[0.55rem] ml:text-sm '>
+                <p className=''>
+                  {val.message}
+                </p>
+                <p className='mt-4 pb-2 font-bold'>{val.name}</p>
+                <p className='text-xs pb-4 text-gray-400'>{val.position}</p>
+                </div>
+
+              </div>
+            </div>
+          ))}
+        </div>
+
+
+      </div>
+      </div>
+  )
+}

src/components/Testimonials/styles.css

@@ -0,0 +1,78 @@
+
+  .swiping-component {
+    display: flex;
+    height: 100vh;
+    flex-direction: column;
+    justify-content: space-evenly;
+    background-color: #ffefc5;
+  }
+
+  .carousel {
+    display: flex;
+    position: relative;
+    width: fit-content;
+    transition: all 1s;
+  }
+
+  .carousel-item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 50vw;
+    aspect-ratio: 1/1;
+    transition: all 1s;
+  }
+
+  .navigation-buttons {
+    display: flex;
+    justify-content: center;
+    gap: 8rem;
+  }
+
+  .content {
+    width: 50%;
+    background-color: white;
+    aspect-ratio: 4/3;
+    transition: all 1s;
+    box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.1);
+    position: relative;
+  }
+
+  .content > div {
+    outline: 2px solid black;
+  }
+
+  .onfocus .content {
+    background: white;
+    scale: 1.5;
+    box-shadow: 0px 0px 15px 10px rgba(0, 0, 0, 0.1);
+  }
+
+  .review-image {
+    width: 25%;
+    position: absolute;
+    border-radius: 50%;
+    outline: 5px solid white;
+    background-color: white;
+    top: -12%;
+    left: 12%;
+    transition: all 1s;
+  }
+
+
+
+  @media (max-width: 500px) {
+    .content {
+      width: 75%;
+    }
+    .onfocus .content {
+      scale: 2;
+    }
+
+    .review-image {
+      width: 50%;
+      left: 25%;
+      top : -20%;
+    }
+  }
+

src/components/index.ts

@@ -5,3 +5,4 @@ export * from './Intro';
 export * from './MarqueeTitle';
 export * from './ExploreEvents';
 export * from './ExploreProjects';
+export * from './Testimonials'