Tab shape implementation

src/assets/layouts/tab.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 390 60" style="enable-background:new 0 0 390 60;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:white;}
+</style>
+<g transform="matrix(1, 0, 0, 1, 0, 0)">
+	<path id="Union_1-2" class="st0" d="M20.5,60c-2.7,0-5.5-0.5-8-1.6c-2.4-1-4.6-2.5-6.5-4.3c-1.9-1.8-3.4-4-4.4-6.4
+		C0.5,45.3,0,42.7,0,40V20c0-2.7,0.5-5.3,1.6-7.8c1-2.4,2.5-4.5,4.4-6.4c1.9-1.8,4.1-3.3,6.5-4.3c2.5-1,5.2-1.6,8-1.6H152v0.3
+		c5.3,1.2,9.5,5.3,10.7,10.7l0,0c1.1,3.3,2.7,6.4,4.7,9.2c2,2.8,4.5,5.2,7.3,7.3c2.8,2.1,5.9,3.7,9.2,4.8c3.4,1.1,7,1.7,10.6,1.7
+		c3.8,0,7.6-0.6,11.2-1.9c3.5-1.2,6.7-3,9.6-5.3c2.9-2.3,5.3-5,7.3-8c1.6-2.4,2.8-5,3.7-7.8c0.1-0.7,0.3-1.3,0.6-1.9
+		c0-0.1,0.1-0.3,0.1-0.4v0.1c2-5,6.7-8.4,12-8.8v0h130.5c2.7,0,5.5,0.5,8,1.6c2.4,1,4.6,2.5,6.5,4.3c1.9,1.8,3.4,4,4.4,6.4
+		c1.1,2.5,1.6,5.1,1.6,7.8v20c0,2.7-0.5,5.3-1.6,7.8c-1,2.4-2.5,4.5-4.4,6.4c-1.9,1.8-4.1,3.3-6.5,4.3c-2.5,1-5.2,1.6-8,1.6H20.5z"
+		/>
+</g>
+</svg>

src/components/home/Home.module.scss

@@ -105,7 +105,8 @@
     justify-content: flex-start;
 
     h4 {
-        font-size: 1.6rem;
+        font-size: 1.4rem;
+        font-weight: 600;
         color: var(--black);
         flex-grow: 1;
 
@@ -200,7 +201,6 @@ $block-padding: 0 2rem;
         span {
             font-size: 1rem;
             color: var(--grey);
-            font-weight: 500;
         }
     }
 }
@@ -345,7 +345,6 @@ $block-padding: 0 2rem;
         span {
             font-size: 1rem;
             color: var(--grey);
-            font-weight: 500;
         }
     }
 }

src/components/tabs/Tabs.module.scss

@@ -1,4 +1,4 @@
-$tab-width: 95vw;
+$tab-width: 87vw;
 
 .tabs {
     position: fixed;
@@ -6,13 +6,13 @@ $tab-width: 95vw;
     width: $tab-width;
     left: calc((100vw - #{$tab-width}) / 2);
     display: flex;
-    background-color: white;
-    border-radius: 1.5rem;
-    box-shadow: 0px 0px 10px -5px var(--grey);
     height: 5rem;
     align-items: center;
     justify-content: center;
     z-index: 1;
+    background-image: url('../../assets/layouts/tab.svg');
+    background-size: 100% 100%;
+    background-position: center;
 
     button, a {
         width: calc(#{$tab-width} / 5);
@@ -55,9 +55,10 @@ $tab-width: 95vw;
 
     .utility {
         width: calc(#{$tab-width} / 5);
+        transform: translateY(-2.5rem);
 
         button {
-            box-shadow: 0px 0px 2px var(--red);
+            box-shadow: 0px 0px 10px -4px var(--grey);
             width: 5rem;
             height: 5rem;
             border-radius: 50%;
@@ -65,6 +66,7 @@ $tab-width: 95vw;
             align-items: center;
             justify-content: center;
             margin: 0 auto;
+            background-color: white;
             
             svg {
                 fill: var(--red);