From 8d829046d6829df6784be526eb753c0b9f269113 Mon Sep 17 00:00:00 2001
From: matt <matt@harborsmith.co>
Date: Sun, 21 Sep 2025 12:45:17 +0200
Subject: [PATCH] feat: update Harbor Smith website content and layout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Update hero tagline to "Reliable Care Above and Below the Waterline"
- Remove 5-star rating badge from hero section
- Change "Mobile Service" to "Tailored Service" with wrench icon
- Update section title from "Our Premium Services" to "Our Services"
- Merge Hull Cleaning and Anode Change services into single card
- Rename "Exterior Wash & Wax" to "Exterior Cleaning"
- Update trust indicators to show 3 badges: Years Experience, Customizable Service, Certified Experts
- Remove "Schedule Service" button from booking section
- Fix service card alignment with consistent heights and flexbox layout
- Add responsive layout for trust indicators on mobile (2+1 grid)

🤖 Generated with Claude Code

Co-Authored-By: Claude <noreply@anthropic.com>
---
 apps/website/components/BookingSection.vue  | 11 +---
 apps/website/components/HeroSection.vue     | 14 +---
 apps/website/components/ServicesSection.vue | 71 ++++++++-------------
 apps/website/components/TrustIndicators.vue | 40 ++++++++----
 apps/website/components/WelcomeSection.vue  |  8 +--
 apps/website/pages/index.vue                |  4 +-
 6 files changed, 64 insertions(+), 84 deletions(-)

diff --git a/apps/website/components/BookingSection.vue b/apps/website/components/BookingSection.vue
index 8a40afc..defe2a9 100644
--- a/apps/website/components/BookingSection.vue
+++ b/apps/website/components/BookingSection.vue
@@ -7,16 +7,7 @@
           Join hundreds of boat owners who trust Harbor Smith for professional maintenance
         </p>
 
-        <div class="booking-options">
-          <div class="booking-card">
-            <span class="booking-icon">
-              <LucideCalendar />
-            </span>
-            <h3>Schedule Service</h3>
-            <p>Book your maintenance appointment</p>
-            <button class="btn-booking" @click="handleBookNow">Book Now</button>
-          </div>
-
+        <div class="booking-options" style="justify-content: center; gap: 3rem;">
           <div class="booking-card featured">
             <span class="booking-icon">
               <LucidePhone />
diff --git a/apps/website/components/HeroSection.vue b/apps/website/components/HeroSection.vue
index 9a337e8..92218bc 100644
--- a/apps/website/components/HeroSection.vue
+++ b/apps/website/components/HeroSection.vue
@@ -35,24 +35,12 @@
         <img src="/HARBOR-SMITH-white.png" alt="Harbor Smith" width="400" height="250">
       </div>
 
-      <div class="trust-badge animate-fade-in">
-        <div class="stars">
-          <span class="stars-icons">
-            <LucideStar class="star-filled" />
-            <LucideStar class="star-filled" />
-            <LucideStar class="star-filled" />
-            <LucideStar class="star-filled" />
-            <LucideStar class="star-filled" />
-          </span>
-        </div>
-        <span>Trusted by {{ animatedCount }}+ seafarers</span>
-      </div>
 
       <p class="hero-subtext animate-fade-up-delay">
         <span style="font-size: 1.5rem; font-weight: 500; text-transform: none; letter-spacing: normal; margin-bottom: 10px; display: block;">
           Personalized Service Maintenance for Your Boat
         </span>
-        Keep your vessel pristine with San Francisco Bay's premier mobile boat maintenance service.
+        Reliable Care Above and Below the Waterline. Servicing the Bay Area and Beyond!
       </p>
 
       <div class="hero-actions animate-fade-up-delay-2">
diff --git a/apps/website/components/ServicesSection.vue b/apps/website/components/ServicesSection.vue
index 7b42f17..2765274 100644
--- a/apps/website/components/ServicesSection.vue
+++ b/apps/website/components/ServicesSection.vue
@@ -2,80 +2,65 @@
   <section class="fleet-showcase" id="services">
     <div class="container">
       <div class="section-header">
-        <h2 class="section-title">Our Premium Services</h2>
+        <h2 class="section-title">Our Services</h2>
         <p class="section-subtitle">Professional boat maintenance tailored to your needs</p>
       </div>
 
-      <div class="services-grid" style="display: flex; flex-wrap: wrap; gap: 30px; max-width: 1200px; margin: 0 auto; justify-content: center;">
-        <div class="service-card" style="background: white; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); padding: 0; overflow: hidden; text-align: center; flex: 0 1 350px; min-width: 280px;">
+      <div class="services-grid" style="display: flex; flex-wrap: wrap; gap: 30px; max-width: 1200px; margin: 0 auto; justify-content: center; align-items: stretch;">
+        <div class="service-card" style="background: white; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); padding: 0; overflow: hidden; text-align: center; flex: 0 1 350px; min-width: 280px; display: flex; flex-direction: column;">
           <div style="width: 100%; height: 200px; overflow: hidden;">
-            <img src="/diver_cleaning.jpg" alt="Professional hull cleaning service" style="width: 100%; height: 100%; object-fit: cover;" width="500" height="333" loading="lazy">
+            <img src="/diver_cleaning.jpg" alt="Professional hull cleaning and anode replacement service" style="width: 100%; height: 100%; object-fit: cover;" width="500" height="333" loading="lazy">
           </div>
-          <div style="padding: 30px;">
-            <h3 style="font-size: 24px; margin-bottom: 15px; color: #1e3a5f;">Hull Cleaning</h3>
-            <p style="color: #666; margin-bottom: 20px;">
-              Professional underwater hull cleaning to maintain your boat's performance and fuel efficiency.
+          <div style="padding: 30px; display: flex; flex-direction: column; flex: 1;">
+            <h3 style="font-size: 24px; margin-bottom: 15px; color: #1e3a5f; min-height: 65px; display: flex; align-items: flex-start; justify-content: center; text-align: center;">Hull Cleaning &amp; Anode Change</h3>
+            <p style="color: #666; margin-bottom: 20px; min-height: 80px;">
+              Professional underwater hull cleaning and zinc anode maintenance for optimal performance and corrosion protection.
             </p>
-            <ul style="list-style: none; padding: 0; margin: 20px 0; text-align: left;">
+            <ul style="list-style: none; padding: 0; margin: 20px 0; text-align: left; flex: 1;">
               <li style="padding: 8px 0;"><LucideCheck class="spec-icon" /> Removes marine growth</li>
               <li style="padding: 8px 0;"><LucideCheck class="spec-icon" /> Improves fuel efficiency</li>
-              <li style="padding: 8px 0;"><LucideCheck class="spec-icon" /> Extends hull life</li>
+              <li style="padding: 8px 0;"><LucideCheck class="spec-icon" /> Prevents corrosion</li>
+              <li style="padding: 8px 0;"><LucideCheck class="spec-icon" /> Marine-grade anodes</li>
             </ul>
-            <button class="btn-primary-warm" style="width: 100%;" @click="handleQuote">Get Quote</button>
+            <button class="btn-primary-warm" style="width: 100%; margin-top: auto;" @click="handleQuote">Get Quote</button>
           </div>
         </div>
 
-        <div class="service-card" style="background: white; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); padding: 0; overflow: hidden; text-align: center; flex: 0 1 350px; min-width: 280px;">
+        <div class="service-card" style="background: white; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); padding: 0; overflow: hidden; text-align: center; flex: 0 1 350px; min-width: 280px; display: flex; flex-direction: column;">
           <div style="width: 100%; height: 200px; overflow: hidden;">
-            <img src="/Washdown.jpg" alt="Professional boat wash and wax service" style="width: 100%; height: 100%; object-fit: cover;" width="500" height="333" loading="lazy">
+            <img src="/Washdown.jpg" alt="Professional boat exterior cleaning service" style="width: 100%; height: 100%; object-fit: cover;" width="500" height="333" loading="lazy">
           </div>
-          <div style="padding: 30px;">
-            <h3 style="font-size: 24px; margin-bottom: 15px; color: #1e3a5f;">Exterior Wash &amp; Wax</h3>
-            <p style="color: #666; margin-bottom: 20px;">
+          <div style="padding: 30px; display: flex; flex-direction: column; flex: 1;">
+            <h3 style="font-size: 24px; margin-bottom: 15px; color: #1e3a5f; min-height: 65px; display: flex; align-items: flex-start; justify-content: center; text-align: center;">Exterior Cleaning</h3>
+            <p style="color: #666; margin-bottom: 20px; min-height: 80px; padding-top: 27px;">
               Complete exterior detailing to keep your boat looking pristine and protected.
             </p>
-            <ul style="list-style: none; padding: 0; margin: 20px 0; text-align: left;">
+            <ul style="list-style: none; padding: 0; margin: 20px 0; text-align: left; flex: 1;">
               <li style="padding: 8px 0;"><LucideCheck class="spec-icon" /> Deep cleaning wash</li>
-              <li style="padding: 8px 0;"><LucideCheck class="spec-icon" /> UV protection wax</li>
+              <li style="padding: 8px 0;"><LucideCheck class="spec-icon" /> Protective wax application</li>
+              <li style="padding: 8px 0;"><LucideCheck class="spec-icon" /> UV protection</li>
               <li style="padding: 8px 0;"><LucideCheck class="spec-icon" /> Gel coat restoration</li>
             </ul>
-            <button class="btn-primary-warm" style="width: 100%;" @click="handleQuote">Get Quote</button>
+            <button class="btn-primary-warm" style="width: 100%; margin-top: auto;" @click="handleQuote">Get Quote</button>
           </div>
         </div>
 
-        <div class="service-card" style="background: white; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); padding: 0; overflow: hidden; text-align: center; flex: 0 1 350px; min-width: 280px;">
-          <div style="width: 100%; height: 200px; overflow: hidden;">
-            <img src="/Anodes.jpg" alt="Zinc anode replacement service" style="width: 100%; height: 100%; object-fit: cover;" width="500" height="333" loading="lazy">
-          </div>
-          <div style="padding: 30px;">
-            <h3 style="font-size: 24px; margin-bottom: 15px; color: #1e3a5f;">Anode Changes</h3>
-            <p style="color: #666; margin-bottom: 20px;">
-              Essential corrosion protection with regular zinc anode inspection and replacement.
-            </p>
-            <ul style="list-style: none; padding: 0; margin: 20px 0; text-align: left;">
-              <li style="padding: 8px 0;"><LucideCheck class="spec-icon" /> Prevents corrosion</li>
-              <li style="padding: 8px 0;"><LucideCheck class="spec-icon" /> Regular inspection</li>
-              <li style="padding: 8px 0;"><LucideCheck class="spec-icon" /> Marine-grade materials</li>
-            </ul>
-            <button class="btn-primary-warm" style="width: 100%;" @click="handleQuote">Get Quote</button>
-          </div>
-        </div>
-
-        <div class="service-card" style="background: white; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); padding: 0; overflow: hidden; text-align: center; flex: 0 1 350px; min-width: 280px;">
+        <div class="service-card" style="background: white; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); padding: 0; overflow: hidden; text-align: center; flex: 0 1 350px; min-width: 280px; display: flex; flex-direction: column;">
           <div style="width: 100%; height: 200px; overflow: hidden;">
             <img src="/Interior.jpg" alt="Professional interior detailing service" style="width: 100%; height: 100%; object-fit: cover;" width="500" height="333" loading="lazy">
           </div>
-          <div style="padding: 30px;">
-            <h3 style="font-size: 24px; margin-bottom: 15px; color: #1e3a5f;">Interior Detailing</h3>
-            <p style="color: #666; margin-bottom: 20px;">
+          <div style="padding: 30px; display: flex; flex-direction: column; flex: 1;">
+            <h3 style="font-size: 24px; margin-bottom: 15px; color: #1e3a5f; min-height: 65px; display: flex; align-items: flex-start; justify-content: center; text-align: center;">Interior Detailing</h3>
+            <p style="color: #666; margin-bottom: 20px; min-height: 80px;">
               Thorough interior cleaning and conditioning for a fresh, comfortable cabin.
             </p>
-            <ul style="list-style: none; padding: 0; margin: 20px 0; text-align: left;">
+            <ul style="list-style: none; padding: 0; margin: 20px 0; text-align: left; flex: 1;">
               <li style="padding: 8px 0;"><LucideCheck class="spec-icon" /> Upholstery cleaning</li>
               <li style="padding: 8px 0;"><LucideCheck class="spec-icon" /> Mold &amp; mildew treatment</li>
               <li style="padding: 8px 0;"><LucideCheck class="spec-icon" /> Surface conditioning</li>
+              <li style="padding: 8px 0;"><LucideCheck class="spec-icon" /> Odor elimination</li>
             </ul>
-            <button class="btn-primary-warm" style="width: 100%;" @click="handleQuote">Get Quote</button>
+            <button class="btn-primary-warm" style="width: 100%; margin-top: auto;" @click="handleQuote">Get Quote</button>
           </div>
         </div>
       </div>
diff --git a/apps/website/components/TrustIndicators.vue b/apps/website/components/TrustIndicators.vue
index 69224c3..d54b567 100644
--- a/apps/website/components/TrustIndicators.vue
+++ b/apps/website/components/TrustIndicators.vue
@@ -1,26 +1,21 @@
 <template>
   <section class="services-section">
     <div class="container">
-      <div class="service-stats">
-        <div class="stat-item">
-          <LucideShip class="stat-icon" />
-          <span class="stat-number">200+</span>
-          <span class="stat-label">Vessels Maintained</span>
-        </div>
+      <div class="service-stats trust-indicators-grid">
         <div class="stat-item">
           <LucideAward class="stat-icon" />
-          <span class="stat-number">10+</span>
+          <span class="stat-number">20+</span>
           <span class="stat-label">Years Experience</span>
         </div>
         <div class="stat-item">
-          <LucideUsers class="stat-icon" />
-          <span class="stat-number">500+</span>
-          <span class="stat-label">Happy Clients</span>
+          <LucideWrench class="stat-icon" />
+          <span class="stat-number">100%</span>
+          <span class="stat-label">Customizable Service</span>
         </div>
-        <div class="stat-item">
+        <div class="stat-item stat-item-last">
           <LucideShieldCheck class="stat-icon" />
           <span class="stat-number">100%</span>
-          <span class="stat-label">Mobile Service</span>
+          <span class="stat-label">Certified Experts</span>
         </div>
       </div>
     </div>
@@ -33,4 +28,25 @@
 
 <style scoped>
 /* Styling sourced from voyage-layout.css */
+.trust-indicators-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 40px;
+  max-width: 900px;
+  margin: 0 auto;
+}
+
+@media (max-width: 768px) {
+  .trust-indicators-grid {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 30px;
+    padding: 0 20px;
+  }
+
+  .stat-item-last {
+    grid-column: 1 / -1;
+    justify-self: center;
+    max-width: 200px;
+  }
+}
 </style>
diff --git a/apps/website/components/WelcomeSection.vue b/apps/website/components/WelcomeSection.vue
index 72130e3..d174bef 100644
--- a/apps/website/components/WelcomeSection.vue
+++ b/apps/website/components/WelcomeSection.vue
@@ -6,16 +6,16 @@
           <h2 class="section-title warm">Why Choose Harbor Smith?</h2>
           <p class="lead-text">
             We're the San Francisco Bay Area's premier mobile boat maintenance service.
-            Our professional team brings expert care directly to your dock, ensuring your vessel stays in pristine condition year-round.
+            Our professional team provides expert care, ensuring your vessel stays in pristine condition year-round.
           </p>
           <div class="feature-list">
             <div class="feature-item">
               <span class="feature-icon">
-                <LucideTruck />
+                <LucideWrench />
               </span>
               <div>
-                <h4>Mobile Service</h4>
-                <p>We come to you - convenient service at your dock or marina</p>
+                <h4>Tailored Service</h4>
+                <p>We provide highly customized service that fits your needs.</p>
               </div>
             </div>
             <div class="feature-item">
diff --git a/apps/website/pages/index.vue b/apps/website/pages/index.vue
index c40d5de..77cdf03 100644
--- a/apps/website/pages/index.vue
+++ b/apps/website/pages/index.vue
@@ -30,7 +30,7 @@ useHead({
   meta: [
     {
       name: 'description',
-      content: 'Keep your vessel pristine with San Francisco Bay\'s premier mobile boat maintenance service.'
+      content: 'Reliable Care Above and Below the Waterline. Servicing the Bay Area and Beyond!'
     },
     {
       property: 'og:title',
@@ -38,7 +38,7 @@ useHead({
     },
     {
       property: 'og:description',
-      content: 'Keep your vessel pristine with San Francisco Bay\'s premier mobile boat maintenance service.'
+      content: 'Reliable Care Above and Below the Waterline. Servicing the Bay Area and Beyond!'
     },
     {
       property: 'og:image',