feat(website): New use cases cards (#6291)

Resolves #5751

---------

Co-authored-by: Jamil <jamilbk@users.noreply.github.com>

website/src/app/page.tsx

@@ -35,6 +35,7 @@ import "@/styles/hero.css";
 import CustomerTestimonials from "@/components/CustomerTestimonials";
 import FeatureCards from "@/components/FeatureCards";
 import SingleFeature from "@/components/SingleFeature";
+import UseCaseCards from "@/components/UseCaseCards";
 
 export const metadata: Metadata = {
   title: "Firezone: Zero trust access that scales",
@@ -165,13 +166,13 @@ export default function Page() {
         }
       />
 
-      <section className="py-16">
+      <section className="py-24">
         <div className="sm:mx-auto px-4 mb-8 text-3xl md:text-4xl lg:text-5xl text-pretty text-center">
           <h6 className="uppercase text-sm font-semibold text-primary-450 place-content-center tracking-wide mb-2">
             Flexible security
           </h6>
           <h3
-            className={`tracking-tight font-bold leading-tight inline-block ${manrope.className}`}
+            className={`mb-4 tracking-tight font-bold leading-tight inline-block ${manrope.className}`}
           >
             Runs <span className="text-primary-450">everywhere </span>
             your business does
@@ -307,13 +308,13 @@ export default function Page() {
       </section>
 
       {/* Feature section: Open source for transparency and trust. */}
-      <section className="py-16">
+      <section className="py-24">
         <div className="sm:mx-auto px-4 mb-4 md:mb-8 text-3xl md:text-4xl lg:text-5xl text-pretty text-center">
           <h6 className="uppercase text-sm font-semibold place-content-center text-primary-450 tracking-wide mb-2">
             Open source
           </h6>
           <h3
-            className={`tracking-tight font-bold inline-block ${manrope.className}`}
+            className={`mb-4 tracking-tight font-bold inline-block ${manrope.className}`}
           >
             <span className="text-primary-450">Open source</span> for
             transparency and trust
@@ -358,213 +359,7 @@ export default function Page() {
 
       <CustomerTestimonials />
 
-      {/* Use cases */}
-      <section className="py-16">
-        <div className="mx-auto max-w-screen-lg">
-          <div className={`px-4 flex flex-wrap ${manrope.className}`}>
-            <h3 className="mb-2 text-2xl md:text-4xl tracking-tight font-bold mr-1">
-              Yes, you can use Firezone to{" "}
-            </h3>
-            <h3 className="mb-2 text-2xl md:text-4xl tracking-tight font-bold">
-              <RotatingWords
-                className="underline text-primary-450 mx-0.5 sm:mx-1 inline-flex"
-                words={[
-                  "secure DNS for your workforce",
-                  "securely access GitLab",
-                  "scale access to your VPC",
-                  "access your homelab",
-                  "route through a public IP",
-                  "access your Postgres DB",
-                  "tunnel IPv6 over IPv4",
-                  "restrict access to GitHub",
-                  "tunnel to a remote host",
-                ]}
-              />
-            </h3>
-          </div>
-          <div className="px-4 flex flex-wrap mt-4">
-            <h3 className="mb-2 text-xl md:text-2xl tracking-tight font-semibold">
-              Here are just a few ways customers are using Firezone:
-            </h3>
-          </div>
-          <div className="gap-4 items-center pt-8 px-4 mx-auto md:grid md:grid-cols-2 xl:gap-8 sm:pt-12 lg:px-6">
-            <SlideIn delay={0.5} direction="right">
-              <div className="bg-neutral-50 p-8 mt-4 md:mt-0 border border-neutral-200">
-                <div className="flex items-center space-x-2.5">
-                  <HiShieldCheck className=" lex-shrink-0 w-6 h-6 text-accent-600" />
-                  <h4 className="text-xl tracking-tight font-bold text-neutral-900">
-                    VPN Replacement
-                  </h4>
-                </div>
-                <p className="mt-8 text-neutral-900 text-xl">
-                  Remote employees can securely access office networks, cloud
-                  VPCs, and other private subnets and resources from anywhere in
-                  the world, on any device.
-                </p>
-                <ul role="list" className="my-6 lg:mb-0 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-lg text-neutral-900 ">
-                      Easy to use, no training 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-lg text-neutral-900 ">
-                      Authenticate with virtually any IdP
-                    </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-lg text-neutral-900 ">
-                      Highly available Gateways
-                    </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-lg text-neutral-900 ">
-                      Modern encryption and authentication
-                    </span>
-                  </li>
-                </ul>
-              </div>
-            </SlideIn>
-            <SlideIn delay={0.5} direction="left">
-              <div className="bg-neutral-50 p-8 mt-4 md:mt-0 border border-neutral-200">
-                <div className="flex items-center space-x-2.5">
-                  <HiRocketLaunch className="flex-shrink-0 w-6 h-6 text-accent-600" />
-                  <h4 className="text-xl tracking-tight font-bold text-neutral-900 ">
-                    Infrastructure Access
-                  </h4>
-                </div>
-                <p className="mt-8 text-neutral-900 text-xl">
-                  Empower engineers and DevOps to manage their team’s access to
-                  technical resources like test/prod servers both on-prem and in
-                  the cloud.
-                </p>
-                <ul role="list" className="my-6 lg:mb-0 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-lg text-neutral-900 ">
-                      Service accounts and headless clients
-                    </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-lg text-neutral-900 ">
-                      Multiple admins per account
-                    </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-lg text-neutral-900 ">
-                      Docker and Terraform integrations
-                    </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-lg text-neutral-900 ">
-                      Automatically sync users and groups from your IdP
-                    </span>
-                  </li>
-                </ul>
-              </div>
-            </SlideIn>
-            <SlideIn delay={0.5} direction="right">
-              <div className="bg-neutral-50 p-8 mt-4 md:mt-0 border border-neutral-200">
-                <div className="flex items-center space-x-2.5">
-                  <HiGlobeAlt className=" lex-shrink-0 w-6 h-6 text-accent-600" />
-                  <h4 className="text-xl tracking-tight font-bold text-neutral-900 ">
-                    Internet Security
-                  </h4>
-                </div>
-                <p className="mt-8 text-neutral-900 text-xl">
-                  Route sensitive internet traffic through a trusted gateway to
-                  keep remote employees more secure, even when they’re traveling
-                  or using public WiFi.
-                </p>
-                <ul role="list" className="my-6 lg:mb-0 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-lg text-neutral-900 ">
-                      Native clients for all major platforms
-                    </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-lg text-neutral-900 ">
-                      Enforce MFA / 2FA
-                    </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-lg text-neutral-900 ">
-                      Filter malicious or unwanted DNS requests
-                    </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-lg text-neutral-900 ">
-                      Monitor and audit each attempted connection
-                    </span>
-                  </li>
-                </ul>
-              </div>
-            </SlideIn>
-            <SlideIn delay={0.5} direction="left">
-              <div className="bg-neutral-50 p-8 mt-4 md:mt-0 border border-neutral-200">
-                <div className="flex items-center space-x-2.5">
-                  <HiHome className="flex-shrink-0 w-6 h-6 text-accent-600" />
-                  <h4 className="text-xl tracking-tight font-bold text-neutral-900 ">
-                    Homelab Access
-                  </h4>
-                </div>
-                <p className="mt-8 text-neutral-900 text-xl">
-                  Securely access your home network, and services like Plex,
-                  security cameras, a Raspberry Pi, and other self-hosted apps
-                  when you’re away from home.
-                </p>
-                <ul role="list" className="my-6 lg:mb-0 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-lg text-neutral-900 ">
-                      Easy to setup and simple to manage
-                    </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-lg text-neutral-900 ">
-                      Authenticate with Email OTP or 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-lg text-neutral-900 ">
-                      Reliable NAT traversal
-                    </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-lg text-neutral-900 ">
-                      Invite friends and family to your private network
-                    </span>
-                  </li>
-                </ul>
-              </div>
-            </SlideIn>
-          </div>
-          <div className="flex justify-center mt-8 md:mt-16">
-            <ActionLink
-              color="neutral-900"
-              transitionColor="primary-450"
-              size="lg"
-              href="/kb/use-cases"
-            >
-              See more use cases
-            </ActionLink>
-          </div>
-        </div>
-      </section>
+      <UseCaseCards />
 
       <BattleCard />
     </>

website/src/components/CustomerTestimonials/index.tsx

@@ -123,7 +123,7 @@ export default function CustomerTestimonials() {
   };
 
   return (
-    <section className="bg-neutral-950 py-16">
+    <section className="bg-neutral-950 py-24">
       <div className="relative mx-auto max-w-screen-lg">
         <div className="px-8 sm:px-16 md:px-24 mb-12 md:mb-16">
           <div>

website/src/components/ElevatorPitch/index.tsx

@@ -79,7 +79,7 @@ export default function ElevatorPitch() {
                 Stay Connected
               </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 tracking-tight font-bold inline-block ${manrope.className}`}
               >
                 Supercharge your workforce
                 <span className="text-primary-450"> in minutes.</span>

website/src/components/UseCaseCards/index.tsx

@@ -0,0 +1,184 @@
+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-xl mb-3 inline-block ${manrope.className}`}
+    >
+      {children}
+    </h4>
+  );
+}
+
+function Card({
+  narrow,
+  children,
+}: {
+  narrow?: boolean;
+  children: React.ReactNode;
+}) {
+  const container = `
+    shadow-lg relative flex justify-center rounded-3xl min-h-[440px] p-8 overflow-hidden
+    ${narrow ? "lg:col-span-7 bg-accent-200" : "lg:col-span-9 bg-primary-200"}`;
+
+  return <div className={container}>{children}</div>;
+}
+
+function Button({ text, href }: { text: string; href: Route<string> | URL }) {
+  return (
+    <Link href={href}>
+      <button className="group transform transition duration-50 hover:ring-1 hover:ring-neutral-900 inline-flex mt-6 gap-1 items-center bg-neutral-900 rounded-full text-neutral-50 text-sm px-5 py-2.5">
+        {text}
+        <HiArrowLongRight className="w-5 h-5 group-hover:translate-x-1 group-hover:scale-110 duration-50 transition transform" />
+      </button>
+    </Link>
+  );
+}
+
+export default function UseCaseCards() {
+  return (
+    <section className="py-24">
+      <div className="max-w-[1240px] flex flex-col items-center mx-auto">
+        <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}`}
+        >
+          One product. Endless possibilities.{" "}
+          <span className="text-primary-450">Zero </span>hassle.
+        </h3>
+        <div className="grid lg:grid-cols-16 gap-6 mt-8 mx-6">
+          <Card>
+            <div>
+              <CardHeading>Scale access to cloud Resources.</CardHeading>
+              <p>
+                Eliminate throughput bottlenecks that plague other VPNs.
+                Firezone's load-balancing architecture scales horizontally to
+                handle an unlimited number of connections to even the most
+                bandwidth-intensive services.
+              </p>
+              <Button
+                text="Scale your security"
+                href="/kb/use-cases/scale-vpc-access"
+              />
+            </div>
+            <Image
+              className="absolute -bottom-14 sm:-bottom-20 md:-bottom-24 mx-auto px-4"
+              src="/images/resource-list.png"
+              width={700}
+              height={350}
+              alt="Resource List"
+            />
+          </Card>
+          <Card narrow>
+            <div className="text-center max-w-[420px] text-pretty">
+              <Image
+                className="mx-auto mb-8"
+                src="/images/two-factor-graphic.png"
+                width={260}
+                height={289}
+                alt="Two-Factor Graphic"
+              />
+              <CardHeading>Add two-factor auth to WireGuard.</CardHeading>
+              <p>
+                Looking for 2FA for WireGuard? Look no further. Firezone
+                integrates with any OIDC-compatible identity provider to
+                consistently enforce multi-factor authentication across your
+                workforce.
+              </p>
+              <Button
+                text="Connect your identity provider"
+                href="/kb/authenticate"
+              />
+            </div>
+          </Card>
+          <Card narrow>
+            <Image
+              className="absolute right-0"
+              src="/images/manage-access-saas.png"
+              width={380}
+              height={241}
+              alt="Manage access to SaaS graphic"
+            />
+            <div className="w-full flex items-end">
+              <div>
+                <CardHeading>Manage access to a SaaS app</CardHeading>
+                <p>
+                  Manage access to a third-party SaaS app like HubSpot or
+                  GitHub.
+                </p>
+                <Button
+                  text="Configure your app"
+                  href="/kb/use-cases/saas-app-access"
+                />
+              </div>
+            </div>
+          </Card>
+          <Card>
+            <Image
+              className="absolute md:top-8 top-4"
+              src="/images/access-onprem-network.png"
+              width={300}
+              height={225}
+              alt="Access on-prem network graphic"
+            />
+            <div className="flex items-end">
+              <div>
+                <CardHeading>Access an on-prem network</CardHeading>
+                <p>
+                  Firezone securely punches through firewalls with ease, so keep
+                  those ports closed. Connections pick the shortest path and
+                  your attack surface is minimized, keeping your most sensitive
+                  resources invisible to attackers.
+                </p>
+                <Button
+                  text="Set up secure access"
+                  href="/kb/use-cases/private-network-access"
+                />
+              </div>
+            </div>
+          </Card>
+          <Card>
+            <div>
+              <CardHeading>Block malicious DNS</CardHeading>
+              <p>
+                Use Firezone to improve your team's Internet security by
+                blocking DNS queries to known malicious domains.
+              </p>
+              <Button text="Secure your DNS" href="/kb/use-cases/secure-dns" />
+            </div>
+            <Image
+              className="absolute -bottom-5 px-4"
+              src="/images/block-malicious-dns.png"
+              width={577}
+              height={266}
+              alt="Block Malicious DNS"
+            />
+          </Card>
+          <Card narrow>
+            <div className="text-center text-pretty">
+              <Image
+                className="mx-auto mb-8"
+                src="/images/access-private-web-app.png"
+                width={377}
+                height={231}
+                alt="Private web app graphic"
+              />
+              <CardHeading>Access a private web app</CardHeading>
+              <p>
+                Secure access to a privately hosted web application like GitLab
+                or Metabase.
+              </p>
+              <Button
+                text="Secure your web app"
+                href="/kb/use-cases/web-app-access"
+              />
+            </div>
+          </Card>
+        </div>
+      </div>
+    </section>
+  );
+}

website/tailwind.config.js

@@ -58,6 +58,10 @@ module.exports = {
   ],
   theme: {
     extend: {
+      gridTemplateColumns: {
+        // Simple 16 column grid
+        16: "repeat(16, minmax(0, 1fr))",
+      },
       typography: ({ theme }) => ({
         firezone: {
           css: {