From cc442bfebf9dca69f220cba69acd63e3cde38065 Mon Sep 17 00:00:00 2001
From: Patti <139997703+Patticatti@users.noreply.github.com>
Date: Tue, 3 Sep 2024 17:40:40 -0700
Subject: [PATCH] fix(website): New subscription cards style (#6549)

Signed-off-by: Patti <139997703+Patticatti@users.noreply.github.com>
---
 website/src/app/blog/page.tsx                 |   8 +-
 website/src/app/changelog/layout.tsx          |   2 +-
 website/src/app/globals.css                   |   2 +-
 website/src/app/page.tsx                      |  12 +-
 website/src/app/pricing/_page.tsx             | 266 +++++++++++-------
 website/src/app/pricing/layout.tsx            |  10 +-
 website/src/app/support/layout.tsx            |   8 +-
 website/src/components/BattleCard/index.tsx   |   3 +-
 .../components/CustomerTestimonials/index.tsx |   3 +-
 .../src/components/ElevatorPitch/index.tsx    |   3 +-
 website/src/components/FeatureCards/index.tsx |   9 +-
 .../src/components/FeatureSection/index.tsx   |   4 +-
 website/src/components/Footer/index.tsx       |   3 +-
 website/src/components/RootLayout/index.tsx   |  23 +-
 .../src/components/SingleFeature/index.tsx    |   3 +-
 website/src/components/UseCaseCards/index.tsx |   5 +-
 website/src/lib/fonts.ts                      |  12 -
 website/tailwind.config.js                    |  10 +
 18 files changed, 222 insertions(+), 164 deletions(-)
 delete mode 100644 website/src/lib/fonts.ts

diff --git a/website/src/app/blog/page.tsx b/website/src/app/blog/page.tsx
index 2f7b0a70a..1ce654557 100644
--- a/website/src/app/blog/page.tsx
+++ b/website/src/app/blog/page.tsx
@@ -14,11 +14,13 @@ export default function Page() {
   return (
     <section>
       <div className="bg-neutral-50 border-b border-neutral-100">
-        <div className="py-8 px-4 sm:py-10 sm:px-6 md:py-12 md:px-8 lg:py-14 lg:px-10 mx-auto max-w-screen-lg w-full">
-          <h1 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-bold tracking-tight">
+        <div className="py-8 px-4 sm:py-12 sm:px-6 md:py-16 md:px-8 lg:py-20 lg:px-10 mx-auto max-w-screen-lg w-full">
+          <h1
+            className={`justify-center text-5xl sm:text-6xl md:text-7xl font-bold tracking-tight font-manrope`}
+          >
             Blog
           </h1>
-          <p className="text-md sm:text-lg md:text-xl lg:text-2xl mt-4 md:mt-6 lg:mt-8 tracking-tight">
+          <p className="text-center text-md md:text-lg lg:text-xl mt-2 md:mt-4 tracking-tight">
             Announcements, how-tos, and more from the Firezone team.
           </p>
         </div>
diff --git a/website/src/app/changelog/layout.tsx b/website/src/app/changelog/layout.tsx
index 49b06852d..e27169145 100644
--- a/website/src/app/changelog/layout.tsx
+++ b/website/src/app/changelog/layout.tsx
@@ -14,7 +14,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
       </div>
       <div className="bg-neutral-50 border-b border-neutral-100">
         <div className="py-8 px-4 sm:py-10 sm:px-6 md:py-12 md:px-8 lg:py-14 lg:px-10 mx-auto max-w-screen-lg w-full">
-          <h1 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-bold tracking-tight">
+          <h1 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-bold tracking-tight font-manrope">
             Changelog
           </h1>
           <p className="text-md sm:text-lg md:text-xl lg:text-2xl mt-4 md:mt-6 lg:mt-8 tracking-tight">
diff --git a/website/src/app/globals.css b/website/src/app/globals.css
index d40f7fae7..dffa62149 100644
--- a/website/src/app/globals.css
+++ b/website/src/app/globals.css
@@ -5,7 +5,7 @@
 @layer components {
   /* Fix inline headings */
   *:is(h1, h2, h3, h4, h5, h6) {
-    @apply flex items-center gap-1;
+    @apply flex items-center gap-1 font-manrope;
   }
 
   /* Fix anchor slug links and scroll position due to fixed navbar */
diff --git a/website/src/app/page.tsx b/website/src/app/page.tsx
index 9c4f308c2..c071ed064 100644
--- a/website/src/app/page.tsx
+++ b/website/src/app/page.tsx
@@ -22,7 +22,6 @@ import {
   FadeIn,
 } from "@/components/Animations";
 import ElevatorPitch from "@/components/ElevatorPitch";
-import { manrope } from "@/lib/fonts";
 import "@/styles/hero.css";
 import CustomerTestimonials from "@/components/CustomerTestimonials";
 import FeatureCards from "@/components/FeatureCards";
@@ -42,17 +41,16 @@ export default function Page() {
         <div className="flex flex-col items-center mx-auto md:px-0 px-4 max-w-screen-md">
           <h1
             className={
-              manrope.className +
-              " mb-8 text-5xl sm:text-6xl md:text-7xl text-center drop-shadow-[inset_0_2px_0_0_rgba(255,255,255,100)] font-medium tracking-tight leading-tight bg-gradient-to-b from-white from-70% to-slate-200 text-transparent bg-clip-text"
+              "font-manrope mb-8 text-5xl sm:text-6xl md:text-7xl text-center drop-shadow-[inset_0_2px_0_0_rgba(255,255,255,100)] font-medium tracking-tight leading-tight bg-gradient-to-b from-white from-70% to-slate-200 text-transparent bg-clip-text"
             }
           >
             Upgrade your VPN to zero-trust access
           </h1>
-          <h3 className={"text-xl text-center text-neutral-400"}>
+          <p className={"text-xl text-center text-neutral-400"}>
             Firezone is a fast, flexible VPN replacement built on WireGuard®
             that protects your most valuable resources without tedious
             configuration.
-          </h3>
+          </p>
           <div className="flex sm:flex-row flex-col-reverse items-center justify-center sm:gap-x-6 md:gap-x-12 mt-10 w-full">
             <div className="flex items-center my-4 mr-4">
               <ActionLink
@@ -164,7 +162,7 @@ export default function Page() {
             Flexible security
           </h6>
           <h3
-            className={`mb-4 tracking-tight font-bold leading-tight inline-block ${manrope.className}`}
+            className={`mb-4 tracking-tight font-bold leading-tight inline-block font-manrope`}
           >
             Runs <span className="text-primary-450">everywhere </span>
             your business does
@@ -306,7 +304,7 @@ export default function Page() {
             Open source
           </h6>
           <h3
-            className={`mb-4 tracking-tight font-bold inline-block ${manrope.className}`}
+            className={`mb-4 tracking-tight font-bold inline-block font-manrope`}
           >
             <span className="text-primary-450">Open source</span> for
             transparency and trust
diff --git a/website/src/app/pricing/_page.tsx b/website/src/app/pricing/_page.tsx
index 19b603431..99635b1f3 100644
--- a/website/src/app/pricing/_page.tsx
+++ b/website/src/app/pricing/_page.tsx
@@ -7,6 +7,7 @@ import Link from "next/link";
 import PlanTable from "./plan_table";
 import { useState } from "react";
 import { Accordion } from "flowbite-react";
+import { FaCheck, FaCircleCheck } from "react-icons/fa6";
 
 export default function _Page() {
   let [annual, setAnnual] = useState(true);
@@ -14,104 +15,119 @@ export default function _Page() {
 
   return (
     <>
-      <section className="bg-white pb-14">
-        <div className="flex justify-center mt-12">
-          <span
-            className={
-              (annual ? "text-neutral-500 " : "text-neutral-900 ") +
-              "font-medium me-3 text-lg uppercase"
-            }
-          >
-            Monthly
-          </span>
-          <Toggle checked={annual} onChange={setAnnual} />
-          <span
-            className={
-              (annual ? "text-neutral-900 " : "text-neutral-500 ") +
-              "font-medium ms-3 text-lg uppercase"
-            }
-          >
-            Annual
-            <span className="text-sm text-neutral-700 text-primary-450">
-              {" "}
-              (Save 17%)
+      <section className="bg-neutral-100 pb-14">
+        <div className={`text-center font-manrope`}>
+          <div className="flex gap-4 justify-center ps-6 mb-2.5">
+            <span
+              className={
+                (annual
+                  ? "text-neutral-500 font-medium text-md"
+                  : "text-neutral-900 font-semibold text-lg") +
+                "text-left uppercase"
+              }
+            >
+              Monthly
             </span>
-          </span>
+            <Toggle checked={annual} onChange={setAnnual} />
+            <span
+              className={
+                (annual
+                  ? "text-neutral-900 font-semibold text-lg"
+                  : "text-neutral-500 font-medium text-md") +
+                "text-left uppercase"
+              }
+            >
+              Annual
+              <span className="ml-2 text-sm text-accent-600 font-semibold">
+                Save 17%
+              </span>
+            </span>
+          </div>
         </div>
-        <div className="mx-auto max-w-screen-2xl md:grid md:grid-cols-3 pt-14 md:gap-4 px-4">
-          <div className="p-8 bg-neutral-50 rounded border-2 border-neutral-200 mb-4">
-            <h3 className="mb-4 text-2xl tracking-tight font-semibold text-primary-450">
+
+        <div className="mx-auto bg-neutral-100 max-w-screen-2xl md:grid md:grid-cols-3 pt-10 md:gap-2 lg:gap-4 px-4">
+          <div
+            className={`p-8 md:p-6 lg:p-8 xl:p-10 bg-white rounded-xl shadow-light mb-4 font-manrope`}
+          >
+            <h3 className="mb-6 text-xl tracking-tight font-semibold text-primary-450">
               Starter
             </h3>
-            <p className="mb-8">
-              Secure remote access for individuals and small groups
-            </p>
-            <h2 className="mb-16 text-2xl sm:text-4xl tracking-tight font-semibold text-neutral-900">
+            <h2 className="mb-6 text-2xl sm:text-4xl tracking-tight font-bold text-neutral-900">
               Free
             </h2>
-            <div className="mb-24 w-full text-center">
+            <p className="mb-8 text-sm text-neutral-600">
+              Secure remote access for individuals and small groups.
+            </p>
+            <div className="mb-2 w-full text-center">
               <Link href="https://app.firezone.dev/sign_up">
                 <button
                   type="button"
-                  className="bg-white w-64 text-lg px-5 py-2.5 md:w-44 md:text-sm md:px-3 md:py-2.5 lg:w-64 lg:text-lg lg:px-5 lg:py-2.5 border border-1 border-primary-450 hover:ring-1 hover:ring-primary-450 font-semibold tracking-tight rounded shadow-lg text-primary-450 duration-50 transition transform"
+                  className="bg-neutral-100 w-full text-lg px-5 py-2.5 md:text-sm md:px-3 md:py-2.5 lg:text-lg lg:px-5 lg:py-2.5 border
+                  border-1 border-neutral-500  hover:brightness-90 font-semibold tracking-tight rounded-full text-neutral-950 duration-50 transition transform"
                 >
                   Sign up
                 </button>
               </Link>
             </div>
-            <ul role="list" className="font-medium space-y-2">
+            <p className="text-sm text-center text-neutral-600 mb-8">
+              No credit card required.
+            </p>
+            <ul
+              role="list"
+              className="text-sm md:text-md font-medium space-y-4"
+            >
               <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 ">
+                <FaCheck className="mt-0.5 flex-shrink-0 w-4 h-4 text-primary-450" />
+                <span className="leading-tight text-neutral-900">
                   Up to 6 users
                 </span>
               </li>
               <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 ">
+                <FaCheck className="mt-0.5 flex-shrink-0 w-4 h-4 text-primary-450" />
+                <span className="leading-tight text-neutral-900">
                   Access your homelab or VPC from anywhere
                 </span>
               </li>
               <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 ">
+                <FaCheck className="mt-0.5 flex-shrink-0 w-4 h-4 text-primary-450" />
+                <span className="leading-tight text-neutral-900">
                   Native clients for Windows, Linux, macOS, iOS, Android
                 </span>
               </li>
               <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 ">
+                <FaCheck className="mt-0.5 flex-shrink-0 w-4 h-4 text-primary-450" />
+                <span className="leading-tight text-neutral-900">
                   Authenticate via email or OpenID Connect (OIDC)
                 </span>
               </li>
               <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 ">
+                <FaCheck className="mt-0.5 flex-shrink-0 w-4 h-4 text-primary-450" />
+                <span className="leading-tight text-neutral-900">
                   Load balancing and automatic failover
                 </span>
               </li>
               <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 ">
+                <FaCheck className="mt-0.5 flex-shrink-0 w-4 h-4 text-primary-450" />
+                <span className="leading-tight text-neutral-900">
                   No firewall configuration required
                 </span>
               </li>
               <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 ">
+                <FaCheck className="mt-0.5 flex-shrink-0 w-4 h-4 text-primary-450" />
+                <span className="leading-tight text-neutral-900">
                   Community Support
                 </span>
               </li>
             </ul>
           </div>
-          <div className="p-8 bg-neutral-50 rounded border-2 border-neutral-200 mb-4">
-            <h3 className="mb-4 text-2xl tracking-tight font-semibold text-primary-450">
+          <div
+            className={`p-8 md:p-6 lg:p-8 xl:p-10 bg-white rounded-xl shadow-light mb-4 font-manrope`}
+          >
+            <h3 className="mb-6 text-xl tracking-tight font-semibold text-primary-450">
               Team
             </h3>
-            <p className="mb-8">
-              Zero trust network access for teams and organizations
-            </p>
-            <h2 className="mb-16 text-2xl sm:text-4xl tracking-tight font-semibold text-neutral-900">
+
+            <h2 className="mb-6 text-2xl sm:text-4xl tracking-tight font-bold text-neutral-900">
               {annual && (
                 <>
                   <span className="line-through">$5</span>
@@ -120,144 +136,184 @@ export default function _Page() {
               )}
               {!annual && <span>$5</span>}
               <span className="h-full">
-                <span className="text-xs text-neutral-700 inline-block align-bottom ml-1 mb-1">
+                <span className="font-medium text-sm text-neutral-700 inline-block align-bottom tracking-tight ml-1 mb-1">
                   {" "}
-                  per user / month
+                  per user/month
                 </span>
               </span>
             </h2>
-            <div className="mb-16 w-full text-center">
+            <p className="mb-8 text-sm text-neutral-600">
+              Zero trust network access for teams and organizations
+            </p>
+            <div className="mb-10 w-full text-center">
               <Link href="https://app.firezone.dev/sign_up">
                 <button
                   type="button"
-                  className="bg-white w-64 text-lg px-5 py-2.5 md:w-44 md:text-sm md:px-3 md:py-2.5 lg:w-64 lg:text-lg lg:px-5 lg:py-2.5 border border-1 border-primary-450 hover:ring-1 hover:ring-primary-450 font-semibold tracking-tight rounded shadow-lg text-primary-450 duration-50 transition transform"
+                  className="bg-primary-450 w-full text-lg px-5 py-2.5 md:text-sm md:px-3 md:py-2.5 lg:text-lg lg:px-5 lg:py-2.5
+                   hover:brightness-90 font-semibold tracking-tight rounded-full text-neutral-100 duration-50 transition transform"
                 >
                   Sign up
                 </button>
               </Link>
             </div>
-            <p className="mb-2">
-              <strong>Everything in Starter, plus:</strong>
+            <p
+              className={`${
+                annual ? "hidden" : "block"
+              } text-primary-450 font-semibold cursor-pointer text-center -mt-8 mb-8 text-sm`}
+              onClick={() => {
+                setAnnual(true);
+              }}
+            >
+              Save 17% by switching to annual
             </p>
-            <ul role="list" className="font-medium space-y-2">
+
+            <ul
+              role="list"
+              className="text-sm md:text-md font-medium space-y-4"
+            >
               <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 ">
+                <FaCircleCheck className="flex-shrink-0 w-4 h-4 text-accent-450" />
+                <span className="leading-tight font-bold text-neutral-900 ">
+                  Everything in Starter
+                </span>
+              </li>
+              <div className="flex w-full gap-3 items-center">
+                <div className="h-[1px] w-full bg-neutral-300" />
+                <p className="uppercase text-neutral-900 font-medium">plus</p>
+                <div className="h-[1px] w-full bg-neutral-300" />
+              </div>
+              <li className="flex space-x-2.5">
+                <FaCheck className="mt-0.5 flex-shrink-0 w-4 h-4 text-primary-450" />
+                <span className="leading-tight font-bold text-neutral-900">
                   Up to 100 users
                 </span>
               </li>
               <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 ">
+                <FaCheck className="mt-0.5 flex-shrink-0 w-4 h-4 text-primary-450" />
+                <span className="leading-tight text-neutral-900">
                   Resource access logs
                 </span>
               </li>
               <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 ">
+                <FaCheck className="mt-0.5 flex-shrink-0 w-4 h-4 text-primary-450" />
+                <span className="leading-tight text-neutral-900">
                   Port and protocol traffic restrictions
                 </span>
               </li>
               <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 ">
+                <FaCheck className="mt-0.5 flex-shrink-0 w-4 h-4 text-primary-450" />
+                <span className="leading-tight text-neutral-900">
                   Conditional access policies
                 </span>
               </li>
               <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 ">
+                <FaCheck className="mt-0.5 flex-shrink-0 w-4 h-4 text-primary-450" />
+                <span className="leading-tight text-neutral-900">
                   Customize your account slug
                 </span>
               </li>
               <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 ">
+                <FaCheck className="mt-0.5 flex-shrink-0 w-4 h-4 text-primary-450" />
+                <span className="leading-tight text-neutral-900">
                   Faster relay network
                 </span>
               </li>
               <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 ">
+                <FaCheck className="mt-0.5 flex-shrink-0 w-4 h-4 text-primary-450" />
+                <span className="leading-tight text-neutral-900">
                   Priority email support
                 </span>
               </li>
             </ul>
           </div>
-          <div className="p-8 bg-neutral-950 text-neutral-50 rounded shadow border border-primary-450 mb-4">
-            <div className="mb-4 flex items-center justify-between">
-              <h3 className="text-2xl tracking-tight font-semibold text-primary-450">
+          <div
+            className={`p-8 md:p-6 lg:p-8 xl:p-10 bg-neutral-950 text-neutral-50 rounded-xl shadow-light mb-4 font-manrope`}
+          >
+            <div className="mb-6 flex items-center justify-between">
+              <h3 className="text-xl tracking-tight font-semibold text-primary-450">
                 Enterprise
               </h3>
-              <span className="font-semibold uppercase text-xs rounded bg-neutral-50 text-neutral-800 px-1 py-0.5">
+              <span className="text-center font-bold w-fit uppercase text-xs rounded-full bg-neutral-50 text-primary-450 px-3 py-1">
                 30-day trial
               </span>
             </div>
-            <p className="mb-8 font-semibold">
-              Compliance-ready security for large organizations
-            </p>
-            <h2 className="mb-16 text-2xl sm:text-4xl tracking-tight font-semibold">
+            <h2 className="mb-6 text-2xl sm:text-4xl tracking-tight font-bold text-neutral-50">
               Contact us
             </h2>
-            <div className="mb-16 w-full text-center">
+            <p className="mb-8 text-sm text-neutral-400">
+              Compliance-ready security for large organizations
+            </p>
+            <div className="mb-10 w-full text-center">
               <Link href="/contact/sales">
                 <button
                   type="button"
-                  className="w-64 text-lg px-5 py-2.5 md:w-44 md:text-sm md:px-3 md:py-2.5 lg:w-64 lg:text-lg lg:px-5 lg:py-2.5 text-white font-semibold hover:ring-2 hover:ring-primary-450 tracking-tight transition transform duration-50 rounded bg-primary-450 shadow-lg shadow-primary-700"
+                  className="bg-primary-450 w-full text-lg px-5 py-2.5 md:text-sm md:px-3 md:py-2.5 lg:text-lg lg:px-5 lg:py-2.5
+                   hover:brightness-90 font-semibold tracking-tight rounded-full text-neutral-100 duration-50 transition transform"
                 >
                   Request a demo
                 </button>
               </Link>
             </div>
-            <p className="mb-2">
-              <strong>Everything in Team, plus:</strong>
-            </p>
-            <ul role="list" className="font-medium space-y-2">
+
+            <ul
+              role="list"
+              className="text-sm md:text-md font-medium space-y-4 text-neutral-200"
+            >
               <li className="flex space-x-2.5">
-                <HiCheck className="flex-shrink-0 w-5 h-5" />
-                <span className="leading-tight">Unlimited users</span>
+                <FaCircleCheck className="flex-shrink-0 w-4 h-4 text-accent-300" />
+                <span className="leading-tight font-bold text-neutral-50">
+                  Everything in Starter and Team
+                </span>
+              </li>
+              <div className="flex w-full gap-3 items-center">
+                <div className="h-[1px] w-full bg-neutral-700" />
+                <p className="uppercase text-neutral-50 font-medium">plus</p>
+                <div className="h-[1px] w-full bg-neutral-700" />
+              </div>
+              <li className="flex space-x-2.5">
+                <FaCheck className="mt-0.5 flex-shrink-0 text-primary-450 w-4 h-4" />
+                <span className="leading-tight font-bold text-neutral-50">
+                  Unlimited users
+                </span>
               </li>
               <li className="flex space-x-2.5">
-                <HiCheck className="flex-shrink-0 w-5 h-5" />
+                <FaCheck className="mt-0.5 flex-shrink-0 text-primary-450 w-4 h-4" />
+                <span className="leading-tight font-bold text-neutral-50">
+                  Unthrottled relay network
+                </span>
+              </li>
+              <li className="flex space-x-2.5">
+                <FaCheck className="mt-0.5 flex-shrink-0 text-primary-450 w-4 h-4" />
                 <span className="leading-tight">
                   Directory sync for Google, Entra ID, Okta, and JumpCloud
                 </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">
-                    Unthrottled
-                  </span>{" "}
-                  relay network
-                </span>
-              </li>
-              <li className="flex space-x-2.5">
-                <HiCheck className="flex-shrink-0 w-5 h-5" />
+                <FaCheck className="mt-0.5 flex-shrink-0 text-primary-450 w-4 h-4" />
                 <span className="leading-tight">
                   Dedicated Slack support channel
                 </span>
               </li>
               <li className="flex space-x-2.5">
-                <HiCheck className="flex-shrink-0 w-5 h-5" />
+                <FaCheck className="mt-0.5 flex-shrink-0 text-primary-450 w-4 h-4" />
                 <span className="leading-tight">Uptime SLAs</span>
               </li>
               <li className="flex space-x-2.5">
-                <HiCheck className="flex-shrink-0 w-5 h-5" />
+                <FaCheck className="mt-0.5 flex-shrink-0 text-primary-450 w-4 h-4" />
                 <span className="leading-tight">
                   40-hour pentest &amp; SOC 2 reports
                 </span>
               </li>
               <li className="flex space-x-2.5">
-                <HiCheck className="flex-shrink-0 w-5 h-5" />
+                <FaCheck className="mt-0.5 flex-shrink-0 text-primary-450 w-4 h-4" />
                 <span className="leading-tight">Roadmap acceleration</span>
               </li>
               <li className="flex space-x-2.5">
-                <HiCheck className="flex-shrink-0 w-5 h-5" />
+                <FaCheck className="mt-0.5 flex-shrink-0 text-primary-450 w-4 h-4" />
                 <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" />
+                <FaCheck className="mt-0.5 flex-shrink-0 text-primary-450 w-4 h-4" />
                 <span className="leading-tight">Annual invoicing</span>
               </li>
             </ul>
diff --git a/website/src/app/pricing/layout.tsx b/website/src/app/pricing/layout.tsx
index 1f412388a..41c760eb5 100644
--- a/website/src/app/pricing/layout.tsx
+++ b/website/src/app/pricing/layout.tsx
@@ -12,12 +12,14 @@ export default function Layout({ children }: { children: React.ReactNode }) {
           className="py-12 mx-auto"
         />
       </div>
-      <div className="bg-neutral-50 border-b border-neutral-100">
-        <div className="py-8 px-4 sm:py-10 sm:px-6 md:py-12 md:px-8 lg:py-14 lg:px-10 mx-auto max-w-screen-lg w-full">
-          <h1 className="justify-center text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-bold tracking-tight">
+      <div className="bg-neutral-100 border-b border-neutral-100">
+        <div className="py-8 px-4 sm:py-12 sm:px-6 md:py-16 md:px-8 lg:py-20 lg:px-10 mx-auto max-w-screen-lg w-full">
+          <h1
+            className={`justify-center text-5xl sm:text-6xl md:text-7xl font-bold tracking-tight`}
+          >
             Plans & Pricing
           </h1>
-          <p className="text-center text-md sm:text-lg md:text-xl lg:text-2xl mt-4 md:mt-6 lg:mt-8 tracking-tight">
+          <p className="text-center text-md md:text-lg lg:text-xl mt-2 md:mt-4 tracking-tight">
             Pick a plan that best suits your needs. No credit card required to
             sign up.
           </p>
diff --git a/website/src/app/support/layout.tsx b/website/src/app/support/layout.tsx
index 0e1ee813b..23748ecdb 100644
--- a/website/src/app/support/layout.tsx
+++ b/website/src/app/support/layout.tsx
@@ -13,11 +13,13 @@ export default function Layout({ children }: { children: React.ReactNode }) {
         />
       </div>
       <div className="bg-neutral-50 border-b border-neutral-100">
-        <div className="py-8 px-4 sm:py-10 sm:px-6 md:py-12 md:px-8 lg:py-14 lg:px-10 mx-auto max-w-screen-lg w-full">
-          <h1 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-bold tracking-tight">
+        <div className="py-8 px-4 sm:py-12 sm:px-6 md:py-16 md:px-8 lg:py-20 lg:px-10 mx-auto max-w-screen-lg w-full">
+          <h1
+            className={`justify-center text-5xl sm:text-6xl md:text-7xl font-bold tracking-tight`}
+          >
             Support
           </h1>
-          <p className="text-md sm:text-lg md:text-xl lg:text-2xl mt-4 md:mt-6 lg:mt-8 tracking-tight">
+          <p className="text-center text-md md:text-lg lg:text-xl mt-2 md:mt-4 tracking-tight">
             Need help? We've got you covered. See our support options below.
           </p>
         </div>
diff --git a/website/src/components/BattleCard/index.tsx b/website/src/components/BattleCard/index.tsx
index 2a9d7bb60..d232dd164 100644
--- a/website/src/components/BattleCard/index.tsx
+++ b/website/src/components/BattleCard/index.tsx
@@ -1,7 +1,6 @@
 import Link from "next/link";
 import Image from "next/image";
 import { HiArrowLongRight, HiCheck, HiXMark } from "react-icons/hi2";
-import { manrope } from "@/lib/fonts";
 
 export default function BattleCard2() {
   return (
@@ -11,7 +10,7 @@ export default function BattleCard2() {
           Compare
         </h6>
         <h3
-          className={` text-3xl md:text-4xl lg:text-5xl tracking-tight font-bold inline-block text-center my-2 ${manrope.className}`}
+          className={` text-3xl md:text-4xl lg:text-5xl tracking-tight font-bold inline-block text-center my-2 font-manrope`}
         >
           More features
           <span className="text-primary-450"> for less</span>
diff --git a/website/src/components/CustomerTestimonials/index.tsx b/website/src/components/CustomerTestimonials/index.tsx
index 032f11afe..7ca54f929 100644
--- a/website/src/components/CustomerTestimonials/index.tsx
+++ b/website/src/components/CustomerTestimonials/index.tsx
@@ -6,7 +6,6 @@ import Link from "next/link";
 import { FaQuoteLeft } from "react-icons/fa";
 import { HiArrowLeft, HiArrowRight } from "react-icons/hi2";
 import { FaHeart } from "react-icons/fa";
-import { manrope } from "@/lib/fonts";
 import ActionLink from "@/components/ActionLink";
 import { Route } from "next";
 
@@ -119,7 +118,7 @@ export default function CustomerTestimonials() {
         <div className="px-4 sm:px-16 lg:px-10 xl:px-0 xl:pr-16 mb-12 md:mb-16">
           <div>
             <h3
-              className={`text-white text-3xl md:text-4xl leading-5 xl:text-5xl tracking-tight font-medium inline-block text-wrap sm:text-nowrap text-left ${manrope.className}`}
+              className={`text-white text-3xl leading-5 md:text-4xl lg:text-5xl tracking-tight font-medium inline-block text-left mb-2 font-manrope`}
             >
               Customers{" "}
               <FaHeart className="text-primary-450 w-12 h-12 mx-1 inline-block" />{" "}
diff --git a/website/src/components/ElevatorPitch/index.tsx b/website/src/components/ElevatorPitch/index.tsx
index c66c1e5dd..746791958 100644
--- a/website/src/components/ElevatorPitch/index.tsx
+++ b/website/src/components/ElevatorPitch/index.tsx
@@ -7,7 +7,6 @@ import {
 } from "react-icons/hi2";
 import { HiLightningBolt } from "react-icons/hi";
 import { FaBookOpen } from "react-icons/fa";
-import { manrope } from "@/lib/fonts";
 import Image from "next/image";
 import { SlideIn } from "@/components/Animations";
 
@@ -91,7 +90,7 @@ export default function ElevatorPitch() {
                 Stay Connected
               </h6>
               <h3
-                className={`mb-4 text-3xl md:text-4xl lg:text-5xl leading-tight tracking-tight font-bold inline-block ${manrope.className}`}
+                className={`mb-4 text-3xl md:text-4xl lg:text-5xl leading-tight tracking-tight font-bold inline-block font-manrope`}
               >
                 Supercharge your workforce
                 <span className="text-primary-450"> in minutes.</span>
diff --git a/website/src/components/FeatureCards/index.tsx b/website/src/components/FeatureCards/index.tsx
index 6d5bcd195..6ceec9ab6 100644
--- a/website/src/components/FeatureCards/index.tsx
+++ b/website/src/components/FeatureCards/index.tsx
@@ -3,7 +3,6 @@
 import { useState } from "react";
 import { HiCloud, HiMiniPuzzlePiece, HiLockClosed } from "react-icons/hi2";
 import { SlideIn } from "@/components/Animations";
-import { manrope } from "@/lib/fonts";
 import ActionLink from "../ActionLink";
 
 export default function FeatureCards() {
@@ -15,7 +14,7 @@ export default function FeatureCards() {
             Built for you
           </h6>
           <h3
-            className={`mb-4 text-3xl md:text-4xl lg:text-5xl leading-tight text-pretty tracking-tight font-bold inline-block ${manrope.className}`}
+            className={`mb-4 text-3xl md:text-4xl lg:text-5xl leading-tight text-pretty tracking-tight font-bold inline-block font-manrope`}
           >
             Simplify access management
             <span className="text-primary-450"> with WireGuard.</span>
@@ -47,7 +46,7 @@ export default function FeatureCards() {
             <HiCloud color="#EF7E88" className="w-6 h-6 lg:w-7 lg:h-7" />
           </div>
           <h4
-            className={`text-md md:text-lg tracking-tight text-neutral-900 font-semibold mb-1 ${manrope.className}`}
+            className={`text-md md:text-lg tracking-tight text-neutral-900 font-semibold mb-1 font-manrope`}
           >
             Flexible
           </h4>
@@ -66,7 +65,7 @@ export default function FeatureCards() {
             <HiLockClosed color="#719CF1" className="w-6 h-6 lg:w-7 lg:h-7" />
           </div>
           <h4
-            className={`text-md md:text-lg tracking-tight text-neutral-900 font-semibold mb-1 ${manrope.className}`}
+            className={`text-md md:text-lg tracking-tight text-neutral-900 font-semibold mb-1 font-manrope`}
           >
             Secure
           </h4>
@@ -88,7 +87,7 @@ export default function FeatureCards() {
             />
           </div>
           <h4
-            className={`text-md md:text-lg tracking-tight text-neutral-900 font-semibold mb-1 ${manrope.className}`}
+            className={`text-md md:text-lg tracking-tight text-neutral-900 font-semibold mb-1 font-manrope`}
           >
             Granular
           </h4>
diff --git a/website/src/components/FeatureSection/index.tsx b/website/src/components/FeatureSection/index.tsx
index dddb9b992..c73a6253c 100644
--- a/website/src/components/FeatureSection/index.tsx
+++ b/website/src/components/FeatureSection/index.tsx
@@ -1,5 +1,3 @@
-import { manrope } from "@/lib/fonts";
-
 export default function FeatureSection({
   reverse = false,
   title,
@@ -21,7 +19,7 @@ export default function FeatureSection({
         {titleCaption}
       </h6>
       <h3
-        className={`mb-4 text-center lg:text-left text-3xl md:text-4xl lg:text-5xl leading-tight text-pretty tracking-tight font-bold inline-block ${manrope.className}`}
+        className={`mb-4 text-center lg:text-left text-3xl md:text-4xl lg:text-5xl leading-tight text-pretty tracking-tight font-bold inline-block font-manrope`}
       >
         {title}
       </h3>
diff --git a/website/src/components/Footer/index.tsx b/website/src/components/Footer/index.tsx
index 79a9956a9..db575f146 100644
--- a/website/src/components/Footer/index.tsx
+++ b/website/src/components/Footer/index.tsx
@@ -14,14 +14,13 @@ import {
   LinuxIcon,
   AndroidIcon,
 } from "@/components/Icons";
-import { manrope } from "@/lib/fonts";
 
 export default function Footer() {
   return (
     <footer className="relative bg-neutral-950 py-16 md:px-16 px-4 text-neutral-500">
       <div className="flex flex-col justify-center items-center text-center">
         <h3
-          className={`text-neutral-200 mb-4 text-4xl md:text-6xl text-pretty tracking-tight justify-center font-semibold ${manrope.className}`}
+          className={`text-neutral-200 mb-4 text-4xl md:text-6xl text-pretty tracking-tight justify-center font-semibold font-manrope`}
         >
           Ready to get started?
         </h3>
diff --git a/website/src/components/RootLayout/index.tsx b/website/src/components/RootLayout/index.tsx
index a12c2b075..517c96d1f 100644
--- a/website/src/components/RootLayout/index.tsx
+++ b/website/src/components/RootLayout/index.tsx
@@ -7,10 +7,23 @@ import RootNavbar from "@/components/RootNavbar";
 import Banner from "@/components/Banner";
 import Script from "next/script";
 import Footer from "@/components/Footer";
-import { source_sans_3 } from "@/lib/fonts";
 import { HiArrowLongRight } from "react-icons/hi2";
 import { usePathname, useSearchParams } from "next/navigation";
 import Analytics from "@/components/Analytics";
+import { Source_Sans_3, Manrope } from "next/font/google";
+
+const source_sans_3 = Source_Sans_3({
+  subsets: ["latin"],
+  variable: "--font-source-sans",
+  display: "swap",
+  weight: ["200", "300", "400", "500", "600", "700", "800", "900"],
+});
+const manrope = Manrope({
+  subsets: ["latin"],
+  variable: "--font-manrope",
+  display: "swap",
+  weight: ["200", "300", "400", "500", "600", "700", "800"],
+});
 
 export const metadata: Metadata = {
   title: "WireGuard® for Enterprise • Firezone",
@@ -23,16 +36,12 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang="en">
+    <html lang="en" className={`${source_sans_3.variable} ${manrope.variable}`}>
       <Script
         type="text/javascript"
         src="https://app.termly.io/resource-blocker/c4df1a31-22d9-4000-82e6-a86cbec0bba0?autoBlock=on"
       />
-      <body
-        className={
-          "subpixel-antialiased text-neutral-900 " + source_sans_3.className
-        }
-      >
+      <body className={"subpixel-antialiased text-neutral-900 font-sans"}>
         <Banner active={false}>
           <p className="mx-auto text-center">
             Firezone 1.0 is here!{" "}
diff --git a/website/src/components/SingleFeature/index.tsx b/website/src/components/SingleFeature/index.tsx
index 2beb4c0ea..58ac41b06 100644
--- a/website/src/components/SingleFeature/index.tsx
+++ b/website/src/components/SingleFeature/index.tsx
@@ -3,7 +3,6 @@
 import { ReactNode, useState } from "react";
 import { HiCloud, HiMiniPuzzlePiece, HiLockClosed } from "react-icons/hi2";
 import { SlideIn } from "@/components/Animations";
-import { manrope } from "@/lib/fonts";
 import ActionLink from "../ActionLink";
 import { Route } from "next";
 
@@ -39,7 +38,7 @@ export default function SingleFeature({
         </div>
         <div className="max-w-screen-md">
           <p
-            className={`text-md text-left text-pretty mb-12 text-neutral-600 font-medium ${manrope.className}`}
+            className={`text-md text-left text-pretty mb-12 text-neutral-600 font-medium font-manrope`}
           >
             {desc}
           </p>
diff --git a/website/src/components/UseCaseCards/index.tsx b/website/src/components/UseCaseCards/index.tsx
index d28ec3941..ba5b1f5fb 100644
--- a/website/src/components/UseCaseCards/index.tsx
+++ b/website/src/components/UseCaseCards/index.tsx
@@ -1,13 +1,12 @@
 import Link from "next/link";
 import Image from "next/image";
 import { HiArrowLongRight, HiCheck, HiXMark } from "react-icons/hi2";
-import { manrope } from "@/lib/fonts";
 import { Route } from "next";
 
 function CardHeading({ children }: { children: React.ReactNode }) {
   return (
     <h4
-      className={`font-semibold tracking-tight leading-none text-2xl mb-3 inline-block ${manrope.className}`}
+      className={`font-semibold tracking-tight leading-none text-xl mb-3 inline-block font-manrope`}
     >
       {children}
     </h4>
@@ -47,7 +46,7 @@ export default function UseCaseCards() {
           Use cases
         </h6>
         <h3
-          className={`px-4 mb-8 text-3xl md:text-4xl lg:text-5xl text-center leading-tight tracking-tight font-bold inline-block ${manrope.className}`}
+          className={`px-4 mb-8 text-3xl md:text-4xl lg:text-5xl text-center leading-tight tracking-tight font-bold inline-block font-manrope`}
         >
           One product. Endless possibilities.
           <span className="text-primary-450">Zero </span>hassle.
diff --git a/website/src/lib/fonts.ts b/website/src/lib/fonts.ts
deleted file mode 100644
index cf3d683ef..000000000
--- a/website/src/lib/fonts.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Source_Sans_3, Manrope } from "next/font/google";
-
-const source_sans_3 = Source_Sans_3({
-  subsets: ["latin"],
-  weight: ["200", "300", "400", "500", "600", "700", "800", "900"],
-});
-const manrope = Manrope({
-  subsets: ["latin"],
-  weight: ["200", "300", "400", "500", "600", "700", "800"],
-});
-
-export { source_sans_3, manrope };
diff --git a/website/tailwind.config.js b/website/tailwind.config.js
index 9067686ae..5acd58482 100644
--- a/website/tailwind.config.js
+++ b/website/tailwind.config.js
@@ -1,3 +1,4 @@
+/** @type {import('tailwindcss').Config} */
 import flowbite from "flowbite-react/tailwind";
 
 const firezoneColors = {
@@ -58,6 +59,15 @@ module.exports = {
   ],
   theme: {
     extend: {
+      fontFamily: {
+        sans: ["var(--font-source-sans)"],
+        manrope: ["var(--font-manrope)"],
+      },
+      boxShadow: {
+        drop: "0px 16px 32px -4px rgba(12, 12, 13, 0.1), 0px 4px 4px -4px rgba(12, 12, 13, 0.05)",
+        light:
+          "0px 4px 8px 3px rgba(12, 12, 13, 0.08), 0px 1px 3px 0 rgba(12, 12, 13, 0.15)",
+      },
       gridTemplateColumns: {
         // Simple 16 column grid
         16: "repeat(16, minmax(0, 1fr))",