44 lines
1.3 KiB
JavaScript
44 lines
1.3 KiB
JavaScript
import Container from '@mui/material/Container';
|
|
import Stack from '@mui/material/Stack';
|
|
import Typography from '@mui/material/Typography';
|
|
|
|
export default function Headline({ pageTitle, pageDescription }) {
|
|
return (
|
|
|
|
<Container
|
|
sx={{
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center'
|
|
}}
|
|
>
|
|
<Stack
|
|
spacing={2}
|
|
useFlexGap
|
|
sx={{ alignItems: 'center', width: { xs: '100%', sm: '70%' } }}
|
|
>
|
|
<Typography
|
|
variant="h1"
|
|
sx={{
|
|
display: 'flex',
|
|
flexDirection: { xs: 'column', sm: 'row' },
|
|
alignItems: 'center',
|
|
fontSize: 'clamp(3rem, 10vw, 3.5rem)',
|
|
}}
|
|
>
|
|
{pageTitle}
|
|
</Typography>
|
|
<Typography
|
|
sx={{
|
|
textAlign: 'center',
|
|
color: 'text.secondary',
|
|
width: { sm: '100%', md: '80%' },
|
|
}}
|
|
>
|
|
{pageDescription}
|
|
</Typography>
|
|
</Stack>
|
|
</Container>
|
|
);
|
|
}
|