Skip to content

sujata / advithconsulting.io-frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit 4d332a61 by JayGuri
Options

Form validation done, Navbar changed

1 parent af371728
Inline Side-by-side
Showing 3 changed files with 553 additions and 111 deletions
components/reuseables/CallBackRequest.js
......@@ -200,12 +200,15 @@ const CallBackRequest = () => {
required
type="text"
className="form-control"
onInput={(e) => {
e.target.value = e.target.value.replace(/[^0-9]/g, '');
}}
{...register("Mobile", {
required: "Enter Your Mobile Number",
maxLength: {
value: 10,
value: /^[6-9]\d{9}$/,
message: "Invalid Mobile number",
},
              },
})}
/>
{errors.Mobile && (
......@@ -219,27 +222,15 @@ const CallBackRequest = () => {
<div className="form-group">
<label>Services</label>
<Form.Group>
<Form.Control as="select"
<Form.Control
type="text"
placeholder="Enter Service"
required
type="select"
{...register("service", {
required: "Select Service",
required: "Enter Service",
})}
className="form-select">
<option disabled> Select Service</option>
<option value="Virtual FC & CFO Services">Virtual FC & CFO Services</option>
<option value="Transaction Advisory">Transaction Advisory</option>
<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>
className="form-control"
/>
{errors.service && (
<span className="error">{errors.service.message}</span>
)}
......
container/Contact/ContactForm.js
......@@ -198,10 +198,13 @@ const ContactForm = () => {
type="text"
placeholder="Mobile"
className="text-dark form-control"
onInput={(e) => {
e.target.value = e.target.value.replace(/[^0-9]/g, '');
}}
{...register("Mobile", {
required: "Enter Your Mobile Number",
maxLength: {
value: 10,
value: /^[6-9]\d{9}$/,
message: "Invalid Mobile number",
},
})}
......
layout/Header.js
import React, { useState, useEffect } from "react";
import Link from "next/link";
import { useRouter } from "next/router";
import Image from "next/image";
"use client"
import { useState, useEffect } from "react"
import Link from "next/link"
import { useRouter } from "next/router"
import Image from "next/image"
const Header = () => {
const [menu, setMenu] = useState(true);
const router = useRouter();
const [menu, setMenu] = useState(true)
const [knowledgeOpen, setKnowledgeOpen] = useState(false)
const [clientServicingOpen, setClientServicingOpen] = useState(false)
const router = useRouter()
const toggleNavbar = () => {
setMenu(!menu);
};
setMenu(!menu)
}
// Close the menu on route change
useEffect(() => {
const handleRouteChange = () => {
setMenu(true); // Close the menu on route change
};
router.events.on("routeChangeStart", handleRouteChange);
setMenu(true)
setKnowledgeOpen(false)
setClientServicingOpen(false)
}
router.events.on("routeChangeStart", handleRouteChange)
return () => {
router.events.off("routeChangeStart", handleRouteChange);
};
}, [router]);
router.events.off("routeChangeStart", handleRouteChange)
}
}, [router])
// Sticky navbar effect
useEffect(() => {
const elementId = document.getElementById("navbar");
const elementId = document.getElementById("navbar")
const handleScroll = () => {
if (window.scrollY > 170) {
elementId.classList.add("is-sticky");
elementId.classList.add("is-sticky")
} else {
elementId.classList.remove("is-sticky");
elementId.classList.remove("is-sticky")
}
}
};
window.addEventListener("scroll", handleScroll);
window.addEventListener("scroll", handleScroll)
return () => {
window.removeEventListener("scroll", handleScroll);
};
}, []);
window.removeEventListener("scroll", handleScroll)
}
}, [])
// Check if a route is active
const isActive = (path) => {
if (path === "/") {
return router.pathname === path; // Exact match for home page
return router.pathname === path
}
return router.pathname.startsWith(path)
}
return router.pathname.startsWith(path); // Match subroutes
};
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 classTwo = menu ? "navbar-toggler navbar-toggler-right collapsed" : "navbar-toggler navbar-toggler-right"
const clientServices = [
{
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 (
<>
<style jsx>{`
.navbar-area {
background: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
position: relative;
z-index: 999;
}
.navbar-area.is-sticky {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 999;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.navbar-nav {
display: flex;
align-items: center;
gap: 2rem;
}
.nav-link {
color: #4a5568;
font-weight: 500;
text-decoration: none;
padding: 0.5rem 0;
transition: color 0.2s ease;
display: flex;
align-items: center;
gap: 0.25rem;
}
.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">
......@@ -62,7 +494,6 @@ const Header = () => {
<Link href="/" className="navbar-brand">
<Image width={144} height={33} src="/images/logo.png" alt="logo" />
</Link>
<button
onClick={toggleNavbar}
className={classTwo}
......@@ -75,7 +506,6 @@ const Header = () => {
<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">
......@@ -83,97 +513,115 @@ const Header = () => {
Home
</Link>
</li>
<li className="nav-item">
<Link href="/knowledge" className="dropdown-toggle nav-link">
{/* 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
</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>
<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">
<Link href="/client-servicing" className="dropdown-toggle nav-link">
<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>
<ul className="dropdown-menu">
<li className="nav-item">
<Link href="/client-servicing/cfo" className={`nav-link ${isActive("/client-servicing/cfo") ? "active" : ""}`}>
Virtual FC & CFO Services
</Link>
<ul>
<li className="nav-item">
<Link href="/client-servicing/ta" className={`nav-link ${isActive("/client-servicing/ta") ? "active" : ""}`}>
Transaction Advisory
</Link>
</li>
<li className="nav-item">
<Link href="/client-servicing/ra" className={`nav-link ${isActive("/client-servicing/ra") ? "active" : ""}`}>
Risk Advisory
</Link>
</li>
</ul>
</li>
<li className="nav-item">
<Link href="/client-servicing/ba" className={`nav-link ${isActive("/client-servicing/ba") ? "active" : ""}`}>
Business Advisory
</Link>
</li>
</ul>
<span className="dropdown-arrow"></span>
</button>
</li>
<li className="nav-item">
<Link href="/industry" className={`nav-link ${isActive("/industry") ? "active" : ""}`}>
Industry
</Link>
</li>
<li className="nav-item">
<Link href="/career" className={`nav-link ${isActive("/career") ? "active" : ""}`}>
Careers
</Link>
</li>
<li className="nav-item">
<Link href="/contact" className={`nav-link ${isActive("/contact") ? "active" : ""}`}>
Contact Us
</Link>
</li>
<li className="nav-item">
<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>
</div>
{service.items.length > 0 && (
<ul className="mega-column-list">
{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>
</>
);
};
)
}
export default Header;
export default Header
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!