add sponsor page

docusaurus.config.js

@@ -67,6 +67,11 @@ const config = {
             label: 'Documentation',
             position: 'left'
           },
+          {
+            to: '/sponsors',
+            label: 'Sponsor',
+            position: 'left'
+          },
           {
             href: 'https://github.com/cucumber',
             label: 'GitHub',

src/css/custom.scss

@@ -18,6 +18,12 @@
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }
 
+.readable-blurb {
+  max-width: 50rem;
+  margin-left: auto;
+  margin-right: auto;
+}
+
 .footer__copyright {
   font-size: 0.75rem;
   line-height: 1em;

src/pages/sponsors.module.scss

@@ -0,0 +1,56 @@
+.tiersList {
+  display: flex;
+  list-style: none;
+  padding: 0;
+  margin: -0.5rem;
+}
+
+.tiersItem {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: calc(25% - 1rem);
+  padding: 2rem;
+  border: 1px solid var(--ifm-color-secondary);
+  margin: 0.5rem;
+}
+
+@media all and (max-width: 799px) {
+  .tiersList {
+    flex-wrap: wrap;
+  }
+
+  .tiersItem {
+    width: calc(50% - 1rem);
+  }
+}
+
+@media all and (max-width: 499px) {
+
+  .tiersItem {
+    width: 100%;
+  }
+}
+
+.tiersAmount {
+  display: block;
+  font-weight: 300;
+  font-size: 2.5rem;
+  line-height: 1em;
+}
+
+.tiersFrequency {
+  display: block;
+  color: var(--ifm-color-secondary-darkest);
+  font-size: 0.875rem;
+}
+
+.tiersTitle {
+  margin-top: 0.5rem;
+}
+
+.reasonIllustration {
+  max-width: 80%;
+  max-height: 150px;
+}

src/pages/sponsors.tsx

@@ -0,0 +1,100 @@
+import React, {FC} from "react";
+import Layout from "@theme/Layout";
+import Link from "@docusaurus/Link";
+import styles from './sponsors.module.scss'
+import clsx from "clsx";
+
+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: 'For small organisations; our most popular tier',
+        amount: 100,
+        url: 'https://opencollective.com/cucumber/contribute/bronze-sponsors-181/checkout',
+        from: false
+    },
+    {
+        title: 'Silver',
+        description: 'For organisations of more than 50 people',
+        amount: 250,
+        url: 'https://opencollective.com/cucumber/contribute/silver-sponsors-3222/checkout',
+        from: false
+    },
+    {
+        title: 'Gold',
+        description: 'For organisations of more than 100 people',
+        amount: 500,
+        url: 'https://opencollective.com/cucumber/contribute/gold-sponsors-3224/checkout',
+        from: false
+    }
+] as const
+
+const Tiers: FC = () => {
+    return <ol className={styles.tiersList}>
+        {tiers.map(tier => {
+            return <li key={tier.amount} className={styles.tiersItem}>
+                <div>
+                    <b className={styles.tiersAmount}>{numberFormat.format(tier.amount)}</b>
+                    <span className={styles.tiersFrequency}>{tier.from && 'or above, '}monthly</span>
+                    <h3 className={styles.tiersTitle}>{tier.title}</h3>
+                    <p>{tier.description}</p>
+                </div>
+                <Link className="button button--block button--primary" href={tier.url}>
+                    Sponsor
+                </Link>
+            </li>
+        })}
+    </ol>
+}
+
+export default function Sponsors() {
+    return <Layout>
+        <main>
+            <div className="container readable-blurb text--center padding-vert--lg">
+                <h1>Sponsor Cucumber</h1>
+                <p>The Cucumber project has no full-time staff or big commercial backer &mdash; our tools are mostly maintained by volunteers, in their spare time. Sponsorship from individuals and companies helps keep the project healthy.</p>
+            </div>
+            <div className="container padding-vert--lg">
+                <div className="margin-bottom--lg">
+                    <p className="text--center margin-bottom--sm">If you can, we'd love for you to commit a regular amount to support Cucumber:</p>
+                    <Tiers/>
+                </div>
+                <div className="text--center">
+                    <p className="margin-bottom--sm">Or, you can always make a one-time donation:</p>
+                    <p>
+                        <Link className="button button--lg button--secondary" href="https://opencollective.com/cucumber/donate">Donate</Link>
+                    </p>
+                </div>
+            </div>
+            <div className="container text--center padding-vert--lg">
+                <h2>Why sponsor?</h2>
+                <p className="readable-blurb margin-bottom--lg">Your sponsorship will directly contribute to the core team's most important and impactful work:</p>
+                <div className="row">
+                    <div className="col col--4">
+                        <img className={clsx(styles.reasonIllustration, "margin-bottom--md")} alt="" src="/img/illustrations/admin.svg"/>
+                        <h3>Boring stuff</h3>
+                        <p className="padding-horiz--sm">Releases, security, bug fixes, issue triage. Domains, hosting, tools, admin. Unglamorous but essential.</p>
+                    </div>
+                    <div className="col col--4">
+                        <img className={clsx(styles.reasonIllustration, "margin-bottom--md")} alt="" src="/img/illustrations/code.svg"/>
+                        <h3>Extensibility</h3>
+                        <p className="padding-horiz--sm">Adapting our architecture so you can extend and augment Cucumber for whatever you need.</p>
+                    </div>
+                    <div className="col col--4">
+                        <img className={clsx(styles.reasonIllustration, "margin-bottom--md")} alt="" src="/img/illustrations/docs.svg"/>
+                        <h3>Documentation</h3>
+                        <p className="padding-horiz--sm">Expanding and improving the docs so it's as easy as possible for people to be successful with Cucumber.</p>
+                    </div>
+                </div>
+            </div>
+        </main>
+    </Layout>
+}