feat: add basic homepage

src/components/Header/Header.scss

+@use "../../styles/variables";
 @import "../../styles/mixin";
 
 .header {
@@ -24,6 +25,12 @@
       @include desktop {
         display: none;
       }
+
+      .navbar-readAll {
+        &:hover {
+          color: variables.$green-1;
+        }
+      }
     }
   }
 
@@ -35,9 +42,15 @@
       font-size: 15px;
     }
 
-    &__item:nth-last-of-type(-n + 3) {
-      @media (max-width: 1300px) {
-        display: none;
+    &__item {
+      &:hover {
+        text-decoration: underline;
+      }
+
+      &:nth-last-of-type(-n + 3) {
+        @media (max-width: 1300px) {
+          display: none;
+        }
       }
     }
   }

src/components/Header/index.tsx

@@ -78,6 +78,7 @@ export default function Header() {
                 margin: 0,
                 padding: 0,
                 listStyleType: "none",
+                alignItems: "center",
               }}
             >
               {navItems.map((item) => (
@@ -97,15 +98,26 @@ export default function Header() {
                 </Box>
               ))}
             </Box>
-            <Button
-              sx={{ padding: 0, minWidth: "auto", color: "#999" }}
+            <Box
+              sx={{
+                padding: 0,
+                minWidth: "auto",
+                color: "#999",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                cursor: "pointer",
+              }}
               onClick={handleDrawerToggle}
+              className="navbar-readAll"
             >
-              <Typography sx={{ fontSize: 13, marginRight: "5px" }}>
+              <Typography
+                sx={{ fontSize: 13, marginRight: "5px", fontWeight: 700 }}
+              >
                 Tất cả
               </Typography>
               <MenuIcon sx={{ fontSize: 17 }} />
-            </Button>
+            </Box>
           </Box>
         </Toolbar>
       </AppBar>

src/components/Newspaper/Newspaper.scss

+@use "../../styles/variables";
+
+.newspaper {
+  &-img {
+    width: 100%;
+    max-height: 400px;
+    object-fit: cover;
+    transform: scale(0.9);
+    transition: transform 0.2s linear;
+  }
+
+  &:hover {
+    cursor: pointer;
+
+    .newspaper-img {
+      transform: scale(1);
+    }
+  }
+
+  &-content {
+    margin-top: 40px;
+
+    h6 {
+      font-size: 2.5rem;
+      padding-right: 50px;
+    }
+  }
+
+  &-divider {
+    margin: 50px 0;
+    width: 100%;
+    height: 1px;
+    background-color: variables.$gray-1;
+    position: relative;
+
+    &::after {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 50%;
+      transform: translate(-50%, -40%);
+      width: 7px;
+      height: 7px;
+      border-radius: 50%;
+      background-color: variables.$green-1;
+    }
+  }
+}

src/components/Newspaper/index.tsx

+import React from "react";
+import { INewspaper } from "../../utils/interface";
+
+type Props = {
+  data: INewspaper;
+};
+
+const Newspaper = (props: Props) => {
+  const { data } = props;
+  const { description, img, label } = data;
+
+  return (
+    <div className="newspaper mt-4">
+      <div className="row flex-nowrap">
+        <div className="col-7">
+          <img src={img} alt="poster" className="newspaper-img" />
+        </div>
+
+        <div className="col">
+          <div className="newspaper-content">
+            <h6>{label}</h6>
+            <p>{description}</p>
+          </div>
+        </div>
+      </div>
+
+      <div className="newspaper-divider"></div>
+    </div>
+  );
+};
+
+export default Newspaper;

src/components/Sidenav/index.tsx

@@ -38,7 +38,7 @@ const Sidenav = (props: Props) => {
       >
         <Box onClick={handleDrawerToggle} sx={{ textAlign: "center" }}>
           <Typography variant="h6" sx={{ my: 2 }}>
-            MUI
+            Newspaper
           </Typography>
           <Divider />
           <List>

src/index.tsx

@@ -3,6 +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 "./_styles.scss";
 
 const root = ReactDOM.createRoot(
@@ -10,7 +11,10 @@ const root = ReactDOM.createRoot(
 );
 root.render(
   <Provider store={store}>
-    <Header />
+    <>
+      <Header />
+      <MainPage />
+    </>
   </Provider>
 );
 

src/pages/MainPage.tsx

+import React from "react";
+import Newspaper from "../components/Newspaper";
+import { INewspaper } from "../utils/interface";
+
+const newspapers: Array<INewspaper> = [
+  {
+    img: "https://cdn.tuoitre.vn/zoom/504_315/2022/10/24/nova-1-1666595567101786912310-crop-16665957294551455548631.jpeg",
+    label: "Novaland: Tin đồn và văn bản 'cầu cứu' trên mạng là bịa đặt",
+    description:
+      "TTO - Ngày 24-10, Novaland đã chính thức thông tin về các tin đồn những ngày qua liên quan đến các dự án của doanh nghiệp này. Phía Novaland khẳng...",
+  },
+  {
+    img: "https://cdn.tuoitre.vn/zoom/504_315/2022/10/24/nova-1-1666595567101786912310-crop-16665957294551455548631.jpeg",
+    label: "Novaland: Tin đồn và văn bản 'cầu cứu' trên mạng là bịa đặt",
+    description:
+      "TTO - Ngày 24-10, Novaland đã chính thức thông tin về các tin đồn những ngày qua liên quan đến các dự án của doanh nghiệp này. Phía Novaland khẳng...",
+  },
+  {
+    img: "https://cdn.tuoitre.vn/zoom/504_315/2022/10/24/nova-1-1666595567101786912310-crop-16665957294551455548631.jpeg",
+    label: "Novaland: Tin đồn và văn bản 'cầu cứu' trên mạng là bịa đặt",
+    description:
+      "TTO - Ngày 24-10, Novaland đã chính thức thông tin về các tin đồn những ngày qua liên quan đến các dự án của doanh nghiệp này. Phía Novaland khẳng...",
+  },
+  {
+    img: "https://cdn.tuoitre.vn/zoom/504_315/2022/10/24/nova-1-1666595567101786912310-crop-16665957294551455548631.jpeg",
+    label: "Novaland: Tin đồn và văn bản 'cầu cứu' trên mạng là bịa đặt",
+    description:
+      "TTO - Ngày 24-10, Novaland đã chính thức thông tin về các tin đồn những ngày qua liên quan đến các dự án của doanh nghiệp này. Phía Novaland khẳng...",
+  },
+  {
+    img: "https://cdn.tuoitre.vn/zoom/504_315/2022/10/24/nova-1-1666595567101786912310-crop-16665957294551455548631.jpeg",
+    label: "Novaland: Tin đồn và văn bản 'cầu cứu' trên mạng là bịa đặt",
+    description:
+      "TTO - Ngày 24-10, Novaland đã chính thức thông tin về các tin đồn những ngày qua liên quan đến các dự án của doanh nghiệp này. Phía Novaland khẳng...",
+  },
+  {
+    img: "https://cdn.tuoitre.vn/zoom/504_315/2022/10/24/nova-1-1666595567101786912310-crop-16665957294551455548631.jpeg",
+    label: "Novaland: Tin đồn và văn bản 'cầu cứu' trên mạng là bịa đặt",
+    description:
+      "TTO - Ngày 24-10, Novaland đã chính thức thông tin về các tin đồn những ngày qua liên quan đến các dự án của doanh nghiệp này. Phía Novaland khẳng...",
+  },
+];
+
+const MainPage = () => {
+  return (
+    <main className="container">
+      {newspapers.map((newspaper) => (
+        <Newspaper key={newspaper.label} data={newspaper} />
+      ))}
+    </main>
+  );
+};
+
+export default MainPage;

src/styles/_variables.scss

+$red: #d01515;
+$gray: #808080;
+$gray-1: #c4bcbc;
+$green: #008000;
+$green-1: #069a06;

src/styles/components.scss

 @use "../components/Header/Header.scss";
+@use "../components/Newspaper/Newspaper.scss";

src/utils/interface.ts

+export interface INewspaper {
+  img: string;
+  label: string;
+  description: string;
+}