From 1a93c0f5edbe9dc9557c2dc6dc25ec26dd59ac51 Mon Sep 17 00:00:00 2001
From: Timo Knuth <knuth.timo@gmail.com>
Date: Fri, 9 Jan 2026 11:29:02 +0100
Subject: [PATCH] wow

---
 index.html                               |  11 +
 src/components/Footer.tsx                |   2 +-
 src/components/Navigation.tsx            | 278 +++++++++++------------
 src/components/ScrollReveal.tsx          |  56 +++--
 src/components/home/HeroSection.tsx      |   2 +-
 src/components/home/ProofSection.tsx     |  14 +-
 src/components/home/ServicesOverview.tsx | 104 +++++----
 src/components/home/TrustedBy.tsx        |  54 +++++
 src/index.css                            |   2 -
 src/pages/About.tsx                      |  13 +-
 src/pages/Blog.tsx                       |   9 +-
 src/pages/BlogPost.tsx                   |   4 +-
 src/pages/Contact.tsx                    |  25 +-
 src/pages/DesktopHardware.tsx            |  50 ++--
 src/pages/Index.tsx                      |  40 +++-
 src/pages/NetworkAttachedStorage.tsx     |  60 ++---
 src/pages/NetworkInfrastructure.tsx      |  58 ++---
 src/pages/PerformanceUpgrades.tsx        |  48 ++--
 src/pages/PrinterScannerInstallation.tsx |  50 ++--
 src/pages/Services.tsx                   |  13 +-
 src/pages/VpnSetup.tsx                   |  50 ++--
 src/pages/WebServices.tsx                |  60 ++---
 src/pages/Windows11Transition.tsx        |  36 +--
 23 files changed, 588 insertions(+), 451 deletions(-)
 create mode 100644 src/components/home/TrustedBy.tsx

diff --git a/index.html b/index.html
index 7b6b7c7..61524cc 100644
--- a/index.html
+++ b/index.html
@@ -213,10 +213,21 @@
     
     <!-- Performance Optimization -->
     <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" />
+    
+    <!-- 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="/serverroom.webp" as="image" type="image/webp" />
 
+    <!-- Canonical URL -->
+    <link rel="canonical" href="https://bayarea-cc.com/" />
+
     <!-- Favicon -->
     <link rel="icon" type="image/svg+xml" href="/logo_bayarea.svg" />
     <link rel="apple-touch-icon" sizes="180x180" href="/logo_bayarea.svg" />
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 74d4761..5c315ce 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -20,7 +20,7 @@ const Footer = () => {
   ];
 
   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="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
           {/* Company info */}
diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx
index cc07a08..7ff3991 100644
--- a/src/components/Navigation.tsx
+++ b/src/components/Navigation.tsx
@@ -37,9 +37,9 @@ const Navigation = () => {
 
       <motion.nav
         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-transparent'
-        }`}
+          ? 'bg-background-deep/80 backdrop-blur-md border-b border-neon/30 shadow-[0_0_20px_rgba(0,0,0,0.5)]'
+          : 'bg-transparent border-b border-transparent'
+          }`}
         initial="hidden"
         animate="visible"
         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="flex items-center justify-between h-14 md:h-16">
-          {/* Logo with animation */}
-          <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) => (
+            {/* Logo with animation */}
+            <Link to="/" className="flex items-center space-x-3">
               <motion.div
-                key={item.name}
-                initial={{ opacity: 0, y: -20 }}
-                animate={{ opacity: 1, y: 0 }}
-                transition={{ delay: index * 0.1, duration: 0.5 }}
+                className="w-12 h-12 flex items-center justify-center overflow-visible"
+                whileHover={{ rotate: 360 }}
+                transition={{ duration: 0.6, ease: "easeInOut" }}
               >
-                <Link
-                  to={item.path}
-                  className={`font-medium transition-all duration-200 relative group px-2 py-1 ${isActive(item.path)
-                    ? 'text-neon'
-                    : '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>
+                <img
+                  src="/logo_bayarea.svg"
+                  alt="Bay Area Affiliates Logo"
+                  className="w-10 h-10 opacity-90"
+                />
               </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>
-          </div>
+              <span className="font-heading font-bold text-lg text-white">
+                Bay Area Affiliates
+              </span>
+            </Link>
 
-          {/* Mobile menu button with animation */}
-          <motion.button
-            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 ? (
+            {/* Desktop Navigation with animations */}
+            <div className="hidden md:flex items-center space-x-8">
+              {navItems.map((item, index) => (
                 <motion.div
-                  key="close"
-                  initial={{ rotate: -90, opacity: 0 }}
-                  animate={{ rotate: 0, opacity: 1 }}
-                  exit={{ rotate: 90, opacity: 0 }}
-                  transition={{ duration: 0.2 }}
+                  key={item.name}
+                  initial={{ opacity: 0, y: -20 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ delay: index * 0.1, duration: 0.5 }}
                 >
-                  <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"
+                    to={item.path}
+                    className={`font-medium transition-all duration-200 relative group px-2 py-1 ${isActive(item.path)
+                      ? '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>
                 </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>
-          )}
-        </AnimatePresence>
-      </div>
-    </motion.nav>
+            </div>
+
+            {/* Mobile menu button with animation */}
+            <motion.button
+              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>
     </>
   );
 };
diff --git a/src/components/ScrollReveal.tsx b/src/components/ScrollReveal.tsx
index a76687a..fb95e45 100644
--- a/src/components/ScrollReveal.tsx
+++ b/src/components/ScrollReveal.tsx
@@ -1,29 +1,51 @@
 import { ReactNode } from 'react';
 import { motion, useInView } from 'framer-motion';
-import { useRef } from 'react';
-import { scrollRevealVariants } from '@/utils/animations';
+import React, { useRef } from 'react';
 
-type ScrollRevealProps = {
-  children: ReactNode;
+interface ScrollRevealProps {
+  children: React.ReactNode;
+  width?: 'fit-content' | '100%';
   delay?: number;
+  duration?: number;
+  direction?: 'up' | 'down' | 'left' | 'right';
   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 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 (
-    <motion.div
-      ref={ref}
-      initial="hidden"
-      animate={isInView ? "visible" : "hidden"}
-      variants={scrollRevealVariants}
-      transition={{ delay: delay / 1000 }}
-      className={className}
-    >
-      {children}
-    </motion.div>
+    <div ref={ref} style={{ position: 'relative', width, overflow: 'hidden' }} className={className}>
+      <motion.div
+        variants={{
+          hidden: { opacity: 0, ...getDirectionOffset() },
+          visible: { opacity: 1, x: 0, y: 0 },
+        }}
+        initial="hidden"
+        animate={isInView ? "visible" : "hidden"}
+        transition={{ duration, delay, ease: "easeOut" }}
+      >
+        {children}
+      </motion.div>
+    </div>
   );
 };
 
diff --git a/src/components/home/HeroSection.tsx b/src/components/home/HeroSection.tsx
index e60fb03..af94b7c 100644
--- a/src/components/home/HeroSection.tsx
+++ b/src/components/home/HeroSection.tsx
@@ -30,7 +30,7 @@ const HeroSection = () => {
               animate={{ scale: 1.1, opacity: 1 }}
               transition={{ duration: 1.2, ease: easing.elegant }}
               loading="eager"
-              fetchpriority="high"
+              fetchPriority="high"
             />
           </picture>
 
diff --git a/src/components/home/ProofSection.tsx b/src/components/home/ProofSection.tsx
index 9405e65..594a544 100644
--- a/src/components/home/ProofSection.tsx
+++ b/src/components/home/ProofSection.tsx
@@ -82,23 +82,13 @@ const ProofSection = () => {
               variants={staggerItem}
               className="text-center"
             >
-              <motion.div
-                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
-                }}
-              >
+              <div className="font-heading font-bold text-4xl lg:text-5xl text-neon mb-2">
                 <CountUpNumber
                   value={stat.value}
                   duration={2000 + index * 200}
                   className="inline-block"
                 />
-              </motion.div>
+              </div>
               <motion.div
                 className="text-foreground-muted text-sm lg:text-base"
                 initial={{ opacity: 0, y: 10 }}
diff --git a/src/components/home/ServicesOverview.tsx b/src/components/home/ServicesOverview.tsx
index 4c35d84..9936535 100644
--- a/src/components/home/ServicesOverview.tsx
+++ b/src/components/home/ServicesOverview.tsx
@@ -85,71 +85,77 @@ const ServicesOverview = () => {
             const Icon = service.icon;
 
             return (
-              <motion.div key={service.title} variants={staggerItem}>
+              <motion.div key={service.title} variants={staggerItem} className="h-full">
                 <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={{
-                    y: -8,
-                    boxShadow: "0 0 30px rgba(51, 102, 255, 0.4)"
+                    y: -10,
+                    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 */}
                   <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 }}
                     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>
 
                   {/* Content */}
-                  <h3 className="font-heading font-bold text-xl text-foreground mb-4">
-                    {service.title}
-                  </h3>
+                  <div className="relative z-10">
+                    <h3 className="font-heading font-bold text-xl text-foreground mb-4 group-hover:text-neon transition-colors duration-300">
+                      {service.title}
+                    </h3>
 
-                  <p className="text-foreground-muted mb-6 leading-relaxed">
-                    {service.description}
-                  </p>
+                    <p className="text-foreground-muted mb-6 leading-relaxed">
+                      {service.description}
+                    </p>
 
-                  {/* Features */}
-                  <ul className="space-y-2 mb-6">
-                    {service.features.map((feature) => (
-                      <li key={feature} className="flex items-center text-sm text-foreground-muted">
-                        <motion.div
-                          className="w-1.5 h-1.5 bg-neon rounded-full mr-3"
-                          animate={{
-                            scale: [1, 1.3, 1],
-                            opacity: [0.7, 1, 0.7]
-                          }}
-                          transition={{
-                            duration: 2,
-                            repeat: Infinity,
-                            delay: index * 0.2
-                          }}
-                        />
-                        {feature}
-                      </li>
-                    ))}
-                  </ul>
+                    {/* Features */}
+                    <ul className="space-y-2 mb-6">
+                      {service.features.map((feature) => (
+                        <li key={feature} className="flex items-center text-sm text-foreground-muted">
+                          <motion.div
+                            className="w-1.5 h-1.5 bg-neon rounded-full mr-3 shadow-[0_0_5px_rgba(51,102,255,0.8)]"
+                            animate={{
+                              scale: [1, 1.5, 1],
+                              opacity: [0.7, 1, 0.7]
+                            }}
+                            transition={{
+                              duration: 2,
+                              repeat: Infinity,
+                              delay: index * 0.2
+                            }}
+                          />
+                          {feature}
+                        </li>
+                      ))}
+                    </ul>
 
-                  {/* CTA */}
-                  <Link
-                    to="/services"
-                    className="inline-flex items-center text-neon font-medium hover:text-neon/80 transition-colors group"
-                  >
-                    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" }}
+                    {/* CTA */}
+                    <Link
+                      to="/services"
+                      className="inline-flex items-center text-neon font-medium group-hover:translate-x-2 transition-transform duration-300"
                     >
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5l7 7-7 7" />
-                    </motion.svg>
-                  </Link>
+                      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" />
+                      </motion.svg>
+                    </Link>
+                  </div>
                 </motion.div>
               </motion.div>
             );
diff --git a/src/components/home/TrustedBy.tsx b/src/components/home/TrustedBy.tsx
new file mode 100644
index 0000000..af08603
--- /dev/null
+++ b/src/components/home/TrustedBy.tsx
@@ -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;
diff --git a/src/index.css b/src/index.css
index 0123f34..04f8f1e 100644
--- a/src/index.css
+++ b/src/index.css
@@ -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 components;
 @tailwind utilities;
diff --git a/src/pages/About.tsx b/src/pages/About.tsx
index ac42193..62f7240 100644
--- a/src/pages/About.tsx
+++ b/src/pages/About.tsx
@@ -4,10 +4,19 @@ import { Shield, Users, Zap, MapPin } from 'lucide-react';
 import ScrollReveal from '@/components/ScrollReveal';
 import CountUpNumber from '@/components/CountUpNumber';
 import { useEffect, useRef } from 'react';
+import { useSEO } from '@/hooks/useSEO';
 
 const About = () => {
   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(() => {
     const handleScroll = () => {
       if (imageRef.current) {
@@ -66,7 +75,7 @@ const About = () => {
     <div className="min-h-screen">
       <Navigation />
 
-      <main>
+      <main role="main">
         {/* Hero section with image background */}
         <section className="relative h-screen flex items-center justify-center overflow-hidden">
           {/* Background image with parallax */}
@@ -78,7 +87,7 @@ const About = () => {
               className="w-full h-[110%] object-cover will-change-transform"
               style={{ transform: 'translateY(0px) scale(1.1)' }}
               loading="eager"
-              fetchpriority="high"
+              fetchPriority="high"
             />
           </div>
 
diff --git a/src/pages/Blog.tsx b/src/pages/Blog.tsx
index 0ccdda1..8ccad90 100644
--- a/src/pages/Blog.tsx
+++ b/src/pages/Blog.tsx
@@ -81,7 +81,7 @@ const Blog = () => {
     <div className="min-h-screen">
       <Navigation />
 
-      <main>
+      <main role="main">
         {/* Hero section with image background */}
         <section className="relative h-screen flex items-center justify-center overflow-hidden">
           {/* Background image with parallax */}
@@ -93,7 +93,7 @@ const Blog = () => {
               className="w-full h-[110%] object-cover will-change-transform"
               style={{ transform: 'translateY(0px) scale(1.1)' }}
               loading="eager"
-              fetchpriority="high"
+              fetchPriority="high"
             />
           </div>
 
@@ -211,9 +211,8 @@ const Blog = () => {
       {/* Scroll to Top Button */}
       <button
         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 ${
-          showScrollTop ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-16 pointer-events-none'
-        }`}
+        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'
+          }`}
         aria-label="Scroll to top"
       >
         <ArrowUp className="w-6 h-6" />
diff --git a/src/pages/BlogPost.tsx b/src/pages/BlogPost.tsx
index 3cc6c01..a2a5108 100644
--- a/src/pages/BlogPost.tsx
+++ b/src/pages/BlogPost.tsx
@@ -112,7 +112,7 @@ const BlogPost = () => {
     <div className="min-h-screen bg-background-deep">
       <Navigation />
 
-      <main>
+      <main role="main">
         {/* Hero section with featured image */}
         <section className="relative h-[60vh] min-h-[400px] flex items-center justify-center overflow-hidden">
           {/* Background image */}
@@ -122,7 +122,7 @@ const BlogPost = () => {
               alt={post.title}
               className="w-full h-full object-cover"
               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>
diff --git a/src/pages/Contact.tsx b/src/pages/Contact.tsx
index 22d71d0..e7b0dc5 100644
--- a/src/pages/Contact.tsx
+++ b/src/pages/Contact.tsx
@@ -5,8 +5,17 @@ import { Mail, Phone, MapPin, Clock, DollarSign, Headphones } from 'lucide-react
 import ScrollReveal from '@/components/ScrollReveal';
 import { useToast } from '@/hooks/use-toast';
 import { useEffect, useRef } from 'react';
+import { useSEO } from '@/hooks/useSEO';
 
 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 imageRef = useRef<HTMLImageElement>(null);
   const [formData, setFormData] = useState({
@@ -81,7 +90,7 @@ const Contact = () => {
     <div className="min-h-screen">
       <Navigation />
 
-      <main>
+      <main role="main">
         {/* Hero section with image background */}
         <section className="relative h-screen flex items-center justify-center overflow-hidden">
           {/* Background image with parallax */}
@@ -158,7 +167,7 @@ const Contact = () => {
                             required
                             value={formData.name}
                             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"
                           />
                         </div>
@@ -174,7 +183,7 @@ const Contact = () => {
                             required
                             value={formData.email}
                             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"
                           />
                         </div>
@@ -191,7 +200,7 @@ const Contact = () => {
                             name="company"
                             value={formData.company}
                             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"
                           />
                         </div>
@@ -206,7 +215,7 @@ const Contact = () => {
                             name="phone"
                             value={formData.phone}
                             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"
                           />
                         </div>
@@ -223,7 +232,7 @@ const Contact = () => {
                           rows={5}
                           value={formData.message}
                           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..."
                         />
                       </div>
@@ -375,8 +384,8 @@ const Contact = () => {
 
         {/* Service Area Map */}
         <section className="py-16 bg-background-deep">
-          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <ScrollReveal>
+          <div className="w-full max-w-[95%] mx-auto px-4 sm:px-6 lg:px-8">
+            <ScrollReveal width="100%">
               <div className="text-center mb-8">
                 <h2 className="font-heading font-bold text-3xl text-foreground mb-4">
                   Our Service Area
diff --git a/src/pages/DesktopHardware.tsx b/src/pages/DesktopHardware.tsx
index f196cf2..bb4bf16 100644
--- a/src/pages/DesktopHardware.tsx
+++ b/src/pages/DesktopHardware.tsx
@@ -9,27 +9,27 @@ import { Monitor, HardDrive, Cpu, CheckCircle, DollarSign, Truck, Shield, Award
 const DesktopHardware = () => {
   useEffect(() => {
     document.title = 'Desktop Hardware Corpus Christi | Bay Area Affiliates';
-    
+
     const metaDescription = document.querySelector('meta[name="description"]');
     if (metaDescription) {
       metaDescription.setAttribute('content', 'Quality new/refurbished desktops, fast local installation.');
     }
-    
+
     const ogTitle = document.querySelector('meta[property="og:title"]');
     if (ogTitle) {
       ogTitle.setAttribute('content', 'Refurbished Desktops Corpus Christi—Quality Business Hardware');
     }
-    
+
     const ogDescription = document.querySelector('meta[property="og:description"]');
     if (ogDescription) {
       ogDescription.setAttribute('content', 'Quality new/refurbished desktops, fast local installation.');
     }
-    
+
     const twitterTitle = document.querySelector('meta[name="twitter:title"]');
     if (twitterTitle) {
       twitterTitle.setAttribute('content', 'Affordable PC Business Hardware Corpus Christi');
     }
-    
+
     const twitterDescription = document.querySelector('meta[name="twitter:description"]');
     if (twitterDescription) {
       twitterDescription.setAttribute('content', 'Quality new/refurbished desktops, fast local installation.');
@@ -39,7 +39,7 @@ const DesktopHardware = () => {
   return (
     <div className="min-h-screen">
       <Navigation />
-      <main>
+      <main role="main">
         {/* Hero Section */}
         <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">
@@ -72,7 +72,7 @@ const DesktopHardware = () => {
           <div className="container mx-auto px-4">
             <div className="max-w-4xl mx-auto">
               <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">
                 <Card>
                   <CardHeader>
@@ -93,7 +93,7 @@ const DesktopHardware = () => {
                     </ul>
                   </CardContent>
                 </Card>
-                
+
                 <Card>
                   <CardHeader>
                     <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>
                   </CardContent>
                 </Card>
-                
+
                 <Card>
                   <CardHeader>
                     <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>
                   </CardContent>
                 </Card>
-                
+
                 <Card>
                   <CardHeader>
                     <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="max-w-4xl mx-auto">
               <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="bg-white p-6 rounded-lg shadow border-l-4 border-blue-500">
                   <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>
                 </div>
-                
+
                 <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>
                   <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>
                 </div>
-                
+
                 <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>
                   <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 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>
                 <div className="grid md:grid-cols-2 gap-8">
@@ -270,7 +270,7 @@ const DesktopHardware = () => {
           <div className="container mx-auto px-4">
             <div className="max-w-4xl mx-auto">
               <h2 className="text-3xl font-bold text-center mb-12">Complete Installation & Setup Service</h2>
-              
+
               <div className="grid md:grid-cols-4 gap-8">
                 <Card className="text-center">
                   <CardHeader>
@@ -283,7 +283,7 @@ const DesktopHardware = () => {
                     <p className="text-sm">Assess your needs and recommend the optimal hardware configuration for your business.</p>
                   </CardContent>
                 </Card>
-                
+
                 <Card className="text-center">
                   <CardHeader>
                     <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>
                   </CardContent>
                 </Card>
-                
+
                 <Card className="text-center">
                   <CardHeader>
                     <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>
                   </CardContent>
                 </Card>
-                
+
                 <Card className="text-center">
                   <CardHeader>
                     <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">
               <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">
-                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.
               </p>
-              
+
               <div className="grid md:grid-cols-3 gap-8 mb-12">
                 <div className="text-center">
                   <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>
               </div>
-              
+
               <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>
                 <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.
                 </p>
                 <div className="flex flex-wrap justify-center gap-4">
@@ -374,10 +374,10 @@ const DesktopHardware = () => {
             <div className="max-w-4xl mx-auto text-center">
               <h2 className="text-3xl font-bold mb-6">Upgrade Your Business Hardware Today</h2>
               <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.
               </p>
-              
+
               <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">
                   <Award className="w-5 h-5 mr-2" />
@@ -387,7 +387,7 @@ const DesktopHardware = () => {
                   Call (361) 765-8400
                 </Button>
               </div>
-              
+
               <p className="text-gray-200">
                 Free consultation • Local delivery • Professional installation • 12-month warranty
               </p>
diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx
index c385449..881d795 100644
--- a/src/pages/Index.tsx
+++ b/src/pages/Index.tsx
@@ -6,18 +6,48 @@ import ProcessTimeline from '@/components/home/ProcessTimeline';
 import ServicesOverview from '@/components/home/ServicesOverview';
 import ProofSection from '@/components/home/ProofSection';
 import CTASection from '@/components/home/CTASection';
+import TrustedBy from '@/components/home/TrustedBy';
+import ScrollReveal from '@/components/ScrollReveal';
+import { useSEO } from '@/hooks/useSEO';
 
 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 (
     <div className="min-h-screen">
       <Navigation />
       <main id="main-content" role="main">
         <HeroSection />
-        <ValuePillars />
-        <ProcessTimeline />
-        <ServicesOverview />
-        <ProofSection />
-        <CTASection />
+
+        <ScrollReveal delay={0.2} width="100%">
+          <TrustedBy />
+        </ScrollReveal>
+
+        <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>
       <Footer />
     </div>
diff --git a/src/pages/NetworkAttachedStorage.tsx b/src/pages/NetworkAttachedStorage.tsx
index ca6d209..b57072b 100644
--- a/src/pages/NetworkAttachedStorage.tsx
+++ b/src/pages/NetworkAttachedStorage.tsx
@@ -9,27 +9,27 @@ import { HardDrive, Cloud, Shield, CheckCircle, Database, Server, Lock, Archive
 const NetworkAttachedStorage = () => {
   useEffect(() => {
     document.title = 'NAS Setup Corpus Christi | Bay Area Affiliates';
-    
+
     const metaDescription = document.querySelector('meta[name="description"]');
     if (metaDescription) {
       metaDescription.setAttribute('content', 'Secure, scalable backups for business data. Book install.');
     }
-    
+
     const ogTitle = document.querySelector('meta[property="og:title"]');
     if (ogTitle) {
       ogTitle.setAttribute('content', 'Network Attached Storage Setup Corpus Christi—Business Data Solutions');
     }
-    
+
     const ogDescription = document.querySelector('meta[property="og:description"]');
     if (ogDescription) {
       ogDescription.setAttribute('content', 'Secure, scalable backups for business data. Book install.');
     }
-    
+
     const twitterTitle = document.querySelector('meta[name="twitter:title"]');
     if (twitterTitle) {
       twitterTitle.setAttribute('content', 'NAS Backup Storage SMB Corpus Christi');
     }
-    
+
     const twitterDescription = document.querySelector('meta[name="twitter:description"]');
     if (twitterDescription) {
       twitterDescription.setAttribute('content', 'Secure, scalable backups for business data. Book install.');
@@ -39,7 +39,7 @@ const NetworkAttachedStorage = () => {
   return (
     <div className="min-h-screen">
       <Navigation />
-      <main>
+      <main role="main">
         {/* Hero Section */}
         <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">
@@ -72,7 +72,7 @@ const NetworkAttachedStorage = () => {
           <div className="container mx-auto px-4">
             <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>
-              
+
               <div className="grid md:grid-cols-2 gap-8 mb-12">
                 <Card>
                   <CardHeader>
@@ -93,7 +93,7 @@ const NetworkAttachedStorage = () => {
                     </ul>
                   </CardContent>
                 </Card>
-                
+
                 <Card>
                   <CardHeader>
                     <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>
                   </CardContent>
                 </Card>
-                
+
                 <Card>
                   <CardHeader>
                     <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>
                   </CardContent>
                 </Card>
-                
+
                 <Card>
                   <CardHeader>
                     <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="max-w-4xl mx-auto">
               <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="bg-white p-6 rounded-lg shadow border-l-4 border-blue-500">
                   <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>
                 </div>
-                
+
                 <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>
                   <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>
                 </div>
-                
+
                 <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>
                   <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 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>
                 <div className="grid md:grid-cols-2 gap-8">
@@ -263,7 +263,7 @@ const NetworkAttachedStorage = () => {
                     </ul>
                   </div>
                 </div>
-                
+
                 <div className="mt-6 bg-blue-50 p-6 rounded-lg">
                   <h4 className="font-semibold text-blue-700 mb-3">ROI Calculation Example</h4>
                   <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="max-w-4xl mx-auto">
               <h2 className="text-3xl font-bold text-center mb-12">Professional NAS Installation Process</h2>
-              
+
               <div className="grid md:grid-cols-4 gap-8">
                 <Card className="text-center">
                   <CardHeader>
@@ -301,7 +301,7 @@ const NetworkAttachedStorage = () => {
                     <p className="text-sm">Analyze your data storage needs, backup requirements, and growth projections.</p>
                   </CardContent>
                 </Card>
-                
+
                 <Card className="text-center">
                   <CardHeader>
                     <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>
                   </CardContent>
                 </Card>
-                
+
                 <Card className="text-center">
                   <CardHeader>
                     <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>
                   </CardContent>
                 </Card>
-                
+
                 <Card className="text-center">
                   <CardHeader>
                     <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>
               <div className="text-center mb-8">
                 <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.
                 </p>
               </div>
-              
+
               <div className="grid md:grid-cols-2 gap-8">
                 <div className="bg-white p-6 rounded-lg shadow">
                   <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>
                   </ul>
                 </div>
-                
+
                 <div className="bg-white p-6 rounded-lg shadow">
                   <h3 className="text-xl font-bold mb-4 text-red-600">Recovery Process</h3>
                   <ul className="space-y-2 text-gray-700">
@@ -379,7 +379,7 @@ const NetworkAttachedStorage = () => {
                   </ul>
                 </div>
               </div>
-              
+
               <div className="mt-8 text-center">
                 <Button size="lg" className="bg-red-600 hover:bg-red-700 text-white">
                   <Lock className="w-5 h-5 mr-2" />
@@ -396,10 +396,10 @@ const NetworkAttachedStorage = () => {
             <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>
               <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.
               </p>
-              
+
               <div className="grid md:grid-cols-3 gap-8 mb-12">
                 <div className="text-center">
                   <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>
               </div>
-              
+
               <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>
                 <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.
                 </p>
                 <div className="flex flex-wrap justify-center gap-4">
@@ -440,10 +440,10 @@ const NetworkAttachedStorage = () => {
             <div className="max-w-4xl mx-auto text-center">
               <h2 className="text-3xl font-bold mb-6">Don't Risk Your Business Data</h2>
               <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.
               </p>
-              
+
               <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">
                   <Database className="w-5 h-5 mr-2" />
@@ -453,7 +453,7 @@ const NetworkAttachedStorage = () => {
                   Call (361) 765-8400
                 </Button>
               </div>
-              
+
               <p className="text-blue-200">
                 Free consultation • Professional installation • 24/7 monitoring • Local support
               </p>
diff --git a/src/pages/NetworkInfrastructure.tsx b/src/pages/NetworkInfrastructure.tsx
index eaaca17..d4d458e 100644
--- a/src/pages/NetworkInfrastructure.tsx
+++ b/src/pages/NetworkInfrastructure.tsx
@@ -9,27 +9,27 @@ import { Network, Router, Shield, CheckCircle, Users, Monitor, Lock, Search } fr
 const NetworkInfrastructure = () => {
   useEffect(() => {
     document.title = 'Network Support Corpus Christi | Bay Area Affiliates';
-    
+
     const metaDescription = document.querySelector('meta[name="description"]');
     if (metaDescription) {
       metaDescription.setAttribute('content', 'Reliable SMB network solutions—secure, scalable, supported.');
     }
-    
+
     const ogTitle = document.querySelector('meta[property="og:title"]');
     if (ogTitle) {
       ogTitle.setAttribute('content', 'Network Infrastructure Support Corpus Christi—SMB IT Solutions');
     }
-    
+
     const ogDescription = document.querySelector('meta[property="og:description"]');
     if (ogDescription) {
       ogDescription.setAttribute('content', 'Reliable SMB network solutions—secure, scalable, supported.');
     }
-    
+
     const twitterTitle = document.querySelector('meta[name="twitter:title"]');
     if (twitterTitle) {
       twitterTitle.setAttribute('content', 'Router Setup IT Audit Corpus Christi');
     }
-    
+
     const twitterDescription = document.querySelector('meta[name="twitter:description"]');
     if (twitterDescription) {
       twitterDescription.setAttribute('content', 'Reliable SMB network solutions—secure, scalable, supported.');
@@ -39,7 +39,7 @@ const NetworkInfrastructure = () => {
   return (
     <div className="min-h-screen">
       <Navigation />
-      <main>
+      <main role="main">
         {/* Hero Section */}
         <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">
@@ -72,7 +72,7 @@ const NetworkInfrastructure = () => {
           <div className="container mx-auto px-4">
             <div className="max-w-4xl mx-auto">
               <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">
                 <Card>
                   <CardHeader>
@@ -93,7 +93,7 @@ const NetworkInfrastructure = () => {
                     </ul>
                   </CardContent>
                 </Card>
-                
+
                 <Card>
                   <CardHeader>
                     <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>
                   </CardContent>
                 </Card>
-                
+
                 <Card>
                   <CardHeader>
                     <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>
                   </CardContent>
                 </Card>
-                
+
                 <Card>
                   <CardHeader>
                     <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="max-w-4xl mx-auto">
               <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="bg-white p-6 rounded-lg shadow border-l-4 border-teal-500">
                   <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>
                 </div>
-                
+
                 <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>
                   <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>
                 </div>
-                
+
                 <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>
                   <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 className="bg-white p-8 rounded-lg shadow-lg">
                 <h3 className="text-2xl font-bold mb-6 text-center">Network Performance Benefits</h3>
                 <div className="grid md:grid-cols-2 gap-8">
@@ -273,7 +273,7 @@ const NetworkInfrastructure = () => {
           <div className="container mx-auto px-4">
             <div className="max-w-4xl mx-auto">
               <h2 className="text-3xl font-bold text-center mb-12">Professional Network Implementation</h2>
-              
+
               <div className="grid md:grid-cols-4 gap-8">
                 <Card className="text-center">
                   <CardHeader>
@@ -286,7 +286,7 @@ const NetworkInfrastructure = () => {
                     <p className="text-sm">Comprehensive evaluation of current infrastructure, requirements, and growth plans.</p>
                   </CardContent>
                 </Card>
-                
+
                 <Card className="text-center">
                   <CardHeader>
                     <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>
                   </CardContent>
                 </Card>
-                
+
                 <Card className="text-center">
                   <CardHeader>
                     <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>
                   </CardContent>
                 </Card>
-                
+
                 <Card className="text-center">
                   <CardHeader>
                     <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="max-w-4xl mx-auto">
               <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="bg-white p-6 rounded-lg shadow">
                   <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>
                   </ul>
                 </div>
-                
+
                 <div className="bg-white p-6 rounded-lg shadow">
                   <h3 className="text-xl font-bold mb-4 text-red-600">Security Concerns</h3>
                   <ul className="space-y-3 text-gray-700">
@@ -358,11 +358,11 @@ const NetworkInfrastructure = () => {
                   </ul>
                 </div>
               </div>
-              
+
               <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>
                 <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.
                 </p>
                 <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">
               <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">
-                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.
               </p>
-              
+
               <div className="grid md:grid-cols-3 gap-8 mb-12">
                 <div className="text-center">
                   <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>
               </div>
-              
+
               <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>
                 <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.
                 </p>
                 <div className="flex flex-wrap justify-center gap-4">
@@ -424,10 +424,10 @@ const NetworkInfrastructure = () => {
             <div className="max-w-4xl mx-auto text-center">
               <h2 className="text-3xl font-bold mb-6">Secure Your Business Network Infrastructure</h2>
               <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.
               </p>
-              
+
               <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">
                   <Router className="w-5 h-5 mr-2" />
@@ -437,7 +437,7 @@ const NetworkInfrastructure = () => {
                   Call (361) 765-8400
                 </Button>
               </div>
-              
+
               <p className="text-teal-200">
                 Free network assessment • Same-day emergency support • Local experts • 24/7 monitoring
               </p>
diff --git a/src/pages/PerformanceUpgrades.tsx b/src/pages/PerformanceUpgrades.tsx
index 6d8fe42..8b4f99e 100644
--- a/src/pages/PerformanceUpgrades.tsx
+++ b/src/pages/PerformanceUpgrades.tsx
@@ -9,27 +9,27 @@ import { Zap, HardDrive, TrendingUp, CheckCircle, DollarSign, Clock, Gauge, BarC
 const PerformanceUpgrades = () => {
   useEffect(() => {
     document.title = 'SSD Upgrade Corpus Christi | Bay Area Affiliates';
-    
+
     const metaDescription = document.querySelector('meta[name="description"]');
     if (metaDescription) {
       metaDescription.setAttribute('content', 'Boost device speed and reliability. Contact for upgrade today.');
     }
-    
+
     const ogTitle = document.querySelector('meta[property="og:title"]');
     if (ogTitle) {
       ogTitle.setAttribute('content', 'SSD Upgrade Corpus Christi—Boost SMB Performance');
     }
-    
+
     const ogDescription = document.querySelector('meta[property="og:description"]');
     if (ogDescription) {
       ogDescription.setAttribute('content', 'Boost device speed and reliability. Contact for upgrade today.');
     }
-    
+
     const twitterTitle = document.querySelector('meta[name="twitter:title"]');
     if (twitterTitle) {
       twitterTitle.setAttribute('content', 'Desktop Speed & Laptop Optimization Corpus Christi');
     }
-    
+
     const twitterDescription = document.querySelector('meta[name="twitter:description"]');
     if (twitterDescription) {
       twitterDescription.setAttribute('content', 'Boost device speed and reliability. Contact for upgrade today.');
@@ -39,7 +39,7 @@ const PerformanceUpgrades = () => {
   return (
     <div className="min-h-screen">
       <Navigation />
-      <main>
+      <main role="main">
         {/* Hero Section */}
         <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">
@@ -72,7 +72,7 @@ const PerformanceUpgrades = () => {
           <div className="container mx-auto px-4">
             <div className="max-w-4xl mx-auto">
               <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">
                 <Card>
                   <CardHeader>
@@ -95,7 +95,7 @@ const PerformanceUpgrades = () => {
                     </div>
                   </CardContent>
                 </Card>
-                
+
                 <Card>
                   <CardHeader>
                     <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>
                   </CardContent>
                 </Card>
-                
+
                 <Card>
                   <CardHeader>
                     <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>
                   </CardContent>
                 </Card>
-                
+
                 <Card>
                   <CardHeader>
                     <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="max-w-4xl mx-auto">
               <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">
                 <Card className="text-center">
                   <CardHeader>
@@ -173,7 +173,7 @@ const PerformanceUpgrades = () => {
                     <p className="text-sm">Comprehensive performance testing to identify bottlenecks and optimal upgrade path.</p>
                   </CardContent>
                 </Card>
-                
+
                 <Card className="text-center">
                   <CardHeader>
                     <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>
                   </CardContent>
                 </Card>
-                
+
                 <Card className="text-center">
                   <CardHeader>
                     <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>
                   </CardContent>
                 </Card>
-                
+
                 <Card className="text-center">
                   <CardHeader>
                     <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>
                 </Card>
               </div>
-              
+
               <div className="bg-white p-8 rounded-lg shadow-lg">
                 <h3 className="text-2xl font-bold mb-6 text-center">Performance Upgrade Options</h3>
                 <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>
                   </div>
-                  
+
                   <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>
                     <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>
                   </div>
-                  
+
                   <div className="border-2 border-gray-200 p-6 rounded-lg">
                     <h4 className="font-bold text-lg mb-4 text-purple-600">Enterprise</h4>
                     <ul className="space-y-2 text-sm mb-4">
@@ -270,10 +270,10 @@ const PerformanceUpgrades = () => {
             <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>
               <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.
               </p>
-              
+
               <div className="grid md:grid-cols-3 gap-8 mb-12">
                 <div className="text-center">
                   <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>
               </div>
-              
+
               <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>
                 <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.
                 </p>
                 <div className="flex flex-wrap justify-center gap-4">
@@ -314,10 +314,10 @@ const PerformanceUpgrades = () => {
             <div className="max-w-4xl mx-auto text-center">
               <h2 className="text-3xl font-bold mb-6">Stop Waiting for Slow Computers</h2>
               <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.
               </p>
-              
+
               <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">
                   <Clock className="w-5 h-5 mr-2" />
@@ -327,7 +327,7 @@ const PerformanceUpgrades = () => {
                   Call (361) 765-8400
                 </Button>
               </div>
-              
+
               <p className="text-purple-200">
                 Free speed analysis • Same-day service • Local pickup & delivery
               </p>
diff --git a/src/pages/PrinterScannerInstallation.tsx b/src/pages/PrinterScannerInstallation.tsx
index 2164db1..c267f8f 100644
--- a/src/pages/PrinterScannerInstallation.tsx
+++ b/src/pages/PrinterScannerInstallation.tsx
@@ -9,27 +9,27 @@ import { Printer, Scan, Network, CheckCircle, Wrench, Clock, Settings, Users } f
 const PrinterScannerInstallation = () => {
   useEffect(() => {
     document.title = 'Printer Install Corpus Christi | Bay Area Affiliates';
-    
+
     const metaDescription = document.querySelector('meta[name="description"]');
     if (metaDescription) {
       metaDescription.setAttribute('content', 'Hassle-free device setup—local experts, same-day support.');
     }
-    
+
     const ogTitle = document.querySelector('meta[property="og:title"]');
     if (ogTitle) {
       ogTitle.setAttribute('content', 'Printer Installation Corpus Christi—Same-Day Setup');
     }
-    
+
     const ogDescription = document.querySelector('meta[property="og:description"]');
     if (ogDescription) {
       ogDescription.setAttribute('content', 'Hassle-free device setup—local experts, same-day support.');
     }
-    
+
     const twitterTitle = document.querySelector('meta[name="twitter:title"]');
     if (twitterTitle) {
       twitterTitle.setAttribute('content', 'Scanner Setup & Office Device Support Corpus Christi');
     }
-    
+
     const twitterDescription = document.querySelector('meta[name="twitter:description"]');
     if (twitterDescription) {
       twitterDescription.setAttribute('content', 'Hassle-free device setup—local experts, same-day support.');
@@ -39,7 +39,7 @@ const PrinterScannerInstallation = () => {
   return (
     <div className="min-h-screen">
       <Navigation />
-      <main>
+      <main role="main">
         {/* Hero Section */}
         <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">
@@ -72,7 +72,7 @@ const PrinterScannerInstallation = () => {
           <div className="container mx-auto px-4">
             <div className="max-w-4xl mx-auto">
               <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">
                 <Card>
                   <CardHeader>
@@ -92,7 +92,7 @@ const PrinterScannerInstallation = () => {
                     </ul>
                   </CardContent>
                 </Card>
-                
+
                 <Card>
                   <CardHeader>
                     <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>
                   </CardContent>
                 </Card>
-                
+
                 <Card>
                   <CardHeader>
                     <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>
                   </CardContent>
                 </Card>
-                
+
                 <Card>
                   <CardHeader>
                     <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="max-w-4xl mx-auto">
               <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">
                 <Card className="text-center">
                   <CardHeader>
@@ -172,7 +172,7 @@ const PrinterScannerInstallation = () => {
                     <p className="text-sm">Evaluate your office layout, network setup, and device requirements.</p>
                   </CardContent>
                 </Card>
-                
+
                 <Card className="text-center">
                   <CardHeader>
                     <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>
                   </CardContent>
                 </Card>
-                
+
                 <Card className="text-center">
                   <CardHeader>
                     <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>
                   </CardContent>
                 </Card>
-                
+
                 <Card className="text-center">
                   <CardHeader>
                     <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>
                 </Card>
               </div>
-              
+
               <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>
                 <div className="grid md:grid-cols-2 gap-8">
@@ -274,7 +274,7 @@ const PrinterScannerInstallation = () => {
           <div className="container mx-auto px-4">
             <div className="max-w-4xl mx-auto">
               <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="bg-gray-50 p-6 rounded-lg text-center">
                   <h3 className="font-bold text-lg mb-4">Printer Brands</h3>
@@ -285,7 +285,7 @@ const PrinterScannerInstallation = () => {
                     <div>Kyocera • Sharp • Konica</div>
                   </div>
                 </div>
-                
+
                 <div className="bg-gray-50 p-6 rounded-lg text-center">
                   <h3 className="font-bold text-lg mb-4">Scanner Types</h3>
                   <div className="space-y-2 text-gray-700">
@@ -296,7 +296,7 @@ const PrinterScannerInstallation = () => {
                     <div>Photo Scanners</div>
                   </div>
                 </div>
-                
+
                 <div className="bg-gray-50 p-6 rounded-lg text-center">
                   <h3 className="font-bold text-lg mb-4">Connection Types</h3>
                   <div className="space-y-2 text-gray-700">
@@ -318,10 +318,10 @@ const PrinterScannerInstallation = () => {
             <div className="max-w-4xl mx-auto text-center">
               <h2 className="text-3xl font-bold mb-8">Corpus Christi's Office Device Specialists</h2>
               <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.
               </p>
-              
+
               <div className="grid md:grid-cols-3 gap-8 mb-12">
                 <div className="text-center">
                   <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>
               </div>
-              
+
               <div className="bg-white p-8 rounded-lg shadow-lg">
                 <h3 className="text-2xl font-bold mb-4">Serving the Entire Coastal Bend</h3>
                 <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.
                 </p>
                 <div className="flex flex-wrap justify-center gap-4">
@@ -362,10 +362,10 @@ const PrinterScannerInstallation = () => {
             <div className="max-w-4xl mx-auto text-center">
               <h2 className="text-3xl font-bold mb-6">Stop Wrestling with Office Devices</h2>
               <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.
               </p>
-              
+
               <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">
                   <Clock className="w-5 h-5 mr-2" />
@@ -375,7 +375,7 @@ const PrinterScannerInstallation = () => {
                   Call (361) 765-8400
                 </Button>
               </div>
-              
+
               <p className="text-indigo-200">
                 Free consultation • Same-day service • Local on-site support
               </p>
diff --git a/src/pages/Services.tsx b/src/pages/Services.tsx
index de12887..f118a19 100644
--- a/src/pages/Services.tsx
+++ b/src/pages/Services.tsx
@@ -3,11 +3,20 @@ import Footer from '@/components/Footer';
 import { Monitor, Wifi, Cloud, Shield, Database, Settings, CheckCircle } from 'lucide-react';
 import ScrollReveal from '@/components/ScrollReveal';
 import { useLayoutEffect, useRef } from 'react';
+import { useSEO } from '@/hooks/useSEO';
 
 const Services = () => {
   const pageRef = useRef<HTMLDivElement>(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(() => {
     // Dynamically import GSAP only when needed to reduce initial bundle size
     let ctx: any;
@@ -163,7 +172,7 @@ const Services = () => {
     <div ref={pageRef} className="min-h-screen">
       <Navigation />
 
-      <main>
+      <main role="main">
         {/* Hero section with image background */}
         <section className="relative h-screen flex items-center justify-center overflow-hidden">
           {/* Background image with parallax */}
@@ -174,7 +183,7 @@ const Services = () => {
               alt="Corpus Christi IT services data center with enterprise networking equipment and server infrastructure"
               className="w-full h-[110%] object-cover will-change-transform"
               loading="eager"
-              fetchpriority="high"
+              fetchPriority="high"
             />
           </div>
 
diff --git a/src/pages/VpnSetup.tsx b/src/pages/VpnSetup.tsx
index 567ef12..24b7146 100644
--- a/src/pages/VpnSetup.tsx
+++ b/src/pages/VpnSetup.tsx
@@ -9,27 +9,27 @@ import { Shield, Lock, Zap, CheckCircle, Users, Globe, Server, Smartphone } from
 const VpnSetup = () => {
   useEffect(() => {
     document.title = 'VPN Setup Corpus Christi | Business WireGuard Experts';
-    
+
     const metaDescription = document.querySelector('meta[name="description"]');
     if (metaDescription) {
       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"]');
     if (ogTitle) {
       ogTitle.setAttribute('content', 'Corpus Christi WireGuard VPN Setup—Fast, Secure for SMBs');
     }
-    
+
     const ogDescription = document.querySelector('meta[property="og:description"]');
     if (ogDescription) {
       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"]');
     if (twitterTitle) {
       twitterTitle.setAttribute('content', 'WireGuard VPN—Remote Work Corpus Christi');
     }
-    
+
     const twitterDescription = document.querySelector('meta[name="twitter:description"]');
     if (twitterDescription) {
       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 (
     <div className="min-h-screen">
       <Navigation />
-      <main>
+      <main role="main">
         {/* Hero Section */}
         <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">
@@ -72,7 +72,7 @@ const VpnSetup = () => {
           <div className="container mx-auto px-4">
             <div className="max-w-4xl mx-auto">
               <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">
                 <Card>
                   <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>
                   </CardContent>
                 </Card>
-                
+
                 <Card>
                   <CardHeader>
                     <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>
                   </CardContent>
                 </Card>
-                
+
                 <Card>
                   <CardHeader>
                     <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>
                   </CardContent>
                 </Card>
-                
+
                 <Card>
                   <CardHeader>
                     <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="max-w-4xl mx-auto">
               <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="text-center">
                   <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>
                   <p className="text-gray-600">Access your office network securely from home, client sites, or anywhere in the world.</p>
                 </div>
-                
+
                 <div className="text-center">
                   <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" />
@@ -148,7 +148,7 @@ const VpnSetup = () => {
                   <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>
                 </div>
-                
+
                 <div className="text-center">
                   <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" />
@@ -157,7 +157,7 @@ const VpnSetup = () => {
                   <p className="text-gray-600">One VPN solution for all your devices—laptops, phones, tablets, and desktops.</p>
                 </div>
               </div>
-              
+
               <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>
                 <div className="overflow-x-auto">
@@ -208,7 +208,7 @@ const VpnSetup = () => {
           <div className="container mx-auto px-4">
             <div className="max-w-4xl mx-auto">
               <h2 className="text-3xl font-bold text-center mb-12">Fast, Reliable VPN Deployment</h2>
-              
+
               <div className="grid md:grid-cols-4 gap-8">
                 <Card className="text-center">
                   <CardHeader>
@@ -221,7 +221,7 @@ const VpnSetup = () => {
                     <p className="text-sm">Evaluate your network infrastructure and remote access needs.</p>
                   </CardContent>
                 </Card>
-                
+
                 <Card className="text-center">
                   <CardHeader>
                     <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>
                   </CardContent>
                 </Card>
-                
+
                 <Card className="text-center">
                   <CardHeader>
                     <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>
                   </CardContent>
                 </Card>
-                
+
                 <Card className="text-center">
                   <CardHeader>
                     <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">
               <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">
-                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.
               </p>
-              
+
               <div className="grid md:grid-cols-2 gap-8 mb-12">
                 <div className="bg-white p-6 rounded-lg shadow">
                   <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>
                   </ul>
                 </div>
-                
+
                 <div className="bg-white p-6 rounded-lg shadow">
                   <h3 className="text-xl font-bold mb-4 text-green-600">WireGuard Specialization</h3>
                   <ul className="text-left space-y-2 text-gray-700">
@@ -293,7 +293,7 @@ const VpnSetup = () => {
                   </ul>
                 </div>
               </div>
-              
+
               <div className="bg-white p-8 rounded-lg shadow-lg">
                 <h3 className="text-2xl font-bold mb-4">Areas We Serve</h3>
                 <div className="flex flex-wrap justify-center gap-4">
@@ -315,10 +315,10 @@ const VpnSetup = () => {
             <div className="max-w-4xl mx-auto text-center">
               <h2 className="text-3xl font-bold mb-6">Secure Your Remote Work Today</h2>
               <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.
               </p>
-              
+
               <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">
                   <Lock className="w-5 h-5 mr-2" />
@@ -328,7 +328,7 @@ const VpnSetup = () => {
                   Call (361) 765-8400
                 </Button>
               </div>
-              
+
               <p className="text-green-200">
                 Free consultation • Same-day setup available • Local support team
               </p>
diff --git a/src/pages/WebServices.tsx b/src/pages/WebServices.tsx
index ff62634..b478dae 100644
--- a/src/pages/WebServices.tsx
+++ b/src/pages/WebServices.tsx
@@ -9,27 +9,27 @@ import { Globe, Mail, Palette, CheckCircle, Smartphone, Search, TrendingUp, User
 const WebServices = () => {
   useEffect(() => {
     document.title = 'Web Services Corpus Christi | Bay Area Affiliates';
-    
+
     const metaDescription = document.querySelector('meta[name="description"]');
     if (metaDescription) {
       metaDescription.setAttribute('content', 'Elevate your local business presence—sites, domains, email.');
     }
-    
+
     const ogTitle = document.querySelector('meta[property="og:title"]');
     if (ogTitle) {
       ogTitle.setAttribute('content', 'Web Services Corpus Christi—Professional Business Websites');
     }
-    
+
     const ogDescription = document.querySelector('meta[property="og:description"]');
     if (ogDescription) {
       ogDescription.setAttribute('content', 'Elevate your local business presence—sites, domains, email.');
     }
-    
+
     const twitterTitle = document.querySelector('meta[name="twitter:title"]');
     if (twitterTitle) {
       twitterTitle.setAttribute('content', 'Web Design Domain Email Portland Coastal Bend SMB');
     }
-    
+
     const twitterDescription = document.querySelector('meta[name="twitter:description"]');
     if (twitterDescription) {
       twitterDescription.setAttribute('content', 'Elevate your local business presence—sites, domains, email.');
@@ -39,7 +39,7 @@ const WebServices = () => {
   return (
     <div className="min-h-screen">
       <Navigation />
-      <main>
+      <main role="main">
         {/* Hero Section */}
         <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">
@@ -72,7 +72,7 @@ const WebServices = () => {
           <div className="container mx-auto px-4">
             <div className="max-w-4xl mx-auto">
               <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">
                 <Card>
                   <CardHeader>
@@ -93,7 +93,7 @@ const WebServices = () => {
                     </ul>
                   </CardContent>
                 </Card>
-                
+
                 <Card>
                   <CardHeader>
                     <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>
                   </CardContent>
                 </Card>
-                
+
                 <Card>
                   <CardHeader>
                     <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>
                   </CardContent>
                 </Card>
-                
+
                 <Card>
                   <CardHeader>
                     <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="max-w-4xl mx-auto">
               <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="bg-white p-6 rounded-lg shadow border-l-4 border-emerald-500">
                   <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>
                 </div>
-                
+
                 <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>
                   <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>
                 </div>
-                
+
                 <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>
                   <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 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>
                 <div className="grid md:grid-cols-2 gap-8">
@@ -273,7 +273,7 @@ const WebServices = () => {
           <div className="container mx-auto px-4">
             <div className="max-w-4xl mx-auto">
               <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="text-center">
                   <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>
                   <p className="text-gray-600">Appear at the top of Google searches when Corpus Christi customers look for your services.</p>
                 </div>
-                
+
                 <div className="text-center">
                   <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" />
@@ -290,7 +290,7 @@ const WebServices = () => {
                   <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>
                 </div>
-                
+
                 <div className="text-center">
                   <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" />
@@ -299,7 +299,7 @@ const WebServices = () => {
                   <p className="text-gray-600">Track website visitors, leads, and customer inquiries with detailed analytics reporting.</p>
                 </div>
               </div>
-              
+
               <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>
                 <div className="grid md:grid-cols-2 gap-8">
@@ -314,7 +314,7 @@ const WebServices = () => {
                 </div>
                 <div className="mt-6 text-center">
                   <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."
                   </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="max-w-4xl mx-auto">
               <h2 className="text-3xl font-bold text-center mb-12">Professional Web Development Process</h2>
-              
+
               <div className="grid md:grid-cols-4 gap-8">
                 <Card className="text-center">
                   <CardHeader>
@@ -342,7 +342,7 @@ const WebServices = () => {
                     <p className="text-sm">In-person consultation to understand your business goals and target customers.</p>
                   </CardContent>
                 </Card>
-                
+
                 <Card className="text-center">
                   <CardHeader>
                     <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>
                   </CardContent>
                 </Card>
-                
+
                 <Card className="text-center">
                   <CardHeader>
                     <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>
                   </CardContent>
                 </Card>
-                
+
                 <Card className="text-center">
                   <CardHeader>
                     <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">
               <h2 className="text-3xl font-bold mb-8">Serving Coastal Bend Businesses Since 1999</h2>
               <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.
               </p>
-              
+
               <div className="grid md:grid-cols-4 gap-8 mb-12">
                 <div className="text-center">
                   <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>
               </div>
-              
+
               <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>
                 <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.
                 </p>
                 <div className="flex flex-wrap justify-center gap-4">
@@ -437,10 +437,10 @@ const WebServices = () => {
             <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>
               <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.
               </p>
-              
+
               <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">
                   <Globe className="w-5 h-5 mr-2" />
@@ -450,7 +450,7 @@ const WebServices = () => {
                   Call (361) 765-8400
                 </Button>
               </div>
-              
+
               <p className="text-emerald-200">
                 Free consultation • Local market expertise • Ongoing support • Mobile-first design
               </p>
diff --git a/src/pages/Windows11Transition.tsx b/src/pages/Windows11Transition.tsx
index b6048d4..c673545 100644
--- a/src/pages/Windows11Transition.tsx
+++ b/src/pages/Windows11Transition.tsx
@@ -9,27 +9,27 @@ import { Clock, Shield, Zap, CheckCircle, AlertTriangle } from 'lucide-react';
 const Windows11Transition = () => {
   useEffect(() => {
     document.title = 'Windows 11 Upgrade Corpus Christi | Bay Area Affiliates';
-    
+
     const metaDescription = document.querySelector('meta[name="description"]');
     if (metaDescription) {
       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"]');
     if (ogTitle) {
       ogTitle.setAttribute('content', 'Windows 11 Upgrade: Secure Your Business Before Deadline');
     }
-    
+
     const ogDescription = document.querySelector('meta[property="og:description"]');
     if (ogDescription) {
       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"]');
     if (twitterTitle) {
       twitterTitle.setAttribute('content', 'Corpus Christi Windows 11 Upgrade—Urgent for Business Security');
     }
-    
+
     const twitterDescription = document.querySelector('meta[name="twitter:description"]');
     if (twitterDescription) {
       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 (
     <div className="min-h-screen">
       <Navigation />
-      <main>
+      <main role="main">
         {/* Hero Section */}
         <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">
@@ -77,11 +77,11 @@ const Windows11Transition = () => {
                   <h2 className="text-2xl font-bold text-red-800">Windows 10 Support Ends Oct 14, 2025</h2>
                 </div>
                 <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.
                 </p>
               </div>
-              
+
               <div className="grid md:grid-cols-2 gap-8">
                 <Card>
                   <CardHeader>
@@ -106,7 +106,7 @@ const Windows11Transition = () => {
                     </div>
                   </CardContent>
                 </Card>
-                
+
                 <Card>
                   <CardHeader>
                     <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="max-w-4xl mx-auto">
               <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">
                 <Card className="text-center">
                   <CardHeader>
@@ -153,7 +153,7 @@ const Windows11Transition = () => {
                     <p>We evaluate your current hardware and software for Windows 11 compatibility.</p>
                   </CardContent>
                 </Card>
-                
+
                 <Card className="text-center">
                   <CardHeader>
                     <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>
                   </CardContent>
                 </Card>
-                
+
                 <Card className="text-center">
                   <CardHeader>
                     <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>
                 </Card>
               </div>
-              
+
               <div className="bg-blue-50 p-8 rounded-lg">
                 <h3 className="text-2xl font-bold mb-4">Enhanced Security & Features</h3>
                 <div className="grid md:grid-cols-2 gap-6">
@@ -212,10 +212,10 @@ const Windows11Transition = () => {
             <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>
               <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.
               </p>
-              
+
               <div className="grid md:grid-cols-3 gap-8 mb-12">
                 <div className="text-center">
                   <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>
               </div>
-              
+
               <div className="bg-white p-8 rounded-lg shadow-lg">
                 <h3 className="text-2xl font-bold mb-4">Serving the Entire Coastal Bend</h3>
                 <div className="flex flex-wrap justify-center gap-4">
@@ -254,7 +254,7 @@ const Windows11Transition = () => {
               <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.
               </p>
-              
+
               <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">
                   <Clock className="w-5 h-5 mr-2" />
@@ -264,7 +264,7 @@ const Windows11Transition = () => {
                   Call (361) 765-8400
                 </Button>
               </div>
-              
+
               <p className="text-blue-200">
                 Free consultation • Same-day response • Local experts
               </p>