yawaflua/Alma-vid
1
0
Fork 0
mirror of https://github.com/danilt2000/Alma-vid.git synced 2025-12-10 12:09:27 +02:00
Code Issues Packages Projects Releases Wiki Activity

Centralize and update contact information across app

Browse Source 
Introduced a centralized contacts configuration in src/config/contacts.js, added a useContacts hook, and a reusable ContactInfo component. Updated Header, Footer, Home, Office, Services, About, Objects, and Apartament pages to use the new contact data source. Added documentation in CONTACTS_CONFIG.md and included the AlmaVid logo asset.
This commit is contained in:
Madara0330E
2025-07-16 23:16:00 +05:00
parent 2af795f819
commit 4adbf791ea
20 changed files with 2007 additions and 838 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
src/pages/About/About.jsx
View File

@@ -1,41 +1,52 @@
import { useEffect } from 'react';
import { useEffect } from "react";
import './About.scss';
import { Header } from '../../components/Header/Header';
import { Form } from '../../components/Form/Form';
import { SliderComponent } from '../../components/Sliders/Slider';
import "./About.scss";
import { Header } from "../../components/Header/Header";
import { Form } from "../../components/Form/Form";
import { SliderComponent } from "../../components/Sliders/Slider";
import { CONTACTS } from "../../config/contacts";
function About() {
useEffect(() => {
document.title = 'Об Агентстве недвижимости АЛМА-ВИД';
}, []);
useEffect(() => {
document.title = `Об ${CONTACTS.companyName}`;
}, []);
return (
<>
<div className="wrapper-about">
<Header />
<section className="about">
<div className="about-inner">
<div className="about__info font-inter-bold">
<p>Каждый из нас хоть раз сталкивается с квартирным вопросом - покупка, продажа,
обмен квартиры или дома - эти процессы требуют серьезного профессионального подхода
и юридической грамотности.</p>
<p>Агентство недвижимости АЛМА-ВИД существует с 2000 года — за этот период мы обрели
доверие и уважение наших многочисленных клиентов.</p>
<p>Мы находимся в постоянном развитии и оттачиваем профессионализм наших сотрудников,
обладая серьезной материальной базой и налаженными коммуникациями с крупными банками.
Благодаря этому мы имеем возможность предоставлять услуги
в сфере недвижимости высокого качества.</p>
</div>
</div>
<div className="about__title font-inter-semibold">Об Агентстве недвижимости <span>АЛМА-Вид</span></div>
</section>
return (
<>
<div className="wrapper-about">
<Header />
<section className="about">
<div className="about-inner">
<div className="about__info font-inter-bold">
<p>
Каждый из нас хоть раз сталкивается с квартирным вопросом -
покупка, продажа, обмен квартиры или дома - эти процессы требуют
серьезного профессионального подхода и юридической грамотности.
</p>
<p>
Агентство недвижимости АЛМА-ВИД существует с 2000 года — за этот
период мы обрели доверие и уважение наших многочисленных
клиентов.
</p>
<p>
Мы находимся в постоянном развитии и оттачиваем профессионализм
наших сотрудников, обладая серьезной материальной базой и
налаженными коммуникациями с крупными банками. Благодаря этому
мы имеем возможность предоставлять услуги в сфере недвижимости
высокого качества.
</p>
</div>
<section className="certificates">
<SliderComponent/>
</section>
<Form scrolledThreshold={1650}/>
</>
);
</div>
<div className="about__title font-inter-semibold">
Об {CONTACTS.companyName} <span>{CONTACTS.companyNameShort}</span>
</div>
</section>
</div>
<section className="certificates">
<SliderComponent />
</section>
<Form scrolledThreshold={1650} />
</>
);
}
export { About };

433
src/pages/Apartament/Apartament.jsx
View File

@@ -1,123 +1,326 @@
import { useEffect } from 'react';
import './Apartament.scss';
import { YMaps, Map, } from '@pbe/react-yandex-maps';
import { useEffect, useState } from "react";
import "./Apartament.scss";
import { YMaps, Map, Placemark } from "@pbe/react-yandex-maps";
import { Header } from '../../components/Header/Header';
import { Form } from '../../components/Form/Form';
import { Gallery } from '../../components/Gallery/Gallery';
import { Header } from "../../components/Header/Header";
import { Form } from "../../components/Form/Form";
import { Gallery } from "../../components/Gallery/Gallery";
import { CONTACTS } from "../../config/contacts";
function Apartament() {
useEffect(() => {
document.title = 'Апартаменты';
}, []);
const [isMapActive, setIsMapActive] = useState(false);
return (
<>
<Header />
<section className="apartament">
<h2 className="apartament__title font-inter-bold">1-комн. кв. 34 м</h2>
<p className="apartament__para font-inter-regular">Ул. Луначарского, Ленинский район</p>
<div className="apartament__container">
<div className="apartament__info">
<Gallery/>
<div className="apartament__icons icons">
<div className="icons__item">
<div className="icons__pic icons__pic_area"></div>
<div className="icons__info">
<p className="icons__desc font-inter-regular ">Общая площадь</p>
<p className="icons__num font-inter-semibold">72М</p>
</div>
</div>
<div className="icons__item">
<div className="icons__pic icons__pic_living"></div>
<div className="icons__info">
<p className="icons__desc font-inter-regular ">Жилая площадь</p>
<p className="icons__num font-inter-semibold">68М</p>
</div>
</div>
<div className="icons__item">
<div className="icons__pic icons__pic_kitchen"></div>
<div className="icons__info">
<p className="icons__desc font-inter-regular ">Площадь кухни</p>
<p className="icons__num font-inter-semibold">11М</p>
</div>
</div>
<div className="icons__item">
<div className="icons__pic icons__pic_year"></div>
<div className="icons__info">
<p className="icons__desc font-inter-regular ">Год постройки</p>
<p className="icons__num font-inter-semibold">2003</p>
</div>
</div>
<div className="icons__item">
<div className="icons__pic icons__pic__floor"></div>
<div className="icons__info">
<p className="icons__desc font-inter-regular ">Этаж</p>
<p className="icons__num font-inter-semibold">7/12</p>
</div>
</div>
</div>
<div className="apartament__text font-inter-regular">
<p>Описани хаты рандомный текст Lorem Ipsum is simply dummy text of
the printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s, when an unknown
printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic
typesetting, remaining essentially unchanged. It was popularised in the 1960s
with the release of Letraset sheets containing Lorem Ipsum passages, and more
recently with desktop publishing software like Aldus PageMaker including
versions of Lorem Ipsum.</p>
</div>
<div className="apartament__desc font-inter-regular">
<div className="apartament__flat flat">
<p className="flat__title font-inter-bold">О квартире</p>
<ul>
<li><span className="title-color">Тип жилья:</span> вторичный</li>
<li><span className="title-color">Общая площадь:</span> 31.9 м²</li>
<li><span className="title-color">Площадь кухни:</span> 4 м²</li>
<li><span className="title-color">Жилая площадь:</span> 21 м²</li>
<li><span className="title-color">Этаж:</span> 4 из 5</li>
<li><span className="title-color">Балкон или лоджия:</span> лоджия</li>
<li><span className="title-color">Высота потолков:</span> 2.5 м</li>
<li><span className="title-color">Санузел:</span> совмещенный</li>
<li><span className="title-color">Вид из окон:</span> во двор</li>
<li><span className="title-color">Ремонт:</span> косметический</li>
</ul>
</div>
<div className="apartament__home home">
<p className="home__title font-inter-bold">О доме</p>
<ul>
<li><span className="title-color">Год постройки:</span> 2003</li>
<li><span className="title-color">Тип дома:</span> панельный</li>
<li><span className="title-color">Тип перекрытий:</span> железобетонный</li>
<li><span className="title-color">Подъезды:</span> 5</li>
<li><span className="title-color">Отопление:</span> центральное</li>
<li><span className="title-color">Аварийность:</span> нет</li>
<li><span className="title-color">Газоснобжение:</span> центральное</li>
</ul>
</div>
</div>
</div>
<div className="apartament__price price font-inter-regular">
<div className="price__container">
<p className="price__total font-inter-bold">1 234 567 ₽</p>
<div className="price__logo"></div>
</div>
<p className="price__desc">В ипотеку от 6546823 ₽/мес</p>
<p className="price__meter">Цена за метр............................................................45656 ₽/м</p>
<p className="price__conditions">Условия сделки......................................свободная продажа</p>
<p className="price__mortgage">Ипотека......................................................................возможна</p>
<button className="apartament__btn_number font-inter-bold" type="button">Показать телефон</button>
<button className="apartament__btn_write font-inter-bold" type="button">Написать</button>
</div>
useEffect(() => {
document.title = "Апартаменты";
}, []);
const handleActivateMap = () => {
setIsMapActive(true);
if (window.apartamentMap) {
window.apartamentMap.behaviors.enable("scrollZoom");
window.apartamentMap.behaviors.enable("drag");
}
};
const handleDeactivateMap = () => {
setIsMapActive(false);
if (window.apartamentMap) {
window.apartamentMap.behaviors.disable("scrollZoom");
window.apartamentMap.behaviors.disable("drag");
}
};
return (
<>
<Header />
<section className="apartament">
<h2 className="apartament__title font-inter-bold">1-комн. кв. 34 м</h2>
<p className="apartament__para font-inter-regular">
Ул. Луначарского, Ленинский район
</p>
<div className="apartament__container">
<div className="apartament__info">
<Gallery />
<div className="apartament__icons icons">
<div className="icons__item">
<div className="icons__pic icons__pic_area"></div>
<div className="icons__info">
<p className="icons__desc font-inter-regular ">
Общая площадь
</p>
<p className="icons__num font-inter-semibold">72М</p>
</div>
<YMaps>
<Map className="map-apartament" defaultState={{ center: [55.16, 61.4], zoom: 15 }} />
</YMaps>
</section>
<Form scrolledThreshold={2350}/>
</>
);
</div>
<div className="icons__item">
<div className="icons__pic icons__pic_living"></div>
<div className="icons__info">
<p className="icons__desc font-inter-regular ">
Жилая площадь
</p>
<p className="icons__num font-inter-semibold">68М</p>
</div>
</div>
<div className="icons__item">
<div className="icons__pic icons__pic_kitchen"></div>
<div className="icons__info">
<p className="icons__desc font-inter-regular ">
Площадь кухни
</p>
<p className="icons__num font-inter-semibold">11М</p>
</div>
</div>
<div className="icons__item">
<div className="icons__pic icons__pic_year"></div>
<div className="icons__info">
<p className="icons__desc font-inter-regular ">
Год постройки
</p>
<p className="icons__num font-inter-semibold">2003</p>
</div>
</div>
<div className="icons__item">
<div className="icons__pic icons__pic__floor"></div>
<div className="icons__info">
<p className="icons__desc font-inter-regular ">Этаж</p>
<p className="icons__num font-inter-semibold">7/12</p>
</div>
</div>
</div>
<div className="apartament__text font-inter-regular">
<p>
Описани хаты рандомный текст Lorem Ipsum is simply dummy text of
the printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s, when an
unknown printer took a galley of type and scrambled it to make a
type specimen book. It has survived not only five centuries, but
also the leap into electronic typesetting, remaining essentially
unchanged. It was popularised in the 1960s with the release of
Letraset sheets containing Lorem Ipsum passages, and more
recently with desktop publishing software like Aldus PageMaker
including versions of Lorem Ipsum.
</p>
</div>
<div className="apartament__desc font-inter-regular">
<div className="apartament__flat flat">
<p className="flat__title font-inter-bold">О квартире</p>
<ul>
<li>
<span className="title-color">Тип жилья:</span> вторичный
</li>
<li>
<span className="title-color">Общая площадь:</span> 31.9 м²
</li>
<li>
<span className="title-color">Площадь кухни:</span> 4 м²
</li>
<li>
<span className="title-color">Жилая площадь:</span> 21 м²
</li>
<li>
<span className="title-color">Этаж:</span> 4 из 5
</li>
<li>
<span className="title-color">Балкон или лоджия:</span>{" "}
лоджия
</li>
<li>
<span className="title-color">Высота потолков:</span> 2.5 м
</li>
<li>
<span className="title-color">Санузел:</span> совмещенный
</li>
<li>
<span className="title-color">Вид из окон:</span> во двор
</li>
<li>
<span className="title-color">Ремонт:</span> косметический
</li>
</ul>
</div>
<div className="apartament__home home">
<p className="home__title font-inter-bold">О доме</p>
<ul>
<li>
<span className="title-color">Год постройки:</span> 2003
</li>
<li>
<span className="title-color">Тип дома:</span> панельный
</li>
<li>
<span className="title-color">Тип перекрытий:</span>{" "}
железобетонный
</li>
<li>
<span className="title-color">Подъезды:</span> 5
</li>
<li>
<span className="title-color">Отопление:</span> центральное
</li>
<li>
<span className="title-color">Аварийность:</span> нет
</li>
<li>
<span className="title-color">Газоснобжение:</span>{" "}
центральное
</li>
</ul>
</div>
</div>
</div>
<div className="apartament__price price font-inter-regular">
<div className="price__container">
<p className="price__total font-inter-bold">1 234 567 ₽</p>
<div className="price__logo"></div>
</div>
<p className="price__desc">В ипотеку от 6546823 ₽/мес</p>
<p className="price__meter">
Цена за
метр............................................................45656
₽/м
</p>
<p className="price__conditions">
Условия сделки......................................свободная
продажа
</p>
<p className="price__mortgage">
Ипотека......................................................................возможна
</p>
<button
className="apartament__btn_number font-inter-bold"
type="button"
>
Показать телефон
</button>
<button
className="apartament__btn_write font-inter-bold"
type="button"
>
Написать
</button>
</div>
</div>
<div style={{ position: "relative" }}>
<YMaps>
<Map
className="map-apartament"
defaultState={{
center: CONTACTS.coordinates,
zoom: 15,
}}
options={{
scrollZoom: false,
drag: false,
suppressMapOpenBlock: true,
}}
instanceRef={(ref) => {
window.apartamentMap = ref;
}}
>
<Placemark
geometry={CONTACTS.coordinates}
properties={{
balloonContent: CONTACTS.getBalloonContent(),
hintContent: `Офис ${CONTACTS.companyNameShort}`,
}}
options={{
preset: "islands#redDotIcon",
}}
/>
</Map>
{/* Блокирующий оверлей, когда карта неактивна */}
{!isMapActive && (
<div
onClick={handleActivateMap}
style={{
position: "absolute",
top: 0,
left: 0,
right: 0,
bottom: 0,
backgroundColor: "rgba(255, 255, 255, 0.1)",
zIndex: 999,
cursor: "pointer",
}}
/>
)}
{/* Кнопка управления картой в центре */}
<div
style={{
position: "absolute",
top: "85%",
left: "50%",
transform: "translate(-50%, -50%)",
zIndex: 1000,
}}
>
{!isMapActive ? (
<button
onClick={handleActivateMap}
style={{
background: "rgba(0, 123, 255, 0.9)",
border: "none",
borderRadius: "8px",
padding: "15px 25px",
fontSize: "16px",
fontFamily: "Inter, Arial, sans-serif",
cursor: "pointer",
boxShadow: "0 4px 12px rgba(0,0,0,0.3)",
color: "white",
fontWeight: "bold",
minWidth: "140px",
textAlign: "center",
transition: "all 0.3s ease",
}}
onMouseEnter={(e) => {
e.target.style.background = "rgba(0, 123, 255, 1)";
e.target.style.transform = "scale(1.05)";
}}
onMouseLeave={(e) => {
e.target.style.background = "rgba(0, 123, 255, 0.9)";
e.target.style.transform = "scale(1)";
}}
>
📍 Посмотреть карту
</button>
) : (
<button
onClick={handleDeactivateMap}
style={{
background: "rgba(220, 53, 69, 0.9)",
border: "none",
borderRadius: "6px",
padding: "10px 20px",
fontSize: "14px",
fontFamily: "Inter, Arial, sans-serif",
cursor: "pointer",
boxShadow: "0 3px 8px rgba(0,0,0,0.3)",
color: "white",
fontWeight: "bold",
minWidth: "120px",
textAlign: "center",
transition: "all 0.3s ease",
}}
onMouseEnter={(e) => {
e.target.style.background = "rgba(220, 53, 69, 1)";
e.target.style.transform = "scale(1.05)";
}}
onMouseLeave={(e) => {
e.target.style.background = "rgba(220, 53, 69, 0.9)";
e.target.style.transform = "scale(1)";
}}
>
✕ Закрыть карту
</button>
)}
</div>
</YMaps>
</div>
</section>
<Form scrolledThreshold={2350} />
</>
);
}
export { Apartament };

139
src/pages/Home/Home.jsx
View File

@@ -1,16 +1,35 @@
import { useEffect } from "react";
import { useEffect, useState } from "react";
import "./Home.scss";
import { YMaps, Map } from "@pbe/react-yandex-maps";
import { YMaps, Map, Placemark } 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 { CONTACTS } from "../../config/contacts";
function Home() {
const [isMapActive, setIsMapActive] = useState(false);
useEffect(() => {
document.title = "Агентство недвижимости АЛМА-ВИД";
document.title = CONTACTS.companyName;
}, []);
const handleActivateMap = () => {
setIsMapActive(true);
if (window.homeMap) {
window.homeMap.behaviors.enable("scrollZoom");
window.homeMap.behaviors.enable("drag");
}
};
const handleDeactivateMap = () => {
setIsMapActive(false);
if (window.homeMap) {
window.homeMap.behaviors.disable("scrollZoom");
window.homeMap.behaviors.disable("drag");
}
};
return (
<>
<div className="wrapper">
@@ -90,8 +109,118 @@ function Home() {
<YMaps>
<Map
className="map"
defaultState={{ center: [55.16, 61.4], zoom: 12 }}
/>
defaultState={{
center: CONTACTS.coordinates,
zoom: 12,
}}
options={{
scrollZoom: false,
drag: false,
suppressMapOpenBlock: true,
}}
instanceRef={(ref) => {
window.homeMap = ref;
}}
>
<Placemark
geometry={CONTACTS.coordinates}
properties={{
balloonContent: CONTACTS.getBalloonContent(),
hintContent: `Офис ${CONTACTS.companyNameShort}`,
}}
options={{
preset: "islands#redDotIcon",
}}
/>
</Map>
{/* Блокирующий оверлей когда карта неактивна */}
{!isMapActive && (
<div
style={{
position: "absolute",
top: 0,
left: 0,
right: 0,
bottom: 0,
backgroundColor: "rgba(255, 255, 255, 0.1)",
zIndex: 999,
cursor: "pointer",
}}
onClick={handleActivateMap}
/>
)}
{/* Кнопка управления картой в центре */}
<div
style={{
position: "absolute",
top: "85%",
left: "50%",
transform: "translate(-50%, -50%)",
zIndex: 1000,
}}
>
{!isMapActive ? (
<button
onClick={handleActivateMap}
style={{
background: "rgba(0, 123, 255, 0.9)",
border: "none",
borderRadius: "8px",
padding: "15px 25px",
fontSize: "16px",
fontFamily: "Inter, Arial, sans-serif",
cursor: "pointer",
boxShadow: "0 4px 12px rgba(0,0,0,0.3)",
color: "white",
fontWeight: "bold",
minWidth: "140px",
textAlign: "center",
transition: "all 0.3s ease",
}}
onMouseEnter={(e) => {
e.target.style.background = "rgba(0, 123, 255, 1)";
e.target.style.transform = "scale(1.05)";
}}
onMouseLeave={(e) => {
e.target.style.background = "rgba(0, 123, 255, 0.9)";
e.target.style.transform = "scale(1)";
}}
>
📍 Посмотреть карту
</button>
) : (
<button
onClick={handleDeactivateMap}
style={{
background: "rgba(220, 53, 69, 0.9)",
border: "none",
borderRadius: "6px",
padding: "10px 20px",
fontSize: "14px",
fontFamily: "Inter, Arial, sans-serif",
cursor: "pointer",
boxShadow: "0 3px 8px rgba(0,0,0,0.3)",
color: "white",
fontWeight: "bold",
minWidth: "120px",
textAlign: "center",
transition: "all 0.3s ease",
}}
onMouseEnter={(e) => {
e.target.style.background = "rgba(220, 53, 69, 1)";
e.target.style.transform = "scale(1.05)";
}}
onMouseLeave={(e) => {
e.target.style.background = "rgba(220, 53, 69, 0.9)";
e.target.style.transform = "scale(1)";
}}
>
✕ Закрыть карту
</button>
)}
</div>
</YMaps>
</div>
<Form scrolledThreshold={2750} />

27
src/pages/Home/Home.scss
View File

@@ -120,6 +120,7 @@
.map-container {
padding: 0 146px 80px 146px;
position: relative;
@media (max-width: $laptopWidth) {
padding: 0px 50px 80px 50px;
@@ -143,29 +144,26 @@
}
}
.hero-tagline {
height: 100%;
display: flex;
justify-content: flex-end;
padding: 100px 60px 0;
justify-content: flex-end;
padding: 100px 60px 0;
p {
color: #ffffff;
font-family: "Inter", sans-serif;
font-family: "Inter", sans-serif;
font-size: max(50px, 3.646vw);
font-weight: 500;
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);
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
}
@media (max-width: $tabletWidth) {
padding: 15px 30px 0;
p {
font-size: 18px;
@@ -174,19 +172,16 @@
}
@media (max-width: $mobileWidth) {
order: 1;
width: 100%;
margin-top: 20px;
order: 1;
width: 100%;
margin-top: 20px;
justify-content: center;
padding: 10px 15px 0;
padding: 10px 15px 0;
p {
font-size: 16px;
text-align: center;
text-align: center;
max-width: 100%;
}
}

39
src/pages/Objects/Objects.jsx
View File

@@ -1,26 +1,27 @@
import { useEffect } from 'react';
import './Objects.scss';
import { useEffect } from "react";
import "./Objects.scss";
import { Header } from '../../components/Header/Header';
import { Form } from '../../components/Form/Form';
import { SliderComponent } from '../../components/Sliders/SliderObjects';
import { Header } from "../../components/Header/Header";
import { Form } from "../../components/Form/Form";
import { SliderComponent } from "../../components/Sliders/SliderObjects";
import { CONTACTS } from "../../config/contacts";
function Objects() {
useEffect(() => {
document.title = 'Объекты Агентства недвижимости АЛМА-ВИД';
}, []);
useEffect(() => {
document.title = `Объекты ${CONTACTS.companyName}`;
}, []);
return (
<>
<div className="wrapper-objects">
<Header />
<section className="objects">
<SliderComponent/>
</section>
</div>
<Form scrolledThreshold={690}/>
</>
);
return (
<>
<div className="wrapper-objects">
<Header />
<section className="objects">
<SliderComponent />
</section>
</div>
<Form scrolledThreshold={690} />
</>
);
}
export { Objects };

297
src/pages/Office/Office.jsx
View File

@@ -1,76 +1,235 @@
import { useEffect } from 'react';
import './Office.scss';
import { YMaps, Map } from '@pbe/react-yandex-maps';
import { useEffect, useState } from "react";
import "./Office.scss";
import { YMaps, Map, Placemark } from "@pbe/react-yandex-maps";
import { Header } from '../../components/Header/Header';
import { Header } from "../../components/Header/Header";
import { CONTACTS } from "../../config/contacts";
function Office() {
useEffect(() => {
document.title = 'Контакты Агентства недвижимости АЛМА-ВИД';
}, []);
return (
<>
<div className="wrapper-office">
<Header />
<section className="office">
<div className="office__title font-inter-semibold">АЛМА–ВИД<span>агентство недвижимости</span></div>
<div className="office__separator"></div>
<div className="office-inner">
<div className="office-container">
<div className="office__item">
<div className="office__pic office__pic_purchase"></div>
<div className="office__text">
<p className="office__desc font-inter-bold">Покупка, продажа,
<span>обмен квартир и комнат</span></p>
</div>
</div>
<div className="office__item">
<div className="office__pic office__pic_rent"></div>
<div className="office__text">
<p className="office__desc font-inter-bold">Аренда квартир
<span>и комнат</span></p>
</div>
</div>
<div className="office__item">
<div className="office__pic office__pic_buildings"></div>
<div className="office__text">
<p className="office__desc font-inter-bold">Новостройки</p>
</div>
</div>
<div className="office__item">
<div className="office__pic office__pic_country"></div>
<div className="office__text">
<p className="office__desc font-inter-bold">Загородная
<span>недвижимость</span></p>
</div>
</div>
<div className="office__item">
<div className="office__pic office__pic_commercial"></div>
<div className="office__text">
<p className="office__desc font-inter-bold">Коммерческая
<span>недвижимость</span></p>
</div>
</div>
</div>
</div>
</section>
</div>
<section className="office-location font-inter-bold">
<h2 className="office-location__title">Приходите в наш офис</h2>
<div className="office-info">
<p className="office-info__para_address"><span>Адрес:</span>Ленина, д. 60 В, оф. 701
<span className="office-info__desc">Вход в офис со двора</span></p>
<p className="office-info__para"><span>Телефон:</span>+7 (351) 217-00-74→ Заказать звонок</p>
<p className="office-info__para"><span>E-mail:</span>sdelka.74@yandex.ru</p>
<p className="office-info__para"><span>Соц.сети:</span><a href="#">ВКонтакте</a></p>
const [isMapActive, setIsMapActive] = useState(false);
useEffect(() => {
document.title = `Контакты ${CONTACTS.companyName}`;
}, []);
const handleActivateMap = () => {
setIsMapActive(true);
if (window.officeMap) {
window.officeMap.behaviors.enable("scrollZoom");
window.officeMap.behaviors.enable("drag");
}
};
const handleDeactivateMap = () => {
setIsMapActive(false);
if (window.officeMap) {
window.officeMap.behaviors.disable("scrollZoom");
window.officeMap.behaviors.disable("drag");
}
};
return (
<>
<div className="wrapper-office">
<Header />
<section className="office">
<div className="office__title font-inter-semibold">
{CONTACTS.companyNameShort}–ВИД<span>агентство недвижимости</span>
</div>
<div className="office__separator"></div>
<div className="office-inner">
<div className="office-container">
<div className="office__item">
<div className="office__pic office__pic_purchase"></div>
<div className="office__text">
<p className="office__desc font-inter-bold">
Покупка, продажа,
<span>обмен квартир и комнат</span>
</p>
</div>
<YMaps>
<Map className="map-office" defaultState={{ center: [55.16, 61.4], zoom: 12 }} />
</YMaps>
</section>
</>
);
</div>
<div className="office__item">
<div className="office__pic office__pic_rent"></div>
<div className="office__text">
<p className="office__desc font-inter-bold">
Аренда квартир
<span>и комнат</span>
</p>
</div>
</div>
<div className="office__item">
<div className="office__pic office__pic_buildings"></div>
<div className="office__text">
<p className="office__desc font-inter-bold">Новостройки</p>
</div>
</div>
<div className="office__item">
<div className="office__pic office__pic_country"></div>
<div className="office__text">
<p className="office__desc font-inter-bold">
Загородная
<span>недвижимость</span>
</p>
</div>
</div>
<div className="office__item">
<div className="office__pic office__pic_commercial"></div>
<div className="office__text">
<p className="office__desc font-inter-bold">
Коммерческая
<span>недвижимость</span>
</p>
</div>
</div>
</div>
</div>
</section>
</div>
<section className="office-location font-inter-bold">
<h2 className="office-location__title">Приходите в наш офис</h2>
<div className="office-info">
<p className="office-info__para_address">
<span>Адрес:</span>
{CONTACTS.address.office.full}
<span className="office-info__desc">
{CONTACTS.address.office.description}
</span>
</p>
<p className="office-info__para">
<span>Телефон:</span>
<a href={CONTACTS.phone.link}>{CONTACTS.phone.display}</a> →
Заказать звонок
</p>
<p className="office-info__para">
<span>E-mail:</span>
<a href={CONTACTS.email.link}>{CONTACTS.email.display}</a>
</p>
<p className="office-info__para">
<span>Соц.сети:</span>
<a href={CONTACTS.social.vk.url}>{CONTACTS.social.vk.name}</a>
</p>
</div>
<div style={{ position: "relative" }}>
<YMaps>
<Map
className="map-office"
defaultState={{
center: CONTACTS.coordinates,
zoom: 16,
}}
options={{
scrollZoom: false,
drag: false,
suppressMapOpenBlock: true,
}}
instanceRef={(ref) => {
window.officeMap = ref;
}}
>
<Placemark
geometry={CONTACTS.coordinates}
properties={{
balloonContent: CONTACTS.getBalloonContent(),
hintContent: `Офис ${CONTACTS.companyNameShort}`,
}}
options={{
preset: "islands#redDotIcon",
}}
/>
</Map>
{/* Блокирующий оверлей, когда карта неактивна */}
{!isMapActive && (
<div
onClick={handleActivateMap}
style={{
position: "absolute",
top: 0,
left: 0,
right: 0,
bottom: 0,
backgroundColor: "rgba(255, 255, 255, 0.1)",
zIndex: 999,
cursor: "pointer",
}}
/>
)}
{/* Кнопка управления картой в центре */}
<div
style={{
position: "absolute",
top: "85%",
left: "50%",
transform: "translate(-50%, -50%)",
zIndex: 1000,
}}
>
{!isMapActive ? (
<button
onClick={handleActivateMap}
style={{
background: "rgba(0, 123, 255, 0.9)",
border: "none",
borderRadius: "8px",
padding: "15px 25px",
fontSize: "16px",
fontFamily: "Inter, Arial, sans-serif",
cursor: "pointer",
boxShadow: "0 4px 12px rgba(0,0,0,0.3)",
color: "white",
fontWeight: "bold",
minWidth: "140px",
textAlign: "center",
transition: "all 0.3s ease",
}}
onMouseEnter={(e) => {
e.target.style.background = "rgba(0, 123, 255, 1)";
e.target.style.transform = "scale(1.05)";
}}
onMouseLeave={(e) => {
e.target.style.background = "rgba(0, 123, 255, 0.9)";
e.target.style.transform = "scale(1)";
}}
>
📍 Посмотреть карту
</button>
) : (
<button
onClick={handleDeactivateMap}
style={{
background: "rgba(220, 53, 69, 0.9)",
border: "none",
borderRadius: "6px",
padding: "10px 20px",
fontSize: "14px",
fontFamily: "Inter, Arial, sans-serif",
cursor: "pointer",
boxShadow: "0 3px 8px rgba(0,0,0,0.3)",
color: "white",
fontWeight: "bold",
minWidth: "120px",
textAlign: "center",
transition: "all 0.3s ease",
}}
onMouseEnter={(e) => {
e.target.style.background = "rgba(220, 53, 69, 1)";
e.target.style.transform = "scale(1.05)";
}}
onMouseLeave={(e) => {
e.target.style.background = "rgba(220, 53, 69, 0.9)";
e.target.style.transform = "scale(1)";
}}
>
✕ Закрыть карту
</button>
)}
</div>
</YMaps>
</div>
</section>
</>
);
}
export { Office };

264
src/pages/Services/Services.jsx
View File

@@ -1,119 +1,161 @@
import { useEffect } from 'react';
import './Services.scss';
import { useEffect } from "react";
import "./Services.scss";
import { Header } from '../../components/Header/Header';
import { Form } from '../../components/Form/Form';
import { Header } from "../../components/Header/Header";
import { Form } from "../../components/Form/Form";
import { CONTACTS } from "../../config/contacts";
function Services() {
useEffect(() => {
document.title = 'Услуги Агентства недвижимости АЛМА-ВИД';
}, []);
useEffect(() => {
document.title = `Услуги ${CONTACTS.companyName}`;
}, []);
return (
<>
<div className="wrapper-services">
<Header />
<div className="services__text">
<p className="services__title font-inter-bold">Мы работаем с 2000 года и помогаем
продать и купить жилую и коммерческую недвижимость.</p>
<p className="services__subtitle font-inter-bold">Получите бесплатную консультацию
по покупке или продаже вашей
недвижимости: <a className="services__link" href="#">Вконтакте</a></p>
</div>
return (
<>
<div className="wrapper-services">
<Header />
<div className="services__text">
<p className="services__title font-inter-bold">
Мы работаем с 2000 года и помогаем продать и купить жилую и
коммерческую недвижимость.
</p>
<p className="services__subtitle font-inter-bold">
Получите бесплатную консультацию по покупке или продаже вашей
недвижимости:{" "}
<a className="services__link" href={CONTACTS.social.vk.url}>
{CONTACTS.social.vk.name}
</a>
</p>
</div>
</div>
<section className="services-info font-inter-bold">
<h2 className="services-info__title">
Почему более 3 000 семей доверили нам свою недвижимость:
</h2>
<div className="services-info__container">
<div className="services-info__desc">
<div className="services-info__item">
<p className="services-info__subtitle">
1. Высокое качество работы
</p>
<p className="services-info__text font-inter-regular">
Наша деятельность проверена и признана соответствующей
национальному стандарту добровольной сертификации услуг на рынке
недвижимости Российской Федерации.
</p>
</div>
<section className="services-info font-inter-bold">
<h2 className="services-info__title">Почему более 3 000 семей доверили нам свою недвижимость:</h2>
<div className="services-info__container">
<div className="services-info__desc">
<div className="services-info__item">
<p className="services-info__subtitle">1. Высокое качество работы</p>
<p className="services-info__text font-inter-regular">Наша деятельность проверена и признана
соответствующей национальному
стандарту добровольной сертификации услуг на рынке недвижимости
Российской Федерации.</p>
</div>
<div className="services-info__item">
<p className="services-info__subtitle">2. Работаем в соответствии
с Законодательством РФ</p>
<p className="services-info__text font-inter-regular">Юридическая проверка всех сделок
и соблюдение закона о защите
персональных данных делают сделки безопасными для наших клиентов.</p>
</div>
<div className="services-info__item">
<p className="services-info__subtitle">3. Эффективность</p>
<p className="services-info__text font-inter-regular">Широкая база объектов недвижимости,
профессиональная продажа и подбор, собственные рекламные алгоритмы, и огромный опыт
в проведении сделок любой сложности позволяют нам гарантировать,
что вы получите максимальную выгоду от работы с нами.</p>
</div>
<div className="services-info__item">
<p className="services-info__subtitle">4. Выгодная процентная ставка по ипотеке</p>
<p className="services-info__text font-inter-regular">Мы постоянно развиваем
партнерские отношения с банками, за счет чего
имеем хорошую скидку для клиентов
и высокую степень одобрения заявок.</p>
</div>
</div>
<div className="services-info__desc">
<div className="services-info__item">
<p className="services-info__subtitle">5. Квалифицированные сотрудники</p>
<p className="services-info__text font-inter-regular">Специалисты по недвижимости
нашей компании проходят обучение и регулярную аттестацию, а также постоянно повышают свой
профессиональный уровень. Это — обязательное условие для каждого из нас.
А значит, вы можете решить любой жилищный вопрос, воспользовавшись помощью
профессиональных риэлторов, юристов и специалистов по ипотечному кредитованию.</p>
</div>
<div className="services-info__item">
<p className="services-info__subtitle">6. Индивидуальный подход</p>
<p className="services-info__text font-inter-regular">Мы слышим и понимаем вас, делаем все,
чтобы в результате совместной работы задача, поставленная клиентом,
была решена, и он рекомендовал нас в дальнейшем.</p>
</div>
<div className="services-info__item">
<p className="services-info__subtitle">7. Гарантии</p>
<p className="services-info__text font-inter-regular">Мы даем своим клиентам гарантии
в юридической проверке сделок. </p>
</div>
<div className="services-info__item">
<p className="services-info__text">
<span className="services-info__accent">Хотите купить,
продать недвижимость или задать вопрос юристу, оставьте заявку наши специалисты
проконсультируют вас.</span>
</p>
</div>
</div>
</div>
</section>
<section className="services font-inter-bold">
<h3 className="services-list__title">Наши услуги</h3>
<div className="services__container">
<div className="services__list">
<ul className="services__list_left">
<li>продажа недвижимости</li>
<li>покупка недвижимости</li>
<li>ипотека</li>
<li>подбор объектов <span>недвижимости</span></li>
<li>помощь в оформлении <span>наследства</span></li>
<li>консультации по вопросам недвижимости</li>
<li>оформление приватизации</li>
</ul>
</div>
<div className="services__separator"></div>
<div className="services__list">
<ul className="services__list_right">
<li>юридическое сопровождение сделок</li>
<li>узаконивание перепланировок</li>
<li>оформление права собственности на дома и земельные участки</li>
<li>работа с жилищными сертификатами и субсидиями, в том числе материнским капиталом</li>
<li>составление (подготовка) юридической экспертизы на продаваемый/покупаемый
объект недвижимости</li>
</ul>
</div>
</div>
</section>
<Form scrolledThreshold={2700}/>
</>
);
<div className="services-info__item">
<p className="services-info__subtitle">
2. Работаем в соответствии с Законодательством РФ
</p>
<p className="services-info__text font-inter-regular">
Юридическая проверка всех сделок и соблюдение закона о защите
персональных данных делают сделки безопасными для наших
клиентов.
</p>
</div>
<div className="services-info__item">
<p className="services-info__subtitle">3. Эффективность</p>
<p className="services-info__text font-inter-regular">
Широкая база объектов недвижимости, профессиональная продажа и
подбор, собственные рекламные алгоритмы, и огромный опыт в
проведении сделок любой сложности позволяют нам гарантировать,
что вы получите максимальную выгоду от работы с нами.
</p>
</div>
<div className="services-info__item">
<p className="services-info__subtitle">
4. Выгодная процентная ставка по ипотеке
</p>
<p className="services-info__text font-inter-regular">
Мы постоянно развиваем партнерские отношения с банками, за счет
чего имеем хорошую скидку для клиентов и высокую степень
одобрения заявок.
</p>
</div>
</div>
<div className="services-info__desc">
<div className="services-info__item">
<p className="services-info__subtitle">
5. Квалифицированные сотрудники
</p>
<p className="services-info__text font-inter-regular">
Специалисты по недвижимости нашей компании проходят обучение и
регулярную аттестацию, а также постоянно повышают свой
профессиональный уровень. Это — обязательное условие для каждого
из нас. А значит, вы можете решить любой жилищный вопрос,
воспользовавшись помощью профессиональных риэлторов, юристов и
специалистов по ипотечному кредитованию.
</p>
</div>
<div className="services-info__item">
<p className="services-info__subtitle">
6. Индивидуальный подход
</p>
<p className="services-info__text font-inter-regular">
Мы слышим и понимаем вас, делаем все, чтобы в результате
совместной работы задача, поставленная клиентом, была решена, и
он рекомендовал нас в дальнейшем.
</p>
</div>
<div className="services-info__item">
<p className="services-info__subtitle">7. Гарантии</p>
<p className="services-info__text font-inter-regular">
Мы даем своим клиентам гарантии в юридической проверке сделок.{" "}
</p>
</div>
<div className="services-info__item">
<p className="services-info__text">
<span className="services-info__accent">
Хотите купить, продать недвижимость или задать вопрос юристу,
оставьте заявку наши специалисты проконсультируют вас.
</span>
</p>
</div>
</div>
</div>
</section>
<section className="services font-inter-bold">
<h3 className="services-list__title">Наши услуги</h3>
<div className="services__container">
<div className="services__list">
<ul className="services__list_left">
<li>продажа недвижимости</li>
<li>покупка недвижимости</li>
<li>ипотека</li>
<li>
подбор объектов <span>недвижимости</span>
</li>
<li>
помощь в оформлении <span>наследства</span>
</li>
<li>консультации по вопросам недвижимости</li>
<li>оформление приватизации</li>
</ul>
</div>
<div className="services__separator"></div>
<div className="services__list">
<ul className="services__list_right">
<li>юридическое сопровождение сделок</li>
<li>узаконивание перепланировок</li>
<li>
оформление права собственности на дома и земельные участки
</li>
<li>
работа с жилищными сертификатами и субсидиями, в том числе
материнским капиталом
</li>
<li>
составление (подготовка) юридической экспертизы на
продаваемый/покупаемый объект недвижимости
</li>
</ul>
</div>
</div>
</section>
<Form scrolledThreshold={2700} />
</>
);
}
export { Services };