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>
2025-09-26 16:12:00 +02:00
parent 256f7eb069
commit d0f33f66f3
109 changed files with 3113 additions and 43 deletions
--- a/README.md
+++ b/README.md
@@ -0,0 +1,74 @@
+# HarborSmith - Professional Boat Maintenance Services
+
+Harbor Smith provides personalized service maintenance for boats in the San Francisco Bay Area.
+
+## Tech Stack
+
+- **Framework**: Next.js 15
+- **Styling**: Tailwind CSS v4
+- **Icons**: Lucide React
+- **Language**: TypeScript
+
+## Features
+
+✅ **Complete Website Sections**
+- Hero section with video background
+- About section (Why Choose Harbor Smith)
+- Services showcase (Hull Cleaning, Exterior Cleaning, Interior Detailing)
+- Contact section with CTAs
+- Footer with branding
+
+✅ **Mobile Optimized**
+- Responsive design for all screen sizes
+- Touch-friendly CTAs
+- Optimized spacing and typography
+- Mobile-specific UI adjustments
+
+✅ **iOS Safari Compatible**
+- Video background works on all devices
+- Safe area handling for modern iPhones
+- Smooth scrolling animations
+
+## Getting Started
+
+```bash
+# Install dependencies
+npm install
+
+# Run development server
+npm run dev
+
+# Build for production
+npm run build
+
+# Start production server
+npm start
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser.
+
+## Project Structure
+
+```
+/
+├── app/              # Next.js app directory
+├── components/       # React components
+├── public/          # Static assets (images, videos)
+├── styles/          # Global styles
+└── vue-archive/     # Archived Vue/Nuxt version
+```
+
+## Deployment
+
+This project is ready for deployment to Vercel, Netlify, or any Node.js hosting platform.
+
+```bash
+npm run build
+npm start
+```
+
+## Contact
+
+- Phone: (510) 701-2535
+- Email: info@harborsmith.com
+- Service Area: San Francisco Bay Area
--- a/app/globals.css
+++ b/app/globals.css
@@ -0,0 +1,19 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* iOS Safari Safe Area Support */
+html {
+  /* Allow content to extend into safe areas */
+  min-height: 100vh;
+  min-height: -webkit-fill-available;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  min-height: 100vh;
+  min-height: -webkit-fill-available;
+  /* Transparent background to allow video to show through */
+  background: transparent;
+}
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -0,0 +1,42 @@
+import type { Metadata, Viewport } from 'next'
+import { Inter, Playfair_Display } from 'next/font/google'
+import './globals.css'
+
+const inter = Inter({
+  subsets: ['latin'],
+  variable: '--font-sans',
+})
+
+const playfair = Playfair_Display({
+  subsets: ['latin'],
+  variable: '--font-serif',
+})
+
+export const viewport: Viewport = {
+  width: 'device-width',
+  initialScale: 1,
+  viewportFit: 'cover', // Critical for iOS Safari safe areas
+}
+
+export const metadata: Metadata = {
+  title: 'Harbor Smith - Personalized Service Maintenance For Your Boat',
+  description: 'Reliable Care Above and Below the Waterline. Servicing the Bay Area and Beyond!',
+  appleWebApp: {
+    capable: true,
+    statusBarStyle: 'black-translucent',
+  },
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en" className={`${inter.variable} ${playfair.variable}`}>
+      <body className="font-sans">
+        {children}
+      </body>
+    </html>
+  )
+}
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -0,0 +1,21 @@
+import HeroSection from '@/components/HeroSection'
+import AboutSection from '@/components/AboutSection'
+import ServicesSection from '@/components/ServicesSection'
+import TrustIndicators from '@/components/TrustIndicators'
+import ContactSection from '@/components/ContactSection'
+import Footer from '@/components/Footer'
+
+export default function HomePage() {
+  return (
+    <>
+      <main>
+        <HeroSection />
+        <AboutSection />
+        <ServicesSection />
+        <TrustIndicators />
+        <ContactSection />
+      </main>
+      <Footer />
+    </>
+  )
+}
--- a/components/AboutSection.tsx
+++ b/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>
+  )
+}
--- a/components/ContactSection.tsx
+++ b/components/ContactSection.tsx
@@ -0,0 +1,56 @@
+'use client'
+
+import { Phone, Mail, MapPin, Clock } from 'lucide-react'
+
+export default function ContactSection() {
+  return (
+    <section id="contact" className="py-16 md:py-24 bg-harbor-blue text-white">
+      <div className="container mx-auto px-4">
+        <div className="max-w-4xl mx-auto text-center">
+          <h2 className="text-3xl md:text-4xl font-bold mb-4">Ready to Schedule Service?</h2>
+          <p className="text-lg md:text-xl mb-12 opacity-90">
+            Contact us today for a free consultation and quote
+          </p>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+            {/* Contact Info */}
+            <div className="space-y-4">
+              <div className="flex items-center justify-center md:justify-start gap-3">
+                <Phone className="w-5 h-5 text-harbor-gold" />
+                <a href="tel:510-701-2535" className="hover:text-harbor-gold transition-colors">
+                  (510) 701-2535
+                </a>
+              </div>
+              <div className="flex items-center justify-center md:justify-start gap-3">
+                <Mail className="w-5 h-5 text-harbor-gold" />
+                <a href="mailto:info@harborsmith.com" className="hover:text-harbor-gold transition-colors">
+                  info@harborsmith.com
+                </a>
+              </div>
+              <div className="flex items-center justify-center md:justify-start gap-3">
+                <MapPin className="w-5 h-5 text-harbor-gold" />
+                <span>San Francisco Bay Area</span>
+              </div>
+              <div className="flex items-center justify-center md:justify-start gap-3">
+                <Clock className="w-5 h-5 text-harbor-gold" />
+                <span>Mon-Sat: 8AM-6PM</span>
+              </div>
+            </div>
+
+            {/* CTA */}
+            <div className="flex flex-col justify-center">
+              <h3 className="text-2xl font-bold mb-4">Get Your Free Quote</h3>
+              <p className="mb-6 opacity-90">Professional service at competitive prices</p>
+              <a
+                href="tel:510-701-2535"
+                className="inline-block bg-harbor-gold text-white font-semibold py-4 px-8 rounded-lg hover:bg-harbor-amber transition-colors mx-auto md:mx-0"
+              >
+                Call Now: (510) 701-2535
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -0,0 +1,25 @@
+export default function Footer() {
+  return (
+    <footer className="bg-gray-900 text-white py-8">
+      <div className="container mx-auto px-4">
+        <div className="flex flex-col md:flex-row justify-between items-center">
+          <div className="mb-4 md:mb-0">
+            <img
+              src="/HARBOR-SMITH-white.png"
+              alt="Harbor Smith"
+              className="h-12 md:h-16 w-auto"
+            />
+          </div>
+          <div className="text-center md:text-right">
+            <p className="text-sm opacity-80">
+              © {new Date().getFullYear()} Harbor Smith Marine Services. All rights reserved.
+            </p>
+            <p className="text-xs opacity-60 mt-1">
+              Professional Boat Maintenance | San Francisco Bay Area
+            </p>
+          </div>
+        </div>
+      </div>
+    </footer>
+  )
+}
--- a/components/HeroSection.tsx
+++ b/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>
+  )
+}
--- a/components/ServicesSection.tsx
+++ b/components/ServicesSection.tsx
@@ -0,0 +1,99 @@
+'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>
+  )
+}
--- a/components/TrustIndicators.tsx
+++ b/components/TrustIndicators.tsx
@@ -0,0 +1,29 @@
+'use client'
+
+import { Award, Wrench, ShieldCheck } from 'lucide-react'
+
+export default function TrustIndicators() {
+  return (
+    <section className="py-16 md:py-20 bg-white">
+      <div className="container mx-auto px-4">
+        <div className="grid grid-cols-2 md:grid-cols-3 gap-8 md:gap-10 max-w-4xl mx-auto">
+          <div className="flex flex-col items-center text-center">
+            <Award className="w-12 h-12 text-harbor-gold mb-4" />
+            <span className="text-3xl md:text-4xl font-bold text-harbor-blue">20+</span>
+            <span className="text-sm md:text-base text-gray-600 mt-1">Years Experience</span>
+          </div>
+          <div className="flex flex-col items-center text-center">
+            <Wrench className="w-12 h-12 text-harbor-gold mb-4" />
+            <span className="text-3xl md:text-4xl font-bold text-harbor-blue">100%</span>
+            <span className="text-sm md:text-base text-gray-600 mt-1">Customizable Service</span>
+          </div>
+          <div className="flex flex-col items-center text-center col-span-2 md:col-span-1">
+            <ShieldCheck className="w-12 h-12 text-harbor-gold mb-4" />
+            <span className="text-3xl md:text-4xl font-bold text-harbor-blue">100%</span>
+            <span className="text-sm md:text-base text-gray-600 mt-1">Certified Experts</span>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
--- a/next-env.d.ts
+++ b/next-env.d.ts
@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+/// <reference path="./.next/types/routes.d.ts" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
--- a/next.config.js
+++ b/next.config.js
@@ -0,0 +1,9 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  images: {
+    domains: ['videos.pexels.com'],
+  },
+}
+
+module.exports = nextConfig
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,15 +1,29 @@
 {
-  "name": "harborsmith",
+  "name": "harborsmith-nextjs",
  "version": "1.0.0",
+  "description": "",
  "main": "index.js",
  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
-  "description": "",
+  "type": "commonjs",
  "dependencies": {
-    "@playwright/test": "^1.55.0"
+    "@types/node": "^24.5.2",
+    "@types/react": "^19.1.13",
+    "@types/react-dom": "^19.1.9",
+    "autoprefixer": "^10.4.21",
+    "lucide-react": "^0.544.0",
+    "next": "^15.5.4",
+    "postcss": "^8.5.6",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "tailwindcss": "^3.4.17",
+    "typescript": "^5.9.2"
  }
 }
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
--- a/apps/website/public/Anodes.jpg
+++ b/apps/website/public/Anodes.jpg
--- a/apps/website/public/Calendar.jpg
+++ b/apps/website/public/Calendar.jpg
--- a/apps/website/public/ExtCleaning.jpg
+++ b/apps/website/public/ExtCleaning.jpg
--- a/apps/website/public/Foredeck.jpg
+++ b/apps/website/public/Foredeck.jpg
--- a/apps/website/public/HARBOR-SMITH-white.png
+++ b/apps/website/public/HARBOR-SMITH-white.png
--- a/apps/website/public/HARBOR-SMITH_navy.png
+++ b/apps/website/public/HARBOR-SMITH_navy.png
--- a/apps/website/public/Helm.jpg
+++ b/apps/website/public/Helm.jpg
--- a/apps/website/public/Hull
+++ b/apps/website/public/Hull
--- a/apps/website/public/Interior.jpg
+++ b/apps/website/public/Interior.jpg
--- a/apps/website/public/Licensed.jpg
+++ b/apps/website/public/Licensed.jpg
--- a/apps/website/public/QRCode-White-sm.png
+++ b/apps/website/public/QRCode-White-sm.png
--- a/apps/website/public/QRCode-White.png
+++ b/apps/website/public/QRCode-White.png
--- a/apps/website/public/QRCode.png
+++ b/apps/website/public/QRCode.png
--- a/apps/website/public/SpecialRequest.jpg
+++ b/apps/website/public/SpecialRequest.jpg
--- a/apps/website/public/Washdown.jpg
+++ b/apps/website/public/Washdown.jpg
--- a/apps/website/public/Washdown2.jpg
+++ b/apps/website/public/Washdown2.jpg
--- a/apps/website/public/Waxing.jpg
+++ b/apps/website/public/Waxing.jpg
--- a/apps/website/public/diver_cleaning.jpg
+++ b/apps/website/public/diver_cleaning.jpg
--- a/apps/website/public/diver_cleaning_2.jpg
+++ b/apps/website/public/diver_cleaning_2.jpg
--- a/apps/website/public/golden_gate.jpg
+++ b/apps/website/public/golden_gate.jpg
--- a/apps/website/public/iStock-2189089654.jpg
+++ b/apps/website/public/iStock-2189089654.jpg
--- a/apps/website/public/iStock-504868014.jpg
+++ b/apps/website/public/iStock-504868014.jpg
--- a/apps/website/public/iStock-923244752.jpg
+++ b/apps/website/public/iStock-923244752.jpg
--- a/apps/website/public/iStock-923244752b.jpg
+++ b/apps/website/public/iStock-923244752b.jpg
--- a/apps/website/public/kid_1.jpeg
+++ b/apps/website/public/kid_1.jpeg
--- a/apps/website/public/leah_1.jpeg
+++ b/apps/website/public/leah_1.jpeg
--- a/apps/website/public/sausalito-boat-show-2024.jpg
+++ b/apps/website/public/sausalito-boat-show-2024.jpg
--- a/apps/website/public/sf_bay_exposure.jpg
+++ b/apps/website/public/sf_bay_exposure.jpg
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -0,0 +1,25 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './components/**/*.{js,ts,jsx,tsx,mdx}',
+    './app/**/*.{js,ts,jsx,tsx,mdx}',
+  ],
+  theme: {
+    extend: {
+      colors: {
+        'harbor-blue': '#001f3f',
+        'harbor-navy': '#1e3a5f',
+        'harbor-gold': '#b48b4e',
+        'harbor-amber': '#9d7943',
+        'harbor-yellow': '#c9a56f',
+        'harbor-light': '#f0f0f0'
+      },
+      fontFamily: {
+        sans: ['Inter', 'sans-serif'],
+        serif: ['Playfair Display', 'serif']
+      },
+    },
+  },
+  plugins: [],
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}
--- a/vue-archive/apps/website/.gitignore
+++ b/vue-archive/apps/website/.gitignore
--- a/vue-archive/apps/website/Dockerfile
+++ b/vue-archive/apps/website/Dockerfile
--- a/vue-archive/apps/website/Dockerfile.prod
+++ b/vue-archive/apps/website/Dockerfile.prod
--- a/vue-archive/apps/website/README.md
+++ b/vue-archive/apps/website/README.md
--- a/vue-archive/apps/website/assets/css/main.css
+++ b/vue-archive/apps/website/assets/css/main.css
--- a/vue-archive/apps/website/assets/css/themes.css
+++ b/vue-archive/apps/website/assets/css/themes.css
--- a/vue-archive/apps/website/assets/css/voyage-layout.css
+++ b/vue-archive/apps/website/assets/css/voyage-layout.css
--- a/vue-archive/apps/website/components/AppFooter.vue
+++ b/vue-archive/apps/website/components/AppFooter.vue
--- a/vue-archive/apps/website/components/AppNavbar.vue
+++ b/vue-archive/apps/website/components/AppNavbar.vue
--- a/vue-archive/apps/website/components/BookingSection.vue
+++ b/vue-archive/apps/website/components/BookingSection.vue
--- a/vue-archive/apps/website/components/GallerySection.vue
+++ b/vue-archive/apps/website/components/GallerySection.vue
--- a/vue-archive/apps/website/components/HeroSection.vue
+++ b/vue-archive/apps/website/components/HeroSection.vue
--- a/vue-archive/apps/website/components/ServicesSection.vue
+++ b/vue-archive/apps/website/components/ServicesSection.vue
--- a/vue-archive/apps/website/components/TestimonialsSection.vue
+++ b/vue-archive/apps/website/components/TestimonialsSection.vue
--- a/vue-archive/apps/website/components/TrustIndicators.vue
+++ b/vue-archive/apps/website/components/TrustIndicators.vue
--- a/vue-archive/apps/website/components/WelcomeSection.vue
+++ b/vue-archive/apps/website/components/WelcomeSection.vue
--- a/vue-archive/apps/website/composables/useIntersectionAnimations.js
+++ b/vue-archive/apps/website/composables/useIntersectionAnimations.js
--- a/vue-archive/apps/website/composables/useParallax.js
+++ b/vue-archive/apps/website/composables/useParallax.js
--- a/vue-archive/apps/website/composables/useRipple.js
+++ b/vue-archive/apps/website/composables/useRipple.js
--- a/vue-archive/apps/website/composables/useSmoothScroll.ts
+++ b/vue-archive/apps/website/composables/useSmoothScroll.ts
--- a/vue-archive/apps/website/docker-compose.yml
+++ b/vue-archive/apps/website/docker-compose.yml
--- a/vue-archive/apps/website/layouts/default.vue
+++ b/vue-archive/apps/website/layouts/default.vue
--- a/vue-archive/apps/website/nginx.conf
+++ b/vue-archive/apps/website/nginx.conf
--- a/vue-archive/apps/website/nuxt.config.ts
+++ b/vue-archive/apps/website/nuxt.config.ts
--- a/vue-archive/apps/website/package-lock.json
+++ b/vue-archive/apps/website/package-lock.json
--- a/vue-archive/apps/website/package.json
+++ b/vue-archive/apps/website/package.json
--- a/vue-archive/apps/website/pages/index.vue
+++ b/vue-archive/apps/website/pages/index.vue
--- a/vue-archive/apps/website/plugins/lucide.client.js
+++ b/vue-archive/apps/website/plugins/lucide.client.js
--- a/vue-archive/apps/website/public/Anodes.jpg
+++ b/vue-archive/apps/website/public/Anodes.jpg
--- a/vue-archive/apps/website/public/Calendar.jpg
+++ b/vue-archive/apps/website/public/Calendar.jpg
--- a/vue-archive/apps/website/public/ExtCleaning.jpg
+++ b/vue-archive/apps/website/public/ExtCleaning.jpg
--- a/vue-archive/apps/website/public/Foredeck.jpg
+++ b/vue-archive/apps/website/public/Foredeck.jpg
--- a/vue-archive/apps/website/public/HARBOR-SMITH-white.png
+++ b/vue-archive/apps/website/public/HARBOR-SMITH-white.png
--- a/vue-archive/apps/website/public/HARBOR-SMITH_navy.png
+++ b/vue-archive/apps/website/public/HARBOR-SMITH_navy.png
--- a/vue-archive/apps/website/public/Helm.jpg
+++ b/vue-archive/apps/website/public/Helm.jpg
--- a/vue-archive/apps/website/public/Hull
+++ b/vue-archive/apps/website/public/Hull
--- a/vue-archive/apps/website/public/Interior.jpg
+++ b/vue-archive/apps/website/public/Interior.jpg
--- a/vue-archive/apps/website/public/Licensed.jpg
+++ b/vue-archive/apps/website/public/Licensed.jpg
--- a/vue-archive/apps/website/public/QRCode-White-sm.png
+++ b/vue-archive/apps/website/public/QRCode-White-sm.png
--- a/vue-archive/apps/website/public/QRCode-White.png
+++ b/vue-archive/apps/website/public/QRCode-White.png
--- a/vue-archive/apps/website/public/QRCode.png
+++ b/vue-archive/apps/website/public/QRCode.png
--- a/vue-archive/apps/website/public/SpecialRequest.jpg
+++ b/vue-archive/apps/website/public/SpecialRequest.jpg
--- a/vue-archive/apps/website/public/Washdown.jpg
+++ b/vue-archive/apps/website/public/Washdown.jpg
--- a/vue-archive/apps/website/public/Washdown2.jpg
+++ b/vue-archive/apps/website/public/Washdown2.jpg
--- a/vue-archive/apps/website/public/Waxing.jpg
+++ b/vue-archive/apps/website/public/Waxing.jpg
--- a/vue-archive/apps/website/public/_robots.txt
+++ b/vue-archive/apps/website/public/_robots.txt
--- a/vue-archive/apps/website/public/diver_cleaning.jpg
+++ b/vue-archive/apps/website/public/diver_cleaning.jpg
--- a/vue-archive/apps/website/public/diver_cleaning_2.jpg
+++ b/vue-archive/apps/website/public/diver_cleaning_2.jpg
--- a/vue-archive/apps/website/public/favicon.ico
+++ b/vue-archive/apps/website/public/favicon.ico
--- a/vue-archive/apps/website/public/golden_gate.jpg
+++ b/vue-archive/apps/website/public/golden_gate.jpg
--- a/vue-archive/apps/website/public/iStock-2189089654.jpg
+++ b/vue-archive/apps/website/public/iStock-2189089654.jpg
--- a/vue-archive/apps/website/public/iStock-504868014.jpg
+++ b/vue-archive/apps/website/public/iStock-504868014.jpg
--- a/vue-archive/apps/website/public/iStock-923244752.jpg
+++ b/vue-archive/apps/website/public/iStock-923244752.jpg
--- a/vue-archive/apps/website/public/iStock-923244752b.jpg
+++ b/vue-archive/apps/website/public/iStock-923244752b.jpg
--- a/vue-archive/apps/website/public/kid_1.jpeg
+++ b/vue-archive/apps/website/public/kid_1.jpeg
--- a/Show More
+++ b/Show More