From e44db03fbbd71a06cf0cd1bb517baec4550733b1 Mon Sep 17 00:00:00 2001
From: Jamil <jamilbk@users.noreply.github.com>
Date: Mon, 17 Jul 2023 22:07:46 -0700
Subject: [PATCH] Add legalese to website (#1798)

---
 website/src/app/blog/firezone-1-0/readme.mdx  |  2 +-
 .../components/ConsentPreferences/index.tsx   | 18 +++++++++++++
 .../src/components/EarlyAccessForm/index.tsx  |  2 +-
 website/src/components/Footer/index.tsx       | 26 +++++++++++++++++--
 website/src/components/RootLayout/index.tsx   | 22 ++++++++++------
 5 files changed, 58 insertions(+), 12 deletions(-)
 create mode 100644 website/src/components/ConsentPreferences/index.tsx

diff --git a/website/src/app/blog/firezone-1-0/readme.mdx b/website/src/app/blog/firezone-1-0/readme.mdx
index b533540b1..0e737dbf3 100644
--- a/website/src/app/blog/firezone-1-0/readme.mdx
+++ b/website/src/app/blog/firezone-1-0/readme.mdx
@@ -213,7 +213,7 @@ works as follows:
 
 So we're able to both authenticate the untrusted entity at the time of request,
 yet also keep our protected entity behind a firewall to keep it invisible to the
-public Internet. In fast, _both_ entities can live behind a stateful firewall
+public Internet. In fact, _both_ entities can live behind a stateful firewall
 and the technique would still work -- the principles are the same.
 
 As it turns out, this approach is nothing new. It's how web browsers and VoIP
diff --git a/website/src/components/ConsentPreferences/index.tsx b/website/src/components/ConsentPreferences/index.tsx
new file mode 100644
index 000000000..2cc821107
--- /dev/null
+++ b/website/src/components/ConsentPreferences/index.tsx
@@ -0,0 +1,18 @@
+"use client";
+import Link from "next/link";
+
+export default function ConsentPreferences() {
+  return (
+    <Link
+      id="termly-consent-preferences"
+      href="#"
+      className="hover:underline"
+      onClick={() => {
+        (window as any).displayPreferenceModal();
+        return false;
+      }}
+    >
+      consent preferences
+    </Link>
+  );
+}
diff --git a/website/src/components/EarlyAccessForm/index.tsx b/website/src/components/EarlyAccessForm/index.tsx
index 6cb85fdb9..79c1cdf62 100644
--- a/website/src/components/EarlyAccessForm/index.tsx
+++ b/website/src/components/EarlyAccessForm/index.tsx
@@ -39,7 +39,7 @@ export default function EarlyAccessForm() {
           We're still working out pricing details for the 1.0 release and will
           launch an updated pricing page when we have more to share. Our goal is
           to price Firezone competitively among other products in the space with
-          a cost that scales predictably according to the value it provides.
+          a cost that scales predictably.
         </p>
       </div>
       <div className="w-full">
diff --git a/website/src/components/Footer/index.tsx b/website/src/components/Footer/index.tsx
index cd2e95ba4..9829bf3ef 100644
--- a/website/src/components/Footer/index.tsx
+++ b/website/src/components/Footer/index.tsx
@@ -1,5 +1,6 @@
 import Link from "next/link";
 import Image from "next/image";
+import ConsentPreferences from "@/components/ConsentPreferences";
 
 import { LinkedInIcon, GitHubIcon, TwitterIcon } from "@/components/Icons";
 
@@ -153,12 +154,33 @@ export default function Footer() {
         </div>
         <hr className="mt-2 mb-6 border-neutral-200 sm:mx-auto lg:mb-8 lg:mt-4" />
         <div className="sm:flex sm:items-center sm:justify-between">
-          <span className="text-sm text-neutral-900 sm:text-center ">
+          <span className="text-xs text-neutral-900 sm:text-center ">
             © 2023{" "}
             <Link href="/" className="hover:underline">
               Firezone, Inc.
             </Link>{" "}
-            All Rights Reserved.
+            <ConsentPreferences />
+            {" | "}
+            <Link
+              href="https://app.termly.io/notify/1aa082a3-aba1-4169-b69b-c1d1b42b7a48"
+              className="hover:underline"
+            >
+              privacy policy
+            </Link>
+            {" | "}
+            <Link
+              className="hover:underline"
+              href="https://app.termly.io/notify/1aa082a3-aba1-4169-b69b-c1d1b42b7a48"
+            >
+              do not sell or share my personal information
+            </Link>
+            {" | "}
+            <Link
+              href="https://app.termly.io/notify/1aa082a3-aba1-4169-b69b-c1d1b42b7a48"
+              className="hover:underline"
+            >
+              limit the use of my sensitive personal information
+            </Link>
           </span>
           <div className="flex mt-4 space-x-6 sm:justify-center sm:mt-0">
             <TwitterIcon url="https://twitter.com/firezonehq" />
diff --git a/website/src/components/RootLayout/index.tsx b/website/src/components/RootLayout/index.tsx
index 7f78fd944..8e309b168 100644
--- a/website/src/components/RootLayout/index.tsx
+++ b/website/src/components/RootLayout/index.tsx
@@ -13,6 +13,7 @@ const public_sans = Public_Sans({
   subsets: ["latin"],
   weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
 });
+import { HiArrowLongRight } from "react-icons/hi2";
 
 export default function RootLayout({
   children,
@@ -21,26 +22,31 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
+      <Script
+        src="https://app.termly.io/embed.min.js"
+        data-auto-block="on"
+        data-website-uuid="c4df1a31-22d9-4000-82e6-a86cbec0bba0"
+      ></Script>
       <Providers>
         <body className={public_sans.className}>
           <div className="min-h-screen h-auto antialiased">
             <RootNavbar />
             <Banner active>
-              <p className="text-md font-medium text-center w-full text-neutral-200 ">
-                <strong>Firezone 1.0 is coming!</strong> Rebuilt from the ground
-                up with a cloud dashboard, native clients, and more.{" "}
+              <p className="text-md font-medium tracking-tight text-center w-full text-neutral-50 ">
+                Announcing Firezone 1.0: cloud, clients, and{" "}
                 <Link
                   href="/blog/firezone-1-0"
                   className="underline text-accent-500  hover:no-underline"
                 >
-                  Read the blogpost
-                </Link>{" "}
-                or{" "}
+                  more
+                </Link>
+                . Request{" "}
                 <Link
                   href="/product/early-access"
-                  className="text-accent-500  underline hover:no-underline"
+                  className="group text-accent-500 items-center inline-flex underline hover:no-underline"
                 >
-                  request early access.
+                  early access
+                  <HiArrowLongRight className="group-hover:translate-x-0.5 group-hover:scale-105 duration-100 transform transition ml-1 w-5 h-5" />
                 </Link>
               </p>
             </Banner>