From 2bb41f8201e93f28479ab48c6fd08fa826f5a77d Mon Sep 17 00:00:00 2001
From: israel zusha rotenberg <100128949+zushar@users.noreply.github.com>
Date: Wed, 12 Jun 2024 15:46:35 +0300
Subject: [PATCH] refactor: Update homepage layout and styling

---
 src/pages/homepage/HomePage.scss | 112 +++++++++++++++----------------
 src/pages/homepage/HomePage.tsx  |  25 ++++++-
 2 files changed, 77 insertions(+), 60 deletions(-)

diff --git a/src/pages/homepage/HomePage.scss b/src/pages/homepage/HomePage.scss
index dac67f17..47934108 100644
--- a/src/pages/homepage/HomePage.scss
+++ b/src/pages/homepage/HomePage.scss
@@ -1,69 +1,67 @@
 .ant-layout {
-  position: relative;
+    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;
-  }
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    overflow: hidden;
+    img {
+        height: 15rem;
+    }
+    h1 {
+        margin: 0;
+    }
+    p {
+        margin-bottom: 2rem;
+        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;
-  }
+    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);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    font-size: medium;
+    font-weight: 600;
+    svg {
+        margin-bottom: 0.3rem;
     }
-  }
-}
+    span {
+        margin-bottom: 0.3rem;
+    }
+    p {
+        font-size: small;
+        font-weight: 500;
+    }
+    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);
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/pages/homepage/HomePage.tsx b/src/pages/homepage/HomePage.tsx
index 241cd3d1..67996f63 100644
--- a/src/pages/homepage/HomePage.tsx
+++ b/src/pages/homepage/HomePage.tsx
@@ -20,14 +20,30 @@ export const HomePage = () => {
       <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={<HistoryOutlined />}
+          label={t('timeline_page_title')}
+          description={t('timeline_page_description')}
+          to="/timeline"
+        />
+        <PageLink
+          icon={<DirectionsBusOutlined />}
+          label={t('gaps_page_title')}
+          description={t('gaps_page_description')}
+          to="/gaps"
+        />
         <PageLink
           icon={<ViewKanbanOutlined />}
           label={t('gaps_patterns_page_title')}
+          description={t('gaps_patterns_page_description')}
           to="/gaps_patterns"
         />
-        <PageLink icon={<MapOutlined />} label={t('time_based_map_page_title')} to="/map" />
+        <PageLink
+          icon={<MapOutlined />}
+          label={t('time_based_map_page_title')}
+          description={t('time_based_map_page_description')}
+          to="/map"
+        />
       </section>
       <footer>{`${t('homepage.copyright')} ${new Date().getFullYear()}`}</footer>
     </div>
@@ -37,10 +53,12 @@ export const HomePage = () => {
 const PageLink = ({
   icon,
   label,
+  description,
   to,
 }: {
   icon: React.ReactElement<SvgIconProps>
   label: string
+  description: string
   to: To
 }) => {
   const { t } = useTranslation()
@@ -50,6 +68,7 @@ const PageLink = ({
       {icon}
       <span>{label}</span>
       <NavLink to={to}>{t('homepage.show_button')}</NavLink>
+      <p>{description}</p>
     </div>
   )
 }