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

frequently-asked-questions page

Browse Source
This commit is contained in:
Дмитрий Кравцов
2023-04-27 21:15:55 +03:00
parent 37cfe0d771
commit c1f1cf8879
13 changed files with 395 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
src/pages/FrequentlyAskedQuestions/FrequentlyAskedQuestions.jsx Normal file
View 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>
);
};

66
src/pages/FrequentlyAskedQuestions/FrequentlyAskedQuestions.scss Normal file
View File

@ -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;
}
}
}