From 5f10b1bba3e7496a40910d9deb9e568fdbb988cd Mon Sep 17 00:00:00 2001
From: Pragati more <pragatimore543@gmail.com>
Date: Sat, 30 May 2026 14:15:27 +0530
Subject: [PATCH] Add smooth section scroll navigation

---
 src/components/Hero.tsx   |  2 +-
 src/components/Navbar.tsx | 44 +++++++++++++++++++++++++++++----------
 src/index.css             |  7 +++++++
 3 files changed, 41 insertions(+), 12 deletions(-)

diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
index a606d777..38572c54 100644
--- a/src/components/Hero.tsx
+++ b/src/components/Hero.tsx
@@ -6,7 +6,7 @@ const MATRIX_CELLS = Array.from({ length: 21 }, (_, i) => i);
 
 const Hero = () => {
   return (
-    <section className="relative overflow-hidden bg-slate-50 dark:bg-[#030712] text-slate-900 dark:text-white px-6 py-20 lg:py-32 min-h-[90vh] flex items-center transition-colors duration-500">
+    <section id="home" className="relative overflow-hidden bg-slate-50 dark:bg-[#030712] text-slate-900 dark:text-white px-6 py-20 lg:py-32 min-h-[90vh] flex items-center transition-colors duration-500">
       
       {/* 1. Cyber Grid Overlay */}
       <div className="absolute inset-0 bg-[linear-gradient(to_right,#e2e8f0_1px,transparent_1px),linear-gradient(to_bottom,#e2e8f0_1px,transparent_1px)] dark:bg-[linear-gradient(to_right,#1f293710_1px,transparent_1px),linear-gradient(to_bottom,#1f293710_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)] pointer-events-none" />
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index fd5eac86..5bb2117b 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -41,10 +41,16 @@ const Navbar: React.FC = () => {
 
         {/* Desktop Navigation */}
         <div className="hidden md:flex items-center gap-3">
-          <NavLink to="/" className={navLinkStyles}>
-            Home
-          </NavLink>
-
+          <a href="#home" className="px-4 py-2 rounded-xl text-sm lg:text-base font-semibold transition-all duration-300 text-slate-700 dark:text-gray-300 hover:text-blue-500">
+  Home
+</a>
+<a href="/#features" className="px-4 py-2 rounded-xl text-sm lg:text-base font-semibold transition-all duration-300 text-slate-700 dark:text-gray-300 hover:text-blue-500">
+  Features
+</a>
+
+<a href="/#how-it-works" className="px-4 py-2 rounded-xl text-sm lg:text-base font-semibold transition-all duration-300 text-slate-700 dark:text-gray-300 hover:text-blue-500">
+  How It Works
+</a>
           <NavLink to="/track" className={navLinkStyles}>
             Tracker
           </NavLink>
@@ -107,13 +113,29 @@ const Navbar: React.FC = () => {
         <div className="md:hidden border-t border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900">
           <div className="px-6 py-5 flex flex-col gap-3">
 
-            <NavLink
-              to="/"
-              className={navLinkStyles}
-              onClick={closeMenu}
-            >
-              Home
-            </NavLink>
+            <a
+  href="#home"
+  className="px-4 py-2 rounded-xl text-sm lg:text-base font-semibold transition-all duration-300 text-slate-700 dark:text-gray-300 hover:text-blue-500"
+  onClick={closeMenu}
+>
+  Home
+</a>
+
+<a
+  href="/#features"
+  className="px-4 py-2 rounded-xl text-sm lg:text-base font-semibold transition-all duration-300 text-slate-700 dark:text-gray-300 hover:text-blue-500"
+  onClick={closeMenu}
+>
+  Features
+</a>
+
+<a
+  href="/#how-it-works"
+  className="px-4 py-2 rounded-xl text-sm lg:text-base font-semibold transition-all duration-300 text-slate-700 dark:text-gray-300 hover:text-blue-500"
+  onClick={closeMenu}
+>
+  How It Works
+</a>
 
             <NavLink
               to="/track"
diff --git a/src/index.css b/src/index.css
index 3f5943c5..a00a9ed3 100644
--- a/src/index.css
+++ b/src/index.css
@@ -89,3 +89,10 @@
 .icon-issue-closed {
   color: #cf222e;
 }
+html {
+  scroll-behavior: smooth;
+}
+
+section {
+  scroll-margin-top: 90px;
+}
\ No newline at end of file