diff --git a/public/Logo_GRAFFinteractive.png b/public/Logo_GRAFFinteractive.png new file mode 100644 index 0000000..fdb08b3 Binary files /dev/null and b/public/Logo_GRAFFinteractive.png differ diff --git a/public/index.html b/public/index.html index c4339c2..ae358af 100644 --- a/public/index.html +++ b/public/index.html @@ -3,11 +3,11 @@ - + - + - React App + Graff.estate + stream diff --git a/src/App.tsx b/src/App.tsx index 9b58d37..15b98c7 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -22,29 +22,41 @@ export type TObjct = { -export const App: React.FC = ({ }) => { +export const App: React.FC = () => { const [language, setLanguage] = useState(""); 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 ( diff --git a/src/components/Navigaton/navigation.tsx b/src/components/Navigaton/navigation.tsx index 2b01e2e..c3165a5 100644 --- a/src/components/Navigaton/navigation.tsx +++ b/src/components/Navigaton/navigation.tsx @@ -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 = ({ 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 = ({ menuOpen, language, changeLanguage, tex

{text.captionContact}

- + icon
@@ -132,11 +130,11 @@ export const Nav: React.FC = ({ menuOpen, language, changeLanguage, tex className='footer__card_2'>
- + icon
- + icon

{cardSmall.caption}

@@ -145,11 +143,11 @@ export const Nav: React.FC = ({ menuOpen, language, changeLanguage, tex className='footer__card_2'>
- + icon
- + icon

{cardSmall1.caption}

diff --git a/src/components/analytics/analytics.css b/src/components/analytics/analytics.css index dfc15fa..4083607 100644 --- a/src/components/analytics/analytics.css +++ b/src/components/analytics/analytics.css @@ -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; } -} \ No newline at end of file +} diff --git a/src/components/analytics/analytics.tsx b/src/components/analytics/analytics.tsx index 04eb7e0..a47b151 100644 --- a/src/components/analytics/analytics.tsx +++ b/src/components/analytics/analytics.tsx @@ -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 = ({ 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 (
-
-
-

- Graff.estate stream{" "} -

-

- {text.mainBlockCaptionColor} -

-
-

- {text.mainBlockCaption} -

-
+
@@ -177,5 +152,6 @@ export const Analytics: React.FC = ({ text }) => {
+ ) } \ No newline at end of file diff --git a/src/components/animationComponent/animationComponent.css b/src/components/animationComponent/animationComponent.css index 3f47a03..5b4e5ff 100644 --- a/src/components/animationComponent/animationComponent.css +++ b/src/components/animationComponent/animationComponent.css @@ -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; } + } \ No newline at end of file diff --git a/src/components/animationComponent/animationComponent.tsx b/src/components/animationComponent/animationComponent.tsx index 0035a0e..fa89eb0 100644 --- a/src/components/animationComponent/animationComponent.tsx +++ b/src/components/animationComponent/animationComponent.tsx @@ -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 = ({text}) => { - console.log(text) +export const AnimationComponent: React.FC = ({ text }) => { return (
-
+

Graff.estate

stream

+
+ +
+
{text.titleCaption} @@ -21,9 +23,6 @@ export const AnimationComponent: React.FC = ({text}) => {
-
- -
) } \ No newline at end of file diff --git a/src/components/buttonDemo/buttonDemo.tsx b/src/components/buttonDemo/buttonDemo.tsx index d6ba9ad..6b2c6f8 100644 --- a/src/components/buttonDemo/buttonDemo.tsx +++ b/src/components/buttonDemo/buttonDemo.tsx @@ -8,7 +8,7 @@ export const Button: React.FC = ({text}) => { diff --git a/src/components/calendar/arrow_active.svg b/src/components/calendar/arrow_active.svg index e28ad62..d534e64 100644 Binary files a/src/components/calendar/arrow_active.svg and b/src/components/calendar/arrow_active.svg differ diff --git a/src/components/calendar/arrow_active1.png b/src/components/calendar/arrow_active1.png new file mode 100644 index 0000000..d534e64 Binary files /dev/null and b/src/components/calendar/arrow_active1.png differ diff --git a/src/components/calendar/calendar.tsx b/src/components/calendar/calendar.tsx index b2e69a0..258b2da 100644 --- a/src/components/calendar/calendar.tsx +++ b/src/components/calendar/calendar.tsx @@ -40,12 +40,11 @@ export const Calendar: React.FC = ({ 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 = ({ open, setOpen, time, onUpdate, isMo
- + point {text.appointmentTrue}
- + point {text.appointmentFalse}
diff --git a/src/components/calendarDesktop/calendar.css b/src/components/calendarDesktop/calendar.css index 4d5861c..3b378f3 100644 --- a/src/components/calendarDesktop/calendar.css +++ b/src/components/calendarDesktop/calendar.css @@ -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; + } } diff --git a/src/components/calendarDesktop/calendarDesktop.tsx b/src/components/calendarDesktop/calendarDesktop.tsx index 6788e75..596bf05 100644 --- a/src/components/calendarDesktop/calendarDesktop.tsx +++ b/src/components/calendarDesktop/calendarDesktop.tsx @@ -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 = ({ locale }) => { - console.log(isMobile, 'mobile') - return (
-
-
-

- Graff.estate stream{" "} -

-

- {text.title} -

-
-

- {text.mainBlockCaptionColor} -

-

- {text.mainBlockCaption} -

-
+
= ({ setDisplayForm, displayForm, open, setOpen, onUpdate, time, onExit, isMobile, text, locale }) => { - const size = useScreenSize() return (
-
-
-

- Graff.estate stream{" "} -

-

- {text.title} -

-
-

- {text.mainBlockCaptionColor} -

-

- {text.mainBlockCaption} -

-
+ = ({ text }) => { @@ -10,7 +8,7 @@ export const CloudSolution: React.FC = ({ text }) => {
- + serverImage
diff --git a/src/components/content/content.tsx b/src/components/content/content.tsx new file mode 100644 index 0000000..d69dfab --- /dev/null +++ b/src/components/content/content.tsx @@ -0,0 +1,22 @@ +import "../../styles/styles.css"; + +export const Content: React.FC = ({text}) => { + return ( +
+
+

+ Graff.estate stream{" "} +

+

+ {text.mainBlockCaptionColor} +

+
+

+ {text.mainBlockCaption} +

+
+ ) + +} \ No newline at end of file diff --git a/src/components/demonstration/demonstartion.tsx b/src/components/demonstration/demonstartion.tsx index b25cfbc..b666981 100644 --- a/src/components/demonstration/demonstartion.tsx +++ b/src/components/demonstration/demonstartion.tsx @@ -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 (
- + icon
- + building +
+
+

ЖК «Тактика»

+

Россия, Екатеринбург.

+
+
+

Жилой квартал класса комфорт плюс на ВИЗе, в квадрате улиц Татищева-Венгерских Коммунаров-Викулова.

+

Рядом Верх-Исетский пруд, по Татищева за 10 минут можно добраться до центра.

+
+
+
+
+
+
+ building +
+
+ building

ЖК «Тактика»

@@ -30,28 +48,10 @@ export const Demostration: React.FC = ({ }) => {
- + building
- -
-
-

ЖК «Тактика»

-

Россия, Екатеринбург.

-
-
-

Жилой квартал класса комфорт плюс на ВИЗе, в квадрате улиц Татищева-Венгерских Коммунаров-Викулова.

-

Рядом Верх-Исетский пруд, по Татищева за 10 минут можно добраться до центра.

-
-
-
-
-
-
- -
-
- + building

ЖК «Тактика»

diff --git a/src/components/demos/demos.tsx b/src/components/demos/demos.tsx index 0c7ce4e..500a6ba 100644 --- a/src/components/demos/demos.tsx +++ b/src/components/demos/demos.tsx @@ -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 = ({ text }) => { const { card } = text; - const { card1 } = text; - const { card2 } = text; return (

@@ -18,10 +14,10 @@ export const Demos: React.FC = ({ text }) => {
- + icon
- + buildingImg

{card.title}

@@ -34,46 +30,8 @@ export const Demos: React.FC = ({ text }) => {
-
-
- -
-
- -
-
-

{card1.title}

-

{card1.subTitle}

-
-
-

{card1.caption}

-
-
-
-
-
-
- -
-
- -
-
-

{card2.title}

-

{card2.subTitle}

-
-
-

{card2.caption}

-

{card2.caption1}

-
-
-
-
- -
+ ) } \ No newline at end of file diff --git a/src/components/devices/devices.css b/src/components/devices/devices.css index 54c6c65..2959a6a 100644 --- a/src/components/devices/devices.css +++ b/src/components/devices/devices.css @@ -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; diff --git a/src/components/devices/devices.tsx b/src/components/devices/devices.tsx index 72b2e6d..24197dd 100644 --- a/src/components/devices/devices.tsx +++ b/src/components/devices/devices.tsx @@ -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 = ({text}) => { +export const Devices: React.FC = ({ text }) => { return (
-
-
-

- Graff.estate stream{" "} -

-

- {text.mainBlockCaptionColor} -

-
-

- {text.mainBlockCaption} -

-
+

Interactive display

- + device

Desktop

- + device

Mobile

- + device
diff --git a/src/components/footer/footer.css b/src/components/footer/footer.css index 971874f..9a894c6 100644 --- a/src/components/footer/footer.css +++ b/src/components/footer/footer.css @@ -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 { diff --git a/src/components/footer/footer.tsx b/src/components/footer/footer.tsx index 89ef2ff..5ab6ca1 100644 --- a/src/components/footer/footer.tsx +++ b/src/components/footer/footer.tsx @@ -8,13 +8,7 @@ import "../../styles/styles.css" export const Footer: React.FC = ({ text }) => { - const { cardLarge } = text - const { cardLarge1 } = text - const { cardSmall } = text - const { cardSmall1 } = text - const { copyright } = text - - + const { cardLarge, cardLarge1, cardSmall, cardSmall1, copyright } = text return (
@@ -34,7 +28,7 @@ export const Footer: React.FC = ({ text }) => {
- + logo

{copyright.caption}

@@ -59,12 +53,12 @@ export const Footer: React.FC = ({ text }) => {

- + icon
- + icon

{cardSmall.caption}

@@ -83,11 +77,11 @@ export const Footer: React.FC = ({ text }) => {
- + icon
- + icon

{cardSmall1.caption}

@@ -96,23 +90,23 @@ export const Footer: React.FC = ({ text }) => {
- + icon
- + icon

{cardSmall.caption}

- + icon
- + icon

{cardSmall1.caption}

@@ -142,7 +136,7 @@ export const Footer: React.FC = ({ text }) => {
- + logo

{copyright.caption}

diff --git a/src/components/form/form.tsx b/src/components/form/form.tsx index 31b762d..eb2b0c5 100644 --- a/src/components/form/form.tsx +++ b/src/components/form/form.tsx @@ -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 = ({ time, open, setOpen, onExit, displayForm, setDisplayForm, isMobile, text }) => { +export const Form: React.FC = ({ time, open, setOpen, displayForm, setDisplayForm, isMobile, text }) => { const swiper = useSwiper(); diff --git a/src/components/header/header.css b/src/components/header/header.css index c3919df..c4c2e46 100644 --- a/src/components/header/header.css +++ b/src/components/header/header.css @@ -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; + } } diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx index 949fd04..f7def46 100644 --- a/src/components/header/header.tsx +++ b/src/components/header/header.tsx @@ -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 = } function handleOpacity() { - console.log(opacity) setOpacity(true) } @@ -39,7 +38,7 @@ export const Header: React.FC = const iconTransform = { transform: 'rotate(-90deg)' - } as any + } as CSSProperties const setBackground = opacity && !open as boolean; @@ -47,15 +46,14 @@ export const Header: React.FC = 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 =

company-logo
- - +
+ + +
- img
@@ -76,7 +76,7 @@ export const Header: React.FC = ) : ()}
- {menuOpen ? + {menuOpen ? iconClose :