footer: complete content and style

This commit is contained in:
desmukh 2023-01-08 23:57:46 +05:00
parent 709067eeaa
commit b81611968d
2 changed files with 80 additions and 12 deletions

View File

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

View File

@ -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 { StaticImage } from "gatsby-plugin-image"
import React from "react" import React from "react"
import theme from "./theme"
const address={ const address={
name: "Autonomic Co-operative Limited", name: "Autonomic Co-operative Limited",
@ -10,18 +11,56 @@ const address={
country: "United Kingdom" 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> 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 = () => ( const Footer = () => (
<Box <Box
component="footer" component="footer"
color="secondary.contrastText" color="secondary.contrastText"
bgcolor="secondary.main" bgcolor="secondary.main"
py={5} py={5}
sx={{
"& .MuiLink-root": {
color: theme.palette.secondary.contrastText,
textDecorationColor: theme.palette.secondary.contrastText,
},
}}
> >
<Container maxWidth="lg"> <Container maxWidth="lg">
<Grid container> <Grid container>
@ -36,19 +75,46 @@ const Footer = () => (
</Grid> </Grid>
<Grid item xs={12} md={5}> <Grid item xs={12} md={5}>
<FooterText bold>{address.name}</FooterText> <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>
<Grid item xs={12} md={5}> <Grid item xs={12} md={5}>
<FooterText bold> <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>
<FooterText>Registration Number: 4597</FooterText>
<FooterText bold>Member of the CoTech Network</FooterText>
</Grid> </Grid>
</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> </Grid>
</Container> </Container>
</Box> </Box>