105 lines
4.4 KiB
JavaScript
105 lines
4.4 KiB
JavaScript
import { useParams } from 'react-router-dom'
|
|
import { industries } from '@/data/industries'
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card'
|
|
|
|
const IndustryDetail = () => {
|
|
const { slug } = useParams()
|
|
const industry = industries.find(i => i.id === slug)
|
|
|
|
if (!industry) {
|
|
return (
|
|
<div className="container mx-auto px-4 py-16 md:py-24">
|
|
<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>
|
|
<a href="/industries" className="text-primary-navy hover:underline">
|
|
Back to Industries
|
|
</a>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="container mx-auto px-4 py-16 md:py-24">
|
|
{/* Page Hero */}
|
|
<section className="mb-16">
|
|
<h1 className="text-4xl md:text-5xl font-bold text-primary-navy mb-6">{industry.name}</h1>
|
|
<p className="text-xl text-soft-text max-w-3xl">{industry.shortDesc}</p>
|
|
</section>
|
|
|
|
{/* Main Content */}
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-12">
|
|
{/* Left Column - Main Content */}
|
|
<div className="lg:col-span-2">
|
|
<section 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>
|
|
</section>
|
|
|
|
<section 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">
|
|
<div className="h-6 w-6 rounded-full bg-red-100 text-red-700 flex items-center justify-center flex-shrink-0 mt-1">
|
|
<svg className="h-3 w-3" 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 className="text-lg text-text">{painPoint}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
<section 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">
|
|
<div className="h-6 w-6 rounded-full bg-green-100 text-green-700 flex items-center justify-center flex-shrink-0 mt-1">
|
|
<svg className="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
</div>
|
|
<span className="text-lg text-text">{solution}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
{/* Right Column - Sidebar */}
|
|
<div className="lg:col-span-1">
|
|
<Card className="sticky top-24">
|
|
<CardHeader>
|
|
<CardTitle className="text-primary-navy">Industry Insights</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div>
|
|
<h4 className="font-semibold text-text mb-2">Industry</h4>
|
|
<p className="text-soft-text">{industry.name}</p>
|
|
</div>
|
|
<div className="pt-4 border-t border-border">
|
|
<a href="/contact" className="block w-full bg-primary-navy text-white px-4 py-3 rounded-md text-center font-medium hover:bg-primary-navy-dark transition-colors">
|
|
Request Consultation
|
|
</a>
|
|
</div>
|
|
<div className="pt-2">
|
|
<a href="/industries" className="text-primary-navy hover:underline">
|
|
← Back to Industries
|
|
</a>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default IndustryDetail
|