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

mobile view

This commit is contained in:
null 2026-05-27 12:42:25 -05:00
parent 362a7e0059
commit a81e97fb31
7 changed files with 17 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -154,7 +154,7 @@ const Header = () => {
</svg> </svg>
</button> </button>
</SheetTrigger> </SheetTrigger>
<SheetContent side="right" className="w-[300px] sm:w-[350px] bg-primary-navy text-white"> <SheetContent side="right" className="w-[85vw] max-w-[300px] sm:w-[350px] bg-primary-navy text-white">
<VisuallyHidden.Root asChild> <VisuallyHidden.Root asChild>
<SheetTitle>Navigation Menu</SheetTitle> <SheetTitle>Navigation Menu</SheetTitle>
</VisuallyHidden.Root> </VisuallyHidden.Root>

2
src/index.css
View File

@ -10,6 +10,7 @@
html { html {
scroll-behavior: smooth; scroll-behavior: smooth;
overflow-x: hidden;
} }
body { body {
@ -18,6 +19,7 @@ body {
background-color: #F8FAFC; background-color: #F8FAFC;
line-height: 1.5; line-height: 1.5;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
overflow-x: hidden;
} }
img { img {

8
src/pages/About.jsx
View File

@ -118,11 +118,11 @@ const About = () => {
Queue North helps organizations choose, implement, and support the phone, contact center, network, and IT systems that keep daily operations moving. Queue North helps organizations choose, implement, and support the phone, contact center, network, and IT systems that keep daily operations moving.
</p> </p>
<div className="mt-8 flex flex-col sm:flex-row gap-3"> <div className="mt-8 flex flex-col sm:flex-row gap-3">
<Link to="/contact" className="inline-flex h-11 items-center justify-center gap-2 rounded-md bg-white px-5 text-sm font-semibold text-primary-navy hover:bg-section-alt transition-colors"> <Link to="/contact" className="inline-flex w-full sm:w-auto h-11 items-center justify-center gap-2 rounded-md bg-white px-5 text-sm font-semibold text-primary-navy hover:bg-section-alt transition-colors">
Start a Conversation Start a Conversation
<ArrowRight className="h-4 w-4" aria-hidden="true" /> <ArrowRight className="h-4 w-4" aria-hidden="true" />
</Link> </Link>
<Link to="/services" className="inline-flex h-11 items-center justify-center rounded-md border border-white/40 px-5 text-sm font-semibold text-white hover:bg-white/10 transition-colors"> <Link to="/services" className="inline-flex w-full sm:w-auto h-11 items-center justify-center rounded-md border border-white/40 px-5 text-sm font-semibold text-white hover:bg-white/10 transition-colors">
View Services View Services
</Link> </Link>
</div> </div>
@ -263,14 +263,14 @@ const About = () => {
<div className="mt-7 flex flex-col gap-3 sm:flex-row lg:mt-0 lg:flex-shrink-0"> <div className="mt-7 flex flex-col gap-3 sm:flex-row lg:mt-0 lg:flex-shrink-0">
<Link <Link
to="/contact" to="/contact"
className="inline-flex h-11 items-center justify-center gap-2 rounded-md bg-white px-6 text-sm font-semibold text-primary-navy hover:bg-section-alt transition-colors" className="inline-flex w-full sm:w-auto h-11 items-center justify-center gap-2 rounded-md bg-white px-6 text-sm font-semibold text-primary-navy hover:bg-section-alt transition-colors"
> >
Request Consultation Request Consultation
<ArrowRight className="h-4 w-4" aria-hidden="true" /> <ArrowRight className="h-4 w-4" aria-hidden="true" />
</Link> </Link>
<a <a
href="tel:+13217308020" href="tel:+13217308020"
className="inline-flex h-11 items-center justify-center rounded-md border border-white/35 px-6 text-sm font-semibold text-white hover:bg-white/10 transition-colors" className="inline-flex w-full sm:w-auto h-11 items-center justify-center rounded-md border border-white/35 px-6 text-sm font-semibold text-white hover:bg-white/10 transition-colors"
> >
Call (321) 730-8020 Call (321) 730-8020
</a> </a>

4
src/pages/Home.jsx
View File

@ -153,11 +153,11 @@ const Home = () => {
Business phone, contact center, network, and IT support built around one accountable implementation partner. Business phone, contact center, network, and IT support built around one accountable implementation partner.
</p> </p>
<div className="mt-8 flex flex-col sm:flex-row gap-3"> <div className="mt-8 flex flex-col sm:flex-row gap-3">
<Link to="/contact" className="inline-flex h-11 items-center justify-center gap-2 rounded-md bg-white px-5 text-sm font-semibold text-primary-navy hover:bg-section-alt transition-colors" aria-label="Schedule a consultation"> <Link to="/contact" className="inline-flex w-full sm:w-auto h-11 items-center justify-center gap-2 rounded-md bg-white px-5 text-sm font-semibold text-primary-navy hover:bg-section-alt transition-colors" aria-label="Schedule a consultation">
Schedule Consultation Schedule Consultation
<ArrowRight className="h-4 w-4" aria-hidden="true" /> <ArrowRight className="h-4 w-4" aria-hidden="true" />
</Link> </Link>
<Link to="/services" className="inline-flex h-11 items-center justify-center rounded-md border border-white/45 px-5 text-sm font-semibold text-white hover:bg-white/10 transition-colors" aria-label="View our services"> <Link to="/services" className="inline-flex w-full sm:w-auto h-11 items-center justify-center rounded-md border border-white/45 px-5 text-sm font-semibold text-white hover:bg-white/10 transition-colors" aria-label="View our services">
View Services View Services
</Link> </Link>
</div> </div>

4
src/pages/Industries.jsx
View File

@ -121,14 +121,14 @@ const Industries = () => {
<div className="mt-7 flex flex-col gap-3 sm:flex-row lg:mt-0 lg:flex-shrink-0"> <div className="mt-7 flex flex-col gap-3 sm:flex-row lg:mt-0 lg:flex-shrink-0">
<Link <Link
to="/contact" to="/contact"
className="inline-flex h-11 items-center justify-center gap-2 rounded-md bg-white px-6 text-sm font-semibold text-primary-navy hover:bg-section-alt transition-colors" className="inline-flex w-full sm:w-auto h-11 items-center justify-center gap-2 rounded-md bg-white px-6 text-sm font-semibold text-primary-navy hover:bg-section-alt transition-colors"
> >
Talk to a Specialist Talk to a Specialist
<ArrowRight className="h-4 w-4" aria-hidden="true" /> <ArrowRight className="h-4 w-4" aria-hidden="true" />
</Link> </Link>
<a <a
href="tel:+13217308020" href="tel:+13217308020"
className="inline-flex h-11 items-center justify-center rounded-md border border-white/35 px-6 text-sm font-semibold text-white hover:bg-white/10 transition-colors" className="inline-flex w-full sm:w-auto h-11 items-center justify-center rounded-md border border-white/35 px-6 text-sm font-semibold text-white hover:bg-white/10 transition-colors"
> >
Call (321) 730-8020 Call (321) 730-8020
</a> </a>

8
src/pages/Services.jsx
View File

@ -97,14 +97,14 @@ const Services = () => {
<div className="flex flex-col sm:flex-row gap-3"> <div className="flex flex-col sm:flex-row gap-3">
<Link <Link
to="/contact" to="/contact"
className="inline-flex h-11 items-center justify-center gap-2 rounded-md bg-white px-5 text-sm font-semibold text-primary-navy hover:bg-section-alt transition-colors" className="inline-flex w-full sm:w-auto h-11 items-center justify-center gap-2 rounded-md bg-white px-5 text-sm font-semibold text-primary-navy hover:bg-section-alt transition-colors"
> >
Get a Free Quote Get a Free Quote
<ArrowRight className="h-4 w-4" aria-hidden="true" /> <ArrowRight className="h-4 w-4" aria-hidden="true" />
</Link> </Link>
<Link <Link
to="/support" to="/support"
className="inline-flex h-11 items-center justify-center rounded-md border border-white/40 px-5 text-sm font-semibold text-white hover:bg-white/10 transition-colors" className="inline-flex w-full sm:w-auto h-11 items-center justify-center rounded-md border border-white/40 px-5 text-sm font-semibold text-white hover:bg-white/10 transition-colors"
> >
Existing Client? Get Support Existing Client? Get Support
</Link> </Link>
@ -189,14 +189,14 @@ const Services = () => {
<div className="mt-7 flex flex-col gap-3 sm:flex-row lg:mt-0 lg:flex-shrink-0"> <div className="mt-7 flex flex-col gap-3 sm:flex-row lg:mt-0 lg:flex-shrink-0">
<Link <Link
to="/contact" to="/contact"
className="inline-flex h-11 items-center justify-center gap-2 rounded-md bg-white px-6 text-sm font-semibold text-primary-navy hover:bg-section-alt transition-colors" className="inline-flex w-full sm:w-auto h-11 items-center justify-center gap-2 rounded-md bg-white px-6 text-sm font-semibold text-primary-navy hover:bg-section-alt transition-colors"
> >
Schedule a Consultation Schedule a Consultation
<ArrowRight className="h-4 w-4" aria-hidden="true" /> <ArrowRight className="h-4 w-4" aria-hidden="true" />
</Link> </Link>
<a <a
href="tel:+13217308020" href="tel:+13217308020"
className="inline-flex h-11 items-center justify-center rounded-md border border-white/35 px-6 text-sm font-semibold text-white hover:bg-white/10 transition-colors" className="inline-flex w-full sm:w-auto h-11 items-center justify-center rounded-md border border-white/35 px-6 text-sm font-semibold text-white hover:bg-white/10 transition-colors"
> >
Call (321) 730-8020 Call (321) 730-8020
</a> </a>

4
src/pages/Support.jsx
View File

@ -64,7 +64,7 @@ const Support = () => {
href={portalLinks[0].href} href={portalLinks[0].href}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="inline-flex h-11 items-center justify-center gap-2 rounded-md bg-white px-5 text-sm font-semibold text-primary-navy hover:bg-section-alt transition-colors" className="inline-flex w-full sm:w-auto h-11 items-center justify-center gap-2 rounded-md bg-white px-5 text-sm font-semibold text-primary-navy hover:bg-section-alt transition-colors"
> >
Sign In Sign In
<ArrowRight className="h-4 w-4" aria-hidden="true" /> <ArrowRight className="h-4 w-4" aria-hidden="true" />
@ -73,7 +73,7 @@ const Support = () => {
href={portalLinks[1].href} href={portalLinks[1].href}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="inline-flex h-11 items-center justify-center gap-2 rounded-md border border-white/40 px-5 text-sm font-semibold text-white hover:bg-white/10 transition-colors" className="inline-flex w-full sm:w-auto h-11 items-center justify-center gap-2 rounded-md border border-white/40 px-5 text-sm font-semibold text-white hover:bg-white/10 transition-colors"
> >
Create Account Create Account
<ExternalLink className="h-4 w-4" aria-hidden="true" /> <ExternalLink className="h-4 w-4" aria-hidden="true" />