fix: add users logo

src/components/home/Partners.tsx

@@ -1,38 +1,13 @@
-import React from "react"
-import Marquee from "react-fast-marquee"
-
-import GreaterThanUnderscoreIcon from "@site/static/icons/basic/gt-undescore-gray.svg"
+import TrustedByMarquee from "@site/src/components/home/TrustedByMarquee"
 import {partnerImages} from "@site/src/constants"
+import React from "react"
 
-const Partners = (): JSX.Element => {
+const Partners = () => {
   const handleClick = () => {
     window.open("/docs/deploy-graphql-github-actions/", "_blank")
   }
 
-  return (
-    <section className="px-10 md:px-0 cursor-pointer" onClick={handleClick}>
-      <div className="text-content-small font-bold sm:text-title-tiny lg:text-title-small text-tailCall-light-500 text-center space-x-1">
-        <GreaterThanUnderscoreIcon className="h-4 w-6" />
-        <span>Deploy Anywhere</span>
-      </div>
-      <Marquee autoFill>
-        <div className="hidden sm:flex space-x-SPACE_16 mt-SPACE_10 overflow-hidden">
-          {partnerImages.map((partner, index) => (
-            <div key={index} className="h-20">
-              <img src={partner.logo} alt={partner.name} className="max-w-[152px]" />
-            </div>
-          ))}
-        </div>
-      </Marquee>
-      <div className="sm:hidden flex items-center justify-around flex-wrap mt-SPACE_06 space-y-SPACE_02">
-        {partnerImages.map((partner, index) => (
-          <div key={index} className="h-20">
-            <img src={partner.logo} alt={partner.name} className="max-w-[152px]" />
-          </div>
-        ))}
-      </div>
-    </section>
-  )
+  return <TrustedByMarquee logos={partnerImages} onClick={handleClick} />
 }
 
 export default Partners

src/components/home/Testimonials.tsx

@@ -1,8 +1,10 @@
 import React from "react"
 import Heading from "@theme/Heading"
 import CustomerFeedbackCard from "./CustomerFeedbackCard"
-import {testimonials} from "@site/src/constants"
+import {companies, testimonials} from "@site/src/constants"
 import Section from "../shared/Section"
+import Partners from "@site/src/components/home/Partners"
+import TrustedByMarquee from "@site/src/components/home/TrustedByMarquee"
 
 export enum TestimonialDisplay {
   Hide = "Hide",
@@ -34,6 +36,7 @@ const Testimonials = () => {
           <span className="bg-tailCall-yellow rounded-lg text-black px-SPACE_01 ml-SPACE_02">love us!</span>
         </Heading>
       </div>
+      <TrustedByMarquee title="Trusted by developers at" logos={companies} />
       <div className="flex flex-col space-y-SPACE_10 md:flex-row md:space-x-SPACE_02 md:space-y-0 mt-SPACE_18">
         {testimonials.map((feedback) => (
           <CustomerFeedbackCard

src/components/home/TrustedByMarquee.tsx

@@ -0,0 +1,62 @@
+import React from "react"
+import Marquee from "react-fast-marquee"
+import GreaterThanUnderscoreIcon from "@site/static/icons/basic/gt-undescore-gray.svg"
+
+interface LogoItem {
+  logo: string
+  name: string
+  link?: string
+}
+
+interface TrustedByMarqueeProps {
+  title?: string
+  logos: LogoItem[]
+  onClick?: () => void
+  titleClassName?: string
+  desktopClassName?: string
+  mobileClassName?: string
+}
+
+const TrustedByMarquee: React.FC<TrustedByMarqueeProps> = ({
+  title = "Deploy Anywhere",
+  logos,
+  onClick,
+  titleClassName = "text-content-small font-bold sm:text-title-tiny lg:text-title-small text-tailCall-light-500 text-center space-x-1",
+  desktopClassName = "hidden sm:flex space-x-SPACE_16 mt-SPACE_10 overflow-hidden",
+  mobileClassName = "sm:hidden flex items-center justify-around flex-wrap mt-SPACE_06 space-y-SPACE_02",
+}) => {
+  const handleClick = () => {
+    if (onClick) {
+      onClick()
+    }
+  }
+
+  const renderLogo = (partner: LogoItem) => (
+    <div key={partner.name} className="h-20">
+      {partner.link ? (
+        <a href={partner.link} target="_blank" rel="noopener noreferrer">
+          <img src={partner.logo} alt={partner.name} className="max-w-[152px]" />
+        </a>
+      ) : (
+        <img src={partner.logo} alt={partner.name} className="max-w-[152px]" />
+      )}
+    </div>
+  )
+
+  return (
+    <section className={`px-10 md:px-0 ${onClick ? "cursor-pointer" : ""}`} onClick={handleClick}>
+      <div className={titleClassName}>
+        <GreaterThanUnderscoreIcon className="h-4 w-6" />
+        <span>{title}</span>
+      </div>
+
+      <Marquee autoFill>
+        <div className={desktopClassName}>{logos.map(renderLogo)}</div>
+      </Marquee>
+
+      <div className={mobileClassName}>{logos.map(renderLogo)}</div>
+    </section>
+  )
+}
+
+export default TrustedByMarquee

src/constants/index.tsx

@@ -17,6 +17,13 @@ export const algoliaConstants = {
   searchModalPlaceholder: "What do you want to know about graphql ?",
 }
 
+export const companies: PartnerImage[] = [
+  {name: "Dream11", logo: require("@site/static/icons/companies/dream11.png").default},
+  {name: "AfterShip", logo: require("@site/static/icons/companies/aftership.png").default},
+  {name: "Optum", logo: require("@site/static/icons/companies/optum.png").default},
+  {name: "Sinch", logo: require("@site/static/icons/companies/sinch.png").default},
+]
+
 export const partnerImages: PartnerImage[] = [
   {
     name: "Digital Ocean",