refactor: improve homepage layout and add descriptions to page links (#…

…796)
hasadna · Jun 14, 2024 · f45afaa · f45afaa
1 parent 69affd8
commit f45afaa
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 55 deletions.
diff --git a/src/pages/homepage/HomePage.scss b/src/pages/homepage/HomePage.scss
@@ -1,71 +1,77 @@
 .ant-layout {
-  position: relative;
+    position: relative;
 }
 
 .container {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-  overflow: hidden;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    overflow: hidden;
 
-  img {
-    height: 15rem;
-  }
+    img {
+        height: 15rem;
+    }
 
-  h1 {
-    margin: 0;
-  }
+    h1 {
+        margin: 0;
+    }
 
-  p {
-    margin-bottom: 3rem;
-    font-size: large;
-  }
+    p {
+        margin-bottom: 2rem;
+        font-size: large;
+    }
 
-  footer {
-    background-color: #b0d0a4;
-    width: 100%;
-    font-weight: 500;
-    position: absolute;
-    bottom: 0;
-    padding: 0.5rem 0;
-  }
+    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;
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 1rem;
 
-  @media (width <= 600px) {
-    grid-template-columns: repeat(2, 1fr);
-    margin-bottom: 3rem;
-  }
+    @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;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    font-size: medium;
+    font-weight: 600;
 
-  span {
-    margin-bottom: 0.5rem;
-  }
+    svg {
+        margin-bottom: 0.3rem;
+    }
 
-  a {
-    background-color: #b74c42;
-    color: white;
-    padding: 0 1.5rem;
-    border-radius: 0.5rem;
-    transition: 0.2s ease-in-out 0s;
-    margin-bottom: 0.25rem;
+    span {
+        margin-bottom: 0.3rem;
+    }
 
-    &:hover {
-      transform: scale(1.25);
+    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);
+        }
+    }
+}
diff --git 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>
   )
 }