fix: ui industries
This commit is contained in:
null
parent
3f8eafb76a
commit
046d5b1d4a
|
|
@ -1,14 +1,13 @@
|
|||
import SEO from '@/components/SEO'
|
||||
import { industries } from '@/data/industries'
|
||||
import { ArrowRight, Building2, CheckCircle2, HeartPulse, ShoppingCart, Factory, Landmark } from 'lucide-react'
|
||||
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 = {
|
||||
const iconMap = {
|
||||
'heart-pulse': HeartPulse,
|
||||
'shopping-cart': ShoppingCart,
|
||||
factory: Factory,
|
||||
landmark: Landmark,
|
||||
'factory': Factory,
|
||||
'landmark': Landmark,
|
||||
}
|
||||
|
||||
const Industries = () => {
|
||||
|
|
@ -19,62 +18,64 @@ const Industries = () => {
|
|||
description="Queue North Technologies serves healthcare, retail, manufacturing, education, and finance industries with tailored communications and IT solutions."
|
||||
url="https://queuenorth.com/industries"
|
||||
/>
|
||||
{/* Page Hero */}
|
||||
<section className="bg-background py-12 lg:py-20">
|
||||
|
||||
{/* Hero */}
|
||||
<section className="bg-primary-navy py-12 lg:py-20 text-white">
|
||||
<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.
|
||||
<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"
|
||||
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">
|
||||
<section className="bg-background py-16 lg:py-20">
|
||||
<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 gap-6">
|
||||
{industries.map((industry) => {
|
||||
const IconComponent = industryIcons[industry.icon] || Building2
|
||||
const Icon = iconMap[industry.icon] || Building2
|
||||
return (
|
||||
<div key={industry.id} className="group">
|
||||
<div className="rounded-md 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-md 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
|
||||
key={industry.id}
|
||||
className="group flex flex-col rounded-md border border-border bg-white p-8 shadow-sm hover:shadow-md hover:border-primary-navy/30 transition-all"
|
||||
>
|
||||
<div className="flex h-14 w-14 items-center justify-center rounded-md bg-primary-navy/10 mb-6 flex-shrink-0">
|
||||
<Icon className="h-7 w-7 text-primary-navy" 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>
|
||||
)
|
||||
})}
|
||||
|
|
@ -83,18 +84,21 @@ const Industries = () => {
|
|||
</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>
|
||||
<section className="bg-primary-navy py-14 text-white">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6">
|
||||
<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>
|
||||
<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"
|
||||
className="inline-flex 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 flex-shrink-0"
|
||||
>
|
||||
Request Consultation
|
||||
Talk to a Specialist
|
||||
<ArrowRight className="h-4 w-4" aria-hidden="true" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import SEO from '@/components/SEO'
|
||||
import { services } from '@/data/services'
|
||||
import { MessageCircle, Users, LifeBuoy, GraduationCap, Link as LinkIcon, Wifi, Network } from 'lucide-react'
|
||||
import { ArrowRight, MessageCircle, Users, LifeBuoy, GraduationCap, Link as LinkIcon, Wifi, Network, Layers } from 'lucide-react'
|
||||
import { Link } from 'react-router-dom'
|
||||
|
||||
const serviceLd = {
|
||||
|
|
@ -18,6 +18,16 @@ const serviceLd = {
|
|||
},
|
||||
}
|
||||
|
||||
const iconMap = {
|
||||
'message-circle': MessageCircle,
|
||||
'users': Users,
|
||||
'life-buoy': LifeBuoy,
|
||||
'graduation-cap': GraduationCap,
|
||||
'link': LinkIcon,
|
||||
'wifi': Wifi,
|
||||
'network': Network,
|
||||
}
|
||||
|
||||
const Services = () => {
|
||||
return (
|
||||
<>
|
||||
|
|
@ -27,80 +37,84 @@ const Services = () => {
|
|||
url="https://queuenorth.com/services"
|
||||
jsonLd={serviceLd}
|
||||
/>
|
||||
{/* Page Hero */}
|
||||
<section className="bg-background py-12 lg:py-20">
|
||||
|
||||
{/* Hero */}
|
||||
<section className="bg-primary-navy py-12 lg:py-20 text-white">
|
||||
<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">Our Services</h1>
|
||||
<p className="text-xl text-soft-text max-w-3xl">
|
||||
Comprehensive communications and infrastructure solutions designed to help your business thrive in today's digital landscape.
|
||||
<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">
|
||||
<Layers className="h-4 w-4" aria-hidden="true" />
|
||||
What We Do
|
||||
</div>
|
||||
<h1 className="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-6">
|
||||
Everything your business communications needs.
|
||||
</h1>
|
||||
<p className="text-lg md:text-xl text-white/75 max-w-2xl leading-relaxed mb-8">
|
||||
From phone systems to full network infrastructure — designed, deployed, and supported by one accountable team.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-3">
|
||||
<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"
|
||||
>
|
||||
Get a Free Quote
|
||||
<ArrowRight className="h-4 w-4" aria-hidden="true" />
|
||||
</Link>
|
||||
<Link
|
||||
to="/support"
|
||||
className="inline-flex h-11 items-center justify-center rounded-md border border-white/40 px-5 text-sm font-semibold text-white hover:bg-white/10 transition-colors"
|
||||
>
|
||||
Existing Client? Get Support
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Services Grid */}
|
||||
<section className="bg-background py-16">
|
||||
<section className="bg-background py-16 lg:py-20">
|
||||
<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-3 gap-6">
|
||||
{services.map((service) => (
|
||||
<div key={service.id} className="group">
|
||||
<div className="rounded-md 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-md bg-section-alt flex items-center justify-center flex-shrink-0">
|
||||
{service.icon === 'message-circle' && <MessageCircle className="h-6 w-6 text-primary-navy" />}
|
||||
{service.icon === 'users' && <Users className="h-6 w-6 text-primary-navy" />}
|
||||
{service.icon === 'life-buoy' && <LifeBuoy className="h-6 w-6 text-primary-navy" />}
|
||||
{service.icon === 'graduation-cap' && <GraduationCap className="h-6 w-6 text-primary-navy" />}
|
||||
{service.icon === 'link' && <LinkIcon className="h-6 w-6 text-primary-navy" />}
|
||||
{service.icon === 'wifi' && <Wifi className="h-6 w-6 text-primary-navy" />}
|
||||
{service.icon === 'network' && <Network 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">
|
||||
{service.name}
|
||||
</h2>
|
||||
</div>
|
||||
<p className="text-soft-text mb-4">{service.shortDesc}</p>
|
||||
<div className="space-y-2 mb-4">
|
||||
{service.benefits.slice(0, 3).map((benefit, index) => (
|
||||
<div key={index} className="flex items-center gap-2 text-sm text-soft-text">
|
||||
<div className="h-4 w-4 rounded-full bg-primary-navy text-white flex items-center justify-center flex-shrink-0">
|
||||
<svg className="h-2 w-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</div>
|
||||
<span>{benefit}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<Link to={`/services/${service.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>
|
||||
{services.map((service) => {
|
||||
const Icon = iconMap[service.icon]
|
||||
return (
|
||||
<div key={service.id} className="group flex flex-col rounded-md border border-border bg-white p-6 shadow-sm hover:shadow-md hover:border-primary-navy/30 transition-all">
|
||||
<div className="flex h-12 w-12 items-center justify-center rounded-md bg-primary-navy/10 mb-5 flex-shrink-0">
|
||||
{Icon && <Icon className="h-6 w-6 text-primary-navy" aria-hidden="true" />}
|
||||
</div>
|
||||
<h2 className="text-xl font-semibold text-primary-navy mb-3">{service.name}</h2>
|
||||
<p className="text-soft-text text-sm leading-relaxed flex-1 mb-6">{service.homeDesc}</p>
|
||||
<Link
|
||||
to={`/services/${service.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 ${service.name}`}
|
||||
>
|
||||
Learn more
|
||||
<ArrowRight className="h-4 w-4" aria-hidden="true" />
|
||||
</Link>
|
||||
</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">Looking for Something Specific?</h2>
|
||||
<p className="text-xl text-soft-text mb-8 max-w-2xl mx-auto">
|
||||
Don't see exactly what you're looking for? We can help you find the right solution.
|
||||
</p>
|
||||
<section className="bg-primary-navy py-14 text-white">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6">
|
||||
<div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold mb-3">Not sure where to start?</h2>
|
||||
<p className="text-white/70 max-w-2xl">
|
||||
Tell us about your environment and we'll cut through the options to tell you what actually fits.
|
||||
</p>
|
||||
</div>
|
||||
<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"
|
||||
className="inline-flex 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 flex-shrink-0"
|
||||
>
|
||||
Request Consultation
|
||||
Get a Free Quote
|
||||
<ArrowRight className="h-4 w-4" aria-hidden="true" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue