frequently-asked-questions page
This commit is contained in:
@ -0,0 +1,60 @@
|
||||
import { useNavigate, useParams } from "react-router";
|
||||
import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs";
|
||||
import SideBar from "../../components/SideBar/SideBar";
|
||||
import AuthHeader from "../../components/AuthHeader/AuthHeader";
|
||||
import { Footer } from "../../components/Footer/Footer";
|
||||
import arrowBtn from "../../images/arrowRight.png";
|
||||
import "./FrequentlyAskedQuestion.scss";
|
||||
import { useEffect, useState } from "react";
|
||||
import {
|
||||
FREQUENTLY_ASKED_QUESTIONS_ROUTE,
|
||||
FREQUENTLY_ASKED_QUESTION_ROUTE,
|
||||
} from "../../constants/router-path";
|
||||
|
||||
export const FrequentlyAskedQuestion = () => {
|
||||
const params = useParams();
|
||||
const navigate = useNavigate()
|
||||
const [question, setQuestion] = useState({
|
||||
id: params.id,
|
||||
title: "Это фриланс-платформа?",
|
||||
answer:
|
||||
"Нет, мы работаем только с юридическими лицами и индивидуальными предпринимателями и тщательно проверяем своих партнеров. Партнерами являются агентства, которые специализируются на оказании услуг в формате аутстафф-модели и обладают глубокой экспертизой в разработке и внедрении ИТ-проектов.",
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
//тут запрос
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="frequently-asked-question">
|
||||
<AuthHeader />
|
||||
<SideBar />
|
||||
<div className="frequently-asked-question__container container">
|
||||
<ProfileBreadcrumbs
|
||||
links={[
|
||||
{ name: "Главная", link: "/profile-candidate" },
|
||||
{
|
||||
name: "FAQ (часто задаваемые вопросы)",
|
||||
link: FREQUENTLY_ASKED_QUESTIONS_ROUTE,
|
||||
},
|
||||
{
|
||||
name: question.title,
|
||||
link: FREQUENTLY_ASKED_QUESTION_ROUTE + "/" + params.id,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<div className="frequently-asked-question__title">{question.title}</div>
|
||||
<div className="frequently-asked-question__back" onClick={()=>navigate(-1)}>
|
||||
<div className="frequently-asked-question__arrow">
|
||||
<img src={arrowBtn}></img>
|
||||
</div>
|
||||
<p>вернуться к списку вопросов</p>
|
||||
</div>
|
||||
<div className="frequently-asked-question__answer">
|
||||
<p>{question.answer}</p>
|
||||
</div>
|
||||
</div>
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,60 @@
|
||||
@import './../../assets/functions.scss';
|
||||
|
||||
.frequently-asked-question {
|
||||
background: #f5f5f5;
|
||||
height: 100%;
|
||||
min-height: 100vh;
|
||||
font-family: "LabGrotesque", sans-serif;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@media (max-width: 1375px) {
|
||||
margin-top: 80px;
|
||||
}
|
||||
&__container {
|
||||
flex: 1 1 auto;
|
||||
margin-top: 30px;
|
||||
}
|
||||
&__title {
|
||||
font-weight: 500;
|
||||
@include adaptiv-value("font-size", 38, 24, 1);
|
||||
line-height: 84%;
|
||||
margin: 42px 0 30px 0;
|
||||
color: #000000;
|
||||
}
|
||||
&__back {
|
||||
margin: 0 0 30px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
gap: 19px;
|
||||
p {
|
||||
font-size: 12px;
|
||||
line-height: 167%;
|
||||
color: #6f6f6f;
|
||||
}
|
||||
}
|
||||
&__arrow {
|
||||
background: rgba(141, 198, 63, 0.5098039216);
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
&__answer {
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
line-height: 120%;
|
||||
background: #ffffff;
|
||||
border-radius: 12px;
|
||||
word-break: break-word;
|
||||
color: #000000;
|
||||
@include adaptiv-value("padding-top", 33, 15, 1);
|
||||
@include adaptiv-value("padding-bottom", 33, 15, 1);
|
||||
@include adaptiv-value("padding-left", 41, 22, 1);
|
||||
@include adaptiv-value("padding-right", 41, 22, 1);
|
||||
}
|
||||
}
|
||||
|
||||
110
src/pages/FrequentlyAskedQuestions/FrequentlyAskedQuestions.jsx
Normal file
110
src/pages/FrequentlyAskedQuestions/FrequentlyAskedQuestions.jsx
Normal file
@ -0,0 +1,110 @@
|
||||
import React from "react";
|
||||
import "./FrequentlyAskedQuestions.scss";
|
||||
import AuthHeader from "../../components/AuthHeader/AuthHeader";
|
||||
import SideBar from "../../components/SideBar/SideBar";
|
||||
import arrow from "./../../images/faq/arrow.svg";
|
||||
import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs";
|
||||
import { Footer } from "../../components/Footer/Footer";
|
||||
import { FREQUENTLY_ASKED_QUESTIONS_ROUTE } from "../../constants/router-path";
|
||||
import { FrequentlyAskedQuestionsItem } from "../../components/FrequentlyAskedQuestionsItem/FrequentlyAskedQuestionsItem";
|
||||
|
||||
|
||||
export const FrequentlyAskedQuestions = () => {
|
||||
|
||||
const rubrics = [
|
||||
{
|
||||
title: 'Общие вопросы ',
|
||||
questions: [
|
||||
{
|
||||
id: 1,
|
||||
title: 'Это фриланс-платформа?'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: 'Чем вы отличаетесь от традиционного процесса выбора исполнителя?'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: 'Это фриланс-платформа?'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: 'Чем вы отличаетесь от традиционного процесса выбора исполнителя?'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Поиск специалиста',
|
||||
questions: [
|
||||
{
|
||||
id: 11,
|
||||
title: 'Это фриланс-платформа?'
|
||||
},
|
||||
{
|
||||
id: 22,
|
||||
title: 'Чем вы отличаетесь от традиционного процесса выбора исполнителя?'
|
||||
},
|
||||
{
|
||||
id: 33,
|
||||
title: 'Это фриланс-платформа?'
|
||||
},
|
||||
{
|
||||
id: 44,
|
||||
title: 'Чем вы отличаетесь от традиционного процесса выбора исполнителя?'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Бронирование специалиста',
|
||||
questions: [
|
||||
{
|
||||
id: 11,
|
||||
title: 'Это фриланс-платформа?'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Работа с выбранным специалистом',
|
||||
questions: [
|
||||
{
|
||||
id: 11,
|
||||
title: 'Чем вы отличаетесь от традиционного процесса выбора исполнителя?'
|
||||
}
|
||||
]
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<div className="frequently-asked-questions">
|
||||
<AuthHeader />
|
||||
<SideBar />
|
||||
|
||||
<div className="frequently-asked-questions__container container">
|
||||
<ProfileBreadcrumbs
|
||||
links={[
|
||||
{ name: "Главная", link: "/profile-candidate" },
|
||||
{ name: "FAQ (часто задаваемые вопросы)", link: FREQUENTLY_ASKED_QUESTIONS_ROUTE },
|
||||
]}
|
||||
/>
|
||||
<div className="frequently-asked-questions__about">
|
||||
<div className="frequently-asked-questions__title">FAQ</div>
|
||||
<div className="frequently-asked-questions__arrow">
|
||||
<img src={arrow} alt="arrow" />
|
||||
</div>
|
||||
<div className="frequently-asked-questions__description">
|
||||
База знаний, которая дает ответы на популярные вопросы, тем самым
|
||||
помогая нашим клиентам разобраться в продукте, сервисе и вариантах
|
||||
сотрудничества с нашей компанией.
|
||||
</div>
|
||||
</div>
|
||||
<div className="frequently-asked-questions__items">
|
||||
{
|
||||
rubrics.map((rubric,index)=><FrequentlyAskedQuestionsItem rubric={rubric} key={index} />)
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -0,0 +1,66 @@
|
||||
.frequently-asked-questions {
|
||||
background: #f5f5f5;
|
||||
height: 100%;
|
||||
min-height: 100vh;
|
||||
font-family: "LabGrotesque", sans-serif;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@media (max-width: 1375px) {
|
||||
margin-top: 80px;
|
||||
}
|
||||
&__container {
|
||||
flex: 1 1 auto;
|
||||
margin-top: 30px;
|
||||
}
|
||||
&__about {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0 0 70px 0;
|
||||
@media (max-width: 600px) {
|
||||
flex-wrap: wrap;
|
||||
row-gap: 25px;
|
||||
}
|
||||
}
|
||||
&__title {
|
||||
font-weight: 500;
|
||||
font-size: 48px;
|
||||
line-height: 67%;
|
||||
color: #000000;
|
||||
margin: 0 13px 0 0;
|
||||
@media (max-width: 600px) {
|
||||
order: 1;
|
||||
}
|
||||
}
|
||||
&__arrow {
|
||||
background: rgba(128, 119, 119, 0.3);
|
||||
flex: 0 0 27px;
|
||||
height: 27px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 24px 0 0;
|
||||
@media (max-width: 600px) {
|
||||
order: 2;
|
||||
}
|
||||
}
|
||||
&__description {
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 156%;
|
||||
word-break: break-word;
|
||||
color: #000000;
|
||||
white-space: pre-line;
|
||||
}
|
||||
&__rubrics {
|
||||
display: grid;
|
||||
grid-row-gap: 49px;
|
||||
grid-column-gap: 29px;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
@media (max-width: 750px) {
|
||||
grid-template-columns: 1fr;
|
||||
grid-gap: 60px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user