update

2025-12-18 17:35:46 +07:00
parent 8d2a21a88b
commit a7488565fb
9 changed files with 104 additions and 321 deletions
--- a/globals.d.ts
+++ b/globals.d.ts
@@ -1 +1,5 @@
 declare module "*.css";
+declare module 'swiper/css';
+declare module 'swiper/css/navigation';
+declare module 'swiper/css/pagination';
+declare module 'swiper/css/autoplay';
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,5 +1,8 @@
 import type { Metadata } from 'next';
 import '../styles/sf-pro-display.css';
+import 'swiper/css';
+import 'swiper/css/navigation';
+import 'swiper/css/pagination';
 import '../styles/globals.css';
 import Header from '@components/layout/Header/Header';

--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -3,7 +3,7 @@ import SliderHome from '@components/layout/homepage/SliderHome';

 export default function Home() {
  return (
-    <div className="page-hompage mt-12">
+    <div className="page-hompage mt-4">
      <div className="container">
        {/* slider */}
        <SliderHome />
--- a/src/components/layout/Header/HeaderBottom.tsx
+++ b/src/components/layout/Header/HeaderBottom.tsx
@@ -56,7 +56,7 @@ const HeaderBottom: React.FC = () => {
              ))}
            </div>
          </div>
-          <ul className="list-category-header relative flex w-[calc(100%_-220px)] items-center justify-between gap-12">
+          <ul className="list-category-header relative flex w-[calc(100%_-220px)] items-center justify-between gap-5">
            <HeaderBottomRight />
          </ul>
        </div>
--- a/src/components/layout/Header/HeaderBottomRight.tsx
+++ b/src/components/layout/Header/HeaderBottomRight.tsx
@@ -42,15 +42,15 @@ const HeaderBottomRight: React.FC = () => {

        return (
          <li key={item.id} className="item-category-header" data-id={item.id}>
-            <Link href={item.id === '408' ? '#' : item.url} className="flex items-center gap-6">
+            <Link href={item.id === '408' ? '#' : item.url} className="flex items-center gap-2">
              <i className={`sprite-more ${info.icon}`}></i>
              <span className="title-header-bottom">{info.title}</span>
-              <FaCaretDown size="16" className='text-white' />
+              <FaCaretDown size="16" className="text-white" />
            </Link>

            <div className="list-category-child flex justify-between">
              <div className="box-left">
-                <ul className="flex flex-wrap gap-8">
+                <ul className="grid grid-cols-4 gap-5">
                  {item.isParent === '1' && (
                    <>
                      {item.id === '408'
@@ -62,7 +62,7 @@ const HeaderBottomRight: React.FC = () => {
                                  {child1.title}
                                </Link>
                                {child1.isParent === '1' && (
-                                  <div className="list-child-lv3 flex-column mt-10 flex">
+                                  <div className="list-child-lv3 mt-10 flex flex-col">
                                    {child1.children?.map((child2) => (
                                      <Link key={child2.id} href={child2.url} className="child-lv3">
                                        {child2.title}
@@ -78,7 +78,7 @@ const HeaderBottomRight: React.FC = () => {
                                {_item_child.title}
                              </Link>
                              {_item_child.isParent === '1' && (
-                                <div className="list-child-lv3 flex-column mt-10 flex">
+                                <div className="list-child-lv3 mt-10 flex flex-col">
                                  {_item_child.children?.map((_item_childtwo) => (
                                    <Link
                                      key={_item_childtwo.id}
@@ -98,7 +98,7 @@ const HeaderBottomRight: React.FC = () => {
              </div>

              <div className={`box-right flex-1 product-category-${item.id}`}>
-                <p className="title font-weight-700">Bán chạy nhất</p>
+                <p className="title font-bold">Bán chạy nhất</p>
                <div className="list-product-bestsale" id={`product-category-${item.id}`}></div>
              </div>
            </div>
--- a/src/components/layout/Header/HeaderMid.tsx
+++ b/src/components/layout/Header/HeaderMid.tsx
@@ -14,7 +14,7 @@ const HeaderMid: React.FC = () => {
  return (
    <div className="header-middle">
      <div className="container flex items-center justify-between">
-        <div className="header-middle-left d-flex align-items-center">
+        <div className="header-middle-left flex items-center">
          <Link href="/">
            <Image
              src="https://nguyencongpc.vn/media/lib/18-02-2025/logowhite-dfvefb.png"
@@ -62,43 +62,34 @@ const HeaderMid: React.FC = () => {
            </div>
          </div>

-          <div className="box-tabs-header d-flex align-items-center">
-            <Link
-              href="/buildpc"
-              className="item-tab-header d-flex flex-column align-items-center gap-4"
-            >
-              <p className="icon-item-tab d-flex align-items-center justify-content-center">
+          <div className="box-tabs-header flex items-center">
+            <Link href="/buildpc" className="item-tab-header flex-column flex items-center gap-4">
+              <p className="icon-item-tab flex items-center justify-center">
                <i className="sprite sprite-buildpc-header"></i>
              </p>
-              <span className="font-weight-500">Xây dựng cấu hình</span>
+              <span className="font-500">Xây dựng cấu hình</span>
            </Link>

            <Link
              href="javascript:void(0)"
-              className="item-tab-header d-flex flex-column align-items-center gap-4"
+              className="item-tab-header flex-column flex items-center gap-4"
            >
-              <p className="icon-item-tab d-flex align-items-center justify-content-center">
+              <p className="icon-item-tab flex items-center justify-center">
                <i className="sprite sprite-lienhe-header"></i>
              </p>
-              <span className="font-weight-500">Khách hàng liên hệ</span>
+              <span className="font-500">Khách hàng liên hệ</span>
            </Link>

-            <Link
-              href="/tin-tuc"
-              className="item-tab-header d-flex flex-column align-items-center gap-4"
-            >
-              <p className="icon-item-tab d-flex align-items-center justify-content-center">
+            <Link href="/tin-tuc" className="item-tab-header flex-column flex items-center gap-4">
+              <p className="icon-item-tab flex items-center justify-center">
                <i className="sprite sprite-article-header"></i>
              </p>
              <span className="font-weight-500">Tin tức công nghệ</span>
            </Link>

            <div id="js-header-cart" className="position-relative">
-              <Link
-                href="/cart"
-                className="item-tab-header d-flex flex-column align-items-center gap-4"
-              >
-                <p className="icon-item-tab icon-cart-header d-flex align-items-center justify-content-center">
+              <Link href="/cart" className="item-tab-header flex-column flex items-center gap-4">
+                <p className="icon-item-tab icon-cart-header flex items-center justify-center">
                  <i className="sprite sprite-cart-header"></i>
                  <u className="cart-count header-features-cart-amount">1</u>
                </p>
@@ -107,14 +98,14 @@ const HeaderMid: React.FC = () => {
              <div className="cau-noi"></div>
              <div className="cart-ttip" id="js-cart-tooltip">
                <div className="cart-ttip-item-container"></div>
-                <div className="cart-ttip-price d-flex align-items-center justify-content-end gap-6">
+                <div className="cart-ttip-price justify-content-end flex items-center gap-6">
                  <p>Tổng tiền hàng</p>
                  <p id="js-header-cart-quantity" className="font-weight-500"></p>
                  <p id="js-header-cart-total-price" className="font-weight-700"></p>
                </div>
                <Link
                  href="/cart"
-                  className="cart-ttip-price-button d-flex align-items-center justify-content-center"
+                  className="cart-ttip-price-button flex items-center justify-center"
                >
                  <p className="font-weight-700">THANH TOÁN NGAY </p>
                </Link>
@@ -123,9 +114,9 @@ const HeaderMid: React.FC = () => {

            <Link
              href="/taikhoan"
-              className="user-header item-tab-header d-flex flex-column align-items-center gap-4"
+              className="user-header item-tab-header flex-column flex items-center gap-4"
            >
-              <p className="icon-item-tab d-flex align-items-center justify-content-center">
+              <p className="icon-item-tab flex items-center justify-center">
                <i className="sprite sprite-account-header"></i>
              </p>
              <span className="font-weight-500">Tài khoản</span>
--- a/src/components/layout/homepage/BoxProductDeal.tsx
+++ b/src/components/layout/homepage/BoxProductDeal.tsx
@@ -1,6 +1,24 @@
 'use client';
 import React from 'react';

-const BoxProductDeal: React.FC = () => {};
+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;
--- a/src/components/layout/homepage/SliderHome.tsx
+++ b/src/components/layout/homepage/SliderHome.tsx
@@ -12,8 +12,8 @@ const SliderHome: React.FC = () => {

  return (
    <>
+      <div className="box-banner-homepage relative">
        <Swiper
-        className="box-banner-homepage relative"
          modules={[Autoplay, Navigation, Pagination]}
          spaceBetween={12}
          slidesPerView={1}
@@ -34,12 +34,14 @@ const SliderHome: React.FC = () => {
            </SwiperSlide>
          ))}
        </Swiper>
+      </div>
+      <div className="box-banner-under-slider">
        <Swiper
-        className="box-banner-under-slider"
          modules={[Autoplay, Navigation, Pagination]}
          spaceBetween={12}
          slidesPerView={2}
          loop={true}
+          navigation={true}
        >
          {dataSlider?.banner_under_slider_trangchu?.map((banner, index) => (
            <SwiperSlide key={index} className="item">
@@ -55,6 +57,7 @@ const SliderHome: React.FC = () => {
            </SwiperSlide>
          ))}
        </Swiper>
+      </div>
    </>
  );
 };
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -1,8 +1,5 @@
@import 'tailwindcss';
@plugin 'daisyui';
-@import 'swiper/css';
-@import 'swiper/css/navigation';
-@import 'swiper/css/pagination';

 :root {
  --background: #ffffff;
@@ -29,17 +26,10 @@
 .color-green {
  color: var(--green);
 }
-.bg-white {
-  background: #fff;
-}
-.bg-gray {
-  background: #f4f4f4;
-}
+
 *,
 ::after,
 ::before {
-  margin: 0;
-  padding: 0;
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
 }
@@ -90,117 +80,14 @@ ol,
 ul {
  list-style: none;
 }
-.position-relative {
-  position: relative;
-}
-table {
-  border-collapse: collapse;
-  width: 100%;
-}
-.w-100 {
-  width: 100% !important;
-}
-.w-50 {
-  width: 50%;
-}
 .fz-16 {
  font-size: 16px;
 }
-.mb-10 {
-  margin-bottom: 10px;
-}
-.mt-10 {
-  margin-top: 10px;
-}
-.mt-12 {
-  margin-top: 12px;
-}
-.mb-0 {
-  margin-bottom: 0 !important;
-}
-.gap-4 {
-  gap: 4px;
-}
-.gap-6 {
-  gap: 6px;
-}
-.gap-8 {
-  gap: 8px;
-}
-.gap-10 {
-  gap: 10px;
-}
-.gap-16 {
-  gap: 16px;
-}
-.gap-12 {
-  gap: 12px;
-}
-.gap-14 {
-  gap: 14px;
-}
-.gap-20 {
-  gap: 20px;
-}
-.pt-12 {
-  padding-top: 12px !important;
-}
-.text-center {
-  text-align: center;
-}
 img {
  display: block;
  max-width: 100%;
  height: auto;
 }
-input::-webkit-input-placeholder,
-textarea::-webkit-input-placeholder {
-  font-family: 'SF Pro Display', sans-serif;
-}
-input::-moz-placeholder,
-textarea::-moz-placeholder {
-  font-family: 'SF Pro Display', sans-serif;
-}
-input:-ms-input-placeholder,
-textarea:-ms-input-placeholder {
-  font-family: 'SF Pro Display', sans-serif;
-}
-input::-ms-input-placeholder,
-textarea::-ms-input-placeholder {
-  font-family: 'SF Pro Display', sans-serif;
-}
-input::-webkit-input-placeholder,
-textarea::-webkit-input-placeholder {
-  font-family: 'SF Pro Display', sans-serif;
-}
-input::-moz-placeholder,
-textarea::-moz-placeholder {
-  font-family: 'SF Pro Display', sans-serif;
-}
-input:-ms-input-placeholder,
-textarea:-ms-input-placeholder {
-  font-family: 'SF Pro Display', sans-serif;
-}
-input::-ms-input-placeholder,
-textarea::-ms-input-placeholder {
-  font-family: 'SF Pro Display', sans-serif;
-}
-input::-webkit-input-placeholder,
-textarea::-webkit-input-placeholder {
-  font-family: 'SF Pro Display', sans-serif;
-}
-input::-moz-placeholder,
-textarea::-moz-placeholder {
-  font-family: 'SF Pro Display', sans-serif;
-}
-input:-ms-input-placeholder,
-textarea:-ms-input-placeholder {
-  font-family: 'SF Pro Display', sans-serif;
-}
-input::-ms-input-placeholder,
-textarea::-ms-input-placeholder {
-  font-family: 'SF Pro Display', sans-serif;
-}
 input,
 input::placeholder,
 select,
@@ -300,21 +187,6 @@ textarea::placeholder {
 .border-error {
  border: 2px solid red !important;
 }
-.font-weight-400 {
-  font-weight: 400;
-}
-.font-weight-500 {
-  font-weight: 500;
-}
-.font-weight-600 {
-  font-weight: 600;
-}
-.font-weight-700 {
-  font-weight: 700;
-}
-.font-weight-800 {
-  font-weight: 800;
-}
 .boder-radius-10 {
  border-radius: 10px;
  -webkit-border-radius: 10px;
@@ -322,42 +194,6 @@ textarea::placeholder {
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
 }
-.line-clamp-1 {
-  -webkit-line-clamp: 1;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  display: -webkit-box;
-}
-.line-clamp-2 {
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  display: -webkit-box;
-}
-.line-clamp-3 {
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  display: -webkit-box;
-}
-.line-clamp-6 {
-  -webkit-line-clamp: 6;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  display: -webkit-box;
-}
-.d-block {
-  display: block !important;
-}
-.d-none,
-.hide {
-  display: none !important;
-}
-.grid {
-  display: -ms-grid;
-  display: grid;
-  gap: 12px;
-}
 .grid--product-info {
  -ms-grid-columns: 2fr 1fr;
  grid-template-columns: 2fr 1fr;
@@ -370,78 +206,6 @@ textarea::placeholder {
  -ms-grid-columns: 5.13fr 6.48fr;
  grid-template-columns: 7fr 5.76fr;
 }
-.d-flex {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-}
-.align-items-end {
-  -webkit-box-align: end;
-  -ms-flex-align: end;
-  align-items: flex-end;
-}
-.flex-1 {
-  -webkit-box-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-}
-.order-1 {
-  -webkit-box-ordinal-group: 2;
-  -ms-flex-order: 1;
-  order: 1;
-}
-.align-items-start {
-  -webkit-box-align: start;
-  -ms-flex-align: start;
-  align-items: flex-start;
-}
-.align-items-center {
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-.justify-content-end {
-  -ms-flex-pack: end !important;
-  -webkit-box-pack: end !important;
-  justify-content: flex-end !important;
-}
-.justify-content-center {
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-}
-.justify-content-between {
-  -webkit-box-pack: justify;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-}
-.justify-content-around {
-  -webkit-box-pack: justify;
-  -ms-flex-pack: justify;
-  justify-content: space-around;
-}
-.flex-around {
-  -ms-flex-pack: distribute;
-  justify-content: space-around;
-}
-.flex-column {
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-  -ms-flex-direction: column;
-  flex-direction: column;
-}
-.flex-row {
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-.flex-wrap {
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-  -ms-flex-wrap: row;
-  flex-wrap: wrap;
-}
 .swiper-button-next,
 .swiper-button-prev {
  width: 28px !important;
@@ -1873,9 +1637,9 @@ textarea::placeholder {
  color: #fff;
  border: 1px solid #fff;
  border-radius: 50%;
-  width: 33px;
-  height: 33px;
-  line-height: 33px;
+  width: 35px;
+  height: 30px;
+  line-height: 30px;
  text-align: center;
  margin: 0 10px 0 25px;
 }
@@ -1940,10 +1704,6 @@ textarea::placeholder {
  border-right: 1px solid #e3e3e3;
  padding: 12px 0;
 }
-.header .header-bottom .list-category-child .box-left .sub-menu {
-  margin-bottom: 16px;
-  width: calc(100% / 4 - 8px);
-}
 .header .header-bottom .list-category-child .box-left .list-child-lv3 .child-lv3:hover {
  color: var(--red);
 }
@@ -2407,6 +2167,10 @@ textarea::placeholder {
 .page-hompage .box-banner-under-slider {
  margin-top: -50px;
 }
+.page-hompage .box-banner-under-slider svg {
+  width: 8px !important;
+  color: #000;
+}
 .page-hompage .box-product-deal {
  padding: 12px;
  margin: 20px 0;