feat: add translations to landing (#18)

src/components/landing/HeroSection/HeroSection.tsx

@@ -1,4 +1,5 @@
 import React, { FC } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Box, Heading, Text, Center, VStack, BoxProps } from '@chakra-ui/react';
 import { DemoVideoPosterImg } from '../../../assets/images';
 import { CtaButton, SiteLogo, PageSection } from '../';
@@ -6,6 +7,10 @@ import { CtaButton, SiteLogo, PageSection } from '../';
 type HeroSectionProps = Pick<BoxProps, 'flexShrink'>;
 
 export const HeroSection: FC<HeroSectionProps> = ({ flexShrink }) => {
+  const { t } = useTranslation('~', {
+    keyPrefix: 'dry-wash.landing.hero-section',
+  });
+
   return (
     <Box flexShrink={flexShrink} as='header' pos='relative' zIndex={0}>
       <Box
@@ -41,19 +46,18 @@ export const HeroSection: FC<HeroSectionProps> = ({ flexShrink }) => {
             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>
   );
-};
+};