`public/index.html`

353 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Surf City Strolls — Dog Walking in Ventura, CA</title>
<meta name="description" content="Friendly, reliable dog walking along the Ventura coast. Beach strolls, midday walks, and adventure hikes. Bonded, insured, and local. Book your pup's first walk today.">
<meta property="og:title" content="Surf City Strolls — Ventura Dog Walking">
<meta property="og:description" content="Beach strolls, midday walks & adventure hikes for Ventura pups. Bonded, insured, local.">
<meta property="og:type" content="website">
<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=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;1,9..144,500&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
<style>
  :root{
    --ocean:#1f5e72;        /* deep ventura teal */
    --ocean-deep:#143d4a;
    --surf:#5fb3c4;         /* light surf */
    --sand:#f4ede0;         /* warm sand */
    --sand-deep:#e6d8c3;
    --sunset:#e8895a;       /* sunset coral */
    --sunset-deep:#d2683a;
    --ink:#1c2a2f;
    --muted:#5a6a70;
    --white:#ffffff;
    --serif:'Fraunces',Georgia,serif;
    --sans:'Inter',system-ui,sans-serif;
    --shadow:0 18px 50px -22px rgba(20,61,74,.45);
    --radius:18px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{font-family:var(--sans);color:var(--ink);background:var(--sand);line-height:1.6;-webkit-font-smoothing:antialiased}
  a{color:inherit}
  .wrap{max-width:1120px;margin:0 auto;padding:0 24px}
  .btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--sans);font-weight:600;font-size:1rem;
    padding:.9rem 1.6rem;border-radius:999px;border:none;cursor:pointer;text-decoration:none;transition:transform .15s ease,box-shadow .15s ease}
  .btn:hover{transform:translateY(-2px)}
  .btn-primary{background:var(--sunset);color:#fff;box-shadow:0 10px 24px -10px var(--sunset-deep)}
  .btn-primary:hover{background:var(--sunset-deep)}
  .btn-ghost{background:rgba(255,255,255,.14);color:#fff;border:1.5px solid rgba(255,255,255,.5);backdrop-filter:blur(4px)}
  .btn-ghost:hover{background:rgba(255,255,255,.24)}
  .eyebrow{font-family:var(--sans);text-transform:uppercase;letter-spacing:.18em;font-size:.78rem;font-weight:600;color:var(--sunset-deep)}

  /* ---------- header ---------- */
  header{position:absolute;top:0;left:0;right:0;z-index:10}
  .nav{display:flex;align-items:center;justify-content:space-between;padding:22px 0}
  .brand{font-family:var(--serif);font-weight:600;font-size:1.45rem;color:#fff;display:flex;align-items:center;gap:.55rem;letter-spacing:-.01em}
  .brand .paw{font-size:1.5rem}
  .nav-links{display:flex;gap:2rem;align-items:center}
  .nav-links a{color:rgba(255,255,255,.92);text-decoration:none;font-weight:500;font-size:.96rem}
  .nav-links a:hover{color:#fff}
  .nav-links .btn{padding:.65rem 1.25rem}
  @media(max-width:760px){.nav-links a:not(.btn){display:none}}

  /* ---------- hero ---------- */
  .hero{position:relative;min-height:92vh;display:flex;align-items:center;
    background:linear-gradient(180deg,rgba(20,61,74,.55) 0%,rgba(20,61,74,.35) 45%,rgba(31,94,114,.72) 100%),
    radial-gradient(120% 90% at 70% 10%,#7fc6d4 0%,#2f7d92 38%,#143d4a 100%);
    overflow:hidden}
  .hero::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:120px;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath fill='%23f4ede0' d='M0 64l60 8c60 8 180 24 300 21.3C480 90 600 64 720 58.7 840 53 960 69 1080 74.7c120 5.3 240 .3 300-2.7l60-3V120H0z'/%3E%3C/svg%3E") no-repeat center/cover}
  .hero-sun{position:absolute;top:14%;right:12%;width:160px;height:160px;border-radius:50%;
    background:radial-gradient(circle,#ffe4b8 0%,#ffcf8a 55%,rgba(255,207,138,0) 72%);filter:blur(2px);opacity:.85}
  .hero-inner{position:relative;z-index:2;color:#fff;max-width:680px;padding:90px 0 120px}
  .hero h1{font-family:var(--serif);font-weight:600;font-size:clamp(2.6rem,6vw,4.5rem);line-height:1.04;letter-spacing:-.02em;margin:.6rem 0 1.1rem;text-shadow:0 2px 30px rgba(0,0,0,.25)}
  .hero h1 em{font-style:italic;color:#ffd9a3}
  .hero p.lede{font-size:clamp(1.05rem,2.2vw,1.3rem);color:rgba(255,255,255,.94);max-width:540px;margin-bottom:2rem}
  .hero-cta{display:flex;gap:1rem;flex-wrap:wrap;align-items:center}
  .trust{display:flex;gap:1.6rem;margin-top:2.4rem;flex-wrap:wrap}
  .trust span{display:flex;align-items:center;gap:.45rem;font-size:.9rem;color:rgba(255,255,255,.9);font-weight:500}

  /* ---------- pricing ---------- */
  .section{padding:88px 0}
  .section-head{text-align:center;max-width:620px;margin:0 auto 56px}
  .section-head h2{font-family:var(--serif);font-weight:600;font-size:clamp(2rem,4vw,2.9rem);line-height:1.1;margin:.5rem 0 .8rem;letter-spacing:-.02em}
  .section-head p{color:var(--muted);font-size:1.08rem}
  .tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  @media(max-width:880px){.tiers{grid-template-columns:1fr;max-width:420px;margin:0 auto}}
  .tier{background:#fff;border-radius:var(--radius);padding:34px 30px;box-shadow:var(--shadow);
    border:1.5px solid var(--sand-deep);display:flex;flex-direction:column;position:relative;transition:transform .2s ease}
  .tier:hover{transform:translateY(-6px)}
  .tier.featured{border-color:var(--sunset);box-shadow:0 26px 60px -24px rgba(210,104,58,.5)}
  .tier .badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--sunset);color:#fff;
    font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;padding:.32rem 1rem;border-radius:999px}
  .tier .ico{font-size:2rem}
  .tier h3{font-family:var(--serif);font-weight:600;font-size:1.5rem;margin:.6rem 0 .2rem}
  .tier .blurb{color:var(--muted);font-size:.95rem;min-height:42px}
  .price{display:flex;align-items:baseline;gap:.3rem;margin:1.1rem 0 .2rem}
  .price .amt{font-family:var(--serif);font-weight:600;font-size:2.7rem;color:var(--ocean)}
  .price .per{color:var(--muted);font-size:.95rem}
  .tier ul{list-style:none;margin:1.4rem 0 1.8rem;display:flex;flex-direction:column;gap:.7rem}
  .tier li{display:flex;gap:.6rem;font-size:.96rem;align-items:flex-start}
  .tier li .chk{color:var(--surf);font-weight:700;flex-shrink:0}
  .tier .btn{margin-top:auto;justify-content:center;width:100%}
  .tier:not(.featured) .btn-primary{background:var(--ocean)}
  .tier:not(.featured) .btn-primary:hover{background:var(--ocean-deep)}

  /* ---------- booking ---------- */
  .book{background:linear-gradient(160deg,var(--ocean) 0%,var(--ocean-deep) 100%);color:#fff}
  .book-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:center}
  @media(max-width:860px){.book-grid{grid-template-columns:1fr;gap:36px}}
  .book h2{font-family:var(--serif);font-weight:600;font-size:clamp(2rem,4vw,2.8rem);line-height:1.1;letter-spacing:-.02em;margin-bottom:1rem}
  .book .eyebrow{color:#ffd9a3}
  .book p.sub{color:rgba(255,255,255,.86);font-size:1.05rem;margin-bottom:1.6rem;max-width:420px}
  .book .perk{display:flex;gap:.7rem;align-items:center;margin:.7rem 0;font-size:.98rem;color:rgba(255,255,255,.92)}
  .book .perk .dot{width:8px;height:8px;border-radius:50%;background:var(--sunset);flex-shrink:0}
  .form-card{background:#fff;border-radius:22px;padding:34px 32px;box-shadow:0 30px 60px -20px rgba(0,0,0,.4);color:var(--ink)}
  .form-card h3{font-family:var(--serif);font-weight:600;font-size:1.4rem;margin-bottom:.3rem}
  .form-card .small{color:var(--muted);font-size:.9rem;margin-bottom:1.4rem}
  .field{margin-bottom:1rem}
  .field label{display:block;font-size:.85rem;font-weight:600;margin-bottom:.35rem;color:var(--ink)}
  .field input,.field select,.field textarea{width:100%;font-family:var(--sans);font-size:1rem;padding:.8rem .9rem;
    border:1.5px solid var(--sand-deep);border-radius:11px;background:var(--sand);transition:border-color .15s,box-shadow .15s}
  .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--surf);box-shadow:0 0 0 3px rgba(95,179,196,.25);background:#fff}
  .field textarea{resize:vertical;min-height:74px}
  .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  @media(max-width:430px){.row2{grid-template-columns:1fr}}
  .form-card .btn-primary{width:100%;justify-content:center;margin-top:.5rem;font-size:1.05rem;padding:1rem}
  .form-note{text-align:center;font-size:.8rem;color:var(--muted);margin-top:.9rem}
  .success{display:none;text-align:center;padding:18px 6px}
  .success.show{display:block;animation:pop .4s ease}
  @keyframes pop{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
  .success .big{font-size:3rem}
  .success h3{font-family:var(--serif);font-size:1.6rem;margin:.4rem 0}
  .success p{color:var(--muted)}

  /* ---------- footer ---------- */
  footer{background:var(--ocean-deep);color:rgba(255,255,255,.78);padding:48px 0 36px;text-align:center}
  footer .brand{justify-content:center;margin-bottom:.8rem}
  footer .flinks{display:flex;gap:1.6rem;justify-content:center;flex-wrap:wrap;margin:1rem 0;font-size:.92rem}
  footer a{color:rgba(255,255,255,.82);text-decoration:none}
  footer a:hover{color:#fff}
  footer .fine{font-size:.82rem;color:rgba(255,255,255,.5);margin-top:1.2rem}
</style>
</head>
<body>

<header>
  <div class="wrap nav">
    <div class="brand"><span class="paw">🐾</span> Surf City Strolls</div>
    <nav class="nav-links">
      <a href="#pricing">Pricing</a>
      <a href="#book">How it works</a>
      <a href="#book" class="btn btn-primary">Book a walk</a>
    </nav>
  </div>
</header>

<!-- ============ HERO ============ -->
<section class="hero">
  <div class="hero-sun"></div>
  <div class="wrap hero-inner">
    <span class="eyebrow" style="color:#ffd9a3">Ventura, California 🌊</span>
    <h1>Happy tails along the <em>Ventura coast</em>.</h1>
    <p class="lede">Friendly, reliable dog walking from the Promenade to the foothills. Beach strolls, midday breaks, and adventure hikes — so your pup gets the day they deserve while you're busy.</p>
    <div class="hero-cta">
      <a href="#book" class="btn btn-primary">Book your first walk →</a>
      <a href="#pricing" class="btn btn-ghost">See pricing</a>
    </div>
    <div class="trust">
      <span>✓ Bonded &amp; insured</span>
      <span>✓ Leashed &amp; GPS-tracked</span>
      <span>✓ Photo update every walk</span>
    </div>
  </div>
</section>

<!-- ============ PRICING ============ -->
<section class="section" id="pricing">
  <div class="wrap">
    <div class="section-head">
      <span class="eyebrow">Simple, honest pricing</span>
      <h2>Pick the stroll that fits your pup</h2>
      <p>No memberships, no lock-ins. Pay per walk, or save with a weekly bundle. Every walk ends with a photo and a quick note home.</p>
    </div>
    <div class="tiers">

      <div class="tier">
        <div class="ico">☀️</div>
        <h3>Quick Stroll</h3>
        <p class="blurb">A brisk 30-minute neighborhood walk to stretch the legs and do their business.</p>
        <div class="price"><span class="amt">$22</span><span class="per">/ walk</span></div>
        <ul>
          <li><span class="chk">✓</span> 30 minutes, solo or with a sibling pup</li>
          <li><span class="chk">✓</span> Fresh water &amp; paw wipe-down</li>
          <li><span class="chk">✓</span> Photo + note after every walk</li>
          <li><span class="chk">✓</span> Within 3 mi of downtown Ventura</li>
        </ul>
        <a href="#book" class="btn btn-primary" data-tier="Quick Stroll">Book Quick Stroll</a>
      </div>

      <div class="tier featured">
        <div class="badge">Most popular</div>
        <div class="ico">🌊</div>
        <h3>Beach Day</h3>
        <p class="blurb">A 60-minute coastal adventure along the sand and Promenade. Pure tail-wagging joy.</p>
        <div class="price"><span class="amt">$36</span><span class="per">/ walk</span></div>
        <ul>
          <li><span class="chk">✓</span> 60 minutes of beach + Promenade time</li>
          <li><span class="chk">✓</span> GPS-tracked route map sent to you</li>
          <li><span class="chk">✓</span> Rinse-off &amp; towel dry after sandy paws</li>
          <li><span class="chk">✓</span> Priority same-day booking</li>
          <li><span class="chk">✓</span> Photo + note after every walk</li>
        </ul>
        <a href="#book" class="btn btn-primary" data-tier="Beach Day">Book Beach Day</a>
      </div>

      <div class="tier">
        <div class="ico">🥾</div>
        <h3>Trail Blazer</h3>
        <p class="blurb">A 90-minute foothill hike (Arroyo Verde / Grant Park) for high-energy dogs who need a real workout.</p>
        <div class="price"><span class="amt">$52</span><span class="per">/ walk</span></div>
        <ul>
          <li><span class="chk">✓</span> 90 minutes on Ventura's best trails</li>
          <li><span class="chk">✓</span> Door-to-door pickup &amp; drop-off</li>
          <li><span class="chk">✓</span> Trail snacks &amp; cooldown included</li>
          <li><span class="chk">✓</span> GPS route map + action photos</li>
          <li><span class="chk">✓</span> Best value at 5+ walks/week</li>
        </ul>
        <a href="#book" class="btn btn-primary" data-tier="Trail Blazer">Book Trail Blazer</a>
      </div>

    </div>
  </div>
</section>

<!-- ============ BOOKING ============ -->
<section class="section book" id="book">
  <div class="wrap book-grid">
    <div>
      <span class="eyebrow">Let's meet your pup</span>
      <h2>Book a free meet-&amp;-greet</h2>
      <p class="sub">Tell me a little about your dog and when you'd like to start. I'll text you back within a few hours to set up a free 15-minute hello — no commitment.</p>
      <div class="perk"><span class="dot"></span> Born &amp; raised in Ventura — I know every good sniff spot</div>
      <div class="perk"><span class="dot"></span> One walker, never a rotating crew of strangers</div>
      <div class="perk"><span class="dot"></span> Flexible cancellations up to 12 hours ahead</div>
      <div class="perk"><span class="dot"></span> Serving Ventura, Pierpont, Midtown &amp; the Avenue</div>
    </div>

    <div class="form-card">
      <form id="bookingForm" novalidate>
        <h3>Request a walk</h3>
        <p class="small">Fields marked * are required.</p>
        <div class="row2">
          <div class="field">
            <label for="name">Your name *</label>
            <input type="text" id="name" name="name" required autocomplete="name" placeholder="Jamie R.">
          </div>
          <div class="field">
            <label for="dog">Dog's name *</label>
            <input type="text" id="dog" name="dog" required placeholder="Biscuit">
          </div>
        </div>
        <div class="row2">
          <div class="field">
            <label for="email">Email *</label>
            <input type="email" id="email" name="email" required autocomplete="email" placeholder="you@email.com">
          </div>
          <div class="field">
            <label for="phone">Phone (for text) *</label>
            <input type="tel" id="phone" name="phone" required autocomplete="tel" placeholder="(805) 555-0123">
          </div>
        </div>
        <div class="row2">
          <div class="field">
            <label for="tier">Walk type</label>
            <select id="tier" name="tier">
              <option value="Quick Stroll">Quick Stroll — $22</option>
              <option value="Beach Day" selected>Beach Day — $36</option>
              <option value="Trail Blazer">Trail Blazer — $52</option>
              <option value="Not sure yet">Not sure yet — help me pick</option>
            </select>
          </div>
          <div class="field">
            <label for="start">Preferred start date</label>
            <input type="date" id="start" name="start">
          </div>
        </div>
        <div class="field">
          <label for="notes">Anything I should know? (breed, energy, quirks)</label>
          <textarea id="notes" name="notes" placeholder="Biscuit is a 2-yr-old golden, loves the water, a little shy with big dogs..."></textarea>
        </div>
        <button type="submit" class="btn btn-primary">Request my free meet &amp; greet 🐾</button>
        <p class="form-note">No payment now. I'll reach out personally to confirm.</p>
      </form>

      <div class="success" id="success">
        <div class="big">🐶🎉</div>
        <h3>Pawsome — request received!</h3>
        <p id="successMsg">Thanks! I'll text you shortly to set up your free meet &amp; greet.</p>
      </div>
    </div>
  </div>
</section>

<!-- ============ FOOTER ============ -->
<footer>
  <div class="wrap">
    <div class="brand"><span class="paw">🐾</span> Surf City Strolls</div>
    <p>Insured &amp; bonded dog walking · Ventura, California</p>
    <div class="flinks">
      <a href="#pricing">Pricing</a>
      <a href="#book">Book a walk</a>
      <a href="mailto:hello@surfcitystrolls.com">hello@surfcitystrolls.com</a>
      <a href="tel:+18055550123">(805) 555-0123</a>
    </div>
    <p class="fine">© <span id="yr"></span> Surf City Strolls. Hand-built for the Ventura coast. Sample landing page.</p>
  </div>
</footer>

<script>
  document.getElementById('yr').textContent = new Date().getFullYear();

  // Pre-select the tier when a pricing CTA is clicked
  document.querySelectorAll('[data-tier]').forEach(function(btn){
    btn.addEventListener('click', function(){
      var sel = document.getElementById('tier');
      var t = btn.getAttribute('data-tier');
      if (sel) for (var i=0;i<sel.options.length;i++){ if(sel.options[i].value===t){ sel.selectedIndex=i; break; } }
    });
  });

  // Min start date = today
  (function(){
    var d=document.getElementById('start');
    if(d){ var t=new Date(); var mm=String(t.getMonth()+1).padStart(2,'0'); var dd=String(t.getDate()).padStart(2,'0');
      d.min=t.getFullYear()+'-'+mm+'-'+dd; }
  })();

  // Booking form — client-side validation + confirmation.
  // NOTE: no live send is wired yet (no backend / email integration).
  // See README "Wiring the form" before going live.
  var form = document.getElementById('bookingForm');
  form.addEventListener('submit', function(e){
    e.preventDefault();
    if(!form.checkValidity()){ form.reportValidity(); return; }
    var name = document.getElementById('name').value.trim();
    var dog  = document.getElementById('dog').value.trim();
    var tier = document.getElementById('tier').value;
    form.style.display='none';
    var s=document.getElementById('success');
    document.getElementById('successMsg').innerHTML =
      'Thanks, ' + (name||'friend') + '! I’ll text you shortly to set up ' +
      (dog?('<strong>'+dog+'</strong>’s'):'your pup’s') +
      ' free meet &amp; greet for the <strong>'+tier+'</strong> walk.';
    s.classList.add('show');
    s.scrollIntoView({behavior:'smooth',block:'center'});
  });
</script>
</body>
</html>