122 lines
6.1 KiB
JavaScript
122 lines
6.1 KiB
JavaScript
import { Link } from 'react-router-dom'
|
|
|
|
const About = () => {
|
|
return (
|
|
<>
|
|
{/* Page Hero */}
|
|
<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="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="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="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>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* CTA */}
|
|
<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>
|
|
<Link
|
|
to="/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
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default About
|