up
This commit is contained in:
@@ -1,109 +1,128 @@
|
||||
"use client";
|
||||
import { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
|
||||
export default function Header() {
|
||||
// State để kiểm tra trạng thái của menu
|
||||
const [menuActive, setMenuActive] = useState(false);
|
||||
|
||||
const handleMenuClick = () => {
|
||||
setMenuActive(!menuActive); // Toggle trạng thái của menu
|
||||
};
|
||||
|
||||
return (
|
||||
<header className="header">
|
||||
<div className="container">
|
||||
<div className="content-header-main flex items-center justify-between">
|
||||
<Link href="/" className="logo">
|
||||
<Image src="/images/logo.png" width={100} height={100} alt="logo" />
|
||||
</Link>
|
||||
<div className="menu-right flex items-center">
|
||||
<div className="item">
|
||||
<Link href="/page/dich-vu.html" className="title">
|
||||
Sản phẩm
|
||||
</Link>
|
||||
<div className="hover-menu">
|
||||
<div className="item-menu">
|
||||
<div className="top">
|
||||
<div className="icon">
|
||||
<Image
|
||||
src="/images/icon-hura8.png"
|
||||
width={100}
|
||||
height={16}
|
||||
alt="hura 8"
|
||||
/>
|
||||
<header>
|
||||
<div className="header">
|
||||
<div className="container">
|
||||
<div className="content-header-main flex items-center justify-between">
|
||||
<Link href="/" className="logo">
|
||||
<Image
|
||||
src="/images/logo.png"
|
||||
width={100}
|
||||
height={100}
|
||||
alt="logo"
|
||||
/>
|
||||
</Link>
|
||||
<div className="menu-right flex items-center">
|
||||
<div
|
||||
className={`item ${menuActive ? "active" : ""}`}
|
||||
onClick={handleMenuClick}
|
||||
id="menu_product"
|
||||
>
|
||||
<div className="title">Sản phẩm</div>
|
||||
<div className={`hover-menu ${menuActive ? "active" : ""}`}>
|
||||
<div className="item-menu">
|
||||
<div className="top">
|
||||
<div className="icon">
|
||||
<Image
|
||||
src="/images/icon-hura8.png"
|
||||
width={100}
|
||||
height={16}
|
||||
alt="hura 8"
|
||||
/>
|
||||
</div>
|
||||
<p className="txt line-clamp-4">
|
||||
Tốt nhất cho hoạt động thương mại điện tử của doanh
|
||||
nghiệp
|
||||
</p>
|
||||
</div>
|
||||
<p className="txt line-clamp-4">
|
||||
Tốt nhất cho hoạt động thương mại điện tử của doanh nghiệp
|
||||
</p>
|
||||
<a href="" className="more">
|
||||
<i className="fa-solid fa-arrow-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
<a href="" className="more">
|
||||
<i className="fa-solid fa-arrow-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div className="item-menu">
|
||||
<div className="top">
|
||||
<div className="icon">
|
||||
<Image
|
||||
src="/images/icon-xstore.png"
|
||||
width={100}
|
||||
height={16}
|
||||
alt="xstore"
|
||||
/>
|
||||
<div className="item-menu">
|
||||
<div className="top">
|
||||
<div className="icon">
|
||||
<Image
|
||||
src="/images/icon-xstore.png"
|
||||
width={100}
|
||||
height={16}
|
||||
alt="xstore"
|
||||
/>
|
||||
</div>
|
||||
<p className="txt line-clamp-4">
|
||||
Bộ sản phẩm về quản lý đơn hàng, hàng tồn kho và khách
|
||||
hàng dành cho các doanh nghiệp vừa và nhỏ. Được bổ sung
|
||||
với một POS thông minh.
|
||||
</p>
|
||||
</div>
|
||||
<p className="txt line-clamp-4">
|
||||
Bộ sản phẩm về quản lý đơn hàng, hàng tồn kho và khách
|
||||
hàng dành cho các doanh nghiệp vừa và nhỏ. Được bổ sung
|
||||
với một POS thông minh.
|
||||
</p>
|
||||
<a href="" className="more">
|
||||
<i className="fa-solid fa-arrow-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
<a href="" className="more">
|
||||
<i className="fa-solid fa-arrow-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div className="item-menu">
|
||||
<div className="top">
|
||||
<div className="icon">
|
||||
<Image
|
||||
src="/images/icon-adman.png"
|
||||
width={100}
|
||||
height={16}
|
||||
alt="icon-adman"
|
||||
/>
|
||||
<div className="item-menu">
|
||||
<div className="top">
|
||||
<div className="icon">
|
||||
<Image
|
||||
src="/images/icon-adman.png"
|
||||
width={100}
|
||||
height={16}
|
||||
alt="icon-adman"
|
||||
/>
|
||||
</div>
|
||||
<p className="txt line-clamp-4">
|
||||
Nền tảng tiếp thị toàn diện dành cho các chuyên gia.
|
||||
</p>
|
||||
</div>
|
||||
<p className="txt line-clamp-4">
|
||||
Nền tảng tiếp thị toàn diện dành cho các chuyên gia.
|
||||
</p>
|
||||
<a href="" className="more">
|
||||
<i className="fa-solid fa-arrow-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
<a href="" className="more">
|
||||
<i className="fa-solid fa-arrow-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div className="item-menu chatngay">
|
||||
<div className="top">
|
||||
<div className="icon">
|
||||
<Image
|
||||
src="/images/icon-chatngay.png"
|
||||
width={100}
|
||||
height={16}
|
||||
alt="icon-chatngay"
|
||||
/>
|
||||
<div className="item-menu chatngay">
|
||||
<div className="top">
|
||||
<div className="icon">
|
||||
<Image
|
||||
src="/images/icon-chatngay.png"
|
||||
width={100}
|
||||
height={16}
|
||||
alt="icon-chatngay"
|
||||
/>
|
||||
</div>
|
||||
<p className="txt line-clamp-4">
|
||||
Giúp khách hàng đang truy cập website trò chuyện với bạn
|
||||
một cách đơn giản, nhanh chóng và thuận tiện.
|
||||
</p>
|
||||
</div>
|
||||
<p className="txt line-clamp-4">
|
||||
Giúp khách hàng đang truy cập website trò chuyện với bạn
|
||||
một cách đơn giản, nhanh chóng và thuận tiện.
|
||||
</p>
|
||||
<a href="" className="more">
|
||||
<i className="fa-solid fa-arrow-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
<a href="" className="more">
|
||||
<i className="fa-solid fa-arrow-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<Link href="/job/page_job_introduction" className="item">
|
||||
Tuyển dụng
|
||||
</Link>
|
||||
<Link href="/article" className="item">
|
||||
Blog
|
||||
</Link>
|
||||
<Link href="/contact" className="item">
|
||||
Liên hệ
|
||||
</Link>
|
||||
<Link href="javascript:void(0)" className="item">
|
||||
<i className="icon_2024 global"></i>
|
||||
</Link>
|
||||
</div>
|
||||
<Link href="/tuyen-dung" className="item">
|
||||
Tuyển dụng
|
||||
</Link>
|
||||
<Link href="/tin-tuc" className="item">
|
||||
Blog
|
||||
</Link>
|
||||
<Link href="/lien-he" className="item">
|
||||
Liên hệ
|
||||
</Link>
|
||||
<Link href="javascript:void(0)" className="item">
|
||||
<i className="icon_2024 global"></i>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user