From 14e5f663b6f90198bfc6ae5084f1109c05dff5e0 Mon Sep 17 00:00:00 2001
From: DmitriyB <dimasik_burdin@inbox.ru>
Date: Wed, 21 Sep 2022 12:55:29 +0500
Subject: [PATCH] added links

---
 public/Logo_GRAFFinteractive.png              | Bin 1569 -> 4077 bytes
 public/index.html                             |   4 +-
 src/App.tsx                                   |   4 +-
 src/components/Navigaton/navigation.css       |   1 +
 src/components/Navigaton/navigation.tsx       |  18 +--
 .../demonstration/demonstartion.tsx           |  58 ++-----
 src/components/footer/footer.css              |   9 ++
 src/components/footer/footer.tsx              |  92 ++++++------
 src/components/header/header.css              |   2 +
 src/components/header/header.tsx              |   6 +-
 src/utils/ss.js                               | 141 ------------------
 11 files changed, 90 insertions(+), 245 deletions(-)
 delete mode 100644 src/utils/ss.js

diff --git a/public/Logo_GRAFFinteractive.png b/public/Logo_GRAFFinteractive.png
index fdb08b32b691cd2d382d8927fafc30d7f4a4e2a3..389dee62f30304a515977c1b189f966bc8087f24 100644
GIT binary patch
delta 4065
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
T|NQ8c00000NkvXXu0mjf3sUO;

delta 1537
zcmV+c2LAc&AE68(iBL{Q4GJ0x0000DNk~Le0000k0000=2nGNE0L0v8dyyeDe+9Nl
zL_t(|0qtA;aoai!hkN<IdJ~jyg69paPVmwRl1`9h0y`5Voj~>kb|$bpLEH(XP7r$n
z6fi*>k|mkchvVMmcgKq*0w4r}Ao!61v;-nX^k+zAM8(K&eisb}gMR`<u`EM>UWLC7
zlPhQlY9yvVV>l?<3ZnGVS5~m%f7HM&ScMIA1f{g`<?&WrESx}x3X5C=fl4zz`4Ext
z=O)5E<VH>9UU>+fQ;DG;Tth=+R4U%I3(tj8S83CQ=R%c_vwIl0U>vy$S$hJ_d^)4D
zpt7d&i^?1HgN({7_lEr%!?C0?f(GC@0mG2W*gF!G1_*hhat$pIsQ9Z^fBH%b0e`>F
zsC=bdB!lx{E$waG3+>}$@IwaODg7q$>ae2npq1W(tQ~uHSBhmm_Ff=m5>Lf%;F2H%
z?WDEgk`Uk~7iDc8od0>yWi&Wu&@s@4)BhnHGgjPq5U!ygu+eTI92?G6h8~0~xGY3o
z3km4Y;!R;#aRYxLd@X))e_+Ko9&`pS46JzOLDzcUq+?{hinmH%dqBo<{FevekS2?$
zG(&5L7swmVP?>n}twUBlzG-h`p#Q?cIEK`Nm=m#Hece+J-W1)3!>NZ{R=PK<qg|vM
z57Mb-8lpd9=olpPI-q@1WL|nQvdj47H@->_(QiG#NXi8G=H*WLf7baqT1)#X%`jDh
z<`{+q8>~TzC!+F<VMyu(a%c>(03)UH<nsZd@T6fIIr)PU;XF&up&2;+U4flcw({;X
z*k}=hU+!Oqm?poUC#gvJF<uVBLNGB*@%_<k-azZSf0xoq`7xd!chCjU#@iJ8M~V%%
ztm~BLP?=zV7-OGFe_Y2O!13H`4(R#=IDcMZ7~X{Eu8oBU&=Ju3CQmR1j@PKXa&l)w
zSr03z4}9PQmx9u$B4KJ58P0el7=)bSr0_l16N0!vx1#c0>h4SAWK^bQrxqNu;jnsN
z6U{eO_XO3uWZcd()B)|vWO-uZ7~$!JD=Ek|C6iC2>XRB-e>XLC=niQ0WtxqA=~{jd
zE39%aH2;FV^2FeobV64BEzfsKrgJ}DWdA6U_YC=+W4$$)L2>T~^V?o2R^$z6du6O>
zN2)HVc%QnSz{5IoS;6<Eq)jaHID8TdI83Sr<B4fnPw`u6G=_t3FW_LY7(2)U*;R&0
zxtTO-;CO&$e}!k>$l<|#4F^|RkPLTTbfe_H5G{Yuy{ap^%eBxro~f$aC3HDmw41oM
zSiWnz#QMRx#QeZZ<^5cqqoTWD&ES;!DkS>$gi*istp@$R3QW7d;ZSgsH6HdG-5@P<
zm#jwq2J!=U!;QSEFNupBSZ(nU<~NY|uMwUEPvZ_-e-6%tdJbBR$UuION4B5~i?IiL
ztK%6~oCirJ&pc3<V%c3xJ|#c~(MlfK1$Z_z^31bo4w@F)9*Rkqrzg7BebC-j6o1uD
z@2I4$aRqIVtLz3RcR5vl1)Gc9LVk}g0~>>9QlAxt5dRA8{afArn~MFupWt`W2a2xr
zT9ZM1f8Xm$XhUTj!oxo9ZroQ1<%yy5{f-i4eeTT!HIS6~-wB?m>b<Lzo=%`42J+SX
zwMM<?-_AdIdd|Qermp3g8)v_J1lwEge<YaZi;~5D{vgUGA}10$m-ny0Mz$M~`Qp+B
z88=g*8%h0ds-L)sFc!=1Hyb62MB3t*&+HtZe+z*}aJ*P@<f1K(huyKA%z_TNo^fp!
zF9jE)z-O(fW0Y4ezs^MoQSeUcVn^$<1eEB+MtGF=rXY8=RJ+`}o1)@%H;^}QoX~Hb
zAf+@n{GIcb!bkdIAxg9BJc{Bg$X~D8hFrAC!20f%S2$9N@s$<KL}~tgEALl2f}Ds_
zSI*yEO2I3k*tH3g@4JgO#q7%|%HWBI2T3eK`ABiD{C3Z)1{M1xm#J1p_&CiSI@b}}
nNXc*+<W!zltc$ewBy!;oF+y1B#NvW+00000NkvXXu0mjfY8ULw

diff --git a/public/index.html b/public/index.html
index ae358af..1bb8b8f 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3,11 +3,11 @@
 
 <head>
   <meta charset="utf-8" />
-  <link rel="icon" href="#" type="image/png" />
+  <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="#" type="image/png" />
+  <link rel="apple-touch-icon" href="./Logo_GRAFFinteractive.png" type="image/png" />
   <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
diff --git a/src/App.tsx b/src/App.tsx
index 15b98c7..3f52151 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -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>
diff --git a/src/components/Navigaton/navigation.css b/src/components/Navigaton/navigation.css
index d86d42d..f0caa77 100644
--- a/src/components/Navigaton/navigation.css
+++ b/src/components/Navigaton/navigation.css
@@ -84,6 +84,7 @@
     /* identical to box height, or 24px */
     color: #FFFFFF;
     margin: 0;
+    text-decoration: none;
 }
 
 .nav__line {
diff --git a/src/components/Navigaton/navigation.tsx b/src/components/Navigaton/navigation.tsx
index c3165a5..0d4711c 100644
--- a/src/components/Navigaton/navigation.tsx
+++ b/src/components/Navigaton/navigation.tsx
@@ -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'}>
diff --git a/src/components/demonstration/demonstartion.tsx b/src/components/demonstration/demonstartion.tsx
index b666981..de59ffd 100644
--- a/src/components/demonstration/demonstartion.tsx
+++ b/src/components/demonstration/demonstartion.tsx
@@ -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>
     )
diff --git a/src/components/footer/footer.css b/src/components/footer/footer.css
index 9a894c6..bc4914a 100644
--- a/src/components/footer/footer.css
+++ b/src/components/footer/footer.css
@@ -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 {
diff --git a/src/components/footer/footer.tsx b/src/components/footer/footer.tsx
index 5ab6ca1..c47e01c 100644
--- a/src/components/footer/footer.tsx
+++ b/src/components/footer/footer.tsx
@@ -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>
diff --git a/src/components/header/header.css b/src/components/header/header.css
index c4c2e46..633356e 100644
--- a/src/components/header/header.css
+++ b/src/components/header/header.css
@@ -39,6 +39,8 @@
   color: #ffffff;
   cursor: pointer;
   padding: 0px;
+  appearance: none;
+  text-decoration: none;
 }
 
 .header-lang-button-text:hover {
diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx
index f7def46..603c7af 100644
--- a/src/components/header/header.tsx
+++ b/src/components/header/header.tsx
@@ -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 : {
diff --git a/src/utils/ss.js b/src/utils/ss.js
deleted file mode 100644
index 7f4cd45..0000000
--- a/src/utils/ss.js
+++ /dev/null
@@ -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. Все права защищены'
-        }
-    }
-    
-};