143 lines
6.5 KiB
JavaScript
143 lines
6.5 KiB
JavaScript
import SEO from '@/components/SEO'
|
|
import { useParams } from 'react-router-dom'
|
|
import { industries } from '@/data/industries'
|
|
import { Link } from 'react-router-dom'
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card'
|
|
import { AlertCircle, ArrowLeft, ArrowRight, Building2, CheckCircle2 } from 'lucide-react'
|
|
|
|
const IndustryDetail = () => {
|
|
const { slug } = useParams()
|
|
const industry = industries.find(i => i.id === slug)
|
|
|
|
if (!industry) {
|
|
return (
|
|
<section className="bg-background py-12 lg:py-20">
|
|
<SEO
|
|
title="Industry Not Found | Queue North Technologies"
|
|
description="The industry page you are looking for does not exist."
|
|
url="https://queuenorth.com/industries"
|
|
/>
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="text-center">
|
|
<h1 className="text-3xl font-bold text-primary-navy mb-4">Industry Not Found</h1>
|
|
<p className="text-xl text-soft-text mb-8">The industry you're looking for doesn't exist.</p>
|
|
<Link to="/industries" className="text-primary-navy hover:underline">
|
|
Back to Industries
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|
|
|
|
const industryTitle = `${industry.name} | Queue North Technologies`
|
|
const industryDesc = industry.shortDesc || `Learn about Queue North Technologies solutions for the ${industry.name} industry.`
|
|
const industryUrl = `https://queuenorth.com/industries/${industry.id}`
|
|
|
|
return (
|
|
<>
|
|
<SEO
|
|
title={industryTitle}
|
|
description={industryDesc}
|
|
url={industryUrl}
|
|
/>
|
|
{/* Page Hero */}
|
|
<section className="relative isolate overflow-hidden bg-primary-navy py-16 lg:py-24 text-white">
|
|
<div className="absolute inset-0 -z-10">
|
|
<img
|
|
src="/assets/modern-call-center.webp"
|
|
alt="Business communications team supporting industry operations"
|
|
className="h-full w-full object-cover object-center"
|
|
/>
|
|
<div className="absolute inset-0 bg-primary-navy/84" />
|
|
<div className="absolute inset-0 bg-gradient-to-r from-primary-navy via-primary-navy/92 to-primary-navy/50" />
|
|
</div>
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="max-w-3xl">
|
|
<Link to="/industries" className="mb-5 inline-flex items-center gap-2 text-sm font-semibold text-primary-cyan hover:text-white">
|
|
<ArrowLeft className="h-4 w-4" aria-hidden="true" />
|
|
Industries
|
|
</Link>
|
|
<h1 className="text-4xl md:text-5xl font-bold mb-6">{industry.name}</h1>
|
|
<p className="text-xl text-white/75 max-w-3xl leading-relaxed">{industry.shortDesc}</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Main Content */}
|
|
<section className="bg-background py-16 lg:py-24">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-12">
|
|
{/* Left Column - Main Content */}
|
|
<div className="lg:col-span-2">
|
|
<div className="mb-12">
|
|
<h2 className="text-2xl font-bold text-primary-navy mb-4">Industry Overview</h2>
|
|
<p className="text-lg text-soft-text mb-6 leading-relaxed">
|
|
{industry.fullDesc}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="mb-12">
|
|
<h2 className="text-2xl font-bold text-primary-navy mb-4">Pain Points We Solve</h2>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
{industry.painPoints.map((painPoint, index) => (
|
|
<div key={index} className="flex items-start gap-3 rounded-md border border-border bg-white p-4 shadow-sm">
|
|
<AlertCircle className="h-5 w-5 text-rose-600 flex-shrink-0 mt-0.5" aria-hidden="true" />
|
|
<span className="text-sm font-medium text-text">{painPoint}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mb-12">
|
|
<h2 className="text-2xl font-bold text-primary-navy mb-4">Our Solutions</h2>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
{industry.solutions.map((solution, index) => (
|
|
<div key={index} className="flex items-start gap-3 rounded-md border border-border bg-white p-4 shadow-sm">
|
|
<CheckCircle2 className="h-5 w-5 text-teal-600 flex-shrink-0 mt-0.5" aria-hidden="true" />
|
|
<span className="text-sm font-medium text-text">{solution}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right Column - Sidebar */}
|
|
<div className="lg:col-span-1">
|
|
<Card className="lg:sticky top-24 border-t-[3px] border-t-teal-500">
|
|
<CardHeader>
|
|
<div className="flex items-center gap-3">
|
|
<span className="flex h-10 w-10 items-center justify-center rounded-md bg-teal-50 text-teal-600">
|
|
<Building2 className="h-5 w-5" aria-hidden="true" />
|
|
</span>
|
|
<CardTitle className="text-primary-navy text-xl">Industry Insights</CardTitle>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div>
|
|
<h3 className="font-semibold text-text mb-2">Industry</h3>
|
|
<p className="text-soft-text">{industry.name}</p>
|
|
</div>
|
|
<div className="pt-4 border-t border-border">
|
|
<Link to="/contact#contact-form" className="flex w-full items-center justify-center gap-2 bg-primary-navy text-white px-4 py-3 rounded-md text-center font-medium hover:bg-primary-navy-dark transition-colors">
|
|
Request Consultation
|
|
<ArrowRight className="h-4 w-4" aria-hidden="true" />
|
|
</Link>
|
|
</div>
|
|
<div className="pt-2">
|
|
<Link to="/industries" className="text-primary-navy hover:underline">
|
|
← Back to Industries
|
|
</Link>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default IndustryDetail
|