# SNVoip — Business Phone Systems + IT Services

**Domain:** snvoip.com  
**Tagline:** Business phones that just work. IT that protects your bottom line.  
**Goal:** Convert SMB visitors into bundled phone + IT quote requests.

---

## 🏆 Phase 2 Hero Upgrade — Shipped

Every page got an **award-winning, motion-graphics hero** that matches its service:

| Page | Hero composition |
|---|---|
| Home | Pure-CSS VoIP desk phone w/ live caller display + 15-bar animated waveform + concentric call rings + 3 floating callouts |
| Cybersecurity | Threat radar globe + sweep beam + pulsing geo-blips + falling code-rain |
| Cameras | 2×2 live feed grid w/ rec dots, timestamps, simulated scenes (lobby/parking/server-room/exit) |
| Cloud | Cloud silhouette + 6 data-stream particles + animated server-rack rows |
| Access Control | Glass door + biometric reader + scan beam + access-granted pulse |
| Managed IT | NOC dashboard w/ live stat tiles + animated SVG ticket-velocity chart |
| All plan/info pages | Animated gold "award badge" pill + gradient-text on hero headline |

**Trust strip:** infinite marquee showing Nicolas's portfolio — `midpay.me`, `midbank.net`, `traveldrd.com`, `midhost.io`, `midcapital.co`, `midcrypto.io`, `midwallet.com` + customer brands. Injected via `js/components.js` into the `<div id="snv-trust"></div>` slot on **all 13 public pages**.

**Tech notes:**
- Zero external image deps — 100% CSS + inline SVG → instant load, no broken-image risk
- All animations GPU-accelerated (`transform`/`opacity` only)
- `prefers-reduced-motion` honored — animations disable for users who opted out
- Mobile-first: `clamp()`, `aspect-ratio`, breakpoints at 900px/600px

**Verification:** PlaywrightConsoleCapture run on all 16 pages → **0 console errors**.

---

## ✅ What's shipped (15 pages, all live)

| # | Route | Purpose |
|---|---|---|
| 1 | `/index.html` (Home) | Hero, 3-tier pricing, IT services strip, social proof |
| 2 | `/products.html` | Full product overview (phones + IT combined) |
| 3 | `/plans/starter.html` | $19/user/mo plan detail |
| 4 | `/plans/business.html` | $35/user/mo — **live pricing configurator** |
| 5 | `/plans/enterprise.html` | $59/user/mo plan detail |
| 6 | `/it-services/cybersecurity.html` | EDR, SIEM, compliance |
| 7 | `/it-services/cameras.html` | 4K cams, cloud DVR, AI alerts |
| 8 | `/it-services/cloud.html` | M365, Workspace, backups |
| 9 | `/it-services/access-control.html` | Doors, badges, biometric |
| 10 | `/it-services/managed-it.html` | Outsourced helpdesk |
| 11 | `/port-my-number.html` | **Interactive port checker** |
| 12 | `/quote.html` | **5-step quote builder** (conversion event) |
| 13 | `/about.html` | Founder story, principles, team |
| 14 | `/contact.html` | Multi-channel contact form |
| 15 | `/thank-you.html` | Post-submission confirmation |
| Bonus | `/admin.html` | **Internal sales dashboard** — leads pipeline, port checks, notification queue |

---

## 🎯 Interactive features (all working)

### 1. Pricing Configurator → `/plans/business.html`
- Live slider: 1–100 users
- Add-on checkboxes: International calling (+$10/user), Extended recording (+$5/user), Managed IT support (+$200 flat)
- Monthly / Annual billing toggle (15% annual discount math)
- Live total updates as you slide/check
- Config persists to `sessionStorage` and pre-fills `/quote`

### 2. Port-My-Number Checker → `/port-my-number.html`
- US 10-digit regex validation
- Animated 1.5s "checking carriers / verifying portability / confirming LNP" loader
- Area-code → carrier heuristic (20+ area codes mapped)
- Three outcomes: ✓ Portable / ⚠ Needs review / ✗ Invalid format
- Every check auto-saves to `port_checks` table
- Portable hits get CTA → quote builder pre-filled with phone + port_check_id

### 3. 5-Step Quote Builder → `/quote.html`
- **Step 1:** Company size (1-10 / 11-50 / 51-200 / 200+)
- **Step 2:** Phone needs (VoIP / VoIP+VM / Full system / Port only)
- **Step 3:** IT needs (multi-select: cyber, cameras, cloud, access, managed)
- **Step 4:** Contact info (name, company, email, phone, notes) — validated
- **Step 5:** Cal.com embed for optional scheduling
- Pre-fills from `?plan=`, `?service=` URL params, or `sessionStorage`
- On submit: creates `leads` row → `quote_requests` row → queues email + Slack in `notifications_queue` → redirects to `/thank-you?lead=...&company=...`

---

## 🗄️ Database Schema

Four tables (RESTful Table API):

### `leads`
| Field | Type | Notes |
|---|---|---|
| id | text | auto |
| name | text | |
| email | text | |
| phone | text | normalized |
| company | text | |
| company_size | text | enum: 1-10, 11-50, 51-200, 200+ |
| phone_needs | text | enum: voip-only, voip-voicemail, full-system, port-only |
| it_needs | array | multi-select |
| source_page | text | which page they converted on |
| utm | rich_text | JSON: source/medium/campaign |
| status | text | enum: new, contacted, qualified, closed-won, closed-lost |
| notes | rich_text | freeform |
| created_at | number | ms timestamp (auto) |

### `quote_requests`
| Field | Type | Notes |
|---|---|---|
| id | text | auto |
| lead_id | text | FK → leads.id |
| configuration | rich_text | JSON of full quote |
| estimated_monthly_cents | number | computed from configurator |
| users_count | number | |
| plan_tier | text | enum: starter, business, enterprise, custom |
| addons | array | |
| status | text | enum: new, reviewed, sent, won, lost |

### `port_checks`
| Field | Type | Notes |
|---|---|---|
| id | text | auto |
| phone_number | text | formatted |
| area_code | text | first 3 digits |
| carrier_guess | text | heuristic |
| result | text | enum: portable, needs-review, invalid |
| lead_id | text | optional FK |

### `notifications_queue`
| Field | Type | Notes |
|---|---|---|
| id | text | auto |
| channel | text | enum: email, slack |
| recipient | text | email or channel name |
| subject | text | |
| payload | rich_text | full message body |
| status | text | enum: pending, sent, failed |
| lead_id | text | optional |

### Seed data (already loaded)
- **3 leads** — 1 `new`, 1 `contacted`, 1 `closed-won` (so admin dashboard renders)
- **10 port_checks** — mix of `portable` and `needs-review` across different area codes

---

## 🎨 Design system

- **Navy** `#0a1f3d` (primary)
- **Red** `#e94560` (accent / CTAs)
- **Slate** `#5a6478` (body copy)
- **Inter** (body) + **Plus Jakarta Sans** (headings)
- Mobile-perfect at all breakpoints
- Sticky glassmorphic nav with dropdowns
- Custom desk-phone SVG hero, custom IT service illustrations
- Trust strip with 6 placeholder business logos

---

## 🔌 Integration handoff — what's left for Italo / Nicolas

This is a **static site** — it cannot directly call Resend (Email) or Slack webhooks from the browser due to API-key security + CORS. Instead, **every notification is logged to the `notifications_queue` table** with `status=pending`. That's actually a more robust architecture (retry-able, auditable, no client-side key leakage).

### To wire up real email + Slack (15-min job):

**Option A — Zapier (easiest, no code):**
1. Connect Zapier to your Genspark table API (use the URL: `https://YOUR-PUBLISHED-DOMAIN.com/tables/notifications_queue`)
2. Create a Zap: **Trigger** → Webhook polling that table every 5 min for rows where `status=pending`
3. **Action 1 (Email):** For `channel=email` rows → send via Resend / Gmail / Mailgun → use `recipient`, `subject`, `payload`
4. **Action 2 (Slack):** For `channel=slack` rows → POST to your Slack webhook → use `payload` as text
5. **Action 3:** PATCH the row to `status=sent`

**Option B — Make.com / n8n:** Same pattern, more powerful.

**Option C — Cloudflare Worker cron (if you go production):** Hit `/tables/notifications_queue?limit=100` every 60 seconds, dispatch + PATCH status.

### Cal.com embed
Open `quote.html`, find `const CAL_LINK = '';` (around line ~280), paste your real Cal.com URL like `'https://cal.com/nicolas-snvoip/intro-call'`. Scheduler will embed inline at Step 5.

### Direct Slack webhook (optional)
If you have a public Slack incoming-webhook URL, paste it in `js/app.js` → `SLACK_WEBHOOK = ''`. Browser will fire `no-cors` POST as best-effort. **DB queue remains source of truth.**

---

## 📈 Conversion event → Lead Flow

```
User clicks "Get Quote" → quote.html
  ↓
Fills 5 steps (validation at each)
  ↓
On submit:
  1. POST /tables/leads → lead row created (status=new)
  2. POST /tables/quote_requests → quote row created (linked via lead_id)
  3. POST /tables/notifications_queue × 2 → email + Slack queued
  4. Best-effort fetch() to Slack webhook (CORS may block)
  5. Redirect → /thank-you?lead=<id>&company=<name>
  ↓
Zapier picks up pending notifications → fires real email + Slack
```

---

## 🚀 Deploy

This is a static site. **To deploy:**
1. Click the **Publish tab** in Genspark
2. One click → you're live with a public URL
3. Point `snvoip.com` DNS at the published URL (CNAME)

The Publish tab handles SSL, CDN, and route mapping automatically.

---

## 🧪 End-to-end test (do this after publish)

1. Open `/port-my-number.html`, enter `305-555-1234` → should show "✓ Portable from AT&T"
2. Open `/plans/business.html`, slide to 25 users, check all 3 addons → should show ~$1,575/mo
3. Open `/quote.html`, complete all 5 steps with test data → submit
4. Open `/admin.html` → your new lead should appear in the Leads tab
5. Check Notification Queue tab → should see 2 pending rows (email + slack) with full payload

---

## 📂 File structure

```
index.html
products.html
port-my-number.html
quote.html
about.html
contact.html
thank-you.html
admin.html
plans/
  ├── starter.html
  ├── business.html       ← live configurator
  └── enterprise.html
it-services/
  ├── cybersecurity.html
  ├── cameras.html
  ├── cloud.html
  ├── access-control.html
  └── managed-it.html
css/
  └── style.css           ← single design system
js/
  ├── app.js              ← shared utils (UTM capture, DB helpers, phone validation)
  └── components.js       ← header/footer injection
.tables/                  ← schemas + seed data (Genspark-managed)
```

---

## 🔭 Recommended next steps

1. **Wire Zapier** for notifications (15 min) — see Integration handoff above
2. **Replace `(888) 555-VOIP`** with real number across all pages (find/replace)
3. **Plug Cal.com link** into `quote.html` CAL_LINK variable
4. **Swap placeholder trust-strip logos** for real customer logos once you have permission
5. **Set up Google Analytics / Plausible** — add tag to all pages (just the `<head>` script)
6. **A/B test the hero CTA** copy: "Get My Custom Quote" vs "See Pricing in 60 Seconds"
7. **Add a blog** for SEO ("Best VoIP for Dental Offices", "How to Switch from Comcast Business", etc.)
8. **Build a `/case-studies` page** once you have 3+ written customer wins
9. **Add live chat** (Intercom, Crisp, or Tawk.to) for off-hours lead capture
10. **Retarget pixel** (Meta/LinkedIn) on all pages, especially `/quote.html` partial-completers

---

## ⚠️ Known limitations (static-site reality check)

- **No server-side email send** — by design; use Zapier polling
- **No auth on /admin.html** — anyone with the URL sees the dashboard. Once published, either: (a) remove from sitemap + don't link it publicly, (b) move admin to a password-protected subdomain via Cloudflare Access
- **Slack webhook from browser is best-effort** — CORS will likely block. DB queue is source of truth.
- **Port checker carrier-guess is heuristic** — for production accuracy, replace with a real LNP/CNAM lookup API (NumLookup, Twilio Lookup) via a Cloudflare Worker proxy

---

**Built fast. Built clean. Ready to convert.** 🚀