{point.label}
diff --git a/src/pages/Contact.jsx b/src/pages/Contact.jsx index 1941a46..88d08be 100644 --- a/src/pages/Contact.jsx +++ b/src/pages/Contact.jsx @@ -8,6 +8,7 @@ import { Select } from '@/components/ui/Select' import RecaptchaPlaceholder from '@/components/RecaptchaPlaceholder' import { submitLead } from '@/lib/api' import { useDebounce } from '@/hooks/useDebounce' +import { ArrowRight } from 'lucide-react' const Contact = () => { const [formState, setFormState] = useState({ @@ -148,17 +149,36 @@ const Contact = () => { /> {/* Hero */} -
+ 
+
+
+
+
+
+
+
+ Contact Queue North
+
Let's Talk
Tell us about your business and we'll cut through the noise to find what actually works for you.
+ + Send a Message + +
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index f12b102..f0b6d36 100644
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -170,21 +170,21 @@ const Home = () => {
-
+
8x8 Certified Partner
8x8 Certified Partner
-
+
Cisco Certified Partner
diff --git a/src/pages/Industries.jsx b/src/pages/Industries.jsx
index 7843f65..bad44c5 100644
--- a/src/pages/Industries.jsx
+++ b/src/pages/Industries.jsx
@@ -10,6 +10,13 @@ const iconMap = {
'landmark': Landmark,
}
+const industryAccentStyles = [
+ { card: 'border-t-[3px] border-t-rose-400 hover:border-rose-400/60', iconWrap: 'bg-rose-50', icon: 'text-rose-600' },
+ { card: 'border-t-[3px] border-t-primary-blue hover:border-primary-blue/50', iconWrap: 'bg-sky-50', icon: 'text-primary-blue' },
+ { card: 'border-t-[3px] border-t-accent-gold hover:border-accent-gold/60', iconWrap: 'bg-amber-50', icon: 'text-amber-600' },
+ { card: 'border-t-[3px] border-t-teal-500 hover:border-teal-500/50', iconWrap: 'bg-teal-50', icon: 'text-teal-600' },
+]
+
const Industries = () => {
return (
<>
@@ -20,7 +27,16 @@ const Industries = () => {
/>
{/* Hero */}
-
+
+
Cisco Certified Partner
diff --git a/src/pages/Industries.jsx b/src/pages/Industries.jsx
index 7843f65..bad44c5 100644
--- a/src/pages/Industries.jsx
+++ b/src/pages/Industries.jsx
@@ -10,6 +10,13 @@ const iconMap = {
'landmark': Landmark,
}
+const industryAccentStyles = [
+ { card: 'border-t-[3px] border-t-rose-400 hover:border-rose-400/60', iconWrap: 'bg-rose-50', icon: 'text-rose-600' },
+ { card: 'border-t-[3px] border-t-primary-blue hover:border-primary-blue/50', iconWrap: 'bg-sky-50', icon: 'text-primary-blue' },
+ { card: 'border-t-[3px] border-t-accent-gold hover:border-accent-gold/60', iconWrap: 'bg-amber-50', icon: 'text-amber-600' },
+ { card: 'border-t-[3px] border-t-teal-500 hover:border-teal-500/50', iconWrap: 'bg-teal-50', icon: 'text-teal-600' },
+]
+
const Industries = () => {
return (
<>
@@ -20,7 +27,16 @@ const Industries = () => {
/>
{/* Hero */}
-
+ 
+
+
+
+
+
+
@@ -45,18 +61,27 @@ const Industries = () => {
{/* Industries Grid */}
-
+
+
+
Industry fit
+Communications needs change by environment.
++ We adapt platform, network, and support recommendations to the way your teams actually operate. +
+
- {industries.map((industry) => {
+ {industries.map((industry, index) => {
const Icon = iconMap[industry.icon] || Building2
+ const accent = industryAccentStyles[index % industryAccentStyles.length]
+
return (
-
-
+
+
+
{industry.name}
{industry.shortDesc}
@@ -84,22 +109,30 @@ const Industries = () => { {/* CTA */} -
-
+
+
+
-
- Talk to a Specialist
-
-
+
diff --git a/src/pages/IndustryDetail.jsx b/src/pages/IndustryDetail.jsx
index 8bd5726..35eadac 100644
--- a/src/pages/IndustryDetail.jsx
+++ b/src/pages/IndustryDetail.jsx
@@ -3,6 +3,7 @@ import { useParams } from 'react-router-dom'
import { industries } from '@/data/industries'
import { Link } from 'react-router-dom'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card'
+import { AlertCircle, ArrowLeft, ArrowRight, Building2, CheckCircle2 } from 'lucide-react'
const IndustryDetail = () => {
const { slug } = useParams()
@@ -41,17 +42,30 @@ const IndustryDetail = () => {
url={industryUrl}
/>
{/* Page Hero */}
- Don't see your industry?
We work with businesses across all sectors. If you have specific compliance, connectivity, or workflow requirements, let's talk.
+
+ Talk to a Specialist
+
+
+
+ Call (321) 730-8020
+
+
+ 
+
+
+
+
+
+
-
+
-
{/* Main Content */}
- {industry.name}
-{industry.shortDesc}
+
+
+
+ Industries
+
+
{industry.name}
+{industry.shortDesc}
{/* Left Column - Main Content */}
@@ -67,13 +81,9 @@ const IndustryDetail = () => {
Pain Points We Solve
{industry.painPoints.map((painPoint, index) => (
-
-
@@ -83,13 +93,9 @@ const IndustryDetail = () => {
-
-
- {painPoint}
+
+
+ {painPoint}
))}
Our Solutions
{industry.solutions.map((solution, index) => (
-
-
@@ -98,9 +104,14 @@ const IndustryDetail = () => {
{/* Right Column - Sidebar */}
-
-
- {solution}
+
+
+ {solution}
))}
-
+
- Industry Insights
+
+
+
+
+ Industry Insights
+
@@ -108,8 +119,9 @@ const IndustryDetail = () => {
{industry.name}
-
+
Request Consultation
+
diff --git a/src/pages/NotFound.jsx b/src/pages/NotFound.jsx
index eb8ed4e..bb8dbdb 100644
--- a/src/pages/NotFound.jsx
+++ b/src/pages/NotFound.jsx
@@ -1,5 +1,6 @@
import { Helmet } from 'react-helmet-async'
import { Link } from 'react-router-dom'
+import { ArrowRight, Compass } from 'lucide-react'
export default function NotFound() {
return (
@@ -8,15 +9,31 @@ export default function NotFound() {
Page Not Found | Queue North Technologies
-
-
-
404
-The page you're looking for doesn't exist.
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 404
+This page lost direction.
++ The page you're looking for does not exist, but we can get you back to the right place. +
+
+
Back to Home
+
-
+
Contact Us
diff --git a/src/pages/ServiceDetail.jsx b/src/pages/ServiceDetail.jsx
index 5398596..47cfbaf 100644
--- a/src/pages/ServiceDetail.jsx
+++ b/src/pages/ServiceDetail.jsx
@@ -3,7 +3,7 @@ import { useParams } from 'react-router-dom'
import { services } from '@/data/services'
import { Link } from 'react-router-dom'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card'
-import { ArrowRight, CheckCircle2, Zap } from 'lucide-react'
+import { ArrowLeft, ArrowRight, CheckCircle2, Info, Zap } from 'lucide-react'
const serviceImageAlt = {
'contact-center': 'Modern contact center operations dashboard and support team',
@@ -39,8 +39,6 @@ const ServiceDetail = () => {
const serviceTitle = `${service.name} | Queue North Technologies`
const serviceDesc = service.shortDesc || `Learn about ${service.name} from Queue North Technologies.`
const serviceUrl = `https://queuenorth.com/services/${service.id}`
- const hasServiceImage = Boolean(service.image)
-
const serviceDetailLd = {
'@context': 'https://schema.org',
'@type': 'Service',
@@ -66,39 +64,38 @@ const ServiceDetail = () => {
jsonLd={serviceDetailLd}
/>
{/* Page Hero */}
-
+ ![{serviceImageAlt[service.id]]({service.image)
+
+
+
-
+
+
{/* Main Content */}
-
-
+
+
Services
-
-
- {hasServiceImage && (
- {service.name}
-{service.shortDesc}
+{service.name}
+{service.shortDesc}
-
+
Request This Service
- ![{serviceImageAlt[service.id]]({service.image})
-
-
- )}
{/* Left Column - Main Content */}
@@ -114,9 +111,9 @@ const ServiceDetail = () => {
Key Benefits
{service.benefits.map((benefit, index) => (
-
-
- {benefit}
+
@@ -126,9 +123,9 @@ const ServiceDetail = () => {
+
+ {benefit}
))}
Ideal For
{service.idealFor.map((item, index) => (
-
-
- {item}
+
@@ -137,9 +134,14 @@ const ServiceDetail = () => {
{/* Right Column - Sidebar */}
+
+ {item}
))}
-
+
- Quick Info
+
+
+
+
+ Quick Info
+
diff --git a/src/pages/Support.jsx b/src/pages/Support.jsx
index be3c432..55e2809 100644
--- a/src/pages/Support.jsx
+++ b/src/pages/Support.jsx
@@ -152,7 +152,16 @@ const Support = () => {
url="https://queuenorth.com/support"
/>
{/* Page Hero */}
-
+
+
+
+
+
+
+
+
+
@@ -222,12 +231,12 @@ const Support = () => {
{/* Support Form */}
-
+
{/* Left - Info — order 2 on mobile so form appears first */}
-
+
-
@@ -256,7 +265,7 @@ const Support = () => {
+
-
@@ -276,7 +285,7 @@ const Support = () => {
+
@@ -296,7 +305,7 @@ const Support = () => {
{/* Right - Form — order 1 on mobile so it appears first */}
-