Update TiersPlus to include annual plan

Author: jemgillam

website/src/components/TiersPlus/index.js

@@ -11,32 +11,28 @@ const TierList = [
     was: "$1,500",
     link: "https://github.com/sponsors/benjie/sponsorships?tier_id=42012",
     buttonText: "",
-    frequency: "per month",
-    comparison: "",
+    frequency: "/mo",
+    comparison: "Cancel any time",
+    badge: "Updated August 2025",
     description: (
       <>
         <ul>
-          <li>All the benefits of a Featured Sponsor and...</li>
-          <li>One-to-one access to the Graphile team throughout the year </li>
           <li>
-            <strong>Priority support straight from the maintainer</strong>
+            Start today with <strong>payment through GitHub</strong>
           </li>
           <li>
-            Add the Graphile team to your chat server for timely responses
+            <strong>Flexible</strong>
+          </li>
+          <li>New lower price for 2025</li>
+          <li>
+            <strong>Predictable monthly cost</strong> with no surprises
           </li>
-          <li>Add the Graphile team to your GitHub/GitLab organization</li>
-          <li>Reference your code verbatim</li>
-          <li>Calls arranged as required</li>
-          <li>NDA available</li>
           <li>
             <strong>Access to discounted consultancy packages</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>
+            Includes a <strong>formal contract</strong> for your procurement
+            process
           </li>
         </ul>
       </>
@@ -45,38 +41,35 @@ const TierList = [
   {
     title: "Annual Plan",
     tagline: "Maximum savings with full year commitment",
-    pricing: "$9,999",
-    was: "$11,988",
+    pricing: "$899",
+    hint: "10% discount",
+    //was: "$11,988",
     link: "mailto:team@graphile.com?subject=Private%20Advisor%20enquiry",
     buttonText: "",
-    frequency: "per year",
-    comparison: "That's just $833.25/month",
-    badge: "Best Value - Save $1,999 ",
+    frequency: "/mo",
+    comparison: "Paid annually — $10,788/yr",
+    badge: "Best Value — Save $1,999",
     featured: true,
     description: (
       <>
         <ul>
-          <li>All the benefits of a Featured Sponsor and...</li>
-          <li>One-to-one access to the Graphile team throughout the year </li>
           <li>
-            <strong>Priority support straight from the maintainer</strong>
+            <strong>Lock in your rate</strong> for a full year
+          </li>
+
+          <li>
+            <strong>Save money</strong> — pay once, enjoy the lowest rate
           </li>
           <li>
-            Add the Graphile team to your chat server for timely responses
+            <strong>One invoice, one payment</strong> — no monthly admin
+            headaches
           </li>
-          <li>Add the Graphile team to your GitHub/GitLab organization</li>
-          <li>Reference your code verbatim</li>
-          <li>Calls arranged as required</li>
-          <li>NDA available</li>
           <li>
             <strong>Access to discounted consultancy packages</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>
+            Includes a <strong>formal contract</strong> for your procurement
+            process
           </li>
         </ul>
       </>
@@ -96,21 +89,26 @@ function Tier({
   comparison,
   badge,
   featured,
+  hint,
 }) {
   return (
     <div className={clsx(styles.tier, featured ? styles.featured : null)}>
       {badge ? <div className={styles.badge}>{badge}</div> : null}
       <div className={styles.banner}>
         <div className={styles.info}>
           <h2 className={styles.title}>{title}</h2>
-          <h3 className={styles.tagline}>{tagline}</h3>
-          <h3 className={styles.tagline}>
-            <span className={styles.was}>{was}</span>
-            <br />
-            <span className={styles.price}>{pricing}</span>&nbsp;
-            <span className={styles.note}>{frequency}</span>
+          <div className={styles.tagline}>{tagline}</div>
+          <div className={styles.priceline}>
+            {was ? <span className={styles.was}>{was}</span> : null}{" "}
+            <span className={styles.price}>
+              {pricing}
+              <span className={styles.pricesub}>{frequency}</span>
+            </span>
+            {hint ? <span className={styles.hint}>{hint}</span> : null}
+          </div>
+          <div className={styles.qualifierline}>
             <span className={styles.note}>{comparison}</span>
-          </h3>
+          </div>
         </div>
         <div className={styles.info}>
           <Link
@@ -121,7 +119,7 @@ function Tier({
           </Link>
         </div>
       </div>
-      <p>{description}</p>
+      <div className={styles.description}>{description}</div>
     </div>
   );
 }

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

@@ -1,7 +1,6 @@
 .tiers {
   display: flex;
-  width: 100%;
-  flex-direction: row;
+  flex-direction: column;
 }
 
 .tierRow {
@@ -14,7 +13,7 @@
   position: relative;
   display: flex;
   flex-direction: column;
-  flex: 0 0 33%;
+  flex: 0 0 40%;
   justify-content: flex-start;
   align-items: flex-start;
   font-weight: normal;
@@ -24,23 +23,37 @@
   border: 2px solid var(--ifm-color-primary-darker);
   border-radius: 12px;
   &.featured {
-    background-color: #fff4ec;
+    background-color: #fff9f5;
     border: 3px solid var(--ifm-color-primary);
   }
 }
 
+.hint {
+  background: rgb(230, 246, 230);
+  color: rgb(0, 49, 0);
+  padding: 0 0.8rem 0.1rem;
+  font-size: 0.8rem;
+  border-radius: calc(infinity * 1px);
+  margin-left: 1rem;
+  height: 1.5rem;
+}
+
 .badge {
-  position: absolute;
+  /* position: absolute;
   left: 50%;
   top: 0%;
-  transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%); */
+  margin: -1.8rem 0 0;
   background-color: white;
   border-radius: calc(infinity * 1px);
-  padding: 0.4rem;
+  border: 1px solid var(--ifm-color-primary-darker);
+  padding: 0rem 0.8rem 0.1rem;
   .featured & {
     background-color: var(--ifm-color-primary);
+    border: 1px solid var(--ifm-color-primary);
     color: white;
     font-weight: bold;
+    margin: -1.8rem auto 0;
   }
 }
 
@@ -53,23 +66,35 @@
   width: 100%;
   justify-content: space-between;
   flex-direction: column;
+  margin-top: 0.2rem;
 }
 
 .info {
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
-  align-items: flex-start;
+  align-items: center;
+  > * {
+    text-align: center;
+  }
 }
 
 .title {
   color: var(--ifm-color-primary-darker);
+  font-size: 2rem;
+  font-weight: bold;
+  .featured & {
+    color: var(--ifm-color-primary);
+  }
 }
 
 .note {
-  font-size: 0.8rem;
+  font-size: 0.9rem;
   color: var(--ifm-color-primary-darker);
   font-weight: var(--ifm-font-weight-base);
+  .featured & {
+    color: var(--ifm-color-primary);
+  }
 }
 
 [data-theme="dark"] .title,
@@ -78,16 +103,34 @@
 }
 
 .tagline {
+  text-align: center;
+  font-size: 1rem;
+}
+
+.priceline {
   font-weight: var(--ifm-heading-font-weight);
+  text-align: center;
+  font-size: 2rem;
+  display: flex;
+  align-items: center;
 }
 
 .price {
   font-weight: bold;
 }
 
+.pricesub {
+  font-size: 1rem;
+  color: var(--ifm-color-primary-darker);
+  .featured & {
+    color: var(--ifm-color-primary);
+  }
+}
+
 .was {
   color: var(--ifm-color-gray-400);
   text-decoration: line-through;
+  margin-right: 1rem;
 }
 
 [data-theme="dark"] .was {
@@ -99,27 +142,37 @@
   padding: 0.5rem 0 0.5rem 0;
 }
 
+.description li::marker {
+  font-size: 20px;
+  color: var(--ifm-color-primary-darker);
+  content: "✓ ";
+}
+
 .button {
   width: 100%;
-  margin: 0 0 1rem 0;
+  margin: 1rem 0 0 0;
 }
 
-.tier .button {
+.button {
   background-color: var(--ifm-color-primary-darker);
   border-color: var(--ifm-color-primary-darker);
+  .featured & {
+    background-color: var(--ifm-color-primary);
+    border-color: var(--ifm-color-primary);
+  }
 }
 
-.tier .button:hover {
+.button:hover {
   background-color: var(--ifm-color-primary-darkest);
   border-color: var(--ifm-color-primary-darkest);
 }
 
-[data-theme="dark"] .tier .button {
+[data-theme="dark"] .button {
   background-color: var(--ifm-color-primary);
   border-color: var(--ifm-color-primary);
 }
 
-[data-theme="dark"] .tier .button:hover {
+[data-theme="dark"] .button:hover {
   border: 1px solid var(--ifm-color-primary-lightest);
   background-color: var(--ifm-color-primary-lightest);
 }

website/src/pages/sponsors.mdx

@@ -119,4 +119,27 @@ wider Graphile suite, and other tools in the ecosystem such as TypeScript, SQL,
 Node.js, GraphQL and more. If you’re running any of the Graphile tools, you
 won’t find anyone more qualified to help.
 
+<ul>
+  <li>All the benefits of a Featured Sponsor and...</li>
+  <li>One-to-one access to the Graphile team throughout the year </li>
+  <li>
+    <strong>Priority support straight from the maintainer</strong>
+  </li>
+  <li>Add the Graphile team to your chat server for timely responses</li>
+  <li>Add the Graphile team to your GitHub/GitLab organization</li>
+  <li>Reference your code verbatim</li>
+  <li>Calls arranged as required</li>
+  <li>NDA available</li>
+  <li>
+    <strong>Access to discounted consultancy packages</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>
+
 <TierPlusList />