updated the version and added the label a home

updated the version and added the label a home

package.json

@@ -39,5 +39,9 @@
   },
   "devDependencies": {
     "sass": "^1.63.6"
+  },
+  "overrides": {
+    "nth-check": "^2.0.1",
+    "postcss": "^8.4.31"
   }
 }

src/components/Gallery/Gallery.jsx

@@ -1,35 +1,35 @@
-import 'react-image-gallery/styles/scss/image-gallery.scss';
+import "react-image-gallery/styles/css/image-gallery.css";
-import './Gallery.scss';
+import "./Gallery.scss";
-import ImageGallery from 'react-image-gallery';
+import ImageGallery from "react-image-gallery";
 
-import objectPicOne from '../../assets/images/apartaments/image-47.jpg';
+import objectPicOne from "../../assets/images/apartaments/image-47.jpg";
-import objectPicTwo from '../../assets/images/apartaments/image-48.jpg';
+import objectPicTwo from "../../assets/images/apartaments/image-48.jpg";
-import objectPicThree from '../../assets/images/apartaments/image-49.jpg';
+import objectPicThree from "../../assets/images/apartaments/image-49.jpg";
-import objectPicFour from '../../assets/images/apartaments/image-50.jpg';
+import objectPicFour from "../../assets/images/apartaments/image-50.jpg";
-import objectPicFive from '../../assets/images/apartaments/image-51.jpg';
+import objectPicFive from "../../assets/images/apartaments/image-51.jpg";
 
 function Gallery() {
   const images = [
     {
       original: objectPicOne,
-            thumbnail: objectPicOne
+      thumbnail: objectPicOne,
     },
     {
       original: objectPicTwo,
-            thumbnail: objectPicTwo
+      thumbnail: objectPicTwo,
     },
     {
       original: objectPicThree,
-            thumbnail: objectPicThree
+      thumbnail: objectPicThree,
     },
     {
       original: objectPicFour,
-            thumbnail: objectPicFour
+      thumbnail: objectPicFour,
     },
     {
       original: objectPicFive,
-            thumbnail: objectPicFive
+      thumbnail: objectPicFive,
-        }
+    },
   ];
 
   return (
@@ -45,4 +45,4 @@ function Gallery() {
     </div>
   );
 }
-export { Gallery} ;
+export { Gallery };

src/pages/Home/Home.jsx

@@ -1,34 +1,45 @@
-import { useEffect } from 'react';
+import { useEffect } from "react";
-import './Home.scss';
+import "./Home.scss";
-import { YMaps, Map } from '@pbe/react-yandex-maps';
+import { YMaps, Map } from "@pbe/react-yandex-maps";
 
-import { Header } from '../../components/Header/Header';
+import { Header } from "../../components/Header/Header";
-import { Form } from '../../components/Form/Form';
+import { Form } from "../../components/Form/Form";
-import lawyer from '../../assets/images/lawyer/Mask-group.svg';
+import lawyer from "../../assets/images/lawyer/Mask-group.svg";
 
 function Home() {
   useEffect(() => {
-        document.title = 'Агентство недвижимости АЛМА-ВИД';
+    document.title = "Агентство недвижимости АЛМА-ВИД";
   }, []);
 
   return (
     <>
       <div className="wrapper">
         <Header />
+        <div className="hero-tagline">
+          <p>4 000 лично успешных проведенных сделок + 20 лет опыта</p>
+        </div>
       </div>
       <section className="info">
         <div className="info__desc">
-                    <h3 className="info__title font-inter-extrabold">ПОЧЕМУ НАМ МОЖНО ДОВЕРЯТЬ</h3>
+          <h3 className="info__title font-inter-extrabold">
+            ПОЧЕМУ НАМ МОЖНО ДОВЕРЯТЬ
+          </h3>
           <ul className="font-inter-regular">
-                        <li>Помогаем продать и купить жилую и коммерческую недвижимость;</li>
+            <li>
+              Помогаем продать и купить жилую и коммерческую недвижимость;
+            </li>
             <li>Консультации по покупке или продаже недвижимости;</li>
             <li>Работаем в соответствии с Законодательством РФ;</li>
-                        <li>Юридическая проверка всех сделок и соблюдение закона о защите персональных данных делают
+            <li>
-                        сделки безопасными для своих клиентов;</li>
+              Юридическая проверка всех сделок и соблюдение закона о защите
+              персональных данных делают сделки безопасными для своих клиентов;
+            </li>
             <li>Эффективность.</li>
-                        <li>Широкая база объектов недвижимости, профессиональная продажа 
+            <li>
-                        и подбор, собственные рекламные алгоритмы, и огромный опыт 
+              Широкая база объектов недвижимости, профессиональная продажа и
-                        в проведении сделок любой сложности;</li>
+              подбор, собственные рекламные алгоритмы, и огромный опыт в
+              проведении сделок любой сложности;
+            </li>
             <li>Выгодная процентная ставка по ипотеке;</li>
             <li>Партнерские отношения с банками;</li>
             <li>Индивидуальный подход к каждому клиенту;</li>
@@ -37,33 +48,53 @@ function Home() {
         </div>
         <div className="info__separator"></div>
         <div className="info__lead font-inter-bold">
-                    <p>Высокое качество <span>обслуживания</span></p>
+          <p>
-                    <p>Сэкономим <span>ваше время</span></p>
+            Высокое качество <span>обслуживания</span>
-                    <p>Оплата после <span>сделки</span></p>
+          </p>
+          <p>
+            Сэкономим <span>ваше время</span>
+          </p>
+          <p>
+            Оплата после <span>сделки</span>
+          </p>
         </div>
       </section>
       <section className="lawyer-info font-inter-bold">
         <div className="lawyer-info__container">
-                    <img className="lawyer-info__image" src={lawyer} alt="Наталья Ткаченко" />
+          <img
+            className="lawyer-info__image"
+            src={lawyer}
+            alt="Наталья Ткаченко"
+          />
           <div className="lawyer-info__desc">
             <h3 className="lawyer-info__title">Наталья Ткаченко</h3>
-                        <p className="lawyer-info__text font-inter-regular">Руководитель агентства недвижимости,
+            <p className="lawyer-info__text font-inter-regular">
-                    опыт юридической практики 20 лет, более 4 000 лично проведённых сделок 
+              Руководитель агентства недвижимости, опыт юридической практики 20
-                    с недвижимостью по РФ</p>
+              лет, более 4 000 лично проведённых сделок с недвижимостью по РФ
+            </p>
           </div>
         </div>
-                <p className="lawyer-info__para">Оказываем квалифицированную помощь в любых вопросах, связанных 
+        <p className="lawyer-info__para">
-                с недвижимостью! Бесплатные консультации по недвижимости.</p>
+          Оказываем квалифицированную помощь в любых вопросах, связанных с
-                <p className="lawyer-info__paraMobile">Оказываем квалифицированную помощь в любых вопросах, связанных 
+          недвижимостью! Бесплатные консультации по недвижимости.
-                с недвижимостью!</p>
+        </p>
-                <p className="lawyer-info__paraMobile">Бесплатные консультации по недвижимости</p>
+        <p className="lawyer-info__paraMobile">
+          Оказываем квалифицированную помощь в любых вопросах, связанных с
+          недвижимостью!
+        </p>
+        <p className="lawyer-info__paraMobile">
+          Бесплатные консультации по недвижимости
+        </p>
       </section>
       <div className="map-container">
         <YMaps>
-                    <Map className="map" defaultState={{ center: [55.16, 61.4], zoom: 12 }} />
+          <Map
+            className="map"
+            defaultState={{ center: [55.16, 61.4], zoom: 12 }}
+          />
         </YMaps>
       </div>
-            <Form scrolledThreshold={2750}/>
+      <Form scrolledThreshold={2750} />
     </>
   );
 }

src/pages/Home/Home.scss

@@ -1,4 +1,4 @@
-@import '../../styles/vars.scss';
+@import "../../styles/vars.scss";
 
 .info ul {
   padding: 0;
@@ -21,14 +21,21 @@
 .wrapper {
   background-image: url(../../assets/images/background/Ud_EgKxddHk.jpg);
   background-size: cover;
-    height: 100vh;
+  height: 100vh; // Рассмотрите возможность изменения на min-height: 100vh; height: auto; на мобильных, если контент будет выходить за пределы экрана
+
+  @media (max-width: $mobileWidth) {
+    display: flex;
+    flex-direction: column;
+    // height: auto; // Если содержимое может превышать высоту экрана
+    // min-height: 100vh; // Чтобы заполнить экран, если содержимое короткое
+  }
 }
 
 .info {
   display: flex;
   column-gap: 184px;
   padding: 72px;
-    background: linear-gradient(270deg, #17628C 0%, #FFFFFF 100%);
+  background: linear-gradient(270deg, #17628c 0%, #ffffff 100%);
 }
 
 .info__title {
@@ -136,22 +143,74 @@
   }
 }
 
-@media (max-width:$desktopWidth) {
 
+.hero-tagline {
+  height: 100%;
+  display: flex;
+  justify-content: flex-end; 
+  padding: 100px 60px 0; 
+
+  p {
+    color: #ffffff;
+    font-family: "Inter", sans-serif; 
+    font-size: max(50px, 3.646vw);
+    font-weight: 500; 
+    line-height: 1.5;
+    text-align: right;
+
+    max-width: max(600px, min(1150px, 59.896vw));
+
+    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); 
+  }
+
+  
+  @media (max-width: $tabletWidth) {
+  
+    padding: 15px 30px 0;
+    p {
+      font-size: 18px;
+      max-width: 350px;
+    }
+  }
+
+  @media (max-width: $mobileWidth) {
+   
+    order: 1; 
+    width: 100%; 
+    margin-top: 20px; 
+
+  
+    justify-content: center;
+    padding: 10px 15px 0; 
+    
+
+    p {
+      font-size: 16px;
+      text-align: center; 
+      max-width: 100%;
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  .hero-tagline {
+    display: none;
+  }
+}
+
+@media (max-width: $desktopWidth) {
   .info__lead {
     align-self: center;
   }
-
 }
 
-@media (max-width:1120px) {
+@media (max-width: 1120px) {
   .info {
     column-gap: 154px;
   }
-
 }
 
-@media (max-width:$laptopWidth) {
+@media (max-width: $laptopWidth) {
   .info {
     padding: 36px;
     column-gap: 92px;
@@ -171,8 +230,7 @@
   }
 }
 
-@media (max-width:$tabletWidth) {
+@media (max-width: $tabletWidth) {
-
   .lawyer-info__para {
     display: none;
   }
@@ -183,7 +241,7 @@
   }
 
   .info {
-        background: linear-gradient(270deg, #abc3d1 0%, #FFFFFF 100%);
+    background: linear-gradient(270deg, #abc3d1 0%, #ffffff 100%);
   }
 
   .info__title {
@@ -216,20 +274,18 @@
     font-size: 25px;
     text-align: center;
     border-radius: 20px;
-        background-color: #17628C;
+    background-color: #17628c;
     color: white;
   }
 }
 
-@media (max-width:640px) {
+@media (max-width: 640px) {
-
   .lawyer-info__paraMobile {
     width: 125%;
   }
 }
 
-@media (max-width:$mobileWidth) {
+@media (max-width: $mobileWidth) {
-
   .info__title {
     font-size: 24px;
   }
@@ -248,8 +304,7 @@
   }
 }
 
-@media (min-width:769px) {
+@media (min-width: 769px) {
-
   .lawyer-info__paraMobile {
     display: none;
   }