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

update

This commit is contained in:
null 2026-05-25 20:26:50 -05:00
parent afec6547c1
commit fd1e2b6f50
1 changed files with 66 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
src/pages/About.jsx
View File

@ -3,10 +3,10 @@ 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 },
{ label: '25+ years', detail: 'Communications and infrastructure experience', icon: Award, accent: 'text-primary-blue', bg: 'bg-sky-50', border: 'border-t-primary-blue' },
{ label: '8x8 certified', detail: 'Sales, engineering, build, deployment, and support', icon: BadgeCheck, accent: 'text-teal-600', bg: 'bg-teal-50', border: 'border-t-teal-500' },
{ label: 'Cisco certified', detail: 'Networking and communications implementation', icon: ShieldCheck, accent: 'text-cyan-600', bg: 'bg-cyan-50', border: 'border-t-cyan-400' },
{ label: 'Veteran owned', detail: 'Disciplined delivery and direct accountability', icon: Users, accent: 'text-amber-600', bg: 'bg-amber-50', border: 'border-t-accent-gold' },
]
const operatingPrinciples = [
@ -14,21 +14,33 @@ const operatingPrinciples = [
title: 'Own the outcome',
desc: 'We stay close to implementation details so decisions survive real production conditions.',
icon: Wrench,
accent: 'text-primary-blue',
bg: 'bg-sky-50',
border: 'border-t-primary-blue',
},
{
title: 'Recommend what fits',
desc: 'We align platforms, budgets, users, and support realities before anyone signs a contract.',
icon: Handshake,
accent: 'text-teal-600',
bg: 'bg-teal-50',
border: 'border-t-teal-500',
},
{
title: 'Design for operations',
desc: 'Documentation, migration planning, training, and escalation paths are part of the work.',
icon: Route,
accent: 'text-cyan-600',
bg: 'bg-cyan-50',
border: 'border-t-cyan-400',
},
{
title: 'Support after go-live',
desc: 'Our team remains accountable after deployment, when reliability starts to matter most.',
icon: Headphones,
accent: 'text-amber-600',
bg: 'bg-amber-50',
border: 'border-t-accent-gold',
},
]
@ -53,7 +65,16 @@ const About = () => {
/>
{/* Page Hero */}
<section className="bg-primary-navy py-12 lg:py-20 text-white">
<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/about-image.webp"
alt="Queue North team member reviewing communications infrastructure"
className="h-full w-full object-cover object-center"
/>
<div className="absolute inset-0 bg-primary-navy/88" />
<div className="absolute inset-0 bg-gradient-to-r from-primary-navy via-primary-navy/95 to-primary-navy/60" />
</div>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="grid grid-cols-1 lg:grid-cols-[1fr_0.75fr] gap-10 lg:gap-14 items-center">
<div>
@ -80,11 +101,11 @@ const About = () => {
<div className="rounded-md border border-white/15 bg-white/10 p-6 shadow-xl backdrop-blur">
<h2 className="text-lg font-semibold mb-5">At a glance</h2>
<div className="space-y-4">
<div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-1">
{proofPoints.map((point) => {
const Icon = point.icon
return (
<div key={point.label} className="flex gap-4">
<div key={point.label} className="flex gap-4 rounded-md border border-white/10 bg-white/5 p-3">
<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>
@ -102,7 +123,7 @@ const About = () => {
</section>
{/* Operating Model */}
<section className="bg-background py-16 lg:py-20">
<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="grid grid-cols-1 lg:grid-cols-[0.8fr_1.2fr] gap-10 lg:gap-14 items-start">
<div>
@ -119,11 +140,13 @@ const About = () => {
{operatingPrinciples.map((item) => {
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">
<div key={item.title} className={`rounded-md border border-border border-t-[3px] bg-white p-6 shadow-sm transition-all hover:shadow-md ${item.border}`}>
<div className="flex items-center gap-4">
<span className={`flex h-11 w-11 shrink-0 items-center justify-center rounded-md ${item.bg} ${item.accent}`}>
<Icon className="h-5 w-5" aria-hidden="true" />
</span>
<h3 className="mt-5 text-xl font-semibold text-primary-navy">{item.title}</h3>
<h3 className="text-left text-xl font-semibold text-primary-navy">{item.title}</h3>
</div>
<p className="mt-3 text-sm leading-relaxed text-soft-text">{item.desc}</p>
</div>
)
@ -134,7 +157,7 @@ const About = () => {
</section>
{/* Meaning */}
<section className="bg-white py-16 lg:py-20 border-y border-border">
<section className="bg-white py-16 lg:py-24 border-y border-border">
<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-10 lg:gap-14 items-start">
<div>
@ -144,15 +167,19 @@ const About = () => {
</h2>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-5">
<div className="rounded-md border border-border bg-background p-6">
<Cpu className="h-7 w-7 text-primary-blue" aria-hidden="true" />
<div className="rounded-md border border-border border-t-[3px] border-t-primary-blue bg-background p-6">
<span className="flex h-12 w-12 items-center justify-center rounded-md bg-sky-50 text-primary-blue">
<Cpu className="h-6 w-6" aria-hidden="true" />
</span>
<h3 className="mt-5 text-xl font-semibold text-primary-navy">Queue</h3>
<p className="mt-3 text-sm leading-relaxed text-soft-text">
Proven, repeatable technology that behaves predictably when customers, staff, and operations depend on it.
</p>
</div>
<div className="rounded-md border border-border bg-background p-6">
<Compass className="h-7 w-7 text-primary-blue" aria-hidden="true" />
<div className="rounded-md border border-border border-t-[3px] border-t-teal-500 bg-background p-6">
<span className="flex h-12 w-12 items-center justify-center rounded-md bg-teal-50 text-teal-600">
<Compass className="h-6 w-6" aria-hidden="true" />
</span>
<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.
@ -164,7 +191,7 @@ const About = () => {
</section>
{/* Capabilities */}
<section className="bg-background py-16 lg:py-20">
<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="grid grid-cols-1 lg:grid-cols-[0.75fr_1.25fr] gap-10 lg:gap-14 items-start">
<div>
@ -178,9 +205,9 @@ const About = () => {
</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" />
{capabilities.map((item, index) => (
<div key={item} className="flex items-center gap-3 rounded-md border border-border bg-white p-4 shadow-sm">
<CheckCircle2 className={`h-5 w-5 shrink-0 ${index % 2 === 0 ? 'text-primary-blue' : 'text-teal-600'}`} aria-hidden="true" />
<span className="text-sm font-medium text-text">{item}</span>
</div>
))}
@ -190,22 +217,30 @@ const About = () => {
</section>
{/* CTA */}
<section className="bg-primary-navy py-14 text-white">
<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="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6">
<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">Need a cleaner path forward?</h2>
<p className="mt-3 text-white/70 max-w-2xl">
Talk with a team that can help evaluate the current state, recommend the right path, and stay accountable after deployment.
</p>
</div>
<div className="mt-7 flex flex-col gap-3 sm:flex-row lg:mt-0 lg:flex-shrink-0">
<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"
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"
>
Request Consultation
<ArrowRight className="h-4 w-4" aria-hidden="true" />
</Link>
<a
href="tel:+13217308020"
className="inline-flex 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>