Implement scroll-narrative website

Build a high-conversion, story-driven marketing site for Bay Area Affiliates, Inc. The site will feature a scroll-narrative experience with pinned hero, section pinning, subtle parallax, and neon accents. It prioritizes performance, accessibility, and clear CTAs, targeting small to mid-sized businesses in the Coastal Bend.

Key features include:
- Pinned hero section with headline, subcopy, and CTAs.
- Value pillars section with alternating media layouts.
- "How We Work" section with a pinned timeline.
- Services overview with cards linking to detail pages.
- Local focus section with client logos and testimonials.
- CTA footer band with micro-FAQ.
- Dedicated Services, About, Blog, and Contact pages.

The design will adhere to the specified brand guidelines, including a deep teal/near-black base with neon lime accents. Interactions will respect `prefers-reduced-motion`. Performance and SEO best practices will be followed, including metadata, lazy loading, and local SEO keywords. Accessibility standards (WCAG AA) will be met.

src/components/Footer.tsx

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

src/components/Navigation.tsx

@@ -0,0 +1,111 @@
+import { useState, useEffect } from 'react';
+import { Link, useLocation } from 'react-router-dom';
+import { Menu, X } from 'lucide-react';
+
+const Navigation = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [isScrolled, setIsScrolled] = useState(false);
+  const location = useLocation();
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setIsScrolled(window.scrollY > 50);
+    };
+
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
+  const navItems = [
+    { name: 'Home', path: '/' },
+    { name: 'Services', path: '/services' },
+    { name: 'About', path: '/about' },
+    { name: 'Blog', path: '/blog' },
+    { name: 'Contact', path: '/contact' },
+  ];
+
+  const isActive = (path: string) => location.pathname === path;
+
+  return (
+    <nav className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
+      isScrolled ? 'bg-background/90 backdrop-blur-md border-b border-border' : 'bg-transparent'
+    }`}>
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex items-center justify-between h-16">
+          {/* Logo */}
+          <Link to="/" className="flex items-center space-x-2">
+            <div className="w-8 h-8 bg-neon rounded-lg flex items-center justify-center">
+              <span className="text-neon-foreground font-bold text-sm">BA</span>
+            </div>
+            <span className="font-heading font-bold text-lg text-foreground">
+              Bay Area Affiliates
+            </span>
+          </Link>
+
+          {/* Desktop Navigation */}
+          <div className="hidden md:flex items-center space-x-8">
+            {navItems.map((item) => (
+              <Link
+                key={item.name}
+                to={item.path}
+                className={`font-medium transition-colors duration-200 ${
+                  isActive(item.path)
+                    ? 'text-neon'
+                    : 'text-foreground-muted hover:text-neon'
+                }`}
+              >
+                {item.name}
+              </Link>
+            ))}
+            <Link
+              to="/contact"
+              className="btn-neon ml-4"
+            >
+              Get Started
+            </Link>
+          </div>
+
+          {/* Mobile menu button */}
+          <button
+            onClick={() => setIsOpen(!isOpen)}
+            className="md:hidden text-foreground hover:text-neon transition-colors"
+            aria-label="Toggle navigation menu"
+          >
+            {isOpen ? <X size={24} /> : <Menu size={24} />}
+          </button>
+        </div>
+
+        {/* Mobile Navigation */}
+        {isOpen && (
+          <div className="md:hidden bg-background/95 backdrop-blur-md border-t border-border">
+            <div className="px-2 pt-2 pb-3 space-y-1">
+              {navItems.map((item) => (
+                <Link
+                  key={item.name}
+                  to={item.path}
+                  onClick={() => setIsOpen(false)}
+                  className={`block px-3 py-2 rounded-md text-base font-medium transition-colors ${
+                    isActive(item.path)
+                      ? 'text-neon bg-neon/10'
+                      : 'text-foreground-muted hover:text-neon hover:bg-neon/5'
+                  }`}
+                >
+                  {item.name}
+                </Link>
+              ))}
+              <Link
+                to="/contact"
+                onClick={() => setIsOpen(false)}
+                className="block w-full text-center btn-neon mt-4"
+              >
+                Get Started
+              </Link>
+            </div>
+          </div>
+        )}
+      </div>
+    </nav>
+  );
+};
+
+export default Navigation;

src/components/ScrollReveal.tsx

@@ -0,0 +1,47 @@
+import { useEffect, useRef, ReactNode } from 'react';
+
+interface ScrollRevealProps {
+  children: ReactNode;
+  delay?: number;
+  className?: string;
+}
+
+const ScrollReveal = ({ children, delay = 0, className = '' }: ScrollRevealProps) => {
+  const elementRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const element = elementRef.current;
+    if (!element) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            setTimeout(() => {
+              element.classList.add('revealed');
+            }, delay);
+          }
+        });
+      },
+      {
+        threshold: 0.1,
+        rootMargin: '0px 0px -50px 0px',
+      }
+    );
+
+    observer.observe(element);
+
+    return () => observer.unobserve(element);
+  }, [delay]);
+
+  return (
+    <div
+      ref={elementRef}
+      className={`scroll-reveal ${className}`}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default ScrollReveal;

src/components/home/CTASection.tsx

@@ -0,0 +1,120 @@
+import { ArrowRight, Clock, DollarSign, Phone } from 'lucide-react';
+import { Link } from 'react-router-dom';
+import ScrollReveal from '../ScrollReveal';
+
+const CTASection = () => {
+  const faqs = [
+    {
+      icon: Clock,
+      question: "How quickly can you start?",
+      answer: "Most assessments can begin within 48 hours of contact."
+    },
+    {
+      icon: DollarSign,
+      question: "How do you price services?",
+      answer: "Transparent monthly pricing based on devices and services needed."
+    },
+    {
+      icon: Phone,
+      question: "What's included in support?",
+      answer: "24/7 monitoring, helpdesk, proactive maintenance, and SLA guarantees."
+    }
+  ];
+
+  return (
+    <section className="py-24 bg-background-deep relative overflow-hidden">
+      {/* Background decoration */}
+      <div className="absolute inset-0 grid-overlay opacity-20"></div>
+      <div className="absolute inset-0 bg-gradient-to-b from-transparent via-neon/5 to-transparent"></div>
+
+      <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="max-w-4xl mx-auto text-center">
+          <ScrollReveal>
+            <h2 className="font-heading font-bold text-4xl sm:text-5xl lg:text-6xl text-foreground mb-6">
+              Ready for <span className="text-neon text-glow">reliable IT?</span>
+            </h2>
+            
+            <p className="text-xl text-foreground-muted mb-12 leading-relaxed">
+              Join 150+ Coastal Bend businesses that trust us with their technology. 
+              Get started with a free 20-minute assessment.
+            </p>
+          </ScrollReveal>
+
+          {/* Primary CTAs */}
+          <ScrollReveal delay={200}>
+            <div className="flex flex-col sm:flex-row gap-4 justify-center items-center mb-16">
+              <Link
+                to="/contact"
+                className="btn-neon group flex items-center space-x-2 text-lg px-8 py-4"
+              >
+                <span>Book a 20-minute assessment</span>
+                <ArrowRight className="w-5 h-5 transition-transform group-hover:translate-x-1" />
+              </Link>
+              
+              <Link
+                to="/contact"
+                className="btn-ghost group flex items-center space-x-2 text-lg px-8 py-4"
+              >
+                <span>Send a message</span>
+              </Link>
+            </div>
+          </ScrollReveal>
+
+          {/* Micro FAQ */}
+          <ScrollReveal delay={400}>
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+              {faqs.map((faq, index) => {
+                const Icon = faq.icon;
+                
+                return (
+                  <div key={faq.question} className="text-left">
+                    <div className="flex items-start space-x-3">
+                      <div className="w-8 h-8 bg-neon/20 rounded-lg flex items-center justify-center flex-shrink-0 mt-1">
+                        <Icon className="w-4 h-4 text-neon" />
+                      </div>
+                      <div>
+                        <h3 className="font-semibold text-foreground mb-2">
+                          {faq.question}
+                        </h3>
+                        <p className="text-sm text-foreground-muted">
+                          {faq.answer}
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </ScrollReveal>
+
+          {/* Contact info */}
+          <ScrollReveal delay={600}>
+            <div className="mt-16 pt-8 border-t border-border/30">
+              <p className="text-sm text-foreground-muted mb-4">
+                Ready to talk? We're here to help.
+              </p>
+              <div className="flex flex-col sm:flex-row gap-4 justify-center items-center text-sm">
+                <a 
+                  href="tel:+1-361-555-0123" 
+                  className="text-neon hover:text-neon/80 transition-colors flex items-center"
+                >
+                  <Phone className="w-4 h-4 mr-2" />
+                  (361) 555-0123
+                </a>
+                <span className="hidden sm:block text-border">|</span>
+                <a 
+                  href="mailto:info@bayareaaffiliates.com" 
+                  className="text-neon hover:text-neon/80 transition-colors"
+                >
+                  info@bayareaaffiliates.com
+                </a>
+              </div>
+            </div>
+          </ScrollReveal>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default CTASection;

src/components/home/HeroSection.tsx

@@ -0,0 +1,97 @@
+import { ArrowRight, Play } from 'lucide-react';
+import { Link } from 'react-router-dom';
+import heroNetwork from '@/assets/hero-network.jpg';
+
+const HeroSection = () => {
+  return (
+    <section className="section-pin grid-overlay">
+      <div className="relative h-full flex items-center justify-center overflow-hidden">
+        {/* Background image with overlay */}
+        <div className="absolute inset-0">
+          <img 
+            src={heroNetwork} 
+            alt="Modern IT infrastructure with network connections" 
+            className="w-full h-full object-cover opacity-20"
+          />
+          <div className="absolute inset-0 bg-gradient-to-b from-background/40 via-background/60 to-background"></div>
+        </div>
+
+        {/* Particle field effect */}
+        <div className="absolute inset-0 opacity-30">
+          {Array.from({ length: 50 }).map((_, i) => (
+            <div
+              key={i}
+              className="absolute w-1 h-1 bg-neon rounded-full animate-float"
+              style={{
+                left: `${Math.random() * 100}%`,
+                top: `${Math.random() * 100}%`,
+                animationDelay: `${Math.random() * 6}s`,
+                animationDuration: `${6 + Math.random() * 4}s`,
+              }}
+            />
+          ))}
+        </div>
+
+        {/* Main content */}
+        <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+          <div className="max-w-4xl mx-auto">
+            {/* Badge */}
+            <div className="inline-flex items-center px-4 py-2 rounded-full bg-neon/10 border border-neon/30 text-neon text-sm font-medium mb-8">
+              <span className="w-2 h-2 bg-neon rounded-full mr-2 animate-glow-pulse"></span>
+              Serving the Coastal Bend since 2010
+            </div>
+
+            {/* Main headline */}
+            <h1 className="font-heading font-bold text-5xl sm:text-6xl lg:text-7xl text-foreground mb-6 text-balance">
+              Modern IT that keeps your{' '}
+              <span className="text-neon text-glow">business moving</span>
+            </h1>
+
+            {/* Subheadline */}
+            <p className="text-xl sm:text-2xl text-foreground-muted mb-12 max-w-3xl mx-auto leading-relaxed">
+              From fast devices to secure remote access and resilient networks — we design, 
+              run and protect your tech so you can focus on growth.
+            </p>
+
+            {/* CTA buttons */}
+            <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
+              <Link
+                to="/contact"
+                className="btn-neon group flex items-center space-x-2"
+              >
+                <span>Get in touch</span>
+                <ArrowRight className="w-5 h-5 transition-transform group-hover:translate-x-1" />
+              </Link>
+              
+              <button className="btn-ghost group flex items-center space-x-2">
+                <Play className="w-5 h-5 transition-transform group-hover:scale-110" />
+                <span>See our system</span>
+              </button>
+            </div>
+
+            {/* Trust indicators */}
+            <div className="mt-16 pt-8 border-t border-border/30">
+              <p className="text-sm text-foreground-muted mb-6">Trusted by businesses across Corpus Christi</p>
+              <div className="flex flex-wrap justify-center items-center gap-8 opacity-60">
+                {['Healthcare', 'Manufacturing', 'Professional Services', 'Non-Profit'].map((industry) => (
+                  <span key={industry} className="text-sm font-medium text-foreground-muted">
+                    {industry}
+                  </span>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Scroll indicator */}
+        <div className="absolute bottom-8 left-1/2 transform -translate-x-1/2">
+          <div className="w-6 h-10 border-2 border-neon/50 rounded-full flex justify-center">
+            <div className="w-1 h-3 bg-neon rounded-full mt-2 animate-bounce"></div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default HeroSection;

src/components/home/ProcessTimeline.tsx

@@ -0,0 +1,144 @@
+import { useEffect, useRef, useState } from 'react';
+import { Search, Shield, Cog, Zap } from 'lucide-react';
+import ScrollReveal from '../ScrollReveal';
+
+const ProcessTimeline = () => {
+  const [activeStep, setActiveStep] = useState(0);
+  const sectionRef = useRef<HTMLDivElement>(null);
+
+  const steps = [
+    {
+      icon: Search,
+      title: 'Assess',
+      description: 'Discovery, inventory, quick wins report',
+      details: 'We start with a comprehensive assessment of your current IT infrastructure, identifying immediate opportunities for improvement and creating a roadmap for optimization.'
+    },
+    {
+      icon: Cog,
+      title: 'Stabilize',
+      description: 'Patching, backups, device hygiene, ticket triage',
+      details: 'Foundation work to ensure your systems are secure, backed up, and running smoothly. We address critical vulnerabilities and establish reliable backup procedures.'
+    },
+    {
+      icon: Shield,
+      title: 'Harden',
+      description: 'MFA, endpoint security, VPN, network segmentation',
+      details: 'Implementation of robust security measures including multi-factor authentication, endpoint protection, secure remote access, and network isolation strategies.'
+    },
+    {
+      icon: Zap,
+      title: 'Automate',
+      description: 'Monitoring, updates, reporting, playbooks',
+      details: 'Deploy automated monitoring systems, update management, comprehensive reporting, and documented procedures to maintain peak performance with minimal intervention.'
+    }
+  ];
+
+  useEffect(() => {
+    const handleScroll = () => {
+      if (!sectionRef.current) return;
+      
+      const section = sectionRef.current;
+      const rect = section.getBoundingClientRect();
+      const windowHeight = window.innerHeight;
+      
+      // Calculate scroll progress within the section
+      const sectionHeight = rect.height;
+      const scrollProgress = Math.max(0, Math.min(1, (windowHeight - rect.top) / (windowHeight + sectionHeight)));
+      
+      // Determine active step based on scroll progress
+      const newActiveStep = Math.min(steps.length - 1, Math.floor(scrollProgress * steps.length));
+      setActiveStep(newActiveStep);
+    };
+
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, [steps.length]);
+
+  return (
+    <section ref={sectionRef} className="py-32 bg-background relative overflow-hidden">
+      {/* Background decoration */}
+      <div className="absolute inset-0">
+        <div className="absolute inset-0 grid-overlay opacity-10"></div>
+        <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-neon/5 rounded-full blur-3xl"></div>
+      </div>
+
+      <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <ScrollReveal>
+          <div className="text-center mb-20">
+            <h2 className="font-heading font-bold text-4xl sm:text-5xl text-foreground mb-6">
+              How we <span className="text-neon">transform</span> your IT
+            </h2>
+            <p className="text-xl text-foreground-muted max-w-3xl mx-auto">
+              Our proven four-phase methodology ensures systematic improvement and lasting results.
+            </p>
+          </div>
+        </ScrollReveal>
+
+        <div className="relative">
+          {/* Timeline line */}
+          <div className="absolute left-8 lg:left-1/2 lg:transform lg:-translate-x-1/2 top-0 bottom-0 w-px bg-border">
+            <div 
+              className="absolute top-0 left-0 w-full bg-neon transition-all duration-500 ease-out"
+              style={{ height: `${(activeStep + 1) * 25}%` }}
+            />
+          </div>
+
+          {/* Steps */}
+          <div className="space-y-16 lg:space-y-24">
+            {steps.map((step, index) => {
+              const Icon = step.icon;
+              const isActive = index <= activeStep;
+              const isEven = index % 2 === 0;
+              
+              return (
+                <ScrollReveal key={step.title} delay={index * 100}>
+                  <div className={`relative flex flex-col lg:flex-row items-center ${
+                    isEven ? '' : 'lg:flex-row-reverse'
+                  }`}>
+                    {/* Step content */}
+                    <div className={`flex-1 ${isEven ? 'lg:pr-16' : 'lg:pl-16'} ${
+                      isEven ? 'lg:text-right' : 'lg:text-left'
+                    } text-center lg:text-left`}>
+                      <div className="card-dark p-8 max-w-lg mx-auto lg:mx-0">
+                        <div className="mb-4">
+                          <span className="text-sm font-medium text-neon uppercase tracking-wider">
+                            Step {index + 1}
+                          </span>
+                        </div>
+                        <h3 className="font-heading font-bold text-2xl text-foreground mb-3">
+                          {step.title}
+                        </h3>
+                        <p className="text-foreground-muted mb-4">
+                          {step.description}
+                        </p>
+                        <p className="text-sm text-foreground-muted">
+                          {step.details}
+                        </p>
+                      </div>
+                    </div>
+
+                    {/* Timeline dot */}
+                    <div className="relative z-10 my-8 lg:my-0">
+                      <div className={`w-16 h-16 rounded-full border-4 flex items-center justify-center transition-all duration-500 ${
+                        isActive 
+                          ? 'border-neon bg-neon text-neon-foreground shadow-neon' 
+                          : 'border-border bg-background text-foreground-muted'
+                      }`}>
+                        <Icon className="w-6 h-6" />
+                      </div>
+                    </div>
+
+                    {/* Spacer for layout */}
+                    <div className="flex-1 hidden lg:block"></div>
+                  </div>
+                </ScrollReveal>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default ProcessTimeline;

src/components/home/ProofSection.tsx

@@ -0,0 +1,119 @@
+import { MapPin, Star, Users } from 'lucide-react';
+import ScrollReveal from '../ScrollReveal';
+
+const ProofSection = () => {
+  const stats = [
+    { value: '150+', label: 'Local businesses served' },
+    { value: '99.9%', label: 'Network uptime achieved' },
+    { value: '15+', label: 'Years in Coastal Bend' },
+    { value: '<2min', label: 'Average response time' }
+  ];
+
+  const testimonial = {
+    quote: "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.",
+    author: "Sarah Martinez",
+    title: "Operations Manager",
+    company: "Coastal Medical Group"
+  };
+
+  return (
+    <section className="py-24 bg-background relative overflow-hidden">
+      {/* Background decoration */}
+      <div className="absolute inset-0 grid-overlay opacity-10"></div>
+      <div className="absolute top-0 left-1/2 transform -translate-x-1/2 w-96 h-96 bg-neon/5 rounded-full blur-3xl"></div>
+
+      <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <ScrollReveal>
+          <div className="text-center mb-16">
+            <div className="inline-flex items-center px-4 py-2 rounded-full bg-neon/10 border border-neon/30 text-neon text-sm font-medium mb-8">
+              <MapPin className="w-4 h-4 mr-2" />
+              Proudly serving the Coastal Bend
+            </div>
+            
+            <h2 className="font-heading font-bold text-4xl sm:text-5xl text-foreground mb-6">
+              Local expertise for{' '}
+              <span className="text-neon">Corpus Christi</span>{' '}
+              and surrounding communities
+            </h2>
+            
+            <p className="text-xl text-foreground-muted max-w-3xl mx-auto">
+              We understand the unique challenges of businesses in our region and provide 
+              tailored solutions that work in the real world.
+            </p>
+          </div>
+        </ScrollReveal>
+
+        {/* Stats */}
+        <ScrollReveal delay={200}>
+          <div className="grid grid-cols-2 lg:grid-cols-4 gap-8 mb-20">
+            {stats.map((stat, index) => (
+              <div key={stat.label} className="text-center">
+                <div className="font-heading font-bold text-4xl lg:text-5xl text-neon mb-2">
+                  {stat.value}
+                </div>
+                <div className="text-foreground-muted text-sm lg:text-base">
+                  {stat.label}
+                </div>
+              </div>
+            ))}
+          </div>
+        </ScrollReveal>
+
+        {/* Testimonial */}
+        <ScrollReveal delay={400}>
+          <div className="card-dark p-8 lg:p-12 max-w-4xl mx-auto">
+            <div className="flex flex-col lg:flex-row items-start gap-8">
+              {/* Quote */}
+              <div className="flex-1">
+                <div className="flex items-center mb-6">
+                  {[...Array(5)].map((_, i) => (
+                    <Star key={i} className="w-5 h-5 text-neon fill-current" />
+                  ))}
+                </div>
+                
+                <blockquote className="text-lg lg:text-xl text-foreground leading-relaxed mb-6">
+                  "{testimonial.quote}"
+                </blockquote>
+                
+                <div className="flex items-center">
+                  <div className="w-12 h-12 bg-neon/20 rounded-full flex items-center justify-center mr-4">
+                    <Users className="w-6 h-6 text-neon" />
+                  </div>
+                  <div>
+                    <div className="font-semibold text-foreground">{testimonial.author}</div>
+                    <div className="text-foreground-muted text-sm">
+                      {testimonial.title}, {testimonial.company}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </ScrollReveal>
+
+        {/* Service area */}
+        <ScrollReveal delay={600}>
+          <div className="mt-16 text-center">
+            <h3 className="font-heading font-semibold text-xl text-foreground mb-6">
+              Serving businesses throughout the Coastal Bend
+            </h3>
+            
+            <div className="flex flex-wrap justify-center items-center gap-6 text-foreground-muted">
+              {[
+                'Corpus Christi', 'Portland', 'Ingleside', 'Aransas Pass', 
+                'Rockport', 'Fulton', 'Sinton', 'Mathis'
+              ].map((city) => (
+                <span key={city} className="flex items-center text-sm">
+                  <MapPin className="w-3 h-3 mr-1 text-neon" />
+                  {city}
+                </span>
+              ))}
+            </div>
+          </div>
+        </ScrollReveal>
+      </div>
+    </section>
+  );
+};
+
+export default ProofSection;

src/components/home/ServicesOverview.tsx

@@ -0,0 +1,128 @@
+import { Monitor, Wifi, Cloud, Shield, Database, Settings } from 'lucide-react';
+import { Link } from 'react-router-dom';
+import ScrollReveal from '../ScrollReveal';
+
+const ServicesOverview = () => {
+  const services = [
+    {
+      icon: Monitor,
+      title: 'Hardware & Desktop Support',
+      description: 'Fast devices and responsive support that keeps your team productive.',
+      features: ['SSD upgrades', 'Hardware procurement', '24/7 helpdesk']
+    },
+    {
+      icon: Wifi,
+      title: 'Network Infrastructure',
+      description: 'Reliable switching and Wi-Fi that scales with your business growth.',
+      features: ['Enterprise Wi-Fi', 'Network design', 'Performance monitoring']
+    },
+    {
+      icon: Cloud,
+      title: 'Virtualization & Cloud',
+      description: 'Modern infrastructure that reduces costs and improves flexibility.',
+      features: ['Cloud migration', 'Hybrid solutions', 'Resource optimization']
+    },
+    {
+      icon: Shield,
+      title: 'Secure Remote Access',
+      description: 'Zero-drama VPN with modern protocols for secure anywhere access.',
+      features: ['WireGuard VPN', 'Multi-factor auth', 'Secure endpoints']
+    },
+    {
+      icon: Database,
+      title: 'Backup & Business Continuity',
+      description: 'Comprehensive protection against data loss and downtime.',
+      features: ['Automated backups', 'Disaster recovery', 'Business continuity']
+    },
+    {
+      icon: Settings,
+      title: 'Microsoft 365 Enablement',
+      description: 'Full utilization of your M365 investment with expert guidance.',
+      features: ['Migration services', 'Training & adoption', 'Security configuration']
+    }
+  ];
+
+  return (
+    <section className="py-24 bg-background-deep relative overflow-hidden">
+      {/* Background decoration */}
+      <div className="absolute inset-0 grid-overlay opacity-20"></div>
+      <div className="absolute top-1/4 right-0 w-96 h-96 bg-neon/5 rounded-full blur-3xl"></div>
+      <div className="absolute bottom-1/4 left-0 w-96 h-96 bg-neon/5 rounded-full blur-3xl"></div>
+
+      <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <ScrollReveal>
+          <div className="text-center mb-16">
+            <h2 className="font-heading font-bold text-4xl sm:text-5xl text-foreground mb-6">
+              Complete IT solutions for{' '}
+              <span className="text-neon">modern businesses</span>
+            </h2>
+            <p className="text-xl text-foreground-muted max-w-3xl mx-auto">
+              From desktop support to enterprise infrastructure — we've got your technology covered.
+            </p>
+          </div>
+        </ScrollReveal>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+          {services.map((service, index) => {
+            const Icon = service.icon;
+            
+            return (
+              <ScrollReveal key={service.title} delay={index * 100}>
+                <div className="card-dark p-8 group hover:shadow-neon transition-all duration-500 hover:-translate-y-1">
+                  {/* Icon */}
+                  <div className="w-12 h-12 bg-neon/20 rounded-xl flex items-center justify-center mb-6 group-hover:bg-neon/30 transition-colors">
+                    <Icon className="w-6 h-6 text-neon" />
+                  </div>
+
+                  {/* Content */}
+                  <h3 className="font-heading font-bold text-xl text-foreground mb-4">
+                    {service.title}
+                  </h3>
+                  
+                  <p className="text-foreground-muted mb-6 leading-relaxed">
+                    {service.description}
+                  </p>
+
+                  {/* Features */}
+                  <ul className="space-y-2 mb-6">
+                    {service.features.map((feature) => (
+                      <li key={feature} className="flex items-center text-sm text-foreground-muted">
+                        <div className="w-1.5 h-1.5 bg-neon rounded-full mr-3"></div>
+                        {feature}
+                      </li>
+                    ))}
+                  </ul>
+
+                  {/* CTA */}
+                  <Link
+                    to="/services"
+                    className="inline-flex items-center text-neon font-medium hover:text-neon/80 transition-colors group-hover:underline"
+                  >
+                    Learn more
+                    <svg className="w-4 h-4 ml-1 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5l7 7-7 7" />
+                    </svg>
+                  </Link>
+                </div>
+              </ScrollReveal>
+            );
+          })}
+        </div>
+
+        {/* Bottom CTA */}
+        <ScrollReveal delay={600}>
+          <div className="text-center mt-16">
+            <Link
+              to="/services"
+              className="btn-ghost text-lg px-12 py-4"
+            >
+              View all services
+            </Link>
+          </div>
+        </ScrollReveal>
+      </div>
+    </section>
+  );
+};
+
+export default ServicesOverview;

src/components/home/ValuePillars.tsx

@@ -0,0 +1,100 @@
+import { Shield, Zap, Users } from 'lucide-react';
+import ScrollReveal from '../ScrollReveal';
+
+const ValuePillars = () => {
+  const pillars = [
+    {
+      icon: Users,
+      number: '01',
+      title: 'End-to-end Managed IT',
+      description: 'Comprehensive computer & networking solutions tailored to your workflows — helpdesk, proactive maintenance, and clear SLAs.',
+      image: 'https://images.unsplash.com/photo-1551434678-e076c223a692?w=600&h=400&fit=crop&auto=format'
+    },
+    {
+      icon: Zap,
+      number: '02',
+      title: 'Faster Devices, Happier Teams',
+      description: 'Practical upgrades like SSD migrations and cleanup reduce tickets and boost morale.',
+      image: 'https://images.unsplash.com/photo-1518709268805-4e9042af2176?w=600&h=400&fit=crop&auto=format'
+    },
+    {
+      icon: Shield,
+      number: '03',
+      title: 'Secure Remote Access',
+      description: 'Zero-drama VPN with modern protocols (e.g., WireGuard) for secure, high-speed access anywhere.',
+      image: 'https://images.unsplash.com/photo-1563986768494-4dee2763ff3f?w=600&h=400&fit=crop&auto=format'
+    },
+  ];
+
+  return (
+    <section className="py-24 bg-background-deep relative overflow-hidden">
+      {/* Background decoration */}
+      <div className="absolute inset-0 grid-overlay opacity-20"></div>
+      
+      <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <ScrollReveal>
+          <div className="text-center mb-16">
+            <h2 className="font-heading font-bold text-4xl sm:text-5xl text-foreground mb-6">
+              Why teams choose us for{' '}
+              <span className="text-neon">reliable IT</span>
+            </h2>
+            <p className="text-xl text-foreground-muted max-w-3xl mx-auto">
+              We handle the complexity so you can focus on what you do best.
+            </p>
+          </div>
+        </ScrollReveal>
+
+        <div className="space-y-24">
+          {pillars.map((pillar, index) => {
+            const Icon = pillar.icon;
+            const isReverse = index % 2 === 1;
+            
+            return (
+              <ScrollReveal key={pillar.number} delay={index * 200}>
+                <div className={`flex flex-col ${isReverse ? 'lg:flex-row-reverse' : 'lg:flex-row'} items-center gap-12 lg:gap-16`}>
+                  {/* Content */}
+                  <div className="flex-1 space-y-6">
+                    <div className="flex items-center space-x-4">
+                      <span className="text-6xl font-heading font-bold text-neon/30">
+                        {pillar.number}
+                      </span>
+                      <div className="w-12 h-12 bg-neon/20 rounded-xl flex items-center justify-center">
+                        <Icon className="w-6 h-6 text-neon" />
+                      </div>
+                    </div>
+                    
+                    <h3 className="font-heading font-bold text-3xl text-foreground">
+                      {pillar.title}
+                    </h3>
+                    
+                    <p className="text-lg text-foreground-muted leading-relaxed">
+                      {pillar.description}
+                    </p>
+                    
+                    <button className="btn-ghost">
+                      Learn more
+                    </button>
+                  </div>
+
+                  {/* Image */}
+                  <div className="flex-1 parallax">
+                    <div className="card-dark p-2 group hover:shadow-neon transition-all duration-500">
+                      <img
+                        src={pillar.image}
+                        alt={pillar.title}
+                        className="w-full h-64 lg:h-80 object-cover rounded-xl transition-transform duration-500 group-hover:scale-105"
+                        loading="lazy"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </ScrollReveal>
+            );
+          })}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default ValuePillars;