feat: Migrate to Next.js with complete mobile-optimized website

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

components/AboutSection.tsx

@@ -0,0 +1,76 @@
+'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>
+  )
+}