refactor: full-bleed section backgrounds with centered content (closes #48)
This commit is contained in:
null
parent
5d67149a51
commit
b5170caf9d
|
|
@ -1,102 +1,118 @@
|
||||||
const About = () => {
|
const About = () => {
|
||||||
return (
|
return (
|
||||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 lg:py-24">
|
<>
|
||||||
{/* Page Hero */}
|
{/* Page Hero */}
|
||||||
<section className="mb-16">
|
<section className="bg-background py-16 lg:py-24">
|
||||||
<h1 className="text-4xl md:text-5xl font-bold text-primary-navy mb-6">About Queue North</h1>
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
<p className="text-xl text-soft-text max-w-3xl">
|
<div>
|
||||||
We're communications and infrastructure partners who cut through the vendor noise to deliver what actually works for your business.
|
<h1 className="text-4xl md:text-5xl font-bold text-primary-navy mb-6">About Queue North</h1>
|
||||||
</p>
|
<p className="text-xl text-soft-text max-w-3xl">
|
||||||
|
We're communications and infrastructure partners who cut through the vendor noise to deliver what actually works for your business.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{/* Company Story */}
|
{/* Company Story */}
|
||||||
<section className="grid grid-cols-1 lg:grid-cols-2 gap-12 mb-16">
|
<section className="bg-background py-16">
|
||||||
<div>
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
<h2 className="text-3xl font-bold text-primary-navy mb-4">Our Story</h2>
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
||||||
<p className="text-lg text-soft-text mb-6 leading-relaxed">
|
<div>
|
||||||
Founded by military veterans, Queue North Technologies began with a simple mission: help businesses navigate the complex world of communications technology. What started as a small team of communications specialists has grown into a full-service provider for SMB and enterprise organizations across multiple industries.
|
<h2 className="text-3xl font-bold text-primary-navy mb-4">Our Story</h2>
|
||||||
</p>
|
<p className="text-lg text-soft-text mb-6 leading-relaxed">
|
||||||
<p className="text-lg text-soft-text mb-6 leading-relaxed">
|
Founded by military veterans, Queue North Technologies began with a simple mission: help businesses navigate the complex world of communications technology. What started as a small team of communications specialists has grown into a full-service provider for SMB and enterprise organizations across multiple industries.
|
||||||
Our journey began when our founders saw too many businesses paying too much for solutions that didn't fit their actual needs. We believed in a different approach — one focused on understanding your business challenges first, then selecting or integrating the right technologies to solve them.
|
</p>
|
||||||
</p>
|
<p className="text-lg text-soft-text mb-6 leading-relaxed">
|
||||||
<p className="text-lg text-soft-text leading-relaxed">
|
Our journey began when our founders saw too many businesses paying too much for solutions that didn't fit their actual needs. We believed in a different approach — one focused on understanding your business challenges first, then selecting or integrating the right technologies to solve them.
|
||||||
Today, we continue that mission as an 8x8 Certified Partner, helping organizations modernize their communications, streamline their operations, and focus on what matters most — their customers and their growth.
|
</p>
|
||||||
</p>
|
<p className="text-lg text-soft-text leading-relaxed">
|
||||||
<p className="text-lg text-soft-text mt-4 leading-relaxed">
|
Today, we continue that mission as an 8x8 Certified Partner, helping organizations modernize their communications, streamline their operations, and focus on what matters most — their customers and their growth.
|
||||||
We continue the mission — bringing the same discipline, reliability, and commitment to every client relationship that we brought to our service.
|
</p>
|
||||||
</p>
|
<p className="text-lg text-soft-text mt-4 leading-relaxed">
|
||||||
</div>
|
We continue the mission — bringing the same discipline, reliability, and commitment to every client relationship that we brought to our service.
|
||||||
<div>
|
</p>
|
||||||
<div className="rounded-xl overflow-hidden shadow-lg">
|
</div>
|
||||||
<img
|
<div>
|
||||||
src="/assets/about-image.png"
|
<div className="rounded-xl overflow-hidden shadow-lg">
|
||||||
alt="Our Team"
|
<img
|
||||||
className="w-full max-h-96 h-auto object-cover"
|
src="/assets/about-image.png"
|
||||||
/>
|
alt="Our Team"
|
||||||
|
className="w-full max-h-96 h-auto object-cover"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{/* Our Values */}
|
{/* Our Values */}
|
||||||
<section className="mb-16">
|
<section className="bg-background py-16">
|
||||||
<h2 className="text-3xl font-bold text-primary-navy mb-8 text-center">Our Values</h2>
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
<h2 className="text-3xl font-bold text-primary-navy mb-8 text-center">Our Values</h2>
|
||||||
{[
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||||
{ title: 'Business First', desc: 'We focus on your business outcomes, not just technology' },
|
{[
|
||||||
{ title: 'Honesty', desc: 'We tell you what you need, not just what we can sell' },
|
{ title: 'Business First', desc: 'We focus on your business outcomes, not just technology' },
|
||||||
{ title: 'Partnership', desc: 'We work with you, not just for you' },
|
{ title: 'Honesty', desc: 'We tell you what you need, not just what we can sell' },
|
||||||
{ title: 'Expertise', desc: 'Our team has real, proven experience in your industry' },
|
{ title: 'Partnership', desc: 'We work with you, not just for you' },
|
||||||
{ title: 'Reliability', desc: 'When we say we will do something, we do it' },
|
{ title: 'Expertise', desc: 'Our team has real, proven experience in your industry' },
|
||||||
{ title: 'Support', desc: 'Our job doesn\'t end when installation completes' },
|
{ title: 'Reliability', desc: 'When we say we will do something, we do it' },
|
||||||
].map((value, index) => (
|
{ title: 'Support', desc: 'Our job doesn\'t end when installation completes' },
|
||||||
<div key={index} className="p-6 rounded-lg border border-border bg-card shadow-sm hover:shadow-md transition-shadow">
|
].map((value, index) => (
|
||||||
<h3 className="text-xl font-semibold text-primary-navy mb-3">{value.title}</h3>
|
<div key={index} className="p-6 rounded-lg border border-border bg-card shadow-sm hover:shadow-md transition-shadow">
|
||||||
<p className="text-soft-text">{value.desc}</p>
|
<h3 className="text-xl font-semibold text-primary-navy mb-3">{value.title}</h3>
|
||||||
</div>
|
<p className="text-soft-text">{value.desc}</p>
|
||||||
))}
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{/* Our Expertise */}
|
{/* Our Expertise */}
|
||||||
<section className="mb-16">
|
<section className="bg-background py-16">
|
||||||
<h2 className="text-3xl font-bold text-primary-navy mb-8 text-center">Our Expertise</h2>
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
<h2 className="text-3xl font-bold text-primary-navy mb-8 text-center">Our Expertise</h2>
|
||||||
{[
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||||
'8x8 Certified Partner',
|
{[
|
||||||
'VoIP and UCaaS Solutions',
|
'8x8 Certified Partner',
|
||||||
'Contact Center Implementation',
|
'VoIP and UCaaS Solutions',
|
||||||
'Network Infrastructure',
|
'Contact Center Implementation',
|
||||||
'Cloud Migration',
|
'Network Infrastructure',
|
||||||
'Vendor-Neutral Consulting',
|
'Cloud Migration',
|
||||||
'Disaster Recovery Planning',
|
'Vendor-Neutral Consulting',
|
||||||
'24/7 Support & Monitoring',
|
'Disaster Recovery Planning',
|
||||||
].map((expertise, index) => (
|
'24/7 Support & Monitoring',
|
||||||
<div key={index} className="flex items-center gap-2 p-3 rounded-lg border border-border bg-card">
|
].map((expertise, index) => (
|
||||||
<div className="h-5 w-5 rounded-full bg-primary-navy text-white flex items-center justify-center flex-shrink-0">
|
<div key={index} className="flex items-center gap-2 p-3 rounded-lg border border-border bg-card">
|
||||||
<svg className="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<div className="h-5 w-5 rounded-full bg-primary-navy text-white flex items-center justify-center flex-shrink-0">
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
|
<svg className="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
</svg>
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<span className="text-sm font-medium text-text">{expertise}</span>
|
||||||
</div>
|
</div>
|
||||||
<span className="text-sm font-medium text-text">{expertise}</span>
|
))}
|
||||||
</div>
|
</div>
|
||||||
))}
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{/* CTA */}
|
{/* CTA */}
|
||||||
<section className="bg-section-alt rounded-xl p-8 md:p-12 text-center">
|
<section className="bg-section-alt py-16">
|
||||||
<h2 className="text-3xl md:text-4xl font-bold text-primary-navy mb-6">Ready to Learn More?</h2>
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||||
<p className="text-xl text-soft-text mb-8 max-w-2xl mx-auto">
|
<div>
|
||||||
Schedule a free consultation with our communications experts to discuss your needs.
|
<h2 className="text-3xl md:text-4xl font-bold text-primary-navy mb-6">Ready to Learn More?</h2>
|
||||||
</p>
|
<p className="text-xl text-soft-text mb-8 max-w-2xl mx-auto">
|
||||||
<a
|
Schedule a free consultation with our communications experts to discuss your needs.
|
||||||
href="/contact"
|
</p>
|
||||||
className="inline-block bg-primary-navy text-white px-8 py-3 rounded-md font-bold text-lg hover:bg-primary-navy-dark transition-colors"
|
<a
|
||||||
>
|
href="/contact"
|
||||||
Request Consultation
|
className="inline-block bg-primary-navy text-white px-8 py-3 rounded-md font-bold text-lg hover:bg-primary-navy-dark transition-colors"
|
||||||
</a>
|
>
|
||||||
|
Request Consultation
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -100,218 +100,226 @@ const Contact = () => {
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 lg:py-24">
|
<>
|
||||||
{/* Page Hero */}
|
{/* Page Hero */}
|
||||||
<section className="mb-16">
|
<section className="bg-background py-16 lg:py-24">
|
||||||
<h1 className="text-4xl md:text-5xl font-bold text-primary-navy mb-6">Contact Us</h1>
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
<p className="text-xl text-soft-text max-w-3xl mb-8">
|
<div>
|
||||||
Have questions about our services? We're here to help. Fill out the form and we'll get back to you shortly.
|
<h1 className="text-4xl md:text-5xl font-bold text-primary-navy mb-6">Contact Us</h1>
|
||||||
</p>
|
<p className="text-xl text-soft-text max-w-3xl mb-8">
|
||||||
<div className="flex flex-wrap gap-4 mb-8">
|
Have questions about our services? We're here to help. Fill out the form and we'll get back to you shortly.
|
||||||
<div className="flex items-center gap-2 px-4 py-2 bg-primary-navy/10 rounded-lg text-primary-navy">
|
</p>
|
||||||
<svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<div className="flex flex-wrap gap-4 mb-8">
|
||||||
<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" />
|
<div className="flex items-center gap-2 px-4 py-2 bg-primary-navy/10 rounded-lg text-primary-navy">
|
||||||
</svg>
|
<svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
<p className="text-sm font-medium">(906) 482-6616</p>
|
<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">(906) 482-6616</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">info@queuenorth.com</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="mb-8">
|
||||||
|
<a href="/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
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</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">info@queuenorth.com</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="mb-8">
|
|
||||||
<a href="/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
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{/* Contact Form */}
|
{/* Contact Form */}
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
<section className="bg-background py-16">
|
||||||
{/* Left - Info */}
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
<div>
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
||||||
<div className="mb-8">
|
{/* Left - Info */}
|
||||||
<h2 className="text-2xl font-bold text-primary-navy mb-4">Get in Touch</h2>
|
<div>
|
||||||
<p className="text-soft-text mb-6">
|
<div className="mb-8">
|
||||||
Our team of communications and infrastructure experts is ready to help you find the right solution for your business needs.
|
<h2 className="text-2xl font-bold text-primary-navy mb-4">Get in Touch</h2>
|
||||||
</p>
|
<p className="text-soft-text mb-6">
|
||||||
<div className="space-y-4">
|
Our team of communications and infrastructure experts is ready to help you find the right solution for your business needs.
|
||||||
<div>
|
</p>
|
||||||
<h3 className="font-semibold text-text mb-2">Hours of Operation</h3>
|
<div className="space-y-4">
|
||||||
<p className="text-soft-text">Monday - Friday: 8:00 AM - 6:00 PM CT</p>
|
<div>
|
||||||
|
<h3 className="font-semibold text-text mb-2">Hours of Operation</h3>
|
||||||
|
<p className="text-soft-text">Monday - Friday: 8:00 AM - 6:00 PM CT</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="font-semibold text-text mb-2">Phone</h3>
|
||||||
|
<p className="text-soft-text">(906) 482-6616</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="font-semibold text-text mb-2">Contact Us</h3>
|
||||||
|
<p className="text-soft-text">Use the form on the right to get in touch with our team.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
|
||||||
<h3 className="font-semibold text-text mb-2">Phone</h3>
|
<div className="bg-section-alt rounded-lg p-6">
|
||||||
<p className="text-soft-text">(906) 482-6616</p>
|
<h3 className="font-semibold text-primary-navy mb-4">Why Choose Queue North?</h3>
|
||||||
</div>
|
<ul className="space-y-3">
|
||||||
<div>
|
{[
|
||||||
<h3 className="font-semibold text-text mb-2">Contact Us</h3>
|
'8x8 Certified Partner with proven expertise',
|
||||||
<p className="text-soft-text">Use the form on the right to get in touch with our team.</p>
|
'25+ years of industry experience',
|
||||||
|
'SMB to Enterprise solutions',
|
||||||
|
'Focus on your business outcomes',
|
||||||
|
].map((item, index) => (
|
||||||
|
<li key={index} className="flex items-center gap-3 text-text">
|
||||||
|
<svg className="h-5 w-5 text-primary-navy" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
|
||||||
|
</svg>
|
||||||
|
{item}
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Right - Form */}
|
||||||
|
<div>
|
||||||
|
<form onSubmit={handleSubmit} noValidate className={`space-y-6 ${mutation.isPending ? 'opacity-70 pointer-events-none' : ''}`}>
|
||||||
|
<div>
|
||||||
|
<label htmlFor="company" className="block text-sm font-medium text-text mb-2">
|
||||||
|
Company Name <span className="text-red-600">*</span>
|
||||||
|
</label>
|
||||||
|
<Input
|
||||||
|
type="text"
|
||||||
|
id="company"
|
||||||
|
name="company"
|
||||||
|
value={formState.company}
|
||||||
|
onChange={handleChange}
|
||||||
|
required
|
||||||
|
placeholder="Your company name"
|
||||||
|
className={errors.company ? 'border-red-500 focus-visible:ring-red-500' : ''}
|
||||||
|
/>
|
||||||
|
{debouncedErrors.company && (
|
||||||
|
<p className="text-xs text-red-600 mt-1">{debouncedErrors.company}</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label htmlFor="name" className="block text-sm font-medium text-text mb-2">
|
||||||
|
Name <span className="text-red-600">*</span>
|
||||||
|
</label>
|
||||||
|
<Input
|
||||||
|
type="text"
|
||||||
|
id="name"
|
||||||
|
name="name"
|
||||||
|
value={formState.name}
|
||||||
|
onChange={handleChange}
|
||||||
|
required
|
||||||
|
placeholder="Your full name"
|
||||||
|
className={errors.name ? 'border-red-500 focus-visible:ring-red-500' : ''}
|
||||||
|
/>
|
||||||
|
{debouncedErrors.name && (
|
||||||
|
<p className="text-xs text-red-600 mt-1">{debouncedErrors.name}</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label htmlFor="email" className="block text-sm font-medium text-text mb-2">
|
||||||
|
Email <span className="text-red-600">*</span>
|
||||||
|
</label>
|
||||||
|
<Input
|
||||||
|
type="email"
|
||||||
|
id="email"
|
||||||
|
name="email"
|
||||||
|
value={formState.email}
|
||||||
|
onChange={handleChange}
|
||||||
|
required
|
||||||
|
placeholder="your.email@example.com"
|
||||||
|
className={errors.email ? 'border-red-500 focus-visible:ring-red-500' : ''}
|
||||||
|
/>
|
||||||
|
{debouncedErrors.email && (
|
||||||
|
<p className="text-xs text-red-600 mt-1">{debouncedErrors.email}</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label htmlFor="phone" className="block text-sm font-medium text-text mb-2">
|
||||||
|
Phone (Optional)
|
||||||
|
</label>
|
||||||
|
<Input
|
||||||
|
type="tel"
|
||||||
|
id="phone"
|
||||||
|
name="phone"
|
||||||
|
value={formState.phone}
|
||||||
|
onChange={handleChange}
|
||||||
|
placeholder="(555) 123-4567"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label htmlFor="zip" className="block text-sm font-medium text-text mb-2">
|
||||||
|
ZIP Code (Optional)
|
||||||
|
</label>
|
||||||
|
<Input
|
||||||
|
type="text"
|
||||||
|
id="zip"
|
||||||
|
name="zip"
|
||||||
|
value={formState.zip}
|
||||||
|
onChange={handleChange}
|
||||||
|
placeholder="12345"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label htmlFor="service_interest" className="block text-sm font-medium text-text mb-2">
|
||||||
|
Service Interest (Optional)
|
||||||
|
</label>
|
||||||
|
<Select
|
||||||
|
id="service_interest"
|
||||||
|
name="service_interest"
|
||||||
|
value={formState.service_interest}
|
||||||
|
onChange={handleChange}
|
||||||
|
>
|
||||||
|
<option value="">Select a service...</option>
|
||||||
|
<option value="unified-communications">Unified Communications</option>
|
||||||
|
<option value="contact-center">Contact Center</option>
|
||||||
|
<option value="managed-support">Managed Support</option>
|
||||||
|
<option value="consulting-training">Consulting & Training</option>
|
||||||
|
<option value="infrastructure-cabling">Infrastructure Cabling</option>
|
||||||
|
<option value="wireless-access">Wireless Access</option>
|
||||||
|
<option value="local-networking">Local Networking</option>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label htmlFor="message" className="block text-sm font-medium text-text mb-2">
|
||||||
|
Message <span className="text-red-600">*</span>
|
||||||
|
</label>
|
||||||
|
<Textarea
|
||||||
|
id="message"
|
||||||
|
name="message"
|
||||||
|
value={formState.message}
|
||||||
|
onChange={handleChange}
|
||||||
|
required
|
||||||
|
placeholder="Tell us about your needs..."
|
||||||
|
className={`w-full rounded-md border bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${errors.message ? 'border-red-500 focus-visible:ring-red-500' : ''}`}
|
||||||
|
rows={5}
|
||||||
|
/>
|
||||||
|
{debouncedErrors.message && (
|
||||||
|
<p className="text-xs text-red-600 mt-1">{debouncedErrors.message}</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
type="submit"
|
||||||
|
className="w-full"
|
||||||
|
disabled={mutation.isPending}
|
||||||
|
>
|
||||||
|
{mutation.isPending ? 'Submitting...' : 'Request Consultation'}
|
||||||
|
</Button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="bg-section-alt rounded-lg p-6">
|
|
||||||
<h3 className="font-semibold text-primary-navy mb-4">Why Choose Queue North?</h3>
|
|
||||||
<ul className="space-y-3">
|
|
||||||
{[
|
|
||||||
'8x8 Certified Partner with proven expertise',
|
|
||||||
'25+ years of industry experience',
|
|
||||||
'SMB to Enterprise solutions',
|
|
||||||
'Focus on your business outcomes',
|
|
||||||
].map((item, index) => (
|
|
||||||
<li key={index} className="flex items-center gap-3 text-text">
|
|
||||||
<svg className="h-5 w-5 text-primary-navy" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
|
|
||||||
</svg>
|
|
||||||
{item}
|
|
||||||
</li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</section>
|
||||||
{/* Right - Form */}
|
</>
|
||||||
<div>
|
|
||||||
<form onSubmit={handleSubmit} noValidate className={`space-y-6 ${mutation.isPending ? 'opacity-70 pointer-events-none' : ''}`}>
|
|
||||||
<div>
|
|
||||||
<label htmlFor="company" className="block text-sm font-medium text-text mb-2">
|
|
||||||
Company Name <span className="text-red-600">*</span>
|
|
||||||
</label>
|
|
||||||
<Input
|
|
||||||
type="text"
|
|
||||||
id="company"
|
|
||||||
name="company"
|
|
||||||
value={formState.company}
|
|
||||||
onChange={handleChange}
|
|
||||||
required
|
|
||||||
placeholder="Your company name"
|
|
||||||
className={errors.company ? 'border-red-500 focus-visible:ring-red-500' : ''}
|
|
||||||
/>
|
|
||||||
{debouncedErrors.company && (
|
|
||||||
<p className="text-xs text-red-600 mt-1">{debouncedErrors.company}</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label htmlFor="name" className="block text-sm font-medium text-text mb-2">
|
|
||||||
Name <span className="text-red-600">*</span>
|
|
||||||
</label>
|
|
||||||
<Input
|
|
||||||
type="text"
|
|
||||||
id="name"
|
|
||||||
name="name"
|
|
||||||
value={formState.name}
|
|
||||||
onChange={handleChange}
|
|
||||||
required
|
|
||||||
placeholder="Your full name"
|
|
||||||
className={errors.name ? 'border-red-500 focus-visible:ring-red-500' : ''}
|
|
||||||
/>
|
|
||||||
{debouncedErrors.name && (
|
|
||||||
<p className="text-xs text-red-600 mt-1">{debouncedErrors.name}</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label htmlFor="email" className="block text-sm font-medium text-text mb-2">
|
|
||||||
Email <span className="text-red-600">*</span>
|
|
||||||
</label>
|
|
||||||
<Input
|
|
||||||
type="email"
|
|
||||||
id="email"
|
|
||||||
name="email"
|
|
||||||
value={formState.email}
|
|
||||||
onChange={handleChange}
|
|
||||||
required
|
|
||||||
placeholder="your.email@example.com"
|
|
||||||
className={errors.email ? 'border-red-500 focus-visible:ring-red-500' : ''}
|
|
||||||
/>
|
|
||||||
{debouncedErrors.email && (
|
|
||||||
<p className="text-xs text-red-600 mt-1">{debouncedErrors.email}</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label htmlFor="phone" className="block text-sm font-medium text-text mb-2">
|
|
||||||
Phone (Optional)
|
|
||||||
</label>
|
|
||||||
<Input
|
|
||||||
type="tel"
|
|
||||||
id="phone"
|
|
||||||
name="phone"
|
|
||||||
value={formState.phone}
|
|
||||||
onChange={handleChange}
|
|
||||||
placeholder="(555) 123-4567"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label htmlFor="zip" className="block text-sm font-medium text-text mb-2">
|
|
||||||
ZIP Code (Optional)
|
|
||||||
</label>
|
|
||||||
<Input
|
|
||||||
type="text"
|
|
||||||
id="zip"
|
|
||||||
name="zip"
|
|
||||||
value={formState.zip}
|
|
||||||
onChange={handleChange}
|
|
||||||
placeholder="12345"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label htmlFor="service_interest" className="block text-sm font-medium text-text mb-2">
|
|
||||||
Service Interest (Optional)
|
|
||||||
</label>
|
|
||||||
<Select
|
|
||||||
id="service_interest"
|
|
||||||
name="service_interest"
|
|
||||||
value={formState.service_interest}
|
|
||||||
onChange={handleChange}
|
|
||||||
>
|
|
||||||
<option value="">Select a service...</option>
|
|
||||||
<option value="unified-communications">Unified Communications</option>
|
|
||||||
<option value="contact-center">Contact Center</option>
|
|
||||||
<option value="managed-support">Managed Support</option>
|
|
||||||
<option value="consulting-training">Consulting & Training</option>
|
|
||||||
<option value="infrastructure-cabling">Infrastructure Cabling</option>
|
|
||||||
<option value="wireless-access">Wireless Access</option>
|
|
||||||
<option value="local-networking">Local Networking</option>
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label htmlFor="message" className="block text-sm font-medium text-text mb-2">
|
|
||||||
Message <span className="text-red-600">*</span>
|
|
||||||
</label>
|
|
||||||
<textarea
|
|
||||||
id="message"
|
|
||||||
name="message"
|
|
||||||
value={formState.message}
|
|
||||||
onChange={handleChange}
|
|
||||||
required
|
|
||||||
placeholder="Tell us about your needs..."
|
|
||||||
rows={5}
|
|
||||||
className={`flex min-h-[80px] w-full rounded-md border bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${errors.message ? 'border-red-500 focus-visible:ring-red-500' : ''}`}
|
|
||||||
/>
|
|
||||||
{debouncedErrors.message && (
|
|
||||||
<p className="text-xs text-red-600 mt-1">{debouncedErrors.message}</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Button
|
|
||||||
type="submit"
|
|
||||||
className="w-full"
|
|
||||||
disabled={mutation.isPending}
|
|
||||||
>
|
|
||||||
{mutation.isPending ? 'Submitting...' : 'Request Consultation'}
|
|
||||||
</Button>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -17,10 +17,10 @@ const Home = () => {
|
||||||
const navigate = useNavigate()
|
const navigate = useNavigate()
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
<>
|
||||||
{/* Hero Section */}
|
{/* Hero Section */}
|
||||||
<section className="bg-gradient-to-br from-primary-navy via-primary-navy to-teal-900 text-white py-16 md:py-24">
|
<section className="bg-gradient-to-br from-primary-navy via-primary-navy to-teal-900 text-white py-16 md:py-24">
|
||||||
<div className="container mx-auto px-4">
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12 items-center">
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12 items-center">
|
||||||
<div className="flex flex-col gap-6 md:gap-8">
|
<div className="flex flex-col gap-6 md:gap-8">
|
||||||
<h1 className="text-4xl md:text-5xl lg:text-6xl font-bold">
|
<h1 className="text-4xl md:text-5xl lg:text-6xl font-bold">
|
||||||
|
|
@ -71,7 +71,7 @@ const Home = () => {
|
||||||
|
|
||||||
{/* Trust Bar */}
|
{/* Trust Bar */}
|
||||||
<section className="bg-section-alt py-12">
|
<section className="bg-section-alt py-12">
|
||||||
<div className="container mx-auto px-4">
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
<div className="text-center mb-8">
|
<div className="text-center mb-8">
|
||||||
<h2 className="text-2xl font-semibold text-primary-navy mb-2">Trusted Partner</h2>
|
<h2 className="text-2xl font-semibold text-primary-navy mb-2">Trusted Partner</h2>
|
||||||
<p className="text-soft-text">8x8 and Cisco Certified Partner with proven expertise</p>
|
<p className="text-soft-text">8x8 and Cisco Certified Partner with proven expertise</p>
|
||||||
|
|
@ -95,8 +95,8 @@ const Home = () => {
|
||||||
|
|
||||||
{/* JointLogoWhite Trust Section */}
|
{/* JointLogoWhite Trust Section */}
|
||||||
<section className="bg-primary-navy py-16 md:py-24">
|
<section className="bg-primary-navy py-16 md:py-24">
|
||||||
<div className="container mx-auto px-4 text-center">
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||||
<div className="max-w-3xl mx-auto">
|
<div>
|
||||||
<h2 className="text-3xl md:text-4xl font-bold text-white mb-6">Certified Excellence</h2>
|
<h2 className="text-3xl md:text-4xl font-bold text-white mb-6">Certified Excellence</h2>
|
||||||
<div className="flex flex-col md:flex-row items-center justify-center gap-12">
|
<div className="flex flex-col md:flex-row items-center justify-center gap-12">
|
||||||
<div className="flex-1">
|
<div className="flex-1">
|
||||||
|
|
@ -122,7 +122,7 @@ const Home = () => {
|
||||||
|
|
||||||
{/* Trust Signals Section */}
|
{/* Trust Signals Section */}
|
||||||
<section className="bg-section-alt py-16 md:py-24">
|
<section className="bg-section-alt py-16 md:py-24">
|
||||||
<div className="container mx-auto px-4">
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
<div className="text-center mb-12">
|
<div className="text-center mb-12">
|
||||||
<h2 className="text-2xl md:text-3xl font-semibold text-primary-navy mb-2">Trusted by Thousands of Businesses</h2>
|
<h2 className="text-2xl md:text-3xl font-semibold text-primary-navy mb-2">Trusted by Thousands of Businesses</h2>
|
||||||
<p className="text-xl text-soft-text max-w-2xl mx-auto mb-6">
|
<p className="text-xl text-soft-text max-w-2xl mx-auto mb-6">
|
||||||
|
|
@ -226,7 +226,7 @@ const Home = () => {
|
||||||
|
|
||||||
{/* Services Section */}
|
{/* Services Section */}
|
||||||
<section className="bg-background py-16 md:py-24">
|
<section className="bg-background py-16 md:py-24">
|
||||||
<div className="container mx-auto px-4">
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
<div className="text-center mb-12">
|
<div className="text-center mb-12">
|
||||||
<h2 className="text-3xl md:text-4xl font-bold text-primary-navy mb-4">What We Handle</h2>
|
<h2 className="text-3xl md:text-4xl font-bold text-primary-navy mb-4">What We Handle</h2>
|
||||||
<p className="text-xl text-soft-text max-w-2xl mx-auto">
|
<p className="text-xl text-soft-text max-w-2xl mx-auto">
|
||||||
|
|
@ -270,7 +270,7 @@ const Home = () => {
|
||||||
|
|
||||||
{/* Why Queue North */}
|
{/* Why Queue North */}
|
||||||
<section className="bg-section-alt py-16 md:py-24">
|
<section className="bg-section-alt py-16 md:py-24">
|
||||||
<div className="container mx-auto px-4">
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
<div className="text-center mb-12">
|
<div className="text-center mb-12">
|
||||||
<h2 className="text-3xl md:text-4xl font-bold text-primary-navy mb-4">Why Queue North</h2>
|
<h2 className="text-3xl md:text-4xl font-bold text-primary-navy mb-4">Why Queue North</h2>
|
||||||
<p className="text-xl text-soft-text max-w-2xl mx-auto mb-6">
|
<p className="text-xl text-soft-text max-w-2xl mx-auto mb-6">
|
||||||
|
|
@ -334,7 +334,7 @@ const Home = () => {
|
||||||
|
|
||||||
{/* Industries Section */}
|
{/* Industries Section */}
|
||||||
<section className="bg-background py-16 md:py-24">
|
<section className="bg-background py-16 md:py-24">
|
||||||
<div className="container mx-auto px-4">
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
<div className="text-center mb-12">
|
<div className="text-center mb-12">
|
||||||
<h2 className="text-3xl md:text-4xl font-bold text-primary-navy mb-4">Industries We Serve</h2>
|
<h2 className="text-3xl md:text-4xl font-bold text-primary-navy mb-4">Industries We Serve</h2>
|
||||||
<p className="text-xl text-soft-text max-w-2xl mx-auto">
|
<p className="text-xl text-soft-text max-w-2xl mx-auto">
|
||||||
|
|
@ -367,7 +367,7 @@ const Home = () => {
|
||||||
|
|
||||||
{/* Final CTA */}
|
{/* Final CTA */}
|
||||||
<section className="bg-primary-navy text-white py-16 md:py-24">
|
<section className="bg-primary-navy text-white py-16 md:py-24">
|
||||||
<div className="container mx-auto px-4 text-center max-w-7xl">
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||||
<h2 className="text-3xl md:text-4xl font-bold mb-6">
|
<h2 className="text-3xl md:text-4xl font-bold mb-6">
|
||||||
Tell us what you're trying to fix. We'll help map the path.
|
Tell us what you're trying to fix. We'll help map the path.
|
||||||
</h2>
|
</h2>
|
||||||
|
|
@ -379,7 +379,7 @@ const Home = () => {
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -2,75 +2,87 @@ import { industries } from '@/data/industries'
|
||||||
|
|
||||||
const Industries = () => {
|
const Industries = () => {
|
||||||
return (
|
return (
|
||||||
<div className="container mx-auto px-4 py-16 md:py-24">
|
<>
|
||||||
{/* Page Hero */}
|
{/* Page Hero */}
|
||||||
<section className="mb-16">
|
<section className="bg-background py-16 md:py-24">
|
||||||
<h1 className="text-4xl md:text-5xl font-bold text-primary-navy mb-6">Industries We Serve</h1>
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
<p className="text-xl text-soft-text max-w-3xl">
|
<div>
|
||||||
Tailored communications and infrastructure solutions designed for the unique challenges of your industry.
|
<h1 className="text-4xl md:text-5xl font-bold text-primary-navy mb-6">Industries We Serve</h1>
|
||||||
</p>
|
<p className="text-xl text-soft-text max-w-3xl">
|
||||||
|
Tailored communications and infrastructure solutions designed for the unique challenges of your industry.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{/* Industries Grid */}
|
{/* Industries Grid */}
|
||||||
<section className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-6">
|
<section className="bg-background py-16">
|
||||||
{industries.map((industry) => (
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
<div key={industry.id} className="group cursor-pointer">
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-6">
|
||||||
<div className="rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow bg-card border border-border">
|
{industries.map((industry) => (
|
||||||
<div className="p-6">
|
<div key={industry.id} className="group cursor-pointer">
|
||||||
<div className="flex items-center gap-4 mb-4">
|
<div className="rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow bg-card border border-border">
|
||||||
<div className="h-12 w-12 rounded-lg bg-section-alt flex items-center justify-center flex-shrink-0">
|
<div className="p-6">
|
||||||
<svg className="h-6 w-6 text-primary-navy" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<div className="flex items-center gap-4 mb-4">
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
|
<div className="h-12 w-12 rounded-lg bg-section-alt flex items-center justify-center flex-shrink-0">
|
||||||
</svg>
|
<svg className="h-6 w-6 text-primary-navy" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
</div>
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
|
||||||
<h3 className="text-xl font-semibold text-primary-navy group-hover:text-primary-navy-dark transition-colors">
|
</svg>
|
||||||
{industry.name}
|
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
<p className="text-soft-text mb-4">{industry.shortDesc}</p>
|
|
||||||
|
|
||||||
<div className="mb-4">
|
|
||||||
<h4 className="text-sm font-semibold text-text mb-2">Pain Points We Solve</h4>
|
|
||||||
<div className="space-y-2">
|
|
||||||
{industry.painPoints.slice(0, 2).map((painPoint, index) => (
|
|
||||||
<div key={index} className="flex items-start gap-2 text-sm text-soft-text">
|
|
||||||
<div className="h-4 w-4 rounded-full bg-red-100 text-red-600 flex items-center justify-center flex-shrink-0 mt-0.5">
|
|
||||||
<svg className="h-2 w-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<span>{painPoint}</span>
|
|
||||||
</div>
|
</div>
|
||||||
))}
|
<h3 className="text-xl font-semibold text-primary-navy group-hover:text-primary-navy-dark transition-colors">
|
||||||
|
{industry.name}
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
<p className="text-soft-text mb-4">{industry.shortDesc}</p>
|
||||||
|
|
||||||
|
<div className="mb-4">
|
||||||
|
<h4 className="text-sm font-semibold text-text mb-2">Pain Points We Solve</h4>
|
||||||
|
<div className="space-y-2">
|
||||||
|
{industry.painPoints.slice(0, 2).map((painPoint, index) => (
|
||||||
|
<div key={index} className="flex items-start gap-2 text-sm text-soft-text">
|
||||||
|
<div className="h-4 w-4 rounded-full bg-red-100 text-red-600 flex items-center justify-center flex-shrink-0 mt-0.5">
|
||||||
|
<svg className="h-2 w-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<span>{painPoint}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<a href={`/industries/${industry.id}`} className="inline-flex items-center gap-1 text-primary-navy font-medium hover:underline mt-2">
|
||||||
|
Learn more
|
||||||
|
<svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5l7 7-7 7" />
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<a href={`/industries/${industry.id}`} className="inline-flex items-center gap-1 text-primary-navy font-medium hover:underline mt-2">
|
|
||||||
Learn more
|
|
||||||
<svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5l7 7-7 7" />
|
|
||||||
</svg>
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
))}
|
||||||
</div>
|
</div>
|
||||||
))}
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{/* CTA */}
|
{/* CTA */}
|
||||||
<section className="mt-16 bg-section-alt rounded-xl p-8 md:p-12 text-center">
|
<section className="bg-section-alt py-16">
|
||||||
<h2 className="text-3xl md:text-4xl font-bold text-primary-navy mb-6">Can't Find Your Industry?</h2>
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||||
<p className="text-xl text-soft-text mb-8 max-w-2xl mx-auto">
|
<div>
|
||||||
We work with businesses across all industries. Contact us to discuss your specific needs.
|
<h2 className="text-3xl md:text-4xl font-bold text-primary-navy mb-6">Can't Find Your Industry?</h2>
|
||||||
</p>
|
<p className="text-xl text-soft-text mb-8 max-w-2xl mx-auto">
|
||||||
<a
|
We work with businesses across all industries. Contact us to discuss your specific needs.
|
||||||
href="/contact"
|
</p>
|
||||||
className="inline-block bg-primary-navy text-white px-8 py-3 rounded-md font-bold text-lg hover:bg-primary-navy-dark transition-colors"
|
<a
|
||||||
>
|
href="/contact"
|
||||||
Request Consultation
|
className="inline-block bg-primary-navy text-white px-8 py-3 rounded-md font-bold text-lg hover:bg-primary-navy-dark transition-colors"
|
||||||
</a>
|
>
|
||||||
|
Request Consultation
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -8,96 +8,106 @@ const IndustryDetail = () => {
|
||||||
|
|
||||||
if (!industry) {
|
if (!industry) {
|
||||||
return (
|
return (
|
||||||
<div className="container mx-auto px-4 py-16 md:py-24">
|
<section className="bg-background py-16 md:py-24">
|
||||||
<div className="text-center">
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
<h1 className="text-3xl font-bold text-primary-navy mb-4">Industry Not Found</h1>
|
<div className="text-center">
|
||||||
<p className="text-xl text-soft-text mb-8">The industry you're looking for doesn't exist.</p>
|
<h1 className="text-3xl font-bold text-primary-navy mb-4">Industry Not Found</h1>
|
||||||
<a href="/industries" className="text-primary-navy hover:underline">
|
<p className="text-xl text-soft-text mb-8">The industry you're looking for doesn't exist.</p>
|
||||||
Back to Industries
|
<a href="/industries" className="text-primary-navy hover:underline">
|
||||||
</a>
|
Back to Industries
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="container mx-auto px-4 py-16 md:py-24">
|
<>
|
||||||
{/* Page Hero */}
|
{/* Page Hero */}
|
||||||
<section className="mb-16">
|
<section className="bg-background py-16 md:py-24">
|
||||||
<h1 className="text-4xl md:text-5xl font-bold text-primary-navy mb-6">{industry.name}</h1>
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
<p className="text-xl text-soft-text max-w-3xl">{industry.shortDesc}</p>
|
<div>
|
||||||
|
<h1 className="text-4xl md:text-5xl font-bold text-primary-navy mb-6">{industry.name}</h1>
|
||||||
|
<p className="text-xl text-soft-text max-w-3xl">{industry.shortDesc}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{/* Main Content */}
|
{/* Main Content */}
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-12">
|
<section className="bg-background py-16">
|
||||||
{/* Left Column - Main Content */}
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
<div className="lg:col-span-2">
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-12">
|
||||||
<section className="mb-12">
|
{/* Left Column - Main Content */}
|
||||||
<h2 className="text-2xl font-bold text-primary-navy mb-4">Industry Overview</h2>
|
<div className="lg:col-span-2">
|
||||||
<p className="text-lg text-soft-text mb-6 leading-relaxed">
|
<div className="mb-12">
|
||||||
{industry.fullDesc}
|
<h2 className="text-2xl font-bold text-primary-navy mb-4">Industry Overview</h2>
|
||||||
</p>
|
<p className="text-lg text-soft-text mb-6 leading-relaxed">
|
||||||
</section>
|
{industry.fullDesc}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
<section className="mb-12">
|
<div className="mb-12">
|
||||||
<h2 className="text-2xl font-bold text-primary-navy mb-4">Pain Points We Solve</h2>
|
<h2 className="text-2xl font-bold text-primary-navy mb-4">Pain Points We Solve</h2>
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
{industry.painPoints.map((painPoint, index) => (
|
{industry.painPoints.map((painPoint, index) => (
|
||||||
<div key={index} className="flex items-start gap-3">
|
<div key={index} className="flex items-start gap-3">
|
||||||
<div className="h-6 w-6 rounded-full bg-red-100 text-red-700 flex items-center justify-center flex-shrink-0 mt-1">
|
<div className="h-6 w-6 rounded-full bg-red-100 text-red-700 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
<svg className="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<svg className="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
<span className="text-lg text-text">{painPoint}</span>
|
<span className="text-lg text-text">{painPoint}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
</div>
|
</div>
|
||||||
))}
|
</div>
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section className="mb-12">
|
<div className="mb-12">
|
||||||
<h2 className="text-2xl font-bold text-primary-navy mb-4">Our Solutions</h2>
|
<h2 className="text-2xl font-bold text-primary-navy mb-4">Our Solutions</h2>
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
{industry.solutions.map((solution, index) => (
|
{industry.solutions.map((solution, index) => (
|
||||||
<div key={index} className="flex items-start gap-3">
|
<div key={index} className="flex items-start gap-3">
|
||||||
<div className="h-6 w-6 rounded-full bg-green-100 text-green-700 flex items-center justify-center flex-shrink-0 mt-1">
|
<div className="h-6 w-6 rounded-full bg-green-100 text-green-700 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
<svg className="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<svg className="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
<span className="text-lg text-text">{solution}</span>
|
<span className="text-lg text-text">{solution}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
</div>
|
</div>
|
||||||
))}
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Right Column - Sidebar */}
|
{/* Right Column - Sidebar */}
|
||||||
<div className="lg:col-span-1">
|
<div className="lg:col-span-1">
|
||||||
<Card className="sticky top-24">
|
<Card className="sticky top-24">
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<CardTitle className="text-primary-navy">Industry Insights</CardTitle>
|
<CardTitle className="text-primary-navy">Industry Insights</CardTitle>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent className="space-y-4">
|
<CardContent className="space-y-4">
|
||||||
<div>
|
<div>
|
||||||
<h4 className="font-semibold text-text mb-2">Industry</h4>
|
<h4 className="font-semibold text-text mb-2">Industry</h4>
|
||||||
<p className="text-soft-text">{industry.name}</p>
|
<p className="text-soft-text">{industry.name}</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="pt-4 border-t border-border">
|
<div className="pt-4 border-t border-border">
|
||||||
<a href="/contact" className="block w-full bg-primary-navy text-white px-4 py-3 rounded-md text-center font-medium hover:bg-primary-navy-dark transition-colors">
|
<a href="/contact" className="block w-full bg-primary-navy text-white px-4 py-3 rounded-md text-center font-medium hover:bg-primary-navy-dark transition-colors">
|
||||||
Request Consultation
|
Request Consultation
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div className="pt-2">
|
<div className="pt-2">
|
||||||
<a href="/industries" className="text-primary-navy hover:underline">
|
<a href="/industries" className="text-primary-navy hover:underline">
|
||||||
← Back to Industries
|
← Back to Industries
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
</div>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -8,112 +8,122 @@ const ServiceDetail = () => {
|
||||||
|
|
||||||
if (!service) {
|
if (!service) {
|
||||||
return (
|
return (
|
||||||
<div className="container mx-auto px-4 py-16 md:py-24">
|
<section className="bg-background py-16 md:py-24">
|
||||||
<div className="text-center">
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
<h1 className="text-3xl font-bold text-primary-navy mb-4">Service Not Found</h1>
|
<div className="text-center">
|
||||||
<p className="text-xl text-soft-text mb-8">The service you're looking for doesn't exist.</p>
|
<h1 className="text-3xl font-bold text-primary-navy mb-4">Service Not Found</h1>
|
||||||
<a href="/services" className="text-primary-navy hover:underline">
|
<p className="text-xl text-soft-text mb-8">The service you're looking for doesn't exist.</p>
|
||||||
Back to Services
|
<a href="/services" className="text-primary-navy hover:underline">
|
||||||
</a>
|
Back to Services
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="container mx-auto px-4 py-16 md:py-24">
|
<>
|
||||||
{/* Page Hero */}
|
{/* Page Hero */}
|
||||||
<section className="mb-16">
|
<section className="bg-background py-16 md:py-24">
|
||||||
<h1 className="text-4xl md:text-5xl font-bold text-primary-navy mb-6">{service.name}</h1>
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
{service.image && (
|
<div>
|
||||||
<div className="relative mb-8 rounded-xl overflow-hidden">
|
<h1 className="text-4xl md:text-5xl font-bold text-primary-navy mb-6">{service.name}</h1>
|
||||||
<img
|
{service.image && (
|
||||||
src={service.image}
|
<div className="relative mb-8 rounded-xl overflow-hidden">
|
||||||
alt={service.id === 'infrastructure-cabling' ? 'Professional structured cabling installation'
|
<img
|
||||||
: service.id === 'contact-center' ? 'Modern contact center operations with agents and dashboard'
|
src={service.image}
|
||||||
: 'Network engineer with laptop configuring infrastructure'}
|
alt={service.id === 'infrastructure-cabling' ? 'Professional structured cabling installation'
|
||||||
className="w-full h-64 md:h-80 object-cover"
|
: service.id === 'contact-center' ? 'Modern contact center operations with agents and dashboard'
|
||||||
/>
|
: 'Network engineer with laptop configuring infrastructure'}
|
||||||
<div className="absolute inset-0 bg-gradient-to-t from-primary-navy/60 to-transparent rounded-xl" />
|
className="w-full h-64 md:h-80 object-cover"
|
||||||
|
/>
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-t from-primary-navy/60 to-transparent rounded-xl" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<p className="text-xl text-soft-text max-w-3xl">{service.shortDesc}</p>
|
||||||
</div>
|
</div>
|
||||||
)}
|
</div>
|
||||||
<p className="text-xl text-soft-text max-w-3xl">{service.shortDesc}</p>
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{/* Main Content */}
|
{/* Main Content */}
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-12">
|
<section className="bg-background py-16">
|
||||||
{/* Left Column - Main Content */}
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
<div className="lg:col-span-2">
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-12">
|
||||||
<section className="mb-12">
|
{/* Left Column - Main Content */}
|
||||||
<h2 className="text-2xl font-bold text-primary-navy mb-4">What This Solves</h2>
|
<div className="lg:col-span-2">
|
||||||
<p className="text-lg text-soft-text mb-6 leading-relaxed">
|
<div className="mb-12">
|
||||||
{service.fullDesc}
|
<h2 className="text-2xl font-bold text-primary-navy mb-4">What This Solves</h2>
|
||||||
</p>
|
<p className="text-lg text-soft-text mb-6 leading-relaxed">
|
||||||
</section>
|
{service.fullDesc}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
<section className="mb-12">
|
<div className="mb-12">
|
||||||
<h2 className="text-2xl font-bold text-primary-navy mb-4">Key Benefits</h2>
|
<h2 className="text-2xl font-bold text-primary-navy mb-4">Key Benefits</h2>
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
{service.benefits.map((benefit, index) => (
|
{service.benefits.map((benefit, index) => (
|
||||||
<div key={index} className="flex items-start gap-3">
|
<div key={index} className="flex items-start gap-3">
|
||||||
<div className="h-6 w-6 rounded-full bg-primary-navy text-white flex items-center justify-center flex-shrink-0 mt-1">
|
<div className="h-6 w-6 rounded-full bg-primary-navy text-white flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
<svg className="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<svg className="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
<span className="text-lg text-text">{benefit}</span>
|
<span className="text-lg text-text">{benefit}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
</div>
|
</div>
|
||||||
))}
|
</div>
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section className="mb-12">
|
<div className="mb-12">
|
||||||
<h2 className="text-2xl font-bold text-primary-navy mb-4">Ideal For</h2>
|
<h2 className="text-2xl font-bold text-primary-navy mb-4">Ideal For</h2>
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
{service.idealFor.map((item, index) => (
|
{service.idealFor.map((item, index) => (
|
||||||
<div key={index} className="flex items-start gap-3">
|
<div key={index} className="flex items-start gap-3">
|
||||||
<div className="h-6 w-6 rounded-full bg-primary-navy text-white flex items-center justify-center flex-shrink-0 mt-1">
|
<div className="h-6 w-6 rounded-full bg-primary-navy text-white flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
<svg className="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<svg className="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
<span className="text-lg text-text">{item}</span>
|
<span className="text-lg text-text">{item}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
</div>
|
</div>
|
||||||
))}
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Right Column - Sidebar */}
|
{/* Right Column - Sidebar */}
|
||||||
<div className="lg:col-span-1">
|
<div className="lg:col-span-1">
|
||||||
<Card className="sticky top-24">
|
<Card className="sticky top-24">
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<CardTitle className="text-primary-navy">Quick Info</CardTitle>
|
<CardTitle className="text-primary-navy">Quick Info</CardTitle>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent className="space-y-4">
|
<CardContent className="space-y-4">
|
||||||
<div>
|
<div>
|
||||||
<h4 className="font-semibold text-text mb-2">Service</h4>
|
<h4 className="font-semibold text-text mb-2">Service</h4>
|
||||||
<p className="text-soft-text">{service.name}</p>
|
<p className="text-soft-text">{service.name}</p>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h4 className="font-semibold text-text mb-2">Category</h4>
|
<h4 className="font-semibold text-text mb-2">Category</h4>
|
||||||
<p className="text-soft-text capitalize">{service.id.replace('-', ' ')}</p>
|
<p className="text-soft-text capitalize">{service.id.replace('-', ' ')}</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="pt-4 border-t border-border">
|
<div className="pt-4 border-t border-border">
|
||||||
<a href="/contact" className="block w-full bg-primary-navy text-white px-4 py-3 rounded-md text-center font-medium hover:bg-primary-navy-dark transition-colors">
|
<a href="/contact" className="block w-full bg-primary-navy text-white px-4 py-3 rounded-md text-center font-medium hover:bg-primary-navy-dark transition-colors">
|
||||||
Request This Service
|
Request This Service
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div className="pt-2">
|
<div className="pt-2">
|
||||||
<a href="/services" className="text-primary-navy hover:underline">
|
<a href="/services" className="text-primary-navy hover:underline">
|
||||||
← Back to Services
|
← Back to Services
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
</div>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -3,74 +3,86 @@ import { MessageCircle, Users, LifeBuoy, GraduationCap, Link as LinkIcon, Wifi,
|
||||||
|
|
||||||
const Services = () => {
|
const Services = () => {
|
||||||
return (
|
return (
|
||||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 lg:py-24">
|
<>
|
||||||
{/* Page Hero */}
|
{/* Page Hero */}
|
||||||
<section className="mb-16">
|
<section className="bg-background py-16 lg:py-24">
|
||||||
<h1 className="text-4xl md:text-5xl font-bold text-primary-navy mb-6">Our Services</h1>
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
<p className="text-xl text-soft-text max-w-3xl">
|
<div>
|
||||||
Comprehensive communications and infrastructure solutions designed to help your business thrive in today's digital landscape.
|
<h1 className="text-4xl md:text-5xl font-bold text-primary-navy mb-6">Our Services</h1>
|
||||||
</p>
|
<p className="text-xl text-soft-text max-w-3xl">
|
||||||
|
Comprehensive communications and infrastructure solutions designed to help your business thrive in today's digital landscape.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{/* Services Grid */}
|
{/* Services Grid */}
|
||||||
<section className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
<section className="bg-background py-16">
|
||||||
{services.map((service) => (
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
<div key={service.id} className="group cursor-pointer">
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||||
<div className="rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow bg-card border border-border">
|
{services.map((service) => (
|
||||||
<div className="p-6">
|
<div key={service.id} className="group cursor-pointer">
|
||||||
<div className="flex items-center gap-4 mb-4">
|
<div className="rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow bg-card border border-border">
|
||||||
<div className="h-12 w-12 rounded-lg bg-section-alt flex items-center justify-center flex-shrink-0">
|
<div className="p-6">
|
||||||
{service.icon === 'message-circle' && <MessageCircle className="h-6 w-6 text-primary-navy" />}
|
<div className="flex items-center gap-4 mb-4">
|
||||||
{service.icon === 'users' && <Users className="h-6 w-6 text-primary-navy" />}
|
<div className="h-12 w-12 rounded-lg bg-section-alt flex items-center justify-center flex-shrink-0">
|
||||||
{service.icon === 'life-buoy' && <LifeBuoy className="h-6 w-6 text-primary-navy" />}
|
{service.icon === 'message-circle' && <MessageCircle className="h-6 w-6 text-primary-navy" />}
|
||||||
{service.icon === 'graduation-cap' && <GraduationCap className="h-6 w-6 text-primary-navy" />}
|
{service.icon === 'users' && <Users className="h-6 w-6 text-primary-navy" />}
|
||||||
{service.icon === 'link' && <LinkIcon className="h-6 w-6 text-primary-navy" />}
|
{service.icon === 'life-buoy' && <LifeBuoy className="h-6 w-6 text-primary-navy" />}
|
||||||
{service.icon === 'wifi' && <Wifi className="h-6 w-6 text-primary-navy" />}
|
{service.icon === 'graduation-cap' && <GraduationCap className="h-6 w-6 text-primary-navy" />}
|
||||||
{service.icon === 'network' && <Network className="h-6 w-6 text-primary-navy" />}
|
{service.icon === 'link' && <LinkIcon className="h-6 w-6 text-primary-navy" />}
|
||||||
</div>
|
{service.icon === 'wifi' && <Wifi className="h-6 w-6 text-primary-navy" />}
|
||||||
<h3 className="text-xl font-semibold text-primary-navy group-hover:text-primary-navy-dark transition-colors">
|
{service.icon === 'network' && <Network className="h-6 w-6 text-primary-navy" />}
|
||||||
{service.name}
|
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
<p className="text-soft-text mb-4">{service.shortDesc}</p>
|
|
||||||
<div className="space-y-2 mb-4">
|
|
||||||
{service.benefits.slice(0, 3).map((benefit, index) => (
|
|
||||||
<div key={index} className="flex items-center gap-2 text-sm text-soft-text">
|
|
||||||
<div className="h-4 w-4 rounded-full bg-primary-navy text-white flex items-center justify-center flex-shrink-0">
|
|
||||||
<svg className="h-2 w-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
</div>
|
||||||
<span>{benefit}</span>
|
<h3 className="text-xl font-semibold text-primary-navy group-hover:text-primary-navy-dark transition-colors">
|
||||||
|
{service.name}
|
||||||
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
))}
|
<p className="text-soft-text mb-4">{service.shortDesc}</p>
|
||||||
|
<div className="space-y-2 mb-4">
|
||||||
|
{service.benefits.slice(0, 3).map((benefit, index) => (
|
||||||
|
<div key={index} className="flex items-center gap-2 text-sm text-soft-text">
|
||||||
|
<div className="h-4 w-4 rounded-full bg-primary-navy text-white flex items-center justify-center flex-shrink-0">
|
||||||
|
<svg className="h-2 w-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<span>{benefit}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<a href={`/services/${service.id}`} className="inline-flex items-center gap-1 text-primary-navy font-medium hover:underline mt-2">
|
||||||
|
Learn more
|
||||||
|
<svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5l7 7-7 7" />
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<a href={`/services/${service.id}`} className="inline-flex items-center gap-1 text-primary-navy font-medium hover:underline mt-2">
|
|
||||||
Learn more
|
|
||||||
<svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5l7 7-7 7" />
|
|
||||||
</svg>
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
))}
|
||||||
</div>
|
</div>
|
||||||
))}
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{/* CTA */}
|
{/* CTA */}
|
||||||
<section className="mt-16 bg-section-alt rounded-xl p-8 md:p-12 text-center">
|
<section className="bg-section-alt py-16">
|
||||||
<h2 className="text-3xl md:text-4xl font-bold text-primary-navy mb-6">Looking for Something Specific?</h2>
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||||
<p className="text-xl text-soft-text mb-8 max-w-2xl mx-auto">
|
<div>
|
||||||
Don't see exactly what you're looking for? We can help you find the right solution.
|
<h2 className="text-3xl md:text-4xl font-bold text-primary-navy mb-6">Looking for Something Specific?</h2>
|
||||||
</p>
|
<p className="text-xl text-soft-text mb-8 max-w-2xl mx-auto">
|
||||||
<a
|
Don't see exactly what you're looking for? We can help you find the right solution.
|
||||||
href="/contact"
|
</p>
|
||||||
className="inline-block bg-primary-navy text-white px-8 py-3 rounded-md font-bold text-lg hover:bg-primary-navy-dark transition-colors"
|
<a
|
||||||
>
|
href="/contact"
|
||||||
Request Consultation
|
className="inline-block bg-primary-navy text-white px-8 py-3 rounded-md font-bold text-lg hover:bg-primary-navy-dark transition-colors"
|
||||||
</a>
|
>
|
||||||
|
Request Consultation
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -103,218 +103,226 @@ const Support = () => {
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="container mx-auto px-4 py-16 md:py-24">
|
<>
|
||||||
{/* Page Hero */}
|
{/* Page Hero */}
|
||||||
<section className="mb-16">
|
<section className="bg-background py-16 md:py-24">
|
||||||
<h1 className="text-4xl md:text-5xl font-bold text-primary-navy mb-6">Support</h1>
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
<p className="text-xl text-soft-text max-w-3xl mb-8">
|
<div>
|
||||||
Need help with your communications or infrastructure? Submit a support request and we'll get back to you promptly.
|
<h1 className="text-4xl md:text-5xl font-bold text-primary-navy mb-6">Support</h1>
|
||||||
</p>
|
<p className="text-xl text-soft-text max-w-3xl mb-8">
|
||||||
<div className="flex flex-wrap gap-4 mb-8">
|
Need help with your communications or infrastructure? Submit a support request and we'll get back to you promptly.
|
||||||
<div className="flex items-center gap-2 px-4 py-2 bg-primary-navy/10 rounded-lg text-primary-navy">
|
</p>
|
||||||
<svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<div className="flex flex-wrap gap-4 mb-8">
|
||||||
<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" />
|
<div className="flex items-center gap-2 px-4 py-2 bg-primary-navy/10 rounded-lg text-primary-navy">
|
||||||
</svg>
|
<svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
<p className="text-sm font-medium">(906) 482-6616</p>
|
<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">(906) 482-6616</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">info@queuenorth.com</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="mb-8">
|
||||||
|
<a href="/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
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</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">info@queuenorth.com</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="mb-8">
|
|
||||||
<a href="/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
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{/* Support Form */}
|
{/* Support Form */}
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
<section className="bg-background py-16">
|
||||||
{/* Left - Info */}
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
<div>
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
||||||
<div className="mb-8">
|
{/* Left - Info */}
|
||||||
<h2 className="text-2xl font-bold text-primary-navy mb-4">Support Services</h2>
|
<div>
|
||||||
<p className="text-soft-text mb-6">
|
<div className="mb-8">
|
||||||
We provide comprehensive support for all our services, including 24/7 monitoring, rapid response, and dedicated support engineers.
|
<h2 className="text-2xl font-bold text-primary-navy mb-4">Support Services</h2>
|
||||||
</p>
|
<p className="text-soft-text mb-6">
|
||||||
<div className="space-y-4">
|
We provide comprehensive support for all our services, including 24/7 monitoring, rapid response, and dedicated support engineers.
|
||||||
<div>
|
|
||||||
<h3 className="font-semibold text-text mb-2">Visit Support Center</h3>
|
|
||||||
<a
|
|
||||||
href="https://queuenorth.zoho.com/"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="inline-flex items-center justify-center px-4 py-2 bg-primary-navy text-white font-medium rounded-md hover:bg-navy-darker transition-colors text-sm"
|
|
||||||
>
|
|
||||||
Visit Support Center
|
|
||||||
<svg className="ml-2 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
|
|
||||||
</svg>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 className="font-semibold text-text mb-2">Phone</h3>
|
|
||||||
<p className="text-soft-text">(906) 482-6616</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 className="font-semibold text-text mb-2">Support Hours</h3>
|
|
||||||
<p className="text-soft-text">24/7 Monitoring with rapid response SLAs</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 className="font-semibold text-text mb-2">Priority Levels</h3>
|
|
||||||
<p className="text-soft-text">
|
|
||||||
Low: General inquiries (response within 24 hours)<br/>
|
|
||||||
Medium: Standard issues (response within 4 hours)<br/>
|
|
||||||
High: Critical issues (response within 1 hour)
|
|
||||||
</p>
|
</p>
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div>
|
||||||
|
<h3 className="font-semibold text-text mb-2">Visit Support Center</h3>
|
||||||
|
<a
|
||||||
|
href="https://queuenorth.zoho.com/"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="inline-flex items-center justify-center px-4 py-2 bg-primary-navy text-white font-medium rounded-md hover:bg-navy-darker transition-colors text-sm"
|
||||||
|
>
|
||||||
|
Visit Support Center
|
||||||
|
<svg className="ml-2 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="font-semibold text-text mb-2">Phone</h3>
|
||||||
|
<p className="text-soft-text">(906) 482-6616</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="font-semibold text-text mb-2">Support Hours</h3>
|
||||||
|
<p className="text-soft-text">24/7 Monitoring with rapid response SLAs</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="font-semibold text-text mb-2">Priority Levels</h3>
|
||||||
|
<p className="text-soft-text">
|
||||||
|
Low: General inquiries (response within 24 hours)<br/>
|
||||||
|
Medium: Standard issues (response within 4 hours)<br/>
|
||||||
|
High: Critical issues (response within 1 hour)
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-section-alt rounded-lg p-6">
|
||||||
|
<h3 className="font-semibold text-primary-navy mb-4">What We Support</h3>
|
||||||
|
<ul className="space-y-3">
|
||||||
|
{[
|
||||||
|
'8x8 Communications Platform',
|
||||||
|
'VoIP Phone Systems',
|
||||||
|
'Contact Center Solutions',
|
||||||
|
'Network Infrastructure',
|
||||||
|
'Cloud Migration Support',
|
||||||
|
].map((item, index) => (
|
||||||
|
<li key={index} className="flex items-center gap-3 text-text">
|
||||||
|
<svg className="h-5 w-5 text-primary-navy" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
|
||||||
|
</svg>
|
||||||
|
{item}
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="bg-section-alt rounded-lg p-6">
|
{/* Right - Form */}
|
||||||
<h3 className="font-semibold text-primary-navy mb-4">What We Support</h3>
|
<div>
|
||||||
<ul className="space-y-3">
|
<form onSubmit={handleSubmit} noValidate className={`space-y-6 ${mutation.isPending ? 'opacity-70 pointer-events-none' : ''}`}>
|
||||||
{[
|
<div>
|
||||||
'8x8 Communications Platform',
|
<label htmlFor="name" className="block text-sm font-medium text-text mb-2">
|
||||||
'VoIP Phone Systems',
|
Name <span className="text-red-600">*</span>
|
||||||
'Contact Center Solutions',
|
</label>
|
||||||
'Network Infrastructure',
|
<Input
|
||||||
'Cloud Migration Support',
|
type="text"
|
||||||
].map((item, index) => (
|
id="name"
|
||||||
<li key={index} className="flex items-center gap-3 text-text">
|
name="name"
|
||||||
<svg className="h-5 w-5 text-primary-navy" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
value={formState.name}
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
|
onChange={handleChange}
|
||||||
</svg>
|
required
|
||||||
{item}
|
placeholder="Your full name"
|
||||||
</li>
|
className={errors.name ? 'border-red-500 focus-visible:ring-red-500' : ''}
|
||||||
))}
|
/>
|
||||||
</ul>
|
{debouncedErrors.name && (
|
||||||
|
<p className="text-xs text-red-600 mt-1">{debouncedErrors.name}</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label htmlFor="company" className="block text-sm font-medium text-text mb-2">
|
||||||
|
Company Name <span className="text-red-600">*</span>
|
||||||
|
</label>
|
||||||
|
<Input
|
||||||
|
type="text"
|
||||||
|
id="company"
|
||||||
|
name="company"
|
||||||
|
value={formState.company}
|
||||||
|
onChange={handleChange}
|
||||||
|
required
|
||||||
|
placeholder="Your company name"
|
||||||
|
className={errors.company ? 'border-red-500 focus-visible:ring-red-500' : ''}
|
||||||
|
/>
|
||||||
|
{debouncedErrors.company && (
|
||||||
|
<p className="text-xs text-red-600 mt-1">{debouncedErrors.company}</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label htmlFor="email" className="block text-sm font-medium text-text mb-2">
|
||||||
|
Email <span className="text-red-600">*</span>
|
||||||
|
</label>
|
||||||
|
<Input
|
||||||
|
type="email"
|
||||||
|
id="email"
|
||||||
|
name="email"
|
||||||
|
value={formState.email}
|
||||||
|
onChange={handleChange}
|
||||||
|
required
|
||||||
|
placeholder="your.email@example.com"
|
||||||
|
className={errors.email ? 'border-red-500 focus-visible:ring-red-500' : ''}
|
||||||
|
/>
|
||||||
|
{debouncedErrors.email && (
|
||||||
|
<p className="text-xs text-red-600 mt-1">{debouncedErrors.email}</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label htmlFor="phone" className="block text-sm font-medium text-text mb-2">
|
||||||
|
Phone (Optional)
|
||||||
|
</label>
|
||||||
|
<Input
|
||||||
|
type="tel"
|
||||||
|
id="phone"
|
||||||
|
name="phone"
|
||||||
|
value={formState.phone}
|
||||||
|
onChange={handleChange}
|
||||||
|
placeholder="(555) 123-4567"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label htmlFor="priority" className="block text-sm font-medium text-text mb-2">
|
||||||
|
Priority <span className="text-red-600">*</span>
|
||||||
|
</label>
|
||||||
|
<Select
|
||||||
|
id="priority"
|
||||||
|
name="priority"
|
||||||
|
value={formState.priority}
|
||||||
|
onChange={handleChange}
|
||||||
|
>
|
||||||
|
<option value="low">Low - General inquiries (24 hours)</option>
|
||||||
|
<option value="medium">Medium - Standard issues (4 hours)</option>
|
||||||
|
<option value="high">High - Critical issues (1 hour)</option>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label htmlFor="issue" className="block text-sm font-medium text-text mb-2">
|
||||||
|
Describe Your Issue <span className="text-red-600">*</span>
|
||||||
|
</label>
|
||||||
|
<Textarea
|
||||||
|
id="issue"
|
||||||
|
name="issue"
|
||||||
|
value={formState.issue}
|
||||||
|
onChange={handleChange}
|
||||||
|
required
|
||||||
|
placeholder="Please describe your issue in detail..."
|
||||||
|
className={`w-full rounded-md border bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${errors.issue ? 'border-red-500 focus-visible:ring-red-500' : ''}`}
|
||||||
|
rows={5}
|
||||||
|
/>
|
||||||
|
{debouncedErrors.issue && (
|
||||||
|
<p className="text-xs text-red-600 mt-1">{debouncedErrors.issue}</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
type="submit"
|
||||||
|
className="w-full"
|
||||||
|
disabled={mutation.isPending}
|
||||||
|
>
|
||||||
|
{mutation.isPending ? 'Submitting...' : 'Submit Request'}
|
||||||
|
</Button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</section>
|
||||||
{/* Right - Form */}
|
</>
|
||||||
<div>
|
|
||||||
<form onSubmit={handleSubmit} noValidate className={`space-y-6 ${mutation.isPending ? 'opacity-70 pointer-events-none' : ''}`}>
|
|
||||||
<div>
|
|
||||||
<label htmlFor="name" className="block text-sm font-medium text-text mb-2">
|
|
||||||
Name <span className="text-red-600">*</span>
|
|
||||||
</label>
|
|
||||||
<Input
|
|
||||||
type="text"
|
|
||||||
id="name"
|
|
||||||
name="name"
|
|
||||||
value={formState.name}
|
|
||||||
onChange={handleChange}
|
|
||||||
required
|
|
||||||
placeholder="Your full name"
|
|
||||||
className={errors.name ? 'border-red-500 focus-visible:ring-red-500' : ''}
|
|
||||||
/>
|
|
||||||
{debouncedErrors.name && (
|
|
||||||
<p className="text-xs text-red-600 mt-1">{debouncedErrors.name}</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label htmlFor="company" className="block text-sm font-medium text-text mb-2">
|
|
||||||
Company Name <span className="text-red-600">*</span>
|
|
||||||
</label>
|
|
||||||
<Input
|
|
||||||
type="text"
|
|
||||||
id="company"
|
|
||||||
name="company"
|
|
||||||
value={formState.company}
|
|
||||||
onChange={handleChange}
|
|
||||||
required
|
|
||||||
placeholder="Your company name"
|
|
||||||
className={errors.company ? 'border-red-500 focus-visible:ring-red-500' : ''}
|
|
||||||
/>
|
|
||||||
{debouncedErrors.company && (
|
|
||||||
<p className="text-xs text-red-600 mt-1">{debouncedErrors.company}</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label htmlFor="email" className="block text-sm font-medium text-text mb-2">
|
|
||||||
Email <span className="text-red-600">*</span>
|
|
||||||
</label>
|
|
||||||
<Input
|
|
||||||
type="email"
|
|
||||||
id="email"
|
|
||||||
name="email"
|
|
||||||
value={formState.email}
|
|
||||||
onChange={handleChange}
|
|
||||||
required
|
|
||||||
placeholder="your.email@example.com"
|
|
||||||
className={errors.email ? 'border-red-500 focus-visible:ring-red-500' : ''}
|
|
||||||
/>
|
|
||||||
{debouncedErrors.email && (
|
|
||||||
<p className="text-xs text-red-600 mt-1">{debouncedErrors.email}</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label htmlFor="phone" className="block text-sm font-medium text-text mb-2">
|
|
||||||
Phone (Optional)
|
|
||||||
</label>
|
|
||||||
<Input
|
|
||||||
type="tel"
|
|
||||||
id="phone"
|
|
||||||
name="phone"
|
|
||||||
value={formState.phone}
|
|
||||||
onChange={handleChange}
|
|
||||||
placeholder="(555) 123-4567"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label htmlFor="priority" className="block text-sm font-medium text-text mb-2">
|
|
||||||
Priority <span className="text-red-600">*</span>
|
|
||||||
</label>
|
|
||||||
<Select
|
|
||||||
id="priority"
|
|
||||||
name="priority"
|
|
||||||
value={formState.priority}
|
|
||||||
onChange={handleChange}
|
|
||||||
>
|
|
||||||
<option value="low">Low - General inquiries (24 hours)</option>
|
|
||||||
<option value="medium">Medium - Standard issues (4 hours)</option>
|
|
||||||
<option value="high">High - Critical issues (1 hour)</option>
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label htmlFor="issue" className="block text-sm font-medium text-text mb-2">
|
|
||||||
Describe Your Issue <span className="text-red-600">*</span>
|
|
||||||
</label>
|
|
||||||
<textarea
|
|
||||||
id="issue"
|
|
||||||
name="issue"
|
|
||||||
value={formState.issue}
|
|
||||||
onChange={handleChange}
|
|
||||||
required
|
|
||||||
placeholder="Please describe your issue in detail..."
|
|
||||||
rows={5}
|
|
||||||
className={`flex min-h-[80px] w-full rounded-md border bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${errors.issue ? 'border-red-500 focus-visible:ring-red-500' : ''}`}
|
|
||||||
/>
|
|
||||||
{debouncedErrors.issue && (
|
|
||||||
<p className="text-xs text-red-600 mt-1">{debouncedErrors.issue}</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Button
|
|
||||||
type="submit"
|
|
||||||
className="w-full"
|
|
||||||
disabled={mutation.isPending}
|
|
||||||
>
|
|
||||||
{mutation.isPending ? 'Submitting...' : 'Submit Request'}
|
|
||||||
</Button>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue