From e0794df09214d2bec26875e0adaa2bf72e8efd33 Mon Sep 17 00:00:00 2001
From: matt <matt@harborsmith.co>
Date: Fri, 19 Sep 2025 11:18:25 +0200
Subject: [PATCH] Add slower smooth scrolling and scroll to explore indicator

Features added:
- Custom smooth scroll composable with adjustable duration (1.5 seconds)
- Replaced native browser smooth scroll with custom implementation
- Added 'Scroll to explore' text with chevron at bottom of hero
- Animated bounce effect for scroll indicator
- Chevron icon with subtle animation
- Click handler to scroll to services section
- Hidden on mobile for cleaner experience

All anchor links now scroll more slowly and smoothly for better UX.
---
 apps/website/components/AppNavbar.vue       | 11 +--
 apps/website/components/HeroSection.vue     | 85 +++++++++++++++++++--
 apps/website/composables/useSmoothScroll.ts | 48 ++++++++++++
 3 files changed, 129 insertions(+), 15 deletions(-)
 create mode 100644 apps/website/composables/useSmoothScroll.ts

diff --git a/apps/website/components/AppNavbar.vue b/apps/website/components/AppNavbar.vue
index 84f3915..8d41e53 100644
--- a/apps/website/components/AppNavbar.vue
+++ b/apps/website/components/AppNavbar.vue
@@ -36,7 +36,9 @@
 
 <script setup lang="ts">
 import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
+import { useSmoothScroll } from '~/composables/useSmoothScroll'
 
+const { scrollToElement, scrollToTop: smoothScrollToTop } = useSmoothScroll()
 const isScrolled = ref(false)
 
 const navLinks = [
@@ -62,17 +64,12 @@ const handleSmoothScroll = (event: Event, href: string) => {
     return
   }
 
-  const target = document.querySelector(href)
-  if (!target) {
-    return
-  }
-
   event.preventDefault()
-  target.scrollIntoView({ behavior: 'smooth', block: 'start' })
+  scrollToElement(href, 1500) // 1.5 seconds for slower scrolling
 }
 
 const scrollToTop = () => {
-  window.scrollTo({ top: 0, behavior: 'smooth' })
+  smoothScrollToTop(1500) // 1.5 seconds for slower scrolling
 }
 
 onMounted(() => {
diff --git a/apps/website/components/HeroSection.vue b/apps/website/components/HeroSection.vue
index dae91b0..ed24ab4 100644
--- a/apps/website/components/HeroSection.vue
+++ b/apps/website/components/HeroSection.vue
@@ -65,6 +65,12 @@
           View Our Services
         </button>
       </div>
+
+      <!-- Scroll to explore indicator -->
+      <div class="scroll-to-explore" @click="handleScrollToExplore">
+        <span>Scroll to explore</span>
+        <LucideChevronDown class="chevron-icon" />
+      </div>
     </div>
   </section>
 </template>
@@ -74,7 +80,9 @@ import { ref, onMounted } from 'vue'
 import { useParallax } from '~/composables/useParallax'
 import { useIntersectionAnimations } from '~/composables/useIntersectionAnimations'
 import { useRipple } from '~/composables/useRipple'
+import { useSmoothScroll } from '~/composables/useSmoothScroll'
 
+const { scrollToElement } = useSmoothScroll()
 const videoLoaded = ref(false)
 const videoContainer = ref<HTMLElement | null>(null)
 const videoElement = ref<HTMLVideoElement | null>(null)
@@ -93,10 +101,11 @@ const handlePhoneClick = () => {
 }
 
 const handleServicesClick = () => {
-  const element = document.querySelector('#services')
-  if (element) {
-    element.scrollIntoView({ behavior: 'smooth' })
-  }
+  scrollToElement('#services', 1500) // 1.5 seconds for slower scrolling
+}
+
+const handleScrollToExplore = () => {
+  scrollToElement('#services', 1500) // Scroll to services section
 }
 
 const handleVideoVisibility = () => {
@@ -127,10 +136,7 @@ const initSmoothScroll = () => {
       if (!href) {
         return
       }
-      const target = document.querySelector(href)
-      if (target) {
-        target.scrollIntoView({ behavior: 'smooth', block: 'start' })
-      }
+      scrollToElement(href, 1500) // 1.5 seconds for slower scrolling
     })
   })
 }
@@ -210,4 +216,67 @@ onMounted(() => {
   overflow-x: hidden !important;
   max-width: 100vw !important;
 }
+
+/* Scroll to explore indicator */
+.scroll-to-explore {
+  position: absolute;
+  bottom: 40px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  color: white;
+  opacity: 0.8;
+  transition: all 0.3s ease;
+  animation: bounce 2s infinite;
+}
+
+.scroll-to-explore:hover {
+  opacity: 1;
+  transform: translateX(-50%) translateY(-3px);
+}
+
+.scroll-to-explore span {
+  font-size: 0.875rem;
+  font-weight: 300;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+
+.chevron-icon {
+  width: 24px;
+  height: 24px;
+  animation: chevronBounce 2s infinite;
+}
+
+@keyframes bounce {
+  0%, 20%, 50%, 80%, 100% {
+    transform: translateX(-50%) translateY(0);
+  }
+  40% {
+    transform: translateX(-50%) translateY(-10px);
+  }
+  60% {
+    transform: translateX(-50%) translateY(-5px);
+  }
+}
+
+@keyframes chevronBounce {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(5px);
+  }
+}
+
+/* Hide on mobile for better UX */
+@media (max-width: 768px) {
+  .scroll-to-explore {
+    display: none;
+  }
+}
 </style>
diff --git a/apps/website/composables/useSmoothScroll.ts b/apps/website/composables/useSmoothScroll.ts
new file mode 100644
index 0000000..2e45d7a
--- /dev/null
+++ b/apps/website/composables/useSmoothScroll.ts
@@ -0,0 +1,48 @@
+export const useSmoothScroll = () => {
+  const smoothScrollTo = (target: number | Element, duration: number = 1200) => {
+    const targetPosition = typeof target === 'number'
+      ? target
+      : target.getBoundingClientRect().top + window.pageYOffset
+    const startPosition = window.pageYOffset
+    const distance = targetPosition - startPosition
+    let startTime: number | null = null
+
+    const animation = (currentTime: number) => {
+      if (startTime === null) startTime = currentTime
+      const timeElapsed = currentTime - startTime
+      const progress = Math.min(timeElapsed / duration, 1)
+
+      // Easing function for smooth deceleration
+      const easeInOutCubic = (t: number) => {
+        return t < 0.5
+          ? 4 * t * t * t
+          : 1 - Math.pow(-2 * t + 2, 3) / 2
+      }
+
+      window.scrollTo(0, startPosition + distance * easeInOutCubic(progress))
+
+      if (progress < 1) {
+        requestAnimationFrame(animation)
+      }
+    }
+
+    requestAnimationFrame(animation)
+  }
+
+  const scrollToElement = (selector: string, duration: number = 1200) => {
+    const element = document.querySelector(selector)
+    if (element) {
+      smoothScrollTo(element, duration)
+    }
+  }
+
+  const scrollToTop = (duration: number = 1200) => {
+    smoothScrollTo(0, duration)
+  }
+
+  return {
+    smoothScrollTo,
+    scrollToElement,
+    scrollToTop
+  }
+}
\ No newline at end of file