scaffold footer

src/components/footer.js

@@ -0,0 +1,50 @@
+import { Box, Container, Grid, Typography } from "@mui/material"
+import { StaticImage } from "gatsby-plugin-image"
+import React from "react"
+
+const address={
+  name: "Autonomic Co-operative Limited",
+  line1: "1539 Pershore Road",
+  city: "Birmingham",
+  postcode: "B30 2JH",
+  country: "United Kingdom"
+}
+
+const FooterText = ({ children, bold }) => {
+  const normalStyle = { fontSize: 10, lineHeight: "14px" }
+  const boldStyle = { fontSize: 14 }
+  return <Typography sx={bold ? boldStyle : normalStyle}>{children}</Typography>
+}
+
+const Footer = () => (
+  <Box
+    component="footer"
+    color="secondary.contrastText"
+    bgcolor="secondary.main"
+    py={5}
+  >
+    <Container maxWidth="sm">
+      <Grid container>
+        <Grid item xs={12} md={1}>
+          <StaticImage src="../images/autonomic-monster.png" width={38} />
+        </Grid>
+        <Grid item xs={12} md={6}>
+          <FooterText bold>{address.name}</FooterText>
+          <FooterText>{address.line1}</FooterText>
+          <FooterText>{address.city}</FooterText>
+          <FooterText>{address.postcode}</FooterText>
+          <FooterText>{address.country}</FooterText>
+        </Grid>
+        <Grid item xs={12} md={5}>
+          <FooterText bold>
+            We are a Co-operative Society registered with the FCA.
+          </FooterText>
+          <FooterText>Registration Number: 4597</FooterText>
+          <FooterText bold>Member of the CoTech Network</FooterText>
+        </Grid>
+      </Grid>
+    </Container>
+  </Box>
+)
+
+export default Footer

src/components/layout.js

@@ -3,6 +3,7 @@ import { Link as GatsbyLink } from "gatsby"
 import { AppBar, Container, CssBaseline, Grid, Link, ThemeProvider, Toolbar } from "@mui/material"
 import NavMenu from "./nav-menu"
 import theme from "./theme"
+import Footer from "./footer"
 
 const Layout = ({ location, title, children }) => {
   // const rootPath = `${__PATH_PREFIX__}/`
@@ -26,7 +27,7 @@ const Layout = ({ location, title, children }) => {
   return (
     <>
       <ThemeProvider theme={theme}>
-      <CssBaseline />
+        <CssBaseline />
         <AppBar
           component="header"
           color="transparent"
@@ -44,7 +45,7 @@ const Layout = ({ location, title, children }) => {
             </Link>
           </Toolbar>
         </AppBar>
-        <Container maxWidth="md" >
+        <Container maxWidth="md" sx={{ py: 8 }}>
           <Grid container>
             <Grid item xs={12} md={3}>
               <NavMenu />
@@ -53,12 +54,8 @@ const Layout = ({ location, title, children }) => {
               <main>{children}</main>
             </Grid>
           </Grid>
-          <footer>
-            © {new Date().getFullYear()}, Built with
-            {` `}
-            <a href="https://www.gatsbyjs.com">Gatsby</a>
-          </footer>
         </Container>
+        <Footer />
       </ThemeProvider>
     </>
   )