268 lines
12 KiB
TypeScript
268 lines
12 KiB
TypeScript
/**
|
|
* rCal landing page — relational calendar.
|
|
*/
|
|
export function renderLanding(): string {
|
|
return `
|
|
<!-- Hero -->
|
|
<div class="rl-hero">
|
|
<span class="rl-tagline">rCal</span>
|
|
<h1 class="rl-heading">Time is shared.<br>Your calendar should be too.</h1>
|
|
<p class="rl-subtext">
|
|
A spatiotemporal calendar that couples where and when, supports natural cycles,
|
|
and zooms from 30-second moments to geological epochs.
|
|
(You)rCal, your rhythm.
|
|
</p>
|
|
<div class="rl-cta-row">
|
|
<a href="https://demo.rspace.online/rcal" class="rl-cta-primary" id="ml-primary">Try the Demo</a>
|
|
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Principles -->
|
|
<section class="rl-section">
|
|
<div class="rl-container">
|
|
<h2 class="rl-heading" style="text-align:center">Design principles</h2>
|
|
<div class="rl-grid-4" style="margin-top:2rem">
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box"><span style="font-size:1.25rem">🤝</span></div>
|
|
<h3>Shared by Default</h3>
|
|
<p>Calendars belong to spaces, not individuals. Everyone sees the same schedule.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box"><span style="font-size:1.25rem">🗺</span></div>
|
|
<h3>Spatiotemporal</h3>
|
|
<p>Events have places, not just times. Where and when are coupled at every zoom level.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box"><span style="font-size:1.25rem">🌙</span></div>
|
|
<h3>Natural Cycles</h3>
|
|
<p>Lunar phases, solstices, and seasonal rhythms overlaid on the Gregorian grid.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box"><span style="font-size:1.25rem">🔭</span></div>
|
|
<h3>Multi-Scale Zoom</h3>
|
|
<p>Ten zoom levels from 30-second moments to cosmic time. One unified timeline.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Why rCal -->
|
|
<section class="rl-section rl-section--alt">
|
|
<div class="rl-container">
|
|
<h2 class="rl-heading" style="text-align:center">Why rCal</h2>
|
|
<div class="rl-grid-3" style="margin-top:2rem">
|
|
<div class="rl-card">
|
|
<h3>Where + When</h3>
|
|
<p>Every event carries location context. Zoom into a city and see only what happens there.</p>
|
|
</div>
|
|
<div class="rl-card">
|
|
<h3>Coupled Zoom</h3>
|
|
<p>Temporal and spatial zoom are linked. Zoom out in time and the map zooms out too.</p>
|
|
</div>
|
|
<div class="rl-card">
|
|
<h3>Multi-Source Sync</h3>
|
|
<p>Pull events from ICS feeds, CalDAV servers, and other r* modules into one view.</p>
|
|
</div>
|
|
<div class="rl-card">
|
|
<h3>Lunar Overlay</h3>
|
|
<p>Moon phases computed and displayed alongside events. Plan by natural cycles.</p>
|
|
</div>
|
|
<div class="rl-card">
|
|
<h3>r* Ecosystem Embeds</h3>
|
|
<p>rVote deadlines, rWork sprints, rFunds milestones — all surface as calendar events.</p>
|
|
</div>
|
|
<div class="rl-card">
|
|
<h3>Self-Hosted</h3>
|
|
<p>Your data lives on your infrastructure. No vendor lock-in, no surveillance calendars.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Temporal Zoom -->
|
|
<section class="rl-section">
|
|
<div class="rl-container">
|
|
<h2 class="rl-heading" style="text-align:center">Temporal zoom</h2>
|
|
<p class="rl-subtext" style="text-align:center">Ten levels of time — from the blink of an eye to deep time.</p>
|
|
<div class="rl-card" style="max-width:700px;margin:2rem auto 0">
|
|
<div class="rl-zoom-bar">
|
|
<div class="rl-zoom-bar__row">
|
|
<span class="rl-zoom-bar__label">0</span>
|
|
<div class="rl-zoom-bar__bar" style="width:10%;background:rgba(99,102,241,0.3)">
|
|
<span class="rl-zoom-bar__name">Moment</span>
|
|
</div>
|
|
<span class="rl-zoom-bar__span">30 s</span>
|
|
</div>
|
|
<div class="rl-zoom-bar__row">
|
|
<span class="rl-zoom-bar__label">1</span>
|
|
<div class="rl-zoom-bar__bar" style="width:15%;background:rgba(99,102,241,0.28)">
|
|
<span class="rl-zoom-bar__name">Minute</span>
|
|
</div>
|
|
<span class="rl-zoom-bar__span">1–10 min</span>
|
|
</div>
|
|
<div class="rl-zoom-bar__row">
|
|
<span class="rl-zoom-bar__label">2</span>
|
|
<div class="rl-zoom-bar__bar" style="width:22%;background:rgba(99,102,241,0.25)">
|
|
<span class="rl-zoom-bar__name">Hour</span>
|
|
</div>
|
|
<span class="rl-zoom-bar__span">1–6 hrs</span>
|
|
</div>
|
|
<div class="rl-zoom-bar__row">
|
|
<span class="rl-zoom-bar__label">3</span>
|
|
<div class="rl-zoom-bar__bar" style="width:30%;background:rgba(99,102,241,0.22)">
|
|
<span class="rl-zoom-bar__name">Day</span>
|
|
</div>
|
|
<span class="rl-zoom-bar__span">24 hrs</span>
|
|
</div>
|
|
<div class="rl-zoom-bar__row">
|
|
<span class="rl-zoom-bar__label">4</span>
|
|
<div class="rl-zoom-bar__bar" style="width:40%;background:rgba(99,102,241,0.20)">
|
|
<span class="rl-zoom-bar__name">Week</span>
|
|
</div>
|
|
<span class="rl-zoom-bar__span">7 days</span>
|
|
</div>
|
|
<div class="rl-zoom-bar__row">
|
|
<span class="rl-zoom-bar__label">5</span>
|
|
<div class="rl-zoom-bar__bar" style="width:50%;background:rgba(99,102,241,0.18)">
|
|
<span class="rl-zoom-bar__name">Lunar</span>
|
|
</div>
|
|
<span class="rl-zoom-bar__span">29.5 days</span>
|
|
</div>
|
|
<div class="rl-zoom-bar__row">
|
|
<span class="rl-zoom-bar__label">6</span>
|
|
<div class="rl-zoom-bar__bar" style="width:60%;background:rgba(99,102,241,0.16)">
|
|
<span class="rl-zoom-bar__name">Season</span>
|
|
</div>
|
|
<span class="rl-zoom-bar__span">~90 days</span>
|
|
</div>
|
|
<div class="rl-zoom-bar__row">
|
|
<span class="rl-zoom-bar__label">7</span>
|
|
<div class="rl-zoom-bar__bar" style="width:70%;background:rgba(99,102,241,0.14)">
|
|
<span class="rl-zoom-bar__name">Year</span>
|
|
</div>
|
|
<span class="rl-zoom-bar__span">365 days</span>
|
|
</div>
|
|
<div class="rl-zoom-bar__row">
|
|
<span class="rl-zoom-bar__label">8</span>
|
|
<div class="rl-zoom-bar__bar" style="width:85%;background:rgba(99,102,241,0.12)">
|
|
<span class="rl-zoom-bar__name">Epoch</span>
|
|
</div>
|
|
<span class="rl-zoom-bar__span">decades–centuries</span>
|
|
</div>
|
|
<div class="rl-zoom-bar__row">
|
|
<span class="rl-zoom-bar__label">9</span>
|
|
<div class="rl-zoom-bar__bar" style="width:100%;background:rgba(99,102,241,0.10)">
|
|
<span class="rl-zoom-bar__name">Cosmic</span>
|
|
</div>
|
|
<span class="rl-zoom-bar__span">geological</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Calendar Views -->
|
|
<section class="rl-section rl-section--alt">
|
|
<div class="rl-container">
|
|
<h2 class="rl-heading" style="text-align:center">Four views</h2>
|
|
<div class="rl-grid-4" style="margin-top:2rem">
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box"><span style="font-size:1.25rem">📅</span></div>
|
|
<h3>Temporal</h3>
|
|
<p>Classic calendar grid — day, week, month. The view you know.</p>
|
|
<p style="font-size:0.7rem;color:#64748b;margin-top:0.5rem"><kbd style="background:rgba(255,255,255,0.1);padding:0.1rem 0.3rem;border-radius:3px;font-size:0.65rem">T</kbd> to switch</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box"><span style="font-size:1.25rem">🗺</span></div>
|
|
<h3>Spatial</h3>
|
|
<p>Map view with events pinned to locations. Zoom couples time and space.</p>
|
|
<p style="font-size:0.7rem;color:#64748b;margin-top:0.5rem"><kbd style="background:rgba(255,255,255,0.1);padding:0.1rem 0.3rem;border-radius:3px;font-size:0.65rem">S</kbd> to switch</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box"><span style="font-size:1.25rem">🌙</span></div>
|
|
<h3>Lunar</h3>
|
|
<p>Moon-phase overlay with illumination percentages. Plan with natural rhythms.</p>
|
|
<p style="font-size:0.7rem;color:#64748b;margin-top:0.5rem"><kbd style="background:rgba(255,255,255,0.1);padding:0.1rem 0.3rem;border-radius:3px;font-size:0.65rem">L</kbd> to switch</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box"><span style="font-size:1.25rem">🧩</span></div>
|
|
<h3>Context</h3>
|
|
<p>Events grouped by r* source module. See your rWork sprints next to rVote deadlines.</p>
|
|
<p style="font-size:0.7rem;color:#64748b;margin-top:0.5rem"><kbd style="background:rgba(255,255,255,0.1);padding:0.1rem 0.3rem;border-radius:3px;font-size:0.65rem">C</kbd> to switch</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Ecosystem Integration -->
|
|
<section class="rl-section">
|
|
<div class="rl-container">
|
|
<h2 class="rl-heading" style="text-align:center">Ecosystem integration</h2>
|
|
<p class="rl-subtext" style="text-align:center">rCal pulls events from across the r* ecosystem automatically.</p>
|
|
<div class="rl-grid-3" style="margin-top:2rem">
|
|
<div class="rl-integration">
|
|
<div class="rl-icon-box" style="flex-shrink:0"><span style="font-size:1.25rem">✈️</span></div>
|
|
<div>
|
|
<h3><a href="/rtrips" style="color:#e2e8f0;text-decoration:none">rTrips</a></h3>
|
|
<p>Travel itineraries appear as multi-day calendar events with location pins.</p>
|
|
</div>
|
|
</div>
|
|
<div class="rl-integration">
|
|
<div class="rl-icon-box" style="flex-shrink:0"><span style="font-size:1.25rem">🗺</span></div>
|
|
<div>
|
|
<h3><a href="/rmaps" style="color:#e2e8f0;text-decoration:none">rMaps</a></h3>
|
|
<p>Location-tagged events render on the spatial view map layer.</p>
|
|
</div>
|
|
</div>
|
|
<div class="rl-integration">
|
|
<div class="rl-icon-box" style="flex-shrink:0"><span style="font-size:1.25rem">👥</span></div>
|
|
<div>
|
|
<h3><a href="/rnetwork" style="color:#e2e8f0;text-decoration:none">rNetwork</a></h3>
|
|
<p>Meeting events auto-link to participant profiles and relationship context.</p>
|
|
</div>
|
|
</div>
|
|
<div class="rl-integration">
|
|
<div class="rl-icon-box" style="flex-shrink:0"><span style="font-size:1.25rem">🛒</span></div>
|
|
<div>
|
|
<h3><a href="/rcart" style="color:#e2e8f0;text-decoration:none">rCart</a></h3>
|
|
<p>Group-buy deadlines and fulfillment ETAs show up as calendar milestones.</p>
|
|
</div>
|
|
</div>
|
|
<div class="rl-integration">
|
|
<div class="rl-icon-box" style="flex-shrink:0"><span style="font-size:1.25rem">📝</span></div>
|
|
<div>
|
|
<h3><a href="/rnotes" style="color:#e2e8f0;text-decoration:none">rNotes</a></h3>
|
|
<p>Meeting notes link back to the calendar event that spawned them.</p>
|
|
</div>
|
|
</div>
|
|
<div class="rl-integration">
|
|
<div class="rl-icon-box" style="flex-shrink:0"><span style="font-size:1.25rem">🌐</span></div>
|
|
<div>
|
|
<h3><a href="/" style="color:#e2e8f0;text-decoration:none">rSpace</a></h3>
|
|
<p>Space-level milestones and deadlines aggregate across all modules into one timeline.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CTA -->
|
|
<section class="rl-section rl-section--alt">
|
|
<div class="rl-container" style="text-align:center">
|
|
<h2 class="rl-heading">See time differently</h2>
|
|
<p class="rl-subtext">
|
|
A calendar that understands place, cycles, and community. Try the demo or create your own space.
|
|
</p>
|
|
<div class="rl-cta-row">
|
|
<a href="https://demo.rspace.online/rcal" class="rl-cta-primary" id="ml-primary">Open rCal</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>`;
|
|
}
|