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

Added Article pages and fixed SideBar

Browse Source
This commit is contained in:
MaxOvs19
2023-04-28 18:07:34 +03:00
parent 26eedabe0f
commit a3570668f1
8 changed files with 324 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

138
src/pages/Article/Article.jsx Normal file
View File

@ -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 (
<div className="article-blog">
<AuthHeader />
<SideBar />
<div className="container">
<div className="article-blog__breadCrumbs">
<ProfileBreadcrumbs
links={[
{ name: "Главная", link: "/auth" },
{ name: "Блог", link: "/blog" },
{
name: "Аутстаффинг джунов: почему это выгодно",
link: "/blog",
},
]}
/>
</div>
<div className="article-blog__title">
<h1>Аутстаффинг джунов: почему это выгодно</h1>
</div>
<div className="article-blog__return">
<Link to={"/blog"} className="article-blog__return-link">
<div className="article-blog__return-arrow">
<img src={rightArrow} />
</div>
<span>вернуться к списку статей</span>
</Link>
</div>
<div className="article-blog__body">
<div className="article-blog__body-text">
<p>
Нет, мы работаем только с юридическими лицами и индивидуальными
предпринимателями и тщательно проверяем своих партнеров.
Партнерами являются агентства, которые специализируются на
оказании услуг в формате аутстафф-модели и обладают глубокой
экспертизой в разработке и внедрении ИТ-проектов.
</p>
</div>
<img src={mockImgArticle} className="article-blog__body-img" />
<div className="article-blog__body-text">
<p>
С одной стороны, зарплаты в сфере разработки растут, с другой
стороны, появляется огромное количество новичков, которые хотят
легко и просто войти в ИТ-сферу на волне востребованности и
больших зарплат. Разумеется, это приводит к осторожному отношению
работодателя к выпускникам различных курсов. Нет такого курса,
который даст на 100% готового джуна, слишком многое завязано на
личной инициативе, обучаемости и желании.
</p>
<br />
<p>
В итоге получается, что взгляды работодателя и потенциального
сотрудника расходятся: работодатель не хочет открывать ящик
пандоры, на который нужно тратить время, а работник, только
прошедший курсы, испытывает эффект завышенных ожиданий и имеет
зачастую неадекватные запросы.
</p>
</div>
<div className="article-blog__body-footer">
<div className="yandex">
<img src={yandexZen} />
<div className="yandex__text">
<p>Читать на Дзен</p>
<span>dzen.ru</span>
</div>
</div>
<div className="publication-date">
<img src={cardCalendar} />
<p>1 марта, 2023</p>
</div>
</div>
<div className="more-articles">
<h1>Читайте также</h1>
<div className="more-articles__arrow">
<img src={rightArrow} />
</div>
</div>
<div className="blog__body">
{article.map((item, index) => {
return (
<CardArticle
images={item.image}
title={item.title}
data={item.data}
key={index}
id={index}
/>
);
})}
</div>
</div>
</div>
<Footer />
</div>
);
};
export default Article;

139
src/pages/Article/article.scss Normal file
View File

@ -0,0 +1,139 @@
.article-blog {
background: #f1f1f1;
&__breadCrumbs {
margin-top: 30px;
}
&__title {
margin: 42px 0 44px 0;
h1 {
font-weight: 500;
font-size: 38px;
line-height: 32px;
}
}
&__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;
}
}
}
.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);
}
}
}
}
}