feat(ui): footer + contact improvements, CTAs everywhere, gitignore update (batch 0.5.6)

- Footer: email, phone, Request Consultation CTA
- Home: CTA links added to Trust Signals, Services, Why Queue North
- Contact: hero CTA, prominent phone/email
- Support page updates
- Version bumped to 0.5.3
- FUTURE.md and HISTORY.md now tracked in git
- .gitignore updated to allow FUTURE.md and HISTORY.md
This commit is contained in:
null 2026-05-17 15:07:28 -05:00
parent 5b0a509e70
commit 71c8129046
8 changed files with 598 additions and 13 deletions

5
.gitignore vendored
View File

@ -2,11 +2,12 @@
DEVELOPMENT_LOG.md
PROJECT.md
STRUCTURE.md
FUTURE.md
HISTORY.md
BUILD_SUMMARY.md
SCRIPTS.md
# Tracked project docs
# FUTURE.md and HISTORY.md are versioned for repo visibility
# Dependencies
node_modules/

147
FUTURE.md Normal file
View File

@ -0,0 +1,147 @@
# Queue-North-Website — Planning
## Phase 5 — Verification + Release Readiness
Phase 4 is complete. Phase 5 covers the redesign improvements from the review.md assessment, plus fixing remaining issues from Bishop's audit.
**Key principles from review:**
- B2B positioning: "reliable communications and IT partner" not "dev portfolio"
- Trust signals front and center
- Business outcomes over technical jargon
- Evolve the color palette (don't rip-and-replace to light theme)
- 8x8 partnership is a massive trust signal — feature it prominently
- Mobile-first — SMB decision-makers browse on phones
- Small batches, one focused change per dispatch
---
### ~~Batch 0.5.0: SPA Router Fix + Assets + Docker~~ ✅ Complete (Ripley)
- Fixed main.jsx to use RouterProvider (was BrowserRouter with disconnected routes)
- Fixed TS generics in .jsx files (Card, Badge, Dialog, Input, Textarea)
- Fixed useToast import (sonner doesn't export useToast)
- Fixed DialogTrigger outside Dialog (merged mobile menu into Header.jsx)
- Added SPA catch-all route for client-side routing
- Added CSP style-src for Google Fonts
- Copied all image assets to public/ (were 404)
- Replaced placeholder logo.svg with real Queue North logo
### ~~Batch 0.5.1: Hamburger Menu Fix + DialogTitle A11y~~ ✅ Complete (Scarlett)
- Fixed SheetContent missing positional CSS classes (panel was zero-size)
- Installed and configured tailwindcss-animate
- Added visually hidden SheetTitle for accessibility (Radix DialogTitle requirement)
- Forgejo issues #22, #23 closed
### ~~Batch 0.5.2: Hero Section Rewrite~~ ✅ Complete (Scarlett)
**Focus:** Rewrite hero to communicate B2B value proposition instantly
- Replace headline "Modern Communications Infrastructure Without the Vendor Noise" with something clearer and more direct ✅
- Refine subtext to emphasize trust, reliability, outcomes ✅
- Make "8x8 Certified Partner" badge prominent — not a small pill, a featured trust signal ✅
- Ensure CTAs are clear: "Schedule Consultation" (primary), "View Services" (secondary) ✅
- Evolve color palette: keep navy base, add teal/cyan accents, improve contrast and hierarchy ✅
- Mobile-first: hero must look great on small screens ✅
- **Forgejo issue:** Create issue for tracking, close when done
**Files Modified:**
- `src/pages/Home.jsx` — Hero section rewrite
**Changes Summary:**
- New headline: "Reliable Business Communications — Without the Runaround"
- Subtext emphasizes handling phones/internet/IT so business can focus
- 8x8 badge is now prominent (featured card with logo, not small pill)
- Veteran Owned badge and 25+ Years Experience metric now prominent
- CTAs: "Schedule Consultation" (primary, goes to /contact), "View Services" (secondary, goes to /services)
- Color palette evolved: navy base with teal-900 gradient accent
- Trust signals immediately visible on mobile without scrolling
### Batch 0.5.3: Trust Signals Section ✅ Complete (Scarlett)
**Focus:** Add dedicated trust signals section immediately after hero
- 8x8 Certified Partner badge (prominent, not buried)
- Veteran Owned business badge
- "25+ Years Experience" metric with Georgia font
- Uptime/support response time stats (99.99%, <15m, 24/7, 100%)
- Clean card/metric layout with professional B2B feel
- Mobile-first: three-column grid on desktop, stacked on mobile
- Business outcomes over technical jargon
- This is the #1 thing B2B buyers look for after understanding what you do
**Files Modified:**
- `src/pages/Home.jsx` — Added Trust Signals section after hero
**Changes Summary:**
- New section with three feature cards (8x8, Veteran Owned, 25+ Years)
- Metrics grid with 4 key stats (uptime, response time, support hours, satisfaction)
- Professional B2B design with white cards on section-alt background
- Georgia font used for all numeric metrics via `font-numeric` class
- Hover effects and consistent spacing for polished feel
### ~~Batch 0.5.4: Services Rewrite — Business Outcomes~~ ✅ Complete (Scarlett)
- Section title: "Our Services" → "What We Handle"
- Subtitle: "From phones to firewalls, we keep your business running"
- Added homeDesc field to all 7 services with outcome-focused language
- Service cards now show icon + homeDesc (outcome) + shortDesc (technical)
- lucide-react icons per service (MessageCircle, Users, LifeBuoy, GraduationCap, LinkIcon, Wifi, Network)
- B2B professional card layout with icon containers
- Service detail pages unchanged
### Batch 0.5.5: Why Queue North Section Refinement ✅ Complete (Scarlett)
**Focus:** Refine the "Why Queue North" section
- Replace generic pillars with concrete differentiators ✅
- Responsiveness, direct support, proactive monitoring, vendor neutrality ✅
- Added lucide-react icons: Headphones, UserCheck, Activity, ShieldCheck ✅
- Changed grid from 3-col to 4-col responsive layout (1 col mobile, 2 col tablet, 4 col desktop) ✅
- Avoid: "innovative solutions", "digital transformation", "next-gen synergy" ✅
- Version bumped to 0.5.2, HISTORY.md updated ✅
**Files Modified:**
- `src/pages/Home.jsx` — Why Queue North section complete redesign
- `package.json` — Version bumped to 0.5.2
- `HISTORY.md` — Added batch entry
**Verified:**
- Build passes
- Docker test passes
- Home page loads correctly
### Batch 0.5.6: Footer + Contact Improvements ✅ Complete (Scarlett)
**Focus:** Clean up footer and ensure CTAs are everywhere
- Footer: email, phone, status page link ✅
- Every section has a path to "Request Consultation" ✅
- Contact page CTA in hero, prominent phone/email ✅
- Support link visible in nav and footer ✅
- Version bumped to 0.5.3, HISTORY.md updated ✅
**Files Modified:**
- `src/components/layout/Footer.jsx` — Footer cleanup
- `src/pages/Home.jsx` — CTA links in sections
- `src/pages/Contact.jsx` — Hero CTA
- `src/pages/Support.jsx` — Minor updates
- `package.json` — Version bumped to 0.5.3
- `HISTORY.md` — Added batch entry
**Verified:**
- Build passes
- Docker test passes
- Home page loads correctly
- Footer renders with email, phone, and CTA
- Contact page hero displays phone/email and Request Consultation button
---
---
### Remaining Audit Fixes (from Bishop's audit)
- P0: Zoho token null but forwardToZoho continues (#2)
- P0: Zoho fetch no response.ok check (#3)
- P0: Docker su-exec may fail silently (#4)
- P1: No timeout on Zoho fetch (#5)
- P1: No unique constraint on email (#6)
- P1: service_interest NULL inconsistency (#10)
- P2-P3 items deferred to Phase 6
### Deferred (Phase 6+)
- Testimonials/Case Studies section (needs real content from _null)
- Industry use cases rewrite
- Writing/Blog section
- SEO improvements
- Performance audit
- Zoho integration enablement

370
HISTORY.md Normal file
View File

@ -0,0 +1,370 @@
## v0.5.3 — Phase 5 Batch 6: Footer + Contact Improvements — 2026-05-17
### Completed
- Footer cleanup: email (`info@queuenorth.com`), phone (`(906) 482-6616`), and CTA (`Request Consultation`) all present
- Contact page hero: prominent phone/email display + CTA button
- Home page CTA links added to Trust Signals, Services, Why Queue North sections
- Minor updates to Support page
### Files Modified
- `src/components/layout/Footer.jsx` — Footer cleanup
- `src/pages/Home.jsx` — CTA links in sections
- `src/pages/Contact.jsx` — Hero CTA
- `src/pages/Support.jsx` — Minor updates
- `package.json` — Version bumped to 0.5.3
### Verified
- `npm run build` passes
- Docker image builds and container starts on port 3001
- Footer renders with email, phone, and CTA
- Contact page hero displays phone/email and Request Consultation button
---
## v0.5.2 — Phase 5 Batch 5: Why Queue North Section Refinement — 2026-05-17
### Completed
- Replaced generic "Architecture/Deployment/Lifecycle" pillars with 4 concrete differentiators
- Added lucide-react icons: Headphones, UserCheck, Activity, ShieldCheck
- Changed grid from 3-col to 4-col responsive layout (1 col mobile, 2 col tablet, 4 col desktop)
- Removed unused CardDescription import
- Updated Why Queue North section subtitle to "Four concrete differentiators that set us apart"
- Clean card layout with centered icon containers and consistent styling
### Files Modified
- `src/pages/Home.jsx` — Why Queue North section complete redesign
- `package.json` — Version bumped to 0.5.2
### Verified
- `npm run build` passes
- Docker image builds and container starts
- Home page loads on http://localhost:3001
- Responsive layout verified (1/2/4 columns as specified)
---
## v0.5.1 — Phase 5 Batch 1: Hamburger Menu Fix + DialogTitle A11y — 2026-05-13
### Verified Complete
- Fixed SheetContent missing positional CSS classes (panel was zero-size)
- Installed and configured tailwindcss-animate
- Added visually hidden SheetTitle for accessibility (Radix DialogTitle requirement)
- Forgejo issues #22, #23 closed
---
## v0.5.4 — Phase 5 Batch 4: Services Rewrite — Business Outcomes — 2026-05-17
### Completed
- Section title changed: "Our Services" → "What We Handle"
- Subtitle changed to outcome-focused: "From phones to firewalls, we keep your business running"
- Added `homeDesc` field to all 7 services in `src/data/services.js` with business-outcome language
- Service cards now show: icon + name + homeDesc (outcome) + shortDesc (supporting) + CTA
- lucide-react icons per service: MessageCircle, Users, LifeBuoy, GraduationCap, LinkIcon, Wifi, Network
- B2B professional card layout with icon containers (primary-navy/10 bg)
- Service detail pages (ServiceDetail.jsx) unchanged
### Files Modified
- `src/pages/Home.jsx` — Services section rewrite
- `src/data/services.js` — Added homeDesc field to each service
- `FUTURE.md` — Marked batch 0.5.4 complete
---
## v0.5.3 — Phase 5 Batch 3: Trust Signals Section — 2026-05-17
### Completed
- Added dedicated Trust Signals section immediately after hero section
- 8x8 Certified Partner badge: prominent white card with logo, certification number, and descriptive text
- Veteran Owned badge: VCERT verified with certification #, values-based messaging
- "25+ Years Experience": metric card with 25+ using Georgia font (font-numeric class)
- Metrics grid: 4 key stats displayed (99.99% uptime, <15m response, 24/7 support, 100% satisfaction)
- Clean card layout: white cards on section-alt background with hover effects
- Mobile-first: three-column grid on desktop, stacked on mobile
- Business outcomes focus: reliability, experience, support承诺, not technical jargon
### Files Modified
- `src/pages/Home.jsx` — Added Trust Signals section after hero
- `FUTURE.md` — Marked batch 0.5.3 complete
### Notes for Next Agent
- The trust signals are now front and center after the hero, before services
- Georgia font (`font-numeric`) consistently used for all metrics
- All metrics use realistic placeholder values that can be replaced with real stats when available
- The white card design provides contrast against the section-alt background
---
## v0.5.2 — Phase 5 Batch 2: Hero Section Rewrite — 2026-05-17
### Completed
- Hero headline replaced: "Modern Communications Infrastructure Without the Vendor Noise" → "Reliable Business Communications — Without the Runaround"
- Subtext updated to emphasize trust, reliability, and business outcomes
- 8x8 Certified Partner badge made prominent (featured card with logo, not small pill)
- Trust signals immediately visible on mobile without scrolling
- CTAs updated: "Schedule Consultation" (primary, /contact), "View Services" (secondary, /services)
- Color palette evolved: navy base with teal-900 gradient accent
- Mobile-first design verified — trust signals visible above fold on phone viewports
### Files Modified
- `src/pages/Home.jsx` — Hero section rewrite
- `.learnings/scarlett/LEARNINGS.md` — Added hero rewrite entry
- `FUTURE.md` — Marked batch 0.5.2 complete
### Notes for Next Agent
- The 8x8 badge is now prominently featured — keep this prominence in future sections
- Georgia font (`font-numeric`) used for "25+ Years Experience" — consistent with design rule
- Consider similar trust signal presentation in the Trust Bar section
---
## v0.4.8 — Phase 4 Batch 8: Error Handling Hardening + Dep Audit — 2026-05-13
### Verified Complete
- Global error handlers: uncaughtException + unhandledRejection → log + exit(1)
- 404 catch-all for `/api/*` routes returns `{ error: 'Not found' }`
- Health check enhanced: DB connectivity check, returns `{ status: 'ok', db: 'ok' }` or 503
- Request timeout: 30-second middleware, 504 response
- Consistent error format: 400/404/429/500/503/504 all follow `{ error, fields? }` pattern
- `npm audit`: 0 vulnerabilities
- `npm outdated`: major updates noted (Express 5, Vite 8, etc.) but not upgraded
## v0.4.7 — Phase 4 Batch 7: Rate Limiting + Security Headers + CORS — 2026-05-13
### Verified Complete
- express-rate-limit: 5 req/min per IP on /api/leads and /api/support, configurable via RATE_LIMIT_PER_MINUTE
- helmet: CSP (scripts 'self', styles 'self' inline, fonts 'self' + Google Fonts), HSTS, X-Content-Type-Options, X-Frame-Options DENY
- cors: configurable via CORS_ORIGIN env var, credentials enabled, API routes only
- Trust proxy enabled for correct client IP behind Docker/reverse proxy
- Rate limit returns 429 with JSON error + retryAfter
- All security headers confirmed via curl
- Docker config updated: all new env vars in Dockerfile and docker-compose.yml
## v0.4.6 — Phase 4 Batch 6: Zoho Forwarding Layer — 2026-05-13
### Verified Complete
- Zoho CRM forwarding via REST API v8 (POST /crm/v8/Leads)
- OAuth2 token management: refresh token → access token, in-memory cache with auto-refresh
- Fire-and-forget: Zoho forwarding is async, never blocks form response
- Configurable via 6 env vars: ZOHO_ENABLED, ZOHO_API_DOMAIN, ZOHO_CLIENT_ID, ZOHO_CLIENT_SECRET, ZOHO_REFRESH_TOKEN, ZOHO_REDIRECT_URI
- Best-effort design: Zoho failures logged but never propagate to client
- ZOHO_ENABLED=false: no Zoho activity, form submits normally
- ZOHO_ENABLED=true with invalid creds: form still succeeds, Zoho errors logged to console
## v0.4.5 — Phase 4 Batch 5: Server-Side Validation + Input Sanitization — 2026-05-13
### Verified Complete
- Zod schemas updated with `.trim()` and `.max()` on all fields
- Input sanitization: strip HTML/script tags, truncate to max lengths
- Request body size limit: 1MB (returns 413)
- Validation errors formatted as `{ error, fields }` — no stack traces
- All curl tests pass: valid data, empty fields, invalid email, XSS, max length, short issue
- XSS test confirmed: `<script>` and `<b>` tags stripped from stored data
## v0.4.4 — Phase 4 Batch 4: Client-Side Validation + Sonner Feedback — 2026-05-13
### Verified Complete
- Contact form: required field validation (company, name, email, message)
- Support form: required field validation (name, company, email, issue)
- Email format validation with regex on both forms
- Issue minimum length validation (10 chars) on Support form
- Inline error messages below each invalid field (red text, small)
- Sonner toast for validation errors on submit attempt
- Error clearing as user corrects fields (onChange)
- Red ring/border on Input/Textarea when field has validation error
- Form inputs disabled during submission (mutation.isPending)
- Form opacity reduced to 70% during submission
- Build passes clean
## v0.4.1 — Phase 4 Batch 1: Contact Form Wired to Express — 2026-05-12
### Verified Complete
- Contact form submits all fields to `/api/leads` via TanStack Query mutation
- Success/error response handling with Sonner toasts
- Confirmation shown on success, form resets
- Error state shown on failure
- Backend Zod validation + SQLite storage working
- Already implemented in Phase 1/2, verified end-to-end
## v0.2.13-fix — Phase 2 Fix: Legacy CSS Consolidation — 2026-05-13
### Fixed
- Removed duplicate `src/index.css` (was not imported anywhere)
- Created clean `src/index.css` as single Tailwind entry point
- Moved `maxWidth.container: 1280px` into `tailwind.config.js` theme extensions
- Updated `src/App.jsx` import from `./App.css` to `./index.css`
- Deleted redundant `src/App.css`
- All `bg-section-alt` usages verified still working
### Verified
- `npm run build` passes
- All 14 Phase 2 batches now fully verified
---
## v0.4.3 — Phase 4 Batch 3: SQLite Persistence Verification — 2026-05-13
### Verified Complete
- Database file (`db/queuenorth.db`) created on first run if missing
- `leads` and `support_requests` tables have correct schema (all columns match server/index.js)
- Data persists across server restarts
- Docker volume test: stop container, restart, confirm data present
- Health check endpoint responds correctly
- `docker-test.sh` persistence suite passes all checks
## v0.4.2 — Phase 4 Batch 2: Support Form Wired to Express — 2026-05-12
### Verified Complete
- Support form submits all fields to `/api/support` via TanStack Query mutation
- Success/error response handling with Sonner toasts
- Confirmation shown on success, form resets
- Error state shown on failure
- Backend Zod validation + SQLite storage working
- Already implemented in Phase 1/2, verified end-to-end
---
## v0.2.2 — Docker Image Size Fix — 2026-05-12
### Fixed
- Removed duplicate `node_modules` copy in Dockerfile runner stage (was copying full dev+prod modules as a permanent layer)
- Reduced image size from 331MB to 215MB (35% reduction)
- `npm ci --omit=dev` now runs cleanly without pre-existing dev modules
### Verified
- Docker build succeeds
- Container starts and health check passes
- Frontend serves correctly
---
# Queue-North-Website — Changelog
## v0.3.4 — Phase 3 Visual Overhaul Complete — 2026-05-12
### Completed Batches
- **Batch 1 (v0.3.1):** Tailwind theme tokens, spacing scale, container width, Inter font
- **Batch 2 (v0.3.2):** Home page redesign — hero, trust bar, services grid, why QN pillars, industries preview, final CTA
- **Batch 3 (v0.3.3):** Header/footer/mobilenav polish, navy-light color token, fixed Button.jsx TS generics build bug
- **Batch 4 (v0.3.4):** Inner pages layout system — consistent hero/card/CTA pattern across About, Services, ServiceDetail, Industries, IndustryDetail, 8x8
- **Batch 5:** Contact/Support forms verified compliant, no changes needed
### Verified
- All batches build successfully
- Contact and Support pages already compliant with OVERHAUL_PLAN.md
- No `asChild` usage on Button (unsupported, replaced with styled anchors)
---
## v0.3.2 — Phase 3 Batch 2: Home Page Redesign — 2026-05-12
### Changed
- Updated Home.jsx to import `industries` data from data file
- Replaced hardcoded industry data with dynamic rendering from `industries.js`
- Updated Services and Industries cards to use Button component for "Learn more" links
- Added MapPin icon from lucide-react for industry cards
- Added useNavigate hook for programmatic navigation
- Ensured consistent use of shadcn/ui Button component across the home page
- Updated version to `0.3.2` for Phase 3 Batch 2
### Verified
- `npm run build` passes
- All routes respond correctly
- Button components render with correct styling
- Responsive layout works on mobile and desktop
---
## v0.3.1 — Phase 3 Batch 1: Theme + Tailwind Config + Typography — 2026-05-12
### Changed
- Enhanced Tailwind spacing scale with utility values (24-48rem)
- Updated container max-width to 1280px per design spec
- Confirmed color palette, Inter font, Georgia numeric font already in place
---
## v0.1.1 — Phase 1 Agent-Pass Checkpoint — 2026-05-12
### Changed
- Corrected Phase 1 version to reflect completed agent-pass checkpoint semantics.
- Documented that every completed agent pass/checkpoint within a phase increments the patch version.
- Confirmed Phase 1 verified output is pushed to `dev` at `0.1.1`.
### Verified
- `npm run build` passes.
- Backend health endpoint responds successfully at `/api/health`.
## v0.2.1 — Dockerization — 2026-05-12
### Added
- Docker build for production deployment
- docker-compose.yml for local development with SQLite persistence
- npm scripts: `docker:build`, `docker:run`, `docker:compose:up/down/logs`
- Health check in Dockerfile and docker-compose
- Non-root `nodejs` user for security
- Layer caching optimization (copy package.json first, install, then copy source)
- `.dockerignore` to exclude node_modules, dist, db, logs, git, private docs
### Changed
- Updated package.json to `0.2.1` for Docker batch
### Verified
- Docker build succeeds with `npm run docker:build`
- Container starts and health check passes
- SQLite database persists in `./db` volume
---
## v0.2.0 — Phase 2 Layout Complete — 2026-05-12
### Added
- All route pages implemented (Home, About, Services, ServiceDetail, Industries, IndustryDetail, 8x8, Contact, Support).
- Data files for services and industries moved to `/src/data/`.
- Layout components (Header, Footer, MobileNav) built and integrated.
- Legacy `styles.css` removed (replaced by Tailwind configuration).
- Contact and support forms wired to Express backend via TanStack Query.
- All pages render meaningful content matching original business information.
- Version bumped to `0.2.0` for Phase 2 baseline.
### Changed
- Replaced hash-based routing with React Router 7.
- Standardized layout patterns across all pages (page hero, main content, sidebar, CTA band).
- Updated package.json, PROJECT.md, OVERHAUL_PLAN.md, HISTORY.md to reflect Phase 2 status.
- Overhaul plan updated to note Phase 2 scope and goals.
### Verified
- `npm run build` passes.
- All routes respond correctly.
- Contact form submits via `/api/leads`.
- Support form submits via `/api/support`.
- No references to legacy `styles.css` remain in source code.
## 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.

View File

@ -1,7 +1,7 @@
{
"name": "queuenorth-website",
"private": true,
"version": "0.5.2",
"version": "0.5.3",
"type": "module",
"scripts": {
"dev": "concurrently \"vite\" \"node server/index.js\"",

View File

@ -5,6 +5,8 @@ const Footer = () => {
name: 'Queue North',
tagline: 'Modern communications infrastructure without the vendor noise.',
address: 'Your trusted partner in UCaaS, Contact Center, and infrastructure solutions.',
email: 'info@queuenorth.com',
phone: '(906) 482-6616',
}
const quickLinks = [
@ -50,9 +52,19 @@ const Footer = () => {
</div>
<p className="text-navy-light text-sm mb-3">{companyInfo.tagline}</p>
<p className="text-navy-light text-sm mb-3">{companyInfo.address}</p>
<div className="text-navy-light text-sm mb-3">
<p className="mb-1">Phone: (906) 482-6616</p>
<a href="/contact" className="text-cyan hover:underline">Contact Form</a>
<div className="space-y-2 text-navy-light text-sm mb-3">
<div>
<a href={`mailto:${companyInfo.email}`} className="hover:text-cyan transition-colors">{companyInfo.email}</a>
</div>
<div>
<a href={`tel:${companyInfo.phone.replace(/\D/g, '')}`} className="hover:text-cyan transition-colors">{companyInfo.phone}</a>
</div>
<a href="/contact" className="inline-block text-cyan hover:underline">Contact Form</a>
</div>
<div className="mt-4">
<a href="/contact" className="inline-flex items-center justify-center rounded-md text-sm font-medium h-9 px-4 bg-cyan text-primary-navy hover:bg-cyan/90 transition-colors">
Request Consultation
</a>
</div>
<p className="text-navy-light text-xs">© {currentYear} Queue North Technologies. All rights reserved.</p>
</div>

View File

@ -101,9 +101,28 @@ const Contact = () => {
{/* 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">
<p className="text-xl text-soft-text max-w-3xl mb-8">
Have questions about our services? We're here to help. Fill out the form and we'll get back to you shortly.
</p>
<div className="flex flex-wrap gap-4 mb-8">
<div className="flex items-center gap-2 px-4 py-2 bg-primary-navy/10 rounded-lg text-primary-navy">
<svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 5.13a1 1 0 01-1.31.42a2 2 0 00-2.63-.54l-2.238 5.03a2 2 0 01-2.71.319L2.663 12H4a2 2 0 012 2v2a2 2 0 01-2 2H2a2 2 0 01-2-2V5z" />
</svg>
<p className="text-sm font-medium">(906) 482-6616</p>
</div>
<div className="flex items-center gap-2 px-4 py-2 bg-primary-navy/10 rounded-lg text-primary-navy">
<svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
<p className="text-sm font-medium">info@queuenorth.com</p>
</div>
</div>
<div className="mb-8">
<a href="/contact" className="inline-flex items-center justify-center rounded-md text-sm font-medium h-10 px-6 bg-primary-navy text-white hover:bg-primary-navy-dark transition-colors">
Request Consultation
</a>
</div>
</section>
{/* Contact Form */}

View File

@ -86,9 +86,15 @@ const Home = () => {
<div className="container mx-auto px-4">
<div className="text-center mb-12">
<h2 className="text-2xl md:text-3xl font-semibold text-primary-navy mb-2">Trusted by Thousands of Businesses</h2>
<p className="text-xl text-soft-text max-w-2xl mx-auto">
<p className="text-xl text-soft-text max-w-2xl mx-auto mb-6">
Why Queue North? Proven reliability, decades of experience, and unwavering support
</p>
<div>
<Button variant="default" onClick={() => navigate('/contact')}
className="bg-primary-navy text-white hover:bg-primary-navy-dark">
Request Consultation
</Button>
</div>
</div>
{/* 8x8 Certified Partner */}
@ -192,9 +198,14 @@ const Home = () => {
</CardHeader>
<CardContent>
<p className="text-sm text-soft-text mb-4">{service.shortDesc}</p>
<Button variant="link" className="text-primary-navy p-0 h-auto text-sm" onClick={() => navigate(`/services/${service.id}`)}>
Learn more
</Button>
<div className="flex flex-col gap-2">
<Button variant="link" className="text-primary-navy p-0 h-auto text-sm" onClick={() => navigate(`/services/${service.id}`)}>
Learn more
</Button>
<Button variant="outline" size="sm" onClick={() => navigate('/contact')}>
Request Consultation
</Button>
</div>
</CardContent>
</Card>
))}
@ -207,9 +218,15 @@ const Home = () => {
<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">
<p className="text-xl text-soft-text max-w-2xl mx-auto mb-6">
Four concrete differentiators that set us apart
</p>
<div>
<Button variant="default" onClick={() => navigate('/contact')}
className="bg-primary-navy text-white hover:bg-primary-navy-dark">
Request Consultation
</Button>
</div>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<Card>

View File

@ -104,9 +104,28 @@ const Support = () => {
{/* 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">
<p className="text-xl text-soft-text max-w-3xl mb-8">
Need help with your communications or infrastructure? Submit a support request and we'll get back to you promptly.
</p>
<div className="flex flex-wrap gap-4 mb-8">
<div className="flex items-center gap-2 px-4 py-2 bg-primary-navy/10 rounded-lg text-primary-navy">
<svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 5.13a1 1 0 01-1.31.42a2 2 0 00-2.63-.54l-2.238 5.03a2 2 0 01-2.71.319L2.663 12H4a2 2 0 012 2v2a2 2 0 01-2 2H2a2 2 0 01-2-2V5z" />
</svg>
<p className="text-sm font-medium">(906) 482-6616</p>
</div>
<div className="flex items-center gap-2 px-4 py-2 bg-primary-navy/10 rounded-lg text-primary-navy">
<svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
<p className="text-sm font-medium">info@queuenorth.com</p>
</div>
</div>
<div className="mb-8">
<a href="/contact" className="inline-flex items-center justify-center rounded-md text-sm font-medium h-10 px-6 bg-primary-navy text-white hover:bg-primary-navy-dark transition-colors">
Request Consultation
</a>
</div>
</section>
{/* Support Form */}