Skip to content

Commit

Permalink
fix: add users logo
Browse files Browse the repository at this point in the history
  • Loading branch information
amitksingh1490 committed Dec 10, 2024
1 parent af064cf commit 7ac83df
Show file tree
Hide file tree
Showing 8 changed files with 93 additions and 29 deletions.
36 changes: 8 additions & 28 deletions src/components/home/Partners.tsx
Original file line number Diff line number Diff line change
@@ -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 (
<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>
<TrustedByMarquee
logos={partnerImages}
onClick={handleClick}
/>
)
}

export default Partners
export default Partners
8 changes: 7 additions & 1 deletion src/components/home/Testimonials.tsx
Original file line number Diff line number Diff line change
@@ -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",
Expand Down Expand Up @@ -47,6 +49,10 @@ const Testimonials = () => {
/>
))}
</div>
<TrustedByMarquee
title="Trusted by Developers at"
logos={companies}
/>
</Section>
)
}
Expand Down
69 changes: 69 additions & 0 deletions src/components/home/TrustedByMarquee.tsx
Original file line number Diff line number Diff line change
@@ -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<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
9 changes: 9 additions & 0 deletions src/constants/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
Binary file added static/icons/companies/aftership.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added static/icons/companies/dream11.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added static/icons/companies/optum.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added static/icons/companies/sinch.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 7ac83df

Please sign in to comment.