feat: add translations to landing (#18)

src/components/landing/SocialProofSection/ReviewsSlider/ReviewsSlider.tsx

@@ -1,4 +1,5 @@
 import React, { FC, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import {
   Tab,
   TabList,
@@ -7,13 +8,17 @@ import {
   Tabs,
   Text,
 } from '@chakra-ui/react';
-import { mockReviews } from '../../../../mocks/landing';
+import { mockReview } from '../../../../mocks/landing';
+import { Review } from '../../../../models';
 import { ReviewCard } from './ReviewCard';
 
-const reviewsCount = mockReviews.length;
 const SLIDE_CHANGE_INTERVAL = 5000;
 
 export const ReviewsSlider: FC = () => {
+  const { i18n } = useTranslation();
+  const mockReviews: Review.View[] = mockReview.getReviewsByLocale(i18n.language);
+  const reviewsCount = mockReviews.length;
+
   const [activeTab, setActiveTab] = useState(0);
   const [isSlideShowStopped, setIsSlideShowStopped] = useState(false);
 

src/components/landing/SocialProofSection/SocialProofSection.tsx

@@ -1,15 +1,17 @@
 import React, { FC } from 'react';
-import {
-  Heading,
-  HStack,
-} from '@chakra-ui/react';
+import { useTranslation } from 'react-i18next';
+import { Heading, HStack } from '@chakra-ui/react';
 import { CtaButton, PageSection } from '../';
 import { ReviewsSlider } from './ReviewsSlider';
 
 export const SocialProofSection: FC = () => {
+  const { t } = useTranslation('~', {
+    keyPrefix: 'dry-wash.landing.social-proof-section',
+  });
+
   return (
     <PageSection>
-      <Heading as='h2'>Нас выбирают</Heading>
+      <Heading as='h2'>{t('heading')}</Heading>
       <ReviewsSlider />
       <HStack w='full' justify='flex-end'>
         <CtaButton />