Spaces:
Running
Running
File size: 1,453 Bytes
5c85958 |
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 |
import { Box, Container, Typography } from '@mui/material';
export default function Section({
id,
children,
background = 'default',
maxWidth = 'lg',
sx = {},
}) {
const bgColors = {
default: 'background.default',
alt: 'background.alt',
dark: 'secondary.main',
};
return (
<Box
id={id}
component="section"
sx={{
py: { xs: 10, md: 15 },
backgroundColor: bgColors[background] || background,
...sx,
}}
>
<Container maxWidth={maxWidth}>{children}</Container>
</Box>
);
}
export function SectionHeader({ eyebrow, title, subtitle, light = false }) {
return (
<Box sx={{ textAlign: 'center', maxWidth: 700, mx: 'auto', mb: { xs: 6, md: 10 } }}>
{eyebrow && (
<Typography
variant="overline"
component="p"
sx={{ color: light ? 'rgba(255,255,255,0.7)' : 'primary.main', mb: 2 }}
>
{eyebrow}
</Typography>
)}
<Typography
variant="h2"
component="h2"
sx={{ mb: 2.5, color: light ? 'white' : 'text.primary' }}
>
{title}
</Typography>
{subtitle && (
<Typography
variant="body1"
sx={{
color: light ? 'rgba(255,255,255,0.8)' : 'text.secondary',
fontSize: 19,
lineHeight: 1.6,
}}
>
{subtitle}
</Typography>
)}
</Box>
);
}
|