169 lines
25 KiB
TypeScript
169 lines
25 KiB
TypeScript
|
'use client';
|
|||
|
|
import { Swiper, SwiperSlide } from 'swiper/react';
|
|||
|
|
import { Navigation, Pagination, Autoplay } from 'swiper/modules';
|
|||
|
|
|
|||
|
|
export default function ProductCategories() {
|
|||
|
|
return (
|
|||
|
|
<div className="home-product-container my-8">
|
|||
|
|
<div className="mb-16">
|
|||
|
|
<a href="">
|
|||
|
|
<img src="images/homepage/banner-cate.png" className="block w-full"/>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="bg-white rounded-[24px] my-8 p-6">
|
|||
|
|
<div className="flex items-center justify-between flex-wrap mb-5 gap-3">
|
|||
|
|
<div className="group-title flex items-center">
|
|||
|
|
<h2 className="font-600 text-[28px] leading-9 text-[#004BA4] m-0"> PC Render, Edit Video </h2>
|
|||
|
|
|
|||
|
|
<p className="m-0">
|
|||
|
|
<i className="icons icon-wallet"></i>
|
|||
|
|
<span> Trả góp 0% </span>
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
<p className="m-0">
|
|||
|
|
<i className="icons icon-truck"></i>
|
|||
|
|
<span> Miễn phí giao hàng </span>
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
<p className="m-0">
|
|||
|
|
<i className="icons icon-world"></i>
|
|||
|
|
<span> Giao hàng toàn quốc </span>
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
<p className="m-0">
|
|||
|
|
<i className="icons icon-medal"></i>
|
|||
|
|
<span> Bảo hành tận nơi </span>
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="flex flex-wrap items-center justify-end gap-2 leading-[30px] text-[#0678DB] font-600 text-16">
|
|||
|
|
<a href="" className="px-2 rounded-[30px] bg-[#EAF1FF]"> Danh mục cấp 3 </a>
|
|||
|
|
<a href="" className="px-2 rounded-[30px] bg-[#EAF1FF]"> HHPC 3D Lumion </a>
|
|||
|
|
<a href=""> Xem tất cả <i className="bx bx-chevron-right text-20 align-middle"></i> </a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="relative z-[1] bg-white relative min-h-[300px] js-product-holder group">
|
|||
|
|
<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="p-item">
|
|||
|
|
<a href="" className="p-img">
|
|||
|
|
<img src="images/product-1.jpg" alt="" width="250" height="250"/>
|
|||
|
|
</a>
|
|||
|
|
|
|||
|
|
<div className="p-text">
|
|||
|
|
<div className="p-price-group">
|
|||
|
|
<del>52.000.000 đ</del>
|
|||
|
|
<span className="p-discount">-10%</span>
|
|||
|
|
<p className="p-price"> 22.000.000 đ </p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<a href="" className="p-name">
|
|||
|
|
<h3> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Suscipit quos obcaecati totam, atque vel </h3>
|
|||
|
|
</a>
|
|||
|
|
|
|||
|
|
<div className="p-btn-group flex items-center justify-between text-16 font-500 leading-[23px]">
|
|||
|
|
<div>
|
|||
|
|
<p className="m-0 text-[#00AD4F] flex items-center gap-1">
|
|||
|
|
<i className="bx bx-check-circle text-18 w-[18px]"></i>
|
|||
|
|
<span> Sẵn hàng </span>
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
{/* <p className="m-0 red flex items-center gap-1">
|
|||
|
|
<i className="bx bxs-phone text-18 w-[18px]"></i>
|
|||
|
|
<span> Liên hệ </span>
|
|||
|
|
</p> */}
|
|||
|
|
|
|||
|
|
<p className="m-0 text-[#E16B10] flex items-center gap-1">
|
|||
|
|
<i className="bx bx-gift text-18 w-[18px]"></i>
|
|||
|
|
<span> Quà tặng </span>
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<button type="button" className="p-btn bx bx-plus bg-btn text-white rounded-full w-9 h-9 text-20" aria-label="Mua"></button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="p-tooltip hidden">
|
|||
|
|
<div className="bg-white rounded-[20px] overflow-hidden border-2 border-[#EAECF0] shadow-[0px_6px_8px_-2px_#10182814]">
|
|||
|
|
<p className="tooltip-name px-5 py-4 text-white font-600 text-16 leading-[21px] bg-[linear-gradient(180.3deg,#259AFF_-18.56%,_#114CDD_100.92%)] m-0">
|
|||
|
|
[Tặng bàn phím] HHPC ULTRA 7 265K | 32GB DDR5 | NVIDIA RTX 3060 12GB
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
<div className="p-4 tooltip-content">
|
|||
|
|
<div className="last:border-0 last:p-0 last:m-0 text-16 border-b border-[#DEE4EC] mb-4 pb-4">
|
|||
|
|
<p className="m-0 flex items-center flex-wrap gap-1">
|
|||
|
|
<b className="font-600"> Giá bán: </b>
|
|||
|
|
<b className="font-600 text-[#FF4E2A] text-18"> 48.990.000 đ </b>
|
|||
|
|
<del className="text-[#A0A5AC] font-300"> 52.000.000 đ </del>
|
|||
|
|
<span className="bg-[#FA354A] text-white text-11 px-[6px] leading-[18px] rounded-[20px]"> -6% </span>
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
<p className="m-0">
|
|||
|
|
<b className="font-600"> Bảo hành: </b>
|
|||
|
|
<span> Theo từng linh kiện </span>
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="last:mb-0 mb-6 px-1">
|
|||
|
|
<p className="text-16 font-600 flex items-center leading-6 mb-2">
|
|||
|
|
<i className="icons icon-screen"></i>
|
|||
|
|
<span> Thông số sản phẩm </span>
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
<div className="tooltip-spec">
|
|||
|
|
<div className="item"> CPU: INTEL CORE i5 13400F up 4.6GHz | 10 CORE | 16 THREAD </div>
|
|||
|
|
<div className="item"> RAM: DDR4 16GB (1x16G) 3200 MHz </div>
|
|||
|
|
<div className="item"> VGA: NVIDIA RTX 3060 12GB GDDR6 </div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="rounded-[12px] bg-[linear-gradient(182.15deg,#FFA480_-18.44%,#EB0C23_60.76%)] p-1 pt-2">
|
|||
|
|
<p className="px-2 text-16 font-600 flex items-center leading-5 mb-2 text-white">
|
|||
|
|
<i className="icons icon-gift"></i>
|
|||
|
|
<span> Khuyến mại hấp dẫn </span>
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
<div className="tooltip-offer rounded-[8px] bg-[#FEF2F2] px-2 py-4">
|
|||
|
|
<div className="item"> <p><span style={{ color: '#ff0000', fontSize: '12pt' }}><strong>⭐ Bảo Hành Tại Nơi Sử Dụng (Áp Dụng Nội Thành Hà Nội và Hồ Chí Minh)</strong></span></p> </div>
|
|||
|
|
<div className="item"><p><span style={{ color: '#ff0000', fontSize: '12pt' }}><strong>⭐ Bảo Hành Siêu Tốc 1 Đổi 1 Trong 24h </strong></span></p></div> <div className="item"><p><span style={{ color: '#ff0000', fontSize: '12pt' }}><strong>⭐ Miễn Phí 100% Vận Chuyển Toàn Quốc </strong></span></p></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</SwiperSlide>
|
|||
|
|
|
|||
|
|
<SwiperSlide> <div className="p-item"><a href="" className="p-img"><img src="images/product-2.jpg" alt="" width="250" height="250" /></a><div className="p-text"><div className="p-price-group"><p className="p-price">22.000.000 đ</p></div><a href="" className="p-name"><h3>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Suscipit quos obcaecati totam, atque vel</h3></a><div className="p-btn-group flex items-center justify-between text-16 font-500 leading-[23px]"><div><p className="m-0 red flex items-center gap-1"><i className="bx bxs-phone text-18 w-[18px]"></i><span>Liên hệ</span></p></div><button type="button" className="p-btn bx bx-plus bg-btn text-white rounded-full w-9 h-9 text-20" aria-label="Mua"></button></div></div><div className="p-tooltip hidden"><div className="bg-white rounded-[20px] overflow-hidden border-2 border-[#EAECF0] shadow-[0px_6px_8px_-2px_#10182814]"><p className="tooltip-name px-5 py-4 text-white font-600 text-16 leading-[21px] bg-[linear-gradient(180.3deg,#259AFF_-18.56%,_#114CDD_100.92%)] m-0">[Tặng bàn phím] HHPC ULTRA 7 265K | 32GB DDR5 | NVIDIA RTX 3060 12GB</p><div className="p-4 tooltip-content"><div className="last:border-0 last:p-0 last:m-0 text-16 border-b border-[#DEE4EC] mb-4 pb-4"><p className="m-0 flex items-center flex-wrap gap-1"><b className="font-600">Giá bán:</b><b className="font-600 text-[#FF4E2A] text-18">48.990.000 đ</b><del className="text-[#A0A5AC] font-300">52.000.000 đ</del><span className="bg-[#FA354A] text-white text-11 px-[6px] leading-[18px] rounded-[20px]">-6%</span></p><p className="m-0"><b className="font-600">Bảo hành:</b><span>Theo từng linh kiện</span></p></div><div className="last:mb-0 mb-6 px-1"><p className="text-16 font-600 flex items-center leading-6 mb-2"><i className="icons icon-screen"></i><span>Thông số sản phẩm</span></p><div className="tooltip-spec"><div className="item">CPU: INTEL CORE i5 13400F up 4.6GHz | 10 CORE | 16 THREAD</div><div className="item">RAM: DDR4 16GB (1x16G) 3200 MHz</div><div className="item">VGA: NVIDIA RTX 3060 12GB GDDR6</div></div></div></div></div></div></div></SwiperSlide> <SwiperSlide><div className="p-item"><a href="" className="p-img"><img src="images/product-3.jpg" alt="" width="250" height="250" /></a><div className="p-text"><div className="p-price-group"><del>52.000.000 đ</del><span className="p-discount">-10%</span><p className="p-price">22.000.000 đ</p></div><a href="" className="p-name"><h3>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Suscipit quos obcaecati totam, atque vel</h3></a><div className="p-btn-group flex items-center justify-between text-16 font-500 leading-[23px]"><div><p className="m-0 red flex items-center gap-1"><i className="bx bxs-phone text-18 w-[18px]"></i><span>Liên hệ</span></p><p className="m-0 text-[#E16B10] flex items-center gap-1"><i className="bx bx-gift text-18 w-[18px]"></i><span>Quà tặng</span></p></div><button type="button" className="p-btn bx bx-plus bg-btn text-white rounded-full w-9 h-9 text-20" aria-label="Mua"></button></div></div><div className="p-tooltip hidden"><div className="bg-white rounded-[20px] overflow-hidden border-2 border-[#EAECF0] shadow-[0px_6px_8px_-2px_#10182814]"><p className="tooltip-name px-5 py-4 text-white font-600 text-16 leading-[21px] bg-[linear-gradient(180.3deg,#259AFF_-18.56%,_#114CDD_100.92%)] m-0">[Tặng bàn phím] HHPC ULTRA 7 265K | 32GB DDR5 | NVIDIA RTX 3060 12GB</p><div className="p-4 tooltip-content"><div className="last:border-0 last:p-0 last:m-0 text-16 border-b border-[#DEE4EC] mb-4 pb-4"><p className="m-0 flex items-center flex-wrap gap-1"><b className="font-600">Giá bán:</b><b className="font-600 text-[#FF4E2A] text-18">48.990.000 đ</b><del className="text-[#A0A5AC] font-300">52.000.000 đ</del><span className="bg-[#FA354A] text-white text-11 px-[6px] leading-[18px] rounded-[20px]">-6%</span></p><p className="m-0"><b className="font-600">Bảo hành:</b><span>Theo từng linh kiện</span></p></div><div className="last:mb-0 mb-6 px-1"><p className="text-16
|
|||
|
|
</Swiper>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|