ducdt/hoanghapc_nextJs
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

upload 29/12

Browse Source
This commit is contained in:
Dao Duc
2025-12-29 17:43:31 +07:00
parent 1be2e55959
commit 19b55a3d93
138 changed files with 18742 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/components/home/Article/index.tsx Normal file
View File

@@ -0,0 +1,52 @@
export default function Article() {
return(
<div className="home-article-container bg-white rounded-[24px] p-6 my-8">
<div className="mb-8 promotion-news-group">
<div className="flex items-center justify-between flex-wrap mb-4 leading-9 gap-4 text-16 font-600">
<h2 className="text-[28px] m-0 text-[#004BA4] leading-9"> Chuyên trang Khuyến mãi </h2>
<a href="/tin-khuyen-mai" className="text-[#0678DB]"> Xem tất cả <i className="bx bx-chevron-right align-middle ml-[-2px] mt-[-1px] text-18"></i> </a>
</div>
<div className="grid grid-cols-4 gap-6">
<div className="art-item">
<a href="" className="art-img">
<img src="https://hoanghapccdn.com/media/news/14_100__c___u_h__nh_m__y_t__nh_______h___a_theo_ng__n_s__ch.jpg" alt="" width="1" height="1" />
</a>
<div className="art-text">
<a href="" className="art-title">
<h3> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum quidem asperiores provident dicta veniam deleniti eaque repudiandae cum esse, ducimus officiis quibusdam pariatur neque voluptates voluptas. Quisquam qui minus dolorum? </h3>
</a>
<div className="art-summary">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit, obcaecati ducimus veritatis aliquid sunt accusamus unde nisi nostrum fugit facere illo quos. Ad error suscipit, quidem optio aut laudantium at!
</div>
<div className="art-time">
<i className='bx bx-calendar-alt text-16 text-[#A0A5AC]'></i>
<time> 23/4/2024 </time>
<i className="w-[1.5px] h-[12px] bg-[#A0A5AC]"></i>
<span> Mai Văn Học </span>
</div>
</div>
</div>
<div className="art-item"><a href="" className="art-img"><img src="https://hoanghapccdn.com/media/news/14_100__c___u_h__nh_m__y_t__nh_______h___a_theo_ng__n_s__ch.jpg" alt="" width="1" height="1"/></a><div className="art-text"><a href="" className="art-title"><h3>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum quidem asperiores provident dicta veniam deleniti eaque repudiandae cum esse, ducimus officiis quibusdam pariatur neque voluptates voluptas. Quisquam qui minus dolorum?</h3></a><div className="art-summary">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit, obcaecati ducimus veritatis aliquid sunt accusamus unde nisi nostrum fugit facere illo quos. Ad error suscipit, quidem optio aut laudantium at!</div><div className="art-time"><i className="bx bx-calendar-alt"></i><time>23/4/2024</time><i className="w-[1.5px] h-[12px] bg-[#A0A5AC] mx-1"></i><span>Mai Văn Học</span></div></div></div><div className="art-item"><a href="" className="art-img"><img src="https://hoanghapccdn.com/media/news/14_100__c___u_h__nh_m__y_t__nh_______h___a_theo_ng__n_s__ch.jpg" alt="" width="1" height="1"/></a><div className="art-text"><a href="" className="art-title"><h3>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum quidem asperiores provident dicta veniam deleniti eaque repudiandae cum esse, ducimus officiis quibusdam pariatur neque voluptates voluptas. Quisquam qui minus dolorum?</h3></a><div className="art-summary">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit, obcaecati ducimus veritatis aliquid sunt accusamus unde nisi nostrum fugit facere illo quos. Ad error suscipit, quidem optio aut laudantium at!</div><div className="art-time"><i className="bx bx-calendar-alt text-16 text-[#A0A5AC]"></i><time>23/4/2024</time><i className="w-[1.5px] h-[12px] bg-[#A0A5AC]"></i><span>Mai Văn Học</span></div></div></div><div className="art-item"><a href="" className="art-img"><img src="https://hoanghapccdn.com/media/news/14_100__c___u_h__nh_m__y_t__nh_______h___a_theo_ng__n_s__ch.jpg" alt="" width="1" height="1"/></a><div className="art-text"><a href="" className="art-title"><h3>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum quidem asperiores provident dicta veniam deleniti eaque repudiandae cum esse, ducimus officiis quibusdam pariatur neque voluptates voluptas. Quisquam qui minus dolorum?</h3></a><div className="art-summary">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit, obcaecati ducimus veritatis aliquid sunt accusamus unde nisi nostrum fugit facere illo quos. Ad error suscipit, quidem optio aut laudantium at!</div><div className="art-time"><i className="bx bx-calendar-alt text-16 text-[#A0A5AC]"></i><time>23/4/2024</time><i className="w-[1.5px] h-[12px] bg-[#A0A5AC]"></i><span>Mai Văn Học</span></div></div></div><div className="art-item"><a href="" className="art-img"><img src="https://hoanghapccdn.com/media/news/14_100__c___u_h__nh_m__y_t__nh_______h___a_theo_ng__n_s__ch.jpg" alt="" width="1" height="1"/></a><div className="art-text"><a href="" className="art-title"><h3>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum quidem asperiores provident dicta veniam deleniti eaque repudiandae cum esse, ducimus officiis quibusdam pariatur neque voluptates voluptas. Quisquam qui minus dolorum?</h3></a><div className="art-summary">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit, obcaecati ducimus veritatis aliquid sunt accusamus unde nisi nostrum fugit facere illo quos. Ad error suscipit, quidem optio aut laudantium at!</div><div className="art-time"><i className="bx bx-calendar-alt text-16 text-[#A0A5AC]"></i><time>23/4/2024</time><i className="w-[1.5px] h-[12px] bg-[#A0A5AC]"></i><span>Mai Văn Học</span></div></div></div>
</div>
</div>
<div>
<div className="flex items-center justify-between flex-wrap mb-4 leading-9 gap-4 text-16 font-600">
<h2 className="text-[28px] m-0 text-[#004BA4] leading-9"> Tin tức Công nghệ </h2>
<a href="/tin-cong-nghe" className="text-[#0678DB]"> Xem tất cả <i className="bx bx-chevron-right align-middle ml-[-2px] mt-[-1px] text-18"></i> </a>
</div>
<div className="grid grid-cols-4 gap-6">
<div className="art-item"><a href="" className="art-img"><img src="https://hoanghapccdn.com/media/news/14_100__c___u_h__nh_m__y_t__nh_______h___a_theo_ng__n_s__ch.jpg" alt="" width="1" height="1"/></a><div className="art-text"><a href="" className="art-title"><h3>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum quidem asperiores provident dicta veniam deleniti eaque repudiandae cum esse, ducimus officiis quibusdam pariatur neque voluptates voluptas. Quisquam qui minus dolorum?</h3></a><div className="art-summary">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit, obcaecati ducimus veritatis aliquid sunt accusamus unde nisi nostrum fugit facere illo quos. Ad error suscipit, quidem optio aut laudantium at!</div><div className="art-time"><i className="bx bx-calendar-alt"></i><time>23/4/2024</time><i className="w-[1.5px] h-[12px] bg-[#A0A5AC] mx-1"></i><span>Mai Văn Học</span></div></div></div><div className="art-item"><a href="" className="art-img"><img src="https://hoanghapccdn.com/media/news/14_100__c___u_h__nh_m__y_t__nh_______h___a_theo_ng__n_s__ch.jpg" alt="" width="1" height="1"/></a><div className="art-text"><a href="" className="art-title"><h3>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum quidem asperiores provident dicta veniam deleniti eaque repudiandae cum esse, ducimus officiis quibusdam pariatur neque voluptates voluptas. Quisquam qui minus dolorum?</h3></a><div className="art-summary">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit, obcaecati ducimus veritatis aliquid sunt accusamus unde nisi nostrum fugit facere illo quos. Ad error suscipit, quidem optio aut laudantium at!</div><div className="art-time"><i className="bx bx-calendar-alt text-16 text-[#A0A5AC]"></i><time>23/4/2024</time><i className="w-[1.5px] h-[12px] bg-[#A0A5AC]"></i><span>Mai Văn Học</span></div></div></div><div className="art-item"><a href="" className="art-img"><img src="https://hoanghapccdn.com/media/news/14_100__c___u_h__nh_m__y_t__nh_______h___a_theo_ng__n_s__ch.jpg" alt="" width="1" height="1"/></a><div className="art-text"><a href="" className="art-title"><h3>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum quidem asperiores provident dicta veniam deleniti eaque repudiandae cum esse, ducimus officiis quibusdam pariatur neque voluptates voluptas. Quisquam qui minus dolorum?</h3></a><div className="art-summary">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit, obcaecati ducimus veritatis aliquid sunt accusamus unde nisi nostrum fugit facere illo quos. Ad error suscipit, quidem optio aut laudantium at!</div><div className="art-time"><i className="bx bx-calendar-alt text-16 text-[#A0A5AC]"></i><time>23/4/2024</time><i className="w-[1.5px] h-[12px] bg-[#A0A5AC]"></i><span>Mai Văn Học</span></div></div></div><div className="art-item"><a href="" className="art-img"><img src="https://hoanghapccdn.com/media/news/14_100__c___u_h__nh_m__y_t__nh_______h___a_theo_ng__n_s__ch.jpg" alt="" width="1" height="1"/></a><div className="art-text"><a href="" className="art-title"><h3>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum quidem asperiores provident dicta veniam deleniti eaque repudiandae cum esse, ducimus officiis quibusdam pariatur neque voluptates voluptas. Quisquam qui minus dolorum?</h3></a><div className="art-summary">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit, obcaecati ducimus veritatis aliquid sunt accusamus unde nisi nostrum fugit facere illo quos. Ad error suscipit, quidem optio aut laudantium at!</div><div className="art-time"><i className="bx bx-calendar-alt text-16 text-[#A0A5AC]"></i><time>23/4/2024</time><i className="w-[1.5px] h-[12px] bg-[#A0A5AC]"></i><span>Mai Văn Học</span></div></div></div><div className="art-item"><a href="" className="art-img"><img src="https://hoanghapccdn.com/media/news/14_100__c___u_h__nh_m__y_t__nh_______h___a_theo_ng__n_s__ch.jpg" alt="" width="1" height="1"/></a><div className="art-text"><a href="" className="art-title"><h3>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum quidem asperiores provident dicta veniam deleniti eaque repudiandae cum esse, ducimus officiis quibusdam pariatur neque voluptates voluptas. Quisquam qui minus dolorum?</h3></a><div className="art-summary">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit, obcaecati ducimus veritatis aliquid sunt accusamus unde nisi nostrum fugit facere illo quos. Ad error suscipit, quidem optio aut laudantium at!</div><div className="art-time"><i className="bx bx-calendar-alt text-16 text-[#A0A5AC]"></i><time>23/4/2024</time><i className="w-[1.5px] h-[12px] bg-[#A0A5AC]"></i><span>Mai Văn Học</span></div></div></div>
</div>
</div>
</div>
)
}

16
src/components/home/Category/index.tsx Normal file
View File

@@ -0,0 +1,16 @@
export default function FeaturedProductCategories() {
return (
<div className="home-categories-container bg-white rounded-[24px] my-10 p-6 pb-8">
<h2 className="group-title font-600 text-[28px] text-[#004BA4] mb-5 leading-9"> Danh mục nổi bật </h2>
<div className="grid grid-cols-10 gap-6">
<a href="" className="item">
<i className="image lazy" style={{ backgroundImage: 'url(images/global/cat-3.png)' }}></i>
<span className="block"> PC Thiết Kế Đồ Họa </span>
</a>
<a href="" className="item"><i className="image lazy" style={{ backgroundImage: 'url(images/global/cat-1.png)' }}></i><span className="block">PC Thiết</span></a><a href="" className="item"><i className="image lazy" style={{ backgroundImage: 'url(images/global/cat-2.png)' }}></i><span className="block">PC Thiết Kế Đồ Họa</span></a><a href="" className="item"><i className="image lazy" style={{ backgroundImage: 'url(images/global/cat-4.png)' }}></i><span className="block">PC Thiết Kế Đồ Họa</span></a><a href="" className="item"><i className="image lazy" style={{ backgroundImage: 'url(images/global/cat-5.png)' }}></i><span className="block">PC Thiết Kế Đồ Họa</span></a><a href="" className="item"><i className="image lazy" style={{ backgroundImage: 'url(images/global/cat-7.png)' }}></i><span className="block">PC Thiết Kế Đồ Họa</span></a><a href="" className="item"><i className="image lazy" style={{ backgroundImage: 'url(images/global/cat-8.png)' }}></i><span className="block">PC Thiết Kế Đồ Họa</span></a><a href="" className="item"><i className="image lazy" style={{ backgroundImage: 'url(images/global/cat-9.png)' }}></i><span className="block">PC Thiết Kế Đồ Họa</span></a><a href="" className="item"><i className="image lazy" style={{ backgroundImage: 'url(images/global/cat-11.png)' }}></i><span className="block">PC Thiết Kế Đồ Họa</span></a><a href="" className="item"><i className="image lazy" style={{ backgroundImage: 'url(images/global/cat-12.png)' }}></i><span className="block">PC Thiết Kế Đồ Họa</span></a><a href="" className="item"><i className="image lazy" style={{ backgroundImage: 'url(images/global/cat-13.png)' }}></i><span className="block">PC Thiết Kế Đồ Họa</span></a>
</div>
</div>
)
}

88
src/components/home/Deal/index.tsx Normal file
View File

@@ -0,0 +1,88 @@
'use client';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Navigation, Pagination, Autoplay } from 'swiper/modules';
export default function Deal() {
return (
<div className="home-deal-container my-[3rem]">
<div className="deal-container p-4 pt-6 rounded-[12px]" style={{ backgroundImage: 'url(images/bg-deal-home.png)' }}>
<div className="group-title flex items-center justify-between mb-6 text-white relative z-[1]">
<div className="flex items-center flex items-center">
<div className="flex items-center">
<i className="icon-bolt lazy mr-2" style={{ backgroundImage: 'url(images/icon-bolt.png)' }}></i>
<p className="m-0 mr-5 font-600 text-[32px]"> Cấu hình Flash Sale </p>
</div>
<div className="deal-time-holder">
<p> 00 </p> <p> 00 </p> <p> 00 </p> <p> 00 </p>
</div>
</div>
<a href="/deal" className="text-16 font-600"> Xem tất cả <i className="bx bx-chevron-right align-middle ml-[-2px] mt-[-1px]"></i> </a>
</div>
<div className="group relative z-[1] bg-white rounded-[12px] relative min-h-[450px] px-4 pt-6 pb-8">
<div className="custom-nav hidden">
<div className="button-icon swiper-button-prev"></div>
<div className="button-icon swiper-button-next"></div>
</div>
<Swiper
modules={[Navigation, Pagination, Autoplay]}
spaceBetween={24}
slidesPerView={5}
loop={true}
autoplay={{
delay: 3000,
disableOnInteraction: false,
}}
navigation={{
prevEl: '.custom-nav .swiper-button-prev',
nextEl: '.custom-nav .swiper-button-next',
}}
breakpoints={{
1600: {
slidesPerView: 6,
},
}}
>
<SwiperSlide>
<div className="deal-item">
<a href="" className="deal-img">
<img src="images/product-1.jpg" alt="" width="1" height="1" className="fit-img"/>
</a>
<div className="deal-text">
<a href="" className="deal-name"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum eveniet reprehenderit, in maiores quaerat soluta mollitia </a>
<div className="deal-price-holder">
<div>
<p className="deal-price"> 48.990.000 đ </p>
<del> 52.000.000 đ </del>
<span className="deal-discount"> -6% </span>
</div>
<button type="button" className="deal-btn bx bx-plus" aria-label="Mua"></button>
</div>
<div className="deal-count">
<i className="deal-line" style={{ width: '30%' }}></i>
<span> Còn: 3/5 sản phẩm </span>
</div>
<div className="deal-offer">
<span className="text-[#BE1F2D]"> Quà tặng: </span>
Màn hình Coolest Maste và chuột không dây Logitech
</div>
</div>
</div>
</SwiperSlide>
<SwiperSlide><div className="deal-item"><a href="" className="deal-img"><img src="images/product-2.jpg" alt="" width="1" height="1" className="fit-img" /></a><div className="deal-text"><a href="" className="deal-name">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum eveniet reprehenderit, in maiores quaerat soluta mollitia</a><div className="deal-price-holder"><div><p className="deal-price">48.990.000 đ</p><del>52.000.000 đ</del><span className="deal-discount">-6%</span></div><button type="button" className="deal-btn bx bx-plus" aria-label="Mua"></button></div><div className="deal-count"><i className="deal-line" style={{ width: '0%' }}></i><span>Còn: 3/5 sản phẩm</span></div><div className="deal-offer"></div></div></div></SwiperSlide> <SwiperSlide><div className="deal-item"><a href="" className="deal-img"><img src="images/product-3.jpg" alt="" width="1" height="1" className="fit-img" /></a><div className="deal-text"><a href="" className="deal-name">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum eveniet reprehenderit, in maiores quaerat soluta mollitia</a><div className="deal-price-holder"><div><p className="deal-price">48.990.000 đ</p><del>52.000.000 đ</del><span className="deal-discount">-6%</span></div><button type="button" className="deal-btn bx bx-plus" aria-label="Mua"></button></div><div className="deal-count"><i className="deal-line" style={{ width: '70%' }}></i><span>Còn: 3/5 sản phẩm</span></div><div className="deal-offer"><span className="text-[#BE1F2D]">Quà tặng:</span>Màn hình Coolest Maste và chuột không dây Logitech</div></div></div></SwiperSlide> <SwiperSlide><div className="deal-item"><a href="" className="deal-img"><img src="images/product-4.jpg" alt="" width="1" height="1" className="fit-img" /></a><div className="deal-text"><a href="" className="deal-name">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum eveniet reprehenderit, in maiores quaerat soluta mollitia</a><div className="deal-price-holder"><div><p className="deal-price">48.990.000 đ</p><del>52.000.000 đ</del><span className="deal-discount">-6%</span></div><button type="button" className="deal-btn bx bx-plus" aria-label="Mua"></button></div><div className="deal-count"><i className="deal-line" style={{ width: '90%' }}></i><span>Còn: 3/5 sản phẩm</span></div><div className="deal-offer"><span className="text-[#BE1F2D]">Quà tặng:</span>Màn hình Coolest Maste và chuột không dây Logitech</div></div></div></SwiperSlide> <SwiperSlide><div className="deal-item"><a href="" className="deal-img"><img src="images/product-5.jpg" alt="" width="1" height="1" className="fit-img" /></a><div className="deal-text"><a href="" className="deal-name">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum eveniet reprehenderit, in maiores quaerat soluta mollitia</a><div className="deal-price-holder"><div><p className="deal-price">48.990.000 đ</p><del>52.000.000 đ</del><span className="deal-discount">-6%</span></div><button type="button" className="deal-btn bx bx-plus" aria-label="Mua"></button></div><div className="deal-count"><i className="deal-line" style={{ width: '90%' }}></i><span>Còn: 3/5 sản phẩm</span></div><div className="deal-offer"><span className="text-[#BE1F2D]">Quà tặng:</span>Màn hình Coolest Maste</div></div></div></SwiperSlide> <SwiperSlide><div className="deal-item"><a href="" className="deal-img"><img src="images/product-6.jpg" alt="" width="1" height="1" className="fit-img" /></a><div className="deal-text"><a href="" className="deal-name">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum eveniet reprehenderit, in maiores quaerat soluta mollitia</a><div className="deal-price-holder"><div><p className="deal-price">48.990.000 đ</p><del>52.000.000 đ</del><span className="deal-discount">-6%</span></div><button type="button" className="deal-btn bx bx-plus" aria-label="Mua"></button></div><div className="deal-count"><i className="deal-line" style={{ width: '90%' }}></i><span>Còn: 3/5 sản phẩm</span></div><div className="deal-offer"></div></div></div></SwiperSlide>
</Swiper>
</div>
</div>
</div>
)
}

169
src/components/home/Product/index.tsx Normal file
View File

File diff suppressed because one or more lines are too long

91
src/components/home/Slider/index.tsx Normal file
View File

@@ -0,0 +1,91 @@
'use client';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Navigation, Pagination, Autoplay } from 'swiper/modules';
export default function Slider() {
return(
<div className="home-banner-container mb-10 min-h-[845px]">
<div className="banner-slider gap-4 grid grid-cols-3 w-[932px] m-[auto_0_auto_auto]">
<div className="home-banner-left col-span-2 custom-dots relative group ">
<Swiper
spaceBetween={50}
slidesPerView={1}
loop={true}
autoplay={{ delay: 3000 }}
modules={[Navigation, Pagination, Autoplay]}
navigation={{
prevEl: ".custom-nav .swiper-button-prev",
nextEl: ".custom-nav .swiper-button-next",
}}
pagination={{ clickable: true }}
>
<SwiperSlide>
<a href="">
<img src="/images/homepage/home-slide.png" alt="" width={100} height={100} className="block w-full lazy"/>
</a>
</SwiperSlide>
<SwiperSlide>
<a href="">
<img src="https://placehold.co/792x543/EEE/31343C" alt="" width="" height="" className="block w-full lazy"/>
</a>
</SwiperSlide>
<SwiperSlide>
<a href="">
<img src="https://placehold.co/792x543/EEE/31343C" alt="" width="" height="" className="block w-full lazy"/>
</a>
</SwiperSlide>
<SwiperSlide>
<a href="">
<img src="https://placehold.co/792x543/EEE/31343C" alt="" width="" height="" className="block w-full lazy"/>
</a>
</SwiperSlide>
</Swiper>
<div className="custom-nav hidden">
<div
className="button-icon swiper-button-prev"
role="button"
aria-label="Previous slide"
/>
<div
className="button-icon swiper-button-next"
role="button"
aria-label="Next slide"
/>
</div>
</div>
<div className="home-banner-right col-span-1">
<a href="" className="last:mb-0 mb-4">
<img src="images/homepage/right-1.png" alt="" width="" height="" className="block w-full lazy"/>
</a>
<a href="" className="last:mb-0 mb-4">
<img src="images/homepage/right-2.png" alt="" width="" height="" className="block w-full lazy"/>
</a>
</div>
<div className="home-banner-right grid grid-cols-3 gap-4 col-span-3">
<a href="">
<img src="images/homepage/under-slide-1.png" alt="" width="" height="" className="block w-full lazy"/>
</a>
<a href=""> <img src="images/homepage/under-slide-2.png" alt="" width="" height="" className="block w-full lazy"/> </a> <a href=""> <img src="images/homepage/under-slide-3.png" alt="" width="" height="" className="block w-full lazy"/> </a>
</div>
</div>
<div className="grid grid-cols-4 gap-4 mt-4">
<a href="">
<img src="images/homepage/under-1.png" alt="" width="" height="" className="block w-full lazy"/>
</a>
<a href=""> <img src="images/homepage/under-2.png" alt="" width="" height="" className="block w-full lazy"/> </a>
<a href=""> <img src="images/homepage/under-3.png" alt="" width="" height="" className="block w-full lazy"/> </a>
<a href=""> <img src="images/homepage/under-4.png" alt="" width="" height="" className="block w-full lazy"/> </a>
</div>
</div>
)
}

23
src/components/home/index.tsx Normal file
View File

@@ -0,0 +1,23 @@
import Slider from "./Slider";
import Deal from "./Deal";
import FeaturedProductCategories from "./Category";
import ProductCategories from "./Product";
import Article from "./Article";
export default function Home() {
return(
<div className="home-page !-mt-5 pt-6">
<div className="container">
<Slider />
<Deal />
<FeaturedProductCategories />
<ProductCategories />
<Article />
</div>
</div>
)
}