All changes, done like fully react router uses, services, al/ml and solution page section alignment and missing section done!
This commit is contained in:
priyanshuvish
@@ -82,7 +82,7 @@ import {
|
||||
} from "lucide-react";
|
||||
import { Button } from "./ui/button";
|
||||
import BlackLogo14 from "../assets/BlackLogo14";
|
||||
import { navigateTo } from "../App";
|
||||
import { useLocation, useNavigate } from "react-router-dom";
|
||||
|
||||
const navigationData = {
|
||||
main_navigation: [
|
||||
@@ -457,16 +457,8 @@ const navigationData = {
|
||||
],
|
||||
company: [
|
||||
{ text: "About WDI", icon: Info, href: "/company/about-wdi" },
|
||||
// { text: "Our History", icon: Clock, href: "/company/our-history" },
|
||||
{ text: "Leadership Team", icon: Users2, href: "/company/leadership-team" },
|
||||
// {
|
||||
// text: "Awards & Certifications",
|
||||
// icon: Award,
|
||||
// href: "/company/awards-certifications",
|
||||
// },
|
||||
{ text: "Careers", icon: Briefcase, href: "/company/careers" },
|
||||
// { text: "Culture & Values", icon: Heart, href: "/company/culture-values" },
|
||||
// { text: "Press & Media", icon: Newspaper, href: "/company/press-media" },
|
||||
],
|
||||
resources: [
|
||||
{ text: "Blogs", icon: BookOpen, href: "/resources/blog" },
|
||||
@@ -513,7 +505,7 @@ const navigationData = {
|
||||
],
|
||||
};
|
||||
|
||||
// CTA configurations for each mega menu type - UPDATED ALL TO LINK TO START A PROJECT PAGE
|
||||
// CTA configurations for each mega menu type
|
||||
const megaMenuCTAs = {
|
||||
Services: {
|
||||
title: "Development Quote",
|
||||
@@ -575,6 +567,7 @@ const megaMenuCTAs = {
|
||||
|
||||
// Horizontal CTA Component matching reference design
|
||||
const MegaMenuCTA = ({ type }: { type: string }) => {
|
||||
const navigate = useNavigate();
|
||||
const cta = megaMenuCTAs[type as keyof typeof megaMenuCTAs];
|
||||
if (!cta) return null;
|
||||
|
||||
@@ -595,7 +588,7 @@ const MegaMenuCTA = ({ type }: { type: string }) => {
|
||||
<div className="ml-6">
|
||||
<Button
|
||||
className="bg-gradient-to-r from-[#E5195E] to-[#C41653] hover:from-[#C41653] hover:to-[#A31348] text-white font-medium text-sm px-6 py-3 h-auto rounded-xl shadow-lg hover:shadow-xl transition-all duration-200 group"
|
||||
onClick={() => navigateTo(cta.href)}
|
||||
onClick={() => navigate(cta.href)}
|
||||
>
|
||||
{cta.buttonText}
|
||||
<ArrowRight className="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform" />
|
||||
@@ -621,10 +614,12 @@ const MegaMenu = ({
|
||||
type,
|
||||
timeoutRef,
|
||||
}: MegaMenuProps) => {
|
||||
const navigate = useNavigate();
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
const navigate = (path: string) => {
|
||||
navigateTo(path);
|
||||
const handleNavigate = (path: string) => {
|
||||
navigate(path);
|
||||
onClose();
|
||||
};
|
||||
|
||||
@@ -639,24 +634,26 @@ const MegaMenu = ({
|
||||
<div className="w-10 h-10 rounded-xl bg-[#E5195E]/20 flex items-center justify-center">
|
||||
<Icon className="w-5 h-5 text-[#E5195E]" />
|
||||
</div>
|
||||
<h4
|
||||
<a
|
||||
href={service.href}
|
||||
className="font-semibold text-white text-sm cursor-pointer hover:text-[#E5195E] transition-colors"
|
||||
onClick={() => service.href && navigate(service.href)}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
service.href && handleNavigate(service.href);
|
||||
}}
|
||||
>
|
||||
{service.category}
|
||||
</h4>
|
||||
</a>
|
||||
</div>
|
||||
<ul className="space-y-3">
|
||||
{service.sub_services.map((subService) => (
|
||||
<li key={subService.name}>
|
||||
<a
|
||||
href={subService.href || '#'} // Use actual href instead of #
|
||||
className="text-[#CCCCCC] hover:text-white text-sm transition-colors duration-200 block py-1 hover:translate-x-1 transform"
|
||||
href={subService.href}
|
||||
className="text-[#CCCCCC] hover:text-white text-sm transition-colors duration-200 block py-1 hover:translate-x-1 transform text-left w-full"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
if (subService.href) {
|
||||
navigate(subService.href);
|
||||
}
|
||||
subService.href && handleNavigate(subService.href);
|
||||
}}
|
||||
>
|
||||
{subService.name}
|
||||
@@ -683,24 +680,26 @@ const MegaMenu = ({
|
||||
<div className="w-10 h-10 rounded-xl bg-[#E5195E]/20 flex items-center justify-center">
|
||||
<Icon className="w-5 h-5 text-[#E5195E]" />
|
||||
</div>
|
||||
<h4
|
||||
<a
|
||||
href={category.href}
|
||||
className="font-semibold text-white text-lg cursor-pointer hover:text-[#E5195E] transition-colors"
|
||||
onClick={() => category.href && navigate(category.href)}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
category.href && handleNavigate(category.href);
|
||||
}}
|
||||
>
|
||||
{category.category}
|
||||
</h4>
|
||||
</a>
|
||||
</div>
|
||||
<ul className="space-y-3">
|
||||
{category.sub_services.map((service) => (
|
||||
<li key={service.name}>
|
||||
<a
|
||||
href={service.href || '#'} // Use actual href instead of #
|
||||
className="text-[#CCCCCC] hover:text-white text-sm transition-colors duration-200 block py-1 hover:translate-x-1 transform"
|
||||
href={service.href}
|
||||
className="text-[#CCCCCC] hover:text-white text-sm transition-colors duration-200 block py-1 hover:translate-x-1 transform text-left w-full"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
if (service.href) {
|
||||
navigate(service.href);
|
||||
}
|
||||
service.href && handleNavigate(service.href);
|
||||
}}
|
||||
>
|
||||
{service.name}
|
||||
@@ -724,13 +723,11 @@ const MegaMenu = ({
|
||||
return (
|
||||
<a
|
||||
key={solution.text}
|
||||
href={solution.href || '#'} // Use actual href instead of #
|
||||
className="flex items-center gap-4 text-[#CCCCCC] hover:text-white transition-all duration-200 p-4 rounded-lg hover:bg-white/5 group"
|
||||
href={solution.href}
|
||||
className="flex items-center gap-4 text-[#CCCCCC] hover:text-white transition-all duration-200 p-4 rounded-lg hover:bg-white/5 group w-full text-left"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
if (solution.href) {
|
||||
navigate(solution.href);
|
||||
}
|
||||
solution.href && handleNavigate(solution.href);
|
||||
}}
|
||||
>
|
||||
<div className="w-8 h-8 rounded-lg bg-[#E5195E]/20 flex items-center justify-center group-hover:scale-110 transition-transform">
|
||||
@@ -764,13 +761,11 @@ const MegaMenu = ({
|
||||
{industry.items.map((item) => (
|
||||
<li key={item.name}>
|
||||
<a
|
||||
href={item.href || '#'} // Use actual href instead of #
|
||||
className="text-[#CCCCCC] hover:text-white text-sm transition-colors duration-200 block py-1 hover:translate-x-1 transform"
|
||||
href={item.href}
|
||||
className="text-[#CCCCCC] hover:text-white text-sm transition-colors duration-200 block py-1 hover:translate-x-1 transform text-left w-full"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
if (item.href) {
|
||||
navigate(item.href);
|
||||
}
|
||||
item.href && handleNavigate(item.href);
|
||||
}}
|
||||
>
|
||||
{item.name}
|
||||
@@ -794,13 +789,11 @@ const MegaMenu = ({
|
||||
return (
|
||||
<a
|
||||
key={item.text}
|
||||
href={item.href || '#'} // Use actual href instead of #
|
||||
className="flex items-center gap-4 text-[#CCCCCC] hover:text-white transition-all duration-200 p-4 rounded-lg hover:bg-white/5 group"
|
||||
href={item.href}
|
||||
className="flex items-center gap-4 text-[#CCCCCC] hover:text-white transition-all duration-200 p-4 rounded-lg hover:bg-white/5 group w-full text-left"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
if (item.href) {
|
||||
navigate(item.href);
|
||||
}
|
||||
item.href && handleNavigate(item.href);
|
||||
}}
|
||||
>
|
||||
<div className="w-8 h-8 rounded-lg bg-[#E5195E]/20 flex items-center justify-center group-hover:scale-110 transition-transform">
|
||||
@@ -870,10 +863,7 @@ export const Navigation = () => {
|
||||
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
||||
const timeoutRef = useRef<NodeJS.Timeout>();
|
||||
const navRef = useRef<HTMLElement>(null);
|
||||
|
||||
const navigate = (path: string) => {
|
||||
navigateTo(path);
|
||||
};
|
||||
const navigate = useNavigate();
|
||||
|
||||
const openMenu = useCallback((item: string) => {
|
||||
if (timeoutRef.current) {
|
||||
@@ -918,12 +908,6 @@ export const Navigation = () => {
|
||||
closeMenu();
|
||||
}, [closeMenu]);
|
||||
|
||||
// const handleNavMouseLeave = useCallback((e: React.MouseEvent) => {
|
||||
// const relatedTarget = e.relatedTarget as Element;
|
||||
// if (!navRef.current?.contains(relatedTarget)) {
|
||||
// closeMenu();
|
||||
// }
|
||||
// }, [closeMenu]);
|
||||
const handleNavMouseLeave = useCallback(
|
||||
(e: React.MouseEvent) => {
|
||||
const relatedTarget = e.relatedTarget;
|
||||
@@ -977,14 +961,20 @@ export const Navigation = () => {
|
||||
case "AI & ML":
|
||||
return "/artificial-intelligence";
|
||||
case "Solutions":
|
||||
return "/solutions/digital-product-development"; // Default to first solution
|
||||
return "/solutions/digital-product-development";
|
||||
case "Industries":
|
||||
return "/industries/fintech-banking-apps"; // Default to first industry
|
||||
return "/industries/fintech-banking-apps";
|
||||
default:
|
||||
return null;
|
||||
return "/";
|
||||
}
|
||||
};
|
||||
|
||||
const handleNavigation = (path: string) => {
|
||||
navigate(path);
|
||||
setIsMobileMenuOpen(false);
|
||||
setActiveMenu(null);
|
||||
};
|
||||
|
||||
return (
|
||||
<nav
|
||||
ref={navRef}
|
||||
@@ -995,22 +985,17 @@ export const Navigation = () => {
|
||||
<div className="container mx-auto px-6 lg:px-8">
|
||||
<div className="flex items-center justify-between h-20">
|
||||
<div className="flex items-center">
|
||||
<a
|
||||
href="#"
|
||||
<button
|
||||
className="flex items-center"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
navigate("/");
|
||||
}}
|
||||
onClick={() => handleNavigation("/")}
|
||||
>
|
||||
<div className="w-10 h-10">
|
||||
<BlackLogo14 />
|
||||
</div>
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="hidden lg:flex items-center space-x-6 xl:space-x-8">
|
||||
|
||||
{navigationData.main_navigation.map((item) => (
|
||||
<div
|
||||
key={item}
|
||||
@@ -1019,21 +1004,19 @@ export const Navigation = () => {
|
||||
onMouseLeave={handleNavItemMouseLeave}
|
||||
>
|
||||
<a
|
||||
href={getMainCategoryRoute(item) || '#'} // Use actual route instead of #
|
||||
href={getMainCategoryRoute(item)}
|
||||
className="flex items-center gap-1 text-[#CCCCCC] hover:text-white transition-colors duration-200 py-2 font-medium text-sm xl:text-base whitespace-nowrap"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
const route = getMainCategoryRoute(item);
|
||||
if (route) {
|
||||
navigate(route);
|
||||
}
|
||||
handleNavigation(getMainCategoryRoute(item));
|
||||
}}
|
||||
>
|
||||
{item}
|
||||
{hasDropdown(item) && (
|
||||
<ChevronDown
|
||||
className={`w-4 h-4 transition-transform duration-200 ${activeMenu === item ? "rotate-180" : ""
|
||||
}`}
|
||||
className={`w-4 h-4 transition-transform duration-200 ${
|
||||
activeMenu === item ? "rotate-180" : ""
|
||||
}`}
|
||||
/>
|
||||
)}
|
||||
</a>
|
||||
@@ -1043,7 +1026,7 @@ export const Navigation = () => {
|
||||
|
||||
<div className="flex items-center space-x-4">
|
||||
<Button
|
||||
onClick={() => navigate("/start-a-project")}
|
||||
onClick={() => handleNavigation("/start-a-project")}
|
||||
className="hidden lg:flex"
|
||||
>
|
||||
Get Started
|
||||
@@ -1091,25 +1074,18 @@ export const Navigation = () => {
|
||||
{navigationData.main_navigation.map((item) => (
|
||||
<a
|
||||
key={item}
|
||||
href={getMainCategoryRoute(item) || '#'}
|
||||
className="block text-[#CCCCCC] hover:text-white transition-colors py-2 font-medium"
|
||||
href={getMainCategoryRoute(item)}
|
||||
className="block text-[#CCCCCC] hover:text-white transition-colors py-2 font-medium text-left w-full"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
const route = getMainCategoryRoute(item);
|
||||
if (route) {
|
||||
navigate(route);
|
||||
setIsMobileMenuOpen(false);
|
||||
}
|
||||
handleNavigation(getMainCategoryRoute(item));
|
||||
}}
|
||||
>
|
||||
{item}
|
||||
</a>
|
||||
))}
|
||||
<Button
|
||||
onClick={() => {
|
||||
navigate("/start-a-project");
|
||||
setIsMobileMenuOpen(false);
|
||||
}}
|
||||
onClick={() => handleNavigation("/start-a-project")}
|
||||
className="w-full mt-4"
|
||||
>
|
||||
Get Started
|
||||
@@ -1121,4 +1097,4 @@ export const Navigation = () => {
|
||||
</AnimatePresence>
|
||||
</nav>
|
||||
);
|
||||
};
|
||||
};
|
||||
Reference in New Issue
Block a user