update

.github/workflows/ci.yml

@@ -11,12 +11,12 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
 
       - name: Set up Node
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v4
         with:
-          node-version: 12
+          node-version: 18
 
       - name: Install dependencies
         run: npm i
@@ -28,12 +28,12 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
 
       - name: Set up Node
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v4
         with:
-          node-version: 12
+          node-version: 18
 
       - name: Install dependencies
         run: npm i
@@ -45,12 +45,12 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
 
       - name: Set up Node
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v4
         with:
-          node-version: 12
+          node-version: 18
 
       - name: Install dependencies
         run: npm i

components/about/ourValues.jsx

@@ -4,8 +4,43 @@
 import classNames from 'classnames';
 import { IoMdArrowDropright as ArrowIcon } from 'react-icons/io';
 
-const OurValues = ({ content }) => {
-  const [selected, setSelected] = useState(3);
+const content = [
+  {
+    header: 'Engage in your community.',
+    body: 'Our community makes us special. We are a group of friends who care deeply about our organization and each other. The strength of our community comes from the contributions of its members. We welcome new members with warmth, and we make the effort to know each other beyond superficial details.',
+  },
+  {
+    header: 'Be dependable.',
+    body: 'As an organization, we trust every single member to hold themselves and others accountable. We know that our performance affects others. If we all are engaged and follow through on our commitments, then we can be confident that others have our backs.',
+  },
+  {
+    header: 'Develop with care.',
+    body: 'We build with others in mind. Empathy and compassion are crucial to serving our partner organizations and members. When we embark on projects, we work to deeply understand the people who we are helping. We write software that meets the highest standards of development. When we deliver our final products, we ensure that others can understand how to use our code and build on it.',
+  },
+  {
+    header: 'Go beyond technology.',
+    body: 'Technology is only one tool we use in our greater mission for social impact. It is easy to fall into the trap of believing technology can solve all problems. We know that technology alone is not enough. We learn from, work with, and are inspired by other organizations and individuals who are tackling social problems using a multitude of tools.',
+  },
+  {
+    header: 'Go for it.',
+    body: 'Sometimes, the only way to learn if something works is to run with it. If we waited until our plans were perfect, we would never get anywhere. Organizational roles do not determine the value of an idea: great ideas can come from anyone and anywhere. We grow because we are always trying something new.',
+  },
+  {
+    header: 'Learn what you don’t know.',
+    body: 'There is a lot to learn. In order to improve the world, we need to know about it. We recognize that we have barely scratched the surface of what is out there. We are humble about our gaps in knowledge, and are willing to answer questions with “I don’t know.” We are hungry learners, and we teach each other whenever possible.',
+  },
+  {
+    header: 'Be open-minded.',
+    body: 'Our process depends on openness to different people, topics, and perspectives. We embrace difference and work against intolerance to foster an inclusive environment. Our goal is to expose our members to the vast opportunities and daunting challenges in our work.',
+  },
+  {
+    header: 'Be critical.',
+    body: 'Criticism helps us grow. We are critical about the world we live in, our organization, and ourselves. Our community has an obligation to question the assumptions and decisions made by those around it. Our leaders constantly strive to improve our model by assessing our impact. Our members proactively ask for feedback and are forthcoming with feedback for others.',
+  },
+];
+
+const OurValues = () => {
+  const [selected, setSelected] = useState(() => Math.min(3, content.length - 1));
   const [displayValues, setDisplayValues] = useState([]);
   const [moveToNext, setMoveToNext] = useState(false);
   const autoScrollInterval = useRef(null);
@@ -30,6 +65,10 @@
   useEffect(() => {
     // whenever we need to move to the next element...
     if (moveToNext) {
+      if (content.length === 0) {
+        setMoveToNext(false);
+        return;
+      }
       // change which card is focused (wrapping to the start of the list if necessary)
       setSelected((selected + 1) % content.length);
       // once we're done scrolling to our focused card...
@@ -47,7 +86,7 @@
         setMoveToNext(false);
       }, 300);
     }
   }, [moveToNext]);
   return (
     <Container className={styles.root}>
       <h2>Our Values</h2>
@@ -56,15 +95,15 @@
           className={classNames(styles.value_card_container, {
             [styles.move]: moveToNext,
           })}>
-          {displayValues.map(({ header, body, image }) => (
+          {displayValues.map(({ header, body }) => (
             <article
               className={classNames(styles.value_card, {
-                [styles.selected]: content[selected].header === header,
+                [styles.selected]: content[selected]?.header === header,
               })}
               key={header}
               style={{ borderColor: '#0094FF' }}>
               <h3>{header}</h3>
-              <p>{body.json.content[0].content[0].value}</p>
+              <p>{body}</p>
             </article>
           ))}
         </div>

components/apply/nonprofit/servicesDetail.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import Section from '../../section';
 import { Container, Row } from 'reactstrap';
-import ContentBlock from '../../ContentBlock';
 
 export default function ServicesDetail({ content, title }) {
   return (
@@ -12,7 +11,7 @@ export default function ServicesDetail({ content, title }) {
         </Row>
 
         <Row>
-          <ContentBlock content={content.json} />
+          <p>{content}</p>
         </Row>
       </Container>
     </Section>

components/apply/timeline.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { VerticalTimeline, VerticalTimelineElement } from 'react-vertical-timeline-component';
-import ContentBlock from '../ContentBlock';
+import RichText from '../richText';
 
 function Icon({ src, alt }) {
   return (
@@ -19,19 +19,28 @@ function Icon({ src, alt }) {
 
 function Timeline({ steps }) {
   return (
-    <VerticalTimeline>
-      {steps &&
-        steps.map(({ header, body, image }) => (
-          <VerticalTimelineElement
-            className="vertical-timeline-element-work"
-            iconStyle={{ background: 'var(--accent-orange)', color: '#fff' }}
-            icon={<Icon src={image.url} alt={image.description} />}
-            key={header}>
-            <h3 className="vertical-timeline-element-title">{header}</h3>
-            <ContentBlock content={body.json} />
-          </VerticalTimelineElement>
-        ))}
-    </VerticalTimeline>
+    <>
+      <VerticalTimeline>
+        {steps &&
+          steps.map(({ header, body, image }) => (
+            <VerticalTimelineElement
+              className="vertical-timeline-element-work"
+              iconStyle={{ background: 'var(--accent-orange)', color: '#fff' }}
+              icon={<Icon src={image.url} alt={image.description} />}
+              key={header}>
+              <h3 className="vertical-timeline-element-title">{header}</h3>
+              <p>
+                <RichText segments={body} />
+              </p>
+            </VerticalTimelineElement>
+          ))}
+      </VerticalTimeline>
+      <style jsx>{`
+        p {
+          white-space: pre-line;
+        }
+      `}</style>
+    </>
   );
 }
 

components/clients/NonprofitScroll.jsx

@@ -1,7 +1,6 @@
 /* eslint-disable no-magic-numbers */
 import React, { useEffect, useState, useRef } from 'react';
 import { Container, Row, Col } from 'reactstrap';
-import ActionButton from '../actionButton';
 import BlockQuote from '../blockQuote';
 
 const NonprofitScroll = () => {
@@ -80,7 +79,8 @@ const NonprofitScroll = () => {
                   display: 'flex',
                   alignItems: 'center',
                   justifyContent: 'center',
-                }}>
+                }}
+              >
                 <img
                   src="/images/banner_sample.svg"
                   alt="Banner Sample"
@@ -121,7 +121,8 @@ const NonprofitScroll = () => {
           opacity: page2Opacity,
           visibility: page2Opacity > 0.1 ? 'visible' : 'hidden',
           pointerEvents: page2Opacity > 0.5 ? 'auto' : 'none', // Only allow interaction when mostly visible
-        }}>
+        }}
+      >
         <Container fluid>
           <div className="support-section">
             <Row className="align-items-center">
@@ -135,17 +136,12 @@ const NonprofitScroll = () => {
                   hack4impact has built for other nonprofits.
                 </p>
 
-                <div style={{ marginTop: '2rem' }}>
-                  <ActionButton white link="/clients/quizpage">
-                    Start
-                  </ActionButton>
-                </div>
-
                 {/* Back to top button */}
                 <div className="mt-4">
                   <button
                     className="btn btn-link text-muted"
-                    onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}>
+                    onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
+                  >
                     <span className="mr-2">↑</span> Back to top
                   </button>
                 </div>

components/faqQuestion.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Collapse } from 'reactstrap';
-import ContentBlock from './ContentBlock';
+import RichText from './richText';
 
 function FaqQuestion({ question, answer }) {
   const [isOpen, setIsOpen] = React.useState(false);
@@ -15,7 +15,9 @@ function FaqQuestion({ question, answer }) {
         {/* eslint-enable */}
         <Collapse isOpen={isOpen}>
           <div className="answer">
-            <ContentBlock content={answer.json} />
+            <p>
+              <RichText segments={answer} />
+            </p>
           </div>
         </Collapse>
       </div>
@@ -48,6 +50,9 @@ function FaqQuestion({ question, answer }) {
           margin: 0 10px;
           color: var(--gray);
         }
+        .answer p {
+          white-space: pre-line;
+        }
       `}</style>
     </>
   );

components/homePageProject.jsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import Link from 'next/link';
-import ContentBlock from './ContentBlock';
 
 function HomePageProject({ title, description, thumbnail, urlSlug }) {
   return (
@@ -9,7 +8,7 @@ function HomePageProject({ title, description, thumbnail, urlSlug }) {
         <div className="project-item">
           <img src={thumbnail.url} alt={thumbnail.description} />
           <h4>{title}</h4>
-          <ContentBlock content={description.json} />
+          <p>{description}</p>
         </div>
         <style jsx>{`
           @media (max-width: 768px) {

components/homepage/partnerSection.jsx

@@ -3,21 +3,31 @@ import Section from '../section';
 import { Container, Row } from 'reactstrap';
 import ActionLink from '../actionLink';
 
-export default function PartnerSection() {
+const TIER_ORDER = ['Platinum', 'Gold', 'Silver', 'Bronze'];
+
+export default function PartnerSection({ partners }) {
+  const tiers = TIER_ORDER.map((tier) => ({
+    tier,
+    partners: partners.filter((partner) => partner.tier === tier).sort((a, b) => a.order - b.order),
+  })).filter(({ partners: tierPartners }) => tierPartners.length > 0);
+
   return (
     <Section className="partners-section">
       <Container>
         <h2 className="section-title center mb-5">Our Partners</h2>
-        <div className="sponsor-row">
-          <a href="https://www.imc.com/" alt="IMC">
-            <img
-              width="150"
-              src="/images/imc-logo.jpg"
-              className="center partner-logos"
-              alt="IMC logo"
-            />
-          </a>
-        </div>
+        {tiers.map(({ tier, partners: tierPartners }) => (
+          <div className="tier-row" key={tier}>
+            <h3 className="tier-label">{tier}</h3>
+            <div className="sponsor-row">
+              {tierPartners.map(({ name, logoUrl, link }) => (
+                <a href={link} key={name} className="sponsor-item">
+                  <img width="150" src={logoUrl} className="partner-logos" alt={`${name} logo`} />
+                  <p className="sponsor-name">{name}</p>
+                </a>
+              ))}
+            </div>
+          </div>
+        ))}
         <Row>
           <div className="center partner-button">
             <ActionLink
@@ -36,6 +46,17 @@ export default function PartnerSection() {
           opacity: 0.7;
           font-weight: 300;
         }
+        .tier-row {
+          margin-bottom: 30px;
+        }
+        .tier-label {
+          text-align: center;
+          font-size: 16px;
+          font-weight: 600;
+          color: #373f46;
+          opacity: 0.7;
+          margin-bottom: 15px;
+        }
         .partner-button {
           margin-top: 30px !important;
         }
@@ -49,6 +70,18 @@ export default function PartnerSection() {
           justify-content: space-evenly;
           align-items: center;
         }
+        .sponsor-item {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+        }
+        .sponsor-name {
+          margin: 8px 0 0;
+          font-size: 14px;
+          color: #373f46;
+          opacity: 0.7;
+          text-align: center;
+        }
       `}</style>
     </Section>
   );

components/projects/featureSlider.jsx

@@ -80,7 +80,7 @@ function FeatureSlider({ features }) {
         .feature-slider-btn:hover h3 {
           color: var(--primary-blue) !important;
         }
-        .feature-slider-btn:hover 0 {
+        .feature-slider-btn:hover p {
           color: black !important;
         }
         .is-active h3 {

components/quote.jsx

@@ -3,7 +3,6 @@ import React from 'react';
 import QuoteSection from './quoteSection';
 
 import { Container, Row, Col } from 'reactstrap';
-import ContentBlock from './ContentBlock';
 
 const Quote = ({ quote, source, sourceTitle }) => (
   <QuoteSection grey>
@@ -12,7 +11,7 @@ const Quote = ({ quote, source, sourceTitle }) => (
         <Col md="12">
           <blockquote className="blockquote">
             <div className="project-body-quote">
-              <ContentBlock content={quote.json} />
+              <p>{quote}</p>
             </div>
             <footer className="blockquote-footer">
               {source}