Home page how it works section #311 (#349)

client/src/components/DisplayGrids/InstructionGrid.tsx

@@ -28,19 +28,19 @@ const instructionStyles = makeStyles<Theme, InstructionProps>((theme: Theme) =>
 }));
 
 type InstructionProps = {
-  instructionList: { title: string; body: string; image: string }[];
+  instructionsArray: { title: string; body: string; image: string }[];
 };
 
 function InstructionGrid(props: InstructionProps) {
   const classes = instructionStyles(props);
 
   return (
     <Grid container justifyContent="space-between" className={`${classes.gridBoxes}`}>
-      {props.instructionList.map((instructionItem, index) => {
-        var text = <GridText title={instructionItem.title} body={instructionItem.body} />;
-        var image = <GridImage image={instructionItem.image} />;
+      {props.instructionsArray.map((instructions, index) => {
+        var text = <GridText title={instructions.title} body={instructions.body} />;
+        var image = <GridImage image={instructions.image} />;
         return (
-          <React.Fragment key={`${instructionItem.title}_${index}`}>
+          <React.Fragment key={`${instructions.title}_${index}`}>
             {/* Set order of the two jsx items - odd number rows have text first, even have image first */}
             {index % 2 === 0 ? image : text}
             {index % 2 === 0 ? text : image}

client/src/theme/typography.ts

@@ -22,6 +22,10 @@ const typography = {
     fontSize: '2.2rem',
     fontWeight: 'bold',
   },
+  h4: {
+    fontSize: '1.8rem',
+    fontWeight: 'bold',
+  },
   marginBottom: 0,
 };
 

client/src/views/Home.tsx

@@ -3,6 +3,7 @@ import BannerSection from '../components/BannerSection';
 import NeedsCarousel from '../components/NeedsCarousel';
 import DonationsCarousel from '../components/DonationsCarousel';
 import FAQs from '../components/FAQs';
+import HowItWorks from './HowItWorks';
 
 function Home(): JSX.Element {
   return (
@@ -11,6 +12,7 @@ function Home(): JSX.Element {
       <BannerSection />
       <NeedsCarousel label={'Recent Needs From Nonprofits'} />
       <DonationsCarousel label={'Recent Offers From Users'} />
+      <HowItWorks />
       <FAQs />
     </>
   );