commit
This commit is contained in:
DmitriyB
@@ -0,0 +1,16 @@
|
||||
module.exports = {
|
||||
"stories": [
|
||||
"../src/**/*.stories.mdx",
|
||||
"../src/**/*.stories.@(js|jsx|ts|tsx)"
|
||||
],
|
||||
"addons": [
|
||||
"@storybook/addon-links",
|
||||
"@storybook/addon-essentials",
|
||||
"@storybook/addon-interactions",
|
||||
"@storybook/preset-create-react-app"
|
||||
],
|
||||
"framework": "@storybook/react",
|
||||
"core": {
|
||||
"builder": "@storybook/builder-webpack5"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
export const parameters = {
|
||||
actions: { argTypesRegex: "^on[A-Z].*" },
|
||||
controls: {
|
||||
matchers: {
|
||||
color: /(background|color)$/i,
|
||||
date: /Date$/,
|
||||
},
|
||||
},
|
||||
}
|
||||
Generated
+26580
-60
File diff suppressed because it is too large
Load Diff
+39
-1
@@ -10,27 +10,46 @@
|
||||
"@types/node": "^16.11.52",
|
||||
"@types/react": "^18.0.17",
|
||||
"@types/react-dom": "^18.0.6",
|
||||
"@types/swiper": "^6.0.0",
|
||||
"animejs": "^3.2.1",
|
||||
"aos": "^2.3.4",
|
||||
"framer-motion": "^7.2.0",
|
||||
"i": "^0.3.7",
|
||||
"moment": "^2.29.4",
|
||||
"npm": "^8.18.0",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-minimal-pie-chart": "^8.3.0",
|
||||
"react-router-dom": "^5.2.0",
|
||||
"react-scripts": "5.0.1",
|
||||
"swiper": "^8.3.2",
|
||||
"typescript": "^4.7.4",
|
||||
"use-screen-size": "^1.1.0",
|
||||
"v5": "^0.1.2",
|
||||
"web-vitals": "^2.1.4"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
"test": "react-scripts test",
|
||||
"eject": "react-scripts eject"
|
||||
"eject": "react-scripts eject",
|
||||
"storybook": "start-storybook -p 6006 -s public",
|
||||
"build-storybook": "build-storybook -s public"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": [
|
||||
"react-app",
|
||||
"react-app/jest"
|
||||
],
|
||||
"overrides": [
|
||||
{
|
||||
"files": [
|
||||
"**/*.stories.*"
|
||||
],
|
||||
"rules": {
|
||||
"import/no-anonymous-default-export": "off"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
"browserslist": {
|
||||
@@ -44,5 +63,24 @@
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-actions": "^6.5.10",
|
||||
"@storybook/addon-essentials": "^6.5.10",
|
||||
"@storybook/addon-interactions": "^6.5.10",
|
||||
"@storybook/addon-links": "^6.5.10",
|
||||
"@storybook/builder-webpack5": "^6.5.10",
|
||||
"@storybook/manager-webpack5": "^6.5.10",
|
||||
"@storybook/node-logger": "^6.5.10",
|
||||
"@storybook/preset-create-react-app": "^4.1.2",
|
||||
"@storybook/react": "^6.5.10",
|
||||
"@storybook/testing-library": "^0.0.13",
|
||||
"@types/animejs": "^3.1.5",
|
||||
"@types/aos": "^3.0.4",
|
||||
"@types/body-scroll-lock": "^3.1.0",
|
||||
"@types/react-router-dom": "^5.3.3",
|
||||
"babel-plugin-named-exports-order": "^0.0.2",
|
||||
"prop-types": "^15.8.1",
|
||||
"webpack": "^5.74.0"
|
||||
}
|
||||
}
|
||||
|
||||
+22
-21
@@ -1,21 +1,19 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<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" />
|
||||
<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 +22,14 @@
|
||||
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 +39,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>
|
||||
+14
-1
@@ -1,3 +1,16 @@
|
||||
.App {
|
||||
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
overflow-y: hidden;
|
||||
opacity: 1;
|
||||
transition: opacity ease-in 0.5s;
|
||||
}
|
||||
|
||||
.App_active {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
opacity: 0.5;
|
||||
transition: opacity ease-in 0.5s;
|
||||
|
||||
}
|
||||
|
||||
+73
-33
@@ -1,47 +1,87 @@
|
||||
import "./App.css";
|
||||
import "./index.css";
|
||||
import "./App.css"
|
||||
import { Route, Switch } from "react-router-dom";
|
||||
|
||||
import React, { useEffect, useState } from "react";
|
||||
import AOS from "aos";
|
||||
import "aos/dist/aos.css";
|
||||
import { Main } from "./components/main/main";
|
||||
import { Header } from "./components/header/header";
|
||||
import React, { useState } from "react";
|
||||
import moment, { Moment } from "moment";
|
||||
import "moment/locale/ru";
|
||||
import { Mapblock } from "./components/mapblock/mapblock";
|
||||
import { SliderComponent } from "./components/sliderComponent/sliderComponent";
|
||||
import { Calendar } from "./components/calendar/calendar";
|
||||
import { Multiplayer } from "./components/multiplayer/multiplayer";
|
||||
import { Devices } from "./components/devices/devices";
|
||||
import { Analytics } from "./components/analytics/analytics";
|
||||
import { Footer } from "./components/footer/footer";
|
||||
import { Demostration } from "./components/demonstration/demonstartion";
|
||||
import textRU from "./utils/textRU"
|
||||
import textEN from "./utils/textEN";
|
||||
|
||||
export type TObjct = {
|
||||
calendar: boolean;
|
||||
timePicker: boolean;
|
||||
form: boolean;
|
||||
confirm: boolean;
|
||||
};
|
||||
function App() {
|
||||
const [time, setTime] = useState(moment());
|
||||
const [next, setNext] = useState({
|
||||
calendar: true,
|
||||
timePicker: false,
|
||||
form: false,
|
||||
});
|
||||
|
||||
function updateTime(value: Moment) {
|
||||
setTime(value);
|
||||
}
|
||||
function navigationHandler(value: TObjct) {
|
||||
setNext(value);
|
||||
|
||||
|
||||
|
||||
export const App: React.FC = ({ }) => {
|
||||
const [language, setLanguage] = useState<any>("");
|
||||
const [text, setText] = useState(textRU);
|
||||
const [locale, setLocale] = useState('RU')
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
setInitialLanguage()
|
||||
}, []);
|
||||
|
||||
function setInitialLanguage() {
|
||||
if (window.navigator.language === 'ru') {
|
||||
setLanguage('RU')
|
||||
setLocale('ru')
|
||||
localStorage.setItem("lang", 'RU')
|
||||
setText(textRU)
|
||||
|
||||
} else {
|
||||
setLanguage('EN')
|
||||
localStorage.setItem("lang", 'EN')
|
||||
setText(textEN)
|
||||
setLocale('en-gb')
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
console.log(time);
|
||||
function changeLanguage(language: string) {
|
||||
if (language === 'RU') {
|
||||
setLanguage(language);
|
||||
setText(textRU)
|
||||
localStorage.setItem("lang", 'RU')
|
||||
} else {
|
||||
setLanguage('EN')
|
||||
localStorage.setItem("lang", 'EN')
|
||||
setText(textEN)
|
||||
}
|
||||
}
|
||||
|
||||
AOS.init();
|
||||
return (
|
||||
<div className="App">
|
||||
<Header />
|
||||
<Mapblock />
|
||||
<SliderComponent />
|
||||
<Calendar setOpen={navigationHandler} open={next} time={time} onUpdate={updateTime}></Calendar>
|
||||
<Multiplayer />
|
||||
<Devices />
|
||||
<Analytics />
|
||||
</div>
|
||||
<Switch>
|
||||
<Route path="/" exact>
|
||||
<div className='App'>
|
||||
<Header text={text.footer} language={language} changeLanguage={changeLanguage}></Header>
|
||||
|
||||
<Main locale={language} text={text}></Main>
|
||||
<Footer text={text.footer}></Footer>
|
||||
</div>
|
||||
</Route>
|
||||
<Route exact path="/demos">
|
||||
<div className='App'>
|
||||
<main className="main">
|
||||
<Header text={text.footer} language={language} changeLanguage={changeLanguage}></Header>
|
||||
<Demostration></Demostration>
|
||||
</main>
|
||||
</div>
|
||||
</Route>
|
||||
|
||||
</Switch>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default App;
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 189 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,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,111 @@
|
||||
.navigation {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: #E3DDE5;
|
||||
padding: 8px 10px;
|
||||
box-sizing: border-box;
|
||||
position: fixed;
|
||||
top: 66px;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: #0E0E0E;
|
||||
width: 100%;
|
||||
z-index: 3;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.nav__close {
|
||||
cursor: pointer;
|
||||
object-fit: cover;
|
||||
width: 24px;
|
||||
|
||||
}
|
||||
|
||||
.button__container {
|
||||
}
|
||||
|
||||
|
||||
|
||||
.nav__header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 42px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 31px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.button__nav_container {
|
||||
margin-top: 28px;
|
||||
padding: 1px;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav__button {
|
||||
appearance: none;
|
||||
background-color: transparent;
|
||||
color: #ebebeb;
|
||||
margin: 0;
|
||||
text-align: left;
|
||||
border: none;
|
||||
height: 13px;
|
||||
-webkit-appearance: none;
|
||||
padding: 0;
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.language__container {
|
||||
border-bottom: 1px solid transparent;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.language__container_active {
|
||||
box-sizing: border-box;
|
||||
height: 20px;
|
||||
border-bottom: 1px solid #EBEBEB;
|
||||
}
|
||||
|
||||
.nav__button_active {
|
||||
border-bottom: 1px solid #EBEBEB;
|
||||
}
|
||||
.nav__title {
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 24px;
|
||||
line-height: 100%;
|
||||
/* identical to box height, or 24px */
|
||||
color: #FFFFFF;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.nav__line {
|
||||
background-color: #454545;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.nav__title_container {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
|
||||
}
|
||||
|
||||
.icon_chevron {
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
.nav__buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
@@ -0,0 +1,187 @@
|
||||
import './navigation.css'
|
||||
import '../header/header.css'
|
||||
import "../../styles/styles.css"
|
||||
import write from '../footer/send.svg'
|
||||
import phone from '../footer/phone.svg'
|
||||
import iconButton from "../../styles/iconButton.svg"
|
||||
import { AnimatePresence, motion } from "framer-motion";
|
||||
import chevron from '../header/chevronIcon.svg'
|
||||
import { text } from 'stream/consumers'
|
||||
type THeader = {
|
||||
menuOpen?: boolean,
|
||||
language: string,
|
||||
setOpen?: (value: boolean) => void
|
||||
changeLanguage: (language: string) => void;
|
||||
setOpacity?: (value: boolean) => void;
|
||||
text?: any;
|
||||
|
||||
}
|
||||
|
||||
const container = {
|
||||
hidden: {
|
||||
translateX: '100%',
|
||||
transition: { duration: 0.2, ease: 'easeOut' }
|
||||
},
|
||||
show: {
|
||||
translateX: '0%',
|
||||
transition: { duration: 0.2, ease: 'easeIn' },
|
||||
},
|
||||
exit: {
|
||||
translateX: '0%',
|
||||
transition: { duration: 0.2, ease: 'easeOut' }
|
||||
}
|
||||
}
|
||||
|
||||
const staggeredVariants = {
|
||||
hidden: {
|
||||
transition: {
|
||||
}
|
||||
},
|
||||
show: {
|
||||
transition: {
|
||||
staggerChildren: 0.35,
|
||||
staggerDirection: -1,
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
exit: {
|
||||
transition: {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const items = {
|
||||
hidden: {
|
||||
opacity: 0,
|
||||
},
|
||||
show: {
|
||||
opacity: 1,
|
||||
transition: { ease: 'easeIn' },
|
||||
|
||||
},
|
||||
|
||||
exit: {
|
||||
opacity: 1,
|
||||
}
|
||||
}
|
||||
|
||||
export const Nav: React.FC<THeader> = ({ menuOpen, language, changeLanguage, text }) => {
|
||||
|
||||
const { cardLarge } = text
|
||||
const { cardLarge1 } = text
|
||||
const { cardSmall } = text
|
||||
const { cardSmall1 } = text
|
||||
|
||||
|
||||
const langArray = [{
|
||||
value: 'ru-RU',
|
||||
name: 'RU'
|
||||
},
|
||||
{
|
||||
value: 'en-EN',
|
||||
name: 'EN'
|
||||
}]
|
||||
|
||||
console.log(language)
|
||||
|
||||
function langActive(lang: string, language: string) {
|
||||
if (lang === language) {
|
||||
return 'language__container_active'
|
||||
}
|
||||
|
||||
else {
|
||||
return 'language__container'
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<AnimatePresence>
|
||||
{menuOpen && (
|
||||
<motion.nav
|
||||
variants={container}
|
||||
initial={'hidden'}
|
||||
animate={'show'}
|
||||
exit={'hidden'}
|
||||
className={`navigation`}>
|
||||
<motion.div
|
||||
variants={staggeredVariants}
|
||||
initial={'hidden'}
|
||||
animate={'show'}
|
||||
exit={'exit'}
|
||||
className='nav__buttons'>
|
||||
<motion.div
|
||||
variants={items}
|
||||
className='nav__header'>
|
||||
<div className='button__nav_container'>
|
||||
{langArray.map((lang, i) => (
|
||||
<div className={langActive(lang.name, language)}>
|
||||
<button value={lang.value} key={i} onClick={() => changeLanguage(lang.name)} className='nav__button'>{lang.name}</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className='nav__title_container'>
|
||||
<h4 className='nav__title'>{text.captionContact}</h4>
|
||||
<img className='icon_chevron' src={chevron}></img>
|
||||
</div>
|
||||
<span className='nav__line'></span>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
variants={items}
|
||||
className='footer__card_2'>
|
||||
<div className='ellipse__container'>
|
||||
<div className="main-block__icon_container">
|
||||
<img src={iconButton} className="main-block__icon"></img>
|
||||
</div>
|
||||
</div>
|
||||
<div className={'card__write'}>
|
||||
<img src={write} className='card__icon'></img>
|
||||
<p className='card__caption'>{cardSmall.caption}</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
<motion.div
|
||||
variants={items}
|
||||
className='footer__card_2'>
|
||||
<div className='ellipse__container'>
|
||||
<div className="main-block__icon_container">
|
||||
<img src={iconButton} className="main-block__icon"></img>
|
||||
</div>
|
||||
</div>
|
||||
<div className='card__write'>
|
||||
<img src={phone} className='card__icon'></img>
|
||||
<p className='card__caption'>{cardSmall1.caption}</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
<motion.div
|
||||
variants={items}
|
||||
className={'footer__card_l'}>
|
||||
<div className='card__contacts'>
|
||||
<p className='card__email'>info@graff.tech</p>
|
||||
<p className='card__tel'>+7 800 770 00 76</p>
|
||||
</div>
|
||||
<div className='card__adress'>
|
||||
<p className='card__street'>{cardLarge.address}</p>
|
||||
<p className='card_city'>{cardLarge.city}</p>
|
||||
</div>
|
||||
<p className='card_country'>{cardLarge.country}</p>
|
||||
</motion.div>
|
||||
<motion.div
|
||||
variants={items}
|
||||
className='footer__card_l'>
|
||||
<div className='card__contacts'>
|
||||
<p className='card__email'>waseem@graff.tech</p>
|
||||
<p className='card__tel'>+971 50 938 8902</p>
|
||||
</div>
|
||||
<div className='card__adress card__adress_uae'>
|
||||
<p className='card_city'>{cardLarge1.address}</p>
|
||||
</div>
|
||||
<p className='card_country'>{cardLarge1.country}</p>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</motion.nav>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
)
|
||||
}
|
||||
@@ -1,5 +1,672 @@
|
||||
.analytics__container {
|
||||
background: #141414;
|
||||
border-radius: 32px;
|
||||
padding: 120px 32px 80px;
|
||||
margin-bottom: 160px;
|
||||
}
|
||||
|
||||
.mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.graph__container {
|
||||
display: grid;
|
||||
grid-template-rows: 1fr auto;
|
||||
gap: 26px;
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
|
||||
.graph__row_1 {
|
||||
box-sizing: border-box;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.graph__row_item {
|
||||
height: 256px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
flex-direction: column;
|
||||
background: #141414;
|
||||
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__text {
|
||||
|
||||
}
|
||||
|
||||
|
||||
.graph__row_2 {
|
||||
display: grid;
|
||||
grid-template-columns: 175px 175px 175px 175px 380px;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.graph__row_item_s {
|
||||
align-items: center;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
line-height: 120%;
|
||||
padding: 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 20px;
|
||||
padding: 24px;
|
||||
background: #141414;
|
||||
border-radius: 16px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.graph__text {
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 140%;
|
||||
color: #EBEBEB;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.graph__text_mobile {
|
||||
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: grid;
|
||||
grid-template-columns: auto 2fr auto;
|
||||
gap: 16px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.graph__title {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.graph__bar_row:last-of-type {
|
||||
margin-bottom: 0;
|
||||
|
||||
}
|
||||
|
||||
.graph__caption {
|
||||
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: 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;
|
||||
}
|
||||
|
||||
.graph__bar_2 {
|
||||
margin-right: 41px;
|
||||
background: linear-gradient(56.75deg, #D375FF 19.74%, #798FFF 82.32%);
|
||||
border-radius: 4px;
|
||||
height: 24px;
|
||||
width: 80%;
|
||||
|
||||
}
|
||||
|
||||
.graph__bar_3 {
|
||||
|
||||
background: linear-gradient(56.75deg, #D375FF 19.74%, #798FFF 82.32%);
|
||||
border-radius: 4px;
|
||||
height: 24px;
|
||||
width: 60%;
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.graph__bar_4 {
|
||||
background: linear-gradient(56.75deg, #D375FF 19.74%, #798FFF 82.32%);
|
||||
border-radius: 4px;
|
||||
height: 24px;
|
||||
width: 15%;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.bar__container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.chart__container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 49px;
|
||||
}
|
||||
|
||||
.legend__container {
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 140%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
gap: 6px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.legend__point {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.legend__row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
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 {
|
||||
align-items: flex-start;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.background__row {
|
||||
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;
|
||||
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: linear-gradient(56.75deg, #D375FF 19.74%, #798FFF 82.32%);
|
||||
}
|
||||
|
||||
.sales__row {
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
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;
|
||||
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
|
||||
}
|
||||
|
||||
.sales__procentage {
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
line-height: 130%;
|
||||
|
||||
}
|
||||
|
||||
.graph__title_s {
|
||||
width: 116px;
|
||||
height: 51px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1600px) {
|
||||
.graph__row_2 {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 456px;
|
||||
}
|
||||
|
||||
.graph__container {
|
||||
gap: 36px;
|
||||
margin-bottom: 96px;
|
||||
}
|
||||
|
||||
.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;
|
||||
|
||||
}
|
||||
|
||||
.analytics__container {
|
||||
margin-bottom: 192px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1300px) {
|
||||
|
||||
.background__row {
|
||||
width: 216px;
|
||||
}
|
||||
|
||||
.graph__bar_width_container {
|
||||
width: 123px;
|
||||
}
|
||||
|
||||
|
||||
.graph__row_2 {
|
||||
grid-template-columns: 151px 151px 151px 151px 318px;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
|
||||
.graph__row_1 {
|
||||
grid-template-columns: 318px 318px 318px;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.graph__row_item {
|
||||
height: 266px;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
|
||||
.chart__container {
|
||||
gap: 19px;
|
||||
}
|
||||
|
||||
.graph__row_item_l {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.analytics__container {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
|
||||
|
||||
.chart__container {
|
||||
gap: 54px;
|
||||
}
|
||||
|
||||
.bar__container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.background__row {
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
|
||||
.sales__procentage {
|
||||
width: 37px;
|
||||
}
|
||||
|
||||
.desktop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mobile {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.graph__row_1 {
|
||||
grid-template-columns: repeat(auto-fit, minmax(405px, 1fr));
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.graph__row_mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.graph__row_2 {
|
||||
grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
|
||||
}
|
||||
|
||||
.graph__row_item {
|
||||
height: 240px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.graph__row_item_s {
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
gap: 28px;
|
||||
}
|
||||
|
||||
.analytics__container {
|
||||
padding: 120px 20px 80px;
|
||||
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: grid;
|
||||
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: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sales__procentage {
|
||||
width: 37px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.chart__container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
gap: 35px;
|
||||
}
|
||||
|
||||
.bar__container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
.graph__bar_width_container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.graph__row_1 {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.sales__row {
|
||||
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: flex;
|
||||
flex-direction: column;
|
||||
|
||||
}
|
||||
|
||||
.graph__row_item {
|
||||
height: auto;
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
|
||||
.graph__row_2 {
|
||||
display: grid;
|
||||
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 {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,24 +1,181 @@
|
||||
import "../../styles/styles.css";
|
||||
import "./analytics.css";
|
||||
import iconButton from "../../styles/iconButton.svg"
|
||||
import "../multiplayer/multiplayer.css";
|
||||
import "./analytics.css"
|
||||
import { Link } from "react-router-dom";
|
||||
import { PieChartComp } from "../piechart/piechart";
|
||||
import { Button } from "../buttonDemo/buttonDemo"
|
||||
|
||||
export const Analytics: React.FC = ({}) => {
|
||||
return (
|
||||
<div className="analytics__container">
|
||||
<div className="main-block__container">
|
||||
<div>
|
||||
<p className="main-block__title main-block__title_small">
|
||||
Graff.estate stream{" "}
|
||||
</p>
|
||||
<p className="main-block__title_gardient main-block__title_gardient_small">
|
||||
передать на устройство пользователя впечатляющий уровень графики.{" "}
|
||||
</p>
|
||||
|
||||
|
||||
|
||||
export const Analytics: React.FC<any> = ({ text }) => {
|
||||
const { cardLarge } = text;
|
||||
const { cardLarge1 } = text;
|
||||
const { cardLarge2 } = text;
|
||||
|
||||
const { cardSmall } = text;
|
||||
const { cardSmall1 } = text;
|
||||
const { cardSmall2 } = text;
|
||||
const { cardSmall3 } = text;
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<div className="analytics__container">
|
||||
<div data-aos-duration="400"
|
||||
data-aos="fade-up"
|
||||
className="main-block__container">
|
||||
<div>
|
||||
<p className="main-block__title_small">
|
||||
Graff.estate stream{" "}
|
||||
</p>
|
||||
<p className="main-block__title_gardient_small">
|
||||
{text.mainBlockCaptionColor}
|
||||
</p>
|
||||
</div>
|
||||
<p className="main-block__caption multiplayer__caption">
|
||||
{text.mainBlockCaption}
|
||||
</p>
|
||||
</div>
|
||||
<div data-aos="fade-up" data-aos-delay="100" className="graph__container">
|
||||
<div className="graph__row_1">
|
||||
<div className="graph__row_item">
|
||||
<span className="graph__title title_1">{cardLarge.title}</span>
|
||||
<div className="graph__bar_row">
|
||||
<p className="graph__caption">{cardLarge.row}</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">{cardLarge.row1}</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">{cardLarge.row2}</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">{cardLarge.row3}</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">{cardLarge1.title}</span>
|
||||
<div className="chart__container">
|
||||
<PieChartComp />
|
||||
<div className="legend__container">
|
||||
<div className="legend__row">
|
||||
<div className="legend__point color"></div>
|
||||
<p className="legend__caption">{cardLarge1.row}</p>
|
||||
</div>
|
||||
<div className="legend__row">
|
||||
<div className="legend__point color1"></div>
|
||||
<p className="legend__caption">{cardLarge1.row1}</p>
|
||||
</div>
|
||||
<div className="legend__row">
|
||||
<div className="legend__point color2"></div>
|
||||
<p className="legend__caption">{cardLarge1.row2}</p>
|
||||
</div>
|
||||
<div className="legend__row">
|
||||
<div className="legend__point color3"></div>
|
||||
<p className="legend__caption">{cardLarge1.row3}</p>
|
||||
</div>
|
||||
<div className="legend__row">
|
||||
<div className="legend__point color4"></div>
|
||||
<p className="legend__caption">{cardLarge1.row4}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="graph__row_item">
|
||||
<span className="graph__title">{cardLarge2.title}</span>
|
||||
<div className="sales__container">
|
||||
<div className="sales__row">
|
||||
<div className="background__row">
|
||||
<div className="sales__bar">{cardLarge2.row}</div>
|
||||
</div>
|
||||
<div className="sales__procentage"></div>
|
||||
</div>
|
||||
<div className="sales__row">
|
||||
<div className="background__row">
|
||||
<div className="sales__bar sales_bar_width">{cardLarge2.row1}</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">{cardLarge2.row2}</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">{cardLarge2.row3}</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">{cardSmall.title}</span>
|
||||
<div className="graph__color_elem">
|
||||
12:45
|
||||
</div>
|
||||
</div>
|
||||
<div className="graph__row_item_s">
|
||||
<span className="graph__title_s">{cardSmall1.title}</span>
|
||||
<div className="graph__color_elem">
|
||||
856
|
||||
</div>
|
||||
</div>
|
||||
<div className=" graph__row_item_s">
|
||||
<span className="graph__title_s">{cardSmall2.title}</span>
|
||||
<div className="graph__color_elem">
|
||||
12,44
|
||||
</div>
|
||||
</div>
|
||||
<div className="graph__row_item_s">
|
||||
<span className="graph__title_s">{cardSmall3.title}</span>
|
||||
<div className="graph__color_elem">
|
||||
134,5
|
||||
</div>
|
||||
</div>
|
||||
<div className=" graph__row_mobile graph__row_item_l">
|
||||
<div className="graph__text">{text.mainBlockSubblock}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="main-block_subblock">
|
||||
<div className="graph__text_mobile">{text.mainBlockSubblock}</div>
|
||||
<Button text={text}></Button>
|
||||
</div>
|
||||
</div>
|
||||
<p className="main-block__caption multiplayer__caption">
|
||||
Для работы с интерактивной презентацией покупателю достаточно
|
||||
смартфона и мобильного интернета.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
)
|
||||
}
|
||||
|
Before Width: | Height: | Size: 217 KiB After Width: | Height: | Size: 217 KiB |
@@ -0,0 +1,182 @@
|
||||
.animation-container {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
height: 90vh;
|
||||
|
||||
}
|
||||
|
||||
.test {
|
||||
z-index: -1;
|
||||
top: 2%;
|
||||
right: 0%;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
|
||||
}
|
||||
|
||||
.mapblock__container {
|
||||
color: #ebebeb;
|
||||
background-image: url(./Map.svg);
|
||||
background-repeat: no-repeat;
|
||||
height: 780px;
|
||||
background-position: 300px;
|
||||
margin-bottom: 160px;
|
||||
}
|
||||
|
||||
.title__container {
|
||||
z-index: 99;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 30px;
|
||||
padding-top: 140px;
|
||||
}
|
||||
|
||||
.title__main {
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
font-size: 96px;
|
||||
line-height: 80%;
|
||||
margin: 0;
|
||||
color: #ebebeb;
|
||||
}
|
||||
|
||||
.title__gardient_pos {
|
||||
background: linear-gradient(to right, #D375FF 0%, #798FFF 45%);
|
||||
|
||||
}
|
||||
|
||||
.title__gardient {
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
font-size: 96px;
|
||||
line-height: 80%;
|
||||
margin: 0;
|
||||
background-repeat: repeat;
|
||||
background-color: transparent;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
-moz-background-clip: text;
|
||||
-moz-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.button__demo {
|
||||
box-sizing: border-box;
|
||||
|
||||
background-color: transparent;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 14px 14px 12px 20px;
|
||||
gap: 4px;
|
||||
border: 1px solid #454545;
|
||||
border-radius: 32px;
|
||||
color: #ebebeb;
|
||||
width: 156px;
|
||||
margin-top: 31px;
|
||||
}
|
||||
|
||||
.title__caption {
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 150%;
|
||||
margin-bottom: 20px;
|
||||
/* or 21px */
|
||||
|
||||
letter-spacing: 0.02em;
|
||||
text-transform: uppercase;
|
||||
|
||||
/* Landing/White */
|
||||
|
||||
color: #ebebeb;
|
||||
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
font-size: 96px;
|
||||
line-height: 80%;
|
||||
/* or 77px */
|
||||
|
||||
/* Landing/White */
|
||||
|
||||
color: #ebebeb;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1600px) {
|
||||
.title {
|
||||
font-size: 6vw;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.title__gardient {
|
||||
font-size: 6vw;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.title__caption {
|
||||
font-size: 0.8vw;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.title__container {
|
||||
padding-top: 170px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.animation-container {
|
||||
box-sizing: border-box;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@media screen and (max-width: 639px) {
|
||||
|
||||
|
||||
.title__container {
|
||||
padding-top: 70px;
|
||||
}
|
||||
|
||||
.test {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.animation-container {
|
||||
background-image: url(./Map.svg);
|
||||
background-repeat: no-repeat;
|
||||
padding: 10px;
|
||||
background-position: 19%;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: 300;
|
||||
font-size: 54px;
|
||||
line-height: 80%;
|
||||
}
|
||||
|
||||
.title__gardient {
|
||||
font-weight: 300;
|
||||
font-size: 54px;
|
||||
line-height: 80%;
|
||||
}
|
||||
|
||||
.title__container {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
import { MapAnimation } from "../mapAnimation/mapAnimation"
|
||||
import "./animationComponent.css"
|
||||
import "../../styles/styles.css"
|
||||
import "./mapblock.css"
|
||||
import iconButton from "../../styles/iconButton.svg"
|
||||
import { Button } from "../buttonDemo/buttonDemo"
|
||||
|
||||
export const AnimationComponent: React.FC<any> = ({text}) => {
|
||||
console.log(text)
|
||||
return (
|
||||
<div>
|
||||
<div className="animation-container">
|
||||
<div className="title__container">
|
||||
<div>
|
||||
<p className="title">Graff.estate </p>
|
||||
<p className="title__gardient title__gardient_pos">stream</p>
|
||||
</div>
|
||||
<span className="title__caption">
|
||||
{text.titleCaption}
|
||||
</span>
|
||||
<Button text={text}></Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="test">
|
||||
<MapAnimation></MapAnimation>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
Before Width: | Height: | Size: 289 B After Width: | Height: | Size: 289 B |
@@ -0,0 +1,16 @@
|
||||
import { Link } from "react-router-dom";
|
||||
import iconButton from '../../styles/iconButton.svg'
|
||||
import '../../styles/styles.css'
|
||||
|
||||
export const Button: React.FC<any> = ({text}) => {
|
||||
return (
|
||||
<Link to="/demos" className="link">
|
||||
<button className="main-block__button">
|
||||
{text.button}
|
||||
<div className="main-block__icon_container">
|
||||
<img src={iconButton} className="main-block__icon"></img>
|
||||
</div>
|
||||
</button>
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="16" viewBox="0 0 24 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M23 8H1M1 8L8.2 1M1 8L8.2 15" stroke="#567ECE" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 208 B |
@@ -1,232 +0,0 @@
|
||||
.title_small {
|
||||
font-size: 40px;
|
||||
}
|
||||
.button__arrow_back {
|
||||
cursor: pointer;
|
||||
}
|
||||
.point {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.caption {
|
||||
font-size: 14px;
|
||||
}
|
||||
.appointment__block {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 24px;
|
||||
margin-top: 16px;
|
||||
font-family: "Gilroy";
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
line-height: 130%;
|
||||
|
||||
}
|
||||
.calendar__container {
|
||||
padding-top: 160px;
|
||||
margin-bottom: 160px;
|
||||
}
|
||||
|
||||
.appointment__caption_active {
|
||||
color: #567ECE;
|
||||
|
||||
}
|
||||
|
||||
.line {
|
||||
width: 100%;
|
||||
background-color: #454545;
|
||||
height: 1px;
|
||||
margin-top: 16px;
|
||||
margin-bottom: 21px;
|
||||
}
|
||||
|
||||
.calendar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
color: #ebebeb;
|
||||
box-sizing: border-box;
|
||||
width: 385px;
|
||||
background: #141414;
|
||||
border-radius: 16px;
|
||||
padding: 24px 32px;
|
||||
box-sizing: border-box;
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
transition: opacity ease-in 0.5s;
|
||||
}
|
||||
|
||||
.calendar_active {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: #ebebeb;
|
||||
box-sizing: border-box;
|
||||
width: 385px;
|
||||
background: #141414;
|
||||
border-radius: 16px;
|
||||
padding: 24px 32px;
|
||||
box-sizing: border-box;
|
||||
opacity: 1;
|
||||
transition: opacity ease-in 0.5s;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1152px) {
|
||||
.calendar {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.caption__container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 17px;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 25px;
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
|
||||
.calendar__header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.calendar__caption {
|
||||
font-family: "Gilroy";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 140%;
|
||||
/* or 25px */
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
.calendar__caption {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.date__container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 27px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.date {
|
||||
font-family: "Gilroy";
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
line-height: 110%;
|
||||
/* or 14px */
|
||||
}
|
||||
|
||||
.date_time {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
.date {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar__table {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
margin-bottom: 4px;
|
||||
justify-content: center;
|
||||
border-radius: 4px;
|
||||
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.calendar__table:nth-child(even) {
|
||||
background: rgba(86, 126, 206, 0.1);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1152px) {
|
||||
.calendar__table {
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 832px) {
|
||||
.calendar__table {
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
.calendar__table {
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
.calendar__cell {
|
||||
font-family: "Gilroy";
|
||||
font-style: normal;
|
||||
padding: 3px 5px;
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
line-height: 130%;
|
||||
cursor: pointer;
|
||||
height: 30px;
|
||||
transition: all 0.3s ease;
|
||||
/* identical to box height, or 29px */
|
||||
}
|
||||
|
||||
.calendar__cell_none {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
.calendar__cell {
|
||||
font-size: 14px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar__cell_active {
|
||||
color: #567ece;
|
||||
}
|
||||
|
||||
.calendar__cell_nopoint {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.weekday__cell {
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-family: "Gilroy";
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
line-height: 130%;
|
||||
height: 30px;
|
||||
color: #ebebeb;
|
||||
/* identical to box height, or 29px */
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
.weekday__cell {
|
||||
font-size: 14px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar_none {
|
||||
display: none;
|
||||
}
|
||||
@@ -1,187 +1,146 @@
|
||||
import React from "react";
|
||||
import "../sliderComponent/sliderComponent.css";
|
||||
import "../calendar/calendar.css";
|
||||
import moment, { Moment } from "moment";
|
||||
import "moment/locale/ru";
|
||||
import { useEffect, useState } from "react";
|
||||
import left from "./Arrow_Left.svg";
|
||||
import right from "./Arrow_Right.svg";
|
||||
import moment, { Moment } from "moment";
|
||||
import point0 from "./Ellipse0.svg";
|
||||
import point1 from "./Ellipse1.svg";
|
||||
import Timepicker from "../timepicker/timepicker";
|
||||
import Form from "../form/form";
|
||||
import { TObjct } from "../../App";
|
||||
import "../../styles/styles.css";
|
||||
import { TProps } from "../calendarDesktop/calendarDesktop";
|
||||
import { useSwiper } from 'swiper/react';
|
||||
|
||||
export type TProps = {
|
||||
time: Moment;
|
||||
onUpdate: (value: Moment) => void;
|
||||
setOpen: (value: TObjct) => void;
|
||||
open: TObjct;
|
||||
};
|
||||
export const Calendar: React.FC<TProps> = ({ open, setOpen, time, onUpdate, isMobile, locale, text }) => {
|
||||
const swiper = useSwiper();
|
||||
const [calendar, setCalendar] = useState<any[]>([]);
|
||||
const [value, setValue] = useState(time);
|
||||
const currDate = moment()
|
||||
const startDay = value.clone().startOf("month").startOf("week");
|
||||
const endDay = value.clone().endOf("month").endOf("week");
|
||||
const weekDays = getWeekDays()
|
||||
|
||||
export const Calendar: React.FC<TProps> = ({
|
||||
time,
|
||||
onUpdate,
|
||||
setOpen,
|
||||
open,
|
||||
}) => {
|
||||
const [calendar, setCalendar] = useState<any[]>([]);
|
||||
const [value, setValue] = useState(time);
|
||||
const currDate = moment();
|
||||
const startDay = value.clone().startOf("month").startOf("week");
|
||||
const endDay = value.clone().endOf("month").endOf("week");
|
||||
const weekDays = ["пн", "вт", "ср", "чт", "пт", "сб", "вс"];
|
||||
|
||||
useEffect(() => {
|
||||
const day = startDay.clone().subtract("1", "day");
|
||||
const a: any = [];
|
||||
while (day.isBefore(endDay, "day")) {
|
||||
a.push(
|
||||
Array(7)
|
||||
.fill(0)
|
||||
.map(() => day.add(1, "day").clone())
|
||||
);
|
||||
function getWeekDays() {
|
||||
if (locale === 'RU') {
|
||||
return ["пн", "вт", "ср", "чт", "пт", "сб", "вс"];
|
||||
} else {
|
||||
return ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
||||
}
|
||||
}
|
||||
setCalendar(a);
|
||||
}, [value]);
|
||||
console.log(value);
|
||||
|
||||
function hide(day: object) {
|
||||
if (value.isSame(day, "month")) {
|
||||
if (currDate.isSame(day, "day")) {
|
||||
const cellClass = "calendar__cell_active calendar__cell";
|
||||
return cellClass;
|
||||
}
|
||||
return "calendar__cell";
|
||||
} else {
|
||||
return "calendar__cell_none";
|
||||
useEffect(() => {
|
||||
setValue(time.locale(locale as string))
|
||||
}, [locale])
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
const day = startDay.clone().subtract("1", "day");
|
||||
const a: any = [];
|
||||
while (day.isBefore(endDay, "day")) {
|
||||
a.push(
|
||||
Array(7)
|
||||
.fill(0)
|
||||
.map(() => day.add(1, "day").clone())
|
||||
);
|
||||
}
|
||||
setCalendar(a);
|
||||
}, [value]);
|
||||
console.log(value);
|
||||
|
||||
|
||||
function hide(day: object, i: number) {
|
||||
if (value.isSame(day, "month")) {
|
||||
if (currDate.isSameOrBefore(day, "day") && i != 5 && i != 6) {
|
||||
const cellClass = "calendar__cell_active calendar__cell";
|
||||
return cellClass;
|
||||
}
|
||||
return "calendar__cell";
|
||||
} else {
|
||||
return "calendar__cell_none";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function prevMonth() {
|
||||
return value.clone().subtract(1, "month");
|
||||
}
|
||||
|
||||
function nextMonth() {
|
||||
return value.clone().add(1, "month").startOf("month");
|
||||
}
|
||||
|
||||
function thisMonth() {
|
||||
return value.isSame(new Date(), "month");
|
||||
}
|
||||
|
||||
function updateDay(day: Moment) {
|
||||
const temp = currDate.clone().subtract(1, "day");
|
||||
if (day.isBefore(temp)) {
|
||||
return;
|
||||
} else {
|
||||
onUpdate(day);
|
||||
setOpen({
|
||||
calendar: false,
|
||||
timePicker: true,
|
||||
form: false,
|
||||
});
|
||||
function prevMonth() {
|
||||
return value.clone().subtract(1, "month");
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="calendar__container">
|
||||
<div className="main-block__container">
|
||||
<div>
|
||||
<p className="main-block__title main-block__title_small">
|
||||
Graff.estate stream{" "}
|
||||
</p>
|
||||
<p className="main-block__title_gardient main-block__title_gardient_small">
|
||||
легко встраивается в существующую цепочку продаж.
|
||||
</p>
|
||||
</div>
|
||||
<p className=" main-block__caption_color">
|
||||
Проведение виртуальных экскурсий сотрудниками офиса продаж.
|
||||
</p>
|
||||
<p className="main-block__caption">
|
||||
Покупателю доступна возможность самостоятельно записаться на просмотр
|
||||
в удобное для него время, а менеджер отдела продаж удаленно поможет
|
||||
выбрать планировку и забронировать квартиру.
|
||||
</p>
|
||||
</div>
|
||||
<div className="wrapper">
|
||||
<div className={open.calendar ? "calendar_active" : "calendar"}>
|
||||
<div className="calendar__header">
|
||||
<span className="calendar__caption calendar__caption_calendar">
|
||||
Выбор даты
|
||||
</span>
|
||||
<div className="line"></div>
|
||||
</div>
|
||||
<div className="form__block">
|
||||
<div className="date__container">
|
||||
<img
|
||||
alt="back"
|
||||
src={left}
|
||||
className="button__arrow"
|
||||
onClick={() => !thisMonth() && setValue(prevMonth())}
|
||||
></img>
|
||||
<span className="date">
|
||||
{value.format("MMMM")}, {value.format("YYYY")}
|
||||
</span>
|
||||
<img
|
||||
alt="next"
|
||||
src={right}
|
||||
className="button__arrow"
|
||||
onClick={() => setValue(nextMonth())}
|
||||
></img>
|
||||
function nextMonth() {
|
||||
return value.clone().add(1, "month").startOf("month");
|
||||
}
|
||||
|
||||
function thisMonth() {
|
||||
return value.isSame(new Date(), "month");
|
||||
}
|
||||
|
||||
function updateDay(day: Moment) {
|
||||
const temp = currDate.clone().subtract(1, "day");
|
||||
if (day.isBefore(temp)) {
|
||||
return;
|
||||
} else {
|
||||
if (isMobile) {
|
||||
swiper.slideNext()
|
||||
} else {
|
||||
}
|
||||
setOpen({
|
||||
calendar: false,
|
||||
timePicker: true,
|
||||
form: false,
|
||||
confirm: false,
|
||||
});
|
||||
onUpdate(day);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
return (<div data-aos="fade-up" data-aos-delay="100" className='calendar'>
|
||||
<div className={open.calendar ? 'opacity_active' : 'opacity'}>
|
||||
<div className="calendar__header">
|
||||
<span className="calendar__caption calendar__caption_calendar">
|
||||
{text.calendarCaption}
|
||||
</span>
|
||||
<div className="line"></div>
|
||||
</div>
|
||||
<div className="calendar__table">
|
||||
{weekDays.map((day, i) => (
|
||||
<div key={i} className="weekday__cell">
|
||||
{day}
|
||||
<div className="form__block">
|
||||
<div className="date__container">
|
||||
<div
|
||||
className="button__chevron_l"
|
||||
onClick={() => !thisMonth() && setValue(prevMonth())}
|
||||
></div>
|
||||
<span className="date">
|
||||
{value.format("MMMM")}, {value.format("YYYY")}
|
||||
</span>
|
||||
<div
|
||||
className="button__chevron_r"
|
||||
onClick={() => setValue(nextMonth())}
|
||||
></div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{calendar.map((week, i) => (
|
||||
<div key={i} className="calendar__table">
|
||||
{week.map((day: any, i: number) => (
|
||||
<div
|
||||
key={i}
|
||||
onClick={() => updateDay(day)}
|
||||
className={hide(day)}
|
||||
>
|
||||
{day.format("D")}
|
||||
</div>
|
||||
<div className="calendar__table">
|
||||
{weekDays.map((day, i) => (
|
||||
<div key={i} className="weekday__cell">
|
||||
{day}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{calendar.map((week, i) => (
|
||||
<div key={i} className="calendar__table">
|
||||
{week.map((day: any, i: number) => (
|
||||
<div
|
||||
key={i}
|
||||
onClick={() => updateDay(day)
|
||||
}
|
||||
className={hide(day, i)}
|
||||
>
|
||||
{day.format("D")}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="appointment__block">
|
||||
</div>
|
||||
</div>
|
||||
<div className="appointment__block">
|
||||
<div>
|
||||
<img className="point" src={point1}></img>
|
||||
<span className="appointment__caption_active">Запись есть</span>
|
||||
<img className="point" src={point1}></img>
|
||||
<span className="appointment__caption_active">{text.appointmentTrue}</span>
|
||||
</div>
|
||||
<div>
|
||||
<img className="point" src={point0}></img>
|
||||
<span className="appointment__caption" >Записи нет</span>
|
||||
<img className="point" src={point0}></img>
|
||||
<span className="appointment__caption" >{text.appointmentFalse}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Timepicker
|
||||
open={open}
|
||||
setOpen={setOpen}
|
||||
onUpdate={onUpdate}
|
||||
time={time}
|
||||
></Timepicker>
|
||||
<Form
|
||||
open={open}
|
||||
setOpen={setOpen}
|
||||
onUpdate={onUpdate}
|
||||
time={time}
|
||||
></Form>
|
||||
</div>
|
||||
<div className="main-block__subblock-container">
|
||||
<div className="main-block_subblock">
|
||||
Процесс записи может быть встроен на сайт жилого комплекса, на который
|
||||
была настроена реклама.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
</div>)
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
<svg width="9" height="16" viewBox="0 0 9 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1.00002 15L8 7.99998L1.00002 1" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 207 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="M23 12H1M1 12L8.2 5M1 12L8.2 19" stroke="#EBEBEB" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 211 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="M1 12H23M23 12L15.8 5M23 12L15.8 19" stroke="#EBEBEB" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 215 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="4" cy="4" r="4" fill="#EBEBEB"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 144 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="4" cy="4" r="4" fill="#567ECE"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 144 B |
@@ -0,0 +1,442 @@
|
||||
|
||||
.title_small {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.calendar__padding {}
|
||||
|
||||
.button__arrow_l {
|
||||
cursor: pointer;
|
||||
background-image: url(./Arrow_Left.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
height: 14px;
|
||||
width: 22px;
|
||||
}
|
||||
|
||||
.button__arrow_r {
|
||||
transform: matrix(-1, 0, 0, 1, 0, 0);
|
||||
|
||||
cursor: pointer;
|
||||
background-image: url(./Arrow_Left.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
height: 14px;
|
||||
width: 22px;
|
||||
}
|
||||
|
||||
.button__arrow_r:hover {
|
||||
background-image: url(../calendar/arrow_active.svg);
|
||||
}
|
||||
|
||||
.button__arrow_l:hover {
|
||||
background-image: url(../calendar/arrow_active.svg);
|
||||
}
|
||||
|
||||
.button__arrow_back {
|
||||
cursor: pointer;
|
||||
background-image: url(./Arrow_Left.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
height: 14px;
|
||||
width: 25px;
|
||||
}
|
||||
|
||||
.button__arrow_back:hover {
|
||||
background-image: url(../calendar/arrow_active.svg);
|
||||
}
|
||||
|
||||
.button__chevron_l {
|
||||
transform: rotate(-180deg);
|
||||
cursor: pointer;
|
||||
background-image: url(../calendar/chevron.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
.button__chevron_r {
|
||||
cursor: pointer;
|
||||
background-image: url(../calendar/chevron.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.button__chevron_l:hover {
|
||||
background-color: rgba(86, 126, 206, 0.2);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.button__chevron_r:hover {
|
||||
background-color: rgba(86, 126, 206, 0.2);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.point {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.caption {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.appointment__block {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 24px;
|
||||
margin-top: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
line-height: 130%;
|
||||
|
||||
}
|
||||
|
||||
.calendar__container {
|
||||
box-sizing: border-box;
|
||||
padding-top: 160px;
|
||||
margin-bottom: 160px;
|
||||
}
|
||||
|
||||
.appointment__caption_active {
|
||||
color: #567ECE;
|
||||
|
||||
}
|
||||
|
||||
.line {
|
||||
width: 100%;
|
||||
background-color: #454545;
|
||||
height: 1px;
|
||||
margin-top: 16px;
|
||||
margin-bottom: 21px;
|
||||
}
|
||||
|
||||
.calendar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
color: #ebebeb;
|
||||
box-sizing: border-box;
|
||||
width: 385px;
|
||||
background: #141414;
|
||||
border-radius: 16px;
|
||||
padding: 24px 32px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.calendar_active {
|
||||
box-sizing: border-box;
|
||||
opacity: 1;
|
||||
transition: opacity ease-in 0.5s;
|
||||
}
|
||||
|
||||
.opacity_active {
|
||||
height: 100%;
|
||||
opacity: 1;
|
||||
transition: opacity ease-in 0.5s;
|
||||
pointer-events: all;
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.opacity {
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
opacity: 0.5;
|
||||
transition: opacity ease-in 0.5s;
|
||||
pointer-events: none;
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
.caption__container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 17px;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 25px;
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
|
||||
.calendar__header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.calendar__caption {
|
||||
font-weight: 500;
|
||||
font-size: 24px;
|
||||
line-height: 100%;
|
||||
/* or 25px */
|
||||
}
|
||||
|
||||
|
||||
.date__container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 16px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.date {
|
||||
text-align: left;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 150%;
|
||||
/* identical to box height, or 21px */
|
||||
|
||||
letter-spacing: 0.02em;
|
||||
text-transform: uppercase;
|
||||
/* or 14px */
|
||||
}
|
||||
|
||||
.date_time {
|
||||
margin-bottom: 16px;
|
||||
text-align: left
|
||||
}
|
||||
|
||||
|
||||
.calendar__table {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
justify-content: center;
|
||||
border-radius: 4px;
|
||||
gap: 2px;
|
||||
|
||||
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.calendar__table:nth-child(odd) {
|
||||
background: rgba(86, 126, 206, 0.1);
|
||||
}
|
||||
|
||||
|
||||
|
||||
.calendar__cell {
|
||||
pointer-events: none;
|
||||
font-style: normal;
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 140%;
|
||||
cursor: pointer;
|
||||
padding: 11px 5px;
|
||||
box-sizing: border-box;
|
||||
transition: all 0.3s ease;
|
||||
/* identical to box height, or 29px */
|
||||
}
|
||||
|
||||
.calendar__cell_none {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.calendar__cell_active {
|
||||
pointer-events: all;
|
||||
color: #567ece;
|
||||
}
|
||||
|
||||
.calendar__cell_nopoint {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.weekday__cell {
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 140%;
|
||||
height: 18px;
|
||||
padding: 11px 5px;
|
||||
color: #ebebeb;
|
||||
/* identical to box height, or 29px */
|
||||
}
|
||||
|
||||
|
||||
|
||||
.calendar_none {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1600px) {
|
||||
.calendar {
|
||||
width: 462px;
|
||||
padding: 28px 40px;
|
||||
|
||||
}
|
||||
|
||||
.caption__container {
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
margin-bottom: 96px;
|
||||
}
|
||||
|
||||
.appointment__block {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.calendar__cell {
|
||||
padding: 13px 6px;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.calendar__container {
|
||||
padding-top: 192px;
|
||||
margin-bottom: 192px;
|
||||
|
||||
}
|
||||
|
||||
.calendar__caption {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.date {
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.weekday__cell {
|
||||
font-size: 22px;
|
||||
padding: 13px 6px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1279px) {
|
||||
.calendar_active {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.calendar {
|
||||
width: 320px;
|
||||
padding: 24px;
|
||||
|
||||
}
|
||||
|
||||
.calendar__table {
|
||||
gap: 8px;
|
||||
grid-column-gap: 5px;
|
||||
}
|
||||
|
||||
.calendar__cell {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.calendar {
|
||||
height: 483px;
|
||||
}
|
||||
|
||||
.calendar__cell {
|
||||
font-size: 14px;
|
||||
|
||||
}
|
||||
|
||||
.weekday__cell {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.calendar__container {
|
||||
box-sizing: border-box;
|
||||
padding: 120px 20px 80px;
|
||||
margin-bottom: 40px;
|
||||
|
||||
}
|
||||
|
||||
.calendar__caption {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.calendar {
|
||||
width: 100%;
|
||||
padding: 24px;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 639px) {
|
||||
.wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.calendar {
|
||||
height: 420px;
|
||||
width: 100%;
|
||||
padding: 24px;
|
||||
|
||||
}
|
||||
|
||||
.calendar__container {
|
||||
padding: 80px 0 80px;
|
||||
margin-bottom: 0;
|
||||
|
||||
}
|
||||
|
||||
.calendar__padding {
|
||||
padding: 0px 10px 0px;
|
||||
box-sizing: border-box;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.sales__row {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.chart__container {
|
||||
gap: 35px;
|
||||
}
|
||||
|
||||
|
||||
.graph__container {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
|
||||
.weekday__cell {
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
line-height: 130%;
|
||||
|
||||
}
|
||||
|
||||
.calendar__caption {
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
line-height: 100%;
|
||||
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,116 @@
|
||||
import React from "react";
|
||||
import "../sliderComponent/sliderComponent.css";
|
||||
import "./calendar.css";
|
||||
import moment, { Moment } from "moment";
|
||||
import Timepicker from "../timepicker/timepicker";
|
||||
import Form from "../form/form";
|
||||
import { TObjct } from "../../App";
|
||||
import "../../styles/styles.css";
|
||||
import { Confirm } from "../confirm/confirm";
|
||||
import { Calendar } from "../calendar/calendar";
|
||||
|
||||
|
||||
export type TProps = {
|
||||
time: Moment;
|
||||
onUpdate: (value: Moment) => void;
|
||||
setOpen: (value: TObjct) => void;
|
||||
onExit: () => void;
|
||||
open: TObjct;
|
||||
displayForm: boolean
|
||||
setDisplayForm: (value: boolean) => void
|
||||
isMobile: boolean;
|
||||
text?: any;
|
||||
locale?: string;
|
||||
};
|
||||
|
||||
export const CalendarDesktop: React.FC<TProps> = ({
|
||||
time,
|
||||
onUpdate,
|
||||
setOpen,
|
||||
open,
|
||||
onExit,
|
||||
displayForm,
|
||||
setDisplayForm,
|
||||
isMobile,
|
||||
text,
|
||||
locale
|
||||
}) => {
|
||||
|
||||
console.log(isMobile, 'mobile')
|
||||
|
||||
return (
|
||||
<div className="calendar__container">
|
||||
<div data-aos="fade-up" className="main-block__container">
|
||||
<div>
|
||||
<p className="main-block__title_small">
|
||||
Graff.estate stream{" "}
|
||||
</p>
|
||||
<p className="main-block__title_gardient_small ">
|
||||
{text.title}
|
||||
</p>
|
||||
</div>
|
||||
<p className=" main-block__caption_color">
|
||||
{text.mainBlockCaptionColor}
|
||||
</p>
|
||||
<p className="main-block__caption_l">
|
||||
{text.mainBlockCaption}
|
||||
</p>
|
||||
</div>
|
||||
<div className="wrapper">
|
||||
<Calendar
|
||||
text={text}
|
||||
setDisplayForm={setDisplayForm}
|
||||
displayForm={displayForm}
|
||||
open={open}
|
||||
setOpen={setOpen}
|
||||
onUpdate={onUpdate}
|
||||
time={time}
|
||||
onExit={onExit}
|
||||
isMobile={isMobile}
|
||||
locale={locale}
|
||||
|
||||
/>
|
||||
<Timepicker
|
||||
text={text}
|
||||
setDisplayForm={setDisplayForm}
|
||||
displayForm={displayForm}
|
||||
open={open}
|
||||
setOpen={setOpen}
|
||||
onUpdate={onUpdate}
|
||||
time={time}
|
||||
onExit={onExit}
|
||||
isMobile={isMobile}
|
||||
|
||||
></Timepicker>
|
||||
<Form
|
||||
text={text}
|
||||
setDisplayForm={setDisplayForm}
|
||||
displayForm={displayForm}
|
||||
open={open}
|
||||
setOpen={setOpen}
|
||||
onUpdate={onUpdate}
|
||||
time={time}
|
||||
onExit={onExit}
|
||||
isMobile={isMobile}
|
||||
|
||||
></Form>
|
||||
<Confirm
|
||||
text={text}
|
||||
setDisplayForm={setDisplayForm}
|
||||
displayForm={displayForm}
|
||||
open={open}
|
||||
setOpen={setOpen}
|
||||
onUpdate={onUpdate}
|
||||
time={time}
|
||||
onExit={onExit}
|
||||
isMobile={isMobile}
|
||||
></Confirm>
|
||||
</div>
|
||||
<div className="main-block__subblock-container">
|
||||
<div className="main-block_subblock">
|
||||
{text.mainBlockSubblock}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,10 @@
|
||||
.swiper {
|
||||
margin-bottom: 57px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 639px) {
|
||||
.swiper {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,110 @@
|
||||
import { Swiper, SwiperSlide } from "swiper/react";
|
||||
import { Calendar } from "../calendar/calendar";
|
||||
import { Timepicker } from '../timepicker/timepicker'
|
||||
import { Form } from "../form/form"
|
||||
import { Confirm } from "../confirm/confirm"
|
||||
import { TProps } from "../calendarDesktop/calendarDesktop";
|
||||
import './calendarMobile.css'
|
||||
import { Navigation } from "swiper";
|
||||
import "swiper/css";
|
||||
import "swiper/css/pagination";
|
||||
import "swiper/css/navigation";
|
||||
import "./calendarMobile.css"
|
||||
import useScreenSize from 'use-screen-size'
|
||||
|
||||
|
||||
|
||||
|
||||
export const CalendarMobile: React.FC<TProps> = ({ setDisplayForm, displayForm, open, setOpen, onUpdate, time, onExit, isMobile, text, locale }) => {
|
||||
const size = useScreenSize()
|
||||
|
||||
|
||||
return (
|
||||
<div className="calendar__mobile">
|
||||
<div className="calendar__container">
|
||||
<div data-aos="fade-up" className="main-block__container calendar__padding">
|
||||
<div>
|
||||
<p className="main-block__title_small">
|
||||
Graff.estate stream{" "}
|
||||
</p>
|
||||
<p className="main-block__title_gardient_small">
|
||||
{text.title}
|
||||
</p>
|
||||
</div>
|
||||
<p className=" main-block__caption_color">
|
||||
{text.mainBlockCaptionColor}
|
||||
</p>
|
||||
<p className="main-block__caption_l">
|
||||
{text.mainBlockCaption}
|
||||
</p>
|
||||
</div>
|
||||
<Swiper
|
||||
rewind={true}
|
||||
centeredSlides={true}
|
||||
spaceBetween={0}
|
||||
initialSlide={0}
|
||||
slidesPerView={1}
|
||||
modules={[Navigation]}
|
||||
allowTouchMove={false}
|
||||
|
||||
>
|
||||
<SwiperSlide>
|
||||
<Calendar setDisplayForm={setDisplayForm}
|
||||
displayForm={displayForm}
|
||||
open={open}
|
||||
setOpen={setOpen}
|
||||
onUpdate={onUpdate}
|
||||
time={time}
|
||||
onExit={onExit}
|
||||
isMobile={isMobile}
|
||||
locale={locale}
|
||||
text={text}
|
||||
></Calendar>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<Timepicker
|
||||
text={text}
|
||||
setDisplayForm={setDisplayForm}
|
||||
displayForm={displayForm}
|
||||
open={open}
|
||||
setOpen={setOpen}
|
||||
onUpdate={onUpdate}
|
||||
time={time}
|
||||
onExit={onExit}
|
||||
isMobile={isMobile}
|
||||
></Timepicker>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<Form setDisplayForm={setDisplayForm}
|
||||
displayForm={displayForm}
|
||||
open={open}
|
||||
setOpen={setOpen}
|
||||
onUpdate={onUpdate}
|
||||
time={time}
|
||||
onExit={onExit}
|
||||
isMobile={isMobile}
|
||||
text={text}
|
||||
></Form>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<Confirm setDisplayForm={setDisplayForm}
|
||||
displayForm={displayForm}
|
||||
text={text}
|
||||
open={open}
|
||||
setOpen={setOpen}
|
||||
onUpdate={onUpdate}
|
||||
time={time}
|
||||
onExit={onExit}
|
||||
isMobile={isMobile}
|
||||
></Confirm>
|
||||
</SwiperSlide>
|
||||
</Swiper>
|
||||
<div className="main-block__subblock-container calendar__padding">
|
||||
<div className="main-block_subblock">
|
||||
{text.mainBlockSubblock}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,283 @@
|
||||
<svg width="152" height="216" viewBox="0 0 152 216" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g filter="url(#filter0_d_893_16369)">
|
||||
<path d="M79.3689 80.999C82.2169 82.643 86.8343 82.6428 89.6822 80.9986L141.464 51.1022C142.881 50.2843 143.593 49.2136 143.6 48.1417C143.6 48.1308 143.6 48.1198 143.6 48.1089C143.593 47.0369 142.881 45.9662 141.464 45.1484L80.6313 10.0327C77.7833 8.38869 73.1659 8.38887 70.3181 10.0331L18.5359 39.9295C17.0786 40.7709 16.367 41.8798 16.4013 42.9825C16.434 44.0344 17.1457 45.0806 18.5362 45.8833L79.3689 80.999Z" fill="#414141"/>
|
||||
<path d="M89.6822 80.9986L141.464 51.1022C142.881 50.2843 143.593 49.2136 143.6 48.1417V164.96C143.607 166.043 142.895 167.127 141.464 167.954L89.6822 197.85C86.8343 199.494 82.2169 199.495 79.3689 197.851L18.5362 162.735C17.1456 161.932 16.434 160.886 16.4013 159.834V42.9825C16.434 44.0344 17.1457 45.0806 18.5362 45.8833L79.3689 80.999C82.2169 82.643 86.8343 82.6428 89.6822 80.9986Z" fill="url(#paint0_linear_893_16369)"/>
|
||||
<path d="M89.6822 80.9986L141.464 51.1022C142.881 50.2843 143.593 49.2136 143.6 48.1417V164.96C143.607 166.043 142.895 167.127 141.464 167.954L89.6822 197.85C86.8343 199.494 82.2169 199.495 79.3689 197.851L18.5362 162.735C17.1456 161.932 16.434 160.886 16.4013 159.834V42.9825C16.434 44.0344 17.1457 45.0806 18.5362 45.8833L79.3689 80.999C82.2169 82.643 86.8343 82.6428 89.6822 80.9986Z" fill="url(#paint1_linear_893_16369)"/>
|
||||
<rect width="1.48855" height="8.93132" transform="matrix(-0.866007 -0.500033 3.7683e-05 1 72.7566 90.9209)" fill="#070707"/>
|
||||
<rect width="1.48855" height="8.93132" transform="matrix(-0.866007 -0.500033 3.7683e-05 1 70.1782 89.4326)" fill="#070707"/>
|
||||
<rect width="1.48855" height="8.93132" transform="matrix(-0.866007 -0.500033 3.7683e-05 1 67.6003 87.9443)" fill="#070707"/>
|
||||
<rect width="1.48855" height="8.93132" transform="matrix(-0.866007 -0.500033 3.7683e-05 1 65.022 86.4561)" fill="#070707"/>
|
||||
<rect width="1.48855" height="8.93132" transform="matrix(-0.866007 -0.500033 3.7683e-05 1 62.4438 84.9668)" fill="#070707"/>
|
||||
<rect width="1.48855" height="8.93132" transform="matrix(-0.866007 -0.500033 3.7683e-05 1 59.8655 83.4785)" fill="#070707"/>
|
||||
<rect width="1.48855" height="8.93132" transform="matrix(-0.866007 -0.500033 3.7683e-05 1 57.2876 81.9893)" fill="#070707"/>
|
||||
<rect width="1.48855" height="8.93132" transform="matrix(-0.866007 -0.500033 3.7683e-05 1 54.7097 80.502)" fill="#070707"/>
|
||||
<rect width="1.48855" height="8.93132" transform="matrix(-0.866007 -0.500033 3.7683e-05 1 52.1311 79.0137)" fill="#070707"/>
|
||||
<rect width="1.48855" height="8.93132" transform="matrix(-0.866007 -0.500033 3.7683e-05 1 49.5532 77.5244)" fill="#070707"/>
|
||||
<rect width="1.48855" height="8.93132" transform="matrix(-0.866007 -0.500033 3.7683e-05 1 46.9749 76.0361)" fill="#070707"/>
|
||||
<rect width="1.48855" height="8.93132" transform="matrix(-0.866007 -0.500033 3.7683e-05 1 44.3965 74.5469)" fill="#070707"/>
|
||||
<rect width="1.48855" height="8.93132" transform="matrix(-0.866007 -0.500033 3.7683e-05 1 41.8184 73.0576)" fill="#070707"/>
|
||||
<rect width="1.48855" height="8.93132" transform="matrix(-0.866007 -0.500033 3.7683e-05 1 39.24 71.5703)" fill="#070707"/>
|
||||
<rect width="1.48855" height="8.93132" transform="matrix(-0.866007 -0.500033 3.7683e-05 1 36.6621 70.0801)" fill="#070707"/>
|
||||
<rect width="1.48855" height="8.93132" transform="matrix(-0.866007 -0.500033 3.7683e-05 1 34.0837 68.5918)" fill="#070707"/>
|
||||
<rect width="1.48855" height="8.93132" transform="matrix(-0.866007 -0.500033 3.7683e-05 1 31.5059 67.1025)" fill="#070707"/>
|
||||
<rect width="1.48855" height="8.93132" transform="matrix(-0.866007 -0.500033 3.7683e-05 1 28.9272 65.6152)" fill="#070707"/>
|
||||
<rect width="1.48855" height="8.93132" transform="matrix(-0.866007 -0.500033 3.7683e-05 1 26.3489 64.127)" fill="#070707"/>
|
||||
<rect width="1.48855" height="8.93132" transform="matrix(-0.866007 -0.500033 3.7683e-05 1 72.7566 133.346)" fill="#070707"/>
|
||||
<rect width="1.48855" height="8.93132" transform="matrix(-0.866007 -0.500033 3.7683e-05 1 70.1782 131.857)" fill="#070707"/>
|
||||
<rect width="1.48855" height="8.93132" transform="matrix(-0.866007 -0.500033 3.7683e-05 1 67.6008 130.368)" fill="#070707"/>
|
||||
<rect width="1.48855" height="8.93132" transform="matrix(-0.866007 -0.500033 3.7683e-05 1 65.022 128.88)" fill="#070707"/>
|
||||
<rect width="1.48855" height="8.93132" transform="matrix(-0.866007 -0.500033 3.7683e-05 1 62.4438 127.391)" fill="#070707"/>
|
||||
<rect width="1.48855" height="8.93132" transform="matrix(-0.866007 -0.500033 3.7683e-05 1 59.8655 125.902)" fill="#070707"/>
|
||||
<rect width="1.48855" height="8.93132" transform="matrix(-0.866007 -0.500033 3.7683e-05 1 57.2876 124.414)" fill="#070707"/>
|
||||
<rect width="1.48855" height="8.93132" transform="matrix(-0.866007 -0.500033 3.7683e-05 1 54.7097 122.925)" fill="#070707"/>
|
||||
<rect width="1.48855" height="8.93132" transform="matrix(-0.866007 -0.500033 3.7683e-05 1 52.1311 121.437)" fill="#070707"/>
|
||||
<rect width="1.48855" height="8.93132" transform="matrix(-0.866007 -0.500033 3.7683e-05 1 49.5532 119.947)" fill="#070707"/>
|
||||
<rect width="1.48855" height="8.93132" transform="matrix(-0.866007 -0.500033 3.7683e-05 1 46.9749 118.458)" fill="#070707"/>
|
||||
<rect width="1.48855" height="8.93132" transform="matrix(-0.866007 -0.500033 3.7683e-05 1 44.397 116.971)" fill="#070707"/>
|
||||
<rect width="1.48855" height="8.93132" transform="matrix(-0.866007 -0.500033 3.7683e-05 1 41.8184 115.481)" fill="#070707"/>
|
||||
<rect width="1.48855" height="8.93132" transform="matrix(-0.866007 -0.500033 3.7683e-05 1 39.24 113.992)" fill="#070707"/>
|
||||
<rect width="1.48855" height="8.93132" transform="matrix(-0.866007 -0.500033 3.7683e-05 1 36.6621 112.504)" fill="#070707"/>
|
||||
<rect width="1.48855" height="8.93132" transform="matrix(-0.866007 -0.500033 3.7683e-05 1 34.0837 111.016)" fill="#070707"/>
|
||||
<rect width="1.48855" height="8.93132" transform="matrix(-0.866007 -0.500033 3.7683e-05 1 31.5059 109.527)" fill="#070707"/>
|
||||
<rect width="1.48855" height="8.93132" transform="matrix(-0.866007 -0.500033 3.7683e-05 1 28.9272 108.039)" fill="#070707"/>
|
||||
<rect width="1.48855" height="8.93132" transform="matrix(-0.866007 -0.500033 3.7683e-05 1 26.3489 106.549)" fill="#070707"/>
|
||||
<rect width="1.48855" height="8.93132" transform="matrix(-0.866007 -0.500033 3.7683e-05 1 72.7566 175.025)" fill="#070707"/>
|
||||
<rect width="1.48855" height="8.93132" transform="matrix(-0.866007 -0.500033 3.7683e-05 1 70.1782 173.537)" fill="#070707"/>
|
||||
<rect width="1.48855" height="8.93132" transform="matrix(-0.866007 -0.500033 3.7683e-05 1 67.6003 172.047)" fill="#070707"/>
|
||||
<rect width="1.48855" height="8.93132" transform="matrix(-0.866007 -0.500033 3.7683e-05 1 65.022 170.559)" fill="#070707"/>
|
||||
<rect width="1.48855" height="8.93132" transform="matrix(-0.866007 -0.500033 3.7683e-05 1 62.4438 169.069)" fill="#070707"/>
|
||||
<rect width="1.48855" height="8.93132" transform="matrix(-0.866007 -0.500033 3.7683e-05 1 59.8655 167.581)" fill="#070707"/>
|
||||
<rect width="1.48855" height="8.93132" transform="matrix(-0.866007 -0.500033 3.7683e-05 1 57.2876 166.093)" fill="#070707"/>
|
||||
<rect width="1.48855" height="8.93132" transform="matrix(-0.866007 -0.500033 3.7683e-05 1 54.7097 164.605)" fill="#070707"/>
|
||||
<rect width="1.48855" height="8.93132" transform="matrix(-0.866007 -0.500033 3.7683e-05 1 52.1311 163.116)" fill="#070707"/>
|
||||
<rect width="1.48855" height="8.93132" transform="matrix(-0.866007 -0.500033 3.7683e-05 1 49.5532 161.627)" fill="#070707"/>
|
||||
<rect width="1.48855" height="8.93132" transform="matrix(-0.866007 -0.500033 3.7683e-05 1 46.9749 160.138)" fill="#070707"/>
|
||||
<rect width="1.48855" height="8.93132" transform="matrix(-0.866007 -0.500033 3.7683e-05 1 44.3965 158.649)" fill="#070707"/>
|
||||
<rect width="1.48855" height="8.93132" transform="matrix(-0.866007 -0.500033 3.7683e-05 1 41.8184 157.162)" fill="#070707"/>
|
||||
<rect width="1.48855" height="8.93132" transform="matrix(-0.866007 -0.500033 3.7683e-05 1 39.24 155.672)" fill="#070707"/>
|
||||
<rect width="1.48855" height="8.93132" transform="matrix(-0.866007 -0.500033 3.7683e-05 1 36.6621 154.184)" fill="#070707"/>
|
||||
<rect width="1.48855" height="8.93132" transform="matrix(-0.866007 -0.500033 3.7683e-05 1 34.0837 152.695)" fill="#070707"/>
|
||||
<rect width="1.48855" height="8.93132" transform="matrix(-0.866007 -0.500033 3.7683e-05 1 31.5059 151.206)" fill="#070707"/>
|
||||
<rect width="1.48855" height="8.93132" transform="matrix(-0.866007 -0.500033 3.7683e-05 1 28.9272 149.718)" fill="#070707"/>
|
||||
<rect width="1.48855" height="8.93132" transform="matrix(-0.866007 -0.500033 3.7683e-05 1 26.3489 148.229)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 129.885 44.4033)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 128.596 45.1484)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 127.308 45.8916)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 126.018 46.6367)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 124.729 47.3809)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 123.44 48.125)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 122.151 48.8701)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 120.861 49.6143)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 119.572 50.3574)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 118.283 51.1025)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 116.994 51.8467)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 115.705 52.5908)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 114.416 53.335)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 113.126 54.0781)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 111.837 54.8223)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 110.549 55.5674)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 109.259 56.3125)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 107.97 57.0547)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 106.681 57.8008)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 105.392 58.5439)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 104.102 59.2891)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 102.813 60.0322)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 101.524 60.7764)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 100.235 61.5215)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 98.9458 62.2646)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 97.657 63.0098)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 96.3674 63.7539)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 95.0784 64.4971)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 93.7891 65.2422)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 92.5 65.9863)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 91.2107 66.7305)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 89.9216 67.4756)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 88.6326 68.2188)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 87.3433 68.9629)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 86.0537 69.708)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 84.7651 70.4521)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 83.4763 71.1953)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 82.1868 71.9404)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 80.8979 72.6846)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 74.0649 13.8877)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 72.7754 14.6328)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 71.4866 15.377)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 70.197 16.1221)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 68.9082 16.8652)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 67.6187 17.6104)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 66.3296 18.3525)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 65.0408 19.0986)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 63.7512 19.8438)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 62.4624 20.5859)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 61.1733 21.332)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 59.8838 22.0752)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 58.595 22.8193)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 57.3054 23.5645)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 56.0166 24.3086)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 54.7271 25.0518)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 53.438 25.7959)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 52.1487 26.54)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 50.8596 27.2852)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 49.5706 28.0293)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 48.2817 28.7734)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 46.9922 29.5166)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 45.7034 30.2617)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 44.4143 31.0068)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 43.1248 31.751)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 41.8359 32.4951)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 40.5469 33.2383)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 39.2576 33.9834)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 37.9685 34.7266)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 36.6794 35.4717)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 35.3901 36.2139)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 34.1011 36.96)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 32.8118 37.7041)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 31.5222 38.4482)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 30.2332 39.1924)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 28.9443 39.9365)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 27.6553 40.6807)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 26.3657 41.4258)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 25.0769 42.1689)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 81.5076 18.3525)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 80.218 19.0986)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 78.929 19.8438)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 77.6401 20.5859)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 76.3506 21.332)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 75.0618 22.0752)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 73.7722 22.8193)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 72.4832 23.5645)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 71.1943 24.3086)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 69.9048 25.0518)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 68.6155 25.7959)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 67.3269 26.542)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 66.0374 27.2852)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 64.7485 28.0293)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 63.4595 28.7734)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 62.1707 29.5166)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 60.8811 30.2617)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 59.592 31.0068)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 58.3027 31.751)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 57.0137 32.4951)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 55.7241 33.2383)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 54.4353 33.9834)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 53.1458 34.7266)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 51.8569 35.4717)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 50.5679 36.2158)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 49.2788 36.96)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 47.9895 37.7041)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 46.7 38.4482)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 45.4111 39.1934)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 44.1216 39.9365)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 42.833 40.6807)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 41.5437 41.4258)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 40.2546 42.1689)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 38.9658 42.9131)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 37.6763 43.6572)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 36.3867 44.4023)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 35.0979 45.1475)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 33.8088 45.8906)" fill="#070707"/>
|
||||
<rect width="0.744277" height="5.95422" transform="matrix(-0.866044 0.499967 0.866044 0.499967 32.5193 46.6348)" fill="#070707"/>
|
||||
<rect width="54.1928" height="103.462" rx="5" transform="matrix(0.866007 -0.500033 -3.7683e-05 1 91.5029 86.4004)" fill="#0F0F0F"/>
|
||||
<rect width="44.0812" height="94.1752" rx="5" transform="matrix(0.866007 -0.500033 -3.7683e-05 1 93.5605 88.1855)" fill="#222222"/>
|
||||
<rect width="38.1937" height="8.70973" rx="1" transform="matrix(0.866007 -0.500033 -3.7683e-05 1 95.5833 91.3135)" fill="#00020F"/>
|
||||
<rect width="7.68335" height="1.38428" rx="0.692141" transform="matrix(-0.866007 0.500033 -3.7683e-05 1 103.912 88.9746)" fill="#798FFF"/>
|
||||
<rect width="7.68335" height="1.38428" rx="0.692141" transform="matrix(-0.866007 0.500033 -3.7683e-05 1 112.013 84.2725)" fill="#D375FF"/>
|
||||
<rect width="7.68335" height="1.38428" rx="0.692141" transform="matrix(-0.866007 0.500033 -3.7683e-05 1 120.113 79.5713)" fill="#798FFF"/>
|
||||
<rect width="1.69796" height="1.38428" rx="0.692141" transform="matrix(-0.866007 0.500033 -3.7683e-05 1 126.983 75.582)" fill="#533AF2"/>
|
||||
<rect width="1.69796" height="3.77572" rx="0.848982" transform="matrix(-0.866007 0.500033 -3.7683e-05 1 124.561 76.9668)" fill="#798FFF"/>
|
||||
<rect width="1.69796" height="1.38428" rx="0.692141" transform="matrix(-0.866007 0.500033 -3.7683e-05 1 126.983 77.8135)" fill="#C653FF"/>
|
||||
<rect width="7.68335" height="1.38428" rx="0.692141" transform="matrix(-0.866007 0.500033 -3.7683e-05 1 103.912 91.4326)" fill="#798FFF"/>
|
||||
<rect width="7.68335" height="1.38428" rx="0.692141" transform="matrix(-0.866007 0.500033 -3.7683e-05 1 112.013 86.7324)" fill="#C653FF"/>
|
||||
<rect width="7.68335" height="1.38428" rx="0.692141" transform="matrix(-0.866007 0.500033 -3.7683e-05 1 120.113 82.0293)" fill="#D375FF"/>
|
||||
<rect width="38.1937" height="8.70973" rx="1" transform="matrix(0.866007 -0.500033 -3.7683e-05 1 95.5833 102.347)" fill="#00020F"/>
|
||||
<rect width="7.68335" height="1.38428" rx="0.692141" transform="matrix(-0.866007 0.500033 -3.7683e-05 1 103.912 100.007)" fill="#798FFF"/>
|
||||
<rect width="7.68335" height="1.38428" rx="0.692141" transform="matrix(-0.866007 0.500033 -3.7683e-05 1 112.013 95.3066)" fill="#798FFF"/>
|
||||
<rect width="7.68335" height="1.38428" rx="0.692141" transform="matrix(-0.866007 0.500033 -3.7683e-05 1 120.112 90.6045)" fill="#D375FF"/>
|
||||
<rect width="1.69796" height="1.38428" rx="0.692141" transform="matrix(-0.866007 0.500033 -3.7683e-05 1 126.983 86.6152)" fill="#533AF2"/>
|
||||
<rect width="1.69796" height="3.77572" rx="0.848982" transform="matrix(-0.866007 0.500033 -3.7683e-05 1 124.561 87.999)" fill="#798FFF"/>
|
||||
<rect width="1.69796" height="1.38428" rx="0.692141" transform="matrix(-0.866007 0.500033 -3.7683e-05 1 126.983 88.8467)" fill="#C653FF"/>
|
||||
<rect width="7.68335" height="1.38428" rx="0.692141" transform="matrix(-0.866007 0.500033 -3.7683e-05 1 103.912 102.466)" fill="#D375FF"/>
|
||||
<rect width="7.68335" height="1.38428" rx="0.692141" transform="matrix(-0.866007 0.500033 -3.7683e-05 1 112.013 97.7656)" fill="#798FFF"/>
|
||||
<rect width="7.68335" height="1.38428" rx="0.692141" transform="matrix(-0.866007 0.500033 -3.7683e-05 1 120.112 93.0635)" fill="#C653FF"/>
|
||||
<rect width="38.1937" height="8.70973" rx="1" transform="matrix(0.866007 -0.500033 -3.7683e-05 1 95.5833 113.383)" fill="#00020F"/>
|
||||
<rect width="7.68335" height="1.38428" rx="0.692141" transform="matrix(-0.866007 0.500033 -3.7683e-05 1 103.912 111.043)" fill="#798FFF"/>
|
||||
<rect width="7.68335" height="1.38428" rx="0.692141" transform="matrix(-0.866007 0.500033 -3.7683e-05 1 112.013 106.342)" fill="#798FFF"/>
|
||||
<rect width="7.68335" height="1.38428" rx="0.692141" transform="matrix(-0.866007 0.500033 -3.7683e-05 1 120.112 101.641)" fill="#D375FF"/>
|
||||
<rect width="1.69796" height="1.38428" rx="0.692141" transform="matrix(-0.866007 0.500033 -3.7683e-05 1 126.983 97.6514)" fill="#533AF2"/>
|
||||
<rect width="1.69796" height="3.77572" rx="0.848982" transform="matrix(-0.866007 0.500033 -3.7683e-05 1 124.561 99.0352)" fill="#798FFF"/>
|
||||
<rect width="1.69796" height="1.38428" rx="0.692141" transform="matrix(-0.866007 0.500033 -3.7683e-05 1 126.983 99.8828)" fill="#C653FF"/>
|
||||
<rect width="7.68335" height="1.38428" rx="0.692141" transform="matrix(-0.866007 0.500033 -3.7683e-05 1 103.912 113.502)" fill="#C653FF"/>
|
||||
<rect width="7.68335" height="1.38428" rx="0.692141" transform="matrix(-0.866007 0.500033 -3.7683e-05 1 112.013 108.802)" fill="#798FFF"/>
|
||||
<rect width="7.68335" height="1.38428" rx="0.692141" transform="matrix(-0.866007 0.500033 -3.7683e-05 1 120.112 104.1)" fill="#798FFF"/>
|
||||
<rect width="38.1937" height="8.70973" rx="1" transform="matrix(0.866007 -0.500033 -3.7683e-05 1 95.5828 124.418)" fill="#00020F"/>
|
||||
<rect width="7.68335" height="1.38428" rx="0.692141" transform="matrix(-0.866007 0.500033 -3.7683e-05 1 103.912 122.078)" fill="#798FFF"/>
|
||||
<rect width="7.68335" height="1.38428" rx="0.692141" transform="matrix(-0.866007 0.500033 -3.7683e-05 1 112.013 117.377)" fill="#C653FF"/>
|
||||
<rect width="7.68335" height="1.38428" rx="0.692141" transform="matrix(-0.866007 0.500033 -3.7683e-05 1 120.112 112.676)" fill="#798FFF"/>
|
||||
<rect width="1.69796" height="1.38428" rx="0.692141" transform="matrix(-0.866007 0.500033 -3.7683e-05 1 126.983 108.687)" fill="#533AF2"/>
|
||||
<rect width="1.69796" height="3.77572" rx="0.848982" transform="matrix(-0.866007 0.500033 -3.7683e-05 1 124.56 110.07)" fill="#798FFF"/>
|
||||
<rect width="1.69796" height="1.38428" rx="0.692141" transform="matrix(-0.866007 0.500033 -3.7683e-05 1 126.983 110.918)" fill="#C653FF"/>
|
||||
<rect width="7.68335" height="1.38428" rx="0.692141" transform="matrix(-0.866007 0.500033 -3.7683e-05 1 103.912 124.537)" fill="#D375FF"/>
|
||||
<rect width="7.68335" height="1.38428" rx="0.692141" transform="matrix(-0.866007 0.500033 -3.7683e-05 1 112.013 119.836)" fill="#798FFF"/>
|
||||
<rect width="7.68335" height="1.38428" rx="0.692141" transform="matrix(-0.866007 0.500033 -3.7683e-05 1 120.112 115.135)" fill="#798FFF"/>
|
||||
<rect width="38.1937" height="8.70973" rx="1" transform="matrix(0.866007 -0.500033 -3.7683e-05 1 95.5833 135.453)" fill="#00020F"/>
|
||||
<rect width="7.68335" height="1.38428" rx="0.692141" transform="matrix(-0.866007 0.500033 -3.7683e-05 1 103.912 133.113)" fill="#798FFF"/>
|
||||
<rect width="7.68335" height="1.38428" rx="0.692141" transform="matrix(-0.866007 0.500033 -3.7683e-05 1 112.013 128.412)" fill="#798FFF"/>
|
||||
<rect width="7.68335" height="1.38428" rx="0.692141" transform="matrix(-0.866007 0.500033 -3.7683e-05 1 120.113 123.711)" fill="#798FFF"/>
|
||||
<rect width="1.69796" height="1.38428" rx="0.692141" transform="matrix(-0.866007 0.500033 -3.7683e-05 1 126.983 119.722)" fill="#533AF2"/>
|
||||
<rect width="1.69796" height="3.77572" rx="0.848982" transform="matrix(-0.866007 0.500033 -3.7683e-05 1 124.561 121.105)" fill="#798FFF"/>
|
||||
<rect width="1.69796" height="1.38428" rx="0.692141" transform="matrix(-0.866007 0.500033 -3.7683e-05 1 126.983 121.953)" fill="#C653FF"/>
|
||||
<rect width="7.68335" height="1.38428" rx="0.692141" transform="matrix(-0.866007 0.500033 -3.7683e-05 1 103.912 135.572)" fill="#798FFF"/>
|
||||
<rect width="7.68335" height="1.38428" rx="0.692141" transform="matrix(-0.866007 0.500033 -3.7683e-05 1 112.013 130.872)" fill="#C653FF"/>
|
||||
<rect width="7.68335" height="1.38428" rx="0.692141" transform="matrix(-0.866007 0.500033 -3.7683e-05 1 120.113 126.169)" fill="#798FFF"/>
|
||||
<rect width="38.1937" height="8.70973" rx="1" transform="matrix(0.866007 -0.500033 -3.7683e-05 1 95.5833 146.487)" fill="#00020F"/>
|
||||
<rect width="7.68335" height="1.38428" rx="0.692141" transform="matrix(-0.866007 0.500033 -3.7683e-05 1 103.912 144.147)" fill="#798FFF"/>
|
||||
<rect width="7.68335" height="1.38428" rx="0.692141" transform="matrix(-0.866007 0.500033 -3.7683e-05 1 112.013 139.447)" fill="#798FFF"/>
|
||||
<rect width="7.68335" height="1.38428" rx="0.692141" transform="matrix(-0.866007 0.500033 -3.7683e-05 1 120.113 134.745)" fill="#C653FF"/>
|
||||
<rect width="1.69796" height="1.38428" rx="0.692141" transform="matrix(-0.866007 0.500033 -3.7683e-05 1 126.983 130.755)" fill="#533AF2"/>
|
||||
<rect width="1.69796" height="3.77572" rx="0.848982" transform="matrix(-0.866007 0.500033 -3.7683e-05 1 124.561 132.14)" fill="#798FFF"/>
|
||||
<rect width="1.69796" height="1.38428" rx="0.692141" transform="matrix(-0.866007 0.500033 -3.7683e-05 1 126.983 132.988)" fill="#C653FF"/>
|
||||
<rect width="7.68335" height="1.38428" rx="0.692141" transform="matrix(-0.866007 0.500033 -3.7683e-05 1 103.912 146.606)" fill="#798FFF"/>
|
||||
<rect width="7.68335" height="1.38428" rx="0.692141" transform="matrix(-0.866007 0.500033 -3.7683e-05 1 112.013 141.907)" fill="#D375FF"/>
|
||||
<rect width="7.68335" height="1.38428" rx="0.692141" transform="matrix(-0.866007 0.500033 -3.7683e-05 1 120.113 137.204)" fill="#798FFF"/>
|
||||
<rect width="38.1937" height="8.70973" rx="1" transform="matrix(0.866007 -0.500033 -3.7683e-05 1 95.5828 157.522)" fill="#00020F"/>
|
||||
<rect width="7.68335" height="1.38428" rx="0.692141" transform="matrix(-0.866007 0.500033 -3.7683e-05 1 103.912 155.183)" fill="#798FFF"/>
|
||||
<rect width="7.68335" height="1.38428" rx="0.692141" transform="matrix(-0.866007 0.500033 -3.7683e-05 1 112.013 150.481)" fill="#798FFF"/>
|
||||
<rect width="7.68335" height="1.38428" rx="0.692141" transform="matrix(-0.866007 0.500033 -3.7683e-05 1 120.112 145.78)" fill="#798FFF"/>
|
||||
<rect width="1.69796" height="1.38428" rx="0.692141" transform="matrix(-0.866007 0.500033 -3.7683e-05 1 126.983 141.79)" fill="#533AF2"/>
|
||||
<rect width="1.69796" height="3.77572" rx="0.848982" transform="matrix(-0.866007 0.500033 -3.7683e-05 1 124.56 143.175)" fill="#798FFF"/>
|
||||
<rect width="1.69796" height="1.38428" rx="0.692141" transform="matrix(-0.866007 0.500033 -3.7683e-05 1 126.983 144.023)" fill="#C653FF"/>
|
||||
<rect width="7.68335" height="1.38428" rx="0.692141" transform="matrix(-0.866007 0.500033 -3.7683e-05 1 103.912 157.642)" fill="#C653FF"/>
|
||||
<rect width="7.68335" height="1.38428" rx="0.692141" transform="matrix(-0.866007 0.500033 -3.7683e-05 1 112.013 152.941)" fill="#798FFF"/>
|
||||
<rect width="7.68335" height="1.38428" rx="0.692141" transform="matrix(-0.866007 0.500033 -3.7683e-05 1 120.112 148.239)" fill="#798FFF"/>
|
||||
<rect width="38.1937" height="8.70973" rx="1" transform="matrix(0.866007 -0.500033 -3.7683e-05 1 95.5828 168.56)" fill="#00020F"/>
|
||||
<rect width="7.68335" height="1.38428" rx="0.692141" transform="matrix(-0.866007 0.500033 -3.7683e-05 1 103.912 166.221)" fill="#798FFF"/>
|
||||
<rect width="7.68335" height="1.38428" rx="0.692141" transform="matrix(-0.866007 0.500033 -3.7683e-05 1 112.012 161.519)" fill="#798FFF"/>
|
||||
<rect width="7.68335" height="1.38428" rx="0.692141" transform="matrix(-0.866007 0.500033 -3.7683e-05 1 120.112 156.817)" fill="#C653FF"/>
|
||||
<rect width="1.69796" height="1.38428" rx="0.692141" transform="matrix(-0.866007 0.500033 -3.7683e-05 1 126.983 152.828)" fill="#533AF2"/>
|
||||
<rect width="1.69796" height="3.77572" rx="0.848982" transform="matrix(-0.866007 0.500033 -3.7683e-05 1 124.56 154.213)" fill="#798FFF"/>
|
||||
<rect width="1.69796" height="1.38428" rx="0.692141" transform="matrix(-0.866007 0.500033 -3.7683e-05 1 126.983 155.061)" fill="#C653FF"/>
|
||||
<rect width="7.68335" height="1.38428" rx="0.692141" transform="matrix(-0.866007 0.500033 -3.7683e-05 1 103.912 168.68)" fill="#C653FF"/>
|
||||
<rect width="7.68335" height="1.38428" rx="0.692141" transform="matrix(-0.866007 0.500033 -3.7683e-05 1 112.012 163.979)" fill="#798FFF"/>
|
||||
<rect width="7.68335" height="1.38428" rx="0.692141" transform="matrix(-0.866007 0.500033 -3.7683e-05 1 120.112 159.276)" fill="#798FFF"/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_d_893_16369" x="0.400146" y="0.799805" width="151.2" height="214.283" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dx="-4" dy="4"/>
|
||||
<feGaussianBlur stdDeviation="6"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_893_16369"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_893_16369" result="shape"/>
|
||||
</filter>
|
||||
<linearGradient id="paint0_linear_893_16369" x1="16.4001" y1="120.408" x2="143.629" y2="117.339" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.192708" stop-color="#141414"/>
|
||||
<stop offset="1" stop-color="#141414" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_893_16369" x1="155.493" y1="123.458" x2="67.0193" y2="146.365" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.385417" stop-color="#333333"/>
|
||||
<stop offset="1" stop-color="#383838" stop-opacity="0.4"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 35 KiB |
@@ -0,0 +1,119 @@
|
||||
.cloud__container {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.block__container {
|
||||
background: #141414;
|
||||
border-radius: 32px;
|
||||
padding: 74px 80px;
|
||||
box-sizing: border-box;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 2fr;
|
||||
margin-bottom: 160px;
|
||||
}
|
||||
|
||||
.caption__block {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.image__container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
.width {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1600px) {
|
||||
.image {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.block__container {
|
||||
padding: 96px 84px;
|
||||
justify-content: normal;
|
||||
margin-bottom: 192px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.cloud__caption {
|
||||
margin: 0;
|
||||
width: 624px;
|
||||
}
|
||||
|
||||
|
||||
.caption__block {
|
||||
justify-content: normal;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.image__container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 50%;
|
||||
}
|
||||
.block__container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
padding: 80px 20px 80px;
|
||||
box-sizing: border-box;
|
||||
height: auto;
|
||||
gap: 40px;
|
||||
margin-bottom: 80px;
|
||||
width: 100%;
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
@media screen and (max-width: 639px) {
|
||||
.block__container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
padding: 60px 10px 80px;
|
||||
box-sizing: border-box;
|
||||
height: auto;
|
||||
gap: 40px;
|
||||
margin-bottom: 80px;
|
||||
|
||||
}
|
||||
|
||||
.caption__block {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.width {
|
||||
font-size: 9vw;
|
||||
}
|
||||
|
||||
|
||||
.cloud__container {
|
||||
padding: 0px 10px 0px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
import './cloudSolution.css'
|
||||
import server from './Server.svg'
|
||||
import "../../styles/styles.css";
|
||||
import serverFrame from './serverFrame.png'
|
||||
import { TText } from '../main/main';
|
||||
|
||||
|
||||
export const CloudSolution: React.FC<any> = ({ text }) => {
|
||||
return (
|
||||
<div data-aos="zoom-in" data-aos-duration="500" className="cloud__container">
|
||||
<div className='block__container'>
|
||||
<div className='image__container'>
|
||||
<img className='image' src={serverFrame}></img>
|
||||
</div>
|
||||
<div data-aos="fade-up"
|
||||
data-aos-delay="400" className="main-block__container caption__block">
|
||||
<div>
|
||||
<p className="main-block__title_small width cloud__title">
|
||||
Graff.estate stream –
|
||||
</p>
|
||||
<p className=" main-block__title_gardient_small width cloud__title">
|
||||
{text.mainBlockCaptionColor}
|
||||
</p>
|
||||
</div>
|
||||
<p className="main-block__caption cloud__caption">
|
||||
{text.mainBlockCaption}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 96 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
@@ -0,0 +1,35 @@
|
||||
import '../form/form.css'
|
||||
import { TProps } from "../calendarDesktop/calendarDesktop";
|
||||
import { useSwiper } from 'swiper/react';
|
||||
|
||||
|
||||
|
||||
|
||||
export const Confirm: React.FC<TProps> = ({ open, onExit, setOpen, isMobile, text }) => {
|
||||
const swiper = useSwiper();
|
||||
|
||||
function exit() {
|
||||
if (isMobile) {
|
||||
swiper.slideNext()
|
||||
onExit()
|
||||
} else {
|
||||
onExit()
|
||||
}
|
||||
}
|
||||
|
||||
return (<div className={open.confirm ? "confirm" : "confirm__none"}>
|
||||
<div className="confirm__container">
|
||||
<h2 className="confirm__title">
|
||||
{text.confirm.title}
|
||||
</h2>
|
||||
<p className="confirm__caption">
|
||||
{text.confirm.caption}
|
||||
</p>
|
||||
</div>
|
||||
<button onClick={exit} className="button__submit">
|
||||
{text.buttons.next}
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 213 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 182 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 166 KiB |
@@ -0,0 +1,69 @@
|
||||
import "../../styles/styles.css";
|
||||
import "./demonstration.css"
|
||||
import building from './building.png'
|
||||
import building1 from './building1.png'
|
||||
import building2 from './building2.png'
|
||||
|
||||
import iconButton from "./iconButton.svg"
|
||||
|
||||
|
||||
export const Demostration: React.FC = ({ }) => {
|
||||
return (
|
||||
<div className="block">
|
||||
<div className='demos_container'>
|
||||
<div className="main-block__icon_container demo__icon">
|
||||
<img src={iconButton} className="main-block__icon"></img>
|
||||
</div>
|
||||
<div className='demo'>
|
||||
<img src={building} className='demo_image'></img>
|
||||
<div className='demo_info'>
|
||||
<div className='title__block'>
|
||||
<h4 className='title__demo'>ЖК «Тактика»</h4>
|
||||
<p className='caption'>Россия, Екатеринбург.</p>
|
||||
</div>
|
||||
<div className='body__block'>
|
||||
<p className='caption1'>Жилой квартал класса комфорт плюс на ВИЗе, в квадрате улиц Татищева-Венгерских Коммунаров-Викулова.</p>
|
||||
<p className='caption2'>Рядом Верх-Исетский пруд, по Татищева за 10 минут можно добраться до центра.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='demos_container'>
|
||||
<div className="main-block__icon_container demo__icon">
|
||||
<img src={iconButton} className="main-block__icon"></img>
|
||||
</div>
|
||||
<div className='demo'>
|
||||
<img src={building1} className='demo_image'></img>
|
||||
<div className='demo_info'>
|
||||
<div className='title__block'>
|
||||
<h4 className='title__demo'>ЖК «Тактика»</h4>
|
||||
<p className='caption'>Россия, Екатеринбург.</p>
|
||||
</div>
|
||||
<div className='body__block'>
|
||||
<p className='caption1'>Жилой квартал класса комфорт плюс на ВИЗе, в квадрате улиц Татищева-Венгерских Коммунаров-Викулова.</p>
|
||||
<p className='caption2'>Рядом Верх-Исетский пруд, по Татищева за 10 минут можно добраться до центра.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='demos_container'>
|
||||
<div className="main-block__icon_container demo__icon">
|
||||
<img src={iconButton} className="main-block__icon"></img>
|
||||
</div>
|
||||
<div className='demo'>
|
||||
<img src={building2} className='demo_image'></img>
|
||||
<div className='demo_info'>
|
||||
<div className='title__block'>
|
||||
<h4 className='title__demo'>ЖК «Тактика»</h4>
|
||||
<p className='caption'>Россия, Екатеринбург.</p>
|
||||
</div>
|
||||
<div className='body__block'>
|
||||
<p className='caption1'>Жилой квартал класса комфорт плюс на ВИЗе, в квадрате улиц Татищева-Венгерских Коммунаров-Викулова.</p>
|
||||
<p className='caption2'>Рядом Верх-Исетский пруд, по Татищева за 10 минут можно добраться до центра.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,148 @@
|
||||
.demonstration__title {
|
||||
margin: 0 0 44px 0;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 40px;
|
||||
line-height: 100%;
|
||||
/* or 40px */
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.demos-card__container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 24px;
|
||||
|
||||
}
|
||||
|
||||
.demo__icon {
|
||||
right: 36px;
|
||||
top: 36px;
|
||||
|
||||
}
|
||||
|
||||
.demo-card__header {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.demos-card {
|
||||
background: #1E1E1E;
|
||||
border-radius: 24px;
|
||||
width: 384px;
|
||||
}
|
||||
|
||||
.block {
|
||||
margin-top: 80px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.demo-card__image {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
border-radius: 24px;
|
||||
|
||||
}
|
||||
|
||||
.demo-card__info {
|
||||
padding: 32px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.demo-card__icon {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
.demo-card__title {
|
||||
font-weight: 400;
|
||||
font-size: 22px;
|
||||
line-height: 130%;
|
||||
color: #EBEBEB;
|
||||
margin: 0 0 5px 0;
|
||||
}
|
||||
|
||||
.demo-card__subtitle {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 130%;
|
||||
/* or 18px */
|
||||
|
||||
|
||||
/* Landing/White */
|
||||
|
||||
color: #EBEBEB;
|
||||
|
||||
opacity: 0.5;
|
||||
|
||||
}
|
||||
|
||||
.demo-card__text {
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 130%;
|
||||
/* or 21px */
|
||||
|
||||
|
||||
/* Landing/White */
|
||||
margin: 0 0 10px 0;
|
||||
color: #EBEBEB;
|
||||
}
|
||||
|
||||
.demo-card__subtext {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 130%;
|
||||
/* or 18px */
|
||||
/* Landing/White */
|
||||
color: #EBEBEB;
|
||||
opacity: 0.5;
|
||||
|
||||
}
|
||||
|
||||
.demos-card {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
.demos-card:hover>div>div>div>img {
|
||||
transition: opacity ease-out 0.2s;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.block {
|
||||
padding: 0 20px 80px;
|
||||
}
|
||||
|
||||
.demos-card__container {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.demos-card {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.demo-card__image {
|
||||
width: 200px;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 639px) {
|
||||
.demo__icon {
|
||||
right: 19px;
|
||||
top: 186px;
|
||||
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5.35356 9.35355C5.1583 9.54881 4.84171 9.54882 4.64645 9.35356C4.45119 9.1583 4.45118 8.84171 4.64644 8.64645L5.35356 9.35355ZM9 4.99993L9.35355 4.64637C9.44732 4.74014 9.5 4.86731 9.5 4.99992C9.5 5.13253 9.44732 5.25971 9.35356 5.35348L9 4.99993ZM4.64645 1.35356C4.45119 1.1583 4.45118 0.841714 4.64644 0.64645C4.8417 0.451186 5.15829 0.451183 5.35355 0.646443L4.64645 1.35356ZM1 5.49993C0.723858 5.49993 0.5 5.27607 0.5 4.99993C0.5 4.72378 0.723858 4.49993 1 4.49993V5.49993ZM4.64644 8.64645L8.64644 4.64638L9.35356 5.35348L5.35356 9.35355L4.64644 8.64645ZM8.64645 5.35348L4.64645 1.35356L5.35355 0.646443L9.35355 4.64637L8.64645 5.35348ZM9 5.49993H1V4.49993H9V5.49993Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 801 B |
Binary file not shown.
|
After Width: | Height: | Size: 602 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 792 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 666 KiB |
@@ -0,0 +1,315 @@
|
||||
.demo__container_mobile {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.demos_container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
border-radius: 16px;
|
||||
position: relative;
|
||||
width: 84%;
|
||||
}
|
||||
|
||||
.demos__tittle {
|
||||
width: 484px;
|
||||
margin: auto auto 60px auto;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 40px;
|
||||
line-height: 100%;
|
||||
/* or 40px */
|
||||
|
||||
|
||||
color: #FFFFFF;
|
||||
|
||||
}
|
||||
|
||||
.demos_container {
|
||||
background: #141414;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.demo {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
.demo_image {
|
||||
background: linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3));
|
||||
border-radius: 16px;
|
||||
|
||||
width: 200px;
|
||||
height: 255px;
|
||||
}
|
||||
|
||||
.demo_info {
|
||||
box-sizing: border-box;
|
||||
padding-top: 45px;
|
||||
padding-bottom: 45px;
|
||||
padding-right: 40px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.title__demo {
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 24px;
|
||||
line-height: 100%;
|
||||
/* identical to box height, or 24px */
|
||||
|
||||
|
||||
/* Landing/White */
|
||||
|
||||
color: #EBEBEB;
|
||||
}
|
||||
|
||||
.caption {
|
||||
margin: 0;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
line-height: 120%;
|
||||
/* identical to box height, or 17px */
|
||||
|
||||
|
||||
/* Landing/White */
|
||||
|
||||
color: #EBEBEB;
|
||||
|
||||
opacity: 0.5;
|
||||
|
||||
}
|
||||
|
||||
.caption1 {
|
||||
margin: 0 0 10px 0;
|
||||
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 140%;
|
||||
/* or 25px */
|
||||
|
||||
|
||||
/* Landing/White */
|
||||
|
||||
color: #EBEBEB;
|
||||
}
|
||||
|
||||
.caption2 {
|
||||
margin: 0;
|
||||
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 140%;
|
||||
/* or 20px */
|
||||
|
||||
|
||||
/* Landing/White */
|
||||
|
||||
color: #EBEBEB;
|
||||
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.width {
|
||||
align-items: flex-end
|
||||
}
|
||||
|
||||
.title__block {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.title__demo {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.demo__icon {
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
right: 36px;
|
||||
top: 36px;
|
||||
}
|
||||
|
||||
.demos_container:hover>div>img {
|
||||
transition: opacity ease-out 0.2s;
|
||||
opacity: 1;
|
||||
|
||||
}
|
||||
|
||||
.demos__list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1600px) {
|
||||
.demos__tittle {
|
||||
font-size: 48px;
|
||||
width: 580px;
|
||||
margin: auto auto 72px auto;
|
||||
|
||||
}
|
||||
|
||||
.demo {
|
||||
gap: 24px;
|
||||
height: 306px;
|
||||
}
|
||||
|
||||
.demos_container {
|
||||
width: 70%;
|
||||
|
||||
}
|
||||
|
||||
.demo__icon {
|
||||
top: 43px;
|
||||
right: 43px;
|
||||
width: 19px;
|
||||
height: 19px;
|
||||
|
||||
}
|
||||
|
||||
.title__demo {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.caption {
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.caption1 {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.caption2 {
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.demo_image {
|
||||
height: auto;
|
||||
object-fit: cover;
|
||||
width: 240px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.demo__container {
|
||||
box-sizing: border-box;
|
||||
padding: 120px 12px 80px;
|
||||
|
||||
}
|
||||
|
||||
.title__demo {
|
||||
font-size: 3.7vw;
|
||||
}
|
||||
|
||||
.caption1 {
|
||||
font-size: 2.8vw;
|
||||
}
|
||||
|
||||
.caption2 {
|
||||
font-size: 2.1vw;
|
||||
}
|
||||
|
||||
.demo {
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.demos__list {
|
||||
padding: 120px 20px 80px;
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.width {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.demos_container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.demo_image {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.demo_info {
|
||||
box-sizing: border-box;
|
||||
grid-template-rows: auto 1fr;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 639px) {
|
||||
.demos__tittle {
|
||||
width: 100%;
|
||||
font-size: 28px;
|
||||
margin: auto auto 60px auto;
|
||||
|
||||
}
|
||||
|
||||
.demo__container_mobile {
|
||||
box-sizing: border-box;
|
||||
padding: 0px 10px 80px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.demo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.demo_info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.demo_image {
|
||||
object-fit: cover;
|
||||
|
||||
width: 100%;
|
||||
height: 169px;
|
||||
}
|
||||
|
||||
.caption1 {
|
||||
font-weight: 400;
|
||||
font-size: 4.5vw;
|
||||
line-height: 140%;
|
||||
|
||||
}
|
||||
|
||||
.caption2 {
|
||||
font-weight: 400;
|
||||
font-size: 3.6vw;
|
||||
line-height: 140%;
|
||||
|
||||
}
|
||||
|
||||
.title__demo {
|
||||
font-weight: 500;
|
||||
font-size: 6vw;
|
||||
line-height: 100%;
|
||||
}
|
||||
|
||||
.caption {
|
||||
font-weight: 600;
|
||||
font-size: 3.6vw;
|
||||
line-height: 120%;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,79 @@
|
||||
import './demos.css'
|
||||
import "../../styles/styles.css";
|
||||
import building from './building.png'
|
||||
import building1 from './building1.png'
|
||||
import building2 from './building2.png'
|
||||
import iconButton from "./iconButton.svg"
|
||||
|
||||
|
||||
export const Demos: React.FC<any> = ({ text }) => {
|
||||
const { card } = text;
|
||||
const { card1 } = text;
|
||||
const { card2 } = text;
|
||||
|
||||
return (<div className=" demo__container_mobile main-block__container width demo__container">
|
||||
<h3 className='demos__tittle'>
|
||||
{text.title}
|
||||
</h3>
|
||||
<div data-aos="fade-up"
|
||||
data-aos-delay="100" className='demos_container'>
|
||||
<div className="main-block__icon_container demo__icon">
|
||||
<img src={iconButton} className="main-block__icon"></img>
|
||||
</div>
|
||||
<div className='demo'>
|
||||
<img src={building1} className='demo_image'></img>
|
||||
<div className='demo_info'>
|
||||
<div className='title__block'>
|
||||
<h4 className='title__demo'>{card.title}</h4>
|
||||
<p className='caption'>{card.subTitle}</p>
|
||||
</div>
|
||||
<div className='body__block'>
|
||||
<p className='caption1'>{card.caption}</p>
|
||||
<p className='caption2'>{card.caption1}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div data-aos="fade-up"
|
||||
data-aos-delay="300" className='demos_container'>
|
||||
<div className="main-block__icon_container demo__icon">
|
||||
<img src={iconButton} className="main-block__icon"></img>
|
||||
</div>
|
||||
<div className='demo'>
|
||||
<img src={building2} className='demo_image'></img>
|
||||
<div className='demo_info'>
|
||||
<div className='title__block'>
|
||||
<h4 className='title__demo'>{card1.title}</h4>
|
||||
<p className='caption'>{card1.subTitle}</p>
|
||||
</div>
|
||||
<div className='body__block'>
|
||||
<p className='caption1'>{card1.caption}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div data-aos="fade-up"
|
||||
data-aos-delay="500" className='demos_container'>
|
||||
<div className="main-block__icon_container demo__icon">
|
||||
<img src={iconButton} className="main-block__icon"></img>
|
||||
</div>
|
||||
<div className='demo'>
|
||||
<img src={building} className='demo_image'></img>
|
||||
<div className='demo_info'>
|
||||
<div className='title__block'>
|
||||
<h4 className='title__demo'>{card2.title}</h4>
|
||||
<p className='caption'>{card2.subTitle}</p>
|
||||
</div>
|
||||
<div className='body__block'>
|
||||
<p className='caption1'>{card2.caption}</p>
|
||||
<p className='caption2'>{card2.caption1}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
)
|
||||
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5.35356 9.35355C5.1583 9.54881 4.84171 9.54882 4.64645 9.35356C4.45119 9.1583 4.45118 8.84171 4.64644 8.64645L5.35356 9.35355ZM9 4.99993L9.35355 4.64637C9.44732 4.74014 9.5 4.86731 9.5 4.99992C9.5 5.13253 9.44732 5.25971 9.35356 5.35348L9 4.99993ZM4.64645 1.35356C4.45119 1.1583 4.45118 0.841714 4.64644 0.64645C4.8417 0.451186 5.15829 0.451183 5.35355 0.646443L4.64645 1.35356ZM1 5.49993C0.723858 5.49993 0.5 5.27607 0.5 4.99993C0.5 4.72378 0.723858 4.49993 1 4.49993V5.49993ZM4.64644 8.64645L8.64644 4.64638L9.35356 5.35348L5.35356 9.35355L4.64644 8.64645ZM8.64645 5.35348L4.64645 1.35356L5.35355 0.646443L9.35355 4.64637L8.64645 5.35348ZM9 5.49993H1V4.49993H9V5.49993Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 801 B |
Binary file not shown.
|
After Width: | Height: | Size: 231 KiB |
@@ -1,26 +1,31 @@
|
||||
.devices__contaner {
|
||||
margin-bottom: 160px;
|
||||
.devices__container {
|
||||
padding: 0;
|
||||
margin-bottom: 160px;
|
||||
}
|
||||
|
||||
.card__container {
|
||||
display: flex;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
gap: 30px;
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
|
||||
.card {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
padding: 32px;
|
||||
background: #141414;
|
||||
border-radius: 16px;
|
||||
height: 388px;
|
||||
width: 380px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.card__name {
|
||||
font-family: "Gilroy";
|
||||
margin: 0;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 24px;
|
||||
@@ -37,19 +42,120 @@
|
||||
.card__image {
|
||||
width: 292px;
|
||||
height: 271px;
|
||||
}
|
||||
|
||||
.card__image_type {
|
||||
position: relative;
|
||||
width: 211px;
|
||||
top: 72px;
|
||||
left: -17px;
|
||||
object-fit: contain;
|
||||
|
||||
}
|
||||
|
||||
.card__image_type1 {
|
||||
position: absolute;
|
||||
top: 111px;
|
||||
right: 35px;
|
||||
width: 192px;
|
||||
.card__image_type {}
|
||||
|
||||
@media screen and (min-width: 1600px) {
|
||||
.card__image {
|
||||
width: 350px;
|
||||
height: 325px;
|
||||
}
|
||||
|
||||
.card__name {
|
||||
font-size: 28.8px;
|
||||
}
|
||||
|
||||
.card {
|
||||
height: 466px;
|
||||
padding: 38px;
|
||||
}
|
||||
|
||||
.card__container {
|
||||
margin-bottom: 96px;
|
||||
}
|
||||
|
||||
.devices__container {
|
||||
margin-bottom: 192px;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 1279px) {
|
||||
.devices__container {
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 24px;
|
||||
|
||||
}
|
||||
|
||||
.card__image {
|
||||
width: 240px;
|
||||
}
|
||||
|
||||
.card__container {
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.card__image_type1 {}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.devices__container {
|
||||
padding: 0 20px 0;
|
||||
margin-bottom: 120px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.card {
|
||||
box-sizing: border-box;
|
||||
height: auto;
|
||||
object-fit: cover;
|
||||
aspect-ratio: 1/1;
|
||||
padding: 32px;
|
||||
}
|
||||
|
||||
.card__image {
|
||||
width: 100%;
|
||||
height: 222px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
@media screen and (max-width: 750px) {
|
||||
.card__container {
|
||||
grid-template-columns: 1fr;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.card__image {
|
||||
width: 90%;
|
||||
height: 90%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 639px) {
|
||||
.devices__container {
|
||||
padding: 60px 10px 0px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.card__container {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
margin-bottom: 40px;
|
||||
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 24px;
|
||||
box-sizing: border-box;
|
||||
object-fit: cover;
|
||||
aspect-ratio: 1/1;
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
@@ -3,48 +3,50 @@ import "./devices.css";
|
||||
import "../multiplayer/multiplayer.css";
|
||||
import touchscreen from "./image.png";
|
||||
import imac from "./image1.png";
|
||||
import iphone from "./iPhone.png";
|
||||
import ipad from "./iPad.png";
|
||||
import devicesFrame from './deviceFrame.png'
|
||||
import iconButton from "../../styles/iconButton.svg";
|
||||
import { Link } from 'react-router-dom';
|
||||
import { Button } from "../buttonDemo/buttonDemo"
|
||||
|
||||
export const Devices: React.FC = ({}) => {
|
||||
|
||||
|
||||
export const Devices: React.FC<any> = ({text}) => {
|
||||
return (
|
||||
<div className="devices__contaner">
|
||||
<div className="main-block__container">
|
||||
<div className="devices__container">
|
||||
<div
|
||||
data-aos-duration="400"
|
||||
data-aos="fade-up"
|
||||
className="main-block__container"
|
||||
>
|
||||
<div>
|
||||
<p className="main-block__title main-block__title_small">
|
||||
<p className=" main-block__title_small">
|
||||
Graff.estate stream{" "}
|
||||
</p>
|
||||
<p className="main-block__title_gardient main-block__title_gardient_small">
|
||||
доступен на любых устройствах.{" "}
|
||||
<p className="main-block__title_gardient_small">
|
||||
{text.mainBlockCaptionColor}
|
||||
</p>
|
||||
</div>
|
||||
<p className="main-block__caption multiplayer__caption">
|
||||
Приложение легко адаптируется под экран любого размера и одинаково
|
||||
хорошо выглядит на мобильном телефоне или на большом сенсорном экране
|
||||
в отделе продаж застройщика.{" "}
|
||||
{text.mainBlockCaption}
|
||||
</p>
|
||||
</div>
|
||||
<div className="card__container">
|
||||
<div className="card">
|
||||
<div data-aos="fade-up" data-aos-delay="100" className="card">
|
||||
<p className="card__name">Interactive display</p>
|
||||
<img src={touchscreen} className="card__image"></img>
|
||||
</div>
|
||||
<div className="card">
|
||||
<div data-aos="fade-up" data-aos-delay="300" className="card">
|
||||
<p className="card__name">Desktop</p>
|
||||
<img src={imac} className="card__image"></img>
|
||||
</div>
|
||||
<div className="card">
|
||||
<div data-aos="fade-up" data-aos-delay="500" className="card">
|
||||
<p className="card__name">Mobile</p>
|
||||
<img src={iphone} className="card__image_type"></img>
|
||||
<img src={ipad} className="card__image_type1"></img>
|
||||
<img src={devicesFrame} className="card__image"></img>
|
||||
</div>
|
||||
</div>
|
||||
<div className="main-block__subblock-container">
|
||||
<div className="main-block_subblock">
|
||||
<button className="main-block__button">
|
||||
Демоверсия
|
||||
<div className="main-block__icon"></div>
|
||||
</button>
|
||||
<Button text={text}></Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 80 KiB After Width: | Height: | Size: 387 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 134 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 90 KiB After Width: | Height: | Size: 639 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 65 KiB After Width: | Height: | Size: 433 KiB |
@@ -0,0 +1,465 @@
|
||||
.footer__container {
|
||||
box-sizing: border-box;
|
||||
background-color: transparent;
|
||||
background: #141414;
|
||||
border-radius: 32px 32px 0px 0px;
|
||||
color: #EBEBEB;
|
||||
display: flex;
|
||||
justify-content: center
|
||||
}
|
||||
|
||||
.footer__main-block {
|
||||
width: 1200px;
|
||||
display: flex;
|
||||
padding: 120px 120px;
|
||||
gap: 186px;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.footer__block_copyright_mobile_margin {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.footer__column_mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.footer__block_1 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 70px;
|
||||
}
|
||||
|
||||
.footer__name {
|
||||
margin: 0;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 40px;
|
||||
line-height: 100%;
|
||||
}
|
||||
|
||||
.footer__name_color {
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 40px;
|
||||
line-height: 100%;
|
||||
margin: 0;
|
||||
background-image: linear-gradient(135deg, rgba(211, 117, 255, 1) 50%, rgba(121, 143, 255, 1) 100%);
|
||||
background-size: 100%;
|
||||
background-repeat: repeat;
|
||||
background-color: transparent;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.footer__block_contacts {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.contacts__title {
|
||||
margin: 0;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
line-height: 120%;
|
||||
/* identical to box height, or 17px */
|
||||
|
||||
|
||||
/* Landing/White */
|
||||
|
||||
|
||||
opacity: 0.5;
|
||||
|
||||
}
|
||||
|
||||
.footer__container_social {
|
||||
display: grid;
|
||||
grid-template-columns: 74px 74px;
|
||||
gap: 16px;
|
||||
grid-row-gap: 8px;
|
||||
}
|
||||
|
||||
.footer__social {
|
||||
margin: 0;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 125%;
|
||||
}
|
||||
|
||||
.footer__block_copyright {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 29px;
|
||||
}
|
||||
|
||||
.footer__logo {
|
||||
width: 50px;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.copyright__caption {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
line-height: 120%;
|
||||
justify-content: flex-end
|
||||
}
|
||||
|
||||
.copyright {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.footer__block_2 {
|
||||
display: grid;
|
||||
grid-template-columns: 380px 380px;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.footer__card_l {
|
||||
background: #1E1E1E;
|
||||
border-radius: 16px;
|
||||
padding: 32px;
|
||||
margin-bottom: 30px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 26px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.footer__card_2 {
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
padding: 32px;
|
||||
position: relative;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 140%;
|
||||
/* or 25px */
|
||||
|
||||
|
||||
/* Gray */
|
||||
|
||||
color: #E3DDE5;
|
||||
border: 1px solid #454545;
|
||||
border-radius: 16px;
|
||||
|
||||
}
|
||||
|
||||
.card__contacts {
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 140%;
|
||||
/* or 25px */
|
||||
|
||||
|
||||
/* Landing/White */
|
||||
|
||||
color: #EBEBEB;
|
||||
}
|
||||
|
||||
.card__email {
|
||||
margin: 0 0 8px 0
|
||||
}
|
||||
|
||||
.card__tel {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.card__adress {
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 140%;
|
||||
/* or 25px */
|
||||
/* Landing/White */
|
||||
color: #EBEBEB;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.card__street {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.card_city {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.card_country {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.footer__card_2 {}
|
||||
|
||||
.card__icon {
|
||||
margin-bottom: 15px;
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
.card__caption {
|
||||
margin: 0;
|
||||
|
||||
}
|
||||
|
||||
.card__adress_uae {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.ellipse__container {
|
||||
position: absolute;
|
||||
right: 32px;
|
||||
bottom: 33px;
|
||||
}
|
||||
|
||||
.footer__card_2:hover {
|
||||
border: 1px solid #E3DDE5;
|
||||
transition: border ease-out 0.2s;
|
||||
}
|
||||
|
||||
.footer__card_2:hover>div>div>img {
|
||||
transition: opacity ease-out 0.2s;
|
||||
opacity: 1;
|
||||
|
||||
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1600px) {
|
||||
.footer__container {
|
||||
padding: 144px 0;
|
||||
margin: 0 auto;
|
||||
|
||||
}
|
||||
|
||||
.footer__main-block {
|
||||
width: 1600px;
|
||||
gap: 0;
|
||||
|
||||
}
|
||||
|
||||
.footer__block_1 {
|
||||
gap: 84px;
|
||||
}
|
||||
|
||||
.footer__name {
|
||||
font-weight: 400;
|
||||
font-size: 48px;
|
||||
line-height: 100%;
|
||||
}
|
||||
|
||||
.footer__name_color {
|
||||
font-weight: 400;
|
||||
font-size: 48px;
|
||||
line-height: 100%;
|
||||
}
|
||||
|
||||
.footer__block_contacts {
|
||||
gap: 25px;
|
||||
}
|
||||
|
||||
.contacts__title {
|
||||
font-weight: 600;
|
||||
font-size: 17px;
|
||||
line-height: 120%;
|
||||
}
|
||||
|
||||
.footer__container_social {
|
||||
gap: 25px;
|
||||
grid-template-columns: 94px 94px;
|
||||
}
|
||||
|
||||
.footer__social {
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
line-height: 125%;
|
||||
}
|
||||
|
||||
.footer__logo {
|
||||
width: 60px;
|
||||
height: 96px;
|
||||
}
|
||||
|
||||
.footer__block_copyright {
|
||||
gap: 35px;
|
||||
}
|
||||
|
||||
.copyright__caption {
|
||||
gap: 20px;
|
||||
font-weight: 600;
|
||||
font-size: 17px;
|
||||
line-height: 120%;
|
||||
|
||||
}
|
||||
|
||||
.footer__block_2 {
|
||||
gap: 35px;
|
||||
grid-template-columns: 456px 456px
|
||||
}
|
||||
|
||||
.footer__card_l {
|
||||
padding: 40px;
|
||||
gap: 30px;
|
||||
margin-bottom: 36px;
|
||||
}
|
||||
|
||||
.card__contacts {
|
||||
font-weight: 400;
|
||||
font-size: 22px;
|
||||
line-height: 140%;
|
||||
}
|
||||
|
||||
.card__adress {
|
||||
font-weight: 400;
|
||||
font-size: 21.6px;
|
||||
line-height: 140%;
|
||||
}
|
||||
|
||||
.footer__card_2 {
|
||||
padding: 40px 36px;
|
||||
}
|
||||
|
||||
.card__write {
|
||||
font-weight: 400;
|
||||
font-size: 22px;
|
||||
line-height: 140%;
|
||||
}
|
||||
|
||||
.card__icon {
|
||||
width: 28px;
|
||||
margin-bottom: 17px;
|
||||
}
|
||||
|
||||
.card__adress_uae {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 1279px) {
|
||||
.footer__block_2 {
|
||||
grid-template-columns: 311px 311px;
|
||||
}
|
||||
|
||||
|
||||
.footer__container {
|
||||
padding: 120px 12px;
|
||||
gap: 124px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.footer__block_copyright_mobile {
|
||||
display: none;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 29px;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 150%;
|
||||
/* identical to box height, or 21px */
|
||||
|
||||
letter-spacing: 0.02em;
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1060px) {
|
||||
.footer__container {}
|
||||
|
||||
.footer__main-block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 53px;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.footer__block_copyright {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.footer__block_1 {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 121px;
|
||||
}
|
||||
|
||||
.footer__block_2 {
|
||||
grid-template-columns: 1fr 1fr
|
||||
}
|
||||
|
||||
.footer__card_l {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.footer__block_copyright_mobile {
|
||||
display: grid;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 639px) {
|
||||
.footer__container {}
|
||||
|
||||
|
||||
.footer__main-block {
|
||||
padding: 60px 10px;
|
||||
gap: 42px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.footer__block_1 {
|
||||
flex-direction: column;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.footer__block_copyright {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.footer__block_2 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.footer__col2_mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.footer__col1_mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.footer__column_mobile {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.footer__card_l {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.footer__block_contacts {
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.footer__block_copyright_mobile {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
@@ -0,0 +1,156 @@
|
||||
import './footer.css'
|
||||
import logo from './logo.svg'
|
||||
import write from './send.svg'
|
||||
import phone from './phone.svg'
|
||||
import iconButton from "../../styles/iconButton.svg"
|
||||
import "../../styles/styles.css"
|
||||
|
||||
|
||||
export const Footer: React.FC<any> = ({ text }) => {
|
||||
|
||||
const { cardLarge } = text
|
||||
const { cardLarge1 } = text
|
||||
const { cardSmall } = text
|
||||
const { cardSmall1 } = text
|
||||
const { copyright } = text
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<div className="footer__container">
|
||||
<div className='footer__main-block'>
|
||||
<div className='footer__block_1'>
|
||||
<div className='footer__block_name'>
|
||||
<p className='footer__name'>Graff.estate</p>
|
||||
<p className='footer__name_color'>stream.</p>
|
||||
</div>
|
||||
<div className='footer__block_contacts'>
|
||||
<p className='contacts__title'>{text.social}</p>
|
||||
<div className='footer__container_social'>
|
||||
<p className='footer__social'>Facebook</p>
|
||||
<p className='footer__social'>Instagram</p>
|
||||
<p className='footer__social'>YouTube</p>
|
||||
<p className='footer__social'>VK</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className='footer__block_copyright'>
|
||||
<img src={logo} className='footer__logo'></img>
|
||||
<div className='copyright__caption'>
|
||||
<p className='copyright'>{copyright.caption}</p>
|
||||
<p className='copyright'>
|
||||
{copyright.caption1}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='footer__block_2'>
|
||||
<div className='footer__col1 footer__col1_mobile'>
|
||||
<div className='footer__card_l'>
|
||||
<div className='card__contacts'>
|
||||
<p className='card__email'>info@graff.tech</p>
|
||||
<p className='card__tel'>+7 800 770 00 76</p>
|
||||
</div>
|
||||
<div className='card__adress'>
|
||||
<p className='card__street'>{cardLarge.address}</p>
|
||||
<p className='card_city'>{cardLarge.city}</p>
|
||||
</div>
|
||||
<p className='card_country'>{cardLarge.country}</p>
|
||||
</div>
|
||||
<div className='footer__card_2'>
|
||||
<div className='ellipse__container'>
|
||||
<div className="main-block__icon_container">
|
||||
<img src={iconButton} className="main-block__icon"></img>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='card__write'>
|
||||
<img src={write} className='card__icon'></img>
|
||||
<p className='card__caption'>{cardSmall.caption}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='footer__col2 footer__col2_mobile'>
|
||||
<div className='footer__card_l'>
|
||||
<div className='card__contacts'>
|
||||
<p className='card__email'>waseem@graff.tech</p>
|
||||
<p className='card__tel'>+971 50 938 8902</p>
|
||||
</div>
|
||||
<div className='card__adress card__adress_uae'>
|
||||
<p className='card_city'>{cardLarge1.address}</p>
|
||||
</div>
|
||||
<p className='card_country'>{cardLarge1.country}</p>
|
||||
</div>
|
||||
<div className='footer__card_2'>
|
||||
<div className='ellipse__container'>
|
||||
<div className="main-block__icon_container">
|
||||
<img src={iconButton} className="main-block__icon"></img>
|
||||
</div>
|
||||
</div>
|
||||
<div className='card__write'>
|
||||
<img src={phone} className='card__icon'></img>
|
||||
<p className='card__caption'>{cardSmall1.caption}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='footer__column_mobile'>
|
||||
<div className='footer__card_2'>
|
||||
<div className='ellipse__container'>
|
||||
<div className="main-block__icon_container">
|
||||
<img src={iconButton} className="main-block__icon"></img>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='card__write'>
|
||||
<img src={write} className='card__icon'></img>
|
||||
<p className='card__caption'>{cardSmall.caption}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className='footer__card_2'>
|
||||
<div className='ellipse__container'>
|
||||
<div className="main-block__icon_container">
|
||||
<img src={iconButton} className="main-block__icon"></img>
|
||||
</div>
|
||||
</div>
|
||||
<div className='card__write'>
|
||||
<img src={phone} className='card__icon'></img>
|
||||
<p className='card__caption'>{cardSmall1.caption}</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div className='footer__card_l'>
|
||||
<div className='card__contacts'>
|
||||
<p className='card__email'>info@graff.tech</p>
|
||||
<p className='card__tel'>+7 800 770 00 76</p>
|
||||
</div>
|
||||
<div className='card__adress'>
|
||||
<p className='card__street'>{cardLarge.address}</p>
|
||||
<p className='card_city'>{cardLarge.city}</p>
|
||||
</div>
|
||||
<p className='card_country'>{cardLarge.country}</p>
|
||||
</div>
|
||||
<div className='footer__card_l'>
|
||||
<div className='card__contacts'>
|
||||
<p className='card__email'>waseem@graff.tech</p>
|
||||
<p className='card__tel'>+971 50 938 8902</p>
|
||||
</div>
|
||||
<div className='card__adress card__adress_uae'>
|
||||
<p className='card_city'>{cardLarge1.address}</p>
|
||||
</div>
|
||||
<p className='card_country'>{cardLarge1.country}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div className='footer__block_copyright_mobile'>
|
||||
<img src={logo} className='footer__logo'></img>
|
||||
<div className='copyright__caption'>
|
||||
<p className='copyright'>{copyright.caption}</p>
|
||||
<p className='copyright'>
|
||||
{copyright.caption1}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 12 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="M4.35197 1.24631L4.70501 0.892249L4.70501 0.892249L4.35197 1.24631ZM6.19317 3.08221L5.84013 3.43627V3.43627L6.19317 3.08221ZM14.753 12.8453L15.106 13.1994L14.753 12.8453ZM13.2256 14.3683L12.8725 14.0143H12.8725L13.2256 14.3683ZM6.19357 4.27111L5.84052 3.91705L5.84052 3.91705L6.19357 4.27111ZM4.80615 5.65452L4.45311 5.30046V5.30046L4.80615 5.65452ZM4.69991 5.98765L4.22892 6.15547L4.22892 6.15547L4.69991 5.98765ZM7.11658 8.92297L6.76614 9.27961L7.11658 8.92297ZM10.0156 11.3056L9.83125 11.7703L10.0156 11.3056ZM3.99893 1.60037L5.84013 3.43627L6.54621 2.72814L4.70501 0.892249L3.99893 1.60037ZM1.98489 3.12336L3.51228 1.60037L2.80619 0.892249L1.27881 2.41524L1.98489 3.12336ZM12.5587 10.1742L14.3999 12.0101L15.106 11.302L13.2648 9.46608L12.5587 10.1742ZM14.3999 12.4913L12.8725 14.0143L13.5786 14.7224L15.106 13.1994L14.3999 12.4913ZM12.8725 14.0143C12.5226 14.3632 12.0371 14.5211 11.4116 14.4978C10.7782 14.4742 10.0382 14.2638 9.25636 13.9156C7.69345 13.2196 6.08394 12.0275 5.04247 10.9891L4.33639 11.6972C5.45018 12.8078 7.15837 14.076 8.84954 14.8291C9.69469 15.2055 10.5658 15.4669 11.3744 15.4971C12.1909 15.5275 12.9782 15.3211 13.5786 14.7224L12.8725 14.0143ZM5.04247 10.9891C3.99515 9.94476 2.7937 8.32467 2.09128 6.75226C1.73987 5.9656 1.52718 5.22127 1.50243 4.58506C1.47798 3.95667 1.63604 3.47121 1.98489 3.12336L1.27881 2.41524C0.677284 3.01503 0.471318 3.80487 0.503182 4.62394C0.534743 5.4352 0.798696 6.31049 1.17824 7.16013C1.93774 8.86031 3.21546 10.5795 4.33639 11.6972L5.04247 10.9891ZM5.84052 3.91705L4.45311 5.30046L5.1592 6.00859L6.54661 4.62517L5.84052 3.91705ZM10.6737 11.5685L12.0721 10.1742L11.366 9.46608L9.96761 10.8604L10.6737 11.5685ZM4.22892 6.15547C4.387 6.59912 4.9329 7.47821 6.76614 9.27961L7.46702 8.56633C5.639 6.77006 5.24549 6.02913 5.17091 5.81983L4.22892 6.15547ZM6.76614 9.27961C8.58843 11.0703 9.4247 11.609 9.83125 11.7703L10.2 10.8408C10.0011 10.7619 9.2917 10.3593 7.46702 8.56633L6.76614 9.27961ZM9.96761 10.8604C9.96175 10.8663 9.97601 10.8492 10.016 10.8354C10.065 10.8187 10.1336 10.8145 10.2 10.8408L9.83125 11.7703C10.213 11.9218 10.5261 11.7157 10.6737 11.5685L9.96761 10.8604ZM13.2648 9.46608C12.7403 8.94308 11.8905 8.94308 11.366 9.46608L12.0721 10.1742C12.2063 10.0404 12.4245 10.0404 12.5587 10.1742L13.2648 9.46608ZM14.3999 12.0101C14.5334 12.1432 14.5334 12.3582 14.3999 12.4913L15.106 13.1994C15.6313 12.6756 15.6313 11.8258 15.106 11.302L14.3999 12.0101ZM4.45311 5.30046C4.3008 5.45233 4.09017 5.76605 4.22892 6.15547L5.17091 5.81983C5.18043 5.84655 5.18554 5.87678 5.18485 5.90779C5.18418 5.9381 5.17813 5.96281 5.1718 5.98024C5.1603 6.01191 5.14826 6.01949 5.1592 6.00859L4.45311 5.30046ZM4.70501 0.892249C4.1805 0.36925 3.3307 0.369251 2.80619 0.892249L3.51228 1.60037C3.6465 1.46654 3.86471 1.46654 3.99893 1.60038L4.70501 0.892249ZM5.84013 3.43627C5.97386 3.56961 5.97364 3.78432 5.84052 3.91705L6.54661 4.62517C7.07222 4.10107 7.07121 3.25163 6.54621 2.72814L5.84013 3.43627Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.0 KiB |
@@ -0,0 +1,3 @@
|
||||
<svg width="15" height="16" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M14 1L14.4743 1.15811C14.537 0.970175 14.4828 0.762974 14.3361 0.62981C14.1894 0.496646 13.978 0.462636 13.7969 0.543094L14 1ZM7 10.3333L6.55279 10.5569L7 10.3333ZM0.84528 7.43354L0.724012 7.91861L0.84528 7.43354ZM9.56237 14.3129L9.08803 14.1548L9.56237 14.3129ZM9.00943 14.3522L8.56222 14.5758L9.00943 14.3522ZM10.0367 14.471L14.4743 1.15811L13.5257 0.841886L9.08803 14.1548L10.0367 14.471ZM13.7969 0.543094L0.593131 6.41145L0.999269 7.32526L14.2031 1.45691L13.7969 0.543094ZM0.724012 7.91861L6.10095 9.26285L6.34349 8.29271L0.966548 6.94847L0.724012 7.91861ZM6.57578 9.13133L14.3536 1.35355L13.6464 0.646447L5.86867 8.42422L6.57578 9.13133ZM5.77501 9.00138L6.55279 10.5569L7.44721 10.1097L6.66944 8.55417L5.77501 9.00138ZM6.55279 10.5569L8.56222 14.5758L9.45665 14.1286L7.44721 10.1097L6.55279 10.5569ZM0.593131 6.41145C-0.102145 6.72046 -0.0141284 7.73408 0.724012 7.91861L0.966548 6.94847C1.15109 6.99461 1.17309 7.24801 0.999269 7.32526L0.593131 6.41145ZM9.08803 14.1548C9.14437 13.9858 9.37696 13.9692 9.45665 14.1286L8.56222 14.5758C8.88096 15.2133 9.81133 15.1472 10.0367 14.471L9.08803 14.1548Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
+170
-122
@@ -1,34 +1,25 @@
|
||||
.form__container {
|
||||
width: 385px;
|
||||
color: #ebebeb;
|
||||
display: grid;
|
||||
margin: 0 auto;
|
||||
grid-template-rows: auto 1fr;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 24px 32px;
|
||||
box-sizing: border-box;
|
||||
background: #141414;
|
||||
border-radius: 16px;
|
||||
justify-content: space-between;
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
transition: opacity ease-in 0.5s;
|
||||
|
||||
transition: opacity ease-in 0.5s;
|
||||
}
|
||||
|
||||
.form__container_active {
|
||||
width: 385px;
|
||||
color: #ebebeb;
|
||||
display: grid;
|
||||
margin: 0 auto;
|
||||
grid-template-rows: auto 1fr;
|
||||
padding: 24px 32px;
|
||||
box-sizing: border-box;
|
||||
background: #141414;
|
||||
border-radius: 16px;
|
||||
opacity: 1;
|
||||
transition: opacity ease-in 0.5s;
|
||||
|
||||
.form__container_disabled {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.container__form {}
|
||||
|
||||
|
||||
|
||||
.form__block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -36,97 +27,74 @@
|
||||
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1152px) {
|
||||
.form__block {
|
||||
padding: 0 20px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 832px) {
|
||||
.form__block {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
.form__block {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1152px) {
|
||||
.form__container {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.form__container_none {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.form {
|
||||
margin-top: 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
gap: 16px;
|
||||
outline: none;
|
||||
border-color: none;
|
||||
}
|
||||
|
||||
.form__input::placeholder {
|
||||
font-style: 'GilroyWebRegular';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #888888;
|
||||
line-height: 125%;
|
||||
}
|
||||
|
||||
.form__input {
|
||||
padding: 16px 16px 12px;
|
||||
gap: 8px;
|
||||
color: #ebebeb;
|
||||
width: 321px;
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
border: none;
|
||||
background: rgba(86, 126, 206, 0.1);
|
||||
border-radius: 8px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.button__submit {
|
||||
font-family: "Gilroy";
|
||||
font-family: 'GilroyWebRegular';
|
||||
outline: none;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 125%;
|
||||
background: #567ece;
|
||||
background-color: #567ece;
|
||||
border-radius: 8px;
|
||||
color: #EBEBEB;
|
||||
padding: 2px 0px 0px;
|
||||
cursor: pointer;
|
||||
height: 48px;
|
||||
height: 44px;
|
||||
width: 100%;
|
||||
border-radius: 8px;
|
||||
padding: 13px 11px;
|
||||
box-sizing: border-box;
|
||||
border: none;
|
||||
transition: background-color ease-in 0.5s;
|
||||
|
||||
}
|
||||
|
||||
.form__input_error:focus {
|
||||
height: 60px;
|
||||
background: #e9e9e9;
|
||||
.button__submit_disabled {
|
||||
background-color: #6A92E2;
|
||||
outline: none;
|
||||
border: none;
|
||||
width: 100%;
|
||||
padding: 20px 20px 19px;
|
||||
box-sizing: border-box;
|
||||
font-family: "Inter";
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 17px;
|
||||
line-height: 21px;
|
||||
border: 1px solid #eb5757;
|
||||
color: #eb5757;
|
||||
cursor: default;
|
||||
transition: background-color ease-in 0.5s;
|
||||
|
||||
}
|
||||
|
||||
@media screen and (max-width: 832px) {
|
||||
.form__input :last-of-type {
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
.form__input:focus {
|
||||
border: 1px solid #ebebeb;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
.confirm {
|
||||
padding: 15px 20px 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.form__header {
|
||||
display: flex;
|
||||
@@ -134,95 +102,64 @@
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1152px) {
|
||||
.form__header {
|
||||
margin: 30px 12px 43px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 832px) {
|
||||
.form__header {
|
||||
margin: 40px 12px 43px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
.form__header {
|
||||
margin: 20px 10px 19px;
|
||||
}
|
||||
}
|
||||
|
||||
.confirm {
|
||||
color: #FFFFFF;
|
||||
background: #141414;
|
||||
border-radius: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: 150px 40px 0;
|
||||
height: 100%;
|
||||
width: 385px;
|
||||
padding: 24px 32px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1152px) {
|
||||
.confirm {
|
||||
padding: 140px 20px 0;
|
||||
}
|
||||
.confirm__container {
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 40px;
|
||||
line-height: 100%;
|
||||
/* or 40px */
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
.confirm {
|
||||
padding: 80px 10px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.confirm__none {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.confirm__title {
|
||||
font-family: "Inter";
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 40px;
|
||||
line-height: 110%;
|
||||
color: #333333;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.confirm__caption {
|
||||
font-family: "Inter";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 130%;
|
||||
margin: 25px 0 40px;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
.confirm__caption {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.confirm__button {
|
||||
width: 380px;
|
||||
width: 100%;
|
||||
height: 59px;
|
||||
color: #ffffff;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
background: #333333;
|
||||
font-family: "Inter";
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-size: 17px;
|
||||
line-height: 21px;
|
||||
background: #567ECE;
|
||||
border-radius: 8px;
|
||||
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
.confirm__button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.warning {
|
||||
margin-left: 20px;
|
||||
@@ -237,3 +174,114 @@
|
||||
.warning_on {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1600px) {
|
||||
.form__container {
|
||||
width: 462px;
|
||||
padding: 28px 40px;
|
||||
}
|
||||
|
||||
.form {
|
||||
gap: 19px;
|
||||
}
|
||||
|
||||
.form__input {
|
||||
padding: 19px 19px 14px;
|
||||
height: 56px;
|
||||
}
|
||||
|
||||
.form__input::placeholder {
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
line-height: 125%;
|
||||
|
||||
}
|
||||
|
||||
.button__submit {
|
||||
font-size: 20px;
|
||||
padding: 16px 14px;
|
||||
height: 56px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.confirm {
|
||||
width: 462px;
|
||||
padding: 28px 40px;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 1279px) {
|
||||
.form__container {
|
||||
width: 320px;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.confirm {
|
||||
width: 320px;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.form__container_active {
|
||||
width: 320px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.form__input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.form__input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.button__submit {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.form__container {
|
||||
width: 100%;
|
||||
padding: 24px;
|
||||
height: 483px;
|
||||
}
|
||||
|
||||
.confirm {
|
||||
width: 100%;
|
||||
padding: 24px;
|
||||
height: 483px;
|
||||
}
|
||||
|
||||
.confirm__caption {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.confirm__title {
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 639px) {
|
||||
.form__container {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
padding: 24px;
|
||||
height: 420px;
|
||||
|
||||
}
|
||||
|
||||
.confirm {
|
||||
height: 420px;
|
||||
width: 100%;
|
||||
padding: 24px
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
@@ -2,54 +2,98 @@ import left from "../calendar/Arrow_Left.svg";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import moment from "moment";
|
||||
import "./form.css";
|
||||
import { TProps } from "../calendar/calendar";
|
||||
import "../timepicker/timepicker.css"
|
||||
import "../../index.css"
|
||||
import { TProps } from "../calendarDesktop/calendarDesktop";
|
||||
import { useSwiper } from 'swiper/react';
|
||||
|
||||
|
||||
export const Form: React.FC<TProps> = ({ time, open, setOpen, onExit, displayForm, setDisplayForm, isMobile, text }) => {
|
||||
const swiper = useSwiper();
|
||||
|
||||
|
||||
export const Form: React.FC<TProps> = ({ time, open, setOpen }) => {
|
||||
function goBack() {
|
||||
setOpen({
|
||||
calendar: false,
|
||||
timePicker: true,
|
||||
form: false,
|
||||
});
|
||||
if (isMobile) {
|
||||
setOpen({
|
||||
calendar: false,
|
||||
timePicker: true,
|
||||
form: true,
|
||||
confirm: false
|
||||
});
|
||||
swiper.slidePrev()
|
||||
} else {
|
||||
setOpen({
|
||||
calendar: false,
|
||||
timePicker: true,
|
||||
form: false,
|
||||
confirm: false
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function handleConfirm() {
|
||||
if (isMobile) {
|
||||
setOpen({
|
||||
calendar: false,
|
||||
timePicker: false,
|
||||
form: false,
|
||||
confirm: true
|
||||
})
|
||||
swiper.slideNext()
|
||||
} else {
|
||||
setDisplayForm(false)
|
||||
setOpen({
|
||||
calendar: false,
|
||||
timePicker: false,
|
||||
form: false,
|
||||
confirm: true
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<div className={open.form ? "form__container_active" : "form__container"}>
|
||||
<div className="timepicker__header">
|
||||
<div className="caption__container">
|
||||
<img onClick={() => goBack()} className="button__arrow_back" alt="left" src={left}></img>
|
||||
<span className="calendar__caption">Выбор времени</span>
|
||||
<div data-aos="fade-up" data-aos-delay="500" className={displayForm ? " form__container aos-init aos-animate" : "form__container_disabled aos-init aos-animate"}>
|
||||
<div className={open.form ? 'opacity_active' : 'opacity'}>
|
||||
<div className="timepicker__header">
|
||||
<div className="caption__container">
|
||||
<div onClick={goBack} className="button__arrow_back"></div>
|
||||
<span className="calendar__caption">{text.formCaption}</span>
|
||||
</div>
|
||||
<div className="line line_time"></div>
|
||||
<div className="date date_time">{time.format("DD MMM, HH:mm")}</div>
|
||||
</div>
|
||||
<div className="line line_time"></div>
|
||||
<div className="date">{time.format("DD MMM, LT")}</div>
|
||||
</div>
|
||||
<div className="form__block">
|
||||
<div>
|
||||
<form className="form">
|
||||
<input
|
||||
name="tel"
|
||||
className="form__input"
|
||||
type="text"
|
||||
placeholder="Номер телефона"
|
||||
></input>
|
||||
<input
|
||||
name="email"
|
||||
className="form__input"
|
||||
type="text"
|
||||
placeholder="E-mail"
|
||||
></input>
|
||||
<input
|
||||
name="name"
|
||||
className="form__input"
|
||||
type="text"
|
||||
placeholder="Ваше имя"
|
||||
></input>
|
||||
</form>
|
||||
<div className="form__block">
|
||||
<div>
|
||||
<form className="form">
|
||||
<input
|
||||
name="tel"
|
||||
className="form__input"
|
||||
type="text"
|
||||
placeholder={text.placeholders.name}
|
||||
></input>
|
||||
<input
|
||||
name="email"
|
||||
className="form__input"
|
||||
type="number"
|
||||
placeholder={text.placeholders.phoneNumber}
|
||||
></input>
|
||||
<input
|
||||
name="name"
|
||||
className="form__input"
|
||||
type="email"
|
||||
placeholder={text.placeholders.email}
|
||||
></input>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" className="button__submit">
|
||||
Запланировать
|
||||
</button>
|
||||
</div>
|
||||
<button onClick={handleConfirm} disabled={!open.form} type="submit" className={open.form ? 'button__submit' : 'button__submit button__submit_disabled'}>
|
||||
{text.buttons.plan}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -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 |
@@ -1,55 +1,213 @@
|
||||
.header {
|
||||
|
||||
}
|
||||
|
||||
.header-container {
|
||||
display: flex;
|
||||
padding: 35px 40px;
|
||||
box-sizing: border-box;
|
||||
color: #FFFFFF;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
display: flex;
|
||||
padding: 30px 40px;
|
||||
color: #ffffff;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.burger__button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.header-logo {
|
||||
width: 31px;
|
||||
height: 50px;
|
||||
width: 31px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.header-buttons {
|
||||
display: flex;
|
||||
gap: 40px;
|
||||
display: flex;
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
.header-button {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 125%;
|
||||
color: #FFFFFF;
|
||||
cursor: pointer;
|
||||
font-family: "GilroyWebRegular";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 125%;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
color: #ffffff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.header-lang-button-text:hover {
|
||||
background: rgba(235, 235, 235, 0.2);
|
||||
|
||||
}
|
||||
|
||||
.wrapper__button {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.header-lang-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 6px 12px;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
font-weight: 400;
|
||||
font-size: 11px;
|
||||
line-height: 13px;
|
||||
color: #EBEBEB;
|
||||
background-color: transparent;
|
||||
border-radius: 50px;
|
||||
border: 2px solid #EBEBEB;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
position: relative;
|
||||
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: 100%;
|
||||
}
|
||||
|
||||
.header-lang-button_active {
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.header-lang-button-text {
|
||||
display: flex;
|
||||
align-self: center;
|
||||
|
||||
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-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: url('chevronIcon.svg') 50% 50% no-repeat;
|
||||
background-size: 100% 100%;
|
||||
.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;
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 1279px) {
|
||||
.header-container {
|
||||
padding: 30px 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.header-container {
|
||||
padding: 15px 12px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 639px) {
|
||||
.header-container {
|
||||
padding: 8px 10px;
|
||||
}
|
||||
|
||||
.header-buttons {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.burger__button {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,17 +1,92 @@
|
||||
import React from "react";
|
||||
import logo from './logoIcon.svg';
|
||||
import './header.css';
|
||||
import React, {useState } from "react";
|
||||
import logo from "./logoIcon.svg";
|
||||
import chevron from "./chevronIcon.svg";
|
||||
import "./header.css";
|
||||
import "../../styles/styles.css";
|
||||
import iconClose from './closeIcon1.svg'
|
||||
import { Nav } from "../Navigaton/navigation";
|
||||
|
||||
export const Header:React.FC = React.memo(() => {
|
||||
return <div className="header-container">
|
||||
<img className="header-logo" alt="company-logo" src={logo} />
|
||||
<div className="header-buttons">
|
||||
<button className="header-button">Контакты</button>
|
||||
<button className="header-button">О компании</button>
|
||||
<button className="header-lang-button">
|
||||
<span className="header-lang-button-text">RU</span>
|
||||
<span className="header-lang-button-icon"></span>
|
||||
</button>
|
||||
|
||||
export type THeader = {
|
||||
language: string;
|
||||
changeLanguage: (language: string) => void;
|
||||
text?: any;
|
||||
};
|
||||
|
||||
export const Header: React.FC<THeader> =
|
||||
({ changeLanguage, language, text }) => {
|
||||
const [open, setOpen] = useState<boolean>(false)
|
||||
const [menuOpen, setMenuOpen] = useState(false)
|
||||
const [opacity, setOpacity] = useState(false)
|
||||
|
||||
function handleUpdateLanguage(value: string) {
|
||||
changeLanguage(value)
|
||||
setOpen(prev => !prev)
|
||||
}
|
||||
|
||||
function handleOpen() {
|
||||
setOpen(prev => !prev)
|
||||
}
|
||||
|
||||
function handleOpacity() {
|
||||
console.log(opacity)
|
||||
setOpacity(true)
|
||||
}
|
||||
|
||||
const style = {
|
||||
background: 'rgba(235, 235, 235, 0.2'
|
||||
};
|
||||
|
||||
const iconTransform = {
|
||||
transform: 'rotate(-90deg)'
|
||||
} as any
|
||||
|
||||
const setBackground = opacity && !open as boolean;
|
||||
|
||||
function setOpacityAndMenu() {
|
||||
setMenuOpen(true)
|
||||
const targetElement = document.querySelector('body') as HTMLElement
|
||||
targetElement.style.overflow = 'hidden'
|
||||
}
|
||||
|
||||
console.log(text)
|
||||
|
||||
function openMenu() {
|
||||
setMenuOpen(false)
|
||||
const targetElement = document.querySelector('body') as HTMLElement
|
||||
targetElement.style.overflow = 'visible'
|
||||
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="header">
|
||||
<div className="header-container">
|
||||
<img className="header-logo" alt="company-logo" src={logo} />
|
||||
<div className="header-buttons">
|
||||
<button className="header-button">{text.captionContact}</button>
|
||||
<button className="header-button">{text.captionCompain}</button>
|
||||
<div className={open ? "header-lang-button header-lang-button_active" : 'header-lang-button header-lang-button_disabled'} style={setBackground ? style : { background: 'transparent' }}>
|
||||
<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">{language}</div>
|
||||
</div>
|
||||
{language === 'RU' ? (<button value={'EN'} onClick={(e: any) => handleUpdateLanguage(e.target.value)} className="header-lang-button-text">EN</button>
|
||||
) : (<button onClick={(e: any) => handleUpdateLanguage(e.target.value)} value={'RU'} className="header-lang-button-text">RU</button>)}
|
||||
</div>
|
||||
</div>
|
||||
{menuOpen ? <img src={iconClose} onClick={openMenu} className='nav__close'></img>
|
||||
:
|
||||
<button onClick={setOpacityAndMenu} className="burger__button">
|
||||
<span className="line__burger"></span>
|
||||
<span className="line__burger"></span>
|
||||
<span className="line__burger"></span>
|
||||
</button>}
|
||||
</div>
|
||||
</div>
|
||||
})
|
||||
<Nav text={text} setOpacity={setOpacity} language={language} menuOpen={menuOpen} setOpen={setMenuOpen} changeLanguage={changeLanguage}></Nav>
|
||||
</div>
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,18 @@
|
||||
.calendar__mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.calendar__desktop {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 900px) {
|
||||
.calendar__mobile {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.calendar__desktop {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,123 @@
|
||||
import './main.css'
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { AnimationComponent } from "../animationComponent/animationComponent";
|
||||
import { SliderComponent } from "../sliderComponent/sliderComponent";
|
||||
import { CalendarDesktop } from "../calendarDesktop/calendarDesktop";
|
||||
import { Multiplayer } from "../multiplayer/multiplayer";
|
||||
import { Devices } from "../devices/devices";
|
||||
import { Player } from "../player/player";
|
||||
import { Analytics } from "../analytics/analytics";
|
||||
import { CloudSolution } from "../cloudSolution/cloudSolution";
|
||||
import { Demos } from "../demos/demos";
|
||||
import { PhotoComponent } from "../photoComponent/photoComponent";
|
||||
import { CalendarMobile } from "../calendarMobile/calendarMobile";
|
||||
import moment, { Moment } from "moment";
|
||||
import useScreenSize from 'use-screen-size'
|
||||
|
||||
|
||||
|
||||
|
||||
export type TObjct = {
|
||||
calendar: boolean;
|
||||
timePicker: boolean;
|
||||
form: boolean;
|
||||
confirm: boolean;
|
||||
};
|
||||
|
||||
export type TText = {
|
||||
text: object,
|
||||
}
|
||||
|
||||
export const Main: React.FC<any> = ({ text, locale }) => {
|
||||
|
||||
const { width } = useScreenSize()
|
||||
const [displayForm, setDisplayForm] = useState(true);
|
||||
const [time, setTime] = useState(moment());
|
||||
|
||||
useEffect(() => {
|
||||
setTime(moment().locale(locale))
|
||||
}, [locale])
|
||||
|
||||
|
||||
console.log(time)
|
||||
const [next, setNext] = useState({
|
||||
calendar: true,
|
||||
timePicker: false,
|
||||
form: false,
|
||||
confirm: false,
|
||||
});
|
||||
const size = useScreenSize()
|
||||
const isMobile = size.width >= 900 ? false : true;
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
if (isMobile) {
|
||||
setNext({
|
||||
calendar: true,
|
||||
timePicker: true,
|
||||
form: true,
|
||||
confirm: false,
|
||||
})
|
||||
}
|
||||
}, [width])
|
||||
|
||||
|
||||
|
||||
function updateTime(value: Moment) {
|
||||
setTime(value);
|
||||
}
|
||||
function navigationHandler(value: TObjct) {
|
||||
setNext(value);
|
||||
}
|
||||
|
||||
function onExit() {
|
||||
setNext({
|
||||
calendar: true,
|
||||
timePicker: false,
|
||||
form: false,
|
||||
confirm: false,
|
||||
})
|
||||
setDisplayForm(true)
|
||||
}
|
||||
return (
|
||||
<main className="main">
|
||||
<AnimationComponent text={text.title} />
|
||||
<SliderComponent text={text.slider} />
|
||||
<div className="calendar__mobile">
|
||||
<CalendarMobile
|
||||
locale={locale}
|
||||
text={text.calendar}
|
||||
setDisplayForm={setDisplayForm}
|
||||
displayForm={displayForm}
|
||||
setOpen={navigationHandler}
|
||||
open={next}
|
||||
time={time}
|
||||
onUpdate={updateTime}
|
||||
onExit={onExit}
|
||||
isMobile={isMobile}
|
||||
></CalendarMobile>
|
||||
</div>
|
||||
<div className="calendar__desktop">
|
||||
<CalendarDesktop
|
||||
locale={locale}
|
||||
text={text.calendar}
|
||||
setDisplayForm={setDisplayForm}
|
||||
displayForm={displayForm}
|
||||
setOpen={navigationHandler}
|
||||
open={next}
|
||||
time={time}
|
||||
onUpdate={updateTime}
|
||||
onExit={onExit}
|
||||
isMobile={isMobile}
|
||||
></CalendarDesktop>
|
||||
</div>
|
||||
<Multiplayer text={text.multiplayer} />
|
||||
<Devices text={text.devices} />
|
||||
<PhotoComponent text={text.photoComponent} />
|
||||
<Player text={text.player} />
|
||||
<Analytics text={text.analytics} />
|
||||
<CloudSolution text={text.cloudSolution} />
|
||||
<Demos text={text.demos} />
|
||||
</main>
|
||||
);
|
||||
};
|
||||
File diff suppressed because one or more lines are too long
@@ -1,77 +0,0 @@
|
||||
.mapblock__container {
|
||||
color: #ebebeb;
|
||||
background-image: url(./Map.svg);
|
||||
background-repeat: no-repeat;
|
||||
height: 780px;
|
||||
background-position: 300px;
|
||||
margin-bottom: 160px;
|
||||
}
|
||||
|
||||
.title__container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 30px;
|
||||
padding-top: 175px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-family: "Gilroy";
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
font-size: 96px;
|
||||
line-height: 80%;
|
||||
margin: 0;
|
||||
color: #ebebeb;
|
||||
}
|
||||
|
||||
.title__gardient {
|
||||
font-family: "Gilroy";
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
font-size: 96px;
|
||||
line-height: 80%;
|
||||
margin: 0;
|
||||
background-image: linear-gradient(#d375ff, #798fff);
|
||||
background-size: 100%;
|
||||
background-repeat: repeat;
|
||||
background-color: transparent;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
-moz-background-clip: text;
|
||||
-moz-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.button__demo {
|
||||
box-sizing: border-box;
|
||||
|
||||
background-color: transparent;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 14px 14px 12px 20px;
|
||||
gap: 4px;
|
||||
border: 1px solid #454545;
|
||||
border-radius: 32px;
|
||||
color: #ebebeb;
|
||||
width: 156px;
|
||||
margin-top: 31px;
|
||||
}
|
||||
|
||||
.title__caption {
|
||||
font-family: "Gilroy";
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 150%;
|
||||
/* or 21px */
|
||||
|
||||
letter-spacing: 0.02em;
|
||||
text-transform: uppercase;
|
||||
|
||||
/* Landing/White */
|
||||
|
||||
color: #ebebeb;
|
||||
|
||||
opacity: 0.8;
|
||||
}
|
||||
@@ -1,28 +0,0 @@
|
||||
import React from "react";
|
||||
import "./mapblock.css";
|
||||
import chevron from "./chevron.svg";
|
||||
import { Swiper, SwiperSlide } from "swiper/react";
|
||||
|
||||
|
||||
export const Mapblock: React.FC = React.memo(() => {
|
||||
return (
|
||||
<div className="mapblock__container">
|
||||
<div className="title__container">
|
||||
<div>
|
||||
<p className="title">Graff.estate </p>
|
||||
<p className="title__gardient">stream</p>
|
||||
</div>
|
||||
<span className="title__caption">
|
||||
Технология удаленной демонстрации жилого комплекса.
|
||||
</span>
|
||||
<button className="button__demo">
|
||||
Демоверсия
|
||||
<img src={chevron}></img>
|
||||
</button>
|
||||
</div>
|
||||
<div className="swiper__container">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 350 KiB After Width: | Height: | Size: 2.4 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 424 KiB After Width: | Height: | Size: 3.3 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 362 KiB After Width: | Height: | Size: 2.2 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 316 KiB After Width: | Height: | Size: 2.1 MiB |
@@ -18,12 +18,77 @@
|
||||
|
||||
.multiplayer__image {
|
||||
width: 553px;
|
||||
filter: drop-shadow(0px -2px 8px rgba(128, 128, 128, 0.15))
|
||||
drop-shadow(0px 2px 8px rgba(0, 0, 0, 0.8));
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.multiplayer__caption {
|
||||
margin-top: 40px;
|
||||
@media screen and (min-width: 1600px) {
|
||||
.multiplayer__image {
|
||||
width: 100%;
|
||||
height: 432px;
|
||||
}
|
||||
|
||||
.multiplayer__photo-container {
|
||||
gap: 32px;
|
||||
margin-bottom: 96px;
|
||||
}
|
||||
|
||||
.multiplayer__container {
|
||||
padding: 144px 40px 96px;
|
||||
margin-bottom: 176px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1279px) {
|
||||
.multiplayer__image {
|
||||
width: 453px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.multiplayer__photo-container {
|
||||
gap: 10px;
|
||||
margin-bottom: 60px;
|
||||
|
||||
}
|
||||
|
||||
.multiplayer__image {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.multiplayer__container {
|
||||
|
||||
padding: 120px 20px 60px;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 120px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
@media screen and (max-width: 639px) {
|
||||
|
||||
.multiplayer__container {
|
||||
padding: 60px 10px 40px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.multiplayer__image {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.multiplayer__photo-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
margin-bottom: 40px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
@@ -4,22 +4,33 @@ import photo from "./Photo.png";
|
||||
import photo1 from "./Photo1.png";
|
||||
import photo2 from "./Photo2.png";
|
||||
import photo3 from "./Photo3.png";
|
||||
import iconButton from "../../styles/iconButton.svg";
|
||||
import { Link } from 'react-router-dom';
|
||||
import { Button } from "../buttonDemo/buttonDemo"
|
||||
|
||||
export const Multiplayer: React.FC = ({}) => {
|
||||
|
||||
export const Multiplayer: React.FC<any> = ({text}) => {
|
||||
return (
|
||||
<div className="multiplayer__container">
|
||||
<div className="main-block__container">
|
||||
<div>
|
||||
<p className="main-block__title main-block__title_small">
|
||||
<div
|
||||
data-aos="zoom-in"
|
||||
data-aos-duration="400"
|
||||
className="multiplayer__container"
|
||||
>
|
||||
<div
|
||||
data-aos="fade-up"
|
||||
data-aos-delay="400"
|
||||
className="main-block__container"
|
||||
>
|
||||
<div id="trigger">
|
||||
<p className=" main-block__title_small">
|
||||
Graff.estate stream
|
||||
</p>
|
||||
<p className="main-block__title_gardient main-block__title_gardient_small">
|
||||
для совместной работы.
|
||||
<p className="main-block__title_gardient_small">
|
||||
{text.mainBlockCaptionColor}
|
||||
</p>
|
||||
</div>
|
||||
<p className="main-block__caption multiplayer__caption">
|
||||
Покупатель может вместе с близкими людьми осмотреть жилой комплекс.
|
||||
Это совершенно новый опыт в процессе выбора квартиры.
|
||||
{text.mainBlockCaption}
|
||||
</p>
|
||||
</div>
|
||||
<div className="multiplayer__photo-container">
|
||||
@@ -30,12 +41,8 @@ export const Multiplayer: React.FC = ({}) => {
|
||||
</div>
|
||||
<div className="main-block__subblock-container">
|
||||
<div className="main-block_subblock">
|
||||
Осмотр жилого комплекса доступен в любой <br></br> момент, без
|
||||
необходимости предварительной <br></br> записи на просмотр.
|
||||
<button className="main-block__button">
|
||||
Демоверсия
|
||||
<div className="main-block__icon"></div>
|
||||
</button>
|
||||
{text.mainBlockSubblock}
|
||||
<Button text={text}></Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 470 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 469 KiB |
@@ -0,0 +1,95 @@
|
||||
.photo___container {
|
||||
background-color: transparent;
|
||||
margin-bottom: 160px;
|
||||
|
||||
}
|
||||
|
||||
.photo__container_grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 30px;
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
|
||||
.photo__container_image {
|
||||
object-fit: cover;
|
||||
width: 585px;
|
||||
}
|
||||
|
||||
.photo-component__margin {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1600px) {
|
||||
.photo__container_image {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.photo__container_grid {
|
||||
margin-bottom: 96px;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.photo___container {
|
||||
margin-bottom: 192px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media screen and (max-width: 1279px) {
|
||||
|
||||
.photo__container_image {
|
||||
width: 485px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
|
||||
.photo___container {
|
||||
background-color: transparent;
|
||||
padding: 0 20px 0;
|
||||
margin-bottom: 120px;
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.photo__container_grid {
|
||||
margin-bottom: 60px;
|
||||
gap: 10px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.photo__container_image {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 639px) {
|
||||
|
||||
.photo___container {
|
||||
background-color: transparent;
|
||||
padding: 80px 10px 0;
|
||||
}
|
||||
|
||||
|
||||
.photo__container_grid {
|
||||
grid-template-columns: 1fr;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.photo__container_image {
|
||||
object-fit: contain;
|
||||
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
import '../../styles/styles.css'
|
||||
import '../player/player.css'
|
||||
import './photoComponent.css'
|
||||
import photo1 from './Photo1.png'
|
||||
import photo2 from './Photo2.png'
|
||||
|
||||
|
||||
|
||||
export const PhotoComponent: React.FC<any> = ({ text }) => {
|
||||
return (
|
||||
<div className="photo___container">
|
||||
<div
|
||||
data-aos-duration="400"
|
||||
data-aos="fade-up"
|
||||
className="main-block__container"
|
||||
>
|
||||
<div>
|
||||
<p className="main-block__title main-block__title_small">
|
||||
Graff.estate stream
|
||||
</p>
|
||||
<p className="main-block__title_gardient main-block__title_gardient_small">
|
||||
{text.mainBlockCaptionColor}
|
||||
</p>
|
||||
</div>
|
||||
<p className="main-block__caption photo-component__margin">
|
||||
{text.mainBlockCaption}
|
||||
</p>
|
||||
</div>
|
||||
<div className='photo__container_grid'>
|
||||
<img data-aos="fade-up" data-aos-delay="100" src={photo1} className='photo__container_image'></img>
|
||||
<img data-aos="fade-up" data-aos-delay="200" src={photo2} className='photo__container_image'></img>
|
||||
|
||||
</div>
|
||||
<div className="main-block_subblock">
|
||||
{text.mainBlockSubblock}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
.chart {
|
||||
font-family: 'Gilroy';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
line-height: 140%;
|
||||
/* or 17px */
|
||||
|
||||
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: 100%;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
import { PieChart } from 'react-minimal-pie-chart';
|
||||
import './chart.css'
|
||||
import "../../styles/styles.css";
|
||||
import useScreenSize from 'use-screen-size'
|
||||
|
||||
|
||||
|
||||
|
||||
export const PieChartComp: React.FC = ({ }) => {
|
||||
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',
|
||||
};
|
||||
|
||||
const size = useScreenSize()
|
||||
const style = size.width >= 900 ? false : true;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<div className='chart'>
|
||||
<PieChart
|
||||
label={({ dataEntry }) => `${Math.round(dataEntry.percentage)} %`}
|
||||
data={dataMock}
|
||||
labelStyle={
|
||||
defaultLabelStyle
|
||||
}
|
||||
labelPosition={65}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
@@ -0,0 +1,64 @@
|
||||
.player__container {
|
||||
background: #141414;
|
||||
border-radius: 32px;
|
||||
padding: 120px 32px 80px;
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
|
||||
.video__container {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
|
||||
.fake-player {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1600px) {
|
||||
.player__container {
|
||||
padding: 144px 40px 96px;
|
||||
margin-bottom: 196px;
|
||||
|
||||
}
|
||||
|
||||
.video__container {
|
||||
margin-bottom: 96px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 1279px) {
|
||||
.video__container {
|
||||
width: 936px;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.player__container {
|
||||
padding: 80px 20px 60px;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.video__container {
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 639px) {
|
||||
.player__container {
|
||||
padding: 80px 10px 40px;
|
||||
margin-bottom: 40px;
|
||||
|
||||
}
|
||||
|
||||
.video__container {
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
import "../../styles/styles.css";
|
||||
import "../multiplayer/multiplayer.css";
|
||||
import "./player.css"
|
||||
import iconButton from "../../styles/iconButton.svg"
|
||||
import { Link } from "react-router-dom";
|
||||
import { Button } from "../buttonDemo/buttonDemo"
|
||||
|
||||
|
||||
import video from "./VideoPlayer.png"
|
||||
export const Player: React.FC<any> = ({ text }) => {
|
||||
return (
|
||||
<div data-aos="zoom-in" data-aos-duration="500" className="player__container">
|
||||
<div data-aos="fade-up"
|
||||
data-aos-delay="400"
|
||||
className="main-block__container">
|
||||
<div>
|
||||
<p className="main-block__title_small">
|
||||
Graff.estate stream{" "}
|
||||
</p>
|
||||
<p className=" main-block__title_gardient_small">
|
||||
{text.mainBlockCaptionColor}
|
||||
</p>
|
||||
</div>
|
||||
<p className="main-block__caption multiplayer__caption">
|
||||
{text.mainBlockCaption}
|
||||
</p>
|
||||
</div>
|
||||
<div className="video__container">
|
||||
<img className="fake-player" src={video}></img>
|
||||
</div>
|
||||
<div className="main-block__subblock-container">
|
||||
<div className="main-block_subblock">
|
||||
{text.mainBlockSubblock}
|
||||
<Button text={text}></Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,9 +1,12 @@
|
||||
.slider-container {
|
||||
width: 1200px;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
|
||||
background: #141414;
|
||||
border-radius: 32px;
|
||||
padding-top: 120px;
|
||||
padding-bottom: 80px;
|
||||
padding-bottom: 85px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.slider__block {
|
||||
@@ -23,7 +26,6 @@
|
||||
}
|
||||
|
||||
.slider__caption {
|
||||
font-family: "Gilroy";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
@@ -38,7 +40,6 @@
|
||||
.slider__caption_color {
|
||||
margin-top: 40px;
|
||||
margin-bottom: 20px;
|
||||
font-family: "Gilroy";
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
@@ -52,7 +53,6 @@
|
||||
|
||||
.slider__gardient {
|
||||
width: 358px;
|
||||
font-family: "Gilroy";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 64px;
|
||||
@@ -71,8 +71,6 @@
|
||||
|
||||
.slider__title {
|
||||
width: 358px;
|
||||
|
||||
font-family: "Gilroy";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 64px;
|
||||
@@ -81,3 +79,36 @@
|
||||
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.title__gardient_pos {
|
||||
background-image: linear-gradient(to right, #D375FF 0%, #798FFF 45%);
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
|
||||
.slider {
|
||||
padding: 0 20px 0;
|
||||
}
|
||||
|
||||
.slider-container {
|
||||
box-sizing: border-box;
|
||||
padding: 80px 0 85px;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 639px) {
|
||||
.slider-container {
|
||||
box-sizing: border-box;
|
||||
padding: 60px 0 69px;
|
||||
}
|
||||
|
||||
.slider {
|
||||
padding: 0 10px 0;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
@@ -1,37 +1,35 @@
|
||||
import React from "react";
|
||||
import "./sliderComponent.css";
|
||||
import "../../styles/styles.css"
|
||||
import { Swiper, SwiperSlide } from "swiper/react";
|
||||
import SwiperCentred from "../swiper/swiper";
|
||||
import { TText } from "../main/main";
|
||||
|
||||
export const SliderComponent: React.FC = React.memo(() => {
|
||||
export const SliderComponent: React.FC<any> = React.memo(({ text }) => {
|
||||
return (
|
||||
<div className="slider-container">
|
||||
<div data-aos="zoom-in" data-aos-duration="500" className="slider-container">
|
||||
<div className="slider">
|
||||
<div className="main-block__container">
|
||||
<div data-aos="fade-up" data-aos-delay="400"
|
||||
className="main-block__container">
|
||||
<div>
|
||||
<p className="main-block__title">Graff.estate </p>
|
||||
<p className="main-block__title_gardient">stream</p>
|
||||
<p className="main-block__title_gardient title__gardient_pos">stream</p>
|
||||
</div>
|
||||
<p className=" main-block__caption_color">
|
||||
бескомпромиссный уровень графики и полное погружение покупателя в
|
||||
процесс выбора квартиры.
|
||||
</p>
|
||||
<p className="main-block__caption">
|
||||
Покажем все преимущества вашего жилого комплекса клиенту из любого
|
||||
конца мира. Местоположение и устройство значения не имеют. Нужен
|
||||
только интернет.
|
||||
{text.mainBlockCaptionColor}
|
||||
</p>
|
||||
<p className="main-block__caption_l">{text.mainBlockCaption}</p>
|
||||
</div>
|
||||
<SwiperCentred
|
||||
slidesPerView={""}
|
||||
centeredSlides={false}
|
||||
spaceBetween={0}
|
||||
modules={[]}
|
||||
className={""}
|
||||
children={undefined}
|
||||
></SwiperCentred>
|
||||
</div>
|
||||
<SwiperCentred
|
||||
text={text}
|
||||
slidesPerView={'2'}
|
||||
centeredSlides={false}
|
||||
spaceBetween={0}
|
||||
modules={[]}
|
||||
className={""}
|
||||
rewind={true}
|
||||
children={undefined}
|
||||
></SwiperCentred>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
@@ -1,3 +1,13 @@
|
||||
|
||||
@media screen and (min-width: 1600px) {
|
||||
.image__slider {
|
||||
height: 514px;
|
||||
}
|
||||
.image__slider_active {
|
||||
height: 514px;
|
||||
}
|
||||
}
|
||||
|
||||
.image__slider {
|
||||
width: 100%;
|
||||
height: 428px;
|
||||
@@ -6,6 +16,13 @@
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.swiper-slide {
|
||||
width: 536px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.image__slider_active {
|
||||
width: 100%;
|
||||
height: 428px;
|
||||
@@ -19,7 +36,8 @@
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
gap: 340px;
|
||||
gap: 304px
|
||||
|
||||
}
|
||||
|
||||
.slider__info {
|
||||
@@ -29,8 +47,8 @@
|
||||
}
|
||||
|
||||
.swiper__caption {
|
||||
white-space: nowrap;
|
||||
margin: 0;
|
||||
font-family: "Gilroy";
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
@@ -58,7 +76,6 @@
|
||||
}
|
||||
|
||||
.container1 {
|
||||
font-family: "Gilroy";
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
@@ -79,10 +96,84 @@
|
||||
.swiper__caption {
|
||||
margin: 0;
|
||||
color: #888888;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pagination__container {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
display: grid;
|
||||
grid-template-columns: 120px auto;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
|
||||
.swiper-slide {
|
||||
width: 536px
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1600px) {
|
||||
.image__slider {
|
||||
height: 514px;
|
||||
}
|
||||
.image__slider_active {
|
||||
height: 514px;
|
||||
}
|
||||
.container {
|
||||
gap: 22px;
|
||||
}
|
||||
|
||||
.swiper__caption {
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.container1 {
|
||||
font-size: 17px;
|
||||
}
|
||||
.pagination__container {
|
||||
grid-template-columns: 145px auto;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.slider__info {
|
||||
display: block;
|
||||
|
||||
}
|
||||
.button__container {
|
||||
margin-left: 29px;
|
||||
margin-right: 29px;
|
||||
|
||||
}
|
||||
|
||||
.button__container {
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
@media screen and (max-width: 639px) {
|
||||
.swiper-slide {
|
||||
width: 290px
|
||||
}
|
||||
|
||||
.image__slider {
|
||||
height: 232px;
|
||||
}
|
||||
|
||||
.image__slider_active {
|
||||
height: 232px;
|
||||
}
|
||||
|
||||
.button__container {
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.button__container {
|
||||
margin-left: 19px;
|
||||
margin-right: 19px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
@@ -1,25 +1,22 @@
|
||||
import React, { useRef, useState } from "react";
|
||||
import React, { useEffect, useState } from "react";
|
||||
// Import Swiper React components
|
||||
import { Swiper, SwiperSlide, useSwiperSlide } from "swiper/react";
|
||||
import { Swiper, SwiperSlide } from "swiper/react";
|
||||
|
||||
// Import Swiper styles
|
||||
import "swiper/css";
|
||||
import "swiper/css/pagination";
|
||||
import "swiper/css/navigation";
|
||||
|
||||
// import required modules
|
||||
import { Pagination, Navigation } from "swiper";
|
||||
import useScreenSize from 'use-screen-size'
|
||||
|
||||
import img from "./images/Architecture1.png";
|
||||
import img1 from "./images/Floor1.png";
|
||||
import img2 from "./images/Infrastructure1.png";
|
||||
import img3 from "./images/Outside.png";
|
||||
import "./swiper.css";
|
||||
import arrowLeft from "./images/Arrow_Left.svg";
|
||||
import arrowRight from "./images/Arrow_Right.svg";
|
||||
import "swiper/css";
|
||||
import "swiper/css/pagination";
|
||||
import "swiper/css/navigation";
|
||||
import '../calendar/calendar'
|
||||
import { text } from "stream/consumers";
|
||||
|
||||
type propsTypes = {
|
||||
slidesPerView: string;
|
||||
@@ -27,19 +24,50 @@ type propsTypes = {
|
||||
spaceBetween: number;
|
||||
modules: Array<any>;
|
||||
className: string;
|
||||
children: React.ReactNode; // 👈️ added type for children
|
||||
children: React.ReactNode;
|
||||
rewind: boolean;
|
||||
text: any;
|
||||
};
|
||||
|
||||
export default function SwiperCentred(props: propsTypes) {
|
||||
const swiperSlide = useSwiperSlide();
|
||||
const size = useScreenSize()
|
||||
const [caption, setCaption] = useState<any>()
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
setCaption(props.text.subtitle1)
|
||||
}, [props.text])
|
||||
|
||||
function updateCaption() {
|
||||
const slide = document.querySelector('.image__slider_active')?.getAttribute('data-caption')
|
||||
setCaption(slide)
|
||||
}
|
||||
|
||||
|
||||
function swiperWidth() {
|
||||
if (size.width > 1920) {
|
||||
return {
|
||||
width: '644px',
|
||||
height: '514px'
|
||||
}
|
||||
} else if (size.width > 640) {
|
||||
return { width: '544px' }
|
||||
} else {
|
||||
return { width: '290px' }
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<Swiper
|
||||
rewind={true}
|
||||
centeredSlides={true}
|
||||
spaceBetween={20}
|
||||
initialSlide={1}
|
||||
slidesPerView={2}
|
||||
slidesPerView={'auto'}
|
||||
onSlideChangeTransitionEnd={updateCaption}
|
||||
modules={[Navigation, Pagination]}
|
||||
navigation={{
|
||||
nextEl: ".button_next",
|
||||
@@ -50,33 +78,41 @@ export default function SwiperCentred(props: propsTypes) {
|
||||
type: "fraction",
|
||||
}}
|
||||
>
|
||||
<SwiperSlide>
|
||||
<SwiperSlide
|
||||
style={swiperWidth()}>
|
||||
{({ isActive }) => (
|
||||
<img
|
||||
data-caption={props.text.subtitle}
|
||||
className={isActive ? "image__slider_active" : "image__slider"}
|
||||
src={img1}
|
||||
/>
|
||||
)}
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<SwiperSlide
|
||||
style={swiperWidth()}>
|
||||
{({ isActive }) => (
|
||||
<img
|
||||
data-caption={props.text.subtitle1}
|
||||
className={isActive ? "image__slider_active" : "image__slider"}
|
||||
src={img}
|
||||
/>
|
||||
)}
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<SwiperSlide
|
||||
style={swiperWidth()}>
|
||||
{({ isActive }) => (
|
||||
<img
|
||||
data-caption={props.text.subtitle2}
|
||||
className={isActive ? "image__slider_active" : "image__slider"}
|
||||
src={img2}
|
||||
/>
|
||||
)}
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<SwiperSlide
|
||||
style={swiperWidth()}>
|
||||
{({ isActive }) => (
|
||||
<img
|
||||
data-caption={props.text.subtitle3}
|
||||
className={isActive ? "image__slider_active" : "image__slider"}
|
||||
src={img3}
|
||||
/>
|
||||
@@ -85,14 +121,15 @@ export default function SwiperCentred(props: propsTypes) {
|
||||
<div className="slider__info">
|
||||
<div className="button__container">
|
||||
<div className="container">
|
||||
<img className="button button_prev" src={arrowLeft}></img>
|
||||
<img className="button button_next" src={arrowRight}></img>
|
||||
<div className="button__arrow_l button_prev"></div>
|
||||
<div className="button__arrow_r button_next"></div>
|
||||
</div>
|
||||
<div className="pagination__container">
|
||||
<p className="swiper__caption">{caption}</p>
|
||||
<div className="container1">
|
||||
<p className="swiper__caption"></p>
|
||||
</div>
|
||||
<p className="swiper__caption">Архитектура</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -6,51 +6,77 @@
|
||||
}
|
||||
|
||||
.timepicker__table {
|
||||
margin-bottom: 4px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 4px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.timepicker__table:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.timpicker__cell {
|
||||
font-family: "Gilroy";
|
||||
font-style: normal;
|
||||
padding: 3px 5px;
|
||||
padding: 11px 5px;
|
||||
box-sizing: border-box;
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
line-height: 130%;
|
||||
cursor: pointer;
|
||||
height: 30px;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 140%;
|
||||
pointer-events: none;
|
||||
cursor: auto;
|
||||
background-color: transparent;
|
||||
border-radius: 4px;
|
||||
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
.timpicker__cell {
|
||||
font-size: 14px;
|
||||
height: 40px;
|
||||
}
|
||||
.timpicker__cell_active {
|
||||
background: rgba(86, 126, 206, 0.1);
|
||||
color: #567ECE;
|
||||
pointer-events: all;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.line_time {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.timpicker__cell {
|
||||
background: rgba(86, 126, 206, 0.1);
|
||||
border-radius: 4px;
|
||||
|
||||
|
||||
|
||||
@media screen and (min-width: 1600px) {
|
||||
.timpicker__cell {
|
||||
font-size: 22px;
|
||||
padding: 13px 7px;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.appointment__block_time {
|
||||
margin-top: 21px;
|
||||
@media screen and (max-width: 1279px) {
|
||||
.timpicker__cell {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.timpicker__cell {
|
||||
padding: 8px 4px;
|
||||
font-size: 14px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@@ -3,21 +3,29 @@ import { useEffect, useState } from "react";
|
||||
import moment, { Moment } from "moment";
|
||||
import "moment/locale/ru";
|
||||
import "./timepicker.css";
|
||||
import "../calendar/calendar.css";
|
||||
import "../calendarDesktop/calendar.css";
|
||||
import point0 from "../calendar/Ellipse0.svg";
|
||||
import point1 from "../calendar/Ellipse1.svg";
|
||||
import { TProps } from "../calendar/calendar";
|
||||
import { TProps } from "../calendarDesktop/calendarDesktop";
|
||||
import useScreenSize from 'use-screen-size'
|
||||
import { useSwiper } from 'swiper/react';
|
||||
|
||||
|
||||
|
||||
export const Timepicker: React.FC<TProps> = ({
|
||||
time,
|
||||
onUpdate,
|
||||
open,
|
||||
setOpen,
|
||||
isMobile,
|
||||
text
|
||||
}) => {
|
||||
|
||||
|
||||
const [timePicker, settimePicker] = useState<any[]>([]);
|
||||
const startTime = time.clone().hours(8).minutes(0);
|
||||
const endTime = time.clone().hours(19).minutes(0);
|
||||
const swiper = useSwiper();
|
||||
|
||||
useEffect(() => {
|
||||
const temp = startTime.clone().subtract("30", "minute");
|
||||
@@ -38,54 +46,72 @@ export const Timepicker: React.FC<TProps> = ({
|
||||
calendar: false,
|
||||
timePicker: false,
|
||||
form: true,
|
||||
confirm: false,
|
||||
});
|
||||
swiper.slideNext()
|
||||
|
||||
}
|
||||
|
||||
function goBack() {
|
||||
if (isMobile) {
|
||||
swiper.slidePrev()
|
||||
}
|
||||
setOpen({
|
||||
calendar: true,
|
||||
timePicker: false,
|
||||
form: false,
|
||||
confirm: false,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
function isActive(i: number) {
|
||||
if (i % 2 === 0) {
|
||||
return 'timpicker__cell_active timpicker__cell'
|
||||
}
|
||||
else {
|
||||
return 'timpicker__cell'
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={open.timePicker ? "calendar_active" : "calendar"}>
|
||||
<div className="timepicker__header">
|
||||
<div className="caption__container">
|
||||
<img onClick={() => goBack()} className="button__arrow_back" alt="left" src={left}></img>
|
||||
<span className="calendar__caption">Выбор времени</span>
|
||||
<div data-aos="fade-up" data-aos-delay="300" className={open.timePicker ? " calendar aos-init aos-animate" : "calendar aos-init aos-animate"}>
|
||||
<div className={open.timePicker ? 'opacity_active' : 'opacity'}>
|
||||
<div className="timepicker__header">
|
||||
<div className="caption__container">
|
||||
<div onClick={() => goBack()} className="button__arrow_back" ></div>
|
||||
<span className="calendar__caption">{text.timepickerCaption}</span>
|
||||
</div>
|
||||
<div className="line line_time"></div>
|
||||
<div className="date date_time">{time.format("DD MMMM")}</div>
|
||||
</div>
|
||||
<div className="line line_time"></div>
|
||||
<div className="date date_time">{time.format("DD MMMM")}</div>
|
||||
</div>
|
||||
<div className="form__block">
|
||||
{timePicker.map((date, i) => (
|
||||
<div key={i} className="timepicker__table">
|
||||
{date.map((time: any, i: number) => (
|
||||
<div
|
||||
key={i}
|
||||
onClick={() => updateTime(time)}
|
||||
className="timpicker__cell"
|
||||
>
|
||||
{time.format("LT")}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
<div className="appointment__block appointment__block_time">
|
||||
<div>
|
||||
<img className="point" src={point1}></img>
|
||||
<span className="appointment__caption_active">Запись есть</span>
|
||||
</div>
|
||||
<div>
|
||||
<img className="point" src={point0}></img>
|
||||
<span>Записи нет</span>
|
||||
</div>
|
||||
<div className="form__block">
|
||||
{timePicker.map((date, i) => (
|
||||
<div key={i} className="timepicker__table">
|
||||
{date.map((time: any, i: number) => (
|
||||
<div
|
||||
key={i}
|
||||
onClick={() => updateTime(time)}
|
||||
className={isActive(i)}
|
||||
>
|
||||
{time.format("HH:mm")}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="appointment__block appointment__block_time">
|
||||
<div>
|
||||
<img className="point" src={point1}></img>
|
||||
<span className="appointment__caption_active">{text.appointmentTrue}</span>
|
||||
</div>
|
||||
<div>
|
||||
<img className="point" src={point0}></img>
|
||||
<span>{text.appointmentFalse}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
import React from "react";
|
||||
|
||||
export const languageContext = React.createContext();
|
||||
+27
-36
@@ -1,37 +1,28 @@
|
||||
@font-face {
|
||||
font-family: 'Gilory';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url("./Gilroy_Regular.woff2") format("woff2"),
|
||||
url("./Gilroy_Regular.woff2") format("woff");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Gilory';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-display: swap;
|
||||
src: url("./Gilroy_Medium.woff2") format("woff2"),
|
||||
url("./Gilroy_Medium.woff") format("woff");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Gilory';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-display: swap;
|
||||
src: url("./Gilroy_SemiBold.woff2") format("woff2"),
|
||||
url("./Gilroy_SemiBold.woff") format("woff");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Gilory';
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
font-display: swap;
|
||||
src: url("./Gilroy_Light.woff2") format("woff2"),
|
||||
url("./Gilroy_Light.woff") format("woff");
|
||||
}
|
||||
|
||||
|
||||
@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;
|
||||
}
|
||||
|
||||
|
||||
+52
-14
@@ -1,25 +1,63 @@
|
||||
@import url(./fonts/fonts.css);
|
||||
@import url(./styles/styles.css);
|
||||
@import url(./components/analytics/analytics.css);
|
||||
@import url(./components/animationComponent/animationComponent.css);
|
||||
@import url(./components/cloudSolution/cloudSolution.css);
|
||||
@import url(./components/devices/devices.css);
|
||||
@import url(./components/form/form.css);
|
||||
@import url(./components/header/header.css);
|
||||
@import url(./components/multiplayer/multiplayer.css);
|
||||
@import url(./components/player/player.css);
|
||||
@import url(./components/sliderComponent/sliderComponent.css);
|
||||
@import url(./components/swiper/swiper.css);
|
||||
@import url(./components/timepicker/timepicker.css);
|
||||
|
||||
|
||||
|
||||
body {
|
||||
font-family: "Gilroy";
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 24px;
|
||||
line-height: 100%;
|
||||
/* identical to box height, or 24px */
|
||||
|
||||
/* Landing/White */
|
||||
|
||||
font-family: 'GilroyWebRegular';
|
||||
color: #ebebeb;
|
||||
margin: 0 auto;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Gilroy", sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
width: 1200px;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
background: #0e0e0e;
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
|
||||
monospace;
|
||||
.main {
|
||||
margin: 0 auto;
|
||||
width: 1440px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1919px) {
|
||||
.main {
|
||||
width: 1200px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1279px) {
|
||||
.main {
|
||||
width: 1000px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.main {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
gap: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 639px) {
|
||||
.main {
|
||||
width: 100%;
|
||||
gap: 0;
|
||||
}
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user