From e8fb028774ebfd401f8bee116160c69001674b74 Mon Sep 17 00:00:00 2001 From: Md Sahadat Sk <98450585+sahadat-sk@users.noreply.github.com> Date: Wed, 27 Mar 2024 22:37:34 +0530 Subject: [PATCH] refactor: testimonials section (#9) * refactor: testimonials section Signed-off-by: sahadat-sk * remove: markers of GSAP Signed-off-by: sahadat-sk * fix: backround accroding to color scheme in author description Signed-off-by: sahadat-sk * fix: scroll trigger when the section starts to show Signed-off-by: sahadat-sk * fix: reduce the end of scroll trigger Signed-off-by: sahadat-sk * refactor: background of testimonial section Signed-off-by: sahadat-sk * add: package.json and package-lock.json Signed-off-by: sahadat-sk * refactor: testimonials between different sections Signed-off-by: sahadat-sk * refactor: text color according to keploy color scheme Signed-off-by: sahadat-sk * fix: linting changes Signed-off-by: sahadat-sk * refactor: container over company name and position with left to right animation Signed-off-by: sahadat-sk * refactor: change container background to gradient Signed-off-by: sahadat-sk --------- Signed-off-by: sahadat-sk --- app/(default)/page.tsx | 39 ++++++++- components/testimonial.tsx | 77 +++++++++++++++++ components/testimonials.tsx | 165 ------------------------------------ 3 files changed, 114 insertions(+), 167 deletions(-) create mode 100644 components/testimonial.tsx delete mode 100644 components/testimonials.tsx diff --git a/app/(default)/page.tsx b/app/(default)/page.tsx index a4c08c74..404886e6 100644 --- a/app/(default)/page.tsx +++ b/app/(default)/page.tsx @@ -8,11 +8,32 @@ 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 ( <> @@ -20,7 +41,20 @@ export default function Home() { - + + + + @@ -28,3 +62,4 @@ export default function Home() { ) } + diff --git a/components/testimonial.tsx b/components/testimonial.tsx new file mode 100644 index 00000000..7a6bd24c --- /dev/null +++ b/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 ( +
+

+ " + {content.split("").map((character, index) => { + if (character) { + return ( + + {character} + + ); + } + })} + + " +

+
+ logo +

+ {author} / {company} +

+ +
+
+
+ ); +}; +export { Testimonial }; diff --git a/components/testimonials.tsx b/components/testimonials.tsx deleted file mode 100644 index 4b2e3249..00000000 --- a/components/testimonials.tsx +++ /dev/null @@ -1,165 +0,0 @@ -"use client"; -import Image from "next/image"; -import MarutiLogo from "@/public/images/users/Logo_for_Maruti_Suzuki.svg"; -import NutanixLogo from "@/public/images/users/Nutanix_Logo.svg"; -import { Carousel } from "react-responsive-carousel"; -import "react-responsive-carousel/lib/styles/carousel.min.css"; -import { useState } from "react"; - -const testimonialData = [ - { - image1: MarutiLogo, - content1: - "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.", - author1: "Executive Member", - company1: "@Maruti Suzuki", - }, - { - image1: NutanixLogo, - content1: "Makes it easy to unit test my complex systems with realistic test data.", - author1: "Staff Engineer", - company1: "@Nutanix", - }, - // Add more testimonials as needed -]; - -//Mobile view array - -const testimonialDataMobile = [ - { - 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 Testimonials() { - const [index, setIndex] = useState(0); - - return ( -
- {/* Illustration behind content */} - - -
-
-
- setIndex(newIndex)} - autoPlay={true} - interval={2000} - infiniteLoop={true} - > - {testimonialDataMobile.map((testimonial, index) => ( -
-
-
- {/* (testimonial content) */} -
- Testimonial image -
-
- {testimonial.content} -
- - {testimonial.author} - -
- {testimonial.company} -
-
-
-
- ))} - -
-
-
- - {/*
*/} - {/*
*/} - - {/* /!* Testimonials *!/*/} - {/*
*/} - {/*
*/} - - {/* /!* Testimonial *!/*/} - {/*
*/} - {/*
*/} - {/* */} - {/* Maruti Suzuki Testimonial*/} - {/*
*/} - {/*
*/} - {/* “ 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 “*/} - {/*
*/} - {/* Executive Member*/} - {/*
@Maruti Suzuki
*/} - {/*
*/} - {/*
*/} - {/*
*/} - - {/*
*/} - {/*
*/} -
- ); -}