landing page of the main page and adaptive
This commit is contained in:
parent
94136c97e6
commit
1c6ef0f72c
3
src/assets/icons/landingTracker.svg
Normal file
3
src/assets/icons/landingTracker.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M13.1739 0.793518H5.78256C5.19447 0.793518 4.63047 1.02714 4.21462 1.44298C3.79878 1.85882 3.56516 2.42282 3.56516 3.01091V3.75004H2.82603C2.23795 3.75004 1.67394 3.98366 1.2581 4.3995C0.84226 4.81534 0.608643 5.37934 0.608643 5.96743V13.3587C0.608643 13.9468 0.84226 14.5108 1.2581 14.9267C1.67394 15.3425 2.23795 15.5761 2.82603 15.5761H10.2173C10.8054 15.5761 11.3694 15.3425 11.7853 14.9267C12.2011 14.5108 12.4347 13.9468 12.4347 13.3587V12.6196H13.1739C13.7619 12.6196 14.326 12.386 14.7418 11.9701C15.1576 11.5543 15.3913 10.9903 15.3913 10.4022V3.01091C15.3913 2.42282 15.1576 1.85882 14.7418 1.44298C14.326 1.02714 13.7619 0.793518 13.1739 0.793518ZM10.9565 13.3587C10.9565 13.5548 10.8786 13.7428 10.74 13.8814C10.6014 14.02 10.4134 14.0979 10.2173 14.0979H2.82603C2.63 14.0979 2.442 14.02 2.30339 13.8814C2.16478 13.7428 2.0869 13.5548 2.0869 13.3587V8.18482H10.9565V13.3587ZM10.9565 6.70656H2.0869V5.96743C2.0869 5.7714 2.16478 5.5834 2.30339 5.44479C2.442 5.30617 2.63 5.2283 2.82603 5.2283H10.2173C10.4134 5.2283 10.6014 5.30617 10.74 5.44479C10.8786 5.5834 10.9565 5.7714 10.9565 5.96743V6.70656ZM13.913 10.4022C13.913 10.5982 13.8351 10.7862 13.6965 10.9249C13.5579 11.0635 13.3699 11.1413 13.1739 11.1413H12.4347V5.96743C12.4327 5.71528 12.3877 5.46532 12.3017 5.2283H13.913V10.4022ZM13.913 3.75004H5.04343V3.01091C5.04343 2.81488 5.1213 2.62688 5.25991 2.48827C5.39853 2.34965 5.58653 2.27178 5.78256 2.27178H13.1739C13.3699 2.27178 13.5579 2.34965 13.6965 2.48827C13.8351 2.62688 13.913 2.81488 13.913 3.01091V3.75004Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 163 KiB After Width: | Height: | Size: 188 KiB |
|
Before Width: | Height: | Size: 6.7 KiB After Width: | Height: | Size: 6.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 29 KiB |
@ -1,38 +1,59 @@
|
||||
import React from "react";
|
||||
import React, { useState } from "react";
|
||||
import SVG from "react-inlinesvg";
|
||||
import { Link } from "react-router-dom";
|
||||
import { Link, NavLink } from "react-router-dom";
|
||||
|
||||
import { Footer } from "@components/Common/Footer/Footer";
|
||||
|
||||
import arrow from "assets/icons/arrows/arrowLanding.svg";
|
||||
import authIcon from "assets/icons/authIcon.svg";
|
||||
import clue from "assets/icons/landingClue.svg";
|
||||
import tracker from "assets/icons/landingTracker.svg";
|
||||
import codeBg from "assets/images/landingBackgroundCode.svg";
|
||||
import cat from "assets/images/landingCat.png";
|
||||
import ITguild from "assets/images/logo/ITguild.svg";
|
||||
|
||||
import "./landing.scss";
|
||||
|
||||
export const Landing = () => {
|
||||
const [active, setActive] = useState(false);
|
||||
|
||||
const toggleBar = () => {
|
||||
if (active) {
|
||||
setActive(false);
|
||||
} else {
|
||||
setActive(true);
|
||||
}
|
||||
};
|
||||
|
||||
const opportunities = [
|
||||
{
|
||||
name: "<span>Аутстаффинг</span> сотрудников",
|
||||
class: "outstaffing__employees",
|
||||
path: "/stack",
|
||||
img: cat
|
||||
},
|
||||
{
|
||||
name: "Модуль для видеоконференций"
|
||||
name: "<span>Найти</span> работу <br/> в IT",
|
||||
path: "/stack",
|
||||
img: cat
|
||||
},
|
||||
{
|
||||
name: "Система контроля версий GIT"
|
||||
name: "<span>Система</span> контроля версий GIT",
|
||||
path: "/stack",
|
||||
img: cat
|
||||
},
|
||||
{
|
||||
name: "Управление задачами"
|
||||
name: "<span>Управление</span> задачами",
|
||||
path: "/stack",
|
||||
img: cat
|
||||
},
|
||||
{
|
||||
name: "Система для отчётности"
|
||||
name: "<span>Система</span> для отчётности",
|
||||
path: "/stack",
|
||||
img: cat
|
||||
},
|
||||
{
|
||||
name: "Все наши предложения",
|
||||
path: "/stack",
|
||||
class: "outstaffing__offers",
|
||||
img: arrow
|
||||
}
|
||||
@ -48,8 +69,29 @@ export const Landing = () => {
|
||||
</Link>
|
||||
<Link className="head__signUp" to="/auth">
|
||||
<SVG src={authIcon} />
|
||||
авторизация
|
||||
регистрация
|
||||
</Link>
|
||||
<div className="burger-menu" 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-menu__logo">меню</h3>
|
||||
</div>
|
||||
<div className="head__tracker">
|
||||
<div>
|
||||
<img src={tracker} alt="tracker" />
|
||||
</div>
|
||||
<span>трекер</span>
|
||||
</div>
|
||||
<SVG className="head__auth" src={authIcon} />
|
||||
</div>
|
||||
<div className="landing__info">
|
||||
<p className="info__title">
|
||||
@ -75,13 +117,13 @@ export const Landing = () => {
|
||||
<div className="landing__opportunities">
|
||||
{opportunities.map((opportunity, index) => {
|
||||
return (
|
||||
<div
|
||||
<NavLink
|
||||
className={
|
||||
opportunity.class ? opportunity.class : "landing__opportunity"
|
||||
}
|
||||
key={index}
|
||||
to={`${opportunity.path}`}
|
||||
>
|
||||
{opportunity.class ? (
|
||||
<div>
|
||||
<p dangerouslySetInnerHTML={{ __html: opportunity.name }} />
|
||||
{opportunity.img ? (
|
||||
@ -90,15 +132,47 @@ export const Landing = () => {
|
||||
""
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<p>{opportunity.name}</p>
|
||||
)}
|
||||
</div>
|
||||
</NavLink>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<Footer />
|
||||
</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>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
.landing {
|
||||
background: #EEEEEE;
|
||||
background: #eeeeee;
|
||||
min-height: 100vh;
|
||||
padding: 20px 0;
|
||||
font-family: "GT Eesti Pro Display";
|
||||
@ -15,27 +15,37 @@
|
||||
|
||||
&__head {
|
||||
display: flex;
|
||||
column-gap: 35px;
|
||||
column-gap: 45px;
|
||||
align-items: center;
|
||||
z-index: 1;
|
||||
|
||||
@media (max-width: 431px) {
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
.head {
|
||||
&__logo {
|
||||
margin-bottom: 0;
|
||||
color: rgba(74, 74, 74, 1);
|
||||
font-size: 35px;
|
||||
color: #4a4a4a;
|
||||
font-size: 44px;
|
||||
font-weight: 900;
|
||||
position: relative;
|
||||
letter-spacing: 4px;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
content: "";
|
||||
position: absolute;
|
||||
background: rgba(167, 202, 96, 1);
|
||||
width: 31px;
|
||||
height: 31px;
|
||||
border-radius: 50px;
|
||||
left: 39%;
|
||||
left: 41%;
|
||||
top: -35px;
|
||||
}
|
||||
|
||||
@media (max-width: 431px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__signIn {
|
||||
@ -45,6 +55,10 @@
|
||||
background: rgba(167, 202, 96, 1);
|
||||
font-weight: 400;
|
||||
border-radius: 32px;
|
||||
|
||||
@media (max-width: 431px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__signUp {
|
||||
@ -55,8 +69,176 @@
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
text-decoration: underline;
|
||||
|
||||
@media (max-width: 431px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__tracker {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
column-gap: 5px;
|
||||
border-radius: 38px;
|
||||
background-color: #ffffff;
|
||||
border: 0.5px solid #e3e3e9;
|
||||
padding: 6px 20px 6px 6px;
|
||||
margin: 0 auto;
|
||||
|
||||
@media (max-width: 431px) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #4a4a4a;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #a7ca60;
|
||||
border-radius: 62px;
|
||||
border: 3px solid #ffffff;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
}
|
||||
}
|
||||
|
||||
&__auth {
|
||||
display: none;
|
||||
|
||||
@media (max-width: 431px) {
|
||||
display: block;
|
||||
margin: 0 0 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
.burger-menu {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
column-gap: 14px;
|
||||
margin: 0 auto;
|
||||
|
||||
@media (max-width: 431px) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__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: 99;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
&__navigation {
|
||||
margin-top: 28px;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
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;
|
||||
}
|
||||
|
||||
&__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: 24%;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&__info {
|
||||
@ -66,12 +248,11 @@
|
||||
margin-top: 75px;
|
||||
column-gap: 45px;
|
||||
|
||||
|
||||
.info {
|
||||
&__title {
|
||||
font-weight: 900;
|
||||
font-size: 49px;
|
||||
color: #4A4A4A;
|
||||
color: #4a4a4a;
|
||||
max-width: 444px;
|
||||
line-height: 1;
|
||||
position: relative;
|
||||
@ -83,16 +264,24 @@
|
||||
}
|
||||
|
||||
span {
|
||||
color: #A7CA60;
|
||||
color: #a7ca60;
|
||||
}
|
||||
}
|
||||
|
||||
&__block {
|
||||
backdrop-filter: blur(8.699999809265137px);
|
||||
box-shadow: 10px 9px 14px 0 rgba(0, 0, 0, 0.03);
|
||||
background: linear-gradient(137deg, rgba(255, 255, 255, 0.34) 0%, rgba(239, 239, 239, 0.34) 100%);
|
||||
background: linear-gradient(
|
||||
137deg,
|
||||
rgba(255, 255, 255, 0.34) 0%,
|
||||
rgba(239, 239, 239, 0.34) 100%
|
||||
);
|
||||
border: 0.5px solid;
|
||||
border-image-source: linear-gradient(137.79deg, #FFFFFF 9.15%, #F4F4F4 76.22%);
|
||||
border-image-source: linear-gradient(
|
||||
137.79deg,
|
||||
#ffffff 9.15%,
|
||||
#f4f4f4 76.22%
|
||||
);
|
||||
border-radius: 8px;
|
||||
padding: 59px 89px 68px 102px;
|
||||
position: relative;
|
||||
@ -110,6 +299,9 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (max-width: 431px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__background {
|
||||
@ -117,7 +309,7 @@
|
||||
right: -200px;
|
||||
top: -100px;
|
||||
h3 {
|
||||
font-family: 'Geraspoheko';
|
||||
font-family: "Geraspoheko";
|
||||
color: rgba(255, 255, 255, 1);
|
||||
font-size: 343px;
|
||||
font-weight: 400;
|
||||
@ -135,11 +327,11 @@
|
||||
position: absolute;
|
||||
width: 360px;
|
||||
height: 134px;
|
||||
right: -110px;
|
||||
right: -5px;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 82px;
|
||||
height: 82px;
|
||||
@ -148,22 +340,109 @@
|
||||
right: 160px;
|
||||
bottom: -75px;
|
||||
}
|
||||
|
||||
@media (max-width: 431px) {
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
|
||||
h3 {
|
||||
font-size: 180px;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__opportunities {
|
||||
margin: 120px 0;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
|
||||
|
||||
@media (max-width: 431px) {
|
||||
grid-template-columns: 50% 50%;
|
||||
padding: 0 40px;
|
||||
column-gap: 30px;
|
||||
row-gap: 19px;
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
&__opportunity {
|
||||
padding: 40px 60px;
|
||||
padding: 52px 60px;
|
||||
|
||||
@media (max-width: 431px) {
|
||||
padding: 0;
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background-color: #4a4a4a;
|
||||
border-radius: 18px;
|
||||
padding: 30px 10px 5px 10px;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font-weight: 500;
|
||||
font-size: 20px;
|
||||
line-height: 107%;
|
||||
color: rgba(131, 131, 131, 1);
|
||||
line-height: 21.4px;
|
||||
color: #838383;
|
||||
|
||||
@media (max-width: 431px) {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 14.12px;
|
||||
text-align: center;
|
||||
min-height: 55px;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
display: none;
|
||||
position: absolute;
|
||||
right: -50px;
|
||||
bottom: -15px;
|
||||
|
||||
@media (max-width: 431px) {
|
||||
display: block;
|
||||
position: relative;
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 432px) {
|
||||
&:hover {
|
||||
padding: 16px 12px 14px 2px;
|
||||
border-right: 1px solid rgba(245, 245, 245, 1);
|
||||
border-bottom: 1px solid rgba(245, 245, 245, 1);
|
||||
cursor: pointer;
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
background: linear-gradient(95.54deg, #ffffff 5.13%, #eeeeee 97.48%);
|
||||
border-radius: 5px;
|
||||
padding: 24px 0px 25px 33px;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
p {
|
||||
font-weight: 700;
|
||||
color: rgba(74, 74, 74, 1);
|
||||
max-width: 165px;
|
||||
|
||||
span {
|
||||
color: rgba(167, 202, 96, 1);
|
||||
}
|
||||
}
|
||||
img {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -183,42 +462,13 @@
|
||||
border-right: 1px solid rgba(245, 245, 245, 1);
|
||||
}
|
||||
|
||||
.outstaffing__employees {
|
||||
padding: 16px 12px 14px 2px;
|
||||
border-right: 1px solid rgba(245, 245, 245, 1);
|
||||
border-bottom: 1px solid rgba(245, 245, 245, 1);
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
background: linear-gradient(95.54deg, #FFFFFF 5.13%, #EEEEEE 97.48%);
|
||||
border-radius: 5px;
|
||||
padding: 24px 0px 25px 33px;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
p {
|
||||
font-weight: 700;
|
||||
font-size: 20px;
|
||||
line-height: 21.4px;
|
||||
color: rgba(74, 74, 74, 1);
|
||||
max-width: 135px;
|
||||
|
||||
span {
|
||||
color: rgba(167, 202, 96, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
right: -50px;
|
||||
bottom: -15px;
|
||||
}
|
||||
}
|
||||
|
||||
.outstaffing__offers {
|
||||
padding: 10px 0 25px 10px;
|
||||
cursor: pointer;
|
||||
|
||||
@media (max-width: 431px) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
@ -229,6 +479,11 @@
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
@media (max-width: 431px) {
|
||||
height: 262px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
color: rgba(167, 202, 96, 1);
|
||||
font-weight: 500;
|
||||
|
||||
@ -9,8 +9,8 @@ import Ellipse from "assets/images/EllipseIntro.svg";
|
||||
import backgroundOpp from "assets/images/backgroundOpportunity.png";
|
||||
import cat from "assets/images/cat.png";
|
||||
import clue from "assets/images/clue.png";
|
||||
import code1 from "assets/images/landingBackgroundCode1.png";
|
||||
import code from "assets/images/landingBackgroundCode.png";
|
||||
import codeWhite from "assets/images/landingBackgroundCodeWhite.png";
|
||||
import reviewsImgMok from "assets/images/reviewsImgMok.png";
|
||||
import flag from "assets/images/stackProjectsFlag.png";
|
||||
import fly from "assets/images/stackProjectsFly.png";
|
||||
@ -325,12 +325,12 @@ export const Stack = () => {
|
||||
</div>
|
||||
<img
|
||||
className="reviews__code reviews__code--first"
|
||||
src={code1}
|
||||
src={codeWhite}
|
||||
alt="code"
|
||||
/>
|
||||
<img
|
||||
className="reviews__code reviews__code--second"
|
||||
src={code1}
|
||||
src={codeWhite}
|
||||
alt="code"
|
||||
/>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user