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:
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.
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.
- Port existing business content into React components.
- Replace hash routing with React Router.
- Move repeated content into data files.
Result:
- Site content exists in the new React app.
- Routes are clean and shareable.
- Structure is maintainable.
---
## 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
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:
```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.
