Changing the joining pipeline

.agent/skills/news-system/SKILL.md

@@ -53,10 +53,10 @@ Simply remove `news: true` from the post's frontmatter (or set it to `false`). T
 
 **`GET /api/news`**
 
-| Param      | Default | Description                        |
-|------------|---------|------------------------------------|
-| `page`     | `1`     | Page number (1-indexed)            |
-| `pageSize` | `6`     | Items per page (max 12)            |
+| Param      | Default | Description             |
+| ---------- | ------- | ----------------------- |
+| `page`     | `1`     | Page number (1-indexed) |
+| `pageSize` | `6`     | Items per page (max 12) |
 
 The endpoint decodes HTML entities from Substack RSS (e.g., `’` → `'`).
 
@@ -72,6 +72,7 @@ The endpoint decodes HTML entities from Substack RSS (e.g., `’` → `'`).
 ## Substack Integration
 
 The Substack feed is fetched server-side from `https://pauseai.substack.com/feed`. Items are parsed from RSS XML using regex extraction for:
+
 - `<title>` → card title
 - `<description>` → card subtitle
 - `<link>` → card href

messages/en.json

@@ -2,7 +2,7 @@
 	"$schema": "https://inlang.com/schema/inlang-message-format",
 	"header__instructions": "All translations prefixed with 'header_' should be as short as possible to fit the layout. Try to keep them at a single word while still being useful as links to the pages.",
 	"header_action__instructions": "German: Handeln",
-	"header_action": "Act",
+	"header_action": "Get Involved",
 	"header_donate": "Donate",
 	"header_events__instructions": "In some languages, 'calendar' or 'dates' might be better wordings for meeting the goal of a short translation. (German: Termine)",
 	"header_events": "Groups",
@@ -49,7 +49,7 @@
 	"home_xrisk_content": "Many AI labs and experts agree: AI could end humanity.",
 	"home_xrisk_title": "We risk <u>human extinction</u>",
 	"simpletoc_heading": "Table of contents",
-	"footer_join": "Join PauseAI >",
+	"footer_join": "Volunteer with PauseAI >",
 	"footer_info": "Info",
 	"footer_info_faq": "FAQ",
 	"footer_info_proposal": "Proposal",
@@ -72,7 +72,7 @@
 	"footer_risks_sota": "State of the art",
 	"footer_risks_urgency": "Urgency",
 	"footer_action": "Take Action",
-	"footer_action_join": "Join PauseAI",
+	"footer_action_join": "Volunteer with us",
 	"footer_action_help": "How you can help",
 	"footer_action_communities": "Communities",
 	"footer_action_donate": "Donate",

src/lib/components/ActionCard.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+	import Link from '$lib/components/Link.svelte'
+
+	/** Emoji or short text to display as the icon */
+	export let icon: string = ''
+	/** Card title */
+	export let title: string
+	/** URL for the call-to-action link (optional) */
+	export let href: string = ''
+	/** Label for the call-to-action link */
+	export let linkText: string = ''
+</script>
+
+<div class="action-card">
+	{#if icon}
+		<div class="icon-wrapper">
+			<span class="icon">{icon}</span>
+		</div>
+	{/if}
+	<h3 class="card-title toc-exclude">{title}</h3>
+	<p class="card-body">
+		<slot></slot>
+	</p>
+	{#if href && linkText}
+		<Link class="card-cta" {href}>{linkText} →</Link>
+	{/if}
+</div>
+
+<style>
+	.action-card {
+		background: var(--bg-subtle);
+		border-radius: 12px;
+		padding: 1.5rem;
+		display: flex;
+		flex-direction: column;
+		gap: 0.75rem;
+		transition:
+			transform 0.2s ease,
+			box-shadow 0.2s ease;
+	}
+
+	.action-card:hover {
+		transform: translateY(-3px);
+		box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
+	}
+
+	.icon-wrapper {
+		width: 2.5rem;
+		height: 2.5rem;
+		background: var(--brand);
+		border-radius: 8px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+	}
+
+	.icon {
+		font-size: 1.25rem;
+		line-height: 1;
+	}
+
+	.card-title {
+		font-family: var(--font-heading);
+		font-weight: 700;
+		font-size: 1.1rem;
+		margin: 0;
+		text-transform: none;
+		line-height: 1.2;
+	}
+
+	.card-body {
+		font-size: 0.95rem;
+		line-height: 1.6;
+		margin: 0;
+		color: var(--text);
+		opacity: 0.85;
+		flex: 1;
+	}
+
+	/* Allow rich HTML (links) inside slot */
+	.card-body :global(a) {
+		color: var(--brand);
+		text-decoration: underline;
+	}
+
+	:global(.card-cta) {
+		color: var(--brand);
+		font-weight: 600;
+		font-size: 0.9rem;
+		text-decoration: none;
+		margin-top: auto;
+	}
+
+	:global(.card-cta:hover) {
+		text-decoration: underline;
+	}
+</style>

src/lib/components/ActionCards.svelte

@@ -0,0 +1,12 @@
+<div class="action-cards-grid">
+	<slot></slot>
+</div>
+
+<style>
+	.action-cards-grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+		gap: 1rem;
+		margin-top: 1rem;
+	}
+</style>

src/lib/components/Hero.svelte

@@ -30,7 +30,7 @@
 	<div class="content" bind:this={tagline}>
 		<h2>Don't let AI companies<br />gamble away our future</h2>
 		<div class="actions">
-			<Link href="/join" class="btn-primary">Get involved</Link>
+			<Link href="/action" class="btn-primary">Get involved</Link>
 			<Link href="/donate" class="btn-secondary">Donate</Link>
 		</div>
 	</div>

src/lib/components/Tabs.svelte

@@ -190,6 +190,149 @@
 		text-decoration: underline;
 	}
 
+	/* Action card grid layout */
+	.tab-content :global(.action-cards) {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+		gap: 1rem;
+		margin-top: 0.5rem;
+	}
+
+	.tab-content :global(.action-card) {
+		background: var(--bg-subtle);
+		border-radius: 12px;
+		padding: 1.25rem;
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+		border: 2px solid transparent;
+		transition:
+			transform 0.2s ease,
+			box-shadow 0.2s ease,
+			border-color 0.2s ease;
+	}
+
+	.tab-content :global(.action-card:hover) {
+		transform: translateY(-3px);
+		box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
+	}
+
+	.tab-content :global(.action-card-icon) {
+		width: 2.5rem;
+		height: 2.5rem;
+		background: var(--brand);
+		border-radius: 8px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-size: 1.2rem;
+		line-height: 1;
+		flex-shrink: 0;
+	}
+
+	.tab-content :global(.action-card-title) {
+		font-family: var(--font-heading);
+		font-weight: 700;
+		font-size: 1rem;
+		line-height: 1.2;
+		display: block;
+	}
+
+	.tab-content :global(.action-card-body) {
+		font-size: 0.9rem;
+		line-height: 1.55;
+		margin: 0;
+		color: var(--text);
+		opacity: 0.85;
+		flex: 1;
+	}
+
+	.tab-content :global(.action-card-body a) {
+		color: var(--brand);
+		text-decoration: underline;
+	}
+
+	/* Clickable card links — entire card acts as a link */
+	.tab-content :global(a.action-card-link) {
+		text-decoration: none;
+		color: inherit;
+		cursor: pointer;
+	}
+
+	.tab-content :global(a.action-card-link:hover) {
+		text-decoration: none;
+		border-color: var(--brand);
+		box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22);
+	}
+
+	/* Newsletter signup block inside tab content */
+	.tab-content :global(.newsletter-signup) {
+		background-color: var(--bg-subtle);
+		border-radius: 8px;
+		padding: 1.5rem;
+		margin-top: 1.5rem;
+		width: 100%;
+		box-sizing: border-box;
+	}
+
+	.tab-content :global(.newsletter-content) {
+		max-width: 500px;
+	}
+
+	.tab-content :global(.newsletter-content h3) {
+		margin-top: 0;
+		margin-bottom: 0.5rem;
+		font-family: var(--font-heading);
+	}
+
+	.tab-content :global(.newsletter-content p) {
+		margin-bottom: 1rem;
+	}
+
+	.tab-content :global(.newsletter-input-group) {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 8px;
+	}
+
+	.tab-content :global(.newsletter-input-group input[type='email']) {
+		flex: 1;
+		padding: 0.75rem 1rem;
+		border: 1px solid var(--border);
+		border-radius: 4px;
+		font-size: 1rem;
+		background-color: var(--bg);
+		color: var(--text);
+	}
+
+	.tab-content :global(.newsletter-input-group button) {
+		padding: 0.75rem 1.5rem;
+		border: none;
+		border-radius: 4px;
+		font-weight: bold;
+		cursor: pointer;
+		transition: opacity 0.2s;
+		font-size: 1rem;
+		background-color: var(--brand);
+		color: var(--bg);
+	}
+
+	.tab-content :global(.newsletter-input-group button:hover) {
+		opacity: 0.9;
+	}
+
+	@media (max-width: 600px) {
+		.tab-content :global(.newsletter-input-group) {
+			flex-direction: column;
+		}
+
+		.tab-content :global(.newsletter-input-group input[type='email']),
+		.tab-content :global(.newsletter-input-group button) {
+			box-sizing: border-box;
+			width: 100%;
+		}
+	}
+
 	/* Mobile-specific adjustments */
 	@media (max-width: 768px) {
 		.tab-button {