jeffemmett
/
rspace-online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
rspace-online/modules/rbnb/landing.ts

245 lines
12 KiB
TypeScript
Raw Blame History

/**
* rBnb landing page — community hospitality.
* Warm palette: amber → red → pink.
*/
export function renderLanding(): string {
return `
<!-- Hero -->
<div class="rl-hero">
<span class="rl-tagline" style="color:#f59e0b;background:rgba(245,158,11,0.1);border-color:rgba(245,158,11,0.2)">
Community Hospitality
</span>
<h1 class="rl-heading" style="background:linear-gradient(to right,#f59e0b,#ef4444,#ec4899);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text">
Hospitality is a commons
</h1>
<p class="rl-subtitle">
Trust-based space sharing for communities, cooperatives, and networks of care.
</p>
<p class="rl-subtext">
rBnb replaces platform extraction with <span style="color:#f59e0b;font-weight:600">community trust</span>.
No anonymous reviews, no algorithmic rankings, no 15% service fees. Just people who know people,
opening their doors through the networks they already belong to.
</p>
<div class="rl-cta-row">
<a href="https://demo.rspace.online/rbnb" class="rl-cta-primary" id="ml-primary"
style="background:linear-gradient(to right,#f59e0b,#ef4444);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(245,158,11,0.12);font-size:1.5rem">
<span style="font-size:1.5rem">&#129309;</span>
</div>
<h3>Trust, Not Stars</h3>
<p>Your community&rsquo;s trust graph replaces anonymous star ratings. People vouch for people they actually know &mdash; not strangers gaming an algorithm.</p>
</div>
<div class="rl-card rl-card--center" style="padding:2rem">
<div class="rl-icon-box" style="background:rgba(239,68,68,0.12);font-size:1.5rem">
<span style="font-size:1.5rem">&#128155;</span>
</div>
<h3>Gift Economy First</h3>
<p>Hospitality as a gift is the default. Suggested contributions, sliding scale, and skill exchange are all first-class options &mdash; not afterthoughts.</p>
</div>
<div class="rl-card rl-card--center" style="padding:2rem">
<div class="rl-icon-box" style="background:rgba(236,72,153,0.12);font-size:1.5rem">
<span style="font-size:1.5rem">&#128274;</span>
</div>
<h3>Your Data, Your Space</h3>
<p>All data stays local-first via CRDTs. No corporate cloud, no surveillance capitalism. Your listings, your conversations, your community&rsquo;s data.</p>
</div>
<div class="rl-card rl-card--center" style="padding:2rem">
<div class="rl-icon-box" style="background:rgba(168,85,247,0.12);font-size:1.5rem">
<span style="font-size:1.5rem">&#127758;</span>
</div>
<h3>Community Boundaries</h3>
<p>Each community sets its own trust thresholds, economy defaults, and house rules. Hospitality looks different everywhere &mdash; your tools should reflect that.</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:#f59e0b;background:rgba(245,158,11,0.1);border-color:rgba(245,158,11,0.2)">
How It Works
</span>
<h2 class="rl-heading" style="background:linear-gradient(135deg,#f59e0b,#ef4444);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text">
List &rarr; Request &rarr; Stay &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 platform.
</p>
<div class="rl-grid-3" style="margin-top:2rem">
<div class="rl-card" style="border-color:rgba(245,158,11,0.15)">
<div style="font-size:2rem;margin-bottom:1rem;text-align:center">&#9312;</div>
<h3 style="text-align:center">List Your Space</h3>
<p>Share a couch, a room, a cabin, a tent site, or even a patch of land. Set your economy model (gift, exchange, sliding scale, or fixed) and your trust threshold for auto-accept.</p>
</div>
<div class="rl-card" style="border-color:rgba(239,68,68,0.15)">
<div style="font-size:2rem;margin-bottom:1rem;text-align:center">&#9313;</div>
<h3 style="text-align:center">Request &amp; Connect</h3>
<p>Browse listings in your network. Send a stay request with dates and a message. If your trust score meets the threshold, you&rsquo;re auto-accepted. Otherwise, start a conversation.</p>
</div>
<div class="rl-card" style="border-color:rgba(236,72,153,0.15)">
<div style="font-size:2rem;margin-bottom:1rem;text-align:center">&#9314;</div>
<h3 style="text-align:center">Stay &amp; Endorse</h3>
<p>After your stay, write an endorsement. Unlike reviews, endorsements are tied to real stays and feed directly into the community trust graph &mdash; strengthening the network for everyone.</p>
</div>
</div>
</div>
</section>
<!-- Economy Models -->
<section class="rl-section">
<div class="rl-container">
<span class="rl-tagline" style="color:#ef4444;background:rgba(239,68,68,0.1);border-color:rgba(239,68,68,0.2)">
Economy Models
</span>
<h2 class="rl-heading" style="background:linear-gradient(135deg,#ef4444,#ec4899);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text">
Beyond the price tag
</h2>
<p class="rl-subtext">
Every listing declares its economy model upfront. No hidden fees, no platform cut &mdash; just honest terms between host and guest.
</p>
<div class="rl-grid-2" style="margin-top:2rem">
<div class="rl-card" style="border-color:rgba(52,211,153,0.15)">
<div style="display:flex;align-items:center;gap:0.75rem;margin-bottom:1rem">
<div style="width:2.5rem;height:2.5rem;border-radius:0.75rem;background:rgba(52,211,153,0.12);display:flex;align-items:center;justify-content:center;font-size:1.1rem">
&#128154;
</div>
<div>
<h3 style="margin-bottom:0">Gift Economy</h3>
<span style="font-size:0.7rem;color:#34d399;font-family:monospace">Default</span>
</div>
</div>
<p>Hospitality freely given. No expectation of payment. The gift is the relationship &mdash; endorsed stays build trust that ripples through the network.</p>
</div>
<div class="rl-card" style="border-color:rgba(96,165,250,0.15)">
<div style="display:flex;align-items:center;gap:0.75rem;margin-bottom:1rem">
<div style="width:2.5rem;height:2.5rem;border-radius:0.75rem;background:rgba(96,165,250,0.12);display:flex;align-items:center;justify-content:center;font-size:1.1rem">
&#128259;
</div>
<div>
<h3 style="margin-bottom:0">Skill / Service Exchange</h3>
</div>
</div>
<p>Stay in exchange for something you can offer &mdash; cooking, gardening, teaching, building, childcare. Define the exchange upfront so expectations are clear.</p>
</div>
<div class="rl-card" style="border-color:rgba(245,158,11,0.15)">
<div style="display:flex;align-items:center;gap:0.75rem;margin-bottom:1rem">
<div style="width:2.5rem;height:2.5rem;border-radius:0.75rem;background:rgba(245,158,11,0.12);display:flex;align-items:center;justify-content:center;font-size:1.1rem">
&#9878;
</div>
<div>
<h3 style="margin-bottom:0">Sliding Scale</h3>
</div>
</div>
<p>Pay what feels right within a range. Hosts set a minimum and maximum &mdash; guests choose based on their means. Everyone gets access.</p>
</div>
<div class="rl-card" style="border-color:rgba(148,163,184,0.15)">
<div style="display:flex;align-items:center;gap:0.75rem;margin-bottom:1rem">
<div style="width:2.5rem;height:2.5rem;border-radius:0.75rem;background:rgba(148,163,184,0.12);display:flex;align-items:center;justify-content:center;font-size:1.1rem">
&#127991;
</div>
<div>
<h3 style="margin-bottom:0">Fixed / Suggested</h3>
</div>
</div>
<p>A clear price, or a gentle suggestion. Fixed prices for hosts who need income from their space. Suggested contributions for those who want to leave it open.</p>
</div>
</div>
</div>
</section>
<!-- Ecosystem Integration -->
<section class="rl-section rl-section--alt">
<div class="rl-container">
<span class="rl-tagline" style="color:#ec4899;background:rgba(236,72,153,0.1);border-color:rgba(236,72,153,0.2)">
Ecosystem
</span>
<h2 class="rl-heading" style="background:linear-gradient(135deg,#ec4899,#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text">
Part of the r* stack
</h2>
<p class="rl-subtext">
rBnb connects to the full suite of community tools. Hospitality is stronger when it&rsquo;s woven into the fabric of your community.
</p>
<div class="rl-grid-3" style="margin-top:2rem">
<div class="rl-integration" style="border-color:rgba(245,158,11,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 stays flow back into the community trust graph.</p>
</div>
</div>
<div class="rl-integration" style="border-color:rgba(245,158,11,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>Listing availability syncs as calendar events. See your hosting schedule alongside everything else.</p>
</div>
</div>
<div class="rl-integration" style="border-color:rgba(245,158,11,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>Listings with coordinates appear on community maps. Find hospitality near your destination.</p>
</div>
</div>
<div class="rl-integration" style="border-color:rgba(245,158,11,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 stays. Contributions flow through community treasury with full transparency.</p>
</div>
</div>
<div class="rl-integration" style="border-color:rgba(245,158,11,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>Listing photos via the shared asset system. Upload once, display everywhere.</p>
</div>
</div>
<div class="rl-integration" style="border-color:rgba(245,158,11,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 new requests, messages, and endorsements. Never miss a guest.</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,#f59e0b,#ef4444,#ec4899);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text">
Open your door to your community
</h2>
<p class="rl-subtext">
List a space, request a stay, or just explore what community hospitality looks like.
No account needed for the demo.
</p>
<div class="rl-cta-row">
<a href="https://demo.rspace.online/rbnb" class="rl-cta-primary"
style="background:linear-gradient(to right,#f59e0b,#ef4444);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>`;
}
Reference in New Issue View Git Blame Copy Permalink