mirror of
https://github.com/danilt2000/Alma-vid.git
synced 2025-12-10 12:09:27 +02:00
Init project
This commit is contained in:
Hepatica
71
src/pages/Home/Home.jsx
Normal file
71
src/pages/Home/Home.jsx
Normal 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
256
src/pages/Home/Home.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user