From c17ac83b52616bb4d6e63491568bcf3c053294be Mon Sep 17 00:00:00 2001
From: null <koga.industries@gmail.com>
Date: Mon, 25 May 2026 18:33:19 -0500
Subject: [PATCH] services

---
 src/components/layout/Footer.jsx |  39 +++++++++-
 src/pages/Home.jsx               | 118 +++++++++++++++++++++----------
 2 files changed, 115 insertions(+), 42 deletions(-)

diff --git a/src/components/layout/Footer.jsx b/src/components/layout/Footer.jsx
index c5cf408..328fa49 100644
--- a/src/components/layout/Footer.jsx
+++ b/src/components/layout/Footer.jsx
@@ -41,7 +41,7 @@ const Footer = () => {
   return (
     <footer className="bg-primary-navy text-white">
       <div className="container mx-auto px-4 pt-24 pb-12">
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-8">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
           {/* Company Info */}
           <div>
             <Link to="/" className="inline-flex items-center gap-3 mb-3 group" aria-label="Queue North Technologies Home">
@@ -138,12 +138,45 @@ const Footer = () => {
           </div>
         </div>
 
+        {/* Veteran Owned & Operated */}
+        <div className="border-t border-white/10 py-10 mt-8">
+          <div className="flex items-center gap-4 mb-8">
+            <div className="flex-1 h-px bg-white/10" />
+            <p className="text-primary-cyan text-xs font-semibold uppercase tracking-[0.2em] whitespace-nowrap">
+              Veteran Owned &amp; Operated
+            </p>
+            <div className="flex-1 h-px bg-white/10" />
+          </div>
+          <div className="flex justify-center gap-6 flex-wrap">
+            <div className="flex flex-col items-center gap-3 bg-white/5 border border-white/10 rounded-xl px-8 py-5 min-w-[160px]">
+              <img
+                src="/assets/brand/usmc-logo.png"
+                alt="United States Marine Corps seal"
+                className="h-14 w-auto brightness-0 invert opacity-90"
+              />
+              <span className="text-navy-light text-xs font-medium tracking-wide text-center uppercase leading-snug">
+                United States<br />Marine Corps
+              </span>
+            </div>
+            <div className="flex flex-col items-center gap-3 bg-white/5 border border-white/10 rounded-xl px-8 py-5 min-w-[160px]">
+              <img
+                src="/assets/brand/usaf-logo.png"
+                alt="United States Air Force seal"
+                className="h-14 w-auto brightness-0 invert opacity-90"
+              />
+              <span className="text-navy-light text-xs font-medium tracking-wide text-center uppercase leading-snug">
+                United States<br />Air Force
+              </span>
+            </div>
+          </div>
+        </div>
+
         {/* Bottom */}
-        <div className="border-t border-white/10 pt-8 mt-8">
+        <div className="border-t border-white/10 pt-8">
           <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
             <div className="flex flex-col gap-1">
               <p className="text-navy-light text-sm">
-                8x8 and Cisco Certified Partner &nbsp;·&nbsp; Veteran Owned &nbsp;·&nbsp; 25+ Years Experience
+                8x8 and Cisco Certified Partner &nbsp;·&nbsp; Veteran Owned &amp; Operated &nbsp;·&nbsp; 25+ Years Experience
               </p>
               <p className="text-navy-light text-xs">
                 © {currentYear} Queue North Technologies. All rights reserved.
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index 7eeaa82..cd2bc96 100644
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -13,6 +13,40 @@ const industryIcons = {
   landmark: Landmark,
 }
 
+const serviceAccentStyles = [
+  {
+    card: 'border-t-[3px] border-t-primary-blue hover:border-primary-blue/50',
+    iconWrap: 'bg-sky-50',
+    icon: 'text-primary-blue',
+    link: 'text-primary-blue hover:text-primary-navy',
+  },
+  {
+    card: 'border-t-[3px] border-t-teal-500 hover:border-teal-500/50',
+    iconWrap: 'bg-teal-50',
+    icon: 'text-teal-600',
+    link: 'text-teal-700 hover:text-primary-navy',
+  },
+  {
+    card: 'border-t-[3px] border-t-cyan-400 hover:border-cyan-400/60',
+    iconWrap: 'bg-cyan-50',
+    icon: 'text-cyan-600',
+    link: 'text-cyan-700 hover:text-primary-navy',
+  },
+  {
+    card: 'border-t-[3px] border-t-accent-gold hover:border-accent-gold/60',
+    iconWrap: 'bg-amber-50',
+    icon: 'text-amber-600',
+    link: 'text-amber-700 hover:text-primary-navy',
+  },
+]
+
+const industryAccentStyles = [
+  { card: 'border-t-[3px] border-t-rose-400 hover:border-rose-400/60', iconWrap: 'bg-rose-50', icon: 'text-rose-600' },
+  { card: 'border-t-[3px] border-t-primary-blue hover:border-primary-blue/50', iconWrap: 'bg-sky-50', icon: 'text-primary-blue' },
+  { card: 'border-t-[3px] border-t-accent-gold hover:border-accent-gold/60', iconWrap: 'bg-amber-50', icon: 'text-amber-600' },
+  { card: 'border-t-[3px] border-t-teal-500 hover:border-teal-500/50', iconWrap: 'bg-teal-50', icon: 'text-teal-600' },
+]
+
 const Home = () => {
   const organizationLd = {
     '@context': 'https://schema.org',
@@ -180,33 +214,37 @@ const Home = () => {
             </p>
           </div>
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-            {services.map((service) => (
-              <Card key={service.id} className="h-full transition-all hover:border-primary-blue/40 hover:shadow-md">
-                <CardHeader>
-                  <div className="flex items-center gap-3 mb-2">
-                    <div className="bg-primary-navy/10 p-2 rounded-md" aria-hidden="true">
-                      {service.icon === 'message-circle' && <MessageCircle className="w-6 h-6 text-primary-navy" />}
-                      {service.icon === 'users' && <Users className="w-6 h-6 text-primary-navy" />}
-                      {service.icon === 'life-buoy' && <LifeBuoy className="w-6 h-6 text-primary-navy" />}
-                      {service.icon === 'graduation-cap' && <GraduationCap className="w-6 h-6 text-primary-navy" />}
-                      {service.icon === 'link' && <LinkIcon className="w-6 h-6 text-primary-navy" />}
-                      {service.icon === 'wifi' && <Wifi className="w-6 h-6 text-primary-navy" />}
-                      {service.icon === 'network' && <Network className="w-6 h-6 text-primary-navy" />}
+            {services.map((service, index) => {
+              const accent = serviceAccentStyles[index % serviceAccentStyles.length]
+
+              return (
+                <Card key={service.id} className={`h-full transition-all hover:shadow-md ${accent.card}`}>
+                  <CardHeader>
+                    <div className="flex items-center gap-3 mb-2">
+                      <div className={`${accent.iconWrap} p-2 rounded-md`} aria-hidden="true">
+                        {service.icon === 'message-circle' && <MessageCircle className={`w-6 h-6 ${accent.icon}`} />}
+                        {service.icon === 'users' && <Users className={`w-6 h-6 ${accent.icon}`} />}
+                        {service.icon === 'life-buoy' && <LifeBuoy className={`w-6 h-6 ${accent.icon}`} />}
+                        {service.icon === 'graduation-cap' && <GraduationCap className={`w-6 h-6 ${accent.icon}`} />}
+                        {service.icon === 'link' && <LinkIcon className={`w-6 h-6 ${accent.icon}`} />}
+                        {service.icon === 'wifi' && <Wifi className={`w-6 h-6 ${accent.icon}`} />}
+                        {service.icon === 'network' && <Network className={`w-6 h-6 ${accent.icon}`} />}
+                      </div>
+                      <CardTitle className="text-left text-primary-navy text-xl" aria-label={service.name}>{service.name}</CardTitle>
                     </div>
-                    <CardTitle className="text-primary-navy text-xl" aria-label={service.name}>{service.name}</CardTitle>
-                  </div>
-                  <CardDescription className="font-medium text-teal-900" aria-label={service.homeDesc}>{service.homeDesc}</CardDescription>
-                </CardHeader>
-                <CardContent>
-                  <div className="flex flex-col gap-2">
-                    <Link to={`/services/${service.id}`} className="inline-flex items-center gap-1 text-sm font-semibold text-primary-navy hover:text-primary-blue" aria-label={`Learn more about ${service.name}`}>
-                      Learn more
-                      <ArrowRight className="h-4 w-4" aria-hidden="true" />
-                    </Link>
-                  </div>
-                </CardContent>
-              </Card>
-            ))}
+                    <CardDescription className="font-medium text-teal-900" aria-label={service.homeDesc}>{service.homeDesc}</CardDescription>
+                  </CardHeader>
+                  <CardContent>
+                    <div className="flex flex-col gap-2">
+                      <Link to={`/services/${service.id}`} className={`inline-flex items-center gap-1 text-sm font-semibold ${accent.link}`} aria-label={`Learn more about ${service.name}`}>
+                        Learn more
+                        <ArrowRight className="h-4 w-4" aria-hidden="true" />
+                      </Link>
+                    </div>
+                  </CardContent>
+                </Card>
+              )
+            })}
           </div>
         </div>
       </section>
@@ -226,9 +264,9 @@ const Home = () => {
             </div>
           </div>
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-            <Card className="bg-white/80">
+            <Card className="bg-white/80 border-t-[3px] border-t-primary-blue">
               <CardContent className="pt-6">
-                <div className="bg-primary-navy text-white p-3 rounded-md mb-4 inline-flex">
+                <div className="bg-sky-50 text-primary-blue p-3 rounded-md mb-4 inline-flex">
                   <Headphones className="w-6 h-6" />
                 </div>
                 <h3 className="text-lg font-semibold text-primary-navy mb-2">Responsiveness</h3>
@@ -237,9 +275,9 @@ const Home = () => {
                 </p>
               </CardContent>
             </Card>
-            <Card className="bg-white/80">
+            <Card className="bg-white/80 border-t-[3px] border-t-teal-500">
               <CardContent className="pt-6">
-                <div className="bg-primary-navy text-white p-3 rounded-md mb-4 inline-flex">
+                <div className="bg-teal-50 text-teal-600 p-3 rounded-md 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>
@@ -248,9 +286,9 @@ const Home = () => {
                 </p>
               </CardContent>
             </Card>
-            <Card className="bg-white/80">
+            <Card className="bg-white/80 border-t-[3px] border-t-cyan-400">
               <CardContent className="pt-6">
-                <div className="bg-primary-navy text-white p-3 rounded-md mb-4 inline-flex">
+                <div className="bg-cyan-50 text-cyan-600 p-3 rounded-md 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>
@@ -259,9 +297,9 @@ const Home = () => {
                 </p>
               </CardContent>
             </Card>
-            <Card className="bg-white/80">
+            <Card className="bg-white/80 border-t-[3px] border-t-accent-gold">
               <CardContent className="pt-6">
-                <div className="bg-primary-navy text-white p-3 rounded-md mb-4 inline-flex">
+                <div className="bg-amber-50 text-amber-600 p-3 rounded-md 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>
@@ -284,15 +322,17 @@ const Home = () => {
             </p>
           </div>
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-            {industries.map((industry) => {
+            {industries.map((industry, index) => {
               const IconComponent = industryIcons[industry.icon] || Building2
+              const accent = industryAccentStyles[index % industryAccentStyles.length]
+
               return (
-                <Card key={industry.id} className="h-full transition-all hover:border-primary-blue/40 hover:shadow-md">
+                <Card key={industry.id} className={`h-full transition-all hover:shadow-md ${accent.card}`}>
                   <CardContent className="p-6">
-                    <div className="w-14 h-14 rounded-md bg-teal-50 flex items-center justify-center mb-4" aria-hidden="true">
-                      <IconComponent className="w-8 h-8 text-teal-600" />
+                    <div className={`w-14 h-14 rounded-md ${accent.iconWrap} flex items-center justify-center mb-4`} aria-hidden="true">
+                      <IconComponent className={`w-8 h-8 ${accent.icon}`} />
                     </div>
-                    <h3 className="text-xl font-semibold text-primary-navy mb-3" aria-label={industry.name}>{industry.name}</h3>
+                    <h3 className="text-left text-xl font-semibold text-primary-navy mb-3" aria-label={industry.name}>{industry.name}</h3>
                     <p className="text-sm text-soft-text mb-4" aria-label={industry.homeDesc || 'Industry-specific solutions designed to address your unique challenges and requirements.'}>{industry.homeDesc || 'Industry-specific solutions designed to address your unique challenges and requirements.'}</p>
                     <Link to={`/industries/${industry.id}`} className="inline-flex items-center gap-1 text-sm font-semibold text-primary-navy hover:text-primary-blue" aria-label={`Learn more about ${industry.name} industry solutions`}>
                       Learn more