From f03229dd50acf8117f3b60d8283b39003ba21524 Mon Sep 17 00:00:00 2001
From: null <koga.industries@gmail.com>
Date: Tue, 12 May 2026 02:45:25 -0500
Subject: [PATCH] =?UTF-8?q?feat:=20Phase=203=20Batch=204=20=E2=80=94=20inn?=
 =?UTF-8?q?er=20pages=20layout=20system=20with=20consistent=20hero/card/CT?=
 =?UTF-8?q?A=20pattern=20(v0.3.4)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                 |  2 +-
 src/pages/8x8.jsx            | 14 +++++++-------
 src/pages/About.jsx          | 16 ++++++++--------
 src/pages/Industries.jsx     | 21 +++++++++++++++++++--
 src/pages/IndustryDetail.jsx |  4 ++--
 src/pages/ServiceDetail.jsx  |  6 +++---
 src/pages/Services.jsx       | 18 +++++++++++-------
 7 files changed, 51 insertions(+), 30 deletions(-)

diff --git a/package.json b/package.json
index 830f74d..7844705 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "queuenorth-website",
   "private": true,
-  "version": "0.3.3",
+  "version": "0.3.4",
   "type": "module",
   "scripts": {
     "dev": "concurrently \"vite\" \"node server/index.js\"",
diff --git a/src/pages/8x8.jsx b/src/pages/8x8.jsx
index 7941bbb..a720ac1 100644
--- a/src/pages/8x8.jsx
+++ b/src/pages/8x8.jsx
@@ -34,7 +34,7 @@ const EightXEight = () => {
       {/* Our Expertise */}
       <section className="mb-16">
         <h2 className="text-3xl font-bold text-primary-navy mb-8 text-center">8x8 Expertise</h2>
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
           {[
             'VoIP Implementation',
             'Cloud PBX Migration',
@@ -45,13 +45,13 @@ const EightXEight = () => {
             'System Integration',
             'Ongoing Support',
           ].map((expertise, index) => (
-            <div key={index} className="flex items-center gap-3">
-              <div className="h-6 w-6 rounded-full bg-primary-navy text-white flex items-center justify-center flex-shrink-0">
-                <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <div key={index} className="flex items-center gap-2 p-3 rounded-lg 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>
-              <span className="text-lg text-text">{expertise}</span>
+              <span className="text-sm font-medium text-text">{expertise}</span>
             </div>
           ))}
         </div>
@@ -60,7 +60,7 @@ const EightXEight = () => {
       {/* Benefits */}
       <section className="mb-16">
         <h2 className="text-3xl font-bold text-primary-navy mb-8 text-center">Why Choose 8x8</h2>
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
           {[
             { title: 'Scalability', desc: 'Easily scale your communications as your business grows' },
             { title: 'Reliability', desc: '99.999% uptime guarantee for mission-critical communications' },
@@ -69,7 +69,7 @@ const EightXEight = () => {
             { title: 'Analytics', desc: 'Real-time insights and reporting to optimize performance' },
             { title: 'Support', desc: '24/7 expert support to keep your communications running' },
           ].map((benefit, index) => (
-            <div key={index} className="p-6 rounded-lg border border-border bg-card shadow-sm">
+            <div key={index} className="p-6 rounded-lg border border-border bg-card shadow-sm hover:shadow-md transition-shadow">
               <h3 className="text-xl font-semibold text-primary-navy mb-3">{benefit.title}</h3>
               <p className="text-soft-text">{benefit.desc}</p>
             </div>
diff --git a/src/pages/About.jsx b/src/pages/About.jsx
index 8965e67..9caaae1 100644
--- a/src/pages/About.jsx
+++ b/src/pages/About.jsx
@@ -37,7 +37,7 @@ const About = () => {
       {/* Our Values */}
       <section className="mb-16">
         <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-3 gap-6">
+        <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' },
@@ -46,7 +46,7 @@ const About = () => {
             { 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-lg border border-border bg-card shadow-sm">
+            <div key={index} className="p-6 rounded-lg 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>
@@ -56,8 +56,8 @@ const About = () => {
 
       {/* Our Expertise */}
       <section className="mb-16">
-        <h2 className="text-3xl font-bold text-primary-navy mb-8">Our Expertise</h2>
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <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',
@@ -68,13 +68,13 @@ const About = () => {
             'Disaster Recovery Planning',
             '24/7 Support & Monitoring',
           ].map((expertise, index) => (
-            <div key={index} className="flex items-center gap-3">
-              <div className="h-6 w-6 rounded-full bg-primary-navy text-white flex items-center justify-center flex-shrink-0">
-                <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <div key={index} className="flex items-center gap-2 p-3 rounded-lg 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>
-              <span className="text-lg text-text">{expertise}</span>
+              <span className="text-sm font-medium text-text">{expertise}</span>
             </div>
           ))}
         </div>
diff --git a/src/pages/Industries.jsx b/src/pages/Industries.jsx
index 9b108b7..cf77782 100644
--- a/src/pages/Industries.jsx
+++ b/src/pages/Industries.jsx
@@ -12,7 +12,7 @@ const Industries = () => {
       </section>
 
       {/* Industries Grid */}
-      <section className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+      <section className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-6">
         {industries.map((industry) => (
           <div key={industry.id} className="group cursor-pointer">
             <div className="rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow bg-card border border-border">
@@ -28,7 +28,24 @@ const Industries = () => {
                   </h3>
                 </div>
                 <p className="text-soft-text mb-4">{industry.shortDesc}</p>
-                <a href={`/industries/${industry.id}`} className="text-primary-navy font-medium hover:underline inline-flex items-center gap-1">
+                
+                <div className="mb-4">
+                  <h4 className="text-sm font-semibold text-text mb-2">Pain Points We Solve</h4>
+                  <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>
+                
+                <a href={`/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" />
diff --git a/src/pages/IndustryDetail.jsx b/src/pages/IndustryDetail.jsx
index b7c5d9a..ad69be2 100644
--- a/src/pages/IndustryDetail.jsx
+++ b/src/pages/IndustryDetail.jsx
@@ -39,7 +39,7 @@ const IndustryDetail = ({ name }) => {
 
           <section className="mb-12">
             <h2 className="text-2xl font-bold text-primary-navy mb-4">Pain Points We Solve</h2>
-            <div className="space-y-4">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
               {industry.painPoints.map((painPoint, index) => (
                 <div key={index} className="flex items-start gap-3">
                   <div className="h-6 w-6 rounded-full bg-red-100 text-red-700 flex items-center justify-center flex-shrink-0 mt-1">
@@ -55,7 +55,7 @@ const IndustryDetail = ({ name }) => {
 
           <section className="mb-12">
             <h2 className="text-2xl font-bold text-primary-navy mb-4">Our Solutions</h2>
-            <div className="space-y-4">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
               {industry.solutions.map((solution, index) => (
                 <div key={index} className="flex items-start gap-3">
                   <div className="h-6 w-6 rounded-full bg-green-100 text-green-700 flex items-center justify-center flex-shrink-0 mt-1">
diff --git a/src/pages/ServiceDetail.jsx b/src/pages/ServiceDetail.jsx
index 67e24e9..e0c9c9d 100644
--- a/src/pages/ServiceDetail.jsx
+++ b/src/pages/ServiceDetail.jsx
@@ -38,8 +38,8 @@ const ServiceDetail = ({ name }) => {
           </section>
 
           <section className="mb-12">
-            <h2 className="text-2xl font-bold text-primary-navy mb-4">How Queue North Helps</h2>
-            <div className="space-y-4">
+            <h2 className="text-2xl font-bold text-primary-navy mb-4">Key Benefits</h2>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
               {service.benefits.map((benefit, index) => (
                 <div key={index} className="flex items-start gap-3">
                   <div className="h-6 w-6 rounded-full bg-primary-navy text-white flex items-center justify-center flex-shrink-0 mt-1">
@@ -55,7 +55,7 @@ const ServiceDetail = ({ name }) => {
 
           <section className="mb-12">
             <h2 className="text-2xl font-bold text-primary-navy mb-4">Ideal For</h2>
-            <div className="space-y-4">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
               {service.idealFor.map((item, index) => (
                 <div key={index} className="flex items-start gap-3">
                   <div className="h-6 w-6 rounded-full bg-primary-navy text-white flex items-center justify-center flex-shrink-0 mt-1">
diff --git a/src/pages/Services.jsx b/src/pages/Services.jsx
index a6103fb..e3e664a 100644
--- a/src/pages/Services.jsx
+++ b/src/pages/Services.jsx
@@ -28,15 +28,19 @@ const Services = () => {
                   </h3>
                 </div>
                 <p className="text-soft-text mb-4">{service.shortDesc}</p>
-                <p className="text-sm text-soft-text mb-4">{service.fullDesc}</p>
-                <div className="flex flex-wrap gap-2 mb-4">
-                  {service.benefits.slice(0, 2).map((benefit, index) => (
-                    <span key={index} className="px-2 py-1 bg-section-alt rounded text-xs text-soft-text">
-                      {benefit}
-                    </span>
+                <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>
-                <a href={`/services/${service.id}`} className="text-primary-navy font-medium hover:underline inline-flex items-center gap-1">
+                <a href={`/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" />