From cef16afc70e54062fc326b69c3f4171153bc1c99 Mon Sep 17 00:00:00 2001
From: Samuel Tosin <Samuellyworld@users.noreply.github.com>
Date: Mon, 10 Aug 2026 17:44:54 +0100
Subject: [PATCH 1/2] Add Brevo newsletter-gated app downloads

---
 web/src/App.tsx                               |   2 +
 .../DownloadGate/DownloadGate.styles.ts       | 187 ++++++++++++++++++
 .../components/DownloadGate/DownloadGate.tsx  | 124 ++++++++++++
 web/src/components/FinalCta/FinalCta.tsx      |  10 +-
 web/src/components/Footer/Footer.tsx          |   5 +-
 web/src/components/Intro/Intro.tsx            |   2 +-
 web/src/components/Nav/Nav.tsx                |   5 +-
 web/src/components/Privacy/Privacy.tsx        |   4 +-
 web/src/lib/content.ts                        |  12 +-
 web/src/lib/downloadGate.ts                   |   9 +
 10 files changed, 347 insertions(+), 13 deletions(-)
 create mode 100644 web/src/components/DownloadGate/DownloadGate.styles.ts
 create mode 100644 web/src/components/DownloadGate/DownloadGate.tsx
 create mode 100644 web/src/lib/downloadGate.ts

diff --git a/web/src/App.tsx b/web/src/App.tsx
index 2471d0a..6cea84e 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -1,5 +1,6 @@
 import { Extension } from "@/components/Extension/Extension";
 import { Cursor } from "@/components/Cursor/Cursor";
+import { DownloadGate } from "@/components/DownloadGate/DownloadGate";
 import { Faq } from "@/components/Faq/Faq";
 import { Features } from "@/components/Features/Features";
 import { FinalCta } from "@/components/FinalCta/FinalCta";
@@ -44,6 +45,7 @@ export function App() {
 
       <Footer />
       <Cursor />
+      <DownloadGate />
       <Grain aria-hidden="true" />
     </>
   );
diff --git a/web/src/components/DownloadGate/DownloadGate.styles.ts b/web/src/components/DownloadGate/DownloadGate.styles.ts
new file mode 100644
index 0000000..56ff7cf
--- /dev/null
+++ b/web/src/components/DownloadGate/DownloadGate.styles.ts
@@ -0,0 +1,187 @@
+import { styled } from "styled-components";
+
+export const Backdrop = styled.div`
+  position: fixed;
+  inset: 0;
+  z-index: 300;
+  display: grid;
+  place-items: center;
+  padding: 1.2rem;
+  background: rgba(4, 4, 3, 0.78);
+  backdrop-filter: blur(18px);
+  animation: gate-in 260ms ease both;
+
+  @keyframes gate-in {
+    from {
+      opacity: 0;
+    }
+  }
+`;
+
+export const DialogCard = styled.div`
+  position: relative;
+  overflow: hidden;
+  width: min(100%, 34rem);
+  padding: clamp(1.5rem, 1.1rem + 2vw, 2.5rem);
+  border: 1px solid var(--outline-strong);
+  border-radius: clamp(22px, 4vw, 30px);
+  background:
+    radial-gradient(80% 90% at 50% 110%, rgba(232, 133, 97, 0.2), transparent 68%),
+    var(--canvas-raised);
+  box-shadow: 0 34px 100px rgba(0, 0, 0, 0.52);
+  animation: card-in 520ms var(--ease-out) both;
+
+  @keyframes card-in {
+    from {
+      opacity: 0;
+      transform: translateY(22px) scale(0.97);
+    }
+  }
+`;
+
+export const CloseButton = styled.button`
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  display: grid;
+  width: 2.2rem;
+  height: 2.2rem;
+  place-items: center;
+  border: 1px solid var(--outline);
+  border-radius: 50%;
+  background: var(--surface);
+  color: var(--ink-secondary);
+  font-size: 1.25rem;
+  line-height: 1;
+  transition:
+    border-color var(--dur-fast) ease,
+    color var(--dur-fast) ease,
+    transform var(--dur-fast) ease;
+
+  &:hover {
+    border-color: var(--outline-strong);
+    color: var(--ink-primary);
+    transform: rotate(5deg);
+  }
+`;
+
+export const Eyebrow = styled.p`
+  margin-bottom: 1rem;
+  color: var(--accent);
+  font-family: var(--font-mono);
+  font-size: 0.68rem;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+`;
+
+export const GateTitle = styled.h2`
+  max-width: 11ch;
+  padding-right: 2.5rem;
+  font-size: clamp(2rem, 1.45rem + 2.6vw, 3.35rem);
+  letter-spacing: -0.05em;
+`;
+
+export const GateBody = styled.p`
+  max-width: 42ch;
+  margin-top: 1rem;
+  color: var(--ink-secondary);
+  line-height: 1.55;
+`;
+
+export const Form = styled.form`
+  display: grid;
+  gap: 0.9rem;
+  margin-top: 1.65rem;
+`;
+
+export const Label = styled.label`
+  color: var(--ink-secondary);
+  font-size: 0.82rem;
+`;
+
+export const EmailInput = styled.input`
+  width: 100%;
+  padding: 0.92rem 1rem;
+  border: 1px solid var(--outline-strong);
+  border-radius: 14px;
+  outline: none;
+  background: rgba(243, 237, 227, 0.06);
+  color: var(--ink-primary);
+  font: inherit;
+  transition:
+    border-color var(--dur-fast) ease,
+    box-shadow var(--dur-fast) ease;
+
+  &::placeholder {
+    color: var(--ink-faint);
+  }
+
+  &:focus {
+    border-color: rgba(232, 133, 97, 0.72);
+    box-shadow: 0 0 0 4px rgba(232, 133, 97, 0.11);
+  }
+`;
+
+export const ConsentLabel = styled.label`
+  display: grid;
+  grid-template-columns: auto 1fr;
+  align-items: start;
+  gap: 0.65rem;
+  color: var(--ink-tertiary);
+  font-size: 0.78rem;
+  line-height: 1.5;
+
+  input {
+    width: 1rem;
+    height: 1rem;
+    margin-top: 0.15rem;
+    accent-color: var(--accent);
+  }
+
+  a {
+    border-bottom: 1px solid var(--outline-strong);
+    color: var(--ink-secondary);
+  }
+`;
+
+export const SubmitButton = styled.button`
+  display: inline-flex;
+  min-height: 3.15rem;
+  align-items: center;
+  justify-content: center;
+  padding: 0.82rem 1.25rem;
+  border-radius: var(--r-pill);
+  background: var(--cream);
+  color: #14100c;
+  font-weight: 600;
+  transition:
+    background-color var(--dur) var(--ease-out),
+    box-shadow var(--dur) var(--ease-out),
+    transform var(--dur) var(--ease-out);
+
+  &:hover:not(:disabled) {
+    background: var(--accent);
+    box-shadow: 0 16px 34px -18px rgba(232, 133, 97, 0.7);
+    transform: translateY(-2px);
+  }
+
+  &:disabled {
+    cursor: wait;
+    opacity: 0.62;
+  }
+`;
+
+export const FormNote = styled.p`
+  color: var(--ink-faint);
+  font-size: 0.74rem;
+  line-height: 1.5;
+  text-align: center;
+`;
+
+export const Honeypot = styled.div`
+  position: absolute;
+  left: -10000px;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+`;
diff --git a/web/src/components/DownloadGate/DownloadGate.tsx b/web/src/components/DownloadGate/DownloadGate.tsx
new file mode 100644
index 0000000..666b4e4
--- /dev/null
+++ b/web/src/components/DownloadGate/DownloadGate.tsx
@@ -0,0 +1,124 @@
+import { useEffect, useId, useRef, useState } from "react";
+
+import { BREVO_SIGNUP_URL, DOWNLOAD_GATE_EVENT } from "@/lib/downloadGate";
+import {
+  Backdrop,
+  CloseButton,
+  ConsentLabel,
+  DialogCard,
+  EmailInput,
+  Eyebrow,
+  Form,
+  FormNote,
+  GateBody,
+  GateTitle,
+  Honeypot,
+  Label,
+  SubmitButton,
+} from "./DownloadGate.styles";
+
+export function DownloadGate() {
+  const [open, setOpen] = useState(false);
+  const [consent, setConsent] = useState(false);
+  const emailId = useId();
+  const consentId = useId();
+  const emailRef = useRef<HTMLInputElement>(null);
+
+  const close = () => {
+    setOpen(false);
+  };
+
+  useEffect(() => {
+    const show = () => {
+      setOpen(true);
+      window.setTimeout(() => emailRef.current?.focus(), 40);
+    };
+
+    window.addEventListener(DOWNLOAD_GATE_EVENT, show);
+    return () => window.removeEventListener(DOWNLOAD_GATE_EVENT, show);
+  }, []);
+
+  useEffect(() => {
+    if (!open) return;
+
+    const previousOverflow = document.body.style.overflow;
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") close();
+    };
+
+    document.body.style.overflow = "hidden";
+    window.addEventListener("keydown", onKeyDown);
+
+    return () => {
+      document.body.style.overflow = previousOverflow;
+      window.removeEventListener("keydown", onKeyDown);
+    };
+  }, [open]);
+
+  if (!open) return null;
+
+  return (
+    <Backdrop onMouseDown={(event) => event.target === event.currentTarget && close()}>
+      <DialogCard role="dialog" aria-modal="true" aria-labelledby="download-gate-title">
+        <CloseButton type="button" aria-label="Close download form" onClick={close}>
+          ×
+        </CloseButton>
+
+        <Eyebrow>Free download · Product updates</Eyebrow>
+        <GateTitle id="download-gate-title">Get AngelNotch.</GateTitle>
+        <GateBody>
+          Enter your email to download the macOS app and receive occasional release notes and
+          product updates.
+        </GateBody>
+
+          <Form action={BREVO_SIGNUP_URL} method="POST">
+            <Label htmlFor={emailId}>Email address</Label>
+            <EmailInput
+              ref={emailRef}
+              id={emailId}
+              type="email"
+              name="EMAIL"
+              placeholder="you@example.com"
+              autoComplete="email"
+              required
+            />
+
+            <Honeypot aria-hidden="true">
+              <label htmlFor="download-email-check">Leave this field empty</label>
+              <input
+                id="download-email-check"
+                name="email_address_check"
+                tabIndex={-1}
+                autoComplete="off"
+              />
+            </Honeypot>
+
+            <input type="hidden" name="locale" value="en" />
+            <input type="hidden" name="html_type" value="simple" />
+
+            <ConsentLabel htmlFor={consentId}>
+              <input
+                id={consentId}
+                type="checkbox"
+                checked={consent}
+                onChange={(event) => setConsent(event.target.checked)}
+                required
+              />
+              <span>
+                I agree to receive AngelNotch download and product emails. See the{" "}
+                <a href="#privacy" onClick={close}>
+                  privacy promise
+                </a>
+                .
+              </span>
+            </ConsentLabel>
+
+            <SubmitButton type="submit" disabled={!consent}>
+              Subscribe & download
+            </SubmitButton>
+            <FormNote>Brevo securely subscribes you, then starts the free download.</FormNote>
+          </Form>
+      </DialogCard>
+    </Backdrop>
+  );
+}
diff --git a/web/src/components/FinalCta/FinalCta.tsx b/web/src/components/FinalCta/FinalCta.tsx
index 57416bd..ee120cf 100644
--- a/web/src/components/FinalCta/FinalCta.tsx
+++ b/web/src/components/FinalCta/FinalCta.tsx
@@ -1,8 +1,7 @@
 import { Button } from "@/components/ui";
+import { openDownloadGate } from "@/lib/downloadGate";
 import {
-  DOWNLOAD_NAME,
   DOWNLOAD_SIZE,
-  DOWNLOAD_URL,
   MIN_MACOS,
   RELEASES_URL,
   REPO_URL,
@@ -32,7 +31,12 @@ export function FinalCta() {
           </CtaBody>
 
           <CtaButtons>
-            <Button href={DOWNLOAD_URL} download={DOWNLOAD_NAME} icon="download" meta={DOWNLOAD_SIZE}>
+            <Button
+              href="#download"
+              onClick={openDownloadGate}
+              icon="download"
+              meta={DOWNLOAD_SIZE}
+            >
               Download AngelNotch
             </Button>
             <Button
diff --git a/web/src/components/Footer/Footer.tsx b/web/src/components/Footer/Footer.tsx
index 8f7631f..f26f682 100644
--- a/web/src/components/Footer/Footer.tsx
+++ b/web/src/components/Footer/Footer.tsx
@@ -1,4 +1,5 @@
 import { Wordmark } from "@/components/icons";
+import { openDownloadGate } from "@/lib/downloadGate";
 import {
   AUTHOR_NAME,
   AUTHOR_URL,
@@ -79,8 +80,8 @@ export function Footer() {
                 {column.links.map((link) => (
                   <FooterLink
                     key={link.label}
-                    href={link.href}
-                    {...("download" in link && link.download ? { download: link.download } : {})}
+                    href={"download" in link ? "#download" : link.href}
+                    {...("download" in link ? { onClick: openDownloadGate } : {})}
                     {...("external" in link && link.external
                       ? { target: "_blank", rel: "noreferrer" }
                       : {})}
diff --git a/web/src/components/Intro/Intro.tsx b/web/src/components/Intro/Intro.tsx
index 137c1ab..f778fe1 100644
--- a/web/src/components/Intro/Intro.tsx
+++ b/web/src/components/Intro/Intro.tsx
@@ -26,7 +26,7 @@ const PILLARS = [
   {
     index: "iii",
     title: "Private by design",
-    body: "Everything stays on the Mac. No account, no analytics, no advertising, no tracking SDKs.",
+    body: "App data stays on the Mac. No in-app account, analytics, advertising or tracking SDKs.",
   },
 ];
 
diff --git a/web/src/components/Nav/Nav.tsx b/web/src/components/Nav/Nav.tsx
index 17337a4..70f6973 100644
--- a/web/src/components/Nav/Nav.tsx
+++ b/web/src/components/Nav/Nav.tsx
@@ -2,7 +2,8 @@ import { useEffect, useRef, useState } from "react";
 
 import { Wordmark } from "@/components/icons";
 import { Button } from "@/components/ui";
-import { DOWNLOAD_NAME, DOWNLOAD_URL, REPO_URL } from "@/lib/site";
+import { openDownloadGate } from "@/lib/downloadGate";
+import { REPO_URL } from "@/lib/site";
 import {
   Actions,
   Brand,
@@ -71,7 +72,7 @@ export function Nav() {
             <StarLabel>Star</StarLabel>
           </StarLink>
 
-          <Button href={DOWNLOAD_URL} download={DOWNLOAD_NAME} size="small" icon="download">
+          <Button href="#download" onClick={openDownloadGate} size="small" icon="download">
             Download
           </Button>
         </Actions>
diff --git a/web/src/components/Privacy/Privacy.tsx b/web/src/components/Privacy/Privacy.tsx
index 68c4f49..5252bc6 100644
--- a/web/src/components/Privacy/Privacy.tsx
+++ b/web/src/components/Privacy/Privacy.tsx
@@ -30,7 +30,9 @@ export function Privacy() {
 
             <PrivacyLede>
               AngelNotch is local-first. Clipboard history, saved file references, focus state and
-              integration data never leave the machine they were created on.
+              integration data never leave the machine they were created on. If you choose to
+              download from this website, your email is stored in Brevo for release notes and
+              product updates only.
             </PrivacyLede>
 
             <Claims>
diff --git a/web/src/lib/content.ts b/web/src/lib/content.ts
index 464f888..884c11d 100644
--- a/web/src/lib/content.ts
+++ b/web/src/lib/content.ts
@@ -195,10 +195,10 @@ export const SHORTCUTS: Shortcut[] = [
 ];
 
 export const PRIVACY_CLAIMS = [
-  "No account",
-  "No analytics",
+  "No in-app account",
+  "No in-app analytics",
   "No advertising",
-  "No tracking SDKs",
+  "No in-app tracking SDKs",
   "No cloud clipboard",
 ] as const;
 
@@ -256,7 +256,11 @@ export const FAQS: Faq[] = [
   },
   {
     q: "Does AngelNotch require an account?",
-    a: "No. There is no sign-up, no login and no account of any kind.",
+    a: "No. The Mac app has no sign-up or login. The website asks for an email before download only so AngelNotch can send release notes and product updates; it does not create an app account.",
+  },
+  {
+    q: "What happens to my email when I download?",
+    a: "It is added to the AngelNotch product update list in Brevo. It is used for release notes and occasional product emails, and every message includes an unsubscribe option.",
   },
   {
     q: "Can I run it from source?",
diff --git a/web/src/lib/downloadGate.ts b/web/src/lib/downloadGate.ts
new file mode 100644
index 0000000..cf987fa
--- /dev/null
+++ b/web/src/lib/downloadGate.ts
@@ -0,0 +1,9 @@
+export const DOWNLOAD_GATE_EVENT = "angelnotch:open-download";
+
+export const BREVO_SIGNUP_URL =
+  "https://7acd61e3.sibforms.com/serve/MUIFAJ6Ws4klcQp64nSwaGKH9LFqjmrxVEFZLG6v9fZ0LyWcntJrFWWN0CF2nRqj8VP0KZ6guNQVSxMtBOoDmti4nEDks5Xe_GvfqD2__saig8nzXpYhE78dwnQ9U9K7FPVzhou2OObUjneiEgvhdHCHxr2Xg6Uay2JUwLD5MmHpK9kFEu1b6CXi5a7UcwPQJ1BQDBVCT4a9nioFtg==";
+
+export function openDownloadGate(event?: { preventDefault: () => void }) {
+  event?.preventDefault();
+  window.dispatchEvent(new CustomEvent(DOWNLOAD_GATE_EVENT));
+}

From 0f93db234c93820d51edb645e6fcd99797d90c85 Mon Sep 17 00:00:00 2001
From: Samuel Tosin <Samuellyworld@users.noreply.github.com>
Date: Mon, 10 Aug 2026 18:21:02 +0100
Subject: [PATCH 2/2] remove pulse and dashes

---
 web/src/components/QuickNav/QuickNav.styles.ts | 16 ----------------
 web/src/hooks/useFrameSequence.ts              |  4 ++--
 web/src/lib/content.ts                         |  4 ++--
 3 files changed, 4 insertions(+), 20 deletions(-)

diff --git a/web/src/components/QuickNav/QuickNav.styles.ts b/web/src/components/QuickNav/QuickNav.styles.ts
index c4e4d00..c8a9b33 100644
--- a/web/src/components/QuickNav/QuickNav.styles.ts
+++ b/web/src/components/QuickNav/QuickNav.styles.ts
@@ -418,22 +418,6 @@ export const QuickNavToggle = styled.button<{ $open: boolean }>`
     border-color var(--dur-fast) ease,
     background-color var(--dur-fast) ease;
 
-  &::after {
-    position: absolute;
-    right: 7px;
-    bottom: 7px;
-    width: 4px;
-    height: 4px;
-    border-radius: 50%;
-    background: var(--accent);
-    content: "";
-    opacity: ${({ $open }) => ($open ? 0 : 1)};
-    transform: ${({ $open }) => ($open ? "scale(0)" : "none")};
-    transition:
-      transform 500ms var(--ease-out),
-      opacity 220ms ease;
-  }
-
   &:hover {
     border-color: ${({ $open }) => ($open ? "transparent" : "rgba(232, 133, 97, 0.52)")};
     background: ${({ $open }) => ($open ? "transparent" : "#151310")};
diff --git a/web/src/hooks/useFrameSequence.ts b/web/src/hooks/useFrameSequence.ts
index 940bdac..15cc3f0 100644
--- a/web/src/hooks/useFrameSequence.ts
+++ b/web/src/hooks/useFrameSequence.ts
@@ -14,8 +14,8 @@ type Sequence = {
 const PASSES = [8, 4, 2, 1] as const;
 
 /**
- * Loads a numbered image sequence in widening passes — every 8th frame first,
- * then the gaps — so the hero becomes scrubbable after a fraction of the bytes
+ * Loads a numbered image sequence in widening passes, starting with every 8th frame
+ * before filling the gaps, so the hero becomes scrubbable after a fraction of the bytes
  * have arrived and sharpens as the rest land. Images are decoded off the main
  * thread where the browser supports it, which keeps the first scroll smooth.
  */
diff --git a/web/src/lib/content.ts b/web/src/lib/content.ts
index 884c11d..c42e663 100644
--- a/web/src/lib/content.ts
+++ b/web/src/lib/content.ts
@@ -63,7 +63,7 @@ export const FEATURES: Feature[] = [
     index: "04",
     title: "System controls",
     blurb:
-      "Volume, brightness, microphone state and audio output — without opening a single settings panel.",
+      "Control volume, brightness, microphone state and audio output without opening a single settings panel.",
     icon: "system",
     tint: "--violet",
     kind: "mockup",
@@ -75,7 +75,7 @@ export const FEATURES: Feature[] = [
     index: "05",
     title: "Live indicators",
     blurb:
-      "Battery, connected AirPods, camera and microphone use, and active calls — readable without opening anything.",
+      "See battery, connected AirPods, camera and microphone use, and active calls without opening anything.",
     icon: "pulse",
     tint: "--mint",
     kind: "capture",