From a963dc4dcce230fdda25aacb18732dc436608b99 Mon Sep 17 00:00:00 2001
From: null <koga.industries@gmail.com>
Date: Sun, 17 May 2026 14:56:10 -0500
Subject: [PATCH] feat(ui): why queue north section refinement (batch 0.5.5)

---
 package.json       |  2 +-
 src/pages/Home.jsx | 61 +++++++++++++++++++++++++++-------------------
 2 files changed, 37 insertions(+), 26 deletions(-)

diff --git a/package.json b/package.json
index b3aa286..b26d0ea 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "queuenorth-website",
   "private": true,
-  "version": "0.5.1",
+  "version": "0.5.2",
   "type": "module",
   "scripts": {
     "dev": "concurrently \"vite\" \"node server/index.js\"",
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index 15e9afe..806cae3 100644
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -1,9 +1,9 @@
 import { Button } from '@/components/ui/Button'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/Card'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card'
 import { services } from '@/data/services'
 import { industries } from '@/data/industries'
 import { useNavigate } from 'react-router-dom'
-import { MapPin, MessageCircle, Users, LifeBuoy, GraduationCap, Link as LinkIcon, Wifi, Network } from 'lucide-react'
+import { MapPin, MessageCircle, Users, LifeBuoy, GraduationCap, Link as LinkIcon, Wifi, Network, Headphones, UserCheck, Activity, ShieldCheck } from 'lucide-react'
 
 const Home = () => {
   const navigate = useNavigate()
@@ -208,40 +208,51 @@ const Home = () => {
           <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
+              Four concrete differentiators that set us apart
             </p>
           </div>
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
             <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.
+              <CardContent className="pt-6">
+                <div className="bg-primary-navy text-white p-3 rounded-lg mb-4 inline-flex">
+                  <Headphones className="w-6 h-6" />
+                </div>
+                <h3 className="text-lg font-semibold text-primary-navy mb-2">Responsiveness</h3>
+                <p className="text-sm text-soft-text">
+                  When you call, a human answers — not a ticket queue, not a chatbot. Real support from people who know your system.
                 </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.
+              <CardContent className="pt-6">
+                <div className="bg-primary-navy text-white p-3 rounded-lg mb-4 inline-flex">
+                  <UserCheck className="w-6 h-6" />
+                </div>
+                <h3 className="text-lg font-semibold text-primary-navy mb-2">Direct Support</h3>
+                <p className="text-sm text-soft-text">
+                  No account managers between you and the engineer solving your problem. You talk to the team that designed and deployed your system.
                 </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.
+              <CardContent className="pt-6">
+                <div className="bg-primary-navy text-white p-3 rounded-lg mb-4 inline-flex">
+                  <Activity className="w-6 h-6" />
+                </div>
+                <h3 className="text-lg font-semibold text-primary-navy mb-2">Proactive Monitoring</h3>
+                <p className="text-sm text-soft-text">
+                  We catch problems before you notice them. 24/7 monitoring means we're often resolving issues before your phone rings.
+                </p>
+              </CardContent>
+            </Card>
+            <Card>
+              <CardContent className="pt-6">
+                <div className="bg-primary-navy text-white p-3 rounded-lg mb-4 inline-flex">
+                  <ShieldCheck className="w-6 h-6" />
+                </div>
+                <h3 className="text-lg font-semibold text-primary-navy mb-2">Vendor Neutrality</h3>
+                <p className="text-sm text-soft-text">
+                  As an 8x8 Certified Partner, we recommend what works best for you — not what pays the highest commission. We've tested the alternatives so you don't have to.
                 </p>
               </CardContent>
             </Card>