feat: public appeal (#756)

src/locale/en.json

@@ -174,5 +174,22 @@
   "plannedRoute": "Planned Route",
   "actualRoute": "Actual Route",
   "youtube_modal_info_title": "Video tutorial (Hebrew)",
-  "open_video_about_this_page": "Open video about this page"
+  "open_video_about_this_page": "Open video about this page",
+  "publicAppealPage": {
+    "title": "קול קורא",
+    "tasks": [
+      {
+        "title": "What affect does the traffic have on the overal execusion time of bus ride?",
+        "description": "calculating the standard deviation of bus ride durations can indicate problems with traffic."
+      },
+      {
+        "title": "Calculate time estimation for when the bus left it's origin",
+        "description": "TO COMPLETE"
+      },
+      {
+        "title": "How to classify bus-lines to meaningful geographical clusters?",
+        "description": "TO COMPLETE"
+      }
+    ]
+  }
 }

src/locale/he.json

@@ -61,6 +61,7 @@
   "start": "התחלה",
   "end": "סיום",
   "about_title": "אודות",
+  "public_appeal_title": "קול קורא",
   "donate_title": "לתרומות",
   "report_a_bug_title": "דיווח על באג",
   "website_name": "דאטאבוס",
@@ -185,5 +186,22 @@
   "plannedRoute": "מסלול מתוכנן",
   "actualRoute": "מסלול בפועל",
   "youtube_modal_info_title": "סרטון הסבר",
-  "open_video_about_this_page": "לפתוח סרטון על העמוד הזה"
+  "open_video_about_this_page": "לפתוח סרטון על העמוד הזה",
+  "publicAppealPage": {
+    "title": "קול קורא",
+    "tasks": [
+      {
+        "title": "What affect does the traffic have on the overal execusion time of bus ride?",
+        "description": "calculating the standard deviation of bus ride durations can indicate problems with traffic."
+      },
+      {
+        "title": "Calculate time estimation for when the bus left it's origin",
+        "description": "TO COMPLETE"
+      },
+      {
+        "title": "How to classify bus-lines to meaningful geographical clusters?",
+        "description": "TO COMPLETE"
+      }
+    ]
+  }
 }

src/pages/publicAppeal/PublicAppeal.scss

@@ -0,0 +1,8 @@
+ul {
+    list-style: none;
+    padding: 0;
+}
+
+li img {
+    width: 1.9em;
+}

src/pages/publicAppeal/index.tsx

@@ -0,0 +1,56 @@
+import styled from 'styled-components'
+import { useTranslation } from 'react-i18next'
+import Widget from 'src/shared/Widget'
+import { Space, Typography } from 'antd'
+
+import './PublicAppeal.scss'
+const { Title } = Typography
+const pageName = 'publicAppealPage'
+const PublicAppeal = () => {
+  const { t } = useTranslation()
+  const tasks = t(`${pageName}.tasks`, { returnObjects: true })
+
+  return (
+    <PublicAppealStyle>
+      <Space direction="vertical" size="middle">
+        <Title className="page-title" level={3}>
+          {t(`${pageName}.title`)}
+        </Title>
+        {tasks.map((task, i) => (
+          <Task title={task.title} description={task.description} index={i} key={i} />
+        ))}
+      </Space>
+    </PublicAppealStyle>
+  )
+}
+
+type TaskDetails = {
+  index: number
+  title: string
+  description: string
+}
+
+const Task = ({ index, title, description }: TaskDetails) => {
+  return (
+    <Widget key={index}>
+      <h2 className="public">{title}</h2>
+      <p>{description}</p>
+      <a href="https://open-bus-stride-api.hasadna.org.il/docs">Open Bus Stride API</a>
+    </Widget>
+  )
+}
+
+const PublicAppealStyle = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 0 1rem;
+  & .public-appeal-center-container {
+    width: 100%;
+    max-width: 770px;
+    & h1 {
+      font-size: 2em;
+    }
+  }
+`
+
+export default PublicAppeal

src/routes/index.tsx

@@ -16,6 +16,7 @@ const DataResearch = lazy(() =>
     default: m.DataResearch,
   })),
 )
+const PublicAppeal = lazy(() => import('../pages/publicAppeal'))
 
 import {
   HomeOutlined,
@@ -32,6 +33,7 @@ import {
 } from '@ant-design/icons'
 import { MainRoute } from './MainRoute'
 import { ErrorPage } from 'src/pages/ErrorPage'
+import PsychologyIcon from '@mui/icons-material/Psychology'
 
 export const PAGES = [
   {
@@ -85,6 +87,12 @@ export const PAGES = [
     icon: <DollarOutlined />,
     element: null,
   },
+  {
+    label: 'public_appeal_title',
+    path: '/public-appeal',
+    icon: <PsychologyIcon />,
+    element: <PublicAppeal />,
+  },
 ] as const
 
 export const HEADER_LINKS = [