null/Queue-North-Website
null
/
Queue-North-Website
1
0
Fork 0
Code Issues 27 Pull Requests Packages Projects Releases Wiki Activity

feat(ui): industry icons bigger with color and contrast (batch 0.6.5)

This commit is contained in:
null 2026-05-17 15:41:22 -05:00
parent 5807582df1
commit 4845c7ab5f
1 changed files with 28 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/pages/Home.jsx
View File

@ -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>