burger menu component, fix styles autstaffing and
main pages, autstaffing add swiper
This commit is contained in:
parent
2a89ab3d5f
commit
224fc2c935
950
package-lock.json
generated
950
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -47,6 +47,7 @@
|
|||||||
"semver": "7.3.2",
|
"semver": "7.3.2",
|
||||||
"slick-carousel": "^1.8.1",
|
"slick-carousel": "^1.8.1",
|
||||||
"sweetalert2": "^11.4.8",
|
"sweetalert2": "^11.4.8",
|
||||||
|
"swiper": "^11.1.3",
|
||||||
"ts-loader": "^9.4.2"
|
"ts-loader": "^9.4.2"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
32
src/components/BurgerMenu/burgerButton.jsx
Normal file
32
src/components/BurgerMenu/burgerButton.jsx
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
import React from "react";
|
||||||
|
|
||||||
|
import "./burgerButton.scss";
|
||||||
|
|
||||||
|
export const BurgerButton = ({ active, setActive }) => {
|
||||||
|
const toggleBar = () => {
|
||||||
|
if (active) {
|
||||||
|
setActive(false);
|
||||||
|
document.body.style.overflow = "auto";
|
||||||
|
} else {
|
||||||
|
setActive(true);
|
||||||
|
document.body.style.overflow = "hidden";
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="burger-button" onClick={() => toggleBar()}>
|
||||||
|
<div className="burger">
|
||||||
|
<div
|
||||||
|
className={active ? "burger__line l1 change" : "burger__line"}
|
||||||
|
></div>
|
||||||
|
<div
|
||||||
|
className={active ? "burger__line l2 change" : "burger__line"}
|
||||||
|
></div>
|
||||||
|
<div
|
||||||
|
className={active ? "burger__line l3 change" : "burger__line"}
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
<h3 className="burger-button__logo">меню</h3>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
51
src/components/BurgerMenu/burgerButton.scss
Normal file
51
src/components/BurgerMenu/burgerButton.scss
Normal file
@ -0,0 +1,51 @@
|
|||||||
|
.burger-button {
|
||||||
|
display: flex;
|
||||||
|
column-gap: 10px;
|
||||||
|
z-index: 10;
|
||||||
|
|
||||||
|
.burger {
|
||||||
|
padding: 1px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
row-gap: 3px;
|
||||||
|
|
||||||
|
@media (max-width: 431px) {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__line {
|
||||||
|
width: 19px;
|
||||||
|
border-radius: 39px;
|
||||||
|
height: 3.8px;
|
||||||
|
background-color: #a7ca60;
|
||||||
|
transition: 0.4s;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
width: 10.6px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.l1.change {
|
||||||
|
transform: rotate(-45deg) translate(-5px, 5px);
|
||||||
|
}
|
||||||
|
.l2.change {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
.l3.change {
|
||||||
|
transform: rotate(45deg) translate(-5px, -5px);
|
||||||
|
width: 19px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__logo {
|
||||||
|
color: #838383;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 16.24px;
|
||||||
|
text-decoration: underline;
|
||||||
|
|
||||||
|
@media (max-width: 431px) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
65
src/components/BurgerMenu/burgerMenu.jsx
Normal file
65
src/components/BurgerMenu/burgerMenu.jsx
Normal file
@ -0,0 +1,65 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { Link } from "react-router-dom";
|
||||||
|
|
||||||
|
import ITguild from "assets/images/logo/ITguild.svg";
|
||||||
|
|
||||||
|
import "./burgerMenu.scss";
|
||||||
|
|
||||||
|
export const BurgerMenu = ({ active }) => {
|
||||||
|
const items = [
|
||||||
|
{
|
||||||
|
name: "Вход",
|
||||||
|
path: "/auth"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Личный кабинет",
|
||||||
|
path: "/profile"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Трекер",
|
||||||
|
path: "/tracker-intro"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Тесты",
|
||||||
|
path: "/quiz"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Формы",
|
||||||
|
path: "/forms"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Школа",
|
||||||
|
path: "/"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Контакты",
|
||||||
|
path: "/"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Блог",
|
||||||
|
path: "/blog"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "FAQ",
|
||||||
|
path: "/frequently-asked-questions"
|
||||||
|
}
|
||||||
|
];
|
||||||
|
return (
|
||||||
|
<div className={active ? "burger-menu active" : "burger-menu"}>
|
||||||
|
<div className="blur" />
|
||||||
|
<div className={active ? "menu active" : "menu"}>
|
||||||
|
<div className="menu__title">
|
||||||
|
<img src={ITguild}></img>
|
||||||
|
</div>
|
||||||
|
<ul className="menu__navigation">
|
||||||
|
{items.map((item) => (
|
||||||
|
<li key={item.name}>
|
||||||
|
<Link to={item.path}>{item.name}</Link>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
<p className="menu__politic">Политика конфиденциальности</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
85
src/components/BurgerMenu/burgerMenu.scss
Normal file
85
src/components/BurgerMenu/burgerMenu.scss
Normal file
@ -0,0 +1,85 @@
|
|||||||
|
.burger-menu {
|
||||||
|
.menu {
|
||||||
|
padding: 40px 10px;
|
||||||
|
visibility: hidden;
|
||||||
|
transition: 0.2s ease-in-out;
|
||||||
|
opacity: 0;
|
||||||
|
z-index: 8;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
height: 100vh;
|
||||||
|
background: #e1fccf;
|
||||||
|
width: 0;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: stretch;
|
||||||
|
|
||||||
|
&__title {
|
||||||
|
display: flex;
|
||||||
|
margin-top: 24px;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 160px;
|
||||||
|
|
||||||
|
@media (max-width: 431px) {
|
||||||
|
width: 120px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__navigation {
|
||||||
|
margin-top: 28px;
|
||||||
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
row-gap: 15px;
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 33px;
|
||||||
|
|
||||||
|
a,
|
||||||
|
a:hover,
|
||||||
|
a:active {
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__politic {
|
||||||
|
margin-top: 42px;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 22px;
|
||||||
|
color: #000000;
|
||||||
|
|
||||||
|
@media (max-width: 431px) {
|
||||||
|
font-size: 11px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__contacts {
|
||||||
|
margin-top: 127px;
|
||||||
|
color: #000000;
|
||||||
|
h4 {
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 33px;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu.active {
|
||||||
|
visibility: visible;
|
||||||
|
transition: 0.1s ease-in-out;
|
||||||
|
opacity: 1;
|
||||||
|
display: flex;
|
||||||
|
width: 33vw;
|
||||||
|
left: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
padding-left: 40px;
|
||||||
|
|
||||||
|
@media (max-width: 431px) {
|
||||||
|
width: 100vw;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
@ -1,18 +1,23 @@
|
|||||||
import React from "react";
|
import React, { useState } from "react";
|
||||||
import SVG from "react-inlinesvg";
|
import SVG from "react-inlinesvg";
|
||||||
import { Link, NavLink } from "react-router-dom";
|
import { Link, NavLink } from "react-router-dom";
|
||||||
|
|
||||||
|
import { BurgerButton } from "@components/BurgerMenu/burgerButton";
|
||||||
|
import { BurgerMenu } from "@components/BurgerMenu/burgerMenu";
|
||||||
|
|
||||||
import authIcon from "assets/icons/authIcon.svg";
|
import authIcon from "assets/icons/authIcon.svg";
|
||||||
|
|
||||||
import "./authHeader.scss";
|
import "./authHeader.scss";
|
||||||
|
|
||||||
export const AuthHeader = () => {
|
export const AuthHeader = () => {
|
||||||
|
const [actionMenu, setActionMenu] = useState(false);
|
||||||
return (
|
return (
|
||||||
<div className="auth-header">
|
<div className="auth-header">
|
||||||
|
<BurgerMenu active={actionMenu} />
|
||||||
<div className="auth-header__navigation">
|
<div className="auth-header__navigation">
|
||||||
<div className="auth__logo">
|
<div className="auth__logo">
|
||||||
<div>
|
<div>
|
||||||
<SVG src={authIcon} />
|
<BurgerButton active={actionMenu} setActive={setActionMenu} />
|
||||||
</div>
|
</div>
|
||||||
<h3>IT GUILD</h3>
|
<h3>IT GUILD</h3>
|
||||||
<div>
|
<div>
|
||||||
|
@ -35,7 +35,7 @@
|
|||||||
display: none;
|
display: none;
|
||||||
|
|
||||||
@media (max-width: 431px) {
|
@media (max-width: 431px) {
|
||||||
display: block;
|
display: flex;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -2,6 +2,8 @@ import React, { useState } from "react";
|
|||||||
import SVG from "react-inlinesvg";
|
import SVG from "react-inlinesvg";
|
||||||
import { Link, NavLink } from "react-router-dom";
|
import { Link, NavLink } from "react-router-dom";
|
||||||
|
|
||||||
|
import { BurgerButton } from "@components/BurgerMenu/burgerButton";
|
||||||
|
import { BurgerMenu } from "@components/BurgerMenu/burgerMenu";
|
||||||
import { Footer } from "@components/Common/Footer/Footer";
|
import { Footer } from "@components/Common/Footer/Footer";
|
||||||
import ModalRegistration from "@components/Modal/ModalRegistration/ModalRegistration";
|
import ModalRegistration from "@components/Modal/ModalRegistration/ModalRegistration";
|
||||||
|
|
||||||
@ -11,23 +13,12 @@ import clue from "assets/icons/landingClue.svg";
|
|||||||
import tracker from "assets/icons/landingTracker.svg";
|
import tracker from "assets/icons/landingTracker.svg";
|
||||||
import codeBg from "assets/images/landingBackgroundCode.svg";
|
import codeBg from "assets/images/landingBackgroundCode.svg";
|
||||||
import cat from "assets/images/landingCat.png";
|
import cat from "assets/images/landingCat.png";
|
||||||
import ITguild from "assets/images/logo/ITguild.svg";
|
|
||||||
|
|
||||||
import "./landing.scss";
|
import "./landing.scss";
|
||||||
|
|
||||||
export const Landing = () => {
|
export const Landing = () => {
|
||||||
const [active, setActive] = useState(false);
|
|
||||||
const [modalReg, setModalReg] = useState(false);
|
const [modalReg, setModalReg] = useState(false);
|
||||||
|
const [menuActive, setMenuActive] = useState(false);
|
||||||
const toggleBar = () => {
|
|
||||||
if (active) {
|
|
||||||
setActive(false);
|
|
||||||
document.body.style.overflow = "auto";
|
|
||||||
} else {
|
|
||||||
setActive(true);
|
|
||||||
document.body.style.overflow = "hidden";
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const opportunities = [
|
const opportunities = [
|
||||||
{
|
{
|
||||||
@ -66,6 +57,7 @@ export const Landing = () => {
|
|||||||
return (
|
return (
|
||||||
<section className="landing">
|
<section className="landing">
|
||||||
<ModalRegistration active={modalReg} setActive={setModalReg} />
|
<ModalRegistration active={modalReg} setActive={setModalReg} />
|
||||||
|
<BurgerMenu active={menuActive} />
|
||||||
<div className="landing__container">
|
<div className="landing__container">
|
||||||
<div className="landing__head">
|
<div className="landing__head">
|
||||||
<h2 className="head__logo">ITGUILD</h2>
|
<h2 className="head__logo">ITGUILD</h2>
|
||||||
@ -83,20 +75,7 @@ export const Landing = () => {
|
|||||||
<SVG src={authIcon} />
|
<SVG src={authIcon} />
|
||||||
регистрация
|
регистрация
|
||||||
</div>
|
</div>
|
||||||
<div className="burger-menu" onClick={() => toggleBar()}>
|
<BurgerButton active={menuActive} setActive={setMenuActive} />
|
||||||
<div className="burger">
|
|
||||||
<div
|
|
||||||
className={active ? "burger__line l1 change" : "burger__line"}
|
|
||||||
></div>
|
|
||||||
<div
|
|
||||||
className={active ? "burger__line l2 change" : "burger__line"}
|
|
||||||
></div>
|
|
||||||
<div
|
|
||||||
className={active ? "burger__line l3 change" : "burger__line"}
|
|
||||||
></div>
|
|
||||||
</div>
|
|
||||||
<h3 className="burger-menu__logo">меню</h3>
|
|
||||||
</div>
|
|
||||||
<div className="head__tracker">
|
<div className="head__tracker">
|
||||||
<div>
|
<div>
|
||||||
<img src={tracker} alt="tracker" />
|
<img src={tracker} alt="tracker" />
|
||||||
@ -153,41 +132,6 @@ export const Landing = () => {
|
|||||||
</div>
|
</div>
|
||||||
<Footer />
|
<Footer />
|
||||||
</div>
|
</div>
|
||||||
<div className={active ? "auth-body active" : "auth-body"}>
|
|
||||||
<div className="auth-body__title">
|
|
||||||
<img src={ITguild}></img>
|
|
||||||
</div>
|
|
||||||
<ul className="auth-body__navigation">
|
|
||||||
<li>
|
|
||||||
<Link to={"/auth"}>Вход</Link>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<Link to={"/profile"}>Личный кабинет</Link>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<Link to={"/tracker-intro"}>Трекер</Link>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<Link to={"/quiz"}>Тесты</Link>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<Link to={"/forms"}>Формы</Link>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="#">Школа</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="#">Контакты</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<Link to={"/blog"}>Блог</Link>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<Link to={"/frequently-asked-questions"}>FAQ</Link>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<p className="auth-body__politic">Политика конфиденциальности</p>
|
|
||||||
</div>
|
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@ -124,147 +124,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.burger-menu {
|
|
||||||
cursor: pointer;
|
|
||||||
display: flex;
|
|
||||||
column-gap: 14px;
|
|
||||||
margin: 0 auto;
|
|
||||||
z-index: 10;
|
|
||||||
|
|
||||||
@media (max-width: 431px) {
|
|
||||||
margin: 0;
|
|
||||||
z-index: 9;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__logo {
|
|
||||||
color: #838383;
|
|
||||||
font-weight: 700;
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 16.24px;
|
|
||||||
text-decoration: underline;
|
|
||||||
|
|
||||||
@media (max-width: 431px) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.burger {
|
|
||||||
padding: 1px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
row-gap: 3px;
|
|
||||||
|
|
||||||
@media (max-width: 431px) {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__line {
|
|
||||||
width: 19px;
|
|
||||||
border-radius: 39px;
|
|
||||||
height: 3.8px;
|
|
||||||
background-color: #a7ca60;
|
|
||||||
transition: 0.4s;
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
width: 10.6px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.l1.change {
|
|
||||||
transform: rotate(-45deg) translate(-5px, 5px);
|
|
||||||
}
|
|
||||||
.l2.change {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
.l3.change {
|
|
||||||
transform: rotate(45deg) translate(-5px, -5px);
|
|
||||||
width: 19px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-body {
|
|
||||||
padding: 40px 10px;
|
|
||||||
visibility: hidden;
|
|
||||||
transition: 0.2s ease-in-out;
|
|
||||||
opacity: 0;
|
|
||||||
z-index: 8;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
height: 100%;
|
|
||||||
background: #e1fccf;
|
|
||||||
width: 0;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: stretch;
|
|
||||||
|
|
||||||
&__title {
|
|
||||||
display: flex;
|
|
||||||
margin-top: 24px;
|
|
||||||
|
|
||||||
img {
|
|
||||||
width: 160px;
|
|
||||||
|
|
||||||
@media (max-width: 431px) {
|
|
||||||
width: 120px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__navigation {
|
|
||||||
margin-top: 28px;
|
|
||||||
padding: 0;
|
|
||||||
list-style: none;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
row-gap: 15px;
|
|
||||||
font-size: 20px;
|
|
||||||
line-height: 33px;
|
|
||||||
|
|
||||||
a,
|
|
||||||
a:hover,
|
|
||||||
a:active {
|
|
||||||
color: #000000;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__politic {
|
|
||||||
margin-top: 42px;
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 22px;
|
|
||||||
color: #000000;
|
|
||||||
|
|
||||||
@media (max-width: 431px) {
|
|
||||||
font-size: 11px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__contacts {
|
|
||||||
margin-top: 127px;
|
|
||||||
color: #000000;
|
|
||||||
h4 {
|
|
||||||
font-size: 20px;
|
|
||||||
line-height: 33px;
|
|
||||||
}
|
|
||||||
p {
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-body.active {
|
|
||||||
visibility: visible;
|
|
||||||
transition: 0.1s ease-in-out;
|
|
||||||
opacity: 1;
|
|
||||||
display: flex;
|
|
||||||
width: 66vw;
|
|
||||||
left: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
padding-left: 40px;
|
|
||||||
|
|
||||||
@media (max-width: 431px) {
|
|
||||||
width: 100vw;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&__info {
|
&__info {
|
||||||
|
@ -1,11 +1,15 @@
|
|||||||
import React, { useRef, useState } from "react";
|
import React, { useRef, useState } from "react";
|
||||||
import SVG from "react-inlinesvg";
|
import SVG from "react-inlinesvg";
|
||||||
|
import "swiper/css";
|
||||||
|
import { Navigation } from "swiper/modules";
|
||||||
|
import { Swiper, SwiperSlide } from "swiper/react";
|
||||||
|
import "swiper/scss/navigation";
|
||||||
|
|
||||||
import { AuthHeader } from "@components/Common/AuthHeader/AuthHeader";
|
import { AuthHeader } from "@components/Common/AuthHeader/AuthHeader";
|
||||||
import { Footer } from "@components/Common/Footer/Footer";
|
import { Footer } from "@components/Common/Footer/Footer";
|
||||||
|
|
||||||
import arrowReviewsLeft from "assets/icons/arrows/arrowReviewsLeft.png";
|
// import arrowReviewsLeft from "assets/icons/arrows/arrowReviewsLeft.png";
|
||||||
import arrowReviewsRight from "assets/icons/arrows/arrowReviewsRight.png";
|
// import arrowReviewsRight from "assets/icons/arrows/arrowReviewsRight.png";
|
||||||
import fileUploadIcon from "assets/icons/fileUploadIcon.svg";
|
import fileUploadIcon from "assets/icons/fileUploadIcon.svg";
|
||||||
import Ellipse from "assets/images/EllipseIntro.svg";
|
import Ellipse from "assets/images/EllipseIntro.svg";
|
||||||
import backgroundOpp from "assets/images/backgroundOpportunity.png";
|
import backgroundOpp from "assets/images/backgroundOpportunity.png";
|
||||||
@ -25,6 +29,40 @@ import portfolio from "assets/images/stackSteptsPortfolio.png";
|
|||||||
import "./stack.scss";
|
import "./stack.scss";
|
||||||
|
|
||||||
export const Stack = () => {
|
export const Stack = () => {
|
||||||
|
const reviews = [
|
||||||
|
{
|
||||||
|
name: "Александр Гузеев",
|
||||||
|
position: "Руководитель проекта ООО “ЭЛАР”",
|
||||||
|
avatar: reviewsImgMok,
|
||||||
|
content:
|
||||||
|
"Команда ITGUILD берется за решение широкого круга задач, не боясь при этом ни сжатых сроков, ни сложной специфики проектов, и успешно доводит их ло решения. Разаработчики Кирилла смогли не только усилить существующую команду разработки, став ее полноценной частью, но и привести в проект новые идеи, свои знания и опыт.",
|
||||||
|
id: 11
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Александр Гузеев",
|
||||||
|
position: "Руководитель проекта ООО “ЭЛАР”",
|
||||||
|
avatar: reviewsImgMok,
|
||||||
|
content:
|
||||||
|
"Команда ITGUILD берется за решение широкого круга задач, не боясь при этом ни сжатых сроков, ни сложной специфики проектов, и успешно доводит их ло решения. Разаработчики Кирилла смогли не только усилить существующую команду разработки, став ее полноценной частью, но и привести в проект новые идеи, свои знания и опыт.",
|
||||||
|
id: 12
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Александр Гузеев",
|
||||||
|
position: "Руководитель проекта ООО “ЭЛАР”",
|
||||||
|
avatar: reviewsImgMok,
|
||||||
|
content:
|
||||||
|
"Команда ITGUILD берется за решение широкого круга задач, не боясь при этом ни сжатых сроков, ни сложной специфики проектов, и успешно доводит их ло решения. Разаработчики Кирилла смогли не только усилить существующую команду разработки, став ее полноценной частью, но и привести в проект новые идеи, свои знания и опыт.",
|
||||||
|
id: 13
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Александр Гузеев",
|
||||||
|
position: "Руководитель проекта ООО “ЭЛАР”",
|
||||||
|
avatar: reviewsImgMok,
|
||||||
|
content:
|
||||||
|
"Команда ITGUILD берется за решение широкого круга задач, не боясь при этом ни сжатых сроков, ни сложной специфики проектов, и успешно доводит их ло решения. Разаработчики Кирилла смогли не только усилить существующую команду разработки, став ее полноценной частью, но и привести в проект новые идеи, свои знания и опыт.",
|
||||||
|
id: 14
|
||||||
|
}
|
||||||
|
];
|
||||||
const subjects = [
|
const subjects = [
|
||||||
{
|
{
|
||||||
name: "Backend",
|
name: "Backend",
|
||||||
@ -210,6 +248,12 @@ export const Stack = () => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const targetRef = useRef(null);
|
||||||
|
|
||||||
|
const handleScroll = () => {
|
||||||
|
targetRef.current.scrollIntoView({ behavior: "smooth" });
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section className="stack">
|
<section className="stack">
|
||||||
<AuthHeader />
|
<AuthHeader />
|
||||||
@ -235,7 +279,9 @@ export const Stack = () => {
|
|||||||
команды, в зависимости от потребностей и объема работы.
|
команды, в зависимости от потребностей и объема работы.
|
||||||
</p>
|
</p>
|
||||||
<div className="intro__links">
|
<div className="intro__links">
|
||||||
<button className="stack__button">оставить заявку</button>
|
<button className="stack__button" onClick={handleScroll}>
|
||||||
|
оставить заявку
|
||||||
|
</button>
|
||||||
<span className="intro__link">
|
<span className="intro__link">
|
||||||
Окунитесь в<br /> экосистему ITGUIL
|
Окунитесь в<br /> экосистему ITGUIL
|
||||||
</span>
|
</span>
|
||||||
@ -306,6 +352,7 @@ export const Stack = () => {
|
|||||||
<section className="stack__projects projects">
|
<section className="stack__projects projects">
|
||||||
<div className="stack__container projects__container">
|
<div className="stack__container projects__container">
|
||||||
<img className="projects__code" src={code} alt="code" />
|
<img className="projects__code" src={code} alt="code" />
|
||||||
|
<img src={noClue} alt="clue" className="projects__clue" />
|
||||||
<div className="projects__title">
|
<div className="projects__title">
|
||||||
<h3>ITGUILD</h3>
|
<h3>ITGUILD</h3>
|
||||||
</div>
|
</div>
|
||||||
@ -337,7 +384,7 @@ export const Stack = () => {
|
|||||||
поиском, оформлением или увольнением сотрудников —{" "}
|
поиском, оформлением или увольнением сотрудников —{" "}
|
||||||
<span>мы берем на себя все хлопоты.</span>
|
<span>мы берем на себя все хлопоты.</span>
|
||||||
</p>
|
</p>
|
||||||
<button>оставить заявку</button>
|
<button onClick={handleScroll}>оставить заявку</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -417,34 +464,37 @@ export const Stack = () => {
|
|||||||
<div className="reviews__content">
|
<div className="reviews__content">
|
||||||
<h4>Что о нас говорят</h4>
|
<h4>Что о нас говорят</h4>
|
||||||
<div className="reviews__content-container">
|
<div className="reviews__content-container">
|
||||||
<div className="review">
|
<Swiper
|
||||||
<div className="review__client">
|
modules={[Navigation]}
|
||||||
<img src={reviewsImgMok} alt="reviewsImgMok" />
|
spaceBetween={50}
|
||||||
<span>Александр Гузеев</span>
|
slidesPerView={1}
|
||||||
<p>Руководитель проекта ООО “ЭЛАР”</p>
|
navigation
|
||||||
</div>
|
>
|
||||||
|
{reviews.map((review) => (
|
||||||
|
<SwiperSlide key={review.id}>
|
||||||
|
<div className="review">
|
||||||
|
<div className="review__client">
|
||||||
|
<img src={review.avatar} alt="reviewsImgMok" />
|
||||||
|
<span>{review.name}</span>
|
||||||
|
<p>{review.position}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="review__comment">
|
<div className="review__comment">
|
||||||
<p>
|
<p>{review.content}</p>
|
||||||
Команда ITGUILD берется за решение широкого круга задач, не
|
</div>
|
||||||
боясь при этом ни сжатых сроков, ни сложной специфики
|
</div>
|
||||||
проектов, и успешно доводит их ло решения. <br />
|
</SwiperSlide>
|
||||||
<br />
|
))}
|
||||||
Разаработчики Кирилла смогли не только усилить существующую
|
</Swiper>
|
||||||
команду разработки, став ее полноценной частью, но и
|
|
||||||
привести в проект новые идеи, свои знания и опыт.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="reviews__content-buttons">
|
{/* <div className="reviews__content-buttons">
|
||||||
<button>
|
<button>
|
||||||
<img src={arrowReviewsLeft} alt="" />
|
<img src={arrowReviewsLeft} alt="" />
|
||||||
</button>
|
</button>
|
||||||
<button>
|
<button>
|
||||||
<img src={arrowReviewsRight} alt="" />
|
<img src={arrowReviewsRight} alt="" />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div> */}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<img
|
<img
|
||||||
@ -469,7 +519,9 @@ export const Stack = () => {
|
|||||||
<div className="contact__block">
|
<div className="contact__block">
|
||||||
<div className="contact-info">
|
<div className="contact-info">
|
||||||
<img src={noClue} alt="clue" />
|
<img src={noClue} alt="clue" />
|
||||||
<h3 className="info__title">ПОИСК</h3>
|
<h3 className="info__title" ref={targetRef}>
|
||||||
|
ПОИСК
|
||||||
|
</h3>
|
||||||
<div className="info-content">
|
<div className="info-content">
|
||||||
<div className="info-content__title">
|
<div className="info-content__title">
|
||||||
<p>
|
<p>
|
||||||
@ -591,7 +643,7 @@ export const Stack = () => {
|
|||||||
<div className="form-submit">
|
<div className="form-submit">
|
||||||
<div className="form-submit__agreement">
|
<div className="form-submit__agreement">
|
||||||
<input
|
<input
|
||||||
type="radio"
|
type="checkbox"
|
||||||
name="agreement"
|
name="agreement"
|
||||||
checked={formData.agreement}
|
checked={formData.agreement}
|
||||||
onChange={handleChange}
|
onChange={handleChange}
|
||||||
|
@ -637,6 +637,18 @@
|
|||||||
top: 24px;
|
top: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&__clue {
|
||||||
|
display: none;
|
||||||
|
@media (max-width: 431px) {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 2;
|
||||||
|
right: auto;
|
||||||
|
width: auto;
|
||||||
|
top: -120px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
&__title {
|
&__title {
|
||||||
@media (max-width: 431px) {
|
@media (max-width: 431px) {
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -1222,6 +1234,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&__content {
|
&__content {
|
||||||
|
width: 100%;
|
||||||
margin: 0 0 45px 0;
|
margin: 0 0 45px 0;
|
||||||
|
|
||||||
h4 {
|
h4 {
|
||||||
@ -1238,10 +1251,37 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&-container {
|
&-container {
|
||||||
display: flex;
|
width: 650px;
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
@media (max-width: 431px) {
|
||||||
column-gap: 20px;
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.swiper {
|
||||||
|
padding-left: 65px;
|
||||||
|
|
||||||
|
@media (max-width: 431px) {
|
||||||
|
padding: 40px 0 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-slide {
|
||||||
|
@media (max-width: 431px) {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-button-prev {
|
||||||
|
@media (max-width: 431px) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-button-next {
|
||||||
|
@media (max-width: 431px) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.review {
|
.review {
|
||||||
display: grid;
|
display: grid;
|
||||||
@ -1760,10 +1800,36 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&__agreement {
|
&__agreement {
|
||||||
display: flex;
|
display: grid;
|
||||||
|
align-items: center;
|
||||||
|
grid-template-columns: 7% 93%;
|
||||||
|
justify-items: center;
|
||||||
|
|
||||||
input {
|
input {
|
||||||
accent-color: #607536;
|
width: 7px;
|
||||||
|
height: 7px;
|
||||||
|
border-radius: 50%;
|
||||||
|
vertical-align: middle;
|
||||||
|
appearance: none;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
outline: none;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
&:checked {
|
||||||
|
background-color: #435225;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
border: 0.4px solid #607536;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
|
Loading…
Reference in New Issue
Block a user