fahad/autonomic-zone-gatsby
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add flower to background and adjust layout

Browse Source
This commit is contained in:
desmukh 2023-01-08 02:14:09 +05:00
parent e1adea64af
commit ac79178248
4 changed files with 45 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
src/components/footer.js
View File

@ -23,28 +23,31 @@ const Footer = () => (
bgcolor="secondary.main" bgcolor="secondary.main"
py={5} py={5}
> >
<Container maxWidth="sm"> <Container maxWidth="lg">
<Grid container> <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>
</Grid> </Grid>
</Container> </Container>

24
src/components/layout.js
View File

@ -1,9 +1,10 @@
import * as React from "react" import * as React from "react"
import { Link as GatsbyLink } from "gatsby" 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 NavMenu from "./nav-menu"
import theme from "./theme" import theme from "./theme"
import Footer from "./footer" import Footer from "./footer"
import flower from "../images/flower.png"
const Layout = ({ location, title, children }) => { const Layout = ({ location, title, children }) => {
// const rootPath = `${__PATH_PREFIX__}/` // const rootPath = `${__PATH_PREFIX__}/`
@ -45,14 +46,29 @@ const Layout = ({ location, title, children }) => {
</Link> </Link>
</Toolbar> </Toolbar>
</AppBar> </AppBar>
<Container maxWidth="md" sx={{ py: 8 }}> <Container maxWidth="lg" sx={{ py: 8 }}>
<Grid container spacing={2}> <Grid container spacing={2}>
<Grid item xs={12} md={3}> <Grid item xs={12} md={2}>
<NavMenu location={location} /> <NavMenu location={location} />
</Grid> </Grid>
<Grid item xs={12} md={9}> <Grid item xs={12} md={6}>
<main>{children}</main> <main>{children}</main>
</Grid> </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> </Grid>
</Container> </Container>
<Footer /> <Footer />

2
src/components/nav-menu.js
View File

@ -14,7 +14,7 @@ const navMenuItems = [
const NavMenu = ({ location }) => { const NavMenu = ({ location }) => {
return ( return (
<Box pt={18} component="nav"> <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 }) => ( {navMenuItems.map(({ label, path }) => (
<Link <Link
component={GatsbyLink} component={GatsbyLink}

BIN
src/images/flower.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB