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

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>
)
}