chore: clean up root directory — archive completed docs, add marketing assets
Move 9 completed/historical docs from root to docs/archive/: - ARCHITECTURE.md, BACKLOG.md, CLAUDE-SETUP.md, MICHAEL-NOTES.md - IMPLEMENTATION-SUMMARY-ISSUE-34.md, PHASE-2.5-PERSONAL-BRANCHING.md - REBRAND-IMPLEMENTATION-GUIDE.md, TS-EXAMPLES.md, WORKSPACE-REMOVAL-PLAN.md Move QUICK-START.md to docs/ Add previously untracked files: - DEV-ENV.md (devserver01 setup guide) - docs/marketing/ (one-pager HTML + PDF) - docs/ResolutionFlow_Pivot_Architecture.docx Update CLAUDE.md rebrand guide reference path. Deleted temp files: .temp_fixed.py, .temp_fixed2.py, ai_provider_*.py, ai_provider.patch, test_write.txt Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -27,7 +27,7 @@
|
|||||||
- **Layout:** App shell with persistent sidebar + top bar + main content (CSS Grid). Two fixed atmosphere orbs (cyan top-right, purple bottom-left) behind the shell for ambient glow. See [UI-DESIGN-SYSTEM.md](UI-DESIGN-SYSTEM.md)
|
- **Layout:** App shell with persistent sidebar + top bar + main content (CSS Grid). Two fixed atmosphere orbs (cyan top-right, purple bottom-left) behind the shell for ambient glow. See [UI-DESIGN-SYSTEM.md](UI-DESIGN-SYSTEM.md)
|
||||||
- **Navigation:** Sidebar nav with type sub-items (All Flows → Troubleshooting / Projects / Maintenance). Pinned flows section for quick access. NO workspace switcher. See [UI-DESIGN-SYSTEM.md](UI-DESIGN-SYSTEM.md)
|
- **Navigation:** Sidebar nav with type sub-items (All Flows → Troubleshooting / Projects / Maintenance). Pinned flows section for quick access. NO workspace switcher. See [UI-DESIGN-SYSTEM.md](UI-DESIGN-SYSTEM.md)
|
||||||
- **Terminology:** User-facing label is "Flows" (not "Trees"). Procedural flows are called "Projects" in the UI. Maintenance flows are called "Maintenance" in the UI. `tree_type` column values unchanged in DB.
|
- **Terminology:** User-facing label is "Flows" (not "Trees"). Procedural flows are called "Projects" in the UI. Maintenance flows are called "Maintenance" in the UI. `tree_type` column values unchanged in DB.
|
||||||
- **Rebrand guide:** [REBRAND-IMPLEMENTATION-GUIDE.md](REBRAND-IMPLEMENTATION-GUIDE.md)
|
- **Rebrand guide:** [REBRAND-IMPLEMENTATION-GUIDE.md](docs/archive/REBRAND-IMPLEMENTATION-GUIDE.md)
|
||||||
|
|
||||||
**Component styling rules:**
|
**Component styling rules:**
|
||||||
|
|
||||||
|
|||||||
350
DEV-ENV.md
Normal file
350
DEV-ENV.md
Normal file
@@ -0,0 +1,350 @@
|
|||||||
|
# DevServer01 Environment Setup & Operations Guide
|
||||||
|
|
||||||
|
## Server Overview
|
||||||
|
|
||||||
|
- **Hostname:** devserver01
|
||||||
|
- **IP Address:** 192.168.0.9
|
||||||
|
- **OS:** Ubuntu 25.10 (Questing Quokka)
|
||||||
|
- **CPU:** AMD Ryzen 3 PRO 3200GE w/ Radeon Vega Graphics
|
||||||
|
- **RAM:** ~5.2GB (some reserved by Vega iGPU)
|
||||||
|
- **Disk:** 57GB LVM volume (`/dev/mapper/ubuntu--vg-ubuntu--lv`), ~47GB free
|
||||||
|
- **Hardware:** Lenovo ThinkCentre Micro Tower
|
||||||
|
|
||||||
|
## Docker Setup
|
||||||
|
|
||||||
|
Docker was installed via the official convenience script:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
curl -fsSL https://get.docker.com | sh
|
||||||
|
sudo usermod -aG docker michael
|
||||||
|
```
|
||||||
|
|
||||||
|
Docker Compose is included with this installation.
|
||||||
|
|
||||||
|
## Code-Server
|
||||||
|
|
||||||
|
### Overview
|
||||||
|
|
||||||
|
Code-server (codercom/code-server) runs in a Docker container, providing a browser-accessible VS Code instance at `https://192.168.0.9:8080`. It uses a custom Dockerfile to include additional tools like `gh` (GitHub CLI).
|
||||||
|
|
||||||
|
### Custom Dockerfile
|
||||||
|
|
||||||
|
Location: `~/docker/Dockerfile.code-server`
|
||||||
|
|
||||||
|
```dockerfile
|
||||||
|
FROM codercom/code-server:latest
|
||||||
|
|
||||||
|
USER root
|
||||||
|
RUN curl -fsSL https://cli.github.com/packages/githubcli-archive-keyring.gpg | dd of=/usr/share/keyrings/githubcli-archive-keyring.gpg && \
|
||||||
|
chmod go+r /usr/share/keyrings/githubcli-archive-keyring.gpg && \
|
||||||
|
echo "deb [arch=$(dpkg --print-architecture) signed-by=/usr/share/keyrings/githubcli-archive-keyring.gpg] https://cli.github.com/packages stable main" | tee /etc/apt/sources.list.d/github-cli.list > /dev/null && \
|
||||||
|
apt update && apt install -y gh && \
|
||||||
|
rm -rf /var/lib/apt/lists/*
|
||||||
|
USER coder
|
||||||
|
```
|
||||||
|
|
||||||
|
### Docker Compose File
|
||||||
|
|
||||||
|
Location: `~/docker/docker-compose.yml`
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
services:
|
||||||
|
code-server:
|
||||||
|
build:
|
||||||
|
context: .
|
||||||
|
dockerfile: Dockerfile.code-server
|
||||||
|
container_name: code-server
|
||||||
|
environment:
|
||||||
|
- PASSWORD=<password>
|
||||||
|
volumes:
|
||||||
|
- ./code-server/config/data:/home/coder/.local/share/code-server
|
||||||
|
- ./code-server/config/extensions:/home/coder/.local/share/code-server/extensions
|
||||||
|
- ./code-server/config/.config/code-server:/home/coder/.config/code-server
|
||||||
|
- ./projects:/projects
|
||||||
|
- ./code-server/certs:/certs
|
||||||
|
- /home/michael/.claude:/home/coder/.claude
|
||||||
|
ports:
|
||||||
|
- 8080:8443
|
||||||
|
command: --bind-addr 0.0.0.0:8443 --cert /certs/cert.pem --cert-key /certs/key.pem /projects
|
||||||
|
user: "1000:1000"
|
||||||
|
restart: unless-stopped
|
||||||
|
```
|
||||||
|
|
||||||
|
### Key Details
|
||||||
|
|
||||||
|
- **Container user:** `coder` (UID 1000)
|
||||||
|
- **Home directory inside container:** `/home/coder`
|
||||||
|
- **Projects mount:** Host `~/docker/projects` → Container `/projects`
|
||||||
|
- **Claude Code config mount:** Host `/home/michael/.claude` → Container `/home/coder/.claude`
|
||||||
|
- **HTTPS:** Self-signed certs via a custom Homelab CA
|
||||||
|
- **Internal port:** 8443 (code-server listens here)
|
||||||
|
- **External port:** 8080 (mapped to 8443 internally)
|
||||||
|
- **Access URL:** `https://192.168.0.9:8080`
|
||||||
|
|
||||||
|
### SSL Certificates
|
||||||
|
|
||||||
|
Location: `~/docker/code-server/certs/`
|
||||||
|
|
||||||
|
A custom Certificate Authority (CA) was created for the homelab:
|
||||||
|
|
||||||
|
- `ca.key` — CA private key
|
||||||
|
- `ca.crt` — CA certificate (imported into browsers to trust all homelab certs)
|
||||||
|
- `key.pem` — code-server private key
|
||||||
|
- `cert.pem` — code-server certificate (signed by CA)
|
||||||
|
- `server.cnf` — OpenSSL config with SANs for devserver01
|
||||||
|
|
||||||
|
The CA cert (`ca.crt`) has been imported into Firefox on client machines under Settings → Privacy & Security → Certificates → View Certificates → Authorities → Import → "Trust this CA to identify websites."
|
||||||
|
|
||||||
|
### Volume Mapping Reference
|
||||||
|
|
||||||
|
| Host Path | Container Path | Purpose |
|
||||||
|
|---|---|---|
|
||||||
|
| `~/docker/code-server/config/data` | `/home/coder/.local/share/code-server` | VS Code user data, settings |
|
||||||
|
| `~/docker/code-server/config/extensions` | `/home/coder/.local/share/code-server/extensions` | VS Code extensions |
|
||||||
|
| `~/docker/code-server/config/.config/code-server` | `/home/coder/.config/code-server` | code-server config |
|
||||||
|
| `~/docker/projects` | `/projects` | All project repos |
|
||||||
|
| `~/docker/code-server/certs` | `/certs` | SSL certificates |
|
||||||
|
| `/home/michael/.claude` | `/home/coder/.claude` | Claude Code config, plugins, skills, history |
|
||||||
|
|
||||||
|
## Patherly / ResolutionFlow Dev Environment
|
||||||
|
|
||||||
|
### Docker Compose (Dev)
|
||||||
|
|
||||||
|
Location: `~/docker/projects/patherly/docker-compose.dev.yml`
|
||||||
|
|
||||||
|
This runs the full Patherly/ResolutionFlow stack:
|
||||||
|
|
||||||
|
- **PostgreSQL** (pgvector/pgvector:pg16) on port 5432
|
||||||
|
- **Backend** (FastAPI/Uvicorn) on port 8000
|
||||||
|
- **Frontend** (Vite/React) on port 5173
|
||||||
|
|
||||||
|
### Environment Files
|
||||||
|
|
||||||
|
- `~/docker/projects/patherly/.env` — Backend secrets (SECRET_KEY, API keys, etc.)
|
||||||
|
- `~/docker/projects/patherly/frontend/.env` — Frontend config (VITE_API_URL)
|
||||||
|
|
||||||
|
### Critical Configuration for Remote Access
|
||||||
|
|
||||||
|
Since the dev environment is accessed from other machines on the LAN (not localhost), these settings are required:
|
||||||
|
|
||||||
|
**Frontend `.env`:**
|
||||||
|
```
|
||||||
|
VITE_API_URL=http://192.168.0.9:8000
|
||||||
|
```
|
||||||
|
|
||||||
|
**Backend CORS_ORIGINS in `docker-compose.dev.yml`:**
|
||||||
|
```yaml
|
||||||
|
- CORS_ORIGINS=["http://localhost:3000","http://localhost:5173","http://127.0.0.1:3000","http://127.0.0.1:5173","http://192.168.0.9:5173","http://192.168.0.9:3000"]
|
||||||
|
```
|
||||||
|
|
||||||
|
The `192.168.0.9` entries are required because browsers make requests from the client machine, where `localhost` refers to the client — not devserver01.
|
||||||
|
|
||||||
|
### Starting the Dev Environment
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cd ~/docker/projects/patherly
|
||||||
|
docker compose -f docker-compose.dev.yml up -d
|
||||||
|
```
|
||||||
|
|
||||||
|
### Running Migrations (Fresh Database)
|
||||||
|
|
||||||
|
```bash
|
||||||
|
docker compose -f docker-compose.dev.yml run --rm backend alembic upgrade head
|
||||||
|
```
|
||||||
|
|
||||||
|
### Seeding Test Users
|
||||||
|
|
||||||
|
```bash
|
||||||
|
docker exec resolutionflow_backend python -m scripts.seed_test_users
|
||||||
|
```
|
||||||
|
|
||||||
|
### Rebuilding After Frontend .env Changes
|
||||||
|
|
||||||
|
Vite bakes environment variables at build time, so changes to `VITE_API_URL` require a rebuild:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
docker compose -f docker-compose.dev.yml down
|
||||||
|
docker compose -f docker-compose.dev.yml up -d --build
|
||||||
|
```
|
||||||
|
|
||||||
|
Backend environment changes (like CORS_ORIGINS) only need a restart, not a rebuild.
|
||||||
|
|
||||||
|
### Access URLs
|
||||||
|
|
||||||
|
- **Frontend:** `http://192.168.0.9:5173`
|
||||||
|
- **Backend API:** `http://192.168.0.9:8000`
|
||||||
|
- **API Docs:** `http://192.168.0.9:8000/docs`
|
||||||
|
|
||||||
|
## Known Issues & Fixes
|
||||||
|
|
||||||
|
### iptables DROP Rules Blocking Docker Traffic
|
||||||
|
|
||||||
|
Docker routes container traffic through the FORWARD chain. Rogue DROP rules in the DOCKER chain can block all container networking.
|
||||||
|
|
||||||
|
**Symptoms:** Container shows as running, port is listening via `ss`, but `curl` returns "Connection reset by peer" or "Connection refused" from other machines.
|
||||||
|
|
||||||
|
**Diagnosis:**
|
||||||
|
```bash
|
||||||
|
sudo iptables -L DOCKER -n --line-numbers
|
||||||
|
```
|
||||||
|
|
||||||
|
Look for blanket DROP rules:
|
||||||
|
```
|
||||||
|
2 DROP all -- 0.0.0.0/0 0.0.0.0/0
|
||||||
|
3 DROP all -- 0.0.0.0/0 0.0.0.0/0
|
||||||
|
```
|
||||||
|
|
||||||
|
**Fix:**
|
||||||
|
```bash
|
||||||
|
# Remove DROP rules (remove highest numbered first)
|
||||||
|
sudo iptables -D DOCKER 3
|
||||||
|
sudo iptables -D DOCKER 2
|
||||||
|
```
|
||||||
|
|
||||||
|
If the FORWARD chain has `policy DROP` and Docker containers can't communicate:
|
||||||
|
```bash
|
||||||
|
sudo systemctl restart docker
|
||||||
|
```
|
||||||
|
|
||||||
|
Docker rebuilds its iptables chains on restart. These rules don't persist across reboots by default — if they come back, something else is creating them.
|
||||||
|
|
||||||
|
### Code-Server Port Mismatch
|
||||||
|
|
||||||
|
The codercom/code-server image listens on port **8443** internally, not 8080. The compose file must map `8080:8443`:
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
ports:
|
||||||
|
- 8080:8443
|
||||||
|
```
|
||||||
|
|
||||||
|
The code-server config file (`/home/coder/.config/code-server/config.yaml`) must bind to `0.0.0.0`, not `127.0.0.1`:
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
bind-addr: 0.0.0.0:8443
|
||||||
|
```
|
||||||
|
|
||||||
|
If it says `127.0.0.1`, it will only accept connections from inside the container.
|
||||||
|
|
||||||
|
### Permission Issues Inside Container
|
||||||
|
|
||||||
|
The container runs as user `coder` (UID 1000). Host files mounted into the container must be owned by UID 1000:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Fix project permissions
|
||||||
|
sudo chown -R 1000:1000 ~/docker/projects
|
||||||
|
|
||||||
|
# Fix code-server config permissions
|
||||||
|
sudo chown -R 1000:1000 ~/docker/code-server/config/
|
||||||
|
|
||||||
|
# Fix Claude Code config permissions
|
||||||
|
sudo chown -R 1000:1000 ~/.claude/
|
||||||
|
```
|
||||||
|
|
||||||
|
### GitHub CLI (gh) Auth
|
||||||
|
|
||||||
|
gh stores its config at `/home/coder/.config/gh/`. If it fails with permission denied:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
docker exec -u root code-server mkdir -p /home/coder/.config/gh
|
||||||
|
docker exec -u root code-server chown -R 1000:1000 /home/coder/.config
|
||||||
|
```
|
||||||
|
|
||||||
|
## Useful Commands
|
||||||
|
|
||||||
|
### Check all running containers
|
||||||
|
```bash
|
||||||
|
docker ps
|
||||||
|
```
|
||||||
|
|
||||||
|
### View logs for a specific container
|
||||||
|
```bash
|
||||||
|
docker logs <container_name> --tail 30
|
||||||
|
```
|
||||||
|
|
||||||
|
### Restart code-server
|
||||||
|
```bash
|
||||||
|
cd ~/docker
|
||||||
|
docker compose up -d
|
||||||
|
```
|
||||||
|
|
||||||
|
### Rebuild code-server (after Dockerfile changes)
|
||||||
|
```bash
|
||||||
|
cd ~/docker
|
||||||
|
docker compose down
|
||||||
|
docker compose up -d --build
|
||||||
|
```
|
||||||
|
|
||||||
|
### Restart dev environment
|
||||||
|
```bash
|
||||||
|
cd ~/docker/projects/patherly
|
||||||
|
docker compose -f docker-compose.dev.yml down
|
||||||
|
docker compose -f docker-compose.dev.yml up -d
|
||||||
|
```
|
||||||
|
|
||||||
|
### SSH into devserver01
|
||||||
|
```bash
|
||||||
|
ssh michael@192.168.0.9
|
||||||
|
```
|
||||||
|
|
||||||
|
### Check what's listening on ports
|
||||||
|
```bash
|
||||||
|
sudo ss -tlnp | grep <port>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Check firewall / iptables
|
||||||
|
```bash
|
||||||
|
sudo ufw status
|
||||||
|
sudo iptables -L -n --line-numbers
|
||||||
|
sudo iptables -L DOCKER -n --line-numbers
|
||||||
|
```
|
||||||
|
|
||||||
|
### Execute commands inside containers
|
||||||
|
```bash
|
||||||
|
# As default user
|
||||||
|
docker exec code-server <command>
|
||||||
|
|
||||||
|
# As root
|
||||||
|
docker exec -u root code-server <command>
|
||||||
|
|
||||||
|
# Interactive shell
|
||||||
|
docker exec -it code-server bash
|
||||||
|
```
|
||||||
|
|
||||||
|
## Network Info
|
||||||
|
|
||||||
|
- **Server IP:** 192.168.0.9
|
||||||
|
- **Docker bridge network:** 172.17.0.0/16 and 172.18.0.0/16
|
||||||
|
- **Host user:** michael (UID 1000)
|
||||||
|
- **Container user:** coder (UID 1000) — same UID allows seamless file sharing via volume mounts
|
||||||
|
|
||||||
|
## Code-Server Browser Tips
|
||||||
|
|
||||||
|
- **Command Palette:** `F1` (not Ctrl+Shift+P, which opens Firefox private window)
|
||||||
|
- **Context Menu (right-click):** `Alt + Right Click`
|
||||||
|
- **Terminal:** `` Ctrl+` ``
|
||||||
|
- **Rename file:** `F2`
|
||||||
|
- **Go to definition:** `F12`
|
||||||
|
- **Find references:** `Shift+F12`
|
||||||
|
|
||||||
|
## Adding New Tools to Code-Server
|
||||||
|
|
||||||
|
To permanently add tools (survive container restarts), add them to `~/docker/Dockerfile.code-server`:
|
||||||
|
|
||||||
|
```dockerfile
|
||||||
|
USER root
|
||||||
|
RUN apt update && apt install -y <new-tool> && rm -rf /var/lib/apt/lists/*
|
||||||
|
USER coder
|
||||||
|
```
|
||||||
|
|
||||||
|
Then rebuild:
|
||||||
|
```bash
|
||||||
|
cd ~/docker
|
||||||
|
docker compose down
|
||||||
|
docker compose up -d --build
|
||||||
|
```
|
||||||
|
|
||||||
|
For temporary installs (gone after restart):
|
||||||
|
```bash
|
||||||
|
docker exec -u root code-server apt update
|
||||||
|
docker exec -u root code-server apt install -y <new-tool>
|
||||||
|
```
|
||||||
BIN
docs/ResolutionFlow_Pivot_Architecture.docx
Normal file
BIN
docs/ResolutionFlow_Pivot_Architecture.docx
Normal file
Binary file not shown.
393
docs/marketing/resolutionflow-one-pager-print.html
Normal file
393
docs/marketing/resolutionflow-one-pager-print.html
Normal file
@@ -0,0 +1,393 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>ResolutionFlow — Flyer</title>
|
||||||
|
<style>
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@400;600;700;800&family=IBM+Plex+Sans:wght@400;500;600&display=swap');
|
||||||
|
|
||||||
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||||
|
@page { size: letter; margin: 0; }
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'IBM Plex Sans', -apple-system, sans-serif;
|
||||||
|
color: #1a1d23;
|
||||||
|
background: #ffffff;
|
||||||
|
width: 8.5in;
|
||||||
|
height: 11in;
|
||||||
|
margin: 0 auto;
|
||||||
|
-webkit-print-color-adjust: exact;
|
||||||
|
print-color-adjust: exact;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page {
|
||||||
|
padding: 0.5in 0.6in 0.45in;
|
||||||
|
height: 11in;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Top Banner ── */
|
||||||
|
.top-banner {
|
||||||
|
background: #0e7490;
|
||||||
|
color: #ffffff;
|
||||||
|
margin: -0.5in -0.6in 0;
|
||||||
|
padding: 0.45in 0.6in 0.4in;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.logo-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 10px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
.logo-icon { width: 34px; height: 34px; }
|
||||||
|
.brand-name {
|
||||||
|
font-family: 'Bricolage Grotesque', sans-serif;
|
||||||
|
font-size: 22px;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
.top-banner h1 {
|
||||||
|
font-family: 'Bricolage Grotesque', sans-serif;
|
||||||
|
font-size: 32px;
|
||||||
|
font-weight: 800;
|
||||||
|
line-height: 1.15;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
.top-banner .subtitle {
|
||||||
|
font-size: 13px;
|
||||||
|
color: rgba(255,255,255,0.85);
|
||||||
|
max-width: 5.4in;
|
||||||
|
margin: 0 auto;
|
||||||
|
line-height: 1.55;
|
||||||
|
}
|
||||||
|
.built-for {
|
||||||
|
display: inline-block;
|
||||||
|
margin-top: 12px;
|
||||||
|
font-family: 'Bricolage Grotesque', sans-serif;
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.12em;
|
||||||
|
color: rgba(255,255,255,0.6);
|
||||||
|
border: 1px solid rgba(255,255,255,0.25);
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 4px 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Main Content ── */
|
||||||
|
.content {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding-top: 0.3in;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Problem strip */
|
||||||
|
.problem-strip {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 0.28in;
|
||||||
|
padding-bottom: 0.22in;
|
||||||
|
border-bottom: 1px solid #e5e7eb;
|
||||||
|
}
|
||||||
|
.problem-strip h2 {
|
||||||
|
font-family: 'Bricolage Grotesque', sans-serif;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #1a1d23;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
}
|
||||||
|
.problem-strip p {
|
||||||
|
font-size: 11px;
|
||||||
|
color: #6b7280;
|
||||||
|
line-height: 1.5;
|
||||||
|
max-width: 5.8in;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Benefits */
|
||||||
|
.benefits {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.22in 0.3in;
|
||||||
|
margin-bottom: 0.3in;
|
||||||
|
}
|
||||||
|
.benefit {
|
||||||
|
width: calc(50% - 0.15in);
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
.benefit-marker {
|
||||||
|
flex-shrink: 0;
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
border-radius: 8px;
|
||||||
|
background: #ecfeff;
|
||||||
|
border: 1.5px solid #a5f3fc;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-family: 'Bricolage Grotesque', sans-serif;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 800;
|
||||||
|
color: #0891b2;
|
||||||
|
}
|
||||||
|
.benefit-text h3 {
|
||||||
|
font-family: 'Bricolage Grotesque', sans-serif;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #1a1d23;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
}
|
||||||
|
.benefit-text p {
|
||||||
|
font-size: 9.5px;
|
||||||
|
color: #6b7280;
|
||||||
|
line-height: 1.45;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* How it works */
|
||||||
|
.how-section {
|
||||||
|
background: #f9fafb;
|
||||||
|
border: 1px solid #e5e7eb;
|
||||||
|
border-radius: 14px;
|
||||||
|
padding: 16px 22px;
|
||||||
|
margin-bottom: 0.28in;
|
||||||
|
}
|
||||||
|
.how-section h2 {
|
||||||
|
font-family: 'Bricolage Grotesque', sans-serif;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #1a1d23;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 14px;
|
||||||
|
}
|
||||||
|
.how-steps {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 0;
|
||||||
|
}
|
||||||
|
.how-step {
|
||||||
|
flex: 1;
|
||||||
|
text-align: center;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.how-step-num {
|
||||||
|
display: inline-block;
|
||||||
|
width: 26px;
|
||||||
|
height: 26px;
|
||||||
|
line-height: 26px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #0891b2;
|
||||||
|
color: #ffffff;
|
||||||
|
font-family: 'Bricolage Grotesque', sans-serif;
|
||||||
|
font-weight: 800;
|
||||||
|
font-size: 12px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
.how-step h4 {
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #1a1d23;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
}
|
||||||
|
.how-step p {
|
||||||
|
font-size: 8.5px;
|
||||||
|
color: #6b7280;
|
||||||
|
line-height: 1.4;
|
||||||
|
padding: 0 4px;
|
||||||
|
}
|
||||||
|
.how-arrow {
|
||||||
|
flex-shrink: 0;
|
||||||
|
width: 20px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding-top: 4px;
|
||||||
|
color: #d1d5db;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Integrations row */
|
||||||
|
.integrations-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
margin-bottom: 0.22in;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.integrations-label {
|
||||||
|
font-family: 'Bricolage Grotesque', sans-serif;
|
||||||
|
font-size: 9px;
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
color: #9ca3af;
|
||||||
|
}
|
||||||
|
.int-dot {
|
||||||
|
width: 3px;
|
||||||
|
height: 3px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #d1d5db;
|
||||||
|
}
|
||||||
|
.int-name {
|
||||||
|
font-size: 9.5px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #6b7280;
|
||||||
|
}
|
||||||
|
.int-name.highlight {
|
||||||
|
color: #0891b2;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Footer */
|
||||||
|
.footer {
|
||||||
|
margin-top: auto;
|
||||||
|
text-align: center;
|
||||||
|
padding-top: 0.18in;
|
||||||
|
border-top: 1.5px solid #e5e7eb;
|
||||||
|
}
|
||||||
|
.footer-url {
|
||||||
|
font-family: 'Bricolage Grotesque', sans-serif;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 800;
|
||||||
|
color: #0891b2;
|
||||||
|
letter-spacing: -0.01em;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
.footer-tagline {
|
||||||
|
font-size: 10px;
|
||||||
|
color: #9ca3af;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="page">
|
||||||
|
|
||||||
|
<!-- Top Banner -->
|
||||||
|
<div class="top-banner">
|
||||||
|
<div class="logo-row">
|
||||||
|
<svg class="logo-icon" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<circle cx="18" cy="8" r="3" fill="#ffffff"/>
|
||||||
|
<circle cx="10" cy="20" r="2.5" fill="#ffffff" opacity="0.85"/>
|
||||||
|
<circle cx="26" cy="20" r="2.5" fill="#ffffff" opacity="0.85"/>
|
||||||
|
<circle cx="6" cy="30" r="2" fill="#ffffff" opacity="0.65"/>
|
||||||
|
<circle cx="14" cy="30" r="2" fill="#ffffff" opacity="0.65"/>
|
||||||
|
<circle cx="22" cy="30" r="2" fill="#ffffff" opacity="0.65"/>
|
||||||
|
<circle cx="30" cy="30" r="2" fill="#ffffff" opacity="0.65"/>
|
||||||
|
<line x1="18" y1="11" x2="10" y2="17.5" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" opacity="0.8"/>
|
||||||
|
<line x1="18" y1="11" x2="26" y2="17.5" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" opacity="0.8"/>
|
||||||
|
<line x1="10" y1="22.5" x2="6" y2="28" stroke="#ffffff" stroke-width="1.2" stroke-linecap="round" opacity="0.6"/>
|
||||||
|
<line x1="10" y1="22.5" x2="14" y2="28" stroke="#ffffff" stroke-width="1.2" stroke-linecap="round" opacity="0.6"/>
|
||||||
|
<line x1="26" y1="22.5" x2="22" y2="28" stroke="#ffffff" stroke-width="1.2" stroke-linecap="round" opacity="0.6"/>
|
||||||
|
<line x1="26" y1="22.5" x2="30" y2="28" stroke="#ffffff" stroke-width="1.2" stroke-linecap="round" opacity="0.6"/>
|
||||||
|
</svg>
|
||||||
|
<div class="brand-name">ResolutionFlow</div>
|
||||||
|
</div>
|
||||||
|
<h1>Stop Reinventing Fixes.<br>Build a Knowledge Engine.</h1>
|
||||||
|
<p class="subtitle">Guided troubleshooting flows, AI-assisted resolution, and auto-generated ticket documentation for MSP teams.</p>
|
||||||
|
<div class="built-for">Built for Managed Service Providers</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Content -->
|
||||||
|
<div class="content">
|
||||||
|
|
||||||
|
<!-- Problem -->
|
||||||
|
<div class="problem-strip">
|
||||||
|
<h2>Your best engineers' knowledge shouldn't live only in their heads.</h2>
|
||||||
|
<p>Every time a senior tech leaves, tribal knowledge goes with them. Junior engineers waste hours reinventing solutions that already exist. Ticket notes are inconsistent. Resolution times are unpredictable.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Benefits -->
|
||||||
|
<div class="benefits">
|
||||||
|
<div class="benefit">
|
||||||
|
<div class="benefit-marker">//</div>
|
||||||
|
<div class="benefit-text">
|
||||||
|
<h3>Guided Troubleshooting Flows</h3>
|
||||||
|
<p>Turn your best engineers' proven processes into reusable decision trees that anyone on the team can follow.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="benefit">
|
||||||
|
<div class="benefit-marker">AI</div>
|
||||||
|
<div class="benefit-text">
|
||||||
|
<h3>AI Copilot (FlowPilot)</h3>
|
||||||
|
<p>An AI assistant rides alongside every session, suggesting next steps and adapting to the situation in real time.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="benefit">
|
||||||
|
<div class="benefit-marker"></></div>
|
||||||
|
<div class="benefit-text">
|
||||||
|
<h3>Automatic Documentation</h3>
|
||||||
|
<p>Every session generates professional ticket notes and pushes them directly to your PSA. No more writing notes by hand.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="benefit">
|
||||||
|
<div class="benefit-marker">>></div>
|
||||||
|
<div class="benefit-text">
|
||||||
|
<h3>Knowledge That Compounds</h3>
|
||||||
|
<p>AI analyzes completed sessions and proposes new Flows automatically. Your knowledge base grows with every ticket resolved.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- How It Works -->
|
||||||
|
<div class="how-section">
|
||||||
|
<h2>How It Works</h2>
|
||||||
|
<div class="how-steps">
|
||||||
|
<div class="how-step">
|
||||||
|
<div class="how-step-num">1</div>
|
||||||
|
<h4>Build a Flow</h4>
|
||||||
|
<p>Capture your team's troubleshooting processes as decision trees</p>
|
||||||
|
</div>
|
||||||
|
<div class="how-arrow">→</div>
|
||||||
|
<div class="how-step">
|
||||||
|
<div class="how-step-num">2</div>
|
||||||
|
<h4>Run a Session</h4>
|
||||||
|
<p>Engineers follow the Flow with AI copilot guidance</p>
|
||||||
|
</div>
|
||||||
|
<div class="how-arrow">→</div>
|
||||||
|
<div class="how-step">
|
||||||
|
<div class="how-step-num">3</div>
|
||||||
|
<h4>Auto-Document</h4>
|
||||||
|
<p>Session notes are generated and pushed to your PSA</p>
|
||||||
|
</div>
|
||||||
|
<div class="how-arrow">→</div>
|
||||||
|
<div class="how-step">
|
||||||
|
<div class="how-step-num">4</div>
|
||||||
|
<h4>Learn & Improve</h4>
|
||||||
|
<p>AI proposes new Flows from sessions automatically</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Integrations -->
|
||||||
|
<div class="integrations-row">
|
||||||
|
<span class="integrations-label">Works with:</span>
|
||||||
|
<span class="int-name highlight">ConnectWise PSA</span>
|
||||||
|
<span class="int-dot"></span>
|
||||||
|
<span class="int-name">Autotask</span>
|
||||||
|
<span class="int-dot"></span>
|
||||||
|
<span class="int-name">Halo PSA</span>
|
||||||
|
<span class="int-dot"></span>
|
||||||
|
<span class="int-name">Slack</span>
|
||||||
|
<span class="int-dot"></span>
|
||||||
|
<span class="int-name">Teams</span>
|
||||||
|
<span class="int-dot"></span>
|
||||||
|
<span class="int-name">Email</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
|
<div class="footer">
|
||||||
|
<div class="footer-url">resolutionflow.com</div>
|
||||||
|
<div class="footer-tagline">Free trial available — no credit card required</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
BIN
docs/marketing/resolutionflow-one-pager-print.pdf
Normal file
BIN
docs/marketing/resolutionflow-one-pager-print.pdf
Normal file
Binary file not shown.
487
docs/marketing/resolutionflow-one-pager.html
Normal file
487
docs/marketing/resolutionflow-one-pager.html
Normal file
@@ -0,0 +1,487 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>ResolutionFlow — One Pager</title>
|
||||||
|
<style>
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@600;700;800&family=IBM+Plex+Sans:wght@400;500;600&display=swap');
|
||||||
|
|
||||||
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||||
|
|
||||||
|
@page {
|
||||||
|
size: letter;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'IBM Plex Sans', -apple-system, sans-serif;
|
||||||
|
color: #f8fafc;
|
||||||
|
background: #101114;
|
||||||
|
width: 8.5in;
|
||||||
|
height: 11in;
|
||||||
|
margin: 0 auto;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
-webkit-print-color-adjust: exact;
|
||||||
|
print-color-adjust: exact;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Background atmosphere */
|
||||||
|
body::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: -80px;
|
||||||
|
right: -80px;
|
||||||
|
width: 300px;
|
||||||
|
height: 300px;
|
||||||
|
background: radial-gradient(circle, rgba(6,182,212,0.12) 0%, transparent 70%);
|
||||||
|
border-radius: 50%;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
body::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: -60px;
|
||||||
|
left: -60px;
|
||||||
|
width: 240px;
|
||||||
|
height: 240px;
|
||||||
|
background: radial-gradient(circle, rgba(139,92,246,0.08) 0%, transparent 70%);
|
||||||
|
border-radius: 50%;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
padding: 0.4in 0.55in 0.35in;
|
||||||
|
height: 11in;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Header ── */
|
||||||
|
.header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 0.2in;
|
||||||
|
padding-bottom: 0.12in;
|
||||||
|
border-bottom: 1px solid rgba(255,255,255,0.08);
|
||||||
|
}
|
||||||
|
.logo-area {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
.logo-icon {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
}
|
||||||
|
.brand-name {
|
||||||
|
font-family: 'Bricolage Grotesque', sans-serif;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
}
|
||||||
|
.brand-name span:first-child { color: #f8fafc; }
|
||||||
|
.brand-name span:last-child { color: #22d3ee; }
|
||||||
|
.header-url {
|
||||||
|
font-size: 10px;
|
||||||
|
color: #8891a0;
|
||||||
|
letter-spacing: 0.02em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Hero ── */
|
||||||
|
.hero {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 0.2in;
|
||||||
|
}
|
||||||
|
.hero h1 {
|
||||||
|
font-family: 'Bricolage Grotesque', sans-serif;
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 800;
|
||||||
|
line-height: 1.2;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
}
|
||||||
|
.hero h1 em {
|
||||||
|
font-style: normal;
|
||||||
|
color: #22d3ee;
|
||||||
|
}
|
||||||
|
.hero p {
|
||||||
|
font-size: 11.5px;
|
||||||
|
color: #8891a0;
|
||||||
|
max-width: 5.6in;
|
||||||
|
margin: 0 auto;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Problem / Solution ── */
|
||||||
|
.two-col {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.18in;
|
||||||
|
margin-bottom: 0.18in;
|
||||||
|
}
|
||||||
|
.two-col > * { flex: 1; }
|
||||||
|
.card {
|
||||||
|
background: rgba(24, 26, 31, 0.6);
|
||||||
|
border: 1px solid rgba(255,255,255,0.06);
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 12px 14px;
|
||||||
|
}
|
||||||
|
.card h3 {
|
||||||
|
font-family: 'Bricolage Grotesque', sans-serif;
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
.card.problem h3 { color: #f87171; }
|
||||||
|
.card.solution h3 { color: #22d3ee; }
|
||||||
|
.card ul {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.card li {
|
||||||
|
font-size: 10px;
|
||||||
|
color: #c4c9d4;
|
||||||
|
line-height: 1.45;
|
||||||
|
padding: 2px 0 2px 14px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.card.problem li::before {
|
||||||
|
content: 'x';
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
color: #f87171;
|
||||||
|
font-size: 9px;
|
||||||
|
font-weight: 700;
|
||||||
|
top: 3px;
|
||||||
|
}
|
||||||
|
.card.solution li::before {
|
||||||
|
content: '+';
|
||||||
|
position: absolute;
|
||||||
|
left: 1px;
|
||||||
|
color: #22d3ee;
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 700;
|
||||||
|
top: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Features Grid ── */
|
||||||
|
.section-label {
|
||||||
|
font-family: 'Bricolage Grotesque', sans-serif;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
letter-spacing: -0.01em;
|
||||||
|
}
|
||||||
|
.features {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.12in;
|
||||||
|
margin-bottom: 0.18in;
|
||||||
|
}
|
||||||
|
.feature {
|
||||||
|
width: calc(33.333% - 0.08in);
|
||||||
|
background: rgba(24, 26, 31, 0.45);
|
||||||
|
border: 1px solid rgba(255,255,255,0.05);
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 10px 12px 8px;
|
||||||
|
}
|
||||||
|
.feature-icon {
|
||||||
|
display: inline-block;
|
||||||
|
width: 22px;
|
||||||
|
height: 22px;
|
||||||
|
border-radius: 6px;
|
||||||
|
background: rgba(6,182,212,0.12);
|
||||||
|
border: 1px solid rgba(6,182,212,0.2);
|
||||||
|
text-align: center;
|
||||||
|
line-height: 22px;
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #22d3ee;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
.feature h4 {
|
||||||
|
font-family: 'Bricolage Grotesque', sans-serif;
|
||||||
|
font-size: 10.5px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #f8fafc;
|
||||||
|
margin-bottom: 3px;
|
||||||
|
}
|
||||||
|
.feature p {
|
||||||
|
font-size: 9px;
|
||||||
|
color: #8891a0;
|
||||||
|
line-height: 1.45;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── How It Works ── */
|
||||||
|
.how-it-works {
|
||||||
|
margin-bottom: 0.18in;
|
||||||
|
}
|
||||||
|
.steps-row {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.1in;
|
||||||
|
}
|
||||||
|
.steps-row > * { flex: 1; }
|
||||||
|
.step {
|
||||||
|
text-align: center;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.step-num {
|
||||||
|
display: inline-block;
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
line-height: 24px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: linear-gradient(135deg, #06b6d4, #22d3ee);
|
||||||
|
color: #101114;
|
||||||
|
font-family: 'Bricolage Grotesque', sans-serif;
|
||||||
|
font-weight: 800;
|
||||||
|
font-size: 12px;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.step h5 {
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #f8fafc;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
}
|
||||||
|
.step p {
|
||||||
|
font-size: 8.5px;
|
||||||
|
color: #8891a0;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Bottom Row: Integrations + CTA ── */
|
||||||
|
.bottom-row {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.18in;
|
||||||
|
margin-top: auto;
|
||||||
|
}
|
||||||
|
.bottom-row > * { flex: 1; }
|
||||||
|
.integrations {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.integrations h3 {
|
||||||
|
font-family: 'Bricolage Grotesque', sans-serif;
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #8891a0;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
.integration-badges {
|
||||||
|
display: flex;
|
||||||
|
gap: 6px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.badge {
|
||||||
|
font-size: 9px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #c4c9d4;
|
||||||
|
background: rgba(255,255,255,0.04);
|
||||||
|
border: 1px solid rgba(255,255,255,0.06);
|
||||||
|
border-radius: 5px;
|
||||||
|
padding: 4px 8px;
|
||||||
|
}
|
||||||
|
.badge.primary {
|
||||||
|
border-color: rgba(6,182,212,0.25);
|
||||||
|
color: #22d3ee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta-card {
|
||||||
|
background: rgba(6,182,212,0.06);
|
||||||
|
border: 1px solid rgba(6,182,212,0.15);
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 14px 16px;
|
||||||
|
text-align: center;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.cta-card h3 {
|
||||||
|
font-family: 'Bricolage Grotesque', sans-serif;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
.cta-card p {
|
||||||
|
font-size: 9.5px;
|
||||||
|
color: #8891a0;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
line-height: 1.45;
|
||||||
|
}
|
||||||
|
.cta-button {
|
||||||
|
display: inline-block;
|
||||||
|
background: linear-gradient(135deg, #06b6d4, #22d3ee);
|
||||||
|
color: #101114;
|
||||||
|
font-family: 'Bricolage Grotesque', sans-serif;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 11px;
|
||||||
|
padding: 7px 22px;
|
||||||
|
border-radius: 7px;
|
||||||
|
text-decoration: none;
|
||||||
|
letter-spacing: 0.01em;
|
||||||
|
}
|
||||||
|
.cta-subtext {
|
||||||
|
font-size: 8px;
|
||||||
|
color: #5a6170;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Print tweaks */
|
||||||
|
@media print {
|
||||||
|
body { background: #101114; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="page">
|
||||||
|
|
||||||
|
<!-- Header -->
|
||||||
|
<div class="header">
|
||||||
|
<div class="logo-area">
|
||||||
|
<svg class="logo-icon" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<rect width="36" height="36" rx="8" fill="#06b6d4" fill-opacity="0.15"/>
|
||||||
|
<circle cx="18" cy="8" r="3" fill="#22d3ee"/>
|
||||||
|
<circle cx="10" cy="20" r="2.5" fill="#22d3ee" opacity="0.8"/>
|
||||||
|
<circle cx="26" cy="20" r="2.5" fill="#22d3ee" opacity="0.8"/>
|
||||||
|
<circle cx="6" cy="30" r="2" fill="#22d3ee" opacity="0.6"/>
|
||||||
|
<circle cx="14" cy="30" r="2" fill="#22d3ee" opacity="0.6"/>
|
||||||
|
<circle cx="22" cy="30" r="2" fill="#22d3ee" opacity="0.6"/>
|
||||||
|
<circle cx="30" cy="30" r="2" fill="#22d3ee" opacity="0.6"/>
|
||||||
|
<line x1="18" y1="11" x2="10" y2="17.5" stroke="#22d3ee" stroke-width="1.5" stroke-linecap="round"/>
|
||||||
|
<line x1="18" y1="11" x2="26" y2="17.5" stroke="#22d3ee" stroke-width="1.5" stroke-linecap="round"/>
|
||||||
|
<line x1="10" y1="22.5" x2="6" y2="28" stroke="#22d3ee" stroke-width="1.2" stroke-linecap="round" opacity="0.7"/>
|
||||||
|
<line x1="10" y1="22.5" x2="14" y2="28" stroke="#22d3ee" stroke-width="1.2" stroke-linecap="round" opacity="0.7"/>
|
||||||
|
<line x1="26" y1="22.5" x2="22" y2="28" stroke="#22d3ee" stroke-width="1.2" stroke-linecap="round" opacity="0.7"/>
|
||||||
|
<line x1="26" y1="22.5" x2="30" y2="28" stroke="#22d3ee" stroke-width="1.2" stroke-linecap="round" opacity="0.7"/>
|
||||||
|
</svg>
|
||||||
|
<div class="brand-name"><span>Resolution</span><span>Flow</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="header-url">resolutionflow.com</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Hero -->
|
||||||
|
<div class="hero">
|
||||||
|
<h1>Stop Reinventing Fixes.<br><em>Build a Knowledge Engine.</em></h1>
|
||||||
|
<p>ResolutionFlow gives MSP engineers guided troubleshooting flows, AI-assisted resolution, and auto-generated ticket documentation — so your team resolves faster and never loses tribal knowledge.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Problem / Solution -->
|
||||||
|
<div class="two-col">
|
||||||
|
<div class="card problem">
|
||||||
|
<h3>The Problem</h3>
|
||||||
|
<ul>
|
||||||
|
<li>Senior techs solve the same issues from memory — juniors start from scratch every time</li>
|
||||||
|
<li>Ticket notes are inconsistent, incomplete, or missing entirely</li>
|
||||||
|
<li>Tribal knowledge walks out the door when people leave</li>
|
||||||
|
<li>No standard process means unpredictable resolution times</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="card solution">
|
||||||
|
<h3>The ResolutionFlow Solution</h3>
|
||||||
|
<ul>
|
||||||
|
<li>Decision-tree Flows capture your best engineers' proven troubleshooting paths</li>
|
||||||
|
<li>AI copilot guides techs step-by-step and suggests next actions in real time</li>
|
||||||
|
<li>Session documentation is auto-generated and pushed straight to your PSA</li>
|
||||||
|
<li>Knowledge Flywheel turns every session into a potential new Flow</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Key Features -->
|
||||||
|
<div class="section-label">Key Capabilities</div>
|
||||||
|
<div class="features">
|
||||||
|
<div class="feature">
|
||||||
|
<div class="feature-icon">//</div>
|
||||||
|
<h4>Guided Flows</h4>
|
||||||
|
<p>Build troubleshooting, project, and maintenance flows. Engineers follow proven paths instead of guessing.</p>
|
||||||
|
</div>
|
||||||
|
<div class="feature">
|
||||||
|
<div class="feature-icon">AI</div>
|
||||||
|
<h4>FlowPilot AI</h4>
|
||||||
|
<p>AI copilot rides alongside the engineer — suggests options, explains context, and adapts to the situation.</p>
|
||||||
|
</div>
|
||||||
|
<div class="feature">
|
||||||
|
<div class="feature-icon"></></div>
|
||||||
|
<h4>Auto Documentation</h4>
|
||||||
|
<p>Every session generates professional ticket notes. Export as Markdown, HTML, PDF, or push directly to your PSA.</p>
|
||||||
|
</div>
|
||||||
|
<div class="feature">
|
||||||
|
<div class="feature-icon">>></div>
|
||||||
|
<h4>Knowledge Flywheel</h4>
|
||||||
|
<p>AI analyzes completed sessions and proposes new Flows automatically. Your knowledge base grows with every ticket.</p>
|
||||||
|
</div>
|
||||||
|
<div class="feature">
|
||||||
|
<div class="feature-icon"><></div>
|
||||||
|
<h4>PSA Integration</h4>
|
||||||
|
<p>Link sessions to tickets, pull client context, push notes — all without leaving ResolutionFlow.</p>
|
||||||
|
</div>
|
||||||
|
<div class="feature">
|
||||||
|
<div class="feature-icon">*</div>
|
||||||
|
<h4>Team & RBAC</h4>
|
||||||
|
<p>Multi-tenant teams with role-based access. Admins, engineers, and viewers — each sees what they need.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- How It Works -->
|
||||||
|
<div class="how-it-works">
|
||||||
|
<div class="section-label">How It Works</div>
|
||||||
|
<div class="steps-row">
|
||||||
|
<div class="step">
|
||||||
|
<div class="step-num">1</div>
|
||||||
|
<h5>Build a Flow</h5>
|
||||||
|
<p>Create decision trees from your team's best troubleshooting processes</p>
|
||||||
|
</div>
|
||||||
|
<div class="step">
|
||||||
|
<div class="step-num">2</div>
|
||||||
|
<h5>Run a Session</h5>
|
||||||
|
<p>Engineer follows the Flow with AI copilot guidance on every step</p>
|
||||||
|
</div>
|
||||||
|
<div class="step">
|
||||||
|
<div class="step-num">3</div>
|
||||||
|
<h5>Auto-Document</h5>
|
||||||
|
<p>Session notes generated and pushed to your PSA ticket automatically</p>
|
||||||
|
</div>
|
||||||
|
<div class="step">
|
||||||
|
<div class="step-num">4</div>
|
||||||
|
<h5>Learn & Improve</h5>
|
||||||
|
<p>AI proposes new Flows from sessions — your knowledge compounds</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Bottom: Integrations + CTA -->
|
||||||
|
<div class="bottom-row">
|
||||||
|
<div class="integrations">
|
||||||
|
<h3>Integrations & Compatibility</h3>
|
||||||
|
<div class="integration-badges">
|
||||||
|
<span class="badge primary">ConnectWise PSA</span>
|
||||||
|
<span class="badge">Autotask (Coming Soon)</span>
|
||||||
|
<span class="badge">Halo PSA (Coming Soon)</span>
|
||||||
|
<span class="badge">Slack</span>
|
||||||
|
<span class="badge">Teams</span>
|
||||||
|
<span class="badge">Email</span>
|
||||||
|
<span class="badge">PDF / Markdown Export</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="cta-card">
|
||||||
|
<h3>See It In Action</h3>
|
||||||
|
<p>Book a 15-minute demo and see how ResolutionFlow transforms your team's troubleshooting.</p>
|
||||||
|
<div><a href="https://resolutionflow.com" class="cta-button">Visit resolutionflow.com</a></div>
|
||||||
|
<div class="cta-subtext">Free trial available - No credit card required</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
BIN
docs/marketing/resolutionflow-one-pager.pdf
Normal file
BIN
docs/marketing/resolutionflow-one-pager.pdf
Normal file
Binary file not shown.
Reference in New Issue
Block a user