Action page: levels of engagement

src/lib/components/Tabs.svelte

@@ -42,7 +42,7 @@
 </script>
 
 <div class="tabs-container">
-	<div class="tab-buttons" bind:this={tabButtons}>
+	<div class="tab-buttons" class:tabs-6={tabs.length === 6} bind:this={tabButtons}>
 		{#each tabs as tab, i}
 			<button class="tab-button" class:active={i === activeTab} on:click={() => updateActiveTab(i)}>
 				{tab.title}
@@ -92,16 +92,42 @@
 		text-align: center; /* Center text in tabs */
 	}
 
-	/* Desktop: Remove right border from every 5th tab */
+	/* Desktop: For 6 tabs, adjust flex basis and remove min-width to prevent wrapping */
+	.tab-buttons.tabs-6 .tab-button {
+		flex: 1 1 16.67%; /* 6 tabs per row */
+		min-width: 0; /* Remove min-width to allow all 6 tabs to fit in one row */
+	}
+
+	/* Prevent wrapping for 6 tabs above mobile breakpoint */
+	@media (min-width: 769px) {
+		.tab-buttons.tabs-6 {
+			flex-wrap: nowrap; /* Force all 6 tabs in one row */
+		}
+	}
+
+	/* Desktop: Remove right border from every 5th tab (for 5 tabs) */
 	.tab-button:nth-child(5n) {
 		border-right: none;
 	}
 
-	/* Desktop: Remove bottom border from the last row (if there are 5 tabs or less) */
+	/* Desktop: Override for 6 tabs - remove right border from 6th tab */
+	.tab-buttons.tabs-6 .tab-button:nth-child(5n) {
+		border-right: 1px solid var(--brand-subtle);
+	}
+	.tab-buttons.tabs-6 .tab-button:nth-child(6n) {
+		border-right: none;
+	}
+
+	/* Desktop: Remove bottom border from the last row */
 	.tab-button:nth-last-child(-n + 5) {
 		border-bottom: 2px solid transparent;
 	}
 
+	/* Desktop: For 6 tabs, remove bottom border from all 6 */
+	.tab-buttons.tabs-6 .tab-button:nth-last-child(-n + 6) {
+		border-bottom: 2px solid transparent;
+	}
+
 	.tab-button:hover {
 		background-color: rgba(255, 255, 255, 0.1);
 	}
@@ -114,7 +140,7 @@
 	}
 
 	.tab-contents {
-		padding: var(--spacing-md);
+		padding: var(--spacing-md) var(--spacing-md) var(--spacing-sm) var(--spacing-md);
 	}
 
 	.tab-content {
@@ -141,10 +167,20 @@
 		padding-left: var(--spacing-md);
 	}
 
+	.tab-content :global(ul:last-child),
+	.tab-content :global(ol:last-child),
+	.tab-content :global(p:last-child) {
+		margin-bottom: 0;
+	}
+
 	.tab-content :global(li) {
 		margin-bottom: var(--spacing-xs);
 	}
 
+	.tab-content :global(li:last-child) {
+		margin-bottom: 2;
+	}
+
 	.tab-content :global(a) {
 		color: var(--brand);
 		text-decoration: none;
@@ -154,7 +190,7 @@
 		text-decoration: underline;
 	}
 
-	/* Mobile-specific adjustments: 2 tabs in the first row, 3 tabs in the second row */
+	/* Mobile-specific adjustments */
 	@media (max-width: 768px) {
 		.tab-button {
 			font-size: 0.8rem;
@@ -163,37 +199,68 @@
 			border-bottom: none;
 		}
 
-		/* First row (tabs 1 and 2) */
-		.tab-button:nth-child(-n + 2) {
+		/* For 5 tabs: First row (tabs 1 and 2), Second row (tabs 3, 4, and 5) */
+		.tab-buttons:not(.tabs-6) .tab-button:nth-child(-n + 2) {
 			flex: 1 1 50%; /* Make them take half width each */
 			max-width: 50%; /* Ensure they don't grow beyond 50% */
 			border-bottom: 1px solid var(--brand-subtle); /* Add bottom border for the first row */
 		}
 
-		/* Second row (tabs 3, 4, and 5) */
-		.tab-button:nth-child(n + 3) {
+		.tab-buttons:not(.tabs-6) .tab-button:nth-child(n + 3) {
 			flex: 1 1 33.33%; /* Make them take roughly one-third width each */
 			max-width: 33.33%; /* Ensure they don't grow beyond 33.33% */
 			min-width: unset; /* Remove min-width to allow shrinking */
 			border-bottom: 2px solid transparent; /* Ensure no bottom border for second row */
 		}
 
-		/* Right borders for the first row */
-		.tab-button:nth-child(odd):nth-child(-n + 2) {
+		/* For 6 tabs: First row (tabs 1, 2, 3), Second row (tabs 4, 5, 6) */
+		.tab-buttons.tabs-6 .tab-button:nth-child(-n + 3) {
+			flex: 1 1 33.33%; /* Make them take one-third width each */
+			max-width: 33.33%; /* Ensure they don't grow beyond 33.33% */
+			border-bottom: 1px solid var(--brand-subtle); /* Add bottom border for the first row */
+		}
+
+		.tab-buttons.tabs-6 .tab-button:nth-child(n + 4) {
+			flex: 1 1 33.33%; /* Make them take one-third width each */
+			max-width: 33.33%; /* Ensure they don't grow beyond 33.33% */
+			min-width: unset; /* Remove min-width to allow shrinking */
+			border-bottom: 2px solid transparent; /* Ensure no bottom border for second row */
+		}
+
+		/* Right borders for 5 tabs - first row */
+		.tab-buttons:not(.tabs-6) .tab-button:nth-child(odd):nth-child(-n + 2) {
+			border-right: 1px solid var(--brand-subtle);
+		}
+		.tab-buttons:not(.tabs-6) .tab-button:nth-child(even):nth-child(-n + 2) {
+			border-right: none;
+		}
+
+		/* Right borders for 5 tabs - second row */
+		.tab-buttons:not(.tabs-6) .tab-button:nth-child(3) {
 			border-right: 1px solid var(--brand-subtle);
 		}
-		.tab-button:nth-child(even):nth-child(-n + 2) {
+		.tab-buttons:not(.tabs-6) .tab-button:nth-child(4) {
+			border-right: 1px solid var(--brand-subtle);
+		}
+		.tab-buttons:not(.tabs-6) .tab-button:nth-child(5) {
 			border-right: none;
 		}
 
-		/* Right borders for the second row */
-		.tab-button:nth-child(3) {
+		/* Right borders for 6 tabs - first row */
+		.tab-buttons.tabs-6 .tab-button:nth-child(1),
+		.tab-buttons.tabs-6 .tab-button:nth-child(2) {
 			border-right: 1px solid var(--brand-subtle);
 		}
-		.tab-button:nth-child(4) {
+		.tab-buttons.tabs-6 .tab-button:nth-child(3) {
+			border-right: none;
+		}
+
+		/* Right borders for 6 tabs - second row */
+		.tab-buttons.tabs-6 .tab-button:nth-child(4),
+		.tab-buttons.tabs-6 .tab-button:nth-child(5) {
 			border-right: 1px solid var(--brand-subtle);
 		}
-		.tab-button:nth-child(5) {
+		.tab-buttons.tabs-6 .tab-button:nth-child(6) {
 			border-right: none;
 		}
 	}

src/posts/action.md

@@ -7,32 +7,100 @@ description: Ways to help reduce AI risk.
 import Tabs from '$lib/components/Tabs.svelte'
 </script>
 
-AI won't get safer unless we act decisively to push for safety.
-Choose an activity below depending on your interests or skills.
+Everyone has a role to play in building a safer future. Whether you have five minutes or five days, there's something meaningful you can do right now. This page will help you find the actions that work best for you, wherever you are and whatever time you can give.
 
-## Demand government action
+## If you have...
 
-- **Write to your politicians**: We've found emails are surprisingly effective and take relatively little effort. If you don't feel confident about what to write, [start with our email builder](/email-builder). When you get a meeting, you should check out our [lobby tips](/lobby-tips).
-- **Call your politicians**: Try calling legislators' offices while having a set of talking points in view so you stay on topic.
-- **Protest**: Join [one of the protests](https://pauseai.info/protests) or [organize one yourself](https://pauseai.info/organizing-a-protest).
-- **Sign petitions**: [**Ours**](/statement), [Statement on Superintelligence](https://superintelligence-statement.org/), [International AI Treaty](https://aitreaty.org), [Demand responsible AI](https://www.change.org/p/artificial-intelligence-time-is-running-out-for-responsible-ai-development-91f0a02c-130a-46e1-9e55-70d6b274f4df).
-
-## Inform people around you
-
-- **Share about AI risk** on your social media. One of [these videos](https://www.youtube.com/watch?v=xBqU1QxCao8&list=PLI46NoubGtIJa0JVCBR-9CayxCOmU0EJt) or this website can be a good start. And don't forget to tag us in your posts.
-- **Talk to people in your life** about AI safety. Answer their questions, and encourage them to act too. Use our [counterarguments](/counterarguments) to help you be more persuasive.
-- **[Tabling](/tabling) and [flyering](/flyering)** are great ways to reach many people in a short amount of time.
-- **Attend local events**: Many cities have (free / low-cost) events about AI & technology policy. Attending these events is a great way to network and share your concerns.
-
-## Support PauseAI
+<Tabs tabs={[
+{
+title: 'Start Here',
+content: `
 
-- **Join or create a [local PauseAI community](/communities)**.
-- **Join the [Discord](https://discord.gg/T3YrWUJsJ5)**, where most of the collaboration happens.
-- **Protest or participate in [events](/events)**. If no protest is near you, consider [starting one](/organizing-a-protest).
-- **Look over our [vacancies](/vacancies)** to see if any of your skills match our organizational needs. We're often looking for people with experience in social media, communications, organizing, outreach, and software. Some positions are compensated.
-- **[Sign up as a volunteer](/join)** so we can find projects in your interest areas.
-- **[Donate](/donate)** to PauseAI or buy some merchandise in our [store](https://pauseai-shop.fourthwall.com/).
-- **Follow our [social media channels](https://linktr.ee/pauseai)** and stay updated. Your local PauseAI chapter may also have dedicated social media pages.
+<h3>Connect</h3>
+<p>Before diving in, take these quick steps to connect with the movement:</p>
+<ol>
+<li><strong>Sign up via our <a href="/join">Join page</a></strong> so we can stay in touch and connect you with volunteer communities around the world.</li>
+<li><strong>Join the <a href="https://discord.gg/T3YrWUJsJ5">Discord</a></strong>, where most of our day-to-day collaboration happens.</li>
+<li><strong>Find the next Community Onboarding Call</strong> in our <a href="/events">event</a> calendar to meet others who have just joined and hear more about what we do.</li>
+<li><strong><a href="/communities">Find your community</a></strong> and meet other local volunteers to find actions happening specifically in your country or city.</li>
+</ol>
+	`
+},
+{
+	title: '5 Minutes',
+	content: `
+<h3>I have 5 minutes</h3>
+<p>Small actions add up. Here are quick ways to contribute:</p>
+<ul>
+<li>Check out our <a href="https://microcommit.io/onboarding?org=135fcd8d-8116-44af-b885-14df992f9a8c">microcommit page</a> for weekly bite-sized actions</li>
+<li>Make a <a href="/donate">donation</a> or pick up some gear from our <a href="https://pauseai-shop.fourthwall.com/">store</a></li>
+<li>Follow our <a href="https://linktr.ee/pauseai">social media channels</a> to stay updated—your local PauseAI chapter may have dedicated pages too</li>
+<li>Sign the petitions: <a href="/statement">PauseAI petition</a>, <a href="https://superintelligence-statement.org/">Statement on Superintelligence</a>, <a href="https://aitreaty.org">International AI Treaty</a>, <a href="https://www.change.org/p/artificial-intelligence-time-is-running-out-for-responsible-ai-development-91f0a02c-130a-46e1-9e55-70d6b274f4df">Demand Responsible AI</a></li>
+</ul>
+	`
+},
+{
+	title: '1 Hour',
+	content: `
+<h3>I have an hour</h3>
+<p>Ready to go a bit deeper? Start conversations and add your voice:</p>
+<ul>
+<li>Talk to someone in your life about AI safety—a friend, neighbour, colleague, or family member. Our <a href="/counterarguments">counterarguments guide</a> can help you answer tough questions and encourage others to act</li>
+<li>Share about AI risk on your social media. One of <a href="https://www.youtube.com/watch?v=xBqU1QxCao8&list=PLI46NoubGtIJa0JVCBR-9CayxCOmU0EJt">these videos</a> or this website can be a good start. And don't forget to tag us in your posts</li>
+</ul>
+	`
+},
+{
+	title: 'A Few Hours',
+	content: `
+<h3>I have a few hours</h3>
+<p>Make your voice heard where it counts:</p>
+<ul>
+<li><strong>Write to your elected representatives</strong> using our email tools:
+	<ul>
+	<li><a href="/writing-a-letter">Writing a Letter</a></li>
+	<li><a href="/uk-email-mp">Emailing your UK MP</a></li>
+	<li><a href="/email-builder">Email Builder</a></li>
+	</ul>
+</li>
+<li><strong>Call your politicians</strong>: Try calling legislators' offices while having a set of talking points in view so you stay on topic</li>
+<li>Follow up with a phone call, and when you secure a meeting, check out our <a href="/lobby-tips">lobby tips</a></li>
+<li>Take a deep dive into our <a href="/learn">educational materials</a> to build your knowledge</li>
+</ul>
+	`
+},
+{
+	title: '1 Day',
+	content: `
+<h3>I have a day</h3>
+<p>Get out into the world and bring others along:</p>
+<ul>
+<li><strong>Attend one of our <a href="/events">upcoming events</a></strong>—or if there isn't one near you, organise your own:
+	<ul>
+	<li><a href="/organizing-a-protest">Protests</a></li>
+	<li><a href="/local-organizing#letter-to-the-editor-writing-workshops">Workshops</a></li>
+	<li><a href="/local-organizing#social-events--having-drinks">Social meetups</a></li>
+	</ul>
+</li>
+<li>Try <a href="/tabling">tabling</a> or <a href="/flyering">flyering</a>—great ways to reach many people in a short time</li>
+<li><strong>Attend local events</strong>: Many cities have (free / low-cost) events about AI & technology policy. Attending these events is a great way to network and share your concerns</li>
+</ul>
+	`
+},
+{
+	title: 'Go All In',
+	content: `
+<h3>I want to go all in</h3>
+<p>Ready to make PauseAI a serious part of your life? We'd love to have you:</p>
+<ul>
+<li>Apply for a <a href="/microgrants">microgrant</a> to fund your own initiative</li>
+<li>Apply for a <a href="/volunteer-stipends">volunteer stipend</a> to support sustained involvement</li>
+<li><a href="/communities">Set up a local chapter</a> or get deeply involved in an existing one</li>
+<li>Check our <a href="/vacancies">paid</a> and <a href="/join#volunteer-vacancies">volunteer</a> vacancies for open roles</li>
+</ul>
+	`
+}
+]} />
 
 ## If you are a...