From a8765990efdc80684b20f2681f3a609ae609bd7b Mon Sep 17 00:00:00 2001
From: null <koga.industries@gmail.com>
Date: Mon, 18 May 2026 13:45:39 -0500
Subject: [PATCH] mobile ui fixes

---
 src/pages/About.jsx          | 283 +++++++++++++++++++++--------------
 src/pages/Industries.jsx     |   4 +-
 src/pages/IndustryDetail.jsx |   6 +-
 src/pages/ServiceDetail.jsx  |   2 +-
 src/pages/Services.jsx       |   2 +-
 src/pages/Support.jsx        |   8 +-
 6 files changed, 184 insertions(+), 121 deletions(-)

diff --git a/src/pages/About.jsx b/src/pages/About.jsx
index 6996cbf..88a18fc 100644
--- a/src/pages/About.jsx
+++ b/src/pages/About.jsx
@@ -1,152 +1,215 @@
 import { Helmet } from 'react-helmet-async'
 import { Link } from 'react-router-dom'
+import { ArrowRight, Award, BadgeCheck, CheckCircle2, Compass, Cpu, Handshake, Headphones, Route, ShieldCheck, Users, Wrench } from 'lucide-react'
+
+const proofPoints = [
+  { label: '25+ years', detail: 'Communications and infrastructure experience', icon: Award },
+  { label: '8x8 certified', detail: 'Sales, engineering, build, deployment, and support', icon: BadgeCheck },
+  { label: 'Cisco certified', detail: 'Networking and communications implementation', icon: ShieldCheck },
+  { label: 'Veteran owned', detail: 'Disciplined delivery and direct accountability', icon: Users },
+]
+
+const operatingPrinciples = [
+  {
+    title: 'Own the outcome',
+    desc: 'We stay close to implementation details so decisions survive real production conditions.',
+    icon: Wrench,
+  },
+  {
+    title: 'Recommend what fits',
+    desc: 'We align platforms, budgets, users, and support realities before anyone signs a contract.',
+    icon: Handshake,
+  },
+  {
+    title: 'Design for operations',
+    desc: 'Documentation, migration planning, training, and escalation paths are part of the work.',
+    icon: Route,
+  },
+  {
+    title: 'Support after go-live',
+    desc: 'Our team remains accountable after deployment, when reliability starts to matter most.',
+    icon: Headphones,
+  },
+]
+
+const capabilities = [
+  'UCaaS and cloud PBX migration',
+  'Contact center implementation',
+  'Network infrastructure and cabling',
+  'Wireless access design',
+  'Vendor-neutral consulting',
+  'Managed support and monitoring',
+  'Cloud migration support',
+  'Disaster recovery planning',
+]
 
 const About = () => {
   return (
     <>
       <Helmet>
-        <title>About Queue North | Veteran-Owned 8x8 Partner — 25+ Years of Service</title>
-        <meta name="description" content="Queue North Technologies is a veteran-owned 8x8 and Cisco Certified Partner with 25+ years of experience. Learn our story, values, and expertise." />
-        <meta property="og:title" content="About Queue North | Veteran-Owned 8x8 Partner — 25+ Years of Service" />
-        <meta property="og:description" content="Veteran-owned 8x8 and Cisco Certified Partner with 25+ years of experience." />
+        <title>About Queue North | Veteran-Owned 8x8 Partner - 25+ Years of Service</title>
+        <meta name="description" content="Queue North Technologies is a veteran-owned 8x8 and Cisco Certified Partner with 25+ years of experience in communications, contact center, support, and network infrastructure." />
+        <meta property="og:title" content="About Queue North | Veteran-Owned 8x8 Partner - 25+ Years of Service" />
+        <meta property="og:description" content="Veteran-owned 8x8 and Cisco Certified Partner with 25+ years of communications and infrastructure experience." />
         <meta property="og:url" content="https://queuenorth.com/about" />
         <meta property="og:type" content="website" />
         <meta property="og:image" content="https://queuenorth.com/assets/og-image.png" />
         <meta property="og:site_name" content="Queue North Technologies" />
       </Helmet>
+
       {/* Page Hero */}
-      <section className="bg-background py-16 lg:py-24">
+      <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">About Queue North</h1>
-            <p className="text-xl text-soft-text max-w-3xl">
-              We're communications and infrastructure partners who cut through the vendor noise to deliver what actually works for your business.
-            </p>
-          </div>
-        </div>
-      </section>
-
-      {/* Company Story */}
-      <section className="bg-background py-16">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="max-w-3xl">
-              <h2 className="text-3xl font-bold text-primary-navy mb-4">Our Story</h2>
-              <p className="text-lg text-soft-text mb-6 leading-relaxed">
-                Founded by military veterans, Queue North Technologies began with a simple mission: help businesses navigate the complex world of communications technology. What started as a small team of communications specialists has grown into a full-service provider for SMB and enterprise organizations across multiple industries.
-              </p>
-              <p className="text-lg text-soft-text mb-6 leading-relaxed">
-                Our journey began when our founders saw too many businesses paying too much for solutions that didn't fit their actual needs. We believed in a different approach — one focused on understanding your business challenges first, then selecting or integrating the right technologies to solve them.
-              </p>
-              <p className="text-lg text-soft-text leading-relaxed">
-                Today, we continue that mission as an 8x8 Certified Partner, helping organizations modernize their communications, streamline their operations, and focus on what matters most — their customers and their growth.
-              </p>
-              <p className="text-lg text-soft-text mt-4 leading-relaxed">
-                We continue the mission — bringing the same discipline, reliability, and commitment to every client relationship that we brought to our service.
-              </p>
-          </div>
-        </div>
-      </section>
-
-      {/* The Meaning Behind Queue North */}
-      <section className="bg-primary-navy py-20">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="text-center mb-12">
-            <h2 className="text-3xl md:text-4xl font-bold text-white mb-4">The Meaning Behind Queue North</h2>
-            <p className="text-lg text-white/70 max-w-2xl mx-auto leading-relaxed">
-              Queue is stability. North is responsible progress. The compass is how we guide customers with both.
-            </p>
-          </div>
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-4xl mx-auto">
-            <div className="bg-white/10 border border-white/20 rounded-md p-8">
-              <div className="w-12 h-12 bg-primary-cyan/20 rounded-md flex items-center justify-center mb-5">
-                <svg className="h-6 w-6 text-primary-cyan" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
-                  <rect x="7" y="7" width="10" height="10" rx="1" strokeLinejoin="round" />
-                  <path strokeLinecap="round" strokeLinejoin="round" d="M9 7V5M12 7V5M15 7V5M9 17v2M12 17v2M15 17v2M7 9H5M7 12H5M7 15H5M17 9h2M17 12h2M17 15h2" />
-                </svg>
+          <div className="grid grid-cols-1 lg:grid-cols-[1fr_0.75fr] gap-10 lg:gap-14 items-center">
+            <div>
+              <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">
+                <Compass className="h-4 w-4" aria-hidden="true" />
+                About Queue North
               </div>
-              <h3 className="text-xl font-bold text-primary-cyan mb-3">Queue</h3>
-              <p className="text-white/80 leading-relaxed">
-                Rooted in technology that works — proven, stable, and repeatable. We focus on environments that behave predictably in real production conditions.
+              <h1 className="mt-6 text-4xl md:text-5xl lg:text-6xl font-bold leading-tight">
+                Accountable communications infrastructure, built around how your business actually works.
+              </h1>
+              <p className="mt-6 text-lg md:text-xl text-white/75 max-w-3xl leading-relaxed">
+                Queue North helps organizations choose, implement, and support the phone, contact center, network, and IT systems that keep daily operations moving.
               </p>
+              <div className="mt-8 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">
+                  Start a Conversation
+                  <ArrowRight className="h-4 w-4" aria-hidden="true" />
+                </Link>
+                <Link to="/services" 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">
+                  View Services
+                </Link>
+              </div>
             </div>
-            <div className="bg-white/10 border border-white/20 rounded-md p-8">
-              <div className="w-12 h-12 bg-primary-cyan/20 rounded-md flex items-center justify-center mb-5">
-                <svg className="h-6 w-6 text-primary-cyan" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-                  <path strokeLinecap="round" strokeLinejoin="round" d="M5 10l7-7m0 0l7 7m-7-7v18" />
-                </svg>
+
+            <div className="rounded-md border border-white/15 bg-white/10 p-6 shadow-xl backdrop-blur">
+              <h2 className="text-lg font-semibold mb-5">At a glance</h2>
+              <div className="space-y-4">
+                {proofPoints.map((point) => {
+                  const Icon = point.icon
+                  return (
+                    <div key={point.label} className="flex gap-4">
+                      <span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-md bg-white/10 text-primary-cyan">
+                        <Icon className="h-5 w-5" aria-hidden="true" />
+                      </span>
+                      <div>
+                        <h3 className="font-semibold">{point.label}</h3>
+                        <p className="text-sm text-white/70">{point.detail}</p>
+                      </div>
+                    </div>
+                  )
+                })}
               </div>
-              <h3 className="text-xl font-bold text-primary-cyan mb-3">North</h3>
-              <p className="text-white/80 leading-relaxed">
-                A <strong className="text-white font-semibold">responsible direction forward</strong> — evaluating and adopting new technology carefully, with governance, security, and long-term ownership in mind.
-              </p>
             </div>
           </div>
         </div>
       </section>
 
-      {/* Our Values */}
-      <section className="bg-background py-16">
+      {/* Operating Model */}
+      <section className="bg-background py-16 lg:py-20">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <h2 className="text-3xl font-bold text-primary-navy mb-8 text-center">Our Values</h2>
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-            {[
-              { title: 'Business First', desc: 'We focus on your business outcomes, not just technology' },
-              { title: 'Honesty', desc: 'We tell you what you need, not just what we can sell' },
-              { title: 'Partnership', desc: 'We work with you, not just for you' },
-              { title: 'Expertise', desc: 'Our team has real, proven experience in your industry' },
-              { title: 'Reliability', desc: 'When we say we will do something, we do it' },
-              { title: 'Support', desc: 'Our job doesn\'t end when installation completes' },
-            ].map((value, index) => (
-              <div key={index} className="p-6 rounded-md border border-border bg-card shadow-sm hover:shadow-md transition-shadow">
-                <h3 className="text-xl font-semibold text-primary-navy mb-3">{value.title}</h3>
-                <p className="text-soft-text">{value.desc}</p>
-              </div>
-            ))}
+          <div className="grid grid-cols-1 lg:grid-cols-[0.8fr_1.2fr] gap-10 lg:gap-14 items-start">
+            <div>
+              <p className="text-sm font-semibold uppercase tracking-wide text-primary-blue">How we work</p>
+              <h2 className="mt-3 text-3xl md:text-4xl font-bold text-primary-navy">
+                We bridge strategy, deployment, and long-term ownership.
+              </h2>
+              <p className="mt-5 text-lg leading-relaxed text-soft-text">
+                Many businesses are asked to pick platforms before anyone has mapped the operational reality. Queue North starts with the environment, the people using it, and the support model that has to carry it after launch.
+              </p>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
+              {operatingPrinciples.map((item) => {
+                const Icon = item.icon
+                return (
+                  <div key={item.title} className="rounded-md border border-border bg-white p-6 shadow-sm">
+                    <span className="flex h-11 w-11 items-center justify-center rounded-md bg-section-alt text-primary-navy">
+                      <Icon className="h-5 w-5" aria-hidden="true" />
+                    </span>
+                    <h3 className="mt-5 text-xl font-semibold text-primary-navy">{item.title}</h3>
+                    <p className="mt-3 text-sm leading-relaxed text-soft-text">{item.desc}</p>
+                  </div>
+                )
+              })}
+            </div>
           </div>
         </div>
       </section>
 
-      {/* Our Expertise */}
-      <section className="bg-background py-16">
+      {/* Meaning */}
+      <section className="bg-white py-16 lg:py-20 border-y border-border">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <h2 className="text-3xl font-bold text-primary-navy mb-8 text-center">Our Expertise</h2>
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-            {[
-              '8x8 Certified Partner',
-              'VoIP and UCaaS Solutions',
-              'Contact Center Implementation',
-              'Network Infrastructure',
-              'Cloud Migration',
-              'Vendor-Neutral Consulting',
-              'Disaster Recovery Planning',
-              '24/7 Support & Monitoring',
-            ].map((expertise, index) => (
-              <div key={index} className="flex items-center gap-2 p-3 rounded-md border border-border bg-card">
-                <div className="h-5 w-5 rounded-full bg-primary-navy text-white flex items-center justify-center flex-shrink-0">
-                  <svg className="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
-                  </svg>
+          <div className="grid grid-cols-1 lg:grid-cols-[0.9fr_1.1fr] gap-10 lg:gap-14 items-start">
+            <div>
+              <p className="text-sm font-semibold uppercase tracking-wide text-primary-blue">The name</p>
+              <h2 className="mt-3 text-3xl md:text-4xl font-bold text-primary-navy">
+                Queue is stability. North is responsible progress.
+              </h2>
+            </div>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
+              <div className="rounded-md border border-border bg-background p-6">
+                <Cpu className="h-7 w-7 text-primary-blue" aria-hidden="true" />
+                <h3 className="mt-5 text-xl font-semibold text-primary-navy">Queue</h3>
+                <p className="mt-3 text-sm leading-relaxed text-soft-text">
+                  Proven, repeatable technology that behaves predictably when customers, staff, and operations depend on it.
+                </p>
+              </div>
+              <div className="rounded-md border border-border bg-background p-6">
+                <Compass className="h-7 w-7 text-primary-blue" aria-hidden="true" />
+                <h3 className="mt-5 text-xl font-semibold text-primary-navy">North</h3>
+                <p className="mt-3 text-sm leading-relaxed text-soft-text">
+                  A clear direction forward, with security, governance, supportability, and long-term ownership built into the plan.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Capabilities */}
+      <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 lg:grid-cols-[0.75fr_1.25fr] gap-10 lg:gap-14 items-start">
+            <div>
+              <p className="text-sm font-semibold uppercase tracking-wide text-primary-blue">Expertise</p>
+              <h2 className="mt-3 text-3xl md:text-4xl font-bold text-primary-navy">
+                Practical coverage from assessment through support.
+              </h2>
+              <p className="mt-5 text-lg leading-relaxed text-soft-text">
+                We work across the pieces that make communications reliable: platforms, networks, users, support process, and vendor coordination.
+              </p>
+            </div>
+
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+              {capabilities.map((item) => (
+                <div key={item} className="flex items-center gap-3 rounded-md border border-border bg-white p-4">
+                  <CheckCircle2 className="h-5 w-5 shrink-0 text-primary-blue" aria-hidden="true" />
+                  <span className="text-sm font-medium text-text">{item}</span>
                 </div>
-                <span className="text-sm font-medium text-text">{expertise}</span>
-              </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">Ready to Learn More?</h2>
-            <p className="text-xl text-soft-text mb-8 max-w-2xl mx-auto">
-              Schedule a free consultation with our communications experts to discuss your 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">Need a cleaner path forward?</h2>
+              <p className="mt-3 text-white/70 max-w-2xl">
+                Talk with a team that can help evaluate the current state, recommend the right path, and stay accountable after deployment.
+              </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-5 text-sm font-semibold text-primary-navy hover:bg-section-alt transition-colors"
             >
               Request Consultation
+              <ArrowRight className="h-4 w-4" aria-hidden="true" />
             </Link>
           </div>
         </div>
diff --git a/src/pages/Industries.jsx b/src/pages/Industries.jsx
index 45cf9e2..f987a48 100644
--- a/src/pages/Industries.jsx
+++ b/src/pages/Industries.jsx
@@ -25,7 +25,7 @@ const Industries = () => {
         <meta property="og:site_name" content="Queue North Technologies" />
       </Helmet>
       {/* Page Hero */}
-      <section className="bg-background py-16 md:py-24">
+      <section className="bg-background py-12 lg:py-20">
         <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>
@@ -39,7 +39,7 @@ const Industries = () => {
       {/* Industries Grid */}
       <section className="bg-background py-16">
         <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-2 gap-6">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
             {industries.map((industry) => {
               const IconComponent = industryIcons[industry.icon] || Building2
               return (
diff --git a/src/pages/IndustryDetail.jsx b/src/pages/IndustryDetail.jsx
index 0f85109..5ebcc1b 100644
--- a/src/pages/IndustryDetail.jsx
+++ b/src/pages/IndustryDetail.jsx
@@ -10,7 +10,7 @@ const IndustryDetail = () => {
 
   if (!industry) {
     return (
-      <section className="bg-background py-16 md:py-24">
+      <section className="bg-background py-12 lg:py-20">
         <Helmet>
           <title>Industry Not Found | Queue North Technologies</title>
           <meta name="description" content="The industry page you are looking for does not exist." />
@@ -45,7 +45,7 @@ const IndustryDetail = () => {
         <meta property="og:site_name" content="Queue North Technologies" />
       </Helmet>
       {/* Page Hero */}
-      <section className="bg-background py-16 md:py-24">
+      <section className="bg-background py-12 lg:py-20">
         <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">{industry.name}</h1>
@@ -102,7 +102,7 @@ const IndustryDetail = () => {
 
             {/* Right Column - Sidebar */}
             <div className="lg:col-span-1">
-              <Card className="sticky top-24">
+              <Card className="lg:sticky top-24">
                 <CardHeader>
                   <CardTitle className="text-primary-navy">Industry Insights</CardTitle>
                 </CardHeader>
diff --git a/src/pages/ServiceDetail.jsx b/src/pages/ServiceDetail.jsx
index 41ae27c..d3fc6d3 100644
--- a/src/pages/ServiceDetail.jsx
+++ b/src/pages/ServiceDetail.jsx
@@ -141,7 +141,7 @@ const ServiceDetail = () => {
 
             {/* Right Column - Sidebar */}
             <div className="lg:col-span-1">
-              <Card className="sticky top-24">
+              <Card className="lg:sticky top-24">
                 <CardHeader>
                   <CardTitle className="text-primary-navy">Quick Info</CardTitle>
                 </CardHeader>
diff --git a/src/pages/Services.jsx b/src/pages/Services.jsx
index 320fc03..3ab19fa 100644
--- a/src/pages/Services.jsx
+++ b/src/pages/Services.jsx
@@ -33,7 +33,7 @@ const Services = () => {
         <script type="application/ld+json">{JSON.stringify(serviceLd)}</script>
       </Helmet>
       {/* Page Hero */}
-      <section className="bg-background py-16 lg:py-24">
+      <section className="bg-background py-12 lg:py-20">
         <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>
diff --git a/src/pages/Support.jsx b/src/pages/Support.jsx
index e5c31e2..93de4f8 100644
--- a/src/pages/Support.jsx
+++ b/src/pages/Support.jsx
@@ -219,8 +219,8 @@ const Support = () => {
       <section id="support-request" 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 lg:grid-cols-[0.9fr_1.1fr] gap-8 lg:gap-10 items-start">
-            {/* Left - Info */}
-            <div className="space-y-6">
+            {/* Left - Info — order 2 on mobile so form appears first */}
+            <div className="order-2 lg:order-1 space-y-6">
               <div className="rounded-md border border-border bg-white p-6 shadow-sm">
                 <div className="flex items-start gap-4">
                   <span className="flex h-11 w-11 shrink-0 items-center justify-center rounded-md bg-primary-navy text-white">
@@ -288,8 +288,8 @@ const Support = () => {
               </div>
             </div>
 
-            {/* Right - Form */}
-            <div>
+            {/* Right - Form — order 1 on mobile so it appears first */}
+            <div className="order-1 lg:order-2">
               <form onSubmit={handleSubmit} noValidate className={`rounded-md border border-border bg-white p-6 shadow-sm lg:p-8 space-y-5 ${isSubmitting ? 'opacity-70 pointer-events-none' : ''}`}>
                 <div className="border-b border-border pb-5">
                   <h2 className="text-2xl font-bold text-primary-navy">Submit a Request</h2>