385 lines
20 KiB
JavaScript
385 lines
20 KiB
JavaScript
import SEO from '@/components/SEO'
|
|
import { websiteLd } from '@/lib/seo'
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/Card'
|
|
import { services } from '@/data/services'
|
|
import { industries } from '@/data/industries'
|
|
import { Link } from 'react-router-dom'
|
|
import { ArrowRight, MapPin, MessageCircle, Users, LifeBuoy, GraduationCap, Link as LinkIcon, Wifi, Network, Headphones, UserCheck, Activity, ShieldCheck, HeartPulse, ShoppingCart, Factory, Landmark, Building2 } from 'lucide-react'
|
|
|
|
// Icon map for industries - converts icon string to lucide component
|
|
const industryIcons = {
|
|
'heart-pulse': HeartPulse,
|
|
'shopping-cart': ShoppingCart,
|
|
factory: Factory,
|
|
landmark: Landmark,
|
|
}
|
|
|
|
const serviceAccentStyles = [
|
|
{
|
|
card: 'border-t-[3px] border-t-primary-blue hover:border-primary-blue/50',
|
|
iconWrap: 'bg-sky-50',
|
|
icon: 'text-primary-blue',
|
|
link: 'text-primary-blue hover:text-primary-navy',
|
|
},
|
|
{
|
|
card: 'border-t-[3px] border-t-teal-500 hover:border-teal-500/50',
|
|
iconWrap: 'bg-teal-50',
|
|
icon: 'text-teal-600',
|
|
link: 'text-teal-700 hover:text-primary-navy',
|
|
},
|
|
{
|
|
card: 'border-t-[3px] border-t-cyan-400 hover:border-cyan-400/60',
|
|
iconWrap: 'bg-cyan-50',
|
|
icon: 'text-cyan-600',
|
|
link: 'text-cyan-700 hover:text-primary-navy',
|
|
},
|
|
{
|
|
card: 'border-t-[3px] border-t-accent-gold hover:border-accent-gold/60',
|
|
iconWrap: 'bg-amber-50',
|
|
icon: 'text-amber-600',
|
|
link: 'text-amber-700 hover:text-primary-navy',
|
|
},
|
|
]
|
|
|
|
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 Home = () => {
|
|
// Single Organization entity — no LocalBusiness/address markup, since Queue North
|
|
// does not publish a physical location.
|
|
const organizationLd = {
|
|
'@context': 'https://schema.org',
|
|
'@type': 'Organization',
|
|
'@id': 'https://queuenorth.com/#organization',
|
|
name: 'Queue North Technologies',
|
|
url: 'https://queuenorth.com',
|
|
image: 'https://queuenorth.com/assets/og-image.png',
|
|
telephone: '+1-321-730-8020',
|
|
logo: {
|
|
'@type': 'ImageObject',
|
|
url: 'https://queuenorth.com/logo.png',
|
|
},
|
|
description: 'Veteran-owned 8x8 Certified Partner and Cisco Certified Partner providing business phone systems, UCaaS, contact center, IT support, and networking solutions.',
|
|
areaServed: {
|
|
'@type': 'Country',
|
|
name: 'United States',
|
|
},
|
|
contactPoint: [
|
|
{
|
|
'@type': 'ContactPoint',
|
|
telephone: '+1-321-730-8020',
|
|
contactType: 'customer service',
|
|
areaServed: 'US',
|
|
},
|
|
{
|
|
'@type': 'ContactPoint',
|
|
telephone: '+1-888-656-2850',
|
|
contactType: 'customer service',
|
|
contactOption: 'TollFree',
|
|
areaServed: 'US',
|
|
},
|
|
],
|
|
sameAs: [
|
|
'https://www.linkedin.com/company/queue-north-technologies-llc',
|
|
'https://www.facebook.com/QueueNorth',
|
|
'https://www.instagram.com/queue_north/',
|
|
],
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<SEO
|
|
title="Business Phone, UCaaS & IT Services | Queue North"
|
|
description="Veteran-owned 8x8 and Cisco Certified Partner delivering business phone systems, UCaaS, contact center, IT support, and networking. 25+ years."
|
|
url="https://queuenorth.com"
|
|
jsonLd={[organizationLd, websiteLd]}
|
|
/>
|
|
{/* Hero Section */}
|
|
<section className="relative isolate overflow-hidden bg-primary-navy text-white">
|
|
<div className="absolute inset-0 -z-10">
|
|
<img
|
|
src="/assets/hero-tech.webp"
|
|
alt="Queue North technician working inside a communications rack"
|
|
className="h-full w-full object-cover object-center"
|
|
loading="eager"
|
|
fetchPriority="high"
|
|
decoding="async"
|
|
/>
|
|
<div className="absolute inset-0 bg-primary-navy/65" />
|
|
<div className="absolute inset-0 bg-gradient-to-r from-primary-navy via-primary-navy/90 to-primary-navy/25" />
|
|
</div>
|
|
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 md:py-24 lg:py-28">
|
|
<div className="max-w-5xl">
|
|
<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">
|
|
Veteran-owned communications and infrastructure partner
|
|
</div>
|
|
<h1 className="mt-6 max-w-4xl text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold leading-[1.05]">
|
|
Business communications built for uptime, support, and accountability.
|
|
</h1>
|
|
<p className="mt-6 text-lg md:text-2xl text-white/80 max-w-2xl leading-relaxed">
|
|
Business phone, contact center, network, and IT support built around one accountable implementation partner.
|
|
</p>
|
|
<div className="mt-8 flex flex-col sm:flex-row gap-3">
|
|
<Link to="/contact#contact-form" className="inline-flex w-full sm:w-auto 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">
|
|
Schedule Consultation
|
|
<ArrowRight className="h-4 w-4" aria-hidden="true" />
|
|
</Link>
|
|
<Link to="/services" className="inline-flex w-full sm:w-auto h-11 items-center justify-center rounded-md border border-white/45 px-5 text-sm font-semibold text-white hover:bg-white/10 transition-colors">
|
|
View Services
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Partner Proof */}
|
|
<section className="bg-white border-b border-border py-6">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="grid grid-cols-2 gap-x-4 gap-y-6 lg:grid-cols-4">
|
|
<div className="flex flex-col items-center gap-2 lg:flex-row lg:gap-3 lg:justify-start">
|
|
<span className="flex h-16 w-20 shrink-0 items-center justify-center rounded-md border border-border bg-white p-2">
|
|
<img
|
|
src="/assets/brand/8x8-logo-dark-gray.png"
|
|
alt="8x8 Certified Partner logo"
|
|
className="h-full w-full object-contain"
|
|
loading="lazy"
|
|
decoding="async"
|
|
/>
|
|
</span>
|
|
<span className="text-sm font-semibold leading-tight text-primary-navy text-center lg:text-left">8x8 Certified Partner</span>
|
|
</div>
|
|
<div className="flex flex-col items-center gap-2 lg:flex-row lg:gap-3 lg:justify-start">
|
|
<span className="flex h-16 w-20 shrink-0 items-center justify-center rounded-md border border-border bg-white p-1 overflow-hidden">
|
|
<img
|
|
src="/assets/brand/cisco-partner-logo-midnight.svg"
|
|
alt="Cisco Partner certification logo"
|
|
className="h-full w-full object-contain scale-[1.5]"
|
|
loading="lazy"
|
|
decoding="async"
|
|
/>
|
|
</span>
|
|
<span className="text-sm font-semibold leading-tight text-primary-navy text-center lg:text-left">Cisco Certified Partner</span>
|
|
</div>
|
|
<div className="flex flex-col items-center gap-2 lg:flex-row lg:gap-3 lg:justify-start">
|
|
<span className="flex h-16 w-20 shrink-0 items-center justify-center rounded-md border border-border bg-white p-1">
|
|
<img
|
|
src="/assets/brand/veteran-owned-certified-mark.webp"
|
|
alt="SBA logo for Veteran-Owned Certified"
|
|
className="h-full w-full object-contain"
|
|
loading="lazy"
|
|
decoding="async"
|
|
/>
|
|
</span>
|
|
<span className="text-sm font-semibold leading-tight text-primary-navy text-center lg:text-left">Veteran-Owned Certified</span>
|
|
</div>
|
|
<div className="flex flex-col items-center gap-2 lg:flex-row lg:gap-3 lg:justify-start">
|
|
<span className="font-numeric flex h-16 w-20 shrink-0 items-center justify-center rounded-md border border-border bg-white text-2xl font-semibold text-primary-navy">
|
|
25+
|
|
</span>
|
|
<span className="text-sm font-semibold leading-tight text-primary-navy text-center lg:text-left">Years Experience</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Services Section */}
|
|
<section className="bg-background py-16 md:py-24">
|
|
<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-primary-navy mb-4">What We Handle</h2>
|
|
<p className="text-xl text-soft-text max-w-2xl mx-auto">
|
|
From phones to firewalls, we keep your business running
|
|
</p>
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{services.map((service, index) => {
|
|
const accent = serviceAccentStyles[index % serviceAccentStyles.length]
|
|
|
|
return (
|
|
<Card key={service.id} className={`h-full transition-all hover:shadow-md ${accent.card}`}>
|
|
<CardHeader>
|
|
<div className="flex items-center gap-3 mb-2">
|
|
<div className={`${accent.iconWrap} p-2 rounded-md`} aria-hidden="true">
|
|
{service.icon === 'message-circle' && <MessageCircle className={`w-6 h-6 ${accent.icon}`} />}
|
|
{service.icon === 'users' && <Users className={`w-6 h-6 ${accent.icon}`} />}
|
|
{service.icon === 'life-buoy' && <LifeBuoy className={`w-6 h-6 ${accent.icon}`} />}
|
|
{service.icon === 'graduation-cap' && <GraduationCap className={`w-6 h-6 ${accent.icon}`} />}
|
|
{service.icon === 'link' && <LinkIcon className={`w-6 h-6 ${accent.icon}`} />}
|
|
{service.icon === 'wifi' && <Wifi className={`w-6 h-6 ${accent.icon}`} />}
|
|
{service.icon === 'network' && <Network className={`w-6 h-6 ${accent.icon}`} />}
|
|
</div>
|
|
<CardTitle className="text-left text-primary-navy text-xl" aria-label={service.name}>{service.name}</CardTitle>
|
|
</div>
|
|
<CardDescription className="font-medium text-teal-900" aria-label={service.homeDesc}>{service.homeDesc}</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="flex flex-col gap-2">
|
|
<Link to={`/services/${service.id}`} className={`inline-flex items-center gap-1 text-sm font-semibold ${accent.link}`} aria-label={`Learn more about ${service.name}`}>
|
|
Learn more
|
|
<ArrowRight className="h-4 w-4" aria-hidden="true" />
|
|
</Link>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Why Queue North */}
|
|
<section className="bg-section-alt py-16 md:py-24">
|
|
<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-primary-navy mb-4">Why Queue North</h2>
|
|
<p className="text-xl text-soft-text max-w-2xl mx-auto mb-6">
|
|
Four concrete differentiators that set us apart
|
|
</p>
|
|
<div>
|
|
<Link to="/contact#contact-form" className="inline-flex items-center justify-center rounded-md text-sm font-medium h-10 px-4 py-2 bg-primary-navy text-white hover:bg-primary-navy-dark transition-colors">
|
|
Request Consultation
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
<Card className="bg-white/80 border-t-[3px] border-t-primary-blue">
|
|
<CardContent className="pt-6">
|
|
<div className="bg-sky-50 text-primary-blue p-3 rounded-md mb-4 inline-flex">
|
|
<Headphones className="w-6 h-6" />
|
|
</div>
|
|
<h3 className="text-lg font-semibold text-primary-navy mb-2">Responsiveness</h3>
|
|
<p className="text-sm text-soft-text">
|
|
When you call, a human answers: not a ticket queue, not a chatbot. Real support from people who know your system.
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
<Card className="bg-white/80 border-t-[3px] border-t-teal-500">
|
|
<CardContent className="pt-6">
|
|
<div className="bg-teal-50 text-teal-600 p-3 rounded-md mb-4 inline-flex">
|
|
<UserCheck className="w-6 h-6" />
|
|
</div>
|
|
<h3 className="text-lg font-semibold text-primary-navy mb-2">Direct Support</h3>
|
|
<p className="text-sm text-soft-text">
|
|
No account managers between you and the engineer solving your problem. You talk to the team that designed and deployed your system.
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
<Card className="bg-white/80 border-t-[3px] border-t-cyan-400">
|
|
<CardContent className="pt-6">
|
|
<div className="bg-cyan-50 text-cyan-600 p-3 rounded-md mb-4 inline-flex">
|
|
<Activity className="w-6 h-6" />
|
|
</div>
|
|
<h3 className="text-lg font-semibold text-primary-navy mb-2">Proactive Monitoring</h3>
|
|
<p className="text-sm text-soft-text">
|
|
We catch problems before you notice them. 24/7 monitoring means we're often resolving issues before your phone rings.
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
<Card className="bg-white/80 border-t-[3px] border-t-accent-gold">
|
|
<CardContent className="pt-6">
|
|
<div className="bg-amber-50 text-amber-600 p-3 rounded-md mb-4 inline-flex">
|
|
<ShieldCheck className="w-6 h-6" />
|
|
</div>
|
|
<h3 className="text-lg font-semibold text-primary-navy mb-2">Vendor Neutrality</h3>
|
|
<p className="text-sm text-soft-text">
|
|
As an 8x8 and Cisco Certified Partner, we recommend what works best for you, not what pays the highest commission. We've tested the alternatives so you don't have to.
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Industries Section */}
|
|
<section className="bg-background py-16 md:py-24">
|
|
<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-primary-navy mb-4">Industries We Serve</h2>
|
|
<p className="text-xl text-soft-text max-w-2xl mx-auto">
|
|
Tailored solutions for healthcare, retail, manufacturing, and more
|
|
</p>
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
{industries.map((industry, index) => {
|
|
const IconComponent = industryIcons[industry.icon] || Building2
|
|
const accent = industryAccentStyles[index % industryAccentStyles.length]
|
|
|
|
return (
|
|
<Card key={industry.id} className={`h-full transition-all hover:shadow-md ${accent.card}`}>
|
|
<CardContent className="p-6">
|
|
<div className={`w-14 h-14 rounded-md ${accent.iconWrap} flex items-center justify-center mb-4`} aria-hidden="true">
|
|
<IconComponent className={`w-8 h-8 ${accent.icon}`} />
|
|
</div>
|
|
<h3 className="text-left text-xl font-semibold text-primary-navy mb-3" aria-label={industry.name}>{industry.name}</h3>
|
|
<p className="text-sm text-soft-text mb-4" aria-label={industry.homeDesc || 'Industry-specific solutions designed to address your unique challenges and requirements.'}>{industry.homeDesc || 'Industry-specific solutions designed to address your unique challenges and requirements.'}</p>
|
|
<Link to={`/industries/${industry.id}`} className="inline-flex items-center gap-1 text-sm font-semibold text-primary-navy hover:text-primary-blue" aria-label={`Learn more about ${industry.name} industry solutions`}>
|
|
Learn more
|
|
<ArrowRight className="h-4 w-4" aria-hidden="true" />
|
|
</Link>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Final CTA - Free Migration Offer */}
|
|
<section className="bg-section-alt py-16 md:py-24">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
|
<h2 className="text-3xl md:text-4xl font-bold text-primary-navy mb-6">
|
|
What we'll help you do
|
|
</h2>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
|
|
<div className="flex items-start gap-3 justify-center sm:justify-start">
|
|
<div className="bg-primary-navy/10 p-2 rounded-md flex-shrink-0">
|
|
<MapPin className="w-5 h-5 text-primary-navy" />
|
|
</div>
|
|
<p className="text-center sm:text-left text-sm md:text-base text-soft-text">
|
|
Identify the features you actually need
|
|
</p>
|
|
</div>
|
|
<div className="flex items-start gap-3 justify-center sm:justify-start">
|
|
<div className="bg-teal-500/10 p-2 rounded-md flex-shrink-0">
|
|
<Users className="w-5 h-5 text-teal-600" />
|
|
</div>
|
|
<p className="text-center sm:text-left text-sm md:text-base text-soft-text">
|
|
Align solutions with operations and budget
|
|
</p>
|
|
</div>
|
|
<div className="flex items-start gap-3 justify-center sm:justify-start">
|
|
<div className="bg-teal-500/10 p-2 rounded-md flex-shrink-0">
|
|
<Network className="w-5 h-5 text-teal-600" />
|
|
</div>
|
|
<p className="text-center sm:text-left text-sm md:text-base text-soft-text">
|
|
Plan deployment, migration, and training
|
|
</p>
|
|
</div>
|
|
<div className="flex items-start gap-3 justify-center sm:justify-start">
|
|
<div className="bg-teal-600/10 p-2 rounded-md flex-shrink-0">
|
|
<ShieldCheck className="w-5 h-5 text-teal-600" />
|
|
</div>
|
|
<p className="text-center sm:text-left text-sm md:text-base text-teal-700 font-semibold">
|
|
Ask how you qualify for our free migration
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<p className="text-lg text-soft-text mb-8 max-w-2xl mx-auto">
|
|
Share a few details and we'll provide clear direction.
|
|
</p>
|
|
<Link to="/contact#contact-form" className="inline-flex items-center justify-center rounded-md text-sm font-medium h-10 px-6 bg-primary-navy text-white hover:bg-primary-navy-dark transition-colors">
|
|
Request Consultation
|
|
</Link>
|
|
</div>
|
|
</section>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default Home
|