Almost updated
This commit is contained in:
mukesh13
@ -1,24 +1,100 @@
|
||||
import React from "react";
|
||||
'use client'
|
||||
import React, { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import Nav from "./Nav";
|
||||
|
||||
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: "/service-details/16" }
|
||||
];
|
||||
|
||||
const renderServiceLink = (service) => {
|
||||
// Disable Construction service (id: 16) same as in Services component
|
||||
const isDisabled = service.id === 16;
|
||||
|
||||
if (isDisabled) {
|
||||
return (
|
||||
<span
|
||||
style={{
|
||||
display: 'block',
|
||||
padding: '8px 16px',
|
||||
color: '#999999',
|
||||
fontSize: '14px',
|
||||
fontWeight: '500',
|
||||
borderLeft: '3px solid transparent',
|
||||
cursor: 'not-allowed',
|
||||
opacity: '0.5'
|
||||
}}
|
||||
>
|
||||
{service.title}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
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">
|
||||
<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">
|
||||
<Link href={`/`} className="site-logo">
|
||||
<div className="header-logo" style={{ display: 'flex', alignItems: 'center' }}>
|
||||
<Link href={`/`} className="site-logo" style={{ display: 'flex', alignItems: 'center' }}>
|
||||
<svg
|
||||
width="139.5"
|
||||
width="160"
|
||||
height={40}
|
||||
viewBox="0 0 140 40"
|
||||
viewBox="0 0 150 40"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
style={{ display: 'block' }}
|
||||
>
|
||||
<path
|
||||
d="M18.2183 15.7033L29.395 34.7289C29.4936 34.8967 29.6741 34.9994 29.8687 34.9985L41.1397 34.9463C41.3308 34.9455 41.5075 34.8448 41.6058 34.6809L47.5 24.8527L35.944 24.8365C35.7518 24.8362 35.5738 24.7349 35.4754 24.5698L23.9713 5.2667C23.8727 5.10131 23.6944 5 23.5019 5L12.3005 5C12.1083 5 11.9302 5.10099 11.8315 5.26594L5.91087 15.1639L0.167756 24.7208C0.0644005 24.8928 0.0636223 25.1076 0.165723 25.2804L5.75222 34.7316C5.85055 34.8979 6.02941 35 6.22264 35L16.7708 35C17.1948 35 17.4573 34.538 17.2402 34.1738L5.91087 15.1639L17.276 15.1639C17.6635 15.1639 18.022 15.3691 18.2183 15.7033Z"
|
||||
@ -26,35 +102,106 @@ export default function Header4() {
|
||||
/>
|
||||
<text
|
||||
x="55"
|
||||
y="30"
|
||||
y="20"
|
||||
fontFamily="Arial, sans-serif"
|
||||
fontSize="20"
|
||||
fontSize="22"
|
||||
fontWeight="600"
|
||||
fill="#121416"
|
||||
dominantBaseline="central"
|
||||
>
|
||||
Keystone
|
||||
</text>
|
||||
</svg>
|
||||
|
||||
</Link>
|
||||
</div>
|
||||
<nav className="main-menu style-3">
|
||||
<ul className="navigation">
|
||||
<Nav />
|
||||
<li
|
||||
className="menu-item"
|
||||
style={{ position: 'relative' }}
|
||||
onMouseEnter={handleServicesMouseEnter}
|
||||
onMouseLeave={handleServicesMouseLeave}
|
||||
>
|
||||
<Link
|
||||
href="/#"
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '4px',
|
||||
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">
|
||||
<div className="support text-body-2 d-flex gap_12 align-items-center text_mono-dark-9">
|
||||
<i className="icon-customer-support" />
|
||||
24/7 Support: +91 90954 50005
|
||||
</div>
|
||||
<Link
|
||||
href={`/about`}
|
||||
className="tf-btn btn-border border-1 hide-sm h36 rounded-12"
|
||||
>
|
||||
<span className="text-caption">Get Started</span>
|
||||
<span className="bg-effect" />
|
||||
</Link>
|
||||
<Link
|
||||
href={`/contact-us`}
|
||||
className="tf-btn hide-sm rounded-12 h36"
|
||||
@ -82,4 +229,4 @@ export default function Header4() {
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -23,46 +23,8 @@ export default function Nav() {
|
||||
isActiveParent(homepages) ? "current-menu" : ""
|
||||
} `}
|
||||
>
|
||||
<a href="#">Home</a>
|
||||
{/* <div className="submenu mega-menu">
|
||||
<div className="wrap-demo-item tf-grid-layout-lg lg-col-3">
|
||||
{homepages.map((item, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`demo-item ${
|
||||
isActive(item.href) ? "current-menu-item" : ""
|
||||
}`}
|
||||
>
|
||||
<Link href={item.href}>
|
||||
<div className="demo-image">
|
||||
<Image
|
||||
className="lazyload"
|
||||
data-src={item.src}
|
||||
src={item.src}
|
||||
alt={item.alt}
|
||||
width={480}
|
||||
height={228}
|
||||
/>
|
||||
</div>
|
||||
<h6 className="demo-name fw-4">{item.title}</h6>
|
||||
</Link>
|
||||
</div>
|
||||
))}
|
||||
<div className="comming-soon">
|
||||
<Link href={`/coming-soon`} className="wrap">
|
||||
<h5 className="demo-name">Coming Soon</h5>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div> */}
|
||||
</li>
|
||||
<li
|
||||
className={`has-child position-relative ${
|
||||
isActiveParent(otherPages) ? "current-menu" : ""
|
||||
} `}
|
||||
>
|
||||
<a href="#">Pages</a>
|
||||
{/* <ul className="submenu">
|
||||
<a href="#">Services</a>
|
||||
<ul className="submenu">
|
||||
{otherPages.map((item) => (
|
||||
<li
|
||||
key={item.href}
|
||||
@ -73,7 +35,7 @@ export default function Nav() {
|
||||
<Link href={item.href}>{item.label}</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul> */}
|
||||
</ul>
|
||||
</li>
|
||||
<li
|
||||
className={`has-child position-relative ${
|
||||
|
||||
Reference in New Issue
Block a user