238 lines
12 KiB
JavaScript
238 lines
12 KiB
JavaScript
import SEO from '@/components/SEO'
|
|
import { buildBreadcrumbLd } from '@/lib/seo'
|
|
import { AlertCircle, ArrowRight, CheckCircle2, Clock3, ExternalLink, LifeBuoy, ShieldCheck, TicketCheck, Wrench } from 'lucide-react'
|
|
|
|
const portalLinks = [
|
|
{
|
|
label: 'Sign in',
|
|
href: 'https://queuenorthtechnologiesllc.zohodesk.com/portal/en/signin',
|
|
},
|
|
{
|
|
label: 'Create account',
|
|
href: 'https://queuenorthtechnologiesllc.zohodesk.com/portal/en/signup',
|
|
},
|
|
]
|
|
|
|
const responseTargets = [
|
|
{ priority: 'Low', context: 'General request', target: '24 hours' },
|
|
{ priority: 'Medium', context: 'Standard issue', target: '4 hours' },
|
|
{ priority: 'High', context: 'Critical outage', target: '1 hour' },
|
|
]
|
|
|
|
const supportedSystems = [
|
|
'8x8 Communications Platform',
|
|
'Cisco Webex',
|
|
'VoIP Phone Systems',
|
|
'Contact Center Solutions',
|
|
'Network Infrastructure',
|
|
'Cloud Migration Support',
|
|
]
|
|
|
|
const Support = () => {
|
|
return (
|
|
<>
|
|
<SEO
|
|
title="IT Support & Help Desk | Queue North Technologies"
|
|
description="Get IT support and help desk services from Queue North Technologies. 24/7 monitoring, rapid response SLAs, and dedicated support engineers for your business."
|
|
url="https://queuenorth.com/support"
|
|
jsonLd={buildBreadcrumbLd([{ name: 'Support', path: '/support' }])}
|
|
/>
|
|
{/* Page Hero */}
|
|
<section className="relative isolate overflow-hidden bg-primary-navy py-16 lg:py-24 text-white">
|
|
<div className="absolute inset-0 -z-10">
|
|
<img
|
|
src="/assets/modern-call-center.webp"
|
|
alt="Support team managing communications requests"
|
|
className="h-full w-full object-cover object-center"
|
|
loading="eager"
|
|
fetchPriority="high"
|
|
decoding="async"
|
|
/>
|
|
<div className="absolute inset-0 bg-primary-navy/84" />
|
|
<div className="absolute inset-0 bg-gradient-to-r from-primary-navy via-primary-navy/92 to-primary-navy/50" />
|
|
</div>
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="grid grid-cols-1 lg:grid-cols-[1fr_0.72fr] gap-10 lg:gap-14 items-center">
|
|
<div>
|
|
<div className="inline-flex items-center gap-2 rounded-md border border-white/20 bg-white/10 px-3 py-2 text-xs font-semibold uppercase tracking-wide text-primary-cyan">
|
|
<LifeBuoy className="h-4 w-4" aria-hidden="true" />
|
|
Support
|
|
</div>
|
|
<h1 className="mt-6 text-4xl md:text-5xl lg:text-6xl font-bold leading-tight">
|
|
Get help without getting handed off.
|
|
</h1>
|
|
<p className="mt-6 text-lg md:text-xl text-white/75 max-w-2xl leading-relaxed">
|
|
Sign in to the client portal to manage tickets, create a new support request, or escalate a service-impacting issue through one clear path.
|
|
</p>
|
|
<div className="mt-8 flex flex-col sm:flex-row gap-3">
|
|
<a
|
|
href={portalLinks[0].href}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
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" />
|
|
</a>
|
|
<a
|
|
href={portalLinks[1].href}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
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" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="rounded-md border border-white/15 bg-white/10 p-6 shadow-xl backdrop-blur">
|
|
<h2 className="text-lg font-semibold mb-5">Choose the right path</h2>
|
|
<div className="space-y-4">
|
|
<div className="flex gap-4">
|
|
<span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-md bg-white/10 text-primary-cyan">
|
|
<TicketCheck className="h-5 w-5" aria-hidden="true" />
|
|
</span>
|
|
<div>
|
|
<h3 className="font-semibold">Existing client</h3>
|
|
<p className="text-sm text-white/70">Sign in to create, update, and track support tickets.</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex gap-4">
|
|
<span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-md bg-white/10 text-primary-cyan">
|
|
<AlertCircle className="h-5 w-5" aria-hidden="true" />
|
|
</span>
|
|
<div>
|
|
<h3 className="font-semibold">Active outage</h3>
|
|
<a href="tel:+13217308020" className="text-sm font-semibold text-primary-cyan hover:text-white transition-colors" aria-label="Call Queue North support">
|
|
Call (321) 730-8020
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div className="flex gap-4">
|
|
<span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-md bg-white/10 text-primary-cyan">
|
|
<Wrench className="h-5 w-5" aria-hidden="true" />
|
|
</span>
|
|
<div>
|
|
<h3 className="font-semibold">Planned work</h3>
|
|
<p className="text-sm text-white/70">Use the portal for moves, adds, changes, and deployments.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Support Portal */}
|
|
<section id="support-portal" className="bg-background py-16 lg:py-24">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="grid grid-cols-1 lg:grid-cols-[0.95fr_1.05fr] gap-8 lg:gap-10 items-start">
|
|
<div className="space-y-6">
|
|
<div className="rounded-md border border-border border-t-[3px] border-t-teal-500 bg-white p-6 shadow-sm">
|
|
<div className="flex items-center gap-3 mb-5">
|
|
<span className="flex h-10 w-10 items-center justify-center rounded-md bg-section-alt text-primary-navy">
|
|
<Clock3 className="h-5 w-5" aria-hidden="true" />
|
|
</span>
|
|
<h2 className="text-xl font-bold text-primary-navy">Response Targets</h2>
|
|
</div>
|
|
<div className="grid gap-3 sm:grid-cols-3 lg:grid-cols-1">
|
|
{responseTargets.map((item) => (
|
|
<div key={item.priority} className="rounded-md border border-border bg-background p-4">
|
|
<div className="flex items-center justify-between gap-3">
|
|
<p className="font-semibold text-text">{item.priority}</p>
|
|
<p className="font-numeric text-xl text-primary-navy">{item.target}</p>
|
|
</div>
|
|
<p className="mt-1 text-sm text-soft-text">{item.context}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="rounded-md border border-border border-t-[3px] border-t-cyan-400 bg-section-alt p-6">
|
|
<div className="flex items-center gap-3 mb-5">
|
|
<span className="flex h-10 w-10 items-center justify-center rounded-md bg-white text-primary-navy">
|
|
<ShieldCheck className="h-5 w-5" aria-hidden="true" />
|
|
</span>
|
|
<h2 className="text-xl font-bold text-primary-navy">Covered Systems</h2>
|
|
</div>
|
|
<ul className="space-y-3">
|
|
{supportedSystems.map((item) => (
|
|
<li key={item} className="flex items-center gap-3 text-sm text-text">
|
|
<CheckCircle2 className="h-5 w-5 shrink-0 text-primary-blue" aria-hidden="true" />
|
|
{item}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div className="rounded-md border border-border border-t-[3px] border-t-accent-gold bg-white p-6 shadow-sm lg:p-8">
|
|
<div className="flex items-start gap-4 border-b border-border pb-6">
|
|
<span className="flex h-12 w-12 shrink-0 items-center justify-center rounded-md bg-primary-navy text-white">
|
|
<TicketCheck className="h-6 w-6" aria-hidden="true" />
|
|
</span>
|
|
<div>
|
|
<p className="text-sm font-semibold uppercase tracking-wide text-primary-blue">Client Portal</p>
|
|
<h2 className="mt-2 text-3xl font-bold text-primary-navy">Manage support in Zoho Desk.</h2>
|
|
<p className="mt-3 text-sm leading-relaxed text-soft-text">
|
|
Existing clients can sign in to submit new tickets, review open items, and keep communications tied to the right account.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-6 grid gap-3 sm:grid-cols-2">
|
|
<a
|
|
href={portalLinks[0].href}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="inline-flex h-11 items-center justify-center gap-2 rounded-md bg-primary-navy px-5 text-sm font-semibold text-white hover:bg-primary-navy-dark transition-colors"
|
|
>
|
|
Sign In
|
|
<ArrowRight className="h-4 w-4" aria-hidden="true" />
|
|
</a>
|
|
<a
|
|
href={portalLinks[1].href}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="inline-flex h-11 items-center justify-center gap-2 rounded-md border border-border bg-white px-5 text-sm font-semibold text-primary-navy hover:bg-section-alt transition-colors"
|
|
>
|
|
Create Account
|
|
<ExternalLink className="h-4 w-4" aria-hidden="true" />
|
|
</a>
|
|
</div>
|
|
|
|
<div className="mt-8 grid gap-3">
|
|
{[
|
|
'Submit and track support tickets',
|
|
'Add updates without starting a new thread',
|
|
'Keep request history tied to your account',
|
|
].map((item) => (
|
|
<div key={item} className="flex items-center gap-3 rounded-md border border-border bg-background p-4 text-sm font-medium text-text">
|
|
<CheckCircle2 className="h-5 w-5 shrink-0 text-primary-blue" aria-hidden="true" />
|
|
{item}
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="mt-8 rounded-md border border-border bg-section-alt p-4">
|
|
<p className="text-sm font-semibold text-primary-navy">Service-impacting issue?</p>
|
|
<p className="mt-1 text-sm text-soft-text">
|
|
Call Queue North directly for urgent outages or time-sensitive escalations.
|
|
</p>
|
|
<a href="tel:+13217308020" className="mt-3 inline-flex text-sm font-semibold text-primary-blue hover:text-primary-navy transition-colors">
|
|
(321) 730-8020
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default Support
|