From 3a9235a72ad052bf273094088b88e054b12d0e88 Mon Sep 17 00:00:00 2001 From: Patricio Date: Tue, 31 Mar 2026 15:04:58 -0300 Subject: [PATCH 01/10] card style actions --- .agent/skills/news-system/SKILL.md | 9 +- src/lib/components/ActionCard.svelte | 96 +++++++++ src/lib/components/ActionCards.svelte | 12 ++ src/lib/components/Tabs.svelte | 60 ++++++ src/posts/action.md | 269 +++++++++++++++++++------- src/routes/pdoom/+page.svelte | 4 +- 6 files changed, 378 insertions(+), 72 deletions(-) create mode 100644 src/lib/components/ActionCard.svelte create mode 100644 src/lib/components/ActionCards.svelte diff --git a/.agent/skills/news-system/SKILL.md b/.agent/skills/news-system/SKILL.md index 7cc547a3b..a20b07dad 100644 --- a/.agent/skills/news-system/SKILL.md +++ b/.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: + - `` → card title - `<description>` → card subtitle - `<link>` → card href diff --git a/src/lib/components/ActionCard.svelte b/src/lib/components/ActionCard.svelte new file mode 100644 index 000000000..ae48e24e4 --- /dev/null +++ b/src/lib/components/ActionCard.svelte @@ -0,0 +1,96 @@ +<script lang="ts"> + /** 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 /> + </p> + {#if href && linkText} + <a class="card-cta" {href}>{linkText} →</a> + {/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; + } + + .card-cta { + color: var(--brand); + font-weight: 600; + font-size: 0.9rem; + text-decoration: none; + margin-top: auto; + } + + .card-cta:hover { + text-decoration: underline; + } +</style> diff --git a/src/lib/components/ActionCards.svelte b/src/lib/components/ActionCards.svelte new file mode 100644 index 000000000..7d9135432 --- /dev/null +++ b/src/lib/components/ActionCards.svelte @@ -0,0 +1,12 @@ +<div class="action-cards-grid"> + <slot /> +</div> + +<style> + .action-cards-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); + gap: 1rem; + margin-top: 1rem; + } +</style> diff --git a/src/lib/components/Tabs.svelte b/src/lib/components/Tabs.svelte index b81fbc9f3..a8f56b70a 100644 --- a/src/lib/components/Tabs.svelte +++ b/src/lib/components/Tabs.svelte @@ -190,6 +190,66 @@ 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; + transition: + transform 0.2s ease, + box-shadow 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; + } + /* Mobile-specific adjustments */ @media (max-width: 768px) { .tab-button { diff --git a/src/posts/action.md b/src/posts/action.md index e24e8af39..e43434b94 100644 --- a/src/posts/action.md +++ b/src/posts/action.md @@ -18,12 +18,28 @@ content: ` <h3 class="toc-exclude">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="/communities#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> +<div class="action-cards"> +<div class="action-card"> +<div class="action-card-icon">🔗</div> +<strong class="action-card-title">Sign up</strong> +<p class="action-card-body">Sign up via our <a href="/join">Join page</a> so we can stay in touch and connect you with volunteer communities around the world.</p> +</div> +<div class="action-card"> +<div class="action-card-icon">💬</div> +<strong class="action-card-title">Join the Discord</strong> +<p class="action-card-body">Join the <a href="https://discord.gg/T3YrWUJsJ5">Discord</a>, where most of our day-to-day collaboration happens.</p> +</div> +<div class="action-card"> +<div class="action-card-icon">📅</div> +<strong class="action-card-title">Onboarding Call</strong> +<p class="action-card-body">Find the next Community Onboarding Call in our <a href="/communities#events">event</a> calendar to meet others who have just joined and hear more about what we do.</p> +</div> +<div class="action-card"> +<div class="action-card-icon">🌍</div> +<strong class="action-card-title">Find your community</strong> +<p class="action-card-body"><a href="/communities">Find your community</a> and meet other local volunteers to find actions happening specifically in your country or city.</p> +</div> +</div> ` }, { @@ -31,12 +47,28 @@ content: ` content: ` <h3 class="toc-exclude">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 Statement</a>, <a href="/sayno">Say No To Superintelligent AI</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> +<div class="action-cards"> +<div class="action-card"> +<div class="action-card-icon">⚡</div> +<strong class="action-card-title">Microcommit</strong> +<p class="action-card-body">Check out our <a href="https://microcommit.io/onboarding?org=135fcd8d-8116-44af-b885-14df992f9a8c">microcommit page</a> for weekly bite-sized actions you can do in under 5 minutes.</p> +</div> +<div class="action-card"> +<div class="action-card-icon">💰</div> +<strong class="action-card-title">Make a donation</strong> +<p class="action-card-body">Make a <a href="/donate">donation</a> or pick up some gear from our <a href="https://pauseai-shop.fourthwall.com/">store</a> to support the movement.</p> +</div> +<div class="action-card"> +<div class="action-card-icon">📣</div> +<strong class="action-card-title">Follow us</strong> +<p class="action-card-body">Follow our <a href="https://linktr.ee/pauseai">social media channels</a> to stay updated — your local PauseAI chapter may have dedicated pages too.</p> +</div> +<div class="action-card"> +<div class="action-card-icon">✍️</div> +<strong class="action-card-title">Sign petitions</strong> +<p class="action-card-body">Sign the petitions: <a href="/statement">PauseAI Statement</a>, <a href="/sayno">Say No To Superintelligent AI</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>.</p> +</div> +</div> ` }, { @@ -44,11 +76,23 @@ content: ` content: ` <h3 class="toc-exclude">I have an hour</h3> <p>Ready to go a bit deeper? Start conversations and add your voice:</p> -<ul> -<li><strong>Write to your elected representatives</strong> using our <a href="/email-builder">Email Builder</a></li> -<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> +<div class="action-cards"> +<div class="action-card"> +<div class="action-card-icon">✉️</div> +<strong class="action-card-title">Write to your representatives</strong> +<p class="action-card-body">Write to your elected representatives using our <a href="/email-builder">Email Builder</a> — it only takes a few minutes.</p> +</div> +<div class="action-card"> +<div class="action-card-icon">🗣️</div> +<strong class="action-card-title">Talk to someone</strong> +<p class="action-card-body">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.</p> +</div> +<div class="action-card"> +<div class="action-card-icon">📱</div> +<strong class="action-card-title">Share on social media</strong> +<p class="action-card-body">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. Don't forget to tag us.</p> +</div> +</div> ` }, { @@ -56,11 +100,18 @@ content: ` content: ` <h3 class="toc-exclude">I have a few hours</h3> <p>Make your voice heard where it counts:</p> -<ul> -<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> +<div class="action-cards"> +<div class="action-card"> +<div class="action-card-icon">📞</div> +<strong class="action-card-title">Call your politicians</strong> +<p class="action-card-body">Try calling legislators' offices while having a set of talking points in view so you stay on topic. Follow up with a phone call, and check out our <a href="/lobby-tips">lobby tips</a> when you secure a meeting.</p> +</div> +<div class="action-card"> +<div class="action-card-icon">📚</div> +<strong class="action-card-title">Educate yourself</strong> +<p class="action-card-body">Take a deep dive into our <a href="/learn">educational materials</a> to build your knowledge and become a more effective advocate.</p> +</div> +</div> ` }, { @@ -68,17 +119,23 @@ content: ` content: ` <h3 class="toc-exclude">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="/communities#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> +<div class="action-cards"> +<div class="action-card"> +<div class="action-card-icon">🗓️</div> +<strong class="action-card-title">Attend an event</strong> +<p class="action-card-body">Attend one of our <a href="/communities#events">upcoming events</a> — or if there isn't one near you, organise your own <a href="/organizing-a-protest">protest</a>, <a href="/local-organizing#letter-to-the-editor-writing-workshops">workshop</a>, or <a href="/local-organizing#social-events--having-drinks">social meetup</a>.</p> +</div> +<div class="action-card"> +<div class="action-card-icon">📋</div> +<strong class="action-card-title">Table or flyer</strong> +<p class="action-card-body">Try <a href="/tabling">tabling</a> or <a href="/flyering">flyering</a> — great ways to reach many people in a short time.</p> +</div> +<div class="action-card"> +<div class="action-card-icon">🤝</div> +<strong class="action-card-title">Attend local events</strong> +<p class="action-card-body">Many cities have free or low-cost events about AI & technology policy. Attending these is a great way to network and share your concerns.</p> +</div> +</div> ` }, { @@ -86,12 +143,28 @@ content: ` content: ` <h3 class="toc-exclude">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> vacancies for open roles</li> -</ul> +<div class="action-cards"> +<div class="action-card"> +<div class="action-card-icon">💡</div> +<strong class="action-card-title">Apply for a microgrant</strong> +<p class="action-card-body">Apply for a <a href="/microgrants">microgrant</a> to fund your own initiative and get support for your local efforts.</p> +</div> +<div class="action-card"> +<div class="action-card-icon">🙌</div> +<strong class="action-card-title">Volunteer stipend</strong> +<p class="action-card-body">Apply for a <a href="/volunteer-stipends">volunteer stipend</a> to support sustained involvement and dedicate more time to the cause.</p> +</div> +<div class="action-card"> +<div class="action-card-icon">🏘️</div> +<strong class="action-card-title">Build a local chapter</strong> +<p class="action-card-body"><a href="/communities">Set up a local chapter</a> or get deeply involved in an existing one to grow the movement in your area.</p> +</div> +<div class="action-card"> +<div class="action-card-icon">💼</div> +<strong class="action-card-title">Paid roles</strong> +<p class="action-card-body">Check our <a href="/vacancies">paid vacancies</a> for open roles and turn your commitment into a career.</p> +</div> +</div> ` } ]} /> @@ -104,56 +177,120 @@ title: 'Journalist or Creator', content: ` <h3 class="toc-exclude">If you work as a journalist or have a social media following</h3> -<ul> -<li><strong>Create content</strong> about AI dangers or PauseAI. For more information, reach out to us through any of our <a href="/faq#do-you-have-social-media">communication channels</a>.</li> -</ul> +<div class="action-cards"> +<div class="action-card"> +<div class="action-card-icon">🎥</div> +<strong class="action-card-title">Create content</strong> +<p class="action-card-body">Create content about AI dangers or PauseAI. For more information, reach out to us through any of our <a href="/faq#do-you-have-social-media">communication channels</a>.</p> +</div> +</div> ` }, { title: 'Politician or Public Servant', content: ` <h3 class="toc-exclude">If you are a politician or work in government</h3> -<ul> -<li><strong>Prepare for the next <a href="/summit">AI safety summit</a></strong>. Form coalitions with other countries to share safety information and act quickly when harms arise. Work towards a global treaty.</li> -<li><strong>Invite (or subpoena) AI lab leaders</strong> to parliamentary/congressional hearings to give their predictions and timelines of AI disasters.</li> -<li><strong>Establish a committee</strong> to investigate the <a href="/risks">risks of AI</a>. Publish the findings, if feasible.</li> -<li><strong>Make AI safety a priority</strong> in your party's platform, your government's policy, or just make sure it's on the agenda.</li> -<li><strong>Work with opposition politicians</strong> to demonstrate that AI safety affects us all, regardless of political beliefs.</li> -</ul> +<div class="action-cards"> +<div class="action-card"> +<div class="action-card-icon">🌐</div> +<strong class="action-card-title">Prepare for the next summit</strong> +<p class="action-card-body">Prepare for the next <a href="/summit">AI safety summit</a>. Form coalitions with other countries to share safety information and act quickly when harms arise. Work towards a global treaty.</p> +</div> +<div class="action-card"> +<div class="action-card-icon">🏛️</div> +<strong class="action-card-title">Invite AI lab leaders</strong> +<p class="action-card-body">Invite (or subpoena) AI lab leaders to parliamentary/congressional hearings to give their predictions and timelines of AI disasters.</p> +</div> +<div class="action-card"> +<div class="action-card-icon">🔍</div> +<strong class="action-card-title">Establish a committee</strong> +<p class="action-card-body">Establish a committee to investigate the <a href="/risks">risks of AI</a>. Publish the findings, if feasible.</p> +</div> +<div class="action-card"> +<div class="action-card-icon">📌</div> +<strong class="action-card-title">Make AI safety a priority</strong> +<p class="action-card-body">Make AI safety a priority in your party's platform, your government's policy, or just make sure it's on the agenda.</p> +</div> +<div class="action-card"> +<div class="action-card-icon">🤲</div> +<strong class="action-card-title">Work across the aisle</strong> +<p class="action-card-body">Work with opposition politicians to demonstrate that AI safety affects us all, regardless of political beliefs.</p> +</div> +</div> ` }, { - title: 'Legal or Policy Expert', + title: 'Legal or Policy Expert', content: ` <h3 class="toc-exclude">If you have experience with (international) law</h3> -<ul> -<li><strong>Help draft policy</strong>. <a href="https://www.campaignforaisafety.org/celebrating-the-winners-law-student-moratorium-treaty-competition/">Draft examples</a>. <a href="https://futureoflife.org/wp-content/uploads/2023/04/FLI_Policymaking_In_The_Pause.pdf">Some</a> <a href="https://www.openphilanthropy.org/research/12-tentative-ideas-for-us-ai-policy/">frameworks</a>.</li> -<li><strong>Make submissions</strong> to government requests for comment on AI policy (<a href="https://ntia.gov/issues/artificial-intelligence/request-for-comments">example</a>).</li> -</ul> +<div class="action-cards"> +<div class="action-card"> +<div class="action-card-icon">📝</div> +<strong class="action-card-title">Help draft policy</strong> +<p class="action-card-body">Help draft policy. See <a href="https://www.campaignforaisafety.org/celebrating-the-winners-law-student-moratorium-treaty-competition/">draft examples</a> and some <a href="https://futureoflife.org/wp-content/uploads/2023/04/FLI_Policymaking_In_The_Pause.pdf">frameworks</a> to get started.</p> +</div> +<div class="action-card"> +<div class="action-card-icon">📬</div> +<strong class="action-card-title">Make submissions</strong> +<p class="action-card-body">Make submissions to government requests for comment on AI policy (<a href="https://ntia.gov/issues/artificial-intelligence/request-for-comments">example</a>).</p> +</div> +</div> ` }, { title: 'Academic or Educator', content: ` <h3 class="toc-exclude">If you are a university professor or work in an academic institution</h3> -<ul> -<li><strong>Write op-eds</strong> and articles for media outlets</li> -<li><strong>Mentor students</strong> who are interested in this topic</li> -<li><strong>Organize a campus event</strong> about AI risk, or an academic conference, panel, or symposium</li> -<li><strong>Submit a faculty senate resolution</strong> on AI risk, or craft a university position statement</li> -</ul> +<div class="action-cards"> +<div class="action-card"> +<div class="action-card-icon">✏️</div> +<strong class="action-card-title">Write op-eds</strong> +<p class="action-card-body">Write op-eds and articles for media outlets to raise awareness about AI risk among general audiences.</p> +</div> +<div class="action-card"> +<div class="action-card-icon">🎓</div> +<strong class="action-card-title">Mentor students</strong> +<p class="action-card-body">Mentor students who are interested in AI safety and help cultivate the next generation of advocates.</p> +</div> +<div class="action-card"> +<div class="action-card-icon">🏫</div> +<strong class="action-card-title">Organize a campus event</strong> +<p class="action-card-body">Organize a campus event about AI risk, or an academic conference, panel, or symposium.</p> +</div> +<div class="action-card"> +<div class="action-card-icon">🏫</div> +<strong class="action-card-title">Submit a faculty resolution</strong> +<p class="action-card-body">Submit a faculty senate resolution on AI risk, or craft a university position statement.</p> +</div> +</div> ` }, { title: 'AI Industry Professional', content: ` <h3 class="toc-exclude">If you work in AI</h3> -<ul> -<li><strong>Don't work towards better AI</strong>: Do not work for AI companies or capabilities research. And do not spread ideas on how we can make AI systems faster or smarter.</li> -<li><strong>Talk to your management and colleagues</strong> about the risks. Get them to take an institutional position toward mitigating risk over profit. Encourage implementation of standard risk mitigation procedures and anonymous reporting.</li> -<li><strong>Hold a seminar</strong> on AI safety at your workplace. Check out these <a href="https://drive.google.com/drive/u/1/folders/1p9VtopzMV6Xpk4p6EGYUTna4fLE6G8hd">slides</a> and <a href="https://www.youtube.com/playlist?list=PLI46NoubGtIJa0JVCBR-9CayxCOmU0EJt">talks and videos</a> for inspiration.</li> -<li><strong>Sign</strong> the <a href="https://www.safe.ai/statement-on-ai-risk">Statement on AI Risk</a>.</li> -</ul> +<div class="action-cards"> +<div class="action-card"> +<div class="action-card-icon">🚫</div> +<strong class="action-card-title">Don't work towards better AI</strong> +<p class="action-card-body">Do not work for AI companies or capabilities research. And do not spread ideas on how we can make AI systems faster or smarter.</p> +</div> +<div class="action-card"> +<div class="action-card-icon">💬</div> +<strong class="action-card-title">Talk to management</strong> +<p class="action-card-body">Talk to your management and colleagues about the risks. Get them to take an institutional position toward mitigating risk over profit. Encourage anonymous reporting.</p> +</div> +<div class="action-card"> +<div class="action-card-icon">📊</div> +<strong class="action-card-title">Hold a seminar</strong> +<p class="action-card-body">Hold a seminar on AI safety at your workplace. Check out these <a href="https://drive.google.com/drive/u/1/folders/1p9VtopzMV6Xpk4p6EGYUTna4fLE6G8hd">slides</a> and <a href="https://www.youtube.com/playlist?list=PLI46NoubGtIJa0JVCBR-9CayxCOmU0EJt">talks and videos</a> for inspiration.</p> +</div> +<div class="action-card"> +<div class="action-card-icon">✍️</div> +<strong class="action-card-title">Sign the statement</strong> +<p class="action-card-body">Sign the <a href="https://www.safe.ai/statement-on-ai-risk">Statement on AI Risk</a> to add your voice to the growing consensus among AI professionals.</p> +</div> +</div> ` } ]} /> diff --git a/src/routes/pdoom/+page.svelte b/src/routes/pdoom/+page.svelte index e869f7a94..99a417d3b 100644 --- a/src/routes/pdoom/+page.svelte +++ b/src/routes/pdoom/+page.svelte @@ -13,8 +13,8 @@ <p> p(doom) is the probability of very bad outcomes (e.g. human extinction) as a result of AI. This most often refers to the likelihood of <Link href="/ai-takeover">AI taking over</Link> from humanity, - but different scenarios can also constitute "doom". For example, a large portion of the population - dying due to a novel biological weapon created by AI, social collapse due to a + but different scenarios can also constitute "doom". For example, a large portion of the population dying + due to a novel biological weapon created by AI, social collapse due to a <Link href="/cybersecurity-risks">large-scale cyber attack</Link>, or AI causing a nuclear war. Note that not everyone is using the same definition when talking about their p(doom) values. Most notably the time horizon is often not specified, which makes comparing a bit difficult. From 620d64bba421f122b53dfea022f9c25b1d8be937 Mon Sep 17 00:00:00 2001 From: Patricio <patriciovercesi@hotmail.com> Date: Tue, 31 Mar 2026 15:05:35 -0300 Subject: [PATCH 02/10] change Start here to Connect --- src/posts/action.md | 60 ++++++++++++++++++++++----------------------- 1 file changed, 30 insertions(+), 30 deletions(-) diff --git a/src/posts/action.md b/src/posts/action.md index e43434b94..047eb8744 100644 --- a/src/posts/action.md +++ b/src/posts/action.md @@ -13,38 +13,9 @@ Everyone has a role to play in building a safer future. Whether you have five mi <Tabs tabs={[ { -title: 'Start Here', +title: '5 Minutes', content: ` -<h3 class="toc-exclude">Connect</h3> -<p>Before diving in, take these quick steps to connect with the movement:</p> -<div class="action-cards"> -<div class="action-card"> -<div class="action-card-icon">🔗</div> -<strong class="action-card-title">Sign up</strong> -<p class="action-card-body">Sign up via our <a href="/join">Join page</a> so we can stay in touch and connect you with volunteer communities around the world.</p> -</div> -<div class="action-card"> -<div class="action-card-icon">💬</div> -<strong class="action-card-title">Join the Discord</strong> -<p class="action-card-body">Join the <a href="https://discord.gg/T3YrWUJsJ5">Discord</a>, where most of our day-to-day collaboration happens.</p> -</div> -<div class="action-card"> -<div class="action-card-icon">📅</div> -<strong class="action-card-title">Onboarding Call</strong> -<p class="action-card-body">Find the next Community Onboarding Call in our <a href="/communities#events">event</a> calendar to meet others who have just joined and hear more about what we do.</p> -</div> -<div class="action-card"> -<div class="action-card-icon">🌍</div> -<strong class="action-card-title">Find your community</strong> -<p class="action-card-body"><a href="/communities">Find your community</a> and meet other local volunteers to find actions happening specifically in your country or city.</p> -</div> -</div> - ` -}, -{ - title: '5 Minutes', - content: ` <h3 class="toc-exclude">I have 5 minutes</h3> <p>Small actions add up. Here are quick ways to contribute:</p> <div class="action-cards"> @@ -137,6 +108,35 @@ content: ` </div> </div> ` +{ +title: 'Connect', +content: ` +<h3 class="toc-exclude">Connect</h3> +<p>Before diving in, take these quick steps to connect with the movement:</p> +<div class="action-cards"> +<div class="action-card"> +<div class="action-card-icon">🔗</div> +<strong class="action-card-title">Sign up</strong> +<p class="action-card-body">Sign up via our <a href="/join">Join page</a> so we can stay in touch and connect you with volunteer communities around the world.</p> +</div> +<div class="action-card"> +<div class="action-card-icon">💬</div> +<strong class="action-card-title">Join the Discord</strong> +<p class="action-card-body">Join the <a href="https://discord.gg/T3YrWUJsJ5">Discord</a>, where most of our day-to-day collaboration happens.</p> +</div> +<div class="action-card"> +<div class="action-card-icon">📅</div> +<strong class="action-card-title">Onboarding Call</strong> +<p class="action-card-body">Find the next Community Onboarding Call in our <a href="/communities#events">event</a> calendar to meet others who have just joined and hear more about what we do.</p> +</div> +<div class="action-card"> +<div class="action-card-icon">🌍</div> +<strong class="action-card-title">Find your community</strong> +<p class="action-card-body"><a href="/communities">Find your community</a> and meet other local volunteers to find actions happening specifically in your country or city.</p> +</div> +</div> + ` +}, }, { title: 'Go All In', From 4b4481b3f7175a4c77929ca944c967d9849fe30e Mon Sep 17 00:00:00 2001 From: Patricio <patriciovercesi@hotmail.com> Date: Tue, 31 Mar 2026 17:48:57 -0300 Subject: [PATCH 03/10] fix --- src/posts/action.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/posts/action.md b/src/posts/action.md index 047eb8744..e8a78a286 100644 --- a/src/posts/action.md +++ b/src/posts/action.md @@ -108,6 +108,7 @@ content: ` </div> </div> ` +}, { title: 'Connect', content: ` @@ -137,7 +138,6 @@ content: ` </div> ` }, -}, { title: 'Go All In', content: ` From 645d30a558e7386eb9a2befa7819e155ba89ae82 Mon Sep 17 00:00:00 2001 From: Patricio <patriciovercesi@hotmail.com> Date: Tue, 31 Mar 2026 18:18:31 -0300 Subject: [PATCH 04/10] changing links positioning --- src/lib/components/Tabs.svelte | 17 +++++++- src/posts/action.md | 80 +++++++++++++++++----------------- 2 files changed, 56 insertions(+), 41 deletions(-) diff --git a/src/lib/components/Tabs.svelte b/src/lib/components/Tabs.svelte index a8f56b70a..f60ab5118 100644 --- a/src/lib/components/Tabs.svelte +++ b/src/lib/components/Tabs.svelte @@ -205,9 +205,11 @@ display: flex; flex-direction: column; gap: 0.5rem; + border: 2px solid transparent; transition: transform 0.2s ease, - box-shadow 0.2s ease; + box-shadow 0.2s ease, + border-color 0.2s ease; } .tab-content :global(.action-card:hover) { @@ -250,6 +252,19 @@ 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); + } + /* Mobile-specific adjustments */ @media (max-width: 768px) { .tab-button { diff --git a/src/posts/action.md b/src/posts/action.md index e8a78a286..557739446 100644 --- a/src/posts/action.md +++ b/src/posts/action.md @@ -19,21 +19,21 @@ content: ` <h3 class="toc-exclude">I have 5 minutes</h3> <p>Small actions add up. Here are quick ways to contribute:</p> <div class="action-cards"> -<div class="action-card"> +<a href="https://microcommit.io/onboarding?org=135fcd8d-8116-44af-b885-14df992f9a8c" class="action-card action-card-link"> <div class="action-card-icon">⚡</div> <strong class="action-card-title">Microcommit</strong> -<p class="action-card-body">Check out our <a href="https://microcommit.io/onboarding?org=135fcd8d-8116-44af-b885-14df992f9a8c">microcommit page</a> for weekly bite-sized actions you can do in under 5 minutes.</p> -</div> +<p class="action-card-body">Check out our microcommit page for weekly bite-sized actions you can do in under 5 minutes.</p> +</a> <div class="action-card"> <div class="action-card-icon">💰</div> <strong class="action-card-title">Make a donation</strong> <p class="action-card-body">Make a <a href="/donate">donation</a> or pick up some gear from our <a href="https://pauseai-shop.fourthwall.com/">store</a> to support the movement.</p> </div> -<div class="action-card"> +<a href="https://linktr.ee/pauseai" class="action-card action-card-link"> <div class="action-card-icon">📣</div> <strong class="action-card-title">Follow us</strong> -<p class="action-card-body">Follow our <a href="https://linktr.ee/pauseai">social media channels</a> to stay updated — your local PauseAI chapter may have dedicated pages too.</p> -</div> +<p class="action-card-body">Follow our social media channels to stay updated — your local PauseAI chapter may have dedicated pages too.</p> +</a> <div class="action-card"> <div class="action-card-icon">✍️</div> <strong class="action-card-title">Sign petitions</strong> @@ -48,14 +48,14 @@ content: ` <h3 class="toc-exclude">I have an hour</h3> <p>Ready to go a bit deeper? Start conversations and add your voice:</p> <div class="action-cards"> -<div class="action-card"> +<a href="/email-builder" class="action-card action-card-link"> <div class="action-card-icon">✉️</div> <strong class="action-card-title">Write to your representatives</strong> -<p class="action-card-body">Write to your elected representatives using our <a href="/email-builder">Email Builder</a> — it only takes a few minutes.</p> -</div> +<p class="action-card-body">Write to your elected representatives using our Email Builder — it only takes a few minutes.</p> +</a> <div class="action-card"> <div class="action-card-icon">🗣️</div> -<strong class="action-card-title">Talk to someone</strong> +<strong class="action-card-title">Talk to someone about AI safety</strong> <p class="action-card-body">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.</p> </div> <div class="action-card"> @@ -77,11 +77,11 @@ content: ` <strong class="action-card-title">Call your politicians</strong> <p class="action-card-body">Try calling legislators' offices while having a set of talking points in view so you stay on topic. Follow up with a phone call, and check out our <a href="/lobby-tips">lobby tips</a> when you secure a meeting.</p> </div> -<div class="action-card"> +<a href="/learn" class="action-card action-card-link"> <div class="action-card-icon">📚</div> <strong class="action-card-title">Educate yourself</strong> -<p class="action-card-body">Take a deep dive into our <a href="/learn">educational materials</a> to build your knowledge and become a more effective advocate.</p> -</div> +<p class="action-card-body">Take a deep dive into our educational materials to build your knowledge and become a more effective advocate.</p> +</a> </div> ` }, @@ -115,26 +115,26 @@ content: ` <h3 class="toc-exclude">Connect</h3> <p>Before diving in, take these quick steps to connect with the movement:</p> <div class="action-cards"> -<div class="action-card"> +<a href="/join" class="action-card action-card-link"> <div class="action-card-icon">🔗</div> <strong class="action-card-title">Sign up</strong> -<p class="action-card-body">Sign up via our <a href="/join">Join page</a> so we can stay in touch and connect you with volunteer communities around the world.</p> -</div> -<div class="action-card"> +<p class="action-card-body">Sign up via our Join page so we can stay in touch and connect you with volunteer communities around the world.</p> +</a> +<a href="https://discord.gg/T3YrWUJsJ5" class="action-card action-card-link"> <div class="action-card-icon">💬</div> <strong class="action-card-title">Join the Discord</strong> -<p class="action-card-body">Join the <a href="https://discord.gg/T3YrWUJsJ5">Discord</a>, where most of our day-to-day collaboration happens.</p> -</div> -<div class="action-card"> +<p class="action-card-body">Join the Discord, where most of our day-to-day collaboration happens.</p> +</a> +<a href="/communities#events" class="action-card action-card-link"> <div class="action-card-icon">📅</div> <strong class="action-card-title">Onboarding Call</strong> -<p class="action-card-body">Find the next Community Onboarding Call in our <a href="/communities#events">event</a> calendar to meet others who have just joined and hear more about what we do.</p> -</div> -<div class="action-card"> +<p class="action-card-body">Find the next Community Onboarding Call in our event calendar to meet others who have just joined and hear more about what we do.</p> +</a> +<a href="/communities" class="action-card action-card-link"> <div class="action-card-icon">🌍</div> <strong class="action-card-title">Find your community</strong> -<p class="action-card-body"><a href="/communities">Find your community</a> and meet other local volunteers to find actions happening specifically in your country or city.</p> -</div> +<p class="action-card-body">Find your community and meet other local volunteers to find actions happening specifically in your country or city.</p> +</a> </div> ` }, @@ -144,26 +144,26 @@ content: ` <h3 class="toc-exclude">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> <div class="action-cards"> -<div class="action-card"> +<a href="/microgrants" class="action-card action-card-link"> <div class="action-card-icon">💡</div> <strong class="action-card-title">Apply for a microgrant</strong> -<p class="action-card-body">Apply for a <a href="/microgrants">microgrant</a> to fund your own initiative and get support for your local efforts.</p> -</div> -<div class="action-card"> +<p class="action-card-body">Apply for a microgrant to fund your own initiative and get support for your local efforts.</p> +</a> +<a href="/volunteer-stipends" class="action-card action-card-link"> <div class="action-card-icon">🙌</div> <strong class="action-card-title">Volunteer stipend</strong> -<p class="action-card-body">Apply for a <a href="/volunteer-stipends">volunteer stipend</a> to support sustained involvement and dedicate more time to the cause.</p> -</div> -<div class="action-card"> +<p class="action-card-body">Apply for a volunteer stipend to support sustained involvement and dedicate more time to the cause.</p> +</a> +<a href="/communities" class="action-card action-card-link"> <div class="action-card-icon">🏘️</div> <strong class="action-card-title">Build a local chapter</strong> -<p class="action-card-body"><a href="/communities">Set up a local chapter</a> or get deeply involved in an existing one to grow the movement in your area.</p> -</div> -<div class="action-card"> +<p class="action-card-body">Set up a local chapter or get deeply involved in an existing one to grow the movement in your area.</p> +</a> +<a href="/vacancies" class="action-card action-card-link"> <div class="action-card-icon">💼</div> <strong class="action-card-title">Paid roles</strong> -<p class="action-card-body">Check our <a href="/vacancies">paid vacancies</a> for open roles and turn your commitment into a career.</p> -</div> +<p class="action-card-body">Check our paid vacancies for open roles and turn your commitment into a career.</p> +</a> </div> ` } @@ -285,11 +285,11 @@ content: ` <strong class="action-card-title">Hold a seminar</strong> <p class="action-card-body">Hold a seminar on AI safety at your workplace. Check out these <a href="https://drive.google.com/drive/u/1/folders/1p9VtopzMV6Xpk4p6EGYUTna4fLE6G8hd">slides</a> and <a href="https://www.youtube.com/playlist?list=PLI46NoubGtIJa0JVCBR-9CayxCOmU0EJt">talks and videos</a> for inspiration.</p> </div> -<div class="action-card"> +<a href="https://www.safe.ai/statement-on-ai-risk" class="action-card action-card-link"> <div class="action-card-icon">✍️</div> <strong class="action-card-title">Sign the statement</strong> -<p class="action-card-body">Sign the <a href="https://www.safe.ai/statement-on-ai-risk">Statement on AI Risk</a> to add your voice to the growing consensus among AI professionals.</p> -</div> +<p class="action-card-body">Sign the Statement on AI Risk to add your voice to the growing consensus among AI professionals.</p> +</a> </div> ` } From bd236cb3e3310d83e43461bc2db7805aea48938f Mon Sep 17 00:00:00 2001 From: Patricio <patriciovercesi@hotmail.com> Date: Tue, 31 Mar 2026 18:25:44 -0300 Subject: [PATCH 05/10] build a local chapter card makes you start an email directed to Irina --- src/posts/action.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/posts/action.md b/src/posts/action.md index 557739446..cdac7ab16 100644 --- a/src/posts/action.md +++ b/src/posts/action.md @@ -154,7 +154,7 @@ content: ` <strong class="action-card-title">Volunteer stipend</strong> <p class="action-card-body">Apply for a volunteer stipend to support sustained involvement and dedicate more time to the cause.</p> </a> -<a href="/communities" class="action-card action-card-link"> +<a href="mailto:irina@pauseai.info?subject=I%20want%20to%20start%20a%20local%20PauseAI%20chapter" class="action-card action-card-link"> <div class="action-card-icon">🏘️</div> <strong class="action-card-title">Build a local chapter</strong> <p class="action-card-body">Set up a local chapter or get deeply involved in an existing one to grow the movement in your area.</p> From d8cd09bce10bdbfe4742a3b05f71ec419597c518 Mon Sep 17 00:00:00 2001 From: Patricio <patriciovercesi@hotmail.com> Date: Tue, 31 Mar 2026 18:39:31 -0300 Subject: [PATCH 06/10] making the Action page the main one, making it the "get involved" page --- messages/en.json | 2 +- src/lib/components/Hero.svelte | 2 +- src/posts/action.md | 2 +- src/routes/header.svelte | 3 +-- 4 files changed, 4 insertions(+), 5 deletions(-) diff --git a/messages/en.json b/messages/en.json index ba93fed34..10a7ecd70 100644 --- a/messages/en.json +++ b/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", diff --git a/src/lib/components/Hero.svelte b/src/lib/components/Hero.svelte index e17c5e392..77347a22a 100644 --- a/src/lib/components/Hero.svelte +++ b/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> diff --git a/src/posts/action.md b/src/posts/action.md index cdac7ab16..03ef15a84 100644 --- a/src/posts/action.md +++ b/src/posts/action.md @@ -1,5 +1,5 @@ --- -title: Take Action +title: Get Involved description: Ways to help reduce AI risk. --- diff --git a/src/routes/header.svelte b/src/routes/header.svelte index 54cdceeef..903def445 100644 --- a/src/routes/header.svelte +++ b/src/routes/header.svelte @@ -16,13 +16,12 @@ <Navlink {inverted} href="/proposal">{m.header_proposal()}</Navlink> <Navlink {inverted} href="/communities">{m.header_events()}</Navlink> <Navlink {inverted} href="/faq">{m.header_faq()}</Navlink> - <Navlink {inverted} href="/action">{m.header_action()}</Navlink> <Navlink {inverted} href="/donate">{m.header_donate()}</Navlink> {#if enableBot} <Navlink {inverted} href="/chat">{botName}</Navlink> {/if} <!-- <NavLink href="/about">About</NavLink> --> - <Navlink {inverted} c2a href="/join">{m.header_join()}</Navlink> + <Navlink {inverted} c2a href="/action">{m.header_action()}</Navlink> <LanguageSwitcher {inverted} /> <Navlink {inverted} href="/search" ariaLabel="Search"><SearchIcon size="0.8em" /></Navlink> </Navbar> From d151707919947e2209639da4bd3ab02f3f77af88 Mon Sep 17 00:00:00 2001 From: Patricio <patriciovercesi@hotmail.com> Date: Tue, 31 Mar 2026 19:20:55 -0300 Subject: [PATCH 07/10] clarifying joining is volunteering+ --- messages/en.json | 4 ++-- src/posts/action.md | 10 +++++----- src/posts/join.md | 8 ++++---- src/routes/pdoom/+page.svelte | 2 +- 4 files changed, 12 insertions(+), 12 deletions(-) diff --git a/messages/en.json b/messages/en.json index 10a7ecd70..7819e0bf6 100644 --- a/messages/en.json +++ b/messages/en.json @@ -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", diff --git a/src/posts/action.md b/src/posts/action.md index 03ef15a84..a817dbdff 100644 --- a/src/posts/action.md +++ b/src/posts/action.md @@ -116,16 +116,16 @@ content: ` <p>Before diving in, take these quick steps to connect with the movement:</p> <div class="action-cards"> <a href="/join" class="action-card action-card-link"> -<div class="action-card-icon">🔗</div> -<strong class="action-card-title">Sign up</strong> -<p class="action-card-body">Sign up via our Join page so we can stay in touch and connect you with volunteer communities around the world.</p> +<div class="action-card-icon">🙋</div> +<strong class="action-card-title">Volunteer with us</strong> +<p class="action-card-body">Sign up as a volunteer so we can stay in touch and connect you with others around the world.</p> </a> <a href="https://discord.gg/T3YrWUJsJ5" class="action-card action-card-link"> <div class="action-card-icon">💬</div> <strong class="action-card-title">Join the Discord</strong> <p class="action-card-body">Join the Discord, where most of our day-to-day collaboration happens.</p> </a> -<a href="/communities#events" class="action-card action-card-link"> +<a href="https://luma.com/PauseAI" class="action-card action-card-link"> <div class="action-card-icon">📅</div> <strong class="action-card-title">Onboarding Call</strong> <p class="action-card-body">Find the next Community Onboarding Call in our event calendar to meet others who have just joined and hear more about what we do.</p> @@ -133,7 +133,7 @@ content: ` <a href="/communities" class="action-card action-card-link"> <div class="action-card-icon">🌍</div> <strong class="action-card-title">Find your community</strong> -<p class="action-card-body">Find your community and meet other local volunteers to find actions happening specifically in your country or city.</p> +<p class="action-card-body">Find your community and meet others to know what's happening specifically in your country or city.</p> </a> </div> ` diff --git a/src/posts/join.md b/src/posts/join.md index 174f4cfea..c91c4567c 100644 --- a/src/posts/join.md +++ b/src/posts/join.md @@ -1,6 +1,6 @@ --- -title: Join PauseAI -description: Sign up to join the PauseAI movement +title: Volunteer with PauseAI +description: Sign up to volunteer with PauseAI --- <script> @@ -77,7 +77,7 @@ description: Sign up to join the PauseAI movement This is our nuclear moment. Rapid AI advancement represents one of history's most consequential and dangerous technological shifts. We demand that politicians and companies pause AGI development until international safety agreements are established. -Join our global network standing for democratic oversight of AI. +Volunteer with our global network standing for democratic oversight of AI. PauseAI Global unites concerned citizens—scientists, parents, students, workers, and community leaders—who believe transformative technologies require public input before they progress beyond human control. Whether you can spare 5 minutes (sharing posts), an hour (flyering, writing letters), 5 hours (protests, meeting politicians) or 5 days weekly (strategy development), your voice matters. @@ -88,7 +88,7 @@ After signing up, join our onboarding session online or locally to learn about c ## After signing up Join one of our Member Community Welcome Meetings, or a local social event to find out more about PauseAI’s community: [Events](/communities#events). -If you want to get kick-started into action straight away, check out our [list of them](/action). +If you want to get kick-started into action straight away, check out our [Get Involved](/action) page. ## Stay Updated diff --git a/src/routes/pdoom/+page.svelte b/src/routes/pdoom/+page.svelte index 99a417d3b..9a156a853 100644 --- a/src/routes/pdoom/+page.svelte +++ b/src/routes/pdoom/+page.svelte @@ -26,5 +26,5 @@ <p> However high your p(doom) is, you probably agree that we should not allow AI companies to gamble with our future. - <Link href="/join">Join PauseAI</Link> to prevent them from doing so. + <Link href="/join">Volunteer with PauseAI</Link> to prevent them from doing so. </p> From 939eefb9677029214c7c09b593c0991eae2fc68a Mon Sep 17 00:00:00 2001 From: Patricio <patriciovercesi@hotmail.com> Date: Tue, 31 Mar 2026 19:24:12 -0300 Subject: [PATCH 08/10] fixing the "Connect" tab text --- src/posts/action.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/posts/action.md b/src/posts/action.md index a817dbdff..4de20d1ca 100644 --- a/src/posts/action.md +++ b/src/posts/action.md @@ -110,10 +110,10 @@ content: ` ` }, { -title: 'Connect', +title: 'Multiple Days', content: ` -<h3 class="toc-exclude">Connect</h3> -<p>Before diving in, take these quick steps to connect with the movement:</p> +<h3 class="toc-exclude">I have multiple days</h3> +<p>Ready to commit more of your time? Get plugged in and start making a real difference:</p> <div class="action-cards"> <a href="/join" class="action-card action-card-link"> <div class="action-card-icon">🙋</div> From 7d000faebb2b1fd39d276e62abc915079c98a773 Mon Sep 17 00:00:00 2001 From: Patricio <patriciovercesi@hotmail.com> Date: Tue, 31 Mar 2026 19:55:16 -0300 Subject: [PATCH 09/10] fix? --- src/lib/components/ActionCard.svelte | 10 ++++++---- src/lib/components/ActionCards.svelte | 2 +- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/src/lib/components/ActionCard.svelte b/src/lib/components/ActionCard.svelte index ae48e24e4..a58cd39af 100644 --- a/src/lib/components/ActionCard.svelte +++ b/src/lib/components/ActionCard.svelte @@ -1,4 +1,6 @@ <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 */ @@ -17,10 +19,10 @@ {/if} <h3 class="card-title toc-exclude">{title}</h3> <p class="card-body"> - <slot /> + <slot></slot> </p> {#if href && linkText} - <a class="card-cta" {href}>{linkText} →</a> + <Link class="card-cta" {href}>{linkText} →</Link> {/if} </div> @@ -82,7 +84,7 @@ text-decoration: underline; } - .card-cta { + :global(.card-cta) { color: var(--brand); font-weight: 600; font-size: 0.9rem; @@ -90,7 +92,7 @@ margin-top: auto; } - .card-cta:hover { + :global(.card-cta:hover) { text-decoration: underline; } </style> diff --git a/src/lib/components/ActionCards.svelte b/src/lib/components/ActionCards.svelte index 7d9135432..776fb8c15 100644 --- a/src/lib/components/ActionCards.svelte +++ b/src/lib/components/ActionCards.svelte @@ -1,5 +1,5 @@ <div class="action-cards-grid"> - <slot /> + <slot></slot> </div> <style> From 3094c24184d4748e3571642aa1894a5d4cc126aa Mon Sep 17 00:00:00 2001 From: Patricio <patriciovercesi@hotmail.com> Date: Wed, 1 Apr 2026 14:48:00 -0300 Subject: [PATCH 10/10] newsletter subscription action --- src/lib/components/Tabs.svelte | 68 ++++++++++++++++++++++++++++++++++ src/posts/action.md | 13 +++++++ 2 files changed, 81 insertions(+) diff --git a/src/lib/components/Tabs.svelte b/src/lib/components/Tabs.svelte index f60ab5118..f8a86b044 100644 --- a/src/lib/components/Tabs.svelte +++ b/src/lib/components/Tabs.svelte @@ -265,6 +265,74 @@ 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 { diff --git a/src/posts/action.md b/src/posts/action.md index 4de20d1ca..13b5c72cb 100644 --- a/src/posts/action.md +++ b/src/posts/action.md @@ -39,6 +39,19 @@ content: ` <strong class="action-card-title">Sign petitions</strong> <p class="action-card-body">Sign the petitions: <a href="/statement">PauseAI Statement</a>, <a href="/sayno">Say No To Superintelligent AI</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>.</p> </div> +</div> +<div class="newsletter-signup"> +<div class="newsletter-content"> +<h3 class="toc-exclude">Subscribe to our newsletter</h3> +<p>Stay updated on our efforts to advocate for AI safety.</p> +<form action="https://pauseai.substack.com/api/v1/free" method="POST" target="_blank"> +<div class="newsletter-input-group"> +<input type="email" name="email" placeholder="Your email" aria-label="Your email" required enterkeyhint="done" /> +<input type="hidden" name="source" value="pauseai_website" /> +<button type="submit">Subscribe</button> +</div> +</form> +</div> </div> ` },