upload 29/12
This commit is contained in:
218
src/components/article/ArticleDetail/index.tsx
Normal file
218
src/components/article/ArticleDetail/index.tsx
Normal file
@@ -0,0 +1,218 @@
|
||||
export default function ArticleDetail({ slug }: { slug: string }) {
|
||||
return(
|
||||
<>
|
||||
<link
|
||||
href="https://cdn.boxicons.com/fonts/brands/boxicons-brands.min.css"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<div className="container !mt-8 mt-6">
|
||||
{/* <style> body{background: #fff;} </style> */}
|
||||
<div className="article-detail-page max-w-[824px] m-auto my-8">
|
||||
<a
|
||||
href=""
|
||||
target="_blank"
|
||||
rel="nofollow"
|
||||
className="table border border-[#76BBFF80] rounded-[30px] bg-[#EAF1FF] px-5 leading-8 mb-3"
|
||||
>
|
||||
<span className="text-[#004BA4]"> Hoàng Hà PC trên </span>
|
||||
<span className="text-[#4285F4]">G</span>
|
||||
<span className="text-[#EA4335]">o</span>
|
||||
<span className="text-[#FBBC05]">o</span>
|
||||
<span className="text-[#4285F4]">g</span>
|
||||
<span className="text-[#34A853]">l</span>
|
||||
<span className="text-[#EA4335]">e</span>
|
||||
<span className="text-[#5F6368]"> News </span>
|
||||
</a>
|
||||
<h1 className="font-600 text-[#004BA4] text-20 leading-6 lg:leading-10 lg:text-[32px] mb-3">
|
||||
{" "}
|
||||
{"{"}
|
||||
{"{"} page.article_detail.title {"}"}
|
||||
{"}"}{" "}
|
||||
</h1>
|
||||
<div className="lg:text-[16px] lg:leading-[22px] flex items-center gap-1 mb-6 lg:mb-8">
|
||||
<i className="icons icon-time mr-1" />
|
||||
<span> Thứ sáu 25/07/2025 </span>
|
||||
<span>|</span>
|
||||
<a href=""> Mai Văn Học </a>
|
||||
</div>
|
||||
<div className="article-content lg:leading-6 lg:text-[18px]">
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aspernatur
|
||||
quaerat vero itaque voluptatum? Repellendus laudantium est doloribus
|
||||
saepe accusantium, illo numquam ullam deserunt expedita repudiandae
|
||||
ipsam libero, temporibus soluta eius.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center flex-wrap lg:gap-[30px] gap-5 mb-8">
|
||||
<p className="m-0">SHARE</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<a
|
||||
href=""
|
||||
rel="nofollow"
|
||||
className="bx bx-share w-[42px] h-[42px] !flex items-center justify-center rounded-full bg-[#0678DB] text-white text-center text-[21px] transition-all duration-300 relative bottom-0 hover:bottom-[5px]"
|
||||
/>
|
||||
<a
|
||||
href=""
|
||||
rel="nofollow"
|
||||
className="bxl bx-facebook w-[42px] h-[42px] !flex items-center justify-center rounded-full bg-[#0678DB] text-white text-center text-[21px] transition-all duration-300 relative bottom-0 hover:bottom-[5px]"
|
||||
/>
|
||||
<a
|
||||
href=""
|
||||
rel="nofollow"
|
||||
className="bxl bx-youtube w-[42px] h-[42px] !flex items-center justify-center rounded-full bg-[#0678DB] text-white text-center text-[21px] transition-all duration-300 relative bottom-0 hover:bottom-[5px]"
|
||||
/>
|
||||
<a
|
||||
href=""
|
||||
rel="nofollow"
|
||||
className="bxl bx-instagram-alt w-[42px] h-[42px] !flex items-center justify-center rounded-full bg-[#0678DB] text-white text-center text-[21px] transition-all duration-300 relative bottom-0 hover:bottom-[5px]"
|
||||
/>
|
||||
<a
|
||||
href=""
|
||||
rel="nofollow"
|
||||
className="bxl bx-tiktok w-[42px] h-[42px] !flex items-center justify-center rounded-full bg-[#0678DB] text-white text-center text-[21px] transition-all duration-300 relative bottom-0 hover:bottom-[5px]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-10 lg:mt-12">
|
||||
<p className="font-600 text-[32px] leading-10 mb-6 lg:text-[40px] lg:leading-12 lg:mb-8">
|
||||
{" "}
|
||||
Bài viết liên quan{" "}
|
||||
</p>
|
||||
{/* Limit: 4 */}
|
||||
<div className="grid grid-cols-2 gap-4 lg:grid-cols-4 lg:gap-6">
|
||||
<div className="art-item">
|
||||
<a href="" className="art-img">
|
||||
<img
|
||||
src="https://hoanghapccdn.com/media/news/14_100__c___u_h__nh_m__y_t__nh_______h___a_theo_ng__n_s__ch.jpg"
|
||||
alt=""
|
||||
width={1}
|
||||
height={1}
|
||||
/>
|
||||
</a>
|
||||
<div className="art-text">
|
||||
<a href="" className="art-title">
|
||||
<h3>
|
||||
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum
|
||||
quidem asperiores provident dicta veniam deleniti eaque
|
||||
repudiandae cum esse, ducimus officiis quibusdam pariatur neque
|
||||
voluptates voluptas. Quisquam qui minus dolorum?
|
||||
</h3>
|
||||
</a>
|
||||
<div className="art-summary">
|
||||
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit,
|
||||
obcaecati ducimus veritatis aliquid sunt accusamus unde nisi
|
||||
nostrum fugit facere illo quos. Ad error suscipit, quidem optio
|
||||
aut laudantium at!
|
||||
</div>
|
||||
<div className="art-time">
|
||||
<i className="bx bx-calendar-alt text-16 text-[#A0A5AC]" />
|
||||
<time>23/4/2024</time>
|
||||
<i className="w-[1.5px] h-[12px] bg-[#A0A5AC]" />
|
||||
<span>Mai Văn Học</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="art-item">
|
||||
<a href="" className="art-img">
|
||||
<img
|
||||
src="https://hoanghapccdn.com/media/news/14_100__c___u_h__nh_m__y_t__nh_______h___a_theo_ng__n_s__ch.jpg"
|
||||
alt=""
|
||||
width={1}
|
||||
height={1}
|
||||
/>
|
||||
</a>
|
||||
<div className="art-text">
|
||||
<a href="" className="art-title">
|
||||
<h3>
|
||||
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum
|
||||
quidem asperiores provident dicta veniam deleniti eaque
|
||||
repudiandae cum esse, ducimus officiis quibusdam pariatur neque
|
||||
voluptates voluptas. Quisquam qui minus dolorum?
|
||||
</h3>
|
||||
</a>
|
||||
<div className="art-summary">
|
||||
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit,
|
||||
obcaecati ducimus veritatis aliquid sunt accusamus unde nisi
|
||||
nostrum fugit facere illo quos. Ad error suscipit, quidem optio
|
||||
aut laudantium at!
|
||||
</div>
|
||||
<div className="art-time">
|
||||
<i className="bx bx-calendar-alt text-16 text-[#A0A5AC]" />
|
||||
<time>23/4/2024</time>
|
||||
<i className="w-[1.5px] h-[12px] bg-[#A0A5AC]" />
|
||||
<span>Mai Văn Học</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="art-item">
|
||||
<a href="" className="art-img">
|
||||
<img
|
||||
src="https://hoanghapccdn.com/media/news/14_100__c___u_h__nh_m__y_t__nh_______h___a_theo_ng__n_s__ch.jpg"
|
||||
alt=""
|
||||
width={1}
|
||||
height={1}
|
||||
/>
|
||||
</a>
|
||||
<div className="art-text">
|
||||
<a href="" className="art-title">
|
||||
<h3>
|
||||
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum
|
||||
quidem asperiores provident dicta veniam deleniti eaque
|
||||
repudiandae cum esse, ducimus officiis quibusdam pariatur neque
|
||||
voluptates voluptas. Quisquam qui minus dolorum?
|
||||
</h3>
|
||||
</a>
|
||||
<div className="art-summary">
|
||||
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit,
|
||||
obcaecati ducimus veritatis aliquid sunt accusamus unde nisi
|
||||
nostrum fugit facere illo quos. Ad error suscipit, quidem optio
|
||||
aut laudantium at!
|
||||
</div>
|
||||
<div className="art-time">
|
||||
<i className="bx bx-calendar-alt text-16 text-[#A0A5AC]" />
|
||||
<time>23/4/2024</time>
|
||||
<i className="w-[1.5px] h-[12px] bg-[#A0A5AC]" />
|
||||
<span>Mai Văn Học</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="art-item">
|
||||
<a href="" className="art-img">
|
||||
<img
|
||||
src="https://hoanghapccdn.com/media/news/14_100__c___u_h__nh_m__y_t__nh_______h___a_theo_ng__n_s__ch.jpg"
|
||||
alt=""
|
||||
width={1}
|
||||
height={1}
|
||||
/>
|
||||
</a>
|
||||
<div className="art-text">
|
||||
<a href="" className="art-title">
|
||||
<h3>
|
||||
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum
|
||||
quidem asperiores provident dicta veniam deleniti eaque
|
||||
repudiandae cum esse, ducimus officiis quibusdam pariatur neque
|
||||
voluptates voluptas. Quisquam qui minus dolorum?
|
||||
</h3>
|
||||
</a>
|
||||
<div className="art-summary">
|
||||
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit,
|
||||
obcaecati ducimus veritatis aliquid sunt accusamus unde nisi
|
||||
nostrum fugit facere illo quos. Ad error suscipit, quidem optio
|
||||
aut laudantium at!
|
||||
</div>
|
||||
<div className="art-time">
|
||||
<i className="bx bx-calendar-alt text-16 text-[#A0A5AC]" />
|
||||
<time>23/4/2024</time>
|
||||
<i className="w-[1.5px] h-[12px] bg-[#A0A5AC]" />
|
||||
<span>Mai Văn Học</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
||||
)
|
||||
}
|
||||
313
src/components/article/Category/index.tsx
Normal file
313
src/components/article/Category/index.tsx
Normal file
@@ -0,0 +1,313 @@
|
||||
export default function ArticleCategory({ slug }: { slug: string }) {
|
||||
return(
|
||||
<>
|
||||
<h1 className="absolute top-[-999px] z-[-1]"> Danh mục tin </h1>
|
||||
<div className="article-page container !mt-8 mt-6">
|
||||
{/* <style>body{background: #F5F8FF}</style> */}
|
||||
<div className="article-categories-group bg-[#F5F8FF] flex justify-between relative overflow-auto whitespace-nowrap uppercase font-500 leading-[18px] text-[#828282] gap-5 lg:gap-1 no-scroll border-b border-[#C5CBD8]">
|
||||
<a href="" className="active">
|
||||
{" "}
|
||||
MÁY KHỎE - ĐẸP{" "}
|
||||
</a>
|
||||
<a href=""> TIN CÔNG NGHỆ </a>
|
||||
<a href=""> REVIEW SẢN PHẨM </a>
|
||||
<a href=""> BENCHMARKS </a>
|
||||
<a href=""> THỦ THUẬT </a>
|
||||
<a href=""> KHUYẾN MÃI </a>
|
||||
<a href=""> WIKI </a>
|
||||
<a href=""> tin game </a>
|
||||
</div>
|
||||
{/* Tin tức */}
|
||||
<div className="article-holder grid lg:grid-cols-3 grid-cols-2 gap-4 lg:gap-6 my-5">
|
||||
<div className="art-item">
|
||||
<a href="" className="art-img">
|
||||
<img
|
||||
src="https://hoanghapccdn.com/media/news/14_100__c___u_h__nh_m__y_t__nh_______h___a_theo_ng__n_s__ch.jpg"
|
||||
alt=""
|
||||
width={1}
|
||||
height={1}
|
||||
/>
|
||||
</a>
|
||||
<div className="art-text">
|
||||
<a href="" className="art-title">
|
||||
<h3>
|
||||
{" "}
|
||||
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum
|
||||
quidem asperiores provident dicta veniam deleniti eaque
|
||||
repudiandae cum esse, ducimus officiis quibusdam pariatur neque
|
||||
voluptates voluptas. Quisquam qui minus dolorum?{" "}
|
||||
</h3>
|
||||
</a>
|
||||
<div className="art-summary">
|
||||
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit,
|
||||
obcaecati ducimus veritatis aliquid sunt accusamus unde nisi nostrum
|
||||
fugit facere illo quos. Ad error suscipit, quidem optio aut
|
||||
laudantium at!
|
||||
</div>
|
||||
<div className="art-time">
|
||||
<i className="bx bx-calendar-alt text-16 text-[#A0A5AC]" />
|
||||
<time> 23/4/2024 </time>
|
||||
<i className="w-[1.5px] h-[12px] bg-[#A0A5AC]" />
|
||||
<span> Mai Văn Học </span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="art-item">
|
||||
<a href="" className="art-img">
|
||||
<img
|
||||
src="https://hoanghapccdn.com/media/news/14_100__c___u_h__nh_m__y_t__nh_______h___a_theo_ng__n_s__ch.jpg"
|
||||
alt=""
|
||||
width={1}
|
||||
height={1}
|
||||
/>
|
||||
</a>
|
||||
<div className="art-text">
|
||||
<a href="" className="art-title">
|
||||
<h3>
|
||||
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum
|
||||
quidem asperiores provident dicta veniam deleniti eaque
|
||||
repudiandae cum esse, ducimus officiis quibusdam pariatur neque
|
||||
voluptates voluptas. Quisquam qui minus dolorum?
|
||||
</h3>
|
||||
</a>
|
||||
<div className="art-summary">
|
||||
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit,
|
||||
obcaecati ducimus veritatis aliquid sunt accusamus unde nisi nostrum
|
||||
fugit facere illo quos. Ad error suscipit, quidem optio aut
|
||||
laudantium at!
|
||||
</div>
|
||||
<div className="art-time">
|
||||
<i className="bx bx-calendar-alt text-16 text-[#A0A5AC]" />
|
||||
<time>23/4/2024</time>
|
||||
<i className="w-[1.5px] h-[12px] bg-[#A0A5AC]" />
|
||||
<span>Mai Văn Học</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="art-item">
|
||||
<a href="" className="art-img">
|
||||
<img
|
||||
src="https://hoanghapccdn.com/media/news/14_100__c___u_h__nh_m__y_t__nh_______h___a_theo_ng__n_s__ch.jpg"
|
||||
alt=""
|
||||
width={1}
|
||||
height={1}
|
||||
/>
|
||||
</a>
|
||||
<div className="art-text">
|
||||
<a href="" className="art-title">
|
||||
<h3>
|
||||
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum
|
||||
quidem asperiores provident dicta veniam deleniti eaque
|
||||
repudiandae cum esse, ducimus officiis quibusdam pariatur neque
|
||||
voluptates voluptas. Quisquam qui minus dolorum?
|
||||
</h3>
|
||||
</a>
|
||||
<div className="art-summary">
|
||||
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit,
|
||||
obcaecati ducimus veritatis aliquid sunt accusamus unde nisi nostrum
|
||||
fugit facere illo quos. Ad error suscipit, quidem optio aut
|
||||
laudantium at!
|
||||
</div>
|
||||
<div className="art-time">
|
||||
<i className="bx bx-calendar-alt text-16 text-[#A0A5AC]" />
|
||||
<time>23/4/2024</time>
|
||||
<i className="w-[1.5px] h-[12px] bg-[#A0A5AC]" />
|
||||
<span>Mai Văn Học</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="art-item">
|
||||
<a href="" className="art-img">
|
||||
<img
|
||||
src="https://hoanghapccdn.com/media/news/14_100__c___u_h__nh_m__y_t__nh_______h___a_theo_ng__n_s__ch.jpg"
|
||||
alt=""
|
||||
width={1}
|
||||
height={1}
|
||||
/>
|
||||
</a>
|
||||
<div className="art-text">
|
||||
<a href="" className="art-title">
|
||||
<h3>
|
||||
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum
|
||||
quidem asperiores provident dicta veniam deleniti eaque
|
||||
repudiandae cum esse, ducimus officiis quibusdam pariatur neque
|
||||
voluptates voluptas. Quisquam qui minus dolorum?
|
||||
</h3>
|
||||
</a>
|
||||
<div className="art-summary">
|
||||
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit,
|
||||
obcaecati ducimus veritatis aliquid sunt accusamus unde nisi nostrum
|
||||
fugit facere illo quos. Ad error suscipit, quidem optio aut
|
||||
laudantium at!
|
||||
</div>
|
||||
<div className="art-time">
|
||||
<i className="bx bx-calendar-alt text-16 text-[#A0A5AC]" />
|
||||
<time>23/4/2024</time>
|
||||
<i className="w-[1.5px] h-[12px] bg-[#A0A5AC]" />
|
||||
<span>Mai Văn Học</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="art-item">
|
||||
<a href="" className="art-img">
|
||||
<img
|
||||
src="https://hoanghapccdn.com/media/news/14_100__c___u_h__nh_m__y_t__nh_______h___a_theo_ng__n_s__ch.jpg"
|
||||
alt=""
|
||||
width={1}
|
||||
height={1}
|
||||
/>
|
||||
</a>
|
||||
<div className="art-text">
|
||||
<a href="" className="art-title">
|
||||
<h3>
|
||||
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum
|
||||
quidem asperiores provident dicta veniam deleniti eaque
|
||||
repudiandae cum esse, ducimus officiis quibusdam pariatur neque
|
||||
voluptates voluptas. Quisquam qui minus dolorum?
|
||||
</h3>
|
||||
</a>
|
||||
<div className="art-summary">
|
||||
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit,
|
||||
obcaecati ducimus veritatis aliquid sunt accusamus unde nisi nostrum
|
||||
fugit facere illo quos. Ad error suscipit, quidem optio aut
|
||||
laudantium at!
|
||||
</div>
|
||||
<div className="art-time">
|
||||
<i className="bx bx-calendar-alt text-16 text-[#A0A5AC]" />
|
||||
<time>23/4/2024</time>
|
||||
<i className="w-[1.5px] h-[12px] bg-[#A0A5AC]" />
|
||||
<span>Mai Văn Học</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Video */}
|
||||
<div className="article-holder article-video-holder grid lg:grid-cols-3 grid-cols-2 gap-4 lg:gap-6 my-5">
|
||||
<a
|
||||
href="https://www.youtube.com/watch?v=kGSYaCyNPvg"
|
||||
data-fancybox=""
|
||||
className="video-item"
|
||||
>
|
||||
<span className="item-img">
|
||||
<img
|
||||
src="https://hoanghapccdn.com/media/news/1241_pc_do_hoa_13900k_4070.jpg"
|
||||
alt="PC Đồ Họa Siêu Khỏe - Đẹp 13900K + VGA RTX 4070"
|
||||
width={120}
|
||||
height={66}
|
||||
/>
|
||||
<i className="bx bxs-play-circle" />
|
||||
</span>
|
||||
<span className="item-title">
|
||||
{" "}
|
||||
PC Đồ Họa Siêu Khỏe - Đẹp 13900K + VGA RTX 4070{" "}
|
||||
</span>
|
||||
</a>
|
||||
<a
|
||||
href="https://www.youtube.com/watch?v=kGSYaCyNPvg"
|
||||
data-fancybox=""
|
||||
className="video-item"
|
||||
>
|
||||
<span className="item-img">
|
||||
<img
|
||||
src="https://hoanghapccdn.com/media/news/1241_pc_do_hoa_13900k_4070.jpg"
|
||||
alt="PC Đồ Họa Siêu Khỏe - Đẹp 13900K + VGA RTX 4070"
|
||||
width={120}
|
||||
height={66}
|
||||
/>
|
||||
<i className="bx bxs-play-circle" />{" "}
|
||||
</span>
|
||||
<span className="item-title">
|
||||
PC Đồ Họa Siêu Khỏe - Đẹp 13900K + VGA RTX 4070
|
||||
</span>
|
||||
</a>
|
||||
<a
|
||||
href="https://www.youtube.com/watch?v=kGSYaCyNPvg"
|
||||
data-fancybox=""
|
||||
className="video-item"
|
||||
>
|
||||
<span className="item-img">
|
||||
<img
|
||||
src="https://hoanghapccdn.com/media/news/1241_pc_do_hoa_13900k_4070.jpg"
|
||||
alt="PC Đồ Họa Siêu Khỏe - Đẹp 13900K + VGA RTX 4070"
|
||||
width={120}
|
||||
height={66}
|
||||
/>
|
||||
<i className="bx bxs-play-circle" />{" "}
|
||||
</span>
|
||||
<span className="item-title">
|
||||
PC Đồ Họa Siêu Khỏe - Đẹp 13900K + VGA RTX 4070
|
||||
</span>
|
||||
</a>
|
||||
<a
|
||||
href="https://www.youtube.com/watch?v=kGSYaCyNPvg"
|
||||
data-fancybox=""
|
||||
className="video-item"
|
||||
>
|
||||
<span className="item-img">
|
||||
<img
|
||||
src="https://hoanghapccdn.com/media/news/1241_pc_do_hoa_13900k_4070.jpg"
|
||||
alt="PC Đồ Họa Siêu Khỏe - Đẹp 13900K + VGA RTX 4070"
|
||||
width={120}
|
||||
height={66}
|
||||
/>
|
||||
<i className="bx bxs-play-circle" />{" "}
|
||||
</span>
|
||||
<span className="item-title">
|
||||
PC Đồ Họa Siêu Khỏe - Đẹp 13900K + VGA RTX 4070
|
||||
</span>
|
||||
</a>
|
||||
<a
|
||||
href="https://www.youtube.com/watch?v=kGSYaCyNPvg"
|
||||
data-fancybox=""
|
||||
className="video-item"
|
||||
>
|
||||
<span className="item-img">
|
||||
<img
|
||||
src="https://hoanghapccdn.com/media/news/1241_pc_do_hoa_13900k_4070.jpg"
|
||||
alt="PC Đồ Họa Siêu Khỏe - Đẹp 13900K + VGA RTX 4070"
|
||||
width={120}
|
||||
height={66}
|
||||
/>
|
||||
<i className="bx bxs-play-circle" />{" "}
|
||||
</span>
|
||||
<span className="item-title">
|
||||
PC Đồ Họa Siêu Khỏe - Đẹp 13900K + VGA RTX 4070
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
{/* Paging */}
|
||||
<div className="my-10 flex flex-wrap items-center justify-center gap-4 leading-10 text-center text-16 font-500">
|
||||
<a
|
||||
href=""
|
||||
className="w-10 rounded-full border border-[#DDDDDD] hover:bg-[#004BA4] hover:text-white hover:border-transparent bg-[#004BA4] text-white border-transparent"
|
||||
>
|
||||
{" "}
|
||||
1{" "}
|
||||
</a>
|
||||
<a
|
||||
href=""
|
||||
className="w-10 rounded-full border border-[#DDDDDD] hover:bg-[#004BA4] hover:text-white hover:border-transparent"
|
||||
>
|
||||
{" "}
|
||||
2{" "}
|
||||
</a>{" "}
|
||||
<a
|
||||
href=""
|
||||
className="w-10 rounded-full border border-[#DDDDDD] hover:bg-[#004BA4] hover:text-white hover:border-transparent"
|
||||
>
|
||||
{" "}
|
||||
3{" "}
|
||||
</a>{" "}
|
||||
<a
|
||||
href=""
|
||||
className="w-10 rounded-full border border-[#DDDDDD] hover:bg-[#004BA4] hover:text-white hover:border-transparent"
|
||||
>
|
||||
{" "}
|
||||
4{" "}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
||||
)
|
||||
}
|
||||
1202
src/components/article/Home/index.tsx
Normal file
1202
src/components/article/Home/index.tsx
Normal file
File diff suppressed because it is too large
Load Diff
210
src/components/cart/Home/index.tsx
Normal file
210
src/components/cart/Home/index.tsx
Normal file
@@ -0,0 +1,210 @@
|
||||
export default function SendCart() {
|
||||
return(
|
||||
<div className="cart-page container">
|
||||
<div className="text-center px-3">
|
||||
<div className="mb-4">
|
||||
<img src="images/cart-empty.png" className="block m-auto" />
|
||||
</div>
|
||||
<p className="mt-10 mb-6 text-20 font-600">
|
||||
{" "}
|
||||
Không có sản phẩm nào trong giỏ hàng của bạn !
|
||||
</p>
|
||||
<a
|
||||
href="/"
|
||||
className="inline-flex items-center bg-btn text-white leading-[52px] font-500 text-18 rounded-[50px] px-6"
|
||||
>
|
||||
{" "}
|
||||
VỀ TRANG CHỦ <i className="bx bx-arrow-up-right-stroke text-30" />{" "}
|
||||
</a>
|
||||
</div>
|
||||
<h1 className="text-[#004BA4] leading-10 text-[32px] font-600 mb-6">
|
||||
{" "}
|
||||
Giỏ hàng của tôi{" "}
|
||||
</h1>
|
||||
<div className="lg:flex flex-wrap items-start justify-between gap-6">
|
||||
<div className="col-left w-[calc(100%-464px)]">
|
||||
<div className="hidden lg:flex flex-wrap items-center justify-between gap-4 bg-white rounded-[12px] mb-3 py-3 px-4 lg:text-[16px] font-500 leading-10">
|
||||
<p className="m-0 text-16 lg:text-[18px]"> 5 sản phẩm </p>
|
||||
<button
|
||||
type="button"
|
||||
className="h-10 border border-[#0678DB] bg-white rounded-[40px] text-[#0678DB] px-6 transition-all duration-100 hover:bg-[#0678DB] hover:text-white"
|
||||
aria-label="Xóa sản phẩm"
|
||||
>
|
||||
{" "}
|
||||
LÀM TRỐNG GIỎ HÀNG{" "}
|
||||
</button>
|
||||
</div>
|
||||
<div className="bg-white rounded-[16px] lg:rounded-[12px] mb-3 p-4">
|
||||
<div className="cart-item mb-5 last:mb-0">
|
||||
<a href="" className="item-img">
|
||||
{" "}
|
||||
<img src="images/product-5.jpg" />{" "}
|
||||
</a>
|
||||
<div className="item-text">
|
||||
<div className="item-name">
|
||||
<a
|
||||
href=""
|
||||
className="table uppercase font-500 lg:text-[16px] text-12"
|
||||
>
|
||||
HHPC ULTRA 7 265K | 32GB DDR5 | NVIDIA RTX 3060 12GB
|
||||
</a>
|
||||
<div className="group mt-2 table">
|
||||
<p className="m-0 text-[#0678DB] font-500 cursor-pointer">
|
||||
<span> Chi tiết khuyến mại </span>
|
||||
<i className="bx bx-chevron-down text-[#A0A5AC] text-16 align-middle transition-all group-hover:rotate-[-180deg]" />
|
||||
</p>
|
||||
<div className="item-offer group-hover:opacity-100 group-hover:z-[5] group-hover:visible">
|
||||
<div className="item">
|
||||
<p>
|
||||
<span style={{ fontSize: "12pt", color: "#ff0000" }}>
|
||||
<strong>⭐ Tặng Balo Laptop Hoàng Hà PC</strong>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div className="item">
|
||||
<p>
|
||||
<span style={{ fontSize: "12pt", color: "#ff0000" }}>
|
||||
<strong>⭐ Tặng Chuột không dây</strong>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div className="item">
|
||||
<p>
|
||||
<span style={{ fontSize: "12pt", color: "#ff0000" }}>
|
||||
<strong>⭐ Tặng Bàn di chuột</strong>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="item-quantiy">
|
||||
<button
|
||||
type="button"
|
||||
className="js-quantity-change bx bx-minus"
|
||||
/>
|
||||
<input
|
||||
type="number"
|
||||
defaultValue={1}
|
||||
min={1}
|
||||
data-stock={998}
|
||||
pattern="[0-9]*"
|
||||
inputMode="numeric"
|
||||
className="js-buy-quantity js-quantity-change text-center"
|
||||
/>
|
||||
<button type="button" className="js-quantity-change bx bx-plus" />
|
||||
</div>
|
||||
<div className="item-price text-right lg:text-left">
|
||||
<p className="text-[#FF4E2A] font-bold mb-0 lg:mb-1 lg:text-[16px] lg:leading-5 text-13 leading-4">
|
||||
{" "}
|
||||
42.000.000 đ{" "}
|
||||
</p>
|
||||
<del className="block text-[#A0A5AC] lg:text-[13px] lg:leading-4 text-10 leading-3">
|
||||
{" "}
|
||||
52.000.000 đ{" "}
|
||||
</del>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="item-delete bx bx-trash w-8 h-8 lg:w-10 lg:h-10 rounded-full border border-[#E7D9D9] bg-[#F8F3F3] text-[#BE1F2D] text-16 lg:text-[20px] hover:text-white hover:bg-[#BE1F2D] hover:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-white p-4 lg:pt-5 rounded-[16px] lg:rounded-[12px]">
|
||||
<p className="font-600 text-16 lg:text-[18px] mb-2 lg:mb-4 leading-5 lg:leading-6">
|
||||
{" "}
|
||||
Thông tin đơn hàng{" "}
|
||||
</p>
|
||||
<div className="flex items-center justify-between gap-3 border-b border-[#D2DAE3] border-dashed pb-4 mb-3 lg:mb-5 leading-5 lg:leading-6 lg:text-[16px]">
|
||||
<p className="m-0"> Tổng tiền </p>
|
||||
<p className="m-0 font-500 text-15 lg:text-[18px]"> 50.000.000 đ </p>
|
||||
</div>
|
||||
<div className="flex items-center justify-between gap-3 leading-5 lg:leading-6">
|
||||
<p className="m-0 flex items-center gap-2">
|
||||
<i className="bx bxs-credit-card-alt text-20 text-[#B5BAC1]" />
|
||||
<span> Tổng thanh toán </span>
|
||||
</p>
|
||||
<p className="m-0 text-16 text-[#FF4E2A] font-bold lg:text-[20px]">
|
||||
{" "}
|
||||
41.450.000 <u>đ</u>{" "}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<form className="col-right w-[440px] bg-white rounded-[16px] px-5 py-6 sticky top-[90px] z-[1] shadow-[0px_4px_20px_0px_#0615070D] lg:shadow-[none]">
|
||||
<p className="font-600 text-18 text-[#004BA4] leading-6 mb-1">
|
||||
{" "}
|
||||
Thông tin nhận hàng{" "}
|
||||
</p>
|
||||
<div className="leading-[18px] text-[#474747] mb-4">
|
||||
Để tiếp tục đặt hàng, quý khách xin vui lòng
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Đăng nhập"
|
||||
className="font-500 text-[#0678DB]"
|
||||
>
|
||||
{" "}
|
||||
đăng nhập{" "}
|
||||
</button>
|
||||
hoặc nhập thông tin bên dưới. Tư vấn viên sẽ liên hệ theo thông tin bạn
|
||||
cung cấp để xác nhận, không mua không sao
|
||||
</div>
|
||||
<div>
|
||||
<input
|
||||
type="text"
|
||||
id=""
|
||||
className="block w-full h-[50px] mb-4 border border-transparent rounded-[12px] bg-[#F3F3F3] px-4"
|
||||
placeholder="Họ và tên"
|
||||
/>
|
||||
<input
|
||||
type="tel"
|
||||
id=""
|
||||
className="block w-full h-[50px] mb-4 border border-transparent rounded-[12px] bg-[#F3F3F3] px-4"
|
||||
inputMode="numeric"
|
||||
pattern="[0-9]{10,11}"
|
||||
maxLength={11}
|
||||
placeholder="Số điện thoại"
|
||||
/>
|
||||
<input
|
||||
type="email"
|
||||
id=""
|
||||
className="block w-full h-[50px] mb-4 border border-transparent rounded-[12px] bg-[#F3F3F3] px-4"
|
||||
maxLength={254}
|
||||
placeholder="Nhập email"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
id=""
|
||||
className="block w-full h-[50px] mb-2 border border-transparent rounded-[12px] bg-[#F3F3F3] px-4"
|
||||
placeholder="Địa chỉ nhận hàng"
|
||||
/>
|
||||
<p className="text-[#757575] mb-4">
|
||||
{" "}
|
||||
<i className="bx bx-info-circle text-16 text-[#0678DB] mr-1 align-text-top" />{" "}
|
||||
<span> Nhập Số nhà, Đường, Phường/xã, Quận, Tỉnh </span>{" "}
|
||||
</p>
|
||||
<textarea
|
||||
id=""
|
||||
className="block w-full h-[112px] mb-4 border border-transparent rounded-[12px] bg-[#F3F3F3] px-4 pt-[12px] resize-none outline-none"
|
||||
placeholder="Ghi chú"
|
||||
defaultValue={""}
|
||||
/>
|
||||
</div>
|
||||
<div className="red font-600 my-4"> </div>
|
||||
<div className="mt-5">
|
||||
<button
|
||||
type="submit"
|
||||
className="block w-full bg-btn text-white h-[52px] rounded-[50px] font-500 text-18"
|
||||
>
|
||||
{" "}
|
||||
ĐẶT HÀNG{" "}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
)
|
||||
}
|
||||
55
src/components/cart/Send/index.tsx
Normal file
55
src/components/cart/Send/index.tsx
Normal file
@@ -0,0 +1,55 @@
|
||||
export default function SendCart() {
|
||||
return(
|
||||
<div className="max-w-[656px] m-auto my-10">
|
||||
<div>
|
||||
<img
|
||||
src="images/send-cart-image.png"
|
||||
alt="send-cart"
|
||||
width={1}
|
||||
height={1}
|
||||
className="block m-auto w-auto h-auto"
|
||||
/>
|
||||
<h1 className="mt-10 mb-5 font-600 text-center text-[40px] text-[#004BA4] leading-12">
|
||||
{" "}
|
||||
Bạn đã đặt hàng thành công{" "}
|
||||
</h1>
|
||||
<div className="text-justify lg:text-[18px] lg:leading-6">
|
||||
<p className="mb-4">
|
||||
Chúng tôi vừa nhận được đơn đặt hàng của quý khách trên website
|
||||
HOANGHAPC <br />
|
||||
Đơn hàng này đang được xử lý. Trong vòng{" "}
|
||||
<b className="font-600"> 30 phút (giờ làm việc) </b>, bộ phận bán hàng
|
||||
trực tuyến sẽ liên hệ lại Quý khách để xác nhận thời gian và địa điểm
|
||||
giao hàng.
|
||||
</p>
|
||||
<p className="mb-8">
|
||||
Cảm ơn quý khách đã mua sắm tại Trung tâm thiết bị số HOANGHAPC. Hi vọng
|
||||
chúng tôi đã mang lại cho quý khách những trải nghiệm mua sắm thật tuyệt
|
||||
vời.
|
||||
</p>
|
||||
<div className="text-center">
|
||||
<a
|
||||
href="/"
|
||||
className="inline-flex items-center bg-btn text-white leading-[52px] font-500 text-18 rounded-[50px] px-6"
|
||||
>
|
||||
{" "}
|
||||
VỀ TRANG CHỦ <i className="bx bx-arrow-up-right-stroke text-30" />{" "}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-center text-16 lg:text-[18px]">
|
||||
<i className="bx bx-x-circle text-[red] text-[110px]" />
|
||||
<p className="font-bold text-20 mt-5"> Có lỗi xảy ra khi gửi đơn hàng </p>
|
||||
<p className="mb-4">
|
||||
{" "}
|
||||
Đơn hàng của quý khách chưa được gửi. Vui lòng quay lại giỏ hàng để thử
|
||||
gửi lại hoặc liên hệ với chúng tôi để được trợ giúp.{" "}
|
||||
</p>
|
||||
<p className="mb-4"> Cảm ơn quý khách !</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
)
|
||||
}
|
||||
52
src/components/home/Article/index.tsx
Normal file
52
src/components/home/Article/index.tsx
Normal file
@@ -0,0 +1,52 @@
|
||||
export default function Article() {
|
||||
return(
|
||||
<div className="home-article-container bg-white rounded-[24px] p-6 my-8">
|
||||
<div className="mb-8 promotion-news-group">
|
||||
<div className="flex items-center justify-between flex-wrap mb-4 leading-9 gap-4 text-16 font-600">
|
||||
<h2 className="text-[28px] m-0 text-[#004BA4] leading-9"> Chuyên trang Khuyến mãi </h2>
|
||||
<a href="/tin-khuyen-mai" className="text-[#0678DB]"> Xem tất cả <i className="bx bx-chevron-right align-middle ml-[-2px] mt-[-1px] text-18"></i> </a>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-4 gap-6">
|
||||
|
||||
<div className="art-item">
|
||||
<a href="" className="art-img">
|
||||
<img src="https://hoanghapccdn.com/media/news/14_100__c___u_h__nh_m__y_t__nh_______h___a_theo_ng__n_s__ch.jpg" alt="" width="1" height="1" />
|
||||
</a>
|
||||
|
||||
<div className="art-text">
|
||||
<a href="" className="art-title">
|
||||
<h3> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum quidem asperiores provident dicta veniam deleniti eaque repudiandae cum esse, ducimus officiis quibusdam pariatur neque voluptates voluptas. Quisquam qui minus dolorum? </h3>
|
||||
</a>
|
||||
|
||||
<div className="art-summary">
|
||||
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit, obcaecati ducimus veritatis aliquid sunt accusamus unde nisi nostrum fugit facere illo quos. Ad error suscipit, quidem optio aut laudantium at!
|
||||
</div>
|
||||
|
||||
<div className="art-time">
|
||||
<i className='bx bx-calendar-alt text-16 text-[#A0A5AC]'></i>
|
||||
<time> 23/4/2024 </time>
|
||||
<i className="w-[1.5px] h-[12px] bg-[#A0A5AC]"></i>
|
||||
<span> Mai Văn Học </span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="art-item"><a href="" className="art-img"><img src="https://hoanghapccdn.com/media/news/14_100__c___u_h__nh_m__y_t__nh_______h___a_theo_ng__n_s__ch.jpg" alt="" width="1" height="1"/></a><div className="art-text"><a href="" className="art-title"><h3>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum quidem asperiores provident dicta veniam deleniti eaque repudiandae cum esse, ducimus officiis quibusdam pariatur neque voluptates voluptas. Quisquam qui minus dolorum?</h3></a><div className="art-summary">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit, obcaecati ducimus veritatis aliquid sunt accusamus unde nisi nostrum fugit facere illo quos. Ad error suscipit, quidem optio aut laudantium at!</div><div className="art-time"><i className="bx bx-calendar-alt"></i><time>23/4/2024</time><i className="w-[1.5px] h-[12px] bg-[#A0A5AC] mx-1"></i><span>Mai Văn Học</span></div></div></div><div className="art-item"><a href="" className="art-img"><img src="https://hoanghapccdn.com/media/news/14_100__c___u_h__nh_m__y_t__nh_______h___a_theo_ng__n_s__ch.jpg" alt="" width="1" height="1"/></a><div className="art-text"><a href="" className="art-title"><h3>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum quidem asperiores provident dicta veniam deleniti eaque repudiandae cum esse, ducimus officiis quibusdam pariatur neque voluptates voluptas. Quisquam qui minus dolorum?</h3></a><div className="art-summary">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit, obcaecati ducimus veritatis aliquid sunt accusamus unde nisi nostrum fugit facere illo quos. Ad error suscipit, quidem optio aut laudantium at!</div><div className="art-time"><i className="bx bx-calendar-alt text-16 text-[#A0A5AC]"></i><time>23/4/2024</time><i className="w-[1.5px] h-[12px] bg-[#A0A5AC]"></i><span>Mai Văn Học</span></div></div></div><div className="art-item"><a href="" className="art-img"><img src="https://hoanghapccdn.com/media/news/14_100__c___u_h__nh_m__y_t__nh_______h___a_theo_ng__n_s__ch.jpg" alt="" width="1" height="1"/></a><div className="art-text"><a href="" className="art-title"><h3>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum quidem asperiores provident dicta veniam deleniti eaque repudiandae cum esse, ducimus officiis quibusdam pariatur neque voluptates voluptas. Quisquam qui minus dolorum?</h3></a><div className="art-summary">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit, obcaecati ducimus veritatis aliquid sunt accusamus unde nisi nostrum fugit facere illo quos. Ad error suscipit, quidem optio aut laudantium at!</div><div className="art-time"><i className="bx bx-calendar-alt text-16 text-[#A0A5AC]"></i><time>23/4/2024</time><i className="w-[1.5px] h-[12px] bg-[#A0A5AC]"></i><span>Mai Văn Học</span></div></div></div><div className="art-item"><a href="" className="art-img"><img src="https://hoanghapccdn.com/media/news/14_100__c___u_h__nh_m__y_t__nh_______h___a_theo_ng__n_s__ch.jpg" alt="" width="1" height="1"/></a><div className="art-text"><a href="" className="art-title"><h3>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum quidem asperiores provident dicta veniam deleniti eaque repudiandae cum esse, ducimus officiis quibusdam pariatur neque voluptates voluptas. Quisquam qui minus dolorum?</h3></a><div className="art-summary">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit, obcaecati ducimus veritatis aliquid sunt accusamus unde nisi nostrum fugit facere illo quos. Ad error suscipit, quidem optio aut laudantium at!</div><div className="art-time"><i className="bx bx-calendar-alt text-16 text-[#A0A5AC]"></i><time>23/4/2024</time><i className="w-[1.5px] h-[12px] bg-[#A0A5AC]"></i><span>Mai Văn Học</span></div></div></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="flex items-center justify-between flex-wrap mb-4 leading-9 gap-4 text-16 font-600">
|
||||
<h2 className="text-[28px] m-0 text-[#004BA4] leading-9"> Tin tức Công nghệ </h2>
|
||||
<a href="/tin-cong-nghe" className="text-[#0678DB]"> Xem tất cả <i className="bx bx-chevron-right align-middle ml-[-2px] mt-[-1px] text-18"></i> </a>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-4 gap-6">
|
||||
<div className="art-item"><a href="" className="art-img"><img src="https://hoanghapccdn.com/media/news/14_100__c___u_h__nh_m__y_t__nh_______h___a_theo_ng__n_s__ch.jpg" alt="" width="1" height="1"/></a><div className="art-text"><a href="" className="art-title"><h3>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum quidem asperiores provident dicta veniam deleniti eaque repudiandae cum esse, ducimus officiis quibusdam pariatur neque voluptates voluptas. Quisquam qui minus dolorum?</h3></a><div className="art-summary">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit, obcaecati ducimus veritatis aliquid sunt accusamus unde nisi nostrum fugit facere illo quos. Ad error suscipit, quidem optio aut laudantium at!</div><div className="art-time"><i className="bx bx-calendar-alt"></i><time>23/4/2024</time><i className="w-[1.5px] h-[12px] bg-[#A0A5AC] mx-1"></i><span>Mai Văn Học</span></div></div></div><div className="art-item"><a href="" className="art-img"><img src="https://hoanghapccdn.com/media/news/14_100__c___u_h__nh_m__y_t__nh_______h___a_theo_ng__n_s__ch.jpg" alt="" width="1" height="1"/></a><div className="art-text"><a href="" className="art-title"><h3>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum quidem asperiores provident dicta veniam deleniti eaque repudiandae cum esse, ducimus officiis quibusdam pariatur neque voluptates voluptas. Quisquam qui minus dolorum?</h3></a><div className="art-summary">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit, obcaecati ducimus veritatis aliquid sunt accusamus unde nisi nostrum fugit facere illo quos. Ad error suscipit, quidem optio aut laudantium at!</div><div className="art-time"><i className="bx bx-calendar-alt text-16 text-[#A0A5AC]"></i><time>23/4/2024</time><i className="w-[1.5px] h-[12px] bg-[#A0A5AC]"></i><span>Mai Văn Học</span></div></div></div><div className="art-item"><a href="" className="art-img"><img src="https://hoanghapccdn.com/media/news/14_100__c___u_h__nh_m__y_t__nh_______h___a_theo_ng__n_s__ch.jpg" alt="" width="1" height="1"/></a><div className="art-text"><a href="" className="art-title"><h3>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum quidem asperiores provident dicta veniam deleniti eaque repudiandae cum esse, ducimus officiis quibusdam pariatur neque voluptates voluptas. Quisquam qui minus dolorum?</h3></a><div className="art-summary">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit, obcaecati ducimus veritatis aliquid sunt accusamus unde nisi nostrum fugit facere illo quos. Ad error suscipit, quidem optio aut laudantium at!</div><div className="art-time"><i className="bx bx-calendar-alt text-16 text-[#A0A5AC]"></i><time>23/4/2024</time><i className="w-[1.5px] h-[12px] bg-[#A0A5AC]"></i><span>Mai Văn Học</span></div></div></div><div className="art-item"><a href="" className="art-img"><img src="https://hoanghapccdn.com/media/news/14_100__c___u_h__nh_m__y_t__nh_______h___a_theo_ng__n_s__ch.jpg" alt="" width="1" height="1"/></a><div className="art-text"><a href="" className="art-title"><h3>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum quidem asperiores provident dicta veniam deleniti eaque repudiandae cum esse, ducimus officiis quibusdam pariatur neque voluptates voluptas. Quisquam qui minus dolorum?</h3></a><div className="art-summary">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit, obcaecati ducimus veritatis aliquid sunt accusamus unde nisi nostrum fugit facere illo quos. Ad error suscipit, quidem optio aut laudantium at!</div><div className="art-time"><i className="bx bx-calendar-alt text-16 text-[#A0A5AC]"></i><time>23/4/2024</time><i className="w-[1.5px] h-[12px] bg-[#A0A5AC]"></i><span>Mai Văn Học</span></div></div></div><div className="art-item"><a href="" className="art-img"><img src="https://hoanghapccdn.com/media/news/14_100__c___u_h__nh_m__y_t__nh_______h___a_theo_ng__n_s__ch.jpg" alt="" width="1" height="1"/></a><div className="art-text"><a href="" className="art-title"><h3>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum quidem asperiores provident dicta veniam deleniti eaque repudiandae cum esse, ducimus officiis quibusdam pariatur neque voluptates voluptas. Quisquam qui minus dolorum?</h3></a><div className="art-summary">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit, obcaecati ducimus veritatis aliquid sunt accusamus unde nisi nostrum fugit facere illo quos. Ad error suscipit, quidem optio aut laudantium at!</div><div className="art-time"><i className="bx bx-calendar-alt text-16 text-[#A0A5AC]"></i><time>23/4/2024</time><i className="w-[1.5px] h-[12px] bg-[#A0A5AC]"></i><span>Mai Văn Học</span></div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
16
src/components/home/Category/index.tsx
Normal file
16
src/components/home/Category/index.tsx
Normal file
@@ -0,0 +1,16 @@
|
||||
export default function FeaturedProductCategories() {
|
||||
return (
|
||||
<div className="home-categories-container bg-white rounded-[24px] my-10 p-6 pb-8">
|
||||
<h2 className="group-title font-600 text-[28px] text-[#004BA4] mb-5 leading-9"> Danh mục nổi bật </h2>
|
||||
|
||||
<div className="grid grid-cols-10 gap-6">
|
||||
<a href="" className="item">
|
||||
<i className="image lazy" style={{ backgroundImage: 'url(images/global/cat-3.png)' }}></i>
|
||||
<span className="block"> PC Thiết Kế Đồ Họa </span>
|
||||
</a>
|
||||
|
||||
<a href="" className="item"><i className="image lazy" style={{ backgroundImage: 'url(images/global/cat-1.png)' }}></i><span className="block">PC Thiết</span></a><a href="" className="item"><i className="image lazy" style={{ backgroundImage: 'url(images/global/cat-2.png)' }}></i><span className="block">PC Thiết Kế Đồ Họa</span></a><a href="" className="item"><i className="image lazy" style={{ backgroundImage: 'url(images/global/cat-4.png)' }}></i><span className="block">PC Thiết Kế Đồ Họa</span></a><a href="" className="item"><i className="image lazy" style={{ backgroundImage: 'url(images/global/cat-5.png)' }}></i><span className="block">PC Thiết Kế Đồ Họa</span></a><a href="" className="item"><i className="image lazy" style={{ backgroundImage: 'url(images/global/cat-7.png)' }}></i><span className="block">PC Thiết Kế Đồ Họa</span></a><a href="" className="item"><i className="image lazy" style={{ backgroundImage: 'url(images/global/cat-8.png)' }}></i><span className="block">PC Thiết Kế Đồ Họa</span></a><a href="" className="item"><i className="image lazy" style={{ backgroundImage: 'url(images/global/cat-9.png)' }}></i><span className="block">PC Thiết Kế Đồ Họa</span></a><a href="" className="item"><i className="image lazy" style={{ backgroundImage: 'url(images/global/cat-11.png)' }}></i><span className="block">PC Thiết Kế Đồ Họa</span></a><a href="" className="item"><i className="image lazy" style={{ backgroundImage: 'url(images/global/cat-12.png)' }}></i><span className="block">PC Thiết Kế Đồ Họa</span></a><a href="" className="item"><i className="image lazy" style={{ backgroundImage: 'url(images/global/cat-13.png)' }}></i><span className="block">PC Thiết Kế Đồ Họa</span></a>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
88
src/components/home/Deal/index.tsx
Normal file
88
src/components/home/Deal/index.tsx
Normal file
@@ -0,0 +1,88 @@
|
||||
'use client';
|
||||
import { Swiper, SwiperSlide } from 'swiper/react';
|
||||
import { Navigation, Pagination, Autoplay } from 'swiper/modules';
|
||||
|
||||
export default function Deal() {
|
||||
return (
|
||||
<div className="home-deal-container my-[3rem]">
|
||||
<div className="deal-container p-4 pt-6 rounded-[12px]" style={{ backgroundImage: 'url(images/bg-deal-home.png)' }}>
|
||||
<div className="group-title flex items-center justify-between mb-6 text-white relative z-[1]">
|
||||
<div className="flex items-center flex items-center">
|
||||
<div className="flex items-center">
|
||||
<i className="icon-bolt lazy mr-2" style={{ backgroundImage: 'url(images/icon-bolt.png)' }}></i>
|
||||
<p className="m-0 mr-5 font-600 text-[32px]"> Cấu hình Flash Sale </p>
|
||||
</div>
|
||||
|
||||
<div className="deal-time-holder">
|
||||
<p> 00 </p> <p> 00 </p> <p> 00 </p> <p> 00 </p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href="/deal" className="text-16 font-600"> Xem tất cả <i className="bx bx-chevron-right align-middle ml-[-2px] mt-[-1px]"></i> </a>
|
||||
</div>
|
||||
|
||||
<div className="group relative z-[1] bg-white rounded-[12px] relative min-h-[450px] px-4 pt-6 pb-8">
|
||||
<div className="custom-nav hidden">
|
||||
<div className="button-icon swiper-button-prev"></div>
|
||||
<div className="button-icon swiper-button-next"></div>
|
||||
</div>
|
||||
|
||||
<Swiper
|
||||
modules={[Navigation, Pagination, Autoplay]}
|
||||
spaceBetween={24}
|
||||
slidesPerView={5}
|
||||
loop={true}
|
||||
autoplay={{
|
||||
delay: 3000,
|
||||
disableOnInteraction: false,
|
||||
}}
|
||||
navigation={{
|
||||
prevEl: '.custom-nav .swiper-button-prev',
|
||||
nextEl: '.custom-nav .swiper-button-next',
|
||||
}}
|
||||
breakpoints={{
|
||||
1600: {
|
||||
slidesPerView: 6,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<SwiperSlide>
|
||||
<div className="deal-item">
|
||||
<a href="" className="deal-img">
|
||||
<img src="images/product-1.jpg" alt="" width="1" height="1" className="fit-img"/>
|
||||
</a>
|
||||
|
||||
<div className="deal-text">
|
||||
<a href="" className="deal-name"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum eveniet reprehenderit, in maiores quaerat soluta mollitia </a>
|
||||
|
||||
<div className="deal-price-holder">
|
||||
<div>
|
||||
<p className="deal-price"> 48.990.000 đ </p>
|
||||
<del> 52.000.000 đ </del>
|
||||
<span className="deal-discount"> -6% </span>
|
||||
</div>
|
||||
|
||||
<button type="button" className="deal-btn bx bx-plus" aria-label="Mua"></button>
|
||||
</div>
|
||||
|
||||
<div className="deal-count">
|
||||
<i className="deal-line" style={{ width: '30%' }}></i>
|
||||
<span> Còn: 3/5 sản phẩm </span>
|
||||
</div>
|
||||
|
||||
<div className="deal-offer">
|
||||
<span className="text-[#BE1F2D]"> Quà tặng: </span>
|
||||
Màn hình Coolest Maste và chuột không dây Logitech
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
|
||||
<SwiperSlide><div className="deal-item"><a href="" className="deal-img"><img src="images/product-2.jpg" alt="" width="1" height="1" className="fit-img" /></a><div className="deal-text"><a href="" className="deal-name">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum eveniet reprehenderit, in maiores quaerat soluta mollitia</a><div className="deal-price-holder"><div><p className="deal-price">48.990.000 đ</p><del>52.000.000 đ</del><span className="deal-discount">-6%</span></div><button type="button" className="deal-btn bx bx-plus" aria-label="Mua"></button></div><div className="deal-count"><i className="deal-line" style={{ width: '0%' }}></i><span>Còn: 3/5 sản phẩm</span></div><div className="deal-offer"></div></div></div></SwiperSlide> <SwiperSlide><div className="deal-item"><a href="" className="deal-img"><img src="images/product-3.jpg" alt="" width="1" height="1" className="fit-img" /></a><div className="deal-text"><a href="" className="deal-name">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum eveniet reprehenderit, in maiores quaerat soluta mollitia</a><div className="deal-price-holder"><div><p className="deal-price">48.990.000 đ</p><del>52.000.000 đ</del><span className="deal-discount">-6%</span></div><button type="button" className="deal-btn bx bx-plus" aria-label="Mua"></button></div><div className="deal-count"><i className="deal-line" style={{ width: '70%' }}></i><span>Còn: 3/5 sản phẩm</span></div><div className="deal-offer"><span className="text-[#BE1F2D]">Quà tặng:</span>Màn hình Coolest Maste và chuột không dây Logitech</div></div></div></SwiperSlide> <SwiperSlide><div className="deal-item"><a href="" className="deal-img"><img src="images/product-4.jpg" alt="" width="1" height="1" className="fit-img" /></a><div className="deal-text"><a href="" className="deal-name">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum eveniet reprehenderit, in maiores quaerat soluta mollitia</a><div className="deal-price-holder"><div><p className="deal-price">48.990.000 đ</p><del>52.000.000 đ</del><span className="deal-discount">-6%</span></div><button type="button" className="deal-btn bx bx-plus" aria-label="Mua"></button></div><div className="deal-count"><i className="deal-line" style={{ width: '90%' }}></i><span>Còn: 3/5 sản phẩm</span></div><div className="deal-offer"><span className="text-[#BE1F2D]">Quà tặng:</span>Màn hình Coolest Maste và chuột không dây Logitech</div></div></div></SwiperSlide> <SwiperSlide><div className="deal-item"><a href="" className="deal-img"><img src="images/product-5.jpg" alt="" width="1" height="1" className="fit-img" /></a><div className="deal-text"><a href="" className="deal-name">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum eveniet reprehenderit, in maiores quaerat soluta mollitia</a><div className="deal-price-holder"><div><p className="deal-price">48.990.000 đ</p><del>52.000.000 đ</del><span className="deal-discount">-6%</span></div><button type="button" className="deal-btn bx bx-plus" aria-label="Mua"></button></div><div className="deal-count"><i className="deal-line" style={{ width: '90%' }}></i><span>Còn: 3/5 sản phẩm</span></div><div className="deal-offer"><span className="text-[#BE1F2D]">Quà tặng:</span>Màn hình Coolest Maste</div></div></div></SwiperSlide> <SwiperSlide><div className="deal-item"><a href="" className="deal-img"><img src="images/product-6.jpg" alt="" width="1" height="1" className="fit-img" /></a><div className="deal-text"><a href="" className="deal-name">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum eveniet reprehenderit, in maiores quaerat soluta mollitia</a><div className="deal-price-holder"><div><p className="deal-price">48.990.000 đ</p><del>52.000.000 đ</del><span className="deal-discount">-6%</span></div><button type="button" className="deal-btn bx bx-plus" aria-label="Mua"></button></div><div className="deal-count"><i className="deal-line" style={{ width: '90%' }}></i><span>Còn: 3/5 sản phẩm</span></div><div className="deal-offer"></div></div></div></SwiperSlide>
|
||||
</Swiper>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
169
src/components/home/Product/index.tsx
Normal file
169
src/components/home/Product/index.tsx
Normal file
File diff suppressed because one or more lines are too long
91
src/components/home/Slider/index.tsx
Normal file
91
src/components/home/Slider/index.tsx
Normal file
@@ -0,0 +1,91 @@
|
||||
'use client';
|
||||
import { Swiper, SwiperSlide } from 'swiper/react';
|
||||
import { Navigation, Pagination, Autoplay } from 'swiper/modules';
|
||||
|
||||
export default function Slider() {
|
||||
return(
|
||||
<div className="home-banner-container mb-10 min-h-[845px]">
|
||||
<div className="banner-slider gap-4 grid grid-cols-3 w-[932px] m-[auto_0_auto_auto]">
|
||||
<div className="home-banner-left col-span-2 custom-dots relative group ">
|
||||
<Swiper
|
||||
spaceBetween={50}
|
||||
slidesPerView={1}
|
||||
loop={true}
|
||||
autoplay={{ delay: 3000 }}
|
||||
modules={[Navigation, Pagination, Autoplay]}
|
||||
navigation={{
|
||||
prevEl: ".custom-nav .swiper-button-prev",
|
||||
nextEl: ".custom-nav .swiper-button-next",
|
||||
}}
|
||||
pagination={{ clickable: true }}
|
||||
>
|
||||
<SwiperSlide>
|
||||
<a href="">
|
||||
<img src="/images/homepage/home-slide.png" alt="" width={100} height={100} className="block w-full lazy"/>
|
||||
</a>
|
||||
</SwiperSlide>
|
||||
|
||||
<SwiperSlide>
|
||||
<a href="">
|
||||
<img src="https://placehold.co/792x543/EEE/31343C" alt="" width="" height="" className="block w-full lazy"/>
|
||||
</a>
|
||||
</SwiperSlide>
|
||||
|
||||
<SwiperSlide>
|
||||
<a href="">
|
||||
<img src="https://placehold.co/792x543/EEE/31343C" alt="" width="" height="" className="block w-full lazy"/>
|
||||
</a>
|
||||
</SwiperSlide>
|
||||
|
||||
<SwiperSlide>
|
||||
<a href="">
|
||||
<img src="https://placehold.co/792x543/EEE/31343C" alt="" width="" height="" className="block w-full lazy"/>
|
||||
</a>
|
||||
</SwiperSlide>
|
||||
</Swiper>
|
||||
|
||||
<div className="custom-nav hidden">
|
||||
<div
|
||||
className="button-icon swiper-button-prev"
|
||||
role="button"
|
||||
aria-label="Previous slide"
|
||||
/>
|
||||
<div
|
||||
className="button-icon swiper-button-next"
|
||||
role="button"
|
||||
aria-label="Next slide"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="home-banner-right col-span-1">
|
||||
<a href="" className="last:mb-0 mb-4">
|
||||
<img src="images/homepage/right-1.png" alt="" width="" height="" className="block w-full lazy"/>
|
||||
</a>
|
||||
|
||||
<a href="" className="last:mb-0 mb-4">
|
||||
<img src="images/homepage/right-2.png" alt="" width="" height="" className="block w-full lazy"/>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="home-banner-right grid grid-cols-3 gap-4 col-span-3">
|
||||
<a href="">
|
||||
<img src="images/homepage/under-slide-1.png" alt="" width="" height="" className="block w-full lazy"/>
|
||||
</a>
|
||||
|
||||
<a href=""> <img src="images/homepage/under-slide-2.png" alt="" width="" height="" className="block w-full lazy"/> </a> <a href=""> <img src="images/homepage/under-slide-3.png" alt="" width="" height="" className="block w-full lazy"/> </a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-4 gap-4 mt-4">
|
||||
<a href="">
|
||||
<img src="images/homepage/under-1.png" alt="" width="" height="" className="block w-full lazy"/>
|
||||
</a>
|
||||
|
||||
<a href=""> <img src="images/homepage/under-2.png" alt="" width="" height="" className="block w-full lazy"/> </a>
|
||||
<a href=""> <img src="images/homepage/under-3.png" alt="" width="" height="" className="block w-full lazy"/> </a>
|
||||
<a href=""> <img src="images/homepage/under-4.png" alt="" width="" height="" className="block w-full lazy"/> </a>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
23
src/components/home/index.tsx
Normal file
23
src/components/home/index.tsx
Normal file
@@ -0,0 +1,23 @@
|
||||
import Slider from "./Slider";
|
||||
import Deal from "./Deal";
|
||||
import FeaturedProductCategories from "./Category";
|
||||
import ProductCategories from "./Product";
|
||||
import Article from "./Article";
|
||||
|
||||
export default function Home() {
|
||||
return(
|
||||
<div className="home-page !-mt-5 pt-6">
|
||||
<div className="container">
|
||||
<Slider />
|
||||
|
||||
<Deal />
|
||||
|
||||
<FeaturedProductCategories />
|
||||
|
||||
<ProductCategories />
|
||||
|
||||
<Article />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
105
src/components/other/Footer/Info.tsx
Normal file
105
src/components/other/Footer/Info.tsx
Normal file
@@ -0,0 +1,105 @@
|
||||
export default function PageInfo(){
|
||||
return(
|
||||
<div className="global-footer-container bg-[#0719A7] relative py-16 text-white text-14 lg:text-[16px] leading-[18px] lg:leading-[22px]">
|
||||
<div className="bg-oval"></div>
|
||||
<div className="container relative z-[2]">
|
||||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-6 mb-8 lg:mb-10">
|
||||
<div className="footer-item">
|
||||
<p className="uppercase font-600 mb-4"> Về Hoàng Hà PC </p>
|
||||
|
||||
<div className="inline-grid gap-3 font-500">
|
||||
<a href="/gioi-thieu"> Về Chúng Tôi </a>
|
||||
<a href="/tuyen-dung"> Tuyển Dụng </a>
|
||||
<a href="/he-thong-cua-hang"> Hệ thống showroom </a>
|
||||
<a href="/tin-tuc"> Tin tức </a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="footer-item">
|
||||
<p className="uppercase font-600 mb-4"> Hỗ trợ khách hàng </p>
|
||||
|
||||
<div className="inline-grid gap-3 font-500">
|
||||
<a href="/huong-dan-mua-hang-online">Hướng dẫn mua hàng Online</a>
|
||||
<a href="/phuong-thuc-thanh-toan">Hướng dẫn thanh toán</a>
|
||||
<a href="/huong-dan-mua-tra-gop">Hướng dẫn mua trả góp</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="footer-item">
|
||||
<p className="uppercase font-600 mb-4"> Chính sách </p>
|
||||
|
||||
<div className="inline-grid gap-3 font-500">
|
||||
<a href="/chinh-sach-bao-hanh">Chính sách bảo hành</a>
|
||||
<a href="/chinh-sach-bao-mat">Chính sách bảo mật</a>
|
||||
<a href="/van-chuyen-giao-nhan">Chính sách vận chuyển, giao nhận</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="footer-item">
|
||||
<p className="uppercase font-600 mb-4"> Cộng đồng </p>
|
||||
|
||||
<div className="inline-grid gap-3 font-500">
|
||||
<a href="https://www.facebook.com/hoanghapc" target="_blank" rel="nofollow noopener noreferrer"> Hoàng Hà PC Fanpage </a>
|
||||
<a href="" target="_blank" rel="nofollow noopener noreferrer"> Phát Triển Hệ Thống Dữ Liệu </a>
|
||||
<a href="" target="_blank" rel="nofollow noopener noreferrer"> Phát Triển Trải nghiệm Người dùng </a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="footer-contact-info mb-8 lg:mb-10">
|
||||
<p className="mb-2 font-600 lg:text-[16px] lg:mb-4 uppercase"> Email liên hệ </p>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-2 lg:gap-6">
|
||||
<div className="rounded-[12px] lg:rounded-[16px] bg-[rgba(255,255,255,0.1)] p-4 lg:p-6">
|
||||
<p className="flex items-center gap-2 font-500 uppercase mb-2">
|
||||
<i className="icons icon-puzzle rounded-full !w-6 !h-6"></i>
|
||||
<span > Hợp Tác Phát Triển: </span>
|
||||
</p>
|
||||
|
||||
<a href="mailto:hoanghapcws@gmail.com" className="opacity-[0.8] transition-all hover:opacity-[1] text-16"> hoanghapcws@gmail.com </a>
|
||||
</div>
|
||||
|
||||
<div className="rounded-[12px] lg:rounded-[16px] bg-[rgba(255,255,255,0.1)] p-4 lg:p-6">
|
||||
<p className="flex items-center gap-2 font-500 uppercase mb-2">
|
||||
<i className="icons icon-discount rounded-full !w-6 !h-6"></i>
|
||||
<span > Liên Hệ Báo Giá: </span>
|
||||
</p>
|
||||
|
||||
<a href="mailto:kinhdoanh@hoanghapc.vn" className="opacity-[0.8] transition-all hover:opacity-[1] text-16"> kinhdoanh@hoanghapc.vn </a>
|
||||
</div>
|
||||
|
||||
<div className="rounded-[12px] lg:rounded-[16px] bg-[rgba(255,255,255,0.1)] p-4 lg:p-6">
|
||||
<p className="flex items-center gap-2 font-500 uppercase mb-2">
|
||||
<i className="icons icon-shield rounded-full !w-6 !h-6"></i>
|
||||
<span > Hỗ Trợ Bảo Hành: </span>
|
||||
</p>
|
||||
|
||||
<a href="mailto:baohanh@hoanghapc.vn" className="opacity-[0.8] transition-all hover:opacity-[1] text-16"> baohanh@hoanghapc.vn </a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap items-center justify-between gap-4 lg:gap-8">
|
||||
<div className="flex items-center gap-4 lg:gap-8">
|
||||
<p className="m-0 text-12 leading-[15px] lg:text-[14px] lg:leading-[18px] opacity-80">
|
||||
CÔNG TY TNHH DỊCH VỤ VÀ CÔNG NGHỆ HOÀNG HÀ<br/>
|
||||
Giấy chứng nhận đăng ký kinh doanh số: 0107406972, được Sở Kế hoạch và Đầu tư Tp. Hà Nội cấp
|
||||
</p>
|
||||
|
||||
<a href="http://online.gov.vn/Home/WebDetails/46319" target="_blank" rel="nofollow noopener noreferrer" className="w-[120px]">
|
||||
<img src="/images/global-footer-bct.png" loading="lazy" alt="Bct" width="1" height="1" className="lazy d-block w-auto h-auto" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<a href="" target="_blank" rel="nofollow noopener noreferrer" className="icons icon-linkedin !w-6 !h-6" aria-label="Social Media"></a>
|
||||
<a href="" target="_blank" rel="nofollow noopener noreferrer" className="icons icon-facebook !w-6 !h-6" aria-label="Social Media"></a>
|
||||
<a href="" target="_blank" rel="nofollow noopener noreferrer" className="icons icon-zalo !w-6 !h-6" aria-label="Social Media"></a>
|
||||
<a href="" target="_blank" rel="nofollow noopener noreferrer" className="icons icon-gmail !w-6 !h-6" aria-label="Social Media"></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
20
src/components/other/Footer/Newsletter.tsx
Normal file
20
src/components/other/Footer/Newsletter.tsx
Normal file
@@ -0,0 +1,20 @@
|
||||
export default function Newsletter() {
|
||||
return (
|
||||
<div className="footer-newsletter-container py-12 mt-16">
|
||||
<div className="container flex flex-wrap items-center justify-between gap-12 relative z-[1]">
|
||||
<i className="lazy icon-newsletter" style={{ backgroundImage: 'url(images/footer-newsletter.png)' }}></i>
|
||||
|
||||
<p className="m-0 text-white font-600 text-20">Hãy để lại Email để nhận thông báo Khuyến mại hấp dẫn hoặc tư vấn miễn phí từ Hoàng Hà PC!</p>
|
||||
|
||||
<form className="w-[756px] flex items-center flex-wrap justify-between gap-3 text-16 font-500">
|
||||
<input type="text" placeholder="Địa chỉ email của bạn" className="border-2 border-transparent bg-white w-[576px] rounded-[40px] h-[52px] px-4 placeholder:font-normal placeholder:text-[#718096] placeholder:text-[16px]" />
|
||||
<button type="button" aria-label="Đăng ký nhận tin" className="uppercase w-[168px] h-[52px] rounded-[40px] bg-white text-[#0678DB] gap-2 flex items-center justify-center border-0">
|
||||
Gửi ngay <i className="icons icon-plane"></i>
|
||||
</button>
|
||||
|
||||
<p className="m-0 text-[#ffc403]"> </p>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
159
src/components/other/Footer/Showroom.tsx
Normal file
159
src/components/other/Footer/Showroom.tsx
Normal file
@@ -0,0 +1,159 @@
|
||||
export default function Showroom(){
|
||||
return(
|
||||
<div className="global-showroom-container bg-[#E8ECF6] py-16 text-16 leading-[22px]">
|
||||
<div className="container">
|
||||
<p className="text-center col-span-4 text-[#004BA4] text-[40px] font-600 mb-8 leading-[48px]"> Hệ thống Showroom </p>
|
||||
|
||||
<div className="grid grid-cols-4 gap-5">
|
||||
<div className="showroom-item bg-white overflow-hidden relative">
|
||||
<div className="item-triangle"> </div>
|
||||
|
||||
<div className="image">
|
||||
<img src="images/hoang-ha-pc-cau-giay.png" alt="HoangHaPc Cầu Giấy" width="1" height="1" className="block lazy"/>
|
||||
</div>
|
||||
|
||||
<div className="text">
|
||||
<p className="mb-2 uppercase text-[#004BA4] font-600"> QUẬN CẦU GIẤY, HÀ NỘI </p>
|
||||
|
||||
<div className="item-info flex mb-2">
|
||||
<i className="icons icon-location"></i>
|
||||
<p className="mb-0">
|
||||
<b>Địa chỉ:</b> Số 41 Khúc Thừa Dụ, Phường Cầu Giấy, Hà Nội
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="item-info flex mb-2">
|
||||
<i className="icons icon-phone"></i>
|
||||
<p className="mb-0">
|
||||
<b>Hotline:</b> 0969123666
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="item-info flex">
|
||||
<i className="icons icon-time"></i>
|
||||
<p className="mb-0">
|
||||
<b>Thời gian làm việc:</b> 8h00 - 20h00
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<a href="https://goo.gl/maps/56ARHjWKoVhpWBCF6" target="_blank" rel="nofollow noopener noreferrer" className="inline-flex items-center text-linear font-600 mt-4">
|
||||
Chỉ đường tới đây <i className="bxr bx-arrow-right-stroke"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="showroom-item bg-white overflow-hidden relative">
|
||||
<div className="item-triangle"> </div>
|
||||
|
||||
<div className="image">
|
||||
<img src="images/hoang-ha-pc-dong-da-5.jpg" alt="HoangHaPc Đống Đa" width="1" height="1" className="block lazy"/>
|
||||
</div>
|
||||
|
||||
<div className="text">
|
||||
<p className="mb-2 uppercase text-[#004BA4] font-600"> QUẬN ĐỐNG ĐA, HÀ NỘI </p>
|
||||
|
||||
<div className="item-info flex mb-2">
|
||||
<i className="icons icon-location"></i>
|
||||
<p className="mb-0">
|
||||
<b>Địa chỉ:</b> Số 94E-94F Đường Láng, Phường Đống Đa, Hà Nội
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="item-info flex mb-2">
|
||||
<i className="icons icon-phone"></i>
|
||||
<p className="mb-0">
|
||||
<b>Hotline:</b> 0969123666
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="item-info flex">
|
||||
<i className="icons icon-time"></i>
|
||||
<p className="mb-0">
|
||||
<b>Thời gian làm việc:</b> 8h00 - 20h00
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<a href="https://g.page/hoanghapc?share" target="_blank" rel="nofollow noopener noreferrer" className="inline-flex items-center text-linear font-600 mt-4">
|
||||
Chỉ đường tới đây <i className="bxr bx-arrow-right-stroke"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="showroom-item bg-white overflow-hidden relative">
|
||||
<div className="item-triangle"> </div>
|
||||
|
||||
<div className="image">
|
||||
<img src="images/hoang_ha_pc_vinh.jpg" alt="HoangHaPc Vinh" width="1" height="1" className="block lazy"/>
|
||||
</div>
|
||||
|
||||
<div className="text">
|
||||
<p className="mb-2 uppercase text-[#004BA4] font-600"> TP. VINH, NGHỆ AN </p>
|
||||
|
||||
<div className="item-info flex mb-2">
|
||||
<i className="icons icon-location"></i>
|
||||
<p className="mb-0">
|
||||
<b>Địa chỉ:</b> Số 72 Lê Lợi, Phường Thành Vinh, Nghệ An
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="item-info flex mb-2">
|
||||
<i className="icons icon-phone"></i>
|
||||
<p className="mb-0">
|
||||
<b>Hotline:</b> 0969123666
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="item-info flex">
|
||||
<i className="icons icon-time"></i>
|
||||
<p className="mb-0">
|
||||
<b>Thời gian làm việc:</b> 8h30 - 18h30
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<a href="https://goo.gl/maps/1HQrD6mdf4VMYccs6" target="_blank" rel="nofollow noopener noreferrer" className="inline-flex items-center text-linear font-600 mt-4">
|
||||
Chỉ đường tới đây <i className="bxr bx-arrow-right-stroke"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="showroom-item bg-white overflow-hidden relative">
|
||||
<div className="item-triangle"> </div>
|
||||
|
||||
<div className="image">
|
||||
<img src="images/hoang-ha-pc-hcm.jpg" alt="HoangHaPc HỒ CHÍ MINH" width="1" height="1" className="block lazy"/>
|
||||
</div>
|
||||
|
||||
<div className="text">
|
||||
<p className="mb-2 uppercase text-[#004BA4] font-600"> QUẬN 10, HỒ CHÍ MINH </p>
|
||||
|
||||
<div className="item-info flex mb-2">
|
||||
<i className="icons icon-location"></i>
|
||||
<p className="mb-0">
|
||||
<b>Địa chỉ:</b> Số 260 Lý Thường Kiệt, Phường Diên Hồng, Hồ Chí Minh
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="item-info flex mb-2">
|
||||
<i className="icons icon-phone"></i>
|
||||
<p className="mb-0">
|
||||
<b>Hotline:</b> 0969123666
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="item-info flex">
|
||||
<i className="icons icon-time"></i>
|
||||
<p className="mb-0">
|
||||
<b>Thời gian làm việc:</b> 8h00 - 20h00
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<a href="https://maps.app.goo.gl/nTpvvoS6tkXBxqZg9" target="_blank" rel="nofollow noopener noreferrer" className="inline-flex items-center text-linear font-600 mt-4">
|
||||
Chỉ đường tới đây <i className="bxr bx-arrow-right-stroke"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
27
src/components/other/Footer/index.tsx
Normal file
27
src/components/other/Footer/index.tsx
Normal file
@@ -0,0 +1,27 @@
|
||||
import Showroom from './Showroom';
|
||||
import PageInfo from './Info';
|
||||
import Newsletter from './Newsletter';
|
||||
import Hotline from '../Global/Hotline';
|
||||
import FeedBack from '../Global/Feedback';
|
||||
import FixedButtons from '../Global/FixedButtons';
|
||||
|
||||
export default function Footer() {
|
||||
|
||||
return(
|
||||
<>
|
||||
<Newsletter />
|
||||
|
||||
<Showroom />
|
||||
|
||||
<PageInfo />
|
||||
|
||||
<FixedButtons />
|
||||
|
||||
<FeedBack />
|
||||
|
||||
<Hotline />
|
||||
|
||||
<div id="js-tooltip" className="absolute z-[999] w-[450px]" style={{ display: 'none' }}> {/* Tooltip */} </div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
70
src/components/other/Global/Feedback.tsx
Normal file
70
src/components/other/Global/Feedback.tsx
Normal file
@@ -0,0 +1,70 @@
|
||||
export default function FeedBack(){
|
||||
return(
|
||||
<div id="fancybox-feedback" className="fancybox-content-container max-w-[800px] w-full text-16 leading-6 hidden !p-0 !bg-transparent">
|
||||
<div className="bg-white overflow-hidden rounded-[12px]">
|
||||
<div className="text-center bg-[#0676DA] uppercase font-500 text-20 p-5 relative text-white">
|
||||
<p className="m-0"> Chúng tôi luôn lắng nghe mọi ý kiến đóng góp từ Quý khách </p>
|
||||
</div>
|
||||
|
||||
<div className="p-6 font-400">
|
||||
<p className="mb-4"> Vui lòng điền đầy đủ thông tin bên dưới để chúng tôi có thể hỗ trợ nhanh chóng và chính xác nhất. </p>
|
||||
|
||||
<div className="flex flex-wrap gap-3 lg:grid lg:gap-4 grid-cols-2 text-16 mb-4">
|
||||
<div className="col-span-1 w-full">
|
||||
<p className="font-600 mb-2"> Họ và tên <span className="red">*</span> </p>
|
||||
<input type="text" id="js-feedback-name" placeholder="Nhập họ và tên" className="block w-full h-[50px] rounded-[12px] px-4 bg-[#F3F3F3] border border-transparent placeholder:text-[#9B9B9B] placeholder:font-normal"/>
|
||||
</div>
|
||||
|
||||
<div className="col-span-1 w-full">
|
||||
<p className="font-600 mb-2"> Số điện thoại <span className="red">*</span> </p>
|
||||
<input type="text" id="js-feedback-phone" placeholder="Nhập số điện thoại" className="block w-full h-[50px] rounded-[12px] px-4 bg-[#F3F3F3] border border-transparent placeholder:text-[#9B9B9B] placeholder:font-normal"/>
|
||||
</div>
|
||||
|
||||
<div className="col-span-1 w-full">
|
||||
<p className="font-600 mb-2"> Email </p>
|
||||
<input type="text" id="js-feedback-email" placeholder="Nhập Email (tùy chọn)" className="block w-full h-[50px] rounded-[12px] px-4 bg-[#F3F3F3] border border-transparent placeholder:text-[#9B9B9B] placeholder:font-normal"/>
|
||||
</div>
|
||||
|
||||
<div className="col-span-1 w-full">
|
||||
<p className="font-600 mb-2"> Loại yêu cầu <span className="red">*</span> </p>
|
||||
<select id="js-feedback-type" className="block w-full h-[50px] rounded-[12px] px-4 bg-[#F3F3F3] border border-transparent placeholder:text-[#9B9B9B] placeholder:font-normal">
|
||||
<option value=""> Chọn loại yêu cầu </option>
|
||||
<option value="1"> Tư vấn sản phẩm </option>
|
||||
<option value="2"> Hỗ trợ kỹ thuật </option>
|
||||
<option value="3"> Khiếu nại dịch vụ </option>
|
||||
<option value="4"> Góp ý, phản hồi </option>
|
||||
<option value="5"> Khác </option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="col-span-2 w-full">
|
||||
<p className="font-600 mb-2"> Nội dung chi tiết </p>
|
||||
<textarea id="js-feedback-content" placeholder="Vui lòng ghi rõ thông tin yêu cầu, góp ý hoặc khiếu nại của Quý khách." className="block w-full p-[14px_16px] min-h-[160px] border border-transparent rounded-[12px] bg-[#F3F3F3] placeholder:text-[#9B9B9B] placeholder:font-normal resize-none outline-none"></textarea>
|
||||
</div>
|
||||
|
||||
<div className="col-span-2 w-full flex items-center justify-between flex-wrap gap-2 lg:gap-4">
|
||||
<p className="m-0"> Thời gian phản hồi mong muốn </p>
|
||||
|
||||
<select id="js-feedback-time" className="w-full max-w-[400px] h-[46px] rounded-[12px] px-4 bg-[#fff] border border-[#D6DAE1]">
|
||||
<option value=""> Thời gian phản hồi </option>
|
||||
<option value="1"> Trong ngày </option>
|
||||
<option value="2"> 1-3 ngày </option>
|
||||
<option value="3"> 3-7 ngày </option>
|
||||
<option value="4"> Trên 7 ngày </option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-[#757575] leading-4 my-6 flex items-center">
|
||||
<i className="bx bx-info-circle blue mr-1 text-16"></i>
|
||||
<span className="font-300"> Thông tin của Quý khách sẽ được chúng tôi bảo mật tuyệt đối và chỉ sử dụng nhằm mục đích hỗ trợ. </span>
|
||||
</p>
|
||||
|
||||
<p className="red my-4"></p>
|
||||
|
||||
<button type="button" aria-label="Gửi phản hồi" className="font-600 bg-btn border text-white block w-full max-w-[320px] mx-auto text-center mt-4 leading-[40px] rounded-[40px] uppercase border-0"> Gửi góp ý </button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
40
src/components/other/Global/FixedButtons.tsx
Normal file
40
src/components/other/Global/FixedButtons.tsx
Normal file
@@ -0,0 +1,40 @@
|
||||
'use client';
|
||||
import { useEffect, useState } from 'react'
|
||||
|
||||
export default function FixedButtons() {
|
||||
const [showGoTop, setShowGoTop] = useState(false);
|
||||
const [animate, setAnimate] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const onScroll = () => {
|
||||
setShowGoTop(window.scrollY > 250);
|
||||
};
|
||||
|
||||
window.addEventListener('scroll', onScroll);
|
||||
return () => window.removeEventListener('scroll', onScroll);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => setAnimate(true), 800);
|
||||
return () => clearTimeout(timer);
|
||||
}, []);
|
||||
|
||||
const goTop = () => {
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={`global-fixed-button-container ${animate ? 'animate__backInRight' : ''}`}>
|
||||
<a href="" target="_blank" rel="nofollow noopener noreferrer"> <i className="bx bxs-message-bubble-dots animation-beat"></i> </a>
|
||||
<a href="" target="_blank" rel="nofollow noopener noreferrer" style={{ backgroundImage: 'url(/images/icon-mess.png)' }}></a>
|
||||
<a href="" target="_blank" rel="nofollow noopener noreferrer"> <i className="bx bxs-phone animation-phone-ring"></i> </a>
|
||||
</div>
|
||||
|
||||
{showGoTop && (
|
||||
<button type="button" className="icon-goTop bxr bx-arrow-up-stroke" aria-label="Lên đầu trang"
|
||||
onClick={goTop}></button>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
170
src/components/other/Global/Hotline.tsx
Normal file
170
src/components/other/Global/Hotline.tsx
Normal file
@@ -0,0 +1,170 @@
|
||||
export default function Hotline() {
|
||||
return (
|
||||
<div id="fancybox-headphone" className="fancybox-content-container max-w-[720px] w-full text-16 leading-6 hidden !p-0 !bg-transparent">
|
||||
<div className="bg-white overflow-hidden rounded-[12px]">
|
||||
<div className="text-center bg-[#0676DA] uppercase font-500 text-20 p-5 relative text-white">
|
||||
<p className="m-0"> Liên hệ hotline để nhận được tư vấn tốt nhất </p>
|
||||
</div>
|
||||
|
||||
<div className="p-4 tooltip-content">
|
||||
|
||||
{/* HOÀNG HÀ PC HÀ NỘI */}
|
||||
<div className="last:mb-0 mb-4 bg-[#F2F6FF] rounded-[12px] p-4 grid grid-cols-1 md:grid-cols-2 gap-4 lg:gap-14">
|
||||
|
||||
<div>
|
||||
<div className="last:mb-0 mb-10">
|
||||
<p className="border-b border-[#DEE4EC] leading-6 pb-2 font-600 text-18 text-[#004BA4] mb-3"> HOÀNG HÀ PC CẦU GIẤY </p>
|
||||
|
||||
<div className="hotline-list">
|
||||
<p>
|
||||
<a href="tel:0969123666"> 0969123666 </a>
|
||||
<span> Mr.Long </span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<a href="tel:0922635999"> 0922635999 </a>
|
||||
<span> Mr. Thụ </span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="last:mb-0 mb-10">
|
||||
<p className="border-b border-[#DEE4EC] leading-6 pb-2 font-600 mb-3 text-14"> BẢO HÀNH - HỖ TRỢ KỸ THUẬT </p>
|
||||
|
||||
<div className="hotline-list">
|
||||
<p>
|
||||
<a href="tel:0976382666"> 0976382666 </a>
|
||||
<span> Mr. Dũng </span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<a href="tel:19006100"> 19006100 </a>
|
||||
<span> Bảo hành </span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="last:mb-0 mb-10">
|
||||
<p className="border-b border-[#DEE4EC] leading-6 pb-2 font-600 text-18 text-[#004BA4] mb-3"> HOÀNG HÀ PC ĐỐNG ĐA </p>
|
||||
|
||||
<div className="hotline-list">
|
||||
<p>
|
||||
<a href="tel:0396122999"> 0396122999 </a>
|
||||
<span> Mr.Nghĩa </span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<a href="tel:0396138999"> 0396138999 </a>
|
||||
<span> Mr. Huy </span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<a href="tel:0396178999"> 0396178999 </a>
|
||||
<span> Mr. Duy </span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<a href="tel:0397122122"> 0397122122 </a>
|
||||
<span> Mr. Tùng Anh </span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* HOÀNG HÀ PC MIỀN TRUNG */}
|
||||
<div className="last:mb-0 mb-4 bg-[#F2F6FF] rounded-[12px] p-4 grid grid-cols-1 md:grid-cols-2 gap-4 lg:gap-12">
|
||||
|
||||
<div>
|
||||
<div className="last:mb-0 mb-10">
|
||||
<p className="border-b border-[#DEE4EC] leading-6 pb-2 font-600 text-18 text-[#004BA4] mb-3"> HOÀNG HÀ PC MIỀN TRUNG </p>
|
||||
|
||||
<div className="hotline-list">
|
||||
<p>
|
||||
<a href="tel:0988163666"> 0988163666 </a>
|
||||
<span> Mr. Hưng </span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<a href="tel:0356072072"> 0356072072 </a>
|
||||
<span> Mr. Huy </span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="last:mb-0 mb-10">
|
||||
<p className="border-b border-[#DEE4EC] leading-6 pb-2 font-600 mb-3 text-14"> BẢO HÀNH - HỖ TRỢ KỸ THUẬT </p>
|
||||
|
||||
<div className="hotline-list">
|
||||
<p>
|
||||
<a href="tel:0358072072"> 0358072072 </a>
|
||||
<span> Mr.Toản </span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<a href="tel:19006100"> 19006100 </a>
|
||||
<span> Bảo hành </span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* HOÀNG HÀ PC HỒ CHÍ MINH */}
|
||||
<div className="last:mb-0 mb-4 bg-[#F2F6FF] rounded-[12px] p-4 grid grid-cols-1 md:grid-cols-2 gap-4 lg:gap-12">
|
||||
|
||||
<div>
|
||||
<div className="last:mb-0 mb-10">
|
||||
<p className="border-b border-[#DEE4EC] leading-6 pb-2 font-600 text-18 text-[#004BA4] mb-3"> HOÀNG HÀ PC ĐỐNG ĐA </p>
|
||||
|
||||
<div className="hotline-list">
|
||||
<p>
|
||||
<a href="tel:0968123666"> 0968123666 </a>
|
||||
<span> Mr. Bình </span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<a href="tel:0379260260"> 0379260260 </a>
|
||||
<span> Mr. Khanh </span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<a href="tel:0359072072"> 0359072072 </a>
|
||||
<span> Mr. Kiên </span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="last:mb-0 mb-10">
|
||||
<p className="border-b border-[#DEE4EC] leading-6 pb-2 font-600 mb-3 text-14"> BẢO HÀNH - HỖ TRỢ KỸ THUẬT </p>
|
||||
|
||||
<div className="hotline-list">
|
||||
<p>
|
||||
<a href="tel:0345260260"> 0345260260 </a>
|
||||
<span> Mr. Nhân </span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<a href="tel:19006100"> 19006100 </a>
|
||||
<span> Bảo hành </span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
47
src/components/other/Header/Account.tsx
Normal file
47
src/components/other/Header/Account.tsx
Normal file
@@ -0,0 +1,47 @@
|
||||
export default function Account(){
|
||||
return (
|
||||
<div className="header-account bg-[#003ED0] rounded-[30px] group">
|
||||
<button type="button" className="flex items-center justify-center gap-2 py-[6px] w-[103px]" aria-label="Tài khoản">
|
||||
<i className="icons icon-user"></i>
|
||||
<span className="text"> Đăng<br/>Nhập </span>
|
||||
</button>
|
||||
|
||||
<div className="bg-white text-[#000] text-16 leading-6 absolute top-[150%] right-0 whitespace-nowrap min-w-[220px] overflow-hidden rounded-md shadow-[0px_4px_10px_0px_#0000001a] transition-all duration-200 z-[-1] invisible opacity-0 group-hover:opacity-100 group-hover:visible group-hover:z-[9] group-hover:top-[100%] group-hover:visible">
|
||||
<a href="javascript:void(0)" className="flex items-center px-3 py-3 transition-all duration-100 hover:bg-[#0676DA] hover:text-white">
|
||||
<i className="bx bx-user w-5 h-5 text-center mr-2 text-20"></i>
|
||||
<span>Đăng ký</span>
|
||||
</a>
|
||||
|
||||
<a href="javascript:void(0)" className="flex items-center px-3 py-3 transition-all duration-100 hover:bg-[#0676DA] hover:text-white">
|
||||
<i className="bx bx-user w-5 h-5 text-center mr-2 text-20"></i>
|
||||
<span>Đăng nhập</span>
|
||||
</a>
|
||||
|
||||
<a href="/taikhoan?view=change-info" className="flex items-center px-3 py-3 transition-all duration-100 hover:bg-[#0676DA] hover:text-white">
|
||||
<i className="bx bx-user w-5 h-5 text-center mr-2 text-20"></i>
|
||||
<span>Thông tin tài khoản</span>
|
||||
</a>
|
||||
|
||||
<a href="/taikhoan?view=order" className="flex items-center px-3 py-3 transition-all duration-100 hover:bg-[#0676DA] hover:text-white">
|
||||
<i className="bx bx-list-ul-square w-5 h-5 text-center mr-2 text-20"></i>
|
||||
<span>Danh sách đơn hàng</span>
|
||||
</a>
|
||||
|
||||
<a href="/san-pham-da-xem" className="flex items-center px-3 py-3 transition-all duration-100 hover:bg-[#0676DA] hover:text-white">
|
||||
<i className="bx bx-eye w-5 h-5 text-center mr-2 text-20"></i>
|
||||
<span>Sản phẩm đã xem</span>
|
||||
</a>
|
||||
|
||||
<a href="/taikhoan?view=change-pass" className="flex items-center px-3 py-3 transition-all duration-100 hover:bg-[#0676DA] hover:text-white">
|
||||
<i className="bx bx-lock w-5 h-5 text-center mr-2 text-20"></i>
|
||||
<span>Thay đổi mật khẩu</span>
|
||||
</a>
|
||||
|
||||
<a href="/logout.php" className="flex items-center px-3 py-3 transition-all duration-100 hover:bg-[#0676DA] hover:text-white">
|
||||
<i className="bx bx-arrow-out-right-square-half w-5 h-5 text-center mr-2 text-20"></i>
|
||||
<span>Thoát tài khoản</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
19
src/components/other/Header/Cart.tsx
Normal file
19
src/components/other/Header/Cart.tsx
Normal file
@@ -0,0 +1,19 @@
|
||||
export default function Cart(){
|
||||
return(
|
||||
<>
|
||||
<div className="header-cart-item" id="js-header-cart">
|
||||
<a href="/cart" rel="nofollow" className="flex items-center">
|
||||
<i className="icon-cart relative mr-[10px]">
|
||||
<b className="js-cart-count cart-count">0</b>
|
||||
</i>
|
||||
<span className="text"> Giỏ <br/>Hàng </span>
|
||||
</a>
|
||||
|
||||
<div className="header-cart-hover" id="js-header-cart-holder">
|
||||
<div className="cart-items-holder"><div className="cart-item"><a href="/o-cung-di-dong-ssd-transcend-esd310-1tb" className="cart-img"><img src="https://mygear.io.vn/media/product/75-6728-transcend-esd310-theme.jpg"/></a><div className="cart-text"><a href="/o-cung-di-dong-ssd-transcend-esd310-1tb" className="d-block font-700" style={{ marginBottom: '5px' }}>Ổ Cứng Di Động SSD Transcend ESD310 1TB</a><p className="font-300" style={{ margin: '5px 0' }}> Màu sắc : <b>Màu Đen</b></p><p className="m-0 d-flex justify-content-between"><b>x2</b><b className="red">4.580.000 đ</b></p></div></div><div className="cart-item"><a href="/msi-pro-b860-p-wifi" className="cart-img"><img src="https://mygear.io.vn/media/product/75-7042-pro-b860-p-wifi-1.jpg"/></a><div className="cart-text"><a href="/msi-pro-b860-p-wifi" className="d-block font-700" style={{ marginBottom: '5px' }}>Mainboard MSI PRO B860-P WIFI DDR5</a><p className="m-0 d-flex justify-content-between"><b>x1</b><b className="red">6.190.000 đ</b></p></div></div></div><div className="cart-price-hover"><p className="grey m-0 text-right"> Tổng tiền hàng (<span className="red"><span className="js-cart-count">3</span> sản phẩm</span>): <span className="red text-18 font-600" style={{ verticalAlign: 'top' }}> 10.770.000đ </span></p><a href="/cart" className="d-block text-center text-white btn-goCart"> THANH TOÁN NGAY </a></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</>
|
||||
)
|
||||
}
|
||||
7
src/components/other/Header/Logo.tsx
Normal file
7
src/components/other/Header/Logo.tsx
Normal file
@@ -0,0 +1,7 @@
|
||||
export default function Logo(){
|
||||
return(
|
||||
<a href="/">
|
||||
<img src="/images/logo.png" alt="logo" width={1} height={1} className="block w-auto max-h-[56px]" />
|
||||
</a>
|
||||
)
|
||||
}
|
||||
15
src/components/other/Header/Menu.tsx
Normal file
15
src/components/other/Header/Menu.tsx
Normal file
File diff suppressed because one or more lines are too long
12
src/components/other/Header/Search.tsx
Normal file
12
src/components/other/Header/Search.tsx
Normal file
@@ -0,0 +1,12 @@
|
||||
export default function Search(){
|
||||
return(
|
||||
<div className="header-search-group w-[440px] relative">
|
||||
<form method="get" action="/tim" name="search" className="flex items-center justify-between p-[6px] pl-5 bg-white rounded-[30px]">
|
||||
<input type="text" id="js-global-search" name="q" placeholder="Nhập từ khóa tìm kiếm" defaultValue="" autoComplete="off" className="w-[calc(100%_-_36px)] pr-3 placeholder:!text-[#5F5F5F] placeholder:!text-[14px] h-9" />
|
||||
<button type="button" id="js-search-btn" aria-labelledby="js-global-search" className="bg-linear rounded-full w-9 h-9"><i className="block !w-full !h-full icons icon-search"></i></button>
|
||||
</form>
|
||||
|
||||
<div className="autocomplete-suggestions" id="js-search-holder"> </div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
93
src/components/other/Header/index.tsx
Normal file
93
src/components/other/Header/index.tsx
Normal file
@@ -0,0 +1,93 @@
|
||||
'use client';
|
||||
import { useEffect, useState } from 'react';
|
||||
import Logo from "./Logo";
|
||||
import Menu from "./Menu";
|
||||
import Search from "./Search";
|
||||
import Cart from "./Cart";
|
||||
import Account from "./Account";
|
||||
import { usePathname } from 'next/navigation'
|
||||
|
||||
export default function Header() {
|
||||
const pathname = usePathname()
|
||||
const isHome = pathname === '/';
|
||||
|
||||
const [isSticky, setIsSticky] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const scrollTop = isHome ? 800 : 400;
|
||||
const onScroll = () => {
|
||||
setIsSticky(window.scrollY > scrollTop);
|
||||
};
|
||||
|
||||
window.addEventListener('scroll', onScroll);
|
||||
return () => window.removeEventListener('scroll', onScroll);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={`global-header-container py-5 ${isSticky ? 'is-fixed' : ''} ${isHome && !isSticky ? 'header-homepage' : ''}`}>
|
||||
<div className="container flex items-center justify-between gap-5 relative">
|
||||
<div className="header-left-group w-[205px]">
|
||||
<Logo />
|
||||
</div>
|
||||
|
||||
<div className="header-middle-group w-[583px] flex items-center justify-between gap-2">
|
||||
<Menu />
|
||||
|
||||
<Search />
|
||||
</div>
|
||||
|
||||
<div className="header-right-group relative flex items-center justify-between gap-4 w-[420px] text-white leading-[18px] font-500">
|
||||
<a href="#fancybox-headphone" className="flex items-center gap-2" data-fancybox>
|
||||
<i className="icons icon-headphone"></i>
|
||||
<span className="text"> Hotline<br/> Mua Hàng </span>
|
||||
</a>
|
||||
|
||||
<a href="/he-thong-cua-hang" className="flex items-center gap-2">
|
||||
<i className="icons icon-showroom"></i>
|
||||
<span className="text"> Hệ thống<br/> Showroom </span>
|
||||
</a>
|
||||
|
||||
<Cart />
|
||||
|
||||
<Account />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white shadow-[0px_4px_20px_0px_#004AA11A] text-16 font-500 mb-5">
|
||||
<div className="container flex items-center justify-between leading-[20px] py-[17px]">
|
||||
<a href="/buildpc" className="flex items-center gap-2 hover:text-[#0678DB]">
|
||||
<i className="icons icon-buildpc"></i>
|
||||
<span> Xây Dựng Cấu Hình </span>
|
||||
</a>
|
||||
|
||||
<a href="/designer-tool" className="flex items-center gap-2 hover:text-[#0678DB]">
|
||||
<i className="icons icon-tool"></i>
|
||||
<span> PC Đồ Họa Tool </span>
|
||||
</a>
|
||||
|
||||
<a href="/tin-khuyen-mai" className="flex items-center gap-2 hover:text-[#0678DB]">
|
||||
<i className="icons icon-promotion"></i>
|
||||
<span> Chương Trình Khuyến Mãi </span>
|
||||
</a>
|
||||
|
||||
<a href="/tin-tuc" className="flex items-center gap-2 hover:text-[#0678DB]">
|
||||
<i className="icons icon-news"></i>
|
||||
<span> Tin Tức Công Nghệ </span>
|
||||
</a>
|
||||
|
||||
<a href="/chinh-sach-bao-hanh" className="flex items-center gap-2 hover:text-[#0678DB]">
|
||||
<i className="icons icon-warranty"></i>
|
||||
<span> Bảo Hành Tận Nhà </span>
|
||||
</a>
|
||||
|
||||
<a href="#fancybox-feedback" data-fancybox="" className="flex items-center gap-2 hover:text-[#0678DB]">
|
||||
<i className="icons icon-feedback"></i>
|
||||
<span> Feedback </span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
1243
src/components/product/Category/index.tsx
Normal file
1243
src/components/product/Category/index.tsx
Normal file
File diff suppressed because it is too large
Load Diff
2321
src/components/product/ProductDetail/index.tsx
Normal file
2321
src/components/product/ProductDetail/index.tsx
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user