website: revamp Sponsor page

website/docusaurus.config.js

@@ -171,6 +171,11 @@ const config = {
             label: "Sponsor",
             position: "right",
           },
+          {
+            to: "support",
+            label: "Support",
+            position: "right",
+          },
           {
             to: "pricing",
             label: "Go Pro",

website/src/components/Sponsor/index.js

@@ -1,10 +1,29 @@
 import Link from "@docusaurus/Link";
 import styles from "@site/src/components/Sponsor/styles.module.css";
+import FallbackAvatar from "@site/static/img/avatar.svg";
 import clsx from "clsx";
 import React, { useContext } from "react";
 
 import { SponsorContext } from "../../contexts/sponsor";
 
+function Avatar({ src }) {
+  return src ? (
+    <img className={styles.avatar} src={src} />
+  ) : (
+    <FallbackAvatar className={styles.avatar} />
+  );
+}
+
+function LinkTo({ href, name }) {
+  return href ? (
+    <Link className={styles.name} to={href}>
+      {name}
+    </Link>
+  ) : (
+    <div className={styles.name}>{name}</div>
+  );
+}
+
 export default function Sponsor({
   name,
   avatar,
@@ -15,6 +34,7 @@ export default function Sponsor({
 }) {
   const level = useContext(SponsorContext);
   const showAvatar = level === "featured" || level === "leaders";
+
   return (
     <div
       className={clsx(
@@ -27,18 +47,10 @@ export default function Sponsor({
       )}
     >
       {showAvatar ? (
-        <img
-          className={styles.avatar}
-          src={"https://www.graphile.org" + avatar}
-        />
+        <Avatar src={avatar ? "https://www.graphile.org" + avatar : null} />
       ) : null}
 
-      <Link
-        className={styles.name}
-        to={href ?? "https://www.graphile.org/sponsor"}
-      >
-        {name}
-      </Link>
+      <LinkTo href={href} name={name} />
     </div>
   );
 }

website/src/components/Sponsor/styles.module.css

@@ -7,19 +7,29 @@
   margin: 0.5rem;
   padding: 1rem;
   flex: 0 0 18rem;
-  font-size: 1.5rem;
+  font-size: 1.2rem;
 }
-.featured .name {
-  font-size: 2rem;
-  padding-top: 1rem;
+
+.leaders {
+  flex: 0 0 12rem;
 }
 
-.featured {
+.featured,
+.leaders {
   border: 3px solid var(--ifm-color-primary-dark);
   background: white;
   border-radius: 12px;
 }
 
+.featured .name {
+  font-size: 2rem;
+  padding-top: 1rem;
+}
+
+.leaders .name {
+  font-size: 1.2rem;
+  padding-top: 0.8rem;
+}
 .name {
   color: var(--ifm-color-primary-darker);
   text-align: center;
@@ -41,12 +51,18 @@
   color: var(--ifm-color-primary);
 }
 
-img.avatar {
+.featured .avatar {
   border-radius: 10rem;
   width: 10rem;
   height: 10rem;
 }
 
+.leaders .avatar {
+  border-radius: 5rem;
+  width: 5rem;
+  height: 5rem;
+}
+
 .business {
 }
 
@@ -58,3 +74,23 @@ img.avatar {
   border-radius: inherit;
   border: inherit;
 }
+
+.backers:last-child {
+  display: none;
+}
+
+.backers:first-child {
+  display: flex;
+}
+
+@media screen and (max-width: 995px) {
+  .leaders {
+    display: none;
+  }
+  .backers:first-child {
+    display: none;
+  }
+  .backers:last-child {
+    display: flex;
+  }
+}

website/src/components/Sponsors/styles.module.css

@@ -1,4 +1,5 @@
 .sponsorContainer {
+  composes: wide from global;
   display: flex;
   flex-wrap: wrap;
   align-items: space-around;

website/src/components/TierPlusButtons/index.js

@@ -0,0 +1,25 @@
+import Link from "@docusaurus/Link";
+import styles from "@site/src/components/TierPlusButtons/styles.module.css";
+import clsx from "clsx";
+import React from "react";
+
+export default function TierPlusButtons() {
+  return (
+    <div className={clsx(styles.sponsorbuttons)}>
+      <Link
+        className={clsx(
+          "button button--primary button--lg",
+          styles.sponsorbutton,
+        )}
+        to="https://github.com/users/benjie/sponsorship"
+      ></Link>
+      <Link
+        className={clsx(
+          "button button--primary button--lg",
+          styles.borderbutton,
+        )}
+        to="mailto:[email protected]?subject=Private%20Advisor%20enquiry"
+      ></Link>
+    </div>
+  );
+}

website/src/components/TierPlusButtons/styles.module.css

@@ -0,0 +1,73 @@
+.sponsorbuttons {
+  display: flex;
+  justify-content: center;
+  margin-top: 2rem;
+  margin-bottom: 1.5rem;
+}
+
+.borderbutton {
+  color: white;
+  text-transform: uppercase;
+  max-width: 100%;
+  margin-left: 1rem;
+  border: 1px solid var(--ifm-color-primary);
+}
+
+.borderbutton:hover {
+  border-radius: 7px;
+  border: 1px solid var(--ifm-color-primary-darkest);
+  background-color: var(--ifm-color-primary-darkest);
+}
+
+.sponsorbutton {
+  text-transform: uppercase;
+  max-width: 100%;
+  border: 1px solid var(--ifm-color-primary-darker);
+  background-color: var(--ifm-color-primary-darker);
+}
+
+.sponsorbutton:before {
+  content: "Start Monthly Plan";
+}
+
+.borderbutton:before {
+  content: "Contact Graphile";
+}
+
+.sponsorbutton:hover {
+  background-color: var(--ifm-color-primary-darkest);
+  border: 1px solid var(--ifm-color-primary-darkest);
+}
+
+[data-theme="dark"] .sponsorbutton {
+  border: 1px solid var(--ifm-color-primary-light);
+  background-color: var(--ifm-color-primary-light);
+}
+
+[data-theme="dark"] .borderbutton {
+  color: black;
+}
+
+[data-theme="dark"] .sponsorbutton:hover {
+  border: 1px solid var(--ifm-color-primary-lightest);
+  background-color: var(--ifm-color-primary-lightest);
+}
+
+[data-theme="dark"] .borderbutton:hover {
+  border: 1px solid var(--ifm-color-primary-lightest);
+  background-color: var(--ifm-color-primary-lightest);
+}
+
+@media screen and (max-width: 995px) {
+  .sponsorbuttons {
+    display: flex;
+    flex-direction: column;
+  }
+  .borderbutton {
+    margin-top: 1rem;
+    margin-left: 0rem;
+  }
+  .borderbutton:before {
+    content: "Contact";
+  }
+}

website/src/components/Tiers/index.js

@@ -0,0 +1,142 @@
+import Link from "@docusaurus/Link";
+import styles from "@site/src/components/Tiers/styles.module.css";
+import clsx from "clsx";
+import React from "react";
+
+const TierList = [
+  {
+    title: "Supporter",
+    tagline: "Thank you!",
+    pricing: "$25",
+    link: "https://github.com/sponsors/benjie/sponsorships?tier_id=369",
+    buttonText: "",
+    description: (
+      <>
+        <ul>
+          <li>
+            Your name on the{" "}
+            <Link to="https://graphile.org/sponsor">
+              Graphile Sponsors page
+            </Link>{" "}
+          </li>
+          <li>Post job opportunities to our Discord community</li>
+          <li>Graphile Worker stickers</li>
+          <li>Access to the #supporter-lounge on Discord</li>
+          <li>
+            The warm feeling from knowing you’re supporting Open Source Software
+          </li>
+        </ul>
+      </>
+    ),
+  },
+  {
+    title: "Production Sponsor",
+    tagline: "Support sustainability",
+    pricing: "$100",
+    link: "https://github.com/sponsors/benjie/sponsorships?tier_id=368",
+    buttonText: "",
+    description: (
+      <>
+        <ul>
+          <li>The Supporter tier benefits and...</li>
+          <li>
+            Access to <strong>private security announcements</strong>
+          </li>
+          <li>
+            Free access to{" "}
+            <strong>
+              <Link to="/pricing">Worker Pro</Link>
+            </strong>
+          </li>
+          <li>
+            Access to{" "}
+            <Link to="https://github.com/graphile-pro">
+              <strong>graphile-pro</strong>
+            </Link>
+          </li>
+          <li>
+            Your name and <strong>avatar/logo</strong> featured on our websites,
+            including this one
+          </li>
+          <li>
+            The warm feeling that comes from knowing you’re making a difference
+            to Graphile Worker’s development and sustainability
+          </li>
+        </ul>
+      </>
+    ),
+  },
+  {
+    title: "Featured Sponsor",
+    tagline: "Get featured in the project",
+    pricing: "$500",
+    link: "https://github.com/sponsors/benjie/sponsorships?tier_id=367",
+    buttonText: "",
+    description: (
+      <>
+        <ul>
+          <li>The Production tier benefits and...</li>
+          <li>
+            Your name and avatar/logo{" "}
+            <strong>
+              featured in the READMEs of Graphile’s main OSS projects
+            </strong>{" "}
+            (shown on GitHub and npm)
+          </li>
+          <li>
+            Your name and <strong>avatar/logo prominently featured </strong>on
+            our websites
+          </li>
+          <li>
+            Access to <strong>#vip-lounge</strong> on Discord
+          </li>
+          <li>
+            Free access to{" "}
+            <strong>
+              <Link to="https://pgrita.com">pgRITA</Link>
+            </strong>
+          </li>
+          <li>
+            The warm feeling that comes from knowing{" "}
+            <strong>
+              you’re making a significant difference to Graphile Worker’s
+              development and sustainability
+            </strong>
+          </li>
+        </ul>
+      </>
+    ),
+  },
+];
+
+function Tier({ title, tagline, link, buttonText, description, pricing }) {
+  return (
+    <div className={styles.tier}>
+      <h2 className={styles.title}>{title}</h2>
+      <h3 className={styles.tagline}>
+        <span className={styles.price}>{pricing}</span>&nbsp;
+        <span className={styles.note}>/month</span>
+      </h3>
+      <Link
+        className={clsx("button button--primary button--lg", styles.button)}
+        to={link}
+      >
+        {buttonText}
+      </Link>
+      <h3 className={styles.tagline}>{tagline}</h3>
+      <p>{description}</p>
+    </div>
+  );
+}
+
+export default function List() {
+  return (
+    <div className={clsx("", styles.tiers)}>
+      <div className={clsx(styles.tierRow)}>
+        {TierList.map((props, idx) => (
+          <Tier key={idx} {...props} />
+        ))}
+      </div>
+    </div>
+  );
+}