From 5d67149a51003fd03f6f84fb83e036441af03fce Mon Sep 17 00:00:00 2001
From: null <koga.industries@gmail.com>
Date: Sun, 17 May 2026 17:01:08 -0500
Subject: [PATCH] feat: add JointLogoWhite trust bar + selective service detail
 images (closes #48)

---
 src/data/services.js        |  3 +++
 src/pages/Home.jsx          | 27 +++++++++++++++++++++++++++
 src/pages/ServiceDetail.jsx | 12 ++++++++++++
 3 files changed, 42 insertions(+)

diff --git a/src/data/services.js b/src/data/services.js
index 4e3ca1d..2d18831 100644
--- a/src/data/services.js
+++ b/src/data/services.js
@@ -36,6 +36,7 @@ As an 8x8 Certified Partner, we deliver enterprise-grade contact center solution
 
 We support Cisco Webex Contact Center, 8x8 Contact Center, and other leading platforms.`,
     icon: 'users',
+    image: '/assets/Modern call center in action.png',
     benefits: [
       'Omnichannel customer interactions',
       'Real-time analytics and reporting',
@@ -98,6 +99,7 @@ We support Cisco Webex Contact Center, 8x8 Contact Center, and other leading pla
     homeDesc: 'Bad cabling means dropped calls and slow networks. We build it right the first time.',
     fullDesc: 'Our infrastructure cabling services ensure your physical network foundation supports current and future needs. We design and install copper and fiber optic cabling systems that provide high-performance, scalable connectivity for your entire organization.',
     icon: 'link',
+    image: '/assets/Cabling.png',
     benefits: [
       'Cat6/Cat6a and fiber optic installations',
       'Data center cabling solutions',
@@ -138,6 +140,7 @@ We support Cisco Webex Contact Center, 8x8 Contact Center, and other leading pla
     homeDesc: 'A network that doesn\'t go down when it matters. Secure, fast, and built for your workload.',
     fullDesc: 'Build a reliable local network infrastructure that supports your business operations. Our networking solutions include routing, switching, firewall configuration, and network segmentation to ensure secure, high-performance connectivity throughout your organization.',
     icon: 'network',
+    image: '/assets/Local Networking.png',
     benefits: [
       'Enterprise-grade routing and switching',
       'Network security and segmentation',
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index 2b815dd..abf9b10 100644
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -93,6 +93,33 @@ const Home = () => {
         </div>
       </section>
 
+      {/* JointLogoWhite Trust Section */}
+      <section className="bg-primary-navy py-16 md:py-24">
+        <div className="container mx-auto px-4 text-center">
+          <div className="max-w-3xl mx-auto">
+            <h2 className="text-3xl md:text-4xl font-bold text-white mb-6">Certified Excellence</h2>
+            <div className="flex flex-col md:flex-row items-center justify-center gap-12">
+              <div className="flex-1">
+                <img
+                  src="/assets/JointLogoWhite.png"
+                  alt="Joint Logo White - 8x8 and Cisco Partner"
+                  className="max-h-32 w-auto object-contain mx-auto"
+                />
+              </div>
+              <div className="flex-1 text-left">
+                <h3 className="text-xl font-semibold text-white mb-4">Official 8x8 Certified Partner</h3>
+                <p className="text-teal-100 mb-4">
+                  JointLogoWhite certification demonstrates our commitment to delivering enterprise-grade communications solutions. We meet rigorous standards for UCaaS, contact center, and collaboration platforms.
+                </p>
+                <p className="text-teal-100">
+                  Our 8x8 expertise spans cloud PBX, VoIP implementation, and comprehensive support — ensuring your business communications infrastructure is built on a proven foundation.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
       {/* Trust Signals Section */}
       <section className="bg-section-alt py-16 md:py-24">
         <div className="container mx-auto px-4">
diff --git a/src/pages/ServiceDetail.jsx b/src/pages/ServiceDetail.jsx
index 0f75def..853bbed 100644
--- a/src/pages/ServiceDetail.jsx
+++ b/src/pages/ServiceDetail.jsx
@@ -25,6 +25,18 @@ const ServiceDetail = () => {
       {/* Page Hero */}
       <section className="mb-16">
         <h1 className="text-4xl md:text-5xl font-bold text-primary-navy mb-6">{service.name}</h1>
+        {service.image && (
+          <div className="relative mb-8 rounded-xl overflow-hidden">
+            <img
+              src={service.image}
+              alt={service.id === 'infrastructure-cabling' ? 'Professional structured cabling installation'
+                : service.id === 'contact-center' ? 'Modern contact center operations with agents and dashboard'
+                : 'Network engineer with laptop configuring infrastructure'}
+              className="w-full h-64 md:h-80 object-cover"
+            />
+            <div className="absolute inset-0 bg-gradient-to-t from-primary-navy/60 to-transparent rounded-xl" />
+          </div>
+        )}
         <p className="text-xl text-soft-text max-w-3xl">{service.shortDesc}</p>
       </section>