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

@@ -20,7 +20,7 @@
 
   font-family: $font-open-sans;
   font-weight: $font-regular;
-  font-size: rem(24px);
+  font-size: rem(18px);
   line-height: 100%;
   color: $color-text;
 
@@ -29,6 +29,19 @@
   width: 100%;
   flex-grow: 1;
 
+  @include iftablet{
+    font-size: rem(18px);
+  }
+
+  @include iflaptop{
+    font-size: rem(20px);
+    padding: rem(10px) rem(20px);
+  }
+
+  @include ifdesktop{
+    font-size: rem(24px);
+  }
+
   /* scrollbar */
   & {
     /* Arrow mouse cursor over the scrollbar */

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

@@ -1,21 +1,62 @@
-.Contacts {
+.Container {
+  position: relative;
+  z-index: 2;
   background: $color-lightgray;
   border-radius: rem(28px);
-  padding: rem(160px) 0;
+  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 {
+.Contacts {
   margin: 0 auto;
-  width: rem(1340px);
+
+  @include iftablet {
+    width: rem(712px);
+  }
+
+  @include iflaptop {
+    width: rem(930px);
+  }
+
+  @include ifdesktop {
+    width: rem(1340px);
+  }
 }
 
 .Header {
   font-family: $font-open-sans;
   font-weight: $font-semi-bold;
-  font-size: rem(60px);
+  font-size: rem(26px);
   line-height: 100%;
   color: $color-text;
-  margin-bottom: rem(80px);
+  margin-bottom: rem(40px);
+  padding: 0 rem(20px);
+
+  @include iftablet {
+    font-size: rem(28px);
+    padding: unset;
+  }
+
+  @include iflaptop {
+    font-size: rem(36px);
+    margin-bottom: rem(60px);
+  }
+
+  @include ifdesktop {
+    font-size: rem(60px);
+    margin-bottom: rem(80px);
+  }
 }
 
 .Clients {
@@ -26,8 +67,25 @@
   justify-content: space-around;
   align-items: center;
   gap: rem(40px);
-  max-width: rem(1200px);
+  padding: 0 0 rem(32px);
-  margin-bottom: rem(160px);
+
+  @include iftablet {
+    gap: rem(40px);
+    max-width: rem(1200px);
+    margin-bottom: rem(160px);
+  }
+
+  @include iflaptop {
+    gap: rem(40px);
+    max-width: rem(1200px);
+    margin-bottom: rem(160px);
+  }
+
+  @include ifdesktop {
+    gap: rem(40px);
+    max-width: rem(1200px);
+    margin-bottom: rem(160px);
+  }
 
   .Client {
 
@@ -42,13 +100,33 @@
   position: relative;
   background: #292E3D;
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
+  gap: rem(40px);
+  overflow: hidden;
   padding: rem(60px) rem(50px);
   border-radius: rem(28px);
-  overflow: hidden;
-
   margin-bottom: rem(80px);
 
+  @include iftablet {
+    flex-direction: row;
+    gap: unset;
+    padding: rem(60px) rem(50px);
+    border-radius: rem(28px);
+    margin-bottom: rem(120px);
+  }
+
+  @include iflaptop {
+    padding: rem(60px) rem(50px);
+    border-radius: rem(28px);
+    margin-bottom: rem(100px);
+  }
+
+  @include ifdesktop {
+    padding: rem(60px) rem(50px);
+    border-radius: rem(28px);
+    margin-bottom: rem(160px);
+  }
+
   &:after {
     content: '';
     display: block;
@@ -78,10 +156,25 @@
       z-index: 2;
       font-family: $font-open-sans;
       font-weight: $font-semi-bold;
-      font-size: rem(48px);
+      font-size: rem(26px);
       line-height: 100%;
       color: $color-white;
-      margin-bottom: rem(80px);
+      margin-bottom: rem(16px);
+
+      @include iftablet {
+        font-size: rem(28px);
+        margin-bottom: rem(60px);
+      }
+
+      @include iflaptop {
+        font-size: rem(36px);
+        margin-bottom: rem(80px);
+      }
+
+      @include ifdesktop {
+        font-size: rem(48px);
+        margin-bottom: rem(80px);
+      }
     }
 
     .SubTitle {
@@ -89,10 +182,22 @@
       z-index: 2;
       font-family: $font-open-sans;
       font-weight: $font-light;
-      font-size: rem(32px);
+      font-size: rem(16px);
       line-height: 100%;
       color: $color-white;
-      max-width: rem(720px);
+
+      @include iftablet {
+        font-size: rem(18px);
+      }
+
+      @include iflaptop {
+        font-size: rem(20px);
+      }
+
+      @include ifdesktop {
+        font-size: rem(32px);
+        max-width: rem(720px);
+      }
     }
   }
 
@@ -103,7 +208,12 @@
     display: flex;
     flex-direction: column;
     justify-content: center;
+    align-self: center;
     gap: rem(20px);
+
+    @include iftablet {
+      align-self: unset;
+    }
   }
 }
 
@@ -112,38 +222,109 @@
 
   iframe {
     border-radius: rem(28px);
+    width: 100%;
+    height: rem(820px);
+
+    @include iftablet {
+      height: rem(300px);
+    }
+
+    @include iflaptop {
+      height: rem(400px);
+    }
+
+    @include ifdesktop {
+      height: rem(620px);
+    }
   }
 
   .Contacts {
     position: absolute;
     z-index: 2;
-    top: rem(-40px);
-    right: rem(180px);
-    border-radius: rem(28px);
-    background: $color-white;
-    width: rem(440px);
-    padding: rem(40px) rem(35px) rem(20px);
-
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     align-items: flex-start;
+    background: $color-white;
+
+    bottom: 0;
+    border-radius: rem(28px);
+    width: 100%;
+    height: fit-content;
+    padding: rem(40px) rem(35px) rem(20px);
+
+    @include iftablet {
+      top: rem(-60px);
+      right: rem(60px);
+      border-radius: rem(28px);
+      width: rem(240px);
+      padding: rem(20px) rem(20px) rem(10px);
+    }
+
+    @include iflaptop {
+      top: rem(-30px);
+      right: rem(100px);
+      border-radius: rem(28px);
+      width: rem(260px);
+      padding: rem(40px) rem(20px) rem(20px);
+    }
+
+    @include ifdesktop {
+      top: rem(-40px);
+      right: rem(180px);
+      border-radius: rem(28px);
+      width: rem(440px);
+      padding: rem(40px) rem(35px) rem(40px);
+    }
 
     .Title {
       position: relative;
       font-family: $font-open-sans;
       font-weight: $font-semi-bold;
-      font-size: rem(48px);
+      font-size: rem(28px);
       line-height: 100%;
       color: $color-text;
       text-align: right;
-      margin-bottom: rem(32px);
+      margin-bottom: rem(20px);
       align-self: center;
 
+      @include iftablet {
+        font-size: rem(28px);
+        align-self: center;
+        margin-bottom: rem(40px);
+      }
+
+      @include iflaptop {
+        font-size: rem(32px);
+      }
+
+      @include ifdesktop {
+        font-size: rem(48px);
+        margin-bottom: rem(32px);
+      }
+
       .LedOn {
         position: absolute;
-        bottom: rem(6px);
+        bottom: -2px;
-        left: rem(6px);
+        left: 0;
+        width: rem(20px);
+
+        @include iftablet {
+          bottom: -1px;
+          width: rem(20px);
+        }
+
+        @include iflaptop {
+          bottom: 1px;
+          left: 1px;
+          width: rem(24px);
+        }
+
+        @include ifdesktop {
+          bottom: rem(6px);
+          left: rem(6px);
+          width: unset;
+        }
       }
     }
 
@@ -151,19 +332,51 @@
       position: relative;
       font-family: $font-open-sans;
       font-weight: $font-regular;
-      font-size: rem(32px);
+      font-size: rem(16px);
       line-height: 130%;
       color: $color-text;
-      margin-bottom: rem(20px);
+      padding-bottom: rem(20px);
-      margin-left: rem(32px);
+      margin: 0 auto;
+      width: rem(180px);
+
+      @include iftablet {
+        width: unset;
+        margin: unset;
+        margin-left: rem(32px);
+        margin-bottom: rem(20px);
+        padding-bottom: unset;
+      }
+
+      @include iflaptop {
+
+      }
+
+      @include ifdesktop {
+        font-size: rem(32px);
+        margin-bottom: rem(20px);
+        margin-left: rem(42px);
+      }
 
       .Icon {
         position: absolute;
-        left: rem(-48px);
+        top: 0;
-        top: rem(8px);
+        left: rem(-32px);
-        width: rem(32px);
+        width: rem(20px);
-        height: rem(32px);
+        height: rem(20px);
         stroke: #E96526;
+
+        @include iftablet {
+          left: rem(-36px);
+          width: rem(20px);
+          height: rem(20px);
+        }
+
+        @include ifdesktop {
+          top: rem(6px);
+          left: rem(-48px);
+          width: rem(32px);
+          height: rem(32px);
+        }
       }
     }
   }

src/views/home/ui/contacts/contacts.tsx

@@ -15,8 +15,8 @@ import email from '@public/svg/email.svg';
 
 export default function Contacts() {
   return (
-    <section className={s.Contacts}>
+    <section className={s.Container}>
-      <div className={s.InnerContainer}>
+      <div className={s.Contacts}>
         <h2 className={s.Header}>
           Клиенты, которые <Mark>нам доверяют</Mark>
         </h2>
@@ -57,8 +57,8 @@ export default function Contacts() {
         <div className={s.Map}>
           <iframe
             src='https://yandex.ru/map-widget/v1/?um=constructor%3A7f1285c4f3e470bc9affa220323655ac72edd1be376c2579d421ca359ac46a7d&amp;source=constructor'
-            width='100%'
+            // width='100%'
-            height='620'
+            // height='620'
             frameBorder='0'
           ></iframe>
 

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

@@ -1,26 +1,64 @@
-.Footer {
+.Container {
   position: relative;
   background-color: #1B1B25;
   padding: rem(120px) 0 rem(40px);
   margin-top: rem(-24px);
-  z-index: -1;
+
+  @include iftablet {
+    padding: rem(120px) 0 rem(40px);
+  }
+
+  @include iflaptop {
+    padding: rem(120px) 0 rem(40px);
+  }
+
+  @include ifdesktop {
+    padding: rem(120px) 0 rem(40px);
+  }
 }
 
-.InnerContainer {
+.Footer {
+  position: relative;
   margin: 0 auto;
-  width: rem(1340px);
+  width: 90vw;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   align-items: flex-start;
   gap: rem(20px);
+
+  @include iftablet {
+    margin: 0 auto;
+    width: rem(712px);
+  }
+
+  @include iflaptop {
+    width: rem(930px);
+  }
+
+  @include ifdesktop {
+    width: rem(1340px);
+  }
 }
 
 .Block {
   display: flex;
   flex-direction: column;
   gap: rem(20px);
-  max-width: 40vw;
+  width: 100%;
+
+  @include iftablet {
+    width: unset;
+    max-width: 100%;
+  }
+
+  @include iflaptop {
+    max-width: 60%;
+  }
+
+  @include ifdesktop {
+    max-width: 60%;
+  }
 }
 
 .SendBtn {
@@ -31,20 +69,38 @@
 .Header {
   font-family: $font-open-sans;
   font-weight: $font-semi-bold;
-  font-size: rem(60px);
+  font-size: rem(28px);
   line-height: 100%;
   color: $color-white;
-  margin-bottom: rem(40px);
+  margin-bottom: rem(30px);
+
+  @include iflaptop {
+    font-size: rem(42px);
+    margin-bottom: rem(30px);
+  }
+
+  @include ifdesktop {
+    font-size: rem(60px);
+    margin-bottom: rem(40px);
+  }
 }
 
 .Bottom {
   width: 100%;
-  height: rem(80px);
   border-top: 1px solid $color-white;
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: rem(20px);
+  flex-wrap: wrap;
+  padding-top: rem(20px);
+
+  @include iftablet {
+    height: rem(80px);
+    gap: rem(20px);
+    flex-wrap: nowrap;
+    padding-top: unset;
+  }
 
   .Policy {
     font-family: $font-open-sans;
@@ -52,6 +108,9 @@
     font-size: rem(16px);
     line-height: 100%;
     color: $color-white;
-    margin-left: auto;
+
+    @include iftablet {
+      margin-left: auto;
+    }
   }
 }

src/views/home/ui/footer/footer.tsx

@@ -4,8 +4,8 @@ import Link from 'next/link';
 
 export default function Footer() {
   return (
-    <section className={s.Footer}>
+    <section className={s.Container}>
-      <div className={s.InnerContainer}>
+      <div className={s.Footer}>
         <div className={s.Block}>
           <h2 className={s.Header}>
             Давайте <Mark>обсудим</Mark> ваши задачи

src/views/home/ui/home.tsx

@@ -2,8 +2,8 @@ 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 Contacts from './contacts/contacts';
-// import Footer from './footer/footer';
+import Footer from './footer/footer';
 
 export default function HomePage() {
   return (
@@ -12,8 +12,8 @@ export default function HomePage() {
       <Offer />
       <Result />
       <License />
-      {/*<Contacts />*/}
+      <Contacts />
-      {/*<Footer />*/}
+      <Footer />
     </>
   );
 }

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

@@ -1,6 +1,6 @@
 .License {
   margin: 0 auto;
-  padding: rem(32px) 0 0;
+  padding: rem(32px) 0 rem(32px);
 
   @include iftablet {
     margin: 0 auto;

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

@@ -1,4 +1,4 @@
-.Offer {
+.Container {
   background: $color-lightgray;
   border-radius: rem(28px);
   padding: rem(32px) 0 0;
@@ -16,7 +16,7 @@
   }
 }
 
-.InnerContainer {
+.Offer {
   margin: 0 auto;
 
   @include iftablet {

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

@@ -18,8 +18,8 @@ export default function Offer() {
   const [name, setName] = useState('');
 
   return (
-    <section className={s.Offer}>
+    <section className={s.Container}>
-      <div className={s.InnerContainer}>
+      <div className={s.Offer}>
         <div className={s.Top}>
           <h2 className={s.Header}>
             Помогаем <Mark> выявить недостатки </Mark> и <Mark>привести</Mark>{' '}
@@ -59,7 +59,7 @@ export default function Offer() {
             onChange={(e) => setName(e.target.value)}
           />
           <Button className={s.Unit} variant='orange'>
-            Узнать подробности
+            Получить консультацию
           </Button>
         </form>