117 lines
4.5 KiB
TypeScript
117 lines
4.5 KiB
TypeScript
/**
|
|
* rTrips demo page — server-rendered HTML body.
|
|
*
|
|
* Embeds the full <folk-trips-planner space="demo"> component for
|
|
* real interactivity (trip list, destinations, itinerary, bookings,
|
|
* expenses, packing lists) plus showcase sections explaining the rTrips vision.
|
|
*/
|
|
|
|
const FEATURES = [
|
|
{
|
|
icon: "\u{1F5FA}",
|
|
title: "Destinations",
|
|
desc: "Pin destinations on the map with arrival/departure dates, country info, and notes. Reorder your route with drag and drop.",
|
|
},
|
|
{
|
|
icon: "\u{1F4C5}",
|
|
title: "Itinerary",
|
|
desc: "Plan day-by-day activities grouped by date. Categories include hiking, dining, sightseeing, transit, and more.",
|
|
},
|
|
{
|
|
icon: "\u{1F4B0}",
|
|
title: "Expense Splitting",
|
|
desc: "Track group expenses with automatic per-person splits. See who paid what and who owes whom.",
|
|
},
|
|
{
|
|
icon: "\u{1F392}",
|
|
title: "Packing Lists",
|
|
desc: "Collaborative packing checklists organized by category. Check items off as you pack — synced in real time.",
|
|
},
|
|
];
|
|
|
|
const INTEGRATIONS = [
|
|
{ icon: "\u{1F5FA}", name: "rMaps", desc: "Destinations and routes appear on the interactive map with pins and driving directions." },
|
|
{ icon: "\u{1F4C5}", name: "rCal", desc: "Trip dates, activities, and bookings sync to the community calendar." },
|
|
{ icon: "\u{1F30A}", name: "rFunds", desc: "Group expenses feed into shared budget flows with threshold-based splits." },
|
|
{ icon: "\u{1F5F3}", name: "rVote", desc: "Vote on daily activities, restaurants, and route decisions as a group." },
|
|
{ icon: "\u{1F4DD}", name: "rNotes", desc: "Attach travel journals, packing tips, and logistics notes to the trip." },
|
|
{ icon: "\u2615\uFE0F", name: "rSpace", desc: "Each trip lives on its own canvas with maps, notes, polls, and expenses connected." },
|
|
];
|
|
|
|
export function renderDemo(): string {
|
|
return `
|
|
<div class="rd-root" style="--rd-accent-from:#14b8a6; --rd-accent-to:#06b6d4;">
|
|
|
|
<!-- Hero -->
|
|
<section class="rd-hero">
|
|
<div style="display:inline-block;padding:0.375rem 1rem;background:rgba(20,184,166,0.1);border:1px solid rgba(20,184,166,0.2);border-radius:9999px;font-size:0.875rem;color:#5eead4;font-weight:500;margin-bottom:1.5rem;">
|
|
Collaborative Trip Planner
|
|
</div>
|
|
<h1>rTrips Demo</h1>
|
|
<p class="rd-subtitle">Plan trips together with destinations, itinerary, bookings, expenses, and packing lists</p>
|
|
<div class="rd-meta">
|
|
<span>\u{1F5FA} Destinations</span>
|
|
<span style="color:#475569">|</span>
|
|
<span>\u{1F4C5} Itinerary</span>
|
|
<span style="color:#475569">|</span>
|
|
<span>\u{1F4B0} Expenses</span>
|
|
<span style="color:#475569">|</span>
|
|
<span>\u{1F392} Packing</span>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Interactive Trips Planner -->
|
|
<section class="rd-section rd-section--narrow">
|
|
<div class="rd-card" style="padding:0;overflow:hidden;">
|
|
<folk-trips-planner space="demo"></folk-trips-planner>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Core Concepts -->
|
|
<section class="rd-section">
|
|
<div class="rd-grid rd-grid--2">
|
|
${FEATURES.map(
|
|
(f) => `
|
|
<div class="rd-card" style="padding:1.5rem;">
|
|
<div style="font-size:1.75rem;margin-bottom:0.75rem;">${f.icon}</div>
|
|
<h3 style="font-size:1rem;font-weight:600;color:#e2e8f0;margin:0 0 0.5rem;">${f.title}</h3>
|
|
<p style="font-size:0.875rem;color:#94a3b8;margin:0;line-height:1.5;">${f.desc}</p>
|
|
</div>`,
|
|
).join("")}
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Ecosystem Integrations -->
|
|
<section class="rd-section">
|
|
<h2 style="text-align:center;font-size:1.25rem;font-weight:700;color:#f1f5f9;margin:0 0 1.5rem;">
|
|
r* Ecosystem Integrations
|
|
</h2>
|
|
<div class="rd-grid rd-grid--3">
|
|
${INTEGRATIONS.map(
|
|
(i) => `
|
|
<div class="rd-card" style="padding:1.25rem;">
|
|
<div style="font-size:1.5rem;margin-bottom:0.5rem;">${i.icon}</div>
|
|
<h3 style="font-size:0.875rem;font-weight:600;color:#e2e8f0;margin:0 0 0.375rem;">${i.name}</h3>
|
|
<p style="font-size:0.8rem;color:#94a3b8;margin:0;line-height:1.4;">${i.desc}</p>
|
|
</div>`,
|
|
).join("")}
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CTA -->
|
|
<section class="rd-section rd-section--narrow">
|
|
<div class="rd-cta">
|
|
<h2>Plan Your Next Adventure</h2>
|
|
<p>
|
|
rTrips gives your group everything you need — routes, schedules, polls,
|
|
shared expenses, and packing lists — all connected in one trip canvas.
|
|
</p>
|
|
<a href="/create-space" style="background:linear-gradient(135deg,#14b8a6,#06b6d4);box-shadow:0 8px 24px rgba(20,184,166,0.25);">
|
|
Start Planning
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
</div>`;
|
|
}
|