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

spacing

This commit is contained in:
null 2026-05-18 10:57:06 -05:00
parent fff92a40df
commit b04e5bbb04
2 changed files with 40 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
src/components/layout/Footer.jsx
View File

@ -40,21 +40,21 @@ const Footer = () => {
return ( return (
<footer className="bg-primary-navy text-white"> <footer className="bg-primary-navy text-white">
<div className="container mx-auto px-4 pt-20 pb-12"> <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 mb-8"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-8">
{/* Company Info */} {/* Company Info */}
<div> <div>
<div className="flex items-center gap-2 mb-4"> <Link to="/" className="inline-flex items-center gap-3 mb-3 group" aria-label="Queue North Technologies Home">
<img <img
src="/logo.png" src="/logo.png"
alt="Queue North" alt="Queue North Technologies"
className="h-8 w-auto" className="h-12 w-auto brightness-0 invert group-hover:opacity-80 transition-opacity"
/> />
<span className="font-bold text-lg">Queue North</span> <span className="font-bold text-xl tracking-tight text-white">Queue North</span>
</div> </Link>
<p className="text-navy-light text-sm mb-3">{companyInfo.tagline}</p> <p className="text-navy-light text-sm leading-relaxed mb-5">{companyInfo.tagline}</p>
<p className="text-navy-light text-sm mb-3">{companyInfo.address}</p> <p className="text-navy-light text-sm mb-3">{companyInfo.address}</p>
<div className="space-y-2 text-navy-light text-sm mb-3"> <div className="space-y-2 text-navy-light text-sm mb-6">
<div> <div>
<a href={`mailto:${companyInfo.email}`} className="hover:text-primary-cyan transition-colors" aria-label={`Send email to ${companyInfo.email}`}>{companyInfo.email}</a> <a href={`mailto:${companyInfo.email}`} className="hover:text-primary-cyan transition-colors" aria-label={`Send email to ${companyInfo.email}`}>{companyInfo.email}</a>
</div> </div>
@ -62,20 +62,23 @@ const Footer = () => {
<a href={`tel:+1${companyInfo.phone.replace(/\D/g, '')}`} className="hover:text-primary-cyan transition-colors" aria-label={`Call ${companyInfo.phone}`}>{companyInfo.phone}</a> <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>
<div> <div>
<a href={`tel:+1${companyInfo.tollFree.replace(/\D/g, '')}`} className="hover:text-primary-cyan transition-colors" aria-label={`Call ${companyInfo.tollFree}`}>{companyInfo.tollFree}</a> <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-block text-primary-cyan hover:underline" aria-label="Fill out the contact form">Contact Form</Link>
</div> </div>
<div className="mt-4"> <Link
<Link to="/contact" className="inline-flex items-center justify-center rounded-md text-sm font-medium h-9 px-4 bg-primary-cyan text-primary-navy hover:bg-primary-cyan/90 transition-colors" aria-label="Request a consultation"> to="/contact"
Request Consultation 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"
</Link> aria-label="Request a free consultation"
</div> >
<p className="text-navy-light text-xs">© {currentYear} Queue North Technologies. All rights reserved.</p> 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> </div>
{/* Quick Links */} {/* Quick Links */}
<div> <div className="lg:pt-16">
<h3 className="font-semibold mb-4 text-sm uppercase tracking-wider text-primary-cyan">Quick Links</h3> <h3 className="font-semibold mb-4 text-sm uppercase tracking-wider text-primary-cyan">Quick Links</h3>
<ul className="space-y-2"> <ul className="space-y-2">
{quickLinks.map((link) => ( {quickLinks.map((link) => (
@ -93,7 +96,7 @@ const Footer = () => {
</div> </div>
{/* Services */} {/* Services */}
<div> <div className="lg:pt-16">
<h3 className="font-semibold mb-4 text-sm uppercase tracking-wider text-primary-cyan">Services</h3> <h3 className="font-semibold mb-4 text-sm uppercase tracking-wider text-primary-cyan">Services</h3>
<ul className="space-y-2"> <ul className="space-y-2">
{services.map((service) => ( {services.map((service) => (
@ -111,7 +114,7 @@ const Footer = () => {
</div> </div>
{/* Industries */} {/* Industries */}
<div> <div className="lg:pt-16">
<h3 className="font-semibold mb-4 text-sm uppercase tracking-wider text-primary-cyan">Industries</h3> <h3 className="font-semibold mb-4 text-sm uppercase tracking-wider text-primary-cyan">Industries</h3>
<ul className="space-y-2"> <ul className="space-y-2">
{industries.map((industry) => ( {industries.map((industry) => (
@ -130,24 +133,25 @@ const Footer = () => {
</div> </div>
{/* Bottom */} {/* Bottom */}
<div className="border-t border-white/10 pt-8"> <div className="border-t border-white/10 pt-8 mt-8">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4"> <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
<div className="text-center md:text-left"> <div className="flex flex-col gap-1">
<p className="text-navy-light text-sm mb-2"> <p className="text-navy-light text-sm">
8x8 and Cisco Certified Partner | Veteran Owned | 25+ Years Experience 8x8 and Cisco Certified Partner &nbsp;·&nbsp; Veteran Owned &nbsp;·&nbsp; 25+ Years Experience
</p> </p>
<div className="flex justify-center md:justify-start gap-4 text-sm">
<a href="https://linkedin.com/company/queue-north-technologies-llc" target="_blank" rel="noopener noreferrer" className="text-primary-cyan hover:text-white transition-colors" aria-label="Follow Queue North on LinkedIn">
LinkedIn
</a>
</div>
</div>
<div className="text-center md:text-right">
<p className="text-navy-light text-xs"> <p className="text-navy-light text-xs">
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. © {currentYear} Queue North Technologies. All rights reserved.
</p> </p>
</div> </div>
<div className="flex items-center gap-6">
<a href="https://linkedin.com/company/queue-north-technologies-llc" target="_blank" rel="noopener noreferrer" className="text-primary-cyan hover:text-white transition-colors text-sm font-medium" aria-label="Follow Queue North on LinkedIn">
LinkedIn
</a>
</div>
</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>
</div> </div>
</footer> </footer>

4
src/components/layout/Header.jsx
View File

@ -56,7 +56,7 @@ const Header = () => {
<img <img
src="/logo.png" src="/logo.png"
alt="Queue North Technologies" alt="Queue North Technologies"
className="h-10 md:h-12 w-auto flex-shrink-0" className="h-10 md:h-12 w-auto flex-shrink-0 brightness-0 invert"
/> />
<span className="font-bold text-2xl text-white hidden sm:block tracking-tight">Queue North</span> <span className="font-bold text-2xl text-white hidden sm:block tracking-tight">Queue North</span>
</Link> </Link>
@ -133,7 +133,7 @@ const Header = () => {
<div className="flex flex-col h-full"> <div className="flex flex-col h-full">
<div className="flex items-center gap-3 mb-6"> <div className="flex items-center gap-3 mb-6">
<Link to="/" onClick={closeMobileMenu} className="flex items-center gap-3" aria-label="Queue North Technologies Home"> <Link to="/" onClick={closeMobileMenu} className="flex items-center gap-3" aria-label="Queue North Technologies Home">
<img src="/logo.png" alt="Queue North" className="h-14 w-auto" /> <img src="/logo.png" alt="Queue North" className="h-14 w-auto brightness-0 invert" />
<span className="font-bold text-2xl">Queue North</span> <span className="font-bold text-2xl">Queue North</span>
</Link> </Link>
</div> </div>