1012 lines
37 KiB
HTML
1012 lines
37 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Contact Us - 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>
|
||
|
|
.contact-hero {
|
||
|
|
background: linear-gradient(135deg, #1e3a5f 0%, #2c5282 100%);
|
||
|
|
padding: 5rem 0 3rem;
|
||
|
|
color: white;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.contact-hero h1 {
|
||
|
|
font-size: 3rem;
|
||
|
|
font-weight: 700;
|
||
|
|
margin-bottom: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.contact-hero p {
|
||
|
|
font-size: 1.25rem;
|
||
|
|
opacity: 0.95;
|
||
|
|
max-width: 600px;
|
||
|
|
margin: 0 auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.contact-options {
|
||
|
|
padding: 3rem 0;
|
||
|
|
background: linear-gradient(to bottom, var(--accent-primary), transparent);
|
||
|
|
margin-top: -2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.contact-cards {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||
|
|
gap: 2rem;
|
||
|
|
margin-top: -4rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.contact-card {
|
||
|
|
background: var(--card-bg);
|
||
|
|
border-radius: 12px;
|
||
|
|
padding: 2rem;
|
||
|
|
text-align: center;
|
||
|
|
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.contact-card:hover {
|
||
|
|
transform: translateY(-5px);
|
||
|
|
box-shadow: 0 15px 40px rgba(0,0,0,0.15);
|
||
|
|
}
|
||
|
|
|
||
|
|
.contact-card.emergency {
|
||
|
|
border: 2px solid #dc2626;
|
||
|
|
background: linear-gradient(135deg, rgba(220, 38, 38, 0.05) 0%, var(--card-bg) 100%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.contact-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;
|
||
|
|
}
|
||
|
|
|
||
|
|
.contact-card.emergency .contact-icon {
|
||
|
|
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.contact-icon svg {
|
||
|
|
width: 30px;
|
||
|
|
height: 30px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.contact-card h3 {
|
||
|
|
font-size: 1.25rem;
|
||
|
|
font-weight: 600;
|
||
|
|
color: var(--text-primary);
|
||
|
|
margin-bottom: 0.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.contact-card p {
|
||
|
|
color: var(--text-secondary);
|
||
|
|
margin-bottom: 1rem;
|
||
|
|
line-height: 1.6;
|
||
|
|
}
|
||
|
|
|
||
|
|
.contact-card a {
|
||
|
|
color: var(--accent-primary);
|
||
|
|
font-weight: 600;
|
||
|
|
text-decoration: none;
|
||
|
|
font-size: 1.125rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.contact-card.emergency a {
|
||
|
|
color: #dc2626;
|
||
|
|
}
|
||
|
|
|
||
|
|
.contact-main {
|
||
|
|
padding: 5rem 0;
|
||
|
|
background: var(--bg-primary);
|
||
|
|
}
|
||
|
|
|
||
|
|
.contact-content {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: 2fr 1fr;
|
||
|
|
gap: 4rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.contact-form-section {
|
||
|
|
background: var(--card-bg);
|
||
|
|
border-radius: 12px;
|
||
|
|
padding: 3rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-header {
|
||
|
|
margin-bottom: 2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-header h2 {
|
||
|
|
font-size: 2rem;
|
||
|
|
font-weight: 600;
|
||
|
|
color: var(--text-primary);
|
||
|
|
margin-bottom: 0.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-header p {
|
||
|
|
color: var(--text-secondary);
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-type-selector {
|
||
|
|
display: flex;
|
||
|
|
gap: 1rem;
|
||
|
|
margin-bottom: 2rem;
|
||
|
|
border-bottom: 2px solid var(--border-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-type-btn {
|
||
|
|
padding: 1rem 1.5rem;
|
||
|
|
background: none;
|
||
|
|
border: none;
|
||
|
|
color: var(--text-secondary);
|
||
|
|
font-weight: 500;
|
||
|
|
cursor: pointer;
|
||
|
|
position: relative;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-type-btn:hover {
|
||
|
|
color: var(--text-primary);
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-type-btn.active {
|
||
|
|
color: var(--accent-primary);
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-type-btn.active::after {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
bottom: -2px;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
height: 2px;
|
||
|
|
background: var(--accent-primary);
|
||
|
|
}
|
||
|
|
|
||
|
|
.contact-form {
|
||
|
|
display: grid;
|
||
|
|
gap: 1.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-row {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: 1fr 1fr;
|
||
|
|
gap: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-group {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-group.full-width {
|
||
|
|
grid-column: 1 / -1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-label {
|
||
|
|
font-size: 0.875rem;
|
||
|
|
font-weight: 500;
|
||
|
|
color: var(--text-secondary);
|
||
|
|
margin-bottom: 0.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-label.required::after {
|
||
|
|
content: ' *';
|
||
|
|
color: var(--accent-primary);
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-input,
|
||
|
|
.form-select,
|
||
|
|
.form-textarea {
|
||
|
|
padding: 0.75rem;
|
||
|
|
border: 1px solid var(--border-color);
|
||
|
|
border-radius: 6px;
|
||
|
|
font-size: 1rem;
|
||
|
|
font-family: 'Inter', sans-serif;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
background: var(--bg-primary);
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-input:focus,
|
||
|
|
.form-select:focus,
|
||
|
|
.form-textarea:focus {
|
||
|
|
outline: none;
|
||
|
|
border-color: var(--accent-primary);
|
||
|
|
box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.1);
|
||
|
|
background: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-textarea {
|
||
|
|
min-height: 150px;
|
||
|
|
resize: vertical;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-submit {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
margin-top: 2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-note {
|
||
|
|
font-size: 0.875rem;
|
||
|
|
color: var(--text-secondary);
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-submit {
|
||
|
|
padding: 1rem 2rem;
|
||
|
|
background: var(--accent-primary);
|
||
|
|
color: white;
|
||
|
|
border: none;
|
||
|
|
border-radius: 6px;
|
||
|
|
font-weight: 600;
|
||
|
|
cursor: pointer;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 0.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-submit:hover {
|
||
|
|
background: var(--accent-dark);
|
||
|
|
transform: translateY(-2px);
|
||
|
|
}
|
||
|
|
|
||
|
|
.contact-info-section {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: 2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.info-card {
|
||
|
|
background: var(--card-bg);
|
||
|
|
border-radius: 12px;
|
||
|
|
padding: 2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.info-card h3 {
|
||
|
|
font-size: 1.25rem;
|
||
|
|
font-weight: 600;
|
||
|
|
color: var(--text-primary);
|
||
|
|
margin-bottom: 1rem;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 0.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.info-card h3 svg {
|
||
|
|
width: 20px;
|
||
|
|
height: 20px;
|
||
|
|
color: var(--accent-primary);
|
||
|
|
}
|
||
|
|
|
||
|
|
.info-item {
|
||
|
|
display: flex;
|
||
|
|
align-items: start;
|
||
|
|
gap: 1rem;
|
||
|
|
margin-bottom: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.info-item:last-child {
|
||
|
|
margin-bottom: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.info-item svg {
|
||
|
|
width: 20px;
|
||
|
|
height: 20px;
|
||
|
|
color: var(--accent-primary);
|
||
|
|
margin-top: 2px;
|
||
|
|
flex-shrink: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.info-content {
|
||
|
|
flex: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.info-label {
|
||
|
|
font-weight: 500;
|
||
|
|
color: var(--text-primary);
|
||
|
|
margin-bottom: 0.25rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.info-value {
|
||
|
|
color: var(--text-secondary);
|
||
|
|
font-size: 0.875rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.hours-grid {
|
||
|
|
display: grid;
|
||
|
|
gap: 0.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.hours-row {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
padding: 0.5rem 0;
|
||
|
|
border-bottom: 1px solid var(--border-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
.hours-row:last-child {
|
||
|
|
border-bottom: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.hours-day {
|
||
|
|
font-weight: 500;
|
||
|
|
color: var(--text-primary);
|
||
|
|
}
|
||
|
|
|
||
|
|
.hours-time {
|
||
|
|
color: var(--text-secondary);
|
||
|
|
}
|
||
|
|
|
||
|
|
.map-section {
|
||
|
|
padding: 5rem 0;
|
||
|
|
background: var(--card-bg);
|
||
|
|
}
|
||
|
|
|
||
|
|
.map-container {
|
||
|
|
background: linear-gradient(135deg, rgba(30, 58, 95, 0.1) 0%, rgba(30, 58, 95, 0.05) 100%);
|
||
|
|
border-radius: 12px;
|
||
|
|
height: 500px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
color: var(--text-secondary);
|
||
|
|
font-size: 1.5rem;
|
||
|
|
position: relative;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.map-overlay {
|
||
|
|
position: absolute;
|
||
|
|
top: 2rem;
|
||
|
|
left: 2rem;
|
||
|
|
background: var(--card-bg);
|
||
|
|
border-radius: 8px;
|
||
|
|
padding: 1.5rem;
|
||
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
||
|
|
max-width: 300px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.map-overlay h3 {
|
||
|
|
font-size: 1.25rem;
|
||
|
|
font-weight: 600;
|
||
|
|
color: var(--text-primary);
|
||
|
|
margin-bottom: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.map-overlay p {
|
||
|
|
color: var(--text-secondary);
|
||
|
|
font-size: 0.875rem;
|
||
|
|
margin-bottom: 0.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.directions-btn {
|
||
|
|
margin-top: 1rem;
|
||
|
|
padding: 0.5rem 1rem;
|
||
|
|
background: var(--accent-primary);
|
||
|
|
color: white;
|
||
|
|
border: none;
|
||
|
|
border-radius: 6px;
|
||
|
|
font-size: 0.875rem;
|
||
|
|
font-weight: 500;
|
||
|
|
cursor: pointer;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
display: inline-flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 0.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.directions-btn:hover {
|
||
|
|
background: var(--accent-dark);
|
||
|
|
}
|
||
|
|
|
||
|
|
.social-section {
|
||
|
|
padding: 5rem 0;
|
||
|
|
background: linear-gradient(135deg, rgba(30, 58, 95, 0.05) 0%, rgba(30, 58, 95, 0.02) 100%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.social-grid {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||
|
|
gap: 2rem;
|
||
|
|
margin-top: 2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.social-card {
|
||
|
|
text-align: center;
|
||
|
|
padding: 2rem;
|
||
|
|
background: var(--card-bg);
|
||
|
|
border-radius: 12px;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.social-card:hover {
|
||
|
|
transform: translateY(-5px);
|
||
|
|
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
|
||
|
|
}
|
||
|
|
|
||
|
|
.social-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;
|
||
|
|
}
|
||
|
|
|
||
|
|
.social-icon svg {
|
||
|
|
width: 30px;
|
||
|
|
height: 30px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.social-name {
|
||
|
|
font-weight: 600;
|
||
|
|
color: var(--text-primary);
|
||
|
|
margin-bottom: 0.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.social-handle {
|
||
|
|
color: var(--accent-primary);
|
||
|
|
font-size: 0.875rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: 768px) {
|
||
|
|
.contact-hero h1 {
|
||
|
|
font-size: 2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.contact-content {
|
||
|
|
grid-template-columns: 1fr;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-row {
|
||
|
|
grid-template-columns: 1fr;
|
||
|
|
}
|
||
|
|
|
||
|
|
.map-overlay {
|
||
|
|
position: static;
|
||
|
|
max-width: none;
|
||
|
|
margin: 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 active">Contact</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
<!-- Hero Section -->
|
||
|
|
<section class="contact-hero">
|
||
|
|
<h1>Get in Touch</h1>
|
||
|
|
<p>We're here to help you plan your perfect day on the water or keep your yacht in pristine condition</p>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- Contact Options -->
|
||
|
|
<section class="contact-options">
|
||
|
|
<div class="container">
|
||
|
|
<div class="contact-cards">
|
||
|
|
<div class="contact-card">
|
||
|
|
<div class="contact-icon">
|
||
|
|
<i data-lucide="phone"></i>
|
||
|
|
</div>
|
||
|
|
<h3>Call Us</h3>
|
||
|
|
<p>Speak directly with our friendly team for immediate assistance</p>
|
||
|
|
<a href="tel:4155550123">(415) 555-0123</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="contact-card">
|
||
|
|
<div class="contact-icon">
|
||
|
|
<i data-lucide="mail"></i>
|
||
|
|
</div>
|
||
|
|
<h3>Email Us</h3>
|
||
|
|
<p>Send us your questions and we'll respond within 24 hours</p>
|
||
|
|
<a href="mailto:hello@harborsmith.com">hello@harborsmith.com</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="contact-card">
|
||
|
|
<div class="contact-icon">
|
||
|
|
<i data-lucide="map-pin"></i>
|
||
|
|
</div>
|
||
|
|
<h3>Visit Us</h3>
|
||
|
|
<p>Stop by our marina to see our fleet and meet the team</p>
|
||
|
|
<a href="#map">Pier 39, San Francisco</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="contact-card emergency">
|
||
|
|
<div class="contact-icon">
|
||
|
|
<i data-lucide="alert-circle"></i>
|
||
|
|
</div>
|
||
|
|
<h3>Emergency Service</h3>
|
||
|
|
<p>24/7 emergency repairs and on-water assistance</p>
|
||
|
|
<a href="tel:4155550911">(415) 555-0911</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- Contact Form & Info -->
|
||
|
|
<section class="contact-main">
|
||
|
|
<div class="container">
|
||
|
|
<div class="contact-content">
|
||
|
|
<!-- Contact Form -->
|
||
|
|
<div class="contact-form-section">
|
||
|
|
<div class="form-header">
|
||
|
|
<h2>Send Us a Message</h2>
|
||
|
|
<p>Fill out the form below and we'll get back to you as soon as possible</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Form Type Selector -->
|
||
|
|
<div class="form-type-selector">
|
||
|
|
<button class="form-type-btn active" data-form="general">General Inquiry</button>
|
||
|
|
<button class="form-type-btn" data-form="charter">Charter Booking</button>
|
||
|
|
<button class="form-type-btn" data-form="maintenance">Maintenance Service</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- General Inquiry Form -->
|
||
|
|
<form class="contact-form" id="generalForm">
|
||
|
|
<div class="form-row">
|
||
|
|
<div class="form-group">
|
||
|
|
<label class="form-label required">First Name</label>
|
||
|
|
<input type="text" class="form-input" required>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label class="form-label required">Last Name</label>
|
||
|
|
<input type="text" class="form-input" required>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-row">
|
||
|
|
<div class="form-group">
|
||
|
|
<label class="form-label required">Email</label>
|
||
|
|
<input type="email" class="form-input" required>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label class="form-label required">Phone</label>
|
||
|
|
<input type="tel" class="form-input" required>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-group full-width">
|
||
|
|
<label class="form-label">Subject</label>
|
||
|
|
<input type="text" class="form-input" placeholder="What can we help you with?">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-group full-width">
|
||
|
|
<label class="form-label required">Message</label>
|
||
|
|
<textarea class="form-textarea" placeholder="Tell us more about your inquiry..." required></textarea>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-group full-width">
|
||
|
|
<label class="form-label">How did you hear about us?</label>
|
||
|
|
<select class="form-select">
|
||
|
|
<option>Please select...</option>
|
||
|
|
<option>Google Search</option>
|
||
|
|
<option>Social Media</option>
|
||
|
|
<option>Friend/Family Referral</option>
|
||
|
|
<option>TripAdvisor</option>
|
||
|
|
<option>Yelp</option>
|
||
|
|
<option>Walk-by/Drive-by</option>
|
||
|
|
<option>Other</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-submit">
|
||
|
|
<span class="form-note">* Required fields</span>
|
||
|
|
<button type="submit" class="btn-submit">
|
||
|
|
<i data-lucide="send"></i>
|
||
|
|
Send Message
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
|
||
|
|
<!-- Charter Form (Hidden) -->
|
||
|
|
<form class="contact-form" id="charterForm" style="display: none;">
|
||
|
|
<div class="form-row">
|
||
|
|
<div class="form-group">
|
||
|
|
<label class="form-label required">First Name</label>
|
||
|
|
<input type="text" class="form-input" required>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label class="form-label required">Last Name</label>
|
||
|
|
<input type="text" class="form-input" required>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-row">
|
||
|
|
<div class="form-group">
|
||
|
|
<label class="form-label required">Email</label>
|
||
|
|
<input type="email" class="form-input" required>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label class="form-label required">Phone</label>
|
||
|
|
<input type="tel" class="form-input" required>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-row">
|
||
|
|
<div class="form-group">
|
||
|
|
<label class="form-label">Preferred Date</label>
|
||
|
|
<input type="date" class="form-input">
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label class="form-label">Number of Guests</label>
|
||
|
|
<input type="number" class="form-input" min="1" max="12">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-group full-width">
|
||
|
|
<label class="form-label">Type of Charter</label>
|
||
|
|
<select class="form-select">
|
||
|
|
<option>Please select...</option>
|
||
|
|
<option>Sunset Cruise</option>
|
||
|
|
<option>Day Charter</option>
|
||
|
|
<option>Corporate Event</option>
|
||
|
|
<option>Birthday Celebration</option>
|
||
|
|
<option>Anniversary</option>
|
||
|
|
<option>Proposal</option>
|
||
|
|
<option>Other Special Occasion</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-group full-width">
|
||
|
|
<label class="form-label">Additional Details</label>
|
||
|
|
<textarea class="form-textarea" placeholder="Tell us about your charter needs..."></textarea>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-submit">
|
||
|
|
<span class="form-note">* Required fields</span>
|
||
|
|
<button type="submit" class="btn-submit">
|
||
|
|
<i data-lucide="send"></i>
|
||
|
|
Request Charter Info
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
|
||
|
|
<!-- Maintenance Form (Hidden) -->
|
||
|
|
<form class="contact-form" id="maintenanceForm" style="display: none;">
|
||
|
|
<div class="form-row">
|
||
|
|
<div class="form-group">
|
||
|
|
<label class="form-label required">First Name</label>
|
||
|
|
<input type="text" class="form-input" required>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label class="form-label required">Last Name</label>
|
||
|
|
<input type="text" class="form-input" required>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-row">
|
||
|
|
<div class="form-group">
|
||
|
|
<label class="form-label required">Email</label>
|
||
|
|
<input type="email" class="form-input" required>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label class="form-label required">Phone</label>
|
||
|
|
<input type="tel" class="form-input" required>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-row">
|
||
|
|
<div class="form-group">
|
||
|
|
<label class="form-label">Vessel Name</label>
|
||
|
|
<input type="text" class="form-input">
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label class="form-label">Vessel Length</label>
|
||
|
|
<input type="text" class="form-input" placeholder="e.g., 45 feet">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-group full-width">
|
||
|
|
<label class="form-label">Service Needed</label>
|
||
|
|
<select class="form-select">
|
||
|
|
<option>Please select...</option>
|
||
|
|
<option>Regular Maintenance</option>
|
||
|
|
<option>Engine Service</option>
|
||
|
|
<option>Hull Cleaning</option>
|
||
|
|
<option>Electrical Repair</option>
|
||
|
|
<option>Emergency Repair</option>
|
||
|
|
<option>Inspection</option>
|
||
|
|
<option>Other</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-group full-width">
|
||
|
|
<label class="form-label">Problem Description</label>
|
||
|
|
<textarea class="form-textarea" placeholder="Describe the issue or service needed..."></textarea>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-submit">
|
||
|
|
<span class="form-note">* Required fields</span>
|
||
|
|
<button type="submit" class="btn-submit">
|
||
|
|
<i data-lucide="send"></i>
|
||
|
|
Request Service Quote
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Contact Info Sidebar -->
|
||
|
|
<div class="contact-info-section">
|
||
|
|
<!-- Contact Details -->
|
||
|
|
<div class="info-card">
|
||
|
|
<h3><i data-lucide="info"></i> Contact Information</h3>
|
||
|
|
|
||
|
|
<div class="info-item">
|
||
|
|
<i data-lucide="phone"></i>
|
||
|
|
<div class="info-content">
|
||
|
|
<div class="info-label">Main Line</div>
|
||
|
|
<div class="info-value">(415) 555-0123</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="info-item">
|
||
|
|
<i data-lucide="alert-triangle"></i>
|
||
|
|
<div class="info-content">
|
||
|
|
<div class="info-label">24/7 Emergency</div>
|
||
|
|
<div class="info-value">(415) 555-0911</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="info-item">
|
||
|
|
<i data-lucide="mail"></i>
|
||
|
|
<div class="info-content">
|
||
|
|
<div class="info-label">General Inquiries</div>
|
||
|
|
<div class="info-value">hello@harborsmith.com</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="info-item">
|
||
|
|
<i data-lucide="sailboat"></i>
|
||
|
|
<div class="info-content">
|
||
|
|
<div class="info-label">Charter Bookings</div>
|
||
|
|
<div class="info-value">charter@harborsmith.com</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="info-item">
|
||
|
|
<i data-lucide="wrench"></i>
|
||
|
|
<div class="info-content">
|
||
|
|
<div class="info-label">Service Department</div>
|
||
|
|
<div class="info-value">service@harborsmith.com</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Business Hours -->
|
||
|
|
<div class="info-card">
|
||
|
|
<h3><i data-lucide="clock"></i> Business Hours</h3>
|
||
|
|
|
||
|
|
<div class="hours-grid">
|
||
|
|
<div class="hours-row">
|
||
|
|
<span class="hours-day">Monday - Friday</span>
|
||
|
|
<span class="hours-time">8:00 AM - 8:00 PM</span>
|
||
|
|
</div>
|
||
|
|
<div class="hours-row">
|
||
|
|
<span class="hours-day">Saturday</span>
|
||
|
|
<span class="hours-time">8:00 AM - 8:00 PM</span>
|
||
|
|
</div>
|
||
|
|
<div class="hours-row">
|
||
|
|
<span class="hours-day">Sunday</span>
|
||
|
|
<span class="hours-time">8:00 AM - 8:00 PM</span>
|
||
|
|
</div>
|
||
|
|
<div class="hours-row">
|
||
|
|
<span class="hours-day">Holidays</span>
|
||
|
|
<span class="hours-time">9:00 AM - 6:00 PM</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<p style="margin-top: 1rem; font-size: 0.875rem; color: var(--text-secondary);">
|
||
|
|
* Emergency service available 24/7
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Response Time -->
|
||
|
|
<div class="info-card">
|
||
|
|
<h3><i data-lucide="message-circle"></i> Response Times</h3>
|
||
|
|
<p style="color: var(--text-secondary); line-height: 1.6;">
|
||
|
|
<strong>Phone:</strong> Immediate during business hours<br>
|
||
|
|
<strong>Email:</strong> Within 24 hours<br>
|
||
|
|
<strong>Emergency:</strong> Available 24/7<br>
|
||
|
|
<strong>Quote Requests:</strong> Within 48 hours
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- Map Section -->
|
||
|
|
<section class="map-section" id="map">
|
||
|
|
<div class="container">
|
||
|
|
<div class="section-header">
|
||
|
|
<h2 class="section-title">Find Us at Pier 39</h2>
|
||
|
|
<p class="section-subtitle">Conveniently located at San Francisco's iconic waterfront</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="map-container">
|
||
|
|
<div class="map-overlay">
|
||
|
|
<h3>HarborSmith Marina</h3>
|
||
|
|
<p><strong>Address:</strong><br>Pier 39, Dock J<br>San Francisco, CA 94133</p>
|
||
|
|
<p><strong>Parking:</strong><br>Free 3-hour parking for customers</p>
|
||
|
|
<p><strong>Public Transit:</strong><br>F-Line Streetcar<br>BART + Muni accessible</p>
|
||
|
|
<button class="directions-btn">
|
||
|
|
<i data-lucide="navigation"></i>
|
||
|
|
Get Directions
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<i data-lucide="map" style="width: 60px; height: 60px; opacity: 0.3;"></i>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- Social Media -->
|
||
|
|
<section class="social-section">
|
||
|
|
<div class="container">
|
||
|
|
<div class="section-header">
|
||
|
|
<h2 class="section-title">Connect With Us</h2>
|
||
|
|
<p class="section-subtitle">Follow our adventures and stay updated on special offers</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="social-grid">
|
||
|
|
<div class="social-card">
|
||
|
|
<div class="social-icon">
|
||
|
|
<i data-lucide="facebook"></i>
|
||
|
|
</div>
|
||
|
|
<div class="social-name">Facebook</div>
|
||
|
|
<div class="social-handle">@HarborSmithSF</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="social-card">
|
||
|
|
<div class="social-icon">
|
||
|
|
<i data-lucide="instagram"></i>
|
||
|
|
</div>
|
||
|
|
<div class="social-name">Instagram</div>
|
||
|
|
<div class="social-handle">@harborsmith_sf</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="social-card">
|
||
|
|
<div class="social-icon">
|
||
|
|
<i data-lucide="twitter"></i>
|
||
|
|
</div>
|
||
|
|
<div class="social-name">Twitter</div>
|
||
|
|
<div class="social-handle">@HarborSmithSF</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="social-card">
|
||
|
|
<div class="social-icon">
|
||
|
|
<i data-lucide="youtube"></i>
|
||
|
|
</div>
|
||
|
|
<div class="social-name">YouTube</div>
|
||
|
|
<div class="social-handle">HarborSmith Yacht Services</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 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="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>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="footer-bottom">
|
||
|
|
<p>© 2024 HarborSmith Yacht Services. All rights reserved.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</footer>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
// Initialize Lucide icons
|
||
|
|
lucide.createIcons();
|
||
|
|
|
||
|
|
// Form type switcher
|
||
|
|
const formTypeBtns = document.querySelectorAll('.form-type-btn');
|
||
|
|
const forms = {
|
||
|
|
general: document.getElementById('generalForm'),
|
||
|
|
charter: document.getElementById('charterForm'),
|
||
|
|
maintenance: document.getElementById('maintenanceForm')
|
||
|
|
};
|
||
|
|
|
||
|
|
formTypeBtns.forEach(btn => {
|
||
|
|
btn.addEventListener('click', function() {
|
||
|
|
// Update active button
|
||
|
|
formTypeBtns.forEach(b => b.classList.remove('active'));
|
||
|
|
this.classList.add('active');
|
||
|
|
|
||
|
|
// Show corresponding form
|
||
|
|
const formType = this.dataset.form;
|
||
|
|
Object.keys(forms).forEach(key => {
|
||
|
|
forms[key].style.display = key === formType ? 'grid' : 'none';
|
||
|
|
});
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
// Form submission
|
||
|
|
document.querySelectorAll('.contact-form').forEach(form => {
|
||
|
|
form.addEventListener('submit', function(e) {
|
||
|
|
e.preventDefault();
|
||
|
|
|
||
|
|
// Simple validation
|
||
|
|
const requiredFields = this.querySelectorAll('[required]');
|
||
|
|
let valid = true;
|
||
|
|
|
||
|
|
requiredFields.forEach(field => {
|
||
|
|
if (!field.value) {
|
||
|
|
field.style.borderColor = '#ef4444';
|
||
|
|
valid = false;
|
||
|
|
} else {
|
||
|
|
field.style.borderColor = '';
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
if (valid) {
|
||
|
|
alert('Thank you for your message! We will get back to you within 24 hours.');
|
||
|
|
form.reset();
|
||
|
|
} else {
|
||
|
|
alert('Please fill in all required fields.');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
// Smooth scroll to map
|
||
|
|
document.querySelector('a[href="#map"]').addEventListener('click', function(e) {
|
||
|
|
e.preventDefault();
|
||
|
|
document.getElementById('map').scrollIntoView({ behavior: 'smooth' });
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|