upload 13/5
@@ -1,41 +0,0 @@
|
||||
@font-face {
|
||||
font-family: "Shopee";
|
||||
font-display: swap;
|
||||
src: url(../font//FVHShopeeText-Bold.otf);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Shopee Bold";
|
||||
font-display: swap;
|
||||
src: url(../font/ShopeeDisplay-Bold.ttf);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Shopee Regular";
|
||||
font-display: swap;
|
||||
src: url(../font/ShopeeDisplay-Regular.ttf);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Shopee Medium";
|
||||
font-display: swap;
|
||||
src: url(../font/ShopeeDisplay-Medium.ttf);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Shopee Light";
|
||||
font-display: swap;
|
||||
src: url(../font/ShopeeDisplay-Light.ttf);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Shopee ExtraBold";
|
||||
font-display: swap;
|
||||
src: url(../font/ShopeeDisplay-ExtraBold.ttf);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Shopee Black";
|
||||
font-display: swap;
|
||||
src: url(../font/ShopeeDisplay-Black.ttf);
|
||||
}
|
||||
|
Before Width: | Height: | Size: 35 KiB |
|
Before Width: | Height: | Size: 36 KiB |
|
Before Width: | Height: | Size: 31 KiB |
|
Before Width: | Height: | Size: 3.5 KiB |
|
Before Width: | Height: | Size: 20 KiB |
|
Before Width: | Height: | Size: 620 KiB |
|
Before Width: | Height: | Size: 136 KiB |
|
Before Width: | Height: | Size: 454 KiB |
|
Before Width: | Height: | Size: 464 KiB |
|
Before Width: | Height: | Size: 415 KiB |
|
Before Width: | Height: | Size: 488 KiB |
|
Before Width: | Height: | Size: 397 KiB |
|
Before Width: | Height: | Size: 386 KiB |
|
Before Width: | Height: | Size: 268 KiB |
|
Before Width: | Height: | Size: 1.5 MiB |
|
Before Width: | Height: | Size: 262 KiB |
|
Before Width: | Height: | Size: 477 KiB |
|
Before Width: | Height: | Size: 72 KiB |
|
Before Width: | Height: | Size: 87 KiB |
|
Before Width: | Height: | Size: 88 KiB |
|
Before Width: | Height: | Size: 275 KiB |
|
Before Width: | Height: | Size: 83 KiB |
|
Before Width: | Height: | Size: 357 KiB |
|
Before Width: | Height: | Size: 45 KiB |
|
Before Width: | Height: | Size: 43 KiB |
|
Before Width: | Height: | Size: 4.8 KiB |
|
Before Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 7.6 KiB |
|
Before Width: | Height: | Size: 7.6 KiB |
|
Before Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 17 KiB |
|
Before Width: | Height: | Size: 7.8 KiB |
|
Before Width: | Height: | Size: 9.5 KiB |
|
Before Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 20 KiB |
|
Before Width: | Height: | Size: 18 KiB |
|
Before Width: | Height: | Size: 4.2 KiB |
|
Before Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 9.1 KiB |
|
Before Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 4.8 KiB |
|
Before Width: | Height: | Size: 516 B |
|
Before Width: | Height: | Size: 786 B |
|
Before Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 55 KiB |
|
Before Width: | Height: | Size: 2.0 KiB |
|
Before Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 1006 B |
|
Before Width: | Height: | Size: 19 KiB |
|
Before Width: | Height: | Size: 3.6 KiB |
|
Before Width: | Height: | Size: 28 KiB |
|
Before Width: | Height: | Size: 6.8 KiB |
|
Before Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 30 KiB |
|
Before Width: | Height: | Size: 5.3 KiB |
|
Before Width: | Height: | Size: 543 KiB |
|
Before Width: | Height: | Size: 352 KiB |
|
Before Width: | Height: | Size: 452 KiB |
|
Before Width: | Height: | Size: 464 KiB |
|
Before Width: | Height: | Size: 452 KiB |
|
Before Width: | Height: | Size: 536 KiB |
|
Before Width: | Height: | Size: 942 B |
|
Before Width: | Height: | Size: 39 KiB |
@@ -2,7 +2,7 @@ import { render } from "preact";
|
||||
import { LocationProvider, Router, Route } from "preact-iso";
|
||||
|
||||
import { Home } from "./pages/Home/index.jsx";
|
||||
import { ProductDetail } from "./pages/product/ProductPage.jsx";
|
||||
import { ProductDetail } from "./pages/product/ProductPage";
|
||||
import { NotFound } from "./pages/_404.jsx";
|
||||
|
||||
export function App() {
|
||||
|
||||
@@ -1,3 +1,8 @@
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
import { Swiper, SwiperSlide } from "swiper/react";
|
||||
|
||||
import { FreeMode, Navigation, Thumbs } from "swiper/modules";
|
||||
|
||||
export function Home() {
|
||||
return (
|
||||
<main class="flex overflow-hidden flex-col items-center bg-white">
|
||||
@@ -8,7 +13,7 @@ export function Home() {
|
||||
<div class="flex items-center justify-between">
|
||||
<a href="/" class="logo block mr-[100px]">
|
||||
<img
|
||||
src="/src/assets/images/logo.png"
|
||||
src="/assets/images/logo.png"
|
||||
class="object-contain w-[173px] h-[45px] block"
|
||||
alt="Location icon"
|
||||
/>
|
||||
@@ -872,7 +877,7 @@ export function Home() {
|
||||
class="block w-full h-full rounded-[12px] overflow-hidden"
|
||||
>
|
||||
<img
|
||||
src="/src/assets/images/banner-slider.png"
|
||||
src="/assets/images/banner-slider.png"
|
||||
class="block w-full h-full object-contain"
|
||||
width="100%"
|
||||
height="100%"
|
||||
@@ -886,7 +891,7 @@ export function Home() {
|
||||
class="block w-full h-full rounded-[12px] overflow-hidden"
|
||||
>
|
||||
<img
|
||||
src="/src/assets/images/banner-slider.png"
|
||||
src="/assets/images/banner-slider.png"
|
||||
class="block w-full h-full object-contain"
|
||||
width="100%"
|
||||
height="100%"
|
||||
@@ -900,7 +905,7 @@ export function Home() {
|
||||
class="block w-full h-full rounded-[12px] overflow-hidden"
|
||||
>
|
||||
<img
|
||||
src="/src/assets/images/banner-slider.png"
|
||||
src="/assets/images/banner-slider.png"
|
||||
class="block w-full h-full object-contain"
|
||||
width="100%"
|
||||
height="100%"
|
||||
@@ -914,7 +919,7 @@ export function Home() {
|
||||
class="block w-full h-full rounded-[12px] overflow-hidden"
|
||||
>
|
||||
<img
|
||||
src="/src/assets/images/banner-slider.png"
|
||||
src="/assets/images/banner-slider.png"
|
||||
class="block w-full h-full object-contain"
|
||||
width="100%"
|
||||
height="100%"
|
||||
@@ -932,7 +937,7 @@ export function Home() {
|
||||
class="item relative effect-image block rounded-[12px] overflow-hidden"
|
||||
>
|
||||
<img
|
||||
src="/src/assets/images/banner-right-slider-1.png"
|
||||
src="/assets/images/banner-right-slider-1.png"
|
||||
class="block w-full h-full object-contain transition-all duration-500 ease-in-out"
|
||||
width="100%"
|
||||
height="100%"
|
||||
@@ -944,7 +949,7 @@ export function Home() {
|
||||
class="item block effect-image rounded-[12px] overflow-hidden"
|
||||
>
|
||||
<img
|
||||
src="/src/assets/images/banner-right-slider-2.png"
|
||||
src="/assets/images/banner-right-slider-2.png"
|
||||
class="block w-full h-full object-contain"
|
||||
width="100%"
|
||||
height="100%"
|
||||
@@ -956,7 +961,7 @@ export function Home() {
|
||||
class="item block effect-image rounded-[12px] overflow-hidden"
|
||||
>
|
||||
<img
|
||||
src="/src/assets/images/banner-right-slider-3.png"
|
||||
src="/assets/images/banner-right-slider-3.png"
|
||||
class="block w-full h-full object-contain"
|
||||
width="100%"
|
||||
height="100%"
|
||||
@@ -968,7 +973,7 @@ export function Home() {
|
||||
class="item block effect-image rounded-[12px] overflow-hidden"
|
||||
>
|
||||
<img
|
||||
src="/src/assets/images/banner-right-slider-4.png"
|
||||
src="/assets/images/banner-right-slider-4.png"
|
||||
class="block w-full h-full object-contain"
|
||||
width="100%"
|
||||
height="100%"
|
||||
@@ -1032,7 +1037,7 @@ export function Home() {
|
||||
<div class="product-item">
|
||||
<a href="" class="product-image">
|
||||
<img
|
||||
src="/src/assets/images/box-image.png"
|
||||
src="/assets/images/box-image.png"
|
||||
alt="Laptop Dell"
|
||||
/>
|
||||
<div class="box-saleoff">-20%</div>
|
||||
@@ -1059,7 +1064,7 @@ export function Home() {
|
||||
<div class="product-item">
|
||||
<a href="" class="product-image">
|
||||
<img
|
||||
src="/src/assets/images/box-image.png"
|
||||
src="/assets/images/box-image.png"
|
||||
alt="Laptop Dell"
|
||||
/>
|
||||
<div class="box-saleoff">-20%</div>
|
||||
@@ -1086,7 +1091,7 @@ export function Home() {
|
||||
<div class="product-item">
|
||||
<a href="" class="product-image">
|
||||
<img
|
||||
src="/src/assets/images/box-image.png"
|
||||
src="/assets/images/box-image.png"
|
||||
alt="Laptop Dell"
|
||||
/>
|
||||
<div class="box-saleoff">-20%</div>
|
||||
@@ -1113,7 +1118,7 @@ export function Home() {
|
||||
<div class="product-item">
|
||||
<a href="" class="product-image">
|
||||
<img
|
||||
src="/src/assets/images/box-image.png"
|
||||
src="/assets/images/box-image.png"
|
||||
alt="Laptop Dell"
|
||||
/>
|
||||
<div class="box-saleoff">-20%</div>
|
||||
@@ -1140,7 +1145,7 @@ export function Home() {
|
||||
<div class="product-item">
|
||||
<a href="" class="product-image">
|
||||
<img
|
||||
src="/src/assets/images/box-image.png"
|
||||
src="/assets/images/box-image.png"
|
||||
alt="Laptop Dell"
|
||||
/>
|
||||
<div class="box-saleoff">-20%</div>
|
||||
@@ -1167,7 +1172,7 @@ export function Home() {
|
||||
<div class="product-item">
|
||||
<a href="" class="product-image">
|
||||
<img
|
||||
src="/src/assets/images/box-image.png"
|
||||
src="/assets/images/box-image.png"
|
||||
alt="Laptop Dell"
|
||||
/>
|
||||
<div class="box-saleoff">-20%</div>
|
||||
@@ -1194,7 +1199,7 @@ export function Home() {
|
||||
<div class="product-item">
|
||||
<a href="" class="product-image">
|
||||
<img
|
||||
src="/src/assets/images/box-image.png"
|
||||
src="/assets/images/box-image.png"
|
||||
alt="Laptop Dell"
|
||||
/>
|
||||
<div class="box-saleoff">-20%</div>
|
||||
@@ -1240,7 +1245,7 @@ export function Home() {
|
||||
<a href="" class="item">
|
||||
<div class="flex flex-col justify-center items-center px-4 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image">
|
||||
<img
|
||||
src="/src/assets/images/icon-cate-1.png"
|
||||
src="/assets/images/icon-cate-1.png"
|
||||
class="object-contain aspect-[1.29] w-[90px]"
|
||||
alt="Laptop văn phòng"
|
||||
/>
|
||||
@@ -1253,7 +1258,7 @@ export function Home() {
|
||||
<a href="" class="item">
|
||||
<div class="flex flex-col justify-center items-center px-5 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image">
|
||||
<img
|
||||
src="/src/assets/images/icon-cate-2.png"
|
||||
src="/assets/images/icon-cate-2.png"
|
||||
class="object-contain aspect-[0.96] w-[89px]"
|
||||
alt="Tản nhiệt, đèn"
|
||||
/>
|
||||
@@ -1266,7 +1271,7 @@ export function Home() {
|
||||
<a href="" class="item">
|
||||
<div class="flex flex-col justify-center items-center px-3 bg-violet-50 h-[120px] rounded-[1111px] w-[120px] effect-image">
|
||||
<img
|
||||
src="/src/assets/images/icon-cate-3.png"
|
||||
src="/assets/images/icon-cate-3.png"
|
||||
class="object-contain aspect-[1.06] w-[104px]"
|
||||
alt="Linh kiện máy tính"
|
||||
/>
|
||||
@@ -1279,7 +1284,7 @@ export function Home() {
|
||||
<a href="" class="item">
|
||||
<div class="flex flex-col justify-center items-center px-1.5 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image">
|
||||
<img
|
||||
src="/src/assets/images/icon-cate-4.png"
|
||||
src="/assets/images/icon-cate-4.png"
|
||||
class="object-contain aspect-[1.24] w-[107px]"
|
||||
alt="Bàn phím, chuột"
|
||||
/>
|
||||
@@ -1292,7 +1297,7 @@ export function Home() {
|
||||
<a href="" class="item">
|
||||
<div class="flex flex-col justify-center items-center px-1.5 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image">
|
||||
<img
|
||||
src="/src/assets/images/icon-cate-5.png"
|
||||
src="/assets/images/icon-cate-5.png"
|
||||
class="object-contain aspect-[1.02] rounded-[50%] w-[122px] effect-image"
|
||||
alt="Màn hình, tay treo"
|
||||
/>
|
||||
@@ -1305,7 +1310,7 @@ export function Home() {
|
||||
<a href="" class="item">
|
||||
<div class="flex flex-col justify-center items-center px-4 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image">
|
||||
<img
|
||||
src="/src/assets/images/icon-cate-6.png"
|
||||
src="/assets/images/icon-cate-6.png"
|
||||
class="object-contain aspect-[0.88] w-[81px]"
|
||||
alt="Lưu trữ, phần mềm"
|
||||
/>
|
||||
@@ -1318,7 +1323,7 @@ export function Home() {
|
||||
<a href="" class="item">
|
||||
<div class="flex flex-col justify-center items-center px-3.5 bg-violet-50 h-[120px] rounded-[50%] effect-image w-[120px]">
|
||||
<img
|
||||
src="/src/assets/images/icon-cate-7.png"
|
||||
src="/assets/images/icon-cate-7.png"
|
||||
class="object-contain aspect-[0.93] w-[92px]"
|
||||
alt="Phụ kiện laptop"
|
||||
/>
|
||||
@@ -1331,7 +1336,7 @@ export function Home() {
|
||||
<a href="" class="item">
|
||||
<div class="flex flex-col justify-center items-center px-5 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image">
|
||||
<img
|
||||
src="/src/assets/images/icon-cate-8.png"
|
||||
src="/assets/images/icon-cate-8.png"
|
||||
class="object-contain w-20 aspect-[1.18]"
|
||||
alt="Phụ kiện PC"
|
||||
/>
|
||||
@@ -1344,7 +1349,7 @@ export function Home() {
|
||||
<a href="" class="item">
|
||||
<div class="flex flex-col justify-center items-center px-4 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image">
|
||||
<img
|
||||
src="/src/assets/images/icon-cate-9.png"
|
||||
src="/assets/images/icon-cate-9.png"
|
||||
class="object-contain aspect-[1.29] w-[90px]"
|
||||
alt="Laptop Gaming"
|
||||
/>
|
||||
@@ -1357,7 +1362,7 @@ export function Home() {
|
||||
<a href="" class="item">
|
||||
<div class="flex flex-col justify-center items-center px-4 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image">
|
||||
<img
|
||||
src="/src/assets/images/icon-cate-10.png"
|
||||
src="/assets/images/icon-cate-10.png"
|
||||
class="object-contain aspect-[0.83] w-[85px]"
|
||||
alt="Phụ kiện đi kèm"
|
||||
/>
|
||||
@@ -1370,7 +1375,7 @@ export function Home() {
|
||||
<a href="" class="item">
|
||||
<div class="flex flex-col justify-center items-center px-3.5 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image">
|
||||
<img
|
||||
src="/src/assets/images/icon-cate-11.png"
|
||||
src="/assets/images/icon-cate-11.png"
|
||||
class="object-contain aspect-[0.93] w-[100px]"
|
||||
alt="PC đồ hoạ, gaming"
|
||||
/>
|
||||
@@ -1383,7 +1388,7 @@ export function Home() {
|
||||
<a href="" class="item">
|
||||
<div class="flex flex-col justify-center items-start px-4 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image">
|
||||
<img
|
||||
src="/src/assets/images/icon-cate-12.png"
|
||||
src="/assets/images/icon-cate-12.png"
|
||||
class="object-contain aspect-[0.93] w-[100px]"
|
||||
alt="PC Văn phòng"
|
||||
/>
|
||||
@@ -1396,7 +1401,7 @@ export function Home() {
|
||||
<a href="" class="item">
|
||||
<div class="flex flex-col justify-center items-center px-3.5 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image">
|
||||
<img
|
||||
src="/src/assets/images/icon-cate-13.png"
|
||||
src="/assets/images/icon-cate-13.png"
|
||||
class="object-contain aspect-[0.95] w-[95px]"
|
||||
alt="Thiết bị mạng"
|
||||
/>
|
||||
@@ -1409,7 +1414,7 @@ export function Home() {
|
||||
<a href="" class="item">
|
||||
<div class="flex flex-col justify-center items-center px-6 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image">
|
||||
<img
|
||||
src="/src/assets/images/icon-cate-14.png"
|
||||
src="/assets/images/icon-cate-14.png"
|
||||
class="object-contain aspect-[0.67] w-[67px]"
|
||||
alt="Loa, tai nghe, mic"
|
||||
/>
|
||||
@@ -1422,7 +1427,7 @@ export function Home() {
|
||||
<a href="" class="item">
|
||||
<div class="flex flex-col justify-center items-center px-3 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image">
|
||||
<img
|
||||
src="/src/assets/images/icon-cate-15.png"
|
||||
src="/assets/images/icon-cate-15.png"
|
||||
class="object-contain aspect-[1.15] w-[100px]"
|
||||
alt="Thiết bị văn phòng"
|
||||
/>
|
||||
@@ -1435,7 +1440,7 @@ export function Home() {
|
||||
<a href="" class="item">
|
||||
<div class="flex flex-col justify-center items-center px-3 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image">
|
||||
<img
|
||||
src="/src/assets/images/icon-cate-16.png"
|
||||
src="/assets/images/icon-cate-16.png"
|
||||
class="object-contain aspect-[1.75] w-[98px]"
|
||||
alt="Game pad"
|
||||
/>
|
||||
@@ -1465,7 +1470,7 @@ export function Home() {
|
||||
class="block py-[10px] shadow-[1px_2px_8px_0_#72727240] rounded-[4px] overflow-hidden bg-white group"
|
||||
>
|
||||
<img
|
||||
src="/src/assets/images/logo-hacom.png"
|
||||
src="/assets/images/logo-hacom.png"
|
||||
class="block w-[full] h-[50px] object-contain translate-y-0 transition-all duration-200 ease-in group-hover:translate-y-[-3px]"
|
||||
width="100%"
|
||||
height="100%"
|
||||
@@ -1479,7 +1484,7 @@ export function Home() {
|
||||
class="block py-[10px] shadow-[1px_2px_8px_0_#72727240] rounded-[4px] overflow-hidden bg-white group"
|
||||
>
|
||||
<img
|
||||
src="/src/assets/images/logo-anphat.png"
|
||||
src="/assets/images/logo-anphat.png"
|
||||
class="block w-[full] h-[50px] object-contain translate-y-0 transition-all duration-200 ease-in group-hover:translate-y-[-3px]"
|
||||
width="100%"
|
||||
height="100%"
|
||||
@@ -1493,7 +1498,7 @@ export function Home() {
|
||||
class="block py-[10px] shadow-[1px_2px_8px_0_#72727240] rounded-[4px] overflow-hidden bg-white group"
|
||||
>
|
||||
<img
|
||||
src="/src/assets/images/logo-gearvn.png"
|
||||
src="/assets/images/logo-gearvn.png"
|
||||
class="block w-[full] h-[50px] object-contain translate-y-0 transition-all duration-200 ease-in group-hover:translate-y-[-3px]"
|
||||
width="100%"
|
||||
height="100%"
|
||||
@@ -1507,7 +1512,7 @@ export function Home() {
|
||||
class="block py-[10px] shadow-[1px_2px_8px_0_#72727240] rounded-[4px] overflow-hidden bg-white group"
|
||||
>
|
||||
<img
|
||||
src="/src/assets/images/logo-hacom.png"
|
||||
src="/assets/images/logo-hacom.png"
|
||||
class="block w-[full] h-[50px] object-contain translate-y-0 transition-all duration-200 ease-in group-hover:translate-y-[-3px]"
|
||||
width="100%"
|
||||
height="100%"
|
||||
@@ -1521,7 +1526,7 @@ export function Home() {
|
||||
class="block py-[10px] shadow-[1px_2px_8px_0_#72727240] rounded-[4px] overflow-hidden bg-white group"
|
||||
>
|
||||
<img
|
||||
src="/src/assets/images/logo-anphat.png"
|
||||
src="/assets/images/logo-anphat.png"
|
||||
class="block w-[full] h-[50px] object-contain translate-y-0 transition-all duration-200 ease-in group-hover:translate-y-[-3px]"
|
||||
width="100%"
|
||||
height="100%"
|
||||
@@ -1535,7 +1540,7 @@ export function Home() {
|
||||
class="block py-[10px] shadow-[1px_2px_8px_0_#72727240] rounded-[4px] overflow-hidden bg-white group"
|
||||
>
|
||||
<img
|
||||
src="/src/assets/images/logo-gearvn.png"
|
||||
src="/assets/images/logo-gearvn.png"
|
||||
class="block w-[full] h-[50px] object-contain translate-y-0 transition-all duration-200 ease-in group-hover:translate-y-[-3px]"
|
||||
width="100%"
|
||||
height="100%"
|
||||
@@ -1549,7 +1554,7 @@ export function Home() {
|
||||
class="block py-[10px] shadow-[1px_2px_8px_0_#72727240] rounded-[4px] overflow-hidden bg-white group"
|
||||
>
|
||||
<img
|
||||
src="/src/assets/images/logo-hacom.png"
|
||||
src="/assets/images/logo-hacom.png"
|
||||
class="block w-[full] h-[50px] object-contain translate-y-0 transition-all duration-200 ease-in group-hover:translate-y-[-3px]"
|
||||
width="100%"
|
||||
height="100%"
|
||||
@@ -1563,7 +1568,7 @@ export function Home() {
|
||||
class="block py-[10px] shadow-[1px_2px_8px_0_#72727240] rounded-[4px] overflow-hidden bg-white group"
|
||||
>
|
||||
<img
|
||||
src="/src/assets/images/logo-anphat.png"
|
||||
src="/assets/images/logo-anphat.png"
|
||||
class="block w-[full] h-[50px] object-contain translate-y-0 transition-all duration-200 ease-in group-hover:translate-y-[-3px]"
|
||||
width="100%"
|
||||
height="100%"
|
||||
@@ -1577,7 +1582,7 @@ export function Home() {
|
||||
class="block py-[10px] shadow-[1px_2px_8px_0_#72727240] rounded-[4px] overflow-hidden bg-white group"
|
||||
>
|
||||
<img
|
||||
src="/src/assets/images/logo-gearvn.png"
|
||||
src="/assets/images/logo-gearvn.png"
|
||||
class="block w-[full] h-[50px] object-contain translate-y-0 transition-all duration-200 ease-in group-hover:translate-y-[-3px]"
|
||||
width="100%"
|
||||
height="100%"
|
||||
@@ -1606,7 +1611,7 @@ export function Home() {
|
||||
<div class="product-item">
|
||||
<a href="" class="product-image">
|
||||
<img
|
||||
src="/src/assets/images/box-image.png"
|
||||
src="/assets/images/box-image.png"
|
||||
alt="Laptop Dell"
|
||||
/>
|
||||
<div class="icon-save">
|
||||
@@ -1634,7 +1639,7 @@ export function Home() {
|
||||
<div class="product-item">
|
||||
<a href="" class="product-image">
|
||||
<img
|
||||
src="/src/assets/images/box-image.png"
|
||||
src="/assets/images/box-image.png"
|
||||
alt="Laptop Dell"
|
||||
/>
|
||||
<div class="icon-save">
|
||||
@@ -1662,7 +1667,7 @@ export function Home() {
|
||||
<div class="product-item">
|
||||
<a href="" class="product-image">
|
||||
<img
|
||||
src="/src/assets/images/box-image.png"
|
||||
src="/assets/images/box-image.png"
|
||||
alt="Laptop Dell"
|
||||
/>
|
||||
<div class="icon-save">
|
||||
@@ -1690,7 +1695,7 @@ export function Home() {
|
||||
<div class="product-item">
|
||||
<a href="" class="product-image">
|
||||
<img
|
||||
src="/src/assets/images/box-image.png"
|
||||
src="/assets/images/box-image.png"
|
||||
alt="Laptop Dell"
|
||||
/>
|
||||
<div class="icon-save">
|
||||
@@ -1736,7 +1741,7 @@ export function Home() {
|
||||
<div class="list mt-5">
|
||||
<div class="item-article">
|
||||
<a href="" class="image-article effect-image">
|
||||
<img src="/src/assets/images/image-article.png" alt="" />
|
||||
<img src="/assets/images/image-article.png" alt="" />
|
||||
</a>
|
||||
<div class="info">
|
||||
<a href="" class="name-article line-clamp-1">
|
||||
@@ -1763,7 +1768,7 @@ export function Home() {
|
||||
</div>
|
||||
<div class="item-article">
|
||||
<a href="" class="image-article effect-image">
|
||||
<img src="/src/assets/images/image-article.png" alt="" />
|
||||
<img src="/assets/images/image-article.png" alt="" />
|
||||
</a>
|
||||
<div class="info">
|
||||
<a href="" class="name-article line-clamp-1">
|
||||
@@ -1790,7 +1795,7 @@ export function Home() {
|
||||
</div>
|
||||
<div class="item-article">
|
||||
<a href="" class="image-article effect-image">
|
||||
<img src="/src/assets/images/image-article.png" alt="" />
|
||||
<img src="/assets/images/image-article.png" alt="" />
|
||||
</a>
|
||||
<div class="info">
|
||||
<a href="" class="name-article line-clamp-1">
|
||||
@@ -1817,7 +1822,7 @@ export function Home() {
|
||||
</div>
|
||||
<div class="item-article">
|
||||
<a href="" class="image-article effect-image">
|
||||
<img src="/src/assets/images/image-article.png" alt="" />
|
||||
<img src="/assets/images/image-article.png" alt="" />
|
||||
</a>
|
||||
<div class="info">
|
||||
<a href="" class="name-article line-clamp-1">
|
||||
@@ -1858,7 +1863,7 @@ export function Home() {
|
||||
<div class="list mt-5">
|
||||
<div class="item-article">
|
||||
<a href="" class="image-article effect-image">
|
||||
<img src="/src/assets/images/image-article.png" alt="" />
|
||||
<img src="/assets/images/image-article.png" alt="" />
|
||||
</a>
|
||||
<div class="info">
|
||||
<a href="" class="name-article line-clamp-1">
|
||||
@@ -1885,7 +1890,7 @@ export function Home() {
|
||||
</div>
|
||||
<div class="item-article">
|
||||
<a href="" class="image-article effect-image">
|
||||
<img src="/src/assets/images/image-article.png" alt="" />
|
||||
<img src="/assets/images/image-article.png" alt="" />
|
||||
</a>
|
||||
<div class="info">
|
||||
<a href="" class="name-article line-clamp-1">
|
||||
@@ -1912,7 +1917,7 @@ export function Home() {
|
||||
</div>
|
||||
<div class="item-article">
|
||||
<a href="" class="image-article effect-image">
|
||||
<img src="/src/assets/images/image-article.png" alt="" />
|
||||
<img src="/assets/images/image-article.png" alt="" />
|
||||
</a>
|
||||
<div class="info">
|
||||
<a href="" class="name-article line-clamp-1">
|
||||
@@ -1939,7 +1944,7 @@ export function Home() {
|
||||
</div>
|
||||
<div class="item-article">
|
||||
<a href="" class="image-article effect-image">
|
||||
<img src="/src/assets/images/image-article.png" alt="" />
|
||||
<img src="/assets/images/image-article.png" alt="" />
|
||||
</a>
|
||||
<div class="info">
|
||||
<a href="" class="name-article line-clamp-1">
|
||||
@@ -1980,7 +1985,7 @@ export function Home() {
|
||||
<div class="list mt-5">
|
||||
<div class="item-classifieds">
|
||||
<a href="" class="image-classifieds effect-image">
|
||||
<img src="/src/assets/images/image-article.png" alt="" />
|
||||
<img src="/assets/images/image-article.png" alt="" />
|
||||
</a>
|
||||
<div class="info">
|
||||
<a href="" class="name-classifieds line-clamp-1">
|
||||
@@ -2005,7 +2010,7 @@ export function Home() {
|
||||
</div>
|
||||
<a href="" class="staff flex items-center">
|
||||
<img
|
||||
src="/src/assets/images/avartar.png"
|
||||
src="/assets/images/avartar.png"
|
||||
class="w-[24px] h-[24px] block object-contain rounded-full"
|
||||
width="100%"
|
||||
height="100%"
|
||||
@@ -2017,7 +2022,7 @@ export function Home() {
|
||||
</div>
|
||||
<div class="item-classifieds">
|
||||
<a href="" class="image-classifieds effect-image">
|
||||
<img src="/src/assets/images/image-article.png" alt="" />
|
||||
<img src="/assets/images/image-article.png" alt="" />
|
||||
</a>
|
||||
<div class="info">
|
||||
<a href="" class="name-classifieds line-clamp-1">
|
||||
@@ -2042,7 +2047,7 @@ export function Home() {
|
||||
</div>
|
||||
<a href="" class="staff flex items-center">
|
||||
<img
|
||||
src="/src/assets/images/avartar.png"
|
||||
src="/assets/images/avartar.png"
|
||||
class="w-[24px] h-[24px] block object-contain rounded-full"
|
||||
width="100%"
|
||||
height="100%"
|
||||
@@ -2054,7 +2059,7 @@ export function Home() {
|
||||
</div>
|
||||
<div class="item-classifieds">
|
||||
<a href="" class="image-classifieds effect-image">
|
||||
<img src="/src/assets/images/image-article.png" alt="" />
|
||||
<img src="/assets/images/image-article.png" alt="" />
|
||||
</a>
|
||||
<div class="info">
|
||||
<a href="" class="name-classifieds line-clamp-1">
|
||||
@@ -2079,7 +2084,7 @@ export function Home() {
|
||||
</div>
|
||||
<a href="" class="staff flex items-center">
|
||||
<img
|
||||
src="/src/assets/images/avartar.png"
|
||||
src="/assets/images/avartar.png"
|
||||
class="w-[24px] h-[24px] block object-contain rounded-full"
|
||||
width="100%"
|
||||
height="100%"
|
||||
@@ -2091,7 +2096,7 @@ export function Home() {
|
||||
</div>
|
||||
<div class="item-classifieds">
|
||||
<a href="" class="image-classifieds effect-image">
|
||||
<img src="/src/assets/images/image-article.png" alt="" />
|
||||
<img src="/assets/images/image-article.png" alt="" />
|
||||
</a>
|
||||
<div class="info">
|
||||
<a href="" class="name-classifieds line-clamp-1">
|
||||
@@ -2116,7 +2121,7 @@ export function Home() {
|
||||
</div>
|
||||
<a href="" class="staff flex items-center">
|
||||
<img
|
||||
src="/src/assets/images/avartar.png"
|
||||
src="/assets/images/avartar.png"
|
||||
class="w-[24px] h-[24px] block object-contain rounded-full"
|
||||
width="100%"
|
||||
height="100%"
|
||||
@@ -2142,7 +2147,7 @@ export function Home() {
|
||||
<div class="flex gap-[8px]">
|
||||
<a href="" class="item effect-image">
|
||||
<img
|
||||
src="/src/assets/images/banner-sale-1.png"
|
||||
src="/assets/images/banner-sale-1.png"
|
||||
width="100%"
|
||||
height="100%"
|
||||
class="object-contain w-full h-full rounded-xl"
|
||||
@@ -2151,7 +2156,7 @@ export function Home() {
|
||||
</a>
|
||||
<a href="" class="item effect-image">
|
||||
<img
|
||||
src="/src/assets/images/banner-sale-2.png"
|
||||
src="/assets/images/banner-sale-2.png"
|
||||
width="100%"
|
||||
height="100%"
|
||||
class="object-contain w-full h-full rounded-xl"
|
||||
@@ -2160,7 +2165,7 @@ export function Home() {
|
||||
</a>
|
||||
<a href="" class="item effect-image">
|
||||
<img
|
||||
src="/src/assets/images/banner-sale-3.png"
|
||||
src="/assets/images/banner-sale-3.png"
|
||||
width="100%"
|
||||
height="100%"
|
||||
class="object-contain w-full h-full rounded-xl"
|
||||
@@ -2169,7 +2174,7 @@ export function Home() {
|
||||
</a>
|
||||
<a href="" class="item effect-image">
|
||||
<img
|
||||
src="/src/assets/images/banner-sale-4.png"
|
||||
src="/assets/images/banner-sale-4.png"
|
||||
width="100%"
|
||||
height="100%"
|
||||
class="object-contain w-full h-full rounded-xl"
|
||||
@@ -2199,7 +2204,7 @@ export function Home() {
|
||||
data-url="https://www.youtube.com/watch?v=LcQBXGLWX8I"
|
||||
>
|
||||
<img
|
||||
src="/src/assets/images/promotions-big.png"
|
||||
src="/assets/images/promotions-big.png"
|
||||
width="100%"
|
||||
height="100%"
|
||||
class="object-cover w-full h-full rounded-xl"
|
||||
@@ -2209,7 +2214,7 @@ export function Home() {
|
||||
<div class="grid grid-cols-2 w-[53%] gap-[8px]">
|
||||
<a href="" class="item effect-image">
|
||||
<img
|
||||
src="/src/assets/images/promotions-1.png"
|
||||
src="/assets/images/promotions-1.png"
|
||||
class="object-contain w-full h-full rounded-xl"
|
||||
width="100%"
|
||||
height="100%"
|
||||
@@ -2218,7 +2223,7 @@ export function Home() {
|
||||
</a>
|
||||
<a href="" class="item effect-image">
|
||||
<img
|
||||
src="/src/assets/images/promotions-2.png"
|
||||
src="/assets/images/promotions-2.png"
|
||||
class="object-contain w-full h-full rounded-xl"
|
||||
width="100%"
|
||||
height="100%"
|
||||
@@ -2227,7 +2232,7 @@ export function Home() {
|
||||
</a>
|
||||
<a href="" class="item effect-image">
|
||||
<img
|
||||
src="/src/assets/images/promotions-3.png"
|
||||
src="/assets/images/promotions-3.png"
|
||||
class="object-contain w-full h-full rounded-xl"
|
||||
width="100%"
|
||||
height="100%"
|
||||
@@ -2236,7 +2241,7 @@ export function Home() {
|
||||
</a>
|
||||
<a href="" class="item effect-image">
|
||||
<img
|
||||
src="/src/assets/images/promotions-4.png"
|
||||
src="/assets/images/promotions-4.png"
|
||||
class="object-contain w-full h-full rounded-xl"
|
||||
width="100%"
|
||||
height="100%"
|
||||
@@ -2252,7 +2257,7 @@ export function Home() {
|
||||
<div class="container">
|
||||
<a href="/" class="block my-[30px]">
|
||||
<img
|
||||
src="/src/assets/images/logo-footer.png"
|
||||
src="/assets/images/logo-footer.png"
|
||||
class="block w-[180px] h-[45px] object-contain"
|
||||
width="100%"
|
||||
height="100%"
|
||||
|
||||
@@ -537,7 +537,7 @@ export function ProductDetail() {
|
||||
href=""
|
||||
class="pt-3 block text-center text-[#FF7A00] text-xl hover:text-orange-600"
|
||||
>
|
||||
Xem thêm >>
|
||||
Xem thêm
|
||||
</a>
|
||||
</div>
|
||||
{/* end nhà cung cấp */}
|
||||