From 71c8129046bc3df6186a2bd2510feb26898c2be9 Mon Sep 17 00:00:00 2001 From: null Date: Sun, 17 May 2026 15:07:28 -0500 Subject: [PATCH] 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 --- .gitignore | 5 +- FUTURE.md | 147 ++++++++++++ HISTORY.md | 370 +++++++++++++++++++++++++++++++ package.json | 2 +- src/components/layout/Footer.jsx | 18 +- src/pages/Contact.jsx | 21 +- src/pages/Home.jsx | 27 ++- src/pages/Support.jsx | 21 +- 8 files changed, 598 insertions(+), 13 deletions(-) create mode 100644 FUTURE.md create mode 100644 HISTORY.md diff --git a/.gitignore b/.gitignore index f8d273d..f5694ad 100644 --- a/.gitignore +++ b/.gitignore @@ -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/ diff --git a/FUTURE.md b/FUTURE.md new file mode 100644 index 0000000..20f451c --- /dev/null +++ b/FUTURE.md @@ -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 \ No newline at end of file diff --git a/HISTORY.md b/HISTORY.md new file mode 100644 index 0000000..2514f28 --- /dev/null +++ b/HISTORY.md @@ -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: `