tknuth/bayarea
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Neue services

Browse Source
This commit is contained in:
Timo Knuth
2026-03-25 20:07:27 -05:00
parent 42e0971a13
commit bcf9dc541c
85 changed files with 8589 additions and 4832 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
components/Footer.tsx
View File

@@ -1,68 +1,109 @@
import React from 'react';
import { motion } from 'framer-motion';
import { Link } from 'react-router-dom';
const Footer: React.FC = () => {
return (
<footer className="bg-background-light dark:bg-background-dark border-t border-gray-200 dark:border-white/10 pt-16 pb-8">
<div className="max-w-7xl mx-auto px-6">
<div className="grid grid-cols-1 md:grid-cols-4 gap-12 mb-16">
<div className="grid grid-cols-1 md:grid-cols-5 gap-12 mb-16">
<div className="col-span-1 md:col-span-2">
<div className="flex items-center gap-2 mb-6">
<span className="material-symbols-outlined text-xl text-gray-900 dark:text-white">dns</span>
<span className="font-display font-bold text-lg tracking-tight text-gray-900 dark:text-white">Bay Area Affiliates</span>
<span className="font-display font-bold text-lg tracking-tight text-gray-900 dark:text-white">Bay Area IT</span>
</div>
<p className="text-sm text-gray-600 dark:text-gray-400 max-w-xs mb-6">
Providing reliable IT services and solutions to the Coastal Bend community for over 25 years.
Providing reliable IT services and practical technology support to the Coastal Bend community for over 25 years.
</p>
<div className="flex gap-4">
{['X', 'in', 'fb'].map((social) => (
<motion.a
key={social}
href="#"
whileHover={{ y: -5, borderColor: "#ffffff", color: "#ffffff" }}
className="w-8 h-8 flex items-center justify-center rounded border border-gray-300 dark:border-white/20 text-gray-600 dark:text-gray-400 transition-colors"
>
<span className="text-xs font-bold">{social}</span>
</motion.a>
))}
<div className="flex flex-wrap gap-3 text-sm text-gray-600 dark:text-gray-400">
<a href="tel:+13617658400" className="transition-colors hover:text-gray-900 dark:hover:text-white">
(361) 765-8400
</a>
<a href="mailto:info@bayareaaffiliates.com" className="transition-colors hover:text-gray-900 dark:hover:text-white">
info@bayareaaffiliates.com
</a>
</div>
</div>
<div>
<h4 className="text-sm font-bold text-gray-900 dark:text-white mb-6 uppercase tracking-wider">Navigation</h4>
<h4 className="text-sm font-bold text-gray-900 dark:text-white mb-6 uppercase tracking-wider">Services</h4>
<ul className="space-y-4 text-sm text-gray-600 dark:text-gray-400">
{['Services', 'Features', 'Blog', 'Contact'].map((item) => (
<li key={item}>
<motion.a
href="#"
whileHover={{ x: 5, color: "#ffffff" }}
className="inline-block transition-colors"
>
{item}
</motion.a>
{[
{ label: 'IT Help Desk', to: '/services/it-help-desk' },
{ label: 'Computer Support', to: '/services/computer-support' },
{ label: 'Business Email', to: '/services/business-email-services' },
{ label: 'Domain & DNS', to: '/services/domain-registration-dns-support' },
{ label: 'Web Design', to: '/services/web-design-corpus-christi' },
].map((item) => (
<li key={item.label}>
<motion.div whileHover={{ x: 5 }} className="inline-block">
<Link to={item.to} className="transition-colors hover:text-gray-900 dark:hover:text-white">
{item.label}
</Link>
</motion.div>
</li>
))}
</ul>
</div>
<div>
<h4 className="text-sm font-bold text-gray-900 dark:text-white mb-6 uppercase tracking-wider">Contact</h4>
<h4 className="text-sm font-bold text-gray-900 dark:text-white mb-6 uppercase tracking-wider">Areas We Serve</h4>
<ul className="space-y-4 text-sm text-gray-600 dark:text-gray-400">
<li>support@bayareaaffiliates.com</li>
{[
{ label: 'Corpus Christi', to: '/locations/it-support-corpus-christi' },
{ label: 'Portland, TX', to: '/locations/it-support-portland-tx' },
{ label: 'Rockport, TX', to: '/locations/it-support-rockport-tx' },
{ label: 'Aransas Pass', to: '/locations/it-support-aransas-pass-tx' },
{ label: 'Kingsville', to: '/locations/it-support-kingsville-tx' },
].map((item) => (
<li key={item.label}>
<motion.div whileHover={{ x: 5 }} className="inline-block">
<Link to={item.to} className="transition-colors hover:text-gray-900 dark:hover:text-white">
{item.label}
</Link>
</motion.div>
</li>
))}
</ul>
</div>
<div>
<h4 className="text-sm font-bold text-gray-900 dark:text-white mb-6 uppercase tracking-wider">Company</h4>
<ul className="space-y-4 text-sm text-gray-600 dark:text-gray-400">
{[
{ label: 'About', to: '/about' },
{ label: 'Blog', to: '/blog' },
{ label: 'Contact', to: '/contact' },
{ label: 'Privacy Policy', to: '/privacy-policy' },
{ label: 'Terms of Service', to: '/terms-of-service' },
].map((item) => (
<li key={item.label}>
<motion.div whileHover={{ x: 5 }} className="inline-block">
<Link to={item.to} className="transition-colors hover:text-gray-900 dark:hover:text-white">
{item.label}
</Link>
</motion.div>
</li>
))}
<li>
<a href="mailto:info@bayareaaffiliates.com" className="hover:text-gray-900 dark:hover:text-white transition-colors">info@bayareaaffiliates.com</a>
</li>
<li>(361) 765-8400</li>
<li>1001 Blucher St, Corpus Christi, TX 78401</li>
<li><motion.a whileHover={{ x: 5, color: "#ffffff" }} href="#" className="inline-block transition-colors">FAQ</motion.a></li>
</ul>
</div>
</div>
<div className="border-t border-gray-200 dark:border-white/10 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
<p className="text-xs text-gray-500 dark:text-gray-600">
© 2026 Bay Area Affiliates, Inc. All rights reserved.
© 2026 Bay Area IT. All rights reserved.
</p>
<div className="flex gap-6">
<motion.a whileHover={{ color: "#ffffff" }} href="#" className="text-xs text-gray-500 dark:text-gray-600 transition-colors">Privacy Policy</motion.a>
<motion.a whileHover={{ color: "#ffffff" }} href="#" className="text-xs text-gray-500 dark:text-gray-600 transition-colors">Terms of Service</motion.a>
<div className="flex flex-wrap items-center justify-center gap-4 text-xs text-gray-500 dark:text-gray-600">
<Link to="/privacy-policy" className="transition-colors hover:text-gray-900 dark:hover:text-white">
Privacy Policy
</Link>
<Link to="/terms-of-service" className="transition-colors hover:text-gray-900 dark:hover:text-white">
Terms of Service
</Link>
</div>
</div>
</div>
@@ -70,4 +111,4 @@ const Footer: React.FC = () => {
);
};
export default Footer;
export default Footer;