From a3624876168b35d949fc36b592e8308922d83f29 Mon Sep 17 00:00:00 2001
From: Daniel O'Connell <github@ahiru.pl>
Date: Sat, 26 Oct 2024 20:09:45 +0200
Subject: [PATCH 1/2] overrides for footer

---
 app/components/HowCanIHelp/Base.tsx        |  11 +-
 app/components/HowCanIHelp/HelpMethods.tsx | 123 ++++++++++++++++-----
 app/routes/how-can-i-help.career.tsx       |   2 +-
 app/routes/how-can-i-help.community.tsx    |   2 +-
 app/routes/how-can-i-help.donate.tsx       |   2 +-
 app/routes/how-can-i-help.grassroots.tsx   |   2 +-
 app/routes/how-can-i-help.knowledge.tsx    |   2 +-
 app/routes/how-can-i-help.volunteer.tsx    |   2 +-
 8 files changed, 109 insertions(+), 37 deletions(-)

diff --git a/app/components/HowCanIHelp/Base.tsx b/app/components/HowCanIHelp/Base.tsx
index 2482d87c..155c4089 100644
--- a/app/components/HowCanIHelp/Base.tsx
+++ b/app/components/HowCanIHelp/Base.tsx
@@ -1,15 +1,14 @@
 import {Link} from '@remix-run/react'
 import Page from '~/components/Page'
-import HelpMethods from '~/components/HowCanIHelp/HelpMethods'
-import {HelpPage, helpUrl} from '~/routesMapper'
+import HelpMethods, {HelpMethodsProps} from '~/components/HowCanIHelp/HelpMethods'
+import {helpUrl} from '~/routesMapper'
 import {ReactNode} from 'react'
 
 type BaseProps = {
   title: string
-  subpage: HelpPage
   children: ReactNode
-}
-export default function Base({title, subpage, children}: BaseProps) {
+} & HelpMethodsProps
+export default function Base({title, current, children, ...props}: BaseProps) {
   return (
     <Page>
       <div className="page-body">
@@ -22,7 +21,7 @@ export default function Base({title, subpage, children}: BaseProps) {
 
           {children}
 
-          <HelpMethods current={subpage} />
+          <HelpMethods current={current} {...props} />
         </div>
       </div>
     </Page>
diff --git a/app/components/HowCanIHelp/HelpMethods.tsx b/app/components/HowCanIHelp/HelpMethods.tsx
index aa6a4b55..190c5887 100644
--- a/app/components/HowCanIHelp/HelpMethods.tsx
+++ b/app/components/HowCanIHelp/HelpMethods.tsx
@@ -1,3 +1,4 @@
+import {ReactNode} from 'react'
 import Card from '~/components/Card'
 import CardSmall from '~/components/CardSmall'
 import {HelpPage, helpUrl} from '~/routesMapper'
@@ -8,39 +9,111 @@ import {Megaphone} from '~/components/icons-generated'
 import {PiggyBank} from '~/components/icons-generated'
 import {Hand} from '~/components/icons-generated'
 
-type HelpMethodsProps = {
+const titles = {
+  career: (
+    <div>
+      Multiply your impact:
+      <br />
+      Support your career pursuit
+    </div>
+  ),
+  grassroots: (
+    <div>
+      Multiply your positive impact:
+      <br />
+      Support your advocacy efforts
+    </div>
+  ),
+  donate: (
+    <div>
+      Multiply your postive impact:
+      <br />
+      Support your donation efforts
+    </div>
+  ),
+  volunteer: (
+    <div>
+      Multiply your positive impact:
+      <br />
+      Support your volunteer efforts
+    </div>
+  ),
+  knowledge: (
+    <div>
+      Boost your learning efforts:
+      <br />
+      Join a community
+    </div>
+  ),
+  community: (
+    <div>
+      Boost your efforts:
+      <br />
+      Learn more about AI safety
+    </div>
+  ),
+}
+
+const knowledgeDescriptions = {
+  donate: 'The more you know about this topic, the further your donation efforts will go',
+}
+
+const communityDescriptions = {
+  donate:
+    'Connecting with other advocates online or in person will help guide donation decisions, and can be motivating',
+}
+
+const KnowledgeCard = ({current}: {current?: HelpPage}) => {
+  if (current == 'knowledge') return null
+  const defaultDescription =
+    'Learning more about AI safety and the alignment problem is essential if you want to pursue a career in this field'
+  return (
+    <Card
+      action={helpUrl('knowledge')}
+      title="Build your knowledge"
+      description={
+        knowledgeDescriptions[current as keyof typeof knowledgeDescriptions] || defaultDescription
+      }
+      icon={Book}
+      className="col-6"
+    />
+  )
+}
+
+const CommunityCard = ({current}: {current?: string}) => {
+  if (current === 'community') return null
+  const defaultDescription =
+    'Connecting with others online or in person will help you navigate the transition to a career in AI safety'
+  return (
+    <Card
+      action={helpUrl('community')}
+      title="Join a community"
+      description={
+        communityDescriptions[current as keyof typeof communityDescriptions] || defaultDescription
+      }
+      icon={People}
+      className="col-6"
+    />
+  )
+}
+
+export type HelpMethodsProps = {
   current?: HelpPage
-  header?: string
-  subheader?: string
+  footerTitle?: ReactNode
+  footerSubheader?: ReactNode
 }
 const HelpMethods = ({
   current,
-  header = 'Multiply your impact: Support your career pursuit',
-  subheader = 'Or, explore more ways to help directly',
+  footerTitle,
+  footerSubheader = 'Or, explore more ways to help directly',
 }: HelpMethodsProps) => (
   <div className="help-footer">
-    <h2 className="teal-500 padding-bottom-56">{header}</h2>
+    <h2 className="teal-500 padding-bottom-56">{footerTitle || (current && titles[current])}</h2>
     <div className="flexbox padding-bottom-80">
-      {current !== 'knowledge' && (
-        <Card
-          action={helpUrl('knowledge')}
-          title="Build your knowledge"
-          description="Learning more about AI safety and the alignment problem is essential if you want to pursue a career in this field"
-          icon={Book}
-          className="col-6"
-        />
-      )}
-      {current !== 'community' && (
-        <Card
-          action={helpUrl('community')}
-          title="Join a community"
-          description="Connecting with others online or in person will help you navigate the transition to a career in AI safety"
-          icon={People}
-          className="col-6"
-        />
-      )}
+      <KnowledgeCard current={current} />
+      <CommunityCard current={current} />
     </div>
-    <p className="large-bold padding-bottom-40">{subheader}</p>
+    <p className="large-bold padding-bottom-40">{footerSubheader}</p>
     <div className="flexbox">
       {current !== 'career' && (
         <CardSmall
diff --git a/app/routes/how-can-i-help.career.tsx b/app/routes/how-can-i-help.career.tsx
index 349c028a..7a8b35f9 100644
--- a/app/routes/how-can-i-help.career.tsx
+++ b/app/routes/how-can-i-help.career.tsx
@@ -638,7 +638,7 @@ export default function HowCanIHelp() {
     }
   }, [])
   return (
-    <Base title="Start a career in AI safety" subpage="career">
+    <Base title="Start a career in AI safety" current="career">
       <CareerPaths />
 
       <ResearchPath />
diff --git a/app/routes/how-can-i-help.community.tsx b/app/routes/how-can-i-help.community.tsx
index 07d78217..c486e813 100644
--- a/app/routes/how-can-i-help.community.tsx
+++ b/app/routes/how-can-i-help.community.tsx
@@ -7,7 +7,7 @@ export const meta: MetaFunction = () => {
 
 export default function Community() {
   return (
-    <Base title="Join the community" subpage="community">
+    <Base title="Join the community" current="community">
       <div>fill me out, please</div>
     </Base>
   )
diff --git a/app/routes/how-can-i-help.donate.tsx b/app/routes/how-can-i-help.donate.tsx
index ec5c440c..6e77bed4 100644
--- a/app/routes/how-can-i-help.donate.tsx
+++ b/app/routes/how-can-i-help.donate.tsx
@@ -10,7 +10,7 @@ export const meta: MetaFunction = () => {
 
 export default function Donate() {
   return (
-    <Base title="Donate" subpage="donate">
+    <Base title="Donate" current="donate">
       <div className="padding-bottom-80">
         <div className="flexbox-alt">
           <div className="col-6-alt">
diff --git a/app/routes/how-can-i-help.grassroots.tsx b/app/routes/how-can-i-help.grassroots.tsx
index 681943c4..f5f84597 100644
--- a/app/routes/how-can-i-help.grassroots.tsx
+++ b/app/routes/how-can-i-help.grassroots.tsx
@@ -7,7 +7,7 @@ export const meta: MetaFunction = () => {
 
 export default function Grassroots() {
   return (
-    <Base title="Help with grassroots AI safety" subpage="grassroots">
+    <Base title="Help with grassroots AI safety" current="grassroots">
       <div>fill me out, please</div>
     </Base>
   )
diff --git a/app/routes/how-can-i-help.knowledge.tsx b/app/routes/how-can-i-help.knowledge.tsx
index 64d62758..4d73d5da 100644
--- a/app/routes/how-can-i-help.knowledge.tsx
+++ b/app/routes/how-can-i-help.knowledge.tsx
@@ -216,7 +216,7 @@ export default function Knowledge() {
     }
   }, [])
   return (
-    <Base title="Share knowledge about AI safety" subpage="knowledge">
+    <Base title="Share knowledge about AI safety" current="knowledge">
       <NewToAISafety />
 
       <Dropdowns />
diff --git a/app/routes/how-can-i-help.volunteer.tsx b/app/routes/how-can-i-help.volunteer.tsx
index 1bc73101..8bb0b3c4 100644
--- a/app/routes/how-can-i-help.volunteer.tsx
+++ b/app/routes/how-can-i-help.volunteer.tsx
@@ -7,7 +7,7 @@ export const meta: MetaFunction = () => {
 
 export default function Volunteer() {
   return (
-    <Base title="Volunteer for AISafety.info" subpage="volunteer">
+    <Base title="Volunteer for AISafety.info" current="volunteer">
       <div>fill me out, please</div>
     </Base>
   )

From 9aad2988a18da97abdb99e3dfdd943d231367741 Mon Sep 17 00:00:00 2001
From: Daniel O'Connell <github@ahiru.pl>
Date: Sat, 26 Oct 2024 20:17:40 +0200
Subject: [PATCH 2/2] update footer

---
 app/components/Card/index.tsx              | 24 ++++++++++++++++++----
 app/components/HowCanIHelp/HelpMethods.tsx |  2 ++
 2 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/app/components/Card/index.tsx b/app/components/Card/index.tsx
index 62a00589..17564bc0 100644
--- a/app/components/Card/index.tsx
+++ b/app/components/Card/index.tsx
@@ -1,17 +1,27 @@
-import {SVGProps} from 'react'
-import Button from '../Button'
+import {ReactNode, SVGProps} from 'react'
+import Button from '~/components/Button'
+import {ArrowRight} from '~/components/icons-generated'
 import './card.css'
 
 interface CardProps {
   title: string
-  description: string
+  description: ReactNode
   impact?: string
   icon: (props: SVGProps<SVGSVGElement>) => JSX.Element
   action: string
+  actionDesc?: string
   className?: string
 }
 
-export default function Card({title, description, impact, icon, action, className}: CardProps) {
+export default function Card({
+  title,
+  description,
+  impact,
+  icon,
+  action,
+  actionDesc,
+  className,
+}: CardProps) {
   className = `card bordered ${className}`
 
   return (
@@ -20,6 +30,12 @@ export default function Card({title, description, impact, icon, action, classNam
       <div className="card-content">
         <p className="large-bold padding-bottom-8">{title}</p>
         <p className="grey padding-bottom-16">{description}</p>
+        {actionDesc && (
+          <p className="default-bold teal-500">
+            <span className="padding-right-8">{actionDesc}</span>
+            <ArrowRight />
+          </p>
+        )}
         {impact && <p className="tag xs">{impact}</p>}
       </div>
     </Button>
diff --git a/app/components/HowCanIHelp/HelpMethods.tsx b/app/components/HowCanIHelp/HelpMethods.tsx
index 190c5887..dfe4ba50 100644
--- a/app/components/HowCanIHelp/HelpMethods.tsx
+++ b/app/components/HowCanIHelp/HelpMethods.tsx
@@ -70,6 +70,7 @@ const KnowledgeCard = ({current}: {current?: HelpPage}) => {
   return (
     <Card
       action={helpUrl('knowledge')}
+      actionDesc="We'll show you how"
       title="Build your knowledge"
       description={
         knowledgeDescriptions[current as keyof typeof knowledgeDescriptions] || defaultDescription
@@ -87,6 +88,7 @@ const CommunityCard = ({current}: {current?: string}) => {
   return (
     <Card
       action={helpUrl('community')}
+      actionDesc="Find your community"
       title="Join a community"
       description={
         communityDescriptions[current as keyof typeof communityDescriptions] || defaultDescription