125 lines
3.9 KiB
TypeScript
125 lines
3.9 KiB
TypeScript
import React from 'react'
|
|
import { Avatar, Box, IconButton, Stack, Typography } from '@mui/material'
|
|
import ExpandMore from '@mui/icons-material/ExpandMore'
|
|
|
|
import { EmailIconLink, InstagramIconLink, FacebookIconLink } from 'components/atoms/IconLinks/index.js'
|
|
|
|
const Hero = (props: { scrollTarget?: React.ForwardedRef<HTMLSelectElement> }) => {
|
|
return (
|
|
<Box
|
|
sx={theme => ({
|
|
position: 'relative',
|
|
|
|
minHeight: '100vh',
|
|
boxShadow: '0 0.25em 0.5em 0 rgba(0, 0, 0, 0.25)',
|
|
|
|
backgroundImage: 'url("images/banner2.webp")',
|
|
backgroundPosition: 'center center',
|
|
backgroundAttachment: { xs: 'scroll !important', md: 'fixed' },
|
|
backgroundSize: 'cover',
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
wrap: 'wrap',
|
|
|
|
...(theme.palette.mode === 'dark' && {
|
|
backgroundImage: 'url("images/banner2.png")',
|
|
}),
|
|
...(theme.palette.mode === 'light' && {
|
|
backgroundImage: 'url("images/banner2.png")',
|
|
'&::before': {
|
|
content: '""',
|
|
position: 'absolute',
|
|
top: 0,
|
|
left: 0,
|
|
width: '100%',
|
|
height: '100%',
|
|
zIndex: 0,
|
|
|
|
backgroundImage: 'inherit',
|
|
backgroundPosition: 'center center',
|
|
backgroundAttachment: 'inherit',
|
|
backgroundSize: 'cover',
|
|
|
|
filter: 'blur(5px)',
|
|
},
|
|
}),
|
|
})}>
|
|
<Box
|
|
color="white"
|
|
sx={theme => ({
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
gap: '3em',
|
|
zIndex: 1,
|
|
|
|
[theme.breakpoints.down('md')]: {
|
|
flexDirection: 'column',
|
|
textAlign: 'center',
|
|
padding: '2em',
|
|
},
|
|
[theme.breakpoints.up('md')]: {
|
|
flexDirection: 'row',
|
|
textAlign: 'right',
|
|
padding: '6em',
|
|
},
|
|
})}>
|
|
<Box>
|
|
<Typography component="h1" variant="h1" maxWidth="md">
|
|
Compagnia d'Arme{' '}
|
|
<Typography component="small" variant="h2">
|
|
del
|
|
</Typography>{' '}
|
|
Santo Luca
|
|
</Typography>
|
|
<Typography variant="h3">Ferrara</Typography>
|
|
<Stack
|
|
direction="row"
|
|
gap={2}
|
|
mt={2}
|
|
justifyContent={{ xs: 'center', md: 'end' }}
|
|
color={t => (t.palette.mode === 'light' ? 'inherit' : 'text.secondary')}>
|
|
<EmailIconLink fontSize="large" sx={{ ':hover': { color: 'text.primary' } }} href="mailto:compagniasantoluca@gmail.com" />
|
|
<FacebookIconLink fontSize="large" sx={{ ':hover': { color: 'text.primary' } }} href="https://facebook.com/compagniadarmedelsantoluca/" />
|
|
<InstagramIconLink
|
|
fontSize="large"
|
|
sx={{ ':hover': { color: 'text.primary' } }}
|
|
href="https://www.instagram.com/compagnia_darme_santo_luca/"
|
|
/>
|
|
</Stack>
|
|
</Box>
|
|
<Avatar
|
|
alt="Avatar"
|
|
src="logo.png"
|
|
variant="square"
|
|
sx={{
|
|
display: 'inline-block',
|
|
verticalAlign: 'middle',
|
|
height: { xs: '8em', md: '18em' },
|
|
width: { xs: '8em', md: '18em' },
|
|
}}
|
|
/>
|
|
</Box>
|
|
|
|
{props.scrollTarget && (
|
|
<IconButton
|
|
size="large"
|
|
onClick={() => (props.scrollTarget as React.RefObject<HTMLElement | null>).current?.scrollIntoView()}
|
|
sx={{
|
|
position: 'absolute',
|
|
p: 1,
|
|
bottom: 2,
|
|
left: '50%',
|
|
transform: 'translate(-50%, 0)',
|
|
color: t => (t.palette.mode === 'light' ? 'white' : 'text.primary'),
|
|
}}>
|
|
<ExpandMore fontSize="large" />
|
|
</IconButton>
|
|
)}
|
|
</Box>
|
|
)
|
|
}
|
|
|
|
export default Hero
|