update

src/app/layout.tsx

@@ -4,7 +4,7 @@ import 'swiper/css';
 import 'swiper/css/navigation';
 import 'swiper/css/pagination';
 import '../styles/globals.css';
-import Header from '@components/layout/Header/Header';
+import Header from '@/src/components/layout/Header';
 
 export const metadata: Metadata = {
   title: 'Nguyễn Công PC - Cửa Hàng Máy Tính PC Đồ Hoạ - PC Gaming chuyên nghiệp',

src/app/page.tsx

@@ -1,13 +1,10 @@
-import Image from 'next/image';
+import React from 'react';
-import SliderHome from '@components/layout/homepage/SliderHome';
+import Home from '@components/layout/home';
 
-export default function Home() {
+export default function Homepage() {
   return (
-    <div className="page-hompage mt-4">
+    <>
-      <div className="container">
+      <Home />
-        {/* slider */}
+    </>
-        <SliderHome />
-      </div>
-    </div>
   );
 }

src/components/layout/Header/HeaderBottom/HeaderBottomRight.tsx

@@ -1,6 +1,6 @@
 'use client';
 import React from 'react';
-import { menuData } from './menuData'; // Đảm bảo file này export menuData
+import { menuData } from '../menuData'; // Đảm bảo file này export menuData
 import Link from 'next/link';
 import { FaCaretDown } from 'react-icons/fa';
 

src/components/layout/Header/HeaderBottom/index.tsx

@@ -1,7 +1,7 @@
 'use client';
 import React, { useState } from 'react';
 import { FaBars } from 'react-icons/fa';
-import { menuData } from './menuData';
+import { menuData } from '../menuData';
 import Image from 'next/image';
 import Link from 'next/link';
 import HeaderBottomRight from './HeaderBottomRight';

src/components/layout/home/BoxDeal/BoxProductDeal.tsx

@@ -0,0 +1,34 @@
+'use client';
+import React from 'react';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Autoplay, Navigation, Pagination } from 'swiper/modules';
+import { FaCaretRight } from 'react-icons/fa';
+
+const BoxProductDeal: React.FC = () => {
+  return (
+    <div className="box-product-deal boder-radius-10">
+      <div className="box-title-deal flex items-center justify-between">
+        <div className="title-deal flex items-center justify-center gap-10">
+          <i className="sprite sprite-icon-deal-home"></i>
+          <h2 className="title font-bold">Giá tốt mỗi ngày</h2>
+          <span className="text-time-deal-home color-white fz-16 font-bold">Kết thúc sau</span>
+          <div className="global-time-deal flex items-center gap-6"></div>
+        </div>
+        <a href="/deal" className="button-deal color-white mb-10 flex items-center">
+          Xem thêm khuyến mãi <FaCaretRight size={16} />
+        </a>
+      </div>
+      <div className="box-list-item-deal swiper-box-deal">
+        <Swiper
+          modules={[Autoplay, Navigation, Pagination]}
+          spaceBetween={12}
+          slidesPerView={6}
+          loop={true}
+          navigation={true}
+        ></Swiper>
+      </div>
+    </div>
+  );
+};
+
+export default BoxProductDeal;

src/components/layout/home/index.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import SliderHome from './SliderHome';
+import BoxProductDeal from './BoxDeal/BoxProductDeal';
+const Home = () => {
+  return (
+    <div className="page-hompage mt-4">
+      <div className="container">
+        {/* slider */}
+        <SliderHome />
+        {/* deal */}
+        <BoxProductDeal />
+      </div>
+    </div>
+  );
+};
+
+export default Home;

src/components/layout/homepage/BoxProductDeal.tsx

@@ -1,24 +0,0 @@
-'use client';
-import React from 'react';
-
-const BoxProductDeal: React.FC = () => {
-  return (
-    <div className="box-product-deal boder-radius-10">
-      <div className="box-title-deal d-flex align-items-center justify-content-between">
-        <div className="title-deal d-flex align-items-center justify-content-center gap-10">
-          <i className="sprite sprite-icon-deal-home"></i>
-          <h2 className="title font-weight-800">Giá tốt mỗi ngày</h2>
-          <span className="text-time-deal-home color-white fz-16 font-weight-700">
-            Kết thúc sau
-          </span>
-          <div className="global-time-deal d-flex align-items-center gap-6"></div>
-        </div>
-        <a href="/deal" className="button-deal color-white mb-10">
-          Xem thêm khuyến mãi <i className="fa-solid fa-caret-right"></i>
-        </a>
-      </div>
-    </div>
-  );
-};
-
-export default BoxProductDeal;

src/styles/globals.css

@@ -2174,6 +2174,7 @@ textarea::placeholder {
 .page-hompage .box-product-deal {
   padding: 12px;
   margin: 20px 0;
+  background: linear-gradient(180deg, #ee1100 0%, #000000 100%);
 }
 .page-hompage .box-product-deal .title-deal {
   margin-top: 10px;