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/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 : {