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

17
app/components/layout/Container.tsx Normal file
View File

@@ -0,0 +1,17 @@
import React from 'react';
interface ContainerProps {
children: React.ReactNode;
className?: string;
fluid?: boolean;
}
const Container: React.FC<ContainerProps> = ({ children, className = '', fluid = false }) => {
return (
<div className={`${fluid ? 'container-fluid' : 'container'} ${className}`}>
{children}
</div>
);
};
export default Container;

13
app/components/layout/Footer/Footer.tsx Normal file
View File

@@ -0,0 +1,13 @@
import FooterTop from './FooterTop';
import FooterBottom from './FooterBottom';
const Footer = () => {
return (
<>
<FooterTop />
<FooterBottom />
</>
);
};
export default Footer;

28
app/components/layout/Footer/FooterBottom.tsx Normal file
View File

@@ -0,0 +1,28 @@
import Link from 'next/link';
const FooterBottom = () => {
return (
<div className="footer-bottom">
<div className="container">
<div className="footer-wrapper">
<p>
Copyright© <span>GRAMENTHEME</span> All Rights Reserved.
</p>
<ul className="bottom-list">
<li>
<Link href="/contact">Terms & Conditions</Link>
</li>
<li>
<Link href="/contact">Privacy Policy</Link>
</li>
<li>
<Link href="/contact">Contact Us</Link>
</li>
</ul>
</div>
</div>
</div>
);
};
export default FooterBottom;

55
app/components/layout/Footer/FooterTop.tsx Normal file
View File

@@ -0,0 +1,55 @@
import Link from 'next/link';
const FooterTop = () => {
return (
<footer className="footer-section fix bg-cover" style={{ backgroundImage: "url('/assets/img/home-1/footer-bg.jpg')" }}>
<div className="container">
<div className="footer-wrapper">
<div className="row">
<div className="col-xl-12">
<div className="footer-item">
<h2>
<a href="tel:+16336547896">+84 961 83 4040</a>
</h2>
<h2 className="text">734 Luy Ban Bich St, Tan Thanh Ward, Tan Phu Dist, HCMC</h2>
<div className="footer-list-item">
<Link href="/">
<img src="/assets/img/logo/white-logo.svg" alt="img" />
</Link>
<ul className="footer-list">
<li>
<Link href="/">Home</Link>
</li>
<li>
<Link href="/about">About Us</Link>
</li>
<li>
<Link href="/country-details">Visa</Link>
</li>
<li>
<Link href="/news-details">Pages</Link>
</li>
<li>
<Link href="/news">Article</Link>
</li>
<li>
<Link href="/contact">Contact Us</Link>
</li>
</ul>
<div className="social-icon">
<a href="#"><i className="fa-brands fa-twitter"></i></a>
<a href="#"><i className="fa-brands fa-instagram"></i></a>
<a href="#"><i className="fa-brands fa-linkedin"></i></a>
<a href="#"><i className="fa-brands fa-youtube"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</footer>
);
};
export default FooterTop;

25
app/components/layout/Header/Header.tsx Normal file
View File

@@ -0,0 +1,25 @@
import HeaderTop from './HeaderTop';
import HeaderBottom from './HeaderBottom';
const Header = () => {
return (
<>
<HeaderTop />
<HeaderBottom />
{/* Search Popup - kept here for now as part of header logic/structure */}
<div className="search-popup">
<div className="search-popup__overlay search-toggler"></div>
<div className="search-popup__content">
<form role="search" method="get" className="search-popup__form" action="#">
<input type="text" id="search" name="search" placeholder="Search Here..." />
<button type="submit" aria-label="search submit" className="search-btn">
<span><i className="fa-regular fa-magnifying-glass"></i></span>
</button>
</form>
</div>
</div>
</>
);
};
export default Header;

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;

68
app/components/layout/Header/HeaderMenu.tsx Normal file
View File

@@ -0,0 +1,68 @@
import Link from 'next/link';
interface MenuItem {
label: string;
href: string;
submenu?: MenuItem[];
isMegaMenu?: boolean; // For Home demo images if needed, though simple recursion handles most
megaMenuContent?: React.ReactNode; // Flexible slot for complex mega menus
}
interface HeaderMenuProps {
menuItems: MenuItem[];
}
const HeaderMenu: React.FC<HeaderMenuProps> = ({ menuItems }) => {
return (
<div className="main-menu">
<nav id="mobile-menu">
<ul>
{menuItems.map((item, index) => (
<li key={index} className={`${item.submenu || item.megaMenuContent ? 'has-dropdown' : ''} ${item.href === 'index.html' ? 'active menu-thumb' : ''}`}>
<Link href={item.href} className={item.href === 'index.html' ? '' : 'border-none'}>
{item.label}
{(item.submenu || item.megaMenuContent) && <i className="fas fa-angle-down"></i>}
</Link>
{/* Standard Submenu */}
{item.submenu && !item.megaMenuContent && (
<ul className="submenu">
{item.submenu.map((subItem, subIndex) => (
<li key={subIndex} className={subItem.submenu ? 'has-dropdown' : ''}>
<Link href={subItem.href}>
{subItem.label}
{subItem.submenu && <i className="fas fa-angle-right"></i>}
</Link>
{subItem.submenu && (
<ul className="submenu">
{subItem.submenu.map((nestedItem, nestedIndex) => (
<li key={nestedIndex}>
<Link href={nestedItem.href}>{nestedItem.label}</Link>
</li>
))}
</ul>
)}
</li>
))}
</ul>
)}
{/* Custom Mega Menu (like Home) */}
{item.megaMenuContent && (
<ul className="submenu has-homemenu">
<li>
<div className="homemenu-items">
{item.megaMenuContent}
</div>
</li>
</ul>
)}
</li>
))}
</ul>
</nav>
</div>
);
};
export default HeaderMenu;

63
app/components/layout/Header/HeaderTop.tsx Normal file
View File

@@ -0,0 +1,63 @@
import Link from 'next/link';
const HeaderTop = () => {
return (
<div className="header-top-section">
<div className="container-fluid">
<div className="header-top-wrapper">
<div className="header-left">
<ul className="list d-flex align-items-center mb-0 p-0 list-unstyled">
<li className="style-2 d-flex align-items-center me-4">
<span className="me-2">Help Line</span>
<i className="fa-solid fa-phone me-2"></i>
<a href="tel:+84961834040">+84 961 83 4040</a>
</li>
<li className="d-flex align-items-center me-4">
<i className="fa-solid fa-location-dot me-2"></i>
734 Luy Ban Bich St, Tan Thanh Ward, Tan Phu Dist, HCMC
</li>
<li className="d-flex align-items-center">
<i className="fa-solid fa-envelope me-2"></i>
<a href="mailto:get-info@hai.edu.vn">get-info@hai.edu.vn</a>
</li>
</ul>
</div>
<div className="header-right">
<div className="flag-wrap">
<div className="flag">
<i className="fa-solid fa-globe"></i>
</div>
<div className="nice-select" tabIndex={0}>
<span className="current">
English
</span>
<ul className="list">
<li data-value="1" className="option selected focus">
English
</li>
<li data-value="1" className="option">
Bangla
</li>
<li data-value="1" className="option">
Hindi
</li>
</ul>
</div>
</div>
<div className="social-item">
<a href="#"><i className="fa-brands fa-linkedin"></i></a>
<a href="#"><i className="fa-brands fa-twitter"></i></a>
<a href="#"><i className="fa-brands fa-instagram"></i></a>
<a href="#"><i className="fa-brands fa-youtube"></i></a>
</div>
</div>
</div>
</div>
</div>
);
};
export default HeaderTop;