rspace-online/modules/notes/landing.ts

/**
 * Notes module landing page — static HTML, no React.
 */
export function renderLanding(): string {
	return `
<!-- Hero -->
<div class="rl-hero">
  <span class="rl-tagline">rNotes</span>
  <h1 class="rl-heading" style="background:linear-gradient(135deg,#f59e0b,#f97316);-webkit-background-clip:text;background-clip:text">(You)rNotes, your thoughts unbound.</h1>
  <p class="rl-subtitle" style="background:linear-gradient(135deg,#f59e0b,#f97316);-webkit-background-clip:text;background-clip:text">Capture Everything, Find Anything, and Share your Insights</p>
  <p class="rl-subtext">
    Notes, clips, voice recordings, and live transcription &mdash; all in one place.
    Speak and watch your words appear in real time, or drop in audio and video files to transcribe offline.
  </p>
  <div class="rl-cta-row">
    <a href="https://demo.rspace.online/rnotes" class="rl-cta-primary" id="ml-primary">Open Notebook</a>
    <a href="/create-space" class="rl-cta-secondary">Create a Space</a>
  </div>
</div>

<!-- Features -->
<section class="rl-section">
  <div class="rl-container">
    <h2 class="rl-heading" style="text-align:center">What rNotes Handles</h2>
    <div class="rl-grid-3">
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box">&#128221;</div>
        <h3>Rich Text Notes</h3>
        <p>Write with a full TipTap editor &mdash; formatting, code blocks, checklists, and embeds. Dual-format storage keeps Markdown portable.</p>
      </div>
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box">&#127908;</div>
        <h3>Voice &amp; Transcription</h3>
        <p>Record voice notes with live transcription via Web Speech API. Drop in audio or video files and get full transcripts &mdash; all in the browser.</p>
      </div>
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box">&#127991;</div>
        <h3>Tagging &amp; Organization</h3>
        <p>Tag freely, organize into notebooks, and search everything. Filtered views surface the right cards at the right time.</p>
      </div>
    </div>
  </div>
</section>

<!-- How It Works -->
<section class="rl-section rl-section--alt">
  <div class="rl-container">
    <h2 class="rl-heading" style="text-align:center">How It Works</h2>
    <div class="rl-grid-3">
      <div class="rl-step">
        <div class="rl-step__num">1</div>
        <h3>Create a Notebook</h3>
        <p>Name your notebook and start capturing. Organize by project, topic, or however you think.</p>
      </div>
      <div class="rl-step">
        <div class="rl-step__num">2</div>
        <h3>Capture Notes, Voice, or Clips</h3>
        <p>Type rich text, record voice with live transcription, or drop in audio and video files to transcribe offline.</p>
      </div>
      <div class="rl-step">
        <div class="rl-step__num">3</div>
        <h3>Search, Tag, and Share</h3>
        <p>Find anything instantly with full-text search. Tag and filter your cards, then share notebooks with your team.</p>
      </div>
    </div>
  </div>
</section>

<!-- Memory Cards -->
<section class="rl-section">
  <div class="rl-container">
    <h2 class="rl-heading" style="text-align:center">Memory Cards</h2>
    <p class="rl-subtext" style="text-align:center">
      Every note is a Memory Card &mdash; a typed, structured unit of knowledge with hierarchy,
      properties, and attachments. Designed for round-trip interoperability with Logseq.
    </p>
    <div class="rl-grid-3">
      <!-- 7 Card Types -->
      <div class="rl-card">
        <div class="rl-icon-box">&#127991;</div>
        <h3>7 Card Types</h3>
        <div style="display:flex;flex-wrap:wrap;gap:0.35rem;margin-bottom:0.75rem">
          <span class="rl-badge" style="background:rgba(245,158,11,0.2);color:#f59e0b">note</span>
          <span class="rl-badge" style="background:rgba(59,130,246,0.2);color:#3b82f6">link</span>
          <span class="rl-badge" style="background:rgba(34,197,94,0.2);color:#22c55e">task</span>
          <span class="rl-badge" style="background:rgba(234,179,8,0.2);color:#eab308">idea</span>
          <span class="rl-badge" style="background:rgba(168,85,247,0.2);color:#a855f7">person</span>
          <span class="rl-badge" style="background:rgba(236,72,153,0.2);color:#ec4899">reference</span>
          <span class="rl-badge" style="background:rgba(100,116,139,0.2);color:#94a3b8">file</span>
        </div>
        <p>Each card type has distinct styling and behavior. Typed notes surface in filtered views and canvas visualizations.</p>
      </div>

      <!-- Hierarchy & Properties -->
      <div class="rl-card">
        <div class="rl-icon-box">&#128194;</div>
        <h3>Hierarchy &amp; Properties</h3>
        <p>
          Nest cards under parents to build knowledge trees. Add structured
          <code style="font-size:0.8rem;color:rgba(245,158,11,0.8)">key:: value</code>
          properties &mdash; compatible with Logseq's property syntax.
        </p>
        <div style="margin-top:0.5rem;font-family:monospace;font-size:0.75rem;color:#64748b;line-height:1.7">
          <div><span style="color:#94a3b8">type::</span> idea</div>
          <div><span style="color:#94a3b8">status::</span> doing</div>
          <div><span style="color:#94a3b8">tags::</span> #research, #web3</div>
        </div>
      </div>

      <!-- Logseq Import/Export -->
      <div class="rl-card">
        <div class="rl-icon-box">&#128260;</div>
        <h3>Logseq Import &amp; Export</h3>
        <p>
          Export your notebooks as Logseq-compatible ZIP archives. Import a Logseq graph and keep your pages,
          properties, tags, and hierarchy intact.
        </p>
        <p style="font-size:0.75rem;color:#64748b;margin-top:0.5rem">
          Round-trip fidelity: card types, tags, attachments, and parent-child structure all survive the journey.
        </p>
      </div>

      <!-- Dual Format Storage -->
      <div class="rl-card">
        <div class="rl-icon-box">&#128196;</div>
        <h3>Dual Format Storage</h3>
        <p>
          Every card stores rich TipTap JSON for editing and portable Markdown for search, export, and interoperability.
          Write once, read anywhere.
        </p>
      </div>

      <!-- Structured Attachments -->
      <div class="rl-card">
        <div class="rl-icon-box">&#128206;</div>
        <h3>Structured Attachments</h3>
        <p>
          Attach images, PDFs, audio, and files to any card with roles (primary, preview, supporting) and captions.
          Thumbnails render inline.
        </p>
      </div>

      <!-- FUN Model -->
      <div class="rl-card">
        <div class="rl-icon-box">&#10084;</div>
        <h3>FUN, Not CRUD</h3>
        <p>
          <span style="color:#f59e0b;font-weight:600">F</span>orget,
          <span style="color:#f59e0b;font-weight:600">U</span>pdate,
          <span style="color:#f59e0b;font-weight:600">N</span>ew &mdash;
          nothing is permanently destroyed. Forgotten cards are archived and can be remembered at any time.
        </p>
      </div>
    </div>
  </div>
</section>

<!-- Built on Open Source -->
<section class="rl-section rl-section--alt">
  <div class="rl-container">
    <h2 class="rl-heading" style="text-align:center">Built on Open Source</h2>
    <p class="rl-subtext" style="text-align:center">The libraries and tools that power rNotes.</p>
    <div class="rl-grid-3">
      <div class="rl-card rl-card--center">
        <h3>PostgreSQL</h3>
        <p>Notebooks, notes, and tags stored in a battle-tested relational database with full-text search.</p>
      </div>
      <div class="rl-card rl-card--center">
        <h3>Web Speech API</h3>
        <p>Browser-native live transcription &mdash; speak and watch your words appear in real time.</p>
      </div>
      <div class="rl-card rl-card--center">
        <h3>Hono</h3>
        <p>Ultra-fast, lightweight API framework powering the rNotes backend.</p>
      </div>
    </div>
  </div>
</section>

<!-- Your Data, Protected -->
<section class="rl-section">
  <div class="rl-container" style="text-align:center">
    <h2 class="rl-heading">Your Data, Protected</h2>
    <p class="rl-subtext">How rNotes keeps your information safe.</p>
    <div class="rl-grid-3">
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box">&#128274;</div>
        <h3>End-to-End Encryption</h3>
        <span class="rl-badge">Coming Soon</span>
        <p>All content encrypted before it leaves your device. Not even the server can read it.</p>
      </div>
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box">&#128373;</div>
        <h3>Zero-Knowledge Architecture</h3>
        <span class="rl-badge">Coming Soon</span>
        <p>The server processes your requests without ever seeing your data in the clear.</p>
      </div>
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box">&#127968;</div>
        <h3>Self-Hosted</h3>
        <p>Run on your own infrastructure. Your server, your rules, your data.</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">(You)rNotes, your thoughts unbound.</h2>
    <p class="rl-subtext">Try the demo or create a space to get started.</p>
    <div class="rl-cta-row">
      <a href="https://demo.rspace.online/rnotes" class="rl-cta-primary">Open Notebook</a>
      <a href="/create-space" class="rl-cta-secondary">Create a Space</a>
    </div>
  </div>
</section>

<div class="rl-back">
  <a href="/">&larr; Back to rSpace</a>
</div>
`;
}