first
This commit is contained in:
DmitriyB
@@ -0,0 +1,15 @@
|
||||
{
|
||||
"usesTypeScript": false,
|
||||
"usesCssModule": false,
|
||||
"cssPreprocessor": "css",
|
||||
"testLibrary": "None",
|
||||
"component": {
|
||||
"default": {
|
||||
"path": "src/components",
|
||||
"withStyle": true,
|
||||
"withTest": false,
|
||||
"withStory": false,
|
||||
"withLazy": false
|
||||
}
|
||||
}
|
||||
}
|
||||
Generated
+1775
File diff suppressed because it is too large
Load Diff
@@ -6,9 +6,16 @@
|
||||
"@testing-library/jest-dom": "^5.16.5",
|
||||
"@testing-library/react": "^13.4.0",
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
"celebrate": "^15.0.1",
|
||||
"framer-motion": "^8.4.2",
|
||||
"generate-react-cli": "^8.2.0",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-minimal-pie-chart": "^8.4.0",
|
||||
"react-player": "^2.11.0",
|
||||
"react-scripts": "5.0.1",
|
||||
"react-slider": "^2.0.4",
|
||||
"swiper": "^8.4.5",
|
||||
"web-vitals": "^2.1.4"
|
||||
},
|
||||
"scripts": {
|
||||
|
||||
+23
-21
@@ -1,21 +1,21 @@
|
||||
<!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" />
|
||||
<!--
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<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" />
|
||||
<!--
|
||||
<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.
|
||||
@@ -24,12 +24,13 @@
|
||||
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>
|
||||
<!--
|
||||
<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.
|
||||
|
||||
@@ -39,5 +40,6 @@
|
||||
To begin the development, run `npm start` or `yarn start`.
|
||||
To create a production bundle, use `npm run build` or `yarn build`.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
+24
@@ -1,7 +1,31 @@
|
||||
.App {
|
||||
background-color: #141414;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
.welcome-container {
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.welcome-header {
|
||||
z-index: 99;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 160px;
|
||||
padding: 160px 240px;
|
||||
margin: 0 auto;
|
||||
max-width: 1440px;
|
||||
}
|
||||
|
||||
.App-logo {
|
||||
height: 40vmin;
|
||||
pointer-events: none;
|
||||
|
||||
+55
-16
@@ -1,23 +1,62 @@
|
||||
import logo from './logo.svg';
|
||||
import './App.css';
|
||||
import { Welcome } from './components/Welcome/Welcome'
|
||||
import { Header } from './components/Header/Header';
|
||||
import { motion } from 'framer-motion'
|
||||
import { useState } from 'react';
|
||||
import { SalesInstrument } from './components/SalesInstrument/SalesInstrument'
|
||||
import InteractiveTech from './components/InteractiveTech/InteractiveTech';
|
||||
import Integration from './components/Integration/Integration';
|
||||
import { Infrastracture } from './components/Infrastracture/Infrastracture';
|
||||
import { SimpleSearch } from './components/SimpleSearch/SimpleSearch';
|
||||
import { Immersion } from './components/Immersion/Immersion';
|
||||
import { Planing } from './components/Planing/Planing';
|
||||
import VirtualTour from './components/VirtualTour/VirtualTour';
|
||||
import Wishlist from './components/Wishlist/Wishlist';
|
||||
import { SalesPromotion } from './components/SalesPromotion/SalesPromotion';
|
||||
import { Analytics } from './components/Analytics/Analytics';
|
||||
import { RemoteSelling } from './components/RemoteSelling/RemoteSelling';
|
||||
|
||||
|
||||
const textAnimation = {
|
||||
open: { opacity: 1 },
|
||||
closed: { opacity: 0 }
|
||||
}
|
||||
|
||||
|
||||
function App() {
|
||||
|
||||
const [isOpen, setIsOpen] = useState(true);
|
||||
const [isAnimation, setAnimation] = useState('')
|
||||
|
||||
const handleScroll = () => {
|
||||
setIsOpen(false)
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
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 onWheel={handleScroll} className="App" style={isOpen ? { overflow: 'hidden' } : { overflow: 'visible' }}>
|
||||
<div className="welcome-header" style={isOpen ? { position: 'fixed' } : { position: 'static' }}>
|
||||
<Header></Header>
|
||||
</div>
|
||||
<Welcome
|
||||
isAnimation={isAnimation} setAnimation={setAnimation}
|
||||
isOpen={isOpen} setIsOpen={setIsOpen}></Welcome>
|
||||
<motion.div variants={textAnimation} animate={isAnimation === 'closed' ? 'open' : 'closed'} initial={'closed'} className='content'>
|
||||
<SalesInstrument isAnimation={isAnimation} open={isOpen}></SalesInstrument>
|
||||
<InteractiveTech></InteractiveTech>
|
||||
<Integration></Integration>
|
||||
<Infrastracture></Infrastracture>
|
||||
<SimpleSearch></SimpleSearch>
|
||||
<Immersion></Immersion>
|
||||
<Planing></Planing>
|
||||
<VirtualTour></VirtualTour>
|
||||
<Wishlist></Wishlist>
|
||||
<SalesPromotion></SalesPromotion>
|
||||
<Analytics></Analytics>
|
||||
<RemoteSelling></RemoteSelling>
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,18 @@
|
||||
import "../../styles/styles.css"
|
||||
import { AnalyticsDashboard } from "./AnalyticsDashboard/AnalyticsDashboard";
|
||||
|
||||
export const Analytics = () => {
|
||||
return (<section className='block-type-trnsprnt block-type-trnsprnt-padding-off'>
|
||||
<div className='container'>
|
||||
<div className='text-container'>
|
||||
<h2 className='title'>Анализируем поведение пользователей.</h2>
|
||||
<p className='text-main'>Система внутренней аналитики программы собирает информацию о поведении пользователя и эффективности работы менеджеров для создания отчета, содержащего необходимые метрики.</p>
|
||||
</div>
|
||||
</div>
|
||||
<AnalyticsDashboard></AnalyticsDashboard>
|
||||
|
||||
</section>)
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,778 @@
|
||||
|
||||
.mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.graph__container {
|
||||
font-family: 'GilroyWebRegular';
|
||||
display: -ms-grid;
|
||||
display: grid;
|
||||
-ms-grid-rows: 1fr 26px auto;
|
||||
grid-template-rows: 1fr auto;
|
||||
gap: 26px;
|
||||
}
|
||||
|
||||
.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 {
|
||||
background: #1E1E1E;
|
||||
height: 256px;
|
||||
-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;
|
||||
border-radius: 16px;
|
||||
padding: 32px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 20px;
|
||||
line-height: 120%;
|
||||
/* identical to box height, or 24px */
|
||||
|
||||
|
||||
/* Landing/White */
|
||||
|
||||
color: #EBEBEB;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.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 {
|
||||
background: #1E1E1E;
|
||||
|
||||
-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;
|
||||
border-radius: 16px;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.graph__text {
|
||||
text-align: left;
|
||||
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 140%;
|
||||
color: #EBEBEB;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.graph__text_mobile {
|
||||
text-align: left;
|
||||
|
||||
display: none;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 140%;
|
||||
color: #EBEBEB;
|
||||
}
|
||||
|
||||
.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 {
|
||||
text-align: left;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.graph__bar_row:last-of-type {
|
||||
margin-bottom: 0;
|
||||
|
||||
}
|
||||
|
||||
.graph__caption {
|
||||
text-align: left;
|
||||
|
||||
width: 92px;
|
||||
margin: 0;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 140%;
|
||||
}
|
||||
|
||||
.graph__bar_width_container {
|
||||
width: 169px;
|
||||
}
|
||||
|
||||
.graph__bar_1 {
|
||||
width: 100%;
|
||||
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: 4px;
|
||||
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: 4px;
|
||||
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: 4px;
|
||||
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: 4px;
|
||||
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: 4px;
|
||||
width: 262px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.sales__bar {
|
||||
width: 100%;
|
||||
|
||||
padding-top: 3px;
|
||||
padding-bottom: 5px;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
font-family: 'GilroyWebRegular';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
line-height: 140%;
|
||||
/* identical to box height, or 17px */
|
||||
|
||||
text-align: center;
|
||||
border-radius: 4px;
|
||||
height: 25px;
|
||||
text-align: center;
|
||||
background: -o-linear-gradient(33.25deg, #D375FF 19.74%, #798FFF 82.32%);
|
||||
background: linear-gradient(56.75deg, #D375FF 19.74%, #798FFF 82.32%);
|
||||
}
|
||||
|
||||
.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 {
|
||||
text-align: left;
|
||||
color: #EBEBEB;
|
||||
|
||||
width: 116px;
|
||||
height: 51px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1600px) {
|
||||
.graph__row_2 {
|
||||
-ms-grid-columns: 1fr 1fr 1fr 1fr 456px;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 456px;
|
||||
}
|
||||
|
||||
.graph__container {
|
||||
gap: 36px;
|
||||
}
|
||||
|
||||
.graph__text {
|
||||
font-weight: 400;
|
||||
font-size: 22px;
|
||||
line-height: 140%;
|
||||
padding-top: 32px;
|
||||
}
|
||||
|
||||
.graph__row_item {
|
||||
padding: 40px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.graph__row_item_s {
|
||||
padding: 30px;
|
||||
height: 202px;
|
||||
}
|
||||
|
||||
.graph__color_elem {
|
||||
font-size: 58px;
|
||||
|
||||
}
|
||||
|
||||
.graph__title_s {
|
||||
white-space: pre-line;
|
||||
font-size: 17px;
|
||||
line-height: 120%;
|
||||
height: 61px;
|
||||
width: auto;
|
||||
|
||||
}
|
||||
|
||||
.graph__title {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.graph__procentage {
|
||||
font-size: 15px;
|
||||
height: 29px;
|
||||
}
|
||||
|
||||
.background__row {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sales__procentage {
|
||||
width: 45px;
|
||||
font-size: 14.4px;
|
||||
}
|
||||
|
||||
.graph__caption {
|
||||
font-size: 16.8px;
|
||||
width: 112px;
|
||||
|
||||
}
|
||||
|
||||
.sales__bar {
|
||||
font-size: 14.4px;
|
||||
}
|
||||
|
||||
|
||||
.graph__bar_width_container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sales__row {
|
||||
gap: 19px;
|
||||
}
|
||||
|
||||
.legend__container {
|
||||
font-size: 17px;
|
||||
gap: 7px;
|
||||
}
|
||||
|
||||
.legend__point {
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
@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-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 {
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,147 @@
|
||||
import './AnalyticsDashboard.css'
|
||||
import { PieChartComp } from './PieChartComp/PieChartComp'
|
||||
|
||||
export const AnalyticsDashboard = () => {
|
||||
return (
|
||||
<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 className="main-block_subblock">
|
||||
<div className="graph__text_mobile">Полученный отчет позволяет сделать процесс демонстрации жилого комплекса еще эффективнее.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
/*
|
||||
* 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 (min-width: 1600px) {
|
||||
.chart {
|
||||
width: 174px;
|
||||
height: 174px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@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,42 @@
|
||||
import { PieChart } from 'react-minimal-pie-chart';
|
||||
import './PieChartComp.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: 'GilroyWebRegular',
|
||||
fill: '#EBEBEB',
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<div className='chart'>
|
||||
<PieChart
|
||||
label={({ dataEntry }) => `${Math.round(dataEntry.percentage)} %`}
|
||||
data={dataMock}
|
||||
labelStyle={
|
||||
defaultLabelStyle
|
||||
}
|
||||
labelPosition={65}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,113 @@
|
||||
import React, { CSSProperties, useState } from "react";
|
||||
import logo from "./logoIcon.svg";
|
||||
import chevron from "./chevronIcon.svg";
|
||||
import "./header.css";
|
||||
import "./styles.css"
|
||||
|
||||
export const Header = () => {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [menuOpen, setMenuOpen] = useState(false);
|
||||
const [opacity, setOpacity] = useState(false);
|
||||
const [currentLang, setCurrentLang] = useState('ru')
|
||||
|
||||
function handleUpdateLanguage(value) {
|
||||
setCurrentLang((value));
|
||||
setOpen((prev) => !prev);
|
||||
}
|
||||
|
||||
function handleOpen() {
|
||||
setOpen((prev) => !prev);
|
||||
}
|
||||
|
||||
function handleOpacity() {
|
||||
setOpacity(true);
|
||||
}
|
||||
|
||||
const style = {
|
||||
background: "rgba(235, 235, 235, 0.2",
|
||||
};
|
||||
|
||||
const iconTransform = {
|
||||
transform: "rotate(-90deg)",
|
||||
};
|
||||
|
||||
const setBackground = opacity && !open;
|
||||
|
||||
function setOpacityAndMenu() {
|
||||
setMenuOpen(true);
|
||||
const targetElement = document.querySelector("body");
|
||||
targetElement.style.overflow = "hidden";
|
||||
}
|
||||
|
||||
function openMenu() {
|
||||
setMenuOpen(false);
|
||||
const targetElement = document.querySelector("body");
|
||||
targetElement.style.overflow = "visible";
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={
|
||||
"header-main"
|
||||
}
|
||||
>
|
||||
<div className="header-container">
|
||||
<img className="header-logo" alt="company-logo" src={logo} />
|
||||
<div className="header-buttons">
|
||||
<div className="header__buttons_wrapper">
|
||||
<a className="header-button">Контакты</a>
|
||||
<a className="header-button">О компании</a>
|
||||
</div>
|
||||
<div
|
||||
className={
|
||||
open
|
||||
? "header-lang-button header-lang-button_active"
|
||||
: "header-lang-button header-lang-button_disabled"
|
||||
}
|
||||
style={setBackground ? style : { background: "transparent" }}
|
||||
>
|
||||
<img
|
||||
alt="img"
|
||||
src={chevron}
|
||||
className="header-select__icon"
|
||||
style={
|
||||
open
|
||||
? iconTransform
|
||||
: {
|
||||
transform: "rotate(0deg)",
|
||||
}
|
||||
}
|
||||
></img>
|
||||
<div className="wrapper__button">
|
||||
<div
|
||||
onMouseEnter={handleOpacity}
|
||||
onMouseLeave={() => setOpacity(false)}
|
||||
onClick={handleOpen}
|
||||
className=" header-lang-button-picked"
|
||||
>
|
||||
{currentLang.toLocaleUpperCase()}
|
||||
</div>
|
||||
</div>
|
||||
{currentLang === "ru" ? (
|
||||
<button
|
||||
value={"en"}
|
||||
onClick={(e) => handleUpdateLanguage(e.target.value)}
|
||||
className="header-lang-button-text"
|
||||
>
|
||||
EN
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
onClick={(e) => handleUpdateLanguage(e.target.value)}
|
||||
value={"ru"}
|
||||
className="header-lang-button-text"
|
||||
>
|
||||
RU
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,3 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M6.0001 12.6666L10.6667 8L6.0001 3.33334" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 218 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="M12 12L16.9996 17M12 12L17 7M12 12L7 17M12 12L7.00002 7" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 233 B |
@@ -0,0 +1,239 @@
|
||||
.header-container {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 135%;
|
||||
display: flex;
|
||||
padding: 30px 40px;
|
||||
color: #ffffff;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.header__buttons_wrapper {
|
||||
display: flex;
|
||||
gap: 40px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.burger__button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.header-logo {
|
||||
width: 31px;
|
||||
height: 50px;
|
||||
|
||||
}
|
||||
|
||||
.header-buttons {
|
||||
margin-right: 96px;
|
||||
}
|
||||
|
||||
.header-button {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 125%;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
color: #ffffff;
|
||||
cursor: pointer;
|
||||
padding: 0px;
|
||||
appearance: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.header-lang-button-text:hover {
|
||||
background: rgba(235, 235, 235, 0.2);
|
||||
|
||||
}
|
||||
|
||||
.wrapper__button {
|
||||
margin-right: 10px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.header-lang-button {
|
||||
position: absolute;
|
||||
right: 40px;
|
||||
top: 40px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
width: 55px;
|
||||
padding: 6px 8px 5px 12px;
|
||||
box-sizing: border-box;
|
||||
height: 29px;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
line-height: 13px;
|
||||
background-color: transparent;
|
||||
border: 2px solid #ebebeb;
|
||||
border-radius: 12px;
|
||||
transition: height ease-in 0.5s;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.header-lang-button_disabled {
|
||||
height: 29px;
|
||||
}
|
||||
|
||||
.header-lang-button_active {
|
||||
height: 51px;
|
||||
}
|
||||
|
||||
.header-lang-button_active {
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.header-lang-button-text {
|
||||
|
||||
width: 100%;
|
||||
appearance: none;
|
||||
background-color: transparent;
|
||||
color: #ebebeb;
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
margin: 0;
|
||||
border: none;
|
||||
height: 13px;
|
||||
-webkit-appearance: none;
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.header-lang-button-picked {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.header-select__icon {
|
||||
top: 6px;
|
||||
height: 13px;
|
||||
right: 5px;
|
||||
position: absolute;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.select {
|
||||
background-color: transparent;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-self: center;
|
||||
gap: 11px;
|
||||
position: relative;
|
||||
border: none;
|
||||
outline-color: transparent;
|
||||
outline-style: none;
|
||||
color: #ebebeb;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.option {
|
||||
/* or 16px */
|
||||
|
||||
|
||||
/* Landing/White */
|
||||
|
||||
color: #EBEBEB;
|
||||
}
|
||||
|
||||
.burger__button {
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
box-sizing: border-box;
|
||||
|
||||
}
|
||||
|
||||
.line__burger {
|
||||
background-color: #FFFFFF;
|
||||
width: 14px;
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1600px) {
|
||||
.header-container {
|
||||
padding: 35px 48px;
|
||||
}
|
||||
|
||||
.header-logo {
|
||||
width: 46px;
|
||||
height: 74px;
|
||||
}
|
||||
|
||||
.header-button {
|
||||
font-size: 20px;
|
||||
|
||||
}
|
||||
|
||||
.header-lang-button_active {
|
||||
height: auto;
|
||||
|
||||
}
|
||||
|
||||
.header-buttons {
|
||||
gap: 48px;
|
||||
}
|
||||
|
||||
.header-lang-button {
|
||||
width: 70px;
|
||||
padding: 7px 15px;
|
||||
top: 57px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 1279px) {
|
||||
.header-container {
|
||||
padding: 30px 12px;
|
||||
}
|
||||
|
||||
.header-lang-button {
|
||||
top: 40px;
|
||||
right: 12px;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.header-container {
|
||||
padding: 15px 12px;
|
||||
}
|
||||
|
||||
.header-lang-button {
|
||||
right: 12px;
|
||||
top: 25%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 639px) {
|
||||
.header {
|
||||
background: #262626;
|
||||
|
||||
}
|
||||
|
||||
.header-container {
|
||||
padding: 8px 10px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.burger__button {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 12 KiB |
@@ -0,0 +1,510 @@
|
||||
.main-block__container {
|
||||
margin: 0 auto 80px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 56px;
|
||||
}
|
||||
|
||||
.main-block__caption_l {
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 140%;
|
||||
margin: 0;
|
||||
color: #ebebeb;
|
||||
}
|
||||
|
||||
.main-block__subblock-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.main-block_subblock {
|
||||
width: 480px;
|
||||
display: flex;
|
||||
margin: 0 auto;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 40px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 140%;
|
||||
/* or 25px */
|
||||
|
||||
/* Landing/White */
|
||||
|
||||
color: #ebebeb;
|
||||
}
|
||||
|
||||
.main-block__title {
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 64px;
|
||||
line-height: 100%;
|
||||
color: #ebebeb;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.main-block__title_small {
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 100%;
|
||||
color: #ebebeb;
|
||||
margin: 0;
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.main-block__title_gardient {
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 64px;
|
||||
line-height: 100%;
|
||||
margin: 0;
|
||||
background-image: linear-gradient(56.75deg, #d375ff 19.74%, #798fff 82.32%);
|
||||
background-size: 100%;
|
||||
background-repeat: repeat;
|
||||
background-color: transparent;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.main-block__title_gardient_small {
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 100%;
|
||||
margin: 0;
|
||||
background-image: linear-gradient(56.75deg, #d375ff 19.74%, #798fff 82.32%);
|
||||
background-size: 100%;
|
||||
background-repeat: repeat;
|
||||
background-color: transparent;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.main-block__caption {
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 140%;
|
||||
margin: 20px 0 0 0;
|
||||
color: #ebebeb;
|
||||
}
|
||||
|
||||
.main-block__caption_color {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 0px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 150%;
|
||||
color: #ebebeb;
|
||||
letter-spacing: 0.02em;
|
||||
text-transform: uppercase;
|
||||
color: #d375ff;
|
||||
width: 416px;
|
||||
}
|
||||
|
||||
.main-block__button {
|
||||
font-family: "GilroyWebRegular";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 125%;
|
||||
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 125%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 14px 18px 12px 24px;
|
||||
gap: 8px;
|
||||
box-sizing: border-box;
|
||||
width: 164px;
|
||||
height: 40px;
|
||||
|
||||
border: 1px solid #454545;
|
||||
border-radius: 32px;
|
||||
background-color: transparent;
|
||||
color: #ebebeb;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.main-block__icon {
|
||||
opacity: 1;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.main-block__icon_container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 100%;
|
||||
border: 1px solid #ffffff;
|
||||
}
|
||||
|
||||
.main-block__button:hover > div > img {
|
||||
transition: opacity ease-out 0.2s;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.main-block__button:hover {
|
||||
border: 1px solid #ffffff;
|
||||
transition: border ease-out 0.2s;
|
||||
}
|
||||
|
||||
.link {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1600px) {
|
||||
.main-block__title {
|
||||
font-size: 76px;
|
||||
}
|
||||
|
||||
.main-block__title_gardient {
|
||||
font-size: 76px;
|
||||
}
|
||||
|
||||
.main-block__caption_color {
|
||||
width: 87%;
|
||||
font-size: 17px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.main-block__caption_l {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.main-block__caption {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.main-block__title_small {
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
.main-block__title_gardient_small {
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
.main-block_subblock {
|
||||
width: 576px;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.main-block__button {
|
||||
width: 196px;
|
||||
height: 60px;
|
||||
padding: 14px 18px 12px 24px;
|
||||
gap: 9.6px;
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
line-height: 125%;
|
||||
}
|
||||
|
||||
.main-block__icon_container {
|
||||
width: 19px;
|
||||
height: 19px;
|
||||
}
|
||||
|
||||
.main-block__icon {
|
||||
width: 9.5;
|
||||
height: 9.5;
|
||||
}
|
||||
}
|
||||
|
||||
.popup__container {
|
||||
width: 494px;
|
||||
|
||||
background: #262626;
|
||||
|
||||
border-radius: 32px;
|
||||
padding: 40px 48px 16px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.logo__popup {
|
||||
height: auto;
|
||||
width: 100%;
|
||||
margin-bottom: 48px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.popup {
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
line-height: 22px;
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.button__container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.button__title {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.button {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
justify-content: center;
|
||||
background-color: #567ece;
|
||||
border-radius: 12px;
|
||||
outline: none;
|
||||
border: none;
|
||||
color: #ffffff;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
background: #6a92e2;
|
||||
transition: 0.3s ease;
|
||||
}
|
||||
|
||||
.button:disabled {
|
||||
background-color: #404040;
|
||||
transition: 0.3 ease;
|
||||
}
|
||||
|
||||
.button__disabled:hover {
|
||||
background: #595959;
|
||||
transition: 0.3 ease;
|
||||
|
||||
}
|
||||
|
||||
.button__disabled {
|
||||
background-color: #404040;
|
||||
transition: 0.3 ease;
|
||||
}
|
||||
|
||||
.line {
|
||||
height: 1px;
|
||||
background-color: #404040;
|
||||
width: 280px;
|
||||
margin: 0 auto;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.popup__caption {
|
||||
margin: 0 auto;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
padding: 10px 8px;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
line-height: 20px;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.popup__caption:hover {
|
||||
opacity: 0.8;
|
||||
transition: 0.3s ease;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1279px) {
|
||||
.main-block__container {
|
||||
gap: 44px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.main-block__container {
|
||||
margin: 30px 12px 60px;
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
.main-block__caption {
|
||||
font-size: 2.8vw;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 140%;
|
||||
}
|
||||
|
||||
.main-block__caption_color {
|
||||
font-size: 2.1vw;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.main-block__caption_l {
|
||||
font-size: 2.5vw;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 140%;
|
||||
}
|
||||
|
||||
.main-block__title {
|
||||
font-size: 10.6vw;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 100%;
|
||||
}
|
||||
|
||||
.main-block__title_gardient {
|
||||
font-size: 10.6vw;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 100%;
|
||||
}
|
||||
|
||||
.main-block_subblock {
|
||||
font-weight: 400;
|
||||
line-height: 140%;
|
||||
font-size: 2.8vw;
|
||||
}
|
||||
|
||||
.main-block__title_small {
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 100%;
|
||||
font-size: 6.25vw;
|
||||
}
|
||||
|
||||
.main-block__title_gardient_small {
|
||||
font-size: 6.25vw;
|
||||
}
|
||||
|
||||
.main-block__subblock-container {
|
||||
display: block;
|
||||
margin: 0 0;
|
||||
}
|
||||
|
||||
.main-block_subblock {
|
||||
width: 80%;
|
||||
margin: 0;
|
||||
font-size: 3vw;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 639px) {
|
||||
.popup__container {
|
||||
width: 100%;
|
||||
border-radius: 0px;
|
||||
height: 100%;
|
||||
padding: 32px 10px 67px;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.logo__popup {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.line {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.popup {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.popup__caption {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.main-block__container {
|
||||
margin: 42px 0px 40px;
|
||||
gap: 30px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.button {
|
||||
font-size: 14px;
|
||||
padding-top: 14px;
|
||||
padding-bottom: 14px;
|
||||
}
|
||||
|
||||
.main-block_subblock {
|
||||
gap: 30px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.main-block__caption_color {
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
font-size: 3.6vw;
|
||||
}
|
||||
|
||||
.main-block__caption {
|
||||
margin: 10px 0 0 0;
|
||||
}
|
||||
|
||||
.main-block__caption_l {
|
||||
font-size: 4.5vw;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 140%;
|
||||
}
|
||||
|
||||
.main-block__button {
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 125%;
|
||||
}
|
||||
|
||||
.main-block__caption {
|
||||
font-size: 4.5vw;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 140%;
|
||||
}
|
||||
|
||||
.main-block__title_gardient {
|
||||
font-size: 13.3vw;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 100%;
|
||||
}
|
||||
|
||||
.main-block__title_gardient_small {
|
||||
font-size: 9.25vw;
|
||||
}
|
||||
|
||||
.main-block__title {
|
||||
font-size: 13.3vw;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 100%;
|
||||
}
|
||||
|
||||
.main-block__title_small {
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 100%;
|
||||
font-size: 9.25vw;
|
||||
}
|
||||
|
||||
.main-block_subblock {
|
||||
font-weight: 400;
|
||||
line-height: 140%;
|
||||
font-size: 4.5vw;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,58 @@
|
||||
.text-col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.video-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.play-caption {
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 48px;
|
||||
line-height: 110%;
|
||||
/* identical to box height, or 53px */
|
||||
|
||||
|
||||
/* White */
|
||||
|
||||
color: #EBEBEB;
|
||||
}
|
||||
|
||||
.play-block {
|
||||
-webkit-user-select: none;
|
||||
/* Safari */
|
||||
-ms-user-select: none;
|
||||
/* IE 10 and IE 11 */
|
||||
user-select: none;
|
||||
/* Standard syntax */
|
||||
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 43%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 1;
|
||||
gap: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.button-icon-immersion {
|
||||
position: absolute;
|
||||
height: 52px;
|
||||
width: 52px;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
}
|
||||
|
||||
.play-button-immersion {
|
||||
width: 104px;
|
||||
height: 104px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border-radius: 500px;
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
import React from 'react';
|
||||
import './Immersion.css';
|
||||
import video from '../../components/Welcome/video.mp4'
|
||||
import '../../styles/styles.css'
|
||||
import playIcon from '../../icons/iconPlay.svg'
|
||||
import { AnimatePresence, motion } from 'framer-motion';
|
||||
import { useState } from 'react';
|
||||
|
||||
export const Immersion = () => {
|
||||
const [isVisible, setVisible] = useState(true)
|
||||
return (
|
||||
<section className="block-type-trnsprnt block-type-trnsprnt-padding-off">
|
||||
<div className='container'>
|
||||
<div className='text-container'>
|
||||
<h2 className='title'>Полное погружение.</h2>
|
||||
<div className='text-col'>
|
||||
<p className='text-main'>Клиент может свободно перемещаться по жилому комплексу, изучая холлы, архитектуру двора, планировки квартир.</p>
|
||||
<p className='text-main'>Приложение позволяет рассмотреть вид из окна квартиры, угол инсоляции, ландшафт, малые архитектурные формы и другие важные характеристики жилого комплекса.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='video-wrapper'>
|
||||
<AnimatePresence>
|
||||
{isVisible && (<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className='play-block '>
|
||||
<span className='play-caption'>Попробуйте</span>
|
||||
<button onClick={() => setVisible(false)} className='play-button play-button-immersion'>
|
||||
<img src={playIcon} alt='play' className='button-icon button-icon-immersion' />
|
||||
</button>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
<video style={{ width: "100%" }} src={video}></video>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
.Infrastracture {}
|
||||
@@ -0,0 +1,21 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import './Infrastracture.css';
|
||||
import infrastracturePic from './infrastracturePic.svg'
|
||||
import '../../styles/styles.css'
|
||||
|
||||
export const Infrastracture = () => {
|
||||
return (
|
||||
<section className='block-type-trnsprnt block-type-trnsprnt-padding-off'>
|
||||
<div className='container'>
|
||||
<div className='text-container'>
|
||||
<h2 className='title'>Вся инфрастуктура на одном экране.</h2>
|
||||
|
||||
<p className='text-main'>Мы можем показать состав жилого комплекса и окружающую инфрастуктуру на одном экране. Детские сады, школы, магазины и остановки общественного транспорта - указывайте радиус пешей доступности, система подскажет за сколько минут человек сможет дойти до указанного места.</p>
|
||||
</div>
|
||||
</div>
|
||||
<img src={infrastracturePic} />
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 127 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 138 KiB |
@@ -0,0 +1,3 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12.6666 5.99985L7.9999 10.6665L3.33325 5.99985" stroke="#F7F7F7" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 227 B |
@@ -0,0 +1,191 @@
|
||||
|
||||
|
||||
.form {
|
||||
font-style: normal;
|
||||
|
||||
color: #F7F7F7;
|
||||
background: #17191D;
|
||||
border-radius: 2px;
|
||||
padding: 40px;
|
||||
box-sizing: border-box;
|
||||
width: 608px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
|
||||
}
|
||||
|
||||
.form-title {
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 110%;
|
||||
/* or 26px */
|
||||
|
||||
margin: 0;
|
||||
|
||||
/* White */
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
|
||||
.form-caption {
|
||||
text-align: left;
|
||||
margin: 0;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 130%;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.input-col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
width: 50%;
|
||||
justify-content: space-between;
|
||||
outline: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.field {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.input-form {
|
||||
background: #393C46;
|
||||
border: 1px solid #393C46;
|
||||
border-radius: 2px;
|
||||
padding: 8px 10px;
|
||||
outline: none;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 150%;
|
||||
/* identical to box height, or 18px */
|
||||
|
||||
|
||||
/* White */
|
||||
|
||||
color: #F7F7F7;
|
||||
}
|
||||
|
||||
.input-form::placeholder {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.input-form:focus {
|
||||
border: 1px solid #4B79D8;
|
||||
|
||||
}
|
||||
|
||||
.input-caption {
|
||||
|
||||
font-weight: 400;
|
||||
font-size: 10px;
|
||||
line-height: 140%;
|
||||
/* identical to box height, or 14px */
|
||||
|
||||
|
||||
/* White */
|
||||
margin-bottom: 4px;
|
||||
|
||||
color: #F7F7F7;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.input-select {
|
||||
background: #2E3138;
|
||||
border-radius: 2px;
|
||||
padding: 8px 10px;
|
||||
border: none;
|
||||
outline: none;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 150%;
|
||||
/* identical to box height, or 18px */
|
||||
/* White */
|
||||
color: #F7F7F7;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.option-container {
|
||||
flex-direction: column;
|
||||
top: 54px;
|
||||
position: absolute;
|
||||
|
||||
}
|
||||
|
||||
.option {
|
||||
height: 34px;
|
||||
background: #2E3138;
|
||||
border: none;
|
||||
outline: none;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 150%;
|
||||
/* identical to box height, or 18px */
|
||||
/* White */
|
||||
color: #F7F7F7;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
width: 252px;
|
||||
}
|
||||
|
||||
.option-name {
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.img-ok {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
|
||||
.option-container-opened {
|
||||
display: block;
|
||||
}
|
||||
.name {
|
||||
margin: 8px 10px;
|
||||
}
|
||||
|
||||
.option :hover {
|
||||
background: #4E515F;
|
||||
}
|
||||
|
||||
.name-selected {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.button-form {
|
||||
width: 172px;
|
||||
|
||||
/* Button/Blue/Default */
|
||||
outline: none;
|
||||
border: none;
|
||||
background: #2B5EC6;
|
||||
border-radius: 2px;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 125%;
|
||||
/* identical to box height, or 20px */
|
||||
|
||||
letter-spacing: 0.01em;
|
||||
font-feature-settings: 'tnum' on, 'lnum' on;
|
||||
padding: 12px 32px;
|
||||
/* Landing/White */
|
||||
cursor: pointer;
|
||||
color: #EBEBEB;
|
||||
|
||||
}
|
||||
@@ -0,0 +1,96 @@
|
||||
import React, { useState } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import './Integration.css';
|
||||
import '../../styles/styles.css'
|
||||
import CRM from './CRM.svg'
|
||||
import arrow from './Chevron_Down.svg'
|
||||
import ok from './OK.svg'
|
||||
|
||||
const managerArray = [{ name: 'Елизавета', id: 0 }, { name: 'Александра', id: 1 }, { name: 'Марина', id: 2 }]
|
||||
|
||||
const Integration = () => {
|
||||
const [open, isOpen] = useState(false)
|
||||
const [select, isSelect] = useState({ name: 'Eлизавета', id: 0 })
|
||||
|
||||
|
||||
const handleSelect = (i) => {
|
||||
isSelect(i)
|
||||
isOpen(false)
|
||||
}
|
||||
|
||||
const handleSubmit = (e) => {
|
||||
e.preventDefault()
|
||||
return
|
||||
}
|
||||
|
||||
console.log(select)
|
||||
return (
|
||||
<section className="block-type-trnsprnt block-type-trnsprnt-padding-top-button">
|
||||
<div className='container'>
|
||||
<div className='text-container'>
|
||||
<h2 className='title'>Интеграция
|
||||
<br></br> с CRM - системой.</h2>
|
||||
|
||||
<p className='text-main'>Виртуальная экскурсия начинается с регистрации нового сеанса. Мы получаем необходимую информацию о нашем клиенте и передаем их в CRM-систему застройщика.</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div className='img-container'>
|
||||
<form className='form'>
|
||||
<h1 className='form-title'>Поделитесь <br></br> информацией о себе</h1>
|
||||
<p className='form-caption'>Это нужно, чтобы сохранять квартиры в избранное. <br></br>
|
||||
При повторном входе информация восстановится.</p>
|
||||
<div className='input-container'>
|
||||
<div className='input-col'>
|
||||
<div className='field'>
|
||||
<span className='input-caption'>Номер телефона</span>
|
||||
<input placeholder='+7 900 000-00-00' className='input-form' type='tel'></input>
|
||||
</div>
|
||||
<div className='field'>
|
||||
<span className='input-caption'>Имя</span>
|
||||
<input placeholder='Константин' className='input-form' type='text'></input>
|
||||
</div>
|
||||
</div>
|
||||
<div className='input-col'>
|
||||
<div className='field'>
|
||||
<span className='input-caption'>E-mail</span>
|
||||
<input placeholder='konst_smpl@mail.com' className='input-form' type='e-mail'></input>
|
||||
</div>
|
||||
<div className='field'>
|
||||
<span className='input-caption'>Менеджер</span>
|
||||
<div style={open ? { border: "1px solid #4B79D8" } : { border: '1px solid #393C46' }} onClick={() => isOpen(prev => !prev)} className='input-select'>
|
||||
<span className='name-selected'>{select.name}</span>
|
||||
<img alt='иконка' style={open ? { transform: 'matrix(1, 0, 0, -1, 0, 0)' } : {
|
||||
transform: 'matrix(1, 0, 0, 1, 0, 0)'
|
||||
}} src={arrow} className='icon' />
|
||||
</div>
|
||||
<div style={open ? { display: "flex" } : { display: "none" }} className={'option-container'}>
|
||||
{managerArray.map((i) => (
|
||||
<div style={i.id === select.id ? { background: '#4E515F' } : { background: '#373943' }} onClick={() => handleSelect(i)} key={i.id} className='option'>
|
||||
<span className='option-name'>
|
||||
<p className='name'>{i.name}</p>
|
||||
<img style={i.id === select.id ? { display: 'block' } : { display: "none" }} className='img-ok' src={ok} alt='выбранный' />
|
||||
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button onClick={(e) => handleSubmit(e)} className='button-form'>Начать сеанс</button>
|
||||
</form>
|
||||
</div>
|
||||
<div className='subtext-container '>
|
||||
<p className='subtext'>В свою очередь, CRM система передает нашей презентации актуальную информацию по ценам и статусам квартир.</p>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
};
|
||||
|
||||
Integration.propTypes = {};
|
||||
|
||||
Integration.defaultProps = {};
|
||||
|
||||
export default Integration;
|
||||
@@ -0,0 +1,44 @@
|
||||
.container-form {
|
||||
border-radius: 8.10777px;
|
||||
transform: matrix(0.81, -0.22, 0.94, 0.94, 0, 0);
|
||||
border-bottom: 2px solid #2B5EC6;
|
||||
border-left: 2px solid #2B5EC6;
|
||||
background-color: #2B5EC6;
|
||||
width: 1041px;
|
||||
height: 440px;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
margin-top: 100px;
|
||||
margin-bottom: 113px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.form {
|
||||
border-radius: 9px;
|
||||
position: absolute;
|
||||
background: #1E1E1E;
|
||||
width: 101%;
|
||||
height: 101%;
|
||||
left: 7px;
|
||||
top: -7px;
|
||||
padding-top: 72px;
|
||||
padding-left: 72px;
|
||||
box-sizing: border-box;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
/* or 44px */
|
||||
font-family: "GilroyWebRegular";
|
||||
|
||||
/* Landing/White */
|
||||
|
||||
color: #EBEBEB;
|
||||
}
|
||||
|
||||
.form-title {
|
||||
font-size: 40px;
|
||||
line-height: 110%;
|
||||
text-align: left;
|
||||
margin: 0;
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import './IntegrationForm.css'
|
||||
export const IntegrationForm = () => {
|
||||
return (
|
||||
<div className="container-form">
|
||||
<div className='form'>
|
||||
<h3 className='form-title'>Поделитесь <br></br> информацией о себе</h3>
|
||||
</div>
|
||||
|
||||
</div>)
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M3.33337 8.00029L6.6667 11.3335L12.6667 5.3335" stroke="#F7F7F7" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 226 B |
@@ -0,0 +1,45 @@
|
||||
.InteractiveTech {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 144px 96px 96px 96px;
|
||||
background: #1E1E1E;
|
||||
border-radius: 8px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.title-big {
|
||||
margin-bottom: 64px;
|
||||
}
|
||||
|
||||
.text-row {
|
||||
display: flex;
|
||||
gap: 40px;
|
||||
margin-left: 320px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
color: #EBEBEB;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.text-caption {
|
||||
margin: 0 0 32px;
|
||||
font-family: 'GilroyWebRegular';
|
||||
font-weight: 400;
|
||||
font-size: 28px;
|
||||
line-height: 130%;
|
||||
}
|
||||
|
||||
.text {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.text-paragraph {
|
||||
height: 156px;
|
||||
margin: 0;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 145%;
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import './InteractiveTech.css';
|
||||
import '../../styles/styles.css'
|
||||
import photo from './Photo.svg'
|
||||
|
||||
const InteractiveTech = () => {
|
||||
|
||||
return (
|
||||
<section className="block-type-grey block-type-grey-row">
|
||||
<div className='container'>
|
||||
<div className='text-container'>
|
||||
<h2 className=' title'>Интерактивные технологии помогают продавать.</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div className='text-row'>
|
||||
<div className='text'>
|
||||
<p className='text-caption'>Задача.</p>
|
||||
<p className='text-paragraph'>Перенести покупателя в будущее. В деталях показать, какими будут его дом и квартира, удивить, поразить, вовлечь в интересную игру и помочь сделать единственно правильный выбор. Дать застройщику еще один канал продаж. Современный, мощный и эффективный.</p>
|
||||
</div>
|
||||
<div className='text'>
|
||||
<p className='text-caption'>Решение.</p>
|
||||
<p className='text-paragraph'>Виртуальная реальность на трех площадках – шоу-рум в офисе продаж, мобильная платформа и сайт проекта. Каждая из них выполняет свои конкретные задачи, у каждой есть свои уникальные преимущества, все они повышают эффективность продаж.</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<img alt='interactive tech' style={{ width: '100%' }} src={photo} />
|
||||
</section>
|
||||
)
|
||||
};
|
||||
|
||||
InteractiveTech.propTypes = {};
|
||||
|
||||
InteractiveTech.defaultProps = {};
|
||||
|
||||
export default InteractiveTech;
|
||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 1.6 MiB |
@@ -0,0 +1,8 @@
|
||||
.Planing {}
|
||||
|
||||
|
||||
.img-plan {
|
||||
border: 1.2px solid #EBEBEB;
|
||||
border-radius: 2px;
|
||||
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import './Planing.css';
|
||||
import '../../styles/styles.css'
|
||||
import img from './Sample.svg'
|
||||
|
||||
export const Planing = () => {
|
||||
return (
|
||||
<section className='block-type-trnsprnt'>
|
||||
<div className='container'>
|
||||
<div className='text-container'>
|
||||
<h2 className='title'>Дадим возможность покупателю выбрать цвет стен и мебели.</h2>
|
||||
<p className='text-main'>Сейчас покупатель находится прямо в квартире, взаимодействует с предметами, смотрит телевизор с презентацией жилого комплекса, выбирает цвет кухонного гарнитура из конфигуратора и думает, куда поставить рабочий стол.</p>
|
||||
</div>
|
||||
</div>
|
||||
<img className='img-plan' src={img} />
|
||||
<div className='subtext-container'>
|
||||
<div className='subtext-col'>
|
||||
<p className='subtext'>Покупатель полностью вовлекается в процесс
|
||||
и уверен, что управляет им. </p>
|
||||
<p className='subtext'>Эффект новизны и присутствия включает в человеке открытость и любопытство.</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 6.1 MiB |
@@ -0,0 +1,3 @@
|
||||
<svg width="1442" height="785" viewBox="0 0 1442 785" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="0.816528" width="1440.37" height="784.976" fill="#2E2E2E" style="mix-blend-mode:multiply"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 210 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="M9.00002 19L16 12L9.00002 5" stroke="#EBEBEB" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 207 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
@@ -0,0 +1,3 @@
|
||||
.block-gap {
|
||||
gap: 80px;
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
import "../../styles/styles.css"
|
||||
import icon from './ChevronRight.svg'
|
||||
import picture from './Picture.png'
|
||||
|
||||
export const RemoteSelling = () => {
|
||||
return (<section className='block-type-grey block-gap'>
|
||||
<div className='container'>
|
||||
<div className='text-container'>
|
||||
<h2 className='title'>Ваш инструмент продаж поможет вам продавать удаленно.</h2>
|
||||
<p className='text-main'>Бескомпромиссный уровень графики и полное погружение покупателя в процесс выбора квартиры.</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<img src={picture}></img>
|
||||
<div className="subtext-container">
|
||||
<div className="subtext">
|
||||
<p className="text-main">Покажите все преимущества вашего жилого комплекса клиенту из любого конца мира. Местоположение и устройство значения не имеют. Нужен только интернет.</p>
|
||||
<button className="play-button">
|
||||
<span className="button-caption">Узнать больше</span>
|
||||
<img className="" src={icon} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>)
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import './salesinstrument.css';
|
||||
import '../../styles/styles.css'
|
||||
import iconPlay from '../../icons/iconPlay.svg'
|
||||
import video from '../Welcome/video.mp4'
|
||||
import { motion } from 'framer-motion'
|
||||
import ReactPlayer from 'react-player'
|
||||
import { useRef } from 'react';
|
||||
|
||||
|
||||
const textAnimation = {
|
||||
open: { opacity: 1 },
|
||||
closed: { opacity: 0 }
|
||||
}
|
||||
|
||||
|
||||
export const SalesInstrument = ({ open, isAnimation }) => {
|
||||
const [play, setPlay] = useState(false)
|
||||
const [startVideo, setStartVideo] = useState('open')
|
||||
const videoRef = useRef()
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
if (startVideo === 'closed') {
|
||||
videoRef.current.play()
|
||||
}
|
||||
}, [startVideo])
|
||||
|
||||
return (
|
||||
<section className="salesinstrument">
|
||||
{startVideo === 'open' ? <motion.div style={isAnimation === 'closed' ? { 'zIndex': '1' } : { 'zIndex': '0' }} variants={textAnimation} animate={!play ? 'open' : 'closed'} className='sales-container' onAnimationComplete={(def) => setStartVideo(def)}>
|
||||
<h1 className='sales-title'>Инструмент <br></br>Продаж</h1>
|
||||
<p className='sales-paragraph'>Сегодня покупатель недвижимости платит не просто за квадратные метры – он платит за уникальные характеристики дома – инфраструктуру, удобный и комфортный двор, дизайн подъездов и холлов, вид из окон. Нужно показать ему все преимущества жилого комплекса на любой стадии строительства еще в офисе продаж.</p>
|
||||
<button onClick={() => setPlay(true)} className='play-button'>
|
||||
<span className='button-caption'>Шоу-рил</span>
|
||||
<img alt='calltoaction' className='button-icon' src={iconPlay} />
|
||||
</button>
|
||||
</motion.div> : <></>}
|
||||
<video controls={startVideo === 'closed' ? true : false} loop id='video' ref={videoRef} style={{ width: '100%', height: '778px' }} className='videoShow' src={video}>
|
||||
</video>
|
||||
</section>
|
||||
)
|
||||
};
|
||||
|
||||
@@ -0,0 +1,49 @@
|
||||
.salesinstrument {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.videoShow {
|
||||
width: 100%;
|
||||
height: 778px;
|
||||
}
|
||||
|
||||
.sales-container {
|
||||
-webkit-user-select: none;
|
||||
/* Safari */
|
||||
-ms-user-select: none;
|
||||
/* IE 10 and IE 11 */
|
||||
user-select: none;
|
||||
/* Standard syntax */
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 45%;
|
||||
transform: translate(-50%, -50%);
|
||||
text-align: left;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: #EBEBEB;
|
||||
gap: 48px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.sales-title {
|
||||
font-family: 'GilroyWebRegular';
|
||||
margin: 0;
|
||||
font-weight: 400;
|
||||
font-size: 76px;
|
||||
line-height: 100%;
|
||||
}
|
||||
|
||||
.sales-paragraph {
|
||||
width: 494px;
|
||||
margin: 0;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 145%;
|
||||
}
|
||||
|
||||
.button-play {
|
||||
margin-top: 48px;
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 579 KiB |
@@ -0,0 +1 @@
|
||||
.SalesPromotion {}
|
||||
@@ -0,0 +1,17 @@
|
||||
import React from 'react';
|
||||
import './SalesPromotion.css';
|
||||
import "../../styles/styles.css"
|
||||
import img from './Sales.png'
|
||||
|
||||
export const SalesPromotion = () => {
|
||||
return (<section className='block-type-grey'>
|
||||
<div className='container'>
|
||||
<div className='text-container'>
|
||||
<h2 className='title'>Отправляем коммерческое предложение клиенту на почту.</h2>
|
||||
<p className='text-main'>Презентация объекта та подошла к концу и клиент вместе с менеджером добавили понравившееся квартиры в избранное. Теперь мы можем отправить коммерческое предложение на почту клиенту или распечатать на принтере и отдать клиенту в руки.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,23 @@
|
||||
export const Card = () => {
|
||||
return (<div className="card-container">
|
||||
<img className="plan" />
|
||||
<div className="card-descriptions-container">
|
||||
<div className="description">
|
||||
<span className="type">Тип</span>
|
||||
<span className="value"></span>
|
||||
</div>
|
||||
<div className="description">
|
||||
<span className="type">Этаж</span>
|
||||
<span className="value">5 из 9</span>
|
||||
</div>
|
||||
<div className="description">
|
||||
<span className="type">Площадь</span>
|
||||
<span className="value">131,1 м2</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>)
|
||||
}
|
||||
@@ -0,0 +1,134 @@
|
||||
.filter-container {
|
||||
width: 100%;
|
||||
background: #17191D;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 16px;
|
||||
height: 122px;
|
||||
align-items: center;
|
||||
padding: 24px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
.range-container {
|
||||
height: 62px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 150%;
|
||||
/* identical to box height, or 18px */
|
||||
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
/* White */
|
||||
|
||||
color: #F7F7F7;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.filter-caption {
|
||||
margin-bottom: 16px;
|
||||
opacity: 0.7;
|
||||
|
||||
}
|
||||
|
||||
.buttons-container {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
|
||||
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 150%;
|
||||
/* identical to box height, or 18px */
|
||||
|
||||
/* White */
|
||||
|
||||
color: #F7F7F7;
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.btn-room {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 9px 12px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
/* Button/Gray/Default */
|
||||
background: #373943;
|
||||
border-radius: 80px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 150%;
|
||||
/* identical to box height, or 18px */
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
/* White */
|
||||
|
||||
color: #F7F7F7;
|
||||
}
|
||||
|
||||
.btn-room:hover {
|
||||
background: #2B5EC6;
|
||||
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 8px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.btn-type {
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 10px;
|
||||
line-height: 140%;
|
||||
/* identical to box height, or 14px */
|
||||
background: #373943;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
width: fit-content;
|
||||
border: none;
|
||||
border-radius: 100px;
|
||||
cursor: pointer;
|
||||
color: #F7F7F7;
|
||||
}
|
||||
|
||||
.btn-type:hover {
|
||||
background: #2B5EC6;
|
||||
|
||||
}
|
||||
|
||||
.line {
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
background: #393C46;
|
||||
border-radius: 4px;
|
||||
opacity: 0.7;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.btn-container-features {
|
||||
flex-wrap: wrap;
|
||||
width: 159px;
|
||||
}
|
||||
@@ -0,0 +1,91 @@
|
||||
import ReactSlider from 'react-slider'
|
||||
import './FilterSearch.css'
|
||||
|
||||
const square = {
|
||||
min: 25, max: 100,
|
||||
}
|
||||
|
||||
const floor = {
|
||||
min: 1, max: 9
|
||||
}
|
||||
|
||||
const price = {
|
||||
min: 3, max: 15
|
||||
}
|
||||
|
||||
const buttonArray = [{ buttonName: '1К' }, { buttonName: '2К' }, { buttonName: '3К' }, { buttonName: '4К' }]
|
||||
|
||||
const buttonArrayType = [{ buttonName: 'Мастер-спальня' }, { buttonName: 'Лоджия' }, { buttonName: 'Вид на парк' }, { buttonName: 'Гардеробная' }]
|
||||
|
||||
export const FilterSearch = () => {
|
||||
return (<div className="filter-container">
|
||||
<div className="buttons-container">
|
||||
<span style={{ marginBottom: "5px" }} className="filter-caption">Тип квартиры</span>
|
||||
<div className='btn-container'>
|
||||
{buttonArray.map((i, index) => (
|
||||
<button className='btn-room' key={index}>{i.buttonName}</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className='line'></div>
|
||||
|
||||
<div className="range-container">
|
||||
<span className="filter-caption">Площадь, м2</span>
|
||||
<ReactSlider
|
||||
className="horizontal-slider"
|
||||
thumbClassName="example-thumb"
|
||||
trackClassName="example-track"
|
||||
defaultValue={[square.min, square.max]}
|
||||
ariaLabel={['Lower thumb', 'Upper thumb']}
|
||||
ariaValuetext={state => `Thumb value ${state.valueNow}`}
|
||||
renderThumb={(props, state) => <div {...props}>{state.valueNow}</div>}
|
||||
pearling
|
||||
max={square.max}
|
||||
min={square.min}
|
||||
minDistance={5}
|
||||
/>
|
||||
</div>
|
||||
<div className="range-container">
|
||||
<span className="filter-caption">Этаж</span>
|
||||
<ReactSlider
|
||||
className="horizontal-slider"
|
||||
thumbClassName="example-thumb"
|
||||
trackClassName="example-track"
|
||||
defaultValue={[floor.min, floor.max]}
|
||||
ariaLabel={['Lower thumb', 'Upper thumb']}
|
||||
ariaValuetext={state => `Thumb value ${state.valueNow}`}
|
||||
renderThumb={(props, state) => <div {...props}>{state.valueNow}</div>}
|
||||
pearling
|
||||
max={floor.max}
|
||||
min={floor.min}
|
||||
minDistance={0}
|
||||
/>
|
||||
|
||||
</div>
|
||||
<div className="range-container">
|
||||
<span className="filter-caption">Стоимость, млн. руб.</span>
|
||||
<ReactSlider
|
||||
className="horizontal-slider"
|
||||
thumbClassName="example-thumb"
|
||||
trackClassName="example-track"
|
||||
defaultValue={[price.min, price.max]}
|
||||
ariaLabel={['Lower thumb', 'Upper thumb']}
|
||||
ariaValuetext={state => `Thumb value ${state.valueNow}`}
|
||||
renderThumb={(props, state) => <div {...props}>{state.valueNow}</div>}
|
||||
pearling
|
||||
max={price.max}
|
||||
min={price.min}
|
||||
minDistance={1}
|
||||
/>
|
||||
</div>
|
||||
<div className='line'></div>
|
||||
<div className='buttons-container'>
|
||||
<span style={{ marginBottom: "5px" }} className="filter-caption">Особенности</span>
|
||||
<div className='btn-container btn-container-features'>
|
||||
{buttonArrayType.map((i) => (
|
||||
<button className='btn-type'>{i.buttonName}</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>)
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 158 KiB |
@@ -0,0 +1,47 @@
|
||||
.horizontal-slider {
|
||||
width: 317px;
|
||||
height: 2px;
|
||||
background: #2E3138;
|
||||
}
|
||||
|
||||
|
||||
.example-thumb {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
|
||||
/* Button/Gray/Default */
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 150%;
|
||||
/* identical to box height, or 18px */
|
||||
box-sizing: border-box;
|
||||
/* White */
|
||||
top: -15px;
|
||||
color: #F7F7F7;
|
||||
background: #373943;
|
||||
border-radius: 80px;
|
||||
}
|
||||
|
||||
|
||||
.example-thumb:hover {
|
||||
background: #2B5EC6;
|
||||
|
||||
}
|
||||
|
||||
.example-track {
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
.example-track-1 {
|
||||
background: #2B5EC6;
|
||||
|
||||
}
|
||||
|
||||
.range-container {
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
import React from 'react';
|
||||
|
||||
import searchPic from './Search.png'
|
||||
import './SimpleSearch.css';
|
||||
import '../../styles/styles.css'
|
||||
import { FilterSearch } from './FilterSearch/FilterSearch';
|
||||
export const SimpleSearch = () => {
|
||||
|
||||
|
||||
return (
|
||||
<section className='block-type-trnsprnt block-type-trnsprnt-padding-top-button'>
|
||||
<div className='container'>
|
||||
<div className='text-container'>
|
||||
<h2 className='title'>Простой и информативный поиск идеальной квартиры.</h2>
|
||||
<p className='text-main'>Можно воспользоваться классическим фильтром и указать количество комнат, этаж и стоимость квартиры, а можно включить в фильтр конкретные преимущества, например: вид из окна, наличие мастер-спальни или лоджии.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{height: "664px"}} className='img-container'>
|
||||
|
||||
<FilterSearch></FilterSearch>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 158 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 648 KiB |
@@ -0,0 +1 @@
|
||||
.VirtualTour {}
|
||||
@@ -0,0 +1,26 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import './VirtualTour.css';
|
||||
import '../../styles/styles.css'
|
||||
import img from './Photo.png'
|
||||
|
||||
|
||||
export const VirtualTour = () => {
|
||||
return (
|
||||
<section className='block-type-trnsprnt block-type-trnsprnt-padding-off'>
|
||||
<div className='container'>
|
||||
<div className='text-container'>
|
||||
<h2 className='title'>Виртуальная экскурсия <br></br> по выбранной квартире.</h2>
|
||||
<p className='text-main'>Клиенту достаточно надеть шлем виртуальной реальности, чтобы прогуляться, оценить и ощутить пространство. Он полностью погружается в воссозданную реальность, чувствует удобство и уровень комфорта.</p>
|
||||
</div>
|
||||
</div>
|
||||
<img src={img} alt='дополненная реальность' />
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
VirtualTour.propTypes = {};
|
||||
|
||||
VirtualTour.defaultProps = {};
|
||||
|
||||
export default VirtualTour;
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
@@ -0,0 +1,84 @@
|
||||
.videoElement {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
min-width: 100%;
|
||||
min-height: 100%;
|
||||
z-index: 1;
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
.welcome-background {
|
||||
font-family: 'GilroyWebRegular';
|
||||
|
||||
width: 100%;
|
||||
height: 89%;
|
||||
position: relative;
|
||||
|
||||
}
|
||||
|
||||
.welcome-header {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.welcome-text-block {
|
||||
z-index: 1;
|
||||
color: #EBEBEB;
|
||||
width: fit-content;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.welcome-text-container {
|
||||
-ms-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
padding-left: 46px;
|
||||
padding-right: 46px;
|
||||
box-sizing: border-box;
|
||||
|
||||
}
|
||||
|
||||
.welcome-line {
|
||||
margin-top: 28px;
|
||||
margin-bottom: 28px;
|
||||
width: 82%;
|
||||
height: 1px;
|
||||
background: linear-gradient(#D375FF, #798FFF);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.welcome-title {
|
||||
margin: 0;
|
||||
font-weight: 300;
|
||||
font-size: 134px;
|
||||
line-height: 100%;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.welcome-caption {
|
||||
margin: 0;
|
||||
font-weight: 400;
|
||||
font-size: 28px;
|
||||
line-height: 130%;
|
||||
/* or 36px */
|
||||
text-align: center;
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
import React, { useState } from 'react';
|
||||
import '../../styles/styles.css'
|
||||
import './Welcome.css';
|
||||
import video from './video.mp4'
|
||||
import iconWelcome from '../../icons/iconWelcome.svg'
|
||||
import { motion, AnimatePresence } from 'framer-motion'
|
||||
|
||||
const backgroundAnimation = {
|
||||
open: { translateY: '0%' },
|
||||
|
||||
closed: { translateY: '-100%' }
|
||||
}
|
||||
|
||||
const textAnimation = {
|
||||
open: { opacity: 1 },
|
||||
closed: { opacity: 0 }
|
||||
}
|
||||
|
||||
|
||||
|
||||
export const Welcome = ({ isOpen, setIsOpen, setAnimation, isAnimation }) => {
|
||||
const [block, isBlock] = useState('')
|
||||
console.log(isAnimation)
|
||||
return (
|
||||
<>
|
||||
{isAnimation !== 'closed' && (<section className='welcome-section' style={{ width: '100%' }}>
|
||||
<motion.video variants={backgroundAnimation} animate={block !== 'closed' ? 'open' : 'closed'} transition={{ delay: 0.2, duration: 0.6, ease: 'easeOut'}} onAnimationComplete={(def) => setAnimation(def)} className='videoElement' src={video} autoPlay muted loop id="myVideo" type="video/mp4">
|
||||
</motion.video>
|
||||
<div className="welcome-background">
|
||||
<motion.div variants={textAnimation} animate={isOpen ? 'open' : 'closed'} transition={{ duration: 0.3, ease: 'easeOut' }} onAnimationComplete={(def) => isBlock(def)} className='welcome-text-block'>
|
||||
<div className='welcome-text-container'>
|
||||
<h1 className='welcome-title'>Graff.estate </h1>
|
||||
<div className='welcome-line'></div>
|
||||
<p className='welcome-caption'>Технологии расширенной реальности <br></br> для вашего бизнеса.</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
<motion.button variants={textAnimation} animate={isOpen ? 'open' : 'closed'} transition={{ duration: 0.1, ease: 'easeOut' }} onClick={() => setIsOpen(!isOpen)} className='main-button'>
|
||||
<span className='button-caption'>Узнать больше</span>
|
||||
<img alt='calltoaction' className='button-icon' src={iconWelcome} />
|
||||
</motion.button>
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
|
||||
}
|
||||
|
||||
|
||||
Welcome.propTypes = {};
|
||||
|
||||
Welcome.defaultProps = {};
|
||||
|
||||
export default Welcome;
|
||||
Binary file not shown.
@@ -0,0 +1 @@
|
||||
.Wishlist {}
|
||||
@@ -0,0 +1,25 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import './Wishlist.css';
|
||||
import '../../styles/styles.css'
|
||||
import img from './favorite.png'
|
||||
|
||||
export const Wishlist = () => {
|
||||
return (
|
||||
<section style={{gap: '24px'}} className='block-type-trnsprnt block-type-trnsprnt-padding-top-button'>
|
||||
<div className='container'>
|
||||
<div className='text-container'>
|
||||
<h2 className='title'>Формируем вишлист.</h2>
|
||||
<p className='text-main'>Покупатель может все. Он поднимается на лифте, перемещается между квартирами, полностью ощущает пространство дома и добавляет понравившиеся варианты в избранное.</p>
|
||||
</div>
|
||||
</div>
|
||||
<img src={img} alt='избранное' />
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
Wishlist.propTypes = {};
|
||||
|
||||
Wishlist.defaultProps = {};
|
||||
|
||||
export default Wishlist;
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 118 KiB |
@@ -0,0 +1,15 @@
|
||||
import "../../styles/styles.css"
|
||||
|
||||
export const SalesPromotion = () => {
|
||||
return (<section className='block-type-grey'>
|
||||
<div className='container'>
|
||||
<div className='text-container'>
|
||||
<h2 className='title'></h2>
|
||||
<p className='text-main'></p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<img></img>
|
||||
|
||||
</section>)
|
||||
}
|
||||
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,28 @@
|
||||
|
||||
@font-face {
|
||||
font-family: 'GilroyWebRegular';
|
||||
src:
|
||||
url('Gilroy_Regular.woff2') format('woff2'),
|
||||
url('Gilroy_Regular.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'GilroyWebMedium';
|
||||
src:
|
||||
url('Gilroy_Medium.woff2') format('woff2'),
|
||||
url('Gilroy_Medium.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'GilroyWebSemiBold';
|
||||
src:
|
||||
url('Gilroy_SemiBold.woff2') format('woff2'),
|
||||
url('Gilroy_SemiBold.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M19.833 14L9.33303 20.9999L9.33303 7L19.833 14Z" fill="#EBEBEB" stroke="#EBEBEB" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 261 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M22.1667 10.5004L14 18.667L5.8334 10.5004" stroke="#EBEBEB" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 240 B |
+5
-3
@@ -1,8 +1,10 @@
|
||||
@import url(./fonts/fonts.css);
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
||||
margin: 0 auto;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', 'Roboto', 'Oxygen',
|
||||
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
||||
sans-serif;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
@@ -10,4 +12,4 @@ body {
|
||||
code {
|
||||
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
||||
monospace;
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 817 KiB |
@@ -0,0 +1,221 @@
|
||||
.main-button {
|
||||
z-index: 99;
|
||||
border: 1px solid #D375FF;
|
||||
border-radius: 38.4px;
|
||||
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
background: rgba(29, 29, 29, 0.6);
|
||||
backdrop-filter: blur(12px);
|
||||
padding: 16px 22px;
|
||||
box-sizing: border-box;
|
||||
width: fit-content;
|
||||
height: 60px;
|
||||
position: fixed;
|
||||
bottom: 5%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.main-button::before {
|
||||
content: "";
|
||||
border-radius: 38.4px;
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
bottom: -2px;
|
||||
left: -2px;
|
||||
right: -2px;
|
||||
border-image: linear-gradient(#D375FF, #798FFF);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
|
||||
.button-caption {
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
line-height: 125%;
|
||||
/* identical to box height, or 25px */
|
||||
|
||||
letter-spacing: 0.01em;
|
||||
/* White */
|
||||
color: #EBEBEB;
|
||||
}
|
||||
|
||||
.button-icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
|
||||
}
|
||||
|
||||
.block-type-grey {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 96px;
|
||||
|
||||
box-sizing: border-box;
|
||||
padding: 144px 96px 96px 96px;
|
||||
background: #1E1E1E;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.block-type-grey-row {
|
||||
gap: 64px;
|
||||
}
|
||||
|
||||
.block-type-trnsprnt {
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 96px;
|
||||
box-sizing: border-box;
|
||||
padding: 144px 96px 96px 96px;
|
||||
background: transparent;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.block-type-trnsprnt-padding {
|
||||
padding: 0 96px;
|
||||
}
|
||||
|
||||
.block-type-trnsprnt-padding-off {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.block-type-trnsprnt-padding-top-button {
|
||||
padding: 144px 0 96px;
|
||||
|
||||
}
|
||||
|
||||
.block-type-trnsprnt-picture {
|
||||
padding-bottom: 96px;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
|
||||
.text-container {
|
||||
color: #EBEBEB;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 48px;
|
||||
text-align: left;
|
||||
margin-right: 114px;
|
||||
}
|
||||
|
||||
.subtext-container {
|
||||
margin: 0 auto;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 145%;
|
||||
/* or 26px */
|
||||
|
||||
|
||||
/* White */
|
||||
|
||||
color: #EBEBEB;
|
||||
}
|
||||
|
||||
.subtext {
|
||||
width: 494px;
|
||||
text-align: left;
|
||||
margin-right: 120px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.subtext-col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
|
||||
.title {
|
||||
font-family: 'GilroyWebRegular';
|
||||
|
||||
width: 494px;
|
||||
font-weight: 400;
|
||||
font-size: 48px;
|
||||
line-height: 110%;
|
||||
/* or 53px */
|
||||
text-align: left;
|
||||
margin: 0;
|
||||
|
||||
background: linear-gradient(56.75deg, #D375FF 34.13%, #798FFF 73.56%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.title-small {
|
||||
width: 351px;
|
||||
}
|
||||
|
||||
|
||||
.text-container-small {
|
||||
margin-right: 161px;
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
.text-main {
|
||||
width: 494px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 19px;
|
||||
line-height: 145%;
|
||||
/* or 26px */
|
||||
|
||||
|
||||
text-align: left;
|
||||
margin: 0;
|
||||
color: #EBEBEB;
|
||||
}
|
||||
|
||||
.play-button {
|
||||
margin-top: 48px;
|
||||
border: 1px solid #D375FF;
|
||||
border-radius: 38.4px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
background: rgba(29, 29, 29, 0.6);
|
||||
backdrop-filter: blur(12px);
|
||||
padding: 16px 22px;
|
||||
box-sizing: border-box;
|
||||
width: fit-content;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.play-button::before {
|
||||
content: "";
|
||||
border-radius: 38.4px;
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
bottom: -2px;
|
||||
left: -2px;
|
||||
right: -2px;
|
||||
border-image: linear-gradient(#D375FF 30%, #798FFF 70%);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
|
||||
.img-container {
|
||||
background-image: url(./background.png);
|
||||
width: 100%;
|
||||
height: 526px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user