upload 29/12
This commit is contained in:
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>
|
||||
</>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user