main responsive

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 (

src/components/main/ContentItem.tsx

@@ -1,5 +1,6 @@
 // Modules
 import { LazyLoadImage } from 'react-lazy-load-image-component';
+import { Link } from 'react-router-dom';
 
 interface IProps {
   type?: 'small' | 'big';
@@ -11,9 +12,9 @@ const ContentItem = ({ type = 'small', img, title }: IProps) => {
   return (
     <div className={`main-content-item main-content-item__${type}`}>
       <LazyLoadImage src={img} alt="" effect="blur" useIntersectionObserver />
-      <div className="main-content-item-overlay">
+      <Link to="/news/1" className="main-content-item-overlay">
         <h2>{title}</h2>
-      </div>
+      </Link>
     </div>
   );
 };

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;

src/components/main/MainContent.tsx

@@ -7,8 +7,9 @@ import Placeholder from '../../assets/images/placeholder3.png';
 // Components
 import ContentItem from './ContentItem';
 import SectionTitle from '../global/SectionTitle';
+import ContentSlider from './ContentSlider';
 
-const titlePlaceholder =
+export const titlePlaceholder =
   'Полезная информация для поступающих на программы подготовки научных кадров в Туркменистане';
 
 const MainContent = () => {
@@ -17,6 +18,7 @@ const MainContent = () => {
       <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} />

src/styles/_main.scss

@@ -63,3 +63,57 @@
     }
   }
 }
+
+.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;
+  }
+}

src/styles/_news.scss

@@ -72,6 +72,7 @@
 
     span {
       display: block !important;
+      height: 100%;
     }
   }
 

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';