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

fix: desktop dropdown nav, Button→Link, Contact scroll-to-form (#109 #102 #105) (batch 9.3)

This commit is contained in:
null 2026-05-17 21:44:48 -05:00
parent a5d9d142d5
commit 8adb9cdb76
3 changed files with 144 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -65,13 +65,46 @@ const Header = () => {
{/* Desktop Nav */} {/* Desktop Nav */}
<nav className="hidden md:flex items-center gap-6"> <nav className="hidden md:flex items-center gap-6">
{navLinks.map((link) => ( {navLinks.map((link) => (
<Link <div key={link.name} className="relative group">
key={link.name} <Link
to={link.href} to={link.href}
className={`text-sm font-medium transition-colors ${isActive(link.href) ? 'text-white underline underline-offset-4' : 'text-white/70 hover:text-white'}`} className={`text-sm font-medium transition-colors ${isActive(link.href) ? 'text-white underline underline-offset-4' : 'text-white/70 hover:text-white'}`}
> >
{link.name} {link.name}
</Link> </Link>
{/* Services Dropdown */}
{link.name === 'Services' && (
<div className="absolute top-full left-0 mt-2 w-64 bg-white rounded-lg shadow-xl border border-gray-200 hidden group-hover:block">
<div className="p-2">
{serviceLinks.map((service) => (
<Link
key={service.name}
to={service.href}
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded-md transition-colors"
>
{service.name}
</Link>
))}
</div>
</div>
)}
{/* Industries Dropdown */}
{link.name === 'Industries' && (
<div className="absolute top-full left-0 mt-2 w-64 bg-white rounded-lg shadow-xl border border-gray-200 hidden group-hover:block">
<div className="p-2">
{industryLinks.map((industry) => (
<Link
key={industry.name}
to={industry.href}
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded-md transition-colors"
>
{industry.name}
</Link>
))}
</div>
</div>
)}
</div>
))} ))}
</nav> </nav>

8
src/pages/Contact.jsx
View File

@ -142,16 +142,16 @@ const Contact = () => {
</div> </div>
</div> </div>
<div className="mb-8"> <div className="mb-8">
<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"> <a href="#contact-form" className="inline-flex items-center justify-center rounded-md text-sm font-medium h-10 px-6 bg-primary-cyan text-primary-navy hover:bg-cyan-600 transition-colors">
Request Consultation Fill Out the Form
</Link> </a>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
{/* Contact Form */} {/* Contact Form */}
<section className="bg-background py-16"> <section id="contact-form" className="bg-background py-16">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12"> <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
{/* Left - Info */} {/* Left - Info */}

204
src/pages/Home.jsx
View File

@ -3,7 +3,7 @@ import { Button } from '@/components/ui/Button'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/Card' import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/Card'
import { services } from '@/data/services' import { services } from '@/data/services'
import { industries } from '@/data/industries' import { industries } from '@/data/industries'
import { useNavigate } from 'react-router-dom' 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' 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 // Icon map for industries - converts icon string to lucide component
@ -15,8 +15,6 @@ const industryIcons = {
} }
const Home = () => { const Home = () => {
const navigate = useNavigate()
const organizationLd = { const organizationLd = {
'@context': 'https://schema.org', '@context': 'https://schema.org',
'@type': 'Organization', '@type': 'Organization',
@ -85,12 +83,12 @@ const Home = () => {
We handle your phones, internet, and IT so you can focus on running your business. 8x8 Certified Partner with 25+ years of proven reliability. 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> </p>
<div className="flex flex-col sm:flex-row gap-4"> <div className="flex flex-col sm:flex-row gap-4">
<Button variant="default" size="lg" className="bg-white text-primary-navy hover:bg-gray-100" onClick={() => navigate('/contact')}> <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 Schedule Consultation
</Button> </Link>
<Button variant="outline" size="lg" className="border-white text-white hover:bg-white/10" onClick={() => navigate('/services')}> <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 View Services
</Button> </Link>
</div> </div>
<div className="flex flex-wrap gap-4"> <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"> <div className="flex items-center gap-2 px-4 py-2 bg-white/20 rounded-lg text-sm font-medium">
@ -184,104 +182,103 @@ const Home = () => {
Why Queue North? Proven reliability, decades of experience, and unwavering support Why Queue North? Proven reliability, decades of experience, and unwavering support
</p> </p>
<div> <div>
<Button variant="default" onClick={() => navigate('/contact')} <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">
className="bg-primary-navy text-white hover:bg-primary-navy-dark">
Request Consultation Request Consultation
</Button> </Link>
</div> </div>
</div>
{/* 8x8 Certified Partner */} {/* 8x8 Certified Partner */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12"> <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="bg-white rounded-xl p-8 shadow-lg hover:shadow-xl transition-shadow">
<div className="flex items-center gap-4 mb-4"> <div className="flex items-center gap-4 mb-4">
<div className="bg-primary-navy text-white p-3 rounded-lg"> <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" /> <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> </div>
<div> <p className="text-sm text-soft-text leading-relaxed mb-4">
<h3 className="text-lg font-semibold text-primary-navy">8x8 Certified Partner</h3> Queue North holds 8x8 Sales, Sales Engineer, Build, Deployment, and Support Certifications — enabling full lifecycle delivery.
<p className="text-sm text-soft-text">Certification #25432</p> </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>
</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. {/* Cisco Partnership */}
</p> <div className="bg-white rounded-xl p-8 shadow-lg hover:shadow-xl transition-shadow">
<div className="flex flex-wrap gap-2"> <div className="flex items-center gap-4 mb-4">
{['Sales', 'Sales Engineer', 'Build', 'Deployment', 'Support'].map((cert) => ( <div className="bg-primary-navy text-white p-3 rounded-lg">
<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="font-bold text-xl">C</span>
<span className="w-1.5 h-1.5 rounded-full bg-teal-500" /> </div>
{cert} <div>
</span> <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">1999–Present</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>
</div> </div>
{/* Cisco Partnership */} {/* Metrics Grid */}
<div className="bg-white rounded-xl p-8 shadow-lg hover:shadow-xl transition-shadow"> <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
<div className="flex items-center gap-4 mb-4"> <div className="text-center">
<div className="bg-primary-navy text-white p-3 rounded-lg"> <div className="font-numeric text-4xl md:text-5xl text-primary-navy mb-2">99.99%</div>
<span className="font-bold text-xl">C</span> <div className="text-sm text-soft-text uppercase tracking-wide font-medium">Uptime Guarantee</div>
</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> </div>
<p className="text-sm text-soft-text leading-relaxed"> <div className="text-center">
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. <div className="font-numeric text-4xl md:text-5xl text-primary-navy mb-2">&lt;15m</div>
</p> <div className="text-sm text-soft-text uppercase tracking-wide font-medium">Avg. Response</div>
</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> </div>
<p className="text-sm text-soft-text leading-relaxed"> <div className="text-center">
Founded by military veterans, we bring discipline, reliability, and service-first values to every client relationship. Your success is our mission. <div className="font-numeric text-4xl md:text-5xl text-primary-navy mb-2">24/7</div>
</p> <div className="text-sm text-soft-text uppercase tracking-wide font-medium">Support</div>
</div> </div>
<div className="text-center">
{/* Years Experience */} <div className="font-numeric text-4xl md:text-5xl text-primary-navy mb-2">100%</div>
<div className="bg-white rounded-xl p-8 shadow-lg hover:shadow-xl transition-shadow"> <div className="text-sm text-soft-text uppercase tracking-wide font-medium">Satisfaction</div>
<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">1999–Present</p>
</div>
</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>
</div> </div>
@ -316,12 +313,12 @@ const Home = () => {
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<Button variant="link" className="text-primary-navy p-0 h-auto text-sm" onClick={() => navigate(`/services/${service.id}`)}> <Link to={`/services/${service.id}`} className="text-primary-navy p-0 h-auto text-sm hover:underline">
Learn more → Learn more →
</Button> </Link>
<Button variant="outline" size="sm" onClick={() => navigate('/contact')}> <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 Request Consultation
</Button> </Link>
</div> </div>
</CardContent> </CardContent>
</Card> </Card>
@ -339,10 +336,9 @@ const Home = () => {
Four concrete differentiators that set us apart Four concrete differentiators that set us apart
</p> </p>
<div> <div>
<Button variant="default" onClick={() => navigate('/contact')} <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">
className="bg-primary-navy text-white hover:bg-primary-navy-dark">
Request Consultation Request Consultation
</Button> </Link>
</div> </div>
</div> </div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
@ -414,9 +410,9 @@ const Home = () => {
</div> </div>
<h3 className="text-xl font-semibold text-primary-navy mb-3">{industry.name}</h3> <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> <p className="text-sm text-soft-text mb-4">{industry.homeDesc || 'Industry-specific solutions designed to address your unique challenges and requirements.'}</p>
<Button variant="link" className="text-primary-navy p-0 h-auto text-sm" onClick={() => navigate(`/industries/${industry.id}`)}> <Link to={`/industries/${industry.id}`} className="text-primary-navy p-0 h-auto text-sm hover:underline">
Learn more → Learn more →
</Button> </Link>
</CardContent> </CardContent>
</Card> </Card>
) )
@ -468,9 +464,9 @@ const Home = () => {
<p className="text-lg text-soft-text mb-8 max-w-2xl mx-auto"> <p className="text-lg text-soft-text mb-8 max-w-2xl mx-auto">
Share a few details and we'll provide clear direction. Share a few details and we'll provide clear direction.
</p> </p>
<Button variant="default" size="lg" onClick={() => navigate('/contact')}> <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 Request Consultation
</Button> </Link>
</div> </div>
</section> </section>
</> </>