464 lines
26 KiB
HTML
464 lines
26 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Harbor Smith - Personalized Service Maintenance For Your Boat</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:wght@400;700;900&display=swap" rel="stylesheet">
|
|
<!-- Lucide Icons -->
|
|
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
|
|
<link rel="stylesheet" href="css/voyage-layout.css">
|
|
<link rel="stylesheet" href="css/themes.css">
|
|
</head>
|
|
<body>
|
|
<!-- Navigation (Minimal, appears on scroll) -->
|
|
<nav class="voyage-nav" id="voyageNav">
|
|
<div class="nav-container">
|
|
<div class="nav-brand">
|
|
<img src="HARBOR-SMITH-white.png" alt="Harbor Smith" class="nav-logo" id="navLogo">
|
|
<span>HARBOR SMITH</span>
|
|
</div>
|
|
<div class="nav-links">
|
|
<a href="#services" class="nav-link">Services</a>
|
|
<a href="#testimonials" class="nav-link">Testimonials</a>
|
|
<a href="#contact" class="nav-link">Contact</a>
|
|
<a href="tel:510-701-2535" class="nav-link nav-cta">Call Now</a>
|
|
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Hero Section with Video Background -->
|
|
<section class="hero-voyage" id="heroSection">
|
|
<!-- Video Background with local fallback -->
|
|
<div class="hero-video-container">
|
|
<video autoplay loop muted playsinline class="hero-video">
|
|
<source src="https://videos.pexels.com/video-files/3571264/3571264-uhd_2560_1440_30fps.mp4" type="video/mp4">
|
|
</video>
|
|
<!-- Fallback image if video fails -->
|
|
<div class="hero-image-fallback" style="background-image: url('public/golden_gate.jpg');"></div>
|
|
<!-- Warm gradient overlays -->
|
|
<div class="hero-overlay gradient-warm"></div>
|
|
<div class="hero-overlay gradient-depth"></div>
|
|
</div>
|
|
|
|
<!-- Hero Content -->
|
|
<div class="hero-content">
|
|
<!-- Logo (bigger) -->
|
|
<div class="hero-logo animate-fade-in">
|
|
<img src="HARBOR-SMITH-white.png" alt="Harbor Smith" style="height: 250px; margin: 40px 0;">
|
|
</div>
|
|
|
|
<!-- Trust Indicators -->
|
|
<div class="trust-badge animate-fade-in">
|
|
<div class="stars">
|
|
<span class="stars-icons">
|
|
<i data-lucide="star" class="star-filled"></i>
|
|
<i data-lucide="star" class="star-filled"></i>
|
|
<i data-lucide="star" class="star-filled"></i>
|
|
<i data-lucide="star" class="star-filled"></i>
|
|
<i data-lucide="star" class="star-filled"></i>
|
|
</span>
|
|
</div>
|
|
<span>Trusted by 0+ seafarers</span>
|
|
</div>
|
|
|
|
<!-- Subtext -->
|
|
<p class="hero-subtext animate-fade-up-delay">
|
|
<span style="font-size: 1.5rem; font-weight: 500; text-transform: none; letter-spacing: normal; margin-bottom: 10px; display: block;">
|
|
Personalized Service Maintenance for Your Boat
|
|
</span>
|
|
Keep your vessel pristine with San Francisco Bay's premier mobile boat maintenance service.
|
|
</p>
|
|
|
|
<!-- CTA Buttons -->
|
|
<div class="hero-actions animate-fade-up-delay-2">
|
|
<button class="btn-primary-warm" onclick="window.location.href='tel:510-701-2535'">
|
|
<i data-lucide="phone" class="btn-icon"></i>
|
|
Call (510) 701-2535
|
|
</button>
|
|
<button class="btn-secondary-warm" onclick="window.location.href='#services'">
|
|
<i data-lucide="wrench" class="btn-icon"></i>
|
|
View Our Services
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Scroll Indicator -->
|
|
<div class="scroll-indicator">
|
|
<span>Scroll to explore</span>
|
|
<div class="scroll-arrow">
|
|
<i data-lucide="chevron-down"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</section>
|
|
|
|
<!-- Welcome Section -->
|
|
<section class="welcome-section">
|
|
<div class="container">
|
|
<div class="welcome-content">
|
|
<div class="welcome-text">
|
|
<h2 class="section-title warm">Why Choose Harbor Smith?</h2>
|
|
<p class="lead-text">
|
|
We're the San Francisco Bay Area's premier mobile boat maintenance service.
|
|
Our professional team brings expert care directly to your dock, ensuring your vessel stays in pristine condition year-round.
|
|
</p>
|
|
<div class="feature-list">
|
|
<div class="feature-item">
|
|
<span class="feature-icon">
|
|
<i data-lucide="truck"></i>
|
|
</span>
|
|
<div>
|
|
<h4>Mobile Service</h4>
|
|
<p>We come to you - convenient service at your dock or marina</p>
|
|
</div>
|
|
</div>
|
|
<div class="feature-item">
|
|
<span class="feature-icon">
|
|
<i data-lucide="shield-check"></i>
|
|
</span>
|
|
<div>
|
|
<h4>Certified Professionals</h4>
|
|
<p>Experienced technicians with marine industry certifications</p>
|
|
</div>
|
|
</div>
|
|
<div class="feature-item">
|
|
<span class="feature-icon">
|
|
<i data-lucide="calendar-check"></i>
|
|
</span>
|
|
<div>
|
|
<h4>Reliable & Consistent</h4>
|
|
<p>Regular maintenance schedules tailored to your needs</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="welcome-image">
|
|
<img src="leah_1.jpeg" alt="Harbor Smith team member" class="rounded-image">
|
|
<div class="image-badge">
|
|
<span>10+ Years</span>
|
|
<span>of Excellence</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Our Services Section -->
|
|
<section class="fleet-showcase" id="services">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<h2 class="section-title">Our Premium Services</h2>
|
|
<p class="section-subtitle">Professional boat maintenance tailored to your needs</p>
|
|
</div>
|
|
|
|
<div class="services-grid" style="display: flex; flex-wrap: wrap; gap: 30px; max-width: 1200px; margin: 0 auto; justify-content: center;">
|
|
<!-- Service 1: Hull Cleaning -->
|
|
<div class="service-card" style="background: white; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); padding: 0; overflow: hidden; text-align: center; flex: 0 1 350px; min-width: 280px;">
|
|
<div style="width: 100%; height: 200px; overflow: hidden;">
|
|
<img src="diver_cleaning.jpg" alt="Professional hull cleaning service" style="width: 100%; height: 100%; object-fit: cover;">
|
|
</div>
|
|
<div style="padding: 30px;">
|
|
<h3 style="font-size: 24px; margin-bottom: 15px; color: #1e3a5f;">Hull Cleaning</h3>
|
|
<p style="color: #666; margin-bottom: 20px;">
|
|
Professional underwater hull cleaning to maintain your boat's performance and fuel efficiency.
|
|
</p>
|
|
<ul style="list-style: none; padding: 0; margin: 20px 0; text-align: left;">
|
|
<li style="padding: 8px 0;"><i data-lucide="check" style="color: #4b7cb8; width: 16px; display: inline-block; margin-right: 8px;"></i> Removes marine growth</li>
|
|
<li style="padding: 8px 0;"><i data-lucide="check" style="color: #4b7cb8; width: 16px; display: inline-block; margin-right: 8px;"></i> Improves fuel efficiency</li>
|
|
<li style="padding: 8px 0;"><i data-lucide="check" style="color: #4b7cb8; width: 16px; display: inline-block; margin-right: 8px;"></i> Extends hull life</li>
|
|
</ul>
|
|
<button class="btn-primary-warm" onclick="window.location.href='tel:510-701-2535'" style="width: 100%;">Get Quote</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Service 2: Exterior Wash & Wax -->
|
|
<div class="service-card" style="background: white; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); padding: 0; overflow: hidden; text-align: center; flex: 0 1 350px; min-width: 280px;">
|
|
<div style="width: 100%; height: 200px; overflow: hidden;">
|
|
<img src="Washdown.jpg" alt="Professional boat wash and wax service" style="width: 100%; height: 100%; object-fit: cover;">
|
|
</div>
|
|
<div style="padding: 30px;">
|
|
<h3 style="font-size: 24px; margin-bottom: 15px; color: #1e3a5f;">Exterior Wash & Wax</h3>
|
|
<p style="color: #666; margin-bottom: 20px;">
|
|
Complete exterior detailing to keep your boat looking pristine and protected.
|
|
</p>
|
|
<ul style="list-style: none; padding: 0; margin: 20px 0; text-align: left;">
|
|
<li style="padding: 8px 0;"><i data-lucide="check" style="color: #4b7cb8; width: 16px; display: inline-block; margin-right: 8px;"></i> Deep cleaning wash</li>
|
|
<li style="padding: 8px 0;"><i data-lucide="check" style="color: #4b7cb8; width: 16px; display: inline-block; margin-right: 8px;"></i> UV protection wax</li>
|
|
<li style="padding: 8px 0;"><i data-lucide="check" style="color: #4b7cb8; width: 16px; display: inline-block; margin-right: 8px;"></i> Gel coat restoration</li>
|
|
</ul>
|
|
<button class="btn-primary-warm" onclick="window.location.href='tel:510-701-2535'" style="width: 100%;">Get Quote</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Service 3: Anode Changes -->
|
|
<div class="service-card" style="background: white; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); padding: 0; overflow: hidden; text-align: center; flex: 0 1 350px; min-width: 280px;">
|
|
<div style="width: 100%; height: 200px; overflow: hidden;">
|
|
<img src="Anodes.jpg" alt="Zinc anode replacement service" style="width: 100%; height: 100%; object-fit: cover;">
|
|
</div>
|
|
<div style="padding: 30px;">
|
|
<h3 style="font-size: 24px; margin-bottom: 15px; color: #1e3a5f;">Anode Changes</h3>
|
|
<p style="color: #666; margin-bottom: 20px;">
|
|
Essential corrosion protection with regular zinc anode inspection and replacement.
|
|
</p>
|
|
<ul style="list-style: none; padding: 0; margin: 20px 0; text-align: left;">
|
|
<li style="padding: 8px 0;"><i data-lucide="check" style="color: #4b7cb8; width: 16px; display: inline-block; margin-right: 8px;"></i> Prevents corrosion</li>
|
|
<li style="padding: 8px 0;"><i data-lucide="check" style="color: #4b7cb8; width: 16px; display: inline-block; margin-right: 8px;"></i> Regular inspection</li>
|
|
<li style="padding: 8px 0;"><i data-lucide="check" style="color: #4b7cb8; width: 16px; display: inline-block; margin-right: 8px;"></i> Marine-grade materials</li>
|
|
</ul>
|
|
<button class="btn-primary-warm" onclick="window.location.href='tel:510-701-2535'" style="width: 100%;">Get Quote</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Service 4: Interior Detailing -->
|
|
<div class="service-card" style="background: white; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); padding: 0; overflow: hidden; text-align: center; flex: 0 1 350px; min-width: 280px;">
|
|
<div style="width: 100%; height: 200px; overflow: hidden;">
|
|
<img src="Interior.jpg" alt="Professional interior detailing service" style="width: 100%; height: 100%; object-fit: cover;">
|
|
</div>
|
|
<div style="padding: 30px;">
|
|
<h3 style="font-size: 24px; margin-bottom: 15px; color: #1e3a5f;">Interior Detailing</h3>
|
|
<p style="color: #666; margin-bottom: 20px;">
|
|
Thorough interior cleaning and conditioning for a fresh, comfortable cabin.
|
|
</p>
|
|
<ul style="list-style: none; padding: 0; margin: 20px 0; text-align: left;">
|
|
<li style="padding: 8px 0;"><i data-lucide="check" style="color: #4b7cb8; width: 16px; display: inline-block; margin-right: 8px;"></i> Upholstery cleaning</li>
|
|
<li style="padding: 8px 0;"><i data-lucide="check" style="color: #4b7cb8; width: 16px; display: inline-block; margin-right: 8px;"></i> Mold & mildew treatment</li>
|
|
<li style="padding: 8px 0;"><i data-lucide="check" style="color: #4b7cb8; width: 16px; display: inline-block; margin-right: 8px;"></i> Surface conditioning</li>
|
|
</ul>
|
|
<button class="btn-primary-warm" onclick="window.location.href='tel:510-701-2535'" style="width: 100%;">Get Quote</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Trust Indicators Section -->
|
|
<section class="services-section">
|
|
<div class="container">
|
|
<div class="service-stats">
|
|
<div class="stat-item">
|
|
<i data-lucide="ship" class="stat-icon"></i>
|
|
<span class="stat-number">200+</span>
|
|
<span class="stat-label">Vessels Maintained</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<i data-lucide="award" class="stat-icon"></i>
|
|
<span class="stat-number">10+</span>
|
|
<span class="stat-label">Years Experience</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<i data-lucide="users" class="stat-icon"></i>
|
|
<span class="stat-number">500+</span>
|
|
<span class="stat-label">Happy Clients</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<i data-lucide="shield-check" class="stat-icon"></i>
|
|
<span class="stat-number">100%</span>
|
|
<span class="stat-label">Mobile Service</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Testimonials Section -->
|
|
<section class="experience-stories" id="testimonials">
|
|
<div class="story-container">
|
|
<h2 class="section-title center">What Our Customers Say</h2>
|
|
|
|
<div class="testimonial-highlight" style="max-width: 800px; margin: 40px auto; padding: 40px; background: white; border-radius: 15px; box-shadow: 0 8px 30px rgba(0,0,0,0.1); text-align: center;">
|
|
<div class="stars" style="margin-bottom: 20px;">
|
|
<i data-lucide="star" style="color: #fbbf24; fill: #fbbf24; width: 24px; height: 24px; display: inline-block;"></i>
|
|
<i data-lucide="star" style="color: #fbbf24; fill: #fbbf24; width: 24px; height: 24px; display: inline-block;"></i>
|
|
<i data-lucide="star" style="color: #fbbf24; fill: #fbbf24; width: 24px; height: 24px; display: inline-block;"></i>
|
|
<i data-lucide="star" style="color: #fbbf24; fill: #fbbf24; width: 24px; height: 24px; display: inline-block;"></i>
|
|
<i data-lucide="star" style="color: #fbbf24; fill: #fbbf24; width: 24px; height: 24px; display: inline-block;"></i>
|
|
</div>
|
|
<blockquote style="font-size: 22px; color: #1e3a5f; font-style: italic; line-height: 1.6; margin-bottom: 20px;">
|
|
"They do an amazing job and are always reliable! I never have to worry about my boat's condition."
|
|
</blockquote>
|
|
<cite style="font-weight: 600; color: #4b7cb8; font-size: 18px;">— John D.</cite>
|
|
</div>
|
|
|
|
<div class="stories-grid" style="display: flex; flex-wrap: wrap; gap: 30px; justify-content: center; max-width: 1200px; margin: 0 auto;">
|
|
<!-- Additional testimonial cards -->
|
|
<div class="story-card" style="flex: 0 1 350px; min-width: 280px;">
|
|
<div class="story-content">
|
|
<div class="stars" style="margin-bottom: 15px;">
|
|
<i data-lucide="star" style="color: #fbbf24; fill: #fbbf24; width: 18px; height: 18px;"></i>
|
|
<i data-lucide="star" style="color: #fbbf24; fill: #fbbf24; width: 18px; height: 18px;"></i>
|
|
<i data-lucide="star" style="color: #fbbf24; fill: #fbbf24; width: 18px; height: 18px;"></i>
|
|
<i data-lucide="star" style="color: #fbbf24; fill: #fbbf24; width: 18px; height: 18px;"></i>
|
|
<i data-lucide="star" style="color: #fbbf24; fill: #fbbf24; width: 18px; height: 18px;"></i>
|
|
</div>
|
|
<h3>Professional Service</h3>
|
|
<p>"Harbor Smith keeps my boat in pristine condition. Their attention to detail is unmatched."</p>
|
|
<span style="color: #4b7cb8; font-weight: 600;">— Michael R.</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="story-card" style="flex: 0 1 350px; min-width: 280px;">
|
|
<div class="story-content">
|
|
<div class="stars" style="margin-bottom: 15px;">
|
|
<i data-lucide="star" style="color: #fbbf24; fill: #fbbf24; width: 18px; height: 18px;"></i>
|
|
<i data-lucide="star" style="color: #fbbf24; fill: #fbbf24; width: 18px; height: 18px;"></i>
|
|
<i data-lucide="star" style="color: #fbbf24; fill: #fbbf24; width: 18px; height: 18px;"></i>
|
|
<i data-lucide="star" style="color: #fbbf24; fill: #fbbf24; width: 18px; height: 18px;"></i>
|
|
<i data-lucide="star" style="color: #fbbf24; fill: #fbbf24; width: 18px; height: 18px;"></i>
|
|
</div>
|
|
<h3>Convenient & Reliable</h3>
|
|
<p>"Mobile service that comes to my dock - it doesn't get better than that! Highly recommended."</p>
|
|
<span style="color: #4b7cb8; font-weight: 600;">— Sarah L.</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="story-card" style="flex: 0 1 350px; min-width: 280px;">
|
|
<div class="story-content">
|
|
<div class="stars" style="margin-bottom: 15px;">
|
|
<i data-lucide="star" style="color: #fbbf24; fill: #fbbf24; width: 18px; height: 18px;"></i>
|
|
<i data-lucide="star" style="color: #fbbf24; fill: #fbbf24; width: 18px; height: 18px;"></i>
|
|
<i data-lucide="star" style="color: #fbbf24; fill: #fbbf24; width: 18px; height: 18px;"></i>
|
|
<i data-lucide="star" style="color: #fbbf24; fill: #fbbf24; width: 18px; height: 18px;"></i>
|
|
<i data-lucide="star" style="color: #fbbf24; fill: #fbbf24; width: 18px; height: 18px;"></i>
|
|
</div>
|
|
<h3>Excellent Value</h3>
|
|
<p>"Fair pricing and exceptional quality. They've been maintaining my yacht for 5 years now."</p>
|
|
<span style="color: #4b7cb8; font-weight: 600;">— David K.</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Gallery Section -->
|
|
<section class="gallery-section">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<h2 class="section-title">Our Work in Action</h2>
|
|
<p class="section-subtitle">Professional maintenance services delivered with care</p>
|
|
</div>
|
|
<div class="image-gallery">
|
|
<div class="gallery-item large">
|
|
<img src="diver_cleaning_2.jpg" alt="Professional hull cleaning">
|
|
<div class="gallery-overlay">
|
|
<span class="gallery-caption">Expert Hull Cleaning</span>
|
|
</div>
|
|
</div>
|
|
<div class="gallery-item">
|
|
<img src="ExtCleaning.jpg" alt="Exterior cleaning service">
|
|
<div class="gallery-overlay">
|
|
<span class="gallery-caption">Detailed Cleaning</span>
|
|
</div>
|
|
</div>
|
|
<div class="gallery-item">
|
|
<img src="Washdown2.jpg" alt="Professional washdown">
|
|
<div class="gallery-overlay">
|
|
<span class="gallery-caption">Thorough Washdown</span>
|
|
</div>
|
|
</div>
|
|
<div class="gallery-item">
|
|
<img src="Helm.jpg" alt="Interior maintenance">
|
|
<div class="gallery-overlay">
|
|
<span class="gallery-caption">Interior Care</span>
|
|
</div>
|
|
</div>
|
|
<div class="gallery-item">
|
|
<img src="Foredeck.jpg" alt="Deck maintenance">
|
|
<div class="gallery-overlay">
|
|
<span class="gallery-caption">Deck Service</span>
|
|
</div>
|
|
</div>
|
|
<div class="gallery-item">
|
|
<img src="Waxing.jpg" alt="Boat waxing service">
|
|
<div class="gallery-overlay">
|
|
<span class="gallery-caption">Protective Waxing</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Interactive Booking CTA -->
|
|
<section class="booking-cta" style="background: linear-gradient(135deg, rgba(30, 58, 95, 0.9), rgba(75, 124, 184, 0.85)), url('sf_bay_exposure.jpg') center/cover no-repeat; position: relative;">
|
|
<div class="booking-container">
|
|
<div class="booking-content">
|
|
<h2 class="booking-title">Ready to Schedule Your Service?</h2>
|
|
<p class="booking-subtitle">
|
|
Join hundreds of boat owners who trust Harbor Smith for professional maintenance
|
|
</p>
|
|
|
|
<div class="booking-options">
|
|
<div class="booking-card">
|
|
<span class="booking-icon">
|
|
<i data-lucide="calendar"></i>
|
|
</span>
|
|
<h3>Schedule Service</h3>
|
|
<p>Book your maintenance appointment</p>
|
|
<button class="btn-booking" onclick="window.location.href='maintenance-booking.html'">Book Now</button>
|
|
</div>
|
|
|
|
<div class="booking-card featured">
|
|
<span class="booking-icon">
|
|
<i data-lucide="phone"></i>
|
|
</span>
|
|
<h3>Call Us Today</h3>
|
|
<p>Get a personalized quote</p>
|
|
<button class="btn-booking primary" onclick="window.location.href='tel:510-701-2535'">Call (510) 701-2535</button>
|
|
</div>
|
|
|
|
<div class="booking-card">
|
|
<span class="booking-icon">
|
|
<i data-lucide="mail"></i>
|
|
</span>
|
|
<h3>Email Us</h3>
|
|
<p>Send us your service request</p>
|
|
<button class="btn-booking" onclick="window.location.href='mailto:hello@harborsmith.co'">Contact Us</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer class="voyage-footer" id="contact">
|
|
<div class="footer-container">
|
|
<div class="footer-content">
|
|
<div class="footer-brand">
|
|
<img src="HARBOR-SMITH-white.png" alt="Harbor Smith" class="footer-logo">
|
|
<h3>HARBOR SMITH</h3>
|
|
<p>Your trusted partner for professional boat maintenance in the San Francisco Bay Area</p>
|
|
<div class="social-links">
|
|
<a href="#" aria-label="Facebook"><i data-lucide="facebook"></i></a>
|
|
<a href="#" aria-label="Instagram"><i data-lucide="instagram"></i></a>
|
|
<a href="#" aria-label="Twitter"><i data-lucide="twitter"></i></a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer-contact">
|
|
<h4>Get in Touch</h4>
|
|
<p><i data-lucide="map-pin" class="footer-icon"></i> San Francisco Bay Area</p>
|
|
<p><i data-lucide="phone" class="footer-icon"></i> (510) 701-2535</p>
|
|
<p><i data-lucide="mail" class="footer-icon"></i> hello@harborsmith.co</p>
|
|
<p><i data-lucide="clock" class="footer-icon"></i> Mobile Service Available 7 Days</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer-bottom">
|
|
<p>© 2025 Harbor Smith Boat Maintenance Services. All rights reserved.</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Layout Switcher -->
|
|
|
|
<script src="js/voyage-layout.js"></script>
|
|
<script>
|
|
// Initialize Lucide icons after DOM is ready
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
lucide.createIcons();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |