added first three mockups
This commit is contained in:
@@ -0,0 +1,138 @@
|
||||
# Preview Sites — Agent Rule
|
||||
|
||||
How to create client preview websites in this repo. Follow this every time you scaffold or expand a proposal.
|
||||
|
||||
**Canonical feature + pricing catalog:** [`features.md`](features.md)
|
||||
**Human overview:** [`README.md`](README.md)
|
||||
|
||||
---
|
||||
|
||||
## Goal
|
||||
|
||||
Ship a **portable static mockup** that sells the Django product: public marketing site + client portal (with UTM) + optional monetized add-ons. Prospects click through screens and pick features on a pricing page.
|
||||
|
||||
Do **not** invent new product features or prices. Read `features.md` and use those names, deps, and dollar amounts.
|
||||
|
||||
---
|
||||
|
||||
## Hard rules
|
||||
|
||||
1. **Static only** — HTML/CSS/JS; relative asset paths; no backend required to view.
|
||||
2. **No secrets** — no API keys, passwords, real customer PII, or live credentials.
|
||||
3. **Concept labeled** — fixed “UX Concept Preview” (or proposal) banner on public pages; link to `ux-gallery.html` + `pricing.html`.
|
||||
4. **Kebab-case folders** — `proposals/<client-name>/` (e.g. `eds-plumbing-and-sewer`).
|
||||
5. **Templates stay generic** — no client names/branding in `templates/`.
|
||||
6. **Monetization from catalog** — build + monthly fees and dependency rules come from `features.md` only.
|
||||
7. **UTM is base** — every portal includes UTM; never sell it as a separate add-on.
|
||||
8. **Deps** — Payments requires Email & SMS; AI social requires Social consolidation (auto-select / block on pricing page).
|
||||
9. **Vendor credit in footer** — every preview page footer (marketing, portal, gallery, pricing) must include:
|
||||
`Made by [AI ML Operations, LLC](https://aimloperations.com)`
|
||||
HTML form:
|
||||
```html
|
||||
Made by <a href="https://aimloperations.com" rel="noopener noreferrer" target="_blank">AI ML Operations, LLC</a>
|
||||
```
|
||||
Link the company name only. Do not omit on new pages.
|
||||
|
||||
---
|
||||
|
||||
## Product shape (from features.md)
|
||||
|
||||
```text
|
||||
BASE (always on)
|
||||
Public: Landing · About · Contact (+ 404 / under construction as needed)
|
||||
Portal: Login · Dashboard · Leads · Lead detail · UTM analytics
|
||||
|
||||
ADD-ONS (build $ + monthly $)
|
||||
Email & SMS · Direct mail · Blog · Payments (Stripe)
|
||||
Social consolidation · AI social generator (Ollama)
|
||||
```
|
||||
|
||||
Pricing amounts, screen file hints, and checklists: **open `features.md`** — do not hardcode stale numbers in this rule if they drift; copy from the catalog when writing `SCOPE.md` / `pricing.html`.
|
||||
|
||||
---
|
||||
|
||||
## New client checklist
|
||||
|
||||
```text
|
||||
proposals/<client-name>/
|
||||
├── mockup/
|
||||
│ ├── index.html # marketing entry (or public-home.html)
|
||||
│ ├── ux-gallery.html # REQUIRED — card per screen, grouped by feature
|
||||
│ ├── pricing.html # REQUIRED — interactive picker + live totals
|
||||
│ ├── ux-planned.html # stubs for screens not designed yet
|
||||
│ ├── assets/css/ux-hub.css # gallery/pricing styles (copy from an existing proposal)
|
||||
│ └── …public & portal pages
|
||||
└── proposal/
|
||||
├── NOTES.md # client facts, sources, contact data status
|
||||
└── SCOPE.md # recommended features + quote math from features.md
|
||||
```
|
||||
|
||||
### Steps
|
||||
|
||||
1. Create folders above.
|
||||
2. Copy closest `templates/<name>/` into `mockup/` (omit template docs/junk).
|
||||
3. Brand the **public** site (copy, colors, logo, services, contact). Prefer real approved data; mark placeholders clearly.
|
||||
4. Add **ux-gallery.html** — monica-style hub: eyebrow per feature (`Public · base`, `Portal · base`, `Portal · Email/SMS`, …). Ready screens link to real HTML; unfinished → `ux-planned.html?p=<key>`.
|
||||
5. Add **pricing.html** — base rows locked on; add-ons toggleable; enforce deps; show one-time + monthly totals; disclaimer that usage (Stripe/SMS/postage) is extra.
|
||||
6. Write **SCOPE.md** — recommend add-ons for *this* business; compute totals from `features.md` prices.
|
||||
7. Write **NOTES.md** — client identity, sources, sitemap, preview reminder, next passes.
|
||||
8. Banner on marketing pages → gallery + pricing links.
|
||||
9. Smoke-test locally as static files.
|
||||
|
||||
### Reuse
|
||||
|
||||
Copy gallery/pricing/stub patterns from:
|
||||
|
||||
- `proposals/eds-plumbing-and-sewer/mockup/`
|
||||
- `proposals/paint-to-please/mockup/`
|
||||
|
||||
---
|
||||
|
||||
## UX gallery conventions
|
||||
|
||||
| Do | Don't |
|
||||
|----|--------|
|
||||
| One card per screen | Dump all content on one mega-page |
|
||||
| Group by feature section | Mix portal + public without labels |
|
||||
| Mark Ready vs Planned | Leave dead links |
|
||||
| Keep marketing `index.html` working | Replace marketing home with only the hub without a link back |
|
||||
|
||||
Reference pattern: [monica_site proposal hub](https://git.aimloperations.com/ai_ml_operations/monica_site/src/branch/main/proposal/pages/index.html).
|
||||
|
||||
---
|
||||
|
||||
## Pricing page conventions
|
||||
|
||||
- Always show **Public site** + **Client portal + UTM** (checked, disabled).
|
||||
- Checkboxes for each add-on with **build** and **/mo** from `features.md`.
|
||||
- Selecting Payments → auto-check Email & SMS (+ short helper text).
|
||||
- Selecting AI social → auto-check Social (+ helper text).
|
||||
- Unchecking a required parent → uncheck dependent child.
|
||||
- Sticky summary: one-time total · monthly total · feature count.
|
||||
- Label as draft estimate, not a formal contract.
|
||||
|
||||
---
|
||||
|
||||
## Design (public marketing)
|
||||
|
||||
When building/tailoring the public site (not the portal chrome):
|
||||
|
||||
- Brand-first first viewport; one composition; full-bleed hero when it’s a landing.
|
||||
- Expressive type — avoid Inter/Roboto/Arial/system as the only voice.
|
||||
- Atmosphere via image/gradient/pattern — not flat single-color only.
|
||||
- Prefer no cards in the hero; one job per section.
|
||||
- Mobile + desktop must both work.
|
||||
- If extending an existing template look, **preserve that template’s visual language**.
|
||||
|
||||
Portal mocks can be denser/app-like; still match proposal hub styling (`ux-hub.css`).
|
||||
|
||||
---
|
||||
|
||||
## Done means
|
||||
|
||||
- [ ] `NOTES.md` + `SCOPE.md` exist and match `features.md` pricing
|
||||
- [ ] `ux-gallery.html` covers base + every add-on screen (ready or planned)
|
||||
- [ ] `pricing.html` totals correct; deps work
|
||||
- [ ] Public marketing is client-branded and concept-bannered
|
||||
- [ ] Footer credit: Made by [AI ML Operations, LLC](https://aimloperations.com)
|
||||
- [ ] No secrets committed; relative paths; opens without a server framework
|
||||
Reference in New Issue
Block a user