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>
99 lines
3.3 KiB
TypeScript
99 lines
3.3 KiB
TypeScript
'use client'
|
|
|
|
import { Check } from 'lucide-react'
|
|
|
|
const services = [
|
|
{
|
|
title: 'Hull Cleaning & Anode Change',
|
|
description: 'Professional underwater hull cleaning and zinc anode maintenance for optimal performance and corrosion protection.',
|
|
image: '/diver_cleaning.jpg',
|
|
features: [
|
|
'Removes marine growth',
|
|
'Improves fuel efficiency',
|
|
'Prevents corrosion',
|
|
'Marine-grade anodes'
|
|
]
|
|
},
|
|
{
|
|
title: 'Exterior Cleaning',
|
|
description: 'Complete exterior detailing to keep your boat looking pristine and protected.',
|
|
image: '/Washdown.jpg',
|
|
features: [
|
|
'Deep cleaning wash',
|
|
'Protective wax application',
|
|
'UV protection',
|
|
'Gel coat restoration'
|
|
]
|
|
},
|
|
{
|
|
title: 'Interior Detailing',
|
|
description: 'Thorough interior cleaning and conditioning for a fresh, comfortable cabin.',
|
|
image: '/Interior.jpg',
|
|
features: [
|
|
'Upholstery cleaning',
|
|
'Mold & mildew treatment',
|
|
'Surface conditioning',
|
|
'Odor elimination'
|
|
]
|
|
}
|
|
]
|
|
|
|
export default function ServicesSection() {
|
|
const handleQuote = () => {
|
|
window.location.href = 'tel:510-701-2535'
|
|
}
|
|
|
|
return (
|
|
<section id="services" className="py-16 md:py-24 bg-gray-50">
|
|
<div className="container mx-auto px-4">
|
|
<div className="text-center mb-12">
|
|
<h2 className="text-3xl md:text-4xl font-bold text-harbor-blue mb-4">Our Services</h2>
|
|
<p className="text-lg md:text-xl text-gray-600">Professional boat maintenance tailored to your needs</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8 max-w-7xl mx-auto">
|
|
{services.map((service, index) => (
|
|
<div key={index} className="bg-white rounded-xl shadow-lg overflow-hidden flex flex-col">
|
|
{/* Service Image */}
|
|
<div className="h-48 md:h-56 overflow-hidden">
|
|
<img
|
|
src={service.image}
|
|
alt={service.title}
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
</div>
|
|
|
|
{/* Service Content */}
|
|
<div className="p-6 md:p-8 flex flex-col flex-1">
|
|
<h3 className="text-xl md:text-2xl font-bold text-harbor-blue mb-3">
|
|
{service.title}
|
|
</h3>
|
|
<p className="text-gray-600 mb-6">
|
|
{service.description}
|
|
</p>
|
|
|
|
{/* Features List */}
|
|
<ul className="space-y-3 mb-6 flex-1">
|
|
{service.features.map((feature, idx) => (
|
|
<li key={idx} className="flex items-start gap-2">
|
|
<Check className="w-5 h-5 text-harbor-gold mt-0.5 flex-shrink-0" />
|
|
<span className="text-gray-700">{feature}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
|
|
{/* CTA Button */}
|
|
<button
|
|
onClick={handleQuote}
|
|
className="w-full bg-harbor-gold text-white font-semibold py-3 px-6 rounded-lg hover:bg-harbor-amber transition-colors"
|
|
>
|
|
Get Quote
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
} |