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

mobile ui fixes

This commit is contained in:
null 2026-05-18 13:45:39 -05:00
parent de61d5e625
commit a8765990ef
6 changed files with 184 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

283
src/pages/About.jsx
View File

@ -1,152 +1,215 @@
import { Helmet } from 'react-helmet-async' import { Helmet } from 'react-helmet-async'
import { Link } from 'react-router-dom' import { Link } from 'react-router-dom'
import { ArrowRight, Award, BadgeCheck, CheckCircle2, Compass, Cpu, Handshake, Headphones, Route, ShieldCheck, Users, Wrench } from 'lucide-react'
const proofPoints = [
{ label: '25+ years', detail: 'Communications and infrastructure experience', icon: Award },
{ label: '8x8 certified', detail: 'Sales, engineering, build, deployment, and support', icon: BadgeCheck },
{ label: 'Cisco certified', detail: 'Networking and communications implementation', icon: ShieldCheck },
{ label: 'Veteran owned', detail: 'Disciplined delivery and direct accountability', icon: Users },
]
const operatingPrinciples = [
{
title: 'Own the outcome',
desc: 'We stay close to implementation details so decisions survive real production conditions.',
icon: Wrench,
},
{
title: 'Recommend what fits',
desc: 'We align platforms, budgets, users, and support realities before anyone signs a contract.',
icon: Handshake,
},
{
title: 'Design for operations',
desc: 'Documentation, migration planning, training, and escalation paths are part of the work.',
icon: Route,
},
{
title: 'Support after go-live',
desc: 'Our team remains accountable after deployment, when reliability starts to matter most.',
icon: Headphones,
},
]
const capabilities = [
'UCaaS and cloud PBX migration',
'Contact center implementation',
'Network infrastructure and cabling',
'Wireless access design',
'Vendor-neutral consulting',
'Managed support and monitoring',
'Cloud migration support',
'Disaster recovery planning',
]
const About = () => { const About = () => {
return ( return (
<> <>
<Helmet> <Helmet>
<title>About Queue North | Veteran-Owned 8x8 Partner — 25+ Years of Service</title> <title>About Queue North | Veteran-Owned 8x8 Partner - 25+ Years of Service</title>
<meta name="description" content="Queue North Technologies is a veteran-owned 8x8 and Cisco Certified Partner with 25+ years of experience. Learn our story, values, and expertise." /> <meta name="description" content="Queue North Technologies is a veteran-owned 8x8 and Cisco Certified Partner with 25+ years of experience in communications, contact center, support, and network infrastructure." />
<meta property="og:title" content="About Queue North | Veteran-Owned 8x8 Partner — 25+ Years of Service" /> <meta property="og:title" content="About Queue North | Veteran-Owned 8x8 Partner - 25+ Years of Service" />
<meta property="og:description" content="Veteran-owned 8x8 and Cisco Certified Partner with 25+ years of experience." /> <meta property="og:description" content="Veteran-owned 8x8 and Cisco Certified Partner with 25+ years of communications and infrastructure experience." />
<meta property="og:url" content="https://queuenorth.com/about" /> <meta property="og:url" content="https://queuenorth.com/about" />
<meta property="og:type" content="website" /> <meta property="og:type" content="website" />
<meta property="og:image" content="https://queuenorth.com/assets/og-image.png" /> <meta property="og:image" content="https://queuenorth.com/assets/og-image.png" />
<meta property="og:site_name" content="Queue North Technologies" /> <meta property="og:site_name" content="Queue North Technologies" />
</Helmet> </Helmet>
{/* Page Hero */} {/* Page Hero */}
<section className="bg-background py-16 lg:py-24"> <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="grid grid-cols-1 lg:grid-cols-[1fr_0.75fr] gap-10 lg:gap-14 items-center">
<h1 className="text-4xl md:text-5xl font-bold text-primary-navy mb-6">About Queue North</h1> <div>
<p className="text-xl text-soft-text 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">
We're communications and infrastructure partners who cut through the vendor noise to deliver what actually works for your business. <Compass className="h-4 w-4" aria-hidden="true" />
</p> About Queue North
</div>
</div>
</section>
{/* Company Story */}
<section className="bg-background py-16">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="max-w-3xl">
<h2 className="text-3xl font-bold text-primary-navy mb-4">Our Story</h2>
<p className="text-lg text-soft-text mb-6 leading-relaxed">
Founded by military veterans, Queue North Technologies began with a simple mission: help businesses navigate the complex world of communications technology. What started as a small team of communications specialists has grown into a full-service provider for SMB and enterprise organizations across multiple industries.
</p>
<p className="text-lg text-soft-text mb-6 leading-relaxed">
Our journey began when our founders saw too many businesses paying too much for solutions that didn't fit their actual needs. We believed in a different approach — one focused on understanding your business challenges first, then selecting or integrating the right technologies to solve them.
</p>
<p className="text-lg text-soft-text leading-relaxed">
Today, we continue that mission as an 8x8 Certified Partner, helping organizations modernize their communications, streamline their operations, and focus on what matters most — their customers and their growth.
</p>
<p className="text-lg text-soft-text mt-4 leading-relaxed">
We continue the mission — bringing the same discipline, reliability, and commitment to every client relationship that we brought to our service.
</p>
</div>
</div>
</section>
{/* The Meaning Behind Queue North */}
<section className="bg-primary-navy py-20">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="text-center mb-12">
<h2 className="text-3xl md:text-4xl font-bold text-white mb-4">The Meaning Behind Queue North</h2>
<p className="text-lg text-white/70 max-w-2xl mx-auto leading-relaxed">
Queue is stability. North is responsible progress. The compass is how we guide customers with both.
</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-4xl mx-auto">
<div className="bg-white/10 border border-white/20 rounded-md p-8">
<div className="w-12 h-12 bg-primary-cyan/20 rounded-md flex items-center justify-center mb-5">
<svg className="h-6 w-6 text-primary-cyan" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
<rect x="7" y="7" width="10" height="10" rx="1" strokeLinejoin="round" />
<path strokeLinecap="round" strokeLinejoin="round" d="M9 7V5M12 7V5M15 7V5M9 17v2M12 17v2M15 17v2M7 9H5M7 12H5M7 15H5M17 9h2M17 12h2M17 15h2" />
</svg>
</div> </div>
<h3 className="text-xl font-bold text-primary-cyan mb-3">Queue</h3> <h1 className="mt-6 text-4xl md:text-5xl lg:text-6xl font-bold leading-tight">
<p className="text-white/80 leading-relaxed"> Accountable communications infrastructure, built around how your business actually works.
Rooted in technology that works — proven, stable, and repeatable. We focus on environments that behave predictably in real production conditions. </h1>
<p className="mt-6 text-lg md:text-xl text-white/75 max-w-3xl leading-relaxed">
Queue North helps organizations choose, implement, and support the phone, contact center, network, and IT systems that keep daily operations moving.
</p> </p>
<div className="mt-8 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">
Start a Conversation
<ArrowRight className="h-4 w-4" aria-hidden="true" />
</Link>
<Link to="/services" 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">
View Services
</Link>
</div>
</div> </div>
<div className="bg-white/10 border border-white/20 rounded-md p-8">
<div className="w-12 h-12 bg-primary-cyan/20 rounded-md flex items-center justify-center mb-5"> <div className="rounded-md border border-white/15 bg-white/10 p-6 shadow-xl backdrop-blur">
<svg className="h-6 w-6 text-primary-cyan" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}> <h2 className="text-lg font-semibold mb-5">At a glance</h2>
<path strokeLinecap="round" strokeLinejoin="round" d="M5 10l7-7m0 0l7 7m-7-7v18" /> <div className="space-y-4">
</svg> {proofPoints.map((point) => {
const Icon = point.icon
return (
<div key={point.label} className="flex gap-4">
<span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-md bg-white/10 text-primary-cyan">
<Icon className="h-5 w-5" aria-hidden="true" />
</span>
<div>
<h3 className="font-semibold">{point.label}</h3>
<p className="text-sm text-white/70">{point.detail}</p>
</div>
</div>
)
})}
</div> </div>
<h3 className="text-xl font-bold text-primary-cyan mb-3">North</h3>
<p className="text-white/80 leading-relaxed">
A <strong className="text-white font-semibold">responsible direction forward</strong> — evaluating and adopting new technology carefully, with governance, security, and long-term ownership in mind.
</p>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
{/* Our Values */} {/* Operating Model */}
<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">
<h2 className="text-3xl font-bold text-primary-navy mb-8 text-center">Our Values</h2> <div className="grid grid-cols-1 lg:grid-cols-[0.8fr_1.2fr] gap-10 lg:gap-14 items-start">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <div>
{[ <p className="text-sm font-semibold uppercase tracking-wide text-primary-blue">How we work</p>
{ title: 'Business First', desc: 'We focus on your business outcomes, not just technology' }, <h2 className="mt-3 text-3xl md:text-4xl font-bold text-primary-navy">
{ title: 'Honesty', desc: 'We tell you what you need, not just what we can sell' }, We bridge strategy, deployment, and long-term ownership.
{ title: 'Partnership', desc: 'We work with you, not just for you' }, </h2>
{ title: 'Expertise', desc: 'Our team has real, proven experience in your industry' }, <p className="mt-5 text-lg leading-relaxed text-soft-text">
{ title: 'Reliability', desc: 'When we say we will do something, we do it' }, Many businesses are asked to pick platforms before anyone has mapped the operational reality. Queue North starts with the environment, the people using it, and the support model that has to carry it after launch.
{ title: 'Support', desc: 'Our job doesn\'t end when installation completes' }, </p>
].map((value, index) => ( </div>
<div key={index} className="p-6 rounded-md border border-border bg-card shadow-sm hover:shadow-md transition-shadow">
<h3 className="text-xl font-semibold text-primary-navy mb-3">{value.title}</h3> <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
<p className="text-soft-text">{value.desc}</p> {operatingPrinciples.map((item) => {
</div> const Icon = item.icon
))} return (
<div key={item.title} className="rounded-md border border-border bg-white p-6 shadow-sm">
<span className="flex h-11 w-11 items-center justify-center rounded-md bg-section-alt text-primary-navy">
<Icon className="h-5 w-5" aria-hidden="true" />
</span>
<h3 className="mt-5 text-xl font-semibold text-primary-navy">{item.title}</h3>
<p className="mt-3 text-sm leading-relaxed text-soft-text">{item.desc}</p>
</div>
)
})}
</div>
</div> </div>
</div> </div>
</section> </section>
{/* Our Expertise */} {/* Meaning */}
<section className="bg-background py-16"> <section className="bg-white py-16 lg:py-20 border-y border-border">
<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">
<h2 className="text-3xl font-bold text-primary-navy mb-8 text-center">Our Expertise</h2> <div className="grid grid-cols-1 lg:grid-cols-[0.9fr_1.1fr] gap-10 lg:gap-14 items-start">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"> <div>
{[ <p className="text-sm font-semibold uppercase tracking-wide text-primary-blue">The name</p>
'8x8 Certified Partner', <h2 className="mt-3 text-3xl md:text-4xl font-bold text-primary-navy">
'VoIP and UCaaS Solutions', Queue is stability. North is responsible progress.
'Contact Center Implementation', </h2>
'Network Infrastructure', </div>
'Cloud Migration', <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
'Vendor-Neutral Consulting', <div className="rounded-md border border-border bg-background p-6">
'Disaster Recovery Planning', <Cpu className="h-7 w-7 text-primary-blue" aria-hidden="true" />
'24/7 Support & Monitoring', <h3 className="mt-5 text-xl font-semibold text-primary-navy">Queue</h3>
].map((expertise, index) => ( <p className="mt-3 text-sm leading-relaxed text-soft-text">
<div key={index} className="flex items-center gap-2 p-3 rounded-md border border-border bg-card"> Proven, repeatable technology that behaves predictably when customers, staff, and operations depend on it.
<div className="h-5 w-5 rounded-full bg-primary-navy text-white flex items-center justify-center flex-shrink-0"> </p>
<svg className="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"> </div>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" /> <div className="rounded-md border border-border bg-background p-6">
</svg> <Compass className="h-7 w-7 text-primary-blue" aria-hidden="true" />
<h3 className="mt-5 text-xl font-semibold text-primary-navy">North</h3>
<p className="mt-3 text-sm leading-relaxed text-soft-text">
A clear direction forward, with security, governance, supportability, and long-term ownership built into the plan.
</p>
</div>
</div>
</div>
</div>
</section>
{/* Capabilities */}
<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 lg:grid-cols-[0.75fr_1.25fr] gap-10 lg:gap-14 items-start">
<div>
<p className="text-sm font-semibold uppercase tracking-wide text-primary-blue">Expertise</p>
<h2 className="mt-3 text-3xl md:text-4xl font-bold text-primary-navy">
Practical coverage from assessment through support.
</h2>
<p className="mt-5 text-lg leading-relaxed text-soft-text">
We work across the pieces that make communications reliable: platforms, networks, users, support process, and vendor coordination.
</p>
</div>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
{capabilities.map((item) => (
<div key={item} className="flex items-center gap-3 rounded-md border border-border bg-white p-4">
<CheckCircle2 className="h-5 w-5 shrink-0 text-primary-blue" aria-hidden="true" />
<span className="text-sm font-medium text-text">{item}</span>
</div> </div>
<span className="text-sm font-medium text-text">{expertise}</span> ))}
</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">Ready to Learn More?</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">Need a cleaner path forward?</h2>
Schedule a free consultation with our communications experts to discuss your needs. <p className="mt-3 text-white/70 max-w-2xl">
</p> Talk with a team that can help evaluate the current state, recommend the right path, and stay accountable after deployment.
</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-5 text-sm font-semibold text-primary-navy hover:bg-section-alt transition-colors"
> >
Request Consultation Request Consultation
<ArrowRight className="h-4 w-4" aria-hidden="true" />
</Link> </Link>
</div> </div>
</div> </div>

4
src/pages/Industries.jsx
View File

@ -25,7 +25,7 @@ const Industries = () => {
<meta property="og:site_name" content="Queue North Technologies" /> <meta property="og:site_name" content="Queue North Technologies" />
</Helmet> </Helmet>
{/* Page Hero */} {/* Page Hero */}
<section className="bg-background py-16 md:py-24"> <section className="bg-background py-12 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> <div>
<h1 className="text-4xl md:text-5xl font-bold text-primary-navy mb-6">Industries We Serve</h1> <h1 className="text-4xl md:text-5xl font-bold text-primary-navy mb-6">Industries We Serve</h1>
@ -39,7 +39,7 @@ const Industries = () => {
{/* Industries Grid */} {/* Industries Grid */}
<section className="bg-background py-16"> <section className="bg-background py-16">
<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-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 IconComponent = industryIcons[industry.icon] || Building2
return ( return (

6
src/pages/IndustryDetail.jsx
View File

@ -10,7 +10,7 @@ const IndustryDetail = () => {
if (!industry) { if (!industry) {
return ( return (
<section className="bg-background py-16 md:py-24"> <section className="bg-background py-12 lg:py-20">
<Helmet> <Helmet>
<title>Industry Not Found | Queue North Technologies</title> <title>Industry Not Found | Queue North Technologies</title>
<meta name="description" content="The industry page you are looking for does not exist." /> <meta name="description" content="The industry page you are looking for does not exist." />
@ -45,7 +45,7 @@ const IndustryDetail = () => {
<meta property="og:site_name" content="Queue North Technologies" /> <meta property="og:site_name" content="Queue North Technologies" />
</Helmet> </Helmet>
{/* Page Hero */} {/* Page Hero */}
<section className="bg-background py-16 md:py-24"> <section className="bg-background py-12 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> <div>
<h1 className="text-4xl md:text-5xl font-bold text-primary-navy mb-6">{industry.name}</h1> <h1 className="text-4xl md:text-5xl font-bold text-primary-navy mb-6">{industry.name}</h1>
@ -102,7 +102,7 @@ const IndustryDetail = () => {
{/* Right Column - Sidebar */} {/* Right Column - Sidebar */}
<div className="lg:col-span-1"> <div className="lg:col-span-1">
<Card className="sticky top-24"> <Card className="lg:sticky top-24">
<CardHeader> <CardHeader>
<CardTitle className="text-primary-navy">Industry Insights</CardTitle> <CardTitle className="text-primary-navy">Industry Insights</CardTitle>
</CardHeader> </CardHeader>

2
src/pages/ServiceDetail.jsx
View File

@ -141,7 +141,7 @@ const ServiceDetail = () => {
{/* Right Column - Sidebar */} {/* Right Column - Sidebar */}
<div className="lg:col-span-1"> <div className="lg:col-span-1">
<Card className="sticky top-24"> <Card className="lg:sticky top-24">
<CardHeader> <CardHeader>
<CardTitle className="text-primary-navy">Quick Info</CardTitle> <CardTitle className="text-primary-navy">Quick Info</CardTitle>
</CardHeader> </CardHeader>

2
src/pages/Services.jsx
View File

@ -33,7 +33,7 @@ const Services = () => {
<script type="application/ld+json">{JSON.stringify(serviceLd)}</script> <script type="application/ld+json">{JSON.stringify(serviceLd)}</script>
</Helmet> </Helmet>
{/* Page Hero */} {/* Page Hero */}
<section className="bg-background py-16 lg:py-24"> <section className="bg-background py-12 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> <div>
<h1 className="text-4xl md:text-5xl font-bold text-primary-navy mb-6">Our Services</h1> <h1 className="text-4xl md:text-5xl font-bold text-primary-navy mb-6">Our Services</h1>

8
src/pages/Support.jsx
View File

@ -219,8 +219,8 @@ const Support = () => {
<section id="support-request" className="bg-background py-16 lg:py-20"> <section id="support-request" 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 lg:grid-cols-[0.9fr_1.1fr] gap-8 lg:gap-10 items-start"> <div className="grid grid-cols-1 lg:grid-cols-[0.9fr_1.1fr] gap-8 lg:gap-10 items-start">
{/* Left - Info */} {/* Left - Info — order 2 on mobile so form appears first */}
<div className="space-y-6"> <div className="order-2 lg:order-1 space-y-6">
<div className="rounded-md border border-border bg-white p-6 shadow-sm"> <div className="rounded-md border border-border bg-white p-6 shadow-sm">
<div className="flex items-start gap-4"> <div className="flex items-start gap-4">
<span className="flex h-11 w-11 shrink-0 items-center justify-center rounded-md bg-primary-navy text-white"> <span className="flex h-11 w-11 shrink-0 items-center justify-center rounded-md bg-primary-navy text-white">
@ -288,8 +288,8 @@ const Support = () => {
</div> </div>
</div> </div>
{/* Right - Form */} {/* Right - Form — order 1 on mobile so it appears first */}
<div> <div className="order-1 lg:order-2">
<form onSubmit={handleSubmit} noValidate className={`rounded-md border border-border bg-white p-6 shadow-sm lg:p-8 space-y-5 ${isSubmitting ? 'opacity-70 pointer-events-none' : ''}`}> <form onSubmit={handleSubmit} noValidate className={`rounded-md border border-border bg-white p-6 shadow-sm lg:p-8 space-y-5 ${isSubmitting ? 'opacity-70 pointer-events-none' : ''}`}>
<div className="border-b border-border pb-5"> <div className="border-b border-border pb-5">
<h2 className="text-2xl font-bold text-primary-navy">Submit a Request</h2> <h2 className="text-2xl font-bold text-primary-navy">Submit a Request</h2>