rspace-online/modules/rschedule/landing.ts

77 lines
3.7 KiB
TypeScript

/**
* rSchedule landing — marketing page for rspace.online/rschedule standalone.
*
* In-space `/:space/rschedule` bypasses this and renders the public booking
* UI directly via <folk-schedule-booking>.
*/
export function renderLanding(): string {
return `
<div class="rl-hero">
<span class="rl-tagline" style="color:#06b6d4;background:rgba(6,182,212,0.1);border-color:rgba(6,182,212,0.2)">
Public Booking Pages
</span>
<h1 class="rl-heading" style="background:linear-gradient(to right,#06b6d4,#8b5cf6,#ec4899);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text">
Book time with (you)rSpace.
</h1>
<p class="rl-subtitle">
Calendly-style public booking pages for every space and every user &mdash; backed by rCal availability, Google Calendar conflict checking, and encrypted invitations.
</p>
<p class="rl-subtext">
Each space and each user gets their own bookable schedule page. Guests pick a slot, confirm, and get a calendar invite. Hosts see bookings in their own rSchedule view &mdash; including bookings they're invited to across other spaces.
</p>
<div class="rl-cta-row">
<a href="#" class="rl-cta-primary" id="ml-primary"
style="background:linear-gradient(to right,#06b6d4,#8b5cf6);color:#fff"
onclick="var s=document.querySelector('.rl-hero').closest('[data-space]')?.getAttribute('data-space');if(s&&window.__rspaceNavUrl)window.location.href=window.__rspaceNavUrl(s,'rschedule');return false;">
Open My Booking Page
</a>
<a href="#features" class="rl-cta-secondary">How it works</a>
</div>
</div>
<section class="rl-section" id="features" 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(6,182,212,0.12);font-size:1.5rem">
<span style="font-size:1.5rem">&#128197;</span>
</div>
<h3>Weekly Rules + Overrides</h3>
<p>Set recurring weekly availability, then block or open specific dates with one-off overrides.</p>
</div>
<div class="rl-card rl-card--center" style="padding:2rem">
<div class="rl-icon-box" style="background:rgba(139,92,246,0.12);font-size:1.5rem">
<span style="font-size:1.5rem">&#128231;</span>
</div>
<h3>Google Calendar Sync</h3>
<p>Connect your Google Calendar &mdash; busy times block bookings, confirmed bookings create gcal events.</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">&#128279;</span>
</div>
<h3>Self-Cancel Links</h3>
<p>Every confirmation email includes a signed cancel token &mdash; guests reschedule without logging in.</p>
</div>
<div class="rl-card rl-card--center" style="padding:2rem">
<div class="rl-icon-box" style="background:rgba(52,211,153,0.12);font-size:1.5rem">
<span style="font-size:1.5rem">&#128101;</span>
</div>
<h3>Cross-Space Invites</h3>
<p>Invite other spaces or users as attendees. They see the booking in their own rSchedule view too.</p>
</div>
</div>
</div>
</section>
<section class="rl-section" style="text-align:center;padding:4rem 0">
<h2 class="rl-heading" style="font-size:1.75rem;background:linear-gradient(to right,#06b6d4,#8b5cf6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text">
Every space, bookable.
</h2>
<p style="color:rgba(148,163,184,0.8);margin-top:1rem">
<a href="/" style="color:#06b6d4;text-decoration:none">&larr; Back to rSpace</a>
</p>
</section>
`;
}