feat: ui components

src/views/home/ui/contacts/contacts.module.scss

@@ -33,43 +33,71 @@
   }
 
   .Form {
-    background: $color-white;
-    border-radius: 28px;
+    position: relative;
+    background: #292E3D;
     display: flex;
     flex-direction: row;
     padding: 60px 50px;
+    border-radius: 28px;
+    overflow: hidden;
+
     margin-bottom: 80px;
 
+    &:after {
+      content: '';
+      display: block;
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      z-index: 1;
+      left: 0;
+      top: 0;
+      background-color: rgba(#163055, .6);
+      transition: 250ms background-color;
+    }
+
+    .Background {
+      position: absolute;
+      object-fit: cover;
+      z-index: 1;
+    }
+
     .Offer {
       flex: 2;
       display: flex;
       flex-direction: column;
 
-
       .Title {
+        position: relative;
+        z-index: 2;
         font-family: $font-open-sans;
         font-weight: $font-semi-bold;
         font-size: 48px;
         line-height: 100%;
-        color: $color-text-light;
+        color: $color-white;
         margin-bottom: 80px;
       }
 
       .SubTitle {
+        position: relative;
+        z-index: 2;
         font-family: $font-open-sans;
         font-weight: $font-light;
         font-size: 32px;
         line-height: 100%;
-        color: $color-text-light;
+        color: $color-white;
         max-width: 720px;
       }
     }
 
     .Inputs {
+      position: relative;
+      z-index: 2;
       flex: 1;
       display: flex;
       flex-direction: column;
-      align-items: flex-start;
+      justify-content: center;
+      gap: 20px;
     }
   }
 
@@ -80,7 +108,7 @@
       border-radius: 28px;
     }
 
-    .Contacts{
+    .Contacts {
       position: absolute;
       z-index: 2;
       top: -40px;
@@ -88,15 +116,16 @@
       border-radius: 28px;
       background: $color-white;
       width: 440px;
-      height: 540px;
-      padding: 40px 35px;
+      //height: 540px;
+      padding: 40px 35px 20px;
 
       display: flex;
       flex-direction: column;
       justify-content: flex-start;
       align-items: flex-start;
 
-      .Title{
+      .Title {
+        position: relative;
         font-family: $font-open-sans;
         font-weight: $font-semi-bold;
         font-size: 48px;
@@ -105,14 +134,32 @@
         text-align: right;
         margin-bottom: 32px;
         align-self: center;
+
+        .LedOn {
+          position: absolute;
+          bottom: 6px;
+          left: 6px;
+        }
       }
+
       .Address {
+        position: relative;
         font-family: $font-open-sans;
         font-weight: $font-regular;
         font-size: 32px;
         line-height: 130%;
         color: $color-text;
-        margin-bottom: 32px;
+        margin-bottom: 20px;
+        margin-left: 32px;
+
+        .Icon {
+          position: absolute;
+          left: -48px;
+          top: 8px;
+          width: 32px;
+          height: 32px;
+          stroke: #E96526;
+        }
       }
     }
   }