From 5411a9c9b28bff0e501535a8eb89deec85fbe8b5 Mon Sep 17 00:00:00 2001
From: Wil Wade <wil.wade@amplica.io>
Date: Thu, 12 Sep 2024 18:52:41 +0000
Subject: [PATCH 01/20] WIP

---
 src/components/GetNotified.svelte | 52 +++++++++++++++++++++++++++++++
 src/components/SideTag.svelte     | 36 +++++++++++++++++++++
 src/routes/+layout.svelte         |  5 +++
 tests/test.ts                     | 12 ++++++-
 4 files changed, 104 insertions(+), 1 deletion(-)
 create mode 100644 src/components/GetNotified.svelte
 create mode 100644 src/components/SideTag.svelte

diff --git a/src/components/GetNotified.svelte b/src/components/GetNotified.svelte
new file mode 100644
index 00000000..79896ebf
--- /dev/null
+++ b/src/components/GetNotified.svelte
@@ -0,0 +1,52 @@
+<div class="rounded-lg bg-white p-6 shadow-lg">
+  <h2 class="mb-4 text-2xl font-semibold">Interested in Frequency's ecosystem?</h2>
+  <p class="text-gray-600 mb-4">Get notified when more developer tools are available.</p>
+
+  <form>
+    <div class="mb-4">
+      <label class="text-gray-700 mb-2 block text-sm font-medium" for="firstName"> First Name * </label>
+      <input
+        type="text"
+        id="firstName"
+        class="border-gray-300 focus:ring-teal-500 focus:border-teal-500 block w-full rounded-md border p-2"
+        placeholder="John"
+      />
+    </div>
+    <div class="mb-4">
+      <label class="text-gray-700 mb-2 block text-sm font-medium" for="lastName"> Last Name * </label>
+      <input
+        type="text"
+        id="lastName"
+        class="border-gray-300 focus:ring-teal-500 focus:border-teal-500 block w-full rounded-md border p-2"
+        placeholder="Doe"
+      />
+    </div>
+    <div class="mb-4">
+      <label class="text-gray-700 mb-2 block text-sm font-medium" for="email"> Email * </label>
+      <input
+        type="email"
+        id="email"
+        class="border-gray-300 focus:ring-teal-500 focus:border-teal-500 block w-full rounded-md border p-2"
+        placeholder="Enter your email"
+      />
+    </div>
+    <div class="mb-4">
+      <label class="inline-flex items-center">
+        <input type="checkbox" class="form-checkbox text-teal-500" />
+        <span class="text-gray-700 ml-2">Are you a developer interested in building something on Frequency?</span>
+      </label>
+    </div>
+    <button type="submit" class="bg-teal-500 hover:bg-teal-600 w-full rounded-md px-4 py-2 text-white">
+      Get Notified
+    </button>
+  </form>
+
+  <div class="mt-4 text-center">
+    <a href="https://discord.com/invite/JchmHX5afV" target="_blank" class="text-teal-500 hover:underline">
+      Join our Discord
+    </a>
+    <p class="text-gray-500 mt-1 text-sm">
+      Become a part of shaping the future of the digital landscape with Frequency.
+    </p>
+  </div>
+</div>
diff --git a/src/components/SideTag.svelte b/src/components/SideTag.svelte
new file mode 100644
index 00000000..2067e530
--- /dev/null
+++ b/src/components/SideTag.svelte
@@ -0,0 +1,36 @@
+<script>
+  import { fade } from 'svelte/transition';
+  import OpenCloseIcon from './OpenCloseIcon.svelte';
+
+  export let triggerText = 'Open Popup';
+  let isPopupOpen = false;
+
+  function togglePopup() {
+    isPopupOpen = !isPopupOpen;
+  }
+
+  function closePopup() {
+    isPopupOpen = false;
+  }
+</script>
+
+<div class="fixed right-0 top-1/4 z-50 flex transform">
+  <button
+    class="origin-top-left -translate-y-1/2 translate-x-full rotate-90 cursor-pointer rounded-b-lg bg-teal px-4 py-2 text-white shadow-lg transition-shadow duration-300 hover:shadow-sm"
+    on:click={togglePopup}
+  >
+    {triggerText}
+  </button>
+</div>
+
+{#if isPopupOpen}
+  <div
+    class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50"
+    transition:fade={{ duration: 200 }}
+  >
+    <div class="max-w-md mx-4 w-full rounded-lg bg-white p-6 shadow-xl">
+      <OpenCloseIcon onClick={() => (isPopupOpen = !isPopupOpen)} isOpen={true} />
+      <slot />
+    </div>
+  </div>
+{/if}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 5699e6ca..e1a19b4f 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,6 +1,8 @@
 <script>
   import Footer from '../components/Footer.svelte';
   import JoinSocials from '../components/JoinSocials.svelte';
+  import GetNotified from '../components/GetNotified.svelte';
+  import SideTag from '../components/SideTag.svelte';
 </script>
 
 <div class="max-w-page overflow-x-hidden shadow-xl">
@@ -12,5 +14,8 @@
       </div>
     </div>
     <Footer />
+    <SideTag triggerText="Get Notified">
+      <GetNotified />
+    </SideTag>
   </div>
 </div>
diff --git a/tests/test.ts b/tests/test.ts
index e73b7a82..7cf32410 100644
--- a/tests/test.ts
+++ b/tests/test.ts
@@ -2,5 +2,15 @@ import { expect, test } from '@playwright/test';
 
 test('index page has expected content', async ({ page }) => {
   await page.goto('/');
-  await expect(page.getByText('Build at a higher Frequency')).toBeDefined();
+  expect(page.getByText('Build at a higher Frequency')).toBeDefined();
+});
+
+test('index page has a popout', async ({ page }) => {
+  await page.goto('/');
+  const popoutButton = page.getByText('Get Notified');
+  expect(popoutButton).toBeDefined();
+
+  await popoutButton.click();
+
+  expect(page.getByText("Interested in Frequency's ecosystem?")).toBeDefined();
 });

From 053999fb572c2cf18d76f34e1585b32f47905e4e Mon Sep 17 00:00:00 2001
From: Wil Wade <wil.wade@amplica.io>
Date: Fri, 13 Sep 2024 14:57:14 +0000
Subject: [PATCH 02/20] Adding the lambda proxy

---
 cors-proxy/README.md    | 77 +++++++++++++++++++++++++++++++++++++++++
 cors-proxy/index.mjs    | 52 ++++++++++++++++++++++++++++
 cors-proxy/package.json | 11 ++++++
 cors-proxy/server.mjs   | 64 ++++++++++++++++++++++++++++++++++
 4 files changed, 204 insertions(+)
 create mode 100644 cors-proxy/README.md
 create mode 100644 cors-proxy/index.mjs
 create mode 100644 cors-proxy/package.json
 create mode 100644 cors-proxy/server.mjs

diff --git a/cors-proxy/README.md b/cors-proxy/README.md
new file mode 100644
index 00000000..fda0ed40
--- /dev/null
+++ b/cors-proxy/README.md
@@ -0,0 +1,77 @@
+# Serverless CORS Proxy
+
+This is a simple serverless CORS proxy that supports `POST` requests.
+
+This is used by the contact form.
+
+## Features
+
+- Supports `POST` requests to a single `PROXY_TARGET_URL`
+- Adds CORS headers for cross-origin requests
+
+## Environment Variables
+
+These are the environment variables used by the handler.
+
+- `PROXY_TARGET_URL`: Where the proxy will redirect the requests to
+- `PROXY_ALLOWED_ORIGIN`: (Default `'*'`) The `Access-Control-Allow-Origin` string.
+
+## Setup
+
+### 1. Running Locally
+
+To run the CORS proxy locally:
+
+1. Run the proxy locally:
+    ```bash
+    PROXY_TARGET_URL="https://example.com/submit-form" npm run start
+    ```
+
+    - Replace `https://example.com/submit-form` with the target URL.
+
+2. Use the following `curl` example to test a `POST` request from your terminal:
+
+    ```bash
+    curl -X POST "http://localhost:3000/" \
+        -d "param1=value1&param2=value2"
+    ```
+
+    - Replace `param1=value1&param2=value2` with your actual form data.
+
+### 2. Using with an HTML Form and JavaScript Fetch
+
+You can use this proxy to submit a form using JavaScript `fetch`. Here’s an example:
+
+#### HTML Form:
+
+```html
+<form id="exampleForm">
+  <input type="text" name="param1" value="value1" />
+  <input type="text" name="param2" value="value2" />
+  <button type="submit">Submit</button>
+</form>
+
+<script>
+document.getElementById('exampleForm').addEventListener('submit', async (e) => {
+  e.preventDefault();  // Prevent the default form submission
+
+  const formData = new FormData(e.target);
+  const params = new URLSearchParams(formData).toString();
+
+  try {
+    const response = await fetch('https://localhost:3000', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded'
+      },
+      body: params,
+    });
+
+    const result = await response.json();
+    console.log(result);  // Handle the response
+  } catch (error) {
+    console.error('Error:', error);
+  }
+});
+</script>
+```
diff --git a/cors-proxy/index.mjs b/cors-proxy/index.mjs
new file mode 100644
index 00000000..c7963cf2
--- /dev/null
+++ b/cors-proxy/index.mjs
@@ -0,0 +1,52 @@
+import https from 'node:https';
+import process from 'node:process';
+
+export const handler = async (event) => {
+  const targetUrl = process.env.PROXY_TARGET_URL;
+  const allowedOrigin = process.env.PROXY_ALLOWED_ORIGIN || '*';
+
+  const postData = event.body;
+
+  const options = {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded',
+    },
+  };
+
+  return new Promise((resolve, _reject) => {
+    const req = https.request(targetUrl, options, (response) => {
+      let data = '';
+
+      // Collect response data
+      response.on('data', (chunk) => (data += chunk));
+
+      // When the request is complete
+      response.on('end', () => {
+        resolve({
+          statusCode: 200,
+          headers: {
+            'Content-Type': 'application/json',
+            'Access-Control-Allow-Origin': allowedOrigin,
+            'Access-Control-Allow-Methods': 'POST, OPTIONS',
+          },
+          body: JSON.stringify({
+            status: response.statusCode,
+            headers: response.headers,
+            body: data,
+          }),
+        });
+      });
+    });
+
+    req.on('error', (error) => {
+      resolve({
+        statusCode: 500,
+        body: JSON.stringify({ message: 'Error in request', error: error.message }),
+      });
+    });
+
+    req.write(postData);
+    req.end();
+  });
+};
diff --git a/cors-proxy/package.json b/cors-proxy/package.json
new file mode 100644
index 00000000..f7eb83e3
--- /dev/null
+++ b/cors-proxy/package.json
@@ -0,0 +1,11 @@
+{
+  "name": "cors-proxy",
+  "type": "module",
+  "version": "1.0.0",
+  "description": "A simple CORS proxy for serverless environments.",
+  "main": "index.mjs",
+  "scripts": {
+    "start": "node server.mjs"
+  },
+  "dependencies": {}
+}
diff --git a/cors-proxy/server.mjs b/cors-proxy/server.mjs
new file mode 100644
index 00000000..d9231fe0
--- /dev/null
+++ b/cors-proxy/server.mjs
@@ -0,0 +1,64 @@
+import http from 'http';
+import { handler } from './index.mjs';
+import url from 'url';
+
+// Function to parse the HTTP request body
+const getRequestBody = (req) => {
+  return new Promise((resolve, reject) => {
+    let body = '';
+    req.on('data', (chunk) => {
+      body += chunk.toString();
+    });
+    req.on('end', () => {
+      resolve(body);
+    });
+    req.on('error', (err) => {
+      reject(err);
+    });
+  });
+};
+
+// Start the HTTP server
+const server = http.createServer(async (req, res) => {
+  // Set CORS headers
+  res.setHeader('Access-Control-Allow-Origin', 'http://localhost:5173'); // Use "*" to allow all origins
+  res.setHeader('Access-Control-Allow-Methods', 'POST, OPTIONS'); // Allow POST and OPTIONS methods
+  res.setHeader('Access-Control-Allow-Headers', 'Content-Type'); // Allow certain headers
+
+  // Handle OPTIONS request for CORS preflight
+  if (req.method === 'OPTIONS') {
+    res.writeHead(200);
+    res.end();
+    return;
+  }
+
+  if (req.method === 'POST') {
+    const parsedUrl = url.parse(req.url, true);
+    const body = await getRequestBody(req);
+
+    // Convert HTTP request into a Lambda event format
+    const lambdaEvent = {
+      httpMethod: req.method,
+      queryStringParameters: parsedUrl.query,
+      body: body,
+    };
+
+    // Call the handler (same code used in AWS Lambda)
+    const lambdaResponse = await handler(lambdaEvent);
+
+    // Send response
+    res.writeHead(lambdaResponse.statusCode, {
+      ...lambdaResponse.headers,
+      'Access-Control-Allow-Origin': '*', // Make sure to include CORS in response too
+    });
+    res.end(lambdaResponse.body);
+  } else {
+    res.statusCode = 405;
+    res.end('Only POST requests are supported');
+  }
+});
+
+// Start server on port 3000
+server.listen(3000, () => {
+  console.log('Local server running on http://localhost:3000');
+});

From 8ba81316f68fc583c1e076f86a35b3d9deedc00c Mon Sep 17 00:00:00 2001
From: Wil Wade <wil.wade@amplica.io>
Date: Fri, 13 Sep 2024 15:27:09 +0000
Subject: [PATCH 03/20] Mostly setup

---
 src/components/GetNotified.svelte    | 194 ++++++++++++++++++++-------
 src/components/SideTag.svelte        |  24 +++-
 src/lib/assets/DiscordLogo-White.svg |   7 +
 src/lib/assets/DiscordLogo.svg       |   3 +-
 src/style/app.css                    |   6 +
 tailwind.config.js                   |   4 +-
 6 files changed, 183 insertions(+), 55 deletions(-)
 create mode 100644 src/lib/assets/DiscordLogo-White.svg

diff --git a/src/components/GetNotified.svelte b/src/components/GetNotified.svelte
index 79896ebf..4726d776 100644
--- a/src/components/GetNotified.svelte
+++ b/src/components/GetNotified.svelte
@@ -1,52 +1,150 @@
-<div class="rounded-lg bg-white p-6 shadow-lg">
-  <h2 class="mb-4 text-2xl font-semibold">Interested in Frequency's ecosystem?</h2>
-  <p class="text-gray-600 mb-4">Get notified when more developer tools are available.</p>
-
-  <form>
-    <div class="mb-4">
-      <label class="text-gray-700 mb-2 block text-sm font-medium" for="firstName"> First Name * </label>
-      <input
-        type="text"
-        id="firstName"
-        class="border-gray-300 focus:ring-teal-500 focus:border-teal-500 block w-full rounded-md border p-2"
-        placeholder="John"
-      />
-    </div>
-    <div class="mb-4">
-      <label class="text-gray-700 mb-2 block text-sm font-medium" for="lastName"> Last Name * </label>
-      <input
-        type="text"
-        id="lastName"
-        class="border-gray-300 focus:ring-teal-500 focus:border-teal-500 block w-full rounded-md border p-2"
-        placeholder="Doe"
-      />
-    </div>
-    <div class="mb-4">
-      <label class="text-gray-700 mb-2 block text-sm font-medium" for="email"> Email * </label>
-      <input
-        type="email"
-        id="email"
-        class="border-gray-300 focus:ring-teal-500 focus:border-teal-500 block w-full rounded-md border p-2"
-        placeholder="Enter your email"
-      />
-    </div>
-    <div class="mb-4">
-      <label class="inline-flex items-center">
-        <input type="checkbox" class="form-checkbox text-teal-500" />
-        <span class="text-gray-700 ml-2">Are you a developer interested in building something on Frequency?</span>
-      </label>
+<script lang="ts">
+  import DiscordLogoWhite from '../lib/assets/DiscordLogo-White.svg';
+
+  const fieldMapping = {
+    surname: 'entry.2099239263',
+    familyName: 'entry.69819808',
+    email: 'entry.769464705',
+    developerInterest: 'entry.1903353368',
+  };
+
+  const postUrl = 'http://localhost:3000';
+
+  let surname = '';
+  let familyName = '';
+  let email = '';
+  let isDeveloper = false;
+
+  let formSuccess = false;
+  let hasSubmittedFormAtLeastOnce = false;
+  let validInputClasses =
+    'border-gray focus:border-tealBright focus:ring-tealBright focus:ring-1 focus:outline-none block w-full rounded-md border px-2 py-3';
+  // Make sure to include these in the tailwind.config.js safelist
+  let invalidInputClasses = 'invalid:border-red  ' + validInputClasses;
+
+  async function submit(e: SubmitEvent) {
+    const form = e.target as HTMLFormElement;
+
+    //Only start showing invalids if the form is invalid at least once
+    hasSubmittedFormAtLeastOnce = true;
+
+    if (!form.checkValidity()) {
+      form.reportValidity();
+      return;
+    }
+
+    const formData = new URLSearchParams();
+    formData.append(fieldMapping.surname, surname);
+    formData.append(fieldMapping.familyName, familyName);
+    formData.append(fieldMapping.email, email);
+    formData.append(fieldMapping.developerInterest, isDeveloper ? 'Developer' : '');
+
+    try {
+      const response = await fetch(postUrl, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+        body: formData.toString(),
+      });
+
+      if (response.ok) {
+        formSuccess = true;
+      } else {
+        throw new Error('Unknown form submission error');
+      }
+    } catch (error) {
+      console.error('Error:', error);
+      alert('Form submission failed due to network error.');
+    }
+  }
+
+  $: inputClasses = hasSubmittedFormAtLeastOnce ? invalidInputClasses : validInputClasses;
+</script>
+
+<div class="rounded-lg bg-cream">
+  <div class="rounded-t-lg bg-navy">
+    <div class="top-lines rounded-t-lg">
+      <div class="top-lines-fade rounded-t-lg">
+        <div class="top-gradient rounded-t-lg px-4 pb-[50px] pt-[70px] text-white">
+          <h2 class="title-50 mx-2 mb-4 text-center leading-[1.1]">Interested in Frequency's ecosystem?</h2>
+          <p class="title-16 text-center">Get notified when more developer tools are available.</p>
+        </div>
+      </div>
     </div>
-    <button type="submit" class="bg-teal-500 hover:bg-teal-600 w-full rounded-md px-4 py-2 text-white">
-      Get Notified
-    </button>
-  </form>
-
-  <div class="mt-4 text-center">
-    <a href="https://discord.com/invite/JchmHX5afV" target="_blank" class="text-teal-500 hover:underline">
-      Join our Discord
+  </div>
+  <div class="px-8 py-4">
+    {#if !formSuccess}
+      <form on:submit|preventDefault={submit} novalidate>
+        <div class="mb-4">
+          <label class="mb-2 block text-xs font-semibold" for="surname">Surname <span class="text-red">*</span></label>
+          <input required type="text" id="surname" bind:value={surname} class={inputClasses} placeholder="John" />
+        </div>
+        <div class="mb-4">
+          <label class="mb-2 block text-xs font-semibold" for="familyName"
+            >Family Name <span class="text-red">*</span></label
+          >
+          <input required type="text" id="familyName" bind:value={familyName} class={inputClasses} placeholder="Doe" />
+        </div>
+        <div class="mb-4">
+          <label class="mb-2 block text-xs font-semibold" for="email">Email <span class="text-red">*</span></label>
+          <input
+            required
+            type="email"
+            id="email"
+            bind:value={email}
+            class={inputClasses}
+            placeholder="Enter your email"
+          />
+        </div>
+        <div class="mb-4">
+          <label class="inline-flex items-center">
+            <input type="checkbox" bind:checked={isDeveloper} class="form-checkbox text-white accent-tealBright" />
+            <span class="ml-2 text-xs font-semibold"
+              >Are you a developer interested in building something on Frequency?</span
+            >
+          </label>
+        </div>
+        <div class="m-5">
+          <button
+            type="submit"
+            class="radius w-full rounded-full bg-teal py-4 font-medium text-white shadow-lg transition duration-300 ease-in-out hover:shadow-none"
+          >
+            Get Notified
+          </button>
+        </div>
+      </form>
+    {:else}
+      <div class="px-8 py-12">
+        <h2 class="title-75 mb-10 text-center">Thank You!</h2>
+        <p class="mb-10 text-center">
+          As soon as the tools become available, we'll let you know so you can check out the official documentation and
+          start experimenting!
+        </p>
+      </div>
+    {/if}
+
+    <a class="m-2 flex p-4" href="https://discord.com/invite/JchmHX5afV">
+      <div class="h-[70px] w-[70px] flex-shrink-0 rounded-lg bg-black p-2 hover:bg-teal">
+        <img class="w-[70px]" src={DiscordLogoWhite} alt="" />
+      </div>
+      <div class="px-4">
+        <h3 class="mb-1 font-semibold leading-none">Join our Discord</h3>
+        <p class="text-sm">Become a part of shaping the future of the digital landscape with Frequency.</p>
+      </div>
     </a>
-    <p class="text-gray-500 mt-1 text-sm">
-      Become a part of shaping the future of the digital landscape with Frequency.
-    </p>
   </div>
 </div>
+
+<style>
+  .top-gradient {
+    background: radial-gradient(circle at calc(100% - 60px) 0px, #365e73 0%, transparent 30%);
+  }
+  .top-lines {
+    background: linear-gradient(90deg, #365e73 1px, transparent 1px),
+      linear-gradient(180deg, #365e73 1px, transparent 1px);
+    background-size: 60px 60px;
+    background-position: 15px 10px;
+  }
+  .top-lines-fade {
+    background: linear-gradient(to right, rgba(255, 255, 255, 0) 50%, #19455e 90%);
+  }
+</style>
diff --git a/src/components/SideTag.svelte b/src/components/SideTag.svelte
index 2067e530..53f9fda5 100644
--- a/src/components/SideTag.svelte
+++ b/src/components/SideTag.svelte
@@ -1,5 +1,6 @@
-<script>
+<script lang="ts">
   import { fade } from 'svelte/transition';
+  import { onMount } from 'svelte';
   import OpenCloseIcon from './OpenCloseIcon.svelte';
 
   export let triggerText = 'Open Popup';
@@ -12,11 +13,24 @@
   function closePopup() {
     isPopupOpen = false;
   }
+
+  function handleKeydown(event: { key?: string }) {
+    if (event?.key === 'Escape' && isPopupOpen) {
+      closePopup();
+    }
+  }
+
+  onMount(() => {
+    window.addEventListener('keydown', handleKeydown);
+    return () => {
+      window.removeEventListener('keydown', handleKeydown);
+    };
+  });
 </script>
 
 <div class="fixed right-0 top-1/4 z-50 flex transform">
   <button
-    class="origin-top-left -translate-y-1/2 translate-x-full rotate-90 cursor-pointer rounded-b-lg bg-teal px-4 py-2 text-white shadow-lg transition-shadow duration-300 hover:shadow-sm"
+    class="origin-top-left -translate-y-1/2 translate-x-full rotate-90 cursor-pointer rounded-b-lg bg-teal px-4 py-2 text-white shadow-md shadow-navy transition-shadow duration-300 hover:shadow"
     on:click={togglePopup}
   >
     {triggerText}
@@ -28,8 +42,10 @@
     class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50"
     transition:fade={{ duration: 200 }}
   >
-    <div class="max-w-md mx-4 w-full rounded-lg bg-white p-6 shadow-xl">
-      <OpenCloseIcon onClick={() => (isPopupOpen = !isPopupOpen)} isOpen={true} />
+    <div class="relative max-h-screen max-w-[600px] overflow-y-auto shadow-xl">
+      <div class="absolute right-2 p-3">
+        <OpenCloseIcon onClick={closePopup} isOpen={true} />
+      </div>
       <slot />
     </div>
   </div>
diff --git a/src/lib/assets/DiscordLogo-White.svg b/src/lib/assets/DiscordLogo-White.svg
new file mode 100644
index 00000000..48cdc8fe
--- /dev/null
+++ b/src/lib/assets/DiscordLogo-White.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="800px" height="800px" viewBox="0 -28.5 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
+    <g>
+        <path d="M216.856339,16.5966031 C200.285002,8.84328665 182.566144,3.2084988 164.041564,0 C161.766523,4.11318106 159.108624,9.64549908 157.276099,14.0464379 C137.583995,11.0849896 118.072967,11.0849896 98.7430163,14.0464379 C96.9108417,9.64549908 94.1925838,4.11318106 91.8971895,0 C73.3526068,3.2084988 55.6133949,8.86399117 39.0420583,16.6376612 C5.61752293,67.146514 -3.4433191,116.400813 1.08711069,164.955721 C23.2560196,181.510915 44.7403634,191.567697 65.8621325,198.148576 C71.0772151,190.971126 75.7283628,183.341335 79.7352139,175.300261 C72.104019,172.400575 64.7949724,168.822202 57.8887866,164.667963 C59.7209612,163.310589 61.5131304,161.891452 63.2445898,160.431257 C105.36741,180.133187 151.134928,180.133187 192.754523,160.431257 C194.506336,161.891452 196.298154,163.310589 198.110326,164.667963 C191.183787,168.842556 183.854737,172.420929 176.223542,175.320965 C180.230393,183.341335 184.861538,190.991831 190.096624,198.16893 C211.238746,191.588051 232.743023,181.531619 254.911949,164.955721 C260.227747,108.668201 245.831087,59.8662432 216.856339,16.5966031 Z M85.4738752,135.09489 C72.8290281,135.09489 62.4592217,123.290155 62.4592217,108.914901 C62.4592217,94.5396472 72.607595,82.7145587 85.4738752,82.7145587 C98.3405064,82.7145587 108.709962,94.5189427 108.488529,108.914901 C108.508531,123.290155 98.3405064,135.09489 85.4738752,135.09489 Z M170.525237,135.09489 C157.88039,135.09489 147.510584,123.290155 147.510584,108.914901 C147.510584,94.5396472 157.658606,82.7145587 170.525237,82.7145587 C183.391518,82.7145587 193.761324,94.5189427 193.539891,108.914901 C193.539891,123.290155 183.391518,135.09489 170.525237,135.09489 Z" fill="#FFF" fill-rule="nonzero">
+</path>
+    </g>
+</svg>
diff --git a/src/lib/assets/DiscordLogo.svg b/src/lib/assets/DiscordLogo.svg
index 701be8ad..563878b7 100644
--- a/src/lib/assets/DiscordLogo.svg
+++ b/src/lib/assets/DiscordLogo.svg
@@ -1,8 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
 <svg width="800px" height="800px" viewBox="0 -28.5 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
     <g>
         <path d="M216.856339,16.5966031 C200.285002,8.84328665 182.566144,3.2084988 164.041564,0 C161.766523,4.11318106 159.108624,9.64549908 157.276099,14.0464379 C137.583995,11.0849896 118.072967,11.0849896 98.7430163,14.0464379 C96.9108417,9.64549908 94.1925838,4.11318106 91.8971895,0 C73.3526068,3.2084988 55.6133949,8.86399117 39.0420583,16.6376612 C5.61752293,67.146514 -3.4433191,116.400813 1.08711069,164.955721 C23.2560196,181.510915 44.7403634,191.567697 65.8621325,198.148576 C71.0772151,190.971126 75.7283628,183.341335 79.7352139,175.300261 C72.104019,172.400575 64.7949724,168.822202 57.8887866,164.667963 C59.7209612,163.310589 61.5131304,161.891452 63.2445898,160.431257 C105.36741,180.133187 151.134928,180.133187 192.754523,160.431257 C194.506336,161.891452 196.298154,163.310589 198.110326,164.667963 C191.183787,168.842556 183.854737,172.420929 176.223542,175.320965 C180.230393,183.341335 184.861538,190.991831 190.096624,198.16893 C211.238746,191.588051 232.743023,181.531619 254.911949,164.955721 C260.227747,108.668201 245.831087,59.8662432 216.856339,16.5966031 Z M85.4738752,135.09489 C72.8290281,135.09489 62.4592217,123.290155 62.4592217,108.914901 C62.4592217,94.5396472 72.607595,82.7145587 85.4738752,82.7145587 C98.3405064,82.7145587 108.709962,94.5189427 108.488529,108.914901 C108.508531,123.290155 98.3405064,135.09489 85.4738752,135.09489 Z M170.525237,135.09489 C157.88039,135.09489 147.510584,123.290155 147.510584,108.914901 C147.510584,94.5396472 157.658606,82.7145587 170.525237,82.7145587 C183.391518,82.7145587 193.761324,94.5189427 193.539891,108.914901 C193.539891,123.290155 183.391518,135.09489 170.525237,135.09489 Z" fill="#FEFAF3" fill-rule="nonzero">
 </path>
     </g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/src/style/app.css b/src/style/app.css
index db0f6253..11c2ed70 100644
--- a/src/style/app.css
+++ b/src/style/app.css
@@ -14,6 +14,12 @@
 
 @layer components {
   /* Typeography */
+  .title-16 {
+    @apply font-title leading-[1] tracking-wider sm:text-[16px] md:text-[16px] lg:text-[16px];
+  }
+  .title-50 {
+    @apply font-title leading-[1] tracking-wider sm:text-[40px] md:text-[44px] lg:text-[44px];
+  }
   .title-75 {
     @apply font-title leading-[1] tracking-wide sm:text-[40px] md:text-[55px] lg:text-75;
   }
diff --git a/tailwind.config.js b/tailwind.config.js
index 0390de4f..156bc4b2 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -25,6 +25,8 @@ export default {
       indigo: '#5E69FF',
       darkIndigo: '#445BC3',
       rose: '#A06B87',
+      red: '#EB5757',
+      gray: '#C8CDD0',
     },
     width: {
       page: `${MAX_PAGE_WIDTH}px`,
@@ -62,5 +64,5 @@ export default {
       horizontal: { raw: '(min-height: 700px) and (min-width: 1300px)' },
     },
   },
-  safelist: ['after:bg-navy', 'after:bg-cream'],
+  safelist: ['after:bg-navy', 'after:bg-cream', 'invalid:border-red'],
 };

From 1fef3e726e4db51b84fcc44480f9df5801ec8ce9 Mon Sep 17 00:00:00 2001
From: Wil Wade <wil.wade@amplica.io>
Date: Fri, 13 Sep 2024 15:57:38 +0000
Subject: [PATCH 04/20] Adjust section text for side tag

---
 src/components/Sections/Section2.svelte | 4 ++--
 src/components/Sections/Section3.svelte | 2 +-
 src/components/Sections/Section4.svelte | 4 ++--
 src/components/Sections/Section5.svelte | 4 ++--
 src/style/app.css                       | 2 +-
 5 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/Sections/Section2.svelte b/src/components/Sections/Section2.svelte
index bf0de886..c181adea 100644
--- a/src/components/Sections/Section2.svelte
+++ b/src/components/Sections/Section2.svelte
@@ -19,12 +19,12 @@
         >.02</SectionNumber
       >
       <SlideIn>
-        <h2 class="title-100 -mt-[9px] sm:max-w-[280px] lg:max-w-[320px]">Taking back control</h2>
+        <h2 class="title-100 -mt-[9px] sm:max-w-[280px] sm:pr-5 lg:max-w-[320px]">Taking back control</h2>
       </SlideIn>
     </div>
 
     <SectionParagraph
-      classes="text-left paragraph-spacing-right lg:pl-0 sm:pb-[100px] lg:pb-0 sm:max-w-[515px] lg:max-w-auto"
+      classes="text-left paragraph-spacing-right lg:pl-0 sm:pb-[100px] lg:pb-0 sm:pr-5  sm:max-w-[515px] lg:max-w-auto"
     >
       With Frequency, you will have a choice in how your favorite applications and websites utilize your data. Obtain
       control over your privacy and how your data is shared.
diff --git a/src/components/Sections/Section3.svelte b/src/components/Sections/Section3.svelte
index 32500277..82df4b97 100644
--- a/src/components/Sections/Section3.svelte
+++ b/src/components/Sections/Section3.svelte
@@ -20,7 +20,7 @@
   <section class="flex h-full flex-1 justify-center sm:flex-col sm:pt-[40px] lg:flex-row vertical-lg:flex-col">
     <SplitSection isLeft={true} classes="relative sm:pb-[100px] lg:pb-0">
       <SlideIn>
-        <h2 class="title-75 text-right text-navy sm:max-w-[300px] md:max-w-[400px] lg:max-w-[540px]">
+        <h2 class="title-75 text-right text-navy sm:max-w-[300px] sm:pr-5 md:max-w-[400px] lg:max-w-[540px]">
           Take Your Content & Relationships With You
         </h2>
       </SlideIn>
diff --git a/src/components/Sections/Section4.svelte b/src/components/Sections/Section4.svelte
index 77956e5b..5ed3156e 100644
--- a/src/components/Sections/Section4.svelte
+++ b/src/components/Sections/Section4.svelte
@@ -15,10 +15,10 @@
       class="sm:flex-end flex text-navy sm:flex-col sm:items-end sm:gap-6 lg:flex-row-reverse lg:items-start lg:justify-end lg:gap-12"
     >
       <SlideIn>
-        <h2 class="title-75 sm:max-w-[500px] lg:max-w-[500px] lg:text-left">Support Your Preferred Apps</h2>
+        <h2 class="title-75 sm:max-w-[500px] sm:pr-5 lg:max-w-[500px] lg:text-left">Support Your Preferred Apps</h2>
       </SlideIn>
 
-      <SectionParagraph classes="paragraph-spacing-right lg:pl-0">
+      <SectionParagraph classes="paragraph-spacing-right lg:pl-0 sm:pr-5">
         Frequency is set to unveil a distinctive feature that allows you to express support for the apps and services
         within the Frequency network that you love. This feature will also enable you to publicly alter your choices,
         and, if necessary, reevaluate your support of apps and services, encouraging ethical conduct and responsibility.
diff --git a/src/components/Sections/Section5.svelte b/src/components/Sections/Section5.svelte
index a191e6d3..65ed05c5 100644
--- a/src/components/Sections/Section5.svelte
+++ b/src/components/Sections/Section5.svelte
@@ -23,9 +23,9 @@
   >
     <section class="relative flex flex-col gap-6 sm:max-w-[800px] lg:max-w-[640px] lg:pb-[80px] lg:pr-[80px]">
       <SlideIn>
-        <h2 class="title-75 text-yellow lg:max-w-[600px]">The Core of Our Technology</h2>
+        <h2 class="title-75 text-yellow sm:pr-5 lg:max-w-[600px]">The Core of Our Technology</h2>
       </SlideIn>
-      <SectionParagraph classes="md:pr-[140px] lg:px-0 text-cream">
+      <SectionParagraph classes="sm:pr-5 md:pr-[140px] lg:px-0 text-cream">
         The creators of Frequency are at the forefront of innovation. They've created the Decentralized Social
         Networking Protocol (DSNP), an open-source solution that establishes a shared social graph independent of
         specific applications or centralized platforms.
diff --git a/src/style/app.css b/src/style/app.css
index 11c2ed70..8433d701 100644
--- a/src/style/app.css
+++ b/src/style/app.css
@@ -39,7 +39,7 @@
   }
 
   .paragraph-spacing-right {
-    @apply sm:pl-[90px] md:pl-[140px] lg:pl-[140px] lg:pr-0;
+    @apply sm:pl-[70px] md:pl-[140px] lg:pl-[140px] lg:pr-0;
   }
 
   .paragraph-spacing-left {

From e962ea109378ffa035e9724888a6659ad67a61fb Mon Sep 17 00:00:00 2001
From: Wil Wade <wil.wade@amplica.io>
Date: Fri, 13 Sep 2024 15:59:41 +0000
Subject: [PATCH 05/20] Formatting

---
 cors-proxy/README.md | 61 ++++++++++++++++++++++----------------------
 1 file changed, 31 insertions(+), 30 deletions(-)

diff --git a/cors-proxy/README.md b/cors-proxy/README.md
index fda0ed40..05b1c85d 100644
--- a/cors-proxy/README.md
+++ b/cors-proxy/README.md
@@ -23,20 +23,21 @@ These are the environment variables used by the handler.
 To run the CORS proxy locally:
 
 1. Run the proxy locally:
-    ```bash
-    PROXY_TARGET_URL="https://example.com/submit-form" npm run start
-    ```
 
-    - Replace `https://example.com/submit-form` with the target URL.
+   ```bash
+   PROXY_TARGET_URL="https://example.com/submit-form" npm run start
+   ```
+
+   - Replace `https://example.com/submit-form` with the target URL.
 
 2. Use the following `curl` example to test a `POST` request from your terminal:
 
-    ```bash
-    curl -X POST "http://localhost:3000/" \
-        -d "param1=value1&param2=value2"
-    ```
+   ```bash
+   curl -X POST "http://localhost:3000/" \
+       -d "param1=value1&param2=value2"
+   ```
 
-    - Replace `param1=value1&param2=value2` with your actual form data.
+   - Replace `param1=value1&param2=value2` with your actual form data.
 
 ### 2. Using with an HTML Form and JavaScript Fetch
 
@@ -52,26 +53,26 @@ You can use this proxy to submit a form using JavaScript `fetch`. Here’s an ex
 </form>
 
 <script>
-document.getElementById('exampleForm').addEventListener('submit', async (e) => {
-  e.preventDefault();  // Prevent the default form submission
-
-  const formData = new FormData(e.target);
-  const params = new URLSearchParams(formData).toString();
-
-  try {
-    const response = await fetch('https://localhost:3000', {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/x-www-form-urlencoded'
-      },
-      body: params,
-    });
-
-    const result = await response.json();
-    console.log(result);  // Handle the response
-  } catch (error) {
-    console.error('Error:', error);
-  }
-});
+  document.getElementById('exampleForm').addEventListener('submit', async (e) => {
+    e.preventDefault(); // Prevent the default form submission
+
+    const formData = new FormData(e.target);
+    const params = new URLSearchParams(formData).toString();
+
+    try {
+      const response = await fetch('https://localhost:3000', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/x-www-form-urlencoded',
+        },
+        body: params,
+      });
+
+      const result = await response.json();
+      console.log(result); // Handle the response
+    } catch (error) {
+      console.error('Error:', error);
+    }
+  });
 </script>
 ```

From e3a2cf627bdec356b148a834ea5fa26f096402e0 Mon Sep 17 00:00:00 2001
From: Wil Wade <wil.wade@amplica.io>
Date: Fri, 13 Sep 2024 16:00:03 +0000
Subject: [PATCH 06/20] Final tweaks pending stars and wave

---
 src/components/GetNotified.svelte | 8 ++++++--
 src/routes/+layout.svelte         | 2 +-
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/GetNotified.svelte b/src/components/GetNotified.svelte
index 4726d776..3ce45a2d 100644
--- a/src/components/GetNotified.svelte
+++ b/src/components/GetNotified.svelte
@@ -96,8 +96,12 @@
           />
         </div>
         <div class="mb-4">
-          <label class="inline-flex items-center">
-            <input type="checkbox" bind:checked={isDeveloper} class="form-checkbox text-white accent-tealBright" />
+          <label class="inline-flex items-center hover:cursor-pointer">
+            <input
+              type="checkbox"
+              bind:checked={isDeveloper}
+              class="form-checkbox text-white accent-tealBright hover:cursor-pointer"
+            />
             <span class="ml-2 text-xs font-semibold"
               >Are you a developer interested in building something on Frequency?</span
             >
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index e1a19b4f..fe2588ab 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -14,7 +14,7 @@
       </div>
     </div>
     <Footer />
-    <SideTag triggerText="Get Notified">
+    <SideTag triggerText="Get notified">
       <GetNotified />
     </SideTag>
   </div>

From 3d9a45c545ca06e7c8e669cf728856bd0277d9b8 Mon Sep 17 00:00:00 2001
From: Wil Wade <wil.wade@amplica.io>
Date: Fri, 13 Sep 2024 17:00:47 +0000
Subject: [PATCH 07/20] Updates to the cors proxy

---
 cors-proxy/README.md       |  6 +++++-
 cors-proxy/index.mjs       |  3 ---
 cors-proxy/server.mjs      |  9 ++++++---
 cors-proxy/serverless.yaml | 18 ++++++++++++++++++
 4 files changed, 29 insertions(+), 7 deletions(-)
 create mode 100644 cors-proxy/serverless.yaml

diff --git a/cors-proxy/README.md b/cors-proxy/README.md
index 05b1c85d..0dd31093 100644
--- a/cors-proxy/README.md
+++ b/cors-proxy/README.md
@@ -9,12 +9,16 @@ This is used by the contact form.
 - Supports `POST` requests to a single `PROXY_TARGET_URL`
 - Adds CORS headers for cross-origin requests
 
+## Serverless.yaml
+
+See [./serverless.yaml] to use [serverless.com config](https://www.serverless.com/)
+
 ## Environment Variables
 
 These are the environment variables used by the handler.
 
 - `PROXY_TARGET_URL`: Where the proxy will redirect the requests to
-- `PROXY_ALLOWED_ORIGIN`: (Default `'*'`) The `Access-Control-Allow-Origin` string.
+- `PROXY_ALLOWED_ORIGIN`: (Default `'*'`) The `Access-Control-Allow-Origin` string for the local server.
 
 ## Setup
 
diff --git a/cors-proxy/index.mjs b/cors-proxy/index.mjs
index c7963cf2..a7242e39 100644
--- a/cors-proxy/index.mjs
+++ b/cors-proxy/index.mjs
@@ -3,7 +3,6 @@ import process from 'node:process';
 
 export const handler = async (event) => {
   const targetUrl = process.env.PROXY_TARGET_URL;
-  const allowedOrigin = process.env.PROXY_ALLOWED_ORIGIN || '*';
 
   const postData = event.body;
 
@@ -27,8 +26,6 @@ export const handler = async (event) => {
           statusCode: 200,
           headers: {
             'Content-Type': 'application/json',
-            'Access-Control-Allow-Origin': allowedOrigin,
-            'Access-Control-Allow-Methods': 'POST, OPTIONS',
           },
           body: JSON.stringify({
             status: response.statusCode,
diff --git a/cors-proxy/server.mjs b/cors-proxy/server.mjs
index d9231fe0..63250a5b 100644
--- a/cors-proxy/server.mjs
+++ b/cors-proxy/server.mjs
@@ -1,6 +1,9 @@
 import http from 'http';
 import { handler } from './index.mjs';
 import url from 'url';
+import process from 'node:process';
+
+const allowedOrigin = process.env.PROXY_ALLOWED_ORIGIN || '*';
 
 // Function to parse the HTTP request body
 const getRequestBody = (req) => {
@@ -21,9 +24,9 @@ const getRequestBody = (req) => {
 // Start the HTTP server
 const server = http.createServer(async (req, res) => {
   // Set CORS headers
-  res.setHeader('Access-Control-Allow-Origin', 'http://localhost:5173'); // Use "*" to allow all origins
-  res.setHeader('Access-Control-Allow-Methods', 'POST, OPTIONS'); // Allow POST and OPTIONS methods
-  res.setHeader('Access-Control-Allow-Headers', 'Content-Type'); // Allow certain headers
+  res.setHeader('Access-Control-Allow-Origin', allowedOrigin);
+  res.setHeader('Access-Control-Allow-Methods', 'POST, OPTIONS');
+  res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
 
   // Handle OPTIONS request for CORS preflight
   if (req.method === 'OPTIONS') {
diff --git a/cors-proxy/serverless.yaml b/cors-proxy/serverless.yaml
new file mode 100644
index 00000000..36436708
--- /dev/null
+++ b/cors-proxy/serverless.yaml
@@ -0,0 +1,18 @@
+service: xyz-form-cors-proxy
+
+frameworkVersion: '4'
+
+provider:
+  name: aws
+  runtime: nodejs20.x
+
+functions:
+  hello:
+    handler: handler.handler
+    events:
+      - http:
+        method: post
+        cors:
+          origin: 'https://*.frequency.xyz'
+          headers:
+            - Content-Type

From ca2d46beddd89e76c906d1d7edb61362dcc31e9e Mon Sep 17 00:00:00 2001
From: Wil Wade <wil.wade@amplica.io>
Date: Fri, 13 Sep 2024 17:01:01 +0000
Subject: [PATCH 08/20] Final tweaks

---
 .../{ => GetNotified}/GetNotified.svelte      | 42 ++++++++--------
 src/components/GetNotified/Stars.svelte       | 48 +++++++++++++++++++
 src/components/GetNotified/Wave.svelte        |  9 ++++
 src/components/SideTag.svelte                 |  4 +-
 src/routes/+layout.svelte                     |  2 +-
 src/style/app.css                             |  4 ++
 6 files changed, 87 insertions(+), 22 deletions(-)
 rename src/components/{ => GetNotified}/GetNotified.svelte (78%)
 create mode 100644 src/components/GetNotified/Stars.svelte
 create mode 100644 src/components/GetNotified/Wave.svelte

diff --git a/src/components/GetNotified.svelte b/src/components/GetNotified/GetNotified.svelte
similarity index 78%
rename from src/components/GetNotified.svelte
rename to src/components/GetNotified/GetNotified.svelte
index 3ce45a2d..32792486 100644
--- a/src/components/GetNotified.svelte
+++ b/src/components/GetNotified/GetNotified.svelte
@@ -1,11 +1,13 @@
 <script lang="ts">
-  import DiscordLogoWhite from '../lib/assets/DiscordLogo-White.svg';
+  import DiscordLogoWhite from '../../lib/assets/DiscordLogo-White.svg';
+  import Stars from './Stars.svelte';
+  import Wave from './Wave.svelte';
 
   const fieldMapping = {
-    surname: 'entry.2099239263',
-    familyName: 'entry.69819808',
-    email: 'entry.769464705',
-    developerInterest: 'entry.1903353368',
+    surname: 'entry.447550433',
+    familyName: 'entry.239030615',
+    email: 'entry.626493750',
+    developerInterest: 'entry.334295884',
   };
 
   const postUrl = 'http://localhost:3000';
@@ -37,7 +39,7 @@
     formData.append(fieldMapping.surname, surname);
     formData.append(fieldMapping.familyName, familyName);
     formData.append(fieldMapping.email, email);
-    formData.append(fieldMapping.developerInterest, isDeveloper ? 'Developer' : '');
+    if (isDeveloper) formData.append(fieldMapping.developerInterest, 'Developer');
 
     try {
       const response = await fetch(postUrl, {
@@ -60,13 +62,19 @@
   $: inputClasses = hasSubmittedFormAtLeastOnce ? invalidInputClasses : validInputClasses;
 </script>
 
-<div class="rounded-lg bg-cream">
-  <div class="rounded-t-lg bg-navy">
-    <div class="top-lines rounded-t-lg">
-      <div class="top-lines-fade rounded-t-lg">
-        <div class="top-gradient rounded-t-lg px-4 pb-[50px] pt-[70px] text-white">
+<div class="rounded-3xl bg-cream">
+  <div class="relative overflow-hidden rounded-t-3xl bg-navy">
+    <div class="top-lines rounded-t-3xl">
+      <div class="top-lines-fade rounded-t-3xl">
+        <div id="notified-stars" class="absolute w-[80%] overflow-hidden">
+          <div class="svg-100 w-[600px]"><Stars /></div>
+        </div>
+        <div id="notified-wave" class="absolute bottom-0 w-[100%]">
+          <div class="svg-100 w-[100%]"><Wave /></div>
+        </div>
+        <div class="top-gradient relative z-10 rounded-t-3xl px-4 pb-[50px] pt-[70px] text-white">
           <h2 class="title-50 mx-2 mb-4 text-center leading-[1.1]">Interested in Frequency's ecosystem?</h2>
-          <p class="title-16 text-center">Get notified when more developer tools are available.</p>
+          <p class="title-16 z-50 text-center">Get notified when more developer tools are available.</p>
         </div>
       </div>
     </div>
@@ -118,11 +126,7 @@
       </form>
     {:else}
       <div class="px-8 py-12">
-        <h2 class="title-75 mb-10 text-center">Thank You!</h2>
-        <p class="mb-10 text-center">
-          As soon as the tools become available, we'll let you know so you can check out the official documentation and
-          start experimenting!
-        </p>
+        <h2 class="title-75 text-center">Thank You!</h2>
       </div>
     {/if}
 
@@ -143,8 +147,8 @@
     background: radial-gradient(circle at calc(100% - 60px) 0px, #365e73 0%, transparent 30%);
   }
   .top-lines {
-    background: linear-gradient(90deg, #365e73 1px, transparent 1px),
-      linear-gradient(180deg, #365e73 1px, transparent 1px);
+    background: linear-gradient(90deg, rgba(54, 94, 115, 40%) 1px, transparent 1px),
+      linear-gradient(180deg, rgba(54, 94, 115, 40%) 1px, transparent 1px);
     background-size: 60px 60px;
     background-position: 15px 10px;
   }
diff --git a/src/components/GetNotified/Stars.svelte b/src/components/GetNotified/Stars.svelte
new file mode 100644
index 00000000..82c11507
--- /dev/null
+++ b/src/components/GetNotified/Stars.svelte
@@ -0,0 +1,48 @@
+<svg fill="none" viewBox="0 0 374 201" xmlns="http://www.w3.org/2000/svg">
+  <g fill="#fff" opacity=".7">
+    <circle cx="2.6087" cy="168.99" r=".62162" fill-opacity=".6" />
+    <circle cx="134.1" cy="100.39" r=".69048" fill-opacity=".6" />
+    <circle cx="13.404" cy="50.739" r=".76211" fill-opacity=".5" />
+    <circle cx="70.168" cy="43.57" r=".69691" fill-opacity=".5" />
+    <circle cx="263.17" cy="102.19" r=".71145" fill-opacity=".6" />
+    <circle cx="123.44" cy="115.2" r=".6939" fill-opacity=".3" />
+    <circle cx="373.83" cy="63.672" r=".67164" fill-opacity=".5" />
+    <circle cx="2.1229" cy="28.803" r=".72923" fill-opacity=".4" />
+    <circle cx="228.81" cy="96.25" r=".68988" fill-opacity=".5" />
+    <circle cx="133.58" cy="152.56" r=".76521" fill-opacity=".4" />
+    <circle cx="206.94" cy="78.518" r=".71817" fill-opacity=".6" />
+    <circle cx="355.04" cy="117.11" r=".83158" fill-opacity=".4" />
+    <circle cx="30.614" cy="183.38" r=".80469" fill-opacity=".5" />
+    <circle cx="36.466" cy="8.683" r=".73598" fill-opacity=".4" />
+    <circle cx="359.75" cy="191.67" r=".80659" fill-opacity=".4" />
+    <circle cx="78.563" cy="88.076" r=".8044" fill-opacity=".4" />
+    <circle cx="354.29" cy="26.97" r=".67146" fill-opacity=".6" />
+    <circle cx="17.054" cy="40.182" r=".85995" fill-opacity=".6" />
+    <circle cx="243.77" cy="57.932" r=".85128" fill-opacity=".6" />
+    <circle cx="349.08" cy="38.33" r=".78445" fill-opacity=".3" />
+    <circle cx="286.22" cy="75.519" r=".67836" fill-opacity=".4" />
+    <circle cx="245.37" cy="84.988" r=".67648" fill-opacity=".6" />
+    <circle cx="161.28" cy="16.291" r=".64847" fill-opacity=".4" />
+    <circle cx="326.6" cy="63.213" r=".80469" fill-opacity=".5" />
+    <circle cx="120.59" cy="124.18" r=".8032" fill-opacity=".5" />
+    <circle cx="156.78" cy="57.372" r=".88313" fill-opacity=".5" />
+    <circle cx="172.61" cy="100.43" r=".72705" fill-opacity=".6" />
+    <circle cx="103.97" cy="57.244" r=".75484" fill-opacity=".5" />
+    <circle cx="27.463" cy="101.5" r=".614" fill-opacity=".4" />
+    <circle cx="181.56" cy="31.24" r=".79804" fill-opacity=".6" />
+    <circle cx="39.986" cy=".95682" r=".70557" fill-opacity=".3" />
+    <circle cx="97.551" cy="59.706" r=".8483" fill-opacity=".5" />
+    <circle cx="289.73" cy="57.719" r=".63786" fill-opacity=".5" />
+    <circle cx="180.3" cy="64.904" r=".71958" fill-opacity=".5" />
+    <circle cx="-.77738" cy="166.2" r=".78884" fill-opacity=".4" />
+    <circle cx="267.43" cy="137.83" r=".83023" fill-opacity=".4" />
+    <circle cx="337.08" cy="1.476" r=".63263" fill-opacity=".5" />
+    <circle cx="58.997" cy="75.022" r=".77398" fill-opacity=".3" />
+    <circle cx="78.374" cy="9.1536" r=".61472" fill-opacity=".3" />
+    <circle cx="121.2" cy="76.252" r=".82045" fill-opacity=".5" />
+    <circle cx="125.12" cy="5.5812" r=".59395" fill-opacity=".6" />
+    <circle cx="53.076" cy="109.95" r=".77151" fill-opacity=".3" />
+    <circle cx="246.02" cy="161.41" r=".73464" fill-opacity=".5" />
+    <circle cx="126.99" cy="101.58" r=".69211" fill-opacity=".5" />
+  </g>
+</svg>
diff --git a/src/components/GetNotified/Wave.svelte b/src/components/GetNotified/Wave.svelte
new file mode 100644
index 00000000..57f927b6
--- /dev/null
+++ b/src/components/GetNotified/Wave.svelte
@@ -0,0 +1,9 @@
+<svg viewBox="0 0 453 62" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M-438.504 61.3538C-438.347 61.3538 -1.62156 61.3538 -1.33253 61.3538C1.34099 61.3651 4.95384 61.2976 9.19293 60.9376C10.8669 60.7913 13.9498 60.5325 17.7554 59.88C22.8254 59.0136 26.9321 57.8436 30.9183 56.7072C38.8064 54.457 46.9715 52.1281 62.6392 52.1281C78.307 52.1281 86.4721 54.457 94.3602 56.7072C98.3344 57.8436 102.453 59.0136 107.523 59.88C110.269 60.3525 113.075 60.69 116.086 60.9376C119.506 61.2076 123.275 61.3538 127.285 61.3538C132.271 61.3538 136.932 60.915 141.171 60.0375C144.916 59.2612 148.384 58.1586 151.781 56.6622C158.055 53.8945 163.149 50.1367 168.087 46.5139C177.865 39.3246 187.969 31.8764 207.383 31.8764C226.796 31.8764 236.9 39.3133 246.679 46.5139C251.604 50.1367 256.698 53.8945 262.985 56.6622C266.381 58.1586 269.861 59.2724 273.594 60.0375C277.677 60.8813 282.181 61.3201 286.962 61.3538C287.022 61.3538 287.094 61.3538 287.155 61.3538C287.263 61.3538 287.371 61.3538 287.468 61.3538C293.272 61.2976 298.716 60.42 303.665 58.7211C308.17 57.1797 312.348 54.9746 316.431 51.9706C323.982 46.4239 330.124 38.9195 336.049 31.6627C347.815 17.2728 359.978 2.38782 383.341 2.38782C406.704 2.38782 418.868 17.2728 430.634 31.6627C436.571 38.9195 442.7 46.4239 450.251 51.9706C454.346 54.9746 458.525 57.1797 463.017 58.7211C469.111 60.8138 474.181 61.1401 477.721 61.3201C494.425 62.1639 612.149 62.0691 618.496 61.8441"
+    stroke="#55B1AB"
+    stroke-opacity="0.5"
+    stroke-width="4"
+    stroke-miterlimit="10"
+  />
+</svg>
diff --git a/src/components/SideTag.svelte b/src/components/SideTag.svelte
index 53f9fda5..ced41b70 100644
--- a/src/components/SideTag.svelte
+++ b/src/components/SideTag.svelte
@@ -43,10 +43,10 @@
     transition:fade={{ duration: 200 }}
   >
     <div class="relative max-h-screen max-w-[600px] overflow-y-auto shadow-xl">
-      <div class="absolute right-2 p-3">
+      <slot />
+      <div class="absolute right-2 top-0 z-50 p-3">
         <OpenCloseIcon onClick={closePopup} isOpen={true} />
       </div>
-      <slot />
     </div>
   </div>
 {/if}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index fe2588ab..b75e41fa 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,7 +1,7 @@
 <script>
   import Footer from '../components/Footer.svelte';
   import JoinSocials from '../components/JoinSocials.svelte';
-  import GetNotified from '../components/GetNotified.svelte';
+  import GetNotified from '../components/GetNotified/GetNotified.svelte';
   import SideTag from '../components/SideTag.svelte';
 </script>
 
diff --git a/src/style/app.css b/src/style/app.css
index 8433d701..acc8e8a9 100644
--- a/src/style/app.css
+++ b/src/style/app.css
@@ -46,6 +46,10 @@
     @apply sm:pr-[100px] md:pr-[140px] lg:pl-0 lg:pr-[140px];
   }
 
+  .svg-100 > svg {
+    @apply w-full;
+  }
+
   /* Underline on hover animation */
   .underline-on-hover {
     @apply relative block cursor-pointer overflow-hidden px-0 py-1;

From b1564c2e239380a24bacf10ffd8c4c5ae440b309 Mon Sep 17 00:00:00 2001
From: Wil Wade <wil.wade@amplica.io>
Date: Fri, 13 Sep 2024 19:55:30 +0000
Subject: [PATCH 09/20] Add the Privacy Policy

---
 src/components/Footer.svelte         |   2 +
 src/components/Header/Header.svelte  |  30 +-
 src/components/SideTag.svelte        |   2 +-
 src/routes/(home)/+layout.svelte     |  13 +
 src/routes/{ => (home)}/+page.svelte |  42 +--
 src/routes/+layout.svelte            |  22 +-
 src/routes/privacy/+layout.svelte    |  15 +
 src/routes/privacy/+page.svelte      | 420 +++++++++++++++++++++++++++
 8 files changed, 493 insertions(+), 53 deletions(-)
 create mode 100644 src/routes/(home)/+layout.svelte
 rename src/routes/{ => (home)}/+page.svelte (59%)
 create mode 100644 src/routes/privacy/+layout.svelte
 create mode 100644 src/routes/privacy/+page.svelte

diff --git a/src/components/Footer.svelte b/src/components/Footer.svelte
index 7749f512..afb563e7 100644
--- a/src/components/Footer.svelte
+++ b/src/components/Footer.svelte
@@ -1,5 +1,7 @@
 <footer class="freq-container flex h-[50px] items-center justify-end gap-3 text-xs font-semibold">
   <div>© {new Date().getFullYear()} Frequency Network Foundation</div>
   <span class="h-4 w-[2px] bg-black" />
+  <a href="/privacy">Privacy Policy</a>
+  <span class="h-4 w-[2px] bg-black" />
   <div class="whitespace-nowrap">All Rights Reserved</div>
 </footer>
diff --git a/src/components/Header/Header.svelte b/src/components/Header/Header.svelte
index 72bb091a..9f2d22e8 100644
--- a/src/components/Header/Header.svelte
+++ b/src/components/Header/Header.svelte
@@ -27,20 +27,22 @@
   id="header"
   class={`freq-container z-50 flex max-w-page items-center justify-between sm:pt-[10px] lg:pt-[30px] ${isNavOpen ? 'fixed' : ''}`}
 >
-  <svg
-    class="mr-3 sm:w-[180px] md:w-[180px] lg:w-[210px]"
-    width="216"
-    height="32"
-    viewBox="0 0 216 32"
-    xmlns="http://www.w3.org/2000/svg"
-    role="none"
-  >
-    <path
-      d="M0 0.654808V31.3416H5.36345V21.7823L16.1391 17.1452L15.9972 11.6618L5.40781 16.2053V5.76408H19.0804V0.654808H0ZM26.0808 5.75963H33.2676C35.601 5.75963 37.5131 6.93115 37.5131 9.46129C37.5131 11.9914 35.601 13.2075 33.2676 13.2075H26.0808V5.76408V5.75963ZM20.6686 0.654808V31.3416H26.0808V23.8002L42.8765 31.3416V25.4395L26.5466 18.3658H33.1256C38.3515 18.3658 42.8765 14.9937 42.8765 9.51029C42.8765 4.02684 38.3515 0.654808 33.1256 0.654808H20.6686ZM44.5091 0.654808V31.3416H63.5451V26.1878H49.8725V18.5039H63.5451V13.399H49.8725V5.76408H63.5451V0.654808H44.5091ZM114.819 0.654808V21.6442C114.819 24.7846 112.535 26.9362 109.456 26.9362C106.377 26.9362 104.093 24.7802 104.093 21.6442V0.654808H98.7291V21.5507C98.7291 27.7335 103.534 31.9964 109.46 31.9964C115.387 31.9964 120.192 27.7335 120.192 21.5507V0.654808H114.828H114.819ZM121.82 0.654808V31.3416H140.856V26.1878H127.183V18.5039H140.856V13.399H127.183V5.76408H140.856V0.654808H121.82ZM159.519 0.654808V21.3636L148.322 0.654808H142.488V31.3416H147.759V10.6818L159.005 31.3416H164.79V0.654808H159.519ZM209.396 0.654808L205.151 12.1785L200.67 0.654808H194.743L207.715 31.3416H213.313L207.901 18.5529L215.088 0.703808H209.396V0.654808ZM70.3104 15.9782C70.3104 9.98246 75.1637 5.06027 81.1837 5.06027C87.2037 5.06027 92.057 9.93346 92.057 15.9782C92.057 17.898 91.5912 19.7734 90.6108 21.4616L78.5264 13.9648V20.054L87.0174 25.2078C85.2429 26.2858 83.2377 26.8961 81.1393 26.8961C75.2125 26.9451 70.3636 22.1654 70.3148 16.2143V15.9782M81.1349 1.99158e-06C72.3644 0.0490011 65.2264 7.21624 65.2708 16.0227C65.3196 24.8292 72.4576 31.9964 81.2281 31.9519C85.0521 31.9519 88.7386 30.5443 91.6311 28.0186L97.0433 31.2971V25.4395L94.8962 24.1298C96.298 21.6487 97.0433 18.8379 97.0433 15.9782C97.1409 7.21624 90.0961 0.0490011 81.37 1.99158e-06C81.2768 1.99158e-06 81.2281 1.99158e-06 81.1349 1.99158e-06ZM182.384 1.99158e-06C173.613 1.99158e-06 166.427 7.12269 166.427 15.9737C166.427 24.8247 173.52 31.9964 182.335 31.9964C187.419 31.9964 192.179 29.6088 195.165 25.484L191.434 21.7378C189.615 25.0163 186.115 27.0297 182.384 26.9362C176.226 26.9362 171.608 22.2055 171.608 16.0183C171.608 9.83101 176.275 5.05582 182.384 5.05582C186.115 4.96228 189.615 6.9757 191.434 10.3032L195.165 6.55698C192.179 2.34305 187.419 -0.0445427 182.384 1.99158e-06Z"
-      fill={innerWidth <= MAX_MOBILE_WIDTH ? '#5E69FF' : logoHex}
-      class="transition-all duration-1000"
-    />
-  </svg>
+  <a href="/">
+    <svg
+      class="mr-3 sm:w-[180px] md:w-[180px] lg:w-[210px]"
+      width="216"
+      height="32"
+      viewBox="0 0 216 32"
+      xmlns="http://www.w3.org/2000/svg"
+      role="none"
+    >
+      <path
+        d="M0 0.654808V31.3416H5.36345V21.7823L16.1391 17.1452L15.9972 11.6618L5.40781 16.2053V5.76408H19.0804V0.654808H0ZM26.0808 5.75963H33.2676C35.601 5.75963 37.5131 6.93115 37.5131 9.46129C37.5131 11.9914 35.601 13.2075 33.2676 13.2075H26.0808V5.76408V5.75963ZM20.6686 0.654808V31.3416H26.0808V23.8002L42.8765 31.3416V25.4395L26.5466 18.3658H33.1256C38.3515 18.3658 42.8765 14.9937 42.8765 9.51029C42.8765 4.02684 38.3515 0.654808 33.1256 0.654808H20.6686ZM44.5091 0.654808V31.3416H63.5451V26.1878H49.8725V18.5039H63.5451V13.399H49.8725V5.76408H63.5451V0.654808H44.5091ZM114.819 0.654808V21.6442C114.819 24.7846 112.535 26.9362 109.456 26.9362C106.377 26.9362 104.093 24.7802 104.093 21.6442V0.654808H98.7291V21.5507C98.7291 27.7335 103.534 31.9964 109.46 31.9964C115.387 31.9964 120.192 27.7335 120.192 21.5507V0.654808H114.828H114.819ZM121.82 0.654808V31.3416H140.856V26.1878H127.183V18.5039H140.856V13.399H127.183V5.76408H140.856V0.654808H121.82ZM159.519 0.654808V21.3636L148.322 0.654808H142.488V31.3416H147.759V10.6818L159.005 31.3416H164.79V0.654808H159.519ZM209.396 0.654808L205.151 12.1785L200.67 0.654808H194.743L207.715 31.3416H213.313L207.901 18.5529L215.088 0.703808H209.396V0.654808ZM70.3104 15.9782C70.3104 9.98246 75.1637 5.06027 81.1837 5.06027C87.2037 5.06027 92.057 9.93346 92.057 15.9782C92.057 17.898 91.5912 19.7734 90.6108 21.4616L78.5264 13.9648V20.054L87.0174 25.2078C85.2429 26.2858 83.2377 26.8961 81.1393 26.8961C75.2125 26.9451 70.3636 22.1654 70.3148 16.2143V15.9782M81.1349 1.99158e-06C72.3644 0.0490011 65.2264 7.21624 65.2708 16.0227C65.3196 24.8292 72.4576 31.9964 81.2281 31.9519C85.0521 31.9519 88.7386 30.5443 91.6311 28.0186L97.0433 31.2971V25.4395L94.8962 24.1298C96.298 21.6487 97.0433 18.8379 97.0433 15.9782C97.1409 7.21624 90.0961 0.0490011 81.37 1.99158e-06C81.2768 1.99158e-06 81.2281 1.99158e-06 81.1349 1.99158e-06ZM182.384 1.99158e-06C173.613 1.99158e-06 166.427 7.12269 166.427 15.9737C166.427 24.8247 173.52 31.9964 182.335 31.9964C187.419 31.9964 192.179 29.6088 195.165 25.484L191.434 21.7378C189.615 25.0163 186.115 27.0297 182.384 26.9362C176.226 26.9362 171.608 22.2055 171.608 16.0183C171.608 9.83101 176.275 5.05582 182.384 5.05582C186.115 4.96228 189.615 6.9757 191.434 10.3032L195.165 6.55698C192.179 2.34305 187.419 -0.0445427 182.384 1.99158e-06Z"
+        fill={innerWidth <= MAX_MOBILE_WIDTH ? '#5E69FF' : logoHex}
+        class="transition-all duration-1000"
+      />
+    </svg>
+  </a>
 
   <!-- For Desktop -->
   <div class={`transition-color duration-1000 ${innerWidth <= MAX_MOBILE_WIDTH ? 'text-navy' : textColor}`}>
diff --git a/src/components/SideTag.svelte b/src/components/SideTag.svelte
index ced41b70..f458b86f 100644
--- a/src/components/SideTag.svelte
+++ b/src/components/SideTag.svelte
@@ -28,7 +28,7 @@
   });
 </script>
 
-<div class="fixed right-0 top-1/4 z-50 flex transform">
+<div class="fixed right-0 top-1/4 z-50 flex transform print:hidden">
   <button
     class="origin-top-left -translate-y-1/2 translate-x-full rotate-90 cursor-pointer rounded-b-lg bg-teal px-4 py-2 text-white shadow-md shadow-navy transition-shadow duration-300 hover:shadow"
     on:click={togglePopup}
diff --git a/src/routes/(home)/+layout.svelte b/src/routes/(home)/+layout.svelte
new file mode 100644
index 00000000..ba0519e9
--- /dev/null
+++ b/src/routes/(home)/+layout.svelte
@@ -0,0 +1,13 @@
+<script>
+  import Footer from '../../components/Footer.svelte';
+  import GetNotified from '../../components/GetNotified/GetNotified.svelte';
+  import SideTag from '../../components/SideTag.svelte';
+</script>
+
+<div class="h-[100vh] w-[100vw] overflow-x-hidden">
+  <slot />
+  <Footer />
+  <SideTag triggerText="Get notified">
+    <GetNotified />
+  </SideTag>
+</div>
diff --git a/src/routes/+page.svelte b/src/routes/(home)/+page.svelte
similarity index 59%
rename from src/routes/+page.svelte
rename to src/routes/(home)/+page.svelte
index 1909b39a..4316c9c5 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/(home)/+page.svelte
@@ -1,13 +1,14 @@
 <script lang="ts">
   import { page } from '$app/stores';
-  import SectionNavigation from '../components/Sections/SectionNavigation.svelte';
-  import Sections from '../components/Sections/Sections.svelte';
-  import Section1 from '../components/Sections/Section1.svelte';
-  import Section2 from '../components/Sections/Section2.svelte';
-  import Section3 from '../components/Sections/Section3.svelte';
-  import Section4 from '../components/Sections/Section4.svelte';
-  import Section5 from '../components/Sections/Section5.svelte';
-  import Header from '../components/Header/Header.svelte';
+  import JoinSocials from '../../components/JoinSocials.svelte';
+  import SectionNavigation from '../../components/Sections/SectionNavigation.svelte';
+  import Sections from '../../components/Sections/Sections.svelte';
+  import Section1 from '../../components/Sections/Section1.svelte';
+  import Section2 from '../../components/Sections/Section2.svelte';
+  import Section3 from '../../components/Sections/Section3.svelte';
+  import Section4 from '../../components/Sections/Section4.svelte';
+  import Section5 from '../../components/Sections/Section5.svelte';
+  import Header from '../../components/Header/Header.svelte';
 
   $: section = 1;
 
@@ -51,14 +52,19 @@
   <meta name="twitter:image" content={`${baseUrl}/og-twitter.png`} />
 </svelte:head>
 
-<div class="relative lg:max-w-[100vw] xl:max-w-page">
-  <div class="absolute top-0 z-50 w-full"><Header {logoHex} {navColor} bind:section /></div>
-  <Sections bind:section sectionCount={5}>
-    <Section1 />
-    <Section2 />
-    <Section3 />
-    <Section4 />
-    <Section5 />
-  </Sections>
-  <SectionNavigation bind:section {sectionTitles} />
+<div class="min-h-[calc(100vh-100px)]">
+  <div class="relative lg:max-w-[100vw] xl:max-w-page">
+    <div class="absolute top-0 z-50 w-full"><Header {logoHex} {navColor} bind:section /></div>
+    <Sections bind:section sectionCount={5}>
+      <Section1 />
+      <Section2 />
+      <Section3 />
+      <Section4 />
+      <Section5 />
+    </Sections>
+    <SectionNavigation bind:section {sectionTitles} />
+  </div>
+  <div class="freq-container mt-[150px]">
+    <JoinSocials />
+  </div>
 </div>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index b75e41fa..a668bed1 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,21 +1,3 @@
-<script>
-  import Footer from '../components/Footer.svelte';
-  import JoinSocials from '../components/JoinSocials.svelte';
-  import GetNotified from '../components/GetNotified/GetNotified.svelte';
-  import SideTag from '../components/SideTag.svelte';
-</script>
-
-<div class="max-w-page overflow-x-hidden shadow-xl">
-  <div class="h-[100vh] w-[100vw] overflow-x-hidden">
-    <div class="min-h-[calc(100vh-100px)]">
-      <slot />
-      <div class="freq-container mt-[150px]">
-        <JoinSocials />
-      </div>
-    </div>
-    <Footer />
-    <SideTag triggerText="Get notified">
-      <GetNotified />
-    </SideTag>
-  </div>
+<div class="max-w-page overflow-x-hidden shadow-xl print:shadow-none">
+  <slot />
 </div>
diff --git a/src/routes/privacy/+layout.svelte b/src/routes/privacy/+layout.svelte
new file mode 100644
index 00000000..e46f8e2b
--- /dev/null
+++ b/src/routes/privacy/+layout.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+  import Header from '../../components/Header/Header.svelte';
+  import Footer from '../../components/Footer.svelte';
+
+  const logoHex = '#5E69FF';
+  const navColor = 'navy';
+</script>
+
+<div class="relative lg:max-w-[100vw] xl:max-w-page">
+  <Header {logoHex} {navColor} />
+  <div class="mt-4 p-3">
+    <slot />
+  </div>
+  <Footer />
+</div>
diff --git a/src/routes/privacy/+page.svelte b/src/routes/privacy/+page.svelte
new file mode 100644
index 00000000..6c886b96
--- /dev/null
+++ b/src/routes/privacy/+page.svelte
@@ -0,0 +1,420 @@
+<div class="mx-auto flex-grow justify-center px-4 sm:px-6 lg:px-8">
+  <h3 class="title-75">Privacy Policy</h3>
+  <div class="privacy max-lg">
+    <p>
+      <strong>Last Updated:</strong> September 16, 2024
+    </p>
+    <p>
+      This Privacy Notice applies to the processing of personal information by the Frequency Network Foundation (“<strong
+        >Frequency Network Foundation</strong
+      >,” “<strong>we</strong>,” “<strong>us</strong>,” or “<strong>our</strong>”) in connection with our website at
+      https://www.frequency.xyz (the “<strong>Site</strong>”).
+    </p>
+    <p>
+      However, this Privacy Notice <underline><strong>does not</strong></underline> apply to the Frequency Network Foundation’s
+      processing of personal information in connection with operation of the Frequency Community Rewards Program or the website
+      located at https://claimfrequency.xyz.
+    </p>
+    <ol>
+      <li><a href="#notice_regarding_use_of_the_blockchain">NOTICE REGARDING USE OF THE BLOCKCHAIN</a></li>
+      <li><a href="#updates_to_this_privacy_notice">UPDATES TO THIS PRIVACY NOTICE</a></li>
+      <li><a href="#personal_information_we_collect">PERSONAL INFORMATION WE COLLECT</a></li>
+      <li><a href="#how_we_use_personal_information">HOW WE USE PERSONAL INFORMATION</a></li>
+      <li><a href="#how_we_disclose_personal_information">HOW WE DISCLOSE PERSONAL INFORMATION</a></li>
+      <li><a href="#your_privacy_choices_and_rights">YOUR PRIVACY CHOICES AND RIGHTS</a></li>
+      <li><a href="#international_transfers_of_personal">INTERNATIONAL TRANSFERS OF PERSONAL INFORMATI</a>ON</li>
+      <li><a href="#retention_of_personal_information">RETENTION OF PERSONAL INFORMATION</a></li>
+      <li><a href="#supplemental_notice_for_eu_gdpr">SUPPLEMENTAL NOTICE FOR EU GDPR</a></li>
+      <li><a href="#childrens_information">CHILDREN’S INFORMATION</a></li>
+      <li><a href="#third_party_websites_applications">THIRD-PARTY WEBSITES/APPLICATIONS</a></li>
+      <li><a href="#contact_us">CONTACT US</a></li>
+    </ol>
+    <h4 id="notice_regarding_use_of_the_blockchain">1. NOTICE REGARDING USE OF THE BLOCKCHAIN</h4>
+    <p>
+      Aspects of the Site may be hosted on or interact with the blockchain, including Frequency, a layer 1 blockchain
+      integrated into the Polkadot platform (“Frequency Network”). Where you use aspects of the Site that are hosted on
+      or interact with the blockchain, information about your interactions and/or transactions will be provided to the
+      applicable blockchain network and may be accessible to third parties due to the nature of the blockchain protocol.
+    </p>
+    <h4 id="updates_to_this_privacy_notice">2. UPDATES TO THIS PRIVACY NOTICE</h4>
+    <p>
+      We may update this Privacy Notice from time to time in our sole discretion. If we do, we’ll let you know by
+      posting the updated Privacy Notice on our website, and/or we may also send other communications.
+    </p>
+    <h4 id="personal_information_we_collect">3. PERSONAL INFORMATION WE COLLECT</h4>
+    <p>
+      We collect personal information that you provide to us, personal information we obtain automatically when you
+      interact with the Site, and personal information from third-party sources, as described below.
+    </p>
+    <h5>A. Personal Information You Provide to Us Directly</h5>
+    <p>We may collect personal information that you provide to us.</p>
+    <ul>
+      <li>
+        <strong>Participant Information</strong>. If you participate in the Site, we may collect personal information
+        from you, such as details about your Frequency Network message source account, details about your account with a
+        wallet or service that allow you access to the Frequency Network (example: Frequency Access) (“<strong
+          >Frequency Network Access Service</strong
+        >”), details about your account with an authorized Provider (as defined below), documentation you provide that
+        is required as a condition for all rewards, wallet information, details about the rewards you are eligible for
+        or redeem, details about your rewards balance, and other information that we collect or that you provide in
+        connection with your participation in the Site.
+      </li>
+      <li>
+        <strong>Your Communications with Us</strong>. We may collect personal information, such as your name, email
+        address, phone number, and details about whether or not you are developer when you contact us or request that we
+        contact you.
+      </li>
+      <li>
+        <strong>Surveys</strong>. We may contact you to participate in surveys. If you decide to participate, we may
+        collect personal information from you in connection with the survey.
+      </li>
+      <li>
+        <strong>Interactive Features</strong>. We and others who use the Site may collect personal information that you
+        submit or make available through our interactive features (e.g., forums, blogs, and social media pages). Any
+        information you provide using the public sharing functionality of the interactive features will be considered
+        “public.”
+      </li>
+      <li>
+        <strong>Conferences, Trade Shows, and Other Events</strong>. We may collect personal information from
+        individuals when we attend or host conferences, trade shows, and other events.<strong> </strong>
+      </li>
+    </ul>
+    <h5>B. Personal Information Collected Automatically</h5>
+    <p>We may collect personal information automatically when you use or interact with the Site.</p>
+    <ul>
+      <li>
+        <strong>Automatic Collection of Personal Information</strong>. We may collect certain personal information
+        automatically when you interact with the Site, including through the Site’s digital properties or content. This
+        personal information may include, but is not limited to, your Internet protocol (IP) address, user settings,
+        cookie identifiers, other unique identifiers, browser or device information, location information (including
+        approximate location derived from IP address), and Internet service provider. We may also automatically collect
+        information regarding your use of the Site, including its digital properties or content, such as pages that you
+        visit, items that you search for via the Site’s digital properties, information about the links you click, the
+        frequency and duration of your activities, and other information about how you use the Site.
+      </li>
+      <li>
+        <strong>Cookie Notice (and Other Technologies)</strong>. We, as well as third parties, may use cookies, pixel
+        tags, and other technologies (“<strong>Technologies</strong>”) to automatically collect information through your
+        use of the Site’s digital properties and content.
+      </li>
+      <li>
+        <strong>Cookies</strong>. Cookies are small text files placed in device browsers that store preferences and
+        facilitate and enhance your experience.
+      </li>
+      <li>
+        <strong>Pixel Tags/Web Beacons</strong>. A pixel tag (also known as a web beacon) is a piece of code embedded in
+        aspects of the Site that collects information about engagement with the Site’s digital properties or content.
+        The use of a pixel tag allows us to record, for example, that a user has visited, a particular web page or
+        clicked on a particular advertisement. We may also include web beacons in e-mails to understand whether messages
+        have been opened, acted on, or forwarded.
+        <p>
+          <em
+            >See “<a href="#rights">Your Privacy Choices and Rights</a>” below to understand your choices regarding
+            these Technologies.</em
+          >
+        </p>
+      </li>
+    </ul>
+    <h5>C. Personal Information Collected from Third-Party Sources</h5>
+    <p>
+      We may collect personal information from other sources, including third-party services and publicly available
+      sources. Third-party services include the eligible platforms (<em>e.g.,</em> social media networks) that have been
+      approved to participate in the Site and with whom you have a user account (“<strong>Providers</strong>”).
+    </p>
+    <h5>D. hCaptcha</h5>
+    <p>
+      We use the hCaptcha security service ("<strong>hCaptcha</strong>"). hCaptcha is used to check whether data
+      submitted on the Site website (such as submitting a login or contact form) has been entered by a human or by an
+      automated program. For more information about hCaptcha’s privacy policy and terms of use, please visit the
+      following links: <a href="https://www.hcaptcha.com/privacy">https://www.hcaptcha.com/privacy</a> and
+      <a href="https://www.hcaptcha.com/terms">https://www.hcaptcha.com/terms</a>
+    </p>
+    <h4 id="how_we_use_personal_information">4. HOW WE USE PERSONAL INFORMATION</h4>
+    <p>
+      We use personal information for a variety of business purposes, including to operate the Site, for administrative
+      purposes, and to provide you with marketing materials, as described below.
+    </p>
+    <h5>A. Operate the Site</h5>
+    <p>We use personal information to fulfill our contract with you and operate the Site, such as:</p>
+    <ul>
+      <li>Determining your eligibility for, and providing you with, rewards from the Site;</li>
+      <li>Managing your information;</li>
+      <li>Providing access to certain areas, functionalities, and features of the Site;</li>
+      <li>Answering requests for support; and</li>
+      <li>Communicating with you.</li>
+    </ul>
+    <h5>B. Administrative Purposes</h5>
+    <p>We use personal information for various administrative purposes, such as:</p>
+    <ul>
+      <li>
+        Pursuing our legitimate interests such as direct marketing, research and development, network and information
+        security, and fraud prevention;
+      </li>
+      <li>
+        Detecting security incidents, protecting against malicious, deceptive, fraudulent or illegal activity, and
+        prosecuting those responsible for that activity;
+      </li>
+      <li>Carrying out analytics;</li>
+      <li>Measuring interest and engagement in the Site;</li>
+      <li>Improving, upgrading, or enhancing the Site;</li>
+      <li>Developing new products and services;</li>
+      <li>Creating de-identified and/or aggregated information.</li>
+      <li>Ensuring internal quality control and safety;</li>
+      <li>
+        Authenticating and verifying individual identities, including requests to exercise your rights under this
+        Privacy Notice;
+      </li>
+      <li>Debugging to identify and repair errors with the Site;</li>
+      <li>Auditing relating to interactions, transactions, and other compliance activities;</li>
+      <li>Sharing personal information with third parties as needed to provide the Site;</li>
+      <li>Enforcing our agreements and policies; and</li>
+      <li>Carrying out activities that are required to comply with our legal obligations.</li>
+    </ul>
+    <h5>C. Marketing</h5>
+    <p>
+      We may use personal information to provide you with marketing about the Frequency Network Foundation and/or the
+      Site. We may provide you with these materials as permitted by applicable law.
+    </p>
+    <p>
+      If you have any questions about our marketing practices, you may contact us at any time as set forth in “<a
+        href="#contact_us">Contact Us</a
+      >” below.
+    </p>
+    <h5>D. With Your Consent</h5>
+    <p>
+      We may use personal information for other purposes that are clearly disclosed to you at the time you provide
+      personal information or with your consent.
+    </p>
+    <h5>E. Other Purposes</h5>
+    <p>We also use personal information for other purposes as requested by you or as permitted by applicable law.</p>
+    <h4 id="how_we_disclose_personal_information">5. HOW WE DISCLOSE PERSONAL INFORMATION</h4>
+    <p>
+      We disclose personal information to third parties for a variety of business purposes, including to operate the
+      Program, to protect us or others, or in the event of a major business transaction such as a merger, sale, or asset
+      transfer, as described below.
+    </p>
+    <h5>A. Disclosures to Operate the Site</h5>
+    <p>The categories of third parties with whom we may share your personal information are described below.</p>
+    <ul>
+      <li>
+        <strong>Third-Party Services You Share or Interact With</strong>. In connection with the Site, you may share
+        information or interact with third-party services (each a “<strong>Third-Party Service</strong>”).
+        <p>
+          For example, if you join the Frequency Discord, Discord may collect any personal information you provide or
+          otherwise make available via that channel.
+        </p>
+        <p>
+          If you share information or interact with a Third-Party Service, the information collected by the Third-Party
+          Service will also be subject to the Third-Party Service’s privacy policy.
+        </p>
+      </li>
+      <li>
+        <strong>Service Providers</strong>. We may disclose personal information to our third-party service providers
+        and vendors that assist us with the operation of the Site. This includes service providers and vendors that
+        provide us with technical services, operations, analytics, marketing services, IT support, hosting, customer
+        service, and related services.
+      </li>
+      <li>
+        <strong>Business Partners</strong>. We may share your personal information with business partners to provide you
+        with a product or service you have requested. We may also share your personal information with business partners
+        with whom we jointly offer products or services.
+      </li>
+      <li><strong>Affiliates</strong>. We may share your personal information with our corporate affiliates.</li>
+    </ul>
+    <h5>B. Disclosures to Protect Us or Others</h5>
+    <p>
+      We may access, preserve, and disclose any information we store associated with you to external parties if we, in
+      good faith, believe doing so is required or appropriate to: comply with law enforcement or national security
+      requests and legal process, such as a court order or subpoena; protect your, our, or others’ rights, property, or
+      safety; enforce our policies or contracts; collect amounts owed to us; or assist with an investigation or
+      prosecution of suspected or actual illegal activity.
+    </p>
+    <h5>C. Disclosure in the Event of Merger, Sale, or Other Asset Transfers</h5>
+    <p>
+      If we are involved in a merger, acquisition, financing, reorganization, bankruptcy, receivership, purchase or sale
+      of assets, transition of service to another provider, or other similar corporate transaction, your personal
+      information may be disclosed, sold, or transferred as part of such a transaction.
+    </p>
+    <h4 id="your_privacy_choices_and_rights">6. YOUR PRIVACY CHOICES AND RIGHTS</h4>
+    <p>
+      <strong>Your Privacy Choices</strong>. The privacy choices you may have about your personal information are
+      determined by applicable law and are described below.
+    </p>
+    <ul>
+      <li>
+        <strong>Email Communications</strong>. If you receive an unwanted email from us, you can use the unsubscribe
+        link found at the bottom of the email to opt out of receiving future emails. Note that you will continue to
+        receive transaction-related emails. We may also send you certain non-promotional communications regarding us and
+        the Site, and you will not be able to opt out of those communications (e.g., communications regarding the Site
+        or updates to this Privacy Notice).
+      </li>
+      <li>
+        <strong>“Do Not Track</strong>.<strong>”</strong> Do Not Track (“<strong>DNT</strong>”) is a privacy preference
+        that users can set in certain web browsers. Please note that we do not respond to or honor DNT signals or
+        similar mechanisms transmitted by web browsers.
+      </li>
+      <li>
+        <strong>Cookies</strong>. You may stop or restrict the placement of Technologies on your device or remove them
+        by adjusting your preferences as your browser or device permits. However, if you adjust your preferences, the
+        digital properties that we operate in connection with the Site may not work properly.
+        <p>Please note you must separately opt out in each browser and on each device.</p>
+      </li>
+    </ul>
+
+    <p id="rights">
+      <strong>Your Privacy Rights</strong>. In accordance with applicable law, you may have the right to:
+    </p>
+    <ul>
+      <li>
+        <strong>Request Access to and Portability of Personal Information</strong> about you, including: (i) obtaining access
+        to or a copy of your personal information; and (ii) receiving an electronic copy of personal information that you
+        have provided to us, or asking us to send that information to another company in a structured, commonly used, and
+        machine-readable format (the “right of data portability”);
+      </li>
+      <li>
+        <strong>Request Correction</strong> of your personal information where it is inaccurate or incomplete;
+      </li>
+      <li>
+        <strong>Request Deletion</strong> of your personal information;
+      </li>
+      <li>
+        <strong>Request Restriction of or Object to our Processing</strong> of your personal information; and
+      </li>
+      <li>
+        <strong>Withdraw your Consent</strong> to our processing of your personal information. Please note that your withdrawal
+        will only take effect for future processing, and will not affect the lawfulness of processing before the withdrawal.
+      </li>
+    </ul>
+    <p>
+      If you would like to exercise any of these rights, please contact us as set forth in “Contact Us” below. We will
+      process such requests in accordance with applicable laws.
+    </p>
+    <p>
+      If your personal information is subject to the applicable data protection laws of the European Economic Area or
+      Switzerland you have the right to lodge a complaint with the competent supervisory authority if you believe our
+      processing of your personal information violates applicable law.
+    </p>
+    <ul>
+      <li>
+        <a href="https://edpb.europa.eu/about-edpb/board/members_en">EEA Data Protection Authorities (DPAs)</a>
+      </li>
+      <li>
+        <a href="https://www.edoeb.admin.ch/edoeb/en/home/the-fdpic/contact.html"
+          >Swiss Federal Data Protection and Information Commissioner (FDPIC)</a
+        >
+      </li>
+    </ul>
+    <h4 id="international_transfers_of_personal_information">7. INTERNATIONAL TRANSFERS OF PERSONAL INFORMATION</h4>
+    <p>
+      All personal information processed by us may be transferred, processed, and stored anywhere in the world,
+      including, but not limited to, the United States or other countries, which may have data protection laws that are
+      different from the laws where you live. These countries may or may not have adequate data protection laws as
+      defined by the data protection authority in your country.
+    </p>
+    <p>
+      If we transfer personal information which originates in the European Economic Area and/or Switzerland to a country
+      that has not been found to provide an adequate level of protection under applicable data protection laws, one of
+      the safeguards we may use to support such transfer is the <a
+        href="https://ec.europa.eu/info/law/law-topic/data-protection/international-dimension-data-protection/standard-contractual-clauses-scc/standard-contractual-clauses-international-transfers_en"
+        >EU Standard Contractual Clauses</a
+      >.
+    </p>
+    <p>
+      For more information about the safeguards we use for international transfers of your personal information, please
+      contact us as set forth below.
+    </p>
+    <h4 id="retention_of_personal_information">8. RETENTION OF PERSONAL INFORMATION</h4>
+    <p>
+      We store the personal information we collect as described in this Privacy Notice for as long as you participate in
+      the Site, or as necessary to fulfill the purpose(s) for which it was collected, operate the Site, resolve
+      disputes, establish legal defenses, conduct audits, pursue legitimate business purposes, enforce our agreements,
+      and comply with applicable laws.
+    </p>
+    <p>
+      To determine the appropriate retention period for personal information, we may consider applicable legal
+      requirements, the amount, nature, and sensitivity of the personal information, certain risk factors, the purposes
+      for which we process your personal information, and whether we can achieve those purposes through other means.
+    </p>
+    <h4 id="supplemental_notice_for_eu_gdpr">9. SUPPLEMENTAL NOTICE FOR EU GDPR</h4>
+    <p>
+      This Supplemental Notice for EU GDPR only applies to our processing of personal information that is subject to the
+      EU GDPR.
+    </p>
+    <p>
+      The Frequency Network Foundation’s processing of your personal information may be supported by one or more of the
+      following legal bases:
+    </p>
+    <ul>
+      <li>
+        <strong>Performance of a Contract</strong>: The Frequency Network Foundation may need to process your personal
+        information to perform our contract with you.
+      </li>
+      <li>
+        <strong>Legitimate Interest</strong>: The Frequency Network Foundation may process your personal information to
+        further its legitimate interests, but only where our interests are not overridden by your interests or
+        fundamental rights and freedoms.
+      </li>
+      <li>
+        <strong>Consent</strong>: In some cases, the Frequency Network Foundation may also rely on your consent to
+        process your personal information.
+      </li>
+      <li>
+        <strong>Compliance with our Legal Obligations</strong>: The Frequency Network Foundation may process your
+        personal information to comply with our legal obligations.
+      </li>
+    </ul>
+    <h4 id="childrens_information">10. CHILDREN’S INFORMATION</h4>
+    <p>
+      The Site is not directed to children under 13 (or other age as required by local law outside the United States),
+      and we do not knowingly collect personal information from children.
+    </p>
+    <p>
+      If you are a parent or guardian and believe your child has uploaded personal information to our site without your
+      consent, you may contact us as described in “<a href="#contact_us">Contact Us</a>” below. If we become aware that
+      a child has provided us with personal information in violation of applicable law, we will delete any personal
+      information we have collected, unless we have a legal obligation to keep it, and terminate the child’s account, if
+      applicable.
+    </p>
+    <h4 id="third_party_websites_applications">11. THIRD-PARTY WEBSITES/APPLICATIONS</h4>
+    <p>
+      The Site may contain links to other websites/applications and other websites/applications may reference or link to
+      our Site. These third-party services are not controlled by us. We encourage our users to read the privacy policies
+      of each website and application with which they interact. We do not endorse, screen, or approve, and are not
+      responsible for, the privacy practices or content of such other websites or applications. Providing personal
+      information to third-party websites or applications is at your own risk.
+    </p>
+    <h4 id="contact">12. CONTACT US</h4>
+    <p>
+      The Frequency Network Foundation is the controller of the personal information we process under this Privacy
+      Notice.
+    </p>
+    <p>
+      If you have any questions about our privacy practices or this Privacy Notice, or to exercise your rights as
+      detailed in this Privacy Notice, please contact us at: <a href="mailto:privacy@frequency.xyz"
+        >privacy@frequency.xyz</a
+      >.
+    </p>
+  </div>
+</div>
+
+<style>
+  .privacy h4 {
+    margin: 0.5em 0;
+  }
+  .privacy h5 {
+    margin: 0.4em 0;
+  }
+  .privacy p {
+    margin: 0.2em 0;
+  }
+  .privacy ul {
+    list-style-type: disc;
+    padding-left: 5em;
+    margin: 1em 0;
+  }
+  .privacy ol {
+    list-style: decimal;
+    padding-left: 5em;
+    margin: 1em 0;
+  }
+</style>

From ef5c7dde26418784b4182ed5f2eac28f03be5b24 Mon Sep 17 00:00:00 2001
From: Wil Wade <wil.wade@amplica.io>
Date: Fri, 13 Sep 2024 20:08:49 +0000
Subject: [PATCH 10/20] Fix links

---
 src/routes/privacy/+page.svelte | 40 +++++++++++++++++----------------
 1 file changed, 21 insertions(+), 19 deletions(-)

diff --git a/src/routes/privacy/+page.svelte b/src/routes/privacy/+page.svelte
index 6c886b96..e1d6add2 100644
--- a/src/routes/privacy/+page.svelte
+++ b/src/routes/privacy/+page.svelte
@@ -16,18 +16,20 @@
       located at https://claimfrequency.xyz.
     </p>
     <ol>
-      <li><a href="#notice_regarding_use_of_the_blockchain">NOTICE REGARDING USE OF THE BLOCKCHAIN</a></li>
-      <li><a href="#updates_to_this_privacy_notice">UPDATES TO THIS PRIVACY NOTICE</a></li>
-      <li><a href="#personal_information_we_collect">PERSONAL INFORMATION WE COLLECT</a></li>
-      <li><a href="#how_we_use_personal_information">HOW WE USE PERSONAL INFORMATION</a></li>
-      <li><a href="#how_we_disclose_personal_information">HOW WE DISCLOSE PERSONAL INFORMATION</a></li>
-      <li><a href="#your_privacy_choices_and_rights">YOUR PRIVACY CHOICES AND RIGHTS</a></li>
-      <li><a href="#international_transfers_of_personal">INTERNATIONAL TRANSFERS OF PERSONAL INFORMATI</a>ON</li>
-      <li><a href="#retention_of_personal_information">RETENTION OF PERSONAL INFORMATION</a></li>
-      <li><a href="#supplemental_notice_for_eu_gdpr">SUPPLEMENTAL NOTICE FOR EU GDPR</a></li>
-      <li><a href="#childrens_information">CHILDREN’S INFORMATION</a></li>
-      <li><a href="#third_party_websites_applications">THIRD-PARTY WEBSITES/APPLICATIONS</a></li>
-      <li><a href="#contact_us">CONTACT US</a></li>
+      <li><a href="/privacy/#notice_regarding_use_of_the_blockchain">NOTICE REGARDING USE OF THE BLOCKCHAIN</a></li>
+      <li><a href="/privacy/#updates_to_this_privacy_notice">UPDATES TO THIS PRIVACY NOTICE</a></li>
+      <li><a href="/privacy/#personal_information_we_collect">PERSONAL INFORMATION WE COLLECT</a></li>
+      <li><a href="/privacy/#how_we_use_personal_information">HOW WE USE PERSONAL INFORMATION</a></li>
+      <li><a href="/privacy/#how_we_disclose_personal_information">HOW WE DISCLOSE PERSONAL INFORMATION</a></li>
+      <li><a href="/privacy/#your_privacy_choices_and_rights">YOUR PRIVACY CHOICES AND RIGHTS</a></li>
+      <li>
+        <a href="/privacy/#international_transfers_of_personal">INTERNATIONAL TRANSFERS OF PERSONAL INFORMATI</a>ON
+      </li>
+      <li><a href="/privacy/#retention_of_personal_information">RETENTION OF PERSONAL INFORMATION</a></li>
+      <li><a href="/privacy/#supplemental_notice_for_eu_gdpr">SUPPLEMENTAL NOTICE FOR EU GDPR</a></li>
+      <li><a href="/privacy/#childrens_information">CHILDREN’S INFORMATION</a></li>
+      <li><a href="/privacy/#third_party_websites_applications">THIRD-PARTY WEBSITES/APPLICATIONS</a></li>
+      <li><a href="/privacy/#contact_us">CONTACT US</a></li>
     </ol>
     <h4 id="notice_regarding_use_of_the_blockchain">1. NOTICE REGARDING USE OF THE BLOCKCHAIN</h4>
     <p>
@@ -109,8 +111,8 @@
         have been opened, acted on, or forwarded.
         <p>
           <em
-            >See “<a href="#rights">Your Privacy Choices and Rights</a>” below to understand your choices regarding
-            these Technologies.</em
+            >See “<a href="/privacy/#rights">Your Privacy Choices and Rights</a>” below to understand your choices
+            regarding these Technologies.</em
           >
         </p>
       </li>
@@ -177,7 +179,7 @@
     </p>
     <p>
       If you have any questions about our marketing practices, you may contact us at any time as set forth in “<a
-        href="#contact_us">Contact Us</a
+        href="/privacy/#contact_us">Contact Us</a
       >” below.
     </p>
     <h5>D. With Your Consent</h5>
@@ -370,10 +372,10 @@
     </p>
     <p>
       If you are a parent or guardian and believe your child has uploaded personal information to our site without your
-      consent, you may contact us as described in “<a href="#contact_us">Contact Us</a>” below. If we become aware that
-      a child has provided us with personal information in violation of applicable law, we will delete any personal
-      information we have collected, unless we have a legal obligation to keep it, and terminate the child’s account, if
-      applicable.
+      consent, you may contact us as described in “<a href="/privacy/#contact_us">Contact Us</a>” below. If we become
+      aware that a child has provided us with personal information in violation of applicable law, we will delete any
+      personal information we have collected, unless we have a legal obligation to keep it, and terminate the child’s
+      account, if applicable.
     </p>
     <h4 id="third_party_websites_applications">11. THIRD-PARTY WEBSITES/APPLICATIONS</h4>
     <p>

From 3fb46550997d411bb89c46e531cda1bdb30e4b52 Mon Sep 17 00:00:00 2001
From: Wil Wade <wil.wade@amplica.io>
Date: Fri, 13 Sep 2024 20:14:21 +0000
Subject: [PATCH 11/20] About goes to the correct place on other pages

---
 src/components/Header/NavItems.svelte | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/Header/NavItems.svelte b/src/components/Header/NavItems.svelte
index 551e5d11..96e96d87 100644
--- a/src/components/Header/NavItems.svelte
+++ b/src/components/Header/NavItems.svelte
@@ -1,10 +1,15 @@
 <script lang="ts">
+  import { page } from '$app/stores';
   export let textColor: string;
   export let section: number;
   export let isDesktop: boolean = true;
+
+  let isOnHomePage = $page.url.pathname === '/';
 </script>
 
-{#if isDesktop}
+{#if !isOnHomePage}
+  <a class={`underline-on-hover after:bg-${textColor}`} href="/">About.</a>
+{:else if isDesktop}
   <a class={`underline-on-hover after:bg-${textColor}`} href="/" on:click|preventDefault={() => (section = 1)}>About.</a
   >
 {/if}

From da90ae8092dfca5c78afe82cc2197de0f183417e Mon Sep 17 00:00:00 2001
From: Wil Wade <wil.wade@amplica.io>
Date: Fri, 13 Sep 2024 20:30:32 +0000
Subject: [PATCH 12/20] Swap to First/Last name

---
 src/components/GetNotified/GetNotified.svelte | 24 ++++++++++---------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/components/GetNotified/GetNotified.svelte b/src/components/GetNotified/GetNotified.svelte
index 32792486..7345eae2 100644
--- a/src/components/GetNotified/GetNotified.svelte
+++ b/src/components/GetNotified/GetNotified.svelte
@@ -4,16 +4,16 @@
   import Wave from './Wave.svelte';
 
   const fieldMapping = {
-    surname: 'entry.447550433',
-    familyName: 'entry.239030615',
+    firstName: 'entry.447550433',
+    lastName: 'entry.239030615',
     email: 'entry.626493750',
     developerInterest: 'entry.334295884',
   };
 
   const postUrl = 'http://localhost:3000';
 
-  let surname = '';
-  let familyName = '';
+  let firstName = '';
+  let lastName = '';
   let email = '';
   let isDeveloper = false;
 
@@ -36,8 +36,8 @@
     }
 
     const formData = new URLSearchParams();
-    formData.append(fieldMapping.surname, surname);
-    formData.append(fieldMapping.familyName, familyName);
+    formData.append(fieldMapping.firstName, firstName);
+    formData.append(fieldMapping.lastName, lastName);
     formData.append(fieldMapping.email, email);
     if (isDeveloper) formData.append(fieldMapping.developerInterest, 'Developer');
 
@@ -83,14 +83,16 @@
     {#if !formSuccess}
       <form on:submit|preventDefault={submit} novalidate>
         <div class="mb-4">
-          <label class="mb-2 block text-xs font-semibold" for="surname">Surname <span class="text-red">*</span></label>
-          <input required type="text" id="surname" bind:value={surname} class={inputClasses} placeholder="John" />
+          <label class="mb-2 block text-xs font-semibold" for="firstName"
+            >First Name <span class="text-red">*</span></label
+          >
+          <input required type="text" id="firstName" bind:value={firstName} class={inputClasses} placeholder="John" />
         </div>
         <div class="mb-4">
-          <label class="mb-2 block text-xs font-semibold" for="familyName"
-            >Family Name <span class="text-red">*</span></label
+          <label class="mb-2 block text-xs font-semibold" for="lastName"
+            >Last Name <span class="text-red">*</span></label
           >
-          <input required type="text" id="familyName" bind:value={familyName} class={inputClasses} placeholder="Doe" />
+          <input required type="text" id="lastName" bind:value={lastName} class={inputClasses} placeholder="Doe" />
         </div>
         <div class="mb-4">
           <label class="mb-2 block text-xs font-semibold" for="email">Email <span class="text-red">*</span></label>

From cf8d04b10d5226b786d4cd9f067cc69f032516ad Mon Sep 17 00:00:00 2001
From: Wil Wade <wil.wade@amplica.io>
Date: Fri, 13 Sep 2024 20:30:37 +0000
Subject: [PATCH 13/20] Clicks outside the modal will close it

---
 src/components/SideTag.svelte | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/SideTag.svelte b/src/components/SideTag.svelte
index f458b86f..325bbdce 100644
--- a/src/components/SideTag.svelte
+++ b/src/components/SideTag.svelte
@@ -39,10 +39,12 @@
 
 {#if isPopupOpen}
   <div
+    role="none"
+    on:click|preventDefault={closePopup}
     class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50"
     transition:fade={{ duration: 200 }}
   >
-    <div class="relative max-h-screen max-w-[600px] overflow-y-auto shadow-xl">
+    <div role="none" on:click|stopPropagation class="relative max-h-screen max-w-[600px] overflow-y-auto shadow-xl">
       <slot />
       <div class="absolute right-2 top-0 z-50 p-3">
         <OpenCloseIcon onClick={closePopup} isOpen={true} />

From 79d49b34f1f18026a4c6afcf02b4f52ff6b3ffc0 Mon Sep 17 00:00:00 2001
From: Wil Wade <wil.wade@amplica.io>
Date: Fri, 13 Sep 2024 20:40:09 +0000
Subject: [PATCH 14/20] Fix klaro for other pages

---
 src/app.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app.html b/src/app.html
index 8f37ae9c..c3b8f20c 100644
--- a/src/app.html
+++ b/src/app.html
@@ -35,8 +35,8 @@
     %sveltekit.head%
 
     <!-- Klaro - make sure the config gets loaded before Klaro -->
-    <script defer type="text/javascript" src="klaro-config.js"></script>
-    <script defer type="text/javascript" src="klaro.js"></script>
+    <script defer type="text/javascript" src="/klaro-config.js"></script>
+    <script defer type="text/javascript" src="/klaro.js"></script>
     <!-- Matomo -->
     <script>
       var _paq = (window._paq = window._paq || []);

From 7e75b3e1b90a8153a88da1fa5f752ebd6858f307 Mon Sep 17 00:00:00 2001
From: Wil Wade <wil.wade@amplica.io>
Date: Fri, 13 Sep 2024 20:44:09 +0000
Subject: [PATCH 15/20] Padding for mobile nav bars

---
 src/components/SideTag.svelte | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/SideTag.svelte b/src/components/SideTag.svelte
index 325bbdce..12f70cb3 100644
--- a/src/components/SideTag.svelte
+++ b/src/components/SideTag.svelte
@@ -41,14 +41,21 @@
   <div
     role="none"
     on:click|preventDefault={closePopup}
-    class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50"
+    class="mobile-bar-padding fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50"
     transition:fade={{ duration: 200 }}
   >
     <div role="none" on:click|stopPropagation class="relative max-h-screen max-w-[600px] overflow-y-auto shadow-xl">
       <slot />
-      <div class="absolute right-2 top-0 z-50 p-3">
+      <div class="absolute right-2 top-0 z-50 px-3 pb-2 pt-4">
         <OpenCloseIcon onClick={closePopup} isOpen={true} />
       </div>
     </div>
   </div>
 {/if}
+
+<style>
+  .mobile-bar-padding {
+    padding-top: env(safe-area-inset-top, 0);
+    padding-bottom: env(safe-area-inset-bottom, 0);
+  }
+</style>

From 0ad0f60ea7c9f245883e7c4e558fab601a3efaa8 Mon Sep 17 00:00:00 2001
From: Wil Wade <wil.wade@amplica.io>
Date: Mon, 16 Sep 2024 14:37:41 +0000
Subject: [PATCH 16/20] Fix rounding issues

---
 src/components/SideTag.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/SideTag.svelte b/src/components/SideTag.svelte
index 12f70cb3..5b1107d2 100644
--- a/src/components/SideTag.svelte
+++ b/src/components/SideTag.svelte
@@ -44,7 +44,7 @@
     class="mobile-bar-padding fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50"
     transition:fade={{ duration: 200 }}
   >
-    <div role="none" on:click|stopPropagation class="relative max-h-screen max-w-[600px] overflow-y-auto shadow-xl">
+    <div role="none" on:click|stopPropagation class="relative max-h-screen max-w-[600px] overflow-y-auto">
       <slot />
       <div class="absolute right-2 top-0 z-50 px-3 pb-2 pt-4">
         <OpenCloseIcon onClick={closePopup} isOpen={true} />

From 6fd3b238fcf7bf7b05543fccab90d76b4b896b67 Mon Sep 17 00:00:00 2001
From: Wil Wade <wil.wade@amplica.io>
Date: Mon, 16 Sep 2024 14:44:54 +0000
Subject: [PATCH 17/20] Handle mobile browser bars better

---
 src/app.html                                  | 2 +-
 src/components/GetNotified/GetNotified.svelte | 2 +-
 src/components/SideTag.svelte                 | 8 +++++---
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/app.html b/src/app.html
index c3b8f20c..7901cc35 100644
--- a/src/app.html
+++ b/src/app.html
@@ -8,7 +8,7 @@
     <link rel="icon" href="%sveltekit.assets%/favicon.svg" type="image/svg+xml" />
     <link rel="apple-touch-icon" href="%sveltekit.assets%/apple-touch-icon.png" />
     <link rel="manifest" href="%sveltekit.assets%/manifest.webmanifest" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
 
     <meta property="og:title" content="Frequency" />
     <meta property="og:url" content="" />
diff --git a/src/components/GetNotified/GetNotified.svelte b/src/components/GetNotified/GetNotified.svelte
index 7345eae2..f858abe1 100644
--- a/src/components/GetNotified/GetNotified.svelte
+++ b/src/components/GetNotified/GetNotified.svelte
@@ -62,7 +62,7 @@
   $: inputClasses = hasSubmittedFormAtLeastOnce ? invalidInputClasses : validInputClasses;
 </script>
 
-<div class="rounded-3xl bg-cream">
+<div class="flex flex-col items-start rounded-3xl bg-cream">
   <div class="relative overflow-hidden rounded-t-3xl bg-navy">
     <div class="top-lines rounded-t-3xl">
       <div class="top-lines-fade rounded-t-3xl">
diff --git a/src/components/SideTag.svelte b/src/components/SideTag.svelte
index 5b1107d2..6774aad1 100644
--- a/src/components/SideTag.svelte
+++ b/src/components/SideTag.svelte
@@ -44,7 +44,7 @@
     class="mobile-bar-padding fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50"
     transition:fade={{ duration: 200 }}
   >
-    <div role="none" on:click|stopPropagation class="relative max-h-screen max-w-[600px] overflow-y-auto">
+    <div role="none" on:click|stopPropagation class="relative max-h-full max-w-[600px] overflow-y-auto">
       <slot />
       <div class="absolute right-2 top-0 z-50 px-3 pb-2 pt-4">
         <OpenCloseIcon onClick={closePopup} isOpen={true} />
@@ -55,7 +55,9 @@
 
 <style>
   .mobile-bar-padding {
-    padding-top: env(safe-area-inset-top, 0);
-    padding-bottom: env(safe-area-inset-bottom, 0);
+    padding-top: max(env(safe-area-inset-top, 10px), 10px);
+    padding-bottom: max(env(safe-area-inset-bottom, 10px), 10px);
+    padding-left: max(env(safe-area-inset-left, 10px), 10px);
+    padding-right: max(env(safe-area-inset-right, 10px), 10px);
   }
 </style>

From 082d2aa2aff46b6212ad6acebf9a8dce5ae37f0a Mon Sep 17 00:00:00 2001
From: Wil Wade <wil.wade@amplica.io>
Date: Mon, 16 Sep 2024 14:48:31 +0000
Subject: [PATCH 18/20] The bottom should NOT have the padding so it looks like
 it continues

---
 src/components/SideTag.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/SideTag.svelte b/src/components/SideTag.svelte
index 6774aad1..1c8310f4 100644
--- a/src/components/SideTag.svelte
+++ b/src/components/SideTag.svelte
@@ -56,7 +56,7 @@
 <style>
   .mobile-bar-padding {
     padding-top: max(env(safe-area-inset-top, 10px), 10px);
-    padding-bottom: max(env(safe-area-inset-bottom, 10px), 10px);
+    padding-bottom: max(env(safe-area-inset-bottom, 0), 0);
     padding-left: max(env(safe-area-inset-left, 10px), 10px);
     padding-right: max(env(safe-area-inset-right, 10px), 10px);
   }

From 11118204a0ed28c0e769ff7567a874e6ec63ccb9 Mon Sep 17 00:00:00 2001
From: Wil Wade <wil.wade@amplica.io>
Date: Mon, 16 Sep 2024 16:54:43 +0000
Subject: [PATCH 19/20] Update the form post url

---
 src/components/GetNotified/GetNotified.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/GetNotified/GetNotified.svelte b/src/components/GetNotified/GetNotified.svelte
index f858abe1..c78e7665 100644
--- a/src/components/GetNotified/GetNotified.svelte
+++ b/src/components/GetNotified/GetNotified.svelte
@@ -10,7 +10,7 @@
     developerInterest: 'entry.334295884',
   };
 
-  const postUrl = 'http://localhost:3000';
+  const postUrl = 'https://form-proxy.frequency.xyz';
 
   let firstName = '';
   let lastName = '';

From 5f5b190dad2da0590585cb149d8b8ae728b7c35b Mon Sep 17 00:00:00 2001
From: Wil Wade <wil.wade@amplica.io>
Date: Mon, 16 Sep 2024 17:30:48 +0000
Subject: [PATCH 20/20] Swap to the Lambda

---
 src/components/GetNotified/GetNotified.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/GetNotified/GetNotified.svelte b/src/components/GetNotified/GetNotified.svelte
index c78e7665..b2045278 100644
--- a/src/components/GetNotified/GetNotified.svelte
+++ b/src/components/GetNotified/GetNotified.svelte
@@ -10,7 +10,7 @@
     developerInterest: 'entry.334295884',
   };
 
-  const postUrl = 'https://form-proxy.frequency.xyz';
+  const postUrl = 'https://hucfge2uhkm7xlj2nozyhbwt2a0gqotq.lambda-url.sa-east-1.on.aws';
 
   let firstName = '';
   let lastName = '';