upload 15/5
This commit is contained in:
@@ -14,6 +14,9 @@
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="./src/index.tsx"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
229
src/components/buildpc/CompareBuildpc.tsx
Normal file
229
src/components/buildpc/CompareBuildpc.tsx
Normal file
@@ -0,0 +1,229 @@
|
||||
export function CompareBuildpc() {
|
||||
return (
|
||||
<div className="list-component mt-5">
|
||||
<div className="item-compare mb-12">
|
||||
<div className="flex items-center border-b-[1px] border-neutral-200 pb-3">
|
||||
<b className="left w-[200px] name-component">
|
||||
<a href="" className="block m-[auto_auto_auto_0]">
|
||||
<img
|
||||
src="/assets/images/logo-hacom.png"
|
||||
width="100%"
|
||||
height="100%"
|
||||
className="w-[150px] block h-[50px] object-contain"
|
||||
alt=""
|
||||
/>
|
||||
</a>
|
||||
</b>
|
||||
<div className="right w-[calc(100%-200px)] grid grid-cols-8">
|
||||
<b className="item col-span-3">Sản phẩm</b>
|
||||
<b className="item">Giá gốc</b>
|
||||
<b className="item">Khuyến mãi</b>
|
||||
<b className="item">Giao hàng</b>
|
||||
<b className="item col-span-2">Thành tiền</b>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="list-product">
|
||||
<div className="item-info-product flex items-center py-2.5 border-b-[1px] border-neutral-200">
|
||||
<b className="name-component block w-[200px]">CPU Cooler</b>
|
||||
<div className="w-[calc(100%-200px)] grid items-center grid-cols-8">
|
||||
<div className="info col-span-3">
|
||||
<div className="flex items-center">
|
||||
<a
|
||||
href=""
|
||||
className="image w-[60px] h-[60px] block border border-neutral-200 p-1 mr-[10px]"
|
||||
>
|
||||
<img
|
||||
src="/assets/images/lienkien-ram.png"
|
||||
width="100%"
|
||||
height="100%"
|
||||
className="block w-full h-full object-contain"
|
||||
alt=""
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href=""
|
||||
className="name-product w-[calc(100%-100px)] hover:text-[var(--color-hover)]"
|
||||
>
|
||||
AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="old-price font-400">4.700.000 Vnđ</div>
|
||||
<div className="price-saleoff font-400">20%</div>
|
||||
<b className="ship underline">Liên hệ</b>
|
||||
<div className="col-span-2 flex items-center justify-between">
|
||||
<b className="total-amount">4.000.000đ</b>
|
||||
<a
|
||||
href=""
|
||||
className="px-5 py-2 bg-blue-600 rounded text-white font-bold mr-[10px] hover:bg-blue-800"
|
||||
>
|
||||
Mua ngay
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="item-info-product flex items-center py-2.5 border-b-[1px] border-neutral-200">
|
||||
<b className="name-component block w-[200px]">CPU Cooler</b>
|
||||
<div className="w-[calc(100%-200px)] grid items-center grid-cols-8">
|
||||
<div className="info col-span-3">
|
||||
<div className="flex items-center">
|
||||
<a
|
||||
href=""
|
||||
className="image w-[60px] h-[60px] block border border-neutral-200 p-1 mr-[10px]"
|
||||
>
|
||||
<img
|
||||
src="/assets/images/lienkien-ram.png"
|
||||
width="100%"
|
||||
height="100%"
|
||||
className="block w-full h-full object-contain"
|
||||
alt=""
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href=""
|
||||
className="name-product w-[calc(100%-100px)] hover:text-[var(--color-hover)]"
|
||||
>
|
||||
AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="old-price font-400">4.700.000 Vnđ</div>
|
||||
<div className="price-saleoff font-400">20%</div>
|
||||
<b className="ship underline text-[#33c600]">Liên hệ</b>
|
||||
<div className="col-span-2 flex items-center justify-between">
|
||||
<b className="total-amount">4.000.000đ</b>
|
||||
<a
|
||||
href=""
|
||||
className="px-5 py-2 bg-blue-600 rounded text-white font-bold mr-[10px] hover:bg-blue-800"
|
||||
>
|
||||
Mua ngay
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- end list --> */}
|
||||
|
||||
<div className="text-right flex items-center font-bold justify-end mt-5">
|
||||
<div className="mr-[10px]">
|
||||
Tổng tiền (<span>2</span> sản phẩm) :
|
||||
</div>
|
||||
<div className="font-bold">6.000.000 Vnđ</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="item-compare mb-12">
|
||||
<div className="flex items-center border-b-[1px] border-neutral-200 pb-3">
|
||||
<b className="left w-[200px] name-component">
|
||||
<a href="" className="block m-[auto_auto_auto_0]">
|
||||
<img
|
||||
src="/assets/images/logo-hacom.png"
|
||||
width="100%"
|
||||
height="100%"
|
||||
className="w-[150px] block h-[50px] object-contain"
|
||||
alt=""
|
||||
/>
|
||||
</a>
|
||||
</b>
|
||||
<div className="right w-[calc(100%-200px)] grid grid-cols-8">
|
||||
<b className="item col-span-3">Sản phẩm</b>
|
||||
<b className="item">Giá gốc</b>
|
||||
<b className="item">Khuyến mãi</b>
|
||||
<b className="item">Giao hàng</b>
|
||||
<b className="item col-span-2">Thành tiền</b>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="list-product">
|
||||
<div className="item-info-product flex items-center py-2.5 border-b-[1px] border-neutral-200">
|
||||
<b className="name-component block w-[200px]">CPU Cooler</b>
|
||||
<div className="w-[calc(100%-200px)] grid items-center grid-cols-8">
|
||||
<div className="info col-span-3">
|
||||
<div className="flex items-center">
|
||||
<a
|
||||
href=""
|
||||
className="image w-[60px] h-[60px] block border border-neutral-200 p-1 mr-[10px]"
|
||||
>
|
||||
<img
|
||||
src="/assets/images/lienkien-ram.png"
|
||||
width="100%"
|
||||
height="100%"
|
||||
className="block w-full h-full object-contain"
|
||||
alt=""
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href=""
|
||||
className="name-product w-[calc(100%-100px)] hover:text-[var(--color-hover)]"
|
||||
>
|
||||
AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="old-price font-400">4.700.000 Vnđ</div>
|
||||
<div className="price-saleoff font-400">20%</div>
|
||||
<b className="ship underline">Liên hệ</b>
|
||||
<div className="col-span-2 flex items-center justify-between">
|
||||
<b className="total-amount">4.000.000đ</b>
|
||||
<a
|
||||
href=""
|
||||
className="px-5 py-2 bg-blue-600 rounded text-white font-bold mr-[10px] hover:bg-blue-800"
|
||||
>
|
||||
Mua ngay
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="item-info-product flex items-center py-2.5 border-b-[1px] border-neutral-200">
|
||||
<b className="name-component block w-[200px]">CPU Cooler</b>
|
||||
<div className="w-[calc(100%-200px)] grid items-center grid-cols-8">
|
||||
<div className="info col-span-3">
|
||||
<div className="flex items-center">
|
||||
<a
|
||||
href=""
|
||||
className="image w-[60px] h-[60px] block border border-neutral-200 p-1 mr-[10px]"
|
||||
>
|
||||
<img
|
||||
src="/assets/images/lienkien-ram.png"
|
||||
width="100%"
|
||||
height="100%"
|
||||
className="block w-full h-full object-contain"
|
||||
alt=""
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href=""
|
||||
className="name-product w-[calc(100%-100px)] hover:text-[var(--color-hover)]"
|
||||
>
|
||||
AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="old-price font-400">4.700.000 Vnđ</div>
|
||||
<div className="price-saleoff font-400">20%</div>
|
||||
<b className="ship underline text-[#33c600]">Liên hệ</b>
|
||||
<div className="col-span-2 flex items-center justify-between">
|
||||
<b className="total-amount">4.000.000đ</b>
|
||||
<a
|
||||
href=""
|
||||
className="px-5 py-2 bg-blue-600 rounded text-white font-bold mr-[10px] hover:bg-blue-800"
|
||||
>
|
||||
Mua ngay
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- end list --> */}
|
||||
|
||||
<div className="text-right flex items-center font-bold justify-end mt-5">
|
||||
<div className="mr-[10px]">
|
||||
Tổng tiền (<span>2</span> sản phẩm) :
|
||||
</div>
|
||||
<div className="font-bold">6.000.000 Vnđ</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
270
src/components/buildpc/CreateBuildpc.tsx
Normal file
270
src/components/buildpc/CreateBuildpc.tsx
Normal file
@@ -0,0 +1,270 @@
|
||||
export function CreateBuildpc() {
|
||||
return (
|
||||
<>
|
||||
<div className="mt-6 flex items-center border-b-[1px] border-neutral-200 pb-3">
|
||||
<b className="left w-[200px] name-component">Sản phẩm</b>
|
||||
<div className="right w-[calc(100%-200px)] grid grid-cols-8">
|
||||
<b className="item col-span-3">Thông tin</b>
|
||||
<b className="item">Giá gốc</b>
|
||||
<b className="item">Khuyến mãi</b>
|
||||
<b className="item">Thành tiền</b>
|
||||
<b className="item col-span-2">Nhà cung cấp </b>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- header list buildpc --> */}
|
||||
<div className="list-buildpc">
|
||||
<div className="item-component flex items-start py-2.5 border-b-[1px] border-neutral-200">
|
||||
<b className="name-component block w-[200px]">CPU</b>
|
||||
<div className="right w-[calc(100%-200px)]">
|
||||
<div className="item-info-product grid items-center grid-cols-8">
|
||||
<div className="info col-span-3">
|
||||
<div className="flex items-center">
|
||||
<a
|
||||
href=""
|
||||
className="image w-[60px] h-[60px] block border border-neutral-200 p-1 mr-[10px]"
|
||||
>
|
||||
<img
|
||||
src="/assets/images/lienkien-ram.png"
|
||||
width="100%"
|
||||
height="100%"
|
||||
className="block w-full h-full object-contain"
|
||||
alt=""
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href=""
|
||||
className="name-product w-[calc(100%-100px)] hover:text-[var(--color-hover)]"
|
||||
>
|
||||
AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="old-price font-400">4.700.000 Vnđ</div>
|
||||
<div className="price-saleoff font-400">20%</div>
|
||||
<b className="total-amount">4.000.000đ</b>
|
||||
<div className="supplier col-span-2 flex items-center justify-between">
|
||||
<a href="">
|
||||
<img
|
||||
src="/assets/images/logo-hacom.png"
|
||||
width="100%"
|
||||
height="100%"
|
||||
className="w-full block h-[30px] object-contain"
|
||||
alt=""
|
||||
/>
|
||||
</a>
|
||||
<div className="btn flex items-center">
|
||||
<a
|
||||
href=""
|
||||
className="px-5 py-2 bg-blue-600 rounded text-white font-bold mr-[10px] hover:bg-blue-800"
|
||||
>
|
||||
Mua ngay
|
||||
</a>
|
||||
<a
|
||||
href=""
|
||||
className="group hover:bg-red-500 p-1.5 rounded-[50%]"
|
||||
>
|
||||
<i className="icon_2025 close group-hover:brightness-0 group-hover:invert-[1]"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="item-component flex items-start py-2.5 border-b-[1px] border-neutral-200">
|
||||
<b className="name-component block w-[200px]">CPU Cooler</b>
|
||||
<div className="right w-[calc(100%-200px)]">
|
||||
<div className="item-info-product grid items-center grid-cols-8">
|
||||
<div className="info col-span-3">
|
||||
<div className="flex items-center">
|
||||
<a
|
||||
href=""
|
||||
className="image w-[60px] h-[60px] block border border-neutral-200 p-1 mr-[10px]"
|
||||
>
|
||||
<img
|
||||
src="/assets/images/lienkien-ram.png"
|
||||
width="100%"
|
||||
height="100%"
|
||||
className="block w-full h-full object-contain"
|
||||
alt=""
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href=""
|
||||
className="name-product w-[calc(100%-100px)] hover:text-[var(--color-hover)]"
|
||||
>
|
||||
AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="old-price font-400">4.700.000 Vnđ</div>
|
||||
<div className="price-saleoff font-400">20%</div>
|
||||
<b className="total-amount">4.000.000đ</b>
|
||||
<div className="supplier col-span-2 flex items-center justify-between">
|
||||
<a href="">
|
||||
<img
|
||||
src="/assets/images/logo-hacom.png"
|
||||
width="100%"
|
||||
height="100%"
|
||||
className="w-full block h-[30px] object-contain"
|
||||
alt=""
|
||||
/>
|
||||
</a>
|
||||
<div className="btn flex items-center">
|
||||
<a
|
||||
href=""
|
||||
className="px-5 py-2 bg-blue-600 rounded text-white font-bold mr-[10px] hover:bg-blue-800"
|
||||
>
|
||||
Mua ngay
|
||||
</a>
|
||||
<a
|
||||
href=""
|
||||
className="group hover:bg-red-500 p-1.5 rounded-[50%]"
|
||||
>
|
||||
<i className="icon_2025 close group-hover:brightness-0 group-hover:invert-[1]"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="item-info-product grid items-center grid-cols-8 mt-2.5 pt-2.5 border-t-[1px] border-neutral-200">
|
||||
<div className="info col-span-3">
|
||||
<div className="flex items-center">
|
||||
<a
|
||||
href=""
|
||||
className="image w-[60px] h-[60px] block border border-neutral-200 p-1 mr-[10px]"
|
||||
>
|
||||
<img
|
||||
src="/assets/images/lienkien-ram.png"
|
||||
width="100%"
|
||||
height="100%"
|
||||
className="block w-full h-full object-contain"
|
||||
alt=""
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href=""
|
||||
className="name-product w-[calc(100%-100px)] hover:text-[var(--color-hover)]"
|
||||
>
|
||||
AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="old-price font-400">4.700.000 Vnđ</div>
|
||||
<div className="price-saleoff font-400">20%</div>
|
||||
<b className="total-amount">4.000.000đ</b>
|
||||
<div className="supplier col-span-2 flex items-center justify-between">
|
||||
<a href="">
|
||||
<img
|
||||
src="/assets/images/logo-hacom.png"
|
||||
width="100%"
|
||||
height="100%"
|
||||
className="w-full block h-[30px] object-contain"
|
||||
alt=""
|
||||
/>
|
||||
</a>
|
||||
<div className="btn flex items-center">
|
||||
<a
|
||||
href=""
|
||||
className="px-5 py-2 bg-blue-600 rounded text-white font-bold mr-[10px] hover:bg-blue-800"
|
||||
>
|
||||
Mua ngay
|
||||
</a>
|
||||
<a
|
||||
href=""
|
||||
className="group hover:bg-red-500 p-1.5 rounded-[50%]"
|
||||
>
|
||||
<i className="icon_2025 close group-hover:brightness-0 group-hover:invert-[1]"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
className="w-[130px] h-[30px] block text-xs mt-2.5 text-center leading-[30px] text-black rounded bg-zinc-300 font-bold hover:bg-[var(--color-global)] hover:text-white"
|
||||
>
|
||||
+ Chọn thêm CPU
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="item-component flex items-center py-2.5 border-b-[1px] border-neutral-200">
|
||||
<b className="name-component block w-[200px]">CPU Cooler</b>
|
||||
<div className="right w-[calc(100%-200px)]">
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
className="w-[130px] h-[30px] block text-xs text-center leading-[30px] text-black rounded bg-zinc-300 font-bold hover:bg-[var(--color-global)] hover:text-white"
|
||||
>
|
||||
+ Chọn thêm CPU
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="item-component flex items-center py-2.5 border-b-[1px] border-neutral-200">
|
||||
<b className="name-component block w-[200px]">CPU Cooler</b>
|
||||
<div className="right w-[calc(100%-200px)]">
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
className="w-[130px] h-[30px] block text-xs text-center leading-[30px] text-black rounded bg-zinc-300 font-bold hover:bg-[var(--color-global)] hover:text-white"
|
||||
>
|
||||
+ Chọn thêm CPU
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="item-component flex items-center py-2.5 border-b-[1px] border-neutral-200">
|
||||
<b className="name-component block w-[200px]">CPU Cooler</b>
|
||||
<div className="right w-[calc(100%-200px)]">
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
className="w-[130px] h-[30px] block text-xs text-center leading-[30px] text-black rounded bg-zinc-300 font-bold hover:bg-[var(--color-global)] hover:text-white"
|
||||
>
|
||||
+ Chọn thêm CPU
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="item-component flex items-center py-2.5 border-b-[1px] border-neutral-200">
|
||||
<b className="name-component block w-[200px]">CPU Cooler</b>
|
||||
<div className="right w-[calc(100%-200px)]">
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
className="w-[130px] h-[30px] block text-xs text-center leading-[30px] text-black rounded bg-zinc-300 font-bold hover:bg-[var(--color-global)] hover:text-white"
|
||||
>
|
||||
+ Chọn thêm CPU
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="item-component flex items-center py-2.5 border-b-[1px] border-neutral-200">
|
||||
<b className="name-component block w-[200px]">CPU Cooler</b>
|
||||
<div className="right w-[calc(100%-200px)]">
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
className="w-[130px] h-[30px] block text-xs text-center leading-[30px] text-black rounded bg-zinc-300 font-bold hover:bg-[var(--color-global)] hover:text-white"
|
||||
>
|
||||
+ Chọn thêm CPU
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- list buildpc --> */}
|
||||
|
||||
<div className="box-total-price pt-5">
|
||||
<b className="block text-xl text-right text-red-600">
|
||||
Tổng tiền 2 sản phẩm: 8.000.000đ
|
||||
</b>
|
||||
<div className="flex items-center justify-end gap-[10px] mt-3">
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
className="flex items-center px-7 py-2.5 border border-[#b3b3b3] rounded hover:bg-[#e0e0e0]"
|
||||
>
|
||||
<i className="icon_2025 print"></i>
|
||||
<span className="ml-2">In đơn hàng</span>
|
||||
</a>
|
||||
<a
|
||||
href="javasript:void(0)"
|
||||
className="px-7 py-2.5 text-center text-white bg-violet-900 rounded font-bold hover:bg-violet-700"
|
||||
>
|
||||
Mua hàng tại Hacom
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- tổng tiền --> */}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,54 +1,54 @@
|
||||
export function Footer() {
|
||||
return (
|
||||
<footer class="border-t-[11px] border-[#1c039b] w-full">
|
||||
<div class="container">
|
||||
<a href="/" class="block my-[30px]">
|
||||
<footer className="border-t-[11px] border-[#1c039b] w-full">
|
||||
<div className="container">
|
||||
<a href="/" className="block my-[30px]">
|
||||
<img
|
||||
src="/assets/images/logo-footer.png"
|
||||
class="block w-[180px] h-[45px] object-contain"
|
||||
className="block w-[180px] h-[45px] object-contain"
|
||||
width="100%"
|
||||
height="100%"
|
||||
alt="logo"
|
||||
/>
|
||||
</a>
|
||||
<div class="main-footer grid grid-cols-4">
|
||||
<div class="item">
|
||||
<h3 class="title font-bold">Về chúng tôi</h3>
|
||||
<a href="" class="block">
|
||||
<div className="main-footer grid grid-cols-4">
|
||||
<div className="item">
|
||||
<h3 className="title font-bold">Về chúng tôi</h3>
|
||||
<a href="" className="block">
|
||||
Độc quyền
|
||||
</a>
|
||||
<a href="" class="block">
|
||||
<a href="" className="block">
|
||||
Mua online
|
||||
</a>
|
||||
<a href="" class="block">
|
||||
<a href="" className="block">
|
||||
Bộ sưu tập
|
||||
</a>
|
||||
<a href="/tin-tuc" class="block">
|
||||
<a href="/tin-tuc" className="block">
|
||||
Blog
|
||||
</a>
|
||||
<div class="list-social flex items-center mt-[45px]">
|
||||
<a href="" target="_blank" class="mr-[10px]">
|
||||
<i class="icon_2025 facebook"></i>
|
||||
<div className="list-social flex items-center mt-[45px]">
|
||||
<a href="" target="_blank" className="mr-[10px]">
|
||||
<i className="icon_2025 facebook"></i>
|
||||
</a>
|
||||
<a href="" target="_blank">
|
||||
<i class="icon_2025 zalo"></i>
|
||||
<i className="icon_2025 zalo"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<h3 class="title font-bold">Tuyển dụng</h3>
|
||||
<div className="item">
|
||||
<h3 className="title font-bold">Tuyển dụng</h3>
|
||||
<a href="">Liên hệ</a>
|
||||
<a href="">Điều khoản</a>
|
||||
<a href="">Chính sách bảo mật</a>
|
||||
<a href="">Trở thành đối tác</a>
|
||||
</div>
|
||||
<div class="item">
|
||||
<h3 class="title font-bold">Liên kết</h3>
|
||||
<div className="item">
|
||||
<h3 className="title font-bold">Liên kết</h3>
|
||||
<a href="hurasoft.com">Hurasoft.com</a>
|
||||
</div>
|
||||
<div class="item">
|
||||
<h3 class="title font-bold">Giới thiệu</h3>
|
||||
<b class="text-[16px]">
|
||||
<div className="item">
|
||||
<h3 className="title font-bold">Giới thiệu</h3>
|
||||
<b className="text-[16px]">
|
||||
BESTPC là kênh tổng hợp tin khuyến mãi chuyên nghiệp đầu tiên ở
|
||||
Việt Nam, cho phép bạn tìm kiếm mã giảm giá, tin ưu đãi từ nghành
|
||||
hàng laptop, thiết bị điện tử, máy tính, xây dựng cấu hình PC
|
||||
@@ -58,8 +58,8 @@ export function Footer() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-bottom bg-[#ebebeb] py-[15px]">
|
||||
<b class="text-center block">
|
||||
<div className="footer-bottom bg-[#ebebeb] py-[15px]">
|
||||
<b className="text-center block">
|
||||
© Copyright 2025 by Hurasoft. All Rights Reserved.
|
||||
</b>
|
||||
</div>
|
||||
|
||||
@@ -1,124 +1,128 @@
|
||||
export function FormReview() {
|
||||
function closeReview() {}
|
||||
|
||||
export function FormReview({ show, onClose }) {
|
||||
return (
|
||||
<>
|
||||
<div id="backgroundPopup" onClick={() => closeReview()}></div>
|
||||
<div
|
||||
class="box-form-review hidden fixed left-[50%] top-[50%] w-[860px] bg-white rounded-[12px] translate-x-[-50%] translate-y-[-50%] z-[999] p-[20px]"
|
||||
id="backgroundPopup"
|
||||
className={`${show ? "active" : ""}`}
|
||||
onClick={onClose}
|
||||
></div>
|
||||
<div
|
||||
className={`box-form-review fixed left-[50%] top-[50%] w-[860px] bg-white rounded-[12px] translate-x-[-50%] translate-y-[-50%] z-[999] p-[20px] ${
|
||||
show ? "" : "hidden"
|
||||
}`}
|
||||
id="js-box-review"
|
||||
>
|
||||
<div class="title relative pb-[15px] border-b-[1px] border-[#E4E4E4]">
|
||||
<b class="text-center text-xl block">Đánh giá sản phẩm</b>
|
||||
<div className="title relative pb-[15px] border-b-[1px] border-[#E4E4E4]">
|
||||
<b className="text-center text-xl block">Đánh giá sản phẩm</b>
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
onClick={() => closeReview()}
|
||||
onClick={onClose}
|
||||
id="js-close-review"
|
||||
class="absolute right-0 top-0 text-[#808080] text-[22px] "
|
||||
className="absolute right-0 top-0 text-[#808080] text-[22px] "
|
||||
>
|
||||
x
|
||||
<i class="icon_2025 close"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div class="info-form-review w-[500px] mx-[auto]">
|
||||
<div className="info-form-review w-[500px] mx-[auto]">
|
||||
<a
|
||||
href=""
|
||||
class="block m-[10px_auto] p-[10px] rounded-[4px] border-[#B1B1B1]"
|
||||
className="block m-[10px_auto] p-[10px] rounded-[4px] border-[#B1B1B1]"
|
||||
>
|
||||
<img
|
||||
src="/assets/images/small-product-detail.png"
|
||||
width="100%"
|
||||
height="100%"
|
||||
class="block w-[100px] h-[100px] m-[0_auto]"
|
||||
className="block w-[100px] h-[100px] m-[0_auto]"
|
||||
alt=""
|
||||
/>
|
||||
</a>
|
||||
<a href="" class="text-center block mb-[10px]">
|
||||
<a href="" className="text-center block mb-[10px]">
|
||||
Laptop Gaming Asus TUF FX505GE-BQ037T Core i7-8750H/Win10(15.6" FHD)
|
||||
- Hàng Chính Hãng
|
||||
</a>
|
||||
|
||||
<div class="flex justify-center">
|
||||
<div class="rating-selection">
|
||||
<div className="flex justify-center">
|
||||
<div className="rating-selection">
|
||||
<input
|
||||
type="radio"
|
||||
class="rating-input"
|
||||
className="rating-input"
|
||||
id="star5"
|
||||
name="rating"
|
||||
value="5"
|
||||
/>
|
||||
<label for="star5" class="rating-star"></label>
|
||||
<label for="star5" className="rating-star"></label>
|
||||
|
||||
<input
|
||||
type="radio"
|
||||
class="rating-input"
|
||||
className="rating-input"
|
||||
id="star4"
|
||||
name="rating"
|
||||
value="4"
|
||||
/>
|
||||
<label for="star4" class="rating-star"></label>
|
||||
<label for="star4" className="rating-star"></label>
|
||||
|
||||
<input
|
||||
type="radio"
|
||||
class="rating-input"
|
||||
className="rating-input"
|
||||
id="star3"
|
||||
name="rating"
|
||||
value="3"
|
||||
/>
|
||||
<label for="star3" class="rating-star"></label>
|
||||
<label for="star3" className="rating-star"></label>
|
||||
|
||||
<input
|
||||
type="radio"
|
||||
class="rating-input"
|
||||
className="rating-input"
|
||||
id="star2"
|
||||
name="rating"
|
||||
value="2"
|
||||
/>
|
||||
<label for="star2" class="rating-star"></label>
|
||||
<label for="star2" className="rating-star"></label>
|
||||
|
||||
<input
|
||||
type="radio"
|
||||
class="rating-input"
|
||||
className="rating-input"
|
||||
id="star1"
|
||||
name="rating"
|
||||
value="1"
|
||||
/>
|
||||
<label for="star1" class="rating-star"></label>
|
||||
<label for="star1" className="rating-star"></label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
<div className="clearfix"></div>
|
||||
</div>
|
||||
<div class="form-input mt-[20px]">
|
||||
<div className="form-input mt-[20px]">
|
||||
<input
|
||||
type="text"
|
||||
name="title"
|
||||
placeholder="Mời bạn nhập tiêu đề..."
|
||||
/>
|
||||
<div class="note-error"></div>
|
||||
<div className="note-error"></div>
|
||||
</div>
|
||||
<div class="form-input mt-[10px]">
|
||||
<div className="form-input mt-[10px]">
|
||||
<textarea
|
||||
name="content"
|
||||
placeholder="Mời bạn chia sẻ cảm nhận..."
|
||||
id=""
|
||||
></textarea>
|
||||
<div class="note-error"></div>
|
||||
<div className="note-error"></div>
|
||||
</div>
|
||||
<input id="js-file-upload-id" type="hidden" value="" />
|
||||
<div id="js-container-selector" class="mt-[10px] flex items-center">
|
||||
<div id="js-container-selector" className="mt-[10px] flex items-center">
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
class="flex items-center"
|
||||
className="flex items-center"
|
||||
id="js-select-file"
|
||||
>
|
||||
<i class="icon_2025 upload_image"></i>
|
||||
<span class="text-[#1877F2] ml-[5px]">Gửi ảnh thực tế</span>
|
||||
<span class="px-[5px]">(tối đa 3 ảnh)</span>
|
||||
<i className="icon_2025 upload_image"></i>
|
||||
<span className="text-[#1877F2] ml-[5px]">Gửi ảnh thực tế</span>
|
||||
<span className="px-[5px]">(tối đa 3 ảnh)</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
class="mt-[15px] w-full h-[45px] bg-[#C8B7FF] rounded-[4px] text-white leading-[45px] hover:bg-[var(--color-global)]"
|
||||
className="mt-[15px] w-full h-[45px] bg-[#C8B7FF] rounded-[4px] text-white leading-[45px] hover:bg-[var(--color-global)]"
|
||||
>
|
||||
Gửi đánh giá
|
||||
</button>
|
||||
|
||||
@@ -1,271 +1,295 @@
|
||||
import { useState } from "react";
|
||||
import { FormReview } from "../../components/product/FormReview";
|
||||
|
||||
export function MemberReview() {
|
||||
const [showForm, setShowForm] = useState(false);
|
||||
|
||||
return (
|
||||
<div class="p-[15px] bg-white mt-5 rounded-[8px]">
|
||||
<div class="flex items-center justify-between pb-[15px] border-b-[1px] border-[#B1B1B1]">
|
||||
<h3 class="text-xl font-bold">Thành viên BestPC đánh giá</h3>
|
||||
<div class="select-sort relative border border-[#b1b1b1] h-[45px] rounded-[4px] overflow-hidden">
|
||||
<>
|
||||
<div className="p-[15px] bg-white mt-5 rounded-[8px]">
|
||||
<div className="flex items-center justify-between pb-[15px] border-b-[1px] border-[#B1B1B1]">
|
||||
<h3 className="text-xl font-bold">Thành viên BestPC đánh giá</h3>
|
||||
<div className="select-sort relative border border-[#b1b1b1] h-[45px] rounded-[4px] overflow-hidden">
|
||||
<select
|
||||
name=""
|
||||
id=""
|
||||
class=" appearance-none w-full relative p-[0_20px_0_10px] bg-transparent h-full z-[2]"
|
||||
className=" appearance-none w-full relative p-[0_20px_0_10px] bg-transparent h-full z-[2]"
|
||||
>
|
||||
<option value="">Top review</option>
|
||||
<option value="">Review mới nhất</option>
|
||||
</select>
|
||||
<i class="icon_2025 angle-right ml-[5px] absolute right-[7px] top-[12px] z-[1] rotate-[90deg]"></i>
|
||||
<i className="icon_2025 angle-right ml-[5px] absolute right-[7px] top-[12px] z-[1] rotate-[90deg]"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-[25px]">
|
||||
<div class="left w-[20%]">
|
||||
<b class="text-center block pt-[20px] pb-[5px] text-2xl">
|
||||
<div className="flex gap-[25px]">
|
||||
<div className="left w-[20%]">
|
||||
<b className="text-center block pt-[20px] pb-[5px] text-2xl">
|
||||
54 đánh giá
|
||||
</b>
|
||||
<div class="flex items-center justify-center">
|
||||
<i class="icon-star star4"></i>
|
||||
<span class="ml-[5px] mt-[3px]">4.8</span>
|
||||
<div className="flex items-center justify-center">
|
||||
<i className="icon-star star4"></i>
|
||||
<span className="ml-[5px] mt-[3px]">4.8</span>
|
||||
</div>
|
||||
<div class="border-t-[1px] border-[#E4E4E4] pt-[10px] mt-[10px]">
|
||||
<div class="flex items-center justify-between mb-[10px]">
|
||||
<i class="icon-star star5"></i>
|
||||
<div className="border-t-[1px] border-[#E4E4E4] pt-[10px] mt-[10px]">
|
||||
<div className="flex items-center justify-between mb-[10px]">
|
||||
<i className="icon-star star5"></i>
|
||||
<span>50 đánh giá</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between mb-[10px]">
|
||||
<i class="icon-star star4"></i>
|
||||
<div className="flex items-center justify-between mb-[10px]">
|
||||
<i className="icon-star star4"></i>
|
||||
<span>50 đánh giá</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between mb-[10px]">
|
||||
<i class="icon-star star3"></i>
|
||||
<div className="flex items-center justify-between mb-[10px]">
|
||||
<i className="icon-star star3"></i>
|
||||
<span>50 đánh giá</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between mb-[10px]">
|
||||
<i class="icon-star star2"></i>
|
||||
<div className="flex items-center justify-between mb-[10px]">
|
||||
<i className="icon-star star2"></i>
|
||||
<span>50 đánh giá</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between mb-[10px]">
|
||||
<i class="icon-star star1"></i>
|
||||
<div className="flex items-center justify-between mb-[10px]">
|
||||
<i className="icon-star star1"></i>
|
||||
<span>50 đánh giá</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="btn border-t-[1px] border-[#E4E4E4] pt-[10px] mt-[20px]">
|
||||
<p class="text-center mt-[10px]">Đánh giá của bạn về sản phẩm</p>
|
||||
<div className="btn border-t-[1px] border-[#E4E4E4] pt-[10px] mt-[20px]">
|
||||
<p className="text-center mt-[10px]">
|
||||
Đánh giá của bạn về sản phẩm
|
||||
</p>
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
id="js-show-form"
|
||||
class="block mt-[10px] h-[40px] leading-[40px] text-center text-white bg-[#FF7A00] rounded-[4px]"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
setShowForm(true);
|
||||
}}
|
||||
className="block mt-[10px] h-[40px] leading-[40px] text-center text-white bg-[#FF7A00] rounded-[4px]"
|
||||
>
|
||||
Gửi đánh giá của bạn về sản phẩm
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right w-[80%]">
|
||||
<div class="list-review mt-[15px]">
|
||||
<div class="item-review flex mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]">
|
||||
<div class="w-[80px] mr-[20px]">
|
||||
<div className="right w-[80%]">
|
||||
<div className="list-review mt-[15px]">
|
||||
<div className="item-review flex mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]">
|
||||
<div className="w-[80px] mr-[20px]">
|
||||
<img
|
||||
src="/assets/images/avartar-review-1.png"
|
||||
width="75px"
|
||||
height="75px"
|
||||
alt="avartar"
|
||||
/>
|
||||
<div class="time mt-[10px]">
|
||||
<b class="mb-[2px] text-center block">Dino</b>
|
||||
<p class="text-center">10:00pm 20/02/2025</p>
|
||||
<div className="time mt-[10px]">
|
||||
<b className="mb-[2px] text-center block">Dino</b>
|
||||
<p className="text-center">10:00pm 20/02/2025</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-[calc(100%-100px)]">
|
||||
<div class="flex items-center mb-[5px]">
|
||||
<i class="icon-star star4"></i>
|
||||
<b class="ml-[10px]">Laptop Gaming Asus ROG 16GB</b>
|
||||
<div className="w-[calc(100%-100px)]">
|
||||
<div className="flex items-center mb-[5px]">
|
||||
<i className="icon-star star4"></i>
|
||||
<b className="ml-[10px]">Laptop Gaming Asus ROG 16GB</b>
|
||||
</div>
|
||||
<p class="content mb-[5px]">
|
||||
<p className="content mb-[5px]">
|
||||
Lorem Ipsum is simply dummy text of the printing and
|
||||
typesetting industry. Lorem Ipsum has been the industry's
|
||||
standard dummy text ever since the 1500s, when an unknown
|
||||
printer took a galley of type and scrambled it to make a type
|
||||
specimen book. I
|
||||
printer took a galley of type and scrambled it to make a
|
||||
type specimen book. I
|
||||
</p>
|
||||
<div class="flex items-center mb-[10px]">
|
||||
<div className="flex items-center mb-[10px]">
|
||||
<a
|
||||
href="/src/assets/images/small-product-detail.png"
|
||||
data-fancybox="gallery"
|
||||
class="w-[80px] block mr-[10px]"
|
||||
className="w-[80px] block mr-[10px]"
|
||||
>
|
||||
<img
|
||||
src="/assets/images/small-product-detail.png"
|
||||
class="w-[100%] block"
|
||||
className="w-[100%] block"
|
||||
alt=""
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href="/src/assets/images/small-product-detail.png"
|
||||
class="w-[80px] block mr-[10px]"
|
||||
className="w-[80px] block mr-[10px]"
|
||||
data-fancybox="gallery"
|
||||
>
|
||||
<img
|
||||
src="/assets/images/small-product-detail.png"
|
||||
class="w-[100%] block"
|
||||
className="w-[100%] block"
|
||||
alt=""
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href="/src/assets/images/small-product-detail.png"
|
||||
class="w-[80px] block mr-[10px]"
|
||||
className="w-[80px] block mr-[10px]"
|
||||
data-fancybox="gallery"
|
||||
>
|
||||
<img
|
||||
src="/assets/images/small-product-detail.png"
|
||||
class="w-[100%] block"
|
||||
className="w-[100%] block"
|
||||
alt=""
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
<div class="btn">
|
||||
<a href="javascript:void(0)" class="text-[#1877F2] mr-[10px]">
|
||||
Bình luận <span class="ml-[3px] text-black">(23)</span>
|
||||
<div className="btn">
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
className="text-[#1877F2] mr-[10px]"
|
||||
>
|
||||
Bình luận{" "}
|
||||
<span className="ml-[3px] text-black">(23)</span>
|
||||
</a>
|
||||
<a href="javascript:void(0)" class="text-[#1877F2]">
|
||||
Thích <span class="ml-[3px] text-black">(23)</span>
|
||||
<a href="javascript:void(0)" className="text-[#1877F2]">
|
||||
Thích <span className="ml-[3px] text-black">(23)</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-review flex mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]">
|
||||
<div class="w-[80px] mr-[20px]">
|
||||
<div className="item-review flex mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]">
|
||||
<div className="w-[80px] mr-[20px]">
|
||||
<img
|
||||
src="/assets/images/avartar-review-2.png"
|
||||
width="75px"
|
||||
height="75px"
|
||||
alt="avartar"
|
||||
/>
|
||||
<div class="time mt-[10px]">
|
||||
<b class="mb-[2px] text-center block">Dino</b>
|
||||
<p class="text-center">10:00pm 20/02/2025</p>
|
||||
<div className="time mt-[10px]">
|
||||
<b className="mb-[2px] text-center block">Dino</b>
|
||||
<p className="text-center">10:00pm 20/02/2025</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-[calc(100%-100px)]">
|
||||
<div class="flex items-center mb-[5px]">
|
||||
<i class="icon-star star4"></i>
|
||||
<b class="ml-[10px]">Laptop Gaming Asus ROG 16GB</b>
|
||||
<div className="w-[calc(100%-100px)]">
|
||||
<div className="flex items-center mb-[5px]">
|
||||
<i className="icon-star star4"></i>
|
||||
<b className="ml-[10px]">Laptop Gaming Asus ROG 16GB</b>
|
||||
</div>
|
||||
<p class="content mb-[5px]">
|
||||
<p className="content mb-[5px]">
|
||||
Lorem Ipsum is simply dummy text of the printing and
|
||||
typesetting industry. Lorem Ipsum has been the industry's
|
||||
standard dummy text ever since the 1500s, when an unknown
|
||||
printer took a galley of type and scrambled it to make a type
|
||||
specimen book. I
|
||||
printer took a galley of type and scrambled it to make a
|
||||
type specimen book. I
|
||||
</p>
|
||||
<div class="flex items-center mb-[10px]">
|
||||
<div className="flex items-center mb-[10px]">
|
||||
<a
|
||||
href="/src/assets/images/small-product-detail.png"
|
||||
data-fancybox="gallery"
|
||||
class="w-[80px] block mr-[10px]"
|
||||
className="w-[80px] block mr-[10px]"
|
||||
>
|
||||
<img
|
||||
src="/assets/images/small-product-detail.png"
|
||||
class="w-[100%] block"
|
||||
className="w-[100%] block"
|
||||
alt=""
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href="/src/assets/images/small-product-detail.png"
|
||||
class="w-[80px] block mr-[10px]"
|
||||
className="w-[80px] block mr-[10px]"
|
||||
data-fancybox="gallery"
|
||||
>
|
||||
<img
|
||||
src="/assets/images/small-product-detail.png"
|
||||
class="w-[100%] block"
|
||||
className="w-[100%] block"
|
||||
alt=""
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href="/src/assets/images/small-product-detail.png"
|
||||
class="w-[80px] block mr-[10px]"
|
||||
className="w-[80px] block mr-[10px]"
|
||||
data-fancybox="gallery"
|
||||
>
|
||||
<img
|
||||
src="/assets/images/small-product-detail.png"
|
||||
class="w-[100%] block"
|
||||
className="w-[100%] block"
|
||||
alt=""
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
<div class="btn">
|
||||
<a href="javascript:void(0)" class="text-[#1877F2] mr-[10px]">
|
||||
Bình luận <span class="ml-[3px] text-black">(23)</span>
|
||||
<div className="btn">
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
className="text-[#1877F2] mr-[10px]"
|
||||
>
|
||||
Bình luận{" "}
|
||||
<span className="ml-[3px] text-black">(23)</span>
|
||||
</a>
|
||||
<a href="javascript:void(0)" class="text-[#1877F2]">
|
||||
Thích <span class="ml-[3px] text-black">(23)</span>
|
||||
<a href="javascript:void(0)" className="text-[#1877F2]">
|
||||
Thích <span className="ml-[3px] text-black">(23)</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-review flex mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]">
|
||||
<div class="w-[80px] mr-[20px]">
|
||||
<div className="item-review flex mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]">
|
||||
<div className="w-[80px] mr-[20px]">
|
||||
<img
|
||||
src="/assets/images/avartar-review-3.png"
|
||||
width="75px"
|
||||
height="75px"
|
||||
alt="avartar"
|
||||
/>
|
||||
<div class="time mt-[10px]">
|
||||
<b class="mb-[2px] text-center block">Dino</b>
|
||||
<p class="text-center">10:00pm 20/02/2025</p>
|
||||
<div className="time mt-[10px]">
|
||||
<b className="mb-[2px] text-center block">Dino</b>
|
||||
<p className="text-center">10:00pm 20/02/2025</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-[calc(100%-100px)]">
|
||||
<div class="flex items-center mb-[5px]">
|
||||
<i class="icon-star star4"></i>
|
||||
<b class="ml-[10px]">Laptop Gaming Asus ROG 16GB</b>
|
||||
<div className="w-[calc(100%-100px)]">
|
||||
<div className="flex items-center mb-[5px]">
|
||||
<i className="icon-star star4"></i>
|
||||
<b className="ml-[10px]">Laptop Gaming Asus ROG 16GB</b>
|
||||
</div>
|
||||
<p class="content mb-[5px]">
|
||||
<p className="content mb-[5px]">
|
||||
Lorem Ipsum is simply dummy text of the printing and
|
||||
typesetting industry. Lorem Ipsum has been the industry's
|
||||
standard dummy text ever since the 1500s, when an unknown
|
||||
printer took a galley of type and scrambled it to make a type
|
||||
specimen book. I
|
||||
printer took a galley of type and scrambled it to make a
|
||||
type specimen book. I
|
||||
</p>
|
||||
<div class="flex items-center mb-[10px]">
|
||||
<div className="flex items-center mb-[10px]">
|
||||
<a
|
||||
href="/src/assets/images/small-product-detail.png"
|
||||
data-fancybox="gallery"
|
||||
class="w-[80px] block mr-[10px]"
|
||||
className="w-[80px] block mr-[10px]"
|
||||
>
|
||||
<img
|
||||
src="/assets/images/small-product-detail.png"
|
||||
class="w-[100%] block"
|
||||
className="w-[100%] block"
|
||||
alt=""
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href="/src/assets/images/small-product-detail.png"
|
||||
class="w-[80px] block mr-[10px]"
|
||||
className="w-[80px] block mr-[10px]"
|
||||
data-fancybox="gallery"
|
||||
>
|
||||
<img
|
||||
src="/assets/images/small-product-detail.png"
|
||||
class="w-[100%] block"
|
||||
className="w-[100%] block"
|
||||
alt=""
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href="/src/assets/images/small-product-detail.png"
|
||||
class="w-[80px] block mr-[10px]"
|
||||
className="w-[80px] block mr-[10px]"
|
||||
data-fancybox="gallery"
|
||||
>
|
||||
<img
|
||||
src="/assets/images/small-product-detail.png"
|
||||
class="w-[100%] block"
|
||||
className="w-[100%] block"
|
||||
alt=""
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
<div class="btn">
|
||||
<a href="javascript:void(0)" class="text-[#1877F2] mr-[10px]">
|
||||
Bình luận <span class="ml-[3px] text-black">(23)</span>
|
||||
<div className="btn">
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
className="text-[#1877F2] mr-[10px]"
|
||||
>
|
||||
Bình luận{" "}
|
||||
<span className="ml-[3px] text-black">(23)</span>
|
||||
</a>
|
||||
<a href="javascript:void(0)" class="text-[#1877F2]">
|
||||
Thích <span class="ml-[3px] text-black">(23)</span>
|
||||
<a href="javascript:void(0)" className="text-[#1877F2]">
|
||||
Thích <span className="ml-[3px] text-black">(23)</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -274,12 +298,14 @@ export function MemberReview() {
|
||||
{/* end list review */}
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
class="pt-[15px] text-[#FF7A00] btn-more-review"
|
||||
className="pt-[15px] text-[#FF7A00] btn-more-review"
|
||||
>
|
||||
Xem thêm <span>23</span> bình luận khác
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<FormReview show={showForm} onClose={() => setShowForm(false)} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -31,15 +31,15 @@ export function ProductDescription() {
|
||||
};
|
||||
|
||||
return (
|
||||
<div class="product-information mt-5">
|
||||
<div class="flex gap-[15px]">
|
||||
<div class="left w-[60%]">
|
||||
<div class="box-desc bg-white p-[12px] rounded-[8px]">
|
||||
<h3 class="title text-2xl block mb-[10px] pb-[10px] border-b-[1px] border-[#B1B1B1] font-bold">
|
||||
<div className="product-information mt-5">
|
||||
<div className="flex gap-[15px]">
|
||||
<div className="left w-[60%]">
|
||||
<div className="box-desc bg-white p-[12px] rounded-[8px]">
|
||||
<h3 className="title text-2xl block mb-[10px] pb-[10px] border-b-[1px] border-[#B1B1B1] font-bold">
|
||||
Thông tin sản phẩm
|
||||
</h3>
|
||||
<div id="content-desciption">
|
||||
<div class="content nd" ref={contentRef}>
|
||||
<div className="content nd" ref={contentRef}>
|
||||
<p style="text-align: justify;">
|
||||
<strong>Laptop HP Victus 16 R0376TX AY8Z2PA</strong> sở hữu
|
||||
chip xử lý Intel Core i7 13700HX cùng VGA RTX 3050 6GB để có
|
||||
@@ -295,13 +295,13 @@ export function ProductDescription() {
|
||||
</div>
|
||||
{/* <!-- end box desc --> */}
|
||||
</div>
|
||||
<div class="right w-[40%]">
|
||||
<div class="box-spec bg-white p-[12px] rounded-[8px]">
|
||||
<h3 class="title text-2xl block mb-[10px] pb-[10px] border-b-[1px] border-[#B1B1B1] font-bold">
|
||||
<div className="right w-[40%]">
|
||||
<div className="box-spec bg-white p-[12px] rounded-[8px]">
|
||||
<h3 className="title text-2xl block mb-[10px] pb-[10px] border-b-[1px] border-[#B1B1B1] font-bold">
|
||||
Thông tin chi tiết
|
||||
</h3>
|
||||
|
||||
<div class="content table">
|
||||
<div className="content table">
|
||||
<table width="638">
|
||||
<tbody>
|
||||
<tr>
|
||||
@@ -366,7 +366,7 @@ export function ProductDescription() {
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div id="content-specification" class="hidden table">
|
||||
<div id="content-specification" className="hidden table">
|
||||
<table width="638">
|
||||
<tbody>
|
||||
<tr>
|
||||
@@ -434,9 +434,9 @@ export function ProductDescription() {
|
||||
<a
|
||||
href="#content-specification"
|
||||
data-fancybox
|
||||
class="more-all flex items-center justify-center"
|
||||
className="more-all flex items-center justify-center"
|
||||
>
|
||||
Xem thêm thông số <i class="icon_2025 angle-bottom"></i>
|
||||
Xem thêm thông số <i className="icon_2025 angle-bottom"></i>
|
||||
</a>
|
||||
</div>
|
||||
{/* <!-- box spec --> */}
|
||||
|
||||
@@ -1,177 +1,179 @@
|
||||
export function ProductReview() {
|
||||
return (
|
||||
<div class="p-[15px] bg-white mt-5 rounded-[8px]">
|
||||
<div class="flex items-center justify-between pb-[15px] border-b-[1px] border-[#B1B1B1]">
|
||||
<h3 class="text-xl font-bold">Đánh giá trên internet</h3>
|
||||
<div class="select-sort relative border border-[#b1b1b1] h-[45px] rounded-[4px] overflow-hidden">
|
||||
<div className="p-[15px] bg-white mt-5 rounded-[8px]">
|
||||
<div className="flex items-center justify-between pb-[15px] border-b-[1px] border-[#B1B1B1]">
|
||||
<h3 className="text-xl font-bold">Đánh giá trên internet</h3>
|
||||
<div className="select-sort relative border border-[#b1b1b1] h-[45px] rounded-[4px] overflow-hidden">
|
||||
<select
|
||||
name=""
|
||||
id=""
|
||||
class=" appearance-none w-full relative p-[0_20px_0_10px] bg-transparent h-full z-[2]"
|
||||
className=" appearance-none w-full relative p-[0_20px_0_10px] bg-transparent h-full z-[2]"
|
||||
>
|
||||
<option value="">Top review</option>
|
||||
<option value="">Review mới nhất</option>
|
||||
</select>
|
||||
<i class="icon_2025 angle-right ml-[5px] absolute right-[7px] top-[12px] z-[1] rotate-[90deg]"></i>
|
||||
<i className="icon_2025 angle-right ml-[5px] absolute right-[7px] top-[12px] z-[1] rotate-[90deg]"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-[25px]">
|
||||
<div class="left w-[20%]">
|
||||
<b class="text-center block pt-[20px] pb-[5px] text-2xl">
|
||||
<div className="flex gap-[25px]">
|
||||
<div className="left w-[20%]">
|
||||
<b className="text-center block pt-[20px] pb-[5px] text-2xl">
|
||||
54 đánh giá
|
||||
</b>
|
||||
<div class="flex items-center justify-center">
|
||||
<i class="icon-star star4"></i>
|
||||
<span class="ml-[5px] mt-[3px]">4.8</span>
|
||||
<div className="flex items-center justify-center">
|
||||
<i className="icon-star star4"></i>
|
||||
<span className="ml-[5px] mt-[3px]">4.8</span>
|
||||
</div>
|
||||
<div class="border-t-[1px] border-[#E4E4E4] pt-[10px] mt-[10px]">
|
||||
<div class="flex items-center justify-between mb-[10px]">
|
||||
<div className="border-t-[1px] border-[#E4E4E4] pt-[10px] mt-[10px]">
|
||||
<div className="flex items-center justify-between mb-[10px]">
|
||||
<span>
|
||||
Hanoicomputer{" "}
|
||||
<a href="" class="ml-[5px] text-[#1877F2]">
|
||||
<a href="" className="ml-[5px] text-[#1877F2]">
|
||||
(240)
|
||||
</a>
|
||||
</span>
|
||||
<i class="icon-star star5"></i>
|
||||
<i className="icon-star star5"></i>
|
||||
</div>
|
||||
<div class="flex items-center justify-between mb-[10px]">
|
||||
<div className="flex items-center justify-between mb-[10px]">
|
||||
<span>
|
||||
Anphatpc{" "}
|
||||
<a href="" class="ml-[5px] text-[#1877F2]">
|
||||
<a href="" className="ml-[5px] text-[#1877F2]">
|
||||
(240)
|
||||
</a>
|
||||
</span>
|
||||
<i class="icon-star star4"></i>
|
||||
<i className="icon-star star4"></i>
|
||||
</div>
|
||||
<div class="flex items-center justify-between mb-[10px]">
|
||||
<div className="flex items-center justify-between mb-[10px]">
|
||||
<span>
|
||||
Mygear{" "}
|
||||
<a href="" class="ml-[5px] text-[#1877F2]">
|
||||
<a href="" className="ml-[5px] text-[#1877F2]">
|
||||
(240)
|
||||
</a>
|
||||
</span>
|
||||
<i class="icon-star star3"></i>
|
||||
<i className="icon-star star3"></i>
|
||||
</div>
|
||||
<div class="flex items-center justify-between mb-[10px]">
|
||||
<div className="flex items-center justify-between mb-[10px]">
|
||||
<span>
|
||||
Hoangphatpc{" "}
|
||||
<a href="" class="ml-[5px] text-[#1877F2]">
|
||||
<a href="" className="ml-[5px] text-[#1877F2]">
|
||||
(240)
|
||||
</a>
|
||||
</span>
|
||||
<i class="icon-star star2"></i>
|
||||
<i className="icon-star star2"></i>
|
||||
</div>
|
||||
<div class="flex items-center justify-between mb-[10px]">
|
||||
<div className="flex items-center justify-between mb-[10px]">
|
||||
<span>
|
||||
Phucanhpc{" "}
|
||||
<a href="" class="ml-[5px] text-[#1877F2]">
|
||||
<a href="" className="ml-[5px] text-[#1877F2]">
|
||||
(240)
|
||||
</a>
|
||||
</span>
|
||||
<i class="icon-star star1"></i>
|
||||
<i className="icon-star star1"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="btn border-t-[1px] border-[#E4E4E4] pt-[10px] mt-[20px]">
|
||||
<p class="text-center mt-[10px]">Đánh giá của bạn về sản phẩm</p>
|
||||
<div className="btn border-t-[1px] border-[#E4E4E4] pt-[10px] mt-[20px]">
|
||||
<p className="text-center mt-[10px]">
|
||||
Đánh giá của bạn về sản phẩm
|
||||
</p>
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
class="block mt-[10px] h-[40px] leading-[40px] text-center text-white bg-[#FF7A00] rounded-[4px]"
|
||||
className="block mt-[10px] h-[40px] leading-[40px] text-center text-white bg-[#FF7A00] rounded-[4px]"
|
||||
>
|
||||
Gửi đánh giá của bạn về sản phẩm
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right w-[80%]">
|
||||
<div class="list-review mt-[15px]">
|
||||
<div class="item-review flex mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]">
|
||||
<div class="w-[80px] mr-[20px]">
|
||||
<a href="hacom.vn" target="_blank" class="text-[#1877F2]">
|
||||
<div className="right w-[80%]">
|
||||
<div className="list-review mt-[15px]">
|
||||
<div className="item-review flex mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]">
|
||||
<div className="w-[80px] mr-[20px]">
|
||||
<a href="hacom.vn" target="_blank" className="text-[#1877F2]">
|
||||
Hacom.vn
|
||||
</a>
|
||||
<div class="time mt-[5px]">
|
||||
<b class="mb-[2px] text-center block">Dino</b>
|
||||
<p class="text-center">10:00pm 20/02/2025</p>
|
||||
<div className="time mt-[5px]">
|
||||
<b className="mb-[2px] text-center block">Dino</b>
|
||||
<p className="text-center">10:00pm 20/02/2025</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-[calc(100%-100px)]">
|
||||
<div class="flex items-center mb-[5px]">
|
||||
<i class="icon-star star4"></i>
|
||||
<b class="ml-[10px]">Laptop Gaming Asus ROG 16GB</b>
|
||||
<div className="w-[calc(100%-100px)]">
|
||||
<div className="flex items-center mb-[5px]">
|
||||
<i className="icon-star star4"></i>
|
||||
<b className="ml-[10px]">Laptop Gaming Asus ROG 16GB</b>
|
||||
</div>
|
||||
<p class="content mb-[5px] text-base">
|
||||
<p className="content mb-[5px] text-base">
|
||||
Lorem Ipsum is simply dummy text of the printing and
|
||||
typesetting industry. Lorem Ipsum has been the industry's
|
||||
standard dummy text ever since the 1500s, when an unknown
|
||||
printer took a galley of type and scrambled it to make a type
|
||||
specimen book. I
|
||||
</p>
|
||||
<a href="javascript:void(0)" class="flex items-start">
|
||||
<span class="text-[16px] mr-[7px] underline">
|
||||
<a href="javascript:void(0)" className="flex items-start">
|
||||
<span className="text-[16px] mr-[7px] underline">
|
||||
Xem link nguồn
|
||||
</span>
|
||||
<i class="icon_2025 link-review"></i>
|
||||
<i className="icon_2025 link-review"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-review flex mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]">
|
||||
<div class="w-[80px] mr-[20px]">
|
||||
<a href="hacom.vn" target="_blank" class="text-[#1877F2]">
|
||||
<div className="item-review flex mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]">
|
||||
<div className="w-[80px] mr-[20px]">
|
||||
<a href="hacom.vn" target="_blank" className="text-[#1877F2]">
|
||||
Hacom.vn
|
||||
</a>
|
||||
<div class="time mt-[5px]">
|
||||
<b class="mb-[2px] text-center block">Dino</b>
|
||||
<p class="text-center">10:00pm 20/02/2025</p>
|
||||
<div className="time mt-[5px]">
|
||||
<b className="mb-[2px] text-center block">Dino</b>
|
||||
<p className="text-center">10:00pm 20/02/2025</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-[calc(100%-100px)]">
|
||||
<div class="flex items-center mb-[5px]">
|
||||
<i class="icon-star star4"></i>
|
||||
<b class="ml-[10px]">Laptop Gaming Asus ROG 16GB</b>
|
||||
<div className="w-[calc(100%-100px)]">
|
||||
<div className="flex items-center mb-[5px]">
|
||||
<i className="icon-star star4"></i>
|
||||
<b className="ml-[10px]">Laptop Gaming Asus ROG 16GB</b>
|
||||
</div>
|
||||
<p class="content mb-[5px] text-base">
|
||||
<p className="content mb-[5px] text-base">
|
||||
Lorem Ipsum is simply dummy text of the printing and
|
||||
typesetting industry. Lorem Ipsum has been the industry's
|
||||
standard dummy text ever since the 1500s, when an unknown
|
||||
printer took a galley of type and scrambled it to make a type
|
||||
specimen book. I
|
||||
</p>
|
||||
<a href="javascript:void(0)" class="flex items-start">
|
||||
<span class="text-[16px] mr-[7px] underline">
|
||||
<a href="javascript:void(0)" className="flex items-start">
|
||||
<span className="text-[16px] mr-[7px] underline">
|
||||
Xem link nguồn
|
||||
</span>
|
||||
<i class="icon_2025 link-review"></i>
|
||||
<i className="icon_2025 link-review"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-review flex mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]">
|
||||
<div class="w-[80px] mr-[20px]">
|
||||
<a href="hacom.vn" target="_blank" class="text-[#1877F2]">
|
||||
<div className="item-review flex mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]">
|
||||
<div className="w-[80px] mr-[20px]">
|
||||
<a href="hacom.vn" target="_blank" className="text-[#1877F2]">
|
||||
Hacom.vn
|
||||
</a>
|
||||
<div class="time mt-[5px]">
|
||||
<b class="mb-[2px] text-center block">Dino</b>
|
||||
<p class="text-center">10:00pm 20/02/2025</p>
|
||||
<div className="time mt-[5px]">
|
||||
<b className="mb-[2px] text-center block">Dino</b>
|
||||
<p className="text-center">10:00pm 20/02/2025</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-[calc(100%-100px)]">
|
||||
<div class="flex items-center mb-[5px]">
|
||||
<i class="icon-star star4"></i>
|
||||
<b class="ml-[10px]">Laptop Gaming Asus ROG 16GB</b>
|
||||
<div className="w-[calc(100%-100px)]">
|
||||
<div className="flex items-center mb-[5px]">
|
||||
<i className="icon-star star4"></i>
|
||||
<b className="ml-[10px]">Laptop Gaming Asus ROG 16GB</b>
|
||||
</div>
|
||||
<p class="content mb-[5px] text-base">
|
||||
<p className="content mb-[5px] text-base">
|
||||
Lorem Ipsum is simply dummy text of the printing and
|
||||
typesetting industry. Lorem Ipsum has been the industry's
|
||||
standard dummy text ever since the 1500s, when an unknown
|
||||
printer took a galley of type and scrambled it to make a type
|
||||
specimen book. I
|
||||
</p>
|
||||
<a href="javascript:void(0)" class="flex items-start">
|
||||
<span class="text-[16px] mr-[7px] underline">
|
||||
<a href="javascript:void(0)" className="flex items-start">
|
||||
<span className="text-[16px] mr-[7px] underline">
|
||||
Xem link nguồn
|
||||
</span>
|
||||
<i class="icon_2025 link-review"></i>
|
||||
<i className="icon_2025 link-review"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -179,7 +181,7 @@ export function ProductReview() {
|
||||
{/* end list review */}
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
class="pt-[15px] text-[#FF7A00] btn-more-review"
|
||||
className="pt-[15px] text-[#FF7A00] btn-more-review"
|
||||
>
|
||||
Xem thêm <span>23</span> bình luận khác
|
||||
</a>
|
||||
|
||||
@@ -1,32 +1,34 @@
|
||||
export function SupplierListBox() {
|
||||
return (
|
||||
<div class="p-[15px] bg-white mt-5 rounded-[8px]">
|
||||
<div class="flex items-center justify-between pb-[15px] border-b-[1px] border-[#B1B1B1]">
|
||||
<h3 class="text-xl font-bold">Nhà cung cấp trên BestPC - Tại Hà Nội</h3>
|
||||
<div class="flex items-center">
|
||||
<div class="flex items-center relative border border-[#b1b1b1] mr-[10px] w-[410px] h-[45px] px-[10px] rounded-[4px]">
|
||||
<i class="icon_2025 map-2"></i>
|
||||
<div className="p-[15px] bg-white mt-5 rounded-[8px]">
|
||||
<div className="flex items-center justify-between pb-[15px] border-b-[1px] border-[#B1B1B1]">
|
||||
<h3 className="text-xl font-bold">
|
||||
Nhà cung cấp trên BestPC - Tại Hà Nội
|
||||
</h3>
|
||||
<div className="flex items-center">
|
||||
<div className="flex items-center relative border border-[#b1b1b1] mr-[10px] w-[410px] h-[45px] px-[10px] rounded-[4px]">
|
||||
<i className="icon_2025 map-2"></i>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Nhập địa chỉ của bạn để tìm NCC gần nhất"
|
||||
class="outline-none ml-[5px] h-full w-full"
|
||||
className="outline-none ml-[5px] h-full w-full"
|
||||
/>
|
||||
</div>
|
||||
<div class="select-sort relative border border-[#b1b1b1] w-[100px] h-[45px] rounded-[4px] overflow-hidden">
|
||||
<div className="select-sort relative border border-[#b1b1b1] w-[100px] h-[45px] rounded-[4px] overflow-hidden">
|
||||
<select
|
||||
name=""
|
||||
id=""
|
||||
class=" appearance-none w-full relative pl-[10px] bg-transparent h-full z-[2]"
|
||||
className=" appearance-none w-full relative pl-[10px] bg-transparent h-full z-[2]"
|
||||
>
|
||||
<option value="">Sắp xếp</option>
|
||||
<option value="">Mới</option>
|
||||
</select>
|
||||
<i class="icon_2025 angle-right ml-[5px] absolute right-[7px] top-[12px] z-[1] rotate-[90deg]"></i>
|
||||
<i className="icon_2025 angle-right ml-[5px] absolute right-[7px] top-[12px] z-[1] rotate-[90deg]"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-[10px] py-[15px] grid grid-cols-5 text-xl border-b-[1px] border-[#D9D9D9]">
|
||||
<div className="mt-[10px] py-[15px] grid grid-cols-5 text-xl border-b-[1px] border-[#D9D9D9]">
|
||||
<div>
|
||||
<b>Nhà cung cấp</b>
|
||||
</div>
|
||||
@@ -41,39 +43,39 @@ export function SupplierListBox() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="list ">
|
||||
<div class="item grid grid-cols-5 py-[10px] border-b-[1px] border-[#D9D9D9]">
|
||||
<div class="flex items-start supplier">
|
||||
<div class="logo mr-[10px]">
|
||||
<div class="w-[70px] h-[70px] p-[10px] block border border-[#F3F3F3] rounded-[4px]">
|
||||
<div className="list ">
|
||||
<div className="item grid grid-cols-5 py-[10px] border-b-[1px] border-[#D9D9D9]">
|
||||
<div className="flex items-start supplier">
|
||||
<div className="logo mr-[10px]">
|
||||
<div className="w-[70px] h-[70px] p-[10px] block border border-[#F3F3F3] rounded-[4px]">
|
||||
<img
|
||||
src="/assets/images/logo-hacom.png"
|
||||
class="block w-full h-full object-contain m-[0_auto]"
|
||||
className="block w-full h-full object-contain m-[0_auto]"
|
||||
width="100%"
|
||||
height="100%"
|
||||
alt="hacom"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex items-center justify-center mt-2">
|
||||
<i class="icon_2025 map-4"></i>
|
||||
<span class="ml-[5px]">3km</span>
|
||||
<div className="flex items-center justify-center mt-2">
|
||||
<i className="icon_2025 map-4"></i>
|
||||
<span className="ml-[5px]">3km</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex items-center">
|
||||
<i class="icon-star star4"></i>
|
||||
<span class="ml-[5px] mt-[3px]">4.7</span>
|
||||
<div className="flex items-center">
|
||||
<i className="icon-star star4"></i>
|
||||
<span className="ml-[5px] mt-[3px]">4.7</span>
|
||||
</div>
|
||||
<a href="" class="text-[#1877F2] font-bold">
|
||||
<a href="" className="text-[#1877F2] font-bold">
|
||||
Hanoicomputer
|
||||
</a>
|
||||
<a href="" class="text-[#E85933] underline block">
|
||||
<a href="" className="text-[#E85933] underline block">
|
||||
Xem 7 cửa hàng
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ship">
|
||||
<div className="ship">
|
||||
<p>Miễn phí giao hàng</p>
|
||||
<p>
|
||||
Nhận giap hàng và lắp đặt từ 8h00-21:30 các ngày trong tuần kể cả
|
||||
@@ -81,64 +83,66 @@ export function SupplierListBox() {
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="price">
|
||||
<div class="flex items-center text-base">
|
||||
<div className="price">
|
||||
<div className="flex items-center text-base">
|
||||
<span>Giá:</span>
|
||||
<b class="ml-[5px] text-[#D80A00]">9.000.000đ - 20.000.000đ</b>
|
||||
<b className="ml-[5px] text-[#D80A00]">
|
||||
9.000.000đ - 20.000.000đ
|
||||
</b>
|
||||
</div>
|
||||
<b class="mt-2">Đã có VAT</b>
|
||||
<b className="mt-2">Đã có VAT</b>
|
||||
</div>
|
||||
|
||||
<div class="">
|
||||
<p class="name-pro pb-[10px] border-b-[1px] border-[#D9D9D9]">
|
||||
<div className="">
|
||||
<p className="name-pro pb-[10px] border-b-[1px] border-[#D9D9D9]">
|
||||
8GB - 9.000.000đ new White
|
||||
</p>
|
||||
<p class="name-pro py-[10px] border-b-[1px] border-[#D9D9D9]">
|
||||
<p className="name-pro py-[10px] border-b-[1px] border-[#D9D9D9]">
|
||||
8GB - 9.000.000đ new White
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<a
|
||||
href=""
|
||||
class="block w-[130px] h-[40px] leading-[40px] m-[auto_0_auto_auto] text-base text-center text-white bg-orange-500 rounded hover:bg-orange-600"
|
||||
className="block w-[130px] h-[40px] leading-[40px] m-[auto_0_auto_auto] text-base text-center text-white bg-orange-500 rounded hover:bg-orange-600"
|
||||
>
|
||||
Liên hệ ngay
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item grid grid-cols-5 py-[10px] border-b-[1px] border-[#D9D9D9]">
|
||||
<div class="flex items-start supplier">
|
||||
<div class="logo mr-[10px]">
|
||||
<div class="w-[70px] h-[70px] p-[10px] block border border-[#F3F3F3] rounded-[4px]">
|
||||
<div className="item grid grid-cols-5 py-[10px] border-b-[1px] border-[#D9D9D9]">
|
||||
<div className="flex items-start supplier">
|
||||
<div className="logo mr-[10px]">
|
||||
<div className="w-[70px] h-[70px] p-[10px] block border border-[#F3F3F3] rounded-[4px]">
|
||||
<img
|
||||
src="/assets/images/logo-hacom.png"
|
||||
class="block w-full h-full object-contain m-[0_auto]"
|
||||
className="block w-full h-full object-contain m-[0_auto]"
|
||||
width="100%"
|
||||
height="100%"
|
||||
alt="hacom"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex items-center justify-center mt-2">
|
||||
<i class="icon_2025 map-4"></i>
|
||||
<span class="ml-[5px]">3km</span>
|
||||
<div className="flex items-center justify-center mt-2">
|
||||
<i className="icon_2025 map-4"></i>
|
||||
<span className="ml-[5px]">3km</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex items-center">
|
||||
<i class="icon-star star4"></i>
|
||||
<span class="ml-[5px] mt-[3px]">4.7</span>
|
||||
<div className="flex items-center">
|
||||
<i className="icon-star star4"></i>
|
||||
<span className="ml-[5px] mt-[3px]">4.7</span>
|
||||
</div>
|
||||
<a href="" class="text-[#1877F2] font-bold">
|
||||
<a href="" className="text-[#1877F2] font-bold">
|
||||
Hanoicomputer
|
||||
</a>
|
||||
<a href="" class="text-[#E85933] underline block">
|
||||
<a href="" className="text-[#E85933] underline block">
|
||||
Xem 7 cửa hàng
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ship">
|
||||
<div className="ship">
|
||||
<p>Miễn phí giao hàng</p>
|
||||
<p>
|
||||
Nhận giap hàng và lắp đặt từ 8h00-21:30 các ngày trong tuần kể cả
|
||||
@@ -146,64 +150,66 @@ export function SupplierListBox() {
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="price">
|
||||
<div class="flex items-center text-base">
|
||||
<div className="price">
|
||||
<div className="flex items-center text-base">
|
||||
<span>Giá:</span>
|
||||
<b class="ml-[5px] text-[#D80A00]">9.000.000đ - 20.000.000đ</b>
|
||||
<b className="ml-[5px] text-[#D80A00]">
|
||||
9.000.000đ - 20.000.000đ
|
||||
</b>
|
||||
</div>
|
||||
<b class="mt-2">Đã có VAT</b>
|
||||
<b className="mt-2">Đã có VAT</b>
|
||||
</div>
|
||||
|
||||
<div class="">
|
||||
<p class="name-pro pb-[10px] border-b-[1px] border-[#D9D9D9]">
|
||||
<div className="">
|
||||
<p className="name-pro pb-[10px] border-b-[1px] border-[#D9D9D9]">
|
||||
8GB - 9.000.000đ new White
|
||||
</p>
|
||||
<p class="name-pro py-[10px] border-b-[1px] border-[#D9D9D9]">
|
||||
<p className="name-pro py-[10px] border-b-[1px] border-[#D9D9D9]">
|
||||
8GB - 9.000.000đ new White
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<a
|
||||
href=""
|
||||
class="block w-[130px] h-[40px] leading-[40px] m-[auto_0_auto_auto] text-base text-center text-white bg-orange-500 rounded hover:bg-orange-600"
|
||||
className="block w-[130px] h-[40px] leading-[40px] m-[auto_0_auto_auto] text-base text-center text-white bg-orange-500 rounded hover:bg-orange-600"
|
||||
>
|
||||
Liên hệ ngay
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item grid grid-cols-5 py-[10px] border-b-[1px] border-[#D9D9D9]">
|
||||
<div class="flex items-start supplier">
|
||||
<div class="logo mr-[10px]">
|
||||
<div class="w-[70px] h-[70px] p-[10px] block border border-[#F3F3F3] rounded-[4px]">
|
||||
<div className="item grid grid-cols-5 py-[10px] border-b-[1px] border-[#D9D9D9]">
|
||||
<div className="flex items-start supplier">
|
||||
<div className="logo mr-[10px]">
|
||||
<div className="w-[70px] h-[70px] p-[10px] block border border-[#F3F3F3] rounded-[4px]">
|
||||
<img
|
||||
src="/assets/images/logo-hacom.png"
|
||||
class="block w-full h-full object-contain m-[0_auto]"
|
||||
className="block w-full h-full object-contain m-[0_auto]"
|
||||
width="100%"
|
||||
height="100%"
|
||||
alt="hacom"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex items-center justify-center mt-2">
|
||||
<i class="icon_2025 map-4"></i>
|
||||
<span class="ml-[5px]">3km</span>
|
||||
<div className="flex items-center justify-center mt-2">
|
||||
<i className="icon_2025 map-4"></i>
|
||||
<span className="ml-[5px]">3km</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex items-center">
|
||||
<i class="icon-star star4"></i>
|
||||
<span class="ml-[5px] mt-[3px]">4.7</span>
|
||||
<div className="flex items-center">
|
||||
<i className="icon-star star4"></i>
|
||||
<span className="ml-[5px] mt-[3px]">4.7</span>
|
||||
</div>
|
||||
<a href="" class="text-[#1877F2] font-bold">
|
||||
<a href="" className="text-[#1877F2] font-bold">
|
||||
Hanoicomputer
|
||||
</a>
|
||||
<a href="" class="text-[#E85933] underline block">
|
||||
<a href="" className="text-[#E85933] underline block">
|
||||
Xem 7 cửa hàng
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ship">
|
||||
<div className="ship">
|
||||
<p>Miễn phí giao hàng</p>
|
||||
<p>
|
||||
Nhận giap hàng và lắp đặt từ 8h00-21:30 các ngày trong tuần kể cả
|
||||
@@ -211,26 +217,28 @@ export function SupplierListBox() {
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="price">
|
||||
<div class="flex items-center text-base">
|
||||
<div className="price">
|
||||
<div className="flex items-center text-base">
|
||||
<span>Giá:</span>
|
||||
<b class="ml-[5px] text-[#D80A00]">9.000.000đ - 20.000.000đ</b>
|
||||
<b className="ml-[5px] text-[#D80A00]">
|
||||
9.000.000đ - 20.000.000đ
|
||||
</b>
|
||||
</div>
|
||||
<b class="mt-2">Đã có VAT</b>
|
||||
<b className="mt-2">Đã có VAT</b>
|
||||
</div>
|
||||
|
||||
<div class="">
|
||||
<p class="name-pro pb-[10px] border-b-[1px] border-[#D9D9D9]">
|
||||
<div className="">
|
||||
<p className="name-pro pb-[10px] border-b-[1px] border-[#D9D9D9]">
|
||||
8GB - 9.000.000đ new White
|
||||
</p>
|
||||
<p class="name-pro py-[10px] border-b-[1px] border-[#D9D9D9]">
|
||||
<p className="name-pro py-[10px] border-b-[1px] border-[#D9D9D9]">
|
||||
8GB - 9.000.000đ new White
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<a
|
||||
href=""
|
||||
class="block w-[130px] h-[40px] leading-[40px] m-[auto_0_auto_auto] text-base text-center text-white bg-orange-500 rounded hover:bg-orange-600"
|
||||
className="block w-[130px] h-[40px] leading-[40px] m-[auto_0_auto_auto] text-base text-center text-white bg-orange-500 rounded hover:bg-orange-600"
|
||||
>
|
||||
Liên hệ ngay
|
||||
</a>
|
||||
@@ -241,7 +249,7 @@ export function SupplierListBox() {
|
||||
|
||||
<a
|
||||
href=""
|
||||
class="pt-3 block text-center text-[#FF7A00] text-xl hover:text-orange-600"
|
||||
className="pt-3 block text-center text-[#FF7A00] text-xl hover:text-orange-600"
|
||||
>
|
||||
Xem thêm
|
||||
</a>
|
||||
|
||||
@@ -4,6 +4,7 @@ import { Header } from "./components/header/Header";
|
||||
import { Footer } from "./components/footer/Footer";
|
||||
import { Home } from "./pages/Home/index.jsx";
|
||||
import { ProductDetail } from "./pages/product/ProductDetail";
|
||||
import { Buildpc } from "./pages/buildpc/Buildpc";
|
||||
import { NotFound } from "./pages/_404.jsx";
|
||||
|
||||
export function App() {
|
||||
@@ -14,6 +15,7 @@ export function App() {
|
||||
<Router>
|
||||
<Route path="/" component={Home} />
|
||||
<Route path="/product-detail" component={ProductDetail} />
|
||||
<Route path="/buildpc" component={Buildpc} />
|
||||
<Route default component={NotFound} />
|
||||
</Router>
|
||||
<Footer />
|
||||
|
||||
116
src/pages/buildpc/Buildpc.tsx
Normal file
116
src/pages/buildpc/Buildpc.tsx
Normal file
@@ -0,0 +1,116 @@
|
||||
import { CreateBuildpc } from "../../components/buildpc/CreateBuildpc";
|
||||
|
||||
export function Buildpc() {
|
||||
return (
|
||||
<div className="page-buildpc bg-[#F4F4F4] pb-[100px]">
|
||||
<div className="container">
|
||||
<div className="breadcrumb p-[12px_0]">
|
||||
<ol
|
||||
itemscope
|
||||
itemtype="http://schema.org/BreadcrumbList"
|
||||
className="ul flex flex-wrap items-center"
|
||||
>
|
||||
<li
|
||||
itemprop="itemListElement"
|
||||
itemscope
|
||||
itemtype="http://schema.org/ListItem"
|
||||
className="flex items-center pr-[12px]"
|
||||
>
|
||||
<a
|
||||
href="/template/homepage/homepage.html"
|
||||
itemprop="item"
|
||||
className="nopad-l flex items-center text-[#637381]"
|
||||
>
|
||||
<span itemprop="name">
|
||||
<span style="font-size: 0; display: none;">Trang chủ</span>
|
||||
<i className="icon_2025 home mr-[5px] mb-[5px]" />
|
||||
</span>
|
||||
</a>{" "}
|
||||
<i className="icon_2025 angle-right ml-[12px]" />
|
||||
<meta itemprop="position" content="1" />
|
||||
</li>
|
||||
<li
|
||||
itemprop="itemListElement"
|
||||
itemscope
|
||||
itemtype="http://schema.org/ListItem"
|
||||
className="flex items-center pr-[12px]"
|
||||
>
|
||||
<a href="/" itemprop="item" className="nopad-l flex items-center">
|
||||
<span itemprop="name">Tạo máy tính riêng của bạn</span>
|
||||
</a>
|
||||
<meta itemprop="position" content="2" />
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
{/* <!-- Action Bar --> */}
|
||||
<div className="flex gap-2 px-3 py-2.5 mt-3 text-base leading-none text-black bg-white rounded">
|
||||
<div className="w-[615px] h-[48px] rounded border border-solid border-neutral-200 flex items-center">
|
||||
<a className="w-[24px] ml-[10px]" href="javascript:void()">
|
||||
<i className="icon_2025 copy"></i>
|
||||
</a>
|
||||
<input
|
||||
type="text"
|
||||
className="w-full h-full p-[10px] outline-none"
|
||||
value="https://bestpc.vn/restricted.php"
|
||||
/>
|
||||
</div>
|
||||
<div className="w-[370px] h-[48px] rounded border border-solid border-neutral-200 flex items-center">
|
||||
<p className="ml-[10px] block whitespace-nowrap">Đặt tên:</p>
|
||||
<input
|
||||
type="text"
|
||||
className="w-full h-full p-[10px] outline-none"
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-3 gap-[10px] w-[calc(100%-615px-370px)]">
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
className="w-full block h-[48px] rounded border border-solid border-neutral-200 flex items-center justify-center hover:bg-[var(--color-global)] hover:text-white group"
|
||||
>
|
||||
<i className="icon_2025 history group-hover:brightness-0 group-hover:invert-[1]"></i>
|
||||
<span className="ml-[5px]">Lịch sử</span>
|
||||
</a>
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
className="w-full block h-[48px] rounded border border-solid border-neutral-200 flex items-center justify-center hover:bg-[var(--color-global)] hover:text-white group"
|
||||
>
|
||||
<i className="icon_2025 download group-hover:brightness-0 group-hover:invert-[1]"></i>
|
||||
<span className="ml-[5px]">Tải xuống</span>
|
||||
</a>
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
className="w-full block h-[48px] rounded border border-solid border-neutral-200 flex items-center justify-center hover:bg-[var(--color-global)] hover:text-white group"
|
||||
>
|
||||
<i className="icon_2025 return group-hover:brightness-0 group-hover:invert-[1]"></i>
|
||||
<span className="ml-[5px]">Làm mới</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white p-[15px]">
|
||||
<div className="flex items-center gap-2">
|
||||
<a
|
||||
href="/buildpc"
|
||||
className="px-6 py-2.5 text-center font-bold text-white bg-violet-900 rounded"
|
||||
>
|
||||
Bắt đầu tạo
|
||||
</a>
|
||||
<a
|
||||
href="/buildpc/compare"
|
||||
className="px-6 py-2.5 text-center font-bold text-stone-500 bg-zinc-100 rounded hover:text-white hover:bg-violet-900"
|
||||
>
|
||||
So sánh giá tại các cửa hàng
|
||||
</a>
|
||||
</div>
|
||||
{/* <!-- list button --> */}
|
||||
|
||||
<div className="content-tab" id="create-component">
|
||||
<CreateBuildpc />
|
||||
</div>
|
||||
|
||||
<div className="content-tab hidden" id="compare-component"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -4,7 +4,6 @@ import { SupplierListBox } from "../../components/product/SupplierListBox";
|
||||
import { ProductDescription } from "../../components/product/ProductDescription";
|
||||
import { MemberReview } from "../../components/product/MemberReview";
|
||||
import { ProductReview } from "../../components/product/ProductReview";
|
||||
import { FormReview } from "../../components/product/FormReview";
|
||||
|
||||
import { FreeMode, Navigation, Thumbs } from "swiper/modules";
|
||||
|
||||
@@ -15,9 +14,6 @@ export function ProductDetail() {
|
||||
|
||||
const [thumbsSwiper, setThumbsSwiper] = useState(null);
|
||||
|
||||
const prevButtonRef = useRef(null);
|
||||
const nextButtonRef = useRef(null);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="box-product-detail bg-[#F4F4F4] pb-[100px]">
|
||||
@@ -118,8 +114,8 @@ export function ProductDetail() {
|
||||
spaceBetween={15}
|
||||
slidesPerView={5}
|
||||
navigation={{
|
||||
prevEl: prevButtonRef.current, // Link to the 'prev' button
|
||||
nextEl: nextButtonRef.current, // Link to the 'next' button
|
||||
prevEl: "#btn-slider-small .swiper-button-prev", // Link to the 'prev' button
|
||||
nextEl: "#btn-slider-small .swiper-button-next", // Link to the 'next' button
|
||||
}}
|
||||
freeMode={true}
|
||||
watchSlidesProgress={true}
|
||||
@@ -152,25 +148,9 @@ export function ProductDetail() {
|
||||
<img src="/assets/images/small-product-detail.png" alt="" />
|
||||
</SwiperSlide>
|
||||
</Swiper>
|
||||
<div className="btn-small swiper-navigation">
|
||||
<button
|
||||
ref={prevButtonRef}
|
||||
className="swiper-button-prev"
|
||||
style={{
|
||||
position: "absolute",
|
||||
left: "-15px",
|
||||
zIndex: 10,
|
||||
}}
|
||||
></button>
|
||||
<button
|
||||
ref={nextButtonRef}
|
||||
className="swiper-button-next"
|
||||
style={{
|
||||
position: "absolute",
|
||||
right: "-20px",
|
||||
zIndex: 10,
|
||||
}}
|
||||
></button>
|
||||
<div className="btn-small" id="btn-slider-small">
|
||||
<div className="swiper-button-next right-[-15px] w-[30px] h-[30px]"></div>
|
||||
<div className="swiper-button-prev left-[-15px] w-[30px] h-[30px]"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -274,18 +254,18 @@ export function ProductDetail() {
|
||||
<ProductDescription />
|
||||
{/* thông tin sản phẩm */}
|
||||
|
||||
<div class="mt-5 bg-white rounded-[8px] p-[15px]">
|
||||
<div class="flex items-center justify-between mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]">
|
||||
<h3 class="text-xl font-bold">Sản phẩm tương tự</h3>
|
||||
<div className="mt-5 bg-white rounded-[8px] p-[15px]">
|
||||
<div className="flex items-center justify-between mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]">
|
||||
<h3 className="text-xl font-bold">Sản phẩm tương tự</h3>
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
class="text-[#462F91] flex items-center justify-center w-[130px] h-[32px] leading-[32px] border-[#462F91] border-[1px] rounded-[4px] hover:bg-[#462F91] hover:text-white group"
|
||||
className="text-[#462F91] flex items-center justify-center w-[130px] h-[32px] leading-[32px] border-[#462F91] border-[1px] rounded-[4px] hover:bg-[#462F91] hover:text-white group"
|
||||
>
|
||||
<span>Xem tất cả</span>
|
||||
<i class="icon_2025 mouse ml-[5px] group-hover:brightness-0 group-hover:invert-[1]"></i>
|
||||
<i className="icon_2025 mouse ml-[5px] group-hover:brightness-0 group-hover:invert-[1]"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div class="relative mt-[15px]">
|
||||
<div className="relative mt-[15px]">
|
||||
<Swiper
|
||||
slidesPerView={5}
|
||||
spaceBetween={15}
|
||||
@@ -299,308 +279,308 @@ export function ProductDetail() {
|
||||
className="product-list swiper relative"
|
||||
>
|
||||
<SwiperSlide>
|
||||
<div class="product-item">
|
||||
<a href="" class="product-image">
|
||||
<div className="product-item">
|
||||
<a href="" className="product-image">
|
||||
<img
|
||||
src="/assets/images/box-image.png"
|
||||
alt="Laptop Dell"
|
||||
/>
|
||||
</a>
|
||||
<div class="info-product">
|
||||
<a href="" class="name-product line-clamp-2">
|
||||
<div className="info-product">
|
||||
<a href="" className="name-product line-clamp-2">
|
||||
Laptop văn phòng Dell RAM 8G Core i7
|
||||
</a>
|
||||
<div class="summary line-clamp-1">
|
||||
<div className="summary line-clamp-1">
|
||||
Intel Core i5 / 8GB / 256GB / SSD
|
||||
</div>
|
||||
<div class="locahost-pro flex items-center mb-[5px]">
|
||||
<i class="icon_2025 map-3"></i>
|
||||
<span class="text-[#595959] ml-[5px] mt-[3px]">
|
||||
<div className="locahost-pro flex items-center mb-[5px]">
|
||||
<i className="icon_2025 map-3"></i>
|
||||
<span className="text-[#595959] ml-[5px] mt-[3px]">
|
||||
Quận Thanh Xuân
|
||||
</span>
|
||||
</div>
|
||||
<div class="time-pro flex items-center mb-[5px]">
|
||||
<i class="icon_2025 time-gray"></i>
|
||||
<div class="flex items-center mt-[1px]">
|
||||
<span class="text-[#595959] ml-[5px] mt-[3px]">
|
||||
<div className="time-pro flex items-center mb-[5px]">
|
||||
<i className="icon_2025 time-gray"></i>
|
||||
<div className="flex items-center mt-[1px]">
|
||||
<span className="text-[#595959] ml-[5px] mt-[3px]">
|
||||
11/04/2025
|
||||
</span>
|
||||
<span class="ml-[5px]">|</span>
|
||||
<span class="text-[#595959] ml-[5px] mt-[3px]">
|
||||
<span className="ml-[5px]">|</span>
|
||||
<span className="text-[#595959] ml-[5px] mt-[3px]">
|
||||
Còn 01 ngày
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="price">15.000.000đ</div>
|
||||
<div class="user-pro flex items-center">
|
||||
<div className="price">15.000.000đ</div>
|
||||
<div className="user-pro flex items-center">
|
||||
<img
|
||||
src="/assets/images/avartar.png"
|
||||
class="w-[24px] h-[24px] block rounded-[50%]"
|
||||
className="w-[24px] h-[24px] block rounded-[50%]"
|
||||
width="24px"
|
||||
height="24px"
|
||||
alt="avartar"
|
||||
/>
|
||||
<b class="ml-[7px]">Thanh Mai</b>
|
||||
<b className="ml-[7px]">Thanh Mai</b>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<div class="product-item">
|
||||
<a href="" class="product-image">
|
||||
<div className="product-item">
|
||||
<a href="" className="product-image">
|
||||
<img
|
||||
src="/assets/images/box-image.png"
|
||||
alt="Laptop Dell"
|
||||
/>
|
||||
</a>
|
||||
<div class="info-product">
|
||||
<a href="" class="name-product line-clamp-2">
|
||||
<div className="info-product">
|
||||
<a href="" className="name-product line-clamp-2">
|
||||
Laptop văn phòng Dell RAM 8G Core i7
|
||||
</a>
|
||||
<div class="summary line-clamp-1">
|
||||
<div className="summary line-clamp-1">
|
||||
Intel Core i5 / 8GB / 256GB / SSD
|
||||
</div>
|
||||
<div class="locahost-pro flex items-center mb-[5px]">
|
||||
<i class="icon_2025 map-3"></i>
|
||||
<span class="text-[#595959] ml-[5px] mt-[3px]">
|
||||
<div className="locahost-pro flex items-center mb-[5px]">
|
||||
<i className="icon_2025 map-3"></i>
|
||||
<span className="text-[#595959] ml-[5px] mt-[3px]">
|
||||
Quận Thanh Xuân
|
||||
</span>
|
||||
</div>
|
||||
<div class="time-pro flex items-center mb-[5px]">
|
||||
<i class="icon_2025 time-gray"></i>
|
||||
<div class="flex items-center mt-[1px]">
|
||||
<span class="text-[#595959] ml-[5px] mt-[3px]">
|
||||
<div className="time-pro flex items-center mb-[5px]">
|
||||
<i className="icon_2025 time-gray"></i>
|
||||
<div className="flex items-center mt-[1px]">
|
||||
<span className="text-[#595959] ml-[5px] mt-[3px]">
|
||||
11/04/2025
|
||||
</span>
|
||||
<span class="ml-[5px]">|</span>
|
||||
<span class="text-[#595959] ml-[5px] mt-[3px]">
|
||||
<span className="ml-[5px]">|</span>
|
||||
<span className="text-[#595959] ml-[5px] mt-[3px]">
|
||||
Còn 01 ngày
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="price">15.000.000đ</div>
|
||||
<div class="user-pro flex items-center">
|
||||
<div className="price">15.000.000đ</div>
|
||||
<div className="user-pro flex items-center">
|
||||
<img
|
||||
src="/assets/images/avartar.png"
|
||||
class="w-[24px] h-[24px] block rounded-[50%]"
|
||||
className="w-[24px] h-[24px] block rounded-[50%]"
|
||||
width="24px"
|
||||
height="24px"
|
||||
alt="avartar"
|
||||
/>
|
||||
<b class="ml-[7px]">Thanh Mai</b>
|
||||
<b className="ml-[7px]">Thanh Mai</b>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<div class="product-item">
|
||||
<a href="" class="product-image">
|
||||
<div className="product-item">
|
||||
<a href="" className="product-image">
|
||||
<img
|
||||
src="/assets/images/box-image.png"
|
||||
alt="Laptop Dell"
|
||||
/>
|
||||
</a>
|
||||
<div class="info-product">
|
||||
<a href="" class="name-product line-clamp-2">
|
||||
<div className="info-product">
|
||||
<a href="" className="name-product line-clamp-2">
|
||||
Laptop văn phòng Dell RAM 8G Core i7
|
||||
</a>
|
||||
<div class="summary line-clamp-1">
|
||||
<div className="summary line-clamp-1">
|
||||
Intel Core i5 / 8GB / 256GB / SSD
|
||||
</div>
|
||||
<div class="locahost-pro flex items-center mb-[5px]">
|
||||
<i class="icon_2025 map-3"></i>
|
||||
<span class="text-[#595959] ml-[5px] mt-[3px]">
|
||||
<div className="locahost-pro flex items-center mb-[5px]">
|
||||
<i className="icon_2025 map-3"></i>
|
||||
<span className="text-[#595959] ml-[5px] mt-[3px]">
|
||||
Quận Thanh Xuân
|
||||
</span>
|
||||
</div>
|
||||
<div class="time-pro flex items-center mb-[5px]">
|
||||
<i class="icon_2025 time-gray"></i>
|
||||
<div class="flex items-center mt-[1px]">
|
||||
<span class="text-[#595959] ml-[5px] mt-[3px]">
|
||||
<div className="time-pro flex items-center mb-[5px]">
|
||||
<i className="icon_2025 time-gray"></i>
|
||||
<div className="flex items-center mt-[1px]">
|
||||
<span className="text-[#595959] ml-[5px] mt-[3px]">
|
||||
11/04/2025
|
||||
</span>
|
||||
<span class="ml-[5px]">|</span>
|
||||
<span class="text-[#595959] ml-[5px] mt-[3px]">
|
||||
<span className="ml-[5px]">|</span>
|
||||
<span className="text-[#595959] ml-[5px] mt-[3px]">
|
||||
Còn 01 ngày
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="price">15.000.000đ</div>
|
||||
<div class="user-pro flex items-center">
|
||||
<div className="price">15.000.000đ</div>
|
||||
<div className="user-pro flex items-center">
|
||||
<img
|
||||
src="/assets/images/avartar.png"
|
||||
class="w-[24px] h-[24px] block rounded-[50%]"
|
||||
className="w-[24px] h-[24px] block rounded-[50%]"
|
||||
width="24px"
|
||||
height="24px"
|
||||
alt="avartar"
|
||||
/>
|
||||
<b class="ml-[7px]">Thanh Mai</b>
|
||||
<b className="ml-[7px]">Thanh Mai</b>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<div class="product-item">
|
||||
<a href="" class="product-image">
|
||||
<div className="product-item">
|
||||
<a href="" className="product-image">
|
||||
<img
|
||||
src="/assets/images/box-image.png"
|
||||
alt="Laptop Dell"
|
||||
/>
|
||||
</a>
|
||||
<div class="info-product">
|
||||
<a href="" class="name-product line-clamp-2">
|
||||
<div className="info-product">
|
||||
<a href="" className="name-product line-clamp-2">
|
||||
Laptop văn phòng Dell RAM 8G Core i7
|
||||
</a>
|
||||
<div class="summary line-clamp-1">
|
||||
<div className="summary line-clamp-1">
|
||||
Intel Core i5 / 8GB / 256GB / SSD
|
||||
</div>
|
||||
<div class="locahost-pro flex items-center mb-[5px]">
|
||||
<i class="icon_2025 map-3"></i>
|
||||
<span class="text-[#595959] ml-[5px] mt-[3px]">
|
||||
<div className="locahost-pro flex items-center mb-[5px]">
|
||||
<i className="icon_2025 map-3"></i>
|
||||
<span className="text-[#595959] ml-[5px] mt-[3px]">
|
||||
Quận Thanh Xuân
|
||||
</span>
|
||||
</div>
|
||||
<div class="time-pro flex items-center mb-[5px]">
|
||||
<i class="icon_2025 time-gray"></i>
|
||||
<div class="flex items-center mt-[1px]">
|
||||
<span class="text-[#595959] ml-[5px] mt-[3px]">
|
||||
<div className="time-pro flex items-center mb-[5px]">
|
||||
<i className="icon_2025 time-gray"></i>
|
||||
<div className="flex items-center mt-[1px]">
|
||||
<span className="text-[#595959] ml-[5px] mt-[3px]">
|
||||
11/04/2025
|
||||
</span>
|
||||
<span class="ml-[5px]">|</span>
|
||||
<span class="text-[#595959] ml-[5px] mt-[3px]">
|
||||
<span className="ml-[5px]">|</span>
|
||||
<span className="text-[#595959] ml-[5px] mt-[3px]">
|
||||
Còn 01 ngày
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="price">15.000.000đ</div>
|
||||
<div class="user-pro flex items-center">
|
||||
<div className="price">15.000.000đ</div>
|
||||
<div className="user-pro flex items-center">
|
||||
<img
|
||||
src="/assets/images/avartar.png"
|
||||
class="w-[24px] h-[24px] block rounded-[50%]"
|
||||
className="w-[24px] h-[24px] block rounded-[50%]"
|
||||
width="24px"
|
||||
height="24px"
|
||||
alt="avartar"
|
||||
/>
|
||||
<b class="ml-[7px]">Thanh Mai</b>
|
||||
<b className="ml-[7px]">Thanh Mai</b>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<div class="product-item">
|
||||
<a href="" class="product-image">
|
||||
<div className="product-item">
|
||||
<a href="" className="product-image">
|
||||
<img
|
||||
src="/assets/images/box-image.png"
|
||||
alt="Laptop Dell"
|
||||
/>
|
||||
</a>
|
||||
<div class="info-product">
|
||||
<a href="" class="name-product line-clamp-2">
|
||||
<div className="info-product">
|
||||
<a href="" className="name-product line-clamp-2">
|
||||
Laptop văn phòng Dell RAM 8G Core i7
|
||||
</a>
|
||||
<div class="summary line-clamp-1">
|
||||
<div className="summary line-clamp-1">
|
||||
Intel Core i5 / 8GB / 256GB / SSD
|
||||
</div>
|
||||
<div class="locahost-pro flex items-center mb-[5px]">
|
||||
<i class="icon_2025 map-3"></i>
|
||||
<span class="text-[#595959] ml-[5px] mt-[3px]">
|
||||
<div className="locahost-pro flex items-center mb-[5px]">
|
||||
<i className="icon_2025 map-3"></i>
|
||||
<span className="text-[#595959] ml-[5px] mt-[3px]">
|
||||
Quận Thanh Xuân
|
||||
</span>
|
||||
</div>
|
||||
<div class="time-pro flex items-center mb-[5px]">
|
||||
<i class="icon_2025 time-gray"></i>
|
||||
<div class="flex items-center mt-[1px]">
|
||||
<span class="text-[#595959] ml-[5px] mt-[3px]">
|
||||
<div className="time-pro flex items-center mb-[5px]">
|
||||
<i className="icon_2025 time-gray"></i>
|
||||
<div className="flex items-center mt-[1px]">
|
||||
<span className="text-[#595959] ml-[5px] mt-[3px]">
|
||||
11/04/2025
|
||||
</span>
|
||||
<span class="ml-[5px]">|</span>
|
||||
<span class="text-[#595959] ml-[5px] mt-[3px]">
|
||||
<span className="ml-[5px]">|</span>
|
||||
<span className="text-[#595959] ml-[5px] mt-[3px]">
|
||||
Còn 01 ngày
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="price">15.000.000đ</div>
|
||||
<div class="user-pro flex items-center">
|
||||
<div className="price">15.000.000đ</div>
|
||||
<div className="user-pro flex items-center">
|
||||
<img
|
||||
src="/assets/images/avartar.png"
|
||||
class="w-[24px] h-[24px] block rounded-[50%]"
|
||||
className="w-[24px] h-[24px] block rounded-[50%]"
|
||||
width="24px"
|
||||
height="24px"
|
||||
alt="avartar"
|
||||
/>
|
||||
<b class="ml-[7px]">Thanh Mai</b>
|
||||
<b className="ml-[7px]">Thanh Mai</b>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<div class="product-item">
|
||||
<a href="" class="product-image">
|
||||
<div className="product-item">
|
||||
<a href="" className="product-image">
|
||||
<img
|
||||
src="/assets/images/box-image.png"
|
||||
alt="Laptop Dell"
|
||||
/>
|
||||
</a>
|
||||
<div class="info-product">
|
||||
<a href="" class="name-product line-clamp-2">
|
||||
<div className="info-product">
|
||||
<a href="" className="name-product line-clamp-2">
|
||||
Laptop văn phòng Dell RAM 8G Core i7
|
||||
</a>
|
||||
<div class="summary line-clamp-1">
|
||||
<div className="summary line-clamp-1">
|
||||
Intel Core i5 / 8GB / 256GB / SSD
|
||||
</div>
|
||||
<div class="locahost-pro flex items-center mb-[5px]">
|
||||
<i class="icon_2025 map-3"></i>
|
||||
<span class="text-[#595959] ml-[5px] mt-[3px]">
|
||||
<div className="locahost-pro flex items-center mb-[5px]">
|
||||
<i className="icon_2025 map-3"></i>
|
||||
<span className="text-[#595959] ml-[5px] mt-[3px]">
|
||||
Quận Thanh Xuân
|
||||
</span>
|
||||
</div>
|
||||
<div class="time-pro flex items-center mb-[5px]">
|
||||
<i class="icon_2025 time-gray"></i>
|
||||
<div class="flex items-center mt-[1px]">
|
||||
<span class="text-[#595959] ml-[5px] mt-[3px]">
|
||||
<div className="time-pro flex items-center mb-[5px]">
|
||||
<i className="icon_2025 time-gray"></i>
|
||||
<div className="flex items-center mt-[1px]">
|
||||
<span className="text-[#595959] ml-[5px] mt-[3px]">
|
||||
11/04/2025
|
||||
</span>
|
||||
<span class="ml-[5px]">|</span>
|
||||
<span class="text-[#595959] ml-[5px] mt-[3px]">
|
||||
<span className="ml-[5px]">|</span>
|
||||
<span className="text-[#595959] ml-[5px] mt-[3px]">
|
||||
Còn 01 ngày
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="price">15.000.000đ</div>
|
||||
<div class="user-pro flex items-center">
|
||||
<div className="price">15.000.000đ</div>
|
||||
<div className="user-pro flex items-center">
|
||||
<img
|
||||
src="/assets/images/avartar.png"
|
||||
class="w-[24px] h-[24px] block rounded-[50%]"
|
||||
className="w-[24px] h-[24px] block rounded-[50%]"
|
||||
width="24px"
|
||||
height="24px"
|
||||
alt="avartar"
|
||||
/>
|
||||
<b class="ml-[7px]">Thanh Mai</b>
|
||||
<b className="ml-[7px]">Thanh Mai</b>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
</Swiper>
|
||||
<div class="btn-slider" id="js-product-similar-btn">
|
||||
<div class="swiper-button-next right-[-15px]"></div>
|
||||
<div class="swiper-button-prev left-[-15px]"></div>
|
||||
<div className="btn-slider" id="js-product-similar-btn">
|
||||
<div className="swiper-button-next right-[-15px]"></div>
|
||||
<div className="swiper-button-prev left-[-15px]"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* sản phẩm tương tự */}
|
||||
|
||||
<div class="mt-5 bg-white rounded-[8px] p-[15px]">
|
||||
<div class="flex items-center justify-between mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]">
|
||||
<h3 class="text-xl font-bold">Sản phẩm bạn có thể thích</h3>
|
||||
<div className="mt-5 bg-white rounded-[8px] p-[15px]">
|
||||
<div className="flex items-center justify-between mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]">
|
||||
<h3 className="text-xl font-bold">Sản phẩm bạn có thể thích</h3>
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
class="text-[#462F91] flex items-center justify-center w-[130px] h-[32px] leading-[32px] border-[#462F91] border-[1px] rounded-[4px] hover:bg-[#462F91] hover:text-white group"
|
||||
className="text-[#462F91] flex items-center justify-center w-[130px] h-[32px] leading-[32px] border-[#462F91] border-[1px] rounded-[4px] hover:bg-[#462F91] hover:text-white group"
|
||||
>
|
||||
<span>Xem tất cả</span>
|
||||
<i class="icon_2025 mouse ml-[5px] group-hover:brightness-0 group-hover:invert-[1]"></i>
|
||||
<i className="icon_2025 mouse ml-[5px] group-hover:brightness-0 group-hover:invert-[1]"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div class="relative mt-[15px]">
|
||||
<div className="relative mt-[15px]">
|
||||
<Swiper
|
||||
slidesPerView={5}
|
||||
spaceBetween={15}
|
||||
@@ -614,298 +594,297 @@ export function ProductDetail() {
|
||||
className="product-list swiper relative"
|
||||
>
|
||||
<SwiperSlide>
|
||||
<div class="product-item">
|
||||
<a href="" class="product-image">
|
||||
<div className="product-item">
|
||||
<a href="" className="product-image">
|
||||
<img
|
||||
src="/assets/images/box-image.png"
|
||||
alt="Laptop Dell"
|
||||
/>
|
||||
</a>
|
||||
<div class="info-product">
|
||||
<a href="" class="name-product line-clamp-2">
|
||||
<div className="info-product">
|
||||
<a href="" className="name-product line-clamp-2">
|
||||
Laptop văn phòng Dell RAM 8G Core i7
|
||||
</a>
|
||||
<div class="summary line-clamp-1">
|
||||
<div className="summary line-clamp-1">
|
||||
Intel Core i5 / 8GB / 256GB / SSD
|
||||
</div>
|
||||
<div class="locahost-pro flex items-center mb-[5px]">
|
||||
<i class="icon_2025 map-3"></i>
|
||||
<span class="text-[#595959] ml-[5px] mt-[3px]">
|
||||
<div className="locahost-pro flex items-center mb-[5px]">
|
||||
<i className="icon_2025 map-3"></i>
|
||||
<span className="text-[#595959] ml-[5px] mt-[3px]">
|
||||
Quận Thanh Xuân
|
||||
</span>
|
||||
</div>
|
||||
<div class="time-pro flex items-center mb-[5px]">
|
||||
<i class="icon_2025 time-gray"></i>
|
||||
<div class="flex items-center mt-[1px]">
|
||||
<span class="text-[#595959] ml-[5px] mt-[3px]">
|
||||
<div className="time-pro flex items-center mb-[5px]">
|
||||
<i className="icon_2025 time-gray"></i>
|
||||
<div className="flex items-center mt-[1px]">
|
||||
<span className="text-[#595959] ml-[5px] mt-[3px]">
|
||||
11/04/2025
|
||||
</span>
|
||||
<span class="ml-[5px]">|</span>
|
||||
<span class="text-[#595959] ml-[5px] mt-[3px]">
|
||||
<span className="ml-[5px]">|</span>
|
||||
<span className="text-[#595959] ml-[5px] mt-[3px]">
|
||||
Còn 01 ngày
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="price">15.000.000đ</div>
|
||||
<div class="user-pro flex items-center">
|
||||
<div className="price">15.000.000đ</div>
|
||||
<div className="user-pro flex items-center">
|
||||
<img
|
||||
src="/assets/images/avartar.png"
|
||||
class="w-[24px] h-[24px] block rounded-[50%]"
|
||||
className="w-[24px] h-[24px] block rounded-[50%]"
|
||||
width="24px"
|
||||
height="24px"
|
||||
alt="avartar"
|
||||
/>
|
||||
<b class="ml-[7px]">Thanh Mai</b>
|
||||
<b className="ml-[7px]">Thanh Mai</b>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<div class="product-item">
|
||||
<a href="" class="product-image">
|
||||
<div className="product-item">
|
||||
<a href="" className="product-image">
|
||||
<img
|
||||
src="/assets/images/box-image.png"
|
||||
alt="Laptop Dell"
|
||||
/>
|
||||
</a>
|
||||
<div class="info-product">
|
||||
<a href="" class="name-product line-clamp-2">
|
||||
<div className="info-product">
|
||||
<a href="" className="name-product line-clamp-2">
|
||||
Laptop văn phòng Dell RAM 8G Core i7
|
||||
</a>
|
||||
<div class="summary line-clamp-1">
|
||||
<div className="summary line-clamp-1">
|
||||
Intel Core i5 / 8GB / 256GB / SSD
|
||||
</div>
|
||||
<div class="locahost-pro flex items-center mb-[5px]">
|
||||
<i class="icon_2025 map-3"></i>
|
||||
<span class="text-[#595959] ml-[5px] mt-[3px]">
|
||||
<div className="locahost-pro flex items-center mb-[5px]">
|
||||
<i className="icon_2025 map-3"></i>
|
||||
<span className="text-[#595959] ml-[5px] mt-[3px]">
|
||||
Quận Thanh Xuân
|
||||
</span>
|
||||
</div>
|
||||
<div class="time-pro flex items-center mb-[5px]">
|
||||
<i class="icon_2025 time-gray"></i>
|
||||
<div class="flex items-center mt-[1px]">
|
||||
<span class="text-[#595959] ml-[5px] mt-[3px]">
|
||||
<div className="time-pro flex items-center mb-[5px]">
|
||||
<i className="icon_2025 time-gray"></i>
|
||||
<div className="flex items-center mt-[1px]">
|
||||
<span className="text-[#595959] ml-[5px] mt-[3px]">
|
||||
11/04/2025
|
||||
</span>
|
||||
<span class="ml-[5px]">|</span>
|
||||
<span class="text-[#595959] ml-[5px] mt-[3px]">
|
||||
<span className="ml-[5px]">|</span>
|
||||
<span className="text-[#595959] ml-[5px] mt-[3px]">
|
||||
Còn 01 ngày
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="price">15.000.000đ</div>
|
||||
<div class="user-pro flex items-center">
|
||||
<div className="price">15.000.000đ</div>
|
||||
<div className="user-pro flex items-center">
|
||||
<img
|
||||
src="/assets/images/avartar.png"
|
||||
class="w-[24px] h-[24px] block rounded-[50%]"
|
||||
className="w-[24px] h-[24px] block rounded-[50%]"
|
||||
width="24px"
|
||||
height="24px"
|
||||
alt="avartar"
|
||||
/>
|
||||
<b class="ml-[7px]">Thanh Mai</b>
|
||||
<b className="ml-[7px]">Thanh Mai</b>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<div class="product-item">
|
||||
<a href="" class="product-image">
|
||||
<div className="product-item">
|
||||
<a href="" className="product-image">
|
||||
<img
|
||||
src="/assets/images/box-image.png"
|
||||
alt="Laptop Dell"
|
||||
/>
|
||||
</a>
|
||||
<div class="info-product">
|
||||
<a href="" class="name-product line-clamp-2">
|
||||
<div className="info-product">
|
||||
<a href="" className="name-product line-clamp-2">
|
||||
Laptop văn phòng Dell RAM 8G Core i7
|
||||
</a>
|
||||
<div class="summary line-clamp-1">
|
||||
<div className="summary line-clamp-1">
|
||||
Intel Core i5 / 8GB / 256GB / SSD
|
||||
</div>
|
||||
<div class="locahost-pro flex items-center mb-[5px]">
|
||||
<i class="icon_2025 map-3"></i>
|
||||
<span class="text-[#595959] ml-[5px] mt-[3px]">
|
||||
<div className="locahost-pro flex items-center mb-[5px]">
|
||||
<i className="icon_2025 map-3"></i>
|
||||
<span className="text-[#595959] ml-[5px] mt-[3px]">
|
||||
Quận Thanh Xuân
|
||||
</span>
|
||||
</div>
|
||||
<div class="time-pro flex items-center mb-[5px]">
|
||||
<i class="icon_2025 time-gray"></i>
|
||||
<div class="flex items-center mt-[1px]">
|
||||
<span class="text-[#595959] ml-[5px] mt-[3px]">
|
||||
<div className="time-pro flex items-center mb-[5px]">
|
||||
<i className="icon_2025 time-gray"></i>
|
||||
<div className="flex items-center mt-[1px]">
|
||||
<span className="text-[#595959] ml-[5px] mt-[3px]">
|
||||
11/04/2025
|
||||
</span>
|
||||
<span class="ml-[5px]">|</span>
|
||||
<span class="text-[#595959] ml-[5px] mt-[3px]">
|
||||
<span className="ml-[5px]">|</span>
|
||||
<span className="text-[#595959] ml-[5px] mt-[3px]">
|
||||
Còn 01 ngày
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="price">15.000.000đ</div>
|
||||
<div class="user-pro flex items-center">
|
||||
<div className="price">15.000.000đ</div>
|
||||
<div className="user-pro flex items-center">
|
||||
<img
|
||||
src="/assets/images/avartar.png"
|
||||
class="w-[24px] h-[24px] block rounded-[50%]"
|
||||
className="w-[24px] h-[24px] block rounded-[50%]"
|
||||
width="24px"
|
||||
height="24px"
|
||||
alt="avartar"
|
||||
/>
|
||||
<b class="ml-[7px]">Thanh Mai</b>
|
||||
<b className="ml-[7px]">Thanh Mai</b>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<div class="product-item">
|
||||
<a href="" class="product-image">
|
||||
<div className="product-item">
|
||||
<a href="" className="product-image">
|
||||
<img
|
||||
src="/assets/images/box-image.png"
|
||||
alt="Laptop Dell"
|
||||
/>
|
||||
</a>
|
||||
<div class="info-product">
|
||||
<a href="" class="name-product line-clamp-2">
|
||||
<div className="info-product">
|
||||
<a href="" className="name-product line-clamp-2">
|
||||
Laptop văn phòng Dell RAM 8G Core i7
|
||||
</a>
|
||||
<div class="summary line-clamp-1">
|
||||
<div className="summary line-clamp-1">
|
||||
Intel Core i5 / 8GB / 256GB / SSD
|
||||
</div>
|
||||
<div class="locahost-pro flex items-center mb-[5px]">
|
||||
<i class="icon_2025 map-3"></i>
|
||||
<span class="text-[#595959] ml-[5px] mt-[3px]">
|
||||
<div className="locahost-pro flex items-center mb-[5px]">
|
||||
<i className="icon_2025 map-3"></i>
|
||||
<span className="text-[#595959] ml-[5px] mt-[3px]">
|
||||
Quận Thanh Xuân
|
||||
</span>
|
||||
</div>
|
||||
<div class="time-pro flex items-center mb-[5px]">
|
||||
<i class="icon_2025 time-gray"></i>
|
||||
<div class="flex items-center mt-[1px]">
|
||||
<span class="text-[#595959] ml-[5px] mt-[3px]">
|
||||
<div className="time-pro flex items-center mb-[5px]">
|
||||
<i className="icon_2025 time-gray"></i>
|
||||
<div className="flex items-center mt-[1px]">
|
||||
<span className="text-[#595959] ml-[5px] mt-[3px]">
|
||||
11/04/2025
|
||||
</span>
|
||||
<span class="ml-[5px]">|</span>
|
||||
<span class="text-[#595959] ml-[5px] mt-[3px]">
|
||||
<span className="ml-[5px]">|</span>
|
||||
<span className="text-[#595959] ml-[5px] mt-[3px]">
|
||||
Còn 01 ngày
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="price">15.000.000đ</div>
|
||||
<div class="user-pro flex items-center">
|
||||
<div className="price">15.000.000đ</div>
|
||||
<div className="user-pro flex items-center">
|
||||
<img
|
||||
src="/assets/images/avartar.png"
|
||||
class="w-[24px] h-[24px] block rounded-[50%]"
|
||||
className="w-[24px] h-[24px] block rounded-[50%]"
|
||||
width="24px"
|
||||
height="24px"
|
||||
alt="avartar"
|
||||
/>
|
||||
<b class="ml-[7px]">Thanh Mai</b>
|
||||
<b className="ml-[7px]">Thanh Mai</b>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<div class="product-item">
|
||||
<a href="" class="product-image">
|
||||
<div className="product-item">
|
||||
<a href="" className="product-image">
|
||||
<img
|
||||
src="/assets/images/box-image.png"
|
||||
alt="Laptop Dell"
|
||||
/>
|
||||
</a>
|
||||
<div class="info-product">
|
||||
<a href="" class="name-product line-clamp-2">
|
||||
<div className="info-product">
|
||||
<a href="" className="name-product line-clamp-2">
|
||||
Laptop văn phòng Dell RAM 8G Core i7
|
||||
</a>
|
||||
<div class="summary line-clamp-1">
|
||||
<div className="summary line-clamp-1">
|
||||
Intel Core i5 / 8GB / 256GB / SSD
|
||||
</div>
|
||||
<div class="locahost-pro flex items-center mb-[5px]">
|
||||
<i class="icon_2025 map-3"></i>
|
||||
<span class="text-[#595959] ml-[5px] mt-[3px]">
|
||||
<div className="locahost-pro flex items-center mb-[5px]">
|
||||
<i className="icon_2025 map-3"></i>
|
||||
<span className="text-[#595959] ml-[5px] mt-[3px]">
|
||||
Quận Thanh Xuân
|
||||
</span>
|
||||
</div>
|
||||
<div class="time-pro flex items-center mb-[5px]">
|
||||
<i class="icon_2025 time-gray"></i>
|
||||
<div class="flex items-center mt-[1px]">
|
||||
<span class="text-[#595959] ml-[5px] mt-[3px]">
|
||||
<div className="time-pro flex items-center mb-[5px]">
|
||||
<i className="icon_2025 time-gray"></i>
|
||||
<div className="flex items-center mt-[1px]">
|
||||
<span className="text-[#595959] ml-[5px] mt-[3px]">
|
||||
11/04/2025
|
||||
</span>
|
||||
<span class="ml-[5px]">|</span>
|
||||
<span class="text-[#595959] ml-[5px] mt-[3px]">
|
||||
<span className="ml-[5px]">|</span>
|
||||
<span className="text-[#595959] ml-[5px] mt-[3px]">
|
||||
Còn 01 ngày
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="price">15.000.000đ</div>
|
||||
<div class="user-pro flex items-center">
|
||||
<div className="price">15.000.000đ</div>
|
||||
<div className="user-pro flex items-center">
|
||||
<img
|
||||
src="/assets/images/avartar.png"
|
||||
class="w-[24px] h-[24px] block rounded-[50%]"
|
||||
className="w-[24px] h-[24px] block rounded-[50%]"
|
||||
width="24px"
|
||||
height="24px"
|
||||
alt="avartar"
|
||||
/>
|
||||
<b class="ml-[7px]">Thanh Mai</b>
|
||||
<b className="ml-[7px]">Thanh Mai</b>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<div class="product-item">
|
||||
<a href="" class="product-image">
|
||||
<div className="product-item">
|
||||
<a href="" className="product-image">
|
||||
<img
|
||||
src="/assets/images/box-image.png"
|
||||
alt="Laptop Dell"
|
||||
/>
|
||||
</a>
|
||||
<div class="info-product">
|
||||
<a href="" class="name-product line-clamp-2">
|
||||
<div className="info-product">
|
||||
<a href="" className="name-product line-clamp-2">
|
||||
Laptop văn phòng Dell RAM 8G Core i7
|
||||
</a>
|
||||
<div class="summary line-clamp-1">
|
||||
<div className="summary line-clamp-1">
|
||||
Intel Core i5 / 8GB / 256GB / SSD
|
||||
</div>
|
||||
<div class="locahost-pro flex items-center mb-[5px]">
|
||||
<i class="icon_2025 map-3"></i>
|
||||
<span class="text-[#595959] ml-[5px] mt-[3px]">
|
||||
<div className="locahost-pro flex items-center mb-[5px]">
|
||||
<i className="icon_2025 map-3"></i>
|
||||
<span className="text-[#595959] ml-[5px] mt-[3px]">
|
||||
Quận Thanh Xuân
|
||||
</span>
|
||||
</div>
|
||||
<div class="time-pro flex items-center mb-[5px]">
|
||||
<i class="icon_2025 time-gray"></i>
|
||||
<div class="flex items-center mt-[1px]">
|
||||
<span class="text-[#595959] ml-[5px] mt-[3px]">
|
||||
<div className="time-pro flex items-center mb-[5px]">
|
||||
<i className="icon_2025 time-gray"></i>
|
||||
<div className="flex items-center mt-[1px]">
|
||||
<span className="text-[#595959] ml-[5px] mt-[3px]">
|
||||
11/04/2025
|
||||
</span>
|
||||
<span class="ml-[5px]">|</span>
|
||||
<span class="text-[#595959] ml-[5px] mt-[3px]">
|
||||
<span className="ml-[5px]">|</span>
|
||||
<span className="text-[#595959] ml-[5px] mt-[3px]">
|
||||
Còn 01 ngày
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="price">15.000.000đ</div>
|
||||
<div class="user-pro flex items-center">
|
||||
<div className="price">15.000.000đ</div>
|
||||
<div className="user-pro flex items-center">
|
||||
<img
|
||||
src="/assets/images/avartar.png"
|
||||
class="w-[24px] h-[24px] block rounded-[50%]"
|
||||
className="w-[24px] h-[24px] block rounded-[50%]"
|
||||
width="24px"
|
||||
height="24px"
|
||||
alt="avartar"
|
||||
/>
|
||||
<b class="ml-[7px]">Thanh Mai</b>
|
||||
<b className="ml-[7px]">Thanh Mai</b>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
</Swiper>
|
||||
<div class="btn-slider" id="js-product-like-btn">
|
||||
<div class="swiper-button-next right-[-15px]"></div>
|
||||
<div class="swiper-button-prev left-[-15px]"></div>
|
||||
<div className="btn-slider" id="js-product-like-btn">
|
||||
<div className="swiper-button-next right-[-15px]"></div>
|
||||
<div className="swiper-button-prev left-[-15px]"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* sản phẩm yêu thích */}
|
||||
</div>
|
||||
</div>
|
||||
<FormReview />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user