diff --git a/App.tsx b/App.tsx
index 48f819c..dff70be 100644
--- a/App.tsx
+++ b/App.tsx
@@ -12,6 +12,10 @@ import AboutPage from './src/pages/AboutPage';
 import ServicesPage from './src/pages/ServicesPage';
 import BlogPage from './src/pages/BlogPage';
 import ContactPage from './src/pages/ContactPage';
+import LocationPage from './src/pages/LocationPage';
+import ServicePage from './src/pages/ServicePage';
+import BlogPostPage from './src/pages/BlogPostPage';
+import { locationData, serviceData, blogPostData } from './src/data/seoData';
 
 // Register GSAP plugins globally
 gsap.registerPlugin(ScrollTrigger, ScrollToPlugin);
@@ -69,6 +73,33 @@ const AppContent: React.FC = () => {
           <Route path="/services" element={<ServicesPage />} />
           <Route path="/blog" element={<BlogPage />} />
           <Route path="/contact" element={<ContactPage />} />
+
+          {/* SEO Location Pages */}
+          {locationData.map((data) => (
+            <Route
+              key={data.slug}
+              path={`/${data.slug}`}
+              element={<LocationPage data={data} />}
+            />
+          ))}
+
+          {/* SEO Service Pages */}
+          {serviceData.map((data) => (
+            <Route
+              key={data.slug}
+              path={`/${data.slug}`}
+              element={<ServicePage data={data} />}
+            />
+          ))}
+
+          {/* Authority Blog Posts */}
+          {blogPostData.map((data) => (
+            <Route
+              key={data.slug}
+              path={`/${data.slug}`}
+              element={<BlogPostPage data={data} />}
+            />
+          ))}
         </Routes>
       </main>
       <Footer />
diff --git a/components/AreasWeServe.tsx b/components/AreasWeServe.tsx
new file mode 100644
index 0000000..c9a4f25
--- /dev/null
+++ b/components/AreasWeServe.tsx
@@ -0,0 +1,43 @@
+
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { locationData } from '../src/data/seoData';
+
+const AreasWeServe: React.FC = () => {
+    return (
+        <section className="py-24 px-6 bg-gray-50 dark:bg-white/5 mx-auto text-center border-t border-gray-200 dark:border-white/10">
+            <div className="max-w-4xl mx-auto">
+                <h2 className="font-display text-3xl md:text-4xl font-bold mb-6 text-gray-900 dark:text-white">
+                    Areas We Serve – Local IT Support Across the Coastal Bend
+                </h2>
+                <p className="text-xl text-gray-600 dark:text-gray-300 mb-12 leading-relaxed">
+                    We provide professional IT support and IT services for businesses throughout Corpus Christi and the surrounding Coastal Bend area.
+                    Our team supports local companies with business IT support, outsourced IT services, and help desk solutions, delivered remotely or on-site when needed.
+                </p>
+
+                <div className="grid grid-cols-2 md:grid-cols-5 gap-4 mb-12">
+                    {locationData.map((loc) => (
+                        <Link
+                            key={loc.slug}
+                            to={`/${loc.slug}`}
+                            className="p-4 bg-white dark:bg-white/10 rounded-lg shadow-sm hover:shadow-md transition-all text-gray-800 dark:text-gray-200 font-medium hover:text-black dark:hover:text-white"
+                        >
+                            {loc.city}
+                        </Link>
+                    ))}
+                </div>
+
+                <p className="text-lg text-gray-600 dark:text-gray-400">
+                    Not sure if your location is covered? <Link to="/contact" className="underline hover:text-black dark:hover:text-white transition-colors">Contact us today</Link> to discuss your IT needs.
+                </p>
+                <div className="mt-6">
+                    <Link to="/it-support-corpus-christi" className="text-sm text-gray-500 hover:text-gray-800 dark:hover:text-gray-300 transition-colors">
+                        Get local IT support in Corpus Christi and nearby areas
+                    </Link>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default AreasWeServe;
diff --git a/components/CTA.tsx b/components/CTA.tsx
index a694357..b262c67 100644
--- a/components/CTA.tsx
+++ b/components/CTA.tsx
@@ -1,74 +1,74 @@
-import React from 'react';
-import { motion } from 'framer-motion';
-import { Link } from 'react-router-dom';
-
-const CTA: React.FC = () => {
-    return (
-        <section className="py-24 px-6 bg-white dark:bg-[#0f0f0f] border-t border-gray-100 dark:border-white/5 bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(0,0,0,0.05),rgba(0,0,0,0))] dark:bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(255,255,255,0.05),rgba(255,255,255,0))]">
-            <div className="max-w-4xl mx-auto text-center">
-                <motion.h2
-                    initial={{ opacity: 0, y: 20 }}
-                    whileInView={{ opacity: 1, y: 0 }}
-                    viewport={{ once: true }}
-                    className="font-display text-4xl md:text-5xl font-bold mb-6 text-gray-900 dark:text-white"
-                >
-                    Ready for <span className="text-gray-400 dark:text-gray-500">reliable IT?</span>
-                </motion.h2>
-                <motion.p
-                    initial={{ opacity: 0, y: 20 }}
-                    whileInView={{ opacity: 1, y: 0 }}
-                    viewport={{ once: true }}
-                    transition={{ delay: 0.1 }}
-                    className="text-xl text-gray-600 dark:text-gray-300 mb-12 leading-relaxed"
-                >
-                    Join 150+ Coastal Bend businesses that trust us with their technology. Get started with a free 20-minute assessment.
-                </motion.p>
-
-                <motion.div
-                    initial={{ opacity: 0, y: 20 }}
-                    whileInView={{ opacity: 1, y: 0 }}
-                    viewport={{ once: true }}
-                    transition={{ delay: 0.2 }}
-                    className="flex flex-col sm:flex-row gap-4 justify-center items-center"
-                >
-                    <Link
-                        to="/contact"
-                        className="px-8 py-4 bg-black dark:bg-white text-white dark:text-black rounded-full font-medium transition-all hover:scale-105 shadow-lg w-full sm:w-auto"
-                    >
-                        Book a 20-minute assessment
-                    </Link>
-                    <Link
-                        to="/contact"
-                        className="px-8 py-4 bg-gray-100 dark:bg-white/10 text-gray-900 dark:text-white rounded-full font-medium transition-all hover:bg-gray-200 dark:hover:bg-white/20 w-full sm:w-auto"
-                    >
-                        Send a message
-                    </Link>
-                </motion.div>
-
-                <motion.div
-                    initial={{ opacity: 0 }}
-                    whileInView={{ opacity: 1 }}
-                    viewport={{ once: true }}
-                    transition={{ delay: 0.3 }}
-                    className="mt-16 grid md:grid-cols-3 gap-8 text-left"
-                >
-                    <div className="p-6 rounded-2xl bg-gray-50 dark:bg-white/5 border border-gray-100 dark:border-white/10">
-                        <h3 className="font-bold text-lg mb-2 text-gray-900 dark:text-white">How quickly can you start?</h3>
-                        <p className="text-gray-600 dark:text-gray-400 text-sm">Most assessments can begin within 48 hours of contact.</p>
-                    </div>
-                    <div className="p-6 rounded-2xl bg-gray-50 dark:bg-white/5 border border-gray-100 dark:border-white/10">
-                        <h3 className="font-bold text-lg mb-2 text-gray-900 dark:text-white">How do you price services?</h3>
-                        <p className="text-gray-600 dark:text-gray-400 text-sm">Transparent monthly pricing based on devices and services needed.</p>
-                    </div>
-                    <div className="p-6 rounded-2xl bg-gray-50 dark:bg-white/5 border border-gray-100 dark:border-white/10">
-                        <h3 className="font-bold text-lg mb-2 text-gray-900 dark:text-white">What's included in support?</h3>
-                        <p className="text-gray-600 dark:text-gray-400 text-sm">24/7 monitoring, helpdesk, proactive maintenance, and SLA guarantees.</p>
-                    </div>
-                </motion.div>
-
-            </div>
-        </section>
-    );
-};
-
-export default CTA;
+import React from 'react';
+import { motion } from 'framer-motion';
+import { Link } from 'react-router-dom';
+
+const CTA: React.FC = () => {
+    return (
+        <section className="py-24 px-6 bg-white dark:bg-[#0f0f0f] border-t border-gray-100 dark:border-white/5 bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(0,0,0,0.05),rgba(0,0,0,0))] dark:bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(255,255,255,0.05),rgba(255,255,255,0))]">
+            <div className="max-w-4xl mx-auto text-center">
+                <motion.h2
+                    initial={{ opacity: 0, y: 20 }}
+                    whileInView={{ opacity: 1, y: 0 }}
+                    viewport={{ once: true }}
+                    className="font-display text-4xl md:text-5xl font-bold mb-6 text-gray-900 dark:text-white"
+                >
+                    Ready for <span className="text-gray-400 dark:text-gray-500">reliable IT?</span>
+                </motion.h2>
+                <motion.p
+                    initial={{ opacity: 0, y: 20 }}
+                    whileInView={{ opacity: 1, y: 0 }}
+                    viewport={{ once: true }}
+                    transition={{ delay: 0.1 }}
+                    className="text-xl text-gray-600 dark:text-gray-300 mb-12 leading-relaxed"
+                >
+                    Join 150+ Coastal Bend businesses that trust us with their technology. Get started with a free 20-minute assessment.
+                </motion.p>
+
+                <motion.div
+                    initial={{ opacity: 0, y: 20 }}
+                    whileInView={{ opacity: 1, y: 0 }}
+                    viewport={{ once: true }}
+                    transition={{ delay: 0.2 }}
+                    className="flex flex-col sm:flex-row gap-4 justify-center items-center"
+                >
+                    <Link
+                        to="/contact"
+                        className="px-8 py-4 bg-black dark:bg-white text-white dark:text-black rounded-full font-medium transition-all hover:scale-105 shadow-lg w-full sm:w-auto"
+                    >
+                        Book a 20-minute assessment
+                    </Link>
+                    <Link
+                        to="/contact"
+                        className="px-8 py-4 bg-gray-100 dark:bg-white/10 text-gray-900 dark:text-white rounded-full font-medium transition-all hover:bg-gray-200 dark:hover:bg-white/20 w-full sm:w-auto"
+                    >
+                        Send a message
+                    </Link>
+                </motion.div>
+
+                <motion.div
+                    initial={{ opacity: 0 }}
+                    whileInView={{ opacity: 1 }}
+                    viewport={{ once: true }}
+                    transition={{ delay: 0.3 }}
+                    className="mt-16 grid md:grid-cols-3 gap-8 text-left"
+                >
+                    <div className="p-6 rounded-2xl bg-gray-50 dark:bg-white/5 border border-gray-100 dark:border-white/10">
+                        <h3 className="font-bold text-lg mb-2 text-gray-900 dark:text-white">How quickly can you start?</h3>
+                        <p className="text-gray-600 dark:text-gray-400 text-sm">Most assessments can begin within 48 hours of contact.</p>
+                    </div>
+                    <div className="p-6 rounded-2xl bg-gray-50 dark:bg-white/5 border border-gray-100 dark:border-white/10">
+                        <h3 className="font-bold text-lg mb-2 text-gray-900 dark:text-white">How do you price services?</h3>
+                        <p className="text-gray-600 dark:text-gray-400 text-sm">Transparent monthly pricing based on devices and services needed.</p>
+                    </div>
+                    <div className="p-6 rounded-2xl bg-gray-50 dark:bg-white/5 border border-gray-100 dark:border-white/10">
+                        <h3 className="font-bold text-lg mb-2 text-gray-900 dark:text-white">What's included in support?</h3>
+                        <p className="text-gray-600 dark:text-gray-400 text-sm">24/7 monitoring, helpdesk, proactive maintenance, and SLA guarantees.</p>
+                    </div>
+                </motion.div>
+
+            </div>
+        </section>
+    );
+};
+
+export default CTA;
diff --git a/components/Counter.tsx b/components/Counter.tsx
index 5635a65..8044794 100644
--- a/components/Counter.tsx
+++ b/components/Counter.tsx
@@ -1,28 +1,28 @@
-import React, { useEffect, useRef } from 'react';
-import { motion, useInView, useSpring, useTransform } from 'framer-motion';
-
-interface CounterProps {
-    value: number;
-}
-
-const Counter: React.FC<CounterProps> = ({ value }) => {
-    const ref = useRef(null);
-    const isInView = useInView(ref, { once: true, margin: "-20%" });
-    // Using slow/heavy physics as requested for premium feel
-    const spring = useSpring(0, { mass: 3, stiffness: 75, damping: 30 });
-
-    const display = useTransform(spring, (current) =>
-        // formatting: if decimal exists in target, show 1 decimal, else integer
-        value % 1 !== 0 ? current.toFixed(1) : Math.round(current).toLocaleString()
-    );
-
-    useEffect(() => {
-        if (isInView) {
-            spring.set(value);
-        }
-    }, [isInView, value, spring]);
-
-    return <motion.span ref={ref}>{display}</motion.span>;
-};
-
-export default Counter;
+import React, { useEffect, useRef } from 'react';
+import { motion, useInView, useSpring, useTransform } from 'framer-motion';
+
+interface CounterProps {
+    value: number;
+}
+
+const Counter: React.FC<CounterProps> = ({ value }) => {
+    const ref = useRef(null);
+    const isInView = useInView(ref, { once: true, margin: "-20%" });
+    // Using slow/heavy physics as requested for premium feel
+    const spring = useSpring(0, { mass: 3, stiffness: 75, damping: 30 });
+
+    const display = useTransform(spring, (current) =>
+        // formatting: if decimal exists in target, show 1 decimal, else integer
+        value % 1 !== 0 ? current.toFixed(1) : Math.round(current).toLocaleString()
+    );
+
+    useEffect(() => {
+        if (isInView) {
+            spring.set(value);
+        }
+    }, [isInView, value, spring]);
+
+    return <motion.span ref={ref}>{display}</motion.span>;
+};
+
+export default Counter;
diff --git a/components/FAQ.tsx b/components/FAQ.tsx
new file mode 100644
index 0000000..971ff74
--- /dev/null
+++ b/components/FAQ.tsx
@@ -0,0 +1,65 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { FAQItem } from '../src/data/seoData';
+
+interface FAQProps {
+    items: FAQItem[];
+}
+
+const FAQ: React.FC<FAQProps> = ({ items }) => {
+    if (!items || items.length === 0) return null;
+
+    return (
+        <section className="py-24 px-6 bg-white dark:bg-black">
+            <div className="max-w-3xl mx-auto">
+                <motion.div
+                    initial={{ opacity: 0, y: 20 }}
+                    whileInView={{ opacity: 1, y: 0 }}
+                    viewport={{ once: true }}
+                    className="text-center mb-16"
+                >
+                    <h2 className="font-display text-3xl md:text-4xl font-bold mb-4 text-gray-900 dark:text-white">
+                        Frequently Asked Questions
+                    </h2>
+                    <p className="text-gray-600 dark:text-gray-400">
+                        Common questions about our IT services.
+                    </p>
+                </motion.div>
+
+                <div className="space-y-6">
+                    {items.map((faq, index) => (
+                        <motion.div
+                            key={index}
+                            initial={{ opacity: 0, y: 10 }}
+                            whileInView={{ opacity: 1, y: 0 }}
+                            viewport={{ once: true }}
+                            transition={{ delay: index * 0.1 }}
+                            className="p-6 rounded-2xl bg-gray-50 dark:bg-white/5 border border-gray-100 dark:border-white/10"
+                        >
+                            <h3 className="font-bold text-lg mb-2 text-gray-900 dark:text-white">{faq.question}</h3>
+                            <p className="text-gray-600 dark:text-gray-300">{faq.answer}</p>
+                        </motion.div>
+                    ))}
+                </div>
+            </div>
+
+            {/* JSON-LD for FAQ Page */}
+            <script type="application/ld+json" dangerouslySetInnerHTML={{
+                __html: JSON.stringify({
+                    "@context": "https://schema.org",
+                    "@type": "FAQPage",
+                    "mainEntity": items.map(faq => ({
+                        "@type": "Question",
+                        "name": faq.question,
+                        "acceptedAnswer": {
+                            "@type": "Answer",
+                            "text": faq.answer
+                        }
+                    }))
+                })
+            }} />
+        </section>
+    );
+};
+
+export default FAQ;
diff --git a/components/SEO.tsx b/components/SEO.tsx
new file mode 100644
index 0000000..2bbcd89
--- /dev/null
+++ b/components/SEO.tsx
@@ -0,0 +1,68 @@
+
+import React, { useEffect } from 'react';
+
+interface SEOProps {
+    title: string;
+    description: string;
+    keywords?: string[];
+    canonicalUrl?: string;
+    schema?: object; // JSON-LD schema
+}
+
+const SEO: React.FC<SEOProps> = ({ title, description, keywords, canonicalUrl, schema }) => {
+    useEffect(() => {
+        // Update Title
+        document.title = title;
+
+        // Helper to set meta tag
+        const setMetaTag = (name: string, content: string) => {
+            let element = document.querySelector(`meta[name="${name}"]`);
+            if (!element) {
+                element = document.createElement('meta');
+                element.setAttribute('name', name);
+                document.head.appendChild(element);
+            }
+            element.setAttribute('content', content);
+        };
+
+        // Update Meta Description
+        setMetaTag('description', description);
+
+        // Update Keywords
+        if (keywords && keywords.length > 0) {
+            setMetaTag('keywords', keywords.join(', '));
+        }
+
+        // Update Canonical
+        if (canonicalUrl) {
+            let link = document.querySelector('link[rel="canonical"]');
+            if (!link) {
+                link = document.createElement('link');
+                link.setAttribute('rel', 'canonical');
+                document.head.appendChild(link);
+            }
+            link.setAttribute('href', canonicalUrl);
+        }
+
+        // Inject Schema
+        if (schema) {
+            const scriptId = 'seo-schema-script';
+            let script = document.getElementById(scriptId);
+            if (!script) {
+                script = document.createElement('script');
+                script.id = scriptId;
+                script.setAttribute('type', 'application/ld+json');
+                document.head.appendChild(script);
+            }
+            script.textContent = JSON.stringify(schema);
+        }
+
+        // Cleanup function not strictly necessary for single page app navigation 
+        // unless we want to remove specific tags on unmount, but usually we just overwrite them.
+
+    }, [title, description, keywords, canonicalUrl, schema]);
+
+    return null;
+};
+
+export default SEO;
diff --git a/components/Services.tsx b/components/Services.tsx
index 794c297..807baae 100644
--- a/components/Services.tsx
+++ b/components/Services.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useRef, useLayoutEffect } from 'react';
+import React, { useState, useRef, useLayoutEffect, useMemo } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import gsap from 'gsap';
 import { ScrollTrigger } from 'gsap/ScrollTrigger';
@@ -69,45 +69,68 @@ const servicesData = [
     description: 'Selection, setup, and maintenance of Network Attached Storage solutions to provide scalable and reliable data storage.',
     icon: 'storage',
     image: '/assets/services/nas-storage.png'
+  },
+  {
+    id: 9,
+    category: 'IT Infrastructure',
+    title: 'Business IT Support',
+    description: 'Comprehensive IT support for businesses, including help desk, maintenance, and strategic planning.',
+    icon: 'business_center',
+    image: '/assets/services/business-it.png'
+  },
+  {
+    id: 10,
+    category: 'IT Infrastructure',
+    title: 'IT Help Desk',
+    description: 'Fast and reliable help desk support for employees, resolving technical issues remotely or on-site.',
+    icon: 'support_agent',
+    image: '/assets/services/help-desk.png'
+  },
+  {
+    id: 11,
+    category: 'IT Infrastructure',
+    title: 'Managed IT Services',
+    description: 'Proactive monitoring, security, and management of your entire IT infrastructure for a fixed monthly fee.',
+    icon: 'admin_panel_settings',
+    image: '/assets/services/managed-it.png'
   }
 ];
 
 const categories = ['All', 'IT Infrastructure', 'Web Services', 'Security', 'Networking'];
 
-const Services: React.FC<{ preview?: boolean }> = ({ preview = false }) => {
+interface ServicesProps {
+  preview?: boolean;
+  featuredIds?: number[];
+}
+
+const Services: React.FC<ServicesProps> = ({ preview = false, featuredIds }) => {
   const [activeCategory, setActiveCategory] = useState('All');
+  const [showAll, setShowAll] = useState(false);
   const containerRef = useRef<HTMLDivElement>(null);
-  const imagesRef = useRef<(HTMLDivElement | null)[]>([]);
 
-  // Reset refs on render to handle filtering updates
-  imagesRef.current = [];
+  // Determine if we should be in "preview mode" (showing only a subset)
+  // This applies if preview is true OR if featuredIds are provided and we haven't clicked "Show More"
+  const isRestrictedView = (preview || featuredIds) && !showAll;
 
-  const filteredServices = activeCategory === 'All'
+  // Filter services based on category first (unless in restricted view with specific IDs, where we might want to ignore category or just show the specific ones)
+  const filteredByCategory = activeCategory === 'All'
     ? servicesData
     : servicesData.filter(s => s.category === activeCategory || (activeCategory === 'Web Development' && s.category === 'Security'));
 
-  const displayedServices = preview ? servicesData.slice(0, 3) : filteredServices;
-
-  useLayoutEffect(() => {
-    const ctx = gsap.context(() => {
-      imagesRef.current.forEach((imgWrapper) => {
-        if (!imgWrapper) return;
-
-        gsap.to(imgWrapper, {
-          yPercent: 30,
-          ease: "none",
-          scrollTrigger: {
-            trigger: imgWrapper.closest('.group'),
-            start: "top bottom",
-            end: "bottom top",
-            scrub: true
-          }
-        });
-      });
-    }, containerRef);
-
-    return () => ctx.revert();
-  }, [filteredServices]);
+  const displayedServices = useMemo(() => {
+    if (isRestrictedView) {
+      if (featuredIds && featuredIds.length > 0) {
+        // Sort the services to match the order of featuredIds
+        return featuredIds
+          .map(id => servicesData.find(s => s.id === id))
+          .filter((s): s is typeof servicesData[0] => s !== undefined);
+      }
+      // Fallback to first 3 if no IDs but preview is true
+      return servicesData.slice(0, 3);
+    }
+    // Show all (filtered by category)
+    return filteredByCategory;
+  }, [isRestrictedView, featuredIds, filteredByCategory]);
 
   return (
     <motion.section
@@ -127,32 +150,35 @@ const Services: React.FC<{ preview?: boolean }> = ({ preview = false }) => {
           </h2>
         </div>
 
-        <div className="flex gap-6 mb-12 border-b border-gray-200 dark:border-white/10 text-sm font-medium overflow-x-auto pb-2 no-scrollbar">
-          {categories.map((cat) => (
-            <button
-              key={cat}
-              onClick={() => setActiveCategory(cat)}
-              className={`pb-2 whitespace-nowrap transition-colors relative ${activeCategory === cat
-                ? 'text-gray-900 dark:text-white'
-                : 'text-gray-500 dark:text-gray-500 hover:text-gray-800 dark:hover:text-gray-300'
-                }`}
-            >
-              {cat}
-              {activeCategory === cat && (
-                <motion.div
-                  layoutId="activeTab"
-                  className="absolute bottom-0 left-0 right-0 h-0.5 bg-black dark:bg-white"
-                />
-              )}
-            </button>
-          ))}
-        </div>
+        {/* Categories - Hide in restricted view to keep it clean, or keep it? User said "mach nur das 3 services angezeigt werden". usually categories are for the full list. */}
+        {!isRestrictedView && (
+          <div className="flex gap-6 mb-12 border-b border-gray-200 dark:border-white/10 text-sm font-medium overflow-x-auto pb-2 no-scrollbar">
+            {categories.map((cat) => (
+              <button
+                key={cat}
+                onClick={() => setActiveCategory(cat)}
+                className={`pb-2 whitespace-nowrap transition-colors relative ${activeCategory === cat
+                  ? 'text-gray-900 dark:text-white'
+                  : 'text-gray-500 dark:text-gray-500 hover:text-gray-800 dark:hover:text-gray-300'
+                  }`}
+              >
+                {cat}
+                {activeCategory === cat && (
+                  <motion.div
+                    layoutId="activeTab"
+                    className="absolute bottom-0 left-0 right-0 h-0.5 bg-black dark:bg-white"
+                  />
+                )}
+              </button>
+            ))}
+          </div>
+        )}
 
         <div
           className="grid grid-cols-1 md:grid-cols-3 gap-6"
         >
           <AnimatePresence mode="popLayout">
-            {filteredServices.map((service, index) => (
+            {displayedServices.map((service) => (
               <motion.div
                 key={service.id}
                 layout
@@ -164,34 +190,28 @@ const Services: React.FC<{ preview?: boolean }> = ({ preview = false }) => {
                 className="group relative bg-gray-50 dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-xl overflow-hidden hover:border-gray-300 dark:hover:border-white/30 hover:shadow-2xl transition-all duration-300"
               >
                 {/* Image Container */}
-                <div className="h-64 bg-gray-200 dark:bg-black/40 overflow-hidden relative">
-                  {/* Parallax Wrapper */}
-                  <div
-                    ref={el => { if (el) imagesRef.current.push(el); }}
-                    className="w-full h-[140%] -mt-[20%]"
-                  >
-                    <img
-                      src={service.image}
-                      alt={service.title}
-                      className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110 opacity-100"
-                    />
-                  </div>
+                <div className="h-40 bg-gray-200 dark:bg-black/40 overflow-hidden relative">
+                  <img
+                    src={service.image}
+                    alt={service.title}
+                    className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110 opacity-100"
+                  />
                   <div className="absolute inset-0 bg-gradient-to-t from-gray-50 dark:from-[#161616] to-transparent pointer-events-none"></div>
                 </div>
 
-                <div className="p-6 relative">
+                <div className="p-4 relative">
                   <motion.div
-                    className="w-10 h-10 rounded-full bg-white dark:bg-white/10 flex items-center justify-center mb-4 border border-gray-200 dark:border-white/10"
+                    className="w-8 h-8 rounded-full bg-white dark:bg-white/10 flex items-center justify-center mb-3 border border-gray-200 dark:border-white/10"
                     whileHover={{ rotate: 360, backgroundColor: "#171717", color: "#ffffff", borderColor: "#171717" }}
                     transition={{ duration: 0.5 }}
                   >
                     <span className="material-symbols-outlined text-sm text-gray-900 dark:text-white group-hover:text-white">{service.icon}</span>
                   </motion.div>
-                  <h3 className="font-display text-xl font-bold text-gray-900 dark:text-white mb-2">{service.title}</h3>
-                  <p className="text-sm text-gray-600 dark:text-gray-400 leading-relaxed mb-4">
+                  <h3 className="font-display text-lg font-bold text-gray-900 dark:text-white mb-2">{service.title}</h3>
+                  <p className="text-sm text-gray-600 dark:text-gray-400 leading-relaxed mb-3">
                     {service.description}
                   </p>
-                  <a href="#" className="inline-flex items-center text-xs font-bold uppercase tracking-wide text-gray-900 dark:text-white group-hover:text-gray-600 dark:group-hover:text-gray-300 transition-colors">
+                  <a href="/services" className="inline-flex items-center text-xs font-bold uppercase tracking-wide text-gray-900 dark:text-white group-hover:text-gray-600 dark:group-hover:text-gray-300 transition-colors">
                     Learn More <motion.span
                       className="material-symbols-outlined text-xs ml-1"
                       animate={{ x: [0, 5, 0] }}
@@ -204,16 +224,18 @@ const Services: React.FC<{ preview?: boolean }> = ({ preview = false }) => {
           </AnimatePresence>
         </div>
 
-        {preview && (
+        {isRestrictedView && (
           <div className="mt-12 text-center">
-            <a
-              href="/services"
+            <button
+              onClick={() => setShowAll(true)}
               className="inline-flex items-center gap-2 px-8 py-3 bg-black dark:bg-white text-white dark:text-black rounded-full font-medium hover:bg-gray-800 dark:hover:bg-gray-200 transition-colors"
             >
-              View all services <span className="material-symbols-outlined text-sm">arrow_forward</span>
-            </a>
+              Show More Services <span className="material-symbols-outlined text-sm">expand_more</span>
+            </button>
           </div>
         )}
+
+        {/* If we are showing all and originally had a restricted view, maybe show a "Show Less" but user didn't ask for it. The user said "then all are shown". */}
       </div>
     </motion.section>
   );
diff --git a/components/Testimonials.tsx b/components/Testimonials.tsx
index cfbf9c6..f1c3657 100644
--- a/components/Testimonials.tsx
+++ b/components/Testimonials.tsx
@@ -1,44 +1,44 @@
-import React from 'react';
-import { motion } from 'framer-motion';
-
-const Testimonials: React.FC = () => {
-    return (
-        <section className="py-24 px-6 bg-background-light dark:bg-background-dark relative overflow-hidden bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(0,0,0,0.05),rgba(0,0,0,0))] dark:bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(255,255,255,0.05),rgba(255,255,255,0))]">
-            <div className="max-w-5xl mx-auto">
-                <motion.div
-                    initial={{ opacity: 0, scale: 0.95 }}
-                    whileInView={{ opacity: 1, scale: 1 }}
-                    viewport={{ once: true }}
-                    className="bg-white dark:bg-white/5 backdrop-blur-sm p-8 md:p-12 rounded-3xl border border-gray-200 dark:border-white/10 shadow-2xl relative"
-                >
-                    {/* Quote Icon */}
-                    <div className="absolute top-8 right-8 text-blue-100 dark:text-white/5 select-none">
-                        <span className="material-symbols-outlined text-8xl">format_quote</span>
-                    </div>
-
-                    <div className="flex text-yellow-400 mb-6 gap-1 relative z-10">
-                        {[1, 2, 3, 4, 5].map((star) => (
-                            <span key={star} className="material-symbols-outlined fill-current">star</span>
-                        ))}
-                    </div>
-
-                    <blockquote className="text-xl md:text-2xl font-medium leading-relaxed text-gray-900 dark:text-white mb-8 relative z-10">
-                        "Bay Area Affiliates transformed our IT infrastructure completely. Their proactive approach means we rarely have downtime, and when issues do arise, they're resolved quickly. Our team can focus on patient care instead of tech problems."
-                    </blockquote>
-
-                    <div className="flex items-center gap-4 relative z-10">
-                        <div className="w-12 h-12 bg-black dark:bg-white rounded-full flex items-center justify-center text-white dark:text-black font-bold text-lg">
-                            SM
-                        </div>
-                        <div>
-                            <div className="font-bold text-gray-900 dark:text-white">Sarah Martinez</div>
-                            <div className="text-sm text-gray-500 dark:text-gray-400">Operations Manager, Coastal Medical Group</div>
-                        </div>
-                    </div>
-                </motion.div>
-            </div>
-        </section>
-    );
-};
-
-export default Testimonials;
+import React from 'react';
+import { motion } from 'framer-motion';
+
+const Testimonials: React.FC = () => {
+    return (
+        <section className="py-24 px-6 bg-background-light dark:bg-background-dark relative overflow-hidden bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(0,0,0,0.05),rgba(0,0,0,0))] dark:bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(255,255,255,0.05),rgba(255,255,255,0))]">
+            <div className="max-w-5xl mx-auto">
+                <motion.div
+                    initial={{ opacity: 0, scale: 0.95 }}
+                    whileInView={{ opacity: 1, scale: 1 }}
+                    viewport={{ once: true }}
+                    className="bg-white dark:bg-white/5 backdrop-blur-sm p-8 md:p-12 rounded-3xl border border-gray-200 dark:border-white/10 shadow-2xl relative"
+                >
+                    {/* Quote Icon */}
+                    <div className="absolute top-8 right-8 text-blue-100 dark:text-white/5 select-none">
+                        <span className="material-symbols-outlined text-8xl">format_quote</span>
+                    </div>
+
+                    <div className="flex text-yellow-400 mb-6 gap-1 relative z-10">
+                        {[1, 2, 3, 4, 5].map((star) => (
+                            <span key={star} className="material-symbols-outlined fill-current">star</span>
+                        ))}
+                    </div>
+
+                    <blockquote className="text-xl md:text-2xl font-medium leading-relaxed text-gray-900 dark:text-white mb-8 relative z-10">
+                        "Bay Area Affiliates transformed our IT infrastructure completely. Their proactive approach means we rarely have downtime, and when issues do arise, they're resolved quickly. Our team can focus on patient care instead of tech problems."
+                    </blockquote>
+
+                    <div className="flex items-center gap-4 relative z-10">
+                        <div className="w-12 h-12 bg-black dark:bg-white rounded-full flex items-center justify-center text-white dark:text-black font-bold text-lg">
+                            SM
+                        </div>
+                        <div>
+                            <div className="font-bold text-gray-900 dark:text-white">Sarah Martinez</div>
+                            <div className="text-sm text-gray-500 dark:text-gray-400">Operations Manager, Coastal Medical Group</div>
+                        </div>
+                    </div>
+                </motion.div>
+            </div>
+        </section>
+    );
+};
+
+export default Testimonials;
diff --git a/index.html b/index.html
index 30699e2..3d165e4 100644
--- a/index.html
+++ b/index.html
@@ -65,6 +65,22 @@
       .lenis.lenis-scrolling iframe {
         pointer-events: none;
       }
+      
+      /* Custom Scrollbar */
+      .custom-scrollbar::-webkit-scrollbar {
+        width: 8px;
+      }
+      .custom-scrollbar::-webkit-scrollbar-track {
+        background: rgba(255, 255, 255, 0.05);
+        border-radius: 4px;
+      }
+      .custom-scrollbar::-webkit-scrollbar-thumb {
+        background: rgba(255, 255, 255, 0.2);
+        border-radius: 4px;
+      }
+      .custom-scrollbar::-webkit-scrollbar-thumb:hover {
+        background: rgba(255, 255, 255, 0.3);
+      }
     </style>
   <body class="bg-background-light dark:bg-background-dark text-gray-900 dark:text-white font-sans antialiased selection:bg-white selection:text-black transition-colors duration-300">
     <div id="root"></div>
diff --git a/package-lock.json b/package-lock.json
index 6bd3133..0fe4a62 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,6 +18,7 @@
       "devDependencies": {
         "@types/node": "^22.14.0",
         "@vitejs/plugin-react": "^5.0.0",
+        "tsx": "^4.21.0",
         "typescript": "~5.8.2",
         "vite": "^6.2.0"
       }
@@ -1475,6 +1476,19 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/get-tsconfig": {
+      "version": "4.13.0",
+      "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.13.0.tgz",
+      "integrity": "sha512-1VKTZJCwBrvbd+Wn3AOgQP/2Av+TfTCOlE4AcRJE72W1ksZXbAx8PPBR9RzgTeSPzlPMHrbANMH3LbltH73wxQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "resolve-pkg-maps": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/privatenumber/get-tsconfig?sponsor=1"
+      }
+    },
     "node_modules/gsap": {
       "version": "3.14.2",
       "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.14.2.tgz",
@@ -1690,6 +1704,16 @@
         "react-dom": ">=18"
       }
     },
+    "node_modules/resolve-pkg-maps": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz",
+      "integrity": "sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/privatenumber/resolve-pkg-maps?sponsor=1"
+      }
+    },
     "node_modules/rollup": {
       "version": "4.55.1",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.55.1.tgz",
@@ -1790,6 +1814,510 @@
       "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
       "license": "0BSD"
     },
+    "node_modules/tsx": {
+      "version": "4.21.0",
+      "resolved": "https://registry.npmjs.org/tsx/-/tsx-4.21.0.tgz",
+      "integrity": "sha512-5C1sg4USs1lfG0GFb2RLXsdpXqBSEhAaA/0kPL01wxzpMqLILNxIxIOKiILz+cdg/pLnOUxFYOR5yhHU666wbw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "esbuild": "~0.27.0",
+        "get-tsconfig": "^4.7.5"
+      },
+      "bin": {
+        "tsx": "dist/cli.mjs"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/aix-ppc64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.27.2.tgz",
+      "integrity": "sha512-GZMB+a0mOMZs4MpDbj8RJp4cw+w1WV5NYD6xzgvzUJ5Ek2jerwfO2eADyI6ExDSUED+1X8aMbegahsJi+8mgpw==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/android-arm": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.27.2.tgz",
+      "integrity": "sha512-DVNI8jlPa7Ujbr1yjU2PfUSRtAUZPG9I1RwW4F4xFB1Imiu2on0ADiI/c3td+KmDtVKNbi+nffGDQMfcIMkwIA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/android-arm64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.27.2.tgz",
+      "integrity": "sha512-pvz8ZZ7ot/RBphf8fv60ljmaoydPU12VuXHImtAs0XhLLw+EXBi2BLe3OYSBslR4rryHvweW5gmkKFwTiFy6KA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/android-x64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.27.2.tgz",
+      "integrity": "sha512-z8Ank4Byh4TJJOh4wpz8g2vDy75zFL0TlZlkUkEwYXuPSgX8yzep596n6mT7905kA9uHZsf/o2OJZubl2l3M7A==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/darwin-arm64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.27.2.tgz",
+      "integrity": "sha512-davCD2Zc80nzDVRwXTcQP/28fiJbcOwvdolL0sOiOsbwBa72kegmVU0Wrh1MYrbuCL98Omp5dVhQFWRKR2ZAlg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/darwin-x64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.27.2.tgz",
+      "integrity": "sha512-ZxtijOmlQCBWGwbVmwOF/UCzuGIbUkqB1faQRf5akQmxRJ1ujusWsb3CVfk/9iZKr2L5SMU5wPBi1UWbvL+VQA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.27.2.tgz",
+      "integrity": "sha512-lS/9CN+rgqQ9czogxlMcBMGd+l8Q3Nj1MFQwBZJyoEKI50XGxwuzznYdwcav6lpOGv5BqaZXqvBSiB/kJ5op+g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/freebsd-x64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.27.2.tgz",
+      "integrity": "sha512-tAfqtNYb4YgPnJlEFu4c212HYjQWSO/w/h/lQaBK7RbwGIkBOuNKQI9tqWzx7Wtp7bTPaGC6MJvWI608P3wXYA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/linux-arm": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.27.2.tgz",
+      "integrity": "sha512-vWfq4GaIMP9AIe4yj1ZUW18RDhx6EPQKjwe7n8BbIecFtCQG4CfHGaHuh7fdfq+y3LIA2vGS/o9ZBGVxIDi9hw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/linux-arm64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.27.2.tgz",
+      "integrity": "sha512-hYxN8pr66NsCCiRFkHUAsxylNOcAQaxSSkHMMjcpx0si13t1LHFphxJZUiGwojB1a/Hd5OiPIqDdXONia6bhTw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/linux-ia32": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.27.2.tgz",
+      "integrity": "sha512-MJt5BRRSScPDwG2hLelYhAAKh9imjHK5+NE/tvnRLbIqUWa+0E9N4WNMjmp/kXXPHZGqPLxggwVhz7QP8CTR8w==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/linux-loong64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.27.2.tgz",
+      "integrity": "sha512-lugyF1atnAT463aO6KPshVCJK5NgRnU4yb3FUumyVz+cGvZbontBgzeGFO1nF+dPueHD367a2ZXe1NtUkAjOtg==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/linux-mips64el": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.27.2.tgz",
+      "integrity": "sha512-nlP2I6ArEBewvJ2gjrrkESEZkB5mIoaTswuqNFRv/WYd+ATtUpe9Y09RnJvgvdag7he0OWgEZWhviS1OTOKixw==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/linux-ppc64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.27.2.tgz",
+      "integrity": "sha512-C92gnpey7tUQONqg1n6dKVbx3vphKtTHJaNG2Ok9lGwbZil6DrfyecMsp9CrmXGQJmZ7iiVXvvZH6Ml5hL6XdQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/linux-riscv64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.27.2.tgz",
+      "integrity": "sha512-B5BOmojNtUyN8AXlK0QJyvjEZkWwy/FKvakkTDCziX95AowLZKR6aCDhG7LeF7uMCXEJqwa8Bejz5LTPYm8AvA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/linux-s390x": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.27.2.tgz",
+      "integrity": "sha512-p4bm9+wsPwup5Z8f4EpfN63qNagQ47Ua2znaqGH6bqLlmJ4bx97Y9JdqxgGZ6Y8xVTixUnEkoKSHcpRlDnNr5w==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/linux-x64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.27.2.tgz",
+      "integrity": "sha512-uwp2Tip5aPmH+NRUwTcfLb+W32WXjpFejTIOWZFw/v7/KnpCDKG66u4DLcurQpiYTiYwQ9B7KOeMJvLCu/OvbA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/netbsd-arm64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.27.2.tgz",
+      "integrity": "sha512-Kj6DiBlwXrPsCRDeRvGAUb/LNrBASrfqAIok+xB0LxK8CHqxZ037viF13ugfsIpePH93mX7xfJp97cyDuTZ3cw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/netbsd-x64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.27.2.tgz",
+      "integrity": "sha512-HwGDZ0VLVBY3Y+Nw0JexZy9o/nUAWq9MlV7cahpaXKW6TOzfVno3y3/M8Ga8u8Yr7GldLOov27xiCnqRZf0tCA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/openbsd-arm64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.27.2.tgz",
+      "integrity": "sha512-DNIHH2BPQ5551A7oSHD0CKbwIA/Ox7+78/AWkbS5QoRzaqlev2uFayfSxq68EkonB+IKjiuxBFoV8ESJy8bOHA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/openbsd-x64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.27.2.tgz",
+      "integrity": "sha512-/it7w9Nb7+0KFIzjalNJVR5bOzA9Vay+yIPLVHfIQYG/j+j9VTH84aNB8ExGKPU4AzfaEvN9/V4HV+F+vo8OEg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/openharmony-arm64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.27.2.tgz",
+      "integrity": "sha512-LRBbCmiU51IXfeXk59csuX/aSaToeG7w48nMwA6049Y4J4+VbWALAuXcs+qcD04rHDuSCSRKdmY63sruDS5qag==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/sunos-x64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.27.2.tgz",
+      "integrity": "sha512-kMtx1yqJHTmqaqHPAzKCAkDaKsffmXkPHThSfRwZGyuqyIeBvf08KSsYXl+abf5HDAPMJIPnbBfXvP2ZC2TfHg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/win32-arm64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.27.2.tgz",
+      "integrity": "sha512-Yaf78O/B3Kkh+nKABUF++bvJv5Ijoy9AN1ww904rOXZFLWVc5OLOfL56W+C8F9xn5JQZa3UX6m+IktJnIb1Jjg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/win32-ia32": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.27.2.tgz",
+      "integrity": "sha512-Iuws0kxo4yusk7sw70Xa2E2imZU5HoixzxfGCdxwBdhiDgt9vX9VUCBhqcwY7/uh//78A1hMkkROMJq9l27oLQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/win32-x64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.27.2.tgz",
+      "integrity": "sha512-sRdU18mcKf7F+YgheI/zGf5alZatMUTKj/jNS6l744f9u3WFu4v7twcUI9vu4mknF4Y9aDlblIie0IM+5xxaqQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/esbuild": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.27.2.tgz",
+      "integrity": "sha512-HyNQImnsOC7X9PMNaCIeAm4ISCQXs5a5YasTXVliKv4uuBo1dKrG0A+uQS8M5eXjVMnLg3WgXaKvprHlFJQffw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.27.2",
+        "@esbuild/android-arm": "0.27.2",
+        "@esbuild/android-arm64": "0.27.2",
+        "@esbuild/android-x64": "0.27.2",
+        "@esbuild/darwin-arm64": "0.27.2",
+        "@esbuild/darwin-x64": "0.27.2",
+        "@esbuild/freebsd-arm64": "0.27.2",
+        "@esbuild/freebsd-x64": "0.27.2",
+        "@esbuild/linux-arm": "0.27.2",
+        "@esbuild/linux-arm64": "0.27.2",
+        "@esbuild/linux-ia32": "0.27.2",
+        "@esbuild/linux-loong64": "0.27.2",
+        "@esbuild/linux-mips64el": "0.27.2",
+        "@esbuild/linux-ppc64": "0.27.2",
+        "@esbuild/linux-riscv64": "0.27.2",
+        "@esbuild/linux-s390x": "0.27.2",
+        "@esbuild/linux-x64": "0.27.2",
+        "@esbuild/netbsd-arm64": "0.27.2",
+        "@esbuild/netbsd-x64": "0.27.2",
+        "@esbuild/openbsd-arm64": "0.27.2",
+        "@esbuild/openbsd-x64": "0.27.2",
+        "@esbuild/openharmony-arm64": "0.27.2",
+        "@esbuild/sunos-x64": "0.27.2",
+        "@esbuild/win32-arm64": "0.27.2",
+        "@esbuild/win32-ia32": "0.27.2",
+        "@esbuild/win32-x64": "0.27.2"
+      }
+    },
     "node_modules/typescript": {
       "version": "5.8.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.8.3.tgz",
diff --git a/package.json b/package.json
index 38cb5a0..b5ac644 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,8 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "generate:seo": "npx tsx scripts/generate-sitemap.ts && npx tsx scripts/generate-robots.ts"
   },
   "dependencies": {
     "@studio-freight/lenis": "^1.0.42",
@@ -19,6 +20,7 @@
   "devDependencies": {
     "@types/node": "^22.14.0",
     "@vitejs/plugin-react": "^5.0.0",
+    "tsx": "^4.21.0",
     "typescript": "~5.8.2",
     "vite": "^6.2.0"
   }
diff --git a/public/assets/services/business-it.png b/public/assets/services/business-it.png
new file mode 100644
index 0000000..68ff6ec
Binary files /dev/null and b/public/assets/services/business-it.png differ
diff --git a/public/assets/services/help-desk.png b/public/assets/services/help-desk.png
new file mode 100644
index 0000000..15d4966
Binary files /dev/null and b/public/assets/services/help-desk.png differ
diff --git a/public/assets/services/managed-it.png b/public/assets/services/managed-it.png
new file mode 100644
index 0000000..6efdc09
Binary files /dev/null and b/public/assets/services/managed-it.png differ
diff --git a/public/images/blog/aransas-pass-it.png b/public/images/blog/aransas-pass-it.png
new file mode 100644
index 0000000..2181bce
Binary files /dev/null and b/public/images/blog/aransas-pass-it.png differ
diff --git a/public/images/blog/common-it-problems.png b/public/images/blog/common-it-problems.png
new file mode 100644
index 0000000..d0502cf
Binary files /dev/null and b/public/images/blog/common-it-problems.png differ
diff --git a/public/images/blog/corpus-christi-it.png b/public/images/blog/corpus-christi-it.png
new file mode 100644
index 0000000..52a39d2
Binary files /dev/null and b/public/images/blog/corpus-christi-it.png differ
diff --git a/public/images/blog/it-service-comparison.png b/public/images/blog/it-service-comparison.png
new file mode 100644
index 0000000..f22b71a
Binary files /dev/null and b/public/images/blog/it-service-comparison.png differ
diff --git a/public/images/blog/it-support-cost.png b/public/images/blog/it-support-cost.png
new file mode 100644
index 0000000..ba72305
Binary files /dev/null and b/public/images/blog/it-support-cost.png differ
diff --git a/public/images/blog/it-support-small-business.png b/public/images/blog/it-support-small-business.png
new file mode 100644
index 0000000..ac6658e
Binary files /dev/null and b/public/images/blog/it-support-small-business.png differ
diff --git a/public/images/blog/kingsville-tx-it.png b/public/images/blog/kingsville-tx-it.png
new file mode 100644
index 0000000..b4df1f5
Binary files /dev/null and b/public/images/blog/kingsville-tx-it.png differ
diff --git a/public/images/blog/outsourced-it-support.png b/public/images/blog/outsourced-it-support.png
new file mode 100644
index 0000000..6b5111a
Binary files /dev/null and b/public/images/blog/outsourced-it-support.png differ
diff --git a/public/images/blog/portland-tx-it.png b/public/images/blog/portland-tx-it.png
new file mode 100644
index 0000000..fa9e931
Binary files /dev/null and b/public/images/blog/portland-tx-it.png differ
diff --git a/public/images/blog/rockport-tx-it.png b/public/images/blog/rockport-tx-it.png
new file mode 100644
index 0000000..a133903
Binary files /dev/null and b/public/images/blog/rockport-tx-it.png differ
diff --git a/public/robots.txt b/public/robots.txt
new file mode 100644
index 0000000..a553551
--- /dev/null
+++ b/public/robots.txt
@@ -0,0 +1,6 @@
+User-agent: *
+Allow: /
+Disallow: /admin
+Disallow: /api
+
+Sitemap: https://bayareait.services/sitemap.xml
diff --git a/public/sitemap.xml b/public/sitemap.xml
new file mode 100644
index 0000000..e82c7e4
--- /dev/null
+++ b/public/sitemap.xml
@@ -0,0 +1,147 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  <url>
+    <loc>https://bayareait.services</loc>
+    <lastmod>2026-01-22</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>1.0</priority>
+  </url>
+  <url>
+    <loc>https://bayareait.services/services</loc>
+    <lastmod>2026-01-22</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.8</priority>
+  </url>
+  <url>
+    <loc>https://bayareait.services/blog</loc>
+    <lastmod>2026-01-22</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.8</priority>
+  </url>
+  <url>
+    <loc>https://bayareait.services/contact</loc>
+    <lastmod>2026-01-22</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.8</priority>
+  </url>
+  <url>
+    <loc>https://bayareait.services/about</loc>
+    <lastmod>2026-01-22</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.8</priority>
+  </url>
+  <url>
+    <loc>https://bayareait.services/it-support-corpus-christi</loc>
+    <lastmod>2026-01-22</lastmod>
+    <changefreq>weekly</changefreq>
+    <priority>0.9</priority>
+  </url>
+  <url>
+    <loc>https://bayareait.services/it-support-portland-tx</loc>
+    <lastmod>2026-01-22</lastmod>
+    <changefreq>weekly</changefreq>
+    <priority>0.9</priority>
+  </url>
+  <url>
+    <loc>https://bayareait.services/it-support-rockport-tx</loc>
+    <lastmod>2026-01-22</lastmod>
+    <changefreq>weekly</changefreq>
+    <priority>0.9</priority>
+  </url>
+  <url>
+    <loc>https://bayareait.services/it-support-aransas-pass-tx</loc>
+    <lastmod>2026-01-22</lastmod>
+    <changefreq>weekly</changefreq>
+    <priority>0.9</priority>
+  </url>
+  <url>
+    <loc>https://bayareait.services/it-support-kingsville-tx</loc>
+    <lastmod>2026-01-22</lastmod>
+    <changefreq>weekly</changefreq>
+    <priority>0.9</priority>
+  </url>
+  <url>
+    <loc>https://bayareait.services/business-it-support</loc>
+    <lastmod>2026-01-22</lastmod>
+    <changefreq>weekly</changefreq>
+    <priority>0.9</priority>
+  </url>
+  <url>
+    <loc>https://bayareait.services/it-help-desk</loc>
+    <lastmod>2026-01-22</lastmod>
+    <changefreq>weekly</changefreq>
+    <priority>0.9</priority>
+  </url>
+  <url>
+    <loc>https://bayareait.services/computer-support</loc>
+    <lastmod>2026-01-22</lastmod>
+    <changefreq>weekly</changefreq>
+    <priority>0.9</priority>
+  </url>
+  <url>
+    <loc>https://bayareait.services/managed-it-services-corpus-christi</loc>
+    <lastmod>2026-01-22</lastmod>
+    <changefreq>weekly</changefreq>
+    <priority>0.9</priority>
+  </url>
+  <url>
+    <loc>https://bayareait.services/blog/it-support-small-business-corpus-christi</loc>
+    <lastmod>2026-01-22</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.7</priority>
+  </url>
+  <url>
+    <loc>https://bayareait.services/blog/outsourced-it-support-corpus-christi</loc>
+    <lastmod>2026-01-22</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.7</priority>
+  </url>
+  <url>
+    <loc>https://bayareait.services/blog/it-service-vs-inhouse-it</loc>
+    <lastmod>2026-01-22</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.7</priority>
+  </url>
+  <url>
+    <loc>https://bayareait.services/blog/common-it-problems-businesses-corpus-christi</loc>
+    <lastmod>2026-01-22</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.7</priority>
+  </url>
+  <url>
+    <loc>https://bayareait.services/blog/it-support-cost-corpus-christi</loc>
+    <lastmod>2026-01-22</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.7</priority>
+  </url>
+  <url>
+    <loc>https://bayareait.services/blog/it-support-corpus-christi-blog</loc>
+    <lastmod>2026-01-22</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.7</priority>
+  </url>
+  <url>
+    <loc>https://bayareait.services/blog/it-support-portland-tx-blog</loc>
+    <lastmod>2026-01-22</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.7</priority>
+  </url>
+  <url>
+    <loc>https://bayareait.services/blog/it-support-rockport-tx-blog</loc>
+    <lastmod>2026-01-22</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.7</priority>
+  </url>
+  <url>
+    <loc>https://bayareait.services/blog/it-support-aransas-pass-blog</loc>
+    <lastmod>2026-01-22</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.7</priority>
+  </url>
+  <url>
+    <loc>https://bayareait.services/blog/it-support-kingsville-tx-blog</loc>
+    <lastmod>2026-01-22</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.7</priority>
+  </url>
+</urlset>
\ No newline at end of file
diff --git a/scripts/generate-robots.ts b/scripts/generate-robots.ts
new file mode 100644
index 0000000..e482059
--- /dev/null
+++ b/scripts/generate-robots.ts
@@ -0,0 +1,28 @@
+
+import fs from 'fs';
+import path from 'path';
+
+const BASE_URL = process.env.BASE_URL || 'https://bayareait.services';
+
+const generateRobots = () => {
+    const content = `User-agent: *
+Allow: /
+Disallow: /admin
+Disallow: /api
+
+Sitemap: ${BASE_URL}/sitemap.xml
+`;
+    return content;
+};
+
+const robots = generateRobots();
+const outputPath = path.resolve(process.cwd(), 'public/robots.txt');
+
+// Ensure public directory exists
+const publicDir = path.dirname(outputPath);
+if (!fs.existsSync(publicDir)) {
+    fs.mkdirSync(publicDir, { recursive: true });
+}
+
+fs.writeFileSync(outputPath, robots);
+console.log(`✅ Robots.txt generated at ${outputPath}`);
diff --git a/scripts/generate-sitemap.ts b/scripts/generate-sitemap.ts
new file mode 100644
index 0000000..18939c8
--- /dev/null
+++ b/scripts/generate-sitemap.ts
@@ -0,0 +1,85 @@
+
+import fs from 'fs';
+import path from 'path';
+import { locationData, serviceData, blogPostData } from '../src/data/seoData';
+
+const BASE_URL = process.env.BASE_URL || 'https://bayareait.services';
+
+/**
+ * Generates the sitemap.xml content
+ */
+const generateSitemap = () => {
+    const currentDate = new Date().toISOString().split('T')[0];
+
+    let xml = `<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+`;
+
+    // Static Pages
+    const staticPages = [
+        '',
+        '/services',
+        '/blog',
+        '/contact',
+        '/about'
+    ];
+
+    staticPages.forEach(page => {
+        xml += `  <url>
+    <loc>${BASE_URL}${page}</loc>
+    <lastmod>${currentDate}</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>${page === '' ? '1.0' : '0.8'}</priority>
+  </url>
+`;
+    });
+
+    // Location Pages
+    locationData.forEach(page => {
+        xml += `  <url>
+    <loc>${BASE_URL}/${page.slug}</loc>
+    <lastmod>${currentDate}</lastmod>
+    <changefreq>weekly</changefreq>
+    <priority>0.9</priority>
+  </url>
+`;
+    });
+
+    // Service Pages
+    serviceData.forEach(page => {
+        xml += `  <url>
+    <loc>${BASE_URL}/${page.slug}</loc>
+    <lastmod>${currentDate}</lastmod>
+    <changefreq>weekly</changefreq>
+    <priority>0.9</priority>
+  </url>
+`;
+    });
+
+    // Blog Posts
+    blogPostData.forEach(post => {
+        xml += `  <url>
+    <loc>${BASE_URL}/blog/${post.slug}</loc>
+    <lastmod>${currentDate}</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.7</priority>
+  </url>
+`;
+    });
+
+    xml += `</urlset>`;
+    return xml;
+};
+
+// Write to public/sitemap.xml
+const sitemap = generateSitemap();
+const outputPath = path.resolve(process.cwd(), 'public/sitemap.xml');
+
+// Ensure public directory exists
+const publicDir = path.dirname(outputPath);
+if (!fs.existsSync(publicDir)) {
+    fs.mkdirSync(publicDir, { recursive: true });
+}
+
+fs.writeFileSync(outputPath, sitemap);
+console.log(`✅ Sitemap generated at ${outputPath}`);
diff --git a/src/data/seoData.ts b/src/data/seoData.ts
new file mode 100644
index 0000000..ca01c38
--- /dev/null
+++ b/src/data/seoData.ts
@@ -0,0 +1,1251 @@
+
+export interface FAQItem {
+  question: string;
+  answer: string;
+}
+
+export interface LocationData {
+  city: string;
+  slug: string;
+  title: string;
+  description: string;
+  h1: string;
+  content: string;
+  keywords: string[];
+  faq: FAQItem[];
+}
+
+export interface ServiceData {
+  id: string;
+  slug: string;
+  title: string;
+  description: string;
+  h1: string;
+  content: string;
+  keywords: string[];
+  faq: FAQItem[];
+  relatedServices?: number[];
+}
+
+export const locationData: LocationData[] = [
+  {
+    city: "Corpus Christi",
+    slug: "it-support-corpus-christi",
+    title: "Professional IT Support & IT Services for Businesses in Corpus Christi, TX",
+    description: "Reliable IT support and IT services for businesses in Corpus Christi, TX. Fast response, outsourced IT support & help desk solutions. Call now.",
+    h1: "IT Service & IT Support for Businesses in Corpus Christi, TX",
+    keywords: ["IT support Corpus Christi", "IT services Corpus Christi", "business IT support", "outsourced IT support"],
+    content: `
+      <p>Businesses in Corpus Christi depend on reliable IT systems to operate efficiently and securely. From daily computer use to network stability and data protection, professional IT support plays a critical role in modern business operations.</p>
+      <p>We provide professional IT support and IT services for businesses in Corpus Christi, helping companies reduce downtime, improve security and maintain stable IT environments.</p>
+      <h3>IT Services for Businesses in Corpus Christi</h3>
+      <p>Our services include:</p>
+      <ul>
+        <li><a href="/business-it-support">Business IT support</a> and maintenance</li>
+        <li>Outsourced IT support solutions</li>
+        <li><a href="/it-help-desk">IT help desk services</a> for employees</li>
+        <li>Network and computer IT services</li>
+      </ul>
+      <p>Many local businesses choose outsourced IT support to gain access to professional expertise without the cost of an internal IT department.</p>
+    `,
+    faq: [
+      {
+        question: "Do you offer IT support for businesses in Corpus Christi, TX?",
+        answer: "Yes. We provide business-focused IT support in Corpus Christi, including remote help desk assistance and on-site support when needed."
+      },
+      {
+        question: "How fast is your response time for IT issues?",
+        answer: "Many issues can be handled quickly via remote support. For urgent problems, on-site service in Corpus Christi can be scheduled as needed."
+      },
+      {
+        question: "What types of businesses do you typically support in Corpus Christi?",
+        answer: "We support small and mid-sized businesses such as offices, service providers, healthcare-related practices, and growing teams without in-house IT."
+      },
+      {
+        question: "Do you offer ongoing monthly IT support or only one-time help?",
+        answer: "Both. You can choose ongoing managed support for predictable coverage or request one-time assistance for specific problems."
+      },
+      {
+        question: "Can you help with cybersecurity and backups?",
+        answer: "Yes. We can set up and maintain a practical security baseline (MFA, endpoint protection, patching) and monitored backups with restore planning."
+      },
+      {
+        question: "Can you support remote workers and multiple locations?",
+        answer: "Yes. We support remote staff and multi-location businesses by standardizing access, security, devices, and help desk workflows."
+      }
+    ]
+  },
+  {
+    city: "Portland",
+    slug: "it-support-portland-tx",
+    title: "Reliable IT Support & IT Services for Businesses in Portland, TX",
+    description: "Reliable IT support and IT services for businesses in Portland, TX. Fast remote assistance and on-site support.",
+    h1: "Reliable IT Support & IT Services for Businesses in Portland, TX",
+    keywords: ["IT support Portland TX", "IT services Portland", "business IT support", "IT help"],
+    content: `
+      <p>Businesses in Portland require dependable IT systems to stay productive and competitive. Technical issues, slow systems or security gaps can quickly disrupt daily operations.</p>
+      <p>We offer reliable IT support and IT services for businesses in Portland, TX, providing fast remote assistance and on-site support when needed.</p>
+      <h3>Local IT Support for Portland Businesses</h3>
+      <p>Our IT services help local businesses with:</p>
+      <ul>
+        <li>Day-to-day IT support</li>
+        <li>Network and Wi-Fi troubleshooting</li>
+        <li>Computer and system maintenance</li>
+        <li>Scalable IT solutions for growing companies</li>
+      </ul>
+      <p>By choosing outsourced IT support, businesses in Portland can focus on their core operations while we handle their IT needs.</p>
+      <p>As a local provider serving the Coastal Bend, we also provide comprehensive <a href="/it-support-corpus-christi">IT Support in Corpus Christi</a> and throughout the region. Check our <a href="/business-it-support">Business IT Support</a> options for more details.</p>
+    `,
+    faq: [
+      {
+        question: "Do you provide IT support for businesses in Portland, TX?",
+        answer: "Yes. We support Portland businesses with remote IT support and on-site assistance when required."
+      },
+      {
+        question: "Are you locally based near Portland?",
+        answer: "We serve Portland as part of the Coastal Bend area, with a core team based near Corpus Christi for fast support across nearby cities."
+      },
+      {
+        question: "What’s included in your IT support for Portland businesses?",
+        answer: "Typically: help desk support, device troubleshooting, network/Wi-Fi support, security basics, and backup monitoring."
+      },
+      {
+        question: "Can you fix issues remotely, or do you come on-site?",
+        answer: "Most issues are resolved remotely for speed. On-site support is available for hardware, network equipment, or installations."
+      },
+      {
+        question: "Do you offer outsourced IT support for small offices in Portland?",
+        answer: "Yes. Outsourced IT support is ideal if you want predictable help without hiring in-house staff."
+      },
+      {
+        question: "How do we get started?",
+        answer: "We begin with a quick assessment of your devices, users, network, and current pain points, then recommend a clear support plan."
+      }
+    ]
+  },
+  {
+    city: "Rockport",
+    slug: "it-support-rockport-tx",
+    title: "Business IT Support & IT Services in Rockport, TX",
+    description: "Structured IT solutions tailored to local business needs in Rockport, TX. Ongoing support and outsourced IT services.",
+    h1: "Business IT Support & IT Services in Rockport, TX",
+    keywords: ["IT support Rockport TX", "business IT support", "IT services", "outsourced IT support"],
+    content: `
+      <p>Businesses in Rockport rely on stable and secure IT systems to serve customers and manage daily operations. Without professional IT support, even small technical issues can lead to downtime and lost productivity.</p>
+      <p>We provide business IT support and IT services for companies in Rockport, offering structured solutions tailored to local business needs.</p>
+      <h3>IT Services for Rockport Businesses</h3>
+      <p>Our support includes:</p>
+      <ul>
+        <li>Ongoing business IT support</li>
+        <li>Outsourced IT solutions</li>
+        <li>IT help desk services</li>
+        <li>Computer and network IT services</li>
+      </ul>
+      <p>Our proximity to the Rockport area allows us to respond quickly and provide dependable support when it matters most.</p>
+      <p>We are proud to serve the entire region. Learn more about our main <a href="/it-support-corpus-christi">Corpus Christi IT Support</a> hub or explore our <a href="/managed-it-services-corpus-christi">Managed IT Services</a>.</p>
+    `,
+    faq: [
+      {
+        question: "Do you offer IT support for businesses in Rockport, TX?",
+        answer: "Yes. We provide business IT support for Rockport, including remote help desk support and on-site service as needed."
+      },
+      {
+        question: "What are the most common IT problems you fix for Rockport businesses?",
+        answer: "Network/Wi-Fi issues, slow computers, email access problems, printer/setup issues, security gaps, and missing backup planning."
+      },
+      {
+        question: "Do you provide ongoing support or only emergency fixes?",
+        answer: "Both. Many businesses choose ongoing monthly support to reduce downtime, but one-time help is available too."
+      },
+      {
+        question: "Can you help improve cybersecurity for our business?",
+        answer: "Yes. We can implement a practical baseline including MFA, patching, endpoint protection, and backup monitoring."
+      },
+      {
+        question: "Do you support Microsoft 365 and email setups?",
+        answer: "Yes. We commonly help with Microsoft 365, email access, user management, and secure configuration."
+      },
+      {
+        question: "Do you support both Windows and Mac devices?",
+        answer: "Yes. We support mixed-device environments depending on your tools and business needs."
+      }
+    ]
+  },
+  {
+    city: "Aransas Pass",
+    slug: "it-support-aransas-pass-tx",
+    title: "IT Support & Outsourced IT Services for Businesses in Aransas Pass, TX",
+    description: "IT support and outsourced IT services for businesses in Aransas Pass. Reduce IT-related disruptions and improve reliability.",
+    h1: "IT Support & Outsourced IT Services for Businesses in Aransas Pass, TX",
+    keywords: ["IT support Aransas Pass", "IT services Aransas Pass", "outsourced IT support", "IT help desk"],
+    content: `
+      <p>Companies in Aransas Pass depend on efficient IT systems to keep operations running smoothly. From employee workstations to networks and data security, professional IT support is essential.</p>
+      <p>We offer IT support and outsourced IT services for businesses in Aransas Pass, helping companies reduce IT-related disruptions and improve reliability.</p>
+      <h3>Why Outsourced IT Support Makes Sense</h3>
+      <p>Many businesses in Aransas Pass choose outsourced IT support because it offers:</p>
+      <ul>
+        <li>Predictable monthly costs</li>
+        <li>Access to experienced IT professionals</li>
+        <li>Faster issue resolution</li>
+      </ul>
+      <p>Our goal is to keep your IT systems stable, secure and aligned with your business needs.</p>
+      <p>For more information on our regional coverage, visit our <a href="/it-support-corpus-christi">Corpus Christi IT Support</a> page or see our <a href="/it-help-desk">Help Desk Services</a>.</p>
+    `,
+    faq: [
+      {
+        question: "Do you provide IT support in Aransas Pass, TX?",
+        answer: "Yes. We support businesses in Aransas Pass with remote IT support and on-site help when required."
+      },
+      {
+        question: "What does “outsourced IT support” mean for a business?",
+        answer: "It means we act as your external IT department—handling support, maintenance, security basics, and improvements without hiring full-time staff."
+      },
+      {
+        question: "Can you help with network and Wi-Fi issues?",
+        answer: "Yes. Network and Wi-Fi troubleshooting, optimization, and equipment support are common requests."
+      },
+      {
+        question: "Do you offer help desk support for employees?",
+        answer: "Yes. Employees can contact the help desk for everyday issues like logins, software problems, and device troubleshooting."
+      },
+      {
+        question: "Do you set up backups and recovery plans?",
+        answer: "Yes. We can set up monitored backups and define a recovery plan so you’re prepared for data loss or ransomware risks."
+      },
+      {
+        question: "How do we request support?",
+        answer: "You can contact us by phone or form. We typically resolve issues remotely first, then schedule on-site support if needed."
+      }
+    ]
+  },
+  {
+    city: "Kingsville",
+    slug: "it-support-kingsville-tx",
+    title: "IT Support & IT Services for Businesses in Kingsville, TX",
+    description: "Dependable IT solutions through remote support and on-site assistance for businesses in Kingsville, TX.",
+    h1: "IT Support & IT Services for Businesses in Kingsville, TX",
+    keywords: ["IT support Kingsville TX", "IT services Kingsville", "business IT support", "computer IT services"],
+    content: `
+      <p>Businesses in Kingsville need reliable IT systems to support employees, customers and daily operations. Without professional IT services, technical issues can quickly impact productivity.</p>
+      <p>We provide IT support and IT services for businesses in Kingsville, delivering dependable solutions through remote support and on-site assistance when required.</p>
+      <h3>IT Services for Kingsville Businesses</h3>
+      <p>Our services include:</p>
+      <ul>
+        <li><a href="/business-it-support">Business IT support</a></li>
+        <li>Computer and network IT services</li>
+        <li>IT help desk support</li>
+        <li>Scalable IT solutions</li>
+      </ul>
+      <p>By working with a professional IT partner, businesses in Kingsville can ensure long-term stability and security for their IT infrastructure.</p>
+      <p>We also provide comprehensive <a href="/it-support-corpus-christi">IT services in Corpus Christi</a> and throughout the Coastal Bend area.</p>
+    `,
+    faq: [
+      {
+        question: "Do you offer IT support for businesses in Kingsville, TX?",
+        answer: "Yes. We provide business IT support in Kingsville, including remote assistance and on-site service when needed."
+      },
+      {
+        question: "What types of businesses do you support in Kingsville?",
+        answer: "Small and mid-sized offices, service businesses, and growing companies that need reliable IT without in-house staffing."
+      },
+      {
+        question: "Can you support our network, printers, and office computers?",
+        answer: "Yes. We handle computer support, network stability, and common office setup issues."
+      },
+      {
+        question: "Do you provide managed IT services (monthly support)?",
+        answer: "Yes. Managed support covers ongoing maintenance, help desk, security basics, and proactive monitoring."
+      },
+      {
+        question: "Can you help protect our business from cyber threats?",
+        answer: "Yes. We implement a practical security baseline and help reduce risk with MFA, patching, and endpoint protection."
+      },
+      {
+        question: "How quickly can you start supporting our business?",
+        answer: "After a quick assessment of your environment, we can start remote support quickly and schedule any on-site work as needed."
+      }
+    ]
+  }
+];
+
+export const serviceData: ServiceData[] = [
+  {
+    id: "business-it",
+    slug: "business-it-support",
+    title: "Business IT Support & Outsourced IT Services | Bay Area IT Services",
+    description: "Comprehensive business IT support and outsourced IT services. We handle your planning, support, and maintenance.",
+    h1: "Business IT Support & Outsourced IT Services in Corpus Christi",
+    keywords: ["outsourced it support", "business it support"],
+    content: `
+      <p>Our Business IT Support helps companies in Corpus Christi operate their IT infrastructure securely, reliably, and at scale.</p>
+      <p>As your external IT partner, we handle planning, support, and maintenance – so you can focus on growing your business.</p>
+      <h3>What We Provide</h3>
+      <ul>
+        <li>Proactive system monitoring and maintenance</li>
+        <li>Strategic IT planning aligned with business goals</li>
+        <li>Scalable solutions that grow with your company</li>
+        <li>Predictable monthly costs with no surprises</li>
+      </ul>
+      <p>Many businesses in Corpus Christi choose our outsourced IT support to gain enterprise-level expertise without the cost of building an internal IT department.</p>
+      <p>If you're looking for specialized assistance, check out our <a href="/it-help-desk">IT Help Desk services</a> or learn more about our comprehensive <a href="/managed-it-services-corpus-christi">Managed IT Services</a>.</p>
+    `,
+    relatedServices: [11, 10, 7],
+    faq: [
+      {
+        question: "What is business IT support?",
+        answer: "Business IT support covers help desk, maintenance, network stability, security basics, and ongoing improvements to keep operations running smoothly."
+      },
+      {
+        question: "Is outsourced business IT support cheaper than hiring in-house IT?",
+        answer: "Often yes. You get access to a full team’s expertise without the cost of a full-time salary, benefits, and coverage gaps."
+      },
+      {
+        question: "What’s typically included in ongoing business IT support?",
+        answer: "Help desk, monitoring, patching, endpoint protection, backup oversight, user management, and IT planning."
+      },
+      {
+        question: "Do you support multiple office locations and remote employees?",
+        answer: "Yes. We can standardize devices, access, and security across locations and remote teams."
+      },
+      {
+        question: "Do you offer monthly plans or customized support packages?",
+        answer: "Yes. Support can be structured as a monthly plan or tailored to your business size and needs."
+      },
+      {
+        question: "How do you handle urgent IT issues?",
+        answer: "We prioritize urgent issues and typically start with remote response immediately, then escalate to on-site support when required."
+      },
+      {
+        question: "How do we get started with business IT support?",
+        answer: "We begin with an assessment of your current environment and needs, then propose a clear plan with recommended improvements."
+      }
+    ]
+  },
+  {
+    id: "help-desk",
+    slug: "it-help-desk",
+    title: "IT Help Desk Services for Businesses | Bay Area IT Services",
+    description: "Fast and professional IT help desk services for employees. Remote or on-site support in Corpus Christi.",
+    h1: "IT Help Desk Services for Businesses in Corpus Christi",
+    keywords: ["it help desk", "it support"],
+    content: `
+      <p>Our IT Help Desk provides fast, professional support for your employees – remotely or on-site when needed.</p>
+      <p>Ideal for businesses that need reliable IT support without wait times or delays.</p>
+      <h3>Help Desk Services Include</h3>
+      <ul>
+        <li>Rapid response to technical issues</li>
+        <li>User-friendly support for all skill levels</li>
+        <li>Ticket tracking and resolution management</li>
+        <li>Remote and on-site assistance options</li>
+      </ul>
+      <p>Our help desk team in Corpus Christi ensures your employees stay productive by resolving technical problems quickly and efficiently.</p>
+      <p>For broader infrastructure management, consider our <a href="/business-it-support">Business IT Support</a> or full <a href="/managed-it-services-corpus-christi">Managed IT Services</a>.</p>
+    `,
+    relatedServices: [9, 1, 5],
+    faq: [
+      {
+        question: "What is an IT help desk for businesses?",
+        answer: "It’s a dedicated support channel employees use to resolve everyday IT issues quickly (logins, software errors, devices, access)."
+      },
+      {
+        question: "How do employees request help?",
+        answer: "Usually by phone, email, or a simple ticket process—whatever you prefer. The goal is fast response and clear communication."
+      },
+      {
+        question: "Can you resolve issues remotely?",
+        answer: "Yes. Most help desk requests can be handled remotely, which is faster and reduces downtime."
+      },
+      {
+        question: "What types of issues does your help desk handle?",
+        answer: "Password resets, email issues, software errors, device setup, printer problems, user access, and troubleshooting."
+      },
+      {
+        question: "Do you provide on-site support if needed?",
+        answer: "Yes. If an issue can’t be solved remotely, on-site service can be scheduled."
+      },
+      {
+        question: "Is help desk support available for ongoing monthly service?",
+        answer: "Yes. Many businesses include help desk support as part of managed IT services."
+      }
+    ]
+  },
+  {
+    id: "computer-support",
+    slug: "computer-support",
+    title: "Computer Support Services | Bay Area IT Services",
+    description: "Expert computer support and IT services. We resolve software and hardware issues quickly.",
+    h1: "Computer Support Services",
+    keywords: ["computer it services", "computer support"],
+    content: `
+      <p>From workstation setups to troubleshooting hardware issues, our computer support services ensure your team stays productive. We handle updates, security patches, and performance optimization for all your business computers.</p>
+      
+      <h3>Computer Support Includes</h3>
+      <ul>
+        <li>Hardware troubleshooting and repairs (Desktops & Laptops)</li>
+        <li>Performance optimization and SSD upgrades</li>
+        <li>Software installation and updates</li>
+        <li>Virus and malware removal</li>
+        <li>New computer setup and data migration</li>
+      </ul>
+
+      <h3>Common Issues We Fix</h3>
+      <ul>
+        <li>Slow computer performance and startup issues</li>
+        <li>Blue screen errors and system crashes</li>
+        <li>Network connectivity problems</li>
+        <li>Printer and scanner setup issues</li>
+        <li>Email configuration and access problems</li>
+      </ul>
+
+      <h3>On-site vs Remote Support</h3>
+      <p>We offer flexibility to meet your needs:</p>
+      <ul>
+        <li><strong>Remote Support:</strong> Fast resolution for software issues, settings, and errors without waiting for a technician to arrive.</li>
+        <li><strong>On-site Support:</strong> We come to your office for hardware repairs, physical setup, and network troubleshooting.</li>
+      </ul>
+
+      <p>Our goal is to keep your technology running smoothly so your business never stops. Whether you need a one-time fix or ongoing <a href="/business-it-support">Business IT Support</a>, we are here to help.</p>
+      <p>Learn more about our <a href="/it-support-corpus-christi">IT Support in Corpus Christi</a>.</p>
+    `,
+    relatedServices: [3, 5, 4],
+    faq: [
+      {
+        question: "What does computer support include for a business?",
+        answer: "Troubleshooting, performance improvements, device setup, updates, hardware issues, and keeping workstations reliable."
+      },
+      {
+        question: "Do you support both Windows and Mac computers?",
+        answer: "Yes. We support business environments with Windows, Mac, or mixed-device setups."
+      },
+      {
+        question: "Can you help with slow computers and performance issues?",
+        answer: "Yes. We diagnose the cause (storage, updates, malware, aging hardware) and recommend practical fixes."
+      },
+      {
+        question: "Do you handle new computer setup and employee onboarding?",
+        answer: "Yes. We can set up devices, user accounts, software, permissions, and security settings for new hires."
+      },
+      {
+        question: "Do you provide support for printers and office equipment?",
+        answer: "Yes. Printer and connectivity issues are common and can often be fixed remotely."
+      },
+      {
+        question: "Can you provide ongoing maintenance to prevent problems?",
+        answer: "Yes. Ongoing maintenance and monitoring reduces breakdowns and keeps systems stable."
+      }
+    ]
+  },
+  {
+    id: "managed-it",
+    slug: "managed-it-services-corpus-christi",
+    title: "Managed IT Services Corpus Christi | Proactive IT Support & Management",
+    description: "Comprehensive managed IT services in Corpus Christi. Proactive monitoring, security, and support to keep your business running smoothly.",
+    h1: "Managed IT Services in Corpus Christi",
+    keywords: ["managed it services", "managed it corpus christi", "proactive it support", "it management"],
+    content: `
+      <p>Managed IT Services provide businesses in Corpus Christi with complete IT infrastructure management – from proactive monitoring to security and strategic planning.</p>
+      <p>Instead of reacting to problems as they occur, our managed IT approach prevents issues before they impact your business.</p>
+      <h3>What's Included in Managed IT Services</h3>
+      <ul>
+        <li>24/7 network monitoring and maintenance</li>
+        <li>Cybersecurity protection and threat monitoring</li>
+        <li>Cloud services management</li>
+        <li>Regular software updates and patch management</li>
+        <li>Strategic IT planning and consulting</li>
+        <li>Backup and disaster recovery solutions</li>
+      </ul>
+      <h3>Benefits of Managed IT Services</h3>
+      <p>With managed IT services, businesses gain:</p>
+      <ul>
+        <li><strong>Predictable Costs:</strong> Fixed monthly pricing instead of unexpected repair bills</li>
+        <li><strong>Proactive Support:</strong> Issues are identified and resolved before they cause downtime</li>
+        <li><strong>Expert Team:</strong> Access to experienced IT professionals without hiring full-time staff</li>
+        <li><strong>Enhanced Security:</strong> Continuous monitoring protects against cyber threats</li>
+        <li><strong>Scalability:</strong> IT infrastructure that grows with your business needs</li>
+      </ul>
+      <p>Companies in Corpus Christi choose our managed IT services to reduce downtime, improve security, and focus on their core business operations while we handle all IT needs.</p>
+      <p>Need support for specific projects? We also offer <a href="/computer-support">Computer Support</a> and specialized <a href="/it-help-desk">Help Desk Services</a>.</p>
+    `,
+    relatedServices: [11, 6, 8],
+    faq: [
+      {
+        question: "What are managed IT services?",
+        answer: "Managed IT services are ongoing, proactive IT support—help desk, monitoring, maintenance, security basics, and planning."
+      },
+      {
+        question: "Who should use managed IT services in Corpus Christi?",
+        answer: "Businesses that want predictable IT costs, fewer emergencies, better security, and a reliable IT partner."
+      },
+      {
+        question: "What’s included in managed IT services?",
+        answer: "Typically help desk support, device monitoring, patching, endpoint protection, backup oversight, and network support."
+      },
+      {
+        question: "Do managed IT services include cybersecurity?",
+        answer: "Yes. We implement a practical baseline like MFA, patching, endpoint protection, and security best practices."
+      },
+      {
+        question: "Do you offer remote and on-site managed support?",
+        answer: "Yes. Most issues are handled remotely quickly, with on-site support available when required."
+      },
+      {
+        question: "How do you reduce downtime with managed services?",
+        answer: "By proactive monitoring, maintenance, standardized setups, and fast help desk response before issues escalate."
+      },
+      {
+        question: "How do we get started?",
+        answer: "We start with a quick assessment of your environment and goals, then set up a structured support plan."
+      }
+    ]
+  }
+];
+
+export interface BlogPostData {
+  id: string;
+  slug: string;
+  title: string;
+  description: string;
+  h1: string;
+  content: string;
+  keywords: string[];
+  category: 'authority' | 'location';
+  image?: string;
+}
+
+export const blogPostData: BlogPostData[] = [
+  {
+    id: "small-business-it-problems",
+    slug: "it-support-small-business-corpus-christi",
+    title: "IT Support for Small Businesses in Corpus Christi: Common Problems & Solutions",
+    description: "Discover the most common IT problems small businesses in Corpus Christi face and how professional IT support can help solve them efficiently.",
+    h1: "IT Support for Small Businesses in Corpus Christi: Common Problems & Solutions",
+    keywords: ["it support for small businesses", "it support", "it help", "outsourced it support", "local it services"],
+    category: "authority",
+    image: "/images/blog/it-support-small-business.png",
+    content: `
+      <p>Small businesses in Corpus Christi rely heavily on stable IT systems – yet many struggle with recurring technical issues that slow down daily operations.</p>
+      
+      <h2>Typical IT Problems We See in Local Businesses</h2>
+      <p>Without professional IT support, these issues often lead to downtime, lost productivity and security risks:</p>
+      <ul>
+        <li><strong>Slow computers and outdated systems</strong> – Aging hardware reduces efficiency and employee morale</li>
+        <li><strong>Network and Wi-Fi connectivity issues</strong> – Unreliable connections disrupt work and customer service</li>
+        <li><strong>Security risks and missing backups</strong> – Data loss can cripple a small business</li>
+        <li><strong>No clear IT contact when problems occur</strong> – Employees waste time searching for solutions</li>
+      </ul>
+
+      <h2>How Professional IT Support Helps</h2>
+      <p>With reliable IT support for small businesses, companies benefit from:</p>
+      <ul>
+        <li>Fast remote and on-site assistance when you need it</li>
+        <li>Proactive monitoring instead of reactive fixes</li>
+        <li>Clear responsibility for all IT systems</li>
+        <li>Predictable monthly costs instead of surprise repair bills</li>
+      </ul>
+
+      <p>Many local businesses choose <a href="/business-it-support">outsourced IT support</a> to avoid hiring in-house staff while still receiving professional service.</p>
+
+      <h2>Real Solutions for Corpus Christi Businesses</h2>
+      <p>Whether you're dealing with slow systems, security concerns, or simply need a reliable IT partner, professional support ensures your technology works for you, not against you.</p>
+      
+      <p>Ready to eliminate IT headaches? <a href="/it-support-corpus-christi">Learn more about our IT support services in Corpus Christi</a>.</p>
+    `
+  },
+  {
+    id: "when-to-outsource-it",
+    slug: "outsourced-it-support-corpus-christi",
+    title: "When Should Businesses Outsource IT Support in Corpus Christi?",
+    description: "Learn when outsourcing IT support makes sense for your business in Corpus Christi and the benefits it provides over in-house IT staff.",
+    h1: "When Should Businesses Outsource IT Support in Corpus Christi?",
+    keywords: ["outsourced it support", "business it support", "it service", "it help desk"],
+    category: "authority",
+    image: "/images/blog/outsourced-it-support.png",
+    content: `
+      <p>Outsourcing IT support has become a common solution for businesses that want predictable costs and professional service without the overhead of full-time staff.</p>
+
+      <h2>When Should You Consider Outsourced IT Support?</h2>
+      <p>Businesses in Corpus Christi should consider outsourced IT support when:</p>
+      <ul>
+        <li><strong>IT problems interrupt daily work</strong> – Downtime costs money and frustrates customers</li>
+        <li><strong>There is no dedicated IT employee</strong> – Relying on "the tech-savvy person" isn't sustainable</li>
+        <li><strong>Security and backups are inconsistent</strong> – One breach or data loss can be devastating</li>
+        <li><strong>The company is growing and scaling</strong> – IT needs expand faster than in-house capabilities</li>
+      </ul>
+
+      <h2>Benefits of Outsourced IT Support</h2>
+      <p>Professional IT support through an external provider offers:</p>
+      <ul>
+        <li><strong>Lower costs</strong> compared to hiring, training, and retaining in-house IT staff</li>
+        <li><strong>Access to experienced IT professionals</strong> with diverse expertise</li>
+        <li><strong>Scalable services</strong> that grow with your business needs</li>
+        <li><strong>Proactive maintenance</strong> instead of emergency firefighting</li>
+        <li><strong>Predictable monthly budgeting</strong> with no surprise repair bills</li>
+      </ul>
+
+      <h2>Is Outsourced IT Right for Your Business?</h2>
+      <p>For many companies, <a href="/business-it-support">business IT support</a> through an external provider offers the best balance between cost and reliability.</p>
+      
+      <p>If you're spending too much time dealing with IT issues instead of growing your business, it might be time to consider professional support. <a href="/it-support-corpus-christi">Contact our IT support team in Corpus Christi</a> to discuss your needs.</p>
+    `
+  },
+  {
+    id: "it-service-vs-inhouse",
+    slug: "it-service-vs-inhouse-it",
+    title: "IT Service vs In-House IT: What Works Better for Local Businesses?",
+    description: "Compare professional IT services with in-house IT staff to determine the best approach for your local business in Corpus Christi.",
+    h1: "IT Service vs In-House IT: What Works Better for Local Businesses?",
+    keywords: ["it service", "it support services", "business it support"],
+    category: "authority",
+    image: "/images/blog/it-service-comparison.png",
+    content: `
+      <p>Local businesses often face the decision between hiring in-house IT staff or working with an external IT service provider. Each approach has distinct advantages and trade-offs.</p>
+
+      <h2>In-House IT – Pros & Cons</h2>
+      <h3>Pros</h3>
+      <ul>
+        <li>Dedicated employee on site during business hours</li>
+        <li>Deep familiarity with your specific systems and processes</li>
+        <li>Immediate physical presence when needed</li>
+      </ul>
+
+      <h3>Cons</h3>
+      <ul>
+        <li><strong>High fixed salary costs</strong> – Even during slow periods, you pay full salary and benefits</li>
+        <li><strong>Limited expertise</strong> – One person can't be an expert in everything from networking to security</li>
+        <li><strong>Vacation and sick leave risks</strong> – No IT support when your IT person is unavailable</li>
+        <li><strong>Scaling challenges</strong> – Hiring more staff is expensive and time-consuming</li>
+      </ul>
+
+      <h2>Professional IT Services – Pros & Cons</h2>
+      <h3>Pros</h3>
+      <ul>
+        <li><strong>Access to a full IT team</strong> with diverse specializations</li>
+        <li><strong>Fixed monthly costs</strong> that scale with your needs</li>
+        <li><strong>Broader technical expertise</strong> across systems, security, and infrastructure</li>
+        <li><strong>No staffing gaps</strong> – Coverage during vacations, sick days, or turnover</li>
+        <li><strong>Proactive maintenance</strong> included in service plans</li>
+      </ul>
+
+      <h3>Cons</h3>
+      <ul>
+        <li>Less immediate physical presence (though most issues are resolved remotely)</li>
+        <li>Requires clear communication about your business needs</li>
+      </ul>
+
+      <h2>What Works Better?</h2>
+      <p>For most small and medium-sized businesses in Corpus Christi, professional <a href="/it-support-corpus-christi">IT support services</a> offer higher reliability and flexibility at a lower total cost than hiring full-time staff.</p>
+
+      <p>The best approach depends on your business size, complexity, and growth plans. <a href="/contact">Contact us</a> to discuss which solution fits your needs.</p>
+    `
+  },
+  {
+    id: "common-it-problems",
+    slug: "common-it-problems-businesses-corpus-christi",
+    title: "Top IT Problems Businesses in Corpus Christi Face (And How to Fix Them)",
+    description: "Identify and solve the most common IT problems that impact businesses in Corpus Christi with professional IT support solutions.",
+    h1: "Top IT Problems Businesses in Corpus Christi Face (And How to Fix Them)",
+    keywords: ["it problems businesses", "it help", "computer it services", "it support"],
+    category: "authority",
+    image: "/images/blog/common-it-problems.png",
+    content: `
+      <p>Businesses in Corpus Christi frequently encounter similar IT challenges, regardless of industry. Understanding these common issues helps you recognize when professional support makes sense.</p>
+
+      <h2>Most Common IT Issues</h2>
+      
+      <h3>1. Unreliable Networks</h3>
+      <p>Slow or unstable network connections disrupt email, cloud services, and customer interactions. Often caused by outdated equipment, improper configuration, or insufficient bandwidth.</p>
+      <p><strong>The Solution:</strong> Professional network assessment and upgrades ensure reliable connectivity.</p>
+
+      <h3>2. Missing Data Backups</h3>
+      <p>Many businesses discover backup failures only after data loss occurs. Inconsistent or untested backups put critical business information at risk.</p>
+      <p><strong>The Solution:</strong> Automated, monitored backup systems with regular testing.</p>
+
+      <h3>3. Slow Systems and Outdated Hardware</h3>
+      <p>Aging computers reduce productivity and employee satisfaction. What starts as minor slowdowns becomes major frustration.</p>
+      <p><strong>The Solution:</strong> Strategic hardware refresh cycles and system optimization.</p>
+
+      <h3>4. No Structured IT Support Process</h3>
+      <p>Without a clear system for handling IT issues, employees waste time, problems go unresolved, and small issues become emergencies.</p>
+      <p><strong>The Solution:</strong> Established <a href="/it-help-desk">IT help desk</a> with ticketing, tracking, and response time guarantees.</p>
+
+      <h3>5. Security Vulnerabilities</h3>
+      <p>Businesses without proactive security monitoring face risks from malware, phishing, and unauthorized access.</p>
+      <p><strong>The Solution:</strong> Layered security with firewalls, antivirus, employee training, and regular updates.</p>
+
+      <h2>Prevention vs. Reaction</h2>
+      <p>With structured <a href="/computer-support">computer IT services</a> and ongoing support, these issues can be prevented instead of constantly repaired.</p>
+
+      <p>Professional IT support ensures systems run reliably and securely, letting you focus on your business instead of technical problems.</p>
+
+      <p>Experiencing these issues? <a href="/it-support-corpus-christi">Learn how our IT service in Corpus Christi</a> can help.</p>
+    `
+  },
+  {
+    id: "it-support-cost",
+    slug: "it-support-cost-corpus-christi",
+    title: "What Does IT Support Cost for Businesses in Corpus Christi?",
+    description: "Understand IT support pricing for businesses in Corpus Christi and why monthly managed services often cost less than reactive IT help.",
+    h1: "What Does IT Support Cost for Businesses in Corpus Christi?",
+    keywords: ["it support cost", "it support services", "outsourced it support", "it service near me"],
+    category: "authority",
+    image: "/images/blog/it-support-cost.png",
+    content: `
+      <p>One of the most common questions businesses ask is how much IT support actually costs. The answer depends on several factors, but understanding pricing models helps you make informed decisions.</p>
+
+      <h2>Typical Cost Factors</h2>
+      <p>IT support pricing is influenced by:</p>
+      <ul>
+        <li><strong>Number of employees and devices</strong> – More users mean more support needs</li>
+        <li><strong>Required response times</strong> – Faster guaranteed response costs more</li>
+        <li><strong>Security and backup needs</strong> – Compliance requirements increase costs</li>
+        <li><strong>On-site vs remote support</strong> – Physical visits add travel time and expense</li>
+        <li><strong>Current system condition</strong> – Outdated infrastructure may need initial investment</li>
+      </ul>
+
+      <h2>Monthly IT Support vs Hourly IT Help</h2>
+      
+      <h3>Hourly Break-Fix Model</h3>
+      <ul>
+        <li>Pay only when you have problems (seems cheaper initially)</li>
+        <li>No incentive for the provider to prevent issues</li>
+        <li>Unpredictable monthly costs – emergency rates can be expensive</li>
+        <li>No proactive monitoring or maintenance</li>
+      </ul>
+
+      <h3>Monthly Managed IT Support</h3>
+      <ul>
+        <li>Fixed, predictable monthly cost</li>
+        <li>Proactive monitoring prevents problems before they occur</li>
+        <li>Regular maintenance and updates included</li>
+        <li>Faster response times with dedicated support</li>
+        <li>Strategic IT planning aligned with business goals</li>
+      </ul>
+
+      <h2>Typical Pricing Ranges (Corpus Christi Market)</h2>
+      <p>While every business is different, typical managed IT support in Corpus Christi ranges from:</p>
+      <ul>
+        <li><strong>Small offices (5-10 users):</strong> $500-$1,500/month</li>
+        <li><strong>Medium businesses (10-25 users):</strong> $1,500-$3,500/month</li>
+        <li><strong>Larger organizations (25+ users):</strong> Custom pricing based on complexity</li>
+      </ul>
+
+      <h2>Why Monthly Support Often Costs Less</h2>
+      <p>Many businesses prefer monthly <a href="/it-support-corpus-christi">IT support services</a>, as they offer predictable costs and proactive maintenance that prevents expensive emergencies.</p>
+
+      <p><a href="/business-it-support">Outsourced IT support</a> often proves more cost-effective than hiring internal IT staff when you factor in salary, benefits, training, and coverage gaps.</p>
+
+      <h2>Getting an Accurate Quote</h2>
+      <p>The best way to understand IT support costs for your specific business is a consultation that reviews your current environment, needs, and goals.</p>
+
+      <p>Ready to learn what IT support would cost for your business? <a href="/contact">Contact our team</a> for a free assessment.</p>
+    `
+  },
+
+  // Location-specific blog posts
+  {
+    id: "location-corpus-christi",
+    slug: "it-support-corpus-christi-blog",
+    title: "IT Support Corpus Christi | Business IT Services & Help Desk",
+    description: "IT Support Corpus Christi for small and mid-sized businesses. Fast help desk, outsourced IT, security, and reliable local IT services.",
+    h1: "IT Support Corpus Christi: Reliable IT Services for Local Businesses",
+    keywords: ["IT Support Corpus Christi", "IT services Corpus Christi", "business IT support Corpus Christi", "outsourced IT support Corpus Christi", "managed IT services Corpus Christi"],
+    category: "location",
+    image: "/images/blog/corpus-christi-it.png",
+    content: `
+      <img src="/images/it-support-corpus-christi.jpg" alt="IT Support Corpus Christi">
+      
+      <p>If you're searching for <strong>IT Support Corpus Christi</strong>, chances are something in your business technology is slowing you down—slow computers, Wi-Fi issues, security concerns, or recurring support tickets that keep pulling your team away from real work. Local businesses can't afford downtime, and the fastest way to reduce it is a structured support system that prevents issues before they become emergencies.</p>
+
+      <h2>Why businesses need IT Support in Corpus Christi</h2>
+      <p>Many companies run on a mix of cloud tools, email, shared drives, printers, networks, and employee devices. When even one part fails, productivity drops quickly. <strong>IT Support Corpus Christi</strong> is about keeping these systems stable, secure, and easy to use—so your team can focus on customers, not troubleshooting.</p>
+
+      <p>Common business IT pain points include:</p>
+      <ul>
+        <li>Slow PCs and aging hardware</li>
+        <li>Unreliable Wi-Fi or network bottlenecks</li>
+        <li>Email delivery issues and login problems</li>
+        <li>Lack of consistent backups</li>
+        <li>Security gaps, phishing risk, and weak passwords</li>
+        <li>"No owner" for IT—everyone tries to fix everything</li>
+      </ul>
+
+      <p>A professional <strong>IT Support Corpus Christi</strong> approach replaces chaos with a simple process: monitor, maintain, secure, support, and improve.</p>
+
+      <h2>What "good" IT support looks like in real life</h2>
+      <p>Not all IT providers work the same. The best results come when your IT partner operates like an extension of your business, with clear standards and response expectations.</p>
+
+      <p>A strong <strong>IT Support Corpus Christi</strong> setup typically includes:</p>
+      <ul>
+        <li>A help desk for day-to-day issues (remote support for speed)</li>
+        <li>On-site visits when physical work is needed</li>
+        <li>Proactive monitoring to catch issues early</li>
+        <li>Patch management and basic security hardening</li>
+        <li>Backup strategy that is tested (not just "set up")</li>
+        <li>Documentation so your environment doesn't depend on one person</li>
+      </ul>
+
+      <h2>Services included in Business IT Support</h2>
+      <p>Most local companies don't need "random fixes." They need reliable systems and predictable support. That's why many businesses choose <strong>outsourced</strong> or "managed" models rather than calling someone only when things break.</p>
+
+      <p>With <strong>IT Support Corpus Christi</strong>, businesses often need:</p>
+
+      <h3>1) Help Desk Support</h3>
+      <p>Employees need fast answers: printer issues, email logins, software errors, shared folder access, device setup. A good help desk resolves most issues remotely within minutes.</p>
+
+      <h3>2) Network & Wi-Fi Support</h3>
+      <p>Many recurring problems come from outdated routers, poor Wi-Fi layout, unmanaged switches, or misconfigured firewall settings. Network stability is a profit lever.</p>
+
+      <h3>3) Security Basics (Cyber Hygiene)</h3>
+      <p>Security doesn't have to be complicated to be effective. A practical baseline includes:</p>
+      <ul>
+        <li>multi-factor authentication (MFA)</li>
+        <li>endpoint protection</li>
+        <li>patching and updates</li>
+        <li>phishing awareness</li>
+        <li>secure password policy</li>
+        <li>least-privilege access</li>
+      </ul>
+
+      <h3>4) Backups & Recovery Planning</h3>
+      <p>Backups are only useful if recovery is possible. A reliable <strong>IT Support Corpus Christi</strong> partner ensures backups are automated, monitored, and periodically tested.</p>
+
+      <h2>Who benefits most from outsourced IT support</h2>
+      <p>Outsourcing isn't only for big companies. In fact, small and mid-sized businesses often benefit the most because they gain access to broader experience without hiring a full internal team.</p>
+
+      <p>Outsourced <strong>IT Support Corpus Christi</strong> is ideal for:</p>
+      <ul>
+        <li>small offices without dedicated IT staff</li>
+        <li>businesses growing from 5 → 20 → 50 employees</li>
+        <li>teams with multiple software tools and remote work needs</li>
+        <li>companies needing stronger security and compliance basics</li>
+        <li>owners who want one IT point of contact</li>
+      </ul>
+
+      <p>If you're building your local SEO setup right now, the best place to send people is your main service page. Learn more about our core offering here: <a href="/it-support-corpus-christi">IT support in Corpus Christi</a>.</p>
+
+      <h2>What to expect when you start</h2>
+      <p>Switching to structured <strong>IT Support Corpus Christi</strong> should feel simple and organized, not disruptive. A clean onboarding often looks like:</p>
+      <ol>
+        <li>Quick assessment of devices, users, and network</li>
+        <li>Access setup (secure admin, MFA)</li>
+        <li>Backup + security baseline</li>
+        <li>Help desk workflow for employees</li>
+        <li>Ongoing monitoring and monthly improvements</li>
+      </ol>
+
+      <p>The goal is to reduce emergencies over time. Support becomes calmer, tickets drop, and your team stops losing hours to IT distractions.</p>
+
+      <h2>Local advantage: faster response, clearer accountability</h2>
+      <p>With local businesses, trust matters. You want an IT partner who understands your environment and can show up when needed. <strong>IT Support Corpus Christi</strong> isn't just remote assistance—it's also accountability and local presence.</p>
+
+      <p>If your company needs business-focused support (not consumer PC repair), you'll typically want a service model built around uptime, security, and predictable results. For companies that want a dedicated support structure, check: <a href="/business-it-support">Business IT Support</a>.</p>
+
+      <h2>Quick FAQs</h2>
+      <p><strong>How fast can IT issues be solved?</strong><br>
+      Many problems are fixed remotely within the same day. Critical issues may require on-site response.</p>
+
+      <p><strong>Do you support both remote and on-site work?</strong><br>
+      Yes—most tickets are remote for speed, on-site is available when needed.</p>
+
+      <p><strong>Is outsourced IT expensive?</strong><br>
+      Most businesses find it cheaper than hiring internal staff, especially when you factor in coverage and experience.</p>
+
+      <h2>Next step</h2>
+      <p>If you're ready for fewer interruptions and more stable systems, <strong>IT Support Corpus Christi</strong> is the most direct way to make your technology predictable and secure. Start with a quick consultation to map out what's currently happening—and what a cleaner setup would look like.</p>
+    `
+  },
+  {
+    id: "location-portland",
+    slug: "it-support-portland-tx-blog",
+    title: "IT Support Portland TX | Business IT Services Near You",
+    description: "IT Support Portland TX for local businesses. Fast help desk, outsourced IT, network support, backups, and cybersecurity from a Coastal Bend team.",
+    h1: "IT Support Portland TX: Business IT Services That Reduce Downtime",
+    keywords: ["IT Support Portland TX", "IT services Portland TX", "business IT support Portland", "outsourced IT support Portland TX", "help desk Portland TX"],
+    category: "location",
+    image: "/images/blog/portland-tx-it.png",
+    content: `
+      <img src="/images/it-support-portland-tx.jpg" alt="IT Support Portland TX">
+      
+      <p>When businesses look for <strong>IT Support Portland TX</strong>, they're usually not looking for "tech talk"—they want results: faster computers, stable internet, secure access, and someone who picks up when something breaks. Whether you're running an office, a local service business, or a growing team, reliable IT is what keeps daily operations moving.</p>
+
+      <h2>Why IT support matters for Portland businesses</h2>
+      <p>Modern work depends on email, cloud tools, customer data, and constant connectivity. If devices are slow, Wi-Fi drops, or security is weak, work stops. A structured <strong>IT Support Portland TX</strong> plan prevents the most common problems and keeps your team productive.</p>
+
+      <p>Here's what local businesses frequently run into:</p>
+      <ul>
+        <li>Employee login problems and locked accounts</li>
+        <li>Slow workstations and failing hard drives</li>
+        <li>Wi-Fi dead zones and unstable connectivity</li>
+        <li>Security concerns (phishing, weak passwords, missing MFA)</li>
+        <li>No clear backup plan for critical files</li>
+        <li>"One person knows everything" risk</li>
+      </ul>
+
+      <p>The point of <strong>IT Support Portland TX</strong> isn't just to fix issues. It's to create a system where issues happen less often.</p>
+
+      <h2>What business-grade IT support includes</h2>
+      <p>A practical <strong>IT Support Portland TX</strong> setup usually combines day-to-day help desk services with proactive monitoring. That means fewer surprises and faster resolution.</p>
+
+      <h3>1) Help Desk (remote-first for speed)</h3>
+      <p>Most issues—email, printers, software glitches—can be fixed remotely. Remote support reduces wait time and keeps employees working.</p>
+
+      <h3>2) On-site support when you need it</h3>
+      <p>Some problems require physical presence: network equipment, workstation swaps, cabling issues, new device installs. On-site support matters for business continuity.</p>
+
+      <h3>3) Network and Wi-Fi stability</h3>
+      <p>Many "mystery issues" are network issues. A reliable network setup is often the fastest way to reduce recurring tickets.</p>
+
+      <h3>4) Security baseline</h3>
+      <p>Security doesn't need to be complicated to be effective. A strong baseline includes MFA, patching, endpoint protection, access controls, and backup monitoring. This is a core part of <strong>IT Support Portland TX</strong> for companies that care about customer trust and uninterrupted operations.</p>
+
+      <h2>Outsourced IT: why it's often the best fit</h2>
+      <p>Hiring internal IT is expensive, and one person can't cover every skill area. Outsourcing works because you get a broader range of experience and consistent coverage.</p>
+
+      <p>Outsourced <strong>IT Support Portland TX</strong> is a great fit for:</p>
+      <ul>
+        <li>small and mid-sized teams without dedicated IT</li>
+        <li>businesses that want predictable monthly costs</li>
+        <li>offices with multiple devices and shared systems</li>
+        <li>owners who want accountability and clear communication</li>
+      </ul>
+
+      <p>If you're in Portland but want a strong "home base" for service coverage, the main location hub should still be your Corpus Christi page. That's where you'll concentrate your strongest on-page SEO signals: <a href="/it-support-corpus-christi">IT support in Corpus Christi</a>.</p>
+
+      <h2>The local advantage: Coastal Bend support that can actually show up</h2>
+      <p>Remote support is great—but local businesses often want reassurance that their IT provider can show up when required. <strong>IT Support Portland TX</strong> works best when it's delivered by a team that serves the Coastal Bend consistently, not a random outsourced call center.</p>
+
+      <h2>How a typical support relationship works</h2>
+      <p>A clean onboarding for <strong>IT Support Portland TX</strong> usually looks like:</p>
+      <ol>
+        <li>Inventory of users, devices, and network</li>
+        <li>Secure access + MFA configuration</li>
+        <li>Backup setup and monitoring</li>
+        <li>Endpoint protection and patching</li>
+        <li>Help desk workflow for your team</li>
+        <li>Ongoing improvement (monthly maintenance)</li>
+      </ol>
+
+      <p>Over time, you should see fewer outages, fewer repeated issues, and better overall performance.</p>
+
+      <h2>What to look for in an IT partner</h2>
+      <p>Before choosing a provider for <strong>IT Support Portland TX</strong>, make sure they offer:</p>
+      <ul>
+        <li>clear response expectations</li>
+        <li>documented processes</li>
+        <li>business-first communication</li>
+        <li>proactive monitoring (not just reactive fixes)</li>
+        <li>security and backup fundamentals</li>
+      </ul>
+
+      <p>For many businesses, the "business support" layer is the key difference between consumer-style IT help and real managed support. If you want that model, see: <a href="/business-it-support">Business IT Support</a>.</p>
+
+      <h2>Quick FAQs</h2>
+      <p><strong>Can you support us remotely most of the time?</strong><br>
+      Yes—most day-to-day issues are resolved remotely.</p>
+
+      <p><strong>Do you handle security and backups?</strong><br>
+      Yes—security and backups are core parts of business IT support.</p>
+
+      <p><strong>Do we need a contract?</strong><br>
+      Some businesses prefer monthly support; others start with one-time help and scale from there.</p>
+
+      <h2>Next step</h2>
+      <p>If you're ready to reduce downtime and keep your team running smoothly, <strong>IT Support Portland TX</strong> is the foundation. A quick consultation can clarify what needs to be fixed now—and what should be improved to prevent future problems.</p>
+    `
+  },
+  {
+    id: "location-rockport",
+    slug: "it-support-rockport-tx-blog",
+    title: "IT Support Rockport TX | Reliable Business IT Services",
+    description: "IT Support Rockport TX for businesses. Help desk, outsourced IT, networks, backups, and security—fast remote help with on-site support available.",
+    h1: "IT Support Rockport TX: Outsourced IT Services for Local Businesses",
+    keywords: ["IT Support Rockport TX", "IT services Rockport TX", "business IT support Rockport", "outsourced IT support Rockport TX", "managed IT services Rockport"],
+    category: "location",
+    image: "/images/blog/rockport-tx-it.png",
+    content: `
+      <img src="/images/it-support-rockport-tx.jpg" alt="IT Support Rockport TX">
+      
+      <p>Searching for <strong>IT Support Rockport TX</strong> usually means your business is dealing with recurring technology issues—slow systems, network instability, security concerns, or support requests that never end. When technology becomes unpredictable, employees waste time, customers notice delays, and owners get stuck "managing IT" instead of managing growth.</p>
+
+      <h2>What businesses in Rockport typically need</h2>
+      <p>Business IT is rarely one single problem. It's a stack: devices, users, Wi-Fi, email, cloud apps, printers, and security. <strong>IT Support Rockport TX</strong> is about making that stack reliable and easy to operate.</p>
+
+      <p>Common issues include:</p>
+      <ul>
+        <li>Network drops and inconsistent Wi-Fi</li>
+        <li>Unpatched devices and outdated software</li>
+        <li>Missing or unreliable backups</li>
+        <li>Email access problems and account lockouts</li>
+        <li>Security risks from phishing and weak passwords</li>
+        <li>No consistent process to handle IT tickets</li>
+      </ul>
+
+      <p>The right <strong>IT Support Rockport TX</strong> approach reduces emergencies by putting structure behind your systems.</p>
+
+      <h2>What "outsourced IT support" actually means</h2>
+      <p>Outsourced support doesn't mean distant or generic. It means your business gets professional help without hiring an internal team. Most companies want predictable costs, faster resolution, and clearer accountability.</p>
+
+      <p>A strong <strong>IT Support Rockport TX</strong> package usually includes:</p>
+      <ul>
+        <li>Help desk for employees (remote-first)</li>
+        <li>On-site support when needed</li>
+        <li>Proactive monitoring of devices and network</li>
+        <li>Backup monitoring and recovery planning</li>
+        <li>Security hardening and patching</li>
+        <li>Documentation and ongoing improvements</li>
+      </ul>
+
+      <h2>Help desk support: the daily productivity engine</h2>
+      <p>Most employee IT issues are simple—but they add up. A structured help desk handles:</p>
+      <ul>
+        <li>password resets and account access</li>
+        <li>printer and scanning issues</li>
+        <li>Microsoft 365/Google Workspace problems</li>
+        <li>software errors and updates</li>
+        <li>shared drives and permissions</li>
+        <li>onboarding/offboarding employees</li>
+      </ul>
+
+      <p>With <strong>IT Support Rockport TX</strong>, these tasks are handled quickly and consistently, instead of interrupting your office workflow.</p>
+
+      <h2>Network reliability: where most "mystery issues" come from</h2>
+      <p>If employees say "the internet is slow" or "the system is glitchy," the network is often the hidden cause. A clean network setup includes proper firewall configuration, managed Wi-Fi, and basic monitoring.</p>
+
+      <p>This is a major benefit of professional <strong>IT Support Rockport TX</strong>—you stop chasing symptoms and fix root causes.</p>
+
+      <h2>Security and backups: the baseline every business needs</h2>
+      <p>Security doesn't have to be expensive to be effective. A practical baseline includes:</p>
+      <ul>
+        <li>MFA for email and critical tools</li>
+        <li>endpoint protection</li>
+        <li>patching and updates</li>
+        <li>phishing awareness</li>
+        <li>backup strategy with monitoring</li>
+        <li>recovery planning</li>
+      </ul>
+
+      <p>A good <strong>IT Support Rockport TX</strong> partner focuses on real-world risk reduction, not buzzwords.</p>
+
+      <h2>How local coverage should work</h2>
+      <p>Many Rockport businesses prefer an IT partner that can support them locally while operating from a strong central base. That's why we recommend keeping your primary SEO hub on the main city page, while Rockport has a location-specific authority post.</p>
+
+      <p>Your main conversion hub stays here: <a href="/it-support-corpus-christi">IT support in Corpus Christi</a>.</p>
+
+      <h2>Who benefits most from IT Support in Rockport</h2>
+      <p><strong>IT Support Rockport TX</strong> is ideal for:</p>
+      <ul>
+        <li>small and mid-sized businesses</li>
+        <li>offices and service companies</li>
+        <li>teams without dedicated IT staff</li>
+        <li>businesses with compliance or customer data</li>
+        <li>owners who want predictable IT operations</li>
+      </ul>
+
+      <p>If your business needs a structured model for ongoing support, start with the business support overview: <a href="/business-it-support">Business IT Support</a>.</p>
+
+      <h2>Quick FAQs</h2>
+      <p><strong>Do you offer remote and on-site support?</strong><br>
+      Yes—remote is fastest for most tickets, on-site is available as needed.</p>
+
+      <p><strong>Can you help us improve security?</strong><br>
+      Yes—security baselines and best practices are part of business IT support.</p>
+
+      <p><strong>Do you support cloud tools like Microsoft 365?</strong><br>
+      Yes—email, access, setup, and troubleshooting are common requests.</p>
+
+      <h2>Next step</h2>
+      <p>If your goal is fewer interruptions and more stable systems, <strong>IT Support Rockport TX</strong> is a practical investment. A short consultation can identify the biggest bottlenecks and create a plan to reduce downtime over the next 30–90 days.</p>
+    `
+  },
+  {
+    id: "location-aransas-pass",
+    slug: "it-support-aransas-pass-blog",
+    title: "IT Support Aransas Pass | Outsourced Business IT Services",
+    description: "IT Support Aransas Pass for businesses. Fast help desk, outsourced IT, network support, backups, and security. Reliable Coastal Bend IT partner.",
+    h1: "IT Support Aransas Pass: Business IT Services That Keep You Running",
+    keywords: ["IT Support Aransas Pass", "IT services Aransas Pass", "business IT support Aransas Pass", "outsourced IT support Aransas Pass", "help desk Aransas Pass"],
+    category: "location",
+    image: "/images/blog/aransas-pass-it.png",
+    content: `
+      <img src="/images/it-support-aransas-pass.jpg" alt="IT Support Aransas Pass">
+      
+      <p>If you're looking for <strong>IT Support Aransas Pass</strong>, you probably want two things: problems solved quickly and systems that don't keep breaking. For business owners, technology should be invisible—email should work, files should load fast, and employees should have a simple way to get help when something goes wrong.</p>
+
+      <h2>Why structured IT support matters</h2>
+      <p>Businesses depend on stable networks, reliable computers, and secure access. But without a support process, small issues become recurring emergencies. <strong>IT Support Aransas Pass</strong> is about putting structure behind your technology so your team can work consistently.</p>
+
+      <p>Common issues for businesses include:</p>
+      <ul>
+        <li>employees can't access email or shared files</li>
+        <li>Wi-Fi drops or weak coverage</li>
+        <li>devices slow down over time</li>
+        <li>no consistent backup strategy</li>
+        <li>security risks and phishing attempts</li>
+        <li>unclear responsibility for IT decisions</li>
+      </ul>
+
+      <p>A strong <strong>IT Support Aransas Pass</strong> approach reduces these issues through proactive maintenance and clear support workflows.</p>
+
+      <h2>What outsourced IT support includes</h2>
+      <p>Outsourced support is often the best option for small and mid-sized businesses. Instead of paying for a full internal IT employee, you get access to a broader skill set.</p>
+
+      <p>A typical <strong>IT Support Aransas Pass</strong> solution includes:</p>
+      <ul>
+        <li>help desk for employees (remote-first)</li>
+        <li>on-site support when needed</li>
+        <li>device and network monitoring</li>
+        <li>patching and updates</li>
+        <li>backup monitoring and recovery planning</li>
+        <li>security baseline configuration</li>
+        <li>documentation for continuity</li>
+      </ul>
+
+      <h2>Help desk support for employees</h2>
+      <p>Employees shouldn't waste time guessing. A reliable help desk handles:</p>
+      <ul>
+        <li>software errors and updates</li>
+        <li>password resets and access issues</li>
+        <li>printer and scanner problems</li>
+        <li>workstation performance troubleshooting</li>
+        <li>onboarding/offboarding support</li>
+      </ul>
+
+      <p>This is where <strong>IT Support Aransas Pass</strong> creates immediate value: faster fixes, fewer interruptions, and a clear path to resolution.</p>
+
+      <h2>Networks, Wi-Fi, and business reliability</h2>
+      <p>Many IT frustrations come down to network stability. A clean setup typically includes:</p>
+      <ul>
+        <li>properly configured firewall and router</li>
+        <li>managed Wi-Fi access points</li>
+        <li>secure guest Wi-Fi separation (when relevant)</li>
+        <li>monitoring and troubleshooting processes</li>
+      </ul>
+
+      <p>With professional <strong>IT Support Aransas Pass</strong>, network issues become measurable and fixable—not random and constant.</p>
+
+      <h2>Security and backups: your business safety net</h2>
+      <p>Security incidents don't only hit big companies. Smaller businesses are often targeted because their defenses are weaker. A practical baseline includes:</p>
+      <ul>
+        <li>MFA for email and admin accounts</li>
+        <li>endpoint protection</li>
+        <li>patching and updates</li>
+        <li>backup strategy that is monitored and tested</li>
+        <li>basic employee security guidance</li>
+      </ul>
+
+      <p>A real <strong>IT Support Aransas Pass</strong> partner builds this baseline and keeps it maintained.</p>
+
+      <h2>Local service area support (Coastal Bend coverage)</h2>
+      <p>Aransas Pass businesses often want a provider that is local to the region and can support them consistently. The strongest "hub" for your site is still Corpus Christi—this is where your primary service page concentrates SEO authority.</p>
+
+      <p>Use the main hub here: <a href="/it-support-corpus-christi">IT support in Corpus Christi</a>.</p>
+
+      <p>For companies that want a dedicated business model rather than one-off fixes, see: <a href="/business-it-support">Business IT Support</a>.</p>
+
+      <h2>Quick FAQs</h2>
+      <p><strong>Do you offer ongoing IT support?</strong><br>
+      Yes—monthly support is available, and one-time help can also be offered depending on your needs.</p>
+
+      <p><strong>Can you help with backups and security?</strong><br>
+      Yes—both are key parts of business IT services.</p>
+
+      <p><strong>Do you support both remote and on-site work?</strong><br>
+      Yes—remote is fastest for many issues, on-site is available when needed.</p>
+
+      <h2>Next step</h2>
+      <p>If you want less downtime, fewer recurring issues, and clearer IT ownership, <strong>IT Support Aransas Pass</strong> is the simplest path. Start with a quick assessment to identify bottlenecks, security gaps, and the fastest improvements you can make in the next 30 days.</p>
+    `
+  },
+  {
+    id: "location-kingsville",
+    slug: "it-support-kingsville-tx-blog",
+    title: "IT Support Kingsville TX | Business IT Services & Security",
+    description: "IT Support Kingsville TX for local businesses. Help desk, outsourced IT, networks, backups, and cybersecurity—fast response and reliable service.",
+    h1: "IT Support Kingsville TX: Outsourced IT Services for Businesses",
+    keywords: ["IT Support Kingsville TX", "IT services Kingsville TX", "business IT support Kingsville", "outsourced IT support Kingsville TX", "help desk Kingsville TX"],
+    category: "location",
+    image: "/images/blog/kingsville-tx-it.png",
+    content: `
+      <img src="/images/it-support-kingsville-tx.jpg" alt="IT Support Kingsville TX">
+      
+      <p>When a business searches for <strong>IT Support Kingsville TX</strong>, it usually means technology is creating friction—employees can't work smoothly, support requests pile up, or the owner is tired of playing "part-time IT." Good business IT support is less about fancy tools and more about reliability: stable systems, secure access, and fast help when something breaks.</p>
+
+      <h2>What businesses need from IT support</h2>
+      <p>Technology touches almost every workflow: quoting, billing, scheduling, customer communication, file access, and payroll. If any layer fails, productivity drops. <strong>IT Support Kingsville TX</strong> focuses on keeping those layers running reliably with a clear support process.</p>
+
+      <p>Common issues include:</p>
+      <ul>
+        <li>slow workstations that delay daily tasks</li>
+        <li>email and login issues</li>
+        <li>weak Wi-Fi coverage or unstable networks</li>
+        <li>missing backup and recovery planning</li>
+        <li>security concerns and phishing attempts</li>
+        <li>no documentation and inconsistent device setup</li>
+      </ul>
+
+      <p>A structured <strong>IT Support Kingsville TX</strong> plan solves these issues with proactive maintenance and consistent support.</p>
+
+      <h2>What outsourced IT looks like in practice</h2>
+      <p>Many businesses don't need a full internal IT department. They need predictable support, clear communication, and someone accountable for the environment. Outsourced <strong>IT Support Kingsville TX</strong> provides:</p>
+      <ul>
+        <li>help desk support for employees (remote-first)</li>
+        <li>on-site support when required</li>
+        <li>device and network monitoring</li>
+        <li>patch management and updates</li>
+        <li>backups with monitoring</li>
+        <li>security baselines (MFA, endpoint protection)</li>
+        <li>documentation and ongoing improvements</li>
+      </ul>
+
+      <h2>Help desk support: reducing daily interruptions</h2>
+      <p>The help desk is where employees feel the value immediately. A reliable help desk resolves:</p>
+      <ul>
+        <li>password resets and account lockouts</li>
+        <li>printer and scanning issues</li>
+        <li>software errors and updates</li>
+        <li>workstation performance troubleshooting</li>
+        <li>onboarding/offboarding support</li>
+      </ul>
+
+      <p>With <strong>IT Support Kingsville TX</strong>, employees know where to go, and issues don't bounce around the office.</p>
+
+      <h2>Network and Wi-Fi stability: a major productivity lever</h2>
+      <p>Network issues create "slow business." A proper network setup includes good Wi-Fi placement, stable routing/firewall configuration, and monitoring so problems are caught early.</p>
+
+      <p>Professional <strong>IT Support Kingsville TX</strong> often improves performance just by cleaning up network structure and removing bottlenecks.</p>
+
+      <h2>Security and backups: essentials for modern businesses</h2>
+      <p>Even small businesses handle sensitive customer info, payments, or internal documents. A practical baseline includes:</p>
+      <ul>
+        <li>MFA for email and important tools</li>
+        <li>endpoint protection</li>
+        <li>patching and update schedules</li>
+        <li>backup monitoring and recovery planning</li>
+        <li>basic security training for employees</li>
+      </ul>
+
+      <p>A real <strong>IT Support Kingsville TX</strong> partner focuses on simple, measurable security improvements that reduce real risk.</p>
+
+      <h2>Local coverage and the "hub" page strategy</h2>
+      <p>From an SEO standpoint, it's smart to use Corpus Christi as the central hub for your service offering, while Kingsville supports it through a unique location post.</p>
+
+      <p>Your main hub stays here: <a href="/it-support-corpus-christi">IT support in Corpus Christi</a>.</p>
+
+      <p>If your business needs an ongoing support model, see: <a href="/business-it-support">Business IT Support</a>.</p>
+
+      <h2>Quick FAQs</h2>
+      <p><strong>Do you provide remote support?</strong><br>
+      Yes—most issues can be resolved remotely for faster turnaround.</p>
+
+      <p><strong>Do you offer on-site support?</strong><br>
+      Yes—on-site service is available when physical work is needed.</p>
+
+      <p><strong>Can you help with cybersecurity and backups?</strong><br>
+      Yes—security and backup fundamentals are core parts of business IT.</p>
+
+      <h2>Next step</h2>
+      <p>If you want fewer disruptions, clearer IT ownership, and systems that stay stable, <strong>IT Support Kingsville TX</strong> is the right starting point. A short assessment can identify the biggest issues and produce a simple action plan for stability, security, and smoother daily operations.</p>
+    `
+  }
+];
+
diff --git a/src/pages/AboutPage.tsx b/src/pages/AboutPage.tsx
index 1475f83..cb30831 100644
--- a/src/pages/AboutPage.tsx
+++ b/src/pages/AboutPage.tsx
@@ -1,246 +1,246 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { motion, useInView, useSpring, useTransform, useScroll, useMotionValueEvent } from 'framer-motion';
-import Contact from '../../components/Contact';
-
-const Counter = ({ value }: { value: number }) => {
-    const ref = useRef(null);
-    const isInView = useInView(ref, { once: true, margin: "-20%" });
-    const spring = useSpring(0, { mass: 3, stiffness: 75, damping: 30 });
-    const display = useTransform(spring, (current) =>
-        value % 1 !== 0 ? current.toFixed(1) : Math.round(current).toLocaleString()
-    );
-
-    useEffect(() => {
-        if (isInView) {
-            spring.set(value);
-        }
-    }, [isInView, value, spring]);
-
-    return <motion.span ref={ref}>{display}</motion.span>;
-};
-
-const AboutPage: React.FC = () => {
-    const timelineRef = useRef<HTMLDivElement>(null);
-    const [activeTimelineIndex, setActiveTimelineIndex] = useState(0);
-
-    const { scrollYProgress } = useScroll({
-        target: timelineRef,
-        offset: ["start end", "end center"]
-    });
-
-    const heightTransform = useTransform(scrollYProgress, [0, 1], ["0%", "100%"]);
-
-    useMotionValueEvent(scrollYProgress, "change", (latest) => {
-        // Calculate index based on scroll progress with a slight offset to trigger earlier
-        const index = Math.floor(latest * 4.5); // 4 items, multiplier slightly > 4 ensures last one gets hit
-        setActiveTimelineIndex(Math.min(index, 3));
-    });
-
-    useEffect(() => {
-        window.scrollTo(0, 0);
-    }, []);
-
-    const stats = [
-        { label: 'Businesses served', value: '150+' },
-        { label: 'Uptime achieved', value: '99.9%' },
-        { label: 'Years of service', value: '15+' },
-        { label: 'Response time', value: '<2min' },
-    ];
-
-    const values = [
-        {
-            title: 'Security-First',
-            desc: 'Every solution we implement prioritizes your data security and business continuity.',
-            icon: 'security'
-        },
-        {
-            title: 'Reliability',
-            desc: 'We build systems that work consistently, so you can depend on your technology.',
-            icon: 'verified'
-        },
-        {
-            title: 'Clarity',
-            desc: 'No tech jargon or hidden fees. We explain what we do and why it matters.',
-            icon: 'visibility'
-        }
-    ];
-
-    const timeline = [
-        { year: '2010', title: 'Founded in Corpus Christi', desc: 'Started with a mission to bring enterprise-level IT solutions to local businesses.' },
-        { year: '2015', title: 'Expanded Service Portfolio', desc: 'Added cloud services and advanced networking to serve growing businesses.' },
-        { year: '2020', title: 'Remote Work Transformation', desc: 'Helped 100+ businesses transition to secure remote work during the pandemic.' },
-        { year: '2024', title: 'Leading the Coastal Bend', desc: 'Now serving 150+ businesses with modern, reliable IT infrastructure.' },
-    ];
-
-    return (
-        <div className="pt-20 min-h-screen bg-background-light dark:bg-background-dark relative overflow-x-hidden">
-            <div className="absolute top-0 left-0 right-0 h-[800px] bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(0,0,0,0.2),rgba(0,0,0,0))] dark:bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(255,255,255,0.25),rgba(255,255,255,0))] pointer-events-none" />
-
-            {/* Hero Section */}
-            <section className="relative py-20 px-6 overflow-hidden">
-                <div className="max-w-7xl mx-auto text-center relative z-10">
-                    <motion.h1
-                        initial={{ opacity: 0, y: 20 }}
-                        animate={{ opacity: 1, y: 0 }}
-                        className="font-display text-4xl md:text-6xl font-bold mb-6 text-gray-900 dark:text-white"
-                    >
-                        Local IT expertise for the <br /><span className="text-gray-500 dark:text-gray-400">Coastal Bend</span>
-                    </motion.h1>
-                    <motion.p
-                        initial={{ opacity: 0, y: 20 }}
-                        animate={{ opacity: 1, y: 0 }}
-                        transition={{ delay: 0.1 }}
-                        className="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto leading-relaxed"
-                    >
-                        Since 2010, we've been helping businesses in Corpus Christi and surrounding communities build reliable, secure technology foundations that drive growth.
-                    </motion.p>
-                </div>
-            </section>
-
-            {/* Our Story */}
-            <section className="py-20 px-6 relative bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(0,0,0,0.05),rgba(0,0,0,0))] dark:bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(255,255,255,0.05),rgba(255,255,255,0))]">
-                <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[500px] h-[500px] bg-gray-100/50 dark:bg-white/5 rounded-full blur-[100px] pointer-events-none" />
-                <div className="max-w-4xl mx-auto relative z-10">
-                    <h2 className="font-display text-3xl font-bold mb-8 text-gray-900 dark:text-white">Our Story</h2>
-                    <div className="prose dark:prose-invert max-w-none text-lg text-gray-600 dark:text-gray-300 space-y-6">
-                        <p>
-                            Bay Area Affiliates was founded with a simple belief: local businesses deserve the same level of IT expertise and reliability as large corporations, but with the personal touch that only comes from working with your neighbors.
-                        </p>
-                        <p>
-                            Over the years, we've watched the Coastal Bend grow and change. We've helped businesses navigate technology challenges, from the transition to cloud computing to the rapid shift to remote work. Through it all, we've maintained our commitment to clear communication, reliable solutions, and exceptional service.
-                        </p>
-                        <p>
-                            Today, we're proud to serve over 150 businesses across the region, from Corpus Christi to the smallest coastal communities. Our team combines deep technical expertise with real-world business understanding to deliver IT solutions that actually work for our clients.
-                        </p>
-                    </div>
-                </div>
-            </section>
-
-            {/* Stats */}
-            <section className="py-16 px-6 bg-white/5 backdrop-blur-sm border-y border-white/5 text-white relative">
-                <div className="absolute inset-0 bg-[radial-gradient(ellipse_60%_50%_at_50%_-20%,rgba(255,255,255,0.03),rgba(255,255,255,0))] pointer-events-none"></div>
-                <div className="max-w-7xl mx-auto grid grid-cols-2 md:grid-cols-4 gap-8 text-center relative z-10">
-                    {[
-                        { label: 'Businesses served', value: 150, suffix: '+' },
-                        { label: 'Uptime achieved', value: 99.9, suffix: '%' },
-                        { label: 'Years of service', value: 15, suffix: '+' },
-                        { label: 'Response time', value: 2, prefix: '<', suffix: 'min' },
-                    ].map((stat, index) => (
-                        <div key={index} className="p-4">
-                            <div className="text-4xl md:text-5xl font-bold mb-2 flex justify-center items-center gap-1">
-                                {stat.prefix && <span>{stat.prefix}</span>}
-                                <Counter value={stat.value} />
-                                {stat.suffix && <span>{stat.suffix}</span>}
-                            </div>
-                            <div className="text-gray-400 font-medium">{stat.label}</div>
-                        </div>
-                    ))}
-                </div>
-            </section>
-
-            {/* Values */}
-            <section className="py-24 px-6 bg-gray-50 dark:bg-black/20 relative overflow-hidden">
-                <div className="absolute inset-0 bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(255,255,255,0.05),rgba(255,255,255,0))] pointer-events-none"></div>
-                <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[500px] bg-blue-500/5 dark:bg-white/5 rounded-full blur-[120px] pointer-events-none" />
-                <div className="max-w-7xl mx-auto relative z-10">
-                    <div className="text-center mb-16">
-                        <h2 className="font-display text-3xl font-bold mb-4 text-gray-900 dark:text-white">Our Values</h2>
-                    </div>
-                    <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-                        {values.map((value, index) => (
-                            <motion.div
-                                key={index}
-                                initial={{ opacity: 0, y: 20 }}
-                                whileInView={{ opacity: 1, y: 0 }}
-                                viewport={{ once: true }}
-                                transition={{ delay: index * 0.1 }}
-                                whileHover={{ y: -5 }}
-                                className="bg-white dark:bg-[#161616] p-8 rounded-2xl shadow-lg border border-gray-100 dark:border-white/5"
-                            >
-                                <div className="w-12 h-12 bg-gray-100 dark:bg-white/10 rounded-xl flex items-center justify-center mb-6 text-gray-900 dark:text-white">
-                                    <span className="material-symbols-outlined text-2xl">{value.icon}</span>
-                                </div>
-                                <h3 className="text-xl font-bold mb-3 text-gray-900 dark:text-white">{value.title}</h3>
-                                <p className="text-gray-600 dark:text-gray-400 leading-relaxed">
-                                    {value.desc}
-                                </p>
-                            </motion.div>
-                        ))}
-                    </div>
-                </div>
-            </section>
-
-            {/* Timeline */}
-            <section className="py-24 px-6 relative" ref={timelineRef}>
-                <div className="absolute inset-0 bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(0,0,0,0.05),rgba(0,0,0,0))] dark:bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(255,255,255,0.05),rgba(255,255,255,0))] pointer-events-none"></div>
-                <div className="max-w-4xl mx-auto relative z-10">
-                    <h2 className="font-display text-3xl font-bold mb-12 text-center text-gray-900 dark:text-white">Our Journey</h2>
-
-                    <div className="space-y-12 relative">
-                        {/* Base Line */}
-                        <div className="absolute left-[19px] md:left-1/2 top-0 bottom-0 w-0.5 bg-gray-200 dark:bg-white/10 -translate-x-1/2 md:translate-x-0"></div>
-
-                        {/* Light Beam Line */}
-                        <motion.div
-                            style={{ height: heightTransform }}
-                            className="absolute left-[19px] md:left-1/2 top-[-60px] w-0.5 bg-gradient-to-b from-black via-black to-transparent dark:from-white dark:via-white dark:to-transparent origin-top shadow-[0_0_25px_2px_rgba(0,0,0,0.5)] dark:shadow-[0_0_25px_2px_rgba(255,255,255,0.7)] -translate-x-1/2 md:translate-x-0 z-10"
-                        ></motion.div>
-
-                        {timeline.map((item, index) => (
-                            <motion.div
-                                key={index}
-                                initial={{ opacity: 0, x: index % 2 === 0 ? -50 : 50 }}
-                                whileInView={{ opacity: 1, x: 0 }}
-                                viewport={{ once: true }}
-                                transition={{ duration: 0.5, delay: index * 0.1 }}
-                                className={`relative flex flex-col md:flex-row gap-8 ${index % 2 === 0 ? 'md:text-right' : 'md:flex-row-reverse md:text-left'}`}
-                            >
-                                <div className="md:w-1/2 pt-1">
-                                    <span className="inline-block px-4 py-1 rounded-full bg-gray-100 dark:bg-white/10 text-gray-900 dark:text-white font-bold text-sm mb-3">
-                                        {item.year}
-                                    </span>
-                                    <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-2">{item.title}</h3>
-                                    <p className="text-gray-600 dark:text-gray-400">{item.desc}</p>
-                                </div>
-
-                                {/* Timeline Dot */}
-                                <div className="absolute left-0 md:left-1/2 -translate-x-[5px] md:-translate-x-1/2 w-10 h-10 flex items-center justify-center z-20">
-                                    <motion.div
-                                        className="w-4 h-4 rounded-full border-2 transition-colors duration-500"
-                                        animate={index <= activeTimelineIndex ? {
-                                            backgroundColor: "#000000", // Will be white in dark mode via class if needed, checking global styles
-                                            scale: 1.5,
-                                            borderColor: "#000000",
-                                            boxShadow: "0 0 20px rgba(0,0,0,0.5)"
-                                        } : {
-                                            backgroundColor: "transparent",
-                                            scale: 1,
-                                            borderColor: "rgba(156, 163, 175, 0.5)", // gray-400
-                                            boxShadow: "none"
-                                        }}
-                                        style={{
-                                            // Manual dark mode override since animate doesn't support class names easily without variants
-                                            // Using CSS variable or just forcing white for dark mode if we knew the context, 
-                                            // but better to rely on simpler style.
-                                            // We will assume 'bg-black dark:bg-white' equivalent behavior is desired.
-                                            // To do this simply, we'll set colors that work on both or use a conditional standard div.
-                                            // Let's use standard classes for the base and animate scale/shadow.
-                                        }}
-                                    >
-                                        <div className={`w-full h-full rounded-full ${index <= activeTimelineIndex ? 'bg-black dark:bg-white' : 'bg-gray-200 dark:bg-white/20'}`} />
-                                    </motion.div>
-                                </div>
-                                <div className="md:w-1/2"></div>
-                            </motion.div>
-                        ))}
-                    </div>
-                </div>
-            </section>
-
-            <Contact />
-        </div>
-    );
-};
-
-
-export default AboutPage;
+import React, { useEffect, useRef, useState } from 'react';
+import { motion, useInView, useSpring, useTransform, useScroll, useMotionValueEvent } from 'framer-motion';
+import Contact from '../../components/Contact';
+
+const Counter = ({ value }: { value: number }) => {
+    const ref = useRef(null);
+    const isInView = useInView(ref, { once: true, margin: "-20%" });
+    const spring = useSpring(0, { mass: 3, stiffness: 75, damping: 30 });
+    const display = useTransform(spring, (current) =>
+        value % 1 !== 0 ? current.toFixed(1) : Math.round(current).toLocaleString()
+    );
+
+    useEffect(() => {
+        if (isInView) {
+            spring.set(value);
+        }
+    }, [isInView, value, spring]);
+
+    return <motion.span ref={ref}>{display}</motion.span>;
+};
+
+const AboutPage: React.FC = () => {
+    const timelineRef = useRef<HTMLDivElement>(null);
+    const [activeTimelineIndex, setActiveTimelineIndex] = useState(0);
+
+    const { scrollYProgress } = useScroll({
+        target: timelineRef,
+        offset: ["start end", "end center"]
+    });
+
+    const heightTransform = useTransform(scrollYProgress, [0, 1], ["0%", "100%"]);
+
+    useMotionValueEvent(scrollYProgress, "change", (latest) => {
+        // Calculate index based on scroll progress with a slight offset to trigger earlier
+        const index = Math.floor(latest * 4.5); // 4 items, multiplier slightly > 4 ensures last one gets hit
+        setActiveTimelineIndex(Math.min(index, 3));
+    });
+
+    useEffect(() => {
+        window.scrollTo(0, 0);
+    }, []);
+
+    const stats = [
+        { label: 'Businesses served', value: '150+' },
+        { label: 'Uptime achieved', value: '99.9%' },
+        { label: 'Years of service', value: '15+' },
+        { label: 'Response time', value: '<2min' },
+    ];
+
+    const values = [
+        {
+            title: 'Security-First',
+            desc: 'Every solution we implement prioritizes your data security and business continuity.',
+            icon: 'security'
+        },
+        {
+            title: 'Reliability',
+            desc: 'We build systems that work consistently, so you can depend on your technology.',
+            icon: 'verified'
+        },
+        {
+            title: 'Clarity',
+            desc: 'No tech jargon or hidden fees. We explain what we do and why it matters.',
+            icon: 'visibility'
+        }
+    ];
+
+    const timeline = [
+        { year: '2010', title: 'Founded in Corpus Christi', desc: 'Started with a mission to bring enterprise-level IT solutions to local businesses.' },
+        { year: '2015', title: 'Expanded Service Portfolio', desc: 'Added cloud services and advanced networking to serve growing businesses.' },
+        { year: '2020', title: 'Remote Work Transformation', desc: 'Helped 100+ businesses transition to secure remote work during the pandemic.' },
+        { year: '2024', title: 'Leading the Coastal Bend', desc: 'Now serving 150+ businesses with modern, reliable IT infrastructure.' },
+    ];
+
+    return (
+        <div className="pt-20 min-h-screen bg-background-light dark:bg-background-dark relative overflow-x-hidden">
+            <div className="absolute top-0 left-0 right-0 h-[800px] bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(0,0,0,0.2),rgba(0,0,0,0))] dark:bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(255,255,255,0.25),rgba(255,255,255,0))] pointer-events-none" />
+
+            {/* Hero Section */}
+            <section className="relative py-20 px-6 overflow-hidden">
+                <div className="max-w-7xl mx-auto text-center relative z-10">
+                    <motion.h1
+                        initial={{ opacity: 0, y: 20 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        className="font-display text-4xl md:text-6xl font-bold mb-6 text-gray-900 dark:text-white"
+                    >
+                        Local IT expertise for the <br /><span className="text-gray-500 dark:text-gray-400">Coastal Bend</span>
+                    </motion.h1>
+                    <motion.p
+                        initial={{ opacity: 0, y: 20 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        transition={{ delay: 0.1 }}
+                        className="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto leading-relaxed"
+                    >
+                        Since 2010, we've been helping businesses in Corpus Christi and surrounding communities build reliable, secure technology foundations that drive growth.
+                    </motion.p>
+                </div>
+            </section>
+
+            {/* Our Story */}
+            <section className="py-20 px-6 relative bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(0,0,0,0.05),rgba(0,0,0,0))] dark:bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(255,255,255,0.05),rgba(255,255,255,0))]">
+                <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[500px] h-[500px] bg-gray-100/50 dark:bg-white/5 rounded-full blur-[100px] pointer-events-none" />
+                <div className="max-w-4xl mx-auto relative z-10">
+                    <h2 className="font-display text-3xl font-bold mb-8 text-gray-900 dark:text-white">Our Story</h2>
+                    <div className="prose dark:prose-invert max-w-none text-lg text-gray-600 dark:text-gray-300 space-y-6">
+                        <p>
+                            Bay Area Affiliates was founded with a simple belief: local businesses deserve the same level of IT expertise and reliability as large corporations, but with the personal touch that only comes from working with your neighbors.
+                        </p>
+                        <p>
+                            Over the years, we've watched the Coastal Bend grow and change. We've helped businesses navigate technology challenges, from the transition to cloud computing to the rapid shift to remote work. Through it all, we've maintained our commitment to clear communication, reliable solutions, and exceptional service.
+                        </p>
+                        <p>
+                            Today, we're proud to serve over 150 businesses across the region, from Corpus Christi to the smallest coastal communities. Our team combines deep technical expertise with real-world business understanding to deliver IT solutions that actually work for our clients.
+                        </p>
+                    </div>
+                </div>
+            </section>
+
+            {/* Stats */}
+            <section className="py-16 px-6 bg-white/5 backdrop-blur-sm border-y border-white/5 text-white relative">
+                <div className="absolute inset-0 bg-[radial-gradient(ellipse_60%_50%_at_50%_-20%,rgba(255,255,255,0.03),rgba(255,255,255,0))] pointer-events-none"></div>
+                <div className="max-w-7xl mx-auto grid grid-cols-2 md:grid-cols-4 gap-8 text-center relative z-10">
+                    {[
+                        { label: 'Businesses served', value: 150, suffix: '+' },
+                        { label: 'Uptime achieved', value: 99.9, suffix: '%' },
+                        { label: 'Years of service', value: 15, suffix: '+' },
+                        { label: 'Response time', value: 2, prefix: '<', suffix: 'min' },
+                    ].map((stat, index) => (
+                        <div key={index} className="p-4">
+                            <div className="text-4xl md:text-5xl font-bold mb-2 flex justify-center items-center gap-1">
+                                {stat.prefix && <span>{stat.prefix}</span>}
+                                <Counter value={stat.value} />
+                                {stat.suffix && <span>{stat.suffix}</span>}
+                            </div>
+                            <div className="text-gray-400 font-medium">{stat.label}</div>
+                        </div>
+                    ))}
+                </div>
+            </section>
+
+            {/* Values */}
+            <section className="py-24 px-6 bg-gray-50 dark:bg-black/20 relative overflow-hidden">
+                <div className="absolute inset-0 bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(255,255,255,0.05),rgba(255,255,255,0))] pointer-events-none"></div>
+                <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[500px] bg-blue-500/5 dark:bg-white/5 rounded-full blur-[120px] pointer-events-none" />
+                <div className="max-w-7xl mx-auto relative z-10">
+                    <div className="text-center mb-16">
+                        <h2 className="font-display text-3xl font-bold mb-4 text-gray-900 dark:text-white">Our Values</h2>
+                    </div>
+                    <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+                        {values.map((value, index) => (
+                            <motion.div
+                                key={index}
+                                initial={{ opacity: 0, y: 20 }}
+                                whileInView={{ opacity: 1, y: 0 }}
+                                viewport={{ once: true }}
+                                transition={{ delay: index * 0.1 }}
+                                whileHover={{ y: -5 }}
+                                className="bg-white dark:bg-[#161616] p-8 rounded-2xl shadow-lg border border-gray-100 dark:border-white/5"
+                            >
+                                <div className="w-12 h-12 bg-gray-100 dark:bg-white/10 rounded-xl flex items-center justify-center mb-6 text-gray-900 dark:text-white">
+                                    <span className="material-symbols-outlined text-2xl">{value.icon}</span>
+                                </div>
+                                <h3 className="text-xl font-bold mb-3 text-gray-900 dark:text-white">{value.title}</h3>
+                                <p className="text-gray-600 dark:text-gray-400 leading-relaxed">
+                                    {value.desc}
+                                </p>
+                            </motion.div>
+                        ))}
+                    </div>
+                </div>
+            </section>
+
+            {/* Timeline */}
+            <section className="py-24 px-6 relative" ref={timelineRef}>
+                <div className="absolute inset-0 bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(0,0,0,0.05),rgba(0,0,0,0))] dark:bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(255,255,255,0.05),rgba(255,255,255,0))] pointer-events-none"></div>
+                <div className="max-w-4xl mx-auto relative z-10">
+                    <h2 className="font-display text-3xl font-bold mb-12 text-center text-gray-900 dark:text-white">Our Journey</h2>
+
+                    <div className="space-y-12 relative">
+                        {/* Base Line */}
+                        <div className="absolute left-[19px] md:left-1/2 top-0 bottom-0 w-0.5 bg-gray-200 dark:bg-white/10 -translate-x-1/2 md:translate-x-0"></div>
+
+                        {/* Light Beam Line */}
+                        <motion.div
+                            style={{ height: heightTransform }}
+                            className="absolute left-[19px] md:left-1/2 top-[-60px] w-0.5 bg-gradient-to-b from-black via-black to-transparent dark:from-white dark:via-white dark:to-transparent origin-top shadow-[0_0_25px_2px_rgba(0,0,0,0.5)] dark:shadow-[0_0_25px_2px_rgba(255,255,255,0.7)] -translate-x-1/2 md:translate-x-0 z-10"
+                        ></motion.div>
+
+                        {timeline.map((item, index) => (
+                            <motion.div
+                                key={index}
+                                initial={{ opacity: 0, x: index % 2 === 0 ? -50 : 50 }}
+                                whileInView={{ opacity: 1, x: 0 }}
+                                viewport={{ once: true }}
+                                transition={{ duration: 0.5, delay: index * 0.1 }}
+                                className={`relative flex flex-col md:flex-row gap-8 ${index % 2 === 0 ? 'md:text-right' : 'md:flex-row-reverse md:text-left'}`}
+                            >
+                                <div className="md:w-1/2 pt-1">
+                                    <span className="inline-block px-4 py-1 rounded-full bg-gray-100 dark:bg-white/10 text-gray-900 dark:text-white font-bold text-sm mb-3">
+                                        {item.year}
+                                    </span>
+                                    <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-2">{item.title}</h3>
+                                    <p className="text-gray-600 dark:text-gray-400">{item.desc}</p>
+                                </div>
+
+                                {/* Timeline Dot */}
+                                <div className="absolute left-0 md:left-1/2 -translate-x-[5px] md:-translate-x-1/2 w-10 h-10 flex items-center justify-center z-20">
+                                    <motion.div
+                                        className="w-4 h-4 rounded-full border-2 transition-colors duration-500"
+                                        animate={index <= activeTimelineIndex ? {
+                                            backgroundColor: "#000000", // Will be white in dark mode via class if needed, checking global styles
+                                            scale: 1.5,
+                                            borderColor: "#000000",
+                                            boxShadow: "0 0 20px rgba(0,0,0,0.5)"
+                                        } : {
+                                            backgroundColor: "transparent",
+                                            scale: 1,
+                                            borderColor: "rgba(156, 163, 175, 0.5)", // gray-400
+                                            boxShadow: "none"
+                                        }}
+                                        style={{
+                                            // Manual dark mode override since animate doesn't support class names easily without variants
+                                            // Using CSS variable or just forcing white for dark mode if we knew the context, 
+                                            // but better to rely on simpler style.
+                                            // We will assume 'bg-black dark:bg-white' equivalent behavior is desired.
+                                            // To do this simply, we'll set colors that work on both or use a conditional standard div.
+                                            // Let's use standard classes for the base and animate scale/shadow.
+                                        }}
+                                    >
+                                        <div className={`w-full h-full rounded-full ${index <= activeTimelineIndex ? 'bg-black dark:bg-white' : 'bg-gray-200 dark:bg-white/20'}`} />
+                                    </motion.div>
+                                </div>
+                                <div className="md:w-1/2"></div>
+                            </motion.div>
+                        ))}
+                    </div>
+                </div>
+            </section>
+
+            <Contact />
+        </div>
+    );
+};
+
+
+export default AboutPage;
diff --git a/src/pages/BlogPage.tsx b/src/pages/BlogPage.tsx
index 93a4a6c..d748922 100644
--- a/src/pages/BlogPage.tsx
+++ b/src/pages/BlogPage.tsx
@@ -1,104 +1,81 @@
-import React, { useEffect } from 'react';
-import { motion } from 'framer-motion';
-import Contact from '../../components/Contact';
-
-const posts = [
-    {
-        id: 1,
-        title: 'Upgrade your HDD to SSD for a big speed boost',
-        excerpt: 'A practical checklist for Corpus Christi business owners considering SSD upgrades, including before/after performance comparisons and cost analysis.',
-        image: '/assets/services/desktop-hardware.png',
-        category: 'Hardware',
-        readTime: '5 min read',
-        date: 'Jan 15, 2026'
-    },
-    {
-        id: 2,
-        title: 'Secure your corporate network access with WireGuard VPN',
-        excerpt: 'Learn why Corpus Christi businesses are switching to WireGuard VPN for faster, more secure remote access, and how to implement it properly in the Coastal Bend.',
-        image: '/assets/services/vpn-setup.png',
-        category: 'Security',
-        readTime: '7 min read',
-        date: 'Jan 10, 2026'
-    },
-    {
-        id: 3,
-        title: 'What comprehensive IT support looks like for SMBs',
-        excerpt: 'Understanding the full scope of managed IT services for Corpus Christi small businesses: from hardware and network infrastructure to virtualization and helpdesk support.',
-        image: '/assets/services/network-infrastructure.png',
-        category: 'Strategy',
-        readTime: '6 min read',
-        date: 'Jan 05, 2026'
-    }
-];
-
-const BlogPage: React.FC = () => {
-    useEffect(() => {
-        window.scrollTo(0, 0);
-    }, []);
-
-    return (
-        <div className="pt-20 min-h-screen bg-background-light dark:bg-background-dark relative overflow-x-hidden">
-            <div className="absolute top-0 left-0 right-0 h-[800px] bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(0,0,0,0.2),rgba(0,0,0,0))] dark:bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(255,255,255,0.25),rgba(255,255,255,0))] pointer-events-none" />
-            <div className="absolute top-[300px] left-1/2 -translate-x-1/2 w-[800px] h-[800px] bg-gray-100/50 dark:bg-white/5 rounded-full blur-[120px] pointer-events-none" />
-            <section className="py-20 px-6 bg-white dark:bg-[#0f0f0f] border-b border-gray-100 dark:border-white/5 relative bg-transparent">
-                <div className="max-w-4xl mx-auto text-center relative z-10">
-                    <span className="text-blue-600 dark:text-blue-400 font-bold tracking-widest uppercase text-sm mb-3 block">Latest Insights</span>
-                    <h1 className="font-display text-4xl md:text-5xl font-bold mb-6 text-gray-900 dark:text-white">
-                        Tech insights for the <br /><span className="text-gray-400">Coastal Bend business.</span>
-                    </h1>
-                </div>
-            </section>
-
-            <section className="py-16 px-6 bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(0,0,0,0.05),rgba(0,0,0,0))] dark:bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(255,255,255,0.05),rgba(255,255,255,0))]">
-                <div className="max-w-5xl mx-auto space-y-16">
-                    {posts.map((post) => (
-                        <motion.div
-                            key={post.id}
-                            initial={{ opacity: 0, y: 20 }}
-                            whileInView={{ opacity: 1, y: 0 }}
-                            viewport={{ once: true, margin: "-100px" }}
-                            whileHover={{ y: -5 }}
-                            className="group grid md:grid-cols-2 gap-0 bg-white dark:bg-[#161616] rounded-3xl overflow-hidden shadow-lg border border-gray-100 dark:border-white/5 hover:shadow-2xl hover:shadow-blue-900/10 transition-all duration-300"
-                        >
-                            <div className="h-64 md:h-auto overflow-hidden relative">
-                                <img
-                                    src={post.image}
-                                    alt={post.title}
-                                    className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"
-                                />
-                                <div className="absolute top-4 left-4">
-                                    <span className="px-3 py-1 bg-black/70 backdrop-blur-md text-white text-xs font-bold rounded-full border border-white/20">
-                                        {post.category}
-                                    </span>
-                                </div>
-                            </div>
-                            <div className="p-8 md:p-12 flex flex-col justify-center">
-                                <div className="flex items-center gap-4 text-sm text-gray-500 dark:text-gray-400 mb-4">
-                                    <span>{post.date}</span>
-                                    <span className="w-1 h-1 rounded-full bg-gray-300 dark:bg-gray-600"></span>
-                                    <span>{post.readTime}</span>
-                                </div>
-                                <h2 className="text-2xl font-bold mb-4 text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
-                                    {post.title}
-                                </h2>
-                                <p className="text-gray-600 dark:text-gray-300 leading-relaxed mb-8">
-                                    {post.excerpt}
-                                </p>
-                                <div className="mt-auto">
-                                    <span className="inline-flex items-center gap-2 font-bold text-blue-600 dark:text-white group-hover:gap-3 transition-all">
-                                        Read article <span className="material-symbols-outlined text-sm">arrow_forward</span>
-                                    </span>
-                                </div>
-                            </div>
-                        </motion.div>
-                    ))}
-                </div>
-            </section>
-
-            <Contact />
-        </div>
-    );
-};
-
-export default BlogPage;
+import React, { useEffect } from 'react';
+import { motion } from 'framer-motion';
+import { Link } from 'react-router-dom';
+import Contact from '../../components/Contact';
+import { blogPostData } from '../data/seoData';
+
+const BlogPage: React.FC = () => {
+    useEffect(() => {
+        window.scrollTo(0, 0);
+    }, []);
+
+    return (
+        <div className="pt-20 min-h-screen bg-background-light dark:bg-background-dark relative overflow-x-hidden">
+            <div className="absolute top-0 left-0 right-0 h-[800px] bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(0,0,0,0.2),rgba(0,0,0,0))] dark:bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(255,255,255,0.25),rgba(255,255,255,0))] pointer-events-none" />
+            <div className="absolute top-[300px] left-1/2 -translate-x-1/2 w-[800px] h-[800px] bg-gray-100/50 dark:bg-white/5 rounded-full blur-[120px] pointer-events-none" />
+            <section className="py-20 px-6 bg-white dark:bg-[#0f0f0f] border-b border-gray-100 dark:border-white/5 relative bg-transparent">
+                <div className="max-w-4xl mx-auto text-center relative z-10">
+                    <span className="text-blue-600 dark:text-blue-400 font-bold tracking-widest uppercase text-sm mb-3 block">Latest Insights</span>
+                    <h1 className="font-display text-4xl md:text-5xl font-bold mb-6 text-gray-900 dark:text-white">
+                        Tech insights for the <br /><span className="text-gray-400">Coastal Bend business.</span>
+                    </h1>
+                </div>
+            </section>
+
+            <section className="py-16 px-6 bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(0,0,0,0.05),rgba(0,0,0,0))] dark:bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(255,255,255,0.05),rgba(255,255,255,0))]">
+                <div className="max-w-5xl mx-auto space-y-16">
+                    {blogPostData.map((post) => (
+                        <Link
+                            key={post.id}
+                            to={`/${post.slug}`}
+                            className="block"
+                        >
+                            <motion.div
+                                initial={{ opacity: 0, y: 20 }}
+                                whileInView={{ opacity: 1, y: 0 }}
+                                viewport={{ once: true, margin: "-100px" }}
+                                whileHover={{ y: -5 }}
+                                className="group grid md:grid-cols-2 gap-0 bg-white dark:bg-[#161616] rounded-3xl overflow-hidden shadow-lg border border-gray-100 dark:border-white/5 hover:shadow-2xl hover:shadow-blue-900/10 transition-all duration-300"
+                            >
+                                <div className="h-64 md:h-auto overflow-hidden relative">
+                                    <img
+                                        src={post.image || '/images/blog/default.png'}
+                                        alt={post.h1}
+                                        className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"
+                                    />
+                                    <div className="absolute top-4 left-4">
+                                        <span className="px-3 py-1 bg-black/70 backdrop-blur-md text-white text-xs font-bold rounded-full border border-white/20">
+                                            {post.category === 'authority' ? 'IT Insights' : 'Local Services'}
+                                        </span>
+                                    </div>
+                                </div>
+                                <div className="p-8 md:p-12 flex flex-col justify-center">
+                                    <div className="flex items-center gap-4 text-sm text-gray-500 dark:text-gray-400 mb-4">
+                                        <span>Jan 2026</span>
+                                        <span className="w-1 h-1 rounded-full bg-gray-300 dark:bg-gray-600"></span>
+                                        <span>8 min read</span>
+                                    </div>
+                                    <h2 className="text-2xl font-bold mb-4 text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
+                                        {post.h1}
+                                    </h2>
+                                    <p className="text-gray-600 dark:text-gray-300 leading-relaxed mb-8">
+                                        {post.description}
+                                    </p>
+                                    <div className="mt-auto">
+                                        <span className="inline-flex items-center gap-2 font-bold text-blue-600 dark:text-white group-hover:gap-3 transition-all">
+                                            Read article <span className="material-symbols-outlined text-sm">arrow_forward</span>
+                                        </span>
+                                    </div>
+                                </div>
+                            </motion.div>
+                        </Link>
+                    ))}
+                </div>
+            </section>
+
+            <Contact />
+        </div>
+    );
+};
+
+export default BlogPage;
diff --git a/src/pages/BlogPostPage.tsx b/src/pages/BlogPostPage.tsx
new file mode 100644
index 0000000..400a868
--- /dev/null
+++ b/src/pages/BlogPostPage.tsx
@@ -0,0 +1,322 @@
+import React, { useEffect, useRef, useLayoutEffect } from 'react';
+import { motion, useMotionTemplate, useMotionValue } from 'framer-motion';
+import { Link } from 'react-router-dom';
+import gsap from 'gsap';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
+import SEO from '../../components/SEO';
+import Services from '../../components/Services';
+import CTA from '../../components/CTA';
+import AreasWeServe from '../../components/AreasWeServe';
+import { BlogPostData } from '../data/seoData';
+
+gsap.registerPlugin(ScrollTrigger);
+
+interface BlogPostPageProps {
+    data: BlogPostData;
+}
+
+const BlogPostPage: React.FC<BlogPostPageProps> = ({ data }) => {
+    const containerRef = useRef<HTMLDivElement>(null);
+    const parallaxWrapperRef = useRef<HTMLDivElement>(null);
+    const mouseX = useMotionValue(0);
+    const mouseY = useMotionValue(0);
+
+    const handleMouseMove = ({ currentTarget, clientX, clientY }: React.MouseEvent) => {
+        const { left, top } = currentTarget.getBoundingClientRect();
+        mouseX.set(clientX - left);
+        mouseY.set(clientY - top + 75);
+    };
+
+    useLayoutEffect(() => {
+        const ctx = gsap.context(() => {
+            // Parallax Background
+            if (parallaxWrapperRef.current) {
+                gsap.to(parallaxWrapperRef.current, {
+                    yPercent: 30,
+                    ease: "none",
+                    scrollTrigger: {
+                        trigger: containerRef.current,
+                        start: "top top",
+                        end: "bottom top",
+                        scrub: true
+                    }
+                });
+            }
+
+            // Text Stagger Animation
+            gsap.fromTo(".hero-stagger",
+                { y: 50, opacity: 0 },
+                { y: 0, opacity: 1, duration: 1, stagger: 0.2, ease: "power3.out", delay: 0.2 }
+            );
+        }, containerRef);
+
+        return () => ctx.revert();
+    }, []);
+
+    useEffect(() => {
+        window.scrollTo(0, 0);
+    }, []);
+
+    const category = data.slug.includes('corpus-christi-blog') ||
+        data.slug.includes('portland-tx') ||
+        data.slug.includes('rockport-tx') ||
+        data.slug.includes('aransas-pass') ||
+        data.slug.includes('kingsville-tx')
+        ? 'Local Services'
+        : 'IT Insights';
+
+    return (
+        <>
+            <SEO
+                title={data.title}
+                description={data.description}
+                keywords={data.keywords}
+                canonicalUrl={window.location.href}
+            />
+
+            <div className="min-h-screen bg-background-light dark:bg-background-dark relative overflow-x-hidden">
+                {/* Hero Section */}
+                <section
+                    ref={containerRef}
+                    onMouseMove={handleMouseMove}
+                    className="relative min-h-screen flex items-center justify-center overflow-hidden pt-20 group"
+                >
+                    {/* Parallax Background */}
+                    <div className="absolute inset-0 z-0 pointer-events-none">
+                        <div ref={parallaxWrapperRef} className="absolute w-full h-[120%] -top-[10%] left-0">
+                            {/* Base Layer */}
+                            <img
+                                alt="Abstract dark technology background"
+                                className="w-full h-full object-cover opacity-90 dark:opacity-70 brightness-75 contrast-150"
+                                src="/src/assets/hero-bg.png"
+                            />
+
+                            {/* Highlight Layer */}
+                            <motion.img
+                                style={{
+                                    maskImage: useMotionTemplate`radial-gradient(100px circle at ${mouseX}px ${mouseY}px, black, transparent)`,
+                                    WebkitMaskImage: useMotionTemplate`radial-gradient(100px circle at ${mouseX}px ${mouseY}px, black, transparent)`,
+                                }}
+                                alt=""
+                                className="absolute inset-0 w-full h-full object-cover mix-blend-screen opacity-100 brightness-150 contrast-150 filter saturate-150"
+                                src="/src/assets/hero-bg.png"
+                            />
+                        </div>
+                        <div className="absolute inset-0 bg-gradient-to-t from-background-light via-transparent to-transparent dark:from-background-dark dark:via-transparent dark:to-transparent"></div>
+                        <div className="absolute inset-0 bg-gradient-to-b from-background-light/50 dark:from-background-dark/50 to-transparent"></div>
+                    </div>
+
+                    {/* Hero Content */}
+                    <div className="relative z-10 text-center max-w-4xl px-6">
+                        {/* Breadcrumbs */}
+                        <nav className="hero-stagger mb-8 text-sm">
+                            <ol className="flex items-center gap-2 text-gray-600 dark:text-gray-400 justify-center">
+                                <li>
+                                    <Link to="/" className="hover:text-gray-900 dark:hover:text-white transition-colors">
+                                        Home
+                                    </Link>
+                                </li>
+                                <span className="material-symbols-outlined text-xs">chevron_right</span>
+                                <li>
+                                    <Link to="/blog" className="hover:text-gray-900 dark:hover:text-white transition-colors">
+                                        Blog
+                                    </Link>
+                                </li>
+                                <span className="material-symbols-outlined text-xs">chevron_right</span>
+                                <li className="text-gray-900 dark:text-white font-medium">{category}</li>
+                            </ol>
+                        </nav>
+
+                        <div className="hero-stagger flex items-center justify-center gap-2 mb-6">
+                            <span className="h-px w-8 bg-gray-400 dark:bg-gray-500"></span>
+                            <span className="text-xs uppercase tracking-[0.2em] text-gray-600 dark:text-gray-400 font-medium">
+                                {category}
+                            </span>
+                            <span className="h-px w-8 bg-gray-400 dark:bg-gray-500"></span>
+                        </div>
+
+                        <h1 className="hero-stagger font-display text-4xl md:text-6xl lg:text-7xl font-medium tracking-tighter leading-[1.1] mb-8 text-gray-900 dark:text-white">
+                            {data.h1}
+                        </h1>
+
+                        {/* Meta Info */}
+                        <div className="hero-stagger flex items-center gap-6 text-gray-600 dark:text-gray-400 mb-8 justify-center">
+                            <div className="flex items-center gap-2">
+                                <span className="material-symbols-outlined text-sm">schedule</span>
+                                <span>5 min read</span>
+                            </div>
+                            <div className="flex items-center gap-2">
+                                <span className="material-symbols-outlined text-sm">calendar_today</span>
+                                <span>January 2025</span>
+                            </div>
+                        </div>
+
+                        {/* Featured Image */}
+                        {data.image && (
+                            <motion.div
+                                initial={{ opacity: 0, scale: 0.95 }}
+                                animate={{ opacity: 1, scale: 1 }}
+                                transition={{ delay: 0.4, duration: 0.8 }}
+                                className="hero-stagger rounded-2xl overflow-hidden border border-gray-200 dark:border-white/10 shadow-2xl mb-8 max-w-md mx-auto"
+                            >
+                                <img
+                                    src={data.image}
+                                    alt={data.h1}
+                                    className="w-full h-auto max-h-64 object-cover"
+                                />
+                            </motion.div>
+                        )}
+
+                        <div className="hero-stagger flex flex-col sm:flex-row items-center justify-center gap-4">
+                            <motion.a
+                                href="/contact"
+                                className="px-8 py-3 bg-white dark:bg-white text-black dark:text-black rounded-full font-medium shadow-xl"
+                                whileHover={{ scale: 1.05, backgroundColor: "#3b82f6", color: "#ffffff" }}
+                                whileTap={{ scale: 0.95 }}
+                            >
+                                Get IT Support
+                            </motion.a>
+                            <motion.a
+                                href="/it-support-corpus-christi"
+                                className="px-8 py-3 bg-white/10 dark:bg-white/10 backdrop-blur-sm border-2 border-white/40 dark:border-white/40 text-white dark:text-white rounded-full font-medium shadow-xl"
+                                whileHover={{ scale: 1.05, backgroundColor: "rgba(255,255,255,0.2)", borderColor: "#ffffff" }}
+                                whileTap={{ scale: 0.95 }}
+                            >
+                                View All Services
+                            </motion.a>
+                        </div>
+                    </div>
+                </section>
+
+                {/* Main Content Section */}
+                <section className="px-6 py-16 relative">
+                    <div className="max-w-4xl mx-auto">
+                        <motion.div
+                            initial={{ opacity: 0, y: 20 }}
+                            whileInView={{ opacity: 1, y: 0 }}
+                            viewport={{ once: true }}
+                            transition={{ duration: 0.6 }}
+                            className="bg-white/80 dark:bg-white/5 backdrop-blur-xl rounded-3xl p-12 md:p-16 shadow-2xl border border-gray-100 dark:border-white/10"
+                        >
+                            <div className="prose prose-lg md:prose-xl dark:prose-invert max-w-none prose-headings:font-display prose-h2:text-3xl prose-h2:mb-6 prose-h2:mt-12 prose-h3:text-2xl prose-h3:mt-8 prose-h3:mb-4 prose-p:leading-relaxed prose-li:leading-relaxed prose-a:text-blue-600 dark:prose-a:text-blue-400 prose-a:no-underline hover:prose-a:underline prose-strong:text-gray-900 dark:prose-strong:text-white">
+                                <div dangerouslySetInnerHTML={{ __html: data.content }} />
+                            </div>
+                        </motion.div>
+                    </div>
+                </section>
+
+                {/* CTA Section */}
+                <section className="px-6 py-16">
+                    <motion.div
+                        initial={{ opacity: 0, y: 20 }}
+                        whileInView={{ opacity: 1, y: 0 }}
+                        viewport={{ once: true }}
+                        className="max-w-4xl mx-auto"
+                    >
+                        <div className="p-12 bg-gradient-to-br from-blue-50 to-gray-50 dark:from-blue-950/30 dark:to-gray-950/30 rounded-3xl border border-blue-100 dark:border-blue-900/50 shadow-xl text-center">
+                            <span className="material-symbols-outlined text-blue-600 dark:text-blue-400 text-5xl mb-6 block">
+                                {category === 'Local Services' ? 'location_on' : 'insights'}
+                            </span>
+                            <h2 className="font-display text-3xl font-bold mb-4 text-gray-900 dark:text-white">
+                                {category === 'Local Services'
+                                    ? 'Ready to Get IT Support in Your Area?'
+                                    : 'Need Expert IT Support for Your Business?'}
+                            </h2>
+                            <p className="text-lg text-gray-700 dark:text-gray-300 mb-8 max-w-2xl mx-auto">
+                                {category === 'Local Services'
+                                    ? 'Contact us today to learn how we can help your business with reliable IT support and managed services.'
+                                    : 'Let us handle your IT needs so you can focus on growing your business. Get a free consultation today.'}
+                            </p>
+                            <Link
+                                to="/contact"
+                                className="inline-flex items-center gap-3 px-10 py-5 bg-black dark:bg-white text-white dark:text-black rounded-full font-bold text-lg transition-all hover:scale-105 shadow-2xl hover:shadow-3xl"
+                            >
+                                Get Started
+                                <span className="material-symbols-outlined">arrow_forward</span>
+                            </Link>
+                        </div>
+                    </motion.div>
+                </section>
+
+                {/* Related Content Grid */}
+                <section className="px-6 py-16">
+                    <div className="max-w-6xl mx-auto">
+                        <motion.h2
+                            initial={{ opacity: 0, y: 20 }}
+                            whileInView={{ opacity: 1, y: 0 }}
+                            viewport={{ once: true }}
+                            className="font-display text-4xl font-bold mb-12 text-center text-gray-900 dark:text-white"
+                        >
+                            Why Choose Bay Area IT?
+                        </motion.h2>
+
+                        <div className="grid md:grid-cols-3 gap-8">
+                            <motion.div
+                                initial={{ opacity: 0, y: 20 }}
+                                whileInView={{ opacity: 1, y: 0 }}
+                                viewport={{ once: true }}
+                                transition={{ delay: 0.1 }}
+                                className="p-8 bg-white dark:bg-white/5 rounded-2xl border border-gray-100 dark:border-white/10 hover:shadow-xl transition-shadow"
+                            >
+                                <span className="material-symbols-outlined text-blue-600 dark:text-blue-400 text-5xl mb-4 block">
+                                    verified_user
+                                </span>
+                                <h3 className="font-display text-xl font-bold mb-3 text-gray-900 dark:text-white">
+                                    Proven Expertise
+                                </h3>
+                                <p className="text-gray-600 dark:text-gray-300">
+                                    Years of experience serving businesses across the Coastal Bend with comprehensive IT solutions.
+                                </p>
+                            </motion.div>
+
+                            <motion.div
+                                initial={{ opacity: 0, y: 20 }}
+                                whileInView={{ opacity: 1, y: 0 }}
+                                viewport={{ once: true }}
+                                transition={{ delay: 0.2 }}
+                                className="p-8 bg-white dark:bg-white/5 rounded-2xl border border-gray-100 dark:border-white/10 hover:shadow-xl transition-shadow"
+                            >
+                                <span className="material-symbols-outlined text-blue-600 dark:text-blue-400 text-5xl mb-4 block">
+                                    support_agent
+                                </span>
+                                <h3 className="font-display text-xl font-bold mb-3 text-gray-900 dark:text-white">
+                                    24/7 Support
+                                </h3>
+                                <p className="text-gray-600 dark:text-gray-300">
+                                    Round-the-clock monitoring and support to keep your business running smoothly at all times.
+                                </p>
+                            </motion.div>
+
+                            <motion.div
+                                initial={{ opacity: 0, y: 20 }}
+                                whileInView={{ opacity: 1, y: 0 }}
+                                viewport={{ once: true }}
+                                transition={{ delay: 0.3 }}
+                                className="p-8 bg-white dark:bg-white/5 rounded-2xl border border-gray-100 dark:border-white/10 hover:shadow-xl transition-shadow"
+                            >
+                                <span className="material-symbols-outlined text-blue-600 dark:text-blue-400 text-5xl mb-4 block">
+                                    handshake
+                                </span>
+                                <h3 className="font-display text-xl font-bold mb-3 text-gray-900 dark:text-white">
+                                    Local Partnership
+                                </h3>
+                                <p className="text-gray-600 dark:text-gray-300">
+                                    A trusted local partner who understands your community and business needs.
+                                </p>
+                            </motion.div>
+                        </div>
+                    </div>
+                </section>
+
+                {/* Services Section */}
+                <Services preview={true} />
+
+                {/* Areas We Serve & CTA */}
+                <AreasWeServe />
+                <CTA />
+            </div>
+        </>
+    );
+};
+
+export default BlogPostPage;
diff --git a/src/pages/ContactPage.tsx b/src/pages/ContactPage.tsx
index 4152a1d..a99584a 100644
--- a/src/pages/ContactPage.tsx
+++ b/src/pages/ContactPage.tsx
@@ -1,207 +1,207 @@
-import React, { useEffect } from 'react';
-import { motion } from 'framer-motion';
-
-const ContactPage: React.FC = () => {
-    useEffect(() => {
-        window.scrollTo(0, 0);
-    }, []);
-
-    const faqs = [
-        { q: 'How quickly can you start?', a: 'Most assessments can begin within 48 hours of contact. Emergency support is available 24/7.' },
-        { q: 'How do you price services?', a: 'Transparent monthly pricing based on devices and services needed. No hidden fees or surprise charges.' },
-        { q: 'What\'s included in support?', a: '24/7 monitoring, helpdesk, proactive maintenance, security updates, and SLA guarantees.' },
-    ];
-
-    return (
-        <div className="pt-20 min-h-screen bg-background-light dark:bg-background-dark relative overflow-x-hidden">
-            <div className="absolute top-0 left-0 right-0 h-[800px] bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(0,0,0,0.2),rgba(0,0,0,0))] dark:bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(255,255,255,0.25),rgba(255,255,255,0))] pointer-events-none" />
-            <div className="absolute bottom-0 right-0 w-[500px] h-[500px] bg-gray-100/50 dark:bg-white/5 rounded-full blur-[100px] pointer-events-none" />
-            {/* Hero */}
-            <section className="py-20 px-6 text-center border-b border-white/5 relative z-10">
-                <h1 className="font-display text-4xl md:text-5xl font-bold mb-6 text-white">
-                    Let's talk about <br /><span className="text-gray-500">your IT needs</span>
-                </h1>
-                <p className="text-xl text-gray-400 max-w-2xl mx-auto">
-                    Ready to improve your technology? We're here to help. Get started with a free consultation and see how we can make your IT work better for you.
-                </p>
-            </section>
-
-            <section className="py-24 px-6 bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(0,0,0,0.05),rgba(0,0,0,0))] dark:bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(255,255,255,0.05),rgba(255,255,255,0))]">
-                <div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-16">
-
-                    {/* Left: Contact Form */}
-                    <motion.div
-                        initial={{ opacity: 0, x: -20 }}
-                        animate={{ opacity: 1, x: 0 }}
-                        className="bg-white/5 backdrop-blur-sm p-8 md:p-10 rounded-3xl shadow-xl border border-white/10"
-                    >
-                        <h3 className="text-2xl font-bold mb-8 text-white">Send us a message</h3>
-                        <form className="space-y-6">
-                            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                                <div>
-                                    <label htmlFor="name" className="block text-sm font-medium text-gray-300 mb-2">Name *</label>
-                                    <input type="text" id="name" required className="w-full px-4 py-3 rounded-xl bg-black/20 border border-white/10 focus:border-white/30 focus:ring-1 focus:ring-white/30 outline-none transition-all text-white placeholder-gray-600" placeholder="John Doe" />
-                                </div>
-                                <div>
-                                    <label htmlFor="phone" className="block text-sm font-medium text-gray-300 mb-2">Phone</label>
-                                    <input type="tel" id="phone" className="w-full px-4 py-3 rounded-xl bg-black/20 border border-white/10 focus:border-white/30 focus:ring-1 focus:ring-white/30 outline-none transition-all text-white placeholder-gray-600" placeholder="(555) 000-0000" />
-                                </div>
-                            </div>
-                            <div>
-                                <label htmlFor="email" className="block text-sm font-medium text-gray-300 mb-2">Email *</label>
-                                <input type="email" id="email" required className="w-full px-4 py-3 rounded-xl bg-black/20 border border-white/10 focus:border-white/30 focus:ring-1 focus:ring-white/30 outline-none transition-all text-white placeholder-gray-600" placeholder="john@company.com" />
-                            </div>
-                            <div>
-                                <label htmlFor="company" className="block text-sm font-medium text-gray-300 mb-2">Company</label>
-                                <input type="text" id="company" className="w-full px-4 py-3 rounded-xl bg-black/20 border border-white/10 focus:border-white/30 focus:ring-1 focus:ring-white/30 outline-none transition-all text-white placeholder-gray-600" placeholder="Acme Inc." />
-                            </div>
-                            <div>
-                                <label htmlFor="message" className="block text-sm font-medium text-gray-300 mb-2">Message *</label>
-                                <textarea id="message" rows={4} required className="w-full px-4 py-3 rounded-xl bg-black/20 border border-white/10 focus:border-white/30 focus:ring-1 focus:ring-white/30 outline-none transition-all text-white placeholder-gray-600 resize-none" placeholder="How can we help you?"></textarea>
-                            </div>
-                            <button type="submit" className="w-full py-4 bg-white text-black font-bold rounded-xl transition-all hover:bg-gray-200 hover:scale-[1.02] shadow-[0_0_20px_rgba(255,255,255,0.1)]">
-                                Send Message
-                            </button>
-                        </form>
-                    </motion.div>
-
-                    {/* Right: FAQ & Info */}
-                    <motion.div
-                        initial={{ opacity: 0, x: 20 }}
-                        animate={{ opacity: 1, x: 0 }}
-                        transition={{ delay: 0.2 }}
-                        className="space-y-12"
-                    >
-                        {/* Contact Info */}
-                        <div className="grid sm:grid-cols-2 gap-8">
-                            <div className="bg-white/5 backdrop-blur-sm p-6 rounded-2xl border border-white/10 hover:border-white/20 transition-colors">
-                                <div className="w-10 h-10 bg-white/10 rounded-full flex items-center justify-center text-white mb-4">
-                                    <span className="material-symbols-outlined">call</span>
-                                </div>
-                                <h4 className="font-bold text-white mb-1">Phone</h4>
-                                <p className="text-gray-400">(361) 765-8400</p>
-                            </div>
-                            <div className="bg-white/5 backdrop-blur-sm p-6 rounded-2xl border border-white/10 hover:border-white/20 transition-colors">
-                                <div className="w-10 h-10 bg-white/10 rounded-full flex items-center justify-center text-white mb-4">
-                                    <span className="material-symbols-outlined">location_on</span>
-                                </div>
-                                <h4 className="font-bold text-white mb-1">Address</h4>
-                                <p className="text-gray-400">1001 Blucher St,<br />Corpus Christi, TX 78401</p>
-                            </div>
-                        </div>
-
-                        <div className="bg-white/5 backdrop-blur-sm p-8 rounded-2xl border border-white/10">
-                            <h4 className="font-bold text-white mb-4">Hours & Area</h4>
-                            <p className="text-gray-400 mb-2"><span className="font-semibold text-white">Mon - Fri:</span> 8:00 AM - 6:00 PM</p>
-                            <p className="text-gray-500 text-sm mb-4">(Emergency support: 24/7)</p>
-                            <p className="text-gray-400"><span className="font-semibold text-white">Service Area:</span> Corpus Christi & the Coastal Bend (including Portland, Rockport, Aransas Pass, Kingsville, Port Aransas)</p>
-                        </div>
-
-                        {/* FAQ */}
-                        <div>
-                            <h3 className="text-2xl font-bold mb-6 text-white">Quick Answers</h3>
-                            <div className="space-y-4">
-                                {faqs.map((faq, index) => (
-                                    <div key={index} className="bg-white/5 backdrop-blur-sm p-6 rounded-2xl border border-white/10 hover:border-white/30 transition-colors">
-                                        <h4 className="font-bold text-white mb-2">{faq.q}</h4>
-                                        <p className="text-gray-400 text-sm leading-relaxed">{faq.a}</p>
-                                    </div>
-                                ))}
-                            </div>
-                        </div>
-                    </motion.div>
-                </div>
-            </section>
-
-            {/* What Happens Next Section */}
-            <section className="py-24 px-6 border-t border-white/5">
-                <div className="max-w-7xl mx-auto">
-                    <h2 className="font-display text-3xl md:text-4xl font-bold text-center mb-16 text-white">
-                        What happens next?
-                    </h2>
-                    <div className="grid md:grid-cols-3 gap-8">
-                        {[
-                            {
-                                step: "01",
-                                title: "We respond quickly",
-                                description: "Get a response within 24 hours, usually much faster."
-                            },
-                            {
-                                step: "02",
-                                title: "Free consultation",
-                                description: "20-minute call to understand your needs and challenges."
-                            },
-                            {
-                                step: "03",
-                                title: "Custom proposal",
-                                description: "Tailored solution with clear next steps and pricing."
-                            }
-                        ].map((item, index) => (
-                            <motion.div
-                                key={index}
-                                initial={{ opacity: 0, y: 20 }}
-                                whileInView={{ opacity: 1, y: 0 }}
-                                viewport={{ once: true }}
-                                transition={{ delay: index * 0.1 }}
-                                className="bg-white/5 backdrop-blur-sm p-8 rounded-2xl border border-white/10 hover:bg-white/10 transition-colors relative overflow-hidden group"
-                            >
-                                <div className="absolute top-0 right-0 p-8 opacity-10 font-display text-8xl font-bold text-white group-hover:scale-110 transition-transform select-none pointer-events-none">
-                                    {item.step}
-                                </div>
-                                <div className="relative z-10">
-                                    <div className="w-12 h-12 bg-white/10 rounded-full flex items-center justify-center text-white mb-6 border border-white/10">
-                                        <span className="material-symbols-outlined">
-                                            {index === 0 ? 'schedule_send' : index === 1 ? 'phone_in_talk' : 'contract_edit'}
-                                        </span>
-                                    </div>
-                                    <h3 className="text-xl font-bold text-white mb-3">{item.title}</h3>
-                                    <p className="text-gray-400 leading-relaxed">{item.description}</p>
-                                </div>
-                            </motion.div>
-                        ))}
-                    </div>
-                </div>
-            </section>
-
-            {/* Service Area Section */}
-            <section className="py-24 px-6 relative overflow-hidden">
-                <div className="absolute inset-0 bg-white/5"></div>
-                <div className="max-w-7xl mx-auto relative z-10">
-                    <div className="grid lg:grid-cols-2 gap-16 items-center">
-                        <div>
-                            <h2 className="font-display text-3xl md:text-4xl font-bold mb-6 text-white">
-                                Our Service Area
-                            </h2>
-                            <p className="text-lg text-gray-400 mb-8 leading-relaxed">
-                                Proudly serving Corpus Christi, Portland, Rockport, Aransas Pass, Kingsville, Port Aransas, and the entire Coastal Bend region.
-                            </p>
-
-                            <div className="flex flex-wrap gap-3">
-                                {['Corpus Christi', 'Portland', 'Rockport', 'Aransas Pass', 'Kingsville', 'Port Aransas'].map((city) => (
-                                    <div key={city} className="flex items-center gap-2 px-4 py-2 rounded-full bg-white/5 border border-white/10 text-gray-300">
-                                        <span className="material-symbols-outlined text-sm text-white">location_on</span>
-                                        {city}
-                                    </div>
-                                ))}
-                            </div>
-                        </div>
-
-                        <div className="h-[400px] bg-[#1a1a1a] rounded-3xl overflow-hidden border border-white/10 shadow-2xl relative">
-                            <iframe
-                                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3532.1843778537446!2d-97.39864222453538!3d27.79426697613324!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x86685f8090787b65%3A0x6762397985799732!2s1001%20Blucher%20St%2C%20Corpus%20Christi%2C%20TX%2078401!5e0!3m2!1sen!2sus!4v1709420000000!5m2!1sen!2sus"
-                                width="100%"
-                                height="100%"
-                                style={{ border: 0 }}
-                                allowFullScreen
-                                loading="lazy"
-                                referrerPolicy="no-referrer-when-downgrade"
-                            ></iframe>
-                        </div>
-                    </div>
-                </div>
-            </section>
-        </div>
-    );
-};
-
-export default ContactPage;
+import React, { useEffect } from 'react';
+import { motion } from 'framer-motion';
+
+const ContactPage: React.FC = () => {
+    useEffect(() => {
+        window.scrollTo(0, 0);
+    }, []);
+
+    const faqs = [
+        { q: 'How quickly can you start?', a: 'Most assessments can begin within 48 hours of contact. Emergency support is available 24/7.' },
+        { q: 'How do you price services?', a: 'Transparent monthly pricing based on devices and services needed. No hidden fees or surprise charges.' },
+        { q: 'What\'s included in support?', a: '24/7 monitoring, helpdesk, proactive maintenance, security updates, and SLA guarantees.' },
+    ];
+
+    return (
+        <div className="pt-20 min-h-screen bg-background-light dark:bg-background-dark relative overflow-x-hidden">
+            <div className="absolute top-0 left-0 right-0 h-[800px] bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(0,0,0,0.2),rgba(0,0,0,0))] dark:bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(255,255,255,0.25),rgba(255,255,255,0))] pointer-events-none" />
+            <div className="absolute bottom-0 right-0 w-[500px] h-[500px] bg-gray-100/50 dark:bg-white/5 rounded-full blur-[100px] pointer-events-none" />
+            {/* Hero */}
+            <section className="py-20 px-6 text-center border-b border-white/5 relative z-10">
+                <h1 className="font-display text-4xl md:text-5xl font-bold mb-6 text-white">
+                    Let's talk about <br /><span className="text-gray-500">your IT needs</span>
+                </h1>
+                <p className="text-xl text-gray-400 max-w-2xl mx-auto">
+                    Ready to improve your technology? We're here to help. Get started with a free consultation and see how we can make your IT work better for you.
+                </p>
+            </section>
+
+            <section className="py-24 px-6 bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(0,0,0,0.05),rgba(0,0,0,0))] dark:bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(255,255,255,0.05),rgba(255,255,255,0))]">
+                <div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-16">
+
+                    {/* Left: Contact Form */}
+                    <motion.div
+                        initial={{ opacity: 0, x: -20 }}
+                        animate={{ opacity: 1, x: 0 }}
+                        className="bg-white/5 backdrop-blur-sm p-8 md:p-10 rounded-3xl shadow-xl border border-white/10"
+                    >
+                        <h3 className="text-2xl font-bold mb-8 text-white">Send us a message</h3>
+                        <form className="space-y-6">
+                            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                                <div>
+                                    <label htmlFor="name" className="block text-sm font-medium text-gray-300 mb-2">Name *</label>
+                                    <input type="text" id="name" required className="w-full px-4 py-3 rounded-xl bg-black/20 border border-white/10 focus:border-white/30 focus:ring-1 focus:ring-white/30 outline-none transition-all text-white placeholder-gray-600" placeholder="John Doe" />
+                                </div>
+                                <div>
+                                    <label htmlFor="phone" className="block text-sm font-medium text-gray-300 mb-2">Phone</label>
+                                    <input type="tel" id="phone" className="w-full px-4 py-3 rounded-xl bg-black/20 border border-white/10 focus:border-white/30 focus:ring-1 focus:ring-white/30 outline-none transition-all text-white placeholder-gray-600" placeholder="(555) 000-0000" />
+                                </div>
+                            </div>
+                            <div>
+                                <label htmlFor="email" className="block text-sm font-medium text-gray-300 mb-2">Email *</label>
+                                <input type="email" id="email" required className="w-full px-4 py-3 rounded-xl bg-black/20 border border-white/10 focus:border-white/30 focus:ring-1 focus:ring-white/30 outline-none transition-all text-white placeholder-gray-600" placeholder="john@company.com" />
+                            </div>
+                            <div>
+                                <label htmlFor="company" className="block text-sm font-medium text-gray-300 mb-2">Company</label>
+                                <input type="text" id="company" className="w-full px-4 py-3 rounded-xl bg-black/20 border border-white/10 focus:border-white/30 focus:ring-1 focus:ring-white/30 outline-none transition-all text-white placeholder-gray-600" placeholder="Acme Inc." />
+                            </div>
+                            <div>
+                                <label htmlFor="message" className="block text-sm font-medium text-gray-300 mb-2">Message *</label>
+                                <textarea id="message" rows={4} required className="w-full px-4 py-3 rounded-xl bg-black/20 border border-white/10 focus:border-white/30 focus:ring-1 focus:ring-white/30 outline-none transition-all text-white placeholder-gray-600 resize-none" placeholder="How can we help you?"></textarea>
+                            </div>
+                            <button type="submit" className="w-full py-4 bg-white text-black font-bold rounded-xl transition-all hover:bg-gray-200 hover:scale-[1.02] shadow-[0_0_20px_rgba(255,255,255,0.1)]">
+                                Send Message
+                            </button>
+                        </form>
+                    </motion.div>
+
+                    {/* Right: FAQ & Info */}
+                    <motion.div
+                        initial={{ opacity: 0, x: 20 }}
+                        animate={{ opacity: 1, x: 0 }}
+                        transition={{ delay: 0.2 }}
+                        className="space-y-12"
+                    >
+                        {/* Contact Info */}
+                        <div className="grid sm:grid-cols-2 gap-8">
+                            <div className="bg-white/5 backdrop-blur-sm p-6 rounded-2xl border border-white/10 hover:border-white/20 transition-colors">
+                                <div className="w-10 h-10 bg-white/10 rounded-full flex items-center justify-center text-white mb-4">
+                                    <span className="material-symbols-outlined">call</span>
+                                </div>
+                                <h4 className="font-bold text-white mb-1">Phone</h4>
+                                <p className="text-gray-400">(361) 765-8400</p>
+                            </div>
+                            <div className="bg-white/5 backdrop-blur-sm p-6 rounded-2xl border border-white/10 hover:border-white/20 transition-colors">
+                                <div className="w-10 h-10 bg-white/10 rounded-full flex items-center justify-center text-white mb-4">
+                                    <span className="material-symbols-outlined">location_on</span>
+                                </div>
+                                <h4 className="font-bold text-white mb-1">Address</h4>
+                                <p className="text-gray-400">1001 Blucher St,<br />Corpus Christi, TX 78401</p>
+                            </div>
+                        </div>
+
+                        <div className="bg-white/5 backdrop-blur-sm p-8 rounded-2xl border border-white/10">
+                            <h4 className="font-bold text-white mb-4">Hours & Area</h4>
+                            <p className="text-gray-400 mb-2"><span className="font-semibold text-white">Mon - Fri:</span> 8:00 AM - 6:00 PM</p>
+                            <p className="text-gray-500 text-sm mb-4">(Emergency support: 24/7)</p>
+                            <p className="text-gray-400"><span className="font-semibold text-white">Service Area:</span> Corpus Christi & the Coastal Bend (including Portland, Rockport, Aransas Pass, Kingsville, Port Aransas)</p>
+                        </div>
+
+                        {/* FAQ */}
+                        <div>
+                            <h3 className="text-2xl font-bold mb-6 text-white">Quick Answers</h3>
+                            <div className="space-y-4">
+                                {faqs.map((faq, index) => (
+                                    <div key={index} className="bg-white/5 backdrop-blur-sm p-6 rounded-2xl border border-white/10 hover:border-white/30 transition-colors">
+                                        <h4 className="font-bold text-white mb-2">{faq.q}</h4>
+                                        <p className="text-gray-400 text-sm leading-relaxed">{faq.a}</p>
+                                    </div>
+                                ))}
+                            </div>
+                        </div>
+                    </motion.div>
+                </div>
+            </section>
+
+            {/* What Happens Next Section */}
+            <section className="py-24 px-6 border-t border-white/5">
+                <div className="max-w-7xl mx-auto">
+                    <h2 className="font-display text-3xl md:text-4xl font-bold text-center mb-16 text-white">
+                        What happens next?
+                    </h2>
+                    <div className="grid md:grid-cols-3 gap-8">
+                        {[
+                            {
+                                step: "01",
+                                title: "We respond quickly",
+                                description: "Get a response within 24 hours, usually much faster."
+                            },
+                            {
+                                step: "02",
+                                title: "Free consultation",
+                                description: "20-minute call to understand your needs and challenges."
+                            },
+                            {
+                                step: "03",
+                                title: "Custom proposal",
+                                description: "Tailored solution with clear next steps and pricing."
+                            }
+                        ].map((item, index) => (
+                            <motion.div
+                                key={index}
+                                initial={{ opacity: 0, y: 20 }}
+                                whileInView={{ opacity: 1, y: 0 }}
+                                viewport={{ once: true }}
+                                transition={{ delay: index * 0.1 }}
+                                className="bg-white/5 backdrop-blur-sm p-8 rounded-2xl border border-white/10 hover:bg-white/10 transition-colors relative overflow-hidden group"
+                            >
+                                <div className="absolute top-0 right-0 p-8 opacity-10 font-display text-8xl font-bold text-white group-hover:scale-110 transition-transform select-none pointer-events-none">
+                                    {item.step}
+                                </div>
+                                <div className="relative z-10">
+                                    <div className="w-12 h-12 bg-white/10 rounded-full flex items-center justify-center text-white mb-6 border border-white/10">
+                                        <span className="material-symbols-outlined">
+                                            {index === 0 ? 'schedule_send' : index === 1 ? 'phone_in_talk' : 'contract_edit'}
+                                        </span>
+                                    </div>
+                                    <h3 className="text-xl font-bold text-white mb-3">{item.title}</h3>
+                                    <p className="text-gray-400 leading-relaxed">{item.description}</p>
+                                </div>
+                            </motion.div>
+                        ))}
+                    </div>
+                </div>
+            </section>
+
+            {/* Service Area Section */}
+            <section className="py-24 px-6 relative overflow-hidden">
+                <div className="absolute inset-0 bg-white/5"></div>
+                <div className="max-w-7xl mx-auto relative z-10">
+                    <div className="grid lg:grid-cols-2 gap-16 items-center">
+                        <div>
+                            <h2 className="font-display text-3xl md:text-4xl font-bold mb-6 text-white">
+                                Our Service Area
+                            </h2>
+                            <p className="text-lg text-gray-400 mb-8 leading-relaxed">
+                                Proudly serving Corpus Christi, Portland, Rockport, Aransas Pass, Kingsville, Port Aransas, and the entire Coastal Bend region.
+                            </p>
+
+                            <div className="flex flex-wrap gap-3">
+                                {['Corpus Christi', 'Portland', 'Rockport', 'Aransas Pass', 'Kingsville', 'Port Aransas'].map((city) => (
+                                    <div key={city} className="flex items-center gap-2 px-4 py-2 rounded-full bg-white/5 border border-white/10 text-gray-300">
+                                        <span className="material-symbols-outlined text-sm text-white">location_on</span>
+                                        {city}
+                                    </div>
+                                ))}
+                            </div>
+                        </div>
+
+                        <div className="h-[400px] bg-[#1a1a1a] rounded-3xl overflow-hidden border border-white/10 shadow-2xl relative">
+                            <iframe
+                                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3532.1843778537446!2d-97.39864222453538!3d27.79426697613324!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x86685f8090787b65%3A0x6762397985799732!2s1001%20Blucher%20St%2C%20Corpus%20Christi%2C%20TX%2078401!5e0!3m2!1sen!2sus!4v1709420000000!5m2!1sen!2sus"
+                                width="100%"
+                                height="100%"
+                                style={{ border: 0 }}
+                                allowFullScreen
+                                loading="lazy"
+                                referrerPolicy="no-referrer-when-downgrade"
+                            ></iframe>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </div>
+    );
+};
+
+export default ContactPage;
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index fdd480b..beaddcc 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -1,28 +1,92 @@
-import React, { useEffect } from 'react';
-import Hero from '../../components/Hero';
-import Mission from '../../components/Mission';
-import Services from '../../components/Services';
-import Process from '../../components/Process';
-import Blog from '../../components/Blog';
-import Testimonials from '../../components/Testimonials';
-import CTA from '../../components/CTA';
-
-const HomePage: React.FC = () => {
-    useEffect(() => {
-        window.scrollTo(0, 0);
-    }, []);
-
-    return (
-        <>
-            <Hero />
-            <Mission />
-            <Services preview={true} />
-            <Process />
-            <Blog />
-            <Testimonials />
-            <CTA />
-        </>
-    );
-};
-
-export default HomePage;
+import React, { useEffect } from 'react';
+import Hero from '../../components/Hero';
+import Mission from '../../components/Mission';
+import Services from '../../components/Services';
+import Process from '../../components/Process';
+import Blog from '../../components/Blog';
+import Testimonials from '../../components/Testimonials';
+import CTA from '../../components/CTA';
+import SEO from '../../components/SEO';
+import FAQ from '../../components/FAQ';
+import AreasWeServe from '../../components/AreasWeServe';
+import { locationData } from '../data/seoData';
+
+const HomePage: React.FC = () => {
+    useEffect(() => {
+        window.scrollTo(0, 0);
+    }, []);
+
+    // Enhanced LocalBusiness Schema per SEO plan
+    const schema = {
+        "@context": "https://schema.org",
+        "@type": "ITService",
+        "name": "Bay Area IT Services",
+        "image": "https://bayarea-cc.com/logo.png",
+        "@id": "https://bayarea-cc.com",
+        "url": "https://bayarea-cc.com",
+        "telephone": "+1-361-XXX-XXXX", // TODO: Replace with actual phone
+        "priceRange": "$$",
+        "address": {
+            "@type": "PostalAddress",
+            "streetAddress": "[YOUR STREET]", // TODO: Add actual address
+            "addressLocality": "Corpus Christi",
+            "addressRegion": "TX",
+            "postalCode": "[YOUR ZIP]", // TODO: Add actual ZIP
+            "addressCountry": "US"
+        },
+        "geo": {
+            "@type": "GeoCoordinates",
+            "latitude": 27.800583,
+            "longitude": -97.39638
+        },
+        "areaServed": [
+            { "@type": "City", "name": "Corpus Christi" },
+            { "@type": "City", "name": "Portland" },
+            { "@type": "City", "name": "Rockport" },
+            { "@type": "City", "name": "Aransas Pass" },
+            { "@type": "City", "name": "Kingsville" }
+        ],
+        "serviceType": [
+            "IT Support",
+            "Business IT Support",
+            "Outsourced IT Services",
+            "Computer Network Support",
+            "Cyber Security"
+        ],
+        "openingHoursSpecification": {
+            "@type": "OpeningHoursSpecification",
+            "dayOfWeek": [
+                "Monday",
+                "Tuesday",
+                "Wednesday",
+                "Thursday",
+                "Friday"
+            ],
+            "opens": "08:00",
+            "closes": "18:00"
+        }
+    };
+
+    return (
+        <>
+            <SEO
+                title="IT Service & IT Support for Businesses in Corpus Christi, TX"
+                description="Reliable IT support and IT services for businesses in Corpus Christi, TX. Fast response, outsourced IT support & help desk solutions. Call now."
+                keywords={["IT Service", "IT Support", "Corpus Christi", "Business IT Support"]}
+                canonicalUrl={window.location.href}
+                schema={schema}
+            />
+            <Hero />
+            <Mission />
+            <Services preview={true} />
+            <Process />
+            <Blog />
+            <Testimonials />
+            <AreasWeServe />
+            <FAQ items={locationData[0].faq} />
+            <CTA />
+        </>
+    );
+};
+
+export default HomePage;
diff --git a/src/pages/LocationPage.tsx b/src/pages/LocationPage.tsx
new file mode 100644
index 0000000..df2777d
--- /dev/null
+++ b/src/pages/LocationPage.tsx
@@ -0,0 +1,214 @@
+import React, { useEffect, useRef, useLayoutEffect } from 'react';
+import { motion, useMotionTemplate, useMotionValue } from 'framer-motion';
+import { Link } from 'react-router-dom';
+import gsap from 'gsap';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
+import SEO from '../../components/SEO';
+import Services from '../../components/Services';
+import CTA from '../../components/CTA';
+import FAQ from '../../components/FAQ';
+import AreasWeServe from '../../components/AreasWeServe';
+import { LocationData } from '../data/seoData';
+
+gsap.registerPlugin(ScrollTrigger);
+
+interface LocationPageProps {
+    data: LocationData;
+}
+
+const LocationPage: React.FC<LocationPageProps> = ({ data }) => {
+    const containerRef = useRef<HTMLDivElement>(null);
+    const parallaxWrapperRef = useRef<HTMLDivElement>(null);
+    const mouseX = useMotionValue(0);
+    const mouseY = useMotionValue(0);
+
+    const handleMouseMove = ({ currentTarget, clientX, clientY }: React.MouseEvent) => {
+        const { left, top } = currentTarget.getBoundingClientRect();
+        mouseX.set(clientX - left);
+        mouseY.set(clientY - top + 75);
+    };
+
+    useLayoutEffect(() => {
+        const ctx = gsap.context(() => {
+            // Parallax Background
+            if (parallaxWrapperRef.current) {
+                gsap.to(parallaxWrapperRef.current, {
+                    yPercent: 30,
+                    ease: "none",
+                    scrollTrigger: {
+                        trigger: containerRef.current,
+                        start: "top top",
+                        end: "bottom top",
+                        scrub: true
+                    }
+                });
+            }
+
+            // Text Stagger Animation
+            gsap.fromTo(".hero-stagger",
+                { y: 50, opacity: 0 },
+                { y: 0, opacity: 1, duration: 1, stagger: 0.2, ease: "power3.out", delay: 0.2 }
+            );
+        }, containerRef);
+
+        return () => ctx.revert();
+    }, []);
+
+    useEffect(() => {
+        window.scrollTo(0, 0);
+    }, []);
+
+    const schema = {
+        "@context": "https://schema.org",
+        "@type": "LocalBusiness",
+        "name": "Bay Area IT Services",
+        "url": window.location.href,
+        "areaServed": {
+            "@type": "City",
+            "name": data.city
+        }
+    };
+
+    return (
+        <>
+            <SEO
+                title={data.title}
+                description={data.description}
+                keywords={data.keywords}
+                canonicalUrl={window.location.href}
+                schema={schema}
+            />
+
+            <div className="min-h-screen bg-background-light dark:bg-background-dark relative overflow-x-hidden">
+                {/* Hero Section */}
+                <section
+                    ref={containerRef}
+                    onMouseMove={handleMouseMove}
+                    className="relative min-h-[90vh] flex items-center justify-center overflow-hidden pt-20 group"
+                >
+                    {/* Parallax Background */}
+                    <div className="absolute inset-0 z-0 pointer-events-none">
+                        <div ref={parallaxWrapperRef} className="absolute w-full h-[120%] -top-[10%] left-0">
+                            {/* Base Layer */}
+                            <img
+                                alt="Abstract dark technology background"
+                                className="w-full h-full object-cover opacity-90 dark:opacity-70 brightness-75 contrast-150"
+                                src="/src/assets/hero-bg.png"
+                            />
+
+                            {/* Highlight Layer */}
+                            <motion.img
+                                style={{
+                                    maskImage: useMotionTemplate`radial-gradient(100px circle at ${mouseX}px ${mouseY}px, black, transparent)`,
+                                    WebkitMaskImage: useMotionTemplate`radial-gradient(100px circle at ${mouseX}px ${mouseY}px, black, transparent)`,
+                                }}
+                                alt=""
+                                className="absolute inset-0 w-full h-full object-cover mix-blend-screen opacity-100 brightness-150 contrast-150 filter saturate-150"
+                                src="/src/assets/hero-bg.png"
+                            />
+                        </div>
+                        <div className="absolute inset-0 bg-gradient-to-t from-background-light via-transparent to-transparent dark:from-background-dark dark:via-transparent dark:to-transparent"></div>
+                        <div className="absolute inset-0 bg-gradient-to-b from-background-light/50 dark:from-background-dark/50 to-transparent"></div>
+                    </div>
+
+                    {/* Hero Content */}
+                    <div className="relative z-10 text-center max-w-4xl px-6">
+                        <div className="hero-stagger flex items-center justify-center gap-2 mb-4">
+                            <span className="h-px w-8 bg-gray-400 dark:bg-gray-500"></span>
+                            <span className="text-xs uppercase tracking-[0.2em] text-gray-600 dark:text-gray-400 font-medium">
+                                {data.city}, Texas IT Support
+                            </span>
+                            <span className="h-px w-8 bg-gray-400 dark:bg-gray-500"></span>
+                        </div>
+
+                        <h1 className="hero-stagger font-display text-4xl md:text-5xl lg:text-6xl font-medium tracking-tighter leading-[1.1] mb-5 text-gray-900 dark:text-white">
+                            {data.h1.split(' ').slice(0, -2).join(' ')}<br />
+                            <span className="text-gray-500 dark:text-gray-500">
+                                {data.h1.split(' ').slice(-2).join(' ')}
+                            </span>
+                        </h1>
+
+                        <p className="hero-stagger text-base md:text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto mb-6 font-light leading-relaxed">
+                            {data.description}
+                        </p>
+
+                        <div className="hero-stagger flex flex-col sm:flex-row items-center justify-center gap-4">
+                            <motion.a
+                                href="/contact"
+                                className="px-8 py-3 bg-white dark:bg-white text-black dark:text-black rounded-full font-medium shadow-xl"
+                                whileHover={{ scale: 1.05, backgroundColor: "#3b82f6", color: "#ffffff" }}
+                                whileTap={{ scale: 0.95 }}
+                            >
+                                Get IT Support
+                            </motion.a>
+                            <motion.a
+                                href="/it-support-corpus-christi"
+                                className="px-8 py-3 bg-white/10 dark:bg-white/10 backdrop-blur-sm border-2 border-white/40 dark:border-white/40 text-white dark:text-white rounded-full font-medium shadow-xl"
+                                whileHover={{ scale: 1.05, backgroundColor: "rgba(255,255,255,0.2)", borderColor: "#ffffff" }}
+                                whileTap={{ scale: 0.95 }}
+                            >
+                                View All Services
+                            </motion.a>
+                        </div>
+                    </div>
+                </section>
+
+                {/* Main Content Section */}
+                <section className="px-6 py-16 relative">
+                    <div className="max-w-4xl mx-auto">
+                        <motion.div
+                            initial={{ opacity: 0, y: 20 }}
+                            whileInView={{ opacity: 1, y: 0 }}
+                            viewport={{ once: true }}
+                            transition={{ duration: 0.6 }}
+                            className="bg-white/80 dark:bg-white/5 backdrop-blur-xl rounded-3xl p-12 md:p-16 shadow-2xl border border-gray-100 dark:border-white/10"
+                        >
+                            <div className="prose prose-lg md:prose-xl dark:prose-invert max-w-none prose-headings:font-display prose-h2:text-3xl prose-h2:mb-6 prose-h2:mt-12 prose-h3:text-2xl prose-p:leading-relaxed prose-li:leading-relaxed prose-a:text-blue-600 dark:prose-a:text-blue-400 prose-a:no-underline hover:prose-a:underline">
+                                <div dangerouslySetInnerHTML={{ __html: data.content }} />
+                            </div>
+                        </motion.div>
+                    </div>
+                </section>
+
+                {/* Internal Linking Card (if not Corpus Christi) */}
+                {data.city !== "Corpus Christi" && (
+                    <section className="px-6 py-12">
+                        <motion.div
+                            initial={{ opacity: 0, y: 20 }}
+                            whileInView={{ opacity: 1, y: 0 }}
+                            viewport={{ once: true }}
+                            className="max-w-4xl mx-auto"
+                        >
+                            <div className="p-10 bg-gradient-to-br from-blue-50 to-gray-50 dark:from-blue-950/30 dark:to-gray-950/30 rounded-3xl border border-blue-100 dark:border-blue-900/50 shadow-xl">
+                                <div className="flex items-start gap-4">
+                                    <span className="material-symbols-outlined text-blue-600 dark:text-blue-400 text-4xl">
+                                        info
+                                    </span>
+                                    <div>
+                                        <h3 className="font-display text-2xl font-bold mb-3 text-gray-900 dark:text-white">
+                                            Serving the Coastal Bend
+                                        </h3>
+                                        <p className="text-lg text-gray-700 dark:text-gray-300 leading-relaxed">
+                                            We are based in Corpus Christi and proudly serve businesses throughout the entire surrounding area.
+                                            Learn more about our <Link to="/it-support-corpus-christi" className="text-blue-600 dark:text-blue-400 font-bold hover:underline">IT support in Corpus Christi</Link> and our commitment to local businesses.
+                                        </p>
+                                    </div>
+                                </div>
+                            </div>
+                        </motion.div>
+                    </section>
+                )}
+
+                {/* Services Section */}
+                <Services featuredIds={[10, 9, 11]} />
+
+                {/* Areas We Serve & CTA */}
+                <AreasWeServe />
+                <FAQ items={data.faq} />
+                <CTA />
+            </div>
+        </>
+    );
+};
+
+export default LocationPage;
diff --git a/src/pages/ServicePage.tsx b/src/pages/ServicePage.tsx
new file mode 100644
index 0000000..6d3c7eb
--- /dev/null
+++ b/src/pages/ServicePage.tsx
@@ -0,0 +1,232 @@
+import React, { useEffect, useRef, useLayoutEffect } from 'react';
+import { motion, useMotionTemplate, useMotionValue } from 'framer-motion';
+import { Link } from 'react-router-dom';
+import gsap from 'gsap';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
+import SEO from '../../components/SEO';
+import Services from '../../components/Services';
+import CTA from '../../components/CTA';
+import FAQ from '../../components/FAQ';
+import AreasWeServe from '../../components/AreasWeServe';
+import { ServiceData } from '../data/seoData';
+
+gsap.registerPlugin(ScrollTrigger);
+
+interface ServicePageProps {
+    data: ServiceData;
+}
+
+const ServicePage: React.FC<ServicePageProps> = ({ data }) => {
+    const containerRef = useRef<HTMLDivElement>(null);
+    const parallaxWrapperRef = useRef<HTMLDivElement>(null);
+    const mouseX = useMotionValue(0);
+    const mouseY = useMotionValue(0);
+
+    const handleMouseMove = ({ currentTarget, clientX, clientY }: React.MouseEvent) => {
+        const { left, top } = currentTarget.getBoundingClientRect();
+        mouseX.set(clientX - left);
+        mouseY.set(clientY - top + 75);
+    };
+
+    useLayoutEffect(() => {
+        const ctx = gsap.context(() => {
+            // Parallax Background
+            if (parallaxWrapperRef.current) {
+                gsap.to(parallaxWrapperRef.current, {
+                    yPercent: 30,
+                    ease: "none",
+                    scrollTrigger: {
+                        trigger: containerRef.current,
+                        start: "top top",
+                        end: "bottom top",
+                        scrub: true
+                    }
+                });
+            }
+
+            // Text Stagger Animation
+            gsap.fromTo(".hero-stagger",
+                { y: 50, opacity: 0 },
+                { y: 0, opacity: 1, duration: 1, stagger: 0.2, ease: "power3.out", delay: 0.2 }
+            );
+        }, containerRef);
+
+        return () => ctx.revert();
+    }, []);
+
+    useEffect(() => {
+        window.scrollTo(0, 0);
+    }, []);
+
+    return (
+        <>
+            <SEO
+                title={data.title}
+                description={data.description}
+                keywords={data.keywords}
+                canonicalUrl={window.location.href}
+            />
+
+            <div className="min-h-screen bg-background-light dark:bg-background-dark relative overflow-x-hidden">
+                {/* Hero Section */}
+                <section
+                    ref={containerRef}
+                    onMouseMove={handleMouseMove}
+                    className="relative min-h-[90vh] flex items-center justify-center overflow-hidden pt-20 group"
+                >
+                    {/* Parallax Background */}
+                    <div className="absolute inset-0 z-0 pointer-events-none">
+                        <div ref={parallaxWrapperRef} className="absolute w-full h-[120%] -top-[10%] left-0">
+                            {/* Base Layer */}
+                            <img
+                                alt="Abstract dark technology background"
+                                className="w-full h-full object-cover opacity-90 dark:opacity-70 brightness-75 contrast-150"
+                                src="/src/assets/hero-bg.png"
+                            />
+
+                            {/* Highlight Layer */}
+                            <motion.img
+                                style={{
+                                    maskImage: useMotionTemplate`radial-gradient(100px circle at ${mouseX}px ${mouseY}px, black, transparent)`,
+                                    WebkitMaskImage: useMotionTemplate`radial-gradient(100px circle at ${mouseX}px ${mouseY}px, black, transparent)`,
+                                }}
+                                alt=""
+                                className="absolute inset-0 w-full h-full object-cover mix-blend-screen opacity-100 brightness-150 contrast-150 filter saturate-150"
+                                src="/src/assets/hero-bg.png"
+                            />
+                        </div>
+                        <div className="absolute inset-0 bg-gradient-to-t from-background-light via-transparent to-transparent dark:from-background-dark dark:via-transparent dark:to-transparent"></div>
+                        <div className="absolute inset-0 bg-gradient-to-b from-background-light/50 dark:from-background-dark/50 to-transparent"></div>
+                    </div>
+
+                    {/* Hero Content */}
+                    <div className="relative z-10 text-center max-w-4xl px-6">
+                        <div className="hero-stagger flex items-center justify-center gap-2 mb-4">
+                            <span className="h-px w-8 bg-gray-400 dark:bg-gray-500"></span>
+                            <span className="text-xs uppercase tracking-[0.2em] text-gray-600 dark:text-gray-400 font-medium">
+                                Professional IT Services
+                            </span>
+                            <span className="h-px w-8 bg-gray-400 dark:bg-gray-500"></span>
+                        </div>
+
+                        <h1 className="hero-stagger font-display text-4xl md:text-5xl lg:text-6xl font-medium tracking-tighter leading-[1.1] mb-5 text-gray-900 dark:text-white">
+                            {data.h1.split(' ').slice(0, -2).join(' ')}<br />
+                            <span className="text-gray-500 dark:text-gray-500">
+                                {data.h1.split(' ').slice(-2).join(' ')}
+                            </span>
+                        </h1>
+
+                        <p className="hero-stagger text-base md:text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto mb-6 font-light leading-relaxed">
+                            {data.description}
+                        </p>
+
+                        <div className="hero-stagger flex flex-col sm:flex-row items-center justify-center gap-4">
+                            <motion.a
+                                href="/contact"
+                                className="px-8 py-3 bg-white dark:bg-white text-black dark:text-black rounded-full font-medium shadow-xl"
+                                whileHover={{ scale: 1.05, backgroundColor: "#3b82f6", color: "#ffffff" }}
+                                whileTap={{ scale: 0.95 }}
+                            >
+                                Get Started
+                            </motion.a>
+                            <motion.a
+                                href="/it-support-corpus-christi"
+                                className="px-8 py-3 bg-white/10 dark:bg-white/10 backdrop-blur-sm border-2 border-white/40 dark:border-white/40 text-white dark:text-white rounded-full font-medium shadow-xl"
+                                whileHover={{ scale: 1.05, backgroundColor: "rgba(255,255,255,0.2)", borderColor: "#ffffff" }}
+                                whileTap={{ scale: 0.95 }}
+                            >
+                                View All Services
+                            </motion.a>
+                        </div>
+                    </div>
+                </section>
+
+                {/* Main Content Section */}
+                <section className="px-6 py-16 relative">
+                    <div className="max-w-4xl mx-auto">
+                        <motion.div
+                            initial={{ opacity: 0, y: 20 }}
+                            whileInView={{ opacity: 1, y: 0 }}
+                            viewport={{ once: true }}
+                            transition={{ duration: 0.6 }}
+                            className="bg-white/80 dark:bg-white/5 backdrop-blur-xl rounded-3xl p-12 md:p-16 shadow-2xl border border-gray-100 dark:border-white/10"
+                        >
+                            <div className="prose prose-lg md:prose-xl dark:prose-invert max-w-none prose-headings:font-display prose-h2:text-3xl prose-h2:mb-6 prose-h2:mt-12 prose-h3:text-2xl prose-p:leading-relaxed prose-li:leading-relaxed prose-a:text-blue-600 dark:prose-a:text-blue-400 prose-a:no-underline hover:prose-a:underline">
+                                <div dangerouslySetInnerHTML={{ __html: data.content }} />
+                            </div>
+                        </motion.div>
+                    </div>
+                </section>
+
+                {/* Feature Highlight Section */}
+                <section className="px-6 py-16">
+                    <div className="max-w-6xl mx-auto grid md:grid-cols-3 gap-8">
+                        <motion.div
+                            initial={{ opacity: 0, y: 20 }}
+                            whileInView={{ opacity: 1, y: 0 }}
+                            viewport={{ once: true }}
+                            transition={{ delay: 0.1 }}
+                            className="p-8 bg-white dark:bg-white/5 rounded-2xl border border-gray-100 dark:border-white/10 hover:shadow-xl transition-shadow"
+                        >
+                            <span className="material-symbols-outlined text-blue-600 dark:text-blue-400 text-5xl mb-4 block">
+                                speed
+                            </span>
+                            <h3 className="font-display text-xl font-bold mb-3 text-gray-900 dark:text-white">
+                                Fast Response
+                            </h3>
+                            <p className="text-gray-600 dark:text-gray-300">
+                                Quick resolution of IT issues to minimize downtime and keep your business running smoothly.
+                            </p>
+                        </motion.div>
+
+                        <motion.div
+                            initial={{ opacity: 0, y: 20 }}
+                            whileInView={{ opacity: 1, y: 0 }}
+                            viewport={{ once: true }}
+                            transition={{ delay: 0.2 }}
+                            className="p-8 bg-white dark:bg-white/5 rounded-2xl border border-gray-100 dark:border-white/10 hover:shadow-xl transition-shadow"
+                        >
+                            <span className="material-symbols-outlined text-blue-600 dark:text-blue-400 text-5xl mb-4 block">
+                                verified_user
+                            </span>
+                            <h3 className="font-display text-xl font-bold mb-3 text-gray-900 dark:text-white">
+                                Proactive Security
+                            </h3>
+                            <p className="text-gray-600 dark:text-gray-300">
+                                Advanced security measures and monitoring to protect your business from cyber threats.
+                            </p>
+                        </motion.div>
+
+                        <motion.div
+                            initial={{ opacity: 0, y: 20 }}
+                            whileInView={{ opacity: 1, y: 0 }}
+                            viewport={{ once: true }}
+                            transition={{ delay: 0.3 }}
+                            className="p-8 bg-white dark:bg-white/5 rounded-2xl border border-gray-100 dark:border-white/10 hover:shadow-xl transition-shadow"
+                        >
+                            <span className="material-symbols-outlined text-blue-600 dark:text-blue-400 text-5xl mb-4 block">
+                                support_agent
+                            </span>
+                            <h3 className="font-display text-xl font-bold mb-3 text-gray-900 dark:text-white">
+                                Expert Team
+                            </h3>
+                            <p className="text-gray-600 dark:text-gray-300">
+                                Experienced IT professionals dedicated to providing exceptional service and support.
+                            </p>
+                        </motion.div>
+                    </div>
+                </section>
+
+                {/* Services Section */}
+                <Services featuredIds={data.relatedServices} />
+
+                {/* Areas We Serve & CTA */}
+                <AreasWeServe />
+                <FAQ items={data.faq} />
+                <CTA />
+            </div>
+        </>
+    );
+};
+
+export default ServicePage;
diff --git a/src/pages/ServicesPage.tsx b/src/pages/ServicesPage.tsx
index 3e8d7c3..2347774 100644
--- a/src/pages/ServicesPage.tsx
+++ b/src/pages/ServicesPage.tsx
@@ -1,414 +1,415 @@
-import React, { useEffect, useState } from 'react';
-import { motion, AnimatePresence, useScroll, useTransform, useMotionValueEvent } from 'framer-motion';
-import Contact from '../../components/Contact';
-
-const services = [
-    {
-        id: 1,
-        title: 'Windows 11 Transition',
-        description: 'Upgrade to Windows 11 before October 2025 to ensure continued security support and take advantage of the latest features.',
-        challenge: 'Running outdated operating systems leaves your business vulnerable to security threats and compatibility issues.',
-        approach: 'We manage the entire migration process, from hardware compatibility checks to software deployment and user training.',
-        deliverables: [
-            'Hardware compatibility assessment',
-            'Windows 11 deployment and configuration',
-            'Application compatibility testing',
-            'Security policy implementation',
-            'User training sessions'
-        ],
-        needs: [
-            'Current device inventory',
-            'Software list',
-            'User schedule for upgrades'
-        ],
-        icon: 'desktop_windows',
-        image: 'https://lh3.googleusercontent.com/aida-public/AB6AXuBMpd_cFINnFibfNErBs8OVAAyDQYTRXix88YH91QImuGi11XGwlY_QUB2R9htcC1h_fTXUeftdEieGT-oi5p5TBjpAyW-86mSsXu-rqhRTBsJlAGuE37bxJES4DUayktXIToEcF-M4PyXdyyTPIYtpYrxK18b2-sPwMzuzCL0LpgJwd5EoYxAkrJQ7W4eBrIG2e9Cw9sY0dJpXJy-TRgwBG0nk-S7W4Y0s3U9w--AzE4fcUimeGMqWwdCncU5tnETmkrkDNFiCyKSA'
-    },
-    {
-        id: 2,
-        title: 'Web Services',
-        description: 'Web design, domain registration, email services, and more to establish and enhance your online presence.',
-        challenge: 'A poor online presence can cost you customers and credibility in a digital-first world.',
-        approach: 'We build professional, responsive websites and manage your digital identity to attract and retain customers.',
-        deliverables: [
-            'Custom website design & development',
-            'Domain registration & management',
-            'Professional email setup (M365/Google)',
-            'SEO optimization basics',
-            'Hosting & maintenance'
-        ],
-        needs: [
-            'Brand guidelines / Logo',
-            'Content & copy',
-            'Domain access (if existing)'
-        ],
-        icon: 'language',
-        image: 'https://lh3.googleusercontent.com/aida-public/AB6AXuCxibXNCB5mU7MdWE5znMWnQUc9-d2ZoYF7LXK1CMssnvaFz2ZsGzyxXMbqDmely-UfxapqILD5-Exeo1wlQZKg8T2MK4vjlyAMaehoJoqTy2hHh8rxj46i8CKb4-ILL2JswBc98nJt_Fo1DfcDH0dHH5Zz6H4R2Jm1deViSW8Sp2zNp1sTc4eRHy1URiSRQFcr1C8rca6dKiuNDuyDiUmmesqHobXGItaBeFjJC-0OatWpKbr0zF-Y5qvk9Yl5FY2KUcDY9AcTfelu'
-    },
-    {
-        id: 3,
-        title: 'Performance Upgrades',
-        description: 'Enhance your desktops and laptops with SSDs, maintain your Windows installations, and achieve dramatic performance boosts.',
-        challenge: 'Slow computers kill productivity and frustrate employees, leading to wasted time.',
-        approach: 'We breathe new life into existing hardware with cost-effective upgrades and optimizations.',
-        deliverables: [
-            'SSD installation & cloning',
-            'RAM upgrades',
-            'System cleanup & optimization',
-            'Thermal paste replacement',
-            'Benchmark reporting'
-        ],
-        needs: [
-            'Access to devices',
-            'Data backup confirmation'
-        ],
-        icon: 'speed',
-        image: 'https://lh3.googleusercontent.com/aida-public/AB6AXuBs2fGGwp4EkMarA9Uvy7IOqyW0Pzxzt-94Bsr8Tkbem4uHPq-vMEmGgKuEmds2zKwPrw2nVcvL3MjjKYWieLSLh5pVUbbK6T9aDxt2xhvo4trARZobhzoQCJfI-r6aGW_aqfwC5XxOr9VA3YdnNnYEgkfW_TWrUWYa6mD8X0KdVG3sLimA8p7qWxIqUzFFV82twn60rP4OwLdIsc6t1OGnJzjemxL1Aw05aDo6Ckfr0a1oZ2kD4xKeTkG--zUhezvXB9I03l6f3b46'
-    },
-    {
-        id: 4,
-        title: 'Printer & Scanner Installation',
-        description: 'Professional installation and configuration of printers and scanners to ensure seamless integration into your workflow.',
-        challenge: 'Printer connectivity issues are a leading cause of office support tickets and downtime.',
-        approach: 'We set up reliable printing environments with proper drivers, networking, and user access controls.',
-        deliverables: [
-            'Network printer setup',
-            'Scanner configuration (Scan-to-Email/Folder)',
-            'Print server management',
-            'One-click user deployment',
-            'Troubleshooting training'
-        ],
-        needs: [
-            'Printer/Scanner hardware',
-            'Network access details'
-        ],
-        icon: 'print',
-        image: ''
-    },
-    {
-        id: 5,
-        title: 'New/Refurbished Desktop Hardware',
-        description: 'Supply and installation of new or refurbished desktop hardware, tailored to meet your business requirements.',
-        challenge: 'Sourcing the right hardware at the right price can be time-consuming and risky.',
-        approach: 'We source high-quality new and refurbished equipment that meets your specs and budget, fully tested and ready to go.',
-        deliverables: [
-            'Hardware procurement',
-            'Quality assurance testing',
-            'Image deployment',
-            'Peripherals setup',
-            'Warranty management'
-        ],
-        needs: [
-            'Budget constraints',
-            'Performance requirements'
-        ],
-        icon: 'computer',
-        image: ''
-    },
-    {
-        id: 6,
-        title: 'VPN Setup',
-        description: 'Configure Virtual Private Networks to allow secure remote access to your internal network from anywhere.',
-        challenge: 'Remote work requires secure access to internal resources without exposing your network to threats.',
-        approach: 'We implement robust VPN solutions like WireGuard or OpenVPN for secure, encrypted remote connectivity.',
-        deliverables: [
-            'VPN server configuration',
-            'Client software deployment',
-            'Access control lists',
-            'Connection testing',
-            'User guides'
-        ],
-        needs: [
-            'Public IP / DNS details',
-            'User list'
-        ],
-        icon: 'vpn_lock',
-        image: ''
-    },
-    {
-        id: 7,
-        title: 'Network Infrastructure Support',
-        description: 'Robust network solutions to ensure connectivity, security, and efficiency, including routers, access points, and switches.',
-        challenge: 'A weak network backbone leads to slow speeds, dropped calls, and security holes.',
-        approach: 'We design and maintain enterprise-grade networks that handle your data traffic reliably and securely.',
-        deliverables: [
-            'Router & Switch configuration',
-            'VLAN segmentation',
-            'Wi-Fi optimization',
-            'Network monitoring setup',
-            'Cable management'
-        ],
-        needs: [
-            'Floor plans (for Wi-Fi)',
-            'ISP details'
-        ],
-        icon: 'lan',
-        image: ''
-    },
-    {
-        id: 8,
-        title: 'Network Attached Storage',
-        description: 'Selection, setup, and maintenance of Network Attached Storage solutions to provide scalable and reliable data storage.',
-        challenge: 'Data growth requires scalable storage that is accessible yet secure from loss.',
-        approach: 'We deploy NAS solutions that centralize your data with redundancy and easy access for your team.',
-        deliverables: [
-            'NAS hardware selection & setup',
-            'RAID configuration',
-            'User permission management',
-            'Remote access configuration',
-            'Backup integration'
-        ],
-        needs: [
-            'Capacity requirements',
-            'Access patterns'
-        ],
-        icon: 'storage',
-        image: ''
-    }
-];
-
-const ServiceModal: React.FC<{ service: typeof services[0] | null; onClose: () => void }> = ({ service, onClose }) => {
-    if (!service) return null;
-
-    // ESC key & Body Scroll Lock
-    useEffect(() => {
-        const handleEsc = (e: KeyboardEvent) => {
-            if (e.key === 'Escape') onClose();
-        };
-
-        // Lock scroll on both html and body to prevent background scrolling
-        const originalHtmlOverflow = document.documentElement.style.overflow;
-        const originalBodyOverflow = document.body.style.overflow;
-
-        document.documentElement.style.overflow = 'hidden';
-        document.body.style.overflow = 'hidden';
-
-        window.addEventListener('keydown', handleEsc);
-
-        return () => {
-            window.removeEventListener('keydown', handleEsc);
-            document.documentElement.style.overflow = originalHtmlOverflow;
-            document.body.style.overflow = originalBodyOverflow;
-        };
-    }, [onClose]);
-
-    return (
-        <motion.div
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-            className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/80 backdrop-blur-md"
-            onClick={onClose}
-        >
-            <motion.div
-                initial={{ scale: 0.9, opacity: 0 }}
-                animate={{ scale: 1, opacity: 1 }}
-                exit={{ scale: 0.9, opacity: 0 }}
-                className="bg-[#1a1a1a] border border-white/10 rounded-2xl w-full max-w-4xl max-h-[90vh] overflow-y-auto relative shadow-2xl custom-scrollbar"
-                onClick={(e) => e.stopPropagation()}
-            >
-                {/* Close Button - Sticky and distinct */}
-                <button
-                    onClick={onClose}
-                    className="fixed md:absolute top-6 right-6 p-2 text-white bg-black/60 hover:bg-white/20 backdrop-blur-sm rounded-full transition-all z-50 group border border-white/10 hover:border-white/40 shadow-lg"
-                    aria-label="Close modal"
-                >
-                    <span className="material-symbols-outlined group-hover:scale-110 transition-transform">close</span>
-                </button>
-
-                {/* Hero Image in Modal */}
-                {service.image && (
-                    <div className="w-full h-64 relative">
-                        <img
-                            src={service.image}
-                            alt={service.title}
-                            className="w-full h-full object-cover"
-                        />
-                        <div className="absolute inset-0 bg-gradient-to-t from-[#1a1a1a] to-transparent"></div>
-                    </div>
-                )}
-
-                <div className="p-8 md:p-12 relative">
-                    <div className="flex items-center gap-6 mb-8">
-                        <div className="w-16 h-16 bg-white/5 border border-white/10 rounded-2xl flex items-center justify-center shrink-0">
-                            <span className="material-symbols-outlined text-3xl text-white">{service.icon}</span>
-                        </div>
-                        <div>
-                            <h2 className="text-3xl font-bold text-white mb-2">{service.title}</h2>
-                            <p className="text-gray-400 text-lg">{service.description}</p>
-                        </div>
-                    </div>
-                    {/* ... rest of content */}
-
-                    <div className="grid md:grid-cols-2 gap-12 mb-12">
-                        <div>
-                            <h4 className="text-white font-bold uppercase tracking-wider text-xs mb-4 flex items-center gap-2">
-                                <span className="material-symbols-outlined text-sm">warning</span> The Challenge
-                            </h4>
-                            <p className="text-gray-300 leading-relaxed text-sm md:text-base">{service.challenge}</p>
-                        </div>
-                        <div>
-                            <h4 className="text-white font-bold uppercase tracking-wider text-xs mb-4 flex items-center gap-2">
-                                <span className="material-symbols-outlined text-sm">lightbulb</span> Our Approach
-                            </h4>
-                            <p className="text-gray-300 leading-relaxed text-sm md:text-base">{service.approach}</p>
-                        </div>
-                    </div>
-
-                    <div className="mb-8">
-                        <h4 className="font-bold text-white mb-6 flex items-center gap-2">
-                            <span className="material-symbols-outlined">check_circle</span>
-                            What We Deliver
-                        </h4>
-                        <div className="grid md:grid-cols-2 gap-4">
-                            {service.deliverables.map((item, i) => (
-                                <div key={i} className="flex items-start gap-3 p-3 rounded-xl bg-white/5 border border-white/5 hover:border-white/20 transition-colors">
-                                    <span className="w-1.5 h-1.5 rounded-full bg-white mt-2 flex-shrink-0 shadow-[0_0_8px_rgba(255,255,255,0.5)]"></span>
-                                    <span className="text-gray-300 text-sm">{item}</span>
-                                </div>
-                            ))}
-                        </div>
-                    </div>
-
-                    <div className="pt-8 border-t border-white/10">
-                        <h4 className="font-semibold text-white mb-3 text-sm uppercase tracking-wide opacity-80">What we need from you</h4>
-                        <ul className="text-sm text-gray-400 space-y-2">
-                            {service.needs.map((item, i) => (
-                                <li key={i} className="flex items-center gap-2">
-                                    <span className="w-1 h-1 rounded-full bg-white/50"></span>
-                                    {item}
-                                </li>
-                            ))}
-                        </ul>
-                    </div>
-                </div>
-            </motion.div>
-        </motion.div>
-    );
-};
-
-const ServicesPage: React.FC = () => {
-    const [selectedService, setSelectedService] = useState<typeof services[0] | null>(null);
-    const containerRef = React.useRef<HTMLDivElement>(null);
-    const { scrollYProgress } = useScroll({
-        target: containerRef,
-        offset: ["start end", "end center"]
-    });
-
-    const heightTransform = useTransform(scrollYProgress, [0, 1], ["0%", "100%"]);
-
-    const [activeTimelineIndex, setActiveTimelineIndex] = useState(0);
-
-    useMotionValueEvent(scrollYProgress, "change", (latest) => {
-        // Calculate index based on scroll progress (0-1)
-        // Adjust multiplier to trigger slightly earlier or exact matches
-        const index = Math.min(Math.floor((latest) * services.length), services.length - 1);
-        setActiveTimelineIndex(index);
-    });
-
-    useEffect(() => {
-        window.scrollTo(0, 0);
-    }, []);
-
-    return (
-        <div className="pt-20 min-h-screen bg-[#0a0a0a] relative overflow-x-hidden">
-            {/* Gradient for Services Page */}
-            <div className="absolute top-0 left-0 right-0 h-[800px] bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(255,255,255,0.15),rgba(255,255,255,0))] dark:bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(255,255,255,0.25),rgba(255,255,255,0))] pointer-events-none" />
-
-            {/* Hero */}
-            <section className="py-20 px-6 bg-transparent border-b border-white/5 relative z-10">
-                <div className="max-w-4xl mx-auto text-center">
-                    <span className="text-white/60 font-bold tracking-widest uppercase text-sm mb-3 block">Expertise</span>
-                    <h1 className="font-display text-4xl md:text-5xl font-bold mb-6 text-white">
-                        Complete IT solutions for <br /><span className="text-gray-500">your business</span>
-                    </h1>
-                    <p className="text-xl text-gray-400 max-w-2xl mx-auto">
-                        From desktop support to enterprise infrastructure, we provide the technology foundation your business needs to thrive.
-                    </p>
-                </div>
-            </section>
-
-            {/* Timeline Section */}
-            <section ref={containerRef} className="py-24 px-6 relative overflow-hidden bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(255,255,255,0.05),rgba(255,255,255,0))]">
-                <div className="max-w-7xl mx-auto relative z-10">
-                    {/* Central Timeline Line */}
-                    <div className="absolute left-4 md:left-1/2 md:-ml-[0.5px] top-0 bottom-0 w-px bg-white/5 -translate-x-1/2 md:translate-x-0"></div>
-
-                    {/* Active Timeline Line (Scroll Driven) */}
-                    <motion.div
-                        style={{ height: heightTransform }}
-                        className="absolute left-4 md:left-1/2 md:-ml-[0.5px] top-0 w-px bg-white origin-top shadow-[0_0_40px_2px_rgba(255,255,255,1)] drop-shadow-[0_0_10px_rgba(255,255,255,1)] -translate-x-1/2 md:translate-x-0"
-                    ></motion.div>
-
-                    <div className="space-y-64 pb-64">
-                        {services.map((service, index) => (
-                            <div
-                                key={service.id}
-                                className={`relative flex flex-col md:flex-row gap-8 md:gap-0 ${index % 2 === 0 ? 'md:flex-row' : 'md:flex-row-reverse'}`}
-                            >
-                                {/* Timeline Dot */}
-                                <motion.div
-                                    animate={index <= activeTimelineIndex ? {
-                                        scale: 1.2,
-                                        opacity: 1,
-                                        backgroundColor: "#ffffff",
-                                        borderColor: "#ffffff",
-                                        boxShadow: "0 0 30px rgba(255,255,255,1)"
-                                    } : {
-                                        scale: 0.5,
-                                        opacity: 0.2,
-                                        backgroundColor: "#0a0a0a",
-                                        borderColor: "rgba(255,255,255,0.1)",
-                                        boxShadow: "none"
-                                    }}
-                                    viewport={{ margin: "-50% 0px -50% 0px" }}
-                                    transition={{ duration: 0.3 }}
-                                    className="absolute left-4 md:left-1/2 md:-ml-[6px] -translate-x-1/2 md:translate-x-0 w-3 h-3 rounded-full border border-white/20 z-20 top-1/2 -translate-y-1/2 shrink-0"
-                                ></motion.div>
-
-                                {/* Content Card */}
-                                <motion.div
-                                    initial={{ opacity: 0, scale: 0.9, filter: "blur(10px)" }}
-                                    whileInView={{ opacity: 1, scale: 1, filter: "blur(0px)" }}
-                                    viewport={{ once: true, margin: "-100px" }}
-                                    transition={{ duration: 0.5, ease: "easeOut" }}
-                                    className={`md:w-1/2 ${index % 2 === 0 ? 'md:pr-24 pl-12' : 'md:pl-24 pl-12'}`}
-                                >
-                                    <div
-                                        onClick={() => setSelectedService(service)}
-                                        className="group cursor-pointer bg-white/5 backdrop-blur-sm rounded-2xl p-10 border border-white/10 hover:border-white/30 hover:bg-white/10 transition-all duration-300 relative overflow-hidden"
-                                    >
-                                        <div className="w-14 h-14 bg-white/5 rounded-xl flex items-center justify-center mb-8 border border-white/10 group-hover:scale-110 transition-transform duration-500">
-                                            <span className="material-symbols-outlined text-3xl text-white">{service.icon}</span>
-                                        </div>
-
-                                        <h3 className="text-3xl font-bold text-white mb-4">{service.title}</h3>
-                                        <p className="text-gray-400 mb-8 line-clamp-3 text-lg leading-relaxed">{service.description}</p>
-
-                                        <div className="flex items-center text-sm font-bold text-white uppercase tracking-wider group-hover:gap-2 transition-all">
-                                            See Details <span className="material-symbols-outlined text-sm ml-1">arrow_forward</span>
-                                        </div>
-                                    </div>
-                                </motion.div>
-
-                                {/* Spacer for the other side */}
-                                <div className="md:w-1/2"></div>
-                            </div>
-                        ))}
-                    </div>
-                </div>
-            </section>
-
-            <Contact />
-
-            {/* Modal */}
-            <AnimatePresence>
-                {selectedService && (
-                    <ServiceModal service={selectedService} onClose={() => setSelectedService(null)} />
-                )}
-            </AnimatePresence>
-        </div>
-    );
-};
-
-export default ServicesPage;
+import React, { useEffect, useState } from 'react';
+import { motion, AnimatePresence, useScroll, useTransform, useMotionValueEvent } from 'framer-motion';
+import Contact from '../../components/Contact';
+
+const services = [
+    {
+        id: 1,
+        title: 'Windows 11 Transition',
+        description: 'Upgrade to Windows 11 before October 2025 to ensure continued security support and take advantage of the latest features.',
+        challenge: 'Running outdated operating systems leaves your business vulnerable to security threats and compatibility issues.',
+        approach: 'We manage the entire migration process, from hardware compatibility checks to software deployment and user training.',
+        deliverables: [
+            'Hardware compatibility assessment',
+            'Windows 11 deployment and configuration',
+            'Application compatibility testing',
+            'Security policy implementation',
+            'User training sessions'
+        ],
+        needs: [
+            'Current device inventory',
+            'Software list',
+            'User schedule for upgrades'
+        ],
+        icon: 'desktop_windows',
+        image: 'https://lh3.googleusercontent.com/aida-public/AB6AXuBMpd_cFINnFibfNErBs8OVAAyDQYTRXix88YH91QImuGi11XGwlY_QUB2R9htcC1h_fTXUeftdEieGT-oi5p5TBjpAyW-86mSsXu-rqhRTBsJlAGuE37bxJES4DUayktXIToEcF-M4PyXdyyTPIYtpYrxK18b2-sPwMzuzCL0LpgJwd5EoYxAkrJQ7W4eBrIG2e9Cw9sY0dJpXJy-TRgwBG0nk-S7W4Y0s3U9w--AzE4fcUimeGMqWwdCncU5tnETmkrkDNFiCyKSA'
+    },
+    {
+        id: 2,
+        title: 'Web Services',
+        description: 'Web design, domain registration, email services, and more to establish and enhance your online presence.',
+        challenge: 'A poor online presence can cost you customers and credibility in a digital-first world.',
+        approach: 'We build professional, responsive websites and manage your digital identity to attract and retain customers.',
+        deliverables: [
+            'Custom website design & development',
+            'Domain registration & management',
+            'Professional email setup (M365/Google)',
+            'SEO optimization basics',
+            'Hosting & maintenance'
+        ],
+        needs: [
+            'Brand guidelines / Logo',
+            'Content & copy',
+            'Domain access (if existing)'
+        ],
+        icon: 'language',
+        image: 'https://lh3.googleusercontent.com/aida-public/AB6AXuCxibXNCB5mU7MdWE5znMWnQUc9-d2ZoYF7LXK1CMssnvaFz2ZsGzyxXMbqDmely-UfxapqILD5-Exeo1wlQZKg8T2MK4vjlyAMaehoJoqTy2hHh8rxj46i8CKb4-ILL2JswBc98nJt_Fo1DfcDH0dHH5Zz6H4R2Jm1deViSW8Sp2zNp1sTc4eRHy1URiSRQFcr1C8rca6dKiuNDuyDiUmmesqHobXGItaBeFjJC-0OatWpKbr0zF-Y5qvk9Yl5FY2KUcDY9AcTfelu'
+    },
+    {
+        id: 3,
+        title: 'Performance Upgrades',
+        description: 'Enhance your desktops and laptops with SSDs, maintain your Windows installations, and achieve dramatic performance boosts.',
+        challenge: 'Slow computers kill productivity and frustrate employees, leading to wasted time.',
+        approach: 'We breathe new life into existing hardware with cost-effective upgrades and optimizations.',
+        deliverables: [
+            'SSD installation & cloning',
+            'RAM upgrades',
+            'System cleanup & optimization',
+            'Thermal paste replacement',
+            'Benchmark reporting'
+        ],
+        needs: [
+            'Access to devices',
+            'Data backup confirmation'
+        ],
+        icon: 'speed',
+        image: 'https://lh3.googleusercontent.com/aida-public/AB6AXuBs2fGGwp4EkMarA9Uvy7IOqyW0Pzxzt-94Bsr8Tkbem4uHPq-vMEmGgKuEmds2zKwPrw2nVcvL3MjjKYWieLSLh5pVUbbK6T9aDxt2xhvo4trARZobhzoQCJfI-r6aGW_aqfwC5XxOr9VA3YdnNnYEgkfW_TWrUWYa6mD8X0KdVG3sLimA8p7qWxIqUzFFV82twn60rP4OwLdIsc6t1OGnJzjemxL1Aw05aDo6Ckfr0a1oZ2kD4xKeTkG--zUhezvXB9I03l6f3b46'
+    },
+    {
+        id: 4,
+        title: 'Printer & Scanner Installation',
+        description: 'Professional installation and configuration of printers and scanners to ensure seamless integration into your workflow.',
+        challenge: 'Printer connectivity issues are a leading cause of office support tickets and downtime.',
+        approach: 'We set up reliable printing environments with proper drivers, networking, and user access controls.',
+        deliverables: [
+            'Network printer setup',
+            'Scanner configuration (Scan-to-Email/Folder)',
+            'Print server management',
+            'One-click user deployment',
+            'Troubleshooting training'
+        ],
+        needs: [
+            'Printer/Scanner hardware',
+            'Network access details'
+        ],
+        icon: 'print',
+        image: ''
+    },
+    {
+        id: 5,
+        title: 'New/Refurbished Desktop Hardware',
+        description: 'Supply and installation of new or refurbished desktop hardware, tailored to meet your business requirements.',
+        challenge: 'Sourcing the right hardware at the right price can be time-consuming and risky.',
+        approach: 'We source high-quality new and refurbished equipment that meets your specs and budget, fully tested and ready to go.',
+        deliverables: [
+            'Hardware procurement',
+            'Quality assurance testing',
+            'Image deployment',
+            'Peripherals setup',
+            'Warranty management'
+        ],
+        needs: [
+            'Budget constraints',
+            'Performance requirements'
+        ],
+        icon: 'computer',
+        image: ''
+    },
+    {
+        id: 6,
+        title: 'VPN Setup',
+        description: 'Configure Virtual Private Networks to allow secure remote access to your internal network from anywhere.',
+        challenge: 'Remote work requires secure access to internal resources without exposing your network to threats.',
+        approach: 'We implement robust VPN solutions like WireGuard or OpenVPN for secure, encrypted remote connectivity.',
+        deliverables: [
+            'VPN server configuration',
+            'Client software deployment',
+            'Access control lists',
+            'Connection testing',
+            'User guides'
+        ],
+        needs: [
+            'Public IP / DNS details',
+            'User list'
+        ],
+        icon: 'vpn_lock',
+        image: ''
+    },
+    {
+        id: 7,
+        title: 'Network Infrastructure Support',
+        description: 'Robust network solutions to ensure connectivity, security, and efficiency, including routers, access points, and switches.',
+        challenge: 'A weak network backbone leads to slow speeds, dropped calls, and security holes.',
+        approach: 'We design and maintain enterprise-grade networks that handle your data traffic reliably and securely.',
+        deliverables: [
+            'Router & Switch configuration',
+            'VLAN segmentation',
+            'Wi-Fi optimization',
+            'Network monitoring setup',
+            'Cable management'
+        ],
+        needs: [
+            'Floor plans (for Wi-Fi)',
+            'ISP details'
+        ],
+        icon: 'lan',
+        image: ''
+    },
+    {
+        id: 8,
+        title: 'Network Attached Storage',
+        description: 'Selection, setup, and maintenance of Network Attached Storage solutions to provide scalable and reliable data storage.',
+        challenge: 'Data growth requires scalable storage that is accessible yet secure from loss.',
+        approach: 'We deploy NAS solutions that centralize your data with redundancy and easy access for your team.',
+        deliverables: [
+            'NAS hardware selection & setup',
+            'RAID configuration',
+            'User permission management',
+            'Remote access configuration',
+            'Backup integration'
+        ],
+        needs: [
+            'Capacity requirements',
+            'Access patterns'
+        ],
+        icon: 'storage',
+        image: ''
+    }
+];
+
+const ServiceModal: React.FC<{ service: typeof services[0] | null; onClose: () => void }> = ({ service, onClose }) => {
+    if (!service) return null;
+
+    // ESC key & Body Scroll Lock
+    useEffect(() => {
+        const handleEsc = (e: KeyboardEvent) => {
+            if (e.key === 'Escape') onClose();
+        };
+
+        // Lock scroll on both html and body to prevent background scrolling
+        const originalHtmlOverflow = document.documentElement.style.overflow;
+        const originalBodyOverflow = document.body.style.overflow;
+
+        document.documentElement.style.overflow = 'hidden';
+        document.body.style.overflow = 'hidden';
+
+        window.addEventListener('keydown', handleEsc);
+
+        return () => {
+            window.removeEventListener('keydown', handleEsc);
+            document.documentElement.style.overflow = originalHtmlOverflow;
+            document.body.style.overflow = originalBodyOverflow;
+        };
+    }, [onClose]);
+
+    return (
+        <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/80 backdrop-blur-md"
+            onClick={onClose}
+        >
+            <motion.div
+                initial={{ scale: 0.9, opacity: 0 }}
+                animate={{ scale: 1, opacity: 1 }}
+                exit={{ scale: 0.9, opacity: 0 }}
+                className="bg-[#1a1a1a] border border-white/10 rounded-2xl w-full max-w-4xl max-h-[90vh] overflow-y-auto relative shadow-2xl custom-scrollbar"
+                onClick={(e) => e.stopPropagation()}
+                data-lenis-prevent
+            >
+                {/* Close Button - Sticky and distinct */}
+                <button
+                    onClick={onClose}
+                    className="fixed md:absolute top-6 right-6 p-2 text-white bg-black/60 hover:bg-white/20 backdrop-blur-sm rounded-full transition-all z-50 group border border-white/10 hover:border-white/40 shadow-lg"
+                    aria-label="Close modal"
+                >
+                    <span className="material-symbols-outlined group-hover:scale-110 transition-transform">close</span>
+                </button>
+
+                {/* Hero Image in Modal */}
+                {service.image && (
+                    <div className="w-full h-64 relative">
+                        <img
+                            src={service.image}
+                            alt={service.title}
+                            className="w-full h-full object-cover"
+                        />
+                        <div className="absolute inset-0 bg-gradient-to-t from-[#1a1a1a] to-transparent"></div>
+                    </div>
+                )}
+
+                <div className="p-8 md:p-12 relative">
+                    <div className="flex items-center gap-6 mb-8">
+                        <div className="w-16 h-16 bg-white/5 border border-white/10 rounded-2xl flex items-center justify-center shrink-0">
+                            <span className="material-symbols-outlined text-3xl text-white">{service.icon}</span>
+                        </div>
+                        <div>
+                            <h2 className="text-3xl font-bold text-white mb-2">{service.title}</h2>
+                            <p className="text-gray-400 text-lg">{service.description}</p>
+                        </div>
+                    </div>
+                    {/* ... rest of content */}
+
+                    <div className="grid md:grid-cols-2 gap-12 mb-12">
+                        <div>
+                            <h4 className="text-white font-bold uppercase tracking-wider text-xs mb-4 flex items-center gap-2">
+                                <span className="material-symbols-outlined text-sm">warning</span> The Challenge
+                            </h4>
+                            <p className="text-gray-300 leading-relaxed text-sm md:text-base">{service.challenge}</p>
+                        </div>
+                        <div>
+                            <h4 className="text-white font-bold uppercase tracking-wider text-xs mb-4 flex items-center gap-2">
+                                <span className="material-symbols-outlined text-sm">lightbulb</span> Our Approach
+                            </h4>
+                            <p className="text-gray-300 leading-relaxed text-sm md:text-base">{service.approach}</p>
+                        </div>
+                    </div>
+
+                    <div className="mb-8">
+                        <h4 className="font-bold text-white mb-6 flex items-center gap-2">
+                            <span className="material-symbols-outlined">check_circle</span>
+                            What We Deliver
+                        </h4>
+                        <div className="grid md:grid-cols-2 gap-4">
+                            {service.deliverables.map((item, i) => (
+                                <div key={i} className="flex items-start gap-3 p-3 rounded-xl bg-white/5 border border-white/5 hover:border-white/20 transition-colors">
+                                    <span className="w-1.5 h-1.5 rounded-full bg-white mt-2 flex-shrink-0 shadow-[0_0_8px_rgba(255,255,255,0.5)]"></span>
+                                    <span className="text-gray-300 text-sm">{item}</span>
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+
+                    <div className="pt-8 border-t border-white/10">
+                        <h4 className="font-semibold text-white mb-3 text-sm uppercase tracking-wide opacity-80">What we need from you</h4>
+                        <ul className="text-sm text-gray-400 space-y-2">
+                            {service.needs.map((item, i) => (
+                                <li key={i} className="flex items-center gap-2">
+                                    <span className="w-1 h-1 rounded-full bg-white/50"></span>
+                                    {item}
+                                </li>
+                            ))}
+                        </ul>
+                    </div>
+                </div>
+            </motion.div>
+        </motion.div>
+    );
+};
+
+const ServicesPage: React.FC = () => {
+    const [selectedService, setSelectedService] = useState<typeof services[0] | null>(null);
+    const containerRef = React.useRef<HTMLDivElement>(null);
+    const { scrollYProgress } = useScroll({
+        target: containerRef,
+        offset: ["start end", "end center"]
+    });
+
+    const heightTransform = useTransform(scrollYProgress, [0, 1], ["0%", "100%"]);
+
+    const [activeTimelineIndex, setActiveTimelineIndex] = useState(0);
+
+    useMotionValueEvent(scrollYProgress, "change", (latest) => {
+        // Calculate index based on scroll progress (0-1)
+        // Adjust multiplier to trigger slightly earlier or exact matches
+        const index = Math.min(Math.floor((latest) * services.length), services.length - 1);
+        setActiveTimelineIndex(index);
+    });
+
+    useEffect(() => {
+        window.scrollTo(0, 0);
+    }, []);
+
+    return (
+        <div className="pt-20 min-h-screen bg-[#0a0a0a] relative overflow-x-hidden">
+            {/* Gradient for Services Page */}
+            <div className="absolute top-0 left-0 right-0 h-[800px] bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(255,255,255,0.15),rgba(255,255,255,0))] dark:bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(255,255,255,0.25),rgba(255,255,255,0))] pointer-events-none" />
+
+            {/* Hero */}
+            <section className="py-20 px-6 bg-transparent border-b border-white/5 relative z-10">
+                <div className="max-w-4xl mx-auto text-center">
+                    <span className="text-white/60 font-bold tracking-widest uppercase text-sm mb-3 block">Expertise</span>
+                    <h1 className="font-display text-4xl md:text-5xl font-bold mb-6 text-white">
+                        Complete IT solutions for <br /><span className="text-gray-500">your business</span>
+                    </h1>
+                    <p className="text-xl text-gray-400 max-w-2xl mx-auto">
+                        From desktop support to enterprise infrastructure, we provide the technology foundation your business needs to thrive.
+                    </p>
+                </div>
+            </section>
+
+            {/* Timeline Section */}
+            <section ref={containerRef} className="py-24 px-6 relative overflow-hidden bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(255,255,255,0.05),rgba(255,255,255,0))]">
+                <div className="max-w-7xl mx-auto relative z-10">
+                    {/* Central Timeline Line */}
+                    <div className="absolute left-4 md:left-1/2 md:-ml-[0.5px] top-0 bottom-0 w-px bg-white/5 -translate-x-1/2 md:translate-x-0"></div>
+
+                    {/* Active Timeline Line (Scroll Driven) */}
+                    <motion.div
+                        style={{ height: heightTransform }}
+                        className="absolute left-4 md:left-1/2 md:-ml-[0.5px] top-0 w-px bg-white origin-top shadow-[0_0_40px_2px_rgba(255,255,255,1)] drop-shadow-[0_0_10px_rgba(255,255,255,1)] -translate-x-1/2 md:translate-x-0"
+                    ></motion.div>
+
+                    <div className="space-y-64 pb-64">
+                        {services.map((service, index) => (
+                            <div
+                                key={service.id}
+                                className={`relative flex flex-col md:flex-row gap-8 md:gap-0 ${index % 2 === 0 ? 'md:flex-row' : 'md:flex-row-reverse'}`}
+                            >
+                                {/* Timeline Dot */}
+                                <motion.div
+                                    animate={index <= activeTimelineIndex ? {
+                                        scale: 1.2,
+                                        opacity: 1,
+                                        backgroundColor: "#ffffff",
+                                        borderColor: "#ffffff",
+                                        boxShadow: "0 0 30px rgba(255,255,255,1)"
+                                    } : {
+                                        scale: 0.5,
+                                        opacity: 0.2,
+                                        backgroundColor: "#0a0a0a",
+                                        borderColor: "rgba(255,255,255,0.1)",
+                                        boxShadow: "none"
+                                    }}
+                                    viewport={{ margin: "-50% 0px -50% 0px" }}
+                                    transition={{ duration: 0.3 }}
+                                    className="absolute left-4 md:left-1/2 md:-ml-[6px] -translate-x-1/2 md:translate-x-0 w-3 h-3 rounded-full border border-white/20 z-20 top-1/2 -translate-y-1/2 shrink-0"
+                                ></motion.div>
+
+                                {/* Content Card */}
+                                <motion.div
+                                    initial={{ opacity: 0, scale: 0.9, filter: "blur(10px)" }}
+                                    whileInView={{ opacity: 1, scale: 1, filter: "blur(0px)" }}
+                                    viewport={{ once: true, margin: "-100px" }}
+                                    transition={{ duration: 0.5, ease: "easeOut" }}
+                                    className={`md:w-1/2 ${index % 2 === 0 ? 'md:pr-24 pl-12' : 'md:pl-24 pl-12'}`}
+                                >
+                                    <div
+                                        onClick={() => setSelectedService(service)}
+                                        className="group cursor-pointer bg-white/5 backdrop-blur-sm rounded-2xl p-10 border border-white/10 hover:border-white/30 hover:bg-white/10 transition-all duration-300 relative overflow-hidden"
+                                    >
+                                        <div className="w-14 h-14 bg-white/5 rounded-xl flex items-center justify-center mb-8 border border-white/10 group-hover:scale-110 transition-transform duration-500">
+                                            <span className="material-symbols-outlined text-3xl text-white">{service.icon}</span>
+                                        </div>
+
+                                        <h3 className="text-3xl font-bold text-white mb-4">{service.title}</h3>
+                                        <p className="text-gray-400 mb-8 line-clamp-3 text-lg leading-relaxed">{service.description}</p>
+
+                                        <div className="flex items-center text-sm font-bold text-white uppercase tracking-wider group-hover:gap-2 transition-all">
+                                            See Details <span className="material-symbols-outlined text-sm ml-1">arrow_forward</span>
+                                        </div>
+                                    </div>
+                                </motion.div>
+
+                                {/* Spacer for the other side */}
+                                <div className="md:w-1/2"></div>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            </section>
+
+            <Contact />
+
+            {/* Modal */}
+            <AnimatePresence>
+                {selectedService && (
+                    <ServiceModal service={selectedService} onClose={() => setSelectedService(null)} />
+                )}
+            </AnimatePresence>
+        </div>
+    );
+};
+
+export default ServicesPage;