Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 | // import * as React from "react";
// import { palette } from "@palette";
// mui
import Box from "@mui/material/Box";
import Grid from "@mui/material/Grid";
// components
import BannerBox from "./BannerBox";
const container = {
position: "relative",
marginBottom: 3.5,
marginTop: 1,
width: 358,
};
const backgroundGradient = {
position: "absolute",
borderRadius: "8px",
height: 324,
width: 177,
top: -70.68,
left: "calc(50% - 177px/2)",
transform: "rotate(90deg)",
transition: "top 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
background:
"linear-gradient(104.33deg, #D0B2DD 25.61%, #b3a1bb 54.5%, #E6B96F 82.41%)",
};
const mainContent = {
padding: "12px 8px",
borderRadius: "12px",
background: "rgba(246, 250, 255, 0.8)",
boxShadow: "0px 4px 16px rgba(0, 0, 0, 0.05)",
backdropFilter: "blur(9px)",
position: "relative",
"& .MuiAccordion-root": {
background: "transparent",
},
"& .MuiButton-root": {
padding: "8px 16px",
whiteSpace: "nowrap",
},
};
const BannerMobile = () => {
return (
<Box sx={container}>
<Box sx={backgroundGradient} />
<Box sx={mainContent}>
<Grid container spacing={1}>
<Grid item xs={6}>
<BannerBox digits={4021.23} isAmount type="Sum Total" small />
</Grid>
<Grid item xs={6}>
<BannerBox digits={3} type="Events" small />
</Grid>
<Grid item xs={6}>
<BannerBox digits={0} type="Memberships" small />
</Grid>
<Grid item xs={6}>
<BannerBox digits={18} type="Donations" small />
</Grid>
<Grid item xs={6}>
<BannerBox digits={11} type="Sweepstakes" small />
</Grid>
<Grid item xs={6}>
<BannerBox digits={12} type="Invoices" small />
</Grid>
</Grid>
</Box>
</Box>
);
};
export default BannerMobile;
|