From 262269a7a21ec64036fbcc67d649ff43e96ea664 Mon Sep 17 00:00:00 2001
From: Jamil <jamilbk@users.noreply.github.com>
Date: Wed, 15 May 2024 15:14:56 -0700
Subject: [PATCH] feat(website): Increase team user limit to 100 (#5002)

- Increase limits for team plan to make more sense
- More CTA and features list for Enterprise plan

Fixes firezone/gtm#272
Fixes firezone/gtm#267
---
 website/src/app/pricing/_page.tsx      |  49 +++++--
 website/src/app/pricing/plan_table.tsx | 185 ++++++++++++++++++++++++-
 2 files changed, 218 insertions(+), 16 deletions(-)

diff --git a/website/src/app/pricing/_page.tsx b/website/src/app/pricing/_page.tsx
index 959f77439..92887110e 100644
--- a/website/src/app/pricing/_page.tsx
+++ b/website/src/app/pricing/_page.tsx
@@ -8,7 +8,7 @@ import PlanTable from "./plan_table";
 import { useState } from "react";
 
 export default function _Page() {
-  let [annual, setAnnual] = useState(false);
+  let [annual, setAnnual] = useState(true);
   let teamPrice: string;
 
   return (
@@ -132,10 +132,9 @@ export default function _Page() {
               )}
               {!annual && <span>$5</span>}
               <span className="h-full">
-                <span className="text-sm text-neutral-700 inline-block align-bottom ml-1 mb-1">
+                <span className="text-xs text-neutral-700 inline-block align-bottom ml-1 mb-1">
                   {" "}
                   per user / month
-                  {annual && ", $50 billed annually"}
                 </span>
               </span>
             </h2>
@@ -156,7 +155,7 @@ export default function _Page() {
               <li className="flex space-x-2.5">
                 <HiCheck className="flex-shrink-0 w-5 h-5 text-neutral-900" />
                 <span className="leading-tight text-neutral-900 ">
-                  Up to 25 users
+                  Up to 100 users
                 </span>
               </li>
               <li className="flex space-x-2.5">
@@ -192,11 +191,16 @@ export default function _Page() {
             </ul>
           </div>
           <div className="p-8 bg-neutral-900 text-neutral-50 rounded shadow border border-primary-450 mb-4">
-            <h3 className="mb-4 text-2xl tracking-tight font-semibold text-primary-450">
-              Enterprise
-            </h3>
+            <div className="mb-4 flex items-center justify-between">
+              <h3 className="text-2xl tracking-tight font-semibold text-primary-450">
+                Enterprise
+              </h3>
+              <span className="font-semibold uppercase text-xs rounded bg-primary-450 text-white px-1 py-0.5">
+                30-day trial
+              </span>
+            </div>
             <p className="mb-8 font-semibold">
-              Advanced zero trust network access for enterprises
+              Compliance-ready security for large organizations
             </p>
             <h2 className="mb-16 text-2xl sm:text-4xl tracking-tight font-semibold">
               Contact us
@@ -222,13 +226,17 @@ export default function _Page() {
               <li className="flex space-x-2.5">
                 <HiCheck className="flex-shrink-0 w-5 h-5" />
                 <span className="leading-tight">
-                  Automatically sync users and groups from Google, Entra, or
-                  Okta
+                  Directory sync for Google, Entra ID, and Okta
                 </span>
               </li>
               <li className="flex space-x-2.5">
                 <HiCheck className="flex-shrink-0 w-5 h-5" />
-                <span className="leading-tight">Fastest relay network</span>
+                <span className="leading-tight">
+                  <span className="font-semibold text-primary-450">
+                    Unthrottled
+                  </span>{" "}
+                  relay network
+                </span>
               </li>
               <li className="flex space-x-2.5">
                 <HiCheck className="flex-shrink-0 w-5 h-5" />
@@ -236,6 +244,13 @@ export default function _Page() {
                   Dedicated Slack support channel
                 </span>
               </li>
+              <li className="flex space-x-2.5">
+                <HiCheck className="flex-shrink-0 w-5 h-5" />
+                <span className="leading-tight">
+                  <span className="font-semibold text-primary-450">99.99%</span>{" "}
+                  uptime SLA
+                </span>
+              </li>
               <li className="flex space-x-2.5">
                 <HiCheck className="flex-shrink-0 w-5 h-5" />
                 <span className="leading-tight">Roadmap acceleration</span>
@@ -244,6 +259,18 @@ export default function _Page() {
                 <HiCheck className="flex-shrink-0 w-5 h-5" />
                 <span className="leading-tight">White-glove onboarding</span>
               </li>
+              <li className="flex space-x-2.5">
+                <HiCheck className="flex-shrink-0 w-5 h-5" />
+                <span className="leading-tight">Annual invoicing</span>
+              </li>
+              <li className="flex space-x-2.5">
+                <HiCheck className="flex-shrink-0 w-5 h-5" />
+                <span className="leading-tight">
+                  Pentested &{" "}
+                  <span className="font-semibold text-primary-450">SOC 2</span>{" "}
+                  compliant
+                </span>
+              </li>
             </ul>
           </div>
         </div>
diff --git a/website/src/app/pricing/plan_table.tsx b/website/src/app/pricing/plan_table.tsx
index 704b16b9f..dccd33b8f 100644
--- a/website/src/app/pricing/plan_table.tsx
+++ b/website/src/app/pricing/plan_table.tsx
@@ -56,7 +56,7 @@ export default function PlanTable() {
             </div>
           </td>
           <td className="gmx-1 py-4 text-center">6</td>
-          <td className="gmx-1 py-4 text-center">25</td>
+          <td className="gmx-1 py-4 text-center">100</td>
           <td className="gmx-1 py-4 text-center">No limit</td>
         </tr>
         <tr className="border-b border-1 border-neutral-200">
@@ -78,7 +78,7 @@ export default function PlanTable() {
             </div>
           </td>
           <td className="gmx-1 py-4 text-center">10</td>
-          <td className="gmx-1 py-4 text-center">25</td>
+          <td className="gmx-1 py-4 text-center">100</td>
           <td className="gmx-1 py-4 text-center">No limit</td>
         </tr>
         <tr className="border-b border-1 border-neutral-200">
@@ -124,7 +124,7 @@ export default function PlanTable() {
             </div>
           </td>
           <td className="gmx-1 py-4 text-center">1</td>
-          <td className="gmx-1 py-4 text-center">3</td>
+          <td className="gmx-1 py-4 text-center">10</td>
           <td className="gmx-1 py-4 text-center">No limit</td>
         </tr>
         <tr className="border-b border-1 border-neutral-200">
@@ -395,7 +395,7 @@ export default function PlanTable() {
           </td>
           <td className="gmx-1 py-4 flex-wrap text-center">Basic</td>
           <td className="gmx-1 py-4 flex-wrap text-center">Standard</td>
-          <td className="gmx-1 py-4 flex-wrap text-center">Premium</td>
+          <td className="gmx-1 py-4 flex-wrap text-center">Unthrottled</td>
         </tr>
         <tr>
           <td
@@ -706,12 +706,57 @@ export default function PlanTable() {
             <HiCheck className="mx-auto flex-shrink-0 w-5 h-5 text-neutral-900" />
           </td>
         </tr>
+        <tr className="border-b border-1 border-neutral-200">
+          <td className="gmx-1 py-4">
+            <span
+              data-tooltip-target="compliance-audit-tooltip"
+              data-tooltip-placement="top"
+              className="underline hover:no-underline cursor-help"
+            >
+              Compliance certifications
+            </span>
+            <div
+              id="compliance-audit-tooltip"
+              role="tooltip"
+              className="text-wrap absolute z-10 invisible inline-block px-3 py-2 text-xs font-medium text-white transition-opacity duration-100 bg-neutral-900 rounded shadow-sm opacity-90 tooltip"
+            >
+              Independent auditing for compliance with industry standards
+              <div className="tooltip-arrow" data-popper-arrow></div>
+            </div>
+          </td>
+          <td className="gmx-1 py-4 text-center">&#8212;</td>
+          <td className="gmx-1 py-4 text-center">&#8212;</td>
+          <td className="gmx-1 py-4 text-center">SOC 2</td>
+        </tr>
+        <tr className="border-b border-1 border-neutral-200">
+          <td className="gmx-1 py-4">
+            <span
+              data-tooltip-target="pentesting-tooltip"
+              data-tooltip-placement="top"
+              className="underline hover:no-underline cursor-help"
+            >
+              Independent pentest
+            </span>
+            <div
+              id="pentesting-tooltip"
+              role="tooltip"
+              className="text-wrap absolute z-10 invisible inline-block px-3 py-2 text-xs font-medium text-white transition-opacity duration-100 bg-neutral-900 rounded shadow-sm opacity-90 tooltip"
+            >
+              Penetration testing for security vulnerabilities conducted by a
+              third party firm
+              <div className="tooltip-arrow" data-popper-arrow></div>
+            </div>
+          </td>
+          <td className="gmx-1 py-4 text-center">&#8212;</td>
+          <td className="gmx-1 py-4 text-center">&#8212;</td>
+          <td className="gmx-1 py-4 text-center">40 hours</td>
+        </tr>
         <tr>
           <td
             colSpan={4}
             className="mx-1 pt-12 pb-4 text-lg uppercase font-semibold text-primary-450 tracking-light"
           >
-            Support
+            Support & Customer success
           </td>
         </tr>
         <tr className="border-b border-1 border-neutral-200">
@@ -805,6 +850,136 @@ export default function PlanTable() {
             <HiCheck className="mx-auto flex-shrink-0 w-5 h-5 text-neutral-900" />
           </td>
         </tr>
+        <tr className="border-b border-1 border-neutral-200">
+          <td className="gmx-1 py-4">
+            <span
+              data-tooltip-target="uptime-sla-tooltip"
+              data-tooltip-placement="top"
+              className="underline hover:no-underline cursor-help"
+            >
+              Uptime SLA
+            </span>
+            <div
+              id="uptime-sla-tooltip"
+              role="tooltip"
+              className="text-wrap absolute z-10 invisible inline-block px-3 py-2 text-xs font-medium text-white transition-opacity duration-100 bg-neutral-900 rounded shadow-sm opacity-90 tooltip"
+            >
+              Guaranteed uptime for your Firezone service
+              <div className="tooltip-arrow" data-popper-arrow></div>
+            </div>
+          </td>
+          <td className="gmx-1 py-4 text-center">&#8212;</td>
+          <td className="gmx-1 py-4 text-center">&#8212;</td>
+          <td className="gmx-1 py-4 text-center">99.99%</td>
+        </tr>
+        <tr>
+          <td
+            colSpan={4}
+            className="mx-1 pt-12 pb-4 text-lg uppercase font-semibold text-primary-450 tracking-light"
+          >
+            Billing & payment
+          </td>
+        </tr>
+        <tr className="border-b border-1 border-neutral-200">
+          <td className="gmx-1 py-4">
+            <span
+              data-tooltip-target="credit-card-tooltip"
+              data-tooltip-placement="top"
+              className="underline hover:no-underline cursor-help"
+            >
+              Payment by credit card
+            </span>
+            <div
+              id="credit-card-tooltip"
+              role="tooltip"
+              className="text-wrap absolute z-10 invisible inline-block px-3 py-2 text-xs font-medium text-white transition-opacity duration-100 bg-neutral-900 rounded shadow-sm opacity-90 tooltip"
+            >
+              Pay for your subscription using a credit card
+              <div className="tooltip-arrow" data-popper-arrow></div>
+            </div>
+          </td>
+          <td className="gmx-1 py-4 text-center">&#8212;</td>
+          <td className="gmx-1 py-4 text-center">
+            <HiCheck className="mx-auto flex-shrink-0 w-5 h-5 text-neutral-900" />
+          </td>
+          <td className="gmx-1 py-4 text-center">
+            <HiCheck className="mx-auto flex-shrink-0 w-5 h-5 text-neutral-900" />
+          </td>
+        </tr>
+        <tr className="border-b border-1 border-neutral-200">
+          <td className="gmx-1 py-4">
+            <span
+              data-tooltip-target="ach-tooltip"
+              data-tooltip-placement="top"
+              className="underline hover:no-underline cursor-help"
+            >
+              Payment by ACH transfer
+            </span>
+            <div
+              id="ach-tooltip"
+              role="tooltip"
+              className="text-wrap absolute z-10 invisible inline-block px-3 py-2 text-xs font-medium text-white transition-opacity duration-100 bg-neutral-900 rounded shadow-sm opacity-90 tooltip"
+            >
+              Pay for your subscription using an ACH transfer
+              <div className="tooltip-arrow" data-popper-arrow></div>
+            </div>
+          </td>
+          <td className="gmx-1 py-4 text-center">&#8212;</td>
+          <td className="gmx-1 py-4 text-center">
+            <HiCheck className="mx-auto flex-shrink-0 w-5 h-5 text-neutral-900" />
+          </td>
+          <td className="gmx-1 py-4 text-center">
+            <HiCheck className="mx-auto flex-shrink-0 w-5 h-5 text-neutral-900" />
+          </td>
+        </tr>
+        <tr className="border-b border-1 border-neutral-200">
+          <td className="gmx-1 py-4">
+            <span
+              data-tooltip-target="wire-transfer-tooltip"
+              data-tooltip-placement="top"
+              className="underline hover:no-underline cursor-help"
+            >
+              Payment by wire transfer
+            </span>
+            <div
+              id="wire-transfer-tooltip"
+              role="tooltip"
+              className="text-wrap absolute z-10 invisible inline-block px-3 py-2 text-xs font-medium text-white transition-opacity duration-100 bg-neutral-900 rounded shadow-sm opacity-90 tooltip"
+            >
+              Pay your invoice using a wire transfer
+              <div className="tooltip-arrow" data-popper-arrow></div>
+            </div>
+          </td>
+          <td className="gmx-1 py-4 text-center">&#8212;</td>
+          <td className="gmx-1 py-4 text-center">&#8212;</td>
+          <td className="gmx-1 py-4 text-center">
+            <HiCheck className="mx-auto flex-shrink-0 w-5 h-5 text-neutral-900" />
+          </td>
+        </tr>
+        <tr className="border-b border-1 border-neutral-200">
+          <td className="gmx-1 py-4">
+            <span
+              data-tooltip-target="annual-invoicing-tooltip"
+              data-tooltip-placement="top"
+              className="underline hover:no-underline cursor-help"
+            >
+              Annual invoicing
+            </span>
+            <div
+              id="annual-invoicing-tooltip"
+              role="tooltip"
+              className="text-wrap absolute z-10 invisible inline-block px-3 py-2 text-xs font-medium text-white transition-opacity duration-100 bg-neutral-900 rounded shadow-sm opacity-90 tooltip"
+            >
+              Pay for your subscription annually
+              <div className="tooltip-arrow" data-popper-arrow></div>
+            </div>
+          </td>
+          <td className="gmx-1 py-4 text-center">&#8212;</td>
+          <td className="gmx-1 py-4 text-center">&#8212;</td>
+          <td className="gmx-1 py-4 text-center">
+            <HiCheck className="mx-auto flex-shrink-0 w-5 h-5 text-neutral-900" />
+          </td>
+        </tr>
         <tr>
           <td></td>
           <td className="gmx-1 py-14 text-center">