Team and service update
This commit is contained in:
@ -3,9 +3,11 @@
|
||||
import React, { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import { usePathname } from "next/navigation";
|
||||
|
||||
const Header = () => {
|
||||
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
||||
const pathname = usePathname();
|
||||
|
||||
const closeAllMenus = () => {
|
||||
setIsMenuOpen(false);
|
||||
@ -25,78 +27,98 @@ const Header = () => {
|
||||
|
||||
return (
|
||||
<header className="sticky bg-white top-0 z-50 shadow-sm">
|
||||
<div className="container max-w-none mx-auto px-4 sm:px-6">
|
||||
<div className="flex justify-between items-center py-3 sm:py-4">
|
||||
{/* Left Logo */}
|
||||
<div className="flex-shrink-0">
|
||||
<Link href="/" onClick={closeAllMenus} className="flex items-center">
|
||||
<div className="relative w-60 sm:w-80 h-14 sm:h-18 mr-3 rounded overflow-hidden">
|
||||
<Image
|
||||
src="/images/finalcmclogo.svg"
|
||||
alt="CMC Logo"
|
||||
fill
|
||||
className="object-fill"
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Desktop Navigation */}
|
||||
<nav className="hidden lg:flex items-center space-x-3 xl:space-x-5">
|
||||
{menuItems.map((item, idx) => (
|
||||
<Link
|
||||
key={idx}
|
||||
href={item.href}
|
||||
className="text-blue-900 hover:text-red-600 transition-colors font-medium text-sm xl:text-base whitespace-nowrap"
|
||||
onClick={closeAllMenus}
|
||||
>
|
||||
{item.label}
|
||||
{/* Top section with logos */}
|
||||
<div className="border-b border-gray-200">
|
||||
<div className="container max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex justify-between items-center py-1.5 sm:py-2">
|
||||
{/* Left Logo */}
|
||||
<div className="flex-1 flex justify-start">
|
||||
<Link href="/" onClick={closeAllMenus} className="flex items-center">
|
||||
<div className="relative w-64 sm:w-80 md:w-96 lg:w-[420px] h-16 sm:h-18 md:h-20 lg:h-22">
|
||||
<Image
|
||||
src="/images/finalcmclogo.svg"
|
||||
alt="CMC Logo"
|
||||
fill
|
||||
className="object-contain object-left"
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
{/* Right side - Logo with Batch ID and Mobile Menu Button */}
|
||||
<div className="flex items-center gap-4">
|
||||
{/* Right Logo with Batch ID */}
|
||||
<div className="flex flex-col items-center">
|
||||
<div className="relative w-16 h-16 sm:w-20 sm:h-20 rounded overflow-hidden">
|
||||
<Image
|
||||
src="/images/rightlogo.png"
|
||||
alt="Batch Logo"
|
||||
fill
|
||||
className="object-contain"
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
<span className="text-xs sm:text-sm font-semibold text-blue-900 mt-1 whitespace-nowrap">
|
||||
H-2024-1431
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Mobile menu button */}
|
||||
{/* Right Logo with Batch ID */}
|
||||
<div className="flex-1 flex justify-end">
|
||||
<div className="flex flex-col items-center justify-center">
|
||||
<div className="relative w-16 h-16 sm:w-18 sm:h-18 md:w-20 md:h-20 lg:w-[88px] lg:h-[88px]">
|
||||
<Image
|
||||
src="/images/rightlogo.png"
|
||||
alt="Batch Logo"
|
||||
fill
|
||||
className="object-contain"
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
<span className="text-[10px] sm:text-xs lg:text-sm font-bold text-blue-900 -mt-1 whitespace-nowrap">
|
||||
H-2024-1431
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom section with menu */}
|
||||
<div className="bg-blue-900">
|
||||
<div className="container max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex justify-between items-center">
|
||||
{/* Desktop Navigation */}
|
||||
<nav className="hidden lg:flex items-center w-full">
|
||||
<div className="flex items-center w-full">
|
||||
{menuItems.map((item, idx) => {
|
||||
const isActive = pathname === item.href ||
|
||||
(item.href !== "/" && pathname.startsWith(item.href));
|
||||
return (
|
||||
<Link
|
||||
key={idx}
|
||||
href={item.href}
|
||||
className={`font-medium text-sm xl:text-[15px] whitespace-nowrap px-4 xl:px-5 py-3.5 transition-colors flex-1 text-center ${
|
||||
isActive
|
||||
? "text-white bg-red-600"
|
||||
: "text-white hover:bg-red-600"
|
||||
}`}
|
||||
onClick={closeAllMenus}
|
||||
>
|
||||
{item.label}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{/* Mobile menu button - More visible */}
|
||||
<button
|
||||
className="lg:hidden p-2 text-blue-900 hover:text-red-600 transition-colors"
|
||||
className="lg:hidden p-3 text-white hover:bg-red-600 transition-colors w-full flex items-center justify-between"
|
||||
onClick={() => setIsMenuOpen(!isMenuOpen)}
|
||||
aria-label="Toggle menu"
|
||||
>
|
||||
<span className="font-medium text-sm sm:text-base">Menu</span>
|
||||
<svg
|
||||
className="w-6 h-6"
|
||||
className="w-6 h-6 sm:w-7 sm:h-7"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
strokeWidth={2.5}
|
||||
>
|
||||
{isMenuOpen ? (
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
/>
|
||||
) : (
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M4 6h16M4 12h16M4 18h16"
|
||||
/>
|
||||
)}
|
||||
@ -106,22 +128,30 @@ const Header = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile Menu */}
|
||||
{/* Mobile Menu Dropdown */}
|
||||
{isMenuOpen && (
|
||||
<div className="lg:hidden bg-gray-100 border-t border-blue-900">
|
||||
<nav className="px-4 py-4">
|
||||
<ul className="space-y-4">
|
||||
{menuItems.map((item, idx) => (
|
||||
<li key={idx}>
|
||||
<Link
|
||||
href={item.href}
|
||||
className="block font-medium py-2 text-blue-900 hover:text-red-600 transition-colors"
|
||||
onClick={closeAllMenus}
|
||||
>
|
||||
{item.label}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
<div className="lg:hidden bg-white border-t border-gray-200 shadow-lg">
|
||||
<nav className="container max-w-7xl mx-auto px-4 sm:px-6 py-2">
|
||||
<ul className="space-y-1">
|
||||
{menuItems.map((item, idx) => {
|
||||
const isActive = pathname === item.href ||
|
||||
(item.href !== "/" && pathname.startsWith(item.href));
|
||||
return (
|
||||
<li key={idx}>
|
||||
<Link
|
||||
href={item.href}
|
||||
className={`block font-medium py-3 px-4 transition-colors rounded text-sm sm:text-base ${
|
||||
isActive
|
||||
? "bg-red-600 text-white"
|
||||
: "text-blue-900 hover:bg-gray-100 hover:text-red-600"
|
||||
}`}
|
||||
onClick={closeAllMenus}
|
||||
>
|
||||
{item.label}
|
||||
</Link>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user