All changes, done like fully react router uses, services, al/ml and solution page section alignment and missing section done!

2025-09-23 20:13:31 +05:30
parent 5f5ddb1cd6
commit e78c8672e9
158 changed files with 2444 additions and 2093 deletions
--- a/components/CaseStudyHighlight.tsx
+++ b/components/CaseStudyHighlight.tsx
@@ -3,12 +3,12 @@ import { ArrowRight, ExternalLink } from "lucide-react";
 import { Button } from "./ui/button";
 import { GridPattern } from "./GridPattern";
 import { ImageWithFallback } from "./figma/ImageWithFallback";
-import { navigateTo } from "../App";
 import regroupImage from '../src/images/regroup.webp';
 import seezunImage from '../src/images/seezun.webp';
 // import wokaImage from '../src/images/woka.webp';
 import wokaAwardImage from '../src/images/woka.webp';
 import tanamiImage from '../src/images/tanami.webp';
+import { useNavigate } from "react-router-dom";

 const featuredCaseStudy = {
  title: "Woka",
@@ -63,6 +63,8 @@ const SmallCaseStudyCard = ({ study, index }: { study: typeof caseStudies[0]; in
    }
  };

+  const navigate = useNavigate();
+
  return (
    <motion.div
      initial={{ opacity: 0, y: 50 }}
@@ -70,7 +72,7 @@ const SmallCaseStudyCard = ({ study, index }: { study: typeof caseStudies[0]; in
      transition={{ duration: 0.6, delay: index * 0.01 }}
      viewport={{ once: true }}
      className="group bg-card rounded-[10px] overflow-hidden hover:bg-card/80 hover:shadow-lg hover:scale-[1.02] transition-all duration-300 cursor-pointer border border-transparent hover:border-border/50"
-      onClick={() => navigateTo(getNavigationPath(study.title))}
+      onClick={() => navigate(getNavigationPath(study.title))}
    >
      <div className="relative aspect-[4/3] overflow-hidden bg-muted/30 px-2 rounded-[10px]">
        <ImageWithFallback
@@ -114,7 +116,7 @@ const SmallCaseStudyCard = ({ study, index }: { study: typeof caseStudies[0]; in
          className="text-accent text-sm font-medium hover:text-foreground transition-colors duration-300 flex items-center gap-2 group-hover:translate-x-1 transition-transform duration-300"
          onClick={(e) => {
            e.stopPropagation();
-            navigateTo(getNavigationPath(study.title));
+            navigate(getNavigationPath(study.title));
          }}
        >
          View Case Study <ArrowRight className="w-4 h-4" />
@@ -125,6 +127,7 @@ const SmallCaseStudyCard = ({ study, index }: { study: typeof caseStudies[0]; in
 };

 export const CaseStudyHighlight = () => {
+  const navigate = useNavigate();
  return (
    <section className="relative py-20 bg-background overflow-hidden">
      <GridPattern strokeDasharray="4 2" />
@@ -151,7 +154,7 @@ export const CaseStudyHighlight = () => {
          transition={{ duration: 0.8 }}
          viewport={{ once: true }}
          className="bg-card rounded-[10px] overflow-hidden mb-12 group cursor-pointer hover:bg-card/80 hover:shadow-xl hover:scale-[1.01] transition-all duration-300 border border-transparent hover:border-accent/20"
-          onClick={() => navigateTo('/projects/woka')}
+          onClick={() => navigate('/projects/woka')}
        >
          <div className="grid lg:grid-cols-3 gap-0">
            <div className="lg:col-span-2 relative aspect-[16/10] sm:aspect-[16/9] overflow-hidden bg-muted/30 px-2 rounded-[10px]">
@@ -199,7 +202,7 @@ export const CaseStudyHighlight = () => {
                className="text-accent font-medium hover:text-foreground transition-colors duration-300 flex items-center gap-3 group-hover:translate-x-2 transition-transform duration-300"
                onClick={(e) => {
                  e.stopPropagation();
-                  navigateTo('/projects/woka');
+                  navigate('/projects/woka');
                }}
              >
                View Full Case Study <ArrowRight className="w-5 h-5" />
@@ -222,7 +225,7 @@ export const CaseStudyHighlight = () => {
          className="text-center"
        >
          <Button 
-            onClick={() => navigateTo('/case-studies')}
+            onClick={() => navigate('/case-studies')}
            className="bg-accent hover:bg-accent/90 text-accent-foreground px-8 py-3 rounded-[10px]"
          >
            View All Case Studies <ExternalLink className="w-4 h-4 ml-2" />
--- a/components/FeaturedCaseStudies.tsx
+++ b/components/FeaturedCaseStudies.tsx
@@ -4,7 +4,6 @@ import { Button } from "./ui/button";
 import { Badge } from "./ui/badge";
 import { Card, CardContent } from "./ui/card";
 import { ImageWithFallback } from "./figma/ImageWithFallback";
-import { navigateTo } from "../App";
 import { 
  ArrowRight, 
  TrendingUp, 
@@ -33,6 +32,7 @@ import wokasideawardLocalImage from '../src/images/woka-side-award.webp';
 import traderCircuitLocalImage from '../src/images/traders-circuit.webp';
 import goodTimesLocalImage from '../src/images/goodtimes.webp';
 import prospertyLocalImage from '../src/images/prosperty.webp';
+import { useNavigate } from "react-router-dom";

 const FeaturedCaseStudies = () => {
  const caseStudies = [
@@ -153,6 +153,8 @@ const FeaturedCaseStudies = () => {
    }
  ];

+  const navigate = useNavigate();
+
  return (
    <section className="py-20 bg-black">
      <div className="container mx-auto px-6 lg:px-8">
@@ -205,13 +207,13 @@ const FeaturedCaseStudies = () => {
                  className="bg-gray-900/50 backdrop-blur-md border-gray-800 hover:border-accent/30 transition-all duration-500 shadow-lg hover:shadow-2xl rounded-2xl overflow-hidden h-full group-hover:scale-[1.02] transform flex flex-col cursor-pointer"
                  onClick={() => {
                    if (study.title === 'Seezun') {
-                      navigateTo('/projects/seezun');
+                      navigate('/projects/seezun');
                    } else if (study.title === 'WOKA') {
-                      navigateTo('/projects/woka');
+                      navigate('/projects/woka');
                    } else if (study.title === 'Tanami') {
-                      navigateTo('/projects/tanami');
+                      navigate('/projects/tanami');
                    } else {
-                      navigateTo('/case-studies');
+                      navigate('/case-studies');
                    }
                  }}
                >
@@ -307,13 +309,13 @@ const FeaturedCaseStudies = () => {
                            onClick={(e) => {
                              e.stopPropagation();
                              if (study.title === 'Seezun') {
-                                navigateTo('/projects/seezun');
+                                navigate('/projects/seezun');
                              } else if (study.title === 'WOKA') {
-                                navigateTo('/projects/woka');
+                                navigate('/projects/woka');
                              } else if (study.title === 'Tanami') {
-                                navigateTo('/projects/tanami');
+                                navigate('/projects/tanami');
                              } else {
-                                navigateTo('/case-studies');
+                                navigate('/case-studies');
                              }
                            }}
                          >
@@ -359,15 +361,15 @@ const FeaturedCaseStudies = () => {
                    className="bg-gray-900/50 backdrop-blur-md border-gray-800 hover:border-accent/30 transition-all duration-500 shadow-lg hover:shadow-2xl rounded-2xl overflow-hidden h-full group-hover:scale-[1.02] transform flex flex-col cursor-pointer"
                    onClick={() => {
                      if (story.title === 'TradersCircuit') {
-                        navigateTo('/projects/traderscircuit');
+                        navigate('/projects/traderscircuit');
                      } else if (story.title === 'GoodTimes') {
-                        navigateTo('/projects/goodtimes');
+                        navigate('/projects/goodtimes');
                      } else if (story.title === 'Prosperty') {
-                        navigateTo('/projects/prosperty');
+                        navigate('/projects/prosperty');
                      } else if (story.title === 'RanOutOf') {
-                        navigateTo('/projects/ranoutof');
+                        navigate('/projects/ranoutof');
                      } else {
-                        navigateTo('/case-studies');
+                        navigate('/case-studies');
                      }
                    }}
                  >
@@ -453,15 +455,15 @@ const FeaturedCaseStudies = () => {
                              onClick={(e) => {
                                e.stopPropagation();
                                if (story.title === 'TradersCircuit') {
-                                  navigateTo('/projects/traderscircuit');
+                                  navigate('/projects/traderscircuit');
                                } else if (story.title === 'GoodTimes') {
-                                  navigateTo('/projects/goodtimes');
+                                  navigate('/projects/goodtimes');
                                } else if (story.title === 'Prosperty') {
-                                  navigateTo('/projects/prosperty');
+                                  navigate('/projects/prosperty');
                                } else if (story.title === 'RanOutOf') {
-                                  navigateTo('/projects/ranoutof');
+                                  navigate('/projects/ranoutof');
                                } else {
-                                  navigateTo('/case-studies');
+                                  navigate('/case-studies');
                                }
                              }}
                            >
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -12,9 +12,9 @@ import { GridPattern } from "./GridPattern";
 import { Button } from "./ui/button";
 import { Input } from "./ui/input";
 import BlackLogo14 from "../assets/BlackLogo14";
-import { navigateTo } from "../App";
 import { useState } from "react";
 import GlobalOffices from "./GlobalOffices";
+import { useNavigate } from "react-router-dom";

 const footerNavigation = {
  Explore: [
@@ -179,10 +179,13 @@ const contactInfo = [
    icon: MapPin,
    label:
      "614, Palm Spring Centre, Link Road, Malad (West), Mumbai - 400064. India.",
-    url: "#",
+    url: "https://www.google.com/search?q=614%2C+Palm+Spring+Centre...",
+    blank: true,
  },
 ];

+
+// FooterSection component with useNavigate inside
 const FooterSection = ({
  title,
  links,
@@ -191,35 +194,39 @@ const FooterSection = ({
  title: string;
  links: Array<{ label: string; url: string }>;
  delay?: number;
-}) => (
-  <motion.div
-    initial={{ opacity: 0, y: 30 }}
-    whileInView={{ opacity: 1, y: 0 }}
-    transition={{ duration: 0.6, delay }}
-    viewport={{ once: true }}
-    className="space-y-4"
-  >
-    <h4 className="font-semibold text-white text-lg">
-      {title}
-    </h4>
-    <ul className="space-y-3">
-      {links.map((link) => (
-        <li key={link.label}>
-          <a
-            href={link.url || '#'}
-            onClick={(e) => {
-              e.preventDefault();
-              navigateTo(link.url);
-            }}
-            className="text-[#CCCCCC] hover:text-white transition-colors duration-200 text-sm block py-1 hover:translate-x-1 transform cursor-pointer"
-          >
-            {link.label}
-          </a>
-        </li>
-      ))}
-    </ul>
-  </motion.div>
-);
+}) => {
+  const navigate = useNavigate();
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 30 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.6, delay }}
+      viewport={{ once: true }}
+      className="space-y-4"
+    >
+      <h4 className="font-semibold text-white text-lg">
+        {title}
+      </h4>
+      <ul className="space-y-3">
+        {links.map((link) => (
+          <li key={link.label}>
+            <a
+              href={link.url || '#'}
+              onClick={(e) => {
+                e.preventDefault();
+                navigate(link.url);
+              }}
+              className="text-[#CCCCCC] hover:text-white transition-colors duration-200 text-sm block py-1 hover:translate-x-1 transform cursor-pointer"
+            >
+              {link.label}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </motion.div>
+  );
+};

 // Newsletter subscription component
 const NewsletterSection = () => {
@@ -356,6 +363,8 @@ export const Footer = () => {
                        <a
                          key={contact.label}
                          href={contact.url}
+                          target={contact.blank ? "_blank" : "_self"}
+                          rel={contact.blank ? "noopener noreferrer" : undefined}
                          className="flex items-start gap-3 text-[#CCCCCC] hover:text-white transition-colors duration-200"
                        >
                          <Icon className="w-4 h-4 text-[#E5195E] mt-0.5 flex-shrink-0" />
@@ -376,6 +385,8 @@ export const Footer = () => {
                      <a
                        key={social.name}
                        href={social.url}
+                        target="_blank"
+                        rel="noopener noreferrer"
                        className="w-10 h-10 bg-white/5 rounded-lg flex items-center justify-center text-[#CCCCCC] hover:text-white hover:bg-[#E5195E]/20 transition-all duration-200"
                        aria-label={social.name}
                      >
@@ -392,7 +403,7 @@ export const Footer = () => {
                links={footerNavigation.Explore}
                delay={0.1}
              />
-              
+
              {/* Combined Services & Company */}
              <div className="space-y-8">
                <FooterSection
@@ -406,7 +417,7 @@ export const Footer = () => {
                  delay={0.3}
                />
              </div>
-              
+
              {/* Combined AI & ML with Resources */}
              <div className="space-y-8">
                <FooterSection
@@ -420,13 +431,13 @@ export const Footer = () => {
                  delay={0.5}
                />
              </div>
-              
+
              <FooterSection
                title="Solutions"
                links={footerNavigation.Solutions}
                delay={0.6}
              />
-              
+
              <FooterSection
                title="Hire Talent"
                links={footerNavigation.HireTalent}
--- a/components/GlobalOffices.tsx
+++ b/components/GlobalOffices.tsx
@@ -36,7 +36,7 @@ const offices = [

 export default function GlobalOffices() {
  return (
-      <section className="bg-wdi-grey text-white py-20 lg:px-8 container mx-auto">
+      <section className="text-white py-20 lg:px-8 container mx-auto">
      {/* Section Heading */}
      <motion.h2
        initial={{ opacity: 0, y: 30 }}
--- a/components/HeroBanner.tsx
+++ b/components/HeroBanner.tsx
@@ -1,7 +1,7 @@
 import { Button } from "./ui/button";
 import { GridPattern } from "./GridPattern";
 import { ChevronRight } from "lucide-react";
-import { navigateTo } from "../App";
+import { useNavigate } from "react-router-dom";

 interface HeroBannerProps {
  category?: string;
@@ -24,6 +24,7 @@ export function HeroBanner({
  primaryCTA,
  secondaryCTA
 }: HeroBannerProps) {
+  const navigate = useNavigate();
  return (
    <section className="relative py-20 lg:py-32 bg-[#0E0E0E] overflow-hidden">
      <GridPattern />
@@ -54,7 +55,7 @@ export function HeroBanner({
            <Button
              size="lg"
              className="bg-gradient-to-r from-[#E5195E] to-[#C41653] hover:from-[#C41653] hover:to-[#A31348] text-white font-semibold px-8 py-4 h-auto text-base"
-              onClick={() => navigateTo(primaryCTA.href)}
+              onClick={() => navigate(primaryCTA.href)}
            >
              {primaryCTA.text}
            </Button>
@@ -64,7 +65,7 @@ export function HeroBanner({
                variant="secondary"
                size="lg"
                className="bg-white/5 hover:bg-white/10 text-white border-white/20 hover:border-white/30 font-medium px-8 py-4 h-auto text-base"
-                onClick={() => navigateTo(secondaryCTA.href)}
+                onClick={() => navigate(secondaryCTA.href)}
              >
                {secondaryCTA.text}
                <ChevronRight className="w-4 h-4 ml-2" />
--- a/components/HeroSection.tsx
+++ b/components/HeroSection.tsx
@@ -1,11 +1,12 @@
 import { Button } from "./ui/button";
 import { GridPattern } from "./GridPattern";
 import { Calendar, Briefcase } from "lucide-react";
-import { navigateTo } from "../App";
 import { motion } from "framer-motion";
 import Spline from "@splinetool/react-spline";
+import { useNavigate } from "react-router-dom";

 export function HeroSection() {
+  const navigate = useNavigate();
  return (
    <section
      id="hero"
@@ -91,7 +92,7 @@ export function HeroSection() {
              <Button
                size="lg"
                className="whitespace-nowrap"
-                onClick={() => navigateTo("/start-a-project")}
+                onClick={() => navigate("/start-a-project")}
              >
                <Calendar className="w-4 h-4" />
                Book a Free Consultation
@@ -101,7 +102,7 @@ export function HeroSection() {
                variant="secondary"
                size="lg"
                className="whitespace-nowrap"
-                onClick={() => navigateTo("/services")}
+                onClick={() => navigate("/services")}
              >
                <Briefcase className="w-4 h-4" />
                Explore Services
--- a/components/HireDeveloperSection.tsx
+++ b/components/HireDeveloperSection.tsx
@@ -3,7 +3,7 @@ import { Badge } from "@/components/ui/badge";
 import { Card, CardContent } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { UserPlus, ArrowRight } from "lucide-react";
-import { navigateTo } from "@/App";
+import { useNavigate } from "react-router-dom";
 import { ShimmerButton } from "./ui/shimmer-button";

 const HireDeveloperSection = ({
@@ -13,6 +13,7 @@ const HireDeveloperSection = ({
  buttonText,
  buttonLink,
 }) => {
+  const navigate = useNavigate();
  return (
    <section className="py-32 bg-black">
      <div className="container mx-auto px-6 lg:px-8">
@@ -104,7 +105,7 @@ const HireDeveloperSection = ({
          viewport={{ once: true }}
          className="flex flex-col sm:flex-row gap-4 justify-center"
        >
-          <ShimmerButton className="px-8 py-4" onClick={() => navigateTo(buttonLink)}>
+          <ShimmerButton className="px-8 py-4" onClick={() => navigate(buttonLink)}>
            <div className="inline-flex items-center gap-2">
              <UserPlus className="w-5 h-5 flex-shrink-0" />
              <span>{buttonText}</span>
--- a/components/HireTalentHeroBanner.tsx
+++ b/components/HireTalentHeroBanner.tsx
@@ -1,6 +1,6 @@
+import { useNavigate } from "react-router-dom";
 import { Button } from "./ui/button";
 import { ShimmerButton } from "./ui/shimmer-button";
-import { navigateTo } from "../App";
 import { DashboardVector } from "./vectors/DashboardVector";
 import { motion } from "framer-motion";

@@ -31,6 +31,7 @@ export function HireTalentHeroBanner({
  useVectors = false,
  vectorComponent: VectorComponent
 }: HireTalentHeroBannerProps) {
+  const navigate = useNavigate();
  return (
    <section className="relative py-20 overflow-hidden bg-black">
      <div className="container mx-auto px-6 lg:px-8">
@@ -74,7 +75,7 @@ export function HireTalentHeroBanner({
            >
              <ShimmerButton 
                className="text-lg px-8 py-4 font-manrope"
-                onClick={() => navigateTo(primaryCTA.href)}
+                onClick={() => navigate(primaryCTA.href)}
              >
                <div className="inline-flex items-center gap-2">
                  {primaryCTA.icon && <primaryCTA.icon className="w-5 h-5 flex-shrink-0" />}
@@ -87,7 +88,7 @@ export function HireTalentHeroBanner({
                  variant="outline"
                  size="lg"
                  className="text-lg px-8 py-4 h-auto border-gray-600 text-gray-300 hover:bg-gray-800 hover:text-white font-manrope"
-                  onClick={() => navigateTo(secondaryCTA.href)}
+                  onClick={() => navigate(secondaryCTA.href)}
                >
                  <div className="inline-flex items-center gap-2">
                    {secondaryCTA.icon && <secondaryCTA.icon className="w-5 h-5 flex-shrink-0" />}
--- a/components/HorizontalTagScroller.tsx
+++ b/components/HorizontalTagScroller.tsx
@@ -14,28 +14,30 @@ import {
  Cloud
 } from "lucide-react";
 import { GridPattern } from "./GridPattern";
+import { useNavigate } from "react-router-dom";

 const industries = [
  // First row
-  { name: "FinTech", icon: CreditCard },
-  { name: "HealthTech", icon: Heart },
-  { name: "eCommerce", icon: ShoppingCart },
-  { name: "EdTech", icon: GraduationCap },
+  { name: "FinTech", icon: CreditCard, link: "/industries/fintech-banking-apps" },
+  { name: "HealthTech", icon: Heart, link: "/industries/healthcare/healthtech-applications" },
+  { name: "eCommerce", icon: ShoppingCart, link: "/industries/commerce/ecommerce-marketplaces" },
+  { name: "EdTech", icon: GraduationCap, link: "/industries/education/edtech-platforms" },
  // Second row
-  { name: "Logistics", icon: Truck },
-  { name: "Media & OTT", icon: Video },
-  { name: "Real Estate", icon: Building },
-  { name: "Travel", icon: Plane },
-  // Third row (we'll make it 3x4 instead to fit all 12)
-  { name: "Manufacturing", icon: Factory },
-  { name: "AgriTech", icon: Wheat },
-  { name: "Gaming", icon: Gamepad2 },
-  { name: "SaaS", icon: Cloud }
+  { name: "Logistics", icon: Truck, link: "/industries/mobility/transportation-apps" },
+  { name: "Media & OTT", icon: Video, link: "/industries/media/ott-streaming-apps" },
+  { name: "Real Estate", icon: Building, link: "/industries/financial-services/real-estate-tech" },
+  { name: "Travel", icon: Plane, link: "/industries/commerce/travel-booking-systems" },
+  // Third row
+  { name: "Manufacturing", icon: Factory, link: "/industries/industrial/manufacturing-automation" },
+  { name: "AgriTech", icon: Wheat, link: "/industries/industrial/agritech-platforms" },
+  { name: "Gaming", icon: Gamepad2, link: "/industries/media/sports-fan-engagement" },
+  { name: "SaaS", icon: Cloud, link: "/industries/financial-services/wealthtech-platforms" }
 ];

-const IndustryCard = ({ industry, index }: { 
-  industry: { name: string; icon: any }; 
+const IndustryCard = ({ industry, index, onClick }: { 
+  industry: { name: string; icon: any; link: string }; 
  index: number;
+  onClick: (link: string) => void;
 }) => {
  const Icon = industry.icon;
  
@@ -47,6 +49,7 @@ const IndustryCard = ({ industry, index }: {
      viewport={{ once: true }}
      whileHover={{ y: -5, scale: 1.02 }}
      className="group p-6 rounded-xl bg-white/5 backdrop-blur-sm border border-white/10 hover:border-[#E5195E]/50 transition-all duration-300 cursor-pointer text-center"
+      onClick={() => onClick(industry.link)}
    >
      <div className="w-16 h-16 mx-auto mb-4 rounded-xl bg-[#E5195E]/10 flex items-center justify-center group-hover:scale-110 group-hover:bg-[#E5195E]/20 transition-all duration-300">
        <Icon className="w-8 h-8 text-[#E5195E]" />
@@ -59,6 +62,12 @@ const IndustryCard = ({ industry, index }: {
 };

 export const HorizontalTagScroller = () => {
+  const navigate = useNavigate();
+
+  const handleIndustryClick = (link: string) => {
+    navigate(link);
+  };
+
  return (
    <section className="relative py-20 bg-[#0E0E0E] overflow-hidden">
      <GridPattern strokeDasharray="4 2" />
@@ -79,13 +88,13 @@ export const HorizontalTagScroller = () => {
          </p>
        </motion.div>
        
-        {/* 4x3 Grid for larger screens, 2x6 for tablets, 1x12 for mobile */}
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 max-w-7xl mx-auto">
          {industries.map((industry, index) => (
            <IndustryCard 
              key={industry.name} 
              industry={industry} 
              index={index}
+              onClick={handleIndustryClick}
            />
          ))}
        </div>
--- a/components/InlineCTA.tsx
+++ b/components/InlineCTA.tsx
@@ -2,9 +2,10 @@ import { motion } from "framer-motion";
 import { Lightbulb, Clock } from "lucide-react";
 import { Button } from "./ui/button";
 import { GridPattern } from "./GridPattern";
-import { navigateTo } from "../App";
+import { useNavigate } from "react-router-dom";

 export const InlineCTA = () => {
+  const navigate = useNavigate();
  return (
    <section className="relative py-20 overflow-hidden">
      <GridPattern strokeDasharray="4 2" />
@@ -145,7 +146,7 @@ export const InlineCTA = () => {
              <Button 
                size="lg" 
                className="bg-accent hover:bg-accent/90 text-accent-foreground px-8 py-4 text-lg border-0 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300"
-                onClick={() => navigateTo('/contact')}
+                onClick={() => navigate('/contact')}
              >
                <motion.div
                  animate={{
--- a/components/Navigation.tsx
+++ b/components/Navigation.tsx
@@ -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>
  );
-};
+};
--- a/components/ProcessSection.tsx
+++ b/components/ProcessSection.tsx
@@ -13,7 +13,7 @@ import {
 } from "lucide-react";
 import { Button } from "./ui/button";
 import { Badge } from "./ui/badge";
-import { navigateTo } from "@/App";
+import { useNavigate } from "react-router-dom";

 const steps = [
  {
@@ -252,6 +252,7 @@ const ProcessCard = ({

 export const ProcessSection = () => {
  const titleRef = useRef(null);
+  const navigate = useNavigate();

  return (
    <section className="relative overflow-hidden py-20 bg-background">
@@ -299,7 +300,7 @@ export const ProcessSection = () => {
          <Button
            size="lg"
            className="bg-accent hover:bg-accent/90 text-accent-foreground border-0 rounded-lg px-8 py-4 group text-lg"
-            onClick={() => navigateTo("/start-a-project")}
+            onClick={() => navigate("/start-a-project")}
          >
            <span className="flex items-center gap-2">
              Start Your Project Today
--- a/components/ResourceCards.tsx
+++ b/components/ResourceCards.tsx
@@ -2,7 +2,7 @@ import { motion } from "framer-motion";
 import { ArrowRight, Calendar, Clock } from "lucide-react";
 import { Button } from "./ui/button";
 import { ImageWithFallback } from "./figma/ImageWithFallback";
-import { navigateTo } from "../App";
+import { useNavigate } from "react-router-dom";

 const resources = [
  {
@@ -62,6 +62,7 @@ const ResourceCard = ({
  resource: (typeof resources)[0];
  index: number;
 }) => {
+  const navigate = useNavigate();
  return (
    <motion.article
      initial={{ opacity: 0, y: 50 }}
@@ -69,7 +70,7 @@ const ResourceCard = ({
      transition={{ duration: 0.6, delay: index * 0.2 }}
      viewport={{ once: true }}
      className="group bg-card rounded-lg border border-border overflow-hidden hover:border-border/80 transition-all duration-300 hover:shadow-lg cursor-pointer"
-      onClick={() => navigateTo(`/insights/${resource.slug}`)}
+      onClick={() => navigate(`/insights/${resource.slug}`)}
    >
      {/* Image */}
      <div className="aspect-[16/9] overflow-hidden relative">
@@ -128,7 +129,7 @@ const ResourceCard = ({
            className="text-accent hover:text-accent-foreground hover:bg-accent/10 p-2 h-auto group-hover:translate-x-1 transition-transform"
            onClick={(e) => {
              e.stopPropagation();
-              navigateTo(`/insights/${resource.slug}`);
+              navigate(`/insights/${resource.slug}`);
            }}
          >
            <ArrowRight className="w-4 h-4" />
@@ -140,6 +141,7 @@ const ResourceCard = ({
 };

 export const ResourceCards = () => {
+  const navigate = useNavigate();
  return (
    <section className="relative py-20 overflow-hidden">
      <div className="container mx-auto px-6 lg:px-8">
@@ -181,7 +183,7 @@ export const ResourceCards = () => {
        >
          <Button
            className="bg-accent hover:bg-accent/90 text-accent-foreground border-0 rounded-lg px-6 py-3"
-            onClick={() => navigateTo("/resources")}
+            onClick={() => navigate("/resources")}
          >
            View All Resources <ArrowRight className="w-4 h-4 ml-2" />
          </Button>
--- a/components/ServicesGrid.tsx
+++ b/components/ServicesGrid.tsx
@@ -1,7 +1,7 @@
 import { motion } from "framer-motion";
 import { Smartphone, Globe, Palette, Brain, RefreshCw, Users } from "lucide-react";
 import { GridPattern } from "./GridPattern";
-import { navigateTo } from "../App";
+import { useNavigate } from "react-router-dom";

 const services = [
  {
@@ -42,10 +42,10 @@ const ServiceCard = ({ service, index }: { service: typeof services[0]; index: n
  
  const handleClick = () => {
    if (service.href) {
-      navigateTo(service.href);
+      navigate(service.href);
    }
  };
-  
+  const navigate = useNavigate();
  return (
    <motion.div
      initial={{ opacity: 0, y: 50 }}
--- a/components/SplitCallToAction.tsx
+++ b/components/SplitCallToAction.tsx
@@ -2,9 +2,10 @@ import { motion } from "framer-motion";
 import { Phone, Clock, Zap, Calendar, MessageSquare } from "lucide-react";
 import { Button } from "./ui/button";
 import { GridPattern } from "./GridPattern";
-import { navigateTo } from "../App";
+import { useNavigate } from "react-router-dom";

 export const SplitCallToAction = () => {
+  const navigate = useNavigate();
  return (
    <section className="relative py-20 overflow-hidden">
      <GridPattern strokeDasharray="4 2" />
@@ -86,7 +87,7 @@ export const SplitCallToAction = () => {
                <Button 
                  size="lg" 
                  className="w-full bg-accent hover:bg-accent/90 text-accent-foreground py-4 text-lg border-0 rounded-lg"
-                  onClick={() => navigateTo('/start-a-project')}
+                  onClick={() => navigate('/start-a-project')}
                >
                  <Phone className="w-5 h-5 mr-2" />
                  Schedule Free Call