feat(ui): why queue north section refinement (batch 0.5.5)

This commit is contained in:
null 2026-05-17 14:56:10 -05:00
parent 940cd94ba3
commit a963dc4dcc
2 changed files with 37 additions and 26 deletions

View File

@ -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\"",

View File

@ -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>