d0f33f66f3
Some checks failed
build-website / build (push) Failing after 7s
- Replaced Vue/Nuxt with Next.js 15 for better performance and simpler architecture - Implemented all website sections with responsive design: - Hero section with video background and mobile-optimized spacing - About section with feature highlights - Services showcase with 3 service cards - Contact section with CTAs and trust badges - Footer with branding - Added Lucide React icons throughout - Mobile optimizations: - Responsive text and button sizing - Touch-friendly CTAs - Proper spacing adjustments for mobile/desktop - Scroll indicator with bouncing chevron - Archived Vue/Nuxt version in vue-archive folder - Moved all assets to Next.js public folder 🤖 Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>
80 lines
5.7 KiB
Vue
80 lines
5.7 KiB
Vue
<template>
|
|
<section class="fleet-showcase" id="services">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<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; 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 and anode replacement service" style="width: 100%; height: 100%; object-fit: cover;" width="500" height="333" loading="lazy">
|
|
</div>
|
|
<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 & 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; 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" /> 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%; 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; display: flex; flex-direction: column;">
|
|
<div style="width: 100%; height: 200px; overflow: hidden;">
|
|
<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; 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; flex: 1;">
|
|
<li style="padding: 8px 0;"><LucideCheck class="spec-icon" /> Deep cleaning wash</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%; 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; 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; 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; flex: 1;">
|
|
<li style="padding: 8px 0;"><LucideCheck class="spec-icon" /> Upholstery cleaning</li>
|
|
<li style="padding: 8px 0;"><LucideCheck class="spec-icon" /> Mold & 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%; margin-top: auto;" @click="handleQuote">Get Quote</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const handleQuote = () => {
|
|
window.location.href = 'tel:510-701-2535'
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* Layout and styling provided by voyage-layout.css */
|
|
</style>
|