88 lines
8.4 KiB
TypeScript
88 lines
8.4 KiB
TypeScript
|
'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ả
|
||
|
|
</Swiper>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|