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

added links

Browse Source
This commit is contained in:
DmitriyB
2022-09-21 12:55:29 +05:00
parent 8491a469f4
commit 14e5f663b6
11 changed files with 90 additions and 245 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.tsx
+2 -2
View File
@@ -84,14 +84,14 @@ export const App: React.FC = () => {
<Header text={text.footer} language={language} changeLanguage={changeLanguage}></Header>
<Main locale={language} text={text}></Main>
<Footer text={text.footer}></Footer>
<Footer language={language} text={text.footer}></Footer>
</div>
</Route>
<Route exact path="/demos">
<div className='App'>
<main className="main">
<Header text={text.footer} language={language} changeLanguage={changeLanguage}></Header>
<Demostration></Demostration>
<Demostration text={text.demos}></Demostration>
</main>
</div>
</Route>
src/components/Navigaton/navigation.css
+1
View File
@@ -84,6 +84,7 @@
/* identical to box height, or 24px */
color: #FFFFFF;
margin: 0;
text-decoration: none;
}
.nav__line {
src/components/Navigaton/navigation.tsx
+9 -9
View File
@@ -67,11 +67,9 @@ const items = {
export const Nav: React.FC<THeader> = ({ menuOpen, language, changeLanguage, text }) => {
const { cardLarge } = text
const { cardLarge1 } = text
const { cardSmall } = text
const { cardSmall1 } = text
const userLanguage = language === 'RU';
const { cardLarge, cardLarge1, cardSmall, cardSmall1 } = text
const langArray = [{
value: 'ru-RU',
@@ -119,13 +117,14 @@ export const Nav: React.FC<THeader> = ({ menuOpen, language, changeLanguage, tex
))}
</div>
<div className='nav__title_container'>
<h4 className='nav__title'>{text.captionContact}</h4>
<a target='_blank' rel="noreferrer" href={userLanguage ? 'https://graff.tech/' : 'http://en.graff.tech/'} className='nav__title'>{text.captionCompain}</a>
<img alt='icon' className='icon_chevron' src={chevron}></img>
</div>
<span className='nav__line'></span>
</motion.div>
<motion.div
<motion.a
href={userLanguage ? 'mailto:info@graff.tech' : 'mailto:waseem@graff.tech'}
variants={items}
className='footer__card_2'>
<div className='ellipse__container'>
@@ -137,8 +136,9 @@ export const Nav: React.FC<THeader> = ({ menuOpen, language, changeLanguage, tex
<img alt='icon' src={write} className='card__icon'></img>
<p className='card__caption'>{cardSmall.caption}</p>
</div>
</motion.div>
<motion.div
</motion.a>
<motion.a
href={userLanguage ? 'tel:+7-800-770-00-76' : 'tel:+971-50-938-8902'}
variants={items}
className='footer__card_2'>
<div className='ellipse__container'>
@@ -150,7 +150,7 @@ export const Nav: React.FC<THeader> = ({ menuOpen, language, changeLanguage, tex
<img alt='icon' src={phone} className='card__icon'></img>
<p className='card__caption'>{cardSmall1.caption}</p>
</div>
</motion.div>
</motion.a>
<motion.div
variants={items}
className={'footer__card_l'}>
src/components/demonstration/demonstartion.tsx
+12 -46
View File
@@ -7,7 +7,9 @@ import building2 from './building2.png'
import iconButton from "./iconButton.svg"
export const Demostration: React.FC = () => {
export const Demostration: React.FC<any> = ({text}) => {
const { card } = text;
return (
<div className="block">
<div className='demos_container'>
@@ -15,54 +17,18 @@ export const Demostration: React.FC = () => {
<img alt="icon" src={iconButton} className="main-block__icon"></img>
</div>
<div className='demo'>
<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>
<img alt='buildingImg' src={building} className='demo_image'></img>
<div className='demo_info'>
<div className='title__block'>
<h4 className='title__demo'>{card.title}</h4>
<p className='caption'>{card.subTitle}</p>
</div>
<div className='body__block'>
<p className='caption1'>{card.caption}</p>
<p className='caption2'>{card.caption1}</p>
</div>
</div>
</div>
<div 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>
<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={building2} className='demo_image'></img>
<div className='demo_info'>
<div className='title__block'>
<h4 className='title__demo'>ЖК «Тактика»</h4>
<p className='caption'>Россия, Екатеринбург.</p>
</div>
<div className='body__block'>
<p className='caption1'>Жилой квартал класса комфорт плюс на ВИЗе, в квадрате улиц Татищева-Венгерских Коммунаров-Викулова.</p>
<p className='caption2'>Рядом Верх-Исетский пруд, по Татищева за 10 минут можно добраться до центра.</p>
</div>
</div>
</div>
</div>
</div>
)
src/components/footer/footer.css
+9
View File
@@ -8,6 +8,11 @@
justify-content: center
}
.link {
color: #EBEBEB;
}
.footer__main-block {
width: 1200px;
display: flex;
@@ -83,11 +88,13 @@
}
.footer__social {
color: #EBEBEB;
margin: 0;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 125%;
text-decoration: none;
}
.footer__block_copyright {
@@ -114,6 +121,8 @@
.copyright {
margin: 0;
color: #EBEBEB;
text-decoration: none;
}
.footer__block_2 {
src/components/footer/footer.tsx
+49 -43
View File
@@ -6,8 +6,8 @@ import iconButton from "../../styles/iconButton.svg"
import "../../styles/styles.css"
export const Footer: React.FC<any> = ({ text }) => {
export const Footer: React.FC<any> = ({ text, language }) => {
const userLanguage = language === 'RU';
const { cardLarge, cardLarge1, cardSmall, cardSmall1, copyright } = text
return (
@@ -21,10 +21,10 @@ export const Footer: React.FC<any> = ({ text }) => {
<div className='footer__block_contacts'>
<p className='contacts__title'>{text.social}</p>
<div className='footer__container_social'>
<p className='footer__social'>Facebook</p>
<p className='footer__social'>Instagram</p>
<p className='footer__social'>YouTube</p>
<p className='footer__social'>VK</p>
<a href='https://www.facebook.com/GRAFFinteractive' target='_blank' rel="noreferrer" className='footer__social'>Facebook</a>
<a href='https://www.instagram.com/graffinteractive/' target='_blank' rel="noreferrer" className='footer__social'>Instagram</a>
<a href='https://www.youtube.com/channel/UCveYBNLVeGxgsDsfhrVxNoA' target='_blank' rel="noreferrer" className='footer__social'>YouTube</a>
<a href='https://vk.com/graffinteractive' target='_blank' rel="noreferrer" className='footer__social'>VK</a>
</div>
</div>
<div className='footer__block_copyright'>
@@ -51,16 +51,17 @@ export const Footer: React.FC<any> = ({ text }) => {
<p className='card_country'>{cardLarge.country}</p>
</div>
<div className='footer__card_2'>
<div className='ellipse__container'>
<div className="main-block__icon_container">
<img alt='icon' src={iconButton} className="main-block__icon"></img>
<a className='link' href={userLanguage ? 'mailto:info@graff.tech' : 'mailto:waseem@graff.tech'}>
<div className='ellipse__container'>
<div className="main-block__icon_container">
<img alt='icon' src={iconButton} className="main-block__icon"></img>
</div>
</div>
</div>
<div className='card__write'>
<img alt='icon' src={write} className='card__icon'></img>
<p className='card__caption'>{cardSmall.caption}</p>
</div>
<div className='card__write'>
<img alt='icon' src={write} className='card__icon'></img>
<p className='card__caption'>{cardSmall.caption}</p>
</div>
</a>
</div>
</div>
<div className='footer__col2 footer__col2_mobile'>
@@ -75,41 +76,46 @@ export const Footer: React.FC<any> = ({ text }) => {
<p className='card_country'>{cardLarge1.country}</p>
</div>
<div className='footer__card_2'>
<div className='ellipse__container'>
<div className="main-block__icon_container">
<img alt='icon' src={iconButton} className="main-block__icon"></img>
<a className='link' href={userLanguage ? 'tel:+7-800-770-00-76' : 'tel:+971-50-938-8902'}>
<div className='ellipse__container'>
<div className="main-block__icon_container">
<img alt='icon' src={iconButton} className="main-block__icon"></img>
</div>
</div>
</div>
<div className='card__write'>
<img alt='icon' src={phone} className='card__icon'></img>
<p className='card__caption'>{cardSmall1.caption}</p>
</div>
<div className='card__write'>
<img alt='icon' src={phone} className='card__icon'></img>
<p className='card__caption'>{cardSmall1.caption}</p>
</div>
</a>
</div>
</div>
<div className='footer__column_mobile'>
<div className='footer__card_2'>
<div className='ellipse__container'>
<div className="main-block__icon_container">
<img alt='icon' src={iconButton} className="main-block__icon"></img>
<a className='link' href={userLanguage ? 'mailto:info@graff.tech' : 'mailto:waseem@graff.tech'}>
<div className='footer__card_2'>
<div className='ellipse__container'>
<div className="main-block__icon_container">
<img alt='icon' src={iconButton} className="main-block__icon"></img>
</div>
</div>
<div className='card__write'>
<img alt='icon' src={write} className='card__icon'></img>
<p className='card__caption'>{cardSmall.caption}</p>
</div>
</div>
<div className='card__write'>
<img alt='icon' src={write} className='card__icon'></img>
<p className='card__caption'>{cardSmall.caption}</p>
</div>
</div>
</a>
<div className='footer__card_2'>
<div className='ellipse__container'>
<div className="main-block__icon_container">
<img alt='icon' src={iconButton} className="main-block__icon"></img>
<a className='link' href={userLanguage ? 'tel:+7-800-770-00-76' : 'tel:+971-50-938-8902'}>
<div className='ellipse__container'>
<div className="main-block__icon_container">
<img alt='icon' src={iconButton} className="main-block__icon"></img>
</div>
</div>
</div>
<div className='card__write'>
<img alt='icon' src={phone} className='card__icon'></img>
<p className='card__caption'>{cardSmall1.caption}</p>
</div>
<div className='card__write'>
<img alt='icon' src={phone} className='card__icon'></img>
<p className='card__caption'>{cardSmall1.caption}</p>
</div>
</a>
</div>
<div className='footer__card_l'>
<div className='card__contacts'>
@@ -138,7 +144,7 @@ export const Footer: React.FC<any> = ({ text }) => {
<div className='footer__block_copyright_mobile'>
<img alt='logo' src={logo} className='footer__logo'></img>
<div className='copyright__caption'>
<p className='copyright'>{copyright.caption}</p>
<a href={userLanguage ? 'https://graff.tech/privacypolicy' : 'http://en.graff.tech/privacypolicyeng'} target="_blank" rel="noreferrer" className='copyright'>{copyright.caption}</a>
<p className='copyright'>
{copyright.caption1}
</p>
src/components/header/header.css
+2
View File
@@ -39,6 +39,8 @@
color: #ffffff;
cursor: pointer;
padding: 0px;
appearance: none;
text-decoration: none;
}
.header-lang-button-text:hover {
src/components/header/header.tsx
+4 -2
View File
@@ -18,6 +18,8 @@ export const Header: React.FC<THeader> =
const [open, setOpen] = useState<boolean>(false)
const [menuOpen, setMenuOpen] = useState(false)
const [opacity, setOpacity] = useState(false)
const userLanguage = language === 'RU';
function handleUpdateLanguage(value: string) {
changeLanguage(value)
@@ -62,8 +64,8 @@ export const Header: React.FC<THeader> =
<img className="header-logo" alt="company-logo" src={logo} />
<div className="header-buttons">
<div className="header__buttons_wrapper">
<button className="header-button">{text.captionContact}</button>
<button className="header-button">{text.captionCompain}</button>
<a target='_blank' rel="noreferrer" href={userLanguage ? 'https://graff.tech/contacts/' : 'http://en.graff.tech/contactseng' } className="header-button">{text.captionContact}</a>
<a target='_blank' rel="noreferrer" href={userLanguage ? 'https://graff.tech/' : 'http://en.graff.tech/' } className="header-button">{text.captionCompain}</a>
</div>
<div className={open ? "header-lang-button header-lang-button_active" : 'header-lang-button header-lang-button_disabled'} style={setBackground ? style : { background: 'transparent' }}>
<img alt="img" src={chevron} className="header-select__icon" style={open ? iconTransform : {
src/utils/ss.js
-141
View File
@@ -1,141 +0,0 @@
const textEN = {
title: {
titleCaption: 'Technology for remote demonstration of a residential complex.',
button: 'Demoversion'
},
slider: {
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",
subtitle1: "Architecture",
subtitle2: "Floor plan",
subtitle3: 'Landscaping',
},
calendar: {
title: 'easily embeds into an existing sales chain.',
mainBlockCaptionColor: " developer's sales team can conduct virtual tours with potential customers",
mainBlockCaption: 'Customer able to see all the advantages of the residential complex, choose a layout and book an apartment, and the sales manager will be able to remotely help them do it.',
mainBlockSubblock: 'We integrate our solution to the site of the residential complex where the developer has set up advertising.',
},
multiplayer: {
mainBlockCaptionColor: '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: 'Осмотр жилого комплекса доступен в любой момент, без необходимости предварительной записи на просмотр.',
button: 'Demoversion'
},
devices: {
mainBlockCaptionColor: 'is available on every 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",
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: {
BlockCaptionColor: "allows you to transfer an impressive level of graphics to the user's device",
BlockCaption: '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: 'собирает данные о пользователе и его поведении.',
mainBlockCaption: 'Система внутренней аналитики программы собирает информацию о поведении пользователя и эффективности работы менеджеров для создания отчета, содержащего необходимые метрики.',
cardLarge: {
title: 'Конверсия менеджеров в брони',
row: 'К.Н. Федоров',
row1: 'И.Ф. Яковлева',
row2: 'А.М. Ташева',
row3: 'А.А. Фетисов',
},
cardLarge1: {
title: 'Популярные типы квартир, %',
row: 'Студии',
row1: '1-к. квартиры',
row2: '2-к. квартиры',
row3: '3-к. квартиры',
row4: '4-к. квартиры',
},
cardLarge2: {
title: 'Воронка продаж',
row: 'Сеансы',
row1: 'В избранное',
row2: 'Брони',
row3: 'Продажи',
},
cardSmall: {
title: 'Среднее время сеанса, мин.'
},
cardSmall1: {
title: 'Сформировано коммерческих предложений, шт'
},
cardSmall2: {
title: 'Конверсия из сеанса в продажу, %'
},
cardSmall3: {
title: 'Продано через Graff.estate, млн.руб.'
},
mainBlockSubblock: 'Полученный отчет позволяет сделать процесс демонстрации жилого комплекса еще эффективнее.',
button: 'Демоверсия'
},
cloudSolution: {
mainBlockCaptionColor: 'это облачное решение.',
mainBlockCaption: 'Необходимые для работы приложения вычисления проводятся на удаленном сервере. Это позволяет быстро применять обновления программы и поддерживать продукт в максимально эффективном состоянии.',
},
demos: {
title: 'Доступные демонстрации',
card: {
title: 'ЖК «Айвазовский»',
subTitle: 'Россия, Тюмень.',
caption: 'Новый жилой район располагающийся в живописном месте на берегу Туры в центральной части Тюмени. ',
caption1: 'Лауреат престижной премии Urban Awards 2019 в номинации «Лучший строящийся региональный жилой комплекс бизнес-класса».',
},
card1: {
title: 'ЖК «Машаров»',
subTitle: 'Россия, Тюмень.',
caption: 'Авторский Квартал «Машаров» — новый проект компании Сибинтел Девелопмент, которая создает уникальные объекты для тюменского региона с 2002 года.',
},
card2: {
title: 'ЖК «Тактика»',
subTitle: 'Россия, Екатеринбург.',
caption: 'Жилой квартал класса комфорт плюс на ВИЗе, в квадрате улиц Татищева-Венгерских Коммунаров-Викулова.',
caption1: 'Рядом Верх-Исетский пруд, по Татищева за 10 минут можно добраться до центра.',
}
},
footer: {
social: 'Социальные сети',
captionCompain: 'О компании',
captionContact: 'Контакты',
cardLarge: {
address: 'ул. Московская, 47,',
city: 'Екатеринбург',
country: 'Россия'
},
cardLarge1: {
address: 'Дубаи',
country: 'ОАЭ'
},
cardSmall: {
caption: 'Написать нам',
},
cardSmall1: {
caption: 'Позвонить',
},
copyright: {
caption: 'Политика конфиденциальности',
caption1: '©Graff Interactive. Все права защищены'
}
}
};