124 lines
5.5 KiB
TypeScript
124 lines
5.5 KiB
TypeScript
/**
|
|
* CrowdSurf landing page — swipe to coordinate local activities.
|
|
*/
|
|
export function renderLanding(): string {
|
|
return `
|
|
<!-- Hero -->
|
|
<div class="rl-hero">
|
|
<span class="rl-tagline">Coordinate spontaneous activities</span>
|
|
<h1 class="rl-heading">What should <span style="color:#5eead4">your community</span><br>do today?</h1>
|
|
<p class="rl-subtext">
|
|
Swipe to discover. Commit to join. When enough people are in, it happens.
|
|
No planning committees. No group chat chaos. Just action.
|
|
</p>
|
|
<div class="rl-cta-row">
|
|
<a href="https://demo.rspace.online/crowdsurf" class="rl-cta-primary">Start Swiping</a>
|
|
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- How it works -->
|
|
<section class="rl-section">
|
|
<div class="rl-container">
|
|
<h2 class="rl-heading" style="text-align:center">How Crowdsurfing works</h2>
|
|
<div class="rl-grid-3">
|
|
<div class="rl-step">
|
|
<div class="rl-step__num">1</div>
|
|
<h3>Propose</h3>
|
|
<p>Someone has an idea — community garden day, open mic, repair cafe. They post it with a threshold: “happens when 5 people are in.”</p>
|
|
</div>
|
|
<div class="rl-step">
|
|
<div class="rl-step__num">2</div>
|
|
<h3>Swipe</h3>
|
|
<p>Community members discover activities by swiping. Right to join, left to skip. Declare what you’re bringing — skills, gear, food.</p>
|
|
</div>
|
|
<div class="rl-step">
|
|
<div class="rl-step__num">3</div>
|
|
<h3>Trigger</h3>
|
|
<p>When enough people commit, the activity triggers. The group forms, contributions are matched, and it just… happens.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Features -->
|
|
<section class="rl-section rl-section--alt">
|
|
<div class="rl-container">
|
|
<h2 class="rl-heading" style="text-align:center">Built for real communities</h2>
|
|
<div class="rl-grid-2" style="margin-top:2rem">
|
|
<div class="rl-card">
|
|
<h3 style="margin-bottom:0.35rem">Threshold triggers</h3>
|
|
<p>Activities only happen when enough people commit. No more “who’s coming?” anxiety. The threshold <em>is</em> the RSVP.</p>
|
|
</div>
|
|
<div class="rl-card">
|
|
<h3 style="margin-bottom:0.35rem">Contribution matching</h3>
|
|
<p>See what people are bringing and what’s still needed. Skills, equipment, food, space — the puzzle assembles itself.</p>
|
|
</div>
|
|
<div class="rl-card">
|
|
<h3 style="margin-bottom:0.35rem">Time urgency</h3>
|
|
<p>Proposals expire. The countdown creates momentum. As the window closes, urgency rises and commitment accelerates.</p>
|
|
</div>
|
|
<div class="rl-card">
|
|
<h3 style="margin-bottom:0.35rem">Real-time sync</h3>
|
|
<p>Powered by rSpace CRDT infrastructure. Every swipe syncs instantly across all participants. Offline-first, multiplayer by default.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Use cases -->
|
|
<section class="rl-section">
|
|
<div class="rl-container">
|
|
<h2 class="rl-heading" style="text-align:center">What will your community crowdsurf?</h2>
|
|
<div class="rl-grid-3" style="margin-top:2rem">
|
|
<div class="rl-card" style="text-align:center">
|
|
<div style="font-size:2rem;margin-bottom:0.5rem">🌱</div>
|
|
<h3 style="margin-bottom:0.25rem">Garden days</h3>
|
|
<p style="font-size:0.85rem">5 people + seedlings + shovels = community garden magic</p>
|
|
</div>
|
|
<div class="rl-card" style="text-align:center">
|
|
<div style="font-size:2rem;margin-bottom:0.5rem">🎸</div>
|
|
<h3 style="margin-bottom:0.25rem">Jam sessions</h3>
|
|
<p style="font-size:0.85rem">Musicians find each other. Instruments match up. Music emerges.</p>
|
|
</div>
|
|
<div class="rl-card" style="text-align:center">
|
|
<div style="font-size:2rem;margin-bottom:0.5rem">🔧</div>
|
|
<h3 style="margin-bottom:0.25rem">Repair cafes</h3>
|
|
<p style="font-size:0.85rem">Bring broken stuff, find fixers. Circular economy through coordination.</p>
|
|
</div>
|
|
<div class="rl-card" style="text-align:center">
|
|
<div style="font-size:2rem;margin-bottom:0.5rem">🍳</div>
|
|
<h3 style="margin-bottom:0.25rem">Community meals</h3>
|
|
<p style="font-size:0.85rem">Someone cooks, others bring ingredients. Potluck, self-organized.</p>
|
|
</div>
|
|
<div class="rl-card" style="text-align:center">
|
|
<div style="font-size:2rem;margin-bottom:0.5rem">🧘</div>
|
|
<h3 style="margin-bottom:0.25rem">Wellness</h3>
|
|
<p style="font-size:0.85rem">Yoga by the canal. Group meditation. Movement in the park.</p>
|
|
</div>
|
|
<div class="rl-card" style="text-align:center">
|
|
<div style="font-size:2rem;margin-bottom:0.5rem">💻</div>
|
|
<h3 style="margin-bottom:0.25rem">Hackathons</h3>
|
|
<p style="font-size:0.85rem">Coders + designers + a space + caffeine = build something together.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CTA -->
|
|
<section class="rl-section rl-section--alt">
|
|
<div class="rl-container" style="text-align:center">
|
|
<h2 class="rl-heading">Ready to ride the wave?</h2>
|
|
<p class="rl-subtext">Create a space for your community and start crowdsurfing.</p>
|
|
<div class="rl-cta-row">
|
|
<a href="https://demo.rspace.online/crowdsurf" class="rl-cta-primary">Try the Demo</a>
|
|
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="rl-back">
|
|
<a href="/">← Back to rSpace</a>
|
|
</div>`;
|
|
}
|