From c0c0848cc958be13993c91701c31234a4ecfa8e7 Mon Sep 17 00:00:00 2001
From: Bryce Robertson <bryceerobertson@gmail.com>
Date: Fri, 8 Nov 2024 21:40:52 -0300
Subject: [PATCH 1/4] content etc

---
 app/components/Card/index.tsx              |  2 +-
 app/components/HelpGrid/index.tsx          |  2 +-
 app/components/HowCanIHelp/HelpItem.tsx    |  4 +-
 app/components/HowCanIHelp/HelpMethods.tsx | 11 ++--
 app/root.css                               | 14 ----
 app/routes/how-can-i-help.career.tsx       | 77 +++++++++++-----------
 app/routes/how-can-i-help.community.tsx    | 17 ++---
 app/routes/how-can-i-help.donate.tsx       | 28 +++-----
 app/routes/how-can-i-help.grassroots.tsx   |  7 +-
 app/routes/how-can-i-help.knowledge.tsx    | 22 +++----
 app/routes/how-can-i-help.volunteer.tsx    | 18 ++---
 package.json                               | 16 ++---
 12 files changed, 96 insertions(+), 122 deletions(-)

diff --git a/app/components/Card/index.tsx b/app/components/Card/index.tsx
index ec0000ab..17564bc0 100644
--- a/app/components/Card/index.tsx
+++ b/app/components/Card/index.tsx
@@ -28,7 +28,7 @@ export default function Card({
     <Button action={action} className={className}>
       <div className="card-icon">{icon({})}</div>
       <div className="card-content">
-        <p className="extra-large-bold padding-bottom-8">{title}</p>
+        <p className="large-bold padding-bottom-8">{title}</p>
         <p className="grey padding-bottom-16">{description}</p>
         {actionDesc && (
           <p className="default-bold teal-500">
diff --git a/app/components/HelpGrid/index.tsx b/app/components/HelpGrid/index.tsx
index 1111ad5d..e274cbd0 100644
--- a/app/components/HelpGrid/index.tsx
+++ b/app/components/HelpGrid/index.tsx
@@ -6,7 +6,7 @@ const helpItems = [
   {
     title: 'Start a career in AI safety',
     description:
-      'For both technical and non-technical roles in AI alignment, governance, and field-building',
+      'There are both technical and non-technical roles across research, policy, and field-building',
     impact: 'Highest direct impact',
     icon: Briefcase,
     action: helpUrl('career'),
diff --git a/app/components/HowCanIHelp/HelpItem.tsx b/app/components/HowCanIHelp/HelpItem.tsx
index d8e0cef9..bc4083f4 100644
--- a/app/components/HowCanIHelp/HelpItem.tsx
+++ b/app/components/HowCanIHelp/HelpItem.tsx
@@ -7,7 +7,7 @@ type HelpItemProps = {
   children: ReactNode
   links?: Link[]
   additionalInfo?: ReactNode
-  titleFont?: 'large-bold' | 'default-bold' | 'extra-large-bold'
+  titleFont?: 'large-bold' | 'default-bold' | 'large-bold'
   className?: string
 }
 const HelpItem = ({
@@ -16,7 +16,7 @@ const HelpItem = ({
   children,
   links,
   additionalInfo,
-  titleFont = 'extra-large-bold',
+  titleFont = 'large-bold',
   className = '',
 }: HelpItemProps) => {
   return (
diff --git a/app/components/HowCanIHelp/HelpMethods.tsx b/app/components/HowCanIHelp/HelpMethods.tsx
index 45e35aa5..8f7c41ef 100644
--- a/app/components/HowCanIHelp/HelpMethods.tsx
+++ b/app/components/HowCanIHelp/HelpMethods.tsx
@@ -58,15 +58,16 @@ const knowledgeDescriptions = {
   donate:
     'Knowing more about this topic will allow you to make wiser donation decisions, meaning your funds will have a greater impact',
   grassroots:
-    'The second-best way to increase your impact as an advocate is educating yourself on your own',
-  volunteer: 'The more you know about this topic, the further your volunteer efforts will go',
+    'The second-best way to increase your impact as an advocate is to continue educating yourself',
+  volunteer:
+    'Knowing more about this topic will allow you to better allocate your volunteer time, allowing you to have a greater impact',
   community:
     'Learning about AI safety equips you to effectively contribute to discussions and influence its development',
 }
 
 const communityDescriptions = {
   donate:
-    'Connecting with other advocates online or in person will help guide donation decisions, and can be motivating',
+    'Connecting with others in AI safety—either online or in person—will help guide donation decisions, and can be motivating',
   grassroots:
     'Connecting with other advocates online or in person will be supportive in your advocacy efforts',
   volunteer:
@@ -145,7 +146,7 @@ const HelpMethods = ({
         <CardSmall
           action={helpUrl('career')}
           title="Start a career in AI safety"
-          description="For both technical and non-technical roles in research, policy, and field-building"
+          description="There are both technical and non-technical roles across research, policy, and field-building"
           icon={Briefcase}
           className="col-4"
         />
@@ -163,7 +164,7 @@ const HelpMethods = ({
         <CardSmall
           action={helpUrl('volunteer')}
           title="Volunteer"
-          description="Help us build important AI safety infrastructure—all skill sets and levels of time commitment are wanted"
+          description="Help us build important AI safety infrastructure—all skill sets and levels of time commitment are valuable"
           icon={Hand}
           className="col-4"
         />
diff --git a/app/root.css b/app/root.css
index bffb8614..3b6054a9 100644
--- a/app/root.css
+++ b/app/root.css
@@ -117,13 +117,6 @@ h2 {
 
 /* typography classes */
 
-.extra-large {
-  font-size: 22px;
-  font-weight: 300;
-  line-height: 170%; /* 30.6px */
-  letter-spacing: -0.44px;
-}
-
 .large {
   font-size: 20px;
   font-weight: 300;
@@ -139,13 +132,6 @@ h2 {
   /* this is only for the body of articles, don't use it anywhere else */
 }
 
-.extra-large-bold {
-  font-size: 22px;
-  font-weight: 500;
-  line-height: 170%; /* 30.6px */
-  letter-spacing: -0.44px;
-}
-
 .large-bold {
   font-size: 20px;
   font-weight: 500;
diff --git a/app/routes/how-can-i-help.career.tsx b/app/routes/how-can-i-help.career.tsx
index 3640ccc6..07f3ba47 100644
--- a/app/routes/how-can-i-help.career.tsx
+++ b/app/routes/how-can-i-help.career.tsx
@@ -21,11 +21,11 @@ const ResearchPath = () => (
         <div className="col-6-alt">
           <p className="default-bold padding-bottom-16">What</p>
           <p className="grey default">
-            AI alignment research is the field dedicated to ensuring that advanced artificial
-            intelligence systems act in ways that are beneficial to humans and aligned with human
-            values and goals. It involves developing methods and principles to guide AI behavior so
-            that as these systems become more capable and autonomous, they continue to operate
-            safely and ethically within the intentions set by their human creators.
+            AI alignment research is the field dedicated to ensuring that advanced AI systems act in
+            ways that are beneficial to humans and aligned with human values and goals. It involves
+            developing methods and principles to guide AI behavior so that as these systems become
+            more capable and autonomous, they continue to operate safely and ethically within the
+            intentions set by their human creators.
           </p>
         </div>
         <div className="col-6-alt">
@@ -34,16 +34,15 @@ const ResearchPath = () => (
             To ensure humanity benefits from advanced AI and mitigates catastrophic risks, we must
             first solve the technical challenge of AI alignment through dedicated research, and then
             collaborate globally to carefully deploy solutions. While experts believe alignment is
-            solvable, it remains a complex problem that demands significant high-quality
-            intellectual talent.
+            solvable, it remains a complex problem that demands significant intellectual talent.
           </p>
         </div>
         <div className="col-6-alt">
           <p className="default-bold padding-bottom-16">Where AI alignment researchers work</p>
           <p className="grey default padding-bottom-24">
             AI alignment researchers typically work at non-profit organizations dedicated to AI
-            safety and alignment; in academia (i.e. universities and academic institutions);
-            independently; or on industry safety teams*.
+            safety and alignment, in academia (i.e. universities and academic institutions),
+            independently, or on industry safety teams*.
           </p>
           <p className="grey small">
             <span className="small-bold">*Note:</span> Beware of the risk of joining industry
@@ -65,7 +64,7 @@ const ResearchPath = () => (
     <div className="padding-bottom-56">
       <div className="flexbox padding-bottom-56">
         <h2 className="col-6">Interested in pursuing this career path?</h2>
-        <p className="col-6 extra-large">
+        <p className="col-6 large">
           Take the following steps to further assess your fit and learn how to make the transition:
         </p>
       </div>
@@ -140,9 +139,9 @@ const ResearchPath = () => (
       <DropDown title="I’m interested in non-technical or supporting roles in AI alignment">
         <p className="padding-bottom-40 col-6 grey">
           There are many roles that support the work of AI alignment researchers, and having
-          high-performing people in these roles is crucial. In a research organization around half
-          of the staff will be doing other tasks essential for the organization to perform at its
-          best and have an impact. Some of these roles include:
+          high-performing people in these positions is crucial. In a research organization around
+          half of the staff will be doing non-research tasks essential for the organization to
+          perform at its best and have an impact. Some of these roles include:
         </p>
         <HelpItem
           title="Operations management at an AI safety research organization"
@@ -186,7 +185,8 @@ const ResearchPath = () => (
         >
           This involves managing administrative tasks to enhance this person's productivity.
           Responsibilities include scheduling meetings, handling correspondence, coordinating
-          travel, organizing events, and ensuring they can focus on impactful AI safety efforts.
+          travel, organizing events, and otherwise ensuring they can focus on impactful AI safety
+          efforts.
         </HelpItem>
       </DropDown>
     </div>
@@ -239,7 +239,6 @@ const GovernancePath = () => (
             responsible AI development.
           </p>
         </div>
-        {/* Melissa is still editing the following three paragraphs */}
         <div className="col-6-alt">
           <p className="default-bold padding-bottom-16">Why this is important</p>
           <p className="grey default">
@@ -252,13 +251,13 @@ const GovernancePath = () => (
         </div>
         <div className="col-6-alt">
           <p className="default-bold padding-bottom-16">
-            Where professionanls in AI governance usually work
+            Where professionals in AI governance usually work
           </p>
           <p className="grey default">
             AI governance professionals work in settings like government agencies, international
             organizations, regulatory bodies, think tanks, research institutions, and private
-            companies, developing policies, analyzing risks, and shaping governance frameworks for
-            the safe use of AI technologies.
+            companies. They develop policies, analyze risks, and shape governance frameworks for the
+            safe development and use of AI technologies.
           </p>
         </div>
         <div className="col-6-alt">
@@ -293,7 +292,7 @@ const GovernancePath = () => (
       >
         <p className="padding-bottom-16">The review takes about one hour to read and addresses:</p>
         <ul>
-          <li>The 6 categories within AI governance</li>
+          <li>The six categories within AI governance</li>
           <li>How to predict your fit</li>
           <li>How to enter or transition into this career</li>
           <li>Where AI governance work is typically done</li>
@@ -338,10 +337,10 @@ const GovernancePath = () => (
           },
         ]}
       >
-        Many roles that appear to advance safety may actually end up advancing AI capabilities, and
+        Many roles that appear to advance AI safety may actually end up advancing capabilities, and
         thus cause harm. We recommend learning more about AI safety—particularly the alignment
-        problem—and carefully considering that a role or action will make AI safer before pursuing
-        it.
+        problem—and carefully considering whether a role or action will make AI safer before
+        pursuing it.
       </HelpItem>
     </div>
     {/* TESTIMONIALS TEMPORARILY REMOVED
@@ -386,18 +385,17 @@ const FieldBuildingPath = () => (
           <p className="default-bold padding-bottom-16">What</p>
           <p className="grey default">
             AI safety field-building involves attracting talent and resources to the field, raising
-            awareness about AI safety issues, educating people to increase attention toward
-            developing safe AI, and building the AI safety community.
+            awareness about AI safety issues, running upskilling programs and resources, and
+            building the AI safety community.
           </p>
         </div>
         <div className="col-6-alt">
           <p className="default-bold padding-bottom-16">Why this is important</p>
           <p className="grey default">
             The AI safety field is still in its early stages, with significant room for growth and
-            maturation. It is important to capitalize on this potential because it may be the
-            deciding factor between successfully solving the alignment problem and mitigating AI
-            risk through global coordination, or not. This growth will largely result from
-            field-building efforts specifically.
+            maturation. A large and mature field will be more likely to successfully solve the
+            alignment problem and mitigate AI risk through global coordination, and achieving this
+            will largely rest on field-building efforts.
           </p>
         </div>
         <div className="col-6-alt">
@@ -406,8 +404,8 @@ const FieldBuildingPath = () => (
             Field-building may be the way to go if neither alignment research nor governance appeals
             to you or fits your skillset. You may be a particularly good fit if you have a strong
             sense of agency or leadership, or you are creative. That said, a large variety of roles
-            exist within field-building, so it’s likely that you can adapt your skillset—whatever it
-            is—to a role.
+            exist within field-building, so it’s likely that you can adapt whatever skillset you
+            have to be useful.
           </p>
         </div>
       </div>
@@ -445,7 +443,7 @@ const FieldBuildingPath = () => (
         ]}
       >
         There are many philanthropists interested in donating millions of dollars to AI safety—but
-        there currently aren't enough grantmakers able to vet funding proposals. Because a randomly
+        there currently aren't enough grantmakers to vet funding proposals. Because a randomly
         chosen proposal has little expected impact, grantmakers can have a large impact by helping
         philanthropists distinguish promising projects in AI safety from less promising ones.
       </HelpItem>
@@ -472,9 +470,9 @@ const FieldBuildingPath = () => (
         <HelpItem title="Supporting roles" className="padding-bottom-40">
           There are many roles that support the work of AI alignment researchers or people in AI
           governance, and having high-performing people in these roles is crucial. In a research
-          organization, for example, around half of the staff will be doing other tasks essential
-          for the organization to perform at its best and have an impact. Some of the most common
-          supporting roles in AI safety include:
+          organization, for example, around half of the staff will be doing non-research tasks
+          essential for the organization to perform at its best and have an impact. Some of the most
+          common supporting roles in AI safety include:
         </HelpItem>
         <HelpItem
           titleFont="default-bold"
@@ -511,7 +509,7 @@ const FieldBuildingPath = () => (
 
         <HelpItem
           titleFont="default-bold"
-          title="Being an executive assistant to someone doing important work on safety and governance"
+          title="Being an executive assistant to someone doing important work on AI safety and governance"
           className="padding-bottom-40"
           links={[
             {
@@ -561,9 +559,8 @@ const FieldBuildingPath = () => (
     <div className="padding-bottom-80">
       <div className="flexbox padding-bottom-56">
         <h2 className="col-6">Interested in pursuing this career path?</h2>
-        <p className="col-6 extra-large">
-          Take the following steps to (1) learn more and further assess your fit; (2) learn how to
-          make the transition
+        <p className="col-6 large">
+          Take the following steps to further assess your fit and learn how to make the transition:
         </p>
       </div>
       <HelpItem
@@ -606,8 +603,8 @@ const FieldBuildingPath = () => (
       >
         Many roles that appear to advance safety may actually end up advancing AI capabilities, and
         thus cause harm. We recommend learning more about AI safety—particularly the alignment
-        problem—and carefully considering that a role or action will make AI safer before pursuing
-        it.
+        problem—and carefully considering whether a role or action will make AI safer before
+        pursuing it.
       </HelpItem>
     </div>
 
diff --git a/app/routes/how-can-i-help.community.tsx b/app/routes/how-can-i-help.community.tsx
index 42d5ec91..6f313159 100644
--- a/app/routes/how-can-i-help.community.tsx
+++ b/app/routes/how-can-i-help.community.tsx
@@ -12,8 +12,8 @@ const InPerson = () => (
       <div className="padding-bottom-40">
         <h2 className="teal-500 padding-bottom-40">In-person communities</h2>
         <p className="grey default col-6">
-          In-person communities provide general purpose support, networking, and socializing for
-          anyone interested in contributing to AI safety.
+          In-person communities provide general support, networking, and socializing for anyone
+          interested in contributing to AI safety.
         </p>
       </div>
       <HelpItem
@@ -97,16 +97,17 @@ const Online = () => (
       title="Focused on one activity"
       links={[
         {
-          title: 'Join a PauseAI event',
-          action: 'https://pauseai.info/events',
+          title: 'PauseAI Discord',
+          action: 'https://discord.gg/pauseai-1100491867675709580',
         },
       ]}
       className="padding-bottom-40"
     >
       <p className="grey default">
-        You can volunteer for projects and attend protests. People are divided regarding whether
-        protests or a pause in AI development are a good idea, but if it's something you want to do,
-        PauseAI is a reliable organization in that space.
+        Some communities are largely dedicated to one particular activity, such as running volunteer
+        projects or organizing protests. People are divided regarding whether protests are a good
+        idea, but if it's something you want to do, PauseAI is a reliable organization in that
+        space.
       </p>
     </HelpItem>
 
@@ -121,7 +122,7 @@ const Online = () => (
       ]}
     >
       <p className="grey default">
-        Deep strategic and technical discussions regarding AI alignment and AI governance.
+        Deep strategic and technical discussions regarding AI alignment and governance.
       </p>
     </HelpItem>
   </>
diff --git a/app/routes/how-can-i-help.donate.tsx b/app/routes/how-can-i-help.donate.tsx
index 79151aed..22b42979 100644
--- a/app/routes/how-can-i-help.donate.tsx
+++ b/app/routes/how-can-i-help.donate.tsx
@@ -18,8 +18,8 @@ export default function Donate() {
             <p className="grey default">
               All donations are helpful. A kind-hearted person with $10 extra a month, a mid-salary
               professional wishing to donate 10% of their income, or a well-off philanthropist
-              looking to create major change for good can all financially contribute to advance this
-              effort.
+              looking to create major change for good can all make a useful contribution to
+              advancing this effort.
             </p>
           </div>
           <div className="col-6-alt">
@@ -43,8 +43,7 @@ export default function Donate() {
             {
               tag: 'Top recommendation',
               title: 'Long-Term Future Fund',
-              action:
-                'https://www.givingwhatwecan.org/charities/long-term-future-fund?utm_source=eafunds',
+              action: 'https://www.givingwhatwecan.org/charities/long-term-future-fund',
             },
           ]}
           additionalInfo={
@@ -78,20 +77,11 @@ export default function Donate() {
           className="padding-bottom-40"
           links={[
             {
-              tag: 'Top recommendation',
-              title: 'Long-Term Future Fund',
+              title: 'Shallow review of live agendas in alignment & safety',
               action:
-                'https://www.givingwhatwecan.org/charities/long-term-future-fund?utm_source=eafunds',
+                'https://www.lesswrong.com/posts/zaaGsFBeDTpCsYHef/shallow-review-of-live-agendas-in-alignment-and-safety',
             },
           ]}
-          additionalInfo={
-            <>
-              Or, browse our{' '}
-              <a href="https://www.aisafety.com/donation-guide" className="small-bold teal-500">
-                other grantmaker recommendations
-              </a>
-            </>
-          }
         >
           <p className="padding-bottom-16">
             If you have insights into the key obstacles or opportunities that could make a big
@@ -99,10 +89,10 @@ export default function Donate() {
             (like a plane ticket to a conference) for impactful individuals or small organizations.
           </p>
           <p>
-            Donating directly can bypass traditional grantmaking, provide immediate impact, and
-            allow you to share valuable insights. It diversifies funding sources, reduces reliance
-            on large donors, and supports those who would otherwise face a lengthy grant application
-            process.
+            Donating directly bypasses traditional grantmaking, providing immediate impact and
+            allowing you to share valuable insights. It diversifies funding sources, reduces
+            reliance on large donors, and supports those who may otherwise face a lengthy grant
+            application process.
           </p>
         </HelpItem>
 
diff --git a/app/routes/how-can-i-help.grassroots.tsx b/app/routes/how-can-i-help.grassroots.tsx
index 1a6bc8ac..9eee630c 100644
--- a/app/routes/how-can-i-help.grassroots.tsx
+++ b/app/routes/how-can-i-help.grassroots.tsx
@@ -62,7 +62,7 @@ const WhatYouCanDo = () => (
         }
       >
         <p>
-          We recommend sharing A.I. - &ldquo;Humanity's Final Invention?&rdquo;, which gives an
+          We recommend sharing &ldquo;A.I. - Humanity's Final Invention?&rdquo;, which gives an
           accessible overview of the topic of AI and existential risk
         </p>
       </HelpItem>
@@ -139,8 +139,9 @@ const WhatYouCanDo = () => (
         }
       >
         <p>
-          Add your signature next to Elon Musk, Steve Wozniak, and “godfather of AI” Yoshua Bengio
-          in the most well-known AI safety petition, “Pause Giant AI Experiments: An Open Letter”
+          Add your signature next to that of Elon Musk, Steve Wozniak, and “godfather of AI” Yoshua
+          Bengio in the most well-known AI safety petition, “Pause Giant AI Experiments: An Open
+          Letter”
         </p>
       </HelpItem>
     </div>
diff --git a/app/routes/how-can-i-help.knowledge.tsx b/app/routes/how-can-i-help.knowledge.tsx
index c3075c25..8b590e9e 100644
--- a/app/routes/how-can-i-help.knowledge.tsx
+++ b/app/routes/how-can-i-help.knowledge.tsx
@@ -40,8 +40,8 @@ const NewToAISafety = () => (
         ]}
       >
         <p className="grey default padding-bottom-16">
-          Our website’s “Intro to AI safety” micro-course includes several short readings that act
-          as a comprehensive introduction the topic of AI safety.
+          Our “Intro to AI safety” micro-course is comprised of a collection of short readings that
+          serve as a comprehensive introduction to the topic of AI safety.
         </p>
         <p className="grey default">
           Our Intro to AI safety video playlist illustrates many of the most important points about
@@ -72,9 +72,9 @@ const NewToAISafety = () => (
         }
       >
         <p className="grey default">
-          We recommend Dwarkesh Patel’s interview with Paul Christiano, a leading researcher in AI
-          alignment and safety. The interview provides an introduction to AI risk and discusses many
-          important AI safety concepts.
+          We recommend Dwarkesh Patel’s interview with Paul Christiano, a leading alignment
+          researcher. The interview provides an introduction to AI risk and discusses many important
+          AI safety concepts.
         </p>
       </HelpItem>
     </div>
@@ -127,9 +127,8 @@ const Dropdowns = () => (
         ]}
       >
         We recommend the YouTube channel Robert Miles AI Safety, which presents complex AI safety
-        concepts in an accessible format to foster understanding and awareness about the ethical and
-        safety considerations in AI development. (Rob is also the founder of this site,
-        AISafety.info).
+        concepts in an accessible format to foster awareness and understanding of the ethical and
+        safety considerations in AI development. Note: Rob is also the founder of this site.
       </HelpItem>
 
       <HelpItem
@@ -138,7 +137,7 @@ const Dropdowns = () => (
         links={[
           {
             tag: 'Top recommendation',
-            title: '80,000 Hours',
+            title: '80,000 Hours Podcast',
             action: 'https://80000hours.org/podcast/',
           },
         ]}
@@ -187,8 +186,7 @@ const Dropdowns = () => (
           },
         ]}
       >
-        We recommend following AGI Safety Core, a group of thinkers in AI that post about AI safety
-        and alignment.
+        We recommend following AGI Safety Core, a group of thinkers in AI that post about AI safety.
       </HelpItem>
     </DropDown>
   </div>
@@ -270,7 +268,7 @@ const DiveDeeper = () => (
           {
             tag: 'Most widely-used',
             title: 'LessWrong',
-            action: 'https://www.lesswrong.com/',
+            action: 'https://www.lesswrong.com/tag/ai',
           },
           {
             title: 'Alignment Forum',
diff --git a/app/routes/how-can-i-help.volunteer.tsx b/app/routes/how-can-i-help.volunteer.tsx
index bf978a03..47d09383 100644
--- a/app/routes/how-can-i-help.volunteer.tsx
+++ b/app/routes/how-can-i-help.volunteer.tsx
@@ -41,8 +41,8 @@ const Dropdowns = () => (
       <div className="col-7-alt">
         <p>
           About 90% of volunteer work is online, and involves field-building through communication,
-          advocacy, or software development; providing feedback on research; or building or
-          organizing online groups. In-person volunteer work would entail organizing meetups,
+          advocacy, or software development; providing feedback on research; or establishing or
+          organizing online groups. In-person volunteer work may entail organizing meetups,
           protests, or retreats.
         </p>
       </div>
@@ -51,7 +51,7 @@ const Dropdowns = () => (
       <div className="col-7-alt">
         <p>
           Typically volunteers commit up to several hours a week for at least a few months. However,
-          volunteers that accomplished one 15 minute task a week, consistently, have also been very
+          volunteers that accomplish one 15-minute task a week, consistently, can also be very
           helpful. What’s most important is that you understand how much you are able to commit
           upfront, and follow through with that commitment.
         </p>
@@ -81,7 +81,7 @@ const Options = () => (
         >
           <div>
             <p className="padding-bottom-24">
-              Get personalized volunteering advice in a thirty minute or one hour video call. We
+              Get personalized volunteering advice in a 30-minute or one hour video call. We
               recommend booking both!
             </p>
             <div>
@@ -117,9 +117,9 @@ const Options = () => (
         >
           <p>
             {' '}
-            Alignment Ecosystem Development (AED) is an organization and community of volunteers
-            supporting online AI safety field-building projects like AISafety.com and AI Safety
-            Quest. You can join an existing project or pitch your own to recruit help.
+            Alignment Ecosystem Development (AED) is a nonprofit organization and community of
+            volunteers supporting online AI safety field-building projects like AISafety.com and AI
+            Safety Quest. You can join an existing project or pitch your own to recruit help.
           </p>
         </HelpItem>
 
@@ -133,8 +133,8 @@ const Options = () => (
           ]}
         >
           <p>
-            Browse our list of online AI safety field-building projects. Email the contact person
-            expressing your interest.
+            Browse our list of online AI safety field-building projects and email the contact person
+            expressing your interest
           </p>
         </HelpItem>
       </div>
diff --git a/package.json b/package.json
index e9c69ebe..22c59941 100644
--- a/package.json
+++ b/package.json
@@ -3,10 +3,10 @@
   "description": "",
   "license": "MIT",
   "dependencies": {
-    "@remix-run/cloudflare": "^2.6.0",
-    "@remix-run/cloudflare-workers": "^2.6.0",
-    "@remix-run/css-bundle": "^1.19.3",
-    "@remix-run/react": "^2.6.0",
+    "@remix-run/cloudflare-workers": "^2.13.1",
+    "@remix-run/cloudflare": "^2.13.1",
+    "@remix-run/css-bundle": "^2.13.1",
+    "@remix-run/react": "^2.13.1",
     "client-zip": "^2.4.5",
     "copy-to-clipboard": "^3.3.3",
     "isbot": "^4",
@@ -17,12 +17,12 @@
     "react": "^18.2.0",
     "react-auto-height": "^1.2.1",
     "react-dom": "^18.2.0",
-    "remix": "^2.6.0"
+    "remix": "^2.13.1"
   },
   "devDependencies": {
     "@cloudflare/workers-types": "^4.20240129.0",
-    "@remix-run/dev": "^2.6.0",
-    "@remix-run/testing": "^2.6.0",
+    "@remix-run/dev": "^2.13.1",
+    "@remix-run/testing": "^2.13.1",
     "@storybook/addon-designs": "^7.0.9",
     "@storybook/addon-essentials": "^7.6.8",
     "@storybook/addon-interactions": "^7.6.8",
@@ -58,7 +58,7 @@
     "storybook": "^7.6.8",
     "ts-jest": "^29.1.2",
     "ts-node": "^10.9.2",
-    "typescript": "~5.3.3",
+    "typescript": "^5.3.3",
     "vite": "^5.0.8",
     "wrangler": "^3.24.0"
   },

From 25564cb10105ec51c6a7bc48a40bc7261c54ac99 Mon Sep 17 00:00:00 2001
From: Bryce Robertson <bryceerobertson@gmail.com>
Date: Sat, 9 Nov 2024 19:31:09 -0300
Subject: [PATCH 2/4] styling etc

---
 app/components/Card/card.css                  |  15 +-
 app/components/DropDown/dropdown.css          |  14 +-
 app/components/HowCanIHelp/Base.tsx           |   2 +-
 ...tgoryCarousel.tsx => CategoryCarousel.tsx} |   0
 app/components/HowCanIHelp/HelpItem.tsx       |   8 +-
 app/components/HowCanIHelp/HelpMethods.tsx    | 164 ++++++++++++------
 .../HowCanIHelp/category-carousel.css         |  21 ++-
 app/components/HowCanIHelp/howcanihelp.css    |   2 +-
 app/components/LinkCard/index.tsx             |   8 +-
 app/components/LinkCard/linkcard.css          |   9 +-
 .../VideoThumbnail/videothumbnail.tsx         |  16 +-
 app/root.css                                  |  14 +-
 app/routes/how-can-i-help.career.tsx          |  27 +--
 app/routes/how-can-i-help.community.tsx       |   6 +-
 app/routes/how-can-i-help.donate.tsx          |   8 +-
 app/routes/how-can-i-help.grassroots.tsx      |  11 +-
 app/routes/how-can-i-help.knowledge.tsx       |  34 ++--
 app/routes/how-can-i-help.volunteer.tsx       |   8 +-
 package-lock.json                             |  24 +--
 19 files changed, 253 insertions(+), 138 deletions(-)
 rename app/components/HowCanIHelp/{CatgoryCarousel.tsx => CategoryCarousel.tsx} (100%)

diff --git a/app/components/Card/card.css b/app/components/Card/card.css
index 56a3efd9..5cf5a141 100644
--- a/app/components/Card/card.css
+++ b/app/components/Card/card.css
@@ -1,6 +1,6 @@
 .card {
-  height: 328px;
-  padding: var(--spacing-24);
+  height: 320px;
+  padding: var(--spacing-16);
   display: flex;
   background-color: var(--colors-white);
   border-radius: var(--border-radius);
@@ -15,6 +15,15 @@
   display: flex;
   flex-direction: column;
   padding: var(--spacing-32);
+  gap: var(--spacing-4);
+}
+
+.card-content > .default-bold {
+  margin-bottom: var(--spacing-8);
+}
+
+.card-content > .small {
+  margin-top: var(--spacing-4);
 }
 
 .card-icon {
@@ -24,7 +33,7 @@
   align-items: center;
   justify-content: center;
   border-radius: var(--border-radius);
-  width: 30%;
+  width: 38%;
   flex-shrink: 0;
 }
 
diff --git a/app/components/DropDown/dropdown.css b/app/components/DropDown/dropdown.css
index c3cd0452..670bf18a 100644
--- a/app/components/DropDown/dropdown.css
+++ b/app/components/DropDown/dropdown.css
@@ -22,16 +22,24 @@
 .drop-down-content {
   max-height: 0;
   overflow: hidden;
-  transition: max-height 0.3s ease-out;
+  transition: max-height 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  padding-bottom: 0;
+  transition:
+    max-height 0.2s cubic-bezier(0.4, 0, 0.2, 1),
+    padding 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .drop-down-content.open {
   max-height: 2000px;
-  padding-bottom: var(--spacing-40);
+  padding-bottom: var(--spacing-32);
+}
+
+.drop-down-inner {
+  padding-bottom: var(--spacing-32);
 }
 
 .drop-down-chevron {
-  transition: transform 0.3s ease-out;
+  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   transform: rotate(90deg);
 }
 
diff --git a/app/components/HowCanIHelp/Base.tsx b/app/components/HowCanIHelp/Base.tsx
index 11f72d42..e5f363b6 100644
--- a/app/components/HowCanIHelp/Base.tsx
+++ b/app/components/HowCanIHelp/Base.tsx
@@ -18,7 +18,7 @@ export default function Base({title, current, children, ...props}: BaseProps) {
         </div>
 
         <div>
-          <h1 className="teal-500 padding-bottom-56">{title}</h1>
+          <h1 className="teal-500 padding-bottom-64">{title}</h1>
 
           {children}
 
diff --git a/app/components/HowCanIHelp/CatgoryCarousel.tsx b/app/components/HowCanIHelp/CategoryCarousel.tsx
similarity index 100%
rename from app/components/HowCanIHelp/CatgoryCarousel.tsx
rename to app/components/HowCanIHelp/CategoryCarousel.tsx
diff --git a/app/components/HowCanIHelp/HelpItem.tsx b/app/components/HowCanIHelp/HelpItem.tsx
index bc4083f4..0eac1eb5 100644
--- a/app/components/HowCanIHelp/HelpItem.tsx
+++ b/app/components/HowCanIHelp/HelpItem.tsx
@@ -10,6 +10,7 @@ type HelpItemProps = {
   titleFont?: 'large-bold' | 'default-bold' | 'large-bold'
   className?: string
 }
+
 const HelpItem = ({
   title,
   tag,
@@ -31,14 +32,17 @@ const HelpItem = ({
         <p className="grey default"> {children} </p>
       </div>
       <div className="col-6">
-        {links?.map((link) => (
+        {links?.map((link, index) => (
           <div key={link.title} className="padding-bottom-16">
             <LinkCard action={link.action || '#'} {...link} />
-            {additionalInfo && <p className="small grey padding-top-16">{additionalInfo}</p>}
+            {index === links.length - 1 && additionalInfo && (
+              <p className="small grey padding-top-16">{additionalInfo}</p>
+            )}
           </div>
         ))}
       </div>
     </div>
   )
 }
+
 export default HelpItem
diff --git a/app/components/HowCanIHelp/HelpMethods.tsx b/app/components/HowCanIHelp/HelpMethods.tsx
index 8f7c41ef..1721ca54 100644
--- a/app/components/HowCanIHelp/HelpMethods.tsx
+++ b/app/components/HowCanIHelp/HelpMethods.tsx
@@ -127,58 +127,118 @@ const HelpMethods = ({
   current,
   footerTitle,
   footerSubheader = 'Or, explore more ways to help directly',
-}: HelpMethodsProps) => (
-  <div className="help-footer">
-    <h2 className="teal-500 padding-bottom-56">{footerTitle || (current && titles[current])}</h2>
-    <div className="flexbox padding-bottom-80">
-      <KnowledgeCard
-        current={current}
-        className={`col-6 ${current === 'grassroots' || current === 'volunteer' || current === 'donate' ? 'order-2' : ''}`}
-      />
-      <CommunityCard
-        current={current}
-        className={`col-6 ${current === 'grassroots' || current === 'volunteer' || current === 'donate' ? 'order-1' : ''}`}
-      />
-    </div>
-    <p className="large-bold padding-bottom-40">{footerSubheader}</p>
-    <div className="flexbox">
-      {current !== 'career' && (
-        <CardSmall
-          action={helpUrl('career')}
-          title="Start a career in AI safety"
-          description="There are both technical and non-technical roles across research, policy, and field-building"
-          icon={Briefcase}
-          className="col-4"
-        />
-      )}
-      {current !== 'donate' && (
-        <CardSmall
-          action={helpUrl('donate')}
-          title="Donate"
-          description="The AI safety field is constrained by funding—financial help is critical at this moment"
-          icon={PiggyBank}
-          className="col-4"
-        />
-      )}
-      {current !== 'volunteer' && (
-        <CardSmall
-          action={helpUrl('volunteer')}
-          title="Volunteer"
-          description="Help us build important AI safety infrastructure—all skill sets and levels of time commitment are valuable"
-          icon={Hand}
-          className="col-4"
-        />
-      )}
-      {current !== 'grassroots' && (
-        <CardSmall
-          action={helpUrl('grassroots')}
-          title="Spread the word & grassroots activism"
-          description="For anyone—help us spread the word about this issue"
-          icon={Megaphone}
-          className="col-4"
-        />
+}: HelpMethodsProps) => {
+  const showKnowledgeCard = current !== 'knowledge'
+  const showCommunityCard = current !== 'community'
+  const singleCardLayout =
+    (!showKnowledgeCard && showCommunityCard) || (showKnowledgeCard && !showCommunityCard)
+
+  return (
+    <div className="help-footer">
+      <div className="flexbox padding-bottom-80">
+        <div
+          className={`${singleCardLayout ? 'col-6' : 'col-12'} ${singleCardLayout ? 'flexbox center-align' : ''}`}
+        >
+          <h2 className="teal-500">{footerTitle || (current && titles[current])}</h2>
+        </div>
+        {singleCardLayout && (
+          <div className="col-6">
+            {showKnowledgeCard && <KnowledgeCard current={current} className="col-6" />}
+            {showCommunityCard && <CommunityCard current={current} className="col-6" />}
+          </div>
+        )}
+      </div>
+
+      {!singleCardLayout && (
+        <div className="flexbox padding-bottom-80">
+          <KnowledgeCard
+            current={current}
+            className={`col-6 ${current === 'grassroots' || current === 'volunteer' || current === 'donate' ? 'order-2' : ''}`}
+          />
+          <CommunityCard
+            current={current}
+            className={`col-6 ${current === 'grassroots' || current === 'volunteer' || current === 'donate' ? 'order-1' : ''}`}
+          />
+        </div>
       )}
+
+      <p className="large-bold padding-bottom-40">{footerSubheader}</p>
+
+      <div className={`flexbox ${singleCardLayout ? 'wrap' : ''}`}>
+        {current !== 'career' &&
+          (singleCardLayout ? (
+            <Card
+              action={helpUrl('career')}
+              title="Start a career in AI safety"
+              description="There are both technical and non-technical roles across research, policy, and field-building"
+              icon={Briefcase}
+              className={`col-6`}
+            />
+          ) : (
+            <CardSmall
+              action={helpUrl('career')}
+              title="Start a career in AI safety"
+              description="There are both technical and non-technical roles across research, policy, and field-building"
+              icon={Briefcase}
+              className="col-4"
+            />
+          ))}
+        {current !== 'donate' &&
+          (singleCardLayout ? (
+            <Card
+              action={helpUrl('donate')}
+              title="Donate"
+              description="The AI safety field is constrained by funding—financial help is critical at this moment"
+              icon={PiggyBank}
+              className={`col-6`}
+            />
+          ) : (
+            <CardSmall
+              action={helpUrl('donate')}
+              title="Donate"
+              description="The AI safety field is constrained by funding—financial help is critical at this moment"
+              icon={PiggyBank}
+              className="col-4"
+            />
+          ))}
+        {current !== 'volunteer' &&
+          (singleCardLayout ? (
+            <Card
+              action={helpUrl('volunteer')}
+              title="Volunteer"
+              description="Help us build important AI safety infrastructure—all skill sets and levels of time commitment are valuable"
+              icon={Hand}
+              className="col-6"
+            />
+          ) : (
+            <CardSmall
+              action={helpUrl('volunteer')}
+              title="Volunteer"
+              description="Help us build important AI safety infrastructure—all skill sets and levels of time commitment are valuable"
+              icon={Hand}
+              className="col-4"
+            />
+          ))}
+        {current !== 'grassroots' &&
+          (singleCardLayout ? (
+            <Card
+              action={helpUrl('grassroots')}
+              title="Spread the word & grassroots activism"
+              description="For anyone—help us spread the word about this issue"
+              icon={Megaphone}
+              className="col-6"
+            />
+          ) : (
+            <CardSmall
+              action={helpUrl('grassroots')}
+              title="Spread the word & grassroots activism"
+              description="For anyone—help us spread the word about this issue"
+              icon={Megaphone}
+              className="col-4"
+            />
+          ))}
+      </div>
     </div>
-  </div>
-)
+  )
+}
 export default HelpMethods
diff --git a/app/components/HowCanIHelp/category-carousel.css b/app/components/HowCanIHelp/category-carousel.css
index 2e59467c..c54f1bbb 100644
--- a/app/components/HowCanIHelp/category-carousel.css
+++ b/app/components/HowCanIHelp/category-carousel.css
@@ -16,8 +16,27 @@
   gap: var(--spacing-8);
 }
 
+.carousel .navigation button {
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--colors-cool-grey-200);
+  border-radius: var(--border-radius);
+}
+
+.carousel .navigation button:not(:disabled):hover {
+  border-color: var(--colors-teal-200);
+}
+
+.carousel .navigation button:disabled {
+  opacity: 0.5;
+}
+
 .carousel h2 {
-  max-width: 550px;
+  max-width: 650px;
 }
 
 .carousel .items {
diff --git a/app/components/HowCanIHelp/howcanihelp.css b/app/components/HowCanIHelp/howcanihelp.css
index c6720a3c..dfccc39d 100644
--- a/app/components/HowCanIHelp/howcanihelp.css
+++ b/app/components/HowCanIHelp/howcanihelp.css
@@ -1,5 +1,5 @@
 .help-footer {
   border-top: 1px solid var(--colors-cool-grey-200);
-  padding-top: var(--spacing-80);
+  padding-top: var(--spacing-104);
   margin-top: var(--spacing-104);
 }
diff --git a/app/components/LinkCard/index.tsx b/app/components/LinkCard/index.tsx
index 8ad9f6ea..c078ed61 100644
--- a/app/components/LinkCard/index.tsx
+++ b/app/components/LinkCard/index.tsx
@@ -8,14 +8,18 @@ export type Link = {
   image?: ReactNode
   tag?: string
   action?: string
+  isVideo?: boolean
 }
 
 export type LinkCardProps = Link & {
   className?: string
 }
 
-const LinkCard: React.FC<LinkCardProps> = ({title, image, tag, action, className}) => (
-  <Button action={action} className={`link-card ${className}`}>
+const LinkCard: React.FC<LinkCardProps> = ({title, image, tag, action, isVideo, className}) => (
+  <Button
+    action={action}
+    className={`link-card ${className} ${isVideo ? 'video-padding' : 'padding-32'}`}
+  >
     <p className="default-bold flexbox gap-16 center-align">
       {image && <span className="image">{image}</span>}
       <div className="flexbox flex-column gap-8">
diff --git a/app/components/LinkCard/linkcard.css b/app/components/LinkCard/linkcard.css
index 36dbb52a..badd91cb 100644
--- a/app/components/LinkCard/linkcard.css
+++ b/app/components/LinkCard/linkcard.css
@@ -6,7 +6,6 @@
   gap: var(--spacing-8);
   border: 1px solid var(--colors-cool-grey-200);
   border-radius: var(--border-radius);
-  padding: var(--spacing-16) var(--spacing-24);
   position: relative;
   cursor: pointer;
   transition: box-shadow 0.3s ease;
@@ -14,6 +13,14 @@
   align-items: start;
 }
 
+.padding-32 {
+  padding: var(--spacing-16) var(--spacing-24);
+}
+
+.video-padding {
+  padding: var(--spacing-8);
+}
+
 .link-card:hover {
   border-color: var(--colors-teal-200);
 }
diff --git a/app/components/VideoThumbnail/videothumbnail.tsx b/app/components/VideoThumbnail/videothumbnail.tsx
index 903e130f..27bcc8ae 100644
--- a/app/components/VideoThumbnail/videothumbnail.tsx
+++ b/app/components/VideoThumbnail/videothumbnail.tsx
@@ -9,16 +9,12 @@ interface VideoThumbnailProps {
 
 const VideoThumbnail: React.FC<VideoThumbnailProps> = ({imageUrl, altText, tag}) => {
   return (
-    <div className="relative rounded-lg overflow-hidden shadow-md">
-      {tag && (
-        <span className="absolute top-2 left-2 bg-teal-50 text-teal-500 px-2 py-1 rounded text-xs font-bold z-10">
-          {tag}
-        </span>
-      )}
-      <div className="relative">
-        <img src={imageUrl} alt={altText} className="w-full h-auto" />
-        <div className="absolute inset-0 flex items-center justify-center bg-black bg-opacity-30">
-          <PlayIcon className="text-white w-12 h-12" />
+    <div className="rounded">
+      {tag && <span className="tag">{tag}</span>}
+      <div>
+        <img src={imageUrl} alt={altText} />
+        <div>
+          <PlayIcon />
         </div>
       </div>
     </div>
diff --git a/app/root.css b/app/root.css
index 3b6054a9..be545b73 100644
--- a/app/root.css
+++ b/app/root.css
@@ -40,6 +40,7 @@
   --spacing-48: 48px;
   --spacing-56: 56px;
   --spacing-64: 64px;
+  --spacing-76: 76px;
   --spacing-80: 80px;
   --spacing-104: 104px;
   --spacing-128: 128px;
@@ -134,7 +135,7 @@ h2 {
 
 .large-bold {
   font-size: 20px;
-  font-weight: 500;
+  font-weight: 600;
   line-height: 170%; /* 30.6px */
   letter-spacing: -0.44px;
 }
@@ -149,7 +150,7 @@ h2 {
 
 .default-bold {
   font-size: 18px;
-  font-weight: 500;
+  font-weight: 600;
   line-height: 170%; /* 27.2px */
   letter-spacing: -0.18px;
 }
@@ -257,6 +258,10 @@ h2 {
   padding-bottom: var(--spacing-64) !important;
 }
 
+.padding-bottom-76 {
+  padding-bottom: var(--spacing-76) !important;
+}
+
 .padding-bottom-80 {
   padding-bottom: var(--spacing-80) !important;
 }
@@ -313,6 +318,10 @@ h2 {
   padding-top: var(--spacing-64) !important;
 }
 
+.padding-top-76 {
+  padding-top: var(--spacing-76) !important;
+}
+
 .padding-top-80 {
   padding-top: var(--spacing-80) !important;
 }
@@ -816,6 +825,7 @@ button {
     --spacing-48: 32px;
     --spacing-56: 32px;
     --spacing-64: 40px;
+    --spacing-76: 44px;
     --spacing-80: 48px;
     --spacing-104: 64px;
     --spacing-128: 64px;
diff --git a/app/routes/how-can-i-help.career.tsx b/app/routes/how-can-i-help.career.tsx
index 07f3ba47..c5bf5292 100644
--- a/app/routes/how-can-i-help.career.tsx
+++ b/app/routes/how-can-i-help.career.tsx
@@ -3,7 +3,7 @@ import CardSmall from '~/components/CardSmall'
 import DropDown from '~/components/DropDown'
 import {Microscope, GovermentBuilding, PuzzlePieces} from '~/components/icons-generated'
 import HelpItem from '~/components/HowCanIHelp/HelpItem'
-import CategoryCarousel from '~/components/HowCanIHelp/CatgoryCarousel'
+import CategoryCarousel from '~/components/HowCanIHelp/CategoryCarousel'
 import Testimonial from '~/components/Testimonial'
 import Base from '~/components/HowCanIHelp/Base'
 
@@ -62,7 +62,7 @@ const ResearchPath = () => (
     </div>
 
     <div className="padding-bottom-56">
-      <div className="flexbox padding-bottom-56">
+      <div className="flexbox padding-bottom-40">
         <h2 className="col-6">Interested in pursuing this career path?</h2>
         <p className="col-6 large">
           Take the following steps to further assess your fit and learn how to make the transition:
@@ -135,7 +135,7 @@ const ResearchPath = () => (
       </HelpItem>
     </div>
 
-    <div className="padding-bottom-80">
+    <div className="padding-bottom-0">
       <DropDown title="I’m interested in non-technical or supporting roles in AI alignment">
         <p className="padding-bottom-40 col-6 grey">
           There are many roles that support the work of AI alignment researchers, and having
@@ -231,7 +231,7 @@ const GovernancePath = () => (
       <div className="flexbox-alt">
         <div className="col-6-alt">
           <p className="default-bold padding-bottom-16">What</p>
-          <p className="grey default">
+          <p className="grey default padding-bottom-0">
             AI governance is an emerging field focused on shaping how AI technology is developed and
             deployed through policy, corporate practices, and international coordination.
             Professionals in this space work to prevent catastrophic risks from advanced AI systems,
@@ -241,7 +241,7 @@ const GovernancePath = () => (
         </div>
         <div className="col-6-alt">
           <p className="default-bold padding-bottom-16">Why this is important</p>
-          <p className="grey default">
+          <p className="grey default padding-bottom-0">
             To ensure humanity benefits from advanced AI and mitigates catastrophic risks, technical
             solutions for AI alignment must be complemented by effective public policy and corporate
             oversight to keep development tightly controlled and at a cautious pace. Even with
@@ -272,8 +272,8 @@ const GovernancePath = () => (
       </div>
     </div>
 
-    <div className="padding-bottom-80">
-      <div className="flexbox padding-bottom-56">
+    <div className="padding-bottom-0">
+      <div className="flexbox padding-bottom-40">
         <h2 className="col-6">Interested in pursuing this career path?</h2>
         <p className="col-6 large">
           Take the following steps to further assess your fit and learn how to make the transition:
@@ -376,7 +376,7 @@ const GovernancePath = () => (
 
 const FieldBuildingPath = () => (
   <>
-    <div className="padding-bottom-80">
+    <div className="padding-bottom-64">
       <h2 className="teal-500 padding-bottom-40" id="field-building">
         AI safety field-building
       </h2>
@@ -412,7 +412,7 @@ const FieldBuildingPath = () => (
     </div>
 
     <div className="padding-bottom-56">
-      <p className="padding-bottom-40 large-bold">Most common field-building roles</p>
+      <p className="padding-bottom-40 large-bold ">Most common field-building roles</p>
 
       <HelpItem
         titleFont="default-bold"
@@ -525,12 +525,12 @@ const FieldBuildingPath = () => (
           governance efforts.
         </HelpItem>
 
-        <p className="large-bold padding-bottom-32">Other technical roles</p>
+        <p className="large-bold padding-bottom-32 padding-top-32">Other technical roles</p>
 
         <HelpItem
           titleFont="default-bold"
           title="Working in information security to protect AI (or the results of key experiments) from misuse, theft, or tampering"
-          className="padding-bottom-40"
+          className="padding-bottom-24"
           links={[
             {
               title: "Read 80k's guide on information security in high-impact areas",
@@ -557,7 +557,7 @@ const FieldBuildingPath = () => (
     </div>
 
     <div className="padding-bottom-80">
-      <div className="flexbox padding-bottom-56">
+      <div className="flexbox padding-bottom-40">
         <h2 className="col-6">Interested in pursuing this career path?</h2>
         <p className="col-6 large">
           Take the following steps to further assess your fit and learn how to make the transition:
@@ -642,6 +642,7 @@ const CareerPaths = () => {
           title="AI alignment research"
           description="Research roles dedicated to solving the technical challenge of AI alignment, and non—technical supporting roles"
           icon={Microscope}
+          className="col-4"
         />
         <CardSmall
           action={() => smoothScroll('governance')}
@@ -649,6 +650,7 @@ const CareerPaths = () => {
           title="AI governance & policy"
           description="Roles focused on developing and implementing policies that guide AI development and usage"
           icon={GovermentBuilding}
+          className="col-4"
         />
         <CardSmall
           action={() => smoothScroll('field-building')}
@@ -656,6 +658,7 @@ const CareerPaths = () => {
           title="AI safety field-building"
           description="Roles that direct talent or resources toward AI safety, educate the public, or build the AI safety community"
           icon={PuzzlePieces}
+          className="col-4"
         />
       </div>
     </>
diff --git a/app/routes/how-can-i-help.community.tsx b/app/routes/how-can-i-help.community.tsx
index 6f313159..8d8e3ee7 100644
--- a/app/routes/how-can-i-help.community.tsx
+++ b/app/routes/how-can-i-help.community.tsx
@@ -10,7 +10,7 @@ const InPerson = () => (
   <>
     <div className="padding-bottom-56">
       <div className="padding-bottom-40">
-        <h2 className="teal-500 padding-bottom-40">In-person communities</h2>
+        <h2 className="teal-500 padding-bottom-32">In-person communities</h2>
         <p className="grey default col-6">
           In-person communities provide general support, networking, and socializing for anyone
           interested in contributing to AI safety.
@@ -57,7 +57,7 @@ const InPerson = () => (
 const Online = () => (
   <>
     <div className="padding-bottom-40">
-      <h2 className="teal-500 padding-bottom-40">Online communities</h2>
+      <h2 className="teal-500 padding-bottom-32">Online communities</h2>
       <p className="grey default col-6">
         Online communities typically exist on Slack, Discord (an app like Slack), or website forums,
         and tend to serve more specific purposes:
@@ -130,7 +130,7 @@ const Online = () => (
 
 export default function Community() {
   return (
-    <Base title="Join the community" current="community">
+    <Base title="Join a community" current="community">
       <InPerson />
 
       <Online />
diff --git a/app/routes/how-can-i-help.donate.tsx b/app/routes/how-can-i-help.donate.tsx
index 22b42979..987886ff 100644
--- a/app/routes/how-can-i-help.donate.tsx
+++ b/app/routes/how-can-i-help.donate.tsx
@@ -1,8 +1,8 @@
 import {MetaFunction} from '@remix-run/node'
 import HelpItem from '~/components/HowCanIHelp/HelpItem'
-import CategoryCarousel from '~/components/HowCanIHelp/CatgoryCarousel'
 import Testimonial from '~/components/Testimonial'
 import Base from '~/components/HowCanIHelp/Base'
+import CategoryCarousel from '~/components/HowCanIHelp/CategoryCarousel'
 
 export const meta: MetaFunction = () => {
   return [{title: 'How Can I Help? - AISafety.info'}]
@@ -11,7 +11,7 @@ export const meta: MetaFunction = () => {
 export default function Donate() {
   return (
     <Base title="Donate" current="donate">
-      <div className="padding-bottom-80">
+      <div className="padding-bottom-56">
         <div className="flexbox-alt">
           <div className="col-6-alt">
             <p className="default-bold padding-bottom-16">Who</p>
@@ -38,7 +38,7 @@ export default function Donate() {
         <HelpItem
           title="Donating to grantmakers"
           tag="Easiest & most common"
-          className="padding-bottom-40"
+          className="padding-bottom-56"
           links={[
             {
               tag: 'Top recommendation',
@@ -74,7 +74,7 @@ export default function Donate() {
         <HelpItem
           title="Donating directly to individuals & smaller organizations"
           tag="Potential for highest impact"
-          className="padding-bottom-40"
+          className="padding-bottom-56"
           links={[
             {
               title: 'Shallow review of live agendas in alignment & safety',
diff --git a/app/routes/how-can-i-help.grassroots.tsx b/app/routes/how-can-i-help.grassroots.tsx
index 9eee630c..f3ea7846 100644
--- a/app/routes/how-can-i-help.grassroots.tsx
+++ b/app/routes/how-can-i-help.grassroots.tsx
@@ -1,6 +1,6 @@
 import {MetaFunction} from '@remix-run/node'
 import HelpItem from '~/components/HowCanIHelp/HelpItem'
-import CategoryCarousel from '~/components/HowCanIHelp/CatgoryCarousel'
+import CategoryCarousel from '~/components/HowCanIHelp/CategoryCarousel'
 import Base from '~/components/HowCanIHelp/Base'
 import VideoImg from '~/assets/video_thumbnail.png'
 import VideoThumbnail from '~/components/VideoThumbnail/videothumbnail'
@@ -36,7 +36,7 @@ const WhatYouCanDo = () => (
     <h2 className="teal-500 padding-bottom-64">What you can do, right now</h2>
     <div>
       <HelpItem
-        className="padding-bottom-40"
+        className="padding-bottom-64"
         title="Share a video or article on social media"
         tag="2 min"
         links={[
@@ -45,6 +45,7 @@ const WhatYouCanDo = () => (
             title: "A.I. - Humanity's Final Invention?",
             action: 'https://youtu.be/fa8k8IQ1_X0?si=b2l0Ex6KQvt6JyQD',
             image: <VideoThumbnail imageUrl={VideoImg} altText="video-playlist" />,
+            isVideo: true,
           },
         ]}
         additionalInfo={
@@ -68,7 +69,7 @@ const WhatYouCanDo = () => (
       </HelpItem>
 
       <HelpItem
-        className="padding-bottom-40"
+        className="padding-bottom-64"
         title="Send an email to a politician"
         tag="8 min"
         links={[
@@ -86,7 +87,7 @@ const WhatYouCanDo = () => (
       </HelpItem>
 
       <HelpItem
-        className="padding-bottom-40"
+        className="padding-bottom-64"
         title="Join a PauseAI protest"
         tag="3–6 hours"
         links={[
@@ -100,7 +101,7 @@ const WhatYouCanDo = () => (
       </HelpItem>
 
       <HelpItem
-        className="padding-bottom-40"
+        className="padding-bottom-64"
         title="Talk to people about this topic"
         links={[
           {
diff --git a/app/routes/how-can-i-help.knowledge.tsx b/app/routes/how-can-i-help.knowledge.tsx
index 8b590e9e..39b175a8 100644
--- a/app/routes/how-can-i-help.knowledge.tsx
+++ b/app/routes/how-can-i-help.knowledge.tsx
@@ -1,10 +1,10 @@
 import {MetaFunction} from '@remix-run/node'
 import DropDown from '~/components/DropDown'
 import HelpItem from '~/components/HowCanIHelp/HelpItem'
-import CategoryCarousel from '~/components/HowCanIHelp/CatgoryCarousel'
+import CategoryCarousel from '~/components/HowCanIHelp/CategoryCarousel'
 import Base from '~/components/HowCanIHelp/Base'
 import VideoImg from '~/assets/video_thumbnail.png'
-import PlayIcon from '~/components/icons-generated/Play'
+import VideoThumbnail from '~/components/VideoThumbnail/videothumbnail'
 
 export const meta: MetaFunction = () => {
   return [{title: 'How Can I Help? - AISafety.info'}]
@@ -12,15 +12,15 @@ export const meta: MetaFunction = () => {
 
 const NewToAISafety = () => (
   <>
-    <div className="padding-bottom-80">
+    <div className="padding-bottom-56">
       <div className="flexbox padding-bottom-56">
         <h2 className="teal-500 padding-bottom-4 col-8" id="new-to-aisafety">
-          If you're somewhat new to AI safety, we recommend an introductory overview
+          If you{'\u2019'}re somewhat new to AI safety, we recommend an introductory overview
         </h2>
       </div>
       <HelpItem
         title="Browse our introductory content"
-        className="padding-bottom-40"
+        className="padding-bottom-56"
         links={[
           {
             tag: 'Top recommendation',
@@ -30,12 +30,8 @@ const NewToAISafety = () => (
           {
             title: 'Intro to AI safety video playlist',
             action: 'https://www.youtube.com/playlist?list=PLWQikawCP4UFM_ziLf9X2rcOLCSbqisRE',
-            image: (
-              <div>
-                <img src={VideoImg} alt="video-playlist" />
-                <PlayIcon />
-              </div>
-            ),
+            image: <VideoThumbnail imageUrl={VideoImg} altText="video-playlist" />,
+            isVideo: true,
           },
         ]}
       >
@@ -85,7 +81,6 @@ const Dropdowns = () => (
   <div className="padding-bottom-80">
     <DropDown title="Books are more my thing">
       <HelpItem
-        className="padding-bottom-40"
         links={[
           {
             tag: 'Top recommendation',
@@ -116,7 +111,7 @@ const Dropdowns = () => (
 
     <DropDown title="I want something I can subscribe to (YouTube channels, newsletters, etc.)">
       <HelpItem
-        className="padding-bottom-40"
+        className="padding-bottom-56"
         title="YouTube"
         links={[
           {
@@ -132,7 +127,7 @@ const Dropdowns = () => (
       </HelpItem>
 
       <HelpItem
-        className="padding-bottom-40"
+        className="padding-bottom-56"
         title="Podcast series"
         links={[
           {
@@ -161,7 +156,7 @@ const Dropdowns = () => (
       </HelpItem>
 
       <HelpItem
-        className="padding-bottom-40"
+        className="padding-bottom-56"
         title="Newsletter"
         links={[
           {
@@ -195,12 +190,12 @@ const Dropdowns = () => (
 const DiveDeeper = () => (
   <>
     <div>
-      <h2 className="teal-500 padding-bottom-40" id="dive-deeper">
+      <h2 className="teal-500 padding-bottom-56" id="dive-deeper">
         If you want to dive deeper
       </h2>
       <HelpItem
         title="Take an online course"
-        className="padding-bottom-40"
+        className="padding-bottom-56"
         links={[
           {
             tag: 'Highlighted course',
@@ -226,7 +221,6 @@ const DiveDeeper = () => (
             </a>
           </>
         }
-        // TODO: fix additionalInfo appearing for each link
       >
         <p className="grey default padding-bottom-16">
           We recommend taking an online course if your interests have narrowed to a specific subset
@@ -263,7 +257,7 @@ const DiveDeeper = () => (
 
       <HelpItem
         title="Get into LessWrong and its subset, the Alignment Forum"
-        className="padding-bottom-40"
+        className="padding-bottom-56"
         links={[
           {
             tag: 'Most widely-used',
@@ -285,7 +279,7 @@ const DiveDeeper = () => (
 
       <HelpItem
         title="Sign up for events"
-        className="padding-bottom-40"
+        className="padding-bottom-56"
         links={[
           {
             tag: 'Top recommendation',
diff --git a/app/routes/how-can-i-help.volunteer.tsx b/app/routes/how-can-i-help.volunteer.tsx
index 47d09383..0c707d25 100644
--- a/app/routes/how-can-i-help.volunteer.tsx
+++ b/app/routes/how-can-i-help.volunteer.tsx
@@ -1,7 +1,7 @@
 import {MetaFunction} from '@remix-run/node'
 import DropDown from '~/components/DropDown'
 import HelpItem from '~/components/HowCanIHelp/HelpItem'
-import CategoryCarousel from '~/components/HowCanIHelp/CatgoryCarousel'
+import CategoryCarousel from '~/components/HowCanIHelp/CategoryCarousel'
 import Testimonial from '~/components/Testimonial'
 import Base from '~/components/HowCanIHelp/Base'
 import BaginskiImg from '~/assets/Baginski.jpeg'
@@ -12,7 +12,7 @@ export const meta: MetaFunction = () => {
 
 const TopText = () => (
   <>
-    <div className="padding-bottom-80">
+    <div className="padding-bottom-64">
       <div className="flexbox-alt">
         <div className="col-6-alt">
           <p className="default-bold padding-bottom-16">Who</p>
@@ -67,7 +67,7 @@ const Options = () => (
       <div>
         <HelpItem
           title="Sign up for free 1-on-1 volunteering advice with AI Safety Quest & 80,000 Hours"
-          className="padding-bottom-40"
+          className="padding-bottom-64"
           links={[
             {
               title: 'Book your AI Safety Quest call',
@@ -93,7 +93,7 @@ const Options = () => (
 
         <HelpItem
           title="Join the monthly AED calls"
-          className="padding-bottom-40"
+          className="padding-bottom-64"
           links={[
             {
               title: 'Add the next AED call to your calendar',
diff --git a/package-lock.json b/package-lock.json
index 873a2796..1ed12e77 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,10 +7,10 @@
       "name": "stampy-ui",
       "license": "MIT",
       "dependencies": {
-        "@remix-run/cloudflare": "^2.6.0",
-        "@remix-run/cloudflare-workers": "^2.6.0",
-        "@remix-run/css-bundle": "^1.19.3",
-        "@remix-run/react": "^2.6.0",
+        "@remix-run/cloudflare": "^2.13.1",
+        "@remix-run/cloudflare-workers": "^2.13.1",
+        "@remix-run/css-bundle": "^2.13.1",
+        "@remix-run/react": "^2.13.1",
         "client-zip": "^2.4.5",
         "copy-to-clipboard": "^3.3.3",
         "isbot": "^4",
@@ -21,12 +21,12 @@
         "react": "^18.2.0",
         "react-auto-height": "^1.2.1",
         "react-dom": "^18.2.0",
-        "remix": "^2.6.0"
+        "remix": "^2.13.1"
       },
       "devDependencies": {
         "@cloudflare/workers-types": "^4.20240129.0",
-        "@remix-run/dev": "^2.6.0",
-        "@remix-run/testing": "^2.6.0",
+        "@remix-run/dev": "^2.13.1",
+        "@remix-run/testing": "^2.13.1",
         "@storybook/addon-designs": "^7.0.9",
         "@storybook/addon-essentials": "^7.6.8",
         "@storybook/addon-interactions": "^7.6.8",
@@ -62,7 +62,7 @@
         "storybook": "^7.6.8",
         "ts-jest": "^29.1.2",
         "ts-node": "^10.9.2",
-        "typescript": "~5.3.3",
+        "typescript": "^5.3.3",
         "vite": "^5.0.8",
         "wrangler": "^3.24.0"
       },
@@ -5756,12 +5756,12 @@
       }
     },
     "node_modules/@remix-run/css-bundle": {
-      "version": "1.19.3",
-      "resolved": "https://registry.npmjs.org/@remix-run/css-bundle/-/css-bundle-1.19.3.tgz",
-      "integrity": "sha512-XccfuPmTdtXT+Kx7Df62cyk8d2I6DrHIB02uDyIGOTq8lPlMXznErMW14asVcbGOV5ieAOvnch/pUJrsKoWRmw==",
+      "version": "2.14.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/css-bundle/-/css-bundle-2.14.0.tgz",
+      "integrity": "sha512-ihdLzO3UUAbdTkBQ/jl9rEmhFKzUA8eEAvvpjdkumipoKkiOsjqAFV62FAMf7mrKNBCv7UeoIOm6XHV9Io2DZg==",
       "license": "MIT",
       "engines": {
-        "node": ">=14.0.0"
+        "node": ">=18.0.0"
       }
     },
     "node_modules/@remix-run/dev": {

From 5d57e1e8f38a0b91b233f1800c1672880453be25 Mon Sep 17 00:00:00 2001
From: Bryce Robertson <bryceerobertson@gmail.com>
Date: Sun, 10 Nov 2024 12:40:00 -0300
Subject: [PATCH 3/4] aprillion's-fixes

---
 app/components/HowCanIHelp/HelpItem.tsx | 6 ++----
 app/components/LinkCard/index.tsx       | 2 +-
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/app/components/HowCanIHelp/HelpItem.tsx b/app/components/HowCanIHelp/HelpItem.tsx
index 0eac1eb5..01ac01c7 100644
--- a/app/components/HowCanIHelp/HelpItem.tsx
+++ b/app/components/HowCanIHelp/HelpItem.tsx
@@ -32,14 +32,12 @@ const HelpItem = ({
         <p className="grey default"> {children} </p>
       </div>
       <div className="col-6">
-        {links?.map((link, index) => (
+        {links?.map((link) => (
           <div key={link.title} className="padding-bottom-16">
             <LinkCard action={link.action || '#'} {...link} />
-            {index === links.length - 1 && additionalInfo && (
-              <p className="small grey padding-top-16">{additionalInfo}</p>
-            )}
           </div>
         ))}
+        {additionalInfo && <p className="small grey">{additionalInfo}</p>}
       </div>
     </div>
   )
diff --git a/app/components/LinkCard/index.tsx b/app/components/LinkCard/index.tsx
index c078ed61..aa675d75 100644
--- a/app/components/LinkCard/index.tsx
+++ b/app/components/LinkCard/index.tsx
@@ -18,7 +18,7 @@ export type LinkCardProps = Link & {
 const LinkCard: React.FC<LinkCardProps> = ({title, image, tag, action, isVideo, className}) => (
   <Button
     action={action}
-    className={`link-card ${className} ${isVideo ? 'video-padding' : 'padding-32'}`}
+    className={`link-card ${className} ${isVideo ? 'video-padding' : 'default-padding'}`}
   >
     <p className="default-bold flexbox gap-16 center-align">
       {image && <span className="image">{image}</span>}

From 4bccae6f729bb3684c8f692fd8842b584cb469aa Mon Sep 17 00:00:00 2001
From: Bryce Robertson <bryceerobertson@gmail.com>
Date: Sun, 10 Nov 2024 14:06:56 -0300
Subject: [PATCH 4/4] deleting padding-32

---
 app/components/LinkCard/linkcard.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/LinkCard/linkcard.css b/app/components/LinkCard/linkcard.css
index badd91cb..d0d3f5e8 100644
--- a/app/components/LinkCard/linkcard.css
+++ b/app/components/LinkCard/linkcard.css
@@ -13,7 +13,7 @@
   align-items: start;
 }
 
-.padding-32 {
+.default-padding {
   padding: var(--spacing-16) var(--spacing-24);
 }