# PAI Presentation Website

Your Personal AI Infrastructure presentation layer — every deliverable, report, and analysis PAI produces gets shown here, beautifully formatted in CLdN-inspired branding.

---

## How to Open the Site

### Option A — Direct file open (simplest)
```
open ~/pai-website/index.html
```
Or drag `index.html` into any browser. Works immediately, no server needed.

### Option B — Bun server (recommended — enables Chat)
```bash
cd ~/pai-website
bun run server.ts
```
Then visit: **http://localhost:8080**

The Chat page requires this server. Other pages work without it.

Press `Ctrl+C` to stop the server.

---

## How to Add a New Deliverable

**Step 1 — Create the page:**
```bash
cp ~/pai-website/template.html ~/pai-website/deliverables/my-new-deliverable.html
```

**Step 2 — Edit the new file:**
Open `deliverables/my-new-deliverable.html` and update:
- `<title>` and `<meta name="description">`
- The breadcrumb `<span class="breadcrumb-current">` text
- The badge class (see badge types below)
- The `<h1 class="page-title">` title
- The `<div class="page-meta">` date and type
- The content inside `<div class="content-layout">`

**Step 3 — Add a card to index.html:**
Open `index.html`, find the `<div class="card-grid">` section, and add:

```html
<article class="card">
  <div class="card-body">
    <span class="card-badge BADGE_TYPE">BADGE_LABEL</span>
    <h3 class="card-title">Your Deliverable Title</h3>
    <div class="card-meta">
      <span>March 21, 2026</span>
      <span class="card-meta-sep">·</span>
      <span>Topic Area</span>
    </div>
    <p class="card-description">
      One or two sentences describing what this deliverable is about.
    </p>
  </div>
  <div class="card-footer">
    <a href="deliverables/my-new-deliverable.html" class="card-link">View Deliverable</a>
  </div>
</article>
```

---

## Badge Types

Use these CSS classes on `<span class="card-badge TYPE">`:

| Class       | Color  | Use for                                    |
|-------------|--------|--------------------------------------------|
| `research`  | Blue   | Research reports, brand analysis, findings |
| `plan`      | Purple | Architecture, plans, strategies            |
| `report`    | Gold   | Regular reports, summaries, briefings      |
| `code`      | Green  | Code output, technical implementations     |
| `analysis`  | Teal   | Data analysis, metrics, evaluations        |
| `template`  | Gray   | Templates, guides, documentation           |

---

## Content Types in Deliverable Pages

All content goes inside `<div class="content-layout">`:

| Element         | HTML                              | Use for                        |
|-----------------|-----------------------------------|--------------------------------|
| Paragraph       | `<p>`                             | Body text                      |
| Section heading | `<h2>`                            | Major sections                 |
| Sub-heading     | `<h3>`                            | Sub-sections                   |
| Callout         | `<blockquote>`                    | Key insights, pull quotes      |
| Table           | `<table>` + `<thead>/<tbody>`     | Structured data                |
| Code block      | `<pre><code>`                     | Multi-line code                |
| Inline code     | `<code>`                          | File names, variables, etc.    |
| Divider         | `<hr class="divider">`            | Visual section break           |
| Bullet list     | `<ul><li>`                        | Unordered items                |
| Numbered list   | `<ol><li>`                        | Steps, rankings                |

---

## Design System Reference

```css
/* Colors */
--color-navy:     #1B3F6E   /* Headers, nav, footer */
--color-gold:     #C9A227   /* Accents, CTAs, badges */
--color-charcoal: #2D3748   /* Body text */
--color-bg:       #F7F9FC   /* Page background */

/* Fonts */
--font-heading: 'Raleway'   /* All headings */
--font-body:    'Inter'     /* All body text */

/* Spacing base: 8px system */
```

---

## File Structure

```
~/pai-website/
├── index.html               ← Deliverables dashboard
├── chat.html                ← Chat with Lucy (AI assistant)
├── server.ts               ← Bun HTTP server (static + chat API)
├── template.html            ← Copy this for new deliverables
├── style.css                ← Full design system
├── README.md                ← This file
└── deliverables/
    ├── sample-research.html ← Example: CLdN Brand Analysis
    └── [your files here]
```