584 lines
29 KiB
HTML
584 lines
29 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>HarborSmith - Your Adventure Awaits</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="logo.jpg" alt="HarborSmith" class="nav-logo">
|
||
<span>HarborSmith</span>
|
||
</div>
|
||
<div class="nav-links">
|
||
<a href="#fleet" class="nav-link">Fleet</a>
|
||
<a href="#services" class="nav-link">Services</a>
|
||
<a href="#experiences" class="nav-link">Experiences</a>
|
||
<a href="about.html" class="nav-link">About</a>
|
||
<a href="portal-login.html" class="nav-link">Client Portal</a>
|
||
<a href="charter-booking-1.html" class="nav-link nav-cta">Book Now</a>
|
||
|
||
<!-- Theme Switcher -->
|
||
<div class="theme-switcher">
|
||
<button class="theme-btn" id="themeToggle" aria-label="Change theme">
|
||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||
<circle cx="10" cy="10" r="8" stroke="currentColor" stroke-width="2"/>
|
||
<path d="M10 2 L10 18 M2 10 L18 10" stroke="currentColor" stroke-width="1" opacity="0.3"/>
|
||
</svg>
|
||
</button>
|
||
<div class="theme-dropdown" id="themeDropdown">
|
||
<button class="theme-option" data-theme="nautical">
|
||
<span class="theme-colors">
|
||
<span style="background: #1e3a5f"></span>
|
||
<span style="background: #dc2626"></span>
|
||
<span style="background: #ffffff"></span>
|
||
</span>
|
||
<span>Classic Nautical</span>
|
||
</button>
|
||
<button class="theme-option" data-theme="coastal-dawn">
|
||
<span class="theme-colors">
|
||
<span style="background: #A9B4C2"></span>
|
||
<span style="background: #D4AF37"></span>
|
||
<span style="background: #F8F7F4"></span>
|
||
</span>
|
||
<span>Coastal Dawn</span>
|
||
</button>
|
||
<button class="theme-option" data-theme="deep-sea">
|
||
<span class="theme-colors">
|
||
<span style="background: #1E2022"></span>
|
||
<span style="background: #00BFFF"></span>
|
||
<span style="background: #2A2D30"></span>
|
||
</span>
|
||
<span>Deep Sea</span>
|
||
</button>
|
||
<button class="theme-option" data-theme="monaco-white">
|
||
<span class="theme-colors">
|
||
<span style="background: #2C3E50"></span>
|
||
<span style="background: #E74C3C"></span>
|
||
<span style="background: #FFFFFF"></span>
|
||
</span>
|
||
<span>Monaco White</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</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">
|
||
<!-- 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+ adventurers</span>
|
||
</div>
|
||
|
||
<!-- Main Headline -->
|
||
<h1 class="hero-headline animate-fade-up">
|
||
<span class="gradient-text">Your Adventure Awaits</span>
|
||
</h1>
|
||
|
||
<!-- Subtext -->
|
||
<p class="hero-subtext animate-fade-up-delay">
|
||
Create unforgettable memories sailing through the stunning San Francisco Bay.<br>
|
||
Experience the freedom of the open water with our premium yacht charters designed for every occasion.
|
||
</p>
|
||
|
||
<!-- CTA Buttons -->
|
||
<div class="hero-actions animate-fade-up-delay-2">
|
||
<button class="btn-primary-warm" onclick="window.location.href='charter-booking-1.html'">
|
||
<i data-lucide="anchor" class="btn-icon"></i>
|
||
Start Your Journey
|
||
</button>
|
||
<button class="btn-secondary-warm" onclick="window.location.href='charter.html'">
|
||
<i data-lucide="sailboat" class="btn-icon"></i>
|
||
View Our Fleet
|
||
</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">Welcome Aboard!</h2>
|
||
<p class="lead-text">
|
||
We're not just a yacht charter service – we're your gateway to extraordinary moments on the water.
|
||
Our family-owned business has been creating magical experiences in San Francisco Bay for over 15 years.
|
||
</p>
|
||
<div class="feature-list">
|
||
<div class="feature-item">
|
||
<span class="feature-icon">
|
||
<i data-lucide="waves"></i>
|
||
</span>
|
||
<div>
|
||
<h4>Local Expertise</h4>
|
||
<p>Our captains know every hidden cove and perfect sunset spot</p>
|
||
</div>
|
||
</div>
|
||
<div class="feature-item">
|
||
<span class="feature-icon">
|
||
<i data-lucide="users"></i>
|
||
</span>
|
||
<div>
|
||
<h4>Family Friendly</h4>
|
||
<p>Safe, fun experiences for all ages and skill levels</p>
|
||
</div>
|
||
</div>
|
||
<div class="feature-item">
|
||
<span class="feature-icon">
|
||
<i data-lucide="sparkles"></i>
|
||
</span>
|
||
<div>
|
||
<h4>Tailored to You</h4>
|
||
<p>Every charter is customized to create your perfect day</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="welcome-image">
|
||
<img src="yacht_party_couple_holding_hands.jpg" alt="Happy customers on yacht" class="rounded-image">
|
||
<div class="image-badge">
|
||
<span>15+ Years</span>
|
||
<span>of Excellence</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Interactive Fleet Showcase -->
|
||
<section class="fleet-showcase" id="fleet">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<h2 class="section-title">Meet Your Perfect Yacht</h2>
|
||
<p class="section-subtitle">Each vessel in our fleet offers a unique experience</p>
|
||
</div>
|
||
|
||
<div class="fleet-carousel">
|
||
<!-- Yacht Card 1 -->
|
||
<div class="yacht-card active">
|
||
<div class="yacht-image-container">
|
||
<img src="yacht_party_couple_holding_hands.jpg" alt="Bay Dreamer">
|
||
<div class="yacht-badge premium">Premium</div>
|
||
</div>
|
||
<div class="yacht-details">
|
||
<h3 class="yacht-name">Bay Dreamer</h3>
|
||
<p class="yacht-description">
|
||
Our flagship yacht, perfect for special celebrations and corporate events.
|
||
Luxurious amenities meet breathtaking views.
|
||
</p>
|
||
<div class="yacht-specs">
|
||
<div class="spec">
|
||
<i data-lucide="users-2" class="spec-icon"></i>
|
||
<span>Up to 12 guests</span>
|
||
</div>
|
||
<div class="spec">
|
||
<i data-lucide="ruler" class="spec-icon"></i>
|
||
<span>45ft luxury motor yacht</span>
|
||
</div>
|
||
<div class="spec">
|
||
<i data-lucide="star" class="spec-icon"></i>
|
||
<span>Full crew & catering</span>
|
||
</div>
|
||
</div>
|
||
<div class="yacht-pricing">
|
||
<span class="price-from">From</span>
|
||
<span class="price-amount">$450/hour</span>
|
||
</div>
|
||
<button class="btn-book-yacht" onclick="window.location.href='charter-booking-1.html'">Book Bay Dreamer</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Yacht Card 2 -->
|
||
<div class="yacht-card">
|
||
<div class="yacht-image-container">
|
||
<img src="golden_gate.jpg" alt="Golden Gate Spirit">
|
||
<div class="yacht-badge adventure">Adventure</div>
|
||
</div>
|
||
<div class="yacht-details">
|
||
<h3 class="yacht-name">Golden Gate Spirit</h3>
|
||
<p class="yacht-description">
|
||
Experience true sailing with our beautiful sailboat. Feel the wind in your hair
|
||
as you glide past the Golden Gate Bridge.
|
||
</p>
|
||
<div class="yacht-specs">
|
||
<div class="spec">
|
||
<i data-lucide="users-2" class="spec-icon"></i>
|
||
<span>Up to 8 guests</span>
|
||
</div>
|
||
<div class="spec">
|
||
<i data-lucide="ruler" class="spec-icon"></i>
|
||
<span>38ft sailing yacht</span>
|
||
</div>
|
||
<div class="spec">
|
||
<i data-lucide="sailboat" class="spec-icon"></i>
|
||
<span>Authentic sailing experience</span>
|
||
</div>
|
||
</div>
|
||
<div class="yacht-pricing">
|
||
<span class="price-from">From</span>
|
||
<span class="price-amount">$350/hour</span>
|
||
</div>
|
||
<button class="btn-book-yacht" onclick="window.location.href='charter-booking-1.html'">Book Golden Gate Spirit</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Yacht Card 3 -->
|
||
<div class="yacht-card">
|
||
<div class="yacht-image-container">
|
||
<img src="diver.jpg" alt="Ocean Explorer">
|
||
<div class="yacht-badge premium">Explorer</div>
|
||
</div>
|
||
<div class="yacht-details">
|
||
<h3 class="yacht-name">Ocean Explorer</h3>
|
||
<p class="yacht-description">
|
||
Dive into adventure with our fully-equipped exploration yacht. Perfect for
|
||
water sports enthusiasts and underwater discovery.
|
||
</p>
|
||
<div class="yacht-specs">
|
||
<div class="spec">
|
||
<i data-lucide="users-2" class="spec-icon"></i>
|
||
<span>Up to 10 guests</span>
|
||
</div>
|
||
<div class="spec">
|
||
<i data-lucide="ruler" class="spec-icon"></i>
|
||
<span>42ft dive yacht</span>
|
||
</div>
|
||
<div class="spec">
|
||
<i data-lucide="anchor" class="spec-icon"></i>
|
||
<span>Full diving equipment included</span>
|
||
</div>
|
||
</div>
|
||
<div class="yacht-pricing">
|
||
<span class="price-from">From</span>
|
||
<span class="price-amount">$550/hour</span>
|
||
</div>
|
||
<button class="btn-book-yacht" onclick="window.location.href='charter-booking-1.html'">Book Ocean Explorer</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Navigation -->
|
||
<div class="fleet-nav">
|
||
<button class="fleet-prev">←</button>
|
||
<div class="fleet-dots">
|
||
<span class="dot active"></span>
|
||
<span class="dot"></span>
|
||
<span class="dot"></span>
|
||
</div>
|
||
<button class="fleet-next">→</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Services Section - Charters & Maintenance -->
|
||
<section class="services-section" id="services">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<h2 class="section-title">Complete Yacht Services</h2>
|
||
<p class="section-subtitle">From unforgettable charters to expert maintenance</p>
|
||
</div>
|
||
|
||
<div class="services-grid">
|
||
<!-- Charter Services -->
|
||
<div class="service-card charter-service">
|
||
<div class="service-icon-wrapper">
|
||
<i data-lucide="sailboat" class="service-icon"></i>
|
||
</div>
|
||
<h3>Premium Charters</h3>
|
||
<p>Experience the Bay like never before with our luxury yacht charters.</p>
|
||
<ul class="service-features">
|
||
<li><i data-lucide="check" class="check-icon"></i> Private celebrations</li>
|
||
<li><i data-lucide="check" class="check-icon"></i> Corporate events</li>
|
||
<li><i data-lucide="check" class="check-icon"></i> Romantic cruises</li>
|
||
<li><i data-lucide="check" class="check-icon"></i> Family adventures</li>
|
||
</ul>
|
||
<button class="btn-service" onclick="window.location.href='charter.html'">Explore Charters</button>
|
||
</div>
|
||
|
||
<!-- Maintenance Services -->
|
||
<div class="service-card maintenance-service">
|
||
<div class="service-icon-wrapper">
|
||
<i data-lucide="wrench" class="service-icon"></i>
|
||
</div>
|
||
<h3>Expert Maintenance</h3>
|
||
<p>Keep your vessel in pristine condition with our professional services.</p>
|
||
<ul class="service-features">
|
||
<li><i data-lucide="check" class="check-icon"></i> Regular maintenance</li>
|
||
<li><i data-lucide="check" class="check-icon"></i> Engine services</li>
|
||
<li><i data-lucide="check" class="check-icon"></i> Hull cleaning</li>
|
||
<li><i data-lucide="check" class="check-icon"></i> Emergency repairs</li>
|
||
</ul>
|
||
<button class="btn-service" onclick="window.location.href='maintenance.html'">Maintenance Services</button>
|
||
</div>
|
||
|
||
<!-- Client Portal -->
|
||
<div class="service-card" style="background: linear-gradient(135deg, #1e3a5f 0%, #2c5282 100%); color: white;">
|
||
<div class="service-icon-wrapper" style="background: rgba(255,255,255,0.2);">
|
||
<i data-lucide="user" class="service-icon" style="color: white;"></i>
|
||
</div>
|
||
<h3 style="color: white;">Client Portal</h3>
|
||
<p style="color: rgba(255,255,255,0.9);">Access your personalized dashboard for bookings and services.</p>
|
||
<ul class="service-features">
|
||
<li style="color: rgba(255,255,255,0.9);"><i data-lucide="check" class="check-icon" style="color: white;"></i> Manage bookings</li>
|
||
<li style="color: rgba(255,255,255,0.9);"><i data-lucide="check" class="check-icon" style="color: white;"></i> Service history</li>
|
||
<li style="color: rgba(255,255,255,0.9);"><i data-lucide="check" class="check-icon" style="color: white;"></i> Pay invoices</li>
|
||
<li style="color: rgba(255,255,255,0.9);"><i data-lucide="check" class="check-icon" style="color: white;"></i> View documents</li>
|
||
</ul>
|
||
<button class="btn-service" style="background: white; color: #1e3a5f;" onclick="window.location.href='portal-login.html'">Login to Portal</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Trust Indicators -->
|
||
<div class="service-stats">
|
||
<div class="stat-item">
|
||
<i data-lucide="ship" class="stat-icon"></i>
|
||
<span class="stat-number">50+</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">15+</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">Certified Technicians</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Experience Stories -->
|
||
<section class="experience-stories" id="experiences">
|
||
<div class="story-container">
|
||
<h2 class="section-title center">Stories from the Bay</h2>
|
||
|
||
<div class="stories-grid">
|
||
<!-- Story 1 -->
|
||
<div class="story-card">
|
||
<div class="story-image">
|
||
<img src="yacht_party_couple_holding_hands.jpg" alt="Romantic sunset">
|
||
<div class="story-overlay">
|
||
<span class="story-category">Romance</span>
|
||
</div>
|
||
</div>
|
||
<div class="story-content">
|
||
<h3>The Perfect Proposal</h3>
|
||
<p>"He proposed as the sun set behind the Golden Gate. The crew was so discrete and helpful.
|
||
It was absolutely magical!" - Sarah & Mike</p>
|
||
<a href="about.html#testimonials" class="story-link">Read their story →</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Story 2 -->
|
||
<div class="story-card">
|
||
<div class="story-image">
|
||
<img src="diver.jpg" alt="Team building">
|
||
<div class="story-overlay">
|
||
<span class="story-category">Corporate</span>
|
||
</div>
|
||
</div>
|
||
<div class="story-content">
|
||
<h3>Team Building Success</h3>
|
||
<p>"Our team had an incredible day on the water. It brought everyone together in a way
|
||
no conference room ever could." - TechStart Inc.</p>
|
||
<a href="about.html#testimonials" class="story-link">Read their story →</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Story 3 -->
|
||
<div class="story-card">
|
||
<div class="story-image">
|
||
<img src="golden_gate.jpg" alt="Family adventure">
|
||
<div class="story-overlay">
|
||
<span class="story-category">Family</span>
|
||
</div>
|
||
</div>
|
||
<div class="story-content">
|
||
<h3>Three Generations at Sea</h3>
|
||
<p>"From grandma to the kids, everyone had a blast. The crew made sure everyone felt safe
|
||
and included." - The Johnson Family</p>
|
||
<a href="about.html#testimonials" class="story-link">Read their story →</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Gallery Section -->
|
||
<section class="gallery-section">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<h2 class="section-title">Life on the Water</h2>
|
||
<p class="section-subtitle">Moments captured from our adventures</p>
|
||
</div>
|
||
<div class="image-gallery">
|
||
<div class="gallery-item large">
|
||
<img src="golden_gate.jpg" alt="Golden Gate Bridge view">
|
||
<div class="gallery-overlay">
|
||
<span class="gallery-caption">Sailing the Bay</span>
|
||
</div>
|
||
</div>
|
||
<div class="gallery-item">
|
||
<img src="yacht_party_couple_holding_hands.jpg" alt="Romantic moments">
|
||
<div class="gallery-overlay">
|
||
<span class="gallery-caption">Unforgettable Moments</span>
|
||
</div>
|
||
</div>
|
||
<div class="gallery-item">
|
||
<img src="diver.jpg" alt="Underwater adventures">
|
||
<div class="gallery-overlay">
|
||
<span class="gallery-caption">Dive Deep</span>
|
||
</div>
|
||
</div>
|
||
<div class="gallery-item">
|
||
<img src="logo.jpg" alt="HarborSmith">
|
||
<div class="gallery-overlay">
|
||
<span class="gallery-caption">Your Trusted Partner</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Interactive Booking CTA -->
|
||
<section class="booking-cta">
|
||
<div class="booking-container">
|
||
<div class="booking-content">
|
||
<h2 class="booking-title">Ready to Create Your Story?</h2>
|
||
<p class="booking-subtitle">
|
||
Join hundreds of happy adventurers who've discovered the magic of San Francisco Bay
|
||
</p>
|
||
|
||
<div class="booking-options">
|
||
<div class="booking-card">
|
||
<span class="booking-icon">
|
||
<i data-lucide="calendar"></i>
|
||
</span>
|
||
<h3>Plan Your Charter</h3>
|
||
<p>Choose your perfect date and yacht</p>
|
||
<button class="btn-booking" onclick="window.location.href='charter-booking-1.html'">Start Planning</button>
|
||
</div>
|
||
|
||
<div class="booking-card featured">
|
||
<span class="booking-icon">
|
||
<i data-lucide="message-circle"></i>
|
||
</span>
|
||
<h3>Talk to a Captain</h3>
|
||
<p>Get personalized recommendations</p>
|
||
<button class="btn-booking primary" onclick="window.location.href='tel:415-555-0123'">Call (415) 555-0123</button>
|
||
</div>
|
||
|
||
<div class="booking-card">
|
||
<span class="booking-icon">
|
||
<i data-lucide="gift"></i>
|
||
</span>
|
||
<h3>Gift a Charter</h3>
|
||
<p>Give the gift of adventure</p>
|
||
<button class="btn-booking" onclick="window.location.href='charter.html'">Buy Gift Card</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Footer -->
|
||
<footer class="voyage-footer">
|
||
<div class="footer-container">
|
||
<div class="footer-content">
|
||
<div class="footer-brand">
|
||
<img src="logo.jpg" alt="HarborSmith" class="footer-logo">
|
||
<h3>HarborSmith</h3>
|
||
<p>Your trusted partner for unforgettable Bay Area yacht experiences since 2009</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-links">
|
||
<h4>Quick Links</h4>
|
||
<a href="charter.html">Our Fleet</a>
|
||
<a href="charter.html#pricing">Pricing</a>
|
||
<a href="about.html#safety">Safety</a>
|
||
<a href="faq.html">FAQ</a>
|
||
</div>
|
||
|
||
<div class="footer-contact">
|
||
<h4>Get in Touch</h4>
|
||
<p><i data-lucide="map-pin" class="footer-icon"></i> Pier 39, San Francisco, CA</p>
|
||
<p><i data-lucide="phone" class="footer-icon"></i> (415) 555-0123</p>
|
||
<p><i data-lucide="mail" class="footer-icon"></i> hello@harborsmith.com</p>
|
||
<p><i data-lucide="clock" class="footer-icon"></i> Open 7 days, 8am-8pm</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="footer-bottom">
|
||
<p>© 2024 HarborSmith Yacht 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> |