added first three mockups

features.md

@@ -0,0 +1,353 @@
+# 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` | `$10` |
+| 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 $___
+```