matt/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update Harbor Smith website content and layout
All checks were successful
build-website / build (push) Successful in 1m42s
Details

Browse Source 
- 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>
This commit is contained in:
matt
2025-09-21 12:45:17 +02:00
parent ed5bb6cc3f
commit 8d829046d6
6 changed files with 64 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
apps/website/components/BookingSection.vue
View File

@@ -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 />

14
apps/website/components/HeroSection.vue
View File

@@ -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">

71
apps/website/components/ServicesSection.vue
View File

@@ -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>

40
apps/website/components/TrustIndicators.vue
View File

@@ -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>

8
apps/website/components/WelcomeSection.vue
View File

@@ -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">

4
apps/website/pages/index.vue
View File

@@ -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',