From 6e9360fabf1645736aa0f93a2b7260c6cab2eb96 Mon Sep 17 00:00:00 2001
From: sasha-astiadi <sasha@incubaid.com>
Date: Tue, 14 Oct 2025 12:56:44 +0200
Subject: [PATCH] refactor: update navigation and section IDs with smoother
 scroll behavior

---
 src/components/AnimatedSection.tsx   |  2 +-
 src/components/Benefits.tsx          |  2 +-
 src/components/NavLinks.tsx          | 14 +++++++++++---
 src/components/PrimaryFeatures.tsx   |  2 +-
 src/components/SecondaryFeatures.tsx |  2 +-
 5 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/components/AnimatedSection.tsx b/src/components/AnimatedSection.tsx
index a1402e0..ceb4684 100644
--- a/src/components/AnimatedSection.tsx
+++ b/src/components/AnimatedSection.tsx
@@ -5,7 +5,7 @@ import { motion, useInView } from 'framer-motion'
 
 export function AnimatedSection({ children }: { children: React.ReactNode }) {
   const ref = useRef(null)
-  const isInView = useInView(ref, { once: false, margin: '-50% 0px -50% 0px' })
+  const isInView = useInView(ref, { once: true, margin: '-20% 0px -20% 0px' })
 
   return (
     <motion.section
diff --git a/src/components/Benefits.tsx b/src/components/Benefits.tsx
index 19877b5..4e51b94 100644
--- a/src/components/Benefits.tsx
+++ b/src/components/Benefits.tsx
@@ -28,7 +28,7 @@ const features = [
 
 export function Benefits() {
   return (
-    <section id="benefits" className="bg-white py-24 sm:py-32 dark:bg-gray-900">
+    <section id="howitworks" className="bg-white py-24 sm:py-32 dark:bg-gray-900">
       <div className="mx-auto max-w-7xl px-6 lg:px-8">
         <div className="mx-auto max-w-5xl lg:mx-0">
           <h2 className="text-3xl font-medium tracking-tight text-gray-900">
diff --git a/src/components/NavLinks.tsx b/src/components/NavLinks.tsx
index d89909e..d4c9f76 100644
--- a/src/components/NavLinks.tsx
+++ b/src/components/NavLinks.tsx
@@ -10,9 +10,9 @@ export function NavLinks() {
 
   return [
     ['About', '/#about'],
-    ['Benefits', '/#benefits'],
     ['Features', '/#features'],
-    ['Use Cases', '/#usecases'],
+    ['How it Works', '/#howitworks'],
+    ['Coming Soon', '/#comingsoon'],
     ['FAQs', '/#faqs'],
   ].map(([label, href], index) => (
     <Link
@@ -28,7 +28,15 @@ export function NavLinks() {
       onMouseLeave={() => {
         timeoutRef.current = window.setTimeout(() => {
           setHoveredIndex(null)
-        }, 200)
+        }, 50)
+      }}
+      onClick={(e) => {
+        e.preventDefault()
+        const targetId = href.substring(2)
+        const targetElement = document.getElementById(targetId)
+        if (targetElement) {
+          targetElement.scrollIntoView({ behavior: 'smooth' })
+        }
       }}
     >
       <AnimatePresence>
diff --git a/src/components/PrimaryFeatures.tsx b/src/components/PrimaryFeatures.tsx
index d34033e..ff7c51a 100644
--- a/src/components/PrimaryFeatures.tsx
+++ b/src/components/PrimaryFeatures.tsx
@@ -570,7 +570,7 @@ function FeaturesMobile() {
 export function PrimaryFeatures() {
   return (
     <section
-      id="features"
+      id="howitworks"
       aria-label="Features for investing all your money"
       className="bg-gray-900 py-20 sm:py-32"
     >
diff --git a/src/components/SecondaryFeatures.tsx b/src/components/SecondaryFeatures.tsx
index dbfdfbb..2c31ed9 100644
--- a/src/components/SecondaryFeatures.tsx
+++ b/src/components/SecondaryFeatures.tsx
@@ -189,7 +189,7 @@ function DeviceChartIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
 export function SecondaryFeatures() {
   return (
     <section
-      id="secondary-features"
+      id="comingsoon"
       aria-label="Features for building a portfolio"
       className="py-20 sm:py-32"
     >