# Queue North Website — 2026 Overhaul Plan ## TL;DR Rebuild the current static HTML/CSS/JS website into a modern full-stack app using: - **Vite** — build tool, not Next.js - **React** — SPA with client-side routing via React Router - **Tailwind CSS** — utility-first styling - **shadcn/ui** — component primitives - **Sonner** — toast notifications - **TanStack Query** — server state management - **Express** — backend API - **better-sqlite3** — local SQLite database The current website has good business content, but the structure and visual design feel dated. The rebuild should make Queue North Technologies feel like a modern, trustworthy, premium communications and infrastructure partner. --- ## Current Site Assessment The current project is a static site with: - `index.html` — all pages live in one large file - `styles.css` — large hand-written stylesheet with many page-specific overrides - `main.js` — manual hash-based routing and interactions - Inline Zoho webform scripts - Static assets in `assets/` ### Current Problems 1. **Single giant HTML file** - All pages live inside `index.html`. - Routing is manually handled through hash-based JavaScript. - The structure is hard to maintain and scale. 2. **CSS is doing too much** - `styles.css` is very large. - Many page-specific rules and overrides exist. - Layout feels patched together instead of systemized. 3. **Old visual language** - Current colors lean heavily on dark teal and beige. - Header/logo behavior feels awkward and dated. - Repeated cards and sections lack a strong modern design system. - The site communicates the right business, but not with enough polish. 4. **Fragile contact form flow** - Inline Zoho scripts. - Hidden iframe submission. - Difficult to validate, style, and control in a modern app. 5. **No real application architecture** - No component system. - No API layer. - No database. - No modern routing. - No server-state management. --- ## Target Architecture ## Frontend Stack Use: - **Vite** - **React** - **React Router** - **Tailwind CSS** - **shadcn/ui** - **Sonner** - **TanStack Query** ### Suggested Frontend Structure ```txt client/ src/ app/ App.jsx router.jsx components/ layout/ Header.jsx Footer.jsx MobileNav.jsx sections/ Hero.jsx TrustBar.jsx ServicesGrid.jsx IndustriesGrid.jsx PartnerSection.jsx ContactCTA.jsx ui/ shadcn components pages/ Home.jsx About.jsx Services.jsx ServiceDetail.jsx Industries.jsx IndustryDetail.jsx EightXEight.jsx Contact.jsx Support.jsx lib/ api.js queryClient.js data/ services.js industries.js ``` --- ## Backend Stack Use: - **Express** - **better-sqlite3** ### Suggested Backend Structure ```txt server/ index.js db/ connection.js schema.sql routes/ leads.js support.js health.js services/ leadService.js supportService.js ``` ### Initial API Routes ```txt GET /api/health POST /api/leads POST /api/support GET /api/services GET /api/industries ``` --- ## Database Plan Use SQLite through `better-sqlite3`. ### Initial Tables ```txt leads - id - company - name - email - phone - zip - message - service_interest - created_at support_requests - id - name - company - email - phone - issue - priority - created_at ``` ### Zoho Integration Zoho should not drive the frontend anymore. Recommended path: 1. Frontend submits to Express. 2. Express validates request. 3. Express stores submission in SQLite. 4. Optional later: backend forwards lead data to Zoho. This keeps the website clean, testable, and controllable. --- ## New Visual Direction ## Brand Feel Target vibe: **Bright enterprise communications partner. Clean, trustworthy, modern, approachable, and premium.** The site should feel less like a local IT website from the early 2000s and more like a serious communications, contact center, and infrastructure partner for modern businesses. Because this is a business services website, the visual direction should be **light-first**, not fully dark/cyber. A mostly dark interface can look sleek, but it may also feel too niche, too technical, or too startup/gaming-adjacent for SMB and enterprise buyers. The better direction is a bright, polished base with strong navy sections and crisp blue/cyan accents. ## Recommended Color Scheme ### Primary Light-First Palette ```txt Background: #F8FAFC Section Alt: #EEF6FB Card: #FFFFFF Border: #D8E3EA Text: #0F172A Muted: #475569 Soft Text: #64748B Primary Navy: #0B2A3C Deep Navy: #071A2A Trust Blue: #0EA5E9 Accent Cyan: #22D3EE ``` ### Optional Warm Accent ```txt Signal Gold: #F59E0B ``` Use gold sparingly for badges, stats, certification highlights, or key trust moments. ### Dark Usage Guidance Use dark navy intentionally, not everywhere: - Header or top navigation - Hero section - Footer - CTA bands - Certification/trust moments Keep most body sections bright and readable: - White cards - Light blue-gray section backgrounds - Dark readable text - Blue/cyan action accents This gives the site a modern 2026 look without making it feel like a cybersecurity, crypto, or gaming landing page. --- ## Layout Direction This section is the primary design brief for Scarlett. The layout should feel like a modern B2B technology services website: bright, structured, confident, and conversion-focused. Avoid the early-2000s pattern of giant logos, crowded nav, heavy gradients everywhere, oversized generic images, and repeated boxed sections without rhythm. ### Global Layout Principles - Use a **light-first page body** with strategic dark navy moments. - Use a consistent max-width container: approximately `1200px` to `1280px`. - Use generous vertical spacing: - Mobile sections: `64px` to `80px` - Desktop sections: `96px` to `128px` - Use a clear rhythm: - Dark hero - Light trust section - White/soft-blue service sections - Dark CTA band - Light detail sections - Dark footer - Keep the site visually calm. Do not use too many competing gradients, glows, borders, and shadows at once. - Cards should feel premium and clean, not like old Bootstrap panels. - Prefer fewer stronger sections over many cramped sections. - Every page should have one obvious primary action: usually `Request Consultation` or `Contact Us`. ### Header / Navigation Layout Desktop header: - Sticky top header. - Dark navy or white header is acceptable, but it must be compact and polished. - Logo should be normal-sized and aligned, not oversized or bleeding into content. - Navigation should be single-line and calm: ```txt Home Services Industries 8x8 About Contact Support ``` - Primary CTA button on the right: - `Request Consultation` - Use shadcn/ui `NavigationMenu` if dropdowns are retained. - Avoid wrapping nav links. - Avoid huge dropdown panels unless they add real clarity. Mobile header: - Use shadcn/ui `Sheet` for navigation. - Menu should slide in cleanly. - Primary routes appear first. - Service and industry subroutes can appear under simple section labels. - CTA button should be visible in the sheet. ### Home Page Layout Recommended home page structure: 1. **Hero** - Use a dark navy hero section with bright text. - Large modern headline. - Suggested headline: `Modern Communications Infrastructure Without the Vendor Noise` - Subheading focused on UCaaS, Contact Center, networking, deployment, and managed lifecycle support. - Two CTAs: - Primary: `Request Consultation` - Secondary: `Explore Services` - Right side visual: - Use a refined communications/network image, abstract interface panel, or polished existing asset. - Do not use a raw stock-image block that feels pasted in. - Trust chips below copy: - `8x8 Certified Partner` - `Veteran Owned` - `25+ Years Experience` - `SMB to Enterprise` 2. **Trust / Certification Bar** - Light section directly below hero. - Include 8x8 partner logo or certification language. - Purpose: quickly establish credibility before services. - Keep it compact and horizontal on desktop, stacked on mobile. 3. **Services Preview** - Bright section with white cards. - 6-7 concise service cards. - Each card should include: - Icon or small visual marker - Service name - One-sentence value statement - Subtle `Learn more` affordance - Avoid large image tiles unless imagery is carefully cropped and consistent. 4. **Why Queue North** - Three-pillar layout: - `Architecture` - `Deployment` - `Lifecycle Support` - This section should explain how Queue North works, not just what it sells. - Recommended style: alternating light background with strong typography and small supporting cards. 5. **Industries** - Healthcare - Retail - Manufacturing - Education & Finance - These should feel like solution pathways. - Do not present them as generic stock categories. - Each industry card should connect pain point → Queue North solution. 6. **Final CTA** - Dark navy CTA band near bottom of page. - Suggested copy: `Tell us what you're trying to fix. We'll help map the path.` - CTA button: `Request Consultation` ### Inner Page Layouts Every inner page should use a consistent pattern: 1. **Page Hero** - Short headline. - One paragraph explaining the page value. - Optional badge, e.g. `Service`, `Industry`, or `8x8 Partner`. 2. **Main Content Section** - Use a two-column layout on desktop when useful: - Left: core explanation - Right: card with key benefits, use cases, or CTA - Stack cleanly on mobile. 3. **Supporting Cards** - Use 3-card or 4-card grids for benefits, capabilities, or outcomes. - Keep card heights balanced. 4. **CTA Footer Band** - Each major page should end with a CTA leading to contact. ### Services Page Layout The `/services` page should act as a service hub. - Top page hero explains the whole service model. - Follow with a card grid for all services. - Each service card links to its detail route. - Recommended service card structure: ```txt [small icon] Service Name Short outcome-driven description Learn more → ``` Service detail pages should include: - Hero with service name and value proposition. - Section: `What this solves` - Section: `How Queue North helps` - Section: `Ideal for` - CTA: `Talk to us about this service` ### Industries Page Layout The `/industries` page should explain that Queue North adapts communications and support to operational realities. Industry detail pages should include: - Hero with industry-specific value proposition. - Pain points. - Queue North solution approach. - Relevant services. - CTA. ### Contact / Support Layout Contact and support pages must feel trustworthy and simple. - Use shadcn/ui form primitives. - Keep forms visually clean with clear labels. - Use Sonner toast for success/error states. - Avoid giant intimidating forms. - Use a two-column desktop layout: - Left: reassurance, contact expectations, phone/email if available - Right: form card - On mobile, form comes after the intro copy. ### Design Quality Bar Scarlett should treat the design as unacceptable if it has any of these issues: - Nav wraps on desktop. - Logo is oversized or visually collides with content. - Cards look like default boxes with no hierarchy. - Text contrast is weak. - Sections feel cramped. - Mobile layout feels like a collapsed desktop site. - Images are inconsistent in crop, tone, or quality. - There is no clear CTA above the fold. - The site feels like cybersecurity/gaming/crypto instead of business communications. --- ## Navigation Plan Current dropdown navigation should be simplified. ### Desktop Navigation ```txt Home Services Industries 8x8 About Contact Support ``` ### Mobile Navigation Use shadcn/ui `Sheet`. Mobile nav should: - Open cleanly from a menu button. - Avoid wrapping links. - Show primary routes first. - Include service and industry routes in grouped sections if needed. --- ## Route Plan Replace hash routing with React Router paths. ```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 ``` --- ## Component System Use shadcn/ui primitives wherever available. Required primitives: - `Button` - `Card` - `Sheet` - `Dialog` - `Input` - `Textarea` - `Select` - `Badge` - `Accordion` - `NavigationMenu` - `Toaster` / Sonner integration This will modernize interactions and keep the UI consistent. --- ## Content Model Move repeated content into data files. Suggested files: ```txt client/src/data/services.js client/src/data/industries.js client/src/data/certifications.js client/src/data/stats.js ``` Use these files to render: - Service overview cards - Service detail pages - Industry cards - Industry detail pages - Footer links - Navigation links - Trust badges This prevents duplication and keeps future edits simple. --- ## Scarlett Design Implementation Brief ### Tailwind Theme Tokens Using the **light-first business palette** defined in OVERHAUL_PLAN.md: ```js // tailwind.config.js theme extension theme: { extend: { colors: { background: '#F8FAFC', 'section-alt': '#EEF6FB', card: '#FFFFFF', border: '#D8E3EA', text: '#0F172A', muted: '#475569', 'soft-text': '#64748B', primary: { navy: '#0B2A3C', 'navy-dark': '#071A2A', blue: '#0EA5E9', cyan: '#22D3EE', }, accent: { gold: '#F59E0B', }, }, fontFamily: { sans: ['Inter', 'sans-serif'], }, }, } ``` ### Numeric Typography Rule All numbers in the visual design should use **Georgia**. This applies to stats, counters, years, version displays, numeric badges, metrics, and prominent numeric callouts. Implementation guidance: - Add a reusable Tailwind font family such as `font-numeric` mapped to `Georgia, serif`. - Use the numeric font only on numeric content. - Do not switch body text, headings, nav, or general copy to Georgia. ### Typography Scale ```css /* Base: 16px */ .text-xs: 12px / 16px .text-sm: 14px / 20px .text-base: 16px / 24px .text-lg: 18px / 28px .text-xl: 20px / 30px .text-2xl: 24px / 36px .text-3xl: 30px / 44px .text-4xl: 36px / 52px .text-5xl: 48px / 64px ``` ### Section Spacing / Container Sizes | Breakpoint | Container Max | Section Vertical Spacing | |------------|---------------|--------------------------| | Mobile | `100%` | `64px` / `80px` (bottom) | | Desktop | `1200px` | `96px` / `128px` (bottom) | Use `container mx-auto px-4 md:px-6 lg:px-8` pattern. ### Radius / Shadow / Border Rules ```css /* Borders */ border: 1px solid border-color rounded-lg: 8px rounded-xl: 12px rounded-2xl: 16px /* Shadows */ shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05) shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1) shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) /* Cards */ - White background - subtle border radius (12px) - light shadow - no heavy borders ``` ### shadcn/ui Components to Use Required primitives from `@/components/ui/`: - `Button` — primary/secondary/callouts - `Card` — service cards, industry cards - `Sheet` — mobile navigation - `Input`, `Textarea`, `Select` — forms - `Badge` — certifications, status indicators - `Accordion` — FAQ or details sections - `NavigationMenu` — desktop nav (optional if simple) - `Toast` / `Toaster` — success/error feedback - `Dialog` — optional modal content ### Home Page Layout Blueprint **1. Hero (Dark Navy)** - Full-width, dark background (`bg-primary-navy`) - Max-width container (`1200px`) - Two-column desktop: copy left, visual right - Mobile: stacked, copy first - Headline: `Modern Communications Infrastructure Without the Vendor Noise` - Subhead: UCaaS, Contact Center, Deployment, Lifecycle - Two CTAs: Primary (`Request Consultation`), Secondary (`Explore Services`) - Trust chips below: 8x8 Partner, Veteran Owned, 25+ Years, SMB to Enterprise **2. Trust Bar (Light Section)** - Background: `bg-section-alt` - Horizontal center-aligned icons/logos - Mobile: stacked, centered **3. Services Grid (White Cards)** - Background: `bg-background` - Grid: 2 cols mobile, 3 cols tablet, 4 cols desktop - Each card: icon, name, 1-sentence value, subtle `Learn more` - Shadow: `shadow-sm` **4. Why Queue North (Three Pillars)** - Alternating light/dark sections optional - Card grid: `Architecture | Deployment | Lifecycle Support` - Light background with navy accent text **5. Industries Preview (Solution Pathways)** - Background: `bg-section-alt` - Grid: Healthcare, Retail, Manufacturing, Education & Finance - Each card: pain point → Queue North solution - 2 cols mobile, 4 cols desktop **6. Final CTA (Dark Band)** - Dark navy background - Centered copy: `Tell us what you're trying to fix. We'll help map the path.` - Single CTA: `Request Consultation` ### Service / Industry Detail Layout Blueprint **Page Hero** - Section background: `bg-background` - Left-aligned headline + short intro paragraph - Optional badge (Service / Industry / 8x8 Partner) **Main Content (Two-Column Desktop)** - Desktop: Left = core explanation, Right = benefits/CTA card - Mobile: stacked - Left column: `prose` or clean `p + ul` text - Right column: Card with checklist, use cases, or brief differentiators **Supporting Cards Grid** - 3 or 4 cards - Icons, short titles, 1-sentence descriptions - Grid: 1 col mobile, 2 col tablet, 3 col desktop **CTA Footer Band** - Each major page ends with CTA - Dark navy section - Centered copy + primary button ### Contact / Support Form Layout **Desktop: Two-Column** - Left: reassurance copy, phone/email if available, trust badges - Right: Form Card - Background: `bg-background` **Mobile: Stacked** - Copy first - Form second - Single-column input stacking **Form Components** - `Input` — name, company, email, phone, zip (if needed) - `Textarea` — message or issue description - `Select` — service interest or priority (if applicable) - `Button` — Submit with loading state - `Toast` — success/error via Sonner ### Responsive / Mobile Behavior **Mobile First Rule** - Sections stack vertically - Grids: 1 col → 2 col → 3+ col - Nav: `Sheet` menu slides in from right - Buttons full-width on mobile, constrained width on desktop - Images: full-width or max `max-w-full`, object-cover **Typography Scaling** - Headlines shrink for mobile (e.g., `text-4xl md:text-5xl`) - Body text: `text-base` minimum - Ensure contrast ratio ≥ 4.5:1 **Spacing Rhythm** - Mobile section padding: `py-16` (64px) - Desktop section padding: `py-24` (96px) - Card padding: `p-4 md:p-6` ### Asset / Image Treatment **Guidelines** - Images: consistent aspect ratio (16:9 or 4:3 for hero) - Avoid inconsistent stock-photo quality - Use `object-cover` for hero banners - For card visuals, use consistent sizing and cropping - Replace generic stock with custom illustrations or refined photos **Current Assets Check** - Review `assets/` folder - Confirm logo PNG/SVG at 2x size for retina - Favicon: 32px, 48px, 180px (iPhone), 192px (Android) - Replace placeholder images with clean B2B visuals ### Explicit Anti-Patterns to Avoid ❌ Nav wraps on desktop (single line only) ❌ Oversized logo bleeding into content ❌ Cards with default Bootstrap-style borders ❌ Weak text contrast (dark gray on white, light gray on white) ❌ Sections feeling cramped or inconsistent spacing ❌ Mobile layout feeling like collapsed desktop (no mobile-first grid) ❌ Images inconsistent in crop, tone, or quality ❌ No clear primary CTA above the fold on home ❌ Dark navy used everywhere (feels crypto/cyber/gaming instead of business) ❌ Gradient overlays on every section ❌ Multiple competing typefaces ❌ Large font sizes without line-height spacing --- ## Phase-Based Versioning Version numbers must correlate directly to the active overhaul phase. - **Phase 1** uses `0.1.x` - First Phase 1 release: `0.1.0` - Every completed agent pass/checkpoint within Phase 1: `0.1.1`, `0.1.2`, etc. - **Phase 2** uses `0.2.x` - First Phase 2 release: `0.2.0` - Iterations/fixes within Phase 2: `0.2.1`, `0.2.2`, etc. - **Phase 3** uses `0.3.x` - **Phase 4** uses `0.4.x` - **Phase 5** uses `0.5.x` Rule: the minor version maps to the phase number; the patch version maps to each completed task batch after the full pipeline finishes. Dispatch a task batch, run it through the required agents, then push that completed batch once. Example: Docker task batch goes through Neo → Private Hudson → Bishop → Ripley, then pushes as `0.2.1`. Notes/tags should use the version number only, e.g. `0.2.1`. --- ## Migration Phases ## Phase 1: Scaffold the Stack Goals: - Create Vite React app. - Add Tailwind CSS. - Add shadcn/ui. - Add React Router. - Add Sonner. - Add TanStack Query. - Create Express server. - Add better-sqlite3. - Set up development scripts. Result: - Frontend boots. - Backend boots. - API health check works. - Frontend can call backend. --- ## Phase 2: Rebuild Layout Goals: - Build application shell: - Header - Footer - Layout wrapper - Mobile navigation - Build route pages. - Port existing business content into React components. - Replace hash routing with React Router. - Move repeated content into data files. - Remove legacy `styles.css` file. Result: - Site content exists in the new React app. - Routes are clean and shareable. - Structure is maintainable. - Old global stylesheet removed. --- ## Phase 3: Visual Overhaul Scarlett owns this phase. Goals: - Define Tailwind theme tokens. - Apply new color system. - Improve typography. - Improve spacing scale. - Build responsive-first layouts. - Replace dated cards/sections with modern component patterns. - Improve logo/header placement. - Remove layout jank. - Ensure mobile experience feels intentional. Result: - Website feels modern, premium, and trustworthy. - Visual system is reusable across pages. --- ## Phase 4: Forms + Backend Goals: - Replace inline Zoho iframe form with React form. - Submit contact requests to Express API. - Submit support requests to Express API. - Save submissions in SQLite. - Use Sonner for success/error messages. - Add validation. - Optional later: forward leads to Zoho from backend. Result: - Forms are owned by the application. - Leads/support requests are stored locally. - UX is cleaner and easier to test. --- ## Phase 5: Verification Bishop owns verification. Goals: - Confirm frontend build works. - Confirm backend starts. - Confirm all routes load. - Confirm mobile navigation works. - Confirm contact form submits. - Confirm support form submits. - Confirm SQLite writes succeed. - Confirm no obvious console errors. - Confirm basic accessibility expectations. - Update project documentation. Result: - Rebuild is tested and documented. --- ## Agent Plan Recommended pipeline: 1. **Scarlett** - Create design direction. - Define Tailwind theme. - Define layout system and component expectations. 2. **Neo** - Scaffold Vite + React + Express + SQLite. - Build API/database foundation. - Convert static site into structured app. 3. **Scarlett** - Polish UI implementation. - Enforce shadcn/ui and Tailwind standards. - Review responsive behavior and visual quality. 4. **Bishop** - Verify build/runtime/routes/forms. - Update docs. 5. **Ripley** - Final test. - Commit and push. --- ## Recommendation ```txt Design system first → scaffold/build → polish → verify ``` --- ## Success Criteria The overhaul is successful when: - The site no longer looks or feels early-2000s. - The app runs on the requested stack. - Routing uses React Router, not hash switching. - Styling uses Tailwind, not a giant global stylesheet. - shadcn/ui primitives are used for common UI elements. - Contact/support forms submit through Express. - Form submissions are stored in SQLite. - The site is responsive and polished on mobile. - The content still clearly communicates Queue North's services, 8x8 partnership, and operational expertise.