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

35
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) => (
<div key={link.name} className="relative group">
<Link <Link
key={link.name}
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 */}

40
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,11 +182,9 @@ 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 */}
@ -285,6 +281,7 @@ const Home = () => {
</div> </div>
</div> </div>
</div> </div>
</div>
</section> </section>
{/* Services Section */} {/* Services Section */}
@ -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>
</> </>