124 lines
5.0 KiB
Markdown
124 lines
5.0 KiB
Markdown
# 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 |
|
|
| --- | --- | --- | --- |
|
|
| Bob Bollweg Plumbing | (630) 393-9444 | _TBD_ | https://bob-bollweg-plumbing-preview.aimloperations.com/ |
|
|
| Ed's Plumbing & Sewer | (630) 663-1444 | info@thegreatestplumber.com | https://ed-preview.aimloperations.com/ |
|
|
| Golden Sun Landscaping & Tree Service | (630) 330-0486 | goldensunlandscaping@yahoo.com | https://golden-sun-landscaping-preview.aimloperations.com/ |
|
|
| Happy Hauling Junk Removal | (224) 622-2526 | _TBD_ | https://happy-hauling-junk-removal-preview.aimloperations.com/ |
|
|
| Mobile Galaxy Gaming | (773) 817-4239 | _TBD_ | https://mobile-galaxy-gaming-preview.aimloperations.com/ |
|
|
| Paint to Please | _TBD_ | _TBD_ | https://paint-to-please-preview.aimloperations.com/ |
|
|
| Professional Fence Repair | (630) 393-3722 | _TBD_ | https://professional-fence-repair-preview.aimloperations.com/ |
|
|
| Select Electrical Services | (630) 202-8020 | select8020@gmail.com | https://select-electrical-preview.aimloperations.com/ |
|
|
| Singh Driving School | (630) 999-9931 | _TBD_ | https://singh-driving-school-preview.aimloperations.com/ |
|
|
| T.R.B. Painting | (630) 606-6776 | _TBD_ | https://trb-painting-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.
|