footer: complete content and style
This commit is contained in:
desmukh
parent
709067eeaa
commit
b81611968d
|
|
@ -1,3 +1,5 @@
|
|||
import "@fontsource/karmilla/400.css"
|
||||
import "@fontsource/karmilla/700.css"
|
||||
import "@fontsource/darker-grotesque/600.css"
|
||||
import "@fontsource/darker-grotesque/400.css"
|
||||
import "@fontsource/darker-grotesque/600.css"
|
||||
import "@fontsource/darker-grotesque/700.css"
|
||||
|
|
@ -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 normalStyle = { fontSize: 10, lineHeight: "14px" }
|
||||
const boldStyle = { fontSize: 14 }
|
||||
const FooterText = ({ children, bold, sx }) => {
|
||||
const normalStyle = {
|
||||
...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>{address.city}</FooterText>
|
||||
<FooterText>{address.postcode}</FooterText>
|
||||
<FooterText>{address.country}</FooterText>
|
||||
<FooterText>
|
||||
{address.line1}
|
||||
<br />
|
||||
{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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue