Newsletter subscribe entry points + dedicated /subscribe signup

messages/en.json

@@ -14,6 +14,10 @@
 	"header_about": "About",
 	"header_community": "Community",
 	"header_get_involved": "Get involved",
+	"header_subscribe": "Subscribe",
+	"home_newsletter_heading": "Subscribe",
+	"home_newsletter_button": "Sign up",
+	"home_newsletter_description": "Sign up to our newsletter and receive updates about how to support our movement.",
 	"header_our_strategy": "Our strategy",
 	"header_why": "Why this matters",
 	"header_find_group": "Find your local group",

src/lib/components/Home.svelte

@@ -52,7 +52,12 @@
 	</Block>
 </section>
 
-<NewsletterSignup />
+<NewsletterSignup
+	handoffHref="/subscribe"
+	headingText={m.home_newsletter_heading()}
+	descriptionText={m.home_newsletter_description()}
+	buttonText={m.home_newsletter_button()}
+/>
 
 <style>
 	.divider {

src/lib/components/NewsletterSignup.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
 	import * as m from '$lib/paraglide/messages.js'
 	import { tick } from 'svelte'
+	import { goto } from '$app/navigation'
+	import { localizeHref } from '$lib/paraglide/runtime'
 
 	interface Props {
 		// Localizable text
@@ -10,14 +12,17 @@
 		descriptionText?: m.LocalizedString
 		// State variable for email binding (for external use)
 		email?: string
+		/** When set, submit routes to this signup path with the email prefilled, instead of Substack. */
+		handoffHref?: string
 	}
 
 	let {
 		placeholderText = m.newsletter_email_placeholder(),
 		buttonText = m.newsletter_button(),
 		headingText = m.newsletter_heading(),
 		descriptionText = m.newsletter_description(),
-		email = $bindable('')
+		email = $bindable(''),
+		handoffHref = undefined
 	}: Props = $props()
 
 	// State for showing success message
@@ -27,6 +32,15 @@
 	const handleSubmit = async (e: Event) => {
 		e.preventDefault()
 
+		// Newsletter entry that feeds the CRM: hand off to the signup flow with the
+		// email prefilled, rather than subscribing to Substack directly.
+		if (handoffHref) {
+			const dest = `${localizeHref(handoffHref)}?subscribe-email=${encodeURIComponent(email)}`
+			email = ''
+			void goto(dest)
+			return
+		}
+
 		// Show success message immediately
 		showSuccess = true
 
@@ -46,25 +60,30 @@
 		<h3 class="toc-exclude">{headingText}</h3>
 		<p>{descriptionText}</p>
 
-		<!-- Direct POST to Substack API in new tab -->
+		<!-- Direct POST to Substack API in new tab, unless handing off to the signup
+		     flow — then the native target mirrors the hydrated goto(), so submitting
+		     before hydration (or without JS) still lands on the flow rather than
+		     subscribing straight to Substack. -->
 		<form
 			bind:this={formElement}
-			action="https://pauseai.substack.com/api/v1/free"
-			method="POST"
-			target="_blank"
+			action={handoffHref ? localizeHref(handoffHref) : 'https://pauseai.substack.com/api/v1/free'}
+			method={handoffHref ? 'GET' : 'POST'}
+			target={handoffHref ? undefined : '_blank'}
 			onsubmit={handleSubmit}
 		>
 			<div class="input-group">
 				<input
 					type="email"
-					name="email"
+					name={handoffHref ? 'subscribe-email' : 'email'}
 					bind:value={email}
 					placeholder={placeholderText}
 					aria-label={placeholderText}
 					required
 					enterkeyhint="done"
 				/>
-				<input type="hidden" name="source" value="pauseai_website" />
+				{#if !handoffHref}
+					<input type="hidden" name="source" value="pauseai_website" />
+				{/if}
 				<button type="submit">{buttonText}</button>
 			</div>
 		</form>

src/lib/components/navbar/narrow/NarrowNavbar.svelte

@@ -6,6 +6,7 @@
 	import Logo from '$lib/components/logo.svelte'
 	import { localizeHref } from '$lib/paraglide/runtime'
 	import Menu from '@lucide/svelte/icons/menu'
+	import Mail from '@lucide/svelte/icons/mail'
 	import X from '@lucide/svelte/icons/x'
 	import ChevronDown from '@lucide/svelte/icons/chevron-down'
 	import { onMount } from 'svelte'
@@ -82,6 +83,15 @@
 							{/each}
 						</div>
 					</details>
+				{:else if item.mail}
+					<LinkWithoutIcon
+						href={item.href}
+						class="panel-link get-updates"
+						aria-current={isCurrent(item) ? 'page' : undefined}
+					>
+						<span>{item.label}</span>
+						<Mail size="1em" />
+					</LinkWithoutIcon>
 				{:else}
 					<LinkWithoutIcon
 						href={item.href}
@@ -154,6 +164,12 @@
 		border-radius: 4px;
 	}
 
+	.panel :global(.panel-link.get-updates) {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+	}
+
 	.panel :global(.panel-link.c2a) {
 		color: var(--brand);
 	}

src/lib/components/navbar/navItems.ts

@@ -7,6 +7,8 @@ export interface NavItem {
 	external?: boolean
 	/** Render as a call-to-action (brand-coloured) link. */
 	c2a?: boolean
+	/** Show a leading mail icon; the newsletter / updates entry. */
+	mail?: boolean
 	/** Sub-items shown in a dropdown (desktop) / accordion (mobile). */
 	children?: NavItem[]
 }
@@ -43,6 +45,7 @@ export function getNavItems(): NavItem[] {
 				{ label: m.header_start_group(), href: '/national-groups' }
 			]
 		},
+		{ label: m.header_subscribe(), href: '/subscribe', mail: true },
 		{ label: m.header_donate(), href: '/donate', c2a: true }
 	]
 }

src/lib/components/navbar/universal/UniversalNavbar.svelte

@@ -116,5 +116,43 @@
 		text-transform: uppercase;
 		flex-wrap: wrap;
 		justify-content: center;
+		align-items: center;
+	}
+
+	/* The "Get updates" nav item (WideNavbar) is a bare link, not a Navlink, so it
+	   needs its own colour/spacing here where .nav-links is in scope: matches the
+	   .navlink rhythm and overrides the global `a` colour. */
+	.nav-links :global(.get-updates) {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.35rem;
+		font-family: var(--font-heading);
+		font-weight: 700;
+		font-size: 1.1rem;
+		color: var(--text);
+		text-decoration: none;
+		white-space: nowrap;
+		padding: 0 0.5rem;
+		margin-left: 0.5rem;
+		margin-right: -0.5rem;
+	}
+
+	.nav-links :global(.get-updates.inverted) {
+		color: white;
+	}
+
+	.nav-links :global(.get-updates:hover) {
+		color: var(--brand);
+		text-decoration: underline;
+	}
+
+	/* On the hero's orange band the brand-coloured hover would be invisible.
+	   Matches .navlink.inverted:hover. */
+	.nav-links :global(.get-updates.inverted:hover) {
+		color: black;
+	}
+
+	.nav-links :global(.get-updates.active) {
+		color: var(--brand-subtle);
 	}
 </style>

src/lib/components/navbar/wide/WideNavbar.svelte

@@ -2,6 +2,10 @@
 	import UniversalNavbar from '../universal/UniversalNavbar.svelte'
 	import Navlink from '../Navlink.svelte'
 	import NavDropdown from '../NavDropdown.svelte'
+	import MailIcon from '@lucide/svelte/icons/mail'
+	import LinkWithoutIcon from '$lib/components/LinkWithoutIcon.svelte'
+	import { page } from '$app/state'
+	import { localizeHref } from '$lib/paraglide/runtime'
 	import type { NavItem } from '../navItems'
 
 	interface Props {
@@ -17,6 +21,15 @@
 	{#each items as item, i (item.label)}
 		{#if item.children}
 			<NavDropdown {item} {inverted} />
+		{:else if item.mail}
+			{@const active = !!item.href && localizeHref(page.url.pathname) === localizeHref(item.href)}
+			<LinkWithoutIcon
+				href={item.href}
+				class="get-updates{inverted ? ' inverted' : ''}{active ? ' active' : ''}"
+			>
+				<MailIcon size="0.85em" />
+				<span>{item.label}</span>
+			</LinkWithoutIcon>
 		{:else}
 			<Navlink {inverted} first={i === 0} href={item.href} c2a={item.c2a} external={item.external}>
 				{item.label}