872 lines
36 KiB
HTML
872 lines
36 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Frequently Asked Questions - HarborSmith</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">
|
||
|
|
<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">
|
||
|
|
<style>
|
||
|
|
.faq-hero {
|
||
|
|
background: linear-gradient(135deg, #1e3a5f 0%, #2c5282 100%);
|
||
|
|
padding: 5rem 0;
|
||
|
|
color: white;
|
||
|
|
text-align: center;
|
||
|
|
position: relative;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.faq-hero::before {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
top: -50%;
|
||
|
|
right: -50%;
|
||
|
|
width: 200%;
|
||
|
|
height: 200%;
|
||
|
|
background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 70%);
|
||
|
|
animation: rotate 30s linear infinite;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes rotate {
|
||
|
|
from { transform: rotate(0deg); }
|
||
|
|
to { transform: rotate(360deg); }
|
||
|
|
}
|
||
|
|
|
||
|
|
.faq-hero-content {
|
||
|
|
position: relative;
|
||
|
|
z-index: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.faq-hero h1 {
|
||
|
|
font-size: 3rem;
|
||
|
|
font-weight: 700;
|
||
|
|
margin-bottom: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.faq-hero p {
|
||
|
|
font-size: 1.25rem;
|
||
|
|
opacity: 0.95;
|
||
|
|
max-width: 600px;
|
||
|
|
margin: 0 auto 2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.search-box {
|
||
|
|
max-width: 600px;
|
||
|
|
margin: 0 auto;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.search-input {
|
||
|
|
width: 100%;
|
||
|
|
padding: 1rem 3rem 1rem 1.5rem;
|
||
|
|
border: none;
|
||
|
|
border-radius: 50px;
|
||
|
|
font-size: 1rem;
|
||
|
|
background: white;
|
||
|
|
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
|
||
|
|
}
|
||
|
|
|
||
|
|
.search-input:focus {
|
||
|
|
outline: none;
|
||
|
|
box-shadow: 0 10px 40px rgba(0,0,0,0.3);
|
||
|
|
}
|
||
|
|
|
||
|
|
.search-icon {
|
||
|
|
position: absolute;
|
||
|
|
right: 1.5rem;
|
||
|
|
top: 50%;
|
||
|
|
transform: translateY(-50%);
|
||
|
|
color: var(--accent-primary);
|
||
|
|
}
|
||
|
|
|
||
|
|
.faq-categories {
|
||
|
|
padding: 3rem 0;
|
||
|
|
background: var(--bg-primary);
|
||
|
|
}
|
||
|
|
|
||
|
|
.category-tabs {
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
gap: 1rem;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
margin-bottom: 3rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.category-tab {
|
||
|
|
padding: 0.75rem 1.5rem;
|
||
|
|
background: var(--card-bg);
|
||
|
|
border: 2px solid var(--border-color);
|
||
|
|
border-radius: 50px;
|
||
|
|
font-weight: 500;
|
||
|
|
color: var(--text-secondary);
|
||
|
|
cursor: pointer;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 0.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.category-tab:hover {
|
||
|
|
border-color: var(--accent-primary);
|
||
|
|
color: var(--text-primary);
|
||
|
|
transform: translateY(-2px);
|
||
|
|
}
|
||
|
|
|
||
|
|
.category-tab.active {
|
||
|
|
background: var(--accent-primary);
|
||
|
|
border-color: var(--accent-primary);
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.category-tab svg {
|
||
|
|
width: 18px;
|
||
|
|
height: 18px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.faq-content {
|
||
|
|
max-width: 900px;
|
||
|
|
margin: 0 auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.faq-section {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.faq-section.active {
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
|
||
|
|
.faq-item {
|
||
|
|
background: var(--card-bg);
|
||
|
|
border-radius: 12px;
|
||
|
|
margin-bottom: 1rem;
|
||
|
|
overflow: hidden;
|
||
|
|
border: 2px solid transparent;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.faq-item:hover {
|
||
|
|
border-color: var(--accent-primary);
|
||
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
|
||
|
|
}
|
||
|
|
|
||
|
|
.faq-question {
|
||
|
|
padding: 1.5rem;
|
||
|
|
cursor: pointer;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.faq-question:hover {
|
||
|
|
background: rgba(30, 58, 95, 0.03);
|
||
|
|
}
|
||
|
|
|
||
|
|
.faq-item.active .faq-question {
|
||
|
|
background: rgba(30, 58, 95, 0.05);
|
||
|
|
}
|
||
|
|
|
||
|
|
.faq-question-text {
|
||
|
|
font-weight: 600;
|
||
|
|
color: var(--text-primary);
|
||
|
|
font-size: 1.125rem;
|
||
|
|
flex: 1;
|
||
|
|
padding-right: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.faq-toggle {
|
||
|
|
width: 30px;
|
||
|
|
height: 30px;
|
||
|
|
background: var(--accent-primary);
|
||
|
|
border-radius: 50%;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
color: white;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
flex-shrink: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.faq-toggle svg {
|
||
|
|
width: 18px;
|
||
|
|
height: 18px;
|
||
|
|
transition: transform 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.faq-item.active .faq-toggle svg {
|
||
|
|
transform: rotate(180deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
.faq-answer {
|
||
|
|
max-height: 0;
|
||
|
|
overflow: hidden;
|
||
|
|
transition: max-height 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.faq-item.active .faq-answer {
|
||
|
|
max-height: 1000px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.faq-answer-content {
|
||
|
|
padding: 0 1.5rem 1.5rem;
|
||
|
|
color: var(--text-secondary);
|
||
|
|
line-height: 1.8;
|
||
|
|
}
|
||
|
|
|
||
|
|
.faq-answer-content ul {
|
||
|
|
margin: 1rem 0;
|
||
|
|
padding-left: 1.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.faq-answer-content li {
|
||
|
|
margin: 0.5rem 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.faq-answer-content strong {
|
||
|
|
color: var(--text-primary);
|
||
|
|
}
|
||
|
|
|
||
|
|
.quick-links {
|
||
|
|
padding: 5rem 0;
|
||
|
|
background: linear-gradient(135deg, rgba(30, 58, 95, 0.05) 0%, rgba(30, 58, 95, 0.02) 100%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.links-grid {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||
|
|
gap: 2rem;
|
||
|
|
margin-top: 2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.link-card {
|
||
|
|
background: var(--card-bg);
|
||
|
|
border-radius: 12px;
|
||
|
|
padding: 2rem;
|
||
|
|
text-align: center;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.link-card:hover {
|
||
|
|
transform: translateY(-5px);
|
||
|
|
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
|
||
|
|
}
|
||
|
|
|
||
|
|
.link-icon {
|
||
|
|
width: 60px;
|
||
|
|
height: 60px;
|
||
|
|
margin: 0 auto 1rem;
|
||
|
|
background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-dark) 100%);
|
||
|
|
border-radius: 50%;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.link-icon svg {
|
||
|
|
width: 30px;
|
||
|
|
height: 30px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.link-title {
|
||
|
|
font-size: 1.25rem;
|
||
|
|
font-weight: 600;
|
||
|
|
color: var(--text-primary);
|
||
|
|
margin-bottom: 0.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.link-description {
|
||
|
|
color: var(--text-secondary);
|
||
|
|
font-size: 0.875rem;
|
||
|
|
margin-bottom: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.link-button {
|
||
|
|
color: var(--accent-primary);
|
||
|
|
font-weight: 600;
|
||
|
|
text-decoration: none;
|
||
|
|
display: inline-flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 0.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.link-button svg {
|
||
|
|
width: 16px;
|
||
|
|
height: 16px;
|
||
|
|
transition: transform 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.link-card:hover .link-button svg {
|
||
|
|
transform: translateX(5px);
|
||
|
|
}
|
||
|
|
|
||
|
|
.no-results {
|
||
|
|
text-align: center;
|
||
|
|
padding: 3rem;
|
||
|
|
color: var(--text-secondary);
|
||
|
|
}
|
||
|
|
|
||
|
|
.highlight {
|
||
|
|
background: rgba(255, 193, 7, 0.2);
|
||
|
|
padding: 0 2px;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: 768px) {
|
||
|
|
.faq-hero h1 {
|
||
|
|
font-size: 2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.category-tabs {
|
||
|
|
justify-content: flex-start;
|
||
|
|
overflow-x: auto;
|
||
|
|
padding-bottom: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.faq-question-text {
|
||
|
|
font-size: 1rem;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<!-- Navigation -->
|
||
|
|
<nav class="voyage-nav visible" 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="index.html" class="nav-link">Home</a>
|
||
|
|
<a href="charter.html" class="nav-link">Charters</a>
|
||
|
|
<a href="maintenance.html" class="nav-link">Maintenance</a>
|
||
|
|
<a href="about.html" class="nav-link">About</a>
|
||
|
|
<a href="contact.html" class="nav-link">Contact</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
<!-- Hero Section -->
|
||
|
|
<section class="faq-hero">
|
||
|
|
<div class="faq-hero-content">
|
||
|
|
<h1>Frequently Asked Questions</h1>
|
||
|
|
<p>Find answers to common questions about our yacht charters and maintenance services</p>
|
||
|
|
<div class="search-box">
|
||
|
|
<input type="text" class="search-input" id="faqSearch" placeholder="Search for answers...">
|
||
|
|
<i data-lucide="search" class="search-icon"></i>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- FAQ Categories -->
|
||
|
|
<section class="faq-categories">
|
||
|
|
<div class="container">
|
||
|
|
<!-- Category Tabs -->
|
||
|
|
<div class="category-tabs">
|
||
|
|
<button class="category-tab active" data-category="all">
|
||
|
|
<i data-lucide="list"></i>
|
||
|
|
All Questions
|
||
|
|
</button>
|
||
|
|
<button class="category-tab" data-category="charter">
|
||
|
|
<i data-lucide="sailboat"></i>
|
||
|
|
Charter Services
|
||
|
|
</button>
|
||
|
|
<button class="category-tab" data-category="maintenance">
|
||
|
|
<i data-lucide="wrench"></i>
|
||
|
|
Maintenance
|
||
|
|
</button>
|
||
|
|
<button class="category-tab" data-category="booking">
|
||
|
|
<i data-lucide="calendar"></i>
|
||
|
|
Booking & Pricing
|
||
|
|
</button>
|
||
|
|
<button class="category-tab" data-category="safety">
|
||
|
|
<i data-lucide="shield"></i>
|
||
|
|
Safety & Requirements
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- FAQ Content -->
|
||
|
|
<div class="faq-content">
|
||
|
|
<!-- All Questions Section -->
|
||
|
|
<div class="faq-section active" id="all">
|
||
|
|
<!-- Charter Questions -->
|
||
|
|
<div class="faq-item" data-category="charter">
|
||
|
|
<div class="faq-question">
|
||
|
|
<span class="faq-question-text">What is included in a yacht charter?</span>
|
||
|
|
<span class="faq-toggle">
|
||
|
|
<i data-lucide="chevron-down"></i>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<div class="faq-answer">
|
||
|
|
<div class="faq-answer-content">
|
||
|
|
Our yacht charters include:
|
||
|
|
<ul>
|
||
|
|
<li>Fully fueled yacht for your charter duration</li>
|
||
|
|
<li>Licensed and experienced captain</li>
|
||
|
|
<li>Safety equipment and life jackets for all passengers</li>
|
||
|
|
<li>Basic amenities (water, ice, coolers)</li>
|
||
|
|
<li>Bluetooth sound system</li>
|
||
|
|
<li>Complimentary parking at our marina</li>
|
||
|
|
</ul>
|
||
|
|
Additional services like catering, photographer, and water sports equipment can be added for an extra fee.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="faq-item" data-category="charter booking">
|
||
|
|
<div class="faq-question">
|
||
|
|
<span class="faq-question-text">How far in advance should I book?</span>
|
||
|
|
<span class="faq-toggle">
|
||
|
|
<i data-lucide="chevron-down"></i>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<div class="faq-answer">
|
||
|
|
<div class="faq-answer-content">
|
||
|
|
We recommend booking <strong>at least 2-4 weeks in advance</strong> for weekend charters and <strong>1-2 weeks</strong> for weekday charters. During peak season (May through October), booking 4-6 weeks ahead is advisable. For major holidays and special events like Fleet Week, we suggest booking 2-3 months in advance to secure your preferred yacht and time.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="faq-item" data-category="charter booking">
|
||
|
|
<div class="faq-question">
|
||
|
|
<span class="faq-question-text">What is your cancellation policy?</span>
|
||
|
|
<span class="faq-toggle">
|
||
|
|
<i data-lucide="chevron-down"></i>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<div class="faq-answer">
|
||
|
|
<div class="faq-answer-content">
|
||
|
|
Our cancellation policy is designed to be fair and flexible:
|
||
|
|
<ul>
|
||
|
|
<li><strong>48+ hours before charter:</strong> Full refund</li>
|
||
|
|
<li><strong>24-48 hours before:</strong> 50% refund or full credit for rescheduling</li>
|
||
|
|
<li><strong>Less than 24 hours:</strong> No refund, but 50% credit toward future charter</li>
|
||
|
|
<li><strong>Weather cancellations:</strong> Full refund or rescheduling at no charge</li>
|
||
|
|
</ul>
|
||
|
|
We understand plans change, so we try to work with our customers whenever possible.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="faq-item" data-category="charter safety">
|
||
|
|
<div class="faq-question">
|
||
|
|
<span class="faq-question-text">Do I need boating experience to charter a yacht?</span>
|
||
|
|
<span class="faq-toggle">
|
||
|
|
<i data-lucide="chevron-down"></i>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<div class="faq-answer">
|
||
|
|
<div class="faq-answer-content">
|
||
|
|
<strong>No boating experience is required!</strong> All of our charters come with a licensed, experienced captain who will handle all navigation and sailing. You and your guests can simply relax and enjoy the experience. If you're interested in learning, our captains are happy to share their knowledge and even let you take the helm under supervision.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="faq-item" data-category="charter">
|
||
|
|
<div class="faq-question">
|
||
|
|
<span class="faq-question-text">Can we bring our own food and drinks?</span>
|
||
|
|
<span class="faq-toggle">
|
||
|
|
<i data-lucide="chevron-down"></i>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<div class="faq-answer">
|
||
|
|
<div class="faq-answer-content">
|
||
|
|
<strong>Yes, absolutely!</strong> You're welcome to bring your own food and beverages, including alcohol (for passengers 21+). We provide coolers with ice, and our yachts have refrigeration available. We also offer catering packages if you prefer to have everything prepared for you, ranging from light snacks to full gourmet meals.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="faq-item" data-category="charter safety">
|
||
|
|
<div class="faq-question">
|
||
|
|
<span class="faq-question-text">What happens if the weather is bad?</span>
|
||
|
|
<span class="faq-toggle">
|
||
|
|
<i data-lucide="chevron-down"></i>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<div class="faq-answer">
|
||
|
|
<div class="faq-answer-content">
|
||
|
|
Safety is our top priority. If weather conditions are unsafe for sailing (high winds, storms, heavy fog), we will:
|
||
|
|
<ul>
|
||
|
|
<li>Contact you as early as possible (usually the day before)</li>
|
||
|
|
<li>Offer to reschedule to another available date</li>
|
||
|
|
<li>Provide a full refund if rescheduling isn't possible</li>
|
||
|
|
</ul>
|
||
|
|
Light rain or overcast conditions typically don't affect charters, and many guests find sailing in light mist quite romantic!
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="faq-item" data-category="maintenance">
|
||
|
|
<div class="faq-question">
|
||
|
|
<span class="faq-question-text">How often should I service my yacht?</span>
|
||
|
|
<span class="faq-toggle">
|
||
|
|
<i data-lucide="chevron-down"></i>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<div class="faq-answer">
|
||
|
|
<div class="faq-answer-content">
|
||
|
|
Regular maintenance schedules depend on usage, but we recommend:
|
||
|
|
<ul>
|
||
|
|
<li><strong>Oil & filter changes:</strong> Every 100 hours or annually</li>
|
||
|
|
<li><strong>Bottom cleaning:</strong> Every 1-3 months depending on water conditions</li>
|
||
|
|
<li><strong>Engine service:</strong> Every 100 hours or annually</li>
|
||
|
|
<li><strong>Hull inspection:</strong> Every 6 months</li>
|
||
|
|
<li><strong>Complete service:</strong> Annually before peak season</li>
|
||
|
|
</ul>
|
||
|
|
We offer customized maintenance plans based on your yacht's specific needs and usage patterns.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="faq-item" data-category="maintenance">
|
||
|
|
<div class="faq-question">
|
||
|
|
<span class="faq-question-text">Do you work on all yacht brands?</span>
|
||
|
|
<span class="faq-toggle">
|
||
|
|
<i data-lucide="chevron-down"></i>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<div class="faq-answer">
|
||
|
|
<div class="faq-answer-content">
|
||
|
|
<strong>Yes!</strong> Our certified technicians are trained to work on all major yacht and engine brands including:
|
||
|
|
<ul>
|
||
|
|
<li>Mercury, Yamaha, Volvo Penta, Caterpillar engines</li>
|
||
|
|
<li>Beneteau, Jeanneau, Catalina, Hunter sailboats</li>
|
||
|
|
<li>Sea Ray, Bayliner, Carver, Azimut motor yachts</li>
|
||
|
|
<li>And many more...</li>
|
||
|
|
</ul>
|
||
|
|
We have specialized certifications for Mercury, Yamaha, and Volvo marine systems.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="faq-item" data-category="maintenance booking">
|
||
|
|
<div class="faq-question">
|
||
|
|
<span class="faq-question-text">How much does maintenance cost?</span>
|
||
|
|
<span class="faq-toggle">
|
||
|
|
<i data-lucide="chevron-down"></i>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<div class="faq-answer">
|
||
|
|
<div class="faq-answer-content">
|
||
|
|
Maintenance costs vary based on yacht size and services needed. Here are typical ranges:
|
||
|
|
<ul>
|
||
|
|
<li><strong>Basic maintenance package:</strong> From $299/month</li>
|
||
|
|
<li><strong>Oil change:</strong> $200-400</li>
|
||
|
|
<li><strong>Hull cleaning:</strong> $200-500</li>
|
||
|
|
<li><strong>Engine service:</strong> $450-1,200</li>
|
||
|
|
<li><strong>Bottom paint:</strong> $1,500-4,000</li>
|
||
|
|
</ul>
|
||
|
|
We provide free inspections and detailed quotes before any work begins. No surprises!
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="faq-item" data-category="charter safety">
|
||
|
|
<div class="faq-question">
|
||
|
|
<span class="faq-question-text">Are children allowed on charters?</span>
|
||
|
|
<span class="faq-toggle">
|
||
|
|
<i data-lucide="chevron-down"></i>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<div class="faq-answer">
|
||
|
|
<div class="faq-answer-content">
|
||
|
|
<strong>Yes, we love having families aboard!</strong> Children of all ages are welcome. We provide:
|
||
|
|
<ul>
|
||
|
|
<li>Child-sized life jackets (required for all children under 13)</li>
|
||
|
|
<li>Safety briefing appropriate for young passengers</li>
|
||
|
|
<li>Family-friendly routes with calmer waters</li>
|
||
|
|
<li>Recommendations for kid-friendly activities</li>
|
||
|
|
</ul>
|
||
|
|
Children under 18 must be accompanied by a parent or guardian. We recommend our morning or early afternoon charters for families with young children.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="faq-item" data-category="booking">
|
||
|
|
<div class="faq-question">
|
||
|
|
<span class="faq-question-text">What forms of payment do you accept?</span>
|
||
|
|
<span class="faq-toggle">
|
||
|
|
<i data-lucide="chevron-down"></i>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<div class="faq-answer">
|
||
|
|
<div class="faq-answer-content">
|
||
|
|
We accept multiple payment methods for your convenience:
|
||
|
|
<ul>
|
||
|
|
<li>All major credit cards (Visa, Mastercard, Amex, Discover)</li>
|
||
|
|
<li>Debit cards</li>
|
||
|
|
<li>PayPal and Venmo</li>
|
||
|
|
<li>Wire transfers for large bookings</li>
|
||
|
|
<li>Company checks (with prior approval)</li>
|
||
|
|
</ul>
|
||
|
|
Full payment is required to confirm charter bookings. For maintenance services over $1,000, we offer payment plans.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="faq-item" data-category="charter">
|
||
|
|
<div class="faq-question">
|
||
|
|
<span class="faq-question-text">What are the best routes for first-time visitors?</span>
|
||
|
|
<span class="faq-toggle">
|
||
|
|
<i data-lucide="chevron-down"></i>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<div class="faq-answer">
|
||
|
|
<div class="faq-answer-content">
|
||
|
|
For first-time visitors, we highly recommend:
|
||
|
|
<ul>
|
||
|
|
<li><strong>Golden Gate Tour:</strong> Sail under the iconic bridge, around Alcatraz, with views of the city skyline</li>
|
||
|
|
<li><strong>Sunset Cruise:</strong> Perfect timing for golden hour photos with all major landmarks</li>
|
||
|
|
<li><strong>Bay Complete:</strong> Comprehensive 4-hour tour covering all highlights</li>
|
||
|
|
</ul>
|
||
|
|
Our captains will customize the route based on weather conditions and your interests. Don't forget your camera!
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="faq-item" data-category="maintenance">
|
||
|
|
<div class="faq-question">
|
||
|
|
<span class="faq-question-text">Do you offer emergency repair services?</span>
|
||
|
|
<span class="faq-toggle">
|
||
|
|
<i data-lucide="chevron-down"></i>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<div class="faq-answer">
|
||
|
|
<div class="faq-answer-content">
|
||
|
|
<strong>Yes, we offer 24/7 emergency services!</strong> Call our emergency line at (415) 555-0911 for:
|
||
|
|
<ul>
|
||
|
|
<li>Engine failures</li>
|
||
|
|
<li>Electrical emergencies</li>
|
||
|
|
<li>Taking on water</li>
|
||
|
|
<li>Towing services</li>
|
||
|
|
<li>On-water repairs</li>
|
||
|
|
</ul>
|
||
|
|
Our emergency response team can reach most Bay Area locations within 45 minutes. Emergency rates apply, but your safety is our priority.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Charter Section (Hidden) -->
|
||
|
|
<div class="faq-section" id="charter">
|
||
|
|
<!-- Charter-specific questions will be filtered here -->
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Maintenance Section (Hidden) -->
|
||
|
|
<div class="faq-section" id="maintenance">
|
||
|
|
<!-- Maintenance-specific questions will be filtered here -->
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Booking Section (Hidden) -->
|
||
|
|
<div class="faq-section" id="booking">
|
||
|
|
<!-- Booking-specific questions will be filtered here -->
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Safety Section (Hidden) -->
|
||
|
|
<div class="faq-section" id="safety">
|
||
|
|
<!-- Safety-specific questions will be filtered here -->
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- Quick Links -->
|
||
|
|
<section class="quick-links">
|
||
|
|
<div class="container">
|
||
|
|
<div class="section-header">
|
||
|
|
<h2 class="section-title">Still Have Questions?</h2>
|
||
|
|
<p class="section-subtitle">We're here to help in whatever way works best for you</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="links-grid">
|
||
|
|
<div class="link-card" onclick="window.location.href='contact.html'">
|
||
|
|
<div class="link-icon">
|
||
|
|
<i data-lucide="message-circle"></i>
|
||
|
|
</div>
|
||
|
|
<div class="link-title">Contact Us</div>
|
||
|
|
<div class="link-description">Send us a message and we'll respond within 24 hours</div>
|
||
|
|
<a href="contact.html" class="link-button">
|
||
|
|
Get in Touch
|
||
|
|
<i data-lucide="arrow-right"></i>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="link-card" onclick="window.location.href='tel:4155550123'">
|
||
|
|
<div class="link-icon">
|
||
|
|
<i data-lucide="phone"></i>
|
||
|
|
</div>
|
||
|
|
<div class="link-title">Call Us</div>
|
||
|
|
<div class="link-description">Speak directly with our team for immediate help</div>
|
||
|
|
<a href="tel:4155550123" class="link-button">
|
||
|
|
(415) 555-0123
|
||
|
|
<i data-lucide="arrow-right"></i>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="link-card" onclick="window.location.href='charter-booking-1.html'">
|
||
|
|
<div class="link-icon">
|
||
|
|
<i data-lucide="calendar"></i>
|
||
|
|
</div>
|
||
|
|
<div class="link-title">Book Now</div>
|
||
|
|
<div class="link-description">Ready to book? Start your adventure here</div>
|
||
|
|
<a href="charter-booking-1.html" class="link-button">
|
||
|
|
Start Booking
|
||
|
|
<i data-lucide="arrow-right"></i>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="link-card" onclick="window.location.href='about.html'">
|
||
|
|
<div class="link-icon">
|
||
|
|
<i data-lucide="info"></i>
|
||
|
|
</div>
|
||
|
|
<div class="link-title">About Us</div>
|
||
|
|
<div class="link-description">Learn more about our story and team</div>
|
||
|
|
<a href="about.html" class="link-button">
|
||
|
|
Our Story
|
||
|
|
<i data-lucide="arrow-right"></i>
|
||
|
|
</a>
|
||
|
|
</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 Bay Area yacht services</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="footer-links">
|
||
|
|
<h4>Quick Links</h4>
|
||
|
|
<a href="index.html">Home</a>
|
||
|
|
<a href="charter.html">Charters</a>
|
||
|
|
<a href="maintenance.html">Maintenance</a>
|
||
|
|
<a href="about.html">About</a>
|
||
|
|
<a href="contact.html">Contact</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>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="footer-bottom">
|
||
|
|
<p>© 2024 HarborSmith Yacht Services. All rights reserved.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</footer>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
// Initialize Lucide icons
|
||
|
|
lucide.createIcons();
|
||
|
|
|
||
|
|
// FAQ Accordion
|
||
|
|
const faqItems = document.querySelectorAll('.faq-item');
|
||
|
|
|
||
|
|
faqItems.forEach(item => {
|
||
|
|
const question = item.querySelector('.faq-question');
|
||
|
|
|
||
|
|
question.addEventListener('click', () => {
|
||
|
|
const isActive = item.classList.contains('active');
|
||
|
|
|
||
|
|
// Close all items
|
||
|
|
faqItems.forEach(i => i.classList.remove('active'));
|
||
|
|
|
||
|
|
// Toggle current item
|
||
|
|
if (!isActive) {
|
||
|
|
item.classList.add('active');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
// Category Filter
|
||
|
|
const categoryTabs = document.querySelectorAll('.category-tab');
|
||
|
|
const allFaqItems = document.querySelectorAll('#all .faq-item');
|
||
|
|
|
||
|
|
categoryTabs.forEach(tab => {
|
||
|
|
tab.addEventListener('click', function() {
|
||
|
|
// Update active tab
|
||
|
|
categoryTabs.forEach(t => t.classList.remove('active'));
|
||
|
|
this.classList.add('active');
|
||
|
|
|
||
|
|
const category = this.dataset.category;
|
||
|
|
|
||
|
|
// Filter FAQs
|
||
|
|
if (category === 'all') {
|
||
|
|
allFaqItems.forEach(item => {
|
||
|
|
item.style.display = 'block';
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
allFaqItems.forEach(item => {
|
||
|
|
if (item.dataset.category.includes(category)) {
|
||
|
|
item.style.display = 'block';
|
||
|
|
} else {
|
||
|
|
item.style.display = 'none';
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// Re-initialize Lucide icons
|
||
|
|
lucide.createIcons();
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
// Search Functionality
|
||
|
|
const searchInput = document.getElementById('faqSearch');
|
||
|
|
|
||
|
|
searchInput.addEventListener('input', function() {
|
||
|
|
const searchTerm = this.value.toLowerCase();
|
||
|
|
|
||
|
|
if (searchTerm.length > 0) {
|
||
|
|
// Reset category to "All"
|
||
|
|
categoryTabs.forEach(t => t.classList.remove('active'));
|
||
|
|
document.querySelector('[data-category="all"]').classList.add('active');
|
||
|
|
|
||
|
|
// Search through FAQs
|
||
|
|
allFaqItems.forEach(item => {
|
||
|
|
const question = item.querySelector('.faq-question-text').textContent.toLowerCase();
|
||
|
|
const answer = item.querySelector('.faq-answer-content').textContent.toLowerCase();
|
||
|
|
|
||
|
|
if (question.includes(searchTerm) || answer.includes(searchTerm)) {
|
||
|
|
item.style.display = 'block';
|
||
|
|
|
||
|
|
// Highlight search term
|
||
|
|
if (searchTerm.length > 2) {
|
||
|
|
// This is simplified - in production you'd want proper highlighting
|
||
|
|
item.classList.add('search-match');
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
item.style.display = 'none';
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// Check if no results
|
||
|
|
const visibleItems = Array.from(allFaqItems).filter(item => item.style.display !== 'none');
|
||
|
|
if (visibleItems.length === 0) {
|
||
|
|
// Show no results message (you'd add this element to the HTML)
|
||
|
|
console.log('No results found');
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
// Reset to show all
|
||
|
|
allFaqItems.forEach(item => {
|
||
|
|
item.style.display = 'block';
|
||
|
|
item.classList.remove('search-match');
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|