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

wow

This commit is contained in:
Timo Knuth 2026-01-09 11:29:02 +01:00
parent 91b819e9c1
commit 1a93c0f5ed
23 changed files with 588 additions and 451 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
index.html
View File

@ -213,10 +213,21 @@
<!-- Performance Optimization --> <!-- Performance Optimization -->
<link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="dns-prefetch" href="https://fonts.gstatic.com" /> <link rel="dns-prefetch" href="https://fonts.gstatic.com" />
<!-- Non-blocking font loading with font-display: swap -->
<link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@600;700;800&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@600;700;800&display=swap" media="print" onload="this.media='all'" />
<noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@600;700;800&display=swap" /></noscript>
<!-- Critical asset preloads -->
<link rel="preload" href="/logo_bayarea.svg" as="image" /> <link rel="preload" href="/logo_bayarea.svg" as="image" />
<link rel="preload" href="/serverroom.webp" as="image" type="image/webp" /> <link rel="preload" href="/serverroom.webp" as="image" type="image/webp" />
<!-- Canonical URL -->
<link rel="canonical" href="https://bayarea-cc.com/" />
<!-- Favicon --> <!-- Favicon -->
<link rel="icon" type="image/svg+xml" href="/logo_bayarea.svg" /> <link rel="icon" type="image/svg+xml" href="/logo_bayarea.svg" />
<link rel="apple-touch-icon" sizes="180x180" href="/logo_bayarea.svg" /> <link rel="apple-touch-icon" sizes="180x180" href="/logo_bayarea.svg" />

2
src/components/Footer.tsx
View File

@ -20,7 +20,7 @@ const Footer = () => {
]; ];
return ( return (
<footer className="bg-background-deep border-t border-border"> <footer role="contentinfo" 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="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"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
{/* Company info */} {/* Company info */}

278
src/components/Navigation.tsx
View File

@ -37,9 +37,9 @@ const Navigation = () => {
<motion.nav <motion.nav
className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${isScrolled className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${isScrolled
? 'bg-white/5 backdrop-blur-2xl border-b border-white/20 shadow-2xl shadow-black/20' ? 'bg-background-deep/80 backdrop-blur-md border-b border-neon/30 shadow-[0_0_20px_rgba(0,0,0,0.5)]'
: 'bg-transparent' : 'bg-transparent border-b border-transparent'
}`} }`}
initial="hidden" initial="hidden"
animate="visible" animate="visible"
variants={navVariants} variants={navVariants}
@ -48,153 +48,153 @@ const Navigation = () => {
> >
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex items-center justify-between h-14 md:h-16"> <div className="flex items-center justify-between h-14 md:h-16">
{/* Logo with animation */} {/* Logo with animation */}
<Link to="/" className="flex items-center space-x-3"> <Link to="/" className="flex items-center space-x-3">
<motion.div
className="w-12 h-12 flex items-center justify-center overflow-visible"
whileHover={{ rotate: 360 }}
transition={{ duration: 0.6, ease: "easeInOut" }}
>
<img
src="/logo_bayarea.svg"
alt="Bay Area Affiliates Logo"
className="w-10 h-10 opacity-90"
/>
</motion.div>
<span className="font-heading font-bold text-lg text-white">
Bay Area Affiliates
</span>
</Link>
{/* Desktop Navigation with animations */}
<div className="hidden md:flex items-center space-x-8">
{navItems.map((item, index) => (
<motion.div <motion.div
key={item.name} className="w-12 h-12 flex items-center justify-center overflow-visible"
initial={{ opacity: 0, y: -20 }} whileHover={{ rotate: 360 }}
animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.6, ease: "easeInOut" }}
transition={{ delay: index * 0.1, duration: 0.5 }}
> >
<Link <img
to={item.path} src="/logo_bayarea.svg"
className={`font-medium transition-all duration-200 relative group px-2 py-1 ${isActive(item.path) alt="Bay Area Affiliates Logo"
? 'text-neon' className="w-10 h-10 opacity-90"
: 'text-white hover:text-neon' />
}`}
>
{item.name}
{/* Animated underline */}
<motion.span
className="absolute -bottom-1 left-0 h-0.5 bg-neon rounded-full"
initial={{ width: isActive(item.path) ? '100%' : 0 }}
whileHover={{ width: '100%', boxShadow: '0 0 8px rgba(51, 102, 255, 0.6)' }}
transition={{ duration: 0.3, ease: "easeOut" }}
/>
{/* Glow effect on hover */}
<motion.span
className="absolute inset-0 bg-neon/5 rounded-lg -z-10"
initial={{ opacity: 0, scale: 0.8 }}
whileHover={{ opacity: 1, scale: 1 }}
transition={{ duration: 0.2 }}
/>
</Link>
</motion.div> </motion.div>
))} <span className="font-heading font-bold text-lg text-white">
<motion.div Bay Area Affiliates
initial={{ opacity: 0, scale: 0.8 }} </span>
animate={{ opacity: 1, scale: 1 }} </Link>
transition={{ delay: 0.5, duration: 0.5 }}
whileHover={buttonHover}
whileTap={buttonTap}
>
<Link
to="/contact"
className="btn-neon ml-4"
>
Get Started
</Link>
</motion.div>
</div>
{/* Mobile menu button with animation */} {/* Desktop Navigation with animations */}
<motion.button <div className="hidden md:flex items-center space-x-8">
onClick={() => setIsOpen(!isOpen)} {navItems.map((item, index) => (
className="md:hidden text-white hover:text-neon transition-colors"
aria-label="Toggle navigation menu"
whileHover={{ scale: 1.1 }}
whileTap={{ scale: 0.9 }}
>
<AnimatePresence mode="wait">
{isOpen ? (
<motion.div <motion.div
key="close" key={item.name}
initial={{ rotate: -90, opacity: 0 }} initial={{ opacity: 0, y: -20 }}
animate={{ rotate: 0, opacity: 1 }} animate={{ opacity: 1, y: 0 }}
exit={{ rotate: 90, opacity: 0 }} transition={{ delay: index * 0.1, duration: 0.5 }}
transition={{ duration: 0.2 }}
> >
<X size={24} />
</motion.div>
) : (
<motion.div
key="menu"
initial={{ rotate: 90, opacity: 0 }}
animate={{ rotate: 0, opacity: 1 }}
exit={{ rotate: -90, opacity: 0 }}
transition={{ duration: 0.2 }}
>
<Menu size={24} />
</motion.div>
)}
</AnimatePresence>
</motion.button>
</div>
{/* Mobile Navigation with smooth animations */}
<AnimatePresence>
{isOpen && (
<motion.div
initial={{ height: 0, opacity: 0 }}
animate={{ height: 'auto', opacity: 1 }}
exit={{ height: 0, opacity: 0 }}
transition={{ duration: 0.3, ease: "easeInOut" }}
className="md:hidden bg-white/5 backdrop-blur-2xl border-t border-white/20 overflow-hidden"
>
<motion.div
className="px-2 pt-2 pb-3 space-y-1"
variants={staggerContainer}
initial="hidden"
animate="visible"
>
{navItems.map((item) => (
<motion.div key={item.name} variants={staggerItem}>
<Link
to={item.path}
onClick={() => setIsOpen(false)}
className={`block px-3 py-2 rounded-md text-base font-medium transition-colors ${isActive(item.path)
? 'text-neon bg-neon/10'
: 'text-white hover:text-neon hover:bg-neon/5'
}`}
>
{item.name}
</Link>
</motion.div>
))}
<motion.div variants={staggerItem}>
<Link <Link
to="/contact" to={item.path}
onClick={() => setIsOpen(false)} className={`font-medium transition-all duration-200 relative group px-2 py-1 ${isActive(item.path)
className="block w-full text-center btn-neon mt-4" ? 'text-neon'
: 'text-white hover:text-neon'
}`}
> >
Get Started {item.name}
{/* Animated underline */}
<motion.span
className="absolute -bottom-1 left-0 h-0.5 bg-neon rounded-full"
initial={{ width: isActive(item.path) ? '100%' : 0 }}
whileHover={{ width: '100%', boxShadow: '0 0 8px rgba(51, 102, 255, 0.6)' }}
transition={{ duration: 0.3, ease: "easeOut" }}
/>
{/* Glow effect on hover */}
<motion.span
className="absolute inset-0 bg-neon/5 rounded-lg -z-10"
initial={{ opacity: 0, scale: 0.8 }}
whileHover={{ opacity: 1, scale: 1 }}
transition={{ duration: 0.2 }}
/>
</Link> </Link>
</motion.div> </motion.div>
))}
<motion.div
initial={{ opacity: 0, scale: 0.8 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ delay: 0.5, duration: 0.5 }}
whileHover={buttonHover}
whileTap={buttonTap}
>
<Link
to="/contact"
className="btn-neon ml-4"
>
Get Started
</Link>
</motion.div> </motion.div>
</motion.div> </div>
)}
</AnimatePresence> {/* Mobile menu button with animation */}
</div> <motion.button
</motion.nav> onClick={() => setIsOpen(!isOpen)}
className="md:hidden text-white hover:text-neon transition-colors"
aria-label="Toggle navigation menu"
whileHover={{ scale: 1.1 }}
whileTap={{ scale: 0.9 }}
>
<AnimatePresence mode="wait">
{isOpen ? (
<motion.div
key="close"
initial={{ rotate: -90, opacity: 0 }}
animate={{ rotate: 0, opacity: 1 }}
exit={{ rotate: 90, opacity: 0 }}
transition={{ duration: 0.2 }}
>
<X size={24} />
</motion.div>
) : (
<motion.div
key="menu"
initial={{ rotate: 90, opacity: 0 }}
animate={{ rotate: 0, opacity: 1 }}
exit={{ rotate: -90, opacity: 0 }}
transition={{ duration: 0.2 }}
>
<Menu size={24} />
</motion.div>
)}
</AnimatePresence>
</motion.button>
</div>
{/* Mobile Navigation with smooth animations */}
<AnimatePresence>
{isOpen && (
<motion.div
initial={{ height: 0, opacity: 0 }}
animate={{ height: 'auto', opacity: 1 }}
exit={{ height: 0, opacity: 0 }}
transition={{ duration: 0.3, ease: "easeInOut" }}
className="md:hidden bg-white/5 backdrop-blur-2xl border-t border-white/20 overflow-hidden"
>
<motion.div
className="px-2 pt-2 pb-3 space-y-1"
variants={staggerContainer}
initial="hidden"
animate="visible"
>
{navItems.map((item) => (
<motion.div key={item.name} variants={staggerItem}>
<Link
to={item.path}
onClick={() => setIsOpen(false)}
className={`block px-3 py-2 rounded-md text-base font-medium transition-colors ${isActive(item.path)
? 'text-neon bg-neon/10'
: 'text-white hover:text-neon hover:bg-neon/5'
}`}
>
{item.name}
</Link>
</motion.div>
))}
<motion.div variants={staggerItem}>
<Link
to="/contact"
onClick={() => setIsOpen(false)}
className="block w-full text-center btn-neon mt-4"
>
Get Started
</Link>
</motion.div>
</motion.div>
</motion.div>
)}
</AnimatePresence>
</div>
</motion.nav>
</> </>
); );
}; };

56
src/components/ScrollReveal.tsx
View File

@ -1,29 +1,51 @@
import { ReactNode } from 'react'; import { ReactNode } from 'react';
import { motion, useInView } from 'framer-motion'; import { motion, useInView } from 'framer-motion';
import { useRef } from 'react'; import React, { useRef } from 'react';
import { scrollRevealVariants } from '@/utils/animations';
type ScrollRevealProps = { interface ScrollRevealProps {
children: ReactNode; children: React.ReactNode;
width?: 'fit-content' | '100%';
delay?: number; delay?: number;
duration?: number;
direction?: 'up' | 'down' | 'left' | 'right';
className?: string; className?: string;
}; }
const ScrollReveal = ({ children, delay = 0, className = '' }: ScrollRevealProps) => { const ScrollReveal: React.FC<ScrollRevealProps> = ({
children,
width = 'fit-content',
delay = 0,
duration = 0.5,
direction = 'up',
className = ""
}) => {
const ref = useRef(null); const ref = useRef(null);
const isInView = useInView(ref, { once: true, margin: "-100px" }); const isInView = useInView(ref, { once: true, margin: "-50px 0px" }); // Trigger slightly before element is fully in view
const getDirectionOffset = () => {
switch (direction) {
case 'up': return { y: 75 };
case 'down': return { y: -75 };
case 'left': return { x: 75 };
case 'right': return { x: -75 };
default: return { y: 75 };
}
};
return ( return (
<motion.div <div ref={ref} style={{ position: 'relative', width, overflow: 'hidden' }} className={className}>
ref={ref} <motion.div
initial="hidden" variants={{
animate={isInView ? "visible" : "hidden"} hidden: { opacity: 0, ...getDirectionOffset() },
variants={scrollRevealVariants} visible: { opacity: 1, x: 0, y: 0 },
transition={{ delay: delay / 1000 }} }}
className={className} initial="hidden"
> animate={isInView ? "visible" : "hidden"}
{children} transition={{ duration, delay, ease: "easeOut" }}
</motion.div> >
{children}
</motion.div>
</div>
); );
}; };

2
src/components/home/HeroSection.tsx
View File

@ -30,7 +30,7 @@ const HeroSection = () => {
animate={{ scale: 1.1, opacity: 1 }} animate={{ scale: 1.1, opacity: 1 }}
transition={{ duration: 1.2, ease: easing.elegant }} transition={{ duration: 1.2, ease: easing.elegant }}
loading="eager" loading="eager"
fetchpriority="high" fetchPriority="high"
/> />
</picture> </picture>

14
src/components/home/ProofSection.tsx
View File

@ -82,23 +82,13 @@ const ProofSection = () => {
variants={staggerItem} variants={staggerItem}
className="text-center" className="text-center"
> >
<motion.div <div className="font-heading font-bold text-4xl lg:text-5xl text-neon mb-2">
className="font-heading font-bold text-4xl lg:text-5xl text-neon mb-2"
initial={{ scale: 0, rotate: -180 }}
animate={isStatsInView ? { scale: 1, rotate: 0 } : { scale: 0, rotate: -180 }}
transition={{
delay: index * 0.1,
duration: 0.6,
type: "spring",
stiffness: 150
}}
>
<CountUpNumber <CountUpNumber
value={stat.value} value={stat.value}
duration={2000 + index * 200} duration={2000 + index * 200}
className="inline-block" className="inline-block"
/> />
</motion.div> </div>
<motion.div <motion.div
className="text-foreground-muted text-sm lg:text-base" className="text-foreground-muted text-sm lg:text-base"
initial={{ opacity: 0, y: 10 }} initial={{ opacity: 0, y: 10 }}

104
src/components/home/ServicesOverview.tsx
View File

@ -85,71 +85,77 @@ const ServicesOverview = () => {
const Icon = service.icon; const Icon = service.icon;
return ( return (
<motion.div key={service.title} variants={staggerItem}> <motion.div key={service.title} variants={staggerItem} className="h-full">
<motion.div <motion.div
className="card-dark p-8 h-full" className="card-dark p-8 h-full relative overflow-hidden group border border-white/5 hover:border-neon/50 transition-colors duration-500"
whileHover={{ whileHover={{
y: -8, y: -10,
boxShadow: "0 0 30px rgba(51, 102, 255, 0.4)" scale: 1.02,
boxShadow: "0 20px 40px -10px rgba(51, 102, 255, 0.3)"
}} }}
transition={{ duration: 0.3 }} transition={{ duration: 0.4, ease: "easeOut" }}
> >
{/* Subtle gradient background nice touch */}
<div className="absolute inset-0 bg-gradient-to-br from-neon/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
{/* Icon */} {/* Icon */}
<motion.div <motion.div
className="w-12 h-12 bg-neon/20 rounded-xl flex items-center justify-center mb-6" className="w-12 h-12 bg-neon/10 rounded-xl flex items-center justify-center mb-6 relative z-10 group-hover:bg-neon/20 transition-colors duration-300"
whileHover={{ rotate: 360, scale: 1.1 }} whileHover={{ rotate: 360, scale: 1.1 }}
transition={{ duration: 0.6 }} transition={{ duration: 0.6 }}
> >
<Icon className="w-6 h-6 text-neon" /> <Icon className="w-6 h-6 text-neon drop-shadow-[0_0_8px_rgba(51,102,255,0.6)]" />
</motion.div> </motion.div>
{/* Content */} {/* Content */}
<h3 className="font-heading font-bold text-xl text-foreground mb-4"> <div className="relative z-10">
{service.title} <h3 className="font-heading font-bold text-xl text-foreground mb-4 group-hover:text-neon transition-colors duration-300">
</h3> {service.title}
</h3>
<p className="text-foreground-muted mb-6 leading-relaxed"> <p className="text-foreground-muted mb-6 leading-relaxed">
{service.description} {service.description}
</p> </p>
{/* Features */} {/* Features */}
<ul className="space-y-2 mb-6"> <ul className="space-y-2 mb-6">
{service.features.map((feature) => ( {service.features.map((feature) => (
<li key={feature} className="flex items-center text-sm text-foreground-muted"> <li key={feature} className="flex items-center text-sm text-foreground-muted">
<motion.div <motion.div
className="w-1.5 h-1.5 bg-neon rounded-full mr-3" className="w-1.5 h-1.5 bg-neon rounded-full mr-3 shadow-[0_0_5px_rgba(51,102,255,0.8)]"
animate={{ animate={{
scale: [1, 1.3, 1], scale: [1, 1.5, 1],
opacity: [0.7, 1, 0.7] opacity: [0.7, 1, 0.7]
}} }}
transition={{ transition={{
duration: 2, duration: 2,
repeat: Infinity, repeat: Infinity,
delay: index * 0.2 delay: index * 0.2
}} }}
/> />
{feature} {feature}
</li> </li>
))} ))}
</ul> </ul>
{/* CTA */} {/* CTA */}
<Link <Link
to="/services" to="/services"
className="inline-flex items-center text-neon font-medium hover:text-neon/80 transition-colors group" className="inline-flex items-center text-neon font-medium group-hover:translate-x-2 transition-transform duration-300"
>
Learn more
<motion.svg
className="w-4 h-4 ml-1"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
animate={{ x: [0, 3, 0] }}
transition={{ duration: 1.5, repeat: Infinity, ease: "easeInOut" }}
> >
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5l7 7-7 7" /> Learn more
</motion.svg> <motion.svg
</Link> className="w-4 h-4 ml-1"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
animate={{ x: [0, 3, 0] }}
transition={{ duration: 1.5, repeat: Infinity, ease: "easeInOut" }}
>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5l7 7-7 7" />
</motion.svg>
</Link>
</div>
</motion.div> </motion.div>
</motion.div> </motion.div>
); );

54
src/components/home/TrustedBy.tsx Normal file
View File

@ -0,0 +1,54 @@
import { motion } from 'framer-motion';
const TrustedBy = () => {
// Placeholder logos - in a real app these would be SVGs
const companies = [
{ name: "TechCorp", color: "bg-blue-400" },
{ name: "SecureNet", color: "bg-indigo-400" },
{ name: "CloudSystems", color: "bg-cyan-400" },
{ name: "FutureData", color: "bg-sky-400" },
{ name: "CyberGuard", color: "bg-teal-400" },
{ name: "NetWorks", color: "bg-emerald-400" },
];
// duplicate for seamless loop
const logos = [...companies, ...companies, ...companies];
return (
<section className="py-10 border-b border-white/5 bg-background-deep relative overflow-hidden">
<p className="text-center text-sm font-medium text-foreground-muted mb-8 tracking-wider uppercase relative z-10 px-4">
Trusted by innovative businesses in Corpus Christi
</p>
<div className="relative flex overflow-hidden mask-linear-fade">
{/* Gradient Masks for smooth fade out at edges */}
<div className="absolute left-0 top-0 bottom-0 w-24 bg-gradient-to-r from-background-deep to-transparent z-10"></div>
<div className="absolute right-0 top-0 bottom-0 w-24 bg-gradient-to-l from-background-deep to-transparent z-10"></div>
<motion.div
className="flex space-x-16 items-center"
animate={{ x: ["0%", "-50%"] }}
transition={{
duration: 30,
repeat: Infinity,
ease: "linear",
repeatType: "loop"
}}
>
{logos.map((company, index) => (
<div key={index} className="flex items-center space-x-2 opacity-50 grayscale hover:grayscale-0 hover:opacity-100 transition-all duration-300">
{/* Fake Logo Icon */}
<div className={`w-8 h-8 rounded-lg ${company.color}/20 flex items-center justify-center`}>
<div className={`w-4 h-4 rounded-full ${company.color}`}></div>
</div>
{/* Fake Logo Text */}
<span className="text-xl font-bold text-white tracking-tight">{company.name}</span>
</div>
))}
</motion.div>
</div>
</section>
);
};
export default TrustedBy;

2
src/index.css
View File

@ -1,5 +1,3 @@
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@600;700;800&display=swap');
@tailwind base; @tailwind base;
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;

13
src/pages/About.tsx
View File

@ -4,10 +4,19 @@ import { Shield, Users, Zap, MapPin } from 'lucide-react';
import ScrollReveal from '@/components/ScrollReveal'; import ScrollReveal from '@/components/ScrollReveal';
import CountUpNumber from '@/components/CountUpNumber'; import CountUpNumber from '@/components/CountUpNumber';
import { useEffect, useRef } from 'react'; import { useEffect, useRef } from 'react';
import { useSEO } from '@/hooks/useSEO';
const About = () => { const About = () => {
const imageRef = useRef<HTMLImageElement>(null); const imageRef = useRef<HTMLImageElement>(null);
useSEO({
title: 'About Bay Area Affiliates | IT Experts Corpus Christi Since 2010',
description: 'Local IT expertise for the Coastal Bend since 2010. 150+ businesses served, 99.9% uptime. Security-first approach with clear communication. Meet the team.',
keywords: 'about Bay Area Affiliates, IT company Corpus Christi, managed services provider Texas, local IT support Coastal Bend',
canonical: 'https://bayarea-cc.com/about',
ogImage: 'https://bayarea-cc.com/og-image.png',
});
useEffect(() => { useEffect(() => {
const handleScroll = () => { const handleScroll = () => {
if (imageRef.current) { if (imageRef.current) {
@ -66,7 +75,7 @@ const About = () => {
<div className="min-h-screen"> <div className="min-h-screen">
<Navigation /> <Navigation />
<main> <main role="main">
{/* Hero section with image background */} {/* Hero section with image background */}
<section className="relative h-screen flex items-center justify-center overflow-hidden"> <section className="relative h-screen flex items-center justify-center overflow-hidden">
{/* Background image with parallax */} {/* Background image with parallax */}
@ -78,7 +87,7 @@ const About = () => {
className="w-full h-[110%] object-cover will-change-transform" className="w-full h-[110%] object-cover will-change-transform"
style={{ transform: 'translateY(0px) scale(1.1)' }} style={{ transform: 'translateY(0px) scale(1.1)' }}
loading="eager" loading="eager"
fetchpriority="high" fetchPriority="high"
/> />
</div> </div>

9
src/pages/Blog.tsx
View File

@ -81,7 +81,7 @@ const Blog = () => {
<div className="min-h-screen"> <div className="min-h-screen">
<Navigation /> <Navigation />
<main> <main role="main">
{/* Hero section with image background */} {/* Hero section with image background */}
<section className="relative h-screen flex items-center justify-center overflow-hidden"> <section className="relative h-screen flex items-center justify-center overflow-hidden">
{/* Background image with parallax */} {/* Background image with parallax */}
@ -93,7 +93,7 @@ const Blog = () => {
className="w-full h-[110%] object-cover will-change-transform" className="w-full h-[110%] object-cover will-change-transform"
style={{ transform: 'translateY(0px) scale(1.1)' }} style={{ transform: 'translateY(0px) scale(1.1)' }}
loading="eager" loading="eager"
fetchpriority="high" fetchPriority="high"
/> />
</div> </div>
@ -211,9 +211,8 @@ const Blog = () => {
{/* Scroll to Top Button */} {/* Scroll to Top Button */}
<button <button
onClick={scrollToTop} onClick={scrollToTop}
className={`fixed bottom-8 right-8 z-50 p-4 bg-neon text-neon-foreground rounded-full shadow-lg shadow-neon/50 transition-all duration-300 hover:scale-110 hover:shadow-neon ${ className={`fixed bottom-8 right-8 z-50 p-4 bg-neon text-neon-foreground rounded-full shadow-lg shadow-neon/50 transition-all duration-300 hover:scale-110 hover:shadow-neon ${showScrollTop ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-16 pointer-events-none'
showScrollTop ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-16 pointer-events-none' }`}
}`}
aria-label="Scroll to top" aria-label="Scroll to top"
> >
<ArrowUp className="w-6 h-6" /> <ArrowUp className="w-6 h-6" />

4
src/pages/BlogPost.tsx
View File

@ -112,7 +112,7 @@ const BlogPost = () => {
<div className="min-h-screen bg-background-deep"> <div className="min-h-screen bg-background-deep">
<Navigation /> <Navigation />
<main> <main role="main">
{/* Hero section with featured image */} {/* Hero section with featured image */}
<section className="relative h-[60vh] min-h-[400px] flex items-center justify-center overflow-hidden"> <section className="relative h-[60vh] min-h-[400px] flex items-center justify-center overflow-hidden">
{/* Background image */} {/* Background image */}
@ -122,7 +122,7 @@ const BlogPost = () => {
alt={post.title} alt={post.title}
className="w-full h-full object-cover" className="w-full h-full object-cover"
loading="eager" loading="eager"
fetchpriority="high" fetchPriority="high"
/> />
<div className="absolute inset-0 bg-gradient-to-t from-background-deep via-background-deep/60 to-transparent"></div> <div className="absolute inset-0 bg-gradient-to-t from-background-deep via-background-deep/60 to-transparent"></div>
</div> </div>

25
src/pages/Contact.tsx
View File

@ -5,8 +5,17 @@ import { Mail, Phone, MapPin, Clock, DollarSign, Headphones } from 'lucide-react
import ScrollReveal from '@/components/ScrollReveal'; import ScrollReveal from '@/components/ScrollReveal';
import { useToast } from '@/hooks/use-toast'; import { useToast } from '@/hooks/use-toast';
import { useEffect, useRef } from 'react'; import { useEffect, useRef } from 'react';
import { useSEO } from '@/hooks/useSEO';
const Contact = () => { const Contact = () => {
useSEO({
title: 'Contact Bay Area Affiliates | Free IT Consultation Corpus Christi',
description: 'Get in touch for a free IT consultation. 24-hour response, free assessment, no obligation. Serving Corpus Christi, Portland, Rockport & the Coastal Bend.',
keywords: 'contact IT support Corpus Christi, free IT consultation, Bay Area Affiliates phone, IT services quote Texas',
canonical: 'https://bayarea-cc.com/contact',
ogImage: 'https://bayarea-cc.com/og-image.png',
});
const { toast } = useToast(); const { toast } = useToast();
const imageRef = useRef<HTMLImageElement>(null); const imageRef = useRef<HTMLImageElement>(null);
const [formData, setFormData] = useState({ const [formData, setFormData] = useState({
@ -81,7 +90,7 @@ const Contact = () => {
<div className="min-h-screen"> <div className="min-h-screen">
<Navigation /> <Navigation />
<main> <main role="main">
{/* Hero section with image background */} {/* Hero section with image background */}
<section className="relative h-screen flex items-center justify-center overflow-hidden"> <section className="relative h-screen flex items-center justify-center overflow-hidden">
{/* Background image with parallax */} {/* Background image with parallax */}
@ -158,7 +167,7 @@ const Contact = () => {
required required
value={formData.name} value={formData.name}
onChange={handleChange} onChange={handleChange}
className="w-full px-4 py-3 bg-input border border-input-border rounded-lg focus:outline-none focus:ring-2 focus:ring-neon focus:border-transparent text-foreground" className="w-full px-4 py-3 bg-white/5 backdrop-blur-sm border border-white/10 rounded-lg focus:outline-none focus:ring-2 focus:ring-neon focus:border-neon focus:bg-white/10 focus:shadow-[0_0_15px_rgba(51,102,255,0.3)] transition-all duration-300 text-foreground placeholder-foreground-muted/50"
placeholder="Your full name" placeholder="Your full name"
/> />
</div> </div>
@ -174,7 +183,7 @@ const Contact = () => {
required required
value={formData.email} value={formData.email}
onChange={handleChange} onChange={handleChange}
className="w-full px-4 py-3 bg-input border border-input-border rounded-lg focus:outline-none focus:ring-2 focus:ring-neon focus:border-transparent text-foreground" className="w-full px-4 py-3 bg-white/5 backdrop-blur-sm border border-white/10 rounded-lg focus:outline-none focus:ring-2 focus:ring-neon focus:border-neon focus:bg-white/10 focus:shadow-[0_0_15px_rgba(51,102,255,0.3)] transition-all duration-300 text-foreground placeholder-foreground-muted/50"
placeholder="your@email.com" placeholder="your@email.com"
/> />
</div> </div>
@ -191,7 +200,7 @@ const Contact = () => {
name="company" name="company"
value={formData.company} value={formData.company}
onChange={handleChange} onChange={handleChange}
className="w-full px-4 py-3 bg-input border border-input-border rounded-lg focus:outline-none focus:ring-2 focus:ring-neon focus:border-transparent text-foreground" className="w-full px-4 py-3 bg-white/5 backdrop-blur-sm border border-white/10 rounded-lg focus:outline-none focus:ring-2 focus:ring-neon focus:border-neon focus:bg-white/10 focus:shadow-[0_0_15px_rgba(51,102,255,0.3)] transition-all duration-300 text-foreground placeholder-foreground-muted/50"
placeholder="Your company name" placeholder="Your company name"
/> />
</div> </div>
@ -206,7 +215,7 @@ const Contact = () => {
name="phone" name="phone"
value={formData.phone} value={formData.phone}
onChange={handleChange} onChange={handleChange}
className="w-full px-4 py-3 bg-input border border-input-border rounded-lg focus:outline-none focus:ring-2 focus:ring-neon focus:border-transparent text-foreground" className="w-full px-4 py-3 bg-white/5 backdrop-blur-sm border border-white/10 rounded-lg focus:outline-none focus:ring-2 focus:ring-neon focus:border-neon focus:bg-white/10 focus:shadow-[0_0_15px_rgba(51,102,255,0.3)] transition-all duration-300 text-foreground placeholder-foreground-muted/50"
placeholder="(361) 555-0123" placeholder="(361) 555-0123"
/> />
</div> </div>
@ -223,7 +232,7 @@ const Contact = () => {
rows={5} rows={5}
value={formData.message} value={formData.message}
onChange={handleChange} onChange={handleChange}
className="w-full px-4 py-3 bg-input border border-input-border rounded-lg focus:outline-none focus:ring-2 focus:ring-neon focus:border-transparent text-foreground resize-none" className="w-full px-4 py-3 bg-white/5 backdrop-blur-sm border border-white/10 rounded-lg focus:outline-none focus:ring-2 focus:ring-neon focus:border-neon focus:bg-white/10 focus:shadow-[0_0_15px_rgba(51,102,255,0.3)] transition-all duration-300 text-foreground placeholder-foreground-muted/50 resize-none"
placeholder="Tell us about your IT needs or challenges..." placeholder="Tell us about your IT needs or challenges..."
/> />
</div> </div>
@ -375,8 +384,8 @@ const Contact = () => {
{/* Service Area Map */} {/* Service Area Map */}
<section className="py-16 bg-background-deep"> <section className="py-16 bg-background-deep">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div className="w-full max-w-[95%] mx-auto px-4 sm:px-6 lg:px-8">
<ScrollReveal> <ScrollReveal width="100%">
<div className="text-center mb-8"> <div className="text-center mb-8">
<h2 className="font-heading font-bold text-3xl text-foreground mb-4"> <h2 className="font-heading font-bold text-3xl text-foreground mb-4">
Our Service Area Our Service Area

50
src/pages/DesktopHardware.tsx
View File

@ -9,27 +9,27 @@ import { Monitor, HardDrive, Cpu, CheckCircle, DollarSign, Truck, Shield, Award
const DesktopHardware = () => { const DesktopHardware = () => {
useEffect(() => { useEffect(() => {
document.title = 'Desktop Hardware Corpus Christi | Bay Area Affiliates'; document.title = 'Desktop Hardware Corpus Christi | Bay Area Affiliates';
const metaDescription = document.querySelector('meta[name="description"]'); const metaDescription = document.querySelector('meta[name="description"]');
if (metaDescription) { if (metaDescription) {
metaDescription.setAttribute('content', 'Quality new/refurbished desktops, fast local installation.'); metaDescription.setAttribute('content', 'Quality new/refurbished desktops, fast local installation.');
} }
const ogTitle = document.querySelector('meta[property="og:title"]'); const ogTitle = document.querySelector('meta[property="og:title"]');
if (ogTitle) { if (ogTitle) {
ogTitle.setAttribute('content', 'Refurbished Desktops Corpus Christi—Quality Business Hardware'); ogTitle.setAttribute('content', 'Refurbished Desktops Corpus Christi—Quality Business Hardware');
} }
const ogDescription = document.querySelector('meta[property="og:description"]'); const ogDescription = document.querySelector('meta[property="og:description"]');
if (ogDescription) { if (ogDescription) {
ogDescription.setAttribute('content', 'Quality new/refurbished desktops, fast local installation.'); ogDescription.setAttribute('content', 'Quality new/refurbished desktops, fast local installation.');
} }
const twitterTitle = document.querySelector('meta[name="twitter:title"]'); const twitterTitle = document.querySelector('meta[name="twitter:title"]');
if (twitterTitle) { if (twitterTitle) {
twitterTitle.setAttribute('content', 'Affordable PC Business Hardware Corpus Christi'); twitterTitle.setAttribute('content', 'Affordable PC Business Hardware Corpus Christi');
} }
const twitterDescription = document.querySelector('meta[name="twitter:description"]'); const twitterDescription = document.querySelector('meta[name="twitter:description"]');
if (twitterDescription) { if (twitterDescription) {
twitterDescription.setAttribute('content', 'Quality new/refurbished desktops, fast local installation.'); twitterDescription.setAttribute('content', 'Quality new/refurbished desktops, fast local installation.');
@ -39,7 +39,7 @@ const DesktopHardware = () => {
return ( return (
<div className="min-h-screen"> <div className="min-h-screen">
<Navigation /> <Navigation />
<main> <main role="main">
{/* Hero Section */} {/* Hero Section */}
<section className="bg-gradient-to-br from-gray-900 via-gray-800 to-gray-600 text-white py-20"> <section className="bg-gradient-to-br from-gray-900 via-gray-800 to-gray-600 text-white py-20">
<div className="container mx-auto px-4"> <div className="container mx-auto px-4">
@ -72,7 +72,7 @@ const DesktopHardware = () => {
<div className="container mx-auto px-4"> <div className="container mx-auto px-4">
<div className="max-w-4xl mx-auto"> <div className="max-w-4xl mx-auto">
<h2 className="text-3xl font-bold text-center mb-12">Professional Desktop Solutions</h2> <h2 className="text-3xl font-bold text-center mb-12">Professional Desktop Solutions</h2>
<div className="grid md:grid-cols-2 gap-8 mb-12"> <div className="grid md:grid-cols-2 gap-8 mb-12">
<Card> <Card>
<CardHeader> <CardHeader>
@ -93,7 +93,7 @@ const DesktopHardware = () => {
</ul> </ul>
</CardContent> </CardContent>
</Card> </Card>
<Card> <Card>
<CardHeader> <CardHeader>
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4"> <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4">
@ -113,7 +113,7 @@ const DesktopHardware = () => {
</ul> </ul>
</CardContent> </CardContent>
</Card> </Card>
<Card> <Card>
<CardHeader> <CardHeader>
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4"> <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4">
@ -133,7 +133,7 @@ const DesktopHardware = () => {
</div> </div>
</CardContent> </CardContent>
</Card> </Card>
<Card> <Card>
<CardHeader> <CardHeader>
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4"> <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4">
@ -163,7 +163,7 @@ const DesktopHardware = () => {
<div className="container mx-auto px-4"> <div className="container mx-auto px-4">
<div className="max-w-4xl mx-auto"> <div className="max-w-4xl mx-auto">
<h2 className="text-3xl font-bold text-center mb-12">Desktop Categories for Every Business Need</h2> <h2 className="text-3xl font-bold text-center mb-12">Desktop Categories for Every Business Need</h2>
<div className="grid md:grid-cols-3 gap-8 mb-12"> <div className="grid md:grid-cols-3 gap-8 mb-12">
<div className="bg-white p-6 rounded-lg shadow border-l-4 border-blue-500"> <div className="bg-white p-6 rounded-lg shadow border-l-4 border-blue-500">
<h3 className="font-bold text-lg mb-4">Essential Business</h3> <h3 className="font-bold text-lg mb-4">Essential Business</h3>
@ -180,7 +180,7 @@ const DesktopHardware = () => {
<div className="text-sm text-gray-500">Starting price</div> <div className="text-sm text-gray-500">Starting price</div>
</div> </div>
</div> </div>
<div className="bg-white p-6 rounded-lg shadow border-l-4 border-orange-500"> <div className="bg-white p-6 rounded-lg shadow border-l-4 border-orange-500">
<h3 className="font-bold text-lg mb-4">Professional Plus</h3> <h3 className="font-bold text-lg mb-4">Professional Plus</h3>
<p className="text-gray-600 mb-4">Enhanced performance for demanding business applications and multitasking.</p> <p className="text-gray-600 mb-4">Enhanced performance for demanding business applications and multitasking.</p>
@ -196,7 +196,7 @@ const DesktopHardware = () => {
<div className="text-sm text-gray-500">Starting price</div> <div className="text-sm text-gray-500">Starting price</div>
</div> </div>
</div> </div>
<div className="bg-white p-6 rounded-lg shadow border-l-4 border-purple-500"> <div className="bg-white p-6 rounded-lg shadow border-l-4 border-purple-500">
<h3 className="font-bold text-lg mb-4">Workstation Class</h3> <h3 className="font-bold text-lg mb-4">Workstation Class</h3>
<p className="text-gray-600 mb-4">High-performance systems for CAD, design, development, and intensive applications.</p> <p className="text-gray-600 mb-4">High-performance systems for CAD, design, development, and intensive applications.</p>
@ -213,7 +213,7 @@ const DesktopHardware = () => {
</div> </div>
</div> </div>
</div> </div>
<div className="bg-white p-8 rounded-lg shadow-lg"> <div className="bg-white p-8 rounded-lg shadow-lg">
<h3 className="text-2xl font-bold mb-6 text-center">Why Choose Refurbished Business Hardware?</h3> <h3 className="text-2xl font-bold mb-6 text-center">Why Choose Refurbished Business Hardware?</h3>
<div className="grid md:grid-cols-2 gap-8"> <div className="grid md:grid-cols-2 gap-8">
@ -270,7 +270,7 @@ const DesktopHardware = () => {
<div className="container mx-auto px-4"> <div className="container mx-auto px-4">
<div className="max-w-4xl mx-auto"> <div className="max-w-4xl mx-auto">
<h2 className="text-3xl font-bold text-center mb-12">Complete Installation & Setup Service</h2> <h2 className="text-3xl font-bold text-center mb-12">Complete Installation & Setup Service</h2>
<div className="grid md:grid-cols-4 gap-8"> <div className="grid md:grid-cols-4 gap-8">
<Card className="text-center"> <Card className="text-center">
<CardHeader> <CardHeader>
@ -283,7 +283,7 @@ const DesktopHardware = () => {
<p className="text-sm">Assess your needs and recommend the optimal hardware configuration for your business.</p> <p className="text-sm">Assess your needs and recommend the optimal hardware configuration for your business.</p>
</CardContent> </CardContent>
</Card> </Card>
<Card className="text-center"> <Card className="text-center">
<CardHeader> <CardHeader>
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4"> <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
@ -295,7 +295,7 @@ const DesktopHardware = () => {
<p className="text-sm">Install and configure software, security settings, and business applications.</p> <p className="text-sm">Install and configure software, security settings, and business applications.</p>
</CardContent> </CardContent>
</Card> </Card>
<Card className="text-center"> <Card className="text-center">
<CardHeader> <CardHeader>
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4"> <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
@ -307,7 +307,7 @@ const DesktopHardware = () => {
<p className="text-sm">On-site installation, network integration, and user account setup.</p> <p className="text-sm">On-site installation, network integration, and user account setup.</p>
</CardContent> </CardContent>
</Card> </Card>
<Card className="text-center"> <Card className="text-center">
<CardHeader> <CardHeader>
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4"> <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
@ -330,10 +330,10 @@ const DesktopHardware = () => {
<div className="max-w-4xl mx-auto text-center"> <div className="max-w-4xl mx-auto text-center">
<h2 className="text-3xl font-bold mb-8">Trusted Hardware Supplier for Coastal Bend SMBs</h2> <h2 className="text-3xl font-bold mb-8">Trusted Hardware Supplier for Coastal Bend SMBs</h2>
<p className="text-xl text-gray-600 mb-8"> <p className="text-xl text-gray-600 mb-8">
Bay Area Affiliates has supplied and serviced business computers throughout the Corpus Christi area since 1999. Bay Area Affiliates has supplied and serviced business computers throughout the Corpus Christi area since 1999.
We understand local business needs and provide personalized hardware solutions. We understand local business needs and provide personalized hardware solutions.
</p> </p>
<div className="grid md:grid-cols-3 gap-8 mb-12"> <div className="grid md:grid-cols-3 gap-8 mb-12">
<div className="text-center"> <div className="text-center">
<div className="text-4xl font-bold text-blue-600 mb-2">5,000+</div> <div className="text-4xl font-bold text-blue-600 mb-2">5,000+</div>
@ -348,11 +348,11 @@ const DesktopHardware = () => {
<div className="text-gray-600">Years Experience</div> <div className="text-gray-600">Years Experience</div>
</div> </div>
</div> </div>
<div className="bg-white p-8 rounded-lg shadow-lg"> <div className="bg-white p-8 rounded-lg shadow-lg">
<h3 className="text-2xl font-bold mb-4">Local Hardware Support Throughout the Coastal Bend</h3> <h3 className="text-2xl font-bold mb-4">Local Hardware Support Throughout the Coastal Bend</h3>
<p className="text-gray-700 mb-6"> <p className="text-gray-700 mb-6">
From single desktop replacements to complete office refreshes, we provide comprehensive From single desktop replacements to complete office refreshes, we provide comprehensive
hardware solutions with local pickup, delivery, and installation services. hardware solutions with local pickup, delivery, and installation services.
</p> </p>
<div className="flex flex-wrap justify-center gap-4"> <div className="flex flex-wrap justify-center gap-4">
@ -374,10 +374,10 @@ const DesktopHardware = () => {
<div className="max-w-4xl mx-auto text-center"> <div className="max-w-4xl mx-auto text-center">
<h2 className="text-3xl font-bold mb-6">Upgrade Your Business Hardware Today</h2> <h2 className="text-3xl font-bold mb-6">Upgrade Your Business Hardware Today</h2>
<p className="text-xl mb-8 text-gray-100"> <p className="text-xl mb-8 text-gray-100">
Get quality business desktops with professional installation and local support. Get quality business desktops with professional installation and local support.
Free consultation and custom quotes for Corpus Christi area businesses. Free consultation and custom quotes for Corpus Christi area businesses.
</p> </p>
<div className="flex flex-col sm:flex-row gap-4 justify-center mb-8"> <div className="flex flex-col sm:flex-row gap-4 justify-center mb-8">
<Button size="lg" className="bg-orange-600 hover:bg-orange-700"> <Button size="lg" className="bg-orange-600 hover:bg-orange-700">
<Award className="w-5 h-5 mr-2" /> <Award className="w-5 h-5 mr-2" />
@ -387,7 +387,7 @@ const DesktopHardware = () => {
Call (361) 765-8400 Call (361) 765-8400
</Button> </Button>
</div> </div>
<p className="text-gray-200"> <p className="text-gray-200">
Free consultation • Local delivery • Professional installation • 12-month warranty Free consultation • Local delivery • Professional installation • 12-month warranty
</p> </p>

40
src/pages/Index.tsx
View File

@ -6,18 +6,48 @@ import ProcessTimeline from '@/components/home/ProcessTimeline';
import ServicesOverview from '@/components/home/ServicesOverview'; import ServicesOverview from '@/components/home/ServicesOverview';
import ProofSection from '@/components/home/ProofSection'; import ProofSection from '@/components/home/ProofSection';
import CTASection from '@/components/home/CTASection'; import CTASection from '@/components/home/CTASection';
import TrustedBy from '@/components/home/TrustedBy';
import ScrollReveal from '@/components/ScrollReveal';
import { useSEO } from '@/hooks/useSEO';
const Index = () => { const Index = () => {
useSEO({
title: 'IT Support Corpus Christi ⚡ 24/7 Managed Services | Bay Area Affiliates',
description: 'Stop IT headaches! 25+ years experience, 2-hour response time, 24/7 monitoring. Managed IT services in Corpus Christi & Coastal Bend. Free assessment. Call (361) 765-8400',
keywords: 'managed IT services corpus christi, IT support coastal bend, 24/7 IT monitoring, business computer solutions, Windows 11 migration, VPN setup, network security corpus christi',
canonical: 'https://bayarea-cc.com/',
ogImage: 'https://bayarea-cc.com/og-image.png',
});
return ( return (
<div className="min-h-screen"> <div className="min-h-screen">
<Navigation /> <Navigation />
<main id="main-content" role="main"> <main id="main-content" role="main">
<HeroSection /> <HeroSection />
<ValuePillars />
<ProcessTimeline /> <ScrollReveal delay={0.2} width="100%">
<ServicesOverview /> <TrustedBy />
<ProofSection /> </ScrollReveal>
<CTASection />
<ScrollReveal width="100%">
<ValuePillars />
</ScrollReveal>
<ScrollReveal width="100%">
<ProcessTimeline />
</ScrollReveal>
<ScrollReveal width="100%">
<ServicesOverview />
</ScrollReveal>
<ScrollReveal width="100%">
<ProofSection />
</ScrollReveal>
<ScrollReveal width="100%">
<CTASection />
</ScrollReveal>
</main> </main>
<Footer /> <Footer />
</div> </div>

60
src/pages/NetworkAttachedStorage.tsx
View File

@ -9,27 +9,27 @@ import { HardDrive, Cloud, Shield, CheckCircle, Database, Server, Lock, Archive
const NetworkAttachedStorage = () => { const NetworkAttachedStorage = () => {
useEffect(() => { useEffect(() => {
document.title = 'NAS Setup Corpus Christi | Bay Area Affiliates'; document.title = 'NAS Setup Corpus Christi | Bay Area Affiliates';
const metaDescription = document.querySelector('meta[name="description"]'); const metaDescription = document.querySelector('meta[name="description"]');
if (metaDescription) { if (metaDescription) {
metaDescription.setAttribute('content', 'Secure, scalable backups for business data. Book install.'); metaDescription.setAttribute('content', 'Secure, scalable backups for business data. Book install.');
} }
const ogTitle = document.querySelector('meta[property="og:title"]'); const ogTitle = document.querySelector('meta[property="og:title"]');
if (ogTitle) { if (ogTitle) {
ogTitle.setAttribute('content', 'Network Attached Storage Setup Corpus Christi—Business Data Solutions'); ogTitle.setAttribute('content', 'Network Attached Storage Setup Corpus Christi—Business Data Solutions');
} }
const ogDescription = document.querySelector('meta[property="og:description"]'); const ogDescription = document.querySelector('meta[property="og:description"]');
if (ogDescription) { if (ogDescription) {
ogDescription.setAttribute('content', 'Secure, scalable backups for business data. Book install.'); ogDescription.setAttribute('content', 'Secure, scalable backups for business data. Book install.');
} }
const twitterTitle = document.querySelector('meta[name="twitter:title"]'); const twitterTitle = document.querySelector('meta[name="twitter:title"]');
if (twitterTitle) { if (twitterTitle) {
twitterTitle.setAttribute('content', 'NAS Backup Storage SMB Corpus Christi'); twitterTitle.setAttribute('content', 'NAS Backup Storage SMB Corpus Christi');
} }
const twitterDescription = document.querySelector('meta[name="twitter:description"]'); const twitterDescription = document.querySelector('meta[name="twitter:description"]');
if (twitterDescription) { if (twitterDescription) {
twitterDescription.setAttribute('content', 'Secure, scalable backups for business data. Book install.'); twitterDescription.setAttribute('content', 'Secure, scalable backups for business data. Book install.');
@ -39,7 +39,7 @@ const NetworkAttachedStorage = () => {
return ( return (
<div className="min-h-screen"> <div className="min-h-screen">
<Navigation /> <Navigation />
<main> <main role="main">
{/* Hero Section */} {/* Hero Section */}
<section className="bg-gradient-to-br from-blue-900 via-blue-800 to-blue-600 text-white py-20"> <section className="bg-gradient-to-br from-blue-900 via-blue-800 to-blue-600 text-white py-20">
<div className="container mx-auto px-4"> <div className="container mx-auto px-4">
@ -72,7 +72,7 @@ const NetworkAttachedStorage = () => {
<div className="container mx-auto px-4"> <div className="container mx-auto px-4">
<div className="max-w-4xl mx-auto"> <div className="max-w-4xl mx-auto">
<h2 className="text-3xl font-bold text-center mb-12">Protect Your Business Data with Professional NAS</h2> <h2 className="text-3xl font-bold text-center mb-12">Protect Your Business Data with Professional NAS</h2>
<div className="grid md:grid-cols-2 gap-8 mb-12"> <div className="grid md:grid-cols-2 gap-8 mb-12">
<Card> <Card>
<CardHeader> <CardHeader>
@ -93,7 +93,7 @@ const NetworkAttachedStorage = () => {
</ul> </ul>
</CardContent> </CardContent>
</Card> </Card>
<Card> <Card>
<CardHeader> <CardHeader>
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4"> <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4">
@ -113,7 +113,7 @@ const NetworkAttachedStorage = () => {
</ul> </ul>
</CardContent> </CardContent>
</Card> </Card>
<Card> <Card>
<CardHeader> <CardHeader>
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4"> <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4">
@ -133,7 +133,7 @@ const NetworkAttachedStorage = () => {
</ul> </ul>
</CardContent> </CardContent>
</Card> </Card>
<Card> <Card>
<CardHeader> <CardHeader>
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4"> <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4">
@ -163,7 +163,7 @@ const NetworkAttachedStorage = () => {
<div className="container mx-auto px-4"> <div className="container mx-auto px-4">
<div className="max-w-4xl mx-auto"> <div className="max-w-4xl mx-auto">
<h2 className="text-3xl font-bold text-center mb-12">NAS Solutions for Every Business Size</h2> <h2 className="text-3xl font-bold text-center mb-12">NAS Solutions for Every Business Size</h2>
<div className="grid md:grid-cols-3 gap-8 mb-12"> <div className="grid md:grid-cols-3 gap-8 mb-12">
<div className="bg-white p-6 rounded-lg shadow border-l-4 border-blue-500"> <div className="bg-white p-6 rounded-lg shadow border-l-4 border-blue-500">
<h3 className="font-bold text-lg mb-4">Essential NAS</h3> <h3 className="font-bold text-lg mb-4">Essential NAS</h3>
@ -181,7 +181,7 @@ const NetworkAttachedStorage = () => {
<div className="text-sm text-gray-500">Complete setup</div> <div className="text-sm text-gray-500">Complete setup</div>
</div> </div>
</div> </div>
<div className="bg-white p-6 rounded-lg shadow border-l-4 border-orange-500"> <div className="bg-white p-6 rounded-lg shadow border-l-4 border-orange-500">
<h3 className="font-bold text-lg mb-4">Professional NAS</h3> <h3 className="font-bold text-lg mb-4">Professional NAS</h3>
<p className="text-gray-600 mb-4">Advanced features for growing businesses with critical data protection needs.</p> <p className="text-gray-600 mb-4">Advanced features for growing businesses with critical data protection needs.</p>
@ -198,7 +198,7 @@ const NetworkAttachedStorage = () => {
<div className="text-sm text-gray-500">Complete setup</div> <div className="text-sm text-gray-500">Complete setup</div>
</div> </div>
</div> </div>
<div className="bg-white p-6 rounded-lg shadow border-l-4 border-purple-500"> <div className="bg-white p-6 rounded-lg shadow border-l-4 border-purple-500">
<h3 className="font-bold text-lg mb-4">Enterprise NAS</h3> <h3 className="font-bold text-lg mb-4">Enterprise NAS</h3>
<p className="text-gray-600 mb-4">High-performance storage for businesses with demanding data requirements.</p> <p className="text-gray-600 mb-4">High-performance storage for businesses with demanding data requirements.</p>
@ -216,7 +216,7 @@ const NetworkAttachedStorage = () => {
</div> </div>
</div> </div>
</div> </div>
<div className="bg-white p-8 rounded-lg shadow-lg"> <div className="bg-white p-8 rounded-lg shadow-lg">
<h3 className="text-2xl font-bold mb-6 text-center">Why Businesses Choose NAS Over Cloud Storage</h3> <h3 className="text-2xl font-bold mb-6 text-center">Why Businesses Choose NAS Over Cloud Storage</h3>
<div className="grid md:grid-cols-2 gap-8"> <div className="grid md:grid-cols-2 gap-8">
@ -263,7 +263,7 @@ const NetworkAttachedStorage = () => {
</ul> </ul>
</div> </div>
</div> </div>
<div className="mt-6 bg-blue-50 p-6 rounded-lg"> <div className="mt-6 bg-blue-50 p-6 rounded-lg">
<h4 className="font-semibold text-blue-700 mb-3">ROI Calculation Example</h4> <h4 className="font-semibold text-blue-700 mb-3">ROI Calculation Example</h4>
<div className="grid md:grid-cols-2 gap-6 text-sm"> <div className="grid md:grid-cols-2 gap-6 text-sm">
@ -288,7 +288,7 @@ const NetworkAttachedStorage = () => {
<div className="container mx-auto px-4"> <div className="container mx-auto px-4">
<div className="max-w-4xl mx-auto"> <div className="max-w-4xl mx-auto">
<h2 className="text-3xl font-bold text-center mb-12">Professional NAS Installation Process</h2> <h2 className="text-3xl font-bold text-center mb-12">Professional NAS Installation Process</h2>
<div className="grid md:grid-cols-4 gap-8"> <div className="grid md:grid-cols-4 gap-8">
<Card className="text-center"> <Card className="text-center">
<CardHeader> <CardHeader>
@ -301,7 +301,7 @@ const NetworkAttachedStorage = () => {
<p className="text-sm">Analyze your data storage needs, backup requirements, and growth projections.</p> <p className="text-sm">Analyze your data storage needs, backup requirements, and growth projections.</p>
</CardContent> </CardContent>
</Card> </Card>
<Card className="text-center"> <Card className="text-center">
<CardHeader> <CardHeader>
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4"> <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
@ -313,7 +313,7 @@ const NetworkAttachedStorage = () => {
<p className="text-sm">Set up NAS hardware, configure RAID, and install necessary software applications.</p> <p className="text-sm">Set up NAS hardware, configure RAID, and install necessary software applications.</p>
</CardContent> </CardContent>
</Card> </Card>
<Card className="text-center"> <Card className="text-center">
<CardHeader> <CardHeader>
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4"> <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
@ -325,7 +325,7 @@ const NetworkAttachedStorage = () => {
<p className="text-sm">Transfer existing data safely and set up automated backup schedules for all devices.</p> <p className="text-sm">Transfer existing data safely and set up automated backup schedules for all devices.</p>
</CardContent> </CardContent>
</Card> </Card>
<Card className="text-center"> <Card className="text-center">
<CardHeader> <CardHeader>
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4"> <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
@ -349,11 +349,11 @@ const NetworkAttachedStorage = () => {
<h2 className="text-3xl font-bold text-center mb-8">Emergency Data Recovery Services</h2> <h2 className="text-3xl font-bold text-center mb-8">Emergency Data Recovery Services</h2>
<div className="text-center mb-8"> <div className="text-center mb-8">
<p className="text-xl text-gray-600"> <p className="text-xl text-gray-600">
Already experienced data loss? We provide emergency recovery services while setting up Already experienced data loss? We provide emergency recovery services while setting up
your new NAS to prevent future disasters. your new NAS to prevent future disasters.
</p> </p>
</div> </div>
<div className="grid md:grid-cols-2 gap-8"> <div className="grid md:grid-cols-2 gap-8">
<div className="bg-white p-6 rounded-lg shadow"> <div className="bg-white p-6 rounded-lg shadow">
<h3 className="text-xl font-bold mb-4 text-red-600">What We Recover</h3> <h3 className="text-xl font-bold mb-4 text-red-600">What We Recover</h3>
@ -366,7 +366,7 @@ const NetworkAttachedStorage = () => {
<li>• Photos and multimedia files</li> <li>• Photos and multimedia files</li>
</ul> </ul>
</div> </div>
<div className="bg-white p-6 rounded-lg shadow"> <div className="bg-white p-6 rounded-lg shadow">
<h3 className="text-xl font-bold mb-4 text-red-600">Recovery Process</h3> <h3 className="text-xl font-bold mb-4 text-red-600">Recovery Process</h3>
<ul className="space-y-2 text-gray-700"> <ul className="space-y-2 text-gray-700">
@ -379,7 +379,7 @@ const NetworkAttachedStorage = () => {
</ul> </ul>
</div> </div>
</div> </div>
<div className="mt-8 text-center"> <div className="mt-8 text-center">
<Button size="lg" className="bg-red-600 hover:bg-red-700 text-white"> <Button size="lg" className="bg-red-600 hover:bg-red-700 text-white">
<Lock className="w-5 h-5 mr-2" /> <Lock className="w-5 h-5 mr-2" />
@ -396,10 +396,10 @@ const NetworkAttachedStorage = () => {
<div className="max-w-4xl mx-auto text-center"> <div className="max-w-4xl mx-auto text-center">
<h2 className="text-3xl font-bold mb-8">Data Storage Specialists Serving the Coastal Bend</h2> <h2 className="text-3xl font-bold mb-8">Data Storage Specialists Serving the Coastal Bend</h2>
<p className="text-xl text-gray-600 mb-8"> <p className="text-xl text-gray-600 mb-8">
Bay Area Affiliates has protected business data for Corpus Christi companies since 1999. Bay Area Affiliates has protected business data for Corpus Christi companies since 1999.
We understand the critical importance of data security and business continuity. We understand the critical importance of data security and business continuity.
</p> </p>
<div className="grid md:grid-cols-3 gap-8 mb-12"> <div className="grid md:grid-cols-3 gap-8 mb-12">
<div className="text-center"> <div className="text-center">
<div className="text-4xl font-bold text-blue-600 mb-2">250+</div> <div className="text-4xl font-bold text-blue-600 mb-2">250+</div>
@ -414,11 +414,11 @@ const NetworkAttachedStorage = () => {
<div className="text-gray-600">Data Loss with Our NAS</div> <div className="text-gray-600">Data Loss with Our NAS</div>
</div> </div>
</div> </div>
<div className="bg-blue-50 p-8 rounded-lg shadow-lg"> <div className="bg-blue-50 p-8 rounded-lg shadow-lg">
<h3 className="text-2xl font-bold mb-4">Protecting Business Data Throughout the Coastal Bend</h3> <h3 className="text-2xl font-bold mb-4">Protecting Business Data Throughout the Coastal Bend</h3>
<p className="text-gray-700 mb-6"> <p className="text-gray-700 mb-6">
From small professional practices to growing enterprises, we provide comprehensive From small professional practices to growing enterprises, we provide comprehensive
data storage and backup solutions with local support and maintenance. data storage and backup solutions with local support and maintenance.
</p> </p>
<div className="flex flex-wrap justify-center gap-4"> <div className="flex flex-wrap justify-center gap-4">
@ -440,10 +440,10 @@ const NetworkAttachedStorage = () => {
<div className="max-w-4xl mx-auto text-center"> <div className="max-w-4xl mx-auto text-center">
<h2 className="text-3xl font-bold mb-6">Don't Risk Your Business Data</h2> <h2 className="text-3xl font-bold mb-6">Don't Risk Your Business Data</h2>
<p className="text-xl mb-8 text-blue-100"> <p className="text-xl mb-8 text-blue-100">
Get professional NAS installation and data protection from Corpus Christi's trusted IT experts. Get professional NAS installation and data protection from Corpus Christi's trusted IT experts.
Protect your business before disaster strikes. Protect your business before disaster strikes.
</p> </p>
<div className="flex flex-col sm:flex-row gap-4 justify-center mb-8"> <div className="flex flex-col sm:flex-row gap-4 justify-center mb-8">
<Button size="lg" className="bg-orange-600 hover:bg-orange-700"> <Button size="lg" className="bg-orange-600 hover:bg-orange-700">
<Database className="w-5 h-5 mr-2" /> <Database className="w-5 h-5 mr-2" />
@ -453,7 +453,7 @@ const NetworkAttachedStorage = () => {
Call (361) 765-8400 Call (361) 765-8400
</Button> </Button>
</div> </div>
<p className="text-blue-200"> <p className="text-blue-200">
Free consultation • Professional installation • 24/7 monitoring • Local support Free consultation • Professional installation • 24/7 monitoring • Local support
</p> </p>

58
src/pages/NetworkInfrastructure.tsx
View File

@ -9,27 +9,27 @@ import { Network, Router, Shield, CheckCircle, Users, Monitor, Lock, Search } fr
const NetworkInfrastructure = () => { const NetworkInfrastructure = () => {
useEffect(() => { useEffect(() => {
document.title = 'Network Support Corpus Christi | Bay Area Affiliates'; document.title = 'Network Support Corpus Christi | Bay Area Affiliates';
const metaDescription = document.querySelector('meta[name="description"]'); const metaDescription = document.querySelector('meta[name="description"]');
if (metaDescription) { if (metaDescription) {
metaDescription.setAttribute('content', 'Reliable SMB network solutions—secure, scalable, supported.'); metaDescription.setAttribute('content', 'Reliable SMB network solutions—secure, scalable, supported.');
} }
const ogTitle = document.querySelector('meta[property="og:title"]'); const ogTitle = document.querySelector('meta[property="og:title"]');
if (ogTitle) { if (ogTitle) {
ogTitle.setAttribute('content', 'Network Infrastructure Support Corpus Christi—SMB IT Solutions'); ogTitle.setAttribute('content', 'Network Infrastructure Support Corpus Christi—SMB IT Solutions');
} }
const ogDescription = document.querySelector('meta[property="og:description"]'); const ogDescription = document.querySelector('meta[property="og:description"]');
if (ogDescription) { if (ogDescription) {
ogDescription.setAttribute('content', 'Reliable SMB network solutions—secure, scalable, supported.'); ogDescription.setAttribute('content', 'Reliable SMB network solutions—secure, scalable, supported.');
} }
const twitterTitle = document.querySelector('meta[name="twitter:title"]'); const twitterTitle = document.querySelector('meta[name="twitter:title"]');
if (twitterTitle) { if (twitterTitle) {
twitterTitle.setAttribute('content', 'Router Setup IT Audit Corpus Christi'); twitterTitle.setAttribute('content', 'Router Setup IT Audit Corpus Christi');
} }
const twitterDescription = document.querySelector('meta[name="twitter:description"]'); const twitterDescription = document.querySelector('meta[name="twitter:description"]');
if (twitterDescription) { if (twitterDescription) {
twitterDescription.setAttribute('content', 'Reliable SMB network solutions—secure, scalable, supported.'); twitterDescription.setAttribute('content', 'Reliable SMB network solutions—secure, scalable, supported.');
@ -39,7 +39,7 @@ const NetworkInfrastructure = () => {
return ( return (
<div className="min-h-screen"> <div className="min-h-screen">
<Navigation /> <Navigation />
<main> <main role="main">
{/* Hero Section */} {/* Hero Section */}
<section className="bg-gradient-to-br from-teal-900 via-teal-800 to-teal-600 text-white py-20"> <section className="bg-gradient-to-br from-teal-900 via-teal-800 to-teal-600 text-white py-20">
<div className="container mx-auto px-4"> <div className="container mx-auto px-4">
@ -72,7 +72,7 @@ const NetworkInfrastructure = () => {
<div className="container mx-auto px-4"> <div className="container mx-auto px-4">
<div className="max-w-4xl mx-auto"> <div className="max-w-4xl mx-auto">
<h2 className="text-3xl font-bold text-center mb-12">Comprehensive Network Solutions</h2> <h2 className="text-3xl font-bold text-center mb-12">Comprehensive Network Solutions</h2>
<div className="grid md:grid-cols-2 gap-8 mb-12"> <div className="grid md:grid-cols-2 gap-8 mb-12">
<Card> <Card>
<CardHeader> <CardHeader>
@ -93,7 +93,7 @@ const NetworkInfrastructure = () => {
</ul> </ul>
</CardContent> </CardContent>
</Card> </Card>
<Card> <Card>
<CardHeader> <CardHeader>
<div className="w-16 h-16 bg-teal-100 rounded-full flex items-center justify-center mb-4"> <div className="w-16 h-16 bg-teal-100 rounded-full flex items-center justify-center mb-4">
@ -113,7 +113,7 @@ const NetworkInfrastructure = () => {
</ul> </ul>
</CardContent> </CardContent>
</Card> </Card>
<Card> <Card>
<CardHeader> <CardHeader>
<div className="w-16 h-16 bg-teal-100 rounded-full flex items-center justify-center mb-4"> <div className="w-16 h-16 bg-teal-100 rounded-full flex items-center justify-center mb-4">
@ -133,7 +133,7 @@ const NetworkInfrastructure = () => {
</ul> </ul>
</CardContent> </CardContent>
</Card> </Card>
<Card> <Card>
<CardHeader> <CardHeader>
<div className="w-16 h-16 bg-teal-100 rounded-full flex items-center justify-center mb-4"> <div className="w-16 h-16 bg-teal-100 rounded-full flex items-center justify-center mb-4">
@ -163,7 +163,7 @@ const NetworkInfrastructure = () => {
<div className="container mx-auto px-4"> <div className="container mx-auto px-4">
<div className="max-w-4xl mx-auto"> <div className="max-w-4xl mx-auto">
<h2 className="text-3xl font-bold text-center mb-12">Scalable Network Solutions for Growing SMBs</h2> <h2 className="text-3xl font-bold text-center mb-12">Scalable Network Solutions for Growing SMBs</h2>
<div className="grid md:grid-cols-3 gap-8 mb-12"> <div className="grid md:grid-cols-3 gap-8 mb-12">
<div className="bg-white p-6 rounded-lg shadow border-l-4 border-teal-500"> <div className="bg-white p-6 rounded-lg shadow border-l-4 border-teal-500">
<h3 className="font-bold text-lg mb-4">Starter Network</h3> <h3 className="font-bold text-lg mb-4">Starter Network</h3>
@ -181,7 +181,7 @@ const NetworkInfrastructure = () => {
<div className="text-sm text-gray-500">Complete setup</div> <div className="text-sm text-gray-500">Complete setup</div>
</div> </div>
</div> </div>
<div className="bg-white p-6 rounded-lg shadow border-l-4 border-orange-500"> <div className="bg-white p-6 rounded-lg shadow border-l-4 border-orange-500">
<h3 className="font-bold text-lg mb-4">Professional Network</h3> <h3 className="font-bold text-lg mb-4">Professional Network</h3>
<p className="text-gray-600 mb-4">Advanced infrastructure for growing businesses with 15-50 employees.</p> <p className="text-gray-600 mb-4">Advanced infrastructure for growing businesses with 15-50 employees.</p>
@ -198,7 +198,7 @@ const NetworkInfrastructure = () => {
<div className="text-sm text-gray-500">Complete setup</div> <div className="text-sm text-gray-500">Complete setup</div>
</div> </div>
</div> </div>
<div className="bg-white p-6 rounded-lg shadow border-l-4 border-purple-500"> <div className="bg-white p-6 rounded-lg shadow border-l-4 border-purple-500">
<h3 className="font-bold text-lg mb-4">Enterprise Network</h3> <h3 className="font-bold text-lg mb-4">Enterprise Network</h3>
<p className="text-gray-600 mb-4">Comprehensive infrastructure for larger organizations with 50+ employees.</p> <p className="text-gray-600 mb-4">Comprehensive infrastructure for larger organizations with 50+ employees.</p>
@ -216,7 +216,7 @@ const NetworkInfrastructure = () => {
</div> </div>
</div> </div>
</div> </div>
<div className="bg-white p-8 rounded-lg shadow-lg"> <div className="bg-white p-8 rounded-lg shadow-lg">
<h3 className="text-2xl font-bold mb-6 text-center">Network Performance Benefits</h3> <h3 className="text-2xl font-bold mb-6 text-center">Network Performance Benefits</h3>
<div className="grid md:grid-cols-2 gap-8"> <div className="grid md:grid-cols-2 gap-8">
@ -273,7 +273,7 @@ const NetworkInfrastructure = () => {
<div className="container mx-auto px-4"> <div className="container mx-auto px-4">
<div className="max-w-4xl mx-auto"> <div className="max-w-4xl mx-auto">
<h2 className="text-3xl font-bold text-center mb-12">Professional Network Implementation</h2> <h2 className="text-3xl font-bold text-center mb-12">Professional Network Implementation</h2>
<div className="grid md:grid-cols-4 gap-8"> <div className="grid md:grid-cols-4 gap-8">
<Card className="text-center"> <Card className="text-center">
<CardHeader> <CardHeader>
@ -286,7 +286,7 @@ const NetworkInfrastructure = () => {
<p className="text-sm">Comprehensive evaluation of current infrastructure, requirements, and growth plans.</p> <p className="text-sm">Comprehensive evaluation of current infrastructure, requirements, and growth plans.</p>
</CardContent> </CardContent>
</Card> </Card>
<Card className="text-center"> <Card className="text-center">
<CardHeader> <CardHeader>
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4"> <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
@ -298,7 +298,7 @@ const NetworkInfrastructure = () => {
<p className="text-sm">Custom network design with equipment selection and detailed implementation plan.</p> <p className="text-sm">Custom network design with equipment selection and detailed implementation plan.</p>
</CardContent> </CardContent>
</Card> </Card>
<Card className="text-center"> <Card className="text-center">
<CardHeader> <CardHeader>
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4"> <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
@ -310,7 +310,7 @@ const NetworkInfrastructure = () => {
<p className="text-sm">Professional installation, configuration, and testing with minimal business disruption.</p> <p className="text-sm">Professional installation, configuration, and testing with minimal business disruption.</p>
</CardContent> </CardContent>
</Card> </Card>
<Card className="text-center"> <Card className="text-center">
<CardHeader> <CardHeader>
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4"> <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
@ -332,7 +332,7 @@ const NetworkInfrastructure = () => {
<div className="container mx-auto px-4"> <div className="container mx-auto px-4">
<div className="max-w-4xl mx-auto"> <div className="max-w-4xl mx-auto">
<h2 className="text-3xl font-bold text-center mb-12">Network Problems We Solve</h2> <h2 className="text-3xl font-bold text-center mb-12">Network Problems We Solve</h2>
<div className="grid md:grid-cols-2 gap-8"> <div className="grid md:grid-cols-2 gap-8">
<div className="bg-white p-6 rounded-lg shadow"> <div className="bg-white p-6 rounded-lg shadow">
<h3 className="text-xl font-bold mb-4 text-red-600">Performance Issues</h3> <h3 className="text-xl font-bold mb-4 text-red-600">Performance Issues</h3>
@ -345,7 +345,7 @@ const NetworkInfrastructure = () => {
<li>• Printers frequently going offline</li> <li>• Printers frequently going offline</li>
</ul> </ul>
</div> </div>
<div className="bg-white p-6 rounded-lg shadow"> <div className="bg-white p-6 rounded-lg shadow">
<h3 className="text-xl font-bold mb-4 text-red-600">Security Concerns</h3> <h3 className="text-xl font-bold mb-4 text-red-600">Security Concerns</h3>
<ul className="space-y-3 text-gray-700"> <ul className="space-y-3 text-gray-700">
@ -358,11 +358,11 @@ const NetworkInfrastructure = () => {
</ul> </ul>
</div> </div>
</div> </div>
<div className="mt-8 bg-white p-6 rounded-lg shadow text-center"> <div className="mt-8 bg-white p-6 rounded-lg shadow text-center">
<h3 className="text-xl font-bold mb-4 text-teal-600">Emergency Network Support</h3> <h3 className="text-xl font-bold mb-4 text-teal-600">Emergency Network Support</h3>
<p className="text-gray-700 mb-4"> <p className="text-gray-700 mb-4">
When your network goes down, every minute counts. Our emergency support team provides When your network goes down, every minute counts. Our emergency support team provides
same-day response for critical network issues affecting your business operations. same-day response for critical network issues affecting your business operations.
</p> </p>
<Button className="bg-red-600 hover:bg-red-700 text-white"> <Button className="bg-red-600 hover:bg-red-700 text-white">
@ -380,10 +380,10 @@ const NetworkInfrastructure = () => {
<div className="max-w-4xl mx-auto text-center"> <div className="max-w-4xl mx-auto text-center">
<h2 className="text-3xl font-bold mb-8">Trusted Network Experts in the Coastal Bend</h2> <h2 className="text-3xl font-bold mb-8">Trusted Network Experts in the Coastal Bend</h2>
<p className="text-xl text-gray-600 mb-8"> <p className="text-xl text-gray-600 mb-8">
Bay Area Affiliates has designed and maintained business networks throughout the Corpus Christi area since 1999. Bay Area Affiliates has designed and maintained business networks throughout the Corpus Christi area since 1999.
We understand the unique connectivity challenges of coastal businesses. We understand the unique connectivity challenges of coastal businesses.
</p> </p>
<div className="grid md:grid-cols-3 gap-8 mb-12"> <div className="grid md:grid-cols-3 gap-8 mb-12">
<div className="text-center"> <div className="text-center">
<div className="text-4xl font-bold text-teal-600 mb-2">300+</div> <div className="text-4xl font-bold text-teal-600 mb-2">300+</div>
@ -398,11 +398,11 @@ const NetworkInfrastructure = () => {
<div className="text-gray-600">Average Response Time</div> <div className="text-gray-600">Average Response Time</div>
</div> </div>
</div> </div>
<div className="bg-teal-50 p-8 rounded-lg shadow-lg"> <div className="bg-teal-50 p-8 rounded-lg shadow-lg">
<h3 className="text-2xl font-bold mb-4">Network Support Across the Coastal Bend</h3> <h3 className="text-2xl font-bold mb-4">Network Support Across the Coastal Bend</h3>
<p className="text-gray-700 mb-6"> <p className="text-gray-700 mb-6">
From small office networks to multi-location enterprises, we provide comprehensive From small office networks to multi-location enterprises, we provide comprehensive
network infrastructure solutions with 24/7 monitoring and local technical support. network infrastructure solutions with 24/7 monitoring and local technical support.
</p> </p>
<div className="flex flex-wrap justify-center gap-4"> <div className="flex flex-wrap justify-center gap-4">
@ -424,10 +424,10 @@ const NetworkInfrastructure = () => {
<div className="max-w-4xl mx-auto text-center"> <div className="max-w-4xl mx-auto text-center">
<h2 className="text-3xl font-bold mb-6">Secure Your Business Network Infrastructure</h2> <h2 className="text-3xl font-bold mb-6">Secure Your Business Network Infrastructure</h2>
<p className="text-xl mb-8 text-teal-100"> <p className="text-xl mb-8 text-teal-100">
Get a comprehensive network assessment and custom infrastructure solution from Corpus Christi's Get a comprehensive network assessment and custom infrastructure solution from Corpus Christi's
trusted IT experts. Free consultation for SMBs. trusted IT experts. Free consultation for SMBs.
</p> </p>
<div className="flex flex-col sm:flex-row gap-4 justify-center mb-8"> <div className="flex flex-col sm:flex-row gap-4 justify-center mb-8">
<Button size="lg" className="bg-orange-600 hover:bg-orange-700"> <Button size="lg" className="bg-orange-600 hover:bg-orange-700">
<Router className="w-5 h-5 mr-2" /> <Router className="w-5 h-5 mr-2" />
@ -437,7 +437,7 @@ const NetworkInfrastructure = () => {
Call (361) 765-8400 Call (361) 765-8400
</Button> </Button>
</div> </div>
<p className="text-teal-200"> <p className="text-teal-200">
Free network assessment • Same-day emergency support • Local experts • 24/7 monitoring Free network assessment • Same-day emergency support • Local experts • 24/7 monitoring
</p> </p>

48
src/pages/PerformanceUpgrades.tsx
View File

@ -9,27 +9,27 @@ import { Zap, HardDrive, TrendingUp, CheckCircle, DollarSign, Clock, Gauge, BarC
const PerformanceUpgrades = () => { const PerformanceUpgrades = () => {
useEffect(() => { useEffect(() => {
document.title = 'SSD Upgrade Corpus Christi | Bay Area Affiliates'; document.title = 'SSD Upgrade Corpus Christi | Bay Area Affiliates';
const metaDescription = document.querySelector('meta[name="description"]'); const metaDescription = document.querySelector('meta[name="description"]');
if (metaDescription) { if (metaDescription) {
metaDescription.setAttribute('content', 'Boost device speed and reliability. Contact for upgrade today.'); metaDescription.setAttribute('content', 'Boost device speed and reliability. Contact for upgrade today.');
} }
const ogTitle = document.querySelector('meta[property="og:title"]'); const ogTitle = document.querySelector('meta[property="og:title"]');
if (ogTitle) { if (ogTitle) {
ogTitle.setAttribute('content', 'SSD Upgrade Corpus Christi—Boost SMB Performance'); ogTitle.setAttribute('content', 'SSD Upgrade Corpus Christi—Boost SMB Performance');
} }
const ogDescription = document.querySelector('meta[property="og:description"]'); const ogDescription = document.querySelector('meta[property="og:description"]');
if (ogDescription) { if (ogDescription) {
ogDescription.setAttribute('content', 'Boost device speed and reliability. Contact for upgrade today.'); ogDescription.setAttribute('content', 'Boost device speed and reliability. Contact for upgrade today.');
} }
const twitterTitle = document.querySelector('meta[name="twitter:title"]'); const twitterTitle = document.querySelector('meta[name="twitter:title"]');
if (twitterTitle) { if (twitterTitle) {
twitterTitle.setAttribute('content', 'Desktop Speed & Laptop Optimization Corpus Christi'); twitterTitle.setAttribute('content', 'Desktop Speed & Laptop Optimization Corpus Christi');
} }
const twitterDescription = document.querySelector('meta[name="twitter:description"]'); const twitterDescription = document.querySelector('meta[name="twitter:description"]');
if (twitterDescription) { if (twitterDescription) {
twitterDescription.setAttribute('content', 'Boost device speed and reliability. Contact for upgrade today.'); twitterDescription.setAttribute('content', 'Boost device speed and reliability. Contact for upgrade today.');
@ -39,7 +39,7 @@ const PerformanceUpgrades = () => {
return ( return (
<div className="min-h-screen"> <div className="min-h-screen">
<Navigation /> <Navigation />
<main> <main role="main">
{/* Hero Section */} {/* Hero Section */}
<section className="bg-gradient-to-br from-purple-900 via-purple-800 to-purple-600 text-white py-20"> <section className="bg-gradient-to-br from-purple-900 via-purple-800 to-purple-600 text-white py-20">
<div className="container mx-auto px-4"> <div className="container mx-auto px-4">
@ -72,7 +72,7 @@ const PerformanceUpgrades = () => {
<div className="container mx-auto px-4"> <div className="container mx-auto px-4">
<div className="max-w-4xl mx-auto"> <div className="max-w-4xl mx-auto">
<h2 className="text-3xl font-bold text-center mb-12">Transform Your Business Performance</h2> <h2 className="text-3xl font-bold text-center mb-12">Transform Your Business Performance</h2>
<div className="grid md:grid-cols-2 gap-8 mb-12"> <div className="grid md:grid-cols-2 gap-8 mb-12">
<Card> <Card>
<CardHeader> <CardHeader>
@ -95,7 +95,7 @@ const PerformanceUpgrades = () => {
</div> </div>
</CardContent> </CardContent>
</Card> </Card>
<Card> <Card>
<CardHeader> <CardHeader>
<div className="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-4"> <div className="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-4">
@ -113,7 +113,7 @@ const PerformanceUpgrades = () => {
</ul> </ul>
</CardContent> </CardContent>
</Card> </Card>
<Card> <Card>
<CardHeader> <CardHeader>
<div className="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-4"> <div className="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-4">
@ -132,7 +132,7 @@ const PerformanceUpgrades = () => {
</div> </div>
</CardContent> </CardContent>
</Card> </Card>
<Card> <Card>
<CardHeader> <CardHeader>
<div className="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-4"> <div className="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-4">
@ -160,7 +160,7 @@ const PerformanceUpgrades = () => {
<div className="container mx-auto px-4"> <div className="container mx-auto px-4">
<div className="max-w-4xl mx-auto"> <div className="max-w-4xl mx-auto">
<h2 className="text-3xl font-bold text-center mb-12">Professional Upgrade Process</h2> <h2 className="text-3xl font-bold text-center mb-12">Professional Upgrade Process</h2>
<div className="grid md:grid-cols-4 gap-8 mb-12"> <div className="grid md:grid-cols-4 gap-8 mb-12">
<Card className="text-center"> <Card className="text-center">
<CardHeader> <CardHeader>
@ -173,7 +173,7 @@ const PerformanceUpgrades = () => {
<p className="text-sm">Comprehensive performance testing to identify bottlenecks and optimal upgrade path.</p> <p className="text-sm">Comprehensive performance testing to identify bottlenecks and optimal upgrade path.</p>
</CardContent> </CardContent>
</Card> </Card>
<Card className="text-center"> <Card className="text-center">
<CardHeader> <CardHeader>
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4"> <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
@ -185,7 +185,7 @@ const PerformanceUpgrades = () => {
<p className="text-sm">Right-sized SSD recommendation based on your usage patterns and budget.</p> <p className="text-sm">Right-sized SSD recommendation based on your usage patterns and budget.</p>
</CardContent> </CardContent>
</Card> </Card>
<Card className="text-center"> <Card className="text-center">
<CardHeader> <CardHeader>
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4"> <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
@ -197,7 +197,7 @@ const PerformanceUpgrades = () => {
<p className="text-sm">Seamless transfer of all files, programs, and settings to the new SSD.</p> <p className="text-sm">Seamless transfer of all files, programs, and settings to the new SSD.</p>
</CardContent> </CardContent>
</Card> </Card>
<Card className="text-center"> <Card className="text-center">
<CardHeader> <CardHeader>
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4"> <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
@ -210,7 +210,7 @@ const PerformanceUpgrades = () => {
</CardContent> </CardContent>
</Card> </Card>
</div> </div>
<div className="bg-white p-8 rounded-lg shadow-lg"> <div className="bg-white p-8 rounded-lg shadow-lg">
<h3 className="text-2xl font-bold mb-6 text-center">Performance Upgrade Options</h3> <h3 className="text-2xl font-bold mb-6 text-center">Performance Upgrade Options</h3>
<div className="grid md:grid-cols-3 gap-6"> <div className="grid md:grid-cols-3 gap-6">
@ -227,7 +227,7 @@ const PerformanceUpgrades = () => {
<div className="text-sm text-gray-600">per device</div> <div className="text-sm text-gray-600">per device</div>
</div> </div>
</div> </div>
<div className="border-2 border-purple-500 p-6 rounded-lg bg-purple-50"> <div className="border-2 border-purple-500 p-6 rounded-lg bg-purple-50">
<h4 className="font-bold text-lg mb-4 text-purple-600">Professional</h4> <h4 className="font-bold text-lg mb-4 text-purple-600">Professional</h4>
<ul className="space-y-2 text-sm mb-4"> <ul className="space-y-2 text-sm mb-4">
@ -242,7 +242,7 @@ const PerformanceUpgrades = () => {
<div className="text-sm text-gray-600">per device</div> <div className="text-sm text-gray-600">per device</div>
</div> </div>
</div> </div>
<div className="border-2 border-gray-200 p-6 rounded-lg"> <div className="border-2 border-gray-200 p-6 rounded-lg">
<h4 className="font-bold text-lg mb-4 text-purple-600">Enterprise</h4> <h4 className="font-bold text-lg mb-4 text-purple-600">Enterprise</h4>
<ul className="space-y-2 text-sm mb-4"> <ul className="space-y-2 text-sm mb-4">
@ -270,10 +270,10 @@ const PerformanceUpgrades = () => {
<div className="max-w-4xl mx-auto text-center"> <div className="max-w-4xl mx-auto text-center">
<h2 className="text-3xl font-bold mb-8">Trusted Performance Experts in the Coastal Bend</h2> <h2 className="text-3xl font-bold mb-8">Trusted Performance Experts in the Coastal Bend</h2>
<p className="text-xl text-gray-600 mb-8"> <p className="text-xl text-gray-600 mb-8">
Bay Area Affiliates has optimized thousands of computers for Corpus Christi businesses since 1999. Bay Area Affiliates has optimized thousands of computers for Corpus Christi businesses since 1999.
We know which upgrades deliver the best ROI for your specific needs. We know which upgrades deliver the best ROI for your specific needs.
</p> </p>
<div className="grid md:grid-cols-3 gap-8 mb-12"> <div className="grid md:grid-cols-3 gap-8 mb-12">
<div className="text-center"> <div className="text-center">
<div className="text-4xl font-bold text-purple-600 mb-2">2,500+</div> <div className="text-4xl font-bold text-purple-600 mb-2">2,500+</div>
@ -288,11 +288,11 @@ const PerformanceUpgrades = () => {
<div className="text-gray-600">Average Turnaround</div> <div className="text-gray-600">Average Turnaround</div>
</div> </div>
</div> </div>
<div className="bg-purple-50 p-8 rounded-lg shadow-lg"> <div className="bg-purple-50 p-8 rounded-lg shadow-lg">
<h3 className="text-2xl font-bold mb-4">Serving All Coastal Bend SMBs</h3> <h3 className="text-2xl font-bold mb-4">Serving All Coastal Bend SMBs</h3>
<p className="text-gray-700 mb-6"> <p className="text-gray-700 mb-6">
From single-device upgrades to fleet optimization, we provide on-site and in-shop services From single-device upgrades to fleet optimization, we provide on-site and in-shop services
throughout the Corpus Christi area. throughout the Corpus Christi area.
</p> </p>
<div className="flex flex-wrap justify-center gap-4"> <div className="flex flex-wrap justify-center gap-4">
@ -314,10 +314,10 @@ const PerformanceUpgrades = () => {
<div className="max-w-4xl mx-auto text-center"> <div className="max-w-4xl mx-auto text-center">
<h2 className="text-3xl font-bold mb-6">Stop Waiting for Slow Computers</h2> <h2 className="text-3xl font-bold mb-6">Stop Waiting for Slow Computers</h2>
<p className="text-xl mb-8 text-purple-100"> <p className="text-xl mb-8 text-purple-100">
Transform your business productivity with professional SSD upgrades. Same-day service available Transform your business productivity with professional SSD upgrades. Same-day service available
for Corpus Christi area businesses. for Corpus Christi area businesses.
</p> </p>
<div className="flex flex-col sm:flex-row gap-4 justify-center mb-8"> <div className="flex flex-col sm:flex-row gap-4 justify-center mb-8">
<Button size="lg" className="bg-orange-600 hover:bg-orange-700"> <Button size="lg" className="bg-orange-600 hover:bg-orange-700">
<Clock className="w-5 h-5 mr-2" /> <Clock className="w-5 h-5 mr-2" />
@ -327,7 +327,7 @@ const PerformanceUpgrades = () => {
Call (361) 765-8400 Call (361) 765-8400
</Button> </Button>
</div> </div>
<p className="text-purple-200"> <p className="text-purple-200">
Free speed analysis • Same-day service • Local pickup & delivery Free speed analysis • Same-day service • Local pickup & delivery
</p> </p>

50
src/pages/PrinterScannerInstallation.tsx
View File

@ -9,27 +9,27 @@ import { Printer, Scan, Network, CheckCircle, Wrench, Clock, Settings, Users } f
const PrinterScannerInstallation = () => { const PrinterScannerInstallation = () => {
useEffect(() => { useEffect(() => {
document.title = 'Printer Install Corpus Christi | Bay Area Affiliates'; document.title = 'Printer Install Corpus Christi | Bay Area Affiliates';
const metaDescription = document.querySelector('meta[name="description"]'); const metaDescription = document.querySelector('meta[name="description"]');
if (metaDescription) { if (metaDescription) {
metaDescription.setAttribute('content', 'Hassle-free device setup—local experts, same-day support.'); metaDescription.setAttribute('content', 'Hassle-free device setup—local experts, same-day support.');
} }
const ogTitle = document.querySelector('meta[property="og:title"]'); const ogTitle = document.querySelector('meta[property="og:title"]');
if (ogTitle) { if (ogTitle) {
ogTitle.setAttribute('content', 'Printer Installation Corpus Christi—Same-Day Setup'); ogTitle.setAttribute('content', 'Printer Installation Corpus Christi—Same-Day Setup');
} }
const ogDescription = document.querySelector('meta[property="og:description"]'); const ogDescription = document.querySelector('meta[property="og:description"]');
if (ogDescription) { if (ogDescription) {
ogDescription.setAttribute('content', 'Hassle-free device setup—local experts, same-day support.'); ogDescription.setAttribute('content', 'Hassle-free device setup—local experts, same-day support.');
} }
const twitterTitle = document.querySelector('meta[name="twitter:title"]'); const twitterTitle = document.querySelector('meta[name="twitter:title"]');
if (twitterTitle) { if (twitterTitle) {
twitterTitle.setAttribute('content', 'Scanner Setup & Office Device Support Corpus Christi'); twitterTitle.setAttribute('content', 'Scanner Setup & Office Device Support Corpus Christi');
} }
const twitterDescription = document.querySelector('meta[name="twitter:description"]'); const twitterDescription = document.querySelector('meta[name="twitter:description"]');
if (twitterDescription) { if (twitterDescription) {
twitterDescription.setAttribute('content', 'Hassle-free device setup—local experts, same-day support.'); twitterDescription.setAttribute('content', 'Hassle-free device setup—local experts, same-day support.');
@ -39,7 +39,7 @@ const PrinterScannerInstallation = () => {
return ( return (
<div className="min-h-screen"> <div className="min-h-screen">
<Navigation /> <Navigation />
<main> <main role="main">
{/* Hero Section */} {/* Hero Section */}
<section className="bg-gradient-to-br from-indigo-900 via-indigo-800 to-indigo-600 text-white py-20"> <section className="bg-gradient-to-br from-indigo-900 via-indigo-800 to-indigo-600 text-white py-20">
<div className="container mx-auto px-4"> <div className="container mx-auto px-4">
@ -72,7 +72,7 @@ const PrinterScannerInstallation = () => {
<div className="container mx-auto px-4"> <div className="container mx-auto px-4">
<div className="max-w-4xl mx-auto"> <div className="max-w-4xl mx-auto">
<h2 className="text-3xl font-bold text-center mb-12">End Office Device Frustrations</h2> <h2 className="text-3xl font-bold text-center mb-12">End Office Device Frustrations</h2>
<div className="grid md:grid-cols-2 gap-8 mb-12"> <div className="grid md:grid-cols-2 gap-8 mb-12">
<Card> <Card>
<CardHeader> <CardHeader>
@ -92,7 +92,7 @@ const PrinterScannerInstallation = () => {
</ul> </ul>
</CardContent> </CardContent>
</Card> </Card>
<Card> <Card>
<CardHeader> <CardHeader>
<div className="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mb-4"> <div className="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mb-4">
@ -111,7 +111,7 @@ const PrinterScannerInstallation = () => {
</ul> </ul>
</CardContent> </CardContent>
</Card> </Card>
<Card> <Card>
<CardHeader> <CardHeader>
<div className="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mb-4"> <div className="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mb-4">
@ -130,7 +130,7 @@ const PrinterScannerInstallation = () => {
</ul> </ul>
</CardContent> </CardContent>
</Card> </Card>
<Card> <Card>
<CardHeader> <CardHeader>
<div className="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mb-4"> <div className="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mb-4">
@ -159,7 +159,7 @@ const PrinterScannerInstallation = () => {
<div className="container mx-auto px-4"> <div className="container mx-auto px-4">
<div className="max-w-4xl mx-auto"> <div className="max-w-4xl mx-auto">
<h2 className="text-3xl font-bold text-center mb-12">Professional Installation Process</h2> <h2 className="text-3xl font-bold text-center mb-12">Professional Installation Process</h2>
<div className="grid md:grid-cols-4 gap-8 mb-12"> <div className="grid md:grid-cols-4 gap-8 mb-12">
<Card className="text-center"> <Card className="text-center">
<CardHeader> <CardHeader>
@ -172,7 +172,7 @@ const PrinterScannerInstallation = () => {
<p className="text-sm">Evaluate your office layout, network setup, and device requirements.</p> <p className="text-sm">Evaluate your office layout, network setup, and device requirements.</p>
</CardContent> </CardContent>
</Card> </Card>
<Card className="text-center"> <Card className="text-center">
<CardHeader> <CardHeader>
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4"> <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
@ -184,7 +184,7 @@ const PrinterScannerInstallation = () => {
<p className="text-sm">Install drivers, configure network settings, and optimize device performance.</p> <p className="text-sm">Install drivers, configure network settings, and optimize device performance.</p>
</CardContent> </CardContent>
</Card> </Card>
<Card className="text-center"> <Card className="text-center">
<CardHeader> <CardHeader>
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4"> <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
@ -196,7 +196,7 @@ const PrinterScannerInstallation = () => {
<p className="text-sm">Configure access for all users and train staff on device operation.</p> <p className="text-sm">Configure access for all users and train staff on device operation.</p>
</CardContent> </CardContent>
</Card> </Card>
<Card className="text-center"> <Card className="text-center">
<CardHeader> <CardHeader>
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4"> <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
@ -209,7 +209,7 @@ const PrinterScannerInstallation = () => {
</CardContent> </CardContent>
</Card> </Card>
</div> </div>
<div className="bg-white p-8 rounded-lg shadow-lg"> <div className="bg-white p-8 rounded-lg shadow-lg">
<h3 className="text-2xl font-bold mb-6 text-center">Common Device Issues We Solve</h3> <h3 className="text-2xl font-bold mb-6 text-center">Common Device Issues We Solve</h3>
<div className="grid md:grid-cols-2 gap-8"> <div className="grid md:grid-cols-2 gap-8">
@ -274,7 +274,7 @@ const PrinterScannerInstallation = () => {
<div className="container mx-auto px-4"> <div className="container mx-auto px-4">
<div className="max-w-4xl mx-auto"> <div className="max-w-4xl mx-auto">
<h2 className="text-3xl font-bold text-center mb-12">We Support All Major Brands</h2> <h2 className="text-3xl font-bold text-center mb-12">We Support All Major Brands</h2>
<div className="grid md:grid-cols-3 gap-8 mb-12"> <div className="grid md:grid-cols-3 gap-8 mb-12">
<div className="bg-gray-50 p-6 rounded-lg text-center"> <div className="bg-gray-50 p-6 rounded-lg text-center">
<h3 className="font-bold text-lg mb-4">Printer Brands</h3> <h3 className="font-bold text-lg mb-4">Printer Brands</h3>
@ -285,7 +285,7 @@ const PrinterScannerInstallation = () => {
<div>Kyocera • Sharp • Konica</div> <div>Kyocera • Sharp • Konica</div>
</div> </div>
</div> </div>
<div className="bg-gray-50 p-6 rounded-lg text-center"> <div className="bg-gray-50 p-6 rounded-lg text-center">
<h3 className="font-bold text-lg mb-4">Scanner Types</h3> <h3 className="font-bold text-lg mb-4">Scanner Types</h3>
<div className="space-y-2 text-gray-700"> <div className="space-y-2 text-gray-700">
@ -296,7 +296,7 @@ const PrinterScannerInstallation = () => {
<div>Photo Scanners</div> <div>Photo Scanners</div>
</div> </div>
</div> </div>
<div className="bg-gray-50 p-6 rounded-lg text-center"> <div className="bg-gray-50 p-6 rounded-lg text-center">
<h3 className="font-bold text-lg mb-4">Connection Types</h3> <h3 className="font-bold text-lg mb-4">Connection Types</h3>
<div className="space-y-2 text-gray-700"> <div className="space-y-2 text-gray-700">
@ -318,10 +318,10 @@ const PrinterScannerInstallation = () => {
<div className="max-w-4xl mx-auto text-center"> <div className="max-w-4xl mx-auto text-center">
<h2 className="text-3xl font-bold mb-8">Corpus Christi's Office Device Specialists</h2> <h2 className="text-3xl font-bold mb-8">Corpus Christi's Office Device Specialists</h2>
<p className="text-xl text-gray-600 mb-8"> <p className="text-xl text-gray-600 mb-8">
Bay Area Affiliates has been solving office equipment challenges for Coastal Bend businesses since 1999. Bay Area Affiliates has been solving office equipment challenges for Coastal Bend businesses since 1999.
We know the unique needs of local SMBs and provide same-day service. We know the unique needs of local SMBs and provide same-day service.
</p> </p>
<div className="grid md:grid-cols-3 gap-8 mb-12"> <div className="grid md:grid-cols-3 gap-8 mb-12">
<div className="text-center"> <div className="text-center">
<div className="text-4xl font-bold text-indigo-600 mb-2">1,200+</div> <div className="text-4xl font-bold text-indigo-600 mb-2">1,200+</div>
@ -336,11 +336,11 @@ const PrinterScannerInstallation = () => {
<div className="text-gray-600">Technical Support</div> <div className="text-gray-600">Technical Support</div>
</div> </div>
</div> </div>
<div className="bg-white p-8 rounded-lg shadow-lg"> <div className="bg-white p-8 rounded-lg shadow-lg">
<h3 className="text-2xl font-bold mb-4">Serving the Entire Coastal Bend</h3> <h3 className="text-2xl font-bold mb-4">Serving the Entire Coastal Bend</h3>
<p className="text-gray-700 mb-6"> <p className="text-gray-700 mb-6">
On-site installation and support for businesses throughout the Corpus Christi area. On-site installation and support for businesses throughout the Corpus Christi area.
We bring the expertise to your location. We bring the expertise to your location.
</p> </p>
<div className="flex flex-wrap justify-center gap-4"> <div className="flex flex-wrap justify-center gap-4">
@ -362,10 +362,10 @@ const PrinterScannerInstallation = () => {
<div className="max-w-4xl mx-auto text-center"> <div className="max-w-4xl mx-auto text-center">
<h2 className="text-3xl font-bold mb-6">Stop Wrestling with Office Devices</h2> <h2 className="text-3xl font-bold mb-6">Stop Wrestling with Office Devices</h2>
<p className="text-xl mb-8 text-indigo-100"> <p className="text-xl mb-8 text-indigo-100">
Get professional printer and scanner installation from Corpus Christi's trusted IT experts. Get professional printer and scanner installation from Corpus Christi's trusted IT experts.
Same-day service available for urgent business needs. Same-day service available for urgent business needs.
</p> </p>
<div className="flex flex-col sm:flex-row gap-4 justify-center mb-8"> <div className="flex flex-col sm:flex-row gap-4 justify-center mb-8">
<Button size="lg" className="bg-orange-600 hover:bg-orange-700"> <Button size="lg" className="bg-orange-600 hover:bg-orange-700">
<Clock className="w-5 h-5 mr-2" /> <Clock className="w-5 h-5 mr-2" />
@ -375,7 +375,7 @@ const PrinterScannerInstallation = () => {
Call (361) 765-8400 Call (361) 765-8400
</Button> </Button>
</div> </div>
<p className="text-indigo-200"> <p className="text-indigo-200">
Free consultation • Same-day service • Local on-site support Free consultation • Same-day service • Local on-site support
</p> </p>

13
src/pages/Services.tsx
View File

@ -3,11 +3,20 @@ import Footer from '@/components/Footer';
import { Monitor, Wifi, Cloud, Shield, Database, Settings, CheckCircle } from 'lucide-react'; import { Monitor, Wifi, Cloud, Shield, Database, Settings, CheckCircle } from 'lucide-react';
import ScrollReveal from '@/components/ScrollReveal'; import ScrollReveal from '@/components/ScrollReveal';
import { useLayoutEffect, useRef } from 'react'; import { useLayoutEffect, useRef } from 'react';
import { useSEO } from '@/hooks/useSEO';
const Services = () => { const Services = () => {
const pageRef = useRef<HTMLDivElement>(null); const pageRef = useRef<HTMLDivElement>(null);
const heroImageRef = useRef<HTMLImageElement>(null); const heroImageRef = useRef<HTMLImageElement>(null);
useSEO({
title: 'IT Services Corpus Christi | Managed IT, Network, Cloud | Bay Area Affiliates',
description: 'Complete IT solutions for Corpus Christi businesses. Hardware support, network infrastructure, cloud services, secure remote access, backup & Microsoft 365. Free consultation.',
keywords: 'IT services Corpus Christi, managed IT Coastal Bend, network infrastructure Texas, cloud services, VPN setup, Microsoft 365',
canonical: 'https://bayarea-cc.com/services',
ogImage: 'https://bayarea-cc.com/og-image.png',
});
useLayoutEffect(() => { useLayoutEffect(() => {
// Dynamically import GSAP only when needed to reduce initial bundle size // Dynamically import GSAP only when needed to reduce initial bundle size
let ctx: any; let ctx: any;
@ -163,7 +172,7 @@ const Services = () => {
<div ref={pageRef} className="min-h-screen"> <div ref={pageRef} className="min-h-screen">
<Navigation /> <Navigation />
<main> <main role="main">
{/* Hero section with image background */} {/* Hero section with image background */}
<section className="relative h-screen flex items-center justify-center overflow-hidden"> <section className="relative h-screen flex items-center justify-center overflow-hidden">
{/* Background image with parallax */} {/* Background image with parallax */}
@ -174,7 +183,7 @@ const Services = () => {
alt="Corpus Christi IT services data center with enterprise networking equipment and server infrastructure" alt="Corpus Christi IT services data center with enterprise networking equipment and server infrastructure"
className="w-full h-[110%] object-cover will-change-transform" className="w-full h-[110%] object-cover will-change-transform"
loading="eager" loading="eager"
fetchpriority="high" fetchPriority="high"
/> />
</div> </div>

50
src/pages/VpnSetup.tsx
View File

@ -9,27 +9,27 @@ import { Shield, Lock, Zap, CheckCircle, Users, Globe, Server, Smartphone } from
const VpnSetup = () => { const VpnSetup = () => {
useEffect(() => { useEffect(() => {
document.title = 'VPN Setup Corpus Christi | Business WireGuard Experts'; document.title = 'VPN Setup Corpus Christi | Business WireGuard Experts';
const metaDescription = document.querySelector('meta[name="description"]'); const metaDescription = document.querySelector('meta[name="description"]');
if (metaDescription) { if (metaDescription) {
metaDescription.setAttribute('content', 'Secure remote access for SMBs—Corpus Christi\'s WireGuard VPN experts. Get fast, reliable VPN setup today.'); metaDescription.setAttribute('content', 'Secure remote access for SMBs—Corpus Christi\'s WireGuard VPN experts. Get fast, reliable VPN setup today.');
} }
const ogTitle = document.querySelector('meta[property="og:title"]'); const ogTitle = document.querySelector('meta[property="og:title"]');
if (ogTitle) { if (ogTitle) {
ogTitle.setAttribute('content', 'Corpus Christi WireGuard VPN Setup—Fast, Secure for SMBs'); ogTitle.setAttribute('content', 'Corpus Christi WireGuard VPN Setup—Fast, Secure for SMBs');
} }
const ogDescription = document.querySelector('meta[property="og:description"]'); const ogDescription = document.querySelector('meta[property="og:description"]');
if (ogDescription) { if (ogDescription) {
ogDescription.setAttribute('content', 'Secure remote access for SMBs—Corpus Christi\'s WireGuard VPN experts. Get fast, reliable VPN setup today.'); ogDescription.setAttribute('content', 'Secure remote access for SMBs—Corpus Christi\'s WireGuard VPN experts. Get fast, reliable VPN setup today.');
} }
const twitterTitle = document.querySelector('meta[name="twitter:title"]'); const twitterTitle = document.querySelector('meta[name="twitter:title"]');
if (twitterTitle) { if (twitterTitle) {
twitterTitle.setAttribute('content', 'WireGuard VPN—Remote Work Corpus Christi'); twitterTitle.setAttribute('content', 'WireGuard VPN—Remote Work Corpus Christi');
} }
const twitterDescription = document.querySelector('meta[name="twitter:description"]'); const twitterDescription = document.querySelector('meta[name="twitter:description"]');
if (twitterDescription) { if (twitterDescription) {
twitterDescription.setAttribute('content', 'Secure remote access for SMBs—Corpus Christi\'s WireGuard VPN experts. Get fast, reliable VPN setup today.'); twitterDescription.setAttribute('content', 'Secure remote access for SMBs—Corpus Christi\'s WireGuard VPN experts. Get fast, reliable VPN setup today.');
@ -39,7 +39,7 @@ const VpnSetup = () => {
return ( return (
<div className="min-h-screen"> <div className="min-h-screen">
<Navigation /> <Navigation />
<main> <main role="main">
{/* Hero Section */} {/* Hero Section */}
<section className="bg-gradient-to-br from-green-900 via-green-800 to-green-600 text-white py-20"> <section className="bg-gradient-to-br from-green-900 via-green-800 to-green-600 text-white py-20">
<div className="container mx-auto px-4"> <div className="container mx-auto px-4">
@ -72,7 +72,7 @@ const VpnSetup = () => {
<div className="container mx-auto px-4"> <div className="container mx-auto px-4">
<div className="max-w-4xl mx-auto"> <div className="max-w-4xl mx-auto">
<h2 className="text-3xl font-bold text-center mb-12">Why WireGuard for Corpus SMBs</h2> <h2 className="text-3xl font-bold text-center mb-12">Why WireGuard for Corpus SMBs</h2>
<div className="grid md:grid-cols-2 gap-8 mb-12"> <div className="grid md:grid-cols-2 gap-8 mb-12">
<Card> <Card>
<CardHeader> <CardHeader>
@ -85,7 +85,7 @@ const VpnSetup = () => {
<p className="text-gray-600">WireGuard outperforms traditional VPN protocols with minimal latency and maximum throughput for your remote teams.</p> <p className="text-gray-600">WireGuard outperforms traditional VPN protocols with minimal latency and maximum throughput for your remote teams.</p>
</CardContent> </CardContent>
</Card> </Card>
<Card> <Card>
<CardHeader> <CardHeader>
<div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-4"> <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-4">
@ -97,7 +97,7 @@ const VpnSetup = () => {
<p className="text-gray-600">Advanced cryptography and smaller codebase mean fewer vulnerabilities and stronger protection for your business data.</p> <p className="text-gray-600">Advanced cryptography and smaller codebase mean fewer vulnerabilities and stronger protection for your business data.</p>
</CardContent> </CardContent>
</Card> </Card>
<Card> <Card>
<CardHeader> <CardHeader>
<div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-4"> <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-4">
@ -109,7 +109,7 @@ const VpnSetup = () => {
<p className="text-gray-600">Easy configuration and maintenance with automatic key exchange and seamless roaming between networks.</p> <p className="text-gray-600">Easy configuration and maintenance with automatic key exchange and seamless roaming between networks.</p>
</CardContent> </CardContent>
</Card> </Card>
<Card> <Card>
<CardHeader> <CardHeader>
<div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-4"> <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-4">
@ -131,7 +131,7 @@ const VpnSetup = () => {
<div className="container mx-auto px-4"> <div className="container mx-auto px-4">
<div className="max-w-4xl mx-auto"> <div className="max-w-4xl mx-auto">
<h2 className="text-3xl font-bold text-center mb-12">Benefits of Secure Remote Work</h2> <h2 className="text-3xl font-bold text-center mb-12">Benefits of Secure Remote Work</h2>
<div className="grid md:grid-cols-3 gap-8 mb-12"> <div className="grid md:grid-cols-3 gap-8 mb-12">
<div className="text-center"> <div className="text-center">
<div className="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4"> <div className="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
@ -140,7 +140,7 @@ const VpnSetup = () => {
<h3 className="text-xl font-bold mb-2">Work From Anywhere</h3> <h3 className="text-xl font-bold mb-2">Work From Anywhere</h3>
<p className="text-gray-600">Access your office network securely from home, client sites, or anywhere in the world.</p> <p className="text-gray-600">Access your office network securely from home, client sites, or anywhere in the world.</p>
</div> </div>
<div className="text-center"> <div className="text-center">
<div className="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4"> <div className="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
<Server className="w-10 h-10 text-blue-600" /> <Server className="w-10 h-10 text-blue-600" />
@ -148,7 +148,7 @@ const VpnSetup = () => {
<h3 className="text-xl font-bold mb-2">Secure File Access</h3> <h3 className="text-xl font-bold mb-2">Secure File Access</h3>
<p className="text-gray-600">Connect to your business servers, printers, and shared drives as if you're in the office.</p> <p className="text-gray-600">Connect to your business servers, printers, and shared drives as if you're in the office.</p>
</div> </div>
<div className="text-center"> <div className="text-center">
<div className="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4"> <div className="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
<Smartphone className="w-10 h-10 text-blue-600" /> <Smartphone className="w-10 h-10 text-blue-600" />
@ -157,7 +157,7 @@ const VpnSetup = () => {
<p className="text-gray-600">One VPN solution for all your devices—laptops, phones, tablets, and desktops.</p> <p className="text-gray-600">One VPN solution for all your devices—laptops, phones, tablets, and desktops.</p>
</div> </div>
</div> </div>
<div className="bg-white p-8 rounded-lg shadow-lg"> <div className="bg-white p-8 rounded-lg shadow-lg">
<h3 className="text-2xl font-bold mb-6 text-center">WireGuard vs Traditional VPN</h3> <h3 className="text-2xl font-bold mb-6 text-center">WireGuard vs Traditional VPN</h3>
<div className="overflow-x-auto"> <div className="overflow-x-auto">
@ -208,7 +208,7 @@ const VpnSetup = () => {
<div className="container mx-auto px-4"> <div className="container mx-auto px-4">
<div className="max-w-4xl mx-auto"> <div className="max-w-4xl mx-auto">
<h2 className="text-3xl font-bold text-center mb-12">Fast, Reliable VPN Deployment</h2> <h2 className="text-3xl font-bold text-center mb-12">Fast, Reliable VPN Deployment</h2>
<div className="grid md:grid-cols-4 gap-8"> <div className="grid md:grid-cols-4 gap-8">
<Card className="text-center"> <Card className="text-center">
<CardHeader> <CardHeader>
@ -221,7 +221,7 @@ const VpnSetup = () => {
<p className="text-sm">Evaluate your network infrastructure and remote access needs.</p> <p className="text-sm">Evaluate your network infrastructure and remote access needs.</p>
</CardContent> </CardContent>
</Card> </Card>
<Card className="text-center"> <Card className="text-center">
<CardHeader> <CardHeader>
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4"> <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
@ -233,7 +233,7 @@ const VpnSetup = () => {
<p className="text-sm">Install and configure WireGuard server on your network.</p> <p className="text-sm">Install and configure WireGuard server on your network.</p>
</CardContent> </CardContent>
</Card> </Card>
<Card className="text-center"> <Card className="text-center">
<CardHeader> <CardHeader>
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4"> <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
@ -245,7 +245,7 @@ const VpnSetup = () => {
<p className="text-sm">Set up VPN clients on all employee devices with secure keys.</p> <p className="text-sm">Set up VPN clients on all employee devices with secure keys.</p>
</CardContent> </CardContent>
</Card> </Card>
<Card className="text-center"> <Card className="text-center">
<CardHeader> <CardHeader>
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4"> <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
@ -268,10 +268,10 @@ const VpnSetup = () => {
<div className="max-w-4xl mx-auto text-center"> <div className="max-w-4xl mx-auto text-center">
<h2 className="text-3xl font-bold mb-8">Trusted VPN Experts Serving the Coastal Bend</h2> <h2 className="text-3xl font-bold mb-8">Trusted VPN Experts Serving the Coastal Bend</h2>
<p className="text-xl text-gray-600 mb-8"> <p className="text-xl text-gray-600 mb-8">
Bay Area Affiliates specializes in secure network solutions for local businesses. Bay Area Affiliates specializes in secure network solutions for local businesses.
We've helped hundreds of Corpus Christi SMBs implement reliable remote access. We've helped hundreds of Corpus Christi SMBs implement reliable remote access.
</p> </p>
<div className="grid md:grid-cols-2 gap-8 mb-12"> <div className="grid md:grid-cols-2 gap-8 mb-12">
<div className="bg-white p-6 rounded-lg shadow"> <div className="bg-white p-6 rounded-lg shadow">
<h3 className="text-xl font-bold mb-4 text-green-600">Local Business Focus</h3> <h3 className="text-xl font-bold mb-4 text-green-600">Local Business Focus</h3>
@ -282,7 +282,7 @@ const VpnSetup = () => {
<li>• Bilingual technical support</li> <li>• Bilingual technical support</li>
</ul> </ul>
</div> </div>
<div className="bg-white p-6 rounded-lg shadow"> <div className="bg-white p-6 rounded-lg shadow">
<h3 className="text-xl font-bold mb-4 text-green-600">WireGuard Specialization</h3> <h3 className="text-xl font-bold mb-4 text-green-600">WireGuard Specialization</h3>
<ul className="text-left space-y-2 text-gray-700"> <ul className="text-left space-y-2 text-gray-700">
@ -293,7 +293,7 @@ const VpnSetup = () => {
</ul> </ul>
</div> </div>
</div> </div>
<div className="bg-white p-8 rounded-lg shadow-lg"> <div className="bg-white p-8 rounded-lg shadow-lg">
<h3 className="text-2xl font-bold mb-4">Areas We Serve</h3> <h3 className="text-2xl font-bold mb-4">Areas We Serve</h3>
<div className="flex flex-wrap justify-center gap-4"> <div className="flex flex-wrap justify-center gap-4">
@ -315,10 +315,10 @@ const VpnSetup = () => {
<div className="max-w-4xl mx-auto text-center"> <div className="max-w-4xl mx-auto text-center">
<h2 className="text-3xl font-bold mb-6">Secure Your Remote Work Today</h2> <h2 className="text-3xl font-bold mb-6">Secure Your Remote Work Today</h2>
<p className="text-xl mb-8 text-green-100"> <p className="text-xl mb-8 text-green-100">
Get a fast, secure WireGuard VPN setup from Corpus Christi's trusted IT experts. Get a fast, secure WireGuard VPN setup from Corpus Christi's trusted IT experts.
Protect your business data and enable productive remote work. Protect your business data and enable productive remote work.
</p> </p>
<div className="flex flex-col sm:flex-row gap-4 justify-center mb-8"> <div className="flex flex-col sm:flex-row gap-4 justify-center mb-8">
<Button size="lg" className="bg-orange-600 hover:bg-orange-700"> <Button size="lg" className="bg-orange-600 hover:bg-orange-700">
<Lock className="w-5 h-5 mr-2" /> <Lock className="w-5 h-5 mr-2" />
@ -328,7 +328,7 @@ const VpnSetup = () => {
Call (361) 765-8400 Call (361) 765-8400
</Button> </Button>
</div> </div>
<p className="text-green-200"> <p className="text-green-200">
Free consultation • Same-day setup available • Local support team Free consultation • Same-day setup available • Local support team
</p> </p>

60
src/pages/WebServices.tsx
View File

@ -9,27 +9,27 @@ import { Globe, Mail, Palette, CheckCircle, Smartphone, Search, TrendingUp, User
const WebServices = () => { const WebServices = () => {
useEffect(() => { useEffect(() => {
document.title = 'Web Services Corpus Christi | Bay Area Affiliates'; document.title = 'Web Services Corpus Christi | Bay Area Affiliates';
const metaDescription = document.querySelector('meta[name="description"]'); const metaDescription = document.querySelector('meta[name="description"]');
if (metaDescription) { if (metaDescription) {
metaDescription.setAttribute('content', 'Elevate your local business presence—sites, domains, email.'); metaDescription.setAttribute('content', 'Elevate your local business presence—sites, domains, email.');
} }
const ogTitle = document.querySelector('meta[property="og:title"]'); const ogTitle = document.querySelector('meta[property="og:title"]');
if (ogTitle) { if (ogTitle) {
ogTitle.setAttribute('content', 'Web Services Corpus Christi—Professional Business Websites'); ogTitle.setAttribute('content', 'Web Services Corpus Christi—Professional Business Websites');
} }
const ogDescription = document.querySelector('meta[property="og:description"]'); const ogDescription = document.querySelector('meta[property="og:description"]');
if (ogDescription) { if (ogDescription) {
ogDescription.setAttribute('content', 'Elevate your local business presence—sites, domains, email.'); ogDescription.setAttribute('content', 'Elevate your local business presence—sites, domains, email.');
} }
const twitterTitle = document.querySelector('meta[name="twitter:title"]'); const twitterTitle = document.querySelector('meta[name="twitter:title"]');
if (twitterTitle) { if (twitterTitle) {
twitterTitle.setAttribute('content', 'Web Design Domain Email Portland Coastal Bend SMB'); twitterTitle.setAttribute('content', 'Web Design Domain Email Portland Coastal Bend SMB');
} }
const twitterDescription = document.querySelector('meta[name="twitter:description"]'); const twitterDescription = document.querySelector('meta[name="twitter:description"]');
if (twitterDescription) { if (twitterDescription) {
twitterDescription.setAttribute('content', 'Elevate your local business presence—sites, domains, email.'); twitterDescription.setAttribute('content', 'Elevate your local business presence—sites, domains, email.');
@ -39,7 +39,7 @@ const WebServices = () => {
return ( return (
<div className="min-h-screen"> <div className="min-h-screen">
<Navigation /> <Navigation />
<main> <main role="main">
{/* Hero Section */} {/* Hero Section */}
<section className="bg-gradient-to-br from-emerald-900 via-emerald-800 to-emerald-600 text-white py-20"> <section className="bg-gradient-to-br from-emerald-900 via-emerald-800 to-emerald-600 text-white py-20">
<div className="container mx-auto px-4"> <div className="container mx-auto px-4">
@ -72,7 +72,7 @@ const WebServices = () => {
<div className="container mx-auto px-4"> <div className="container mx-auto px-4">
<div className="max-w-4xl mx-auto"> <div className="max-w-4xl mx-auto">
<h2 className="text-3xl font-bold text-center mb-12">Complete Digital Presence Solutions</h2> <h2 className="text-3xl font-bold text-center mb-12">Complete Digital Presence Solutions</h2>
<div className="grid md:grid-cols-2 gap-8 mb-12"> <div className="grid md:grid-cols-2 gap-8 mb-12">
<Card> <Card>
<CardHeader> <CardHeader>
@ -93,7 +93,7 @@ const WebServices = () => {
</ul> </ul>
</CardContent> </CardContent>
</Card> </Card>
<Card> <Card>
<CardHeader> <CardHeader>
<div className="w-16 h-16 bg-emerald-100 rounded-full flex items-center justify-center mb-4"> <div className="w-16 h-16 bg-emerald-100 rounded-full flex items-center justify-center mb-4">
@ -113,7 +113,7 @@ const WebServices = () => {
</ul> </ul>
</CardContent> </CardContent>
</Card> </Card>
<Card> <Card>
<CardHeader> <CardHeader>
<div className="w-16 h-16 bg-emerald-100 rounded-full flex items-center justify-center mb-4"> <div className="w-16 h-16 bg-emerald-100 rounded-full flex items-center justify-center mb-4">
@ -133,7 +133,7 @@ const WebServices = () => {
</ul> </ul>
</CardContent> </CardContent>
</Card> </Card>
<Card> <Card>
<CardHeader> <CardHeader>
<div className="w-16 h-16 bg-emerald-100 rounded-full flex items-center justify-center mb-4"> <div className="w-16 h-16 bg-emerald-100 rounded-full flex items-center justify-center mb-4">
@ -163,7 +163,7 @@ const WebServices = () => {
<div className="container mx-auto px-4"> <div className="container mx-auto px-4">
<div className="max-w-4xl mx-auto"> <div className="max-w-4xl mx-auto">
<h2 className="text-3xl font-bold text-center mb-12">Website Packages for Local SMBs</h2> <h2 className="text-3xl font-bold text-center mb-12">Website Packages for Local SMBs</h2>
<div className="grid md:grid-cols-3 gap-8 mb-12"> <div className="grid md:grid-cols-3 gap-8 mb-12">
<div className="bg-white p-6 rounded-lg shadow border-l-4 border-emerald-500"> <div className="bg-white p-6 rounded-lg shadow border-l-4 border-emerald-500">
<h3 className="font-bold text-lg mb-4">Business Starter</h3> <h3 className="font-bold text-lg mb-4">Business Starter</h3>
@ -181,7 +181,7 @@ const WebServices = () => {
<div className="text-sm text-gray-500">One-time setup</div> <div className="text-sm text-gray-500">One-time setup</div>
</div> </div>
</div> </div>
<div className="bg-white p-6 rounded-lg shadow border-l-4 border-orange-500"> <div className="bg-white p-6 rounded-lg shadow border-l-4 border-orange-500">
<h3 className="font-bold text-lg mb-4">Professional Plus</h3> <h3 className="font-bold text-lg mb-4">Professional Plus</h3>
<p className="text-gray-600 mb-4">Advanced features for growing businesses with online sales needs.</p> <p className="text-gray-600 mb-4">Advanced features for growing businesses with online sales needs.</p>
@ -198,7 +198,7 @@ const WebServices = () => {
<div className="text-sm text-gray-500">One-time setup</div> <div className="text-sm text-gray-500">One-time setup</div>
</div> </div>
</div> </div>
<div className="bg-white p-6 rounded-lg shadow border-l-4 border-purple-500"> <div className="bg-white p-6 rounded-lg shadow border-l-4 border-purple-500">
<h3 className="font-bold text-lg mb-4">Enterprise Solution</h3> <h3 className="font-bold text-lg mb-4">Enterprise Solution</h3>
<p className="text-gray-600 mb-4">Comprehensive digital presence for established businesses and organizations.</p> <p className="text-gray-600 mb-4">Comprehensive digital presence for established businesses and organizations.</p>
@ -216,7 +216,7 @@ const WebServices = () => {
</div> </div>
</div> </div>
</div> </div>
<div className="bg-white p-8 rounded-lg shadow-lg"> <div className="bg-white p-8 rounded-lg shadow-lg">
<h3 className="text-2xl font-bold mb-6 text-center">Why Local Businesses Choose Our Web Services</h3> <h3 className="text-2xl font-bold mb-6 text-center">Why Local Businesses Choose Our Web Services</h3>
<div className="grid md:grid-cols-2 gap-8"> <div className="grid md:grid-cols-2 gap-8">
@ -273,7 +273,7 @@ const WebServices = () => {
<div className="container mx-auto px-4"> <div className="container mx-auto px-4">
<div className="max-w-4xl mx-auto"> <div className="max-w-4xl mx-auto">
<h2 className="text-3xl font-bold text-center mb-12">Boost Your Local Business Visibility</h2> <h2 className="text-3xl font-bold text-center mb-12">Boost Your Local Business Visibility</h2>
<div className="grid md:grid-cols-3 gap-8 mb-12"> <div className="grid md:grid-cols-3 gap-8 mb-12">
<div className="text-center"> <div className="text-center">
<div className="w-20 h-20 bg-emerald-100 rounded-full flex items-center justify-center mx-auto mb-4"> <div className="w-20 h-20 bg-emerald-100 rounded-full flex items-center justify-center mx-auto mb-4">
@ -282,7 +282,7 @@ const WebServices = () => {
<h3 className="text-xl font-bold mb-2">Get Found Online</h3> <h3 className="text-xl font-bold mb-2">Get Found Online</h3>
<p className="text-gray-600">Appear at the top of Google searches when Corpus Christi customers look for your services.</p> <p className="text-gray-600">Appear at the top of Google searches when Corpus Christi customers look for your services.</p>
</div> </div>
<div className="text-center"> <div className="text-center">
<div className="w-20 h-20 bg-emerald-100 rounded-full flex items-center justify-center mx-auto mb-4"> <div className="w-20 h-20 bg-emerald-100 rounded-full flex items-center justify-center mx-auto mb-4">
<Smartphone className="w-10 h-10 text-emerald-600" /> <Smartphone className="w-10 h-10 text-emerald-600" />
@ -290,7 +290,7 @@ const WebServices = () => {
<h3 className="text-xl font-bold mb-2">Mobile-First Design</h3> <h3 className="text-xl font-bold mb-2">Mobile-First Design</h3>
<p className="text-gray-600">Your website looks perfect on phones, tablets, and desktops—critical for local searches.</p> <p className="text-gray-600">Your website looks perfect on phones, tablets, and desktops—critical for local searches.</p>
</div> </div>
<div className="text-center"> <div className="text-center">
<div className="w-20 h-20 bg-emerald-100 rounded-full flex items-center justify-center mx-auto mb-4"> <div className="w-20 h-20 bg-emerald-100 rounded-full flex items-center justify-center mx-auto mb-4">
<TrendingUp className="w-10 h-10 text-emerald-600" /> <TrendingUp className="w-10 h-10 text-emerald-600" />
@ -299,7 +299,7 @@ const WebServices = () => {
<p className="text-gray-600">Track website visitors, leads, and customer inquiries with detailed analytics reporting.</p> <p className="text-gray-600">Track website visitors, leads, and customer inquiries with detailed analytics reporting.</p>
</div> </div>
</div> </div>
<div className="bg-emerald-50 p-8 rounded-lg shadow-lg"> <div className="bg-emerald-50 p-8 rounded-lg shadow-lg">
<h3 className="text-2xl font-bold mb-6 text-center">Local SEO Success Stories</h3> <h3 className="text-2xl font-bold mb-6 text-center">Local SEO Success Stories</h3>
<div className="grid md:grid-cols-2 gap-8"> <div className="grid md:grid-cols-2 gap-8">
@ -314,7 +314,7 @@ const WebServices = () => {
</div> </div>
<div className="mt-6 text-center"> <div className="mt-6 text-center">
<p className="text-gray-700"> <p className="text-gray-700">
"Bay Area Affiliates redesigned our website and now we get 3x more customer inquiries from online searches. "Bay Area Affiliates redesigned our website and now we get 3x more customer inquiries from online searches.
They understand the Corpus Christi market better than anyone." They understand the Corpus Christi market better than anyone."
</p> </p>
<p className="text-emerald-600 font-semibold mt-2">— Local Business Owner</p> <p className="text-emerald-600 font-semibold mt-2">— Local Business Owner</p>
@ -329,7 +329,7 @@ const WebServices = () => {
<div className="container mx-auto px-4"> <div className="container mx-auto px-4">
<div className="max-w-4xl mx-auto"> <div className="max-w-4xl mx-auto">
<h2 className="text-3xl font-bold text-center mb-12">Professional Web Development Process</h2> <h2 className="text-3xl font-bold text-center mb-12">Professional Web Development Process</h2>
<div className="grid md:grid-cols-4 gap-8"> <div className="grid md:grid-cols-4 gap-8">
<Card className="text-center"> <Card className="text-center">
<CardHeader> <CardHeader>
@ -342,7 +342,7 @@ const WebServices = () => {
<p className="text-sm">In-person consultation to understand your business goals and target customers.</p> <p className="text-sm">In-person consultation to understand your business goals and target customers.</p>
</CardContent> </CardContent>
</Card> </Card>
<Card className="text-center"> <Card className="text-center">
<CardHeader> <CardHeader>
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4"> <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
@ -354,7 +354,7 @@ const WebServices = () => {
<p className="text-sm">Custom website design that reflects your brand and appeals to local customers.</p> <p className="text-sm">Custom website design that reflects your brand and appeals to local customers.</p>
</CardContent> </CardContent>
</Card> </Card>
<Card className="text-center"> <Card className="text-center">
<CardHeader> <CardHeader>
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4"> <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
@ -366,7 +366,7 @@ const WebServices = () => {
<p className="text-sm">Professional coding and testing to ensure optimal performance and security.</p> <p className="text-sm">Professional coding and testing to ensure optimal performance and security.</p>
</CardContent> </CardContent>
</Card> </Card>
<Card className="text-center"> <Card className="text-center">
<CardHeader> <CardHeader>
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4"> <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
@ -389,10 +389,10 @@ const WebServices = () => {
<div className="max-w-4xl mx-auto text-center"> <div className="max-w-4xl mx-auto text-center">
<h2 className="text-3xl font-bold mb-8">Serving Coastal Bend Businesses Since 1999</h2> <h2 className="text-3xl font-bold mb-8">Serving Coastal Bend Businesses Since 1999</h2>
<p className="text-xl text-gray-600 mb-8"> <p className="text-xl text-gray-600 mb-8">
Bay Area Affiliates has created professional websites for hundreds of local businesses throughout Bay Area Affiliates has created professional websites for hundreds of local businesses throughout
the Corpus Christi area. We understand what works in our local market. the Corpus Christi area. We understand what works in our local market.
</p> </p>
<div className="grid md:grid-cols-4 gap-8 mb-12"> <div className="grid md:grid-cols-4 gap-8 mb-12">
<div className="text-center"> <div className="text-center">
<div className="text-4xl font-bold text-emerald-600 mb-2">200+</div> <div className="text-4xl font-bold text-emerald-600 mb-2">200+</div>
@ -411,11 +411,11 @@ const WebServices = () => {
<div className="text-gray-600">Support Team</div> <div className="text-gray-600">Support Team</div>
</div> </div>
</div> </div>
<div className="bg-white p-8 rounded-lg shadow-lg"> <div className="bg-white p-8 rounded-lg shadow-lg">
<h3 className="text-2xl font-bold mb-4">Web Services Throughout the Coastal Bend</h3> <h3 className="text-2xl font-bold mb-4">Web Services Throughout the Coastal Bend</h3>
<p className="text-gray-700 mb-6"> <p className="text-gray-700 mb-6">
From Portland's waterfront businesses to Kingsville's agricultural services, we create websites From Portland's waterfront businesses to Kingsville's agricultural services, we create websites
that connect local businesses with their communities and drive real results. that connect local businesses with their communities and drive real results.
</p> </p>
<div className="flex flex-wrap justify-center gap-4"> <div className="flex flex-wrap justify-center gap-4">
@ -437,10 +437,10 @@ const WebServices = () => {
<div className="max-w-4xl mx-auto text-center"> <div className="max-w-4xl mx-auto text-center">
<h2 className="text-3xl font-bold mb-6">Ready to Grow Your Local Business Online?</h2> <h2 className="text-3xl font-bold mb-6">Ready to Grow Your Local Business Online?</h2>
<p className="text-xl mb-8 text-emerald-100"> <p className="text-xl mb-8 text-emerald-100">
Get a professional website that attracts local customers and grows your business. Get a professional website that attracts local customers and grows your business.
Free consultation and custom quote for Coastal Bend SMBs. Free consultation and custom quote for Coastal Bend SMBs.
</p> </p>
<div className="flex flex-col sm:flex-row gap-4 justify-center mb-8"> <div className="flex flex-col sm:flex-row gap-4 justify-center mb-8">
<Button size="lg" className="bg-orange-600 hover:bg-orange-700"> <Button size="lg" className="bg-orange-600 hover:bg-orange-700">
<Globe className="w-5 h-5 mr-2" /> <Globe className="w-5 h-5 mr-2" />
@ -450,7 +450,7 @@ const WebServices = () => {
Call (361) 765-8400 Call (361) 765-8400
</Button> </Button>
</div> </div>
<p className="text-emerald-200"> <p className="text-emerald-200">
Free consultation • Local market expertise • Ongoing support • Mobile-first design Free consultation • Local market expertise • Ongoing support • Mobile-first design
</p> </p>

36
src/pages/Windows11Transition.tsx
View File

@ -9,27 +9,27 @@ import { Clock, Shield, Zap, CheckCircle, AlertTriangle } from 'lucide-react';
const Windows11Transition = () => { const Windows11Transition = () => {
useEffect(() => { useEffect(() => {
document.title = 'Windows 11 Upgrade Corpus Christi | Bay Area Affiliates'; document.title = 'Windows 11 Upgrade Corpus Christi | Bay Area Affiliates';
const metaDescription = document.querySelector('meta[name="description"]'); const metaDescription = document.querySelector('meta[name="description"]');
if (metaDescription) { if (metaDescription) {
metaDescription.setAttribute('content', 'Windows 10 support ends Oct 14, 2025—upgrade now for security. Trusted service for Corpus Christi businesses.'); metaDescription.setAttribute('content', 'Windows 10 support ends Oct 14, 2025—upgrade now for security. Trusted service for Corpus Christi businesses.');
} }
const ogTitle = document.querySelector('meta[property="og:title"]'); const ogTitle = document.querySelector('meta[property="og:title"]');
if (ogTitle) { if (ogTitle) {
ogTitle.setAttribute('content', 'Windows 11 Upgrade: Secure Your Business Before Deadline'); ogTitle.setAttribute('content', 'Windows 11 Upgrade: Secure Your Business Before Deadline');
} }
const ogDescription = document.querySelector('meta[property="og:description"]'); const ogDescription = document.querySelector('meta[property="og:description"]');
if (ogDescription) { if (ogDescription) {
ogDescription.setAttribute('content', 'Windows 10 support ends Oct 14, 2025—upgrade now for security. Trusted service for Corpus Christi businesses.'); ogDescription.setAttribute('content', 'Windows 10 support ends Oct 14, 2025—upgrade now for security. Trusted service for Corpus Christi businesses.');
} }
const twitterTitle = document.querySelector('meta[name="twitter:title"]'); const twitterTitle = document.querySelector('meta[name="twitter:title"]');
if (twitterTitle) { if (twitterTitle) {
twitterTitle.setAttribute('content', 'Corpus Christi Windows 11 Upgrade—Urgent for Business Security'); twitterTitle.setAttribute('content', 'Corpus Christi Windows 11 Upgrade—Urgent for Business Security');
} }
const twitterDescription = document.querySelector('meta[name="twitter:description"]'); const twitterDescription = document.querySelector('meta[name="twitter:description"]');
if (twitterDescription) { if (twitterDescription) {
twitterDescription.setAttribute('content', 'Windows 10 support ends Oct 14, 2025—upgrade now for security. Trusted service for Corpus Christi businesses.'); twitterDescription.setAttribute('content', 'Windows 10 support ends Oct 14, 2025—upgrade now for security. Trusted service for Corpus Christi businesses.');
@ -39,7 +39,7 @@ const Windows11Transition = () => {
return ( return (
<div className="min-h-screen"> <div className="min-h-screen">
<Navigation /> <Navigation />
<main> <main role="main">
{/* Hero Section */} {/* Hero Section */}
<section className="bg-gradient-to-br from-blue-900 via-blue-800 to-blue-600 text-white py-20"> <section className="bg-gradient-to-br from-blue-900 via-blue-800 to-blue-600 text-white py-20">
<div className="container mx-auto px-4"> <div className="container mx-auto px-4">
@ -77,11 +77,11 @@ const Windows11Transition = () => {
<h2 className="text-2xl font-bold text-red-800">Windows 10 Support Ends Oct 14, 2025</h2> <h2 className="text-2xl font-bold text-red-800">Windows 10 Support Ends Oct 14, 2025</h2>
</div> </div>
<p className="text-red-700 text-lg"> <p className="text-red-700 text-lg">
After this date, Microsoft will no longer provide security updates, bug fixes, or technical support for Windows 10. After this date, Microsoft will no longer provide security updates, bug fixes, or technical support for Windows 10.
Your business will be vulnerable to security threats and compliance issues. Your business will be vulnerable to security threats and compliance issues.
</p> </p>
</div> </div>
<div className="grid md:grid-cols-2 gap-8"> <div className="grid md:grid-cols-2 gap-8">
<Card> <Card>
<CardHeader> <CardHeader>
@ -106,7 +106,7 @@ const Windows11Transition = () => {
</div> </div>
</CardContent> </CardContent>
</Card> </Card>
<Card> <Card>
<CardHeader> <CardHeader>
<CardTitle className="text-green-600">Benefits of Windows 11</CardTitle> <CardTitle className="text-green-600">Benefits of Windows 11</CardTitle>
@ -140,7 +140,7 @@ const Windows11Transition = () => {
<div className="container mx-auto px-4"> <div className="container mx-auto px-4">
<div className="max-w-4xl mx-auto"> <div className="max-w-4xl mx-auto">
<h2 className="text-3xl font-bold text-center mb-12">Seamless Migration for Local SMBs</h2> <h2 className="text-3xl font-bold text-center mb-12">Seamless Migration for Local SMBs</h2>
<div className="grid md:grid-cols-3 gap-8 mb-12"> <div className="grid md:grid-cols-3 gap-8 mb-12">
<Card className="text-center"> <Card className="text-center">
<CardHeader> <CardHeader>
@ -153,7 +153,7 @@ const Windows11Transition = () => {
<p>We evaluate your current hardware and software for Windows 11 compatibility.</p> <p>We evaluate your current hardware and software for Windows 11 compatibility.</p>
</CardContent> </CardContent>
</Card> </Card>
<Card className="text-center"> <Card className="text-center">
<CardHeader> <CardHeader>
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4"> <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
@ -165,7 +165,7 @@ const Windows11Transition = () => {
<p>Custom migration plan tailored to minimize business disruption.</p> <p>Custom migration plan tailored to minimize business disruption.</p>
</CardContent> </CardContent>
</Card> </Card>
<Card className="text-center"> <Card className="text-center">
<CardHeader> <CardHeader>
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4"> <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
@ -178,7 +178,7 @@ const Windows11Transition = () => {
</CardContent> </CardContent>
</Card> </Card>
</div> </div>
<div className="bg-blue-50 p-8 rounded-lg"> <div className="bg-blue-50 p-8 rounded-lg">
<h3 className="text-2xl font-bold mb-4">Enhanced Security & Features</h3> <h3 className="text-2xl font-bold mb-4">Enhanced Security & Features</h3>
<div className="grid md:grid-cols-2 gap-6"> <div className="grid md:grid-cols-2 gap-6">
@ -212,10 +212,10 @@ const Windows11Transition = () => {
<div className="max-w-4xl mx-auto text-center"> <div className="max-w-4xl mx-auto text-center">
<h2 className="text-3xl font-bold mb-8">Trusted by Corpus Christi Businesses for 25+ Years</h2> <h2 className="text-3xl font-bold mb-8">Trusted by Corpus Christi Businesses for 25+ Years</h2>
<p className="text-xl text-gray-600 mb-8"> <p className="text-xl text-gray-600 mb-8">
Bay Area Affiliates has been helping local businesses navigate technology transitions since 1999. Bay Area Affiliates has been helping local businesses navigate technology transitions since 1999.
We understand the unique needs of Coastal Bend SMBs. We understand the unique needs of Coastal Bend SMBs.
</p> </p>
<div className="grid md:grid-cols-3 gap-8 mb-12"> <div className="grid md:grid-cols-3 gap-8 mb-12">
<div className="text-center"> <div className="text-center">
<div className="text-4xl font-bold text-blue-600 mb-2">25+</div> <div className="text-4xl font-bold text-blue-600 mb-2">25+</div>
@ -230,7 +230,7 @@ const Windows11Transition = () => {
<div className="text-gray-600">Local Support</div> <div className="text-gray-600">Local Support</div>
</div> </div>
</div> </div>
<div className="bg-white p-8 rounded-lg shadow-lg"> <div className="bg-white p-8 rounded-lg shadow-lg">
<h3 className="text-2xl font-bold mb-4">Serving the Entire Coastal Bend</h3> <h3 className="text-2xl font-bold mb-4">Serving the Entire Coastal Bend</h3>
<div className="flex flex-wrap justify-center gap-4"> <div className="flex flex-wrap justify-center gap-4">
@ -254,7 +254,7 @@ const Windows11Transition = () => {
<p className="text-xl mb-8 text-blue-100"> <p className="text-xl mb-8 text-blue-100">
Schedule your Windows 11 upgrade assessment today. Protect your business before the October 14, 2025 deadline. Schedule your Windows 11 upgrade assessment today. Protect your business before the October 14, 2025 deadline.
</p> </p>
<div className="flex flex-col sm:flex-row gap-4 justify-center mb-8"> <div className="flex flex-col sm:flex-row gap-4 justify-center mb-8">
<Button size="lg" className="bg-orange-600 hover:bg-orange-700"> <Button size="lg" className="bg-orange-600 hover:bg-orange-700">
<Clock className="w-5 h-5 mr-2" /> <Clock className="w-5 h-5 mr-2" />
@ -264,7 +264,7 @@ const Windows11Transition = () => {
Call (361) 765-8400 Call (361) 765-8400
</Button> </Button>
</div> </div>
<p className="text-blue-200"> <p className="text-blue-200">
Free consultation • Same-day response • Local experts Free consultation • Same-day response • Local experts
</p> </p>