44 lines
2.3 KiB
TypeScript
44 lines
2.3 KiB
TypeScript
|
||
import React from 'react';
|
||
import { Link } from 'react-router-dom';
|
||
import { locationData } from '../src/data/seoData';
|
||
|
||
const AreasWeServe: React.FC = () => {
|
||
return (
|
||
<section className="py-24 px-6 bg-gray-50 dark:bg-white/5 mx-auto text-center border-t border-gray-200 dark:border-white/10">
|
||
<div className="max-w-4xl mx-auto">
|
||
<h2 className="font-display text-3xl md:text-4xl font-bold mb-6 text-gray-900 dark:text-white">
|
||
Areas We Serve – Local IT Support Across the Coastal Bend
|
||
</h2>
|
||
<p className="text-xl text-gray-600 dark:text-gray-300 mb-12 leading-relaxed">
|
||
We provide professional IT support and IT services for businesses throughout Corpus Christi and the surrounding Coastal Bend area.
|
||
Our team supports local companies with business IT support, outsourced IT services, and help desk solutions, delivered remotely or on-site when needed.
|
||
</p>
|
||
|
||
<div className="grid grid-cols-2 md:grid-cols-5 gap-4 mb-12">
|
||
{locationData.map((loc) => (
|
||
<Link
|
||
key={loc.slug}
|
||
to={`/${loc.slug}`}
|
||
className="p-4 bg-white dark:bg-white/10 rounded-lg shadow-sm hover:shadow-md transition-all text-gray-800 dark:text-gray-200 font-medium hover:text-black dark:hover:text-white"
|
||
>
|
||
{loc.city}
|
||
</Link>
|
||
))}
|
||
</div>
|
||
|
||
<p className="text-lg text-gray-600 dark:text-gray-400">
|
||
Not sure if your location is covered? <Link to="/contact" className="underline hover:text-black dark:hover:text-white transition-colors">Contact us today</Link> to discuss your IT needs.
|
||
</p>
|
||
<div className="mt-6">
|
||
<Link to="/it-support-corpus-christi" className="text-sm text-gray-500 hover:text-gray-800 dark:hover:text-gray-300 transition-colors">
|
||
Get local IT support in Corpus Christi and nearby areas
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
export default AreasWeServe;
|