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

pravki..

Browse Source
This commit is contained in:
VyacheslavShtyrlin
2022-09-29 14:36:06 +05:00
parent 97f86367dd
commit 1a76cfb939
25 changed files with 1496 additions and 2127 deletions
Download Patch File Download Diff File Expand all files Collapse all files
build.rar
BIN
View File
Binary file not shown.
public/index.html
+2 -1
View File
@@ -6,8 +6,9 @@
<link rel="icon" href="./Logo_GRAFFinteractive.png" 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="./Logo_GRAFFinteractive.png" type="image/png" />
<meta name="Graff.estate" content="Технология удаленной демонстрации жилого комплекса." />
<!--
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/
src/components/Navigaton/navigation.css
+70 -68
View File
@@ -1,112 +1,114 @@
.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;
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;
cursor: pointer;
object-fit: cover;
width: 24px;
}
.button__container {
}
.nav__header {
display: flex;
flex-direction: column;
gap: 42px;
display: flex;
flex-direction: column;
gap: 42px;
}
.logo {
width: 31px;
height: 50px;
width: 31px;
height: 50px;
}
.button__nav_container {
margin-top: 28px;
padding: 1px;
display: flex;
gap: 20px;
align-items: center;
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;
appearance: none;
background-color: transparent;
color: #ebebeb;
margin: 0;
text-align: left;
border: none;
height: 13px;
-webkit-appearance: none;
padding: 0;
cursor: pointer;
cursor: pointer;
}
.language__container {
border-bottom: 1px solid transparent;
font-style: normal;
font-weight: 500;
font-size: 12px;
line-height: 130%;
box-sizing: border-box;
border-bottom: 1px solid transparent;
}
.language__container_active {
box-sizing: border-box;
height: 20px;
border-bottom: 1px solid #EBEBEB;
font-style: normal;
font-weight: 500;
font-size: 12px;
line-height: 130%;
box-sizing: border-box;
border-bottom: 1px solid #ebebeb;
}
.nav__button_active {
border-bottom: 1px solid #EBEBEB;
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;
text-decoration: none;
font-style: normal;
font-weight: 500;
font-size: 24px;
line-height: 100%;
/* identical to box height, or 24px */
color: #ffffff;
margin: 0;
text-decoration: none;
}
.nav__line {
background-color: #454545;
width: 100%;
height: 1px;
margin-bottom: 40px;
background-color: #454545;
width: 100%;
height: 1px;
margin-bottom: 40px;
}
.nav__title_container {
display: flex;
gap: 24px;
display: flex;
gap: 24px;
}
.icon_chevron {
width: 20px;
width: 20px;
}
.nav__buttons {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 50px;
}
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 50px;
}
src/components/animationComponent/Map.svg
+1240 -1857
View File
File diff suppressed because it is too large Load Diff
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 217 KiB

After

Width:  |  Height:  |  Size: 155 KiB

src/components/animationComponent/animationComponent.css
+15 -6
View File
@@ -1,6 +1,6 @@
.animation-container {
overflow: hidden;
height: 100vh;
height: 900px;
}
@@ -149,6 +149,7 @@
}
@media screen and (max-width: 1279px) {
.title__container {
padding-left: 56px;
}
@@ -188,7 +189,8 @@
@media screen and (max-width: 639px) {
.animation-container {
}
.title__container {
padding-top: 70px;
@@ -203,23 +205,30 @@
opacity: 0;
}
.title__caption {
font-size: 3.1vw;
width: 80%;
}
.animation-container {
height: 100vh;
background-image: url(./Map.svg);
background-repeat: no-repeat;
padding: 10px;
background-position-x: 29%;
background-position-y: -56%;
background-repeat: no-repeat;
background-position: 1px 159px;
background-size: contain;
}
.title {
font-weight: 300;
font-size: 54px;
font-size: 15vw;
line-height: 80%;
}
.title__gardient {
font-weight: 300;
font-size: 54px;
font-size: 15vw;
line-height: 80%;
}
src/components/calendar/calendar.tsx
+1 -1
View File
@@ -86,7 +86,7 @@ export const Calendar: React.FC<TProps> = ({ open, setOpen, time, onUpdate, isMo
}
return (<div data-aos="fade-up" data-aos-delay="100" className='calendar'>
return (<div data-aos="fade-up" className='calendar'>
<div className={open.calendar ? 'opacity_active' : 'opacity'}>
<div className="calendar__header">
<span className="calendar__caption calendar__caption_calendar">
src/components/calendarDesktop/calendar.css
+14 -14
View File
@@ -34,15 +34,17 @@
.button__arrow_back {
cursor: pointer;
background-image: url(./Arrow_Left.svg);
background-image: url(../calendar/chevron.svg);
background-repeat: no-repeat;
background-position: center;
height: 14px;
width: 25px;
height: 24px;
width: 24px;
transform: rotate(-180deg);
}
.button__arrow_back:hover {
background-image: url(../calendar/arrow_active.svg);
background-color: rgba(86, 126, 206, 0.2);
border-radius: 8px;
}
.button__chevron_l {
@@ -90,7 +92,7 @@
display: flex;
flex-direction: row;
gap: 24px;
margin-top: 16px;
margin-top: 20px;
font-style: normal;
font-weight: 500;
font-size: 12px;
@@ -199,10 +201,11 @@
font-weight: 500;
font-size: 14px;
line-height: 150%;
height: 25px;
/* identical to box height, or 21px */
letter-spacing: 0.02em;
text-transform: uppercase;
text-transform: capitalize;
/* or 14px */
}
@@ -218,8 +221,7 @@
justify-content: center;
border-radius: 4px;
gap: 2px;
margin-bottom: 4px;
background-color: transparent;
}
@@ -240,7 +242,7 @@
line-height: 140%;
cursor: pointer;
padding: 11px 5px;
box-sizing: border-box;
height: 21px;
transition: all 0.3s ease;
/* identical to box height, or 29px */
}
@@ -267,8 +269,8 @@
font-style: normal;
font-weight: 400;
font-size: 18px;
height: 21px;
line-height: 140%;
height: 18px;
padding: 11px 5px;
color: #ebebeb;
/* identical to box height, or 29px */
@@ -301,7 +303,7 @@
.calendar__cell {
padding: 13px 6px;
font-size: 22px;
font-size: 20px;
}
.calendar__container {
@@ -319,7 +321,7 @@
}
.weekday__cell {
font-size: 22px;
font-size: 20px;
padding: 13px 6px;
}
}
@@ -394,10 +396,8 @@
}
.calendar {
height: 420px;
width: 100%;
padding: 24px;
}
.calendar__container {
src/components/calendarDesktop/calendarDesktop.tsx
+1
View File
@@ -36,6 +36,7 @@ export const CalendarDesktop: React.FC<TProps> = ({
text,
locale
}) => {
console.log(text, 'here2')
return (
<div className="calendar__container">
src/components/cloudSolution/cloudSolution.tsx
+1 -1
View File
@@ -17,7 +17,7 @@ export const CloudSolution: React.FC<any> = ({ text }) => {
Graff.estate stream –
</p>
<p className=" main-block__title_gardient_small width cloud__title">
{text.mainBlockCaptionColor}
{text.title}
</p>
</div>
<p className="main-block__caption cloud__caption">
src/components/content/content.tsx
+9 -9
View File
@@ -1,18 +1,18 @@
import "../../styles/styles.css";
export const Content: React.FC<any> = ({text}) => {
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__title_small">
Graff.estate stream{" "}
<p className="main-block__title_gardient_small">{text.title}</p>
</p>
{text.mainBlockCaptionColor ? <p className=" main-block__caption_color">
{text.mainBlockCaptionColor}
</p>
: <></>}
<p className="main-block__caption multiplayer__caption">
{text.mainBlockCaption}
</p>
src/components/devices/devices.css
+30 -43
View File
@@ -15,15 +15,13 @@
position: relative;
display: flex;
flex-direction: column;
height: 380px;
padding: 32px;
background: #141414;
border-radius: 16px;
gap: 10px;
gap: 20px;
}
.card__name {
margin: 0;
font-style: normal;
@@ -40,19 +38,29 @@
}
.card__image {
width: 292px;
height: 271px;
object-fit: contain;
width: 62%;
height: 79%;
position: absolute;
top: 14%;
right: 16%;
}
.card__image_m {
width: 85%;
height: 85%;
position: absolute;
top: 8%;
right: 5%;
}
.card__image_l {
width: 76%;
height: 70%;
top: 24%;
position: absolute;
}
@media screen and (min-width: 1600px) {
.card__image {
width: 350px;
height: 325px;
}
.card__name {
font-size: 28.8px;
}
@@ -68,11 +76,9 @@
.devices__container {
margin-bottom: 192px;
}
}
@media screen and (max-width: 1279px) {
.devices__container {
padding-left: 30px;
@@ -82,20 +88,14 @@
.card {
padding: 24px;
}
.card__image {
width: 240px;
height: 318px;
}
.card__container {
gap: 15px;
}
}
@media screen and (max-width: 1024px) {
.devices__container {
padding: 0 20px 0;
@@ -113,13 +113,6 @@
aspect-ratio: 1/1;
padding: 32px;
}
.card__image {
width: 100%;
height: 222px;
}
}
@media screen and (max-width: 750px) {
@@ -127,35 +120,29 @@
grid-template-columns: 1fr;
margin-bottom: 60px;
}
.card__image {
width: 90%;
height: 90%;
margin: 0 auto;
.card__name {
font-size: 7.5vw;
}
}
@media screen and (max-width: 639px) {
.devices__container {
padding: 60px 10px 0px;
margin-bottom: 0;
}
.card__name {
font-size: 6.5vw;
}
.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;
}
}
}
src/components/devices/devices.tsx
+2 -2
View File
@@ -16,7 +16,7 @@ export const Devices: React.FC<any> = ({ text }) => {
<div className="card__container">
<div data-aos="fade-up" data-aos-delay="100" className="card">
<p className="card__name">Interactive display</p>
<img alt="device" src={touchscreen} className="card__image"></img>
<img alt="device" src={touchscreen} className="card__image_l"></img>
</div>
<div data-aos="fade-up" data-aos-delay="300" className="card">
<p className="card__name">Desktop</p>
@@ -24,7 +24,7 @@ export const Devices: React.FC<any> = ({ text }) => {
</div>
<div data-aos="fade-up" data-aos-delay="500" className="card">
<p className="card__name">Mobile</p>
<img alt="device" src={devicesFrame} className="card__image"></img>
<img alt="device" src={devicesFrame} className="card__image_m"></img>
</div>
</div>
<div className="main-block__subblock-container">
src/components/form/form.css
+4 -1
View File
@@ -78,7 +78,7 @@
box-sizing: border-box;
border: none;
transition: background-color ease-in 0.5s;
transition: opacity ease-in 0.5s;
}
.button__submit_disabled {
@@ -87,6 +87,9 @@
border: none;
cursor: default;
transition: background-color ease-in 0.5s;
opacity: 0.5;
transition: opacity ease-in 0.5s;
}
src/components/form/form.tsx
+2 -2
View File
@@ -53,7 +53,7 @@ export const Form: React.FC<TProps> = ({ time, open, setOpen, displayForm, setDi
return (
<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 data-aos="fade-up" 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">
@@ -61,7 +61,7 @@ export const Form: React.FC<TProps> = ({ time, open, setOpen, displayForm, setDi
<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 className="date date_time">{!open.form ? '' : time.format("DD MMM, HH:mm")}</div>
</div>
<div className="form__block">
<div>
src/components/header/header.css
+39 -38
View File
@@ -1,4 +1,3 @@
.header-container {
display: flex;
padding: 30px 40px;
@@ -21,7 +20,6 @@
.header-logo {
width: 31px;
height: 50px;
}
.header-buttons {
@@ -45,15 +43,13 @@
.header-lang-button-text:hover {
background: rgba(235, 235, 235, 0.2);
}
.wrapper__button {
margin: 0;
height: 15px;
}
.header-lang-button {
position: absolute;
right: 40px;
@@ -62,19 +58,21 @@
display: flex;
flex-direction: column;
gap: 10px;
width: 55px;
padding: 6px 8px 5px 12px;
width: 58px;
padding: 5px 12px;
box-sizing: border-box;
height: 29px;
height: 31px;
justify-content: space-between;
box-sizing: border-box;
line-height: 13px;
background-color: transparent;
border: 2px solid #ebebeb;
border: 1.2px solid #ebebeb;
border-radius: 12px;
transition: height ease-in 0.5s;
transition: height ease-in 0.3s;
font-style: normal;
font-weight: 500;
font-size: 15px;
line-height: 130%;
}
.header-lang-button_disabled {
@@ -82,7 +80,7 @@
}
.header-lang-button_active {
height: 51px;
height: 53px;
}
.header-lang-button_active {
@@ -90,7 +88,6 @@
}
.header-lang-button-text {
width: 100%;
appearance: none;
background-color: transparent;
@@ -99,23 +96,40 @@
text-align: left;
margin: 0;
border: none;
height: 13px;
height: 15px;
-webkit-appearance: none;
font-style: normal;
font-weight: 500;
font-size: 15px;
line-height: 130%;
cursor: pointer;
}
.header-lang-button-picked {
width: 100%;
appearance: none;
background-color: transparent;
color: #ebebeb;
padding: 0;
text-align: left;
margin: 0;
border: none;
height: 100%;
-webkit-appearance: none;
font-style: normal;
font-weight: 500;
font-size: 15px;
line-height: 130%;
cursor: pointer;
}
.header-select__icon {
top: 6px;
height: 13px;
right: 5px;
height: 16px;
right: 5px;
position: absolute;
}
.select {
@@ -135,10 +149,9 @@
.option {
/* or 16px */
/* Landing/White */
color: #EBEBEB;
color: #ebebeb;
}
.burger__button {
@@ -149,11 +162,10 @@
flex-direction: column;
gap: 5px;
box-sizing: border-box;
}
.line__burger {
background-color: #FFFFFF;
background-color: #ffffff;
width: 14px;
height: 1px;
}
@@ -166,31 +178,23 @@
.header-logo {
width: 46px;
height: 74px;
cursor: pointer;
}
.header-button {
font-size: 20px;
}
.header-lang-button_active {
height: auto;
}
.header-buttons {
gap: 48px;
}
.header-lang-button {
width: 70px;
padding: 7px 15px;
top: 57px;
}
width: 60px;
}
}
@media screen and (max-width: 1279px) {
.header-container {
padding: 30px 12px;
@@ -199,7 +203,6 @@
.header-lang-button {
top: 40px;
right: 12px;
}
}
@@ -214,7 +217,6 @@
}
}
@media screen and (max-width: 639px) {
.header-container {
padding: 8px 10px;
@@ -227,5 +229,4 @@
.burger__button {
display: flex;
}
}
}
src/components/header/header.tsx
+12 -2
View File
@@ -5,6 +5,7 @@ import "./header.css";
import "../../styles/styles.css";
import iconClose from './closeIcon1.svg'
import { Nav } from "../Navigaton/navigation";
import { useLocation, useHistory } from "react-router-dom";
export type THeader = {
@@ -20,6 +21,9 @@ export const Header: React.FC<THeader> =
const [opacity, setOpacity] = useState(false)
const userLanguage = language === 'RU';
const location = useLocation()
const history = useHistory()
console.log(location, 'loc')
function handleUpdateLanguage(value: string) {
changeLanguage(value)
@@ -58,10 +62,16 @@ export const Header: React.FC<THeader> =
}
function goBack() {
if (location.pathname = '/demos') {
history.goBack()
}
}
return (
<div className="header">
<div className="header-container">
<img className="header-logo" alt="company-logo" src={logo} />
<img onClick={goBack} className="header-logo" alt="company-logo" src={logo} />
<div className="header-buttons">
<div className="header__buttons_wrapper">
<a target='_blank' rel="noreferrer" href={userLanguage ? 'https://graff.tech/contacts/' : 'http://en.graff.tech/contactseng' } className="header-button">{text.captionContact}</a>
@@ -72,7 +82,7 @@ export const Header: React.FC<THeader> =
transform: 'rotate(0deg)'
}}></img>
<div className="wrapper__button">
<div onMouseEnter={handleOpacity} onMouseLeave={() => setOpacity(false)} onClick={handleOpen} className=" header-lang-button-picked">{language}</div>
<button onMouseEnter={handleOpacity} onMouseLeave={() => setOpacity(false)} onClick={handleOpen} className=" header-lang-button-picked">{language}</button>
</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>)}
src/components/multiplayer/multiplayer.css
+1 -1
View File
@@ -50,7 +50,7 @@
@media screen and (max-width: 1024px) {
.multiplayer__photo-container {
gap: 10px;
gap: 20px;
margin-bottom: 60px;
}
src/components/player/VideoPlayer.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 MiB

After

Width:  |  Height:  |  Size: 1.2 MiB

src/components/sliderComponent/sliderComponent.tsx
+3 -3
View File
@@ -1,7 +1,7 @@
import React from "react";
import "./sliderComponent.css";
import "../../styles/styles.css"
import SwiperCentred from "../swiper/swiper";
import Swiper from "../swiper/swiper";
export const SliderComponent: React.FC<any> = React.memo(({ text }) => {
return (
@@ -19,7 +19,7 @@ export const SliderComponent: React.FC<any> = React.memo(({ text }) => {
<p className="main-block__caption_l">{text.mainBlockCaption}</p>
</div>
</div>
<SwiperCentred
<Swiper
text={text}
slidesPerView={'2'}
centeredSlides={false}
@@ -28,7 +28,7 @@ export const SliderComponent: React.FC<any> = React.memo(({ text }) => {
className={""}
rewind={true}
children={undefined}
></SwiperCentred>
></Swiper>
</div>
);
});
src/components/swiper/swiper.css
+3 -26
View File
@@ -1,16 +1,8 @@
@media screen and (min-width: 1600px) {
.image__slider {
height: 514px;
}
.image__slider_active {
height: 514px;
}
}
.image__slider {
width: 100%;
height: 428px;
height: 100%;
object-fit: cover;
opacity: 0.5;
border-radius: 16px;
@@ -25,7 +17,7 @@
.image__slider_active {
width: 100%;
height: 428px;
height: 100%;
object-fit: cover;
opacity: 1;
border-radius: 16px;
@@ -111,12 +103,6 @@
}
@media screen and (min-width: 1600px) {
.image__slider {
height: 514px;
}
.image__slider_active {
height: 514px;
}
.container {
gap: 22px;
}
@@ -153,17 +139,8 @@
}
@media screen and (max-width: 639px) {
.swiper-slide {
width: 290px
}
.image__slider {
height: 232px;
}
.image__slider_active {
height: 232px;
}
.button__container {
gap: 0;
src/components/swiper/swiper.tsx
+26 -35
View File
@@ -2,10 +2,9 @@ import React, { useEffect, useState } from "react";
// Import Swiper React components
import { Swiper, SwiperSlide } from "swiper/react";
// import required modules
import { Pagination, Navigation } from "swiper";
import useScreenSize from 'use-screen-size'
import useScreenSize from "use-screen-size";
import img from "./images/Architecture1.png";
import img1 from "./images/Floor1.png";
@@ -15,7 +14,7 @@ import "./swiper.css";
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";
import '../calendar/calendar'
import "../calendar/calendar";
type propsTypes = {
slidesPerView: string;
@@ -29,43 +28,42 @@ type propsTypes = {
};
export default function SwiperCentred(props: propsTypes) {
const size = useScreenSize()
const [caption, setCaption] = useState<any>()
const size = useScreenSize();
const [caption, setCaption] = useState<any>();
useEffect(() => {
setCaption(props.text.subtitle1)
}, [props.text])
setCaption(props.text.subtitle1);
}, [props.text]);
function updateCaption() {
const slide = document.querySelector('.image__slider_active')?.getAttribute('data-caption')
setCaption(slide)
const slide = document
.querySelector(".image__slider_active")
?.getAttribute("data-caption");
setCaption(slide);
}
function swiperWidth() {
if (size.width > 1920) {
if (size.width > 1600) {
return {
width: '644px',
height: '514px'
}
width: "644px",
height: "514px",
};
} else if (size.width > 640) {
return { width: '544px' }
return { width: "536px", height: "428px" };
} else {
return { width: '290px' }
return { width: "290px", height: "232px" };
}
}
return (
<>
<Swiper
rewind={true}
centeredSlides={true}
spaceBetween={20}
initialSlide={1}
slidesPerView={'auto'}
slidesPerView={"auto"}
onSlideChangeTransitionEnd={updateCaption}
modules={[Navigation, Pagination]}
navigation={{
@@ -77,49 +75,43 @@ export default function SwiperCentred(props: propsTypes) {
type: "fraction",
}}
>
<SwiperSlide
style={swiperWidth()}>
<SwiperSlide style={swiperWidth()}>
{({ isActive }) => (
<img
data-caption={props.text.subtitle}
className={isActive ? "image__slider_active" : "image__slider"}
src={img1}
alt='slide'
alt="slide"
/>
)}
</SwiperSlide>
<SwiperSlide
style={swiperWidth()}>
<SwiperSlide style={swiperWidth()}>
{({ isActive }) => (
<img
data-caption={props.text.subtitle1}
className={isActive ? "image__slider_active" : "image__slider"}
src={img}
alt='slide'
alt="slide"
/>
)}
</SwiperSlide>
<SwiperSlide
style={swiperWidth()}>
<SwiperSlide style={swiperWidth()}>
{({ isActive }) => (
<img
data-caption={props.text.subtitle2}
className={isActive ? "image__slider_active" : "image__slider"}
src={img2}
alt='slide'
alt="slide"
/>
)}
</SwiperSlide>
<SwiperSlide
style={swiperWidth()}>
<SwiperSlide style={swiperWidth()}>
{({ isActive }) => (
<img
data-caption={props.text.subtitle3}
className={isActive ? "image__slider_active" : "image__slider"}
src={img3}
alt='slide'
alt="slide"
/>
)}
</SwiperSlide>
@@ -134,7 +126,6 @@ export default function SwiperCentred(props: propsTypes) {
<div className="container1">
<p className="swiper__caption"></p>
</div>
</div>
</div>
</div>
src/components/timepicker/timepicker.css
+2 -2
View File
@@ -17,9 +17,9 @@
}
.timpicker__cell {
height: 21px;
font-style: normal;
padding: 11px 5px;
box-sizing: border-box;
display: grid;
justify-content: center;
align-items: center;
@@ -55,7 +55,7 @@
@media screen and (min-width: 1600px) {
.timpicker__cell {
font-size: 22px;
font-size: 20px;
padding: 13px 7px;
}
src/components/timepicker/timepicker.tsx
+4 -2
View File
@@ -21,6 +21,7 @@ export const Timepicker: React.FC<TProps> = ({
const [timePicker, settimePicker] = useState<any[]>([]);
const [date, setDate] = useState('')
const startTime = time.clone().hours(8).minutes(0);
const endTime = time.clone().hours(19).minutes(0);
const swiper = useSwiper();
@@ -35,6 +36,7 @@ export const Timepicker: React.FC<TProps> = ({
.map(() => temp.add(30, "minutes").clone())
);
}
setDate(time.format("DD MMMM"))
settimePicker(a);
}, [time]);
@@ -83,7 +85,7 @@ export const Timepicker: React.FC<TProps> = ({
}
return (
<div data-aos="fade-up" data-aos-delay="300" className={open.timePicker ? " calendar aos-init aos-animate" : "calendar aos-init aos-animate"}>
<div data-aos="fade-up" 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">
@@ -91,7 +93,7 @@ export const Timepicker: React.FC<TProps> = ({
<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 className="date date_time">{!open.calendar ? time.format("DD MMMM") : '' }</div>
</div>
<div className="form__block">
{timePicker.map((date, i) => (
src/utils/textEN.js
+7 -6
View File
@@ -4,6 +4,7 @@ const textEN = {
button: 'Demoversion'
},
slider: {
title: '',
mainBlockCaptionColor: 'an uncompromising level of graphics and a complete immersion of the customer in the process of choosing an apartment.',
mainBlockCaption: "We can show your residential complex to any client from any part of the world. Location and device don't matter. All you need is internet connection.",
subtitle: 'Floor plan',
@@ -38,31 +39,31 @@ const textEN = {
}
},
multiplayer: {
mainBlockCaptionColor: 'for teamwork.',
title: 'for teamwork.',
mainBlockCaption: 'The customer can walk around the residential complex together with their loved ones who connect from different devices. This is a completely new experience in the process of choosing an apartment',
mainBlockSubblock: "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'
},
devices: {
mainBlockCaptionColor: 'is available on any device.',
title: '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'
},
photoComponent: {
mainBlockCaptionColor: "already works in the sales departments of the developer",
title: "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.',
},
player: {
mainBlockCaptionColor: "allows you to transfer an impressive level of graphics to the user's device",
title: "allows you to transfer an impressive level of graphics to the user's device",
mainBlockCaption: 'To work with an interactive presentation, the customer only needs a smartphone and mobile Internet.',
mainBlockSubblock: 'Our soultion optimaized to work smoothly even with mobile internet.',
button: 'Demoversion'
},
analytics: {
mainBlockCaptionColor: 'collects data about the users and their behavior.',
title: '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',
@@ -104,7 +105,7 @@ const textEN = {
},
cloudSolution: {
mainBlockCaptionColor: 'is a cloud solution.',
title: 'is a cloud solution.',
mainBlockCaption: 'Hosting the project on our servers allows you to quickly apply program updates and keep the product in the most efficient state.',
},
src/utils/textRU.js
+8 -7
View File
@@ -4,6 +4,7 @@ const textRU = {
button: 'Демоверсия'
},
slider: {
title: '',
mainBlockCaptionColor: 'бескомпромиссный уровень графики и полное погружение покупателя в процесс выбора квартиры.',
mainBlockCaption: 'Покажем все преимущества вашего жилого комплекса клиенту из любого конца мира. Местоположение и устройство значения не имеют. Нужен только интернет.',
subtitle: 'План этажа',
@@ -18,7 +19,7 @@ const textRU = {
mainBlockSubblock: 'Процесс записи может быть встроен на сайт жилого комплекса, на который была настроена реклама.',
calendarCaption: 'Выбор даты',
timepickerCaption: 'Выбор времени',
formCaption: 'Офрмление',
formCaption: 'Оформление',
appointmentTrue: 'Запись есть',
appointmentFalse: 'Записи нет',
confirm: {
@@ -38,31 +39,31 @@ const textRU = {
}
},
multiplayer: {
mainBlockCaptionColor: 'для совместной работы.',
title: 'для совместной работы.',
mainBlockCaption: 'Покупатель может вместе с близкими людьми осмотреть жилой комплекс. Это совершенно новый опыт в процессе выбора квартиры.',
mainBlockSubblock: 'Осмотр жилого комплекса доступен в любой момент, без необходимости предварительной записи на просмотр.',
button: 'Демоверсия'
},
devices: {
mainBlockCaptionColor: 'доступен на любых устройствах.',
title: 'доступен на любых устройствах.',
mainBlockCaption: 'Приложение легко адаптируется под экран любого размера и одинаково хорошо выглядит на мобильном телефоне или на большом сенсорном экране в отделе продаж застройщика.',
button: 'Демоверсия'
},
photoComponent: {
mainBlockCaptionColor: 'уже работает в офисах продаж застройщиков.',
title: 'уже работает в офисах продаж застройщиков.',
mainBlockCaption: 'Для организации интерактивной презентации жилого комплекса застройщику не нужно покупать дорогостоящее оборудование и поддерживать его работоспособность.',
mainBlockSubblock: 'В офисе продаж достаточно разместить сенсорный стол с доступом в интернет.'
},
player: {
mainBlockCaptionColor: 'позволяет передать на устройство пользователя впечатляющий уровень графики.',
title: 'позволяет передать на устройство пользователя впечатляющий уровень графики.',
mainBlockCaption: 'Для работы с интерактивной презентацией покупателю достаточно смартфона и мобильного интернета.',
mainBlockSubblock: 'Решение дополнительно оптимизированно для работы даже с мобильным интернетом.',
button: 'Демоверсия'
},
analytics: {
mainBlockCaptionColor: 'собирает данные о пользователе и его поведении.',
title: 'собирает данные о пользователе и его поведении.',
mainBlockCaption: 'Система внутренней аналитики программы собирает информацию о поведении пользователя и эффективности работы менеджеров для создания отчета, содержащего необходимые метрики.',
cardLarge: {
title: 'Конверсия менеджеров в брони',
@@ -104,7 +105,7 @@ const textRU = {
},
cloudSolution: {
mainBlockCaptionColor: 'это облачное решение.',
title: 'это облачное решение.',
mainBlockCaption: 'Необходимые для работы приложения вычисления проводятся на удаленном сервере. Это позволяет быстро применять обновления программы и поддерживать продукт в максимально эффективном состоянии.',
},