Can you assist me in achieving this specific look? I have my MUI app bar and home page set up, but I'm unsure how to create the blue-ish box behind the image. Should I place the container within my app bar or integrate it into my homepage file? Additionally, there's a significant gap between the app bar and title in my current design that I would like to eliminate.
Desired outcome: https://i.stack.imgur.com/18glc.png
Current result: https://i.stack.imgur.com/BxG9x.png
Here is a snippet of the code:
return (
<ThemeProvider theme={theme}>
<Grid container component="main" sx={{ backgroundColor: '#FBF3EA', display: "flex", justifyContent: "center", position: 'absolute' }} >
<Box component="section">
<Container sx={{ py: 10 }} maxWidth="lg">
<Grid container alignItems="center" spacing={3}>
<Grid item xs={12} md={5}>
<Box sx={{
display: 'flex',
ml: '850px',
width: '500px',
mt: '-160px'
}}>
<Container sx={{backgroundColor: '#99CCCB', width: 300, height: 500 }} xs={12} sm={6} md={6}></Container >
</Box>
<Typography component="h1" variant="h3">
Real Pet food fresh from the fridge.
</Typography>
<Stack direction="row" spacing={2} sx={{ mt: 4 }}>
<Button size="large" variant="contained" sx={{
backgroundColor: '#124944',
textTransform: 'none'
}}>
Shop Now
</Button>
</Stack>
</Grid>
<Grid item>
<Grid container sx={{display: 'flex', flexWrap: 'nowrap'}}>
<Grid item>
<img width="150px" height="175px" src={dogHome} alt="dog food" />
</Grid>
<Grid item sx={{width:'100%'}}>
<Card>
<CardContent>
<Grid container spacing={3}
sx={{
"& .MuiGrid-item:last-child > .MuiBox-root": {
border: "none",
},
}}>
<Grid item>
<Box >
<Typography fontFamily="Righteous" gutterBottom color="text.secondary" variant="h4" sx={{display: 'flex', justifyContent: 'center'}}> 200 + </Typography>
<Typography fontFamily="Righteous" variant="h5" sx={{display: 'flex', justifyContent: 'center'}}> Nutritional Complete </Typography>
</Box>
</Grid>
<Grid item>
<Box>
<Typography fontFamily="Righteous" gutterBottom color="text.secondary" variant="h4" sx={{display: 'flex', justifyContent: 'center'}}> 1k </Typography>
<Typography fontFamily="Righteous" variant="h5" sx={{display: 'flex', justifyContent: 'center'}}> Product Sales </Typography>
</Box>
</Grid>
<Grid item>
<Box>
<Typography fontFamily="Righteous" gutterBottom color="text.secondary" variant="h4" sx={{display: 'flex', justifyContent: 'center'}}> 96% </Typography>
<Typography fontFamily="Righteous" variant="h5" sx={{display: 'flex', justifyContent: 'center'}}> Client Satisfaction </Typography>
</Box>
</Grid>
</Grid>
</CardContent>
</Card>
</Grid>
</Grid>
</Grid>