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

fix: add aria-labels for accessibility, fix JSX template literal syntax (#101) (batch 10.2)

This commit is contained in:
null 2026-05-17 22:47:03 -05:00
parent 9c1b6e4753
commit e1604ee28f
6 changed files with 51 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -56,18 +56,18 @@ const Footer = () => {
<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>
<a href={`mailto:${companyInfo.email}`} className="hover:text-primary-cyan transition-colors">{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>
<a href={`tel:+1${companyInfo.phone.replace(/\D/g, '')}`} className="hover:text-primary-cyan transition-colors">{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>
<a href={`tel:+1${companyInfo.tollFree.replace(/\D/g, '')}`} className="hover:text-primary-cyan transition-colors">{companyInfo.tollFree}</a>
<a href={`tel:+1${companyInfo.tollFree.replace(/\D/g, '')}`} className="hover:text-primary-cyan transition-colors" aria-label={`Call ${companyInfo.tollFree}`}>{companyInfo.tollFree}</a>
</div>
<Link to="/contact" className="inline-block text-primary-cyan hover:underline">Contact Form</Link>
<Link to="/contact" className="inline-block text-primary-cyan hover:underline" aria-label="Fill out the contact form">Contact Form</Link>
</div>
<div className="mt-4">
<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">
<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">
Request Consultation
</Link>
</div>
@ -83,6 +83,7 @@ const Footer = () => {
<Link
to={link.href}
className="text-navy-light hover:text-white transition-colors text-sm"
aria-label={link.name}
>
{link.name}
</Link>
@ -100,6 +101,7 @@ const Footer = () => {
<Link
to={service.href}
className="text-navy-light hover:text-white transition-colors text-sm"
aria-label={service.name}
>
{service.name}
</Link>
@ -117,6 +119,7 @@ const Footer = () => {
<Link
to={industry.href}
className="text-navy-light hover:text-white transition-colors text-sm"
aria-label={industry.name}
>
{industry.name}
</Link>
@ -134,7 +137,7 @@ const Footer = () => {
8x8 and Cisco Certified Partner | Veteran Owned | 25+ Years Experience
</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">
<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>

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

@ -52,7 +52,7 @@ const Header = () => {
<div className="flex h-16 items-center justify-between">
{/* Logo */}
<div className="flex items-center gap-3">
<Link to="/" className="flex items-center gap-3">
<Link to="/" className="flex items-center gap-3" aria-label="Queue North Technologies Home">
<img
src="/logo.png"
alt="Queue North Technologies"
@ -63,7 +63,7 @@ const Header = () => {
</div>
{/* Desktop Nav */}
<nav className="hidden md:flex items-center gap-6">
<nav className="hidden md:flex items-center gap-6" aria-label="Main navigation">
{navLinks.map((link) => (
<div key={link.name} className="relative group">
<Link
@ -110,7 +110,7 @@ const Header = () => {
{/* CTA Button */}
<div className="hidden md:block">
<Link to="/contact" className="inline-flex items-center justify-center rounded-md text-sm font-medium h-9 px-3 bg-primary-cyan text-primary-navy hover:bg-cyan-600 transition-colors">
<Link to="/contact" className="inline-flex items-center justify-center rounded-md text-sm font-medium h-9 px-3 bg-primary-cyan text-primary-navy hover:bg-cyan-600 transition-colors" aria-label="Request a consultation">
Request Consultation
</Link>
</div>
@ -119,7 +119,7 @@ const Header = () => {
<div className="md:hidden">
<Sheet open={mobileMenuOpen} onOpenChange={setMobileMenuOpen}>
<SheetTrigger asChild>
<button className="p-2 text-white hover:text-primary-cyan transition-colors focus:outline-none focus:ring-2 focus:ring-primary-cyan rounded-md">
<button className="p-2 text-white hover:text-primary-cyan transition-colors focus:outline-none focus:ring-2 focus:ring-primary-cyan rounded-md" aria-label="Open navigation menu">
<span className="sr-only">Open menu</span>
<svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16" />
@ -132,18 +132,18 @@ const Header = () => {
</VisuallyHidden.Root>
<div className="flex flex-col h-full">
<div className="flex items-center gap-3 mb-6">
<Link to="/" onClick={closeMobileMenu} className="flex items-center gap-3">
<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-11 w-auto" />
<span className="font-bold text-2xl">Queue North</span>
</Link>
</div>
<nav className="flex flex-col space-y-6">
<nav className="flex flex-col space-y-6" aria-label="Mobile navigation">
<div>
<ul className="space-y-2">
{navLinks.map((link) => (
<li key={link.name}>
<Link to={link.href} onClick={closeMobileMenu} className={`block text-base font-medium py-2 ${isActive(link.href) ? 'text-white font-semibold' : 'text-white/70 hover:text-white'} transition-colors`}>
<Link to={link.href} onClick={closeMobileMenu} className={`block text-base font-medium py-2 ${isActive(link.href) ? 'text-white font-semibold' : 'text-white/70 hover:text-white'} transition-colors`} aria-label={link.name}>
{link.name}
</Link>
</li>
@ -152,11 +152,11 @@ const Header = () => {
</div>
<div>
<h4 className="text-xs font-semibold uppercase tracking-wider text-white/60 mb-3">Services</h4>
<h4 className="text-xs font-semibold uppercase tracking-wider text-white/60 mb-3" aria-hidden="true">Services</h4>
<ul className="space-y-2">
{serviceLinks.map((service) => (
<li key={service.name}>
<Link to={service.href} onClick={closeMobileMenu} className={`block text-sm py-2 border-b border-white/10 last:border-0 transition-colors ${isActive(service.href) ? 'text-white font-semibold' : 'text-white/70 hover:text-white'}`}>
<Link to={service.href} onClick={closeMobileMenu} className={`block text-sm py-2 border-b border-white/10 last:border-0 transition-colors ${isActive(service.href) ? 'text-white font-semibold' : 'text-white/70 hover:text-white'}`} aria-label={'Learn about ' + service.name}>
{service.name}
</Link>
</li>
@ -165,11 +165,11 @@ const Header = () => {
</div>
<div>
<h4 className="text-xs font-semibold uppercase tracking-wider text-white/60 mb-3">Industries</h4>
<h4 className="text-xs font-semibold uppercase tracking-wider text-white/60 mb-3" aria-hidden="true">Industries</h4>
<ul className="space-y-2">
{industryLinks.map((industry) => (
<li key={industry.name}>
<Link to={industry.href} onClick={closeMobileMenu} className={`block text-sm py-2 border-b border-white/10 last:border-0 transition-colors ${isActive(industry.href) ? 'text-white font-semibold' : 'text-white/70 hover:text-white'}`}>
<Link to={industry.href} onClick={closeMobileMenu} className={`block text-sm py-2 border-b border-white/10 last:border-0 transition-colors ${isActive(industry.href) ? 'text-white font-semibold' : 'text-white/70 hover:text-white'}`} aria-label={'Learn about ' + industry.name + ' industry solutions'}>
{industry.name}
</Link>
</li>
@ -179,7 +179,7 @@ const Header = () => {
</nav>
<div className="mt-auto pt-6">
<Link to="/contact" onClick={closeMobileMenu} className="inline-flex items-center justify-center rounded-md text-sm font-medium h-10 px-4 py-2 w-full bg-primary-cyan text-primary-navy hover:bg-cyan-600 transition-colors">
<Link to="/contact" onClick={closeMobileMenu} className="inline-flex items-center justify-center rounded-md text-sm font-medium h-10 px-4 py-2 w-full bg-primary-cyan text-primary-navy hover:bg-cyan-600 transition-colors" aria-label="Request a consultation">
Request Consultation
</Link>
</div>

10
src/components/layout/MobileNav.jsx
View File

@ -40,7 +40,7 @@ const MobileNav = () => {
<div className="md:hidden">
<Sheet open={isOpen} onOpenChange={setIsOpen}>
<SheetTrigger asChild>
<button className="p-2 text-white hover:text-primary-cyan focus:outline-none focus:ring-2 focus:ring-primary-cyan rounded-md">
<button className="p-2 text-white hover:text-primary-cyan focus:outline-none focus:ring-2 focus:ring-primary-cyan rounded-md" aria-label="Open navigation menu">
<svg
className="h-6 w-6"
fill="none"
@ -79,6 +79,7 @@ const MobileNav = () => {
to={link.href}
onClick={closeMobileMenu}
className={`block text-base font-medium py-2 transition-colors ${isActive(link.href) ? 'text-white font-semibold' : 'text-navy-light hover:text-white'}`}
aria-label={link.name}
>
{link.name}
</Link>
@ -89,7 +90,7 @@ const MobileNav = () => {
{/* Services */}
<div>
<h4 className="text-xs font-semibold uppercase tracking-wider text-navy-light mb-3">Services</h4>
<h4 className="text-xs font-semibold uppercase tracking-wider text-navy-light mb-3" aria-hidden="true">Services</h4>
<ul className="space-y-2">
{services.map((service) => (
<li key={service.name}>
@ -97,6 +98,7 @@ const MobileNav = () => {
to={service.href}
onClick={closeMobileMenu}
className={`block text-sm py-2 border-b border-white/10 last:border-0 transition-colors ${isActive(service.href) ? 'text-white font-semibold' : 'text-navy-light hover:text-white'}`}
aria-label={'Learn about ' + service.name}
>
{service.name}
</Link>
@ -107,7 +109,7 @@ const MobileNav = () => {
{/* Industries */}
<div>
<h4 className="text-xs font-semibold uppercase tracking-wider text-navy-light mb-3">Industries</h4>
<h4 className="text-xs font-semibold uppercase tracking-wider text-navy-light mb-3" aria-hidden="true">Industries</h4>
<ul className="space-y-2">
{industries.map((industry) => (
<li key={industry.name}>
@ -115,6 +117,7 @@ const MobileNav = () => {
to={industry.href}
onClick={closeMobileMenu}
className={`block text-sm py-2 border-b border-white/10 last:border-0 transition-colors ${isActive(industry.href) ? 'text-white font-semibold' : 'text-navy-light hover:text-white'}`}
aria-label={'Learn about ' + industry.name + ' industry solutions'}
>
{industry.name}
</Link>
@ -129,6 +132,7 @@ const MobileNav = () => {
to="/contact"
onClick={closeMobileMenu}
className="inline-flex items-center justify-center rounded-md text-sm font-medium h-10 px-4 py-2 w-full bg-primary-navy text-white hover:bg-primary-navy-dark transition-colors"
aria-label="Request a consultation"
>
Request Consultation
</Link>

10
src/pages/Contact.jsx
View File

@ -134,19 +134,19 @@ const Contact = () => {
<svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 5.13a1 1 0 01-1.31.42a2 2 0 00-2.63-.54l-2.238 5.03a2 2 0 01-2.71.319L2.663 12H4a2 2 0 012 2v2a2 2 0 01-2 2H2a2 2 0 01-2-2V5z" />
</svg>
<a href="tel:+13217308020" className="text-sm font-medium hover:underline">(321) 730-8020</a>
<a href="tel:+13217308020" className="text-sm font-medium hover:underline" aria-label="Call (321) 730-8020">(321) 730-8020</a>
</div>
<div className="flex items-center gap-2 px-4 py-2 bg-primary-navy/10 rounded-lg text-primary-navy">
<svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 5.13a1 1 0 01-1.31.42a2 2 0 00-2.63-.54l-2.238 5.03a2 2 0 01-2.71.319L2.663 12H4a2 2 0 012 2v2a2 2 0 01-2 2H2a2 2 0 01-2-2V5z" />
</svg>
<a href="tel:+18886562850" className="text-sm font-medium hover:underline">(888) 656-2850</a>
<a href="tel:+18886562850" className="text-sm font-medium hover:underline" aria-label="Call (888) 656-2850">(888) 656-2850</a>
</div>
<div className="flex items-center gap-2 px-4 py-2 bg-primary-navy/10 rounded-lg text-primary-navy">
<svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
<a href="mailto:info@queuenorth.com" className="text-sm font-medium hover:underline">info@queuenorth.com</a>
<a href="mailto:info@queuenorth.com" className="text-sm font-medium hover:underline" aria-label="Send email to info@queuenorth.com">info@queuenorth.com</a>
</div>
</div>
<div className="mb-8">
@ -176,8 +176,8 @@ const Contact = () => {
</div>
<div>
<h3 className="font-semibold text-text mb-2">Phone</h3>
<p className="text-soft-text"><a href="tel:+13217308020" className="hover:underline">(321) 730-8020</a></p>
<p className="text-soft-text"><a href="tel:+18886562850" className="hover:underline">(888) 656-2850 - Toll Free</a></p>
<p className="text-soft-text"><a href="tel:+13217308020" className="hover:underline" aria-label="Call (321) 730-8020">(321) 730-8020</a></p>
<p className="text-soft-text"><a href="tel:+18886562850" className="hover:underline" aria-label="Call (888) 656-2850 - Toll Free">(888) 656-2850 - Toll Free</a></p>
</div>
<div>
<h3 className="font-semibold text-text mb-2">Contact Us</h3>

28
src/pages/Home.jsx
View File

@ -83,10 +83,10 @@ 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.
</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">
<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" aria-label="Schedule a consultation">
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">
<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" aria-label="View our services">
View Services
</Link>
</div>
@ -176,7 +176,7 @@ const Home = () => {
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">
<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" aria-label="Request a consultation">
Request Consultation
</Link>
</div>
@ -292,7 +292,7 @@ const Home = () => {
<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">
<div className="bg-primary-navy/10 p-2 rounded-lg" aria-hidden="true">
{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" />}
@ -301,16 +301,16 @@ const Home = () => {
{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>
<CardTitle className="text-primary-navy text-xl" aria-label={service.name}>{service.name}</CardTitle>
</div>
<CardDescription className="font-medium text-teal-900">{service.homeDesc}</CardDescription>
<CardDescription className="font-medium text-teal-900" aria-label={service.homeDesc}>{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">
<Link to={`/services/${service.id}`} className="text-primary-navy p-0 h-auto text-sm hover:underline" aria-label={`Learn more about ${service.name}`}>
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">
<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" aria-label="Learn more about services">
Request Consultation
</Link>
</div>
@ -330,7 +330,7 @@ const Home = () => {
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">
<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" aria-label="Request a consultation">
Request Consultation
</Link>
</div>
@ -399,12 +399,12 @@ const Home = () => {
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">
<div className="w-14 h-14 rounded-xl bg-teal-50 flex items-center justify-center mb-4" aria-hidden="true">
<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">
<h3 className="text-xl font-semibold text-primary-navy mb-3" aria-label={industry.name}>{industry.name}</h3>
<p className="text-sm text-soft-text mb-4" aria-label={industry.homeDesc || 'Industry-specific solutions designed to address your unique challenges and requirements.'}>{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" aria-label={`Learn more about ${industry.name} industry solutions`}> industry solutions`>
Learn more →
</Link>
</CardContent>
@ -458,7 +458,7 @@ const Home = () => {
<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">
<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" aria-label="Request a consultation">
Request Consultation
</Link>
</div>

8
src/pages/Support.jsx
View File

@ -132,13 +132,13 @@ const Support = () => {
<svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 5.13a1 1 0 01-1.31.42a2 2 0 00-2.63-.54l-2.238 5.03a2 2 0 01-2.71.319L2.663 12H4a2 2 0 012 2v2a2 2 0 01-2 2H2a2 2 0 01-2-2V5z" />
</svg>
<p className="text-sm font-medium"><a href="tel:+13217308020" className="text-primary-cyan hover:text-cyan-700 underline">(321) 730-8020</a></p>
<p className="text-sm font-medium"><a href="tel:+13217308020" className="text-primary-cyan hover:text-cyan-700 underline" aria-label="Call (321) 730-8020">(321) 730-8020</a></p>
</div>
<div className="flex items-center gap-2 px-4 py-2 bg-primary-navy/10 rounded-lg text-primary-navy">
<svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
<p className="text-sm font-medium"><a href="mailto:info@queuenorth.com" className="text-primary-cyan hover:text-cyan-700 underline">info@queuenorth.com</a></p>
<p className="text-sm font-medium"><a href="mailto:info@queuenorth.com" className="text-primary-cyan hover:text-cyan-700 underline" aria-label="Send email to info@queuenorth.com">info@queuenorth.com</a></p>
</div>
</div>
<div className="mb-8">
@ -189,12 +189,12 @@ const Support = () => {
</a>
</div>
<p className="text-sm text-soft-text">
Or call our support team <a href="tel:+13217308020" className="text-primary-cyan hover:text-cyan-700 underline">(321) 730-8020</a>
Or call our support team <a href="tel:+13217308020" className="text-primary-cyan hover:text-cyan-700 underline" aria-label="Call (321) 730-8020">(321) 730-8020</a>
</p>
</div>
<div>
<h3 className="font-semibold text-text mb-2">Phone</h3>
<p className="text-soft-text"><a href="tel:+13217308020" className="text-primary-cyan hover:text-cyan-700 underline">(321) 730-8020</a></p>
<p className="text-soft-text"><a href="tel:+13217308020" className="text-primary-cyan hover:text-cyan-700 underline" aria-label="Call (321) 730-8020">(321) 730-8020</a></p>
</div>
<div>
<h3 className="font-semibold text-text mb-2">Support Hours</h3>