← back to Malden House

index.html

257 lines

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Victory Stays — Turn your home into a Games-window rental in 60 seconds</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=Archivo:wght@400;500;700;800;900&family=EB+Garamond:ital,wght@0,400;0,500;1,400&family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="landing.css?v=10">
</head>
<body>

<nav class="l-nav">
  <div class="l-brand">
    <span class="l-dot"></span>
    <span class="l-mark">VICTORY&nbsp;STAYS</span>
    <span class="l-sub">A microsite service for LA 2028 hosts</span>
  </div>
  <div class="l-nav-links">
    <a href="#how">How it works</a>
    <a href="schedule.html">Schedule</a>
    <a href="browse.html">Browse</a>
    <a href="#pricing">Pricing</a>
    <a href="dashboard.html">Dashboard</a>
    <a href="#about">About</a>
  </div>
  <a class="l-nav-cta" href="#signup">Claim your address →</a>
</nav>

<header class="l-hero">
  <div class="l-hero-art">
    <img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1600&h=1100&fit=crop" alt="Mid-century home at golden hour" onerror="this.src='https://picsum.photos/seed/hosthehome/1600/1100'">
    <div class="l-hero-overlay"></div>
    <div class="l-hero-badge">
      <span class="l-dot"></span>
      <span>BOOKING WINDOW · JUL 14 — JUL 30, 2028</span>
    </div>
  </div>
  <div class="l-hero-copy">
    <div class="l-eyebrow">A free microsite for every Los Angeles host</div>
    <h1>Turn your home into a Games-window rental<br><em>in sixty seconds.</em></h1>
    <p class="l-lede">Enter your address. We geocode it, plot the LA 2028 venues around it, surface the history of your block, suggest a Games-window nightly rate from public comps, and hand you a personalized rental microsite — ready to send to guests.</p>
    <div class="l-stats">
      <div><b>29</b><span>LA 2028 venues<br>mapped</span></div>
      <div><b>ZIP</b><span>+ venue proximity<br>pricing model</span></div>
      <div><b>60s</b><span>from address<br>to live site</span></div>
    </div>
  </div>
</header>

<!-- SIGNUP -->
<section id="signup" class="l-signup">
  <div class="l-signup-copy">
    <div class="l-eyebrow accent">§ Claim your address</div>
    <h2>Four fields. One verified email.<br>A personalized site.</h2>
    <p>We'll email you a one-time link to render and edit your rental microsite. You keep full ownership of the page and your guest inquiries — we never rent your listing, never touch your calendar, never take a cut.</p>
    <ul class="l-ticks">
      <li>✓ Pulls your address from OpenStreetMap</li>
      <li>✓ Calculates distance to the nearest LA 2028 venue</li>
      <li>✓ Suggests a nightly range from ZIP comps + event premium</li>
      <li>✓ Generates a 10-theme microsite you can share tonight</li>
    </ul>
  </div>

  <form class="l-form" id="signup-form">
    <label class="has-autocomplete">
      <span>YOUR ADDRESS</span>
      <input type="text" id="f-addr" name="address" required placeholder="Start typing — e.g. 471 S Peck Dr" autocomplete="off" spellcheck="false">
      <ul id="f-addr-menu" class="ac-menu" hidden></ul>
    </label>
    <label>
      <span>HOST NAME</span>
      <input type="text" id="f-host" name="host" required placeholder="Steve Abrams" autocomplete="name">
    </label>
    <div class="l-form-row">
      <label>
        <span>EMAIL (we verify this)</span>
        <input type="email" id="f-email" name="email" required placeholder="you@example.com" autocomplete="email">
      </label>
      <label>
        <span>PHONE</span>
        <input type="tel" id="f-phone" name="phone" required placeholder="(310) 555-0128" autocomplete="tel">
      </label>
    </div>

    <div class="l-submit">
      <button type="submit" id="f-submit">
        <span>Generate my rental site →</span>
      </button>
      <span class="l-fine">We'll send a verify link. Takes ~10 seconds. Cancel anytime.</span>
    </div>
    <div class="l-status" id="f-status" hidden></div>
    <div class="l-seed">
      <span>Just want to see how it looks?</span>
      <button type="button" id="seed-demo">Load 2 Beverly Hills demo rentals →</button>
    </div>
    <div class="l-status" id="demo-links" hidden></div>
  </form>
</section>

<!-- HOW -->
<section id="how" class="l-how">
  <div class="l-eyebrow">§ How it works — every step, nothing hidden</div>
  <h2 class="l-how-head">From zero to live rental site in six clicks.</h2>
  <ol class="l-steps">
    <li>
      <span class="n">01</span>
      <h3>Enter your address</h3>
      <p>Start typing your street — we autocomplete from OpenStreetMap in the US. Pick the match, and we confirm street, city, ZIP, and county behind the scenes.</p>
    </li>
    <li>
      <span class="n">02</span>
      <h3>Add host name, email, phone</h3>
      <p>Three fields. Email is the account login — we send you a verify link. Phone is displayed on your rental page so guests can call.</p>
    </li>
    <li>
      <span class="n">03</span>
      <h3>Push "Generate my rental site"</h3>
      <p>We geocode to lat/lng, check eligibility (≤ 30 mi from an LA 2028 venue), calculate driving distance to every venue, and suggest a nightly rate from ZIP comps + event premium. About ten seconds.</p>
    </li>
    <li>
      <span class="n">04</span>
      <h3>Verify your email</h3>
      <p>One-click verify in your inbox. Locks your address to your email — nobody else can claim the same street number under a different host name.</p>
    </li>
    <li>
      <span class="n">05</span>
      <h3>Pick a theme &amp; tune the copy</h3>
      <p>Ten design themes via keyboard shortcut (1–9, 0). Edit the hero copy, upload your own photos to replace the stock thumbnails, add a custom welcome video if you've got one.</p>
    </li>
    <li>
      <span class="n">06</span>
      <h3>Share your site &amp; take bookings</h3>
      <p>You get a permanent URL. The inquiry form emails you every request. No commission. You quote, you close, you host.</p>
    </li>
  </ol>
  <div class="l-how-note">
    <b>What "Generate my rental site" actually does</b>
    <ol>
      <li>→ Nominatim geocode (OpenStreetMap) — verifies the address exists</li>
      <li>→ Eligibility check — within 30 miles of an LA 2028 venue?</li>
      <li>→ Haversine distance to all 15 LA 2028 venues, sorted ascending</li>
      <li>→ ZIP baseline lookup × proximity multiplier (×1.0 to ×1.6) × LA 2028 premium (×2.8)</li>
      <li>→ Picks your neighborhood content pack (history, guide list, timeline)</li>
      <li>→ Renders real Google Maps street/satellite iframes for your exact coordinates</li>
      <li>→ Wikipedia thumbnails for every "thing to do" that has a page</li>
      <li>→ Saves to your account · generates shareable URL · sends verify email</li>
    </ol>
  </div>
</section>

<!-- PRICING -->
<section id="pricing" class="l-pricing-v2">
  <header>
    <div class="l-eyebrow accent">§ Pricing — three tiers, no commission, ever</div>
    <h2>Pick what fits.<br>We never take a cut of your booking.</h2>
    <p class="l-pricing-lede">You keep 100% of what guests pay you. These fees cover hosting, the domain, the commercial-grade trailer, and the team that keeps LA 2028 venue data current.</p>
  </header>
  <div class="l-tier-grid">
    <!-- STARTER -->
    <article class="l-tier">
      <div class="l-tier-head">
        <div class="l-tier-name">STARTER</div>
        <div class="l-tier-tag">Free until Jul 30, 2028</div>
      </div>
      <div class="l-tier-amt"><b>$0</b><span>one address</span></div>
      <ul class="l-tier-feats">
        <li>✓ One personalized microsite</li>
        <li>✓ Hosted at victorystays.com/your-slug</li>
        <li>✓ Ten design themes</li>
        <li>✓ event rate suggestion</li>
        <li>✓ Live Google Maps + Street View</li>
        <li>✓ Inquiry form (emails you)</li>
        <li class="muted">— Small "Victory Stays" footer mark</li>
        <li class="muted">— No custom domain</li>
        <li class="muted">— No 30-sec trailer export</li>
      </ul>
      <button class="l-tier-cta" data-plan="starter">Start free →</button>
    </article>

    <!-- ESSENTIALS -->
    <article class="l-tier featured">
      <div class="l-ribbon">Most hosts pick this</div>
      <div class="l-tier-head">
        <div class="l-tier-name">ESSENTIALS</div>
        <div class="l-tier-tag">One-time · lifetime access</div>
      </div>
      <div class="l-tier-amt"><b>$49</b><span>per address</span></div>
      <ul class="l-tier-feats">
        <li>✓ Everything in Starter</li>
        <li>✓ Footer mark removed</li>
        <li>✓ Upload your own photos (10 slots)</li>
        <li>✓ Custom subdomain: yourname.victorystays.com</li>
        <li>✓ 30-second trailer export (MP4)</li>
        <li>✓ Closest-event date alerts emailed to your guests</li>
        <li>✓ Edit page copy in a simple dashboard</li>
        <li>✓ Standard email support</li>
      </ul>
      <button class="l-tier-cta primary" data-plan="essentials">Get Essentials →</button>
    </article>

    <!-- PRO -->
    <article class="l-tier">
      <div class="l-tier-head">
        <div class="l-tier-name">PRO &middot; CONCIERGE</div>
        <div class="l-tier-tag">One-time · white-glove</div>
      </div>
      <div class="l-tier-amt"><b>$149</b><span>per address</span></div>
      <ul class="l-tier-feats">
        <li>✓ Everything in Essentials</li>
        <li>✓ <b>Custom .com domain included</b> (1 year)</li>
        <li>✓ Bespoke neighborhood history written by a researcher</li>
        <li>✓ Professional photo upload + light retouching</li>
        <li>✓ Guest analytics dashboard (clicks, inquiry-to-booking)</li>
        <li>✓ Instagram-ready vertical trailer cut</li>
        <li>✓ Priority support · 4-hour reply SLA</li>
        <li>✓ White-glove migration when the Games end</li>
      </ul>
      <button class="l-tier-cta" data-plan="pro">Go Pro →</button>
    </article>
  </div>
</section>

<!-- DOMAIN REGISTRY -->
<section id="domains" class="l-domains">
  <header>
    <div class="l-eyebrow accent">§ Add a custom domain</div>
    <h2>Buy <em>yourhouse.com</em> at cost — or included with Pro.</h2>
    <p>We resell domains through a registrar at wholesale. No markup for the first year on Pro; transparent renewal pricing after.</p>
  </header>
  <div class="l-dom-grid">
    <div class="l-dom"><b>.com</b><span>$12/yr</span><em>Most common</em></div>
    <div class="l-dom featured"><b>.house</b><span>$19/yr</span><em>On-theme</em></div>
    <div class="l-dom"><b>.la</b><span>$24/yr</span><em>Local cachet</em></div>
    <div class="l-dom"><b>.rentals</b><span>$16/yr</span><em>Plain-spoken</em></div>
    <div class="l-dom"><b>.stay</b><span>$29/yr</span><em>Boutique vibe</em></div>
    <div class="l-dom"><b>.host</b><span>$22/yr</span><em>What you are</em></div>
  </div>
  <div class="l-dom-form">
    <input type="text" placeholder="search: malden-house, peck-dr-rental, steves-stays..." id="dom-q">
    <button id="dom-check">Check availability →</button>
  </div>
  <p class="l-dom-note">Pro tier includes one .com free for the first year, then standard renewal. All domains transfer to your name — you own it, we just register it.</p>
</section>


<footer id="about" class="l-footer">
  <div class="l-foot-brand"><span class="l-dot"></span>VICTORY STAYS · NOT AFFILIATED WITH LA 2028</div>
  <div class="l-foot-mid">Built by hosts, for hosts · Los Angeles, California</div>
  <div class="l-foot-credit">© 2028 · hello@victorystays.com</div>
</footer>

<script src="signup.js?v=10"></script>
</body>
</html>