Merge branch 'main' of https://github.com/VividTruthKeeper/hhm-client

2023-02-08 21:37:00 +05:00 · 2023-02-08 21:37:00 +05:00 · 5dda901bea
parent 2ccbd39d65 41849585c9
commit 5dda901bea
20 changed files with 451 additions and 109 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -25,6 +25,7 @@
        "react-spinners": "^0.13.8",
        "redux-thunk": "^2.4.2",
        "sass": "^1.57.1",
+        "swiper": "^9.0.3",
        "uuid": "^9.0.0",
        "vite-plugin-svgr": "^2.4.0"
      },
@ -2278,6 +2279,11 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/ssr-window": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-4.0.2.tgz",
+      "integrity": "sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ=="
+    },
    "node_modules/supports-color": {
      "version": "5.5.0",
      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@ -2305,6 +2311,27 @@
      "resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz",
      "integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ=="
    },
+    "node_modules/swiper": {
+      "version": "9.0.3",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-9.0.3.tgz",
+      "integrity": "sha512-hHYI6CeUHcDyv6IakzAQrUv6nS5BMRn6KOkui16nhtdgYBlWgUdlaMbcdT0o4RJxpwSktCTLgpBtCm+WwwVYRw==",
+      "funding": [
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/swiperjs"
+        },
+        {
+          "type": "open_collective",
+          "url": "http://opencollective.com/swiper"
+        }
+      ],
+      "dependencies": {
+        "ssr-window": "^4.0.2"
+      },
+      "engines": {
+        "node": ">= 4.7.0"
+      }
+    },
    "node_modules/to-fast-properties": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
--- a/package.json
+++ b/package.json
@ -26,6 +26,7 @@
    "react-spinners": "^0.13.8",
    "redux-thunk": "^2.4.2",
    "sass": "^1.57.1",
+    "swiper": "^9.0.3",
    "uuid": "^9.0.0",
    "vite-plugin-svgr": "^2.4.0"
  },
--- a/src/App.tsx
+++ b/src/App.tsx
@ -1,19 +1,22 @@
 // Modules
-import { Routes, Route } from "react-router-dom";
+import { Routes, Route } from 'react-router-dom';

 // Styles
-import "react-lazy-load-image-component/src/effects/blur.css";
-import "react-calendar/dist/Calendar.css";
-import "./styles/style.scss";
+import 'swiper/swiper.css';
+import 'swiper/css/pagination';
+import 'swiper/css/navigation';
+import 'react-lazy-load-image-component/src/effects/blur.css';
+import 'react-calendar/dist/Calendar.css';
+import './styles/style.scss';

 // Pages
-import Main from "./pages/Main";
-import NewsArticle from "./pages/NewsArticle";
-import Category from "./pages/Category";
+import Main from './pages/Main';
+import NewsArticle from './pages/NewsArticle';
+import Category from './pages/Category';

 // Components
-import Header from "./components/header/Header";
-import Footer from "./components/footer/Footer";
+import Header from './components/header/Header';
+import Footer from './components/footer/Footer';

 const App = () => {
  return (
--- a/src/components/aside/AsideNews.tsx
+++ b/src/components/aside/AsideNews.tsx
@ -1,44 +1,41 @@
 // Modules
-import { Link } from "react-router-dom";
-import { LazyLoadImage } from "react-lazy-load-image-component";
+import { Link } from 'react-router-dom';
+import { LazyLoadImage } from 'react-lazy-load-image-component';
 // Images
-import { ReactComponent as ArrRight } from "../../assets/icons/arrow-right.svg";
+import { ReactComponent as ArrRight } from '../../assets/icons/arrow-right.svg';
 // Components
-import NewsCategory from "../global/NewsCategory";
-import NewsDate from "../global/NewsDate";
+import NewsCategory from '../global/NewsCategory';
+import NewsDate from '../global/NewsDate';

 interface Props {
  title: string;
  date: string;
  img: string;
+  category: string;
+  link: string;
 }

-const AsideNews = ({ title, date, img }: Props) => {
+const AsideNews = ({ title, date, img, category, link }: Props) => {
  return (
-    <div className="aside-news">
+    <Link to={link} className="aside-news">
      <div className="aside-news-wrapper">
        <div className="aside-news-image">
-          <LazyLoadImage
-            src={img}
-            alt="image"
-            useIntersectionObserver
-            effect="blur"
-          />
+          <LazyLoadImage src={img} alt="image" useIntersectionObserver effect="blur" />
        </div>
        <div className="aside-news-info">
          <div className="aside-news-info-inner">
            <div className="aside-news-status">
-              <NewsCategory title="политика" />
+              <NewsCategory title={category} />
              <NewsDate date={date} />
            </div>
            <h2 className="aside-news-title">{title}</h2>
          </div>
-          <Link to={`/news/1`} className="aside-news-link">
+          {/* <Link to={link} className="aside-news-link">
            <span>прочитать все</span> <ArrRight />
-          </Link>
+          </Link> */}
        </div>
      </div>
-    </div>
+    </Link>
  );
 };

--- a/src/components/global/NewsCategory.tsx
+++ b/src/components/global/NewsCategory.tsx
@ -1,16 +1,12 @@
 // Modules
-import { Link } from "react-router-dom";
+import { Link } from 'react-router-dom';

 interface Props {
  title: string;
 }

 const NewsCategory = ({ title }: Props) => {
-  return (
-    <Link to={`/category/asd`} className="news-category">
-      {title}
-    </Link>
-  );
+  return <span className="news-category">{title}</span>;
 };

 export default NewsCategory;
--- a/src/components/global/NewsScroll.tsx
+++ b/src/components/global/NewsScroll.tsx
@ -6,14 +6,14 @@ import placeholder from '../../assets/images/placeholder.jpg';

 // Interface
 interface Props {
-  state: boolean;
+  sectionTitle: boolean;
 }

-const NewsScroll = ({ state }: Props) => {
+const NewsScroll = ({ sectionTitle }: Props) => {
  return (
    <div className="news-scroll">
      <div className="news-scroll-wrapper">
-        {state === true ? (
+        {sectionTitle === true ? (
          <SectionTitle title="Лента новостей" linkData={{ link: '/', title: 'Посмотреть все' }} />
        ) : null}
        <div className="news-scroll-inner">
@ -23,7 +23,6 @@ const NewsScroll = ({ state }: Props) => {
            date="12.01.2023"
            category="Политика"
            img={placeholder}
-            link=""
          />
          <News
            title="Президент Туркменистана провёл рабочее совещание по цифровой системе"
@ -31,7 +30,6 @@ const NewsScroll = ({ state }: Props) => {
            date="12.01.2023"
            category="Политика"
            img={placeholder}
-            link=""
          />
          <News
            title="Президент Туркменистана провёл рабочее совещание по цифровой системе"
@ -39,7 +37,6 @@ const NewsScroll = ({ state }: Props) => {
            date="12.01.2023"
            category="Политика"
            img={placeholder}
-            link=""
          />
          <News
            title="Президент Туркменистана провёл рабочее совещание по цифровой системе"
@ -47,7 +44,6 @@ const NewsScroll = ({ state }: Props) => {
            date="12.01.2023"
            category="Политика"
            img={placeholder}
-            link=""
          />
          <News
            title="Президент Туркменистана провёл рабочее совещание по цифровой системе"
@ -55,7 +51,6 @@ const NewsScroll = ({ state }: Props) => {
            date="12.01.2023"
            category="Политика"
            img={placeholder}
-            link=""
          />
        </div>
      </div>
--- a/src/components/main/ContentItem.tsx
+++ b/src/components/main/ContentItem.tsx
@ -0,0 +1,22 @@
+// Modules
+import { LazyLoadImage } from 'react-lazy-load-image-component';
+import { Link } from 'react-router-dom';
+
+interface IProps {
+  type?: 'small' | 'big';
+  img: string;
+  title: string;
+}
+
+const ContentItem = ({ type = 'small', img, title }: IProps) => {
+  return (
+    <div className={`main-content-item main-content-item__${type}`}>
+      <LazyLoadImage src={img} alt="" effect="blur" useIntersectionObserver />
+      <Link to="/news/1" className="main-content-item-overlay">
+        <h2>{title}</h2>
+      </Link>
+    </div>
+  );
+};
+
+export default ContentItem;
--- a/src/components/main/ContentSlider.tsx
+++ b/src/components/main/ContentSlider.tsx
@ -0,0 +1,46 @@
+// Modules
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Navigation, Pagination, Autoplay } from 'swiper';
+
+// Images
+import Placeholder from '../../assets/images/placeholder3.png';
+
+// Components
+import ContentItem from './ContentItem';
+
+// Static
+import { titlePlaceholder } from './MainContent';
+
+const ContentSlider = () => {
+  return (
+    <div className="main-content-slider">
+      <Swiper
+        spaceBetween={24}
+        slidesPerView={1}
+        loop
+        autoplay={{
+          delay: 3000,
+          disableOnInteraction: false,
+        }}
+        modules={[Navigation, Pagination, Autoplay]}
+        pagination={{
+          type: 'bullets',
+        }}>
+        <SwiperSlide>
+          <ContentItem type="big" img={Placeholder} title={titlePlaceholder} />
+        </SwiperSlide>
+        <SwiperSlide>
+          <ContentItem type="big" img={Placeholder} title={titlePlaceholder} />
+        </SwiperSlide>
+        <SwiperSlide>
+          <ContentItem type="big" img={Placeholder} title={titlePlaceholder} />
+        </SwiperSlide>
+        <SwiperSlide>
+          <ContentItem type="big" img={Placeholder} title={titlePlaceholder} />
+        </SwiperSlide>
+      </Swiper>
+    </div>
+  );
+};
+
+export default ContentSlider;
--- a/src/components/main/MainContent.tsx
+++ b/src/components/main/MainContent.tsx
@ -0,0 +1,37 @@
+// Modules
+import { LazyLoadComponent } from 'react-lazy-load-image-component';
+
+// Images
+import Placeholder from '../../assets/images/placeholder3.png';
+
+// Components
+import ContentItem from './ContentItem';
+import SectionTitle from '../global/SectionTitle';
+import ContentSlider from './ContentSlider';
+
+export const titlePlaceholder =
+  'Полезная информация для поступающих на программы подготовки научных кадров в Туркменистане';
+
+const MainContent = () => {
+  return (
+    <>
+      <LazyLoadComponent useIntersectionObserver>
+        <div className="main-content">
+          <SectionTitle title="Главное" />
+          <ContentSlider />
+          <div className="main-content-top">
+            <ContentItem type="big" img={Placeholder} title={titlePlaceholder} />
+            <ContentItem img={Placeholder} title={titlePlaceholder} />
+          </div>
+          <div className="main-content-bottom">
+            <ContentItem img={Placeholder} title={titlePlaceholder} />
+            <ContentItem img={Placeholder} title={titlePlaceholder} />
+            <ContentItem img={Placeholder} title={titlePlaceholder} />
+          </div>
+        </div>
+      </LazyLoadComponent>
+    </>
+  );
+};
+
+export default MainContent;
--- a/src/components/news/News.tsx
+++ b/src/components/news/News.tsx
@ -1,11 +1,11 @@
 // Modules
-import { Link } from "react-router-dom";
-import { LazyLoadImage } from "react-lazy-load-image-component";
+import { Link } from 'react-router-dom';
+import { LazyLoadImage } from 'react-lazy-load-image-component';
 // Images
-import { ReactComponent as ArrRight } from "../../assets/icons/arrow-right.svg";
+import { ReactComponent as ArrRight } from '../../assets/icons/arrow-right.svg';
 // Components
-import NewsCategory from "../global/NewsCategory";
-import NewsDate from "../global/NewsDate";
+import NewsCategory from '../global/NewsCategory';
+import NewsDate from '../global/NewsDate';

 interface Props {
  title: string;
@ -17,15 +17,10 @@ interface Props {

 const News = ({ title, text, category, date, img }: Props) => {
  return (
-    <div className="news">
+    <Link to={`/news/1`} className="news">
      <div className="news-wrapper">
        <div className="news-image">
-          <LazyLoadImage
-            src={img}
-            alt="image"
-            useIntersectionObserver
-            effect="blur"
-          />
+          <LazyLoadImage src={img} alt="image" useIntersectionObserver effect="blur" />
        </div>
        <div className="news-info">
          <div className="news-info-inner">
@ -36,12 +31,12 @@ const News = ({ title, text, category, date, img }: Props) => {
            </div>
            <div className="news-text">{text}</div>
          </div>
-          <Link to={`/news/1`} className="news-link">
+          {/* <Link to={`/news/1`} className="news-link">
            <span>прочитать все</span> <ArrRight />
-          </Link>
+          </Link> */}
        </div>
      </div>
-    </div>
+    </Link>
  );
 };

--- a/src/components/videos/Videos.tsx
+++ b/src/components/videos/Videos.tsx
@ -1,18 +1,18 @@
 // Modules
-import { v4 as uuiv4 } from "uuid";
+import { v4 as uuiv4 } from 'uuid';

 // Components
-import SectionTitle from "../global/SectionTitle";
-import VideosItem from "./VideosItem";
+import SectionTitle from '../global/SectionTitle';
+import VideosItem from './VideosItem';

 // Images
-import Placeholder from "../../assets/images/placeholder.jpg";
+import Placeholder from '../../assets/images/placeholder.jpg';

 // Videos
-import VideoPlaceholder from "../../assets/videos/placeholder.mp4";
+import VideoPlaceholder from '../../assets/videos/placeholder.mp4';

 // Types
-import { videosDataType } from "../../types/videos.types";
+import { videosDataType } from '../../types/videos.types';

 const videosData: videosDataType[] = [
  {
@ -36,26 +36,26 @@ const videosData: videosDataType[] = [
 const Videos = () => {
  return (
    <section className="videos">
-      <div className="container">
-        <div className="videos-inner">
-          <SectionTitle
-            title="Видео"
-            givenClass="videos"
-            linkData={{ link: "/", title: "Посмотреть все" }}
-          />
-          <div className="videos-items">
-            {videosData.map((videosDataItem: videosDataType) => {
-              return (
-                <VideosItem
-                  key={uuiv4()}
-                  url={videosDataItem.url}
-                  placeholder={videosDataItem.placeholder}
-                />
-              );
-            })}
-          </div>
+      {/* <div className="container"> */}
+      <div className="videos-inner">
+        <SectionTitle
+          title="Видео"
+          givenClass="videos"
+          linkData={{ link: '/', title: 'Посмотреть все' }}
+        />
+        <div className="videos-items">
+          {videosData.map((videosDataItem: videosDataType) => {
+            return (
+              <VideosItem
+                key={uuiv4()}
+                url={videosDataItem.url}
+                placeholder={videosDataItem.placeholder}
+              />
+            );
+          })}
        </div>
      </div>
+      {/* </div> */}
    </section>
  );
 };
--- a/src/pages/Main.tsx
+++ b/src/pages/Main.tsx
@ -1,7 +1,8 @@
 // Components
-import Aside from "../components/aside/Aside";
-import NewsScroll from "../components/global/NewsScroll";
-import Videos from "../components/videos/Videos";
+import Aside from '../components/aside/Aside';
+import NewsScroll from '../components/global/NewsScroll';
+import Videos from '../components/videos/Videos';
+import MainContent from '../components/main/MainContent';

 const Main = () => {
  return (
@ -9,8 +10,9 @@ const Main = () => {
      <div className="news-section">
        <div className="container">
          <div className="news-inner">
+            <MainContent />
            <div className="news-outer-wrapper">
-              <NewsScroll state={true} />
+              <NewsScroll sectionTitle={true} />
              <Aside />
            </div>
            <Videos />
--- a/src/styles/_calendar.scss
+++ b/src/styles/_calendar.scss
@ -19,6 +19,7 @@

 .react-calendar {
  border: none;
+  line-height: unset;
 }

 .react-calendar__month-view__weekdays {
@ -86,13 +87,13 @@

 .react-calendar__navigation__arrow.react-calendar__navigation__next-button {
  display: block;
-  background: url("../assets/icons/stroke-right-black.svg") no-repeat center;
+  background: url('../assets/icons/stroke-right-black.svg') no-repeat center;
  color: transparent;
 }

 .react-calendar__navigation__arrow.react-calendar__navigation__prev-button {
  display: block;
-  background: url("../assets/icons/stroke-left-black.svg") no-repeat center;
+  background: url('../assets/icons/stroke-left-black.svg') no-repeat center;
  color: transparent;
 }

--- a/src/styles/_footer.scss
+++ b/src/styles/_footer.scss
@ -9,6 +9,7 @@
 .footer-wrapper {
  display: flex;
  justify-content: space-between;
+  gap: 2.4rem;
 }

 .footer-nav-list {
@ -20,6 +21,8 @@

 .footer-nav-list-item {
  a {
+    white-space: nowrap;
+    text-overflow: ellipsis;
    font-size: 1.8rem;
    color: $white;
    @include roboto;
@ -54,3 +57,27 @@
  font-weight: 400;
  max-width: 37rem;
 }
+
+@media (max-width: 1200px) {
+  .footer-wrapper {
+    flex-direction: column;
+    gap: 4rem;
+  }
+
+  .footer-nav-list {
+    grid-template-columns: repeat(3, auto);
+  }
+}
+
+@media (max-width: 700px) {
+  .footer-nav-list {
+    grid-template-columns: repeat(2, auto);
+    column-gap: 2.4rem;
+  }
+}
+
+// @media (max-width: 390px) {
+//   .footer-nav-list {
+//     grid-template-columns: auto;
+//   }
+// }
--- a/src/styles/_general.scss
+++ b/src/styles/_general.scss
@ -1,5 +1,5 @@
-@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Raleway&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');

 * {
  margin: 0;
@ -71,3 +71,9 @@ h6 {
 .react-calendar__month-view__days {
  column-gap: 1.8rem;
 }
+
+@media screen and (max-width: 900px) {
+  .container {
+    padding: 0 1.5rem;
+  }
+}
--- a/src/styles/_main.scss
+++ b/src/styles/_main.scss
@ -1,3 +1,119 @@
 .main {
  padding: 5.6rem 0;
 }
+
+.main-content {
+  display: flex;
+  flex-direction: column;
+  gap: 2.4rem;
+}
+
+.main-content-top {
+  display: grid;
+  grid-template-columns: calc(67% - 1.2rem) calc(33% - 1.2rem);
+  gap: 2.4rem;
+  height: 40rem;
+}
+
+.main-content-bottom {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 2.4rem;
+  height: 23.7rem;
+}
+
+.main-content-item {
+  position: relative;
+  @include wh100;
+  overflow: hidden;
+
+  span {
+    display: block !important;
+    @include wh100;
+  }
+
+  img {
+    @include wh100;
+    object-fit: cover;
+  }
+
+  &-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    @include wh100;
+    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.7) 100%);
+    display: flex;
+    padding: 1.6rem;
+    align-items: flex-end;
+    z-index: 2;
+
+    h2 {
+      color: $white;
+      font-size: 1.8rem;
+    }
+  }
+
+  &__big {
+    &-overlay {
+      padding: 2.4rem;
+    }
+    h2 {
+      font-size: 2.4rem;
+    }
+  }
+}
+
+.main-content-slider {
+  display: none;
+}
+
+.swiper-wrapper {
+  padding-bottom: 4rem;
+}
+
+.swiper-pagination {
+  bottom: 0rem;
+}
+
+.swiper-pagination-bullet {
+  background: $gray-dark;
+  width: 0.8rem;
+  height: 0.8rem;
+  transition: 0.5s all ease;
+
+  &-active {
+    width: 2.4rem;
+    transition: 0.5s all ease;
+    background: $main;
+    border-radius: 5.3rem;
+  }
+}
+
+// Media
+
+@media screen and (max-width: 1020px) {
+  .main-content-top {
+    grid-template-columns: 1fr;
+    gap: 0;
+    .main-content-item__small {
+      display: none;
+    }
+  }
+
+  .main-content-bottom {
+    height: 19rem;
+  }
+}
+
+@media screen and (max-width: 900px) {
+  .main-content-bottom {
+    display: none;
+  }
+  .main-content-top {
+    display: none;
+  }
+  .main-content-slider {
+    display: block;
+  }
+}
--- a/src/styles/_news-section.scss
+++ b/src/styles/_news-section.scss
@ -9,3 +9,9 @@
  flex-direction: column;
  gap: 5.6rem;
 }
+
+@media (max-width: 1024px) {
+  .news-outer-wrapper {
+    grid-template-columns: 1fr;
+  }
+}
--- a/src/styles/_news.scss
+++ b/src/styles/_news.scss
@ -22,6 +22,10 @@
  font-size: 2.4rem;
  font-weight: 700;
  @include raleway;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
 }

 .news-status {
@ -47,3 +51,48 @@
  -webkit-box-orient: vertical;
  overflow: hidden;
 }
+
+@media (max-width: 768px) {
+  .news-wrapper {
+    flex-direction: column;
+  }
+
+  .news-image {
+    width: 100%;
+    height: 16rem;
+    overflow: hidden;
+    object-fit: cover;
+    object-position: center;
+    img {
+      height: 100%;
+      width: 100%;
+      object-fit: cover;
+      object-position: center;
+    }
+
+    span {
+      display: block !important;
+      height: 100%;
+    }
+  }
+
+  .news-title {
+    font-size: 1.6rem;
+  }
+
+  .news-text {
+    display: none;
+  }
+
+  .new-status {
+    order: 1;
+  }
+
+  .news-info {
+    align-items: start;
+  }
+
+  .news-link {
+    display: none;
+  }
+}
--- a/src/styles/_videos.scss
+++ b/src/styles/_videos.scss
@ -1,7 +1,3 @@
-.videos {
-  // padding: 5.6rem 0;
-}
-
 .videos-inner {
  display: flex;
  flex-direction: column;
@ -40,3 +36,23 @@
    color: $black;
  }
 }
+
+// Media
+
+@media screen and (max-width: 1150px) {
+  .videos-items {
+    grid-template-columns: 1fr 1fr;
+  }
+  .videos-item-video {
+    min-height: 30vw;
+  }
+}
+
+@media screen and (max-width: 780px) {
+  .videos-items {
+    grid-template-columns: 1fr;
+  }
+  .videos-item-video {
+    min-height: 40vw;
+  }
+}
--- a/src/styles/style.scss
+++ b/src/styles/style.scss
@ -1,18 +1,18 @@
-@import "./variables";
-@import "./mixins";
-@import "./general";
-@import "./nav";
-@import "./main";
-@import "./videos";
-@import "./section-title";
-@import "./footer";
-@import "./news";
-@import "./newsCategory";
-@import "./newsDate";
-@import "./newsScroll";
-@import "./asideNews";
-@import "./aside";
-@import "./news-section";
-@import "./news-article";
-@import "./category";
-@import "./calendar";
+@import './variables';
+@import './mixins';
+@import './general';
+@import './nav';
+@import './main';
+@import './videos';
+@import './section-title';
+@import './footer';
+@import './news';
+@import './newsCategory';
+@import './newsDate';
+@import './newsScroll';
+@import './asideNews';
+@import './aside';
+@import './news-section';
+@import './news-article';
+@import './category';
+@import './calendar';