189 lines
11 KiB
TypeScript
189 lines
11 KiB
TypeScript
/**
|
|
* rWork landing page — collective task management.
|
|
* Ported from rwork-online Next.js page.tsx (shadcn/ui + Lucide).
|
|
*/
|
|
export function renderLanding(): string {
|
|
return `
|
|
<!-- Hero -->
|
|
<div class="rl-hero">
|
|
<span class="rl-tagline">Part of the rSpace Ecosystem</span>
|
|
<h1 class="rl-heading">Collective<br>
|
|
<span style="background:linear-gradient(135deg,#3b82f6,#14b8a6);-webkit-background-clip:text;background-clip:text;color:transparent">Task Management</span>
|
|
</h1>
|
|
<p class="rl-subtext">
|
|
Create <strong style="color:#e2e8f0">Spaces</strong> for your community to collaborate on shared projects.
|
|
Track tasks through pipelines with <strong style="color:#e2e8f0">real-time kanban boards</strong> powered
|
|
by markdown-native task management.
|
|
</p>
|
|
<div class="rl-cta-row">
|
|
<a href="https://demo.rspace.online/rwork" class="rl-cta-primary" id="ml-primary">
|
|
Get Started →
|
|
</a>
|
|
<a href="https://demo.rspace.online/rwork" class="rl-cta-secondary">View Dashboard</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- How It Works -->
|
|
<section class="rl-section rl-section--alt">
|
|
<div class="rl-container">
|
|
<div style="text-align:center;margin-bottom:1.5rem">
|
|
<span class="rl-badge">How It Works</span>
|
|
<h2 class="rl-heading" style="margin-top:0.75rem">rWork in 30 Seconds</h2>
|
|
<p class="rl-subtext">
|
|
<strong style="color:#3b82f6">Create a Space</strong> for your community,
|
|
<strong style="color:#14b8a6">add tasks</strong> to your pipeline, and
|
|
<strong style="color:#e2e8f0">track progress</strong> together in real-time.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="rl-grid-3">
|
|
<div class="rl-card" style="border:2px solid rgba(59,130,246,0.4);background:linear-gradient(135deg,rgba(59,130,246,0.1),rgba(59,130,246,0.05))">
|
|
<div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.75rem">
|
|
<div style="height:2rem;width:2rem;border-radius:50%;background:#3b82f6;display:flex;align-items:center;justify-content:center">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 20a2 2 0 002-2V8a2 2 0 00-2-2h-7.9a2 2 0 01-1.69-.9L9.6 3.9A2 2 0 007.93 3H4a2 2 0 00-2 2v13a2 2 0 002 2h16z"/><rect x="8" y="10" width="8" height="6" rx="1"/></svg>
|
|
</div>
|
|
<h3 style="font-weight:700;font-size:1.125rem;color:#e2e8f0">1. Create a Space</h3>
|
|
</div>
|
|
<p style="font-size:0.875rem;color:#94a3b8;line-height:1.6">
|
|
Set up a workspace for your project or community. Configure your pipeline
|
|
statuses and invite members.
|
|
<strong style="color:#e2e8f0;display:block;margin-top:0.5rem">Each Space gets its own kanban board.</strong>
|
|
</p>
|
|
</div>
|
|
|
|
<div class="rl-card" style="border:2px solid rgba(20,184,166,0.4);background:linear-gradient(135deg,rgba(20,184,166,0.1),rgba(20,184,166,0.05))">
|
|
<div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.75rem">
|
|
<div style="height:2rem;width:2rem;border-radius:50%;background:#14b8a6;display:flex;align-items:center;justify-content:center">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>
|
|
</div>
|
|
<h3 style="font-weight:700;font-size:1.125rem;color:#e2e8f0">2. Add Tasks</h3>
|
|
</div>
|
|
<p style="font-size:0.875rem;color:#94a3b8;line-height:1.6">
|
|
Create tasks with descriptions, priorities, labels, and acceptance criteria.
|
|
Assign them to team members.
|
|
<strong style="color:#e2e8f0;display:block;margin-top:0.5rem">Tasks are stored as plain markdown files.</strong>
|
|
</p>
|
|
</div>
|
|
|
|
<div class="rl-card" style="border:2px solid rgba(100,116,139,0.4);background:linear-gradient(135deg,rgba(100,116,139,0.1),rgba(100,116,139,0.05))">
|
|
<div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.75rem">
|
|
<div style="height:2rem;width:2rem;border-radius:50%;background:#64748b;display:flex;align-items:center;justify-content:center">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
|
|
</div>
|
|
<h3 style="font-weight:700;font-size:1.125rem;color:#e2e8f0">3. Collaborate</h3>
|
|
</div>
|
|
<p style="font-size:0.875rem;color:#94a3b8;line-height:1.6">
|
|
Drag tasks through your pipeline in real-time. Everyone sees updates instantly
|
|
via WebSocket sync.
|
|
<strong style="color:#e2e8f0;display:block;margin-top:0.5rem">Work together, stay in sync.</strong>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Features Row 1 -->
|
|
<section class="rl-section">
|
|
<div class="rl-container">
|
|
<h2 class="rl-heading" style="text-align:center">Built for Community Collaboration</h2>
|
|
<p class="rl-subtext" style="text-align:center">Everything you need to coordinate shared work</p>
|
|
|
|
<div class="rl-grid-4">
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box" style="background:linear-gradient(135deg,#3b82f6,rgba(59,130,246,0.6))">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>
|
|
</div>
|
|
<h3>Kanban Boards</h3>
|
|
<p>Drag-and-drop tasks through customizable pipeline stages.</p>
|
|
</div>
|
|
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box" style="background:linear-gradient(135deg,#14b8a6,rgba(20,184,166,0.6))">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 00-4-4H6a4 4 0 00-4-4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 00-3-3.87"/><path d="M16 3.13a4 4 0 010 7.75"/></svg>
|
|
</div>
|
|
<h3>Team Spaces</h3>
|
|
<p>Create isolated workspaces with role-based access control.</p>
|
|
</div>
|
|
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box" style="background:linear-gradient(135deg,#22c55e,#059669)">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
|
|
</div>
|
|
<h3>Real-time Sync</h3>
|
|
<p>Changes appear instantly for all members via WebSocket.</p>
|
|
</div>
|
|
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box" style="background:linear-gradient(135deg,#f97316,#d97706)">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="6" y1="3" x2="6" y2="15"/><circle cx="18" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="M18 9a9 9 0 01-9 9"/></svg>
|
|
</div>
|
|
<h3>Markdown Native</h3>
|
|
<p>Tasks stored as plain .md files. Version-controllable, AI-friendly.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Features Row 2 -->
|
|
<div class="rl-grid-4" style="margin-top:1rem">
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box" style="background:linear-gradient(135deg,#a855f7,#7c3aed)">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 21V5a2 2 0 00-2-2h-4a2 2 0 00-2 2v16"/></svg>
|
|
</div>
|
|
<h3>Custom Pipelines</h3>
|
|
<p>Define your own workflow stages beyond To Do / In Progress / Done.</p>
|
|
</div>
|
|
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box" style="background:linear-gradient(135deg,#3b82f6,#0891b2)">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 01-3.46 0"/></svg>
|
|
</div>
|
|
<h3>Notifications</h3>
|
|
<p>Stay informed when tasks are assigned, updated, or completed.</p>
|
|
</div>
|
|
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box" style="background:linear-gradient(135deg,#f43f5e,#ec4899)">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 11-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
|
|
</div>
|
|
<h3>Acceptance Criteria</h3>
|
|
<p>Define checklists for what “done” means on each task.</p>
|
|
</div>
|
|
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box" style="background:linear-gradient(135deg,#14b8a6,#0891b2)">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z"/></svg>
|
|
</div>
|
|
<h3>rSpace Ecosystem</h3>
|
|
<p>Integrates with rVote, rMaps, rNotes, and the full r* suite.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CTA -->
|
|
<section class="rl-section rl-section--alt">
|
|
<div class="rl-container">
|
|
<div class="rl-card" style="border:2px solid rgba(59,130,246,0.3);background:linear-gradient(135deg,rgba(59,130,246,0.1),rgba(20,184,166,0.05),rgba(100,116,139,0.1));text-align:center;padding:3rem 1.5rem;position:relative;overflow:hidden">
|
|
<div style="position:absolute;top:0;right:0;width:16rem;height:16rem;background:rgba(59,130,246,0.1);border-radius:50%;filter:blur(48px)"></div>
|
|
<div style="position:absolute;bottom:0;left:0;width:16rem;height:16rem;background:rgba(20,184,166,0.1);border-radius:50%;filter:blur(48px)"></div>
|
|
<div style="position:relative">
|
|
<span class="rl-badge">Join the rSpace Ecosystem</span>
|
|
<h2 class="rl-heading" style="margin-top:1rem">Ready to collaborate?</h2>
|
|
<p class="rl-subtext" style="max-width:36rem;margin:0.5rem auto 0">
|
|
Create a Space for your community and start tracking tasks together.
|
|
Invite members, configure your pipeline, and ship faster as a team.
|
|
</p>
|
|
<div class="rl-cta-row" style="margin-top:1.5rem">
|
|
<a href="https://demo.rspace.online/rwork" class="rl-cta-primary">
|
|
Create a Space →
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="rl-back">
|
|
<a href="/">← Back to rSpace</a>
|
|
</div>`;
|
|
}
|