Merge branch 'stampy-redesign' into bryce-spread-the-word

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>

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>

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,113 @@ 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')}
+      actionDesc="We'll show you how"
+      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')}
+      actionDesc="Find your 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

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 />

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>
   )

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">

app/routes/how-can-i-help.grassroots.tsx

@@ -148,7 +148,7 @@ export default function Grassroots() {
     }
   }, [])
   return (
-    <Base title={<span>Spread the word & <br/> grassroots activism</span>} subpage="grassroots">
+    <Base title={<span>Spread the word & <br/> grassroots activism</span>} current="grassroots">
 
       <TopText />
 

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 />

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>
   )