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

fix: 8x8 logo visibility, industry icons, service cards, icon fallback (#91 #94 #125 #92 #93) (batch 9.2)

This commit is contained in:
null 2026-05-17 21:41:01 -05:00
parent bdef2684bb
commit a5d9d142d5
2 changed files with 50 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/pages/Home.jsx
View File

@ -4,7 +4,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, MessageCircle, Users, LifeBuoy, GraduationCap, Link as LinkIcon, Wifi, Network, Headphones, UserCheck, Activity, ShieldCheck, HeartPulse, ShoppingCart, Factory, Landmark } from 'lucide-react'
import { MapPin, MessageCircle, Users, LifeBuoy, GraduationCap, Link as LinkIcon, Wifi, Network, Headphones, UserCheck, Activity, ShieldCheck, HeartPulse, ShoppingCart, Factory, Landmark, Building2 } from 'lucide-react'
// Icon map for industries - converts icon string to lucide component
const industryIcons = {
@ -133,7 +133,7 @@ const Home = () => {
</div>
<div className="flex flex-wrap justify-center items-center gap-8 md:gap-16 opacity-70">
<div className="flex items-center gap-3">
<img src="/assets/8x8_Logo_White.svg" alt="8x8 Certified Partner logo" className="h-8" />
<img src="/assets/8x8_Logo_White.svg" alt="8x8 Certified Partner logo" className="h-8 brightness-0 invert" />
<span className="font-medium">8x8 Certified Partner</span>
</div>
<div className="flex items-center gap-3">
@ -315,7 +315,6 @@ const Home = () => {
<CardDescription className="font-medium text-teal-900">{service.homeDesc}</CardDescription>
</CardHeader>
<CardContent>
<p className="text-sm text-soft-text mb-4">{service.shortDesc}</p>
<div className="flex flex-col gap-2">
<Button variant="link" className="text-primary-navy p-0 h-auto text-sm" onClick={() => navigate(`/services/${service.id}`)}>
Learn more →
@ -406,7 +405,7 @@ const Home = () => {
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
{industries.map((industry) => {
const IconComponent = industryIcons[industry.icon]
const IconComponent = industryIcons[industry.icon] || Building2
return (
<Card key={industry.id} className="hover:shadow-md transition-shadow cursor-pointer">
<CardContent className="p-6">
@ -414,9 +413,7 @@ const Home = () => {
<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>
<p className="text-sm text-soft-text mb-4">{industry.homeDesc || '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(`/industries/${industry.id}`)}>
Learn more →
</Button>

20
src/pages/Industries.jsx
View File

@ -1,6 +1,15 @@
import { Helmet } from 'react-helmet-async'
import { industries } from '@/data/industries'
import { Link } from 'react-router-dom'
import { HeartPulse, ShoppingCart, Factory, Landmark, Building2 } 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 Industries = () => {
return (
@ -31,15 +40,15 @@ const Industries = () => {
<section className="bg-background py-16">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-6">
{industries.map((industry) => (
{industries.map((industry) => {
const IconComponent = industryIcons[industry.icon] || Building2
return (
<div key={industry.id} className="group cursor-pointer">
<div className="rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow bg-card border border-border">
<div className="p-6">
<div className="flex items-center gap-4 mb-4">
<div className="h-12 w-12 rounded-lg bg-section-alt flex items-center justify-center flex-shrink-0">
<svg className="h-6 w-6 text-primary-navy" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
</svg>
<IconComponent className="h-6 w-6 text-primary-navy" />
</div>
<h2 className="text-xl font-semibold text-primary-navy group-hover:text-primary-navy-dark transition-colors">
{industry.name}
@ -72,7 +81,8 @@ const Industries = () => {
</div>
</div>
</div>
))}
)
})}
</div>
</div>
</section>