first commit
This commit is contained in:
DmitriyB
@@ -0,0 +1,29 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"baseUrl": "src",
|
||||
|
||||
"target": "es5",
|
||||
"lib": [
|
||||
"dom",
|
||||
"dom.iterable",
|
||||
"esnext"
|
||||
],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"esModuleInterop": true,
|
||||
"strictNullChecks": false,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"strict": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx"
|
||||
},
|
||||
"include": [
|
||||
"src"
|
||||
]
|
||||
}
|
||||
Generated
+145
@@ -11,9 +11,13 @@
|
||||
"@testing-library/jest-dom": "^5.16.5",
|
||||
"@testing-library/react": "^13.4.0",
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
"animejs": "^3.2.1",
|
||||
"framer-motion": "^10.8.5",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-minimal-pie-chart": "^8.4.0",
|
||||
"react-scripts": "5.0.1",
|
||||
"swiper": "^9.1.1",
|
||||
"web-vitals": "^2.1.4"
|
||||
}
|
||||
},
|
||||
@@ -2130,6 +2134,21 @@
|
||||
"postcss-selector-parser": "^6.0.10"
|
||||
}
|
||||
},
|
||||
"node_modules/@emotion/is-prop-valid": {
|
||||
"version": "0.8.8",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
|
||||
"integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
|
||||
"optional": true,
|
||||
"dependencies": {
|
||||
"@emotion/memoize": "0.7.4"
|
||||
}
|
||||
},
|
||||
"node_modules/@emotion/memoize": {
|
||||
"version": "0.7.4",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
|
||||
"integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==",
|
||||
"optional": true
|
||||
},
|
||||
"node_modules/@eslint-community/eslint-utils": {
|
||||
"version": "4.3.0",
|
||||
"resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.3.0.tgz",
|
||||
@@ -4251,6 +4270,11 @@
|
||||
"resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz",
|
||||
"integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw=="
|
||||
},
|
||||
"node_modules/@types/svg-path-parser": {
|
||||
"version": "1.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/svg-path-parser/-/svg-path-parser-1.1.3.tgz",
|
||||
"integrity": "sha512-F1Y6lQIto5b2sKCseVUsFfY5J+8PIhhX4jrDVxpth4m7hwM2OdySh3iTLeR35lEhl/K4ZMEF+GDAwTl7yJcO5Q=="
|
||||
},
|
||||
"node_modules/@types/testing-library__jest-dom": {
|
||||
"version": "5.14.5",
|
||||
"resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.5.tgz",
|
||||
@@ -4827,6 +4851,11 @@
|
||||
"ajv": "^6.9.1"
|
||||
}
|
||||
},
|
||||
"node_modules/animejs": {
|
||||
"version": "3.2.1",
|
||||
"resolved": "https://registry.npmjs.org/animejs/-/animejs-3.2.1.tgz",
|
||||
"integrity": "sha512-sWno3ugFryK5nhiDm/2BKeFCpZv7vzerWUcUPyAZLDhMek3+S/p418ldZJbJXo5ZUOpfm2kP2XRO4NJcULMy9A=="
|
||||
},
|
||||
"node_modules/ansi-escapes": {
|
||||
"version": "4.3.2",
|
||||
"resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz",
|
||||
@@ -8329,6 +8358,29 @@
|
||||
"url": "https://www.patreon.com/infusion"
|
||||
}
|
||||
},
|
||||
"node_modules/framer-motion": {
|
||||
"version": "10.8.5",
|
||||
"resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-10.8.5.tgz",
|
||||
"integrity": "sha512-qwvUAIwCc6fEZhg7ST+/z+f7Vt882jJvLiWZUHNdq2oZ/Y7gM6mLlpKi9xQg+pLu6DQVypikcKQ+MKnoFoXAJg==",
|
||||
"dependencies": {
|
||||
"tslib": "^2.4.0"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"@emotion/is-prop-valid": "^0.8.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"react": {
|
||||
"optional": true
|
||||
},
|
||||
"react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/fresh": {
|
||||
"version": "0.5.2",
|
||||
"resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
|
||||
@@ -14342,6 +14394,18 @@
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
|
||||
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
|
||||
},
|
||||
"node_modules/react-minimal-pie-chart": {
|
||||
"version": "8.4.0",
|
||||
"resolved": "https://registry.npmjs.org/react-minimal-pie-chart/-/react-minimal-pie-chart-8.4.0.tgz",
|
||||
"integrity": "sha512-A0wG+6mRjboyMxMDrzQNWp+2+GSn2ai4ERzRFHLp/OCC45PwIR1DpDVjwedawO+5AtFpzBRQKSFm3ZUxrqIEzA==",
|
||||
"dependencies": {
|
||||
"@types/svg-path-parser": "^1.1.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18",
|
||||
"react-dom": "^16.8.0 || ^17.0.0 || ^18"
|
||||
}
|
||||
},
|
||||
"node_modules/react-refresh": {
|
||||
"version": "0.11.0",
|
||||
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
|
||||
@@ -15293,6 +15357,11 @@
|
||||
"resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
|
||||
"integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g=="
|
||||
},
|
||||
"node_modules/ssr-window": {
|
||||
"version": "4.0.2",
|
||||
"resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-4.0.2.tgz",
|
||||
"integrity": "sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ=="
|
||||
},
|
||||
"node_modules/stable": {
|
||||
"version": "0.1.8",
|
||||
"resolved": "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz",
|
||||
@@ -15683,6 +15752,27 @@
|
||||
"boolbase": "~1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/swiper": {
|
||||
"version": "9.1.1",
|
||||
"resolved": "https://registry.npmjs.org/swiper/-/swiper-9.1.1.tgz",
|
||||
"integrity": "sha512-D1zArOwI6XCXCYBULPA4jTxpqp5SQtvntjinbXNZwXzj6P3KS51zSWuMarCLXq5oRISay4nX+TuShpxz8qhtbw==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "patreon",
|
||||
"url": "https://www.patreon.com/swiperjs"
|
||||
},
|
||||
{
|
||||
"type": "open_collective",
|
||||
"url": "http://opencollective.com/swiper"
|
||||
}
|
||||
],
|
||||
"dependencies": {
|
||||
"ssr-window": "^4.0.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 4.7.0"
|
||||
}
|
||||
},
|
||||
"node_modules/symbol-tree": {
|
||||
"version": "3.2.4",
|
||||
"resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
|
||||
@@ -18597,6 +18687,21 @@
|
||||
"integrity": "sha512-+OJ9konv95ClSTOJCmMZqpd5+YGsB2S+x6w3E1oaM8UuR5j8nTNHYSz8c9BEPGDOCMQYIEEGlVPj/VY64iTbGw==",
|
||||
"requires": {}
|
||||
},
|
||||
"@emotion/is-prop-valid": {
|
||||
"version": "0.8.8",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
|
||||
"integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"@emotion/memoize": "0.7.4"
|
||||
}
|
||||
},
|
||||
"@emotion/memoize": {
|
||||
"version": "0.7.4",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
|
||||
"integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==",
|
||||
"optional": true
|
||||
},
|
||||
"@eslint-community/eslint-utils": {
|
||||
"version": "4.3.0",
|
||||
"resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.3.0.tgz",
|
||||
@@ -20179,6 +20284,11 @@
|
||||
"resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz",
|
||||
"integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw=="
|
||||
},
|
||||
"@types/svg-path-parser": {
|
||||
"version": "1.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/svg-path-parser/-/svg-path-parser-1.1.3.tgz",
|
||||
"integrity": "sha512-F1Y6lQIto5b2sKCseVUsFfY5J+8PIhhX4jrDVxpth4m7hwM2OdySh3iTLeR35lEhl/K4ZMEF+GDAwTl7yJcO5Q=="
|
||||
},
|
||||
"@types/testing-library__jest-dom": {
|
||||
"version": "5.14.5",
|
||||
"resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.5.tgz",
|
||||
@@ -20603,6 +20713,11 @@
|
||||
"integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
|
||||
"requires": {}
|
||||
},
|
||||
"animejs": {
|
||||
"version": "3.2.1",
|
||||
"resolved": "https://registry.npmjs.org/animejs/-/animejs-3.2.1.tgz",
|
||||
"integrity": "sha512-sWno3ugFryK5nhiDm/2BKeFCpZv7vzerWUcUPyAZLDhMek3+S/p418ldZJbJXo5ZUOpfm2kP2XRO4NJcULMy9A=="
|
||||
},
|
||||
"ansi-escapes": {
|
||||
"version": "4.3.2",
|
||||
"resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz",
|
||||
@@ -23163,6 +23278,15 @@
|
||||
"resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz",
|
||||
"integrity": "sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA=="
|
||||
},
|
||||
"framer-motion": {
|
||||
"version": "10.8.5",
|
||||
"resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-10.8.5.tgz",
|
||||
"integrity": "sha512-qwvUAIwCc6fEZhg7ST+/z+f7Vt882jJvLiWZUHNdq2oZ/Y7gM6mLlpKi9xQg+pLu6DQVypikcKQ+MKnoFoXAJg==",
|
||||
"requires": {
|
||||
"@emotion/is-prop-valid": "^0.8.2",
|
||||
"tslib": "^2.4.0"
|
||||
}
|
||||
},
|
||||
"fresh": {
|
||||
"version": "0.5.2",
|
||||
"resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
|
||||
@@ -27312,6 +27436,14 @@
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
|
||||
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
|
||||
},
|
||||
"react-minimal-pie-chart": {
|
||||
"version": "8.4.0",
|
||||
"resolved": "https://registry.npmjs.org/react-minimal-pie-chart/-/react-minimal-pie-chart-8.4.0.tgz",
|
||||
"integrity": "sha512-A0wG+6mRjboyMxMDrzQNWp+2+GSn2ai4ERzRFHLp/OCC45PwIR1DpDVjwedawO+5AtFpzBRQKSFm3ZUxrqIEzA==",
|
||||
"requires": {
|
||||
"@types/svg-path-parser": "^1.1.3"
|
||||
}
|
||||
},
|
||||
"react-refresh": {
|
||||
"version": "0.11.0",
|
||||
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
|
||||
@@ -28011,6 +28143,11 @@
|
||||
"resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
|
||||
"integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g=="
|
||||
},
|
||||
"ssr-window": {
|
||||
"version": "4.0.2",
|
||||
"resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-4.0.2.tgz",
|
||||
"integrity": "sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ=="
|
||||
},
|
||||
"stable": {
|
||||
"version": "0.1.8",
|
||||
"resolved": "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz",
|
||||
@@ -28307,6 +28444,14 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"swiper": {
|
||||
"version": "9.1.1",
|
||||
"resolved": "https://registry.npmjs.org/swiper/-/swiper-9.1.1.tgz",
|
||||
"integrity": "sha512-D1zArOwI6XCXCYBULPA4jTxpqp5SQtvntjinbXNZwXzj6P3KS51zSWuMarCLXq5oRISay4nX+TuShpxz8qhtbw==",
|
||||
"requires": {
|
||||
"ssr-window": "^4.0.2"
|
||||
}
|
||||
},
|
||||
"symbol-tree": {
|
||||
"version": "3.2.4",
|
||||
"resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
|
||||
|
||||
@@ -6,9 +6,13 @@
|
||||
"@testing-library/jest-dom": "^5.16.5",
|
||||
"@testing-library/react": "^13.4.0",
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
"animejs": "^3.2.1",
|
||||
"framer-motion": "^10.8.5",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-minimal-pie-chart": "^8.4.0",
|
||||
"react-scripts": "5.0.1",
|
||||
"swiper": "^9.1.1",
|
||||
"web-vitals": "^2.1.4"
|
||||
},
|
||||
"scripts": {
|
||||
|
||||
+18
-16
@@ -1,24 +1,26 @@
|
||||
import logo from './logo.svg';
|
||||
import './App.css';
|
||||
import { Header } from 'components/Header/Header';
|
||||
import { Title } from 'components/Title/Title';
|
||||
import { CounterComponent } from 'components/CounterComponent/CounterComponent';
|
||||
import { SwiperComponent } from 'components/SwiperComponent/SwiperComponent';
|
||||
import { VirtualTour } from 'components/VirtualTour/VirtualTour';
|
||||
import { Analytics } from 'components/Analytics/Analytics';
|
||||
import { MapComponent } from 'components/MapComponent/MapComponent';
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<div className="App">
|
||||
<header className="App-header">
|
||||
<img src={logo} className="App-logo" alt="logo" />
|
||||
<p>
|
||||
Edit <code>src/App.js</code> and save to reload.
|
||||
</p>
|
||||
<a
|
||||
className="App-link"
|
||||
href="https://reactjs.org"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Learn React
|
||||
</a>
|
||||
</header>
|
||||
</div>
|
||||
<>
|
||||
<Header></Header>
|
||||
<Title></Title>
|
||||
<main>
|
||||
<CounterComponent></CounterComponent>
|
||||
<SwiperComponent></SwiperComponent>
|
||||
<VirtualTour></VirtualTour>
|
||||
<Analytics></Analytics>
|
||||
<MapComponent></MapComponent>
|
||||
</main>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,701 @@
|
||||
.analytics__container {
|
||||
margin-bottom: 160px;
|
||||
font-family: "GilroyWebRegular";
|
||||
}
|
||||
|
||||
.analytics-text-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 32px;
|
||||
width: 496px;
|
||||
}
|
||||
|
||||
.analytics-section {
|
||||
align-items: center;
|
||||
gap: 64px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.graph__container {
|
||||
display: -ms-grid;
|
||||
display: grid;
|
||||
-ms-grid-rows: 1fr 26px auto;
|
||||
grid-template-rows: 1fr auto;
|
||||
gap: 26px;
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
|
||||
.graph__row_1 {
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
display: -ms-grid;
|
||||
display: grid;
|
||||
-ms-grid-columns: 1fr 30px 1fr 30px 1fr;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.graph__row_item {
|
||||
height: 280px;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
background: #1C1D21;
|
||||
border-radius: 8px;
|
||||
padding: 32px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 20px;
|
||||
line-height: 120%;
|
||||
/* identical to box height, or 24px */
|
||||
|
||||
|
||||
/* Landing/White */
|
||||
|
||||
color: #F2F2F2;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.graph__row_2 {
|
||||
display: -ms-grid;
|
||||
display: grid;
|
||||
-ms-grid-columns: 175px 30px 175px 30px 175px 30px 175px 30px 380px;
|
||||
grid-template-columns: 175px 175px 175px 175px 380px;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.graph__row_item_s {
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
line-height: 120%;
|
||||
padding: 24px;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-box-align: start;
|
||||
-ms-flex-align: start;
|
||||
align-items: flex-start;
|
||||
gap: 20px;
|
||||
padding: 24px;
|
||||
background: #1C1D21;
|
||||
border-radius: 8px;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.graph__text {
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 140%;
|
||||
color: #C5C7CE;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.graph__text_mobile {
|
||||
display: none;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 140%;
|
||||
color: #F2F2F2;
|
||||
}
|
||||
|
||||
.graph__row_item_l {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.graph__color_elem {
|
||||
font-weight: 400;
|
||||
font-size: 48px;
|
||||
line-height: 100%;
|
||||
/* identical to box height, or 48px */
|
||||
|
||||
|
||||
/* Landing/Pink */
|
||||
|
||||
color: #D375FF;
|
||||
}
|
||||
|
||||
.graph__bar_row {
|
||||
display: -ms-grid;
|
||||
display: grid;
|
||||
-ms-grid-columns: auto 16px 2fr 16px auto;
|
||||
grid-template-columns: auto 2fr auto;
|
||||
gap: 16px;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.graph__title {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.graph__bar_row:last-of-type {
|
||||
margin-bottom: 0;
|
||||
|
||||
}
|
||||
|
||||
.graph__caption {
|
||||
width: 98px;
|
||||
margin: 0;
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 140%;
|
||||
}
|
||||
|
||||
.graph__bar_width_container {
|
||||
width: 169px;
|
||||
}
|
||||
|
||||
.graph__bar_1 {
|
||||
width: 100%;
|
||||
background: linear-gradient(180deg, #BC75FF 0%, #798FFF 100%);
|
||||
border-radius: 2px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.graph__procentage {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
line-height: 130%;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
width: 25px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.graph__bar_2 {
|
||||
margin-right: 41px;
|
||||
background: -o-linear-gradient(33.25deg, #D375FF 19.74%, #798FFF 82.32%);
|
||||
background: linear-gradient(56.75deg, #D375FF 19.74%, #798FFF 82.32%);
|
||||
border-radius: 2px;
|
||||
height: 24px;
|
||||
width: 80%;
|
||||
|
||||
}
|
||||
|
||||
.graph__bar_3 {
|
||||
|
||||
background: -o-linear-gradient(33.25deg, #D375FF 19.74%, #798FFF 82.32%);
|
||||
|
||||
background: linear-gradient(56.75deg, #D375FF 19.74%, #798FFF 82.32%);
|
||||
border-radius: 2px;
|
||||
height: 24px;
|
||||
width: 60%;
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.graph__bar_4 {
|
||||
background: -o-linear-gradient(33.25deg, #D375FF 19.74%, #798FFF 82.32%);
|
||||
background: linear-gradient(56.75deg, #D375FF 19.74%, #798FFF 82.32%);
|
||||
border-radius: 2px;
|
||||
height: 24px;
|
||||
width: 15%;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.bar__container {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.chart__container {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
gap: 49px;
|
||||
}
|
||||
|
||||
.legend__container {
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 140%;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-box-pack: justify;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
gap: 6px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.legend__point {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.legend__row {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.legend__caption {
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.color {
|
||||
background: #7A31C3;
|
||||
}
|
||||
|
||||
.color1 {
|
||||
background: #798FFF;
|
||||
}
|
||||
|
||||
.color2 {
|
||||
background: #D375FF;
|
||||
}
|
||||
|
||||
.color3 {
|
||||
background: #8742F8;
|
||||
;
|
||||
}
|
||||
|
||||
.color4 {
|
||||
background: #FB57F4;
|
||||
;
|
||||
}
|
||||
|
||||
.sales__container {
|
||||
-webkit-box-align: start;
|
||||
-ms-flex-align: start;
|
||||
align-items: flex-start;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.background__row {
|
||||
background: -o-linear-gradient(33.25deg, rgba(211, 117, 255, 0.1) 19.74%, rgba(121, 143, 255, 0.1) 82.32%), rgba(124, 142, 255, 0.1);
|
||||
background: linear-gradient(56.75deg, rgba(211, 117, 255, 0.1) 19.74%, rgba(121, 143, 255, 0.1) 82.32%), rgba(124, 142, 255, 0.1);
|
||||
border-radius: 2px;
|
||||
width: 262px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.sales__bar {
|
||||
width: 100%;
|
||||
|
||||
padding-top: 3px;
|
||||
padding-bottom: 5px;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 140%;
|
||||
/* identical to box height, or 17px */
|
||||
|
||||
text-align: center;
|
||||
border-radius: 2px;
|
||||
height: 30px;
|
||||
text-align: center;
|
||||
background: linear-gradient(180deg, #BC75FF 0%, #798FFF 100%);
|
||||
}
|
||||
|
||||
.sales__row {
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
.sales_bar_width {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.sales_bar_width1 {
|
||||
width: 45%;
|
||||
}
|
||||
|
||||
.sales_bar_width3 {
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.background__row {
|
||||
width: 262px;
|
||||
|
||||
-webkit-box-pack: center;
|
||||
|
||||
-ms-flex-pack: center;
|
||||
|
||||
justify-content: center;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
|
||||
}
|
||||
|
||||
.sales__procentage {
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
line-height: 130%;
|
||||
|
||||
}
|
||||
|
||||
.graph__title_s {
|
||||
font-family: "Inter";
|
||||
width: fit-content;
|
||||
color: #F2F2F2;
|
||||
height: 51px;
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 1300px) {
|
||||
|
||||
.background__row {
|
||||
width: 216px;
|
||||
}
|
||||
|
||||
.graph__bar_width_container {
|
||||
width: 123px;
|
||||
}
|
||||
|
||||
|
||||
.graph__row_2 {
|
||||
-ms-grid-columns: 151px 15px 151px 15px 151px 15px 151px 15px 318px;
|
||||
grid-template-columns: 151px 151px 151px 151px 318px;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
|
||||
.graph__row_1 {
|
||||
-ms-grid-columns: 318px 15px 318px 15px 318px;
|
||||
grid-template-columns: 318px 318px 318px;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.graph__row_item {
|
||||
height: 266px;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
|
||||
.chart__container {
|
||||
gap: 19px;
|
||||
}
|
||||
|
||||
.graph__row_item_l {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.analytics__container {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
|
||||
|
||||
.chart__container {
|
||||
gap: 54px;
|
||||
}
|
||||
|
||||
.bar__container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.background__row {
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
|
||||
.sales__procentage {
|
||||
width: 37px;
|
||||
}
|
||||
|
||||
.desktop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mobile {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.graph__row_1 {
|
||||
grid-template-columns: repeat(auto-fit, minmax(405px, 1fr));
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.graph__row_mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.graph__row_2 {
|
||||
grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
|
||||
}
|
||||
|
||||
.graph__row_item {
|
||||
height: 240px;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.graph__row_item_s {
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
gap: 28px;
|
||||
}
|
||||
|
||||
.analytics__container {
|
||||
padding: 120px 20px 80px;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
|
||||
}
|
||||
|
||||
.graph__text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
.graph__bar_width_container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.graph__text_mobile {
|
||||
display: block;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 2.8vw;
|
||||
line-height: 140%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 890px) {
|
||||
.graph__container {
|
||||
display: -ms-grid;
|
||||
display: grid;
|
||||
-ms-grid-columns: 1fr 20px auto;
|
||||
grid-template-columns: 1fr auto;
|
||||
gap: 20px;
|
||||
row-gap: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 690px) {
|
||||
|
||||
|
||||
.graph__container {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.graph__row_2 {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
|
||||
.analytics__container {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sales__procentage {
|
||||
width: 37px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.chart__container {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-box-pack: justify;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
gap: 35px;
|
||||
}
|
||||
|
||||
.bar__container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
.graph__bar_width_container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.graph__row_1 {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.sales__row {
|
||||
-webkit-box-pack: start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.background__row {
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
|
||||
.desktop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mobile {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.analytics__container {
|
||||
padding: 40px 10px 80px;
|
||||
}
|
||||
|
||||
.graph__row_1 {
|
||||
width: 100%;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
|
||||
}
|
||||
|
||||
.graph__row_item {
|
||||
height: auto;
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
|
||||
.graph__row_2 {
|
||||
display: -ms-grid;
|
||||
display: grid;
|
||||
-ms-grid-columns: 1fr 10px 1fr;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.graph__text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.graph__row_mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.legend__caption {
|
||||
font-family: "Inter";
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 140%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.graph__row_item_s {
|
||||
padding: 16px;
|
||||
gap: 14px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.graph__color_elem {
|
||||
font-size: 47px;
|
||||
}
|
||||
|
||||
.analytics__container {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.graph__text_mobile {
|
||||
font-size: 4.5vw;
|
||||
}
|
||||
|
||||
.graph__container {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,150 @@
|
||||
import './Analytics.css'
|
||||
import { PieChartComp } from 'components/Piechart/Piechart'
|
||||
|
||||
export const Analytics = () => {
|
||||
return (
|
||||
<section className="analytics-section">
|
||||
<div className='analytics-text-container'>
|
||||
<h2 className='title'>
|
||||
Анализируем поведение пользователей
|
||||
</h2>
|
||||
<p className='paragraph'>Система внутренней аналитики программы собирает информацию о поведении пользователя и эффективности работы менеджеров для создания отчета, содержащего необходимые метрики.</p>
|
||||
</div>
|
||||
<div className="analytics__container">
|
||||
<div className="graph__container">
|
||||
<div className="graph__row_1">
|
||||
<div className="graph__row_item">
|
||||
<span className="graph__title title_1">Конверсия менеджеров в брони</span>
|
||||
<div className="graph__bar_row">
|
||||
<p className="graph__caption">К.Н. Федоров</p>
|
||||
<div className="bar__container">
|
||||
<div className="graph__bar_width_container">
|
||||
<div className="graph__bar_1"></div>
|
||||
</div>
|
||||
</div>
|
||||
<p className="graph__procentage">45%</p>
|
||||
</div>
|
||||
<div className="graph__bar_row">
|
||||
<p className="graph__caption">И.Ф. Яковлева</p>
|
||||
<div className="bar__container">
|
||||
<div className="graph__bar_width_container">
|
||||
<div className="graph__bar_2"></div>
|
||||
</div>
|
||||
</div>
|
||||
<p className="graph__procentage">30%</p>
|
||||
|
||||
</div>
|
||||
<div className="graph__bar_row">
|
||||
<p className="graph__caption">А.М. Ташева</p>
|
||||
<div className="bar__container">
|
||||
<div className="graph__bar_width_container">
|
||||
<div className="graph__bar_3"></div>
|
||||
</div>
|
||||
</div>
|
||||
<p className="graph__procentage">28%</p>
|
||||
|
||||
</div>
|
||||
<div className="graph__bar_row">
|
||||
<p className="graph__caption">А.А. Фетисов</p>
|
||||
<div className="bar__container">
|
||||
<div className="graph__bar_width_container">
|
||||
<div className="graph__bar_4"></div>
|
||||
</div>
|
||||
</div>
|
||||
<p className="graph__procentage">5%</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div className="graph__row_item">
|
||||
<span className="graph__title title_2">Популярные типы квартир, %</span>
|
||||
<div className="chart__container">
|
||||
<PieChartComp />
|
||||
<div className="legend__container">
|
||||
<div className="legend__row">
|
||||
<div className="legend__point color"></div>
|
||||
<p className="legend__caption">Студии</p>
|
||||
</div>
|
||||
<div className="legend__row">
|
||||
<div className="legend__point color1"></div>
|
||||
<p className="legend__caption">1-к. квартиры</p>
|
||||
</div>
|
||||
<div className="legend__row">
|
||||
<div className="legend__point color2"></div>
|
||||
<p className="legend__caption">2-к. квартиры</p>
|
||||
</div>
|
||||
<div className="legend__row">
|
||||
<div className="legend__point color3"></div>
|
||||
<p className="legend__caption">3-к. квартиры</p>
|
||||
</div>
|
||||
<div className="legend__row">
|
||||
<div className="legend__point color4"></div>
|
||||
<p className="legend__caption">4-к. квартиры</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="graph__row_item">
|
||||
<span className="graph__title">Воронка продаж</span>
|
||||
<div className="sales__container">
|
||||
<div className="sales__row">
|
||||
<div className="background__row">
|
||||
<div className="sales__bar">Сеансы</div>
|
||||
</div>
|
||||
<div className="sales__procentage"></div>
|
||||
</div>
|
||||
<div className="sales__row">
|
||||
<div className="background__row">
|
||||
<div className="sales__bar sales_bar_width">В избранное</div>
|
||||
</div>
|
||||
<div className="sales__procentage">93,47%</div>
|
||||
</div>
|
||||
<div className="sales__row">
|
||||
<div className="background__row">
|
||||
<div className="sales__bar sales_bar_width1">Брони</div>
|
||||
</div>
|
||||
<div className="sales__procentage">45,68%</div>
|
||||
</div>
|
||||
<div className="sales__row">
|
||||
<div className="background__row">
|
||||
<div className="sales__bar sales_bar_width3">Продажи</div>
|
||||
</div>
|
||||
<div className="sales__procentage">29,13%</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="graph__row_2">
|
||||
<div className=" graph__row_item_s">
|
||||
<span className="graph__title_s">Среднее время сеанса, мин.</span>
|
||||
<div className="graph__color_elem">
|
||||
12:45
|
||||
</div>
|
||||
</div>
|
||||
<div className="graph__row_item_s">
|
||||
<span className="graph__title_s">Сформировано коммерческих предложений, шт</span>
|
||||
<div className="graph__color_elem">
|
||||
856
|
||||
</div>
|
||||
</div>
|
||||
<div className=" graph__row_item_s">
|
||||
<span className="graph__title_s">Конверсия из сеанса в продажу, %</span>
|
||||
<div className="graph__color_elem">
|
||||
12,44
|
||||
</div>
|
||||
</div>
|
||||
<div className="graph__row_item_s">
|
||||
<span className="graph__title_s">Продано через Graff.estate, млн.руб.</span>
|
||||
<div className="graph__color_elem">
|
||||
134,5
|
||||
</div>
|
||||
</div>
|
||||
<div className=" graph__row_mobile graph__row_item_l">
|
||||
<div className="graph__text">Полученный отчет позволяет сделать процесс демонстрации жилого комплекса еще эффективнее.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>)
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
.count-container {
|
||||
user-select: none;
|
||||
box-sizing: border-box;
|
||||
border-top: 2px solid #23242A;
|
||||
padding-top: 32px;
|
||||
padding-bottom: 22px;
|
||||
margin-bottom: 118px;
|
||||
|
||||
}
|
||||
|
||||
.count {
|
||||
margin: 0;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 96px;
|
||||
line-height: 100%;
|
||||
/* identical to box height, or 96px */
|
||||
|
||||
|
||||
/* B-P */
|
||||
|
||||
background: linear-gradient(180deg, #BC75FF 0%, #798FFF 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
text-fill-color: transparent;
|
||||
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
import './Counter.css'
|
||||
import { animate, useInView } from "framer-motion";
|
||||
import React, { useEffect, useRef } from "react";
|
||||
|
||||
|
||||
|
||||
export const Counter = ({ from, to, text, precentage }) => {
|
||||
const nodeRef = useRef();
|
||||
const isInView = useInView(nodeRef)
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
const node = nodeRef.current;
|
||||
|
||||
const controls = animate(from, to, {
|
||||
duration: 1,
|
||||
onUpdate(value) {
|
||||
if (precentage) {
|
||||
node.textContent = value.toFixed(0) + '%'
|
||||
} else {
|
||||
node.textContent = value.toFixed(0)
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return () => controls.stop();
|
||||
}, [isInView]);
|
||||
|
||||
return (
|
||||
<div className="count-container">
|
||||
<p className="count" ref={nodeRef} />;
|
||||
<span className="paragraph paragraph-small">{text}</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
|
||||
|
||||
.counter-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
|
||||
.section-counter {
|
||||
margin-bottom: 200px;
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
import './CounterComponent.css'
|
||||
import { Counter } from "components/Counter/Counter"
|
||||
import {zero, counters, precentage} from 'utils/utils'
|
||||
|
||||
export const CounterComponent = () => {
|
||||
|
||||
|
||||
return (<section className='section-counter'>
|
||||
<div className="text-row-container">
|
||||
<h2 className="title">Эффективность инстумента <br></br> продаж в цифрах</h2>
|
||||
<p className="paragraph">Мы собрали статистику за 10 лет работы <br></br>
|
||||
с застройщиками, реализовав 21 проект.</p>
|
||||
</div>
|
||||
<div className='counter-row'>
|
||||
{counters.map((i) => (
|
||||
<Counter from={i.from} to={i.to} text={i.text} precentage={i.precentage}></Counter>
|
||||
))}
|
||||
</div>
|
||||
<button className='button-primary'>
|
||||
<span>Заказать решение</span>
|
||||
</button>
|
||||
</section>)
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
|
||||
|
||||
.header-button-container {
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
|
||||
.header-lang-container {
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 8px;
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
import './Header.css'
|
||||
import ru from 'images/icons/RU.svg'
|
||||
import en from 'images/icons/EN.svg'
|
||||
import logo from 'images/logoIcon.svg'
|
||||
import send from 'images/icons/Send.svg'
|
||||
|
||||
|
||||
export const Header = () => {
|
||||
const buttons = [
|
||||
{ value: 'ru', icon: ru }, { value: 'ru', icon: en }
|
||||
]
|
||||
return (
|
||||
<header>
|
||||
<a className="header-logo" href={`https://estate.graff.tech/`} style={{ cursor: "pointer" }}><img alt="company-logo" src={logo} />
|
||||
</a>
|
||||
<div className="header-button-container">
|
||||
<button className='button-primary'>
|
||||
<img src={send} alt='send' />
|
||||
<span>Связаться с нами</span>
|
||||
</button>
|
||||
<div className='header-lang-container'>
|
||||
{buttons.map((item, index) => (<button key={index} onClick={() => console.log('click')} value={item.value} className={'button-second'}><img alt='icon' src={item.icon}></img></button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,20 @@
|
||||
.section-map {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.map-container {
|
||||
left: 40%;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: -100%;
|
||||
|
||||
}
|
||||
|
||||
.map-text-container {
|
||||
width: 40%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 32px;
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
import './MapComponent.css'
|
||||
import { MapAnimation } from 'components/Map/Map'
|
||||
export const MapComponent = () => {
|
||||
return <section className="section-map">
|
||||
<div className="map-text-container">
|
||||
<h2 className="title">Инструмент продаж поможет вам продавать удаленно</h2>
|
||||
<p className="paragraph paragraph-map">Высокий уровень графики и полное погружение покупателя в процесс выбора квартиры.</p>
|
||||
<p className="subparagraph paragraph">Покажите все преимущества вашего жилого комплекса клиенту из любого конца мира. Местоположение и устройство значения не имеют. Нужен только интернет.</p>
|
||||
<div className='map-container'> <MapAnimation></MapAnimation>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
import { PieChart } from 'react-minimal-pie-chart';
|
||||
import './chart.css'
|
||||
import "../../styles/styles.css";
|
||||
|
||||
|
||||
|
||||
|
||||
export const PieChartComp = () => {
|
||||
const dataMock = [
|
||||
{ title: 'One', value: 36.27, color: '#7A31C4' },
|
||||
{ title: 'Two', value: 6.22, color: '#FB57F4' },
|
||||
{ title: 'Three', value: 9.95, color: '#8742F8' },
|
||||
{ title: 'Four', value: 17.93, color: '#D375FF' },
|
||||
{ title: 'Five', value: 29.64, color: '#798FFF' },
|
||||
|
||||
];
|
||||
|
||||
|
||||
const defaultLabelStyle = {
|
||||
fontSize: '9px',
|
||||
fontWeight: '500',
|
||||
lineHeight: '140%',
|
||||
fontFamily: 'Inter',
|
||||
fill: '#EBEBEB',
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<div className='chart'>
|
||||
<PieChart
|
||||
label={({ dataEntry }) => `${Math.round(dataEntry.percentage)} %`}
|
||||
data={dataMock}
|
||||
labelStyle={
|
||||
defaultLabelStyle
|
||||
}
|
||||
labelPosition={65}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
/*
|
||||
* Prefixed by https://autoprefixer.github.io
|
||||
* PostCSS: v8.4.14,
|
||||
* Autoprefixer: v10.4.7
|
||||
* Browsers: last 4 version
|
||||
*/
|
||||
|
||||
.chart {
|
||||
font-family: 'Gilroy';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
line-height: 140%;
|
||||
/* or 17px */
|
||||
|
||||
-webkit-font-feature-settings: 'tnum' on, 'lnum' on;
|
||||
|
||||
font-feature-settings: 'tnum' on, 'lnum' on;
|
||||
|
||||
/* Landing/White */
|
||||
width: 144px;
|
||||
color: #EBEBEB;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media screen and (max-width: 1279px) {
|
||||
.chart {
|
||||
width: 128px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1023px) {
|
||||
.chart {
|
||||
width: 144px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 690px) {
|
||||
.chart {
|
||||
width: 40%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 450px) {
|
||||
.chart {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
.slider-container {
|
||||
border-top: 2px solid #23242A;
|
||||
border-bottom: 2px solid #23242A;
|
||||
padding-top: 48px;
|
||||
padding-bottom: 48px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.section-swiper {
|
||||
margin-bottom: 200px;
|
||||
}
|
||||
|
||||
.slide-container {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
user-select: none;
|
||||
gap: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.swiper-slide {
|
||||
width: 76%
|
||||
}
|
||||
|
||||
.slide-text-col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 130%;
|
||||
/* identical to box height, or 16px */
|
||||
/* Inactive */
|
||||
color: #C5C7CE;
|
||||
|
||||
}
|
||||
|
||||
.slider-control-container {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.slider-button-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 8px;
|
||||
}
|
||||
@@ -0,0 +1,70 @@
|
||||
import 'swiper/css';
|
||||
import 'swiper/css/navigation';
|
||||
import 'swiper/css/pagination';
|
||||
import 'swiper/css/scrollbar';
|
||||
import './SwiperComponent.css'
|
||||
import left from 'images/icons/Arrow_Left.svg'
|
||||
import right from 'images/icons/Arrow_Right.svg'
|
||||
|
||||
|
||||
import { Navigation, Pagination } from 'swiper';
|
||||
import { Swiper, SwiperSlide } from 'swiper/react';
|
||||
import { swiperArray } from 'utils/utils';
|
||||
|
||||
|
||||
export const SwiperComponent = () => {
|
||||
|
||||
return (
|
||||
<section className='section-swiper'>
|
||||
<div className='text-row-container'>
|
||||
<h2 className='title'>Функциональные <br></br> возможности.</h2>
|
||||
<p className='paragraph'>Интерактивная презентация увлекает покупателей и предоставляет актуальную информацию о жилом комплексе, отвечая на все интересующие вопросы и показывая важные особенности и преимущества объекта.</p>
|
||||
</div>
|
||||
|
||||
<div className='slider-container'>
|
||||
<Swiper slidesPerView={'auto'}
|
||||
slideToClickedSlide={true}
|
||||
navigation={{
|
||||
nextEl: ".button_next",
|
||||
prevEl: ".button_prev",
|
||||
}}
|
||||
pagination={{
|
||||
el: ".pagination",
|
||||
type: "fraction",
|
||||
}}
|
||||
modules={[Pagination, Navigation]}
|
||||
rewind={true}
|
||||
spaceBetween={104}>
|
||||
{swiperArray.map((i) => (
|
||||
<SwiperSlide
|
||||
|
||||
>
|
||||
<div className='slide-container'>
|
||||
<div className='slide-text-col'>
|
||||
<h3 className='title'>{i.title}</h3>
|
||||
<p className='paragraph paragraph-small'>{i.pargraph}</p>
|
||||
</div>
|
||||
<img src={i.img} alt={i.title} />
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
))}
|
||||
<div className='slider-control-container'>
|
||||
<div className='pagination'>
|
||||
</div>
|
||||
<div className='slider-button-container'>
|
||||
<button className='button-second button_prev'>
|
||||
<img src={left} />
|
||||
</button>
|
||||
<button className='button-second button_next'>
|
||||
<img src={right} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</Swiper>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
.section-title {
|
||||
padding-top: calc(112px + 36px);
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 200px;
|
||||
|
||||
}
|
||||
|
||||
.caption-container {
|
||||
width: 448px;
|
||||
}
|
||||
|
||||
.video-container {
|
||||
display: block;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
}
|
||||
|
||||
video {
|
||||
object-fit: cover;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
max-height: 760px;
|
||||
}
|
||||
|
||||
|
||||
.title-container {
|
||||
top: calc(112px + 50px);
|
||||
position: sticky;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 56px;
|
||||
width: 1200px;
|
||||
height: 60vh;
|
||||
margin: 0 auto;
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
import './Title.css'
|
||||
import video from './video.mp4'
|
||||
|
||||
export const Title = () => {
|
||||
return (<section className="section-title">
|
||||
<div className='title-container'>
|
||||
<h1 className="title">Интерактивный инструмент продаж для застройщиков</h1>
|
||||
<div className='caption-container'>
|
||||
<p className="caption">Помогаем девелоперам эффективно демонстрировать свой объект. Продавать больше и быстрее.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className='video-container'>
|
||||
<video controls={false} src={video}></video>
|
||||
</div>
|
||||
</section>)
|
||||
}
|
||||
Binary file not shown.
@@ -0,0 +1,27 @@
|
||||
.virtual-section {
|
||||
margin-bottom: 400px;
|
||||
}
|
||||
|
||||
.virtual-container {
|
||||
display: grid;
|
||||
gap: 32px;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.virtual-image-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.virtual-image {
|
||||
position: absolute;
|
||||
top: -80%;
|
||||
left: -50%;
|
||||
z-index: -1;
|
||||
|
||||
}
|
||||
|
||||
.virtual-text-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 32px;
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
import './VirtualTour.css'
|
||||
import glasses from 'images/Photo.png'
|
||||
|
||||
export const VirtualTour = () => {
|
||||
return (<section className="virtual-section">
|
||||
<div className="virtual-container">
|
||||
<div className='virtual-image-container'>
|
||||
<img className='virtual-image' src={glasses} />
|
||||
</div>
|
||||
<div className="virtual-text-container">
|
||||
<h2 className="title">Экскурсия в виртуальной реальности</h2>
|
||||
<p className="paragraph">Клиенту достаточно надеть шлем виртуальной реальности, чтобы прогуляться, оценить и ощутить пространство.
|
||||
Он полностью погружается в воссозданную реальность, чувствует удобство и уровень комфорта.</p>
|
||||
<button className="button-primary">
|
||||
<span>Записаться в шоу-рум</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>)
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 73 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 511 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 78 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 403 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 420 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 73 KiB |
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M6 12L18 12M6 12L12.3636 6M6 12L12.3636 18" stroke="#F2F2F2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 239 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M18 12L6 12M18 12L11.6364 18M18 12L11.6364 6" stroke="#F2F2F2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 241 B |
@@ -0,0 +1,4 @@
|
||||
<svg width="20" height="13" viewBox="0 0 20 13" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1 13C0.447716 13 0 12.5523 0 12V1C0 0.447715 0.447715 0 1 0H6.82201C7.28827 0 7.66624 0.377978 7.66624 0.844238V0.844238C7.66624 1.3105 7.28827 1.68848 6.82201 1.68848H2.34491C2.06877 1.68848 1.84491 1.91233 1.84491 2.18848V5.14941C1.84491 5.42556 2.06877 5.64941 2.34491 5.64941H6.42515C6.88966 5.64941 7.26621 6.02597 7.26621 6.49048V6.49048C7.26621 6.95499 6.88966 7.33154 6.42515 7.33154H2.34491C2.06877 7.33154 1.84491 7.5554 1.84491 7.83154V10.8115C1.84491 11.0877 2.06877 11.3115 2.34491 11.3115H6.89365C7.35991 11.3115 7.73789 11.6895 7.73789 12.1558V12.1558C7.73789 12.622 7.35991 13 6.89365 13H1Z" fill="#F2F2F2"/>
|
||||
<path d="M19.0865 0C19.591 0 20 0.408988 20 0.913501V12C20 12.5523 19.5523 13 19 13H18.8462C18.5082 13 18.193 12.8293 18.0085 12.5461L12.1107 3.49922C12.0972 3.47838 12.074 3.46582 12.0491 3.46582V3.46582C12.0085 3.46582 11.9755 3.49876 11.9755 3.5394V12.0775C11.9755 12.587 11.5625 13 11.0531 13V13C10.5436 13 10.1306 12.587 10.1306 12.0775V1C10.1306 0.447715 10.5783 0 11.1306 0H11.2963C11.6343 0 11.9495 0.170802 12.1341 0.454032L18.0378 9.51347C18.0514 9.53431 18.0746 9.54687 18.0994 9.54687V9.54687C18.1401 9.54687 18.173 9.51394 18.173 9.4733V0.913501C18.173 0.408988 18.582 0 19.0865 0V0Z" fill="#F2F2F2"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
@@ -0,0 +1,4 @@
|
||||
<svg width="20" height="13" viewBox="0 0 20 13" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0.897734 12.7877C0.401929 12.7877 0 12.3858 0 11.89V0.999999C0 0.447714 0.447715 0 1 0H4.24172C5.16366 0 5.92872 0.170669 6.5369 0.512008C7.14894 0.853346 7.60604 1.32581 7.90819 1.92939C8.21034 2.52882 8.36142 3.2219 8.36142 4.00865C8.36142 4.79123 8.20841 5.48015 7.90238 6.07541C7.60023 6.66651 7.14313 7.12648 6.53109 7.45533C5.92291 7.78418 5.15785 7.94861 4.23591 7.94861H1.85311C1.39447 7.94861 1.02266 7.5768 1.02266 7.11816C1.02266 6.65951 1.39447 6.2877 1.85311 6.2877H4.07321C4.65427 6.2877 5.12686 6.19821 5.49099 6.01921C5.859 5.84022 6.12822 5.58005 6.29866 5.23871C6.46911 4.89737 6.55433 4.48735 6.55433 4.00865C6.55433 3.52578 6.46717 3.10743 6.29285 2.7536C6.12241 2.39978 5.85319 2.1292 5.48518 1.94188C5.12105 1.7504 4.64265 1.65466 4.04997 1.65466H2.29547C2.01933 1.65466 1.79547 1.87852 1.79547 2.15466V11.89C1.79547 12.3858 1.39354 12.7877 0.897734 12.7877ZM5.32848 7.01825C5.66354 7.01825 5.97028 7.20621 6.12241 7.50474L8.14113 11.4661C8.44931 12.0708 8.01003 12.7877 7.3313 12.7877C6.9869 12.7877 6.67209 12.5931 6.51818 12.285L4.53132 8.30754C4.23536 7.71508 4.66621 7.01825 5.32848 7.01825Z" fill="#F2F2F2"/>
|
||||
<path d="M18.1987 0.900639C18.1987 0.403229 18.602 0 19.0994 0C19.5968 0 20 0.40323 20 0.900639V8.41066C20 9.30564 19.8044 10.0986 19.4131 10.7896C19.0219 11.4765 18.4718 12.0176 17.7629 12.4131C17.054 12.8044 16.2231 13 15.2702 13C14.3211 13 13.4922 12.8044 12.7833 12.4131C12.0744 12.0176 11.5243 11.4765 11.1331 10.7896C10.7418 10.0986 10.5462 9.30564 10.5462 8.41066V0.897733C10.5462 0.401929 10.9481 0 11.4439 0C11.9397 0 12.3417 0.401929 12.3417 0.897734V8.25456C12.3417 8.83317 12.4598 9.34726 12.6961 9.79683C12.9363 10.2464 13.2752 10.6002 13.713 10.8583C14.1507 11.1122 14.6698 11.2392 15.2702 11.2392C15.8745 11.2392 16.3955 11.1122 16.8332 10.8583C17.2748 10.6002 17.6119 10.2464 17.8443 9.79683C18.0806 9.34726 18.1987 8.83317 18.1987 8.25456V0.900639Z" fill="#F2F2F2"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.0 KiB |
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.9486 6.31625C19.0739 5.94037 18.9655 5.52597 18.6721 5.25964C18.3788 4.99331 17.9559 4.92529 17.5938 5.08621L4.92082 10.7187C3.61718 11.298 3.78221 13.1986 5.16622 13.5446L7.2927 14.0762C7.9053 14.2294 8.55425 14.0842 9.04323 13.6847L14.4913 9.23314C14.6777 9.08084 14.9248 9.32698 14.7732 9.51396L10.7598 14.4648C10.2656 15.0744 10.1736 15.9168 10.5246 16.6187L11.899 19.3676C12.4967 20.5628 14.2411 20.4389 14.6637 19.1711L18.9486 6.31625Z" fill="#F2F2F2"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 616 B |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 12 KiB |
+9
-5
@@ -1,13 +1,17 @@
|
||||
@import url(./styles/styles.css);
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
||||
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
||||
margin: 0 auto;
|
||||
min-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Helvetica Neue',
|
||||
sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
background: #151619;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
||||
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 'Inter',
|
||||
monospace;
|
||||
}
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,54 @@
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src:
|
||||
url('./inter-v12-latin_cyrillic-regular.woff2') format('woff2'),
|
||||
url('./inter-v12-latin_cyrillic-regular.woff') format('woff');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src:
|
||||
url('./inter-v12-latin_cyrillic-300.woff2') format('woff2'),
|
||||
url('./inter-v12-latin_cyrillic-300.woff') format('woff');
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src:
|
||||
url('./inter-v12-latin_cyrillic-500.woff2') format('woff2'),
|
||||
url('./inter-v12-latin_cyrillic-500.woff') format('woff');
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src:
|
||||
url('./inter-v12-latin_cyrillic-600.woff2') format('woff2'),
|
||||
url('./inter-v12-latin_cyrillic-600.woff') format('woff');
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src:
|
||||
url('./inter-v12-latin_cyrillic-700.woff2') format('woff2'),
|
||||
url('./inter-v12-latin_cyrillic-700.woff') format('woff');
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
|
||||
@font-face {
|
||||
font-family: 'GilroyWebRegular';
|
||||
src: url('./Gilroy_Regular.woff'),
|
||||
url('./Gilroy_Regular.woff2');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,151 @@
|
||||
@import url(./fonts/fonts.css);
|
||||
|
||||
/* global styles for headings, buttons, and so */
|
||||
|
||||
.title {
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
font-family: 'GilroyWebRegular';
|
||||
-webkit-text-fill-color: transparent;
|
||||
-webkit-background-clip: text;
|
||||
background-color: initial;
|
||||
background-image: linear-gradient(180deg, #bc75ff, #798fff);
|
||||
background-repeat: repeat;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
line-height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
main {
|
||||
box-sizing: border-box;
|
||||
margin: 0 auto;
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 72px;
|
||||
background: linear-gradient(180deg, #798FFF -41.07%, #D375FF 100%);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 36px;
|
||||
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 24px;
|
||||
|
||||
}
|
||||
|
||||
.caption {
|
||||
margin: 0;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 140%;
|
||||
/* or 22px */
|
||||
|
||||
|
||||
/* White */
|
||||
|
||||
color: #F2F2F2;
|
||||
}
|
||||
|
||||
.caption-small {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
button {
|
||||
font-family: 'Inter';
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.button-primary {
|
||||
transition: background 0.2s ease-in-out;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 8px 16px 8px 8px;
|
||||
gap: 4px;
|
||||
width: fit-content;
|
||||
height: fit-content;
|
||||
background: linear-gradient(180deg, #BC75FF 0%, #798FFF 100%);
|
||||
border-radius: 20px;
|
||||
color: #F2F2F2;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 150%;
|
||||
}
|
||||
|
||||
.button-primary:hover {
|
||||
transition: background 0.2s ease-in-out;
|
||||
background: linear-gradient(180deg, #798FFF -41.07%, #D375FF 100%);
|
||||
}
|
||||
|
||||
.button-second {
|
||||
transition: background 0.2s ease-in-out;
|
||||
|
||||
padding: 8px;
|
||||
background: #23242A;
|
||||
border-radius: 20px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.button-second:hover {
|
||||
transition: background 0.2s ease-in-out;
|
||||
background: #2E3038;
|
||||
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
height: 112px;
|
||||
position: fixed;
|
||||
z-index: 11;
|
||||
width: 100%;
|
||||
padding: 35px 48px;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background: #151619;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.paragraph {
|
||||
margin: 0;
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 140%;
|
||||
/* or 25px */
|
||||
/* Inactive */
|
||||
color: #C5C7CE;
|
||||
|
||||
}
|
||||
|
||||
.paragraph-small {
|
||||
font-size: 16px;
|
||||
|
||||
}
|
||||
|
||||
.subparagraph {
|
||||
font-size: 16px;
|
||||
color: #C5C7CE;
|
||||
|
||||
}
|
||||
|
||||
.text-row-container {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 32px;
|
||||
margin-bottom: 118px;
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
export const crmText = {
|
||||
title: 'Интеграция с CRM - системой.',
|
||||
paragraph: 'Приложение передает информацию о клиенте в CRM-систему застройщика и получает актуальную информацию по ценам и статусам квартир.'
|
||||
}
|
||||
|
||||
export const infrastractureText = {
|
||||
title: 'Вся инфрастуктурана одном экране.',
|
||||
paragraph: 'Возможность оценить инфраструктуру района покажет важные для клиента точки интереса и время, за которое он сможет до них дойти.'
|
||||
}
|
||||
|
||||
export const filterSearchText = {
|
||||
title: 'Параметрический поиск квартир.',
|
||||
paragraph: 'Фильтр позволит отметить конкретные преимущества, определить количество комнат, желаемый этаж, цену, и получить выборку подходящих вариантов'
|
||||
}
|
||||
|
||||
export const interiorText = {
|
||||
title: 'Конфигуратор интерьера.',
|
||||
paragraph: 'Клиент может свободно выбирать мебель и дизайн с помощью конфигуратора интерьера. Возможно выбрать стиль всей квартиры или изменить отдельные детали.'
|
||||
}
|
||||
|
||||
export const wishlistText = {
|
||||
title: 'Формирование вишлиста.',
|
||||
paragraph: 'Клиент может добавить варианты квартир в избранное, сравнить их между собой по основным параметрам и выбрать свою будущую квартиру.'
|
||||
}
|
||||
|
||||
export const renderText = {
|
||||
title: 'Любой рендер за несколько секунд.',
|
||||
paragraph: 'Когда для рекламы вам понадобится любой объект с любого ракурса, просто сделайте фотографию внутри презентации.'
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
import { crmText, filterSearchText, infrastractureText, interiorText, renderText, wishlistText } from './texts'
|
||||
import form from 'images/Form.png'
|
||||
import filter from 'images/FilterSearch.png'
|
||||
import infrastracture from 'images/Infrastructure.png'
|
||||
import interior from 'images/Interior.png'
|
||||
import render from 'images/Render.png'
|
||||
import wishlist from 'images/Wishlist.png'
|
||||
|
||||
|
||||
export {crmText, infrastractureText, filterSearchText, interiorText, wishlistText, renderText} from './texts'
|
||||
export const zero = 0
|
||||
|
||||
export const precentage = '%'
|
||||
|
||||
export const counters = [{ from: zero, to: 10, text: 'plain text', precentage: false }, { from: zero, to: 26, text: 'plain text', precentage: false }, { from: zero, to: 32, text: 'plain text', precentage: precentage }, { from: zero, to: 12, text: 'plain text', precentage: precentage }]
|
||||
|
||||
|
||||
export const swiperArray = [
|
||||
{title: crmText.title, pargraph: crmText.paragraph, img: form},
|
||||
{title: infrastractureText.title, pargraph: infrastractureText.paragraph, img: infrastracture},
|
||||
{title: filterSearchText.title, pargraph: filterSearchText.paragraph, img: filter},
|
||||
{title: interiorText.title, pargraph: interiorText.paragraph, img: interior},
|
||||
{title: wishlistText.title, pargraph: wishlistText.paragraph, img: wishlist},
|
||||
{title: renderText.title, pargraph: renderText.paragraph, img: render},
|
||||
|
||||
]
|
||||
Reference in New Issue
Block a user