167 lines
4.8 KiB
Markdown
167 lines
4.8 KiB
Markdown
# 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.
|