public/svg/check.svg

@@ -0,0 +1,4 @@
+<svg width="32" height="23" viewBox="0 0 32 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M3.5 12L9.75 18.25C10.9004 19.4004 12.7662 19.4004 13.9167 18.25L28.5 3.66666" stroke="#00FF1E"
+          stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/core/styles/index.scss

@@ -1,2 +1,3 @@
 @import './variables.scss';
-@import './mixins.scss';
+@import './mixins.scss';
+@import './functions.scss';

src/core/styles/variables.scss

@@ -8,6 +8,8 @@ $desktop: 1440px;
 //fonts
 $font-open-sans: var(--open-sans), sans-serif;
 
+$base-font-size: 16px;
+
 $font-light: 300;
 $font-regular: 400;
 $font-medium: 500;

src/shared/ui/advanced-phone-input/advancedPhoneInput.module.scss

@@ -1,6 +1,5 @@
 .Container {
   position: relative;
-  //width: 100%;
 }
 
 .Phone {
@@ -12,8 +11,8 @@
 
 .Button {
   position: absolute;
-  right: 4px;
+  right: rem(2px);
-  top: calc(50% - 25px);
+  top: calc(50% - 1.6rem);
   z-index: 3;
-  min-height: calc(100% - 4px);
+  min-height: calc(100% - .25rem);
 }

src/shared/ui/button/button.module.scss

@@ -2,13 +2,13 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 10px 32px;
+  padding: rem(10px) rem(32px);
-  border-radius: 28px;
+  border-radius: rem(28px);
-  min-height: 55px;
+  min-height: rem(54px);
 
   font-family: $font-open-sans;
   font-weight: $font-regular;
-  font-size: 24px;
+  font-size: rem(24px);
   line-height: 100%;
 
   transition: all 0.15s linear;
@@ -20,11 +20,11 @@
   }
 
   svg {
-    width: 18px;
+    width: rem(18px);
-    height: 18px;
+    height: rem(18px);
     //fill: var(--text-primary);
 
-    margin-right: 18px;
+    margin-right: rem(18px);
   }
 
   &:hover {

src/shared/ui/input/input.module.scss

@@ -2,13 +2,13 @@
   display: flex;
   background: $color-white;
   border: 1px solid $color-darkgray;
-  border-radius: 28px;
+  border-radius: rem(28px);
-  padding: 10px 24px;
+  padding: rem(10px) rem(24px);
   transition: border ease .5s;
 
   font-family: $font-open-sans;
   font-weight: $font-regular;
-  font-size: 24px;
+  font-size: rem(24px);
   line-height: 100%;
   color: $color-text;
   width: max-content;

src/shared/ui/text-area/text-area.module.scss

@@ -14,13 +14,13 @@
 .Area {
   background: $color-white;
   border: 1px solid $color-darkgray;
-  border-radius: 20px;
+  border-radius: rem(20px);
-  padding: 10px 24px;
+  padding: rem(10px) rem(24px);
   transition: border ease .5s;
 
   font-family: $font-open-sans;
   font-weight: $font-regular;
-  font-size: 24px;
+  font-size: rem(24px);
   line-height: 100%;
   color: $color-text;
 
@@ -35,14 +35,14 @@
     cursor: auto;
   }
   &::-webkit-scrollbar {
-    width: 12px;
+    width: rem(12px);
-    height: 12px;
+    height: rem(12px);
   }
   &::-webkit-scrollbar-track,
   &::-webkit-scrollbar-thumb {
     background-clip: content-box;
-    border: 4px solid transparent;
+    border: rem(4px) solid transparent;
-    border-radius: 12px;
+    border-radius: rem(12px);
   }
   &::-webkit-scrollbar-track {
     background-color: #333; // цвет дорожки

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

@@ -1,15 +1,15 @@
 .Contacts {
   background: $color-lightgray;
-  border-radius: 28px;
+  border-radius: rem(28px);
-  padding: 160px;
+  padding: rem(160px);
 
   .Header {
     font-family: $font-open-sans;
     font-weight: $font-semi-bold;
-    font-size: 60px;
+    font-size: rem(60px);
     line-height: 100%;
     color: $color-text;
-    margin-bottom: 80px;
+    margin-bottom: rem(80px);
   }
 
   .Clients {
@@ -19,14 +19,14 @@
     flex-wrap: wrap;
     justify-content: space-around;
     align-items: center;
-    gap: 40px;
+    gap: rem(40px);
-    max-width: 1200px;
+    max-width: rem(1200px);
-    margin-bottom: 160px;
+    margin-bottom: rem(160px);
 
     .Client {
 
       img {
-        width: 300px;
+        width: rem(300px);
         height: auto;
       }
     }
@@ -37,11 +37,11 @@
     background: #292E3D;
     display: flex;
     flex-direction: row;
-    padding: 60px 50px;
+    padding: rem(60px) rem(50px);
-    border-radius: 28px;
+    border-radius: rem(28px);
     overflow: hidden;
 
-    margin-bottom: 80px;
+    margin-bottom: rem(80px);
 
     &:after {
       content: '';
@@ -72,10 +72,10 @@
         z-index: 2;
         font-family: $font-open-sans;
         font-weight: $font-semi-bold;
-        font-size: 48px;
+        font-size: rem(48px);
         line-height: 100%;
         color: $color-white;
-        margin-bottom: 80px;
+        margin-bottom: rem(80px);
       }
 
       .SubTitle {
@@ -83,10 +83,10 @@
         z-index: 2;
         font-family: $font-open-sans;
         font-weight: $font-light;
-        font-size: 32px;
+        font-size: rem(32px);
         line-height: 100%;
         color: $color-white;
-        max-width: 720px;
+        max-width: rem(720px);
       }
     }
 
@@ -97,7 +97,7 @@
       display: flex;
       flex-direction: column;
       justify-content: center;
-      gap: 20px;
+      gap: rem(20px);
     }
   }
 
@@ -105,19 +105,18 @@
     position: relative;
 
     iframe {
-      border-radius: 28px;
+      border-radius: rem(28px);
     }
 
     .Contacts {
       position: absolute;
       z-index: 2;
-      top: -40px;
+      top: rem(-40px);
-      right: 180px;
+      right: rem(180px);
-      border-radius: 28px;
+      border-radius: rem(28px);
       background: $color-white;
-      width: 440px;
+      width: rem(440px);
-      //height: 540px;
+      padding: rem(40px) rem(35px) rem(20px);
-      padding: 40px 35px 20px;
 
       display: flex;
       flex-direction: column;
@@ -128,17 +127,17 @@
         position: relative;
         font-family: $font-open-sans;
         font-weight: $font-semi-bold;
-        font-size: 48px;
+        font-size: rem(48px);
         line-height: 100%;
         color: $color-text;
         text-align: right;
-        margin-bottom: 32px;
+        margin-bottom: rem(32px);
         align-self: center;
 
         .LedOn {
           position: absolute;
-          bottom: 6px;
+          bottom: rem(6px);
-          left: 6px;
+          left: rem(6px);
         }
       }
 
@@ -146,18 +145,18 @@
         position: relative;
         font-family: $font-open-sans;
         font-weight: $font-regular;
-        font-size: 32px;
+        font-size: rem(32px);
         line-height: 130%;
         color: $color-text;
-        margin-bottom: 20px;
+        margin-bottom: rem(20px);
-        margin-left: 32px;
+        margin-left: rem(32px);
 
         .Icon {
           position: absolute;
-          left: -48px;
+          left: rem(-48px);
-          top: 8px;
+          top: rem(8px);
-          width: 32px;
+          width: rem(32px);
-          height: 32px;
+          height: rem(32px);
           stroke: #E96526;
         }
       }

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

@@ -1,16 +1,16 @@
 .Footer {
   background-color: #1B1B25;
-  padding: 80px 160px;
+  padding: rem(80px) rem(160px);
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   align-items: flex-start;
-  gap: 20px;
+  gap: rem(20px);
 
-  .Block{
+  .Block {
     display: flex;
     flex-direction: column;
-    gap: 20px;
+    gap: rem(20px);
     max-width: 40vw;
   }
 
@@ -22,25 +22,25 @@
   .Header {
     font-family: $font-open-sans;
     font-weight: $font-semi-bold;
-    font-size: 60px;
+    font-size: rem(60px);
     line-height: 100%;
     color: $color-white;
-    margin-bottom: 40px;
+    margin-bottom: rem(40px);
   }
 
   .Bottom {
     width: 100%;
-    height: 80px;
+    height: rem(80px);
     border-top: 1px solid $color-white;
     display: flex;
     flex-direction: row;
     align-items: center;
-    gap: 20px;
+    gap: rem(20px);
 
     .Policy {
       font-family: $font-open-sans;
       font-weight: $font-regular;
-      font-size: 16px;
+      font-size: rem(16px);
       line-height: 100%;
       color: $color-white;
       margin-left: auto;

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

@@ -1,30 +1,30 @@
 .License {
-  padding: 160px;
+  padding: rem(160px);
 
 
   .Header {
     font-family: $font-open-sans;
     font-weight: $font-semi-bold;
-    font-size: 60px;
+    font-size: rem(60px);
     line-height: 100%;
     color: $color-text;
-    margin-bottom: 80px;
+    margin-bottom: rem(80px);
   }
 
   .Slider {
-    margin-bottom: 80px;
+    margin-bottom: rem(80px);
   }
 
   .Form {
     position: relative;
     background: #292E3D;
-    padding: 40px 60px;
+    padding: rem(40px) rem(60px);
-    border-radius: 28px;
+    border-radius: rem(28px);
     overflow: hidden;
 
     display: flex;
     flex-direction: row;
-    gap: 40px;
+    gap: rem(40px);
 
     &:after {
       content: '';
@@ -53,10 +53,10 @@
         z-index: 2;
         font-family: $font-open-sans;
         font-weight: $font-regular;
-        font-size: 48px;
+        font-size: rem(48px);
         line-height: 110%;
         color: $color-white;
-        margin: 0 0 50px;
+        margin: 0 0 rem(50px);
       }
 
       .SubTitle {
@@ -64,11 +64,11 @@
         z-index: 2;
         font-family: $font-open-sans;
         font-weight: $font-light;
-        font-size: 30px;
+        font-size: rem(30px);
         line-height: 100%;
         color: $color-white;
-        margin-bottom: 16px;
+        margin-bottom: rem(16px);
-        max-width: 820px;
+        max-width: rem(820px);
       }
     }
 
@@ -79,7 +79,7 @@
       display: flex;
       flex-direction: column;
       justify-content: center;
-      gap: 20px;
+      gap: rem(20px);
     }
 
   }

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

@@ -1,12 +1,12 @@
 .Main {
-  padding: 0px 160px 0px;
+  padding: 0 rem(160px) 0;
 
   &_BgWrapper {
     position: absolute;
     top: 0;
     left: 0;
     width: 100vw;
-    height: 900px;
+    height: rem(900px);
     z-index: -1;
 
     & img {
@@ -22,7 +22,8 @@
   justify-content: space-between;
   align-items: center;
   border-bottom: 1px solid $color-white;
-  height: 80px;
+  height: rem(80px);
+
   .Logo {
     color: $color-white;
   }
@@ -32,20 +33,20 @@
     display: flex;
     flex-direction: row;
     align-items: center;
-    gap: 30px;
+    gap: rem(30px);
 
     .Icon {
-      width: 60px;
+      width: rem(60px);
-      height: 60px;
+      height: rem(60px);
       cursor: pointer;
     }
 
     .Button {
       display: flex;
       flex-direction: row;
-      gap: 16px;
+      gap: rem(16px);
-      height: 48px;
+      height: rem(48px);
-      padding: 24px;
+      padding: rem(24px);
     }
   }
 }
@@ -54,36 +55,50 @@
   margin: 0 auto;
   display: flex;
   flex-direction: row;
-  padding: 160px 0 200px;
+  padding: rem(160px) 0 rem(200px);
 
   .Content {
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
-    gap: 60px;
+    gap: rem(60px);
 
     .Title {
       font-family: $font-open-sans;
       font-weight: $font-regular;
-      font-size: 60px;
+      font-size: rem(60px);
       line-height: 1;
       color: $color-white;
-      max-width: 960px;
+      max-width: rem(960px);
     }
 
     .List {
       display: flex;
       flex-direction: column;
       justify-content: flex-start;
-      gap: 16px;
+      gap: rem(16px);
     }
 
     .ListItem {
+      position: relative;
       font-family: $font-open-sans;
       font-weight: $font-semi-bold;
-      font-size: 26px;
+      font-size: rem(26px);
       line-height: 1;
       color: $color-white;
+      margin-left: rem(36px);
+
+      &:after {
+        position: absolute;
+        top: rem(2px);
+        left: 0;
+        content: '';
+        width: rem(24px);
+        height: rem(24px);
+        background: url("/svg/check.svg") no-repeat;
+        background-size: rem(24px) rem(24px);
+        margin-left: rem(-36px);
+      }
     }
   }
 
@@ -93,12 +108,12 @@
     justify-content: center;
     align-items: center;
     flex-basis: 40%;
-    gap: 40px;
+    gap: rem(40px);
 
     .Title {
       font-family: $font-open-sans;
       font-weight: $font-semi-bold;
-      font-size: 60px;
+      font-size: rem(60px);
       line-height: 1;
       color: $color-white;
     }

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

@@ -1,51 +1,51 @@
 .Offer {
   background: $color-lightgray;
-  border-radius: 28px;
+  border-radius: rem(28px);
-  padding: 160px;
+  padding: rem(160px);
 
   .Title {
     font-family: $font-open-sans;
     font-weight: $font-semi-bold;
-    font-size: 60px;
+    font-size: rem(60px);
     line-height: 100%;
     color: $color-text;
-    max-width: 1330px;
+    max-width: rem(1330px);
-    margin-bottom: 80px;
+    margin-bottom: rem(80px);
   }
 
   .Text {
     font-family: $font-open-sans;
     font-weight: $font-regular;
-    font-size: 32px;
+    font-size: rem(32px);
     line-height: 100%;
     color: $color-text;
-    margin-bottom: 20px;
+    margin-bottom: rem(20px);
   }
 
   .List {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
-    max-width: 1330px;
+    max-width: rem(1330px);
-    margin-bottom: 60px;
+    margin-bottom: rem(60px);
 
     .ListItem {
       font-family: $font-open-sans;
       font-weight: $font-regular;
-      font-size: 32px;
+      font-size: rem(32px);
       line-height: 160%;
       color: $color-text;
       list-style-type: decimal;
-      margin-left: 40px;
+      margin-left: rem(40px);
     }
   }
 
   .RowForm {
     display: flex;
     flex-direction: row;
-    gap: 40px;
+    gap: rem(40px);
     justify-content: center;
-    margin-bottom: 80px;
+    margin-bottom: rem(80px);
   }
 
   .Inner {
@@ -53,15 +53,15 @@
     flex-direction: column;
     align-items: flex-start;
     background-color: $color-white;
-    border-radius: 28px;
+    border-radius: rem(28px);
-    padding: 80px 40px;
+    padding: rem(80px) rem(40px);
-    margin-bottom: 130px;
+    margin-bottom: rem(130px);
 
     .Title {
       font-family: $font-open-sans;
       font-weight: $font-semi-bold;
-      font-size: 60px;
+      font-size: rem(60px);
-      line-height: 1;
+      line-height: 100%;
       color: $color-text;
     }
 
@@ -69,15 +69,15 @@
       display: grid;
       grid-template-rows: repeat(2, 1fr);
       grid-template-columns: repeat(3, 1fr);
-      gap: 40px;
+      gap: rem(40px);
-      padding: 40px 0;
+      padding: rem(40px) 0;
     }
 
     .Tile {
       position: relative;
-      padding: 25px;
+      padding: rem(25px);
-      height: 352px;
+      height: rem(352px);
-      border-radius: 28px;
+      border-radius: rem(28px);
       overflow: hidden;
 
       &:after {
@@ -121,7 +121,7 @@
         z-index: 2;
         font-family: $font-open-sans;
         font-weight: $font-regular;
-        font-size: 42px;
+        font-size: rem(42px);
         line-height: 100%;
         color: $color-white;
       }
@@ -132,7 +132,7 @@
         display: none;
         font-family: $font-open-sans;
         font-weight: $font-regular;
-        font-size: 24px;
+        font-size: rem(24px);
         line-height: 130%;
         color: $color-white;
       }
@@ -140,10 +140,10 @@
       .Arrow {
         position: absolute;
         z-index: 2;
-        right: 25px;
+        right: rem(25px);
-        bottom: 25px;
+        bottom: rem(25px);
-        width: 64px;
+        width: rem(64px);
-        height: 64px;
+        height: rem(64px);
         transform: rotate(-135deg);
         transition: transform 250ms ease-in-out;
       }
@@ -152,9 +152,9 @@
 
   .Form {
     position: relative;
-    padding: 40px 60px;
+    padding: rem(40px) rem(60px);
     background: #292E3D;
-    border-radius: 28px;
+    border-radius: rem(28px);
     overflow: hidden;
     display: grid;
     grid-template-columns: 1fr 1fr;
@@ -182,6 +182,7 @@
       display: flex;
       flex-direction: column;
     }
+
     .PanelRight {
       width: 100%;
       place-self: end end;
@@ -192,10 +193,10 @@
       z-index: 2;
       font-family: $font-open-sans;
       font-weight: $font-light;
-      font-size: 30px;
+      font-size: rem(30px);
       line-height: 100%;
       color: $color-white;
-      margin-bottom: 16px;
+      margin-bottom: rem(16px);
     }
 
     .Title {
@@ -203,10 +204,10 @@
       z-index: 2;
       font-family: $font-open-sans;
       font-weight: $font-regular;
-      font-size: 48px;
+      font-size: rem(48px);
       line-height: 130%;
       color: $color-white;
-      max-width: 660px;
+      max-width: rem(660px);
       margin: 0;
     }
   }

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

@@ -1,13 +1,13 @@
 .Result {
-  padding: 160px;
+  padding: rem(160px);
 
   .Header {
     font-family: $font-open-sans;
     font-weight: $font-semi-bold;
-    font-size: 60px;
+    font-size: rem(60px);
     line-height: 100%;
     color: $color-text;
-    margin-bottom: 96px;
+    margin-bottom: rem(96px);
   }
 
   .Row {
@@ -16,7 +16,7 @@
     flex-direction: row;
     justify-content: space-between;
     gap: 10vw;
-    margin-bottom: 80px;
+    margin-bottom: rem(80px);
 
     &:nth-child(odd) {
       flex-direction: row-reverse;
@@ -28,10 +28,10 @@
       .Title {
         font-family: $font-open-sans;
         font-weight: $font-regular;
-        font-size: 48px;
+        font-size: rem(48px);
         line-height: 100%;
         color: $color-text;
-        margin-bottom: 40px;
+        margin-bottom: rem(40px);
       }
 
       .Description {
@@ -47,10 +47,10 @@
       flex: 1;
       position: relative;
       overflow: hidden;
-      border-radius: 28px;
+      border-radius: rem(28px);
       object-fit: contain;
-      max-width: 720px;
+      max-width: rem(720px);
-      height: 540px;
+      height: rem(540px);
       &:after {
         content: '';
         display: block;