mirror of
https://github.com/OwethuManagedServices/oms-website-nextjs.git
synced 2025-12-17 18:58:10 +00:00
Initial Commit
This commit is contained in:
libertyoms
197
components/HeaderSingle.tsx
Normal file
197
components/HeaderSingle.tsx
Normal file
@ -0,0 +1,197 @@
|
||||
// components/Header.tsx
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import { FiSearch, FiChevronDown, FiClipboard } from "react-icons/fi"; // Added ChevronDown for dropdowns and Clipboard for Demo
|
||||
|
||||
// TODO: Ensure this path is correct
|
||||
const omsLogoUrl = "/oms-logo.svg"; // Or your actual logo file
|
||||
|
||||
// Placeholder for Dropdown Menu component (implement separately)
|
||||
const DropdownMenu = ({
|
||||
trigger,
|
||||
children,
|
||||
}: {
|
||||
trigger: React.ReactNode;
|
||||
children: React.ReactNode;
|
||||
}) => {
|
||||
// Basic structure - Needs state and proper styling for visibility toggle
|
||||
return (
|
||||
<div className="relative group">
|
||||
<button className="flex items-center space-x-1 text-sm font-medium text-gray-700 hover:text-primary focus:outline-none">
|
||||
{trigger}
|
||||
<FiChevronDown className="w-4 h-4 transition-transform duration-200 group-hover:rotate-180" />
|
||||
</button>
|
||||
<div className="absolute left-0 mt-2 w-48 bg-light border border-gray-200 rounded-md shadow-lg opacity-0 group-hover:opacity-100 invisible group-hover:visible transition-all duration-200 z-50">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const Header = () => {
|
||||
// In a real app use: import { usePathname } from 'next/navigation';
|
||||
// const pathname = usePathname();
|
||||
const pathname = "/"; // Placeholder for example
|
||||
|
||||
const isActive = (path: string) => pathname === path;
|
||||
|
||||
return (
|
||||
<header className="sticky top-0 z-50 bg-light shadow-md">
|
||||
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex justify-between items-center h-16">
|
||||
<div className="flex-shrink-0">
|
||||
<Link
|
||||
href="/"
|
||||
className="flex items-center space-x-2"
|
||||
title="Owethu Managed Services Home"
|
||||
>
|
||||
<Image
|
||||
src={omsLogoUrl}
|
||||
alt="OMS Logo"
|
||||
width={40}
|
||||
height={40}
|
||||
priority
|
||||
/>
|
||||
<span className="text-xl font-bold text-dark hidden sm:inline">
|
||||
Owethu Managed Services
|
||||
</span>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<nav className="hidden md:flex items-center space-x-6 lg:space-x-8">
|
||||
<Link
|
||||
href="/"
|
||||
className={`text-sm font-medium ${
|
||||
isActive("/")
|
||||
? "text-primary font-semibold"
|
||||
: "text-gray-700 hover:text-primary"
|
||||
}`}
|
||||
>
|
||||
Home
|
||||
</Link>
|
||||
|
||||
{/* About Us Dropdown */}
|
||||
<DropdownMenu trigger={<span>About Us</span>}>
|
||||
<Link
|
||||
href="/about"
|
||||
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-primary"
|
||||
>
|
||||
Company Overview
|
||||
</Link>
|
||||
<Link
|
||||
href="/about#team"
|
||||
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-primary"
|
||||
>
|
||||
Our Team
|
||||
</Link>
|
||||
{/* Add other sub-links if needed */}
|
||||
</DropdownMenu>
|
||||
|
||||
{/* Services Dropdown */}
|
||||
<DropdownMenu trigger={<span>Services</span>}>
|
||||
<Link
|
||||
href="/services/resource-augmentation"
|
||||
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-primary"
|
||||
>
|
||||
Resource Augmentation
|
||||
</Link>
|
||||
<Link
|
||||
href="/services/project-management"
|
||||
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-primary"
|
||||
>
|
||||
Project Management
|
||||
</Link>
|
||||
<Link
|
||||
href="/services/product-development"
|
||||
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-primary"
|
||||
>
|
||||
Product Development
|
||||
</Link>
|
||||
</DropdownMenu>
|
||||
|
||||
{/* Products Dropdown */}
|
||||
<DropdownMenu trigger={<span>Products</span>}>
|
||||
<Link
|
||||
href="/products/obse"
|
||||
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-primary"
|
||||
>
|
||||
OBSE
|
||||
</Link>
|
||||
{/* Add other products if any */}
|
||||
</DropdownMenu>
|
||||
|
||||
{/* Join Our Team Dropdown */}
|
||||
<DropdownMenu trigger={<span>Join Our Team</span>}>
|
||||
<Link
|
||||
href="/join-us/vacancies"
|
||||
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-primary"
|
||||
>
|
||||
Vacancies
|
||||
</Link>
|
||||
<Link
|
||||
href="/join-us/portal"
|
||||
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-primary"
|
||||
>
|
||||
Recruitment Portal
|
||||
</Link>
|
||||
</DropdownMenu>
|
||||
|
||||
<Link
|
||||
href="/contact"
|
||||
className={`text-sm font-medium ${
|
||||
isActive("/contact")
|
||||
? "text-primary font-semibold"
|
||||
: "text-gray-700 hover:text-primary"
|
||||
}`}
|
||||
>
|
||||
Contact Us
|
||||
</Link>
|
||||
</nav>
|
||||
|
||||
<div className="flex items-center space-x-4">
|
||||
<button
|
||||
className="text-gray-600 hover:text-primary focus:outline-none"
|
||||
title="Search"
|
||||
>
|
||||
<FiSearch className="w-5 h-5" />
|
||||
<span className="sr-only">Search</span>
|
||||
</button>
|
||||
|
||||
<Link
|
||||
href="/request-demo" // Link to a demo request page or section
|
||||
className="flex items-center text-sm font-medium bg-primary text-dark px-3 py-1.5 rounded-md hover:bg-primary/90 transition-colors"
|
||||
title="Request a Demo"
|
||||
>
|
||||
<FiClipboard className="w-4 h-4 mr-1.5" />
|
||||
Request Demo
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="md:hidden flex items-center">
|
||||
<button className="text-gray-600 focus:outline-none">
|
||||
<svg
|
||||
className="w-6 h-6"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="M4 6h16M4 12h16m-7 6h7"
|
||||
></path>
|
||||
</svg>
|
||||
<span className="sr-only">Open menu</span>
|
||||
</button>
|
||||
{/* Mobile menu component would go here */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
};
|
||||
|
||||
export default Header;
|
||||
Reference in New Issue
Block a user