diff --git a/src/components/home/Partners.tsx b/src/components/home/Partners.tsx index b7569903fb..f7b20f8312 100644 --- a/src/components/home/Partners.tsx +++ b/src/components/home/Partners.tsx @@ -1,38 +1,18 @@ -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 ( -
-
- - Deploy Anywhere -
- -
- {partnerImages.map((partner, index) => ( -
- {partner.name} -
- ))} -
-
-
- {partnerImages.map((partner, index) => ( -
- {partner.name} -
- ))} -
-
+ ) } -export default Partners +export default Partners \ No newline at end of file diff --git a/src/components/home/Testimonials.tsx b/src/components/home/Testimonials.tsx index abfe07de19..82efa7d5db 100644 --- a/src/components/home/Testimonials.tsx +++ b/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", @@ -47,6 +49,10 @@ const Testimonials = () => { /> ))} + ) } diff --git a/src/components/home/TrustedByMarquee.tsx b/src/components/home/TrustedByMarquee.tsx new file mode 100644 index 0000000000..573aec75d7 --- /dev/null +++ b/src/components/home/TrustedByMarquee.tsx @@ -0,0 +1,69 @@ +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 = ({ + 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) => ( +
+ {partner.link ? ( + + {partner.name} + + ) : ( + {partner.name} + )} +
+ ); + + return ( +
+
+ + {title} +
+ + +
+ {logos.map(renderLogo)} +
+
+ +
+ {logos.map(renderLogo)} +
+
+ ) +} + +export default TrustedByMarquee \ No newline at end of file diff --git a/src/constants/index.tsx b/src/constants/index.tsx index a723feb343..8b665e11f8 100644 --- a/src/constants/index.tsx +++ b/src/constants/index.tsx @@ -17,6 +17,15 @@ 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", diff --git a/static/icons/companies/aftership.png b/static/icons/companies/aftership.png new file mode 100644 index 0000000000..0b3dc12c80 Binary files /dev/null and b/static/icons/companies/aftership.png differ diff --git a/static/icons/companies/dream11.png b/static/icons/companies/dream11.png new file mode 100644 index 0000000000..8c72536e99 Binary files /dev/null and b/static/icons/companies/dream11.png differ diff --git a/static/icons/companies/optum.png b/static/icons/companies/optum.png new file mode 100644 index 0000000000..c897077798 Binary files /dev/null and b/static/icons/companies/optum.png differ diff --git a/static/icons/companies/sinch.png b/static/icons/companies/sinch.png new file mode 100644 index 0000000000..88326824ad Binary files /dev/null and b/static/icons/companies/sinch.png differ