updates

Frontend/src/components/layout/Header.tsx

@@ -15,6 +15,7 @@ import {
 } from 'lucide-react';
 import { useClickOutside } from '../../hooks/useClickOutside';
 import { useCompanySettings } from '../../contexts/CompanySettingsContext';
+import { useAuthModal } from '../../contexts/AuthModalContext';
 import { normalizeImageUrl } from '../../utils/imageUtils';
 
 interface HeaderProps {
@@ -34,6 +35,7 @@ const Header: React.FC<HeaderProps> = ({
   onLogout 
 }) => {
   const { settings } = useCompanySettings();
+  const { openModal } = useAuthModal();
 
   
   const displayPhone = settings.company_phone || '+1 (234) 567-890';
@@ -174,8 +176,8 @@ const Header: React.FC<HeaderProps> = ({
           >
             {!isAuthenticated ? (
               <>
-                <Link 
-                  to="/login"
+                <button
+                  onClick={() => openModal('login')}
                   className="flex items-center space-x-2 
                     px-5 py-2 text-white/90 
                     hover:text-[#d4af37] transition-all duration-300 
@@ -184,9 +186,9 @@ const Header: React.FC<HeaderProps> = ({
                   <LogIn className="w-4 h-4 relative z-10" />
                   <span className="relative z-10">Login</span>
                   <span className="absolute inset-0 border border-[#d4af37]/30 rounded-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
-                </Link>
-                <Link 
-                  to="/register"
+                </button>
+                <button
+                  onClick={() => openModal('register')}
                   className="flex items-center space-x-2 
                     px-6 py-2.5 bg-gradient-to-r from-[#d4af37] to-[#c9a227] 
                     text-[#0f0f0f] rounded-sm hover:from-[#f5d76e] 
@@ -197,7 +199,7 @@ const Header: React.FC<HeaderProps> = ({
                   <span className="absolute inset-0 bg-gradient-to-r from-white/0 via-white/20 to-white/0 translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-700"></span>
                   <UserPlus className="w-4 h-4 relative z-10" />
                   <span className="relative z-10">Register</span>
-                </Link>
+                </button>
               </>
             ) : (
               <div className="relative" ref={userMenuRef}>
@@ -402,37 +404,37 @@ const Header: React.FC<HeaderProps> = ({
               >
                 {!isAuthenticated ? (
                   <>
-                    <Link 
-                      to="/login"
-                      onClick={() => 
-                        setIsMobileMenuOpen(false)
-                      }
+                    <button
+                      onClick={() => {
+                        setIsMobileMenuOpen(false);
+                        openModal('login');
+                      }}
                       className="flex items-center 
                         space-x-2 px-4 py-3 text-white/90 
                         hover:bg-[#d4af37]/10 hover:text-[#d4af37] 
                         rounded-sm transition-all duration-300 
                         border-l-2 border-transparent 
-                        hover:border-[#d4af37] font-light tracking-wide"
+                        hover:border-[#d4af37] font-light tracking-wide w-full text-left"
                     >
                       <LogIn className="w-4 h-4" />
                       <span>Login</span>
-                    </Link>
-                    <Link 
-                      to="/register"
-                      onClick={() => 
-                        setIsMobileMenuOpen(false)
-                      }
+                    </button>
+                    <button
+                      onClick={() => {
+                        setIsMobileMenuOpen(false);
+                        openModal('register');
+                      }}
                       className="flex items-center 
                         space-x-2 px-4 py-3 bg-gradient-to-r 
                         from-[#d4af37] to-[#c9a227] text-[#0f0f0f] 
                         rounded-sm hover:from-[#f5d76e] 
                         hover:to-[#d4af37] transition-all 
                         duration-300 font-medium tracking-wide 
-                        mt-2"
+                        mt-2 w-full text-left"
                     >
                       <UserPlus className="w-4 h-4" />
                       <span>Register</span>
-                    </Link>
+                    </button>
                   </>
                 ) : (
                   <>