-
-
-
-
-
+
-
-
- Zero-trust access
-
-
- For humans.
-
-
-
-
-
-
-
-
-
+
+
-
{/* TODO: ACLs for the rest of us */}
@@ -151,7 +106,7 @@ export default function Page() {
@@ -747,42 +702,6 @@ export default function Page() {
-
-
-
);
}
diff --git a/website/src/app/pricing/_page.tsx b/website/src/app/pricing/_page.tsx
index 4b7df9164..99cb1e731 100644
--- a/website/src/app/pricing/_page.tsx
+++ b/website/src/app/pricing/_page.tsx
@@ -1,6 +1,6 @@
"use client";
-import CustomerLogos from "@/components/CustomerLogos";
+import { CustomerLogosColored } from "@/components/CustomerLogos";
import Toggle from "@/components/Toggle";
import { HiCheck } from "react-icons/hi2";
import Link from "next/link";
@@ -240,10 +240,7 @@ export default function _Page() {
+ Upgrade your VPN to zero-trust access +
++ Firezone is a fast, flexible VPN replacement built on WireGuard® + that protects your workforce without tedious configuration. +
+
+
-
-
- {/* Customer logos */}
-
+
+ Get started for free
+
-
-
- - Firezone is a fast, flexible VPN replacement built on - WireGuard® that{" "} - - conceals - {" "} - your apps and networks{" "} - - without - {" "} - tedious configuration. -
-
-
+
-
- Sign up now
-
-
-
-
-
+
-
-
+
+ Backed by{" "}
+
+ - Upgrade to zero-trust access in{" "} + Supercharge your workforce in{" "} minutes.
-
- - Ready to get started? -
-- Give your team secure access to company resources in minutes. -
-
-
-
-
-
- - No credit card required. Cancel anytime. -
-
-
-
- - Get a personalized walkthrough of Firezone. -
-
diff --git a/website/src/components/Button/index.tsx b/website/src/components/Button/index.tsx
index 44f712b2a..1e76074b8 100644
--- a/website/src/components/Button/index.tsx
+++ b/website/src/components/Button/index.tsx
@@ -19,7 +19,7 @@ export default function Button({
@@ -30,7 +30,7 @@ export default function Button({
diff --git a/website/src/components/ConsentPreferences/index.tsx b/website/src/components/ConsentPreferences/index.tsx
index d51d2dcd2..9ce6cfa22 100644
--- a/website/src/components/ConsentPreferences/index.tsx
+++ b/website/src/components/ConsentPreferences/index.tsx
@@ -1,12 +1,16 @@
"use client";
import Link from "next/link";
-export default function ConsentPreferences() {
+export default function ConsentPreferences({
+ className,
+}: {
+ className?: string;
+}) {
return (
{
(window as any).displayPreferenceModal();
return false;
diff --git a/website/src/components/CustomerLogos/index.tsx b/website/src/components/CustomerLogos/index.tsx
index c772b19ec..0882cf943 100644
--- a/website/src/components/CustomerLogos/index.tsx
+++ b/website/src/components/CustomerLogos/index.tsx
@@ -2,7 +2,91 @@ import Image from "next/image";
import Link from "next/link";
import Marquee from "react-fast-marquee";
-export default function CustomerLogos() {
+export function CustomerLogosGrayscale() {
+ return (
+
+
+ );
+}
+
+export function CustomerLogosColored() {
return (
<>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/website/src/components/Footer/index.tsx b/website/src/components/Footer/index.tsx
index 75ef8c356..f0358ab92 100644
--- a/website/src/components/Footer/index.tsx
+++ b/website/src/components/Footer/index.tsx
@@ -4,7 +4,7 @@ import Link from "next/link";
import ActionLink from "@/components/ActionLink";
import Image from "next/image";
import ConsentPreferences from "@/components/ConsentPreferences";
-
+import { HiArrowLongRight } from "react-icons/hi2";
import {
LinkedInIcon,
GitHubIcon,
@@ -17,69 +17,128 @@ import {
export default function Footer() {
return (
-