feat: implement homepage design according to figma

src/locale/en.json

@@ -1,4 +1,14 @@
 {
+  "homepage": {
+    "welcome": "Welcome to Databus",
+    "databus_definition": "The open platform for real data on the quality of public transportation lines in Israel",
+    "website_goal": "The purpose of the site is to improve the quality of public transportation in Israel by providing reliable information to journalists, citizens, transportation companies, and government officials in Israel.",
+    "timeline": "Schedule history",
+    "gaps": "Rides that didn't take place",
+    "gaps_patterns": "Patterns",
+    "map": "Time based map",
+    "copyright": "© The Public Knowledge Workshop"
+  },
   "dashboard_page_title": "Public transport operators according to planned trips",
   "dashboard_page_description": "A graphic display of public transportation rides - ratio of successful actual rides / total rides scheduled. Grouped by bus operators (Egged, Dan, Metropolin etc)",
   "timeline_page_title": "Trips History",

src/locale/he.json

@@ -1,4 +1,14 @@
 {
+  "homepage": {
+    "welcome": "ברוכים הבאים לדאטאבוס",
+    "databus_definition": "הפלטפורמה הפתוחה לנתוני אמת על איכות קווי התחבורה הציבורית בישראל",
+    "website_goal": "מטרת האתר היא לשפר את איכות התחבורה הציבורית בארץ ע\"י מתן מידע אמין לעיתונאים, אזרחים, חברות התחבורה, וגורמי ממשל בישראל.",
+    "timeline": "היסטוריית לוחות זמנים",
+    "gaps": "נסיעות שלא בוצעו",
+    "gaps_patterns": "דפוסי נסיעות שלא בוצעו",
+    "map": "מפה לפי זמן",
+    "copyright": "© הסדנא לידע ציבורי (ע\"ר)"
+  },
   "dashboard_page_title": "קיום נסיעות",
   "dashboard_page_description": "תצוגה גרפית של אחוז הנסיעות שיצאו בפועל מתוך סך הנסיעות המתוכננות, מפולח לפי חברות תחבורה ציבורית (אגד, דן, מטרופולין וכו')",
   "timeline_page_title": "היסטוריית נסיעות",

src/pages/homepage/HomePage.scss

@@ -1,4 +1,62 @@
-.main-menu {
-    display: flex;
-    flex-direction: column;
-}
+.container {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+
+  img {
+    height: 15rem;
+  }
+
+  h1 {
+    margin: 0;
+  }
+
+  p {
+    margin-bottom: 3rem;
+    font-size: large;
+  }
+
+  footer {
+    background-color: #b0d0a4;
+    width: 100%;
+    font-weight: 500;
+    padding: 0.5rem 1rem 0.5rem 0;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+  }
+}
+
+.links {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 1rem;
+  margin-bottom: 6rem;
+}
+
+.page-link {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-size: medium;
+  font-weight: 600;
+  justify-content: space-between;
+
+  span {
+    margin-bottom: 0.5rem;
+  }
+
+  a {
+    background-color: #b74c42;
+    color: white;
+    padding: 0 1.5rem;
+    border-radius: 0.5rem;
+    transition: 0.2s ease-in-out 0s;
+
+    &:hover {
+      transform: scale(1.25);
+    }
+  }
+}

src/pages/homepage/HomePage.tsx

@@ -1,34 +1,53 @@
-import { NavLink } from 'react-router-dom'
+import { NavLink, To } from 'react-router-dom'
 import busImage from '../../img/busImg.png'
 import './HomePage.scss'
+import { useTranslation } from 'react-i18next'
+import {
+  DirectionsBusOutlined,
+  HistoryOutlined,
+  MapOutlined,
+  ViewKanbanOutlined,
+} from '@mui/icons-material'
+import { SvgIconProps } from '@mui/material'
 
 export const HomePage = () => {
+  const { t } = useTranslation()
+
   return (
-    <>
+    <div className="container">
       <img src={busImage} alt="Public Transportaion Bus Illustration" />
-      <h1>ברוכים הבאים לדאטאבוס</h1>
-      <h2>הפלטפורמה הפתוחה לנתוני אמת על איכות קווי התחבורה הציבורית בישראל </h2>
-      <h3>
-        מטרת האתר היא לשפר את איכות התחבורה הציבורית בארץ ע״י מתן מידע אמין לעיתונאים, אזחרים, חברות
-        התחבורה, וגורמי ממשל בישראל.
-      </h3>
-      <div className="main-menu">
-        <NavLink to="/timeline" className="nav-link">
-          הסטוריית לוחות זמנים
-        </NavLink>
-        <NavLink to="/gaps" className="nav-link">
-          {' '}
-          נסיעות שלא בוצעו{' '}
-        </NavLink>
-        <NavLink to="/gaps_pattern" className="nav-link">
-          דפוסי נסיעות שלא בוצעו
-        </NavLink>
-        <NavLink to="/map" className="nav-link">
-          מפה לפי זמן
-        </NavLink>
-      </div>
-    </>
+      <h1>{t('homepage.welcome')}</h1>
+      <h2>{t('homepage.databus_definition')}</h2>
+      <p>{t('homepage.website_goal')}</p>
+      <section className="links">
+        <PageLink icon={<HistoryOutlined />} label={t('homepage.timeline')} to="/timeline" />
+        <PageLink icon={<DirectionsBusOutlined />} label={t('homepage.gaps')} to="/gaps" />
+        <PageLink
+          icon={<ViewKanbanOutlined />}
+          label={t('homepage.gaps_patterns')}
+          to="/gaps_patterns"
+        />
+        <PageLink icon={<MapOutlined />} label={t('homepage.map')} to="/map" />
+      </section>
+      <footer>{`${t('homepage.copyright')} ${new Date().getFullYear()}`}</footer>
+    </div>
   )
 }
 
+const PageLink = ({
+  icon,
+  label,
+  to,
+}: {
+  icon: React.ReactElement<SvgIconProps>
+  label: string
+  to: To
+}) => (
+  <div className="page-link">
+    {icon}
+    <span>{label}</span>
+    <NavLink to={to}>הצג</NavLink>
+  </div>
+)
+
 export default HomePage