admin/Frontend-Multi-Tenant-ODOO-MCP
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix navbar links not scrolling to sections

Browse Source 
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>
This commit is contained in:
MOHAN 2026-07-02 00:16:55 +05:30
parent 5b4834e6a5
commit 0444ef09aa
3 changed files with 28 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/landing/Navbar.tsx
View File

@ -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>

6
src/index.css
View File

@ -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;

16
src/pages/Landing.tsx
View File

@ -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>