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

Init project

Browse Source
This commit is contained in:
Hepatica
2025-01-25 23:22:56 +01:00
parent ba2bb8e286
commit 5fbffe2e41
105 changed files with 21868 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/pages/About/About.jsx Normal file
View File

@@ -0,0 +1,41 @@
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';
function About() {
useEffect(() => {
document.title = 'Об Агентстве недвижимости АЛМА-ВИД';
}, []);
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>
</div>
<section className="certificates">
<SliderComponent/>
</section>
<Form scrolledThreshold={1650}/>
</>
);
}
export { About };

99
src/pages/About/About.scss Normal file
View File

@@ -0,0 +1,99 @@
@import '../../styles/vars.scss';
.wrapper-about {
background-image: url(../../assets/images/background/gOWo4SLsoic.jpg);
background-size: cover;
@media (max-width: $tabletWidth) {
background-size: auto;
background-position: top;
}
}
.about {
display: flex;
column-gap: 121px;
padding-left: 45px;
padding-bottom: 33px;
color: white;
// было 4px вместо 10px
text-shadow: 2px 2px 10px rgba(6, 26, 37, 1);
@media (max-width: $tabletWidth) {
flex-direction: column-reverse;
text-align: center;
padding: 0;
text-shadow: 1px 1px 15px rgba(6, 26, 37, 1);
}
}
.about-inner {
width: 596px;
@media (min-width: 1800px) {
width: 746px;
}
@media (max-width: $tabletWidth) {
align-self: center;
width: auto;
background: linear-gradient(90deg, #17628C 0%, #FFFFFF 147.13%);
}
}
.about__info {
// width: 596px;
padding: 38px;
font-size: 17.5px;
line-height: 29px;
border-radius: 25px;
background: rgba(10, 42, 60, 0.5);
@media (min-width: 1800px) {
font-size: 21.5px;
line-height: 33px;
}
@media (max-width: $tabletWidth) {
// width: auto;
padding: 30px;
margin: 50px;
font-size: 19.5px;
}
}
.about__info p:nth-child(2),
.about__info p:last-child {
margin: 37px 0;
}
.about__title {
margin-top: 147px;
font-size: 35px;
@media (min-width: 1800px) {
font-size: 39px;
}
@media (max-width: $laptopWidth) {
margin-top: 247px;
}
@media (max-width: $tabletWidth) {
padding: 120px 18px;
margin: 0 0 60px 0;
}
}
.about__title span {
display: block;
text-align: end;
@media (max-width: 1355px) {
text-align: start;
}
@media (max-width: $tabletWidth) {
text-align: center;
}
}

123
src/pages/Apartament/Apartament.jsx Normal file
View File

@@ -0,0 +1,123 @@
import { useEffect } from 'react';
import './Apartament.scss';
import { YMaps, Map, } from '@pbe/react-yandex-maps';
import { Header } from '../../components/Header/Header';
import { Form } from '../../components/Form/Form';
import { Gallery } from '../../components/Gallery/Gallery';
function Apartament() {
useEffect(() => {
document.title = 'Апартаменты';
}, []);
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>
</div>
<YMaps>
<Map className="map-apartament" defaultState={{ center: [55.16, 61.4], zoom: 15 }} />
</YMaps>
</section>
<Form scrolledThreshold={2350}/>
</>
);
}
export { Apartament };

461
src/pages/Apartament/Apartament.scss Normal file
View File

@@ -0,0 +1,461 @@
@import '../../styles/vars.scss';
.apartament {
padding: 60px 52px 18px;
@media (max-width:1460px) {
display: flex;
flex-direction: column;
align-items: center;
}
@media (max-width:$mobileWidth) {
padding: 30px 52px 18px;
}
}
.apartament__container {
display: flex;
column-gap: 42px;
@media (max-width:1460px) {
flex-direction: column;
}
@media (max-width:630px) {
align-items: center;
}
}
.apartament__info {
display: flex;
flex-direction: column;
}
.apartament__title {
font-size: 50px;
margin: 0;
@media (min-width: 1800px) {
font-size: 55px;
}
@media (max-width:630px) {
font-size: 35px;
}
@media (max-width:460px) {
font-size: 31px;
}
}
.apartament__para {
font-size: 25px;
margin-top: 0;
@media (min-width: 1800px) {
font-size: 31px;
}
@media (max-width:630px) {
font-size: 20px;
}
@media (max-width:460px) {
font-size: 14px;
}
}
.apartament__icons {
display: flex;
flex-wrap: wrap;
column-gap: 52px;
width: 762px;
margin-top: 20px;
@media (min-width: 1800px) {
width: 862px;
}
@media (max-width:1460px) {
width: 962px;
}
@media (max-width:$laptopWidth) {
width: 762px;
}
@media (max-width:$tabletWidth) {
width: 562px;
}
@media (max-width:630px) {
width: 362px;
flex-wrap: wrap-reverse;
}
@media (max-width: 420px) {
width: 340px;
}
}
.icons__item {
display: flex;
align-items: center;
column-gap: 10px;
@media (min-width: 1800px) {
font-size: 22px;
}
}
.icons__pic {
background-size: cover;
}
.icons__pic_area {
background-image: url(../../assets/images/icons/total-area.svg);
width: 45px;
height: 44px;
@media (min-width: 1800px) {
width: 65px;
height: 65px;
}
}
.icons__pic_living {
background-image: url(../../assets/images/icons/living-space.svg);
width: 47px;
height: 46px;
@media (min-width: 1800px) {
width: 67px;
height: 66px;
}
}
.icons__pic_kitchen {
background-image: url(../../assets/images/icons/kitchen-area.svg);
width: 58px;
height: 46px;
@media (min-width: 1800px) {
width: 78px;
height: 62px;
}
}
.icons__pic_year {
background-image: url(../../assets/images/icons/year-of-construction.svg);
width: 65px;
height: 47px;
@media (min-width: 1800px) {
width: 85px;
height: 62px;
}
}
.icons__pic__floor {
background-image: url(../../assets/images/icons/floor.svg);
width: 42px;
height: 44px;
@media (min-width: 1800px) {
width: 62px;
height: 64px;
}
}
.apartament__text {
width: 762px;
@media (min-width: 1800px) {
width: 862px;
}
@media (max-width:1460px) {
width: 962px;
}
@media (max-width:$laptopWidth) {
width: 762px;
}
@media (max-width:$tabletWidth) {
width: 562px;
}
@media (max-width:630px) {
width: 362px;
}
@media (max-width: 420px) {
width: 340px;
}
}
.apartament__text p {
margin: 40px 0;
font-size: 18px;
line-height: 30px;
@media (min-width: 1800px) {
font-size: 24px;
line-height: 34px;
}
}
.apartament__desc {
display: flex;
column-gap: 89px;
@media (min-width: 1800px) {
width: 862px;
}
@media (max-width:$tabletWidth) {
width: 562px;
}
@media (max-width:630px) {
flex-direction: column;
width: 362px;
}
@media (max-width: 420px) {
width: 340px;
}
}
.flat__title,
.home__title {
font-size: 25px;
margin: 15px 0;
@media (min-width: 1800px) {
font-size: 31px;
}
}
.title-color {
color: rgba(23, 98, 140, 1);
}
.apartament__desc ul {
padding-left: 30px;
}
.apartament__desc li {
font-size: 20px;
line-height: 33px;
@media (min-width: 1800px) {
font-size: 26px;
line-height: 43px;
}
}
// пока так, потом можем переделать
.apartament__price {
position: sticky;
top: 20%;
width: 513px;
height: 411px;
padding: 30px;
background-color: #BAE6FF;
@media (min-width:1700px) {
width: 703px;
height: 511px;
}
@media (max-width:1460px) {
position: static;
width: 903px;
height: 511px;
margin-bottom: 20px;
}
@media (max-width:$laptopWidth) {
width: 708px;
height: 461px;
}
@media (max-width:$tabletWidth) {
width: 513px;
height: 411px;
}
@media (max-width:630px) {
width: 362px;
height: 345px;
}
@media (max-width: 420px) {
width: 340px;
padding: 5px;
}
}
.price__container {
display: flex;
justify-content: space-between;
align-items: center;
}
.price__logo {
background-image: url(../../assets/images/logo/blue-logo.svg);
width: 150px;
height: 35px;
background-size: contain;
@media (max-width: 872px) {
width: 148px;
}
}
.price__total {
font-size: 35px;
margin: 16px 0 16px 10px;
@media (min-width:1700px) {
font-size: 41px;
}
@media (max-width:1460px) {
font-size: 45px;
}
@media (max-width:$laptopWidth) {
font-size: 39px;
}
@media (max-width:$tabletWidth) {
font-size: 35px;
}
@media (max-width:630px) {
font-size: 29px;
}
@media (max-width: 420px) {
font-size: 22px;
}
}
.price__desc {
background: rgba(255, 255, 255, 0.7);
padding: 13px 10px;
border-radius: 6px;
font-size: 19px;
margin: 0 0 30px 0;
@media (min-width:1700px) {
font-size: 25px;
}
@media (max-width:1460px) {
font-size: 30px;
}
@media (max-width:$laptopWidth) {
font-size: 24px;
}
@media (max-width:$tabletWidth) {
font-size: 19px;
}
@media (max-width:630px) {
font-size: 13px;
}
}
.price__meter,
.price__conditions,
.price__mortgage {
width: 100%;
font-size: 18px;
@media (min-width:1700px) {
font-size: 24px;
}
@media (max-width:1460px) {
font-size: 31px;
}
@media (max-width:$laptopWidth) {
font-size: 25px;
}
@media (max-width:$tabletWidth) {
font-size: 18px;
}
@media (max-width:630px) {
font-size: 12px;
}
}
.apartament__btn_number,
.apartament__btn_write {
width: 100%;
padding: 13px 0;
margin: 5px 0;
border-radius: 6px;
border: none;
font-size: 19px;
cursor: pointer;
@media (min-width:1700px) {
font-size: 24px;
}
}
.apartament__btn_number {
background: rgba(23, 98, 140, 1);
color: white;
}
.apartament__btn_number:hover {
background: rgb(1, 79, 123);
}
.apartament__btn_write {
background: white;
color: rgba(23, 98, 140, 1);
}
.map-apartament {
width: 762px;
height: 60vh;
@media (min-width: 1800px) {
width: 862px;
margin: 40px 0;
}
@media (max-width:1460px) {
width: 962px;
}
@media (max-width:$laptopWidth) {
width: 762px;
}
@media (max-width:$tabletWidth) {
width: 562px;
}
@media (max-width:630px) {
width: 362px;
}
@media (max-width: 420px) {
width: 350px;
}
}

71
src/pages/Home/Home.jsx Normal file
View File

@@ -0,0 +1,71 @@
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';
function Home() {
useEffect(() => {
document.title = 'Агентство недвижимости АЛМА-ВИД';
}, []);
return (
<>
<div className="wrapper">
<Header />
</div>
<section className="info">
<div className="info__desc">
<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>
</ul>
</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>
</div>
</section>
<section className="lawyer-info font-inter-bold">
<div className="lawyer-info__container">
<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>
</div>
</div>
<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 }} />
</YMaps>
</div>
<Form scrolledThreshold={2750}/>
</>
);
}
export { Home };

256
src/pages/Home/Home.scss Normal file
View File

@@ -0,0 +1,256 @@
@import '../../styles/vars.scss';
.info ul {
padding: 0;
}
.info ul li {
line-height: 29px;
@media (min-width: 1800px) {
font-size: 20px;
line-height: 39px;
}
}
.info__lead p span {
display: block;
text-align: end;
}
.wrapper {
background-image: url(../../assets/images/background/Ud_EgKxddHk.jpg);
background-size: cover;
height: 75vh;
}
.info {
display: flex;
column-gap: 184px;
padding: 72px;
background: linear-gradient(270deg, #17628C 0%, #FFFFFF 100%);
}
.info__title {
font-size: 30px;
@media (min-width: 1800px) {
font-size: 34px;
}
}
.info__separator {
margin: 35px 0;
border-left: 4.5px solid rgba(255, 255, 255, 0.57);
border-radius: 10px;
}
.info__lead p {
min-width: 280px;
margin: 80px 0;
text-align: end;
font-size: 25px;
line-height: 32px;
text-transform: uppercase;
color: white;
@media (min-width: 1800px) {
min-width: 325px;
font-size: 29px;
}
}
.lawyer-info {
display: flex;
flex-direction: column;
align-items: center;
row-gap: 65px;
margin: 82px 263px;
}
.lawyer-info__container {
display: flex;
align-items: center;
column-gap: 104px;
}
.lawyer-info__title {
font-size: 34px;
@media (min-width: 1800px) {
font-size: 38px;
}
}
.lawyer-info__text {
font-size: 27px;
@media (min-width: 1800px) {
font-size: 31px;
}
}
.lawyer-info__image {
height: 349px;
width: 349px;
background-size: cover;
@media (min-width: 1800px) {
height: 379px;
width: 379px;
}
}
.lawyer-info__para {
text-align: center;
font-size: 24px;
margin-bottom: 0;
@media (min-width: 1800px) {
font-size: 28px;
}
}
.map-container {
padding: 0 146px 80px 146px;
@media (max-width: $laptopWidth) {
padding: 0px 50px 80px 50px;
}
@media (max-width: $tabletWidth) {
padding: 0px 35px 50px 35px;
}
@media (max-width: $mobileWidth) {
padding: 0px 18px 40px 18px;
}
}
.map {
width: 100%;
height: 100vh;
@media (max-width: $laptopWidth) {
height: 50vh;
}
}
@media (max-width:$desktopWidth) {
.info__lead {
align-self: center;
}
}
@media (max-width:1120px) {
.info {
column-gap: 154px;
}
}
@media (max-width:$laptopWidth) {
.info {
padding: 36px;
column-gap: 92px;
}
.lawyer-info {
margin: 41px 131px;
row-gap: 32px;
}
.lawyer-info__text {
font-size: 25px;
}
.lawyer-info__title {
font-size: 32px;
}
}
@media (max-width:$tabletWidth) {
.lawyer-info__para {
display: none;
}
.info__separator,
.info__lead {
display: none;
}
.info {
background: linear-gradient(270deg, #abc3d1 0%, #FFFFFF 100%);
}
.info__title {
font-size: 26px;
margin-top: 15px;
}
.lawyer-info__container {
flex-direction: column;
}
.lawyer-info__title {
margin-bottom: 0;
}
.lawyer-info__title,
.lawyer-info__text {
text-align: center;
}
.lawyer-info__text {
margin-top: 12.5px;
margin-bottom: 0;
}
.lawyer-info__paraMobile {
width: 100%;
margin: 0;
padding: 40px;
font-size: 25px;
text-align: center;
border-radius: 20px;
background-color: #17628C;
color: white;
}
}
@media (max-width:640px) {
.lawyer-info__paraMobile {
width: 125%;
}
}
@media (max-width:$mobileWidth) {
.info__title {
font-size: 24px;
}
.lawyer-info__title {
font-size: 30px;
}
.lawyer-info__text {
font-size: 21px;
}
.lawyer-info__paraMobile {
width: 200%;
font-size: 21px;
}
}
@media (min-width:769px) {
.lawyer-info__paraMobile {
display: none;
}
}

26
src/pages/Objects/Objects.jsx Normal file
View File

@@ -0,0 +1,26 @@
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';
function Objects() {
useEffect(() => {
document.title = 'Объекты Агентства недвижимости АЛМА-ВИД';
}, []);
return (
<>
<div className="wrapper-objects">
<Header />
<section className="objects">
<SliderComponent/>
</section>
</div>
<Form scrolledThreshold={690}/>
</>
);
}
export { Objects };

23
src/pages/Objects/Objects.scss Normal file
View File

@@ -0,0 +1,23 @@
@import '../../styles/vars.scss';
.wrapper-objects {
background-image: url(../../assets/images/background/5sV_9sYRmHc.jpg);
background-size: cover;
height: 100vh;
@media (min-width: 799.98px) and (max-width: $laptopWidth) {
height: 100%;
}
@media (min-width: $tabletWidth) and (max-width: 800px) {
height: 73vh;
}
@media (max-width: $mobileWidth) {
height: 85vh;
}
@media (min-width: 380px) and (max-width: $mobileWidth) {
height: 73vh;
}
}

76
src/pages/Office/Office.jsx Normal file
View File

@@ -0,0 +1,76 @@
import { useEffect } from 'react';
import './Office.scss';
import { YMaps, Map } from '@pbe/react-yandex-maps';
import { Header } from '../../components/Header/Header';
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>
</div>
<YMaps>
<Map className="map-office" defaultState={{ center: [55.16, 61.4], zoom: 12 }} />
</YMaps>
</section>
</>
);
}
export { Office };

329
src/pages/Office/Office.scss Normal file
View File

@@ -0,0 +1,329 @@
@import '../../styles/vars.scss';
.wrapper-office {
background-image: url(../../assets/images/background/n_cLeECP0mU.jpg);
background-size: cover;
height: 110vh;
@media (max-width: $laptopWidth) {
height: auto;
}
@media (max-width: $tabletWidth) {
background-position: top;
background-size: auto;
}
}
.office {
display: flex;
margin-top: 30px;
@media (min-width: 1800px) {
margin-top: 40px;
}
@media (max-width: $laptopWidth) {
padding-bottom: 70px;
}
@media (max-width: $tabletWidth) {
flex-direction: column;
padding-bottom: 0;
}
}
.office__title {
text-align: center;
padding: 120px 18px;
margin: 0 0 100px 0;
font-size: 70px;
color: white;
@media (min-width: 1800px) {
font-size: 74px;
}
@media (max-width: 668px) {
font-size: 55px;
}
@media (max-width: 420px) {
font-size: 51px;
}
@media (min-width: 769px) {
display: none;
}
}
.office__title span {
display: block;
font-size: 32px;
@media (min-width: 1800px) {
font-size: 36px;
}
@media (max-width: 668px) {
font-size: 25px;
}
@media (max-width: 420px) {
font-size: 23px;
}
}
.office__separator {
margin: -40px 27px -40px 55px;
border-radius: 10px;
border: 3px solid rgba(255, 255, 255, 1);
@media (max-width: $tabletWidth) {
display: none;
}
}
.office-inner {
@media (max-width: $tabletWidth) {
background: white;
}
}
.office-container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
row-gap: 51px;
@media (min-width: 1800px) {
row-gap: 61px;
}
@media (max-width: $tabletWidth) {
align-items: center;
// width: auto;
margin: 50px;
padding: 50px;
border-radius: 30px;
background: #819099;
}
@media (max-width: 574px) {
align-items: normal;
margin: 35px;
padding: 35px;
}
@media (max-width: $mobileWidth) {
margin: 25px;
padding: 25px;
}
@media (max-width: 420px) {
padding: 20px;
}
}
.office__item {
display: flex;
align-items: center;
column-gap: 14px;
@media (max-width: $tabletWidth) {
width: 400px;
}
@media (max-width: 574px) {
width: auto;
}
}
.office__pic {
background-size: cover;
}
.office__pic_purchase {
background-image: url(../../assets/images/icons/house.svg);
width: 47px;
height: 46px;
@media (min-width: 1800px) {
width: 65px;
height: 67px;
}
}
.office__pic_rent {
background-image: url(../../assets/images/icons/Group-56.svg);
width: 39px;
height: 38px;
@media (min-width: 1800px) {
width: 65px;
height: 64px;
}
}
.office__pic_buildings {
background-image: url(../../assets/images/icons/new-buildings.svg);
width: 40px;
height: 50px;
@media (min-width: 1800px) {
width: 60px;
height: 77px;
}
}
.office__pic_country {
background-image: url(../../assets/images/icons/country-estate.svg);
width: 51px;
height: 31px;
@media (min-width: 1800px) {
width: 87px;
height: 54px;
}
}
.office__pic_commercial {
background-image: url(../../assets/images/icons/commercial-real-estate.svg);
width: 44.5px;
height: 44px;
@media (min-width: 1800px) {
width: 75px;
height: 76px;
}
}
.office__desc {
margin: 0;
font-size: 25px;
color: white;
@media (min-width: 1800px) {
font-size: 29px;
}
@media (max-width: $laptopWidth) {
font-size: 22px;
}
@media (max-width: $mobileWidth) {
font-size: 20px;
}
}
.office__desc span {
display: block;
}
.office-location {
margin: 64px 146px 69px 146px;
@media (max-width: $tabletWidth) {
margin: 50px 50px 69px 50px;
}
@media (max-width: 574px) {
margin: 50px 35px 69px 35px;
}
@media (max-width: $mobileWidth) {
margin: 50px 25px 69px 25px;
}
}
.office-location__title {
text-align: center;
font-size: 35px;
color: #0F557D;
@media (min-width: 1800px) {
font-size: 39px;
}
@media (max-width: $tabletWidth) {
margin-top: 0;
}
}
.office-info {
display: flex;
justify-content: space-between;
margin-top: 20px;
column-gap: 20px;
@media (max-width: $laptopWidth) {
flex-direction: column;
}
}
.office-info__para,
.office-info__para_address {
font-size: 17.5px;
line-height: 29px;
@media (min-width: 1800px) {
font-size: 21.5px;
line-height: 33px;
}
@media (max-width: $laptopWidth) {
text-align: center;
}
}
.office-info__para_address {
@media (max-width: $laptopWidth) {
order: 1;
}
}
.office-info__para span,
.office-info__para_address span {
display: block;
font-size: 25px;
@media (min-width: 1800px) {
font-size: 29px;
}
}
.office-info__para_address .office-info__desc {
display: block;
margin-top: 40px;
font-size: 17.5px;
@media (min-width: 1800px) {
font-size: 21.5px;
}
@media (max-width: $laptopWidth) {
font-size: 22.5px;
}
}
.office-info__para a {
color: black;
}
.office-info__para a:hover {
text-decoration: underline;
}
.map-office {
width: 100%;
height: 100vh;
@media (max-width: $laptopWidth) {
height: 50vh;
}
}
.map-office>YMaps {
border-radius: 25px;
overflow: hidden;
}

119
src/pages/Services/Services.jsx Normal file
View File

@@ -0,0 +1,119 @@
import { useEffect } from 'react';
import './Services.scss';
import { Header } from '../../components/Header/Header';
import { Form } from '../../components/Form/Form';
function Services() {
useEffect(() => {
document.title = 'Услуги Агентства недвижимости АЛМА-ВИД';
}, []);
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>
</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}/>
</>
);
}
export { Services };

325
src/pages/Services/Services.scss Normal file
View File

@@ -0,0 +1,325 @@
@import '../../styles/vars.scss';
.wrapper-services {
background-image: url(../../assets/images/background/iXQ29Vbg4Ng.jpg);
background-size: cover;
height: 100vh;
@media (max-width: $laptopWidth) {
height: auto;
}
@media (max-width: $mobileWidth) {
background-position: top;
}
}
.services__text {
display: flex;
flex-direction: column;
// column-gap: 22px;
width: 596px;
margin: 14px 0 0 45px;
@media (min-width: 1700px) {
width: 696px;
margin: 100px 0 0 45px;
}
@media (max-width: $laptopWidth) {
margin: 14px 0 0 18px;
padding-bottom: 30px;
}
@media (max-width: $tabletWidth) {
width: 496px;
padding: 30px 0;
margin: 14px 18px 0 18px;
}
@media (max-width: 668px) {
width: auto;
padding: 30px 0;
margin: 14px 18px 0 18px;
}
}
.services__title,
.services-list__title {
margin-top: 0;
text-align: start;
color: white;
font-size: 40px;
@media (min-width: 1800px) {
font-size: 44px;
}
@media (max-width: $laptopWidth) {
font-size: 34px;
}
@media (max-width: $tabletWidth) {
text-align: center;
font-size: 30px;
}
@media (max-width: $mobileWidth) {
font-size: 26px;
}
@media (max-width: 420px) {
font-size: 24px;
}
}
.services-list__title {
text-align: center;
}
.services__subtitle {
padding: 45px;
margin-top: 0;
font-size: 25.5px;
line-height: 36px;
border-radius: 25px;
background: rgba(255, 255, 255, 0.5);
@media (min-width: 1800px) {
font-size: 29.5px;
line-height: 40px;
}
@media (max-width: $laptopWidth) {
padding: 38px;
line-height: 31px;
font-size: 20.5px;
}
@media (max-width: $tabletWidth) {
padding: 34px;
font-size: 16.5px;
line-height: 27px;
}
}
.services__link {
color: rgba(23, 98, 140, 1);
}
.services__link:hover {
text-decoration: underline;
}
.services-info {
margin: 54px 0;
@media (max-width: $laptopWidth) {
margin: 54px 18px;
}
@media (max-width: 468px) {
margin: 27px 18px;
padding: 15px;
border-radius: 25px;
background: rgb(236 239 241);
}
}
.services-info__title {
font-size: 35px;
text-align: center;
@media (min-width: 1800px) {
font-size: 39px;
}
@media (max-width: $laptopWidth) {
font-size: 34px;
}
@media (max-width: $tabletWidth) {
font-size: 30px;
}
@media (max-width: 468px) {
margin-top: auto;
font-size: 26px;
}
@media (max-width: 420px) {
font-size: 23px;
}
}
.services-info__container {
display: flex;
justify-content: space-evenly;
// column-gap: 245px;
@media (max-width: $laptopWidth) {
column-gap: 25px;
}
@media (max-width: $tabletWidth) {
flex-direction: column;
align-items: center;
}
}
.services-info__item {
width: 424px;
@media (min-width: 1800px) {
width: 524px;
}
@media (max-width: $laptopWidth) {
width: 324px;
}
@media (max-width: $tabletWidth) {
width: 424px;
}
@media (max-width: 468px) {
width: 300px;
}
}
.services-info__subtitle {
margin-bottom: 0;
font-size: 25px;
@media (min-width: 1800px) {
font-size: 29px;
}
@media (max-width: $laptopWidth) {
font-size: 23px;
}
@media (max-width: 468px) {
font-size: 21px;
}
}
.services-info__text {
margin-top: 10px;
font-size: 20px;
line-height: 33px;
@media (min-width: 1800px) {
font-size: 24px;
line-height: 37px;
}
@media (max-width: $laptopWidth) {
font-size: 18px;
}
@media (max-width: 468px) {
line-height: 31px;
}
}
.services-info__accent {
line-height: 29px;
color: rgba(23, 98, 140, 1);
}
.services {
background-image: url(../../assets/images/background/htGkGyJssgc.jpg);
background-size: cover;
// height: 130vh;
padding: 105px 260px;
color: white;
@media (max-width: $laptopWidth) {
background-position: center;
padding: 52px 18px;
}
}
.services__container {
display: flex;
margin-top: 80px;
justify-content: center;
@media (max-width: $laptopWidth) {
margin-top: 70px;
}
}
.services__separator {
margin: -20px 40px;
border-radius: 10px;
border: 3px solid rgba(255, 255, 255, 1);
@media (max-width: 668px) {
margin: -20px 20px;
}
@media (max-width: $mobileWidth) {
border: 2px solid rgba(255, 255, 255, 1);
}
}
.services__list ul {
padding: 0;
}
.services__list ul li {
margin: 20px 0;
font-size: 25px;
list-style-type: none;
@media (min-width: 1800px) {
font-size: 29px;
}
@media (max-width: $laptopWidth) {
font-size: 23px;
}
@media (max-width: 668px) {
font-size: 20px;
}
@media (max-width: $mobileWidth) {
font-size: 15px;
}
}
.services__list_left {
text-align: end;
}
.services__list_left,
.services__list_right {
width: 457px;
@media (min-width: 1800px) {
width: 557px;
}
@media (max-width: $laptopWidth) {
width: 333px;
}
@media (max-width: $tabletWidth) {
width: 257px;
}
@media (max-width: 668px) {
width: 217px;
}
@media (max-width: $mobileWidth) {
width: 137px;
}
}
.services__list_left span {
display: block;
}