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>
57 lines
2.2 KiB
Vue
57 lines
2.2 KiB
Vue
<template>
|
|
<section class="gallery-section">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<h2 class="section-title">Our Work in Action</h2>
|
|
<p class="section-subtitle">Professional maintenance services delivered with care</p>
|
|
</div>
|
|
<div class="image-gallery">
|
|
<div class="gallery-item large">
|
|
<img src="/diver_cleaning_2.jpg" alt="Professional hull cleaning" width="800" height="400" loading="lazy">
|
|
<div class="gallery-overlay">
|
|
<span class="gallery-caption">Expert Hull Cleaning</span>
|
|
</div>
|
|
</div>
|
|
<div class="gallery-item">
|
|
<img src="/ExtCleaning.jpg" alt="Exterior cleaning service" width="400" height="300" loading="lazy">
|
|
<div class="gallery-overlay">
|
|
<span class="gallery-caption">Detailed Cleaning</span>
|
|
</div>
|
|
</div>
|
|
<div class="gallery-item">
|
|
<img src="/Washdown2.jpg" alt="Professional washdown" width="400" height="300" loading="lazy">
|
|
<div class="gallery-overlay">
|
|
<span class="gallery-caption">Thorough Washdown</span>
|
|
</div>
|
|
</div>
|
|
<div class="gallery-item">
|
|
<img src="/Helm.jpg" alt="Interior maintenance" width="400" height="300" loading="lazy">
|
|
<div class="gallery-overlay">
|
|
<span class="gallery-caption">Interior Care</span>
|
|
</div>
|
|
</div>
|
|
<div class="gallery-item">
|
|
<img src="/Foredeck.jpg" alt="Deck maintenance" width="400" height="300" loading="lazy">
|
|
<div class="gallery-overlay">
|
|
<span class="gallery-caption">Deck Service</span>
|
|
</div>
|
|
</div>
|
|
<div class="gallery-item">
|
|
<img src="/Waxing.jpg" alt="Boat waxing service" width="400" height="300" loading="lazy">
|
|
<div class="gallery-overlay">
|
|
<span class="gallery-caption">Protective Waxing</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
// Static gallery content driven by voyage-layout styles
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* Gallery styling provided by voyage-layout.css */
|
|
</style>
|