Website: educate users with docs and product diagrams

[daopunk]

Summary

Ship a client-facing educational website that explains how Sigstack works — with clear copy and graphs/diagrams — before (and independent of) checkout.

Parent commercial surface: #13. This issue is the first slice of that site: teach the product suite. Defer Stripe, subscriptions, and payments until the explainers are solid.

Product suite to document (post-#21):

1. Language Threads — primary bridging model (multilingual main + N language sidecars)
2. In-chat translation — same-group auto / quote translate (secondary)
3. Voice transcription — speech → text in Signal

Related UX framing: #22 (menus promote Language Threads). Umbrella: #10.

Design system

Use the Bread Cooperative design system as the visual / UI source of truth for this site (foundations, components, Figma + AI setup). Do not invent a one-off Sigstack visual language — follow Bread DS tokens, components, and golden rules, and extend that repo if Sigstack needs app-specific patterns.

Why

Repo docs (docs/language-threads.md, docs/in-chat-translation.md, docs/voice-transcription.md, docs/two-cvm-architecture.md) are operator/dev oriented. Organizers need a plain-language front door that answers:

• What is this?
• Which mode do I want?
• How do messages flow between groups / in-thread?
• What do I type in Signal to get started?

Diagrams matter more than long prose for Language Threads (main ↔ sidecars fan-out is hard to picture from commands alone).

Scope (education only)

Site content

• Landing / overview: what Sigstack is (TEE-hosted Signal bots for transcription + translation — not a general chat assistant)
• Product pages (or one scrollable explainer) for the three offerings above
• Clear “choose your path” guidance: prefer Language Threads for multilingual groups; use in-chat when you want translations in the same thread; pair transcription with either
• Step-by-step setup for each product (Signal commands users actually run)
• Privacy / trust primer at a high level (TEE, what leaves the box) — link deeper docs later if needed
• Align naming/copy with #21 / #22 (no Parallel as a separate product)
• Implement UI against bread-design-system (and Figma DS linked from that repo)

Graphs / diagrams

• Language Threads: main multilingual hub + N sidecars; arrows for main→sidecar (relay/translate), sidecar→main (relay raw), sidecar→sidecar (translate)
• In-chat: single group; human message → bot quote-reply translation
• Transcription: voice note → transcript in-group (and optional handoff to translation when both bots are present)
• Optional: simple dual-bot / two-CVM picture for “why two numbers in the group” — keep non-technical

Prefer one clear diagram per product over dense architecture charts. Export-friendly (SVG/PNG) so the same art can later reuse on #13 checkout pages. Diagram styling should stay consistent with Bread DS.

Source of truth

• Draft from existing product docs; keep website copy in sync when bot behavior changes
• Scrub Parallel from any public explainer once #21 lands

Out of scope

• Stripe, pricing, a-la-carte / all-access checkout, subscription management — stay on #13
• Bot command menu implementation — #22
• Phala deploy / CVM ops
• Changing relay or transcription behavior

Success criteria

• A new organizer can understand Language Threads vs in-chat from the site without reading the repo
• Each product has at least one diagram that matches live behavior
• Site UI follows bread-design-system
• No payment / Stripe UI required to ship this slice
• #13 can later reuse the same pages/diagrams for commerce

Related

• #13 — full website + Stripe (payments later)
• #21 — Parallel → Language Threads
• #22 — flatten translation menus / promote Language Threads
• #10 — umbrella
• Bread Cooperative design system — UI foundations / components