diff --git a/README.md b/README.md new file mode 100644 index 0000000..f29c1d2 --- /dev/null +++ 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 \ No newline at end of file diff --git a/app/globals.css b/app/globals.css new file mode 100644 index 0000000..8b98515 --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/app/layout.tsx b/app/layout.tsx new file mode 100644 index 0000000..0b5be39 --- /dev/null +++ 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 ( + + + {children} + + + ) +} \ No newline at end of file diff --git a/app/page.tsx b/app/page.tsx new file mode 100644 index 0000000..d8e2411 --- /dev/null +++ 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 ( + <> +
+ + + + + +
+