202 lines
7.8 KiB
JavaScript
202 lines
7.8 KiB
JavaScript
'use client'
|
|
import React, { useState } from "react";
|
|
import Link from "next/link";
|
|
import Image from "next/image";
|
|
|
|
export default function Header4() {
|
|
const [isServicesDropdownOpen, setIsServicesDropdownOpen] = useState(false);
|
|
|
|
const handleServicesMouseEnter = () => {
|
|
setIsServicesDropdownOpen(true);
|
|
};
|
|
|
|
const handleServicesMouseLeave = () => {
|
|
setIsServicesDropdownOpen(false);
|
|
};
|
|
|
|
// Service items with ID-based URLs (matching Services component behavior)
|
|
const serviceItems = [
|
|
{ id: 11, title: "Data Entry Services", href: "/service-details/11" },
|
|
{ id: 12, title: "Data Conversion", href: "/service-details/12" },
|
|
{ id: 13, title: "Data Processing", href: "/service-details/13" },
|
|
{ id: 14, title: "Receipt Data Entry Services", href: "/service-details/14" },
|
|
{ id: 15, title: "Logistics Data Entry Services", href: "/service-details/15" },
|
|
{ id: 16, title: "Construction", href: "/#" }
|
|
];
|
|
|
|
const renderServiceLink = (service) => {
|
|
// Disable Construction service (id: 16) same as in Services component
|
|
|
|
|
|
|
|
|
|
return (
|
|
<Link
|
|
href={service.href}
|
|
style={{
|
|
display: 'block',
|
|
padding: '8px 16px',
|
|
color: '#333333',
|
|
textDecoration: 'none',
|
|
fontSize: '14px',
|
|
fontWeight: '500',
|
|
transition: 'all 0.2s ease',
|
|
borderLeft: '3px solid transparent'
|
|
}}
|
|
onMouseEnter={(e) => {
|
|
e.target.style.backgroundColor = '#f8f9ff';
|
|
e.target.style.color = '#28285B';
|
|
e.target.style.borderLeftColor = '#28285B';
|
|
e.target.style.paddingLeft = '20px';
|
|
}}
|
|
onMouseLeave={(e) => {
|
|
e.target.style.backgroundColor = 'transparent';
|
|
e.target.style.color = '#333333';
|
|
e.target.style.borderLeftColor = 'transparent';
|
|
e.target.style.paddingLeft = '16px';
|
|
}}
|
|
>
|
|
{service.title}
|
|
</Link>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<header id="header-main" className="header style-3" style={{ backgroundColor: 'white', borderBottom: '1px solid #e5e5e5'}}>
|
|
<div className="header-inner">
|
|
<div className="tf-container">
|
|
<div className="row">
|
|
<div className="col-12">
|
|
<div className="header-inner-wrap">
|
|
<div className="header-left d-flex align-items-center">
|
|
<div className="header-logo" style={{ display: 'flex', alignItems: 'center' }}>
|
|
<Link href={`/`} className="site-logo" style={{ display: 'flex', alignItems: 'center' }}>
|
|
<Image
|
|
src="/images/logo/keystonesolution.png" // Update this path to match your PNG file location
|
|
alt="Keystone Logo"
|
|
width={90}
|
|
height={40}
|
|
priority
|
|
style={{
|
|
maxWidth: '100%',
|
|
height: 'auto'
|
|
}}
|
|
/>
|
|
</Link>
|
|
</div>
|
|
<nav className="main-menu style-3">
|
|
<ul className="navigation">
|
|
<li
|
|
className="menu-item"
|
|
style={{ position: 'relative' }}
|
|
onMouseEnter={handleServicesMouseEnter}
|
|
onMouseLeave={handleServicesMouseLeave}
|
|
>
|
|
<Link
|
|
href="/#"
|
|
style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: '6px',
|
|
textDecoration: 'none',
|
|
color: '#333333',
|
|
transition: 'color 0.3s ease'
|
|
}}
|
|
>
|
|
Services
|
|
<svg
|
|
width="12"
|
|
height="8"
|
|
viewBox="0 0 12 8"
|
|
fill="none"
|
|
style={{
|
|
transform: isServicesDropdownOpen ? 'rotate(180deg)' : 'rotate(0deg)',
|
|
transition: 'transform 0.3s ease'
|
|
}}
|
|
>
|
|
<path
|
|
d="M1 1.5L6 6.5L11 1.5"
|
|
stroke="currentColor"
|
|
strokeWidth="1.5"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
/>
|
|
</svg>
|
|
</Link>
|
|
|
|
{/* Dropdown Menu */}
|
|
<div
|
|
style={{
|
|
position: 'absolute',
|
|
top: '100%',
|
|
left: '0',
|
|
minWidth: '220px',
|
|
backgroundColor: '#ffffff',
|
|
boxShadow: '0 4px 16px rgba(0, 0, 0, 0.1)',
|
|
borderRadius: '8px',
|
|
padding: '8px 0',
|
|
opacity: isServicesDropdownOpen ? '1' : '0',
|
|
visibility: isServicesDropdownOpen ? 'visible' : 'hidden',
|
|
transform: isServicesDropdownOpen ? 'translateY(0px)' : 'translateY(-10px)',
|
|
transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
|
|
zIndex: '1000',
|
|
border: '1px solid rgba(0, 0, 0, 0.08)',
|
|
backdropFilter: 'blur(20px)',
|
|
WebkitBackdropFilter: 'blur(20px)'
|
|
}}
|
|
>
|
|
<ul
|
|
style={{
|
|
listStyle: 'none',
|
|
margin: '0',
|
|
padding: '0'
|
|
}}
|
|
>
|
|
{serviceItems.map((service, index) => (
|
|
<li key={index}>
|
|
{renderServiceLink(service)}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
<li className="menu-item">
|
|
<Link href="/about" style={{ color: '#333333', textDecoration: 'none' }}>About</Link>
|
|
</li>
|
|
<li className="menu-item">
|
|
<Link href="/career" style={{ color: '#333333', textDecoration: 'none' }}>Career</Link>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
|
|
|
|
<div className="header-right d-flex align-items-center">
|
|
<Link
|
|
href={`/contact-us`}
|
|
className="tf-btn hide-sm rounded-12 h36"
|
|
>
|
|
<span className="text-caption">Contact Us</span>
|
|
<span className="bg-effect" />
|
|
</Link>
|
|
<div
|
|
className="mobile-button"
|
|
data-bs-toggle="offcanvas"
|
|
data-bs-target="#menu-mobile"
|
|
aria-controls="menu-mobile"
|
|
>
|
|
<div className="burger">
|
|
<span />
|
|
<span />
|
|
<span />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
} |