{"version":3,"file":"main.6b74b1fedec9915405b7.js","mappings":"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","sources":["webpack://secureai-guard-webpage/./src/theme/index.js","webpack://secureai-guard-webpage/./src/contexts/HeaderContext.js","webpack://secureai-guard-webpage/./src/contexts/FooterContext.js","webpack://secureai-guard-webpage/./src/utils/environment.js","webpack://secureai-guard-webpage/./src/config/index.js","webpack://secureai-guard-webpage/./src/services/authService.js","webpack://secureai-guard-webpage/./src/store/slices/authSlice.js","webpack://secureai-guard-webpage/./src/store/slices/uiSlice.js","webpack://secureai-guard-webpage/./src/services/securityService.js","webpack://secureai-guard-webpage/./src/store/slices/securitySlice.js","webpack://secureai-guard-webpage/./src/store/slices/notificationSlice.js","webpack://secureai-guard-webpage/./src/store/slices/themeSlice.js","webpack://secureai-guard-webpage/./src/store/index.js","webpack://secureai-guard-webpage/./src/components/Header/styles.js","webpack://secureai-guard-webpage/./src/components/Header/Logo.js","webpack://secureai-guard-webpage/./src/components/Header/navigationData.js","webpack://secureai-guard-webpage/./src/components/Header/NavigationMenu.js","webpack://secureai-guard-webpage/./src/components/Header/ActionsMenu.js","webpack://secureai-guard-webpage/./src/components/Header/MobileMenu.js","webpack://secureai-guard-webpage/./src/components/Header/SearchModal.js","webpack://secureai-guard-webpage/./src/components/Header/index.js","webpack://secureai-guard-webpage/./src/hooks/useHeader.js","webpack://secureai-guard-webpage/./src/hooks/useHeaderVisibility.js","webpack://secureai-guard-webpage/./src/components/Header/KeyboardNavigation.js","webpack://secureai-guard-webpage/./src/components/Footer/FooterNewsletter.js","webpack://secureai-guard-webpage/./src/components/Footer/FooterSocialLinks.js","webpack://secureai-guard-webpage/./src/components/Footer/FooterNavLinks.js","webpack://secureai-guard-webpage/./src/components/Footer/styles.js","webpack://secureai-guard-webpage/./src/components/Footer/footerData.js","webpack://secureai-guard-webpage/./src/components/Footer/index.js","webpack://secureai-guard-webpage/./src/components/LoadingScreen.js","webpack://secureai-guard-webpage/./src/routes/ProtectedRoute.js","webpack://secureai-guard-webpage/./src/routes/routeConfig.js","webpack://secureai-guard-webpage/./src/routes/index.js","webpack://secureai-guard-webpage/./src/App.js","webpack://secureai-guard-webpage/./src/routes/ScrollToTop.js","webpack://secureai-guard-webpage/./src/index.js"],"sourcesContent":["// src/theme/theme.js\r\nimport { createTheme } from '@mui/material/styles';\r\nimport { alpha } from '@mui/material/styles';\r\n\r\nconst theme = createTheme({\r\n  palette: {\r\n    primary: {\r\n      main: '#4747FF',\r\n      light: '#6B6BFF',\r\n      dark: '#3333CC',\r\n      contrastText: '#FFFFFF',\r\n    },\r\n    secondary: {\r\n      main: '#FDB347',\r\n      light: '#FFCC80',\r\n      dark: '#FB8C00',\r\n      contrastText: '#000000',\r\n    },\r\n    background: {\r\n      default: '#F8F9FA',\r\n      paper: '#FFFFFF',\r\n    },\r\n    text: {\r\n      primary: '#1A1A1A',\r\n      secondary: '#666666',\r\n    },\r\n  },\r\n  typography: {\r\n    fontFamily: 'Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif',\r\n    h1: {\r\n      fontSize: '3.5rem',\r\n      fontWeight: 700,\r\n      lineHeight: 1.2,\r\n    },\r\n    h2: {\r\n      fontSize: '2.75rem',\r\n      fontWeight: 700,\r\n      lineHeight: 1.2,\r\n    },\r\n    h3: {\r\n      fontSize: '2.25rem',\r\n      fontWeight: 600,\r\n      lineHeight: 1.2,\r\n    },\r\n    h4: {\r\n      fontSize: '1.75rem',\r\n      fontWeight: 600,\r\n      lineHeight: 1.2,\r\n    },\r\n    h5: {\r\n      fontSize: '1.5rem',\r\n      fontWeight: 500,\r\n      lineHeight: 1.2,\r\n    },\r\n    h6: {\r\n      fontSize: '1.25rem',\r\n      fontWeight: 500,\r\n      lineHeight: 1.2,\r\n    },\r\n    subtitle1: {\r\n      fontSize: '1.125rem',\r\n      fontWeight: 500,\r\n      lineHeight: 1.5,\r\n    },\r\n    subtitle2: {\r\n      fontSize: '0.875rem',\r\n      fontWeight: 500,\r\n      lineHeight: 1.57,\r\n    },\r\n    body1: {\r\n      fontSize: '1rem',\r\n      lineHeight: 1.5,\r\n    },\r\n    body2: {\r\n      fontSize: '0.875rem',\r\n      lineHeight: 1.57,\r\n    },\r\n    button: {\r\n      textTransform: 'none',\r\n      fontWeight: 500,\r\n    },\r\n  },\r\n  shape: {\r\n    borderRadius: 8,\r\n  },\r\n  shadows: [\r\n    'none',\r\n    '0px 1px 2px rgba(0, 0, 0, 0.05)',\r\n    // ... other shadow levels\r\n    '0px 20px 25px rgba(0, 0, 0, 0.1), 0px 10px 10px rgba(0, 0, 0, 0.04)',\r\n  ],\r\n  components: {\r\n    MuiButton: {\r\n      styleOverrides: {\r\n        root: {\r\n          borderRadius: 8,\r\n          padding: '8px 16px',\r\n          transition: 'all 0.2s ease',\r\n        },\r\n        contained: {\r\n          boxShadow: 'none',\r\n          '&:hover': {\r\n            boxShadow: 'none',\r\n          },\r\n        },\r\n      },\r\n    },\r\n    MuiPaper: {\r\n      styleOverrides: {\r\n        root: {\r\n          borderRadius: 8,\r\n        },\r\n      },\r\n    },\r\n    MuiAppBar: {\r\n      styleOverrides: {\r\n        root: {\r\n          backgroundColor: 'transparent',\r\n          boxShadow: 'none',\r\n        },\r\n      },\r\n    },\r\n    MuiDrawer: {\r\n      styleOverrides: {\r\n        paper: {\r\n          borderRadius: 0,\r\n        },\r\n      },\r\n    },\r\n  },\r\n});\r\n\r\nexport default theme;\r\n\r\n\r\n\r\n// // src/theme/theme.js\r\n// import { createTheme } from '@mui/material/styles';\r\n//\r\n// export const theme = createTheme({\r\n//   palette: {\r\n//     primary: {\r\n//       main: '#4747FF',\r\n//     },\r\n//     secondary: {\r\n//       main: '#FDB347',\r\n//     },\r\n//     text: {\r\n//       primary: '#1A1A1A',\r\n//     },\r\n//   },\r\n//   typography: {\r\n//     fontFamily: 'Inter, -apple-system, BlinkMacSystemFont, sans-serif',\r\n//     button: {\r\n//       textTransform: 'none',\r\n//     },\r\n//   },\r\n//   components: {\r\n//     MuiButton: {\r\n//       styleOverrides: {\r\n//         root: {\r\n//           borderRadius: '6px',\r\n//         },\r\n//       },\r\n//     },\r\n//   },\r\n// });\r\n//\r\n// export default theme;","// // src/contexts/HeaderContext.js\r\n// import React, { createContext, useContext, useState, useCallback, useEffect } from 'react';\r\n// import { useLocation } from 'react-router-dom';\r\n//\r\n// const HeaderContext = createContext(undefined);\r\n//\r\n// export function HeaderProvider({ children }) {\r\n//   const [searchOpen, setSearchOpen] = useState(false);\r\n//   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);\r\n//   const [activeMenu, setActiveMenu] = useState(null);\r\n//   const [isScrolled, setIsScrolled] = useState(false);\r\n//   const [isVisible, setIsVisible] = useState(true);\r\n//   const location = useLocation();\r\n//\r\n//   const closeAllMenus = useCallback(() => {\r\n//     setSearchOpen(false);\r\n//     setMobileMenuOpen(false);\r\n//     setActiveMenu(null);\r\n//   }, []);\r\n//\r\n//   useEffect(() => {\r\n//     closeAllMenus();\r\n//   }, [location, closeAllMenus]);\r\n//\r\n//   const handleScroll = useCallback(() => {\r\n//     const currentScrollY = window.scrollY;\r\n//     if (currentScrollY > 64) { // Adjust the threshold as needed\r\n//       setIsScrolled(true);\r\n//       setIsVisible(false);\r\n//     } else {\r\n//       setIsScrolled(false);\r\n//       setIsVisible(true);\r\n//     }\r\n//   }, []);\r\n//\r\n//   useEffect(() => {\r\n//     window.addEventListener('scroll', handleScroll, { passive: true });\r\n//     return () => window.removeEventListener('scroll', handleScroll);\r\n//   }, [handleScroll]);\r\n//\r\n//   const toggleSearch = useCallback(() => {\r\n//     setSearchOpen((prev) => !prev);\r\n//     setMobileMenuOpen(false);\r\n//     setActiveMenu(null);\r\n//   }, []);\r\n//\r\n//   const toggleMobileMenu = useCallback(() => {\r\n//     setMobileMenuOpen((prev) => !prev);\r\n//     setSearchOpen(false);\r\n//     setActiveMenu(null);\r\n//   }, []);\r\n//\r\n//   const value = {\r\n//     searchOpen,\r\n//     setSearchOpen,\r\n//     mobileMenuOpen,\r\n//     setMobileMenuOpen,\r\n//     activeMenu,\r\n//     setActiveMenu,\r\n//     isScrolled,\r\n//     toggleSearch,\r\n//     toggleMobileMenu,\r\n//     closeAllMenus,\r\n//     isVisible,\r\n//   };\r\n//\r\n//   return (\r\n//     <HeaderContext.Provider value={value}>\r\n//       {children}\r\n//     </HeaderContext.Provider>\r\n//   );\r\n// }\r\n//\r\n// export function useHeaderContext() {\r\n//   const context = useContext(HeaderContext);\r\n//   if (context === undefined) {\r\n//     throw new Error('useHeaderContext must be used within a HeaderProvider');\r\n//   }\r\n//   return context;\r\n// }\r\n\r\n\r\n// src/contexts/HeaderContext.js\r\nimport React, { createContext, useContext, useState, useCallback, useEffect } from 'react';\r\nimport { useLocation } from 'react-router-dom'; // Correct usage within Router\r\n\r\nconst HeaderContext = createContext(undefined);\r\n\r\nexport function HeaderProvider({ children }) {\r\n  const [searchOpen, setSearchOpen] = useState(false);\r\n  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);\r\n  const [activeMenu, setActiveMenu] = useState(null);\r\n  const [isScrolled, setIsScrolled] = useState(false);\r\n  const location = useLocation(); // Properly located within Router\r\n\r\n  // Close menus on route change\r\n  const closeAllMenus = useCallback(() => {\r\n    setSearchOpen(false);\r\n    setMobileMenuOpen(false);\r\n    setActiveMenu(null);\r\n  }, []);\r\n\r\n  useEffect(() => {\r\n    closeAllMenus();\r\n  }, [location, closeAllMenus]);\r\n\r\n  // Handle scroll\r\n  const handleScroll = useCallback(() => {\r\n    setIsScrolled(window.scrollY > 20);\r\n  }, []);\r\n\r\n  useEffect(() => {\r\n    window.addEventListener('scroll', handleScroll, { passive: true });\r\n    return () => window.removeEventListener('scroll', handleScroll);\r\n  }, [handleScroll]);\r\n\r\n  const toggleSearch = useCallback(() => {\r\n    setSearchOpen((prev) => !prev);\r\n    setMobileMenuOpen(false);\r\n    setActiveMenu(null);\r\n  }, []);\r\n\r\n  const toggleMobileMenu = useCallback(() => {\r\n    setMobileMenuOpen((prev) => !prev);\r\n    setSearchOpen(false);\r\n    setActiveMenu(null);\r\n  }, []);\r\n\r\n  const value = {\r\n    searchOpen,\r\n    setSearchOpen,\r\n    mobileMenuOpen,\r\n    setMobileMenuOpen,\r\n    activeMenu,\r\n    setActiveMenu,\r\n    isScrolled,\r\n    toggleSearch,\r\n    toggleMobileMenu,\r\n    closeAllMenus,\r\n  };\r\n\r\n  return (\r\n    <HeaderContext.Provider value={value}>\r\n      {children}\r\n    </HeaderContext.Provider>\r\n  );\r\n}\r\n\r\nexport function useHeaderContext() {\r\n  const context = useContext(HeaderContext);\r\n  if (context === undefined) {\r\n    throw new Error('useHeaderContext must be used within a HeaderProvider');\r\n  }\r\n  return context;\r\n}\r\n\r\n\r\n// // src/contexts/HeaderContext.js\r\n// import React, { createContext, useContext, useState, useCallback, useEffect } from 'react';\r\n// import { useLocation } from 'react-router-dom'; // Correct usage within Router\r\n//\r\n// const HeaderContext = createContext(undefined);\r\n//\r\n// export function HeaderProvider({ children }) {\r\n//   const [searchOpen, setSearchOpen] = useState(false);\r\n//   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);\r\n//   const [activeMenu, setActiveMenu] = useState(null);\r\n//   const [isScrolled, setIsScrolled] = useState(false);\r\n//   const location = useLocation(); // Properly located within Router\r\n//\r\n//   // Close menus on route change\r\n//   useEffect(() => {\r\n//     closeAllMenus();\r\n//   }, [location]);\r\n//\r\n//   // Handle scroll\r\n//   useEffect(() => {\r\n//     const handleScroll = () => {\r\n//       setIsScrolled(window.scrollY > 20);\r\n//     };\r\n//\r\n//     window.addEventListener('scroll', handleScroll, { passive: true });\r\n//     return () => window.removeEventListener('scroll', handleScroll);\r\n//   }, []);\r\n//\r\n//   const toggleSearch = useCallback(() => {\r\n//     setSearchOpen((prev) => !prev);\r\n//     setMobileMenuOpen(false);\r\n//     setActiveMenu(null);\r\n//   }, []);\r\n//\r\n//   const toggleMobileMenu = useCallback(() => {\r\n//     setMobileMenuOpen((prev) => !prev);\r\n//     setSearchOpen(false);\r\n//     setActiveMenu(null);\r\n//   }, []);\r\n//\r\n//   const closeAllMenus = useCallback(() => {\r\n//     setSearchOpen(false);\r\n//     setMobileMenuOpen(false);\r\n//     setActiveMenu(null);\r\n//   }, []);\r\n//\r\n//   const value = {\r\n//     searchOpen,\r\n//     setSearchOpen,\r\n//     mobileMenuOpen,\r\n//     setMobileMenuOpen,\r\n//     activeMenu,\r\n//     setActiveMenu,\r\n//     isScrolled,\r\n//     toggleSearch,\r\n//     toggleMobileMenu,\r\n//     closeAllMenus,\r\n//   };\r\n//\r\n//   return (\r\n//     <HeaderContext.Provider value={value}>\r\n//       {children}\r\n//     </HeaderContext.Provider>\r\n//   );\r\n// }\r\n//\r\n// export function useHeaderContext() {\r\n//   const context = useContext(HeaderContext);\r\n//   if (context === undefined) {\r\n//     throw new Error('useHeaderContext must be used within a HeaderProvider');\r\n//   }\r\n//   return context;\r\n// }\r\n\r\n\r\n\r\n// // src/contexts/HeaderContext.js\r\n// import React, { createContext, useContext, useState, useCallback, useEffect } from 'react';\r\n// import { useLocation } from 'react-router-dom';\r\n//\r\n// const HeaderContext = createContext(undefined);\r\n//\r\n// export function HeaderProvider({ children }) {\r\n//   const [searchOpen, setSearchOpen] = useState(false);\r\n//   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);\r\n//   const [activeMenu, setActiveMenu] = useState(null);\r\n//   const [isScrolled, setIsScrolled] = useState(false);\r\n//   const location = useLocation(); // Correct usage within Router\r\n//\r\n//   // Close menus on route change\r\n//   useEffect(() => {\r\n//     closeAllMenus();\r\n//   }, [location]);\r\n//\r\n//   // Handle scroll\r\n//   useEffect(() => {\r\n//     const handleScroll = () => {\r\n//       setIsScrolled(window.scrollY > 20);\r\n//     };\r\n//\r\n//     window.addEventListener('scroll', handleScroll, { passive: true });\r\n//     return () => window.removeEventListener('scroll', handleScroll);\r\n//   }, []);\r\n//\r\n//   const toggleSearch = useCallback(() => {\r\n//     setSearchOpen(prev => !prev);\r\n//     setMobileMenuOpen(false);\r\n//     setActiveMenu(null);\r\n//   }, []);\r\n//\r\n//   const toggleMobileMenu = useCallback(() => {\r\n//     setMobileMenuOpen(prev => !prev);\r\n//     setSearchOpen(false);\r\n//     setActiveMenu(null);\r\n//   }, []);\r\n//\r\n//   const closeAllMenus = useCallback(() => {\r\n//     setSearchOpen(false);\r\n//     setMobileMenuOpen(false);\r\n//     setActiveMenu(null);\r\n//   }, []);\r\n//\r\n//   const value = {\r\n//     searchOpen,\r\n//     setSearchOpen,\r\n//     mobileMenuOpen,\r\n//     setMobileMenuOpen,\r\n//     activeMenu,\r\n//     setActiveMenu,\r\n//     isScrolled,\r\n//     toggleSearch,\r\n//     toggleMobileMenu,\r\n//     closeAllMenus,\r\n//   };\r\n//\r\n//   return (\r\n//     <HeaderContext.Provider value={value}>\r\n//       {children}\r\n//     </HeaderContext.Provider>\r\n//   );\r\n// }\r\n//\r\n// export function useHeaderContext() {\r\n//   const context = useContext(HeaderContext);\r\n//   if (context === undefined) {\r\n//     throw new Error('useHeaderContext must be used within a HeaderProvider');\r\n//   }\r\n//   return context;\r\n// }\r\n\r\n\r\n\r\n// // src/contexts/HeaderContext.js\r\n// import React, { createContext, useContext, useState, useCallback, useEffect } from 'react';\r\n// import { useLocation } from 'react-router-dom';\r\n//\r\n// const HeaderContext = createContext(undefined);\r\n//\r\n// export function HeaderProvider({ children }) {\r\n//   const [searchOpen, setSearchOpen] = useState(false);\r\n//   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);\r\n//   const [activeMenu, setActiveMenu] = useState(null);\r\n//   const [isScrolled, setIsScrolled] = useState(false);\r\n//   const location = useLocation();\r\n//\r\n//   // Close menus on route change\r\n//   useEffect(() => {\r\n//     closeAllMenus();\r\n//   }, [location]);\r\n//\r\n//   // Handle scroll\r\n//   useEffect(() => {\r\n//     const handleScroll = () => {\r\n//       setIsScrolled(window.scrollY > 20);\r\n//     };\r\n//\r\n//     window.addEventListener('scroll', handleScroll, { passive: true });\r\n//     return () => window.removeEventListener('scroll', handleScroll);\r\n//   }, []);\r\n//\r\n//   const toggleSearch = useCallback(() => {\r\n//     setSearchOpen(prev => !prev);\r\n//     setMobileMenuOpen(false);\r\n//     setActiveMenu(null);\r\n//   }, []);\r\n//\r\n//   const toggleMobileMenu = useCallback(() => {\r\n//     setMobileMenuOpen(prev => !prev);\r\n//     setSearchOpen(false);\r\n//     setActiveMenu(null);\r\n//   }, []);\r\n//\r\n//   const closeAllMenus = useCallback(() => {\r\n//     setSearchOpen(false);\r\n//     setMobileMenuOpen(false);\r\n//     setActiveMenu(null);\r\n//   }, []);\r\n//\r\n//   const value = {\r\n//     searchOpen,\r\n//     setSearchOpen,\r\n//     mobileMenuOpen,\r\n//     setMobileMenuOpen,\r\n//     activeMenu,\r\n//     setActiveMenu,\r\n//     isScrolled,\r\n//     toggleSearch,\r\n//     toggleMobileMenu,\r\n//     closeAllMenus,\r\n//   };\r\n//\r\n//   return (\r\n//     <HeaderContext.Provider value={value}>\r\n//       {children}\r\n//     </HeaderContext.Provider>\r\n//   );\r\n// }\r\n//\r\n// export function useHeaderContext() {\r\n//   const context = useContext(HeaderContext);\r\n//   if (context === undefined) {\r\n//     throw new Error('useHeaderContext must be used within a HeaderProvider');\r\n//   }\r\n//   return context;\r\n// }\r\n\r\n\r\n// // src/context/HeaderContext.js\r\n// import React, { createContext, useContext, useState, useCallback, useEffect } from 'react';\r\n// import { useLocation } from 'react-router-dom'; // Ensure this import is present\r\n//\r\n// const HeaderContext = createContext(undefined);\r\n//\r\n// export function HeaderProvider({ children }) {\r\n//   const [searchOpen, setSearchOpen] = useState(false);\r\n//   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);\r\n//   const [activeMenu, setActiveMenu] = useState(null);\r\n//   const [isScrolled, setIsScrolled] = useState(false);\r\n//   const location = useLocation(); // Ensure useLocation is used within Router\r\n//\r\n//   // Close menus on route change\r\n//   useEffect(() => {\r\n//     closeAllMenus();\r\n//   }, [location]);\r\n//\r\n//   // Handle scroll\r\n//   useEffect(() => {\r\n//     const handleScroll = () => {\r\n//       setIsScrolled(window.scrollY > 20);\r\n//     };\r\n//\r\n//     window.addEventListener('scroll', handleScroll, { passive: true });\r\n//     return () => window.removeEventListener('scroll', handleScroll);\r\n//   }, []);\r\n//\r\n//   const toggleSearch = useCallback(() => {\r\n//     setSearchOpen(prev => !prev);\r\n//     setMobileMenuOpen(false);\r\n//     setActiveMenu(null);\r\n//   }, []);\r\n//\r\n//   const toggleMobileMenu = useCallback(() => {\r\n//     setMobileMenuOpen(prev => !prev);\r\n//     setSearchOpen(false);\r\n//     setActiveMenu(null);\r\n//   }, []);\r\n//\r\n//   const closeAllMenus = useCallback(() => {\r\n//     setSearchOpen(false);\r\n//     setMobileMenuOpen(false);\r\n//     setActiveMenu(null);\r\n//   }, []);\r\n//\r\n//   const value = {\r\n//     searchOpen,\r\n//     setSearchOpen,\r\n//     mobileMenuOpen,\r\n//     setMobileMenuOpen,\r\n//     activeMenu,\r\n//     setActiveMenu,\r\n//     isScrolled,\r\n//     toggleSearch,\r\n//     toggleMobileMenu,\r\n//     closeAllMenus,\r\n//   };\r\n//\r\n//   return (\r\n//     <HeaderContext.Provider value={value}>\r\n//       {children}\r\n//     </HeaderContext.Provider>\r\n//   );\r\n// }\r\n//\r\n// export function useHeaderContext() {\r\n//   const context = useContext(HeaderContext);\r\n//   if (context === undefined) {\r\n//     throw new Error('useHeaderContext must be used within a HeaderProvider');\r\n//   }\r\n//   return context;\r\n// }\r\n\r\n\r\n// // src/context/HeaderContext.js\r\n// import React, { createContext, useContext, useState, useCallback, useEffect } from 'react';\r\n// import { useLocation } from 'react-router-dom';\r\n//\r\n// const HeaderContext = createContext(undefined);\r\n//\r\n// export function HeaderProvider({ children }) {\r\n//   const [searchOpen, setSearchOpen] = useState(false);\r\n//   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);\r\n//   const [activeMenu, setActiveMenu] = useState(null);\r\n//   const [isScrolled, setIsScrolled] = useState(false);\r\n//   // const location = useLocation(); // Ensure HeaderProvider is within a Router\r\n//\r\n//   // Close menus on route change\r\n//   useEffect(() => {\r\n//     closeAllMenus();\r\n//   }, [location]);\r\n//\r\n//   // Handle scroll\r\n//   useEffect(() => {\r\n//     const handleScroll = () => {\r\n//       setIsScrolled(window.scrollY > 20);\r\n//     };\r\n//\r\n//     window.addEventListener('scroll', handleScroll, { passive: true });\r\n//     return () => window.removeEventListener('scroll', handleScroll);\r\n//   }, []);\r\n//\r\n//   const toggleSearch = useCallback(() => {\r\n//     setSearchOpen((prev) => !prev);\r\n//     setMobileMenuOpen(false);\r\n//     setActiveMenu(null);\r\n//   }, []);\r\n//\r\n//   const toggleMobileMenu = useCallback(() => {\r\n//     setMobileMenuOpen((prev) => !prev);\r\n//     setSearchOpen(false);\r\n//     setActiveMenu(null);\r\n//   }, []);\r\n//\r\n//   const closeAllMenus = useCallback(() => {\r\n//     setSearchOpen(false);\r\n//     setMobileMenuOpen(false);\r\n//     setActiveMenu(null);\r\n//   }, []);\r\n//\r\n//   const value = {\r\n//     searchOpen,\r\n//     setSearchOpen,\r\n//     mobileMenuOpen,\r\n//     setMobileMenuOpen,\r\n//     activeMenu,\r\n//     setActiveMenu,\r\n//     isScrolled,\r\n//     toggleSearch,\r\n//     toggleMobileMenu,\r\n//     closeAllMenus,\r\n//   };\r\n//\r\n//   return <HeaderContext.Provider value={value}>{children}</HeaderContext.Provider>;\r\n// }\r\n//\r\n// export function useHeaderContext() {\r\n//   const context = useContext(HeaderContext);\r\n//   if (context === undefined) {\r\n//     throw new Error('useHeaderContext must be used within a HeaderProvider');\r\n//   }\r\n//   return context;\r\n// }\r\n\r\n\r\n// // src/context/HeaderContext.js\r\n// import React, { createContext, useContext, useState, useCallback, useEffect } from 'react';\r\n// import { useLocation } from 'react-router-dom';\r\n//\r\n// const HeaderContext = createContext(undefined);\r\n//\r\n// export function HeaderProvider({ children }) {\r\n//   const [searchOpen, setSearchOpen] = useState(false);\r\n//   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);\r\n//   const [activeMenu, setActiveMenu] = useState(null);\r\n//   const [isScrolled, setIsScrolled] = useState(false);\r\n//   const location = useLocation(); // Uncommented to track route changes\r\n//\r\n//   // Close menus on route change\r\n//   useEffect(() => {\r\n//     closeAllMenus();\r\n//   }, [location]); // Now correctly listens to location changes\r\n//\r\n//   // Handle scroll\r\n//   useEffect(() => {\r\n//     const handleScroll = () => {\r\n//       setIsScrolled(window.scrollY > 20);\r\n//     };\r\n//\r\n//     window.addEventListener('scroll', handleScroll, { passive: true });\r\n//     return () => window.removeEventListener('scroll', handleScroll);\r\n//   }, []);\r\n//\r\n//   const toggleSearch = useCallback(() => {\r\n//     setSearchOpen(prev => !prev);\r\n//     setMobileMenuOpen(false);\r\n//     setActiveMenu(null);\r\n//   }, []);\r\n//\r\n//   const toggleMobileMenu = useCallback(() => {\r\n//     setMobileMenuOpen(prev => !prev);\r\n//     setSearchOpen(false);\r\n//     setActiveMenu(null);\r\n//   }, []);\r\n//\r\n//   const closeAllMenus = useCallback(() => {\r\n//     setSearchOpen(false);\r\n//     setMobileMenuOpen(false);\r\n//     setActiveMenu(null);\r\n//   }, []);\r\n//\r\n//   const value = {\r\n//     searchOpen,\r\n//     setSearchOpen,\r\n//     mobileMenuOpen,\r\n//     setMobileMenuOpen,\r\n//     activeMenu,\r\n//     setActiveMenu,\r\n//     isScrolled,\r\n//     toggleSearch,\r\n//     toggleMobileMenu,\r\n//     closeAllMenus,\r\n//   };\r\n//\r\n//   return (\r\n//     <HeaderContext.Provider value={value}>\r\n//       {children}\r\n//     </HeaderContext.Provider>\r\n//   );\r\n// }\r\n//\r\n// export function useHeaderContext() {\r\n//   const context = useContext(HeaderContext);\r\n//   if (context === undefined) {\r\n//     throw new Error('useHeaderContext must be used within a HeaderProvider');\r\n//   }\r\n//   return context;\r\n// }\r\n\r\n\r\n// // src/context/HeaderContext.js\r\n// import React, { createContext, useContext, useState, useCallback, useEffect } from 'react';\r\n// import { useLocation } from 'react-router-dom';\r\n//\r\n// const HeaderContext = createContext(undefined);\r\n//\r\n// export function HeaderProvider({ children }) {\r\n//   const [searchOpen, setSearchOpen] = useState(false);\r\n//   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);\r\n//   const [activeMenu, setActiveMenu] = useState(null);\r\n//   const [isScrolled, setIsScrolled] = useState(false);\r\n//   // const location = useLocation();\r\n//\r\n//   // Close menus on route change\r\n//   useEffect(() => {\r\n//     closeAllMenus();\r\n//   }, [location]);\r\n//\r\n//   // Handle scroll\r\n//   useEffect(() => {\r\n//     const handleScroll = () => {\r\n//       setIsScrolled(window.scrollY > 20);\r\n//     };\r\n//\r\n//     window.addEventListener('scroll', handleScroll, { passive: true });\r\n//     return () => window.removeEventListener('scroll', handleScroll);\r\n//   }, []);\r\n//\r\n//   const toggleSearch = useCallback(() => {\r\n//     setSearchOpen(prev => !prev);\r\n//     setMobileMenuOpen(false);\r\n//     setActiveMenu(null);\r\n//   }, []);\r\n//\r\n//   const toggleMobileMenu = useCallback(() => {\r\n//     setMobileMenuOpen(prev => !prev);\r\n//     setSearchOpen(false);\r\n//     setActiveMenu(null);\r\n//   }, []);\r\n//\r\n//   const closeAllMenus = useCallback(() => {\r\n//     setSearchOpen(false);\r\n//     setMobileMenuOpen(false);\r\n//     setActiveMenu(null);\r\n//   }, []);\r\n//\r\n//   const value = {\r\n//     searchOpen,\r\n//     setSearchOpen,\r\n//     mobileMenuOpen,\r\n//     setMobileMenuOpen,\r\n//     activeMenu,\r\n//     setActiveMenu,\r\n//     isScrolled,\r\n//     toggleSearch,\r\n//     toggleMobileMenu,\r\n//     closeAllMenus,\r\n//   };\r\n//\r\n//   return (\r\n//     <HeaderContext.Provider value={value}>\r\n//       {children}\r\n//     </HeaderContext.Provider>\r\n//   );\r\n// }\r\n//\r\n// export function useHeaderContext() {\r\n//   const context = useContext(HeaderContext);\r\n//   if (context === undefined) {\r\n//     throw new Error('useHeaderContext must be used within a HeaderProvider');\r\n//   }\r\n//   return context;\r\n// }\r\n","// src/context/FooterContext.js\r\nimport React, { createContext, useContext, useState } from 'react';\r\n\r\nconst FooterContext = createContext(undefined);\r\n\r\nexport function FooterProvider({ children }) {\r\n  const [newsletterEmail, setNewsletterEmail] = useState('');\r\n  const [isSubscribing, setIsSubscribing] = useState(false);\r\n  const [subscriptionStatus, setSubscriptionStatus] = useState(null);\r\n\r\n  const handleNewsletterSubmit = async (email) => {\r\n    setIsSubscribing(true);\r\n    try {\r\n      // Add your newsletter subscription API call here\r\n      await new Promise(resolve => setTimeout(resolve, 1000)); // Simulate API call\r\n      setSubscriptionStatus('success');\r\n      setNewsletterEmail('');\r\n    } catch (error) {\r\n      setSubscriptionStatus('error');\r\n    } finally {\r\n      setIsSubscribing(false);\r\n    }\r\n  };\r\n\r\n  const value = {\r\n    newsletterEmail,\r\n    setNewsletterEmail,\r\n    isSubscribing,\r\n    subscriptionStatus,\r\n    setSubscriptionStatus,\r\n    handleNewsletterSubmit,\r\n  };\r\n\r\n  return (\r\n    <FooterContext.Provider value={value}>\r\n      {children}\r\n    </FooterContext.Provider>\r\n  );\r\n}\r\n\r\nexport function useFooterContext() {\r\n  const context = useContext(FooterContext);\r\n  if (context === undefined) {\r\n    throw new Error('useFooterContext must be used within a FooterProvider');\r\n  }\r\n  return context;\r\n}","// src/utils/environment.js\r\nexport const getEnvironmentVariable = (key) => {\r\n  const value = process.env[`REACT_APP_${key}`]; // Correct use of template literals\r\n  if (!value) {\r\n    console.warn(`Environment variable REACT_APP_${key} is not defined`); // Correct use of template literals\r\n    return null;\r\n  }\r\n  return value;\r\n};\r\n","// src/config/index.js\r\nimport { getEnvironmentVariable } from '../utils/environment';\r\n\r\nconst config = {\r\n  API_URL: getEnvironmentVariable('API_URL') || 'http://localhost:3001/api',\r\n  ENV: process.env.NODE_ENV || 'development',\r\n  // Add other configuration values here\r\n};\r\n\r\n// Validate required configuration\r\nconst requiredConfig = ['API_URL'];\r\n\r\nrequiredConfig.forEach(key => {\r\n  if (!config[key]) {\r\n    console.error(`Missing required config value: \\${key}`);\r\n  }\r\n});\r\n\r\nexport default config;","// src/services/authService.js\r\nimport axios from 'axios';\r\nimport config from '../config';\r\n\r\nclass AuthService {\r\n  constructor() {\r\n    this.api = axios.create({\r\n      baseURL: `\\${config.API_URL}/auth`,\r\n      headers: {\r\n        'Content-Type': 'application/json',\r\n      },\r\n    });\r\n  }\r\n\r\n  async login(email, password) {\r\n    try {\r\n      const response = await this.api.post('/login', {\r\n        email,\r\n        password,\r\n      });\r\n      if (response.data.token) {\r\n        localStorage.setItem('token', response.data.token);\r\n        this.setAuthHeader(response.data.token);\r\n      }\r\n      return response.data;\r\n    } catch (error) {\r\n      throw this.handleError(error);\r\n    }\r\n  }\r\n\r\n  async register(userData) {\r\n    try {\r\n      const response = await this.api.post('/register', userData);\r\n      if (response.data.token) {\r\n        localStorage.setItem('token', response.data.token);\r\n        this.setAuthHeader(response.data.token);\r\n      }\r\n      return response.data;\r\n    } catch (error) {\r\n      throw this.handleError(error);\r\n    }\r\n  }\r\n\r\n  async logout() {\r\n    try {\r\n      await this.api.post('/logout');\r\n      localStorage.removeItem('token');\r\n      this.removeAuthHeader();\r\n    } catch (error) {\r\n      console.error('Logout error:', error);\r\n      // Still remove token on error\r\n      localStorage.removeItem('token');\r\n      this.removeAuthHeader();\r\n    }\r\n  }\r\n\r\n  async getCurrentUser() {\r\n    try {\r\n      const response = await this.api.get('/me');\r\n      return response.data;\r\n    } catch (error) {\r\n      throw this.handleError(error);\r\n    }\r\n  }\r\n\r\n  async refreshToken() {\r\n    try {\r\n      const response = await this.api.post('/refresh-token');\r\n      if (response.data.token) {\r\n        localStorage.setItem('token', response.data.token);\r\n        this.setAuthHeader(response.data.token);\r\n      }\r\n      return response.data;\r\n    } catch (error) {\r\n      throw this.handleError(error);\r\n    }\r\n  }\r\n\r\n  async resetPassword(email) {\r\n    try {\r\n      const response = await this.api.post('/reset-password', { email });\r\n      return response.data;\r\n    } catch (error) {\r\n      throw this.handleError(error);\r\n    }\r\n  }\r\n\r\n  setAuthHeader(token) {\r\n    this.api.defaults.headers.common['Authorization'] = `Bearer \\${token}`;\r\n  }\r\n\r\n  removeAuthHeader() {\r\n    delete this.api.defaults.headers.common['Authorization'];\r\n  }\r\n\r\n  handleError(error) {\r\n    if (error.response) {\r\n      // Auth specific error handling\r\n      if (error.response.status === 401) {\r\n        localStorage.removeItem('token');\r\n        this.removeAuthHeader();\r\n      }\r\n      return {\r\n        status: error.response.status,\r\n        message: error.response.data.message || 'Authentication failed',\r\n        data: error.response.data,\r\n      };\r\n    }\r\n    return {\r\n      status: 500,\r\n      message: 'Service unavailable',\r\n      data: null,\r\n    };\r\n  }\r\n}\r\n\r\nexport default new AuthService();","// src/store/slices/authSlice.js\r\nimport { createSlice, createAsyncThunk } from '@reduxjs/toolkit';\r\nimport authService from '../../services/authService';\r\n\r\n// Async thunks\r\nexport const login = createAsyncThunk(\r\n  'auth/login',\r\n  async ({ email, password }, { rejectWithValue }) => {\r\n    try {\r\n      const response = await authService.login(email, password);\r\n      localStorage.setItem('token', response.token);\r\n      return response;\r\n    } catch (error) {\r\n      return rejectWithValue(error.response?.data || 'Login failed');\r\n    }\r\n  }\r\n);\r\n\r\nexport const logout = createAsyncThunk(\r\n  'auth/logout',\r\n  async (_, { rejectWithValue }) => {\r\n    try {\r\n      await authService.logout();\r\n      localStorage.removeItem('token');\r\n      return null;\r\n    } catch (error) {\r\n      return rejectWithValue(error.response?.data || 'Logout failed');\r\n    }\r\n  }\r\n);\r\n\r\nconst initialState = {\r\n  user: null,\r\n  token: localStorage.getItem('token'),\r\n  isAuthenticated: false,\r\n  loading: false,\r\n  error: null,\r\n};\r\n\r\nconst authSlice = createSlice({\r\n  name: 'auth',\r\n  initialState,\r\n  reducers: {\r\n    clearError: (state) => {\r\n      state.error = null;\r\n    },\r\n    setUser: (state, action) => {\r\n      state.user = action.payload;\r\n      state.isAuthenticated = true;\r\n    },\r\n  },\r\n  extraReducers: (builder) => {\r\n    builder\r\n      // Login cases\r\n      .addCase(login.pending, (state) => {\r\n        state.loading = true;\r\n        state.error = null;\r\n      })\r\n      .addCase(login.fulfilled, (state, action) => {\r\n        state.loading = false;\r\n        state.isAuthenticated = true;\r\n        state.user = action.payload.user;\r\n        state.token = action.payload.token;\r\n      })\r\n      .addCase(login.rejected, (state, action) => {\r\n        state.loading = false;\r\n        state.error = action.payload;\r\n      })\r\n      // Logout cases\r\n      .addCase(logout.pending, (state) => {\r\n        state.loading = true;\r\n      })\r\n      .addCase(logout.fulfilled, (state) => {\r\n        state.loading = false;\r\n        state.isAuthenticated = false;\r\n        state.user = null;\r\n        state.token = null;\r\n      })\r\n      .addCase(logout.rejected, (state, action) => {\r\n        state.loading = false;\r\n        state.error = action.payload;\r\n      });\r\n  },\r\n});\r\n\r\nexport const { clearError, setUser } = authSlice.actions;\r\nexport default authSlice.reducer;","// src/store/slices/uiSlice.js\r\nimport { createSlice } from '@reduxjs/toolkit';\r\n\r\nconst initialState = {\r\n  sidebarOpen: false,\r\n  darkMode: localStorage.getItem('darkMode') === 'true',\r\n  mobileMenuOpen: false,\r\n  loading: false,\r\n  activeModal: null,\r\n  notifications: [],\r\n};\r\n\r\nconst uiSlice = createSlice({\r\n  name: 'ui',\r\n  initialState,\r\n  reducers: {\r\n    toggleSidebar: (state) => {\r\n      state.sidebarOpen = !state.sidebarOpen;\r\n    },\r\n    toggleDarkMode: (state) => {\r\n      state.darkMode = !state.darkMode;\r\n      localStorage.setItem('darkMode', state.darkMode);\r\n    },\r\n    toggleMobileMenu: (state) => {\r\n      state.mobileMenuOpen = !state.mobileMenuOpen;\r\n    },\r\n    setLoading: (state, action) => {\r\n      state.loading = action.payload;\r\n    },\r\n    setActiveModal: (state, action) => {\r\n      state.activeModal = action.payload;\r\n    },\r\n    addNotification: (state, action) => {\r\n      state.notifications.push(action.payload);\r\n    },\r\n    removeNotification: (state, action) => {\r\n      state.notifications = state.notifications.filter(\r\n        (notification) => notification.id !== action.payload\r\n      );\r\n    },\r\n  },\r\n});\r\n\r\nexport const {\r\n  toggleSidebar,\r\n  toggleDarkMode,\r\n  toggleMobileMenu,\r\n  setLoading,\r\n  setActiveModal,\r\n  addNotification,\r\n  removeNotification,\r\n} = uiSlice.actions;\r\n\r\nexport default uiSlice.reducer;","/// src/services/securityService.js\r\nimport axios from 'axios';\r\nimport config from '../config';\r\n\r\nclass SecurityService {\r\n  constructor() {\r\n    this.api = axios.create({\r\n      baseURL: `\\${config.API_URL}/security`,\r\n      headers: {\r\n        'Content-Type': 'application/json',\r\n      },\r\n    });\r\n\r\n    // Add token to requests\r\n    this.api.interceptors.request.use((config) => {\r\n      const token = localStorage.getItem('token');\r\n      if (token) {\r\n        config.headers.Authorization = `Bearer \\${token}`;\r\n      }\r\n      return config;\r\n    });\r\n  }\r\n\r\n  async analyzeContent(content) {\r\n    try {\r\n      const response = await this.api.post('/analyze', { content });\r\n      return response.data;\r\n    } catch (error) {\r\n      throw this.handleError(error);\r\n    }\r\n  }\r\n\r\n  async getThreatReport(timeframe = '24h') {\r\n    try {\r\n      const response = await this.api.get(`/threats/report?timeframe=\\${timeframe}`);\r\n      return response.data;\r\n    } catch (error) {\r\n      throw this.handleError(error);\r\n    }\r\n  }\r\n\r\n  async getSecurityMetrics() {\r\n    try {\r\n      const response = await this.api.get('/metrics');\r\n      return response.data;\r\n    } catch (error) {\r\n      throw this.handleError(error);\r\n    }\r\n  }\r\n\r\n  async updateSecuritySettings(settings) {\r\n    try {\r\n      const response = await this.api.put('/settings', settings);\r\n      return response.data;\r\n    } catch (error) {\r\n      throw this.handleError(error);\r\n    }\r\n  }\r\n\r\n  handleError(error) {\r\n    if (error.response) {\r\n      // Server responded with error\r\n      return {\r\n        status: error.response.status,\r\n        message: error.response.data.message || 'An error occurred',\r\n        data: error.response.data,\r\n      };\r\n    }\r\n    if (error.request) {\r\n      // Request made but no response\r\n      return {\r\n        status: 503,\r\n        message: 'Service unavailable',\r\n        data: null,\r\n      };\r\n    }\r\n    // Something else went wrong\r\n    return {\r\n      status: 500,\r\n      message: 'Internal error',\r\n      data: null,\r\n    };\r\n  }\r\n}\r\n\r\nexport default new SecurityService();","// src/store/slices/securitySlice.js\r\nimport { createSlice, createAsyncThunk } from '@reduxjs/toolkit';\r\nimport securityService from '../../services/securityService';\r\n\r\nexport const analyzeThreat = createAsyncThunk(\r\n  'security/analyzeThreat',\r\n  async (content, { rejectWithValue }) => {\r\n    try {\r\n      const response = await securityService.analyzeContent(content);\r\n      return response.data;\r\n    } catch (error) {\r\n      return rejectWithValue(error.response?.data || 'Analysis failed');\r\n    }\r\n  }\r\n);\r\n\r\nconst initialState = {\r\n  threats: [],\r\n  analyzing: false,\r\n  securityLevel: 'normal',\r\n  lastAnalysis: null,\r\n  error: null,\r\n};\r\n\r\nconst securitySlice = createSlice({\r\n  name: 'security',\r\n  initialState,\r\n  reducers: {\r\n    setSecurityLevel: (state, action) => {\r\n      state.securityLevel = action.payload;\r\n    },\r\n    clearThreats: (state) => {\r\n      state.threats = [];\r\n      state.lastAnalysis = null;\r\n    },\r\n  },\r\n  extraReducers: (builder) => {\r\n    builder\r\n      .addCase(analyzeThreat.pending, (state) => {\r\n        state.analyzing = true;\r\n        state.error = null;\r\n      })\r\n      .addCase(analyzeThreat.fulfilled, (state, action) => {\r\n        state.analyzing = false;\r\n        state.threats = [...state.threats, action.payload];\r\n        state.lastAnalysis = new Date().toISOString();\r\n      })\r\n      .addCase(analyzeThreat.rejected, (state, action) => {\r\n        state.analyzing = false;\r\n        state.error = action.payload;\r\n      });\r\n  },\r\n});\r\n\r\nexport const { setSecurityLevel, clearThreats } = securitySlice.actions;\r\nexport default securitySlice.reducer;","// src/store/slices/notificationSlice.js\r\nimport { createSlice } from '@reduxjs/toolkit';\r\n\r\nconst initialState = {\r\n  notifications: [],\r\n  settings: {\r\n    position: 'top-right',\r\n    duration: 5000,\r\n    maxVisible: 3,\r\n  },\r\n};\r\n\r\nlet notificationId = 0;\r\n\r\nconst notificationSlice = createSlice({\r\n  name: 'notifications',\r\n  initialState,\r\n  reducers: {\r\n    addNotification: (state, action) => {\r\n      const notification = {\r\n        id: ++notificationId,\r\n        timestamp: Date.now(),\r\n        ...action.payload,\r\n      };\r\n      state.notifications.push(notification);\r\n\r\n      // Keep only the latest notifications based on maxVisible setting\r\n      if (state.notifications.length > state.settings.maxVisible) {\r\n        state.notifications.shift();\r\n      }\r\n    },\r\n    removeNotification: (state, action) => {\r\n      state.notifications = state.notifications.filter(\r\n        (notification) => notification.id !== action.payload\r\n      );\r\n    },\r\n    clearAllNotifications: (state) => {\r\n      state.notifications = [];\r\n    },\r\n    updateNotificationSettings: (state, action) => {\r\n      state.settings = {\r\n        ...state.settings,\r\n        ...action.payload,\r\n      };\r\n    },\r\n  },\r\n});\r\n\r\nexport const {\r\n  addNotification,\r\n  removeNotification,\r\n  clearAllNotifications,\r\n  updateNotificationSettings,\r\n} = notificationSlice.actions;\r\n\r\n// Thunk for auto-removing notifications\r\nexport const showNotification = (notification) => (dispatch, getState) => {\r\n  const { duration } = getState().notifications.settings;\r\n\r\n  dispatch(addNotification(notification));\r\n\r\n  if (duration > 0) {\r\n    setTimeout(() => {\r\n      dispatch(removeNotification(notificationId));\r\n    }, duration);\r\n  }\r\n};\r\n\r\nexport default notificationSlice.reducer;","// src/store/slices/themeSlice.js\r\nimport { createSlice } from '@reduxjs/toolkit';\r\n\r\nconst initialState = {\r\n  mode: localStorage.getItem('themeMode') || 'light',\r\n  customizations: {\r\n    borderRadius: 8,\r\n    primaryColor: '#1976d2',\r\n    secondaryColor: '#dc004e',\r\n    fontFamily: 'Roboto, sans-serif',\r\n  },\r\n  responsive: {\r\n    isMobile: false,\r\n    isTablet: false,\r\n    isDesktop: true,\r\n  },\r\n};\r\n\r\nconst themeSlice = createSlice({\r\n  name: 'theme',\r\n  initialState,\r\n  reducers: {\r\n    toggleThemeMode: (state) => {\r\n      state.mode = state.mode === 'light' ? 'dark' : 'light';\r\n      localStorage.setItem('themeMode', state.mode);\r\n    },\r\n    updateCustomizations: (state, action) => {\r\n      state.customizations = {\r\n        ...state.customizations,\r\n        ...action.payload,\r\n      };\r\n    },\r\n    setResponsive: (state, action) => {\r\n      state.responsive = {\r\n        ...state.responsive,\r\n        ...action.payload,\r\n      };\r\n    },\r\n    resetTheme: (state) => {\r\n      state.mode = 'light';\r\n      state.customizations = initialState.customizations;\r\n      localStorage.setItem('themeMode', 'light');\r\n    },\r\n  },\r\n});\r\n\r\nexport const {\r\n  toggleThemeMode,\r\n  updateCustomizations,\r\n  setResponsive,\r\n  resetTheme,\r\n} = themeSlice.actions;\r\n\r\n// Thunk for initializing theme based on system preferences\r\nexport const initializeTheme = () => (dispatch) => {\r\n  const savedMode = localStorage.getItem('themeMode');\r\n  if (!savedMode) {\r\n    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;\r\n    dispatch(toggleThemeMode(prefersDark ? 'dark' : 'light'));\r\n  }\r\n};\r\n\r\nexport default themeSlice.reducer;","import { configureStore } from '@reduxjs/toolkit';\r\nimport authReducer from './slices/authSlice';\r\nimport uiReducer from './slices/uiSlice';\r\nimport securityReducer from './slices/securitySlice';\r\nimport notificationReducer from './slices/notificationSlice';\r\nimport themeReducer from './slices/themeSlice';\r\n\r\n// Root reducer\r\nconst rootReducer = {\r\n  auth: authReducer,\r\n  ui: uiReducer,\r\n  security: securityReducer,\r\n  notifications: notificationReducer,\r\n  theme: themeReducer,\r\n};\r\n\r\n// Redux middleware\r\nconst middleware = (getDefaultMiddleware) =>\r\n  getDefaultMiddleware({\r\n    serializableCheck: {\r\n      // Ignore these action types\r\n      ignoredActions: ['auth/loginSuccess', 'auth/logout'],\r\n      // Ignore these field paths in all actions\r\n      ignoredActionPaths: ['payload.timestamp'],\r\n      // Ignore these paths in the state\r\n      ignoredPaths: ['items.dates'],\r\n    },\r\n  });\r\n\r\n// Store configuration\r\nconst store = configureStore({\r\n  reducer: rootReducer,\r\n  middleware,\r\n  devTools: process.env.NODE_ENV !== 'production',\r\n  preloadedState: {}, // Initial state if needed\r\n  // Remove enhancers if not needed\r\n});\r\n\r\n// Hot reloading configuration\r\nif (process.env.NODE_ENV === 'development' && module.hot) {\r\n  module.hot.accept('./reducers', () => {\r\n    const newRootReducer = require('./reducers').default;\r\n    store.replaceReducer(newRootReducer);\r\n  });\r\n}\r\n\r\n// Export store types\r\nexport const RootState = store.getState;\r\nexport const AppDispatch = store.dispatch;\r\n\r\nexport default store;\r\n\r\n\r\n\r\n\r\n// // src/store/index.js\r\n// import { configureStore } from '@reduxjs/toolkit';\r\n// import authReducer from './slices/authSlice';\r\n// import uiReducer from './slices/uiSlice';\r\n// import securityReducer from './slices/securitySlice';\r\n// import notificationReducer from './slices/notificationSlice';\r\n// import themeReducer from './slices/themeSlice';\r\n//\r\n// // Root reducer\r\n// const rootReducer = {\r\n//   auth: authReducer,\r\n//   ui: uiReducer,\r\n//   security: securityReducer,\r\n//   notifications: notificationReducer,\r\n//   theme: themeReducer,\r\n// };\r\n//\r\n// // Redux middleware\r\n// const middleware = (getDefaultMiddleware) =>\r\n//   getDefaultMiddleware({\r\n//     serializableCheck: {\r\n//       // Ignore these action types\r\n//       ignoredActions: ['auth/loginSuccess', 'auth/logout'],\r\n//       // Ignore these field paths in all actions\r\n//       ignoredActionPaths: ['payload.timestamp'],\r\n//       // Ignore these paths in the state\r\n//       ignoredPaths: ['items.dates'],\r\n//     },\r\n//   });\r\n//\r\n// // Store configuration\r\n// const store = configureStore({\r\n//   reducer: rootReducer,\r\n//   middleware,\r\n//   devTools: process.env.NODE_ENV !== 'production',\r\n//   preloadedState: {}, // Initial state if needed\r\n//   enhancers: (defaultEnhancers) => [...defaultEnhancers], // Use a function for enhancers\r\n// });\r\n//\r\n// // Hot reloading configuration\r\n// if (process.env.NODE_ENV === 'development' && module.hot) {\r\n//   module.hot.accept('./reducers', () => {\r\n//     const newRootReducer = require('./reducers').default;\r\n//     store.replaceReducer(newRootReducer);\r\n//   });\r\n// }\r\n//\r\n// // Export store types\r\n// export const RootState = store.getState;\r\n// export const AppDispatch = store.dispatch;\r\n//\r\n// export default store;\r\n\r\n\r\n\r\n// // src/store/index.js\r\n// import { configureStore } from '@reduxjs/toolkit';\r\n// import authReducer from './slices/authSlice';\r\n// import uiReducer from './slices/uiSlice';\r\n// import securityReducer from './slices/securitySlice';\r\n// import notificationReducer from './slices/notificationSlice';\r\n// import themeReducer from './slices/themeSlice';\r\n//\r\n// // Root reducer\r\n// const rootReducer = {\r\n//   auth: authReducer,\r\n//   ui: uiReducer,\r\n//   security: securityReducer,\r\n//   notifications: notificationReducer,\r\n//   theme: themeReducer\r\n// };\r\n//\r\n// // Redux middleware\r\n// const middleware = (getDefaultMiddleware) =>\r\n//   getDefaultMiddleware({\r\n//     serializableCheck: {\r\n//       // Ignore these action types\r\n//       ignoredActions: ['auth/loginSuccess', 'auth/logout'],\r\n//       // Ignore these field paths in all actions\r\n//       ignoredActionPaths: ['payload.timestamp'],\r\n//       // Ignore these paths in the state\r\n//       ignoredPaths: ['items.dates'],\r\n//     },\r\n//   });\r\n//\r\n// // Store configuration\r\n// const store = configureStore({\r\n//   reducer: rootReducer,\r\n//   middleware,\r\n//   devTools: process.env.NODE_ENV !== 'production',\r\n//   preloadedState: {}, // Initial state if needed\r\n//   enhancers: [], // Custom enhancers if needed\r\n// });\r\n//\r\n// // Hot reloading configuration\r\n// if (process.env.NODE_ENV === 'development' && module.hot) {\r\n//   module.hot.accept('./reducers', () => {\r\n//     const newRootReducer = require('./reducers').default;\r\n//     store.replaceReducer(newRootReducer);\r\n//   });\r\n// }\r\n//\r\n// // Export store types\r\n// export const RootState = store.getState;\r\n// export const AppDispatch = store.dispatch;\r\n//\r\n// export default store;","// // src/components/Header/styles.js\r\n// import { alpha } from '@mui/material/styles';\r\nimport theme  from \"../../theme\";\r\n// src/components/Header/styles.js\r\n\r\nimport { alpha } from '@mui/material/styles';\r\n\r\nexport const headerStyles = {\r\n  root: {\r\n    transition: 'background-color 0.3s ease, box-shadow 0.3s ease',\r\n    backgroundColor: 'transparent',\r\n  },\r\n\r\n  headerScrolled: (theme) => ({\r\n    backgroundColor: alpha(theme.palette.background.paper, 0.95),\r\n    backdropFilter: 'blur(6px)',\r\n    boxShadow: theme.shadows[4],\r\n  }),\r\n\r\n  container: {\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    justifyContent: 'space-between',\r\n    height: 80,\r\n    padding: (theme) => theme.spacing(0, 3),\r\n  },\r\n\r\n  logo: {\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    textDecoration: 'none',\r\n    color: 'inherit',\r\n    gap: 1,\r\n  },\r\n\r\n  nav: {\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    gap: 3,\r\n  },\r\n\r\n  navButton: {\r\n    px: 2,\r\n    py: 1,\r\n    borderRadius: 1,\r\n    fontWeight: 500,\r\n    fontSize: '1rem',\r\n    color: 'text.primary',\r\n    transition: 'background-color 0.2s ease, color 0.2s ease',\r\n    '&:hover': {\r\n      backgroundColor: (theme) => alpha(theme.palette.primary.main, 0.1),\r\n      color: (theme) => theme.palette.primary.main, // Highlight text on hover\r\n    },\r\n    // Active state handled via sx prop in component\r\n  },\r\n\r\n  navButtonActive: (theme) => ({\r\n    backgroundColor: alpha(theme.palette.primary.main, 0.15),\r\n    color: theme.palette.primary.main,\r\n  }),\r\n\r\n  actions: {\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    gap: 2,\r\n  },\r\n\r\n  actionIcon: {\r\n    borderRadius: 1,\r\n    color: 'text.primary',\r\n    transition: 'background-color 0.2s ease',\r\n    '&:hover': {\r\n      backgroundColor: (theme) => alpha(theme.palette.primary.main, 0.1),\r\n    },\r\n  },\r\n\r\n  loginButton: {\r\n    borderRadius: 1,\r\n    border: (theme) => `1px solid ${theme.palette.primary.main}`,\r\n    color: theme.palette.primary.main,\r\n    fontWeight: 500,\r\n    transition: 'background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease',\r\n    '&:hover': {\r\n      borderColor: (theme) => theme.palette.primary.dark,\r\n      backgroundColor: (theme) => alpha(theme.palette.primary.main, 0.1),\r\n      color: theme.palette.primary.dark,\r\n    },\r\n  },\r\n\r\n  ctaButton: {\r\n    borderRadius: 1,\r\n    backgroundColor: 'primary.main',\r\n    color: 'primary.contrastText',\r\n    fontWeight: 500,\r\n    transition: 'background-color 0.2s ease, box-shadow 0.2s ease',\r\n    '&:hover': {\r\n      backgroundColor: 'primary.dark',\r\n      boxShadow: '0px 4px 10px rgba(0, 0, 0, 0.15)',\r\n    },\r\n  },\r\n\r\n  searchModal: {\r\n    position: 'fixed',\r\n    top: 0,\r\n    left: 0,\r\n    right: 0,\r\n    bottom: 0,\r\n    zIndex: 1400, // Above the header\r\n    backgroundColor: 'background.paper',\r\n    backdropFilter: 'blur(6px)',\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n  },\r\n\r\n  mobileMenu: {\r\n    width: '80%', // Increased width for better usability\r\n    maxWidth: 360,\r\n    height: '100%',\r\n    backgroundColor: 'background.paper',\r\n    borderLeft: '1px solid',\r\n    borderColor: 'divider',\r\n    position: 'fixed',\r\n    top: 0,\r\n    right: 0,\r\n    zIndex: 1400, // Above the header\r\n    padding: (theme) => theme.spacing(2),\r\n    boxSizing: 'border-box',\r\n    transition: 'transform 0.3s ease-in-out',\r\n  },\r\n\r\n  mobileMenuButton: {\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n  },\r\n\r\n  dropdownPaper: {\r\n    mt: 1,\r\n    borderRadius: 2,\r\n    boxShadow: (theme) => theme.shadows[8],\r\n    backgroundColor: 'background.paper',\r\n    width: 'max-content',\r\n    maxWidth: 800,\r\n    overflow: 'hidden',\r\n    zIndex: 1400, // Ensure the dropdown appears above other elements\r\n  },\r\n\r\n  dropdownItem: {\r\n    py: 2,\r\n    px: 3,\r\n    borderRadius: 1,\r\n    textAlign: 'left',\r\n    display: 'flex',\r\n    alignItems: 'flex-start',\r\n    transition: 'background-color 0.2s ease',\r\n    fontSize: '1rem',\r\n    color: 'text.primary',\r\n    '&:hover': {\r\n      backgroundColor: (theme) => alpha(theme.palette.primary.main, 0.05),\r\n      color: theme.palette.primary.main,\r\n    },\r\n  },\r\n\r\n  // Additional styles for Icons within buttons\r\n  iconWrapper: {\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n    marginRight: 1, // Space between the icon and text\r\n    color: 'primary.main',\r\n  },\r\n};\r\n\r\n\r\n// // src/components/Header/styles.js\r\n// import { alpha } from '@mui/material/styles';\r\n// import theme from \"../../theme\";\r\n//\r\n// export const headerStyles = {\r\n//   root: {\r\n//     transition: 'background-color 0.3s ease, box-shadow 0.3s ease',\r\n//     backgroundColor: 'transparent',\r\n//   },\r\n//\r\n//   headerScrolled: (theme) => ({\r\n//     backgroundColor: alpha(theme.palette.background.paper, 0.95),\r\n//     backdropFilter: 'blur(6px)',\r\n//     boxShadow: theme.shadows[4],\r\n//   }),\r\n//\r\n//   container: {\r\n//     display: 'flex',\r\n//     alignItems: 'center',\r\n//     justifyContent: 'space-between',\r\n//     height: 80,\r\n//     padding: (theme) => theme.spacing(0, 3),\r\n//   },\r\n//\r\n//   logo: {\r\n//     display: 'flex',\r\n//     alignItems: 'center',\r\n//     textDecoration: 'none',\r\n//     color: 'inherit',\r\n//     gap: 1,\r\n//   },\r\n//\r\n//   nav: {\r\n//     display: 'flex',\r\n//     alignItems: 'center',\r\n//     gap: 3,\r\n//   },\r\n//\r\n//   navButton: {\r\n//     px: 2,\r\n//     py: 1,\r\n//     borderRadius: 1,\r\n//     fontWeight: 500,\r\n//     fontSize: '1rem',\r\n//     color: 'text.primary',\r\n//     transition: 'background-color 0.2s ease, color 0.2s ease',\r\n//     '&:hover': {\r\n//       backgroundColor: (theme) => alpha(theme.palette.primary.main, 0.1),\r\n//       color: theme.palette.primary.main, // Highlight text on hover\r\n//     },\r\n//     // Active state handled via sx prop in component\r\n//   },\r\n//\r\n//   navButtonActive: {\r\n//     backgroundColor: (theme) => alpha(theme.palette.primary.main, 0.15),\r\n//     color: (theme) => theme.palette.primary.main,\r\n//   },\r\n//\r\n//   actions: {\r\n//     display: 'flex',\r\n//     alignItems: 'center',\r\n//     gap: 2,\r\n//   },\r\n//\r\n//   actionIcon: {\r\n//     borderRadius: 1,\r\n//     color: 'text.primary',\r\n//     transition: 'background-color 0.2s ease',\r\n//     '&:hover': {\r\n//       backgroundColor: (theme) => alpha(theme.palette.primary.main, 0.1),\r\n//     },\r\n//   },\r\n//\r\n//   loginButton: {\r\n//     borderRadius: 1,\r\n//     border: (theme) => `1px solid ${theme.palette.primary.main}`,\r\n//     color: theme.palette.primary.main,\r\n//     fontWeight: 500,\r\n//     transition: 'background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease',\r\n//     '&:hover': {\r\n//       borderColor: (theme) => theme.palette.primary.dark,\r\n//       backgroundColor: (theme) => alpha(theme.palette.primary.main, 0.1),\r\n//       color: theme.palette.primary.dark,\r\n//     },\r\n//   },\r\n//\r\n//   ctaButton: {\r\n//     borderRadius: 1,\r\n//     backgroundColor: 'primary.main',\r\n//     color: 'primary.contrastText',\r\n//     fontWeight: 500,\r\n//     transition: 'background-color 0.2s ease, box-shadow 0.2s ease',\r\n//     '&:hover': {\r\n//       backgroundColor: 'primary.dark',\r\n//       boxShadow: '0px 4px 10px rgba(0, 0, 0, 0.15)',\r\n//     },\r\n//   },\r\n//\r\n//   announcement: (theme) => ({\r\n//     backgroundColor: theme.palette.secondary.main,\r\n//     color: theme.palette.secondary.contrastText,\r\n//     padding: theme.spacing(1, 0),\r\n//     width: '100%',\r\n//     position: 'relative',\r\n//     zIndex: 1200, // Ensure it appears above the header\r\n//     textAlign: 'center',\r\n//     fontSize: '0.875rem',\r\n//   }),\r\n//\r\n//   searchModal: {\r\n//     position: 'fixed',\r\n//     top: 0,\r\n//     left: 0,\r\n//     right: 0,\r\n//     bottom: 0,\r\n//     zIndex: 1400, // Above the header and announcement\r\n//     backgroundColor: 'background.paper',\r\n//     backdropFilter: 'blur(6px)',\r\n//     display: 'flex',\r\n//     alignItems: 'center',\r\n//     justifyContent: 'center',\r\n//   },\r\n//\r\n//   mobileMenu: {\r\n//     width: '80%', // Increased width for better usability\r\n//     maxWidth: 360,\r\n//     height: '100%',\r\n//     backgroundColor: 'background.paper',\r\n//     borderLeft: '1px solid',\r\n//     borderColor: 'divider',\r\n//     position: 'fixed',\r\n//     top: 0,\r\n//     right: 0,\r\n//     zIndex: 1400, // Above the header\r\n//     padding: (theme) => theme.spacing(2),\r\n//     boxSizing: 'border-box',\r\n//     transition: 'transform 0.3s ease-in-out',\r\n//   },\r\n//\r\n//   mobileMenuButton: {\r\n//     display: 'flex',\r\n//     alignItems: 'center',\r\n//     justifyContent: 'center',\r\n//   },\r\n//\r\n//   dropdownPaper: {\r\n//     mt: 1,\r\n//     borderRadius: 2,\r\n//     boxShadow: (theme) => theme.shadows[8],\r\n//     backgroundColor: 'background.paper',\r\n//     width: 'max-content',\r\n//     maxWidth: 800,\r\n//     overflow: 'hidden',\r\n//     zIndex: 1400, // Ensure the dropdown appears above other elements\r\n//   },\r\n//\r\n//   dropdownItem: {\r\n//     py: 2,\r\n//     px: 3,\r\n//     borderRadius: 1,\r\n//     textAlign: 'left',\r\n//     display: 'flex',\r\n//     alignItems: 'flex-start',\r\n//     transition: 'background-color 0.2s ease',\r\n//     fontSize: '1rem',\r\n//     color: 'text.primary',\r\n//     '&:hover': {\r\n//       backgroundColor: (theme) => alpha(theme.palette.primary.main, 0.05),\r\n//       color: theme.palette.primary.main,\r\n//     },\r\n//   },\r\n//\r\n//   // Additional styles for Icons within buttons\r\n//   iconWrapper: {\r\n//     display: 'flex',\r\n//     alignItems: 'center',\r\n//     justifyContent: 'center',\r\n//     marginRight: 1, // Space between the icon and text\r\n//     color: 'primary.main',\r\n//   },\r\n// };\r\n\r\n\r\n// // src/components/Header/styles.js\r\n// import { alpha } from '@mui/material/styles';\r\n//\r\n// export const headerStyles = {\r\n//   root: {\r\n//     transition: 'all 0.3s ease',\r\n//     backgroundColor: 'transparent',\r\n//   },\r\n//\r\n//   headerScrolled: (theme) => ({\r\n//     backgroundColor: alpha(theme.palette.background.paper, 0.98),\r\n//     backdropFilter: 'blur(10px)',\r\n//     boxShadow: theme.shadows[4],\r\n//   }),\r\n//\r\n//   container: {\r\n//     display: 'flex',\r\n//     alignItems: 'center',\r\n//     justifyContent: 'space-between',\r\n//     height: 80,\r\n//     padding: (theme) => theme.spacing(2, 3),\r\n//   },\r\n//\r\n//   logo: {\r\n//     display: 'flex',\r\n//     alignItems: 'center',\r\n//     textDecoration: 'none',\r\n//     color: 'inherit',\r\n//     gap: 1,\r\n//   },\r\n//\r\n//   nav: {\r\n//     display: 'flex',\r\n//     alignItems: 'center',\r\n//     gap: 2,\r\n//   },\r\n//\r\n//   navButton: {\r\n//     px: 2,\r\n//     py: 1,\r\n//     borderRadius: 1,\r\n//     transition: 'background-color 0.2s ease, color 0.2s ease',\r\n//     '&:hover': {\r\n//       backgroundColor: (theme) => alpha(theme.palette.primary.main, 0.08),\r\n//       color: (theme) => theme.palette.primary.main, // Highlight text on hover\r\n//     },\r\n//     // Active state handled via sx prop in component\r\n//   },\r\n//\r\n//   navButtonActive: {\r\n//     backgroundColor: (theme) => alpha(theme.palette.primary.main, 0.1),\r\n//     color: (theme) => theme.palette.primary.main,\r\n//   },\r\n//\r\n//   actions: {\r\n//     display: 'flex',\r\n//     alignItems: 'center',\r\n//     gap: 2,\r\n//   },\r\n//\r\n//   actionIcon: {\r\n//     borderRadius: 1,\r\n//     transition: 'background-color 0.2s ease',\r\n//     '&:hover': {\r\n//       backgroundColor: (theme) => alpha(theme.palette.primary.main, 0.08),\r\n//     },\r\n//   },\r\n//\r\n//   loginButton: {\r\n//     borderRadius: 1,\r\n//     border: (theme) => `1px solid ${theme.palette.primary.main}`,\r\n//     transition: 'background-color 0.2s ease, border-color 0.2s ease',\r\n//     '&:hover': {\r\n//       borderColor: (theme) => theme.palette.primary.dark,\r\n//       backgroundColor: (theme) => alpha(theme.palette.primary.main, 0.08),\r\n//     },\r\n//   },\r\n//\r\n//   ctaButton: {\r\n//     borderRadius: 1,\r\n//     boxShadow: 'none',\r\n//     transition: 'box-shadow 0.2s ease',\r\n//     '&:hover': {\r\n//       boxShadow: 'none',\r\n//       backgroundColor: (theme) => alpha(theme.palette.primary.main, 0.1),\r\n//     },\r\n//   },\r\n//\r\n//   announcement: (theme) => ({\r\n//     backgroundColor: theme.palette.secondary.main,\r\n//     color: theme.palette.common.white,\r\n//     padding: theme.spacing(1, 0),\r\n//     position: 'relative',\r\n//     zIndex: 1200, // Ensure it appears above the header\r\n//     textAlign: 'center',\r\n//     fontSize: '0.875rem',\r\n//   }),\r\n//\r\n//   searchModal: {\r\n//     position: 'fixed',\r\n//     top: 0,\r\n//     left: 0,\r\n//     right: 0,\r\n//     bottom: 0,\r\n//     zIndex: 1300, // Above the header and announcement\r\n//     backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.98),\r\n//     backdropFilter: 'blur(10px)',\r\n//     display: 'flex',\r\n//     alignItems: 'center',\r\n//     justifyContent: 'center',\r\n//   },\r\n//\r\n//   mobileMenu: {\r\n//     width: '100%',\r\n//     maxWidth: 360,\r\n//     height: '100%',\r\n//     backgroundColor: 'background.paper',\r\n//     borderLeft: '1px solid',\r\n//     borderColor: 'divider',\r\n//     position: 'fixed',\r\n//     top: 0,\r\n//     right: 0,\r\n//     zIndex: 1300, // Above the header\r\n//     padding: (theme) => theme.spacing(2),\r\n//     boxSizing: 'border-box',\r\n//     transition: 'transform 0.3s ease-in-out',\r\n//   },\r\n//\r\n//   mobileMenuButton: {\r\n//     // Define any specific styles if needed\r\n//   },\r\n//\r\n//   dropdownPaper: {\r\n//     mt: 1,\r\n//     borderRadius: 2,\r\n//     boxShadow: (theme) => theme.shadows[8],\r\n//     backgroundColor: 'background.paper',\r\n//     width: 'max-content',\r\n//     maxWidth: 800,\r\n//     overflow: 'hidden',\r\n//     zIndex: 1200, // Ensure the dropdown appears above other elements\r\n//   },\r\n//\r\n//   dropdownItem: {\r\n//     py: 2,\r\n//     px: 3,\r\n//     borderRadius: 1,\r\n//     textAlign: 'left',\r\n//     display: 'flex',\r\n//     alignItems: 'flex-start',\r\n//     transition: 'background-color 0.2s ease',\r\n//     '&:hover': {\r\n//       backgroundColor: (theme) => alpha(theme.palette.primary.main, 0.08),\r\n//     },\r\n//   },\r\n//\r\n//   // Additional styles for Icons within buttons\r\n//   iconWrapper: {\r\n//     display: 'flex',\r\n//     alignItems: 'center',\r\n//     justifyContent: 'center',\r\n//     marginRight: 1, // Space between the icon and text\r\n//   },\r\n// };\r\n\r\n\r\n// // src/components/Header/styles.js\r\n// import { alpha } from '@mui/material/styles';\r\n//\r\n// export const headerStyles = {\r\n//   root: {\r\n//     position: 'sticky',\r\n//     top: 0,\r\n//     zIndex: 1100, // Ensures the header stays above other content\r\n//     transition: 'all 0.3s ease',\r\n//     backgroundColor: 'transparent',\r\n//   },\r\n//\r\n//   headerScrolled: (theme) => ({\r\n//     backgroundColor: alpha(theme.palette.background.paper, 0.98),\r\n//     backdropFilter: 'blur(10px)',\r\n//     boxShadow: theme.shadows[4],\r\n//   }),\r\n//\r\n//   container: {\r\n//     display: 'flex',\r\n//     alignItems: 'center',\r\n//     justifyContent: 'space-between',\r\n//     height: 80,\r\n//     padding: (theme) => theme.spacing(2, 3),\r\n//   },\r\n//\r\n//   logo: {\r\n//     display: 'flex',\r\n//     alignItems: 'center',\r\n//     textDecoration: 'none',\r\n//     color: 'inherit',\r\n//     gap: 1,\r\n//   },\r\n//\r\n//   nav: {\r\n//     display: 'flex',\r\n//     alignItems: 'center',\r\n//     gap: 2,\r\n//   },\r\n//\r\n//   navButton: {\r\n//     px: 2,\r\n//     py: 1,\r\n//     borderRadius: 1,\r\n//     transition: 'background-color 0.2s ease, color 0.2s ease',\r\n//     '&:hover': {\r\n//       backgroundColor: (theme) => alpha(theme.palette.primary.main, 0.08),\r\n//       color: (theme) => theme.palette.primary.main, // Highlight text on hover\r\n//     },\r\n//     // Active state handled via sx prop in component\r\n//   },\r\n//\r\n//   navButtonActive: {\r\n//     backgroundColor: (theme) => alpha(theme.palette.primary.main, 0.1),\r\n//     color: (theme) => theme.palette.primary.main,\r\n//   },\r\n//\r\n//   actions: {\r\n//     display: 'flex',\r\n//     alignItems: 'center',\r\n//     gap: 2,\r\n//   },\r\n//\r\n//   actionIcon: {\r\n//     borderRadius: 1,\r\n//     transition: 'background-color 0.2s ease',\r\n//     '&:hover': {\r\n//       backgroundColor: (theme) => alpha(theme.palette.primary.main, 0.08),\r\n//     },\r\n//   },\r\n//\r\n//   loginButton: {\r\n//     borderRadius: 1,\r\n//     border: (theme) => `1px solid ${theme.palette.primary.main}`,\r\n//     transition: 'background-color 0.2s ease, border-color 0.2s ease',\r\n//     '&:hover': {\r\n//       borderColor: (theme) => theme.palette.primary.dark,\r\n//       backgroundColor: (theme) => alpha(theme.palette.primary.main, 0.08),\r\n//     },\r\n//   },\r\n//\r\n//   ctaButton: {\r\n//     borderRadius: 1,\r\n//     boxShadow: 'none',\r\n//     transition: 'box-shadow 0.2s ease',\r\n//     '&:hover': {\r\n//       boxShadow: 'none',\r\n//       backgroundColor: (theme) => alpha(theme.palette.primary.main, 0.1),\r\n//     },\r\n//   },\r\n//\r\n//   announcement: (theme) => ({\r\n//     backgroundColor: theme.palette.secondary.main,\r\n//     color: theme.palette.common.white,\r\n//     padding: theme.spacing(1, 0),\r\n//     position: 'relative',\r\n//     zIndex: 1200, // Ensure it appears above the header\r\n//     textAlign: 'center',\r\n//     fontSize: '0.875rem',\r\n//   }),\r\n//\r\n//   searchModal: {\r\n//     position: 'fixed',\r\n//     top: 0,\r\n//     left: 0,\r\n//     right: 0,\r\n//     bottom: 0,\r\n//     zIndex: 1300, // Above the header and announcement\r\n//     backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.98),\r\n//     backdropFilter: 'blur(10px)',\r\n//     display: 'flex',\r\n//     alignItems: 'center',\r\n//     justifyContent: 'center',\r\n//   },\r\n//\r\n//   mobileMenu: {\r\n//     width: '100%',\r\n//     maxWidth: 360,\r\n//     height: '100%',\r\n//     backgroundColor: 'background.paper',\r\n//     borderLeft: '1px solid',\r\n//     borderColor: 'divider',\r\n//     position: 'fixed',\r\n//     top: 0,\r\n//     right: 0,\r\n//     zIndex: 1300, // Above the header\r\n//     padding: (theme) => theme.spacing(2),\r\n//     boxSizing: 'border-box',\r\n//     transition: 'transform 0.3s ease-in-out',\r\n//   },\r\n//\r\n//   dropdownPaper: {\r\n//     mt: 1,\r\n//     borderRadius: 2,\r\n//     boxShadow: (theme) => theme.shadows[8],\r\n//     backgroundColor: 'background.paper',\r\n//     width: 'max-content',\r\n//     maxWidth: 800,\r\n//     overflow: 'hidden',\r\n//     zIndex: 1200, // Ensure the dropdown appears above other elements\r\n//   },\r\n//\r\n//   dropdownItem: {\r\n//     py: 2,\r\n//     px: 3,\r\n//     borderRadius: 1,\r\n//     textAlign: 'left',\r\n//     display: 'flex',\r\n//     alignItems: 'flex-start',\r\n//     transition: 'background-color 0.2s ease',\r\n//     '&:hover': {\r\n//       backgroundColor: (theme) => alpha(theme.palette.primary.main, 0.08),\r\n//     },\r\n//   },\r\n//\r\n//   // Additional styles for Icons within buttons\r\n//   iconWrapper: {\r\n//     display: 'flex',\r\n//     alignItems: 'center',\r\n//     justifyContent: 'center',\r\n//     marginRight: 1, // Space between the icon and text\r\n//   },\r\n// };\r\n\r\n\r\n// // src/components/Header/styles.js\r\n// import { alpha } from '@mui/material/styles';\r\n//\r\n// export const headerStyles = {\r\n//   root: {\r\n//     position: 'sticky',\r\n//     top: 0,\r\n//     zIndex: 1100, // Ensures the header stays above other content\r\n//     transition: 'all 0.3s ease',\r\n//     backgroundColor: 'transparent',\r\n//   },\r\n//\r\n//   headerScrolled: (theme) => ({\r\n//     backgroundColor: alpha(theme.palette.background.paper, 0.98),\r\n//     backdropFilter: 'blur(10px)',\r\n//     boxShadow: theme.shadows[4],\r\n//   }),\r\n//\r\n//   container: {\r\n//     display: 'flex',\r\n//     alignItems: 'center',\r\n//     justifyContent: 'space-between',\r\n//     height: 80,\r\n//     padding: (theme) => theme.spacing(2, 3),\r\n//   },\r\n//\r\n//   logo: {\r\n//     display: 'flex',\r\n//     alignItems: 'center',\r\n//     textDecoration: 'none',\r\n//     color: 'inherit',\r\n//     gap: 1,\r\n//   },\r\n//\r\n//   nav: {\r\n//     display: 'flex',\r\n//     alignItems: 'center',\r\n//     gap: 2,\r\n//   },\r\n//\r\n//   navButton: {\r\n//     px: 2,\r\n//     py: 1,\r\n//     borderRadius: 1,\r\n//     transition: 'background-color 0.2s ease, color 0.2s ease',\r\n//     '&:hover': {\r\n//       backgroundColor: (theme) => alpha(theme.palette.primary.main, 0.08),\r\n//       color: (theme) => theme.palette.primary.main, // Highlight text on hover\r\n//     },\r\n//     // Active state handled via sx prop in component\r\n//   },\r\n//\r\n//   navButtonActive: {\r\n//     backgroundColor: (theme) => alpha(theme.palette.primary.main, 0.1),\r\n//     color: (theme) => theme.palette.primary.main,\r\n//   },\r\n//\r\n//   actions: {\r\n//     display: 'flex',\r\n//     alignItems: 'center',\r\n//     gap: 2,\r\n//   },\r\n//\r\n//   actionIcon: {\r\n//     borderRadius: 1,\r\n//     transition: 'background-color 0.2s ease',\r\n//     '&:hover': {\r\n//       backgroundColor: (theme) => alpha(theme.palette.primary.main, 0.08),\r\n//     },\r\n//   },\r\n//\r\n//   loginButton: {\r\n//     borderRadius: 1,\r\n//     border: (theme) => `1px solid ${theme.palette.primary.main}`,\r\n//     transition: 'background-color 0.2s ease, border-color 0.2s ease',\r\n//     '&:hover': {\r\n//       borderColor: (theme) => theme.palette.primary.dark,\r\n//       backgroundColor: (theme) => alpha(theme.palette.primary.main, 0.08),\r\n//     },\r\n//   },\r\n//\r\n//   ctaButton: {\r\n//     borderRadius: 1,\r\n//     boxShadow: 'none',\r\n//     transition: 'box-shadow 0.2s ease',\r\n//     '&:hover': {\r\n//       boxShadow: 'none',\r\n//       backgroundColor: (theme) => alpha(theme.palette.primary.main, 0.1),\r\n//     },\r\n//   },\r\n//\r\n//   announcement: (theme) => ({\r\n//     backgroundColor: theme.palette.secondary.main,\r\n//     color: theme.palette.common.white,\r\n//     padding: theme.spacing(1, 0),\r\n//     position: 'relative',\r\n//     zIndex: 1200, // Ensure it appears above the header\r\n//     textAlign: 'center',\r\n//     fontSize: '0.875rem',\r\n//   }),\r\n//\r\n//   searchModal: {\r\n//     position: 'fixed',\r\n//     top: 0,\r\n//     left: 0,\r\n//     right: 0,\r\n//     bottom: 0,\r\n//     zIndex: 1300, // Above the header and announcement\r\n//     backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.98),\r\n//     backdropFilter: 'blur(10px)',\r\n//     display: 'flex',\r\n//     alignItems: 'center',\r\n//     justifyContent: 'center',\r\n//   },\r\n//\r\n//   mobileMenu: {\r\n//     width: '100%',\r\n//     maxWidth: 360,\r\n//     height: '100%',\r\n//     backgroundColor: 'background.paper',\r\n//     borderLeft: '1px solid',\r\n//     borderColor: 'divider',\r\n//     position: 'fixed',\r\n//     top: 0,\r\n//     right: 0,\r\n//     zIndex: 1300, // Above the header\r\n//     padding: (theme) => theme.spacing(2),\r\n//     boxSizing: 'border-box',\r\n//     transition: 'transform 0.3s ease-in-out',\r\n//   },\r\n//\r\n//   dropdownPaper: {\r\n//     mt: 1,\r\n//     borderRadius: 2,\r\n//     boxShadow: (theme) => theme.shadows[8],\r\n//     backgroundColor: 'background.paper',\r\n//     width: 'max-content',\r\n//     maxWidth: 800,\r\n//     overflow: 'hidden',\r\n//     zIndex: 1200, // Ensure the dropdown appears above other elements\r\n//   },\r\n//\r\n//   dropdownItem: {\r\n//     py: 2,\r\n//     px: 3,\r\n//     borderRadius: 1,\r\n//     textAlign: 'left',\r\n//     display: 'flex',\r\n//     alignItems: 'flex-start',\r\n//     transition: 'background-color 0.2s ease',\r\n//     '&:hover': {\r\n//       backgroundColor: (theme) => alpha(theme.palette.primary.main, 0.08),\r\n//     },\r\n//   },\r\n//\r\n//   // Additional styles for Icons within buttons\r\n//   iconWrapper: {\r\n//     display: 'flex',\r\n//     alignItems: 'center',\r\n//     justifyContent: 'center',\r\n//     marginRight: 1, // Space between the icon and text\r\n//   },\r\n// };\r\n\r\n\r\n// // src/components/Header/styles.js\r\n// import { alpha } from '@mui/material/styles';\r\n//\r\n// export const headerStyles = {\r\n//   root: {\r\n//     position: 'sticky',\r\n//     top: 0,\r\n//     zIndex: 1100, // Ensures the header stays above other content\r\n//     transition: 'all 0.3s ease',\r\n//     backgroundColor: 'transparent',\r\n//   },\r\n//\r\n//   headerScrolled: (theme) => ({\r\n//     backgroundColor: alpha(theme.palette.background.paper, 0.98),\r\n//     backdropFilter: 'blur(10px)',\r\n//     boxShadow: theme.shadows[4],\r\n//   }),\r\n//\r\n//   container: {\r\n//     display: 'flex',\r\n//     alignItems: 'center',\r\n//     justifyContent: 'space-between',\r\n//     height: 80,\r\n//     padding: (theme) => theme.spacing(2, 3),\r\n//   },\r\n//\r\n//   logo: {\r\n//     display: 'flex',\r\n//     alignItems: 'center',\r\n//     textDecoration: 'none',\r\n//     color: 'inherit',\r\n//     gap: 1,\r\n//   },\r\n//\r\n//   nav: {\r\n//     display: 'flex',\r\n//     alignItems: 'center',\r\n//     gap: 2,\r\n//   },\r\n//\r\n//   navButton: {\r\n//     px: 2,\r\n//     py: 1,\r\n//     borderRadius: 1,\r\n//     transition: 'background-color 0.2s ease, color 0.2s ease',\r\n//     '&:hover': {\r\n//       backgroundColor: (theme) => alpha(theme.palette.primary.main, 0.08),\r\n//       color: (theme) => theme.palette.primary.main, // Highlight text on hover\r\n//     },\r\n//     // Active state will be applied via sx prop in the component\r\n//   },\r\n//\r\n//   navButtonActive: {\r\n//     backgroundColor: (theme) => alpha(theme.palette.primary.main, 0.1),\r\n//     color: (theme) => theme.palette.primary.main,\r\n//   },\r\n//\r\n//   actions: {\r\n//     display: 'flex',\r\n//     alignItems: 'center',\r\n//     gap: 2,\r\n//   },\r\n//\r\n//   actionIcon: {\r\n//     borderRadius: 1,\r\n//     transition: 'background-color 0.2s ease',\r\n//     '&:hover': {\r\n//       backgroundColor: (theme) => alpha(theme.palette.primary.main, 0.08),\r\n//     },\r\n//   },\r\n//\r\n//   loginButton: {\r\n//     borderRadius: 1,\r\n//     border: (theme) => `1px solid ${theme.palette.primary.main}`,\r\n//     transition: 'background-color 0.2s ease, border-color 0.2s ease',\r\n//     '&:hover': {\r\n//       borderColor: (theme) => theme.palette.primary.dark,\r\n//       backgroundColor: (theme) => alpha(theme.palette.primary.main, 0.08),\r\n//     },\r\n//   },\r\n//\r\n//   ctaButton: {\r\n//     borderRadius: 1,\r\n//     boxShadow: 'none',\r\n//     transition: 'box-shadow 0.2s ease',\r\n//     '&:hover': {\r\n//       boxShadow: 'none',\r\n//       backgroundColor: (theme) => alpha(theme.palette.primary.main, 0.1),\r\n//     },\r\n//   },\r\n//\r\n//   announcement: (theme) => ({\r\n//     backgroundColor: theme.palette.secondary.main,\r\n//     color: theme.palette.common.white,\r\n//     padding: theme.spacing(1, 0),\r\n//     position: 'relative',\r\n//     zIndex: 1200, // Ensure it appears above the header\r\n//     textAlign: 'center',\r\n//     fontSize: '0.875rem',\r\n//   }),\r\n//\r\n//   searchModal: {\r\n//     position: 'fixed',\r\n//     top: 0,\r\n//     left: 0,\r\n//     right: 0,\r\n//     bottom: 0,\r\n//     zIndex: 1300, // Above the header and announcement\r\n//     backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.98),\r\n//     backdropFilter: 'blur(10px)',\r\n//     display: 'flex',\r\n//     alignItems: 'center',\r\n//     justifyContent: 'center',\r\n//   },\r\n//\r\n//   mobileMenu: {\r\n//     width: '100%',\r\n//     maxWidth: 360,\r\n//     height: '100%',\r\n//     backgroundColor: 'background.paper',\r\n//     borderLeft: '1px solid',\r\n//     borderColor: 'divider',\r\n//     position: 'fixed',\r\n//     top: 0,\r\n//     right: 0,\r\n//     zIndex: 1300, // Above the header\r\n//     padding: (theme) => theme.spacing(2),\r\n//     boxSizing: 'border-box',\r\n//     transition: 'transform 0.3s ease-in-out',\r\n//   },\r\n//\r\n//   dropdownPaper: {\r\n//     mt: 1,\r\n//     borderRadius: 2,\r\n//     boxShadow: (theme) => theme.shadows[8],\r\n//     backgroundColor: 'background.paper',\r\n//     width: 'max-content',\r\n//     maxWidth: 800,\r\n//     overflow: 'hidden',\r\n//     zIndex: 1200, // Ensure the dropdown appears above other elements\r\n//   },\r\n//\r\n//   dropdownItem: {\r\n//     py: 2,\r\n//     px: 3,\r\n//     borderRadius: 1,\r\n//     textAlign: 'left',\r\n//     display: 'flex',\r\n//     alignItems: 'flex-start',\r\n//     transition: 'background-color 0.2s ease',\r\n//     '&:hover': {\r\n//       backgroundColor: (theme) => alpha(theme.palette.primary.main, 0.08),\r\n//     },\r\n//   },\r\n//\r\n//   // Additional styles for Icons within buttons\r\n//   iconWrapper: {\r\n//     display: 'flex',\r\n//     alignItems: 'center',\r\n//     justifyContent: 'center',\r\n//     marginRight: 1, // Space between the icon and text\r\n//   },\r\n// };\r\n\r\n\r\n// // src/components/Header/styles.js\r\n// import { alpha } from '@mui/material/styles';\r\n//\r\n// export const headerStyles = {\r\n//   root: {\r\n//     position: 'sticky',\r\n//     top: 0,\r\n//     zIndex: 1100, // Ensures the header stays above other content\r\n//     transition: 'all 0.3s ease',\r\n//     backgroundColor: 'transparent',\r\n//   },\r\n//\r\n//   headerScrolled: (theme) => ({\r\n//     backgroundColor: alpha(theme.palette.background.paper, 0.98),\r\n//     backdropFilter: 'blur(10px)',\r\n//     boxShadow: theme.shadows[4],\r\n//   }),\r\n//\r\n//   container: {\r\n//     display: 'flex',\r\n//     alignItems: 'center',\r\n//     justifyContent: 'space-between',\r\n//     height: 80,\r\n//     padding: (theme) => theme.spacing(2, 3),\r\n//   },\r\n//\r\n//   logo: {\r\n//     display: 'flex',\r\n//     alignItems: 'center',\r\n//     textDecoration: 'none',\r\n//     color: 'inherit',\r\n//     gap: 1,\r\n//   },\r\n//\r\n//   nav: {\r\n//     display: 'flex',\r\n//     alignItems: 'center',\r\n//     gap: 2,\r\n//   },\r\n//\r\n//   navButton: {\r\n//     px: 2,\r\n//     py: 1,\r\n//     borderRadius: 1,\r\n//     transition: 'background-color 0.2s ease, color 0.2s ease',\r\n//     '&:hover': {\r\n//       backgroundColor: (theme) => alpha(theme.palette.primary.main, 0.08),\r\n//       color: (theme) => theme.palette.primary.main, // Highlight text on hover\r\n//     },\r\n//     '&.active': {\r\n//       backgroundColor: (theme) => alpha(theme.palette.primary.main, 0.1),\r\n//       color: (theme) => theme.palette.primary.main,\r\n//     },\r\n//   },\r\n//\r\n//   actions: {\r\n//     display: 'flex',\r\n//     alignItems: 'center',\r\n//     gap: 2,\r\n//   },\r\n//\r\n//   actionIcon: {\r\n//     borderRadius: 1,\r\n//     transition: 'background-color 0.2s ease',\r\n//     '&:hover': {\r\n//       backgroundColor: (theme) => alpha(theme.palette.primary.main, 0.08),\r\n//     },\r\n//   },\r\n//\r\n//   loginButton: {\r\n//     borderRadius: 1,\r\n//     border: (theme) => `1px solid ${theme.palette.primary.main}`,\r\n//     transition: 'background-color 0.2s ease, border-color 0.2s ease',\r\n//     '&:hover': {\r\n//       borderColor: (theme) => theme.palette.primary.dark,\r\n//       backgroundColor: (theme) => alpha(theme.palette.primary.main, 0.08),\r\n//     },\r\n//   },\r\n//\r\n//   ctaButton: {\r\n//     borderRadius: 1,\r\n//     boxShadow: 'none',\r\n//     transition: 'box-shadow 0.2s ease',\r\n//     '&:hover': {\r\n//       boxShadow: 'none',\r\n//       backgroundColor: (theme) => alpha(theme.palette.primary.main, 0.1),\r\n//     },\r\n//   },\r\n//\r\n//   announcement: (theme) => ({\r\n//     backgroundColor: theme.palette.secondary.main,\r\n//     color: theme.palette.common.white,\r\n//     padding: theme.spacing(1, 0),\r\n//     position: 'relative',\r\n//     zIndex: 1200, // Ensure it appears above the header\r\n//     textAlign: 'center',\r\n//     fontSize: '0.875rem',\r\n//   }),\r\n//\r\n//   searchModal: {\r\n//     position: 'fixed',\r\n//     top: 0,\r\n//     left: 0,\r\n//     right: 0,\r\n//     bottom: 0,\r\n//     zIndex: 1300, // Above the header and announcement\r\n//     backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.98),\r\n//     backdropFilter: 'blur(10px)',\r\n//     display: 'flex',\r\n//     alignItems: 'center',\r\n//     justifyContent: 'center',\r\n//   },\r\n//\r\n//   mobileMenu: {\r\n//     width: '100%',\r\n//     maxWidth: 360,\r\n//     height: '100%',\r\n//     backgroundColor: 'background.paper',\r\n//     borderLeft: '1px solid',\r\n//     borderColor: 'divider',\r\n//     position: 'fixed',\r\n//     top: 0,\r\n//     right: 0,\r\n//     zIndex: 1300, // Above the header\r\n//     padding: (theme) => theme.spacing(2),\r\n//     boxSizing: 'border-box',\r\n//     transition: 'transform 0.3s ease-in-out',\r\n//   },\r\n//\r\n//   dropdownPaper: {\r\n//     mt: 1,\r\n//     borderRadius: 2,\r\n//     boxShadow: (theme) => theme.shadows[8],\r\n//     backgroundColor: 'background.paper',\r\n//     width: 'max-content',\r\n//     maxWidth: 800,\r\n//     overflow: 'hidden',\r\n//     zIndex: 1200, // Ensure the dropdown appears above other elements\r\n//   },\r\n//\r\n//   dropdownItem: {\r\n//     py: 2,\r\n//     px: 3,\r\n//     borderRadius: 1,\r\n//     textAlign: 'left',\r\n//     display: 'flex',\r\n//     alignItems: 'flex-start',\r\n//     transition: 'background-color 0.2s ease',\r\n//     '&:hover': {\r\n//       backgroundColor: (theme) => alpha(theme.palette.primary.main, 0.08),\r\n//     },\r\n//   },\r\n//\r\n//   // Additional styles for Icons within buttons\r\n//   iconWrapper: {\r\n//     display: 'flex',\r\n//     alignItems: 'center',\r\n//     justifyContent: 'center',\r\n//     marginRight: 1, // Space between the icon and text\r\n//   },\r\n// };\r\n\r\n\r\n// // src/components/Header/styles.js\r\n// import { alpha } from '@mui/material/styles';\r\n//\r\n// export const headerStyles = {\r\n//   root: {\r\n//     position: 'sticky',\r\n//     top: 0,\r\n//     zIndex: 1100, // Ensures the header stays above other content\r\n//     transition: 'all 0.3s ease',\r\n//     backgroundColor: 'transparent',\r\n//   },\r\n//\r\n//   headerScrolled: (theme) => ({\r\n//     backgroundColor: alpha(theme.palette.background.paper, 0.98),\r\n//     backdropFilter: 'blur(10px)',\r\n//     boxShadow: theme.shadows[4],\r\n//   }),\r\n//\r\n//   container: {\r\n//     display: 'flex',\r\n//     alignItems: 'center',\r\n//     justifyContent: 'space-between',\r\n//     height: 80,\r\n//     padding: (theme) => theme.spacing(2, 3),\r\n//   },\r\n//\r\n//   logo: {\r\n//     display: 'flex',\r\n//     alignItems: 'center',\r\n//     textDecoration: 'none',\r\n//     color: 'inherit',\r\n//     gap: 1,\r\n//   },\r\n//\r\n//   nav: {\r\n//     display: 'flex',\r\n//     alignItems: 'center',\r\n//     gap: 2,\r\n//   },\r\n//\r\n//   navButton: {\r\n//     px: 2,\r\n//     py: 1,\r\n//     borderRadius: 1,\r\n//     transition: 'background-color 0.2s ease, color 0.2s ease',\r\n//     '&:hover': {\r\n//       backgroundColor: (theme) => alpha(theme.palette.primary.main, 0.08),\r\n//       color: (theme) => theme.palette.primary.main, // Highlight text on hover\r\n//     },\r\n//     '&.active': {\r\n//       backgroundColor: (theme) => alpha(theme.palette.primary.main, 0.1),\r\n//       color: (theme) => theme.palette.primary.main,\r\n//     },\r\n//   },\r\n//\r\n//   actions: {\r\n//     display: 'flex',\r\n//     alignItems: 'center',\r\n//     gap: 2,\r\n//   },\r\n//\r\n//   actionIcon: {\r\n//     borderRadius: 1,\r\n//     transition: 'background-color 0.2s ease',\r\n//     '&:hover': {\r\n//       backgroundColor: (theme) => alpha(theme.palette.primary.main, 0.08),\r\n//     },\r\n//   },\r\n//\r\n//   loginButton: {\r\n//     borderRadius: 1,\r\n//     border: (theme) => `1px solid ${theme.palette.primary.main}`,\r\n//     transition: 'background-color 0.2s ease, border-color 0.2s ease',\r\n//     '&:hover': {\r\n//       borderColor: (theme) => theme.palette.primary.dark,\r\n//       backgroundColor: (theme) => alpha(theme.palette.primary.main, 0.08),\r\n//     },\r\n//   },\r\n//\r\n//   ctaButton: {\r\n//     borderRadius: 1,\r\n//     boxShadow: 'none',\r\n//     transition: 'box-shadow 0.2s ease',\r\n//     '&:hover': {\r\n//       boxShadow: 'none',\r\n//       backgroundColor: (theme) => alpha(theme.palette.primary.main, 0.1),\r\n//     },\r\n//   },\r\n//\r\n//   announcement: (theme) => ({\r\n//     backgroundColor: theme.palette.secondary.main,\r\n//     color: theme.palette.common.white,\r\n//     padding: theme.spacing(1, 0),\r\n//     position: 'relative',\r\n//     zIndex: 1200, // Ensure it appears above the header\r\n//     textAlign: 'center',\r\n//     fontSize: '0.875rem',\r\n//   }),\r\n//\r\n//   searchModal: {\r\n//     position: 'fixed',\r\n//     top: 0,\r\n//     left: 0,\r\n//     right: 0,\r\n//     bottom: 0,\r\n//     zIndex: 1300, // Above the header and announcement\r\n//     backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.98),\r\n//     backdropFilter: 'blur(10px)',\r\n//     display: 'flex',\r\n//     alignItems: 'center',\r\n//     justifyContent: 'center',\r\n//   },\r\n//\r\n//   mobileMenu: {\r\n//     width: '100%',\r\n//     maxWidth: 360,\r\n//     height: '100%',\r\n//     backgroundColor: 'background.paper',\r\n//     borderLeft: '1px solid',\r\n//     borderColor: 'divider',\r\n//     position: 'fixed',\r\n//     top: 0,\r\n//     right: 0,\r\n//     zIndex: 1300, // Above the header\r\n//     padding: (theme) => theme.spacing(2),\r\n//     boxSizing: 'border-box',\r\n//     transition: 'transform 0.3s ease-in-out',\r\n//   },\r\n//\r\n//   dropdownPaper: {\r\n//     mt: 1,\r\n//     borderRadius: 2,\r\n//     boxShadow: (theme) => theme.shadows[8],\r\n//     backgroundColor: 'background.paper',\r\n//     width: 'max-content',\r\n//     maxWidth: 800,\r\n//     overflow: 'hidden',\r\n//     // Ensure the dropdown appears above other elements\r\n//     zIndex: 1200,\r\n//   },\r\n//\r\n//   dropdownItem: {\r\n//     py: 2,\r\n//     px: 3,\r\n//     borderRadius: 1,\r\n//     textAlign: 'left',\r\n//     display: 'flex',\r\n//     alignItems: 'flex-start',\r\n//     transition: 'background-color 0.2s ease',\r\n//     '&:hover': {\r\n//       backgroundColor: (theme) => alpha(theme.palette.primary.main, 0.08),\r\n//     },\r\n//   },\r\n//\r\n//   // Additional styles for Icons within buttons\r\n//   iconWrapper: {\r\n//     display: 'flex',\r\n//     alignItems: 'center',\r\n//     justifyContent: 'center',\r\n//     marginRight: 1, // Space between the icon and text\r\n//   },\r\n// };\r\n\r\n\r\n// // src/components/Header/styles.js\r\n// import { alpha } from '@mui/material/styles';\r\n//\r\n// export const headerStyles = {\r\n//   root: {\r\n//     position: 'sticky',\r\n//     top: 0,\r\n//     zIndex: 1100,\r\n//     transition: 'all 0.3s ease',\r\n//     backgroundColor: 'transparent',\r\n//   },\r\n//\r\n//   headerScrolled: (theme) => ({\r\n//     backgroundColor: alpha(theme.palette.background.paper, 0.98),\r\n//     backdropFilter: 'blur(10px)',\r\n//     boxShadow: theme.shadows[4],\r\n//   }),\r\n//\r\n//   container: {\r\n//     display: 'flex',\r\n//     alignItems: 'center',\r\n//     justifyContent: 'space-between',\r\n//     height: 80,\r\n//     padding: (theme) => theme.spacing(2, 3),\r\n//   },\r\n//\r\n//   logo: {\r\n//     display: 'flex',\r\n//     alignItems: 'center',\r\n//     textDecoration: 'none',\r\n//     color: 'inherit',\r\n//     gap: 1,\r\n//   },\r\n//\r\n//   nav: {\r\n//     display: 'flex',\r\n//     alignItems: 'center',\r\n//     gap: 2,\r\n//   },\r\n//\r\n//   navButton: {\r\n//     px: 2,\r\n//     py: 1,\r\n//     borderRadius: 1,\r\n//     '&:hover': {\r\n//       backgroundColor: (theme) => alpha(theme.palette.primary.main, 0.08),\r\n//     },\r\n//   },\r\n//\r\n//   actions: {\r\n//     display: 'flex',\r\n//     alignItems: 'center',\r\n//     gap: 2,\r\n//   },\r\n//\r\n//   actionIcon: {\r\n//     borderRadius: 1,\r\n//     '&:hover': {\r\n//       backgroundColor: (theme) => alpha(theme.palette.primary.main, 0.08),\r\n//     },\r\n//   },\r\n//\r\n//   loginButton: {\r\n//     borderRadius: 1,\r\n//     borderColor: (theme) => theme.palette.primary.main,\r\n//     '&:hover': {\r\n//       borderColor: (theme) => theme.palette.primary.dark,\r\n//       backgroundColor: (theme) => alpha(theme.palette.primary.main, 0.08),\r\n//     },\r\n//   },\r\n//\r\n//   ctaButton: {\r\n//     borderRadius: 1,\r\n//     boxShadow: 'none',\r\n//     '&:hover': {\r\n//       boxShadow: 'none',\r\n//     },\r\n//   },\r\n//\r\n//   announcement: (theme) => ({\r\n//     backgroundColor: theme.palette.secondary.main,\r\n//     color: theme.palette.common.white,\r\n//     padding: theme.spacing(1, 0),\r\n//     position: 'relative',\r\n//     zIndex: 1101,\r\n//   }),\r\n//\r\n//   searchModal: {\r\n//     position: 'fixed',\r\n//     top: 0,\r\n//     left: 0,\r\n//     right: 0,\r\n//     bottom: 0,\r\n//     zIndex: 1200,\r\n//     backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.98),\r\n//     backdropFilter: 'blur(10px)',\r\n//   },\r\n//\r\n//   mobileMenu: {\r\n//     width: '100%',\r\n//     maxWidth: 360,\r\n//     height: '100%',\r\n//     backgroundColor: 'background.paper',\r\n//     borderLeft: '1px solid',\r\n//     borderColor: 'divider',\r\n//   },\r\n//\r\n//   dropdownPaper: {\r\n//     mt: 1,\r\n//     borderRadius: 2,\r\n//     boxShadow: (theme) => theme.shadows[8],\r\n//     backgroundColor: 'background.paper',\r\n//     width: 'max-content',\r\n//     maxWidth: 800,\r\n//     overflow: 'hidden',\r\n//   },\r\n//\r\n//   dropdownItem: {\r\n//     py: 2,\r\n//     px: 3,\r\n//     borderRadius: 1,\r\n//     textAlign: 'left',\r\n//     '&:hover': {\r\n//       backgroundColor: (theme) => alpha(theme.palette.primary.main, 0.08),\r\n//     },\r\n//   },\r\n// };\r\n","// src/components/Header/Logo.js\r\nimport React from 'react';\r\nimport { Box, Typography } from '@mui/material';\r\nimport { Link as RouterLink } from 'react-router-dom';\r\nimport { headerStyles } from './styles';\r\n\r\nconst Logo = () => {\r\n  const publicUrl = process.env.PUBLIC_URL || '';\r\n\r\n  return (\r\n      <Box\r\n          component={RouterLink}\r\n          to=\"/\"\r\n          sx={{\r\n              ...headerStyles.logo,\r\n              display: 'flex', // Use flexbox for horizontal alignment\r\n              alignItems: 'center', // Center vertically\r\n              textDecoration: 'none', // Remove underline from link\r\n          }}\r\n      >\r\n          {/*<img*/}\r\n          {/*    src=\"/assets/images/logo.svg\"*/}\r\n          {/*    alt=\"SecureAI Guard\"*/}\r\n          {/*    style={{height: 32, marginRight: 8}}*/}\r\n          {/*/>*/}\r\n          <img\r\n              src={`${publicUrl}/assets/images/logo.png`}\r\n              alt=\"SecureAI Guard\"\r\n              style={{height: 32, marginRight: 8}}\r\n          />\r\n          <Typography\r\n              variant=\"h6\"\r\n              component=\"span\"\r\n              sx={{\r\n                  fontWeight: 600,\r\n                  color: 'inherit', // Ensure text color matches theme\r\n                  display: {xs: 'none', sm: 'block'}, // Show only on small screens and up\r\n              }}\r\n          >\r\n              SecureAI Guard\r\n          </Typography>\r\n      </Box>\r\n  );\r\n};\r\n\r\nexport default Logo;\r\n\r\n\r\n// // src/components/Header/Logo.js\r\n// import React from 'react';\r\n// import { Box, Typography } from '@mui/material';\r\n// import { Link as RouterLink } from 'react-router-dom';\r\n// import { headerStyles } from './styles';\r\n//\r\n// const Logo = () => {\r\n//   return (\r\n//     <Box\r\n//       component={RouterLink}\r\n//       to=\"/\"\r\n//       sx={{\r\n//         ...headerStyles.logo,\r\n//         display: 'flex', // Use flexbox for horizontal alignment\r\n//         alignItems: 'center', // Center vertically\r\n//         textDecoration: 'none', // Remove underline from link\r\n//       }}\r\n//     >\r\n//       <img\r\n//         src=\"/assets/images/logo.svg\"\r\n//         alt=\"SecureAI Guard\"\r\n//         style={{ height: 32, marginRight: 8 }}\r\n//       />\r\n//       <Typography\r\n//         variant=\"h6\"\r\n//         component=\"span\"\r\n//         sx={{\r\n//           fontWeight: 600,\r\n//           color: 'inherit', // Ensure text color matches theme\r\n//           display: { xs: 'none', sm: 'block' }, // Show only on small screens and up\r\n//         }}\r\n//       >\r\n//         SecureAI Guard\r\n//       </Typography>\r\n//     </Box>\r\n//   );\r\n// };\r\n//\r\n// export default Logo;\r\n//\r\n","// navigationData.js\r\nimport {\r\n  Security,\r\n  Code,\r\n  Analytics,\r\n  Business,\r\n  Build,\r\n  School,\r\n  Help,\r\n  Assignment,\r\n  Speed,\r\n  Home as HomeIcon,\r\n  MonetizationOn,\r\n  Storefront,\r\n} from '@mui/icons-material';\r\n\r\nexport const navigationItems = {\r\n  home: {\r\n    label: 'Home',\r\n    items: [\r\n      {\r\n        id: 'home',\r\n        title: 'Home',\r\n        description: 'Return to homepage',\r\n        icon: HomeIcon,\r\n        path: '/',\r\n      },\r\n    ],\r\n  },\r\n  products: {\r\n    label: 'Products',\r\n    items: [\r\n      {\r\n        id: 'ai-security-suite',\r\n        title: 'AI Security Suite',\r\n        description: 'Complete protection for AI systems',\r\n        icon: Security,\r\n        path: '/features',\r\n\r\n      },\r\n      // {\r\n      //   id: 'api-integration',\r\n      //   title: 'API Integration',\r\n      //   description: 'Secure API endpoints and access',\r\n      //   icon: Code,\r\n      //   path: '/404',\r\n      //   comingSoon: true, // Tag as Coming Soon\r\n      // },\r\n      // {\r\n      //   id: 'analytics-dashboard',\r\n      //   title: 'Analytics Dashboard',\r\n      //   description: 'Monitor and analyze security metrics',\r\n      //   icon: Analytics,\r\n      //   path: '/404',\r\n      //   comingSoon: true, // Tag as Coming Soon\r\n      //\r\n      // },\r\n      // {\r\n      //   id: 'threat-detection',\r\n      //   title: 'Custom Threat Detection',\r\n      //   description: 'AI-powered security threat detection',\r\n      //   icon: Security,\r\n      //   path: '/404',\r\n      //   comingSoon: true, // Tag as Coming Soon\r\n      //\r\n      // },\r\n      // {\r\n      //   id: 'security-monitoring',\r\n      //   title: 'Security Monitoring',\r\n      //   description: 'Real-time security monitoring and alerts',\r\n      //   icon: Speed,\r\n      //   path: '/404',\r\n      //   comingSoon: true, // Tag as Coming Soon\r\n      //\r\n      // },\r\n      // {\r\n      //   id: 'access-control',\r\n      //   title: 'Access Control',\r\n      //   description: 'Intelligent access management system',\r\n      //   icon: Code,\r\n      //   path: '/404',\r\n      //   comingSoon: true, // Tag as Coming Soon\r\n      //\r\n      // },\r\n    ],\r\n  },\r\n  solutions: {\r\n    label: 'Solutions',\r\n    items: [\r\n      {\r\n        id: 'enterprise-solutions',\r\n        title: 'Enterprise',\r\n        description: 'Security solutions for large organizations',\r\n        icon: Business,\r\n        path: '/features',\r\n      },\r\n      {\r\n        id: 'startup-solutions',\r\n        title: 'Startups',\r\n        description: 'Scalable security for growing companies',\r\n        icon: Build,\r\n        path: '/features',\r\n      },\r\n      // **Integrated Pricing Page**\r\n      {\r\n        id: 'pricing',\r\n        title: 'Pricing',\r\n        description: 'Choose the plan that fits your needs',\r\n        icon: MonetizationOn,\r\n        path: '/pricing',\r\n      },\r\n    ],\r\n  },\r\n  resources: {\r\n    label: 'Resources',\r\n    items: [\r\n      {\r\n        id: 'documentation',\r\n        title: 'Documentation',\r\n        description: 'Guides and API reference',\r\n        icon: School,\r\n        path: '/docs',\r\n      },\r\n      {\r\n        id: 'support',\r\n        title: 'Support',\r\n        description: 'Get help from our team',\r\n        icon: Help,\r\n        path: '/contact',\r\n      },\r\n      // {\r\n      //   id: 'compliance',\r\n      //   title: 'Compliance',\r\n      //   description: 'Security compliance guides',\r\n      //   icon: Assignment,\r\n      //   path: '/compliance',\r\n      //   comingSoon: true, // Tag as Coming Soon\r\n      //\r\n      // },\r\n      // **Integrated Marketplace Page**\r\n      {\r\n        id: 'marketplace',\r\n        title: 'Marketplace',\r\n        description: 'Explore additional tools and extensions',\r\n        icon: Storefront,\r\n        path: '/marketplace',\r\n      },\r\n    ],\r\n  },\r\n};\r\n\r\n\r\n\r\n// import {\r\n//   Security,\r\n//   Code,\r\n//   Analytics,\r\n//   Business,\r\n//   Build,\r\n//   School,\r\n//   Help,\r\n//   Assignment,\r\n//   Speed,\r\n//   Home as HomeIcon,\r\n// } from '@mui/icons-material';\r\n//\r\n// export const navigationItems = {\r\n//   home: {\r\n//     label: 'Home',\r\n//     items: [\r\n//       {\r\n//         id: 'home', // Unique ID\r\n//         title: 'Home',\r\n//         description: 'Return to homepage',\r\n//         icon: HomeIcon,\r\n//         path: '/',\r\n//       },\r\n//     ],\r\n//   },\r\n//   products: {\r\n//     label: 'Products',\r\n//     items: [\r\n//       {\r\n//         id: 'ai-security-suite',\r\n//         title: 'AI Security Suite',\r\n//         description: 'Complete protection for AI systems',\r\n//         icon: Security,\r\n//         path: '/products/ai-security',\r\n//       },\r\n//       {\r\n//         id: 'api-integration',\r\n//         title: 'API Integration',\r\n//         description: 'Secure API endpoints and access',\r\n//         icon: Code,\r\n//         path: '/products/api',\r\n//       },\r\n//       {\r\n//         id: 'analytics-dashboard',\r\n//         title: 'Analytics Dashboard',\r\n//         description: 'Monitor and analyze security metrics',\r\n//         icon: Analytics,\r\n//         path: '/products/analytics',\r\n//       },\r\n//       {\r\n//         id: 'threat-detection',\r\n//         title: 'Threat Detection',\r\n//         description: 'AI-powered security threat detection',\r\n//         icon: Security,\r\n//         path: '/products/threat-detection',\r\n//       },\r\n//       {\r\n//         id: 'security-monitoring',\r\n//         title: 'Security Monitoring',\r\n//         description: 'Real-time security monitoring and alerts',\r\n//         icon: Speed,\r\n//         path: '/products/monitoring',\r\n//       },\r\n//       {\r\n//         id: 'access-control',\r\n//         title: 'Access Control',\r\n//         description: 'Intelligent access management system',\r\n//         icon: Code,\r\n//         path: '/products/access-control',\r\n//       },\r\n//     ],\r\n//   },\r\n//   solutions: {\r\n//     label: 'Solutions',\r\n//     items: [\r\n//       {\r\n//         id: 'enterprise-solutions',\r\n//         title: 'Enterprise',\r\n//         description: 'Security solutions for large organizations',\r\n//         icon: Business,\r\n//         path: '/solutions/enterprise',\r\n//       },\r\n//       {\r\n//         id: 'startup-solutions',\r\n//         title: 'Startups',\r\n//         description: 'Scalable security for growing companies',\r\n//         icon: Build,\r\n//         path: '/solutions/startups',\r\n//       },\r\n//     ],\r\n//   },\r\n//   resources: {\r\n//     label: 'Resources',\r\n//     items: [\r\n//       {\r\n//         id: 'documentation',\r\n//         title: 'Documentation',\r\n//         description: 'Guides and API reference',\r\n//         icon: School,\r\n//         path: '/docs',\r\n//       },\r\n//       {\r\n//         id: 'support',\r\n//         title: 'Support',\r\n//         description: 'Get help from our team',\r\n//         icon: Help,\r\n//         path: '/support',\r\n//       },\r\n//       {\r\n//         id: 'compliance',\r\n//         title: 'Compliance',\r\n//         description: 'Security compliance guides',\r\n//         icon: Assignment,\r\n//         path: '/compliance',\r\n//       },\r\n//     ],\r\n//   },\r\n// };\r\n\r\n\r\n\r\n\r\n// // src/components/Header/navigationData.js\r\n// import {\r\n//   Security,\r\n//   Code,\r\n//   Analytics,\r\n//   Business,\r\n//   Build,\r\n//   School,\r\n//   Help,\r\n//   Assignment,\r\n//   Speed,\r\n// } from '@mui/icons-material';\r\n//\r\n// export const navigationItems = {\r\n//   products: {\r\n//     label: 'Products',\r\n//     items: [\r\n//       {\r\n//         id: 'ai-security-suite', // Unique ID\r\n//         title: 'AI Security Suite',\r\n//         description: 'Complete protection for AI systems',\r\n//         icon: Security,\r\n//         path: '/products/ai-security',\r\n//       },\r\n//       {\r\n//         id: 'api-integration',\r\n//         title: 'API Integration',\r\n//         description: 'Secure API endpoints and access',\r\n//         icon: Code,\r\n//         path: '/products/api',\r\n//       },\r\n//       {\r\n//         id: 'analytics-dashboard',\r\n//         title: 'Analytics Dashboard',\r\n//         description: 'Monitor and analyze security metrics',\r\n//         icon: Analytics,\r\n//         path: '/products/analytics',\r\n//       },\r\n//       {\r\n//         id: 'threat-detection',\r\n//         title: 'Threat Detection',\r\n//         description: 'AI-powered security threat detection',\r\n//         icon: Security,\r\n//         path: '/products/threat-detection',\r\n//       },\r\n//       {\r\n//         id: 'security-monitoring',\r\n//         title: 'Security Monitoring',\r\n//         description: 'Real-time security monitoring and alerts',\r\n//         icon: Speed,\r\n//         path: '/products/monitoring',\r\n//       },\r\n//       {\r\n//         id: 'access-control',\r\n//         title: 'Access Control',\r\n//         description: 'Intelligent access management system',\r\n//         icon: Code,\r\n//         path: '/products/access-control',\r\n//       },\r\n//     ],\r\n//   },\r\n//   solutions: {\r\n//     label: 'Solutions',\r\n//     items: [\r\n//       {\r\n//         id: 'enterprise-solutions',\r\n//         title: 'Enterprise',\r\n//         description: 'Security solutions for large organizations',\r\n//         icon: Business,\r\n//         path: '/solutions/enterprise',\r\n//       },\r\n//       {\r\n//         id: 'startup-solutions',\r\n//         title: 'Startups',\r\n//         description: 'Scalable security for growing companies',\r\n//         icon: Build,\r\n//         path: '/solutions/startups',\r\n//       },\r\n//     ],\r\n//   },\r\n//   resources: {\r\n//     label: 'Resources',\r\n//     items: [\r\n//       {\r\n//         id: 'documentation',\r\n//         title: 'Documentation',\r\n//         description: 'Guides and API reference',\r\n//         icon: School,\r\n//         path: '/docs',\r\n//       },\r\n//       {\r\n//         id: 'support',\r\n//         title: 'Support',\r\n//         description: 'Get help from our team',\r\n//         icon: Help,\r\n//         path: '/support',\r\n//       },\r\n//       {\r\n//         id: 'compliance',\r\n//         title: 'Compliance',\r\n//         description: 'Security compliance guides',\r\n//         icon: Assignment,\r\n//         path: '/compliance',\r\n//       },\r\n//     ],\r\n//   },\r\n// };\r\n\r\n\r\n\r\n// // src/components/Header/navigationData.js\r\n// import {\r\n//   Security,\r\n//   Code,\r\n//   Analytics,\r\n//   Business,\r\n//   Build,\r\n//   School,\r\n//   Help,\r\n//   Assignment,\r\n//   Speed,\r\n// } from '@mui/icons-material';\r\n//\r\n// /**\r\n//  * Each navigation item now includes a unique `id`.\r\n//  * It's recommended to use unique identifiers to prevent key conflicts in React.\r\n//  * You can use UUIDs or any other unique string generation method if needed.\r\n//  */\r\n// export const navigationItems = {\r\n//   products: {\r\n//     label: 'Products',\r\n//     items: [\r\n//       {\r\n//         id: 'ai-security-suite', // Unique ID\r\n//         title: 'AI Security Suite',\r\n//         description: 'Complete protection for AI systems',\r\n//         icon: Security,\r\n//         path: '/products/ai-security',\r\n//       },\r\n//       {\r\n//         id: 'api-integration',\r\n//         title: 'API Integration',\r\n//         description: 'Secure API endpoints and access',\r\n//         icon: Code,\r\n//         path: '/products/api',\r\n//       },\r\n//       {\r\n//         id: 'analytics-dashboard',\r\n//         title: 'Analytics Dashboard',\r\n//         description: 'Monitor and analyze security metrics',\r\n//         icon: Analytics,\r\n//         path: '/products/analytics',\r\n//       },\r\n//       {\r\n//         id: 'threat-detection',\r\n//         title: 'Threat Detection',\r\n//         description: 'AI-powered security threat detection',\r\n//         icon: Security,\r\n//         path: '/products/threat-detection',\r\n//       },\r\n//       {\r\n//         id: 'security-monitoring',\r\n//         title: 'Security Monitoring',\r\n//         description: 'Real-time security monitoring and alerts',\r\n//         icon: Speed,\r\n//         path: '/products/monitoring',\r\n//       },\r\n//       {\r\n//         id: 'access-control',\r\n//         title: 'Access Control',\r\n//         description: 'Intelligent access management system',\r\n//         icon: Code,\r\n//         path: '/products/access-control',\r\n//       },\r\n//     ],\r\n//   },\r\n//   solutions: {\r\n//     label: 'Solutions',\r\n//     items: [\r\n//       {\r\n//         id: 'enterprise-solutions',\r\n//         title: 'Enterprise',\r\n//         description: 'Security solutions for large organizations',\r\n//         icon: Business,\r\n//         path: '/solutions/enterprise',\r\n//       },\r\n//       {\r\n//         id: 'startup-solutions',\r\n//         title: 'Startups',\r\n//         description: 'Scalable security for growing companies',\r\n//         icon: Build,\r\n//         path: '/solutions/startups',\r\n//       },\r\n//     ],\r\n//   },\r\n//   resources: {\r\n//     label: 'Resources',\r\n//     items: [\r\n//       {\r\n//         id: 'documentation',\r\n//         title: 'Documentation',\r\n//         description: 'Guides and API reference',\r\n//         icon: School,\r\n//         path: '/docs',\r\n//       },\r\n//       {\r\n//         id: 'support',\r\n//         title: 'Support',\r\n//         description: 'Get help from our team',\r\n//         icon: Help,\r\n//         path: '/support',\r\n//       },\r\n//       {\r\n//         id: 'compliance',\r\n//         title: 'Compliance',\r\n//         description: 'Security compliance guides',\r\n//         icon: Assignment,\r\n//         path: '/compliance',\r\n//       },\r\n//     ],\r\n//   },\r\n// };\r\n\r\n// // src/components/Header/navigationData.js\r\n// import {\r\n//   Security,\r\n//   Code,\r\n//   Analytics,\r\n//   Business,\r\n//   Build,\r\n//   School,\r\n//   Help,\r\n//   Assignment,\r\n//   Speed\r\n// } from '@mui/icons-material';\r\n//\r\n// export const navigationItems = {\r\n//   products: {\r\n//     label: 'Products',\r\n//     items: [\r\n//       {\r\n//         title: 'AI Security Suite',\r\n//         description: 'Complete protection for AI systems',\r\n//         icon: Security,\r\n//         path: '/products/ai-security',\r\n//       },\r\n//       {\r\n//         title: 'API Integration',\r\n//         description: 'Secure API endpoints and access',\r\n//         icon: Code,\r\n//         path: '/products/api',\r\n//       },\r\n//       {\r\n//         title: 'Analytics Dashboard',\r\n//         description: 'Monitor and analyze security metrics',\r\n//         icon: Analytics,\r\n//         path: '/products/analytics',\r\n//       },\r\n//       {\r\n//         title: 'Threat Detection',\r\n//         description: 'AI-powered security threat detection',\r\n//         icon: Security,\r\n//         path: '/products/threat-detection',\r\n//       },\r\n//       {\r\n//         title: 'Security Monitoring',\r\n//         description: 'Real-time security monitoring and alerts',\r\n//         icon: Speed,\r\n//         path: '/products/monitoring',\r\n//       },\r\n//       {\r\n//         title: 'Access Control',\r\n//         description: 'Intelligent access management system',\r\n//         icon: Code,\r\n//         path: '/products/access-control',\r\n//       }\r\n//     ],\r\n//   },\r\n//   solutions: {\r\n//     label: 'Solutions',\r\n//     items: [\r\n//       {\r\n//         title: 'Enterprise',\r\n//         description: 'Security solutions for large organizations',\r\n//         icon: Business,\r\n//         path: '/solutions/enterprise',\r\n//       },\r\n//       {\r\n//         title: 'Startups',\r\n//         description: 'Scalable security for growing companies',\r\n//         icon: Build,\r\n//         path: '/solutions/startups',\r\n//       },\r\n//     ],\r\n//   },\r\n//   resources: {\r\n//     label: 'Resources',\r\n//     items: [\r\n//       {\r\n//         title: 'Documentation',\r\n//         description: 'Guides and API reference',\r\n//         icon: School,\r\n//         path: '/docs',\r\n//       },\r\n//       {\r\n//         title: 'Support',\r\n//         description: 'Get help from our team',\r\n//         icon: Help,\r\n//         path: '/support',\r\n//       },\r\n//       {\r\n//         title: 'Compliance',\r\n//         description: 'Security compliance guides',\r\n//         icon: Assignment,\r\n//         path: '/compliance',\r\n//       },\r\n//     ],\r\n//   },\r\n// };\r\n//\r\n","// // src/components/Header/NavigationMenu.js\r\n//\r\n// import React, { useRef, useEffect } from 'react';\r\n// import {\r\n//   Box,\r\n//   Button,\r\n//   Popper,\r\n//   Paper,\r\n//   Fade,\r\n//   Typography,\r\n//   Grid,\r\n//   ClickAwayListener,\r\n// } from '@mui/material';\r\n// import { useHeaderContext } from '../../contexts/HeaderContext';\r\n// import { Link as RouterLink } from 'react-router-dom';\r\n// import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';\r\n// import { motion } from 'framer-motion'; // Correctly imported\r\n// import { navigationItems } from './navigationData';\r\n// import { headerStyles } from './styles';\r\n//\r\n// const NavigationMenu = () => {\r\n//   const { activeMenu, setActiveMenu, closeAllMenus } = useHeaderContext();\r\n//   const [anchorEl, setAnchorEl] = React.useState(null);\r\n//   const timeoutRef = useRef(null);\r\n//\r\n//   // Clean up timeout on unmount to prevent memory leaks\r\n//   useEffect(() => {\r\n//     return () => {\r\n//       if (timeoutRef.current) {\r\n//         clearTimeout(timeoutRef.current);\r\n//       }\r\n//     };\r\n//   }, []);\r\n//\r\n//   // Handle mouse entering a menu button\r\n//   const handleMouseEnter = (event, menuKey) => {\r\n//     if (timeoutRef.current) {\r\n//       clearTimeout(timeoutRef.current);\r\n//       timeoutRef.current = null;\r\n//     }\r\n//     setAnchorEl(event.currentTarget);\r\n//     setActiveMenu(menuKey);\r\n//   };\r\n//\r\n//   // Handle mouse leaving a menu button\r\n//   const handleMouseLeave = () => {\r\n//     timeoutRef.current = setTimeout(() => {\r\n//       setActiveMenu(null);\r\n//       setAnchorEl(null);\r\n//     }, 200); // Adjust delay as needed\r\n//   };\r\n//\r\n//   // Handle mouse entering the Popper\r\n//   const handlePopperMouseEnter = () => {\r\n//     // Clear timeout to keep the menu open while hovering over it\r\n//     if (timeoutRef.current) {\r\n//       clearTimeout(timeoutRef.current);\r\n//       timeoutRef.current = null;\r\n//     }\r\n//   };\r\n//\r\n//   // Handle mouse leaving the Popper\r\n//   const handlePopperMouseLeave = () => {\r\n//     // Set a timeout to close the menu when the cursor leaves the Popper\r\n//     timeoutRef.current = setTimeout(() => {\r\n//       setActiveMenu(null);\r\n//       setAnchorEl(null);\r\n//     }, 200); // Same delay as handleMouseLeave\r\n//   };\r\n//\r\n//   // Handle click on a menu button (for accessibility and touch devices)\r\n//   const handleClick = (event, menuKey) => {\r\n//     if (activeMenu === menuKey) {\r\n//       setActiveMenu(null);\r\n//       setAnchorEl(null);\r\n//     } else {\r\n//       setAnchorEl(event.currentTarget);\r\n//       setActiveMenu(menuKey);\r\n//     }\r\n//   };\r\n//\r\n//   // Handle keyboard events for accessibility\r\n//   const handleKeyDown = (event, menuKey) => {\r\n//     if (event.key === 'Enter' || event.key === ' ') {\r\n//       event.preventDefault();\r\n//       handleClick(event, menuKey);\r\n//     }\r\n//   };\r\n//\r\n//   // Handle clicking away from the menu to close it\r\n//   const handleClickAway = () => {\r\n//     closeAllMenus();\r\n//     if (timeoutRef.current) {\r\n//       clearTimeout(timeoutRef.current);\r\n//       timeoutRef.current = null;\r\n//     }\r\n//   };\r\n//\r\n//   return (\r\n//     <Box sx={headerStyles.nav}>\r\n//       {Object.entries(navigationItems).map(([menuKey, section]) => (\r\n//         <Box\r\n//           key={menuKey}\r\n//           sx={{ display: 'inline-block', position: 'relative' }}\r\n//           onMouseEnter={(e) => handleMouseEnter(e, menuKey)}\r\n//           onMouseLeave={handleMouseLeave}\r\n//         >\r\n//           <Button\r\n//             color=\"inherit\"\r\n//             endIcon={<KeyboardArrowDownIcon />}\r\n//             sx={[\r\n//               headerStyles.navButton,\r\n//               activeMenu === menuKey && headerStyles.navButtonActive,\r\n//             ]}\r\n//             aria-controls={activeMenu === menuKey ? `${menuKey}-menu` : undefined}\r\n//             aria-haspopup=\"true\"\r\n//             aria-expanded={activeMenu === menuKey ? 'true' : undefined}\r\n//             onClick={(e) => handleClick(e, menuKey)}\r\n//             onKeyDown={(e) => handleKeyDown(e, menuKey)}\r\n//           >\r\n//             {section.label}\r\n//           </Button>\r\n//\r\n//           <Popper\r\n//             id={`${menuKey}-menu`}\r\n//             open={activeMenu === menuKey}\r\n//             anchorEl={anchorEl}\r\n//             placement=\"bottom-start\"\r\n//             transition\r\n//             disablePortal={false}\r\n//             sx={headerStyles.popper}\r\n//             onMouseEnter={handlePopperMouseEnter}\r\n//             onMouseLeave={handlePopperMouseLeave}\r\n//           >\r\n//             {({ TransitionProps }) => (\r\n//               <Fade {...TransitionProps} timeout={200}>\r\n//                 <Paper sx={headerStyles.dropdownPaper}>\r\n//                   <ClickAwayListener onClickAway={handleClickAway}>\r\n//                     <Grid container spacing={2} padding={2}>\r\n//                       {section.items.map((item, index) => (\r\n//                         <Grid\r\n//                           item\r\n//                           xs={12}\r\n//                           md={4}\r\n//                           key={`${menuKey}-${item.id}`}\r\n//                         >\r\n//                           <motion.div\r\n//                             initial={{ opacity: 0, y: 20 }}\r\n//                             animate={{ opacity: 1, y: 0 }}\r\n//                             transition={{\r\n//                               delay: index * 0.05, // Staggered animation\r\n//                               duration: 0.3,\r\n//                             }}\r\n//                           >\r\n//                             <Button\r\n//                               component={RouterLink}\r\n//                               to={item.path}\r\n//                               onClick={handleClickAway}\r\n//                               sx={headerStyles.dropdownItem}\r\n//                               fullWidth\r\n//                               aria-label={item.title}\r\n//                             >\r\n//                               <Box sx={headerStyles.iconWrapper}>\r\n//                                 <item.icon />\r\n//                               </Box>\r\n//                               <Box textAlign=\"left\">\r\n//                                 <Typography variant=\"subtitle1\">\r\n//                                   {item.title}\r\n//                                 </Typography>\r\n//                                 <Typography\r\n//                                   variant=\"body2\"\r\n//                                   color=\"text.secondary\"\r\n//                                 >\r\n//                                   {item.description}\r\n//                                 </Typography>\r\n//                               </Box>\r\n//                             </Button>\r\n//                           </motion.div>\r\n//                         </Grid>\r\n//                       ))}\r\n//                     </Grid>\r\n//                   </ClickAwayListener>\r\n//                 </Paper>\r\n//               </Fade>\r\n//             )}\r\n//           </Popper>\r\n//         </Box>\r\n//       ))}\r\n//     </Box>\r\n//   );\r\n// };\r\n//\r\n// // Use React.memo for performance optimization\r\n// export default React.memo(NavigationMenu);\r\n\r\n\r\n\r\n\r\n// // src/components/Header/NavigationMenu.js\r\n//\r\n// import React, { useRef, useEffect } from 'react';\r\n// import {\r\n//   Box,\r\n//   Button,\r\n//   Popper,\r\n//   Paper,\r\n//   Fade,\r\n//   Typography,\r\n//   Grid,\r\n//   ClickAwayListener,\r\n// } from '@mui/material';\r\n// import { useHeaderContext } from '../../contexts/HeaderContext';\r\n// import { Link as RouterLink } from 'react-router-dom';\r\n// import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';\r\n// import { motion } from 'framer-motion'; // Correctly imported\r\n// import { navigationItems } from './navigationData';\r\n// import { headerStyles } from './styles';\r\n//\r\n// const NavigationMenu = () => {\r\n//   const { activeMenu, setActiveMenu, closeAllMenus } = useHeaderContext();\r\n//   const [anchorEl, setAnchorEl] = React.useState(null);\r\n//   const timeoutRef = useRef(null);\r\n//\r\n//   // Clean up timeout on unmount to prevent memory leaks\r\n//   useEffect(() => {\r\n//     return () => {\r\n//       if (timeoutRef.current) {\r\n//         clearTimeout(timeoutRef.current);\r\n//       }\r\n//     };\r\n//   }, []);\r\n//\r\n//   // Handle mouse entering a menu button\r\n//   const handleMouseEnter = (event, menuKey) => {\r\n//     if (timeoutRef.current) {\r\n//       clearTimeout(timeoutRef.current);\r\n//       timeoutRef.current = null;\r\n//     }\r\n//     setAnchorEl(event.currentTarget);\r\n//     setActiveMenu(menuKey);\r\n//   };\r\n//\r\n//   // Handle mouse leaving a menu button\r\n//   const handleMouseLeave = () => {\r\n//     timeoutRef.current = setTimeout(() => {\r\n//       setActiveMenu(null);\r\n//       setAnchorEl(null);\r\n//     }, 200); // Adjust delay as needed\r\n//   };\r\n//\r\n//   // Handle mouse entering the Popper\r\n//   const handlePopperMouseEnter = () => {\r\n//     // Clear timeout to keep the menu open while hovering over it\r\n//     if (timeoutRef.current) {\r\n//       clearTimeout(timeoutRef.current);\r\n//       timeoutRef.current = null;\r\n//     }\r\n//   };\r\n//\r\n//   // Handle mouse leaving the Popper\r\n//   const handlePopperMouseLeave = () => {\r\n//     // Set a timeout to close the menu when the cursor leaves the Popper\r\n//     timeoutRef.current = setTimeout(() => {\r\n//       setActiveMenu(null);\r\n//       setAnchorEl(null);\r\n//     }, 200); // Same delay as handleMouseLeave\r\n//   };\r\n//\r\n//   // Handle click on a menu button (for accessibility and touch devices)\r\n//   const handleClick = (event, menuKey) => {\r\n//     if (activeMenu === menuKey) {\r\n//       setActiveMenu(null);\r\n//       setAnchorEl(null);\r\n//     } else {\r\n//       setAnchorEl(event.currentTarget);\r\n//       setActiveMenu(menuKey);\r\n//     }\r\n//   };\r\n//\r\n//   // Handle keyboard events for accessibility\r\n//   const handleKeyDown = (event, menuKey) => {\r\n//     if (event.key === 'Enter' || event.key === ' ') {\r\n//       event.preventDefault();\r\n//       handleClick(event, menuKey);\r\n//     }\r\n//   };\r\n//\r\n//   // Handle clicking away from the menu to close it\r\n//   const handleClickAway = () => {\r\n//     closeAllMenus();\r\n//     if (timeoutRef.current) {\r\n//       clearTimeout(timeoutRef.current);\r\n//       timeoutRef.current = null;\r\n//     }\r\n//   };\r\n//\r\n//   // Ref to track focus on dropdown items\r\n//   const firstDropdownItemRef = useRef(null);\r\n//\r\n//   // Shift focus to the first dropdown item when the menu opens\r\n//   useEffect(() => {\r\n//     if (activeMenu && firstDropdownItemRef.current) {\r\n//       firstDropdownItemRef.current.focus();\r\n//     }\r\n//   }, [activeMenu]);\r\n//   return (\r\n//     <Box sx={headerStyles.nav}>\r\n//       {Object.entries(navigationItems).map(([menuKey, section]) => (\r\n//         <Box\r\n//           key={menuKey}\r\n//           sx={{ display: 'inline-block', position: 'relative' }}\r\n//           onMouseEnter={(e) => handleMouseEnter(e, menuKey)}\r\n//           onMouseLeave={handleMouseLeave}\r\n//         >\r\n//           <Button\r\n//             color=\"inherit\"\r\n//             endIcon={<KeyboardArrowDownIcon />}\r\n//             sx={{\r\n//               ...headerStyles.navButton,\r\n//               ...(activeMenu === menuKey && headerStyles.navButtonActive),\r\n//             }}\r\n//             aria-controls={activeMenu === menuKey ? `${menuKey}-menu` : undefined}\r\n//             aria-haspopup=\"true\"\r\n//             aria-expanded={activeMenu === menuKey ? 'true' : undefined}\r\n//             onClick={(e) => handleClick(e, menuKey)}\r\n//             onKeyDown={(e) => handleKeyDown(e, menuKey)}\r\n//           >\r\n//             {section.label}\r\n//           </Button>\r\n//\r\n//           <Popper\r\n//             id={`${menuKey}-menu`}\r\n//             open={activeMenu === menuKey}\r\n//             anchorEl={anchorEl}\r\n//             placement=\"bottom-start\"\r\n//             transition\r\n//             disablePortal={false}\r\n//             sx={headerStyles.popper}\r\n//             onMouseEnter={handlePopperMouseEnter}\r\n//             onMouseLeave={handlePopperMouseLeave}\r\n//           >\r\n//             {({ TransitionProps }) => (\r\n//               <Fade {...TransitionProps} timeout={200}>\r\n//                 <Paper sx={headerStyles.dropdownPaper}>\r\n//                   <ClickAwayListener onClickAway={handleClickAway}>\r\n//                     <Grid container spacing={2} padding={2}>\r\n//                       {section.items.map((item, index) => (\r\n//                         <Grid\r\n//                           item\r\n//                           xs={12}\r\n//                           md={4}\r\n//                           key={`${menuKey}-${item.id}`}\r\n//                         >\r\n//                           <motion.div\r\n//                             initial={{ opacity: 0, y: 20 }}\r\n//                             animate={{ opacity: 1, y: 0 }}\r\n//                             transition={{\r\n//                               delay: index * 0.05,\r\n//                               duration: 0.3,\r\n//                             }}\r\n//                           >\r\n//                             <Button\r\n//                               component={RouterLink}\r\n//                               to={item.path}\r\n//                               onClick={handleClickAway}\r\n//                               sx={headerStyles.dropdownItem}\r\n//                               fullWidth\r\n//                               aria-label={item.title}\r\n//                               ref={index === 0 ? firstDropdownItemRef : null} // Assign ref to first item\r\n//                             >\r\n//                               <Box sx={headerStyles.iconWrapper}>\r\n//                                 <item.icon />\r\n//                               </Box>\r\n//                               <Box textAlign=\"left\">\r\n//                                 <Typography variant=\"subtitle1\">\r\n//                                   {item.title}\r\n//                                 </Typography>\r\n//                                 <Typography\r\n//                                   variant=\"body2\"\r\n//                                   color=\"text.secondary\"\r\n//                                 >\r\n//                                   {item.description}\r\n//                                 </Typography>\r\n//                               </Box>\r\n//                             </Button>\r\n//                           </motion.div>\r\n//                         </Grid>\r\n//                       ))}\r\n//                     </Grid>\r\n//                   </ClickAwayListener>\r\n//                 </Paper>\r\n//               </Fade>\r\n//             )}\r\n//           </Popper>\r\n//         </Box>\r\n//       ))}\r\n//     </Box>\r\n//   );\r\n// };\r\n//\r\n// // Use React.memo for performance optimization\r\n// export default React.memo(NavigationMenu);\r\n\r\n\r\n// // src/components/Header/NavigationMenu.js\r\n//\r\n// import React, { useRef, useEffect } from 'react';\r\n// import {\r\n//   Box,\r\n//   Button,\r\n//   Popper,\r\n//   Paper,\r\n//   Fade,\r\n//   Typography,\r\n//   Grid,\r\n//   ClickAwayListener,\r\n// } from '@mui/material';\r\n// import { useHeaderContext } from '../../contexts/HeaderContext';\r\n// import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';\r\n// import { motion } from 'framer-motion';\r\n// import { navigationItems } from './navigationData';\r\n// import { headerStyles } from './styles';\r\n// import { Link as RouterLink } from 'react-router-dom';\r\n//\r\n// const NavigationMenu = () => {\r\n//   const { activeMenu, setActiveMenu, closeAllMenus } = useHeaderContext();\r\n//   const [anchorEl, setAnchorEl] = React.useState(null);\r\n//   const timeoutRef = useRef(null);\r\n//\r\n//   // Clean up timeout on unmount to prevent memory leaks\r\n//   useEffect(() => {\r\n//     return () => {\r\n//       if (timeoutRef.current) {\r\n//         clearTimeout(timeoutRef.current);\r\n//       }\r\n//     };\r\n//   }, []);\r\n//\r\n//   // Handle mouse entering a menu button\r\n//   const handleMouseEnter = (event, menuKey) => {\r\n//     if (timeoutRef.current) {\r\n//       clearTimeout(timeoutRef.current);\r\n//       timeoutRef.current = null;\r\n//     }\r\n//     setAnchorEl(event.currentTarget);\r\n//     setActiveMenu(menuKey);\r\n//   };\r\n//\r\n//   // Handle mouse leaving a menu button\r\n//   const handleMouseLeave = () => {\r\n//     timeoutRef.current = setTimeout(() => {\r\n//       setActiveMenu(null);\r\n//       setAnchorEl(null);\r\n//     }, 200); // Delay to allow cursor to move to Popper without closing\r\n//   };\r\n//\r\n//   // Handle mouse entering the Popper\r\n//   const handlePopperMouseEnter = () => {\r\n//     if (timeoutRef.current) {\r\n//       clearTimeout(timeoutRef.current);\r\n//       timeoutRef.current = null;\r\n//     }\r\n//   };\r\n//\r\n//   // Handle mouse leaving the Popper\r\n//   const handlePopperMouseLeave = () => {\r\n//     timeoutRef.current = setTimeout(() => {\r\n//       setActiveMenu(null);\r\n//       setAnchorEl(null);\r\n//     }, 200); // Same delay as handleMouseLeave\r\n//   };\r\n//\r\n//   // Handle click on a menu button\r\n//   const handleClick = (event, menuKey) => {\r\n//     if (activeMenu === menuKey) {\r\n//       setActiveMenu(null);\r\n//       setAnchorEl(null);\r\n//     } else {\r\n//       setAnchorEl(event.currentTarget);\r\n//       setActiveMenu(menuKey);\r\n//     }\r\n//   };\r\n//\r\n//   // Handle keyboard events for accessibility\r\n//   const handleKeyDown = (event, menuKey) => {\r\n//     if (event.key === 'Enter' || event.key === ' ') {\r\n//       event.preventDefault();\r\n//       handleClick(event, menuKey);\r\n//     }\r\n//   };\r\n//\r\n//   // Handle clicking away from the menu\r\n//   const handleClickAway = () => {\r\n//     closeAllMenus();\r\n//     if (timeoutRef.current) {\r\n//       clearTimeout(timeoutRef.current);\r\n//       timeoutRef.current = null;\r\n//     }\r\n//   };\r\n//\r\n//   return (\r\n//     <Box sx={headerStyles.nav}>\r\n//       {Object.entries(navigationItems).map(([menuKey, section]) => (\r\n//         <Box\r\n//           key={menuKey}\r\n//           sx={{ display: 'inline-block', position: 'relative' }}\r\n//           onMouseEnter={(e) => handleMouseEnter(e, menuKey)}\r\n//           onMouseLeave={handleMouseLeave}\r\n//         >\r\n//           <Button\r\n//             color=\"inherit\"\r\n//             endIcon={<KeyboardArrowDownIcon />}\r\n//             sx={{\r\n//               ...headerStyles.navButton,\r\n//               ...(activeMenu === menuKey && headerStyles.navButtonActive),\r\n//             }}\r\n//             aria-controls={activeMenu === menuKey ? `${menuKey}-menu` : undefined}\r\n//             aria-haspopup=\"true\"\r\n//             aria-expanded={activeMenu === menuKey ? 'true' : undefined}\r\n//             onClick={(e) => handleClick(e, menuKey)}\r\n//             onKeyDown={(e) => handleKeyDown(e, menuKey)}\r\n//           >\r\n//             {section.label}\r\n//           </Button>\r\n//\r\n//           <Popper\r\n//             id={`${menuKey}-menu`}\r\n//             open={activeMenu === menuKey}\r\n//             anchorEl={anchorEl}\r\n//             placement=\"bottom-start\"\r\n//             transition\r\n//             disablePortal={false}\r\n//             sx={headerStyles.popper}\r\n//             onMouseEnter={handlePopperMouseEnter}\r\n//             onMouseLeave={handlePopperMouseLeave}\r\n//           >\r\n//             {({ TransitionProps }) => (\r\n//               <Fade {...TransitionProps} timeout={200}>\r\n//                 <Paper sx={headerStyles.dropdownPaper}>\r\n//                   <ClickAwayListener onClickAway={handleClickAway}>\r\n//                     <Grid container spacing={2} padding={2}>\r\n//                       {section.items.map((item, index) => (\r\n//                         <Grid\r\n//                           item\r\n//                           xs={12}\r\n//                           md={4}\r\n//                           key={`${menuKey}-${item.id}`}\r\n//                         >\r\n//                           <motion.div\r\n//                             initial={{ opacity: 0, y: 20 }}\r\n//                             animate={{ opacity: 1, y: 0 }}\r\n//                             transition={{\r\n//                               delay: index * 0.05, // Staggered animation\r\n//                               duration: 0.3,\r\n//                             }}\r\n//                           >\r\n//                             <Button\r\n//                               component={RouterLink}\r\n//                               to={item.path}\r\n//                               onClick={handleClickAway}\r\n//                               sx={headerStyles.dropdownItem}\r\n//                               fullWidth\r\n//                               aria-label={item.title}\r\n//                             >\r\n//                               <Box sx={headerStyles.iconWrapper}>\r\n//                                 <item.icon />\r\n//                               </Box>\r\n//                               <Box textAlign=\"left\">\r\n//                                 <Typography variant=\"subtitle1\">\r\n//                                   {item.title}\r\n//                                 </Typography>\r\n//                                 <Typography\r\n//                                   variant=\"body2\"\r\n//                                   color=\"text.secondary\"\r\n//                                 >\r\n//                                   {item.description}\r\n//                                 </Typography>\r\n//                               </Box>\r\n//                             </Button>\r\n//                           </motion.div>\r\n//                         </Grid>\r\n//                       ))}\r\n//                     </Grid>\r\n//                   </ClickAwayListener>\r\n//                 </Paper>\r\n//               </Fade>\r\n//             )}\r\n//           </Popper>\r\n//         </Box>\r\n//       ))}\r\n//     </Box>\r\n//   );\r\n// };\r\n//\r\n// // React.memo for performance optimization to prevent unnecessary re-renders\r\n// export default React.memo(NavigationMenu);\r\n\r\n\r\n\r\n// // src/components/Header/NavigationMenu.js\r\n//\r\n// import React, { useRef, useEffect } from 'react';\r\n// import {\r\n//   Box,\r\n//   Button,\r\n//   Popper,\r\n//   Paper,\r\n//   Fade,\r\n//   Typography,\r\n//   Grid,\r\n//   ClickAwayListener,\r\n// } from '@mui/material';\r\n// import { Link as RouterLink } from 'react-router-dom';\r\n// import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';\r\n// import { motion } from 'framer-motion';\r\n// import { navigationItems } from './navigationData';\r\n// import { headerStyles } from './styles';\r\n// import { useHeaderContext } from '../../contexts/HeaderContext'; // Ensure correct import path\r\n//\r\n// const NavigationMenu = () => {\r\n//   const { activeMenu, setActiveMenu, closeAllMenus } = useHeaderContext();\r\n//   const [anchorEl, setAnchorEl] = React.useState(null);\r\n//   const timeoutRef = useRef(null);\r\n//\r\n//   // Clean up timeout on unmount to prevent memory leaks\r\n//   useEffect(() => {\r\n//     return () => {\r\n//       if (timeoutRef.current) {\r\n//         clearTimeout(timeoutRef.current);\r\n//       }\r\n//     };\r\n//   }, []);\r\n//\r\n//   // Handle mouse entering a menu button\r\n//   const handleMouseEnter = (event, menuKey) => {\r\n//     if (timeoutRef.current) {\r\n//       clearTimeout(timeoutRef.current);\r\n//       timeoutRef.current = null;\r\n//     }\r\n//     setAnchorEl(event.currentTarget);\r\n//     setActiveMenu(menuKey);\r\n//   };\r\n//\r\n//   // Handle mouse leaving a menu button\r\n//   const handleMouseLeave = () => {\r\n//     timeoutRef.current = setTimeout(() => {\r\n//       setActiveMenu(null);\r\n//       setAnchorEl(null);\r\n//     }, 200); // Adjust delay as needed\r\n//   };\r\n//\r\n//   // Handle mouse entering the Popper\r\n//   const handlePopperMouseEnter = () => {\r\n//     if (timeoutRef.current) {\r\n//       clearTimeout(timeoutRef.current);\r\n//       timeoutRef.current = null;\r\n//     }\r\n//   };\r\n//\r\n//   // Handle mouse leaving the Popper\r\n//   const handlePopperMouseLeave = () => {\r\n//     timeoutRef.current = setTimeout(() => {\r\n//       setActiveMenu(null);\r\n//       setAnchorEl(null);\r\n//     }, 200); // Adjust delay as needed\r\n//   };\r\n//\r\n//   // Handle click on a menu button\r\n//   const handleClick = (event, menuKey) => {\r\n//     if (activeMenu === menuKey) {\r\n//       setActiveMenu(null);\r\n//       setAnchorEl(null);\r\n//     } else {\r\n//       setAnchorEl(event.currentTarget);\r\n//       setActiveMenu(menuKey);\r\n//     }\r\n//   };\r\n//\r\n//   // Handle keyboard events for accessibility\r\n//   const handleKeyDown = (event, menuKey) => {\r\n//     if (event.key === 'Enter' || event.key === ' ') {\r\n//       event.preventDefault();\r\n//       handleClick(event, menuKey);\r\n//     }\r\n//   };\r\n//\r\n//   // Handle clicking away from the menu\r\n//   const handleClickAway = () => {\r\n//     closeAllMenus();\r\n//     if (timeoutRef.current) {\r\n//       clearTimeout(timeoutRef.current);\r\n//       timeoutRef.current = null;\r\n//     }\r\n//   };\r\n//\r\n//   return (\r\n//     <Box sx={headerStyles.nav}>\r\n//       {Object.entries(navigationItems).map(([menuKey, section]) => (\r\n//         <Box\r\n//           key={menuKey}\r\n//           sx={{ display: 'inline-block', position: 'relative' }}\r\n//           onMouseEnter={(e) => handleMouseEnter(e, menuKey)}\r\n//           onMouseLeave={handleMouseLeave}\r\n//         >\r\n//           <Button\r\n//             color=\"inherit\"\r\n//             endIcon={<KeyboardArrowDownIcon />}\r\n//             sx={{\r\n//               ...headerStyles.navButton,\r\n//               ...(activeMenu === menuKey && headerStyles.navButtonActive),\r\n//             }}\r\n//             aria-controls={\r\n//               activeMenu === menuKey ? `${menuKey}-menu` : undefined\r\n//             }\r\n//             aria-haspopup=\"true\"\r\n//             aria-expanded={activeMenu === menuKey ? 'true' : undefined}\r\n//             onClick={(e) => handleClick(e, menuKey)}\r\n//             onKeyDown={(e) => handleKeyDown(e, menuKey)}\r\n//           >\r\n//             {section.label}\r\n//           </Button>\r\n//\r\n//           <Popper\r\n//             id={`${menuKey}-menu`}\r\n//             open={activeMenu === menuKey}\r\n//             anchorEl={anchorEl}\r\n//             placement=\"bottom-start\"\r\n//             transition\r\n//             disablePortal={false}\r\n//             sx={headerStyles.popper}\r\n//             onMouseEnter={handlePopperMouseEnter}\r\n//             onMouseLeave={handlePopperMouseLeave}\r\n//           >\r\n//             {({ TransitionProps }) => (\r\n//               <Fade {...TransitionProps} timeout={200}>\r\n//                 <Paper sx={headerStyles.dropdownPaper}>\r\n//                   <ClickAwayListener onClickAway={handleClickAway}>\r\n//                     <Grid container spacing={2} padding={2}>\r\n//                       {section.items.map((item, index) => (\r\n//                         <Grid\r\n//                           item\r\n//                           xs={12}\r\n//                           md={4}\r\n//                           key={`${menuKey}-${item.id}`}\r\n//                         >\r\n//                           <motion.div\r\n//                             initial={{ opacity: 0, y: 20 }}\r\n//                             animate={{ opacity: 1, y: 0 }}\r\n//                             transition={{\r\n//                               delay: index * 0.05,\r\n//                               duration: 0.3,\r\n//                             }}\r\n//                           >\r\n//                             <Button\r\n//                               component={RouterLink}\r\n//                               to={item.path}\r\n//                               onClick={handleClickAway}\r\n//                               sx={headerStyles.dropdownItem}\r\n//                               fullWidth\r\n//                               aria-label={item.title}\r\n//                             >\r\n//                               <Box sx={headerStyles.iconWrapper}>\r\n//                                 <item.icon />\r\n//                               </Box>\r\n//                               <Box textAlign=\"left\">\r\n//                                 <Typography variant=\"subtitle1\">\r\n//                                   {item.title}\r\n//                                 </Typography>\r\n//                                 <Typography\r\n//                                   variant=\"body2\"\r\n//                                   color=\"text.secondary\"\r\n//                                 >\r\n//                                   {item.description}\r\n//                                 </Typography>\r\n//                               </Box>\r\n//                             </Button>\r\n//                           </motion.div>\r\n//                         </Grid>\r\n//                       ))}\r\n//                     </Grid>\r\n//                   </ClickAwayListener>\r\n//                 </Paper>\r\n//               </Fade>\r\n//             )}\r\n//           </Popper>\r\n//         </Box>\r\n//       ))}\r\n//     </Box>\r\n//   );\r\n// };\r\n//\r\n// // Use React.memo for performance optimization\r\n// export default React.memo(NavigationMenu);\r\n\r\n\r\n\r\n// // src/components/Header/NavigationMenu.js\r\n//\r\n// import React, { useRef, useEffect } from 'react';\r\n// import {\r\n//   Box,\r\n//   Button,\r\n//   Popper,\r\n//   Paper,\r\n//   Fade,\r\n//   Typography,\r\n//   Grid,\r\n//   ClickAwayListener,\r\n// } from '@mui/material';\r\n// import { Link as RouterLink } from 'react-router-dom';\r\n// import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';\r\n// import { motion } from 'framer-motion';\r\n// import { navigationItems } from './navigationData';\r\n// import { headerStyles } from './styles';\r\n// import { useHeaderContext } from '../../contexts/HeaderContext'; // Ensure correct path\r\n//\r\n// const NavigationMenu = () => {\r\n//   const { activeMenu, setActiveMenu, closeAllMenus } = useHeaderContext();\r\n//   const [anchorEl, setAnchorEl] = React.useState(null);\r\n//   const timeoutRef = useRef(null);\r\n//\r\n//   // Clean up timeout on unmount to prevent memory leaks\r\n//   useEffect(() => {\r\n//     return () => {\r\n//       if (timeoutRef.current) {\r\n//         clearTimeout(timeoutRef.current);\r\n//       }\r\n//     };\r\n//   }, []);\r\n//\r\n//   // Handle mouse entering a menu button\r\n//   const handleMouseEnter = (event, menuKey) => {\r\n//     if (timeoutRef.current) {\r\n//       clearTimeout(timeoutRef.current);\r\n//       timeoutRef.current = null;\r\n//     }\r\n//     setAnchorEl(event.currentTarget);\r\n//     setActiveMenu(menuKey);\r\n//   };\r\n//\r\n//   // Handle mouse leaving a menu button\r\n//   const handleMouseLeave = () => {\r\n//     timeoutRef.current = setTimeout(() => {\r\n//       setActiveMenu(null);\r\n//       setAnchorEl(null);\r\n//     }, 200); // Adjust delay as needed\r\n//   };\r\n//\r\n//   // Handle mouse entering the Popper\r\n//   const handlePopperMouseEnter = () => {\r\n//     if (timeoutRef.current) {\r\n//       clearTimeout(timeoutRef.current);\r\n//       timeoutRef.current = null;\r\n//     }\r\n//   };\r\n//\r\n//   // Handle mouse leaving the Popper\r\n//   const handlePopperMouseLeave = () => {\r\n//     timeoutRef.current = setTimeout(() => {\r\n//       setActiveMenu(null);\r\n//       setAnchorEl(null);\r\n//     }, 200); // Adjust delay as needed\r\n//   };\r\n//\r\n//   // Handle click on a menu button\r\n//   const handleClick = (event, menuKey) => {\r\n//     if (activeMenu === menuKey) {\r\n//       setActiveMenu(null);\r\n//       setAnchorEl(null);\r\n//     } else {\r\n//       setAnchorEl(event.currentTarget);\r\n//       setActiveMenu(menuKey);\r\n//     }\r\n//   };\r\n//\r\n//   // Handle keyboard events for accessibility\r\n//   const handleKeyDown = (event, menuKey) => {\r\n//     if (event.key === 'Enter' || event.key === ' ') {\r\n//       event.preventDefault();\r\n//       handleClick(event, menuKey);\r\n//     }\r\n//   };\r\n//\r\n//   // Handle clicking away from the menu\r\n//   const handleClickAway = () => {\r\n//     closeAllMenus();\r\n//     if (timeoutRef.current) {\r\n//       clearTimeout(timeoutRef.current);\r\n//       timeoutRef.current = null;\r\n//     }\r\n//   };\r\n//\r\n//   return (\r\n//     <Box sx={headerStyles.nav}>\r\n//       {Object.entries(navigationItems).map(([menuKey, section]) => (\r\n//         <Box\r\n//           key={menuKey}\r\n//           sx={{ display: 'inline-block', position: 'relative' }}\r\n//           onMouseEnter={(e) => handleMouseEnter(e, menuKey)}\r\n//           onMouseLeave={handleMouseLeave}\r\n//         >\r\n//           <Button\r\n//             color=\"inherit\"\r\n//             endIcon={<KeyboardArrowDownIcon />}\r\n//             sx={{\r\n//               ...headerStyles.navButton,\r\n//               ...(activeMenu === menuKey && headerStyles.navButtonActive),\r\n//             }}\r\n//             aria-controls={\r\n//               activeMenu === menuKey ? `${menuKey}-menu` : undefined\r\n//             }\r\n//             aria-haspopup=\"true\"\r\n//             aria-expanded={activeMenu === menuKey ? 'true' : undefined}\r\n//             onClick={(e) => handleClick(e, menuKey)}\r\n//             onKeyDown={(e) => handleKeyDown(e, menuKey)}\r\n//           >\r\n//             {section.label}\r\n//           </Button>\r\n//\r\n//           <Popper\r\n//             id={`${menuKey}-menu`}\r\n//             open={activeMenu === menuKey}\r\n//             anchorEl={anchorEl}\r\n//             placement=\"bottom-start\"\r\n//             transition\r\n//             disablePortal={false}\r\n//             sx={headerStyles.popper}\r\n//             onMouseEnter={handlePopperMouseEnter}\r\n//             onMouseLeave={handlePopperMouseLeave}\r\n//           >\r\n//             {({ TransitionProps }) => (\r\n//               <Fade {...TransitionProps} timeout={200}>\r\n//                 <Paper sx={headerStyles.dropdownPaper}>\r\n//                   <ClickAwayListener onClickAway={handleClickAway}>\r\n//                     <Grid container spacing={2} padding={2}>\r\n//                       {section.items.map((item, index) => (\r\n//                         <Grid\r\n//                           item\r\n//                           xs={12}\r\n//                           md={4}\r\n//                           key={`${menuKey}-${item.id}`}\r\n//                         >\r\n//                           <motion.div\r\n//                             initial={{ opacity: 0, y: 20 }}\r\n//                             animate={{ opacity: 1, y: 0 }}\r\n//                             transition={{\r\n//                               delay: index * 0.05,\r\n//                               duration: 0.3,\r\n//                             }}\r\n//                           >\r\n//                             <Button\r\n//                               component={RouterLink}\r\n//                               to={item.path}\r\n//                               onClick={handleClickAway}\r\n//                               sx={headerStyles.dropdownItem}\r\n//                               fullWidth\r\n//                               aria-label={item.title}\r\n//                             >\r\n//                               <Box sx={headerStyles.iconWrapper}>\r\n//                                 <item.icon />\r\n//                               </Box>\r\n//                               <Box textAlign=\"left\">\r\n//                                 <Typography variant=\"subtitle1\">\r\n//                                   {item.title}\r\n//                                 </Typography>\r\n//                                 <Typography\r\n//                                   variant=\"body2\"\r\n//                                   color=\"text.secondary\"\r\n//                                 >\r\n//                                   {item.description}\r\n//                                 </Typography>\r\n//                               </Box>\r\n//                             </Button>\r\n//                           </motion.div>\r\n//                         </Grid>\r\n//                       ))}\r\n//                     </Grid>\r\n//                   </ClickAwayListener>\r\n//                 </Paper>\r\n//               </Fade>\r\n//             )}\r\n//           </Popper>\r\n//         </Box>\r\n//       ))}\r\n//     </Box>\r\n//   );\r\n// };\r\n//\r\n// // Use React.memo for performance optimization\r\n// export default React.memo(NavigationMenu);\r\n\r\n\r\n\r\n// // src/components/Header/NavigationMenu.js\r\n//\r\n// import React, { useRef, useEffect } from 'react';\r\n// import {\r\n//   Box,\r\n//   Button,\r\n//   Popper,\r\n//   Paper,\r\n//   Fade,\r\n//   Typography,\r\n//   Grid,\r\n//   ClickAwayListener,\r\n// } from '@mui/material';\r\n// import { Link as RouterLink } from 'react-router-dom';\r\n// import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';\r\n// import { motion } from 'framer-motion';\r\n// import { navigationItems } from './navigationData';\r\n// import { headerStyles } from './styles';\r\n// import { useHeaderContext } from '../../contexts/HeaderContext'; // Ensure correct path\r\n//\r\n// const NavigationMenu = () => {\r\n//   const { activeMenu, setActiveMenu, closeAllMenus } = useHeaderContext();\r\n//   const [anchorEl, setAnchorEl] = React.useState(null);\r\n//   const timeoutRef = useRef(null);\r\n//\r\n//   // Clean up timeout on unmount to prevent memory leaks\r\n//   useEffect(() => {\r\n//     return () => {\r\n//       if (timeoutRef.current) {\r\n//         clearTimeout(timeoutRef.current);\r\n//       }\r\n//     };\r\n//   }, []);\r\n//\r\n//   // Handle mouse entering a menu button\r\n//   const handleMouseEnter = (event, menuKey) => {\r\n//     if (timeoutRef.current) {\r\n//       clearTimeout(timeoutRef.current);\r\n//       timeoutRef.current = null;\r\n//     }\r\n//     setAnchorEl(event.currentTarget);\r\n//     setActiveMenu(menuKey);\r\n//   };\r\n//\r\n//   // Handle mouse leaving a menu button\r\n//   const handleMouseLeave = () => {\r\n//     timeoutRef.current = setTimeout(() => {\r\n//       setActiveMenu(null);\r\n//       setAnchorEl(null);\r\n//     }, 200); // Adjust delay as needed\r\n//   };\r\n//\r\n//   // Handle mouse entering the Popper\r\n//   const handlePopperMouseEnter = () => {\r\n//     if (timeoutRef.current) {\r\n//       clearTimeout(timeoutRef.current);\r\n//       timeoutRef.current = null;\r\n//     }\r\n//   };\r\n//\r\n//   // Handle mouse leaving the Popper\r\n//   const handlePopperMouseLeave = () => {\r\n//     timeoutRef.current = setTimeout(() => {\r\n//       setActiveMenu(null);\r\n//       setAnchorEl(null);\r\n//     }, 200); // Adjust delay as needed\r\n//   };\r\n//\r\n//   // Handle click on a menu button\r\n//   const handleClick = (event, menuKey) => {\r\n//     if (activeMenu === menuKey) {\r\n//       setActiveMenu(null);\r\n//       setAnchorEl(null);\r\n//     } else {\r\n//       setAnchorEl(event.currentTarget);\r\n//       setActiveMenu(menuKey);\r\n//     }\r\n//   };\r\n//\r\n//   // Handle keyboard events for accessibility\r\n//   const handleKeyDown = (event, menuKey) => {\r\n//     if (event.key === 'Enter' || event.key === ' ') {\r\n//       event.preventDefault();\r\n//       handleClick(event, menuKey);\r\n//     }\r\n//   };\r\n//\r\n//   // Handle clicking away from the menu\r\n//   const handleClickAway = () => {\r\n//     closeAllMenus();\r\n//     if (timeoutRef.current) {\r\n//       clearTimeout(timeoutRef.current);\r\n//       timeoutRef.current = null;\r\n//     }\r\n//   };\r\n//\r\n//   return (\r\n//     <Box sx={headerStyles.nav}>\r\n//       {Object.entries(navigationItems).map(([menuKey, section]) => (\r\n//         <Box\r\n//           key={menuKey}\r\n//           sx={{ display: 'inline-block', position: 'relative' }}\r\n//           onMouseEnter={(e) => handleMouseEnter(e, menuKey)}\r\n//           onMouseLeave={handleMouseLeave}\r\n//         >\r\n//           <Button\r\n//             color=\"inherit\"\r\n//             endIcon={<KeyboardArrowDownIcon />}\r\n//             sx={{\r\n//               ...headerStyles.navButton,\r\n//               ...(activeMenu === menuKey && headerStyles.navButtonActive),\r\n//             }}\r\n//             aria-controls={\r\n//               activeMenu === menuKey ? `${menuKey}-menu` : undefined\r\n//             }\r\n//             aria-haspopup=\"true\"\r\n//             aria-expanded={activeMenu === menuKey ? 'true' : undefined}\r\n//             onClick={(e) => handleClick(e, menuKey)}\r\n//             onKeyDown={(e) => handleKeyDown(e, menuKey)}\r\n//           >\r\n//             {section.label}\r\n//           </Button>\r\n//\r\n//           <Popper\r\n//             id={`${menuKey}-menu`}\r\n//             open={activeMenu === menuKey}\r\n//             anchorEl={anchorEl}\r\n//             placement=\"bottom-start\"\r\n//             transition\r\n//             disablePortal={false}\r\n//             sx={headerStyles.popper}\r\n//             onMouseEnter={handlePopperMouseEnter}\r\n//             onMouseLeave={handlePopperMouseLeave}\r\n//           >\r\n//             {({ TransitionProps }) => (\r\n//               <Fade {...TransitionProps} timeout={200}>\r\n//                 <Paper sx={headerStyles.dropdownPaper}>\r\n//                   <ClickAwayListener onClickAway={handleClickAway}>\r\n//                     <Grid container spacing={2} padding={2}>\r\n//                       {section.items.map((item, index) => (\r\n//                         <Grid\r\n//                           item\r\n//                           xs={12}\r\n//                           md={4}\r\n//                           key={`${menuKey}-${item.id}`}\r\n//                         >\r\n//                           <motion.div\r\n//                             initial={{ opacity: 0, y: 20 }}\r\n//                             animate={{ opacity: 1, y: 0 }}\r\n//                             transition={{\r\n//                               delay: index * 0.05,\r\n//                               duration: 0.3,\r\n//                             }}\r\n//                           >\r\n//                             <Button\r\n//                               component={RouterLink}\r\n//                               to={item.path}\r\n//                               onClick={handleClickAway}\r\n//                               sx={headerStyles.dropdownItem}\r\n//                               fullWidth\r\n//                               aria-label={item.title}\r\n//                             >\r\n//                               <Box sx={headerStyles.iconWrapper}>\r\n//                                 <item.icon />\r\n//                               </Box>\r\n//                               <Box textAlign=\"left\">\r\n//                                 <Typography variant=\"subtitle1\">\r\n//                                   {item.title}\r\n//                                 </Typography>\r\n//                                 <Typography\r\n//                                   variant=\"body2\"\r\n//                                   color=\"text.secondary\"\r\n//                                 >\r\n//                                   {item.description}\r\n//                                 </Typography>\r\n//                               </Box>\r\n//                             </Button>\r\n//                           </motion.div>\r\n//                         </Grid>\r\n//                       ))}\r\n//                     </Grid>\r\n//                   </ClickAwayListener>\r\n//                 </Paper>\r\n//               </Fade>\r\n//             )}\r\n//           </Popper>\r\n//         </Box>\r\n//       ))}\r\n//     </Box>\r\n//   );\r\n// };\r\n//\r\n// // Use React.memo for performance optimization\r\n// export default React.memo(NavigationMenu);\r\n\r\n\r\n// // src/components/Header/NavigationMenu.js\r\n//\r\n// import React, { useRef } from 'react';\r\n// import {\r\n//   Box,\r\n//   Button,\r\n//   Popper,\r\n//   Paper,\r\n//   Fade,\r\n//   Typography,\r\n//   Grid,\r\n//   ClickAwayListener,\r\n// } from '@mui/material';\r\n// import { Link as RouterLink } from 'react-router-dom';\r\n// import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';\r\n// import { motion } from 'framer-motion';\r\n// import { navigationItems } from './navigationData';\r\n// import { headerStyles } from './styles';\r\n// import { useHeaderContext } from '../../contexts/HeaderContext';\r\n//\r\n// const NavigationMenu = () => {\r\n//   const { activeMenu, setActiveMenu, closeAllMenus } = useHeaderContext();\r\n//   const [anchorEl, setAnchorEl] = React.useState(null);\r\n//   const timeoutRef = useRef(null);\r\n//\r\n//   // Handle mouse entering a menu button\r\n//   const handleMouseEnter = (event, menuKey) => {\r\n//     if (timeoutRef.current) {\r\n//       clearTimeout(timeoutRef.current);\r\n//       timeoutRef.current = null;\r\n//     }\r\n//     setAnchorEl(event.currentTarget);\r\n//     setActiveMenu(menuKey);\r\n//   };\r\n//\r\n//   // Handle mouse leaving a menu button\r\n//   const handleMouseLeave = () => {\r\n//     timeoutRef.current = setTimeout(() => {\r\n//       setActiveMenu(null);\r\n//       setAnchorEl(null);\r\n//     }, 200);\r\n//   };\r\n//\r\n//   // Handle mouse entering the Popper\r\n//   const handlePopperMouseEnter = () => {\r\n//     if (timeoutRef.current) {\r\n//       clearTimeout(timeoutRef.current);\r\n//       timeoutRef.current = null;\r\n//     }\r\n//   };\r\n//\r\n//   // Handle mouse leaving the Popper\r\n//   const handlePopperMouseLeave = () => {\r\n//     timeoutRef.current = setTimeout(() => {\r\n//       setActiveMenu(null);\r\n//       setAnchorEl(null);\r\n//     }, 200);\r\n//   };\r\n//\r\n//   // Handle click on a menu button\r\n//   const handleClick = (event, menuKey) => {\r\n//     if (activeMenu === menuKey) {\r\n//       setActiveMenu(null);\r\n//       setAnchorEl(null);\r\n//     } else {\r\n//       setAnchorEl(event.currentTarget);\r\n//       setActiveMenu(menuKey);\r\n//     }\r\n//   };\r\n//\r\n//   // Handle keyboard events\r\n//   const handleKeyDown = (event, menuKey) => {\r\n//     if (event.key === 'Enter' || event.key === ' ') {\r\n//       event.preventDefault();\r\n//       handleClick(event, menuKey);\r\n//     }\r\n//   };\r\n//\r\n//   // Handle clicking away from the menu\r\n//   const handleClickAway = () => {\r\n//     closeAllMenus();\r\n//     if (timeoutRef.current) {\r\n//       clearTimeout(timeoutRef.current);\r\n//       timeoutRef.current = null;\r\n//     }\r\n//   };\r\n//\r\n//   return (\r\n//     <Box sx={headerStyles.nav}>\r\n//       {Object.entries(navigationItems).map(([menuKey, section]) => (\r\n//         <Box\r\n//           key={menuKey}\r\n//           sx={{ display: 'inline-block', position: 'relative' }}\r\n//           onMouseEnter={(e) => handleMouseEnter(e, menuKey)}\r\n//           onMouseLeave={handleMouseLeave}\r\n//         >\r\n//           <Button\r\n//             color=\"inherit\"\r\n//             endIcon={<KeyboardArrowDownIcon />}\r\n//             sx={headerStyles.navButton}\r\n//             className={activeMenu === menuKey ? 'active' : ''}\r\n//             aria-controls={activeMenu === menuKey ? `${menuKey}-menu` : undefined}\r\n//             aria-haspopup=\"true\"\r\n//             aria-expanded={activeMenu === menuKey ? 'true' : undefined}\r\n//             onClick={(e) => handleClick(e, menuKey)}\r\n//             onKeyDown={(e) => handleKeyDown(e, menuKey)}\r\n//           >\r\n//             {section.label}\r\n//           </Button>\r\n//\r\n//           <Popper\r\n//             id={`${menuKey}-menu`}\r\n//             open={activeMenu === menuKey}\r\n//             anchorEl={anchorEl}\r\n//             placement=\"bottom-start\"\r\n//             transition\r\n//             disablePortal={false}\r\n//             sx={headerStyles.popper}\r\n//             onMouseEnter={handlePopperMouseEnter}\r\n//             onMouseLeave={handlePopperMouseLeave}\r\n//           >\r\n//             {({ TransitionProps }) => (\r\n//               <Fade {...TransitionProps} timeout={200}>\r\n//                 <Paper sx={headerStyles.dropdownPaper}>\r\n//                   <ClickAwayListener onClickAway={handleClickAway}>\r\n//                     <Grid container spacing={2} padding={2}>\r\n//                       {section.items.map((item, index) => (\r\n//                         <Grid item xs={12} md={4} key={`${menuKey}-${item.id}`}>\r\n//                           <motion.div\r\n//                             initial={{ opacity: 0, y: 20 }}\r\n//                             animate={{ opacity: 1, y: 0 }}\r\n//                             transition={{ delay: index * 0.05, duration: 0.3 }}\r\n//                           >\r\n//                             <Button\r\n//                               component={RouterLink}\r\n//                               to={item.path}\r\n//                               onClick={handleClickAway}\r\n//                               sx={headerStyles.dropdownItem}\r\n//                               fullWidth\r\n//                               aria-label={item.title}\r\n//                             >\r\n//                               <Box sx={headerStyles.iconWrapper}>\r\n//                                 <item.icon />\r\n//                               </Box>\r\n//                               <Box textAlign=\"left\">\r\n//                                 <Typography variant=\"subtitle1\">\r\n//                                   {item.title}\r\n//                                 </Typography>\r\n//                                 <Typography variant=\"body2\" color=\"text.secondary\">\r\n//                                   {item.description}\r\n//                                 </Typography>\r\n//                               </Box>\r\n//                             </Button>\r\n//                           </motion.div>\r\n//                         </Grid>\r\n//                       ))}\r\n//                     </Grid>\r\n//                   </ClickAwayListener>\r\n//                 </Paper>\r\n//               </Fade>\r\n//             )}\r\n//           </Popper>\r\n//         </Box>\r\n//       ))}\r\n//     </Box>\r\n//   );\r\n// };\r\n//\r\n// export default NavigationMenu;\r\n\r\n\r\n\r\n\r\n// // src/components/Header/NavigationMenu.js\r\n//\r\n// import React, { useRef } from 'react';\r\n// import {\r\n//   Box,\r\n//   Button,\r\n//   Popper,\r\n//   Paper,\r\n//   Fade,\r\n//   Typography,\r\n//   Grid,\r\n//   ClickAwayListener,\r\n// } from '@mui/material';\r\n// import { Link as RouterLink } from 'react-router-dom';\r\n// import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';\r\n// import { motion } from 'framer-motion';\r\n// import { navigationItems } from './navigationData';\r\n// import { headerStyles } from './styles';\r\n// import { useHeaderContext } from '../../contexts/HeaderContext'; // Corrected import path\r\n//\r\n// const NavigationMenu = () => {\r\n//   const { activeMenu, setActiveMenu, closeAllMenus } = useHeaderContext();\r\n//   const [anchorEl, setAnchorEl] = React.useState(null);\r\n//   const timeoutRef = useRef(null);\r\n//\r\n//   // Handle mouse entering a menu button\r\n//   const handleMouseEnter = (event, menuKey) => {\r\n//     // Clear any existing timeout to prevent accidental closure\r\n//     if (timeoutRef.current) {\r\n//       clearTimeout(timeoutRef.current);\r\n//       timeoutRef.current = null;\r\n//     }\r\n//     setAnchorEl(event.currentTarget);\r\n//     setActiveMenu(menuKey);\r\n//   };\r\n//\r\n//   // Handle mouse leaving a menu button\r\n//   const handleMouseLeave = () => {\r\n//     // Set a timeout to allow moving cursor to the Popper without closing immediately\r\n//     timeoutRef.current = setTimeout(() => {\r\n//       setActiveMenu(null);\r\n//       setAnchorEl(null);\r\n//     }, 200); // Adjust delay as needed\r\n//   };\r\n//\r\n//   // Handle mouse entering the Popper to prevent it from closing\r\n//   const handlePopperMouseEnter = () => {\r\n//     if (timeoutRef.current) {\r\n//       clearTimeout(timeoutRef.current);\r\n//       timeoutRef.current = null;\r\n//     }\r\n//   };\r\n//\r\n//   // Handle mouse leaving the Popper\r\n//   const handlePopperMouseLeave = () => {\r\n//     timeoutRef.current = setTimeout(() => {\r\n//       setActiveMenu(null);\r\n//       setAnchorEl(null);\r\n//     }, 200); // Adjust delay as needed\r\n//   };\r\n//\r\n//   // Handle click on a menu button (for accessibility and touch devices)\r\n//   const handleClick = (event, menuKey) => {\r\n//     if (activeMenu === menuKey) {\r\n//       // If the clicked menu is already active, close it\r\n//       setActiveMenu(null);\r\n//       setAnchorEl(null);\r\n//     } else {\r\n//       // Otherwise, open the clicked menu\r\n//       setAnchorEl(event.currentTarget);\r\n//       setActiveMenu(menuKey);\r\n//     }\r\n//   };\r\n//\r\n//   // Handle clicking away from the menu to close it\r\n//   const handleClickAway = () => {\r\n//     closeAllMenus();\r\n//     if (timeoutRef.current) {\r\n//       clearTimeout(timeoutRef.current);\r\n//       timeoutRef.current = null;\r\n//     }\r\n//   };\r\n//\r\n//   return (\r\n//     <Box sx={headerStyles.nav}>\r\n//       {Object.entries(navigationItems).map(([menuKey, section]) => (\r\n//         <Box\r\n//           key={menuKey}\r\n//           sx={{ display: 'inline-block', position: 'relative' }}\r\n//           onMouseEnter={(e) => handleMouseEnter(e, menuKey)}\r\n//           onMouseLeave={handleMouseLeave}\r\n//         >\r\n//           <Button\r\n//             color=\"inherit\"\r\n//             endIcon={<KeyboardArrowDownIcon />}\r\n//             sx={headerStyles.navButton}\r\n//             className={activeMenu === menuKey ? 'active' : ''}\r\n//             aria-controls={activeMenu === menuKey ? `${menuKey}-menu` : undefined}\r\n//             aria-haspopup=\"true\"\r\n//             aria-expanded={activeMenu === menuKey ? 'true' : undefined}\r\n//             onClick={(e) => handleClick(e, menuKey)}\r\n//           >\r\n//             {section.label}\r\n//           </Button>\r\n//\r\n//           <Popper\r\n//             id={`${menuKey}-menu`}\r\n//             open={activeMenu === menuKey}\r\n//             anchorEl={anchorEl}\r\n//             placement=\"bottom-start\"\r\n//             transition\r\n//             disablePortal={false}\r\n//             sx={headerStyles.popper}\r\n//             onMouseEnter={handlePopperMouseEnter}\r\n//             onMouseLeave={handlePopperMouseLeave}\r\n//           >\r\n//             {({ TransitionProps }) => (\r\n//               <Fade {...TransitionProps} timeout={200}>\r\n//                 <Paper sx={headerStyles.dropdownPaper}>\r\n//                   <ClickAwayListener onClickAway={handleClickAway}>\r\n//                     <Grid container spacing={2} padding={2}>\r\n//                       {section.items.map((item, index) => (\r\n//                         <Grid item xs={12} md={4} key={`${menuKey}-${item.id}`}>\r\n//                           <motion.div\r\n//                             initial={{ opacity: 0, y: 20 }}\r\n//                             animate={{ opacity: 1, y: 0 }}\r\n//                             transition={{ delay: index * 0.05, duration: 0.3 }}\r\n//                           >\r\n//                             <Button\r\n//                               component={RouterLink}\r\n//                               to={item.path}\r\n//                               onClick={handleClickAway}\r\n//                               sx={headerStyles.dropdownItem}\r\n//                               fullWidth\r\n//                               aria-label={item.title}\r\n//                             >\r\n//                               <Box sx={headerStyles.iconWrapper}>\r\n//                                 <item.icon />\r\n//                               </Box>\r\n//                               <Box textAlign=\"left\">\r\n//                                 <Typography variant=\"subtitle1\">\r\n//                                   {item.title}\r\n//                                 </Typography>\r\n//                                 <Typography variant=\"body2\" color=\"text.secondary\">\r\n//                                   {item.description}\r\n//                                 </Typography>\r\n//                               </Box>\r\n//                             </Button>\r\n//                           </motion.div>\r\n//                         </Grid>\r\n//                       ))}\r\n//                     </Grid>\r\n//                   </ClickAwayListener>\r\n//                 </Paper>\r\n//               </Fade>\r\n//             )}\r\n//           </Popper>\r\n//         </Box>\r\n//       ))}\r\n//     </Box>\r\n//   );\r\n// };\r\n//\r\n// export default NavigationMenu;\r\n\r\n\r\n\r\n// // src/components/Header/NavigationMenu.js\r\n//\r\n// import React, { useState, useRef } from 'react';\r\n// import {\r\n//   Box,\r\n//   Button,\r\n//   Popper,\r\n//   Paper,\r\n//   Fade,\r\n//   Typography,\r\n//   Grid,\r\n//   ClickAwayListener,\r\n// } from '@mui/material';\r\n// import { Link as RouterLink } from 'react-router-dom';\r\n// import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';\r\n// import { motion } from 'framer-motion';\r\n// import { navigationItems } from './navigationData';\r\n// import { headerStyles } from './styles';\r\n// import classNames from 'classnames'; // Utility for conditionally joining classNames\r\n//\r\n// const NavigationMenu = () => {\r\n//   // State to track the currently active menu and its anchor element\r\n//   const [activeMenuKey, setActiveMenuKey] = useState(null);\r\n//   const [anchorEl, setAnchorEl] = useState(null);\r\n//\r\n//   // Ref to handle delayed menu closure\r\n//   const timeoutRef = useRef(null);\r\n//\r\n//   // Handle mouse entering a menu button\r\n//   const handleMouseEnter = (event, menuKey) => {\r\n//     // Clear any existing timeout to prevent accidental closure\r\n//     if (timeoutRef.current) {\r\n//       clearTimeout(timeoutRef.current);\r\n//       timeoutRef.current = null;\r\n//     }\r\n//     setAnchorEl(event.currentTarget);\r\n//     setActiveMenuKey(menuKey);\r\n//   };\r\n//\r\n//   // Handle mouse leaving a menu button\r\n//   const handleMouseLeave = () => {\r\n//     // Set a timeout to allow moving cursor to the Popper without closing immediately\r\n//     timeoutRef.current = setTimeout(() => {\r\n//       setActiveMenuKey(null);\r\n//       setAnchorEl(null);\r\n//     }, 200); // Adjust delay as needed\r\n//   };\r\n//\r\n//   // Handle mouse entering the Popper to prevent it from closing\r\n//   const handlePopperMouseEnter = () => {\r\n//     if (timeoutRef.current) {\r\n//       clearTimeout(timeoutRef.current);\r\n//       timeoutRef.current = null;\r\n//     }\r\n//   };\r\n//\r\n//   // Handle mouse leaving the Popper\r\n//   const handlePopperMouseLeave = () => {\r\n//     timeoutRef.current = setTimeout(() => {\r\n//       setActiveMenuKey(null);\r\n//       setAnchorEl(null);\r\n//     }, 200); // Adjust delay as needed\r\n//   };\r\n//\r\n//   // Handle click on a menu button (for accessibility and touch devices)\r\n//   const handleClick = (event, menuKey) => {\r\n//     if (activeMenuKey === menuKey) {\r\n//       // If the clicked menu is already active, close it\r\n//       setActiveMenuKey(null);\r\n//       setAnchorEl(null);\r\n//     } else {\r\n//       // Otherwise, open the clicked menu\r\n//       setAnchorEl(event.currentTarget);\r\n//       setActiveMenuKey(menuKey);\r\n//     }\r\n//   };\r\n//\r\n//   // Handle clicking away from the menu to close it\r\n//   const handleClickAway = () => {\r\n//     setActiveMenuKey(null);\r\n//     setAnchorEl(null);\r\n//     if (timeoutRef.current) {\r\n//       clearTimeout(timeoutRef.current);\r\n//       timeoutRef.current = null;\r\n//     }\r\n//   };\r\n//\r\n//   return (\r\n//     <Box sx={headerStyles.nav}>\r\n//       {Object.entries(navigationItems).map(([menuKey, section]) => (\r\n//         <Box\r\n//           key={menuKey}\r\n//           sx={{ display: 'inline-block', position: 'relative' }}\r\n//           onMouseEnter={(e) => handleMouseEnter(e, menuKey)}\r\n//           onMouseLeave={handleMouseLeave}\r\n//         >\r\n//           <Button\r\n//             color=\"inherit\"\r\n//             endIcon={<KeyboardArrowDownIcon />}\r\n//             sx={headerStyles.navButton}\r\n//             className={classNames({ 'active': activeMenuKey === menuKey })}\r\n//             aria-controls={activeMenuKey === menuKey ? `${menuKey}-menu` : undefined}\r\n//             aria-haspopup=\"true\"\r\n//             aria-expanded={activeMenuKey === menuKey ? 'true' : undefined}\r\n//             onClick={(e) => handleClick(e, menuKey)}\r\n//           >\r\n//             {section.label}\r\n//           </Button>\r\n//\r\n//           <Popper\r\n//             id={`${menuKey}-menu`}\r\n//             open={activeMenuKey === menuKey}\r\n//             anchorEl={anchorEl}\r\n//             placement=\"bottom-start\"\r\n//             transition\r\n//             disablePortal={false}\r\n//             sx={headerStyles.popper}\r\n//             onMouseEnter={handlePopperMouseEnter}\r\n//             onMouseLeave={handlePopperMouseLeave}\r\n//           >\r\n//             {({ TransitionProps }) => (\r\n//               <Fade {...TransitionProps} timeout={200}>\r\n//                 <Paper sx={headerStyles.dropdownPaper}>\r\n//                   <ClickAwayListener onClickAway={handleClickAway}>\r\n//                     <Grid container spacing={2} padding={2}>\r\n//                       {section.items.map((item, index) => (\r\n//                         <Grid item xs={12} md={4} key={`${menuKey}-${item.id}`}>\r\n//                           <motion.div\r\n//                             initial={{ opacity: 0, y: 20 }}\r\n//                             animate={{ opacity: 1, y: 0 }}\r\n//                             transition={{ delay: index * 0.05, duration: 0.3 }}\r\n//                           >\r\n//                             <Button\r\n//                               component={RouterLink}\r\n//                               to={item.path}\r\n//                               onClick={handleClickAway}\r\n//                               sx={headerStyles.dropdownItem}\r\n//                               fullWidth\r\n//                               aria-label={item.title}\r\n//                             >\r\n//                               <Box sx={headerStyles.iconWrapper}>\r\n//                                 <item.icon />\r\n//                               </Box>\r\n//                               <Box textAlign=\"left\">\r\n//                                 <Typography variant=\"subtitle1\">\r\n//                                   {item.title}\r\n//                                 </Typography>\r\n//                                 <Typography variant=\"body2\" color=\"text.secondary\">\r\n//                                   {item.description}\r\n//                                 </Typography>\r\n//                               </Box>\r\n//                             </Button>\r\n//                           </motion.div>\r\n//                         </Grid>\r\n//                       ))}\r\n//                     </Grid>\r\n//                   </ClickAwayListener>\r\n//                 </Paper>\r\n//               </Fade>\r\n//             )}\r\n//           </Popper>\r\n//         </Box>\r\n//       ))}\r\n//     </Box>\r\n//   );\r\n// };\r\n//\r\n// export default NavigationMenu;\r\n\r\n\r\n// // src/components/Header/NavigationMenu.js\r\n//\r\n// import React, { useState, useRef } from 'react';\r\n// import {\r\n//   Box,\r\n//   Button,\r\n//   Popper,\r\n//   Paper,\r\n//   Fade,\r\n//   Typography,\r\n//   Grid,\r\n//   ClickAwayListener,\r\n// } from '@mui/material';\r\n// import { Link as RouterLink } from 'react-router-dom';\r\n// import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';\r\n// import { motion } from 'framer-motion';\r\n// import { navigationItems } from './navigationData';\r\n// import { headerStyles } from './styles';\r\n//\r\n// const NavigationMenu = () => {\r\n//   // State to track the currently active menu and its anchor element\r\n//   const [activeMenuKey, setActiveMenuKey] = useState(null);\r\n//   const [anchorEl, setAnchorEl] = useState(null);\r\n//\r\n//   // Ref to handle delayed menu closure\r\n//   const timeoutRef = useRef(null);\r\n//\r\n//   // Handle mouse entering a menu button\r\n//   const handleMouseEnter = (event, menuKey) => {\r\n//     // Clear any existing timeout to prevent accidental closure\r\n//     if (timeoutRef.current) {\r\n//       clearTimeout(timeoutRef.current);\r\n//       timeoutRef.current = null;\r\n//     }\r\n//     setAnchorEl(event.currentTarget);\r\n//     setActiveMenuKey(menuKey);\r\n//   };\r\n//\r\n//   // Handle mouse leaving a menu button\r\n//   const handleMouseLeave = () => {\r\n//     // Set a timeout to allow moving cursor to the Popper without closing immediately\r\n//     timeoutRef.current = setTimeout(() => {\r\n//       setActiveMenuKey(null);\r\n//       setAnchorEl(null);\r\n//     }, 200); // Adjust delay as needed\r\n//   };\r\n//\r\n//   // Handle mouse entering the Popper to prevent it from closing\r\n//   const handlePopperMouseEnter = () => {\r\n//     if (timeoutRef.current) {\r\n//       clearTimeout(timeoutRef.current);\r\n//       timeoutRef.current = null;\r\n//     }\r\n//   };\r\n//\r\n//   // Handle mouse leaving the Popper\r\n//   const handlePopperMouseLeave = () => {\r\n//     timeoutRef.current = setTimeout(() => {\r\n//       setActiveMenuKey(null);\r\n//       setAnchorEl(null);\r\n//     }, 200); // Adjust delay as needed\r\n//   };\r\n//\r\n//   // Handle click on a menu button (for accessibility and touch devices)\r\n//   const handleClick = (event, menuKey) => {\r\n//     if (activeMenuKey === menuKey) {\r\n//       // If the clicked menu is already active, close it\r\n//       setActiveMenuKey(null);\r\n//       setAnchorEl(null);\r\n//     } else {\r\n//       // Otherwise, open the clicked menu\r\n//       setAnchorEl(event.currentTarget);\r\n//       setActiveMenuKey(menuKey);\r\n//     }\r\n//   };\r\n//\r\n//   // Handle clicking away from the menu to close it\r\n//   const handleClickAway = () => {\r\n//     setActiveMenuKey(null);\r\n//     setAnchorEl(null);\r\n//   };\r\n//\r\n//   return (\r\n//     <Box sx={headerStyles.nav}>\r\n//       {Object.entries(navigationItems).map(([menuKey, section]) => (\r\n//         <Box\r\n//           key={menuKey}\r\n//           sx={{ display: 'inline-block', position: 'relative' }}\r\n//           onMouseEnter={(e) => handleMouseEnter(e, menuKey)}\r\n//           onMouseLeave={handleMouseLeave}\r\n//         >\r\n//           <Button\r\n//             color=\"inherit\"\r\n//             endIcon={<KeyboardArrowDownIcon />}\r\n//             sx={headerStyles.navButton}\r\n//             aria-controls={activeMenuKey === menuKey ? `${menuKey}-menu` : undefined}\r\n//             aria-haspopup=\"true\"\r\n//             aria-expanded={activeMenuKey === menuKey ? 'true' : undefined}\r\n//             onClick={(e) => handleClick(e, menuKey)}\r\n//           >\r\n//             {section.label}\r\n//           </Button>\r\n//\r\n//           <Popper\r\n//             id={`${menuKey}-menu`}\r\n//             open={activeMenuKey === menuKey}\r\n//             anchorEl={anchorEl}\r\n//             placement=\"bottom-start\"\r\n//             transition\r\n//             disablePortal={false}\r\n//             sx={headerStyles.popper}\r\n//             onMouseEnter={handlePopperMouseEnter}\r\n//             onMouseLeave={handlePopperMouseLeave}\r\n//           >\r\n//             {({ TransitionProps }) => (\r\n//               <Fade {...TransitionProps} timeout={200}>\r\n//                 <Paper sx={headerStyles.dropdownPaper}>\r\n//                   <ClickAwayListener onClickAway={handleClickAway}>\r\n//                     <Grid container spacing={2} padding={2}>\r\n//                       {section.items.map((item, index) => (\r\n//                         <Grid item xs={12} md={4} key={`${menuKey}-${item.id}`}>\r\n//                           <motion.div\r\n//                             initial={{ opacity: 0, y: 20 }}\r\n//                             animate={{ opacity: 1, y: 0 }}\r\n//                             transition={{ delay: index * 0.05, duration: 0.3 }}\r\n//                           >\r\n//                             <Button\r\n//                               component={RouterLink}\r\n//                               to={item.path}\r\n//                               onClick={handleClickAway}\r\n//                               sx={headerStyles.dropdownItem}\r\n//                               fullWidth\r\n//                               startIcon={<item.icon sx={{ mr: 2 }} />}\r\n//                               aria-label={item.title}\r\n//                             >\r\n//                               <Box textAlign=\"left\">\r\n//                                 <Typography variant=\"subtitle1\">\r\n//                                   {item.title}\r\n//                                 </Typography>\r\n//                                 <Typography variant=\"body2\" color=\"text.secondary\">\r\n//                                   {item.description}\r\n//                                 </Typography>\r\n//                               </Box>\r\n//                             </Button>\r\n//                           </motion.div>\r\n//                         </Grid>\r\n//                       ))}\r\n//                     </Grid>\r\n//                   </ClickAwayListener>\r\n//                 </Paper>\r\n//               </Fade>\r\n//             )}\r\n//           </Popper>\r\n//         </Box>\r\n//       ))}\r\n//     </Box>\r\n//   );\r\n// };\r\n//\r\n// export default NavigationMenu;\r\n//\r\n\r\n\r\n// NavigationMenu.js\r\nimport React, { useRef, useEffect } from 'react';\r\nimport {\r\n  Box,\r\n  Button,\r\n  Menu,\r\n  MenuItem,\r\n  Typography,\r\n  Grid,\r\n  ClickAwayListener,\r\n  Badge,\r\n} from '@mui/material';\r\nimport { useHeaderContext } from '../../contexts/HeaderContext';\r\nimport { Link as RouterLink } from 'react-router-dom';\r\nimport KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';\r\nimport { motion } from 'framer-motion';\r\nimport { navigationItems } from './navigationData';\r\nimport { headerStyles } from './styles';\r\n\r\nconst NavigationMenu = () => {\r\n  const { activeMenu, setActiveMenu, closeAllMenus } = useHeaderContext();\r\n  const [anchorEl, setAnchorEl] = React.useState(null);\r\n  const timeoutRef = useRef(null);\r\n\r\n  useEffect(() => {\r\n    return () => {\r\n      if (timeoutRef.current) {\r\n        clearTimeout(timeoutRef.current);\r\n      }\r\n    };\r\n  }, []);\r\n\r\n  // Helper function to determine if a menu has a submenu\r\n  const hasSubmenu = (section) => section.items.length > 1;\r\n\r\n  const handleMouseEnter = (event, menuKey, section) => {\r\n    if (hasSubmenu(section)) {\r\n      if (timeoutRef.current) {\r\n        clearTimeout(timeoutRef.current);\r\n        timeoutRef.current = null;\r\n      }\r\n      setAnchorEl(event.currentTarget);\r\n      setActiveMenu(menuKey);\r\n    }\r\n  };\r\n\r\n  const handleMouseLeave = () => {\r\n    timeoutRef.current = setTimeout(() => {\r\n      setActiveMenu(null);\r\n      setAnchorEl(null);\r\n    }, 200);\r\n  };\r\n\r\n  const handleMenuClose = () => {\r\n    setActiveMenu(null);\r\n    setAnchorEl(null);\r\n  };\r\n\r\n  const handleClick = (event, menuKey, section) => {\r\n    if (hasSubmenu(section)) {\r\n      if (activeMenu === menuKey) {\r\n        handleMenuClose();\r\n      } else {\r\n        setAnchorEl(event.currentTarget);\r\n        setActiveMenu(menuKey);\r\n      }\r\n    } else {\r\n      closeAllMenus();\r\n    }\r\n  };\r\n\r\n  const handleKeyDown = (event, menuKey, section) => {\r\n    if (event.key === 'Enter' || event.key === ' ') {\r\n      event.preventDefault();\r\n      handleClick(event, menuKey, section);\r\n    }\r\n  };\r\n\r\n  const handleClickAway = () => {\r\n    handleMenuClose();\r\n    if (timeoutRef.current) {\r\n      clearTimeout(timeoutRef.current);\r\n      timeoutRef.current = null;\r\n    }\r\n  };\r\n\r\n  return (\r\n    <ClickAwayListener onClickAway={handleClickAway}>\r\n      <Box sx={headerStyles.nav}>\r\n        {Object.entries(navigationItems).map(([key, section]) => {\r\n          const submenuExists = hasSubmenu(section);\r\n\r\n          return (\r\n            <Box\r\n              key={key}\r\n              onMouseEnter={(e) => handleMouseEnter(e, key, section)}\r\n              onMouseLeave={handleMouseLeave}\r\n              sx={{ display: 'inline-block' }}\r\n            >\r\n              <Button\r\n                component={submenuExists ? 'button' : RouterLink}\r\n                to={!submenuExists ? section.items[0].path : undefined}\r\n                color=\"inherit\"\r\n                endIcon={submenuExists ? <KeyboardArrowDownIcon /> : null}\r\n                sx={headerStyles.navButton}\r\n                aria-controls={activeMenu === key ? `${key}-menu` : undefined}\r\n                aria-haspopup={submenuExists ? 'true' : undefined}\r\n                aria-expanded={activeMenu === key ? 'true' : undefined}\r\n                onClick={(e) => handleClick(e, key, section)}\r\n                onKeyDown={(e) => handleKeyDown(e, key, section)}\r\n              >\r\n                {section.label}\r\n              </Button>\r\n\r\n              {submenuExists && (\r\n                <Menu\r\n                  id={`${key}-menu`}\r\n                  anchorEl={anchorEl}\r\n                  open={activeMenu === key}\r\n                  onClose={handleMenuClose}\r\n                  MenuListProps={{\r\n                    onMouseEnter: () => {\r\n                      if (timeoutRef.current) {\r\n                        clearTimeout(timeoutRef.current);\r\n                        timeoutRef.current = null;\r\n                      }\r\n                    },\r\n                    onMouseLeave: handleMenuClose,\r\n                  }}\r\n                  anchorOrigin={{\r\n                    vertical: 'bottom',\r\n                    horizontal: 'left',\r\n                  }}\r\n                  transformOrigin={{\r\n                    vertical: 'top',\r\n                    horizontal: 'left',\r\n                  }}\r\n                  disableAutoFocusItem\r\n                >\r\n                  <Grid container spacing={2} padding={2}>\r\n                    {section.items.map((item) => (\r\n                      <Grid item xs={12} md={4} key={item.id || item.title}>\r\n                        <motion.div\r\n                          initial={{ opacity: 0, y: 10 }}\r\n                          animate={{ opacity: 1, y: 0 }}\r\n                          transition={{ delay: 0.05 }}\r\n                        >\r\n                          <MenuItem\r\n                            component={RouterLink}\r\n                            to={item.path}\r\n                            onClick={closeAllMenus}\r\n                            sx={headerStyles.dropdownItem}\r\n                          >\r\n                            <Box>\r\n                              <Typography variant=\"subtitle1\">\r\n                                {item.title}\r\n                                {item.comingSoon && (\r\n                                  <Badge\r\n                                    color=\"secondary\"\r\n                                    badgeContent=\"Coming Soon\"\r\n                                    sx={{ ml: 1 }}\r\n                                  />\r\n                                )}\r\n                              </Typography>\r\n                              <Typography variant=\"body2\" color=\"text.secondary\">\r\n                                {item.description}\r\n                              </Typography>\r\n                            </Box>\r\n                          </MenuItem>\r\n                        </motion.div>\r\n                      </Grid>\r\n                    ))}\r\n                  </Grid>\r\n                </Menu>\r\n              )}\r\n            </Box>\r\n          );\r\n        })}\r\n      </Box>\r\n    </ClickAwayListener>\r\n  );\r\n};\r\n\r\nexport default NavigationMenu;\r\n\r\n\r\n// working 2\r\n// // NavigationMenu.js\r\n// import React, { useRef, useEffect } from 'react';\r\n// import {\r\n//   Box,\r\n//   Button,\r\n//   Menu,\r\n//   MenuItem,\r\n//   Typography,\r\n//   Grid,\r\n//   ClickAwayListener,\r\n//   Badge,\r\n// } from '@mui/material';\r\n// import { useHeaderContext } from '../../contexts/HeaderContext';\r\n// import { Link as RouterLink } from 'react-router-dom';\r\n// import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';\r\n// import { motion } from 'framer-motion';\r\n// import { navigationItems } from './navigationData';\r\n// import { headerStyles } from './styles';\r\n//\r\n// const NavigationMenu = () => {\r\n//   const { activeMenu, setActiveMenu, closeAllMenus } = useHeaderContext();\r\n//   const [anchorEl, setAnchorEl] = React.useState(null);\r\n//   const timeoutRef = useRef(null);\r\n//\r\n//   useEffect(() => {\r\n//     return () => {\r\n//       if (timeoutRef.current) {\r\n//         clearTimeout(timeoutRef.current);\r\n//       }\r\n//     };\r\n//   }, []);\r\n//\r\n//   const handleMouseEnter = (event, menuKey) => {\r\n//     if (menuKey !== 'home') {\r\n//       if (timeoutRef.current) {\r\n//         clearTimeout(timeoutRef.current);\r\n//         timeoutRef.current = null;\r\n//       }\r\n//       setAnchorEl(event.currentTarget);\r\n//       setActiveMenu(menuKey);\r\n//     }\r\n//   };\r\n//\r\n//   const handleMouseLeave = () => {\r\n//     timeoutRef.current = setTimeout(() => {\r\n//       setActiveMenu(null);\r\n//       setAnchorEl(null);\r\n//     }, 200);\r\n//   };\r\n//\r\n//   const handleMenuClose = () => {\r\n//     setActiveMenu(null);\r\n//     setAnchorEl(null);\r\n//   };\r\n//\r\n//   const handleClick = (event, menuKey) => {\r\n//     if (menuKey === 'home') {\r\n//       closeAllMenus();\r\n//     } else {\r\n//       if (activeMenu === menuKey) {\r\n//         handleMenuClose();\r\n//       } else {\r\n//         setAnchorEl(event.currentTarget);\r\n//         setActiveMenu(menuKey);\r\n//       }\r\n//     }\r\n//   };\r\n//\r\n//   const handleKeyDown = (event, menuKey) => {\r\n//     if (event.key === 'Enter' || event.key === ' ') {\r\n//       event.preventDefault();\r\n//       handleClick(event, menuKey);\r\n//     }\r\n//   };\r\n//\r\n//   const handleClickAway = () => {\r\n//     handleMenuClose();\r\n//     if (timeoutRef.current) {\r\n//       clearTimeout(timeoutRef.current);\r\n//       timeoutRef.current = null;\r\n//     }\r\n//   };\r\n//\r\n//   return (\r\n//     <ClickAwayListener onClickAway={handleClickAway}>\r\n//       <Box sx={headerStyles.nav}>\r\n//         {Object.entries(navigationItems).map(([key, section]) => (\r\n//           <Box\r\n//             key={key}\r\n//             onMouseEnter={(e) => handleMouseEnter(e, key)}\r\n//             onMouseLeave={handleMouseLeave}\r\n//             sx={{ display: 'inline-block' }}\r\n//           >\r\n//             <Button\r\n//               component={key === 'home' ? RouterLink : 'button'}\r\n//               to={key === 'home' ? section.items[0].path : undefined}\r\n//               color=\"inherit\"\r\n//               endIcon={key !== 'home' ? <KeyboardArrowDownIcon /> : null}\r\n//               sx={headerStyles.navButton}\r\n//               aria-controls={activeMenu === key ? `${key}-menu` : undefined}\r\n//               aria-haspopup={key !== 'home' ? 'true' : undefined}\r\n//               aria-expanded={activeMenu === key ? 'true' : undefined}\r\n//               onClick={(e) => handleClick(e, key)}\r\n//               onKeyDown={(e) => handleKeyDown(e, key)}\r\n//             >\r\n//               {section.label}\r\n//             </Button>\r\n//\r\n//             {key !== 'home' && (\r\n//               <Menu\r\n//                 id={`${key}-menu`}\r\n//                 anchorEl={anchorEl}\r\n//                 open={activeMenu === key}\r\n//                 onClose={handleMenuClose}\r\n//                 MenuListProps={{\r\n//                   onMouseEnter: () => {\r\n//                     if (timeoutRef.current) {\r\n//                       clearTimeout(timeoutRef.current);\r\n//                       timeoutRef.current = null;\r\n//                     }\r\n//                   },\r\n//                   onMouseLeave: handleMenuClose,\r\n//                 }}\r\n//                 anchorOrigin={{\r\n//                   vertical: 'bottom',\r\n//                   horizontal: 'left',\r\n//                 }}\r\n//                 transformOrigin={{\r\n//                   vertical: 'top',\r\n//                   horizontal: 'left',\r\n//                 }}\r\n//                 disableAutoFocusItem\r\n//               >\r\n//                 <Grid container spacing={2} padding={2}>\r\n//                   {section.items.map((item) => (\r\n//                     <Grid item xs={12} md={4} key={item.id || item.title}>\r\n//                       <motion.div\r\n//                         initial={{ opacity: 0, y: 10 }}\r\n//                         animate={{ opacity: 1, y: 0 }}\r\n//                         transition={{ delay: 0.05 }}\r\n//                       >\r\n//                         <MenuItem\r\n//                           component={RouterLink}\r\n//                           to={item.path}\r\n//                           onClick={closeAllMenus}\r\n//                           sx={headerStyles.dropdownItem}\r\n//                         >\r\n//                           <Box>\r\n//                             <Typography variant=\"subtitle1\">\r\n//                               {item.title}\r\n//                               {item.comingSoon && (\r\n//                                 <Badge\r\n//                                   color=\"secondary\"\r\n//                                   badgeContent=\"Coming Soon\"\r\n//                                   sx={{ ml: 1 }}\r\n//                                 />\r\n//                               )}\r\n//                             </Typography>\r\n//                             <Typography variant=\"body2\" color=\"text.secondary\">\r\n//                               {item.description}\r\n//                             </Typography>\r\n//                           </Box>\r\n//                         </MenuItem>\r\n//                       </motion.div>\r\n//                     </Grid>\r\n//                   ))}\r\n//                 </Grid>\r\n//               </Menu>\r\n//             )}\r\n//           </Box>\r\n//         ))}\r\n//       </Box>\r\n//     </ClickAwayListener>\r\n//   );\r\n// };\r\n//\r\n// export default NavigationMenu;\r\n\r\n\r\n\r\n// // working\r\n//\r\n// // NavigationMenu.js\r\n// import React, { useRef, useEffect } from 'react';\r\n// import {\r\n//   Box,\r\n//   Button,\r\n//   Menu,\r\n//   MenuItem,\r\n//   Typography,\r\n//   Grid,\r\n//   ClickAwayListener,\r\n// } from '@mui/material';\r\n// import { useHeaderContext } from '../../contexts/HeaderContext';\r\n// import { Link as RouterLink } from 'react-router-dom';\r\n// import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';\r\n// import { motion } from 'framer-motion';\r\n// import { navigationItems } from './navigationData';\r\n// import { headerStyles } from './styles';\r\n//\r\n// const NavigationMenu = () => {\r\n//   const { activeMenu, setActiveMenu, closeAllMenus } = useHeaderContext();\r\n//   const [anchorEl, setAnchorEl] = React.useState(null);\r\n//   const timeoutRef = useRef(null);\r\n//\r\n//   useEffect(() => {\r\n//     return () => {\r\n//       if (timeoutRef.current) {\r\n//         clearTimeout(timeoutRef.current);\r\n//       }\r\n//     };\r\n//   }, []);\r\n//\r\n//   const handleMouseEnter = (event, menuKey) => {\r\n//     if (menuKey !== 'home') { // Skip dropdown for Home\r\n//       if (timeoutRef.current) {\r\n//         clearTimeout(timeoutRef.current);\r\n//         timeoutRef.current = null;\r\n//       }\r\n//       setAnchorEl(event.currentTarget);\r\n//       setActiveMenu(menuKey);\r\n//     }\r\n//   };\r\n//\r\n//   const handleMouseLeave = () => {\r\n//     timeoutRef.current = setTimeout(() => {\r\n//       setActiveMenu(null);\r\n//       setAnchorEl(null);\r\n//     }, 200); // Reduced timeout for quicker response\r\n//   };\r\n//\r\n//   const handleMenuClose = () => {\r\n//     setActiveMenu(null);\r\n//     setAnchorEl(null);\r\n//   };\r\n//\r\n//   const handleClick = (event, menuKey) => {\r\n//     if (menuKey === 'home') {\r\n//       closeAllMenus(); // Directly close menus for Home\r\n//     } else {\r\n//       if (activeMenu === menuKey) {\r\n//         handleMenuClose();\r\n//       } else {\r\n//         setAnchorEl(event.currentTarget);\r\n//         setActiveMenu(menuKey);\r\n//       }\r\n//     }\r\n//   };\r\n//\r\n//   const handleKeyDown = (event, menuKey) => {\r\n//     if (event.key === 'Enter' || event.key === ' ') {\r\n//       event.preventDefault();\r\n//       handleClick(event, menuKey);\r\n//     }\r\n//   };\r\n//\r\n//   const handleClickAway = () => {\r\n//     handleMenuClose();\r\n//     if (timeoutRef.current) {\r\n//       clearTimeout(timeoutRef.current);\r\n//       timeoutRef.current = null;\r\n//     }\r\n//   };\r\n//\r\n//   return (\r\n//     <ClickAwayListener onClickAway={handleClickAway}>\r\n//       <Box sx={headerStyles.nav}>\r\n//         {Object.entries(navigationItems).map(([key, section]) => (\r\n//           <Box\r\n//             key={key}\r\n//             onMouseEnter={(e) => handleMouseEnter(e, key)}\r\n//             onMouseLeave={handleMouseLeave}\r\n//             sx={{ display: 'inline-block' }}\r\n//           >\r\n//             <Button\r\n//               component={key === 'home' ? RouterLink : 'button'}\r\n//               to={key === 'home' ? section.items[0].path : undefined}\r\n//               color=\"inherit\"\r\n//               endIcon={key !== 'home' ? <KeyboardArrowDownIcon /> : null} // No icon for Home\r\n//               sx={headerStyles.navButton}\r\n//               aria-controls={activeMenu === key ? `${key}-menu` : undefined}\r\n//               aria-haspopup={key !== 'home' ? 'true' : undefined}\r\n//               aria-expanded={activeMenu === key ? 'true' : undefined}\r\n//               onClick={(e) => handleClick(e, key)}\r\n//               onKeyDown={(e) => handleKeyDown(e, key)}\r\n//             >\r\n//               {section.label}\r\n//             </Button>\r\n//\r\n//             {key !== 'home' && (\r\n//               <Menu\r\n//                 id={`${key}-menu`}\r\n//                 anchorEl={anchorEl}\r\n//                 open={activeMenu === key}\r\n//                 onClose={handleMenuClose}\r\n//                 MenuListProps={{\r\n//                   onMouseEnter: () => {\r\n//                     if (timeoutRef.current) {\r\n//                       clearTimeout(timeoutRef.current);\r\n//                       timeoutRef.current = null;\r\n//                     }\r\n//                   },\r\n//                   onMouseLeave: handleMenuClose,\r\n//                 }}\r\n//                 anchorOrigin={{\r\n//                   vertical: 'bottom',\r\n//                   horizontal: 'left',\r\n//                 }}\r\n//                 transformOrigin={{\r\n//                   vertical: 'top',\r\n//                   horizontal: 'left',\r\n//                 }}\r\n//                 disableAutoFocusItem\r\n//               >\r\n//                 <Grid container spacing={2} padding={2}>\r\n//                   {section.items.map((item) => (\r\n//                     <Grid item xs={12} md={4} key={item.id || item.title}>\r\n//                       <motion.div\r\n//                         initial={{ opacity: 0, y: 10 }}\r\n//                         animate={{ opacity: 1, y: 0 }}\r\n//                         transition={{ delay: 0.05 }}\r\n//                       >\r\n//                         <MenuItem\r\n//                           component={RouterLink}\r\n//                           to={item.path}\r\n//                           onClick={closeAllMenus}\r\n//                           sx={headerStyles.dropdownItem}\r\n//                         >\r\n//                           <Box>\r\n//                             <Typography variant=\"subtitle1\">\r\n//                               {item.title}\r\n//                             </Typography>\r\n//                             <Typography variant=\"body2\" color=\"text.secondary\">\r\n//                               {item.description}\r\n//                             </Typography>\r\n//                           </Box>\r\n//                         </MenuItem>\r\n//                       </motion.div>\r\n//                     </Grid>\r\n//                   ))}\r\n//                 </Grid>\r\n//               </Menu>\r\n//             )}\r\n//           </Box>\r\n//         ))}\r\n//       </Box>\r\n//     </ClickAwayListener>\r\n//   );\r\n// };\r\n//\r\n// export default NavigationMenu;\r\n\r\n\r\n\r\n// // NavigationMenu.js\r\n// import React, { useRef, useEffect } from 'react';\r\n// import {\r\n//   Box,\r\n//   Button,\r\n//   Menu,\r\n//   MenuItem,\r\n//   Typography,\r\n//   Grid,\r\n//   ClickAwayListener,\r\n// } from '@mui/material';\r\n// import { useHeaderContext } from '../../contexts/HeaderContext';\r\n// import { Link as RouterLink } from 'react-router-dom';\r\n// import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';\r\n// import { motion } from 'framer-motion';\r\n// import { navigationItems } from './navigationData';\r\n// import { headerStyles } from './styles';\r\n//\r\n// const NavigationMenu = () => {\r\n//   const { activeMenu, setActiveMenu, closeAllMenus } = useHeaderContext();\r\n//   const [anchorEl, setAnchorEl] = React.useState(null);\r\n//   const timeoutRef = useRef(null);\r\n//\r\n//   useEffect(() => {\r\n//     return () => {\r\n//       if (timeoutRef.current) {\r\n//         clearTimeout(timeoutRef.current);\r\n//       }\r\n//     };\r\n//   }, []);\r\n//\r\n//   const handleMouseEnter = (event, menuKey) => {\r\n//     if (menuKey !== 'home') { // Skip dropdown for Home\r\n//       if (timeoutRef.current) {\r\n//         clearTimeout(timeoutRef.current);\r\n//         timeoutRef.current = null;\r\n//       }\r\n//       setAnchorEl(event.currentTarget);\r\n//       setActiveMenu(menuKey);\r\n//     }\r\n//   };\r\n//\r\n//   const handleMouseLeave = () => {\r\n//     timeoutRef.current = setTimeout(() => {\r\n//       setActiveMenu(null);\r\n//       setAnchorEl(null);\r\n//     }, 200); // Reduced timeout for quicker response\r\n//   };\r\n//\r\n//   const handleMenuClose = () => {\r\n//     setActiveMenu(null);\r\n//     setAnchorEl(null);\r\n//   };\r\n//\r\n//   const handleClick = (event, menuKey) => {\r\n//     if (menuKey === 'home') {\r\n//       closeAllMenus(); // Directly close menus for Home\r\n//     } else {\r\n//       if (activeMenu === menuKey) {\r\n//         handleMenuClose();\r\n//       } else {\r\n//         setAnchorEl(event.currentTarget);\r\n//         setActiveMenu(menuKey);\r\n//       }\r\n//     }\r\n//   };\r\n//\r\n//   const handleKeyDown = (event, menuKey) => {\r\n//     if (event.key === 'Enter' || event.key === ' ') {\r\n//       event.preventDefault();\r\n//       handleClick(event, menuKey);\r\n//     }\r\n//   };\r\n//\r\n//   const handleClickAway = () => {\r\n//     handleMenuClose();\r\n//     if (timeoutRef.current) {\r\n//       clearTimeout(timeoutRef.current);\r\n//       timeoutRef.current = null;\r\n//     }\r\n//   };\r\n//\r\n//   return (\r\n//     <ClickAwayListener onClickAway={handleClickAway}>\r\n//       <Box sx={headerStyles.nav}>\r\n//         {Object.entries(navigationItems).map(([key, section]) => (\r\n//           <Box\r\n//             key={key}\r\n//             onMouseEnter={(e) => handleMouseEnter(e, key)}\r\n//             onMouseLeave={handleMouseLeave}\r\n//             sx={{ display: 'inline-block' }}\r\n//           >\r\n//             <Button\r\n//               component={key === 'home' ? RouterLink : 'button'}\r\n//               to={key === 'home' ? section.items[0].path : undefined}\r\n//               color=\"inherit\"\r\n//               endIcon={key !== 'home' ? <KeyboardArrowDownIcon /> : null} // No icon for Home\r\n//               sx={headerStyles.navButton}\r\n//               aria-controls={activeMenu === key ? `${key}-menu` : undefined}\r\n//               aria-haspopup={key !== 'home' ? 'true' : undefined}\r\n//               aria-expanded={activeMenu === key ? 'true' : undefined}\r\n//               onClick={(e) => handleClick(e, key)}\r\n//               onKeyDown={(e) => handleKeyDown(e, key)}\r\n//             >\r\n//               {section.label}\r\n//             </Button>\r\n//\r\n//             {key !== 'home' && (\r\n//               <Menu\r\n//                 id={`${key}-menu`}\r\n//                 anchorEl={anchorEl}\r\n//                 open={activeMenu === key}\r\n//                 onClose={handleMenuClose}\r\n//                 MenuListProps={{\r\n//                   onMouseEnter: () => {\r\n//                     if (timeoutRef.current) {\r\n//                       clearTimeout(timeoutRef.current);\r\n//                       timeoutRef.current = null;\r\n//                     }\r\n//                   },\r\n//                   onMouseLeave: handleMenuClose,\r\n//                 }}\r\n//                 anchorOrigin={{\r\n//                   vertical: 'bottom',\r\n//                   horizontal: 'left',\r\n//                 }}\r\n//                 transformOrigin={{\r\n//                   vertical: 'top',\r\n//                   horizontal: 'left',\r\n//                 }}\r\n//                 disableAutoFocusItem\r\n//               >\r\n//                 <Grid container spacing={2} padding={2}>\r\n//                   {section.items.map((item) => (\r\n//                     <Grid item xs={12} md={4} key={item.id || item.title}>\r\n//                       <motion.div\r\n//                         initial={{ opacity: 0, y: 10 }}\r\n//                         animate={{ opacity: 1, y: 0 }}\r\n//                         transition={{ delay: 0.05 }}\r\n//                       >\r\n//                         <MenuItem\r\n//                           component={RouterLink}\r\n//                           to={item.path}\r\n//                           onClick={closeAllMenus}\r\n//                           sx={headerStyles.dropdownItem}\r\n//                         >\r\n//                           <Box>\r\n//                             <Typography variant=\"subtitle1\">\r\n//                               {item.title}\r\n//                             </Typography>\r\n//                             <Typography variant=\"body2\" color=\"text.secondary\">\r\n//                               {item.description}\r\n//                             </Typography>\r\n//                           </Box>\r\n//                         </MenuItem>\r\n//                       </motion.div>\r\n//                     </Grid>\r\n//                   ))}\r\n//                 </Grid>\r\n//               </Menu>\r\n//             )}\r\n//           </Box>\r\n//         ))}\r\n//       </Box>\r\n//     </ClickAwayListener>\r\n//   );\r\n// };\r\n//\r\n// export default NavigationMenu;\r\n\r\n\r\n\r\n// working but not well\r\n\r\n// import React, { useRef, useEffect } from 'react';\r\n// import {\r\n//   Box,\r\n//   Button,\r\n//   Popper,\r\n//   Paper,\r\n//   Fade,\r\n//   Typography,\r\n//   Grid,\r\n//   ClickAwayListener,\r\n// } from '@mui/material';\r\n// import { useHeaderContext } from '../../contexts/HeaderContext';\r\n// import { Link as RouterLink } from 'react-router-dom';\r\n// import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';\r\n// import { motion } from 'framer-motion';\r\n// import { navigationItems } from './navigationData';\r\n// import { headerStyles } from './styles';\r\n//\r\n// const NavigationMenu = () => {\r\n//   const { activeMenu, setActiveMenu, closeAllMenus } = useHeaderContext();\r\n//   const [anchorEl, setAnchorEl] = React.useState(null);\r\n//   const timeoutRef = useRef(null);\r\n//\r\n//   useEffect(() => {\r\n//     return () => {\r\n//       if (timeoutRef.current) {\r\n//         clearTimeout(timeoutRef.current);\r\n//       }\r\n//     };\r\n//   }, []);\r\n//\r\n//   const handleMouseEnter = (event, menuKey) => {\r\n//     if (menuKey !== 'home') { // Skip dropdown for Home\r\n//       if (timeoutRef.current) {\r\n//         clearTimeout(timeoutRef.current);\r\n//         timeoutRef.current = null;\r\n//       }\r\n//       setAnchorEl(event.currentTarget);\r\n//       setActiveMenu(menuKey);\r\n//     }\r\n//   };\r\n//\r\n//   const handleMouseLeave = () => {\r\n//     setTimeout(() => {\r\n//       setActiveMenu(null);\r\n//       setAnchorEl(null);\r\n//     }, 300);\r\n//   };\r\n//\r\n//   const handlePopperMouseEnter = () => {\r\n//     if (timeoutRef.current) {\r\n//       clearTimeout(timeoutRef.current);\r\n//       timeoutRef.current = null;\r\n//     }\r\n//   };\r\n//\r\n//   const handlePopperMouseLeave = () => {\r\n//     timeoutRef.current = setTimeout(() => {\r\n//       setActiveMenu(null);\r\n//       setAnchorEl(null);\r\n//     }, 300);\r\n//   };\r\n//\r\n//   const handleClick = (event, menuKey) => {\r\n//     if (menuKey === 'home') {\r\n//       closeAllMenus(); // Directly close menus for Home\r\n//     } else {\r\n//       if (activeMenu === menuKey) {\r\n//         setActiveMenu(null);\r\n//         setAnchorEl(null);\r\n//       } else {\r\n//         setAnchorEl(event.currentTarget);\r\n//         setActiveMenu(menuKey);\r\n//       }\r\n//     }\r\n//   };\r\n//\r\n//   const handleKeyDown = (event, menuKey) => {\r\n//     if (event.key === 'Enter' || event.key === ' ') {\r\n//       event.preventDefault();\r\n//       handleClick(event, menuKey);\r\n//     }\r\n//   };\r\n//\r\n//   const handleClickAway = () => {\r\n//     closeAllMenus();\r\n//     if (timeoutRef.current) {\r\n//       clearTimeout(timeoutRef.current);\r\n//       timeoutRef.current = null;\r\n//     }\r\n//   };\r\n//\r\n//   return (\r\n//     <Box sx={headerStyles.nav}>\r\n//       {Object.entries(navigationItems).map(([key, section]) => (\r\n//         <Box\r\n//           key={key}\r\n//           onMouseEnter={(e) => handleMouseEnter(e, key)}\r\n//           onMouseLeave={handleMouseLeave}\r\n//           sx={{ display: 'inline-block' }}\r\n//         >\r\n//           <Button\r\n//             component={RouterLink}\r\n//             to={section.items[0].path} // Direct link for Home\r\n//             color=\"inherit\"\r\n//             endIcon={key !== 'home' ? <KeyboardArrowDownIcon /> : null} // No icon for Home\r\n//             sx={headerStyles.navButton}\r\n//             aria-controls={activeMenu === key ? `${key}-menu` : undefined}\r\n//             aria-haspopup=\"true\"\r\n//             aria-expanded={activeMenu === key ? 'true' : undefined}\r\n//             onClick={(e) => handleClick(e, key)}\r\n//             onKeyDown={(e) => handleKeyDown(e, key)}\r\n//           >\r\n//             {section.label}\r\n//           </Button>\r\n//           {key !== 'home' && (\r\n//             <Popper\r\n//               id={`${key}-menu`}\r\n//               open={activeMenu === key}\r\n//               anchorEl={anchorEl}\r\n//               placement=\"bottom-start\"\r\n//               transition\r\n//               disablePortal\r\n//               sx={headerStyles.popper}\r\n//               onMouseEnter={handlePopperMouseEnter}\r\n//               onMouseLeave={handlePopperMouseLeave}\r\n//             >\r\n//               {({ TransitionProps }) => (\r\n//                 <Fade {...TransitionProps} timeout={200}>\r\n//                   <Paper\r\n//                     sx={headerStyles.dropdownPaper}\r\n//                     onMouseEnter={handlePopperMouseEnter}\r\n//                     onMouseLeave={handlePopperMouseLeave}\r\n//                   >\r\n//                     <ClickAwayListener onClickAway={handleClickAway}>\r\n//                       <Grid container spacing={2} padding={2}>\r\n//                         {section.items.map((item) => (\r\n//                           <Grid item xs={12} md={4} key={item.id || item.title}>\r\n//                             <motion.div\r\n//                               initial={{ opacity: 0, y: 20 }}\r\n//                               animate={{ opacity: 1, y: 0 }}\r\n//                               transition={{ delay: 0.1 }}\r\n//                             >\r\n//                               <Button\r\n//                                 component={RouterLink}\r\n//                                 to={item.path}\r\n//                                 onClick={closeAllMenus}\r\n//                                 sx={headerStyles.dropdownItem}\r\n//                                 fullWidth\r\n//                                 startIcon={<item.icon sx={{ mr: 2 }} />}\r\n//                                 aria-label={item.title}\r\n//                               >\r\n//                                 <Box textAlign=\"left\">\r\n//                                   <Typography variant=\"subtitle1\">\r\n//                                     {item.title}\r\n//                                   </Typography>\r\n//                                   <Typography variant=\"body2\" color=\"text.secondary\">\r\n//                                     {item.description}\r\n//                                   </Typography>\r\n//                                 </Box>\r\n//                               </Button>\r\n//                             </motion.div>\r\n//                           </Grid>\r\n//                         ))}\r\n//                       </Grid>\r\n//                     </ClickAwayListener>\r\n//                   </Paper>\r\n//                 </Fade>\r\n//               )}\r\n//             </Popper>\r\n//           )}\r\n//         </Box>\r\n//       ))}\r\n//     </Box>\r\n//   );\r\n// };\r\n//\r\n// export default NavigationMenu;\r\n\r\n\r\n// // src/components/Header/NavigationMenu.js\r\n// import React, { useRef, useEffect } from 'react';\r\n// import {\r\n//   Box,\r\n//   Button,\r\n//   Popper,\r\n//   Paper,\r\n//   Fade,\r\n//   Typography,\r\n//   Grid,\r\n//   ClickAwayListener,\r\n// } from '@mui/material';\r\n// import { useHeaderContext } from '../../contexts/HeaderContext';\r\n// import { Link as RouterLink } from 'react-router-dom';\r\n// import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';\r\n// import { motion } from 'framer-motion';\r\n// import { navigationItems } from './navigationData';\r\n// import { headerStyles } from './styles';\r\n//\r\n// const NavigationMenu = () => {\r\n//   const { activeMenu, setActiveMenu, closeAllMenus } = useHeaderContext();\r\n//   const [anchorEl, setAnchorEl] = React.useState(null);\r\n//   const timeoutRef = useRef(null);\r\n//\r\n//   // Clean up timeout on unmount to prevent memory leaks\r\n//   useEffect(() => {\r\n//     return () => {\r\n//       if (timeoutRef.current) {\r\n//         clearTimeout(timeoutRef.current);\r\n//       }\r\n//     };\r\n//   }, []);\r\n//\r\n//   // const handleMouseEnter = (event, menuId) => {\r\n//   //   setAnchorEl(event.currentTarget);\r\n//   //   setActiveMenu(menuId);\r\n//   // };\r\n//\r\n//     // Handle mouse entering a menu button\r\n//   const handleMouseEnter = (event, menuKey) => {\r\n//     if (timeoutRef.current) {\r\n//       clearTimeout(timeoutRef.current);\r\n//       timeoutRef.current = null;\r\n//     }\r\n//     setAnchorEl(event.currentTarget);\r\n//     setActiveMenu(menuKey);\r\n//   };\r\n//\r\n//   const handleMouseLeave = () => {\r\n//     // Delay closing to allow for hover on Popper\r\n//     setTimeout(() => {\r\n//       setActiveMenu(null);\r\n//       setAnchorEl(null);\r\n//     }, 300);\r\n//   };\r\n//\r\n//\r\n//   // const handlePopperMouseEnter = () => {\r\n//   //   // Prevent menu from closing when hovering over the Popper\r\n//   //   clearTimeout();\r\n//   // };\r\n//\r\n//     // Handle mouse entering the Popper\r\n//   const handlePopperMouseEnter = () => {\r\n//     // Clear timeout to keep the menu open while hovering over it\r\n//     if (timeoutRef.current) {\r\n//       clearTimeout(timeoutRef.current);\r\n//       timeoutRef.current = null;\r\n//     }\r\n//   };\r\n//\r\n//     // Handle mouse leaving the Popper\r\n//   const handlePopperMouseLeave = () => {\r\n//     // Set a timeout to close the menu when the cursor leaves the Popper\r\n//     timeoutRef.current = setTimeout(() => {\r\n//       setActiveMenu(null);\r\n//       setAnchorEl(null);\r\n//     }, 300); // Same delay as handleMouseLeave\r\n//   };\r\n//\r\n//\r\n//     // Handle click on a menu button (for accessibility and touch devices)\r\n//   const handleClick = (event, menuKey) => {\r\n//     if (activeMenu === menuKey) {\r\n//       setActiveMenu(null);\r\n//       setAnchorEl(null);\r\n//     } else {\r\n//       setAnchorEl(event.currentTarget);\r\n//       setActiveMenu(menuKey);\r\n//     }\r\n//   };\r\n//\r\n//     // Handle keyboard events for accessibility\r\n//   const handleKeyDown = (event, menuKey) => {\r\n//     if (event.key === 'Enter' || event.key === ' ') {\r\n//       event.preventDefault();\r\n//       handleClick(event, menuKey);\r\n//     }\r\n//   };\r\n//\r\n//   // Handle clicking away from the menu to close it\r\n//   const handleClickAway = () => {\r\n//     closeAllMenus();\r\n//     if (timeoutRef.current) {\r\n//       clearTimeout(timeoutRef.current);\r\n//       timeoutRef.current = null;\r\n//     }\r\n//   };\r\n//\r\n//   return (\r\n//     <Box sx={headerStyles.nav}>\r\n//       {Object.entries(navigationItems).map(([key, section]) => (\r\n//         <Box\r\n//           key={key}\r\n//           onMouseEnter={(e) => handleMouseEnter(e, key)}\r\n//           onMouseLeave={handleMouseLeave}\r\n//           sx={{ display: 'inline-block' }} // Ensure proper layout\r\n//         >\r\n//           <Button\r\n//             color=\"inherit\"\r\n//             endIcon={<KeyboardArrowDownIcon />}\r\n//             sx={headerStyles.navButton}\r\n//             aria-controls={activeMenu === key ? `${key}-menu` : undefined}\r\n//             aria-haspopup=\"true\"\r\n//             aria-expanded={activeMenu === key ? 'true' : undefined}\r\n//           >\r\n//             {section.label}\r\n//           </Button>\r\n//           <Popper\r\n//             id={`${key}-menu`}\r\n//             open={activeMenu === key}\r\n//             anchorEl={anchorEl}\r\n//             placement=\"bottom-start\"\r\n//             transition\r\n//             disablePortal\r\n//             sx={headerStyles.popper}\r\n//             onMouseEnter={handlePopperMouseEnter}\r\n//             onMouseLeave={handleMouseLeave}\r\n//           >\r\n//             {({ TransitionProps }) => (\r\n//               <Fade {...TransitionProps} timeout={200}>\r\n//                 <Paper\r\n//                   sx={headerStyles.dropdownPaper}\r\n//                   onMouseEnter={handlePopperMouseEnter}\r\n//                   onMouseLeave={handleMouseLeave}\r\n//                 >\r\n//                   <ClickAwayListener onClickAway={closeAllMenus}>\r\n//                     <Grid container spacing={2} padding={2}>\r\n//                       {section.items.map((item) => (\r\n//                         <Grid item xs={12} md={4} key={item.id || item.title}>\r\n//                           <motion.div\r\n//                             initial={{ opacity: 0, y: 20 }}\r\n//                             animate={{ opacity: 1, y: 0 }}\r\n//                             transition={{ delay: 0.1 }}\r\n//                           >\r\n//                             <Button\r\n//                               component={RouterLink}\r\n//                               to={item.path}\r\n//                               onClick={closeAllMenus}\r\n//                               sx={headerStyles.dropdownItem}\r\n//                               fullWidth\r\n//                               startIcon={<item.icon sx={{ mr: 2 }} />}\r\n//                               aria-label={item.title}\r\n//                             >\r\n//                               <Box textAlign=\"left\">\r\n//                                 <Typography variant=\"subtitle1\">\r\n//                                   {item.title}\r\n//                                 </Typography>\r\n//                                 <Typography variant=\"body2\" color=\"text.secondary\">\r\n//                                   {item.description}\r\n//                                 </Typography>\r\n//                               </Box>\r\n//                             </Button>\r\n//                           </motion.div>\r\n//                         </Grid>\r\n//                       ))}\r\n//                     </Grid>\r\n//                   </ClickAwayListener>\r\n//                 </Paper>\r\n//               </Fade>\r\n//             )}\r\n//           </Popper>\r\n//         </Box>\r\n//       ))}\r\n//     </Box>\r\n//   );\r\n// };\r\n//\r\n// export default NavigationMenu;\r\n\r\n\r\n\r\n// // src/components/Header/NavigationMenu.js\r\n// import React from 'react';\r\n// import {\r\n//   Box,\r\n//   Button,\r\n//   Popper,\r\n//   Paper,\r\n//   Fade,\r\n//   Typography,\r\n//   Grid,\r\n//   ClickAwayListener,\r\n// } from '@mui/material';\r\n// import { useHeaderContext } from '../../contexts/HeaderContext';\r\n// import { Link as RouterLink } from 'react-router-dom';\r\n// import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';\r\n// import { motion } from 'framer-motion';\r\n// import { navigationItems } from './navigationData';\r\n// import { headerStyles } from './styles';\r\n//\r\n// const NavigationMenu = () => {\r\n//   const { activeMenu, setActiveMenu, closeAllMenus } = useHeaderContext();\r\n//   const [anchorEl, setAnchorEl] = React.useState(null);\r\n//\r\n//   const handleMouseEnter = (event, menuId) => {\r\n//     setAnchorEl(event.currentTarget);\r\n//     setActiveMenu(menuId);\r\n//   };\r\n//\r\n//   const handleMouseLeave = () => {\r\n//     // Delay closing to allow for hover on Popper\r\n//     setTimeout(() => {\r\n//       setActiveMenu(null);\r\n//       setAnchorEl(null);\r\n//     }, 200);\r\n//   };\r\n//\r\n//   const handlePopperMouseEnter = () => {\r\n//     // Prevent menu from closing when hovering over the Popper\r\n//     clearTimeout();\r\n//   };\r\n//\r\n//   return (\r\n//     <Box sx={headerStyles.nav}>\r\n//       {Object.entries(navigationItems).map(([key, section]) => (\r\n//         <Box\r\n//           key={key}\r\n//           onMouseEnter={(e) => handleMouseEnter(e, key)}\r\n//           onMouseLeave={handleMouseLeave}\r\n//           sx={{ display: 'inline-block' }} // Ensure proper layout\r\n//         >\r\n//           <Button\r\n//             color=\"inherit\"\r\n//             endIcon={<KeyboardArrowDownIcon />}\r\n//             sx={headerStyles.navButton}\r\n//             aria-controls={activeMenu === key ? `${key}-menu` : undefined}\r\n//             aria-haspopup=\"true\"\r\n//             aria-expanded={activeMenu === key ? 'true' : undefined}\r\n//           >\r\n//             {section.label}\r\n//           </Button>\r\n//           <Popper\r\n//             id={`${key}-menu`}\r\n//             open={activeMenu === key}\r\n//             anchorEl={anchorEl}\r\n//             placement=\"bottom-start\"\r\n//             transition\r\n//             disablePortal\r\n//             sx={headerStyles.popper}\r\n//             onMouseEnter={handlePopperMouseEnter}\r\n//             onMouseLeave={handleMouseLeave}\r\n//           >\r\n//             {({ TransitionProps }) => (\r\n//               <Fade {...TransitionProps} timeout={200}>\r\n//                 <Paper\r\n//                   sx={headerStyles.dropdownPaper}\r\n//                   onMouseEnter={handlePopperMouseEnter}\r\n//                   onMouseLeave={handleMouseLeave}\r\n//                 >\r\n//                   <ClickAwayListener onClickAway={closeAllMenus}>\r\n//                     <Grid container spacing={2} padding={2}>\r\n//                       {section.items.map((item) => (\r\n//                         <Grid item xs={12} md={4} key={item.id || item.title}>\r\n//                           <motion.div\r\n//                             initial={{ opacity: 0, y: 20 }}\r\n//                             animate={{ opacity: 1, y: 0 }}\r\n//                             transition={{ delay: 0.1 }}\r\n//                           >\r\n//                             <Button\r\n//                               component={RouterLink}\r\n//                               to={item.path}\r\n//                               onClick={closeAllMenus}\r\n//                               sx={headerStyles.dropdownItem}\r\n//                               fullWidth\r\n//                               startIcon={<item.icon sx={{ mr: 2 }} />}\r\n//                               aria-label={item.title}\r\n//                             >\r\n//                               <Box textAlign=\"left\">\r\n//                                 <Typography variant=\"subtitle1\">\r\n//                                   {item.title}\r\n//                                 </Typography>\r\n//                                 <Typography variant=\"body2\" color=\"text.secondary\">\r\n//                                   {item.description}\r\n//                                 </Typography>\r\n//                               </Box>\r\n//                             </Button>\r\n//                           </motion.div>\r\n//                         </Grid>\r\n//                       ))}\r\n//                     </Grid>\r\n//                   </ClickAwayListener>\r\n//                 </Paper>\r\n//               </Fade>\r\n//             )}\r\n//           </Popper>\r\n//         </Box>\r\n//       ))}\r\n//     </Box>\r\n//   );\r\n// };\r\n//\r\n// export default NavigationMenu;\r\n\r\n\r\n\r\n// // src/components/Header/NavigationMenu.js\r\n// import React from 'react';\r\n// import {\r\n//   Box,\r\n//   Button,\r\n//   Popper,\r\n//   Paper,\r\n//   Fade,\r\n//   Typography,\r\n//   Grid,\r\n// } from '@mui/material';\r\n// import { useHeaderContext } from '../../contexts/HeaderContext';\r\n// import { Link as RouterLink } from 'react-router-dom';\r\n// import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';\r\n// import { motion } from 'framer-motion';\r\n// import { navigationItems } from './navigationData';\r\n// import { headerStyles } from './styles';\r\n//\r\n// const NavigationMenu = () => {\r\n//   const { activeMenu, setActiveMenu, closeAllMenus } = useHeaderContext();\r\n//   const [anchorEl, setAnchorEl] = React.useState(null);\r\n//\r\n//   const handleMouseEnter = (event, menuId) => {\r\n//     setAnchorEl(event.currentTarget);\r\n//     setActiveMenu(menuId);\r\n//   };\r\n//\r\n//   const handleMouseLeave = () => {\r\n//     setActiveMenu(null);\r\n//     setAnchorEl(null);\r\n//   };\r\n//\r\n//   return (\r\n//     <Box sx={headerStyles.nav}>\r\n//       {Object.entries(navigationItems).map(([key, section]) => (\r\n//         <Box\r\n//           key={key}\r\n//           onMouseEnter={(e) => handleMouseEnter(e, key)}\r\n//           onMouseLeave={handleMouseLeave}\r\n//         >\r\n//           <Button\r\n//             color=\"inherit\"\r\n//             endIcon={<KeyboardArrowDownIcon />}\r\n//             sx={headerStyles.navButton}\r\n//           >\r\n//             {section.label}\r\n//           </Button>\r\n//           <Popper\r\n//             open={activeMenu === key}\r\n//             anchorEl={anchorEl}\r\n//             placement=\"bottom-start\"\r\n//             transition\r\n//             sx={headerStyles.popper}\r\n//           >\r\n//             {({ TransitionProps }) => (\r\n//               <Fade {...TransitionProps} timeout={200}>\r\n//                 <Paper sx={headerStyles.dropdownPaper}>\r\n//                   <Grid container spacing={2}>\r\n//                     {section.items.map((item, index) => (\r\n//                       <Grid item xs={12} md={4} key={index}>\r\n//                         <motion.div\r\n//                           initial={{ opacity: 0, y: 20 }}\r\n//                           animate={{ opacity: 1, y: 0 }}\r\n//                           transition={{ delay: index * 0.1 }}\r\n//                         >\r\n//                           <Button\r\n//                             component={RouterLink}\r\n//                             to={item.path}\r\n//                             onClick={closeAllMenus}\r\n//                             sx={headerStyles.dropdownItem}\r\n//                             fullWidth\r\n//                           >\r\n//                             <item.icon sx={{ mr: 2 }} />\r\n//                             <Box>\r\n//                               <Typography variant=\"subtitle1\">\r\n//                                 {item.title}\r\n//                               </Typography>\r\n//                               <Typography variant=\"body2\" color=\"text.secondary\">\r\n//                                 {item.description}\r\n//                               </Typography>\r\n//                             </Box>\r\n//                           </Button>\r\n//                         </motion.div>\r\n//                       </Grid>\r\n//                     ))}\r\n//                   </Grid>\r\n//                 </Paper>\r\n//               </Fade>\r\n//             )}\r\n//           </Popper>\r\n//         </Box>\r\n//       ))}\r\n//     </Box>\r\n//   );\r\n// };\r\n//\r\n// export default NavigationMenu;\r\n//\r\n","// // ActionsMenu.js\r\n// import React from 'react';\r\n// import { IconButton, Tooltip } from '@mui/material';\r\n// import {\r\n//   Search as SearchIcon,\r\n//   AccountCircle,\r\n// } from '@mui/icons-material';\r\n// import { Link as RouterLink } from 'react-router-dom';\r\n//\r\n// const ActionsMenu = ({ onSearchClick, isMobile }) => {\r\n//   return (\r\n//     <>\r\n//       <Tooltip title=\"Search\">\r\n//         <IconButton\r\n//           color=\"inherit\"\r\n//           onClick={onSearchClick}\r\n//           aria-label=\"open search\"\r\n//         >\r\n//           <SearchIcon />\r\n//         </IconButton>\r\n//       </Tooltip>\r\n//\r\n//       <Tooltip title=\"Account\">\r\n//         <IconButton\r\n//           color=\"inherit\"\r\n//           component={RouterLink}\r\n//           to=\"/account\"\r\n//           aria-label=\"account\"\r\n//         >\r\n//           <AccountCircle />\r\n//         </IconButton>\r\n//       </Tooltip>\r\n//     </>\r\n//   );\r\n// };\r\n//\r\n// export default ActionsMenu;\r\n\r\n\r\n\r\n// src/components/Header/ActionsMenu.js\r\n\r\nimport React from 'react';\r\nimport { IconButton, Tooltip } from '@mui/material';\r\nimport {\r\n  Search as SearchIcon,\r\n  Notifications as NotificationsIcon,\r\n  AccountCircle as AccountCircleIcon,\r\n} from '@mui/icons-material';\r\nimport { headerStyles } from './styles';\r\nimport { Link as RouterLink } from 'react-router-dom';\r\n\r\nconst ActionsMenu = ({ onSearchClick, onMobileMenuClick, isMobile }) => {\r\n  return (\r\n    <>\r\n      <Tooltip title=\"Search\">\r\n        <IconButton\r\n          color=\"inherit\"\r\n          onClick={onSearchClick}\r\n          sx={headerStyles.actionIcon}\r\n          aria-label=\"search\"\r\n        >\r\n          <SearchIcon />\r\n        </IconButton>\r\n      </Tooltip>\r\n\r\n      {/*<Tooltip title=\"Notifications\">*/}\r\n      {/*  <IconButton*/}\r\n      {/*    color=\"inherit\"*/}\r\n      {/*    sx={headerStyles.actionIcon}*/}\r\n      {/*    aria-label=\"notifications\"*/}\r\n      {/*  >*/}\r\n      {/*    /!*<NotificationsIcon />*!/*/}\r\n      {/*  </IconButton>*/}\r\n      {/*</Tooltip>*/}\r\n\r\n      <Tooltip title=\"Account\">\r\n        <IconButton\r\n          color=\"inherit\"\r\n          component={RouterLink}\r\n          to=\"/account\" // Ensure this route exists\r\n          sx={headerStyles.actionIcon}\r\n          aria-label=\"account\"\r\n        >\r\n          <AccountCircleIcon />\r\n        </IconButton>\r\n      </Tooltip>\r\n    </>\r\n  );\r\n};\r\n\r\nexport default ActionsMenu;\r\n\r\n\r\n// // src/components/Header/ActionsMenu.js\r\n// import React from 'react';\r\n// import {\r\n//   Box,\r\n//   Button,\r\n//   IconButton,\r\n//   Badge,\r\n//   Tooltip,\r\n// } from '@mui/material';\r\n// import {\r\n//   Search as SearchIcon,\r\n//   Notifications as NotificationsIcon,\r\n// } from '@mui/icons-material';\r\n// import { Link as RouterLink } from 'react-router-dom';\r\n// import { useHeaderContext } from '../../contexts/HeaderContext';\r\n// import { motion } from 'framer-motion';\r\n// import { headerStyles } from './styles';\r\n//\r\n// const ActionsMenu = ({ isMobile }) => {\r\n//   const { toggleSearch } = useHeaderContext();\r\n//\r\n//   return (\r\n//     <Box sx={headerStyles.actions}>\r\n//       <motion.div whileHover={{ scale: 1.05 }}>\r\n//         <Tooltip title=\"Search (⌘K)\">\r\n//           <IconButton\r\n//             onClick={toggleSearch}\r\n//             color=\"inherit\"\r\n//             sx={headerStyles.actionIcon}\r\n//           >\r\n//             <SearchIcon />\r\n//           </IconButton>\r\n//         </Tooltip>\r\n//       </motion.div>\r\n//\r\n//       {!isMobile && (\r\n//         <>\r\n//           <motion.div whileHover={{ scale: 1.05 }}>\r\n//             <Tooltip title=\"Notifications\">\r\n//               <IconButton color=\"inherit\" sx={headerStyles.actionIcon}>\r\n//                 <Badge badgeContent={3} color=\"error\">\r\n//                   <NotificationsIcon />\r\n//                 </Badge>\r\n//               </IconButton>\r\n//             </Tooltip>\r\n//           </motion.div>\r\n//\r\n//           <motion.div whileHover={{ scale: 1.05 }}>\r\n//             <Button\r\n//               component={RouterLink}\r\n//               to=\"/login\"\r\n//               variant=\"outlined\"\r\n//               color=\"inherit\"\r\n//               sx={headerStyles.loginButton}\r\n//             >\r\n//               Log in\r\n//             </Button>\r\n//           </motion.div>\r\n//\r\n//           <motion.div whileHover={{ scale: 1.05 }}>\r\n//             <Button\r\n//               component={RouterLink}\r\n//               to=\"/get-started\"\r\n//               variant=\"contained\"\r\n//               color=\"primary\"\r\n//               sx={headerStyles.ctaButton}\r\n//             >\r\n//               Get Started\r\n//             </Button>\r\n//           </motion.div>\r\n//         </>\r\n//       )}\r\n//     </Box>\r\n//   );\r\n// };\r\n//\r\n// export default ActionsMenu;","// src/components/Header/MobileMenu.js\r\n\r\nimport React from 'react';\r\nimport {\r\n  Drawer,\r\n  List,\r\n  ListItem,\r\n  ListItemText,\r\n  ListItemIcon,\r\n  IconButton,\r\n  Box,\r\n  Typography,\r\n  Divider,\r\n  Button,\r\n} from '@mui/material';\r\nimport { Close as CloseIcon } from '@mui/icons-material';\r\nimport { motion } from 'framer-motion'; // Ensure motion is imported\r\nimport { Link as RouterLink } from 'react-router-dom';\r\nimport { navigationItems } from './navigationData';\r\nimport { headerStyles } from './styles';\r\n\r\nconst MobileMenu = ({ open, onClose }) => {\r\n  return (\r\n    <Drawer\r\n      anchor=\"right\"\r\n      open={open}\r\n      onClose={onClose}\r\n      PaperProps={{\r\n        sx: headerStyles.mobileMenu,\r\n      }}\r\n    >\r\n      <Box\r\n        p={2}\r\n        display=\"flex\"\r\n        justifyContent=\"space-between\"\r\n        alignItems=\"center\"\r\n      >\r\n        <Typography variant=\"h6\">Menu</Typography>\r\n        <IconButton onClick={onClose} aria-label=\"close mobile menu\">\r\n          <CloseIcon />\r\n        </IconButton>\r\n      </Box>\r\n      <Divider />\r\n      <List>\r\n        {Object.entries(navigationItems).map(([key, section]) => (\r\n          <React.Fragment key={key}>\r\n            <ListItem>\r\n              <ListItemText\r\n                primary={section.label}\r\n                primaryTypographyProps={{\r\n                  variant: 'overline',\r\n                  color: 'text.secondary',\r\n                }}\r\n              />\r\n            </ListItem>\r\n            {section.items.map((item, index) => (\r\n              <motion.div\r\n                key={item.path}\r\n                initial={{ opacity: 0, x: 20 }}\r\n                animate={{ opacity: 1, x: 0 }}\r\n                transition={{ delay: index * 0.1 }}\r\n              >\r\n                <ListItem\r\n                  button\r\n                  component={RouterLink}\r\n                  to={item.path}\r\n                  onClick={onClose}\r\n                >\r\n                  <ListItemIcon>\r\n                    <item.icon />\r\n                  </ListItemIcon>\r\n                  <ListItemText\r\n                    primary={item.title}\r\n                    secondary={item.description}\r\n                  />\r\n                </ListItem>\r\n              </motion.div>\r\n            ))}\r\n            <Divider sx={{ my: 2 }} />\r\n          </React.Fragment>\r\n        ))}\r\n      </List>\r\n      <Box p={2}>\r\n        <Button\r\n          fullWidth\r\n          variant=\"contained\"\r\n          color=\"primary\"\r\n          component={RouterLink}\r\n          to=\"/get-started\"\r\n          onClick={onClose}\r\n          sx={{ mb: 1 }}\r\n        >\r\n          Get Started\r\n        </Button>\r\n        <Button\r\n          fullWidth\r\n          variant=\"outlined\"\r\n          component={RouterLink}\r\n          to=\"/login\"\r\n          onClick={onClose}\r\n        >\r\n          Log in\r\n        </Button>\r\n      </Box>\r\n    </Drawer>\r\n  );\r\n};\r\n\r\nexport default MobileMenu;\r\n\r\n// // src/components/Header/MobileMenu.js\r\n// import React from 'react';\r\n// import {\r\n//   Drawer,\r\n//   List,\r\n//   ListItem,\r\n//   ListItemText,\r\n//   ListItemIcon,\r\n//   IconButton,\r\n//   Box,\r\n//   Typography,\r\n//   Divider,\r\n//   Button,\r\n// } from '@mui/material';\r\n// import { Close as CloseIcon } from '@mui/icons-material';\r\n// import { motion } from 'framer-motion'; // Ensure motion is imported\r\n// import { Link as RouterLink } from 'react-router-dom';\r\n// import { navigationItems } from './navigationData';\r\n// import { headerStyles } from './styles';\r\n//\r\n// const MobileMenu = ({ open, onClose }) => {\r\n//   return (\r\n//     <Drawer\r\n//       anchor=\"right\"\r\n//       open={open}\r\n//       onClose={onClose}\r\n//       PaperProps={{\r\n//         sx: headerStyles.mobileMenu,\r\n//       }}\r\n//     >\r\n//       <Box p={2} display=\"flex\" justifyContent=\"space-between\" alignItems=\"center\">\r\n//         <Typography variant=\"h6\">Menu</Typography>\r\n//         <IconButton onClick={onClose}>\r\n//           <CloseIcon />\r\n//         </IconButton>\r\n//       </Box>\r\n//       <Divider />\r\n//       <List>\r\n//         {Object.entries(navigationItems).map(([key, section]) => (\r\n//           <React.Fragment key={key}>\r\n//             <ListItem>\r\n//               <ListItemText\r\n//                 primary={section.label}\r\n//                 primaryTypographyProps={{\r\n//                   variant: 'overline',\r\n//                   color: 'text.secondary',\r\n//                 }}\r\n//               />\r\n//             </ListItem>\r\n//             {section.items.map((item, index) => (\r\n//               <motion.div\r\n//                 key={item.path}\r\n//                 initial={{ opacity: 0, x: 20 }}\r\n//                 animate={{ opacity: 1, x: 0 }}\r\n//                 transition={{ delay: index * 0.1 }}\r\n//               >\r\n//                 <ListItem\r\n//                   button\r\n//                   component={RouterLink}\r\n//                   to={item.path}\r\n//                   onClick={onClose}\r\n//                 >\r\n//                   <ListItemIcon>\r\n//                     <item.icon />\r\n//                   </ListItemIcon>\r\n//                   <ListItemText\r\n//                     primary={item.title}\r\n//                     secondary={item.description}\r\n//                   />\r\n//                 </ListItem>\r\n//               </motion.div>\r\n//             ))}\r\n//             <Divider sx={{ my: 2 }} />\r\n//           </React.Fragment>\r\n//         ))}\r\n//       </List>\r\n//       <Box p={2}>\r\n//         <Button\r\n//           fullWidth\r\n//           variant=\"contained\"\r\n//           color=\"primary\"\r\n//           component={RouterLink}\r\n//           to=\"/get-started\"\r\n//           onClick={onClose}\r\n//           sx={{ mb: 1 }}\r\n//         >\r\n//           Get Started\r\n//         </Button>\r\n//         <Button\r\n//           fullWidth\r\n//           variant=\"outlined\"\r\n//           component={RouterLink}\r\n//           to=\"/login\"\r\n//           onClick={onClose}\r\n//         >\r\n//           Log in\r\n//         </Button>\r\n//       </Box>\r\n//     </Drawer>\r\n//   );\r\n// };\r\n//\r\n// export default MobileMenu;\r\n\r\n// // src/components/Header/MobileMenu.js\r\n// import React from 'react';\r\n// import {\r\n//   Drawer,\r\n//   List,\r\n//   ListItem,\r\n//   ListItemText,\r\n//   ListItemIcon,\r\n//   IconButton,\r\n//   Box,\r\n//   Typography,\r\n//   Divider,\r\n//   Button,\r\n// } from '@mui/material';\r\n// import { Close as CloseIcon } from '@mui/icons-material';\r\n// import { motion, AnimatePresence } from 'framer-motion';\r\n// import { Link as RouterLink } from 'react-router-dom';\r\n// import { navigationItems } from './navigationData';\r\n// import { headerStyles } from './styles';\r\n//\r\n// const MobileMenu = ({ open, onClose }) => {\r\n//   return (\r\n//     <Drawer\r\n//       anchor=\"right\"\r\n//       open={open}\r\n//       onClose={onClose}\r\n//       PaperProps={{\r\n//         sx: headerStyles.mobileMenu,\r\n//       }}\r\n//     >\r\n//       <Box p={2} display=\"flex\" justifyContent=\"space-between\" alignItems=\"center\">\r\n//         <Typography variant=\"h6\">Menu</Typography>\r\n//         <IconButton onClick={onClose}>\r\n//           <CloseIcon />\r\n//         </IconButton>\r\n//       </Box>\r\n//       <Divider />\r\n//       <List>\r\n//         {Object.entries(navigationItems).map(([key, section]) => (\r\n//           <React.Fragment key={key}>\r\n//             <ListItem>\r\n//               <ListItemText\r\n//                 primary={section.label}\r\n//                 primaryTypographyProps={{\r\n//                   variant: 'overline',\r\n//                   color: 'text.secondary',\r\n//                 }}\r\n//               />\r\n//             </ListItem>\r\n//             {section.items.map((item, index) => (\r\n//               <motion.div\r\n//                 key={item.path}\r\n//                 initial={{ opacity: 0, x: 20 }}\r\n//                 animate={{ opacity: 1, x: 0 }}\r\n//                 transition={{ delay: index * 0.1 }}\r\n//               >\r\n//                 <ListItem\r\n//                   button\r\n//                   component={RouterLink}\r\n//                   to={item.path}\r\n//                   onClick={onClose}\r\n//                 >\r\n//                   <ListItemIcon>\r\n//                     <item.icon />\r\n//                   </ListItemIcon>\r\n//                   <ListItemText\r\n//                     primary={item.title}\r\n//                     secondary={item.description}\r\n//                   />\r\n//                 </ListItem>\r\n//               </motion.div>\r\n//             ))}\r\n//             <Divider sx={{ my: 2 }} />\r\n//           </React.Fragment>\r\n//         ))}\r\n//       </List>\r\n//       <Box p={2}>\r\n//         <Button\r\n//           fullWidth\r\n//           variant=\"contained\"\r\n//           color=\"primary\"\r\n//           component={RouterLink}\r\n//           to=\"/get-started\"\r\n//           onClick={onClose}\r\n//           sx={{ mb: 1 }}\r\n//         >\r\n//           Get Started\r\n//         </Button>\r\n//         <Button\r\n//           fullWidth\r\n//           variant=\"outlined\"\r\n//           component={RouterLink}\r\n//           to=\"/login\"\r\n//           onClick={onClose}\r\n//         >\r\n//           Log in\r\n//         </Button>\r\n//       </Box>\r\n//     </Drawer>\r\n//   );\r\n// };\r\n//\r\n// export default MobileMenu;\r\n\r\n\r\n// // src/components/Header/MobileMenu.js\r\n// import React from 'react';\r\n// import {\r\n//   Drawer,\r\n//   List,\r\n//   ListItem,\r\n//   ListItemText,\r\n//   ListItemIcon,\r\n//   IconButton,\r\n//   Box,\r\n//   Typography,\r\n//   Divider,\r\n//   Button,\r\n// } from '@mui/material';\r\n// import { Close as CloseIcon } from '@mui/icons-material';\r\n// import { motion, AnimatePresence } from 'framer-motion';\r\n// import { Link as RouterLink } from 'react-router-dom';\r\n// import { navigationItems } from './navigationData';\r\n// import { headerStyles } from './styles';\r\n//\r\n// const MobileMenu = ({ open, onClose }) => {\r\n//   return (\r\n//     <Drawer\r\n//       anchor=\"right\"\r\n//       open={open}\r\n//       onClose={onClose}\r\n//       PaperProps={{\r\n//         sx: headerStyles.mobileMenu,\r\n//       }}\r\n//     >\r\n//       <Box p={2} display=\"flex\" justifyContent=\"space-between\" alignItems=\"center\">\r\n//         <Typography variant=\"h6\">Menu</Typography>\r\n//         <IconButton onClick={onClose}>\r\n//           <CloseIcon />\r\n//         </IconButton>\r\n//       </Box>\r\n//       <Divider />\r\n//       <List>\r\n//         {Object.entries(navigationItems).map(([key, section]) => (\r\n//           <React.Fragment key={key}>\r\n//             <ListItem>\r\n//               <ListItemText\r\n//                 primary={section.label}\r\n//                 primaryTypographyProps={{\r\n//                   variant: 'overline',\r\n//                   color: 'text.secondary',\r\n//                 }}\r\n//               />\r\n//             </ListItem>\r\n//             {section.items.map((item, index) => (\r\n//               <motion.div\r\n//                 key={item.path}\r\n//                 initial={{ opacity: 0, x: 20 }}\r\n//                 animate={{ opacity: 1, x: 0 }}\r\n//                 transition={{ delay: index * 0.1 }}\r\n//               >\r\n//                 <ListItem\r\n//                   button\r\n//                   component={RouterLink}\r\n//                   to={item.path}\r\n//                   onClick={onClose}\r\n//                 >\r\n//                   <ListItemIcon>\r\n//                     <item.icon />\r\n//                   </ListItemIcon>\r\n//                   <ListItemText\r\n//                     primary={item.title}\r\n//                     secondary={item.description}\r\n//                   />\r\n//                 </ListItem>\r\n//               </motion.div>\r\n//             ))}\r\n//             <Divider sx={{ my: 2 }} />\r\n//           </React.Fragment>\r\n//         ))}\r\n//       </List>\r\n//       <Box p={2}>\r\n//         <Button\r\n//           fullWidth\r\n//           variant=\"contained\"\r\n//           color=\"primary\"\r\n//           component={RouterLink}\r\n//           to=\"/get-started\"\r\n//           onClick={onClose}\r\n//           sx={{ mb: 1 }}\r\n//         >\r\n//           Get Started\r\n//         </Button>\r\n//         <Button\r\n//           fullWidth\r\n//           variant=\"outlined\"\r\n//           component={RouterLink}\r\n//           to=\"/login\"\r\n//           onClick={onClose}\r\n//         >\r\n//           Log in\r\n//         </Button>\r\n//       </Box>\r\n//     </Drawer>\r\n//   );\r\n// };\r\n//\r\n// export default MobileMenu;\r\n\r\n\r\n\r\n// // src/components/Header/MobileMenu.js\r\n// import React, { useState } from 'react';\r\n// import {\r\n//   Drawer,\r\n//   List,\r\n//   ListItem,\r\n//   ListItemText,\r\n//   ListItemIcon,\r\n//   Collapse,\r\n//   IconButton,\r\n//   Box,\r\n//   Typography,\r\n//   styled,\r\n// } from '@mui/material';\r\n// import {\r\n//   ExpandMore as ExpandMoreIcon,\r\n//   ExpandLess as ExpandLessIcon,\r\n//   Close as CloseIcon,\r\n// } from '@mui/icons-material';\r\n// import { navigationItems } from './navigationData';\r\n//\r\n// const DrawerHeader = styled(Box)(({ theme }) => ({\r\n//   display: 'flex',\r\n//   alignItems: 'center',\r\n//   justifyContent: 'space-between',\r\n//   padding: theme.spacing(2),\r\n//   borderBottom: `1px solid ${theme.palette.divider}`,\r\n// }));\r\n//\r\n// const MobileMenu = ({ open, onClose }) => {\r\n//   const [expandedItem, setExpandedItem] = useState(null);\r\n//\r\n//   const handleItemClick = (itemKey) => {\r\n//     setExpandedItem(expandedItem === itemKey ? null : itemKey);\r\n//   };\r\n//\r\n//   return (\r\n//     <Drawer\r\n//       anchor=\"right\"\r\n//       open={open}\r\n//       onClose={onClose}\r\n//       PaperProps={{\r\n//         sx: { width: '100%', maxWidth: 360 },\r\n//       }}\r\n//     >\r\n//       <DrawerHeader>\r\n//         <Typography variant=\"h6\">Menu</Typography>\r\n//         <IconButton onClick={onClose}>\r\n//           <CloseIcon />\r\n//         </IconButton>\r\n//       </DrawerHeader>\r\n//\r\n//       <List>\r\n//         {Object.entries(navigationItems).map(([key, item]) => (\r\n//           <React.Fragment key={key}>\r\n//             <ListItem button onClick={() => handleItemClick(key)}>\r\n//               <ListItemText primary={item.label} />\r\n//               {expandedItem === key ? <ExpandLessIcon /> : <ExpandMoreIcon />}\r\n//             </ListItem>\r\n//             <Collapse in={expandedItem === key} timeout=\"auto\" unmountOnExit>\r\n//               <List component=\"div\" disablePadding>\r\n//                 {item.items.map((subItem, index) => (\r\n//                   <ListItem\r\n//                     button\r\n//                     key={index}\r\n//                     sx={{ pl: 4 }}\r\n//                   >\r\n//                     <ListItemIcon>\r\n//                       <subItem.icon />\r\n//                     </ListItemIcon>\r\n//                     <ListItemText\r\n//                       primary={subItem.title}\r\n//                       secondary={subItem.description}\r\n//                     />\r\n//                   </ListItem>\r\n//                 ))}\r\n//               </List>\r\n//             </Collapse>\r\n//           </React.Fragment>\r\n//         ))}\r\n//       </List>\r\n//     </Drawer>\r\n//   );\r\n// };\r\n//\r\n// export default MobileMenu;\r\n\r\n// // src/components/Header/MobileMenu.js\r\n// import React, { useState } from 'react';\r\n// import {\r\n//   Box,\r\n//   List,\r\n//   ListItem,\r\n//   ListItemText,\r\n//   ListItemIcon,\r\n//   Collapse,\r\n//   Typography,\r\n//   IconButton,\r\n//   Button,\r\n//   Divider,\r\n//   alpha,\r\n// } from '@mui/material';\r\n// import {\r\n//   ExpandMore,\r\n//   ExpandLess,\r\n//   ChevronRight,\r\n//   Close,\r\n// } from '@mui/icons-material';\r\n// import { motion, AnimatePresence } from 'framer-motion';\r\n// import { Link as RouterLink } from 'react-router-dom';\r\n//\r\n// const MobileMenu = ({ menuItems, onClose }) => {\r\n//   const [openSections, setOpenSections] = useState({});\r\n//\r\n//   const toggleSection = (section) => {\r\n//     setOpenSections((prev) => ({\r\n//       ...prev,\r\n//       [section]: !prev[section],\r\n//     }));\r\n//   };\r\n//\r\n//   const menuVariants = {\r\n//     hidden: { x: '100%' },\r\n//     visible: {\r\n//       x: 0,\r\n//       transition: {\r\n//         type: 'spring',\r\n//         stiffness: 300,\r\n//         damping: 30,\r\n//       },\r\n//     },\r\n//     exit: {\r\n//       x: '100%',\r\n//       transition: {\r\n//         type: 'spring',\r\n//         stiffness: 300,\r\n//         damping: 30,\r\n//       },\r\n//     },\r\n//   };\r\n//\r\n//   const listItemVariants = {\r\n//     hidden: { opacity: 0, x: 20 },\r\n//     visible: {\r\n//       opacity: 1,\r\n//       x: 0,\r\n//       transition: {\r\n//         type: 'spring',\r\n//         stiffness: 300,\r\n//         damping: 30,\r\n//       },\r\n//     },\r\n//   };\r\n//\r\n//   return (\r\n//     <motion.div\r\n//       initial=\"hidden\"\r\n//       animate=\"visible\"\r\n//       exit=\"exit\"\r\n//       variants={menuVariants}\r\n//     >\r\n//       <Box\r\n//         sx={{\r\n//           height: '100vh',\r\n//           display: 'flex',\r\n//           flexDirection: 'column',\r\n//           bgcolor: 'background.paper',\r\n//         }}\r\n//       >\r\n//         {/* Header */}\r\n//         <Box\r\n//           sx={{\r\n//             display: 'flex',\r\n//             alignItems: 'center',\r\n//             justifyContent: 'space-between',\r\n//             px: 2,\r\n//             py: 2,\r\n//             borderBottom: 1,\r\n//             borderColor: 'divider',\r\n//           }}\r\n//         >\r\n//           <Typography variant=\"h6\">Menu</Typography>\r\n//           <IconButton onClick={onClose}>\r\n//             <Close />\r\n//           </IconButton>\r\n//         </Box>\r\n//\r\n//         {/* Menu Items */}\r\n//         <Box sx={{ flexGrow: 1, overflow: 'auto' }}>\r\n//           <List>\r\n//             {Object.entries(menuItems).map(([sectionId, section]) => (\r\n//               <React.Fragment key={sectionId}>\r\n//                 <ListItem\r\n//                   button\r\n//                   onClick={() => toggleSection(sectionId)}\r\n//                   sx={{\r\n//                     py: 2,\r\n//                     '&:hover': {\r\n//                       bgcolor: (theme) => alpha(theme.palette.primary.main, 0.08),\r\n//                     },\r\n//                   }}\r\n//                 >\r\n//                   <ListItemText\r\n//                     primary={section.title}\r\n//                     primaryTypographyProps={{\r\n//                       fontWeight: 600,\r\n//                     }}\r\n//                   />\r\n//                   {openSections[sectionId] ? <ExpandLess /> : <ExpandMore />}\r\n//                 </ListItem>\r\n//                 <Collapse in={openSections[sectionId]} timeout=\"auto\">\r\n//                   {section.columns.map((column, columnIndex) => (\r\n//                     <Box key={columnIndex} sx={{ pl: 2 }}>\r\n//                       <Typography\r\n//                         variant=\"overline\"\r\n//                         color=\"primary\"\r\n//                         sx={{ px: 2, py: 1, display: 'block' }}\r\n//                       >\r\n//                         {column.title}\r\n//                       </Typography>\r\n//                       <List>\r\n//                         {column.items.map((item, itemIndex) => (\r\n//                           <motion.div\r\n//                             key={itemIndex}\r\n//                             variants={listItemVariants}\r\n//                             initial=\"hidden\"\r\n//                             animate=\"visible\"\r\n//                             transition={{ delay: itemIndex * 0.1 }}\r\n//                           >\r\n//                             <ListItem\r\n//                               button\r\n//                               component={RouterLink}\r\n//                               to={item.path}\r\n//                               onClick={onClose}\r\n//                               sx={{\r\n//                                 py: 2,\r\n//                                 borderRadius: 1,\r\n//                                 mx: 1,\r\n//                                 '&:hover': {\r\n//                                   bgcolor: (theme) => alpha(theme.palette.primary.main, 0.08),\r\n//                                 },\r\n//                               }}\r\n//                             >\r\n//                               <ListItemIcon sx={{ color: 'primary.main' }}>\r\n//                                 {item.icon}\r\n//                               </ListItemIcon>\r\n//                               <ListItemText\r\n//                                 primary={item.title}\r\n//                                 secondary={item.description}\r\n//                                 primaryTypographyProps={{\r\n//                                   variant: 'body1',\r\n//                                   fontWeight: 500,\r\n//                                 }}\r\n//                                 secondaryTypographyProps={{\r\n//                                   variant: 'body2',\r\n//                                   noWrap: true,\r\n//                                 }}\r\n//                               />\r\n//                               {item.badge && (\r\n//                                 <Box\r\n//                                   sx={{\r\n//                                     ml: 1,\r\n//                                     px: 1,\r\n//                                     py: 0.5,\r\n//                                     borderRadius: 1,\r\n//                                     fontSize: '0.75rem',\r\n//                                     fontWeight: 'bold',\r\n//                                     bgcolor: item.badge === 'New' ? 'success.main' : 'primary.main',\r\n//                                     color: 'white',\r\n//                                   }}\r\n//                                 >\r\n//                                   {item.badge}\r\n//                                 </Box>\r\n//                               )}\r\n//                               <ChevronRight sx={{ ml: 1, opacity: 0.5 }} />\r\n//                             </ListItem>\r\n//                           </motion.div>\r\n//                         ))}\r\n//                       </List>\r\n//                     </Box>\r\n//                   ))}\r\n//                 </Collapse>\r\n//                 <Divider />\r\n//               </React.Fragment>\r\n//             ))}\r\n//           </List>\r\n//         </Box>\r\n//\r\n//         {/* Footer Actions */}\r\n//         <Box\r\n//           sx={{\r\n//             p: 2,\r\n//             borderTop: 1,\r\n//             borderColor: 'divider',\r\n//             display: 'flex',\r\n//             flexDirection: 'column',\r\n//             gap: 1,\r\n//           }}\r\n//         >\r\n//           <Button\r\n//             variant=\"contained\"\r\n//             color=\"primary\"\r\n//             fullWidth\r\n//             component={RouterLink}\r\n//             to=\"/signin\"\r\n//             onClick={onClose}\r\n//           >\r\n//             Sign In\r\n//           </Button>\r\n//           <Button\r\n//             variant=\"outlined\"\r\n//             color=\"primary\"\r\n//             fullWidth\r\n//             component={RouterLink}\r\n//             to=\"/contact\"\r\n//             onClick={onClose}\r\n//           >\r\n//             Contact Sales\r\n//           </Button>\r\n//         </Box>\r\n//       </Box>\r\n//     </motion.div>\r\n//   );\r\n// };","// // src/components/Header/SearchModal.js\r\n//\r\n// import React from 'react';\r\n// import { Modal, Box, Typography, TextField, IconButton } from '@mui/material';\r\n// import { Close as CloseIcon } from '@mui/icons-material';\r\n// import { motion } from 'framer-motion'; // Ensure motion is imported\r\n// import { headerStyles } from './styles';\r\n//\r\n// const SearchModal = ({ open, onClose }) => {\r\n//   return (\r\n//     <Modal\r\n//       open={open}\r\n//       onClose={onClose}\r\n//       aria-labelledby=\"search-modal-title\"\r\n//       aria-describedby=\"search-modal-description\"\r\n//     >\r\n//       <Box\r\n//         sx={headerStyles.searchModal}\r\n//         component={motion.div}\r\n//         initial={{ opacity: 0, scale: 0.8 }}\r\n//         animate={{ opacity: 1, scale: 1 }}\r\n//         exit={{ opacity: 0, scale: 0.8 }}\r\n//         transition={{ duration: 0.3 }}\r\n//       >\r\n//         <Box sx={{ position: 'relative', width: '80%', maxWidth: 600 }}>\r\n//           <IconButton\r\n//             onClick={onClose}\r\n//             sx={{ position: 'absolute', top: 0, right: 0 }}\r\n//             aria-label=\"close search modal\"\r\n//           >\r\n//             <CloseIcon />\r\n//           </IconButton>\r\n//           <Typography id=\"search-modal-title\" variant=\"h6\" component=\"h2\" gutterBottom>\r\n//             Search\r\n//           </Typography>\r\n//           <TextField\r\n//             fullWidth\r\n//             variant=\"outlined\"\r\n//             placeholder=\"Type to search...\"\r\n//             aria-label=\"search input\"\r\n//           />\r\n//         </Box>\r\n//       </Box>\r\n//     </Modal>\r\n//   );\r\n// };\r\n//\r\n// export default SearchModal;\r\n\r\n// src/components/Header/SearchModal.js\r\nimport React, { useEffect, useRef } from 'react';\r\nimport {\r\n  Dialog,\r\n  DialogContent,\r\n  InputBase,\r\n  Box,\r\n  Typography,\r\n  List,\r\n  ListItem,\r\n  ListItemIcon,\r\n  ListItemText,\r\n  IconButton,\r\n  Paper,\r\n} from '@mui/material';\r\nimport {\r\n  Search as SearchIcon,\r\n  Close as CloseIcon,\r\n  Article as ArticleIcon,\r\n  Code as CodeIcon,\r\n  Security as SecurityIcon,\r\n} from '@mui/icons-material';\r\nimport { motion, AnimatePresence } from 'framer-motion';\r\nimport { headerStyles } from './styles';\r\n\r\nconst searchResults = [\r\n  {\r\n    title: 'Getting Started',\r\n    description: 'Quick start guide for SecureAI Guard',\r\n    icon: ArticleIcon,\r\n    path: '/docs/getting-started',\r\n  },\r\n  {\r\n    title: 'API Documentation',\r\n    description: 'Complete API reference',\r\n    icon: CodeIcon,\r\n    path: '/docs/api',\r\n  },\r\n  {\r\n    title: 'Security Features',\r\n    description: 'Learn about our security measures',\r\n    icon: SecurityIcon,\r\n    path: '/docs/security',\r\n  },\r\n];\r\n\r\nconst SearchModal = ({ open, onClose }) => {\r\n  const searchInputRef = useRef(null);\r\n\r\n  useEffect(() => {\r\n    if (open && searchInputRef.current) {\r\n      searchInputRef.current.focus();\r\n    }\r\n  }, [open]);\r\n\r\n  return (\r\n    <AnimatePresence>\r\n      {open && (\r\n        <Dialog\r\n          fullScreen\r\n          open={open}\r\n          onClose={onClose}\r\n          PaperProps={{\r\n            sx: headerStyles.searchModal,\r\n          }}\r\n        >\r\n          <motion.div\r\n            initial={{ opacity: 0, y: -20 }}\r\n            animate={{ opacity: 1, y: 0 }}\r\n            exit={{ opacity: 0, y: -20 }}\r\n          >\r\n            <Box p={2} display=\"flex\" alignItems=\"center\">\r\n              <SearchIcon sx={{ mr: 2, color: 'text.secondary' }} />\r\n              <InputBase\r\n                ref={searchInputRef}\r\n                placeholder=\"Search documentation...\"\r\n                fullWidth\r\n                sx={{ fontSize: '1.25rem' }}\r\n              />\r\n              <IconButton onClick={onClose}>\r\n                <CloseIcon />\r\n              </IconButton>\r\n            </Box>\r\n\r\n            <DialogContent>\r\n              <Typography variant=\"overline\" color=\"text.secondary\">\r\n                Quick Links\r\n              </Typography>\r\n              <List>\r\n                {searchResults.map((result, index) => (\r\n                  <motion.div\r\n                    key={result.path}\r\n                    initial={{ opacity: 0, x: -20 }}\r\n                    animate={{ opacity: 1, x: 0 }}\r\n                    transition={{ delay: index * 0.1 }}\r\n                  >\r\n                    <ListItem button onClick={onClose}>\r\n                      <ListItemIcon>\r\n                        <result.icon />\r\n                      </ListItemIcon>\r\n                      <ListItemText\r\n                        primary={result.title}\r\n                        secondary={result.description}\r\n                      />\r\n                    </ListItem>\r\n                  </motion.div>\r\n                ))}\r\n              </List>\r\n            </DialogContent>\r\n          </motion.div>\r\n        </Dialog>\r\n      )}\r\n    </AnimatePresence>\r\n  );\r\n};\r\n\r\nexport default SearchModal;\r\n\r\n// // src/components/Header/SearchModal.js\r\n// import React, { useState } from 'react';\r\n// import {\r\n//   Dialog,\r\n//   DialogContent,\r\n//   InputBase,\r\n//   Box,\r\n//   Typography,\r\n//   List,\r\n//   ListItem,\r\n//   ListItemIcon,\r\n//   ListItemText,\r\n//   IconButton,\r\n//   styled,\r\n// } from '@mui/material';\r\n// import {\r\n//   Search as SearchIcon,\r\n//   Close as CloseIcon,\r\n//   Article as ArticleIcon,\r\n// } from '@mui/icons-material';\r\n//\r\n// const SearchInput = styled(InputBase)(({ theme }) => ({\r\n//   width: '100%',\r\n//   fontSize: '1.25rem',\r\n//   '& input': {\r\n//     padding: theme.spacing(2),\r\n//     paddingLeft: theme.spacing(6),\r\n//   },\r\n// }));\r\n//\r\n// const SearchModal = ({ open, onClose }) => {\r\n//   const [searchQuery, setSearchQuery] = useState('');\r\n//\r\n//   const handleSearch = (event) => {\r\n//     setSearchQuery(event.target.value);\r\n//     // Implement search logic here\r\n//   };\r\n//\r\n//   return (\r\n//     <Dialog\r\n//       fullWidth\r\n//       maxWidth=\"md\"\r\n//       open={open}\r\n//       onClose={onClose}\r\n//       PaperProps={{\r\n//         sx: {\r\n//           borderRadius: 2,\r\n//           mt: 8,\r\n//         },\r\n//       }}\r\n//     >\r\n//       <Box sx={{ position: 'relative', p: 2 }}>\r\n//         <SearchIcon\r\n//           sx={{\r\n//             position: 'absolute',\r\n//             left: 28,\r\n//             top: '50%',\r\n//             transform: 'translateY(-50%)',\r\n//             color: 'text.secondary',\r\n//           }}\r\n//         />\r\n//         <SearchInput\r\n//           autoFocus\r\n//           placeholder=\"Search documentation...\"\r\n//           value={searchQuery}\r\n//           onChange={handleSearch}\r\n//         />\r\n//         <IconButton\r\n//           sx={{\r\n//             position: 'absolute',\r\n//             right: 28,\r\n//             top: '50%',\r\n//             transform: 'translateY(-50%)',\r\n//           }}\r\n//           onClick={onClose}\r\n//         >\r\n//           <CloseIcon />\r\n//         </IconButton>\r\n//       </Box>\r\n//       <DialogContent>\r\n//         <Box sx={{ py: 2 }}>\r\n//           <Typography variant=\"overline\" color=\"text.secondary\">\r\n//             Recent Searches\r\n//           </Typography>\r\n//           <List>\r\n//             {['API Documentation', 'Security Features', 'Getting Started'].map((item) => (\r\n//               <ListItem button key={item}>\r\n//                 <ListItemIcon>\r\n//                   <ArticleIcon />\r\n//                 </ListItemIcon>\r\n//                 <ListItemText primary={item} />\r\n//               </ListItem>\r\n//             ))}\r\n//           </List>\r\n//         </Box>\r\n//       </DialogContent>\r\n//     </Dialog>\r\n//   );\r\n// };\r\n//\r\n// export default SearchModal;\r\n\r\n\r\n// // src/components/Header/SearchModal.js\r\n// import React, { useState, useEffect } from 'react';\r\n// import {\r\n//   Dialog,\r\n//   DialogContent,\r\n//   Box,\r\n//   InputBase,\r\n//   IconButton,\r\n//   Typography,\r\n//   List,\r\n//   ListItem,\r\n//   ListItemIcon,\r\n//   ListItemText,\r\n//   Chip,\r\n//   CircularProgress,\r\n//   useTheme,\r\n//   alpha,\r\n// } from '@mui/material';\r\n// import {\r\n//   Search as SearchIcon,\r\n//   Close,\r\n//   Article,\r\n//   Book,\r\n//   Code,\r\n//   Help,\r\n//   KeyboardReturn,\r\n// } from '@mui/icons-material';\r\n// import { motion, AnimatePresence } from 'framer-motion';\r\n// import { useNavigate } from 'react-router-dom';\r\n//\r\n// const searchCategories = [\r\n//   { type: 'docs', icon: <Book />, color: '#2196F3' },\r\n//   { type: 'api', icon: <Code />, color: '#4CAF50' },\r\n//   { type: 'blog', icon: <Article />, color: '#FF9800' },\r\n//   { type: 'faq', icon: <Help />, color: '#9C27B0' },\r\n// ];\r\n//\r\n// const SearchModal = ({ open, onClose }) => {\r\n//   const theme = useTheme();\r\n//   const navigate = useNavigate();\r\n//   const [query, setQuery] = useState('');\r\n//   const [isSearching, setIsSearching] = useState(false);\r\n//   const [results, setResults] = useState([]);\r\n//   const [selectedResult, setSelectedResult] = useState(-1);\r\n//\r\n//   useEffect(() => {\r\n//     if (query) {\r\n//       setIsSearching(true);\r\n//       // Simulated search delay\r\n//       const timer = setTimeout(() => {\r\n//         // Replace with actual search logic\r\n//         setResults([\r\n//           {\r\n//             type: 'docs',\r\n//             title: 'Getting Started with AI Security',\r\n//             description: 'Learn how to implement security measures in your AI applications',\r\n//             path: '/docs/getting-started',\r\n//           },\r\n//           // Add more results...\r\n//         ]);\r\n//         setIsSearching(false);\r\n//       }, 500);\r\n//       return () => clearTimeout(timer);\r\n//     } else {\r\n//       setResults([]);\r\n//     }\r\n//   }, [query]);\r\n//\r\n//   const handleKeyDown = (e) => {\r\n//     if (e.key === 'ArrowDown') {\r\n//       e.preventDefault();\r\n//       setSelectedResult(prev =>\r\n//         prev < results.length - 1 ? prev + 1 : prev\r\n//       );\r\n//     } else if (e.key === 'ArrowUp') {\r\n//       e.preventDefault();\r\n//       setSelectedResult(prev => prev > 0 ? prev - 1 : -1);\r\n//     } else if (e.key === 'Enter' && selectedResult >= 0) {\r\n//       const selected = results[selectedResult];\r\n//       handleResultClick(selected);\r\n//     }\r\n//   };\r\n//\r\n//   const handleResultClick = (result) => {\r\n//     navigate(result.path);\r\n//     onClose();\r\n//   };\r\n//\r\n//   return (\r\n//     <Dialog\r\n//       fullWidth\r\n//       maxWidth=\"md\"\r\n//       open={open}\r\n//       onClose={onClose}\r\n//       PaperProps={{\r\n//         sx: {\r\n//           borderRadius: 2,\r\n//           bgcolor: 'background.paper',\r\n//           backdropFilter: 'blur(20px)',\r\n//         },\r\n//       }}\r\n//     >\r\n//       <DialogContent sx={{ p: 0 }}>\r\n//         <Box sx={{ p: 2, borderBottom: 1, borderColor: 'divider' }}>\r\n//           <Box\r\n//             sx={{\r\n//               display: 'flex',\r\n//               alignItems: 'center',\r\n//               gap: 1,\r\n//               bgcolor: alpha(theme.palette.primary.main, 0.05),\r\n//               borderRadius: 2,\r\n//               p: 1,\r\n//             }}\r\n//           >\r\n//             <SearchIcon sx={{ ml: 1, color: 'text.secondary' }} />\r\n//             <InputBase\r\n//               autoFocus\r\n//               fullWidth\r\n//               placeholder=\"Search documentation, API references, and more...\"\r\n//               value={query}\r\n//               onChange={(e) => setQuery(e.target.value)}\r\n//               onKeyDown={handleKeyDown}\r\n//               sx={{ ml: 1 }}\r\n//             />\r\n//             <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>\r\n//               <Chip\r\n//                 size=\"small\"\r\n//                 label=\"ESC\"\r\n//                 sx={{\r\n//                   bgcolor: alpha(theme.palette.text.primary, 0.1),\r\n//                   color: 'text.secondary',\r\n//                 }}\r\n//               />\r\n//               <IconButton size=\"small\" onClick={onClose}>\r\n//                 <Close fontSize=\"small\" />\r\n//               </IconButton>\r\n//             </Box>\r\n//           </Box>\r\n//         </Box>\r\n//\r\n//         <Box sx={{ maxHeight: 500, overflow: 'auto' }}>\r\n//           {query && (\r\n//             <Box sx={{ p: 2 }}>\r\n//               {isSearching ? (\r\n//                 <Box\r\n//                   sx={{\r\n//                     display: 'flex',\r\n//                     justifyContent: 'center',\r\n//                     p: 4,\r\n//                   }}\r\n//                 >\r\n//                   <CircularProgress size={24} />\r\n//                 </Box>\r\n//               ) : results.length > 0 ? (\r\n//                 <List>\r\n//                   <AnimatePresence>\r\n//                     {results.map((result, index) => (\r\n//                       <motion.div\r\n//                         key={index}\r\n//                         initial={{ opacity: 0, y: 10 }}\r\n//                         animate={{ opacity: 1, y: 0 }}\r\n//                         transition={{ delay: index * 0.05 }}\r\n//                       >\r\n//                         <ListItem\r\n//                           button\r\n//                           selected={selectedResult === index}\r\n//                           onClick={() => handleResultClick(result)}\r\n//                           sx={{\r\n//                             borderRadius: 1,\r\n//                             mb: 1,\r\n//                             '&:hover': {\r\n//                               bgcolor: alpha(theme.palette.primary.main, 0.08),\r\n//                             },\r\n//                           }}\r\n//                         >\r\n//                           <ListItemIcon>\r\n//                             {searchCategories.find(cat => cat.type === result.type)?.icon}\r\n//                           </ListItemIcon>\r\n//                           <ListItemText\r\n//                             primary={result.title}\r\n//                             secondary={result.description}\r\n//                             primaryTypographyProps={{\r\n//                               fontWeight: selectedResult === index ? 600 : 400,\r\n//                             }}\r\n//                           />\r\n//                           <Chip\r\n//                             size=\"small\"\r\n//                             label={result.type.toUpperCase()}\r\n//                             sx={{\r\n//                               bgcolor: alpha(\r\n//                                 searchCategories.find(cat => cat.type === result.type)?.color || '#000',\r\n//                                 0.1\r\n//                               ),\r\n//                               color: searchCategories.find(cat => cat.type === result.type)?.color,\r\n//                             }}\r\n//                           />\r\n//                         </ListItem>\r\n//                       </motion.div>\r\n//                     ))}\r\n//                   </AnimatePresence>\r\n//                 </List>\r\n//               ) : (\r\n//                 <Box\r\n//                   sx={{\r\n//                     textAlign: 'center',\r\n//                     py: 4,\r\n//                     color: 'text.secondary',\r\n//                   }}\r\n//                 >\r\n//                   <Typography>No results found</Typography>\r\n//                 </Box>\r\n//               )}\r\n//             </Box>\r\n//           )}\r\n//\r\n//           {!query && (\r\n//             <Box sx={{ p: 2 }}>\r\n//               <Typography\r\n//                 variant=\"overline\"\r\n//                 color=\"text.secondary\"\r\n//                 sx={{ px: 2 }}\r\n//               >\r\n//                 Quick Links\r\n//               </Typography>\r\n//               <List>\r\n//                 {[\r\n//                   { title: 'Documentation', path: '/docs', icon: <Book /> },\r\n//                   { title: 'API Reference', path: '/api', icon: <Code /> },\r\n//                   { title: 'Tutorials', path: '/tutorials', icon: <Article /> },\r\n//                   { title: 'Support', path: '/support', icon: <Help /> },\r\n//                 ].map((item, index) => (\r\n//                   <ListItem\r\n//                     key={index}\r\n//                     button\r\n//                     onClick={() => handleResultClick(item)}\r\n//                     sx={{\r\n//                       borderRadius: 1,\r\n//                       mb: 1,\r\n//                       '&:hover': {\r\n//                         bgcolor: alpha(theme.palette.primary.main, 0.08),\r\n//                       },\r\n//                     }}\r\n//                   >\r\n//                     <ListItemIcon>{item.icon}</ListItemIcon>\r\n//                     <ListItemText primary={item.title} />\r\n//                     <KeyboardReturn sx={{ opacity: 0.5 }} />\r\n//                   </ListItem>\r\n//                 ))}\r\n//               </List>\r\n//             </Box>\r\n//           )}\r\n//         </Box>\r\n//       </DialogContent>\r\n//     </Dialog>\r\n//   );\r\n// };\r\n//\r\n// export default SearchModal;","// // src/components/header/index.js\r\n// import React from 'react';\r\n// import { AppBar, Box, Container, IconButton, useTheme, useMediaQuery } from '@mui/material';\r\n// import { Menu as MenuIcon } from '@mui/icons-material';\r\n// import { Link as RouterLink } from 'react-router-dom';\r\n// import Logo from './Logo';\r\n// import NavigationMenu from './NavigationMenu';\r\n// import ActionsMenu from './ActionsMenu';\r\n// import { motion } from 'framer-motion';\r\n// import { useHeaderContext } from '../../contexts/HeaderContext';\r\n//\r\n// const Header = () => {\r\n//   const theme = useTheme();\r\n//   const isMobile = useMediaQuery(theme.breakpoints.down('md'));\r\n//   const { isVisible, isScrolled, toggleMobileMenu, toggleSearch } = useHeaderContext();\r\n//\r\n//   return (\r\n//     <motion.div\r\n//       initial={{ opacity: 0, y: -20 }}\r\n//       animate={{ opacity: isVisible ? 1 : 0, y: isVisible ? 0 : -20 }}\r\n//       transition={{ duration: 0.3 }}\r\n//       style={{ width: '100%', zIndex: theme.zIndex.appBar }}\r\n//     >\r\n//       <AppBar\r\n//         position=\"sticky\"\r\n//         elevation={4}\r\n//         sx={{\r\n//           backgroundColor: isScrolled ? theme.palette.secondary.dark : theme.palette.secondary.main,\r\n//           color: theme.palette.secondary.contrastText,\r\n//           top: 0,                                        // Required for sticky positioning\r\n//           zIndex: theme.zIndex.appBar,                  // Ensure it's above other elements\r\n//           transition: 'background-color 0.3s, box-shadow 0.3s',\r\n//           pointerEvents: isVisible ? 'auto' : 'none',    // Disable interactions when hidden\r\n//         }}\r\n//       >\r\n//         <Container maxWidth=\"lg\">\r\n//           <Box\r\n//             sx={{\r\n//               display: 'flex',\r\n//               alignItems: 'center',\r\n//               justifyContent: 'space-between',\r\n//               height: '64px', // Standard AppBar height; adjust if necessary\r\n//             }}\r\n//           >\r\n//             {/* Logo */}\r\n//             <RouterLink to=\"/\">\r\n//               <Logo />\r\n//             </RouterLink>\r\n//\r\n//             {/* Navigation Menu - Desktop */}\r\n//             {!isMobile && <NavigationMenu />}\r\n//\r\n//             {/* Actions Menu */}\r\n//             <Box sx={{ display: 'flex', alignItems: 'center' }}>\r\n//               <ActionsMenu\r\n//                 onSearchClick={toggleSearch}\r\n//                 onMobileMenuClick={toggleMobileMenu}\r\n//                 isMobile={isMobile}\r\n//               />\r\n//             </Box>\r\n//\r\n//             {/* Mobile Menu Toggle */}\r\n//             {isMobile && (\r\n//               <IconButton\r\n//                 color=\"inherit\"\r\n//                 onClick={toggleMobileMenu}\r\n//                 edge=\"end\"\r\n//                 sx={{ ml: 2 }}\r\n//                 aria-label=\"open mobile menu\"\r\n//               >\r\n//                 <MenuIcon />\r\n//               </IconButton>\r\n//             )}\r\n//           </Box>\r\n//         </Container>\r\n//       </AppBar>\r\n//     </motion.div>\r\n//   );\r\n// };\r\n//\r\n// export default Header;\r\n\r\n\r\n\r\n\r\n// Very Good also\r\n\r\n// // Header.js\r\n// import React, { useRef } from 'react';\r\n// import {\r\n//   AppBar,\r\n//   Box,\r\n//   Container,\r\n//   IconButton,\r\n//   useTheme,\r\n//   useMediaQuery,\r\n// } from '@mui/material';\r\n// import { Menu as MenuIcon, ShoppingCart } from '@mui/icons-material';\r\n// import { motion } from 'framer-motion';\r\n// import { useHeaderContext } from '../../contexts/HeaderContext';\r\n// import { useHeader } from '../../hooks/useHeader';\r\n// import { useHeaderVisibility } from '../../hooks/useHeaderVisibility';\r\n// import { useKeyboardNavigation } from './KeyboardNavigation';\r\n// import { headerStyles } from './styles';\r\n// import Logo from './Logo';\r\n// import NavigationMenu from './NavigationMenu';\r\n// import ActionsMenu from './ActionsMenu';\r\n// import MobileMenu from './MobileMenu';\r\n// import SearchModal from './SearchModal';\r\n// import { Link as RouterLink } from 'react-router-dom';\r\n//\r\n// const fadeInVariants = {\r\n//   hidden: { opacity: 0, y: -20 },\r\n//   visible: {\r\n//     opacity: 1,\r\n//     y: 0,\r\n//     transition: { duration: 0.3 },\r\n//   },\r\n//   exit: { opacity: 0, y: -20, transition: { duration: 0.3 } },\r\n// };\r\n//\r\n// const Header = () => {\r\n//   const headerRef = useRef(null);\r\n//   const theme = useTheme();\r\n//   const isMobile = useMediaQuery(theme.breakpoints.down('md'));\r\n//   const { isScrolled, isVisible } = useHeader();\r\n//   useHeaderVisibility(headerRef);\r\n//   const {\r\n//     searchOpen,\r\n//     setSearchOpen,\r\n//     mobileMenuOpen,\r\n//     setMobileMenuOpen,\r\n//     closeAllMenus,\r\n//   } = useHeaderContext();\r\n//\r\n//   useKeyboardNavigation();\r\n//\r\n//   return (\r\n//     <>\r\n//       <motion.div\r\n//         ref={headerRef}\r\n//         initial=\"hidden\"\r\n//         animate={isVisible ? 'visible' : 'hidden'}\r\n//         exit=\"exit\"\r\n//         variants={fadeInVariants}\r\n//         style={{ width: '100%', position: 'sticky', top: 0, zIndex: 1400 }}\r\n//       >\r\n//         {/* Main Header */}\r\n//         <AppBar\r\n//           position=\"sticky\"\r\n//           elevation={isScrolled ? 4 : 0}\r\n//           sx={{\r\n//             ...headerStyles.root,\r\n//             ...(isScrolled && headerStyles.headerScrolled(theme)),\r\n//             backgroundColor: theme.palette.background.paper, // Subtle background\r\n//             color: theme.palette.text.primary, // Ensure text readability\r\n//           }}\r\n//         >\r\n//           <Container maxWidth=\"lg\">\r\n//             <Box sx={headerStyles.container}>\r\n//               {/* Logo */}\r\n//               <Box>\r\n//                 <Logo />\r\n//               </Box>\r\n//\r\n//               {/* Navigation Menu - Desktop */}\r\n//               {!isMobile && (\r\n//                 <Box sx={headerStyles.nav}>\r\n//                   <NavigationMenu />\r\n//                 </Box>\r\n//               )}\r\n//\r\n//               {/* Actions Menu */}\r\n//               <Box sx={headerStyles.actions}>\r\n//                 <ActionsMenu\r\n//                   onSearchClick={() => setSearchOpen(true)}\r\n//                   onMobileMenuClick={() => setMobileMenuOpen(true)}\r\n//                   isMobile={isMobile}\r\n//                 />\r\n//\r\n//                 {/* Shopping Cart Icon */}\r\n//                 <IconButton\r\n//                   color=\"inherit\"\r\n//                   component={RouterLink}\r\n//                   to=\"/cart\"\r\n//                   aria-label=\"view cart\"\r\n//                   sx={headerStyles.cartButton}\r\n//                 >\r\n//                   <ShoppingCart />\r\n//                 </IconButton>\r\n//\r\n//                 {/* Mobile Menu Toggle */}\r\n//                 {isMobile && (\r\n//                   <IconButton\r\n//                     color=\"inherit\"\r\n//                     onClick={() => setMobileMenuOpen(true)}\r\n//                     edge=\"end\"\r\n//                     sx={headerStyles.mobileMenuButton}\r\n//                     aria-label=\"open mobile menu\"\r\n//                   >\r\n//                     <MenuIcon />\r\n//                   </IconButton>\r\n//                 )}\r\n//               </Box>\r\n//             </Box>\r\n//           </Container>\r\n//         </AppBar>\r\n//       </motion.div>\r\n//\r\n//       {/* Modals and Mobile Menu */}\r\n//       {searchOpen && (\r\n//         <SearchModal\r\n//           key=\"search-modal\"\r\n//           open={searchOpen}\r\n//           onClose={() => setSearchOpen(false)}\r\n//         />\r\n//       )}\r\n//\r\n//       {mobileMenuOpen && (\r\n//         <MobileMenu\r\n//           key=\"mobile-menu\"\r\n//           open={mobileMenuOpen}\r\n//           onClose={() => setMobileMenuOpen(false)}\r\n//         />\r\n//       )}\r\n//     </>\r\n//   );\r\n// };\r\n//\r\n// export default Header;\r\n\r\n\r\n//working\r\n\r\n// header/index.js\r\nimport React, { useRef } from 'react';\r\nimport {\r\n  AppBar,\r\n  Box,\r\n  Container,\r\n  IconButton,\r\n  useTheme,\r\n  useMediaQuery,\r\n} from '@mui/material';\r\nimport { Menu as MenuIcon } from '@mui/icons-material';\r\nimport { motion } from 'framer-motion';\r\nimport { useHeaderContext } from '../../contexts/HeaderContext';\r\nimport { useHeader } from '../../hooks/useHeader';\r\nimport { useHeaderVisibility } from '../../hooks/useHeaderVisibility';\r\nimport { useKeyboardNavigation } from './KeyboardNavigation';\r\nimport { headerStyles } from './styles';\r\nimport Logo from './Logo';\r\nimport NavigationMenu from './NavigationMenu';\r\nimport ActionsMenu from './ActionsMenu';\r\nimport MobileMenu from './MobileMenu';\r\nimport SearchModal from './SearchModal';\r\n\r\nconst fadeInVariants = {\r\n  hidden: { opacity: 0, y: -20 },\r\n  visible: {\r\n    opacity: 1,\r\n    y: 0,\r\n    transition: { duration: 0.3 }\r\n  },\r\n  exit: { opacity: 0, y: -20, transition: { duration: 0.3 } },\r\n};\r\n\r\nconst Header = () => {\r\n  const headerRef = useRef(null);\r\n  const theme = useTheme();\r\n  const isMobile = useMediaQuery(theme.breakpoints.down('md'));\r\n  const { isScrolled, isVisible } = useHeader();\r\n  useHeaderVisibility(headerRef);\r\n  const {\r\n    searchOpen,\r\n    setSearchOpen,\r\n    mobileMenuOpen,\r\n    setMobileMenuOpen,\r\n    closeAllMenus,\r\n  } = useHeaderContext();\r\n\r\n  useKeyboardNavigation();\r\n\r\n  return (\r\n    <>\r\n      <motion.div\r\n        ref={headerRef}\r\n        initial=\"hidden\"\r\n        animate={isVisible ? \"visible\" : \"hidden\"}\r\n        exit=\"exit\"\r\n        variants={fadeInVariants}\r\n        style={{ width: '100%', position: 'sticky', top: 0, zIndex: 1400 }}\r\n      >\r\n        {/* Main Header */}\r\n        <AppBar\r\n          position=\"sticky\"\r\n          elevation={4}\r\n          sx={{\r\n            ...headerStyles.root,\r\n            ...(isScrolled && headerStyles.headerScrolled(theme)),\r\n            backgroundColor: theme.palette.secondary.main, // Use a complementary or contrasting color\r\n            color: theme.palette.secondary.contrastText, // Ensure text is readable\r\n          }}\r\n        >\r\n          <Container maxWidth=\"lg\">\r\n            <Box sx={headerStyles.container}>\r\n              {/* Logo */}\r\n              <Box>\r\n                <Logo />\r\n              </Box>\r\n\r\n              {/* Navigation Menu - Desktop */}\r\n              {!isMobile && (\r\n                <Box sx={headerStyles.nav}>\r\n                  <NavigationMenu />\r\n                </Box>\r\n              )}\r\n\r\n              {/* Actions Menu */}\r\n              <Box sx={headerStyles.actions}>\r\n                <ActionsMenu\r\n                  onSearchClick={() => setSearchOpen(true)}\r\n                  onMobileMenuClick={() => setMobileMenuOpen(true)}\r\n                  isMobile={isMobile}\r\n                />\r\n\r\n                {/* Mobile Menu Toggle */}\r\n                {isMobile && (\r\n                  <IconButton\r\n                    color=\"inherit\"\r\n                    onClick={() => setMobileMenuOpen(true)}\r\n                    edge=\"end\"\r\n                    sx={headerStyles.mobileMenuButton}\r\n                    aria-label=\"open mobile menu\"\r\n                  >\r\n                    <MenuIcon />\r\n                  </IconButton>\r\n                )}\r\n              </Box>\r\n            </Box>\r\n          </Container>\r\n        </AppBar>\r\n      </motion.div>\r\n\r\n      {/* Modals and Mobile Menu */}\r\n      {searchOpen && (\r\n        <SearchModal\r\n          key=\"search-modal\"\r\n          open={searchOpen}\r\n          onClose={() => setSearchOpen(false)}\r\n        />\r\n      )}\r\n\r\n      {mobileMenuOpen && (\r\n        <MobileMenu\r\n          key=\"mobile-menu\"\r\n          open={mobileMenuOpen}\r\n          onClose={() => setMobileMenuOpen(false)}\r\n        />\r\n      )}\r\n    </>\r\n  );\r\n};\r\n\r\nexport default Header;\r\n\r\n\r\n\r\n// import React, { useRef } from 'react';\r\n// import {\r\n//   AppBar,\r\n//   Box,\r\n//   Container,\r\n//   IconButton,\r\n//   useTheme,\r\n//   useMediaQuery,\r\n// } from '@mui/material';\r\n// import { Menu as MenuIcon } from '@mui/icons-material';\r\n// import { motion, AnimatePresence } from 'framer-motion';\r\n// import { useHeaderContext } from '../../contexts/HeaderContext';\r\n// import { useHeader } from '../../hooks/useHeader';\r\n// import { useHeaderVisibility } from '../../hooks/useHeaderVisibility';\r\n// import { useKeyboardNavigation } from './KeyboardNavigation';\r\n// import { headerStyles } from './styles';\r\n// import { fadeIn, slideIn } from './animations';\r\n// import Logo from './Logo';\r\n// import NavigationMenu from './NavigationMenu';\r\n// import ActionsMenu from './ActionsMenu';\r\n// import MobileMenu from './MobileMenu';\r\n// import SearchModal from './SearchModal';\r\n//\r\n// const Header = () => {\r\n//   const headerRef = useRef(null);\r\n//   const theme = useTheme();\r\n//   const isMobile = useMediaQuery(theme.breakpoints.down('md'));\r\n//   const { isScrolled, isVisible } = useHeader();\r\n//   useHeaderVisibility(headerRef);\r\n//   const {\r\n//     searchOpen,\r\n//     setSearchOpen,\r\n//     mobileMenuOpen,\r\n//     setMobileMenuOpen,\r\n//     closeAllMenus,\r\n//   } = useHeaderContext();\r\n//\r\n//   useKeyboardNavigation();\r\n//\r\n//   return (\r\n//     <>\r\n//       <AnimatePresence>\r\n//         {isVisible && (\r\n//           <motion.div\r\n//             ref={headerRef}\r\n//             initial=\"initial\"\r\n//             animate=\"animate\"\r\n//             exit=\"exit\"\r\n//             variants={fadeIn}\r\n//             style={{ width: '100%', position: 'sticky', top: 0, zIndex: 1400 }}\r\n//           >\r\n//             {/* Main Header */}\r\n//             <AppBar\r\n//               position=\"sticky\"\r\n//               elevation={4}\r\n//               sx={{\r\n//                 ...headerStyles.root,\r\n//                 ...(isScrolled && headerStyles.headerScrolled(theme)),\r\n//                 backgroundColor: theme.palette.secondary.main, // Use a complementary or contrasting color\r\n//                 color: theme.palette.secondary.contrastText, // Ensure text is readable\r\n//               }}\r\n//             >\r\n//               <Container maxWidth=\"lg\">\r\n//                 <Box sx={headerStyles.container}>\r\n//                   {/* Logo */}\r\n//                   <motion.div\r\n//                     variants={slideIn}\r\n//                     initial=\"initial\"\r\n//                     animate=\"animate\"\r\n//                   >\r\n//                     <Logo />\r\n//                   </motion.div>\r\n//\r\n//                   {/* Navigation Menu - Desktop */}\r\n//                   {!isMobile && (\r\n//                     <Box sx={headerStyles.nav}>\r\n//                       <motion.div\r\n//                         variants={fadeIn}\r\n//                         initial=\"initial\"\r\n//                         animate=\"animate\"\r\n//                       >\r\n//                         <NavigationMenu />\r\n//                       </motion.div>\r\n//                     </Box>\r\n//                   )}\r\n//\r\n//                   {/* Actions Menu */}\r\n//                   <Box sx={headerStyles.actions}>\r\n//                     <motion.div\r\n//                       variants={fadeIn}\r\n//                       initial=\"initial\"\r\n//                       animate=\"animate\"\r\n//                     >\r\n//                       <ActionsMenu\r\n//                         onSearchClick={() => setSearchOpen(true)}\r\n//                         onMobileMenuClick={() => setMobileMenuOpen(true)}\r\n//                         isMobile={isMobile}\r\n//                       />\r\n//                     </motion.div>\r\n//\r\n//                     {/* Mobile Menu Toggle */}\r\n//                     {isMobile && (\r\n//                       <IconButton\r\n//                         color=\"inherit\"\r\n//                         onClick={() => setMobileMenuOpen(true)}\r\n//                         edge=\"end\"\r\n//                         sx={headerStyles.mobileMenuButton}\r\n//                         aria-label=\"open mobile menu\"\r\n//                       >\r\n//                         <MenuIcon />\r\n//                       </IconButton>\r\n//                     )}\r\n//                   </Box>\r\n//                 </Box>\r\n//               </Container>\r\n//             </AppBar>\r\n//           </motion.div>\r\n//         )}\r\n//       </AnimatePresence>\r\n//\r\n//       {/* Modals and Mobile Menu */}\r\n//       <AnimatePresence>\r\n//         {searchOpen && (\r\n//           <SearchModal\r\n//             key=\"search-modal\"\r\n//             open={searchOpen}\r\n//             onClose={() => setSearchOpen(false)}\r\n//           />\r\n//         )}\r\n//\r\n//         {mobileMenuOpen && (\r\n//           <MobileMenu\r\n//             key=\"mobile-menu\"\r\n//             open={mobileMenuOpen}\r\n//             onClose={() => setMobileMenuOpen(false)}\r\n//           />\r\n//         )}\r\n//       </AnimatePresence>\r\n//     </>\r\n//   );\r\n// };\r\n//\r\n// export default Header;\r\n\r\n\r\n\r\n\r\n\r\n// // src/components/Header/index.js\r\n//\r\n// import React, { useRef } from 'react';\r\n// import {\r\n//   AppBar,\r\n//   Box,\r\n//   Container,\r\n//   IconButton,\r\n//   useTheme,\r\n//   useMediaQuery,\r\n// } from '@mui/material';\r\n// import { Menu as MenuIcon } from '@mui/icons-material';\r\n// import { motion, AnimatePresence } from 'framer-motion';\r\n// import { useHeaderContext } from '../../contexts/HeaderContext';\r\n// import { useHeader } from '../../hooks/useHeader';\r\n// import { useHeaderVisibility } from '../../hooks/useHeaderVisibility';\r\n// import { useKeyboardNavigation } from './KeyboardNavigation';\r\n// import { headerStyles } from './styles';\r\n// import { fadeIn, slideIn } from './animations';\r\n// import Logo from './Logo';\r\n// import NavigationMenu from './NavigationMenu';\r\n// import ActionsMenu from './ActionsMenu';\r\n// import MobileMenu from './MobileMenu';\r\n// import SearchModal from './SearchModal';\r\n// // Removed AnnouncementBanner import\r\n//\r\n// const Header = () => {\r\n//   const headerRef = useRef(null);\r\n//   const theme = useTheme();\r\n//   const isMobile = useMediaQuery(theme.breakpoints.down('md'));\r\n//   const { isScrolled, isVisible } = useHeader();\r\n//   useHeaderVisibility(headerRef); // Manages header visibility based on scroll\r\n//   const {\r\n//     searchOpen,\r\n//     setSearchOpen,\r\n//     mobileMenuOpen,\r\n//     setMobileMenuOpen,\r\n//     closeAllMenus,\r\n//   } = useHeaderContext();\r\n//\r\n//   // Initialize keyboard navigation\r\n//   useKeyboardNavigation();\r\n//\r\n//   return (\r\n//     <>\r\n//       <AnimatePresence>\r\n//         {isVisible && (\r\n//           <motion.div\r\n//             ref={headerRef}\r\n//             initial=\"initial\"\r\n//             animate=\"animate\"\r\n//             exit=\"exit\"\r\n//             variants={fadeIn}\r\n//             style={{ width: '100%', position: 'sticky', top: 0, zIndex: 1400 }} // Ensures header stays on top\r\n//           >\r\n//             {/* Main Header */}\r\n//             <AppBar\r\n//               position=\"static\"\r\n//               elevation={0}\r\n//               sx={{\r\n//                 ...headerStyles.root,\r\n//                 ...(isScrolled && headerStyles.headerScrolled(theme)),\r\n//               }}\r\n//             >\r\n//               <Container maxWidth=\"lg\">\r\n//                 <Box sx={headerStyles.container}>\r\n//                   {/* Logo */}\r\n//                   <motion.div\r\n//                     variants={slideIn}\r\n//                     initial=\"initial\"\r\n//                     animate=\"animate\"\r\n//                   >\r\n//                     <Logo />\r\n//                   </motion.div>\r\n//\r\n//                   {/* Navigation Menu - Desktop */}\r\n//                   {!isMobile && (\r\n//                     <Box sx={headerStyles.nav}>\r\n//                       <motion.div\r\n//                         variants={fadeIn}\r\n//                         initial=\"initial\"\r\n//                         animate=\"animate\"\r\n//                       >\r\n//                         <NavigationMenu />\r\n//                       </motion.div>\r\n//                     </Box>\r\n//                   )}\r\n//\r\n//                   {/* Actions Menu */}\r\n//                   <Box sx={headerStyles.actions}>\r\n//                     <motion.div\r\n//                       variants={fadeIn}\r\n//                       initial=\"initial\"\r\n//                       animate=\"animate\"\r\n//                     >\r\n//                       <ActionsMenu\r\n//                         onSearchClick={() => setSearchOpen(true)}\r\n//                         onMobileMenuClick={() => setMobileMenuOpen(true)}\r\n//                         isMobile={isMobile}\r\n//                       />\r\n//                     </motion.div>\r\n//\r\n//                     {/* Mobile Menu Toggle */}\r\n//                     {isMobile && (\r\n//                       <IconButton\r\n//                         color=\"inherit\"\r\n//                         onClick={() => setMobileMenuOpen(true)}\r\n//                         edge=\"end\"\r\n//                         sx={headerStyles.mobileMenuButton}\r\n//                         aria-label=\"open mobile menu\" // Added aria-label for accessibility\r\n//                       >\r\n//                         <MenuIcon />\r\n//                       </IconButton>\r\n//                     )}\r\n//                   </Box>\r\n//                 </Box>\r\n//               </Container>\r\n//             </AppBar>\r\n//           </motion.div>\r\n//         )}\r\n//       </AnimatePresence>\r\n//\r\n//       {/* Modals and Mobile Menu */}\r\n//       <AnimatePresence>\r\n//         {searchOpen && (\r\n//           <SearchModal\r\n//             key=\"search-modal\"\r\n//             open={searchOpen}\r\n//             onClose={() => setSearchOpen(false)}\r\n//           />\r\n//         )}\r\n//\r\n//         {mobileMenuOpen && (\r\n//           <MobileMenu\r\n//             key=\"mobile-menu\"\r\n//             open={mobileMenuOpen}\r\n//             onClose={() => setMobileMenuOpen(false)}\r\n//           />\r\n//         )}\r\n//       </AnimatePresence>\r\n//     </>\r\n//   );\r\n// };\r\n//\r\n// export default Header;\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n// // src/components/Header/index.js\r\n//\r\n// import React, { useRef } from 'react';\r\n// import {\r\n//   AppBar,\r\n//   Box,\r\n//   Container,\r\n//   IconButton,\r\n//   useTheme,\r\n//   useMediaQuery,\r\n//   Typography,\r\n// } from '@mui/material';\r\n// import { Menu as MenuIcon } from '@mui/icons-material';\r\n// import { motion, AnimatePresence } from 'framer-motion'; // Correctly imported\r\n// import { useHeaderContext } from '../../contexts/HeaderContext';\r\n// import { useHeader } from '../../hooks/useHeader';\r\n// import { useHeaderVisibility } from '../../hooks/useHeaderVisibility';\r\n// import { useKeyboardNavigation } from './KeyboardNavigation';\r\n// import { headerStyles } from './styles';\r\n// import { fadeIn, slideIn } from './animations';\r\n// import Logo from './Logo';\r\n// import NavigationMenu from './NavigationMenu';\r\n// import ActionsMenu from './ActionsMenu';\r\n// import MobileMenu from './MobileMenu';\r\n// import SearchModal from './SearchModal';\r\n// import AnnouncementBanner from './AnnouncementBanner';\r\n//\r\n// const Header = () => {\r\n//   const headerRef = useRef(null);\r\n//   const theme = useTheme();\r\n//   const isMobile = useMediaQuery(theme.breakpoints.down('md'));\r\n//   const { isScrolled, isVisible } = useHeader();\r\n//   useHeaderVisibility(headerRef); // Manages header visibility based on scroll\r\n//   const {\r\n//     searchOpen,\r\n//     setSearchOpen,\r\n//     mobileMenuOpen,\r\n//     setMobileMenuOpen,\r\n//     closeAllMenus,\r\n//   } = useHeaderContext();\r\n//\r\n//   // Initialize keyboard navigation\r\n//   useKeyboardNavigation();\r\n//\r\n//   return (\r\n//     <>\r\n//       <AnimatePresence>\r\n//         {isVisible && (\r\n//           <motion.div\r\n//             ref={headerRef}\r\n//             initial=\"initial\"\r\n//             animate=\"animate\"\r\n//             exit=\"exit\"\r\n//             variants={fadeIn}\r\n//             style={{ width: '100%', position: 'sticky', top: 0, zIndex: 1400 }} // Increased zIndex for enterprise layering\r\n//           >\r\n//             {/* Announcement Banner */}\r\n//             <AnnouncementBanner />\r\n//\r\n//             {/* Main Header */}\r\n//             <AppBar\r\n//               position=\"static\"\r\n//               elevation={0}\r\n//               sx={{\r\n//                 ...headerStyles.root,\r\n//                 ...(isScrolled && headerStyles.headerScrolled(theme)),\r\n//               }}\r\n//             >\r\n//               <Container maxWidth=\"lg\">\r\n//                 <Box sx={headerStyles.container}>\r\n//                   {/* Logo */}\r\n//                   <motion.div\r\n//                     variants={slideIn}\r\n//                     initial=\"initial\"\r\n//                     animate=\"animate\"\r\n//                   >\r\n//                     <Logo />\r\n//                   </motion.div>\r\n//\r\n//                   {/* Navigation Menu - Desktop */}\r\n//                   {!isMobile && (\r\n//                     <Box sx={headerStyles.nav}>\r\n//                       <motion.div\r\n//                         variants={fadeIn}\r\n//                         initial=\"initial\"\r\n//                         animate=\"animate\"\r\n//                       >\r\n//                         <NavigationMenu />\r\n//                       </motion.div>\r\n//                     </Box>\r\n//                   )}\r\n//\r\n//                   {/* Actions Menu */}\r\n//                   <Box sx={headerStyles.actions}>\r\n//                     <motion.div\r\n//                       variants={fadeIn}\r\n//                       initial=\"initial\"\r\n//                       animate=\"animate\"\r\n//                     >\r\n//                       <ActionsMenu\r\n//                         onSearchClick={() => setSearchOpen(true)}\r\n//                         onMobileMenuClick={() => setMobileMenuOpen(true)}\r\n//                         isMobile={isMobile}\r\n//                       />\r\n//                     </motion.div>\r\n//\r\n//                     {/* Mobile Menu Toggle */}\r\n//                     {isMobile && (\r\n//                       <IconButton\r\n//                         color=\"inherit\"\r\n//                         onClick={() => setMobileMenuOpen(true)}\r\n//                         edge=\"end\"\r\n//                         sx={headerStyles.mobileMenuButton}\r\n//                         aria-label=\"open mobile menu\" // Added aria-label for accessibility\r\n//                       >\r\n//                         <MenuIcon />\r\n//                       </IconButton>\r\n//                     )}\r\n//                   </Box>\r\n//                 </Box>\r\n//               </Container>\r\n//             </AppBar>\r\n//           </motion.div>\r\n//         )}\r\n//       </AnimatePresence>\r\n//\r\n//       {/* Modals and Mobile Menu */}\r\n//       <AnimatePresence>\r\n//         {searchOpen && (\r\n//           <SearchModal\r\n//             key=\"search-modal\"\r\n//             open={searchOpen}\r\n//             onClose={() => setSearchOpen(false)}\r\n//           />\r\n//         )}\r\n//\r\n//         {mobileMenuOpen && (\r\n//           <MobileMenu\r\n//             key=\"mobile-menu\"\r\n//             open={mobileMenuOpen}\r\n//             onClose={() => setMobileMenuOpen(false)}\r\n//           />\r\n//         )}\r\n//       </AnimatePresence>\r\n//     </>\r\n//   );\r\n// };\r\n//\r\n// export default Header;\r\n\r\n\r\n\r\n\r\n// // src/components/Header/index.js\r\n// import React, { useRef } from 'react';\r\n// import {\r\n//   AppBar,\r\n//   Box,\r\n//   Container,\r\n//   IconButton,\r\n//   useTheme,\r\n//   useMediaQuery,\r\n//   Typography,\r\n// } from '@mui/material';\r\n// import { Menu as MenuIcon } from '@mui/icons-material';\r\n// import { Link as RouterLink } from 'react-router-dom';\r\n// import { motion, AnimatePresence } from 'framer-motion'; // Ensure motion is imported\r\n// import { useHeaderContext } from '../../contexts/HeaderContext';\r\n// import { useHeader } from '../../hooks/useHeader';\r\n// import { useHeaderVisibility } from '../../hooks/useHeaderVisibility';\r\n// import { useKeyboardNavigation } from './KeyboardNavigation';\r\n// import { headerStyles } from './styles';\r\n// import { fadeIn, slideIn } from './animations';\r\n// import Logo from './Logo';\r\n// import NavigationMenu from './NavigationMenu';\r\n// import ActionsMenu from './ActionsMenu';\r\n// import MobileMenu from './MobileMenu';\r\n// import SearchModal from './SearchModal';\r\n// import AnnouncementBanner from './AnnouncementBanner';\r\n//\r\n// const Header = () => {\r\n//   const headerRef = useRef(null);\r\n//   const theme = useTheme();\r\n//   const isMobile = useMediaQuery(theme.breakpoints.down('md'));\r\n//   const { isScrolled, isVisible } = useHeader();\r\n//   useHeaderVisibility(headerRef); // Removed isIntersecting since it's unused\r\n//   const {\r\n//     searchOpen,\r\n//     setSearchOpen,\r\n//     mobileMenuOpen,\r\n//     setMobileMenuOpen,\r\n//     closeAllMenus,\r\n//   } = useHeaderContext();\r\n//\r\n//   // Initialize keyboard navigation\r\n//   useKeyboardNavigation();\r\n//\r\n//   return (\r\n//     <>\r\n//       <AnimatePresence>\r\n//         {isVisible && (\r\n//           <motion.div\r\n//             ref={headerRef}\r\n//             initial=\"initial\"\r\n//             animate=\"animate\"\r\n//             exit=\"exit\"\r\n//             variants={fadeIn}\r\n//             style={{ width: '100%', position: 'sticky', top: 0, zIndex: 1300 }}\r\n//           >\r\n//             {/* Announcement Banner */}\r\n//             <AnnouncementBanner />\r\n//\r\n//             {/* Main Header */}\r\n//             <AppBar\r\n//               position=\"static\"\r\n//               elevation={0}\r\n//               sx={{\r\n//                 ...headerStyles.root,\r\n//                 ...(isScrolled && headerStyles.headerScrolled(theme)),\r\n//               }}\r\n//             >\r\n//               <Container maxWidth=\"lg\">\r\n//                 <Box sx={headerStyles.container}>\r\n//                   {/* Logo */}\r\n//                   <motion.div\r\n//                     variants={slideIn}\r\n//                     initial=\"initial\"\r\n//                     animate=\"animate\"\r\n//                   >\r\n//                     <Logo />\r\n//                   </motion.div>\r\n//\r\n//                   {/* Navigation Menu - Desktop */}\r\n//                   {!isMobile && (\r\n//                     <Box sx={headerStyles.nav}>\r\n//                       <motion.div\r\n//                         variants={fadeIn}\r\n//                         initial=\"initial\"\r\n//                         animate=\"animate\"\r\n//                       >\r\n//                         <NavigationMenu />\r\n//                       </motion.div>\r\n//                     </Box>\r\n//                   )}\r\n//\r\n//                   {/* Actions Menu */}\r\n//                   <Box sx={headerStyles.actions}>\r\n//                     <motion.div\r\n//                       variants={fadeIn}\r\n//                       initial=\"initial\"\r\n//                       animate=\"animate\"\r\n//                     >\r\n//                       <ActionsMenu\r\n//                         onSearchClick={() => setSearchOpen(true)}\r\n//                         onMobileMenuClick={() => setMobileMenuOpen(true)}\r\n//                         isMobile={isMobile}\r\n//                       />\r\n//                     </motion.div>\r\n//\r\n//                     {/* Mobile Menu Toggle */}\r\n//                     {isMobile && (\r\n//                       <IconButton\r\n//                         color=\"inherit\"\r\n//                         onClick={() => setMobileMenuOpen(true)}\r\n//                         edge=\"end\"\r\n//                         sx={headerStyles.mobileMenuButton}\r\n//                         aria-label=\"open mobile menu\" // Added aria-label for accessibility\r\n//                       >\r\n//                         <MenuIcon />\r\n//                       </IconButton>\r\n//                     )}\r\n//                   </Box>\r\n//                 </Box>\r\n//               </Container>\r\n//             </AppBar>\r\n//           </motion.div>\r\n//         )}\r\n//       </AnimatePresence>\r\n//\r\n//       {/* Modals and Mobile Menu */}\r\n//       <AnimatePresence>\r\n//         {searchOpen && (\r\n//           <SearchModal\r\n//             key=\"search-modal\"\r\n//             open={searchOpen}\r\n//             onClose={() => setSearchOpen(false)}\r\n//           />\r\n//         )}\r\n//\r\n//         {mobileMenuOpen && (\r\n//           <MobileMenu\r\n//             key=\"mobile-menu\"\r\n//             open={mobileMenuOpen}\r\n//             onClose={() => setMobileMenuOpen(false)}\r\n//           />\r\n//         )}\r\n//       </AnimatePresence>\r\n//     </>\r\n//   );\r\n// };\r\n//\r\n// export default Header;\r\n\r\n\r\n// // src/components/Header/index.js\r\n//\r\n// import React, { useRef } from 'react';\r\n// import {\r\n//   AppBar,\r\n//   Box,\r\n//   Container,\r\n//   IconButton,\r\n//   useTheme,\r\n//   useMediaQuery,\r\n//   Typography,\r\n// } from '@mui/material';\r\n// import { Menu as MenuIcon } from '@mui/icons-material';\r\n// import { motion, AnimatePresence } from 'framer-motion';\r\n// import { useHeaderContext } from '../../contexts/HeaderContext';\r\n// import { useHeader } from '../../hooks/useHeader';\r\n// import { useHeaderVisibility } from '../../hooks/useHeaderVisibility';\r\n// import { useKeyboardNavigation } from './KeyboardNavigation';\r\n// import { headerStyles } from './styles';\r\n// import { fadeIn, slideIn } from './animations';\r\n// import Logo from './Logo';\r\n// import NavigationMenu from './NavigationMenu';\r\n// import ActionsMenu from './ActionsMenu';\r\n// import MobileMenu from './MobileMenu';\r\n// import SearchModal from './SearchModal';\r\n// import AnnouncementBanner from './AnnouncementBanner';\r\n//\r\n// const Header = () => {\r\n//   const headerRef = useRef(null);\r\n//   const theme = useTheme();\r\n//   const isMobile = useMediaQuery(theme.breakpoints.down('md'));\r\n//   const { isScrolled, isVisible } = useHeader();\r\n//   useHeaderVisibility(headerRef); // Ensures header visibility based on scroll\r\n//   const {\r\n//     searchOpen,\r\n//     setSearchOpen,\r\n//     mobileMenuOpen,\r\n//     setMobileMenuOpen,\r\n//     closeAllMenus,\r\n//   } = useHeaderContext();\r\n//\r\n//   // Initialize keyboard navigation\r\n//   useKeyboardNavigation();\r\n//\r\n//   return (\r\n//     <>\r\n//       <AnimatePresence>\r\n//         {isVisible && (\r\n//           <motion.div\r\n//             ref={headerRef}\r\n//             initial=\"initial\"\r\n//             animate=\"animate\"\r\n//             exit=\"exit\"\r\n//             variants={fadeIn}\r\n//             style={{ width: '100%', position: 'sticky', top: 0, zIndex: 1300 }}\r\n//           >\r\n//             {/* Announcement Banner */}\r\n//             <AnnouncementBanner />\r\n//\r\n//             {/* Main Header */}\r\n//             <AppBar\r\n//               position=\"static\"\r\n//               elevation={0}\r\n//               sx={{\r\n//                 ...headerStyles.root,\r\n//                 ...(isScrolled && headerStyles.headerScrolled(theme)),\r\n//               }}\r\n//             >\r\n//               <Container maxWidth=\"lg\">\r\n//                 <Box sx={headerStyles.container}>\r\n//                   {/* Logo */}\r\n//                   <motion.div\r\n//                     variants={slideIn}\r\n//                     initial=\"initial\"\r\n//                     animate=\"animate\"\r\n//                   >\r\n//                     <Logo />\r\n//                   </motion.div>\r\n//\r\n//                   {/* Navigation Menu - Desktop */}\r\n//                   {!isMobile && (\r\n//                     <Box sx={headerStyles.nav}>\r\n//                       <motion.div\r\n//                         variants={fadeIn}\r\n//                         initial=\"initial\"\r\n//                         animate=\"animate\"\r\n//                       >\r\n//                         <NavigationMenu />\r\n//                       </motion.div>\r\n//                     </Box>\r\n//                   )}\r\n//\r\n//                   {/* Actions Menu */}\r\n//                   <Box sx={headerStyles.actions}>\r\n//                     <motion.div\r\n//                       variants={fadeIn}\r\n//                       initial=\"initial\"\r\n//                       animate=\"animate\"\r\n//                     >\r\n//                       <ActionsMenu\r\n//                         onSearchClick={() => setSearchOpen(true)}\r\n//                         onMobileMenuClick={() => setMobileMenuOpen(true)}\r\n//                         isMobile={isMobile}\r\n//                       />\r\n//                     </motion.div>\r\n//\r\n//                     {/* Mobile Menu Toggle */}\r\n//                     {isMobile && (\r\n//                       <IconButton\r\n//                         color=\"inherit\"\r\n//                         onClick={() => setMobileMenuOpen(true)}\r\n//                         edge=\"end\"\r\n//                         sx={headerStyles.mobileMenuButton}\r\n//                         aria-label=\"open mobile menu\" // Added aria-label for accessibility\r\n//                       >\r\n//                         <MenuIcon />\r\n//                       </IconButton>\r\n//                     )}\r\n//                   </Box>\r\n//                 </Box>\r\n//               </Container>\r\n//             </AppBar>\r\n//           </motion.div>\r\n//         )}\r\n//       </AnimatePresence>\r\n//\r\n//       {/* Modals and Mobile Menu */}\r\n//       <AnimatePresence>\r\n//         {searchOpen && (\r\n//           <SearchModal\r\n//             key=\"search-modal\"\r\n//             open={searchOpen}\r\n//             onClose={() => setSearchOpen(false)}\r\n//           />\r\n//         )}\r\n//\r\n//         {mobileMenuOpen && (\r\n//           <MobileMenu\r\n//             key=\"mobile-menu\"\r\n//             open={mobileMenuOpen}\r\n//             onClose={() => setMobileMenuOpen(false)}\r\n//           />\r\n//         )}\r\n//       </AnimatePresence>\r\n//     </>\r\n//   );\r\n// };\r\n//\r\n// export default Header;\r\n\r\n// // src/components/Header/index.js\r\n// import React, { useRef } from 'react';\r\n// import {\r\n//   AppBar,\r\n//   Box,\r\n//   Container,\r\n//   IconButton,\r\n//   useTheme,\r\n//   useMediaQuery,\r\n//   Typography,\r\n// } from '@mui/material';\r\n// import { Menu as MenuIcon } from '@mui/icons-material';\r\n// import { Link as RouterLink } from 'react-router-dom';\r\n// import { motion, AnimatePresence } from 'framer-motion';\r\n// import { useHeaderContext } from '../../contexts/HeaderContext';\r\n// import { useHeader } from '../../hooks/useHeader';\r\n// import { useHeaderVisibility } from '../../hooks/useHeaderVisibility';\r\n// import { useKeyboardNavigation } from './KeyboardNavigation';\r\n// import { headerStyles } from './styles';\r\n// import { fadeIn, slideIn } from './animations';\r\n// import Logo from './Logo';\r\n// import NavigationMenu from './NavigationMenu';\r\n// import ActionsMenu from './ActionsMenu';\r\n// import MobileMenu from './MobileMenu';\r\n// import SearchModal from './SearchModal';\r\n// import AnnouncementBanner from './AnnouncementBanner';\r\n//\r\n// const Header = () => {\r\n//   const headerRef = useRef(null);\r\n//   const theme = useTheme();\r\n//   const isMobile = useMediaQuery(theme.breakpoints.down('md'));\r\n//   const { isScrolled, isVisible } = useHeader();\r\n//   useHeaderVisibility(headerRef); // Removed isIntersecting since it's unused\r\n//   const {\r\n//     searchOpen,\r\n//     setSearchOpen,\r\n//     mobileMenuOpen,\r\n//     setMobileMenuOpen,\r\n//     closeAllMenus,\r\n//   } = useHeaderContext();\r\n//\r\n//   // Initialize keyboard navigation\r\n//   useKeyboardNavigation();\r\n//\r\n//   return (\r\n//     <>\r\n//       <AnimatePresence>\r\n//         {isVisible && (\r\n//           <motion.div\r\n//             ref={headerRef}\r\n//             initial=\"initial\"\r\n//             animate=\"animate\"\r\n//             exit=\"exit\"\r\n//             variants={fadeIn}\r\n//             style={{ width: '100%', position: 'sticky', top: 0, zIndex: 1300 }}\r\n//           >\r\n//             {/* Announcement Banner */}\r\n//             <AnnouncementBanner />\r\n//\r\n//             {/* Main Header */}\r\n//             <AppBar\r\n//               position=\"static\"\r\n//               elevation={0}\r\n//               sx={{\r\n//                 ...headerStyles.root,\r\n//                 ...(isScrolled && headerStyles.headerScrolled),\r\n//               }}\r\n//             >\r\n//               <Container maxWidth=\"lg\">\r\n//                 <Box sx={headerStyles.container}>\r\n//                   {/* Logo */}\r\n//                   <motion.div\r\n//                     variants={slideIn}\r\n//                     initial=\"initial\"\r\n//                     animate=\"animate\"\r\n//                   >\r\n//                     <Logo />\r\n//                   </motion.div>\r\n//\r\n//                   {/* Navigation Menu - Desktop */}\r\n//                   {!isMobile && (\r\n//                     <Box sx={headerStyles.nav}>\r\n//                       <motion.div\r\n//                         variants={fadeIn}\r\n//                         initial=\"initial\"\r\n//                         animate=\"animate\"\r\n//                       >\r\n//                         <NavigationMenu />\r\n//                       </motion.div>\r\n//                     </Box>\r\n//                   )}\r\n//\r\n//                   {/* Actions Menu */}\r\n//                   <Box sx={headerStyles.actions}>\r\n//                     <motion.div\r\n//                       variants={fadeIn}\r\n//                       initial=\"initial\"\r\n//                       animate=\"animate\"\r\n//                     >\r\n//                       <ActionsMenu\r\n//                         onSearchClick={() => setSearchOpen(true)}\r\n//                         onMobileMenuClick={() => setMobileMenuOpen(true)}\r\n//                         isMobile={isMobile}\r\n//                       />\r\n//                     </motion.div>\r\n//\r\n//                     {/* Mobile Menu Toggle */}\r\n//                     {isMobile && (\r\n//                       <IconButton\r\n//                         color=\"inherit\"\r\n//                         onClick={() => setMobileMenuOpen(true)}\r\n//                         edge=\"end\"\r\n//                         sx={headerStyles.mobileMenuButton}\r\n//                         aria-label=\"open mobile menu\" // Added aria-label for accessibility\r\n//                       >\r\n//                         <MenuIcon />\r\n//                       </IconButton>\r\n//                     )}\r\n//                   </Box>\r\n//                 </Box>\r\n//               </Container>\r\n//             </AppBar>\r\n//           </motion.div>\r\n//         )}\r\n//       </AnimatePresence>\r\n//\r\n//       {/* Modals and Mobile Menu */}\r\n//       <AnimatePresence>\r\n//         {searchOpen && (\r\n//           <SearchModal\r\n//             key=\"search-modal\"\r\n//             open={searchOpen}\r\n//             onClose={() => setSearchOpen(false)}\r\n//           />\r\n//         )}\r\n//\r\n//         {mobileMenuOpen && (\r\n//           <MobileMenu\r\n//             key=\"mobile-menu\"\r\n//             open={mobileMenuOpen}\r\n//             onClose={() => setMobileMenuOpen(false)}\r\n//           />\r\n//         )}\r\n//       </AnimatePresence>\r\n//     </>\r\n//   );\r\n// };\r\n//\r\n// export default Header;\r\n\r\n\r\n\r\n\r\n// // src/components/Header/index.js\r\n// import React, { useRef } from 'react';\r\n// import {\r\n//   AppBar,\r\n//   Box,\r\n//   Container,\r\n//   IconButton,\r\n//   useTheme,\r\n//   useMediaQuery,\r\n//   Typography,\r\n// } from '@mui/material';\r\n// import { Menu as MenuIcon } from '@mui/icons-material';\r\n// import { Link as RouterLink } from 'react-router-dom';\r\n// import { motion, AnimatePresence } from 'framer-motion';\r\n// import { useHeaderContext } from '../../contexts/HeaderContext';\r\n// import { useHeader } from '../../hooks/useHeader';\r\n// import { useHeaderVisibility } from '../../hooks/useHeaderVisibility';\r\n// import { useKeyboardNavigation } from './KeyboardNavigation';\r\n// import { headerStyles } from './styles';\r\n// import { fadeIn, slideIn } from './animations';\r\n// import Logo from './Logo';\r\n// import NavigationMenu from './NavigationMenu';\r\n// import ActionsMenu from './ActionsMenu';\r\n// import MobileMenu from './MobileMenu';\r\n// import SearchModal from './SearchModal';\r\n// import AnnouncementBanner from './AnnouncementBanner';\r\n//\r\n// const Header = () => {\r\n//   const headerRef = useRef(null);\r\n//   const theme = useTheme();\r\n//   const isMobile = useMediaQuery(theme.breakpoints.down('md'));\r\n//   const { isScrolled, isVisible } = useHeader();\r\n//   const isIntersecting = useHeaderVisibility(headerRef);\r\n//   const {\r\n//     searchOpen,\r\n//     setSearchOpen,\r\n//     mobileMenuOpen,\r\n//     setMobileMenuOpen,\r\n//     closeAllMenus,\r\n//   } = useHeaderContext();\r\n//\r\n//   // Initialize keyboard navigation\r\n//   useKeyboardNavigation();\r\n//\r\n//   return (\r\n//     <AnimatePresence>\r\n//       <motion.div\r\n//         ref={headerRef}\r\n//         initial=\"initial\"\r\n//         animate={isVisible ? \"animate\" : \"exit\"}\r\n//         variants={fadeIn}\r\n//       >\r\n//         {/* Announcement Banner */}\r\n//         <AnnouncementBanner />\r\n//\r\n//         {/* Main Header */}\r\n//         <AppBar\r\n//           position=\"sticky\"\r\n//           elevation={0}\r\n//           sx={{\r\n//             ...headerStyles.root,\r\n//             ...(isScrolled && headerStyles.headerScrolled),\r\n//           }}\r\n//         >\r\n//\r\n//           <Container maxWidth=\"lg\">\r\n//             <Box sx={headerStyles.container}>\r\n//               {/* Logo */}\r\n//               <motion.div\r\n//                 variants={slideIn}\r\n//                 initial=\"initial\"\r\n//                 animate=\"animate\"\r\n//               >\r\n//                 <Logo />\r\n//               </motion.div>\r\n//\r\n//               {/* Navigation Menu - Desktop */}\r\n//               {!isMobile && (\r\n//                 <Box sx={headerStyles.nav}>\r\n//                   <motion.div\r\n//                     variants={fadeIn}\r\n//                     initial=\"initial\"\r\n//                     animate=\"animate\"\r\n//                   >\r\n//                     <NavigationMenu />\r\n//                   </motion.div>\r\n//                 </Box>\r\n//               )}\r\n//\r\n//               {/* Actions Menu */}\r\n//               <Box sx={headerStyles.actions}>\r\n//                 <motion.div\r\n//                   variants={fadeIn}\r\n//                   initial=\"initial\"\r\n//                   animate=\"animate\"\r\n//                 >\r\n//                   <ActionsMenu\r\n//                     onSearchClick={() => setSearchOpen(true)}\r\n//                     onMobileMenuClick={() => setMobileMenuOpen(true)}\r\n//                     isMobile={isMobile}\r\n//                   />\r\n//                 </motion.div>\r\n//\r\n//                 {/* Mobile Menu Toggle */}\r\n//                 {isMobile && (\r\n//                   <IconButton\r\n//                     color=\"inherit\"\r\n//                     onClick={() => setMobileMenuOpen(true)}\r\n//                     edge=\"end\"\r\n//                     sx={headerStyles.mobileMenuButton}\r\n//                   >\r\n//                     <MenuIcon />\r\n//                   </IconButton>\r\n//                 )}\r\n//               </Box>\r\n//             </Box>\r\n//           </Container>\r\n//         </AppBar>\r\n//\r\n//         {/* Modals and Mobile Menu */}\r\n//         <AnimatePresence>\r\n//           {searchOpen && (\r\n//             <SearchModal\r\n//               open={searchOpen}\r\n//               onClose={() => setSearchOpen(false)}\r\n//             />\r\n//           )}\r\n//\r\n//           {mobileMenuOpen && (\r\n//             <MobileMenu\r\n//               open={mobileMenuOpen}\r\n//               onClose={() => setMobileMenuOpen(false)}\r\n//             />\r\n//           )}\r\n//         </AnimatePresence>\r\n//       </motion.div>\r\n//     </AnimatePresence>\r\n//   );\r\n// };\r\n//\r\n// export default Header;","// src/hooks/useHeader.js\r\nimport { useState, useEffect } from 'react';\r\n\r\nexport const useHeader = () => {\r\n  const [isScrolled, setIsScrolled] = useState(false);\r\n  const [isVisible, setIsVisible] = useState(true);\r\n  let lastScroll = 0;\r\n\r\n  useEffect(() => {\r\n    const handleScroll = () => {\r\n      const currentScroll = window.pageYOffset;\r\n\r\n      // Set scrolled state\r\n      setIsScrolled(currentScroll > 0);\r\n\r\n      // Handle header visibility\r\n      if (currentScroll <= 0) {\r\n        setIsVisible(true);\r\n        return;\r\n      }\r\n\r\n      if (currentScroll > lastScroll && isVisible) {\r\n        setIsVisible(false); // Hide header on scroll down\r\n      } else if (currentScroll < lastScroll && !isVisible) {\r\n        setIsVisible(true); // Show header on scroll up\r\n      }\r\n\r\n      lastScroll = currentScroll;\r\n    };\r\n\r\n    window.addEventListener('scroll', handleScroll, { passive: true });\r\n    return () => window.removeEventListener('scroll', handleScroll);\r\n  }, [isVisible]);\r\n\r\n  return { isScrolled, isVisible };\r\n};","// src/hooks/useHeaderVisibility.js\r\nimport { useEffect, useState } from 'react';\r\n\r\nexport const useHeaderVisibility = (ref) => {\r\n  const [isIntersecting, setIntersecting] = useState(true);\r\n\r\n  useEffect(() => {\r\n    const observer = new IntersectionObserver(\r\n      ([entry]) => {\r\n        setIntersecting(entry.isIntersecting);\r\n      },\r\n      {\r\n        threshold: 0,\r\n        rootMargin: '-80px 0px 0px 0px',\r\n      }\r\n    );\r\n\r\n    if (ref.current) {\r\n      observer.observe(ref.current);\r\n    }\r\n\r\n    return () => {\r\n      if (ref.current) {\r\n        observer.unobserve(ref.current);\r\n      }\r\n    };\r\n  }, [ref]);\r\n\r\n  return isIntersecting;\r\n};","// src/components/Header/KeyboardNavigation.js\r\nimport { useEffect } from 'react';\r\nimport { useHeaderContext } from '../../contexts/HeaderContext';\r\nimport { useNavigate } from 'react-router-dom';\r\n\r\nexport const useKeyboardNavigation = () => {\r\n  const {\r\n    searchOpen,\r\n    setSearchOpen,\r\n    mobileMenuOpen,\r\n    setMobileMenuOpen,\r\n    activeMenu,\r\n    setActiveMenu,\r\n  } = useHeaderContext();\r\n  const navigate = useNavigate();\r\n\r\n  useEffect(() => {\r\n    const handleKeyDown = (event) => {\r\n      // Open search with CMD/CTRL + K\r\n      if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'k') {\r\n        event.preventDefault();\r\n        setSearchOpen(true);\r\n      }\r\n\r\n      // Close menus with ESC\r\n      if (event.key === 'Escape') {\r\n        if (searchOpen) setSearchOpen(false);\r\n        if (mobileMenuOpen) setMobileMenuOpen(false);\r\n        if (activeMenu) setActiveMenu(null);\r\n      }\r\n\r\n      // Other keyboard shortcuts can be added here\r\n    };\r\n\r\n    window.addEventListener('keydown', handleKeyDown);\r\n    return () => window.removeEventListener('keydown', handleKeyDown);\r\n  }, [searchOpen, mobileMenuOpen, activeMenu, setSearchOpen, setMobileMenuOpen, setActiveMenu, navigate]);\r\n};\r\n\r\n// // src/components/Header/KeyboardNavigation.js\r\n// import { useEffect } from 'react';\r\n// import { useHeaderContext } from '../../contexts/HeaderContext';\r\n//\r\n// export const useKeyboardNavigation = () => {\r\n//   const {\r\n//     searchOpen,\r\n//     setSearchOpen,\r\n//     mobileMenuOpen,\r\n//     setMobileMenuOpen,\r\n//     activeMenu,\r\n//     setActiveMenu,\r\n//   } = useHeaderContext();\r\n//\r\n//   useEffect(() => {\r\n//     const handleKeyDown = (event) => {\r\n//       // Open search with CMD/CTRL + K\r\n//       if ((event.metaKey || event.ctrlKey) && event.key === 'k') {\r\n//         event.preventDefault();\r\n//         setSearchOpen(true);\r\n//       }\r\n//\r\n//       // Close menus with ESC\r\n//       if (event.key === 'Escape') {\r\n//         if (searchOpen) setSearchOpen(false);\r\n//         if (mobileMenuOpen) setMobileMenuOpen(false);\r\n//         if (activeMenu) setActiveMenu(null);\r\n//       }\r\n//     };\r\n//\r\n//     window.addEventListener('keydown', handleKeyDown);\r\n//     return () => window.removeEventListener('keydown', handleKeyDown);\r\n//   }, [searchOpen, mobileMenuOpen, activeMenu, setSearchOpen, setMobileMenuOpen, setActiveMenu]);\r\n// };","// src/components/Footer/FooterNewsletter.js\r\n\r\nimport React, { useState } from 'react';\r\nimport {\r\n  Box,\r\n  Typography,\r\n  TextField,\r\n  Button,\r\n  Snackbar,\r\n  Alert,\r\n} from '@mui/material';\r\nimport { motion } from 'framer-motion';\r\nimport { useTheme } from '@mui/material/styles';\r\n\r\n\r\nconst FooterNewsletter = () => {\r\n  const theme = useTheme();\r\n  const [formData, setFormData] = useState({\r\n    email: '',\r\n  });\r\n  const [isSubmitting, setIsSubmitting] = useState(false);\r\n  const [snackbar, setSnackbar] = useState({\r\n    open: false,\r\n    message: '',\r\n    severity: 'success', // 'success' | 'error' | 'warning' | 'info'\r\n  });\r\n\r\n  const formspreeEndpoint = process.env.REACT_APP_FORMSPREE_ENDPOINT || 'https://formspree.io/f/xqaegqlq'; // Replace with your actual Formspree endpoint\r\n  // const publicUrl = process.env.PUBLIC_URL || '';\r\n  // const formspreeEndpoint = process.env.REACT_APP_FORMSPREE_ENDPOINT;\r\n\r\n  const handleInputChange = (e) => {\r\n    setFormData({\r\n      email: e.target.value,\r\n    });\r\n  };\r\n\r\n  const validateEmail = (email) => {\r\n    // Basic email regex for validation\r\n    const emailRegex = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;\r\n    return emailRegex.test(email);\r\n  };\r\n\r\n  const handleFormSubmit = async (e) => {\r\n    e.preventDefault();\r\n\r\n    const { email } = formData;\r\n\r\n    // Validate email\r\n    if (!validateEmail(email)) {\r\n      setSnackbar({\r\n        open: true,\r\n        message: 'Please enter a valid email address.',\r\n        severity: 'error',\r\n      });\r\n      return;\r\n    }\r\n\r\n    setIsSubmitting(true);\r\n\r\n    try {\r\n      const response = await fetch(formspreeEndpoint, {\r\n        method: 'POST',\r\n        headers: {\r\n          'Content-Type': 'application/json',\r\n          Accept: 'application/json',\r\n        },\r\n        body: JSON.stringify({\r\n          email,\r\n        }),\r\n      });\r\n\r\n      if (response.ok) {\r\n        setSnackbar({\r\n          open: true,\r\n          message: 'Thank you for subscribing!',\r\n          severity: 'success',\r\n        });\r\n        setFormData({ email: '' });\r\n      } else {\r\n        const data = await response.json();\r\n        setSnackbar({\r\n          open: true,\r\n          message: data.error || 'Something went wrong. Please try again.',\r\n          severity: 'error',\r\n        });\r\n      }\r\n    } catch (error) {\r\n      console.error('Formspree submission error:', error);\r\n      setSnackbar({\r\n        open: true,\r\n        message: 'An unexpected error occurred. Please try again.',\r\n        severity: 'error',\r\n      });\r\n    } finally {\r\n      setIsSubmitting(false);\r\n    }\r\n  };\r\n\r\n  const handleSnackbarClose = () => {\r\n    setSnackbar((prev) => ({\r\n      ...prev,\r\n      open: false,\r\n    }));\r\n  };\r\n\r\n  return (\r\n    <Box\r\n      component=\"form\"\r\n      onSubmit={handleFormSubmit}\r\n      sx={{\r\n        display: 'flex',\r\n        flexDirection: 'column',\r\n        alignItems: { xs: 'center', sm: 'flex-start' },\r\n      }}\r\n      noValidate\r\n      aria-label=\"Subscribe to our Newsletter\"\r\n    >\r\n      <Typography variant=\"h6\" gutterBottom>\r\n        Subscribe to our Newsletter\r\n      </Typography>\r\n      <Typography variant=\"body2\" color=\"text.secondary\" mb={2}>\r\n        Stay updated with the latest news and updates from SecureAI Guard.\r\n      </Typography>\r\n      <TextField\r\n        label=\"Email Address\"\r\n        variant=\"outlined\"\r\n        size=\"small\"\r\n        type=\"email\"\r\n        value={formData.email}\r\n        onChange={handleInputChange}\r\n        required\r\n        sx={{ mb: 2, width: { xs: '100%', sm: '300px' } }}\r\n        aria-label=\"Email Address\"\r\n      />\r\n      <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>\r\n        <Button\r\n          type=\"submit\"\r\n          variant=\"contained\"\r\n          color=\"primary\"\r\n          disabled={isSubmitting}\r\n          aria-label=\"Subscribe to Newsletter\"\r\n          sx={{ width: { xs: '100%', sm: '150px' } }}\r\n        >\r\n          {isSubmitting ? 'Submitting...' : 'Subscribe'}\r\n        </Button>\r\n      </motion.div>\r\n\r\n      {/* Snackbar for Feedback Messages */}\r\n      <Snackbar\r\n        open={snackbar.open}\r\n        autoHideDuration={6000}\r\n        onClose={handleSnackbarClose}\r\n        anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}\r\n      >\r\n        <Alert\r\n          onClose={handleSnackbarClose}\r\n          severity={snackbar.severity}\r\n          sx={{ width: '100%' }}\r\n          variant=\"filled\"\r\n        >\r\n          {snackbar.message}\r\n        </Alert>\r\n      </Snackbar>\r\n    </Box>\r\n  );\r\n};\r\n\r\nexport default FooterNewsletter;\r\n\r\n\r\n// // src/components/Footer/FooterNewsletter.js\r\n// import React from 'react';\r\n// import {\r\n//   Box,\r\n//   TextField,\r\n//   Button,\r\n//   Typography,\r\n//   Alert,\r\n//   Collapse,\r\n// } from '@mui/material';\r\n// import { Send } from '@mui/icons-material';\r\n// import { motion, AnimatePresence } from 'framer-motion';\r\n// import { useFooterContext } from '../../contexts/FooterContext';\r\n//\r\n// const FooterNewsletter = () => {\r\n//   const {\r\n//     newsletterEmail,\r\n//     setNewsletterEmail,\r\n//     isSubscribing,\r\n//     subscriptionStatus,\r\n//     setSubscriptionStatus,\r\n//     handleNewsletterSubmit,\r\n//   } = useFooterContext();\r\n//\r\n//   const handleSubmit = (e) => {\r\n//     e.preventDefault();\r\n//     handleNewsletterSubmit(newsletterEmail);\r\n//   };\r\n//\r\n//   return (\r\n//     <Box>\r\n//       <Typography\r\n//         variant=\"subtitle1\"\r\n//         color=\"text.primary\"\r\n//         sx={{ fontWeight: 600, mb: 2 }}\r\n//       >\r\n//         Stay Updated\r\n//       </Typography>\r\n//       <Typography variant=\"body2\" color=\"text.secondary\" paragraph>\r\n//         Subscribe to our newsletter for the latest updates and security insights.\r\n//       </Typography>\r\n//       <Box\r\n//         component=\"form\"\r\n//         onSubmit={handleSubmit}\r\n//         sx={{\r\n//           display: 'flex',\r\n//           flexDirection: 'column',\r\n//           gap: 2,\r\n//         }}\r\n//       >\r\n//         <Box sx={{ display: 'flex', gap: 1 }}>\r\n//           <TextField\r\n//             size=\"small\"\r\n//             placeholder=\"Enter your email\"\r\n//             value={newsletterEmail}\r\n//             onChange={(e) => setNewsletterEmail(e.target.value)}\r\n//             fullWidth\r\n//             type=\"email\"\r\n//             required\r\n//             disabled={isSubscribing}\r\n//             sx={{\r\n//               '& .MuiOutlinedInput-root': {\r\n//                 bgcolor: 'background.paper',\r\n//               },\r\n//             }}\r\n//           />\r\n//           <motion.div\r\n//             whileHover={{ scale: 1.05 }}\r\n//             whileTap={{ scale: 0.95 }}\r\n//           >\r\n//             <Button\r\n//               variant=\"contained\"\r\n//               color=\"primary\"\r\n//               type=\"submit\"\r\n//               disabled={isSubscribing}\r\n//               sx={{\r\n//                 height: '100%',\r\n//                 minWidth: 'auto',\r\n//               }}\r\n//             >\r\n//               <Send />\r\n//             </Button>\r\n//           </motion.div>\r\n//         </Box>\r\n//         <AnimatePresence>\r\n//           {subscriptionStatus && (\r\n//             <motion.div\r\n//               initial={{ opacity: 0, y: -10 }}\r\n//               animate={{ opacity: 1, y: 0 }}\r\n//               exit={{ opacity: 0, y: -10 }}\r\n//             >\r\n//               <Alert\r\n//                 severity={subscriptionStatus === 'success' ? 'success' : 'error'}\r\n//                 onClose={() => setSubscriptionStatus(null)}\r\n//               >\r\n//                 {subscriptionStatus === 'success'\r\n//                   ? 'Thank you for subscribing!'\r\n//                   : 'Something went wrong. Please try again.'}\r\n//               </Alert>\r\n//             </motion.div>\r\n//           )}\r\n//         </AnimatePresence>\r\n//       </Box>\r\n//     </Box>\r\n//   );\r\n// };\r\n//\r\n// export default FooterNewsletter;","// src/components/Footer/FooterSocialLinks.js\r\nimport React from 'react';\r\nimport { Box, IconButton, Tooltip } from '@mui/material';\r\nimport { motion } from 'framer-motion';\r\nimport {\r\n  GitHub,\r\n  Twitter,\r\n  LinkedIn,\r\n  YouTube,\r\n} from '@mui/icons-material';\r\n\r\nconst socialLinks = [\r\n  {\r\n    name: 'GitHub',\r\n    icon: <GitHub />,\r\n    url: 'https://github.com/secureai-guard',\r\n  },\r\n  {\r\n    name: 'Twitter',\r\n    icon: <Twitter />,\r\n    url: 'https://twitter.com/secureai_guard',\r\n  },\r\n  {\r\n    name: 'LinkedIn',\r\n    icon: <LinkedIn />,\r\n    url: 'https://linkedin.com/company/secureai-guard',\r\n  },\r\n  {\r\n    name: 'YouTube',\r\n    icon: <YouTube />,\r\n    url: 'https://youtube.com/@secureai_guard',\r\n  },\r\n];\r\n\r\nconst FooterSocialLinks = () => {\r\n  return (\r\n    <Box sx={{ display: 'flex', gap: 1 }}>\r\n      {socialLinks.map((social) => (\r\n        <motion.div\r\n          key={social.name}\r\n          whileHover={{ y: -3 }}\r\n          whileTap={{ scale: 0.95 }}\r\n        >\r\n          <Tooltip title={social.name}>\r\n            <IconButton\r\n              component=\"a\"\r\n              href={social.url}\r\n              target=\"_blank\"\r\n              rel=\"noopener noreferrer\"\r\n              sx={{\r\n                color: 'text.secondary',\r\n                '&:hover': {\r\n                  color: 'primary.main',\r\n                },\r\n              }}\r\n            >\r\n              {social.icon}\r\n            </IconButton>\r\n          </Tooltip>\r\n        </motion.div>\r\n      ))}\r\n    </Box>\r\n  );\r\n};\r\n\r\nexport default FooterSocialLinks;","// src/components/Footer/FooterNavLinks.js\r\nimport React from 'react';\r\nimport { Box, Typography, Link as MuiLink } from '@mui/material';\r\nimport { Link as RouterLink } from 'react-router-dom';\r\nimport { motion } from 'framer-motion';\r\n\r\nconst FooterNavLinks = ({ title, links }) => {\r\n  return (\r\n    <Box>\r\n      <Typography\r\n        variant=\"subtitle1\"\r\n        color=\"text.primary\"\r\n        sx={{ fontWeight: 600, mb: 2 }}\r\n      >\r\n        {title}\r\n      </Typography>\r\n      <Box component=\"ul\" sx={{ listStyle: 'none', p: 0, m: 0 }}>\r\n        {links.map((link) => (\r\n          <Box component=\"li\" key={link.name} sx={{ mb: 1 }}>\r\n            <motion.div\r\n              whileHover={{ x: 5 }}\r\n              transition={{ type: 'spring', stiffness: 300 }}\r\n            >\r\n              <MuiLink\r\n                component={RouterLink}\r\n                to={link.path}\r\n                sx={{\r\n                  color: 'text.secondary',\r\n                  textDecoration: 'none',\r\n                  '&:hover': {\r\n                    color: 'primary.main',\r\n                  },\r\n                }}\r\n              >\r\n                {link.name}\r\n              </MuiLink>\r\n            </motion.div>\r\n          </Box>\r\n        ))}\r\n      </Box>\r\n    </Box>\r\n  );\r\n};\r\n\r\nexport default FooterNavLinks;","// src/components/Footer/styles.js\r\nexport const footerStyles = {\r\n  root: {\r\n    bgcolor: 'background.paper',\r\n    position: 'relative',\r\n    overflow: 'hidden',\r\n  },\r\n\r\n  backgroundGradient: (theme) => ({\r\n    position: 'absolute',\r\n    top: 0,\r\n    left: 0,\r\n    right: 0,\r\n    bottom: 0,\r\n    background: `radial-gradient(circle at 0% 0%, ${theme.palette.primary.main}15 0%, transparent 50%),\r\n                radial-gradient(circle at 100% 100%, ${theme.palette.secondary.main}15 0%, transparent 50%)`,\r\n    zIndex: 0,\r\n  }),\r\n\r\n  container: {\r\n    position: 'relative',\r\n    zIndex: 1,\r\n  },\r\n\r\n  scrollToTop: {\r\n    position: 'absolute',\r\n    top: -25,\r\n    left: '50%',\r\n    transform: 'translateX(-50%)',\r\n    zIndex: 2,\r\n  },\r\n\r\n  scrollButton: (theme) => ({\r\n    bgcolor: 'background.paper',\r\n    boxShadow: theme.shadows[4],\r\n    '&:hover': {\r\n      bgcolor: 'background.paper',\r\n    },\r\n  }),\r\n\r\n  bottomBar: {\r\n    py: 3,\r\n    display: 'flex',\r\n    flexDirection: { xs: 'column', sm: 'row' },\r\n    alignItems: 'center',\r\n    justifyContent: 'space-between',\r\n    gap: 2,\r\n  },\r\n\r\n  legalLinks: {\r\n    display: 'flex',\r\n    gap: 3,\r\n    flexWrap: 'wrap',\r\n    justifyContent: 'center',\r\n  },\r\n\r\n  legalLink: {\r\n    color: 'text.secondary',\r\n    textDecoration: 'none',\r\n    '&:hover': {\r\n      color: 'primary.main',\r\n    },\r\n  },\r\n};","// src/components/Footer/footerData.js\r\nexport const footerSections = [\r\n  {\r\n    title: 'Product',\r\n    links: [\r\n      { name: 'Features', path: '/features' },\r\n      { name: 'Security', path: '/security' },\r\n      { name: 'Enterprise', path: '/features' },\r\n      { name: 'Pricing', path: '/pricing' },\r\n      { name: 'Demo', path: '/features' },\r\n    ],\r\n  },\r\n  {\r\n    title: 'Resources',\r\n    links: [\r\n      { name: 'Documentation', path: '/docs' },\r\n      { name: 'API Reference', path: '/docs' },\r\n      // { name: 'Blog', path: '/blog' },\r\n      { name: 'Guides', path: '/implementation' },\r\n      // { name: 'Status', path: '/status' },\r\n    ],\r\n  },\r\n  {\r\n    title: 'Company',\r\n    links: [\r\n      { name: 'About', path: '/about' },\r\n      // { name: 'Careers', path: '/careers' },\r\n      { name: 'Contact', path: '/contact' },\r\n      { name: 'Partners', path: '/partners' },\r\n      { name: 'Legal', path: '/privacy' },\r\n    ],\r\n  },\r\n];","// src/components/Footer/ModernFooter.js\r\n\r\nimport React from 'react';\r\nimport {\r\n  Box,\r\n  Container,\r\n  Grid,\r\n  Typography,\r\n  IconButton,\r\n  Divider,\r\n  useTheme,\r\n  Link as MuiLink,\r\n} from '@mui/material';\r\nimport { motion } from 'framer-motion';\r\nimport { Link as RouterLink } from 'react-router-dom';\r\nimport { KeyboardArrowUp } from '@mui/icons-material';\r\nimport FooterNewsletter from './FooterNewsletter';\r\nimport FooterSocialLinks from './FooterSocialLinks';\r\nimport FooterNavLinks from './FooterNavLinks';\r\nimport { footerStyles } from './styles';\r\nimport { footerSections } from './footerData';\r\n\r\nconst ModernFooter = () => {\r\n  const theme = useTheme();\r\n\r\n  const scrollToTop = () => {\r\n    window.scrollTo({ top: 0, behavior: 'smooth' });\r\n  };\r\n\r\n  const publicUrl = process.env.PUBLIC_URL || '';\r\n\r\n  return (\r\n    <Box component=\"footer\" sx={footerStyles.root}>\r\n      {/* Background Gradient */}\r\n      <Box sx={footerStyles.backgroundGradient(theme)} />\r\n\r\n      {/* Scroll to Top Button */}\r\n      <Box sx={footerStyles.scrollToTop}>\r\n        <motion.div whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }}>\r\n          <IconButton\r\n            onClick={scrollToTop}\r\n            sx={footerStyles.scrollButton(theme)}\r\n            aria-label=\"Scroll to Top\"\r\n          >\r\n            <KeyboardArrowUp />\r\n          </IconButton>\r\n        </motion.div>\r\n      </Box>\r\n\r\n      <Container maxWidth=\"lg\" sx={footerStyles.container}>\r\n        {/* Main Footer Content */}\r\n        <Box py={8}>\r\n          <Grid container spacing={4}>\r\n            {/* Logo and Description */}\r\n            <Grid item xs={12} md={4}>\r\n              <Box mb={3} display=\"flex\" alignItems=\"center\">\r\n                <motion.img\r\n                  src={`${publicUrl}/assets/images/logo.png`}\r\n                  alt=\"SecureAI Guard\"\r\n                  style={{ height: 50, marginRight: theme.spacing(2) }}\r\n                  whileHover={{ scale: 1.05 }}\r\n                />\r\n                <Typography\r\n                  variant=\"h6\"\r\n                  sx={{\r\n                    fontWeight: 600,\r\n                    color: 'inherit',\r\n                    display: { xs: 'none', sm: 'block' },\r\n                  }}\r\n                >\r\n                  SecureAI Guard\r\n                </Typography>\r\n              </Box>\r\n              <Typography\r\n                variant=\"body2\"\r\n                color=\"text.secondary\"\r\n                paragraph\r\n                sx={{ mb: 2 }}\r\n              >\r\n                Enterprise AI security and Compliance platform for Large Language\r\n                Models and Generative AI applications. Protecting AI systems with\r\n                advanced security and compliance measures.\r\n              </Typography>\r\n\r\n              <FooterSocialLinks />\r\n            </Grid>\r\n\r\n            {/* Footer Sections */}\r\n            {footerSections.map((section) => (\r\n              <Grid item xs={12} sm={6} md={2} key={section.title}>\r\n                <FooterNavLinks title={section.title} links={section.links} />\r\n              </Grid>\r\n            ))}\r\n\r\n            {/* Newsletter Section */}\r\n            <Grid item xs={12} md={4}>\r\n              <FooterNewsletter />\r\n            </Grid>\r\n          </Grid>\r\n        </Box>\r\n\r\n        <Divider />\r\n\r\n        {/* Bottom Bar */}\r\n        <Box sx={footerStyles.bottomBar}>\r\n          <Typography variant=\"body2\" color=\"text.secondary\">\r\n            © {new Date().getFullYear()} SecureAI Guard. All rights reserved.\r\n          </Typography>\r\n\r\n          <Box sx={footerStyles.legalLinks}>\r\n            {[\r\n              { text: 'Privacy Policy', path: '/privacy' },\r\n              { text: 'Terms of Service', path: '/terms' },\r\n              { text: 'Cookie Policy', path: '/cookies' },\r\n              { text: 'Security', path: '/security' },\r\n            ].map((link) => (\r\n              <motion.div key={link.text} whileHover={{ y: -2 }}>\r\n                <MuiLink\r\n                  component={RouterLink}\r\n                  to={link.path}\r\n                  sx={footerStyles.legalLink}\r\n                  color=\"inherit\"\r\n                  underline=\"none\"\r\n                >\r\n                  <Typography variant=\"body2\">{link.text}</Typography>\r\n                </MuiLink>\r\n              </motion.div>\r\n            ))}\r\n          </Box>\r\n        </Box>\r\n      </Container>\r\n    </Box>\r\n  );\r\n};\r\n\r\nexport default ModernFooter;\r\n\r\n\r\n\r\n// // src/components/Footer/ModernFooter.js\r\n// import React from 'react';\r\n// import {\r\n//   Box,\r\n//   Container,\r\n//   Grid,\r\n//   Typography,\r\n//   IconButton,\r\n//   Divider,\r\n//   useTheme,\r\n//   Link as MuiLink,\r\n// } from '@mui/material';\r\n// import { motion } from 'framer-motion';\r\n// import { Link as RouterLink } from 'react-router-dom';\r\n// import { KeyboardArrowUp } from '@mui/icons-material';\r\n// import FooterNewsletter from './FooterNewsletter';\r\n// import FooterSocialLinks from './FooterSocialLinks';\r\n// import FooterNavLinks from './FooterNavLinks';\r\n// import { footerStyles } from './styles';\r\n// import { footerSections } from './footerData';\r\n//\r\n//\r\n// const ModernFooter = () => {\r\n//   const theme = useTheme();\r\n//\r\n//   const scrollToTop = () => {\r\n//     window.scrollTo({ top: 0, behavior: 'smooth' });\r\n//   };\r\n//   const publicUrl = process.env.PUBLIC_URL || '';\r\n//\r\n//   return (\r\n//     <Box\r\n//       component=\"footer\"\r\n//       sx={footerStyles.root}\r\n//     >\r\n//       {/* Background Gradient */}\r\n//       <Box sx={footerStyles.backgroundGradient(theme)} />\r\n//\r\n//       {/* Scroll to Top Button */}\r\n//       <Box sx={footerStyles.scrollToTop}>\r\n//         <motion.div\r\n//           whileHover={{ scale: 1.1 }}\r\n//           whileTap={{ scale: 0.9 }}\r\n//         >\r\n//           <IconButton\r\n//             onClick={scrollToTop}\r\n//             sx={footerStyles.scrollButton(theme)}\r\n//           >\r\n//             <KeyboardArrowUp />\r\n//           </IconButton>\r\n//         </motion.div>\r\n//       </Box>\r\n//\r\n//       <Container maxWidth=\"lg\" sx={footerStyles.container}>\r\n//         {/* Main Footer Content */}\r\n//         <Box py={8}>\r\n//           <Grid container spacing={4}>\r\n//             {/* Logo and Description */}\r\n//             <Grid item xs={12} md={4}>\r\n//               <Box mb={3}>\r\n//                 <motion.img\r\n//                     src={`${publicUrl}/assets/images/logo.png`}\r\n//                     alt=\"SecureAI Guard\"\r\n//                     // style={{height: 32, marginRight: 8}}\r\n//                     style={{height: 50}}\r\n//                     whileHover={{scale: 1.05}}\r\n//                 />\r\n//                 {/*<img*/}\r\n//                 {/*    src=\"/assets/images/logo.svg\"*/}\r\n//                 {/*    alt=\"SecureAI Guard\"*/}\r\n//                 {/*    style={{height: 32, marginRight: 8}}*/}\r\n//                 {/*/>*/}\r\n//                 <Typography\r\n//                     variant=\"h6\"\r\n//                     component=\"span\"\r\n//                     sx={{\r\n//                       fontWeight: 600,\r\n//                       color: 'inherit', // Ensure text color matches theme\r\n//                       display: {xs: 'none', sm: 'block'}, // Show only on small screens and up\r\n//                     }}\r\n//                 >\r\n//                   SecureAI Guard\r\n//                 </Typography>\r\n//               </Box>\r\n//               <Typography variant=\"body2\" color=\"text.secondary\" paragraph>\r\n//                 Enterprise AI security and Compliance platform for Large Language Models and\r\n//                 Generative AI applications. Protecting AI systems with advanced\r\n//                 security and compliance measures.\r\n//               </Typography>\r\n//\r\n//               <FooterSocialLinks/>\r\n//             </Grid>\r\n//\r\n//             {/* Footer Sections */}\r\n//             {footerSections.map((section) => (\r\n//                 <Grid item xs={12} sm={6} md={2} key={section.title}>\r\n//                 <FooterNavLinks\r\n//                   title={section.title}\r\n//                   links={section.links}\r\n//                 />\r\n//               </Grid>\r\n//             ))}\r\n//\r\n//             {/* Newsletter Section */}\r\n//             <Grid item xs={12} md={4}>\r\n//               <FooterNewsletter />\r\n//             </Grid>\r\n//           </Grid>\r\n//         </Box>\r\n//\r\n//         <Divider />\r\n//\r\n//         {/* Bottom Bar */}\r\n//         <Box sx={footerStyles.bottomBar}>\r\n//           <Typography variant=\"body2\" color=\"text.secondary\">\r\n//             © {new Date().getFullYear()} SecureAI Guard. All rights reserved.\r\n//           </Typography>\r\n//\r\n//           <Box sx={footerStyles.legalLinks}>\r\n//             {[\r\n//               { text: 'Privacy Policy', path: '/privacy' },\r\n//               { text: 'Terms of Service', path: '/terms' },\r\n//               { text: 'Cookie Policy', path: '/cookies' },\r\n//               { text: 'Security', path: '/security' },\r\n//             ].map((link) => (\r\n//               <motion.div\r\n//                 key={link.text}\r\n//                 whileHover={{ y: -2 }}\r\n//               >\r\n//                 <MuiLink\r\n//                   component={RouterLink}\r\n//                   to={link.path}\r\n//                   sx={footerStyles.legalLink}\r\n//                 >\r\n//                   <Typography variant=\"body2\">\r\n//                     {link.text}\r\n//                   </Typography>\r\n//                 </MuiLink>\r\n//               </motion.div>\r\n//             ))}\r\n//           </Box>\r\n//         </Box>\r\n//       </Container>\r\n//     </Box>\r\n//   );\r\n// };\r\n//\r\n// export default ModernFooter;\r\n\r\n\r\n\r\n// // // index.js\r\n// // import React from 'react';\r\n// // import { AppBar, Toolbar, Typography, Link, Container } from '@mui/material';\r\n// // import { makeStyles } from '@mui/styles';\r\n// // const useStyles = makeStyles((theme) => ({\r\n// //   footer: {\r\n// //     top: 'auto',\r\n// //     bottom: 0,\r\n// //     backgroundColor: '#333',\r\n// //     color: 'white',\r\n// //   },\r\n// //   container: {\r\n// //     display: 'flex',\r\n// //     justifyContent: 'space-between',\r\n// //     alignItems: 'center',\r\n// //   },\r\n// // }));\r\n// // const Footer = () => {\r\n// //   const classes = useStyles();\r\n// //   return (\r\n// //     <AppBar position='fixed' className={classes.footer}>\r\n// //       <Toolbar>\r\n// //         <Container className={classes.container}>\r\n// //           <Typography variant='body1'>© 2023 My Website</Typography>\r\n// //           <div>\r\n// //             <Link href='#' color='inherit' style={{ marginRight: 16 }}>\r\n// //               Privacy Policy\r\n// //             </Link>\r\n// //             <Link href='#' color='inherit'>\r\n// //               Terms of Use\r\n// //             </Link>\r\n// //           </div>\r\n// //         </Container>\r\n// //       </Toolbar>\r\n// //     </AppBar>\r\n// //   );\r\n// // };\r\n// // export default Footer;\r\n//\r\n// // import React from 'react';\r\n// // import { Typography, Container, Grid, Link } from '@mui/material';\r\n// // import { makeStyles } from '@mui/styles';\r\n// // const useStyles = makeStyles((theme) => ({\r\n// //   footer: {\r\n// //     backgroundColor: '#3f51b5', // Change to adapt the background color\r\n// //     padding: theme.spacing(6, 0),\r\n// //     marginTop: 'auto',\r\n// //   },\r\n// //   link: {\r\n// //     color: '#fff', // Change to adapt the link color\r\n// //   },\r\n// //   typography: {\r\n// //     color: '#fff', // Change to adapt the text color\r\n// //   }\r\n// // }));\r\n// // const Footer = () => {\r\n// //   const classes = useStyles();\r\n// //   return (\r\n// //     <footer className={classes.footer}>\r\n// //       <Container maxWidth='lg'>\r\n// //         <Grid container spacing={4} justifyContent='center'>\r\n// //           <Grid item xs={12} sm={4}>\r\n// //             <Typography variant='h6' className={classes.typography} gutterBottom>\r\n// //               About Us\r\n// //             </Typography>\r\n// //             <Typography variant='body2' className={classes.typography}>\r\n// //               We are a team of dedicated professionals committed to providing top-notch services.\r\n// //             </Typography>\r\n// //           </Grid>\r\n// //           <Grid item xs={12} sm={4}>\r\n// //             <Typography variant='h6' className={classes.typography} gutterBottom>\r\n// //               Services\r\n// //             </Typography>\r\n// //             <Link href='#' variant='body2' className={classes.link} display='block'>\r\n// //               Web Development\r\n// //             </Link>\r\n// //             <Link href='#' variant='body2' className={classes.link} display='block'>\r\n// //               Mobile Apps\r\n// //             </Link>\r\n// //             <Link href='#' variant='body2' className={classes.link} display='block'>\r\n// //               Cloud Solutions\r\n// //             </Link>\r\n// //           </Grid>\r\n// //           <Grid item xs={12} sm={4}>\r\n// //             <Typography variant='h6' className={classes.typography} gutterBottom>\r\n// //               Contact Us\r\n// //             </Typography>\r\n// //             <Typography variant='body2' className={classes.typography}>\r\n// //               Email: info@mywebsite.com\r\n// //             </Typography>\r\n// //             <Typography variant='body2' className={classes.typography}>\r\n// //               Phone: (123) 456-7890\r\n// //             </Typography>\r\n// //           </Grid>\r\n// //         </Grid>\r\n// //         <Typography variant='body2' color='inherit' align='center' className={classes.typography} style={{ marginTop: '20px' }}>\r\n// //           © {new Date().getFullYear()} My Website. All rights reserved.\r\n// //         </Typography>\r\n// //       </Container>\r\n// //     </footer>\r\n// //   );\r\n// // };\r\n// // export default Footer;\r\n//\r\n//\r\n// // import React from 'react';\r\n// // import { Box, Container, Grid, Typography, Link, IconButton } from '@mui/material';\r\n// // import { Facebook, Twitter, LinkedIn, GitHub } from '@mui/icons-material';\r\n// //\r\n// // function Footer() {\r\n// //     return (\r\n// //         <Box sx={{ bgcolor: 'primary.main', color: 'white', py: 6 }}>\r\n// //             <Container maxWidth=\"lg\">\r\n// //                 <Grid container spacing={4}>\r\n// //                     <Grid item xs={12} sm={4}>\r\n// //                         <Typography variant=\"h6\" gutterBottom>\r\n// //                             SecureAI Guard\r\n// //                         </Typography>\r\n// //                         <Typography variant=\"body2\">\r\n// //                             Enterprise-grade Security Layer for Language Model Applications.\r\n// //                         </Typography>\r\n// //                     </Grid>\r\n// //                     <Grid item xs={12} sm={4}>\r\n// //                         <Typography variant=\"h6\" gutterBottom>\r\n// //                             Quick Links\r\n// //                         </Typography>\r\n// //                         <Link href=\"/\" color=\"inherit\" variant=\"body2\" display=\"block\" gutterBottom>\r\n// //                             Index\r\n// //                         </Link>\r\n// //                         <Link href=\"/contact\" color=\"inherit\" variant=\"body2\" display=\"block\" gutterBottom>\r\n// //                             Contact\r\n// //                         </Link>\r\n// //                         <Link href=\"/marketplace\" color=\"inherit\" variant=\"body2\" display=\"block\" gutterBottom>\r\n// //                             Marketplace\r\n// //                         </Link>\r\n// //                     </Grid>\r\n// //                     <Grid item xs={12} sm={4}>\r\n// //                         <Typography variant=\"h6\" gutterBottom>\r\n// //                             Follow Us\r\n// //                         </Typography>\r\n// //                         <Box>\r\n// //                             <IconButton color=\"inherit\" href=\"https://facebook.com\">\r\n// //                                 <Facebook />\r\n// //                             </IconButton>\r\n// //                             <IconButton color=\"inherit\" href=\"https://twitter.com\">\r\n// //                                 <Twitter />\r\n// //                             </IconButton>\r\n// //                             <IconButton color=\"inherit\" href=\"https://linkedin.com\">\r\n// //                                 <LinkedIn />\r\n// //                             </IconButton>\r\n// //                             <IconButton color=\"inherit\" href=\"https://github.com\">\r\n// //                                 <GitHub />\r\n// //                             </IconButton>\r\n// //                         </Box>\r\n// //                     </Grid>\r\n// //                 </Grid>\r\n// //                 <Box mt={4} textAlign=\"center\">\r\n// //                     <Typography variant=\"body2\">\r\n// //                         © {new Date().getFullYear()} SecureAI Guard. All rights reserved.\r\n// //                     </Typography>\r\n// //                 </Box>\r\n// //             </Container>\r\n// //         </Box>\r\n// //     );\r\n// // }\r\n// //\r\n// // export default Footer;\r\n//\r\n//\r\n// // import React from 'react';\r\n// // import { Box, Container, Grid, Typography, Link, IconButton, TextField, Button } from '@mui/material';\r\n// // import { Facebook, Twitter, LinkedIn, GitHub } from '@mui/icons-material';\r\n// //\r\n// // function Footer() {\r\n// //     return (\r\n// //         <Box sx={{ bgcolor: 'primary.main', color: 'white', py: 6 }}>\r\n// //             <Container maxWidth=\"lg\">\r\n// //                 <Grid container spacing={4}>\r\n// //                     <Grid item xs={12} sm={3}>\r\n// //                         <Typography variant=\"h6\" gutterBottom>\r\n// //                             SecureAI Guard\r\n// //                         </Typography>\r\n// //                         <Typography variant=\"body2\">\r\n// //                             Enterprise-grade Security Layer for Language Model Applications.\r\n// //                         </Typography>\r\n// //                     </Grid>\r\n// //                     <Grid item xs={12} sm={3}>\r\n// //                         <Typography variant=\"h6\" gutterBottom>\r\n// //                             Quick Links\r\n// //                         </Typography>\r\n// //                         <Link href=\"/\" color=\"inherit\" variant=\"body2\" display=\"block\" gutterBottom>\r\n// //                             Index\r\n// //                         </Link>\r\n// //                         <Link href=\"/about\" color=\"inherit\" variant=\"body2\" display=\"block\" gutterBottom>\r\n// //                             About\r\n// //                         </Link>\r\n// //                         <Link href=\"/services\" color=\"inherit\" variant=\"body2\" display=\"block\" gutterBottom>\r\n// //                             Services\r\n// //                         </Link>\r\n// //                         <Link href=\"/marketplace\" color=\"inherit\" variant=\"body2\" display=\"block\" gutterBottom>\r\n// //                             Marketplace\r\n// //                         </Link>\r\n// //                         <Link href=\"/contact\" color=\"inherit\" variant=\"body2\" display=\"block\" gutterBottom>\r\n// //                             Contact\r\n// //                         </Link>\r\n// //                     </Grid>\r\n// //                     <Grid item xs={12} sm={3}>\r\n// //                         <Typography variant=\"h6\" gutterBottom>\r\n// //                             Contact Information\r\n// //                         </Typography>\r\n// //                         <Typography variant=\"body2\" display=\"block\" gutterBottom>\r\n// //                             Email: support@secureaiguard.com\r\n// //                         </Typography>\r\n// //                         <Typography variant=\"body2\" display=\"block\" gutterBottom>\r\n// //                             Phone: +1 (123) 456-7890\r\n// //                         </Typography>\r\n// //                         <Typography variant=\"body2\" display=\"block\" gutterBottom>\r\n// //                             Address: 1234 AI Street, Tech City, TX 75001\r\n// //                         </Typography>\r\n// //                     </Grid>\r\n// //                     <Grid item xs={12} sm={3}>\r\n// //                         <Typography variant=\"h6\" gutterBottom>\r\n// //                             Follow Us\r\n// //                         </Typography>\r\n// //                         <Box>\r\n// //                             <IconButton color=\"inherit\" href=\"https://facebook.com\">\r\n// //                                 <Facebook />\r\n// //                             </IconButton>\r\n// //                             <IconButton color=\"inherit\" href=\"https://twitter.com\">\r\n// //                                 <Twitter />\r\n// //                             </IconButton>\r\n// //                             <IconButton color=\"inherit\" href=\"https://linkedin.com\">\r\n// //                                 <LinkedIn />\r\n// //                             </IconButton>\r\n// //                             <IconButton color=\"inherit\" href=\"https://github.com\">\r\n// //                                 <GitHub />\r\n// //                             </IconButton>\r\n// //                         </Box>\r\n// //                         <Typography variant=\"h6\" gutterBottom mt={4}>\r\n// //                             Newsletter\r\n// //                         </Typography>\r\n// //                         <Box component=\"form\" noValidate autoComplete=\"off\">\r\n// //                             <TextField\r\n// //                                 variant=\"outlined\"\r\n// //                                 placeholder=\"Your email\"\r\n// //                                 size=\"small\"\r\n// //                                 sx={{ bgcolor: 'white', borderRadius: 1, mb: 2 }}\r\n// //                                 fullWidth\r\n// //                             />\r\n// //                             <Button variant=\"contained\" color=\"secondary\" fullWidth>\r\n// //                                 Subscribe\r\n// //                             </Button>\r\n// //                         </Box>\r\n// //                     </Grid>\r\n// //                 </Grid>\r\n// //                 <Box mt={4} textAlign=\"center\">\r\n// //                     <Typography variant=\"body2\">\r\n// //                         © {new Date().getFullYear()} SecureAI Guard. All rights reserved.\r\n// //                     </Typography>\r\n// //                 </Box>\r\n// //             </Container>\r\n// //         </Box>\r\n// //     );\r\n// // }\r\n// //\r\n// // export default Footer;\r\n//\r\n//\r\n// // import React from 'react';\r\n// // import { Box, Container, Grid, Typography, Link, IconButton } from '@mui/material';\r\n// // import { Facebook, Twitter, LinkedIn, GitHub } from '@mui/icons-material';\r\n// //\r\n// // function Footer() {\r\n// //     return (\r\n// //         <Box sx={{ bgcolor: 'primary.main', color: 'white', py: 6 }}>\r\n// //             <Container maxWidth=\"lg\">\r\n// //                 <Grid container spacing={4}>\r\n// //                     <Grid item xs={12} sm={3}>\r\n// //                         <Typography variant=\"h6\" gutterBottom>\r\n// //                             <img src=\"..\\..\\logo.png\" alt=\"SecureAI Guard\" style={{ height: '40px' }} />\r\n// //                         </Typography>\r\n// //                         <Typography variant=\"body2\">\r\n// //                             Enterprise-grade Security Layer for Language Model Applications.\r\n// //                         </Typography>\r\n// //                     </Grid>\r\n// //                     <Grid item xs={12} sm={3}>\r\n// //                         <Typography variant=\"h6\" gutterBottom>\r\n// //                             Quick Links\r\n// //                         </Typography>\r\n// //                         <Link href=\"/\" color=\"inherit\" variant=\"body2\" display=\"block\" gutterBottom>\r\n// //                             Index\r\n// //                         </Link>\r\n// //                         <Link href=\"/about\" color=\"inherit\" variant=\"body2\" display=\"block\" gutterBottom>\r\n// //                             About\r\n// //                         </Link>\r\n// //                         <Link href=\"/services\" color=\"inherit\" variant=\"body2\" display=\"block\" gutterBottom>\r\n// //                             Services\r\n// //                         </Link>\r\n// //                         <Link href=\"/marketplace\" color=\"inherit\" variant=\"body2\" display=\"block\" gutterBottom>\r\n// //                             Marketplace\r\n// //                         </Link>\r\n// //                         <Link href=\"/contact\" color=\"inherit\" variant=\"body2\" display=\"block\" gutterBottom>\r\n// //                             Contact\r\n// //                         </Link>\r\n// //                         <Link href=\"/signin\" color=\"inherit\" variant=\"body2\" display=\"block\" gutterBottom>\r\n// //                             Sign In\r\n// //                         </Link>\r\n// //                     </Grid>\r\n// //                     <Grid item xs={12} sm={3}>\r\n// //                         <Typography variant=\"h6\" gutterBottom>\r\n// //                             Contact Information\r\n// //                         </Typography>\r\n// //                         <Typography variant=\"body2\" display=\"block\" gutterBottom>\r\n// //                             Email: support@secureaiguard.com\r\n// //                         </Typography>\r\n// //                         <Typography variant=\"body2\" display=\"block\" gutterBottom>\r\n// //                             Phone: +1 (123) 456-7890\r\n// //                         </Typography>\r\n// //                         <Typography variant=\"body2\" display=\"block\" gutterBottom>\r\n// //                             Address: 1234 AI Street, Tech City, TX 75001\r\n// //                         </Typography>\r\n// //                     </Grid>\r\n// //                     <Grid item xs={12} sm={3}>\r\n// //                         <Typography variant=\"h6\" gutterBottom>\r\n// //                             Follow Us\r\n// //                         </Typography>\r\n// //                         <Box>\r\n// //                             <IconButton color=\"inherit\" href=\"https://facebook.com\">\r\n// //                                 <Facebook />\r\n// //                             </IconButton>\r\n// //                             <IconButton color=\"inherit\" href=\"https://twitter.com\">\r\n// //                                 <Twitter />\r\n// //                             </IconButton>\r\n// //                             <IconButton color=\"inherit\" href=\"https://linkedin.com\">\r\n// //                                 <LinkedIn />\r\n// //                             </IconButton>\r\n// //                             <IconButton color=\"inherit\" href=\"https://github.com\">\r\n// //                                 <GitHub />\r\n// //                             </IconButton>\r\n// //                         </Box>\r\n// //                     </Grid>\r\n// //                 </Grid>\r\n// //                 <Box mt={4} textAlign=\"center\">\r\n// //                     <Typography variant=\"body2\">\r\n// //                         © {new Date().getFullYear()} SecureAI Guard. All rights reserved.\r\n// //                     </Typography>\r\n// //                 </Box>\r\n// //             </Container>\r\n// //         </Box>\r\n// //     );\r\n// // }\r\n// //\r\n// // export default Footer;\r\n//\r\n//\r\n//\r\n// // import React from 'react';\r\n// // import { Box, Container, Grid, Typography, Link, IconButton } from '@mui/material';\r\n// // import { Facebook, Twitter, LinkedIn, GitHub } from '@mui/icons-material';\r\n// // import Logo from '../../public/assets/images/logo.png'; // Adjust the path as necessary\r\n// //\r\n// // const useStyles = makeStyles((theme) => ({\r\n// //   footer: {\r\n// //     backgroundColor: theme.palette.primary.main,\r\n// //     color: theme.palette.common.white,\r\n// //     padding: theme.spacing(6, 0),\r\n// //   },\r\n// //   logo: {\r\n// //     height: '50px',\r\n// //     marginBottom: theme.spacing(2),\r\n// //   },\r\n// //   link: {\r\n// //     display: 'block',\r\n// //     marginBottom: theme.spacing(1),\r\n// //     color: theme.palette.common.white,\r\n// //     '&:hover': {\r\n// //       textDecoration: 'underline',\r\n// //     },\r\n// //   },\r\n// //   iconButton: {\r\n// //     color: theme.palette.common.white,\r\n// //     '&:hover': {\r\n// //       color: theme.palette.secondary.main,\r\n// //     },\r\n// //   },\r\n// // }));\r\n// //\r\n// // function Footer() {\r\n// //   const classes = useStyles();\r\n// //\r\n// //   return (\r\n// //     <Box className={classes.footer}>\r\n// //       <Container maxWidth=\"lg\">\r\n// //         <Grid container spacing={4}>\r\n// //           <Grid item xs={12} sm={3}>\r\n// //             <img src={Logo} alt=\"SecureAI Guard\" className={classes.logo} />\r\n// //             <Typography variant=\"body2\">\r\n// //               Enterprise-grade Security Layer for Language Model Applications.\r\n// //             </Typography>\r\n// //           </Grid>\r\n// //           <Grid item xs={12} sm={3}>\r\n// //             <Typography variant=\"h6\" gutterBottom>\r\n// //               Quick Links\r\n// //             </Typography>\r\n// //             <Link href=\"/\" className={classes.link}>\r\n// //               Index\r\n// //             </Link>\r\n// //             <Link href=\"/about\" className={classes.link}>\r\n// //               About\r\n// //             </Link>\r\n// //             <Link href=\"/services\" className={classes.link}>\r\n// //               Services\r\n// //             </Link>\r\n// //             <Link href=\"/marketplace\" className={classes.link}>\r\n// //               Marketplace\r\n// //             </Link>\r\n// //             <Link href=\"/contact\" className={classes.link}>\r\n// //               Contact\r\n// //             </Link>\r\n// //             <Link href=\"/signin\" className={classes.link}>\r\n// //               Sign In\r\n// //             </Link>\r\n// //           </Grid>\r\n// //           <Grid item xs={12} sm={3}>\r\n// //             <Typography variant=\"h6\" gutterBottom>\r\n// //               Contact Information\r\n// //             </Typography>\r\n// //             <Typography variant=\"body2\" display=\"block\" gutterBottom>\r\n// //               Email: support@secureaiguard.com\r\n// //             </Typography>\r\n// //             <Typography variant=\"body2\" display=\"block\" gutterBottom>\r\n// //               Phone: +1 (123) 456-7890\r\n// //             </Typography>\r\n// //             <Typography variant=\"body2\" display=\"block\" gutterBottom>\r\n// //               Address: 1234 AI Street, Tech City, TX 75001\r\n// //             </Typography>\r\n// //           </Grid>\r\n// //           <Grid item xs={12} sm={3}>\r\n// //             <Typography variant=\"h6\" gutterBottom>\r\n// //               Follow Us\r\n// //             </Typography>\r\n// //             <Box>\r\n// //               <IconButton className={classes.iconButton} href=\"https://facebook.com\">\r\n// //                 <Facebook />\r\n// //               </IconButton>\r\n// //               <IconButton className={classes.iconButton} href=\"https://twitter.com\">\r\n// //                 <Twitter />\r\n// //               </IconButton>\r\n// //               <IconButton className={classes.iconButton} href=\"https://linkedin.com\">\r\n// //                 <LinkedIn />\r\n// //               </IconButton>\r\n// //               <IconButton className={classes.iconButton} href=\"https://github.com\">\r\n// //                 <GitHub />\r\n// //               </IconButton>\r\n// //             </Box>\r\n// //           </Grid>\r\n// //         </Grid>\r\n// //         <Box mt={4} textAlign=\"center\">\r\n// //           <Typography variant=\"body2\">\r\n// //             © {new Date().getFullYear()} SecureAI Guard. All rights reserved.\r\n// //           </Typography>\r\n// //         </Box>\r\n// //       </Container>\r\n// //     </Box>\r\n// //   );\r\n// // }\r\n// //\r\n// // export default Footer;\r\n//\r\n//\r\n// // import React from 'react';\r\n// // import { Box, Container, Grid, Typography, Link, IconButton } from '@mui/material';\r\n// // import { Facebook, Twitter, LinkedIn, GitHub } from '@mui/icons-material';\r\n// // import { makeStyles } from '@mui/styles'; // Add this import\r\n// // import Logo from '../../public/assets/images/logo.png'; // Adjust the path as necessary\r\n// //\r\n// // const useStyles = makeStyles((theme) => ({\r\n// //   footer: {\r\n// //     backgroundColor: theme.palette.primary.main,\r\n// //     color: theme.palette.common.white,\r\n// //     padding: theme.spacing(6, 0),\r\n// //   },\r\n// //   logo: {\r\n// //     height: '150px',\r\n// //     marginBottom: theme.spacing(2),\r\n// //   },\r\n// //   link: {\r\n// //     display: 'block',\r\n// //     marginBottom: theme.spacing(1),\r\n// //     color: theme.palette.common.white,\r\n// //     '&:hover': {\r\n// //       textDecoration: 'underline',\r\n// //     },\r\n// //   },\r\n// //   iconButton: {\r\n// //     color: theme.palette.common.white,\r\n// //     '&:hover': {\r\n// //       color: theme.palette.secondary.main,\r\n// //     },\r\n// //   },\r\n// // }));\r\n// //\r\n// // function Footer() {\r\n// //   const classes = useStyles();\r\n// //\r\n// //   return (\r\n// //     <Box className={classes.footer}>\r\n// //       <Container maxWidth=\"lg\">\r\n// //         <Grid container spacing={4}>\r\n// //           <Grid item xs={12} sm={3}>\r\n// //             <img src={Logo} alt=\"SecureAI Guard\" className={classes.logo} />\r\n// //             <Typography variant=\"body2\">\r\n// //               Enterprise-grade Security Layer for Large Language Model Applications.\r\n// //             </Typography>\r\n// //           </Grid>\r\n// //           <Grid item xs={12} sm={3}>\r\n// //             <Typography variant=\"h6\" gutterBottom>\r\n// //               Quick Links\r\n// //             </Typography>\r\n// //             <Link href=\"/\" className={classes.link}>\r\n// //               Index\r\n// //             </Link>\r\n// //             <Link href=\"/about\" className={classes.link}>\r\n// //               About\r\n// //             </Link>\r\n// //             <Link href=\"/services\" className={classes.link}>\r\n// //               Services\r\n// //             </Link>\r\n// //             <Link href=\"/marketplace\" className={classes.link}>\r\n// //               Marketplace\r\n// //             </Link>\r\n// //             <Link href=\"/contact\" className={classes.link}>\r\n// //               Contact\r\n// //             </Link>\r\n// //             <Link href=\"/signin\" className={classes.link}>\r\n// //               Sign In\r\n// //             </Link>\r\n// //           </Grid>\r\n// //           <Grid item xs={12} sm={3}>\r\n// //             <Typography variant=\"h6\" gutterBottom>\r\n// //               Contact Information\r\n// //             </Typography>\r\n// //             <Typography variant=\"body2\" display=\"block\" gutterBottom>\r\n// //               Email: support@secureaiguard.com\r\n// //             </Typography>\r\n// //             <Typography variant=\"body2\" display=\"block\" gutterBottom>\r\n// //               Phone: +44 (7879) 222-333\r\n// //             </Typography>\r\n// //             {/*<Typography variant=\"body2\" display=\"block\" gutterBottom>*/}\r\n// //             {/*  /!*Address: 1234 AI Street, Tech City, TX 75001*!/*/}\r\n// //             {/*</Typography>*/}\r\n// //           </Grid>\r\n// //           <Grid item xs={12} sm={3}>\r\n// //             <Typography variant=\"h6\" gutterBottom>\r\n// //               Follow Us\r\n// //             </Typography>\r\n// //             <Box>\r\n// //               <IconButton className={classes.iconButton} href=\"https://facebook.com\">\r\n// //                 <Facebook />\r\n// //               </IconButton>\r\n// //               <IconButton className={classes.iconButton} href=\"https://twitter.com\">\r\n// //                 <Twitter />\r\n// //               </IconButton>\r\n// //               <IconButton className={classes.iconButton} href=\"https://linkedin.com\">\r\n// //                 <LinkedIn />\r\n// //               </IconButton>\r\n// //               <IconButton className={classes.iconButton} href=\"https://github.com\">\r\n// //                 <GitHub />\r\n// //               </IconButton>\r\n// //             </Box>\r\n// //           </Grid>\r\n// //         </Grid>\r\n// //         <Box mt={4} textAlign=\"center\">\r\n// //           <Typography variant=\"body2\">\r\n// //             © {new Date().getFullYear()} SecureAI Guard. All rights reserved.\r\n// //           </Typography>\r\n// //         </Box>\r\n// //       </Container>\r\n// //     </Box>\r\n// //   );\r\n// // }\r\n// //\r\n// // export default Footer;\r\n//\r\n//\r\n//\r\n// // import React from 'react';\r\n// // import { Box, Container, Grid, Typography, Link, IconButton } from '@mui/material';\r\n// // import { Facebook, Twitter, LinkedIn, GitHub } from '@mui/icons-material';\r\n// // import { makeStyles } from '@mui/styles';\r\n// // import Logo from '../../public/assets/images/logo.png'; // Adjust the path as necessary\r\n// //\r\n// // const useStyles = makeStyles((theme) => ({\r\n// //   footer: {\r\n// //     backgroundColor: theme.palette.primary.main,\r\n// //     color: theme.palette.common.white,\r\n// //     padding: theme.spacing(6, 0),\r\n// //     [theme.breakpoints.down('sm')]: {\r\n// //       padding: theme.spacing(4, 0),\r\n// //     },\r\n// //   },\r\n// //   logo: {\r\n// //     height: '150px',\r\n// //     marginBottom: theme.spacing(2),\r\n// //     [theme.breakpoints.down('sm')]: {\r\n// //       height: '100px',\r\n// //     },\r\n// //   },\r\n// //   link: {\r\n// //     display: 'block',\r\n// //     marginBottom: theme.spacing(1),\r\n// //     color: theme.palette.common.white,\r\n// //     '&:hover': {\r\n// //       textDecoration: 'underline',\r\n// //     },\r\n// //   },\r\n// //   iconButton: {\r\n// //     color: theme.palette.common.white,\r\n// //     '&:hover': {\r\n// //       color: theme.palette.secondary.main,\r\n// //     },\r\n// //   },\r\n// //   socialIcons: {\r\n// //     display: 'flex',\r\n// //     justifyContent: 'center',\r\n// //     [theme.breakpoints.up('md')]: {\r\n// //       justifyContent: 'flex-start',\r\n// //     },\r\n// //   },\r\n// //   contactInfo: {\r\n// //     [theme.breakpoints.down('sm')]: {\r\n// //       textAlign: 'center',\r\n// //     },\r\n// //   },\r\n// //   quickLinks: {\r\n// //     [theme.breakpoints.down('sm')]: {\r\n// //       textAlign: 'center',\r\n// //     },\r\n// //   },\r\n// //   followUs: {\r\n// //     [theme.breakpoints.down('sm')]: {\r\n// //       textAlign: 'center',\r\n// //     },\r\n// //   },\r\n// // }));\r\n// //\r\n// // function Footer() {\r\n// //   const classes = useStyles();\r\n// //\r\n// //   return (\r\n// //     <Box className={classes.footer}>\r\n// //       <Container maxWidth=\"lg\">\r\n// //         <Grid container spacing={4}>\r\n// //           <Grid item xs={12} sm={3}>\r\n// //             <img src={Logo} alt=\"SecureAI Guard\" className={classes.logo} />\r\n// //             <Typography variant=\"body2\">\r\n// //               Enterprise-grade Security Layer for Large Language Model Applications.\r\n// //             </Typography>\r\n// //           </Grid>\r\n// //           <Grid item xs={12} sm={3} className={classes.quickLinks}>\r\n// //             <Typography variant=\"h6\" gutterBottom>\r\n// //               Quick Links\r\n// //             </Typography>\r\n// //             <Link href=\"/\" className={classes.link}>\r\n// //               Index\r\n// //             </Link>\r\n// //             <Link href=\"/about\" className={classes.link}>\r\n// //               About\r\n// //             </Link>\r\n// //             <Link href=\"/services\" className={classes.link}>\r\n// //               Services\r\n// //             </Link>\r\n// //             <Link href=\"/marketplace\" className={classes.link}>\r\n// //               Marketplace\r\n// //             </Link>\r\n// //             <Link href=\"/contact\" className={classes.link}>\r\n// //               Contact\r\n// //             </Link>\r\n// //             <Link href=\"/signin\" className={classes.link}>\r\n// //               Sign In\r\n// //             </Link>\r\n// //           </Grid>\r\n// //           <Grid item xs={12} sm={3} className={classes.contactInfo}>\r\n// //             <Typography variant=\"h6\" gutterBottom>\r\n// //               Contact Information\r\n// //             </Typography>\r\n// //             <Typography variant=\"body2\" display=\"block\" gutterBottom>\r\n// //               Email: support@secureaiguard.com\r\n// //             </Typography>\r\n// //             <Typography variant=\"body2\" display=\"block\" gutterBottom>\r\n// //               Phone: +44 (7879) 222-333\r\n// //             </Typography>\r\n// //           </Grid>\r\n// //           <Grid item xs={12} sm={3} className={classes.followUs}>\r\n// //             <Typography variant=\"h6\" gutterBottom>\r\n// //               Follow Us\r\n// //             </Typography>\r\n// //             <Box className={classes.socialIcons}>\r\n// //               <IconButton className={classes.iconButton} href=\"https://facebook.com\" aria-label=\"Facebook\">\r\n// //                 <Facebook />\r\n// //               </IconButton>\r\n// //               <IconButton className={classes.iconButton} href=\"https://twitter.com\" aria-label=\"Twitter\">\r\n// //                 <Twitter />\r\n// //               </IconButton>\r\n// //               <IconButton className={classes.iconButton} href=\"https://linkedin.com\" aria-label=\"LinkedIn\">\r\n// //                 <LinkedIn />\r\n// //               </IconButton>\r\n// //               <IconButton className={classes.iconButton} href=\"https://github.com\" aria-label=\"GitHub\">\r\n// //                 <GitHub />\r\n// //               </IconButton>\r\n// //             </Box>\r\n// //           </Grid>\r\n// //         </Grid>\r\n// //         <Box mt={4} textAlign=\"center\">\r\n// //           <Typography variant=\"body2\">\r\n// //             © {new Date().getFullYear()} SecureAI Guard. All rights reserved.\r\n// //           </Typography>\r\n// //         </Box>\r\n// //       </Container>\r\n// //     </Box>\r\n// //   );\r\n// // }\r\n// //\r\n// // export default Footer;\r\n//\r\n//\r\n//\r\n//\r\n//\r\n// // import React from 'react';\r\n// // import { Box, Container, Grid, Typography, Link, IconButton } from '@mui/material';\r\n// // import { Facebook, LinkedIn, GitHub } from '@mui/icons-material';\r\n// // import { makeStyles } from '@mui/styles';\r\n// // import Logo from '../../public/assets/images/logo.png'; // Adjust the path as necessary\r\n// // import XIcon from '../../public/assets/images/twitter.png'; // Add the new X (formerly Twitter) logo\r\n// //\r\n// // const useStyles = makeStyles((theme) => ({\r\n// //   footer: {\r\n// //     backgroundColor: theme.palette.primary.main,\r\n// //     color: theme.palette.common.white,\r\n// //     padding: theme.spacing(6, 0),\r\n// //     [theme.breakpoints.down('sm')]: {\r\n// //       padding: theme.spacing(4, 0),\r\n// //     },\r\n// //   },\r\n// //   logo: {\r\n// //     height: '150px',\r\n// //     marginBottom: theme.spacing(2),\r\n// //     [theme.breakpoints.down('sm')]: {\r\n// //       height: '100px',\r\n// //     },\r\n// //   },\r\n// //   link: {\r\n// //     display: 'block',\r\n// //     marginBottom: theme.spacing(1),\r\n// //     color: theme.palette.common.white,\r\n// //     '&:hover': {\r\n// //       textDecoration: 'underline',\r\n// //     },\r\n// //   },\r\n// //   iconButton: {\r\n// //     color: theme.palette.common.white,\r\n// //     '&:hover': {\r\n// //       color: theme.palette.secondary.main,\r\n// //     },\r\n// //   },\r\n// //   socialIcons: {\r\n// //     display: 'flex',\r\n// //     justifyContent: 'center',\r\n// //     [theme.breakpoints.up('md')]: {\r\n// //       justifyContent: 'flex-start',\r\n// //     },\r\n// //   },\r\n// //   contactInfo: {\r\n// //     [theme.breakpoints.down('sm')]: {\r\n// //       textAlign: 'center',\r\n// //     },\r\n// //   },\r\n// //   quickLinks: {\r\n// //     [theme.breakpoints.down('sm')]: {\r\n// //       textAlign: 'center',\r\n// //     },\r\n// //   },\r\n// //   followUs: {\r\n// //     [theme.breakpoints.down('sm')]: {\r\n// //       textAlign: 'center',\r\n// //     },\r\n// //   },\r\n// //   footerGrid: {\r\n// //     display: 'flex',\r\n// //     flexDirection: 'column',\r\n// //     alignItems: 'center',\r\n// //     [theme.breakpoints.up('md')]: {\r\n// //       flexDirection: 'row',\r\n// //       justifyContent: 'space-between',\r\n// //     },\r\n// //   },\r\n// //   footerSection: {\r\n// //     marginBottom: theme.spacing(4),\r\n// //     [theme.breakpoints.up('md')]: {\r\n// //       marginBottom: 0,\r\n// //     },\r\n// //   },\r\n// // }));\r\n// //\r\n// // function Footer() {\r\n// //   const classes = useStyles();\r\n// //\r\n// //   return (\r\n// //     <Box className={classes.footer}>\r\n// //       <Container maxWidth=\"lg\">\r\n// //         <Grid container spacing={4} className={classes.footerGrid}>\r\n// //           <Grid item xs={12} md={3} className={classes.footerSection}>\r\n// //             <img src={Logo} alt=\"SecureAI Guard\" className={classes.logo} />\r\n// //             <Typography variant=\"body2\">\r\n// //               Enterprise-grade Security Layer for Large Language Model Applications.\r\n// //             </Typography>\r\n// //           </Grid>\r\n// //           <Grid item xs={12} md={3} className={`${classes.quickLinks} ${classes.footerSection}`}>\r\n// //             <Typography variant=\"h6\" gutterBottom>\r\n// //               Quick Links\r\n// //             </Typography>\r\n// //             <Link href=\"/\" className={classes.link}>\r\n// //               Index\r\n// //             </Link>\r\n// //             <Link href=\"/about\" className={classes.link}>\r\n// //               About\r\n// //             </Link>\r\n// //             <Link href=\"/services\" className={classes.link}>\r\n// //               Services\r\n// //             </Link>\r\n// //             <Link href=\"/marketplace\" className={classes.link}>\r\n// //               Marketplace\r\n// //             </Link>\r\n// //             <Link href=\"/contact\" className={classes.link}>\r\n// //               Contact\r\n// //             </Link>\r\n// //             <Link href=\"/signin\" className={classes.link}>\r\n// //               Sign In\r\n// //             </Link>\r\n// //           </Grid>\r\n// //           <Grid item xs={12} md={3} className={`${classes.contactInfo} ${classes.footerSection}`}>\r\n// //             <Typography variant=\"h6\" gutterBottom>\r\n// //               Contact Information\r\n// //             </Typography>\r\n// //             <Typography variant=\"body2\" display=\"block\" gutterBottom>\r\n// //               Email: support@secureaiguard.com\r\n// //             </Typography>\r\n// //             <Typography variant=\"body2\" display=\"block\" gutterBottom>\r\n// //               Phone: +44 (7879) 222-333\r\n// //             </Typography>\r\n// //           </Grid>\r\n// //           <Grid item xs={12} md={3} className={`${classes.followUs} ${classes.footerSection}`}>\r\n// //             <Typography variant=\"h6\" gutterBottom>\r\n// //               Follow Us\r\n// //             </Typography>\r\n// //             <Box className={classes.socialIcons}>\r\n// //               <IconButton className={classes.iconButton} href=\"https://facebook.com\" aria-label=\"Facebook\">\r\n// //                 <Facebook />\r\n// //               </IconButton>\r\n// //               <IconButton className={classes.iconButton} href=\"https://twitter.com\" aria-label=\"Twitter\">\r\n// //                 <img src={XIcon} alt=\"X\" style={{ height: '24px', width: '24px' }} />\r\n// //               </IconButton>\r\n// //               <IconButton className={classes.iconButton} href=\"https://linkedin.com\" aria-label=\"LinkedIn\">\r\n// //                 <LinkedIn />\r\n// //               </IconButton>\r\n// //               <IconButton className={classes.iconButton} href=\"https://github.com\" aria-label=\"GitHub\">\r\n// //                 <GitHub />\r\n// //               </IconButton>\r\n// //             </Box>\r\n// //           </Grid>\r\n// //         </Grid>\r\n// //         <Box mt={4} textAlign=\"center\">\r\n// //           <Typography variant=\"body2\">\r\n// //             © {new Date().getFullYear()} SecureAI Guard. All rights reserved.\r\n// //           </Typography>\r\n// //         </Box>\r\n// //       </Container>\r\n// //     </Box>\r\n// //   );\r\n// // }\r\n// //\r\n// // export default Footer;\r\n//\r\n//\r\n//\r\n//\r\n//\r\n// // import React from 'react';\r\n// // import { Box, Container, Grid, Typography, Link, IconButton } from '@mui/material';\r\n// // import { Facebook, LinkedIn, GitHub } from '@mui/icons-material';\r\n// // import XIcon from '@mui/icons-material/X'; // Import the new X (formerly Twitter) logo\r\n// // import { makeStyles } from '@mui/styles';\r\n// // import Logo from '../assets/images/logo.png'; // Adjust the path as necessary\r\n// //\r\n// // const useStyles = makeStyles((theme) => ({\r\n// //   footer: {\r\n// //     backgroundColor: theme.palette.primary.main,\r\n// //     color: theme.palette.common.white,\r\n// //     padding: theme.spacing(6, 0),\r\n// //     [theme.breakpoints.down('sm')]: {\r\n// //       padding: theme.spacing(4, 0),\r\n// //     },\r\n// //   },\r\n// //   logo: {\r\n// //     height: '150px',\r\n// //     marginBottom: theme.spacing(2),\r\n// //     [theme.breakpoints.down('sm')]: {\r\n// //       height: '100px',\r\n// //     },\r\n// //   },\r\n// //   link: {\r\n// //     display: 'block',\r\n// //     marginBottom: theme.spacing(1),\r\n// //     color: theme.palette.common.white,\r\n// //     '&:hover': {\r\n// //       textDecoration: 'underline',\r\n// //     },\r\n// //   },\r\n// //   iconButton: {\r\n// //     color: theme.palette.common.white,\r\n// //     '&:hover': {\r\n// //       color: theme.palette.secondary.main,\r\n// //     },\r\n// //   },\r\n// //   socialIcons: {\r\n// //     display: 'flex',\r\n// //     justifyContent: 'center',\r\n// //     [theme.breakpoints.up('md')]: {\r\n// //       justifyContent: 'flex-start',\r\n// //     },\r\n// //   },\r\n// //   contactInfo: {\r\n// //     [theme.breakpoints.down('sm')]: {\r\n// //       textAlign: 'center',\r\n// //     },\r\n// //   },\r\n// //   quickLinks: {\r\n// //     [theme.breakpoints.down('sm')]: {\r\n// //       textAlign: 'center',\r\n// //     },\r\n// //   },\r\n// //   followUs: {\r\n// //     [theme.breakpoints.down('sm')]: {\r\n// //       textAlign: 'center',\r\n// //     },\r\n// //   },\r\n// // }));\r\n// //\r\n// // function Footer() {\r\n// //   const classes = useStyles();\r\n// //\r\n// //   return (\r\n// //     <Box className={classes.footer}>\r\n// //       <Container maxWidth=\"lg\">\r\n// //         <Grid container spacing={4}>\r\n// //           <Grid item xs={12} sm={3}>\r\n// //             <img src={Logo} alt=\"SecureAI Guard\" className={classes.logo} />\r\n// //             <Typography variant=\"body2\">\r\n// //               Enterprise Security Layer for Large Language Model Applications.\r\n// //             </Typography>\r\n// //           </Grid>\r\n// //           <Grid item xs={12} sm={3} className={classes.quickLinks}>\r\n// //             <Typography variant=\"h6\" gutterBottom>\r\n// //               Quick Links\r\n// //             </Typography>\r\n// //             <Link href=\"/\" className={classes.link}>\r\n// //               Index\r\n// //             </Link>\r\n// //             <Link href=\"/about\" className={classes.link}>\r\n// //               About\r\n// //             </Link>\r\n// //             <Link href=\"/services\" className={classes.link}>\r\n// //               Services\r\n// //             </Link>\r\n// //             <Link href=\"/marketplace\" className={classes.link}>\r\n// //               Marketplace\r\n// //             </Link>\r\n// //             <Link href=\"/contact\" className={classes.link}>\r\n// //               Contact\r\n// //             </Link>\r\n// //             <Link href=\"/signin\" className={classes.link}>\r\n// //               Sign In\r\n// //             </Link>\r\n// //           </Grid>\r\n// //           <Grid item xs={12} sm={3} className={classes.contactInfo}>\r\n// //             <Typography variant=\"h6\" gutterBottom>\r\n// //               Contact Information\r\n// //             </Typography>\r\n// //             <Typography variant=\"body2\" display=\"block\" gutterBottom>\r\n// //               Email: support@secureaiguard.com\r\n// //             </Typography>\r\n// //             <Typography variant=\"body2\" display=\"block\" gutterBottom>\r\n// //               Phone: +44 (7879) 222-333\r\n// //             </Typography>\r\n// //           </Grid>\r\n// //           <Grid item xs={12} sm={3} className={classes.followUs}>\r\n// //             <Typography variant=\"h6\" gutterBottom>\r\n// //               Follow Us\r\n// //             </Typography>\r\n// //             <Box className={classes.socialIcons}>\r\n// //               <IconButton className={classes.iconButton} href=\"https://facebook.com\" aria-label=\"Facebook\">\r\n// //                 <Facebook />\r\n// //               </IconButton>\r\n// //               <IconButton className={classes.iconButton} href=\"https://twitter.com\" aria-label=\"Twitter\">\r\n// //                 <XIcon />\r\n// //               </IconButton>\r\n// //               <IconButton className={classes.iconButton} href=\"https://linkedin.com\" aria-label=\"LinkedIn\">\r\n// //                 <LinkedIn />\r\n// //               </IconButton>\r\n// //               <IconButton className={classes.iconButton} href=\"https://github.com\" aria-label=\"GitHub\">\r\n// //                 <GitHub />\r\n// //               </IconButton>\r\n// //             </Box>\r\n// //           </Grid>\r\n// //         </Grid>\r\n// //         <Box mt={4} textAlign=\"center\">\r\n// //           <Typography variant=\"body2\">\r\n// //             © {new Date().getFullYear()} SecureAI Guard. All rights reserved.\r\n// //           </Typography>\r\n// //         </Box>\r\n// //       </Container>\r\n// //     </Box>\r\n// //   );\r\n// // }\r\n// //\r\n// // export default Footer;\r\n//\r\n// //\r\n// // // src/components/Footer/index.tsx\r\n// // import React, { useState } from 'react';\r\n// // import {\r\n// //   Box,\r\n// //   Container,\r\n// //   Grid,\r\n// //   Typography,\r\n// //   TextField,\r\n// //   Button,\r\n// //   IconButton,\r\n// //   Link,\r\n// //   Snackbar,\r\n// //   Alert,\r\n// //   useTheme,\r\n// //   useMediaQuery,\r\n// // } from '@mui/material';\r\n// // import {\r\n// //   Facebook,\r\n// //   Twitter,\r\n// //   LinkedIn,\r\n// //   GitHub,\r\n// //   Email,\r\n// //   Phone,\r\n// //   LocationOn,\r\n// //   ArrowForward,\r\n// // } from '@mui/icons-material';\r\n// // import { makeStyles } from '@mui/styles';\r\n// // import { validateEmail } from '../../utils/validation';\r\n// //\r\n// // const useStyles = makeStyles((theme) => ({\r\n// //   footer: {\r\n// //     backgroundColor: theme.palette.primary.dark,\r\n// //     color: theme.palette.common.white,\r\n// //     padding: theme.spacing(6, 0),\r\n// //     position: 'relative',\r\n// //     '&::before': {\r\n// //       content: '\"\"',\r\n// //       position: 'absolute',\r\n// //       top: 0,\r\n// //       left: 0,\r\n// //       right: 0,\r\n// //       height: '4px',\r\n// //       background: 'linear-gradient(90deg, #2196F3 0%, #FF4081 100%)',\r\n// //     },\r\n// //   },\r\n// //   logo: {\r\n// //     height: 40,\r\n// //     marginBottom: theme.spacing(2),\r\n// //     transition: 'transform 0.3s ease',\r\n// //     '&:hover': {\r\n// //       transform: 'scale(1.05)',\r\n// //     },\r\n// //   },\r\n// //   newsletter: {\r\n// //     marginTop: theme.spacing(4),\r\n// //     padding: theme.spacing(3),\r\n// //     backgroundColor: 'rgba(255, 255, 255, 0.05)',\r\n// //     borderRadius: theme.shape.borderRadius,\r\n// //   },\r\n// //   newsletterInput: {\r\n// //     backgroundColor: 'rgba(255, 255, 255, 0.1)',\r\n// //     borderRadius: theme.shape.borderRadius,\r\n// //     '& .MuiInputBase-input': {\r\n// //       color: theme.palette.common.white,\r\n// //     },\r\n// //     '& .MuiOutlinedInput-root': {\r\n// //       '&:hover fieldset': {\r\n// //         borderColor: theme.palette.secondary.main,\r\n// //       },\r\n// //     },\r\n// //   },\r\n// //   socialIcons: {\r\n// //     marginTop: theme.spacing(2),\r\n// //     display: 'flex',\r\n// //     gap: theme.spacing(2),\r\n// //   },\r\n// //   socialIcon: {\r\n// //     color: theme.palette.common.white,\r\n// //     transition: 'all 0.3s ease',\r\n// //     '&:hover': {\r\n// //       color: theme.palette.secondary.main,\r\n// //       transform: 'translateY(-3px)',\r\n// //     },\r\n// //   },\r\n// //   linkGroup: {\r\n// //     [theme.breakpoints.down('sm')]: {\r\n// //       marginTop: theme.spacing(4),\r\n// //     },\r\n// //   },\r\n// //   link: {\r\n// //     color: theme.palette.common.white,\r\n// //     textDecoration: 'none',\r\n// //     transition: 'color 0.3s ease, transform 0.3s ease',\r\n// //     display: 'inline-block',\r\n// //     margin: theme.spacing(0.5, 0),\r\n// //     '&:hover': {\r\n// //       color: theme.palette.secondary.main,\r\n// //       transform: 'translateX(5px)',\r\n// //     },\r\n// //   },\r\n// //   contactInfo: {\r\n// //     display: 'flex',\r\n// //     alignItems: 'center',\r\n// //     marginBottom: theme.spacing(2),\r\n// //     '& .MuiSvgIcon-root': {\r\n// //       marginRight: theme.spacing(1),\r\n// //       color: theme.palette.secondary.main,\r\n// //     },\r\n// //   },\r\n// //   bottomBar: {\r\n// //     borderTop: '1px solid rgba(255, 255, 255, 0.1)',\r\n// //     marginTop: theme.spacing(4),\r\n// //     paddingTop: theme.spacing(2),\r\n// //     display: 'flex',\r\n// //     justifyContent: 'space-between',\r\n// //     alignItems: 'center',\r\n// //     flexWrap: 'wrap',\r\n// //     gap: theme.spacing(2),\r\n// //   },\r\n// //   legalLinks: {\r\n// //     display: 'flex',\r\n// //     gap: theme.spacing(3),\r\n// //     flexWrap: 'wrap',\r\n// //   },\r\n// // }));\r\n// //\r\n// // const Footer: React.FC = () => {\r\n// //   const classes = useStyles();\r\n// //   const theme = useTheme();\r\n// //   const isMobile = useMediaQuery(theme.breakpoints.down('sm'));\r\n// //   const [email, setEmail] = useState('');\r\n// //   const [snackbar, setSnackbar] = useState({\r\n// //     open: false,\r\n// //     message: '',\r\n// //     severity: 'success' as 'success' | 'error',\r\n// //   });\r\n// //\r\n// //   const handleNewsletterSubmit = async (e: React.FormEvent) => {\r\n// //     e.preventDefault();\r\n// //\r\n// //     if (!validateEmail(email)) {\r\n// //       setSnackbar({\r\n// //         open: true,\r\n// //         message: 'Please enter a valid email address',\r\n// //         severity: 'error',\r\n// //       });\r\n// //       return;\r\n// //     }\r\n// //\r\n// //     try {\r\n// //       // API call to subscribe to newsletter\r\n// //       await subscribeToNewsletter(email);\r\n// //       setSnackbar({\r\n// //         open: true,\r\n// //         message: 'Successfully subscribed to newsletter!',\r\n// //         severity: 'success',\r\n// //       });\r\n// //       setEmail('');\r\n// //     } catch (error) {\r\n// //       setSnackbar({\r\n// //         open: true,\r\n// //         message: 'Failed to subscribe. Please try again later.',\r\n// //         severity: 'error',\r\n// //       });\r\n// //     }\r\n// //   };\r\n// //\r\n// //   const handleCloseSnackbar = () => {\r\n// //     setSnackbar({ ...snackbar, open: false });\r\n// //   };\r\n// //\r\n// //   return (\r\n// //     <Box className={classes.footer}>\r\n// //       <Container maxWidth=\"lg\">\r\n// //         <Grid container spacing={4}>\r\n// //           {/* Company Information */}\r\n// //           <Grid item xs={12} md={4}>\r\n// //             <img\r\n// //               src=\"/logo-white.png\"\r\n// //               alt=\"SecureAI Guard\"\r\n// //               className={classes.logo}\r\n// //             />\r\n// //             <Typography variant=\"body1\" paragraph>\r\n// //               Leading provider of enterprise-grade security solutions for AI applications.\r\n// //               Protect your systems with our advanced security layer.\r\n// //             </Typography>\r\n// //\r\n// //             {/* Newsletter Subscription */}\r\n// //             <Box className={classes.newsletter}>\r\n// //               <Typography variant=\"h6\" gutterBottom>\r\n// //                 Stay Updated\r\n// //               </Typography>\r\n// //               <form onSubmit={handleNewsletterSubmit}>\r\n// //                 <Box display=\"flex\" gap={1}>\r\n// //                   <TextField\r\n// //                     variant=\"outlined\"\r\n// //                     size=\"small\"\r\n// //                     placeholder=\"Enter your email\"\r\n// //                     className={classes.newsletterInput}\r\n// //                     fullWidth\r\n// //                     value={email}\r\n// //                     onChange={(e) => setEmail(e.target.value)}\r\n// //                   />\r\n// //                   <Button\r\n// //                     type=\"submit\"\r\n// //                     variant=\"contained\"\r\n// //                     color=\"secondary\"\r\n// //                     endIcon={<ArrowForward />}\r\n// //                   >\r\n// //                     {isMobile ? 'Join' : 'Subscribe'}\r\n// //                   </Button>\r\n// //                 </Box>\r\n// //               </form>\r\n// //             </Box>\r\n// //\r\n// //             {/* Social Media Links */}\r\n// //             <Box className={classes.socialIcons}>\r\n// //               <IconButton\r\n// //                 className={classes.socialIcon}\r\n// //                 href=\"https://facebook.com/secureaiguard\"\r\n// //                 target=\"_blank\"\r\n// //                 aria-label=\"Facebook\"\r\n// //               >\r\n// //                 <Facebook />\r\n// //               </IconButton>\r\n// //               <IconButton\r\n// //                 className={classes.socialIcon}\r\n// //                 href=\"https://twitter.com/secureaiguard\"\r\n// //                 target=\"_blank\"\r\n// //                 aria-label=\"Twitter\"\r\n// //               >\r\n// //                 <Twitter />\r\n// //               </IconButton>\r\n// //               <IconButton\r\n// //                 className={classes.socialIcon}\r\n// //                 href=\"https://linkedin.com/company/secureaiguard\"\r\n// //                 target=\"_blank\"\r\n// //                 aria-label=\"LinkedIn\"\r\n// //               >\r\n// //                 <LinkedIn />\r\n// //               </IconButton>\r\n// //               <IconButton\r\n// //                 className={classes.socialIcon}\r\n// //                 href=\"https://github.com/secureaiguard\"\r\n// //                 target=\"_blank\"\r\n// //                 aria-label=\"GitHub\"\r\n// //               >\r\n// //                 <GitHub />\r\n// //               </IconButton>\r\n// //             </Box>\r\n// //           </Grid>\r\n// //\r\n// //           {/* Quick Links */}\r\n// //           <Grid item xs={12} sm={6} md={2} className={classes.linkGroup}>\r\n// //             <Typography variant=\"h6\" gutterBottom>\r\n// //               Product\r\n// //             </Typography>\r\n// //             <Box display=\"flex\" flexDirection=\"column\">\r\n// //               <Link href=\"/features\" className={classes.link}>Features</Link>\r\n// //               <Link href=\"/pricing\" className={classes.link}>Pricing</Link>\r\n// //               <Link href=\"/security\" className={classes.link}>Security</Link>\r\n// //               <Link href=\"/enterprise\" className={classes.link}>Enterprise</Link>\r\n// //               <Link href=\"/documentation\" className={classes.link}>Documentation</Link>\r\n// //             </Box>\r\n// //           </Grid>\r\n// //\r\n// //           {/* Company Links */}\r\n// //           <Grid item xs={12} sm={6} md={2} className={classes.linkGroup}>\r\n// //             <Typography variant=\"h6\" gutterBottom>\r\n// //               Company\r\n// //             </Typography>\r\n// //             <Box display=\"flex\" flexDirection=\"column\">\r\n// //               <Link href=\"/about\" className={classes.link}>About Us</Link>\r\n// //               <Link href=\"/careers\" className={classes.link}>Careers</Link>\r\n// //               <Link href=\"/blog\" className={classes.link}>Blog</Link>\r\n// //               <Link href=\"/press\" className={classes.link}>Press</Link>\r\n// //               <Link href=\"/partners\" className={classes.link}>Partners</Link>\r\n// //             </Box>\r\n// //           </Grid>\r\n// //\r\n// //           {/* Contact Information */}\r\n// //           <Grid item xs={12} md={4}>\r\n// //             <Typography variant=\"h6\" gutterBottom>\r\n// //               Contact Us\r\n// //             </Typography>\r\n// //             <Box className={classes.contactInfo}>\r\n// //               <Email />\r\n// //               <Typography>support@secureaiguard.com</Typography>\r\n// //             </Box>\r\n// //             <Box className={classes.contactInfo}>\r\n// //               <Phone />\r\n// //               <Typography>+1 (555) 123-4567</Typography>\r\n// //             </Box>\r\n// //             <Box className={classes.contactInfo}>\r\n// //               <LocationOn />\r\n// //               <Typography>\r\n// //                 123 Security Street\r\n// //                 <br />\r\n// //                 San Francisco, CA 94105\r\n// //               </Typography>\r\n// //             </Box>\r\n// //           </Grid>\r\n// //         </Grid>\r\n// //\r\n// //         {/* Bottom Bar */}\r\n// //         <Box className={classes.bottomBar}>\r\n// //           <Typography variant=\"body2\">\r\n// //             © {new Date().getFullYear()} SecureAI Guard. All rights reserved.\r\n// //           </Typography>\r\n// //           <Box className={classes.legalLinks}>\r\n// //             <Link href=\"/privacy\" className={classes.link}>\r\n// //               Privacy Policy\r\n// //             </Link>\r\n// //             <Link href=\"/terms\" className={classes.link}>\r\n// //               Terms of Service\r\n// //             </Link>\r\n// //             <Link href=\"/cookies\" className={classes.link}>\r\n// //               Cookie Policy\r\n// //             </Link>\r\n// //           </Box>\r\n// //         </Box>\r\n// //       </Container>\r\n// //\r\n// //       {/* Notification Snackbar */}\r\n// //       <Snackbar\r\n// //         open={snackbar.open}\r\n// //         autoHideDuration={6000}\r\n// //         onClose={handleCloseSnackbar}\r\n// //         anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}\r\n// //       >\r\n// //         <Alert\r\n// //           onClose={handleCloseSnackbar}\r\n// //           severity={snackbar.severity}\r\n// //           variant=\"filled\"\r\n// //         >\r\n// //           {snackbar.message}\r\n// //         </Alert>\r\n// //       </Snackbar>\r\n// //     </Box>\r\n// //   );\r\n// // };\r\n// //\r\n// // export default Footer;\r\n// //\r\n// // // Newsletter subscription service\r\n// // const subscribeToNewsletter = async (email: string) => {\r\n// //   // Implement your newsletter subscription logic here\r\n// //   return new Promise((resolve, reject) => {\r\n// //     // Simulating API call\r\n// //     setTimeout(() => {\r\n// //       if (Math.random() > 0.1) { // 90% success rate\r\n// //         resolve({ success: true });\r\n// //       } else {\r\n// //         reject(new Error('Subscription failed'));\r\n// //       }\r\n// //     }, 1000);\r\n// //   });\r\n// // };\r\n//\r\n//\r\n// // // src/components/Footer/index.js\r\n// // import React, { useState } from 'react';\r\n// // import {\r\n// //   Box,\r\n// //   Container,\r\n// //   Grid,\r\n// //   Typography,\r\n// //   TextField,\r\n// //   Button,\r\n// //   IconButton,\r\n// //   Link,\r\n// //   Snackbar,\r\n// //   Alert,\r\n// //   useTheme,\r\n// //   useMediaQuery,\r\n// // } from '@mui/material';\r\n// // import {\r\n// //   Facebook,\r\n// //   Twitter,\r\n// //   LinkedIn,\r\n// //   GitHub,\r\n// //   Email,\r\n// //   Phone,\r\n// //   LocationOn,\r\n// //   ArrowForward,\r\n// // } from '@mui/icons-material';\r\n// // import { makeStyles } from '@mui/styles';\r\n// // // import { validateEmail } from '../../utils/validation';\r\n// //\r\n// // const useStyles = makeStyles((theme) => ({\r\n// //   footer: {\r\n// //     backgroundColor: theme.palette.primary.dark,\r\n// //     color: theme.palette.common.white,\r\n// //     padding: theme.spacing(6, 0),\r\n// //     position: 'relative',\r\n// //     '&::before': {\r\n// //       content: '\"\"',\r\n// //       position: 'absolute',\r\n// //       top: 0,\r\n// //       left: 0,\r\n// //       right: 0,\r\n// //       height: '4px',\r\n// //       background: 'linear-gradient(90deg, #2196F3 0%, #FF4081 100%)',\r\n// //     },\r\n// //   },\r\n// //   logo: {\r\n// //     height: 40,\r\n// //     marginBottom: theme.spacing(2),\r\n// //     transition: 'transform 0.3s ease',\r\n// //     '&:hover': {\r\n// //       transform: 'scale(1.05)',\r\n// //     },\r\n// //   },\r\n// //   newsletter: {\r\n// //     marginTop: theme.spacing(4),\r\n// //     padding: theme.spacing(3),\r\n// //     backgroundColor: 'rgba(255, 255, 255, 0.05)',\r\n// //     borderRadius: theme.shape.borderRadius,\r\n// //   },\r\n// //   newsletterInput: {\r\n// //     backgroundColor: 'rgba(255, 255, 255, 0.1)',\r\n// //     borderRadius: theme.shape.borderRadius,\r\n// //     '& .MuiInputBase-input': {\r\n// //       color: theme.palette.common.white,\r\n// //     },\r\n// //     '& .MuiOutlinedInput-root': {\r\n// //       '&:hover fieldset': {\r\n// //         borderColor: theme.palette.secondary.main,\r\n// //       },\r\n// //     },\r\n// //   },\r\n// //   socialIcons: {\r\n// //     marginTop: theme.spacing(2),\r\n// //     display: 'flex',\r\n// //     gap: theme.spacing(2),\r\n// //   },\r\n// //   socialIcon: {\r\n// //     color: theme.palette.common.white,\r\n// //     transition: 'all 0.3s ease',\r\n// //     '&:hover': {\r\n// //       color: theme.palette.secondary.main,\r\n// //       transform: 'translateY(-3px)',\r\n// //     },\r\n// //   },\r\n// //   linkGroup: {\r\n// //     [theme.breakpoints.down('sm')]: {\r\n// //       marginTop: theme.spacing(4),\r\n// //     },\r\n// //   },\r\n// //   link: {\r\n// //     color: theme.palette.common.white,\r\n// //     textDecoration: 'none',\r\n// //     transition: 'color 0.3s ease, transform 0.3s ease',\r\n// //     display: 'inline-block',\r\n// //     margin: theme.spacing(0.5, 0),\r\n// //     '&:hover': {\r\n// //       color: theme.palette.secondary.main,\r\n// //       transform: 'translateX(5px)',\r\n// //     },\r\n// //   },\r\n// //   contactInfo: {\r\n// //     display: 'flex',\r\n// //     alignItems: 'center',\r\n// //     marginBottom: theme.spacing(2),\r\n// //     '& .MuiSvgIcon-root': {\r\n// //       marginRight: theme.spacing(1),\r\n// //       color: theme.palette.secondary.main,\r\n// //     },\r\n// //   },\r\n// //   bottomBar: {\r\n// //     borderTop: '1px solid rgba(255, 255, 255, 0.1)',\r\n// //     marginTop: theme.spacing(4),\r\n// //     paddingTop: theme.spacing(2),\r\n// //     display: 'flex',\r\n// //     justifyContent: 'space-between',\r\n// //     alignItems: 'center',\r\n// //     flexWrap: 'wrap',\r\n// //     gap: theme.spacing(2),\r\n// //   },\r\n// //   legalLinks: {\r\n// //     display: 'flex',\r\n// //     gap: theme.spacing(3),\r\n// //     flexWrap: 'wrap',\r\n// //   },\r\n// // }));\r\n// //\r\n// // const Footer = () => {\r\n// //   const classes = useStyles();\r\n// //   const theme = useTheme();\r\n// //   const isMobile = useMediaQuery(theme.breakpoints.down('sm'));\r\n// //   const [email, setEmail] = useState('');\r\n// //   const [snackbar, setSnackbar] = useState({\r\n// //     open: false,\r\n// //     message: '',\r\n// //     severity: 'success',\r\n// //   });\r\n// //\r\n// //   const handleNewsletterSubmit = async (e) => {\r\n// //     e.preventDefault();\r\n// //\r\n// //     if (!validateEmail(email)) {\r\n// //       setSnackbar({\r\n// //         open: true,\r\n// //         message: 'Please enter a valid email address',\r\n// //         severity: 'error',\r\n// //       });\r\n// //       return;\r\n// //     }\r\n// //\r\n// //     try {\r\n// //       // API call to subscribe to newsletter\r\n// //       await subscribeToNewsletter(email);\r\n// //       setSnackbar({\r\n// //         open: true,\r\n// //         message: 'Successfully subscribed to newsletter!',\r\n// //         severity: 'success',\r\n// //       });\r\n// //       setEmail('');\r\n// //     } catch (error) {\r\n// //       setSnackbar({\r\n// //         open: true,\r\n// //         message: 'Failed to subscribe. Please try again later.',\r\n// //         severity: 'error',\r\n// //       });\r\n// //     }\r\n// //   };\r\n// //\r\n// //   const handleCloseSnackbar = () => {\r\n// //     setSnackbar({ ...snackbar, open: false });\r\n// //   };\r\n// //\r\n// //   return (\r\n// //     <Box className={classes.footer}>\r\n// //       <Container maxWidth=\"lg\">\r\n// //         <Grid container spacing={4}>\r\n// //           {/* Company Information */}\r\n// //           <Grid item xs={12} md={4}>\r\n// //             <img\r\n// //               src=\"/logo-white.png\"\r\n// //               alt=\"SecureAI Guard\"\r\n// //               className={classes.logo}\r\n// //             />\r\n// //             <Typography variant=\"body1\" paragraph>\r\n// //               Leading provider of enterprise-grade security solutions for AI applications.\r\n// //               Protect your systems with our advanced security layer.\r\n// //             </Typography>\r\n// //\r\n// //             {/* Newsletter Subscription */}\r\n// //             <Box className={classes.newsletter}>\r\n// //               <Typography variant=\"h6\" gutterBottom>\r\n// //                 Stay Updated\r\n// //               </Typography>\r\n// //               <form onSubmit={handleNewsletterSubmit}>\r\n// //                 <Box display=\"flex\" gap={1}>\r\n// //                   <TextField\r\n// //                     variant=\"outlined\"\r\n// //                     size=\"small\"\r\n// //                     placeholder=\"Enter your email\"\r\n// //                     className={classes.newsletterInput}\r\n// //                     fullWidth\r\n// //                     value={email}\r\n// //                     onChange={(e) => setEmail(e.target.value)}\r\n// //                   />\r\n// //                   <Button\r\n// //                     type=\"submit\"\r\n// //                     variant=\"contained\"\r\n// //                     color=\"secondary\"\r\n// //                     endIcon={<ArrowForward />}\r\n// //                   >\r\n// //                     {isMobile ? 'Join' : 'Subscribe'}\r\n// //                   </Button>\r\n// //                 </Box>\r\n// //               </form>\r\n// //             </Box>\r\n// //\r\n// //             {/* Social Media Links */}\r\n// //             <Box className={classes.socialIcons}>\r\n// //               <IconButton\r\n// //                 className={classes.socialIcon}\r\n// //                 href=\"https://facebook.com/secureaiguard\"\r\n// //                 target=\"_blank\"\r\n// //                 aria-label=\"Facebook\"\r\n// //               >\r\n// //                 <Facebook />\r\n// //               </IconButton>\r\n// //               <IconButton\r\n// //                 className={classes.socialIcon}\r\n// //                 href=\"https://twitter.com/secureaiguard\"\r\n// //                 target=\"_blank\"\r\n// //                 aria-label=\"Twitter\"\r\n// //               >\r\n// //                 <Twitter />\r\n// //               </IconButton>\r\n// //               <IconButton\r\n// //                 className={classes.socialIcon}\r\n// //                 href=\"https://linkedin.com/company/secureaiguard\"\r\n// //                 target=\"_blank\"\r\n// //                 aria-label=\"LinkedIn\"\r\n// //               >\r\n// //                 <LinkedIn />\r\n// //               </IconButton>\r\n// //               <IconButton\r\n// //                 className={classes.socialIcon}\r\n// //                 href=\"https://github.com/secureaiguard\"\r\n// //                 target=\"_blank\"\r\n// //                 aria-label=\"GitHub\"\r\n// //               >\r\n// //                 <GitHub />\r\n// //               </IconButton>\r\n// //             </Box>\r\n// //           </Grid>\r\n// //\r\n// //           {/* Quick Links */}\r\n// //           <Grid item xs={12} sm={6} md={2} className={classes.linkGroup}>\r\n// //             <Typography variant=\"h6\" gutterBottom>\r\n// //               Product\r\n// //             </Typography>\r\n// //             <Box display=\"flex\" flexDirection=\"column\">\r\n// //               <Link href=\"/features\" className={classes.link}>Features</Link>\r\n// //               <Link href=\"/pricing\" className={classes.link}>Pricing</Link>\r\n// //               <Link href=\"/security\" className={classes.link}>Security</Link>\r\n// //               <Link href=\"/enterprise\" className={classes.link}>Enterprise</Link>\r\n// //               <Link href=\"/documentation\" className={classes.link}>Documentation</Link>\r\n// //             </Box>\r\n// //           </Grid>\r\n// //\r\n// //           {/* Company Links */}\r\n// //           <Grid item xs={12} sm={6} md={2} className={classes.linkGroup}>\r\n// //             <Typography variant=\"h6\" gutterBottom>\r\n// //               Company\r\n// //             </Typography>\r\n// //             <Box display=\"flex\" flexDirection=\"column\">\r\n// //               <Link href=\"/about\" className={classes.link}>About Us</Link>\r\n// //               <Link href=\"/careers\" className={classes.link}>Careers</Link>\r\n// //               <Link href=\"/blog\" className={classes.link}>Blog</Link>\r\n// //               <Link href=\"/press\" className={classes.link}>Press</Link>\r\n// //               <Link href=\"/partners\" className={classes.link}>Partners</Link>\r\n// //             </Box>\r\n// //           </Grid>\r\n// //\r\n// //           {/* Contact Information */}\r\n// //           <Grid item xs={12} md={4}>\r\n// //             <Typography variant=\"h6\" gutterBottom>\r\n// //               Contact Us\r\n// //             </Typography>\r\n// //             <Box className={classes.contactInfo}>\r\n// //               <Email />\r\n// //               <Typography>support@secureaiguard.com</Typography>\r\n// //             </Box>\r\n// //             <Box className={classes.contactInfo}>\r\n// //               <Phone />\r\n// //               <Typography>+1 (555) 123-4567</Typography>\r\n// //             </Box>\r\n// //             <Box className={classes.contactInfo}>\r\n// //               <LocationOn />\r\n// //               <Typography>\r\n// //                 123 Security Street\r\n// //                 <br />\r\n// //                 San Francisco, CA 94105\r\n// //               </Typography>\r\n// //             </Box>\r\n// //           </Grid>\r\n// //         </Grid>\r\n// //\r\n// //         {/* Bottom Bar */}\r\n// //         <Box className={classes.bottomBar}>\r\n// //           <Typography variant=\"body2\">\r\n// //             © {new Date().getFullYear()} SecureAI Guard. All rights reserved.\r\n// //           </Typography>\r\n// //           <Box className={classes.legalLinks}>\r\n// //             <Link href=\"/privacy\" className={classes.link}>\r\n// //               Privacy Policy\r\n// //             </Link>\r\n// //             <Link href=\"/terms\" className={classes.link}>\r\n// //               Terms of Service\r\n// //             </Link>\r\n// //             <Link href=\"/cookies\" className={classes.link}>\r\n// //               Cookie Policy\r\n// //             </Link>\r\n// //           </Box>\r\n// //         </Box>\r\n// //       </Container>\r\n// //\r\n// //       {/* Notification Snackbar */}\r\n// //       <Snackbar\r\n// //         open={snackbar.open}\r\n// //         autoHideDuration={6000}\r\n// //         onClose={handleCloseSnackbar}\r\n// //         anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}\r\n// //       >\r\n// //         <Alert\r\n// //           onClose={handleCloseSnackbar}\r\n// //           severity={snackbar.severity}\r\n// //           variant=\"filled\"\r\n// //         >\r\n// //           {snackbar.message}\r\n// //         </Alert>\r\n// //       </Snackbar>\r\n// //     </Box>\r\n// //   );\r\n// // };\r\n// //\r\n// // export default Footer;\r\n// //\r\n// // // Newsletter subscription service\r\n// // const subscribeToNewsletter = async (email) => {\r\n// //   // Implement your newsletter subscription logic here\r\n// //   return new Promise((resolve, reject) => {\r\n// //     // Simulating API call\r\n// //     setTimeout(() => {\r\n// //       if (Math.random() > 0.1) { // 90% success rate\r\n// //         resolve({ success: true });\r\n// //       } else {\r\n// //         reject(new Error('Subscription failed'));\r\n// //       }\r\n// //     }, 1000);\r\n// //   });\r\n// // };\r\n//\r\n//\r\n//\r\n// // // src/components/Footer/index.js\r\n// // import React from 'react';\r\n// // import { makeStyles } from '@mui/styles';\r\n// // import {\r\n// //   Box,\r\n// //   Container,\r\n// //   Grid,\r\n// //   Typography,\r\n// //   Link,\r\n// //   IconButton,\r\n// //   Button,\r\n// //   TextField,\r\n// //   Divider,\r\n// //   Snackbar,\r\n// //   Alert,\r\n// // } from '@mui/material';\r\n// // import {\r\n// //   Facebook,\r\n// //   Twitter,\r\n// //   LinkedIn,\r\n// //   GitHub,\r\n// //   Email,\r\n// //   Phone,\r\n// //   LocationOn,\r\n// // } from '@mui/icons-material';\r\n// // import { motion } from 'framer-motion';\r\n// // import { Link as RouterLink } from 'react-router-dom';\r\n// //\r\n// // const useStyles = makeStyles((theme) => ({\r\n// //   footer: {\r\n// //     backgroundColor: theme.palette.primary.dark,\r\n// //     color: theme.palette.common.white,\r\n// //     paddingTop: theme.spacing(8),\r\n// //     paddingBottom: theme.spacing(4),\r\n// //   },\r\n// //   logo: {\r\n// //     maxWidth: 160,\r\n// //     marginBottom: theme.spacing(2),\r\n// //   },\r\n// //   socialIcons: {\r\n// //     marginTop: theme.spacing(2),\r\n// //     '& > *': {\r\n// //       marginRight: theme.spacing(2),\r\n// //       color: theme.palette.common.white,\r\n// //       '&:hover': {\r\n// //         color: theme.palette.secondary.main,\r\n// //       },\r\n// //     },\r\n// //   },\r\n// //   linkSection: {\r\n// //     '& > *': {\r\n// //       display: 'block',\r\n// //       marginBottom: theme.spacing(1),\r\n// //       color: theme.palette.common.white,\r\n// //       textDecoration: 'none',\r\n// //       '&:hover': {\r\n// //         color: theme.palette.secondary.main,\r\n// //       },\r\n// //     },\r\n// //   },\r\n// //   newsletterForm: {\r\n// //     display: 'flex',\r\n// //     gap: theme.spacing(1),\r\n// //     marginTop: theme.spacing(2),\r\n// //   },\r\n// //   textField: {\r\n// //     '& .MuiOutlinedInput-root': {\r\n// //       '& fieldset': {\r\n// //         borderColor: 'rgba(255, 255, 255, 0.23)',\r\n// //       },\r\n// //       '&:hover fieldset': {\r\n// //         borderColor: 'rgba(255, 255, 255, 0.5)',\r\n// //       },\r\n// //       '&.Mui-focused fieldset': {\r\n// //         borderColor: theme.palette.secondary.main,\r\n// //       },\r\n// //     },\r\n// //     '& .MuiInputBase-input': {\r\n// //       color: theme.palette.common.white,\r\n// //     },\r\n// //     '& .MuiInputLabel-root': {\r\n// //       color: 'rgba(255, 255, 255, 0.7)',\r\n// //     },\r\n// //   },\r\n// //   bottomBar: {\r\n// //     marginTop: theme.spacing(4),\r\n// //     paddingTop: theme.spacing(2),\r\n// //     borderTop: '1px solid rgba(255, 255, 255, 0.1)',\r\n// //   },\r\n// // }));\r\n// //\r\n// // function Footer() {\r\n// //   const classes = useStyles();\r\n// //   const [openSnackbar, setOpenSnackbar] = React.useState(false);\r\n// //   const [email, setEmail] = React.useState('');\r\n// //\r\n// //   const handleNewsletterSubmit = (event) => {\r\n// //     event.preventDefault();\r\n// //     // Implement newsletter subscription logic here\r\n// //     setOpenSnackbar(true);\r\n// //     setEmail('');\r\n// //   };\r\n// //\r\n// //   const handleCloseSnackbar = (event, reason) => {\r\n// //     if (reason === 'clickaway') {\r\n// //       return;\r\n// //     }\r\n// //     setOpenSnackbar(false);\r\n// //   };\r\n// //\r\n// //   return (\r\n// //     <Box component=\"footer\" className={classes.footer}>\r\n// //       <Container maxWidth=\"lg\">\r\n// //         <Grid container spacing={4}>\r\n// //           {/* Company Info */}\r\n// //           <Grid item xs={12} md={4}>\r\n// //             <motion.div\r\n// //               initial={{ opacity: 0, y: 20 }}\r\n// //               animate={{ opacity: 1, y: 0 }}\r\n// //               transition={{ duration: 0.5 }}\r\n// //             >\r\n// //               <img src=\"/assets/images/logo-white.png\" alt=\"SecureAI Guard\" className={classes.logo} />\r\n// //               <Typography variant=\"body1\" paragraph>\r\n// //                 Enterprise-grade security layer for Large Language Models and Generative AI applications.\r\n// //               </Typography>\r\n// //               <Box className={classes.socialIcons}>\r\n// //                 <IconButton component=\"a\" href=\"https://facebook.com\" target=\"_blank\">\r\n// //                   <Facebook />\r\n// //                 </IconButton>\r\n// //                 <IconButton component=\"a\" href=\"https://twitter.com\" target=\"_blank\">\r\n// //                   <Twitter />\r\n// //                 </IconButton>\r\n// //                 <IconButton component=\"a\" href=\"https://linkedin.com\" target=\"_blank\">\r\n// //                   <LinkedIn />\r\n// //                 </IconButton>\r\n// //                 <IconButton component=\"a\" href=\"https://github.com\" target=\"_blank\">\r\n// //                   <GitHub />\r\n// //                 </IconButton>\r\n// //               </Box>\r\n// //             </motion.div>\r\n// //           </Grid>\r\n// //\r\n// //           {/* Quick Links */}\r\n// //           <Grid item xs={12} sm={6} md={2}>\r\n// //             <motion.div\r\n// //               initial={{ opacity: 0, y: 20 }}\r\n// //               animate={{ opacity: 1, y: 0 }}\r\n// //               transition={{ duration: 0.5, delay: 0.1 }}\r\n// //             >\r\n// //               <Typography variant=\"h6\" gutterBottom>\r\n// //                 Quick Links\r\n// //               </Typography>\r\n// //               <Box className={classes.linkSection}>\r\n// //                 <Link component={RouterLink} to=\"/\">Home</Link>\r\n// //                 <Link component={RouterLink} to=\"/about\">About</Link>\r\n// //                 <Link component={RouterLink} to=\"/services\">Services</Link>\r\n// //                 <Link component={RouterLink} to=\"/pricing\">Pricing</Link>\r\n// //                 <Link component={RouterLink} to=\"/contact\">Contact</Link>\r\n// //               </Box>\r\n// //             </motion.div>\r\n// //           </Grid>\r\n// //\r\n// //           {/* Resources */}\r\n// //           <Grid item xs={12} sm={6} md={2}>\r\n// //             <motion.div\r\n// //               initial={{ opacity: 0, y: 20 }}\r\n// //               animate={{ opacity: 1, y: 0 }}\r\n// //               transition={{ duration: 0.5, delay: 0.2 }}\r\n// //             >\r\n// //               <Typography variant=\"h6\" gutterBottom>\r\n// //                 Resources\r\n// //               </Typography>\r\n// //               <Box className={classes.linkSection}>\r\n// //                 <Link href=\"/docs\">Documentation</Link>\r\n// //                 <Link href=\"/api\">API Reference</Link>\r\n// //                 <Link href=\"/blog\">Blog</Link>\r\n// //                 <Link href=\"/support\">Support</Link>\r\n// //                 <Link href=\"/status\">System Status</Link>\r\n// //               </Box>\r\n// //             </motion.div>\r\n// //           </Grid>\r\n// //\r\n// //           {/* Newsletter */}\r\n// //           <Grid item xs={12} md={4}>\r\n// //             <motion.div\r\n// //               initial={{ opacity: 0, y: 20 }}\r\n// //               animate={{ opacity: 1, y: 0 }}\r\n// //               transition={{ duration: 0.5, delay: 0.3 }}\r\n// //             >\r\n// //               <Typography variant=\"h6\" gutterBottom>\r\n// //                 Stay Updated\r\n// //               </Typography>\r\n// //               <Typography variant=\"body2\" paragraph>\r\n// //                 Subscribe to our newsletter for the latest security updates and features.\r\n// //               </Typography>\r\n// //               <form onSubmit={handleNewsletterSubmit} className={classes.newsletterForm}>\r\n// //                 <TextField\r\n// //                   variant=\"outlined\"\r\n// //                   size=\"small\"\r\n// //                   label=\"Email Address\"\r\n// //                   fullWidth\r\n// //                   className={classes.textField}\r\n// //                   value={email}\r\n// //                   onChange={(e) => setEmail(e.target.value)}\r\n// //                   required\r\n// //                 />\r\n// //                 <Button\r\n// //                   type=\"submit\"\r\n// //                   variant=\"contained\"\r\n// //                   color=\"secondary\"\r\n// //                 >\r\n// //                   Subscribe\r\n// //                 </Button>\r\n// //               </form>\r\n// //             </motion.div>\r\n// //           </Grid>\r\n// //         </Grid>\r\n// //\r\n// //         {/* Contact Information */}\r\n// //         <Box mt={4}>\r\n// //           <Grid container spacing={4}>\r\n// //             <Grid item xs={12} sm={4}>\r\n// //               <Box display=\"flex\" alignItems=\"center\">\r\n// //                 <Email sx={{ mr: 1 }} />\r\n// //                 <Typography variant=\"body2\">\r\n// //                   support@secureai-guard.com\r\n// //                 </Typography>\r\n// //               </Box>\r\n// //             </Grid>\r\n// //             <Grid item xs={12} sm={4}>\r\n// //               <Box display=\"flex\" alignItems=\"center\">\r\n// //                 <Phone sx={{ mr: 1 }} />\r\n// //                 <Typography variant=\"body2\">\r\n// //                   +1 (555) 123-4567\r\n// //                 </Typography>\r\n// //               </Box>\r\n// //             </Grid>\r\n// //             <Grid item xs={12} sm={4}>\r\n// //               <Box display=\"flex\" alignItems=\"center\">\r\n// //                 <LocationOn sx={{ mr: 1 }} />\r\n// //                 <Typography variant=\"body2\">\r\n// //                   123 Security Ave, Cyber City, CS 12345\r\n// //                 </Typography>\r\n// //               </Box>\r\n// //             </Grid>\r\n// //           </Grid>\r\n// //         </Box>\r\n// //\r\n// //         {/* Bottom Bar */}\r\n// //         <Box className={classes.bottomBar}>\r\n// //           <Grid container justifyContent=\"space-between\" alignItems=\"center\">\r\n// //             <Grid item>\r\n// //               <Typography variant=\"body2\">\r\n// //                 © {new Date().getFullYear()} SecureAI Guard. All rights reserved.\r\n// //               </Typography>\r\n// //             </Grid>\r\n// //             <Grid item>\r\n// //               <Box component=\"nav\">\r\n// //                 <Link href=\"/privacy\" color=\"inherit\" sx={{ mr: 2 }}>\r\n// //                   Privacy Policy\r\n// //                 </Link>\r\n// //                 <Link href=\"/terms\" color=\"inherit\" sx={{ mr: 2 }}>\r\n// //                   Terms of Service\r\n// //                 </Link>\r\n// //                 <Link href=\"/cookies\" color=\"inherit\">\r\n// //                   Cookie Policy\r\n// //                 </Link>\r\n// //               </Box>\r\n// //             </Grid>\r\n// //           </Grid>\r\n// //         </Box>\r\n// //       </Container>\r\n// //\r\n// //       <Snackbar\r\n// //         open={openSnackbar}\r\n// //         autoHideDuration={6000}\r\n// //         onClose={handleCloseSnackbar}\r\n// //       >\r\n// //         <Alert onClose={handleCloseSnackbar} severity=\"success\">\r\n// //           Thank you for subscribing to our newsletter!\r\n// //         </Alert>\r\n// //       </Snackbar>\r\n// //     </Box>\r\n// //   );\r\n// // }\r\n// //\r\n// // export default Footer;\r\n//\r\n//\r\n//\r\n// // // src/components/Footer/ModernFooter.js\r\n// // import React from 'react';\r\n// // import {\r\n// //   Box,\r\n// //   Container,\r\n// //   Grid,\r\n// //   Typography,\r\n// //   IconButton,\r\n// //   Button,\r\n// //   TextField,\r\n// //   Divider,\r\n// //   useTheme,\r\n// //   Tooltip,\r\n// //   Link as MuiLink,\r\n// // } from '@mui/material';\r\n// // import { motion } from 'framer-motion';\r\n// // import { Link as RouterLink } from 'react-router-dom';\r\n// // import {\r\n// //   GitHub,\r\n// //   Twitter,\r\n// //   LinkedIn,\r\n// //   // Discord,\r\n// //   Send,\r\n// //   KeyboardArrowUp,\r\n// //   Security,\r\n// //   Article,\r\n// //   Support,\r\n// //   Public,\r\n// // } from '@mui/icons-material';\r\n// //\r\n// // const ModernFooter = () => {\r\n// //   const theme = useTheme();\r\n// //\r\n// //   const scrollToTop = () => {\r\n// //     window.scrollTo({ top: 0, behavior: 'smooth' });\r\n// //   };\r\n// //\r\n// //   const footerSections = [\r\n// //     {\r\n// //       title: 'Product',\r\n// //       links: [\r\n// //         { name: 'Features', path: '/features' },\r\n// //         { name: 'Security', path: '/security' },\r\n// //         { name: 'Enterprise', path: '/enterprise' },\r\n// //         { name: 'Pricing', path: '/pricing' },\r\n// //         { name: 'Demo', path: '/demo' },\r\n// //       ],\r\n// //     },\r\n// //     {\r\n// //       title: 'Resources',\r\n// //       links: [\r\n// //         { name: 'Documentation', path: '/docs' },\r\n// //         { name: 'API Reference', path: '/api' },\r\n// //         { name: 'Blog', path: '/blog' },\r\n// //         { name: 'Guides', path: '/guides' },\r\n// //         { name: 'Status', path: '/status' },\r\n// //       ],\r\n// //     },\r\n// //     {\r\n// //       title: 'Company',\r\n// //       links: [\r\n// //         { name: 'About', path: '/about' },\r\n// //         { name: 'Careers', path: '/careers' },\r\n// //         { name: 'Contact', path: '/contact' },\r\n// //         { name: 'Partners', path: '/partners' },\r\n// //         { name: 'Legal', path: '/legal' },\r\n// //       ],\r\n// //     },\r\n// //   ];\r\n// //\r\n// //   const socialLinks = [\r\n// //     { icon: <GitHub />, url: 'https://github.com/secureai-guard', name: 'GitHub' },\r\n// //     { icon: <Twitter />, url: 'https://twitter.com/secureai_guard', name: 'Twitter' },\r\n// //     { icon: <LinkedIn />, url: 'https://linkedin.com/company/secureai-guard', name: 'LinkedIn' },\r\n// //     // { icon: <Discord />, url: 'https://discord.gg/secureai-guard', name: 'Discord' },\r\n// //   ];\r\n// //\r\n// //   return (\r\n// //     <Box\r\n// //       component=\"footer\"\r\n// //       sx={{\r\n// //         bgcolor: 'background.paper',\r\n// //         position: 'relative',\r\n// //         overflow: 'hidden',\r\n// //       }}\r\n// //     >\r\n// //       {/* Background Gradient */}\r\n// //       <Box\r\n// //         sx={{\r\n// //           position: 'absolute',\r\n// //           top: 0,\r\n// //           left: 0,\r\n// //           right: 0,\r\n// //           bottom: 0,\r\n// //           background: `radial-gradient(circle at 0% 0%, \\${theme.palette.primary.main}15 0%, transparent 50%),\r\n// //                       radial-gradient(circle at 100% 100%, \\${theme.palette.secondary.main}15 0%, transparent 50%)`,\r\n// //           zIndex: 0,\r\n// //         }}\r\n// //       />\r\n// //\r\n// //       {/* Scroll to Top Button */}\r\n// //       <Box\r\n// //         sx={{\r\n// //           position: 'absolute',\r\n// //           top: -25,\r\n// //           left: '50%',\r\n// //           transform: 'translateX(-50%)',\r\n// //           zIndex: 2,\r\n// //         }}\r\n// //       >\r\n// //         <motion.div\r\n// //           whileHover={{ scale: 1.1 }}\r\n// //           whileTap={{ scale: 0.9 }}\r\n// //         >\r\n// //           <IconButton\r\n// //             onClick={scrollToTop}\r\n// //             sx={{\r\n// //               bgcolor: 'background.paper',\r\n// //               boxShadow: theme.shadows[4],\r\n// //               '&:hover': {\r\n// //                 bgcolor: 'background.paper',\r\n// //               },\r\n// //             }}\r\n// //           >\r\n// //             <KeyboardArrowUp />\r\n// //           </IconButton>\r\n// //         </motion.div>\r\n// //       </Box>\r\n// //\r\n// //       <Container maxWidth=\"lg\" sx={{ position: 'relative', zIndex: 1 }}>\r\n// //         {/* Main Footer Content */}\r\n// //         <Box py={8}>\r\n// //           <Grid container spacing={4}>\r\n// //             {/* Logo and Description */}\r\n// //             <Grid item xs={12} md={4}>\r\n// //               <Box mb={3}>\r\n// //                 <img\r\n// //                   src=\"/assets/images/logo.png\"\r\n// //                   alt=\"SecureAI Guard\"\r\n// //                   style={{ height: 40 }}\r\n// //                 />\r\n// //               </Box>\r\n// //               <Typography variant=\"body2\" color=\"text.secondary\" paragraph>\r\n// //                 Enterprise-grade security layer for Large Language Models and\r\n// //                 Generative AI applications. Protecting AI systems with advanced\r\n// //                 security measures.\r\n// //               </Typography>\r\n// //\r\n// //               {/* Social Links */}\r\n// //               <Box sx={{ mt: 3, display: 'flex', gap: 1 }}>\r\n// //                 {socialLinks.map((social) => (\r\n// //                   <motion.div\r\n// //                     key={social.name}\r\n// //                     whileHover={{ y: -3 }}\r\n// //                     whileTap={{ scale: 0.95 }}\r\n// //                   >\r\n// //                     <Tooltip title={social.name}>\r\n// //                       <IconButton\r\n// //                         component=\"a\"\r\n// //                         href={social.url}\r\n// //                         target=\"_blank\"\r\n// //                         rel=\"noopener noreferrer\"\r\n// //                         sx={{\r\n// //                           color: 'text.secondary',\r\n// //                           '&:hover': {\r\n// //                             color: 'primary.main',\r\n// //                           },\r\n// //                         }}\r\n// //                       >\r\n// //                         {social.icon}\r\n// //                       </IconButton>\r\n// //                     </Tooltip>\r\n// //                   </motion.div>\r\n// //                 ))}\r\n// //               </Box>\r\n// //             </Grid>\r\n// //\r\n// //             {/* Footer Sections */}\r\n// //             {footerSections.map((section) => (\r\n// //               <Grid item xs={12} sm={6} md={2} key={section.title}>\r\n// //                 <Typography\r\n// //                   variant=\"subtitle1\"\r\n// //                   color=\"text.primary\"\r\n// //                   sx={{ fontWeight: 600, mb: 2 }}\r\n// //                 >\r\n// //                   {section.title}\r\n// //                 </Typography>\r\n// //                 <Box component=\"ul\" sx={{ listStyle: 'none', p: 0, m: 0 }}>\r\n// //                   {section.links.map((link) => (\r\n// //                     <Box\r\n// //                       component=\"li\"\r\n// //                       key={link.name}\r\n// //                       sx={{ mb: 1 }}\r\n// //                     >\r\n// //                       <motion.div\r\n// //                         whileHover={{ x: 5 }}\r\n// //                         transition={{ type: 'spring', stiffness: 300 }}\r\n// //                       >\r\n// //                         <MuiLink\r\n// //                           component={RouterLink}\r\n// //                           to={link.path}\r\n// //                           sx={{\r\n// //                             color: 'text.secondary',\r\n// //                             textDecoration: 'none',\r\n// //                             '&:hover': {\r\n// //                               color: 'primary.main',\r\n// //                             },\r\n// //                           }}\r\n// //                         >\r\n// //                           {link.name}\r\n// //                         </MuiLink>\r\n// //                       </motion.div>\r\n// //                     </Box>\r\n// //                   ))}\r\n// //                 </Box>\r\n// //               </Grid>\r\n// //             ))}\r\n// //\r\n// //             {/* Newsletter Section */}\r\n// //             <Grid item xs={12} md={4}>\r\n// //               <Typography\r\n// //                 variant=\"subtitle1\"\r\n// //                 color=\"text.primary\"\r\n// //                 sx={{ fontWeight: 600, mb: 2 }}\r\n// //               >\r\n// //                 Stay Updated\r\n// //               </Typography>\r\n// //               <Typography variant=\"body2\" color=\"text.secondary\" paragraph>\r\n// //                 Subscribe to our newsletter for the latest updates and security insights.\r\n// //               </Typography>\r\n// //               <Box\r\n// //                 component=\"form\"\r\n// //                 sx={{\r\n// //                   display: 'flex',\r\n// //                   gap: 1,\r\n// //                 }}\r\n// //                 onSubmit={(e) => {\r\n// //                   e.preventDefault();\r\n// //                   // Handle newsletter subscription\r\n// //                 }}\r\n// //               >\r\n// //                 <TextField\r\n// //                   size=\"small\"\r\n// //                   placeholder=\"Enter your email\"\r\n// //                   fullWidth\r\n// //                   sx={{\r\n// //                     '& .MuiOutlinedInput-root': {\r\n// //                       bgcolor: 'background.paper',\r\n// //                     },\r\n// //                   }}\r\n// //                 />\r\n// //                 <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>\r\n// //                   <Button\r\n// //                     variant=\"contained\"\r\n// //                     color=\"primary\"\r\n// //                     type=\"submit\"\r\n// //                     sx={{\r\n// //                       height: '100%',\r\n// //                       minWidth: 'auto',\r\n// //                     }}\r\n// //                   >\r\n// //                     <Send />\r\n// //                   </Button>\r\n// //                 </motion.div>\r\n// //               </Box>\r\n// //             </Grid>\r\n// //           </Grid>\r\n// //         </Box>\r\n// //\r\n// //         <Divider />\r\n// //\r\n// //         {/* Bottom Bar */}\r\n// //         <Box\r\n// //           py={3}\r\n// //           sx={{\r\n// //             display: 'flex',\r\n// //             flexDirection: { xs: 'column', sm: 'row' },\r\n// //             alignItems: 'center',\r\n// //             justifyContent: 'space-between',\r\n// //             gap: 2,\r\n// //           }}\r\n// //         >\r\n// //           <Typography variant=\"body2\" color=\"text.secondary\">\r\n// //             © {new Date().getFullYear()} SecureAI Guard. All rights reserved.\r\n// //           </Typography>\r\n// //\r\n// //           <Box\r\n// //             sx={{\r\n// //               display: 'flex',\r\n// //               gap: 3,\r\n// //               flexWrap: 'wrap',\r\n// //               justifyContent: 'center',\r\n// //             }}\r\n// //           >\r\n// //             {[\r\n// //               { text: 'Privacy Policy', path: '/privacy' },\r\n// //               { text: 'Terms of Service', path: '/terms' },\r\n// //               { text: 'Cookie Policy', path: '/cookies' },\r\n// //               { text: 'Security', path: '/security' },\r\n// //             ].map((link) => (\r\n// //               <motion.div\r\n// //                 key={link.text}\r\n// //                 whileHover={{ y: -2 }}\r\n// //               >\r\n// //                 <MuiLink\r\n// //                   component={RouterLink}\r\n// //                   to={link.path}\r\n// //                   sx={{\r\n// //                     color: 'text.secondary',\r\n// //                     textDecoration: 'none',\r\n// //                     '&:hover': {\r\n// //                       color: 'primary.main',\r\n// //                     },\r\n// //                   }}\r\n// //                 >\r\n// //                   <Typography variant=\"body2\">\r\n// //                     {link.text}\r\n// //                   </Typography>\r\n// //                 </MuiLink>\r\n// //               </motion.div>\r\n// //             ))}\r\n// //           </Box>\r\n// //         </Box>\r\n// //       </Container>\r\n// //     </Box>\r\n// //   );\r\n// // };\r\n// //\r\n// // export default ModernFooter;\r\n//\r\n//\r\n// // src/components/Footer/ModernFooter.js\r\n// import React from 'react';\r\n// import {\r\n//   Box,\r\n//   Container,\r\n//   Grid,\r\n//   Typography,\r\n//   IconButton,\r\n//   Button,\r\n//   TextField,\r\n//   Divider,\r\n//   useTheme,\r\n//   Tooltip,\r\n//   Link as MuiLink,\r\n// } from '@mui/material';\r\n// import { motion } from 'framer-motion';\r\n// import { Link as RouterLink } from 'react-router-dom';\r\n// import {\r\n//   GitHub,\r\n//   Twitter,\r\n//   LinkedIn,\r\n//   // Discord,\r\n//   Send,\r\n//   KeyboardArrowUp,\r\n//   Security,\r\n//   Article,\r\n//   Support,\r\n//   Public,\r\n// } from '@mui/icons-material';\r\n//\r\n// const ModernFooter = () => {\r\n//   const theme = useTheme();\r\n//\r\n//   const scrollToTop = () => {\r\n//     window.scrollTo({ top: 0, behavior: 'smooth' });\r\n//   };\r\n//\r\n//   const footerSections = [\r\n//     {\r\n//       title: 'Product',\r\n//       links: [\r\n//         { name: 'Features', path: '/features' },\r\n//         { name: 'Security', path: '/security' },\r\n//         { name: 'Enterprise', path: '/enterprise' },\r\n//         { name: 'Pricing', path: '/pricing' },\r\n//         { name: 'Demo', path: '/demo' },\r\n//       ],\r\n//     },\r\n//     {\r\n//       title: 'Resources',\r\n//       links: [\r\n//         { name: 'Documentation', path: '/docs' },\r\n//         { name: 'API Reference', path: '/api' },\r\n//         { name: 'Blog', path: '/blog' },\r\n//         { name: 'Guides', path: '/guides' },\r\n//         { name: 'Status', path: '/status' },\r\n//       ],\r\n//     },\r\n//     {\r\n//       title: 'Company',\r\n//       links: [\r\n//         { name: 'About', path: '/about' },\r\n//         { name: 'Careers', path: '/careers' },\r\n//         { name: 'Contact', path: '/contact' },\r\n//         { name: 'Partners', path: '/partners' },\r\n//         { name: 'Legal', path: '/legal' },\r\n//       ],\r\n//     },\r\n//   ];\r\n//\r\n//   const socialLinks = [\r\n//     { icon: <GitHub />, url: 'https://github.com/secureai-guard', name: 'GitHub' },\r\n//     { icon: <Twitter />, url: 'https://twitter.com/secureai_guard', name: 'Twitter' },\r\n//     { icon: <LinkedIn />, url: 'https://linkedin.com/company/secureai-guard', name: 'LinkedIn' },\r\n//     // { icon: <Discord />, url: 'https://discord.gg/secureai-guard', name: 'Discord' },\r\n//   ];\r\n//\r\n//   return (\r\n//     <Box\r\n//       component=\"footer\"\r\n//       sx={{\r\n//         bgcolor: 'background.paper',\r\n//         position: 'relative',\r\n//         overflow: 'hidden',\r\n//       }}\r\n//     >\r\n//       {/* Background Gradient */}\r\n//       <Box\r\n//         sx={{\r\n//           position: 'absolute',\r\n//           top: 0,\r\n//           left: 0,\r\n//           right: 0,\r\n//           bottom: 0,\r\n//           background: `radial-gradient(circle at 0% 0%, \\${theme.palette.primary.main}15 0%, transparent 50%),\r\n//                       radial-gradient(circle at 100% 100%, \\${theme.palette.secondary.main}15 0%, transparent 50%)`,\r\n//           zIndex: 0,\r\n//         }}\r\n//       />\r\n//\r\n//       {/* Scroll to Top Button */}\r\n//       <Box\r\n//         sx={{\r\n//           position: 'absolute',\r\n//           top: -25,\r\n//           left: '50%',\r\n//           transform: 'translateX(-50%)',\r\n//           zIndex: 2,\r\n//         }}\r\n//       >\r\n//         <motion.div\r\n//           whileHover={{ scale: 1.1 }}\r\n//           whileTap={{ scale: 0.9 }}\r\n//         >\r\n//           <IconButton\r\n//             onClick={scrollToTop}\r\n//             sx={{\r\n//               bgcolor: 'background.paper',\r\n//               boxShadow: theme.shadows[4],\r\n//               '&:hover': {\r\n//                 bgcolor: 'background.paper',\r\n//               },\r\n//             }}\r\n//           >\r\n//             <KeyboardArrowUp />\r\n//           </IconButton>\r\n//         </motion.div>\r\n//       </Box>\r\n//\r\n//       <Container maxWidth=\"lg\" sx={{ position: 'relative', zIndex: 1 }}>\r\n//         {/* Main Footer Content */}\r\n//         <Box py={8}>\r\n//           <Grid container spacing={4}>\r\n//             {/* Logo and Description */}\r\n//             <Grid item xs={12} md={4}>\r\n//               <Box mb={3}>\r\n//                 <img\r\n//                   src=\"/assets/images/logo.png\"\r\n//                   alt=\"SecureAI Guard\"\r\n//                   style={{ height: 40 }}\r\n//                 />\r\n//               </Box>\r\n//               <Typography variant=\"body2\" color=\"text.secondary\" paragraph>\r\n//                 Enterprise-grade security layer for Large Language Models and\r\n//                 Generative AI applications. Protecting AI systems with advanced\r\n//                 security measures.\r\n//               </Typography>\r\n//\r\n//               {/* Social Links */}\r\n//               <Box sx={{ mt: 3, display: 'flex', gap: 1 }}>\r\n//                 {socialLinks.map((social) => (\r\n//                   <motion.div\r\n//                     key={social.name}\r\n//                     whileHover={{ y: -3 }}\r\n//                     whileTap={{ scale: 0.95 }}\r\n//                   >\r\n//                     <Tooltip title={social.name}>\r\n//                       <IconButton\r\n//                         component=\"a\"\r\n//                         href={social.url}\r\n//                         target=\"_blank\"\r\n//                         rel=\"noopener noreferrer\"\r\n//                         sx={{\r\n//                           color: 'text.secondary',\r\n//                           '&:hover': {\r\n//                             color: 'primary.main',\r\n//                           },\r\n//                         }}\r\n//                       >\r\n//                         {social.icon}\r\n//                       </IconButton>\r\n//                     </Tooltip>\r\n//                   </motion.div>\r\n//                 ))}\r\n//               </Box>\r\n//             </Grid>\r\n//\r\n//             {/* Footer Sections */}\r\n//             {footerSections.map((section) => (\r\n//               <Grid item xs={12} sm={6} md={2} key={section.title}>\r\n//                 <Typography\r\n//                   variant=\"subtitle1\"\r\n//                   color=\"text.primary\"\r\n//                   sx={{ fontWeight: 600, mb: 2 }}\r\n//                 >\r\n//                   {section.title}\r\n//                 </Typography>\r\n//                 <Box component=\"ul\" sx={{ listStyle: 'none', p: 0, m: 0 }}>\r\n//                   {section.links.map((link) => (\r\n//                     <Box\r\n//                       component=\"li\"\r\n//                       key={link.name}\r\n//                       sx={{ mb: 1 }}\r\n//                     >\r\n//                       <motion.div\r\n//                         whileHover={{ x: 5 }}\r\n//                         transition={{ type: 'spring', stiffness: 300 }}\r\n//                       >\r\n//                         <MuiLink\r\n//                           component={RouterLink}\r\n//                           to={link.path}\r\n//                           sx={{\r\n//                             color: 'text.secondary',\r\n//                             textDecoration: 'none',\r\n//                             '&:hover': {\r\n//                               color: 'primary.main',\r\n//                             },\r\n//                           }}\r\n//                         >\r\n//                           {link.name}\r\n//                         </MuiLink>\r\n//                       </motion.div>\r\n//                     </Box>\r\n//                   ))}\r\n//                 </Box>\r\n//               </Grid>\r\n//             ))}\r\n//\r\n//             {/* Newsletter Section */}\r\n//             <Grid item xs={12} md={4}>\r\n//               <Typography\r\n//                 variant=\"subtitle1\"\r\n//                 color=\"text.primary\"\r\n//                 sx={{ fontWeight: 600, mb: 2 }}\r\n//               >\r\n//                 Stay Updated\r\n//               </Typography>\r\n//               <Typography variant=\"body2\" color=\"text.secondary\" paragraph>\r\n//                 Subscribe to our newsletter for the latest updates and security insights.\r\n//               </Typography>\r\n//               <Box\r\n//                 component=\"form\"\r\n//                 sx={{\r\n//                   display: 'flex',\r\n//                   gap: 1,\r\n//                 }}\r\n//                 onSubmit={(e) => {\r\n//                   e.preventDefault();\r\n//                   // Handle newsletter subscription\r\n//                 }}\r\n//               >\r\n//                 <TextField\r\n//                   size=\"small\"\r\n//                   placeholder=\"Enter your email\"\r\n//                   fullWidth\r\n//                   sx={{\r\n//                     '& .MuiOutlinedInput-root': {\r\n//                       bgcolor: 'background.paper',\r\n//                     },\r\n//                   }}\r\n//                 />\r\n//                 <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>\r\n//                   <Button\r\n//                     variant=\"contained\"\r\n//                     color=\"primary\"\r\n//                     type=\"submit\"\r\n//                     sx={{\r\n//                       height: '100%',\r\n//                       minWidth: 'auto',\r\n//                     }}\r\n//                   >\r\n//                     <Send />\r\n//                   </Button>\r\n//                 </motion.div>\r\n//               </Box>\r\n//             </Grid>\r\n//           </Grid>\r\n//         </Box>\r\n//\r\n//         <Divider />\r\n//\r\n//         {/* Bottom Bar */}\r\n//         <Box\r\n//           py={3}\r\n//           sx={{\r\n//             display: 'flex',\r\n//             flexDirection: { xs: 'column', sm: 'row' },\r\n//             alignItems: 'center',\r\n//             justifyContent: 'space-between',\r\n//             gap: 2,\r\n//           }}\r\n//         >\r\n//           <Typography variant=\"body2\" color=\"text.secondary\">\r\n//             © {new Date().getFullYear()} SecureAI Guard. All rights reserved.\r\n//           </Typography>\r\n//\r\n//           <Box\r\n//             sx={{\r\n//               display: 'flex',\r\n//               gap: 3,\r\n//               flexWrap: 'wrap',\r\n//               justifyContent: 'center',\r\n//             }}\r\n//           >\r\n//             {[\r\n//               { text: 'Privacy Policy', path: '/privacy' },\r\n//               { text: 'Terms of Service', path: '/terms' },\r\n//               { text: 'Cookie Policy', path: '/cookies' },\r\n//               { text: 'Security', path: '/security' },\r\n//             ].map((link) => (\r\n//               <motion.div\r\n//                 key={link.text}\r\n//                 whileHover={{ y: -2 }}\r\n//               >\r\n//                 <MuiLink\r\n//                   component={RouterLink}\r\n//                   to={link.path}\r\n//                   sx={{\r\n//                     color: 'text.secondary',\r\n//                     textDecoration: 'none',\r\n//                     '&:hover': {\r\n//                       color: 'primary.main',\r\n//                     },\r\n//                   }}\r\n//                 >\r\n//                   <Typography variant=\"body2\">\r\n//                     {link.text}\r\n//                   </Typography>\r\n//                 </MuiLink>\r\n//               </motion.div>\r\n//             ))}\r\n//           </Box>\r\n//         </Box>\r\n//       </Container>\r\n//     </Box>\r\n//   );\r\n// };\r\n//\r\n// export default ModernFooter;","// src/components/LoadingScreen.js\r\nimport React from 'react';\r\nimport { Box, CircularProgress, Typography } from '@mui/material';\r\nimport { motion } from 'framer-motion';\r\n\r\nfunction LoadingScreen() {\r\n  return (\r\n    <Box\r\n      sx={{\r\n        height: '100vh',\r\n        display: 'flex',\r\n        flexDirection: 'column',\r\n        alignItems: 'center',\r\n        justifyContent: 'center',\r\n        bgcolor: 'background.default',\r\n      }}\r\n    >\r\n      <motion.div\r\n        initial={{ opacity: 0, scale: 0.5 }}\r\n        animate={{ opacity: 1, scale: 1 }}\r\n        transition={{\r\n          duration: 0.8,\r\n          ease: [0, 0.71, 0.2, 1.01],\r\n          scale: {\r\n            type: 'spring',\r\n            damping: 5,\r\n            stiffness: 100,\r\n            restDelta: 0.001,\r\n          },\r\n        }}\r\n      >\r\n        <Box\r\n          component=\"img\"\r\n          src=\"/assets/images/logo-animated.svg\"\r\n          alt=\"Loading\"\r\n          sx={{ width: 120, height: 120, mb: 4 }}\r\n        />\r\n      </motion.div>\r\n      <CircularProgress\r\n        size={48}\r\n        thickness={4}\r\n        sx={{\r\n          color: 'primary.main',\r\n          mb: 2,\r\n        }}\r\n      />\r\n      <Typography\r\n        variant=\"h6\"\r\n        sx={{\r\n          color: 'text.secondary',\r\n          fontWeight: 500,\r\n        }}\r\n      >\r\n        Loading...\r\n      </Typography>\r\n    </Box>\r\n  );\r\n}\r\n\r\nexport default LoadingScreen;","// src/routes/ProtectedRoute.js\r\nimport React from 'react';\r\nimport { Navigate, useLocation } from 'react-router-dom';\r\nimport { useAuth } from '../hooks/useAuth';\r\n\r\nconst ProtectedRoute = ({ children }) => {\r\n  const { isAuthenticated, isLoading } = useAuth();\r\n  const location = useLocation();\r\n\r\n  if (isLoading) {\r\n    // You can show a loading spinner here\r\n    return null;\r\n  }\r\n\r\n  if (!isAuthenticated) {\r\n    // Redirect to login page and save the attempted url\r\n    return <Navigate to=\"/signin\" state={{ from: location }} replace />;\r\n  }\r\n\r\n  return children;\r\n};\r\n\r\nexport default ProtectedRoute;","// src/routes/routeConfig.js\r\n\r\nimport { lazy } from 'react';\r\n\r\n// Lazy load components\r\nconst Home = lazy(() => import('../pages/Home'));\r\nconst About = lazy(() => import('../pages/About'));\r\nconst Contact = lazy(() => import('../pages/Contact'));\r\nconst Products = lazy(() => import('../pages/Products'));\r\nconst Pricing = lazy(() => import('../pages/Pricing'));\r\nconst Documentation = lazy(() => import('../pages/Documentation'));\r\nconst SignIn = lazy(() => import('../pages/SignIn'));\r\n\r\nexport const routes = [\r\n  {\r\n    path: '/',\r\n    component: Home,\r\n    protected: false,\r\n  },\r\n  {\r\n    path: '/products/*',\r\n    component: Products,\r\n    protected: false,\r\n  },\r\n  {\r\n    path: '/pricing',\r\n    component: Pricing,\r\n    protected: false,\r\n  },\r\n  {\r\n    path: '/docs',\r\n    component: Documentation,\r\n    protected: false,\r\n  },\r\n  {\r\n    path: '/signin',\r\n    component: SignIn,\r\n    protected: false,\r\n  },\r\n];\r\n\r\n// Function to get all paths\r\nexport const getAllPages = () => {\r\n  return routes.map(route => route.path);\r\n};\r\n\r\nexport const navigationConfig = {\r\n  main: [\r\n    {\r\n      title: 'Home',\r\n      path: '/',\r\n    },\r\n    {\r\n      title: 'Products',\r\n      path: '/products',\r\n      items: [\r\n        {\r\n          title: 'Threat Detection',\r\n          path: '/products/threat-detection',\r\n          description: 'AI-powered security threat detection',\r\n          icon: 'shield-check'\r\n        },\r\n        {\r\n          title: 'Security Monitoring',\r\n          path: '/products/monitoring',\r\n          description: 'Real-time security monitoring and alerts',\r\n          icon: 'monitor'\r\n        },\r\n        {\r\n          title: 'Access Control',\r\n          path: '/products/access-control',\r\n          description: 'Intelligent access management system',\r\n          icon: 'lock'\r\n        }\r\n      ]\r\n    },\r\n    {\r\n      title: 'Research',\r\n      path: '/research',\r\n      items: [\r\n        {\r\n          title: 'Security Lab',\r\n          path: '/research/lab',\r\n          description: 'Latest security research and findings',\r\n          icon: 'lab'\r\n        },\r\n        {\r\n          title: 'Threat Intelligence',\r\n          path: '/research/threat-intel',\r\n          description: 'Up-to-date threat intelligence reports',\r\n          icon: 'radar'\r\n        }\r\n      ]\r\n    },\r\n    {\r\n      title: 'API',\r\n      path: '/api',\r\n      items: [\r\n        {\r\n          title: 'Documentation',\r\n          path: '/docs',\r\n          description: 'API integration guides',\r\n          icon: 'document'\r\n        },\r\n        {\r\n          title: 'API Reference',\r\n          path: '/api/reference',\r\n          description: 'Complete API documentation',\r\n          icon: 'code'\r\n        },\r\n        {\r\n          title: 'Status',\r\n          path: '/api/status',\r\n          description: 'API performance and uptime',\r\n          icon: 'status'\r\n        }\r\n      ]\r\n    },\r\n    {\r\n      title: 'Benchmarks',\r\n      path: '/benchmarks',\r\n      standalone: true\r\n    },\r\n    {\r\n      title: 'Playground',\r\n      path: '/playground',\r\n      standalone: true\r\n    },\r\n    {\r\n      title: 'Pricing',\r\n      path: '/pricing',\r\n      standalone: true\r\n    },\r\n    {\r\n      title: 'Company',\r\n      path: '/company',\r\n      items: [\r\n        {\r\n          title: 'About',\r\n          path: '/about',\r\n          description: 'Our mission and vision',\r\n          icon: 'building'\r\n        },\r\n        {\r\n          title: 'Contact',\r\n          path: '/contact',\r\n          description: 'Get in touch with our team',\r\n          icon: 'mail'\r\n        }\r\n      ]\r\n    }\r\n  ],\r\n  rightMenu: [\r\n    {\r\n      title: 'Contact us',\r\n      path: '/contact',\r\n      type: 'link'\r\n    },\r\n    {\r\n      title: 'Log in',\r\n      path: '/signin',\r\n      type: 'button',\r\n      variant: 'outlined'\r\n    },\r\n    {\r\n      title: 'Get started',\r\n      path: '/signup',\r\n      type: 'button',\r\n      variant: 'contained'\r\n    }\r\n  ]\r\n};\r\n\r\n\r\n\r\n\r\n// // src/routes/routeConfig.js\r\n// import { lazy } from 'react';\r\n//\r\n// // Lazy load components\r\n// const Home = lazy(() => import('../pages/Home'));\r\n// const About = lazy(() => import('../pages/About'));\r\n// const Contact = lazy(() => import('../pages/Contact'));\r\n// const Products = lazy(() => import('../pages/Products'));\r\n// // const Research = lazy(() => import('../pages/Research'));\r\n// // // const API = lazy(() => import('../pages/API'));\r\n// // const Benchmarks = lazy(() => import('../pages/Benchmarks'));\r\n// // const Playground = lazy(() => import('../pages/Playground'));\r\n// const Pricing = lazy(() => import('../pages/Pricing'));\r\n// const Documentation = lazy(() => import('../pages/Documentation'));\r\n// const SignIn = lazy(() => import('../pages/SignIn'));\r\n// // const Dashboard = lazy(() => import('../pages/Dashboard'));\r\n// // const NotFound = lazy(() => import('../pages/NotFound'));\r\n//\r\n// export const routes = [\r\n//   {\r\n//     path: '/',\r\n//     component: Home,\r\n//     protected: false,\r\n//   },\r\n//   {\r\n//     path: '/products/*',\r\n//     component: Products,\r\n//     protected: false,\r\n//   },\r\n//   {\r\n//   //   path: '/research/*',\r\n//   //   component: Research,\r\n//   //   protected: false,\r\n//   // },\r\n//   // {\r\n//   //   path: '/api/*',\r\n//   //   component: API,\r\n//   //   protected: false,\r\n//   // },\r\n//   // {\r\n//   //   path: '/benchmarks',\r\n//   //   component: Benchmarks,\r\n//   //   protected: false,\r\n//   // },\r\n//   // {\r\n//   //   path: '/playground',\r\n//   //   component: Playground,\r\n//   //   protected: false,\r\n//   },\r\n//   {\r\n//     path: '/pricing',\r\n//     component: Pricing,\r\n//     protected: false,\r\n//   },\r\n//   {\r\n//     path: '/docs',\r\n//     component: Documentation,\r\n//     protected: false,\r\n//   },\r\n//   {\r\n//     path: '/signin',\r\n//     component: SignIn,\r\n//     protected: false,\r\n//   },\r\n//   {\r\n//   //   path: '/dashboard',\r\n//   //   component: Dashboard,\r\n//   //   protected: true,\r\n//   // },\r\n//   // {\r\n//   //   path: '*',\r\n//   //   component: NotFound,\r\n//   //   protected: false,\r\n//   }\r\n// ];\r\n//\r\n// export const navigationConfig = {\r\n//   main: [\r\n//     {\r\n//       title: 'Home',\r\n//       path: '/',\r\n//     },\r\n//     {\r\n//       title: 'Products',\r\n//       path: '/products',\r\n//       items: [\r\n//         {\r\n//           title: 'Threat Detection',\r\n//           path: '/products/threat-detection',\r\n//           description: 'AI-powered security threat detection',\r\n//           icon: 'shield-check'\r\n//         },\r\n//         {\r\n//           title: 'Security Monitoring',\r\n//           path: '/products/monitoring',\r\n//           description: 'Real-time security monitoring and alerts',\r\n//           icon: 'monitor'\r\n//         },\r\n//         {\r\n//           title: 'Access Control',\r\n//           path: '/products/access-control',\r\n//           description: 'Intelligent access management system',\r\n//           icon: 'lock'\r\n//         }\r\n//       ]\r\n//     },\r\n//     {\r\n//       title: 'Research',\r\n//       path: '/research',\r\n//       items: [\r\n//         {\r\n//           title: 'Security Lab',\r\n//           path: '/research/lab',\r\n//           description: 'Latest security research and findings',\r\n//           icon: 'lab'\r\n//         },\r\n//         {\r\n//           title: 'Threat Intelligence',\r\n//           path: '/research/threat-intel',\r\n//           description: 'Up-to-date threat intelligence reports',\r\n//           icon: 'radar'\r\n//         }\r\n//       ]\r\n//     },\r\n//     {\r\n//       title: 'API',\r\n//       path: '/api',\r\n//       items: [\r\n//         {\r\n//           title: 'Documentation',\r\n//           path: '/docs',\r\n//           description: 'API integration guides',\r\n//           icon: 'document'\r\n//         },\r\n//         {\r\n//           title: 'API Reference',\r\n//           path: '/api/reference',\r\n//           description: 'Complete API documentation',\r\n//           icon: 'code'\r\n//         },\r\n//         {\r\n//           title: 'Status',\r\n//           path: '/api/status',\r\n//           description: 'API performance and uptime',\r\n//           icon: 'status'\r\n//         }\r\n//       ]\r\n//     },\r\n//     {\r\n//       title: 'Benchmarks',\r\n//       path: '/benchmarks',\r\n//       standalone: true\r\n//     },\r\n//     {\r\n//       title: 'Playground',\r\n//       path: '/playground',\r\n//       standalone: true\r\n//     },\r\n//     {\r\n//       title: 'Pricing',\r\n//       path: '/pricing',\r\n//       standalone: true\r\n//     },\r\n//     {\r\n//       title: 'Company',\r\n//       path: '/company',\r\n//       items: [\r\n//         {\r\n//           title: 'About',\r\n//           path: '/about',\r\n//           description: 'Our mission and vision',\r\n//           icon: 'building'\r\n//         },\r\n//         {\r\n//           title: 'Contact',\r\n//           path: '/contact',\r\n//           description: 'Get in touch with our team',\r\n//           icon: 'mail'\r\n//         }\r\n//       ]\r\n//     }\r\n//   ],\r\n//   rightMenu: [\r\n//     {\r\n//       title: 'Contact us',\r\n//       path: '/contact',\r\n//       type: 'link'\r\n//     },\r\n//     {\r\n//       title: 'Log in',\r\n//       path: '/signin',\r\n//       type: 'button',\r\n//       variant: 'outlined'\r\n//     },\r\n//     {\r\n//       title: 'Get started',\r\n//       path: '/signup',\r\n//       type: 'button',\r\n//       variant: 'contained'\r\n//     }\r\n//   ]\r\n// };\r\n\r\n// export function routes() {\r\n//\r\n// }// src/routes/routeConfig.js\r\n// import { lazy } from 'react';\r\n//\r\n// // Lazy load components\r\n// const Home = lazy(() => import('../pages/Home'));\r\n// const About = lazy(() => import('../pages/About'));\r\n// const Contact = lazy(() => import('../pages/Contact'));\r\n// const Services = lazy(() => import('../pages/Services'));\r\n// const Marketplace = lazy(() => import('../pages/Marketplace'));\r\n// const SignIn = lazy(() => import('../pages/SignIn'));\r\n// const Dashboard = lazy(() => import('../pages/Dashboard'));\r\n// const Documentation = lazy(() => import('../pages/Documentation'));\r\n// const Pricing = lazy(() => import('../pages/Pricing'));\r\n// const NotFound = lazy(() => import('../pages/NotFound'));\r\n//\r\n// export const routes = [\r\n//   {\r\n//     path: '/',\r\n//     component: Home,\r\n//     protected: false,\r\n//   },\r\n//   {\r\n//     path: '/about',\r\n//     component: About,\r\n//     protected: false,\r\n//   },\r\n//   {\r\n//     path: '/contact',\r\n//     component: Contact,\r\n//     protected: false,\r\n//   },\r\n//   {\r\n//     path: '/services',\r\n//     component: Services,\r\n//     protected: false,\r\n//   },\r\n//   {\r\n//     path: '/marketplace',\r\n//     component: Marketplace,\r\n//     protected: false,\r\n//   },\r\n//   {\r\n//     path: '/signin',\r\n//     component: SignIn,\r\n//     protected: false,\r\n//   },\r\n//   {\r\n//     path: '/dashboard',\r\n//     component: Dashboard,\r\n//     protected: true,\r\n//   },\r\n//   {\r\n//     path: '/docs',\r\n//     component: Documentation,\r\n//     protected: false,\r\n//   },\r\n//   {\r\n//     path: '/pricing',\r\n//     component: Pricing,\r\n//     protected: false,\r\n//   },\r\n//   {\r\n//     path: '/404',\r\n//     component: NotFound,\r\n//     protected: false,\r\n//   },\r\n// ];\r\n//\r\n// // Navigation config for header and footer\r\n// export const navigationConfig = {\r\n//   main: [\r\n//     {\r\n//       title: 'Products',\r\n//       path: '/products',\r\n//       items: [\r\n//         {\r\n//           title: 'Features',\r\n//           path: '/features',\r\n//           description: 'Explore our product features',\r\n//         },\r\n//         {\r\n//           title: 'Solutions',\r\n//           path: '/solutions',\r\n//           description: 'Industry-specific solutions',\r\n//         },\r\n//         {\r\n//           title: 'Enterprise',\r\n//           path: '/enterprise',\r\n//           description: 'For large organizations',\r\n//         },\r\n//       ],\r\n//     },\r\n//     {\r\n//       title: 'Resources',\r\n//       path: '/resources',\r\n//       items: [\r\n//         {\r\n//           title: 'Documentation',\r\n//           path: '/docs',\r\n//           description: 'Learn how to integrate',\r\n//         },\r\n//         {\r\n//           title: 'API Reference',\r\n//           path: '/api',\r\n//           description: 'Detailed API documentation',\r\n//         },\r\n//         {\r\n//           title: 'Blog',\r\n//           path: '/blog',\r\n//           description: 'Latest updates and guides',\r\n//         },\r\n//       ],\r\n//     },\r\n//     {\r\n//       title: 'Company',\r\n//       path: '/company',\r\n//       items: [\r\n//         {\r\n//           title: 'About',\r\n//           path: '/about',\r\n//           description: 'Our story and mission',\r\n//         },\r\n//         {\r\n//           title: 'Contact',\r\n//           path: '/contact',\r\n//           description: 'Get in touch with us',\r\n//         },\r\n//         {\r\n//           title: 'Careers',\r\n//           path: '/careers',\r\n//           description: 'Join our team',\r\n//         },\r\n//       ],\r\n//     },\r\n//   ],\r\n// };","// src/routes/index.jsx\r\nimport React, { Suspense, lazy } from 'react';\r\nimport { Routes, Route } from 'react-router-dom';\r\nimport LoadingScreen from '../components/LoadingScreen';\r\nimport ProtectedRoute from './ProtectedRoute';\r\nimport { routes } from './routeConfig';\r\n\r\n// Lazy-loaded components\r\nconst PrivacyPolicy = lazy(() => import(\"../components/Legal/PrivacyPolicy\"));\r\nconst CookiePolicy = lazy(() => import(\"../components/Legal/CookiePolicy\"));\r\nconst TermsOfService = lazy(() => import(\"../components/Legal/TermsOfService\"));\r\nconst NotFound = lazy(() => import(\"@pages/NotFound\"));\r\nconst Guides = lazy(() => import(\"@pages/Guides\"));\r\nconst Documentation = lazy(() => import(\"@pages/Documentation\"));\r\nconst Status = lazy(() => import(\"@pages/Status\"));\r\nconst Careers = lazy(() => import(\"@pages/Careers\"));\r\nconst Contact = lazy(() => import(\"@pages/Contact\"));\r\nconst Marketplace = lazy(() => import(\"../components/Marketplace\"));\r\nconst ImplementationGuide = lazy(() => import(\"@pages/Home/components/ImplementationGuide\"));\r\nconst OnPremisesDeployment = lazy(() => import(\"@pages/OnPremisesDeployment\"));\r\nconst PricingSection = lazy(() => import(\"@pages/Home/components/PricingSection\"));\r\nconst Security = lazy(() => import(\"@pages/Security\"));\r\nconst ComingSoon = lazy(() => import(\"@pages/ComingSoon\"));\r\nconst FeatureSection = lazy(() => import(\"@pages/Home/components/FeatureSection\"));\r\nconst Partners = lazy(() => import(\"@pages/Home/components/Partners\"));\r\nconst About = lazy(() => import(\"@pages/About\"));\r\nconst SignIn = lazy(() => import(\"@pages/SignIn\"));\r\n\r\nconst AppRoutes = () => {\r\n  return (\r\n    <Suspense fallback={<LoadingScreen />}>\r\n      <Routes>\r\n        {routes.map((route) => {\r\n          const Component = route.component;\r\n\r\n          // Handle protected routes\r\n          if (route.protected) {\r\n            return (\r\n              <Route\r\n                key={route.path}\r\n                path={route.path}\r\n                element={\r\n                  <ProtectedRoute>\r\n                    <Component />\r\n                  </ProtectedRoute>\r\n                }\r\n              />\r\n            );\r\n          }\r\n\r\n          // Handle public routes\r\n          return (\r\n            <Route\r\n              key={route.path}\r\n              path={route.path}\r\n              element={<Component />}\r\n            />\r\n          );\r\n        })}\r\n\r\n        {/* Legal and Informational Pages */}\r\n        <Route path=\"/privacy\" element={<PrivacyPolicy />} />\r\n        <Route path=\"/terms\" element={<TermsOfService />} />\r\n        <Route path=\"/cookies\" element={<CookiePolicy />} />\r\n        <Route path=\"/security\" element={<Security />} />\r\n        <Route path=\"/guides\" element={<Guides />} />\r\n        <Route path=\"/status\" element={<Status />} />\r\n        <Route path=\"/marketplace\" element={<Marketplace />} />\r\n        <Route path=\"/docs\" element={<Documentation />} />\r\n        <Route path=\"/careers\" element={<Careers />} />\r\n        <Route path=\"/contact\" element={<Contact />} />\r\n        <Route path=\"/on-premises-deployment\" element={<OnPremisesDeployment />} />\r\n        <Route path=\"/pricing\" element={<PricingSection />} />\r\n        <Route path=\"/comingsoon\" element={<ComingSoon />} />\r\n        <Route path=\"/features\" element={<FeatureSection />} />\r\n        <Route path=\"/partners\" element={<Partners />} />\r\n        <Route path=\"/about\" element={<About />} />\r\n        <Route path=\"/account\" element={<SignIn />} />\r\n        <Route path=\"/implementation\" element={<ImplementationGuide />} />\r\n\r\n        {/* 404 Not Found */}\r\n        <Route path=\"*\" element={<NotFound />} />\r\n      </Routes>\r\n    </Suspense>\r\n  );\r\n};\r\n\r\nexport default AppRoutes;\r\n\r\n\r\n\r\n// // src/routes/index.jsx\r\n// import React, { Suspense } from 'react';\r\n// import { Routes, Route, Navigate } from 'react-router-dom';\r\n// import LoadingScreen from '../components/LoadingScreen';\r\n// import ProtectedRoute from './ProtectedRoute';\r\n// import { routes } from './routeConfig';\r\n// import PrivacyPolicy from \"../components/Legal/PrivacyPolicy\";\r\n// import CookiePolicy from \"../components/Legal/CookiePolicy\";\r\n// import TermsOfService from \"../components/Legal/TermsOfService\";\r\n// import NotFound from \"@pages/NotFound\";\r\n// // import {Security} from \"@mui/icons-material\";\r\n// import Guides from \"@pages/Guides\";\r\n// import Documentation from \"@pages/Documentation\";\r\n// import Status from \"@pages/Status\";\r\n// import Careers from \"@pages/Careers\";\r\n// import Contact from \"@pages/Contact\";\r\n// import Marketplace from \"../components/Marketplace\";\r\n// import ImplementationGuide from \"@pages/Home/components/ImplementationGuide\";\r\n// import OnPremisesDeployment from \"@pages/OnPremisesDeployment\";\r\n// // import Pricing from \"@pages/Pricing\";\r\n// import PricingSection from \"@pages/Home/components/PricingSection\";\r\n// import Security from \"@pages/Security\";\r\n// import ComingSoon from \"@pages/ComingSoon\";\r\n// import FeatureSection from \"@pages/Home/components/FeatureSection\";\r\n// import Partners from \"@pages/Home/components/Partners\";\r\n// import About from \"@pages/About\";\r\n// import SignIn from \"@pages/SignIn\";\r\n//\r\n// const AppRoutes = () => {\r\n//   return (\r\n//     <Suspense fallback={<LoadingScreen />}>\r\n//       <Routes>\r\n//         {routes.map((route) => {\r\n//           const Component = route.component;\r\n//\r\n//           // Handle protected routes\r\n//           if (route.protected) {\r\n//             return (\r\n//               <Route\r\n//                 key={route.path}\r\n//                 path={route.path}\r\n//                 element={\r\n//                   <ProtectedRoute>\r\n//                     <Component />\r\n//                   </ProtectedRoute>\r\n//                 }\r\n//               />\r\n//             );\r\n//           }\r\n//\r\n//           // Handle public routes\r\n//           return (\r\n//             <Route\r\n//               key={route.path}\r\n//               path={route.path}\r\n//               element={<Component />}\r\n//             />\r\n//           );\r\n//         })}\r\n//\r\n//         {/* Catch all route */}\r\n//         <Route path=\"/privacy\" element={<PrivacyPolicy />} />\r\n//         <Route path=\"/terms\" element={<TermsOfService />} />\r\n//         <Route path=\"/cookies\" element={<CookiePolicy />} />\r\n//         <Route path=\"/cookies\" element={<CookiePolicy />} />\r\n//         <Route path=\"/security\" element={<Security />} />\r\n//         <Route path=\"/guides\" element={<Guides />} />\r\n//         <Route path=\"/status\" element={<Status />} />\r\n//         <Route path=\"/marketplace\" element={<Marketplace />} />\r\n//         <Route path=\"/docs\" element={<Documentation />} />\r\n//         <Route path=\"/careers\" element={<Careers />} />\r\n//         <Route path=\"/contact\" element={<Contact />} />\r\n//         <Route path=\"/on-premises-deployment\" element={<OnPremisesDeployment />} />\r\n//         <Route path=\"/pricing\" element={<PricingSection />} />\r\n//         <Route path=\"/comingsoon\" element={<ComingSoon />} />\r\n//         <Route path=\"/features\" element={<FeatureSection />} />\r\n//         <Route path=\"/partners\" element={<Partners />} />\r\n//         <Route path=\"/about\" element={<About />} />\r\n//         <Route path=\"/account\" element={<SignIn />} />\r\n//         <Route path=\"/implementation\" element={<ImplementationGuide />} />\r\n//         <Route path=\"*\" element={<NotFound />} />\r\n//       </Routes>\r\n//     </Suspense>\r\n//   );\r\n// };\r\n//\r\n// export default AppRoutes;","// src/App.js\r\nimport React from 'react';\r\nimport { Routes, Route } from 'react-router-dom';\r\nimport { Helmet } from 'react-helmet';\r\nimport Header from './components/Header';\r\nimport Footer from './components/Footer';\r\nimport AppRoutes from './routes';\r\n// import NavigationMenu from \"@components/Header/NavigationMenu\";\r\n// import Pricing from \"@pages/Pricing\";\r\n\r\nconst App = () => {\r\n  return (\r\n    <>\r\n      {/* SEO Meta Tags */}\r\n      <Helmet>\r\n        {/* Primary Meta Tags */}\r\n        <title>SecureAI Guard - Enterprise AI Security and Compliance platform for AI Applications</title>\r\n        <meta\r\n          name=\"description\"\r\n          content=\"SecureAI Guard provides enterprise security solutions for large language model and generative AI applications. Safeguard your AI systems with our advanced security layer.\"\r\n        />\r\n        <meta\r\n          name=\"keywords\"\r\n          content=\"SecureAI, AI Security, AI Compliance, SecureAIGuard, LLM, LLMs, Language Model Security, Enterprise Security, LLM Security, Generative AI, Generative AI Security\"\r\n        />\r\n        <meta name=\"author\" content=\"Your Name\" />\r\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\r\n\r\n        {/* Favicon */}\r\n        <link rel=\"icon\" href=\"/assets/images/favicon.ico\" type=\"image/x-icon\" />\r\n        <link rel=\"icon\" href=\"/assets/images/favicon.png\" type=\"image/png\" />\r\n        <link rel=\"apple-touch-icon\" sizes=\"180x180\" href=\"/assets/images/apple-touch-icon.png\" />\r\n        <link rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/assets/images/favicon-32x32.png\" />\r\n        <link rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/assets/images/favicon-16x16.png\" />\r\n        <link rel=\"manifest\" href=\"/assets/images/site.webmanifest\" />\r\n\r\n        {/* Open Graph Meta Tags */}\r\n        <meta property=\"og:title\" content=\"SecureAI Guard - Enterprise AI Security and Compliance platform for AI Applications\" />\r\n        <meta\r\n          property=\"og:description\"\r\n          content=\"SecureAI Guard provides enterprise security solutions for large language model and generative AI applications. Safeguard your AI systems with our advanced security layer.\"\r\n        />\r\n        <meta property=\"og:image\" content=\"https://secureaiguard.com/assets/images/og-image.png\" />\r\n        <meta property=\"og:url\" content=\"https://secureaiguard.com\" />\r\n        <meta property=\"og:type\" content=\"website\" />\r\n\r\n        {/* Twitter Card Meta Tags */}\r\n        <meta name=\"twitter:card\" content=\"summary_large_image\" />\r\n        <meta name=\"twitter:title\" content=\"SecureAI Guard - Enterprise AI Security and Compliance platform for AI Applications\" />\r\n        <meta\r\n          name=\"twitter:description\"\r\n          content=\"SecureAI Guard provides enterprise ai security and ai compliance platform solutions for large language model and generative AI applications. Safeguard your AI systems with our advanced security layer.\"\r\n        />\r\n        <meta name=\"twitter:image\" content=\"https://secureaiguard.com/assets/images/twitter-image.png\" />\r\n\r\n        {/* Canonical Link */}\r\n        <link rel=\"canonical\" href=\"https://secureaiguard.com\" />\r\n\r\n        {/* Structured Data (JSON-LD) */}\r\n        <script type=\"application/ld+json\">\r\n          {`\r\n            {\r\n              \"@context\": \"https://schema.org\",\r\n              \"@type\": \"Organization\",\r\n              \"name\": \"SecureAI Guard\",\r\n              \"url\": \"https://secureaiguard.com\",\r\n              \"logo\": \"https://secureaiguard.com/assets/images/logo.png\",\r\n              \"sameAs\": [\r\n                \"https://www.facebook.com/secureaiguard\",\r\n                \"https://www.twitter.com/secureaiguard\",\r\n                \"https://www.linkedin.com/in/secureaiguard\"\r\n              ],\r\n              \"contactPoint\": {\r\n                \"@type\": \"ContactPoint\",\r\n                \"telephone\": \"+44-7879-222-333\",\r\n                \"contactType\": \"Customer Service\"\r\n              }\r\n            }\r\n          `}\r\n        </script>\r\n      </Helmet>\r\n\r\n      <Header />\r\n      {/* <NavigationMenu /> */}\r\n      <AppRoutes />\r\n      <Footer />\r\n      {/* Modals and additional components can be included here */}\r\n    </>\r\n  );\r\n};\r\n\r\nexport default App;\r\n\r\n\r\n\r\n// // src/App.js\r\n// import React from 'react';\r\n// import { Routes, Route, Navigate } from 'react-router-dom';\r\n// import Header from './components/Header';\r\n// import Footer from './components/Footer';\r\n// import AppRoutes from \"./routes\";\r\n// import NavigationMenu from \"@components/Header/NavigationMenu\";\r\n// import Pricing from \"@pages/Pricing\";\r\n//\r\n//\r\n// const App = () => {\r\n//   return (\r\n//     <>\r\n//       <Header />\r\n//       {/*<NavigationMenu />*/}\r\n//       <AppRoutes />\r\n//       <Footer />\r\n//       {/* Modals and additional components can be included here */}\r\n//     </>\r\n//   );\r\n// };\r\n//\r\n// export default App;\r\n\r\n\r\n\r\n// // src/App.js\r\n// import React from 'react';\r\n// import { Routes, Route, Navigate } from 'react-router-dom';\r\n// import Header from './components/Header';\r\n// import Footer from './components/Footer';\r\n// import Home from  './pages/Home'\r\n// import NavigationMenu from './components/Header/NavigationMenu'; // Ensure correct import\r\n// import MobileMenu from './components/Header/MobileMenu'; // Ensure correct import\r\n// import SearchModal from './components/Header/SearchModal'; // Ensure correct import\r\n// import AnnouncementBanner from './components/Header/AnnouncementBanner'; // Ensure correct import\r\n// import AnimatedBadge from './components/Header/AnimatedBadge'; // Ensure correct import\r\n// import aiSecurity from './pages/AiSecurity';\r\n// import apiIntegration from './pages/ApiIntegration';\r\n// import analyticsDashboard from './pages/AnalyticsDashboard';\r\n// // ... import other pages\r\n//\r\n// const AppRoutes = () => {\r\n//   return (\r\n//     <Routes>\r\n//       <Route path=\"/products/ai-security\" element={<aiSecurity />} />\r\n//       <Route path=\"/products/api\" element={<apiIntegration />} />\r\n//       <Route path=\"/products/analytics\" element={<analyticsDashboard />} />\r\n//       {/* Add more routes as needed */}\r\n//       <Route path=\"*\" element={<Navigate to=\"/404\" replace />} />\r\n//     </Routes>\r\n//   );\r\n// };\r\n//\r\n// const App = () => {\r\n//   return (\r\n//     <>\r\n//       {/* Header and Navigation Menu are managed in index.js via HeaderProvider */}\r\n//       <Header />\r\n//       <AppRoutes />\r\n//       <Footer />\r\n//       <Home />\r\n//       {/* Modals and Menus */}\r\n//       <MobileMenu />\r\n//       <SearchModal />\r\n//       <AnnouncementBanner />\r\n//     </>\r\n//   );\r\n// };\r\n//\r\n// export default App;\r\n\r\n\r\n// // src/App.js\r\n// import React from 'react';\r\n// import { BrowserRouter } from 'react-router-dom';\r\n// import { ThemeProvider } from '@mui/material/styles';\r\n// import { CssBaseline } from '@mui/material';\r\n// import { Provider } from 'react-redux';\r\n// import { HeaderProvider } from './contexts/HeaderContext';\r\n// import { FooterProvider } from './contexts/FooterContext';\r\n// import theme from './theme';\r\n// import store from './store';\r\n// import AppRoutes from './routes';\r\n// import Header from './components/Header';\r\n// import Footer from './components/Footer';\r\n// import ScrollToTop from './routes/ScrollToTop';\r\n// import NavigationMenu from \"@components/Header/NavigationMenu\";\r\n//\r\n// const App = () => {\r\n//   return (\r\n//     <Provider store={store}>\r\n//       <ThemeProvider theme={theme}>\r\n//         <CssBaseline />\r\n//         <BrowserRouter>\r\n//           <HeaderProvider>\r\n//             <FooterProvider>\r\n//               <ScrollToTop />\r\n//               <div className=\"app\">\r\n//                 <Header />\r\n//                 <main>\r\n//                   <AppRoutes />\r\n//                 </main>\r\n//                 <Footer />\r\n//               </div>\r\n//             </FooterProvider>\r\n//           </HeaderProvider>\r\n//         </BrowserRouter>\r\n//       </ThemeProvider>\r\n//     </Provider>\r\n//   );\r\n// };\r\n//\r\n// export default App;\r\n\r\n\r\n\r\n// import React from 'react';\r\n// import { BrowserRouter as Router } from 'react-router-dom';\r\n// import { ThemeProvider } from '@mui/material/styles';\r\n// import { CssBaseline } from '@mui/material';\r\n// import { Provider } from 'react-redux';\r\n// import { HeaderProvider } from './contexts/HeaderContext';\r\n// import theme from './theme';\r\n// import store from './store';\r\n// import AppRoutes from './routes';\r\n// import Header from './components/Header';\r\n// import Footer from './components/Footer';\r\n//\r\n// const App = () => {\r\n//   return (\r\n//     <Provider store={store}>\r\n//       <ThemeProvider theme={theme}>\r\n//         <CssBaseline />\r\n//         <Router>\r\n//           <HeaderProvider>\r\n//             <div className=\"app\">\r\n//               <Header />\r\n//               <main>\r\n//                 <AppRoutes />\r\n//               </main>\r\n//               <Footer />\r\n//             </div>\r\n//           </HeaderProvider>\r\n//         </Router>\r\n//       </ThemeProvider>\r\n//     </Provider>\r\n//   );\r\n// };\r\n//\r\n// export default App;\r\n\r\n\r\n// // src/App.js\r\n// import React from 'react';\r\n// import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';\r\n// import { Container, Box } from '@mui/material';\r\n// import Index from '@pages/Home';\r\n// import Contact from './pages/Contact';\r\n// import Marketplace from './pages/Marketplace';\r\n// import SignIn from './pages/SignIn';\r\n// import About from './pages/About';\r\n// import Services from './pages/Services';\r\n// import Header from './components/Header';\r\n// import Footer from '@components/Footer/Footer';\r\n// import { useHeaderContext } from './contexts/HeaderContext';\r\n//\r\n// function AppContent() {\r\n//   const { searchOpen, mobileMenuOpen } = useHeaderContext();\r\n//\r\n//   return (\r\n//     <Box\r\n//       sx={{\r\n//         minHeight: '100vh',\r\n//         display: 'flex',\r\n//         flexDirection: 'column',\r\n//         // Prevent scrolling when search or mobile menu is open\r\n//         overflow: searchOpen || mobileMenuOpen ? 'hidden' : 'visible',\r\n//       }}\r\n//     >\r\n//       <Header />\r\n//       <Container\r\n//         maxWidth=\"lg\"\r\n//         component=\"main\"\r\n//         sx={{\r\n//           flex: 1,\r\n//           py: 4,\r\n//           mt: { xs: 7, md: 8 }, // Adjust based on header height\r\n//         }}\r\n//       >\r\n//         <Routes>\r\n//           <Route path=\"/\" element={<Index />} />\r\n//           <Route path=\"/contact\" element={<Contact />} />\r\n//           <Route path=\"/marketplace\" element={<Marketplace />} />\r\n//           <Route path=\"/services\" element={<Services />} />\r\n//           <Route path=\"/signin\" element={<SignIn />} />\r\n//           <Route path=\"/about\" element={<About />} />\r\n//         </Routes>\r\n//       </Container>\r\n//       <Footer />\r\n//     </Box>\r\n//   );\r\n// }\r\n//\r\n// function App() {\r\n//   return (\r\n//     <Router>\r\n//       <AppContent />\r\n//     </Router>\r\n//   );\r\n// }\r\n//\r\n// export default App;\r\n\r\n\r\n\r\n\r\n// import React from 'react';\r\n// import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';\r\n// import { AppBar, Toolbar, Typography, Container, Box, Button, CssBaseline, ThemeProvider, createTheme } from '@mui/material';\r\n// import Index from '@pages/Home';\r\n// import Contact from './pages/Contact';\r\n// import Marketplace from './pages/Marketplace';\r\n// import SignIn from './pages/SignIn';\r\n// import About from './pages/About';\r\n// import Header from './components/Header';\r\n// import Footer from './components/Footer';\r\n// import Services from './pages/Services';\r\n// // import { ThemeProvider } from '@mui/material/styles';\r\n// // import CssBaseline from '@mui/material/CssBaseline';\r\n// import theme from './theme';\r\n//\r\n// // const theme = createTheme({\r\n// //     palette: {\r\n// //         primary: {\r\n// //             main: '#1976d2',\r\n// //         },\r\n// //         secondary: {\r\n// //             main: '#dc004e',\r\n// //         },\r\n// //         background: {\r\n// //             default: '#f4f6f8',\r\n// //         },\r\n// //     },\r\n// //     typography: {\r\n// //         fontFamily: 'Roboto, Arial, sans-serif',\r\n// //     },\r\n// // });\r\n//\r\n// function App() {\r\n//     return (\r\n//         <ThemeProvider theme={theme}>\r\n//             <CssBaseline />\r\n//             <Router>\r\n//                 <Header />\r\n//                 <Container maxWidth=\"lg\">\r\n//                     <Box my={4}>\r\n//                         <Routes>\r\n//                             <Route path=\"/\" element={<Index />} />\r\n//                             <Route path=\"/contact\" element={<Contact />} />\r\n//                             <Route path=\"/marketplace\" element={<Marketplace />} />\r\n//                             <Route path=\"/services\" element={<Services />} />\r\n//                             <Route path=\"/signin\" element={<SignIn />} />\r\n//                             <Route path=\"/about\" element={<About />} />\r\n//                         </Routes>\r\n//                     </Box>\r\n//                 </Container>\r\n//                 <Footer />\r\n//             </Router>\r\n//         </ThemeProvider>\r\n//     );\r\n// }\r\n//\r\n// export default App;\r\n//\r\n//\r\n//\r\n//\r\n// // import React from 'react';\r\n// // import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';\r\n// // import { AppBar, Toolbar, Typography, Container, Box, Button, CssBaseline, ThemeProvider, createTheme } from '@mui/material';\r\n// // import Index from './pages/Index';\r\n// // import Contact from './pages/Contact';\r\n// // import Marketplace from './pages/Marketplace';\r\n// // import SignIn from './pages/SignIn';\r\n// // import About from './pages/About';\r\n// // import Header from './components/Header';\r\n// // import Footer from './components/Footer';\r\n// // import Services from \"@pages/Services\";\r\n// //\r\n// // const theme = createTheme({\r\n// //     palette: {\r\n// //         primary: {\r\n// //             main: '#1976d2',\r\n// //         },\r\n// //         secondary: {\r\n// //             main: '#dc004e',\r\n// //         },\r\n// //         background: {\r\n// //             default: '#f4f6f8',\r\n// //         },\r\n// //     },\r\n// //     typography: {\r\n// //         fontFamily: 'Roboto, Arial, sans-serif',\r\n// //     },\r\n// // });\r\n// //\r\n// // function App() {\r\n// //     return (\r\n// //         <ThemeProvider theme={theme}>\r\n// //             <CssBaseline />\r\n// //             <Router>\r\n// //                 <Header />\r\n// //                 <Container maxWidth=\"lg\">\r\n// //                     <Box my={4}>\r\n// //                         <Switch>\r\n// //                             <Route path=\"/\" exact component={Index} />\r\n// //                             <Route path=\"/contact\" component={Contact} />\r\n// //                             <Route path=\"/marketplace\" component={Marketplace} />\r\n// //                             <Route path=\"/services\" component={Services} />\r\n// //                             <Route path=\"/signin\" component={SignIn} />\r\n// //                             <Route path=\"/about\" component={About} />\r\n// //                         </Switch>\r\n// //                     </Box>\r\n// //                 </Container>\r\n// //                 <Footer />\r\n// //             </Router>\r\n// //         </ThemeProvider>\r\n// //     );\r\n// // }\r\n// //\r\n// // export default App;\r\n","// src/routes/ScrollToTop.js\r\nimport { useEffect } from 'react';\r\nimport { useLocation } from 'react-router-dom';\r\n\r\nexport default function ScrollToTop() {\r\n  const { pathname } = useLocation();\r\n\r\n  useEffect(() => {\r\n    window.scrollTo(0, 0);\r\n  }, [pathname]);\r\n\r\n  return null;\r\n}","// src/index.js\r\nimport React from 'react';\r\nimport { createRoot } from 'react-dom/client';\r\nimport { CssBaseline } from '@mui/material';\r\nimport { ThemeProvider, StyledEngineProvider } from '@mui/material/styles';\r\nimport { Provider } from 'react-redux';\r\nimport { BrowserRouter as Router } from 'react-router-dom';\r\nimport { HeaderProvider } from './contexts/HeaderContext';\r\nimport { FooterProvider } from './contexts/FooterContext';\r\nimport theme from './theme'; // Ensure correct path\r\nimport store from './store';\r\nimport App from './App';\r\nimport ScrollToTop from './routes/ScrollToTop';\r\nimport { HelmetProvider } from 'react-helmet-async'; // Import HelmetProvider\r\n\r\nconst container = document.getElementById('root');\r\nconst root = createRoot(container);\r\n\r\nroot.render(\r\n  <React.StrictMode>\r\n    <HelmetProvider>\r\n      <StyledEngineProvider injectFirst>\r\n        <ThemeProvider theme={theme}>\r\n          <Provider store={store}>\r\n            <Router>\r\n              <HeaderProvider>\r\n                <FooterProvider>\r\n                  <CssBaseline />\r\n                  <ScrollToTop />\r\n                  <App />\r\n                </FooterProvider>\r\n              </HeaderProvider>\r\n            </Router>\r\n          </Provider>\r\n        </ThemeProvider>\r\n      </StyledEngineProvider>\r\n    </HelmetProvider>\r\n  </React.StrictMode>\r\n);\r\n\r\n\r\n\r\n// // src/index.js\r\n// import React from 'react';\r\n// import { createRoot } from 'react-dom/client';\r\n// import { CssBaseline } from '@mui/material';\r\n// import { ThemeProvider, StyledEngineProvider } from '@mui/material/styles';\r\n// import { Provider } from 'react-redux';\r\n// import { BrowserRouter as Router } from 'react-router-dom'; // Use BrowserRouter once here\r\n// import { HeaderProvider } from './contexts/HeaderContext';\r\n// import { FooterProvider } from './contexts/FooterContext';\r\n// import theme from './theme'; // Ensure correct path\r\n// import store from './store';\r\n// import App from './App';\r\n// import ScrollToTop from './routes/ScrollToTop';\r\n//\r\n// const container = document.getElementById('root');\r\n// const root = createRoot(container);\r\n//\r\n// root.render(\r\n//   <React.StrictMode>\r\n//     <StyledEngineProvider injectFirst>\r\n//       <ThemeProvider theme={theme}>\r\n//         <Provider store={store}>\r\n//           <Router>\r\n//             <HeaderProvider>\r\n//               <FooterProvider>\r\n//                 <CssBaseline />\r\n//                 <ScrollToTop />\r\n//                 <App />\r\n//               </FooterProvider>\r\n//             </HeaderProvider>\r\n//           </Router>\r\n//         </Provider>\r\n//       </ThemeProvider>\r\n//     </StyledEngineProvider>\r\n//   </React.StrictMode>\r\n// );\r\n\r\n\r\n// // src/index.js\r\n// import React from 'react';\r\n// import { createRoot } from 'react-dom/client';\r\n// import { CssBaseline } from '@mui/material';\r\n// import { ThemeProvider, StyledEngineProvider } from '@mui/material/styles';\r\n// import { Provider } from 'react-redux';\r\n// import { BrowserRouter as Router } from 'react-router-dom';\r\n// import { HeaderProvider } from './contexts/HeaderContext';\r\n// import { FooterProvider } from './contexts/FooterContext';\r\n// import theme from './theme'; // Ensure correct path\r\n// import store from './store';\r\n// import App from './App';\r\n// import ScrollToTop from './routes/ScrollToTop';\r\n//\r\n// const container = document.getElementById('root');\r\n// const root = createRoot(container);\r\n//\r\n// root.render(\r\n//   <React.StrictMode>\r\n//     <StyledEngineProvider injectFirst>\r\n//       <ThemeProvider theme={theme}>\r\n//         <Provider store={store}>\r\n//           <Router>\r\n//             <HeaderProvider>\r\n//               <FooterProvider>\r\n//                 <CssBaseline />\r\n//                 <ScrollToTop />\r\n//                 <App />\r\n//               </FooterProvider>\r\n//             </HeaderProvider>\r\n//           </Router>\r\n//         </Provider>\r\n//       </ThemeProvider>\r\n//     </StyledEngineProvider>\r\n//   </React.StrictMode>\r\n// );\r\n\r\n\r\n// // src/index.js\r\n// import React from 'react';\r\n// import { createRoot } from 'react-dom/client';\r\n// import { CssBaseline } from '@mui/material';\r\n// import { ThemeProvider, createTheme, StyledEngineProvider } from '@mui/material/styles';\r\n// import { Provider } from 'react-redux';\r\n// import { HeaderProvider } from './contexts/HeaderContext';\r\n// import App from './App';\r\n// import store from './store';\r\n// import config from './config';\r\n//\r\n// // Validate environment setup\r\n// if (!config.API_URL) {\r\n//   console.error('API_URL is not configured. Please check your environment setup.');\r\n// }\r\n//\r\n// // Create a custom theme with MUI\r\n// const theme = createTheme({\r\n//   palette: {\r\n//     primary: {\r\n//       main: '#4747FF', // Updated to match SecureAI Guard's blue\r\n//       light: '#6B6BFF',\r\n//       dark: '#3333CC',\r\n//     },\r\n//     secondary: {\r\n//       main: '#FDB347', // Updated to match the announcement banner color\r\n//       light: '#FFD147',\r\n//       dark: '#CC8A39',\r\n//     },\r\n//     background: {\r\n//       default: '#f4f6f8',\r\n//       paper: '#ffffff',\r\n//     },\r\n//   },\r\n//   typography: {\r\n//     fontFamily: 'Inter, Roboto, Arial, sans-serif',\r\n//     h1: {\r\n//       fontSize: '2.5rem',\r\n//       fontWeight: 700,\r\n//     },\r\n//     h2: {\r\n//       fontSize: '2rem',\r\n//       fontWeight: 600,\r\n//     },\r\n//     h3: {\r\n//       fontSize: '1.75rem',\r\n//       fontWeight: 500,\r\n//     },\r\n//     h4: {\r\n//       fontSize: '1.5rem',\r\n//       fontWeight: 500,\r\n//     },\r\n//     h5: {\r\n//       fontSize: '1.25rem',\r\n//       fontWeight: 400,\r\n//     },\r\n//     h6: {\r\n//       fontSize: '1rem',\r\n//       fontWeight: 400,\r\n//     },\r\n//     body1: {\r\n//       fontSize: '1rem',\r\n//       fontWeight: 400,\r\n//     },\r\n//     body2: {\r\n//       fontSize: '0.875rem',\r\n//       fontWeight: 400,\r\n//     },\r\n//   },\r\n//   components: {\r\n//     MuiButton: {\r\n//       styleOverrides: {\r\n//         root: {\r\n//           borderRadius: '8px',\r\n//           textTransform: 'none',\r\n//           padding: '8px 16px',\r\n//         },\r\n//         contained: {\r\n//           boxShadow: 'none',\r\n//           '&:hover': {\r\n//             boxShadow: 'none',\r\n//           },\r\n//         },\r\n//       },\r\n//     },\r\n//     MuiAppBar: {\r\n//       styleOverrides: {\r\n//         root: {\r\n//           backgroundColor: 'transparent',\r\n//           boxShadow: 'none',\r\n//         },\r\n//       },\r\n//     },\r\n//     MuiPaper: {\r\n//       styleOverrides: {\r\n//         root: {\r\n//           borderRadius: '12px',\r\n//         },\r\n//       },\r\n//     },\r\n//   },\r\n// });\r\n//\r\n// const container = document.getElementById('root');\r\n// const root = createRoot(container);\r\n//\r\n// root.render(\r\n//   <React.StrictMode>\r\n//     <StyledEngineProvider injectFirst>\r\n//       <ThemeProvider theme={theme}>\r\n//         <Provider store={store}>\r\n//           <HeaderProvider>\r\n//             <CssBaseline />\r\n//             <App />\r\n//           </HeaderProvider>\r\n//         </Provider>\r\n//       </ThemeProvider>\r\n//     </StyledEngineProvider>\r\n//   </React.StrictMode>\r\n// );\r\n\r\n// import React from 'react';\r\n// import { createRoot } from 'react-dom/client';\r\n// import { CssBaseline } from '@mui/material';\r\n// import { ThemeProvider, createTheme } from '@mui/material/styles';\r\n// import { StyledEngineProvider } from '@mui/material/styles';\r\n// import { Provider } from 'react-redux';\r\n// import App from './App';\r\n// import store from './store'; // Ensure this points to your correctly configured store\r\n// import config from './config'; // Ensure this imports your configuration\r\n//\r\n// // Validate environment setup\r\n// if (!config.API_URL) {\r\n//   console.error('API_URL is not configured. Please check your environment setup.');\r\n// }\r\n//\r\n// // Create a custom theme with MUI\r\n// const theme = createTheme({\r\n//   palette: {\r\n//     primary: {\r\n//       main: '#1976d2',\r\n//     },\r\n//     secondary: {\r\n//       main: '#dc004e',\r\n//     },\r\n//     background: {\r\n//       default: '#f4f6f8',\r\n//     },\r\n//   },\r\n//   typography: {\r\n//     fontFamily: 'Roboto, Arial, sans-serif',\r\n//     h1: {\r\n//       fontSize: '2.5rem',\r\n//       fontWeight: 700,\r\n//     },\r\n//     h2: {\r\n//       fontSize: '2rem',\r\n//       fontWeight: 600,\r\n//     },\r\n//     h3: {\r\n//       fontSize: '1.75rem',\r\n//       fontWeight: 500,\r\n//     },\r\n//     h4: {\r\n//       fontSize: '1.5rem',\r\n//       fontWeight: 500,\r\n//     },\r\n//     h5: {\r\n//       fontSize: '1.25rem',\r\n//       fontWeight: 400,\r\n//     },\r\n//     h6: {\r\n//       fontSize: '1rem',\r\n//       fontWeight: 400,\r\n//     },\r\n//     body1: {\r\n//       fontSize: '1rem',\r\n//       fontWeight: 400,\r\n//     },\r\n//     body2: {\r\n//       fontSize: '0.875rem',\r\n//       fontWeight: 400,\r\n//     },\r\n//   },\r\n//   components: {\r\n//     MuiButton: {\r\n//       styleOverrides: {\r\n//         root: {\r\n//           borderRadius: '8px',\r\n//           textTransform: 'none',\r\n//         },\r\n//       },\r\n//     },\r\n//     MuiPaper: {\r\n//       styleOverrides: {\r\n//         root: {\r\n//           padding: '16px',\r\n//           margin: '16px 0',\r\n//         },\r\n//       },\r\n//     },\r\n//   },\r\n// });\r\n//\r\n// const container = document.getElementById('root');\r\n// const root = createRoot(container);\r\n//\r\n// root.render(\r\n//   <StyledEngineProvider injectFirst>\r\n//     <ThemeProvider theme={theme}>\r\n//       <CssBaseline />\r\n//       <Provider store={store}> {/* Ensure store is correctly passed */}\r\n//         <App />\r\n//       </Provider>\r\n//     </ThemeProvider>\r\n//   </StyledEngineProvider>\r\n// );\r\n\r\n\r\n// import React from 'react';\r\n// import { createRoot } from 'react-dom/client';\r\n// import { CssBaseline } from '@mui/material';\r\n// import { ThemeProvider, createTheme } from '@mui/material/styles';\r\n// import { StyledEngineProvider } from '@mui/material/styles';\r\n// import { Provider } from 'react-redux';\r\n// import App from './App';\r\n// import store from './store'; // Ensure this points to your correctly configured store\r\n// import config from './config';\r\n//\r\n// // Validate environment setup\r\n// if (!config.API_URL) {\r\n//   console.error('API_URL is not configured. Please check your environment setup.');\r\n// }\r\n//\r\n// // Create a custom theme with MUI\r\n// const theme = createTheme({\r\n//   palette: {\r\n//     primary: {\r\n//       main: '#1976d2',\r\n//     },\r\n//     secondary: {\r\n//       main: '#dc004e',\r\n//     },\r\n//     background: {\r\n//       default: '#f4f6f8',\r\n//     },\r\n//   },\r\n//   typography: {\r\n//     fontFamily: 'Roboto, Arial, sans-serif',\r\n//     h1: {\r\n//       fontSize: '2.5rem',\r\n//       fontWeight: 700,\r\n//     },\r\n//     h2: {\r\n//       fontSize: '2rem',\r\n//       fontWeight: 600,\r\n//     },\r\n//     h3: {\r\n//       fontSize: '1.75rem',\r\n//       fontWeight: 500,\r\n//     },\r\n//     h4: {\r\n//       fontSize: '1.5rem',\r\n//       fontWeight: 500,\r\n//     },\r\n//     h5: {\r\n//       fontSize: '1.25rem',\r\n//       fontWeight: 400,\r\n//     },\r\n//     h6: {\r\n//       fontSize: '1rem',\r\n//       fontWeight: 400,\r\n//     },\r\n//     body1: {\r\n//       fontSize: '1rem',\r\n//       fontWeight: 400,\r\n//     },\r\n//     body2: {\r\n//       fontSize: '0.875rem',\r\n//       fontWeight: 400,\r\n//     },\r\n//   },\r\n//   components: {\r\n//     MuiButton: {\r\n//       styleOverrides: {\r\n//         root: {\r\n//           borderRadius: '8px',\r\n//           textTransform: 'none',\r\n//         },\r\n//       },\r\n//     },\r\n//     MuiPaper: {\r\n//       styleOverrides: {\r\n//         root: {\r\n//           padding: '16px',\r\n//           margin: '16px 0',\r\n//         },\r\n//       },\r\n//     },\r\n//   },\r\n// });\r\n//\r\n// const container = document.getElementById('root');\r\n// const root = createRoot(container);\r\n//\r\n// root.render(\r\n//   <StyledEngineProvider injectFirst>\r\n//     <ThemeProvider theme={theme}>\r\n//       <CssBaseline />\r\n//       <Provider store={store}> {/* Ensure store is correctly passed */}\r\n//         <App />\r\n//       </Provider>\r\n//     </ThemeProvider>\r\n//   </StyledEngineProvider>\r\n// );\r\n//\r\n//\r\n// // import React from 'react';\r\n// // import { createRoot } from 'react-dom/client';\r\n// // import { CssBaseline } from '@mui/material';\r\n// // import { ThemeProvider, createTheme } from '@mui/material/styles';\r\n// // import { StyledEngineProvider } from '@mui/material/styles';\r\n// // import App from './App';\r\n// //\r\n// // // Create a custom theme with MUI\r\n// // const theme = createTheme({\r\n// //   palette: {\r\n// //     primary: {\r\n// //       main: '#1976d2',\r\n// //     },\r\n// //     secondary: {\r\n// //       main: '#dc004e',\r\n// //     },\r\n// //     background: {\r\n// //       default: '#f4f6f8',\r\n// //     },\r\n// //   },\r\n// //   typography: {\r\n// //     fontFamily: 'Roboto, Arial, sans-serif',\r\n// //     h1: {\r\n// //       fontSize: '2.5rem',\r\n// //       fontWeight: 700,\r\n// //     },\r\n// //     h2: {\r\n// //       fontSize: '2rem',\r\n// //       fontWeight: 600,\r\n// //     },\r\n// //     h3: {\r\n// //       fontSize: '1.75rem',\r\n// //       fontWeight: 500,\r\n// //     },\r\n// //     h4: {\r\n// //       fontSize: '1.5rem',\r\n// //       fontWeight: 500,\r\n// //     },\r\n// //     h5: {\r\n// //       fontSize: '1.25rem',\r\n// //       fontWeight: 400,\r\n// //     },\r\n// //     h6: {\r\n// //       fontSize: '1rem',\r\n// //       fontWeight: 400,\r\n// //     },\r\n// //     body1: {\r\n// //       fontSize: '1rem',\r\n// //       fontWeight: 400,\r\n// //     },\r\n// //     body2: {\r\n// //       fontSize: '0.875rem',\r\n// //       fontWeight: 400,\r\n// //     },\r\n// //   },\r\n// //   components: {\r\n// //     MuiButton: {\r\n// //       styleOverrides: {\r\n// //         root: {\r\n// //           borderRadius: '8px',\r\n// //           textTransform: 'none',\r\n// //         },\r\n// //       },\r\n// //     },\r\n// //     MuiPaper: {\r\n// //       styleOverrides: {\r\n// //         root: {\r\n// //           padding: '16px',\r\n// //           margin: '16px 0',\r\n// //         },\r\n// //       },\r\n// //     },\r\n// //   },\r\n// // });\r\n// //\r\n// // const container = document.getElementById('root');\r\n// // const root = createRoot(container);\r\n// //\r\n// // root.render(\r\n// //   <StyledEngineProvider injectFirst>\r\n// //     <ThemeProvider theme={theme}>\r\n// //       <CssBaseline />\r\n// //       <App />\r\n// //     </ThemeProvider>\r\n// //   </StyledEngineProvider>\r\n// // );\r\n//\r\n//\r\n//\r\n//\r\n// // import React from 'react';\r\n// // import ReactDOM from 'react-dom';\r\n// // import { CssBaseline } from '@mui/material';\r\n// // import { ThemeProvider, createTheme } from '@mui/material/styles';\r\n// // import { StyledEngineProvider } from '@mui/material/styles';\r\n// // import App from './App';\r\n// // // import { logMessage } from './logging';\r\n// // // import { createCustomMetric, writeTimeSeriesData } from './monitoring';\r\n// //\r\n// // // Create a custom theme with MUI\r\n// // const theme = createTheme({\r\n// //   palette: {\r\n// //     primary: {\r\n// //       main: '#1976d2',\r\n// //     },\r\n// //     secondary: {\r\n// //       main: '#dc004e',\r\n// //     },\r\n// //     background: {\r\n// //       default: '#f4f6f8',\r\n// //     },\r\n// //   },\r\n// //   typography: {\r\n// //     fontFamily: 'Roboto, Arial, sans-serif',\r\n// //     h1: {\r\n// //       fontSize: '2.5rem',\r\n// //       fontWeight: 700,\r\n// //     },\r\n// //     h2: {\r\n// //       fontSize: '2rem',\r\n// //       fontWeight: 600,\r\n// //     },\r\n// //     h3: {\r\n// //       fontSize: '1.75rem',\r\n// //       fontWeight: 500,\r\n// //     },\r\n// //     h4: {\r\n// //       fontSize: '1.5rem',\r\n// //       fontWeight: 500,\r\n// //     },\r\n// //     h5: {\r\n// //       fontSize: '1.25rem',\r\n// //       fontWeight: 400,\r\n// //     },\r\n// //     h6: {\r\n// //       fontSize: '1rem',\r\n// //       fontWeight: 400,\r\n// //     },\r\n// //     body1: {\r\n// //       fontSize: '1rem',\r\n// //       fontWeight: 400,\r\n// //     },\r\n// //     body2: {\r\n// //       fontSize: '0.875rem',\r\n// //       fontWeight: 400,\r\n// //     },\r\n// //   },\r\n// //   components: {\r\n// //     MuiButton: {\r\n// //       styleOverrides: {\r\n// //         root: {\r\n// //           borderRadius: '8px',\r\n// //           textTransform: 'none',\r\n// //         },\r\n// //       },\r\n// //     },\r\n// //     MuiPaper: {\r\n// //       styleOverrides: {\r\n// //         root: {\r\n// //           padding: '16px',\r\n// //           margin: '16px 0',\r\n// //         },\r\n// //       },\r\n// //     },\r\n// //   },\r\n// // });\r\n// //\r\n// // ReactDOM.render(\r\n// //   <StyledEngineProvider injectFirst>\r\n// //     <ThemeProvider theme={theme}>\r\n// //       <CssBaseline />\r\n// //       <App />\r\n// //     </ThemeProvider>\r\n// //   </StyledEngineProvider>,\r\n// //   document.getElementById('root')\r\n// // );\r\n//\r\n// // // Log a message when the application starts\r\n// // logMessage('Application started');\r\n// //\r\n// // // Create a custom metric and write time series data\r\n// // createCustomMetric().then(() => {\r\n// //   writeTimeSeriesData();\r\n// // });\r\n//\r\n//\r\n//\r\n//\r\n// // import React from 'react';\r\n// // import ReactDOM from 'react-dom';\r\n// // import { CssBaseline } from '@mui/material';\r\n// // import { ThemeProvider, createTheme } from '@mui/material/styles';\r\n// // import { StyledEngineProvider } from '@mui/material/styles';\r\n// // import App from './App';\r\n// // import { logMessage } from './logging';\r\n// // import { createCustomMetric, writeTimeSeriesData } from './monitoring';\r\n// //\r\n// // // Create a custom theme with MUI\r\n// // const theme = createTheme({\r\n// //   palette: {\r\n// //     primary: {\r\n// //       main: '#1976d2',\r\n// //     },\r\n// //     secondary: {\r\n// //       main: '#dc004e',\r\n// //     },\r\n// //     background: {\r\n// //       default: '#f4f6f8',\r\n// //     },\r\n// //   },\r\n// //   typography: {\r\n// //     fontFamily: 'Roboto, Arial, sans-serif',\r\n// //     h1: {\r\n// //       fontSize: '2.5rem',\r\n// //       fontWeight: 700,\r\n// //     },\r\n// //     h2: {\r\n// //       fontSize: '2rem',\r\n// //       fontWeight: 600,\r\n// //     },\r\n// //     h3: {\r\n// //       fontSize: '1.75rem',\r\n// //       fontWeight: 500,\r\n// //     },\r\n// //     h4: {\r\n// //       fontSize: '1.5rem',\r\n// //       fontWeight: 500,\r\n// //     },\r\n// //     h5: {\r\n// //       fontSize: '1.25rem',\r\n// //       fontWeight: 400,\r\n// //     },\r\n// //     h6: {\r\n// //       fontSize: '1rem',\r\n// //       fontWeight: 400,\r\n// //     },\r\n// //     body1: {\r\n// //       fontSize: '1rem',\r\n// //       fontWeight: 400,\r\n// //     },\r\n// //     body2: {\r\n// //       fontSize: '0.875rem',\r\n// //       fontWeight: 400,\r\n// //     },\r\n// //   },\r\n// //   components: {\r\n// //     MuiButton: {\r\n// //       styleOverrides: {\r\n// //         root: {\r\n// //           borderRadius: '8px',\r\n// //           textTransform: 'none',\r\n// //         },\r\n// //       },\r\n// //     },\r\n// //     MuiPaper: {\r\n// //       styleOverrides: {\r\n// //         root: {\r\n// //           padding: '16px',\r\n// //           margin: '16px 0',\r\n// //         },\r\n// //       },\r\n// //     },\r\n// //   },\r\n// // });\r\n// //\r\n// // ReactDOM.render(\r\n// //   <StyledEngineProvider injectFirst>\r\n// //     <ThemeProvider theme={theme}>\r\n// //       <CssBaseline />\r\n// //       <App />\r\n// //     </ThemeProvider>\r\n// //   </StyledEngineProvider>,\r\n// //   document.getElementById('root')\r\n// // );\r\n// //\r\n// // // Log a message when the application starts\r\n// // logMessage('Application started');\r\n// //\r\n// // // Create a custom metric and write time series data\r\n// // createCustomMetric().then(() => {\r\n// //   writeTimeSeriesData();\r\n// // });"],"names":["createTheme","palette","primary","main","light","dark","contrastText","secondary","background","default","paper","text","typography","fontFamily","h1","fontSize","fontWeight","lineHeight","h2","h3","h4","h5","h6","subtitle1","subtitle2","body1","body2","button","textTransform","shape","borderRadius","shadows","components","MuiButton","styleOverrides","root","padding","transition","contained","boxShadow","MuiPaper","MuiAppBar","backgroundColor","MuiDrawer","HeaderContext","createContext","undefined","HeaderProvider","_ref","children","searchOpen","setSearchOpen","useState","mobileMenuOpen","setMobileMenuOpen","activeMenu","setActiveMenu","isScrolled","setIsScrolled","location","useLocation","closeAllMenus","useCallback","useEffect","handleScroll","window","scrollY","addEventListener","passive","removeEventListener","toggleSearch","prev","toggleMobileMenu","value","React","Provider","useHeaderContext","context","useContext","Error","FooterContext","FooterProvider","newsletterEmail","setNewsletterEmail","isSubscribing","setIsSubscribing","subscriptionStatus","setSubscriptionStatus","handleNewsletterSubmit","async","Promise","resolve","setTimeout","error","key","process","concat","getEnvironmentVariable","forEach","constructor","this","api","axios","create","baseURL","headers","login","email","password","response","post","data","token","localStorage","setItem","setAuthHeader","handleError","register","userData","logout","removeItem","removeAuthHeader","getCurrentUser","get","refreshToken","resetPassword","defaults","common","status","message","createAsyncThunk","_ref2","rejectWithValue","authService","_error$response","_","_ref3","_error$response2","initialState","user","getItem","isAuthenticated","loading","authSlice","createSlice","name","reducers","clearError","state","setUser","action","payload","extraReducers","builder","addCase","pending","fulfilled","rejected","actions","sidebarOpen","darkMode","activeModal","notifications","uiSlice","toggleSidebar","toggleDarkMode","setLoading","setActiveModal","addNotification","push","removeNotification","filter","notification","id","interceptors","request","use","config","Authorization","analyzeContent","content","getThreatReport","getSecurityMetrics","updateSecuritySettings","settings","put","analyzeThreat","securityService","securitySlice","threats","analyzing","securityLevel","lastAnalysis","setSecurityLevel","clearThreats","Date","toISOString","notificationId","notificationSlice","position","duration","maxVisible","_objectSpread","timestamp","now","length","shift","clearAllNotifications","updateNotificationSettings","mode","customizations","primaryColor","secondaryColor","responsive","isMobile","isTablet","isDesktop","themeSlice","toggleThemeMode","updateCustomizations","setResponsive","resetTheme","rootReducer","auth","authReducer","ui","uiReducer","security","securityReducer","notificationReducer","theme","store","configureStore","reducer","middleware","getDefaultMiddleware","serializableCheck","ignoredActions","ignoredActionPaths","ignoredPaths","devTools","preloadedState","getState","dispatch","headerStyles","headerScrolled","alpha","backdropFilter","container","display","alignItems","justifyContent","height","spacing","logo","textDecoration","color","gap","nav","navButton","px","py","navButtonActive","actionIcon","loginButton","border","borderColor","ctaButton","searchModal","top","left","right","bottom","zIndex","mobileMenu","width","maxWidth","borderLeft","boxSizing","mobileMenuButton","dropdownPaper","mt","overflow","dropdownItem","textAlign","iconWrapper","marginRight","Logo","publicUrl","PUBLIC_URL","Box","component","RouterLink","to","sx","src","alt","style","Typography","variant","xs","sm","navigationItems","home","label","items","title","description","icon","HomeIcon","path","products","Security","solutions","Business","Build","MonetizationOn","resources","School","Help","Storefront","NavigationMenu","anchorEl","setAnchorEl","timeoutRef","useRef","current","clearTimeout","hasSubmenu","section","handleMouseLeave","handleMenuClose","handleClick","event","menuKey","currentTarget","ClickAwayListener","onClickAway","handleClickAway","Object","entries","map","submenuExists","onMouseEnter","e","handleMouseEnter","onMouseLeave","Button","endIcon","KeyboardArrowDownIcon","onClick","onKeyDown","handleKeyDown","preventDefault","Menu","open","onClose","MenuListProps","anchorOrigin","vertical","horizontal","transformOrigin","disableAutoFocusItem","Grid","item","md","motion","div","initial","opacity","y","animate","delay","MenuItem","comingSoon","Badge","badgeContent","ml","onSearchClick","onMobileMenuClick","Tooltip","IconButton","SearchIcon","AccountCircleIcon","Drawer","anchor","PaperProps","p","CloseIcon","Divider","List","ListItem","ListItemText","primaryTypographyProps","index","x","ListItemIcon","my","fullWidth","mb","searchResults","ArticleIcon","CodeIcon","SecurityIcon","searchInputRef","focus","AnimatePresence","Dialog","fullScreen","exit","mr","InputBase","ref","placeholder","DialogContent","result","fadeInVariants","hidden","visible","Header","headerRef","useTheme","useMediaQuery","breakpoints","down","isVisible","useHeader","setIsVisible","lastScroll","currentScroll","pageYOffset","isIntersecting","setIntersecting","observer","IntersectionObserver","entry","threshold","rootMargin","observe","unobserve","useHeaderVisibility","useKeyboardNavigation","navigate","useNavigate","metaKey","ctrlKey","toLowerCase","variants","AppBar","elevation","Container","ActionsMenu","edge","MenuIcon","SearchModal","MobileMenu","FooterNewsletter","formData","setFormData","isSubmitting","setIsSubmitting","snackbar","setSnackbar","severity","formspreeEndpoint","REACT_APP_FORMSPREE_ENDPOINT","handleSnackbarClose","onSubmit","test","validateEmail","fetch","method","Accept","body","JSON","stringify","ok","json","flexDirection","noValidate","gutterBottom","TextField","size","type","onChange","target","required","whileHover","scale","whileTap","disabled","Snackbar","autoHideDuration","Alert","socialLinks","GitHub","url","Twitter","LinkedIn","YouTube","FooterSocialLinks","social","href","rel","links","listStyle","m","link","stiffness","MuiLink","footerStyles","bgcolor","backgroundGradient","scrollToTop","transform","scrollButton","bottomBar","legalLinks","flexWrap","legalLink","footerSections","ModernFooter","scrollTo","behavior","KeyboardArrowUp","img","paragraph","FooterNavLinks","getFullYear","underline","ease","damping","restDelta","CircularProgress","thickness","isLoading","useAuth","Navigate","from","replace","routes","lazy","protected","PrivacyPolicy","CookiePolicy","TermsOfService","NotFound","Guides","Documentation","Status","Careers","Contact","Marketplace","ImplementationGuide","OnPremisesDeployment","PricingSection","ComingSoon","FeatureSection","Partners","About","SignIn","AppRoutes","Suspense","fallback","LoadingScreen","Routes","route","Component","Route","element","ProtectedRoute","App","Helmet","sizes","property","Footer","ScrollToTop","pathname","document","getElementById","createRoot","render","HelmetProvider","StyledEngineProvider","injectFirst","ThemeProvider","Router","CssBaseline"],"sourceRoot":""}