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 { services } from '@/data/services'
import { industries } from '@/data/industries' import { industries } from '@/data/industries'
import { useNavigate } from 'react-router-dom' 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 Home = () => {
const navigate = useNavigate() const navigate = useNavigate()
@ -307,19 +315,25 @@ const Home = () => {
</p> </p>
</div> </div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
{industries.map((industry) => ( {industries.map((industry) => {
<Card key={industry.id} className="hover:shadow-md transition-shadow cursor-pointer"> const IconComponent = industryIcons[industry.icon]
<CardContent className="p-6"> return (
<h3 className="text-xl font-semibold text-primary-navy mb-3">{industry.name}</h3> <Card key={industry.id} className="hover:shadow-md transition-shadow cursor-pointer">
<p className="text-sm text-soft-text mb-4"> <CardContent className="p-6">
Industry-specific solutions designed to address your unique challenges and requirements. <div className="w-14 h-14 rounded-xl bg-teal-50 flex items-center justify-center mb-4">
</p> <IconComponent className="w-8 h-8 text-teal-600" />
<Button variant="link" className="text-primary-navy p-0 h-auto text-sm" onClick={() => navigate(industry.href)}> </div>
Learn more → <h3 className="text-xl font-semibold text-primary-navy mb-3">{industry.name}</h3>
</Button> <p className="text-sm text-soft-text mb-4">
</CardContent> Industry-specific solutions designed to address your unique challenges and requirements.
</Card> </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>
</div> </div>
</section> </section>