add Landing page (#7)

2024-11-10 02:45:54 +03:00
parent 7ff8a99505
commit 1930333d64
44 changed files with 639 additions and 11 deletions
--- a/src/components/landing/HeroSection/HeroSection.tsx
+++ b/src/components/landing/HeroSection/HeroSection.tsx
@@ -0,0 +1,60 @@
+import React, { FC } from 'react';
+import { Box, Heading, Text, Center, VStack, BoxProps } from '@chakra-ui/react';
+import { DemoVideo } from '../../../assets/videos';
+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={DemoVideo}
+        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>
+  );
+};