news, documents developed
This commit is contained in:
parent
4d4cd93192
commit
219e4f62ba
Binary file not shown.
|
After Width: | Height: | Size: 140 KiB |
|
|
@ -0,0 +1,55 @@
|
|||
.about-wrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.about-left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 73.6rem;
|
||||
gap: 2.4rem;
|
||||
}
|
||||
|
||||
.about-text-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.6rem;
|
||||
max-width: 73.6rem;
|
||||
margin-bottom: 2.6rem;
|
||||
}
|
||||
|
||||
.about-text {
|
||||
color: $base-gray;
|
||||
font-size: 1.6rem;
|
||||
line-height: 150%;
|
||||
}
|
||||
|
||||
.about-link-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.6rem;
|
||||
}
|
||||
|
||||
.about-link {
|
||||
display: flex;
|
||||
gap: 0.8rem;
|
||||
align-items: center;
|
||||
transition: all 0.2s linear;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.about-link-text {
|
||||
font-size: 1.6rem;
|
||||
font-weight: 700;
|
||||
color: $base-blue;
|
||||
}
|
||||
|
||||
.about-right {
|
||||
width: 73.6rem;
|
||||
background: $base-gray;
|
||||
height: 41.4rem;
|
||||
}
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
.document-link {
|
||||
display: flex;
|
||||
gap: 2.4rem;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
border: 1px solid $base-gray;
|
||||
max-width: 47.7rem;
|
||||
border-radius: 0.5rem;
|
||||
transition: all 0.3s linear;
|
||||
|
||||
&:hover {
|
||||
background: $base-blue;
|
||||
.document-title {
|
||||
color: $base-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.document-title {
|
||||
color: $base-blue;
|
||||
font-weight: 400;
|
||||
font-size: 1.8rem;
|
||||
line-height: 150%;
|
||||
}
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
.documents-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3.2rem;
|
||||
}
|
||||
|
||||
.documents-links-wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, auto);
|
||||
column-gap: 4rem;
|
||||
row-gap: 2.4rem;
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
.news-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3.2rem;
|
||||
}
|
||||
|
||||
.news-post-wrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
.news-post {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.6rem;
|
||||
max-width: 47.7rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.news-post-img {
|
||||
max-width: 47.7rem;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.news-post-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.8rem;
|
||||
}
|
||||
|
||||
.news-post-date {
|
||||
font-size: 1.6rem;
|
||||
color: $base-gray;
|
||||
font-weight: 400;
|
||||
margin-bottom: 0.8rem;
|
||||
}
|
||||
|
||||
.news-post-title {
|
||||
font-size: 2.4rem;
|
||||
font-weight: 700;
|
||||
color: $base-black;
|
||||
}
|
||||
|
||||
.news-post-text {
|
||||
font-size: 1.6rem;
|
||||
color: $base-gray;
|
||||
}
|
||||
|
||||
.news-post-link {
|
||||
display: flex;
|
||||
gap: 1.6rem;
|
||||
align-items: center;
|
||||
transition: 0.3s linear;
|
||||
width: fit-content;
|
||||
|
||||
h3 {
|
||||
font-size: 1.6rem;
|
||||
color: $base-blue;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
|
@ -6,3 +6,8 @@
|
|||
@import './hero';
|
||||
@import './ticker';
|
||||
@import './sectionTitle';
|
||||
@import './about';
|
||||
@import './news';
|
||||
@import './newsPost';
|
||||
@import './documents';
|
||||
@import './documentLink';
|
||||
|
|
|
|||
|
|
@ -0,0 +1,17 @@
|
|||
// Modules
|
||||
import { Link } from 'react-router-dom';
|
||||
// Icons
|
||||
import file from '../assets/icons/file.svg';
|
||||
|
||||
const DocumentLink = ({ title }) => {
|
||||
return (
|
||||
<Link className="document-link" to={'/'}>
|
||||
<div className="document-img">
|
||||
<img src={file} alt="file" />
|
||||
</div>
|
||||
<h3 className="document-title">{title}</h3>
|
||||
</Link>
|
||||
);
|
||||
};
|
||||
|
||||
export default DocumentLink;
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
// Icons
|
||||
import { Link } from 'react-router-dom';
|
||||
import arrow from '../assets/icons/arrow.svg';
|
||||
// Images
|
||||
import news from '../assets/images/news.png';
|
||||
|
||||
const NewsPost = () => {
|
||||
return (
|
||||
<div className="news-post">
|
||||
<div className="news-post-img">
|
||||
<img src={news} alt="news-image" />
|
||||
</div>
|
||||
<div className="news-post-content">
|
||||
<h3 className="news-post-date">18.08.2022</h3>
|
||||
<h2 className="news-post-title">
|
||||
Предстовители Индии и Кыргыстана приобрели текстильную продукцию
|
||||
</h2>
|
||||
<p className="news-post-text">
|
||||
В среду 17 августа на торгах Государственной товарно-сырьевой биржи Туркменистана было
|
||||
заключено 7 сделок на общую сумму $1,4 млн и 9,7 туркменских манат.
|
||||
</p>
|
||||
</div>
|
||||
<Link className="news-post-link" to={'/'}>
|
||||
<img src={arrow} alt="arrow" />
|
||||
<h3>Читать полностью </h3>
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default NewsPost;
|
||||
|
|
@ -1,7 +1,13 @@
|
|||
// Modules
|
||||
import { Link } from 'react-router-dom';
|
||||
// Components
|
||||
import Hero from '../components/Hero';
|
||||
import SectionTitle from '../components/SectionTitle';
|
||||
import Ticker from '../components/Ticker';
|
||||
// Icons
|
||||
import arrow from '../assets/icons/arrow.svg';
|
||||
import NewsPost from '../components/NewsPost';
|
||||
import DocumentLink from '../components/DocumentLink';
|
||||
|
||||
const Home = () => {
|
||||
return (
|
||||
|
|
@ -10,13 +16,87 @@ const Home = () => {
|
|||
<Hero />
|
||||
<Ticker />
|
||||
</div>
|
||||
|
||||
{/* About section */}
|
||||
<section className="about">
|
||||
<div className="container">
|
||||
<div className="about-wrapper">
|
||||
<SectionTitle title="услуги биржы" />
|
||||
<div className="about-left">
|
||||
<SectionTitle title="услуги биржы" />
|
||||
<div className="about-text-wrapper">
|
||||
<p className="about-text">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Eu nisl, rhoncus aenean
|
||||
dignissim velit vestibulum cras ultrices etiam. Iaculis vitae imperdiet eget
|
||||
fringilla a egestas purus. Iaculis vitae imperdiet eget fringilla a egestas purus.
|
||||
</p>
|
||||
<p className="about-text">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Eu nisl, rhoncus aenean
|
||||
dignissim velit vestibulum cras ultrices etiam. Iaculis vitae imperdiet eget
|
||||
fringilla a egestas purus. Iaculis vitae imperdiet eget fringilla a egestas purus.
|
||||
</p>
|
||||
</div>
|
||||
<div className="about-link-wrapper">
|
||||
<Link to={'/'} className="about-link">
|
||||
<img src={arrow} alt="link" className="about-link-text" />
|
||||
<h3 className="about-link-text">Подать документы онлайн</h3>
|
||||
</Link>
|
||||
<Link to={'/'} className="about-link">
|
||||
<img src={arrow} alt="link" className="about-link-text" />
|
||||
<h3 className="about-link-text">Проверить статус подписания контрактов</h3>
|
||||
</Link>
|
||||
<Link to={'/'} className="about-link">
|
||||
<img src={arrow} alt="link" className="about-link-text" />
|
||||
<h3 className="about-link-text">Узнать импортные цены можно здесь</h3>
|
||||
</Link>
|
||||
<Link to={'/'} className="about-link">
|
||||
<img src={arrow} alt="link" className="about-link-text" />
|
||||
<h3 className="about-link-text">
|
||||
Просмотреть тарифы и сборы для участников биржы
|
||||
</h3>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="about-right"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{/* About section ./========= */}
|
||||
|
||||
{/* News section ./========= */}
|
||||
<section className="news">
|
||||
<div className="container">
|
||||
<div className="news-wrapper">
|
||||
<SectionTitle title="Новости" />
|
||||
<div className="news-post-wrapper">
|
||||
<NewsPost />
|
||||
<NewsPost />
|
||||
<NewsPost />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{/* News section ./========= */}
|
||||
|
||||
{/* Documents section ./========= */}
|
||||
<section className="documents">
|
||||
<div className="container">
|
||||
<div className="documents-wrapper">
|
||||
<SectionTitle title="Документы для скачивания" />
|
||||
<div className="documents-links-wrapper">
|
||||
<DocumentLink title="Внутрений контроль по противодействию леголизации доходов" />
|
||||
<DocumentLink title="Внутрений контроль по противодействию леголизации доходов" />
|
||||
<DocumentLink title="Внутрений контроль по противодействию леголизации доходов" />
|
||||
<DocumentLink title="Внутрений контроль по противодействию леголизации доходов" />
|
||||
<DocumentLink title="Внутрений контроль по противодействию леголизации доходов" />
|
||||
<DocumentLink title="Внутрений контроль по противодействию леголизации доходов" />
|
||||
<DocumentLink title="Внутрений контроль по противодействию леголизации доходов" />
|
||||
<DocumentLink title="Внутрений контроль по противодействию леголизации доходов" />
|
||||
<DocumentLink title="Внутрений контроль по противодействию леголизации доходов" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{/* Documents section ./========= */}
|
||||
</main>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue