category page

src/App.tsx

@@ -1,19 +1,20 @@
 // 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 "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 Main from "./pages/Main";
+import NewsArticle from "./pages/NewsArticle";
+import Category from "./pages/Category";
 
 // Components
-import Header from './components/header/Header';
-import Videos from './components/videos/Videos';
-import Footer from './components/footer/Footer';
+import Header from "./components/header/Header";
+import Videos from "./components/videos/Videos";
+import Footer from "./components/footer/Footer";
 
 const App = () => {
   return (
@@ -21,8 +22,7 @@ const App = () => {
       <Header />
       <Routes>
         <Route path="/" element={<Main />} />
-      </Routes>
-      <Routes>
+        <Route path="/category/:category" element={<Category />} />
         <Route path="/news/:id" element={<NewsArticle />} />
       </Routes>
       <Videos />

src/components/category/MainImg.tsx

@@ -0,0 +1,33 @@
+// Modules
+import { LazyLoadImage } from "react-lazy-load-image-component";
+import { Link } from "react-router-dom";
+
+interface IProps {
+  img: string;
+}
+
+const MainImg = ({ img }: IProps) => {
+  return (
+    <Link to={"/news/123"} className="main-img">
+      <LazyLoadImage
+        src={img}
+        alt={img}
+        useIntersectionObserver
+        effect="blur"
+      />
+
+      <div className="main-img-overlay">
+        <h2>
+          Полезная информация для поступающих на программы подготовки научных
+          кадров в Туркменистане
+        </h2>
+        <p>
+          <span>Политика</span>
+          <span>12.01.2023</span>
+        </p>
+      </div>
+    </Link>
+  );
+};
+
+export default MainImg;

src/pages/Category.tsx

@@ -0,0 +1,27 @@
+// Components
+import Aside from "../components/aside/Aside";
+import NewsScroll from "../components/global/NewsScroll";
+import MainImg from "../components/category/MainImg";
+
+// Images
+import Placeholder from "../assets/images/placeholder3.png";
+
+const Category = () => {
+  return (
+    <main className="category">
+      <div className="container">
+        <div className="category-inner">
+          <div className="category-left">
+            <MainImg img={Placeholder} />
+            <NewsScroll />
+          </div>
+          <div className="category-right">
+            <Aside />
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+};
+
+export default Category;

src/styles/_category.scss

@@ -0,0 +1,72 @@
+.main-img {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  max-height: 40rem;
+}
+
+.main-img-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+    180deg,
+    rgba(0, 0, 0, 0) 50%,
+    rgba(0, 0, 0, 0.7) 100%
+  );
+  z-index: 2;
+  pointer-events: none;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  gap: 2.4rem;
+  padding: 2.4rem;
+  color: $white;
+
+  h2 {
+    font-size: 2.4rem;
+  }
+
+  p {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 2.4rem;
+    font-size: 1.2rem;
+    span {
+      &:first-child {
+        text-align: left;
+      }
+      &:last-child {
+        text-align: right;
+      }
+    }
+  }
+}
+
+.category-inner {
+  padding: 5.6rem 0;
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  gap: 2.4rem;
+}
+
+.main-img {
+  border-radius: 0.5rem;
+  overflow: hidden;
+
+  span,
+  img {
+    width: 100%;
+    height: 100%;
+    border-radius: 0.5rem;
+  }
+}
+
+.category-left {
+  display: flex;
+  flex-direction: column;
+  gap: 2.4rem;
+}

src/styles/style.scss

@@ -1,16 +1,17 @@
-@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 "./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";