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 = () => {
|
||||
return (
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 lg:py-24">
|
||||
<>
|
||||
{/* Page Hero */}
|
||||
<section className="mb-16">
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-primary-navy mb-6">About Queue North</h1>
|
||||
<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>
|
||||
<section className="bg-background py-16 lg:py-24">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div>
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-primary-navy mb-6">About Queue North</h1>
|
||||
<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>
|
||||
|
||||
{/* Company Story */}
|
||||
<section className="grid grid-cols-1 lg:grid-cols-2 gap-12 mb-16">
|
||||
<div>
|
||||
<h2 className="text-3xl font-bold text-primary-navy mb-4">Our Story</h2>
|
||||
<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.
|
||||
</p>
|
||||
<p className="text-lg text-soft-text mb-6 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.
|
||||
</p>
|
||||
<p className="text-lg text-soft-text 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.
|
||||
</p>
|
||||
<p className="text-lg text-soft-text mt-4 leading-relaxed">
|
||||
We continue the mission — bringing the same discipline, reliability, and commitment to every client relationship that we brought to our service.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<div className="rounded-xl overflow-hidden shadow-lg">
|
||||
<img
|
||||
src="/assets/about-image.png"
|
||||
alt="Our Team"
|
||||
className="w-full max-h-96 h-auto object-cover"
|
||||
/>
|
||||
<section className="bg-background py-16">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
||||
<div>
|
||||
<h2 className="text-3xl font-bold text-primary-navy mb-4">Our Story</h2>
|
||||
<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.
|
||||
</p>
|
||||
<p className="text-lg text-soft-text mb-6 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.
|
||||
</p>
|
||||
<p className="text-lg text-soft-text 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.
|
||||
</p>
|
||||
<p className="text-lg text-soft-text mt-4 leading-relaxed">
|
||||
We continue the mission — bringing the same discipline, reliability, and commitment to every client relationship that we brought to our service.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<div className="rounded-xl overflow-hidden shadow-lg">
|
||||
<img
|
||||
src="/assets/about-image.png"
|
||||
alt="Our Team"
|
||||
className="w-full max-h-96 h-auto object-cover"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Our Values */}
|
||||
<section className="mb-16">
|
||||
<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: 'Partnership', desc: 'We work with you, not just for you' },
|
||||
{ title: 'Expertise', desc: 'Our team has real, proven experience in your industry' },
|
||||
{ title: 'Reliability', desc: 'When we say we will do something, we do it' },
|
||||
{ title: 'Support', desc: 'Our job doesn\'t end when installation completes' },
|
||||
].map((value, index) => (
|
||||
<div key={index} className="p-6 rounded-lg border border-border bg-card shadow-sm hover:shadow-md transition-shadow">
|
||||
<h3 className="text-xl font-semibold text-primary-navy mb-3">{value.title}</h3>
|
||||
<p className="text-soft-text">{value.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
<section className="bg-background py-16">
|
||||
<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-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: 'Partnership', desc: 'We work with you, not just for you' },
|
||||
{ title: 'Expertise', desc: 'Our team has real, proven experience in your industry' },
|
||||
{ title: 'Reliability', desc: 'When we say we will do something, we do it' },
|
||||
{ title: 'Support', desc: 'Our job doesn\'t end when installation completes' },
|
||||
].map((value, index) => (
|
||||
<div key={index} className="p-6 rounded-lg border border-border bg-card shadow-sm hover:shadow-md transition-shadow">
|
||||
<h3 className="text-xl font-semibold text-primary-navy mb-3">{value.title}</h3>
|
||||
<p className="text-soft-text">{value.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Our Expertise */}
|
||||
<section className="mb-16">
|
||||
<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',
|
||||
'Contact Center Implementation',
|
||||
'Network Infrastructure',
|
||||
'Cloud Migration',
|
||||
'Vendor-Neutral Consulting',
|
||||
'Disaster Recovery Planning',
|
||||
'24/7 Support & Monitoring',
|
||||
].map((expertise, index) => (
|
||||
<div key={index} className="flex items-center gap-2 p-3 rounded-lg border border-border bg-card">
|
||||
<div className="h-5 w-5 rounded-full bg-primary-navy text-white flex items-center justify-center flex-shrink-0">
|
||||
<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" />
|
||||
</svg>
|
||||
<section className="bg-background py-16">
|
||||
<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-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',
|
||||
'Contact Center Implementation',
|
||||
'Network Infrastructure',
|
||||
'Cloud Migration',
|
||||
'Vendor-Neutral Consulting',
|
||||
'Disaster Recovery Planning',
|
||||
'24/7 Support & Monitoring',
|
||||
].map((expertise, index) => (
|
||||
<div key={index} className="flex items-center gap-2 p-3 rounded-lg border border-border bg-card">
|
||||
<div className="h-5 w-5 rounded-full bg-primary-navy text-white flex items-center justify-center flex-shrink-0">
|
||||
<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" />
|
||||
</svg>
|
||||
</div>
|
||||
<span className="text-sm font-medium text-text">{expertise}</span>
|
||||
</div>
|
||||
<span className="text-sm font-medium text-text">{expertise}</span>
|
||||
</div>
|
||||
))}
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA */}
|
||||
<section className="bg-section-alt rounded-xl p-8 md:p-12 text-center">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-primary-navy mb-6">Ready to Learn More?</h2>
|
||||
<p className="text-xl text-soft-text mb-8 max-w-2xl mx-auto">
|
||||
Schedule a free consultation with our communications experts to discuss your needs.
|
||||
</p>
|
||||
<a
|
||||
href="/contact"
|
||||
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"
|
||||
>
|
||||
Request Consultation
|
||||
</a>
|
||||
<section className="bg-section-alt py-16">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-primary-navy mb-6">Ready to Learn More?</h2>
|
||||
<p className="text-xl text-soft-text mb-8 max-w-2xl mx-auto">
|
||||
Schedule a free consultation with our communications experts to discuss your needs.
|
||||
</p>
|
||||
<a
|
||||
href="/contact"
|
||||
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"
|
||||
>
|
||||
Request Consultation
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -100,218 +100,226 @@ const Contact = () => {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 lg:py-24">
|
||||
<>
|
||||
{/* Page Hero */}
|
||||
<section className="mb-16">
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-primary-navy mb-6">Contact Us</h1>
|
||||
<p className="text-xl text-soft-text max-w-3xl mb-8">
|
||||
Have questions about our services? We're here to help. Fill out the form and we'll get back to you shortly.
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-4 mb-8">
|
||||
<div className="flex items-center gap-2 px-4 py-2 bg-primary-navy/10 rounded-lg text-primary-navy">
|
||||
<svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 5.13a1 1 0 01-1.31.42a2 2 0 00-2.63-.54l-2.238 5.03a2 2 0 01-2.71.319L2.663 12H4a2 2 0 012 2v2a2 2 0 01-2 2H2a2 2 0 01-2-2V5z" />
|
||||
</svg>
|
||||
<p className="text-sm font-medium">(906) 482-6616</p>
|
||||
<section className="bg-background py-16 lg:py-24">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div>
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-primary-navy mb-6">Contact Us</h1>
|
||||
<p className="text-xl text-soft-text max-w-3xl mb-8">
|
||||
Have questions about our services? We're here to help. Fill out the form and we'll get back to you shortly.
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-4 mb-8">
|
||||
<div className="flex items-center gap-2 px-4 py-2 bg-primary-navy/10 rounded-lg text-primary-navy">
|
||||
<svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 5.13a1 1 0 01-1.31.42a2 2 0 00-2.63-.54l-2.238 5.03a2 2 0 01-2.71.319L2.663 12H4a2 2 0 012 2v2a2 2 0 01-2 2H2a2 2 0 01-2-2V5z" />
|
||||
</svg>
|
||||
<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 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>
|
||||
</section>
|
||||
|
||||
{/* Contact Form */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
||||
{/* Left - Info */}
|
||||
<div>
|
||||
<div className="mb-8">
|
||||
<h2 className="text-2xl font-bold text-primary-navy mb-4">Get in Touch</h2>
|
||||
<p className="text-soft-text mb-6">
|
||||
Our team of communications and infrastructure experts is ready to help you find the right solution for your business needs.
|
||||
</p>
|
||||
<div className="space-y-4">
|
||||
<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>
|
||||
<section className="bg-background py-16">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
||||
{/* Left - Info */}
|
||||
<div>
|
||||
<div className="mb-8">
|
||||
<h2 className="text-2xl font-bold text-primary-navy mb-4">Get in Touch</h2>
|
||||
<p className="text-soft-text mb-6">
|
||||
Our team of communications and infrastructure experts is ready to help you find the right solution for your business needs.
|
||||
</p>
|
||||
<div className="space-y-4">
|
||||
<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>
|
||||
<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 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>
|
||||
|
||||
{/* 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 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>
|
||||
|
||||
{/* 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>
|
||||
</section>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -17,10 +17,10 @@ const Home = () => {
|
|||
const navigate = useNavigate()
|
||||
|
||||
return (
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<>
|
||||
{/* Hero Section */}
|
||||
<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="flex flex-col gap-6 md:gap-8">
|
||||
<h1 className="text-4xl md:text-5xl lg:text-6xl font-bold">
|
||||
|
|
@ -71,7 +71,7 @@ const Home = () => {
|
|||
|
||||
{/* Trust Bar */}
|
||||
<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">
|
||||
<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>
|
||||
|
|
@ -95,8 +95,8 @@ const Home = () => {
|
|||
|
||||
{/* JointLogoWhite Trust Section */}
|
||||
<section className="bg-primary-navy py-16 md:py-24">
|
||||
<div className="container mx-auto px-4 text-center">
|
||||
<div className="max-w-3xl mx-auto">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<div>
|
||||
<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-1">
|
||||
|
|
@ -122,7 +122,7 @@ const Home = () => {
|
|||
|
||||
{/* Trust Signals Section */}
|
||||
<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">
|
||||
<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">
|
||||
|
|
@ -226,7 +226,7 @@ const Home = () => {
|
|||
|
||||
{/* Services Section */}
|
||||
<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">
|
||||
<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">
|
||||
|
|
@ -270,7 +270,7 @@ const Home = () => {
|
|||
|
||||
{/* Why Queue North */}
|
||||
<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">
|
||||
<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">
|
||||
|
|
@ -334,7 +334,7 @@ const Home = () => {
|
|||
|
||||
{/* Industries Section */}
|
||||
<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">
|
||||
<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">
|
||||
|
|
@ -367,7 +367,7 @@ const Home = () => {
|
|||
|
||||
{/* Final CTA */}
|
||||
<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">
|
||||
Tell us what you're trying to fix. We'll help map the path.
|
||||
</h2>
|
||||
|
|
@ -379,7 +379,7 @@ const Home = () => {
|
|||
</Button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,75 +2,87 @@ import { industries } from '@/data/industries'
|
|||
|
||||
const Industries = () => {
|
||||
return (
|
||||
<div className="container mx-auto px-4 py-16 md:py-24">
|
||||
<>
|
||||
{/* Page Hero */}
|
||||
<section className="mb-16">
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-primary-navy mb-6">Industries We Serve</h1>
|
||||
<p className="text-xl text-soft-text max-w-3xl">
|
||||
Tailored communications and infrastructure solutions designed for the unique challenges of your industry.
|
||||
</p>
|
||||
<section className="bg-background py-16 md:py-24">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div>
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-primary-navy mb-6">Industries We Serve</h1>
|
||||
<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>
|
||||
|
||||
{/* Industries Grid */}
|
||||
<section className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-6">
|
||||
{industries.map((industry) => (
|
||||
<div key={industry.id} className="group cursor-pointer">
|
||||
<div className="rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow bg-card border border-border">
|
||||
<div className="p-6">
|
||||
<div className="flex items-center gap-4 mb-4">
|
||||
<div className="h-12 w-12 rounded-lg bg-section-alt flex items-center justify-center flex-shrink-0">
|
||||
<svg className="h-6 w-6 text-primary-navy" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<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" />
|
||||
</svg>
|
||||
</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>
|
||||
<section className="bg-background py-16">
|
||||
<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-2 gap-6">
|
||||
{industries.map((industry) => (
|
||||
<div key={industry.id} className="group cursor-pointer">
|
||||
<div className="rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow bg-card border border-border">
|
||||
<div className="p-6">
|
||||
<div className="flex items-center gap-4 mb-4">
|
||||
<div className="h-12 w-12 rounded-lg bg-section-alt flex items-center justify-center flex-shrink-0">
|
||||
<svg className="h-6 w-6 text-primary-navy" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<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" />
|
||||
</svg>
|
||||
</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>
|
||||
|
||||
<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>
|
||||
</section>
|
||||
|
||||
{/* CTA */}
|
||||
<section className="mt-16 bg-section-alt rounded-xl p-8 md:p-12 text-center">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-primary-navy mb-6">Can't Find Your Industry?</h2>
|
||||
<p className="text-xl text-soft-text mb-8 max-w-2xl mx-auto">
|
||||
We work with businesses across all industries. Contact us to discuss your specific needs.
|
||||
</p>
|
||||
<a
|
||||
href="/contact"
|
||||
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"
|
||||
>
|
||||
Request Consultation
|
||||
</a>
|
||||
<section className="bg-section-alt py-16">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-primary-navy mb-6">Can't Find Your Industry?</h2>
|
||||
<p className="text-xl text-soft-text mb-8 max-w-2xl mx-auto">
|
||||
We work with businesses across all industries. Contact us to discuss your specific needs.
|
||||
</p>
|
||||
<a
|
||||
href="/contact"
|
||||
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"
|
||||
>
|
||||
Request Consultation
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,96 +8,106 @@ const IndustryDetail = () => {
|
|||
|
||||
if (!industry) {
|
||||
return (
|
||||
<div className="container mx-auto px-4 py-16 md:py-24">
|
||||
<div className="text-center">
|
||||
<h1 className="text-3xl font-bold text-primary-navy mb-4">Industry Not Found</h1>
|
||||
<p className="text-xl text-soft-text mb-8">The industry you're looking for doesn't exist.</p>
|
||||
<a href="/industries" className="text-primary-navy hover:underline">
|
||||
Back to Industries
|
||||
</a>
|
||||
<section className="bg-background py-16 md:py-24">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="text-center">
|
||||
<h1 className="text-3xl font-bold text-primary-navy mb-4">Industry Not Found</h1>
|
||||
<p className="text-xl text-soft-text mb-8">The industry you're looking for doesn't exist.</p>
|
||||
<a href="/industries" className="text-primary-navy hover:underline">
|
||||
Back to Industries
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container mx-auto px-4 py-16 md:py-24">
|
||||
<>
|
||||
{/* Page Hero */}
|
||||
<section className="mb-16">
|
||||
<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>
|
||||
<section className="bg-background py-16 md:py-24">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<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>
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-12">
|
||||
{/* Left Column - Main Content */}
|
||||
<div className="lg:col-span-2">
|
||||
<section className="mb-12">
|
||||
<h2 className="text-2xl font-bold text-primary-navy mb-4">Industry Overview</h2>
|
||||
<p className="text-lg text-soft-text mb-6 leading-relaxed">
|
||||
{industry.fullDesc}
|
||||
</p>
|
||||
</section>
|
||||
<section className="bg-background py-16">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-12">
|
||||
{/* Left Column - Main Content */}
|
||||
<div className="lg:col-span-2">
|
||||
<div className="mb-12">
|
||||
<h2 className="text-2xl font-bold text-primary-navy mb-4">Industry Overview</h2>
|
||||
<p className="text-lg text-soft-text mb-6 leading-relaxed">
|
||||
{industry.fullDesc}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<section className="mb-12">
|
||||
<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">
|
||||
{industry.painPoints.map((painPoint, index) => (
|
||||
<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">
|
||||
<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" />
|
||||
</svg>
|
||||
</div>
|
||||
<span className="text-lg text-text">{painPoint}</span>
|
||||
<div className="mb-12">
|
||||
<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">
|
||||
{industry.painPoints.map((painPoint, index) => (
|
||||
<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">
|
||||
<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" />
|
||||
</svg>
|
||||
</div>
|
||||
<span className="text-lg text-text">{painPoint}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<section className="mb-12">
|
||||
<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">
|
||||
{industry.solutions.map((solution, index) => (
|
||||
<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">
|
||||
<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" />
|
||||
</svg>
|
||||
</div>
|
||||
<span className="text-lg text-text">{solution}</span>
|
||||
<div className="mb-12">
|
||||
<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">
|
||||
{industry.solutions.map((solution, index) => (
|
||||
<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">
|
||||
<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" />
|
||||
</svg>
|
||||
</div>
|
||||
<span className="text-lg text-text">{solution}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
{/* Right Column - Sidebar */}
|
||||
<div className="lg:col-span-1">
|
||||
<Card className="sticky top-24">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-primary-navy">Industry Insights</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div>
|
||||
<h4 className="font-semibold text-text mb-2">Industry</h4>
|
||||
<p className="text-soft-text">{industry.name}</p>
|
||||
</div>
|
||||
<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">
|
||||
Request Consultation
|
||||
</a>
|
||||
</div>
|
||||
<div className="pt-2">
|
||||
<a href="/industries" className="text-primary-navy hover:underline">
|
||||
← Back to Industries
|
||||
</a>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
{/* Right Column - Sidebar */}
|
||||
<div className="lg:col-span-1">
|
||||
<Card className="sticky top-24">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-primary-navy">Industry Insights</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div>
|
||||
<h4 className="font-semibold text-text mb-2">Industry</h4>
|
||||
<p className="text-soft-text">{industry.name}</p>
|
||||
</div>
|
||||
<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">
|
||||
Request Consultation
|
||||
</a>
|
||||
</div>
|
||||
<div className="pt-2">
|
||||
<a href="/industries" className="text-primary-navy hover:underline">
|
||||
← Back to Industries
|
||||
</a>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,112 +8,122 @@ const ServiceDetail = () => {
|
|||
|
||||
if (!service) {
|
||||
return (
|
||||
<div className="container mx-auto px-4 py-16 md:py-24">
|
||||
<div className="text-center">
|
||||
<h1 className="text-3xl font-bold text-primary-navy mb-4">Service Not Found</h1>
|
||||
<p className="text-xl text-soft-text mb-8">The service you're looking for doesn't exist.</p>
|
||||
<a href="/services" className="text-primary-navy hover:underline">
|
||||
Back to Services
|
||||
</a>
|
||||
<section className="bg-background py-16 md:py-24">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="text-center">
|
||||
<h1 className="text-3xl font-bold text-primary-navy mb-4">Service Not Found</h1>
|
||||
<p className="text-xl text-soft-text mb-8">The service you're looking for doesn't exist.</p>
|
||||
<a href="/services" className="text-primary-navy hover:underline">
|
||||
Back to Services
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container mx-auto px-4 py-16 md:py-24">
|
||||
<>
|
||||
{/* Page Hero */}
|
||||
<section className="mb-16">
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-primary-navy mb-6">{service.name}</h1>
|
||||
{service.image && (
|
||||
<div className="relative mb-8 rounded-xl overflow-hidden">
|
||||
<img
|
||||
src={service.image}
|
||||
alt={service.id === 'infrastructure-cabling' ? 'Professional structured cabling installation'
|
||||
: service.id === 'contact-center' ? 'Modern contact center operations with agents and dashboard'
|
||||
: 'Network engineer with laptop configuring infrastructure'}
|
||||
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" />
|
||||
<section className="bg-background py-16 md:py-24">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div>
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-primary-navy mb-6">{service.name}</h1>
|
||||
{service.image && (
|
||||
<div className="relative mb-8 rounded-xl overflow-hidden">
|
||||
<img
|
||||
src={service.image}
|
||||
alt={service.id === 'infrastructure-cabling' ? 'Professional structured cabling installation'
|
||||
: service.id === 'contact-center' ? 'Modern contact center operations with agents and dashboard'
|
||||
: 'Network engineer with laptop configuring infrastructure'}
|
||||
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>
|
||||
)}
|
||||
<p className="text-xl text-soft-text max-w-3xl">{service.shortDesc}</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-12">
|
||||
{/* Left Column - Main Content */}
|
||||
<div className="lg:col-span-2">
|
||||
<section className="mb-12">
|
||||
<h2 className="text-2xl font-bold text-primary-navy mb-4">What This Solves</h2>
|
||||
<p className="text-lg text-soft-text mb-6 leading-relaxed">
|
||||
{service.fullDesc}
|
||||
</p>
|
||||
</section>
|
||||
<section className="bg-background py-16">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-12">
|
||||
{/* Left Column - Main Content */}
|
||||
<div className="lg:col-span-2">
|
||||
<div className="mb-12">
|
||||
<h2 className="text-2xl font-bold text-primary-navy mb-4">What This Solves</h2>
|
||||
<p className="text-lg text-soft-text mb-6 leading-relaxed">
|
||||
{service.fullDesc}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<section className="mb-12">
|
||||
<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">
|
||||
{service.benefits.map((benefit, index) => (
|
||||
<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">
|
||||
<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" />
|
||||
</svg>
|
||||
</div>
|
||||
<span className="text-lg text-text">{benefit}</span>
|
||||
<div className="mb-12">
|
||||
<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">
|
||||
{service.benefits.map((benefit, index) => (
|
||||
<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">
|
||||
<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" />
|
||||
</svg>
|
||||
</div>
|
||||
<span className="text-lg text-text">{benefit}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<section className="mb-12">
|
||||
<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">
|
||||
{service.idealFor.map((item, index) => (
|
||||
<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">
|
||||
<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" />
|
||||
</svg>
|
||||
</div>
|
||||
<span className="text-lg text-text">{item}</span>
|
||||
<div className="mb-12">
|
||||
<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">
|
||||
{service.idealFor.map((item, index) => (
|
||||
<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">
|
||||
<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" />
|
||||
</svg>
|
||||
</div>
|
||||
<span className="text-lg text-text">{item}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
{/* Right Column - Sidebar */}
|
||||
<div className="lg:col-span-1">
|
||||
<Card className="sticky top-24">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-primary-navy">Quick Info</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div>
|
||||
<h4 className="font-semibold text-text mb-2">Service</h4>
|
||||
<p className="text-soft-text">{service.name}</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold text-text mb-2">Category</h4>
|
||||
<p className="text-soft-text capitalize">{service.id.replace('-', ' ')}</p>
|
||||
</div>
|
||||
<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">
|
||||
Request This Service
|
||||
</a>
|
||||
</div>
|
||||
<div className="pt-2">
|
||||
<a href="/services" className="text-primary-navy hover:underline">
|
||||
← Back to Services
|
||||
</a>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
{/* Right Column - Sidebar */}
|
||||
<div className="lg:col-span-1">
|
||||
<Card className="sticky top-24">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-primary-navy">Quick Info</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div>
|
||||
<h4 className="font-semibold text-text mb-2">Service</h4>
|
||||
<p className="text-soft-text">{service.name}</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold text-text mb-2">Category</h4>
|
||||
<p className="text-soft-text capitalize">{service.id.replace('-', ' ')}</p>
|
||||
</div>
|
||||
<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">
|
||||
Request This Service
|
||||
</a>
|
||||
</div>
|
||||
<div className="pt-2">
|
||||
<a href="/services" className="text-primary-navy hover:underline">
|
||||
← Back to Services
|
||||
</a>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,74 +3,86 @@ import { MessageCircle, Users, LifeBuoy, GraduationCap, Link as LinkIcon, Wifi,
|
|||
|
||||
const Services = () => {
|
||||
return (
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 lg:py-24">
|
||||
<>
|
||||
{/* Page Hero */}
|
||||
<section className="mb-16">
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-primary-navy mb-6">Our Services</h1>
|
||||
<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>
|
||||
<section className="bg-background py-16 lg:py-24">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div>
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-primary-navy mb-6">Our Services</h1>
|
||||
<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>
|
||||
|
||||
{/* Services Grid */}
|
||||
<section className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{services.map((service) => (
|
||||
<div key={service.id} className="group cursor-pointer">
|
||||
<div className="rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow bg-card border border-border">
|
||||
<div className="p-6">
|
||||
<div className="flex items-center gap-4 mb-4">
|
||||
<div className="h-12 w-12 rounded-lg bg-section-alt flex items-center justify-center flex-shrink-0">
|
||||
{service.icon === 'message-circle' && <MessageCircle className="h-6 w-6 text-primary-navy" />}
|
||||
{service.icon === 'users' && <Users className="h-6 w-6 text-primary-navy" />}
|
||||
{service.icon === 'life-buoy' && <LifeBuoy className="h-6 w-6 text-primary-navy" />}
|
||||
{service.icon === 'graduation-cap' && <GraduationCap className="h-6 w-6 text-primary-navy" />}
|
||||
{service.icon === 'link' && <LinkIcon className="h-6 w-6 text-primary-navy" />}
|
||||
{service.icon === 'wifi' && <Wifi className="h-6 w-6 text-primary-navy" />}
|
||||
{service.icon === 'network' && <Network className="h-6 w-6 text-primary-navy" />}
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-primary-navy group-hover:text-primary-navy-dark transition-colors">
|
||||
{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>
|
||||
<section className="bg-background py-16">
|
||||
<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">
|
||||
{services.map((service) => (
|
||||
<div key={service.id} className="group cursor-pointer">
|
||||
<div className="rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow bg-card border border-border">
|
||||
<div className="p-6">
|
||||
<div className="flex items-center gap-4 mb-4">
|
||||
<div className="h-12 w-12 rounded-lg bg-section-alt flex items-center justify-center flex-shrink-0">
|
||||
{service.icon === 'message-circle' && <MessageCircle className="h-6 w-6 text-primary-navy" />}
|
||||
{service.icon === 'users' && <Users className="h-6 w-6 text-primary-navy" />}
|
||||
{service.icon === 'life-buoy' && <LifeBuoy className="h-6 w-6 text-primary-navy" />}
|
||||
{service.icon === 'graduation-cap' && <GraduationCap className="h-6 w-6 text-primary-navy" />}
|
||||
{service.icon === 'link' && <LinkIcon className="h-6 w-6 text-primary-navy" />}
|
||||
{service.icon === 'wifi' && <Wifi className="h-6 w-6 text-primary-navy" />}
|
||||
{service.icon === 'network' && <Network className="h-6 w-6 text-primary-navy" />}
|
||||
</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>
|
||||
))}
|
||||
<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>
|
||||
<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>
|
||||
</section>
|
||||
|
||||
{/* CTA */}
|
||||
<section className="mt-16 bg-section-alt rounded-xl p-8 md:p-12 text-center">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-primary-navy mb-6">Looking for Something Specific?</h2>
|
||||
<p className="text-xl text-soft-text mb-8 max-w-2xl mx-auto">
|
||||
Don't see exactly what you're looking for? We can help you find the right solution.
|
||||
</p>
|
||||
<a
|
||||
href="/contact"
|
||||
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"
|
||||
>
|
||||
Request Consultation
|
||||
</a>
|
||||
<section className="bg-section-alt py-16">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-primary-navy mb-6">Looking for Something Specific?</h2>
|
||||
<p className="text-xl text-soft-text mb-8 max-w-2xl mx-auto">
|
||||
Don't see exactly what you're looking for? We can help you find the right solution.
|
||||
</p>
|
||||
<a
|
||||
href="/contact"
|
||||
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"
|
||||
>
|
||||
Request Consultation
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -103,218 +103,226 @@ const Support = () => {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="container mx-auto px-4 py-16 md:py-24">
|
||||
<>
|
||||
{/* Page Hero */}
|
||||
<section className="mb-16">
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-primary-navy mb-6">Support</h1>
|
||||
<p className="text-xl text-soft-text max-w-3xl mb-8">
|
||||
Need help with your communications or infrastructure? Submit a support request and we'll get back to you promptly.
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-4 mb-8">
|
||||
<div className="flex items-center gap-2 px-4 py-2 bg-primary-navy/10 rounded-lg text-primary-navy">
|
||||
<svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 5.13a1 1 0 01-1.31.42a2 2 0 00-2.63-.54l-2.238 5.03a2 2 0 01-2.71.319L2.663 12H4a2 2 0 012 2v2a2 2 0 01-2 2H2a2 2 0 01-2-2V5z" />
|
||||
</svg>
|
||||
<p className="text-sm font-medium">(906) 482-6616</p>
|
||||
<section className="bg-background py-16 md:py-24">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div>
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-primary-navy mb-6">Support</h1>
|
||||
<p className="text-xl text-soft-text max-w-3xl mb-8">
|
||||
Need help with your communications or infrastructure? Submit a support request and we'll get back to you promptly.
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-4 mb-8">
|
||||
<div className="flex items-center gap-2 px-4 py-2 bg-primary-navy/10 rounded-lg text-primary-navy">
|
||||
<svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 5.13a1 1 0 01-1.31.42a2 2 0 00-2.63-.54l-2.238 5.03a2 2 0 01-2.71.319L2.663 12H4a2 2 0 012 2v2a2 2 0 01-2 2H2a2 2 0 01-2-2V5z" />
|
||||
</svg>
|
||||
<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 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>
|
||||
</section>
|
||||
|
||||
{/* Support Form */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
||||
{/* Left - Info */}
|
||||
<div>
|
||||
<div className="mb-8">
|
||||
<h2 className="text-2xl font-bold text-primary-navy mb-4">Support Services</h2>
|
||||
<p className="text-soft-text mb-6">
|
||||
We provide comprehensive support for all our services, including 24/7 monitoring, rapid response, and dedicated support engineers.
|
||||
</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)
|
||||
<section className="bg-background py-16">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
||||
{/* Left - Info */}
|
||||
<div>
|
||||
<div className="mb-8">
|
||||
<h2 className="text-2xl font-bold text-primary-navy mb-4">Support Services</h2>
|
||||
<p className="text-soft-text mb-6">
|
||||
We provide comprehensive support for all our services, including 24/7 monitoring, rapid response, and dedicated support engineers.
|
||||
</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 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>
|
||||
{/* 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..."
|
||||
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>
|
||||
|
||||
{/* 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>
|
||||
</section>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue