null/Queue-North-Website
null
/
Queue-North-Website
1
0
Fork 0
Code Issues 27 Pull Requests Packages Projects Releases Wiki Activity

fix: ui industries

This commit is contained in:
null 2026-05-18 14:25:45 -05:00
parent 3f8eafb76a
commit 046d5b1d4a
2 changed files with 132 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

112
src/pages/Industries.jsx
View File

@ -1,14 +1,13 @@
import SEO from '@/components/SEO' import SEO from '@/components/SEO'
import { industries } from '@/data/industries' import { industries } from '@/data/industries'
import { ArrowRight, Building2, CheckCircle2, HeartPulse, ShoppingCart, Factory, Landmark } from 'lucide-react'
import { Link } from 'react-router-dom' 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 iconMap = {
const industryIcons = {
'heart-pulse': HeartPulse, 'heart-pulse': HeartPulse,
'shopping-cart': ShoppingCart, 'shopping-cart': ShoppingCart,
factory: Factory, 'factory': Factory,
landmark: Landmark, 'landmark': Landmark,
} }
const Industries = () => { const Industries = () => {
@ -19,63 +18,65 @@ const Industries = () => {
description="Queue North Technologies serves healthcare, retail, manufacturing, education, and finance industries with tailored communications and IT solutions." description="Queue North Technologies serves healthcare, retail, manufacturing, education, and finance industries with tailored communications and IT solutions."
url="https://queuenorth.com/industries" 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 className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div> <div className="max-w-3xl">
<h1 className="text-4xl md:text-5xl font-bold text-primary-navy mb-6">Industries We Serve</h1> <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">
<p className="text-xl text-soft-text max-w-3xl"> <Building2 className="h-4 w-4" aria-hidden="true" />
Tailored communications and infrastructure solutions designed for the unique challenges of your industry. 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> </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>
</div> </div>
</section> </section>
{/* Industries Grid */} {/* 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="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"> <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
{industries.map((industry) => { {industries.map((industry) => {
const IconComponent = industryIcons[industry.icon] || Building2 const Icon = iconMap[industry.icon] || Building2
return ( return (
<div key={industry.id} className="group"> <div
<div className="rounded-md overflow-hidden shadow-sm hover:shadow-md transition-shadow bg-card border border-border"> key={industry.id}
<div className="p-6"> 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 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"> <div className="flex h-14 w-14 items-center justify-center rounded-md bg-primary-navy/10 mb-6 flex-shrink-0">
<IconComponent className="h-6 w-6 text-primary-navy" /> <Icon className="h-7 w-7 text-primary-navy" aria-hidden="true" />
</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>
<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>
))} ))}
</div> </ul>
</div> <Link
to={`/industries/${industry.id}`}
<Link to={`/industries/${industry.id}`} className="inline-flex items-center gap-1 text-primary-navy font-medium hover:underline mt-2"> className="inline-flex items-center gap-1.5 text-sm font-semibold text-primary-navy hover:text-primary-blue transition-colors"
Learn more aria-label={`Learn more about ${industry.name} solutions`}
<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" /> See how we help
</svg> <ArrowRight className="h-4 w-4" aria-hidden="true" />
</Link> </Link>
</div> </div>
</div>
</div>
) )
})} })}
</div> </div>
@ -83,18 +84,21 @@ const Industries = () => {
</section> </section>
{/* CTA */} {/* CTA */}
<section className="bg-section-alt py-16"> <section className="bg-primary-navy py-14 text-white">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> <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> <div>
<h2 className="text-3xl md:text-4xl font-bold text-primary-navy mb-6">Can't Find Your Industry?</h2> <h2 className="text-3xl md:text-4xl font-bold mb-3">Don't see your industry?</h2>
<p className="text-xl text-soft-text mb-8 max-w-2xl mx-auto"> <p className="text-white/70 max-w-2xl">
We work with businesses across all industries. Contact us to discuss your specific needs. We work with businesses across all sectors. If you have specific compliance, connectivity, or workflow requirements, let's talk.
</p> </p>
</div>
<Link <Link
to="/contact" 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> </Link>
</div> </div>
</div> </div>

118
src/pages/Services.jsx
View File

@ -1,6 +1,6 @@
import SEO from '@/components/SEO' import SEO from '@/components/SEO'
import { services } from '@/data/services' 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' import { Link } from 'react-router-dom'
const serviceLd = { 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 = () => { const Services = () => {
return ( return (
<> <>
@ -27,80 +37,84 @@ const Services = () => {
url="https://queuenorth.com/services" url="https://queuenorth.com/services"
jsonLd={serviceLd} 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 className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div> <div className="max-w-3xl">
<h1 className="text-4xl md:text-5xl font-bold text-primary-navy mb-6">Our Services</h1> <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">
<p className="text-xl text-soft-text max-w-3xl"> <Layers className="h-4 w-4" aria-hidden="true" />
Comprehensive communications and infrastructure solutions designed to help your business thrive in today's digital landscape. 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> </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>
</div> </div>
</section> </section>
{/* Services Grid */} {/* 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="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"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{services.map((service) => ( {services.map((service) => {
<div key={service.id} className="group"> const Icon = iconMap[service.icon]
<div className="rounded-md overflow-hidden shadow-sm hover:shadow-md transition-shadow bg-card border border-border"> return (
<div className="p-6"> <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 items-center gap-4 mb-4"> <div className="flex h-12 w-12 items-center justify-center rounded-md bg-primary-navy/10 mb-5 flex-shrink-0">
<div className="h-12 w-12 rounded-md bg-section-alt flex items-center justify-center flex-shrink-0"> {Icon && <Icon className="h-6 w-6 text-primary-navy" aria-hidden="true" />}
{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> </div>
<h2 className="text-xl font-semibold text-primary-navy group-hover:text-primary-navy-dark transition-colors"> <h2 className="text-xl font-semibold text-primary-navy mb-3">{service.name}</h2>
{service.name} <p className="text-soft-text text-sm leading-relaxed flex-1 mb-6">{service.homeDesc}</p>
</h2> <Link
</div> to={`/services/${service.id}`}
<p className="text-soft-text mb-4">{service.shortDesc}</p> className="inline-flex items-center gap-1.5 text-sm font-semibold text-primary-navy hover:text-primary-blue transition-colors"
<div className="space-y-2 mb-4"> aria-label={`Learn more about ${service.name}`}
{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 Learn more
<svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <ArrowRight className="h-4 w-4" aria-hidden="true" />
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5l7 7-7 7" />
</svg>
</Link> </Link>
</div> </div>
</div> )
</div> })}
))}
</div> </div>
</div> </div>
</section> </section>
{/* CTA */} {/* CTA */}
<section className="bg-section-alt py-16"> <section className="bg-primary-navy py-14 text-white">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> <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> <div>
<h2 className="text-3xl md:text-4xl font-bold text-primary-navy mb-6">Looking for Something Specific?</h2> <h2 className="text-3xl md:text-4xl font-bold mb-3">Not sure where to start?</h2>
<p className="text-xl text-soft-text mb-8 max-w-2xl mx-auto"> <p className="text-white/70 max-w-2xl">
Don't see exactly what you're looking for? We can help you find the right solution. Tell us about your environment and we'll cut through the options to tell you what actually fits.
</p> </p>
</div>
<Link <Link
to="/contact" 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> </Link>
</div> </div>
</div> </div>