patx/demo
add frontline boats
Commit 05e4cee · harrison erd · 2026-06-16T02:54:52-04:00
Comments
No comments yet.
Diff
diff --git a/docs/frontlineboats.html b/docs/frontlineboats.html
new file mode 100644
index 0000000..c5d7ab8
--- /dev/null
+++ b/docs/frontlineboats.html
@@ -0,0 +1,1062 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Frontline Boat Services — Miami, FL</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=Bebas+Neue&family=Inter:wght@300;400;500;600&family=Oswald:wght@400;500;600;700&display=swap" rel="stylesheet" />
+ <style>
+ /* ── TOKEN SYSTEM ─────────────────────────────────────────────────────── */
+ :root {
+ --flame: #D62B2B;
+ --ember: #FF5C1A;
+ --smoke: #1A1A1A;
+ --ash: #2E2E2E;
+ --steel: #3D3D3D;
+ --mist: #B0B0B0;
+ --white: #F0EDE8;
+ --gold: #C9A84C;
+
+ --font-display: 'Bebas Neue', sans-serif;
+ --font-heading: 'Oswald', sans-serif;
+ --font-body: 'Inter', sans-serif;
+ }
+
+ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+ html { scroll-behavior: smooth; }
+
+ body {
+ background: var(--smoke);
+ color: var(--white);
+ font-family: var(--font-body);
+ font-size: 16px;
+ line-height: 1.6;
+ overflow-x: hidden;
+ }
+
+ /* ── NAV ──────────────────────────────────────────────────────────────── */
+ nav {
+ position: fixed;
+ top: 0; left: 0; right: 0;
+ z-index: 100;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 0 5vw;
+ height: 64px;
+ background: rgba(20,20,20,0.92);
+ backdrop-filter: blur(8px);
+ border-bottom: 1px solid var(--ash);
+ }
+
+ .nav-logo {
+ font-family: var(--font-display);
+ font-size: 1.5rem;
+ letter-spacing: 0.08em;
+ color: var(--white);
+ text-decoration: none;
+ }
+
+ .nav-logo span { color: var(--flame); }
+
+ .nav-links {
+ display: flex;
+ gap: 2rem;
+ list-style: none;
+ }
+
+ .nav-links a {
+ font-family: var(--font-heading);
+ font-size: 0.8rem;
+ letter-spacing: 0.12em;
+ text-transform: uppercase;
+ color: var(--mist);
+ text-decoration: none;
+ transition: color 0.2s;
+ }
+
+ .nav-links a:hover { color: var(--flame); }
+
+ .nav-cta {
+ font-family: var(--font-heading);
+ font-size: 0.75rem;
+ letter-spacing: 0.12em;
+ text-transform: uppercase;
+ background: var(--flame);
+ color: #fff;
+ padding: 0.5rem 1.25rem;
+ border: none;
+ cursor: pointer;
+ text-decoration: none;
+ transition: background 0.2s;
+ }
+
+ .nav-cta:hover { background: var(--ember); }
+
+ /* ── HERO ─────────────────────────────────────────────────────────────── */
+ .hero {
+ position: relative;
+ min-height: 100vh;
+ display: flex;
+ align-items: flex-end;
+ padding: 0 5vw 8vh;
+ overflow: hidden;
+ }
+
+ .hero-bg {
+ position: absolute;
+ inset: 0;
+ background:
+ linear-gradient(to right, rgba(10,10,10,0.95) 40%, rgba(10,10,10,0.5) 100%),
+ url('https://images.unsplash.com/photo-1605281317010-fe5ffe798166?w=1600&q=80') center/cover no-repeat;
+ }
+
+ /* Signature element: diagonal red slash that bleeds off the right edge */
+ .hero-slash {
+ position: absolute;
+ top: 0; right: -60px;
+ width: 180px;
+ height: 100%;
+ background: var(--flame);
+ transform: skewX(-8deg);
+ opacity: 0.08;
+ pointer-events: none;
+ }
+
+ .hero-slash::after {
+ content: '';
+ position: absolute;
+ top: 0; left: -100px;
+ width: 60px;
+ height: 100%;
+ background: var(--ember);
+ opacity: 0.5;
+ }
+
+ .hero-content {
+ position: relative;
+ z-index: 2;
+ max-width: 680px;
+ }
+
+ .hero-eyebrow {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.6rem;
+ font-family: var(--font-heading);
+ font-size: 0.72rem;
+ letter-spacing: 0.2em;
+ text-transform: uppercase;
+ color: var(--flame);
+ margin-bottom: 1rem;
+ }
+
+ .hero-eyebrow::before {
+ content: '';
+ display: block;
+ width: 28px;
+ height: 2px;
+ background: var(--flame);
+ }
+
+ .hero-title {
+ font-family: var(--font-display);
+ font-size: clamp(4rem, 10vw, 8rem);
+ line-height: 0.92;
+ letter-spacing: 0.02em;
+ color: var(--white);
+ margin-bottom: 0.5rem;
+ }
+
+ .hero-title .accent { color: var(--flame); }
+
+ .hero-sub {
+ font-family: var(--font-heading);
+ font-size: clamp(1rem, 2.5vw, 1.4rem);
+ font-weight: 400;
+ letter-spacing: 0.1em;
+ text-transform: uppercase;
+ color: var(--mist);
+ margin-bottom: 2rem;
+ }
+
+ .hero-body {
+ font-size: 1rem;
+ font-weight: 300;
+ color: var(--mist);
+ max-width: 480px;
+ margin-bottom: 2.5rem;
+ line-height: 1.7;
+ }
+
+ .hero-actions {
+ display: flex;
+ gap: 1rem;
+ flex-wrap: wrap;
+ align-items: center;
+ }
+
+ .btn-primary {
+ font-family: var(--font-heading);
+ font-size: 0.8rem;
+ letter-spacing: 0.15em;
+ text-transform: uppercase;
+ background: var(--flame);
+ color: #fff;
+ padding: 1rem 2rem;
+ border: none;
+ cursor: pointer;
+ text-decoration: none;
+ transition: background 0.2s, transform 0.15s;
+ display: inline-block;
+ }
+
+ .btn-primary:hover { background: var(--ember); transform: translateY(-1px); }
+
+ .btn-ghost {
+ font-family: var(--font-heading);
+ font-size: 0.8rem;
+ letter-spacing: 0.15em;
+ text-transform: uppercase;
+ background: transparent;
+ color: var(--white);
+ padding: 1rem 2rem;
+ border: 1px solid var(--steel);
+ cursor: pointer;
+ text-decoration: none;
+ transition: border-color 0.2s, color 0.2s;
+ display: inline-block;
+ }
+
+ .btn-ghost:hover { border-color: var(--flame); color: var(--flame); }
+
+ /* ── TRUST BAR ────────────────────────────────────────────────────────── */
+ .trust-bar {
+ background: var(--ash);
+ border-top: 1px solid var(--steel);
+ border-bottom: 1px solid var(--steel);
+ padding: 1.25rem 5vw;
+ display: flex;
+ align-items: center;
+ gap: 2.5rem;
+ flex-wrap: wrap;
+ justify-content: center;
+ }
+
+ .trust-item {
+ display: flex;
+ align-items: center;
+ gap: 0.6rem;
+ font-family: var(--font-heading);
+ font-size: 0.75rem;
+ letter-spacing: 0.12em;
+ text-transform: uppercase;
+ color: var(--mist);
+ }
+
+ .trust-item svg { flex-shrink: 0; }
+
+ .trust-divider {
+ width: 1px;
+ height: 20px;
+ background: var(--steel);
+ }
+
+ /* ── SECTIONS SHARED ──────────────────────────────────────────────────── */
+ section {
+ padding: 7rem 5vw;
+ }
+
+ .section-eyebrow {
+ font-family: var(--font-heading);
+ font-size: 0.7rem;
+ letter-spacing: 0.2em;
+ text-transform: uppercase;
+ color: var(--flame);
+ margin-bottom: 0.75rem;
+ }
+
+ .section-title {
+ font-family: var(--font-display);
+ font-size: clamp(2.4rem, 5vw, 4rem);
+ line-height: 1;
+ color: var(--white);
+ margin-bottom: 1.25rem;
+ }
+
+ .section-body {
+ font-size: 1rem;
+ font-weight: 300;
+ color: var(--mist);
+ max-width: 560px;
+ line-height: 1.75;
+ }
+
+ /* ── SERVICES ─────────────────────────────────────────────────────────── */
+ .services-section {
+ background: var(--smoke);
+ }
+
+ .services-header {
+ margin-bottom: 4rem;
+ }
+
+ .services-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+ gap: 1px;
+ background: var(--steel);
+ }
+
+ .service-card {
+ background: var(--ash);
+ padding: 2.5rem 2rem;
+ transition: background 0.25s;
+ position: relative;
+ overflow: hidden;
+ }
+
+ .service-card::before {
+ content: '';
+ position: absolute;
+ bottom: 0; left: 0;
+ width: 100%;
+ height: 3px;
+ background: var(--flame);
+ transform: scaleX(0);
+ transform-origin: left;
+ transition: transform 0.3s ease;
+ }
+
+ .service-card:hover::before { transform: scaleX(1); }
+ .service-card:hover { background: var(--steel); }
+
+ .service-icon {
+ width: 44px;
+ height: 44px;
+ margin-bottom: 1.25rem;
+ color: var(--flame);
+ }
+
+ .service-name {
+ font-family: var(--font-heading);
+ font-size: 1.05rem;
+ font-weight: 600;
+ letter-spacing: 0.05em;
+ text-transform: uppercase;
+ color: var(--white);
+ margin-bottom: 0.6rem;
+ }
+
+ .service-desc {
+ font-size: 0.88rem;
+ font-weight: 300;
+ color: var(--mist);
+ line-height: 1.65;
+ }
+
+ /* ── ABOUT / FIRST RESPONDER ──────────────────────────────────────────── */
+ .about-section {
+ background: var(--ash);
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 5rem;
+ align-items: center;
+ }
+
+ .about-visual {
+ position: relative;
+ }
+
+ .about-img {
+ width: 100%;
+ aspect-ratio: 4/5;
+ object-fit: cover;
+ display: block;
+ background:
+ linear-gradient(135deg, #1a1a1a 0%, #2e2e2e 100%);
+ }
+
+ .about-img-real {
+ width: 100%;
+ aspect-ratio: 4/5;
+ object-fit: cover;
+ display: block;
+ }
+
+ /* thin red stripe accent on image */
+ .about-stripe {
+ position: absolute;
+ top: 2rem;
+ left: -12px;
+ width: 4px;
+ height: calc(100% - 4rem);
+ background: var(--flame);
+ }
+
+ /* First Responder badge */
+ .fr-badge {
+ position: absolute;
+ bottom: -1.5rem;
+ right: -1.5rem;
+ background: var(--smoke);
+ border: 2px solid var(--flame);
+ padding: 1rem 1.25rem;
+ display: flex;
+ align-items: center;
+ gap: 0.75rem;
+ }
+
+ .fr-badge-flag {
+ width: 44px;
+ flex-shrink: 0;
+ }
+
+ .fr-badge-text {
+ font-family: var(--font-heading);
+ font-size: 0.72rem;
+ letter-spacing: 0.12em;
+ text-transform: uppercase;
+ color: var(--flame);
+ line-height: 1.3;
+ }
+
+ .about-content .section-body {
+ margin-bottom: 1.5rem;
+ }
+
+ .about-stat-row {
+ display: flex;
+ gap: 2.5rem;
+ margin-top: 2.5rem;
+ flex-wrap: wrap;
+ }
+
+ .stat {
+ display: flex;
+ flex-direction: column;
+ gap: 0.25rem;
+ }
+
+ .stat-num {
+ font-family: var(--font-display);
+ font-size: 2.6rem;
+ color: var(--flame);
+ line-height: 1;
+ }
+
+ .stat-label {
+ font-family: var(--font-heading);
+ font-size: 0.7rem;
+ letter-spacing: 0.15em;
+ text-transform: uppercase;
+ color: var(--mist);
+ }
+
+ /* ── FLAG SVG ─────────────────────────────────────────────────────────── */
+ /* Inline thin-red-line flag */
+
+ /* ── PROCESS ──────────────────────────────────────────────────────────── */
+ .process-section {
+ background: var(--smoke);
+ }
+
+ .process-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+ gap: 0;
+ margin-top: 4rem;
+ position: relative;
+ }
+
+ .process-grid::before {
+ content: '';
+ position: absolute;
+ top: 2.2rem;
+ left: 2rem;
+ right: 2rem;
+ height: 1px;
+ background: linear-gradient(to right, var(--flame), var(--steel));
+ z-index: 0;
+ }
+
+ .process-step {
+ position: relative;
+ z-index: 1;
+ padding: 0 1.5rem;
+ padding-top: 4.5rem;
+ }
+
+ .step-dot {
+ position: absolute;
+ top: 1.45rem;
+ left: 1.5rem;
+ width: 16px;
+ height: 16px;
+ border-radius: 50%;
+ background: var(--flame);
+ border: 3px solid var(--smoke);
+ outline: 1px solid var(--flame);
+ }
+
+ .step-num {
+ font-family: var(--font-display);
+ font-size: 3.5rem;
+ color: var(--steel);
+ line-height: 1;
+ margin-bottom: 0.5rem;
+ }
+
+ .step-title {
+ font-family: var(--font-heading);
+ font-size: 0.9rem;
+ font-weight: 600;
+ letter-spacing: 0.08em;
+ text-transform: uppercase;
+ color: var(--white);
+ margin-bottom: 0.5rem;
+ }
+
+ .step-desc {
+ font-size: 0.85rem;
+ font-weight: 300;
+ color: var(--mist);
+ line-height: 1.6;
+ }
+
+ /* ── CONTACT ──────────────────────────────────────────────────────────── */
+ .contact-section {
+ background: var(--ash);
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 5rem;
+ align-items: start;
+ }
+
+ .contact-info {
+ display: flex;
+ flex-direction: column;
+ gap: 1.75rem;
+ }
+
+ .contact-row {
+ display: flex;
+ align-items: flex-start;
+ gap: 1rem;
+ }
+
+ .contact-icon {
+ width: 20px;
+ height: 20px;
+ color: var(--flame);
+ flex-shrink: 0;
+ margin-top: 2px;
+ }
+
+ .contact-label {
+ font-family: var(--font-heading);
+ font-size: 0.65rem;
+ letter-spacing: 0.18em;
+ text-transform: uppercase;
+ color: var(--mist);
+ margin-bottom: 0.2rem;
+ }
+
+ .contact-value {
+ font-size: 1rem;
+ font-weight: 400;
+ color: var(--white);
+ text-decoration: none;
+ }
+
+ .contact-value:hover { color: var(--flame); }
+
+ /* Social row */
+ .social-row {
+ display: flex;
+ gap: 1rem;
+ margin-top: 0.5rem;
+ }
+
+ .social-btn {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.5rem;
+ font-family: var(--font-heading);
+ font-size: 0.72rem;
+ letter-spacing: 0.1em;
+ text-transform: uppercase;
+ color: var(--mist);
+ border: 1px solid var(--steel);
+ padding: 0.5rem 0.9rem;
+ text-decoration: none;
+ transition: border-color 0.2s, color 0.2s;
+ }
+
+ .social-btn:hover { border-color: var(--flame); color: var(--flame); }
+
+ /* Quote form */
+ .quote-form {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ }
+
+ .form-label {
+ font-family: var(--font-heading);
+ font-size: 0.65rem;
+ letter-spacing: 0.18em;
+ text-transform: uppercase;
+ color: var(--mist);
+ margin-bottom: 0.35rem;
+ display: block;
+ }
+
+ .form-field {
+ display: flex;
+ flex-direction: column;
+ }
+
+ .form-input,
+ .form-select,
+ .form-textarea {
+ background: var(--smoke);
+ border: 1px solid var(--steel);
+ color: var(--white);
+ font-family: var(--font-body);
+ font-size: 0.95rem;
+ padding: 0.75rem 1rem;
+ outline: none;
+ transition: border-color 0.2s;
+ width: 100%;
+ }
+
+ .form-input::placeholder,
+ .form-textarea::placeholder { color: var(--steel); }
+ .form-input:focus,
+ .form-select:focus,
+ .form-textarea:focus { border-color: var(--flame); }
+
+ .form-select {
+ appearance: none;
+ cursor: pointer;
+ }
+
+ .form-textarea { resize: vertical; min-height: 110px; }
+
+ .form-row {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 1rem;
+ }
+
+ /* ── FOOTER ───────────────────────────────────────────────────────────── */
+ footer {
+ background: #111;
+ border-top: 1px solid var(--ash);
+ padding: 2rem 5vw;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ flex-wrap: wrap;
+ gap: 1rem;
+ }
+
+ .footer-logo {
+ font-family: var(--font-display);
+ font-size: 1.2rem;
+ letter-spacing: 0.08em;
+ color: var(--white);
+ }
+
+ .footer-logo span { color: var(--flame); }
+
+ .footer-note {
+ font-size: 0.78rem;
+ color: var(--steel);
+ font-weight: 300;
+ }
+
+ /* ── RESPONSIVE ───────────────────────────────────────────────────────── */
+ @media (max-width: 800px) {
+ .nav-links { display: none; }
+
+ .about-section,
+ .contact-section {
+ grid-template-columns: 1fr;
+ gap: 3rem;
+ }
+
+ .fr-badge { right: 0; bottom: -1rem; }
+
+ .process-grid::before { display: none; }
+
+ .form-row { grid-template-columns: 1fr; }
+
+ .trust-divider { display: none; }
+ }
+
+ @media (prefers-reduced-motion: reduce) {
+ * { transition: none !important; animation: none !important; }
+ }
+ </style>
+</head>
+<body>
+
+ <!-- NAV -->
+ <nav>
+ <a class="nav-logo" href="#">FRONTLINE <span>BOATS</span></a>
+ <ul class="nav-links">
+ <li><a href="#services">Services</a></li>
+ <li><a href="#about">About</a></li>
+ <li><a href="#process">Process</a></li>
+ <li><a href="#contact">Contact</a></li>
+ </ul>
+ <a class="nav-cta" href="#contact">Get a Quote</a>
+ </nav>
+
+ <!-- HERO -->
+ <section class="hero">
+ <div class="hero-bg"></div>
+ <div class="hero-slash"></div>
+ <div class="hero-content">
+ <div class="hero-eyebrow">Miami, FL — First Responder Owned & Operated</div>
+ <h1 class="hero-title">
+ FRONT<br><span class="accent">LINE</span><br>BOAT<br>SERVICES
+ </h1>
+ <p class="hero-sub">Marine Electronics Specialists</p>
+ <p class="hero-body">
+ Built on the discipline of the firehouse. Every wire, every connection,
+ every system treated like a life depends on it — because on the water, it might.
+ </p>
+ <div class="hero-actions">
+ <a class="btn-primary" href="#contact">Get a Free Quote</a>
+ <a class="btn-ghost" href="#services">Our Services</a>
+ </div>
+ </div>
+ </section>
+
+ <!-- TRUST BAR -->
+ <div class="trust-bar">
+ <div class="trust-item">
+ <!-- shield icon -->
+ <svg class="trust-item-icon" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" color="#D62B2B"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
+ First Responder Owned
+ </div>
+ <div class="trust-divider"></div>
+ <div class="trust-item">
+ <svg class="trust-item-icon" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" color="#D62B2B"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
+ Fast Turnaround
+ </div>
+ <div class="trust-divider"></div>
+ <div class="trust-item">
+ <svg class="trust-item-icon" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" color="#D62B2B"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
+ Quality Guaranteed
+ </div>
+ <div class="trust-divider"></div>
+ <div class="trust-item">
+ <svg class="trust-item-icon" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" color="#D62B2B"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
+ Miami & South Florida
+ </div>
+ <div class="trust-divider"></div>
+ <div class="trust-item">
+ <svg class="trust-item-icon" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" color="#D62B2B"><path d="M3 18v-6a9 9 0 0 1 18 0v6"/><path d="M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z"/></svg>
+ Full-Service Shop
+ </div>
+ </div>
+
+ <!-- SERVICES -->
+ <section id="services" class="services-section">
+ <div class="services-header">
+ <p class="section-eyebrow">What We Do</p>
+ <h2 class="section-title">EVERY SYSTEM,<br>HANDLED RIGHT</h2>
+ <p class="section-body">
+ From a single gauge to a full electronics overhaul, we bring the same
+ first-responder standard of accuracy and accountability to every job.
+ </p>
+ </div>
+
+ <div class="services-grid">
+
+ <div class="service-card">
+ <svg class="service-icon" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+ <circle cx="12" cy="12" r="3"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>
+ </svg>
+ <div class="service-name">Marine Electronics</div>
+ <div class="service-desc">Chartplotters, depth finders, VHF radios, autopilots, and full NMEA 2000 network builds. If it has a wire, we can install it.</div>
+ </div>
+
+ <div class="service-card">
+ <svg class="service-icon" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+ <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>
+ </svg>
+ <div class="service-name">Full Rewiring</div>
+ <div class="service-desc">Complete electrical system replacement or repair. We chase every ghost fault, eliminate every corroded connection, and build to ABYC standards.</div>
+ </div>
+
+ <div class="service-card">
+ <svg class="service-icon" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+ <path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/>
+ </svg>
+ <div class="service-name">Audio Installation</div>
+ <div class="service-desc">Marine-grade speakers, amplifiers, subwoofers, and head units. Crystal clear sound that holds up against saltwater, sun, and wind.</div>
+ </div>
+
+ <div class="service-card">
+ <svg class="service-icon" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+ <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z"/><circle cx="12" cy="9" r="2.5"/>
+ </svg>
+ <div class="service-name">GPS Systems</div>
+ <div class="service-desc">Single and multi-station GPS installation, sensor integration, and satellite compass setup for reliable on-water navigation.</div>
+ </div>
+
+ <div class="service-card">
+ <svg class="service-icon" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+ <rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/>
+ </svg>
+ <div class="service-name">Displays & Instruments</div>
+ <div class="service-desc">Multi-function display installs, gauge clusters, digital switching panels, and helm layouts built for the way you actually run your boat.</div>
+ </div>
+
+ <div class="service-card">
+ <svg class="service-icon" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+ <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/>
+ </svg>
+ <div class="service-name">And More</div>
+ <div class="service-desc">Shore power, battery systems, bilge pumps, lighting, camera systems. Tell us what your boat needs — we'll sort it out.</div>
+ </div>
+
+ </div>
+ </section>
+
+ <!-- ABOUT / FIRST RESPONDER -->
+ <section id="about" class="about-section">
+ <div class="about-visual">
+ <div class="about-stripe"></div>
+ <!-- Placeholder image with a styled background; in production replace src with a real photo -->
+ <img
+ class="about-img-real"
+ src="https://images.unsplash.com/photo-1544551763-92ab472cad5d?w=800&q=80"
+ alt="Firefighter and boat technician at work"
+ onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';"
+ />
+ <div class="about-img" style="display:none; align-items:center; justify-content:center;">
+ <svg width="64" height="64" fill="none" stroke="#3D3D3D" stroke-width="1.5" viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
+ </div>
+ <div class="fr-badge">
+ <!-- Inline thin-red-line flag SVG -->
+ <svg class="fr-badge-flag" viewBox="0 0 60 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <rect width="60" height="36" fill="#1A1A1A"/>
+ <!-- stripes -->
+ <rect y="0" width="60" height="4" fill="#555"/>
+ <rect y="4" width="60" height="4" fill="#1A1A1A"/>
+ <rect y="8" width="60" height="4" fill="#555"/>
+ <rect y="12" width="60" height="4" fill="#1A1A1A"/>
+ <!-- thin red line -->
+ <rect y="16" width="60" height="4" fill="#D62B2B"/>
+ <rect y="20" width="60" height="4" fill="#1A1A1A"/>
+ <rect y="24" width="60" height="4" fill="#555"/>
+ <rect y="28" width="60" height="4" fill="#1A1A1A"/>
+ <rect y="32" width="60" height="4" fill="#555"/>
+ <!-- canton overlay -->
+ <rect width="24" height="20" fill="#1A1A1A" opacity="0.6"/>
+ </svg>
+ <div class="fr-badge-text">First Responder<br>Owned & Operated</div>
+ </div>
+ </div>
+
+ <div class="about-content">
+ <p class="section-eyebrow">About Frontline</p>
+ <h2 class="section-title">TRAINED TO<br>NEVER FAIL</h2>
+ <p class="section-body">
+ Frontline Boat Services was founded by an active firefighter who built the same
+ habits off the truck as on it: no shortcuts, no guesswork, no half-measures.
+ </p>
+ <p class="section-body" style="margin-top: 1rem;">
+ Working out of Miami, FL, we serve boaters across South Florida who are tired of
+ sloppy installs and chasing electrical gremlins season after season. When we hand
+ your boat back, every system works — and keeps working.
+ </p>
+ <div class="about-stat-row">
+ <div class="stat">
+ <span class="stat-num">100%</span>
+ <span class="stat-label">First Responder Owned</span>
+ </div>
+ <div class="stat">
+ <span class="stat-num">Miami</span>
+ <span class="stat-label">Based in South FL</span>
+ </div>
+ <div class="stat">
+ <span class="stat-num">0</span>
+ <span class="stat-label">Shortcuts Taken</span>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <!-- PROCESS -->
+ <section id="process" class="process-section">
+ <p class="section-eyebrow">How It Works</p>
+ <h2 class="section-title">CLEAR CHAIN<br>OF COMMAND</h2>
+ <div class="process-grid">
+ <div class="process-step">
+ <div class="step-dot"></div>
+ <div class="step-num">01</div>
+ <div class="step-title">Tell Us What's Going On</div>
+ <div class="step-desc">Call, text, or email. Describe the issue or the upgrade — no need to know the technical terms. We listen.</div>
+ </div>
+ <div class="process-step">
+ <div class="step-dot"></div>
+ <div class="step-num">02</div>
+ <div class="step-title">Get a Straight Quote</div>
+ <div class="step-desc">We assess the work and give you a clear, no-surprises estimate before any wrenches turn.</div>
+ </div>
+ <div class="process-step">
+ <div class="step-dot"></div>
+ <div class="step-num">03</div>
+ <div class="step-title">We Get to Work</div>
+ <div class="step-desc">Every job is done to ABYC standards with quality marine-grade components. No cheap substitutions.</div>
+ </div>
+ <div class="process-step">
+ <div class="step-dot"></div>
+ <div class="step-num">04</div>
+ <div class="step-title">You Get Back on the Water</div>
+ <div class="step-desc">We test everything before you sign off. Your boat leaves ready to perform, and you know exactly what was done.</div>
+ </div>
+ </div>
+ </section>
+
+ <!-- CONTACT -->
+ <section id="contact" class="contact-section">
+ <div>
+ <p class="section-eyebrow">Get In Touch</p>
+ <h2 class="section-title">MESSAGE US<br>TODAY</h2>
+ <p class="section-body" style="margin-bottom: 3rem;">
+ Ready for a quote or just have a question? Reach out by phone, email, or the form.
+ We get back to every message.
+ </p>
+
+ <div class="contact-info">
+ <div class="contact-row">
+ <svg class="contact-icon" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+ <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 12 19.79 19.79 0 0 1 1.61 3.38C1.61 2.18 2.6 1 3.8 1h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L7.91 8.91a16 16 0 0 0 6.06 6.06l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
+ </svg>
+ <div>
+ <div class="contact-label">Phone / Text</div>
+ <a class="contact-value" href="tel:+13054780000">(305) ___-0478</a>
+ </div>
+ </div>
+
+ <div class="contact-row">
+ <svg class="contact-icon" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+ <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/>
+ </svg>
+ <div>
+ <div class="contact-label">Email</div>
+ <a class="contact-value" href="mailto:[email protected]">[email protected]</a>
+ </div>
+ </div>
+
+ <div class="contact-row">
+ <svg class="contact-icon" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+ <path d="M21 10c0 7-9 13-9 13S3 17 3 10a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/>
+ </svg>
+ <div>
+ <div class="contact-label">Location</div>
+ <span class="contact-value">Miami, FL & South Florida</span>
+ </div>
+ </div>
+
+ <div class="social-row">
+ <a class="social-btn" href="https://instagram.com/frontlineboats" target="_blank" rel="noopener">
+ <svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><rect x="2" y="2" width="20" height="20" rx="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg>
+ @FrontlineBoats
+ </a>
+ <a class="social-btn" href="https://facebook.com" target="_blank" rel="noopener">
+ <svg width="14" height="14" fill="currentColor" viewBox="0 0 24 24"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>
+ Frontline Boat Services
+ </a>
+ </div>
+ </div>
+ </div>
+
+ <div>
+ <div class="quote-form">
+ <div class="form-row">
+ <div class="form-field">
+ <label class="form-label" for="fname">First Name</label>
+ <input class="form-input" type="text" id="fname" placeholder="John" />
+ </div>
+ <div class="form-field">
+ <label class="form-label" for="lname">Last Name</label>
+ <input class="form-input" type="text" id="lname" placeholder="Smith" />
+ </div>
+ </div>
+ <div class="form-field">
+ <label class="form-label" for="email">Email</label>
+ <input class="form-input" type="email" id="email" placeholder="[email protected]" />
+ </div>
+ <div class="form-field">
+ <label class="form-label" for="phone">Phone / Text</label>
+ <input class="form-input" type="tel" id="phone" placeholder="(305) 000-0000" />
+ </div>
+ <div class="form-field">
+ <label class="form-label" for="service">Service Needed</label>
+ <select class="form-select" id="service">
+ <option value="" disabled selected>Select a service…</option>
+ <option>Marine Electronics Installation</option>
+ <option>Full Rewiring</option>
+ <option>Audio Installation</option>
+ <option>GPS / Navigation</option>
+ <option>Displays & Instruments</option>
+ <option>General Electrical Repair</option>
+ <option>Other / Not Sure</option>
+ </select>
+ </div>
+ <div class="form-field">
+ <label class="form-label" for="message">Tell Us About Your Boat</label>
+ <textarea class="form-textarea" id="message" placeholder="Year, make, model, and what you're looking to have done…"></textarea>
+ </div>
+ <button class="btn-primary" type="button" onclick="handleSubmit()" style="width:100%; font-size:0.85rem; padding: 1.1rem;">Request a Free Quote</button>
+ </div>
+ </div>
+ </section>
+
+ <!-- FOOTER -->
+ <footer>
+ <div class="footer-logo">FRONTLINE <span>BOAT SERVICES</span></div>
+ <div class="footer-note">Miami, FL · First Responder Owned · [email protected]</div>
+ <div class="footer-note">© 2025 Frontline Boat Services. All rights reserved.</div>
+ </footer>
+
+ <script>
+ // Minimal smooth scroll for nav links
+ document.querySelectorAll('a[href^="#"]').forEach(link => {
+ link.addEventListener('click', e => {
+ const target = document.querySelector(link.getAttribute('href'));
+ if (target) {
+ e.preventDefault();
+ target.scrollIntoView({ behavior: 'smooth' });
+ }
+ });
+ });
+
+ // Sticky nav shadow
+ const nav = document.querySelector('nav');
+ window.addEventListener('scroll', () => {
+ nav.style.boxShadow = window.scrollY > 40 ? '0 4px 24px rgba(0,0,0,0.5)' : 'none';
+ });
+
+ // Form submit placeholder
+ function handleSubmit() {
+ const btn = document.querySelector('.quote-form .btn-primary');
+ btn.textContent = '✓ Message Sent — We\'ll be in touch!';
+ btn.style.background = '#1a5c1a';
+ btn.disabled = true;
+ }
+ </script>
+</body>
+</html>
\ No newline at end of file