From 70700f2c47a3ca11498ae8a148ffd1ccfe8a0d49 Mon Sep 17 00:00:00 2001 From: DmitriyB Date: Mon, 19 Sep 2022 18:16:39 +0500 Subject: [PATCH] analy --- public/Logo_GRAFFinteractive.png | Bin 0 -> 1569 bytes public/index.html | 7 +- src/App.tsx | 32 ++++++--- src/components/Navigaton/navigation.tsx | 12 ++-- src/components/analytics/analytics.css | 8 +-- src/components/analytics/analytics.tsx | 32 ++------- .../animationComponent/animationComponent.css | 68 +++++++++++++++--- .../animationComponent/animationComponent.tsx | 13 ++-- src/components/buttonDemo/buttonDemo.tsx | 2 +- src/components/calendar/arrow_active.svg | Bin 208 -> 292 bytes src/components/calendar/arrow_active1.png | Bin 0 -> 292 bytes src/components/calendar/calendar.tsx | 7 +- src/components/calendarDesktop/calendar.css | 8 ++- .../calendarDesktop/calendarDesktop.tsx | 22 +----- .../calendarMobile/calendarMobile.tsx | 20 +----- .../cloudSolution/cloudSolution.tsx | 4 +- src/components/content/content.tsx | 22 ++++++ .../demonstration/demonstartion.tsx | 46 ++++++------ src/components/demos/demos.tsx | 48 +------------ src/components/devices/devices.css | 6 +- src/components/devices/devices.tsx | 29 ++------ src/components/footer/footer.css | 10 +-- src/components/footer/footer.tsx | 28 +++----- src/components/form/form.tsx | 5 +- src/components/header/header.css | 36 +++++++--- src/components/header/header.tsx | 20 +++--- src/components/main/main.tsx | 1 - src/components/mapAnimation/mapAnimation.tsx | 2 - src/components/multiplayer/multiplayer.tsx | 30 ++------ .../photoComponent/photoComponent.tsx | 23 ++---- src/components/piechart/chart.css | 10 ++- src/components/piechart/piechart.tsx | 8 +-- src/components/player/player.css | 2 +- src/components/player/player.tsx | 21 +----- .../sliderComponent/sliderComponent.tsx | 1 - src/components/swiper/swiper.tsx | 7 +- src/components/timepicker/timepicker.tsx | 34 +++++---- src/index.css | 6 +- src/index.tsx | 1 - src/utils/textEN.js | 14 ++-- 40 files changed, 287 insertions(+), 358 deletions(-) create mode 100644 public/Logo_GRAFFinteractive.png create mode 100644 src/components/calendar/arrow_active1.png create mode 100644 src/components/content/content.tsx diff --git a/public/Logo_GRAFFinteractive.png b/public/Logo_GRAFFinteractive.png new file mode 100644 index 0000000000000000000000000000000000000000..fdb08b32b691cd2d382d8927fafc30d7f4a4e2a3 GIT binary patch literal 1569 zcmV++2HyFJP)lp$1R_TCXGmp4#mH}d7Yzo3e*#3YEJJ@@g})AyD`*I6B&I)O zI4If*qV&>NRqt5*6-3ju$>&ZvB)TqJ|@U@h%! z+zajFWAH-;-6{Ph^6Idn@}QO8gRC8Uc2|mJKK5Q9WfD)tZ{U(31MQ@>;gS&GCKqLG z9-RMq&}B3@X3#OvhSUEc95Ytjco43kAF$DGAsiddRfZmfE4VB~UJD86&*DvCSaAb? zA$%=n} ztwUBlzG-h`p#Q?cIEK`Nm=m#Hece+J-W1)3!>NZ{R=PK_(QiG#NXi8G=H*WL*7-SFOZzI#Fja!)7={EJtU-w^8uppq+uI5`GXSSJWI}@894o2ft^&g^6oR(Xc2>7?q7zOCcmF2 zsYv-TUJk-SFfmN={n2dRKy+nEnP7hyW1mS} z#~;A)+-nZ#`U5zBUSb&Dgy*h}g$K|P(E27%Fb0m-sJwD=XG2*JE2$5B-~*R}(x@U~ zY8M&KcqABvoZ_VLJ=hb1xInj}@?GlgOXOr!re&uV9JArDdS4UGH&yop)w^We&NI{j z?aE|%V&WL#>4YmO$TcOCPo(OT8d*0rb?6Rg^<|okeCb+#4=b#4FEsyxz4FB1nRG%{ z{VmUTN~Uu^US$6$k@pPwonyTXh*6psd%5dp1{L8b6LUn zrKC+P@;H1F3ph-w2IGloT2Jv?X*7m|Z!h3ru^2nZ0@+oDO1YUdYT$T)W`$?o$l<|# z4F^|RkPLTTbfe_H5G{Yuy{ap^%eBxro~f$aC3HDmw41oMSiWnz#QMRx#QeZZ<^5cq zqoTWD&ES;!DkS>$gi*istp@$R3QW7d;ZSgsH6HdG-5@Pt-cs4Zh%(H0@nikp~ibs(B4%Pf7MR!sHClN1#OV4>;@-yIaPiI zn~U5+evdB$8-r(3pB04={|fE>TiyMeiv7Ny;CIpoimvoplRq=-tWgNo8KJISZ zR|(~bq4WKY5@mhv%>*@&l=+az31P~KY4o2z#gWq<(V62 zzk3ARTkd}(nC6R;#eV)E$|fQw5;~XnufRsO8v`xt?)t7B2-CqrhjasAH5@F2Bx22~qG) z>S9Ohvjmjr#720O_NE|rwp6>^yPKlobvKYVaGcO@ogk$&H~gLRmcmE+Vj)Vi>pY6$ zE6883+J;=T$-w&VmRC4Zit&{d%tUGaeJk%*I)a>tQqJF9O2I3k*tH3g@4JgO#q7%| z%HWBI2T3eK`ABiD{C3Z)1{M1xm#J1p_&CiSI@b}}NXc*+ - + - + - 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 e28ad6202086b42333acab2c47959e80ac1728ca..d534e64bdfee87b10821f2f9cbd6223c00f0bf19 100644 GIT binary patch literal 292 zcmeAS@N?(olHy`uVBq!ia0vp^5GZx^prwfgF}}M_)$E)e-c@N{GFaIjv*C{TPL68WHJbf(*Z( zggtTak!6|i;|bGj(bFdG3|Ca@x4o&!zGTX@GWOz)IlE>Rv4=iY>74Ap^$Fj)6Xmyx z*r%$upAb9}uA%hhhOyG;%I1jg|9Ow}TzTeD%~r=`sPrX&bI+dexHZ2dw=mC|cr1Tc jGZx^prwfgF}}M_)$E)e-c@N{GFaIjv*C{TPL68WHJbf(*Z( zggtTak!6|i;|bGj(bFdG3|Ca@x4o&!zGTX@GWOz)IlE>Rv4=iY>74Ap^$Fj)6Xmyx z*r%$upAb9}uA%hhhOyG;%I1jg|9Ow}TzTeD%~r=`sPrX&bI+dexHZ2dw=mC|cr1Tc j = ({ 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 :