Include thanks to in-kind sponsors

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;
+  }
+}

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<Sponsor>
+}
+
+export const SponsorIcons: FC<SponsorIconsProps> = ({ sponsors }) => {
+  return (
+    <ul className={styles.logosList}>
+      {sponsors.map((sponsor) => (
+        <li key={sponsor.name}>
+          <Link href={sponsor.url} rel="noopener noreferrer">
+            <img alt={`${sponsor.name} logo`} src={sponsor.logo} />
+          </Link>
+        </li>
+      ))}
+    </ul>
+  )
+}

src/components/SponsorIcons/index.ts

@@ -0,0 +1 @@
+export * from './SponsorIcons'

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;
+}

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<Sponsor>
+  size?: 'sm' | 'md' | 'lg' | 'xl'
+}
+
+export const SponsorNames: FC<SponsorNamesProps> = ({ sponsors, size = 'lg' }) => {
+  if (sponsors.length === 0) return null
+  return (
+    <ul className={styles.list}>
+      {sponsors.map((sponsor) => (
+        <li key={sponsor.name} className="margin-bottom--md">
+          <Link href={sponsor.url} rel="noopener noreferrer" className={`avatar ${styles.sponsor}`}>
+            <img
+              className={`avatar__photo avatar__photo--${size} ${styles.sponsorLogo}`}
+              src={sponsor.logo}
+              alt={`${sponsor.name} logo`}
+            />
+            <div className="avatar__intro">
+              <div className="avatar__name">{sponsor.name}</div>
+              {sponsor.blurb && <small className="avatar__subtitle">{sponsor.blurb}</small>}
+            </div>
+          </Link>
+        </li>
+      ))}
+    </ul>
+  )
+}

src/components/SponsorNames/index.ts

@@ -0,0 +1 @@
+export * from './SponsorNames'

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%;
+  }
+}

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 (
+    <ol className={clsx('row', styles.list)}>
+      {tiers.map((tier) => (
+        <li key={tier.amount} className={clsx('col margin-bottom--lg', styles.tier)}>
+          <div className={clsx('card', styles.card)}>
+            <div className="card__header">
+              <h3>{tier.title}</h3>
+            </div>
+            <div className="card__body">
+              <b className={styles.amount}>{numberFormat.format(tier.amount)}</b>
+              <span className={styles.frequency}>{tier.from && 'or above, '}monthly</span>
+              <p className={clsx('margin-vert--md', styles.blurb)}>{tier.description}</p>
+            </div>
+            <div className="card__footer">
+              <Link className="button button--block button--primary" href={tier.url}>
+                Sponsor
+              </Link>
+            </div>
+          </div>
+        </li>
+      ))}
+    </ol>
+  )
+}

src/components/SponsorTiers/index.ts

@@ -0,0 +1 @@
+export * from './SponsorTiers'

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"
+  }
+]

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
+  }
+]

src/pages/index.tsx

@@ -9,9 +9,6 @@ export default function Home() {
       <Splash />
       <main>
         <Intro />
-        {/*<div className="container padding-vert--lg">*/}
-        {/*    <UsedBy/>*/}
-        {/*</div>*/}
       </main>
     </Layout>
   )

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;
-}