Skip to content
Toggle navigation
Toggle navigation
This project
Loading...
Sign in
sujata
/
advithconsulting.io-frontend
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Pipelines
Registry
Graphs
Issues
0
Merge Requests
0
Wiki
Network
Create a new issue
Jobs
Commits
Issue Boards
Files
Commits
Network
Compare
Branches
Tags
Commit 4d332a61
authored
2025-07-10 11:31:19 +0530
by
JayGuri
Browse Files
Options
Browse Files
Tag
Download
Email Patches
Plain Diff
Form validation done, Navbar changed
1 parent
af371728
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
616 additions
and
174 deletions
components/reuseables/CallBackRequest.js
container/Contact/ContactForm.js
layout/Header.js
components/reuseables/CallBackRequest.js
View file @
4d332a6
...
@@ -200,12 +200,15 @@ const CallBackRequest = () => {
...
@@ -200,12 +200,15 @@ const CallBackRequest = () => {
required
required
type="text"
type="text"
className="form-control"
className="form-control"
{...
register
(
"Mobile"
,
{
onInput={(e) => {
required
:
"Enter Your Mobile Number"
,
e.target.value = e.target.value.replace(/[^0-9]/g, '
'
);
maxLength
:
{
}}
value
:
10
,
{...
register
(
"Mobile"
,
{
message
:
"Invalid Mobile number"
,
required
:
"Enter Your Mobile Number"
,
},
maxLength
:
{
value
:
/^
[
6-9
]\d{9}
$/
,
message
:
"Invalid Mobile number"
,
},
})}
})}
/
>
/
>
{
errors
.
Mobile
&&
(
{
errors
.
Mobile
&&
(
...
@@ -219,30 +222,18 @@ const CallBackRequest = () => {
...
@@ -219,30 +222,18 @@ const CallBackRequest = () => {
<
div
className
=
"form-group"
>
<
div
className
=
"form-group"
>
<
label
>
Services
<
/label
>
<
label
>
Services
<
/label
>
<
Form
.
Group
>
<
Form
.
Group
>
<
Form
.
Control
as
=
"select"
<
Form
.
Control
required
type
=
"text"
type
=
"select"
placeholder
=
"Enter Service"
{...
register
(
"service"
,
{
required
required
:
"Select Service"
,
{...
register
(
"service"
,
{
})}
required
:
"Enter Service"
,
className
=
"form-select"
>
})}
className
=
"form-control"
<
option
disabled
>
Select
Service
<
/option
>
/
>
<
option
value
=
"Virtual FC & CFO Services"
>
Virtual
FC
&
CFO
Services
<
/option
>
{
errors
.
service
&&
(
<
option
value
=
"Transaction Advisory"
>
Transaction
Advisory
<
/option
>
<
span
className
=
"error"
>
{
errors
.
service
.
message
}
<
/span
>
<
option
value
=
"Risk Advisory"
>
Risk
Advisory
<
/option
>
)}
<
option
value
=
"Business Advisory"
>
Business
Advisory
<
/option
>
<
option
value
=
"Personal Tax"
>
Personal
Tax
<
/option
>
<
option
value
=
"Corporate Tax"
>
Corporate
Tax
<
/option
>
<
option
value
=
"Company Law & FEMA"
>
Company
Law
&
FEMA
<
/option
>
<
option
value
=
"Transfer Pricing"
>
Transfer
Pricing
<
/option
>
<
option
value
=
"GST & other Indirect Tax"
>
GST
&
other
Indirect
Tax
<
/option
>
<
option
value
=
"Family Business Advisory"
>
Family
Business
Advisory
<
/option
>
<
option
value
=
"Others"
>
Others
<
/option
>
<
/Form.Control
>
{
errors
.
service
&&
(
<
span
className
=
"error"
>
{
errors
.
service
.
message
}
<
/span
>
)}
<
/Form.Group
>
<
/Form.Group
>
<
/div
>
<
/div
>
<
/Col
>
<
/Col
>
...
...
container/Contact/ContactForm.js
View file @
4d332a6
...
@@ -198,10 +198,13 @@ const ContactForm = () => {
...
@@ -198,10 +198,13 @@ const ContactForm = () => {
type="text"
type="text"
placeholder="Mobile"
placeholder="Mobile"
className="text-dark form-control"
className="text-dark form-control"
onInput={(e) => {
e.target.value = e.target.value.replace(/[^0-9]/g, '
'
);
}}
{...
register
(
"Mobile"
,
{
{...
register
(
"Mobile"
,
{
required
:
"Enter Your Mobile Number"
,
required
:
"Enter Your Mobile Number"
,
maxLength
:
{
maxLength
:
{
value
:
10
,
value
:
/^
[
6-9
]\d{9}
$/
,
message
:
"Invalid Mobile number"
,
message
:
"Invalid Mobile number"
,
},
},
})}
})}
...
...
layout/Header.js
View file @
4d332a6
import
React
,
{
useState
,
useEffect
}
from
"react"
;
"use client"
import
Link
from
"next/link"
;
import
{
useRouter
}
from
"next/router"
;
import
{
useState
,
useEffect
}
from
"react"
import
Image
from
"next/image"
;
import
Link
from
"next/link"
import
{
useRouter
}
from
"next/router"
import
Image
from
"next/image"
const
Header
=
()
=>
{
const
Header
=
()
=>
{
const
[
menu
,
setMenu
]
=
useState
(
true
);
const
[
menu
,
setMenu
]
=
useState
(
true
)
const
router
=
useRouter
();
const
[
knowledgeOpen
,
setKnowledgeOpen
]
=
useState
(
false
)
const
[
clientServicingOpen
,
setClientServicingOpen
]
=
useState
(
false
)
const
router
=
useRouter
()
const
toggleNavbar
=
()
=>
{
const
toggleNavbar
=
()
=>
{
setMenu
(
!
menu
)
;
setMenu
(
!
menu
)
}
;
}
// Close the menu on route change
useEffect
(()
=>
{
useEffect
(()
=>
{
const
handleRouteChange
=
()
=>
{
const
handleRouteChange
=
()
=>
{
setMenu
(
true
)
;
// Close the menu on route change
setMenu
(
true
)
};
setKnowledgeOpen
(
false
)
setClientServicingOpen
(
false
)
router
.
events
.
on
(
"routeChangeStart"
,
handleRouteChange
);
}
router
.
events
.
on
(
"routeChangeStart"
,
handleRouteChange
)
return
()
=>
{
return
()
=>
{
router
.
events
.
off
(
"routeChangeStart"
,
handleRouteChange
)
;
router
.
events
.
off
(
"routeChangeStart"
,
handleRouteChange
)
}
;
}
},
[
router
])
;
},
[
router
])
// Sticky navbar effect
useEffect
(()
=>
{
useEffect
(()
=>
{
const
elementId
=
document
.
getElementById
(
"navbar"
)
;
const
elementId
=
document
.
getElementById
(
"navbar"
)
const
handleScroll
=
()
=>
{
const
handleScroll
=
()
=>
{
if
(
window
.
scrollY
>
170
)
{
if
(
window
.
scrollY
>
170
)
{
elementId
.
classList
.
add
(
"is-sticky"
)
;
elementId
.
classList
.
add
(
"is-sticky"
)
}
else
{
}
else
{
elementId
.
classList
.
remove
(
"is-sticky"
)
;
elementId
.
classList
.
remove
(
"is-sticky"
)
}
}
};
}
window
.
addEventListener
(
"scroll"
,
handleScroll
);
window
.
addEventListener
(
"scroll"
,
handleScroll
)
return
()
=>
{
return
()
=>
{
window
.
removeEventListener
(
"scroll"
,
handleScroll
)
;
window
.
removeEventListener
(
"scroll"
,
handleScroll
)
}
;
}
},
[])
;
},
[])
// Check if a route is active
// Check if a route is active
const
isActive
=
(
path
)
=>
{
const
isActive
=
(
path
)
=>
{
if
(
path
===
"/"
)
{
if
(
path
===
"/"
)
{
return
router
.
pathname
===
path
;
// Exact match for home page
return
router
.
pathname
===
path
}
}
return
router
.
pathname
.
startsWith
(
path
);
// Match subroutes
return
router
.
pathname
.
startsWith
(
path
)
};
}
const
classOne
=
menu
?
"collapse navbar-collapse"
:
"collapse navbar-collapse show"
const
classTwo
=
menu
?
"navbar-toggler navbar-toggler-right collapsed"
:
"navbar-toggler navbar-toggler-right"
const
classOne
=
menu
?
"collapse navbar-collapse"
:
"collapse navbar-collapse show"
;
const
clientServices
=
[
const
classTwo
=
menu
?
"navbar-toggler navbar-toggler-right collapsed"
:
"navbar-toggler navbar-toggler-right"
;
{
title
:
"Virtual Finance Office"
,
href
:
"/client-servicing/cfo"
,
items
:
[
{
name
:
"Virtual CFO Services"
,
href
:
"/client-servicing/cfo"
},
{
name
:
"Virtual FC Services"
,
href
:
"/client-servicing/cfo"
},
{
name
:
"Book Closures and Audit Support"
,
href
:
"/client-servicing/cfo"
},
{
name
:
"Accounting Payroll & Compliance"
,
href
:
"/client-servicing/cfo"
},
],
},
{
title
:
"Advisory Services"
,
href
:
"/client-servicing/ta"
,
items
:
[
{
name
:
"Transaction Advisory"
,
href
:
"/client-servicing/ta"
},
{
name
:
"Risk Advisory"
,
href
:
"/client-servicing/ta"
},
{
name
:
"Business Advisory"
,
href
:
"/client-servicing/ta"
},
],
},
{
title
:
"GCC as a Service"
,
href
:
"/client-servicing/ra"
,
items
:
[],
},
{
title
:
"Digital Transformation"
,
href
:
"/client-servicing/ba"
,
items
:
[
{
name
:
"ITeC App"
,
href
:
"/client-servicing/ba"
},
{
name
:
"Digital Process Automation"
,
href
:
"/client-servicing/ba"
},
],
},
{
title
:
"Empowering Finance Consultants"
,
href
:
"/client-servicing/ba"
,
items
:
[{
name
:
"CA/CPA firm services"
,
href
:
"/client-servicing/ba"
}],
},
{
title
:
"Bespoke Services"
,
href
:
"/client-servicing/ba"
,
items
:
[
{
name
:
"Data analysis and reporting"
,
href
:
"/client-servicing/ba"
},
{
name
:
"Admin and Backend Support Services"
,
href
:
"/client-servicing/ba"
},
{
name
:
"PFM"
,
href
:
"/client-servicing/ba"
},
],
},
]
return
(
return
(
<>
<>
<
div
id
=
"navbar"
className
=
"navbar-area"
>
<
style
jsx
>
{
`
<
div
className
=
"zixon-nav"
>
.navbar-area {
<
div
className
=
"container-fluid"
>
background: #fff;
<
nav
className
=
"navbar navbar-expand-md navbar-light"
>
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
<
Link
href
=
"/"
className
=
"navbar-brand"
>
position: relative;
<
Image
width
=
{
144
}
height
=
{
33
}
src
=
"/images/logo.png"
alt
=
"logo"
/>
z-index: 999;
<
/Link
>
}
<
button
onClick
=
{
toggleNavbar
}
className
=
{
classTwo
}
type
=
"button"
aria
-
controls
=
"navbarSupportedContent"
aria
-
expanded
=
"false"
aria
-
label
=
"Toggle navigation"
>
<
span
className
=
"icon-bar top-bar"
><
/span
>
<
span
className
=
"icon-bar middle-bar"
><
/span
>
<
span
className
=
"icon-bar bottom-bar"
><
/span
>
<
/button
>
<
div
className
=
{
classOne
}
id
=
"navbarSupportedContent"
>
<
ul
className
=
"navbar-nav"
>
<
li
className
=
"nav-item"
>
<
Link
href
=
"/"
className
=
{
`nav-link
${
isActive
(
"/"
)
?
"active"
:
""
}
`
}
>
Home
<
/Link
>
<
/li
>
<
li
className
=
"nav-item"
>
<
Link
href
=
"/knowledge"
className
=
"dropdown-toggle nav-link"
>
Knowledge
<
/Link
>
<
ul
className
=
"dropdown-menu"
>
<
li
className
=
"nav-item"
>
<
Link
href
=
"/corpedia"
className
=
{
`nav-link
${
isActive
(
"/corpedia"
)
?
"active"
:
""
}
`
}
>
Corpedia
<
/Link
>
<
ul
>
<
li
className
=
"nav-item"
>
<
Link
href
=
"/taxwire"
className
=
{
`nav-link
${
isActive
(
"/taxwire"
)
?
"active"
:
""
}
`
}
>
Taxwire
<
/Link
>
<
/li
>
<
li
className
=
"nav-item"
>
<
Link
href
=
"/budgetpanorama"
className
=
{
`nav-link
${
isActive
(
"/budgetpanorama"
)
?
"active"
:
""
}
`
}
>
Budget
Panorama
<
/Link
>
<
/li
>
<
/ul
>
<
/li
>
<
li
className
=
"nav-item"
>
<
Link
href
=
"/blog"
className
=
{
`nav-link
${
isActive
(
"/blog"
)
?
"active"
:
""
}
`
}
>
Blogs
<
/Link
>
<
/li
>
<
/ul
>
<
/li
>
<
li
className
=
"nav-item"
>
<
Link
href
=
"/people"
className
=
{
`nav-link
${
isActive
(
"/people"
)
?
"active"
:
""
}
`
}
>
People
<
/Link
>
<
/li
>
<
li
className
=
"nav-item"
>
.navbar-area.is-sticky {
<
Link
href
=
"/client-servicing"
className
=
"dropdown-toggle nav-link"
>
position: fixed;
Client
Servicing
top: 0;
<
/Link
>
left: 0;
<
ul
className
=
"dropdown-menu"
>
width: 100%;
<
li
className
=
"nav-item"
>
z-index: 999;
<
Link
href
=
"/client-servicing/cfo"
className
=
{
`nav-link
${
isActive
(
"/client-servicing/cfo"
)
?
"active"
:
""
}
`
}
>
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
Virtual
FC
&
CFO
Services
}
<
/Link
>
<
ul
>
.navbar-nav {
<
li
className
=
"nav-item"
>
display: flex;
<
Link
href
=
"/client-servicing/ta"
className
=
{
`nav-link
${
isActive
(
"/client-servicing/ta"
)
?
"active"
:
""
}
`
}
>
align-items: center;
Transaction
Advisory
gap: 2rem;
<
/Link
>
}
<
/li
>
<
li
className
=
"nav-item"
>
.nav-link {
<
Link
href
=
"/client-servicing/ra"
className
=
{
`nav-link
${
isActive
(
"/client-servicing/ra"
)
?
"active"
:
""
}
`
}
>
color: #4a5568;
Risk
Advisory
font-weight: 500;
<
/Link
>
text-decoration: none;
<
/li
>
padding: 0.5rem 0;
<
/ul
>
transition: color 0.2s ease;
<
/li
>
display: flex;
<
li
className
=
"nav-item"
>
align-items: center;
<
Link
href
=
"/client-servicing/ba"
className
=
{
`nav-link
${
isActive
(
"/client-servicing/ba"
)
?
"active"
:
""
}
`
}
>
gap: 0.25rem;
Business
Advisory
}
.nav-link:hover {
color: #2d3748;
}
.nav-link.active {
color: #2d3748;
font-weight: 600;
}
.nav-link.dropdown-nav {
color: #1a202c;
font-weight: 700;
}
.nav-link.dropdown-nav:hover {
color: #000;
}
.dropdown-arrow {
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #1a202c;
margin-left: 0.25rem;
}
.book-consult-btn {
background: #f6d55c;
color: #2d3748;
font-weight: 600;
padding: 0.75rem 1.5rem;
border-radius: 0.5rem;
text-decoration: none;
transition: background-color 0.2s ease;
}
.book-consult-btn:hover {
background: #f4d03f;
}
/* Mega Menu Styles */
.mega-menu-container {
position: relative;
}
.mega-menu {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: #fff;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
border-top: 1px solid #e2e8f0;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.3s ease;
z-index: 1000;
}
.mega-menu.show {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.mega-menu-content {
max-width: 1400px;
margin: 0 auto;
padding: 2.5rem;
}
.mega-grid {
display: grid;
gap: 2.5rem;
}
.knowledge-grid {
grid-template-columns: repeat(4, 1fr);
gap: 3rem;
}
.client-servicing-grid {
grid-template-columns: repeat(6, 1fr);
gap: 2rem;
}
.mega-column {
min-height: 120px;
}
.service-header {
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
margin-bottom: 1rem;
}
.mega-column-title {
font-size: 1.125rem;
font-weight: 700;
color: #2d3748;
padding-bottom: 0.75rem;
border-bottom: 2px solid #f6d55c;
display: block;
text-decoration: none;
line-height: 1.3;
flex: 1;
margin-bottom: 0;
font-weight: bold;
font-family: inherit;
}
.mega-column-title:hover {
color: #1a202c;
}
.knowledge-title {
font-size: 1.125rem;
font-weight: 700;
color: #2d3748;
padding-bottom: 0.75rem;
border-bottom: 2px solid #f6d55c;
display: block;
text-decoration: none;
line-height: 1.3;
}
.knowledge-title:hover {
color: #1a202c;
}
.service-dropdown-arrow {
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #4a5568;
transition: transform 0.2s ease;
margin-left: 0.5rem;
}
.service-dropdown-arrow.expanded {
transform: rotate(180deg);
}
.mega-column-list {
list-style: none;
padding: 0;
margin: 0;
margin-top: 1rem;
transition: all 0.3s ease;
}
.mega-column-list.collapsed {
display: none;
}
.mega-column-list li {
margin-bottom: 0.75rem;
}
.mega-column-list a {
color: #4a5568;
text-decoration: none;
font-size: 0.875rem;
font-weight: 500;
line-height: 1.4;
transition: color 0.2s ease;
display: block;
padding: 0.25rem 0;
}
.mega-column-list a:hover {
color: #2d3748;
font-weight: 600;
}
.mega-column-list a.active {
color: #2d3748;
font-weight: 600;
}
.mega-column:not(:last-child) {
border-right: 1px solid #e2e8f0;
padding-right: 2rem;
}
/* Overlay for closing menu */
.mega-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: transparent;
z-index: 999;
display: none;
}
.mega-overlay.show {
display: block;
}
/* Knowledge Dropdown Styles */
.knowledge-dropdown {
position: relative;
}
.knowledge-dropdown-menu {
display: none;
position: absolute;
left: 0;
top: 100%;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 0.5rem;
z-index: 1001;
padding: 0.5rem 0;
min-width: 180px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.knowledge-dropdown:hover .knowledge-dropdown-menu,
.knowledge-dropdown:focus-within .knowledge-dropdown-menu {
display: block;
}
.knowledge-dropdown-menu li {
margin: 0;
}
.knowledge-dropdown-menu a {
display: block;
padding: 0.75rem 1.2rem;
color: #000;
font-weight: 500;
font-size: 1rem;
text-decoration: none;
border-radius: 0.25rem;
transition: background-color 0.2s ease, color 0.2s ease;
}
.knowledge-dropdown-menu a:hover {
background-color: #f6a1001a; /* light tint */
color: #f6a100;
font-weight: 600;
}
.knowledge-title {
border-bottom: none;
padding-bottom: 0;
}
@media (max-width: 1200px) {
.client-servicing-grid {
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.knowledge-grid {
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
}
.mega-menu-content {
padding: 2rem;
}
.mega-column:not(:last-child) {
border-right: none;
padding-right: 0;
}
.mega-column:nth-child(3n):not(:last-child) {
border-right: 1px solid #e2e8f0;
padding-right: 1.5rem;
}
}
@media (max-width: 768px) {
.client-servicing-grid {
grid-template-columns: 1fr;
gap: 0;
}
.knowledge-grid {
grid-template-columns: 1fr;
gap: 0;
}
.mega-menu-content {
padding: 1.5rem;
}
.mega-column-title,
.knowledge-title {
font-size: 1rem;
border-bottom: none;
padding-bottom: 0;
}
.mega-column-list a {
font-size: 0.875rem;
}
.mega-column:not(:last-child) {
border-right: none;
padding-right: 0;
}
.mega-column {
border-bottom: 1px solid #e2e8f0;
padding-bottom: 1rem;
margin-bottom: 1rem;
}
.mega-column:last-child {
border-bottom: none;
margin-bottom: 0;
}
.service-header {
margin-bottom: 0.5rem;
}
.knowledge-grid .mega-column {
border-bottom: 1px solid #e2e8f0;
padding-bottom: 0.75rem;
margin-bottom: 0.75rem;
}
.knowledge-grid .mega-column:last-child {
border-bottom: none;
margin-bottom: 0;
}
}
@media (max-width: 480px) {
.mega-menu-content {
padding: 1rem;
}
}
`
}
<
/style
>
<
div
className
=
"mega-menu-container"
>
<
div
id
=
"navbar"
className
=
"navbar-area"
>
<
div
className
=
"zixon-nav"
>
<
div
className
=
"container-fluid"
>
<
nav
className
=
"navbar navbar-expand-md navbar-light"
>
<
Link
href
=
"/"
className
=
"navbar-brand"
>
<
Image
width
=
{
144
}
height
=
{
33
}
src
=
"/images/logo.png"
alt
=
"logo"
/>
<
/Link
>
<
button
onClick
=
{
toggleNavbar
}
className
=
{
classTwo
}
type
=
"button"
aria
-
controls
=
"navbarSupportedContent"
aria
-
expanded
=
"false"
aria
-
label
=
"Toggle navigation"
>
<
span
className
=
"icon-bar top-bar"
><
/span
>
<
span
className
=
"icon-bar middle-bar"
><
/span
>
<
span
className
=
"icon-bar bottom-bar"
><
/span
>
<
/button
>
<
div
className
=
{
classOne
}
id
=
"navbarSupportedContent"
>
<
ul
className
=
"navbar-nav"
>
<
li
className
=
"nav-item"
>
<
Link
href
=
"/"
className
=
{
`nav-link
${
isActive
(
"/"
)
?
"active"
:
""
}
`
}
>
Home
<
/Link
>
<
/li
>
{
/* Knowledge Dropdown */
}
<
li
className
=
"nav-item knowledge-dropdown"
>
<
button
className
=
"nav-link dropdown-nav"
style
=
{{
background
:
"none"
,
border
:
"none"
,
cursor
:
"pointer"
}}
tabIndex
=
{
0
}
type
=
"button"
aria
-
haspopup
=
"true"
aria
-
expanded
=
"false"
>
Knowledge
<
span
className
=
"dropdown-arrow"
><
/span
>
<
/button
>
<
ul
className
=
"knowledge-dropdown-menu"
>
<
li
><
Link
href
=
"/corpedia"
className
=
"knowledge-title"
>
Corpedia
<
/Link></
li
>
<
li
><
Link
href
=
"/taxwire"
className
=
"knowledge-title"
>
Taxwire
<
/Link></
li
>
<
li
><
Link
href
=
"/budgetpanorama"
className
=
"knowledge-title"
>
Budget
Panorama
<
/Link></
li
>
<
li
><
Link
href
=
"/blog"
className
=
"knowledge-title"
>
Blogs
<
/Link></
li
>
<
/ul
>
<
/li
>
<
li
className
=
"nav-item"
>
<
Link
href
=
"/people"
className
=
{
`nav-link
${
isActive
(
"/people"
)
?
"active"
:
""
}
`
}
>
People
<
/Link
>
<
/li
>
<
li
className
=
"nav-item"
>
<
button
onClick
=
{()
=>
setClientServicingOpen
(
!
clientServicingOpen
)}
className
=
"nav-link dropdown-nav"
style
=
{{
background
:
"none"
,
border
:
"none"
,
cursor
:
"pointer"
}}
>
<
Link
href
=
"/client-servicing"
className
=
"nav-link"
>
Client
Servicing
<
/Link
>
<
/Link
>
<
/li
>
<
span
className
=
"dropdown-arrow"
><
/span
>
<
/ul
>
<
/button
>
<
/li
>
<
/li
>
<
li
className
=
"nav-item"
>
<
Link
href
=
"/industry"
className
=
{
`nav-link
${
isActive
(
"/industry"
)
?
"active"
:
""
}
`
}
>
Industry
<
/Link
>
<
/li
>
<
li
className
=
"nav-item"
>
<
li
className
=
"nav-item"
>
<
Link
href
=
"/career"
className
=
{
`nav-link
${
isActive
(
"/career"
)
?
"active"
:
""
}
`
}
>
<
Link
href
=
"/industry"
className
=
{
`nav-link
${
isActive
(
"/industry"
)
?
"active"
:
""
}
`
}
>
Careers
Industry
<
/Link
>
<
/Link
>
<
/li
>
<
/li
>
<
li
className
=
"nav-item"
>
<
li
className
=
"nav-item"
>
<
Link
href
=
"/career"
className
=
{
`nav-link
${
isActive
(
"/career"
)
?
"active"
:
""
}
`
}
>
<
Link
href
=
"/contact"
className
=
{
`nav-link
${
isActive
(
"/contact"
)
?
"active"
:
""
}
`
}
>
Careers
Contact
Us
<
/Link
>
<
/Link
>
<
/li
>
<
/li
>
<
li
className
=
"nav-item"
>
<
Link
href
=
"/contact"
className
=
{
`nav-link
${
isActive
(
"/contact"
)
?
"active"
:
""
}
`
}
>
<
li
className
=
"nav-item"
>
Contact
Us
<
Link
href
=
"/book-consult"
className
=
"book-consult-btn"
>
BOOK
A
CONSULT
<
/Link
>
<
/li
>
<
/ul
>
<
/div
>
<
/nav
>
<
/div
>
<
/div
>
<
/div
>
{
/* Overlay for closing menus */
}
<
div
className
=
{
`mega-overlay
${
clientServicingOpen
?
"show"
:
""
}
`
}
onClick
=
{()
=>
{
setClientServicingOpen
(
false
)
}}
><
/div
>
{
/* Client Servicing Mega Menu */
}
<
div
className
=
{
`mega-menu
${
clientServicingOpen
?
"show"
:
""
}
`
}
>
<
div
className
=
"mega-menu-content"
>
<
div
className
=
"mega-grid client-servicing-grid"
>
{
clientServices
.
map
((
service
,
index
)
=>
(
<
div
key
=
{
index
}
className
=
"mega-column"
>
<
div
className
=
"service-header"
>
<
Link
href
=
{
service
.
href
}
className
=
"mega-column-title"
style
=
{{
fontWeight
:
'bold'
,
fontFamily
:
'inherit'
}}
>
<
strong
>
{
service
.
title
}
<
/strong
>
<
/Link
>
<
/Link
>
<
/li
>
<
/div
>
<
/ul
>
{
service
.
items
.
length
>
0
&&
(
<
/div
>
<
ul
className
=
"mega-column-list"
>
<
/nav
>
{
service
.
items
.
map
((
item
,
itemIndex
)
=>
(
<
li
key
=
{
itemIndex
}
>
<
Link
href
=
{
item
.
href
}
className
=
{
`
${
isActive
(
item
.
href
)
?
"active"
:
""
}
`
}
>
{
item
.
name
}
<
/Link
>
<
/li
>
))}
<
/ul
>
)}
<
/div
>
))}
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
/
>
<
/
>
)
;
)
}
;
}
export
default
Header
;
export
default
Header
Write
Preview
Styling with
Markdown
is supported
Attach a file
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to post a comment