From 67fda2fc6e3447b73a1fb3f2dc2824f6f3dbd464 Mon Sep 17 00:00:00 2001 From: Sokilskill Date: Thu, 3 Oct 2024 23:56:49 +0300 Subject: [PATCH 1/4] style: add div with overflow hidden --- src/App.tsx | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 101a187..c449341 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -13,16 +13,17 @@ const App: React.FC = () => { path="/" element={ }> - - + + + - + + } From b0c4eade28c03b012efc72d6eecf64fca536dddd Mon Sep 17 00:00:00 2001 From: Sokilskill Date: Mon, 21 Oct 2024 10:55:01 +0300 Subject: [PATCH 2/4] feat: add i18n --- package-lock.json | 76 ++++++++++++++++++- package.json | 9 ++- src/assets/logo/logo-mobile.svg | 10 +-- src/components/Card/Card.tsx | 17 +++-- src/components/Card/CardInfo.tsx | 5 +- src/components/Footer/DonationInfo.tsx | 13 ++-- src/components/Footer/SocialSection.tsx | 4 +- src/components/Header/Header.tsx | 16 ++-- src/components/Logo.tsx | 50 ++++++------ src/components/MobMenu/MobMenu.tsx | 9 ++- src/components/NavList/NavList.tsx | 25 +++--- src/components/Sections/SectionAbout.tsx | 37 ++------- src/components/Sections/SectionChoose.tsx | 9 ++- .../SectionContacts/AddressComponent.tsx | 11 ++- .../SectionContacts/SectionContacts.tsx | 10 ++- src/components/Sections/SectionHelp.tsx | 50 ++++++------ src/components/Sections/SectionHero.tsx | 9 ++- src/components/Sections/SectionLocation.tsx | 8 +- src/components/Sections/SectionTerms.tsx | 31 ++++---- .../SelectLanguage/SelectLanguage.tsx | 27 +++++-- src/data/animals.json | 64 ++++------------ src/data/navList.ts | 44 +++++------ src/i18n/index.ts | 23 ++++++ src/i18n/locales/en/aboutSection.json | 8 ++ src/i18n/locales/en/addressSection.json | 14 ++++ src/i18n/locales/en/animals.json | 36 +++++++++ src/i18n/locales/en/cardSection.json | 8 ++ src/i18n/locales/en/chooseSection.json | 7 ++ src/i18n/locales/en/common.json | 13 ++++ src/i18n/locales/en/donationInfo.json | 12 +++ src/i18n/locales/en/helpSection.json | 10 +++ src/i18n/locales/en/heroSection.json | 7 ++ src/i18n/locales/en/navigation.json | 27 +++++++ src/i18n/locales/en/termsSection.json | 19 +++++ src/i18n/locales/en/translation.ts | 29 +++++++ src/i18n/locales/uk/aboutSection.json | 8 ++ src/i18n/locales/uk/addressSection.json | 14 ++++ src/i18n/locales/uk/animals.json | 36 +++++++++ src/i18n/locales/uk/cardSection.json | 8 ++ src/i18n/locales/uk/chooseSection.json | 7 ++ src/i18n/locales/uk/common.json | 10 +++ src/i18n/locales/uk/donationInfo.json | 10 +++ src/i18n/locales/uk/helpSection.json | 10 +++ src/i18n/locales/uk/heroSection.json | 7 ++ src/i18n/locales/uk/navigation.json | 27 +++++++ src/i18n/locales/uk/termsSection.json | 19 +++++ src/i18n/locales/uk/translation.ts | 30 ++++++++ src/main.tsx | 1 + src/types/Animal.ts | 2 +- tsconfig.json | 2 +- 50 files changed, 703 insertions(+), 235 deletions(-) create mode 100644 src/i18n/index.ts create mode 100644 src/i18n/locales/en/aboutSection.json create mode 100644 src/i18n/locales/en/addressSection.json create mode 100644 src/i18n/locales/en/animals.json create mode 100644 src/i18n/locales/en/cardSection.json create mode 100644 src/i18n/locales/en/chooseSection.json create mode 100644 src/i18n/locales/en/common.json create mode 100644 src/i18n/locales/en/donationInfo.json create mode 100644 src/i18n/locales/en/helpSection.json create mode 100644 src/i18n/locales/en/heroSection.json create mode 100644 src/i18n/locales/en/navigation.json create mode 100644 src/i18n/locales/en/termsSection.json create mode 100644 src/i18n/locales/en/translation.ts create mode 100644 src/i18n/locales/uk/aboutSection.json create mode 100644 src/i18n/locales/uk/addressSection.json create mode 100644 src/i18n/locales/uk/animals.json create mode 100644 src/i18n/locales/uk/cardSection.json create mode 100644 src/i18n/locales/uk/chooseSection.json create mode 100644 src/i18n/locales/uk/common.json create mode 100644 src/i18n/locales/uk/donationInfo.json create mode 100644 src/i18n/locales/uk/helpSection.json create mode 100644 src/i18n/locales/uk/heroSection.json create mode 100644 src/i18n/locales/uk/navigation.json create mode 100644 src/i18n/locales/uk/termsSection.json create mode 100644 src/i18n/locales/uk/translation.ts diff --git a/package-lock.json b/package-lock.json index b3520d6..1c343cb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,8 +12,11 @@ "@emotion/react": "^11.11.4", "@emotion/styled": "^11.11.0", "framer-motion": "^11.0.20", + "i18next": "^23.15.1", + "i18next-browser-languagedetector": "^8.0.0", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-i18next": "^15.0.2", "react-router-dom": "^6.22.3", "swiper": "^11.1.0" }, @@ -348,9 +351,9 @@ } }, "node_modules/@babel/runtime": { - "version": "7.24.1", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.1.tgz", - "integrity": "sha512-+BIznRzyqBf+2wCTxcKE3wDjfGeCoVE61KSHGpkzqrLi8qxqFwBeUFyId2cxkTmm55fzDGnm0+yCxaxygrLUnQ==", + "version": "7.25.7", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.25.7.tgz", + "integrity": "sha512-FjoyLe754PMiYsFaN5C94ttGiOmBNYTf6pLr4xXHAT5uctHb092PBszndLDR5XA/jghQvn4n7JMHl7dmTgbm9w==", "dependencies": { "regenerator-runtime": "^0.14.0" }, @@ -4004,6 +4007,14 @@ "react-is": "^16.7.0" } }, + "node_modules/html-parse-stringify": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz", + "integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==", + "dependencies": { + "void-elements": "3.1.0" + } + }, "node_modules/human-signals": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz", @@ -4028,6 +4039,36 @@ "url": "https://github.com/sponsors/typicode" } }, + "node_modules/i18next": { + "version": "23.15.1", + "resolved": "https://registry.npmjs.org/i18next/-/i18next-23.15.1.tgz", + "integrity": "sha512-wB4abZ3uK7EWodYisHl/asf8UYEhrI/vj/8aoSsrj/ZDxj4/UXPOa1KvFt1Fq5hkUHquNqwFlDprmjZ8iySgYA==", + "funding": [ + { + "type": "individual", + "url": "https://locize.com" + }, + { + "type": "individual", + "url": "https://locize.com/i18next.html" + }, + { + "type": "individual", + "url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project" + } + ], + "dependencies": { + "@babel/runtime": "^7.23.2" + } + }, + "node_modules/i18next-browser-languagedetector": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/i18next-browser-languagedetector/-/i18next-browser-languagedetector-8.0.0.tgz", + "integrity": "sha512-zhXdJXTTCoG39QsrOCiOabnWj2jecouOqbchu3EfhtSHxIB5Uugnm9JaizenOy39h7ne3+fLikIjeW88+rgszw==", + "dependencies": { + "@babel/runtime": "^7.23.2" + } + }, "node_modules/ignore": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz", @@ -5059,6 +5100,27 @@ } } }, + "node_modules/react-i18next": { + "version": "15.0.2", + "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-15.0.2.tgz", + "integrity": "sha512-z0W3/RES9Idv3MmJUcf0mDNeeMOUXe+xoL0kPfQPbDoZHmni/XsIoq5zgT2MCFUiau283GuBUK578uD/mkAbLQ==", + "dependencies": { + "@babel/runtime": "^7.25.0", + "html-parse-stringify": "^3.0.1" + }, + "peerDependencies": { + "i18next": ">= 23.2.3", + "react": ">= 16.8.0" + }, + "peerDependenciesMeta": { + "react-dom": { + "optional": true + }, + "react-native": { + "optional": true + } + } + }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", @@ -5791,6 +5853,14 @@ } } }, + "node_modules/void-elements": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz", + "integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/which": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", diff --git a/package.json b/package.json index 67f5344..9902d6b 100644 --- a/package.json +++ b/package.json @@ -14,8 +14,11 @@ "@emotion/react": "^11.11.4", "@emotion/styled": "^11.11.0", "framer-motion": "^11.0.20", + "i18next": "^23.15.1", + "i18next-browser-languagedetector": "^8.0.0", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-i18next": "^15.0.2", "react-router-dom": "^6.22.3", "swiper": "^11.1.0" }, @@ -28,10 +31,10 @@ "eslint": "^8.57.0", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.4.6", - "typescript": "^5.2.2", - "vite": "^5.2.0", "husky": "^7.0.4", "lint-staged": "^12.1.3", - "prettier": "^2.4.1" + "prettier": "^2.4.1", + "typescript": "^5.2.2", + "vite": "^5.2.0" } } diff --git a/src/assets/logo/logo-mobile.svg b/src/assets/logo/logo-mobile.svg index a6645e9..5ef6ca2 100644 --- a/src/assets/logo/logo-mobile.svg +++ b/src/assets/logo/logo-mobile.svg @@ -1,9 +1,9 @@ - - + + - - + + - + diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx index 90e7208..ef67f48 100644 --- a/src/components/Card/Card.tsx +++ b/src/components/Card/Card.tsx @@ -2,28 +2,32 @@ import { Flex, Image, useBreakpointValue } from "@chakra-ui/react"; import { Animal } from "../../types"; import { CardInfo } from "./CardInfo"; import { CardButton } from "./CardButton"; +import { useTranslation } from "react-i18next"; interface CardProps { item: Animal; } export const Card: React.FC = ({ item }) => { - const { imgLg, imgMob, name, age, description } = item; + const { t } = useTranslation(); + + const { imgLg, imgMob, translationKey, age, description } = item; const getImageSrc = useBreakpointValue({ base: imgMob, md: imgLg, lg: imgLg, }); - // форматування відображення віку const formatAge = () => { let ageText = ""; if (age.year) { - ageText = `${age.year} ${Number(age.year) > 1 ? "роки" : "рік"} `; + ageText = `${age.year} ${ + Number(age.year) > 1 ? t("card.years") : t("card.year") + } `; } if (age.month) { - ageText += `${age.month} місяців`; + ageText += `${age.month} ${t("card.months")}`; } return ageText; }; @@ -38,7 +42,10 @@ export const Card: React.FC = ({ item }) => { borderTopRightRadius={"80px"} /> - + diff --git a/src/components/Card/CardInfo.tsx b/src/components/Card/CardInfo.tsx index 03bfedc..60ff7a8 100644 --- a/src/components/Card/CardInfo.tsx +++ b/src/components/Card/CardInfo.tsx @@ -1,10 +1,13 @@ import { Box, Heading, Text } from "@chakra-ui/react"; +import { useTranslation } from "react-i18next"; interface CardInfo { name: string; ageText: string; } export const CardInfo: React.FC = ({ name, ageText }) => { + const { t } = useTranslation(); + return ( = ({ name, ageText }) => { - Вік {ageText} + {t("card.age")} {ageText} ); diff --git a/src/components/Footer/DonationInfo.tsx b/src/components/Footer/DonationInfo.tsx index ae47360..169da21 100644 --- a/src/components/Footer/DonationInfo.tsx +++ b/src/components/Footer/DonationInfo.tsx @@ -1,19 +1,22 @@ import { Box, Flex, Text } from "@chakra-ui/react"; +import { useTranslation } from "react-i18next"; const DonationInfo: React.FC = () => { + const { t } = useTranslation(); + return ( <> - Допомогти матеріально: - ГО “ХАТИНА” + {t("donation.donate_financially")}: + {t("donation.ngo_name")} - ЄДРПОУ: + {t("donation.edrpou")}: 123456789 - Карта Приватбанку + {t("donation.privatbank_card")} 4141 2929 4646 1111 - Прокопів Петро Павлович + {t("donation.account_holder_name")} ); }; diff --git a/src/components/Footer/SocialSection.tsx b/src/components/Footer/SocialSection.tsx index 69ba2da..cec1058 100644 --- a/src/components/Footer/SocialSection.tsx +++ b/src/components/Footer/SocialSection.tsx @@ -1,9 +1,11 @@ import { VStack, Text } from "@chakra-ui/react"; import { ListSocialIcons } from "./SocialIcons"; +import { useTranslation } from "react-i18next"; export const SocialSection: React.FC<{ children?: React.ReactNode }> = ({ children, }) => { + const { t } = useTranslation(); return ( = ({ fontSize={{ base: "18px" }} fontWeight={{ base: 400, md: 500, lg: 400 }} > - Приєднутесь до нас в соціальних мережах + {t("social.joinUs")} diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index 6ee718d..410bcd4 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -1,22 +1,22 @@ import { Button, Container, useDisclosure } from "@chakra-ui/react"; import { useRef } from "react"; -import { LogoMob, LogoTabletDesk } from "../Logo"; +import { Logo } from "../Logo"; import { MobMenu } from "../MobMenu/MobMenu"; import { BurgerBtnIcon } from "../../assets/icons/burgerBtn"; import { SelectLanguage } from "../SelectLanguage/SelectLanguage"; import { useBreakpoint } from "../../hooks/useBreakpoint"; import { NavList } from "../NavList/NavList"; import { navHeaderDesktop } from "../../data/navList"; +import { useTranslation } from "react-i18next"; const Header: React.FC = () => { + const { t } = useTranslation(); + const breakpoint = useBreakpoint(); const { isOpen, onOpen, onClose } = useDisclosure(); const btnRef = useRef(null); - const getLogo = () => - breakpoint === "mobile" ? : ; - const getNavList = () => breakpoint === "desktop" && ( { /> ); - const getSelectLanguage = () => breakpoint !== "mobile" && ; - const getHelpButton = () => ( ); @@ -55,9 +53,9 @@ const Header: React.FC = () => { gap={[2, 2, 6]} h={["100px", "124px"]} > - {getLogo()} + {getNavList()} - {getSelectLanguage()} + {breakpoint !== "mobile" && } {getHelpButton()} {getBurgerButton()} diff --git a/src/components/Logo.tsx b/src/components/Logo.tsx index fb27868..9348731 100644 --- a/src/components/Logo.tsx +++ b/src/components/Logo.tsx @@ -1,29 +1,35 @@ -import { Image, Link } from "@chakra-ui/react"; -import logoTabletDesk from "../assets/logo/logo-desk-tablet.svg"; +import { Image, Link, Text, VStack } from "@chakra-ui/react"; import logoMob from "../assets/logo/logo-mobile.svg"; +import { useTranslation } from "react-i18next"; -export const LogoTabletDesk: React.FC<{ style?: object }> = ({ style }) => { - return ( - - - - ); -}; +export const Logo: React.FC<{ isDesktop?: boolean; style?: object }> = ({ + isDesktop = false, + style, +}) => { + const { t } = useTranslation(); -export const LogoMob: React.FC<{ style?: object }> = ({ style }) => { return ( - - + + + {isDesktop && ( + + + {t("logo.name")} + + + {t("logo.description")} + + + )} ); }; diff --git a/src/components/MobMenu/MobMenu.tsx b/src/components/MobMenu/MobMenu.tsx index 1254e65..46e5260 100644 --- a/src/components/MobMenu/MobMenu.tsx +++ b/src/components/MobMenu/MobMenu.tsx @@ -13,6 +13,7 @@ import { mobileNavigationList } from "../../data/navList"; import { CloseBtnIcon } from "../../assets/icons/burgerBtn"; import { SelectLanguage } from "../SelectLanguage/SelectLanguage"; import { LogoMob, LogoTabletDesk } from "../Logo"; +import { useTranslation } from "react-i18next"; interface MobMenuProps { btnRef: React.RefObject; @@ -25,6 +26,8 @@ export const MobMenu: React.FC = ({ isOpen, onClose, }) => { + const { t } = useTranslation(); + const isMobile = useBreakpointValue({ base: true, md: false }); return ( @@ -50,7 +53,7 @@ export const MobMenu: React.FC = ({
- Все почалося зі співчуття до масово викинутих тварин у місті, доля яких - всім була байдужою. Власними зусиллями та особистими коштами волонтерів та - небайдужих людей ми розпочали прилаштування та стерилізацію тварин для - зменшення кількості безхатьків. -
- За роки нашої праці в рік стерилізується понад 400 тварин, а дім знаходять - близько 240 безхатьків, деяких вдається прилаштувати навіть за кордон. Ми - постійно покращуємо умови для проживання собак, проводимо ремонтні роботи - вольєрів, облагороджуємо територію притулку. Проводимо масову вакцинацію - собак, щоб уникнути спалаху захворювань. -
-
- Наша робота вимагає дуже багато зусиль, як фізичних, так і фінансових. - Допомога від міста полягає тільки у стерилізації та кастрації тварин, а - всі інші витрати, включно із зарплатою, оплатою комунальних послуг, - ремонтними роботами та лікуванням хворих тварин - це все на руках - волонтерів та благодійних коштах. -
-
- Ми щиро сподіваємося, що наша праця не марна і нас підтримають люди по - всьому світу! - - ); + const aboutText = t("about_section.content"); // Отримуємо перекладений текст const ImageComponent = () => { return ( @@ -76,7 +51,7 @@ const SectionAbout = () => { - Про нас + {t("about_section.title")} {/* Переклад заголовку */} {breakpoint === "mobile" && } @@ -84,7 +59,9 @@ const SectionAbout = () => { diff --git a/src/components/Sections/SectionChoose.tsx b/src/components/Sections/SectionChoose.tsx index 529d59c..b3382b3 100644 --- a/src/components/Sections/SectionChoose.tsx +++ b/src/components/Sections/SectionChoose.tsx @@ -1,12 +1,13 @@ import { Box, Button, Heading, List, ListItem, Text } from "@chakra-ui/react"; import { useBreakpointValue } from "@chakra-ui/react"; - +import { useTranslation } from "react-i18next"; // Додаємо i18n import listOfAnimals from "../../data/animals.json"; import { Slider } from "../Slider/SliderAnimal"; import { Card } from "../Card/Card"; import { useBreakpoint } from "../../hooks/useBreakpoint"; const SectionChoose = () => { + const { t } = useTranslation(); // Ініціалізуємо функцію перекладу const breakpoint = useBreakpoint(); // визначення кількості відображених карток залежно від розміру екрану @@ -54,7 +55,7 @@ const SectionChoose = () => { mb={6} w={{ base: "350px", md: "unset" }} > - Вибери собі вірного друга + {t("section_choose.heading")}{" "} { fontWeight={{ base: 400, lg: 700 }} textAlign={"center"} > - Не купуй – прихисти, адже справжня дружба не продається! + {t("section_choose.description")}{" "} {breakpoint === "mobile" ? ( @@ -79,7 +80,7 @@ const SectionChoose = () => { )} ); diff --git a/src/components/Sections/SectionContacts/AddressComponent.tsx b/src/components/Sections/SectionContacts/AddressComponent.tsx index 02251fd..bf3e2dc 100644 --- a/src/components/Sections/SectionContacts/AddressComponent.tsx +++ b/src/components/Sections/SectionContacts/AddressComponent.tsx @@ -1,6 +1,9 @@ import { Box, Link, List, ListItem, Text } from "@chakra-ui/react"; +import { useTranslation } from "react-i18next"; export const AddressComponent = () => { + const { t } = useTranslation(); + const contactListItemStyle = { display: "flex", gap: { base: "15px", md: "20px" }, @@ -22,7 +25,7 @@ export const AddressComponent = () => { variant="contactText" fontSize={{ sm: "20px", md: "24px", lg: "30px" }} > - Адреса + {t("address.address")} { target="_blank" rel="noreferrer noopener" > - cмт. Жук м. Івано-Франківська область + {t("address.address_value")} - Телефон + {t("address.phone")} +38 (099) 123 45 67 @@ -47,7 +50,7 @@ export const AddressComponent = () => { - Електронна адреса + {t("address.email")} hatyna@gmail.com diff --git a/src/components/Sections/SectionContacts/SectionContacts.tsx b/src/components/Sections/SectionContacts/SectionContacts.tsx index 071f1f7..14d4b7d 100644 --- a/src/components/Sections/SectionContacts/SectionContacts.tsx +++ b/src/components/Sections/SectionContacts/SectionContacts.tsx @@ -3,8 +3,10 @@ import imgMob from "../../../assets/contact/Image3.png"; import imgDes from "../../../assets/contact/image-des.png"; import { useBreakpoint } from "../../../hooks/useBreakpoint"; import { AddressComponent } from "./AddressComponent"; +import { useTranslation } from "react-i18next"; const SectionContacts = () => { + const { t } = useTranslation(); const breakpoint = useBreakpoint(); return ( @@ -14,7 +16,7 @@ const SectionContacts = () => { pb={{ base: "40px", sm: "60px", md: "100px", lg: "124px" }} > - Наші контакти + {t("address.title")} { fontWeight={{ md: 500, lg: 700 }} mb="20px" > - У вас є питання? + {t("address.have_a_question")} {breakpoint === "mobile" - ? "Зв'яжіться з нами:" - : "Зв'яжіться з нами безпосередньо:"} + ? t("address.contact_text.mobile") + : t("address.contact_text.desktop")} diff --git a/src/components/Sections/SectionHelp.tsx b/src/components/Sections/SectionHelp.tsx index 61f7165..d736a30 100644 --- a/src/components/Sections/SectionHelp.tsx +++ b/src/components/Sections/SectionHelp.tsx @@ -3,32 +3,30 @@ import bgImgMobile from "../../assets/help/Rectangle.png"; import bgImgLaptop from "../../assets/help/rectangle-laptop.png"; import bgImgDesk from "../../assets/help/rectangle-desk.png"; import { useBreakpoint } from "../../hooks/useBreakpoint"; +import { useTranslation } from "react-i18next"; -const HelpText: React.FC<{ isMobile: boolean }> = ({ isMobile }) => ( - - {isMobile ? ( - <> - Перейдіть за посиланням -
- та заповніть форму -
- Ми з вами обов’язково звяжемось - - ) : ( - <> - Перейдіть за посиланням та заповніть форму -
- Ми з вами обов’язково звяжемось - - )} - -); +const HelpText: React.FC<{ isMobile: boolean }> = ({ isMobile }) => { + const { t } = useTranslation(); + + return ( + + {isMobile ? ( + <>{t("help.instruction_mobile")} + ) : ( + <>{t("help.instruction_desktop")} + )} + + ); +}; const SectionHelp = () => { + const { t } = useTranslation(); + const breakpoint = useBreakpoint(); const isMobile = breakpoint === "mobile"; @@ -49,7 +47,7 @@ const SectionHelp = () => { pb={{ base: "30px", sm: "44px", md: "120", lg: "56px" }} > - Як допомогти + {t("help.title")} { textAlign="center" color="custom.darkBlue" > - Бажаєте допомогти притулку? + {t("help.description")} @@ -87,7 +85,7 @@ const SectionHelp = () => { h={{ base: "80px", md: "102px" }} variant="primary" > - Зв'яжіться з нами + {t("help.contact_us")} diff --git a/src/components/Sections/SectionHero.tsx b/src/components/Sections/SectionHero.tsx index 56c7fd2..4d9943c 100644 --- a/src/components/Sections/SectionHero.tsx +++ b/src/components/Sections/SectionHero.tsx @@ -12,8 +12,10 @@ import heroImgLaptop from "../../assets/hero/hero-image1-laptop.png"; import heroImgDesktop from "../../assets/hero/hero-image1-desktop.png"; import decor from "../../assets/hero/decor-mob.png"; import { useBreakpoint } from "../../hooks/useBreakpoint"; +import { useTranslation } from "react-i18next"; const SectionHero: React.FC = () => { + const { t } = useTranslation(); const breakpoint = useBreakpoint(); let heroImg = heroImgMob; @@ -33,8 +35,7 @@ const SectionHero: React.FC = () => { fontWeight={{ base: "medium", lg: "bold" }} color="custom.blackTypography" > - Вірний друг радітиме тобі завжди. Йому потрібно дуже мало - теплий дім - та дбайливий господар + {t("hero.description")} ); }; @@ -52,7 +53,7 @@ const SectionHero: React.FC = () => { borderWidth={["4px", "4px", "5px", "5px"]} variant={"primary"} > - Обрати + {t("hero.choose_button")} ); }; @@ -106,7 +107,7 @@ const SectionHero: React.FC = () => { lineHeight={{ md: 1.3 }} mb={[4, 6, 10]} > - Цим оченятам дуже потрібні любов і турбота + {t("hero.heading")} diff --git a/src/components/Sections/SectionLocation.tsx b/src/components/Sections/SectionLocation.tsx index d29c34e..b624f19 100644 --- a/src/components/Sections/SectionLocation.tsx +++ b/src/components/Sections/SectionLocation.tsx @@ -1,11 +1,15 @@ import { Box, Container, Heading } from "@chakra-ui/react"; +import { useTranslation } from "react-i18next"; const SectionLocation = () => { + const { t, i18n } = useTranslation(); + const currentLang = i18n.language || "uk"; + console.log(currentLang); return ( - Локація + {t("location.heading")} @@ -16,7 +20,7 @@ const SectionLocation = () => { h={{ base: "160px", md: "500px" }} >