chore: add docker-push.sh, docker-test.sh, npm scripts, bump v0.5.0

- docker-push.sh: build + tag + push dev image to Forgejo registry
- docker-test.sh: rebuild and run container for local testing
- npm scripts: docker:push and docker:test
- Version bump to 0.5.0 (Phase 5)

.dockerignore

@@ -0,0 +1,76 @@
+# Dependencies
+node_modules
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+# Build output
+dist
+build
+*.tsbuildinfo
+
+# Database runtime files
+db
+*.db
+*.sqlite
+*.sqlite3
+
+# Git
+.git
+.gitignore
+.gitattributes
+
+# Logs
+logs
+*.log
+
+# Private docs (ignored per requirements)
+DEVELOPMENT_LOG.md
+FUTURE.md
+HISTORY.md
+BUILD_SUMMARY.md
+PROJECT.md
+SCRIPTS.md
+STRUCTURE.md
+OVERHAUL_PLAN.md
+MEMORY.md
+AGENTS.md
+SOUL.md
+IDENTITY.md
+USER.md
+TOOLS.md
+
+# IDE
+.idea
+.vscode
+*.swp
+*.swo
+*~
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Docker files (not needed in image)
+Dockerfile
+docker-compose.yml
+.dockerignore
+
+# Runtime data
+*.pid
+*.seed
+coverage/
+
+# Environment files (don't include in image)
+.env
+.env.local
+.env.production
+
+# Docker socket mount (not needed in image)
+/var/run/docker.sock
+
+# Host volume permissions
+# Ensure ./db and ./logs are writable by UID 1001 before running
+# Run: sudo chown -R 1001:1001 ./db ./logs

.env.example

@@ -0,0 +1,5 @@
+# Environment configuration
+# Copy this file to .env and customize as needed
+
+NODE_ENV=production
+SERVER_PORT=3001

.gitignore

@@ -0,0 +1,36 @@
+# Private project/agent docs — never commit
+DEVELOPMENT_LOG.md
+PROJECT.md
+STRUCTURE.md
+FUTURE.md
+HISTORY.md
+BUILD_SUMMARY.md
+SCRIPTS.md
+
+# Dependencies
+node_modules/
+
+# Build output
+dist/
+
+# Runtime/database artifacts
+db/*.db
+db/*.db-*
+
+# Environment/local files
+.env
+.env.*
+!.env.example
+
+# Logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# OS/editor
+.DS_Store
+.vscode/
+.idea/
+.learnings/

DEVELOPMENT_LOG.md

@@ -1,8 +0,0 @@
-# Queue-North-Website — Development Log
-
-## v0.0.1 — 2026-05-11
-
-**Ripley** — Project initialized
-- Created project directory at `/home/kaspa/.openclaw/Projects/Queue-North-Website/`
-- Set up PROJECT.md, STRUCTURE.md, FUTURE.md, HISTORY.md, DEVELOPMENT_LOG.md
-- Git repo not yet initialized (awaiting first code)

Dockerfile

@@ -0,0 +1,68 @@
+# Build stage
+FROM node:20-alpine AS builder
+
+WORKDIR /app
+
+# Copy package files first for layer caching
+COPY package.json package-lock.json* ./
+
+# Install all dependencies for build
+RUN npm ci
+
+# Copy source files
+COPY . .
+
+# Build the frontend
+RUN npm run build
+
+# Production stage
+FROM node:20-alpine AS runner
+
+WORKDIR /app
+
+# Create non-root user for security (consistent UID/GID 1001)
+RUN addgroup -g 1001 -S nodejs && \
+    adduser -S nodejs -u 1001 -G nodejs
+
+# Set environment
+ENV NODE_ENV=production
+ENV SERVER_PORT=3001
+ENV RATE_LIMIT_PER_MINUTE=5
+ENV CORS_ORIGIN=*
+ENV LOG_LEVEL=info
+ENV ZOHO_ENABLED=false
+ENV ZOHO_API_DOMAIN=https://www.zohoapis.com
+ENV ZOHO_CLIENT_ID=
+ENV ZOHO_CLIENT_SECRET=
+ENV ZOHO_REFRESH_TOKEN=
+ENV ZOHO_REDIRECT_URI=
+
+# Create app directory structure
+RUN mkdir -p /app/db /app/logs
+
+# Copy entrypoint script
+COPY docker-entrypoint.sh /usr/local/bin/
+RUN chmod +x /usr/local/bin/docker-entrypoint.sh
+
+# Copy from builder - built artifacts and package manifests
+COPY --from=builder /app/package.json /app/package-lock.json* ./
+COPY --from=builder /app/dist ./dist
+COPY --from=builder /app/server ./server
+
+# Install production dependencies only in runtime stage
+RUN npm ci --omit=dev
+
+# Install su-exec for switching to non-root user
+RUN apk add --no-cache su-exec && \
+    rm -rf /var/cache/apk/*
+
+# Expose backend port
+EXPOSE 3001
+
+# Health check using Node 20 built-in fetch (no wget required)
+HEALTHCHECK --interval=30s --timeout=3s --start-period=10s --retries=3 \
+    CMD node -e "fetch('http://localhost:3001/api/health').then(r => r.ok ? 0 : 1).catch(() => 1)" || exit 1
+
+# Run the Express server via entrypoint (runs as root, then switches to nodejs)
+ENTRYPOINT ["docker-entrypoint.sh"]
+CMD ["node", "server/index.js"]

FUTURE.md

@@ -1,8 +0,0 @@
-# Queue-North-Website — Planning
-
-## Next Items
-*Awaiting project requirements from _null.*
-
----
-
-*Add items here as they are defined. Priority levels: CRITICAL, HIGH, MEDIUM, LOW*

HISTORY.md

@@ -1,6 +0,0 @@
-# Queue-North-Website — Changelog
-
-## v0.0.1
-
-### Added
-- Project initialized with PROJECT.md, STRUCTURE.md, FUTURE.md, HISTORY.md, DEVELOPMENT_LOG.md

OVERHAUL_PLAN.md

@@ -0,0 +1,989 @@
+# 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.

PROJECT.md

@@ -1,23 +0,0 @@
-# Queue North Website
-
-## Overview
-Project: Queue-North-Website
-Created: 2026-05-11
-Status: Active
-
-## Description
-Website project for Queue North. Details TBD.
-
-## Directory Structure
-- `/home/kaspa/.openclaw/Projects/Queue-North-Website/` — Project root
-- All project files live here
-
-## Git
-- **Branch:** `dev` (working), `main` (stable)
-- **Remote:** `ssh://forgejo/null/Queue-North-Website.git`
-
-## Conventions
-- Follow AGENTS.md for agent dispatch protocol
-- Ripley coordinates, Neo codes, Scarlett styles, Bishop verifies, Hudson secures
-- All agents read STRUCTURE.md before starting tasks
-- Ripley owns git — no agent touches git directly

README.md

@@ -0,0 +1,293 @@
+# 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` ✅ Complete
+  - ~~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` ✅ Complete
+  - ~~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` ✅ Complete
+  - ~~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` ✅ Complete
+  - ~~Contact and support forms fully wired to Express~~ ✅
+  - ~~SQLite persistence verified~~ ✅
+  - ~~Client-side validation + Sonner feedback~~ ✅
+  - ~~Server-side validation + input sanitization~~ ✅
+  - ~~Optional Zoho forwarding layer~~ ✅
+  - ~~Rate limiting + security headers + CORS~~ ✅
+  - ~~Backend/API hardening as needed~~ ✅
+
+- **Phase 5 — Verification + Redesign**: `0.5.x` 🔄 In Progress
+  - ~~SPA router fix (BrowserRouter → RouterProvider)~~ ✅
+  - ~~TS generics stripped from .jsx files~~ ✅
+  - ~~Mobile menu Sheet/Dialog fix~~ ✅
+  - ~~DialogTitle accessibility fix~~ ✅
+  - ~~SPA catch-all route for client-side navigation~~ ✅
+  - ~~Image assets copied to public/ (were 404)~~ ✅
+  - ~~Real Queue North logo replacing placeholder~~ ✅
+  - ~~CSP updated for Google Fonts~~ ✅
+  - ~~Hamburger menu + SheetContent CSS fix~~ ✅
+  - ~~tailwindcss-animate installed and configured~~ ✅
+  - Hero section rewrite — B2B clarity, 8x8 partnership prominence
+  - Trust signals section — metrics, badges, certifications
+  - Services rewrite — business outcomes over technical jargon
+  - Why Queue North refinement — concrete differentiators
+  - Footer + CTA pass — contact paths everywhere
+  - Remaining P0/P1 audit fixes (Zoho, su-exec, email constraint)
+  - Accessibility checks
+  - Final push to `dev` for the completed phase
+
+Patch versions increment for completed task batches 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.
+
+## 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.
+
+## Batch Pipeline Rule
+
+Work is dispatched as task batches. A batch runs through the required agents, then Ripley pushes that completed batch once.
+
+Example Docker batch:
+
+```txt
+Neo → Private Hudson → Bishop → Ripley
+```
+
+The whole Docker batch is one checkpoint: `0.2.1`.
+
+Do not increment the patch version for each individual agent inside the same batch. Increment only after the full task batch finishes and is ready to push.
+
+Notes, tags, and checkpoint labels should use only the version number, such as `0.2.1`.
+
+## Design Direction
+
+Based on the redesign review (see `review.md`), the site should feel:
+
+- **Modern, clean, stable** — not experimental, not hacker aesthetic
+- **Business-first** — B2B UCaaS/IT partner, not a dev portfolio
+- **Trust-forward** — 8x8 partnership, certifications, uptime SLAs front and center
+- **Human but competent** — less corporate fluff, more concrete outcomes
+
+Color palette evolution (not rip-and-replace):
+- Keep navy dark base, add teal/cyan accents for depth and hierarchy
+- Improve contrast and spacing
+- Mobile-first — SMB decision-makers browse on phones
+
+Reference brands: RingCentral, Cloudflare, Dialpad — modern but enterprise-trustworthy.
+
+See [review.md](./review.md) for the full redesign assessment.
+
+## Docker Deployment
+
+The application can be containerized using Docker for consistent deployment across environments.
+
+### Prerequisites
+
+- Docker (v20+)
+- Docker Compose (v2+)
+
+### Quick Start
+
+#### Using Docker Compose (Recommended)
+
+```bash
+# Build and start the container
+npm run docker:compose:up
+
+# View logs
+npm run docker:compose:logs
+
+# Stop the container
+npm run docker:compose:down
+```
+
+#### Manual Docker Build
+
+```bash
+# Build the image
+npm run docker:build
+
+# Run the container
+npm run docker:run
+```
+
+### Environment Variables
+
+Set the following in the `.env` file (not included in image by default):
+
+```env
+NODE_ENV=production
+SERVER_PORT=3001
+```
+
+### Data Persistence
+
+SQLite database is persisted in the `./db` directory. Data will survive container restarts.
+
+**Note on data persistence:**
+
+The application uses Docker named volumes (`queuenorth-db` and `queuenorth-logs`) to persist data. Docker manages the ownership and permissions of these volumes automatically, so no manual setup is required.
+
+If you prefer to use host bind mounts instead, ensure your host `./db` and `./logs` directories are owned by UID 1001:
+
+```bash
+mkdir -p ./db ./logs
+sudo chown -R 1001:1001 ./db ./logs
+```
+
+If you encounter "unable to open database file" errors, verify the host directory is writable by the container's UID (1001) or use named volumes as shown above.
+
+### Health Check
+
+The container includes a health check at `/api/health`. A healthy container returns:
+
+```json
+{"status":"ok","timestamp":"2026-05-12T..."}
+```
+
+### Ports
+
+- Backend API: `3001` (host) → `3001` (container)
+
+### Build Optimization
+
+The `.dockerignore` excludes:
+- `node_modules` (reinstalled in container)
+- `dist` (built in container)
+- `db/` (mounted as volume)
+- `.git`, logs, private docs
+
+This ensures minimal image size and reproducible builds.

STRUCTURE.md

@@ -1,25 +0,0 @@
-# Queue-North-Website — Project Structure
-
-## Agent Roles
-
-| Agent | Role | Focus Area |
-|-------|------|------------|
-| Neo | Backend Coder | Server code, APIs, database, build system |
-| Scarlett | UI/Design | Frontend components, Tailwind CSS, layout, visuals |
-| Bishop | Verification | Build, runtime tests, documentation, version bumps |
-| Private_Hudson | Security | Auth, data exposure, input validation, dependency audit |
-| Ripley | Coordinator | Git, deploy, pipeline, task dispatch |
-
-## Code Ownership
-TBD — will be defined as the project takes shape.
-
-## Key Files
-- `PROJECT.md` — Project overview and conventions
-- `STRUCTURE.md` — This file. Agent roles, code ownership, critical paths
-- `FUTURE.md` — Planning doc (what to build next)
-- `HISTORY.md` — Version changelog
-- `DEVELOPMENT_LOG.md` — Agent activity log
-
-## Cross-Cutting Concerns
-- All agents must read this file before starting any task
-- All agents report back to Ripley — no agent-to-agent handoffs

docker-compose.yml

@@ -0,0 +1,34 @@
+version: "3.8"
+
+services:
+  queuenorth:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    container_name: queuenorth-website
+    ports:
+      - "3001:3001"
+    volumes:
+      # Persist SQLite database between runs using named volume
+      # This avoids host permission issues - Docker manages ownership automatically
+      - queuenorth-db:/app/db:rw
+      # Persist logs using named volume
+      - queuenorth-logs:/app/logs:rw
+    environment:
+      - NODE_ENV=production
+      - SERVER_PORT=3001
+      - RATE_LIMIT_PER_MINUTE=5
+      - CORS_ORIGIN=https://queuenorth.com
+      - LOG_LEVEL=info
+      - ZOHO_ENABLED=false
+      - ZOHO_API_DOMAIN=https://www.zohoapis.com
+      - ZOHO_CLIENT_ID=
+      - ZOHO_CLIENT_SECRET=
+      - ZOHO_REFRESH_TOKEN=
+      - ZOHO_REDIRECT_URI=
+    restart: unless-stopped
+    # Container runs as non-root user (UID 1001) for security
+
+volumes:
+  queuenorth-db:
+  queuenorth-logs:

docker-entrypoint.sh

@@ -0,0 +1,17 @@
+#!/bin/sh
+
+# Ensure database and logs directories exist with proper permissions
+# We run as root first (before USER directive), fix permissions, then exec to nodejs
+
+set -e
+
+# Create directories if they don't exist
+mkdir -p /app/db
+mkdir -p /app/logs
+
+# Make directories world-writable to allow the nodejs user to create files
+chmod 777 /app/db
+chmod 777 /app/logs
+
+# Run the Express server as nodejs user
+exec su-exec nodejs node server/index.js

index.html

@@ -1,768 +1,17 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8" />
-  <title>Queue North Technologies</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <meta
-    name="description"
-    content="Queue North Technologies is an official 8x8 Certified Partner delivering UCaaS, Contact Center, deployment, and managed lifecycle support for SMB and enterprise organizations."
-  />
-  <link rel="stylesheet" href="styles.css">
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
-
-  <!-- Favicons -->
-  <link rel="icon" type="image/png" sizes="16x16" href="assets/icons/logo16.png">
-  <link rel="icon" type="image/png" sizes="32x32" href="assets/icons/logo32.png">
-  <link rel="icon" type="image/png" sizes="48x48" href="assets/icons/logo48.png">
-  <link rel="icon" type="image/png" sizes="96x96" href="assets/icons/logo96.png">
-  <link rel="apple-touch-icon" sizes="180x180" href="assets/icons/logo180.png">
-  <link rel="icon" type="image/png" sizes="192x192" href="assets/icons/logo192.png">
-  <link rel="icon" type="image/png" sizes="512x512" href="assets/icons/logo512.png">
-</head>
-
-<body>
-<header class="site-header">
-  <div class="logo">
-    <a href="#home" data-route="home" class="logo-link" aria-label="Queue North Technologies Home">
-      <img src="assets/logo2.png" alt="Queue North Technologies Logo" />
-    </a>
-  </div>
-<nav id="primary-navigation" class="site-nav" aria-label="Primary">
-    <a href="#home" data-route="home">Home</a>
-    <a href="#about" data-route="about">About</a>
-
-    <div class="nav-dropdown">
-      <button class="nav-dropdown-toggle" type="button" data-route="services" aria-haspopup="true" aria-expanded="false">Services</button>
-      <div class="nav-dropdown-menu" role="menu" aria-label="Services menu">
-        <a href="#services" data-route="services" role="menuitem">All Services</a>
-        <a href="#unified-communications" data-route="unified-communications" role="menuitem">Unified Communications</a>
-        <a href="#contact-center" data-route="contact-center" role="menuitem">Contact Center</a>
-        <a href="#managed-support" data-route="managed-support" role="menuitem">Managed Services &amp; Support</a>
-        <a href="#consulting-training" data-route="consulting-training" role="menuitem">Consulting &amp; Training</a>
-        <a href="#infrastructure-cabling" data-route="infrastructure-cabling" role="menuitem">Infrastructure Cabling</a>
-        <a href="#wireless-access" data-route="wireless-access" role="menuitem">Wireless Access</a>
-        <a href="#local-networking" data-route="local-networking" role="menuitem">Local Networking</a>
-      </div>
-    </div>
-
-    <a href="#8x8" data-route="eightx8">8x8</a>
-
-    <div class="nav-dropdown">
-      <button class="nav-dropdown-toggle" type="button" data-route="industries" aria-haspopup="true" aria-expanded="false">Industries</button>
-      <div class="nav-dropdown-menu" role="menu" aria-label="Industries menu">
-        <a href="#industries" data-route="industries" role="menuitem">All Industries</a>
-        <a href="#healthcare" data-route="healthcare" role="menuitem">Healthcare</a>
-        <a href="#retail" data-route="retail" role="menuitem">Retail</a>
-        <a href="#manufacturing" data-route="manufacturing" role="menuitem">Manufacturing</a>
-        <a href="#education-finance" data-route="education-finance" role="menuitem">Education &amp; Finance</a>
-      </div>
-    </div>
-
-    <a href="#contact" data-route="contact">Contact Us</a>
-    <a href="#support" data-route="support">Support</a>
-  </nav>
-</header>
-
-  <main class="app">
-    <!-- HOME -->
-    <section id="page-home" class="page active" data-page="home" aria-labelledby="home-title">
-      <div class="hero hero-split">
-        <div class="hero-inner hero-split-inner">
-
-          <div class="hero-content">
-<h1 id="home-title">UCaaS & Contact Center Experts</h1>
-            <p>
-              Queue North Technologies is an official 8x8 Certified Partner holding Sales, Sales Engineer, Build, Deployment, and Support Certifications.
-              We design, implement, and operate secure, scalable communication environments for SMB and enterprise organizations.
-            </p>
-
-            <div class="hero-actions">
-              <button id="cta-consultation" class="primary-btn">Request a Consultation</button>
-            </div>
-
-            <div class="hero-trust">
-              <span>Official 8x8 Certified Partner</span>
-              <span>Veteran Owned</span>
-              <span>25+ Years Experience</span>
-              <span>SMB to Enterprise</span>
-            </div>
-          </div>
-
-          <!-- IMAGE AREA (real image, no visible box) -->
-          <div class="hero-media" aria-label="Homepage visual">
-            <img
-              class="hero-photo"
-              src="assets/hero-tech.png"
-              alt="Technician working in a data center"
-              loading="eager"
-              decoding="async"
-            />
-
-            <!-- Rotating phrases + final lockup (overlayed on the image, bottom-left) -->
-            <div class="hero-media-overlay" aria-hidden="true">
-              <div class="hero-rotator">
-                <span id="hero-rotator-text" class="hero-rotator-text"></span>
-              </div>
-
-				<div id="hero-lockup" class="hero-lockup hero-lockup-subtitle is-hidden">
-				  <div class="hero-brand">Queue North</div>
-				  <div>Where Stability Meets Direction</div>
-				</div>
-            </div>
-          </div>
-
-        </div>
-      </div>
-
-      <!-- Keep only a tight “why us” summary on Home -->
-      <section class="section">
-        <div class="container card-grid">
-          <div class="card">
-            <h3>End-to-End Ownership</h3>
-            <p>Architecture, deployment, adoption, and long-term operational support — with documentation and accountability.</p>
-          </div>
-          <div class="card">
-            <h3>Operational Clarity</h3>
-            <p>We align platform features to workflows, call flows, and real-world staffing — not marketing checklists.</p>
-          </div>
-          <div class="card">
-            <h3>Reliable Support</h3>
-            <p>Consistent escalation management, change control, and an operator mindset that sticks after go-live.</p>
-          </div>
-        </div>
-      </section>
-    </section>
-
-    <!-- ABOUT -->
-	<section id="page-about" class="page" data-page="about" aria-labelledby="about-title">
-		  <section class="about-canvas" aria-labelledby="about-title">
-			<div class="about-panel about-panel-left">
-			  <h2 id="about-title">About Queue North Technologies</h2>
-			  <p>
-				Veteran-owned communications and networking partner focused on reliable, future-ready systems.
-				We tell you the truth and align technology to operations — not licensing structures.
-			  </p>
-			</div>
-
-			<div class="about-panel about-panel-right">
-			  <h3>What Sets Us Apart</h3>
-			  <ul class="bullet-list">
-				<li>Trustworthy, straightforward guidance</li>
-				<li>Veteran-owned leadership and discipline</li>
-				<li>25+ years in telecommunications and networking</li>
-				<li>Flexible service levels and support governance</li>
-				<li>Only pay for the features and services you actually need</li>
-			  </ul>
-			</div>
-		  </section>
-		</section>
-		
-<!-- SERVICES -->
-
-<section id="page-services" class="page" data-page="services" aria-labelledby="services-title">
-  <section class="page-hero alt-section">
-    <div class="container page-hero-inner">
-      <h2 id="services-title">Services</h2>
-      <p class="section-intro">
-        Modern communication, networking, and support services built around your operations today and your growth tomorrow
-      </p>
-    </div>
-  </section>
-
-  <section class="section">
-    <div class="container services-grid">
-
-      <a class="service-item" href="#unified-communications" data-route="unified-communications">
-        <img class="service-overview-image" src="assets/Unified communications in a modern office.png" alt="Unified Communications" loading="lazy" decoding="async" />
-        <div class="card service-overview-card">
-          <h3>Unified Communications</h3>
-          <p>Voice, meetings, and messaging that keep your people connected without adding operational friction.</p>
-        </div>
-      </a>
-
-      <a class="service-item" href="#contact-center" data-route="contact-center">
-        <img class="service-overview-image" src="assets/Modern call center in action.png" alt="Contact Center" loading="lazy" decoding="async" />
-        <div class="card service-overview-card">
-          <h3>Contact Center</h3>
-          <p>Customer engagement built with routing, reporting, and workflow control that support real operational performance.</p>
-        </div>
-      </a>
-
-      <a class="service-item" href="#managed-support" data-route="managed-support">
-        <img class="service-overview-image" src="assets/Managed Support.png" alt="Managed Services and Support" loading="lazy" decoding="async" />
-        <div class="card service-overview-card">
-          <h3>Managed Services &amp; Support</h3>
-          <p>Consistent support, clear accountability, and lifecycle management that keep your environment stable long after deployment.</p>
-        </div>
-      </a>
-
-      <a class="service-item" href="#consulting-training" data-route="consulting-training">
-        <img class="service-overview-image" src="assets/Consulting &amp; Training.png" alt="Consulting and Training" loading="lazy" decoding="async" />
-        <div class="card service-overview-card">
-          <h3>Consulting &amp; Training</h3>
-          <p>Straightforward guidance and practical training that help your team use technology with confidence and discipline.</p>
-        </div>
-      </a>
-
-      <a class="service-item" href="#infrastructure-cabling" data-route="infrastructure-cabling">
-        <img class="service-overview-image" src="assets/Cabling.png" alt="Infrastructure Cabling" loading="lazy" decoding="async" />
-        <div class="card service-overview-card">
-          <h3>Infrastructure Cabling</h3>
-          <p>Clean structured cabling that gives your business the physical foundation for reliable communication and growth.</p>
-        </div>
-      </a>
-
-      <a class="service-item" href="#wireless-access" data-route="wireless-access">
-        <img class="service-overview-image" src="assets/Wireless.png" alt="Wireless Access" loading="lazy" decoding="async" />
-        <div class="card service-overview-card">
-          <h3>Wireless Access</h3>
-          <p>Business Wi‑Fi designed for usable coverage, dependable performance, and fewer support headaches across your environment.</p>
-        </div>
-      </a>
-
-      <a class="service-item" href="#local-networking" data-route="local-networking">
-        <img class="service-overview-image" src="assets/Local Networking.png" alt="Local Networking" loading="lazy" decoding="async" />
-        <div class="card service-overview-card">
-          <h3>Local Networking</h3>
-          <p>Switching and routing built for stability, visibility, and secure local network performance.</p>
-        </div>
-      </a>
-
-    </div>
-  </section>
-</section>
-
-
-<section id="page-unified-communications" class="page" data-page="unified-communications" aria-labelledby="unified-communications-title">
-  <section class="section service-page-section alt-section">
-    <div class="container service-page-content">
-      <h2 id="unified-communications-title" class="service-page-title">Unified Communications</h2>
-      <img class="service-page-image" src="assets/Unified communications in a modern office.png" alt="Unified Communications service" loading="lazy" decoding="async" />
-      <p class="service-page-tagline">Voice, meetings, and messaging that keep your people connected without adding operational friction.</p>
-    </div>
-  </section>
-</section>
-
-<section id="page-contact-center" class="page" data-page="contact-center" aria-labelledby="contact-center-title">
-  <section class="section service-page-section alt-section">
-    <div class="container service-page-content">
-      <h2 id="contact-center-title" class="service-page-title">Contact Center</h2>
-      <img class="service-page-image" src="assets/Modern call center in action.png" alt="Contact Center service" loading="lazy" decoding="async" />
-      <p class="service-page-tagline">Customer engagement built with routing, reporting, and workflow control that support real operational performance.</p>
-    </div>
-  </section>
-</section>
-
-<section id="page-managed-support" class="page" data-page="managed-support" aria-labelledby="managed-support-title">
-  <section class="section service-page-section alt-section">
-    <div class="container service-page-content">
-      <h2 id="managed-support-title" class="service-page-title">Managed Services &amp; Support</h2>
-      <img class="service-page-image" src="assets/Managed Support.png" alt="Managed Services and Support service" loading="lazy" decoding="async" />
-      <p class="service-page-tagline">Consistent support, clear accountability, and lifecycle management that keep your environment stable long after deployment.</p>
-    </div>
-  </section>
-</section>
-
-<section id="page-consulting-training" class="page" data-page="consulting-training" aria-labelledby="consulting-training-title">
-  <section class="section service-page-section alt-section">
-    <div class="container service-page-content">
-      <h2 id="consulting-training-title" class="service-page-title">Consulting &amp; Training</h2>
-      <img class="service-page-image" src="assets/Consulting & Training.png" alt="Consulting and Training service" loading="lazy" decoding="async" />
-      <p class="service-page-tagline">Straightforward guidance and practical training that help your team use technology with confidence and discipline.</p>
-    </div>
-  </section>
-</section>
-
-<section id="page-infrastructure-cabling" class="page" data-page="infrastructure-cabling" aria-labelledby="infrastructure-cabling-title">
-  <section class="section service-page-section alt-section">
-    <div class="container service-page-content">
-      <h2 id="infrastructure-cabling-title" class="service-page-title">Infrastructure Cabling</h2>
-      <img class="service-page-image" src="assets/Cabling.png" alt="Infrastructure Cabling service" loading="lazy" decoding="async" />
-      <p class="service-page-tagline">Clean structured cabling that gives your business the physical foundation for reliable communication and growth.</p>
-    </div>
-  </section>
-</section>
-
-<section id="page-wireless-access" class="page" data-page="wireless-access" aria-labelledby="wireless-access-title">
-  <section class="section service-page-section alt-section">
-    <div class="container service-page-content">
-      <h2 id="wireless-access-title" class="service-page-title">Wireless Access</h2>
-      <img class="service-page-image" src="assets/Wireless.png" alt="Wireless Access service" loading="lazy" decoding="async" />
-      <p class="service-page-tagline">Business Wi‑Fi designed for usable coverage, dependable performance, and fewer support headaches across your environment.</p>
-    </div>
-  </section>
-</section>
-
-<section id="page-local-networking" class="page" data-page="local-networking" aria-labelledby="local-networking-title">
-  <section class="section service-page-section alt-section">
-    <div class="container service-page-content">
-      <h2 id="local-networking-title" class="service-page-title">Local Networking</h2>
-      <img class="service-page-image" src="assets/Local Networking.png" alt="Local Networking service" loading="lazy" decoding="async" />
-      <p class="service-page-tagline">Switching and routing built for secure local performance, clean management, and the operational visibility your business needs.</p>
-    </div>
-  </section>
-</section>
-
-    <!-- 8x8 -->
-    <section id="page-8x8" class="page" data-page="eightx8" aria-labelledby="eightx8-title">
-      <section class="page-hero">
-        <div class="container page-hero-inner">
-          <div>
-            <h2 id="eightx8-title">8x8 Certified Partner</h2>
-
-            <ul class="bullet-list">
-              <li>Solution design, licensing strategy, and platform fit</li>
-              <li>Deployment planning, number porting, and migrations</li>
-              <li>Configuration, routing, reporting, and operational governance</li>
-              <li>Post-deployment support, escalation, and change control</li>
-            </ul>
-          </div>
-
-          <div class="page-hero-media">
-            <div class="partner-lockup">
-              <img
-                class="partner-lockup-img"
-                src="assets/JointLogoWhite.png"
-                alt="Queue North Technologies | 8x8 Certified Partner"
-              />
-              <div class="small-muted partner-lockup-caption">
-                Queue North holds 8x8 Sales, Sales Engineer, Build, Deployment, and Support Certifications — enabling full lifecycle delivery.
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      <section class="section alt-section">
-        <div class="container card-grid">
-          <div class="card">
-            <h3>UCaaS</h3>
-            <p>Voice, meetings, and messaging delivered with documentation, governance, and operational clarity.</p>
-          </div>
-          <div class="card">
-            <h3>Contact Center</h3>
-            <p>Queue strategy, routing logic, reporting, and workforce workflows built for real performance visibility.</p>
-          </div>
-          <div class="card">
-            <h3>Lifecycle Support</h3>
-            <p>We stay accountable after go-live — support structure, escalation, and change control that doesn’t fall apart.</p>
-          </div>
-        </div>
-      </section>
-    </section>
-
-	<!-- INDUSTRIES -->
-	<section id="page-industries" class="page" data-page="industries" aria-labelledby="industries-title">
-	  <section class="page-hero alt-section">
-		<div class="container page-hero-inner">
-		  <div>
-			<h2 id="industries-title">Industries We Serve</h2>
-			<p class="section-intro">
-			  We focus on sectors where communication, reliability, and integration directly impact operations and customer experience.
-			</p>
-		  </div>
-		</div>
-	  </section>
-
-	  <section class="section">
-		<div class="container industries-grid">
-
-		  <div class="industry-item">
-			<img class="industry-image" src="assets/Healthcare.png" alt="Healthcare" loading="lazy" decoding="async" />
-			<div class="card industry-card">
-			  <h3>Healthcare</h3>
-			  <p>Patient experience, scheduling, and staff coordination with a focus on compliance.</p>
-			</div>
-		  </div>
-
-		  <div class="industry-item">
-			<img class="industry-image" src="assets/Retail.png" alt="Retail" loading="lazy" decoding="async" />
-			<div class="card industry-card">
-			  <h3>Retail</h3>
-			  <p>Connect stores, back office, and support teams while improving customer interaction.</p>
-			</div>
-		  </div>
-
-		  <div class="industry-item">
-			<img class="industry-image" src="assets/Manufacturing.png" alt="Manufacturing" loading="lazy" decoding="async" />
-			<div class="card industry-card">
-			  <h3>Manufacturing</h3>
-			  <p>Reliable office-to-plant communications including paging and alerting for production environments.</p>
-			</div>
-		  </div>
-
-		  <div class="industry-item">
-			<!-- If you keep the space in the filename, use %20 -->
-			<img class="industry-image" src="assets/Financial%20Services.png" alt="Education & Finance" loading="lazy" decoding="async" />
-			<div class="card industry-card">
-			  <h3>Education &amp; Finance</h3>
-			  <p>Campus communications and customer-facing communications in tightly regulated environments.</p>
-			</div>
-		  </div>
-
-		</div>
-	  </section>
-	</section>
-
-<section id="page-healthcare" class="page" data-page="healthcare" aria-labelledby="healthcare-title">
-  <section class="section service-page-section alt-section">
-    <div class="container service-page-content">
-      <h2 id="healthcare-title" class="service-page-title">Healthcare</h2>
-      <img class="service-page-image" src="assets/Healthcare.png" alt="Healthcare industry" loading="lazy" decoding="async" />
-      <p class="service-page-tagline">Patient experience, scheduling, and staff coordination with a focus on compliance.</p>
-    </div>
-  </section>
-</section>
-
-<section id="page-retail" class="page" data-page="retail" aria-labelledby="retail-title">
-  <section class="section service-page-section alt-section">
-    <div class="container service-page-content">
-      <h2 id="retail-title" class="service-page-title">Retail</h2>
-      <img class="service-page-image" src="assets/Retail.png" alt="Retail industry" loading="lazy" decoding="async" />
-      <p class="service-page-tagline">Connect stores, back office, and support teams while improving customer interaction.</p>
-    </div>
-  </section>
-</section>
-
-<section id="page-manufacturing" class="page" data-page="manufacturing" aria-labelledby="manufacturing-title">
-  <section class="section service-page-section alt-section">
-    <div class="container service-page-content">
-      <h2 id="manufacturing-title" class="service-page-title">Manufacturing</h2>
-      <img class="service-page-image" src="assets/Manufacturing.png" alt="Manufacturing industry" loading="lazy" decoding="async" />
-      <p class="service-page-tagline">Reliable office-to-plant communications including paging and alerting for production environments.</p>
-    </div>
-  </section>
-</section>
-
-<section id="page-education-finance" class="page" data-page="education-finance" aria-labelledby="education-finance-title">
-  <section class="section service-page-section alt-section">
-    <div class="container service-page-content">
-      <h2 id="education-finance-title" class="service-page-title">Education &amp; Finance</h2>
-      <img class="service-page-image" src="assets/Financial%20Services.png" alt="Education and Finance industry" loading="lazy" decoding="async" />
-      <p class="service-page-tagline">Campus communications and customer-facing communications in tightly regulated environments.</p>
-    </div>
-  </section>
-</section>
-
-    <!-- CONTACT -->
-    <section id="page-contact" class="page" data-page="contact" aria-labelledby="contact-title">
-      <section class="page-hero">
-        <div class="container page-hero-inner">
-          <div>
-            <h2 id="contact-title">Contact Us</h2>
-            <p class="section-intro">
-              If your environment provides no insight or accountability — or support is slow and inconsistent — we can help.
-              Share a few details and we’ll provide clear direction.
-            </p>
-          </div>
-        </div>
-        </div>
-      </section>
-
-      <section class="section alt-section">
-        <div class="container two-column">
-          <div>
-            <h3>What we’ll help you do</h3>
-            <ul class="bullet-list">
-              <li>Identify the features you actually need</li>
-              <li>Align solutions with operations and budget</li>
-              <li>Plan deployment, migration, and training</li>
-              <li>Ask how you qualify for our free migration</li>
-            </ul>
-          </div>
-
-          <div>
-            <div class="wf_customMessageBox" id="wf_splash" style="display:none" role="status" aria-live="polite">
-              <div class="wf_customCircle" aria-hidden="true">
-                <div class="wf_customCheckMark"></div>
-              </div>
-              <span id="wf_splash_info"></span>
-              <button type="button" class="wf_customClose" id="wf_splash_close" aria-label="Close message"></button>
-            </div>
-
-            <form
-              id="contact-form"
-              class="contact-form"
-              name="WebToLeads7130861000000581796"
-              method="POST"
-              action="https://crm.zoho.com/crm/WebToLeadForm"
-              target="zoho_webform_iframe"
-              accept-charset="UTF-8"
-            >
-              <!-- Zoho CRM required hidden fields. Do not remove. -->
-              <input type="hidden" name="xnQsjsdp" value="b78607b2ef073f134a736184c22aa442ba026b6b00cfdbcb8078d8dee0bb1bbd" />
-              <input type="hidden" name="zc_gad" id="zc_gad" value="" />
-              <input type="hidden" name="xmIwtLD" value="e1201f09c921b74ca7844fca8689433ad14277423595fe88de0e4cd6c58e43e743fb001043cb5229e129ff4ab8b2beea" />
-              <input type="hidden" name="actionType" value="TGVhZHM=" />
-              <input type="hidden" name="returnURL" value="null" />
-              <input type="text" name="aG9uZXlwb3Q" value="" tabindex="-1" autocomplete="off" aria-hidden="true" style="display:none;" />
-
-              <label for="Last_Name">
-                Name <span aria-hidden="true">*</span>
-                <input type="text" id="Last_Name" name="Last Name" maxlength="80" required />
-              </label>
-
-              <label for="Company">
-                Company <span aria-hidden="true">*</span>
-                <input type="text" id="Company" name="Company" maxlength="200" required />
-              </label>
-
-              <label for="Zip_Code">
-                Zip Code <span aria-hidden="true">*</span>
-                <input type="text" id="Zip_Code" name="Zip Code" maxlength="30" inputmode="numeric" autocomplete="postal-code" required />
-              </label>
-
-              <label for="Email">
-                Email <span aria-hidden="true">*</span>
-                <input type="email" id="Email" name="Email" maxlength="100" required />
-              </label>
-
-              <label for="Phone">
-                Phone
-                <input type="tel" id="Phone" name="Phone" maxlength="30" autocomplete="tel" />
-              </label>
-
-              <label for="Description">
-                How can we help? <span aria-hidden="true">*</span>
-                <textarea id="Description" name="Description" rows="4" required></textarea>
-              </label>
-
-              <button type="submit" id="formsubmit" class="primary-btn">Submit</button>
-              <p id="form-status" class="form-status" aria-live="polite"></p>
-            </form>
-            <iframe name="zoho_webform_iframe" id="zoho_webform_iframe" title="Zoho form submission" style="display:none;"></iframe>
-
-            <!-- Zoho CRM webform validation and splash-message submit handling. Scoped to this form. -->
-            <script>
-              function validateEmail7130861000000581796() {
-                var form = document.forms['WebToLeads7130861000000581796'];
-                var emailFld = form.querySelector('[name="Email"]');
-                if (!emailFld) return true;
-                var emailVal = emailFld.value.replace(/^\s+|\s+$/g, '');
-                if (emailVal.length !== 0) {
-                  var atpos = emailVal.indexOf('@');
-                  var dotpos = emailVal.lastIndexOf('.');
-                  if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= emailVal.length) {
-                    alert('Please enter a valid email address.');
-                    emailFld.focus();
-                    return false;
-                  }
-                }
-                return true;
-              }
-
-              function checkMandatory7130861000000581796() {
-                var form = document.forms['WebToLeads7130861000000581796'];
-                var mandatoryFields = ['Company', 'Last Name', 'Email', 'Zip Code', 'Description'];
-                var labels = ['Company', 'Name', 'Email', 'Zip Code', 'How can we help?'];
-
-                for (var i = 0; i < mandatoryFields.length; i++) {
-                  var fieldObj = form[mandatoryFields[i]];
-                  if (fieldObj && fieldObj.value.replace(/^\s+|\s+$/g, '').length === 0) {
-                    alert(labels[i] + ' cannot be empty.');
-                    fieldObj.focus();
-                    return false;
-                  }
-                }
-
-                if (!validateEmail7130861000000581796()) {
-                  return false;
-                }
-
-                var existingServiceField = form.querySelector('input[name="service"]');
-                if (existingServiceField) {
-                  existingServiceField.remove();
-                }
-
-                var urlparams = new URLSearchParams(window.location.search);
-                if (urlparams.has('service') && urlparams.get('service') === 'smarturl') {
-                  var serviceField = document.createElement('input');
-                  serviceField.setAttribute('type', 'hidden');
-                  serviceField.setAttribute('value', urlparams.get('service'));
-                  serviceField.setAttribute('name', 'service');
-                  form.appendChild(serviceField);
-                }
-
-                return true;
-              }
-
-              (function () {
-                var form = document.getElementById('contact-form');
-                var submitButton = document.getElementById('formsubmit');
-                var status = document.getElementById('form-status');
-                var splash = document.getElementById('wf_splash');
-                var splashInfo = document.getElementById('wf_splash_info');
-                var splashClose = document.getElementById('wf_splash_close');
-                var splashTimer;
-
-                function showSplash(message) {
-                  if (!splash || !splashInfo) return;
-                  splashInfo.textContent = message || 'Thank you. Your information has been submitted.';
-                  splash.style.display = 'flex';
-                  clearTimeout(splashTimer);
-                  splashTimer = setTimeout(function () {
-                    splash.style.display = 'none';
-                  }, 5000);
-                }
-
-                if (splashClose) {
-                  splashClose.addEventListener('click', function () {
-                    if (splash) splash.style.display = 'none';
-                  });
-                }
-
-                if (!form) return;
-
-                var submitPending = false;
-                var iframe = document.getElementById('zoho_webform_iframe');
-
-                if (iframe) {
-                  iframe.addEventListener('load', function () {
-                    if (!submitPending) return;
-                    submitPending = false;
-                    form.reset();
-                    showSplash('Thank you. Your information has been submitted.');
-                    if (submitButton) {
-                      submitButton.removeAttribute('disabled');
-                      submitButton.textContent = 'Submit';
-                    }
-                  });
-                }
-
-                form.addEventListener('submit', function (event) {
-                  if (!checkMandatory7130861000000581796()) {
-                    event.preventDefault();
-                    return;
-                  }
-
-                  if (submitButton) {
-                    submitButton.setAttribute('disabled', 'disabled');
-                    submitButton.textContent = 'Submitting...';
-                  }
-                  if (status) {
-                    status.textContent = '';
-                  }
-
-                  if (typeof _wfa_track !== 'undefined' && _wfa_track.wfa_submit) {
-                    _wfa_track.wfa_submit(event);
-                  }
-
-                  submitPending = true;
-
-                  setTimeout(function () {
-                    if (submitPending) {
-                      submitPending = false;
-                      form.reset();
-                      showSplash('Thank you. Your information has been submitted.');
-                      if (submitButton) {
-                        submitButton.removeAttribute('disabled');
-                        submitButton.textContent = 'Submit';
-                      }
-                    }
-                  }, 3500);
-                });
-              })();
-            </script>
-
-            <!-- Zoho CRM webform analytics. Do not remove. -->
-            <script id="wf_anal" src="https://crm.zohopublic.com/crm/WebFormAnalyticsServeServlet?rid=e44e9662530fc5bd9cdd3c43501fc243f89ba03759e7946c4b5e5016795b606b59b54d0e73c68671b2140fac5c8e788agid3b907524e85f9cba94899d77d7200771ee5d0ea567c43ec341d7b2ce40324d40gid26922a9cd1e8191a5f58ecb2524e0d22b8dd027eb943658ee681ab6890436af2gidefa1b1002d15951a0a2ac36cb33cdb4b5c6aeb110e6f4ac68b764345b9429653&tw=e048253ca680b107993ed5922e00cc1ebab3de97e797fce56fc6ad6af0dfc0bc"></script>
-          </div>
-        </div>
-      </section>
-    </section>
-
-    <!-- SUPPORT -->
-	<!-- SUPPORT -->
-	<section id="page-support" class="page" data-page="support" aria-labelledby="support-title">
-	  <section class="page-hero alt-section">
-		<div class="container support-hero-inner">
-		  <!-- LEFT: title + intro + form (centered) -->
-		  <div class="support-hero-left">
-			<h2 id="support-title">Support</h2>
-			<p class="section-intro">
-			  Need to sign up for the Queue North Support Center? Create an account to access our knowledge base and submit support tickets.
-			</p>
-
-			<div class="support-action-card" aria-label="Queue North Support Center options">
-			  <a
-				class="primary-btn support-action-btn"
-				href="https://queuenorthtechnologiesllc.zohodesk.com/portal/en/signup"
-				target="_blank"
-				rel="noopener noreferrer"
-			  >Create Account</a>
-
-			  <p class="support-member-text">Already a member?</p>
-
-			  <a
-				class="primary-btn support-action-btn"
-				href="https://queuenorthtechnologiesllc.zohodesk.com/portal/en/signin"
-				target="_blank"
-				rel="noopener noreferrer"
-			  >Sign In</a>
-
-			  <div class="support-phone-block">
-				<span>Or call our support team</span>
-				<span class="support-phone">(321) 730-8020</span>
-			  </div>
-			</div>
-		  </div>
-
-		  <!-- RIGHT: image (no card/container styling) -->
-		  <div class="support-hero-right" aria-label="Support visual">
-			<img
-			  class="support-hero-image"
-			  src="assets/support.png"
-			  alt="Support agent assisting a customer"
-			  loading="lazy"
-			  decoding="async"
-			/>
-		  </div>
-		</div>
-	  </section>
-	</section>
-
-  </main>
-
-  <footer class="site-footer">
-    <div class="container footer-main">
-      <div class="footer-brand">
-        <div class="footer-heading">Queue North Technologies</div>
-        <p>Veteran-owned communications and networking partner.</p>
-      </div>
-
-      <div class="footer-column footer-phone">
-        <div class="footer-heading">Phone</div>
-        <a href="tel:+13217308020">Direct: (321) 730-8020</a>
-        <a href="tel:+18886562850">Toll-Free: (888) 656-2850</a>
-      </div>
-
-      <div class="footer-column footer-quick-links">
-        <div class="footer-heading">Quick Links</div>
-        <div class="footer-link-list">
-          <a href="#home" data-route="home">Home</a>
-          <a href="#contact" data-route="contact">Contact</a>
-          <a href="#support" data-route="support">Support</a>
-        </div>
-      </div>
-
-      <div class="footer-column footer-social">
-        <div class="footer-heading">LinkedIn</div>
-        <a class="footer-linkedin" href="https://linkedin.com/company/queue-north-technologies-llc" target="_blank" rel="noopener noreferrer" aria-label="Queue North Technologies on LinkedIn">
-          <span class="linkedin-badge" aria-hidden="true">in</span>
-          <span>Visit us on LinkedIn</span>
-        </a>
-      </div>
-    </div>
-
-    <div class="container footer-legal">
-      <div>© <span id="year"></span> Queue North Technologies. All rights reserved.</div>
-      <div>8x8® is a registered trademark of 8x8, Inc. Queue North Technologies is an independent certified partner and is not owned or operated by 8x8, Inc.</div>
-    </div>
-  </footer>
-
-  <script src="main.js"></script>
-</body>
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/logo.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Queue North Technologies | Modern Communications Infrastructure</title>
+    <meta name="description" content="Queue North Technologies is an official 8x8 Certified Partner delivering UCaaS, Contact Center, deployment, and managed lifecycle support for SMB and enterprise organizations." />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
 </html>

package.json

@@ -0,0 +1,50 @@
+{
+  "name": "queuenorth-website",
+  "private": true,
+  "version": "0.5.0",
+  "type": "module",
+  "scripts": {
+    "dev": "concurrently \"vite\" \"node server/index.js\"",
+    "build": "vite build",
+    "preview": "vite preview",
+    "start": "node server/index.js",
+    "server": "node server/index.js",
+    "docker:build": "docker build -t queuenorth-website .",
+    "docker:run": "docker run -p 3001:3001 --rm --name queuenorth -v queuenorth-db:/app/db -v queuenorth-logs:/app/logs --env NODE_ENV=production queuenorth-website",
+    "docker:compose:up": "docker-compose up -d",
+    "docker:compose:down": "docker-compose down",
+    "docker:compose:logs": "docker-compose logs -f",
+    "docker:push": "bash scripts/docker-push.sh",
+    "docker:test": "bash scripts/docker-test.sh"
+  },
+  "dependencies": {
+    "@radix-ui/react-dialog": "^1.1.0",
+    "@radix-ui/react-visually-hidden": "^1.2.4",
+    "@tanstack/react-query": "^5.62.0",
+    "better-sqlite3": "^11.8.0",
+    "cors": "^2.8.6",
+    "express": "^4.21.2",
+    "express-rate-limit": "^8.5.1",
+    "helmet": "^8.1.0",
+    "lucide-react": "^0.468.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-router-dom": "^7.1.3",
+    "sonner": "^1.7.0",
+    "tailwindcss-animate": "^1.0.7",
+    "zod": "^3.24.2",
+    "zustand": "^5.0.3"
+  },
+  "devDependencies": {
+    "@types/express": "^5.0.0",
+    "@types/node": "^22.10.5",
+    "@types/react": "^19.0.2",
+    "@types/react-dom": "^19.0.2",
+    "@vitejs/plugin-react": "^4.3.4",
+    "autoprefixer": "^10.4.20",
+    "concurrently": "^9.1.2",
+    "postcss": "^8.4.49",
+    "tailwindcss": "^3.4.17",
+    "vite": "^6.0.7"
+  }
+}

postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

project-requirements.md

@@ -0,0 +1,67 @@
+# Project Requirements — Queue North Website
+
+These requirements apply to all agents working on Queue North Website.
+
+## Project Philosophy
+
+- Feel modern for 2026 standards
+- Prioritize responsiveness and reactivity
+- Provide smooth user interaction
+- Avoid outdated UI/UX patterns
+- Maintain fast perceived performance
+- Remain lightweight and maintainable
+- Prioritize usability over unnecessary complexity
+
+## Technology Stack
+
+- **Build:** Vite
+- **Frontend:** React 19 with client-side routing (React Router 7)
+- **Styling:** Tailwind CSS with custom Queue North theme
+- **UI Components:** shadcn/ui-style local primitives (Button, Card, Input, etc.)
+- **State:** TanStack Query for server state
+- **Notifications:** Sonner (toast)
+- **Backend:** Express (Node.js)
+- **Database:** SQLite via better-sqlite3
+- **NOT Next.js.** This project uses Vite + React SPA, not Next.js App Router.
+
+## Frontend Standards
+
+- React SPA with React Router (no SSR, no server components)
+- shadcn/ui-style primitives in `src/components/ui/`
+- Tailwind utilities cleanly and predictably
+- Responsive design (mobile + desktop)
+- Loading states, error states, accessible interfaces
+- Queue North brand colors: navy, light blue, white palette
+- Georgia font for numeric content
+
+## Backend Standards
+
+- Express.js REST API
+- SQLite via better-sqlite3
+- Lead capture endpoints (`/api/leads`, `/api/support`)
+- Validate all input, sanitize user-supplied data
+- Structured error handling, no silent failures
+- Environment variables for configuration, no hardcoded secrets
+
+## Database Standards
+
+- SQLite only
+- Validate schema changes before deployment
+
+## Code Quality
+
+- Readable, maintainable, no overengineering
+- Remove dead code, consistent formatting
+- Document non-obvious logic
+- Prefer clarity over cleverness
+
+## Security
+
+- OWASP best practices
+- Input validation on all endpoints
+- No secrets in logs
+- Review dependencies for vulnerabilities
+
+## Requirement Change Policy
+
+Requirements may NOT be modified without explicit approval from `_null`.

public/assets/8x8_Logo_White.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 288 288">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #fff;
+      }
+    </style>
+  </defs>
+  <path class="cls-1" d="M172.73,132.13h-21.87l-5.04,9.59c-.69,1.49-1.83,3.16-1.83,3.16h-.23s-1.03-1.68-1.83-3.16l-5.04-9.59h-21.85l17.17,26.51-17.1,26.54h21.48l5.8-11.08c.57-1.03,1.37-3.02,1.37-3.02h.23s.8,1.99,1.37,3.02l5.89,11.08h21.5l-17.1-26.54,17.07-26.51h0Z"/>
+  <path class="cls-1" d="M75.88,171.67c-6.06,0-10.85-4.67-10.85-10.47,0-4.92,2.65-8.71,4.8-10.98,8.83,4.04,16.91,7.07,16.91,12.24,0,5.93-4.16,9.21-10.85,9.21h0ZM76.51,117.28c5.93,0,9.47,3.28,9.47,8.33,0,5.55-2.4,9.72-3.15,11.11-7.95-3.41-14.51-6.44-14.51-12.37,0-3.91,2.52-7.07,8.2-7.07h0ZM98.72,144.54c.88-1.14,8.83-10.85,8.83-20.57,0-16.79-13.76-26.12-30.54-26.12-21.08,0-30.29,12.87-30.29,26,0,7.7,3.41,13.13,8.2,17.29-2.78,2.15-12.49,10.35-12.49,21.96,0,14.39,11.48,28.02,33.44,28.02s33.44-13.76,33.44-27.51c0-9.09-4.54-14.89-10.6-19.06h0Z"/>
+  <path class="cls-1" d="M211.7,171.67c-6.06,0-10.85-4.67-10.85-10.47,0-4.92,2.65-8.71,4.8-10.98,8.83,4.04,16.91,7.07,16.91,12.24,0,5.93-4.17,9.21-10.85,9.21h0ZM212.33,117.28c5.93,0,9.47,3.28,9.47,8.33,0,5.55-2.4,9.72-3.15,11.11-7.95-3.41-14.51-6.44-14.51-12.37,0-3.91,2.52-7.07,8.2-7.07h0ZM234.54,144.54c.88-1.14,8.83-10.85,8.83-20.57,0-16.79-13.76-26.12-30.54-26.12-21.08,0-30.29,12.87-30.29,26,0,7.7,3.41,13.13,8.2,17.29-2.78,2.15-12.5,10.35-12.5,21.96,0,14.39,11.48,28.02,33.44,28.02s33.44-13.76,33.44-27.51c0-9.09-4.54-14.89-10.6-19.06h0Z"/>
+</svg>

review.md

@@ -0,0 +1,373 @@
+# Queue North Website Redesign Strategy
+
+# Core Problem
+
+Current website branding feels:
+
+* too abstract
+* too technical
+* too personal
+* too experimental
+
+The site currently resembles:
+
+* a developer portfolio
+* infrastructure hobby project
+* underground tech blog
+
+Instead of:
+
+* a mature B2B UCaaS provider
+* managed IT partner
+* enterprise communications company
+
+This creates trust friction immediately.
+
+Business buyers need confidence within seconds.
+
+---
+
+# Business Positioning
+
+Queue North should position itself as:
+
+## Primary Identity
+
+Reliable business communications and IT infrastructure partner for SMB and enterprise clients.
+
+## Supporting Identity
+
+Modern, technically competent, responsive, security conscious.
+
+Not:
+
+* hacker aesthetic
+* underground engineering lab
+* mysterious tech collective
+
+---
+
+# Recommended Brand Direction
+
+## Desired Feel
+
+The website should feel:
+
+* modern
+* clean
+* stable
+* operationally mature
+* enterprise capable
+* technically sharp
+* trustworthy
+
+Think:
+
+* RingCentral
+* Zoom
+* Cloudflare
+* Cisco Meraki
+* Dialpad
+* 8x8
+* Microsoft business products
+
+But less corporate and less soulless.
+
+Human but competent.
+
+---
+
+# Homepage Structure
+
+# 1. Hero Section
+
+## Goal
+
+Instant clarity.
+
+User should immediately understand:
+
+* what Queue North does
+* who it serves
+* why it matters
+
+## Recommended Headline
+
+Business communications and IT that actually work.
+
+Alternative:
+
+Modern UCaaS and managed IT for businesses that cannot afford downtime.
+
+## Supporting Text
+
+Queue North delivers cloud communications, networking, managed IT, and infrastructure support for SMBs and enterprise teams.
+
+## CTA Buttons
+
+* Schedule Consultation
+* View Services
+
+Optional secondary:
+* Contact Support
+
+---
+
+# 2. Trust Signals Section
+
+This section should appear immediately after hero.
+
+## Include
+
+* uptime guarantees
+* support response times
+* certifications
+* vendor partnerships
+* years in business
+* client industries
+* deployment count
+* SLA metrics
+
+## Example Metrics
+
+* 99.99% uptime
+* 24/7 support
+* multi site deployments
+* secure cloud infrastructure
+* enterprise grade failover
+
+This is critical.
+
+B2B buyers purchase risk reduction, not technology.
+
+---
+
+# 3. Services Section
+
+## Recommended Layout
+
+Clean enterprise card grid.
+
+## Service Categories
+
+### UCaaS
+
+* hosted VoIP
+* business phones
+* call routing
+* conferencing
+* remote workforce support
+
+### Managed IT
+
+* endpoint management
+* helpdesk
+* patching
+* infrastructure monitoring
+
+### Networking
+
+* SD WAN
+* VPN
+* firewall management
+* switching
+* wireless deployments
+
+### Security
+
+* MFA
+* endpoint protection
+* backups
+* compliance
+* monitoring
+
+Each card should explain business outcomes, not technical jargon.
+
+Bad:
+"Kubernetes managed SIP orchestration"
+
+Good:
+"Reliable business communications with centralized management and failover"
+
+Humans love inventing incomprehensible wording and then wondering why sales calls disappear.
+
+---
+
+# 4. Industry Use Cases
+
+Very important for B2B trust.
+
+## Example Industries
+
+* healthcare
+* logistics
+* retail
+* manufacturing
+* legal
+* finance
+* distributed offices
+
+Each section should explain:
+
+* operational problems
+* compliance needs
+* uptime requirements
+* remote work needs
+
+---
+
+# 5. Why Queue North
+
+## Focus On
+
+* responsiveness
+* reliability
+* technical depth
+* direct support
+* proactive monitoring
+* vendor neutrality
+
+## Avoid
+
+Generic corporate fluff like:
+
+* innovative solutions
+* digital transformation
+* next generation synergy nonsense
+
+Every B2B site writes this garbage and nobody believes any of it anymore.
+
+---
+
+# 6. Testimonials / Case Studies
+
+Mandatory.
+
+Enterprise buyers need validation.
+
+## Include
+
+* measurable outcomes
+* reduced downtime
+* migration success
+* support quality
+* deployment scale
+
+Even 2 or 3 strong case studies massively improve credibility.
+
+---
+
+# 7. Support & Operations
+
+This is where technical sophistication can appear.
+
+## Good Technical Signals
+
+* network operations center visuals
+* uptime dashboards
+* support workflows
+* monitoring systems
+* escalation paths
+
+## Bad Technical Signals
+
+* hacker visuals
+* terminal cosplay
+* random code snippets
+* obscure infrastructure references
+
+Technical competence should feel controlled and operational.
+
+Not chaotic.
+
+---
+
+# Visual Design Recommendations
+
+# Colors
+
+## Base
+
+* white
+* dark slate
+* muted blue
+* graphite
+
+## Accent
+
+* blue
+* teal
+* restrained cyan
+
+Avoid:
+
+* neon green
+* hacker black/red
+* cyberpunk palettes
+
+Those aesthetics destroy enterprise trust surprisingly fast.
+
+---
+
+# Typography
+
+## Recommended
+
+* Inter
+* Geist
+* IBM Plex Sans
+
+Professional sans serif.
+
+Monospace only for tiny UI accents if needed.
+
+---
+
+# Layout Style
+
+## Use
+
+* large spacing
+* strong hierarchy
+* clean sections
+* restrained motion
+* clear CTAs
+
+## Avoid
+
+* excessive animations
+* overloaded visuals
+* scrolling gimmicks
+* terminal-first design
+
+Enterprise sites should feel efficient.
+
+---
+
+# Recommended Technical Stack
+
+## Best Option
+
+### Astro or Next.js
+
+With:
+
+* Tailwind
+* Framer Motion lightly used
+* CMS integration
+* fast performance
+* accessibility focus
+
+---
+
+# Key Messaging Shift
+
+## Current Impression
+
+"Interesting technical person"
+
+## Required Impression
+
+"Reliable communications and IT partner for serious businesses"
+
+That distinction changes everything about the design language.

scripts/docker-push.sh

@@ -0,0 +1,22 @@
+#!/usr/bin/env bash
+# docker-push.sh — Tag and push dev image to Forgejo registry
+# Usage: ./scripts/docker-push.sh
+# Requires: ~/.openclaw/docker-registry.env (chmod 600)
+
+set -euo pipefail
+cd "$(dirname "$0")/.."
+
+source ~/.openclaw/docker-registry.env
+
+# Build image via docker compose
+DOCKER_API_VERSION=1.44 docker compose build
+
+# Tag and push dev
+IMAGE_NAME="queue-north-website-queuenorth"
+docker tag "${IMAGE_NAME}:latest" "${FORGEJO_REGISTRY}/null/queue-north-website:dev"
+
+echo "$FORGEJO_REGISTRY_TOKEN" | docker login "$FORGEJO_REGISTRY" -u "$FORGEJO_REGISTRY_USER" --password-stdin
+docker push "${FORGEJO_REGISTRY}/null/queue-north-website:dev"
+
+docker logout "$FORGEJO_REGISTRY"
+echo "✓ Pushed dev image"

scripts/docker-test.sh

@@ -0,0 +1,18 @@
+#!/usr/bin/env bash
+# docker-test.sh — Build and run Queue North Website in Docker for testing
+# Usage: ./scripts/docker-test.sh
+# Access: http://localhost:3001
+
+set -euo pipefail
+cd "$(dirname "$0")/.."
+
+# Stop and remove existing container
+DOCKER_API_VERSION=1.44 docker compose down 2>/dev/null || true
+
+# Clean build
+rm -rf dist node_modules/.vite 2>/dev/null
+
+DOCKER_API_VERSION=1.44 docker compose up -d --build
+
+echo "✓ Running on http://localhost:3001"
+echo "  Health check: http://localhost:3001/api/health"

server/db.js

@@ -0,0 +1,55 @@
+// Database initialization - loaded at runtime after entrypoint runs
+import path from 'path'
+import { existsSync, mkdirSync, chmodSync } from 'fs'
+import sqlite3 from 'better-sqlite3'
+
+const dbPath = path.join(new URL(import.meta.url).pathname, '..', 'db', 'queuenorth.db')
+const dbDir = path.dirname(dbPath)
+
+// Ensure db directory exists with proper permissions
+if (!existsSync(dbDir)) {
+  mkdirSync(dbDir, { recursive: true })
+  try { chmodSync(dbDir, 0o777) } catch (e) {}
+}
+
+// Ensure db file has proper permissions if it exists
+if (existsSync(dbPath)) {
+  try { chmodSync(dbPath, 0o666) } catch (e) {}
+}
+
+// Initialize the database
+export const db = sqlite3(dbPath)
+
+// Initialize schema
+export const initSchema = () => {
+  // Leads table
+  db.exec(`
+    CREATE TABLE IF NOT EXISTS leads (
+      id INTEGER PRIMARY KEY AUTOINCREMENT,
+      company TEXT NOT NULL,
+      name TEXT NOT NULL,
+      email TEXT NOT NULL,
+      phone TEXT,
+      zip TEXT,
+      message TEXT,
+      service_interest TEXT,
+      created_at DATETIME DEFAULT CURRENT_TIMESTAMP
+    )
+  `)
+
+  // Support requests table
+  db.exec(`
+    CREATE TABLE IF NOT EXISTS support_requests (
+      id INTEGER PRIMARY KEY AUTOINCREMENT,
+      name TEXT NOT NULL,
+      company TEXT NOT NULL,
+      email TEXT NOT NULL,
+      phone TEXT,
+      issue TEXT NOT NULL,
+      priority TEXT DEFAULT 'medium',
+      created_at DATETIME DEFAULT CURRENT_TIMESTAMP
+    )
+  `)
+}
+
+initSchema()

server/index.js

@@ -0,0 +1,487 @@
+import express from 'express'
+import path from 'path'
+import { fileURLToPath } from 'url'
+import { existsSync, mkdirSync, chmodSync } from 'fs'
+import sqlite3 from 'better-sqlite3'
+import z from 'zod'
+import rateLimit from 'express-rate-limit'
+import helmet from 'helmet'
+import cors from 'cors'
+
+// --- Setup ---
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+const app = express()
+
+// Trust first proxy (Docker/reverse proxy) for correct client IP in rate limiting
+app.set('trust proxy', 1)
+const dbPath = path.join(__dirname, '../db/queuenorth.db')
+const dbDir = path.dirname(dbPath)
+
+// Create db directory if it doesn't exist
+if (!existsSync(dbDir)) {
+  mkdirSync(dbDir, { recursive: true })
+  // Try to set writable permissions, ignore if running as non-root
+  try { chmodSync(dbDir, 0o755) } catch (e) {}
+}
+
+// --- Logger ---
+const LOG_LEVELS = { error: 0, warn: 1, info: 2, debug: 3 }
+const currentLevel = LOG_LEVELS[process.env.LOG_LEVEL?.toLowerCase()] ?? LOG_LEVELS.info
+
+const log = {
+  info: (...args) => { if (currentLevel >= LOG_LEVELS.info) console.log(`[${new Date().toISOString()}] INFO `, ...args) },
+  warn: (...args) => { if (currentLevel >= LOG_LEVELS.warn) console.warn(`[${new Date().toISOString()}] WARN `, ...args) },
+  error: (...args) => { if (currentLevel >= LOG_LEVELS.error) console.error(`[${new Date().toISOString()}] ERROR`, ...args) },
+  debug: (...args) => { if (currentLevel >= LOG_LEVELS.debug) console.debug(`[${new Date().toISOString()}] DEBUG`, ...args) },
+}
+
+// --- Rate Limiting ---
+const rateLimitWindowMs = 60 * 1000 // 1 minute
+const rateLimitMax = parseInt(process.env.RATE_LIMIT_PER_MINUTE || '5', 10)
+
+const apiLimiter = rateLimit({
+  windowMs: rateLimitWindowMs,
+  max: rateLimitMax,
+  standardHeaders: true,
+  legacyHeaders: false,
+  handler: (req, res) => {
+    log.warn(`Rate limit exceeded for IP: ${req.ip}`)
+    res.status(429).json({
+      error: 'Too Many Requests',
+      message: 'Please try again later.',
+      retryAfter: Math.ceil(rateLimitWindowMs / 1000),
+    })
+  },
+})
+
+// --- Security Headers (Helmet) ---
+const cspDirectives = {
+  defaultSrc: ["'self'"],
+  scriptSrc: ["'self'"],
+  styleSrc: ["'self'", "'unsafe-inline'", 'https://fonts.googleapis.com'],
+  fontSrc: ["'self'", 'https://fonts.gstatic.com'],
+  imgSrc: ["'self'", 'data:'],
+  connectSrc: ["'self'"],
+  objectSrc: ["'none'"],
+  baseUri: ["'self'"],
+  formAction: ["'self'"],
+}
+
+app.use(helmet({
+  contentSecurityPolicy: {
+    directives: cspDirectives,
+  },
+  crossOriginEmbedderPolicy: false, // Prevent CSP issues with embedded content
+  crossOriginOpenerPolicy: false,
+  crossOriginResourcePolicy: { policy: 'same-origin' },
+  dnsPrefetchControl: { allow: false },
+  frameguard: { action: 'deny' },
+  hidePoweredBy: true,
+  hsts: { maxAge: 31536000, includeSubDomains: true },
+  ieNoOpen: true,
+  noSniff: true,
+  originAgentCluster: true,
+  permittedCrossDomainPolicies: { permittedPolicies: 'none' },
+  referrerPolicy: { policy: 'same-origin' },
+  xssFilter: true,
+}))
+
+log.info('[Security] Helmet enabled with CSP configured')
+
+// --- CORS Configuration ---
+const corsOrigin = process.env.CORS_ORIGIN || '*' // Default to * for development
+const corsConfig = cors({
+  origin: corsOrigin === '*' ? corsOrigin : (corsOrigin === 'null' ? undefined : corsOrigin),
+  methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
+  allowedHeaders: ['Content-Type', 'Authorization'],
+  exposedHeaders: ['X-RateLimit-Remaining', 'X-RateLimit-Reset'],
+  maxAge: 86400, // 24 hours
+  credentials: true,
+})
+
+app.use(corsConfig)
+log.info(`[CORS] Enabled with origin: ${corsOrigin}`)
+
+// Middleware
+app.use(express.json({ limit: '1mb' }))
+app.use(express.urlencoded({ extended: true, limit: '1mb' }))
+
+// Rate limiting for API routes only
+app.use('/api', apiLimiter)
+
+// Request logging middleware
+app.use((req, res, next) => {
+  const start = Date.now()
+  res.on('finish', () => {
+    const ms = Date.now() - start
+    const level = res.statusCode >= 500 ? 'error' : res.statusCode >= 400 ? 'warn' : 'info'
+    log[level](`${req.method} ${req.originalUrl} ${res.statusCode} ${ms}ms`)
+  })
+  next()
+})
+
+// --- Database ---
+const db = sqlite3(dbPath)
+
+// Initialize schema
+const initSchema = () => {
+  // Leads table
+  db.exec(`
+    CREATE TABLE IF NOT EXISTS leads (
+      id INTEGER PRIMARY KEY AUTOINCREMENT,
+      company TEXT NOT NULL,
+      name TEXT NOT NULL,
+      email TEXT NOT NULL,
+      phone TEXT,
+      zip TEXT,
+      message TEXT,
+      service_interest TEXT,
+      created_at DATETIME DEFAULT CURRENT_TIMESTAMP
+    )
+  `)
+
+  // Support requests table
+  db.exec(`
+    CREATE TABLE IF NOT EXISTS support_requests (
+      id INTEGER PRIMARY KEY AUTOINCREMENT,
+      name TEXT NOT NULL,
+      company TEXT NOT NULL,
+      email TEXT NOT NULL,
+      phone TEXT,
+      issue TEXT NOT NULL,
+      priority TEXT DEFAULT 'medium',
+      created_at DATETIME DEFAULT CURRENT_TIMESTAMP
+    )
+  `)
+}
+
+initSchema()
+
+// --- Sanitization Helper ---
+const sanitizeString = (input, maxLength) => {
+  if (typeof input !== 'string') return input
+  // Trim whitespace
+  let sanitized = input.trim()
+  // Remove HTML/script tags to prevent XSS
+  sanitized = sanitized.replace(/<script[^>]*>.*?<\/script>/gi, '')
+  sanitized = sanitized.replace(/<[^>]*>/g, '')
+  // Truncate to max length
+  return sanitized.substring(0, maxLength)
+}
+
+const sanitizePayload = (data, fields) => {
+  const result = { ...data }
+  for (const [field, maxLength] of Object.entries(fields)) {
+    if (result[field] !== undefined) {
+      result[field] = sanitizeString(result[field], maxLength)
+    }
+  }
+  return result
+}
+
+// --- Validation Schemas ---
+const leadSchema = z.object({
+  company: z.string().min(1, 'Company name is required').trim().max(200, 'Company name must be 200 characters or less'),
+  name: z.string().min(1, 'Name is required').trim().max(100, 'Name must be 100 characters or less'),
+  email: z.string().email('Valid email is required').trim().max(254, 'Email must be 254 characters or less'),
+  phone: z.string().trim().max(50, 'Phone must be 50 characters or less').optional().or(z.literal('').transform(() => undefined)),
+  zip: z.string().trim().max(10, 'ZIP code must be 10 characters or less').optional().or(z.literal('').transform(() => undefined)),
+  message: z.string().trim().max(5000, 'Message must be 5000 characters or less').optional().or(z.literal('').transform(() => undefined)),
+  service_interest: z.string().trim().max(50, 'Service interest must be 50 characters or less').optional().or(z.literal('').transform(() => undefined)),
+})
+
+const supportSchema = z.object({
+  name: z.string().min(1, 'Name is required').trim().max(100, 'Name must be 100 characters or less'),
+  company: z.string().min(1, 'Company name is required').trim().max(200, 'Company name must be 200 characters or less'),
+  email: z.string().email('Valid email is required').trim().max(254, 'Email must be 254 characters or less'),
+  phone: z.string().trim().max(50, 'Phone must be 50 characters or less').optional().or(z.literal('').transform(() => undefined)),
+  issue: z.string().min(10, 'Please provide at least 10 characters describing your issue').trim().max(5000, 'Issue description must be 5000 characters or less'),
+  priority: z.enum(['low', 'medium', 'high'], {
+    errorMap: () => ({ message: 'Priority must be low, medium, or high' }),
+  }).transform((val) => val?.toLowerCase() ?? undefined).optional().or(z.literal('').transform(() => undefined)),
+})
+
+// --- Zoho CRM Forwarding (best-effort, fire-and-forget) ---
+const ZOHO_ENABLED = process.env.ZOHO_ENABLED === 'true'
+const ZOHO_API_DOMAIN = process.env.ZOHO_API_DOMAIN || 'https://www.zohoapis.com'
+const ZOHO_CLIENT_ID = process.env.ZOHO_CLIENT_ID || ''
+const ZOHO_CLIENT_SECRET = process.env.ZOHO_CLIENT_SECRET || ''
+const ZOHO_REFRESH_TOKEN = process.env.ZOHO_REFRESH_TOKEN || ''
+const ZOHO_REDIRECT_URI = process.env.ZOHO_REDIRECT_URI || ''
+
+// In-memory access token cache
+let zohoAccessToken = null
+let zohoTokenExpiry = 0
+
+async function getZohoAccessToken() {
+  // Return cached token if still valid (with 60s buffer)
+  if (zohoAccessToken && Date.now() < zohoTokenExpiry - 60000) {
+    return zohoAccessToken
+  }
+
+  try {
+    const url = `${ZOHO_API_DOMAIN}/oauth/v2/token`
+    const params = new URLSearchParams({
+      grant_type: 'refresh_token',
+      client_id: ZOHO_CLIENT_ID,
+      client_secret: ZOHO_CLIENT_SECRET,
+      refresh_token: ZOHO_REFRESH_TOKEN,
+      redirect_uri: ZOHO_REDIRECT_URI,
+    })
+
+    const response = await fetch(`${url}?${params.toString()}`, { method: 'POST' })
+    const data = await response.json()
+
+    if (data.access_token) {
+      zohoAccessToken = data.access_token
+      zohoTokenExpiry = Date.now() + (data.expires_in || 3600) * 1000
+      log.info('[Zoho] Access token acquired, expires in', data.expires_in || 3600, 'seconds')
+      return zohoAccessToken
+    } else {
+      log.error('[Zoho] Token exchange failed:', JSON.stringify(data))
+      return null
+    }
+  } catch (err) {
+    log.error('[Zoho] Token acquisition error:', err.message)
+    return null
+  }
+}
+
+async function forwardToZoho(leadData) {
+  if (!ZOHO_ENABLED) return
+
+  try {
+    const accessToken = await getZohoAccessToken()
+    if (!accessToken) {
+      log.warn('[Zoho] No access token available, skipping lead forwarding')
+      return
+    }
+
+    const url = `${ZOHO_API_DOMAIN}/crm/v8/Leads`
+    const payload = {
+      data: [
+        {
+          Company: leadData.company || '',
+          Last_Name: leadData.name || 'Unknown',
+          Email: leadData.email || '',
+          Phone: leadData.phone || '',
+          Zip_Code: leadData.zip || '',
+          Description: leadData.message || '',
+          Service_Interest: leadData.service_interest || '',
+        },
+      ],
+    }
+
+    const response = await fetch(url, {
+      method: 'POST',
+      headers: {
+        'Authorization': `Zoho-oauthtoken ${accessToken}`,
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(payload),
+    })
+
+    if (response.ok) {
+      const result = await response.json()
+      log.info('[Zoho] Lead forwarded successfully:', result.data?.[0]?.details?.id || 'no id returned')
+    } else {
+      const text = await response.text()
+      log.error(`[Zoho] Lead forwarding failed (${response.status}):`, text)
+    }
+  } catch (err) {
+    log.error('[Zoho] Forwarding error:', err.message)
+  }
+}
+
+// --- API Routes ---
+
+// Health check
+app.get('/api/health', (req, res) => {
+  try {
+    // Verify DB connection by executing a simple query
+    db.prepare('SELECT 1').get()
+    res.json({ status: 'ok', db: 'ok', timestamp: new Date().toISOString() })
+  } catch (err) {
+    log.error('Health check DB verification failed:', err.message)
+    res.status(503).json({ error: 'Service unavailable', db: 'error', timestamp: new Date().toISOString() })
+  }
+})
+
+// Submit lead
+app.post('/api/leads', (req, res) => {
+  try {
+    const parsed = leadSchema.safeParse(req.body)
+
+    if (!parsed.success) {
+      const fieldErrors = {}
+      for (const issue of parsed.error.issues) {
+        if (issue.path[0]) {
+          fieldErrors[issue.path[0]] = issue.message
+        }
+      }
+      return res.status(400).json({
+        error: 'Validation failed',
+        fields: fieldErrors,
+      })
+    }
+
+    // Sanitize parsed data before insert (trim, strip tags, truncate)
+    const sanitized = sanitizePayload(parsed.data, {
+      company: 200,
+      name: 100,
+      email: 254,
+      phone: 50,
+      zip: 10,
+      message: 5000,
+      service_interest: 50,
+    })
+
+    const stmt = db.prepare(`
+      INSERT INTO leads (company, name, email, phone, zip, message, service_interest)
+      VALUES (?, ?, ?, ?, ?, ?, ?)
+    `)
+
+    const result = stmt.run(
+      sanitized.company,
+      sanitized.name,
+      sanitized.email,
+      sanitized.phone || null,
+      sanitized.zip || null,
+      sanitized.message || null,
+      sanitized.service_interest || null
+    )
+
+    log.info(`Lead submitted: ${sanitized.email} from ${sanitized.company} (id: ${result.lastInsertRowid})`)
+
+    // Fire-and-forget Zoho forwarding (best-effort, non-blocking)
+    forwardToZoho(sanitized)
+
+    res.json({ success: true, message: "Thanks! We'll be in touch shortly." })
+  } catch (err) {
+    log.error('Error submitting lead:', err)
+    res.status(500).json({ error: 'Failed to submit lead' })
+  }
+})
+
+// Submit support request
+app.post('/api/support', (req, res) => {
+  try {
+    const parsed = supportSchema.safeParse(req.body)
+
+    if (!parsed.success) {
+      const fieldErrors = {}
+      for (const issue of parsed.error.issues) {
+        if (issue.path[0]) {
+          fieldErrors[issue.path[0]] = issue.message
+        }
+      }
+      return res.status(400).json({
+        error: 'Validation failed',
+        fields: fieldErrors,
+      })
+    }
+
+    // Sanitize parsed data before insert (trim, strip tags, truncate)
+    const sanitized = sanitizePayload(parsed.data, {
+      name: 100,
+      company: 200,
+      email: 254,
+      phone: 50,
+      issue: 5000,
+      priority: 10,
+    })
+
+    const stmt = db.prepare(`
+      INSERT INTO support_requests (name, company, email, phone, issue, priority)
+      VALUES (?, ?, ?, ?, ?, ?)
+    `)
+
+    const result = stmt.run(
+      sanitized.name,
+      sanitized.company,
+      sanitized.email,
+      sanitized.phone || null,
+      sanitized.issue,
+      sanitized.priority || 'medium'
+    )
+
+    log.info(`Support request submitted: ${sanitized.email} from ${sanitized.company} priority=${sanitized.priority || 'medium'} (id: ${result.lastInsertRowid})`)
+
+    res.json({ success: true, message: "Thanks! We'll get back to you soon." })
+  } catch (err) {
+    log.error('Error submitting support request:', err)
+    res.status(500).json({ error: 'Failed to submit support request' })
+  }
+})
+
+// --- 404 catch-all for API routes (must be after all API routes) ---
+app.use((req, res, next) => {
+  if (req.path.startsWith('/api')) {
+    log.warn(`API route not found: ${req.method} ${req.originalUrl}`)
+    return res.status(404).json({ error: 'Not found' })
+  }
+  next()
+})
+
+// Static file serving for SPA
+app.use(express.static(path.join(__dirname, '../dist')))
+
+// SPA catch-all — serve index.html for any non-API, non-asset route
+// This lets React Router handle client-side routing
+app.get('*', (req, res, next) => {
+  // Skip API routes (already handled above) and requests for static assets
+  if (req.path.startsWith('/api/') || req.path.includes('.')) {
+    return next()
+  }
+  res.sendFile(path.join(__dirname, '../dist/index.html'))
+})
+
+// --- Request timeout middleware (30 seconds) ---
+const REQUEST_TIMEOUT_MS = 30000
+
+const timeoutMiddleware = (req, res, next) => {
+  const timeout = setTimeout(() => {
+    if (!res.headersSent) {
+      log.warn(`Request timeout: ${req.method} ${req.originalUrl}`)
+      res.status(504).json({ error: 'Request timeout' })
+    }
+  }, REQUEST_TIMEOUT_MS)
+
+  res.on('finish', () => clearTimeout(timeout))
+  res.on('close', () => clearTimeout(timeout))
+  next()
+}
+
+app.use(timeoutMiddleware)
+
+// --- Global error handlers ---
+process.on('uncaughtException', (err) => {
+  log.error('Uncaught exception:', err.message)
+  log.error('Stack:', err.stack)
+  log.error('Shutting down due to uncaught exception...')
+  process.exit(1)
+})
+
+process.on('unhandledRejection', (reason, promise) => {
+  log.error('Unhandled rejection at:', promise)
+  log.error('Reason:', reason)
+  log.error('Shutting down due to unhandled rejection...')
+  process.exit(1)
+})
+
+// --- Start Server ---
+const PORT = process.env.SERVER_PORT || 3001
+
+app.listen(PORT, () => {
+  log.info(`Server running on http://localhost:${PORT}`)
+  log.info(`Health check: http://localhost:${PORT}/api/health`)
+  if (ZOHO_ENABLED) {
+    log.info(`Zoho CRM forwarding: ENABLED (domain: ${ZOHO_API_DOMAIN})`)
+  } else {
+    log.info('Zoho CRM forwarding: DISABLED (set ZOHO_ENABLED=true to enable)')
+  }
+  log.info(`Rate limiting: ${rateLimitMax} requests per ${rateLimitWindowMs / 1000} seconds`)
+  log.info(`Security headers: Helmet enabled with CSP configured`)
+  log.info(`CORS origin: ${corsOrigin}`)
+})

src/App.jsx

@@ -0,0 +1,18 @@
+import { Outlet } from 'react-router-dom'
+import Header from './components/layout/Header.jsx'
+import Footer from './components/layout/Footer.jsx'
+import './index.css'
+
+function App() {
+  return (
+    <div className="min-h-screen flex flex-col font-sans bg-background text-text">
+      <Header />
+      <main className="flex-1">
+        <Outlet />
+      </main>
+      <Footer />
+    </div>
+  )
+}
+
+export default App

src/components/layout/Footer.jsx

@@ -0,0 +1,119 @@
+const Footer = () => {
+  const currentYear = new Date().getFullYear()
+
+  const companyInfo = {
+    name: 'Queue North',
+    tagline: 'Modern communications infrastructure without the vendor noise.',
+    address: 'Your trusted partner in UCaaS, Contact Center, and infrastructure solutions.',
+  }
+
+  const quickLinks = [
+    { name: 'Home', href: '/' },
+    { name: 'Services', href: '/services' },
+    { name: 'Industries', href: '/industries' },
+    { name: '8x8', href: '/8x8' },
+    { name: 'About', href: '/about' },
+    { name: 'Contact', href: '/contact' },
+    { name: 'Support', href: '/support' },
+  ]
+
+  const services = [
+    { name: 'Unified Communications', href: '/services/unified-communications' },
+    { name: 'Contact Center', href: '/services/contact-center' },
+    { name: 'Managed Support', href: '/services/managed-support' },
+    { name: 'Consulting & Training', href: '/services/consulting-training' },
+    { name: 'Infrastructure Cabling', href: '/services/infrastructure-cabling' },
+    { name: 'Wireless Access', href: '/services/wireless-access' },
+    { name: 'Local Networking', href: '/services/local-networking' },
+  ]
+
+  const industries = [
+    { name: 'Healthcare', href: '/industries/healthcare' },
+    { name: 'Retail', href: '/industries/retail' },
+    { name: 'Manufacturing', href: '/industries/manufacturing' },
+    { name: 'Education & Finance', href: '/industries/education-finance' },
+  ]
+
+  return (
+    <footer className="bg-primary-navy text-white">
+      <div className="container mx-auto px-4 py-12">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-8">
+          {/* Company Info */}
+          <div>
+            <div className="flex items-center gap-2 mb-4">
+              <img 
+                src="/logo.svg" 
+                alt="Queue North" 
+                className="h-8 w-auto" 
+              />
+              <span className="font-bold text-lg">Queue North</span>
+            </div>
+            <p className="text-navy-light text-sm mb-3">{companyInfo.tagline}</p>
+            <p className="text-navy-light text-sm mb-4">{companyInfo.address}</p>
+            <p className="text-navy-light text-xs">© {currentYear} Queue North Technologies. All rights reserved.</p>
+          </div>
+
+          {/* Quick Links */}
+          <div>
+            <h3 className="font-semibold mb-4 text-sm uppercase tracking-wider text-cyan">Quick Links</h3>
+            <ul className="space-y-2">
+              {quickLinks.map((link) => (
+                <li key={link.name}>
+                  <a
+                    href={link.href}
+                    className="text-navy-light hover:text-white transition-colors text-sm"
+                  >
+                    {link.name}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          {/* Services */}
+          <div>
+            <h3 className="font-semibold mb-4 text-sm uppercase tracking-wider text-cyan">Services</h3>
+            <ul className="space-y-2">
+              {services.map((service) => (
+                <li key={service.name}>
+                  <a
+                    href={service.href}
+                    className="text-navy-light hover:text-white transition-colors text-sm"
+                  >
+                    {service.name}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          {/* Industries */}
+          <div>
+            <h3 className="font-semibold mb-4 text-sm uppercase tracking-wider text-cyan">Industries</h3>
+            <ul className="space-y-2">
+              {industries.map((industry) => (
+                <li key={industry.name}>
+                  <a
+                    href={industry.href}
+                    className="text-navy-light hover:text-white transition-colors text-sm"
+                  >
+                    {industry.name}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+
+        {/* Bottom */}
+        <div className="border-t border-white/10 pt-8">
+          <p className="text-center text-navy-light text-sm">
+            8x8 Certified Partner | Veteran Owned | 25+ Years Experience
+          </p>
+        </div>
+      </div>
+    </footer>
+  )
+}
+
+export default Footer

src/components/layout/Header.jsx

@@ -0,0 +1,158 @@
+import { useState, useEffect } from 'react'
+import { Sheet, SheetTrigger, SheetContent, SheetTitle } from '@/components/ui/Sheet'
+import * as VisuallyHidden from '@radix-ui/react-visually-hidden'
+import { Link } from 'react-router-dom'
+
+const Header = () => {
+  const [isScrolled, setIsScrolled] = useState(false)
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setIsScrolled(window.scrollY > 10)
+    }
+    window.addEventListener('scroll', handleScroll)
+    return () => window.removeEventListener('scroll', handleScroll)
+  }, [])
+
+  const navLinks = [
+    { name: 'Home', href: '/' },
+    { name: 'Services', href: '/services' },
+    { name: 'Industries', href: '/industries' },
+    { name: '8x8', href: '/8x8' },
+    { name: 'About', href: '/about' },
+    { name: 'Contact', href: '/contact' },
+    { name: 'Support', href: '/support' },
+  ]
+
+  const serviceLinks = [
+    { name: 'Unified Communications', href: '/services/unified-communications' },
+    { name: 'Contact Center', href: '/services/contact-center' },
+    { name: 'Managed Support', href: '/services/managed-support' },
+    { name: 'Consulting & Training', href: '/services/consulting-training' },
+    { name: 'Infrastructure Cabling', href: '/services/infrastructure-cabling' },
+    { name: 'Wireless Access', href: '/services/wireless-access' },
+    { name: 'Local Networking', href: '/services/local-networking' },
+  ]
+
+  const industryLinks = [
+    { name: 'Healthcare', href: '/industries/healthcare' },
+    { name: 'Retail', href: '/industries/retail' },
+    { name: 'Manufacturing', href: '/industries/manufacturing' },
+    { name: 'Education & Finance', href: '/industries/education-finance' },
+  ]
+
+  const closeMobileMenu = () => setMobileMenuOpen(false)
+
+  return (
+    <header className={`sticky top-0 z-40 w-full transition-all duration-300 ${isScrolled ? 'bg-primary-navy shadow-md' : 'bg-primary-navy/95'}`}>
+      <div className="container mx-auto px-4">
+        <div className="flex h-16 items-center justify-between">
+          {/* Logo */}
+          <div className="flex items-center gap-3">
+            <img 
+              src="/logo.svg" 
+              alt="Queue North Technologies" 
+              className="h-8 w-auto flex-shrink-0" 
+            />
+            <span className="font-bold text-xl text-white hidden sm:block tracking-tight">Queue North</span>
+          </div>
+
+          {/* Desktop Nav */}
+          <nav className="hidden md:flex items-center gap-6">
+            {navLinks.map((link) => (
+              <Link
+                key={link.name}
+                to={link.href}
+                className="text-sm font-medium text-navy-light hover:text-white transition-colors"
+              >
+                {link.name}
+              </Link>
+            ))}
+          </nav>
+
+          {/* CTA Button */}
+          <div className="hidden md:block">
+            <Link to="/contact" className="inline-flex items-center justify-center rounded-md text-sm font-medium h-9 px-3 bg-primary-navy text-white hover:bg-primary-navy-dark transition-colors">
+              Request Consultation
+            </Link>
+          </div>
+
+          {/* Mobile Menu */}
+          <div className="md:hidden">
+            <Sheet open={mobileMenuOpen} onOpenChange={setMobileMenuOpen}>
+              <SheetTrigger asChild>
+                <button className="p-2 text-white hover:text-cyan transition-colors focus:outline-none focus:ring-2 focus:ring-cyan rounded-md">
+                  <span className="sr-only">Open menu</span>
+                  <svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16" />
+                  </svg>
+                </button>
+              </SheetTrigger>
+              <SheetContent side="right" className="w-[300px] sm:w-[350px] bg-primary-navy text-white">
+                <VisuallyHidden.Root asChild>
+                  <SheetTitle>Navigation Menu</SheetTitle>
+                </VisuallyHidden.Root>
+                <div className="flex flex-col h-full">
+                  <div className="flex items-center gap-3 mb-6">
+                    <img src="/logo.svg" alt="Queue North" className="h-9 w-auto" />
+                    <span className="font-bold text-xl">Queue North</span>
+                  </div>
+                  
+                  <nav className="flex flex-col space-y-6">
+                    <div>
+                      <h4 className="text-xs font-semibold uppercase tracking-wider text-navy-light mb-3">Primary</h4>
+                      <ul className="space-y-2">
+                        {navLinks.map((link) => (
+                          <li key={link.name}>
+                            <Link to={link.href} onClick={closeMobileMenu} className="block text-base font-medium text-navy-light hover:text-white transition-colors py-2">
+                              {link.name}
+                            </Link>
+                          </li>
+                        ))}
+                      </ul>
+                    </div>
+
+                    <div>
+                      <h4 className="text-xs font-semibold uppercase tracking-wider text-navy-light mb-3">Services</h4>
+                      <ul className="space-y-2">
+                        {serviceLinks.map((service) => (
+                          <li key={service.name}>
+                            <Link to={service.href} onClick={closeMobileMenu} className="block text-sm text-navy-light hover:text-white transition-colors py-2 border-b border-white/10 last:border-0">
+                              {service.name}
+                            </Link>
+                          </li>
+                        ))}
+                      </ul>
+                    </div>
+
+                    <div>
+                      <h4 className="text-xs font-semibold uppercase tracking-wider text-navy-light mb-3">Industries</h4>
+                      <ul className="space-y-2">
+                        {industryLinks.map((industry) => (
+                          <li key={industry.name}>
+                            <Link to={industry.href} onClick={closeMobileMenu} className="block text-sm text-navy-light hover:text-white transition-colors py-2 border-b border-white/10 last:border-0">
+                              {industry.name}
+                            </Link>
+                          </li>
+                        ))}
+                      </ul>
+                    </div>
+                  </nav>
+
+                  <div className="mt-auto pt-6">
+                    <Link to="/contact" onClick={closeMobileMenu} className="inline-flex items-center justify-center rounded-md text-sm font-medium h-10 px-4 py-2 w-full bg-primary-navy text-white hover:bg-primary-navy-dark transition-colors">
+                      Request Consultation
+                    </Link>
+                  </div>
+                </div>
+              </SheetContent>
+            </Sheet>
+          </div>
+        </div>
+      </div>
+    </header>
+  )
+}
+
+export default Header

src/components/layout/MobileNav.jsx

@@ -0,0 +1,140 @@
+import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/Sheet'
+import { useState } from 'react'
+import { Link } from 'react-router-dom'
+
+const MobileNav = () => {
+  const [isOpen, setIsOpen] = useState(false)
+
+  const primaryLinks = [
+    { name: 'Home', href: '/' },
+    { name: 'About', href: '/about' },
+    { name: 'Contact', href: '/contact' },
+    { name: 'Support', href: '/support' },
+  ]
+
+  const services = [
+    { name: 'Unified Communications', href: '/services/unified-communications' },
+    { name: 'Contact Center', href: '/services/contact-center' },
+    { name: 'Managed Support', href: '/services/managed-support' },
+    { name: 'Consulting & Training', href: '/services/consulting-training' },
+    { name: 'Infrastructure Cabling', href: '/services/infrastructure-cabling' },
+    { name: 'Wireless Access', href: '/services/wireless-access' },
+    { name: 'Local Networking', href: '/services/local-networking' },
+  ]
+
+  const industries = [
+    { name: 'Healthcare', href: '/industries/healthcare' },
+    { name: 'Retail', href: '/industries/retail' },
+    { name: 'Manufacturing', href: '/industries/manufacturing' },
+    { name: 'Education & Finance', href: '/industries/education-finance' },
+  ]
+
+  const closeMobileMenu = () => {
+    setIsOpen(false)
+  }
+
+  return (
+    <div className="md:hidden">
+      <Sheet open={isOpen} onOpenChange={setIsOpen}>
+        <SheetTrigger asChild>
+          <button className="p-2 text-white hover:text-cyan focus:outline-none focus:ring-2 focus:ring-cyan rounded-md">
+            <svg
+              className="h-6 w-6"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                d="M4 6h16M4 12h16M4 18h16"
+              />
+            </svg>
+            <span className="sr-only">Open menu</span>
+          </button>
+        </SheetTrigger>
+        <SheetContent side="right" className="w-[300px] sm:w-[350px] bg-primary-navy text-white">
+          <div className="flex flex-col h-full">
+            <div className="flex items-center gap-3 mb-6">
+              <img 
+                src="/logo.svg" 
+                alt="Queue North" 
+                className="h-9 w-auto" 
+              />
+              <span className="font-bold text-xl">Queue North</span>
+            </div>
+            
+            <nav className="flex flex-col space-y-6">
+              {/* Primary Links */}
+              <div>
+                <h4 className="text-xs font-semibold uppercase tracking-wider text-navy-light mb-3">Primary</h4>
+                <ul className="space-y-2">
+                  {primaryLinks.map((link) => (
+                    <li key={link.name}>
+                      <Link
+                        to={link.href}
+                        onClick={closeMobileMenu}
+                        className="block text-base font-medium text-navy-light hover:text-white transition-colors py-2"
+                      >
+                        {link.name}
+                      </Link>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+
+              {/* Services */}
+              <div>
+                <h4 className="text-xs font-semibold uppercase tracking-wider text-navy-light mb-3">Services</h4>
+                <ul className="space-y-2">
+                  {services.map((service) => (
+                    <li key={service.name}>
+                      <Link
+                        to={service.href}
+                        onClick={closeMobileMenu}
+                        className="block text-sm text-navy-light hover:text-white transition-colors py-2 border-b border-white/10 last:border-0"
+                      >
+                        {service.name}
+                      </Link>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+
+              {/* Industries */}
+              <div>
+                <h4 className="text-xs font-semibold uppercase tracking-wider text-navy-light mb-3">Industries</h4>
+                <ul className="space-y-2">
+                  {industries.map((industry) => (
+                    <li key={industry.name}>
+                      <Link
+                        to={industry.href}
+                        onClick={closeMobileMenu}
+                        className="block text-sm text-navy-light hover:text-white transition-colors py-2 border-b border-white/10 last:border-0"
+                      >
+                        {industry.name}
+                      </Link>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            </nav>
+
+            <div className="mt-auto pt-6">
+              <Link
+                to="/contact"
+                onClick={closeMobileMenu}
+                className="inline-flex items-center justify-center rounded-md text-sm font-medium h-10 px-4 py-2 w-full bg-primary-navy text-white hover:bg-primary-navy-dark transition-colors"
+              >
+                Request Consultation
+              </Link>
+            </div>
+          </div>
+        </SheetContent>
+      </Sheet>
+    </div>
+  )
+}
+
+export default MobileNav

src/components/layout/index.jsx

@@ -0,0 +1,3 @@
+export { default as Header } from './Header.jsx'
+export { default as Footer } from './Footer.jsx'
+export { default as MobileNav } from './MobileNav.jsx'

src/components/ui/Badge.jsx

@@ -0,0 +1,27 @@
+import * as React from 'react'
+
+const Badge = React.forwardRef(
+  ({ className = '', variant = 'default', ...props }, ref) => {
+    const baseStyles = 'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2'
+    
+    const variants = {
+      default: 'border-transparent bg-primary-navy text-white hover:bg-primary-navy-dark',
+      secondary: 'border-transparent bg-section-alt text-text hover:bg-opacity-80',
+      outline: 'text-foreground',
+      success: 'border-transparent bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300',
+      warning: 'border-transparent bg-yellow-100 text-yellow-700 dark:bg-yellow-900 dark:text-yellow-300',
+      error: 'border-transparent bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300',
+    }
+
+    return (
+      <div
+        ref={ref}
+        className={`${baseStyles} ${variants[variant]} ${className}`}
+        {...props}
+      />
+    )
+  }
+)
+Badge.displayName = 'Badge'
+
+export { Badge }

src/components/ui/Button.jsx

@@ -0,0 +1,31 @@
+import * as React from 'react'
+
+const Button = React.forwardRef(({ className = '', variant = 'default', size = 'default', ...props }, ref) => {
+  const baseStyles = 'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none'
+  
+  const variants = {
+    default: 'bg-primary-navy text-white hover:bg-primary-navy-dark',
+    secondary: 'bg-section-alt text-text hover:bg-opacity-80',
+    outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+    ghost: 'hover:bg-secondary hover:text-secondary-foreground',
+    link: 'text-primary underline-offset-4 hover:underline',
+  }
+  
+  const sizes = {
+    default: 'h-10 px-4 py-2',
+    sm: 'h-9 rounded-md px-3',
+    lg: 'h-11 rounded-md px-8',
+    icon: 'h-10 w-10',
+  }
+
+  return (
+    <button
+      ref={ref}
+      className={`${baseStyles} ${variants[variant] || ''} ${sizes[size] || ''} ${className}`}
+      {...props}
+    />
+  )
+})
+Button.displayName = 'Button'
+
+export { Button }

src/components/ui/Card.jsx

@@ -0,0 +1,65 @@
+import * as React from 'react'
+
+const Card = React.forwardRef(
+  ({ className = '', ...props }, ref) => (
+    <div
+      ref={ref}
+      className={`rounded-xl border border-border bg-card text-card-foreground shadow-sm ${className}`}
+      {...props}
+    />
+  )
+)
+Card.displayName = 'Card'
+
+const CardHeader = React.forwardRef(
+  ({ className = '', ...props }, ref) => (
+    <div
+      ref={ref}
+      className={`flex flex-col space-y-1.5 p-6 ${className}`}
+      {...props}
+    />
+  )
+)
+CardHeader.displayName = 'CardHeader'
+
+const CardTitle = React.forwardRef(
+  ({ className = '', ...props }, ref) => (
+    <h3
+      ref={ref}
+      className={`text-2xl font-semibold leading-none tracking-tight ${className}`}
+      {...props}
+    />
+  )
+)
+CardTitle.displayName = 'CardTitle'
+
+const CardDescription = React.forwardRef(
+  ({ className = '', ...props }, ref) => (
+    <p
+      ref={ref}
+      className={`text-sm text-muted-foreground ${className}`}
+      {...props}
+    />
+  )
+)
+CardDescription.displayName = 'CardDescription'
+
+const CardContent = React.forwardRef(
+  ({ className = '', ...props }, ref) => (
+    <div ref={ref} className={`p-6 pt-0 ${className}`} {...props} />
+  )
+)
+CardContent.displayName = 'CardContent'
+
+const CardFooter = React.forwardRef(
+  ({ className = '', ...props }, ref) => (
+    <div
+      ref={ref}
+      className={`flex items-center p-6 pt-0 ${className}`}
+      {...props}
+    />
+  )
+)
+CardFooter.displayName = 'CardFooter'
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

src/components/ui/Dialog.jsx

@@ -0,0 +1,85 @@
+import * as DialogPrimitive from '@radix-ui/react-dialog'
+import * as React from 'react'
+import { X } from 'lucide-react'
+
+const Dialog = DialogPrimitive.Root
+
+const DialogTrigger = DialogPrimitive.Trigger
+
+const DialogPortal = DialogPrimitive.Portal
+
+const DialogClose = DialogPrimitive.Close
+
+const DialogOverlay = ({ className, ...props }) => (
+  <DialogPrimitive.Overlay
+    className={`fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 ${className}`}
+    {...props}
+  />
+)
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const DialogContent = React.forwardRef(
+  ({ className = '', children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={`fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full ${className}`}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+const DialogHeader = ({ className, ...props }) => (
+  <div
+    className={`flex flex-col space-y-1.5 text-center sm:text-left ${className}`}
+    {...props}
+  />
+)
+DialogHeader.displayName = 'DialogHeader'
+
+const DialogFooter = ({ className, ...props }) => (
+  <div
+    className={`flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 ${className}`}
+    {...props}
+  />
+)
+DialogFooter.displayName = 'DialogFooter'
+
+const DialogTitle = React.forwardRef(
+  ({ className = '', ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={`text-lg font-semibold leading-none tracking-tight ${className}`}
+    {...props}
+  />
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName
+
+const DialogDescription = React.forwardRef(
+  ({ className = '', ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={`text-sm text-muted-foreground ${className}`}
+    {...props}
+  />
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
+
+export {
+  Dialog,
+  DialogTrigger,
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+}

src/components/ui/Input.jsx

@@ -0,0 +1,17 @@
+import * as React from 'react'
+
+const Input = React.forwardRef(
+  ({ className = '', type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={`flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${className}`}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = 'Input'
+
+export { Input }

src/components/ui/Select.jsx

@@ -0,0 +1,33 @@
+import * as React from 'react'
+
+const Select = ({ children, className = '', ...props }) => {
+  return (
+    <div className={`relative ${className}`}>
+      <select
+        className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 appearance-none"
+        {...props}
+      >
+        {children}
+      </select>
+      <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2">
+        <svg
+          className="h-4 w-4 text-muted-foreground"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+            d="M19 9l-7 7-7-7"
+          />
+        </svg>
+      </div>
+    </div>
+  )
+}
+
+Select.displayName = 'Select'
+
+export { Select }

src/components/ui/Sheet.jsx

@@ -0,0 +1,88 @@
+import * as SheetPrimitive from '@radix-ui/react-dialog'
+import { X } from 'lucide-react'
+import * as React from 'react'
+
+const Sheet = SheetPrimitive.Root
+
+const SheetTrigger = SheetPrimitive.Trigger
+
+const SheetClose = SheetPrimitive.Close
+
+const SheetOverlay = React.forwardRef(({ className, ...props }, ref) => (
+  <SheetPrimitive.Overlay
+    ref={ref}
+    className={`fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 ${className}`}
+    {...props}
+  />
+))
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
+
+const sideClasses = {
+  top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
+  bottom: 'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
+  left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
+  right: 'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
+}
+
+const SheetContent = React.forwardRef(({ className, children, side = 'right', ...props }, ref) => (
+  <SheetPrimitive.Portal>
+    <SheetOverlay />
+    <SheetPrimitive.Content
+      ref={ref}
+      className={`fixed z-50 flex flex-col gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out ${sideClasses[side] ?? sideClasses.right} ${className ?? ''}`}
+      {...props}
+    >
+      {children}
+      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </SheetPrimitive.Close>
+    </SheetPrimitive.Content>
+  </SheetPrimitive.Portal>
+))
+SheetContent.displayName = SheetPrimitive.Content.displayName
+
+const SheetHeader = ({ className, ...props }) => (
+  <div
+    className={`flex flex-col space-y-2 text-center sm:text-left ${className}`}
+    {...props}
+  />
+)
+SheetHeader.displayName = 'SheetHeader'
+
+const SheetFooter = ({ className, ...props }) => (
+  <div
+    className={`flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 ${className}`}
+    {...props}
+  />
+)
+SheetFooter.displayName = 'SheetFooter'
+
+const SheetTitle = React.forwardRef(({ className, ...props }, ref) => (
+  <SheetPrimitive.Title
+    ref={ref}
+    className={`text-lg font-semibold text-foreground ${className}`}
+    {...props}
+  />
+))
+SheetTitle.displayName = SheetPrimitive.Title.displayName
+
+const SheetDescription = React.forwardRef(({ className, ...props }, ref) => (
+  <SheetPrimitive.Description
+    ref={ref}
+    className={`text-sm text-muted-foreground ${className}`}
+    {...props}
+  />
+))
+SheetDescription.displayName = SheetPrimitive.Description.displayName
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}

src/components/ui/Textarea.jsx

@@ -0,0 +1,16 @@
+import * as React from 'react'
+
+const Textarea = React.forwardRef(
+  ({ className = '', ...props }, ref) => {
+    return (
+      <textarea
+        className={`flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${className}`}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Textarea.displayName = 'Textarea'
+
+export { Textarea }

src/components/ui/all.jsx

@@ -0,0 +1,39 @@
+import { Button } from './Button.jsx'
+import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from './Card.jsx'
+import { Input } from './Input.jsx'
+import { Textarea } from './Textarea.jsx'
+import { Select } from './Select.jsx'
+import { Badge } from './Badge.jsx'
+import { Sheet, SheetTrigger, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetClose, SheetFooter, SheetOverlay } from './Sheet.jsx'
+import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, DialogClose } from './Dialog.jsx'
+
+export {
+  Button,
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+  Input,
+  Textarea,
+  Select,
+  Badge,
+  Sheet,
+  SheetTrigger,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetDescription,
+  SheetClose,
+  SheetFooter,
+  SheetOverlay,
+  Dialog,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+  DialogClose,
+}

src/components/ui/index.jsx

@@ -0,0 +1,12 @@
+export { default as Button } from './Button.jsx'
+export { default as Card } from './Card.jsx'
+export { default as CardContent } from './CardContent.jsx'
+export { default as CardHeader } from './CardHeader.jsx'
+export { default as CardTitle } from './CardTitle.jsx'
+export { default as CardDescription } from './CardDescription.jsx'
+export { default as Input } from './Input.jsx'
+export { default as Textarea } from './Textarea.jsx'
+export { default as Select } from './Select.jsx'
+export { default as Badge } from './Badge.jsx'
+export { default as Sheet, SheetTrigger, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetClose, SheetFooter, SheetOverlay } from './Sheet.jsx'
+export { default as Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, DialogClose } from './Dialog.jsx'

src/data/industries.js

@@ -0,0 +1,78 @@
+export const industries = [
+  {
+    id: 'healthcare',
+    name: 'Healthcare',
+    shortDesc: 'HIPAA-compliant communications and infrastructure for medical providers',
+    fullDesc: 'Healthcare providers need secure, reliable communications that protect patient data while enabling seamless collaboration. Our solutions are designed specifically for healthcare environments, with HIPAA-compliant options and features that support clinical workflows and patient care.',
+    icon: 'heart-pulse',
+    painPoints: [
+      'HIPAA compliance and data security',
+      'Multi-location coordination',
+      'Emergency response communications',
+      'Patient portal and telehealth integration',
+    ],
+    solutions: [
+      'HIPAA-compliant voice and messaging',
+      'Secure video conferencing for telehealth',
+      'Distributed network infrastructure',
+      '24/7 uptime with redundant systems',
+    ],
+  },
+  {
+    id: 'retail',
+    name: 'Retail',
+    shortDesc: 'Connect stores, teams, and customers with scalable retail communications',
+    fullDesc: 'Retail businesses need communication systems that scale from single stores to national chains. Our solutions help retail organizations connect stores, manage teams, and engage customers with reliable voice, data, and digital communication tools.',
+    icon: 'shopping-cart',
+    painPoints: [
+      'Multi-store coordination',
+      'Centralized management of remote locations',
+      'Customer engagement and loyalty',
+      'Inventory and POS system connectivity',
+    ],
+    solutions: [
+      'Store-to-headquarters connectivity',
+      'Mobile workforce management',
+      'Customer engagement platforms',
+      'Scalable network for growing chains',
+    ],
+  },
+  {
+    id: 'manufacturing',
+    name: 'Manufacturing',
+    shortDesc: 'Industrial communications for production floors and distributed operations',
+    fullDesc: 'Manufacturing operations require communications systems that work in challenging environments and support both office and production floor needs. Our solutions bridge the gap between office systems and industrial operations.',
+    icon: 'factory',
+    painPoints: [
+      'Production floor connectivity',
+      'Remote facility coordination',
+      'Safety and emergency communications',
+      'Integration with manufacturing systems',
+    ],
+    solutions: [
+      'Industrial-grade networking hardware',
+      'Wireless coverage for production floors',
+      'Safety communication systems',
+      'Integration with ERP and MES systems',
+    ],
+  },
+  {
+    id: 'education-finance',
+    name: 'Education & Finance',
+    shortDesc: 'Secure, reliable communications for schools and financial institutions',
+    fullDesc: 'Educational institutions and financial organizations need communications systems that balance accessibility with stringent security requirements. Our solutions help these organizations communicate effectively while protecting sensitive data.',
+    icon: 'landmark',
+    painPoints: [
+      'Data security and privacy',
+      'Regulatory compliance',
+      'Multi-campus or branch coordination',
+      'Remote learning and virtual meetings',
+    ],
+    solutions: [
+      'Secure communication platforms',
+      'Compliance-ready audit trails',
+      'Campus-wide connectivity',
+      'Video conferencing for virtual learning',
+    ],
+  },
+]

src/data/services.js

@@ -0,0 +1,135 @@
+export const services = [
+  {
+    id: 'unified-communications',
+    name: 'Unified Communications',
+    shortDesc: 'Modernize your business communications with seamless integration',
+    fullDesc: 'Transform your business communications with our comprehensive Unified Communications solutions. We help you integrate voice, video, messaging, and collaboration tools into a single, intuitive platform that works across all your devices and locations.',
+    icon: 'message-circle',
+    benefits: [
+      'Seamless voice, video, and messaging integration',
+      'Mobile and desktop app support',
+      'Persistent chat and file sharing',
+      'Presence indicators for real-time visibility',
+    ],
+    idealFor: [
+      'Remote and hybrid teams',
+      'Distributed workforces',
+      'Enterprises needing collaboration tools',
+      'Businesses with multiple locations',
+    ],
+  },
+  {
+    id: 'contact-center',
+    name: 'Contact Center',
+    shortDesc: 'Deliver exceptional customer experiences with modern contact center solutions',
+    fullDesc: 'Create exceptional customer experiences with our contact center solutions. Our cloud-based platforms help you manage customer interactions across phone, email, chat, and social media channels with powerful analytics and workforce management tools.',
+    icon: 'users',
+    benefits: [
+      'Omnichannel customer interactions',
+      'Real-time analytics and reporting',
+      'AI-powered agent assistance',
+      'Scalable cloud infrastructure',
+    ],
+    idealFor: [
+      'Customer service teams',
+      'B2C businesses with high volume',
+      'Enterprises with 24/7 support needs',
+      'Outsourced contact center operations',
+    ],
+  },
+  {
+    id: 'managed-support',
+    name: 'Managed Support',
+    shortDesc: 'Expert IT support with proactive monitoring and rapid response',
+    fullDesc: 'Our Managed Support services provide comprehensive IT help desk and infrastructure support. With 24/7 monitoring, rapid response times, and dedicated support engineers, we ensure your technology infrastructure runs smoothly so you can focus on your business.',
+    icon: 'life-buoy',
+    benefits: [
+      '24/7 proactive monitoring',
+      'Rapid response SLAs',
+      'Dedicated support engineers',
+      'Comprehensive IT help desk',
+    ],
+    idealFor: [
+      'Businesses without dedicated IT staff',
+      'Small to mid-sized enterprises',
+      'Organizations needing extended support',
+      'Businesses with critical IT dependencies',
+    ],
+  },
+  {
+    id: 'consulting-training',
+    name: 'Consulting & Training',
+    shortDesc: 'Expert guidance and training for communications and infrastructure',
+    fullDesc: 'Our consulting and training services help you make the most of your communications infrastructure. From strategic planning and implementation to hands-on training, we provide the expertise your team needs to succeed.',
+    icon: 'graduation-cap',
+    benefits: [
+      'Strategic technology planning',
+      'Implementation and migration support',
+      'Hands-on user and admin training',
+      'Ongoing consultation and optimization',
+    ],
+    idealFor: [
+      'Organizations undergoing digital transformation',
+      'Teams adopting new technologies',
+      'Businesses upgrading existing systems',
+      'Enterprises needing strategic guidance',
+    ],
+  },
+  {
+    id: 'infrastructure-cabling',
+    name: 'Infrastructure Cabling',
+    shortDesc: 'Professional structured cabling for reliable network performance',
+    fullDesc: 'Our infrastructure cabling services ensure your physical network foundation supports current and future needs. We design and install copper and fiber optic cabling systems that provide high-performance, scalable connectivity for your entire organization.',
+    icon: 'link',
+    benefits: [
+      'Cat6/Cat6a and fiber optic installations',
+      'Data center cabling solutions',
+      'Structured cabling design and documentation',
+      'Testing and certification',
+    ],
+    idealFor: [
+      'New construction projects',
+      'Network upgrades',
+      'Data center installations',
+      'Office relocations',
+    ],
+  },
+  {
+    id: 'wireless-access',
+    name: 'Wireless Access',
+    shortDesc: 'Enterprise-grade Wi-Fi solutions for reliable mobile connectivity',
+    fullDesc: 'Our wireless access solutions provide robust, high-performance Wi-Fi coverage for your entire facility. From site surveys and design to installation and optimization, we ensure seamless mobile connectivity for employees and guests.',
+    icon: 'wifi',
+    benefits: [
+      'Enterprise Wi-Fi design and deployment',
+      'High-density coverage solutions',
+      'Guest Wi-Fi with captive portal',
+      'Site surveys and optimization',
+    ],
+    idealFor: [
+      'Office buildings and campuses',
+      'Retail locations',
+      'Healthcare facilities',
+      'Manufacturing plants',
+    ],
+  },
+  {
+    id: 'local-networking',
+    name: 'Local Networking',
+    shortDesc: 'Robust local network infrastructure for business-critical operations',
+    fullDesc: 'Build a reliable local network infrastructure that supports your business operations. Our networking solutions include routing, switching, firewall configuration, and network segmentation to ensure secure, high-performance connectivity throughout your organization.',
+    icon: 'network',
+    benefits: [
+      'Enterprise-grade routing and switching',
+      'Network security and segmentation',
+      'Wireless controller management',
+      'Network monitoring and maintenance',
+    ],
+    idealFor: [
+      'Businesses with on-premise servers',
+      'Multi-location organizations',
+      'Enterprises needing network redundancy',
+      'Organizations with strict security requirements',
+    ],
+  },
+]

src/index.css

@@ -0,0 +1,69 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  font-family: 'Inter', sans-serif;
+  color: #0F172A;
+  background-color: #F8FAFC;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+
+img {
+  max-width: 100%;
+  display: block;
+}
+
+a {
+  color: #0EA5E9;
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+/* Container - custom max-width */
+.container {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 0 16px;
+}
+
+/* Section spacing - mobile first */
+.section {
+  padding: 4rem 0;
+}
+
+/* Desktop section spacing */
+@media (min-width: 1024px) {
+  .section {
+    padding: 6rem 0;
+  }
+}
+
+/* Hero section styling */
+.hero {
+  min-height: 70vh;
+  display: flex;
+  align-items: center;
+  background: linear-gradient(135deg, #0B2A3C 0%, #071A2A 100%);
+  color: white;
+  padding: 4rem 0 5rem;
+}
+
+/* Light section background */
+.section-alt {
+  background: #EEF6FB;
+}

src/lib/api.js

@@ -0,0 +1,30 @@
+import { queryClient } from './queryClient'
+
+const API_BASE_URL = import.meta.env.VITE_API_URL || 'http://localhost:3001/api'
+
+export const api = {
+  get: async (endpoint) => {
+    const response = await fetch(`${API_BASE_URL}${endpoint}`)
+    if (!response.ok) {
+      throw new Error(`API error: ${response.statusText}`)
+    }
+    return response.json()
+  },
+
+  post: async (endpoint, data) => {
+    const response = await fetch(`${API_BASE_URL}${endpoint}`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(data),
+    })
+    if (!response.ok) {
+      const errorData = await response.json()
+      throw new Error(errorData.error || `API error: ${response.statusText}`)
+    }
+    return response.json()
+  },
+}
+
+export { queryClient }

src/lib/queryClient.js

@@ -0,0 +1,9 @@
+import { QueryClient } from '@tanstack/react-query'
+
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 1000 * 60 * 5, // 5 minutes
+    },
+  },
+})

src/main.jsx

@@ -0,0 +1,27 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { RouterProvider } from 'react-router-dom'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { Toaster } from 'sonner'
+import router from './router.jsx'
+import App from './App.jsx'
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 1000 * 60 * 5, // 5 minutes
+    },
+  },
+})
+
+// Wrap the router with providers
+const Root = () => (
+  <StrictMode>
+    <QueryClientProvider client={queryClient}>
+      <RouterProvider router={router} />
+      <Toaster position="top-right" />
+    </QueryClientProvider>
+  </StrictMode>
+)
+
+createRoot(document.getElementById('root')).render(<Root />)

src/pages/8x8.jsx

@@ -0,0 +1,97 @@
+const EightXEight = () => {
+  return (
+    <div className="container mx-auto px-4 py-16 md:py-24">
+      {/* Page Hero */}
+      <section className="mb-16">
+        <h1 className="text-4xl md:text-5xl font-bold text-primary-navy mb-6">8x8 Certified Partner</h1>
+        <p className="text-xl text-soft-text max-w-3xl">
+          As an 8x8 Certified Partner, we help organizations implement and manage cloud communications solutions that drive business success.
+        </p>
+      </section>
+
+      {/* About 8x8 */}
+      <section className="grid grid-cols-1 lg:grid-cols-2 gap-12 mb-16">
+        <div>
+          <h2 className="text-3xl font-bold text-primary-navy mb-4">What is 8x8?</h2>
+          <p className="text-lg text-soft-text mb-6 leading-relaxed">
+            8x8 is a leading provider of cloud communications and contact center solutions. Their platform combines voice, video, chat, email, and contact center capabilities into a single, unified solution that helps businesses communicate more effectively and serve customers better.
+          </p>
+          <p className="text-lg text-soft-text leading-relaxed">
+            As a certified partner, we have deep expertise in implementing and supporting 8x8 solutions, ensuring our customers get the most value from their investment.
+          </p>
+        </div>
+        <div>
+          <div className="rounded-xl overflow-hidden shadow-lg">
+            <img 
+              src="/assets/8x8_Logo_White.svg" 
+              alt="8x8 Logo" 
+              className="w-full h-full object-cover"
+            />
+          </div>
+        </div>
+      </section>
+
+      {/* Our Expertise */}
+      <section className="mb-16">
+        <h2 className="text-3xl font-bold text-primary-navy mb-8 text-center">8x8 Expertise</h2>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+          {[
+            'VoIP Implementation',
+            'Cloud PBX Migration',
+            'Contact Center Setup',
+            'Unified Communications',
+            'Video Conferencing',
+            'Collaboration Tools',
+            'System Integration',
+            'Ongoing Support',
+          ].map((expertise, index) => (
+            <div key={index} className="flex items-center gap-2 p-3 rounded-lg border border-border bg-card">
+              <div className="h-5 w-5 rounded-full bg-primary-navy text-white flex items-center justify-center flex-shrink-0">
+                <svg className="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
+                </svg>
+              </div>
+              <span className="text-sm font-medium text-text">{expertise}</span>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* Benefits */}
+      <section className="mb-16">
+        <h2 className="text-3xl font-bold text-primary-navy mb-8 text-center">Why Choose 8x8</h2>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {[
+            { title: 'Scalability', desc: 'Easily scale your communications as your business grows' },
+            { title: 'Reliability', desc: '99.999% uptime guarantee for mission-critical communications' },
+            { title: 'Integration', desc: 'Seamlessly integrate with your favorite business applications' },
+            { title: 'Mobility', desc: 'Full-featured mobile apps for remote and traveling employees' },
+            { title: 'Analytics', desc: 'Real-time insights and reporting to optimize performance' },
+            { title: 'Support', desc: '24/7 expert support to keep your communications running' },
+          ].map((benefit, index) => (
+            <div key={index} className="p-6 rounded-lg border border-border bg-card shadow-sm hover:shadow-md transition-shadow">
+              <h3 className="text-xl font-semibold text-primary-navy mb-3">{benefit.title}</h3>
+              <p className="text-soft-text">{benefit.desc}</p>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* CTA */}
+      <section className="bg-section-alt rounded-xl p-8 md:p-12 text-center">
+        <h2 className="text-3xl md:text-4xl font-bold text-primary-navy mb-6">Ready to Explore 8x8 Solutions?</h2>
+        <p className="text-xl text-soft-text mb-8 max-w-2xl mx-auto">
+          Schedule a free consultation with our 8x8 certified experts.
+        </p>
+        <a
+          href="/contact"
+          className="inline-block bg-primary-navy text-white px-8 py-3 rounded-md font-bold text-lg hover:bg-primary-navy-dark transition-colors"
+        >
+          Request Consultation
+        </a>
+      </section>
+    </div>
+  )
+}
+
+export default EightXEight

src/pages/About.jsx

@@ -0,0 +1,100 @@
+const About = () => {
+  return (
+    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 lg:py-24">
+      {/* Page Hero */}
+      <section className="mb-16">
+        <h1 className="text-4xl md:text-5xl font-bold text-primary-navy mb-6">About Queue North</h1>
+        <p className="text-xl text-soft-text max-w-3xl">
+          We're communications and infrastructure partners who cut through the vendor noise to deliver what actually works for your business.
+        </p>
+      </section>
+
+      {/* Company Story */}
+      <section className="grid grid-cols-1 lg:grid-cols-2 gap-12 mb-16">
+        <div>
+          <h2 className="text-3xl font-bold text-primary-navy mb-4">Our Story</h2>
+          <p className="text-lg text-soft-text mb-6 leading-relaxed">
+            Founded in 2000, Queue North Technologies began with a simple mission: help businesses navigate the complex world of communications technology. What started as a small team of communications specialists has grown into a full-service provider for SMB and enterprise organizations across multiple industries.
+          </p>
+          <p className="text-lg text-soft-text mb-6 leading-relaxed">
+            Our journey began when our founders saw too many businesses paying too much for solutions that didn't fit their actual needs. We believed in a different approach — one focused on understanding your business challenges first, then selecting or integrating the right technologies to solve them.
+          </p>
+          <p className="text-lg text-soft-text leading-relaxed">
+            Today, we continue that mission as an 8x8 Certified Partner, helping organizations modernize their communications, streamline their operations, and focus on what matters most — their customers and their growth.
+          </p>
+        </div>
+        <div>
+          <div className="rounded-xl overflow-hidden shadow-lg">
+            <img 
+              src="/assets/about-image.png" 
+              alt="Our Team" 
+              className="w-full h-full object-cover"
+            />
+          </div>
+        </div>
+      </section>
+
+      {/* Our Values */}
+      <section className="mb-16">
+        <h2 className="text-3xl font-bold text-primary-navy mb-8 text-center">Our Values</h2>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {[
+            { title: 'Business First', desc: 'We focus on your business outcomes, not just technology' },
+            { title: 'Honesty', desc: 'We tell you what you need, not just what we can sell' },
+            { title: 'Partnership', desc: 'We work with you, not just for you' },
+            { title: 'Expertise', desc: 'Our team has real, proven experience in your industry' },
+            { title: 'Reliability', desc: 'When we say we will do something, we do it' },
+            { title: 'Support', desc: 'Our job doesn\'t end when installation completes' },
+          ].map((value, index) => (
+            <div key={index} className="p-6 rounded-lg border border-border bg-card shadow-sm hover:shadow-md transition-shadow">
+              <h3 className="text-xl font-semibold text-primary-navy mb-3">{value.title}</h3>
+              <p className="text-soft-text">{value.desc}</p>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* Our Expertise */}
+      <section className="mb-16">
+        <h2 className="text-3xl font-bold text-primary-navy mb-8 text-center">Our Expertise</h2>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+          {[
+            '8x8 Certified Partner',
+            'VoIP and UCaaS Solutions',
+            'Contact Center Implementation',
+            'Network Infrastructure',
+            'Cloud Migration',
+            'Cybersecurity for Communications',
+            'Disaster Recovery Planning',
+            '24/7 Support & Monitoring',
+          ].map((expertise, index) => (
+            <div key={index} className="flex items-center gap-2 p-3 rounded-lg border border-border bg-card">
+              <div className="h-5 w-5 rounded-full bg-primary-navy text-white flex items-center justify-center flex-shrink-0">
+                <svg className="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
+                </svg>
+              </div>
+              <span className="text-sm font-medium text-text">{expertise}</span>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* CTA */}
+      <section className="bg-section-alt rounded-xl p-8 md:p-12 text-center">
+        <h2 className="text-3xl md:text-4xl font-bold text-primary-navy mb-6">Ready to Learn More?</h2>
+        <p className="text-xl text-soft-text mb-8 max-w-2xl mx-auto">
+          Schedule a free consultation with our communications experts to discuss your needs.
+        </p>
+        <a
+          href="/contact"
+          className="inline-block bg-primary-navy text-white px-8 py-3 rounded-md font-bold text-lg hover:bg-primary-navy-dark transition-colors"
+        >
+          Request Consultation
+        </a>
+      </section>
+    </div>
+  )
+}
+
+export default About

src/pages/Contact.jsx

@@ -0,0 +1,292 @@
+import { useState } from 'react'
+import { useMutation } from '@tanstack/react-query'
+import { toast } from 'sonner'
+import { Button } from '@/components/ui/Button'
+import { Input } from '@/components/ui/Input'
+import { Textarea } from '@/components/ui/Textarea'
+import { Select } from '@/components/ui/Select'
+import { api } from '@/lib/api'
+
+const Contact = () => {
+  const [formState, setFormState] = useState({
+    company: '',
+    name: '',
+    email: '',
+    phone: '',
+    zip: '',
+    message: '',
+    service_interest: '',
+  })
+  const [errors, setErrors] = useState({
+    company: '',
+    name: '',
+    email: '',
+    message: '',
+  })
+
+  const mutation = useMutation({
+    mutationFn: (data) => api.post('/leads', data),
+    onSuccess: () => {
+      toast.success('Thanks! We\'ll be in touch shortly.')
+      setFormState({
+        company: '',
+        name: '',
+        email: '',
+        phone: '',
+        zip: '',
+        message: '',
+        service_interest: '',
+      })
+      setErrors({
+        company: '',
+        name: '',
+        email: '',
+        message: '',
+      })
+    },
+    onError: (error) => {
+      toast.error(error.message || 'Failed to submit form. Please try again.')
+    },
+  })
+
+  const validateForm = () => {
+    const newErrors = {
+      company: '',
+      name: '',
+      email: '',
+      message: '',
+    }
+
+    // Validate required fields
+    if (!formState.company.trim()) newErrors.company = 'Company name is required'
+    if (!formState.name.trim()) newErrors.name = 'Name is required'
+    if (!formState.message.trim()) newErrors.message = 'Message is required'
+
+    // Validate email format
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+    if (!formState.email.trim()) {
+      newErrors.email = 'Email is required'
+    } else if (!emailRegex.test(formState.email)) {
+      newErrors.email = 'Please enter a valid email address'
+    }
+
+    const hasErrors = Object.values(newErrors).some(error => error !== '')
+    setErrors(newErrors)
+
+    if (hasErrors) {
+      toast.error('Please fix the errors in the form')
+      return false
+    }
+
+    return true
+  }
+
+  const handleSubmit = (e) => {
+    e.preventDefault()
+    if (!validateForm()) return
+    mutation.mutate(formState)
+  }
+
+  const handleChange = (e) => {
+    const { name, value } = e.target
+    setFormState(prev => ({ ...prev, [name]: value }))
+    // Clear error for this field as user types
+    if (errors[name]) {
+      setErrors(prev => ({ ...prev, [name]: '' }))
+    }
+  }
+
+  return (
+    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 lg:py-24">
+      {/* Page Hero */}
+      <section className="mb-16">
+        <h1 className="text-4xl md:text-5xl font-bold text-primary-navy mb-6">Contact Us</h1>
+        <p className="text-xl text-soft-text max-w-3xl">
+          Have questions about our services? We're here to help. Fill out the form and we'll get back to you shortly.
+        </p>
+      </section>
+
+      {/* Contact Form */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
+        {/* Left - Info */}
+        <div>
+          <div className="mb-8">
+            <h2 className="text-2xl font-bold text-primary-navy mb-4">Get in Touch</h2>
+            <p className="text-soft-text mb-6">
+              Our team of communications and infrastructure experts is ready to help you find the right solution for your business needs.
+            </p>
+            <div className="space-y-4">
+              <div>
+                <h3 className="font-semibold text-text mb-2">Hours of Operation</h3>
+                <p className="text-soft-text">Monday - Friday: 8:00 AM - 6:00 PM CT</p>
+              </div>
+              <div>
+                <h3 className="font-semibold text-text mb-2">Email</h3>
+                <p className="text-soft-text">info@queuenorth.com</p>
+              </div>
+            </div>
+          </div>
+
+          <div className="bg-section-alt rounded-lg p-6">
+            <h3 className="font-semibold text-primary-navy mb-4">Why Choose Queue North?</h3>
+            <ul className="space-y-3">
+              {[
+                '8x8 Certified Partner with proven expertise',
+                '25+ years of industry experience',
+                'SMB to Enterprise solutions',
+                'Focus on your business outcomes',
+              ].map((item, index) => (
+                <li key={index} className="flex items-center gap-3 text-text">
+                  <svg className="h-5 w-5 text-primary-navy" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
+                  </svg>
+                  {item}
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+
+        {/* Right - Form */}
+        <div>
+          <form onSubmit={handleSubmit} className={`space-y-6 ${mutation.isPending ? 'opacity-70 pointer-events-none' : ''}`}>
+            <div>
+              <label htmlFor="company" className="block text-sm font-medium text-text mb-2">
+                Company Name <span className="text-red-600">*</span>
+              </label>
+              <Input
+                type="text"
+                id="company"
+                name="company"
+                value={formState.company}
+                onChange={handleChange}
+                required
+                placeholder="Your company name"
+                className={errors.company ? 'border-red-500 focus-visible:ring-red-500' : ''}
+              />
+              {errors.company && (
+                <p className="text-xs text-red-600 mt-1">{errors.company}</p>
+              )}
+            </div>
+
+            <div>
+              <label htmlFor="name" className="block text-sm font-medium text-text mb-2">
+                Name <span className="text-red-600">*</span>
+              </label>
+              <Input
+                type="text"
+                id="name"
+                name="name"
+                value={formState.name}
+                onChange={handleChange}
+                required
+                placeholder="Your full name"
+                className={errors.name ? 'border-red-500 focus-visible:ring-red-500' : ''}
+              />
+              {errors.name && (
+                <p className="text-xs text-red-600 mt-1">{errors.name}</p>
+              )}
+            </div>
+
+            <div>
+              <label htmlFor="email" className="block text-sm font-medium text-text mb-2">
+                Email <span className="text-red-600">*</span>
+              </label>
+              <Input
+                type="email"
+                id="email"
+                name="email"
+                value={formState.email}
+                onChange={handleChange}
+                required
+                placeholder="your.email@example.com"
+                className={errors.email ? 'border-red-500 focus-visible:ring-red-500' : ''}
+              />
+              {errors.email && (
+                <p className="text-xs text-red-600 mt-1">{errors.email}</p>
+              )}
+            </div>
+
+            <div>
+              <label htmlFor="phone" className="block text-sm font-medium text-text mb-2">
+                Phone (Optional)
+              </label>
+              <Input
+                type="tel"
+                id="phone"
+                name="phone"
+                value={formState.phone}
+                onChange={handleChange}
+                placeholder="(555) 123-4567"
+              />
+            </div>
+
+            <div>
+              <label htmlFor="zip" className="block text-sm font-medium text-text mb-2">
+                ZIP Code (Optional)
+              </label>
+              <Input
+                type="text"
+                id="zip"
+                name="zip"
+                value={formState.zip}
+                onChange={handleChange}
+                placeholder="12345"
+              />
+            </div>
+
+            <div>
+              <label htmlFor="service_interest" className="block text-sm font-medium text-text mb-2">
+                Service Interest (Optional)
+              </label>
+              <Select
+                id="service_interest"
+                name="service_interest"
+                value={formState.service_interest}
+                onChange={handleChange}
+              >
+                <option value="">Select a service...</option>
+                <option value="unified-communications">Unified Communications</option>
+                <option value="contact-center">Contact Center</option>
+                <option value="managed-support">Managed Support</option>
+                <option value="consulting-training">Consulting & Training</option>
+                <option value="infrastructure-cabling">Infrastructure Cabling</option>
+                <option value="wireless-access">Wireless Access</option>
+                <option value="local-networking">Local Networking</option>
+              </Select>
+            </div>
+
+            <div>
+              <label htmlFor="message" className="block text-sm font-medium text-text mb-2">
+                Message <span className="text-red-600">*</span>
+              </label>
+              <textarea
+                id="message"
+                name="message"
+                value={formState.message}
+                onChange={handleChange}
+                required
+                placeholder="Tell us about your needs..."
+                rows={5}
+                className={`flex min-h-[80px] w-full rounded-md border bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${errors.message ? 'border-red-500 focus-visible:ring-red-500' : ''}`}
+              />
+              {errors.message && (
+                <p className="text-xs text-red-600 mt-1">{errors.message}</p>
+              )}
+            </div>
+
+            <Button
+              type="submit"
+              className="w-full"
+              disabled={mutation.isPending}
+            >
+              {mutation.isPending ? 'Submitting...' : 'Request Consultation'}
+            </Button>
+          </form>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Contact

src/pages/Home.jsx

@@ -0,0 +1,193 @@
+import { Button } from '@/components/ui/Button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/Card'
+import { services } from '@/data/services'
+import { industries } from '@/data/industries'
+import { useNavigate } from 'react-router-dom'
+import { MapPin } from 'lucide-react'
+
+const Home = () => {
+  const navigate = useNavigate()
+
+  return (
+    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      {/* Hero Section */}
+      <section className="bg-primary-navy text-white py-16 md:py-24">
+        <div className="container mx-auto px-4">
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+            <div>
+              <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6">
+                Modern Communications Infrastructure Without the Vendor Noise
+              </h1>
+              <p className="text-xl md:text-2xl text-section-alt mb-8 max-w-2xl">
+                We deliver UCaaS, Contact Center, deployment, and managed lifecycle support for SMB and enterprise organizations.
+              </p>
+              <div className="flex flex-col sm:flex-row gap-4">
+                <Button variant="default" size="lg" className="bg-white text-primary-navy hover:bg-gray-100">
+                  Request Consultation
+                </Button>
+                <Button variant="outline" size="lg" className="border-white text-white hover:bg-white/10">
+                  Explore Services
+                </Button>
+              </div>
+              <div className="mt-10 flex flex-wrap gap-4">
+                <span className="px-4 py-2 bg-white/10 rounded-full text-sm font-medium">8x8 Certified Partner</span>
+                <span className="px-4 py-2 bg-white/10 rounded-full text-sm font-medium">Veteran Owned</span>
+                <span className="px-4 py-2 bg-white/10 rounded-full text-sm font-numeric">25+ Years Experience</span>
+                <span className="px-4 py-2 bg-white/10 rounded-full text-sm font-medium">SMB to Enterprise</span>
+              </div>
+            </div>
+            <div className="hidden lg:block">
+              <div className="relative rounded-xl overflow-hidden shadow-2xl">
+                <img 
+                  src="/assets/hero-tech.png" 
+                  alt="Communications Infrastructure" 
+                  className="w-full h-full object-cover"
+                />
+                <div className="absolute inset-0 bg-gradient-to-t from-primary-navy/50 to-transparent" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Trust Bar */}
+      <section className="bg-section-alt py-12">
+        <div className="container mx-auto px-4">
+          <div className="text-center mb-8">
+            <h2 className="text-2xl font-semibold text-primary-navy mb-2">Trusted Partner</h2>
+            <p className="text-soft-text">8x8 Certified Partner with proven expertise</p>
+          </div>
+          <div className="flex flex-wrap justify-center items-center gap-8 md:gap-16 opacity-70">
+            <div className="flex items-center gap-3">
+              <img src="/assets/8x8_Logo_White.svg" alt="8x8" className="h-8" />
+              <span className="font-medium">8x8 Certified Partner</span>
+            </div>
+            <div className="flex items-center gap-3">
+              <div className="w-8 h-8 bg-primary-navy rounded-full flex items-center justify-center text-white font-bold">V</div>
+              <span className="font-medium">Veteran Owned</span>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Services Section */}
+      <section className="bg-background py-16 md:py-24">
+        <div className="container mx-auto px-4">
+          <div className="text-center mb-12">
+            <h2 className="text-3xl md:text-4xl font-bold text-primary-navy mb-4">Our Services</h2>
+            <p className="text-xl text-soft-text max-w-2xl mx-auto">
+              Comprehensive communications and infrastructure solutions for every business need
+            </p>
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {services.map((service) => (
+              <Card key={service.id} className="hover:shadow-md transition-shadow cursor-pointer">
+                <CardHeader>
+                  <CardTitle className="text-primary-navy">{service.name}</CardTitle>
+                  <CardDescription>{service.shortDesc}</CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <p className="text-sm text-soft-text mb-4">{service.fullDesc}</p>
+                  <Button variant="link" className="text-primary-navy p-0 h-auto text-sm" onClick={() => navigate(`/services/${service.id}`)}>
+                    Learn more →
+                  </Button>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Why Queue North */}
+      <section className="bg-section-alt py-16 md:py-24">
+        <div className="container mx-auto px-4">
+          <div className="text-center mb-12">
+            <h2 className="text-3xl md:text-4xl font-bold text-primary-navy mb-4">Why Queue North</h2>
+            <p className="text-xl text-soft-text max-w-2xl mx-auto">
+              Three pillars of our approach to communications and infrastructure
+            </p>
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+            <Card>
+              <CardHeader>
+                <CardTitle className="text-primary-navy">Architecture</CardTitle>
+                <CardDescription>Strategic Design</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <p className="text-sm text-soft-text mb-4">
+                  We design communications architectures that scale with your business, not against it. Our approach ensures your infrastructure supports your goals, not complicates them.
+                </p>
+              </CardContent>
+            </Card>
+            <Card>
+              <CardHeader>
+                <CardTitle className="text-primary-navy">Deployment</CardTitle>
+                <CardDescription>Seamless Implementation</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <p className="text-sm text-soft-text mb-4">
+                  Our deployment process minimizes disruption and maximizes efficiency. We handle everything from planning to go-live, ensuring smooth transitions and quick ROI.
+                </p>
+              </CardContent>
+            </Card>
+            <Card>
+              <CardHeader>
+                <CardTitle className="text-primary-navy">Lifecycle Support</CardTitle>
+                <CardDescription>Ongoing Optimization</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <p className="text-sm text-soft-text mb-4">
+                  Our support extends beyond installation. We continuously monitor, optimize, and evolve your communications infrastructure to meet changing business needs.
+                </p>
+              </CardContent>
+            </Card>
+          </div>
+        </div>
+      </section>
+
+      {/* Industries Section */}
+      <section className="bg-background py-16 md:py-24">
+        <div className="container mx-auto px-4">
+          <div className="text-center mb-12">
+            <h2 className="text-3xl md:text-4xl font-bold text-primary-navy mb-4">Industries We Serve</h2>
+            <p className="text-xl text-soft-text max-w-2xl mx-auto">
+              Tailored solutions for healthcare, retail, manufacturing, and more
+            </p>
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+            {industries.map((industry) => (
+              <Card key={industry.id} className="hover:shadow-md transition-shadow cursor-pointer">
+                <CardContent className="p-6">
+                  <h3 className="text-xl font-semibold text-primary-navy mb-3">{industry.name}</h3>
+                  <p className="text-sm text-soft-text mb-4">
+                    Industry-specific solutions designed to address your unique challenges and requirements.
+                  </p>
+                  <Button variant="link" className="text-primary-navy p-0 h-auto text-sm" onClick={() => navigate(industry.href)}>
+                    Learn more →
+                  </Button>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Final CTA */}
+      <section className="bg-primary-navy text-white py-16 md:py-24">
+        <div className="container mx-auto px-4 text-center max-w-7xl">
+          <h2 className="text-3xl md:text-4xl font-bold mb-6">
+            Tell us what you're trying to fix. We'll help map the path.
+          </h2>
+          <p className="text-xl text-section-alt mb-8 max-w-2xl mx-auto">
+            Schedule a free consultation with our communications experts.
+          </p>
+          <Button variant="default" size="lg" onClick={() => navigate('/contact')}>
+            Request Consultation
+          </Button>
+        </div>
+      </section>
+    </div>
+  )
+}
+
+export default Home

src/pages/Industries.jsx

@@ -0,0 +1,77 @@
+import { industries } from '@/data/industries'
+
+const Industries = () => {
+  return (
+    <div className="container mx-auto px-4 py-16 md:py-24">
+      {/* Page Hero */}
+      <section className="mb-16">
+        <h1 className="text-4xl md:text-5xl font-bold text-primary-navy mb-6">Industries We Serve</h1>
+        <p className="text-xl text-soft-text max-w-3xl">
+          Tailored communications and infrastructure solutions designed for the unique challenges of your industry.
+        </p>
+      </section>
+
+      {/* Industries Grid */}
+      <section className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-6">
+        {industries.map((industry) => (
+          <div key={industry.id} className="group cursor-pointer">
+            <div className="rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow bg-card border border-border">
+              <div className="p-6">
+                <div className="flex items-center gap-4 mb-4">
+                  <div className="h-12 w-12 rounded-lg bg-section-alt flex items-center justify-center flex-shrink-0">
+                    <svg className="h-6 w-6 text-primary-navy" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
+                    </svg>
+                  </div>
+                  <h3 className="text-xl font-semibold text-primary-navy group-hover:text-primary-navy-dark transition-colors">
+                    {industry.name}
+                  </h3>
+                </div>
+                <p className="text-soft-text mb-4">{industry.shortDesc}</p>
+                
+                <div className="mb-4">
+                  <h4 className="text-sm font-semibold text-text mb-2">Pain Points We Solve</h4>
+                  <div className="space-y-2">
+                    {industry.painPoints.slice(0, 2).map((painPoint, index) => (
+                      <div key={index} className="flex items-start gap-2 text-sm text-soft-text">
+                        <div className="h-4 w-4 rounded-full bg-red-100 text-red-600 flex items-center justify-center flex-shrink-0 mt-0.5">
+                          <svg className="h-2 w-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                          </svg>
+                        </div>
+                        <span>{painPoint}</span>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+                
+                <a href={`/industries/${industry.id}`} className="inline-flex items-center gap-1 text-primary-navy font-medium hover:underline mt-2">
+                  Learn more
+                  <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5l7 7-7 7" />
+                  </svg>
+                </a>
+              </div>
+            </div>
+          </div>
+        ))}
+      </section>
+
+      {/* CTA */}
+      <section className="mt-16 bg-section-alt rounded-xl p-8 md:p-12 text-center">
+        <h2 className="text-3xl md:text-4xl font-bold text-primary-navy mb-6">Can't Find Your Industry?</h2>
+        <p className="text-xl text-soft-text mb-8 max-w-2xl mx-auto">
+          We work with businesses across all industries. Contact us to discuss your specific needs.
+        </p>
+        <a
+          href="/contact"
+          className="inline-block bg-primary-navy text-white px-8 py-3 rounded-md font-bold text-lg hover:bg-primary-navy-dark transition-colors"
+        >
+          Request Consultation
+        </a>
+      </section>
+    </div>
+  )
+}
+
+export default Industries

src/pages/IndustryDetail.jsx

@@ -0,0 +1,104 @@
+import { useParams } from 'react-router-dom'
+import { industries } from '@/data/industries'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card'
+
+const IndustryDetail = () => {
+  const { slug } = useParams()
+  const industry = industries.find(i => i.id === slug)
+
+  if (!industry) {
+    return (
+      <div className="container mx-auto px-4 py-16 md:py-24">
+        <div className="text-center">
+          <h1 className="text-3xl font-bold text-primary-navy mb-4">Industry Not Found</h1>
+          <p className="text-xl text-soft-text mb-8">The industry you're looking for doesn't exist.</p>
+          <a href="/industries" className="text-primary-navy hover:underline">
+            Back to Industries
+          </a>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="container mx-auto px-4 py-16 md:py-24">
+      {/* Page Hero */}
+      <section className="mb-16">
+        <h1 className="text-4xl md:text-5xl font-bold text-primary-navy mb-6">{industry.name}</h1>
+        <p className="text-xl text-soft-text max-w-3xl">{industry.shortDesc}</p>
+      </section>
+
+      {/* Main Content */}
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-12">
+        {/* Left Column - Main Content */}
+        <div className="lg:col-span-2">
+          <section className="mb-12">
+            <h2 className="text-2xl font-bold text-primary-navy mb-4">Industry Overview</h2>
+            <p className="text-lg text-soft-text mb-6 leading-relaxed">
+              {industry.fullDesc}
+            </p>
+          </section>
+
+          <section className="mb-12">
+            <h2 className="text-2xl font-bold text-primary-navy mb-4">Pain Points We Solve</h2>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              {industry.painPoints.map((painPoint, index) => (
+                <div key={index} className="flex items-start gap-3">
+                  <div className="h-6 w-6 rounded-full bg-red-100 text-red-700 flex items-center justify-center flex-shrink-0 mt-1">
+                    <svg className="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                    </svg>
+                  </div>
+                  <span className="text-lg text-text">{painPoint}</span>
+                </div>
+              ))}
+            </div>
+          </section>
+
+          <section className="mb-12">
+            <h2 className="text-2xl font-bold text-primary-navy mb-4">Our Solutions</h2>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              {industry.solutions.map((solution, index) => (
+                <div key={index} className="flex items-start gap-3">
+                  <div className="h-6 w-6 rounded-full bg-green-100 text-green-700 flex items-center justify-center flex-shrink-0 mt-1">
+                    <svg className="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
+                    </svg>
+                  </div>
+                  <span className="text-lg text-text">{solution}</span>
+                </div>
+              ))}
+            </div>
+          </section>
+        </div>
+
+        {/* Right Column - Sidebar */}
+        <div className="lg:col-span-1">
+          <Card className="sticky top-24">
+            <CardHeader>
+              <CardTitle className="text-primary-navy">Industry Insights</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div>
+                <h4 className="font-semibold text-text mb-2">Industry</h4>
+                <p className="text-soft-text">{industry.name}</p>
+              </div>
+              <div className="pt-4 border-t border-border">
+                <a href="/contact" className="block w-full bg-primary-navy text-white px-4 py-3 rounded-md text-center font-medium hover:bg-primary-navy-dark transition-colors">
+                  Request Consultation
+                </a>
+              </div>
+              <div className="pt-2">
+                <a href="/industries" className="text-primary-navy hover:underline">
+                  ← Back to Industries
+                </a>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default IndustryDetail

src/pages/ServiceDetail.jsx

@@ -0,0 +1,108 @@
+import { useParams } from 'react-router-dom'
+import { services } from '@/data/services'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card'
+
+const ServiceDetail = () => {
+  const { slug } = useParams()
+  const service = services.find(s => s.id === slug)
+
+  if (!service) {
+    return (
+      <div className="container mx-auto px-4 py-16 md:py-24">
+        <div className="text-center">
+          <h1 className="text-3xl font-bold text-primary-navy mb-4">Service Not Found</h1>
+          <p className="text-xl text-soft-text mb-8">The service you're looking for doesn't exist.</p>
+          <a href="/services" className="text-primary-navy hover:underline">
+            Back to Services
+          </a>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="container mx-auto px-4 py-16 md:py-24">
+      {/* Page Hero */}
+      <section className="mb-16">
+        <h1 className="text-4xl md:text-5xl font-bold text-primary-navy mb-6">{service.name}</h1>
+        <p className="text-xl text-soft-text max-w-3xl">{service.shortDesc}</p>
+      </section>
+
+      {/* Main Content */}
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-12">
+        {/* Left Column - Main Content */}
+        <div className="lg:col-span-2">
+          <section className="mb-12">
+            <h2 className="text-2xl font-bold text-primary-navy mb-4">What This Solves</h2>
+            <p className="text-lg text-soft-text mb-6 leading-relaxed">
+              {service.fullDesc}
+            </p>
+          </section>
+
+          <section className="mb-12">
+            <h2 className="text-2xl font-bold text-primary-navy mb-4">Key Benefits</h2>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              {service.benefits.map((benefit, index) => (
+                <div key={index} className="flex items-start gap-3">
+                  <div className="h-6 w-6 rounded-full bg-primary-navy text-white flex items-center justify-center flex-shrink-0 mt-1">
+                    <svg className="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
+                    </svg>
+                  </div>
+                  <span className="text-lg text-text">{benefit}</span>
+                </div>
+              ))}
+            </div>
+          </section>
+
+          <section className="mb-12">
+            <h2 className="text-2xl font-bold text-primary-navy mb-4">Ideal For</h2>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              {service.idealFor.map((item, index) => (
+                <div key={index} className="flex items-start gap-3">
+                  <div className="h-6 w-6 rounded-full bg-primary-navy text-white flex items-center justify-center flex-shrink-0 mt-1">
+                    <svg className="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
+                    </svg>
+                  </div>
+                  <span className="text-lg text-text">{item}</span>
+                </div>
+              ))}
+            </div>
+          </section>
+        </div>
+
+        {/* Right Column - Sidebar */}
+        <div className="lg:col-span-1">
+          <Card className="sticky top-24">
+            <CardHeader>
+              <CardTitle className="text-primary-navy">Quick Info</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div>
+                <h4 className="font-semibold text-text mb-2">Service</h4>
+                <p className="text-soft-text">{service.name}</p>
+              </div>
+              <div>
+                <h4 className="font-semibold text-text mb-2">Category</h4>
+                <p className="text-soft-text capitalize">{service.id.replace('-', ' ')}</p>
+              </div>
+              <div className="pt-4 border-t border-border">
+                <a href="/contact" className="block w-full bg-primary-navy text-white px-4 py-3 rounded-md text-center font-medium hover:bg-primary-navy-dark transition-colors">
+                  Request This Service
+                </a>
+              </div>
+              <div className="pt-2">
+                <a href="/services" className="text-primary-navy hover:underline">
+                  ← Back to Services
+                </a>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default ServiceDetail

src/pages/Services.jsx

@@ -0,0 +1,72 @@
+import { services } from '@/data/services'
+
+const Services = () => {
+  return (
+    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 lg:py-24">
+      {/* Page Hero */}
+      <section className="mb-16">
+        <h1 className="text-4xl md:text-5xl font-bold text-primary-navy mb-6">Our Services</h1>
+        <p className="text-xl text-soft-text max-w-3xl">
+          Comprehensive communications and infrastructure solutions designed to help your business thrive in today's digital landscape.
+        </p>
+      </section>
+
+      {/* Services Grid */}
+      <section className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        {services.map((service) => (
+          <div key={service.id} className="group cursor-pointer">
+            <div className="rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow bg-card border border-border">
+              <div className="p-6">
+                <div className="flex items-center gap-4 mb-4">
+                  <div className="h-12 w-12 rounded-lg bg-section-alt flex items-center justify-center flex-shrink-0">
+                    <svg className="h-6 w-6 text-primary-navy" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
+                    </svg>
+                  </div>
+                  <h3 className="text-xl font-semibold text-primary-navy group-hover:text-primary-navy-dark transition-colors">
+                    {service.name}
+                  </h3>
+                </div>
+                <p className="text-soft-text mb-4">{service.shortDesc}</p>
+                <div className="space-y-2 mb-4">
+                  {service.benefits.slice(0, 3).map((benefit, index) => (
+                    <div key={index} className="flex items-center gap-2 text-sm text-soft-text">
+                      <div className="h-4 w-4 rounded-full bg-primary-navy text-white flex items-center justify-center flex-shrink-0">
+                        <svg className="h-2 w-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
+                        </svg>
+                      </div>
+                      <span>{benefit}</span>
+                    </div>
+                  ))}
+                </div>
+                <a href={`/services/${service.id}`} className="inline-flex items-center gap-1 text-primary-navy font-medium hover:underline mt-2">
+                  Learn more
+                  <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5l7 7-7 7" />
+                  </svg>
+                </a>
+              </div>
+            </div>
+          </div>
+        ))}
+      </section>
+
+      {/* CTA */}
+      <section className="mt-16 bg-section-alt rounded-xl p-8 md:p-12 text-center">
+        <h2 className="text-3xl md:text-4xl font-bold text-primary-navy mb-6">Looking for Something Specific?</h2>
+        <p className="text-xl text-soft-text mb-8 max-w-2xl mx-auto">
+          Don't see exactly what you're looking for? We can help you find the right solution.
+        </p>
+        <a
+          href="/contact"
+          className="inline-block bg-primary-navy text-white px-8 py-3 rounded-md font-bold text-lg hover:bg-primary-navy-dark transition-colors"
+        >
+          Request Consultation
+        </a>
+      </section>
+    </div>
+  )
+}
+
+export default Services

src/pages/Support.jsx

@@ -0,0 +1,281 @@
+import { useState } from 'react'
+import { useMutation } from '@tanstack/react-query'
+import { toast } from 'sonner'
+import { Button } from '@/components/ui/Button'
+import { Input } from '@/components/ui/Input'
+import { Textarea } from '@/components/ui/Textarea'
+import { Select } from '@/components/ui/Select'
+import { api } from '@/lib/api'
+
+const Support = () => {
+  const [formState, setFormState] = useState({
+    name: '',
+    company: '',
+    email: '',
+    phone: '',
+    issue: '',
+    priority: 'medium',
+  })
+  const [errors, setErrors] = useState({
+    name: '',
+    company: '',
+    email: '',
+    issue: '',
+  })
+
+  const mutation = useMutation({
+    mutationFn: (data) => api.post('/support', data),
+    onSuccess: () => {
+      toast.success('Thanks! We\'ll get back to you soon.')
+      setFormState({
+        name: '',
+        company: '',
+        email: '',
+        phone: '',
+        issue: '',
+        priority: 'medium',
+      })
+      setErrors({
+        name: '',
+        company: '',
+        email: '',
+        issue: '',
+      })
+    },
+    onError: (error) => {
+      toast.error(error.message || 'Failed to submit form. Please try again.')
+    },
+  })
+
+  const validateForm = () => {
+    const newErrors = {
+      name: '',
+      company: '',
+      email: '',
+      issue: '',
+    }
+
+    // Validate required fields
+    if (!formState.name.trim()) newErrors.name = 'Name is required'
+    if (!formState.company.trim()) newErrors.company = 'Company name is required'
+    if (!formState.issue.trim()) newErrors.issue = 'Please describe your issue'
+
+    // Validate email format
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+    if (!formState.email.trim()) {
+      newErrors.email = 'Email is required'
+    } else if (!emailRegex.test(formState.email)) {
+      newErrors.email = 'Please enter a valid email address'
+    }
+
+    // Validate issue minimum length (10 chars matches server-side Zod rule)
+    if (formState.issue.trim().length < 10) {
+      newErrors.issue = 'Issue description must be at least 10 characters'
+    }
+
+    const hasErrors = Object.values(newErrors).some(error => error !== '')
+    setErrors(newErrors)
+
+    if (hasErrors) {
+      toast.error('Please fix the errors in the form')
+      return false
+    }
+
+    return true
+  }
+
+  const handleSubmit = (e) => {
+    e.preventDefault()
+    if (!validateForm()) return
+    mutation.mutate(formState)
+  }
+
+  const handleChange = (e) => {
+    const { name, value } = e.target
+    setFormState(prev => ({ ...prev, [name]: value }))
+    // Clear error for this field as user types
+    if (errors[name]) {
+      setErrors(prev => ({ ...prev, [name]: '' }))
+    }
+  }
+
+  return (
+    <div className="container mx-auto px-4 py-16 md:py-24">
+      {/* Page Hero */}
+      <section className="mb-16">
+        <h1 className="text-4xl md:text-5xl font-bold text-primary-navy mb-6">Support</h1>
+        <p className="text-xl text-soft-text max-w-3xl">
+          Need help with your communications or infrastructure? Submit a support request and we'll get back to you promptly.
+        </p>
+      </section>
+
+      {/* Support Form */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
+        {/* Left - Info */}
+        <div>
+          <div className="mb-8">
+            <h2 className="text-2xl font-bold text-primary-navy mb-4">Support Services</h2>
+            <p className="text-soft-text mb-6">
+              We provide comprehensive support for all our services, including 24/7 monitoring, rapid response, and dedicated support engineers.
+            </p>
+            <div className="space-y-4">
+              <div>
+                <h3 className="font-semibold text-text mb-2">Support Hours</h3>
+                <p className="text-soft-text">24/7 Monitoring with rapid response SLAs</p>
+              </div>
+              <div>
+                <h3 className="font-semibold text-text mb-2">Priority Levels</h3>
+                <p className="text-soft-text">
+                  Low: General inquiries (response within 24 hours)<br/>
+                  Medium: Standard issues (response within 4 hours)<br/>
+                  High: Critical issues (response within 1 hour)
+                </p>
+              </div>
+            </div>
+          </div>
+
+          <div className="bg-section-alt rounded-lg p-6">
+            <h3 className="font-semibold text-primary-navy mb-4">What We Support</h3>
+            <ul className="space-y-3">
+              {[
+                '8x8 Communications Platform',
+                'VoIP Phone Systems',
+                'Contact Center Solutions',
+                'Network Infrastructure',
+                'Cloud Migration Support',
+              ].map((item, index) => (
+                <li key={index} className="flex items-center gap-3 text-text">
+                  <svg className="h-5 w-5 text-primary-navy" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
+                  </svg>
+                  {item}
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+
+        {/* Right - Form */}
+        <div>
+          <form onSubmit={handleSubmit} className={`space-y-6 ${mutation.isPending ? 'opacity-70 pointer-events-none' : ''}`}>
+            <div>
+              <label htmlFor="name" className="block text-sm font-medium text-text mb-2">
+                Name <span className="text-red-600">*</span>
+              </label>
+              <Input
+                type="text"
+                id="name"
+                name="name"
+                value={formState.name}
+                onChange={handleChange}
+                required
+                placeholder="Your full name"
+                className={errors.name ? 'border-red-500 focus-visible:ring-red-500' : ''}
+              />
+              {errors.name && (
+                <p className="text-xs text-red-600 mt-1">{errors.name}</p>
+              )}
+            </div>
+
+            <div>
+              <label htmlFor="company" className="block text-sm font-medium text-text mb-2">
+                Company Name <span className="text-red-600">*</span>
+              </label>
+              <Input
+                type="text"
+                id="company"
+                name="company"
+                value={formState.company}
+                onChange={handleChange}
+                required
+                placeholder="Your company name"
+                className={errors.company ? 'border-red-500 focus-visible:ring-red-500' : ''}
+              />
+              {errors.company && (
+                <p className="text-xs text-red-600 mt-1">{errors.company}</p>
+              )}
+            </div>
+
+            <div>
+              <label htmlFor="email" className="block text-sm font-medium text-text mb-2">
+                Email <span className="text-red-600">*</span>
+              </label>
+              <Input
+                type="email"
+                id="email"
+                name="email"
+                value={formState.email}
+                onChange={handleChange}
+                required
+                placeholder="your.email@example.com"
+                className={errors.email ? 'border-red-500 focus-visible:ring-red-500' : ''}
+              />
+              {errors.email && (
+                <p className="text-xs text-red-600 mt-1">{errors.email}</p>
+              )}
+            </div>
+
+            <div>
+              <label htmlFor="phone" className="block text-sm font-medium text-text mb-2">
+                Phone (Optional)
+              </label>
+              <Input
+                type="tel"
+                id="phone"
+                name="phone"
+                value={formState.phone}
+                onChange={handleChange}
+                placeholder="(555) 123-4567"
+              />
+            </div>
+
+            <div>
+              <label htmlFor="priority" className="block text-sm font-medium text-text mb-2">
+                Priority <span className="text-red-600">*</span>
+              </label>
+              <Select
+                id="priority"
+                name="priority"
+                value={formState.priority}
+                onChange={handleChange}
+              >
+                <option value="low">Low - General inquiries (24 hours)</option>
+                <option value="medium">Medium - Standard issues (4 hours)</option>
+                <option value="high">High - Critical issues (1 hour)</option>
+              </Select>
+            </div>
+
+            <div>
+              <label htmlFor="issue" className="block text-sm font-medium text-text mb-2">
+                Describe Your Issue <span className="text-red-600">*</span>
+              </label>
+              <textarea
+                id="issue"
+                name="issue"
+                value={formState.issue}
+                onChange={handleChange}
+                required
+                placeholder="Please describe your issue in detail..."
+                rows={5}
+                className={`flex min-h-[80px] w-full rounded-md border bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${errors.issue ? 'border-red-500 focus-visible:ring-red-500' : ''}`}
+              />
+              {errors.issue && (
+                <p className="text-xs text-red-600 mt-1">{errors.issue}</p>
+              )}
+            </div>
+
+            <Button
+              type="submit"
+              className="w-full"
+              disabled={mutation.isPending}
+            >
+              {mutation.isPending ? 'Submitting...' : 'Submit Request'}
+            </Button>
+          </form>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Support

src/router.jsx

@@ -0,0 +1,31 @@
+import { createBrowserRouter } from 'react-router-dom'
+import App from './App.jsx'
+import Home from './pages/Home.jsx'
+import About from './pages/About.jsx'
+import Services from './pages/Services.jsx'
+import ServiceDetail from './pages/ServiceDetail.jsx'
+import Industries from './pages/Industries.jsx'
+import IndustryDetail from './pages/IndustryDetail.jsx'
+import EightXEight from './pages/8x8.jsx'
+import Contact from './pages/Contact.jsx'
+import Support from './pages/Support.jsx'
+
+const router = createBrowserRouter([
+  {
+    path: '/',
+    element: <App />,
+    children: [
+      { index: true, element: <Home /> },
+      { path: 'about', element: <About /> },
+      { path: 'services', element: <Services /> },
+      { path: 'services/:slug', element: <ServiceDetail /> },
+      { path: 'industries', element: <Industries /> },
+      { path: 'industries/:slug', element: <IndustryDetail /> },
+      { path: '8x8', element: <EightXEight /> },
+      { path: 'contact', element: <Contact /> },
+      { path: 'support', element: <Support /> },
+    ],
+  },
+])
+
+export default router

tailwind.config.js

@@ -0,0 +1,61 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        background: '#F8FAFC',
+        'section-alt': '#EEF6FB',
+        card: '#FFFFFF',
+        border: '#D8E3EA',
+        text: '#0F172A',
+        muted: '#475569',
+        'soft-text': '#64748B',
+        'navy-light': '#68A3B8',
+        primary: {
+          navy: '#0B2A3C',
+          'navy-dark': '#071A2A',
+          blue: '#0EA5E9',
+          cyan: '#22D3EE',
+        },
+        accent: {
+          gold: '#F59E0B',
+        },
+      },
+      fontFamily: {
+        sans: ['Inter', 'sans-serif'],
+        numeric: ['Georgia', 'serif'],
+      },
+      spacing: {
+        '18': '4.5rem',
+        '22': '5.5rem',
+        '24': '6rem',
+        '26': '6.5rem',
+        '28': '7rem',
+        '32': '8rem',
+        '36': '9rem',
+        '40': '10rem',
+        '48': '12rem',
+      },
+      maxWidth: {
+        'container': '1280px',
+      },
+      boxShadow: {
+        'sm': '0 1px 2px 0 rgb(0 0 0 / 0.05)',
+        DEFAULT: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
+        'md': '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
+        'lg': '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
+      },
+      borderRadius: {
+        'sm': '0.25rem',
+        DEFAULT: '0.5rem',
+        'lg': '0.75rem',
+        'xl': '1rem',
+      },
+    },
+  },
+  plugins: [require('tailwindcss-animate')],
+}

vite.config.js

@@ -0,0 +1,25 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import path from 'path'
+
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+  server: {
+    port: 5173,
+    proxy: {
+      '/api': {
+        target: 'http://localhost:3001',
+        changeOrigin: true,
+      },
+    },
+  },
+  build: {
+    outDir: 'dist',
+    sourcemap: true,
+  },
+})