diff --git a/src/App.js b/src/App.js index 400f14f3..3eeca2a6 100644 --- a/src/App.js +++ b/src/App.js @@ -15,6 +15,7 @@ import ReportForm from "./components/ReportForm/ReportForm"; import FreeDevelopers from "./components/UI/FreeDevelopers/FreeDevelopers"; import { TicketFullScreen } from "./components/UI/TicketFullScreen/TicketFullScreen"; import { ProfileCalendar } from "./components/ProfileCalendar/ProfileCalendar"; +import Article from "./pages/Article/Article"; import FormPage from "./pages/FormPage/FormPage.js"; import SingleReportPage from "./pages/SingleReportPage/SingleReportPage"; import { QuizPage } from "./pages/quiz/QuizPage"; @@ -35,6 +36,7 @@ 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 Blog from "./pages/Blog/Blog"; import { ProjectTracker } from "./pages/ProjectTracker/ProjectTracker"; import "./assets/global.scss"; @@ -51,10 +53,14 @@ const App = () => { } /> } > - }/> + } + /> } /> { element={} /> + }> + }> + } /> } /> } /> diff --git a/src/components/SideBar/SideBar.js b/src/components/SideBar/SideBar.jsx similarity index 89% rename from src/components/SideBar/SideBar.js rename to src/components/SideBar/SideBar.jsx index 537afbab..89201a26 100644 --- a/src/components/SideBar/SideBar.js +++ b/src/components/SideBar/SideBar.jsx @@ -4,6 +4,7 @@ import arrow from "../../images/sideBarArrow.svg"; import LogoITguild from "../../images/LogoITguild.svg"; import "./sidebar.scss"; +import { Link } from "react-router-dom"; export const SideBar = () => { const [active, setActive] = useState(false); @@ -46,10 +47,10 @@ export const SideBar = () => {
  • - Вход для партнеров + Вход для партнеров
  • - Кабинет разработчика + Кабинет разработчика
  • Школа @@ -61,7 +62,7 @@ export const SideBar = () => { Контакты
  • - Блог + Блог
  • FAQ diff --git a/src/components/SideBar/sidebar.scss b/src/components/SideBar/sidebar.scss index 98864db8..8a0d6705 100644 --- a/src/components/SideBar/sidebar.scss +++ b/src/components/SideBar/sidebar.scss @@ -20,11 +20,13 @@ } .auth-title { + position: relative; display: flex; flex-direction: column; justify-content: space-between; align-items: center; height: 80%; + z-index: 9999; .text { display: flex; @@ -108,8 +110,10 @@ .auth-body { padding: 40px; - display: none; - z-index: -1; + visibility: hidden; + transition: 0.2s ease-in-out; + opacity: 0; + z-index: 99; position: absolute; top: 0; left: 0; @@ -173,6 +177,9 @@ } .auth-body.active { + visibility: visible; + transition: 0.1s ease-in-out; + opacity: 1; display: flex; width: 424px; left: 140px; @@ -184,6 +191,6 @@ @media (max-width: 1375px) { left: 0; width: 100%; - height: 535px; + height: 605px; } } diff --git a/src/components/UI/CardArticle/CardArticle.jsx b/src/components/UI/CardArticle/CardArticle.jsx new file mode 100644 index 00000000..be8ca4b1 --- /dev/null +++ b/src/components/UI/CardArticle/CardArticle.jsx @@ -0,0 +1,22 @@ +import React from "react"; +import cardCalendar from "../../../images/cardCalendar.svg"; +import { Link } from "react-router-dom"; + +import "./cardArticle.scss"; + +export const CardArticle = ({ images, title, data, id }) => { + return ( +
    + + +
    {title}
    +
    + +

    {data}

    +
    + +
    + ); +}; + +export default CardArticle; diff --git a/src/components/UI/CardArticle/cardArticle.scss b/src/components/UI/CardArticle/cardArticle.scss new file mode 100644 index 00000000..a569ab0b --- /dev/null +++ b/src/components/UI/CardArticle/cardArticle.scss @@ -0,0 +1,36 @@ +.card-article { + background: #ffffff; + border-radius: 12px; + width: 344px; + margin-bottom: 24px; + transition: 0.4s; + a { + color: #000000; + } + + &:hover { + cursor: pointer; + transform: scale(1.05); + transition: 0.4s; + a { + color: #000000; + } + } + + h5 { + font-style: normal; + font-weight: 500; + font-size: 17px; + line-height: 20px; + padding: 12px 16px 8px 16px; + } + + &__data { + display: flex; + padding: 0 0 14px 16px; + + img { + margin-right: 9px; + } + } +} diff --git a/src/components/UI/FreeDevelopers/FreeDevelopers.js b/src/components/UI/FreeDevelopers/FreeDevelopers.jsx similarity index 100% rename from src/components/UI/FreeDevelopers/FreeDevelopers.js rename to src/components/UI/FreeDevelopers/FreeDevelopers.jsx diff --git a/src/components/UI/FreeDevelopers/freeDevelopers.scss b/src/components/UI/FreeDevelopers/freeDevelopers.scss index ed73e21f..eedd7b30 100644 --- a/src/components/UI/FreeDevelopers/freeDevelopers.scss +++ b/src/components/UI/FreeDevelopers/freeDevelopers.scss @@ -175,7 +175,6 @@ .auth-body.active { left: 0; width: 100%; - height: 535px; } .auth-body { diff --git a/src/components/UI/ModalAdd/ModalAdd.js b/src/components/UI/ModalAdd/ModalAdd.jsx similarity index 100% rename from src/components/UI/ModalAdd/ModalAdd.js rename to src/components/UI/ModalAdd/ModalAdd.jsx diff --git a/src/components/UI/ModalAspt/ModalAspt.js b/src/components/UI/ModalAspt/ModalAspt.jsx similarity index 100% rename from src/components/UI/ModalAspt/ModalAspt.js rename to src/components/UI/ModalAspt/ModalAspt.jsx diff --git a/src/components/UI/ModalCreate/ModalCreate.js b/src/components/UI/ModalCreate/ModalCreate.jsx similarity index 100% rename from src/components/UI/ModalCreate/ModalCreate.js rename to src/components/UI/ModalCreate/ModalCreate.jsx diff --git a/src/components/UI/ModalErrorLogin/ModalErrorLogin.js b/src/components/UI/ModalErrorLogin/ModalErrorLogin.jsx similarity index 100% rename from src/components/UI/ModalErrorLogin/ModalErrorLogin.js rename to src/components/UI/ModalErrorLogin/ModalErrorLogin.jsx diff --git a/src/components/UI/ModalRegistration/ModalRegistration.js b/src/components/UI/ModalRegistration/ModalRegistration.jsx similarity index 100% rename from src/components/UI/ModalRegistration/ModalRegistration.js rename to src/components/UI/ModalRegistration/ModalRegistration.jsx diff --git a/src/components/UI/ModalSettings/ModalSettings.js b/src/components/UI/ModalSettings/ModalSettings.jsx similarity index 100% rename from src/components/UI/ModalSettings/ModalSettings.js rename to src/components/UI/ModalSettings/ModalSettings.jsx diff --git a/src/components/UI/ModalTicket/ModalTicket.js b/src/components/UI/ModalTicket/ModalTicket.jsx similarity index 93% rename from src/components/UI/ModalTicket/ModalTicket.js rename to src/components/UI/ModalTicket/ModalTicket.jsx index f1bbef71..0b0d618e 100644 --- a/src/components/UI/ModalTicket/ModalTicket.js +++ b/src/components/UI/ModalTicket/ModalTicket.jsx @@ -1,8 +1,8 @@ import React, { useState } from "react"; import { Link } from "react-router-dom"; import ModalAdd from "../ModalAdd/ModalAdd"; -import {apiRequest} from "../../../api/request"; -import {useDispatch} from "react-redux"; +import { apiRequest } from "../../../api/request"; +import { useDispatch } from "react-redux"; import { setProjectBoardFetch } from "../../../redux/projectsTrackerSlice"; import avatarMock1 from "../../../images/avatarMoсk1.png"; @@ -22,7 +22,13 @@ import fullScreen from "../../../images/inFullScreen.svg"; import "./ModalTicket.scss"; -export const ModalTiсket = ({ active, setActive, task, projectId, projectName }) => { +export const ModalTiсket = ({ + active, + setActive, + task, + projectId, + projectName, +}) => { const dispatch = useDispatch(); const [tiket] = useState({ name: "Разработка трекера", @@ -44,16 +50,16 @@ export const ModalTiсket = ({ active, setActive, task, projectId, projectName } const [addSubtask, setAddSubtask] = useState(false); function deleteTask() { - apiRequest('/task/update-task', { - method: 'PUT', + apiRequest("/task/update-task", { + method: "PUT", data: { - task_id : task.id, - status: 0 - } + task_id: task.id, + status: 0, + }, }).then((res) => { - setActive(false) - dispatch(setProjectBoardFetch(projectId)) - }) + setActive(false); + dispatch(setProjectBoardFetch(projectId)); + }); } return ( diff --git a/src/components/UI/TicketFullScreen/TicketFullScreen.js b/src/components/UI/TicketFullScreen/TicketFullScreen.jsx similarity index 100% rename from src/components/UI/TicketFullScreen/TicketFullScreen.js rename to src/components/UI/TicketFullScreen/TicketFullScreen.jsx diff --git a/src/images/blogArrow.svg b/src/images/blogArrow.svg new file mode 100644 index 00000000..82663971 --- /dev/null +++ b/src/images/blogArrow.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/cardArticleItem.png b/src/images/cardArticleItem.png new file mode 100644 index 00000000..481ab9ef Binary files /dev/null and b/src/images/cardArticleItem.png differ diff --git a/src/images/cardArticleItem2.png b/src/images/cardArticleItem2.png new file mode 100644 index 00000000..612e9b56 Binary files /dev/null and b/src/images/cardArticleItem2.png differ diff --git a/src/images/cardArticleItem3.png b/src/images/cardArticleItem3.png new file mode 100644 index 00000000..85f03592 Binary files /dev/null and b/src/images/cardArticleItem3.png differ diff --git a/src/images/cardArticleItem4.png b/src/images/cardArticleItem4.png new file mode 100644 index 00000000..de7715a1 Binary files /dev/null and b/src/images/cardArticleItem4.png differ diff --git a/src/images/cardArticleItem5.png b/src/images/cardArticleItem5.png new file mode 100644 index 00000000..69375a45 Binary files /dev/null and b/src/images/cardArticleItem5.png differ diff --git a/src/images/cardArticleItem6.png b/src/images/cardArticleItem6.png new file mode 100644 index 00000000..f81156a9 Binary files /dev/null and b/src/images/cardArticleItem6.png differ diff --git a/src/images/cardCalendar.svg b/src/images/cardCalendar.svg new file mode 100644 index 00000000..d2c12103 --- /dev/null +++ b/src/images/cardCalendar.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/mockImgArticle.png b/src/images/mockImgArticle.png new file mode 100644 index 00000000..01e33246 Binary files /dev/null and b/src/images/mockImgArticle.png differ diff --git a/src/images/yandexZen.svg b/src/images/yandexZen.svg new file mode 100644 index 00000000..660d9aca --- /dev/null +++ b/src/images/yandexZen.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/pages/Article/Article.jsx b/src/pages/Article/Article.jsx new file mode 100644 index 00000000..f89bd034 --- /dev/null +++ b/src/pages/Article/Article.jsx @@ -0,0 +1,138 @@ +import React, { useState } from "react"; +import { Link } from "react-router-dom"; + +import AuthHeader from "../../components/AuthHeader/AuthHeader"; +import SideBar from "../../components/SideBar/SideBar"; +import { Footer } from "../../components/Footer/Footer"; +import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs"; +import CardArticle from "../../components/UI/CardArticle/CardArticle"; + +import mockImgArticle from "../../images/mockImgArticle.png"; +import rightArrow from "../../images/right-arrow.png"; +import yandexZen from "../../images/yandexZen.svg"; +import cardCalendar from "../../images/cardCalendar.svg"; +import cardImg1 from "../../images/cardArticleItem.png"; +import cardImg2 from "../../images/cardArticleItem2.png"; +import cardImg3 from "../../images/cardArticleItem3.png"; + +import "./article.scss"; + +export const Article = ({}) => { + const [article] = useState([ + { + image: cardImg1, + title: "Аутстаффинг джунов: почему это выгодно", + data: "1 марта, 2023", + }, + { + image: cardImg2, + title: "Аутстаффинг джунов: почему это выгодно", + data: "1 марта, 2023", + }, + { + image: cardImg3, + title: "Аутстаффинг джунов: почему это выгодно", + data: "1 марта, 2023", + }, + ]); + + return ( +
    + + +
    +
    + +
    +
    +

    Аутстаффинг джунов: почему это выгодно

    +
    + +
    + +
    + +
    + вернуться к списку статей + +
    + +
    +
    +

    + Нет, мы работаем только с юридическими лицами и индивидуальными + предпринимателями и тщательно проверяем своих партнеров. + Партнерами являются агентства, которые специализируются на + оказании услуг в формате аутстафф-модели и обладают глубокой + экспертизой в разработке и внедрении ИТ-проектов. +

    +
    + +
    +

    + С одной стороны, зарплаты в сфере разработки растут, с другой + стороны, появляется огромное количество новичков, которые хотят + легко и просто войти в ИТ-сферу на волне востребованности и + больших зарплат. Разумеется, это приводит к осторожному отношению + работодателя к выпускникам различных курсов. Нет такого курса, + который даст на 100% готового джуна, слишком многое завязано на + личной инициативе, обучаемости и желании. +

    +
    +

    + В итоге получается, что взгляды работодателя и потенциального + сотрудника расходятся: работодатель не хочет открывать ящик + пандоры, на который нужно тратить время, а работник, только + прошедший курсы, испытывает эффект завышенных ожиданий и имеет + зачастую неадекватные запросы. +

    +
    +
    +
    + +
    +

    Читать на Дзен

    + dzen.ru +
    +
    +
    + +

    1 марта, 2023

    +
    +
    +
    +

    Читайте также

    +
    + +
    +
    +
    + {article.map((item, index) => { + return ( + + ); + })} +
    +
    +
    +
    +
    + ); +}; + +export default Article; diff --git a/src/pages/Article/article.scss b/src/pages/Article/article.scss new file mode 100644 index 00000000..9bb52f04 --- /dev/null +++ b/src/pages/Article/article.scss @@ -0,0 +1,166 @@ +.article-blog { + background: #f1f1f1; + + &__breadCrumbs { + margin-top: 30px; + + @media (max-width: 1375px) { + margin-top: 0; + padding-top: 110px; + } + + @media (max-width: 600px) { + display: none; + } + } + + &__title { + margin: 42px 0 44px 0; + + h1 { + font-weight: 500; + font-size: 38px; + line-height: 32px; + } + + @media (max-width: 600px) { + padding-top: 80px; + } + } + + &__return { + display: flex; + align-items: center; + &-link { + display: flex; + align-items: center; + } + + span { + font-weight: 400; + font-size: 12px; + line-height: 20px; + color: #6f6f6f; + margin-left: 19px; + } + + &-arrow { + display: flex; + align-items: center; + justify-content: center; + width: 48px; + height: 48px; + border-radius: 44px; + background: #8dc63f78; + + img { + width: 45%; + } + } + } + + &__body { + display: flex; + flex-direction: column; + + &-text { + margin-top: 30px; + padding: 33px; + background: #ffffff; + text-align: justify; + border-radius: 12px; + + p { + font-style: normal; + font-weight: 400; + font-size: 20px; + line-height: 24px; + } + } + + &-img { + margin-top: 16px; + } + + &-footer { + margin: 30px 0 78px 25px; + display: flex; + + .yandex { + display: flex; + align-items: center; + img { + margin: 0; + width: 39px; + height: 39px; + } + + &__text { + margin-left: 18px; + p { + font-weight: 500; + font-size: 16px; + line-height: 32px; + } + } + } + + .publication-date { + margin-left: 76px; + display: flex; + align-items: center; + + p { + font-weight: 400; + font-size: 14px; + line-height: 20px; + } + + img { + margin: 0 16px 0 0; + } + } + + @media (max-width: 600px) { + margin: 20px 0 20px 0; + flex-direction: column; + + .publication-date { + margin: 0; + } + + .yandex { + margin: 0 0 10px 0; + } + } + } + + .more-articles { + display: flex; + align-items: center; + margin-bottom: 49px; + + h1 { + font-weight: 500; + font-size: 33px; + line-height: 32px; + } + + &__arrow { + margin: 0 0 0 21px; + display: flex; + justify-content: center; + align-items: center; + width: 27px; + height: 27px; + background: #80777770; + border-radius: 44px; + + img { + width: 50%; + transform: rotate(180deg); + } + } + } + } +} diff --git a/src/pages/Blog/Blog.jsx b/src/pages/Blog/Blog.jsx new file mode 100644 index 00000000..704f3861 --- /dev/null +++ b/src/pages/Blog/Blog.jsx @@ -0,0 +1,106 @@ +import React, { useState } from "react"; + +import AuthHeader from "../../components/AuthHeader/AuthHeader"; +import SideBar from "../../components/SideBar/SideBar"; +import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs"; +import { Footer } from "../../components/Footer/Footer"; +import CardArticle from "../../components/UI/CardArticle/CardArticle"; + +// import arrowRight from "../../images/arrowRight.png"; +import blogArrow from "../../images/blogArrow.svg"; + +import cardImg1 from "../../images/cardArticleItem.png"; +import cardImg2 from "../../images/cardArticleItem2.png"; +import cardImg3 from "../../images/cardArticleItem3.png"; +import cardImg4 from "../../images/cardArticleItem4.png"; +import cardImg5 from "../../images/cardArticleItem5.png"; +import cardImg6 from "../../images/cardArticleItem6.png"; + +import "./blog.scss"; + +export const Blog = ({}) => { + const [article] = useState([ + { + image: cardImg1, + title: "Аутстаффинг джунов: почему это выгодно", + data: "1 марта, 2023", + }, + { + image: cardImg2, + title: "Аутстаффинг джунов: почему это выгодно", + data: "1 марта, 2023", + }, + { + image: cardImg3, + title: "Аутстаффинг джунов: почему это выгодно", + data: "1 марта, 2023", + }, + { + image: cardImg4, + title: "Аутстаффинг джунов: почему это выгодно", + data: "1 марта, 2023", + }, + { + image: cardImg5, + title: "Аутстаффинг джунов: почему это выгодно", + data: "1 марта, 2023", + }, + { + image: cardImg6, + title: "Аутстаффинг джунов: почему это выгодно", + data: "1 марта, 2023", + }, + ]); + + return ( +
    + + + +
    +
    + +
    + +
    +
    +

    Блог

    + +
    + +

    + Из первых уст рассказываем о себе пользователям, делимся полезными и + важными материалами, стремимся получать обратную связь +

    +
    + +
    + {article.map((item, index) => { + return ( + + ); + })} +
    + +
    + +
    +
    + +
    + ); +}; + +export default Blog; diff --git a/src/pages/Blog/blog.scss b/src/pages/Blog/blog.scss new file mode 100644 index 00000000..3e352958 --- /dev/null +++ b/src/pages/Blog/blog.scss @@ -0,0 +1,77 @@ +.blog { + background: #f1f1f1; + + &__breadCrumbs { + margin-top: 30px; + + @media (max-width: 1375px) { + margin-top: 0; + padding-top: 100px; + } + + @media (max-width: 600px) { + display: none; + } + } + + &__title { + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 40px; + + h1 { + font-weight: 500; + font-size: 48px; + line-height: 32px; + } + + h3 { + font-weight: 400; + font-size: 18px; + line-height: 28px; + text-align: justify; + } + + div { + display: flex; + } + + &-arrow { + margin: 0 27px 0 20px; + } + + @media (max-width: 600px) { + padding-top: 110px; + flex-direction: column; + + div { + margin: 0 0 15px 0; + } + } + } + + &__body { + display: flex; + flex-wrap: wrap; + justify-content: space-around; + } + + &__load-more { + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 35px; + + button { + background: #52b709; + border-radius: 44px; + width: 202px; + height: 50px; + color: white; + font-size: 16px; + line-height: 32px; + border: none; + } + } +}