Fertig

src/components/Navigation.tsx

@@ -1,9 +1,33 @@
 import { useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Menu, X, Phone } from "lucide-react";
+import { useLocation, useNavigate } from "react-router-dom";
 
 const Navigation = () => {
   const [isOpen, setIsOpen] = useState(false);
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  const handleContactClick = (e: React.MouseEvent) => {
+    e.preventDefault();
+    // If we're already on the home page, just scroll to contact section
+    if (location.pathname === '/') {
+      const contactSection = document.getElementById('contact');
+      if (contactSection) {
+        contactSection.scrollIntoView({ behavior: 'smooth' });
+      }
+    } else {
+      // Navigate to home page and then scroll to contact section
+      navigate('/');
+      // Use setTimeout to ensure the page has loaded before scrolling
+      setTimeout(() => {
+        const contactSection = document.getElementById('contact');
+        if (contactSection) {
+          contactSection.scrollIntoView({ behavior: 'smooth' });
+        }
+      }, 100);
+    }
+  };
 
   const navItems = [
     { name: "Home", href: "/" },
@@ -31,6 +55,7 @@ const Navigation = () => {
                 <a
                   key={item.name}
                   href={item.href}
+                  onClick={item.name === 'Contact' ? handleContactClick : undefined}
                   className="text-muted-foreground hover:text-primary transition-colors duration-200 font-medium"
                 >
                   {item.name}
@@ -41,7 +66,7 @@ const Navigation = () => {
 
           {/* CTA Button */}
           <div className="hidden md:block">
-            <Button className="btn-orange-glow">
+            <Button onClick={handleContactClick} className="btn-orange-glow">
               <Phone className="w-4 h-4 mr-2" />
               Emergency Support
             </Button>
@@ -69,13 +94,13 @@ const Navigation = () => {
                   key={item.name}
                   href={item.href}
                   className="block px-3 py-2 text-muted-foreground hover:text-primary transition-colors duration-200"
-                  onClick={() => setIsOpen(false)}
+                  onClick={item.name === 'Contact' ? (e) => { handleContactClick(e); setIsOpen(false); } : () => setIsOpen(false)}
                 >
                   {item.name}
                 </a>
               ))}
               <div className="pt-2">
-                <Button className="btn-orange-glow w-full">
+                <Button onClick={(e) => { handleContactClick(e); setIsOpen(false); }} className="btn-orange-glow w-full">
                   <Phone className="w-4 h-4 mr-2" />
                   Emergency Support
                 </Button>