Home page HTML

src/App.tsx

@@ -4,7 +4,9 @@ import { Tabs } from "./components/tabs/Tabs";
 function App() {
     return (
         <main>
-            <Home />
+            <section className="page">
+                <Home />
+            </section>
             <Tabs />
         </main>
     );

src/assets/icons/activity.svg

@@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="18.001" viewBox="0 0 20 18.001">
-  <path id="activity" d="M10.116,15.245,9,6.445l-1.116,8.8H4a.977.977,0,1,1,0-1.954H6.116l.9-7.086a2.005,2.005,0,0,1,3.969,0l.9,7.086h1.974L15,20.537l1.142-7.245H22a.978.978,0,1,1,0,1.955H17.858l-.881,5.587a2.008,2.008,0,0,1-3.954,0l-.88-5.587H10.115Z" transform="translate(-3 -4.49)" fill="#fff"/>
+  <path id="activity" d="M10.116,15.245,9,6.445l-1.116,8.8H4a.977.977,0,1,1,0-1.954H6.116l.9-7.086a2.005,2.005,0,0,1,3.969,0l.9,7.086h1.974L15,20.537l1.142-7.245H22a.978.978,0,1,1,0,1.955H17.858l-.881,5.587a2.008,2.008,0,0,1-3.954,0l-.88-5.587H10.115Z" transform="translate(-3 -4.49)"/>
 </svg>

src/assets/icons/book.svg → src/assets/icons/bookmark.svg

@@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="22.642" viewBox="0 0 20 22.642">
-  <path id="book" d="M5.721,19.239H22.813V1.125H5.674A2.871,2.871,0,0,0,2.813,3.987V20.665h0c0,.007,0,.014,0,.021a3.016,3.016,0,0,0,2.862,3.08H22.813V22.257H5.674a1.532,1.532,0,0,1-1.352-1.571,1.444,1.444,0,0,1,1.4-1.448ZM17.908,2.65V10.8l-2.283-2L13.379,10.79V2.65ZM11.87,2.634V12.824h1.493l2.268-2.012,2.292,2.012h1.5V2.634H21.3V17.729H7.345l0-15.095Zm-6.195,0h.157l0,15.095H5.721a2.82,2.82,0,0,0-1.4.371V4A1.36,1.36,0,0,1,5.674,2.634Z" transform="translate(-2.813 -1.125)" fill="#fff"/>
+  <path id="book" d="M5.721,19.239H22.813V1.125H5.674A2.871,2.871,0,0,0,2.813,3.987V20.665h0c0,.007,0,.014,0,.021a3.016,3.016,0,0,0,2.862,3.08H22.813V22.257H5.674a1.532,1.532,0,0,1-1.352-1.571,1.444,1.444,0,0,1,1.4-1.448ZM17.908,2.65V10.8l-2.283-2L13.379,10.79V2.65ZM11.87,2.634V12.824h1.493l2.268-2.012,2.292,2.012h1.5V2.634H21.3V17.729H7.345l0-15.095Zm-6.195,0h.157l0,15.095H5.721a2.82,2.82,0,0,0-1.4.371V4A1.36,1.36,0,0,1,5.674,2.634Z" transform="translate(-2.813 -1.125)"/>
 </svg>

src/assets/icons/bookshelf.svg

@@ -1,7 +1,7 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="21" height="16.047" viewBox="0 0 21 16.047">
   <g id="bookshelf" transform="translate(0 -60.382)">
     <g id="Group_1" data-name="Group 1" transform="translate(0 60.382)">
-      <path id="Path_12" data-name="Path 12" d="M20.328,75.084h-1.8V62.739a.672.672,0,0,0-.672-.672H12.029V61.054a.672.672,0,0,0-.672-.672H8.106a.672.672,0,0,0-.672.672v2.97H3.14a.672.672,0,0,0-.672.672V75.084H.672a.672.672,0,1,0,0,1.344H20.328a.672.672,0,1,0,0-1.344Zm-12.894,0H3.812V73.653H7.434Zm0-2.776H3.812V65.369H7.434Zm3.251,2.776H8.778v-4.4h1.907Zm0-5.743H8.778V67.47h1.907Zm0-3.216H8.778v-4.4h1.907Zm3.251,8.959H12.029V63.411h1.907Zm1.344-11.673h1.907v1.7H15.281Zm1.907,11.673H15.281v-1.7h1.907v1.7Zm0-3.044H15.281V66.455h1.907V72.04Z" transform="translate(0 -60.382)" fill="#11253d"/>
+      <path id="Path_12" data-name="Path 12" d="M20.328,75.084h-1.8V62.739a.672.672,0,0,0-.672-.672H12.029V61.054a.672.672,0,0,0-.672-.672H8.106a.672.672,0,0,0-.672.672v2.97H3.14a.672.672,0,0,0-.672.672V75.084H.672a.672.672,0,1,0,0,1.344H20.328a.672.672,0,1,0,0-1.344Zm-12.894,0H3.812V73.653H7.434Zm0-2.776H3.812V65.369H7.434Zm3.251,2.776H8.778v-4.4h1.907Zm0-5.743H8.778V67.47h1.907Zm0-3.216H8.778v-4.4h1.907Zm3.251,8.959H12.029V63.411h1.907Zm1.344-11.673h1.907v1.7H15.281Zm1.907,11.673H15.281v-1.7h1.907v1.7Zm0-3.044H15.281V66.455h1.907V72.04Z" transform="translate(0 -60.382)" />
     </g>
   </g>
 </svg>

src/assets/icons/bx-brain.svg

@@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-  <path id="bx-brain" d="M24.437,10.758A4.206,4.206,0,0,0,20.8,5.419,3.58,3.58,0,0,0,15,3.936,3.572,3.572,0,0,0,9.21,5.418a4.206,4.206,0,0,0-3.647,5.34A4.8,4.8,0,0,0,4.406,18.4,4.881,4.881,0,0,0,4.2,19.8a4.805,4.805,0,0,0,3.967,4.721A4.192,4.192,0,0,0,15,25.73a4.191,4.191,0,0,0,6.828-1.2,4.807,4.807,0,0,0,3.766-6.13,4.8,4.8,0,0,0-1.157-7.641ZM12,24.6a1.8,1.8,0,0,1-1.764-1.438L9.982,22.2H9a2.4,2.4,0,0,1-2.4-2.4,2.376,2.376,0,0,1,.3-1.178l.547-.979-.941-.612a2.4,2.4,0,0,1,.908-4.4l2.032-.312L8.18,10.706a1.8,1.8,0,0,1,1.8-2.868l1.422.21V6.6a1.2,1.2,0,1,1,2.4,0V22.8A1.8,1.8,0,0,1,12,24.6Zm11.49-7.57-.941.612.547.979a2.381,2.381,0,0,1,.3,1.178,2.415,2.415,0,0,1-2.46,2.4h-.982l-.194.962A1.8,1.8,0,0,1,16.2,22.8V6.6a1.2,1.2,0,0,1,1.2-1.2,1.215,1.215,0,0,1,1.2,1.26V8.109l1.423-.27a1.8,1.8,0,0,1,1.8,2.868l-1.27,1.617,2.032.312a2.4,2.4,0,0,1,.907,4.4Z" transform="translate(-3 -3)" fill="#fff"/>
+  <path id="bx-brain" d="M24.437,10.758A4.206,4.206,0,0,0,20.8,5.419,3.58,3.58,0,0,0,15,3.936,3.572,3.572,0,0,0,9.21,5.418a4.206,4.206,0,0,0-3.647,5.34A4.8,4.8,0,0,0,4.406,18.4,4.881,4.881,0,0,0,4.2,19.8a4.805,4.805,0,0,0,3.967,4.721A4.192,4.192,0,0,0,15,25.73a4.191,4.191,0,0,0,6.828-1.2,4.807,4.807,0,0,0,3.766-6.13,4.8,4.8,0,0,0-1.157-7.641ZM12,24.6a1.8,1.8,0,0,1-1.764-1.438L9.982,22.2H9a2.4,2.4,0,0,1-2.4-2.4,2.376,2.376,0,0,1,.3-1.178l.547-.979-.941-.612a2.4,2.4,0,0,1,.908-4.4l2.032-.312L8.18,10.706a1.8,1.8,0,0,1,1.8-2.868l1.422.21V6.6a1.2,1.2,0,1,1,2.4,0V22.8A1.8,1.8,0,0,1,12,24.6Zm11.49-7.57-.941.612.547.979a2.381,2.381,0,0,1,.3,1.178,2.415,2.415,0,0,1-2.46,2.4h-.982l-.194.962A1.8,1.8,0,0,1,16.2,22.8V6.6a1.2,1.2,0,0,1,1.2-1.2,1.215,1.215,0,0,1,1.2,1.26V8.109l1.423-.27a1.8,1.8,0,0,1,1.8,2.868l-1.27,1.617,2.032.312a2.4,2.4,0,0,1,.907,4.4Z" transform="translate(-3 -3)"/>
 </svg>

src/assets/icons/bx-calendar.svg

@@ -1,6 +1,6 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="15" height="16.667" viewBox="0 0 15 16.667">
   <g id="bx-calendar" transform="translate(-4.5 -3)">
-    <path id="Path_6220" data-name="Path 6220" d="M10.5,16.5h1.667v1.667H10.5Zm0,3.333h1.667V21.5H10.5ZM13.833,16.5H15.5v1.667H13.833Zm0,3.333H15.5V21.5H13.833ZM17.167,16.5h1.667v1.667H17.167Zm0,3.333h1.667V21.5H17.167Z" transform="translate(-2.667 -6)" fill="#fff"/>
-    <path id="Path_6221" data-name="Path 6221" d="M6.167,19.667H17.833A1.668,1.668,0,0,0,19.5,18V6.333a1.668,1.668,0,0,0-1.667-1.667H16.167V3H14.5V4.667h-5V3H7.833V4.667H6.167A1.668,1.668,0,0,0,4.5,6.333V18A1.668,1.668,0,0,0,6.167,19.667ZM17.833,8V18H6.167V8Z" transform="translate(0 0)" fill="#fff"/>
+    <path id="Path_6220" data-name="Path 6220" d="M10.5,16.5h1.667v1.667H10.5Zm0,3.333h1.667V21.5H10.5ZM13.833,16.5H15.5v1.667H13.833Zm0,3.333H15.5V21.5H13.833ZM17.167,16.5h1.667v1.667H17.167Zm0,3.333h1.667V21.5H17.167Z" transform="translate(-2.667 -6)"/>
+    <path id="Path_6221" data-name="Path 6221" d="M6.167,19.667H17.833A1.668,1.668,0,0,0,19.5,18V6.333a1.668,1.668,0,0,0-1.667-1.667H16.167V3H14.5V4.667h-5V3H7.833V4.667H6.167A1.668,1.668,0,0,0,4.5,6.333V18A1.668,1.668,0,0,0,6.167,19.667ZM17.833,8V18H6.167V8Z" transform="translate(0 0)"/>
   </g>
 </svg>

src/assets/icons/bx-search-alt.svg

@@ -1,6 +1,6 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="21.288" height="21.289" viewBox="0 0 21.288 21.289">
   <g id="bx-search-alt" transform="translate(-3 -3)">
-    <path id="Path_1" data-name="Path 1" d="M12.1,21.207a9.048,9.048,0,0,0,5.572-1.92l5,5,1.609-1.609-5-5a9.093,9.093,0,1,0-7.182,3.53Zm0-15.931A6.828,6.828,0,1,1,5.276,12.1,6.835,6.835,0,0,1,12.1,5.276Z" fill="#d47077"/>
-    <path id="Path_2" data-name="Path 2" d="M15.584,11.957a2.264,2.264,0,0,1,.669,1.609h2.276a4.525,4.525,0,0,0-1.336-3.218,4.652,4.652,0,0,0-6.432,0l1.607,1.611A2.326,2.326,0,0,1,15.584,11.957Z" transform="translate(-1.873 -1.462)" fill="#d47077"/>
+    <path id="Path_1" data-name="Path 1" d="M12.1,21.207a9.048,9.048,0,0,0,5.572-1.92l5,5,1.609-1.609-5-5a9.093,9.093,0,1,0-7.182,3.53Zm0-15.931A6.828,6.828,0,1,1,5.276,12.1,6.835,6.835,0,0,1,12.1,5.276Z"/>
+    <path id="Path_2" data-name="Path 2" d="M15.584,11.957a2.264,2.264,0,0,1,.669,1.609h2.276a4.525,4.525,0,0,0-1.336-3.218,4.652,4.652,0,0,0-6.432,0l1.607,1.611A2.326,2.326,0,0,1,15.584,11.957Z" transform="translate(-1.873 -1.462)"/>
   </g>
 </svg>

src/assets/icons/check-circle.svg

@@ -1,4 +1,4 @@
 <svg id="check-circle" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
-  <path id="Path_5" data-name="Path 5" d="M9,16.875A7.875,7.875,0,1,0,1.125,9,7.875,7.875,0,0,0,9,16.875ZM9,18A9,9,0,1,0,0,9,9,9,0,0,0,9,18Z" fill="#fff" fill-rule="evenodd"/>
-  <path id="Path_6" data-name="Path 6" d="M16.933,10.929a.844.844,0,1,1,1.205,1.182l-4.491,5.614a.844.844,0,0,1-1.215.022L9.456,14.77a.844.844,0,1,1,1.192-1.193L13,15.932l3.907-4.978a.266.266,0,0,1,.023-.024Z" transform="translate(-4.591 -5.338)" fill="#fff" fill-rule="evenodd"/>
+  <path id="Path_5" data-name="Path 5" d="M9,16.875A7.875,7.875,0,1,0,1.125,9,7.875,7.875,0,0,0,9,16.875ZM9,18A9,9,0,1,0,0,9,9,9,0,0,0,9,18Z" fill-rule="evenodd"/>
+  <path id="Path_6" data-name="Path 6" d="M16.933,10.929a.844.844,0,1,1,1.205,1.182l-4.491,5.614a.844.844,0,0,1-1.215.022L9.456,14.77a.844.844,0,1,1,1.192-1.193L13,15.932l3.907-4.978a.266.266,0,0,1,.023-.024Z" transform="translate(-4.591 -5.338)" fill-rule="evenodd"/>
 </svg>

src/assets/icons/expand.svg

@@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
-  <path id="expand" d="M7.864,9.667a.329.329,0,0,1-.1.24L4.3,13.364l1.5,1.5A.667.667,0,0,1,5.333,16H.667A.642.642,0,0,1,.2,15.8a.638.638,0,0,1-.2-.469V10.667A.642.642,0,0,1,.2,10.2.638.638,0,0,1,.667,10a.643.643,0,0,1,.469.2l1.5,1.5L6.094,8.24a.328.328,0,0,1,.479,0L7.76,9.427a.329.329,0,0,1,.1.24ZM16,.667V5.333a.663.663,0,0,1-1.136.469l-1.5-1.5L9.906,7.76a.328.328,0,0,1-.479,0L8.24,6.573a.328.328,0,0,1,0-.479L11.7,2.636l-1.5-1.5A.641.641,0,0,1,10,.667.641.641,0,0,1,10.2.2a.641.641,0,0,1,.469-.2h4.667A.642.642,0,0,1,15.8.2a.638.638,0,0,1,.2.469Z" fill="#fff"/>
+  <path id="expand" d="M7.864,9.667a.329.329,0,0,1-.1.24L4.3,13.364l1.5,1.5A.667.667,0,0,1,5.333,16H.667A.642.642,0,0,1,.2,15.8a.638.638,0,0,1-.2-.469V10.667A.642.642,0,0,1,.2,10.2.638.638,0,0,1,.667,10a.643.643,0,0,1,.469.2l1.5,1.5L6.094,8.24a.328.328,0,0,1,.479,0L7.76,9.427a.329.329,0,0,1,.1.24ZM16,.667V5.333a.663.663,0,0,1-1.136.469l-1.5-1.5L9.906,7.76a.328.328,0,0,1-.479,0L8.24,6.573a.328.328,0,0,1,0-.479L11.7,2.636l-1.5-1.5A.641.641,0,0,1,10,.667.641.641,0,0,1,10.2.2a.641.641,0,0,1,.469-.2h4.667A.642.642,0,0,1,15.8.2a.638.638,0,0,1,.2.469Z"/>
 </svg>

src/assets/icons/plus.svg

@@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
-  <path id="plus" d="M20.5,11.167H13.833V4.5H11.167v6.667H4.5v2.667h6.667V20.5h2.667V13.833H20.5Z" transform="translate(-4.5 -4.5)" fill="#fff"/>
+  <path id="plus" d="M20.5,11.167H13.833V4.5H11.167v6.667H4.5v2.667h6.667V20.5h2.667V13.833H20.5Z" transform="translate(-4.5 -4.5)"/>
 </svg>

src/assets/icons/readme.svg

@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="21" height="16.227" viewBox="0 0 21 16.227">
   <g id="readme" transform="translate(-1.5 -5.25)">
-    <path id="Path_11" data-name="Path 11" d="M4.364,7.159H9.136a1.909,1.909,0,0,1,1.909,1.909v8.591a.955.955,0,0,1-.955.955H4.364a.955.955,0,0,1-.955-.955V8.114a.955.955,0,0,1,.955-.955Zm9.545,13.364a2.877,2.877,0,0,1-.955-.162v.162a.955.955,0,1,1-1.909,0V20.36a2.877,2.877,0,0,1-.955.162H4.364A2.864,2.864,0,0,1,1.5,17.659V8.114A2.864,2.864,0,0,1,4.364,5.25H9.136A3.809,3.809,0,0,1,12,6.542,3.809,3.809,0,0,1,14.864,5.25h4.773A2.864,2.864,0,0,1,22.5,8.114v9.545a2.864,2.864,0,0,1-2.864,2.864ZM12.955,9.068v8.591a.955.955,0,0,0,.955.955h5.727a.955.955,0,0,0,.955-.955V8.114a.955.955,0,0,0-.955-.955H14.864a1.909,1.909,0,0,0-1.909,1.909Zm-7.636,0H9.136v1.909H5.318Zm9.545,0h3.818v1.909H14.864Zm3.818,2.864H14.864v1.909h3.818Zm-13.364,0H9.136v1.909H5.318ZM18.682,14.8H14.864V16.7h3.818Zm-13.364,0H9.136V16.7H5.318Z" transform="translate(0 0)" fill="#11253d" fill-rule="evenodd"/>
+    <path id="Path_11" data-name="Path 11" d="M4.364,7.159H9.136a1.909,1.909,0,0,1,1.909,1.909v8.591a.955.955,0,0,1-.955.955H4.364a.955.955,0,0,1-.955-.955V8.114a.955.955,0,0,1,.955-.955Zm9.545,13.364a2.877,2.877,0,0,1-.955-.162v.162a.955.955,0,1,1-1.909,0V20.36a2.877,2.877,0,0,1-.955.162H4.364A2.864,2.864,0,0,1,1.5,17.659V8.114A2.864,2.864,0,0,1,4.364,5.25H9.136A3.809,3.809,0,0,1,12,6.542,3.809,3.809,0,0,1,14.864,5.25h4.773A2.864,2.864,0,0,1,22.5,8.114v9.545a2.864,2.864,0,0,1-2.864,2.864ZM12.955,9.068v8.591a.955.955,0,0,0,.955.955h5.727a.955.955,0,0,0,.955-.955V8.114a.955.955,0,0,0-.955-.955H14.864a1.909,1.909,0,0,0-1.909,1.909Zm-7.636,0H9.136v1.909H5.318Zm9.545,0h3.818v1.909H14.864Zm3.818,2.864H14.864v1.909h3.818Zm-13.364,0H9.136v1.909H5.318ZM18.682,14.8H14.864V16.7h3.818Zm-13.364,0H9.136V16.7H5.318Z" transform="translate(0 0)" fill-rule="evenodd"/>
   </g>
 </svg>

src/assets/icons/search → ).svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 13 13">
-  <path id="search_2_" data-name="search (2)" d="M6.3,9.141a.508.508,0,0,1,0,1.016H5.586a.508.508,0,0,1,0-1.016Zm4.164-2.717a.508.508,0,0,0-.508-.508H5.586a.508.508,0,0,0,0,1.016H9.953A.508.508,0,0,0,10.461,6.424ZM5.586,3.885H9.953a.508.508,0,0,0,0-1.016H5.586a.508.508,0,0,0,0,1.016ZM3.555,9.141H3.047a.508.508,0,0,0,0,1.016h.508a.508.508,0,0,0,0-1.016Zm0-3.225H3.047a.508.508,0,0,0,0,1.016h.508a.508.508,0,0,0,0-1.016Zm0-3.047H3.047a.508.508,0,0,0,0,1.016h.508a.508.508,0,0,0,0-1.016Zm9.3,9.264a.508.508,0,0,1-.718.718l-.859-.859a2.288,2.288,0,1,1,.735-.7ZM10.105,11.3a1.27,1.27,0,1,0-1.27-1.27A1.271,1.271,0,0,0,10.105,11.3ZM10.969,0H2.031A2.034,2.034,0,0,0,0,2.031v8.937A2.034,2.034,0,0,0,2.031,13h5.23a.508.508,0,0,0,0-1.016H2.031a1.017,1.017,0,0,1-1.016-1.016V2.031A1.017,1.017,0,0,1,2.031,1.016h8.937a1.017,1.017,0,0,1,1.016,1.016V7.059a.508.508,0,1,0,1.016,0V2.031A2.034,2.034,0,0,0,10.969,0Zm0,0" fill="#4e9096"/>
-</svg>

src/assets/icons/search.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 13 13">
+  <path id="search_2_" d="M6.3,9.141a.508.508,0,0,1,0,1.016H5.586a.508.508,0,0,1,0-1.016Zm4.164-2.717a.508.508,0,0,0-.508-.508H5.586a.508.508,0,0,0,0,1.016H9.953A.508.508,0,0,0,10.461,6.424ZM5.586,3.885H9.953a.508.508,0,0,0,0-1.016H5.586a.508.508,0,0,0,0,1.016ZM3.555,9.141H3.047a.508.508,0,0,0,0,1.016h.508a.508.508,0,0,0,0-1.016Zm0-3.225H3.047a.508.508,0,0,0,0,1.016h.508a.508.508,0,0,0,0-1.016Zm0-3.047H3.047a.508.508,0,0,0,0,1.016h.508a.508.508,0,0,0,0-1.016Zm9.3,9.264a.508.508,0,0,1-.718.718l-.859-.859a2.288,2.288,0,1,1,.735-.7ZM10.105,11.3a1.27,1.27,0,1,0-1.27-1.27A1.271,1.271,0,0,0,10.105,11.3ZM10.969,0H2.031A2.034,2.034,0,0,0,0,2.031v8.937A2.034,2.034,0,0,0,2.031,13h5.23a.508.508,0,0,0,0-1.016H2.031a1.017,1.017,0,0,1-1.016-1.016V2.031A1.017,1.017,0,0,1,2.031,1.016h8.937a1.017,1.017,0,0,1,1.016,1.016V7.059a.508.508,0,1,0,1.016,0V2.031A2.034,2.034,0,0,0,10.969,0Zm0,0"/>
+</svg>

src/assets/icons/time.svg

@@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="17.958" viewBox="0 0 18 17.958">
-  <path id="time" d="M9,.25a8.672,8.672,0,0,1,6.365,2.635A8.648,8.648,0,0,1,18,9.229a8.648,8.648,0,0,1-2.635,6.344A8.672,8.672,0,0,1,9,18.208a8.672,8.672,0,0,1-6.365-2.635A8.65,8.65,0,0,1,0,9.229,8.646,8.646,0,0,1,2.635,2.885,8.674,8.674,0,0,1,9,.25ZM9,16.438a6.924,6.924,0,0,0,5.08-2.108,6.948,6.948,0,0,0,2.108-5.1,6.948,6.948,0,0,0-2.108-5.1A6.924,6.924,0,0,0,9,2.021,6.924,6.924,0,0,0,3.92,4.128a6.948,6.948,0,0,0-2.108,5.1,6.948,6.948,0,0,0,2.108,5.1A6.924,6.924,0,0,0,9,16.438ZM9.443,4.718V9.439l4.047,2.4-.674,1.138L8.094,10.114v-5.4H9.443Z" transform="translate(0 -0.25)" fill="#fff"/>
+  <path id="time" d="M9,.25a8.672,8.672,0,0,1,6.365,2.635A8.648,8.648,0,0,1,18,9.229a8.648,8.648,0,0,1-2.635,6.344A8.672,8.672,0,0,1,9,18.208a8.672,8.672,0,0,1-6.365-2.635A8.65,8.65,0,0,1,0,9.229,8.646,8.646,0,0,1,2.635,2.885,8.674,8.674,0,0,1,9,.25ZM9,16.438a6.924,6.924,0,0,0,5.08-2.108,6.948,6.948,0,0,0,2.108-5.1,6.948,6.948,0,0,0-2.108-5.1A6.924,6.924,0,0,0,9,2.021,6.924,6.924,0,0,0,3.92,4.128a6.948,6.948,0,0,0-2.108,5.1,6.948,6.948,0,0,0,2.108,5.1A6.924,6.924,0,0,0,9,16.438ZM9.443,4.718V9.439l4.047,2.4-.674,1.138L8.094,10.114v-5.4H9.443Z" transform="translate(0 -0.25)"/>
 </svg>

src/assets/icons/user-speaker.svg

@@ -1,6 +1,6 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="22.5" height="22.5" viewBox="0 0 22.5 22.5">
   <g id="user-speaker" transform="translate(-2.25 -2.25)">
-    <path id="Path_41" data-name="Path 41" d="M24.28,19.446,22.9,18.069a2.386,2.386,0,0,0,.241-1.033,2.411,2.411,0,1,0-2.411,2.411,2.386,2.386,0,0,0,1.034-.241l1.377,1.377v6.1H18.321V24.268A5.631,5.631,0,0,0,12.7,18.643H7.875A5.631,5.631,0,0,0,2.25,24.268v4.018h22.5v-7.7A1.6,1.6,0,0,0,24.28,19.446ZM3.857,24.268A4.023,4.023,0,0,1,7.875,20.25H12.7a4.023,4.023,0,0,1,4.018,4.018v2.411H3.857Z" transform="translate(0 -3.536)" fill="#fff"/>
-    <path id="Path_42" data-name="Path 42" d="M11.25,3.857A4.018,4.018,0,1,1,7.232,7.875,4.018,4.018,0,0,1,11.25,3.857m0-1.607a5.625,5.625,0,1,0,5.625,5.625A5.625,5.625,0,0,0,11.25,2.25Z" transform="translate(-0.964 0)" fill="#fff"/>
+    <path id="Path_41" data-name="Path 41" d="M24.28,19.446,22.9,18.069a2.386,2.386,0,0,0,.241-1.033,2.411,2.411,0,1,0-2.411,2.411,2.386,2.386,0,0,0,1.034-.241l1.377,1.377v6.1H18.321V24.268A5.631,5.631,0,0,0,12.7,18.643H7.875A5.631,5.631,0,0,0,2.25,24.268v4.018h22.5v-7.7A1.6,1.6,0,0,0,24.28,19.446ZM3.857,24.268A4.023,4.023,0,0,1,7.875,20.25H12.7a4.023,4.023,0,0,1,4.018,4.018v2.411H3.857Z" transform="translate(0 -3.536)"/>
+    <path id="Path_42" data-name="Path 42" d="M11.25,3.857A4.018,4.018,0,1,1,7.232,7.875,4.018,4.018,0,0,1,11.25,3.857m0-1.607a5.625,5.625,0,1,0,5.625,5.625A5.625,5.625,0,0,0,11.25,2.25Z" transform="translate(-0.964 0)"/>
   </g>
 </svg>

src/assets/styles/common.scss

@@ -1,6 +0,0 @@
-.page {
-    width: 100vw;
-    height: 100vh;
-    background-color: var(--creamy-white);
-    overflow: auto;
-}

src/components/home/Home.module.scss

@@ -1 +0,0 @@
-@import '../../assets/styles/common.scss';

src/components/home/Home.tsx

@@ -1,6 +1,170 @@
 import React from "react";
 import styles from './Home.module.scss';
+import { ReactComponent as LogoIcon } from '../../assets/icons/anamnesis.svg';
+import { ReactComponent as SearchIcon } from '../../assets/icons/bx-search-alt.svg';
+import { ReactComponent as BookIcon } from '../../assets/icons/readme.svg';
+import { ReactComponent as BookMarkIcon } from '../../assets/icons/bookmark.svg';
+import { ReactComponent as BookShelfIcon } from '../../assets/icons/bookshelf.svg';
+import { ReactComponent as CalendarIcon } from '../../assets/icons/bx-calendar.svg';
+import { ReactComponent as TimeIcon } from '../../assets/icons/time.svg';
+import { ReactComponent as ActivityIcon } from '../../assets/icons/activity.svg';
+import { ReactComponent as CheckCircleIcon } from '../../assets/icons/check-circle.svg';
+import { ReactComponent as ExpandIcon } from '../../assets/icons/expand.svg';
+import { ReactComponent as PlusIcon } from '../../assets/icons/plus.svg';
+import { ReactComponent as GridIcon } from '../../assets/icons/circled.svg';
+import { ReactComponent as PersonSpeakerIcon } from '../../assets/icons/user-speaker.svg';
+import { ReactComponent as BrainIcon } from '../../assets/icons/bx-brain.svg';
 
 export const Home: React.FC = () => {
-    return <section className={styles.page}></section>
+    return <section>
+
+        <header className={styles.pageHeader}>
+            <LogoIcon />
+        </header>
+
+        <section className={styles.upfold}>
+            <figure>
+                {/* eslint-disable-next-line */}
+                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSERA5Pm3aRBV7AaI8tvpZfzpD24ZgrU1_8NA&usqp=CAU" alt="profile-image" />
+            </figure>
+            <div className={styles.userDetails}>
+                <h2> Neymar Junior </h2>
+                <div className={styles.stat}>
+                    <h5> 1.2K </h5>
+                    <label> Words </label>
+                </div>
+                <div className={styles.stat}>
+                    <h5> 10 </h5>
+                    <label> Shelves </label>
+                </div>
+            </div>
+        </section>
+
+        <div className={styles.searchBar}>
+            <input type="text" />
+            <SearchIcon />
+        </div>
+
+        <section className={styles.List}>
+            <header className={styles.blockHeader}>
+                <h4>
+                    <BookIcon />
+                    Revisions
+                </h4>
+                <button>
+                    <CalendarIcon />
+                </button>
+            </header>
+            <ul>
+                <li>
+                    <div className="icon">
+                        <TimeIcon />
+                    </div>
+                    <label> Upcoming </label>
+                    <span> 5 Words </span>
+                </li>
+                <li>
+                    <div className="icon">
+                        <ActivityIcon />
+                    </div>
+                    <label> Active </label>
+                    <span> 1 Word </span>
+                </li>
+                <li>
+                    <div className="icon">
+                        <CheckCircleIcon />
+                    </div>
+                    <label> Completed </label>
+                    <span> 18 Words </span>
+                </li>
+            </ul>
+        </section>
+
+        <section className={styles.Shelf}>
+            <header className={styles.blockHeader}>
+                <h4>
+                    <BookShelfIcon />
+                    Active Shelves
+                </h4>
+                <button>
+                    <ExpandIcon />
+                </button>
+                <button>
+                    <PlusIcon />
+                </button>
+            </header>
+            <ul>
+                <li>
+                    <div className={styles.progress}></div>
+                    <h5> All Words </h5>
+                    <p> Vocabulary </p>
+                    <p> 1.2K Words </p>
+                </li>
+                <li>
+                    <div className={styles.progress}></div>
+                    <h5> IELTS Fundamentals </h5>
+                    <p> IELTS </p>
+                    <p> 250 Words </p>
+                </li>
+                <li>
+                    <div className={styles.progress}></div>
+                    <h5> GRE Fundamentals </h5>
+                    <p> GRE </p>
+                    <p> 456 Words </p>
+                </li>
+                <li>
+                    <div className={styles.progress}></div>
+                    <h5> Sapiens </h5>
+                    <p> Book </p>
+                    <p> 125 Words </p>
+                </li>
+            </ul>
+        </section>
+
+        <section className={styles.Grid}>
+            <header className={styles.blockHeader}>
+                <h4>
+                    <GridIcon />
+                    Categories
+                </h4>
+                <button>
+                    <ExpandIcon />
+                </button>
+                <button>
+                    <PlusIcon />
+                </button>
+            </header>
+            <ul>
+                <li>
+                    <div className="icon">
+                        <TimeIcon />
+                    </div>
+                    <label> Vocabulary </label>
+                    <span> 5 Shelves </span>
+                </li>
+                <li>
+                    <div className="icon">
+                        <BookMarkIcon />
+                    </div>
+                    <label> Books </label>
+                    <span> 3 Shelves </span>
+                </li>
+                <li>
+                    <div className="icon">
+                        <PersonSpeakerIcon />
+                    </div>
+                    <label> IELTS </label>
+                    <span> 5 Shelves </span>
+                </li>
+                <li>
+                    <div className="icon">
+                        <BrainIcon />
+                    </div>
+                    <label> GRE </label>
+                    <span> 2 Shelves </span>
+                </li>
+            </ul>
+        </section>
+
+    </section>
 }

src/components/tabs/Tabs.module.scss

@@ -55,7 +55,7 @@ $tab-width: 95vw;
         width: calc(#{$tab-width} / 5);
 
         button {
-            box-shadow: 0px 0px 10px -2px var(--grey);
+            box-shadow: 0px 0px 2px var(--red);
             width: 5rem;
             height: 5rem;
             border-radius: 50%;

src/index.css

@@ -19,4 +19,13 @@
     --light-grey: #84919e;
     --creamy-white: #fef8ec;
     font-size: 62.5%;
+}
+
+.page {
+    width: 100vw;
+    height: 100vh;
+    background-color: var(--creamy-white);
+    overflow: auto;
+    position: relative;
+    padding-bottom: 100px;
 }