feat(services): business outcomes rewrite (batch 0.5.4)

- Section title: Our Services → What We Handle
- Subtitle: outcome-focused language
- Added homeDesc field to all 7 services in data/services.js
- Service cards now show icon + homeDesc + shortDesc
- lucide-react icons per service (MessageCircle, Users, etc)
- B2B professional card layout with icon containers
- Service detail pages unchanged

src/data/services.js

@@ -3,6 +3,7 @@ export const services = [
     id: 'unified-communications',
     name: 'Unified Communications',
     shortDesc: 'Modernize your business communications with seamless integration',
+    homeDesc: 'Stop juggling separate phone, video, and messaging systems. One platform, one bill, zero headaches.',
     fullDesc: 'Transform your business communications with our comprehensive Unified Communications solutions. We help you integrate voice, video, messaging, and collaboration tools into a single, intuitive platform that works across all your devices and locations.',
     icon: 'message-circle',
     benefits: [
@@ -22,6 +23,7 @@ export const services = [
     id: 'contact-center',
     name: 'Contact Center',
     shortDesc: 'Deliver exceptional customer experiences with modern contact center solutions',
+    homeDesc: 'Your customers reach a real person faster. Lower wait times, happier callers, better reviews.',
     fullDesc: 'Create exceptional customer experiences with our contact center solutions. Our cloud-based platforms help you manage customer interactions across phone, email, chat, and social media channels with powerful analytics and workforce management tools.',
     icon: 'users',
     benefits: [
@@ -41,6 +43,7 @@ export const services = [
     id: 'managed-support',
     name: 'Managed Support',
     shortDesc: 'Expert IT support with proactive monitoring and rapid response',
+    homeDesc: 'Your IT runs itself. 24/7 monitoring catches problems before you even notice them.',
     fullDesc: 'Our Managed Support services provide comprehensive IT help desk and infrastructure support. With 24/7 monitoring, rapid response times, and dedicated support engineers, we ensure your technology infrastructure runs smoothly so you can focus on your business.',
     icon: 'life-buoy',
     benefits: [
@@ -60,6 +63,7 @@ export const services = [
     id: 'consulting-training',
     name: 'Consulting & Training',
     shortDesc: 'Expert guidance and training for communications and infrastructure',
+    homeDesc: 'Get a clear plan, not a sales pitch. We map your needs, implement the right solution, and train your team.',
     fullDesc: 'Our consulting and training services help you make the most of your communications infrastructure. From strategic planning and implementation to hands-on training, we provide the expertise your team needs to succeed.',
     icon: 'graduation-cap',
     benefits: [
@@ -79,6 +83,7 @@ export const services = [
     id: 'infrastructure-cabling',
     name: 'Infrastructure Cabling',
     shortDesc: 'Professional structured cabling for reliable network performance',
+    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',
     benefits: [
@@ -98,6 +103,7 @@ export const services = [
     id: 'wireless-access',
     name: 'Wireless Access',
     shortDesc: 'Enterprise-grade Wi-Fi solutions for reliable mobile connectivity',
+    homeDesc: 'Wi-Fi that just works — everywhere in your building. No dead zones, no complaints.',
     fullDesc: 'Our wireless access solutions provide robust, high-performance Wi-Fi coverage for your entire facility. From site surveys and design to installation and optimization, we ensure seamless mobile connectivity for employees and guests.',
     icon: 'wifi',
     benefits: [
@@ -117,6 +123,7 @@ export const services = [
     id: 'local-networking',
     name: 'Local Networking',
     shortDesc: 'Robust local network infrastructure for business-critical operations',
+    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',
     benefits: [

src/pages/Home.jsx

@@ -3,7 +3,7 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/com
 import { services } from '@/data/services'
 import { industries } from '@/data/industries'
 import { useNavigate } from 'react-router-dom'
-import { MapPin } from 'lucide-react'
+import { MapPin, MessageCircle, Users, LifeBuoy, GraduationCap, Link as LinkIcon, Wifi, Network } from 'lucide-react'
 
 const Home = () => {
   const navigate = useNavigate()
@@ -167,20 +167,31 @@ const Home = () => {
       <section className="bg-background py-16 md:py-24">
         <div className="container mx-auto px-4">
           <div className="text-center mb-12">
-            <h2 className="text-3xl md:text-4xl font-bold text-primary-navy mb-4">Our Services</h2>
+            <h2 className="text-3xl md:text-4xl font-bold text-primary-navy mb-4">What We Handle</h2>
             <p className="text-xl text-soft-text max-w-2xl mx-auto">
-              Comprehensive communications and infrastructure solutions for every business need
+              From phones to firewalls, we keep your business running
             </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="hover:shadow-md transition-shadow cursor-pointer">
                 <CardHeader>
-                  <CardTitle className="text-primary-navy">{service.name}</CardTitle>
-                  <CardDescription>{service.shortDesc}</CardDescription>
+                  <div className="flex items-center gap-3 mb-2">
+                    <div className="bg-primary-navy/10 p-2 rounded-lg">
+                      {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" />}
+                    </div>
+                    <CardTitle className="text-primary-navy text-xl">{service.name}</CardTitle>
+                  </div>
+                  <CardDescription className="font-medium text-teal-900">{service.homeDesc}</CardDescription>
                 </CardHeader>
                 <CardContent>
-                  <p className="text-sm text-soft-text mb-4">{service.fullDesc}</p>
+                  <p className="text-sm text-soft-text mb-4">{service.shortDesc}</p>
                   <Button variant="link" className="text-primary-navy p-0 h-auto text-sm" onClick={() => navigate(`/services/${service.id}`)}>
                     Learn more →
                   </Button>