layout pages outstaffing and main page, refactor
footer and adaptive footer, add font BebasNeue
This commit is contained in:
@ -1,7 +1,8 @@
|
||||
import React from "react";
|
||||
import React, { useState } from "react";
|
||||
import SVG from "react-inlinesvg";
|
||||
|
||||
import { AuthHeader } from "@components/Common/AuthHeader/AuthHeader";
|
||||
import { Footer } from "@components/Common/Footer/Footer";
|
||||
|
||||
import arrowReviewsLeft from "assets/icons/arrows/arrowReviewsLeft.png";
|
||||
import arrowReviewsRight from "assets/icons/arrows/arrowReviewsRight.png";
|
||||
@ -99,6 +100,65 @@ export const Stack = () => {
|
||||
}
|
||||
];
|
||||
|
||||
const [error, setError] = useState({
|
||||
name: false,
|
||||
companyName: false,
|
||||
email: false,
|
||||
phoneNumber: false,
|
||||
requestDescription: false,
|
||||
agreement: false
|
||||
});
|
||||
|
||||
const [formData, setFormData] = useState({
|
||||
name: "",
|
||||
companyName: "",
|
||||
email: "",
|
||||
phoneNumber: "",
|
||||
requestDescription: "",
|
||||
file: null,
|
||||
agreement: false
|
||||
});
|
||||
|
||||
const handleChange = (e) => {
|
||||
const { name, value, type, checked } = e.target;
|
||||
setFormData((prevState) => ({
|
||||
...prevState,
|
||||
[name]: type === "checkbox" ? checked : value
|
||||
}));
|
||||
};
|
||||
|
||||
const handleSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
const newError = {
|
||||
name: !formData.name.trim(),
|
||||
companyName: !formData.companyName.trim(),
|
||||
email: !formData.email.trim(),
|
||||
phoneNumber: !formData.phoneNumber.trim(),
|
||||
requestDescription: !formData.requestDescription.trim(),
|
||||
agreement: !formData.agreement
|
||||
};
|
||||
|
||||
setError(newError);
|
||||
const isValid = !Object.values(newError).some((err) => err);
|
||||
if (isValid) {
|
||||
// Данные формы валидны, можно отправлять форму
|
||||
console.log("Форма отправлена", formData);
|
||||
setFormData({
|
||||
name: "",
|
||||
companyName: "",
|
||||
email: "",
|
||||
phoneNumber: "",
|
||||
requestDescription: "",
|
||||
file: null,
|
||||
agreement: false
|
||||
});
|
||||
} else {
|
||||
// Данные формы невалидны, показываем ошибки
|
||||
console.log("Форма содержит ошибки");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="stack">
|
||||
<AuthHeader />
|
||||
@ -335,8 +395,142 @@ export const Stack = () => {
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="stack__contact">
|
||||
<div className="stack__container contact__container"></div>
|
||||
<img src={backgroundOpp} className="contact__background" />
|
||||
<img src={backgroundOpp} className="contact__background--right" />
|
||||
<div className="stack__container contact__container">
|
||||
<img src={code} className="contact__code" />
|
||||
<img src={code} className="contact__code--center" />
|
||||
<div className="contact__block">
|
||||
<div className="contact-info">
|
||||
<img src={clue} alt="clue" />
|
||||
<h3 className="info__title">ПОИСК</h3>
|
||||
<div className="info-content">
|
||||
<p>
|
||||
Заполните, пожалуйста, форму и наш <br /> менеджер обязательно
|
||||
с вами свяжется
|
||||
</p>
|
||||
<h4>Нужен специалист?</h4>
|
||||
<span>Посмотрите и другие продукты ITGUILD</span>
|
||||
<div className="info-content__buttons">
|
||||
<button>Система для отчётности</button>
|
||||
<button>Система контроля версий GIT</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<form className="contact__form" onSubmit={handleSubmit}>
|
||||
<span className="form__subtitle">
|
||||
Окунитесь в экосистему ITGUIL
|
||||
</span>
|
||||
<div className="form-container">
|
||||
<p>
|
||||
Пожалуйста, заполните форму и наш менеджер обязательно с вами
|
||||
свяжется
|
||||
</p>
|
||||
<div className="form-info">
|
||||
<div>
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
value={formData.name}
|
||||
onChange={handleChange}
|
||||
placeholder="имя и фамилия"
|
||||
/>
|
||||
{error.name && (
|
||||
<span className="error">
|
||||
Поле обязательно для заполнения
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<input
|
||||
type="text"
|
||||
name="companyName"
|
||||
value={formData.companyName}
|
||||
onChange={handleChange}
|
||||
placeholder="название вашей компании"
|
||||
/>
|
||||
{error.companyName && (
|
||||
<span className="error">
|
||||
Поле обязательно для заполнения
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
value={formData.email}
|
||||
onChange={handleChange}
|
||||
placeholder="e-mail"
|
||||
/>
|
||||
{error.email && (
|
||||
<span className="error">
|
||||
Поле обязательно для заполнения
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<input
|
||||
type="tel"
|
||||
name="phoneNumber"
|
||||
value={formData.phoneNumber}
|
||||
onChange={handleChange}
|
||||
placeholder="+7"
|
||||
/>
|
||||
{error.phoneNumber && (
|
||||
<span className="error">
|
||||
Поле обязательно для заполнения
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-description">
|
||||
<textarea
|
||||
name="requestDescription"
|
||||
value={formData.requestDescription}
|
||||
onChange={handleChange}
|
||||
placeholder="опишите, что вам требуется"
|
||||
/>
|
||||
{error.requestDescription && (
|
||||
<span className="error">
|
||||
Поле обязательно для заполнения
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="form-file">
|
||||
<input type="file" name="file" onChange={handleChange} />
|
||||
<p>
|
||||
.eps, .ai, .psd, .jpg, .png, .pdf, .doc, .docx, .xlsx, .xls,
|
||||
.ppt, .jpeg <br />
|
||||
<span>максимальный размер одного файла 10 Мб</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="form-submit">
|
||||
<div className="form-submit__agreement">
|
||||
<input
|
||||
type="radio"
|
||||
name="agreement"
|
||||
checked={formData.agreement}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
<p>
|
||||
Соглашаюсь с <a href="">Пользовательским соглашением</a> и
|
||||
<br />
|
||||
<a href="">Политикой обработки данных</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<button type="submit">оставить заявку</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<Footer />
|
||||
</section>
|
||||
</section>
|
||||
);
|
||||
|
||||
@ -762,8 +762,12 @@
|
||||
padding: 35px;
|
||||
border-radius: 8px;
|
||||
border: 0.5px solid #ffffff;
|
||||
background: linear-gradient(137deg, #ffffff -10%, #dddddd 100%);
|
||||
box-shadow: inset;
|
||||
background: linear-gradient(
|
||||
124.61deg,
|
||||
rgba(255, 255, 255, 0.34) 44.32%,
|
||||
rgba(221, 221, 221, 0.34) 90.95%
|
||||
);
|
||||
box-shadow: 10px 9px 14.3px 0px #0000000f;
|
||||
|
||||
&__client {
|
||||
display: flex;
|
||||
@ -822,10 +826,283 @@
|
||||
}
|
||||
|
||||
&__contact {
|
||||
background-color: #1e1e1e;
|
||||
background: #1e1e1e;
|
||||
position: relative;
|
||||
|
||||
.contact {
|
||||
&__background {
|
||||
position: absolute;
|
||||
left: -150px;
|
||||
bottom: 0;
|
||||
mix-blend-mode: plus-lighter;
|
||||
}
|
||||
|
||||
&__background--right {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: -300px;
|
||||
mix-blend-mode: plus-lighter;
|
||||
}
|
||||
|
||||
&__container {
|
||||
padding: 105px 0 0px;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&__code {
|
||||
position: absolute;
|
||||
top: 35px;
|
||||
left: 0;
|
||||
|
||||
&--center {
|
||||
position: absolute;
|
||||
right: -150px;
|
||||
bottom: 35px;
|
||||
}
|
||||
}
|
||||
&__block {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&-info {
|
||||
img {
|
||||
right: 423px;
|
||||
width: 100px;
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.info {
|
||||
&__title {
|
||||
position: relative;
|
||||
right: -30px;
|
||||
top: -10px;
|
||||
font-family: "Bebas Neue";
|
||||
font-weight: 700;
|
||||
font-size: 300px;
|
||||
line-height: 230.18px;
|
||||
margin-bottom: 0;
|
||||
z-index: 2;
|
||||
background: linear-gradient(
|
||||
358.88deg,
|
||||
#1e1e1e 26.61%,
|
||||
#323232 147.14%
|
||||
);
|
||||
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
filter: drop-shadow(0px 0px 30px rgba(0, 0, 0, 0.1294117647));
|
||||
}
|
||||
|
||||
&-content {
|
||||
z-index: 3;
|
||||
position: relative;
|
||||
top: -120px;
|
||||
padding: 0 0 0 60px;
|
||||
|
||||
p {
|
||||
color: #a7ca60;
|
||||
font-weight: 400;
|
||||
font-size: 19px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
color: #a7ca60;
|
||||
font-weight: 900;
|
||||
font-size: 66px;
|
||||
line-height: 64.94px;
|
||||
text-transform: uppercase;
|
||||
margin: 20px 0 30px 0;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #eeeeee;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
display: flex;
|
||||
margin: 19px 0 0 0;
|
||||
column-gap: 30px;
|
||||
|
||||
button {
|
||||
background: linear-gradient(
|
||||
110.06deg,
|
||||
rgba(87, 87, 87, 0.34) 0%,
|
||||
rgba(104, 104, 104, 0.34) 99.25%
|
||||
);
|
||||
width: 208px;
|
||||
height: 101px;
|
||||
border-radius: 8px;
|
||||
border: 0.5px solid #6c6c6c;
|
||||
box-shadow: 10px 9px 14.3px 0px #0000000f;
|
||||
color: #838383;
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
z-index: 1;
|
||||
|
||||
.form {
|
||||
&__subtitle {
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
color: #a7ca60;
|
||||
position: relative;
|
||||
top: -10px;
|
||||
}
|
||||
|
||||
&-container {
|
||||
background-color: #a7ca60;
|
||||
padding: 40px 50px;
|
||||
border-radius: 8px 24px 8px 113px;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: #607536;
|
||||
|
||||
.error {
|
||||
color: red;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.2px;
|
||||
font-weight: 300;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&-info {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
column-gap: 15px;
|
||||
row-gap: 10px;
|
||||
justify-items: center;
|
||||
|
||||
input {
|
||||
padding: 10px;
|
||||
width: 205px;
|
||||
height: 45px;
|
||||
border: 0.2px solid #607536;
|
||||
border-radius: 8px;
|
||||
background-color: #98b857;
|
||||
}
|
||||
input::placeholder {
|
||||
margin: 0 0 0 19px;
|
||||
color: #435225;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
}
|
||||
input:focus-visible {
|
||||
outline: none;
|
||||
border: 2px solid #607536;
|
||||
}
|
||||
}
|
||||
|
||||
&-description {
|
||||
textarea {
|
||||
padding: 10px;
|
||||
margin: 10px 0 0 0;
|
||||
width: 424px;
|
||||
height: 90px;
|
||||
border: 0.2px solid #607536;
|
||||
border-radius: 8px;
|
||||
resize: none;
|
||||
background-color: #98b857;
|
||||
}
|
||||
textarea::placeholder {
|
||||
color: #435225;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
}
|
||||
textarea:focus-visible {
|
||||
outline: none;
|
||||
border: 2px solid #607536;
|
||||
}
|
||||
}
|
||||
|
||||
&-file {
|
||||
display: flex;
|
||||
margin-top: 17px;
|
||||
input {
|
||||
width: 40%;
|
||||
}
|
||||
input::-webkit-file-upload-button {
|
||||
visibility: hidden;
|
||||
display: none;
|
||||
}
|
||||
input::before {
|
||||
cursor: pointer;
|
||||
content: "прикрепите файл";
|
||||
width: 160px;
|
||||
height: 45px;
|
||||
color: #435225;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: 0.2px solid #89a64f;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 9px;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
span {
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
&-submit {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
|
||||
&__agreement {
|
||||
display: flex;
|
||||
|
||||
input {
|
||||
accent-color: #607536;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-left: 11px;
|
||||
font-weight: 300;
|
||||
font-size: 9px;
|
||||
color: #607536;
|
||||
}
|
||||
|
||||
a:active,
|
||||
a:hover,
|
||||
a {
|
||||
text-decoration: underline;
|
||||
color: #607536;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
width: 177px;
|
||||
height: 44px;
|
||||
background-color: #ffffff;
|
||||
font-size: 15px;
|
||||
font-weight: 400;
|
||||
color: #4a4a4a;
|
||||
border-radius: 44px;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user