feat: add translations to landing (#18)

src/components/landing/BenefitsSection/BenefitsSection.tsx

@@ -1,4 +1,5 @@
 import React, { FC } from 'react';
+import { useTranslation } from 'react-i18next';
 import {
   MdEco,
   MdMiscellaneousServices,
@@ -10,33 +11,39 @@ import { CtaButton, PageSection } from '../';
 import { ListItem } from './ListItem';
 
 export const BenefitsSection: FC = () => {
+  const { t } = useTranslation('~', {
+    keyPrefix: 'dry-wash.landing.benefits-section',
+  });
+
+  const listData = [
+    {
+      Icon: MdEco,
+      children: t('list.0'),
+    },
+    {
+      Icon: MdMiscellaneousServices,
+      children: t('list.1'),
+    },
+    {
+      Icon: MdPlace,
+      children: t('list.2'),
+    },
+    {
+      Icon: MdHandshake,
+      children: t('list.3'),
+    },
+  ];
+
   return (
     <PageSection>
       <VStack w='full' spacing={2}>
-        <Heading as='h2'>Преимущества экологичной автомойки</Heading>
+        <Heading as='h2'>{t('heading')}</Heading>
         <Text>
-          Откройте для себя преимущества наших услуг по химчистке автомобилей
+          {t('description')}
         </Text>
       </VStack>
       <List display='flex' flexDirection='column' spacing={3}>
-        {[
-          {
-            Icon: MdEco,
-            children: 'Экологически безопасные продукты',
-          },
-          {
-            Icon: MdMiscellaneousServices,
-            children: 'Быстрое и эффективное обслуживание',
-          },
-          {
-            Icon: MdPlace,
-            children: 'Удобный мобильный доступ',
-          },
-          {
-            Icon: MdHandshake,
-            children: 'Надежный и заслуживающий доверия',
-          },
-        ].map((props, i) => (
+        {listData.map((props, i) => (
           <ListItem key={i} {...props} />
         ))}
       </List>