footer: complete content and style

gatsby-browser.js

@@ -1,3 +1,5 @@
 import "@fontsource/karmilla/400.css"
 import "@fontsource/karmilla/700.css"
+import "@fontsource/darker-grotesque/400.css"
 import "@fontsource/darker-grotesque/600.css"
+import "@fontsource/darker-grotesque/700.css"

src/components/footer.js

@@ -1,6 +1,7 @@
-import { Box, Container, Grid, Typography } from "@mui/material"
+import { Box, Container, Grid, Link, Stack, Typography } from "@mui/material"
 import { StaticImage } from "gatsby-plugin-image"
 import React from "react"
+import theme from "./theme"
 
 const address={
   name: "Autonomic Co-operative Limited",
@@ -10,18 +11,56 @@ const address={
   country: "United Kingdom"
 }
 
-const FooterText = ({ children, bold }) => {
+const FooterText = ({ children, bold, sx }) => {
-  const normalStyle = { fontSize: 10, lineHeight: "14px" }
+  const normalStyle = {
-  const boldStyle = { fontSize: 14 }
+    ...sx,
+    fontSize: 10,
+    lineHeight: "12px",
+  }
+  const boldStyle = {
+    ...normalStyle,
+    fontFamily: `"Darker Grotesque", sans-serif`,
+    fontSize: 14,
+    lineHeight: "16px",
+    fontWeight: 700,
+  }
   return <Typography sx={bold ? boldStyle : normalStyle}>{children}</Typography>
 }
 
+const ConnectWithUs = () => (
+  <svg
+    width="148"
+    height="12"
+    viewBox="0 0 148 12"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M3.27949 12H8.87949V10.6H3.27949L3.27949 12ZM0.479492 9.2H1.87949L1.87949 10.6H3.27949L3.27949 6.4H1.87949L1.87949 7.8H0.479492L0.479492 9.2ZM3.27949 6.4H6.07949V5L3.27949 5L3.27949 6.4ZM6.07949 7.8H7.47949V6.4H6.07949V7.8ZM8.87949 10.6H10.2795V9.2H8.87949V10.6ZM18.6822 9.2H17.2822V6.4H15.8822L15.8822 9.2H14.4822V10.6H11.6822V12H15.8822V10.6H18.6822V9.2ZM10.2822 10.6L11.6822 10.6L11.6822 6.4L10.2822 6.4L10.2822 10.6ZM11.6822 6.4H13.0822L13.0822 9.2H14.4822L14.4822 6.4H15.8822V5H11.6822V6.4ZM18.6822 9.2H20.0822V7.8H18.6822V9.2ZM22.885 6.4V5H21.485V6.4H22.885ZM20.085 9.2H21.485V6.4H20.085V9.2ZM22.885 12H24.285V6.4H22.885V12ZM24.285 6.4H25.685V5H24.285V6.4ZM25.685 10.6H27.085V6.4H25.685V10.6ZM27.085 12H28.485V10.6H27.085V12ZM28.485 10.6H29.885V9.2H28.485V10.6ZM32.6877 6.4V5H31.2877V6.4H32.6877ZM29.8877 9.2H31.2877V6.4H29.8877V9.2ZM32.6877 12L34.0877 12V6.4L32.6877 6.4V12ZM34.0877 6.4H35.4877V5H34.0877V6.4ZM35.4877 10.6H36.8877V6.4H35.4877V10.6ZM36.8877 12H38.2877V10.6H36.8877V12ZM38.2877 10.6H39.6877V9.2H38.2877V10.6ZM39.6904 7.8V9.2H41.0904V10.6H42.4904V9.2H45.2904V7.8H42.4904V6.4H41.0904V7.8H39.6904ZM42.4904 12H48.0904V10.6H42.4904V12ZM42.4904 6.4H45.2904V5H42.4904V6.4ZM45.2904 7.8H46.6904V6.4H45.2904V7.8ZM48.0904 10.6H49.4904V9.2H48.0904V10.6ZM52.2932 12L57.8932 12V10.6L52.2932 10.6V12ZM49.4932 9.2H50.8932V10.6H52.2932V6.4H50.8932V7.8H49.4932V9.2ZM52.2932 6.4H55.0932V5H52.2932V6.4ZM55.0932 7.8L56.4932 7.8V6.4L55.0932 6.4V7.8ZM57.8932 10.6H59.2932V9.2H57.8932V10.6ZM62.0959 3.6V5H63.4959V6.4H62.0959V7.814H63.4959V10.6H64.8959V5H67.6959V3.6H64.8959V2.2H63.4959V3.6H62.0959ZM59.2959 9.2H62.0959V7.814H59.2959V9.2ZM64.8959 12H67.6959V10.6H64.8959V12ZM67.6959 10.6H69.0959V9.2H67.6959V10.6ZM83.1014 10.6V7.8H81.7014V10.6H83.1014ZM78.9014 10.6H80.3014V5H78.9014V10.6ZM80.3014 12H81.7014V10.6H80.3014V12ZM83.1014 12H85.9014V10.6H83.1014V12ZM84.5014 6.4H85.9014V5H84.5014V6.4ZM85.9014 10.6H88.7014V9.2H87.3014V6.4H85.9014V10.6ZM90.1041 7.8H88.7041V9.2H90.1041V7.8ZM90.1041 7.8H91.5041V6.4H92.9041V10.6H94.3041V5L91.5041 5V6.386H90.1041V7.8ZM92.9041 3.6L94.3041 3.6V2.2L92.9041 2.2V3.6ZM94.3041 12H97.1041V10.6H94.3041V12ZM97.1041 10.6H98.5041V9.2H97.1041V10.6ZM101.307 3.6V5H102.707V6.4H101.307V7.814H102.707V10.6H104.107V5L106.907 5V3.6L104.107 3.6V2.2H102.707V3.6H101.307ZM98.5068 9.2L101.307 9.2V7.814L98.5068 7.814V9.2ZM104.107 12H106.907V10.6H104.107V12ZM106.907 10.6H108.307V9.2H106.907V10.6ZM111.11 7.8H112.51V6.4H111.11V2.2H109.71V7.8H108.31V9.2H109.71V12H111.11V7.8ZM111.11 2.2H113.91V0.8H111.11V2.2ZM112.51 10.6H113.91V7.8H112.51V10.6ZM112.51 6.4H113.91V5H112.51V6.4ZM113.91 12H116.71V10.6H113.91V12ZM113.91 5H115.31V2.2H113.91V5ZM116.71 10.6H118.11V9.2H116.71V10.6ZM127.915 7.8V9.2H129.315V10.6H130.715V5H129.315V7.8H127.915ZM130.715 12H133.515V10.6H130.715V12ZM133.515 10.6H134.915V5H133.515V10.6ZM134.915 12H136.315V10.6H134.915V12ZM136.315 10.6H137.715V9.2H136.315V10.6ZM141.918 6.4V5H140.518V3.6H139.118V7.8H140.518V6.4H141.918ZM137.718 9.2H139.118V7.8H137.718V9.2ZM140.518 10.6H141.918V9.2H140.518V10.6ZM141.918 12H143.318V10.6H141.918V12ZM141.918 9.2H143.318V10.6L144.718 10.6V9.2H147.518V7.8L143.318 7.8V6.4H141.918V9.2Z"
+      fill="white"
+    />
+  </svg>
+)
+
+const connectLinks = [
+  { label: "RSS feed", url: "/" },
+  { label: "Fedivers", url: "/" },
+  { label: "Gitea", url: "/" },
+  { label: "Matrix", url: "/" },
+]
+
 const Footer = () => (
   <Box
     component="footer"
     color="secondary.contrastText"
     bgcolor="secondary.main"
     py={5}
+    sx={{
+      "& .MuiLink-root": {
+        color: theme.palette.secondary.contrastText,
+        textDecorationColor: theme.palette.secondary.contrastText,
+      },
+    }}
   >
     <Container maxWidth="lg">
       <Grid container>
@@ -36,19 +75,46 @@ const Footer = () => (
           </Grid>
           <Grid item xs={12} md={5}>
             <FooterText bold>{address.name}</FooterText>
-            <FooterText>{address.line1}</FooterText>
+            <FooterText>
-            <FooterText>{address.city}</FooterText>
+              {address.line1}
-            <FooterText>{address.postcode}</FooterText>
+              <br />
-            <FooterText>{address.country}</FooterText>
+              {address.city}
+              <br />
+              {address.postcode}
+              <br />
+              {address.country}
+            </FooterText>
           </Grid>
           <Grid item xs={12} md={5}>
             <FooterText bold>
-              We are a Co-operative Society registered with the FCA.
+              We are a Co-operative Society registered with the{" "}
+              <Link href="https://mutuals.fca.org.uk/" target="_blank">
+                FCA
+              </Link>
+              .
+            </FooterText>
+            <FooterText sx={{ pt: 0.5 }}>Registration Number: 4597</FooterText>
+            <FooterText bold sx={{ pt: 1 }}>
+              Member of the{" "}
+              <Link href="https://www.coops.tech/" target="_blank">
+                CoTech Network
+              </Link>
             </FooterText>
-            <FooterText>Registration Number: 4597</FooterText>
-            <FooterText bold>Member of the CoTech Network</FooterText>
           </Grid>
         </Grid>
+        <Grid item xs={12} md={4}>
+          <Stack spacing={1} alignItems="center">
+            <ConnectWithUs />
+            <Stack direction="row" spacing={2}>
+              {connectLinks.map(({ label, path }) => (
+                <Link key={label} to={path} fontSize={10}>
+                  {label}
+                </Link>
+              ))}
+            </Stack>
+            <FooterText>helo[at]autonomic.zone</FooterText>
+          </Stack>
+        </Grid>
       </Grid>
     </Container>
   </Box>