newsitem

src/App.tsx

@@ -1,17 +1,18 @@
 // 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-lazy-load-image-component/src/effects/blur.css';
-import "./styles/style.scss";
+import './styles/style.scss';
 
 // Pages
-import Main from "./pages/Main";
+import Main from './pages/Main';
+import News from './pages/News';
 
 // Static
-import Header from "./components/header/Header";
+import Header from './components/header/Header';
-import Footer from "./components/footer/Footer";
+import Footer from './components/footer/Footer';
-import Video from "./components/video/Video";
+import Video from './components/video/Video';
 
 const App = () => {
   return (
@@ -19,6 +20,7 @@ const App = () => {
       <Header />
       <Routes>
         <Route path="/" element={<Main />} />
+        <Route path="/news" element={<News />} />
       </Routes>
       <Video />
       <Footer />

src/components/news/NewsItem.tsx

@@ -0,0 +1,65 @@
+// Modules
+import { LazyLoadImage } from 'react-lazy-load-image-component';
+
+// Images
+import News from '../../assets/images/news.png';
+
+const NewsItem = () => {
+  return (
+    <section className="news-item">
+      <div className="news-head">
+        <div className="news-head-top">
+          <h4>СПОРТ</h4>
+          <p>15:23, 21 января 2023</p>
+        </div>
+        <h1 className="news-head-bottom">
+          В федерации футбола Туркменистана подвели итоги прошедшего года и наметили курс на 2023
+          год
+        </h1>
+      </div>
+      <div className="news-img">
+        <LazyLoadImage src={News} effect="blur" useIntersectionObserver />
+      </div>
+      <div className="news-content">
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident enim laborum nobis
+          autem omnis tempora? Optio, exercitationem quo molestias inventore sequi reprehenderit
+          nostrum error neque eius repellat dolor odit impedit maxime, ratione mollitia? Suscipit
+          exercitationem temporibus provident id sit expedita corporis recusandae iusto! Recusandae
+          corrupti impedit at molestias vitae distinctio.
+        </p>
+        <p>
+          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptate ea tempore recusandae
+          earum eveniet nemo voluptatem placeat eligendi iure reiciendis odio, sunt, nobis harum a
+          aut ducimus eaque eum cupiditate?
+        </p>
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident enim laborum nobis
+          autem omnis tempora? Optio, exercitationem quo molestias inventore sequi reprehenderit
+          nostrum error neque eius repellat dolor odit impedit maxime, ratione mollitia? Suscipit
+          exercitationem temporibus provident id sit expedita corporis recusandae iusto! Recusandae
+          corrupti impedit at molestias vitae distinctio.
+        </p>
+        <p>
+          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptate ea tempore recusandae
+          earum eveniet nemo voluptatem placeat eligendi iure reiciendis odio, sunt, nobis harum a
+          aut ducimus eaque eum cupiditate?
+        </p>
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident enim laborum nobis
+          autem omnis tempora? Optio, exercitationem quo molestias inventore sequi reprehenderit
+          nostrum error neque eius repellat dolor odit impedit maxime, ratione mollitia? Suscipit
+          exercitationem temporibus provident id sit expedita corporis recusandae iusto! Recusandae
+          corrupti impedit at molestias vitae distinctio.
+        </p>
+        <p>
+          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptate ea tempore recusandae
+          earum eveniet nemo voluptatem placeat eligendi iure reiciendis odio, sunt, nobis harum a
+          aut ducimus eaque eum cupiditate?
+        </p>
+      </div>
+    </section>
+  );
+};
+
+export default NewsItem;

src/pages/News.tsx

@@ -0,0 +1,16 @@
+// Components
+import NewsItem from '../components/news/NewsItem';
+
+const News = () => {
+  return (
+    <main className="news">
+      <div className="container">
+        <div className="news-inner">
+          <NewsItem />
+        </div>
+      </div>
+    </main>
+  );
+};
+
+export default News;

src/styles/_news.scss

@@ -0,0 +1,46 @@
+.news-inner {
+  display: grid;
+  grid-template-columns: 1fr minmax(60rem, 30rem);
+  gap: 4.8rem;
+  padding: 6.4rem 0;
+}
+
+.news-item {
+  display: flex;
+  flex-direction: column;
+  gap: 2.4rem;
+}
+
+.news-head {
+  display: flex;
+  flex-direction: column;
+  gap: 2.4rem;
+}
+
+.news-head-top {
+  display: flex;
+  gap: 3.2rem;
+
+  h4 {
+    font-size: 1.8rem;
+    color: $main;
+  }
+
+  p {
+    font-size: 1.4rem;
+    color: $main;
+  }
+}
+
+.news-head-bottom {
+  font-size: 2.4rem;
+  color: $main;
+}
+
+.news-content {
+  display: flex;
+  flex-direction: column;
+  gap: 1.6rem;
+  font-size: 1.8rem;
+  line-height: 2.2rem;
+}

src/styles/style.scss

@@ -1,5 +1,6 @@
-@import "./variables";
+@import './variables';
-@import "./general";
+@import './general';
-@import "./header";
+@import './header';
-@import "./footer";
+@import './footer';
-@import "./video";
+@import './video';
+@import './news';