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> ); };