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