From 046d5b1d4aa96f3fe999fad3e0cabfb57859fdc9 Mon Sep 17 00:00:00 2001
From: null <koga.industries@gmail.com>
Date: Mon, 18 May 2026 14:25:45 -0500
Subject: [PATCH] fix: ui industries

---
 src/pages/Industries.jsx | 120 +++++++++++++++++++------------------
 src/pages/Services.jsx   | 126 ++++++++++++++++++++++-----------------
 2 files changed, 132 insertions(+), 114 deletions(-)

diff --git a/src/pages/Industries.jsx b/src/pages/Industries.jsx
index 9cb818c..7843f65 100644
--- a/src/pages/Industries.jsx
+++ b/src/pages/Industries.jsx
@@ -1,14 +1,13 @@
 import SEO from '@/components/SEO'
 import { industries } from '@/data/industries'
+import { ArrowRight, Building2, CheckCircle2, HeartPulse, ShoppingCart, Factory, Landmark } from 'lucide-react'
 import { Link } from 'react-router-dom'
-import { HeartPulse, ShoppingCart, Factory, Landmark, Building2 } from 'lucide-react'
 
-// Icon map for industries - converts icon string to lucide component
-const industryIcons = {
+const iconMap = {
   'heart-pulse': HeartPulse,
   'shopping-cart': ShoppingCart,
-  factory: Factory,
-  landmark: Landmark,
+  'factory': Factory,
+  'landmark': Landmark,
 }
 
 const Industries = () => {
@@ -19,62 +18,64 @@ const Industries = () => {
         description="Queue North Technologies serves healthcare, retail, manufacturing, education, and finance industries with tailored communications and IT solutions."
         url="https://queuenorth.com/industries"
       />
-      {/* Page Hero */}
-      <section className="bg-background py-12 lg:py-20">
+
+      {/* Hero */}
+      <section className="bg-primary-navy py-12 lg:py-20 text-white">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div>
-            <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.
+          <div className="max-w-3xl">
+            <div className="inline-flex items-center gap-2 rounded-md border border-white/20 bg-white/10 px-3 py-2 text-xs font-semibold uppercase tracking-wide text-primary-cyan mb-6">
+              <Building2 className="h-4 w-4" aria-hidden="true" />
+              Industries
+            </div>
+            <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-6">
+              Built around how your industry actually works.
+            </h1>
+            <p className="text-lg md:text-xl text-white/75 max-w-2xl leading-relaxed mb-8">
+              Communications and infrastructure solutions shaped by the compliance, workflow, and connectivity demands of your specific environment.
             </p>
+            <Link
+              to="/contact"
+              className="inline-flex h-11 items-center justify-center gap-2 rounded-md bg-white px-5 text-sm font-semibold text-primary-navy hover:bg-section-alt transition-colors"
+            >
+              Talk to a Specialist
+              <ArrowRight className="h-4 w-4" aria-hidden="true" />
+            </Link>
           </div>
         </div>
       </section>
 
       {/* Industries Grid */}
-      <section className="bg-background py-16">
+      <section className="bg-background py-16 lg:py-20">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
             {industries.map((industry) => {
-              const IconComponent = industryIcons[industry.icon] || Building2
+              const Icon = iconMap[industry.icon] || Building2
               return (
-                <div key={industry.id} className="group">
-                  <div className="rounded-md 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-md bg-section-alt flex items-center justify-center flex-shrink-0">
-                          <IconComponent className="h-6 w-6 text-primary-navy" />
-                        </div>
-                        <h2 className="text-xl font-semibold text-primary-navy group-hover:text-primary-navy-dark transition-colors">
-                          {industry.name}
-                        </h2>
-                      </div>
-                      <p className="text-soft-text mb-4">{industry.shortDesc}</p>
-                      
-                      <div className="mb-4">
-                        <h3 className="text-sm font-semibold text-text mb-2">Pain Points We Solve</h3>
-                        <div className="space-y-2">
-                          {industry.painPoints.slice(0, 2).map((painPoint, index) => (
-                            <div key={index} className="flex items-start gap-2 text-sm text-soft-text">
-                              <div className="h-4 w-4 rounded-full bg-red-100 text-red-600 flex items-center justify-center flex-shrink-0 mt-0.5">
-                                <svg className="h-2 w-2" 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>{painPoint}</span>
-                            </div>
-                          ))}
-                        </div>
-                      </div>
-                      
-                      <Link to={`/industries/${industry.id}`} className="inline-flex items-center gap-1 text-primary-navy font-medium hover:underline mt-2">
-                        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>
-                      </Link>
-                    </div>
+                <div
+                  key={industry.id}
+                  className="group flex flex-col rounded-md border border-border bg-white p-8 shadow-sm hover:shadow-md hover:border-primary-navy/30 transition-all"
+                >
+                  <div className="flex h-14 w-14 items-center justify-center rounded-md bg-primary-navy/10 mb-6 flex-shrink-0">
+                    <Icon className="h-7 w-7 text-primary-navy" aria-hidden="true" />
                   </div>
+                  <h2 className="text-2xl font-bold text-primary-navy mb-3">{industry.name}</h2>
+                  <p className="text-soft-text leading-relaxed mb-6">{industry.shortDesc}</p>
+                  <ul className="space-y-2.5 mb-8 flex-1">
+                    {industry.solutions.slice(0, 3).map((solution, i) => (
+                      <li key={i} className="flex items-start gap-3 text-sm text-text">
+                        <CheckCircle2 className="h-4 w-4 text-primary-blue flex-shrink-0 mt-0.5" aria-hidden="true" />
+                        {solution}
+                      </li>
+                    ))}
+                  </ul>
+                  <Link
+                    to={`/industries/${industry.id}`}
+                    className="inline-flex items-center gap-1.5 text-sm font-semibold text-primary-navy hover:text-primary-blue transition-colors"
+                    aria-label={`Learn more about ${industry.name} solutions`}
+                  >
+                    See how we help
+                    <ArrowRight className="h-4 w-4" aria-hidden="true" />
+                  </Link>
                 </div>
               )
             })}
@@ -83,18 +84,21 @@ const Industries = () => {
       </section>
 
       {/* CTA */}
-      <section className="bg-section-alt py-16">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
-          <div>
-            <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>
+      <section className="bg-primary-navy py-14 text-white">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6">
+            <div>
+              <h2 className="text-3xl md:text-4xl font-bold mb-3">Don't see your industry?</h2>
+              <p className="text-white/70 max-w-2xl">
+                We work with businesses across all sectors. If you have specific compliance, connectivity, or workflow requirements, let's talk.
+              </p>
+            </div>
             <Link
               to="/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"
+              className="inline-flex h-11 items-center justify-center gap-2 rounded-md bg-white px-6 text-sm font-semibold text-primary-navy hover:bg-section-alt transition-colors flex-shrink-0"
             >
-              Request Consultation
+              Talk to a Specialist
+              <ArrowRight className="h-4 w-4" aria-hidden="true" />
             </Link>
           </div>
         </div>
diff --git a/src/pages/Services.jsx b/src/pages/Services.jsx
index eff788e..1b3c5d3 100644
--- a/src/pages/Services.jsx
+++ b/src/pages/Services.jsx
@@ -1,6 +1,6 @@
 import SEO from '@/components/SEO'
 import { services } from '@/data/services'
-import { MessageCircle, Users, LifeBuoy, GraduationCap, Link as LinkIcon, Wifi, Network } from 'lucide-react'
+import { ArrowRight, MessageCircle, Users, LifeBuoy, GraduationCap, Link as LinkIcon, Wifi, Network, Layers } from 'lucide-react'
 import { Link } from 'react-router-dom'
 
 const serviceLd = {
@@ -18,6 +18,16 @@ const serviceLd = {
   },
 }
 
+const iconMap = {
+  'message-circle': MessageCircle,
+  'users': Users,
+  'life-buoy': LifeBuoy,
+  'graduation-cap': GraduationCap,
+  'link': LinkIcon,
+  'wifi': Wifi,
+  'network': Network,
+}
+
 const Services = () => {
   return (
     <>
@@ -27,80 +37,84 @@ const Services = () => {
         url="https://queuenorth.com/services"
         jsonLd={serviceLd}
       />
-      {/* Page Hero */}
-      <section className="bg-background py-12 lg:py-20">
+
+      {/* Hero */}
+      <section className="bg-primary-navy py-12 lg:py-20 text-white">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div>
-            <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.
+          <div className="max-w-3xl">
+            <div className="inline-flex items-center gap-2 rounded-md border border-white/20 bg-white/10 px-3 py-2 text-xs font-semibold uppercase tracking-wide text-primary-cyan mb-6">
+              <Layers className="h-4 w-4" aria-hidden="true" />
+              What We Do
+            </div>
+            <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-6">
+              Everything your business communications needs.
+            </h1>
+            <p className="text-lg md:text-xl text-white/75 max-w-2xl leading-relaxed mb-8">
+              From phone systems to full network infrastructure — designed, deployed, and supported by one accountable team.
             </p>
+            <div className="flex flex-col sm:flex-row gap-3">
+              <Link
+                to="/contact"
+                className="inline-flex h-11 items-center justify-center gap-2 rounded-md bg-white px-5 text-sm font-semibold text-primary-navy hover:bg-section-alt transition-colors"
+              >
+                Get a Free Quote
+                <ArrowRight className="h-4 w-4" aria-hidden="true" />
+              </Link>
+              <Link
+                to="/support"
+                className="inline-flex h-11 items-center justify-center rounded-md border border-white/40 px-5 text-sm font-semibold text-white hover:bg-white/10 transition-colors"
+              >
+                Existing Client? Get Support
+              </Link>
+            </div>
           </div>
         </div>
       </section>
 
       {/* Services Grid */}
-      <section className="bg-background py-16">
+      <section className="bg-background py-16 lg:py-20">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-            {services.map((service) => (
-              <div key={service.id} className="group">
-                <div className="rounded-md 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-md bg-section-alt flex items-center justify-center flex-shrink-0">
-                        {service.icon === 'message-circle' && <MessageCircle className="h-6 w-6 text-primary-navy" />}
-                        {service.icon === 'users' && <Users className="h-6 w-6 text-primary-navy" />}
-                        {service.icon === 'life-buoy' && <LifeBuoy className="h-6 w-6 text-primary-navy" />}
-                        {service.icon === 'graduation-cap' && <GraduationCap className="h-6 w-6 text-primary-navy" />}
-                        {service.icon === 'link' && <LinkIcon className="h-6 w-6 text-primary-navy" />}
-                        {service.icon === 'wifi' && <Wifi className="h-6 w-6 text-primary-navy" />}
-                        {service.icon === 'network' && <Network className="h-6 w-6 text-primary-navy" />}
-                      </div>
-                      <h2 className="text-xl font-semibold text-primary-navy group-hover:text-primary-navy-dark transition-colors">
-                        {service.name}
-                      </h2>
-                    </div>
-                    <p className="text-soft-text mb-4">{service.shortDesc}</p>
-                    <div className="space-y-2 mb-4">
-                      {service.benefits.slice(0, 3).map((benefit, index) => (
-                        <div key={index} className="flex items-center gap-2 text-sm text-soft-text">
-                          <div className="h-4 w-4 rounded-full bg-primary-navy text-white flex items-center justify-center flex-shrink-0">
-                            <svg className="h-2 w-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
-                            </svg>
-                          </div>
-                          <span>{benefit}</span>
-                        </div>
-                      ))}
-                    </div>
-                    <Link to={`/services/${service.id}`} className="inline-flex items-center gap-1 text-primary-navy font-medium hover:underline mt-2">
-                      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>
-                    </Link>
+            {services.map((service) => {
+              const Icon = iconMap[service.icon]
+              return (
+                <div key={service.id} className="group flex flex-col rounded-md border border-border bg-white p-6 shadow-sm hover:shadow-md hover:border-primary-navy/30 transition-all">
+                  <div className="flex h-12 w-12 items-center justify-center rounded-md bg-primary-navy/10 mb-5 flex-shrink-0">
+                    {Icon && <Icon className="h-6 w-6 text-primary-navy" aria-hidden="true" />}
                   </div>
+                  <h2 className="text-xl font-semibold text-primary-navy mb-3">{service.name}</h2>
+                  <p className="text-soft-text text-sm leading-relaxed flex-1 mb-6">{service.homeDesc}</p>
+                  <Link
+                    to={`/services/${service.id}`}
+                    className="inline-flex items-center gap-1.5 text-sm font-semibold text-primary-navy hover:text-primary-blue transition-colors"
+                    aria-label={`Learn more about ${service.name}`}
+                  >
+                    Learn more
+                    <ArrowRight className="h-4 w-4" aria-hidden="true" />
+                  </Link>
                 </div>
-              </div>
-            ))}
+              )
+            })}
           </div>
         </div>
       </section>
 
       {/* CTA */}
-      <section className="bg-section-alt py-16">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
-          <div>
-            <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>
+      <section className="bg-primary-navy py-14 text-white">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6">
+            <div>
+              <h2 className="text-3xl md:text-4xl font-bold mb-3">Not sure where to start?</h2>
+              <p className="text-white/70 max-w-2xl">
+                Tell us about your environment and we'll cut through the options to tell you what actually fits.
+              </p>
+            </div>
             <Link
               to="/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"
+              className="inline-flex h-11 items-center justify-center gap-2 rounded-md bg-white px-6 text-sm font-semibold text-primary-navy hover:bg-section-alt transition-colors flex-shrink-0"
             >
-              Request Consultation
+              Get a Free Quote
+              <ArrowRight className="h-4 w-4" aria-hidden="true" />
             </Link>
           </div>
         </div>