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)
|
||||
- **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.
|
||||
- **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:**
|
||||
|
||||
|
||||
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