feat: add main page and content

src/views/home/styles.module.scss

@@ -1,15 +1,168 @@
+.Main {
+  height: 600px;
+  position: relative;
+
+  .BgWrapper {
+    position: absolute;
+    top: -200px;
+    left: 0;
+    width: 100vw;
+    z-index: -1;
+
+    .Background {
+      object-fit: cover;
+    }
+  }
+
+  .Header {
+    position: absolute;
+    top: 180px;
+    left: 300px;
+    font-family: $font-roboto;
+    font-weight: 500;
+    font-size: 48px;
+    line-height: 130%;
+    color: $color-text;
+    max-width: 720px;
+  }
+
+  .Lines {
+    position: absolute;
+    top: 420px;
+    left: 200px;
+  }
+}
+
 .Container {
+  position: relative;
   margin: 0 auto;
   max-width: rem(1540px);
   padding: 40px 10px;
 
-  @include iftablet{
+  @include iftablet {
     padding: 40px 20px;
   }
-  @include iflaptop{
+  @include iflaptop {
     padding: 40px 28px;
   }
-  @include ifdesktop{
+  @include ifdesktop {
     padding: 40px;
   }
 }
+
+.Row {
+  display: grid;
+  grid-template-columns: auto;
+  gap: 0;
+  width: 100%;
+  background-color: transparent;
+  background-image: linear-gradient(300deg, #009283 46%, #58c644 57%);
+
+  @include iftablet {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .LeftBlock {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    gap: 40px;
+
+    .Rounded {
+      border-radius: 60px;
+      border: 1px solid $color-white;
+      padding: 20px;
+      text-align: center;
+      font-family: $font-roboto;
+      font-weight: 400;
+      font-size: 30px;
+      line-height: 150%;
+      color: $color-white;
+      text-transform: uppercase;
+      width: 260px;
+    }
+  }
+
+  .RightBlock {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    padding: 20px 40px;
+
+    .SubBlock {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: 16px;
+
+      .Text {
+        font-family: $font-roboto;
+        font-weight: 400;
+        font-size: 16px;
+        line-height: 130%;
+        color: $color-white;
+      }
+    }
+  }
+}
+
+.BottomRow {
+  display: grid;
+  grid-template-columns: auto;
+  gap: 0;
+  width: 100%;
+  background-color: transparent;
+  background-image: linear-gradient(300deg, #009283 46%, #58c644 57%);
+
+  @include iftablet {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .LeftBlock {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-end;
+    gap: 10px;
+    padding: 20px 40px;
+
+    .LineTitle {
+      font-family: $font-roboto;
+      font-weight: 500;
+      font-size: 24px;
+      line-height: 130%;
+      color: $color-white;
+    }
+
+    .LineText {
+      font-family: $font-roboto;
+      font-weight: 400;
+      font-size: 16px;
+      line-height: 100%;
+      color: $color-white;
+    }
+  }
+
+  .RightBlock {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    gap: 50px;
+    padding: 20px 40px;
+  }
+}
+
+.Slider {
+  padding: 60px 0;
+
+  .Title {
+    font-family: $font-roboto;
+    font-weight: 500;
+    font-size: 32px;
+    line-height: 100%;
+    color: $color-text;
+    text-align: center;
+  }
+}