From 90e73928a9e88b3d21e263c637b85e4fb1ee456f Mon Sep 17 00:00:00 2001
From: israel zusha rotenberg <100128949+zushar@users.noreply.github.com>
Date: Wed, 12 Jun 2024 16:01:39 +0300
Subject: [PATCH 1/2] refactor: improve homepage layout and add descriptions to
 page links

---
 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 dac67f17f..479341084 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 241cd3d14..67996f63f 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>
   )
 }

From 54803696d5b1c03e43f6d41da426d59ac3b6b226 Mon Sep 17 00:00:00 2001
From: israel zusha rotenberg <100128949+zushar@users.noreply.github.com>
Date: Sat, 15 Jun 2024 02:31:50 +0300
Subject: [PATCH 2/2] refactor: fix scss lint

---
 src/pages/homepage/HomePage.scss | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/pages/homepage/HomePage.scss b/src/pages/homepage/HomePage.scss
index 479341084..51891766b 100644
--- a/src/pages/homepage/HomePage.scss
+++ b/src/pages/homepage/HomePage.scss
@@ -9,16 +9,20 @@
     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%;
@@ -33,6 +37,7 @@
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 1rem;
+
     @media (width <=600px) {
         margin-bottom: 3rem;
     }
@@ -44,22 +49,27 @@
     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);
         }