matt/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial import of HarborSmith website
Some checks failed
build-website / build (push) Failing after 1m2s
Details

Browse Source
This commit is contained in:
matt
2025-09-18 22:20:01 +02:00
commit ec72c5d62b
168 changed files with 65020 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

584
website-mockups/index-backup-20250918-135142.html Normal file
View File

@@ -0,0 +1,584 @@
<!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>&copy; 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>