diff --git a/src/components/landing/BenefitsSection/BenefitsSection.tsx b/src/components/landing/BenefitsSection/BenefitsSection.tsx index 6132df2..9eca7e8 100644 --- a/src/components/landing/BenefitsSection/BenefitsSection.tsx +++ b/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 ( - Преимущества экологичной автомойки + {t('heading')} - Откройте для себя преимущества наших услуг по химчистке автомобилей + {t('description')} - {[ - { - Icon: MdEco, - children: 'Экологически безопасные продукты', - }, - { - Icon: MdMiscellaneousServices, - children: 'Быстрое и эффективное обслуживание', - }, - { - Icon: MdPlace, - children: 'Удобный мобильный доступ', - }, - { - Icon: MdHandshake, - children: 'Надежный и заслуживающий доверия', - }, - ].map((props, i) => ( + {listData.map((props, i) => ( ))} diff --git a/src/components/landing/BenefitsSection/ListItem/ListItem.tsx b/src/components/landing/BenefitsSection/ListItem/ListItem.tsx index 4c9343d..c614b7c 100644 --- a/src/components/landing/BenefitsSection/ListItem/ListItem.tsx +++ b/src/components/landing/BenefitsSection/ListItem/ListItem.tsx @@ -2,7 +2,7 @@ import React, { FC, PropsWithChildren } from 'react'; import { ListIcon, ListItem as ChakraListItem } from '@chakra-ui/react'; import { IconType } from 'react-icons'; -type ListItemProps = PropsWithChildren & { +export type ListItemProps = PropsWithChildren & { Icon: IconType; }; diff --git a/src/components/landing/BenefitsSection/ListItem/index.ts b/src/components/landing/BenefitsSection/ListItem/index.ts index de932bf..4f5863f 100644 --- a/src/components/landing/BenefitsSection/ListItem/index.ts +++ b/src/components/landing/BenefitsSection/ListItem/index.ts @@ -1 +1 @@ -export { ListItem } from './ListItem'; \ No newline at end of file +export { type ListItemProps, ListItem } from './ListItem'; \ No newline at end of file diff --git a/src/components/landing/CtaButton/CtaButton.tsx b/src/components/landing/CtaButton/CtaButton.tsx index a1bb9a2..c4681fa 100644 --- a/src/components/landing/CtaButton/CtaButton.tsx +++ b/src/components/landing/CtaButton/CtaButton.tsx @@ -1,12 +1,20 @@ import React, { FC } from 'react'; +import { useTranslation } from 'react-i18next'; import { Link as RouterLink } from 'react-router-dom'; import { ButtonProps, Button } from '@chakra-ui/react'; import { URLs } from '../../../__data__/urls'; export const CtaButton: FC = (props) => { + const { t } = useTranslation(); + return ( - ); }; diff --git a/src/components/landing/Footer/Copyright/Copyright.tsx b/src/components/landing/Footer/Copyright/Copyright.tsx index bc26f23..95acf2d 100644 --- a/src/components/landing/Footer/Copyright/Copyright.tsx +++ b/src/components/landing/Footer/Copyright/Copyright.tsx @@ -1,8 +1,11 @@ import React, { FC } from 'react'; +import { useTranslation } from 'react-i18next'; import { Text } from '@chakra-ui/react'; const currentYear = new Date().getFullYear(); export const Copyright: FC = () => { - return © {currentYear} DryMaster. Все права защищены; + const { t } = useTranslation(); + + return {t('dry-wash.landing.footer.copyright', { currentYear })}; }; diff --git a/src/components/landing/Footer/Footer.tsx b/src/components/landing/Footer/Footer.tsx index 26b8462..2ac9ec8 100644 --- a/src/components/landing/Footer/Footer.tsx +++ b/src/components/landing/Footer/Footer.tsx @@ -1,20 +1,27 @@ import React, { FC } from 'react'; +import { useTranslation } from 'react-i18next'; import { Link, List, ListItem } from '@chakra-ui/react'; import { Link as RouterLink } from 'react-router-dom'; import { SiteLogo, PageSection } from '../'; import { Copyright } from './Copyright'; export const Footer: FC = () => { + const { t } = useTranslation('~', { + keyPrefix: 'dry-wash.landing.footer.links', + }); + + const listData = [ + { to: '#', label: t('privacy-policy') }, + { to: '#', label: t('service-terms') }, + { to: '#', label: t('faq') }, + ]; + return ( - {[ - { to: '#', label: 'Политика конфиденциальности' }, - { to: '#', label: 'Условия обслуживания' }, - { to: '#', label: 'FAQ' }, - ].map(({ to, label }, i) => ( + {listData.map(({ to, label }, i) => ( {label} diff --git a/src/components/landing/HeroSection/HeroSection.tsx b/src/components/landing/HeroSection/HeroSection.tsx index 412eab0..6f8bc54 100644 --- a/src/components/landing/HeroSection/HeroSection.tsx +++ b/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; export const HeroSection: FC = ({ flexShrink }) => { + const { t } = useTranslation('~', { + keyPrefix: 'dry-wash.landing.hero-section', + }); + return ( = ({ flexShrink }) => { color='white' __css={{ textWrap: 'balance' }} > - Оживите свою поездку с помощью экологически чистого ухода! + {t('headline')} - Ощутите максимальное удобство сухой мойки автомобилей, созданной для - того, чтобы планета стала чище + {t('description')} ); -}; \ No newline at end of file +}; diff --git a/src/components/landing/SiteLogo/SiteLogo.tsx b/src/components/landing/SiteLogo/SiteLogo.tsx index 449a117..efb1936 100644 --- a/src/components/landing/SiteLogo/SiteLogo.tsx +++ b/src/components/landing/SiteLogo/SiteLogo.tsx @@ -1,10 +1,12 @@ import React, { FC } from 'react'; +import { useTranslation } from 'react-i18next'; import { Image } from '@chakra-ui/react'; import { LogoSvg } from '../../../assets/icons'; export const SiteLogo: FC = () => { - return Логотип компании "Сухой мастер"; + const { t } = useTranslation(); + + return {t('dry-wash.landing.site-logo')}; }; -// todo: add i18n for alt -// todo: replace Image by SVG React component \ No newline at end of file +// todo: replace Image by SVG React component diff --git a/src/components/landing/SocialProofSection/ReviewsSlider/ReviewsSlider.tsx b/src/components/landing/SocialProofSection/ReviewsSlider/ReviewsSlider.tsx index be89118..756a9f5 100644 --- a/src/components/landing/SocialProofSection/ReviewsSlider/ReviewsSlider.tsx +++ b/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); diff --git a/src/components/landing/SocialProofSection/SocialProofSection.tsx b/src/components/landing/SocialProofSection/SocialProofSection.tsx index d2ec90a..7357eb5 100644 --- a/src/components/landing/SocialProofSection/SocialProofSection.tsx +++ b/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 ( - Нас выбирают + {t('heading')} diff --git a/src/pages/order-form/index.tsx b/src/pages/order-form/index.tsx index 0caf395..4b6617d 100644 --- a/src/pages/order-form/index.tsx +++ b/src/pages/order-form/index.tsx @@ -2,13 +2,13 @@ import React from 'react'; import { Link as RouterLink } from 'react-router-dom'; import { Button } from '@chakra-ui/react'; import { URLs } from '../../__data__/urls'; -import { mockOrders } from '../../mocks/landing'; +import { mockOrder } from '../../mocks/landing'; const Page = () => { return ( <>

Order form

- {mockOrders.map(({ id }) => ( + {mockOrder.orders.map(({ id }) => (