added first three mockups

2026-07-20 05:38:53 -05:00
parent 4dce423c4f
commit f839df7863
864 changed files with 235286 additions and 1 deletions
@@ -1,2 +1,108 @@
-# preview_sites
+# 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
+
+## 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.