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>
76 lines
3.2 KiB
TypeScript
76 lines
3.2 KiB
TypeScript
'use client'
|
|
|
|
import { Wrench, ShieldCheck, CalendarCheck } from 'lucide-react'
|
|
|
|
export default function AboutSection() {
|
|
return (
|
|
<section className="py-16 md:py-24 bg-white">
|
|
<div className="container mx-auto px-4">
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-center max-w-6xl mx-auto">
|
|
{/* Text Content */}
|
|
<div className="order-2 lg:order-1">
|
|
<h2 className="text-3xl md:text-4xl font-bold text-harbor-blue mb-6">
|
|
Why Choose Harbor Smith?
|
|
</h2>
|
|
<p className="text-lg text-gray-600 mb-8">
|
|
We're the San Francisco Bay Area's premier mobile boat maintenance service.
|
|
Our professional team provides expert care, ensuring your vessel stays in pristine condition year-round.
|
|
</p>
|
|
|
|
{/* Features List */}
|
|
<div className="space-y-6">
|
|
<div className="flex gap-4">
|
|
<div className="flex-shrink-0">
|
|
<div className="w-12 h-12 bg-harbor-gold/10 rounded-lg flex items-center justify-center">
|
|
<Wrench className="w-6 h-6 text-harbor-gold" />
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h4 className="text-lg font-semibold text-harbor-blue mb-1">Tailored Service</h4>
|
|
<p className="text-gray-600">We provide highly customized service that fits your needs.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex gap-4">
|
|
<div className="flex-shrink-0">
|
|
<div className="w-12 h-12 bg-harbor-gold/10 rounded-lg flex items-center justify-center">
|
|
<ShieldCheck className="w-6 h-6 text-harbor-gold" />
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h4 className="text-lg font-semibold text-harbor-blue mb-1">Certified Professionals</h4>
|
|
<p className="text-gray-600">Experienced technicians with marine industry certifications</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex gap-4">
|
|
<div className="flex-shrink-0">
|
|
<div className="w-12 h-12 bg-harbor-gold/10 rounded-lg flex items-center justify-center">
|
|
<CalendarCheck className="w-6 h-6 text-harbor-gold" />
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h4 className="text-lg font-semibold text-harbor-blue mb-1">Reliable & Consistent</h4>
|
|
<p className="text-gray-600">Regular maintenance schedules tailored to your needs</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Image */}
|
|
<div className="order-1 lg:order-2 relative">
|
|
<img
|
|
src="/leah_1.jpeg"
|
|
alt="Harbor Smith team member"
|
|
className="w-full rounded-xl shadow-xl"
|
|
/>
|
|
<div className="absolute bottom-4 right-4 bg-harbor-blue text-white px-6 py-3 rounded-lg">
|
|
<span className="block text-2xl font-bold">10+ Years</span>
|
|
<span className="text-sm">of Excellence</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
} |