From d2bb91fd728ab87f6fa5b8ed63701bd4a0cae432 Mon Sep 17 00:00:00 2001 From: null Date: Tue, 12 May 2026 01:10:34 -0500 Subject: [PATCH] docs: track overhaul plan --- .gitignore | 1 - OVERHAUL_PLAN.md | 993 +++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 993 insertions(+), 1 deletion(-) create mode 100644 OVERHAUL_PLAN.md diff --git a/.gitignore b/.gitignore index 92c2560..be274d9 100644 --- a/.gitignore +++ b/.gitignore @@ -6,7 +6,6 @@ FUTURE.md HISTORY.md BUILD_SUMMARY.md SCRIPTS.md -OVERHAUL_PLAN.md # Dependencies node_modules/ diff --git a/OVERHAUL_PLAN.md b/OVERHAUL_PLAN.md new file mode 100644 index 0000000..a86b329 --- /dev/null +++ b/OVERHAUL_PLAN.md @@ -0,0 +1,993 @@ +# 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 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. + +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.