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" style="color:#f59e0b;background:rgba(245,158,11,0.1);border-color:rgba(245,158,11,0.2)">rNotes</span>
  <h1 class="rl-heading" style="background:linear-gradient(135deg,#f59e0b,#f97316);-webkit-background-clip:text;background-clip:text">
    Capture Everything, Find Anything, and Share your Insights
  </h1>
  <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.
    (You)rNotes, your thoughts unbound.
  </p>
  <div class="rl-cta-row">
    <a href="https://demo.rspace.online/rnotes" class="rl-cta-primary" id="ml-primary"
       style="background:linear-gradient(135deg,#f59e0b,#d97706)">Open Notebook</a>
    <a href="https://demo.rspace.online/rnotes" class="rl-cta-secondary"
       style="border-color:rgba(34,197,94,0.3);color:#4ade80">Unlock Article</a>
    <a href="https://demo.rspace.online/rnotes" class="rl-cta-secondary"
       style="border-color:rgba(139,92,246,0.3);color:#a78bfa">Transcribe</a>
  </div>
</div>

<!-- How it works -->
<section class="rl-section">
  <div class="rl-container">
    <h2 class="rl-heading" style="text-align:center;background:linear-gradient(135deg,#f59e0b,#f97316);-webkit-background-clip:text;background-clip:text">How It Works</h2>
    <div class="rl-grid-4">
      <div class="rl-step">
        <div class="rl-step__num" style="background:rgba(245,158,11,0.1);color:#f59e0b">1</div>
        <h3>Live Transcribe</h3>
        <p>Speak and watch your words appear in real time. WebSocket streaming with live timestamps.</p>
      </div>
      <div class="rl-step">
        <div class="rl-step__num" style="background:rgba(245,158,11,0.1);color:#f59e0b">2</div>
        <h3>Audio &amp; Video</h3>
        <p>Drop in audio or video files and get a full transcript. Powered by NVIDIA Parakeet &mdash; runs entirely in your browser.</p>
      </div>
      <div class="rl-step">
        <div class="rl-step__num" style="background:rgba(245,158,11,0.1);color:#f59e0b">3</div>
        <h3>Notebooks &amp; Tags</h3>
        <p>Organize transcripts into notebooks alongside notes, clips, code, and files. Tag freely, search everything.</p>
      </div>
      <div class="rl-step">
        <div class="rl-step__num" style="background:rgba(245,158,11,0.1);color:#f59e0b">4</div>
        <h3>Private &amp; Offline</h3>
        <p>Parakeet.js runs entirely in the browser. Your audio never leaves your device &mdash; full offline support.</p>
      </div>
    </div>
  </div>
</section>

<!-- Memory Cards -->
<section class="rl-section rl-section--alt">
  <div class="rl-container">
    <h2 class="rl-heading" style="text-align:center;background:linear-gradient(135deg,#f59e0b,#f97316);-webkit-background-clip:text;background-clip:text">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" style="background:rgba(245,158,11,0.12);color:#f59e0b">
          <svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
          </svg>
        </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" style="background:rgba(245,158,11,0.12);color:#f59e0b">
          <svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 10h16M4 14h16M4 18h16" />
          </svg>
        </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" style="background:rgba(245,158,11,0.12);color:#f59e0b">
          <svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" />
          </svg>
        </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" style="background:rgba(245,158,11,0.12);color:#f59e0b">
          <svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
          </svg>
        </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" style="background:rgba(245,158,11,0.12);color:#f59e0b">
          <svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" />
          </svg>
        </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" style="background:rgba(245,158,11,0.12);color:#f59e0b">
          <svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
          </svg>
        </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>

<!-- CTA -->
<section class="rl-section">
  <div class="rl-container" style="text-align:center">
    <h2 class="rl-heading" style="background:linear-gradient(135deg,#f59e0b,#f97316);-webkit-background-clip:text;background-clip:text">Start capturing</h2>
    <p class="rl-subtext">Notes, voice, clips, and code &mdash; all in one notebook.</p>
    <div class="rl-cta-row">
      <a href="https://demo.rspace.online/rnotes" class="rl-cta-primary"
         style="background:linear-gradient(135deg,#f59e0b,#d97706)">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>
`;
}