# Queue North Website

## Objective

Queue North Website is the modern rebuild of the Queue North Technologies business website.

The goal is to replace the current static early-2000s-style HTML/CSS/JS site with a polished 2026 business website that clearly presents Queue North as a trustworthy communications, contact center, networking, and managed support partner.

The site should feel:

- Bright and professional
- Modern but not flashy
- Business-first, not cyber/gaming/crypto
- Easy to navigate
- Clear about Queue North's 8x8 partnership and service expertise
- Optimized for consultation and support request conversion

## Target Stack

- **Vite** — build tool, not Next.js
- **React** — SPA frontend
- **React Router** — client-side routing
- **Tailwind CSS** — utility-first styling
- **shadcn/ui** — component primitives
- **Sonner** — toast notifications
- **TanStack Query** — server state management
- **Express** — backend API
- **better-sqlite3** — SQLite database

## Layout Direction

The design direction is a light-first B2B technology layout with strategic dark navy sections.

Primary structure:

1. **Hero**
   - Dark navy section
   - Clear headline and value proposition
   - Primary CTA: `Request Consultation`
   - Secondary CTA: `Explore Services`
   - Trust chips: 8x8 Certified Partner, Veteran Owned, 25+ Years Experience, SMB to Enterprise

2. **Trust / Certification Bar**
   - Light section
   - Reinforces 8x8 partner credibility

3. **Services Preview**
   - White cards on a bright background
   - Concise service explanations
   - Links to service detail pages

4. **Why Queue North**
   - Three-pillar section:
     - Architecture
     - Deployment
     - Lifecycle Support

5. **Industries**
   - Healthcare
   - Retail
   - Manufacturing
   - Education & Finance

6. **Final CTA**
   - Dark navy conversion band
   - Consultation-focused message

## Planned Routes

```txt
/
/about
/services
/services/unified-communications
/services/contact-center
/services/managed-support
/services/consulting-training
/services/infrastructure-cabling
/services/wireless-access
/services/local-networking
/industries
/industries/healthcare
/industries/retail
/industries/manufacturing
/industries/education-finance
/8x8
/contact
/support
```

## Overhaul Phases

Version numbers correlate directly to the active phase:

- **Phase 1 — Stack Scaffold**: `0.1.x`
  - Vite + React app foundation
  - Tailwind CSS setup
  - shadcn/ui-style primitives
  - React Router
  - Express backend
  - better-sqlite3 database
  - Initial API health/contact/support paths

- **Phase 2 — Layout Rebuild**: `0.2.x`
  - App shell: Header, Footer, layout wrapper, mobile nav
  - Route pages fully built and navigable
  - Existing business content ported into React
  - Repeated service/industry content moved into data files
  - Static hash routing fully replaced by React Router

- **Phase 3 — Visual Overhaul**: `0.3.x`
  - Modern light-first business design
  - Tailwind theme polish
  - Typography, spacing, radius, shadows, and responsive rhythm
  - Refined service/industry cards and CTA sections
  - Mobile-first layout polish

- **Phase 4 — Forms + Backend Hardening**: `0.4.x`
  - Contact and support forms fully wired to Express
  - SQLite persistence verified
  - Validation and user feedback with Sonner
  - Optional Zoho forwarding layer
  - Backend/API hardening as needed

- **Phase 5 — Verification + Release Readiness**: `0.5.x`
  - Build/runtime verification
  - Route and form testing
  - Accessibility checks
  - Documentation and release cleanup
  - Final push to `dev` for the completed phase

Patch versions increment for completed agent passes/checkpoints inside each phase. Example: `0.2.0`, then `0.2.1`, `0.2.2`, etc.

## Backend Goals

Initial API endpoints:

```txt
GET  /api/health
POST /api/leads
POST /api/support
```

Initial SQLite tables:

- `leads`
- `support_requests`

Contact and support forms should submit through Express, save to SQLite, and show user feedback with Sonner.

## Agent Plan

The overhaul is handled through the agent pipeline below:

1. **Scarlett** — design system, Tailwind/shadcn layout direction, responsive polish, accessibility review
2. **Neo** — Vite/React implementation, Express API, SQLite/database work, build-system changes
3. **Private Hudson** — security review for API routes, form handling, validation, data exposure, dependency risks, and backend hardening
4. **Scarlett** — UI polish pass after implementation changes
5. **Bishop** — build/runtime verification, route checks, documentation verification, version consistency
6. **Ripley** — final local checks, commit, tag, and push to `dev`

Agents do not touch git. Ripley owns all commits, tags, and pushes.

## Design Source of Truth

See [OVERHAUL_PLAN.md](./OVERHAUL_PLAN.md) for the full rebuild plan and Scarlett's design implementation brief.