Fix Vue website to match HTML mockup styling

- Fix testimonial stars to display horizontally
- Make booking section buttons always visible
- Align footer Get in Touch section to the right
- Add proper video overlay gradients for text visibility
- Fix booking card visibility with white backgrounds
- Improve mobile responsiveness with smaller buttons
- Create 2x2 stats grid for mobile view
- Add Harbor Smith logo as favicon
- Remove scroll indicator from hero section
- Add animated counter for seafarers (0 to 100+)
- Center and resize mobile buttons properly

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

apps/website/components/HeroSection.vue

@@ -28,7 +28,7 @@
 
     <div class="hero-content">
       <div class="hero-logo animate-fade-in">
-        <img src="/HARBOR-SMITH-white.png" alt="Harbor Smith" style="height: 250px; margin: 40px 0;">
+        <img src="/HARBOR-SMITH-white.png" alt="Harbor Smith">
       </div>
 
       <div class="trust-badge animate-fade-in">
@@ -41,7 +41,7 @@
             <LucideStar class="star-filled" />
           </span>
         </div>
-        <span>Trusted by 0+ seafarers</span>
+        <span>Trusted by {{ animatedCount }}+ seafarers</span>
       </div>
 
       <p class="hero-subtext animate-fade-up-delay">
@@ -61,13 +61,6 @@
           View Our Services
         </button>
       </div>
-
-      <div class="scroll-indicator">
-        <span>Scroll to explore</span>
-        <div class="scroll-arrow">
-          <LucideChevronDown />
-        </div>
-      </div>
     </div>
   </section>
 </template>
@@ -81,6 +74,7 @@ import { useRipple } from '~/composables/useRipple'
 const videoLoaded = ref(false)
 const videoContainer = ref<HTMLElement | null>(null)
 const videoElement = ref<HTMLVideoElement | null>(null)
+const animatedCount = ref(0)
 
 useParallax(videoContainer, 0.5)
 useIntersectionAnimations()
@@ -137,9 +131,36 @@ const initSmoothScroll = () => {
   })
 }
 
+const animateCount = () => {
+  const duration = 1500 // 1.5 seconds
+  const targetCount = 100
+  const startTime = Date.now()
+
+  const updateCount = () => {
+    const elapsed = Date.now() - startTime
+    const progress = Math.min(elapsed / duration, 1)
+
+    // Easing function for smooth animation
+    const easeOutQuart = 1 - Math.pow(1 - progress, 4)
+    animatedCount.value = Math.floor(easeOutQuart * targetCount)
+
+    if (progress < 1) {
+      requestAnimationFrame(updateCount)
+    } else {
+      animatedCount.value = targetCount
+    }
+  }
+
+  // Start animation after a small delay for better effect
+  setTimeout(() => {
+    updateCount()
+  }, 500)
+}
+
 onMounted(() => {
   handleVideoVisibility()
   initSmoothScroll()
+  animateCount()
 })
 </script>