Init project

2025-12-08 19:29:26 +02:00 · 2025-01-25 23:22:56 +01:00
parent ba2bb8e286
commit 5fbffe2e41
105 changed files with 21868 additions and 0 deletions
--- a/.eslintrc
+++ b/.eslintrc
@@ -0,0 +1,30 @@
+{
+    "extends": ["react-app", "react-app/jest"],
+    "rules": {
+        "no-unused-vars": "warn",
+        "no-console": "warn",
+        "quotes": ["warn", "single"],
+        "jsx-quotes": ["error", "prefer-double"],
+        "prefer-const": "error",
+        "indent": ["warn", 4],
+        "max-len": ["warn", { "code": 120 }],
+        "semi": ["warn", "always"],
+        "import/order": [
+            "warn",
+            {
+                "groups": [
+                    "builtin",
+                    "external",
+                    "internal",
+                    "unknown",
+                    "parent",
+                    "sibling",
+                    "index",
+                    "object",
+                    "type"
+                ],
+                "newlines-between": "always-and-inside-groups"
+            }
+        ]
+    }
+}
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
--- a/README.md
+++ b/README.md
@@ -0,0 +1,70 @@
+# Getting Started with Create React App
+
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm start`
+
+Runs the app in the development mode.\
+Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
+
+The page will reload when you make changes.\
+You may also see any lint errors in the console.
+
+### `npm test`
+
+Launches the test runner in the interactive watch mode.\
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+
+### `npm run build`
+
+Builds the app for production to the `build` folder.\
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.\
+Your app is ready to be deployed!
+
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+
+### `npm run eject`
+
+**Note: this is a one-way operation. Once you `eject`, you can't go back!**
+
+If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+
+Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
+
+You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
+
+## Learn More
+
+You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+
+To learn React, check out the [React documentation](https://reactjs.org/).
+
+### Code Splitting
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
+
+### Analyzing the Bundle Size
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
+
+### Making a Progressive Web App
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
+
+### Advanced Configuration
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
+
+### Deployment
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
+
+### `npm run build` fails to minify
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,43 @@
+{
+  "name": "alma-vid",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@pbe/react-yandex-maps": "^1.2.4",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^13.5.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-image-gallery": "^1.3.0",
+    "react-responsive": "^9.0.2",
+    "react-router-dom": "^6.15.0",
+    "react-scripts": "5.0.1",
+    "react-slick": "^0.29.0",
+    "slick-carousel": "^1.8.1",
+    "web-vitals": "^2.1.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject",
+    "lint": "eslint -c .eslintrc --ext .js,.jsx .",
+    "lint:fix": "npm run lint -- --fix"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "sass": "^1.63.6"
+  }
+}
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/index.html
+++ b/public/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name="theme-color" content="#000000" />
+        <meta
+            name="description"
+            content="Web site created using create-react-app"
+        />
+        <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+        <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+        <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+        <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+        <title>React App</title>
+    </head>
+    <body>
+        <noscript>You need to enable JavaScript to run this app.</noscript>
+        <div id="root"></div>
+        <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    --></body>
+</html>
--- a/public/logo192.png
+++ b/public/logo192.png
--- a/public/logo512.png
+++ b/public/logo512.png
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
--- a/public/robots.txt
+++ b/public/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
--- a/src/App.css
+++ b/src/App.css
--- a/src/App.js
+++ b/src/App.js
@@ -0,0 +1,15 @@
+import { Routing } from './Routes.js';
+import { Footer } from './components/Footer/Footer.jsx';
+
+import './App.css';
+
+function App() {
+  return (
+    <div className="App">
+      <Routing />
+      <Footer />
+    </div>
+  );
+}
+
+export default App;
--- a/src/App.test.js
+++ b/src/App.test.js
@@ -0,0 +1,8 @@
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});
--- a/src/Routes.js
+++ b/src/Routes.js
@@ -0,0 +1,22 @@
+// Примерная структура
+import { Route, Routes } from 'react-router-dom';
+
+import { Home } from './pages/Home/Home.jsx';
+import { About } from './pages/About/About.jsx';
+import { Objects } from './pages/Objects/Objects.jsx';
+import { Apartament } from './pages/Apartament/Apartament.jsx';
+import { Services } from './pages/Services/Services.jsx';
+import { Office } from './pages/Office/Office.jsx';
+
+const Routing = () => (
+    <Routes>
+        <Route exact path="/" element={<Home />} />
+        <Route path="/about" element={<About />} />
+        <Route path="/objects" element={<Objects />} />
+        <Route path="/apartament" element={<Apartament />} />
+        <Route path="/services" element={<Services />} />
+        <Route path="/office" element={<Office />} />
+    </Routes>
+);
+
+export { Routing };
--- a/src/assets/fonts/Inter/Inter-Bold.ttf
+++ b/src/assets/fonts/Inter/Inter-Bold.ttf
--- a/src/assets/fonts/Inter/Inter-ExtraBold.ttf
+++ b/src/assets/fonts/Inter/Inter-ExtraBold.ttf
--- a/src/assets/fonts/Inter/Inter-ExtraLight.ttf
+++ b/src/assets/fonts/Inter/Inter-ExtraLight.ttf
--- a/src/assets/fonts/Inter/Inter-Light.ttf
+++ b/src/assets/fonts/Inter/Inter-Light.ttf
--- a/src/assets/fonts/Inter/Inter-Medium.ttf
+++ b/src/assets/fonts/Inter/Inter-Medium.ttf
--- a/src/assets/fonts/Inter/Inter-Regular.ttf
+++ b/src/assets/fonts/Inter/Inter-Regular.ttf
--- a/src/assets/fonts/Inter/Inter-SemiBold.ttf
+++ b/src/assets/fonts/Inter/Inter-SemiBold.ttf
--- a/src/assets/fonts/Inter/Inter-Thin.ttf
+++ b/src/assets/fonts/Inter/Inter-Thin.ttf
--- a/src/assets/fonts/Inter/OFL.txt
+++ b/src/assets/fonts/Inter/OFL.txt
@@ -0,0 +1,93 @@
+Copyright 2020 The Inter Project Authors (https://github.com/rsms/inter)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
--- a/src/assets/images/apartaments/image-44.jpg
+++ b/src/assets/images/apartaments/image-44.jpg
--- a/src/assets/images/apartaments/image-45.jpg
+++ b/src/assets/images/apartaments/image-45.jpg
--- a/src/assets/images/apartaments/image-46.jpg
+++ b/src/assets/images/apartaments/image-46.jpg
--- a/src/assets/images/apartaments/image-47.jpg
+++ b/src/assets/images/apartaments/image-47.jpg
--- a/src/assets/images/apartaments/image-48.jpg
+++ b/src/assets/images/apartaments/image-48.jpg
--- a/src/assets/images/apartaments/image-49.jpg
+++ b/src/assets/images/apartaments/image-49.jpg
--- a/src/assets/images/apartaments/image-50.jpg
+++ b/src/assets/images/apartaments/image-50.jpg
--- a/src/assets/images/apartaments/image-51.jpg
+++ b/src/assets/images/apartaments/image-51.jpg
--- a/src/assets/images/apartaments/image-55.jpg
+++ b/src/assets/images/apartaments/image-55.jpg
--- a/src/assets/images/apartaments/image-56.jpg
+++ b/src/assets/images/apartaments/image-56.jpg
--- a/src/assets/images/apartaments/image-57.jpg
+++ b/src/assets/images/apartaments/image-57.jpg
--- a/src/assets/images/background/5sV_9sYRmHc.jpg
+++ b/src/assets/images/background/5sV_9sYRmHc.jpg
--- a/src/assets/images/background/Ud_EgKxddHk.jpg
+++ b/src/assets/images/background/Ud_EgKxddHk.jpg
--- a/src/assets/images/background/gOWo4SLsoic.jpg
+++ b/src/assets/images/background/gOWo4SLsoic.jpg
--- a/src/assets/images/background/htGkGyJssgc.jpg
+++ b/src/assets/images/background/htGkGyJssgc.jpg
--- a/src/assets/images/background/iXQ29Vbg4Ng.jpg
+++ b/src/assets/images/background/iXQ29Vbg4Ng.jpg
--- a/src/assets/images/background/n_cLeECP0mU.jpg
+++ b/src/assets/images/background/n_cLeECP0mU.jpg
--- a/src/assets/images/icons/Group-56.svg
+++ b/src/assets/images/icons/Group-56.svg
@@ -0,0 +1,5 @@
+<svg width="85" height="84" viewBox="0 0 85 84" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M58.8619 48.1279L80.2455 29.8816C81.3588 28.9316 82 27.5416 82 26.078V8C82 5.23858 79.7614 3 77 3H8C5.23858 3 3 5.23858 3 8V75.5636C3 78.3251 5.23858 80.5636 8 80.5636H77C79.7614 80.5636 82 78.3251 82 75.5636V58.8458" stroke="white" stroke-width="6" stroke-linecap="round"/>
+<path d="M42.5 3V34.2409" stroke="white" stroke-width="6" stroke-linecap="round"/>
+<path d="M3.71875 41.7816H34.9597" stroke="white" stroke-width="6" stroke-linecap="round"/>
+</svg>
--- a/src/assets/images/icons/arrow-bottom.svg
+++ b/src/assets/images/icons/arrow-bottom.svg
@@ -0,0 +1,4 @@
+<svg width="106" height="106" viewBox="0 0 106 106" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="53" cy="53" r="53" transform="matrix(1 0 0 -1 0 106)" fill="white"/>
+<path d="M21.9526 37.6328L50.6535 75.5179C51.9889 77.2807 54.6383 77.2807 55.9737 75.5179L84.6745 37.6328" stroke="#17628C" stroke-width="12.5148" stroke-linecap="round"/>
+</svg>
--- a/src/assets/images/icons/arrow-left.svg
+++ b/src/assets/images/icons/arrow-left.svg
@@ -0,0 +1,4 @@
+<svg width="106" height="106" viewBox="0 0 106 106" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="53" cy="53" r="53" transform="rotate(-90 53 53)" fill="white"/>
+<path d="M68.3672 84.0474L30.4821 55.3465C28.7193 54.0111 28.7193 51.3617 30.4821 50.0263L68.3672 21.3255" stroke="#17628C" stroke-width="12.5148" stroke-linecap="round"/>
+</svg>
--- a/src/assets/images/icons/arrow-right.svg
+++ b/src/assets/images/icons/arrow-right.svg
@@ -0,0 +1,4 @@
+<svg width="106" height="106" viewBox="0 0 106 106" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="53" cy="53" r="53" transform="matrix(0 -1 -1 0 106 106)" fill="white"/>
+<path d="M37.6328 84.0474L75.5179 55.3465C77.2807 54.0111 77.2807 51.3617 75.5179 50.0263L37.6328 21.3255" stroke="#17628C" stroke-width="12.5148" stroke-linecap="round"/>
+</svg>
--- a/src/assets/images/icons/arrow-top.svg
+++ b/src/assets/images/icons/arrow-top.svg
@@ -0,0 +1,4 @@
+<svg width="106" height="106" viewBox="0 0 106 106" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="53" cy="53" r="53" fill="white"/>
+<path d="M21.9526 68.3672L50.6535 30.4821C51.9889 28.7193 54.6383 28.7193 55.9737 30.4821L84.6745 68.3672" stroke="#17628C" stroke-width="12.5148" stroke-linecap="round"/>
+</svg>
--- a/src/assets/images/icons/arrow.svg
+++ b/src/assets/images/icons/arrow.svg
@@ -0,0 +1,4 @@
+<svg width="141" height="141" viewBox="0 0 141 141" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="70.5" cy="70.5" r="70.5" fill="white"/>
+<path d="M29.2012 90.9411L68.257 39.3873C69.5924 37.6246 72.2419 37.6246 73.5773 39.3873L112.633 90.9411" stroke="#17628C" stroke-width="12.5148" stroke-linecap="round"/>
+</svg>
--- a/src/assets/images/icons/commercial-real-estate.svg
+++ b/src/assets/images/icons/commercial-real-estate.svg
@@ -0,0 +1,5 @@
+<svg width="95" height="93" viewBox="0 0 95 93" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M54.0038 89.3154H87C89.7614 89.3154 92 87.0768 92 84.3154V22.2956C92 20.369 90.893 18.6138 89.1544 17.7836L61.1582 4.41607C57.8398 2.83159 54.0038 5.25082 54.0038 8.92811V19.1423M54.0038 89.3154V19.1423M54.0038 89.3154H25.25M54.0038 19.1423H30.25C27.4886 19.1423 25.25 21.3809 25.25 24.1423V54.2288M25.25 89.3154H8C5.23858 89.3154 3 87.0768 3 84.3154V66.6611C3 64.6286 4.23032 62.7984 6.11238 62.0311L25.25 54.2288M25.25 89.3154V54.2288" stroke="white" stroke-width="6"/>
+<rect x="66.4316" y="42.5231" width="14.1692" height="44.9769" rx="2.5" stroke="white" stroke-width="5"/>
+<rect x="36.9922" y="41.8385" width="8.00769" height="44.9769" rx="2.5" stroke="white" stroke-width="5"/>
+</svg>
--- a/src/assets/images/icons/country-estate.svg
+++ b/src/assets/images/icons/country-estate.svg
@@ -0,0 +1,13 @@
+<svg width="107" height="66" viewBox="0 0 107 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.35636 40.8585V61.7457C8.35636 62.8503 9.25179 63.7457 10.3564 63.7457H43.4844C44.589 63.7457 45.4844 62.8503 45.4844 61.7457V40.8585M8.35636 40.8585L25.5062 23.7087C26.2872 22.9276 27.5536 22.9276 28.3346 23.7087L45.4844 40.8585M8.35636 40.8585H7.59015C5.80834 40.8585 4.916 38.7042 6.17593 37.4443L25.5062 18.114C26.2872 17.333 27.5536 17.333 28.3346 18.114L47.6649 37.4443C48.9248 38.7042 48.0325 40.8585 46.2507 40.8585H45.4844" stroke="white" stroke-width="3"/>
+<rect x="17.9941" y="46.6816" width="5.64627" height="15.8183" stroke="white" stroke-width="3"/>
+<rect x="30.709" y="41.5956" width="5.64627" height="15.8183" stroke="white" stroke-width="3"/>
+<path d="M9.88281 33.2295V25.0574C9.88281 23.9528 10.7782 23.0574 11.8828 23.0574H20.5635" stroke="white" stroke-width="3"/>
+<path d="M99.3975 40.8585V61.7457C99.3975 62.8503 98.5021 63.7457 97.3975 63.7457H64.2695C63.1649 63.7457 62.2695 62.8503 62.2695 61.7457V40.8585M99.3975 40.8585L82.2477 23.7087C81.4667 22.9276 80.2003 22.9276 79.4193 23.7087L62.2695 40.8585M99.3975 40.8585H100.164C101.946 40.8585 102.838 38.7042 101.578 37.4443L82.2477 18.114C81.4667 17.333 80.2003 17.333 79.4193 18.114L60.089 37.4443C58.8291 38.7042 59.7214 40.8585 61.5033 40.8585H62.2695" stroke="white" stroke-width="3"/>
+<rect x="-1.5" y="1.5" width="5.64627" height="15.8183" transform="matrix(-1 0 0 1 88.2598 45.1816)" stroke="white" stroke-width="3"/>
+<rect x="-1.5" y="1.5" width="5.64627" height="15.8183" transform="matrix(-1 0 0 1 75.5449 40.0956)" stroke="white" stroke-width="3"/>
+<path d="M97.8711 33.2295V25.0574C97.8711 23.9528 96.9757 23.0574 95.8711 23.0574H87.1904" stroke="white" stroke-width="3"/>
+<path d="M2 63.7457H105.247" stroke="white" stroke-width="3" stroke-linecap="round"/>
+<path d="M39.8914 29.6692C37.4815 27.4717 35.2997 21.9467 39.3823 17.9911C39.9348 17.4558 40.4795 17.0675 41.0119 16.8002C42.9136 15.8453 47.4634 13.1814 47.3371 11.0572C47.1971 8.70262 47.2287 6.6942 47.5207 6.01915C49.5867 1.24228 56.1669 0.933063 58.7099 3.98478C61.7312 7.61035 55.9945 19.9547 58.7099 17.9911C65.0675 13.3941 69.8985 15.9369 69.3899 21.2773C69.1444 23.8556 66.7806 29.6852 66.0718 30.941" stroke="white" stroke-width="3" stroke-linecap="round"/>
+<path d="M53.1152 21.7859V30.8668M53.1152 30.8668V37.9843V63.2371M53.1152 30.8668L59.7271 24.4856" stroke="white" stroke-width="3" stroke-linecap="round"/>
+</svg>
--- a/src/assets/images/icons/floor.svg
+++ b/src/assets/images/icons/floor.svg
@@ -0,0 +1,3 @@
+<svg width="92" height="97" viewBox="0 0 92 97" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 70.7982V91C4 92.1046 4.89543 93 6 93H86C87.1046 93 88 92.1046 88 91V6C88 4.89543 87.1046 4 86 4H60.1936C59.089 4 58.1936 4.89543 58.1936 6V34.7895C58.1936 35.894 57.2981 36.7895 56.1936 36.7895H31.7419C30.6374 36.7895 29.7419 37.6849 29.7419 38.7895V66.7982C29.7419 67.9028 28.8465 68.7982 27.7419 68.7982H6C4.89543 68.7982 4 69.6937 4 70.7982Z" stroke="black" stroke-width="7"/>
+</svg>
--- a/src/assets/images/icons/house.svg
+++ b/src/assets/images/icons/house.svg
@@ -0,0 +1,7 @@
+<svg width="95" height="97" viewBox="0 0 95 97" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11 49.5V92.5C11 93.6046 11.8954 94.5 13 94.5H82C83.1046 94.5 84 93.6046 84 92.5V49.5M11 49.5L46.0858 14.4142C46.8668 13.6332 48.1332 13.6332 48.9142 14.4142L84 49.5M11 49.5H4.82843C3.04662 49.5 2.15428 47.3457 3.41421 46.0858L46.0858 3.41421C46.8668 2.63317 48.1332 2.63316 48.9142 3.41421L91.5858 46.0858C92.8457 47.3457 91.9534 49.5 90.1716 49.5H84" stroke="white" stroke-width="4"/>
+<rect x="29" y="60" width="13" height="33" stroke="white" stroke-width="4"/>
+<rect x="41" y="33" width="13" height="17" stroke="white" stroke-width="4"/>
+<rect x="56" y="60" width="13" height="17" stroke="white" stroke-width="4"/>
+<path d="M14 34.5V16.5C14 15.3954 14.8954 14.5 16 14.5H35" stroke="white" stroke-width="4"/>
+</svg>
--- a/src/assets/images/icons/inst.svg
+++ b/src/assets/images/icons/inst.svg
--- a/src/assets/images/icons/kitchen-area.svg
+++ b/src/assets/images/icons/kitchen-area.svg
@@ -0,0 +1,11 @@
+<svg width="118" height="93" viewBox="0 0 118 93" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="64.9897" y="2" width="50.0891" height="88.377" stroke="black" stroke-width="4"/>
+<rect x="3" y="48.1885" width="50.0891" height="42.1885" stroke="black" stroke-width="4"/>
+<rect x="15.7622" y="65.813" width="25.1717" height="24.5639" stroke="black" stroke-width="4"/>
+<line x1="62.9897" y1="29.603" x2="117.079" y2="29.603" stroke="black" stroke-width="4"/>
+<line x1="74.7139" y1="10.332" x2="74.7139" y2="21.8792" stroke="black" stroke-width="4"/>
+<path d="M72.7139 46.1885V72.6253" stroke="black" stroke-width="4" stroke-linecap="round"/>
+<path d="M14.978 57.1279H41.4149" stroke="black" stroke-width="4" stroke-linecap="round"/>
+<rect x="18.1934" y="2" width="20.3097" height="17.8788" stroke="black" stroke-width="4"/>
+<path d="M16.8673 20.6631L5.25439 32.8179H50.8351L39.2222 20.6631" stroke="black" stroke-width="4" stroke-linecap="round"/>
+</svg>
--- a/src/assets/images/icons/living-space.svg
+++ b/src/assets/images/icons/living-space.svg
@@ -0,0 +1,5 @@
+<svg width="100" height="98" viewBox="0 0 100 98" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M69.2591 56.5273L96.7037 33.1091V3H3V95H96.7037V69.24" stroke="black" stroke-width="6" stroke-linecap="round"/>
+<path d="M49.8521 3V40.0556" stroke="black" stroke-width="6" stroke-linecap="round"/>
+<path d="M3.85205 48.9995H40.9076" stroke="black" stroke-width="6" stroke-linecap="round"/>
+</svg>
--- a/src/assets/images/icons/new-buildings.svg
+++ b/src/assets/images/icons/new-buildings.svg
@@ -0,0 +1,18 @@
+<svg width="80" height="102" viewBox="0 0 80 102" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="2" y="2" width="48.2581" height="97.9847" rx="3" stroke="white" stroke-width="4"/>
+<rect x="-2" y="2" width="25.6774" height="64.7131" rx="3" transform="matrix(-1 0 0 1 76 33.2716)" stroke="white" stroke-width="4"/>
+<rect x="-2" y="2" width="10.1935" height="13.3591" rx="3" transform="matrix(-1 0 0 1 29.5488 84.6257)" stroke="white" stroke-width="4"/>
+<line x1="40.0645" y1="10.8495" x2="40.0645" y2="25.3154" stroke="white" stroke-width="4"/>
+<line x1="16.1934" y1="10.8495" x2="16.1934" y2="25.3154" stroke="white" stroke-width="4"/>
+<line x1="28.4512" y1="10.8495" x2="28.4512" y2="25.3154" stroke="white" stroke-width="4"/>
+<line x1="40.0645" y1="62.9267" x2="40.0645" y2="77.3926" stroke="white" stroke-width="4"/>
+<line x1="16.1934" y1="62.9267" x2="16.1934" y2="77.3926" stroke="white" stroke-width="4"/>
+<line x1="28.4512" y1="62.9267" x2="28.4512" y2="77.3926" stroke="white" stroke-width="4"/>
+<line x1="40.0645" y1="36.8882" x2="40.0645" y2="51.3542" stroke="white" stroke-width="4"/>
+<line x1="16.1934" y1="36.8882" x2="16.1934" y2="51.3542" stroke="white" stroke-width="4"/>
+<line x1="28.4512" y1="36.8882" x2="28.4512" y2="51.3542" stroke="white" stroke-width="4"/>
+<line x1="71.6777" y1="44.1212" x2="71.6777" y2="58.5871" stroke="white" stroke-width="4"/>
+<line x1="60.0645" y1="44.1212" x2="60.0645" y2="58.5871" stroke="white" stroke-width="4"/>
+<line x1="71.6777" y1="70.1595" x2="71.6777" y2="84.6255" stroke="white" stroke-width="4"/>
+<line x1="60.0645" y1="70.1595" x2="60.0645" y2="84.6255" stroke="white" stroke-width="4"/>
+</svg>
--- a/src/assets/images/icons/pencil.svg
+++ b/src/assets/images/icons/pencil.svg
@@ -0,0 +1,11 @@
+<svg width="199" height="199" viewBox="0 0 199 199" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="99.5" cy="99.5" r="99.5" fill="url(#paint0_linear_149_710)"/>
+<path d="M152.219 74.4039C152.223 73.7102 152.09 73.0224 151.827 72.3802C151.565 71.7379 151.178 71.1537 150.69 70.6612L128.337 48.3101C127.844 47.8215 127.26 47.435 126.618 47.1726C125.976 46.9103 125.288 46.7773 124.594 46.7813C123.9 46.7773 123.212 46.9103 122.57 47.1726C121.928 47.435 121.344 47.8215 120.851 48.3101L105.932 63.2284L48.3101 120.846C47.8215 121.338 47.4349 121.922 47.1725 122.565C46.9102 123.207 46.7772 123.895 46.7812 124.588V146.94C46.7812 148.338 47.3366 149.679 48.3253 150.667C49.314 151.656 50.6549 152.211 52.0531 152.211H74.4058C75.1435 152.251 75.8814 152.136 76.5716 151.872C77.2618 151.609 77.889 151.204 78.4124 150.682L135.718 93.065L150.69 78.4103C151.171 77.8994 151.563 77.3113 151.85 76.6707C151.9 76.2505 151.9 75.8257 151.85 75.4055C151.874 75.1601 151.874 74.9129 151.85 74.6675L152.219 74.4039ZM72.2444 141.668H57.325V126.75L109.675 74.4039L124.594 89.3222L72.2444 141.668ZM132.027 81.8894L117.108 66.9711L124.594 59.5383L139.461 74.4039L132.027 81.8894Z" fill="white"/>
+<defs>
+<linearGradient id="paint0_linear_149_710" x1="99.5" y1="0" x2="99.5" y2="199" gradientUnits="userSpaceOnUse">
+<stop stop-color="#17628C"/>
+<stop offset="0.0001" stop-color="#17628C" stop-opacity="0.838542"/>
+<stop offset="1" stop-color="#17628C" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>
--- a/src/assets/images/icons/telegram.svg
+++ b/src/assets/images/icons/telegram.svg
@@ -0,0 +1,3 @@
+<svg width="49" height="41" viewBox="0 0 49 41" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.1875 24.1667L29.4528 14.843C30.4693 14.2222 31.5248 15.5797 30.6727 16.4119L19.8125 27.0167L18.9172 36.089C18.8905 36.3599 18.9856 36.6288 19.1769 36.8225C19.5292 37.1796 20.1031 37.1869 20.4644 36.8391L25.7824 31.7196C25.9446 31.5635 26.1953 31.5456 26.378 31.6772L36.5564 39.0056C37.3682 39.5901 38.4735 39.5474 39.2378 38.902C39.6102 38.5875 39.8665 38.1574 39.9658 37.6803L46.7983 4.86882C46.9274 4.24862 46.8043 3.60251 46.4561 3.07327C46.0154 2.40333 45.2672 2 44.4653 2H44.3628C44.0405 2 43.721 2.06055 43.4211 2.1785L2.58128 18.2381C2.23059 18.376 2 18.7144 2 19.0913C2 19.4767 2.24113 19.821 2.60338 19.9528L14.1875 24.1667Z" stroke="white" stroke-width="3"/>
+</svg>
--- a/src/assets/images/icons/total-area.svg
+++ b/src/assets/images/icons/total-area.svg
@@ -0,0 +1,4 @@
+<svg width="90" height="89" viewBox="0 0 90 89" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="3" y="3" width="84" height="83" stroke="black" stroke-width="6"/>
+<path d="M18 15C16.3431 15 15 16.3431 15 18L15 45C15 46.6569 16.3431 48 18 48C19.6569 48 21 46.6569 21 45L21 21L45 21C46.6569 21 48 19.6569 48 18C48 16.3431 46.6569 15 45 15L18 15ZM71 74C72.6569 74 74 72.6569 74 71L74 44C74 42.3431 72.6569 41 71 41C69.3431 41 68 42.3431 68 44L68 68L44 68C42.3431 68 41 69.3431 41 71C41 72.6569 42.3431 74 44 74L71 74ZM15.8787 20.1213L68.8787 73.1213L73.1213 68.8787L20.1213 15.8787L15.8787 20.1213Z" fill="black"/>
+</svg>
--- a/src/assets/images/icons/vk.svg
+++ b/src/assets/images/icons/vk.svg
--- a/src/assets/images/icons/white-arrow-left.svg
+++ b/src/assets/images/icons/white-arrow-left.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="22" viewBox="0 0 14 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 20L3.55976 13.6698C1.77988 12.3349 1.77988 9.66509 3.55976 8.33018L12 2" stroke="white" stroke-width="3" stroke-linecap="round"/>
+</svg>
--- a/src/assets/images/icons/white-arrow-right.svg
+++ b/src/assets/images/icons/white-arrow-right.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="22" viewBox="0 0 14 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 2L10.4402 8.33018C12.2201 9.66509 12.2201 12.3349 10.4402 13.6698L2 20" stroke="white" stroke-width="3" stroke-linecap="round"/>
+</svg>
--- a/src/assets/images/icons/year-of-construction.svg
+++ b/src/assets/images/icons/year-of-construction.svg
@@ -0,0 +1,18 @@
+<svg width="131" height="95" viewBox="0 0 131 95" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="3" y="3" width="79.5726" height="89" stroke="black" stroke-width="6"/>
+<rect x="-3" y="3" width="42.5968" height="58.0071" transform="matrix(-1 0 0 1 125 30.9927)" stroke="black" stroke-width="6"/>
+<rect x="-3" y="3" width="17.2419" height="10.1702" transform="matrix(-1 0 0 1 48.9355 78.8296)" stroke="black" stroke-width="6"/>
+<line x1="65.3306" y1="10.1064" x2="65.3306" y2="23.5816" stroke="black" stroke-width="6"/>
+<line x1="26.2417" y1="10.1064" x2="26.2417" y2="23.5816" stroke="black" stroke-width="6"/>
+<line x1="46.3145" y1="10.1064" x2="46.3145" y2="23.5816" stroke="black" stroke-width="6"/>
+<line x1="65.3306" y1="58.6172" x2="65.3306" y2="72.0924" stroke="black" stroke-width="6"/>
+<line x1="26.2417" y1="58.6172" x2="26.2417" y2="72.0924" stroke="black" stroke-width="6"/>
+<line x1="46.3145" y1="58.6172" x2="46.3145" y2="72.0924" stroke="black" stroke-width="6"/>
+<line x1="65.3306" y1="34.3618" x2="65.3306" y2="47.837" stroke="black" stroke-width="6"/>
+<line x1="26.2417" y1="34.3618" x2="26.2417" y2="47.837" stroke="black" stroke-width="6"/>
+<line x1="46.3145" y1="34.3618" x2="46.3145" y2="47.837" stroke="black" stroke-width="6"/>
+<line x1="117.097" y1="41.0991" x2="117.097" y2="54.5743" stroke="black" stroke-width="6"/>
+<line x1="98.0806" y1="41.0991" x2="98.0806" y2="54.5743" stroke="black" stroke-width="6"/>
+<line x1="117.097" y1="65.3545" x2="117.097" y2="78.8297" stroke="black" stroke-width="6"/>
+<line x1="98.0806" y1="65.3545" x2="98.0806" y2="78.8297" stroke="black" stroke-width="6"/>
+</svg>
--- a/src/assets/images/lawyer/Diplom.jpg
+++ b/src/assets/images/lawyer/Diplom.jpg
--- a/src/assets/images/lawyer/Mask-group.svg
+++ b/src/assets/images/lawyer/Mask-group.svg
--- a/src/assets/images/lawyer/Sertifikat_Sootsvetstvia.jpg
+++ b/src/assets/images/lawyer/Sertifikat_Sootsvetstvia.jpg
--- a/src/assets/images/lawyer/Svidetelstvo.jpg
+++ b/src/assets/images/lawyer/Svidetelstvo.jpg
--- a/src/assets/images/lawyer/photo.jpg
+++ b/src/assets/images/lawyer/photo.jpg
--- a/src/assets/images/lawyer/sberbank-1.jpg
+++ b/src/assets/images/lawyer/sberbank-1.jpg
--- a/src/assets/images/logo/AlvaMid-Logo-Small.svg
+++ b/src/assets/images/logo/AlvaMid-Logo-Small.svg
--- a/src/assets/images/logo/blue-logo.svg
+++ b/src/assets/images/logo/blue-logo.svg
--- a/src/assets/images/logo/logo-png.png
+++ b/src/assets/images/logo/logo-png.png
--- a/src/assets/images/logo/logo.svg
+++ b/src/assets/images/logo/logo.svg
--- a/src/assets/images/logo/textLogo.svg
+++ b/src/assets/images/logo/textLogo.svg
--- a/src/components/Footer/Footer.jsx
+++ b/src/components/Footer/Footer.jsx
@@ -0,0 +1,38 @@
+import './Footer.scss';
+import { Link, useNavigate } from 'react-router-dom';
+
+function Footer() {
+    const navigate = useNavigate();
+
+    const handleClick = () => {
+        window.scrollTo({
+            top: 0,
+            behavior: 'smooth'
+        });
+    };
+
+    const handlePageChange = (path) => {
+        handleClick();
+        navigate(path);
+    };
+
+    return (
+        <footer className="footer">
+            <Link to="/" className="footer__logo font-inter-regular"
+                onClick={() => handlePageChange('/')}>OOO "ALMA-VID"</Link>
+            <div className="footer-info font-inter-bold">
+                <Link to="/objects" onClick={() => handlePageChange('/objects')}>Объекты</Link>
+                <Link to="/services" onClick={() => handlePageChange('/services')}>Услуги</Link>
+                <Link to="/about" onClick={() => handlePageChange('/about')}>О компании</Link>
+                <Link to="/office" onClick={() => handlePageChange('/office')}>Контакты</Link>
+            </div>
+            <div className="footer-socials">
+                <a className="footer-socials__tg" href="#"></a>
+                <a className="footer-socials__inst" href="#"></a>
+                <a className="footer-socials__vk" href="#"></a>
+            </div>
+        </footer>
+    );
+}
+
+export { Footer };
--- a/src/components/Footer/Footer.scss
+++ b/src/components/Footer/Footer.scss
@@ -0,0 +1,126 @@
+@import '../../styles/vars.scss';
+
+a {
+    color: white;
+    text-decoration: none;
+}
+
+.footer {
+    display: flex;
+    align-items: center;
+    // column-gap: 96px;
+    justify-content: space-between;
+    padding: 70px 168px;
+    background: rgba(23, 98, 140, 1);
+    color: white;
+
+    @media (max-width: 1160px) {
+        display: grid;
+        justify-content: center;
+        grid-template-rows: repeat(2, 1fr);
+        column-gap: 46px;
+        padding: 60px 100px;
+    }
+
+    @media (max-width: $laptopWidth) {
+        padding: 45px 100px;
+        column-gap: 26px;
+    }
+
+    @media (max-width: $tabletWidth) {
+        padding: 45px 0px;
+    }
+
+    @media (max-width: 550px) {
+        padding: 30px 0px;
+    }
+}
+
+.footer a:hover {
+    text-decoration: underline;
+}
+
+.footer__logo {
+    font-size: 20px;
+
+    @media (min-width:1800px) {
+        font-size: 24px;
+    }
+}
+
+.footer__logo:hover {
+    text-decoration: none !important;
+}
+
+.footer-info {
+    display: flex;
+    column-gap: 46px;
+    font-size: 17px;
+    line-height: 29px;
+
+    @media (min-width:1800px) {
+        font-size: 21px;
+    }
+
+    @media (max-width: 1160px) {
+        grid-row: 2;
+    }
+
+    @media (max-width: 1024px) {
+        column-gap: 26px;
+    }
+
+    @media (max-width: 550px) {
+        font-size: 15px;
+        column-gap: 16px;
+    }
+}
+
+.footer-socials {
+    display: flex;
+    align-items: center;
+
+    @media (max-width: 1160px) {
+        grid-row: 2;
+    }
+
+    @media (max-width: 550px) {
+        grid-row: 3;
+    }
+}
+
+.footer-socials__tg {
+    background-image: url(../../assets/images/icons/telegram.svg);
+    width: 22.5px;
+    height: 19px;
+    background-size: cover;
+
+    @media (min-width:1800px) {
+        width: 28.5px;
+        height: 24px;
+    }
+}
+
+.footer-socials__inst {
+    background-image: url(../../assets/images/icons/inst.svg);
+    width: 42px;
+    height: 24px;
+    background-size: cover;
+
+    @media (min-width:1800px) {
+        width: 47px;
+        height: 27px;
+    }
+}
+
+.footer-socials__vk {
+    background-image: url(../../assets/images/icons/vk.svg);
+    width: 32.5px;
+    height: 34px;
+    background-size: cover;
+
+    @media (min-width:1800px) {
+        width: 35.5px;
+        height: 37px;
+    }
+}
--- a/src/components/Form/Form.jsx
+++ b/src/components/Form/Form.jsx
@@ -0,0 +1,89 @@
+import React, { useState, useEffect } from 'react';
+
+import './Form.scss';
+import PencilIcon from '../../assets/images/icons/pencil.svg';
+
+function Form({ scrolledThreshold }) {
+    const [name, setName] = useState('');
+    const [phone, setPhone] = useState('');
+    const [isVisible, setVisible] = useState(false);
+
+    const checkVisible = () => {
+        const scrolled = document.documentElement.scrollTop;
+        if (scrolled > scrolledThreshold){  // вы можете настроить это значение
+            if(!isVisible) setVisible(true);
+        } else{
+            if(isVisible) setVisible(false);
+        }
+    };
+
+    useEffect(() => {
+        window.addEventListener('scroll', checkVisible);
+        return () => window.removeEventListener('scroll', checkVisible);
+    });
+
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        // в этой функции можно добавить логику для отправки формы на сервер
+        console.log(`${name}, ваш номер телефона: ${phone}`);
+        setName('');
+        setPhone('');
+    };
+
+    function scrollToTop() {
+        window.scrollTo({
+            top: 0,
+            behavior: 'smooth'
+        });
+    }
+
+    return (
+        <section className="consultation-form font-inter-regular">
+            <div className="consultation-form__info form-info">
+                <h2 className="form-info__title font-inter-bold">
+                    Решили купить или продать квартиру?
+                    <span>Закажите бесплатную консультацию</span>
+                </h2>
+                <form onSubmit={handleSubmit}>
+                    <p className="form__title">Заполните форму ниже</p>
+                    <p>Мы позвоним вам в ближайшее время</p>
+                    <div>
+                        <input
+                            className="font-inter-regular"
+                            type="text"
+                            value={name}
+                            placeholder="Ваше имя"
+                            onChange={(e) => setName(e.target.value)}
+                        />
+                        <input
+                            className="font-inter-regular"
+                            type="tel"
+                            value={phone}
+                            placeholder="+7(800)555-35-35"
+                            onChange={(e) => setPhone(e.target.value)}
+                        />
+                        <button
+                            className="form-btn font-inter-regular"
+                            type="submit"
+                        >
+                            Записаться на консультацию
+                        </button>
+                    </div>
+                    <p>
+                        Заполняя форму, вы соглашаетесь с политикой
+                        конфиденциальности
+                    </p>
+                </form>
+                <div className="que-form">
+                    <div className={`arrow ${isVisible ? 'arrow__visible' : ''}`} onClick={scrollToTop}></div>
+                    <p className="font-inter-bold">
+                        У вас остались вопросы? <span>Напишите нам, мы онлайн!</span>
+                    </p>
+                    <img className="que__img" src={PencilIcon} alt="pencil" />
+                </div>
+            </div>
+        </section>
+    );
+}
+
+export { Form };
--- a/src/components/Form/Form.scss
+++ b/src/components/Form/Form.scss
@@ -0,0 +1,237 @@
+@import '../../styles/vars.scss';
+
+.consultation-form {
+    background: linear-gradient(270deg, #6ECBFF 0%, #FFFFFF 147.13%);
+}
+
+.consultation-form__info {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    // justify-content: center;
+}
+
+.form-info__title {
+    display: block;
+    text-transform: uppercase;
+    // font-size: 25px;
+    margin: 80px 0;
+    line-height: 41px;
+    color: rgba(0, 0, 0, 1);
+}
+
+.form-info__title>span {
+    display: block;
+}
+
+form {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 43px;
+    border-radius: 30px;
+    background-color: white;
+}
+
+form div {
+    display: flex;
+    margin: 45px 0;
+    column-gap: 43px;
+}
+
+form input,
+.form-btn {
+    text-align: center;
+    width: 280px;
+    height: 56.5px;
+    border-radius: 24px;
+    border: 0;
+    font-size: 17.5px;
+    background-color: rgba(186, 230, 255, 1);
+}
+
+.form-btn {
+    cursor: pointer;
+    background: linear-gradient(90deg, #6ECBFF 0%, #FFFFFF 147.13%);
+
+}
+
+.form-btn:hover {
+    background: linear-gradient(90deg, #25afff 0%, #FFFFFF 147.13%);
+}
+
+form p:nth-child(2) {
+    margin: 0;
+    line-height: 24.5px;
+    font-size: 15px;
+    text-transform: uppercase;
+}
+
+form p:last-child {
+    margin: 0;
+    font-size: 10px;
+}
+
+.form__title {
+    margin: 0;
+    font-size: 36px;
+    line-height: 60px;
+    text-transform: uppercase;
+}
+
+.que-form {
+    position: relative;
+    display: flex;
+    align-items: center;
+    column-gap: 43px;
+    margin: 60px 0;
+}
+
+.que-form p {
+    font-size: 20px;
+}
+
+.que__img {
+    width: 75px;
+    height: 75px;
+    cursor: pointer;
+}
+
+.arrow {
+    position: absolute;
+    right: 144%;
+    background-image: url(../../assets/images/icons/arrow.svg);
+    background-size: cover;
+    width: 50px;
+    height: 50px;
+    cursor: pointer;
+    opacity: 0;
+    transition: opacity 0.6s ease-in-out;
+}
+
+.arrow__visible {
+    opacity: 1;
+}
+
+@media (min-width: 1800px) {
+    form {
+        padding: 53px;
+    }
+
+    form p:nth-child(2) {
+        margin: 19px 0;
+        line-height: 24.5px;
+        font-size: 18px;
+    }
+
+    .que-form p {
+        font-size: 24px;
+    }
+
+    .form-info__title {
+        font-size: 28px;
+    }
+
+    .form__title {
+        font-size: 40px;
+    }
+
+    form p:last-child {
+        font-size: 14px;
+    }
+
+    form input,
+    .form-btn {
+        width: 360px;
+        height: 66.5px;
+        font-size: 21.5px;
+        border-radius: 30px;
+    }
+
+    .que__img {
+        width: 95px;
+        height: 95px;
+    }
+
+    .arrow {
+        width: 70px;
+        height: 70px;
+    }
+}
+
+@media (max-width:1335px) {
+    .arrow__visible {
+        display: none;
+    }
+}
+
+@media (max-width:$laptopWidth) {
+    form div {
+        flex-direction: column;
+        row-gap: 22px;
+    }
+}
+
+@media (max-width:$tabletWidth) {
+
+    .que-form {
+        margin: 30px 0;
+    }
+
+    .que-form p {
+        font-size: 1.5em;
+        line-height: 31px;
+    }
+
+    .que-form>p span {
+        display: block;
+    }
+
+    .form-info__title {
+        margin: 50px 0;
+    }
+
+    .form__title {
+        font-size: 32px;
+    }
+}
+
+@media (max-width:600px) {
+
+    .form__title {
+        font-size: 26px;
+    }
+
+    .form-info__title {
+        margin: 40px 0;
+        font-size: 20px;
+    }
+
+}
+
+@media (max-width:$mobileWidth) {
+    .form-info__title {
+        font-size: 15px;
+        line-height: 31px;
+    }
+
+    .que-form p {
+        font-size: 16px;
+    }
+
+    .form__title {
+        font-size: 24px;
+    }
+
+    form p:nth-child(2) {
+        font-size: 13px;
+    }
+
+    form {
+        padding: 12px;
+    }
+
+    form p:last-child {
+        text-align: center;
+    }
+}
--- a/src/components/Gallery/Gallery.jsx
+++ b/src/components/Gallery/Gallery.jsx
@@ -0,0 +1,48 @@
+import 'react-image-gallery/styles/scss/image-gallery.scss';
+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';
+
+function Gallery() {
+    const images = [
+        {
+            original: objectPicOne,
+            thumbnail: objectPicOne
+        },
+        {
+            original: objectPicTwo,
+            thumbnail: objectPicTwo
+        },
+        {
+            original: objectPicThree,
+            thumbnail: objectPicThree
+        },
+        {
+            original: objectPicFour,
+            thumbnail: objectPicFour
+        },
+        {
+            original: objectPicFive,
+            thumbnail: objectPicFive
+        }
+    ];
+
+    return (
+        <div className="custom-gallery">
+            <ImageGallery
+                items={images}
+                showPlayButton={false}
+                showFullscreenButton={false}
+                slideInterval={1000}
+                slideOnThumbnailOver={false}
+                showIndex={true}
+            />
+        </div>
+    );
+}
+export { Gallery} ;
--- a/src/components/Gallery/Gallery.scss
+++ b/src/components/Gallery/Gallery.scss
@@ -0,0 +1,80 @@
+@import '../../styles/vars.scss';
+
+.image-gallery-icon {
+    display: none;
+}
+
+.custom-gallery {
+    align-self: flex-start;
+
+    .image-gallery-image {
+        width: 762px;
+        height: 508px;
+        object-fit: cover;
+
+        @media (min-width: 1800px) {
+            width: 862px;
+            height: 608px;
+        }
+
+        @media (max-width:1460px) {
+            width: 962px;
+            height: 708px;
+        }
+
+        @media (max-width:$laptopWidth) {
+            width: 762px;
+            height: 508px;
+        }
+
+        @media (max-width:$tabletWidth) {
+            width: 562px;
+            height: 408px;
+        }
+
+        @media (max-width:630px) {
+            width: 362px;
+            height: 308px;
+        }
+
+        @media (max-width: 420px) {
+            width: 340px;
+        }
+    }
+}
+
+.image-gallery-index {
+    z-index: 0;
+}
+
+.image-gallery-thumbnails-container {
+    display: flex;
+    width: 662px;
+    justify-content: space-between;
+
+    @media (max-width:$tabletWidth) {
+        width: 562px;
+    }
+
+    @media (max-width:630px) {
+        width: 362px;
+    }
+
+    @media (max-width: 420px) {
+        width: 340px;
+    }
+}
+
+.image-gallery-thumbnail {
+    width: 300px;
+}
+
+.image-gallery-thumbnail .image-gallery-thumbnail-image {
+    height: 131px;
+    width: 181px;
+
+    @media (min-width: 1800px) {
+        height: 141px;
+        width: 207px;
+    }
+}
--- a/src/components/Header/Header.jsx
+++ b/src/components/Header/Header.jsx
@@ -0,0 +1,86 @@
+import './Header.scss';
+import React, { useState } from 'react';
+import { Link, useLocation } from 'react-router-dom';
+
+function Header() {
+    const [isOpen, setIsOpen] = useState(false);
+
+    const handleToggle = () => {
+        setIsOpen(!isOpen);
+    };
+
+    const location = useLocation();
+    const isGradientBackground = location.pathname === '/apartament';
+    const isHomePage = location.pathname === '/';
+    return (
+        <header className={`header font-inter-bold ${isGradientBackground ? 'header_gradient' : ''}`}>
+            <Link className="header__logo" to="/"></Link>
+            {isHomePage && <div className="header__text"></div>}
+            <div className="burgerMenu">
+                <a href="tel:+73512170074" className="header-info__call">8(351)217-00-74</a>
+                <div className="burger-item">
+                    <input id="toggle" type="checkbox" checked={isOpen} onChange={handleToggle}></input>
+                    <label for="toggle" className={`hamburger ${isOpen ? 'open' : ''}`}>
+                        <div class="top-bun"></div>
+                        <div class="meat"></div>
+                        <div class="bottom-bun"></div>
+                    </label>
+                    <div class="nav">
+                        <div class="nav-wrapper">
+                            <nav className="nav-container">
+                                <Link to="/objects" className="header__link">
+                    Объекты
+                                </Link>
+                                <Link to="/services" className="header__link">
+                    Услуги
+                                </Link>
+                                <Link to="/about" className="header__link">
+                    О компании
+                                </Link>
+                                <Link to="/office" className="header__link" href="#">
+                    Наш офис
+                                </Link>
+                                <p>Челябинск</p>
+                                <div className="header-socials__links">
+                                    <a className="header-socials__tg" href="#"></a>
+                                    <a className="header-socials__inst" href="#"></a>
+                                    <a className="header-socials__vk" href="#"></a>
+                                </div>
+                            </nav>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <nav className="header__nav">
+                <Link to="/objects" className="header__link">
+                    Объекты
+                </Link>
+                <Link to="/services" className="header__link">
+                    Услуги
+                </Link>
+                <Link to="/about" className="header__link">
+                    О компании
+                </Link>
+                <Link to="/office" className="header__link" href="#">
+                    Наш офис
+                </Link>
+            </nav>
+            <div className="header-info">
+                <a href="tel:+73512170074" className="header-info__call">8(351)217-00-74</a>
+                <button className="header-info__btn" type="button">
+                    Обратный звонок
+                </button>
+            </div>
+            <div className="header-socials">
+                <span className="header-socials__location">Челябинск</span>
+                <div className="header-socials__links">
+                    <a className="header-socials__tg" href="#"></a>
+                    <a className="header-socials__inst" href="#"></a>
+                    <a className="header-socials__vk" href="#"></a>
+                </div>
+            </div>
+        </header>
+    );
+}
+
+export { Header };
--- a/src/components/Header/Header.scss
+++ b/src/components/Header/Header.scss
@@ -0,0 +1,388 @@
+@import '../../styles/vars.scss';
+
+a {
+    color: white;
+    text-decoration: none;
+}
+
+.header {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: repeat(2, 1fr);
+    padding: 45px;
+    color: white;
+}
+
+.header a:hover {
+    text-decoration: underline;
+}
+
+.header_gradient {
+    background: linear-gradient(180deg, #061A25 0%, rgba(18, 114, 170, 0.7) 150%);
+}
+
+.header__logo {
+    grid-row: 1/3;
+    background-image: url('../../assets/images/logo/logo-png.png');
+    width: 302px;
+    height: 69px;
+    background-size: cover;
+}
+
+.header__nav {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    column-gap: 47px;
+    font-size: 17px;
+    line-height: 29px;
+}
+
+.header-info {
+    display: flex;
+    grid-column: 3/3;
+    align-items: center;
+    justify-self: end;
+    column-gap: 23.5px;
+}
+
+.header-info__btn {
+    height: 38px;
+    width: 150px;
+    font-weight: 700;
+    font-size: 15px;
+    color: black;
+    background-color: rgb(255, 255, 255, 0.8);
+    border-radius: 16px;
+    border: none;
+    cursor: pointer;
+}
+
+.header-info__btn:hover {
+    background-color: rgb(255, 255, 255, 0.9);
+}
+
+.header-socials {
+    grid-row: 2/2;
+    grid-column: 3/3;
+    display: flex;
+    align-items: center;
+    column-gap: 47px;
+    justify-self: end;
+    margin-right: 29px;
+    margin-top: 10px;
+}
+
+.header-socials__links {
+    display: flex;
+    align-items: center;
+}
+
+.header-socials__tg {
+    background-image: url(../../assets/images/icons/telegram.svg);
+    width: 22.5px;
+    height: 19px;
+    background-size: cover;
+}
+
+// ширину и высоту увеличили на 1px
+.header-socials__inst {
+    background-image: url(../../assets/images/icons/inst.svg);
+    width: 42px;
+    height: 24px;
+    background-size: cover;
+}
+
+// ширину уменьшили на 1px
+.header-socials__vk {
+    background-image: url(../../assets/images/icons/vk.svg);
+    width: 32.5px;
+    height: 34px;
+    background-size: cover;
+}
+
+@media (min-width:1800px) {
+    .header__logo {
+        width: 372px;
+        height: 85px;
+    }
+
+    .header__nav,
+    .header-info__call,
+    .header-info__btn,
+    .header-socials__location {
+        font-size: 21px;
+    }
+
+    .header-info__btn {
+        width: 210px;
+    }
+
+    .header-socials__tg {
+        width: 28.5px;
+        height: 24px;
+    }
+
+    .header-socials__inst {
+        width: 47px;
+        height: 27px;
+    }
+
+    .header-socials__vk {
+        width: 35.5px;
+        height: 37px;
+    }
+}
+
+@media (max-width: 1480px) {
+    .header__nav {
+        column-gap: 31px;
+        font-size: 16px;
+    }
+}
+
+@media (max-width: $desktopWidth) {
+
+    .header {
+        padding: 36px;
+    }
+
+    .header__logo {
+        width: 270px;
+        height: 62px;
+    }
+
+    .header-info,
+    .header-info__btn {
+        font-size: 14px;
+    }
+
+    .header-info__btn {
+        height: 35px;
+        width: 137px;
+    }
+
+    .header__nav {
+        column-gap: 17px;
+        font-size: 14px;
+    }
+
+    .header-socials {
+        font-size: 14px;
+    }
+}
+
+@media (max-width: $laptopWidth) {
+    .header {
+        grid-template-columns: auto;
+        padding: 18px;
+    }
+
+    .header__nav {
+        column-gap: 14px;
+        font-size: 11px;
+    }
+
+    .header__logo {
+        width: 200px;
+        height: 46px;
+    }
+
+    .header-info {
+        font-size: 11px;
+    }
+
+    .header-info__btn {
+        font-size: 13px;
+    }
+
+    .header-socials {
+        margin-top: 5px;
+        font-size: 11px;
+    }
+}
+
+h1 {
+    text-align: center;
+    letter-spacing: 1px;
+    word-spacing: 0.15em;
+    font-size: 3em;
+    line-height: 1.2;
+    transform: translateY(52%);
+}
+
+
+#toggle {
+    display: none;
+}
+
+/**
+    Hamburger
+  **/
+.hamburger {
+    position: absolute;
+    top: 4em;
+    right: 7%;
+    margin-left: -2em;
+    margin-top: -45px;
+    width: 2em;
+    height: 45px;
+    z-index: 5;
+}
+
+.open {
+    position: fixed;
+}
+
+.hamburger div {
+    position: relative;
+    width: 3.1em;
+    height: 5px;
+    border-radius: 3px;
+    background-color: white;
+    margin-top: 8px;
+    transition: all 0.3s ease-in-out;
+}
+
+/**
+Nav Styles
+  **/
+.nav {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    background-color: #17628C;
+    top: -100%;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    overflow: hidden;
+    transition: all 0.3s ease-in-out;
+    transform: scale(0);
+    z-index: 1;
+}
+
+.nav-wrapper {
+    position: relative;
+    overflow: hidden;
+    overflow-y: auto;
+    height: 100%;
+}
+
+.nav-container {
+    display: flex;
+    flex-direction: column;
+    text-align: left;
+    margin-left: 25%;
+    margin-top: 15%;
+}
+
+.nav-container a,
+.nav-container p {
+    position: relative;
+    text-decoration: none;
+    color: white;
+    font-size: 2em;
+    display: inline-block;
+    margin-top: 1.25em;
+    margin-bottom: 0;
+    transition: color 0.2s ease-in-out;
+    letter-spacing: 1px;
+}
+
+.nav-container a:hover {
+    text-decoration: none;
+}
+
+.nav-container .header__link:before {
+    content: '';
+    height: 0;
+    position: absolute;
+    width: 0.25em;
+    background-color: white;
+    left: -0.5em;
+    transition: all 0.2s ease-in-out;
+}
+
+.nav-container a:hover {
+    color: white;
+}
+
+.nav-container a:hover:before {
+    height: 100%;
+}
+
+/**
+Animations
+  **/
+#toggle:checked+.hamburger .top-bun {
+    transform: rotate(-45deg);
+    margin-top: 25px;
+}
+
+#toggle:checked+.hamburger .bottom-bun {
+    opacity: 0;
+    transform: rotate(45deg);
+}
+
+#toggle:checked+.hamburger .meat {
+    transform: rotate(45deg);
+    margin-top: -7px;
+}
+
+#toggle:checked+.hamburger+.nav {
+    top: 0;
+    transform: scale(1);
+}
+
+@media (min-width: 769px) {
+    .burgerMenu {
+        display: none;
+    }
+
+    .header__text {
+        display: none;
+    }
+}
+
+@media (max-width: $tabletWidth) {
+    .header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    .burgerMenu {
+        display: flex;
+        justify-content: flex-end;
+    }
+
+    .header-info__call {
+        margin-right: 100px;
+    }
+
+    .header__logo {
+        // grid-row: 1/3;
+        background-image: url('../../assets/images/logo/AlvaMid-Logo-Small.svg');
+        width: 50px;
+        height: 50px;
+    }
+
+    .header__nav,
+    .header-info,
+    .header-socials {
+        display: none;
+    }
+
+    .header__text {
+        position: absolute;
+        background-image: url('../../assets/images/logo/textLogo.svg');
+        top: 40%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 300px;
+        height: 113px;
+        background-size: contain;
+        background-repeat: no-repeat;
+    }
+}
--- a/src/components/Object/Object.jsx
+++ b/src/components/Object/Object.jsx
@@ -0,0 +1,16 @@
+import './Object.scss';
+
+function Object(props) {
+    return (
+        <div className="item">
+            <img className="item__image" src={props.image} alt="квартира" />
+            <div className="item__info font-inter-bold">
+                <p className="item__price">{props.price}</p>
+                <p className="item__desc">{props.desc}</p>
+                <p className="item__address font-inter-regular">{props.address}</p>
+            </div>
+        </div>
+    );
+}
+
+export { Object };
--- a/src/components/Object/Object.scss
+++ b/src/components/Object/Object.scss
@@ -0,0 +1,109 @@
+@import '../../styles/vars.scss';
+
+.item__info p {
+    margin: 0 0 12px 0;
+}
+
+.item {
+    display: flex;
+    flex-direction: column;
+    // width: 381px;
+    // height: 381px;
+    margin: 0 20px;
+    border-radius: 15px;
+    background-color: white;
+
+    @media (max-width: 1300px) {
+        height: 381px;
+    }
+
+    @media (max-width: 1200px) {
+        height: 361px;
+    }
+
+    @media (max-width: 1100px) {
+        height: 341px;
+    }
+
+    @media (max-width: $laptopWidth) {
+        height: 321px;
+        margin: 0 15px;
+    }
+
+    @media (max-width: $tabletWidth) {
+        height: 505px;
+    }
+
+    @media (max-width: 740px) {
+        height: 473px;
+    }
+
+    @media (max-width: 690px) {
+        height: 435px;
+    }
+
+    @media (max-width: 635px) {
+        height: 400px;
+    }
+
+    @media (max-width: 570px) {
+        height: 361px;
+    }
+
+    @media (max-width: $mobileWidth) {
+        height: 381px;
+    }
+
+    @media (max-width: 420px) {
+        height: 361px;
+    }
+}
+
+.item__image:hover {
+    text-decoration: none;
+}
+
+.item__image {
+    border-top-right-radius: 15px;
+    border-top-left-radius: 15px;
+}
+
+.item__info {
+    margin: 25px 0 13px 25px;
+}
+
+.item__price {
+    font-size: 25px;
+
+    @media (min-width: 1800px) {
+        font-size: 29px;
+    }
+
+    @media (min-width: 768.98px) and (max-width: $laptopWidth) {
+        font-size: 23px;
+    }
+}
+
+.item__desc {
+    font-size: 20px;
+
+    @media (min-width: 1800px) {
+        font-size: 24px;
+    }
+
+    @media (min-width: 768.98px) and (max-width: $laptopWidth) {
+        font-size: 18px;
+    }
+}
+
+.item__address {
+    font-size: 17px;
+
+    @media (min-width: 1800px) {
+        font-size: 21px;
+    }
+
+    @media (min-width: 768.98px) and (max-width: $laptopWidth) {
+        font-size: 16px;
+    }
+}
--- a/src/components/Sliders/Slider.jsx
+++ b/src/components/Sliders/Slider.jsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import Slider from 'react-slick';
+
+import 'slick-carousel/slick/slick.css';
+import 'slick-carousel/slick/slick-theme.css';
+import './Slider.scss';
+import certificateSber from '../../assets/images/lawyer/sberbank-1.jpg';
+import certificateSootsvet from '../../assets/images/lawyer/Sertifikat_Sootsvetstvia.jpg';
+import svidetelstvo from '../../assets/images/lawyer/Svidetelstvo.jpg';
+import diplom from '../../assets/images/lawyer/Diplom.jpg';
+
+const NextArrow = ({ onClick }) => {
+    return (
+        <div className="slider__arrow slider__arrow_next" onClick={onClick}></div>
+    );
+};
+
+const PrevArrow = ({ onClick }) => {
+    return (
+        <div className="slider__arrow slider__arrow_prev" onClick={onClick}></div>
+    );
+};
+
+const SliderComponent = () => {
+    const settings = {
+        dots: false,
+        infinite: true,
+        speed: 500,
+        slidesToShow: 1,
+        slidesToScroll: 1,
+        arrows: true,
+        nextArrow: <NextArrow />,
+        prevArrow: <PrevArrow />,
+    };
+
+    return (
+        <div className="slider">
+            <Slider {...settings}>
+                <div>
+                    <img className="slider__certificate" src={certificateSber} alt="сертификат" />
+                </div>
+                <div>
+                    <img className="slider__certificate_soot" src={certificateSootsvet} alt="сертификат соответствия" />
+                </div>
+                <div>
+                    <img className="slider__svidetelstvo" src={svidetelstvo} alt="свидетельство" />
+                </div>
+                <div>
+                    <img className="slider__diplom" src={diplom} alt="диплом" />
+                </div>
+            </Slider>
+        </div>
+    );
+};
+
+export { SliderComponent };
--- a/src/components/Sliders/Slider.scss
+++ b/src/components/Sliders/Slider.scss
@@ -0,0 +1,180 @@
+@import '../../styles/vars.scss';
+
+.slider {
+    padding: 115px 256px;
+    background: linear-gradient(90deg, #17628C 0%, #FFFFFF 147.13%);
+
+    @media (max-width: 1440px) {
+        padding: 57px 128px;
+    }
+
+    @media (max-width: 1110px) {
+        padding: 57px 127px;
+    }
+
+    @media (max-width: $laptopWidth) {
+        padding: 10px 127px;
+    }
+
+    // @media (max-width: $tabletWidth) {
+    //     background: linear-gradient(180deg, #17628C -50%, #FFFFFF 160.13%);
+    // }
+
+    @media (max-width: 668px) {
+        padding: 10px 52px;
+    }
+}
+
+.slider img {
+    margin: auto;
+}
+
+.slider__certificate {
+    width: 926px;
+    height: 655px;
+
+    @media (max-width: 1240px) {
+        width: 100%;
+        height: 100%;
+    }
+}
+
+// было width: 581px; height: 800px;
+.slider__certificate_soot {
+    width: 481px;
+    height: 700px;
+
+    @media (max-width: 1140px) {
+        width: 450px;
+        height: 600px;
+    }
+
+}
+
+// было width: 800px; height: 560px;
+.slider__svidetelstvo,
+.slider__diplom {
+    width: 850px;
+    height: 610px;
+
+    @media (max-width: 1110px) {
+        width: 100%;
+    }
+}
+
+.slider__arrow {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    background: none;
+    border: none;
+    font-size: 1.5rem;
+    cursor: pointer;
+    z-index: 1;
+    outline: none;
+}
+
+.slider__arrow_next,
+.slider__arrow_prev {
+    background-image: url(../../assets/images/icons/arrow-right.svg);
+    background-size: cover;
+    width: 51px;
+    height: 51px;
+    right: -8%;
+
+    @media (min-width: 1650px) {
+        right: 1%;
+    }
+
+    @media (min-width: 1800px) {
+        right: 7%;
+    }
+
+    @media (max-width: 1440px) {
+        right: -5%;
+    }
+
+    @media (max-width: 1240px) {
+        right: -10%;
+    }
+
+    @media (max-width: $laptopWidth) {
+        right: -13%;
+    }
+
+    @media (max-width: $tabletWidth) {
+        right: -16%;
+    }
+
+    @media (max-width: 668px) {
+        width: 31px;
+        height: 31px;
+        right: -8%;
+    }
+
+    @media (max-width: 535px) {
+        right: -10%;
+    }
+
+    @media (max-width: $mobileWidth) {
+        right: -13%;
+    }
+}
+
+.slider__arrow_prev {
+    background-image: url(../../assets/images/icons/arrow-left.svg);
+    left: -8%;
+
+    @media (min-width: 1650px) {
+        left: 1%;
+    }
+
+    @media (min-width: 1800px) {
+        left: 7%;
+    }
+
+    @media (max-width: 1440px) {
+        left: -5%;
+    }
+
+    @media (max-width: 1240px) {
+        left: -10%;
+    }
+
+    @media (max-width: $laptopWidth) {
+        left: -13%;
+    }
+
+    @media (max-width: $tabletWidth) {
+        left: -16%;
+    }
+
+    @media (max-width: 668px) {
+        left: -8%;
+    }
+
+    @media (max-width: 535px) {
+        left: -10%;
+    }
+
+    @media (max-width: $mobileWidth) {
+        left: -13%;
+    }
+}
+
+@media (max-width: $laptopWidth) {
+
+    .slider__certificate,
+    .slider__certificate_soot,
+    .slider__svidetelstvo,
+    .slider__diplom {
+        width: 100%;
+        height: 100%;
+    }
+
+    .slider__certificate,
+    .slider__svidetelstvo,
+    .slider__diplom {
+        padding-top: 30%;
+    }
+}
--- a/src/components/Sliders/SliderObjects.jsx
+++ b/src/components/Sliders/SliderObjects.jsx
@@ -0,0 +1,85 @@
+import React from 'react';
+import Slider from 'react-slick';
+import { Link } from 'react-router-dom';
+import { useMediaQuery } from 'react-responsive';
+
+import 'slick-carousel/slick/slick.css';
+import 'slick-carousel/slick/slick-theme.css';
+import './SliderObjects.scss';
+import { Object } from '../Object/Object';
+
+import objectPicOne from '../../assets/images/apartaments/image-44.jpg';
+import objectPicTwo from '../../assets/images/apartaments/image-45.jpg';
+import objectPicThree from '../../assets/images/apartaments/image-46.jpg';
+
+const NextArrow = ({ onClick }) => {
+    return (
+        <div className="slider-objects__arrow slider-objects__arrow_next" onClick={onClick}></div>
+    );
+};
+
+const PrevArrow = ({ onClick }) => {
+    return (
+        <div className="slider-objects__arrow slider-objects__arrow_prev" onClick={onClick}></div>
+    );
+};
+
+const SliderComponent = () => {
+    const isMobileResolution = useMediaQuery({ maxWidth: 768 });
+    const settings = {
+        dots: false,
+        infinite: true,
+        speed: 500,
+        slidesToShow: isMobileResolution ? 1 : 3,
+        slidesToScroll: isMobileResolution ? 1 : 3,
+        arrows: true,
+        nextArrow: <NextArrow />,
+        prevArrow: <PrevArrow />,
+    };
+
+    return (
+        <div className="slider-objects">
+            <Slider {...settings}>
+                <Link className="objects-link" to="/apartament">
+                    <Object
+                        image={objectPicOne}
+                        price="1 234 567 ₽"
+                        desc="1-комн. кв. 34 м"
+                        address="Ул. Луначарского, Ленинский район"
+                    /></Link>
+                <Object
+                    image={objectPicTwo}
+                    price="1 234 567 ₽"
+                    desc="1-комн. кв. 34 м"
+                    address="Ул. Зари, Вагонка"
+                />
+                <Object
+                    image={objectPicThree}
+                    price="1 234 567 ₽"
+                    desc="1-комн. кв. 34 м"
+                    address="Ул. Солнечная, Заречный район"
+                />
+                <Object
+                    image={objectPicOne}
+                    price="1 234 567 ₽"
+                    desc="1-комн. кв. 34 м"
+                    address="Ул. Луначарского, Ленинский район"
+                />
+                <Object
+                    image={objectPicTwo}
+                    price="1 234 567 ₽"
+                    desc="1-комн. кв. 34 м"
+                    address="Ул. Зари, Вагонка"
+                />
+                <Object
+                    image={objectPicThree}
+                    price="1 234 567 ₽"
+                    desc="1-комн. кв. 34 м"
+                    address="Ул. Солнечная, Заречный район"
+                />
+            </Slider>
+        </div>
+    );
+};
+
+export { SliderComponent };
--- a/src/components/Sliders/SliderObjects.scss
+++ b/src/components/Sliders/SliderObjects.scss
@@ -0,0 +1,90 @@
+@import '../../styles/vars.scss';
+
+.slider-objects {
+    margin: 55px 100px 0 100px;
+
+    @media (min-width: 1800px) {
+        margin: 55px 100px 55px 100px;
+    }
+
+    @media (min-width: $tabletWidth) and (max-width: $laptopWidth) {
+        margin: 55px 75px 0 75px;
+        padding-bottom: 75px;
+    }
+
+    @media (min-width: 740px) and (max-width: $tabletWidth) {
+        margin: 25px 100px 0 100px;
+    }
+
+    @media (max-width: $mobileWidth) {
+        margin: 55px 40px 0 40px;
+    }
+}
+
+.objects-link {
+    color: black;
+}
+
+.slider-objects__arrow {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    background: none;
+    border: none;
+    font-size: 1.5rem;
+    cursor: pointer;
+    // z-index: 1;
+    outline: none;
+}
+
+.slider-objects__arrow_next,
+.slider-objects__arrow_prev {
+    background-image: url(../../assets/images/icons/arrow-right.svg);
+    background-size: cover;
+    width: 51px;
+    height: 51px;
+    right: -5%;
+
+    @media (max-width: $laptopWidth) {
+        right: -7%;
+    }
+
+    @media (max-width: $tabletWidth) {
+        right: -17%;
+    }
+
+    @media (min-width: 740px) and (max-width: $tabletWidth) {
+        right: -14%;
+    }
+
+    @media (max-width: $mobileWidth) {
+        background-image: url(../../assets/images/icons/white-arrow-right.svg);
+        width: 19px;
+        height: 31px;
+        right: -8%;
+    }
+}
+
+.slider-objects__arrow_prev {
+    background-image: url(../../assets/images/icons/arrow-left.svg);
+    left: -5%;
+
+    @media (max-width: $laptopWidth) {
+        left: -7%;
+    }
+
+    @media (max-width: $tabletWidth) {
+        left: -17%;
+    }
+
+    @media (min-width: 740px) and (max-width: $tabletWidth) {
+        left: -14%;
+    }
+
+    @media (max-width: $mobileWidth) {
+        background-image: url(../../assets/images/icons/white-arrow-left.svg);
+        width: 19px;
+        height: 31px;
+        left: -8%;
+    }
+}
--- a/src/index.css
+++ b/src/index.css
@@ -0,0 +1,70 @@
+@font-face {
+    font-family: "InterBold";
+    src: url("./assets/fonts/Inter/Inter-Bold.ttf") format("truetype");
+    font-weight: 700;
+}
+@font-face {
+    font-family: "InterExtraBold";
+    src: url("./assets/fonts/Inter/Inter-ExtraBold.ttf") format("truetype");
+    font-weight: 800;
+}
+@font-face {
+    font-family: "InterExtraLight";
+    src: url("./assets/fonts/Inter/Inter-ExtraLight.ttf") format("truetype");
+    font-weight: 275;
+}
+@font-face {
+    font-family: "InterLight";
+    src: url("./assets/fonts/Inter/Inter-Light.ttf") format("truetype");
+    font-weight: 300;
+}
+@font-face {
+    font-family: "InterMedium";
+    src: url("./assets/fonts/Inter/Inter-Medium.ttf") format("truetype");
+    font-weight: 500;
+}
+@font-face {
+    font-family: "InterRegular";
+    src: url("./assets/fonts/Inter/Inter-Regular.ttf") format("truetype");
+    font-weight: 400;
+}
+@font-face {
+    font-family: "InterSemiBold";
+    src: url("./assets/fonts/Inter/Inter-Bold.ttf") format("truetype");
+    font-weight: 600;
+}
+.font-inter-bold {
+    font-family: "InterBold";
+}
+.font-inter-extrabold {
+    font-family: "InterExtraBold";
+}
+.font-inter-extralight {
+    font-family: "InterExtraLight";
+}
+.font-inter-light {
+    font-family: "InterLight";
+}
+.font-inter-medium {
+    font-family: "InterMedium";
+}
+.font-inter-regular {
+    font-family: "InterRegular";
+}
+.font-inter-semibold {
+    font-family: "InterSemiBold";
+}
+
+body {
+    margin: 0;
+    /* font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
+        "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
+        "Helvetica Neue", sans-serif; */
+    /* -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale; */
+}
+
+/* code {
+    font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+        monospace;
+} */
--- a/src/index.js
+++ b/src/index.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+
+import './index.css';
+import { BrowserRouter } from 'react-router-dom';
+
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+import './assets/fonts/Inter/Inter-Bold.ttf';
+import './assets/fonts/Inter/Inter-ExtraBold.ttf';
+import './assets/fonts/Inter/Inter-ExtraLight.ttf';
+import './assets/fonts/Inter/Inter-Light.ttf';
+import './assets/fonts/Inter/Inter-Medium.ttf';
+import './assets/fonts/Inter/Inter-Regular.ttf';
+import './assets/fonts/Inter/Inter-SemiBold.ttf';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+  <BrowserRouter>
+    <App />
+  </BrowserRouter>
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();
--- a/src/logo.svg
+++ b/src/logo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>
--- a/src/pages/About/About.jsx
+++ b/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 };
--- a/src/pages/About/About.scss
+++ b/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;
+    }
+}
--- a/src/pages/Apartament/Apartament.jsx
+++ b/src/pages/Apartament/Apartament.jsx
@@ -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 };
--- a/src/pages/Apartament/Apartament.scss
+++ b/src/pages/Apartament/Apartament.scss
@@ -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;
+    }
+}
--- a/src/pages/Home/Home.jsx
+++ b/src/pages/Home/Home.jsx
@@ -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 };
--- a/src/pages/Home/Home.scss
+++ b/src/pages/Home/Home.scss
@@ -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;
+    }
+}
--- a/src/pages/Objects/Objects.jsx
+++ b/src/pages/Objects/Objects.jsx
@@ -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 };
--- a/src/pages/Objects/Objects.scss
+++ b/src/pages/Objects/Objects.scss
@@ -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;
+    }
+}
--- a/src/pages/Office/Office.jsx
+++ b/src/pages/Office/Office.jsx
@@ -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 };
--- a/src/pages/Office/Office.scss
+++ b/src/pages/Office/Office.scss
@@ -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;
+}
--- a/Show More
+++ b/Show More
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>