205 lines
11 KiB
TypeScript
205 lines
11 KiB
TypeScript
/**
|
|
* rChoices landing page — quick collaborative decisions.
|
|
* Ported from the Next.js page.tsx. Interactive React demos (SpiderDemo,
|
|
* RankingDemo, VotingDemo) replaced with text descriptions.
|
|
*/
|
|
export function renderLanding(): string {
|
|
return `
|
|
<!-- Hero -->
|
|
<div class="rl-hero">
|
|
<span class="rl-tagline">Quick collaborative decisions</span>
|
|
<h1 class="rl-heading">What should <span style="color:#5eead4">5 friends</span><br>do tonight?</h1>
|
|
<p class="rl-subtext">
|
|
Spider plots to weigh trade-offs. Rankings to sort preferences.
|
|
Live voting to decide fast. Powered by rSpace real-time sync.
|
|
</p>
|
|
<div class="rl-cta-row">
|
|
<a href="https://demo.rspace.online/rchoices" class="rl-cta-primary" id="ml-primary">Create a Choice Room</a>
|
|
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Three tools -->
|
|
<section class="rl-section">
|
|
<div class="rl-container">
|
|
<h2 class="rl-heading" style="text-align:center">Three decision tools</h2>
|
|
<div class="rl-grid-3">
|
|
<!-- Spider Plots -->
|
|
<div class="rl-card">
|
|
<div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.5rem">
|
|
<span style="font-size:0.7rem;padding:0.2rem 0.6rem;border-radius:9999px;background:rgba(168,85,247,0.1);color:#c084fc">Compare</span>
|
|
</div>
|
|
<h3 style="font-size:1.05rem;margin-bottom:0.35rem">Spider Plots</h3>
|
|
<p>Everyone rates options on multiple criteria. See where preferences
|
|
overlap — and where they don’t.</p>
|
|
<div style="margin-top:1rem;padding:1rem;border-radius:0.75rem;background:rgba(168,85,247,0.05);border:1px solid rgba(168,85,247,0.1);text-align:center">
|
|
<svg width="120" height="100" viewBox="0 0 120 100" style="margin:0 auto;display:block">
|
|
<!-- Spider web axes -->
|
|
<line x1="60" y1="10" x2="60" y2="90" stroke="#334155" stroke-width="0.5"/>
|
|
<line x1="17" y1="35" x2="103" y2="65" stroke="#334155" stroke-width="0.5"/>
|
|
<line x1="17" y1="65" x2="103" y2="35" stroke="#334155" stroke-width="0.5"/>
|
|
<!-- Outer ring -->
|
|
<polygon points="60,10 103,35 103,65 60,90 17,65 17,35" fill="none" stroke="#334155" stroke-width="0.5"/>
|
|
<!-- Mid ring -->
|
|
<polygon points="60,30 88,42 88,58 60,70 32,58 32,42" fill="none" stroke="#334155" stroke-width="0.5"/>
|
|
<!-- Data shape 1 (purple) -->
|
|
<polygon points="60,18 96,38 90,62 60,78 28,55 25,38" fill="rgba(168,85,247,0.15)" stroke="#c084fc" stroke-width="1.5"/>
|
|
<!-- Data shape 2 (teal) -->
|
|
<polygon points="60,25 85,45 98,58 60,72 35,60 22,42" fill="rgba(20,184,166,0.15)" stroke="#14b8a6" stroke-width="1.5"/>
|
|
<!-- Axis labels -->
|
|
<text x="60" y="6" text-anchor="middle" fill="#64748b" font-size="7">Price</text>
|
|
<text x="110" y="34" text-anchor="start" fill="#64748b" font-size="7">Vibe</text>
|
|
<text x="110" y="70" text-anchor="start" fill="#64748b" font-size="7">Menu</text>
|
|
<text x="60" y="98" text-anchor="middle" fill="#64748b" font-size="7">Distance</text>
|
|
<text x="10" y="70" text-anchor="end" fill="#64748b" font-size="7">Speed</text>
|
|
<text x="10" y="34" text-anchor="end" fill="#64748b" font-size="7">Reviews</text>
|
|
</svg>
|
|
<p style="font-size:0.7rem;color:#64748b;margin-top:0.5rem">Multi-criteria comparison at a glance</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Rankings -->
|
|
<div class="rl-card">
|
|
<div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.5rem">
|
|
<span style="font-size:0.7rem;padding:0.2rem 0.6rem;border-radius:9999px;background:rgba(245,158,11,0.1);color:#fbbf24">Rank</span>
|
|
</div>
|
|
<h3 style="font-size:1.05rem;margin-bottom:0.35rem">Rankings</h3>
|
|
<p>Drag to order your top picks. Borda count or instant-runoff finds
|
|
the group’s true consensus.</p>
|
|
<div style="margin-top:1rem;padding:0.75rem;border-radius:0.75rem;background:rgba(245,158,11,0.05);border:1px solid rgba(245,158,11,0.1)">
|
|
<div style="display:flex;flex-direction:column;gap:0.4rem">
|
|
<div style="display:flex;align-items:center;gap:0.5rem;padding:0.4rem 0.6rem;border-radius:0.375rem;background:rgba(245,158,11,0.12);border:1px solid rgba(245,158,11,0.2)">
|
|
<span style="font-size:0.7rem;font-weight:700;color:#fbbf24;width:1.2rem">1st</span>
|
|
<span style="font-size:0.8rem;color:#e2e8f0">Thai place on 5th</span>
|
|
</div>
|
|
<div style="display:flex;align-items:center;gap:0.5rem;padding:0.4rem 0.6rem;border-radius:0.375rem;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06)">
|
|
<span style="font-size:0.7rem;font-weight:700;color:#94a3b8;width:1.2rem">2nd</span>
|
|
<span style="font-size:0.8rem;color:#e2e8f0">New pizza spot</span>
|
|
</div>
|
|
<div style="display:flex;align-items:center;gap:0.5rem;padding:0.4rem 0.6rem;border-radius:0.375rem;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06)">
|
|
<span style="font-size:0.7rem;font-weight:700;color:#94a3b8;width:1.2rem">3rd</span>
|
|
<span style="font-size:0.8rem;color:#e2e8f0">Taco truck</span>
|
|
</div>
|
|
<div style="display:flex;align-items:center;gap:0.5rem;padding:0.4rem 0.6rem;border-radius:0.375rem;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06)">
|
|
<span style="font-size:0.7rem;font-weight:700;color:#94a3b8;width:1.2rem">4th</span>
|
|
<span style="font-size:0.8rem;color:#e2e8f0">Sushi bar</span>
|
|
</div>
|
|
</div>
|
|
<p style="font-size:0.7rem;color:#64748b;margin-top:0.5rem;text-align:center">Drag to reorder — consensus emerges</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Live Voting -->
|
|
<div class="rl-card">
|
|
<div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.5rem">
|
|
<span style="font-size:0.7rem;padding:0.2rem 0.6rem;border-radius:9999px;background:rgba(34,211,238,0.1);color:#22d3ee">Vote</span>
|
|
</div>
|
|
<h3 style="font-size:1.05rem;margin-bottom:0.35rem">Live Voting</h3>
|
|
<p>Cast your vote and watch results shift in real time. Perfect for
|
|
quick polls and tiebreakers.</p>
|
|
<div style="margin-top:1rem;padding:0.75rem;border-radius:0.75rem;background:rgba(34,211,238,0.05);border:1px solid rgba(34,211,238,0.1)">
|
|
<div style="display:flex;flex-direction:column;gap:0.5rem">
|
|
<div>
|
|
<div style="display:flex;justify-content:space-between;font-size:0.75rem;margin-bottom:0.25rem">
|
|
<span style="color:#e2e8f0">Hike</span>
|
|
<span style="color:#22d3ee;font-weight:600">45%</span>
|
|
</div>
|
|
<div style="height:0.4rem;border-radius:9999px;background:rgba(255,255,255,0.06);overflow:hidden">
|
|
<div style="height:100%;width:45%;border-radius:9999px;background:#22d3ee"></div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div style="display:flex;justify-content:space-between;font-size:0.75rem;margin-bottom:0.25rem">
|
|
<span style="color:#e2e8f0">Beach</span>
|
|
<span style="color:#22d3ee;font-weight:600">35%</span>
|
|
</div>
|
|
<div style="height:0.4rem;border-radius:9999px;background:rgba(255,255,255,0.06);overflow:hidden">
|
|
<div style="height:100%;width:35%;border-radius:9999px;background:#22d3ee"></div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div style="display:flex;justify-content:space-between;font-size:0.75rem;margin-bottom:0.25rem">
|
|
<span style="color:#e2e8f0">Stay in</span>
|
|
<span style="color:#22d3ee;font-weight:600">20%</span>
|
|
</div>
|
|
<div style="height:0.4rem;border-radius:9999px;background:rgba(255,255,255,0.06);overflow:hidden">
|
|
<div style="height:100%;width:20%;border-radius:9999px;background:#22d3ee"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p style="font-size:0.7rem;color:#64748b;margin-top:0.5rem;text-align:center">Results update live — 9 votes in</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- How it works -->
|
|
<section class="rl-section rl-section--alt">
|
|
<div class="rl-container">
|
|
<h2 class="rl-heading" style="text-align:center">How it works</h2>
|
|
<div class="rl-grid-3">
|
|
<div class="rl-step">
|
|
<div class="rl-step__num">1</div>
|
|
<h3>Create</h3>
|
|
<p>Name your choice room. It comes pre-loaded with vote, rank, and spider tools.</p>
|
|
</div>
|
|
<div class="rl-step">
|
|
<div class="rl-step__num">2</div>
|
|
<h3>Share</h3>
|
|
<p>Send the link. Everyone joins the same real-time canvas — add options, cast votes.</p>
|
|
</div>
|
|
<div class="rl-step">
|
|
<div class="rl-step__num">3</div>
|
|
<h3>Decide</h3>
|
|
<p>Results aggregate live. The group sees consensus emerge in seconds.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Use cases -->
|
|
<section class="rl-section">
|
|
<div class="rl-container">
|
|
<h2 class="rl-heading" style="text-align:center">Decisions, not debates</h2>
|
|
<p class="rl-subtext" style="text-align:center">
|
|
Built for the everyday choices that stall group chats
|
|
</p>
|
|
<div class="rl-grid-2" style="margin-top:2rem">
|
|
<div class="rl-card">
|
|
<h3 style="margin-bottom:0.35rem">Where to eat?</h3>
|
|
<p>Rate restaurants on price, distance, vibe. The spider plot finds the sweet spot.</p>
|
|
</div>
|
|
<div class="rl-card">
|
|
<h3 style="margin-bottom:0.35rem">What to watch?</h3>
|
|
<p>Everyone ranks their top 3 movies. Instant-runoff picks the winner.</p>
|
|
</div>
|
|
<div class="rl-card">
|
|
<h3 style="margin-bottom:0.35rem">Weekend plans?</h3>
|
|
<p>Quick poll: hike, beach, or stay in? Results in 30 seconds.</p>
|
|
</div>
|
|
<div class="rl-card">
|
|
<h3 style="margin-bottom:0.35rem">Team retro priorities?</h3>
|
|
<p>Rank improvement ideas by impact. Borda count surfaces what the team really wants.</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">What should 5 friends do tonight?</h2>
|
|
<p class="rl-subtext">Create a room and find out in 30 seconds.</p>
|
|
<div class="rl-cta-row">
|
|
<a href="https://demo.rspace.online/rchoices" class="rl-cta-primary">Create a Choice Room</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>`;
|
|
}
|