194 lines
9.1 KiB
JavaScript
194 lines
9.1 KiB
JavaScript
import { Button } from '@/components/ui/Button'
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/Card'
|
|
import { services } from '@/data/services'
|
|
import { industries } from '@/data/industries'
|
|
import { useNavigate } from 'react-router-dom'
|
|
import { MapPin } from 'lucide-react'
|
|
|
|
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-primary-navy text-white py-16 md:py-24">
|
|
<div className="container mx-auto px-4">
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
|
<div>
|
|
<h1 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6">
|
|
Modern Communications Infrastructure Without the Vendor Noise
|
|
</h1>
|
|
<p className="text-xl md:text-2xl text-section-alt mb-8 max-w-2xl">
|
|
We deliver UCaaS, Contact Center, deployment, and managed lifecycle support for SMB and enterprise organizations.
|
|
</p>
|
|
<div className="flex flex-col sm:flex-row gap-4">
|
|
<Button variant="default" size="lg" className="bg-white text-primary-navy hover:bg-gray-100">
|
|
Request Consultation
|
|
</Button>
|
|
<Button variant="outline" size="lg" className="border-white text-white hover:bg-white/10">
|
|
Explore Services
|
|
</Button>
|
|
</div>
|
|
<div className="mt-10 flex flex-wrap gap-4">
|
|
<span className="px-4 py-2 bg-white/10 rounded-full text-sm font-medium">8x8 Certified Partner</span>
|
|
<span className="px-4 py-2 bg-white/10 rounded-full text-sm font-medium">Veteran Owned</span>
|
|
<span className="px-4 py-2 bg-white/10 rounded-full text-sm font-numeric">25+ Years Experience</span>
|
|
<span className="px-4 py-2 bg-white/10 rounded-full text-sm font-medium">SMB to Enterprise</span>
|
|
</div>
|
|
</div>
|
|
<div className="hidden lg:block">
|
|
<div className="relative rounded-xl overflow-hidden shadow-2xl">
|
|
<img
|
|
src="/assets/hero-tech.png"
|
|
alt="Communications Infrastructure"
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-t from-primary-navy/50 to-transparent" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Trust Bar */}
|
|
<section className="bg-section-alt py-12">
|
|
<div className="container mx-auto px-4">
|
|
<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 Certified Partner with proven expertise</p>
|
|
</div>
|
|
<div className="flex flex-wrap justify-center items-center gap-8 md:gap-16 opacity-70">
|
|
<div className="flex items-center gap-3">
|
|
<img src="/assets/8x8_Logo_White.svg" alt="8x8" className="h-8" />
|
|
<span className="font-medium">8x8 Certified Partner</span>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-8 h-8 bg-primary-navy rounded-full flex items-center justify-center text-white font-bold">V</div>
|
|
<span className="font-medium">Veteran Owned</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Services Section */}
|
|
<section className="bg-background py-16 md:py-24">
|
|
<div className="container mx-auto px-4">
|
|
<div className="text-center mb-12">
|
|
<h2 className="text-3xl md:text-4xl font-bold text-primary-navy mb-4">Our Services</h2>
|
|
<p className="text-xl text-soft-text max-w-2xl mx-auto">
|
|
Comprehensive communications and infrastructure solutions for every business need
|
|
</p>
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{services.map((service) => (
|
|
<Card key={service.id} className="hover:shadow-md transition-shadow cursor-pointer">
|
|
<CardHeader>
|
|
<CardTitle className="text-primary-navy">{service.name}</CardTitle>
|
|
<CardDescription>{service.shortDesc}</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<p className="text-sm text-soft-text mb-4">{service.fullDesc}</p>
|
|
<Button variant="link" className="text-primary-navy p-0 h-auto text-sm" onClick={() => navigate(`/services/${service.id}`)}>
|
|
Learn more →
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Why Queue North */}
|
|
<section className="bg-section-alt py-16 md:py-24">
|
|
<div className="container mx-auto px-4">
|
|
<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">
|
|
Three pillars of our approach to communications and infrastructure
|
|
</p>
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="text-primary-navy">Architecture</CardTitle>
|
|
<CardDescription>Strategic Design</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<p className="text-sm text-soft-text mb-4">
|
|
We design communications architectures that scale with your business, not against it. Our approach ensures your infrastructure supports your goals, not complicates them.
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="text-primary-navy">Deployment</CardTitle>
|
|
<CardDescription>Seamless Implementation</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<p className="text-sm text-soft-text mb-4">
|
|
Our deployment process minimizes disruption and maximizes efficiency. We handle everything from planning to go-live, ensuring smooth transitions and quick ROI.
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="text-primary-navy">Lifecycle Support</CardTitle>
|
|
<CardDescription>Ongoing Optimization</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<p className="text-sm text-soft-text mb-4">
|
|
Our support extends beyond installation. We continuously monitor, optimize, and evolve your communications infrastructure to meet changing business needs.
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Industries Section */}
|
|
<section className="bg-background py-16 md:py-24">
|
|
<div className="container mx-auto px-4">
|
|
<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">
|
|
Tailored solutions for healthcare, retail, manufacturing, and more
|
|
</p>
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
{industries.map((industry) => (
|
|
<Card key={industry.id} className="hover:shadow-md transition-shadow cursor-pointer">
|
|
<CardContent className="p-6">
|
|
<h3 className="text-xl font-semibold text-primary-navy mb-3">{industry.name}</h3>
|
|
<p className="text-sm text-soft-text mb-4">
|
|
Industry-specific solutions designed to address your unique challenges and requirements.
|
|
</p>
|
|
<Button variant="link" className="text-primary-navy p-0 h-auto text-sm" onClick={() => navigate(industry.href)}>
|
|
Learn more →
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* 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">
|
|
<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>
|
|
<p className="text-xl text-section-alt mb-8 max-w-2xl mx-auto">
|
|
Schedule a free consultation with our communications experts.
|
|
</p>
|
|
<Button variant="default" size="lg" onClick={() => navigate('/contact')}>
|
|
Request Consultation
|
|
</Button>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Home
|