feat: add testimonial carousel

components/Testimonial.js

@@ -1,35 +1,72 @@
-import Paragraph from "./typography/Paragraph";
+import { FaArrowLeft, FaArrowRight } from 'react-icons/fa';
+import { useState } from 'react';
+import testimonials from '../config/content/Testimonial';
+
+const TestimonialCarousel = () => {
+  const [activeIndex, setActiveIndex] = useState(0);
+  const len = testimonials.length;
+
+  const goToPrevious = () => {
+    setActiveIndex((prevIndex) => (prevIndex === 0 ? len - 1 : prevIndex - 1));
+  };
+
+  const goToNext = () => {
+    setActiveIndex((prevIndex) => (prevIndex === len - 1 ? 0 : prevIndex + 1));
+  };
+
+  const goToIndex = (index) => {
+    setActiveIndex(index);
+  };
 
-export default function Testimonial({
-  className = '',
-  text,
-  authorName,
-  authorDescription,
-  authorAvatar,
-}) {
   return (
-    <li className={`py-4 px-4 sm:px-6 md:flex md:flex-row md:py-4 md:pr-0 ${className}`}>
-      <blockquote className="mt-8 md:flex-grow md:flex md:flex-col">
-        <div className="relative text-lg leading-7 font-medium text-gray-600 md:flex-1">
-          <svg className="absolute top-0 left-0 transform -translate-y-2 h-8 w-8 text-primary-500" fill="currentColor" viewBox="0 0 32 32">
-            <path d="M9.352 4C4.456 7.456 1 13.12 1 19.36c0 5.088 3.072 8.064 6.624 8.064 3.36 0 5.856-2.688 5.856-5.856 0-3.168-2.208-5.472-5.088-5.472-.576 0-1.344.096-1.536.192.48-3.264 3.552-7.104 6.624-9.024L9.352 4zm16.512 0c-4.8 3.456-8.256 9.12-8.256 15.36 0 5.088 3.072 8.064 6.624 8.064 3.264 0 5.856-2.688 5.856-5.856 0-3.168-2.304-5.472-5.184-5.472-.576 0-1.248.096-1.44.192.48-3.264 3.456-7.104 6.528-9.024L25.864 4z" />
-          </svg>
-          <Paragraph className="relative pl-10 text-left">
-            {text}
-          </Paragraph>
-        </div>
-        <footer className="mt-6">
-          <div className="flex">
-            <figure className="flex-shrink-0 inline-flex rounded-full border-2 border-white">
-              <img className="h-12 w-12 rounded-full" src={authorAvatar} alt={authorName}/>
-            </figure>
-            <div className="ml-4 text-left">
-              <p className="text-base leading-6 font-bold text-gray-900">{authorName}</p>
-              <p className="text-base leading-6 font-medium text-primary-500">{authorDescription}</p>
+    <div className="relative flex flex-row justify-center items-center md:gap-4 overflow-x-hidden">
+      <div className="h-8 w-8 rounded-full bg-[#ddd] cursor-pointer mb-2 absolute left-0 z-10 top-1/2 transform -translate-y-1/2 opacity-50 md:opacity-100" onClick={goToPrevious}>
+        <FaArrowLeft className="mt-[20%] m-auto"/>
+      </div>
+      <div className="flex flex-col justify-center items-center">
+        <div className="relative h-[300px] w-[300px] md:w-[600px] md:h-[450px] overflow-hidden">
+          {testimonials.map((testimonial, index) => (
+            <div
+              key={index}
+              className={`flex flex-col items-center justify-center absolute bg-slate-100 shadow-md rounded-md transform transition-transform ${
+                index === activeIndex ? 'opacity-100 scale-100' : 'opacity-0 scale-90'
+              }`}
+            >
+              <div className="rounded-full h-16 w-16 md:h-32 md:w-32 overflow-hidden my-4">
+                <img src={testimonial.imgUrl} className="h-full w-full" alt={testimonial.name} />
+              </div>
+              <p className="text-[14px] lg:text-base lg:leading-6 font-bold text-gray-900 mb-2">
+                {testimonial.name}
+              </p>
+              <p className="text-[12px] lg:text-base lg:leading-6 font-medium text-primary-500 mb-2 md:mb-4">
+                {testimonial.salutation}
+              </p>
+              <p className="h-[200px] text-[12px] px-1 lg:px-6 overflow-clip md:text-lg">
+                {testimonial.text}
+              </p>
             </div>
+          ))}
+        </div>
+      <div className="flex justify-center w-[400px] mt-4">
+        {testimonials.map((testimonial, index) => (
+          <div
+            key={index}
+            className={`h-2 w-2 rounded-full mx-1 cursor-pointer ${
+              activeIndex === index ? 'bg-primary-500' : 'bg-gray-300'
+            }`}
+            onClick={() => goToIndex(index)}
+          />
+        ))}
+      </div>
+      </div>
+      <div
+            className="h-8 w-8 rounded-full bg-[#ddd] cursor-pointer mb-2 z-10 absolute right-0 top-1/2 transform -translate-y-1/2 opacity-50 md:opacity-100"
+            onClick={goToNext}
+          >
+            <FaArrowRight className="mt-[20%] m-auto"/>
           </div>
-        </footer>
-      </blockquote>
-    </li>
-  )
-}
+    </div>
+  );
+};
+
+export default TestimonialCarousel;

config/content/Testimonial.js

@@ -0,0 +1,28 @@
+const TestimonialData = [
+    {
+      imgUrl: '/img/testimonials/matt-mclarty.jpg',
+      name: 'Matt McLarty',
+      salutation: 'Global Leader of API Strategy at MuleSoft',
+      text: 'Microservices underline the need for event-based communication in distributed architectures. AsyncAPI brings the richness of the REST API ecosystem to asynchronous APIs.',
+    },
+    {
+      imgUrl: '/img/testimonials/bill-doerrfeld.jpg',
+      name: 'Bill Doerrfeld',
+      salutation: 'Editor in Chief at Nordic APIs',
+      text: 'Microservices underline the need for event-based communication in distributed architectures. AsyncAPI brings the richness of the REST API ecosystem to asynchronous APIs.',
+    },
+    {
+      imgUrl: '/img/testimonials/jonathan-schabowsky.jpg',
+      name: 'Jonathan Schabowsky',
+      salutation: 'Sr. Architect, Office of the CTO at Solace',
+      text: "Developers need to be able to quickly and consistently create event-driven applications that provide business value and react to customer needs in realtime. I can't count how many times I've heard developers ask for OpenAPI/Swagger style tools for the asynchronous and event driven world, and that is exactly what the AsyncAPI initiative is making a reality.",
+    },
+    {
+      imgUrl: '/img/testimonials/eric-horesnyi.jpg',
+      name: 'Eric Horesnyi',
+      salutation: 'CEO at Streamdata.io',
+      text: 'We’ve been focusing on event-driven APIs since 2014 and thank the AsyncAPI contributors everyday for driving the community towards common standards.',
+    },
+  ];
+
+  export default TestimonialData

package.json

@@ -79,6 +79,7 @@
     "react-dom": "^17.0.2",
     "react-ga": "^3.1.2",
     "react-gtm-module": "^2.0.11",
+    "react-icons": "^4.8.0",
     "react-scrollspy": "^3.4.2",
     "react-syntax-highlighter": "12.2.1",
     "react-text-truncate": "^0.16.0",

pages/index.js

@@ -218,39 +218,10 @@ function HomePage() {
           <SupportUs className="mt-4" showSupportBanner={false} />
         </Container>
         <Container className="text-center pb-20 mt-8" wide as="section">
-          <Heading level="h3" typeStyle="heading-lg" className="mb-4">
+          <Heading level="h3" typeStyle="heading-lg" className="mb-8">
             What the experts are saying
           </Heading>
-          <ul className="max-w-screen-xl mx-auto md:grid md:grid-cols-2 md:px-6 lg:px-8">
-            <Testimonial
-              className="md:pr-10 lg:pr-16"
-              text="Microservices underline the need for event-based communication in distributed architectures. AsyncAPI brings the richness of the REST API ecosystem to asynchronous APIs."
-              authorAvatar="/img/testimonials/matt-mclarty.jpg"
-              authorName="Matt McLarty"
-              authorDescription="Global Leader of API Strategy at MuleSoft"
-            />
-            <Testimonial
-              className="md:pl-10 lg:pl-16"
-              text="Event-driven APIs need love too! AsyncAPI brings the many benefits of a machine/human readable specification to these nuanced approaches."
-              authorAvatar="/img/testimonials/bill-doerrfeld.jpg"
-              authorName="Bill Doerrfeld"
-              authorDescription="Editor in Chief at Nordic APIs"
-            />
-            <Testimonial
-              className="md:pr-10 lg:pr-16"
-              text="Developers need to be able to quickly and consistently create event-driven applications that provide business value and react to customer needs in realtime. I can't count how many times I've heard developers ask for OpenAPI/Swagger style tools for the asynchronous and event driven world, and that is exactly what the AsyncAPI initiative is making a reality."
-              authorAvatar="/img/testimonials/jonathan-schabowsky.jpg"
-              authorName="Jonathan Schabowsky"
-              authorDescription="Sr. Architect, Office of the CTO at Solace"
-            />
-            <Testimonial
-              className="md:pl-10 lg:pl-16"
-              text="We’ve been focusing on event-driven APIs since 2014 and thank the AsyncAPI contributors everyday for driving the community towards common standards."
-              authorAvatar="/img/testimonials/eric-horesnyi.jpg"
-              authorName="Eric Horesnyi"
-              authorDescription="CEO at Streamdata.io"
-            />
-          </ul>
+          <Testimonial />
         </Container>
       </main>
     </>