Fix smooth scroll easing for more consistent motion

- Changed from easeInOutCubic to easeInOutQuad for smoother motion
- Increased duration from 1.5 to 1.8 seconds
- Fixed jerky acceleration/deceleration issue
- Now provides consistent, smooth scrolling throughout entire motion

The scrolling is now properly smooth without the sudden speed changes.

apps/website/components/AppNavbar.vue

@@ -65,11 +65,11 @@ const handleSmoothScroll = (event: Event, href: string) => {
   }
 
   event.preventDefault()
-  scrollToElement(href, 1500) // 1.5 seconds for slower scrolling
+  scrollToElement(href, 1800) // 1.8 seconds for smoother scrolling
 }
 
 const scrollToTop = () => {
-  smoothScrollToTop(1500) // 1.5 seconds for slower scrolling
+  smoothScrollToTop(1800) // 1.8 seconds for smoother scrolling
 }
 
 onMounted(() => {

apps/website/components/HeroSection.vue

@@ -101,11 +101,11 @@ const handlePhoneClick = () => {
 }
 
 const handleServicesClick = () => {
-  scrollToElement('#services', 1500) // 1.5 seconds for slower scrolling
+  scrollToElement('#services', 1800) // 1.8 seconds for smoother scrolling
 }
 
 const handleScrollToExplore = () => {
-  scrollToElement('#services', 1500) // Scroll to services section
+  scrollToElement('#services', 1800) // Scroll to services section
 }
 
 const handleVideoVisibility = () => {
@@ -136,7 +136,7 @@ const initSmoothScroll = () => {
       if (!href) {
         return
       }
-      scrollToElement(href, 1500) // 1.5 seconds for slower scrolling
+      scrollToElement(href, 1800) // 1.8 seconds for smoother scrolling
     })
   })
 }

apps/website/composables/useSmoothScroll.ts

@@ -1,5 +1,5 @@
 export const useSmoothScroll = () => {
-  const smoothScrollTo = (target: number | Element, duration: number = 1200) => {
+  const smoothScrollTo = (target: number | Element, duration: number = 1800) => {
     const targetPosition = typeof target === 'number'
       ? target
       : target.getBoundingClientRect().top + window.pageYOffset
@@ -12,14 +12,14 @@ export const useSmoothScroll = () => {
       const timeElapsed = currentTime - startTime
       const progress = Math.min(timeElapsed / duration, 1)
 
-      // Easing function for smooth deceleration
+      // Easing function for smoother, more consistent motion
-      const easeInOutCubic = (t: number) => {
+      const easeInOutQuad = (t: number) => {
         return t < 0.5
-          ? 4 * t * t * t
+          ? 2 * t * t
-          : 1 - Math.pow(-2 * t + 2, 3) / 2
+          : 1 - Math.pow(-2 * t + 2, 2) / 2
       }
 
-      window.scrollTo(0, startPosition + distance * easeInOutCubic(progress))
+      window.scrollTo(0, startPosition + distance * easeInOutQuad(progress))
 
       if (progress < 1) {
         requestAnimationFrame(animation)
@@ -29,14 +29,14 @@ export const useSmoothScroll = () => {
     requestAnimationFrame(animation)
   }
 
-  const scrollToElement = (selector: string, duration: number = 1200) => {
+  const scrollToElement = (selector: string, duration: number = 1800) => {
     const element = document.querySelector(selector)
     if (element) {
       smoothScrollTo(element, duration)
     }
   }
 
-  const scrollToTop = (duration: number = 1200) => {
+  const scrollToTop = (duration: number = 1800) => {
     smoothScrollTo(0, duration)
   }