feat: implement homepage design according to figma (#762)

src/layout/sidebar/logo.tsx

@@ -1,8 +1,11 @@
+import { useTranslation } from 'react-i18next'
 import { useTheme } from '../ThemeContext'
 import cn from 'classnames'
 
 export function Logo() {
   const { isDarkTheme } = useTheme()
+  const { t } = useTranslation()
+
   return (
     <h1 className={cn('sidebar-logo', { dark: isDarkTheme })}>
       <svg viewBox="450 900 3200 1730" xmlSpace="preserve">
@@ -37,7 +40,7 @@ export function Logo() {
         <circle className="st0" cx="3442.6" cy="1960.6" r="65.8" />
         <circle className="st0" cx="3223.9" cy="2225.35" r="65.8" />
       </svg>
-      <span>דאטאבוס</span>
+      <span>{t('website_name')}</span>
     </h1>
   )
 }

src/locale/en.json

@@ -1,4 +1,12 @@
 {
+  "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.",
+    "show_button": "Show",
+    "copyright": "© The Public Knowledge Workshop"
+  },
+  "homepage_title": "Home",
   "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",
@@ -62,7 +70,7 @@
   "about_title": "About",
   "donate_title": "For Donations",
   "report_a_bug_title": "Report a bug",
-  "website_name": "Database",
+  "website_name": "Databus",
   "what_is_website": "What is the \"Databus\" site?",
   "what_is_website_paragraph": "The database website of the workshop for public knowledge presents data on the quality of public transportation lines in Israel (reliability, accuracy, route). Databus actually connects several government information sources:",
   "planning_information": "The planning information - GTFS - which is published every day and contains the details of the lines, station locations, transit times, etc.",

src/locale/he.json

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

src/pages/homepage/HomePage.scss

@@ -1,4 +1,69 @@
-.main-menu {
-    display: flex;
-    flex-direction: column;
-}
+.ant-layout {
+  position: relative;
+}
+
+.container {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  overflow: hidden;
+
+  img {
+    height: 15rem;
+  }
+
+  h1 {
+    margin: 0;
+  }
+
+  p {
+    margin-bottom: 3rem;
+    font-size: large;
+  }
+
+  footer {
+    background-color: #b0d0a4;
+    width: 100%;
+    font-weight: 500;
+    position: absolute;
+    bottom: 0;
+    padding: 0.5rem 0;
+  }
+}
+
+.links {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 1rem;
+
+  @media (width <= 600px) {
+    margin-bottom: 3rem;
+  }
+}
+
+.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,33 +1,56 @@
-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('timeline_page_title')} to="/timeline" />
+        <PageLink icon={<DirectionsBusOutlined />} label={t('gaps_page_title')} to="/gaps" />
+        <PageLink
+          icon={<ViewKanbanOutlined />}
+          label={t('gaps_patterns_page_title')}
+          to="/gaps_patterns"
+        />
+        <PageLink icon={<MapOutlined />} label={t('time_based_map_page_title')} 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
+}) => {
+  const { t } = useTranslation()
+
+  return (
+    <div className="page-link">
+      {icon}
+      <span>{label}</span>
+      <NavLink to={to}>{t('homepage.show_button')}</NavLink>
+    </div>
   )
 }
 

src/routes/index.tsx

@@ -36,6 +36,12 @@ import { ErrorPage } from 'src/pages/ErrorPage'
 import PsychologyIcon from '@mui/icons-material/Psychology'
 
 export const PAGES = [
+  {
+    label: 'homepage_title',
+    path: '/',
+    icon: <HomeOutlined />,
+    element: <HomePage />,
+  },
   {
     label: 'dashboard_page_title',
     path: '/dashboard',
@@ -117,12 +123,6 @@ export const HEADER_LINKS = [
 ] as const
 
 const HIDDEN_PAGES = [
-  {
-    label: 'home_page',
-    path: '/home',
-    icon: <HomeOutlined />,
-    element: <HomePage />, //need to build - created only the file and routing
-  },
   {
     label: 'data-research',
     path: '/data-research',
@@ -133,7 +133,7 @@ const HIDDEN_PAGES = [
 
 const getRoutesList = () => {
   const pages = [...PAGES, ...HIDDEN_PAGES, ...HEADER_LINKS]
-  const RedirectToDashboard = () => <Navigate to={pages[0].path} replace />
+  const RedirectToHomepage = () => <Navigate to={pages[0].path} replace />
   const routes = pages.filter((r) => r.element)
   return (
     <Route element={<MainRoute />}>
@@ -155,7 +155,7 @@ const getRoutesList = () => {
           return gtfs_route
         }}
       />
-      <Route path="*" element={<RedirectToDashboard />} key="back" />
+      <Route path="*" element={<RedirectToHomepage />} key="back" />
     </Route>
     // </Suspense>
   )

tests/clearButton.spec.ts

@@ -7,7 +7,7 @@ import Selectors from './SelectorsModel'
 
 async function visitPage(page: Page, pageName: string, url: RegExp) {
   await page.goto('/')
-  await page.getByText(pageName, { exact: true }).click()
+  await page.getByText(pageName, { exact: true }).and(page.getByRole('link')).click()
   await page.waitForURL(url)
   await page.getByRole('progressbar').waitFor({ state: 'hidden' })
 }

tests/dashboard.spec.ts

@@ -9,7 +9,7 @@ test.describe('dashboard tests', () => {
       url: /stride-api/,
       matcher: urlMatcher,
     })
-    await page.goto('/')
+    await page.goto('/dashboard')
     await page.getByText('הקווים הגרועים ביותר').waitFor()
     const skeletons = await page.locator('.ant-skeleton').all()
     await Promise.all(skeletons.map((skeleton) => skeleton.waitFor({ state: 'hidden' })))

tests/menu.spec.ts

@@ -14,13 +14,15 @@ test.beforeEach(async ({ page, advancedRouteFromHAR }) => {
 test('menu', async ({ page }) => {
   await expect(page.locator('h1.sidebar-logo')).toContainText('דאטאבוס')
   const menuItemsInOrder = [
+    'ראשי',
     'קיום נסיעות',
     'היסטוריית נסיעות',
     'נסיעות שלא בוצעו',
     'דפוסי נסיעות שלא בוצעו',
     'מפה לפי זמן',
     'מפה לפי קו',
     'אודות',
+    'לתרומות',
   ]
   await expect(page.locator('ul > li a')).toContainText(menuItemsInOrder)
 })

tests/realtimemap.spec.ts

@@ -11,7 +11,7 @@ test.beforeEach(async ({ page, advancedRouteFromHAR }) => {
   await page.goto('/')
 })
 test('time-based-map page', async ({ page }) => {
-  await page.getByText('מפה לפי זמן', { exact: true }).click()
+  await page.getByText('מפה לפי זמן', { exact: true }).and(page.getByRole('link')).click()
   await page.waitForURL(/map/)
   await page.getByRole('progressbar').waitFor({ state: 'hidden' })
   await page.getByLabel('תאריך').fill(new Date().toLocaleDateString('en-GB'))

tests/timeline.spec.ts

@@ -24,7 +24,10 @@ test.describe('Timeline Page Tests', () => {
     timelinePage = new TimelinePage(page) // Initialize timelinePage before each test
     await timelinePage.setFakeTime(getPastDate())
     await page.goto('/')
-    await page.getByText(i18next.t('timeline_page_title'), { exact: true }).click()
+    await page
+      .getByText(i18next.t('timeline_page_title'), { exact: true })
+      .and(page.getByRole('link'))
+      .click()
     await page.getByRole('progressbar').waitFor({ state: 'hidden' })
     await timelinePage.validatePageUrl(/timeline/)
   })