add flower to background and adjust layout

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

View File

@ -23,16 +23,18 @@ 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} />
<Grid item xs={12} md={6} container spacing={1}>
<Grid item xs={12} md={2}>
<StaticImage <StaticImage
src="../images/autonomic-monster.png" src="../images/autonomic-monster.png"
alt="Autonomic monster logo" alt="Autonomic monster logo"
width={38} width={38}
/> />
</Grid> </Grid>
<Grid item xs={12} md={6}> <Grid item xs={12} md={5}>
<FooterText bold>{address.name}</FooterText> <FooterText bold>{address.name}</FooterText>
<FooterText>{address.line1}</FooterText> <FooterText>{address.line1}</FooterText>
<FooterText>{address.city}</FooterText> <FooterText>{address.city}</FooterText>
@ -47,6 +49,7 @@ const Footer = () => (
<FooterText bold>Member of the CoTech Network</FooterText> <FooterText bold>Member of the CoTech Network</FooterText>
</Grid> </Grid>
</Grid> </Grid>
</Grid>
</Container> </Container>
</Box> </Box>
) )

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 />

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB