feat: add offer section

2025-05-29 15:18:51 +03:00
parent c4cc79637b
commit 6bd23f4d2d
31 changed files with 358 additions and 16 deletions
--- a/src/views/home/ui/offer/offer.module.scss
+++ b/src/views/home/ui/offer/offer.module.scss
@@ -0,0 +1,159 @@
+.Offer {
+  background: $color-lightgray;
+  border-radius: 28px;
+  padding: 160px;
+
+  .Title {
+    font-family: $font-open-sans;
+    font-weight: $font-semi-bold;
+    font-size: 60px;
+    line-height: 100%;
+    color: $color-text;
+    max-width: 1330px;
+    margin-bottom: 80px;
+  }
+
+  .Text {
+    font-family: $font-open-sans;
+    font-weight: $font-regular;
+    font-size: 32px;
+    line-height: 100%;
+    color: $color-text;
+    margin-bottom: 20px;
+  }
+
+  .List {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    max-width: 1330px;
+    margin-bottom: 60px;
+
+    .ListItem {
+      font-family: $font-open-sans;
+      font-weight: $font-regular;
+      font-size: 32px;
+      line-height: 160%;
+      color: $color-text;
+      list-style-type: decimal;
+      margin-left: 40px;
+    }
+  }
+
+  .RowForm {
+    display: flex;
+    flex-direction: row;
+    gap: 40px;
+    justify-content: center;
+  }
+
+  .Inner {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    background-color: $color-white;
+    border-radius: 28px;
+    padding: 80px 40px;
+    margin-bottom: 130px;
+
+    .Title {
+      font-family: $font-open-sans;
+      font-weight: $font-semi-bold;
+      font-size: 60px;
+      line-height: 1;
+      color: $color-text;
+    }
+
+    .Grid {
+      display: grid;
+      grid-template-rows: repeat(2, 1fr);
+      grid-template-columns: repeat(3, 1fr);
+      gap: 40px;
+      padding: 40px 0;
+    }
+
+    .Tile {
+      position: relative;
+      padding: 25px;
+      height: 352px;
+      border-radius: 28px;
+      overflow: hidden;
+
+      &:after {
+        content: '';
+        display: block;
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        z-index: 1;
+        left: 0;
+        top: 0;
+        background-color: rgba(#292E3D, .7);
+        transition: 250ms background-color;
+      }
+
+      &:hover {
+        &:after {
+          background-color: rgba(#292E3D, .5);
+        }
+
+        .Title {
+          display: none;
+        }
+
+        .Description {
+          display: block;
+        }
+
+        .Arrow {
+          transform: rotate(45deg);
+          transition: transform 250ms ease-in-out;
+        }
+      }
+
+      .Background {
+        position: absolute;
+      }
+
+      .Title {
+        position: relative;
+        z-index: 2;
+        font-family: $font-open-sans;
+        font-weight: $font-regular;
+        font-size: 42px;
+        line-height: 100%;
+        color: $color-white;
+      }
+
+      .Description {
+        position: relative;
+        z-index: 2;
+        display: none;
+        font-family: $font-open-sans;
+        font-weight: $font-regular;
+        font-size: 24px;
+        line-height: 130%;
+        color: $color-white;
+      }
+
+      .Arrow {
+        position: absolute;
+        z-index: 2;
+        right: 25px;
+        bottom: 25px;
+        width: 64px;
+        height: 64px;
+        transform: rotate(-135deg);
+        transition: transform 250ms ease-in-out;
+      }
+    }
+  }
+
+  .Form {
+    .Title {
+    }
+
+    .SubTitle {
+    }
+  }
+}