Merge pull request #843 from StampyAI/bryce-qa-2

Final QA + fixes

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;
 }
 

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

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

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

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}
 

app/components/HowCanIHelp/HelpItem.tsx

@@ -7,16 +7,17 @@ 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 = ({
   title,
   tag,
   children,
   links,
   additionalInfo,
-  titleFont = 'extra-large-bold',
+  titleFont = 'large-bold',
   className = '',
 }: HelpItemProps) => {
   return (
@@ -34,11 +35,12 @@ const HelpItem = ({
         {links?.map((link) => (
           <div key={link.title} className="padding-bottom-16">
             <LinkCard action={link.action || '#'} {...link} />
-            {additionalInfo && <p className="small grey padding-top-16">{additionalInfo}</p>}
           </div>
         ))}
+        {additionalInfo && <p className="small grey">{additionalInfo}</p>}
       </div>
     </div>
   )
 }
+
 export default HelpItem

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:
@@ -126,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="For both technical and non-technical roles in 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 wanted"
-          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

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 {

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

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' : 'default-padding'}`}
+  >
     <p className="default-bold flexbox gap-16 center-align">
       {image && <span className="image">{image}</span>}
       <div className="flexbox flex-column gap-8">

app/components/LinkCard/linkcard.css

@@ -6,14 +6,21 @@
   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;
   width: 100%;
   align-items: start;
 }
 
+.default-padding {
+  padding: var(--spacing-16) var(--spacing-24);
+}
+
+.video-padding {
+  padding: var(--spacing-8);
+}
+
 .link-card:hover {
   border-color: var(--colors-teal-200);
 }