Fix jarring scroll with linear constant-speed motion

- Replace easeInOutSine with linear easing (return t)
- Reduce duration from 1200ms to 800ms for snappier feel
- Update all component references to use new duration

Linear easing provides constant-speed scrolling without any
acceleration or deceleration, eliminating the jarring effect.

apps/website/components/AppNavbar.vue

@@ -65,11 +65,11 @@ const handleSmoothScroll = (event: Event, href: string) => {
   }
 
   event.preventDefault()
-  scrollToElement(href, 1200) // Smooth scrolling with sine easing
+  scrollToElement(href, 800) // Constant-speed smooth scrolling
 }
 
 const scrollToTop = () => {
-  smoothScrollToTop(1200) // Smooth scrolling with sine easing
+  smoothScrollToTop(800) // Constant-speed smooth scrolling
 }
 
 onMounted(() => {

apps/website/components/HeroSection.vue

@@ -101,11 +101,11 @@ const handlePhoneClick = () => {
 }
 
 const handleServicesClick = () => {
-  scrollToElement('#services', 1200) // Smooth scrolling with sine easing
+  scrollToElement('#services', 800) // Constant-speed smooth scrolling
 }
 
 const handleScrollToExplore = () => {
-  scrollToElement('#services', 1200) // Smooth scroll to services section
+  scrollToElement('#services', 800) // Constant-speed scroll to services
 }
 
 const handleVideoVisibility = () => {
@@ -136,7 +136,7 @@ const initSmoothScroll = () => {
       if (!href) {
         return
       }
-      scrollToElement(href, 1200) // Smooth scrolling with sine easing
+      scrollToElement(href, 800) // Constant-speed smooth scrolling
     })
   })
 }

apps/website/composables/useSmoothScroll.ts

@@ -13,12 +13,12 @@ export const useSmoothScroll = () => {
     window.removeEventListener('keydown', cancelScroll)
   }
 
-  // Smooth sine-based easing function for natural motion
+  // Linear easing for constant-speed scrolling
-  const easeInOutSine = (t: number): number => {
+  const easeLinear = (t: number): number => {
-    return -(Math.cos(Math.PI * t) - 1) / 2
+    return t
   }
 
-  const smoothScrollTo = (target: number | Element, duration: number = 1200) => {
+  const smoothScrollTo = (target: number | Element, duration: number = 800) => {
     // Check for reduced motion preference
     const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
 
@@ -43,7 +43,7 @@ export const useSmoothScroll = () => {
       if (startTime === null) startTime = currentTime
       const timeElapsed = currentTime - startTime
       const progress = Math.min(timeElapsed / duration, 1)
-      const easedProgress = easeInOutSine(progress)
+      const easedProgress = easeLinear(progress)
 
       window.scrollTo(0, startPosition + distance * easedProgress)
 
@@ -62,14 +62,14 @@ export const useSmoothScroll = () => {
     animationFrameId = requestAnimationFrame(animation)
   }
 
-  const scrollToElement = (selector: string, duration: number = 1200) => {
+  const scrollToElement = (selector: string, duration: number = 800) => {
     const element = document.querySelector(selector)
     if (element) {
       smoothScrollTo(element, duration)
     }
   }
 
-  const scrollToTop = (duration: number = 1200) => {
+  const scrollToTop = (duration: number = 800) => {
     smoothScrollTo(0, duration)
   }