From 2160d206e93bc5d17c2aa680b7f755be81c39b51 Mon Sep 17 00:00:00 2001 From: evgeniywas Date: Sun, 6 Aug 2023 15:28:27 +0100 Subject: [PATCH] RC-7: create home page components --- src/app/main/home/Home.js | 68 +++++++- src/app/main/home/components/AboutUs.js | 37 +++++ src/app/main/home/components/ArticleCard.js | 33 ++++ .../main/home/components/ArticleCardsList.js | 17 ++ src/app/main/home/components/FeedbackForm.js | 157 ++++++++++++++++++ src/app/main/home/components/Statistics.js | 18 ++ .../main/home/components/StatisticsCard.js | 12 ++ src/app/main/home/components/Welcome.js | 41 +++++ src/app/main/home/i18n/en.js | 40 ++++- src/assets/images/welcome-background.webp | Bin 0 -> 4378870 bytes 10 files changed, 418 insertions(+), 5 deletions(-) create mode 100644 src/app/main/home/components/AboutUs.js create mode 100644 src/app/main/home/components/ArticleCard.js create mode 100644 src/app/main/home/components/ArticleCardsList.js create mode 100644 src/app/main/home/components/FeedbackForm.js create mode 100644 src/app/main/home/components/Statistics.js create mode 100644 src/app/main/home/components/StatisticsCard.js create mode 100644 src/app/main/home/components/Welcome.js create mode 100644 src/assets/images/welcome-background.webp diff --git a/src/app/main/home/Home.js b/src/app/main/home/Home.js index 07f9284..f497304 100644 --- a/src/app/main/home/Home.js +++ b/src/app/main/home/Home.js @@ -1,7 +1,67 @@ -import { memo } from 'react'; +import { useEffect, useState } from 'react'; +import { withTranslation } from 'react-i18next'; +import AboutUs from './components/AboutUs'; +import ArticleCardsList from './components/ArticleCardsList'; +import FeedbackForm from './components/FeedbackForm'; +import Statistics from './components/Statistics'; +import Welcome from './components/Welcome'; -function Home(props) { - return
Heeeeelloooooo!
; +const articleCardsMock = [ + { + id: '123', + title: 'Lorem ipsum dolor sit amet ornare amet consequat ultricies auctor.', + description: + 'Lorem ipsum dolor sit amet consectetur. Quam molestie non eget rhoncus ut sed. Egestas scelerisque fames lorem id luctus viverra ligula placerat mus. Lorem ipsum dolor sit amet consectetur. Quam molestie non eget rhoncus ut sed. Egestas scelerisque fames lorem id luctus viverra ligula placmeget rhoncus ut settrnhg ips...', + image: + 'https://images.unsplash.com/photo-1664575602276-acd073f104c1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80', + updated: '12.12.2022', + }, + { + id: '234', + title: 'Lorem ipsum dolor sit amet ornare amet consequat us auctoit amet orare ametr...', + description: + 'Lorem ipsum dolor sit amet consectetur. Quam molestie non eget rhoncusnon eget rhoncus ut sed. Egestas scelerisque fames lorem id luctus viverra ligula placerat mus.', + image: + 'https://images.unsplash.com/photo-1664575602276-acd073f104c1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80', + updated: '12.12.2022', + }, + { + id: '345', + title: 'Lorem ipsum dolor sit amet ornare amet consequat ultricies auctor.', + description: + 'Lorem ipsum dolor sit amet consectetur. Quam molestie non eget rhoncus ut sed. Egestas scelerisque fames lorem id luctus viverra ligula placerat mus. Lorem ipsum dolor sit amet consectetur. Quames lorem id luctus viverra ligula placerat mus.', + image: + 'https://images.unsplash.com/photo-1664575602276-acd073f104c1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80', + updated: '12.12.2022', + }, +]; + +function Home({ t }) { + const [servicesCards, setServicesCards] = useState([]); + const [blogCards, setBlogCards] = useState([]); + + useEffect(() => { + setServicesCards(articleCardsMock); + setBlogCards(articleCardsMock); + }, []); + + return ( +
+ +
+ + + + + +
+
+ ); } -export default memo(Home); +export default withTranslation('homePage')(Home); diff --git a/src/app/main/home/components/AboutUs.js b/src/app/main/home/components/AboutUs.js new file mode 100644 index 0000000..89bf520 --- /dev/null +++ b/src/app/main/home/components/AboutUs.js @@ -0,0 +1,37 @@ +import { memo } from 'react'; +import { withTranslation } from 'react-i18next'; +import { Link } from 'react-router-dom'; + +function AboutUs({ t }) { + return ( +
+

{t('about_us_title')}

+
+
+