minhnhat/uldp.edu.vn
1
0
Fork 0
forked from UKSOURCE/hailearning.edu.vn
Code Pull Requests 1 Activity

build ui header, footer, home page, about page

Browse Source
This commit is contained in:
Le Nhut Huy
2026-02-02 16:16:11 +07:00
parent 8d105dda9c
commit d24b9ed33e
38 changed files with 4336 additions and 451 deletions
Download Patch File Download Diff File Expand all files Collapse all files

154
app/components/layout/Header/HeaderBottom.tsx Normal file
View File

@@ -0,0 +1,154 @@
'use client';
import Link from 'next/link';
import HeaderMenu from './HeaderMenu';
const homeMegaMenu = (
<>
<div className="homemenu">
<div className="homemenu-thumb">
<img src="/assets/img/header/home-1.jpg" alt="img" />
<div className="demo-button">
<Link href="/" className="theme-btn">
Multi Page <i className="fa-solid fa-arrow-right"></i>
</Link>
</div>
</div>
<div className="homemenu-content text-center">
<h4 className="homemenu-title">
Home 01
</h4>
</div>
</div>
<div className="homemenu">
<div className="homemenu-thumb mb-15">
<img src="/assets/img/header/home-2.jpg" alt="img" />
<div className="demo-button">
<Link href="/index-2" className="theme-btn">
Multi Page <i className="fa-solid fa-arrow-right"></i>
</Link>
</div>
</div>
<div className="homemenu-content text-center">
<h4 className="homemenu-title">
Home 02
</h4>
</div>
</div>
<div className="homemenu">
<div className="homemenu-thumb mb-15">
<img src="/assets/img/header/home-3.jpg" alt="img" />
<div className="demo-button">
<Link href="/index-3" className="theme-btn">
Multi Page <i className="fa-solid fa-arrow-right"></i>
</Link>
</div>
</div>
<div className="homemenu-content text-center">
<h4 className="homemenu-title">
Home 03
</h4>
</div>
</div>
</>
);
const menuItems = [
{
label: 'Home',
href: '/',
megaMenuContent: homeMegaMenu
},
{
label: 'About Us',
href: '/about'
},
{
label: 'Pages',
href: '#',
submenu: [
{
label: 'Service',
href: '#',
submenu: [
{ label: 'Service', href: '/service' },
{ label: 'Service Details', href: '/service-details' }
]
},
{
label: 'Country List',
href: '#',
submenu: [
{ label: 'Country List', href: '/country-list' },
{ label: 'Country Details', href: '/country-details' }
]
},
{ label: 'Our Pricing', href: '/pricing' },
{ label: 'Appointment', href: '/appointment' },
{ label: '404 Page', href: '/404' },
{ label: 'Coming Soon', href: '/coming-soon' }
]
},
{
label: 'VISA',
href: '#',
submenu: [
{ label: 'Visa List', href: '/country-list' },
{ label: 'Visa Details', href: '/country-details' }
]
},
{
label: 'Blog',
href: '#',
submenu: [
{ label: 'Blog Grid', href: '/news-grid' },
{ label: 'Blog Standard', href: '/news' },
{ label: 'Blog Details', href: '/news-details' }
]
},
{
label: 'Contact Us',
href: '/contact'
}
];
const HeaderBottom = () => {
return (
<header id="header-sticky" className="header-1">
<div className="container-fluid">
<div className="mega-menu-wrapper">
<div className="header-main">
<div className="header-left">
<div className="logo">
<Link href="/" className="header-logo-2">
<img src="/assets/img/logo/black-logo.svg" alt="logo-img" />
</Link>
</div>
<div className="mean__menu-wrapper">
<HeaderMenu menuItems={menuItems} />
</div>
</div>
<div className="header-right d-flex align-items-center mt-0">
<div className="header-call-item">
<a href="#" className="main-header__search search-toggler">
<i className="fa-regular fa-magnifying-glass"></i>
</a>
<Link href="/contact" className="theme-btn">
Apply now
<i className="fa-solid fa-arrow-right"></i>
</Link>
<div className="header__hamburger my-auto">
<div className="sidebar__toggle">
<i className="fa-solid fa-bars-staggered"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
);
};
export default HeaderBottom;