# Preview Sites

Repository for quickly building tailored UI mockups and proposals for prospective
clients. Reusable starter designs live in `templates/`. Client-specific work lives
in `proposals/`.

## Agent / creation rules

See [`RULE.md`](RULE.md) for the step-by-step workflow to create a client preview
(gallery, pricing picker, scope docs, hard constraints). Cursor also loads
`.cursor/rules/preview-sites.mdc` on every session.

## Platform features

See [`features.md`](features.md) for the product catalog: public site, client
portal + UTM (base), and add-ons (email/SMS, direct mail, blog, Stripe payments,
social, AI social via Ollama) with build/monthly pricing and UX screen lists.

Each client proposal should include:

- `proposal/SCOPE.md` — which features are recommended and priced for that client
- `mockup/ux-gallery.html` — monica-style card hub (one card per screen/feature)
- `mockup/pricing.html` — interactive feature picker with dependency rules

## Active previews

| Business | Phone | Email | Preview URL |
| --- | --- | --- | --- |
| Ed's Plumbing & Sewer | (630) 663-1444 | info@thegreatestplumber.com | https://ed-preview.aimloperations.com/ |
| Paint to Please | _TBD_ | _TBD_ | https://paint-to-please-preview.aimloperations.com/ |
| Select Electrical Services | (630) 202-8020 | select8020@gmail.com | https://select-electrical-preview.aimloperations.com/ |

## Repository structure

```text
preview_sites/
├── features.md
├── templates/
│   └── <template-name>/
│       ├── index.html
│       ├── css/
│       ├── js/
│       └── assets/
└── proposals/
    └── <client-name>/
        ├── mockup/
        │   ├── index.html          # marketing entry (or public-home)
        │   ├── ux-gallery.html     # feature card gallery
        │   ├── pricing.html        # interactive estimate
        │   ├── ux-planned.html     # stubs for unbuilt screens
        │   ├── css/
        │   ├── js/
        │   └── assets/
        └── proposal/
            ├── NOTES.md
            ├── SCOPE.md
            └── ...
```

- `templates/` contains reusable site designs and components. Templates should
  not contain client names, branding, credentials, or other client-specific data.
- `proposals/<client-name>/mockup/` contains the tailored static HTML, CSS,
  JavaScript, images, fonts, and other assets used for a client demo.
- `proposals/<client-name>/proposal/` contains the related proposal documents,
  estimates, notes, and supporting material.

Use lowercase kebab-case for template and client folder names, such as
`real-estate` or `acme-properties`.

## Creating a client preview

1. Choose a starter from `templates/`.
2. Create `proposals/<client-name>/mockup/` and
   `proposals/<client-name>/proposal/`.
3. Copy the selected template into `mockup/`.
4. Tailor branding, copy, images, layout, and interactions.
5. Test the mockup locally as a static site.
6. Copy the contents of `mockup/` to the preview server and configure an Nginx
   server block for the client's preview hostname.
7. Remove the hosted preview when it is no longer needed.

## Preview requirements

Mockups should remain portable static sites:

- Use relative paths for local CSS, JavaScript, and assets.
- Keep `index.html` as the entry point.
- Do not commit API keys, passwords, production customer data, or other secrets.
- Use fictional or explicitly approved contact and customer information.
- Optimize image and font sizes before deployment.
- Clearly label previews as concepts when visitors could mistake them for live
  production sites.
- Every page footer must include: Made by
  [AI ML Operations, LLC](https://aimloperations.com) (company name is the link).

## Nginx deployment

Deployment is manual. Each preview can be copied to its own web root and served
by Nginx:

```nginx
server {
    listen 80;
    server_name client-preview.example.com;

    root /var/www/previews/client-name;
    index index.html;

    location / {
        try_files $uri $uri/ =404;
    }
}
```

Enable HTTPS and any desired access controls on the server. For private or
unfinished previews, restrict access with authentication or an IP allowlist.