From 90ea603584174837c22e0909430d8044ee094593 Mon Sep 17 00:00:00 2001
From: Jamil <jamilbk@users.noreply.github.com>
Date: Fri, 5 Jul 2024 01:14:07 -0700
Subject: [PATCH] refactor(website): landing page iteration 2 (#5753)

---
 website/src/app/blog/layout.tsx             | 10 +++
 website/src/app/blog/page.tsx               |  8 +--
 website/src/app/page.tsx                    | 80 ++++++++++++---------
 website/src/app/pricing/_page.tsx           | 35 +++------
 website/src/app/pricing/layout.tsx          | 11 +++
 website/src/components/BattleCard/index.tsx | 26 ++++++-
 6 files changed, 103 insertions(+), 67 deletions(-)

diff --git a/website/src/app/blog/layout.tsx b/website/src/app/blog/layout.tsx
index 9e955134b..b187ab3aa 100644
--- a/website/src/app/blog/layout.tsx
+++ b/website/src/app/blog/layout.tsx
@@ -13,6 +13,16 @@ 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="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-bold tracking-tight">
+            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">
+            Announcements, how-tos, and more from the Firezone team.
+          </p>
+        </div>
+      </div>
       {children}
       <div className="bg-neutral-50 w-screen">
         <div className="px-4 py-8 max-w-md md:max-w-screen-lg mx-auto">
diff --git a/website/src/app/blog/page.tsx b/website/src/app/blog/page.tsx
index 618f5fabe..69d8abdb3 100644
--- a/website/src/app/blog/page.tsx
+++ b/website/src/app/blog/page.tsx
@@ -14,13 +14,7 @@ export default function Page() {
   return (
     <section>
       <div className="py-6 px-4 sm:py-8 sm:px-6 md:py-10 md:px-8 lg:py-12 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 mt-8">
-          Blog
-        </h1>
-        <p className="text-lg md:text-xl lg:text-2xl mt-4 md:mt-6 lg:mt-8 tracking-tight">
-          Announcements, insights, and more from the Firezone team.
-        </p>
-        <div className="mt-14 grid divide-y">
+        <div className="grid divide-y">
           <SummaryCard
             title="sans-IO: The secret to effective Rust for network services"
             date="July 2, 2024"
diff --git a/website/src/app/page.tsx b/website/src/app/page.tsx
index 0164e54e6..cc604fc45 100644
--- a/website/src/app/page.tsx
+++ b/website/src/app/page.tsx
@@ -39,9 +39,11 @@ export default function Page() {
   return (
     <>
       <section className="bg-neutral-100 pt-24">
-        <div className="px-4 py-8 mx-auto max-w-screen-xl text-center lg:py-16 lg:px-12">
-          <h1 className="mb-8 md:text-6xl text-5xl justify-center inline-block font-extrabold tracking-tight leading-none text-neutral-900">
-            Secure remote access.
+        <div className="px-4 py-8 mx-auto max-w-screen-xl lg:py-16 lg:px-12">
+          <h1 className="text-center mb-8 md:text-8xl text-5xl inline-block font-bold tracking-tight leading-none text-neutral-900">
+            <SlideIn direction="right" delay={0.0} className="md:inline-block">
+              Secure remote access.
+            </SlideIn>
             <SlideIn
               direction="left"
               delay={0.5}
@@ -51,7 +53,7 @@ export default function Page() {
             </SlideIn>
           </h1>
           <div className="max-w-screen-md mx-auto">
-            <h3 className="mb-8 text-xl tracking-tight justify-center font-medium text-neutral-900 inline-block">
+            <h3 className="text-center mb-8 text-xl tracking-tight font-medium text-neutral-900 inline-block">
               Firezone is a fast, flexible VPN replacement built on WireGuard®
               that{" "}
               <span className="text-primary-450 font-bold">eliminates</span>{" "}
@@ -62,13 +64,13 @@ export default function Page() {
             <div className="w-full max-w-screen-sm flex flex-wrap justify-between mt-8">
               <button
                 type="button"
-                className="mx-auto mb-8 w-64 inline-flex justify-center items-center py-3 px-5 font-semibold text-center text-primary-450 rounded border border-primary-450 bg-white hover:ring-2 hover:ring-primary-200 duration-50 transform transition"
+                className="text-xl mx-auto mb-8 w-64 inline-flex justify-center items-center py-3 px-5 font-semibold text-center text-primary-450 rounded border border-primary-450 bg-white hover:ring-2 hover:ring-primary-200 duration-50 transform transition"
               >
                 <Link href="https://app.firezone.dev/sign_up">Sign up now</Link>
               </button>
               <button
                 type="button"
-                className="mx-auto mb-8 w-64 inline-flex shadow-lg justify-center items-center py-3 px-5 font-semibold text-center text-white rounded bg-primary-450 hover:ring-2 hover:ring-primary-300 duration-50 transform transition"
+                className="text-xl mx-auto mb-8 w-64 inline-flex shadow-lg justify-center items-center py-3 px-5 font-semibold text-center text-white rounded bg-primary-450 hover:ring-2 hover:ring-primary-300 duration-50 transform transition"
               >
                 <Link href="/contact/sales">Book a demo</Link>
                 <HiArrowLongRight className="ml-2 -mr-1 w-6 h-6" />
@@ -100,8 +102,8 @@ export default function Page() {
 
       {/* Feature section 1: Secure access to your most sensitive resources in minutes. */}
       <section className="bg-white py-8 md:py-16">
-        <div className="sm:mx-auto px-4 mb-2 md:mb-4 sm:text-center">
-          <h3 className="text-2xl md:text-4xl tracking-tight font-bold inline-block">
+        <div className="sm:mx-auto px-4 mb-4 md:mb-8 sm:text-center">
+          <h3 className="text-2xl md:text-6xl tracking-tight font-bold inline-block">
             Upgrade to zero-trust access in{" "}
             <span className="text-primary-450">minutes</span>.
           </h3>
@@ -177,8 +179,8 @@ export default function Page() {
 
       {/* Feature section 2: Achieve compliance in minutes, not weeks. */}
       <section className="bg-white py-8 md:py-16">
-        <div className="sm:mx-auto px-4 mb-2 md:mb-4 sm:text-center">
-          <h3 className="text-2xl md:text-4xl tracking-tight font-bold inline-block">
+        <div className="sm:mx-auto px-4 mb-4 md:mb-8 sm:text-center">
+          <h3 className="text-2xl md:text-6xl tracking-tight font-bold inline-block">
             Achieve compliance{" "}
             <span className="text-primary-450">without </span>
             the headache.
@@ -213,8 +215,8 @@ export default function Page() {
 
       {/* Feature section 3: Add 2FA to WireGuard. */}
       <section className="bg-neutral-50 py-8 md:py-16">
-        <div className="sm:mx-auto px-4 mb-2 md:mb-4 sm:text-center">
-          <h3 className="text-2xl md:text-4xl tracking-tight font-bold inline-block">
+        <div className="sm:mx-auto px-4 mb-4 md:mb-8 sm:text-center">
+          <h3 className="text-2xl md:text-6xl tracking-tight font-bold inline-block">
             Add <span className="text-primary-450">two-factor </span>
             auth to WireGuard.
           </h3>
@@ -252,8 +254,8 @@ export default function Page() {
 
       {/* Feature section 4: Say goodbye to bandwidth problems. */}
       <section className="bg-neutral-900 text-neutral-50 py-8 md:py-16">
-        <div className="sm:mx-auto px-4 mb-2 md:mb-4 sm:text-center">
-          <h3 className="text-2xl md:text-4xl tracking-tight font-bold inline-block">
+        <div className="sm:mx-auto px-4 mb-4 md:mb-8 sm:text-center">
+          <h3 className="text-2xl md:text-6xl tracking-tight font-bold inline-block">
             <Strike>Bandwidth problems.</Strike>
           </h3>
         </div>
@@ -283,8 +285,8 @@ export default function Page() {
 
       {/* Feature section 5: No more open firewall ports. */}
       <section className="bg-white py-8 md:py-16">
-        <div className="sm:mx-auto px-4 mb-2 md:mb-4 sm:text-center">
-          <h3 className="text-2xl md:text-4xl tracking-tight font-bold inline-block">
+        <div className="sm:mx-auto px-4 mb-4 md:mb-8 sm:text-center">
+          <h3 className="text-2xl md:text-6xl tracking-tight font-bold inline-block">
             Say <span className="text-primary-450">goodbye</span> to firewall
             configuration.
           </h3>
@@ -315,8 +317,8 @@ export default function Page() {
 
       {/* Feature section 6: Runs everywhere your business does. */}
       <section className="bg-neutral-50 py-8 md:py-16">
-        <div className="sm:mx-auto px-4 mb-2 md:mb-4 sm:text-center">
-          <h3 className="text-2xl md:text-4xl tracking-tight font-bold inline-block">
+        <div className="sm:mx-auto px-4 mb-4 md:mb-8 sm:text-center">
+          <h3 className="text-2xl md:text-6xl tracking-tight font-bold inline-block">
             Runs <span className="text-primary-450">everywhere </span>
             your business does.
           </h3>
@@ -448,8 +450,8 @@ export default function Page() {
 
       {/* Feature section 7: Open source for transparency and trust. */}
       <section className="bg-white py-8 md:py-16">
-        <div className="sm:mx-auto px-4 mb-2 md:mb-4 sm:text-center">
-          <h3 className="text-xl sm:text-2xl md:text-4xl tracking-tight font-bold inline-block">
+        <div className="sm:mx-auto px-4 mb-4 md:mb-8 sm:text-center">
+          <h3 className="text-xl sm:text-2xl md:text-6xl tracking-tight font-bold inline-block">
             <span className="text-primary-450">Open source</span> for
             transparency and trust.
           </h3>
@@ -701,26 +703,36 @@ export default function Page() {
 
       <section className="border-t border-neutral-200 py-24 bg-neutral-900">
         <div className="flex flex-col px-4 justify-center items-center">
-          <h3 className="mb-4 text-4xl tracking-tight text-center font-bold text-neutral-50">
+          <h3 className="mb-4 text-2xl md:text-6xl tracking-tight text-center font-bold text-neutral-50">
             Ready to get started?
           </h3>
           <h4 className="my-4 font-medium text-xl max-w-screen-md tracking-tight text-center text-neutral-200 ">
             Give your team secure access to company resources in minutes.
           </h4>
           <div className="w-full max-w-screen-sm flex flex-wrap justify-between mt-8">
-            <button
-              type="button"
-              className="mx-auto mb-8 w-64 inline-flex justify-center items-center py-3 px-5 font-semibold text-center text-primary-450 rounded border border-primary-450 bg-white hover:ring-2 hover:ring-primary-400 duration-50 transform transition"
-            >
-              <Link href="https://app.firezone.dev/sign_up">Sign up now</Link>
-            </button>
-            <button
-              type="button"
-              className="mx-auto mb-8 w-64 inline-flex shadow-lg justify-center items-center py-3 px-5 font-semibold text-center text-white rounded bg-primary-450 hover:ring-2 hover:ring-primary-500 duration-50 transform transition"
-            >
-              <Link href="/contact/sales">Book a demo</Link>
-              <HiArrowLongRight className="ml-2 -mr-1 w-6 h-6" />
-            </button>
+            <div className="mb-8 mx-auto w-64">
+              <button
+                type="button"
+                className="text-xl w-64 inline-flex justify-center items-center py-3 px-5 font-semibold text-center text-primary-450 rounded border border-primary-450 bg-white hover:ring-2 hover:ring-primary-400 duration-50 transform transition"
+              >
+                <Link href="https://app.firezone.dev/sign_up">Sign up now</Link>
+              </button>
+              <p className="mt-3 text-sm text-neutral-400">
+                No credit card required. Cancel anytime.
+              </p>
+            </div>
+            <div className="mx-auto w-64">
+              <button
+                type="button"
+                className="text-xl w-64 inline-flex shadow-lg justify-center items-center py-3 px-5 font-semibold text-center text-white rounded bg-primary-450 hover:ring-2 hover:ring-primary-500 duration-50 transform transition"
+              >
+                <Link href="/contact/sales">Book a demo</Link>
+                <HiArrowLongRight className="ml-2 -mr-1 w-6 h-6" />
+              </button>
+              <p className="mt-3 text-sm text-neutral-400">
+                Get a personalized walkthrough of Firezone.
+              </p>
+            </div>
           </div>
         </div>
       </section>
diff --git a/website/src/app/pricing/_page.tsx b/website/src/app/pricing/_page.tsx
index f868bf9e0..3585f2d8e 100644
--- a/website/src/app/pricing/_page.tsx
+++ b/website/src/app/pricing/_page.tsx
@@ -13,37 +13,24 @@ export default function _Page() {
 
   return (
     <>
-      <section className="bg-neutral-100">
-        <div className="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6">
-          <div className="mx-auto max-w-screen-md sm:text-center">
-            <h1 className="text-center justify-center mb-4 text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-bold leading-none tracking-tight text-neutral-900">
-              Plans & Pricing
-            </h1>
-            <h2 className="text-center justify-center mb-8 tracking-tight text-neutral-900 md:mb-12 sm:text-2xl text-xl">
-              Pick a plan that best suits your needs. No credit card required to
-              sign up.
-            </h2>
-          </div>
-        </div>
-      </section>
-      <section className="bg-neutral-100 border-t border-neutral-200 pb-14">
+      <section className="bg-white pb-14">
         <div className="flex justify-center mt-12">
           <span
             className={
-              (annual ? "text-neutral-600 " : "text-neutral-900 ") +
-              "font-medium me-3 text-lg"
+              (annual ? "text-neutral-500 " : "text-neutral-900 ") +
+              "font-medium me-3 text-lg uppercase"
             }
           >
-            MONTHLY
+            Monthly
           </span>
           <Toggle checked={annual} onChange={setAnnual} />
           <span
             className={
-              (annual ? "text-neutral-900 " : "text-neutral-600 ") +
-              "font-medium ms-3 text-lg"
+              (annual ? "text-neutral-900 " : "text-neutral-500 ") +
+              "font-medium ms-3 text-lg uppercase"
             }
           >
-            ANNUAL
+            Annual
             <span className="text-sm text-neutral-700 text-primary-450">
               {" "}
               (Save 17%)
@@ -65,7 +52,7 @@ export default function _Page() {
               <Link href="https://app.firezone.dev/sign_up">
                 <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 border border-1 border-primary-450 hover:border-2 hover:font-bold font-semibold tracking-tight rounded shadow-lg text-primary-450 duration-0 hover:scale-105 transition transform"
+                  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:border-2 hover:font-bold font-semibold tracking-tight rounded shadow-lg text-primary-450 duration-0 hover:scale-105 transition transform"
                 >
                   Sign up
                 </button>
@@ -142,7 +129,7 @@ export default function _Page() {
               <Link href="https://app.firezone.dev/sign_up">
                 <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 border border-1 border-primary-450 hover:border-2 hover:font-bold font-semibold tracking-tight rounded shadow-lg text-primary-450 duration-0 hover:scale-105 transition transform"
+                  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:border-2 hover:font-bold font-semibold tracking-tight rounded shadow-lg text-primary-450 duration-0 hover:scale-105 transition transform"
                 >
                   Sign up
                 </button>
@@ -281,10 +268,10 @@ export default function _Page() {
           </div>
         </div>
       </section>
-      <section className="py-24 bg-gradient-to-b to-white from-neutral-100 via-primary-100">
+      <section className="py-24 bg-gradient-to-b to-neutral-50 from-white">
         <CustomerLogos />
       </section>
-      <section className="bg-white py-14">
+      <section className="bg-neutral-50 py-14">
         <div className="mb-14 mx-auto max-w-screen-lg px-3">
           <h2 className="mb-14 justify-center text-4xl font-bold text-neutral-900">
             Compare plans
diff --git a/website/src/app/pricing/layout.tsx b/website/src/app/pricing/layout.tsx
index 03fd7a463..49ebbb0ce 100644
--- a/website/src/app/pricing/layout.tsx
+++ b/website/src/app/pricing/layout.tsx
@@ -12,6 +12,17 @@ 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">
+            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">
+            Pick a plan that best suits your needs. No credit card required to
+            sign up.
+          </p>
+        </div>
+      </div>
       {children}
     </div>
   );
diff --git a/website/src/components/BattleCard/index.tsx b/website/src/components/BattleCard/index.tsx
index 96798a5dd..751bd594e 100644
--- a/website/src/components/BattleCard/index.tsx
+++ b/website/src/components/BattleCard/index.tsx
@@ -1,13 +1,35 @@
+import Link from "next/link";
 import Image from "next/image";
 import { HiCheck, HiXMark } from "react-icons/hi2";
 
 export default function BattleCard() {
   return (
     <div className="sm:mx-auto px-4">
-      <h2 className="text-2xl md:text-4xl tracking-tight font-bold sm:justify-center mb-8 md:mb-16">
+      <h2 className="text-2xl md:text-6xl tracking-tight font-bold sm:justify-center mb-4 md:mb-8">
         See how Firezone compares
       </h2>
 
+      <div className="mx-auto px-4 max-w-screen-md mb-4 md:mb-8">
+        <p className="text-md md:text-xl sm:text-center tracking-tight">
+          We're{" "}
+          <span className="underline underline-offset-2">laser-focused</span> on
+          building the best Zero Trust Access product available.{" "}
+          <span className="text-primary-450">That's what we do.</span> That
+          means we have <strong>more</strong> of the features your business
+          needs and <i>less</i> of the ones you don't. And because of that,
+          Firezone comes in at a{" "}
+          <span className="text-primary-450">fraction of the cost</span> of our
+          competitors. Don't believe us?{" "}
+          <Link
+            href="/contact/sales"
+            className="underline underline-offset-2 hover:no-underline text-accent-500"
+          >
+            Contact sales
+          </Link>{" "}
+          to find out.
+        </p>
+      </div>
+
       <div className="max-w-screen-lg mx-auto sm:px-8">
         <div className="shadow-lg rounded mx-auto overflow-x-auto">
           <table className="border w-full text-left text-neutral-900 text-sm md:text-md lg:text-lg">
@@ -236,7 +258,7 @@ export default function BattleCard() {
         </div>
 
         <p className="text-neutral-900 text-right text-xs my-4">
-          <i>Last updated: 4/22/2024</i>
+          <i>Last updated: 06/28/2024</i>
         </p>
       </div>
     </div>