Init project

src/pages/About/About.jsx

@@ -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 };

src/pages/About/About.scss

@@ -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;
+    }
+}