add first news for main page

src/app/store.ts

 import { configureStore } from "@reduxjs/toolkit";
 import headerReducer from "components/Header/headerSlice";
 import globalReducer from "./globalSlice";
-import homeReducer from "pages/homePageSlice";
+import homeReducer from "pages/home/homePageSlice";
 
 const rootReducer = {
   header: headerReducer,

src/components/Header/Header.scss

@@ -27,7 +27,7 @@
 
       .navbar-readAll {
         &:hover {
-          color: $success-500;
+          color: $info-700;
         }
       }
     }

src/components/Newspaper/Newspaper.scss

@@ -5,6 +5,37 @@
   border: 1px solid $neutral-300;
   border-radius: 12px;
   overflow: hidden;
+  display: flex;
+  flex-direction: column;
+
+  &-first {
+    flex-direction: row;
+
+    .newspaper-img {
+      order: 2;
+      width: 50%;
+      height: 288px;
+
+      img {
+        border: 0;
+      }
+    }
+
+    .newspaper-content {
+      padding: 40px;
+      width: 50%;
+
+      p {
+        margin-bottom: 20px;
+      }
+
+      &__desc {
+        line-height: 22px;
+        font-size: 14px;
+        color: $neutral-900;
+      }
+    }
+  }
 
   &:hover {
     cursor: pointer;
@@ -16,9 +47,10 @@
 
     img {
       width: 100%;
+      height: 100%;
       object-fit: cover;
-      border-radius: 12px 12px 0 0;
       border-bottom: 1px solid $neutral-300;
+      display: block;
     }
   }
 
@@ -43,10 +75,29 @@
 
       .newspaper-category {
         font-size: 11px;
-        background-color: $success-150;
-        padding: 6px 8px;
+        padding: 6px 12px;
         border-radius: 12px;
         font-weight: 500;
+
+        &__success {
+          background-color: $success-150;
+          color: $success-600;
+        }
+
+        &__secondary {
+          background-color: $secondary-150;
+          color: $secondary-500;
+        }
+
+        &__info {
+          background-color: $info-150;
+          color: $info-500;
+        }
+
+        &__warning {
+          background-color: $warning-150;
+          color: $warning-500;
+        }
       }
 
       .newspaper-time {

src/components/Newspaper/index.tsx

@@ -4,23 +4,40 @@ import React from "react";
 
 type Props = {
   data: INewspaper;
+  firstNews?: boolean;
+};
+
+const randomTags = () => {
+  const tags = ["success", "info", "secondary", "warning"];
+  const idx = Math.floor(Math.random() * tags.length);
+  return tags[idx];
 };
 
 const Newspaper = (props: Props) => {
-  const { data } = props;
-  const { image, title, createdAt, categorylinkNavigation } = data;
+  const { data, firstNews = false } = props;
+  const { image, title, createdAt, categorylinkNavigation, description } = data;
   const { label } = categorylinkNavigation;
 
   return (
-    <div className="newspaper">
+    <div className={`newspaper ${firstNews ? "newspaper-first" : ""}`}>
       <div className="newspaper-img">
         <img src={image} alt={title} />
       </div>
 
       <div className="newspaper-content">
-        <p>{title}</p>
+        <div className="">
+          <p>{title}</p>
+          {firstNews && (
+            <div className="newspaper-content__desc">{description}</div>
+          )}
+        </div>
+
         <div className="newspaper-content__footer">
-          <div className="newspaper-category">{label}</div>
+          <div
+            className={`newspaper-category newspaper-category__${randomTags()}`}
+          >
+            {label}
+          </div>
 
           <div className="newspaper-time">
             <span>

src/index.tsx

@@ -3,7 +3,7 @@ import ReactDOM from "react-dom/client";
 import { Provider } from "react-redux/es/exports";
 import store from "./app/store";
 import Header from "./components/Header";
-import MainPage from "./pages/MainPage";
+import MainPage from "./pages/home/MainPage";
 import "./_styles.scss";
 
 const root = ReactDOM.createRoot(

src/pages/MainPage.tsx → src/pages/home/MainPage.tsx

@@ -4,7 +4,7 @@ import { globalSelector, homeSelector } from "app/selectors";
 import Loading from "components/Loading";
 import WrapperContainer from "components/WrapperContainer";
 import React, { useEffect } from "react";
-import Newspaper from "../components/Newspaper";
+import Newspaper from "../../components/Newspaper";
 import { getNews } from "./homePageSlice";
 
 const MainPage = () => {
@@ -29,13 +29,16 @@ const MainPage = () => {
   }, []);
 
   return (
-    <main className="py-3">
+    <main className="mainPage">
       <Loading isOpen={isLoading} />
       <WrapperContainer>
-        <div className="newspaper-list row">
-          {newsData.map((newspaper) => (
-            <div className="col-4" key={newspaper.id}>
-              <Newspaper data={newspaper} />
+        <div className="mainPage-title">
+          <h1>Tin mới nhất</h1>
+        </div>
+        <div className="mainPage-list row">
+          {newsData.map((newspaper, idx) => (
+            <div className={`col-${idx === 0 ? 12 : 4}`} key={newspaper.id}>
+              <Newspaper data={newspaper} firstNews={idx === 0} />
             </div>
           ))}
         </div>

src/pages/homePageSlice.ts → src/pages/home/homePageSlice.ts

 import { createAsyncThunk, createSlice, PayloadAction } from "@reduxjs/toolkit";
 import homeApi from "api/homeApi";
-import { INewspaper } from "./interface";
+import { INewspaper } from "pages/interface";
 
 const initialState: { newsData: INewspaper[] } = {
   newsData: [],

src/pages/home/mainPage.scss

+@use "styles/index" as *;
+
+.mainPage {
+  padding: 40px 0;
+
+  &-title {
+    position: relative;
+    z-index: 2;
+    text-align: center;
+
+    h1 {
+      font-size: 48px;
+      color: $info-700;
+      font-weight: 700;
+      text-transform: capitalize;
+      padding: 0 30px;
+      background-color: white;
+      position: relative;
+      z-index: 2;
+      display: inline-block;
+    }
+
+    &::before {
+      content: "";
+      position: absolute;
+      top: 50%;
+      left: 0;
+      width: 100%;
+      height: 2px;
+      background-color: $info-700;
+      z-index: 1;
+    }
+  }
+
+  &-list {
+    margin-top: 40px;
+  }
+}

src/styles/_global.scss

-@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@300;400;500;600;700&family=Roboto:wght@400;500;700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700&family=Roboto:wght@400;500;700&display=swap");
 
 html {
   -webkit-box-sizing: border-box;
@@ -19,11 +19,11 @@ h2,
 h3,
 h4,
 h5,
-h6 {
-  font-family: "Archivo", "helvetica", sans-serif !important;
+h6,
+p {
+  font-family: "Merriweather", serif !important;
 }
 
-p,
 div,
 span,
 small,

src/styles/pages.scss

+@use "pages/home/mainPage.scss";