From 5002573cff62c7a6efce119f34ea8b175c1794c7 Mon Sep 17 00:00:00 2001
From: SandalikaAriyrathna <dilsandu96@gmail.com>
Date: Sun, 15 Sep 2024 08:01:40 +0530
Subject: [PATCH 1/3] Fix: testimonials

---
 apps/2024/src/components/landing/index.jsx    |  1 +
 .../components/landing/testimonials/data.json | 34 ++++++++++++
 .../components/landing/testimonials/index.jsx | 52 +++++++++++++++++++
 apps/2024/src/pages/landing.jsx               |  2 +
 4 files changed, 89 insertions(+)
 create mode 100644 apps/2024/src/components/landing/testimonials/data.json
 create mode 100644 apps/2024/src/components/landing/testimonials/index.jsx

diff --git a/apps/2024/src/components/landing/index.jsx b/apps/2024/src/components/landing/index.jsx
index 8f2fda4..6c306ae 100644
--- a/apps/2024/src/components/landing/index.jsx
+++ b/apps/2024/src/components/landing/index.jsx
@@ -9,6 +9,7 @@ export { default as Partners } from './partners';
 export { default as Prizes } from './prizes';
 export { default as Rules } from './rules';
 export { default as Sponsors } from './sponsors';
+export { default as Testimonials } from './testimonials';
 export { default as Timeline } from './timeline';
 export { default as KnowledgePartners } from './knowledge-partners';
 export { default as CountDown } from './countdown';
diff --git a/apps/2024/src/components/landing/testimonials/data.json b/apps/2024/src/components/landing/testimonials/data.json
new file mode 100644
index 0000000..8814938
--- /dev/null
+++ b/apps/2024/src/components/landing/testimonials/data.json
@@ -0,0 +1,34 @@
+[
+  {
+    "comment": "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.",
+    "name": "Ms. Emily Anderson",
+    "position": "UX Designer at Globex ",
+    "styles": {
+      "wrapper": "from-black/30 to-red-200"
+    }
+  },
+  {
+    "comment": "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.",
+    "name": "Ms. Emily Anderson",
+    "position": "UX Designer at Globex ",
+    "styles": {
+      "wrapper": "from-black/30 to-red-200"
+    }
+  },
+  {
+    "comment": "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.",
+    "name": "Ms. Emily Anderson",
+    "position": "UX Designer at Globex ",
+    "styles": {
+      "wrapper": "from-black/30 to-red-200"
+    }
+  },
+  {
+    "comment": "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.",
+    "name": "Ms. Emily Anderson",
+    "position": "UX Designer at Globex ",
+    "styles": {
+      "wrapper": "from-black/30 to-red-200"
+    }
+  }
+]
\ No newline at end of file
diff --git a/apps/2024/src/components/landing/testimonials/index.jsx b/apps/2024/src/components/landing/testimonials/index.jsx
new file mode 100644
index 0000000..c6d7346
--- /dev/null
+++ b/apps/2024/src/components/landing/testimonials/index.jsx
@@ -0,0 +1,52 @@
+/* eslint-disable react/no-unknown-property */
+import { twMerge } from 'tailwind-merge';
+import { SectionBadge } from '@/components/common/badges';
+import testimonials from './data.json';
+
+const Testimonials = () => {
+  return (
+    <div className="w-full flex flex-col py-6 px-10 lg:px-36 gap-y-10 overflow-hidden">
+      <SectionBadge id="sponsors">Testimonials</SectionBadge>
+      <div
+        className="grid grid-flow-col auto-cols-[33%] gap-8"
+        style={{
+          display: 'grid',
+          gridAutoFlow: 'column',
+          gridTemplateColumns: 'repeat(auto-fill, minmax(33%, 1fr))', // 3 boxes per row
+          animation: 'scroll-reel 20s linear infinite'
+        }}>
+        {testimonials.concat(testimonials).map((testimonial, index) => (
+          <div
+            key={index}
+            className={twMerge(
+              'relative bg-white aspect-rectangle flex flex-col justify-center rounded-2xl p-6 text-black shadow-md',
+              testimonial.styles?.wrapper
+            )}
+            style={{
+              width: '100%', // Make each item take up the full width of the grid column
+              height: '200px',
+              whiteSpace: 'normal'
+            }}>
+            <p className="text-lg font-semibold mb-2 text-left">{testimonial.comment}</p>
+            <span className="font-bold text-blue-600 mt-4 text-left">{testimonial.name}</span>
+            <span className="text-gray-500 text-sm text-left">{testimonial.position}</span>
+          </div>
+        ))}
+      </div>
+
+      {/* Inline keyframes for the scroll animation */}
+      <style jsx>{`
+        @keyframes scroll-reel {
+          0% {
+            transform: translateX(0);
+          }
+          100% {
+            transform: translateX(-100%);
+          }
+        }
+      `}</style>
+    </div>
+  );
+};
+
+export default Testimonials;
diff --git a/apps/2024/src/pages/landing.jsx b/apps/2024/src/pages/landing.jsx
index ded826f..46ec472 100644
--- a/apps/2024/src/pages/landing.jsx
+++ b/apps/2024/src/pages/landing.jsx
@@ -11,6 +11,7 @@ import {
   Prizes,
   Rules,
   Sponsors,
+  Testimonials,
   Timeline
 } from '@/components/landing';
 
@@ -26,6 +27,7 @@ const Landing = () => {
       <ContributionBanner />
       <Prizes />
       <Sponsors />
+      <Testimonials />
       <KnowledgePartners />
       <PastEvents />
       <Gallery />

From 0013b66b978ee681ff9a7bb59b3c0756851e6d40 Mon Sep 17 00:00:00 2001
From: sandali-aviha <dilsandu96@gmail.com>
Date: Sun, 22 Sep 2024 17:28:06 +0530
Subject: [PATCH 2/3] Fix: update testimonials

---
 .../components/landing/testimonials/index.jsx | 40 +++++++++----------
 1 file changed, 19 insertions(+), 21 deletions(-)

diff --git a/apps/2024/src/components/landing/testimonials/index.jsx b/apps/2024/src/components/landing/testimonials/index.jsx
index c6d7346..74171b7 100644
--- a/apps/2024/src/components/landing/testimonials/index.jsx
+++ b/apps/2024/src/components/landing/testimonials/index.jsx
@@ -5,28 +5,17 @@ import testimonials from './data.json';
 
 const Testimonials = () => {
   return (
-    <div className="w-full flex flex-col py-6 px-10 lg:px-36 gap-y-10 overflow-hidden">
+    <div className="w-full flex flex-col py-6 px-6 md:px-10 lg:px-36 gap-y-10 overflow-hidden">
       <SectionBadge id="sponsors">Testimonials</SectionBadge>
-      <div
-        className="grid grid-flow-col auto-cols-[33%] gap-8"
-        style={{
-          display: 'grid',
-          gridAutoFlow: 'column',
-          gridTemplateColumns: 'repeat(auto-fill, minmax(33%, 1fr))', // 3 boxes per row
-          animation: 'scroll-reel 20s linear infinite'
-        }}>
+      <div className="grid grid-flow-col gap-8 auto-cols-[90%] md:auto-cols-[50%] lg:auto-cols-[33%] animate-scroll-reel">
         {testimonials.concat(testimonials).map((testimonial, index) => (
           <div
             key={index}
             className={twMerge(
               'relative bg-white aspect-rectangle flex flex-col justify-center rounded-2xl p-6 text-black shadow-md',
+              'w-full h-[200px] sm:h-[220px] md:h-[250px] overflow-hidden break-words',
               testimonial.styles?.wrapper
-            )}
-            style={{
-              width: '100%', // Make each item take up the full width of the grid column
-              height: '200px',
-              whiteSpace: 'normal'
-            }}>
+            )}>
             <p className="text-lg font-semibold mb-2 text-left">{testimonial.comment}</p>
             <span className="font-bold text-blue-600 mt-4 text-left">{testimonial.name}</span>
             <span className="text-gray-500 text-sm text-left">{testimonial.position}</span>
@@ -34,14 +23,23 @@ const Testimonials = () => {
         ))}
       </div>
 
-      {/* Inline keyframes for the scroll animation */}
       <style jsx>{`
-        @keyframes scroll-reel {
-          0% {
-            transform: translateX(0);
+        @tailwind base;
+        @tailwind components;
+        @tailwind utilities;
+
+        @layer utilities {
+          @keyframes scroll-reel {
+            0% {
+              transform: translateX(0);
+            }
+            100% {
+              transform: translateX(-100%);
+            }
           }
-          100% {
-            transform: translateX(-100%);
+
+          .animate-scroll-reel {
+            animation: scroll-reel 20s linear infinite;
           }
         }
       `}</style>

From 155a3a306323347164558001a13b02d5d535a01d Mon Sep 17 00:00:00 2001
From: sandali-aviha <dilsandu96@gmail.com>
Date: Sun, 22 Sep 2024 19:11:33 +0530
Subject: [PATCH 3/3] Fix: update testimonials

---
 .../components/landing/testimonials/data.json |  8 +--
 .../components/landing/testimonials/index.jsx | 62 +++++++------------
 2 files changed, 27 insertions(+), 43 deletions(-)

diff --git a/apps/2024/src/components/landing/testimonials/data.json b/apps/2024/src/components/landing/testimonials/data.json
index 8814938..2dcb905 100644
--- a/apps/2024/src/components/landing/testimonials/data.json
+++ b/apps/2024/src/components/landing/testimonials/data.json
@@ -1,6 +1,6 @@
 [
   {
-    "comment": "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.",
+    "comment": "1 It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.",
     "name": "Ms. Emily Anderson",
     "position": "UX Designer at Globex ",
     "styles": {
@@ -8,7 +8,7 @@
     }
   },
   {
-    "comment": "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.",
+    "comment": "2 It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.",
     "name": "Ms. Emily Anderson",
     "position": "UX Designer at Globex ",
     "styles": {
@@ -16,7 +16,7 @@
     }
   },
   {
-    "comment": "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.",
+    "comment": "3 It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.",
     "name": "Ms. Emily Anderson",
     "position": "UX Designer at Globex ",
     "styles": {
@@ -24,7 +24,7 @@
     }
   },
   {
-    "comment": "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.",
+    "comment": "4 It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.",
     "name": "Ms. Emily Anderson",
     "position": "UX Designer at Globex ",
     "styles": {
diff --git a/apps/2024/src/components/landing/testimonials/index.jsx b/apps/2024/src/components/landing/testimonials/index.jsx
index 74171b7..cfb7adf 100644
--- a/apps/2024/src/components/landing/testimonials/index.jsx
+++ b/apps/2024/src/components/landing/testimonials/index.jsx
@@ -1,49 +1,33 @@
-/* eslint-disable react/no-unknown-property */
+import Marquee from 'react-fast-marquee';
 import { twMerge } from 'tailwind-merge';
 import { SectionBadge } from '@/components/common/badges';
 import testimonials from './data.json';
 
 const Testimonials = () => {
   return (
-    <div className="w-full flex flex-col py-6 px-6 md:px-10 lg:px-36 gap-y-10 overflow-hidden">
-      <SectionBadge id="sponsors">Testimonials</SectionBadge>
-      <div className="grid grid-flow-col gap-8 auto-cols-[90%] md:auto-cols-[50%] lg:auto-cols-[33%] animate-scroll-reel">
-        {testimonials.concat(testimonials).map((testimonial, index) => (
-          <div
-            key={index}
-            className={twMerge(
-              'relative bg-white aspect-rectangle flex flex-col justify-center rounded-2xl p-6 text-black shadow-md',
-              'w-full h-[200px] sm:h-[220px] md:h-[250px] overflow-hidden break-words',
-              testimonial.styles?.wrapper
-            )}>
-            <p className="text-lg font-semibold mb-2 text-left">{testimonial.comment}</p>
-            <span className="font-bold text-blue-600 mt-4 text-left">{testimonial.name}</span>
-            <span className="text-gray-500 text-sm text-left">{testimonial.position}</span>
-          </div>
-        ))}
+    <>
+      <div className="w-full flex flex-col py-6 px-10 lg:px-24 gap-y-10">
+        <SectionBadge id="testimonials">Testimonials</SectionBadge>
       </div>
-
-      <style jsx>{`
-        @tailwind base;
-        @tailwind components;
-        @tailwind utilities;
-
-        @layer utilities {
-          @keyframes scroll-reel {
-            0% {
-              transform: translateX(0);
-            }
-            100% {
-              transform: translateX(-100%);
-            }
-          }
-
-          .animate-scroll-reel {
-            animation: scroll-reel 20s linear infinite;
-          }
-        }
-      `}</style>
-    </div>
+      <Marquee speed={50} pauseOnHover gradient={false}>
+        <div className="flex gap-8 w-full">
+          {testimonials.map((testimonial, index) => (
+            <div
+              key={index}
+              className={twMerge(
+                'relative bg-white flex flex-col justify-center rounded-2xl p-6 text-black shadow-md',
+                'w-[440px] h-[200px] sm:h-[220px] md:h-[250px] overflow-hidden break-words',
+                testimonial.styles?.wrapper,
+                index === testimonials.length - 1 ? 'mr-8' : ''
+              )}>
+              <p className="text-lg font-semibold mb-2 text-left">{testimonial.comment}</p>
+              <span className="font-bold text-blue-600 mt-4 text-left">{testimonial.name}</span>
+              <span className="text-gray-500 text-sm text-left">{testimonial.position}</span>
+            </div>
+          ))}
+        </div>
+      </Marquee>
+    </>
   );
 };