149 lines
7.3 KiB
JavaScript
149 lines
7.3 KiB
JavaScript
import SEO from '@/components/SEO'
|
|
import { buildBreadcrumbLd } from '@/lib/seo'
|
|
import { industries } from '@/data/industries'
|
|
import { ArrowRight, Building2, CheckCircle2, HeartPulse, ShoppingCart, Factory, Landmark } from 'lucide-react'
|
|
import { Link } from 'react-router-dom'
|
|
|
|
const iconMap = {
|
|
'heart-pulse': HeartPulse,
|
|
'shopping-cart': ShoppingCart,
|
|
'factory': Factory,
|
|
'landmark': Landmark,
|
|
}
|
|
|
|
const industryAccentStyles = [
|
|
{ card: 'border-t-[3px] border-t-rose-400 hover:border-rose-400/60', iconWrap: 'bg-rose-50', icon: 'text-rose-600' },
|
|
{ card: 'border-t-[3px] border-t-primary-blue hover:border-primary-blue/50', iconWrap: 'bg-sky-50', icon: 'text-primary-blue' },
|
|
{ card: 'border-t-[3px] border-t-accent-gold hover:border-accent-gold/60', iconWrap: 'bg-amber-50', icon: 'text-amber-600' },
|
|
{ card: 'border-t-[3px] border-t-teal-500 hover:border-teal-500/50', iconWrap: 'bg-teal-50', icon: 'text-teal-600' },
|
|
]
|
|
|
|
const Industries = () => {
|
|
return (
|
|
<>
|
|
<SEO
|
|
title="Industries We Serve | Queue North"
|
|
description="Queue North Technologies serves healthcare, retail, manufacturing, education, and finance industries with tailored communications and IT solutions."
|
|
url="https://queuenorth.com/industries"
|
|
jsonLd={buildBreadcrumbLd([{ name: 'Industries', path: '/industries' }])}
|
|
/>
|
|
|
|
{/* 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/local-networking.webp"
|
|
alt="Network infrastructure used by businesses across industries"
|
|
className="h-full w-full object-cover object-center"
|
|
loading="eager"
|
|
fetchPriority="high"
|
|
decoding="async"
|
|
/>
|
|
<div className="absolute inset-0 bg-primary-navy/82" />
|
|
<div className="absolute inset-0 bg-gradient-to-r from-primary-navy via-primary-navy/92 to-primary-navy/45" />
|
|
</div>
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="max-w-3xl">
|
|
<div className="inline-flex items-center gap-2 rounded-md border border-white/20 bg-white/10 px-3 py-2 text-xs font-semibold uppercase tracking-wide text-primary-cyan mb-6">
|
|
<Building2 className="h-4 w-4" aria-hidden="true" />
|
|
Industries
|
|
</div>
|
|
<h1 className="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-6">
|
|
Built around how your industry actually works.
|
|
</h1>
|
|
<p className="text-lg md:text-xl text-white/75 max-w-2xl leading-relaxed mb-8">
|
|
Communications and infrastructure solutions shaped by the compliance, workflow, and connectivity demands of your specific environment.
|
|
</p>
|
|
<Link
|
|
to="/contact#contact-form"
|
|
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"
|
|
>
|
|
Talk to a Specialist
|
|
<ArrowRight className="h-4 w-4" aria-hidden="true" />
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Industries Grid */}
|
|
<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="mb-10 max-w-3xl">
|
|
<p className="text-sm font-semibold uppercase tracking-wide text-primary-blue">Industry fit</p>
|
|
<h2 className="mt-3 text-3xl md:text-4xl font-bold text-primary-navy">Communications needs change by environment.</h2>
|
|
<p className="mt-4 text-lg text-soft-text">
|
|
We adapt platform, network, and support recommendations to the way your teams actually operate.
|
|
</p>
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
{industries.map((industry, index) => {
|
|
const Icon = iconMap[industry.icon] || Building2
|
|
const accent = industryAccentStyles[index % industryAccentStyles.length]
|
|
|
|
return (
|
|
<div
|
|
key={industry.id}
|
|
className={`group flex flex-col rounded-md border border-border bg-white p-8 shadow-sm hover:shadow-md transition-all ${accent.card}`}
|
|
>
|
|
<div className={`flex h-14 w-14 items-center justify-center rounded-md ${accent.iconWrap} mb-6 flex-shrink-0`}>
|
|
<Icon className={`h-7 w-7 ${accent.icon}`} aria-hidden="true" />
|
|
</div>
|
|
<h2 className="text-2xl font-bold text-primary-navy mb-3">{industry.name}</h2>
|
|
<p className="text-soft-text leading-relaxed mb-6">{industry.shortDesc}</p>
|
|
<ul className="space-y-2.5 mb-8 flex-1">
|
|
{industry.solutions.slice(0, 3).map((solution, i) => (
|
|
<li key={i} className="flex items-start gap-3 text-sm text-text">
|
|
<CheckCircle2 className="h-4 w-4 text-primary-blue flex-shrink-0 mt-0.5" aria-hidden="true" />
|
|
{solution}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
<Link
|
|
to={`/industries/${industry.id}`}
|
|
className="inline-flex items-center gap-1.5 text-sm font-semibold text-primary-navy hover:text-primary-blue transition-colors"
|
|
aria-label={`Learn more about ${industry.name} solutions`}
|
|
>
|
|
See how we help
|
|
<ArrowRight className="h-4 w-4" aria-hidden="true" />
|
|
</Link>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* CTA */}
|
|
<section className="bg-section-alt py-16 lg:py-24">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="rounded-md bg-primary-navy px-6 py-10 text-white shadow-md sm:px-8 lg:flex lg:items-center lg:justify-between lg:gap-10 lg:px-10">
|
|
<div>
|
|
<h2 className="text-3xl md:text-4xl font-bold mb-3">Don't see your industry?</h2>
|
|
<p className="text-white/70 max-w-2xl">
|
|
We work with businesses across all sectors. If you have specific compliance, connectivity, or workflow requirements, let's talk.
|
|
</p>
|
|
</div>
|
|
<div className="mt-7 flex flex-col gap-3 sm:flex-row lg:mt-0 lg:flex-shrink-0">
|
|
<Link
|
|
to="/contact#contact-form"
|
|
className="inline-flex w-full sm:w-auto h-11 items-center justify-center gap-2 rounded-md bg-white px-6 text-sm font-semibold text-primary-navy hover:bg-section-alt transition-colors"
|
|
>
|
|
Talk to a Specialist
|
|
<ArrowRight className="h-4 w-4" aria-hidden="true" />
|
|
</Link>
|
|
<a
|
|
href="tel:+13217308020"
|
|
className="inline-flex w-full sm:w-auto h-11 items-center justify-center rounded-md border border-white/35 px-6 text-sm font-semibold text-white hover:bg-white/10 transition-colors"
|
|
>
|
|
Call (321) 730-8020
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default Industries
|