bayarea-cc/src/components/Footer.tsx

117 lines
4.2 KiB
TypeScript

import { Link } from 'react-router-dom';
import { MapPin, Phone, Mail } from 'lucide-react';
const Footer = () => {
const quickLinks = [
{ name: 'Services', path: '/services' },
{ name: 'About', path: '/about' },
{ name: 'Blog', path: '/blog' },
{ name: 'Contact', path: '/contact' },
];
const services = [
'Hardware & Desktop Support',
'Network Infrastructure',
'Virtualization & Cloud',
'Secure Remote Access',
'Backup & Continuity',
'Microsoft 365',
];
return (
<footer className="bg-background-deep border-t border-border">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
{/* Company info */}
<div className="lg:col-span-2">
<div className="flex items-center space-x-2 mb-6">
<div className="w-8 h-8 bg-neon rounded-lg flex items-center justify-center">
<span className="text-neon-foreground font-bold text-sm">BA</span>
</div>
<span className="font-heading font-bold text-lg text-foreground">
Bay Area Affiliates, Inc.
</span>
</div>
<p className="text-foreground-muted mb-6 leading-relaxed max-w-md">
Top-notch Computer & Networking solutions for the Coastal Bend.
We design, run and protect your IT so you can focus on growth.
</p>
<div className="space-y-3">
<div className="flex items-center text-foreground-muted">
<MapPin className="w-4 h-4 mr-3 text-neon" />
<span>Serving Corpus Christi & the Coastal Bend</span>
</div>
<div className="flex items-center text-foreground-muted">
<Phone className="w-4 h-4 mr-3 text-neon" />
<a href="tel:+1-361-555-0123" className="hover:text-neon transition-colors">
(361) 555-0123
</a>
</div>
<div className="flex items-center text-foreground-muted">
<Mail className="w-4 h-4 mr-3 text-neon" />
<a href="mailto:info@bayareaaffiliates.com" className="hover:text-neon transition-colors">
info@bayareaaffiliates.com
</a>
</div>
</div>
</div>
{/* Quick links */}
<div>
<h3 className="font-heading font-semibold text-foreground mb-4">Company</h3>
<ul className="space-y-2">
{quickLinks.map((link) => (
<li key={link.name}>
<Link
to={link.path}
className="text-foreground-muted hover:text-neon transition-colors"
>
{link.name}
</Link>
</li>
))}
</ul>
</div>
{/* Services */}
<div>
<h3 className="font-heading font-semibold text-foreground mb-4">Services</h3>
<ul className="space-y-2">
{services.map((service) => (
<li key={service}>
<Link
to="/services"
className="text-foreground-muted hover:text-neon transition-colors text-sm"
>
{service}
</Link>
</li>
))}
</ul>
</div>
</div>
{/* Bottom bar */}
<div className="pt-8 border-t border-border flex flex-col sm:flex-row justify-between items-center">
<div className="text-foreground-muted text-sm mb-4 sm:mb-0">
© 2024 Bay Area Affiliates, Inc. All rights reserved.
</div>
<div className="flex items-center space-x-6 text-sm">
<Link to="/privacy" className="text-foreground-muted hover:text-neon transition-colors">
Privacy Policy
</Link>
<Link to="/terms" className="text-foreground-muted hover:text-neon transition-colors">
Terms of Service
</Link>
</div>
</div>
</div>
</footer>
);
};
export default Footer;