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>
</button>
</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>
<SheetTitle>Navigation Menu</SheetTitle>
</VisuallyHidden.Root>

2
src/index.css
View File

@ -10,6 +10,7 @@
html {
scroll-behavior: smooth;
overflow-x: hidden;
}
body {
@ -18,6 +19,7 @@ body {
background-color: #F8FAFC;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
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.
</p>
<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
<ArrowRight className="h-4 w-4" aria-hidden="true" />
</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
</Link>
</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">
<Link
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
<ArrowRight className="h-4 w-4" aria-hidden="true" />
</Link>
<a
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
</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.
</p>
<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
<ArrowRight className="h-4 w-4" aria-hidden="true" />
</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
</Link>
</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">
<Link
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
<ArrowRight className="h-4 w-4" aria-hidden="true" />
</Link>
<a
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
</a>

8
src/pages/Services.jsx
View File

@ -97,14 +97,14 @@ const Services = () => {
<div className="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"
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
<ArrowRight className="h-4 w-4" aria-hidden="true" />
</Link>
<Link
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
</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">
<Link
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
<ArrowRight className="h-4 w-4" aria-hidden="true" />
</Link>
<a
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
</a>

4
src/pages/Support.jsx
View File

@ -64,7 +64,7 @@ const Support = () => {
href={portalLinks[0].href}
target="_blank"
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
<ArrowRight className="h-4 w-4" aria-hidden="true" />
@ -73,7 +73,7 @@ const Support = () => {
href={portalLinks[1].href}
target="_blank"
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
<ExternalLink className="h-4 w-4" aria-hidden="true" />