Merge pull request #160 from cisagov/feature/rsc

Updated ReadySetCyber Footer

frontend/src/components/Layout.tsx

@@ -62,7 +62,7 @@ export const Layout: React.FC<LayoutProps> = ({ children }) => {
         ) : (
           <>
             <RSCHeader />
-            <div>{children}</div>
+            <div className={classes.content}>{children}</div>
             <RSCFooter />
           </>
         )}

frontend/src/components/ReadySetCyber/RSCFooter.tsx

@@ -1,10 +1,85 @@
 import React from 'react';
-import { BottomNavigation } from '@mui/material';
+import { Box, Grid, Link, Typography, Stack } from '@mui/material';
+import cisaFooterLogo from './assets/cisa_footer_logo.png';
+import { links } from './links';
 
 export const RSCFooter: React.FC = () => {
   return (
-    <BottomNavigation>
-      <h1>Ready Set Cyber Footer</h1>
-    </BottomNavigation>
+    <Box
+      sx={{
+        width: '100%',
+        display: 'flex',
+        position: 'relative',
+        bottom: 0,
+        justifyContent: 'center',
+        backgroundColor: '#005285',
+        paddingTop: '1em',
+        paddingBottom: '1em'
+      }}
+    >
+      <Box
+        sx={{
+          maxWidth: '80vw',
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center'
+        }}
+      >
+        <Stack direction={'row'} gap={'1em'} paddingBottom={'2em'}>
+          <img
+            src={cisaFooterLogo}
+            alt="CISA Footer Logo"
+            style={{
+              width: 55,
+              height: 55,
+              flexShrink: 0
+            }}
+          />
+          <Stack justifyContent={'center'}>
+            <Typography
+              style={{
+                color: 'white',
+                fontSize: '0.85em'
+              }}
+            >
+              CISA.gov
+            </Typography>
+            <Typography
+              style={{
+                color: 'white',
+                fontSize: '0.85em'
+              }}
+            >
+              An Official website of the U.S. Department of Homeland Security
+            </Typography>
+          </Stack>
+        </Stack>
+        <Grid
+          container
+          spacing={2}
+          sx={{
+            textAlign: {
+              xs: 'center',
+              sm: 'left'
+            }
+          }}
+        >
+          {links.map((link, index) => (
+            <Grid item xs={4} sm={3} key={index}>
+              <Link
+                style={{
+                  color: 'white',
+                  textDecoration: 'underline',
+                  fontSize: '0.9em'
+                }}
+                href={link.href}
+              >
+                {link.text}
+              </Link>
+            </Grid>
+          ))}
+        </Grid>
+      </Box>
+    </Box>
   );
 };

frontend/src/components/ReadySetCyber/links.ts

@@ -0,0 +1,14 @@
+export const links = [
+  { text: 'About CISA', href: '#link1' },
+  { text: 'Accessibility', href: '#link2' },
+  { text: 'Budget and Performance', href: '#link3' },
+  { text: 'DHS.gov', href: '#link10' },
+  { text: 'FOIA Requests', href: '#link4' },
+  { text: 'No FEAR Act', href: '#link5' },
+  { text: 'Office of Inspector General', href: '#link6' },
+  { text: 'Privacy Policy', href: '#link11' },
+  { text: 'Subscribe', href: '#link7' },
+  { text: 'The White House', href: '#link8' },
+  { text: 'USA.gov', href: '#link9' },
+  { text: 'Website Feedback', href: '#link12' }
+];