rspace-online/modules/rvnb/landing.ts

/**
 * rVnb landing page — community RV & camper rentals.
 * Green-to-teal palette.
 */
export function renderLanding(): string {
  return `
<!-- Hero -->
<div class="rl-hero">
  <span class="rl-tagline" style="color:#10b981;background:rgba(16,185,129,0.1);border-color:rgba(16,185,129,0.2)">
    (you)rVnB &mdash; Community RV Sharing
  </span>
  <h1 class="rl-heading" style="background:linear-gradient(to right,#10b981,#14b8a6,#06b6d4);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text">
    Can't afford a house? Live in a van down by the river.
  </h1>
  <p class="rl-subtitle">
    Your all-in-one camper rental, lending &amp; parking service.
  </p>
  <p class="rl-subtext">
    rVnb replaces faceless rental fleets with <span style="color:#10b981;font-weight:600">community trust</span>.
    No damage deposit anxiety, no hidden fees, no corporate middleman. Just people sharing rigs
    with people they know &mdash; through the networks they already belong to.
    At least the rent is reasonable and the view is great.
  </p>
  <div class="rl-cta-row">
    <a href="https://demo.rspace.online/rvnb" class="rl-cta-primary" id="ml-primary"
       style="background:linear-gradient(to right,#10b981,#14b8a6);color:#0b1120">
      Try the Demo
    </a>
    <a href="#principles" class="rl-cta-secondary">Learn More</a>
  </div>
</div>

<!-- Principles (4-card grid) -->
<section id="principles" class="rl-section" style="border-top:none">
  <div class="rl-container">
    <div class="rl-grid-4">
      <div class="rl-card rl-card--center" style="padding:2rem">
        <div class="rl-icon-box" style="background:rgba(16,185,129,0.12);font-size:1.5rem">
          <span style="font-size:1.5rem">&#129309;</span>
        </div>
        <h3>Trust, Not Deposits</h3>
        <p>Your community&rsquo;s trust graph replaces damage deposits. People vouch for people they actually know &mdash; not strangers hoping for a clean return.</p>
      </div>
      <div class="rl-card rl-card--center" style="padding:2rem">
        <div class="rl-icon-box" style="background:rgba(20,184,166,0.12);font-size:1.5rem">
          <span style="font-size:1.5rem">&#128205;</span>
        </div>
        <h3>Pick Up, Drop Off, Done</h3>
        <p>Arrange pickup and dropoff locations that work for both parties. No depot trips, no shuttle buses, no airport counters. Meet where it makes sense.</p>
      </div>
      <div class="rl-card rl-card--center" style="padding:2rem">
        <div class="rl-icon-box" style="background:rgba(6,182,212,0.12);font-size:1.5rem">
          <span style="font-size:1.5rem">&#128663;</span>
        </div>
        <h3>Every Rig Has a Story</h3>
        <p>These aren&rsquo;t anonymous fleet vehicles. Every RV has a name, a personality, and an owner who can tell you where the good camping spots are.</p>
      </div>
      <div class="rl-card rl-card--center" style="padding:2rem">
        <div class="rl-icon-box" style="background:rgba(16,185,129,0.12);font-size:1.5rem">
          <span style="font-size:1.5rem">&#128274;</span>
        </div>
        <h3>Your Data Rides With You</h3>
        <p>All data stays local-first via CRDTs. No corporate cloud, no surveillance capitalism. Your vehicles, your conversations, your community&rsquo;s data.</p>
      </div>
    </div>
  </div>
</section>

<!-- How It Works -->
<section id="how" class="rl-section rl-section--alt">
  <div class="rl-container">
    <span class="rl-tagline" style="color:#10b981;background:rgba(16,185,129,0.1);border-color:rgba(16,185,129,0.2)">
      How It Works
    </span>
    <h2 class="rl-heading" style="background:linear-gradient(135deg,#10b981,#14b8a6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text">
      List Your Rig &rarr; Request &amp; Arrange Pickup &rarr; Road Trip &amp; Endorse
    </h2>
    <p class="rl-subtext" style="margin-bottom:2.5rem">
      Three steps. No platform in the middle. The community <em>is</em> the rental agency.
    </p>
    <div class="rl-grid-3" style="margin-top:2rem">
      <div class="rl-card" style="border-color:rgba(16,185,129,0.15)">
        <div style="font-size:2rem;margin-bottom:1rem;text-align:center">&#9312;</div>
        <h3 style="text-align:center">List Your Rig</h3>
        <p>Share your motorhome, camper van, travel trailer, truck camper, or skoolie. Set your mileage policy, pickup location, economy model, and trust threshold.</p>
      </div>
      <div class="rl-card" style="border-color:rgba(20,184,166,0.15)">
        <div style="font-size:2rem;margin-bottom:1rem;text-align:center">&#9313;</div>
        <h3 style="text-align:center">Request &amp; Arrange Pickup</h3>
        <p>Browse vehicles in your network. Send a rental request with dates, estimated miles, and preferred pickup spot. Negotiate handoff details in-app.</p>
      </div>
      <div class="rl-card" style="border-color:rgba(6,182,212,0.15)">
        <div style="font-size:2rem;margin-bottom:1rem;text-align:center">&#9314;</div>
        <h3 style="text-align:center">Road Trip &amp; Endorse</h3>
        <p>After your trip, write an endorsement. Was the rig &ldquo;suspiciously clean&rdquo;? Did it smell like adventure? Your feedback builds trust for the whole network.</p>
      </div>
    </div>
  </div>
</section>

<!-- Ecosystem Integration -->
<section class="rl-section rl-section--alt">
  <div class="rl-container">
    <span class="rl-tagline" style="color:#14b8a6;background:rgba(20,184,166,0.1);border-color:rgba(20,184,166,0.2)">
      Ecosystem
    </span>
    <h2 class="rl-heading" style="background:linear-gradient(135deg,#14b8a6,#06b6d4);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text">
      Part of the r* stack
    </h2>
    <p class="rl-subtext">
      rVnb connects to the full suite of community tools. Vehicle sharing is stronger when it&rsquo;s woven into your community fabric.
    </p>
    <div class="rl-grid-3" style="margin-top:2rem">
      <div class="rl-integration" style="border-color:rgba(16,185,129,0.15)">
        <div class="rl-icon-box" style="flex-shrink:0"><span style="font-size:1.25rem">&#128101;</span></div>
        <div>
          <h3>rNetwork</h3>
          <p>Trust scores power auto-accept. Endorsements from trips flow back into the community trust graph.</p>
        </div>
      </div>
      <div class="rl-integration" style="border-color:rgba(16,185,129,0.15)">
        <div class="rl-icon-box" style="flex-shrink:0"><span style="font-size:1.25rem">&#128205;</span></div>
        <div>
          <h3>rMaps</h3>
          <p>Pickup and dropoff locations appear on community maps. Plan your route before you even pick up the keys.</p>
        </div>
      </div>
      <div class="rl-integration" style="border-color:rgba(16,185,129,0.15)">
        <div class="rl-icon-box" style="flex-shrink:0"><span style="font-size:1.25rem">&#128179;</span></div>
        <div>
          <h3>rWallet</h3>
          <p>x402 payments for non-gift rentals. Contributions flow through community treasury with full transparency.</p>
        </div>
      </div>
      <div class="rl-integration" style="border-color:rgba(16,185,129,0.15)">
        <div class="rl-icon-box" style="flex-shrink:0"><span style="font-size:1.25rem">&#128197;</span></div>
        <div>
          <h3>rCal</h3>
          <p>Vehicle availability syncs as calendar events. See your rental schedule alongside everything else.</p>
        </div>
      </div>
      <div class="rl-integration" style="border-color:rgba(16,185,129,0.15)">
        <div class="rl-icon-box" style="flex-shrink:0"><span style="font-size:1.25rem">&#128248;</span></div>
        <div>
          <h3>rPhotos</h3>
          <p>Vehicle photos via the shared asset system. Upload once, display everywhere.</p>
        </div>
      </div>
      <div class="rl-integration" style="border-color:rgba(16,185,129,0.15)">
        <div class="rl-icon-box" style="flex-shrink:0"><span style="font-size:1.25rem">&#128236;</span></div>
        <div>
          <h3>rInbox</h3>
          <p>Notifications for rental requests, messages, and endorsements. Never miss a pickup.</p>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- CTA -->
<section class="rl-section">
  <div class="rl-container" style="text-align:center">
    <h2 class="rl-heading" style="background:linear-gradient(to right,#10b981,#14b8a6,#06b6d4);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text">
      Share the road with your community
    </h2>
    <p class="rl-subtext">
      List a rig, request a rental, or just explore what community vehicle sharing looks like.
      No account needed for the demo.
    </p>
    <div class="rl-cta-row">
      <a href="https://demo.rspace.online/rvnb" class="rl-cta-primary"
         style="background:linear-gradient(to right,#10b981,#14b8a6);color:#0b1120">
        Open the Demo
      </a>
      <a href="https://rstack.online" class="rl-cta-secondary">Explore rStack</a>
    </div>
  </div>
</section>

<div class="rl-back">
  <a href="/">&larr; Back to rSpace</a>
</div>`;
}