DmitriyB/streaming-landing1
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

analy

Browse Source
This commit is contained in:
DmitriyB
2022-09-19 18:16:39 +05:00
parent 9c1ea8b99e
commit 70700f2c47
40 changed files with 287 additions and 358 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/Logo_GRAFFinteractive.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

public/index.html
+4 -3
View File
@@ -3,11 +3,11 @@
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<link rel="icon" href="#" type="image/png" />
<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" />
<link rel="apple-touch-icon" href="#" type="image/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/
@@ -22,7 +22,8 @@
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>
<title>Graff.estate
stream</title>
</head>
src/App.tsx
+24 -8
View File
@@ -22,29 +22,41 @@ export type TObjct = {
export const App: React.FC = ({ }) => {
export const App: React.FC = () => {
const [language, setLanguage] = useState<any>("");
const [text, setText] = useState(textRU);
const [locale, setLocale] = useState('RU')
const savedLanguage = localStorage.getItem('savedLang')
useEffect(() => {
setInitialLanguage()
if (savedLanguage !== null) {
setSavedLanguage()
} else {
setInitialLanguage()
}
}, []);
function setSavedLanguage() {
if (savedLanguage === 'RU') {
setLanguage('RU')
localStorage.setItem("lang", 'RU')
setText(textRU)
} else if (savedLanguage === 'EN') {
setLanguage('EN')
localStorage.setItem("lang", 'EN')
setText(textEN)
}
}
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')
}
}
@@ -52,15 +64,19 @@ export const App: React.FC = ({ }) => {
if (language === 'RU') {
setLanguage(language);
setText(textRU)
localStorage.setItem('savedLang', 'RU');
localStorage.setItem("lang", 'RU')
} else {
setLanguage('EN')
localStorage.setItem("lang", 'EN')
localStorage.setItem("savedLang", 'EN')
setText(textEN)
}
}
AOS.init();
AOS.init({
once: true,
});
return (
<Switch>
<Route path="/" exact>
src/components/Navigaton/navigation.tsx
+5 -7
View File
@@ -6,7 +6,6 @@ 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,
@@ -83,7 +82,6 @@ export const Nav: React.FC<THeader> = ({ menuOpen, language, changeLanguage, tex
name: 'EN'
}]
console.log(language)
function langActive(lang: string, language: string) {
if (lang === language) {
@@ -122,7 +120,7 @@ export const Nav: React.FC<THeader> = ({ menuOpen, language, changeLanguage, tex
</div>
<div className='nav__title_container'>
<h4 className='nav__title'>{text.captionContact}</h4>
<img className='icon_chevron' src={chevron}></img>
<img alt='icon' className='icon_chevron' src={chevron}></img>
</div>
<span className='nav__line'></span>
</motion.div>
@@ -132,11 +130,11 @@ export const Nav: React.FC<THeader> = ({ menuOpen, language, changeLanguage, tex
className='footer__card_2'>
<div className='ellipse__container'>
<div className="main-block__icon_container">
<img src={iconButton} className="main-block__icon"></img>
<img alt='icon' src={iconButton} className="main-block__icon"></img>
</div>
</div>
<div className={'card__write'}>
<img src={write} className='card__icon'></img>
<img alt='icon' src={write} className='card__icon'></img>
<p className='card__caption'>{cardSmall.caption}</p>
</div>
</motion.div>
@@ -145,11 +143,11 @@ export const Nav: React.FC<THeader> = ({ menuOpen, language, changeLanguage, tex
className='footer__card_2'>
<div className='ellipse__container'>
<div className="main-block__icon_container">
<img src={iconButton} className="main-block__icon"></img>
<img alt='icon' src={iconButton} className="main-block__icon"></img>
</div>
</div>
<div className='card__write'>
<img src={phone} className='card__icon'></img>
<img alt='icon' src={phone} className='card__icon'></img>
<p className='card__caption'>{cardSmall1.caption}</p>
</div>
</motion.div>
src/components/analytics/analytics.css
+4 -4
View File
@@ -41,9 +41,7 @@
color: #EBEBEB;
}
.graph__text {
}
.graph__row_2 {
@@ -144,6 +142,8 @@
line-height: 130%;
margin: 0;
text-align: center;
width: 25px;
text-align: left;
}
.graph__bar_2 {
@@ -195,7 +195,7 @@
flex-direction: column;
justify-content: space-between;
gap: 6px;
height: 100%;
height: auto;
}
.legend__point {
@@ -669,4 +669,4 @@
margin-bottom: 40px;
}
}
}
src/components/analytics/analytics.tsx
+4 -28
View File
@@ -1,43 +1,18 @@
import "../../styles/styles.css";
import "./analytics.css";
import iconButton from "../../styles/iconButton.svg"
import "../multiplayer/multiplayer.css";
import { Link } from "react-router-dom";
import { PieChartComp } from "../piechart/piechart";
import { Button } from "../buttonDemo/buttonDemo"
import { Content } from "../content/content";
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;
const { cardLarge, cardLarge1, cardLarge2, cardSmall, cardSmall1, cardSmall2, 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>
<Content text={text}></Content>
<div data-aos="fade-up" data-aos-delay="100" className="graph__container">
<div className="graph__row_1">
<div className="graph__row_item">
@@ -177,5 +152,6 @@ export const Analytics: React.FC<any> = ({ text }) => {
<Button text={text}></Button>
</div>
</div>
)
}
src/components/animationComponent/animationComponent.css
+58 -10
View File
@@ -1,14 +1,13 @@
.animation-container {
position: relative;
overflow: hidden;
height: 90vh;
height: 100vh;
}
.test {
z-index: -1;
top: 2%;
right: 0%;
top: -118.2%;
left: 22%;
width: 100%;
position: absolute;
@@ -24,6 +23,7 @@
}
.title__container {
padding-left: 80px;
z-index: 99;
display: flex;
flex-direction: column;
@@ -32,6 +32,7 @@
}
.title__main {
position: relative;
font-style: normal;
font-weight: 300;
font-size: 96px;
@@ -53,6 +54,7 @@
margin: 0;
background-repeat: repeat;
background-color: transparent;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-background-clip: text;
@@ -107,37 +109,79 @@
margin: 0;
}
.animation__pos {
position: relative;
}
@media screen and (min-width: 1600px) {
.title {
font-size: 6vw;
font-size: 115.2px;
}
.test {
top: -87.2%;
left: 17%;
}
.title__gardient {
font-size: 6vw;
font-size: 115.2px;
}
.title__caption {
font-size: 0.8vw;
font-size: 17px;
width: 424px;
}
}
@media screen and (max-width: 1599px) {
.title__caption {
width: 354px;
}
}
@media screen and (max-width: 1279px) {
.title__container {
padding-left: 56px;
}
.title__caption {
width: 354px;
}
.test {
top: -65.2%;
left: 19%;
}
}
@media screen and (max-width: 1024px) {
.title__container {
padding-top: 170px;
margin-left: 20px;
padding-left: 0;
}
.animation-container {
box-sizing: border-box;
}
.test {
top: 3%;
left: 8%;
}
}
@@ -150,6 +194,10 @@
padding-top: 70px;
}
.title__caption {
width: 100%;
}
.test {
visibility: hidden;
opacity: 0;
@@ -159,9 +207,8 @@
background-image: url(./Map.svg);
background-repeat: no-repeat;
padding: 10px;
background-position: 19%;
background-position-x: 29%;
background-position-y: -56%;
}
.title {
@@ -179,4 +226,5 @@
.title__container {
margin-left: 0;
}
}
src/components/animationComponent/animationComponent.tsx
+6 -7
View File
@@ -2,18 +2,20 @@ 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)
export const AnimationComponent: React.FC<any> = ({ text }) => {
return (
<div>
<div className="animation-container">
<div className="title__container">
<div>
<div className="animation__pos">
<p className="title">Graff.estate </p>
<p className="title__gardient title__gardient_pos">stream</p>
<div className="test">
<MapAnimation></MapAnimation>
</div>
</div>
<span className="title__caption">
{text.titleCaption}
@@ -21,9 +23,6 @@ export const AnimationComponent: React.FC<any> = ({text}) => {
<Button text={text}></Button>
</div>
</div>
<div className="test">
<MapAnimation></MapAnimation>
</div>
</div>
)
}
src/components/buttonDemo/buttonDemo.tsx
+1 -1
View File
@@ -8,7 +8,7 @@ export const Button: React.FC<any> = ({text}) => {
<button className="main-block__button">
{text.button}
<div className="main-block__icon_container">
<img src={iconButton} className="main-block__icon"></img>
<img alt="icon" src={iconButton} className="main-block__icon"></img>
</div>
</button>
</Link>
src/components/calendar/arrow_active.svg
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 208 B

After

Width:  |  Height:  |  Size: 292 B

src/components/calendar/arrow_active1.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 292 B

src/components/calendar/calendar.tsx
+3 -4
View File
@@ -40,12 +40,11 @@ export const Calendar: React.FC<TProps> = ({ open, setOpen, time, onUpdate, isMo
}
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) {
if (currDate.isSameOrBefore(day, "day") && i !== 5 && i !== 6) {
const cellClass = "calendar__cell_active calendar__cell";
return cellClass;
}
@@ -134,11 +133,11 @@ export const Calendar: React.FC<TProps> = ({ open, setOpen, time, onUpdate, isMo
</div>
<div className="appointment__block">
<div>
<img className="point" src={point1}></img>
<img alt="point" className="point" src={point1}></img>
<span className="appointment__caption_active">{text.appointmentTrue}</span>
</div>
<div>
<img className="point" src={point0}></img>
<img alt="point" className="point" src={point0}></img>
<span className="appointment__caption" >{text.appointmentFalse}</span>
</div>
</div>
src/components/calendarDesktop/calendar.css
+5 -3
View File
@@ -3,7 +3,6 @@
font-size: 40px;
}
.calendar__padding {}
.button__arrow_l {
cursor: pointer;
@@ -26,11 +25,11 @@
}
.button__arrow_r:hover {
background-image: url(../calendar/arrow_active.svg);
background-image: url(../calendar/arrow_active1.png);
}
.button__arrow_l:hover {
background-image: url(../calendar/arrow_active.svg);
background-image: url(../calendar/arrow_active1.png);
}
.button__arrow_back {
@@ -346,6 +345,9 @@
}
.weekday__cell {
font-size: 15px;
}
}
src/components/calendarDesktop/calendarDesktop.tsx
+3 -19
View File
@@ -1,13 +1,14 @@
import React from "react";
import "../sliderComponent/sliderComponent.css";
import "./calendar.css";
import moment, { Moment } from "moment";
import { 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";
import { Content } from '../content/content'
export type TProps = {
@@ -36,26 +37,9 @@ export const CalendarDesktop: React.FC<TProps> = ({
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>
<Content text={text}></Content>
<div className="wrapper">
<Calendar
text={text}
src/components/calendarMobile/calendarMobile.tsx
+2 -18
View File
@@ -10,34 +10,18 @@ import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";
import "./calendarMobile.css"
import useScreenSize from 'use-screen-size'
import { Content } from "../content/content";
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>
<Content text={text}></Content>
<Swiper
rewind={true}
centeredSlides={true}
src/components/cloudSolution/cloudSolution.tsx
+1 -3
View File
@@ -1,8 +1,6 @@
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 }) => {
@@ -10,7 +8,7 @@ export const CloudSolution: React.FC<any> = ({ text }) => {
<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>
<img alt='serverImage' className='image' src={serverFrame}></img>
</div>
<div data-aos="fade-up"
data-aos-delay="400" className="main-block__container caption__block">
src/components/content/content.tsx
+22
View File
@@ -0,0 +1,22 @@
import "../../styles/styles.css";
export const Content: React.FC<any> = ({text}) => {
return (
<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>
)
}
src/components/demonstration/demonstartion.tsx
+23 -23
View File
@@ -7,15 +7,33 @@ import building2 from './building2.png'
import iconButton from "./iconButton.svg"
export const Demostration: React.FC = ({ }) => {
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>
<img alt="icon" src={iconButton} className="main-block__icon"></img>
</div>
<div className='demo'>
<img src={building} className='demo_image'></img>
<img alt="building" 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 alt="building" src={iconButton} className="main-block__icon"></img>
</div>
<div className='demo'>
<img alt="building" src={building1} className='demo_image'></img>
<div className='demo_info'>
<div className='title__block'>
<h4 className='title__demo'>ЖК «Тактика»</h4>
@@ -30,28 +48,10 @@ export const Demostration: React.FC = ({ }) => {
</div>
<div className='demos_container'>
<div className="main-block__icon_container demo__icon">
<img src={iconButton} className="main-block__icon"></img>
<img alt="building" 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>
<img alt="building" src={building2} className='demo_image'></img>
<div className='demo_info'>
<div className='title__block'>
<h4 className='title__demo'>ЖК «Тактика»</h4>
src/components/demos/demos.tsx
+3 -45
View File
@@ -1,15 +1,11 @@
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'>
@@ -18,10 +14,10 @@ export const Demos: React.FC<any> = ({ text }) => {
<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>
<img alt='icon' src={iconButton} className="main-block__icon"></img>
</div>
<div className='demo'>
<img src={building1} className='demo_image'></img>
<img alt='buildingImg' src={building1} className='demo_image'></img>
<div className='demo_info'>
<div className='title__block'>
<h4 className='title__demo'>{card.title}</h4>
@@ -34,46 +30,8 @@ export const Demos: React.FC<any> = ({ text }) => {
</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>
)
}
src/components/devices/devices.css
+3 -3
View File
@@ -46,7 +46,6 @@
}
.card__image_type {}
@media screen and (min-width: 1600px) {
.card__image {
@@ -94,7 +93,6 @@
gap: 15px;
}
.card__image_type1 {}
}
@@ -104,7 +102,9 @@
margin-bottom: 120px;
}
.card__name {
font-size: 21px;
}
.card {
box-sizing: border-box;
src/components/devices/devices.tsx
+6 -23
View File
@@ -4,44 +4,27 @@ import "../multiplayer/multiplayer.css";
import touchscreen from "./image.png";
import imac from "./image1.png";
import devicesFrame from './deviceFrame.png'
import iconButton from "../../styles/iconButton.svg";
import { Link } from 'react-router-dom';
import { Button } from "../buttonDemo/buttonDemo"
import { Content } from "../content/content";
export const Devices: React.FC<any> = ({text}) => {
export const Devices: React.FC<any> = ({ text }) => {
return (
<div className="devices__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>
<Content text={text}></Content>
<div className="card__container">
<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>
<img alt="device" src={touchscreen} className="card__image"></img>
</div>
<div data-aos="fade-up" data-aos-delay="300" className="card">
<p className="card__name">Desktop</p>
<img src={imac} className="card__image"></img>
<img alt="device" src={imac} className="card__image"></img>
</div>
<div data-aos="fade-up" data-aos-delay="500" className="card">
<p className="card__name">Mobile</p>
<img src={devicesFrame} className="card__image"></img>
<img alt="device" src={devicesFrame} className="card__image"></img>
</div>
</div>
<div className="main-block__subblock-container">
src/components/footer/footer.css
+2 -8
View File
@@ -14,10 +14,6 @@
padding: 120px 120px;
gap: 186px;
justify-content: space-between;
box-sizing: border-box;
}
.footer__block_copyright_mobile_margin {
@@ -48,11 +44,12 @@
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-image: linear-gradient(to right, #D375FF 0%, #798FFF 45%);
background-size: 100%;
background-repeat: repeat;
background-color: transparent;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
@@ -200,7 +197,6 @@
margin: 0;
}
.footer__card_2 {}
.card__icon {
margin-bottom: 15px;
@@ -374,7 +370,6 @@
}
@media screen and (max-width: 1060px) {
.footer__container {}
.footer__main-block {
display: flex;
@@ -411,7 +406,6 @@
@media screen and (max-width: 639px) {
.footer__container {}
.footer__main-block {
src/components/footer/footer.tsx
+11 -17
View File
@@ -8,13 +8,7 @@ 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
const { cardLarge, cardLarge1, cardSmall, cardSmall1, copyright } = text
return (
<div className="footer__container">
@@ -34,7 +28,7 @@ export const Footer: React.FC<any> = ({ text }) => {
</div>
</div>
<div className='footer__block_copyright'>
<img src={logo} className='footer__logo'></img>
<img alt='logo' src={logo} className='footer__logo'></img>
<div className='copyright__caption'>
<p className='copyright'>{copyright.caption}</p>
<p className='copyright'>
@@ -59,12 +53,12 @@ export const Footer: React.FC<any> = ({ text }) => {
<div className='footer__card_2'>
<div className='ellipse__container'>
<div className="main-block__icon_container">
<img src={iconButton} className="main-block__icon"></img>
<img alt='icon' src={iconButton} className="main-block__icon"></img>
</div>
</div>
<div className='card__write'>
<img src={write} className='card__icon'></img>
<img alt='icon' src={write} className='card__icon'></img>
<p className='card__caption'>{cardSmall.caption}</p>
</div>
</div>
@@ -83,11 +77,11 @@ export const Footer: React.FC<any> = ({ text }) => {
<div className='footer__card_2'>
<div className='ellipse__container'>
<div className="main-block__icon_container">
<img src={iconButton} className="main-block__icon"></img>
<img alt='icon' src={iconButton} className="main-block__icon"></img>
</div>
</div>
<div className='card__write'>
<img src={phone} className='card__icon'></img>
<img alt='icon' src={phone} className='card__icon'></img>
<p className='card__caption'>{cardSmall1.caption}</p>
</div>
</div>
@@ -96,23 +90,23 @@ export const Footer: React.FC<any> = ({ text }) => {
<div className='footer__card_2'>
<div className='ellipse__container'>
<div className="main-block__icon_container">
<img src={iconButton} className="main-block__icon"></img>
<img alt='icon' src={iconButton} className="main-block__icon"></img>
</div>
</div>
<div className='card__write'>
<img src={write} className='card__icon'></img>
<img alt='icon' 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>
<img alt='icon' src={iconButton} className="main-block__icon"></img>
</div>
</div>
<div className='card__write'>
<img src={phone} className='card__icon'></img>
<img alt='icon' src={phone} className='card__icon'></img>
<p className='card__caption'>{cardSmall1.caption}</p>
</div>
@@ -142,7 +136,7 @@ export const Footer: React.FC<any> = ({ text }) => {
</div>
<div className='footer__block_copyright_mobile'>
<img src={logo} className='footer__logo'></img>
<img alt='logo' src={logo} className='footer__logo'></img>
<div className='copyright__caption'>
<p className='copyright'>{copyright.caption}</p>
<p className='copyright'>
src/components/form/form.tsx
+1 -4
View File
@@ -1,6 +1,3 @@
import left from "../calendar/Arrow_Left.svg";
import React, { useEffect, useState } from "react";
import moment from "moment";
import "./form.css";
import "../timepicker/timepicker.css"
import "../../index.css"
@@ -8,7 +5,7 @@ import { TProps } from "../calendarDesktop/calendarDesktop";
import { useSwiper } from 'swiper/react';
export const Form: React.FC<TProps> = ({ time, open, setOpen, onExit, displayForm, setDisplayForm, isMobile, text }) => {
export const Form: React.FC<TProps> = ({ time, open, setOpen, displayForm, setDisplayForm, isMobile, text }) => {
const swiper = useSwiper();
src/components/header/header.css
+26 -10
View File
@@ -1,14 +1,17 @@
.header {
}
.header-container {
display: flex;
padding: 30px 40px;
color: #ffffff;
justify-content: space-between;
align-items: center;
position: relative;
}
.header__buttons_wrapper {
display: flex;
gap: 40px;
align-items: center;
}
.burger__button {
@@ -18,11 +21,11 @@
.header-logo {
width: 31px;
height: 50px;
}
.header-buttons {
display: flex;
gap: 40px;
margin-right: 96px;
}
.header-button {
@@ -35,6 +38,7 @@
border: none;
color: #ffffff;
cursor: pointer;
padding: 0px;
}
.header-lang-button-text:hover {
@@ -49,11 +53,13 @@
.header-lang-button {
position: absolute;
right: 40px;
top: 40px;
overflow: hidden;
display: flex;
flex-direction: column;
gap: 10px;
position: relative;
width: 55px;
padding: 6px 8px 5px 12px;
box-sizing: border-box;
@@ -74,7 +80,7 @@
}
.header-lang-button_active {
height: 100%;
height: 51px;
}
.header-lang-button_active {
@@ -177,8 +183,7 @@
.header-lang-button {
width: 70px;
padding: 7px 15px;
top: 57px;
}
}
@@ -188,12 +193,23 @@
.header-container {
padding: 30px 12px;
}
.header-lang-button {
top: 40px;
right: 12px;
}
}
@media screen and (max-width: 1024px) {
.header-container {
padding: 15px 12px;
}
.header-lang-button {
right: 12px;
top: 26px;
}
}
src/components/header/header.tsx
+10 -10
View File
@@ -1,4 +1,4 @@
import React, {useState } from "react";
import React, { CSSProperties, useState } from "react";
import logo from "./logoIcon.svg";
import chevron from "./chevronIcon.svg";
import "./header.css";
@@ -29,7 +29,6 @@ export const Header: React.FC<THeader> =
}
function handleOpacity() {
console.log(opacity)
setOpacity(true)
}
@@ -39,7 +38,7 @@ export const Header: React.FC<THeader> =
const iconTransform = {
transform: 'rotate(-90deg)'
} as any
} as CSSProperties
const setBackground = opacity && !open as boolean;
@@ -47,15 +46,14 @@ export const Header: React.FC<THeader> =
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 (
@@ -63,10 +61,12 @@ export const Header: React.FC<THeader> =
<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="header__buttons_wrapper">
<button className="header-button">{text.captionContact}</button>
<button className="header-button">{text.captionCompain}</button>
</div>
<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 : {
<img alt="img" src={chevron} className="header-select__icon" style={open ? iconTransform : {
transform: 'rotate(0deg)'
}}></img>
<div className="wrapper__button">
@@ -76,7 +76,7 @@ export const Header: React.FC<THeader> =
) : (<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>
{menuOpen ? <img alt="iconClose" src={iconClose} onClick={openMenu} className='nav__close'></img>
:
<button onClick={setOpacityAndMenu} className="burger__button">
<span className="line__burger"></span>
src/components/main/main.tsx
-1
View File
@@ -39,7 +39,6 @@ export const Main: React.FC<any> = ({ text, locale }) => {
}, [locale])
console.log(time)
const [next, setNext] = useState({
calendar: true,
timePicker: false,
src/components/mapAnimation/mapAnimation.tsx
-2
View File
@@ -211,7 +211,6 @@ export const MapAnimation:React.FC = React.memo(() => {
}
function removeCaption(target?: string) {
console.log('remove')
let a = anime({
// width: 40,
//сейчас анимация удаления подсказки работает как просто смена opacity, иначе если делать именно анимацией рисования удаление, есть множество багов
@@ -240,7 +239,6 @@ export const MapAnimation:React.FC = React.memo(() => {
randNumber = Math.floor(Math.random() * lineClasses.length);
}
lastNmber = randNumber;
console.log(randNumber)
showLines.current[lineClasses[randNumber]] = !showLines.current[lineClasses[randNumber]];
if(showLines.current[lineClasses[randNumber]]) {
animation(lineClasses[randNumber])
src/components/multiplayer/multiplayer.tsx
+6 -24
View File
@@ -4,10 +4,8 @@ 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"
import { Content } from "../content/content";
export const Multiplayer: React.FC<any> = ({text}) => {
return (
@@ -16,28 +14,12 @@ export const Multiplayer: React.FC<any> = ({text}) => {
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_small">
{text.mainBlockCaptionColor}
</p>
</div>
<p className="main-block__caption multiplayer__caption">
{text.mainBlockCaption}
</p>
</div>
<Content text={text}></Content>
<div className="multiplayer__photo-container">
<img src={photo} className="multiplayer__image" />
<img src={photo1} className="multiplayer__image" />
<img src={photo2} className="multiplayer__image" />
<img src={photo3} className="multiplayer__image" />
<img alt="device" src={photo} className="multiplayer__image" />
<img alt="device" src={photo1} className="multiplayer__image" />
<img alt="device" src={photo2} className="multiplayer__image" />
<img alt="device" src={photo3} className="multiplayer__image" />
</div>
<div className="main-block__subblock-container">
<div className="main-block_subblock">
src/components/photoComponent/photoComponent.tsx
+4 -19
View File
@@ -3,32 +3,17 @@ import '../player/player.css'
import './photoComponent.css'
import photo1 from './Photo1.png'
import photo2 from './Photo2.png'
import { Content } from '../content/content'
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>
<Content text={text}></Content>
<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>
<img alt='photoImg' data-aos="fade-up" data-aos-delay="100" src={photo1} className='photo__container_image'></img>
<img alt='photoImg' data-aos="fade-up" data-aos-delay="200" src={photo2} className='photo__container_image'></img>
</div>
<div className="main-block_subblock">
src/components/piechart/chart.css
+8 -2
View File
@@ -38,8 +38,14 @@
@media screen and (max-width: 690px) {
.chart {
width: 100%;
width: 40%;
}
}
@media screen and (max-width: 450px) {
.chart {
width: 100%;
}
}
src/components/piechart/piechart.tsx
+1 -7
View File
@@ -1,12 +1,11 @@
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 = ({ }) => {
export const PieChartComp: React.FC = () => {
const dataMock = [
{ title: 'One', value: 36.27, color: '#7A31C4' },
{ title: 'Two', value: 6.22, color: '#FB57F4' },
@@ -25,11 +24,6 @@ export const PieChartComp: React.FC = ({ }) => {
fill: '#EBEBEB',
};
const size = useScreenSize()
const style = size.width >= 900 ? false : true;
src/components/player/player.css
+1 -1
View File
@@ -52,7 +52,7 @@
@media screen and (max-width: 639px) {
.player__container {
padding: 80px 10px 40px;
padding: 60px 10px 40px;
margin-bottom: 40px;
}
src/components/player/player.tsx
+3 -18
View File
@@ -1,32 +1,17 @@
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 { Content } from "../content/content";
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>
<Content text={text}></Content>
<div className="video__container">
<img className="fake-player" src={video}></img>
<img alt="player" className="fake-player" src={video}></img>
</div>
<div className="main-block__subblock-container">
<div className="main-block_subblock">
src/components/sliderComponent/sliderComponent.tsx
-1
View File
@@ -2,7 +2,6 @@ import React from "react";
import "./sliderComponent.css";
import "../../styles/styles.css"
import SwiperCentred from "../swiper/swiper";
import { TText } from "../main/main";
export const SliderComponent: React.FC<any> = React.memo(({ text }) => {
return (
src/components/swiper/swiper.tsx
+6 -1
View File
@@ -16,7 +16,6 @@ import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";
import '../calendar/calendar'
import { text } from "stream/consumers";
type propsTypes = {
slidesPerView: string;
@@ -85,6 +84,7 @@ export default function SwiperCentred(props: propsTypes) {
data-caption={props.text.subtitle}
className={isActive ? "image__slider_active" : "image__slider"}
src={img1}
alt='slide'
/>
)}
</SwiperSlide>
@@ -95,6 +95,8 @@ export default function SwiperCentred(props: propsTypes) {
data-caption={props.text.subtitle1}
className={isActive ? "image__slider_active" : "image__slider"}
src={img}
alt='slide'
/>
)}
</SwiperSlide>
@@ -105,6 +107,7 @@ export default function SwiperCentred(props: propsTypes) {
data-caption={props.text.subtitle2}
className={isActive ? "image__slider_active" : "image__slider"}
src={img2}
alt='slide'
/>
)}
</SwiperSlide>
@@ -115,6 +118,8 @@ export default function SwiperCentred(props: propsTypes) {
data-caption={props.text.subtitle3}
className={isActive ? "image__slider_active" : "image__slider"}
src={img3}
alt='slide'
/>
)}
</SwiperSlide>
src/components/timepicker/timepicker.tsx
+21 -13
View File
@@ -1,13 +1,11 @@
import left from "../calendar/Arrow_Left.svg";
import { useEffect, useState } from "react";
import moment, { Moment } from "moment";
import { Moment } from "moment";
import "moment/locale/ru";
import "./timepicker.css";
import "../calendarDesktop/calendar.css";
import point0 from "../calendar/Ellipse0.svg";
import point1 from "../calendar/Ellipse1.svg";
import { TProps } from "../calendarDesktop/calendarDesktop";
import useScreenSize from 'use-screen-size'
import { useSwiper } from 'swiper/react';
@@ -41,14 +39,24 @@ export const Timepicker: React.FC<TProps> = ({
}, [time]);
function updateTime(time: Moment) {
onUpdate(time);
setOpen({
calendar: false,
timePicker: false,
form: true,
confirm: false,
});
swiper.slideNext()
if (isMobile) {
onUpdate(time);
setOpen({
calendar: false,
timePicker: false,
form: true,
confirm: false,
});
swiper.slideNext()
} else {
setOpen({
calendar: false,
timePicker: false,
form: true,
confirm: false,
});
onUpdate(time);
}
}
@@ -103,11 +111,11 @@ export const Timepicker: React.FC<TProps> = ({
</div>
<div className="appointment__block appointment__block_time">
<div>
<img className="point" src={point1}></img>
<img alt="point" className="point" src={point1}></img>
<span className="appointment__caption_active">{text.appointmentTrue}</span>
</div>
<div>
<img className="point" src={point0}></img>
<img alt="point" className="point" src={point0}></img>
<span>{text.appointmentFalse}</span>
</div>
</div>
src/index.css
+3 -3
View File
@@ -28,13 +28,13 @@ body {
.main {
margin: 0 auto;
width: 1440px;
width: 1200px;
box-sizing: border-box;
}
@media screen and (max-width: 1919px) {
@media screen and (min-width: 1600px) {
.main {
width: 1200px;
width: 1440px;
}
}
src/index.tsx
-1
View File
@@ -1,4 +1,3 @@
import React, {useState, useEffect} from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
src/utils/textEN.js
+7 -7
View File
@@ -44,7 +44,7 @@ const textEN = {
button: 'Demoversion'
},
devices: {
mainBlockCaptionColor: 'is available on every device.',
mainBlockCaptionColor: 'is available on any device.',
mainBlockCaption: "The application easily adapts to any screen size. Our solution looks good on both mobile or large touchscreen in a developer's sales department.",
button: 'Demoversion'
},
@@ -52,7 +52,7 @@ const textEN = {
photoComponent: {
mainBlockCaptionColor: "already works in the sales departments of the developer",
mainBlockCaption: 'To organize an interactive presentation of a residential complex, the developer does not need to buy expensive equipment and maintain its performance.',
mainBlockSubblock: 'In the sales office, It is enough to place a touch table with Internet access .',
mainBlockSubblock: 'In the sales office, It is enough to place a touch table with Internet access.',
},
player: {
mainBlockCaptionColor: "allows you to transfer an impressive level of graphics to the user's device",
@@ -62,7 +62,7 @@ const textEN = {
},
analytics: {
mainBlockCaptionColor: 'collects data about the user and their behavior.',
mainBlockCaptionColor: 'collects data about the users and their behavior.',
mainBlockCaption: "The program's internal analytics system collects information about the user's behavior and prepare an analytical report that contains necessary metrics about user's behavior and manager's efficiency",
cardLarge: {
title: 'Converting managers to bookings',
@@ -111,10 +111,10 @@ const textEN = {
demos: {
title: 'Available demonstrations',
card: {
title: 'ЖК «Айвазовский»',
subTitle: 'Россия, Тюмень.',
caption: 'Новый жилой район располагающийся в живописном месте на берегу Туры в центральной части Тюмени. ',
caption1: 'Лауреат престижной премии Urban Awards 2019 в номинации «Лучший строящийся региональный жилой комплекс бизнес-класса».',
title: 'RC «Aivazovsky»',
subTitle: 'Russia, Tyumen.',
caption: 'A new residential area located in a picturesque place on the banks of the Tura in the central part of Tyumen.',
caption1: 'Winner of the prestigious Urban Awards 2019 in the nomination "Best regional business class residential complex under construction".',
},
card1: {
title: 'ЖК «Машаров»',