Adding new logos and lings to footers

Updates to some hero logo images
A11y titles for hero logo images
Lines for home step component

src/components/app/Footer.js

@@ -4,6 +4,7 @@ import { Container, Column } from '../layout';
 import { Link } from '../core';
 import AFLogo from '../../images/af-logo.svg';
 import C3Logo from '../../images/c3.png';
+import AFMCLogo from '../../images/AFMC.png';
 
 const Footer = () => {
   const size = useContext(ResponsiveContext);
@@ -18,29 +19,55 @@ const Footer = () => {
           justify="between"
           direction={isMobile ? 'column' : 'row'}
           gap="large"
-          aria-hidden="true"
         >
           <Box
-            gap="medium"
-            justify="center"
+            gap="small"
+            justify="start"
             align={isMobile ? 'center' : 'start'}
           >
             <Link to="/about-us/" color="light-1" size="small" weight="bold">
               About Us
             </Link>
+            <Link
+              to="/our-other-programs/"
+              color="light-1"
+              size="small"
+              weight="bold"
+            >
+              Our Other Programs
+            </Link>
+            <Link
+              to="https://www.wpafb.af.mil/Welcome/Fact-Sheets/Display/Article/835716/88-abw-freedom-of-information-act-foia-88-abw-installation-privacy-office/"
+              color="light-1"
+              size="small"
+            >
+              FOIA
+            </Link>
           </Box>
           <Box
             direction={isMobile ? 'column' : 'row'}
             gap="medium"
             align="center"
           >
-            <img
-              src={C3Logo}
-              width="117"
-              height="117"
-              alt="C3I & Networks Directorate logo"
-            />
-            <AFLogo height="117" />
+            <Link to="https://www.aflcmc.af.mil/WELCOME/Organizations/Command-Control-Communications-Intelligence-Networks-Directorate/">
+              <img
+                src={C3Logo}
+                width="117"
+                height="117"
+                alt="C3I & Networks Directorate"
+              />
+            </Link>
+            <Link to="https://www.afmc.af.mil/">
+              <img
+                src={AFMCLogo}
+                width="117"
+                height="117"
+                alt="Air Force Material Command"
+              />
+            </Link>
+            <Link to="https://www.af.mil/">
+              <AFLogo height="117" width="150" />
+            </Link>
           </Box>
         </Box>
       </Column>

src/components/hero/Hero.js

@@ -84,7 +84,8 @@ const Slide = ({ title, subtitle, core, cta, slug, logo, isMobile, size }) => {
             <Box style={{ maxWidth: '600px', maxHeight: '250px' }}>
               <Img
                 fluid={logo.childImageSharp.fluid}
-                imgStyle={{ objectFit: 'contain' }}
+                imgStyle={{ objectFit: 'contain', objectPosition: '0 50%' }}
+                alt={title}
               />
             </Box>
           )}
@@ -253,7 +254,7 @@ const Hero = () => {
   return (
     <Box
       height="85vh"
-      style={{ position: 'relative', minHeight: '500px' }}
+      style={{ position: 'relative', minHeight: '680px' }}
       background="brand"
     >
       <Container fill="vertical">

src/components/hero/ServiceCatHero.js

@@ -56,7 +56,11 @@ const ServiceCatHero = ({ title, description, imageFluid, iconName }) => {
               {title}
             </Heading>
             <Box width={isMobile ? 'auto' : '500px'}>
-              {description && <Markdown>{description}</Markdown>}
+              {description && (
+                <Markdown size="small" margin="0">
+                  {description}
+                </Markdown>
+              )}
             </Box>
           </Box>
           {!isMobile && (
@@ -67,7 +71,7 @@ const ServiceCatHero = ({ title, description, imageFluid, iconName }) => {
               gap="medium"
               flex={{ grow: 1 }}
             >
-              <IconComponent size="300" color={isMobile ? 'dark-4' : 'white'} />
+              <IconComponent size="200" color={isMobile ? 'dark-4' : 'white'} />
             </Box>
           )}
         </Box>

src/components/pages/home/Steps.js

@@ -2,63 +2,76 @@ import React, { useContext } from 'react';
 import { Box, Text, ResponsiveContext } from 'grommet';
 import { DtHex } from '../../icons';
 
-const Step = ({ number, isMobile, children }) => (
-  <Box style={{ position: 'relative' }}>
-    {/* TODO: Add this line
-    <Box
-      height="1px"
-      background="dark-1"
-      width="100%"
-      style={{ position: 'absolute', top: '32px' }}
-    /> */}
-    <Box
-      basis="1/4"
-      pad={{ horizontal: 'small' }}
-      align="center"
-      direction={isMobile ? 'row' : 'column'}
-      gap="medium"
-    >
+const Step = ({ number, isMobile, children }) => {
+  const hzLineStyle = { position: 'absolute', top: '32px', width: '100%' };
+  const vtLineStyle = { position: 'absolute', left: '45px', height: '100%' };
+  if (number === 1) {
+    hzLineStyle.left = '50%';
+    hzLineStyle.width = '50%';
+    vtLineStyle.top = '50%';
+    vtLineStyle.height = '50%';
+  }
+  if (number === 4) {
+    hzLineStyle.right = '50%';
+    hzLineStyle.width = '50%';
+    vtLineStyle.bottom = '50%';
+    vtLineStyle.height = '50%';
+  }
+  return (
+    <Box style={{ position: 'relative' }}>
+      {!isMobile && (
+        <Box height="1px" background="light-1" style={hzLineStyle} />
+      )}
+      {isMobile && <Box width="1px" background="light-1" style={vtLineStyle} />}
       <Box
-        height="65px"
-        width="80px"
-        flex={{ shrink: 0 }}
-        style={{ position: 'relative' }}
+        basis="1/4"
+        pad={{ horizontal: 'small', vertical: isMobile ? 'medium' : '0' }}
         align="center"
-        justify="center"
+        direction={isMobile ? 'row' : 'column'}
+        gap="medium"
       >
-        <Text
-          size="xlarge"
-          weight="bold"
-          color="accent-2"
-          style={{ zIndex: 2 }}
+        <Box
+          height="65px"
+          width="80px"
+          flex={{ shrink: 0 }}
+          style={{ position: 'relative' }}
+          align="center"
+          justify="center"
         >
-          {number}
-        </Text>
-        <DtHex
-          color="accent-2"
-          size="65"
-          style={{
-            position: 'absolute',
-            top: '50%',
-            zIndex: 0,
-            transform: 'translateY(-50%)',
-          }}
-        />
-        <DtHex
-          color="black"
-          size="59"
-          style={{
-            position: 'absolute',
-            top: '50%',
-            zIndex: 0,
-            transform: 'translateY(-50%)',
-          }}
-        />
+          <Text
+            size="xlarge"
+            weight="bold"
+            color="accent-2"
+            style={{ zIndex: 2 }}
+          >
+            {number}
+          </Text>
+          <DtHex
+            color="accent-2"
+            size="65"
+            style={{
+              position: 'absolute',
+              top: '50%',
+              zIndex: 0,
+              transform: 'translateY(-50%)',
+            }}
+          />
+          <DtHex
+            color="black"
+            size="59"
+            style={{
+              position: 'absolute',
+              top: '50%',
+              zIndex: 0,
+              transform: 'translateY(-50%)',
+            }}
+          />
+        </Box>
+        <Box align="center">{children}</Box>
       </Box>
-      <Box align="center">{children}</Box>
     </Box>
-  </Box>
-);
+  );
+};
 
 const Steps = () => {
   const size = useContext(ResponsiveContext);
@@ -70,7 +83,6 @@ const Steps = () => {
       direction={isMobile ? 'column' : 'row'}
       width={isMobile ? 'medium' : 'large'}
       pad={{ vertical: 'large' }}
-      gap={isMobile ? 'large' : 'none'}
     >
       <Step number={1} isMobile={isMobile}>
         <Text size="small" textAlign={isMobile ? 'start' : 'center'}>

src/data/hero/4_summit.yaml

-name: Summit
-title: Summit
+name: SEITaaS Summit
+title: SEITaaS Summit
 subtitle: SAP network-as-a-service
 core: true
 cta: Learn More

src/images/af-logo.svg

 <svg id="AF_LOGO" data-name="AF LOGO" xmlns="http://www.w3.org/2000/svg" width="189.115" height="147.431" viewBox="0 0 189.115 147.431" role="img">
-<title>U.S Air Force logo</title>
+  <title>U.S Air Force</title>
   <g id="Group_50" data-name="Group 50" transform="translate(31.865)">
     <path id="Path_501" data-name="Path 501" d="M-449.651,114.53l-11.987,8.708,14.6,10.606,4.577-14.09Z" transform="translate(495.628 -32.302)" fill="#fff"/>
     <path id="Path_502" data-name="Path 502" d="M-429.749,146.409l11.986,8.707,11.979-8.707-11.979-8.711Z" transform="translate(480.491 -43.299)" fill="#fff"/>