fix(website): New subscription cards style (#6549)

Signed-off-by: Patti <139997703+Patticatti@users.noreply.github.com>
2026-01-27 18:18:55 +00:00 · 2024-09-03 17:40:40 -07:00
parent 29d46bcb87
commit cc442bfebf
18 changed files with 222 additions and 164 deletions
--- 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>
--- 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">
--- 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 */
--- 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
--- 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>
--- 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>
--- 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>
--- 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>
--- 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" />{" "}
--- 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>
--- 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>
--- 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>
--- 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>
--- 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!{" "}
--- 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>
--- 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.
--- a/website/src/lib/fonts.ts
+++ b/website/src/lib/fonts.ts
@@ -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 };
--- 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))",