69 lines
3.2 KiB
JavaScript
69 lines
3.2 KiB
JavaScript
import { services } from '@/data/services'
|
|
|
|
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>
|
|
|
|
{/* 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">
|
|
<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="M13 10V3L4 14h7v7l9-11h-7z" />
|
|
</svg>
|
|
</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>
|
|
<p className="text-sm text-soft-text mb-4">{service.fullDesc}</p>
|
|
<div className="flex flex-wrap gap-2 mb-4">
|
|
{service.benefits.slice(0, 2).map((benefit, index) => (
|
|
<span key={index} className="px-2 py-1 bg-section-alt rounded text-xs text-soft-text">
|
|
{benefit}
|
|
</span>
|
|
))}
|
|
</div>
|
|
<a href={`/services/${service.id}`} className="text-primary-navy font-medium hover:underline inline-flex items-center gap-1">
|
|
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>
|
|
))}
|
|
</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>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Services
|