fix navigation link open in new tab header and footer

components/Footer.tsx

@@ -15,6 +15,7 @@ import BlackLogo14 from "../assets/BlackLogo14";
 import { navigateTo } from "../App";
 import { useState } from "react";
 import GlobalOffices from "./GlobalOffices";
+import { Link } from "react-router-dom";
 
 const footerNavigation = {
   Explore: [
@@ -205,16 +206,12 @@ const FooterSection = ({
     <ul className="space-y-3">
       {links.map((link) => (
         <li key={link.label}>
-          <a
+          <Link
-            href="#"
+            to={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>
+          </Link>
         </li>
       ))}
     </ul>

components/Navigation.tsx

@@ -650,7 +650,7 @@ const MegaMenu = ({
                 {service.sub_services.map((subService) => (
                   <li key={subService.name}>
                     <a
-                      href="#"
+                      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"
                       onClick={(e) => {
                         e.preventDefault();
@@ -694,7 +694,7 @@ const MegaMenu = ({
                 {category.sub_services.map((service) => (
                   <li key={service.name}>
                     <a
-                      href="#"
+                      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"
                       onClick={(e) => {
                         e.preventDefault();
@@ -724,7 +724,7 @@ const MegaMenu = ({
           return (
             <a
               key={solution.text}
-              href="#"
+              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"
               onClick={(e) => {
                 e.preventDefault();
@@ -764,7 +764,7 @@ const MegaMenu = ({
                 {industry.items.map((item) => (
                   <li key={item.name}>
                     <a
-                      href="#"
+                      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"
                       onClick={(e) => {
                         e.preventDefault();
@@ -794,7 +794,7 @@ const MegaMenu = ({
           return (
             <a
               key={item.text}
-              href="#"
+              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"
               onClick={(e) => {
                 e.preventDefault();
@@ -1010,6 +1010,7 @@ export const Navigation = () => {
           </div>
 
           <div className="hidden lg:flex items-center space-x-6 xl:space-x-8">
+
             {navigationData.main_navigation.map((item) => (
               <div
                 key={item}
@@ -1018,7 +1019,7 @@ export const Navigation = () => {
                 onMouseLeave={handleNavItemMouseLeave}
               >
                 <a
-                  href={`#${item.toLowerCase().replace(/\s+/g, "-")}`}
+                  href={getMainCategoryRoute(item) || '#'} // Use actual route instead of #
                   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();
@@ -1031,9 +1032,8 @@ export const Navigation = () => {
                   {item}
                   {hasDropdown(item) && (
                     <ChevronDown
-                      className={`w-4 h-4 transition-transform duration-200 ${
+                      className={`w-4 h-4 transition-transform duration-200 ${activeMenu === item ? "rotate-180" : ""
-                        activeMenu === item ? "rotate-180" : ""
+                        }`}
-                      }`}
                     />
                   )}
                 </a>
@@ -1091,7 +1091,7 @@ export const Navigation = () => {
                 {navigationData.main_navigation.map((item) => (
                   <a
                     key={item}
-                    href="#"
+                    href={getMainCategoryRoute(item) || '#'}
                     className="block text-[#CCCCCC] hover:text-white transition-colors py-2 font-medium"
                     onClick={(e) => {
                       e.preventDefault();

pages/RanOutOfProject.tsx

@@ -61,7 +61,7 @@ const getTechIcon = (tech: string) => {
 };
 
 const projectDetails = {
-  title: "RanOutOf – Smart Grocery List & Inventory Management App",
+  title: "RanOutOf – Simplify Grocery Planning with AI-Powered Lists",
   subtitle: "A voice-enabled, reminder-rich, and collaborative grocery management app designed to simplify household planning and eliminate stockouts",
   technologies: ["React Native", "Laravel", "Node.js", "MySQL", "Firebase"],
   industries: ["Consumer Tech", "Retail Technology", "Productivity"],