From 4845c7ab5fed59dceb612f9a8324d2fc8da27695 Mon Sep 17 00:00:00 2001
From: null <koga.industries@gmail.com>
Date: Sun, 17 May 2026 15:41:22 -0500
Subject: [PATCH] feat(ui): industry icons bigger with color and contrast
 (batch 0.6.5)

---
 src/pages/Home.jsx | 42 ++++++++++++++++++++++++++++--------------
 1 file changed, 28 insertions(+), 14 deletions(-)

diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index 8cc94ee..4db7bb2 100644
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -3,7 +3,15 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card'
 import { services } from '@/data/services'
 import { industries } from '@/data/industries'
 import { useNavigate } from 'react-router-dom'
-import { MapPin, MessageCircle, Users, LifeBuoy, GraduationCap, Link as LinkIcon, Wifi, Network, Headphones, UserCheck, Activity, ShieldCheck } from 'lucide-react'
+import { MapPin, MessageCircle, Users, LifeBuoy, GraduationCap, Link as LinkIcon, Wifi, Network, Headphones, UserCheck, Activity, ShieldCheck, HeartPulse, ShoppingCart, Factory, Landmark } from 'lucide-react'
+
+// Icon map for industries - converts icon string to lucide component
+const industryIcons = {
+  'heart-pulse': HeartPulse,
+  'shopping-cart': ShoppingCart,
+  factory: Factory,
+  landmark: Landmark,
+}
 
 const Home = () => {
   const navigate = useNavigate()
@@ -307,19 +315,25 @@ const Home = () => {
             </p>
           </div>
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-            {industries.map((industry) => (
-              <Card key={industry.id} className="hover:shadow-md transition-shadow cursor-pointer">
-                <CardContent className="p-6">
-                  <h3 className="text-xl font-semibold text-primary-navy mb-3">{industry.name}</h3>
-                  <p className="text-sm text-soft-text mb-4">
-                    Industry-specific solutions designed to address your unique challenges and requirements.
-                  </p>
-                  <Button variant="link" className="text-primary-navy p-0 h-auto text-sm" onClick={() => navigate(industry.href)}>
-                    Learn more →
-                  </Button>
-                </CardContent>
-              </Card>
-            ))}
+            {industries.map((industry) => {
+              const IconComponent = industryIcons[industry.icon]
+              return (
+                <Card key={industry.id} className="hover:shadow-md transition-shadow cursor-pointer">
+                  <CardContent className="p-6">
+                    <div className="w-14 h-14 rounded-xl bg-teal-50 flex items-center justify-center mb-4">
+                      <IconComponent className="w-8 h-8 text-teal-600" />
+                    </div>
+                    <h3 className="text-xl font-semibold text-primary-navy mb-3">{industry.name}</h3>
+                    <p className="text-sm text-soft-text mb-4">
+                      Industry-specific solutions designed to address your unique challenges and requirements.
+                    </p>
+                    <Button variant="link" className="text-primary-navy p-0 h-auto text-sm" onClick={() => navigate(industry.href)}>
+                      Learn more →
+                    </Button>
+                  </CardContent>
+                </Card>
+              )
+            })}
           </div>
         </div>
       </section>