172 lines
7.3 KiB
JavaScript
172 lines
7.3 KiB
JavaScript
import SEO from '@/components/SEO'
|
|
import { useParams } from 'react-router-dom'
|
|
import { services } from '@/data/services'
|
|
import { Link } from 'react-router-dom'
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card'
|
|
import { ArrowLeft, ArrowRight, CheckCircle2, Info, Zap } from 'lucide-react'
|
|
|
|
const serviceImageAlt = {
|
|
'contact-center': 'Modern contact center operations dashboard and support team',
|
|
'infrastructure-cabling': 'Close-up of network cabling connected to infrastructure equipment',
|
|
'wireless-access': 'Wireless coverage planning map used for enterprise Wi-Fi design',
|
|
}
|
|
|
|
const ServiceDetail = () => {
|
|
const { slug } = useParams()
|
|
const service = services.find(s => s.id === slug)
|
|
|
|
if (!service) {
|
|
return (
|
|
<section className="bg-background py-16 md:py-24">
|
|
<SEO
|
|
title="Service Not Found | Queue North Technologies"
|
|
description="The service page you are looking for does not exist."
|
|
url="https://queuenorth.com/services"
|
|
/>
|
|
<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">Service Not Found</h1>
|
|
<p className="text-xl text-soft-text mb-8">The service you're looking for doesn't exist.</p>
|
|
<Link to="/services" className="text-primary-navy hover:underline">
|
|
Back to Services
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|
|
|
|
const serviceTitle = `${service.name} | Queue North Technologies`
|
|
const serviceDesc = service.shortDesc || `Learn about ${service.name} from Queue North Technologies.`
|
|
const serviceUrl = `https://queuenorth.com/services/${service.id}`
|
|
const serviceDetailLd = {
|
|
'@context': 'https://schema.org',
|
|
'@type': 'Service',
|
|
name: service.name,
|
|
description: service.shortDesc,
|
|
provider: {
|
|
'@type': 'Organization',
|
|
name: 'Queue North Technologies',
|
|
url: 'https://queuenorth.com',
|
|
},
|
|
areaServed: {
|
|
'@type': 'Place',
|
|
name: 'United States',
|
|
},
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<SEO
|
|
title={serviceTitle}
|
|
description={serviceDesc}
|
|
url={serviceUrl}
|
|
jsonLd={serviceDetailLd}
|
|
/>
|
|
{/* Page Hero */}
|
|
<section className="relative isolate overflow-hidden bg-primary-navy py-16 md:py-24 text-white">
|
|
<div className="absolute inset-0 -z-10">
|
|
<img
|
|
src={service.image || '/assets/hero-tech.webp'}
|
|
alt={serviceImageAlt[service.id] || `${service.name} service visual`}
|
|
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">
|
|
<div>
|
|
<Link to="/services" 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" />
|
|
Services
|
|
</Link>
|
|
<h1 className="text-4xl md:text-5xl font-bold mb-6">{service.name}</h1>
|
|
<p className="text-xl text-white/75 max-w-3xl leading-relaxed">{service.shortDesc}</p>
|
|
<div className="mt-8">
|
|
<Link to="/contact" className="inline-flex h-11 items-center justify-center gap-2 rounded-md bg-white px-5 text-sm font-semibold text-primary-navy hover:bg-section-alt transition-colors">
|
|
Request This Service
|
|
<ArrowRight className="h-4 w-4" aria-hidden="true" />
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</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">What This Solves</h2>
|
|
<p className="text-lg text-soft-text mb-6 leading-relaxed">
|
|
{service.fullDesc}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="mb-12">
|
|
<h2 className="text-2xl font-bold text-primary-navy mb-4">Key Benefits</h2>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
{service.benefits.map((benefit, 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-primary-blue flex-shrink-0 mt-0.5" aria-hidden="true" />
|
|
<span className="text-sm font-medium text-text">{benefit}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mb-12">
|
|
<h2 className="text-2xl font-bold text-primary-navy mb-4">Ideal For</h2>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
{service.idealFor.map((item, index) => (
|
|
<div key={index} className="flex items-start gap-3 rounded-md border border-border bg-white p-4 shadow-sm">
|
|
<Zap 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">{item}</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-primary-blue">
|
|
<CardHeader>
|
|
<div className="flex items-center gap-3">
|
|
<span className="flex h-10 w-10 items-center justify-center rounded-md bg-sky-50 text-primary-blue">
|
|
<Info className="h-5 w-5" aria-hidden="true" />
|
|
</span>
|
|
<CardTitle className="text-primary-navy text-xl">Quick Info</CardTitle>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div>
|
|
<h3 className="font-semibold text-text mb-2">Service</h3>
|
|
<p className="text-soft-text">{service.name}</p>
|
|
</div>
|
|
<div className="pt-4 border-t border-border">
|
|
<Link to="/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 This Service
|
|
</Link>
|
|
</div>
|
|
<div className="pt-2">
|
|
<Link to="/services" className="text-primary-navy hover:underline">
|
|
← Back to Services
|
|
</Link>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default ServiceDetail
|