From c1f1cf88798df8959365dc332aa2b6e0251fcf32 Mon Sep 17 00:00:00 2001 From: Dmitry220 Date: Thu, 27 Apr 2023 21:15:55 +0300 Subject: [PATCH] frequently-asked-questions page --- src/App.js | 12 +- .../features/quiz => assets}/functions.scss | 3 +- .../FrequentlyAskedQuestionsItem.jsx | 27 +++++ .../FrequentlyAskedQuestionsItem.scss | 43 +++++++ src/components/SideBar/SideBar.js | 4 +- src/components/features/quiz/quiz.scss | 2 +- src/constants/router-path.js | 2 + src/images/faq/arrow.svg | 9 ++ src/images/faq/question.svg | 3 + .../FrequentlyAskedQuestion.jsx | 60 ++++++++++ .../FrequentlyAskedQuestion.scss | 60 ++++++++++ .../FrequentlyAskedQuestions.jsx | 110 ++++++++++++++++++ .../FrequentlyAskedQuestions.scss | 66 +++++++++++ 13 files changed, 395 insertions(+), 6 deletions(-) rename src/{components/features/quiz => assets}/functions.scss (96%) create mode 100644 src/components/FrequentlyAskedQuestionsItem/FrequentlyAskedQuestionsItem.jsx create mode 100644 src/components/FrequentlyAskedQuestionsItem/FrequentlyAskedQuestionsItem.scss create mode 100644 src/constants/router-path.js create mode 100644 src/images/faq/arrow.svg create mode 100644 src/images/faq/question.svg create mode 100644 src/pages/FrequentlyAskedQuestion/FrequentlyAskedQuestion.jsx create mode 100644 src/pages/FrequentlyAskedQuestion/FrequentlyAskedQuestion.scss create mode 100644 src/pages/FrequentlyAskedQuestions/FrequentlyAskedQuestions.jsx create mode 100644 src/pages/FrequentlyAskedQuestions/FrequentlyAskedQuestions.scss diff --git a/src/App.js b/src/App.js index e459d6c9..467870cc 100644 --- a/src/App.js +++ b/src/App.js @@ -35,10 +35,13 @@ import { AuthForCandidate } from "./pages/AuthForCandidate/AuthForCandidate"; import { RegistrationForCandidate } from "./pages/RegistrationForCandidate/RegistrationForCandidate"; import { ProfileCandidate } from "./pages/ProfileCandidate/ProfileCandidate"; import { PassingTests } from "./pages/quiz/PassingTests"; - import "./assets/global.scss"; import "./fonts/stylesheet.css"; import "bootstrap/dist/css/bootstrap.min.css"; +import { FREQUENTLY_ASKED_QUESTIONS_ROUTE, FREQUENTLY_ASKED_QUESTION_ROUTE } from "./constants/router-path"; +import { FrequentlyAskedQuestions } from "./pages/FrequentlyAskedQuestions/FrequentlyAskedQuestions"; +import { FrequentlyAskedQuestion } from "./pages/FrequentlyAskedQuestion/FrequentlyAskedQuestion"; + const App = () => { return ( @@ -46,7 +49,10 @@ const App = () => { } /> - } /> + } /> + }/> + } /> + } /> { } /> - } /> + {/* } /> */} diff --git a/src/components/features/quiz/functions.scss b/src/assets/functions.scss similarity index 96% rename from src/components/features/quiz/functions.scss rename to src/assets/functions.scss index 54c1290e..fba68f8b 100644 --- a/src/components/features/quiz/functions.scss +++ b/src/assets/functions.scss @@ -1,4 +1,5 @@ - +@use "sass:math"; +$maxWidthContainer: 1123; //перевод в % @function prc($pxOne, $pxTwo) { $result: math.div($pxOne, $pxTwo) * 100%; diff --git a/src/components/FrequentlyAskedQuestionsItem/FrequentlyAskedQuestionsItem.jsx b/src/components/FrequentlyAskedQuestionsItem/FrequentlyAskedQuestionsItem.jsx new file mode 100644 index 00000000..6b37482c --- /dev/null +++ b/src/components/FrequentlyAskedQuestionsItem/FrequentlyAskedQuestionsItem.jsx @@ -0,0 +1,27 @@ +import React from "react"; +import "./FrequentlyAskedQuestionsItem.scss"; +import { FREQUENTLY_ASKED_QUESTION_ROUTE } from "../../constants/router-path"; +import { Link } from "react-router-dom"; +import questionIcon from "./../../images/faq/question.svg"; + +export const FrequentlyAskedQuestionsItem = ({ rubric }) => { + return ( +
+
+
+
+ {rubric?.title} +
+
+ {rubric?.questions?.map((question) => ( + +

{question.title}

+ + ))} +
+ ); +}; diff --git a/src/components/FrequentlyAskedQuestionsItem/FrequentlyAskedQuestionsItem.scss b/src/components/FrequentlyAskedQuestionsItem/FrequentlyAskedQuestionsItem.scss new file mode 100644 index 00000000..247dfe02 --- /dev/null +++ b/src/components/FrequentlyAskedQuestionsItem/FrequentlyAskedQuestionsItem.scss @@ -0,0 +1,43 @@ +@import "./../../assets/functions.scss"; + +.frequently-asked-questions-item { + &__head { + display: flex; + gap: 19px; + margin: 0 0 -5px 29px; + } + + &__icon-question { + + } + &__title { + font-weight: 700; + @include adaptiv-value("font-size", 28, 22, 1); + line-height: 79%; + color: #1458dd; + } + &__body { + position: relative; + z-index: 2; + display: block; + &:not(:last-child) { + margin: 0 0 13px 0; + } + p { + word-break: break-word; + background: #ffffff; + border-radius: 12px; + @include adaptiv-value("padding-top", 23, 15, 1); + @include adaptiv-value("padding-bottom", 23, 15, 1); + @include adaptiv-value("padding-left", 41, 22, 1); + @include adaptiv-value("padding-right", 41, 22, 1); + font-weight: 500; + @include adaptiv-value("font-size", 18, 16, 1); + line-height: 122%; + color: #000000; + min-height: 91px; + display: flex; + align-items: center; + } + } +} \ No newline at end of file diff --git a/src/components/SideBar/SideBar.js b/src/components/SideBar/SideBar.js index 537afbab..8612d77b 100644 --- a/src/components/SideBar/SideBar.js +++ b/src/components/SideBar/SideBar.js @@ -4,6 +4,8 @@ import arrow from "../../images/sideBarArrow.svg"; import LogoITguild from "../../images/LogoITguild.svg"; import "./sidebar.scss"; +import { Link } from "react-router-dom"; +import { FREQUENTLY_ASKED_QUESTIONS_ROUTE } from "../../constants/router-path"; export const SideBar = () => { const [active, setActive] = useState(false); @@ -64,7 +66,7 @@ export const SideBar = () => { Блог
  • - FAQ + FAQ

    • Политика конфиденциальности

    diff --git a/src/components/features/quiz/quiz.scss b/src/components/features/quiz/quiz.scss index 45932788..a2cf701a 100644 --- a/src/components/features/quiz/quiz.scss +++ b/src/components/features/quiz/quiz.scss @@ -1,5 +1,5 @@ @use "sass:math"; -@import "functions.scss"; +@import "./../../../assets/functions.scss"; $maxWidthContainer: 1123; diff --git a/src/constants/router-path.js b/src/constants/router-path.js new file mode 100644 index 00000000..605c8402 --- /dev/null +++ b/src/constants/router-path.js @@ -0,0 +1,2 @@ +export const FREQUENTLY_ASKED_QUESTIONS_ROUTE = '/frequently-asked-questions' +export const FREQUENTLY_ASKED_QUESTION_ROUTE = '/frequently-asked-question' \ No newline at end of file diff --git a/src/images/faq/arrow.svg b/src/images/faq/arrow.svg new file mode 100644 index 00000000..745d9757 --- /dev/null +++ b/src/images/faq/arrow.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/faq/question.svg b/src/images/faq/question.svg new file mode 100644 index 00000000..5a1d94c8 --- /dev/null +++ b/src/images/faq/question.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/pages/FrequentlyAskedQuestion/FrequentlyAskedQuestion.jsx b/src/pages/FrequentlyAskedQuestion/FrequentlyAskedQuestion.jsx new file mode 100644 index 00000000..f25f21c0 --- /dev/null +++ b/src/pages/FrequentlyAskedQuestion/FrequentlyAskedQuestion.jsx @@ -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 ( +
    + + +
    + +
    {question.title}
    +
    navigate(-1)}> +
    + +
    +

    вернуться к списку вопросов

    +
    +
    +

    {question.answer}

    +
    +
    +
    +
    + ); +}; diff --git a/src/pages/FrequentlyAskedQuestion/FrequentlyAskedQuestion.scss b/src/pages/FrequentlyAskedQuestion/FrequentlyAskedQuestion.scss new file mode 100644 index 00000000..c8726730 --- /dev/null +++ b/src/pages/FrequentlyAskedQuestion/FrequentlyAskedQuestion.scss @@ -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); + } + } + \ No newline at end of file diff --git a/src/pages/FrequentlyAskedQuestions/FrequentlyAskedQuestions.jsx b/src/pages/FrequentlyAskedQuestions/FrequentlyAskedQuestions.jsx new file mode 100644 index 00000000..4d377815 --- /dev/null +++ b/src/pages/FrequentlyAskedQuestions/FrequentlyAskedQuestions.jsx @@ -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 ( +
    + + + +
    + +
    +
    FAQ
    +
    + arrow +
    +
    + База знаний, которая дает ответы на популярные вопросы, тем самым + помогая нашим клиентам разобраться в продукте, сервисе и вариантах + сотрудничества с нашей компанией. +
    +
    +
    + { + rubrics.map((rubric,index)=>) + } +
    +
    +
    + ); +}; + diff --git a/src/pages/FrequentlyAskedQuestions/FrequentlyAskedQuestions.scss b/src/pages/FrequentlyAskedQuestions/FrequentlyAskedQuestions.scss new file mode 100644 index 00000000..3f1697fd --- /dev/null +++ b/src/pages/FrequentlyAskedQuestions/FrequentlyAskedQuestions.scss @@ -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; + } + } +} +