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": "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": {
+      "wrapper": "from-black/30 to-red-200"
+    }
+  },
+  {
+    "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": {
+      "wrapper": "from-black/30 to-red-200"
+    }
+  },
+  {
+    "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": {
+      "wrapper": "from-black/30 to-red-200"
+    }
+  },
+  {
+    "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": {
+      "wrapper": "from-black/30 to-red-200"
+    }
+  }
+]

apps/2024/src/components/landing/testimonials/index.jsx

@@ -0,0 +1,34 @@
+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-10 lg:px-24 gap-y-10">
+        <SectionBadge id="testimonials">Testimonials</SectionBadge>
+      </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>
+    </>
+  );
+};
+
+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 />