112 lines
5.5 KiB
JavaScript
112 lines
5.5 KiB
JavaScript
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 (
|
|
<>
|
|
<Helmet>
|
|
<title>Industries We Serve | Queue North Technologies</title>
|
|
<meta name="description" content="Queue North Technologies serves healthcare, retail, manufacturing, education, and finance industries with tailored communications and IT solutions." />
|
|
<meta property="og:title" content="Industries We Serve | Queue North Technologies" />
|
|
<meta property="og:description" content="Tailored communications and IT solutions for healthcare, retail, manufacturing, education, and finance." />
|
|
<meta property="og:url" content="https://queuenorth.com/industries" />
|
|
<meta property="og:type" content="website" />
|
|
<meta property="og:image" content="https://queuenorth.com/assets/og-image.png" />
|
|
<meta property="og:site_name" content="Queue North Technologies" />
|
|
</Helmet>
|
|
{/* Page Hero */}
|
|
<section className="bg-background py-16 md:py-24">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div>
|
|
<h1 className="text-4xl md:text-5xl font-bold text-primary-navy mb-6">Industries We Serve</h1>
|
|
<p className="text-xl text-soft-text max-w-3xl">
|
|
Tailored communications and infrastructure solutions designed for the unique challenges of your industry.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Industries Grid */}
|
|
<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) => {
|
|
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>
|
|
<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>
|
|
))}
|
|
</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>
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* CTA */}
|
|
<section className="bg-section-alt py-16">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
|
<div>
|
|
<h2 className="text-3xl md:text-4xl font-bold text-primary-navy mb-6">Can't Find Your Industry?</h2>
|
|
<p className="text-xl text-soft-text mb-8 max-w-2xl mx-auto">
|
|
We work with businesses across all industries. Contact us to discuss your specific needs.
|
|
</p>
|
|
<Link
|
|
to="/contact"
|
|
className="inline-block bg-primary-navy text-white px-8 py-3 rounded-md font-bold text-lg hover:bg-primary-navy-dark transition-colors"
|
|
>
|
|
Request Consultation
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default Industries
|