66 lines
1.6 KiB
TypeScript
66 lines
1.6 KiB
TypeScript
import React, { FC } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { Box, Heading, Text, Center, VStack } from '@chakra-ui/react';
|
|
|
|
import { DemoVideoPosterImg } from '../../../assets/images';
|
|
import { CtaButton, SiteLogo, PageSection } from '../';
|
|
|
|
import { HeroSectionProps } from './types';
|
|
|
|
export const HeroSection: FC<HeroSectionProps> = ({
|
|
data: { headline, description, video } = {},
|
|
flexShrink,
|
|
}) => {
|
|
const { t } = useTranslation('~', { keyPrefix: 'dry-wash.landing' });
|
|
|
|
return (
|
|
<Box flexShrink={flexShrink} as='header' pos='relative' zIndex={0}>
|
|
<Box
|
|
as='video'
|
|
src={`${__webpack_public_path__}/remote-assets/${video}`}
|
|
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' }}
|
|
>
|
|
{t(headline)}
|
|
</Heading>
|
|
<Text
|
|
textAlign='center'
|
|
__css={{ textWrap: 'balance' }}
|
|
color='white'
|
|
>
|
|
{t(description)}
|
|
</Text>
|
|
</VStack>
|
|
<CtaButton size='lg' />
|
|
</PageSection>
|
|
</Box>
|
|
);
|
|
};
|