add flower to background and adjust layout

src/components/footer.js

@@ -23,28 +23,31 @@ const Footer = () => (
     bgcolor="secondary.main"
     py={5}
   >
-    <Container maxWidth="sm">
+    <Container maxWidth="lg">
       <Grid container>
-        <Grid item xs={12} md={1}>
+        <Grid item xs={false} md={2} />
-          <StaticImage
+        <Grid item xs={12} md={6} container spacing={1}>
-            src="../images/autonomic-monster.png"
+          <Grid item xs={12} md={2}>
-            alt="Autonomic monster logo"
+            <StaticImage
-            width={38}
+              src="../images/autonomic-monster.png"
-          />
+              alt="Autonomic monster logo"
-        </Grid>
+              width={38}
-        <Grid item xs={12} md={6}>
+            />
-          <FooterText bold>{address.name}</FooterText>
+          </Grid>
-          <FooterText>{address.line1}</FooterText>
+          <Grid item xs={12} md={5}>
-          <FooterText>{address.city}</FooterText>
+            <FooterText bold>{address.name}</FooterText>
-          <FooterText>{address.postcode}</FooterText>
+            <FooterText>{address.line1}</FooterText>
-          <FooterText>{address.country}</FooterText>
+            <FooterText>{address.city}</FooterText>
-        </Grid>
+            <FooterText>{address.postcode}</FooterText>
-        <Grid item xs={12} md={5}>
+            <FooterText>{address.country}</FooterText>
-          <FooterText bold>
+          </Grid>
-            We are a Co-operative Society registered with the FCA.
+          <Grid item xs={12} md={5}>
-          </FooterText>
+            <FooterText bold>
-          <FooterText>Registration Number: 4597</FooterText>
+              We are a Co-operative Society registered with the FCA.
-          <FooterText bold>Member of the CoTech Network</FooterText>
+            </FooterText>
+            <FooterText>Registration Number: 4597</FooterText>
+            <FooterText bold>Member of the CoTech Network</FooterText>
+          </Grid>
         </Grid>
       </Grid>
     </Container>

src/components/layout.js

@@ -1,9 +1,10 @@
 import * as React from "react"
 import { Link as GatsbyLink } from "gatsby"
-import { AppBar, Container, CssBaseline, Grid, Link, ThemeProvider, Toolbar } from "@mui/material"
+import { AppBar, Box, Container, CssBaseline, Grid, Link, ThemeProvider, Toolbar } from "@mui/material"
 import NavMenu from "./nav-menu"
 import theme from "./theme"
 import Footer from "./footer"
+import flower from "../images/flower.png"
 
 const Layout = ({ location, title, children }) => {
   // const rootPath = `${__PATH_PREFIX__}/`
@@ -45,14 +46,29 @@ const Layout = ({ location, title, children }) => {
             </Link>
           </Toolbar>
         </AppBar>
-        <Container maxWidth="md" sx={{ py: 8 }}>
+        <Container maxWidth="lg" sx={{ py: 8 }}>
           <Grid container spacing={2}>
-            <Grid item xs={12} md={3}>
+            <Grid item xs={12} md={2}>
               <NavMenu location={location} />
             </Grid>
-            <Grid item xs={12} md={9}>
+            <Grid item xs={12} md={6}>
               <main>{children}</main>
             </Grid>
+            <Grid item xs={12} md={4}>
+              <Box position={"relative"} height="100%" zIndex={-100}>
+                <Box
+                  sx={{
+                    position: "absolute",
+                    height: "100%",
+                    width: "100%",
+                    bottom: -90,
+                    backgroundImage: `url(${flower})`,
+                    backgroundRepeat: "no-repeat",
+                    backgroundPositionY: "100%",
+                  }}
+                />
+              </Box>
+            </Grid>
           </Grid>
         </Container>
         <Footer />

src/components/nav-menu.js

@@ -14,7 +14,7 @@ const navMenuItems = [
 const NavMenu = ({ location }) => {
   return (
     <Box pt={18} component="nav">
-      <Stack spacing={2} alignItems="flex-end" mr={8}>
+      <Stack spacing={2} alignItems="flex-end" mr={6}>
         {navMenuItems.map(({ label, path }) => (
           <Link
             component={GatsbyLink}