59 lines
1.7 KiB
TypeScript
59 lines
1.7 KiB
TypeScript
import React, { FC } from 'react';
|
||
import { Box, Heading, Text, Center, VStack, BoxProps } from '@chakra-ui/react';
|
||
import { DemoVideoPosterImg } from '../../../assets/images';
|
||
import { CtaButton, SiteLogo, PageSection } from '../';
|
||
|
||
type HeroSectionProps = Pick<BoxProps, 'flexShrink'>;
|
||
|
||
export const HeroSection: FC<HeroSectionProps> = ({ flexShrink }) => {
|
||
return (
|
||
<Box flexShrink={flexShrink} as='header' pos='relative' zIndex={0}>
|
||
<Box
|
||
as='video'
|
||
src={`${__webpack_public_path__}/remote-assets/demo.mp4`}
|
||
poster={DemoVideoPosterImg}
|
||
autoPlay
|
||
loop
|
||
muted
|
||
w='full'
|
||
h='full'
|
||
pos='absolute'
|
||
objectFit='cover'
|
||
filter='brightness(50%)'
|
||
zIndex={-1}
|
||
/>
|
||
<PageSection
|
||
h='full'
|
||
minH='375px'
|
||
maxH='1000px'
|
||
py={10}
|
||
justifyContent='center'
|
||
alignItems='center'
|
||
spacing={8}
|
||
>
|
||
<Center>
|
||
<SiteLogo />
|
||
</Center>
|
||
<VStack spacing={4}>
|
||
<Heading
|
||
as='h1'
|
||
textAlign='center'
|
||
color='white'
|
||
__css={{ textWrap: 'balance' }}
|
||
>
|
||
Оживите свою поездку с помощью экологически чистого ухода!
|
||
</Heading>
|
||
<Text
|
||
textAlign='center'
|
||
__css={{ textWrap: 'balance' }}
|
||
color='white'
|
||
>
|
||
Ощутите максимальное удобство сухой мойки автомобилей, созданной для
|
||
того, чтобы планета стала чище
|
||
</Text>
|
||
</VStack>
|
||
<CtaButton size='lg' />
|
||
</PageSection>
|
||
</Box>
|
||
);
|
||
}; |