From 0444ef09aa186a963e20586df67f07aa49614576 Mon Sep 17 00:00:00 2001
From: MOHAN <mohan326856@gmail.com>
Date: Thu, 2 Jul 2026 00:16:55 +0530
Subject: [PATCH] Fix navbar links not scrolling to sections

react-router-dom's Link intercepts hash-only navigation for client-side
routing and never triggers the browser's native scroll-to-anchor behavior.
Also half the nav items (Use Cases, Docs, Security) pointed at section ids
that were never built. Switched hash links to plain anchor tags (real
same-page scrolling), added a real #contact target in the footer, and
trimmed the nav/footer to only link sections that actually exist.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 src/components/landing/Navbar.tsx | 19 +++++++++++++------
 src/index.css                     |  6 ++++++
 src/pages/Landing.tsx             | 16 +++++++++-------
 3 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/src/components/landing/Navbar.tsx b/src/components/landing/Navbar.tsx
index 5bdd115..81f636e 100644
--- a/src/components/landing/Navbar.tsx
+++ b/src/components/landing/Navbar.tsx
@@ -2,6 +2,13 @@ import { Link } from 'react-router-dom';
 import { useState } from 'react';
 import { Menu, X } from 'lucide-react';
 
+const SECTIONS = [
+  { label: 'Features', hash: 'features' },
+  { label: 'How It Works', hash: 'how-it-works' },
+  { label: 'Pricing', hash: 'pricing' },
+  { label: 'Contact', hash: 'contact' },
+];
+
 export default function Navbar() {
   const [open, setOpen] = useState(false);
   return (
@@ -18,9 +25,9 @@ export default function Navbar() {
 
           {/* Desktop nav */}
           <div className="hidden md:flex items-center gap-6 text-sm text-gray-600">
-            {['Features', 'Use Cases', 'Pricing', 'Docs', 'Security', 'Contact'].map((item) => (
-              <Link key={item} to={`#${item.toLowerCase().replace(' ', '-')}`}
-                className="hover:text-gray-900 transition-colors">{item}</Link>
+            {SECTIONS.map(({ label, hash }) => (
+              <a key={hash} href={`#${hash}`}
+                className="hover:text-gray-900 transition-colors">{label}</a>
             ))}
           </div>
 
@@ -42,9 +49,9 @@ export default function Navbar() {
       </div>
       {open && (
         <div className="md:hidden border-t border-gray-100 bg-white px-4 py-4 space-y-3">
-          {['Features', 'Use Cases', 'Pricing', 'Docs', 'Security', 'Contact'].map((item) => (
-            <Link key={item} to={`#${item.toLowerCase()}`}
-              className="block text-sm text-gray-700 py-1" onClick={() => setOpen(false)}>{item}</Link>
+          {SECTIONS.map(({ label, hash }) => (
+            <a key={hash} href={`#${hash}`}
+              className="block text-sm text-gray-700 py-1" onClick={() => setOpen(false)}>{label}</a>
           ))}
           <hr className="border-gray-100" />
           <Link to="/login" className="block text-sm text-gray-700 py-1">Log in</Link>
diff --git a/src/index.css b/src/index.css
index 9f1b022..c8107ec 100644
--- a/src/index.css
+++ b/src/index.css
@@ -2,6 +2,12 @@
 @tailwind components;
 @tailwind utilities;
 
+html {
+  scroll-behavior: smooth;
+  /* offset for the fixed navbar (h-16 = 4rem) so anchor targets aren't hidden underneath it */
+  scroll-padding-top: 4rem;
+}
+
 @layer base {
   body {
     @apply bg-white text-gray-900 antialiased;
diff --git a/src/pages/Landing.tsx b/src/pages/Landing.tsx
index 98ce336..d1b8023 100644
--- a/src/pages/Landing.tsx
+++ b/src/pages/Landing.tsx
@@ -33,7 +33,7 @@ export default function Landing() {
         </section>
 
         {/* Footer */}
-        <footer className="bg-gray-900 text-gray-400 py-12">
+        <footer id="contact" className="bg-gray-900 text-gray-400 py-12">
           <div className="max-w-7xl mx-auto px-4 flex flex-col sm:flex-row justify-between gap-6 text-xs">
             <div>
               <div className="flex items-center gap-2 mb-2">
@@ -41,19 +41,21 @@ export default function Landing() {
                 <span className="text-white font-semibold text-sm">OdooMCP Cloud</span>
               </div>
               <p>Secure MCP Server for Odoo ERP</p>
+              <p className="mt-3">
+                <a href="mailto:hello@odoomcp.cloud" className="hover:text-white transition-colors">
+                  hello@odoomcp.cloud
+                </a>
+              </p>
             </div>
             <div className="flex gap-12">
               <div className="space-y-2">
                 <p className="text-white font-medium">Product</p>
-                {['Features', 'Pricing', 'Security', 'Docs'].map((l) => (
-                  <p key={l}><a href="#" className="hover:text-white transition-colors">{l}</a></p>
-                ))}
+                <p><a href="#features" className="hover:text-white transition-colors">Features</a></p>
+                <p><a href="#pricing" className="hover:text-white transition-colors">Pricing</a></p>
               </div>
               <div className="space-y-2">
                 <p className="text-white font-medium">Company</p>
-                {['About', 'Blog', 'Contact', 'Privacy'].map((l) => (
-                  <p key={l}><a href="#" className="hover:text-white transition-colors">{l}</a></p>
-                ))}
+                <p><a href="#contact" className="hover:text-white transition-colors">Contact</a></p>
               </div>
             </div>
           </div>