refactor: update navigation and section IDs with smoother scroll behavior

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

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

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>

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

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