fix components according to new theme

src/scss/components/_btn.scss

@@ -1,8 +1,9 @@
 .btn {
+    position: relative;
     display: inline-flex;
     justify-content: center;
-    background: $primary;
+    background: $btn-bg;
-    color: $bg;
+    color: $fg;
     text-decoration: none;
     font-size: $font-nav;
     padding: 20px 45px;
@@ -12,7 +13,21 @@
     transition: 0.2s ease;
 
     &:hover {
-        background: lighten($primary, 20%);
+        cursor: pointer;
+        background: darken($btn-bg, 5%);
+    }
+
+
+    &::after {
+        content: '';
+        position: absolute;
+        bottom: -7px;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: darken($btn-bg, 30%);
+        border-radius: 10px;
+        z-index: -1;
     }
 }
 
@@ -21,6 +36,10 @@
     background: $secondary;
 
     &:hover {
-        background: darken($secondary, 10%);
+        background: darken($secondary, 5%);
     }
-}
+
+    &::after {
+        background: darken($secondary, 60%);
+    }
+}

src/scss/components/_header.scss

@@ -1,8 +1,9 @@
 header {
-    padding: 20px 120px;
+    padding: 20px 2%;
     display: flex;
     justify-content: space-between;
     align-items: center;
+    background: $bg-alternate;
     
     .brand {
         display: flex;

src/scss/components/_title.scss

@@ -1,13 +1,19 @@
 .title {
-    margin-top: 180px;
+    position: relative;
-    padding-top: 20px;
+    margin: 100px 60px 0 60px;
     font-size: $font-section;
     font-weight: $font-bold;
-    color: $primary;
+    color: $primary-dark;
+    display: inline-block;
 
-    .sub {
+    &::after {
-        color: rgba($secondary, 0.8);
+        content: '';
-        font-size: $font-section-sub;
+        position: absolute;
-        font-weight: $font-normal;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 20%;
+        background: $tertiary;
+        z-index: -1;
     }
-}
+}