diff --git a/src/components/SponsorIcons/SponsorIcons.module.scss b/src/components/SponsorIcons/SponsorIcons.module.scss new file mode 100644 index 00000000..e89e114d --- /dev/null +++ b/src/components/SponsorIcons/SponsorIcons.module.scss @@ -0,0 +1,17 @@ +.logosList { + list-style: none; + display: flex; + align-content: center; + align-items: center; + gap: 12px; + max-width: 100%; + overflow-x: hidden; + padding: 0; + margin: 0; + color: var(--ifm-font-color-base); + + img { + max-width: 30px; + max-height: 30px; + } +} diff --git a/src/components/SponsorIcons/SponsorIcons.tsx b/src/components/SponsorIcons/SponsorIcons.tsx new file mode 100644 index 00000000..b4817c3e --- /dev/null +++ b/src/components/SponsorIcons/SponsorIcons.tsx @@ -0,0 +1,27 @@ +import React, { FC } from 'react' +import Link from '@docusaurus/Link' +import styles from './SponsorIcons.module.scss' + +interface Sponsor { + name: string + logo: string + url: string +} + +interface SponsorIconsProps { + sponsors: ReadonlyArray +} + +export const SponsorIcons: FC = ({ sponsors }) => { + return ( + + ) +} diff --git a/src/components/SponsorIcons/index.ts b/src/components/SponsorIcons/index.ts new file mode 100644 index 00000000..1f429398 --- /dev/null +++ b/src/components/SponsorIcons/index.ts @@ -0,0 +1 @@ +export * from './SponsorIcons' diff --git a/src/components/SponsorNames/SponsorNames.module.scss b/src/components/SponsorNames/SponsorNames.module.scss new file mode 100644 index 00000000..71942559 --- /dev/null +++ b/src/components/SponsorNames/SponsorNames.module.scss @@ -0,0 +1,13 @@ +.list { + list-style: none; + padding: 0; + margin: 0; +} + +.sponsor { + color: inherit; +} + +.sponsorLogo { + border-radius: 0; +} diff --git a/src/components/SponsorNames/SponsorNames.tsx b/src/components/SponsorNames/SponsorNames.tsx new file mode 100644 index 00000000..a769ae49 --- /dev/null +++ b/src/components/SponsorNames/SponsorNames.tsx @@ -0,0 +1,38 @@ +import React, { FC } from 'react' +import Link from '@docusaurus/Link' +import styles from './SponsorNames.module.scss' + +interface Sponsor { + name: string + logo: string + url: string + blurb?: string +} + +interface SponsorNamesProps { + sponsors: ReadonlyArray + size?: 'sm' | 'md' | 'lg' | 'xl' +} + +export const SponsorNames: FC = ({ sponsors, size = 'lg' }) => { + if (sponsors.length === 0) return null + return ( +
    + {sponsors.map((sponsor) => ( +
  • + + {`${sponsor.name} +
    +
    {sponsor.name}
    + {sponsor.blurb && {sponsor.blurb}} +
    + +
    • + ))} +
+ ) +} diff --git a/src/components/SponsorNames/index.ts b/src/components/SponsorNames/index.ts new file mode 100644 index 00000000..cc88f3f8 --- /dev/null +++ b/src/components/SponsorNames/index.ts @@ -0,0 +1 @@ +export * from './SponsorNames' diff --git a/src/components/SponsorTiers/SponsorTiers.module.scss b/src/components/SponsorTiers/SponsorTiers.module.scss new file mode 100644 index 00000000..574a1ce6 --- /dev/null +++ b/src/components/SponsorTiers/SponsorTiers.module.scss @@ -0,0 +1,41 @@ +.list { + list-style: none; + padding: 0; + margin: 0; +} + +.tier { + width: 20%; +} + +.card { + display: flex; + flex-direction: column; + height: 100%; + box-shadow: 0 1.5px 3px 0 rgb(0 0 0 / 15%); + border: 1px solid var(--ifm-color-emphasis-200); +} + +.amount { + display: block; + font-weight: 300; + font-size: 2.5rem; + line-height: 1em; +} + +.frequency { + display: block; + color: var(--ifm-color-secondary-darkest); + font-size: 0.875rem; +} + +.blurb { + flex: 1; +} + +// breakpoint for infima grid dropping down to single column +@media all and (max-width: 996px) { + .tier { + width: 100%; + } +} diff --git a/src/components/SponsorTiers/SponsorTiers.tsx b/src/components/SponsorTiers/SponsorTiers.tsx new file mode 100644 index 00000000..f45b1006 --- /dev/null +++ b/src/components/SponsorTiers/SponsorTiers.tsx @@ -0,0 +1,37 @@ +import React, { FC } from 'react' +import Link from '@docusaurus/Link' +import clsx from 'clsx' +import styles from './SponsorTiers.module.scss' +import tiers from '@site/src/data/sponsor-tiers.json' + +const numberFormat = new Intl.NumberFormat('en', { + style: 'currency', + currency: 'USD', + maximumFractionDigits: 0, +}) + +export const SponsorTiers: FC = () => { + return ( +
    + {tiers.map((tier) => ( +
  1. +
    +
    +

    {tier.title}

    +
    +
    + {numberFormat.format(tier.amount)} + {tier.from && 'or above, '}monthly +

    {tier.description}

    +
    +
    + + Sponsor + +
    +
    +
    2. + ))} +
+ ) +} diff --git a/src/components/SponsorTiers/index.ts b/src/components/SponsorTiers/index.ts new file mode 100644 index 00000000..53156eae --- /dev/null +++ b/src/components/SponsorTiers/index.ts @@ -0,0 +1 @@ +export * from './SponsorTiers' diff --git a/src/components/UsedBy/UsedBy.module.scss b/src/components/UsedBy/UsedBy.module.scss deleted file mode 100644 index 8044d40e..00000000 --- a/src/components/UsedBy/UsedBy.module.scss +++ /dev/null @@ -1,31 +0,0 @@ -.strapLine { - text-align: center; -} - -.logosList { - list-style: none; - display: flex; - align-content: center; - align-items: center; - justify-content: center; - gap: 24px; - max-width: 100%; - overflow-x: hidden; - color: var(--ifm-font-color-base); - - img { - max-width: 120px; - max-height: 50px; - filter: #{'grayscale()'}; - opacity: 0.5; - - [data-theme='dark'] & { - filter: #{'grayscale() invert()'}; - } - - @media all and (max-width: 600px) { - max-width: 80px; - max-height: 30px; - } - } -} diff --git a/src/components/UsedBy/UsedBy.tsx b/src/components/UsedBy/UsedBy.tsx deleted file mode 100644 index 796dad18..00000000 --- a/src/components/UsedBy/UsedBy.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import React, { FC } from 'react' -import styles from './UsedBy.module.scss' - -// array of pairs being [name, imageUrl] respectively -const LOGOS: [string, string][] = [] as const - -export const UsedBy: FC = () => { - return ( - <> -

Loved by teams everywhere

-
    - {LOGOS.map(([alt, filename]) => ( -
  • - {alt} -
    • - ))} -
- - ) -} diff --git a/src/components/UsedBy/index.ts b/src/components/UsedBy/index.ts deleted file mode 100644 index f9d1bc6a..00000000 --- a/src/components/UsedBy/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './UsedBy' diff --git a/src/data/in-kind-sponsors.json b/src/data/in-kind-sponsors.json new file mode 100644 index 00000000..a7e80787 --- /dev/null +++ b/src/data/in-kind-sponsors.json @@ -0,0 +1,27 @@ +[ + { + "name": "1Password", + "logo": "/img/sponsors/1password.svg", + "url": "https://1password.com" + }, + { + "name": "Algolia", + "logo": "/img/sponsors/algolia.svg", + "url": "https://www.algolia.com" + }, + { + "name": "Buttondown", + "logo": "/img/sponsors/buttondown.svg", + "url": "https://buttondown.com" + }, + { + "name": "GitHub", + "logo": "/img/sponsors/github.svg", + "url": "https://github.com" + }, + { + "name": "Netlify", + "logo": "/img/sponsors/netlify.svg", + "url": "https://www.netlify.com" + } +] diff --git a/src/data/sponsor-tiers.json b/src/data/sponsor-tiers.json new file mode 100644 index 00000000..e8ab9091 --- /dev/null +++ b/src/data/sponsor-tiers.json @@ -0,0 +1,37 @@ +[ + { + "title": "Individual", + "description": "For individuals who want to support the project", + "amount": 5, + "url": "https://opencollective.com/cucumber/contribute/monthly-backers-182/checkout", + "from": true + }, + { + "title": "Bronze", + "description": "Support the contributors with a monthly donation and, if you want, get your name and a small logo on the Cucumber website with a link to your site.", + "amount": 100, + "url": "https://opencollective.com/cucumber/contribute/bronze-sponsors-181/checkout", + "from": false + }, + { + "title": "Silver", + "description": "Support the contributors with a monthly donation and, if you want, get your name and a medium logo on the Cucumber website with a link to your site.", + "amount": 500, + "url": "https://opencollective.com/cucumber/contribute/gold-sponsors-3224/checkout", + "from": false + }, + { + "title": "Gold", + "description": "Support the contributors with a monthly donation and, if you want, get your name, large logo, and subtitle on the Cucumber website with a link to your site.", + "amount": 1000, + "url": "https://opencollective.com/cucumber/contribute/gold-82673/checkout", + "from": false + }, + { + "title": "Platinum", + "description": "Support the contributors with a monthly donation and, if you want, get your name, large logo, subtitle and short paragraph on the Cucumber website with a link to your site.", + "amount": 2500, + "url": "https://opencollective.com/cucumber/contribute/platinum-82674/checkout", + "from": false + } +] diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 4e9afefa..9720135d 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -9,9 +9,6 @@ export default function Home() {
- {/*
*/} - {/* */} - {/*
*/}
) diff --git a/src/pages/sponsors.module.scss b/src/pages/sponsors.module.scss index 5207d762..53a0b2ab 100644 --- a/src/pages/sponsors.module.scss +++ b/src/pages/sponsors.module.scss @@ -1,54 +1,4 @@ -.list { - list-style: none; - padding: 0; - margin: 0; -} - -.tier { - width: 20%; -} - -.card { - display: flex; - flex-direction: column; - height: 100%; - box-shadow: 0 1.5px 3px 0 rgb(0 0 0 / 15%); - border: 1px solid var(--ifm-color-emphasis-200); -} - -.amount { - display: block; - font-weight: 300; - font-size: 2.5rem; - line-height: 1em; -} - -.frequency { - display: block; - color: var(--ifm-color-secondary-darkest); - font-size: 0.875rem; -} - -.blurb { - flex: 1; -} - -// breakpoint for infima grid dropping down to single column -@media all and (max-width: 996px) { - .tier { - width: 100%; - } -} - .reasonIllustration { max-width: 80%; max-height: 150px; } - -.sponsor { - color: inherit; -} - -.sponsorLogo { - border-radius: 0; -} diff --git a/src/pages/sponsors.tsx b/src/pages/sponsors.tsx index af70004a..2ecbf465 100644 --- a/src/pages/sponsors.tsx +++ b/src/pages/sponsors.tsx @@ -1,4 +1,4 @@ -import React, { FC } from 'react' +import React from 'react' import Layout from '@theme/Layout' import Link from '@docusaurus/Link' import styles from './sponsors.module.scss' @@ -8,118 +8,11 @@ import { Hero } from '@site/src/components/Hero' import goldSponsors from '@site/src/data/gold-sponsors.json' import silverSponsors from '@site/src/data/silver-sponsors.json' import bronzeSponsors from '@site/src/data/bronze-sponsors.json' +import inKindSponsors from '@site/src/data/in-kind-sponsors.json' import { DownloadCounter } from '@site/src/components/DownloadCounter' - -interface Sponsor { - name: string - logo: string - url: string - blurb?: string -} - -const numberFormat = new Intl.NumberFormat('en', { - style: 'currency', - currency: 'USD', - maximumFractionDigits: 0, -}) - -const tiers = [ - { - title: 'Individual', - description: 'For individuals who want to support the project', - amount: 5, - url: 'https://opencollective.com/cucumber/contribute/monthly-backers-182/checkout', - from: true, - }, - { - title: 'Bronze', - description: - 'Support the contributors with a monthly donation and, if you want, get your name and a small logo on the Cucumber website with a link to your site.', - amount: 100, - url: 'https://opencollective.com/cucumber/contribute/bronze-sponsors-181/checkout', - from: false, - }, - { - title: 'Silver', - description: - 'Support the contributors with a monthly donation and, if you want, get your name and a medium logo on the Cucumber website with a link to your site.', - amount: 500, - url: 'https://opencollective.com/cucumber/contribute/gold-sponsors-3224/checkout', - from: false, - }, - { - title: 'Gold', - description: - 'Support the contributors with a monthly donation and, if you want, get your name, large logo, and subtitle on the Cucumber website with a link to your site.', - amount: 1000, - url: 'https://opencollective.com/cucumber/contribute/gold-82673/checkout', - from: false, - }, - { - title: 'Platinum', - description: - 'Support the contributors with a monthly donation and, if you want, get your name, large logo, subtitle and short paragraph on the Cucumber website with a link to your site.', - amount: 2500, - url: 'https://opencollective.com/cucumber/contribute/platinum-82674/checkout', - from: false, - }, -] as const - -const Tiers: FC = () => { - return ( -
    - {tiers.map((tier) => { - return ( -
  1. -
    -
    -

    {tier.title}

    -
    -
    - {numberFormat.format(tier.amount)} - {tier.from && 'or above, '}monthly -

    {tier.description}

    -
    -
    - - Sponsor - -
    -
    -
    2. - ) - })} -
- ) -} - -interface SponsorsListProps { - sponsors: Sponsor[] - size?: 'sm' | 'md' | 'lg' | 'xl' -} - -const SponsorsList: FC = ({ sponsors, size = 'lg' }) => { - if (sponsors.length === 0) return null - return ( -
    - {sponsors.map((sponsor) => ( -
  • - - {`${sponsor.name} -
    -
    {sponsor.name}
    - {sponsor.blurb && {sponsor.blurb}} -
    - -
    • - ))} -
- ) -} +import { SponsorIcons } from '@site/src/components/SponsorIcons' +import { SponsorNames } from '@site/src/components/SponsorNames' +import { SponsorTiers } from '@site/src/components/SponsorTiers' export default function Sponsors() { return ( @@ -168,19 +61,29 @@ export default function Sponsors() { {goldSponsors.length > 0 && ( <>

Gold Sponsors

- + )} {silverSponsors.length > 0 && ( <>

Silver Sponsors

- + )} {bronzeSponsors.length > 0 && ( <>

Bronze Sponsors

- + + + )} + {inKindSponsors.length > 0 && ( + <> +

In-Kind Sponsors

+

+ Our thanks to these companies for supporting open source with free/subsidised + plans. +

+ )} @@ -191,7 +94,7 @@ export default function Sponsors() {

If you can, we'd love for you to commit a regular monthly amount to support Cucumber.

- +

Or, you can always make a{' '} diff --git a/static/img/sponsors/1password.svg b/static/img/sponsors/1password.svg new file mode 100644 index 00000000..0f591951 --- /dev/null +++ b/static/img/sponsors/1password.svg @@ -0,0 +1,3 @@ + + + diff --git a/static/img/sponsors/algolia.svg b/static/img/sponsors/algolia.svg new file mode 100644 index 00000000..e8062e29 --- /dev/null +++ b/static/img/sponsors/algolia.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/img/sponsors/buttondown.svg b/static/img/sponsors/buttondown.svg new file mode 100644 index 00000000..e8d1744e --- /dev/null +++ b/static/img/sponsors/buttondown.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/static/img/sponsors/github.svg b/static/img/sponsors/github.svg new file mode 100755 index 00000000..4f46bf35 --- /dev/null +++ b/static/img/sponsors/github.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/static/img/sponsors/netlify.svg b/static/img/sponsors/netlify.svg new file mode 100644 index 00000000..ec486dae --- /dev/null +++ b/static/img/sponsors/netlify.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + +