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

@@ -6,13 +6,36 @@
   width: 100%;
   position: relative;
   z-index: 2;
-  padding-left: 2vw;
+
+  @include iftablet{
+  }
+  @include iflaptop{
+    padding-left: rem(16px);
+  }
+  @include ifdesktop{
+    padding-left: rem(32px);
+  }
 }
 
 .Button {
   position: absolute;
-  right: rem(2px);
-  top: calc(50% - 1.6rem);
   z-index: 3;
+  right: rem(2px);
+  top: calc(50% - 1.2rem);
   min-height: calc(100% - .25rem);
+
+  @include iftablet{
+    top: calc(50% - 1.2rem);
+    right: rem(3px);
+  }
+
+  @include iflaptop{
+    top: calc(50% - 1.4rem);
+    right: rem(4px);
+  }
+
+  @include ifdesktop{
+    top: calc(50% - 1.6rem);
+    right: rem(2px);
+  }
 }

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

@@ -2,19 +2,26 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: rem(10px) rem(32px);
-  border-radius: rem(28px);
-  min-height: rem(54px);
+  padding: rem(8px) rem(28px);
+  border-radius: rem(20px);
+  min-height: rem(40px);
 
   font-family: $font-open-sans;
   font-weight: $font-regular;
-  font-size: rem(24px);
+  font-size: rem(16px);
   line-height: 100%;
 
   transition: all 0.15s linear;
   white-space: nowrap;
   width: max-content;
 
+  @include ifdesktop{
+    font-size: rem(24px);
+    padding: rem(10px) rem(32px);
+    border-radius: rem(28px);
+    min-height: rem(54px);
+  }
+
   &_fullWidth {
     width: 100%;
   }

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

@@ -3,16 +3,29 @@
   background: $color-white;
   border: 1px solid $color-darkgray;
   border-radius: rem(28px);
-  padding: rem(10px) rem(24px);
+  padding: rem(8px) rem(20px);
   transition: border ease .5s;
 
   font-family: $font-open-sans;
   font-weight: $font-regular;
-  font-size: rem(24px);
+  font-size: rem(18px);
   line-height: 100%;
   color: $color-text;
   width: max-content;
 
+  @include iftablet{
+    font-size: rem(18px);
+  }
+
+  @include iflaptop{
+    font-size: rem(20px);
+    padding: rem(10px) rem(20px);
+  }
+
+  @include ifdesktop{
+    font-size: rem(24px);
+  }
+
   &:focus {
     border-color: $color-orange;
     transition: border-color ease .5s;

src/views/home/ui/home.tsx

@@ -1,9 +1,9 @@
 import Main from './main/main';
 import Offer from './offer/offer';
 import Result from './result/result';
-import License from './license/license';
-import Contacts from './contacts/contacts';
-import Footer from './footer/footer';
+// import License from './license/license';
+// import Contacts from './contacts/contacts';
+// import Footer from './footer/footer';
 
 export default function HomePage() {
   return (
@@ -11,9 +11,9 @@ export default function HomePage() {
       <Main />
       <Offer />
       <Result />
-      <License />
-      <Contacts />
-      <Footer />
+      {/*<License />*/}
+      {/*<Contacts />*/}
+      {/*<Footer />*/}
     </>
   );
 }

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

@@ -1,7 +1,20 @@
 .Main {
   margin: 0 auto;
+  width: 90vw;
+
+  @include iftablet {
+    margin: 0 auto;
+    width: rem(712px);
+  }
+
+  @include iflaptop {
+    width: rem(930px);
+  }
+
+  @include ifdesktop {
     width: rem(1340px);
-  //padding: 0 rem(160px) 0;
+  }
+
 
   &_BgWrapper {
     position: absolute;
@@ -38,71 +51,191 @@
     gap: rem(30px);
 
     .Icon {
+      display: none;
+      cursor: pointer;
+
+      @include iftablet {
+        display: block;
+        width: rem(40px);
+        height: rem(40px);
+      }
+
+      @include ifdesktop {
         width: rem(60px);
         height: rem(60px);
-      cursor: pointer;
+      }
     }
 
     .Button {
+      display: none;
+
+      @include iflaptop {
         display: flex;
         flex-direction: row;
+        gap: rem(16px);
+        height: rem(40px);
+        padding: rem(20px);
+      }
+
+      @include ifdesktop {
         gap: rem(16px);
         height: rem(48px);
         padding: rem(24px);
       }
+
+      img {
+        width: rem(30px);
+        height: rem(30px);
+        @include ifdesktop {
+          width: rem(40px);
+          height: rem(40px);
+        }
+      }
+    }
   }
 }
 
 .Info {
   margin: 0 auto;
   display: flex;
+  flex-direction: column;
+  padding: rem(64px) 0 rem(160px);
+  gap: rem(100px);
+
+  @include iftablet {
     flex-direction: row;
+    gap: unset;
+  }
+  @include iflaptop {
+  }
+  @include ifdesktop {
+  }
+
+  @include iftablet {
+    padding: rem(130px) 0 rem(160px);
+  }
+
+  @include iflaptop {
+    padding: rem(130px) 0 rem(160px);
+  }
+
+  @include ifdesktop {
     padding: rem(160px) 0 rem(200px);
+  }
 
   .Content {
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
+    gap: rem(50px);
+
+    @include iftablet {
+      gap: rem(40px);
+    }
+
+    @include iflaptop {
+      gap: rem(50px);
+    }
+
+    @include ifdesktop {
       gap: rem(60px);
+    }
 
     .Title {
       font-family: $font-open-sans;
       font-weight: $font-regular;
-      font-size: rem(60px);
-      line-height: 1;
+      font-size: rem(24px);
+      line-height: 120%;
       color: $color-white;
+      //max-width: rem(960px);
+
+      @include iftablet {
+        font-size: rem(28px);
+        max-width: rem(360px);
+      }
+
+      @include iflaptop {
+        font-size: rem(32px);
+        max-width: rem(508px);
+      }
+
+      @include ifdesktop {
+        font-size: rem(60px);
         max-width: rem(960px);
       }
+    }
 
     .List {
       display: flex;
       flex-direction: column;
       justify-content: flex-start;
+      gap: rem(18px);
+
+      @include iftablet {
+        gap: rem(20px);
+      }
+
+      @include ifdesktop {
         gap: rem(16px);
       }
+    }
 
     .ListItem {
       position: relative;
       font-family: $font-open-sans;
       font-weight: $font-semi-bold;
-      font-size: rem(26px);
+      font-size: rem(16px);
       line-height: 1;
       color: $color-white;
+      margin-left: rem(24px);
+
+      @include iftablet {
+        font-size: rem(18px);
         margin-left: rem(36px);
+        max-width: rem(360px);
+      }
+
+      @include iflaptop {
+        font-size: rem(20px);
+        margin-left: rem(36px);
+        max-width: rem(400px);
+      }
+
+      @include ifdesktop {
+        font-size: rem(26px);
+        margin-left: rem(36px);
+        max-width: rem(730px);
+      }
 
       &:after {
         position: absolute;
-        top: rem(2px);
+        top: 0;
         left: 0;
         content: '';
+        width: rem(16px);
+        height: rem(16px);
+        background: url("/svg/check.svg") no-repeat;
+        background-size: rem(16px) rem(16px);
+        margin-left: rem(-24px);
+
+        @include iftablet {
+          top: rem(2px);
+          width: rem(20px);
+          height: rem(20px);
+          background-size: rem(20px) rem(20px);
+          margin-left: rem(-36px);
+        }
+
+        @include ifdesktop {
+          top: rem(2px);
           width: rem(24px);
           height: rem(24px);
-        background: url("/svg/check.svg") no-repeat;
           background-size: rem(24px) rem(24px);
           margin-left: rem(-36px);
         }
       }
     }
+  }
 
   .Phone {
     display: flex;
@@ -111,13 +244,38 @@
     align-items: center;
     flex-basis: 40%;
     gap: rem(40px);
+    text-wrap: nowrap;
+
+    @include iftablet {
+      gap: rem(40px);
+    }
+
+    @include iflaptop {
+      gap: rem(40px);
+    }
+
+    @include ifdesktop {
+      gap: rem(40px);
+    }
 
     .Title {
       font-family: $font-open-sans;
       font-weight: $font-semi-bold;
-      font-size: rem(60px);
-      line-height: 1;
+      font-size: rem(36px);
+      line-height: 100%;
       color: $color-white;
+
+      @include iftablet {
+        font-size: rem(40px);
+      }
+
+      @include iflaptop {
+        font-size: rem(40px);
+      }
+
+      @include ifdesktop {
+        font-size: rem(60px);
+      }
     }
   }
 }

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

@@ -1,91 +1,241 @@
 .Offer {
   background: $color-lightgray;
   border-radius: rem(28px);
+  padding: rem(32px) 0 0;
+
+  @include iftablet {
+    padding: rem(60px) 0 rem(40px);
+  }
+
+  @include iflaptop {
+    padding: rem(60px) 0 rem(60px);
+  }
+
+  @include ifdesktop {
     padding: rem(160px) 0;
   }
+}
 
 .InnerContainer {
   margin: 0 auto;
-  width: rem(1340px);
+
+  @include iftablet {
+    margin: 0 auto;
+    width: rem(712px);
   }
 
-.Title {
+  @include iflaptop {
+    width: rem(930px);
+  }
+
+  @include ifdesktop {
+    width: rem(1340px);
+  }
+}
+
+.Top {
+  padding: 0 rem(20px) rem(30px);
+
+  @include iftablet {
+    padding: 0;
+  }
+
+  .Header {
     font-family: $font-open-sans;
     font-weight: $font-semi-bold;
-  font-size: rem(60px);
-  line-height: 100%;
+    font-size: rem(26px);
+    line-height: 120%;
     color: $color-text;
-  max-width: rem(1330px);
+    margin-bottom: rem(40px);
+
+    @include iftablet {
+      font-size: rem(28px);
+    }
+
+    @include iflaptop {
+      font-size: rem(32px);
+    }
+
+    @include ifdesktop {
+      font-size: rem(60px);
       margin-bottom: rem(80px);
     }
+  }
 
   .Text {
     font-family: $font-open-sans;
     font-weight: $font-regular;
-  font-size: rem(32px);
+    font-size: rem(18px);
     line-height: 100%;
     color: $color-text;
     margin-bottom: rem(20px);
+
+    @include iflaptop {
+      font-size: rem(20px);
+    }
+
+    @include ifdesktop {
+      font-size: rem(32px);
+    }
   }
 
   .List {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
-  max-width: rem(1330px);
+    margin-bottom: rem(30px);
+
+    @include iftablet {
+      margin-bottom: rem(40px);
+    }
+
+    @include ifdesktop {
       margin-bottom: rem(60px);
+    }
 
     .ListItem {
       font-family: $font-open-sans;
       font-weight: $font-regular;
-    font-size: rem(32px);
+      font-size: rem(18px);
       line-height: 160%;
       color: $color-text;
       list-style-type: decimal;
       margin-left: rem(40px);
+
+      @include iflaptop {
+        font-size: rem(20px);
+      }
+
+      @include ifdesktop {
+        font-size: rem(32px);
+        margin-left: rem(40px);
+      }
+    }
   }
 }
 
 .RowForm {
   display: flex;
-  flex-direction: row;
-  gap: rem(40px);
-  justify-content: center;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
+  gap: rem(10px);
   margin-bottom: rem(80px);
+
+  @include iftablet {
+    flex-direction: row;
+    justify-content: center;
+    gap: rem(10px);
+  }
+
+  @include iflaptop {
+    justify-content: center;
+    gap: rem(20px);
+  }
+
+  @include ifdesktop {
+    justify-content: center;
+    gap: rem(40px);
+  }
+
+  .Unit {
+    width: 300px;
+    @include iftablet {
+      width: unset;
+    }
+  }
 }
 
 .Inner {
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
+  align-items: center;
   background-color: $color-white;
+  border-radius: rem(28px);
+  padding: rem(30px) rem(20px);
+  margin-bottom: rem(40px);
+
+  @include iftablet {
+    align-items: flex-start;
+    padding: rem(28px) rem(20px);
+  }
+
+  @include iflaptop {
+    padding: rem(40px);
+    margin-bottom: rem(80px);
+  }
+
+  @include ifdesktop {
     border-radius: rem(28px);
     padding: rem(80px) rem(40px);
     margin-bottom: rem(130px);
+  }
 
   .Title {
     font-family: $font-open-sans;
     font-weight: $font-semi-bold;
-    font-size: rem(60px);
+    font-size: rem(26px);
     line-height: 100%;
     color: $color-text;
+    max-width: rem(320px);
+
+    @include iftablet {
+      font-size: rem(28px);
+      max-width: unset;
+    }
+
+    @include iflaptop {
+      font-size: rem(36px);
+    }
+
+    @include ifdesktop {
+      font-size: rem(60px);
+      margin-bottom: rem(40px);
+    }
   }
 
   .Grid {
     display: grid;
+    grid-template-columns: rem(320px);
+    gap: rem(20px);
+    padding: rem(20px) 0;
+
+    @include iftablet {
+      grid-template-rows: repeat(3, 1fr);
+      grid-template-columns: repeat(2, 1fr);
+      gap: rem(25px);
+      padding: rem(20px) 0;
+    }
+
+    @include iflaptop {
+      gap: rem(30px);
+      padding: rem(40px) 0;
+    }
+
+    @include ifdesktop {
       grid-template-rows: repeat(2, 1fr);
       grid-template-columns: repeat(3, 1fr);
       gap: rem(40px);
       padding: rem(40px) 0;
     }
+  }
 
   .Tile {
     position: relative;
-    padding: rem(25px);
-    height: rem(352px);
+    height: rem(220px);
+    padding: rem(20px);
     border-radius: rem(28px);
     overflow: hidden;
 
+    @include iflaptop {
+      height: rem(260px);
+    }
+
+    @include ifdesktop {
+      height: rem(352px);
+      padding: rem(25px);
+    }
+
     &:after {
       content: '';
       display: block;
@@ -127,9 +277,21 @@
       z-index: 2;
       font-family: $font-open-sans;
       font-weight: $font-regular;
-      font-size: rem(42px);
+      font-size: rem(24px);
       line-height: 100%;
       color: $color-white;
+
+      @include iftablet {
+        font-size: rem(28px);
+      }
+
+      @include iflaptop {
+        font-size: rem(32px);
+      }
+
+      @include ifdesktop {
+        font-size: rem(42px);
+      }
     }
 
     .Description {
@@ -138,32 +300,75 @@
       display: none;
       font-family: $font-open-sans;
       font-weight: $font-regular;
-      font-size: rem(24px);
+      font-size: rem(18px);
       line-height: 130%;
       color: $color-white;
+
+      @include iftablet {
+        font-size: rem(18px);
+      }
+
+      @include iflaptop {
+        font-size: rem(20px);
+      }
+
+      @include ifdesktop {
+        font-size: rem(24px);
+      }
     }
 
     .Arrow {
       position: absolute;
       z-index: 2;
+      right: rem(10px);
+      bottom: rem(10px);
+      width: rem(40px);
+      height: rem(40px);
+      transform: rotate(-135deg);
+      transition: transform 250ms ease-in-out;
+
+      @include iflaptop {
+        right: rem(16px);
+        bottom: rem(16px);
+        width: rem(48px);
+        height: rem(48px);
+      }
+
+      @include ifdesktop {
         right: rem(25px);
         bottom: rem(25px);
         width: rem(64px);
         height: rem(64px);
-      transform: rotate(-135deg);
-      transition: transform 250ms ease-in-out;
+      }
     }
   }
 }
 
 .Form {
   position: relative;
-  padding: rem(40px) rem(60px);
   background: #292E3D;
-  border-radius: rem(28px);
   overflow: hidden;
+
   display: grid;
-  grid-template-columns: 1fr 1fr;
+  grid-template-rows: auto 1fr;
+  grid-template-columns: 1fr;
+  gap: rem(20px);
+  padding: rem(25px) rem(20px);
+  border-radius: rem(28px);
+
+  @include iftablet {
+    padding: rem(30px);
+  }
+
+  @include iflaptop {
+    grid-template-rows: 1fr;
+    grid-template-columns: auto rem(400px);
+    padding: rem(40px);
+  }
+  @include ifdesktop {
+    grid-template-columns: auto rem(550px);
+    padding: rem(40px) rem(60px);
+  }
 
   &:after {
     content: '';
@@ -190,19 +395,57 @@
   }
 
   .PanelRight {
-    width: 100%;
+    place-self: center center;
+
+    @include iftablet{
+      width: rem(400px);
       place-self: end end;
     }
+    @include iflaptop{
+      width: 100%;
+    }
+
+    .AdvPhoneInput{
+      display: none;
+      @include iftablet{
+        display: block;
+      }
+    }
+    .MobileBtns {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      gap: rem(12px);
+      z-index: 2;
+      max-width: rem(400px);
+      @include iftablet{
+        display: none;
+      }
+    }
+  }
 
   .SubTitle {
     position: relative;
     z-index: 2;
     font-family: $font-open-sans;
     font-weight: $font-light;
-    font-size: rem(30px);
+    font-size: rem(22px);
     line-height: 100%;
     color: $color-white;
     margin-bottom: rem(16px);
+
+    @include iftablet {
+      margin-bottom: rem(20px);
+    }
+
+    @include iflaptop {
+      font-size: rem(24px);
+    }
+
+    @include ifdesktop {
+      font-size: rem(30px);
+      margin-bottom: rem(16px);
+    }
   }
 
   .Title {
@@ -210,10 +453,22 @@
     z-index: 2;
     font-family: $font-open-sans;
     font-weight: $font-regular;
-    font-size: rem(48px);
+    font-size: rem(26px);
     line-height: 130%;
     color: $color-white;
     max-width: rem(660px);
     margin: 0;
+
+    @include iftablet {
+      font-size: rem(28px);
+    }
+
+    @include iflaptop {
+      font-size: rem(32px);
+    }
+
+    @include ifdesktop {
+      font-size: rem(48px);
+    }
   }
 }

src/views/home/ui/offer/offer.tsx

@@ -20,7 +20,8 @@ export default function Offer() {
   return (
     <section className={s.Offer}>
       <div className={s.InnerContainer}>
-        <h2 className={s.Title}>
+        <div className={s.Top}>
+          <h2 className={s.Header}>
             Помогаем <Mark> выявить недостатки </Mark> и <Mark>привести</Mark>{' '}
             систему Охранно-Пожарной <br />
             сигнализации <Mark> в соответствие </Mark> со всеми нормативами
@@ -42,16 +43,26 @@ export default function Offer() {
               новые, что позволяет сократить стоимость сметы на модернизацию.
             </li>
           </ul>
+        </div>
+
         <form className={s.RowForm}>
-          <Input type='text' placeholder='+7 (999) 123 45 67' />
           <Input
+            className={s.Unit}
+            type='text'
+            placeholder='+7 (999) 123 45 67'
+          />
+          <Input
+            className={s.Unit}
             type='text'
             placeholder='Ваше имя'
             value={name}
             onChange={(e) => setName(e.target.value)}
           />
-          <Button variant='orange'>Узнать подробности</Button>
+          <Button className={s.Unit} variant='orange'>
+            Узнать подробности
+          </Button>
         </form>
+
         <div className={s.Inner}>
           <h2 className={s.Title}>
             Возьмем <Mark>на себя</Mark> все заботы
@@ -75,6 +86,7 @@ export default function Offer() {
             ))}
           </div>
         </div>
+
         <div className={s.Form}>
           <Image
             className={s.Background}
@@ -93,9 +105,18 @@ export default function Offer() {
           </div>
           <div className={s.PanelRight}>
             <AdvancedPhoneInput
-              text='Получить консультацию'
+              containerClassName={s.AdvPhoneInput}
+              text='Отправить заявку'
               placeholder={'+7 (999) 123 45 67'}
             />
+
+            <div className={s.MobileBtns}>
+              <Input placeholder='Ваше имя' fullWidth />
+              <Input placeholder='+7 999 123 45 67' fullWidth />
+              <Button variant='orange' fullWidth>
+                Отправить заявку
+              </Button>
+            </div>
           </div>
         </div>
       </div>

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

@@ -1,58 +1,135 @@
 .Result {
   margin: 0 auto;
+  width: rem(320px);
+  padding: rem(60px) 0;
+
+  @include iftablet {
+    margin: 0 auto;
+    width: rem(712px);
+  }
+
+  @include iflaptop {
+    width: rem(930px);
+    padding: rem(80px) 0;
+  }
+
+  @include ifdesktop {
     width: rem(1340px);
     padding: rem(160px) 0 rem(80px);
+  }
 
   .Header {
     font-family: $font-open-sans;
     font-weight: $font-semi-bold;
-    font-size: rem(60px);
+    font-size: rem(28px);
     line-height: 100%;
     color: $color-text;
+    margin-bottom: rem(40px);
+
+    @include iftablet {
+      font-size: rem(36px);
+      margin-bottom: rem(60px);
+    }
+
+    @include iflaptop {
+      font-size: rem(36px);
+      margin-bottom: rem(80px);
+    }
+
+    @include ifdesktop {
+      font-size: rem(60px);
       margin-bottom: rem(96px);
     }
+  }
 
   .Row {
     width: 100%;
     display: flex;
+    flex-direction: column-reverse;
+    gap: rem(20px);
+    margin-bottom: rem(40px);
+
+    @include iftablet {
       flex-direction: row;
       justify-content: space-between;
-    gap: rem(48px);
+      gap: rem(80px);
       margin-bottom: rem(80px);
+    }
+
+    @include ifdesktop {
+      gap: rem(60px);
+      margin-bottom: rem(160px);
+    }
 
     &:nth-child(odd) {
+      flex-direction: column-reverse;
+
+      @include iftablet {
         flex-direction: row-reverse;
       }
+    }
 
     .Review {
-      flex: 1;
+      flex: 1 0;
 
       .Title {
         font-family: $font-open-sans;
         font-weight: $font-regular;
-        font-size: rem(48px);
+        font-size: rem(28px);
         line-height: 100%;
         color: $color-text;
+        margin-bottom: rem(20px);
+
+        @include iftablet {
+          margin-bottom: rem(36px);
+        }
+
+        @include iflaptop {
+          font-size: rem(32px);
           margin-bottom: rem(40px);
         }
 
+        @include ifdesktop {
+          font-size: rem(48px);
+        }
+      }
+
       .Description {
         font-family: $font-open-sans;
         font-weight: $font-regular;
-        font-size: 24px;
+        font-size: rem(18px);
         line-height: 100%;
         color: $color-text;
+
+        @include iflaptop {
+          font-size: rem(20px);
+        }
+
+        @include ifdesktop {
+          font-size: rem(24px);
+        }
       }
     }
 
     .Picture {
-      flex: 1;
+      flex: 1 rem(220px);
       position: relative;
-      overflow: hidden;
       border-radius: rem(28px);
       object-fit: contain;
+      max-width: rem(320px);
+      height: rem(220px);
+      overflow: hidden;
+
+      @include iflaptop {
+        flex: 1 0;
+        max-width: rem(440px);
+        height: rem(260px);
+      }
+      @include ifdesktop {
         max-width: rem(720px);
         height: rem(540px);
+      }
+
       &:after {
         content: '';
         display: block;