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 {display}; }; const AboutPage: React.FC = () => { const timelineRef = useRef(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 (
{/* Hero Section */}
Local IT expertise for the
Coastal Bend
Since 2010, we've been helping businesses in Corpus Christi and surrounding communities build reliable, secure technology foundations that drive growth.
{/* Our Story */}

Our Story

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.

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.

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.

{/* Stats */}
{[ { 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) => (
{stat.prefix && {stat.prefix}} {stat.suffix && {stat.suffix}}
{stat.label}
))}
{/* Values */}

Our Values

{values.map((value, index) => (
{value.icon}

{value.title}

{value.desc}

))}
{/* Timeline */}

Our Journey

{/* Base Line */}
{/* Light Beam Line */} {timeline.map((item, index) => (
{item.year}

{item.title}

{item.desc}

{/* Timeline Dot */}
))}
); }; export default AboutPage;