914 lines
33 KiB
HTML
914 lines
33 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>About HarborSmith - Our Story</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>
|
||
.about-hero {
|
||
position: relative;
|
||
min-height: 70vh;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
overflow: hidden;
|
||
background: linear-gradient(135deg, #1e3a5f 0%, #2c5282 100%);
|
||
}
|
||
|
||
.about-hero::before {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 0;
|
||
background-image: url('golden_gate.jpg');
|
||
background-size: cover;
|
||
background-position: center;
|
||
opacity: 0.4;
|
||
}
|
||
|
||
.about-hero-content {
|
||
position: relative;
|
||
z-index: 1;
|
||
text-align: center;
|
||
padding: 2rem;
|
||
max-width: 900px;
|
||
}
|
||
|
||
.about-hero h1 {
|
||
font-family: 'Playfair Display', serif;
|
||
font-size: 4rem;
|
||
font-weight: 900;
|
||
color: white;
|
||
margin-bottom: 1rem;
|
||
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
|
||
}
|
||
|
||
.about-hero p {
|
||
font-size: 1.5rem;
|
||
color: rgba(255, 255, 255, 0.95);
|
||
font-weight: 300;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.story-section {
|
||
padding: 5rem 0;
|
||
background: var(--bg-primary);
|
||
}
|
||
|
||
.story-content {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 4rem;
|
||
align-items: center;
|
||
margin-bottom: 4rem;
|
||
}
|
||
|
||
.story-content.reverse {
|
||
direction: rtl;
|
||
}
|
||
|
||
.story-content.reverse .story-text {
|
||
direction: ltr;
|
||
}
|
||
|
||
.story-text h2 {
|
||
font-family: 'Playfair Display', serif;
|
||
font-size: 2.5rem;
|
||
font-weight: 700;
|
||
color: var(--text-primary);
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.story-text h3 {
|
||
font-size: 1.125rem;
|
||
color: var(--accent-primary);
|
||
font-weight: 600;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.story-text p {
|
||
color: var(--text-secondary);
|
||
line-height: 1.8;
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.story-image {
|
||
position: relative;
|
||
border-radius: 12px;
|
||
overflow: hidden;
|
||
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.story-image img {
|
||
width: 100%;
|
||
height: auto;
|
||
display: block;
|
||
}
|
||
|
||
.story-image-caption {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
|
||
color: white;
|
||
padding: 1.5rem;
|
||
font-size: 0.875rem;
|
||
}
|
||
|
||
.values-section {
|
||
background: linear-gradient(135deg, rgba(30, 58, 95, 0.05) 0%, rgba(30, 58, 95, 0.02) 100%);
|
||
padding: 5rem 0;
|
||
}
|
||
|
||
.values-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||
gap: 2rem;
|
||
margin-top: 3rem;
|
||
}
|
||
|
||
.value-card {
|
||
background: var(--card-bg);
|
||
border-radius: 12px;
|
||
padding: 2rem;
|
||
text-align: center;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.value-card:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.value-icon {
|
||
width: 80px;
|
||
height: 80px;
|
||
margin: 0 auto 1.5rem;
|
||
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;
|
||
}
|
||
|
||
.value-icon svg {
|
||
width: 40px;
|
||
height: 40px;
|
||
}
|
||
|
||
.value-title {
|
||
font-size: 1.5rem;
|
||
font-weight: 600;
|
||
color: var(--text-primary);
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.value-description {
|
||
color: var(--text-secondary);
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.team-section {
|
||
padding: 5rem 0;
|
||
}
|
||
|
||
.team-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||
gap: 2rem;
|
||
margin-top: 3rem;
|
||
}
|
||
|
||
.team-member {
|
||
background: var(--card-bg);
|
||
border-radius: 12px;
|
||
overflow: hidden;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.team-member:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.team-member-image {
|
||
height: 300px;
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: white;
|
||
font-size: 4rem;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.team-member-info {
|
||
padding: 1.5rem;
|
||
}
|
||
|
||
.team-member-name {
|
||
font-size: 1.25rem;
|
||
font-weight: 600;
|
||
color: var(--text-primary);
|
||
margin-bottom: 0.25rem;
|
||
}
|
||
|
||
.team-member-role {
|
||
color: var(--accent-primary);
|
||
font-weight: 500;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.team-member-bio {
|
||
color: var(--text-secondary);
|
||
font-size: 0.875rem;
|
||
line-height: 1.6;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.team-member-credentials {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.credential-badge {
|
||
padding: 0.25rem 0.75rem;
|
||
background: rgba(30, 58, 95, 0.1);
|
||
border-radius: 20px;
|
||
font-size: 0.75rem;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.milestones-section {
|
||
background: var(--card-bg);
|
||
padding: 5rem 0;
|
||
}
|
||
|
||
.timeline {
|
||
position: relative;
|
||
max-width: 1000px;
|
||
margin: 3rem auto;
|
||
}
|
||
|
||
.timeline::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 2px;
|
||
height: 100%;
|
||
background: var(--accent-primary);
|
||
opacity: 0.3;
|
||
}
|
||
|
||
.timeline-item {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 3rem;
|
||
position: relative;
|
||
}
|
||
|
||
.timeline-item:nth-child(even) {
|
||
flex-direction: row-reverse;
|
||
}
|
||
|
||
.timeline-content {
|
||
flex: 1;
|
||
padding: 1.5rem;
|
||
background: var(--bg-primary);
|
||
border-radius: 12px;
|
||
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
|
||
}
|
||
|
||
.timeline-item:nth-child(odd) .timeline-content {
|
||
margin-right: 2rem;
|
||
text-align: right;
|
||
}
|
||
|
||
.timeline-item:nth-child(even) .timeline-content {
|
||
margin-left: 2rem;
|
||
}
|
||
|
||
.timeline-dot {
|
||
width: 20px;
|
||
height: 20px;
|
||
background: var(--accent-primary);
|
||
border-radius: 50%;
|
||
position: absolute;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
border: 4px solid var(--card-bg);
|
||
}
|
||
|
||
.timeline-year {
|
||
font-size: 1.5rem;
|
||
font-weight: 700;
|
||
color: var(--accent-primary);
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.timeline-title {
|
||
font-size: 1.125rem;
|
||
font-weight: 600;
|
||
color: var(--text-primary);
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.timeline-description {
|
||
color: var(--text-secondary);
|
||
font-size: 0.875rem;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.certifications-section {
|
||
padding: 5rem 0;
|
||
text-align: center;
|
||
}
|
||
|
||
.cert-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||
gap: 2rem;
|
||
margin-top: 3rem;
|
||
max-width: 800px;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
|
||
.cert-item {
|
||
background: var(--card-bg);
|
||
border-radius: 12px;
|
||
padding: 2rem;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-height: 150px;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.cert-item:hover {
|
||
transform: scale(1.05);
|
||
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.cert-logo {
|
||
font-size: 1.5rem;
|
||
font-weight: 700;
|
||
color: var(--accent-primary);
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.cert-name {
|
||
font-size: 0.875rem;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.location-section {
|
||
background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-dark) 100%);
|
||
padding: 5rem 0;
|
||
color: white;
|
||
}
|
||
|
||
.location-content {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 4rem;
|
||
align-items: center;
|
||
}
|
||
|
||
.location-info h2 {
|
||
font-size: 2.5rem;
|
||
font-weight: 700;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.location-info p {
|
||
font-size: 1.125rem;
|
||
line-height: 1.8;
|
||
margin-bottom: 2rem;
|
||
opacity: 0.95;
|
||
}
|
||
|
||
.location-details {
|
||
display: grid;
|
||
gap: 1rem;
|
||
}
|
||
|
||
.location-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 1rem;
|
||
}
|
||
|
||
.location-item svg {
|
||
width: 24px;
|
||
height: 24px;
|
||
opacity: 0.9;
|
||
}
|
||
|
||
.map-container {
|
||
background: rgba(255, 255, 255, 0.1);
|
||
border-radius: 12px;
|
||
height: 400px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 1.5rem;
|
||
opacity: 0.9;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.about-hero h1 {
|
||
font-size: 2.5rem;
|
||
}
|
||
|
||
.story-content,
|
||
.story-content.reverse {
|
||
grid-template-columns: 1fr;
|
||
direction: ltr;
|
||
}
|
||
|
||
.timeline::before {
|
||
left: 20px;
|
||
}
|
||
|
||
.timeline-item,
|
||
.timeline-item:nth-child(even) {
|
||
flex-direction: row;
|
||
}
|
||
|
||
.timeline-item:nth-child(odd) .timeline-content,
|
||
.timeline-item:nth-child(even) .timeline-content {
|
||
margin-left: 3rem;
|
||
margin-right: 0;
|
||
text-align: left;
|
||
}
|
||
|
||
.timeline-dot {
|
||
left: 20px;
|
||
}
|
||
|
||
.location-content {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
</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 active">About</a>
|
||
<a href="contact.html" class="nav-link">Contact</a>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- Hero Section -->
|
||
<section class="about-hero">
|
||
<div class="about-hero-content">
|
||
<h1>Our Story</h1>
|
||
<p>Three generations of maritime excellence, serving the San Francisco Bay since 2009</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Story Section -->
|
||
<section class="story-section">
|
||
<div class="container">
|
||
<div class="story-content">
|
||
<div class="story-text">
|
||
<h3>Est. 2009</h3>
|
||
<h2>Born from Passion</h2>
|
||
<p>
|
||
HarborSmith began as a dream shared by Captain James Harbor and master technician Sarah Smith.
|
||
Both maritime enthusiasts with decades of combined experience, they saw an opportunity to create
|
||
something special in San Francisco Bay.
|
||
</p>
|
||
<p>
|
||
What started as a single boat and a small workshop has grown into the Bay Area's most trusted
|
||
name in yacht services. Our commitment to excellence, safety, and unforgettable experiences has
|
||
remained unchanged since day one.
|
||
</p>
|
||
<p>
|
||
Today, we're proud to be a family-owned business that treats every customer like family,
|
||
every yacht like our own, and every voyage like an adventure worth remembering.
|
||
</p>
|
||
</div>
|
||
<div class="story-image">
|
||
<img src="golden_gate.jpg" alt="Our journey">
|
||
<div class="story-image-caption">
|
||
Our flagship yacht passing under the Golden Gate Bridge
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="story-content reverse">
|
||
<div class="story-text">
|
||
<h3>The HarborSmith Difference</h3>
|
||
<h2>More Than a Service</h2>
|
||
<p>
|
||
We believe that yachting is about more than just boats – it's about freedom, adventure, and
|
||
creating memories that last a lifetime. That's why we go beyond simply providing services.
|
||
</p>
|
||
<p>
|
||
Our charter captains are storytellers who know every hidden cove and spectacular view. Our
|
||
maintenance technicians are craftsmen who treat every vessel with the care it deserves. And our
|
||
entire team shares a genuine passion for helping you experience the magic of life on the water.
|
||
</p>
|
||
<p>
|
||
Whether you're celebrating a special occasion, maintaining your prized vessel, or simply escaping
|
||
the everyday, we're here to make it extraordinary.
|
||
</p>
|
||
</div>
|
||
<div class="story-image">
|
||
<img src="yacht_party_couple_holding_hands.jpg" alt="Happy customers">
|
||
<div class="story-image-caption">
|
||
Creating unforgettable moments for our clients
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Values Section -->
|
||
<section class="values-section">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<h2 class="section-title">Our Core Values</h2>
|
||
<p class="section-subtitle">The principles that guide everything we do</p>
|
||
</div>
|
||
|
||
<div class="values-grid">
|
||
<div class="value-card">
|
||
<div class="value-icon">
|
||
<i data-lucide="shield"></i>
|
||
</div>
|
||
<h3 class="value-title">Safety First</h3>
|
||
<p class="value-description">
|
||
Your safety is our top priority. Every vessel is meticulously maintained, every crew member
|
||
is fully certified, and every journey follows the highest safety standards.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="value-card">
|
||
<div class="value-icon">
|
||
<i data-lucide="star"></i>
|
||
</div>
|
||
<h3 class="value-title">Excellence</h3>
|
||
<p class="value-description">
|
||
We don't just meet expectations – we exceed them. From our premium fleet to our expert
|
||
technicians, we deliver nothing but the best.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="value-card">
|
||
<div class="value-icon">
|
||
<i data-lucide="heart"></i>
|
||
</div>
|
||
<h3 class="value-title">Passion</h3>
|
||
<p class="value-description">
|
||
We love what we do, and it shows. Our enthusiasm for maritime life is contagious, making
|
||
every interaction a pleasure.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="value-card">
|
||
<div class="value-icon">
|
||
<i data-lucide="users"></i>
|
||
</div>
|
||
<h3 class="value-title">Family</h3>
|
||
<p class="value-description">
|
||
As a family business, we treat our customers, employees, and community like family. Your
|
||
trust is our most valuable asset.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Team Section -->
|
||
<section class="team-section">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<h2 class="section-title">Meet Our Crew</h2>
|
||
<p class="section-subtitle">The experienced professionals behind your perfect day on the water</p>
|
||
</div>
|
||
|
||
<div class="team-grid">
|
||
<div class="team-member">
|
||
<div class="team-member-image">JH</div>
|
||
<div class="team-member-info">
|
||
<h3 class="team-member-name">Captain James Harbor</h3>
|
||
<p class="team-member-role">Founder & Head Captain</p>
|
||
<p class="team-member-bio">
|
||
With over 30 years of sailing experience and a Coast Guard Master's license, James has
|
||
navigated waters around the world before making San Francisco Bay his home.
|
||
</p>
|
||
<div class="team-member-credentials">
|
||
<span class="credential-badge">USCG Licensed</span>
|
||
<span class="credential-badge">30+ Years Experience</span>
|
||
<span class="credential-badge">CPR Certified</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="team-member">
|
||
<div class="team-member-image">SS</div>
|
||
<div class="team-member-info">
|
||
<h3 class="team-member-name">Sarah Smith</h3>
|
||
<p class="team-member-role">Co-Founder & Service Director</p>
|
||
<p class="team-member-bio">
|
||
A master technician with certifications from all major marine manufacturers, Sarah ensures
|
||
every yacht in our care receives the best possible service.
|
||
</p>
|
||
<div class="team-member-credentials">
|
||
<span class="credential-badge">ABYC Certified</span>
|
||
<span class="credential-badge">Mercury Master Tech</span>
|
||
<span class="credential-badge">Volvo Specialist</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="team-member">
|
||
<div class="team-member-image">MH</div>
|
||
<div class="team-member-info">
|
||
<h3 class="team-member-name">Michael Harbor</h3>
|
||
<p class="team-member-role">Charter Captain</p>
|
||
<p class="team-member-bio">
|
||
Following in his father's footsteps, Michael brings youthful energy and extensive local
|
||
knowledge to every charter, ensuring guests have an unforgettable experience.
|
||
</p>
|
||
<div class="team-member-credentials">
|
||
<span class="credential-badge">USCG Licensed</span>
|
||
<span class="credential-badge">10+ Years Experience</span>
|
||
<span class="credential-badge">Dive Master</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="team-member">
|
||
<div class="team-member-image">RT</div>
|
||
<div class="team-member-info">
|
||
<h3 class="team-member-name">Roberto Torres</h3>
|
||
<p class="team-member-role">Lead Technician</p>
|
||
<p class="team-member-bio">
|
||
Roberto's expertise in marine electronics and engine systems makes him invaluable. His
|
||
attention to detail ensures every yacht runs perfectly.
|
||
</p>
|
||
<div class="team-member-credentials">
|
||
<span class="credential-badge">NMEA Certified</span>
|
||
<span class="credential-badge">Yamaha Specialist</span>
|
||
<span class="credential-badge">15+ Years Experience</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Milestones Section -->
|
||
<section class="milestones-section">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<h2 class="section-title">Our Journey</h2>
|
||
<p class="section-subtitle">Milestones that shaped who we are today</p>
|
||
</div>
|
||
|
||
<div class="timeline">
|
||
<div class="timeline-item">
|
||
<div class="timeline-content">
|
||
<div class="timeline-year">2009</div>
|
||
<div class="timeline-title">HarborSmith Founded</div>
|
||
<div class="timeline-description">
|
||
James and Sarah start HarborSmith with one boat and a dream
|
||
</div>
|
||
</div>
|
||
<div class="timeline-dot"></div>
|
||
</div>
|
||
|
||
<div class="timeline-item">
|
||
<div class="timeline-content">
|
||
<div class="timeline-year">2012</div>
|
||
<div class="timeline-title">Fleet Expansion</div>
|
||
<div class="timeline-description">
|
||
Added two more yachts and opened our maintenance facility
|
||
</div>
|
||
</div>
|
||
<div class="timeline-dot"></div>
|
||
</div>
|
||
|
||
<div class="timeline-item">
|
||
<div class="timeline-content">
|
||
<div class="timeline-year">2015</div>
|
||
<div class="timeline-title">100th Charter</div>
|
||
<div class="timeline-description">
|
||
Celebrated our 100th successful charter with a community event
|
||
</div>
|
||
</div>
|
||
<div class="timeline-dot"></div>
|
||
</div>
|
||
|
||
<div class="timeline-item">
|
||
<div class="timeline-content">
|
||
<div class="timeline-year">2018</div>
|
||
<div class="timeline-title">Award Recognition</div>
|
||
<div class="timeline-description">
|
||
Named "Best Yacht Services" by Bay Area Boating Magazine
|
||
</div>
|
||
</div>
|
||
<div class="timeline-dot"></div>
|
||
</div>
|
||
|
||
<div class="timeline-item">
|
||
<div class="timeline-content">
|
||
<div class="timeline-year">2020</div>
|
||
<div class="timeline-title">Community Support</div>
|
||
<div class="timeline-description">
|
||
Provided free maintenance to first responders during pandemic
|
||
</div>
|
||
</div>
|
||
<div class="timeline-dot"></div>
|
||
</div>
|
||
|
||
<div class="timeline-item">
|
||
<div class="timeline-content">
|
||
<div class="timeline-year">2024</div>
|
||
<div class="timeline-title">15 Years Strong</div>
|
||
<div class="timeline-description">
|
||
Celebrating 15 years of service with our biggest fleet yet
|
||
</div>
|
||
</div>
|
||
<div class="timeline-dot"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Certifications Section -->
|
||
<section class="certifications-section">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<h2 class="section-title">Certified Excellence</h2>
|
||
<p class="section-subtitle">Recognized by leading maritime organizations</p>
|
||
</div>
|
||
|
||
<div class="cert-grid">
|
||
<div class="cert-item">
|
||
<div class="cert-logo">USCG</div>
|
||
<div class="cert-name">US Coast Guard</div>
|
||
</div>
|
||
<div class="cert-item">
|
||
<div class="cert-logo">ABYC</div>
|
||
<div class="cert-name">American Boat & Yacht Council</div>
|
||
</div>
|
||
<div class="cert-item">
|
||
<div class="cert-logo">NMEA</div>
|
||
<div class="cert-name">National Marine Electronics</div>
|
||
</div>
|
||
<div class="cert-item">
|
||
<div class="cert-logo">BBB</div>
|
||
<div class="cert-name">Better Business Bureau</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Location Section -->
|
||
<section class="location-section">
|
||
<div class="container">
|
||
<div class="location-content">
|
||
<div class="location-info">
|
||
<h2>Find Us at Pier 39</h2>
|
||
<p>
|
||
Located at the heart of San Francisco's waterfront, our marina offers easy access, ample parking,
|
||
and stunning views. We're just minutes from downtown and perfectly positioned for Bay adventures.
|
||
</p>
|
||
<div class="location-details">
|
||
<div class="location-item">
|
||
<i data-lucide="map-pin"></i>
|
||
<span>Pier 39, Dock J, San Francisco, CA 94133</span>
|
||
</div>
|
||
<div class="location-item">
|
||
<i data-lucide="clock"></i>
|
||
<span>Open 7 days a week, 8:00 AM - 8:00 PM</span>
|
||
</div>
|
||
<div class="location-item">
|
||
<i data-lucide="car"></i>
|
||
<span>Free parking for charter guests</span>
|
||
</div>
|
||
<div class="location-item">
|
||
<i data-lucide="train"></i>
|
||
<span>BART and Muni accessible</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="map-container">
|
||
<i data-lucide="map" style="width: 60px; height: 60px;"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- CTA Section -->
|
||
<section class="booking-cta">
|
||
<div class="booking-container">
|
||
<div class="booking-content">
|
||
<h2 class="booking-title">Ready to Experience the HarborSmith Difference?</h2>
|
||
<p class="booking-subtitle">
|
||
Join our family of satisfied customers and discover why we're the Bay Area's premier yacht service
|
||
</p>
|
||
|
||
<div class="booking-options">
|
||
<div class="booking-card">
|
||
<span class="booking-icon">
|
||
<i data-lucide="sailboat"></i>
|
||
</span>
|
||
<h3>Book a Charter</h3>
|
||
<p>Start your adventure today</p>
|
||
<button class="btn-booking" onclick="window.location.href='charter.html'">
|
||
Explore Charters
|
||
</button>
|
||
</div>
|
||
|
||
<div class="booking-card featured">
|
||
<span class="booking-icon">
|
||
<i data-lucide="phone"></i>
|
||
</span>
|
||
<h3>Call Us</h3>
|
||
<p>Speak with our friendly team</p>
|
||
<button class="btn-booking primary" onclick="window.location.href='tel:4155550123'">
|
||
(415) 555-0123
|
||
</button>
|
||
</div>
|
||
|
||
<div class="booking-card">
|
||
<span class="booking-icon">
|
||
<i data-lucide="wrench"></i>
|
||
</span>
|
||
<h3>Schedule Service</h3>
|
||
<p>Keep your yacht pristine</p>
|
||
<button class="btn-booking" onclick="window.location.href='maintenance.html'">
|
||
View Services
|
||
</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 Bay Area yacht services since 2009</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();
|
||
</script>
|
||
</body>
|
||
</html> |