fix: 8x8 logo visibility, industry icons, service cards, icon fallback (#91 #94 #125 #92 #93) (batch 9.2)
This commit is contained in:
null
parent
bdef2684bb
commit
a5d9d142d5
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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,48 +40,49 @@ 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) => (
|
||||
<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>
|
||||
{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">
|
||||
<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}
|
||||
</h2>
|
||||
</div>
|
||||
<h2 className="text-xl font-semibold text-primary-navy group-hover:text-primary-navy-dark transition-colors">
|
||||
{industry.name}
|
||||
</h2>
|
||||
</div>
|
||||
<p className="text-soft-text mb-4">{industry.shortDesc}</p>
|
||||
|
||||
<div className="mb-4">
|
||||
<h3 className="text-sm font-semibold text-text mb-2">Pain Points We Solve</h3>
|
||||
<div className="space-y-2">
|
||||
{industry.painPoints.slice(0, 2).map((painPoint, index) => (
|
||||
<div key={index} className="flex items-start gap-2 text-sm text-soft-text">
|
||||
<div className="h-4 w-4 rounded-full bg-red-100 text-red-600 flex items-center justify-center flex-shrink-0 mt-0.5">
|
||||
<svg className="h-2 w-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<p className="text-soft-text mb-4">{industry.shortDesc}</p>
|
||||
|
||||
<div className="mb-4">
|
||||
<h3 className="text-sm font-semibold text-text mb-2">Pain Points We Solve</h3>
|
||||
<div className="space-y-2">
|
||||
{industry.painPoints.slice(0, 2).map((painPoint, index) => (
|
||||
<div key={index} className="flex items-start gap-2 text-sm text-soft-text">
|
||||
<div className="h-4 w-4 rounded-full bg-red-100 text-red-600 flex items-center justify-center flex-shrink-0 mt-0.5">
|
||||
<svg className="h-2 w-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<span>{painPoint}</span>
|
||||
</div>
|
||||
<span>{painPoint}</span>
|
||||
</div>
|
||||
))}
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Link to={`/industries/${industry.id}`} className="inline-flex items-center gap-1 text-primary-navy font-medium hover:underline mt-2">
|
||||
Learn more
|
||||
<svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<Link to={`/industries/${industry.id}`} className="inline-flex items-center gap-1 text-primary-navy font-medium hover:underline mt-2">
|
||||
Learn more
|
||||
<svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
Loading…
Reference in New Issue