24 KiB

Raw Permalink Blame History

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

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.
CSS is doing too much
- styles.css is very large.
- Many page-specific rules and overrides exist.
- Layout feels patched together instead of systemized.
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.
Fragile contact form flow
- Inline Zoho scripts.
- Hidden iframe submission.
- Difficult to validate, style, and control in a modern app.
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

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

server/
  index.js
  db/
    connection.js
    schema.sql
  routes/
    leads.js
    support.js
    health.js
  services/
    leadService.js
    supportService.js

Initial API Routes

GET  /api/health
POST /api/leads
POST /api/support
GET  /api/services
GET  /api/industries

Database Plan

Use SQLite through better-sqlite3.

Initial Tables

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:

Frontend submits to Express.
Express validates request.
Express stores submission in SQLite.
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

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

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.

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:

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:

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

Page Hero
- Short headline.
- One paragraph explaining the page value.
- Optional badge, e.g. Service, Industry, or 8x8 Partner.
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.
Supporting Cards
- Use 3-card or 4-card grids for benefits, capabilities, or outcomes.
- Keep card heights balanced.
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:

[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.

Current dropdown navigation should be simplified.

Home
Services
Industries
8x8
About
Contact
Support

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.

/
/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:

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:

// 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

/* 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

/* 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 agent pass/checkpoint inside that phase. Do not use unrelated semantic version bumps during the overhaul.

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:

Scarlett
- Create design direction.
- Define Tailwind theme.
- Define layout system and component expectations.
Neo
- Scaffold Vite + React + Express + SQLite.
- Build API/database foundation.
- Convert static site into structured app.
Scarlett
- Polish UI implementation.
- Enforce shadcn/ui and Tailwind standards.
- Review responsive behavior and visual quality.
Bishop
- Verify build/runtime/routes/forms.
- Update docs.
Ripley
- Final test.
- Commit and push.

Recommendation

Start with Scarlett first, then move to Neo.

Reason:

This is primarily a brand and layout overhaul. If the app is scaffolded before the visual system is defined, the team may build clean code around the wrong structure. The better path is:

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.

24 KiB Raw Permalink Blame History

Queue North Website — 2026 Overhaul Plan

TL;DR

Current Site Assessment

Current Problems

Target Architecture

Frontend Stack

Suggested Frontend Structure

Backend Stack

Suggested Backend Structure

Initial API Routes

Database Plan

Initial Tables

Zoho Integration

New Visual Direction

Brand Feel

Recommended Color Scheme

Primary Light-First Palette

Optional Warm Accent

Dark Usage Guidance

Layout Direction

Global Layout Principles

Header / Navigation Layout

Home Page Layout

Inner Page Layouts

Services Page Layout

Industries Page Layout

Contact / Support Layout

Design Quality Bar

Navigation Plan

Desktop Navigation

Mobile Navigation

Route Plan

Component System

Content Model

Scarlett Design Implementation Brief

Tailwind Theme Tokens

Numeric Typography Rule

Typography Scale

Section Spacing / Container Sizes

Radius / Shadow / Border Rules

shadcn/ui Components to Use

Home Page Layout Blueprint

Service / Industry Detail Layout Blueprint

Contact / Support Form Layout

Responsive / Mobile Behavior

Asset / Image Treatment

Explicit Anti-Patterns to Avoid

Phase-Based Versioning

Migration Phases

Phase 1: Scaffold the Stack

Phase 2: Rebuild Layout

Phase 3: Visual Overhaul

Phase 4: Forms + Backend

Phase 5: Verification

Agent Plan

Recommendation

Success Criteria

24 KiB

Raw Permalink Blame History