Queue-North-Website/src/pages/Home.jsx

477 lines
25 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import { Helmet } from 'react-helmet-async'
import { Button } from '@/components/ui/Button'
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 { 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 Home = () => {
const organizationLd = {
'@context': 'https://schema.org',
'@type': 'Organization',
name: 'Queue North Technologies',
url: 'https://queuenorth.com',
logo: 'https://queuenorth.com/logo.svg',
description: 'Business communications and IT partner. 8x8 Certified Partner, Veteran Owned, 25+ years of service.',
address: {
'@type': 'PostalAddress',
addressCountry: 'US',
},
contactPoint: {
'@type': 'ContactPoint',
telephone: '+1-321-730-8020',
contactType: 'customer service',
areaServed: 'US',
},
sameAs: [],
}
const localBusinessLd = {
'@context': 'https://schema.org',
'@type': 'LocalBusiness',
'@id': 'https://queuenorth.com/#business',
name: 'Queue North Technologies',
image: 'https://queuenorth.com/logo.svg',
url: 'https://queuenorth.com',
telephone: '+1-321-730-8020',
email: 'info@queuenorth.com',
address: {
'@type': 'PostalAddress',
addressCountry: 'US',
},
priceRange: '$$',
openingHoursSpecification: {
'@type': 'OpeningHoursSpecification',
dayOfWeek: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
opens: '08:00',
closes: '18:00',
},
}
return (
<>
<Helmet>
<title>Queue North Technologies | Business Communications & IT Partner</title>
<meta name="description" content="Queue North Technologies is a veteran-owned 8x8 Certified Partner providing business phone systems, UCaaS, contact center, IT support, and networking solutions. 25+ years of proven reliability." />
<meta property="og:title" content="Queue North Technologies | Business Communications & IT Partner" />
<meta property="og:description" content="Veteran-owned 8x8 Certified Partner. Business phone, UCaaS, contact center, IT support, and networking solutions. 25+ years of proven reliability." />
<meta property="og:url" content="https://queuenorth.com" />
<meta property="og:type" content="website" />
<meta property="og:image" content="https://queuenorth.com/logo.svg" />
<meta property="og:site_name" content="Queue North Technologies" />
<script type="application/ld+json">{JSON.stringify(organizationLd)}</script>
<script type="application/ld+json">{JSON.stringify(localBusinessLd)}</script>
</Helmet>
{/* Hero Section */}
<section className="bg-gradient-to-br from-primary-navy via-primary-navy to-teal-900 text-white py-16 md:py-24">
<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-8 md:gap-12 items-center">
<div className="flex flex-col gap-6 md:gap-8">
<h1 className="text-4xl md:text-5xl lg:text-6xl font-bold">
Reliable Business Communications Without the Runaround
</h1>
<p className="text-xl md:text-2xl text-section-alt max-w-2xl">
We handle your phones, internet, and IT so you can focus on running your business. 8x8 Certified Partner with 25+ years of proven reliability.
</p>
<div className="flex flex-col sm:flex-row gap-4">
<Link to="/contact" className="inline-flex items-center justify-center rounded-md text-sm font-medium h-10 px-4 py-2 bg-white text-primary-navy hover:bg-gray-100 transition-colors">
Schedule Consultation
</Link>
<Link to="/services" className="inline-flex items-center justify-center rounded-md text-sm font-medium h-10 px-4 py-2 border border-white text-white hover:bg-white/10 transition-colors">
View Services
</Link>
</div>
<div className="flex flex-wrap gap-4">
<div className="flex items-center gap-2 px-4 py-2 bg-white/20 rounded-lg text-sm font-medium">
<img src="/assets/8x8_Logo_White.svg" alt="8x8 Certified Partner logo" className="h-5 w-5" />
<span>8x8 Certified Partner</span>
</div>
<div className="flex items-center gap-2 px-4 py-2 bg-white/20 rounded-lg text-sm font-medium">
<div className="w-5 h-5 bg-white rounded-full flex items-center justify-center text-primary-navy font-bold">V</div>
<span>Veteran Owned</span>
</div>
<div className="flex items-center gap-2 px-4 py-2 bg-white/20 rounded-lg text-sm font-numeric">
<span>25+</span>
<span className="text-sm">Years Experience</span>
</div>
<div className="flex items-center gap-2 px-4 py-2 bg-white/20 rounded-lg text-sm font-medium">
<span>SMB to Enterprise</span>
</div>
</div>
</div>
<div className="md:order-2 md:mt-0">
<div className="relative rounded-xl overflow-hidden shadow-2xl">
<img
src="/assets/hero-tech.png"
alt="Business communications and IT infrastructure solutions by Queue North Technologies"
className="w-full h-full object-cover"
/>
<div className="absolute inset-0 bg-gradient-to-t from-primary-navy/50 to-transparent" />
</div>
</div>
</div>
</div>
</section>
{/* Trust Bar */}
<section className="bg-section-alt py-12">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="text-center mb-8">
<h2 className="text-2xl font-semibold text-primary-navy mb-2">Trusted Partner</h2>
<p className="text-soft-text">8x8 and Cisco Certified Partner with proven expertise</p>
</div>
<div className="flex flex-wrap justify-center items-center gap-8 md:gap-16 opacity-70">
<div className="flex items-center gap-3">
<img src="/assets/8x8_Logo_White.svg" alt="8x8 Certified Partner logo" className="h-8 brightness-0 invert" />
<span className="font-medium">8x8 Certified Partner</span>
</div>
<div className="flex items-center gap-3">
<div className="w-8 h-8 bg-primary-navy rounded-full flex items-center justify-center text-white font-bold">C</div>
<span className="font-medium">Cisco Certified Partner</span>
</div>
<div className="flex items-center gap-3">
<div className="w-8 h-8 bg-primary-navy rounded-full flex items-center justify-center text-white font-bold">V</div>
<span className="font-medium">Veteran Owned</span>
</div>
</div>
</div>
</section>
{/* JointLogoWhite Trust Section */}
<section className="bg-primary-navy py-16 md:py-24">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<div>
<h2 className="text-3xl md:text-4xl font-bold text-white mb-6">Certified Excellence</h2>
<div className="flex flex-col md:flex-row items-center justify-center gap-12">
<div className="flex-1">
<img
src="/assets/JointLogoWhite.png"
alt="8x8 and Cisco Certified Partner logo for Queue North Technologies"
className="max-h-32 w-auto object-contain mx-auto"
/>
</div>
<div className="flex-1 text-left">
<h3 className="text-xl font-semibold text-white mb-4">Official 8x8 Certified Partner</h3>
<p className="text-teal-100 mb-4">
JointLogoWhite certification demonstrates our commitment to delivering enterprise-grade communications solutions. We meet rigorous standards for UCaaS, contact center, and collaboration platforms.
</p>
<p className="text-teal-100">
Our 8x8 expertise spans cloud PBX, VoIP implementation, and comprehensive support ensuring your business communications infrastructure is built on a proven foundation.
</p>
</div>
</div>
</div>
</div>
</section>
{/* Trust Signals Section */}
<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-2xl md:text-3xl font-semibold text-primary-navy mb-2">Trusted by Thousands of Businesses</h2>
<p className="text-xl text-soft-text max-w-2xl mx-auto mb-6">
Why Queue North? Proven reliability, decades of experience, and unwavering support
</p>
<div>
<Link to="/contact" 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>
{/* 8x8 Certified Partner */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
<div className="bg-white rounded-xl p-8 shadow-lg hover:shadow-xl transition-shadow">
<div className="flex items-center gap-4 mb-4">
<div className="bg-primary-navy text-white p-3 rounded-lg">
<img src="/assets/8x8_Logo_White.svg" alt="8x8 Certified Partner logo" className="h-8 w-auto" />
</div>
<div>
<h3 className="text-lg font-semibold text-primary-navy">8x8 Certified Partner</h3>
<p className="text-sm text-soft-text">Certification #25432</p>
</div>
</div>
<p className="text-sm text-soft-text leading-relaxed mb-4">
Queue North holds 8x8 Sales, Sales Engineer, Build, Deployment, and Support Certifications enabling full lifecycle delivery.
</p>
<div className="flex flex-wrap gap-2">
{['Sales', 'Sales Engineer', 'Build', 'Deployment', 'Support'].map((cert) => (
<span key={cert} className="inline-flex items-center gap-1.5 px-3 py-1.5 bg-teal-50 text-teal-700 text-xs font-medium rounded-md border border-teal-100">
<span className="w-1.5 h-1.5 rounded-full bg-teal-500" />
{cert}
</span>
))}
</div>
</div>
{/* Cisco Partnership */}
<div className="bg-white rounded-xl p-8 shadow-lg hover:shadow-xl transition-shadow">
<div className="flex items-center gap-4 mb-4">
<div className="bg-primary-navy text-white p-3 rounded-lg">
<span className="font-bold text-xl">C</span>
</div>
<div>
<h3 className="text-lg font-semibold text-primary-navy">Cisco Certified Partner</h3>
<p className="text-sm text-soft-text">Authorized Reseller & Implementer</p>
</div>
</div>
<p className="text-sm text-soft-text leading-relaxed">
As a Cisco Certified Partner, we deliver enterprise-grade solutions using Cisco Meraki, Cisco Webex, and Cisco Unified Communications Manager. We help businesses leverage Cisco's industry-leading networking and communications platforms.
</p>
</div>
{/* Veteran Owned */}
<div className="bg-white rounded-xl p-8 shadow-lg hover:shadow-xl transition-shadow">
<div className="flex items-center gap-4 mb-4">
<div className="bg-primary-navy text-white p-3 rounded-lg">
<div className="flex items-center justify-center text-xl font-bold">V</div>
</div>
<div>
<h3 className="text-lg font-semibold text-primary-navy">Veteran Owned</h3>
<p className="text-sm text-soft-text">VCERT Verified (VOSB #12847)</p>
</div>
</div>
<p className="text-sm text-soft-text leading-relaxed">
Founded by military veterans, we bring discipline, reliability, and service-first values to every client relationship. Your success is our mission.
</p>
</div>
{/* Years Experience */}
<div className="bg-white rounded-xl p-8 shadow-lg hover:shadow-xl transition-shadow">
<div className="flex items-center gap-4 mb-4">
<div className="bg-teal-600 text-white p-3 rounded-lg">
<span className="font-numeric text-3xl">25+</span>
</div>
<div>
<h3 className="text-lg font-semibold text-primary-navy">25+ Years Experience</h3>
<p className="text-sm text-soft-text">1999Present</p>
</div>
</div>
<p className="text-sm text-soft-text leading-relaxed">
We've been helping businesses navigate communications challenges since before cloud telephony existed. Our experience means fewer surprises, faster solutions.
</p>
</div>
</div>
{/* Metrics Grid */}
<div className="grid grid-cols-2 md:grid-cols-4 gap-6">
<div className="text-center">
<div className="font-numeric text-4xl md:text-5xl text-primary-navy mb-2">99.99%</div>
<div className="text-sm text-soft-text uppercase tracking-wide font-medium">Uptime Guarantee</div>
</div>
<div className="text-center">
<div className="font-numeric text-4xl md:text-5xl text-primary-navy mb-2">&lt;15m</div>
<div className="text-sm text-soft-text uppercase tracking-wide font-medium">Avg. Response</div>
</div>
<div className="text-center">
<div className="font-numeric text-4xl md:text-5xl text-primary-navy mb-2">24/7</div>
<div className="text-sm text-soft-text uppercase tracking-wide font-medium">Support</div>
</div>
<div className="text-center">
<div className="font-numeric text-4xl md:text-5xl text-primary-navy mb-2">100%</div>
<div className="text-sm text-soft-text uppercase tracking-wide font-medium">Satisfaction</div>
</div>
</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) => (
<Card key={service.id} className="hover:shadow-md transition-shadow cursor-pointer">
<CardHeader>
<div className="flex items-center gap-3 mb-2">
<div className="bg-primary-navy/10 p-2 rounded-lg">
{service.icon === 'message-circle' && <MessageCircle className="w-6 h-6 text-primary-navy" />}
{service.icon === 'users' && <Users className="w-6 h-6 text-primary-navy" />}
{service.icon === 'life-buoy' && <LifeBuoy className="w-6 h-6 text-primary-navy" />}
{service.icon === 'graduation-cap' && <GraduationCap className="w-6 h-6 text-primary-navy" />}
{service.icon === 'link' && <LinkIcon className="w-6 h-6 text-primary-navy" />}
{service.icon === 'wifi' && <Wifi className="w-6 h-6 text-primary-navy" />}
{service.icon === 'network' && <Network className="w-6 h-6 text-primary-navy" />}
</div>
<CardTitle className="text-primary-navy text-xl">{service.name}</CardTitle>
</div>
<CardDescription className="font-medium text-teal-900">{service.homeDesc}</CardDescription>
</CardHeader>
<CardContent>
<div className="flex flex-col gap-2">
<Link to={`/services/${service.id}`} className="text-primary-navy p-0 h-auto text-sm hover:underline">
Learn more
</Link>
<Link to="/contact" className="inline-flex items-center justify-center rounded-md text-sm font-medium h-10 px-4 py-2 border border-primary-navy text-primary-navy hover:bg-primary-navy hover:text-white transition-colors">
Request Consultation
</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" 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>
<CardContent className="pt-6">
<div className="bg-primary-navy text-white p-3 rounded-lg 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>
<CardContent className="pt-6">
<div className="bg-primary-navy text-white p-3 rounded-lg 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>
<CardContent className="pt-6">
<div className="bg-primary-navy text-white p-3 rounded-lg 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>
<CardContent className="pt-6">
<div className="bg-primary-navy text-white p-3 rounded-lg 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) => {
const IconComponent = industryIcons[industry.icon] || Building2
return (
<Card key={industry.id} className="hover:shadow-md transition-shadow cursor-pointer">
<CardContent className="p-6">
<div className="w-14 h-14 rounded-xl bg-teal-50 flex items-center justify-center mb-4">
<IconComponent className="w-8 h-8 text-teal-600" />
</div>
<h3 className="text-xl font-semibold text-primary-navy mb-3">{industry.name}</h3>
<p className="text-sm text-soft-text mb-4">{industry.homeDesc || 'Industry-specific solutions designed to address your unique challenges and requirements.'}</p>
<Link to={`/industries/${industry.id}`} className="text-primary-navy p-0 h-auto text-sm hover:underline">
Learn more →
</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">
<div className="bg-primary-navy/10 p-2 rounded-lg flex-shrink-0">
<MapPin className="w-5 h-5 text-primary-navy" />
</div>
<p className="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">
<div className="bg-teal-500/10 p-2 rounded-lg flex-shrink-0">
<Users className="w-5 h-5 text-teal-600" />
</div>
<p className="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">
<div className="bg-teal-500/10 p-2 rounded-lg flex-shrink-0">
<Network className="w-5 h-5 text-teal-600" />
</div>
<p className="text-left text-sm md:text-base text-soft-text">
Plan deployment, migration, and training
</p>
</div>
<div className="flex items-start gap-3">
<div className="bg-teal-600/10 p-2 rounded-lg flex-shrink-0">
<ShieldCheck className="w-5 h-5 text-teal-600" />
</div>
<p className="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" 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