feat: complete phase 1 foundation
This commit is contained in:
null
parent
c8307e61d6
commit
b7f7765a72
|
|
@ -1,5 +1,28 @@
|
||||||
DEVELOPMENT_LOG.md
|
# Project docs managed in repo unless explicitly excluded elsewhere
|
||||||
PROJECT.md
|
|
||||||
STRUCTURE.md
|
# Dependencies
|
||||||
FUTURE.md
|
node_modules/
|
||||||
HISTORY.md
|
|
||||||
|
# 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/
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,125 @@
|
||||||
|
# Queue North Website — Build Summary
|
||||||
|
|
||||||
|
## Completed Tasks
|
||||||
|
|
||||||
|
### Phase 1: Foundation
|
||||||
|
- ✅ Vite + React + Tailwind setup
|
||||||
|
- ✅ React Router with all required routes
|
||||||
|
- ✅ Express backend with /api/health, /api/leads, /api/support
|
||||||
|
- ✅ SQLite database with leads and support_requests tables
|
||||||
|
- ✅ TypeScript type definitions via @types packages
|
||||||
|
|
||||||
|
### Phase 2: UI Components
|
||||||
|
- ✅ Layout components: Header, Footer, MobileNav
|
||||||
|
- ✅ shadcn/ui-style primitives: Button, Card, Input, Textarea, Select, Badge, Sheet
|
||||||
|
- ✅ TanStack Query provider for server state
|
||||||
|
- ✅ Sonner for toast notifications
|
||||||
|
- ✅ Lucide React for icons
|
||||||
|
|
||||||
|
### Phase 3: Pages
|
||||||
|
- ✅ Home page with hero, services preview, industries, CTAs
|
||||||
|
- ✅ About page
|
||||||
|
- ✅ Services page and individual service detail pages
|
||||||
|
- ✅ Industries page and individual industry detail pages
|
||||||
|
- ✅ 8x8 partner page
|
||||||
|
- ✅ Contact page with form submission to /api/leads
|
||||||
|
- ✅ Support page with form submission to /api/support
|
||||||
|
|
||||||
|
### Data Files
|
||||||
|
- ✅ Services data (7 services with full descriptions)
|
||||||
|
- ✅ Industries data (4 industries with pain points/solutions)
|
||||||
|
|
||||||
|
### Scripts
|
||||||
|
- ✅ npm run dev (frontend + backend concurrently)
|
||||||
|
- ✅ npm run build (production build)
|
||||||
|
- ✅ npm run preview
|
||||||
|
- ✅ npm run server
|
||||||
|
|
||||||
|
## Test Results
|
||||||
|
|
||||||
|
```
|
||||||
|
$ npm run build
|
||||||
|
✓ built in 1.10s
|
||||||
|
dist/index.html 0.99 kB
|
||||||
|
dist/assets/index-CsZTyVVr.css 20.07 kB
|
||||||
|
dist/assets/index-G07G4G_D.js 333.59 kB
|
||||||
|
```
|
||||||
|
|
||||||
|
```
|
||||||
|
$ npm run server
|
||||||
|
Server running on http://localhost:3001
|
||||||
|
Health check: http://localhost:3001/api/health
|
||||||
|
{"status":"ok","timestamp":"2026-05-12T05:48:42.213Z"}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Next Steps (for Scarlett)
|
||||||
|
|
||||||
|
1. Run `npm run dev` to start both frontend and backend servers
|
||||||
|
2. Test the application in browser at http://localhost:5173
|
||||||
|
3. Verify all routes work correctly
|
||||||
|
4. Test contact form submission
|
||||||
|
5. Test support form submission
|
||||||
|
6. Check mobile responsiveness
|
||||||
|
7. Run `npm run build` to verify production build
|
||||||
|
|
||||||
|
## Known Issues / Limitations
|
||||||
|
|
||||||
|
- Sheet component doesn't use TypeScript generics (simplified for build)
|
||||||
|
- Image assets need to be updated from actual Queue North branding
|
||||||
|
- The database creates in `db/` directory which should be .gitignored
|
||||||
|
- Consider adding rate limiting for API endpoints
|
||||||
|
|
||||||
|
## Files Created/Modified
|
||||||
|
|
||||||
|
### New Files:
|
||||||
|
- `server/index.js` - Express backend
|
||||||
|
- `server/db/schema.sql` - SQLite schema (created on first run)
|
||||||
|
- `src/router.jsx` - React Router configuration
|
||||||
|
- `src/lib/api.js` - API helper with TanStack Query
|
||||||
|
- `src/lib/queryClient.js` - QueryClient configuration
|
||||||
|
- `src/data/services.js` - Services data
|
||||||
|
- `src/data/industries.js` - Industries data
|
||||||
|
- All component files in `src/components/`
|
||||||
|
- All page files in `src/pages/`
|
||||||
|
|
||||||
|
### Modified Files:
|
||||||
|
- `package.json` - Added dependencies (sonner, @radix-ui/react-dialog, lucide-react)
|
||||||
|
- `vite.config.js` - Added path alias for @/ imports
|
||||||
|
- `index.html` - Updated to use proper logo path
|
||||||
|
- `src/App.jsx` - Added MobileNav component
|
||||||
|
- `src/App.css` - Updated with proper Tailwind imports
|
||||||
|
- `tailwind.config.js` - Already had Scarlett's color palette
|
||||||
|
- `README.md` - Already had overhaul plan context
|
||||||
|
|
||||||
|
## Database Schema
|
||||||
|
|
||||||
|
```sql
|
||||||
|
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
|
||||||
|
)
|
||||||
|
|
||||||
|
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
|
||||||
|
)
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
Built with 🔒 Security in mind
|
||||||
|
Data integrity maintained
|
||||||
|
API contracts documented
|
||||||
|
|
@ -0,0 +1,38 @@
|
||||||
|
# Queue-North-Website — Development Log
|
||||||
|
|
||||||
|
## v0.1.0 — Phase 1 Foundation — 2026-05-12
|
||||||
|
|
||||||
|
**Scarlett** — Design brief and UI polish
|
||||||
|
- Added the design implementation brief to `OVERHAUL_PLAN.md`.
|
||||||
|
- Established light-first business palette and layout rules.
|
||||||
|
- Completed focused UI/accessibility polish after Neo scaffold.
|
||||||
|
- Added Georgia numeric font token guidance and applied numeric styling to visible trust metric content.
|
||||||
|
- Improved Sheet/Header accessibility and standardized selected page containers/spacing.
|
||||||
|
- Confirmed old `styles.css` was used only as legacy context, not ported into the new design.
|
||||||
|
|
||||||
|
**Neo** — Phase 1 implementation
|
||||||
|
- Built Vite + React + Tailwind foundation.
|
||||||
|
- Added React Router route structure.
|
||||||
|
- Added Express backend and better-sqlite3 database integration.
|
||||||
|
- Added contact/support form API wiring.
|
||||||
|
- Set package version to `0.1.0` for Phase 1.
|
||||||
|
|
||||||
|
**Bishop** — Verification
|
||||||
|
- Verified `package.json` version matches Phase 1 (`0.1.0`).
|
||||||
|
- Verified frontend build with `npm run build`.
|
||||||
|
- Verified backend health endpoint responds OK.
|
||||||
|
- Verified required routes and API paths are configured.
|
||||||
|
- Confirmed `.gitignore` excludes `node_modules/`, `dist/`, and SQLite runtime database files.
|
||||||
|
- Approved Phase 1 for Ripley commit/push to `dev`.
|
||||||
|
|
||||||
|
**Ripley** — Coordination and final gate
|
||||||
|
- Verified repository remote and pushed README setup commit.
|
||||||
|
- Documented phase-based versioning in PROJECT.md, OVERHAUL_PLAN.md, and STRUCTURE.md.
|
||||||
|
- Documented the phase completion rule: after every verified phase, Ripley commits and pushes to `dev`.
|
||||||
|
- Running final build/health checks before committing Phase 1.
|
||||||
|
|
||||||
|
## v0.0.1 — 2026-05-11
|
||||||
|
|
||||||
|
**Ripley** — Project initialized
|
||||||
|
- Created project directory at `/home/kaspa/.openclaw/Projects/Queue-North-Website/`.
|
||||||
|
- Set up initial PROJECT.md, STRUCTURE.md, FUTURE.md, HISTORY.md, DEVELOPMENT_LOG.md.
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
# Queue-North-Website — Planning
|
||||||
|
|
||||||
|
## Next Items
|
||||||
|
*Awaiting project requirements from _null.*
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
*Add items here as they are defined. Priority levels: CRITICAL, HIGH, MEDIUM, LOW*
|
||||||
|
|
@ -0,0 +1,30 @@
|
||||||
|
# Queue-North-Website — Changelog
|
||||||
|
|
||||||
|
## v0.1.0 — Phase 1 Foundation — 2026-05-12
|
||||||
|
|
||||||
|
### Added
|
||||||
|
- Rebuilt project foundation on Vite + React SPA with React Router.
|
||||||
|
- Added Tailwind CSS with Queue North light-first business palette.
|
||||||
|
- Added shadcn/ui-style local primitives for buttons, cards, inputs, textarea, select, badge, sheet, and dialog usage.
|
||||||
|
- Added Sonner toast support and TanStack Query provider/API helper.
|
||||||
|
- Added Express backend with `/api/health`, `/api/leads`, and `/api/support`.
|
||||||
|
- Added better-sqlite3 storage for `leads` and `support_requests`.
|
||||||
|
- Added all planned frontend routes for home, about, services, service details, industries, industry details, 8x8, contact, and support.
|
||||||
|
- Added Phase 1 documentation, build summary, script reference, and phase-based versioning rules.
|
||||||
|
|
||||||
|
### Changed
|
||||||
|
- Replaced the static HTML/CSS/JS entry with the Vite React entry.
|
||||||
|
- Updated README to point to `OVERHAUL_PLAN.md` as the design source of truth.
|
||||||
|
- Standardized versioning so Phase 1 uses `0.1.x`, Phase 2 uses `0.2.x`, and later phases follow the same pattern.
|
||||||
|
- Added Bishop verification rules and the requirement that Ripley pushes to `dev` after each verified phase.
|
||||||
|
|
||||||
|
### Verified
|
||||||
|
- `npm run build` passes.
|
||||||
|
- Backend health endpoint responds successfully at `/api/health`.
|
||||||
|
- Required routes are configured.
|
||||||
|
- Contact and support API paths exist and write through SQLite.
|
||||||
|
|
||||||
|
## v0.0.1 — Project Initialization — 2026-05-11
|
||||||
|
|
||||||
|
### Added
|
||||||
|
- Project initialized with PROJECT.md, STRUCTURE.md, FUTURE.md, HISTORY.md, DEVELOPMENT_LOG.md.
|
||||||
|
|
@ -603,6 +603,16 @@ theme: {
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
### 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
|
### Typography Scale
|
||||||
|
|
||||||
```css
|
```css
|
||||||
|
|
@ -794,6 +804,24 @@ Required primitives from `@/components/ui/`:
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
## 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`
|
||||||
|
- Iterations/fixes 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 work inside that phase. Do not use unrelated semantic version bumps during the overhaul.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
## Migration Phases
|
## Migration Phases
|
||||||
|
|
||||||
## Phase 1: Scaffold the Stack
|
## Phase 1: Scaffold the Stack
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,69 @@
|
||||||
|
# Queue North Website
|
||||||
|
|
||||||
|
## Overview
|
||||||
|
Project: Queue-North-Website
|
||||||
|
Created: 2026-05-11
|
||||||
|
Status: Active (Phase 1 Complete - 0.1.0)
|
||||||
|
Rebuild Phase: 1 (Vite + React + Express + SQLite)
|
||||||
|
|
||||||
|
## Description
|
||||||
|
Website for Queue North Technologies — an 8x8 Certified Partner delivering UCaaS, Contact Center, deployment, and managed lifecycle support for SMB and enterprise organizations.
|
||||||
|
|
||||||
|
## Tech Stack (Phase 1)
|
||||||
|
- **Vite** — build tool and dev server
|
||||||
|
- **React 19** — SPA with client-side routing via React Router 7
|
||||||
|
- **Tailwind CSS** — utility-first styling with custom theme
|
||||||
|
- **shadcn/ui-style** — component primitives built in
|
||||||
|
- **Sonner** — toast notifications
|
||||||
|
- **TanStack Query** — server state management
|
||||||
|
- **Express** — backend API server
|
||||||
|
- **better-sqlite3** — local SQLite database
|
||||||
|
|
||||||
|
## Directory Structure (Phase 1)
|
||||||
|
- `index.html` — Entry point (Vite + React entry)
|
||||||
|
- `src/main.jsx` — React entry point with QueryClient and Toaster
|
||||||
|
- `src/App.jsx` — Layout wrapper with Header, MobileNav, Footer
|
||||||
|
- `src/router.jsx` — React Router configuration
|
||||||
|
- `src/lib/api.js` — API helper with TanStack Query
|
||||||
|
- `src/data/services.js` — Services data
|
||||||
|
- `src/data/industries.js` — Industries data
|
||||||
|
- `src/components/ui/` — UI primitives (Button, Card, Input, etc.)
|
||||||
|
- `src/components/layout/` — Header, Footer, MobileNav
|
||||||
|
- `src/pages/` — Route pages (Home, About, Services, etc.)
|
||||||
|
- `server/index.js` — Express backend with SQLite
|
||||||
|
- `db/queuenorth.db` — SQLite database (created on first run)
|
||||||
|
- `assets/` — Images, icons, logos
|
||||||
|
|
||||||
|
## Git
|
||||||
|
- **Branch:** `dev` (working), `main` (stable)
|
||||||
|
- **Remote:** `ssh://forgejo/null/Queue-North-Website.git`
|
||||||
|
|
||||||
|
## Versioning
|
||||||
|
|
||||||
|
Version numbers must correlate to the active overhaul phase.
|
||||||
|
|
||||||
|
- Phase 1 releases use `0.1.x`
|
||||||
|
- Phase 1 baseline: `0.1.0`
|
||||||
|
- Phase 1 patches/iterations: `0.1.1`, `0.1.2`, etc.
|
||||||
|
- Phase 2 releases use `0.2.x`
|
||||||
|
- Phase 2 baseline: `0.2.0`
|
||||||
|
- Phase 2 patches/iterations: `0.2.1`, `0.2.2`, etc.
|
||||||
|
- Phase 3 releases use `0.3.x`
|
||||||
|
- Phase 4 releases use `0.4.x`
|
||||||
|
- Phase 5 releases use `0.5.x`
|
||||||
|
|
||||||
|
Do not use unrelated semantic version bumps during the overhaul. The minor number tracks the phase; the patch number tracks changes within that phase.
|
||||||
|
|
||||||
|
## Phase Completion Git Rule
|
||||||
|
|
||||||
|
Push to `dev` after every completed and verified phase.
|
||||||
|
|
||||||
|
- Agents do not touch git.
|
||||||
|
- Bishop verifies and updates docs.
|
||||||
|
- Ripley performs final checks, commits, and pushes to `dev`.
|
||||||
|
|
||||||
|
## 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
|
||||||
|
|
@ -107,10 +107,4 @@ Contact and support forms should submit through Express, save to SQLite, and sho
|
||||||
|
|
||||||
## Design Source of Truth
|
## Design Source of Truth
|
||||||
|
|
||||||
See:
|
See [OVERHAUL_PLAN.md](./OVERHAUL_PLAN.md) for the full rebuild plan and Scarlett's design implementation brief.
|
||||||
|
|
||||||
- `OVERHAUL_PLAN.md`
|
|
||||||
- `STRUCTURE.md`
|
|
||||||
- `PROJECT.md`
|
|
||||||
|
|
||||||
`OVERHAUL_PLAN.md` contains the full rebuild plan and Scarlett's design implementation brief.
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,57 @@
|
||||||
|
# Queue North Website — Script Reference
|
||||||
|
|
||||||
|
Run these from the project root.
|
||||||
|
|
||||||
|
## Install
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
## Development
|
||||||
|
|
||||||
|
Start frontend and backend together:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
Frontend runs through Vite. Backend runs through Express.
|
||||||
|
|
||||||
|
## Build
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
|
|
||||||
|
Creates the production frontend build in `dist/`.
|
||||||
|
|
||||||
|
## Preview Frontend Build
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run preview
|
||||||
|
```
|
||||||
|
|
||||||
|
## Start Backend Only
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm start
|
||||||
|
```
|
||||||
|
|
||||||
|
Equivalent compatibility script:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run server
|
||||||
|
```
|
||||||
|
|
||||||
|
## Health Check
|
||||||
|
|
||||||
|
```bash
|
||||||
|
curl http://localhost:3001/api/health
|
||||||
|
```
|
||||||
|
|
||||||
|
Expected response shape:
|
||||||
|
|
||||||
|
```json
|
||||||
|
{"status":"ok","timestamp":"..."}
|
||||||
|
```
|
||||||
|
|
@ -0,0 +1,56 @@
|
||||||
|
# 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
|
||||||
|
|
||||||
|
## Versioning Rules for Bishop
|
||||||
|
|
||||||
|
Bishop owns verification documentation and must ensure version numbers correlate to the active overhaul phase.
|
||||||
|
|
||||||
|
- Phase 1 uses `0.1.x`
|
||||||
|
- Phase 1 baseline: `0.1.0`
|
||||||
|
- Phase 1 follow-up fixes/iterations: `0.1.1`, `0.1.2`, etc.
|
||||||
|
- Phase 2 uses `0.2.x`
|
||||||
|
- Phase 2 baseline: `0.2.0`
|
||||||
|
- Phase 2 follow-up fixes/iterations: `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 work inside that phase. Do not use unrelated semantic version bumps during this overhaul.
|
||||||
|
|
||||||
|
Before Bishop marks work verified, Bishop must check:
|
||||||
|
- `package.json` version follows the active phase
|
||||||
|
- `PROJECT.md` version/status matches the active phase
|
||||||
|
- `HISTORY.md` release notes use the same version
|
||||||
|
- Any verification summary references the correct phase/version
|
||||||
|
|
||||||
|
## Phase Completion Git Rule
|
||||||
|
|
||||||
|
Ripley must push to `dev` after every completed and verified phase.
|
||||||
|
|
||||||
|
- Agents do not touch git.
|
||||||
|
- Bishop verifies and updates docs.
|
||||||
|
- Ripley performs final local checks, commits, and pushes to `dev`.
|
||||||
|
- This applies to Phase 1 (`0.1.x`), Phase 2 (`0.2.x`), and all later phases.
|
||||||
|
|
||||||
|
## Cross-Cutting Concerns
|
||||||
|
- All agents must read this file before starting any task
|
||||||
|
- All agents report back to Ripley — no agent-to-agent handoffs
|
||||||
761
index.html
761
index.html
|
|
@ -2,767 +2,16 @@
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<title>Queue North Technologies</title>
|
<link rel="icon" type="image/svg+xml" href="/logo.svg" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<meta
|
<title>Queue North Technologies | Modern Communications Infrastructure</title>
|
||||||
name="description"
|
<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." />
|
||||||
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.googleapis.com">
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
<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">
|
<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>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<header class="site-header">
|
<div id="root"></div>
|
||||||
<div class="logo">
|
<script type="module" src="/src/main.jsx"></script>
|
||||||
<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 & Support</a>
|
|
||||||
<a href="#consulting-training" data-route="consulting-training" role="menuitem">Consulting & 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 & 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 & 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 & Training.png" alt="Consulting and Training" loading="lazy" decoding="async" />
|
|
||||||
<div class="card service-overview-card">
|
|
||||||
<h3>Consulting & 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 & 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 & 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 & 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 & 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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,38 @@
|
||||||
|
{
|
||||||
|
"name": "queuenorth-website",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.1.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"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"react": "^19.0.0",
|
||||||
|
"react-dom": "^19.0.0",
|
||||||
|
"react-router-dom": "^7.1.3",
|
||||||
|
"express": "^4.21.2",
|
||||||
|
"better-sqlite3": "^11.8.0",
|
||||||
|
"zod": "^3.24.2",
|
||||||
|
"zustand": "^5.0.3",
|
||||||
|
"@tanstack/react-query": "^5.62.0",
|
||||||
|
"sonner": "^1.7.0",
|
||||||
|
"@radix-ui/react-dialog": "^1.1.0",
|
||||||
|
"lucide-react": "^0.468.0"
|
||||||
|
},
|
||||||
|
"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",
|
||||||
|
"vite": "^6.0.7",
|
||||||
|
"tailwindcss": "^3.4.17",
|
||||||
|
"autoprefixer": "^10.4.20",
|
||||||
|
"postcss": "^8.4.49",
|
||||||
|
"concurrently": "^9.1.2"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
export default {
|
||||||
|
plugins: {
|
||||||
|
tailwindcss: {},
|
||||||
|
autoprefixer: {},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,161 @@
|
||||||
|
import express from 'express'
|
||||||
|
import path from 'path'
|
||||||
|
import { fileURLToPath } from 'url'
|
||||||
|
import { existsSync, mkdirSync } from 'fs'
|
||||||
|
import sqlite3 from 'better-sqlite3'
|
||||||
|
import z from 'zod'
|
||||||
|
|
||||||
|
// --- Setup ---
|
||||||
|
const __filename = fileURLToPath(import.meta.url)
|
||||||
|
const __dirname = path.dirname(__filename)
|
||||||
|
const app = express()
|
||||||
|
const dbPath = path.join(__dirname, '../db/queuenorth.db')
|
||||||
|
|
||||||
|
// Create db directory if it doesn't exist
|
||||||
|
if (!existsSync(path.dirname(dbPath))) {
|
||||||
|
mkdirSync(path.dirname(dbPath), { recursive: true })
|
||||||
|
}
|
||||||
|
|
||||||
|
// Middleware
|
||||||
|
app.use(express.json())
|
||||||
|
app.use(express.urlencoded({ extended: true }))
|
||||||
|
app.use(express.static(path.join(__dirname, '../dist')))
|
||||||
|
|
||||||
|
// --- 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()
|
||||||
|
|
||||||
|
// --- Validation Schemas ---
|
||||||
|
const leadSchema = z.object({
|
||||||
|
company: z.string().min(1, 'Company name is required'),
|
||||||
|
name: z.string().min(1, 'Name is required'),
|
||||||
|
email: z.string().email('Valid email is required'),
|
||||||
|
phone: z.string().optional(),
|
||||||
|
zip: z.string().optional(),
|
||||||
|
message: z.string().optional(),
|
||||||
|
service_interest: z.string().optional(),
|
||||||
|
})
|
||||||
|
|
||||||
|
const supportSchema = z.object({
|
||||||
|
name: z.string().min(1, 'Name is required'),
|
||||||
|
company: z.string().min(1, 'Company name is required'),
|
||||||
|
email: z.string().email('Valid email is required'),
|
||||||
|
phone: z.string().optional(),
|
||||||
|
issue: z.string().min(10, 'Please provide more details about your issue'),
|
||||||
|
priority: z.enum(['low', 'medium', 'high']).optional(),
|
||||||
|
})
|
||||||
|
|
||||||
|
// --- API Routes ---
|
||||||
|
|
||||||
|
// Health check
|
||||||
|
app.get('/api/health', (req, res) => {
|
||||||
|
res.json({ status: 'ok', timestamp: new Date().toISOString() })
|
||||||
|
})
|
||||||
|
|
||||||
|
// Submit lead
|
||||||
|
app.post('/api/leads', (req, res) => {
|
||||||
|
try {
|
||||||
|
const parsed = leadSchema.safeParse(req.body)
|
||||||
|
|
||||||
|
if (!parsed.success) {
|
||||||
|
return res.status(400).json({
|
||||||
|
error: 'Validation failed',
|
||||||
|
details: parsed.error.format(),
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const stmt = db.prepare(`
|
||||||
|
INSERT INTO leads (company, name, email, phone, zip, message, service_interest)
|
||||||
|
VALUES (?, ?, ?, ?, ?, ?, ?)
|
||||||
|
`)
|
||||||
|
|
||||||
|
stmt.run(
|
||||||
|
parsed.data.company,
|
||||||
|
parsed.data.name,
|
||||||
|
parsed.data.email,
|
||||||
|
parsed.data.phone || null,
|
||||||
|
parsed.data.zip || null,
|
||||||
|
parsed.data.message || null,
|
||||||
|
parsed.data.service_interest || null
|
||||||
|
)
|
||||||
|
|
||||||
|
res.json({ success: true, message: 'Thanks! We\'ll be in touch shortly.' })
|
||||||
|
} catch (err) {
|
||||||
|
console.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) {
|
||||||
|
return res.status(400).json({
|
||||||
|
error: 'Validation failed',
|
||||||
|
details: parsed.error.format(),
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const stmt = db.prepare(`
|
||||||
|
INSERT INTO support_requests (name, company, email, phone, issue, priority)
|
||||||
|
VALUES (?, ?, ?, ?, ?, ?)
|
||||||
|
`)
|
||||||
|
|
||||||
|
stmt.run(
|
||||||
|
parsed.data.name,
|
||||||
|
parsed.data.company,
|
||||||
|
parsed.data.email,
|
||||||
|
parsed.data.phone || null,
|
||||||
|
parsed.data.issue,
|
||||||
|
parsed.data.priority || 'medium'
|
||||||
|
)
|
||||||
|
|
||||||
|
res.json({ success: true, message: 'Thanks! We\'ll get back to you soon.' })
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Error submitting support request:', err)
|
||||||
|
res.status(500).json({ error: 'Failed to submit support request' })
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// --- Start Server ---
|
||||||
|
const PORT = process.env.SERVER_PORT || 3001
|
||||||
|
|
||||||
|
app.listen(PORT, () => {
|
||||||
|
console.log(`Server running on http://localhost:${PORT}`)
|
||||||
|
console.log(`Health check: http://localhost:${PORT}/api/health`)
|
||||||
|
})
|
||||||
|
|
@ -0,0 +1,69 @@
|
||||||
|
/* App styles */
|
||||||
|
@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 {
|
||||||
|
max-width: 1200px;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,20 @@
|
||||||
|
import { Outlet } from 'react-router-dom'
|
||||||
|
import Header from './components/layout/Header.jsx'
|
||||||
|
import Footer from './components/layout/Footer.jsx'
|
||||||
|
import MobileNav from './components/layout/MobileNav.jsx'
|
||||||
|
import './App.css'
|
||||||
|
|
||||||
|
function App() {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex flex-col font-sans bg-background text-text">
|
||||||
|
<Header />
|
||||||
|
<MobileNav />
|
||||||
|
<main className="flex-1">
|
||||||
|
<Outlet />
|
||||||
|
</main>
|
||||||
|
<Footer />
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default App
|
||||||
|
|
@ -0,0 +1,116 @@
|
||||||
|
const Footer = () => {
|
||||||
|
const currentYear = new Date().getFullYear()
|
||||||
|
|
||||||
|
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">
|
||||||
|
{/* Company Info */}
|
||||||
|
<div>
|
||||||
|
<div className="flex items-center gap-2 mb-4">
|
||||||
|
<img
|
||||||
|
src="/logo.svg"
|
||||||
|
alt="Queue North"
|
||||||
|
className="h-6 w-auto"
|
||||||
|
/>
|
||||||
|
<span className="font-bold text-lg">Queue North</span>
|
||||||
|
</div>
|
||||||
|
<p className="text-soft-text text-sm mb-4">
|
||||||
|
Modern communications infrastructure without the vendor noise.
|
||||||
|
</p>
|
||||||
|
<p className="text-soft-text text-sm">
|
||||||
|
© {currentYear} Queue North Technologies. All rights reserved.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Quick Links */}
|
||||||
|
<div>
|
||||||
|
<h3 className="font-semibold mb-4 text-lg">Quick Links</h3>
|
||||||
|
<ul className="space-y-2">
|
||||||
|
{quickLinks.map((link) => (
|
||||||
|
<li key={link.name}>
|
||||||
|
<a
|
||||||
|
href={link.href}
|
||||||
|
className="text-soft-text hover:text-white transition-colors text-sm"
|
||||||
|
>
|
||||||
|
{link.name}
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Services */}
|
||||||
|
<div>
|
||||||
|
<h3 className="font-semibold mb-4 text-lg">Services</h3>
|
||||||
|
<ul className="space-y-2">
|
||||||
|
{services.map((service) => (
|
||||||
|
<li key={service.name}>
|
||||||
|
<a
|
||||||
|
href={service.href}
|
||||||
|
className="text-soft-text hover:text-white transition-colors text-sm"
|
||||||
|
>
|
||||||
|
{service.name}
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Industries */}
|
||||||
|
<div>
|
||||||
|
<h3 className="font-semibold mb-4 text-lg">Industries</h3>
|
||||||
|
<ul className="space-y-2">
|
||||||
|
{industries.map((industry) => (
|
||||||
|
<li key={industry.name}>
|
||||||
|
<a
|
||||||
|
href={industry.href}
|
||||||
|
className="text-soft-text hover:text-white transition-colors text-sm"
|
||||||
|
>
|
||||||
|
{industry.name}
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Bottom */}
|
||||||
|
<div className="border-t border-white/10 mt-8 pt-8 text-center">
|
||||||
|
<p className="text-soft-text text-sm">
|
||||||
|
8x8 Certified Partner | Veteran Owned | 25+ Years Experience
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Footer
|
||||||
|
|
@ -0,0 +1,89 @@
|
||||||
|
import { useState, useEffect } from 'react'
|
||||||
|
import { SheetTrigger } from '@/components/ui/Sheet'
|
||||||
|
|
||||||
|
const Header = () => {
|
||||||
|
const [isScrolled, setIsScrolled] = 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' },
|
||||||
|
]
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<header className={`sticky top-0 z-40 w-full border-b transition-all duration-300 ${isScrolled ? 'bg-background/90 backdrop-blur shadow-sm -translate-y-px' : 'bg-transparent'}`}>
|
||||||
|
<div className="container mx-auto px-4">
|
||||||
|
<div className="flex h-16 items-center justify-between">
|
||||||
|
{/* Logo */}
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<img
|
||||||
|
src="/logo.svg"
|
||||||
|
alt="Queue North Technologies"
|
||||||
|
className="h-8 w-auto"
|
||||||
|
/>
|
||||||
|
<span className="font-bold text-xl text-primary-navy hidden sm:block">Queue North</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Desktop Nav */}
|
||||||
|
<nav className="hidden md:flex items-center gap-6">
|
||||||
|
{navLinks.map((link) => (
|
||||||
|
<a
|
||||||
|
key={link.name}
|
||||||
|
href={link.href}
|
||||||
|
className="text-sm font-medium text-text hover:text-primary-navy transition-colors"
|
||||||
|
>
|
||||||
|
{link.name}
|
||||||
|
</a>
|
||||||
|
))}
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
{/* CTA Button */}
|
||||||
|
<div className="hidden md:flex">
|
||||||
|
<a
|
||||||
|
href="/contact"
|
||||||
|
className="bg-primary-navy text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-primary-navy-dark transition-colors"
|
||||||
|
>
|
||||||
|
Request Consultation
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Mobile Menu Toggle */}
|
||||||
|
<SheetTrigger asChild>
|
||||||
|
<button className="md:hidden p-2 text-text hover:text-primary-navy focus:outline-none focus:ring-2 focus:ring-primary-navy 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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Header
|
||||||
|
|
@ -0,0 +1,82 @@
|
||||||
|
import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/Sheet'
|
||||||
|
import { useState } from 'react'
|
||||||
|
|
||||||
|
const MobileNav = () => {
|
||||||
|
const [isOpen, setIsOpen] = useState(false)
|
||||||
|
|
||||||
|
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 closeMobileMenu = () => {
|
||||||
|
setIsOpen(false)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="md:hidden">
|
||||||
|
<Sheet open={isOpen} onOpenChange={setIsOpen}>
|
||||||
|
<SheetTrigger asChild>
|
||||||
|
<button className="p-2 text-text hover:text-primary-navy focus:outline-none">
|
||||||
|
<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-[280px] sm:w-[320px]">
|
||||||
|
<div className="flex flex-col h-full">
|
||||||
|
<div className="flex items-center gap-2 mb-6">
|
||||||
|
<img
|
||||||
|
src="/logo.svg"
|
||||||
|
alt="Queue North"
|
||||||
|
className="h-8 w-auto"
|
||||||
|
/>
|
||||||
|
<span className="font-bold text-xl text-primary-navy">Queue North</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<nav className="flex flex-col space-y-4">
|
||||||
|
{navLinks.map((link) => (
|
||||||
|
<a
|
||||||
|
key={link.name}
|
||||||
|
href={link.href}
|
||||||
|
onClick={closeMobileMenu}
|
||||||
|
className="text-base font-medium text-text hover:text-primary-navy py-2 border-b border-gray-100 last:border-0"
|
||||||
|
>
|
||||||
|
{link.name}
|
||||||
|
</a>
|
||||||
|
))}
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div className="mt-auto pt-6">
|
||||||
|
<a
|
||||||
|
href="/contact"
|
||||||
|
onClick={closeMobileMenu}
|
||||||
|
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>
|
||||||
|
</SheetContent>
|
||||||
|
</Sheet>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default MobileNav
|
||||||
|
|
@ -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'
|
||||||
|
|
@ -0,0 +1,30 @@
|
||||||
|
import * as React from 'react'
|
||||||
|
|
||||||
|
const Badge = React.forwardRef<
|
||||||
|
HTMLDivElement,
|
||||||
|
React.HTMLAttributes<HTMLDivElement> & {
|
||||||
|
variant?: 'default' | 'secondary' | 'outline' | 'success' | 'warning' | 'error'
|
||||||
|
}
|
||||||
|
>(({ 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 }
|
||||||
|
|
@ -0,0 +1,37 @@
|
||||||
|
import * as React from 'react'
|
||||||
|
|
||||||
|
const Button = React.forwardRef<
|
||||||
|
HTMLButtonElement,
|
||||||
|
React.ButtonHTMLAttributes<HTMLButtonElement> & {
|
||||||
|
variant?: 'default' | 'secondary' | 'outline' | 'ghost' | 'link'
|
||||||
|
size?: 'default' | 'sm' | 'lg' | 'icon'
|
||||||
|
}
|
||||||
|
>(({ 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 }
|
||||||
|
|
@ -0,0 +1,65 @@
|
||||||
|
import * as React from 'react'
|
||||||
|
|
||||||
|
const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
|
||||||
|
({ 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<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
|
||||||
|
({ 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<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
|
||||||
|
({ className = '', ...props }, ref) => (
|
||||||
|
<h3
|
||||||
|
ref={ref}
|
||||||
|
className={`text-2xl font-semibold leading-none tracking-tight ${className}`}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
)
|
||||||
|
CardTitle.displayName = 'CardTitle'
|
||||||
|
|
||||||
|
const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
|
||||||
|
({ className = '', ...props }, ref) => (
|
||||||
|
<p
|
||||||
|
ref={ref}
|
||||||
|
className={`text-sm text-muted-foreground ${className}`}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
)
|
||||||
|
CardDescription.displayName = 'CardDescription'
|
||||||
|
|
||||||
|
const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
|
||||||
|
({ className = '', ...props }, ref) => (
|
||||||
|
<div ref={ref} className={`p-6 pt-0 ${className}`} {...props} />
|
||||||
|
)
|
||||||
|
)
|
||||||
|
CardContent.displayName = 'CardContent'
|
||||||
|
|
||||||
|
const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
|
||||||
|
({ 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 }
|
||||||
|
|
@ -0,0 +1,91 @@
|
||||||
|
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<
|
||||||
|
React.ElementRef<typeof DialogPrimitive.Content>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
|
||||||
|
>(({ 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<
|
||||||
|
React.ElementRef<typeof DialogPrimitive.Title>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
|
||||||
|
>(({ 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<
|
||||||
|
React.ElementRef<typeof DialogPrimitive.Description>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
|
||||||
|
>(({ 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,
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,17 @@
|
||||||
|
import * as React from 'react'
|
||||||
|
|
||||||
|
const Input = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>(
|
||||||
|
({ 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 }
|
||||||
|
|
@ -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 }
|
||||||
|
|
@ -0,0 +1,83 @@
|
||||||
|
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 SheetContent = React.forwardRef(({ className, children, side = 'right', ...props }, ref) => (
|
||||||
|
<SheetPrimitive.Portal>
|
||||||
|
<SheetOverlay />
|
||||||
|
<SheetPrimitive.Content
|
||||||
|
ref={ref}
|
||||||
|
className={`fixed z-50 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 ${side === 'top' ? 'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top' : side === 'bottom' ? 'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom' : side === 'left' ? 'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left' : 'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right'} sm:rounded-lg ${className}`}
|
||||||
|
role="dialog"
|
||||||
|
aria-modal="true"
|
||||||
|
{...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,
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
import * as React from 'react'
|
||||||
|
|
||||||
|
const Textarea = React.forwardRef<HTMLTextAreaElement, React.TextareaHTMLAttributes<HTMLTextAreaElement>>(
|
||||||
|
({ 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 }
|
||||||
|
|
@ -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,
|
||||||
|
}
|
||||||
|
|
@ -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'
|
||||||
|
|
@ -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',
|
||||||
|
],
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
@ -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',
|
||||||
|
],
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
@ -0,0 +1,68 @@
|
||||||
|
@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 {
|
||||||
|
max-width: 1200px;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
@ -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 }
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
import { QueryClient } from '@tanstack/react-query'
|
||||||
|
|
||||||
|
export const queryClient = new QueryClient({
|
||||||
|
defaultOptions: {
|
||||||
|
queries: {
|
||||||
|
staleTime: 1000 * 60 * 5, // 5 minutes
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
@ -0,0 +1,25 @@
|
||||||
|
import { StrictMode } from 'react'
|
||||||
|
import { createRoot } from 'react-dom/client'
|
||||||
|
import { BrowserRouter } from 'react-router-dom'
|
||||||
|
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
|
||||||
|
import { Toaster } from 'sonner'
|
||||||
|
import App from './App.jsx'
|
||||||
|
|
||||||
|
const queryClient = new QueryClient({
|
||||||
|
defaultOptions: {
|
||||||
|
queries: {
|
||||||
|
staleTime: 1000 * 60 * 5, // 5 minutes
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
createRoot(document.getElementById('root')).render(
|
||||||
|
<StrictMode>
|
||||||
|
<QueryClientProvider client={queryClient}>
|
||||||
|
<BrowserRouter>
|
||||||
|
<App />
|
||||||
|
<Toaster position="top-right" />
|
||||||
|
</BrowserRouter>
|
||||||
|
</QueryClientProvider>
|
||||||
|
</StrictMode>,
|
||||||
|
)
|
||||||
|
|
@ -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-6">
|
||||||
|
{[
|
||||||
|
'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-3">
|
||||||
|
<div className="h-6 w-6 rounded-full bg-primary-navy text-white flex items-center justify-center flex-shrink-0">
|
||||||
|
<svg className="h-4 w-4" 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">{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-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">
|
||||||
|
<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
|
||||||
|
|
@ -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-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">
|
||||||
|
<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">Our Expertise</h2>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
{[
|
||||||
|
'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-3">
|
||||||
|
<div className="h-6 w-6 rounded-full bg-primary-navy text-white flex items-center justify-center flex-shrink-0">
|
||||||
|
<svg className="h-4 w-4" 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">{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
|
||||||
|
|
@ -0,0 +1,228 @@
|
||||||
|
import { useState } from 'react'
|
||||||
|
import { useMutation } from '@tanstack/react-query'
|
||||||
|
import { useToast } 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 { toast } = useToast()
|
||||||
|
const [formState, setFormState] = useState({
|
||||||
|
company: '',
|
||||||
|
name: '',
|
||||||
|
email: '',
|
||||||
|
phone: '',
|
||||||
|
zip: '',
|
||||||
|
message: '',
|
||||||
|
service_interest: '',
|
||||||
|
})
|
||||||
|
|
||||||
|
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: '',
|
||||||
|
})
|
||||||
|
},
|
||||||
|
onError: (error) => {
|
||||||
|
toast.error(error.message || 'Failed to submit form. Please try again.')
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
const handleSubmit = (e) => {
|
||||||
|
e.preventDefault()
|
||||||
|
mutation.mutate(formState)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleChange = (e) => {
|
||||||
|
const { name, value } = e.target
|
||||||
|
setFormState(prev => ({ ...prev, [name]: value }))
|
||||||
|
}
|
||||||
|
|
||||||
|
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">
|
||||||
|
<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"
|
||||||
|
/>
|
||||||
|
</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"
|
||||||
|
/>
|
||||||
|
</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"
|
||||||
|
/>
|
||||||
|
</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}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
type="submit"
|
||||||
|
className="w-full"
|
||||||
|
disabled={mutation.isPending}
|
||||||
|
>
|
||||||
|
{mutation.isPending ? 'Submitting...' : 'Request Consultation'}
|
||||||
|
</Button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Contact
|
||||||
|
|
@ -0,0 +1,196 @@
|
||||||
|
import { Button } from '@/components/ui/Button'
|
||||||
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/Card'
|
||||||
|
import { services } from '@/data/services'
|
||||||
|
|
||||||
|
const Home = () => {
|
||||||
|
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>
|
||||||
|
<a href={`/services/${service.id}`} className="text-primary-navy font-medium hover:underline">
|
||||||
|
Learn more →
|
||||||
|
</a>
|
||||||
|
</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">
|
||||||
|
{[
|
||||||
|
{ name: 'Healthcare', href: '/industries/healthcare' },
|
||||||
|
{ name: 'Retail', href: '/industries/retail' },
|
||||||
|
{ name: 'Manufacturing', href: '/industries/manufacturing' },
|
||||||
|
{ name: 'Education & Finance', href: '/industries/education-finance' },
|
||||||
|
].map((industry) => (
|
||||||
|
<Card key={industry.name} 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>
|
||||||
|
<a href={industry.href} className="text-primary-navy font-medium hover:underline">
|
||||||
|
Learn more →
|
||||||
|
</a>
|
||||||
|
</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>
|
||||||
|
<a
|
||||||
|
href="/contact"
|
||||||
|
className="inline-block bg-white text-primary-navy px-8 py-3 rounded-md font-bold text-lg hover:bg-gray-100 transition-colors"
|
||||||
|
>
|
||||||
|
Request Consultation
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Home
|
||||||
|
|
@ -0,0 +1,60 @@
|
||||||
|
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-4 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>
|
||||||
|
<a href={`/industries/${industry.id}`} className="text-primary-navy font-medium hover:underline inline-flex items-center gap-1">
|
||||||
|
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
|
||||||
|
|
@ -0,0 +1,102 @@
|
||||||
|
import { industries } from '@/data/industries'
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card'
|
||||||
|
|
||||||
|
const IndustryDetail = ({ name }) => {
|
||||||
|
const industry = industries.find(i => i.id === name)
|
||||||
|
|
||||||
|
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="space-y-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="space-y-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
|
||||||
|
|
@ -0,0 +1,106 @@
|
||||||
|
import { services } from '@/data/services'
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card'
|
||||||
|
|
||||||
|
const ServiceDetail = ({ name }) => {
|
||||||
|
const service = services.find(s => s.id === name)
|
||||||
|
|
||||||
|
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">How Queue North Helps</h2>
|
||||||
|
<div className="space-y-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="space-y-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
|
||||||
|
|
@ -0,0 +1,68 @@
|
||||||
|
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>
|
||||||
|
<p className="text-sm text-soft-text mb-4">{service.fullDesc}</p>
|
||||||
|
<div className="flex flex-wrap gap-2 mb-4">
|
||||||
|
{service.benefits.slice(0, 2).map((benefit, index) => (
|
||||||
|
<span key={index} className="px-2 py-1 bg-section-alt rounded text-xs text-soft-text">
|
||||||
|
{benefit}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<a href={`/services/${service.id}`} className="text-primary-navy font-medium hover:underline inline-flex items-center gap-1">
|
||||||
|
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
|
||||||
|
|
@ -0,0 +1,212 @@
|
||||||
|
import { useState } from 'react'
|
||||||
|
import { useMutation } from '@tanstack/react-query'
|
||||||
|
import { useToast } 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 { toast } = useToast()
|
||||||
|
const [formState, setFormState] = useState({
|
||||||
|
name: '',
|
||||||
|
company: '',
|
||||||
|
email: '',
|
||||||
|
phone: '',
|
||||||
|
issue: '',
|
||||||
|
priority: 'medium',
|
||||||
|
})
|
||||||
|
|
||||||
|
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',
|
||||||
|
})
|
||||||
|
},
|
||||||
|
onError: (error) => {
|
||||||
|
toast.error(error.message || 'Failed to submit form. Please try again.')
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
const handleSubmit = (e) => {
|
||||||
|
e.preventDefault()
|
||||||
|
mutation.mutate(formState)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleChange = (e) => {
|
||||||
|
const { name, value } = e.target
|
||||||
|
setFormState(prev => ({ ...prev, [name]: value }))
|
||||||
|
}
|
||||||
|
|
||||||
|
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">
|
||||||
|
<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"
|
||||||
|
/>
|
||||||
|
</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"
|
||||||
|
/>
|
||||||
|
</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"
|
||||||
|
/>
|
||||||
|
</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}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
type="submit"
|
||||||
|
className="w-full"
|
||||||
|
disabled={mutation.isPending}
|
||||||
|
>
|
||||||
|
{mutation.isPending ? 'Submitting...' : 'Submit Request'}
|
||||||
|
</Button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Support
|
||||||
|
|
@ -0,0 +1,40 @@
|
||||||
|
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/unified-communications', element: <ServiceDetail name="unified-communications" /> },
|
||||||
|
{ path: 'services/contact-center', element: <ServiceDetail name="contact-center" /> },
|
||||||
|
{ path: 'services/managed-support', element: <ServiceDetail name="managed-support" /> },
|
||||||
|
{ path: 'services/consulting-training', element: <ServiceDetail name="consulting-training" /> },
|
||||||
|
{ path: 'services/infrastructure-cabling', element: <ServiceDetail name="infrastructure-cabling" /> },
|
||||||
|
{ path: 'services/wireless-access', element: <ServiceDetail name="wireless-access" /> },
|
||||||
|
{ path: 'services/local-networking', element: <ServiceDetail name="local-networking" /> },
|
||||||
|
{ path: 'industries', element: <Industries /> },
|
||||||
|
{ path: 'industries/healthcare', element: <IndustryDetail name="healthcare" /> },
|
||||||
|
{ path: 'industries/retail', element: <IndustryDetail name="retail" /> },
|
||||||
|
{ path: 'industries/manufacturing', element: <IndustryDetail name="manufacturing" /> },
|
||||||
|
{ path: 'industries/education-finance', element: <IndustryDetail name="education-finance" /> },
|
||||||
|
{ path: '8x8', element: <EightXEight /> },
|
||||||
|
{ path: 'contact', element: <Contact /> },
|
||||||
|
{ path: 'support', element: <Support /> },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
export default router
|
||||||
|
|
@ -0,0 +1,51 @@
|
||||||
|
/** @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',
|
||||||
|
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',
|
||||||
|
'26': '6.5rem',
|
||||||
|
},
|
||||||
|
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: [],
|
||||||
|
}
|
||||||
|
|
@ -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,
|
||||||
|
},
|
||||||
|
})
|
||||||
Loading…
Reference in New Issue