# Hemi Wireframes (Textual Spec)
_Last updated: 2026-03-08_

> Lightweight written wireframes so dev can start immediately. Replace with Figma screens later.

## 1. Landing Page Flow

### 1.1 Navigation Bar
- Left: Hemi wordmark (red).
- Center: anchors (Product, Tech, Roadmap, Docs).
- Right: `Launch App` pill button (red fill, white text) + `Connect Wallet` ghost button.
- Background: translucent black (#070707, 80% opacity) with blur when scrolling.

### 1.2 Hero Section
```
[ Background ]: Animated red particles drifting diagonally.
[ Left Column ]
  H1: "Hemi ignites Solana privacy and intelligence."
  Subtext (max 2 sentences).
  Primary CTA: Launch App (solid red).
  Secondary CTA: Read Docs (outline white).
  Mini badges row: "Solana", "zk-powered", "AI-native".
[ Right Column ]
  3D render placeholder (rotating black chip with red neon ring).
```

### 1.3 Utility Triptych
- Three equal-width cards.
- Icon circle (line icon, red stroke), title, 2-line description, "Explore" arrow link.
- Cards hover with red glow.

### 1.4 Tech Diagram Section
- Two-column layout.
- Left: copy describing data flow (wallet → analytics → AI → zk rail).
- Right: schematic diagram (boxes + arrows) showing pipeline.

### 1.5 Roadmap Timeline
- Horizontal timeline with three milestones (T0 Launch, T1 zk upgrades, T2 cross-program automations).
- Each milestone card includes date placeholder + bullet list.

### 1.6 FAQ
- Accordion list on dark surface.
- Example questions: Fees, Supported wallets, Compliance, Audits.

### 1.7 Footer
- Links: Docs, GitHub, Discord, X.
- Small print: "© 2026 Hemi Labs."

## 2. Dashboard Flow

### 2.1 Shell
- Persistent left sidebar (72px) with icons (Overview, Transfers, AI, Settings).
- Top bar: wallet status, notifications, profile menu.

### 2.2 Overview Screen
```
[Top Row]
  Card A: Portfolio value (line chart mini sparkline + 24H change).
  Card B: Staking overview (APR, rewards).
  Card C: Alerts summary (count of triggers).

[Middle Row]
  Half-width module: Holdings table (token, amount, USD, trend, actions).
  Half-width module: Transactions feed (public + private entries; private entries show "Shielded" label and reveal button).

[Right Dock]
  AI Chat Panel (collapsible):
    - Message list with alternating bubble colors.
    - Suggested prompts chips ("Explain last transfer", "Set private payment").
    - Input field with send + quick attach buttons.
```

### 2.3 Transfers Screen
- Stepper UI (1. Choose recipient, 2. Amount, 3. Privacy level, 4. Review & Sign).
- Toggle between "Public" and "Shielded" flows.
- Receipt card with shareable view key.

### 2.4 Settings
- Tabs: Wallets, Notifications, Privacy, API Keys.
- Privacy tab includes toggle for "Require view key confirmation".

## 3. dApp Utility Screen

### 3.1 Layout
- Split view: left 2/3 for transfer composer, right 1/3 for AI assistant.
- Composer includes: Asset selector, Amount input, Fee estimate, Privacy intensity slider (Low → Max).
- AI panel can insert transaction templates back into composer.

### 3.2 Confirmation Modal
- Dark overlay with summary (recipient, amount, zk provider). Include "Copy proof hash" button.

### 3.3 Success State
- Animated checkmark + text "Transfer shielded".
- Buttons: `Share View Key`, `Start Another`, `Export Receipt`.

---
These specs unblock immediate component development while visual design evolves.