apuc/guild_front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

layout of the outstaffing page

Browse Source
This commit is contained in:
Никита Губарь 2024-05-01 14:53:28 +03:00
parent 3f46d60720
commit 4810412bd7
6 changed files with 309 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/icons/arrows/arrowReviewsLeft.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 298 B

BIN
src/assets/icons/arrows/arrowReviewsRight.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 296 B

BIN
src/assets/images/landingBackgroundCode1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.7 KiB

BIN
src/assets/images/reviewsImgMok.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

69
src/pages/Stack/Stack.jsx
View File

@ -3,11 +3,15 @@ import SVG from "react-inlinesvg";
import { AuthHeader } from "@components/Common/AuthHeader/AuthHeader";
import arrowReviewsLeft from "assets/icons/arrows/arrowReviewsLeft.png";
import arrowReviewsRight from "assets/icons/arrows/arrowReviewsRight.png";
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 reviewsImgMok from "assets/images/reviewsImgMok.png";
import flag from "assets/images/stackProjectsFlag.png";
import fly from "assets/images/stackProjectsFly.png";
import hand from "assets/images/stackProjectsHand.png";
@ -94,6 +98,7 @@ export const Stack = () => {
info: "<span>интеграция специалистов</span> в команду клиента, ежедневная отчетность под контролем менеджера ITGUILD"
}
];
return (
<section className="stack">
<AuthHeader />
@ -269,6 +274,70 @@ export const Stack = () => {
</div>
<img src={backgroundOpp} className="steps__background" />
</section>
<section className="stack__reviews">
<div className="stack__container reviews__container">
<div className="reviews__info">
<div className="reviews__info-counter">375</div>
<span>Довольных клиентов</span>
<p>
Предоставляем на аутстаффинг frontend- и backend - разработчиков
уровня от junior до middle+
</p>
<p>
Можем сделать оценку проекта, ревью кода, составить коммерческое
предложение, рекомендации касаемо стека технологий и организации
архитектуры разрабатываемого проекта.
</p>
</div>
<div className="reviews__content">
<h4>Что о нас говорят</h4>
<div className="reviews__content-container">
<div className="review">
<div className="review__client">
<img src={reviewsImgMok} alt="reviewsImgMok" />
<span>Александр Гузеев</span>
<p>Руководитель проекта ООО “ЭЛАР”</p>
</div>
<div className="review__comment">
<p>
Команда ITGUILD берется за решение широкого круга задач, не
боясь при этом ни сжатых сроков, ни сложной специфики
проектов, и успешно доводит их ло решения. <br />
<br />
Разаработчики Кирилла смогли не только усилить существующую
команду разработки, став ее полноценной частью, но и
привести в проект новые идеи, свои знания и опыт.
</p>
</div>
</div>
<div className="reviews__content-buttons">
<button>
<img src={arrowReviewsLeft} alt="" />
</button>
<button>
<img src={arrowReviewsRight} alt="" />
</button>
</div>
</div>
</div>
<img
className="reviews__code reviews__code--first"
src={code1}
alt="code"
/>
<img
className="reviews__code reviews__code--second"
src={code1}
alt="code"
/>
</div>
</section>
<section className="stack__contact">
<div className="stack__container contact__container"></div>
</section>
</section>
);
};

265
src/pages/Stack/stack.scss
View File

@ -9,7 +9,7 @@
display: flex;
}
&__intro {
background: #EEEEEE;
background: #eeeeee;
.intro {
&__container {
@ -32,7 +32,7 @@
&__title {
font-weight: 900;
color: #A7CA60;
color: #a7ca60;
font-size: 88px;
text-transform: uppercase;
letter-spacing: 0.03em;
@ -44,12 +44,12 @@
letter-spacing: 0.05em;
font-size: 39px;
font-weight: 700;
color: #4A4A4A;
color: #4a4a4a;
}
&__about {
max-width: 380px;
color: #4A4A4A;
color: #4a4a4a;
font-size: 14px;
font-weight: 250;
margin-bottom: 34px;
@ -68,14 +68,14 @@
&__link {
font-weight: 700;
font-size: 12px;
color: #A7CA60;
color: #a7ca60;
}
&__ellipse {
z-index: 1;
top: 45%;
left:50%;
transform:translate(-50%, -50%);
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
}
@ -96,7 +96,11 @@
position: absolute;
backdrop-filter: blur(8.699999809265137px);
box-shadow: 10px 9px 14px 0 rgba(0, 0, 0, 0.06);
background: linear-gradient(137deg, rgba(255, 255, 255, 0.34) 0%, rgba(206, 198, 198, 0.34) 100%);
background: linear-gradient(
137deg,
rgba(255, 255, 255, 0.34) 0%,
rgba(206, 198, 198, 0.34) 100%
);
border-radius: 8px;
top: -35px;
left: -25px;
@ -106,7 +110,7 @@
.aside {
&__logo {
z-index: 2;
font-family: 'Geraspoheko';
font-family: "Geraspoheko";
color: white;
font-size: 343px;
position: absolute;
@ -119,7 +123,11 @@
position: absolute;
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(206, 198, 198, 0.34) 100%);
background: linear-gradient(
137deg,
rgba(255, 255, 255, 0.34) 0%,
rgba(206, 198, 198, 0.34) 100%
);
border-radius: 8px;
width: 182px;
height: 106px;
@ -129,7 +137,11 @@
display: flex;
padding: 24px 20px 18px 30px;
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%
);
p {
color: rgba(141, 141, 141, 1);
@ -146,7 +158,7 @@
img {
position: absolute;
top: -25px;
left: 0 ;
left: 0;
}
&:before {
@ -176,16 +188,16 @@
&__button {
max-width: 200px;
width: 100%;
background: #A7CA60;
background: #a7ca60;
font-size: 15px;
color: #4A4A4A;
color: #4a4a4a;
padding: 14px 0;
border-radius: 44px;
border: none;
}
&__opportunity {
background: #1E1E1E;
background: #1e1e1e;
position: relative;
.background__opportunity--left {
@ -201,7 +213,6 @@
}
.opportunity {
&__container {
padding: 105px 0 0px;
flex-direction: column;
@ -223,7 +234,7 @@
display: flex;
}
&__title {
font-family: 'Geraspoheko';
font-family: "Geraspoheko";
font-weight: 400;
font-size: 343px;
line-height: 1.03;
@ -231,7 +242,7 @@
z-index: 2;
background: linear-gradient(360deg, #171717 0%, #2a2a2a 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent
-webkit-text-fill-color: transparent;
}
&__info {
@ -267,7 +278,11 @@
border-radius: 8px;
backdrop-filter: blur(8.699999809265137px);
box-shadow: 10px 9px 14px 0 rgba(0, 0, 0, 0.06);
background: linear-gradient(137deg, rgba(87, 87, 87, 0.34) 0%, rgba(104, 104, 104, 0.34) 100%);
background: linear-gradient(
137deg,
rgba(87, 87, 87, 0.34) 0%,
rgba(104, 104, 104, 0.34) 100%
);
position: relative;
border: 0.5px solid #717171;
@ -301,6 +316,7 @@
flex-direction: column;
h4 {
text-transform: uppercase;
color: rgba(167, 202, 96, 1);
letter-spacing: 0.03em;
font-weight: 900;
@ -347,7 +363,10 @@
&__title {
font-weight: 400;
font-size: 343px;
color: white;
background: linear-gradient(to bottom, #ffffff, #dbdbdb);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-family: "Geraspoheko";
margin: 0 auto;
position: absolute;
@ -355,6 +374,7 @@
text-align: center;
top: -50px;
z-index: 2;
filter: drop-shadow(0px 0px 30px #00000021);
}
&__block {
@ -389,7 +409,7 @@
border-radius: 8px;
width: 99px;
height: 81px;
background: #A7CA60;
background: #a7ca60;
position: relative;
img {
@ -475,7 +495,6 @@
position: relative;
.steps {
&__container {
flex-direction: column;
}
@ -558,14 +577,17 @@
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(8.6999998093px);
backdrop-filter: blur(3px);
box-shadow: 10px 9px 14px 0 rgba(0, 0, 0, 0.06);
background: linear-gradient(137deg, rgba(87, 87, 87, 0.34) 0%, rgba(104, 104, 104, 0.34) 100%);
background: linear-gradient(
137deg,
rgba(87, 87, 87, 0.34) 0%,
rgba(104, 104, 104, 0.34) 100%
);
border: 0.5px solid #717171;
border-radius: 8px;
.item {
&__info {
font-size: 15px;
line-height: 131%;
@ -612,4 +634,197 @@
top: -260px;
}
}
&__reviews {
background-color: #eeeeee;
.reviews {
&__container {
align-items: center;
column-gap: 58px;
padding-bottom: 48px;
}
&__code {
position: absolute;
mix-blend-mode: plus-lighter;
&--first {
top: 90px;
left: -180px;
}
&--second {
bottom: 0;
left: 400px;
}
}
&__info {
display: flex;
flex-direction: column;
align-items: flex-start;
background-color: #a7ca60;
border-radius: 24px 0 113px 0;
padding: 50px 22px 64px 44px;
max-width: 311px;
z-index: 1;
&::before {
content: "";
width: 182px;
height: 106px;
position: absolute;
backdrop-filter: blur(8.699999809265137px);
box-shadow: 10px 9px 14px 0 rgba(0, 0, 0, 0.06);
background: linear-gradient(
137deg,
rgba(255, 255, 255, 0.34) 0%,
rgba(206, 198, 198, 0.34) 100%
);
border-radius: 8px;
top: 62px;
left: 200px;
}
&::after {
content: "";
width: 182px;
height: 106px;
position: absolute;
backdrop-filter: blur(8.699999809265137px);
box-shadow: 10px 9px 14px 0 rgba(0, 0, 0, 0.06);
background: linear-gradient(
137deg,
rgba(255, 255, 255, 0.34) 0%,
rgba(206, 198, 198, 0.34) 100%
);
border-radius: 8px;
bottom: -30px;
left: -100px;
}
&-counter {
color: #ffffff;
font-weight: 900;
font-size: 124px;
line-height: 122px;
}
span {
color: #ffffff;
font-weight: 900;
font-size: 29px;
line-height: 31.61px;
text-transform: uppercase;
margin-bottom: 28px;
}
p {
color: #607536;
font-weight: 700;
font-size: 14px;
line-height: 17.22px;
&:last-child {
color: #ffffff;
font-weight: 300;
font-size: 14px;
margin-top: 37px;
}
}
}
&__content {
margin: 0 0 45px 0;
h4 {
text-transform: uppercase;
color: #4a4a4a;
font-weight: 900;
font-size: 46px;
line-height: 45.26px;
margin-bottom: 24px;
}
&-container {
display: flex;
flex-direction: row;
align-items: center;
column-gap: 20px;
.review {
display: grid;
grid-template-columns: 45% 55%;
align-items: center;
max-width: 517px;
padding: 35px;
border-radius: 8px;
border: 0.5px solid #ffffff;
background: linear-gradient(137deg, #ffffff -10%, #dddddd 100%);
box-shadow: inset;
&__client {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
color: #7e7e7e;
font-weight: 300;
font-size: 14px;
line-height: 16.24px;
margin-right: 48px;
img {
width: 88px;
height: 88px;
border-radius: 100px;
}
span {
color: #1e1e1e;
font-weight: 500;
font-size: 17px;
line-height: 19.72px;
margin: 18px 0 16px 0;
}
}
&__comment {
color: #4a4a4a;
font-weight: 250;
font-size: 14px;
line-height: 17px;
}
}
}
&-buttons {
display: flex;
flex-direction: column;
align-items: center;
button {
background-color: #ffffff;
width: 70px;
height: 64px;
border-radius: 5px;
border: none;
}
button:first-child {
margin-bottom: 22px;
}
}
}
}
}
&__contact {
background-color: #1e1e1e;
.contact {
&__container {
}
}
}
}