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/assets/css/main.css

@@ -217,15 +217,39 @@ html {
   }
 
   .hero-overlay {
-    @apply absolute inset-0 bg-gradient-to-b from-black/40 via-black/20 to-black/40;
+    @apply absolute inset-0;
+    z-index: 2;
+  }
+
+  /* Hero Logo Styles */
+  .hero-logo img {
+    height: 250px;
+    margin: 40px 0;
+    width: auto;
+    display: block;
+  }
+
+  @media (max-width: 768px) {
+    .hero-logo img {
+      height: auto;
+      max-height: 150px;
+      width: 90%;
+      max-width: 280px;
+      margin: 20px auto;
+    }
   }
 
   .gradient-warm {
-    background: linear-gradient(135deg, rgba(180, 139, 78, 0.2) 0%, rgba(201, 165, 111, 0.1) 100%);
+    background: linear-gradient(to bottom,
+        rgba(0, 31, 63, 0.3) 0%,
+        rgba(0, 31, 63, 0.5) 50%,
+        rgba(0, 31, 63, 0.7) 100%);
   }
 
   .gradient-depth {
-    background: linear-gradient(to top, rgba(30, 58, 95, 0.3) 0%, transparent 100%);
+    background: linear-gradient(to right,
+        rgba(220, 20, 60, 0.1) 0%,
+        transparent 100%);
   }
 
   .hero-content {

apps/website/assets/css/voyage-layout.css

@@ -117,6 +117,7 @@ img {
     height: 20px;
     display: inline-block;
     margin-right: 8px;
+    flex-shrink: 0;
 }
 
 .spec-icon {
@@ -501,6 +502,16 @@ html {
 .stars {
     color: var(--warm-yellow);
     font-size: 1rem;
+    display: inline-flex;
+    gap: 2px;
+}
+
+/* Ensure stars icons display horizontally */
+.stars i,
+.story-content .stars i,
+.testimonial-highlight .stars i {
+    display: inline-block;
+    margin-right: 2px;
 }
 
 .hero-headline {
@@ -1090,7 +1101,20 @@ html {
 
 @media (max-width: 640px) {
   .service-stats {
-    grid-template-columns: 1fr;
+    grid-template-columns: repeat(2, 1fr);  /* 2x2 grid on mobile */
+    gap: 1rem;
+  }
+
+  .stat-item {
+    padding: 1rem;
+  }
+
+  .stat-item .stat-number {
+    font-size: 2rem;
+  }
+
+  .stat-item .stat-label {
+    font-size: 0.8rem;
   }
 }
 
@@ -1332,11 +1356,31 @@ html {
     transition: var(--transition);
 }
 
+/* Ensure non-featured cards always show with visible background */
+.booking-card:not(.featured) {
+    background: rgba(255, 255, 255, 0.95);
+    border: 2px solid var(--white);
+}
+
+.booking-card:not(.featured) h3,
+.booking-card:not(.featured) p {
+    color: var(--primary-blue);
+}
+
+.booking-card:not(.featured) .booking-icon {
+    color: var(--warm-orange);
+}
+
 .booking-card:hover {
     background: rgba(255, 255, 255, 0.15);
     transform: translateY(-5px);
 }
 
+.booking-card:not(.featured):hover {
+    background: rgba(255, 255, 255, 1);
+    transform: translateY(-5px);
+}
+
 .booking-card.featured {
     background: var(--gradient-warm);
     border: none;
@@ -1362,18 +1406,29 @@ html {
 .btn-booking {
     width: 100%;
     padding: 0.75rem 1.5rem;
-    background: rgba(255, 255, 255, 0.2);
+    background: var(--white);
-    color: var(--white);
+    color: var(--primary-blue);
     border: 2px solid var(--white);
     border-radius: 50px;
     font-weight: 600;
     cursor: pointer;
     transition: var(--transition);
+    opacity: 1;
+    visibility: visible;
+}
+
+/* Non-featured card buttons */
+.booking-card:not(.featured) .btn-booking {
+    background: var(--primary-blue);
+    color: var(--white);
+    border: 2px solid var(--primary-blue);
 }
 
 .btn-booking:hover {
-    background: var(--white);
+    background: var(--gradient-warm);
-    color: var(--primary-blue);
+    color: var(--white);
+    transform: translateY(-2px);
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
 }
 
 .btn-booking.primary {
@@ -1401,12 +1456,22 @@ html {
 }
 
 .footer-content {
-    display: grid;
+    display: flex;
-    grid-template-columns: 2fr 1fr 1fr;
+    justify-content: space-between;
     gap: var(--space-2xl);
     margin-bottom: var(--space-lg);
 }
 
+.footer-brand {
+    flex: 1;
+    max-width: 500px;
+}
+
+.footer-contact {
+    flex: 0 0 auto;
+    margin-left: auto;
+}
+
 .footer-brand h3 {
     font-family: var(--font-display);
     font-size: 2rem;
@@ -1582,23 +1647,84 @@ html {
 
 /* Responsive */
 @media (max-width: 768px) {
+    .hero-voyage {
+        padding: 60px 15px;
+        min-height: 100vh;
+    }
+
+    .hero-content {
+        padding: 0 15px;
+        overflow-x: hidden;
+    }
+
+    /* Responsive logo */
+    .hero-logo {
+        width: 100%;
+        max-width: 90%;
+        margin: 0 auto;
+    }
+
+    .hero-logo img {
+        height: auto;
+        max-height: 150px;
+        width: 100%;
+        max-width: 280px;
+        margin: 20px auto;
+        object-fit: contain;
+    }
+
     .hero-headline {
-        font-size: 3rem;
+        font-size: 2.25rem;
+        line-height: 1.2;
+        margin-bottom: 1rem;
+        padding: 0 10px;
     }
 
     .hero-subtext {
-        font-size: 1rem;
+        font-size: 0.95rem;
+        padding: 0 10px;
+        margin-bottom: 1.5rem;
+        line-height: 1.6;
     }
 
     .hero-actions {
         flex-direction: column;
         width: 100%;
-        padding: 0 var(--space-md);
+        padding: 0;
+        gap: 0.75rem;
+        align-items: center;
     }
 
+    /* Smaller buttons on mobile */
     .btn-primary-warm,
     .btn-secondary-warm {
-        width: 100%;
+        width: 85%;
+        max-width: 260px;
+        padding: 0.65rem 1rem;
+        font-size: 0.875rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+        gap: 0.5rem;
+    }
+
+    .btn-primary-warm .btn-icon,
+    .btn-secondary-warm .btn-icon {
+        font-size: 0.875rem;
+        width: 16px;
+        height: 16px;
+        margin-right: 0;
+    }
+
+    .trust-badge {
+        padding: 0.4rem 1rem;
+        font-size: 0.8rem;
+        margin-bottom: 1.5rem;
+    }
+
+    .scroll-indicator {
+        display: none;
     }
     
     .welcome-content {

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>
 

apps/website/nuxt.config.ts

@@ -115,15 +115,16 @@ export default defineNuxtConfig({
   // App configuration
   app: {
     head: {
-      title: 'Harbor Smith - Premium Yacht Charter & Maintenance',
+      title: 'Harbor Smith - Personalized Service Maintenance For Your Boat',
       meta: [
         { charset: 'utf-8' },
         { name: 'viewport', content: 'width=device-width, initial-scale=1' },
-        { name: 'description', content: 'Experience luxury yacht charters and professional maintenance services in San Francisco Bay with Harbor Smith.' },
+        { name: 'description', content: 'Professional boat maintenance services in San Francisco Bay. Mobile service at your dock.' },
         { name: 'format-detection', content: 'telephone=no' }
       ],
       link: [
-        { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
+        { rel: 'icon', type: 'image/png', href: '/HARBOR-SMITH-navy.png' },
+        { rel: 'apple-touch-icon', href: '/HARBOR-SMITH-navy.png' }
       ]
     },
     pageTransition: { name: 'page', mode: 'out-in' },