matt
753876b071
All checks were successful
build-website / build (push) Successful in 1m32s
Optimizations implemented: - Added hardware acceleration for smooth animations (will-change, transform3d) - Optimized touch targets for mobile (minimum 48x48px) - Added explicit image dimensions to prevent CLS - Implemented comprehensive SEO meta tags and Open Graph - Added structured data for LocalBusiness and Service schemas - Configured resource hints (preconnect, dns-prefetch, preload) - Added lazy loading to non-critical images - Improved button accessibility with touch-action: manipulation These optimizations improve Core Web Vitals, mobile UX, and SEO visibility. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
65 lines
2.1 KiB
Vue
65 lines
2.1 KiB
Vue
<template>
|
|
<section class="welcome-section">
|
|
<div class="container">
|
|
<div class="welcome-content">
|
|
<div class="welcome-text">
|
|
<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.
|
|
</p>
|
|
<div class="feature-list">
|
|
<div class="feature-item">
|
|
<span class="feature-icon">
|
|
<LucideTruck />
|
|
</span>
|
|
<div>
|
|
<h4>Mobile Service</h4>
|
|
<p>We come to you - convenient service at your dock or marina</p>
|
|
</div>
|
|
</div>
|
|
<div class="feature-item">
|
|
<span class="feature-icon">
|
|
<LucideShieldCheck />
|
|
</span>
|
|
<div>
|
|
<h4>Certified Professionals</h4>
|
|
<p>Experienced technicians with marine industry certifications</p>
|
|
</div>
|
|
</div>
|
|
<div class="feature-item">
|
|
<span class="feature-icon">
|
|
<LucideCalendarCheck />
|
|
</span>
|
|
<div>
|
|
<h4>Reliable & Consistent</h4>
|
|
<p>Regular maintenance schedules tailored to your needs</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="welcome-image">
|
|
<img src="/leah_1.jpeg" alt="Harbor Smith team member" class="rounded-image" width="600" height="400" loading="lazy">
|
|
<div class="image-badge">
|
|
<span>10+ Years</span>
|
|
<span>of Excellence</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { onMounted } from 'vue'
|
|
import { useIntersectionAnimations } from '~/composables/useIntersectionAnimations'
|
|
|
|
onMounted(() => {
|
|
useIntersectionAnimations()
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* Styling handled in voyage-layout.css */
|
|
</style>
|