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

120
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,62 +18,64 @@ 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>
</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> </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>
) )
})} })}
@ -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> <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6">
<h2 className="text-3xl md:text-4xl font-bold text-primary-navy mb-6">Can't Find Your Industry?</h2> <div>
<p className="text-xl text-soft-text mb-8 max-w-2xl mx-auto"> <h2 className="text-3xl md:text-4xl font-bold mb-3">Don't see your industry?</h2>
We work with businesses across all industries. Contact us to discuss your specific needs. <p className="text-white/70 max-w-2xl">
</p> We work with businesses across all sectors. If you have specific compliance, connectivity, or workflow requirements, let's talk.
</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>

126
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>
<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>
</div> </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> </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> <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6">
<h2 className="text-3xl md:text-4xl font-bold text-primary-navy mb-6">Looking for Something Specific?</h2> <div>
<p className="text-xl text-soft-text mb-8 max-w-2xl mx-auto"> <h2 className="text-3xl md:text-4xl font-bold mb-3">Not sure where to start?</h2>
Don't see exactly what you're looking for? We can help you find the right solution. <p className="text-white/70 max-w-2xl">
</p> Tell us about your environment and we'll cut through the options to tell you what actually fits.
</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>