214 lines
12 KiB
TypeScript
214 lines
12 KiB
TypeScript
/**
|
|
* Trips module landing page — static HTML, no React.
|
|
*/
|
|
export function renderLanding(): string {
|
|
return `
|
|
<!-- Hero -->
|
|
<div class="rl-hero">
|
|
<span class="rl-tagline">rTrips</span>
|
|
<h1 class="rl-heading">Plan Your Trip, Naturally</h1>
|
|
<p class="rl-subtext">
|
|
Describe your dream trip in plain language. We'll structure it into
|
|
itineraries, budgets, and bookings — then give you a collaborative
|
|
canvas to plan together in real-time.
|
|
(You)rTrips, your horizon.
|
|
</p>
|
|
<div class="rl-cta-row">
|
|
<a href="https://demo.rspace.online/rtrips" class="rl-cta-primary" id="ml-primary">Try Demo</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 It Works</h2>
|
|
<p class="rl-subtext" style="text-align:center">Three steps from dream to departure.</p>
|
|
<div class="rl-grid-3">
|
|
<div class="rl-step">
|
|
<div class="rl-step__num">1</div>
|
|
<h3>Describe It</h3>
|
|
<p>
|
|
Tell us about your trip in natural language. “Fly from Toronto to Bali
|
|
for 2 weeks in March, budget $3000.” We parse it into structured data
|
|
you can refine.
|
|
</p>
|
|
</div>
|
|
<div class="rl-step">
|
|
<div class="rl-step__num">2</div>
|
|
<h3>We Structure It</h3>
|
|
<p>
|
|
AI extracts destinations, dates, budgets, and bookings into organized views.
|
|
Edit itineraries, track expenses, manage packing lists — all structured
|
|
and searchable.
|
|
</p>
|
|
</div>
|
|
<div class="rl-step">
|
|
<div class="rl-step__num">3</div>
|
|
<h3>Collaborate on Canvas</h3>
|
|
<p>
|
|
Open the collaborative canvas to plan visually with your travel partners.
|
|
Drag destinations, connect itineraries, and brainstorm together in real-time
|
|
or async.
|
|
</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">Everything You Need to Travel Together</h2>
|
|
<p class="rl-subtext" style="text-align:center">
|
|
rTrips brings every piece of trip planning into one place — so your group
|
|
spends less time coordinating and more time exploring.
|
|
</p>
|
|
<div class="rl-grid-3">
|
|
<div class="rl-card">
|
|
<div class="rl-icon-box">
|
|
<svg width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z" />
|
|
</svg>
|
|
</div>
|
|
<h3>Collaborative Itineraries</h3>
|
|
<p>
|
|
Build day-by-day plans together in real-time. Everyone can add destinations,
|
|
suggest activities, and rearrange the schedule — changes sync instantly.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="rl-card">
|
|
<div class="rl-icon-box">
|
|
<svg width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.455 2.456L21.75 6l-1.036.259a3.375 3.375 0 00-2.455 2.456z" />
|
|
</svg>
|
|
</div>
|
|
<h3>Smart Suggestions</h3>
|
|
<p>
|
|
AI-powered recommendations for destinations, restaurants, and activities based
|
|
on your group's interests, budget, and travel dates.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="rl-card">
|
|
<div class="rl-icon-box">
|
|
<svg width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 00-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 01-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 003 15h-.75M15 10.5a3 3 0 11-6 0 3 3 0 016 0zm3 0h.008v.008H18V10.5zm-12 0h.008v.008H6V10.5z" />
|
|
</svg>
|
|
</div>
|
|
<h3>Budget Tracking</h3>
|
|
<p>
|
|
Split costs, track expenses across the group, and keep a running total so
|
|
everyone knows exactly where the money goes. No more messy spreadsheets.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="rl-card">
|
|
<div class="rl-icon-box">
|
|
<svg width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M9 6.75V15m6-6v8.25m.503 3.498l4.875-2.437c.381-.19.622-.58.622-1.006V4.82c0-.836-.88-1.38-1.628-1.006l-3.869 1.934c-.317.159-.69.159-1.006 0L9.503 3.252a1.125 1.125 0 00-1.006 0L3.622 5.689C3.24 5.88 3 6.27 3 6.695V19.18c0 .836.88 1.38 1.628 1.006l3.869-1.934c.317-.159.69-.159 1.006 0l4.994 2.497c.317.158.69.158 1.006 0z" />
|
|
</svg>
|
|
</div>
|
|
<h3>Map Integration</h3>
|
|
<p>
|
|
Visualize your entire trip on <a href="/rmaps" style="color:#14b8a6">rMaps</a>. See routes between destinations,
|
|
nearby points of interest, and real-time location sharing during travel days.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="rl-card">
|
|
<div class="rl-icon-box">
|
|
<svg width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 002.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 00-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75 2.25 2.25 0 00-.1-.664m-5.8 0A2.251 2.251 0 0113.5 2.25H15a2.25 2.25 0 012.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25zM6.75 12h.008v.008H6.75V12zm0 3h.008v.008H6.75V15zm0 3h.008v.008H6.75V18z" />
|
|
</svg>
|
|
</div>
|
|
<h3>Packing Lists</h3>
|
|
<p>
|
|
Shared checklists so nothing gets forgotten. Assign items to people, mark
|
|
off as you pack, and see at a glance what the group still needs.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="rl-card">
|
|
<div class="rl-icon-box">
|
|
<svg width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3" />
|
|
</svg>
|
|
</div>
|
|
<h3>Offline Access</h3>
|
|
<p>
|
|
Download your full itinerary, maps, and booking confirmations for travel
|
|
without connectivity. Everything you need, even without a signal.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Built for Groups -->
|
|
<section class="rl-section">
|
|
<div class="rl-container">
|
|
<h2 class="rl-heading" style="text-align:center">Built for Groups</h2>
|
|
<p class="rl-subtext" style="text-align:center">
|
|
Solo trip planners are everywhere. rTrips is purpose-built for the messy, beautiful
|
|
reality of traveling with other people.
|
|
</p>
|
|
<div class="rl-grid-3">
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">
|
|
<svg width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" />
|
|
</svg>
|
|
</div>
|
|
<h3>Friends & Family</h3>
|
|
<p>
|
|
Family reunions, friend getaways, multi-generational trips. Everyone contributes
|
|
ideas, votes on restaurants, and stays in sync without endless group chats.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">
|
|
<svg width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M20.25 14.15v4.25c0 1.094-.787 2.036-1.872 2.18-2.087.277-4.216.42-6.378.42s-4.291-.143-6.378-.42c-1.085-.144-1.872-1.086-1.872-2.18v-4.25m16.5 0a2.18 2.18 0 00.75-1.661V8.706c0-1.081-.768-2.015-1.837-2.175a48.114 48.114 0 00-3.413-.387m4.5 8.006c-.194.165-.42.295-.673.38A23.978 23.978 0 0112 15.75c-2.648 0-5.195-.429-7.577-1.22a2.016 2.016 0 01-.673-.38m0 0A2.18 2.18 0 013 12.489V8.706c0-1.081.768-2.015 1.837-2.175a48.111 48.111 0 013.413-.387m7.5 0V5.25A2.25 2.25 0 0013.5 3h-3a2.25 2.25 0 00-2.25 2.25v.894m7.5 0a48.667 48.667 0 00-7.5 0M12 12.75h.008v.008H12v-.008z" />
|
|
</svg>
|
|
</div>
|
|
<h3>Teams & Offsites</h3>
|
|
<p>
|
|
Company retreats, conference travel, team offsites. Coordinate logistics,
|
|
share flight details, and manage group bookings from a single shared workspace.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">
|
|
<svg width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12.75 3.03v.568c0 .334.148.65.405.864l1.068.89c.442.369.535 1.01.216 1.49l-.51.766a2.25 2.25 0 01-1.161.886l-.143.048a1.107 1.107 0 00-.57 1.664c.369.555.169 1.307-.427 1.605L9 13.125l.423 1.059a.956.956 0 01-1.652.928l-.679-.906a1.125 1.125 0 00-1.906.172L4.5 15.75l-.612.153M12.75 3.031a9 9 0 00-8.862 12.872M12.75 3.031a9 9 0 016.69 14.036m0 0l-.177-.529A2.25 2.25 0 0017.128 15H16.5l-.324-.324a1.453 1.453 0 00-2.328.377l-.036.073a1.586 1.586 0 01-.982.816l-.99.282c-.55.157-.894.702-.8 1.267l.073.438a2.25 2.25 0 01-1.228 2.446L10.5 21l-.652-.174M12.75 3.031l.176.53" />
|
|
</svg>
|
|
</div>
|
|
<h3>Retreats & Events</h3>
|
|
<p>
|
|
Yoga retreats, wedding trips, festival crews. Organize large groups with
|
|
sub-itineraries, optional activities, and shared costs that stay transparent.
|
|
</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 plan your next adventure?</h2>
|
|
<p class="rl-subtext">Just describe where you want to go. We'll handle the rest.</p>
|
|
<div class="rl-cta-row">
|
|
<a href="https://demo.rspace.online/rtrips" class="rl-cta-primary">Plan a Trip</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="rl-back"><a href="/">← Back to rSpace</a></div>
|
|
`;
|
|
}
|