updated the version and added the label a home

2025-12-08 19:29:26 +02:00 · 2025-05-27 22:36:05 +05:00
parent d457faf15c
commit 2af795f819
5 changed files with 5869 additions and 5047 deletions
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -39,5 +39,9 @@
  },
  "devDependencies": {
    "sass": "^1.63.6"
+  },
+  "overrides": {
+    "nth-check": "^2.0.1",
+    "postcss": "^8.4.31"
  }
 }
--- a/src/components/Gallery/Gallery.jsx
+++ b/src/components/Gallery/Gallery.jsx
@@ -1,35 +1,35 @@
-import 'react-image-gallery/styles/scss/image-gallery.scss';
-import './Gallery.scss';
-import ImageGallery from 'react-image-gallery';
+import "react-image-gallery/styles/css/image-gallery.css";
+import "./Gallery.scss";
+import ImageGallery from "react-image-gallery";

-import objectPicOne from '../../assets/images/apartaments/image-47.jpg';
-import objectPicTwo from '../../assets/images/apartaments/image-48.jpg';
-import objectPicThree from '../../assets/images/apartaments/image-49.jpg';
-import objectPicFour from '../../assets/images/apartaments/image-50.jpg';
-import objectPicFive from '../../assets/images/apartaments/image-51.jpg';
+import objectPicOne from "../../assets/images/apartaments/image-47.jpg";
+import objectPicTwo from "../../assets/images/apartaments/image-48.jpg";
+import objectPicThree from "../../assets/images/apartaments/image-49.jpg";
+import objectPicFour from "../../assets/images/apartaments/image-50.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 (
--- a/src/pages/Home/Home.jsx
+++ b/src/pages/Home/Home.jsx
@@ -1,34 +1,45 @@
-import { useEffect } from 'react';
-import './Home.scss';
-import { YMaps, Map } from '@pbe/react-yandex-maps';
+import { useEffect } from "react";
+import "./Home.scss";
+import { YMaps, Map } from "@pbe/react-yandex-maps";

-import { Header } from '../../components/Header/Header';
-import { Form } from '../../components/Form/Form';
-import lawyer from '../../assets/images/lawyer/Mask-group.svg';
+import { Header } from "../../components/Header/Header";
+import { Form } from "../../components/Form/Form";
+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,30 +48,50 @@ function Home() {
        </div>
        <div className="info__separator"></div>
        <div className="info__lead font-inter-bold">
-                    <p>Высокое качество <span>обслуживания</span></p>
-                    <p>Сэкономим <span>ваше время</span></p>
-                    <p>Оплата после <span>сделки</span></p>
+          <p>
+            Высокое качество <span>обслуживания</span>
+          </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">Руководитель агентства недвижимости,
-                    опыт юридической практики 20 лет, более 4 000 лично проведённых сделок 
-                    с недвижимостью по РФ</p>
+            <p className="lawyer-info__text font-inter-regular">
+              Руководитель агентства недвижимости, опыт юридической практики 20
+              лет, более 4 000 лично проведённых сделок с недвижимостью по РФ
+            </p>
          </div>
        </div>
-                <p className="lawyer-info__para">Оказываем квалифицированную помощь в любых вопросах, связанных 
-                с недвижимостью! Бесплатные консультации по недвижимости.</p>
-                <p className="lawyer-info__paraMobile">Оказываем квалифицированную помощь в любых вопросах, связанных 
-                с недвижимостью!</p>
-                <p className="lawyer-info__paraMobile">Бесплатные консультации по недвижимости</p>
+        <p className="lawyer-info__para">
+          Оказываем квалифицированную помощь в любых вопросах, связанных с
+          недвижимостью! Бесплатные консультации по недвижимости.
+        </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} />
--- a/src/pages/Home/Home.scss
+++ b/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,19 +143,71 @@
  }
 }

-@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) {
  .info {
    column-gap: 154px;
  }
-
 }

@media (max-width: $laptopWidth) {
@@ -172,7 +231,6 @@
 }

@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) {
-
  .lawyer-info__paraMobile {
    width: 125%;
  }
 }

@media (max-width: $mobileWidth) {
-
  .info__title {
    font-size: 24px;
  }
@@ -249,7 +305,6 @@
 }

@media (min-width: 769px) {
-
  .lawyer-info__paraMobile {
    display: none;
  }