215 lines
10 KiB
JavaScript
215 lines
10 KiB
JavaScript
import { Link } from 'react-router-dom'
|
|
|
|
const Footer = () => {
|
|
const currentYear = new Date().getFullYear()
|
|
|
|
const companyInfo = {
|
|
name: 'Queue North Technologies',
|
|
tagline: 'Modern communications infrastructure without the vendor noise.',
|
|
addressLine1: '7901 4th St N',
|
|
addressLine2: 'St. Petersburg, FL 33702',
|
|
phone: '(321) 730-8020',
|
|
tollFree: '(888) 656-2850',
|
|
}
|
|
|
|
const quickLinks = [
|
|
{ name: 'Home', href: '/' },
|
|
{ name: 'Services', href: '/services' },
|
|
{ name: 'Industries', href: '/industries' },
|
|
{ name: 'About', href: '/about' },
|
|
{ name: 'Contact', href: '/contact' },
|
|
{ name: 'Support', href: '/support' },
|
|
]
|
|
|
|
const services = [
|
|
{ name: 'Unified Communications', href: '/services/unified-communications' },
|
|
{ name: 'Contact Center', href: '/services/contact-center' },
|
|
{ name: 'Managed Support', href: '/services/managed-support' },
|
|
{ name: 'Consulting & Training', href: '/services/consulting-training' },
|
|
{ name: 'Infrastructure Cabling', href: '/services/infrastructure-cabling' },
|
|
{ name: 'Wireless Access', href: '/services/wireless-access' },
|
|
{ name: 'Local Networking', href: '/services/local-networking' },
|
|
]
|
|
|
|
const industries = [
|
|
{ name: 'Healthcare', href: '/industries/healthcare' },
|
|
{ name: 'Retail', href: '/industries/retail' },
|
|
{ name: 'Manufacturing', href: '/industries/manufacturing' },
|
|
{ name: 'Education & Finance', href: '/industries/education-finance' },
|
|
]
|
|
|
|
return (
|
|
<footer className="bg-primary-navy text-white">
|
|
<div className="container mx-auto px-4 pt-24 pb-12">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
|
{/* Company Info */}
|
|
<div>
|
|
<Link to="/" className="flex items-center gap-3 mb-3 group" aria-label="Queue North Technologies Home">
|
|
<img
|
|
src="/logo.png"
|
|
alt="Queue North Technologies"
|
|
className="brand-logo-on-dark h-12 w-auto shrink-0 transition-opacity group-hover:opacity-90"
|
|
/>
|
|
<span className="font-bold text-xl leading-tight tracking-tight text-white whitespace-nowrap">Queue North Technologies</span>
|
|
</Link>
|
|
<p className="text-navy-light text-sm leading-relaxed mb-5">{companyInfo.tagline}</p>
|
|
<a
|
|
href="https://maps.google.com/?q=7901+4th+St+N+St+Petersburg+FL+33702"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="block text-navy-light text-sm mb-3 hover:text-primary-cyan transition-colors leading-relaxed"
|
|
aria-label="View Queue North office on Google Maps"
|
|
>
|
|
<span className="block">{companyInfo.addressLine1}</span>
|
|
<span className="block">{companyInfo.addressLine2}</span>
|
|
</a>
|
|
<div className="space-y-2 text-navy-light text-sm mb-6">
|
|
<div>
|
|
<a href={`tel:+1${companyInfo.phone.replace(/\D/g, '')}`} className="hover:text-primary-cyan transition-colors" aria-label={`Call ${companyInfo.phone}`}>{companyInfo.phone}</a>
|
|
</div>
|
|
<div>
|
|
<a href={`tel:+1${companyInfo.tollFree.replace(/\D/g, '')}`} className="hover:text-primary-cyan transition-colors" aria-label={`Call toll-free ${companyInfo.tollFree}`}>{companyInfo.tollFree} (Toll-Free)</a>
|
|
</div>
|
|
</div>
|
|
<Link
|
|
to="/contact"
|
|
className="inline-flex items-center gap-2 rounded-md text-sm font-semibold px-5 py-2.5 bg-primary-cyan text-primary-navy hover:bg-white transition-colors duration-200"
|
|
aria-label="Request a free consultation"
|
|
>
|
|
Get a Free Quote
|
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3" />
|
|
</svg>
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Quick Links */}
|
|
<div className="lg:pt-16">
|
|
<h3 className="font-semibold mb-4 text-sm uppercase tracking-wider text-primary-cyan">Quick Links</h3>
|
|
<ul className="space-y-2">
|
|
{quickLinks.map((link) => (
|
|
<li key={link.name}>
|
|
<Link
|
|
to={link.href}
|
|
className="text-navy-light hover:text-white transition-colors text-sm"
|
|
aria-label={link.name}
|
|
>
|
|
{link.name}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
|
|
{/* Services */}
|
|
<div className="lg:pt-16">
|
|
<h3 className="font-semibold mb-4 text-sm uppercase tracking-wider text-primary-cyan">Services</h3>
|
|
<ul className="space-y-2">
|
|
{services.map((service) => (
|
|
<li key={service.name}>
|
|
<Link
|
|
to={service.href}
|
|
className="text-navy-light hover:text-white transition-colors text-sm"
|
|
aria-label={service.name}
|
|
>
|
|
{service.name}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
|
|
{/* Industries */}
|
|
<div className="lg:pt-16">
|
|
<h3 className="font-semibold mb-4 text-sm uppercase tracking-wider text-primary-cyan">Industries</h3>
|
|
<ul className="space-y-2">
|
|
{industries.map((industry) => (
|
|
<li key={industry.name}>
|
|
<Link
|
|
to={industry.href}
|
|
className="text-navy-light hover:text-white transition-colors text-sm"
|
|
aria-label={industry.name}
|
|
>
|
|
{industry.name}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Veteran Owned & Operated */}
|
|
<div className="border-t border-white/10 mt-10 py-6">
|
|
<div className="flex flex-col items-center gap-4 text-center">
|
|
<p className="text-primary-cyan text-xs font-semibold uppercase tracking-[0.18em]">
|
|
Veteran Owned & Operated
|
|
</p>
|
|
<div className="flex flex-wrap justify-center gap-2">
|
|
<span className="rounded-md border border-white/10 bg-white/5 px-3 py-2 text-xs font-semibold uppercase tracking-wide text-white/85">
|
|
United States Marine Corps
|
|
</span>
|
|
<span className="rounded-md border border-white/10 bg-white/5 px-3 py-2 text-xs font-semibold uppercase tracking-wide text-white/85">
|
|
United States Air Force
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Bottom */}
|
|
<div className="border-t border-white/10 pt-8">
|
|
<div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
|
|
<div className="flex flex-col gap-1">
|
|
<p className="text-navy-light text-xs">
|
|
© {currentYear} Queue North Technologies. All rights reserved.
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center gap-4">
|
|
<a
|
|
href="https://linkedin.com/company/queue-north-technologies-llc"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-navy-light hover:text-primary-cyan transition-colors"
|
|
aria-label="Follow Queue North on LinkedIn"
|
|
>
|
|
<svg className="h-5 w-5" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
|
|
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
|
|
</svg>
|
|
<span className="sr-only">LinkedIn</span>
|
|
</a>
|
|
<a
|
|
href="https://www.facebook.com/QueueNorth"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-navy-light hover:text-primary-cyan transition-colors"
|
|
aria-label="Follow Queue North on Facebook"
|
|
>
|
|
<svg className="h-5 w-5" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
|
|
<path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
|
|
</svg>
|
|
<span className="sr-only">Facebook</span>
|
|
</a>
|
|
<a
|
|
href="https://www.instagram.com/queue_north/"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-navy-light hover:text-primary-cyan transition-colors"
|
|
aria-label="Follow Queue North Technologies on Instagram"
|
|
>
|
|
<svg className="h-5 w-5" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
|
|
<path d="M7.75 2h8.5A5.76 5.76 0 0122 7.75v8.5A5.76 5.76 0 0116.25 22h-8.5A5.76 5.76 0 012 16.25v-8.5A5.76 5.76 0 017.75 2zm0 2A3.75 3.75 0 004 7.75v8.5A3.75 3.75 0 007.75 20h8.5A3.75 3.75 0 0020 16.25v-8.5A3.75 3.75 0 0016.25 4h-8.5zM12 7a5 5 0 110 10 5 5 0 010-10zm0 2a3 3 0 100 6 3 3 0 000-6zm5.25-2.5a1.25 1.25 0 110 2.5 1.25 1.25 0 010-2.5z" />
|
|
</svg>
|
|
<span className="sr-only">Instagram</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<p className="text-navy-light text-xs mt-4">
|
|
8x8® is a registered trademark of 8x8, Inc. Queue North Technologies is an independent certified partner and is not owned or operated by 8x8, Inc.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
)
|
|
}
|
|
|
|
export default Footer
|