Fix: testimonials

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';

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"
+    }
+  }
+]

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;

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 />