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/HeroSection.tsx

@@ -0,0 +1,117 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { Phone, Wrench, ChevronDown } from 'lucide-react'
+
+export default function HeroSection() {
+  const [videoLoaded, setVideoLoaded] = useState(false)
+
+  useEffect(() => {
+    // Detect iOS and set body position for safe area support
+    const isIOS = /iPhone|iPad|iPod/.test(navigator.userAgent)
+    if (isIOS) {
+      document.body.style.position = 'fixed'
+      document.body.style.width = '100%'
+    }
+
+    // Handle video loading with fallback
+    const video = document.getElementById('hero-video') as HTMLVideoElement
+    if (video) {
+      // Check if video can play
+      if (video.readyState >= 3) {
+        setVideoLoaded(true)
+      } else {
+        video.addEventListener('loadeddata', () => {
+          setVideoLoaded(true)
+        })
+      }
+
+      // Fallback timeout to show content even if video doesn't load
+      setTimeout(() => {
+        setVideoLoaded(true)
+      }, 1000)
+
+      // iOS autoplay fallback
+      const tryPlay = () => {
+        if (video.paused) {
+          video.play().catch(() => {})
+        }
+      }
+      window.addEventListener('touchstart', tryPlay, { once: true })
+    } else {
+      // If video element doesn't exist, show content anyway
+      setVideoLoaded(true)
+    }
+  }, [])
+
+  return (
+    <section className="relative h-screen w-full overflow-hidden">
+      {/* Video Background */}
+      <div className="absolute inset-0 w-full h-full">
+        <video
+          id="hero-video"
+          autoPlay
+          muted
+          loop
+          playsInline
+          className="absolute inset-0 h-full w-full object-cover"
+        >
+          <source
+            src="https://videos.pexels.com/video-files/3571264/3571264-uhd_2560_1440_30fps.mp4"
+            type="video/mp4"
+          />
+        </video>
+      </div>
+
+      {/* Overlay - Separate from video container */}
+      <div className="absolute inset-0 bg-gradient-to-b from-harbor-blue/30 via-harbor-blue/50 to-harbor-blue/70 z-[1]" />
+
+      {/* Hero Content */}
+      <div className={`relative z-10 flex h-full flex-col items-center justify-start pt-24 md:justify-center md:pt-0 px-4 text-white transition-opacity duration-1000 ${videoLoaded ? 'opacity-100' : 'opacity-0'}`}>
+        <div className="max-w-3xl text-center">
+          {/* Logo - Responsive sizing */}
+          <img
+            src="/HARBOR-SMITH-white.png"
+            alt="Harbor Smith"
+            className="mx-auto mb-3 md:mb-2 h-auto w-64 sm:w-80 md:w-96 lg:w-[400px]"
+          />
+
+          {/* Tagline - Responsive text sizing - much tighter on desktop */}
+          <p className="mb-1 md:mb-1 text-xl sm:text-2xl md:text-3xl font-medium">
+            Personalized Service Maintenance for Your Boat
+          </p>
+          <p className="mb-6 md:mb-3 text-base sm:text-lg md:text-xl font-light px-4">
+            Reliable Care Above and Below the Waterline. Servicing the Bay Area and Beyond!
+          </p>
+
+          {/* CTAs - Responsive button sizing - more space on mobile */}
+          <div className="flex flex-col gap-3 sm:gap-4 sm:flex-row sm:justify-center px-4">
+            <a
+              href="tel:510-701-2535"
+              className="flex items-center justify-center gap-2 rounded-lg bg-harbor-gold px-6 sm:px-8 py-3 sm:py-4 text-sm sm:text-base font-semibold text-white transition hover:bg-harbor-amber"
+            >
+              <Phone className="w-4 h-4 sm:w-5 sm:h-5" />
+              Call (510) 701-2535
+            </a>
+            <button
+              onClick={() => document.getElementById('services')?.scrollIntoView({ behavior: 'smooth' })}
+              className="flex items-center justify-center gap-2 rounded-lg border-2 border-white px-6 sm:px-8 py-3 sm:py-4 text-sm sm:text-base font-semibold text-white transition hover:bg-white hover:text-harbor-blue"
+            >
+              <Wrench className="w-4 h-4 sm:w-5 sm:h-5" />
+              View Our Services
+            </button>
+          </div>
+        </div>
+
+        {/* Scroll Indicator - Now visible on all screen sizes */}
+        <div
+          className="absolute bottom-8 cursor-pointer flex flex-col items-center"
+          onClick={() => document.getElementById('services')?.scrollIntoView({ behavior: 'smooth' })}
+        >
+          <p className="mb-2 text-xs md:text-sm uppercase tracking-widest opacity-80">Scroll to explore</p>
+          <ChevronDown className="h-5 w-5 md:h-6 md:w-6 animate-bounce" />
+        </div>
+      </div>
+    </section>
+  )
+}