refactor: testimonials section (#9)

* refactor: testimonials section

Signed-off-by: sahadat-sk <[email protected]>

* remove: markers of GSAP

Signed-off-by: sahadat-sk <[email protected]>

* fix: backround accroding to color scheme in author description

Signed-off-by: sahadat-sk <[email protected]>

* fix: scroll trigger when the section starts to show

Signed-off-by: sahadat-sk <[email protected]>

* fix: reduce the end of scroll trigger

Signed-off-by: sahadat-sk <[email protected]>

* refactor: background of testimonial section

Signed-off-by: sahadat-sk <[email protected]>

* add: package.json and package-lock.json

Signed-off-by: sahadat-sk <[email protected]>

* refactor: testimonials between different sections

Signed-off-by: sahadat-sk <[email protected]>

* refactor: text color according to keploy color scheme

Signed-off-by: sahadat-sk <[email protected]>

* fix: linting changes

Signed-off-by: sahadat-sk <[email protected]>

* refactor: container over company name and position with left to right animation

Signed-off-by: sahadat-sk <[email protected]>

* refactor: change container background to gradient

Signed-off-by: sahadat-sk <[email protected]>

---------

Signed-off-by: sahadat-sk <[email protected]>

app/(default)/page.tsx

@@ -8,23 +8,58 @@ export const metadata = {
 import Hero from '@/components/hero'
 import Features from '@/components/features'
 import ProblemBlocks from '@/components/problem-blocks'
-import Testimonials from '@/components/testimonials'
 import Newsletter from '@/components/newsletter'
 import Language from "@/components/language";
 import Community from "@/components/community";
 
+import MarutiLogo from "@/public/images/users/Logo_for_Maruti_Suzuki.svg";
+import NutanixLogo from "@/public/images/users/Nutanix_Logo.svg";
+import { Testimonial } from "@/components/testimonial";
+
+const testimonialData = [
+  {
+    image: MarutiLogo,
+    content:
+      "Our recent collaboration with Keploy was truly remarkable. Keploy team provided exceptional support and remained highly proactive throughout the entire experience. Keploy platform has added business value to Maruti Suzuki.",
+    author: "Executive Member",
+    company: "@Maruti Suzuki",
+  },
+  {
+    image: NutanixLogo,
+    content:
+      "Makes it easy to unit test my complex systems with realistic test data.",
+    author: "Staff Engineer",
+    company: "@Nutanix",
+  },
+  // Add more testimonials as needed
+];
+
 export default function Home() {
   return (
     <>
         <Hero />
         <ProblemBlocks />
         <Features />
         <Community/>
-        <Testimonials />
+
+        <Testimonial
+          content={testimonialData[0].content}
+          author={testimonialData[0].author}
+          company={testimonialData[0].company}
+          image={testimonialData[0].image}
+        />
+        <Community />
+        <Testimonial
+          content={testimonialData[1].content}
+          author={testimonialData[1].author}
+          company={testimonialData[1].company}
+          image={testimonialData[1].image}
+        />
         <Language />
         <Newsletter />
 
         <Footer />
     </>
   )
 }
+

components/testimonial.tsx

@@ -0,0 +1,77 @@
+"use client";
+import Image from "next/image";
+import { useRef } from "react";
+import gsap from "gsap";
+import { useGSAP } from "@gsap/react";
+import { ScrollTrigger } from "gsap/all";
+import _ScrollTrigger from "gsap/ScrollTrigger";
+gsap.registerPlugin(useGSAP);
+gsap.registerPlugin(ScrollTrigger);
+
+const Testimonial = ({
+  content,
+  author,
+  company,
+  image,
+}: {
+  content: string;
+  author: string;
+  company: string;
+  image: any;
+}) => {
+  const container = useRef(null);
+  useGSAP(
+    () => {
+      gsap.to(".quote-character", {
+        scrollTrigger: {
+          trigger: ".quote-container",
+          scrub: 1,
+          start: "top+=200 bottom",
+          end: "bottom+=300 bottom",
+        },
+        opacity: 1,
+        stagger: 1,
+        duration: 3,
+      });
+      gsap.to(".gradient-container", {
+        scrollTrigger: {
+          trigger: ".gradient-container",
+          scrub: 1,
+          start: "bottom+=20 bottom",
+          end: "bottom+=300 bottom",
+        },
+        width: "100%",
+        duration: 4,
+      });
+    },
+    { scope: container }
+  );
+
+  return (
+    <div ref={container} className="max-w-6xl px-4 mx-auto my-16">
+      <p className="text-lg md:text-2xl quote-container text-secondary-300">
+        <span className="quote-character opacity-[0.2]">"</span>
+        {content.split("").map((character, index) => {
+          if (character) {
+            return (
+              <span key={index} className="quote-character opacity-[0.2]">
+                {character}
+              </span>
+            );
+          }
+        })}
+
+        <span className="quote-character opacity-[0.2]">"</span>
+      </p>
+      <div className="relative flex items-center gap-4 px-4 py-4 mt-8 text-sm rounded-lg md:text-xl ">
+        <Image src={image} alt="logo" className="w-auto h-4" />
+        <p className="font-bold text-accent-200">
+          {author} <span className="text-lg md:text-2xl">/</span> {company}
+        </p>
+
+        <div className="absolute top-0 bottom-0 left-0 w-0 rounded-md bg-gradient-to-r from-primary-200 -z-1 gradient-container"></div>
+      </div>
+    </div>
+  );
+};
+export { Testimonial };