add home page structure to Help Site

docs/README.md

@@ -68,23 +68,23 @@ There are 3 main components in the hub page: 1. Stage title, 2. Row of Card butt
 
     <!-- 3. Card buttons -->
 
-    <div class="card" onclick="navigateTo('./request-money/SmartScan')">
+    <a class="card" href="/articles/request-money/SmartScan">
         <div class="body">
             <div class="title">SmartScan</div>
         </div>
         <div class="right-icon">
             <i class="fa-solid fa-angle-right icon"></i>
         </div>
-    </div>
+    </a>
 
-    <div class="card" onclick="navigateTo('./request-money/AnotherArticle')">
+    <a class="card" href="/articles/request-money/AnotherArticle">
         <div class="body">
             <div class="title">Another Article</div>
         </div>
         <div class="right-icon">
             <i class="fa-solid fa-angle-right icon"></i>
         </div>
-    </div>
+    </a>
 
     <!-- More Card buttons here... -->
 
@@ -119,14 +119,14 @@ A card button is the box that contains the article title and the caret right ico
 In order to add a new Card button in the respective hub page ([send-money/index.html](https://github.com/Expensify/App/blob/main/docs/hubs/send-money.html) or [request-money/index.html](https://github.com/Expensify/App/blob/main/docs/hubs/request-money.html)) just copy and pase the following Card element:
 
 ```html
-<div class="card" onclick="navigateTo('./request-money/SmartScan')">
+<a class="card" href="/articles/request-money/SmartScan">
     <div class="body">
         <div class="title">SmartScan</div>
     </div>
     <div class="right-icon">
         <i class="fa-solid fa-angle-right icon"></i>
     </div>
-</div>
+</a>
 ```
 
 Then replace the article title accordingly (in this case replace the value `SmartScan` with the new article title) and add a link to the relative path of the article (in this case replace `./request-money/SmartScan` accordingly to the path of the new article file without the file extension).

docs/_includes/home-lhn.html

@@ -1,17 +1,17 @@
 <ul class="lhn-items">
     <li class="home-link">
-        <div class="link" onclick="navigateToHome()">Home</div>
+        <div class="selected">Home</div>
     </li>
     <li>
-        <div onclick="navigateTo('/hubs/send-money')" class="icon-with-link">
+        <a href="/hubs/send-money" class="icon-with-link">
             <i class="fa-solid fa-angle-right icon"></i>
-            <div class="link">Send money</div>
-        </div>
+            Send money
+        </a>
     </li>
     <li>
-        <div onclick="navigateTo('/hubs/request-money')" class="icon-with-link">
+        <a href="/hubs/request-money" class="icon-with-link">
             <i class="fa-solid fa-angle-right icon"></i>
-            <div class="link">Request money</div>
-        </div>
+            Request money
+        </a>
     </li>
 </ul>

docs/_includes/request-money-lhn.html

@@ -1,12 +1,12 @@
 <ul class="lhn-items">
     <li class="home-link">
-        <div class="link" onclick="navigateToHome()">Home</div>
+        <a href="/main">Home</a>
     </li>
     <li>
-        <div onclick="navigateTo('/hubs/send-money')" class="icon-with-link">
+        <a href="/hubs/send-money" class="icon-with-link">
             <i class="fa-solid fa-angle-right icon"></i>
-            <span class="link">Send money</span>
-        </div>
+            Send money
+        </a>
     </li>
     <li>
         <div class="icon-with-link selected">
@@ -23,7 +23,7 @@
             <li><a href="#request-money">Request money</a>
                 <ul>
                     <!-- Article links -->
-                    <li onclick="navigateTo('/articles/request-money/SmartScan')"><a>SmartScan</a></li>
+                    <li><a href="/articles/request-money/SmartScan">SmartScan</a></li>
                     <!-- More Article links here (if required)... -->
                 </ul>
             </li>

docs/_includes/send-money-lhn.html

@@ -1,6 +1,6 @@
 <ul class="lhn-items">
     <li class="home-link">
-        <div class="link" onclick="navigateToHome()">Home</div>
+        <a href="/main">Home</a>
     </li>
     <li>
         <div class="icon-with-link selected">
@@ -15,9 +15,9 @@
         </ul>
     </li>
     <li>
-        <div onclick="navigateTo('/hubs/request-money')" class="icon-with-link">
+        <a href="/hubs/request-money" class="icon-with-link">
             <i class="fa-solid fa-angle-right icon"></i>
-            <a href="/hubs/request-money">Request money</a>
-        </div>
+            Request money
+        </a>
     </li>
 </ul>

docs/_layouts/default.html

@@ -24,7 +24,7 @@
     <div id="lhn">
 
         <div class="lhn-header">
-            <div class="header-button" onclick="toggleHeaderMenu()">
+            <div id="header-button">
                 <i id="angle-up-icon" class="fa-solid fa-angle-up icon hide"></i>
                 <i id="bars-icon" class="fa-solid fa-bars icon"></i>
             </div>
@@ -41,7 +41,7 @@
             {% when "send-money" %}
                 {% include send-money-lhn.html %}
             {% else %}
-                <div onclick="navigateBack()" class="icon-with-link">
+                <div id="back-button" class="icon-with-link">
                     <i class="fa-solid fa-angle-left icon"></i>
                     <div class="link">Back</div>
                 </div>

docs/_sass/_colors.scss

@@ -5,3 +5,4 @@ $color-gray1: #FAFAFA;
 $color-gray2: #ECECEC;
 $color-gray3: #C6C9CA;
 $color-white: #FFFFFF;
+$color-green: #07d973;

docs/_sass/_fonts.scss

@@ -93,7 +93,3 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
-
-strong {
-  font-weight: 600;
-}

docs/_sass/_main.scss

@@ -67,11 +67,11 @@ hr {
     display: inline-block;
     width: 24px;
     height: 2px;
-    margin: 0 0 15px;
+    margin: 0 0 16px;
 }
 
 strong {
-    font-family: "GTAmericaExp-Bold", "Helvetica Neue", "Helvetica", Arial, sans-serif;
+    font-weight: bold;
 }
 
 em {
@@ -84,7 +84,6 @@ a {
 
     &:hover {
         color: $color-blueHover;
-        text-decoration: underline;
     }
 }
 
@@ -95,9 +94,15 @@ h4,
 h5,
 h6 {
     color: $color-dark;
-    font-family: "GTAmericaExp-Regular";
     font-weight: bold;
     padding-bottom: 12px;
+}
+
+h2,
+h3,
+h4,
+h5,
+h6 {
     margin-top: 20px;
 }
 
@@ -197,7 +202,7 @@ textarea {
             padding: 24px;
         }
 
-        .header-button {
+        #header-button {
             position: absolute;
             display: none;
 
@@ -223,15 +228,12 @@ textarea {
         display: grid;
         grid-template-columns: 40px auto;
         cursor: pointer;
+    }
 
-        &.selected {
-            cursor: auto;
-
-            span {
-                font-weight: bold;
-                color: $color-dark;
-            }
-        }
+    .selected {
+        cursor: auto;
+        font-weight: bold;
+        color: $color-dark;
     }
 
     .hide {
@@ -247,6 +249,13 @@ textarea {
     padding: 52px 68px;
     box-sizing: border-box;
 
+    @media screen and (min-width: 1600px) {
+        /* Center content area for bigger screens */
+        margin-left: calc(420px + (100vw - 1000px - 420px)/2);
+        padding: 52px 0;
+        max-width: 1000px;
+    }
+
     @media screen and (max-width: 1024px) {
         margin-left: 320px;
     }
@@ -279,7 +288,6 @@ textarea {
 
     &:hover {
         color: $color-blueHover;
-        text-decoration: underline;
     }
 }
 
@@ -331,22 +339,51 @@ textarea {
 .card {
     display: flex;
     flex-wrap: nowrap;
-    border-radius: 15px;
+    border-radius: 16px;
     border: 1px solid $color-gray2;
     padding: 28px;
     font-weight: bold;
     cursor: pointer;
+    $border-amount-darken: 15%;
+    color: $color-dark;
+
+    &:hover {
+        border-color: darken($color-gray2, $border-amount-darken);
+        color: $color-dark;
+    }
+
+    &.send-money {
+        border-color: $color-blue;
+        border-width: 1.5px;
+
+        &:hover {
+            border-color: darken($color-blue, $border-amount-darken);
+        }
+    }
+
+    &.request-money {
+        border-color: $color-green;
+        border-width: 1.5px;
+
+        &:hover {
+            border-color: darken($color-green, $border-amount-darken);
+        }
+    }
 
     .left-icon {
         display: flex;
         align-items: center;
-        padding-right: 15px;
+        padding-right: 28px;
+
+        img {
+            width: 32px;
+        }
     }
 
     .right-icon {
         display: flex;
         align-items: center;
-        padding-left: 15px;
+        padding-left: 16px;
     }
 
     .body {
@@ -357,7 +394,8 @@ textarea {
     }
 
     .description {
-        margin-top: 15px;
+        margin-top: 16px;
+        font-weight: normal;
     }
 }
 
@@ -371,6 +409,26 @@ textarea {
     }
 }
 
+.homepage {
+    h1 {
+        padding-bottom: 20px;
+
+        @media screen and (max-width: 800px) {
+            margin-top: 0;
+            padding-top: 8px;
+        }
+    }
+    h2  {
+        padding-bottom: 24px;
+    }
+    p {
+        margin-bottom: 20px;
+    }
+    .cards-group {
+        padding-bottom: 32px;
+    }
+}
+
 .coming-soon {
     overflow: hidden;