preview_sites/features.md

# Platform features

Catalog of public-site and client-portal capabilities for Django-based client apps.
Use this when scoping proposals and building UX mockups (monica_site-style hub with a card per screen).

**Stack:** Django · custom client portal (not Django admin as the primary UI) · Stripe · Ollama (local LLM)

**Pricing notes:** Build cost = one-time setup. Monthly = ongoing platform/addon fee. Amounts below are draft placeholders — replace before sending a client quote. Third-party usage (Stripe fees, SMS segments, postcard print/postage, email sends) is billed separately unless noted.

---

## Feature map

```text
Public site (base)
├── Landing
├── About
└── Contact

Client portal (base — every client)
├── Login / session
├── Dashboard
├── Leads / contacts (from public forms)
└── UTM tracking & analytics  ← included with every portal

Add-ons
├── Email & SMS
├── Direct mail
├── Blog
├── Payments (Stripe)          ← requires Email
├── Social consolidation       ← accounts, scheduling, automation
└── AI social generator        ← requires Social; uses Ollama
```

---

## Base (included)

### 1. Public site

What visitors see. Marketing surface for the business.

| Page | Purpose |
|------|---------|
| Landing / home | Brand-forward hero, services/offerings, primary CTA |
| About | Story, trust, team or credentials |
| Contact | Lead capture form → creates lead/contact in portal |

**System pages (recommended in mocks):** 404, under construction / pre-launch.

| | |
|--|--|
| **Build cost** | Included in base project |
| **Monthly** | Included in base hosting / platform fee |
| **Depends on** | — |

**UX mocks to build**

| Card label | File hint | Notes |
|------------|-----------|--------|
| Public · Landing | `public-home.html` | Hero, services, CTA |
| Public · About | `public-about.html` | Story + trust |
| Public · Contact | `public-contact.html` | Form, consent, success state |
| Public · 404 | `public-404.html` | Branded error |
| Public · Under construction | `public-under-construction.html` | Optional holding page |

---

### 2. Client portal + UTM tracking

Private UI the client logs into. Replaces day-to-day use of raw Django admin. **UTM tracking ships with every client portal** — not an add-on.

| Area | Purpose |
|------|---------|
| Login | Auth for the client user |
| Dashboard | Snapshot: new leads, recent activity, health of enabled add-ons |
| Lead inbox | List/filter leads from contact form and other sources |
| Lead detail | Notes, status, UTM attribution, linked contact |
| UTM analytics | Leads by source / medium / campaign over time |

| | |
|--|--|
| **Build cost** | Included in base project |
| **Monthly** | Included in base platform fee |
| **Depends on** | Public site (for lead capture) |

**UX mocks to build**

| Card label | File hint | Notes |
|------------|-----------|--------|
| Portal · Login | `portal-login.html` | Auth |
| Portal · Dashboard | `portal-dashboard.html` | Widgets; hide/show by enabled features |
| Portal · Lead inbox | `portal-leads.html` | Status, source, filters |
| Portal · Lead detail | `portal-lead-detail.html` | Notes + UTM |
| Portal · UTM analytics | `portal-analytics.html` | Charts by campaign/source |

---

## Add-ons

Each add-on: one-time build + monthly fee. Mock a screen set per feature. Pricing page should let someone toggle add-ons and see totals.

### 3. Email & SMS integration

Transactional and marketing email; SMS campaigns / notifications. Needed by Payments for invoice/payment emails.

| Capability | Notes |
|------------|--------|
| Contact / mailing list | Per-channel consent (email / SMS) |
| Campaign composer | Email or SMS; recipients, schedule, send |
| Engagement reporting | Opens, clicks, bounces, unsubscribes (email) |
| Opt-out / unsubscribe | Public one-click + preference page |

| | Draft |
|--|--------|
| **Build cost** | `$___` |
| **Monthly** | `$___` |
| **Depends on** | Client portal |
| **Required by** | Payments |

**UX mocks to build**

| Card label | File hint |
|------------|-----------|
| Portal · Mailing list | `portal-contacts.html` |
| Portal · Import contacts | `portal-contacts-import.html` |
| Portal · Campaign composer | `portal-campaign.html` |
| Portal · Email engagement | `portal-campaign-report.html` |
| Public · Unsubscribe | `public-unsubscribe.html` |

---

### 4. Direct mail integration

Physical mail (postcards / letters): design, recipient lists, print/send vendor handoff.

| Capability | Notes |
|------------|--------|
| Postcard / piece designer | Sizes, front/back preview, media library |
| Recipient selection | From contacts with postcard consent |
| Send / schedule | Vendor or API integration |

| | Draft |
|--|--------|
| **Build cost** | `$___` |
| **Monthly** | `$___` |
| **Depends on** | Client portal (mailing list / contacts recommended) |
| **Usage** | Print + postage pass-through |

**UX mocks to build**

| Card label | File hint |
|------------|-----------|
| Portal · Postcard designer | `portal-postcard-designer.html` |
| Portal · Direct mail campaign | `portal-direct-mail.html` (or fold into campaign composer) |

---

### 5. Blog

Public readers view posts; client manages posts in the portal.

| Surface | Pages |
|---------|--------|
| Public | Blog index, post detail |
| Portal | Post list, create/edit, publish / draft |

| | Draft |
|--|--------|
| **Build cost** | `$___` |
| **Monthly** | `$___` |
| **Depends on** | Public site + client portal |

**UX mocks to build**

| Card label | File hint |
|------------|-----------|
| Public · Blog index | `public-blog.html` |
| Public · Blog post | `public-blog-post.html` |
| Portal · Blog list | `portal-blog.html` |
| Portal · Blog editor | `portal-blog-edit.html` |

---

### 6. Payments (Stripe)

Client creates invoices; payer gets email with pay link; Stripe handles charge. **Requires Email & SMS add-on** for notifications.

| Capability | Notes |
|------------|--------|
| Create invoice | Amount, line items, customer email |
| Email notification | Pay link / receipt via email add-on |
| Payment status | Paid / open / past due in portal |
| Stripe Customer Portal / checkout | Hosted Stripe where appropriate |

| | Draft |
|--|--------|
| **Build cost** | `$___` |
| **Monthly** | `$___` |
| **Depends on** | **Email & SMS** (required), client portal |
| **Usage** | Stripe processing fees (separate) |

**UX mocks to build**

| Card label | File hint |
|------------|-----------|
| Portal · Invoices | `portal-invoices.html` |
| Portal · Create invoice | `portal-invoice-create.html` |
| Portal · Invoice detail | `portal-invoice-detail.html` |
| Public · Pay invoice | `public-pay.html` (Stripe checkout / confirmation states) |

---

### 7. Social media consolidation & automation

Connect accounts, compose once, schedule/publish across networks, monitor health.

| Capability | Notes |
|------------|--------|
| Connected accounts | OAuth connect / reconnect / disconnect |
| Composer + live previews | FB / IG / LinkedIn (as applicable) |
| Schedule & queue | Calendar / upcoming posts |
| Automation rules | Optional: recurring or trigger-based posts |

| | Draft |
|--|--------|
| **Build cost** | `$___` |
| **Monthly** | `$___` |
| **Depends on** | Client portal |
| **Required by** | AI social generator |

**UX mocks to build**

| Card label | File hint |
|------------|-----------|
| Portal · Social accounts | `portal-social-accounts.html` |
| Portal · Social composer / preview | `portal-social.html` |
| Portal · Social calendar | `portal-social-calendar.html` |

---

### 8. AI social media generator

Draft captions / post variants from prompts. Runs against **local LLM via Ollama**. Builds on social consolidation (compose → preview → schedule on connected accounts).

| Capability | Notes |
|------------|--------|
| Prompt → draft | Tone, length, hashtags, variants |
| Send to composer | Hand off into social preview / schedule flow |
| Model note in UI | “Generated via local AI” (Ollama) — no cloud LLM required |

| | Draft |
|--|--------|
| **Build cost** | `$___` |
| **Monthly** | `$___` |
| **Depends on** | **Social media consolidation** (required), Ollama available on host |

**UX mocks to build**

| Card label | File hint |
|------------|-----------|
| Portal · AI social generator | `portal-social-ai.html` (chat assist + insert into composer) |

---

## Pricing summary (draft)

Fill amounts before client-facing use. Interactive proposal pricing page should sum **selected** rows.

| Feature | Type | Build (one-time) | Monthly |
|---------|------|------------------|---------|
| Public site | Base | `$300` | `$30` |
| Client portal + UTM | Base | `$300` | `$30` |
| Email & SMS | Add-on | `$500` | `$10` |
| Direct mail | Add-on | `$500` | `$5` |
| Blog | Add-on | `$500` | `$10` |
| Payments (Stripe) | Add-on | `$500` | `$20` |
| Social consolidation | Add-on | `$500` | `$20` |
| AI social generator | Add-on | `$300` | `$20` |
| **Selected add-ons** | | sum | sum |
| **Grand total** | | build + add-ons | monthly + add-ons |

**Dependency rules for the pricing picker**

1. Selecting **Payments** auto-selects (or requires) **Email & SMS**.
2. Selecting **AI social generator** auto-selects (or requires) **Social consolidation**.
3. Base public site + portal + UTM always on (not toggleable off).

---

## UX gallery structure

Mirror [monica_site proposal UX hub](https://git.aimloperations.com/ai_ml_operations/monica_site/src/branch/main/proposal/pages/index.html): one hub `index.html` with cards grouped by feature, each card linking a click-through mock.

Suggested hub sections (eyebrows on cards):

| Section | Eyebrow pattern |
|---------|-----------------|
| Public site | `Public · base` |
| Client portal + UTM | `Portal · base` |
| Email & SMS | `Portal · Email/SMS` / `Public · Email/SMS` |
| Direct mail | `Portal · Direct mail` |
| Blog | `Public · Blog` / `Portal · Blog` |
| Payments | `Portal · Payments` / `Public · Payments` |
| Social | `Portal · Social` |
| AI social | `Portal · AI Social` |
| Proposal meta | `Proposal · Pricing` |

### Proposal / sales mocks

| Card label | File hint | Notes |
|------------|-----------|--------|
| Proposal · Feature pricing | `pricing.html` | Interactive checklist: toggle add-ons, enforce deps, live total (build + monthly) |

**Pricing page behavior (mock)**

- Always show base package line (public + portal + UTM).
- Checkboxes for each add-on with build + monthly next to label.
- Disable or auto-check dependent features with short helper text (“Requires Email & SMS”).
- Sticky or summary panel: one-time total · monthly total.
- Optional: “usage not included” disclaimer for Stripe / SMS / postage.

---

## Mockup checklist (by feature)

Use when expanding a client `proposals/<client>/mockup/` or a reusable template.

- [ ] **Public:** home, about, contact (+ 404 / under construction as needed)
- [ ] **Portal base:** login, dashboard, leads, lead detail, UTM analytics
- [ ] **Email & SMS:** contacts, import, campaign, report, public unsubscribe
- [ ] **Direct mail:** designer (+ campaign if separate)
- [ ] **Blog:** public index + post; portal list + editor
- [ ] **Payments:** invoice list/create/detail; public pay
- [ ] **Social:** accounts, composer/preview, calendar
- [ ] **AI social:** generator → composer handoff
- [ ] **Hub:** `index.html` card gallery broken out by feature
- [ ] **Pricing:** interactive feature picker

---

## Per-proposal layout reminder

```text
proposals/<client-name>/
├── mockup/          # static UX screens + hub index
│   ├── index.html   # feature card gallery
│   ├── pricing.html
│   ├── public-*.html
│   ├── portal-*.html
│   └── ...
└── proposal/        # written estimate; copy numbers from this file after filling $___
```