diff --git a/index.html b/index.html index c02b6e2..c7dafee 100644 --- a/index.html +++ b/index.html @@ -3,12 +3,13 @@ - coastal-glow-narrative - - + Bay Area Affiliates - IT Services Corpus Christi | Managed IT Coastal Bend + + + - - + + diff --git a/src/App.tsx b/src/App.tsx index 18daf2e..b3da9a2 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -4,6 +4,10 @@ import { TooltipProvider } from "@/components/ui/tooltip"; import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import { BrowserRouter, Routes, Route } from "react-router-dom"; import Index from "./pages/Index"; +import Services from "./pages/Services"; +import About from "./pages/About"; +import Blog from "./pages/Blog"; +import Contact from "./pages/Contact"; import NotFound from "./pages/NotFound"; const queryClient = new QueryClient(); @@ -16,6 +20,10 @@ const App = () => ( } /> + } /> + } /> + } /> + } /> {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */} } /> diff --git a/src/assets/hero-network.jpg b/src/assets/hero-network.jpg new file mode 100644 index 0000000..c79f57c Binary files /dev/null and b/src/assets/hero-network.jpg differ diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx new file mode 100644 index 0000000..9fe55d5 --- /dev/null +++ b/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 ( + + ); +}; + +export default Footer; \ No newline at end of file diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx new file mode 100644 index 0000000..1bfb9f4 --- /dev/null +++ b/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 ( + + ); +}; + +export default Navigation; \ No newline at end of file diff --git a/src/components/ScrollReveal.tsx b/src/components/ScrollReveal.tsx new file mode 100644 index 0000000..b68fb41 --- /dev/null +++ b/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(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 ( +
+ {children} +
+ ); +}; + +export default ScrollReveal; \ No newline at end of file diff --git a/src/components/home/CTASection.tsx b/src/components/home/CTASection.tsx new file mode 100644 index 0000000..48c39bb --- /dev/null +++ b/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 ( +
+ {/* Background decoration */} +
+
+ +
+
+ +

+ Ready for reliable IT? +

+ +

+ Join 150+ Coastal Bend businesses that trust us with their technology. + Get started with a free 20-minute assessment. +

+ + + {/* Primary CTAs */} + +
+ + Book a 20-minute assessment + + + + + Send a message + +
+ + + {/* Micro FAQ */} + +
+ {faqs.map((faq, index) => { + const Icon = faq.icon; + + return ( +
+
+
+ +
+
+

+ {faq.question} +

+

+ {faq.answer} +

+
+
+
+ ); + })} +
+ + + {/* Contact info */} + +
+

+ Ready to talk? We're here to help. +

+ +
+ +
+
+
+ ); +}; + +export default CTASection; \ No newline at end of file diff --git a/src/components/home/HeroSection.tsx b/src/components/home/HeroSection.tsx new file mode 100644 index 0000000..d2f036b --- /dev/null +++ b/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 ( +
+
+ {/* Background image with overlay */} +
+ Modern IT infrastructure with network connections +
+
+ + {/* Particle field effect */} +
+ {Array.from({ length: 50 }).map((_, i) => ( +
+ ))} +
+ + {/* Main content */} +
+
+ {/* Badge */} +
+ + Serving the Coastal Bend since 2010 +
+ + {/* Main headline */} +

+ Modern IT that keeps your{' '} + business moving +

+ + {/* Subheadline */} +

+ From fast devices to secure remote access and resilient networks — we design, + run and protect your tech so you can focus on growth. +

+ + {/* CTA buttons */} +
+ + Get in touch + + + + +
+ + {/* Trust indicators */} +
+

Trusted by businesses across Corpus Christi

+
+ {['Healthcare', 'Manufacturing', 'Professional Services', 'Non-Profit'].map((industry) => ( + + {industry} + + ))} +
+
+
+
+ + {/* Scroll indicator */} +
+
+
+
+
+
+
+ ); +}; + +export default HeroSection; \ No newline at end of file diff --git a/src/components/home/ProcessTimeline.tsx b/src/components/home/ProcessTimeline.tsx new file mode 100644 index 0000000..d67a37c --- /dev/null +++ b/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(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 ( +
+ {/* Background decoration */} +
+
+
+
+ +
+ +
+

+ How we transform your IT +

+

+ Our proven four-phase methodology ensures systematic improvement and lasting results. +

+
+ + +
+ {/* Timeline line */} +
+
+
+ + {/* Steps */} +
+ {steps.map((step, index) => { + const Icon = step.icon; + const isActive = index <= activeStep; + const isEven = index % 2 === 0; + + return ( + +
+ {/* Step content */} +
+
+
+ + Step {index + 1} + +
+

+ {step.title} +

+

+ {step.description} +

+

+ {step.details} +

+
+
+ + {/* Timeline dot */} +
+
+ +
+
+ + {/* Spacer for layout */} +
+
+ + ); + })} +
+
+
+
+ ); +}; + +export default ProcessTimeline; \ No newline at end of file diff --git a/src/components/home/ProofSection.tsx b/src/components/home/ProofSection.tsx new file mode 100644 index 0000000..26ec391 --- /dev/null +++ b/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 ( +
+ {/* Background decoration */} +
+
+ +
+ +
+
+ + Proudly serving the Coastal Bend +
+ +

+ Local expertise for{' '} + Corpus Christi{' '} + and surrounding communities +

+ +

+ We understand the unique challenges of businesses in our region and provide + tailored solutions that work in the real world. +

+
+ + + {/* Stats */} + +
+ {stats.map((stat, index) => ( +
+
+ {stat.value} +
+
+ {stat.label} +
+
+ ))} +
+ + + {/* Testimonial */} + +
+
+ {/* Quote */} +
+
+ {[...Array(5)].map((_, i) => ( + + ))} +
+ +
+ "{testimonial.quote}" +
+ +
+
+ +
+
+
{testimonial.author}
+
+ {testimonial.title}, {testimonial.company} +
+
+
+
+
+
+ + + {/* Service area */} + +
+

+ Serving businesses throughout the Coastal Bend +

+ +
+ {[ + 'Corpus Christi', 'Portland', 'Ingleside', 'Aransas Pass', + 'Rockport', 'Fulton', 'Sinton', 'Mathis' + ].map((city) => ( + + + {city} + + ))} +
+
+ +
+
+ ); +}; + +export default ProofSection; \ No newline at end of file diff --git a/src/components/home/ServicesOverview.tsx b/src/components/home/ServicesOverview.tsx new file mode 100644 index 0000000..69ec37a --- /dev/null +++ b/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 ( +
+ {/* Background decoration */} +
+
+
+ +
+ +
+

+ Complete IT solutions for{' '} + modern businesses +

+

+ From desktop support to enterprise infrastructure — we've got your technology covered. +

+
+ + +
+ {services.map((service, index) => { + const Icon = service.icon; + + return ( + +
+ {/* Icon */} +
+ +
+ + {/* Content */} +

+ {service.title} +

+ +

+ {service.description} +

+ + {/* Features */} +
    + {service.features.map((feature) => ( +
  • +
    + {feature} +
    • + ))} +
+ + {/* CTA */} + + Learn more + + + + +
+ + ); + })} +
+ + {/* Bottom CTA */} + +
+ + View all services + +
+ +
+
+ ); +}; + +export default ServicesOverview; \ No newline at end of file diff --git a/src/components/home/ValuePillars.tsx b/src/components/home/ValuePillars.tsx new file mode 100644 index 0000000..24409f4 --- /dev/null +++ b/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 ( +
+ {/* Background decoration */} +
+ +
+ +
+

+ Why teams choose us for{' '} + reliable IT +

+

+ We handle the complexity so you can focus on what you do best. +

+
+ + +
+ {pillars.map((pillar, index) => { + const Icon = pillar.icon; + const isReverse = index % 2 === 1; + + return ( + +
+ {/* Content */} +
+
+ + {pillar.number} + +
+ +
+
+ +

+ {pillar.title} +

+ +

+ {pillar.description} +

+ + +
+ + {/* Image */} +
+
+ {pillar.title} +
+
+
+ + ); + })} +
+
+
+ ); +}; + +export default ValuePillars; \ No newline at end of file diff --git a/src/index.css b/src/index.css index 02c3260..98ccc5b 100644 --- a/src/index.css +++ b/src/index.css @@ -1,96 +1,76 @@ +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@600;700;800&display=swap'); + @tailwind base; @tailwind components; @tailwind utilities; -/* Definition of the design system. All colors, gradients, fonts, etc should be defined here. -All colors MUST be HSL. -*/ +/* Bay Area Affiliates Design System - Neon on Dark */ @layer base { :root { - --background: 0 0% 100%; - --foreground: 222.2 84% 4.9%; + /* Base teal/near-black system */ + --background: 180 75% 7%; /* #071b1b */ + --background-deep: 180 72% 9%; /* #0b2626 */ + --foreground: 0 0% 98%; /* Near white */ + --foreground-muted: 0 0% 80%; /* Muted white */ - --card: 0 0% 100%; - --card-foreground: 222.2 84% 4.9%; + /* Cards and surfaces */ + --card: 180 65% 10%; + --card-foreground: 0 0% 95%; + --card-border: 180 40% 15%; - --popover: 0 0% 100%; - --popover-foreground: 222.2 84% 4.9%; + /* Neon lime accent system */ + --neon: 76 100% 58%; /* #b7ff2a */ + --neon-glow: 76 100% 58%; + --neon-muted: 76 60% 45%; + --neon-foreground: 180 75% 7%; /* Dark text on neon */ - --primary: 222.2 47.4% 11.2%; - --primary-foreground: 210 40% 98%; + /* Interactive states */ + --primary: 76 100% 58%; /* Neon lime */ + --primary-foreground: 180 75% 7%; + --primary-hover: 76 100% 65%; - --secondary: 210 40% 96.1%; - --secondary-foreground: 222.2 47.4% 11.2%; + --secondary: 180 40% 15%; + --secondary-foreground: 0 0% 95%; + --secondary-hover: 180 40% 20%; - --muted: 210 40% 96.1%; - --muted-foreground: 215.4 16.3% 46.9%; + /* Muted and accent variants */ + --muted: 180 40% 12%; + --muted-foreground: 0 0% 65%; - --accent: 210 40% 96.1%; - --accent-foreground: 222.2 47.4% 11.2%; + --accent: 180 40% 15%; + --accent-foreground: 0 0% 95%; - --destructive: 0 84.2% 60.2%; - --destructive-foreground: 210 40% 98%; + /* Status colors */ + --destructive: 0 84% 60%; + --destructive-foreground: 0 0% 98%; - --border: 214.3 31.8% 91.4%; - --input: 214.3 31.8% 91.4%; - --ring: 222.2 84% 4.9%; + --success: 142 76% 36%; + --success-foreground: 0 0% 98%; - --radius: 0.5rem; + /* Borders and inputs */ + --border: 180 40% 18%; + --input: 180 40% 15%; + --input-border: 180 40% 25%; + --ring: 76 100% 58%; - --sidebar-background: 0 0% 98%; + /* Radius system */ + --radius: 1.5rem; + --radius-sm: 0.75rem; + --radius-lg: 2rem; - --sidebar-foreground: 240 5.3% 26.1%; + /* Grid and overlay */ + --grid-color: 180 40% 12%; + --overlay: 180 75% 7% / 0.8; - --sidebar-primary: 240 5.9% 10%; - - --sidebar-primary-foreground: 0 0% 98%; - - --sidebar-accent: 240 4.8% 95.9%; - - --sidebar-accent-foreground: 240 5.9% 10%; - - --sidebar-border: 220 13% 91%; - - --sidebar-ring: 217.2 91.2% 59.8%; - } - - .dark { - --background: 222.2 84% 4.9%; - --foreground: 210 40% 98%; - - --card: 222.2 84% 4.9%; - --card-foreground: 210 40% 98%; - - --popover: 222.2 84% 4.9%; - --popover-foreground: 210 40% 98%; - - --primary: 210 40% 98%; - --primary-foreground: 222.2 47.4% 11.2%; - - --secondary: 217.2 32.6% 17.5%; - --secondary-foreground: 210 40% 98%; - - --muted: 217.2 32.6% 17.5%; - --muted-foreground: 215 20.2% 65.1%; - - --accent: 217.2 32.6% 17.5%; - --accent-foreground: 210 40% 98%; - - --destructive: 0 62.8% 30.6%; - --destructive-foreground: 210 40% 98%; - - --border: 217.2 32.6% 17.5%; - --input: 217.2 32.6% 17.5%; - --ring: 212.7 26.8% 83.9%; - --sidebar-background: 240 5.9% 10%; - --sidebar-foreground: 240 4.8% 95.9%; - --sidebar-primary: 224.3 76.3% 48%; - --sidebar-primary-foreground: 0 0% 100%; - --sidebar-accent: 240 3.7% 15.9%; - --sidebar-accent-foreground: 240 4.8% 95.9%; - --sidebar-border: 240 3.7% 15.9%; - --sidebar-ring: 217.2 91.2% 59.8%; + /* Animations and effects */ + --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + --transition-bounce: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); + + /* Shadows and glows */ + --shadow-neon: 0 0 20px hsl(var(--neon) / 0.3); + --shadow-neon-strong: 0 0 40px hsl(var(--neon) / 0.6); + --shadow-card: 0 8px 32px hsl(180 75% 7% / 0.4); } } @@ -100,6 +80,103 @@ All colors MUST be HSL. } body { - @apply bg-background text-foreground; + @apply bg-background text-foreground font-body antialiased; + font-feature-settings: "rlig" 1, "calt" 1; + } + + html { + scroll-behavior: smooth; + } + + @media (prefers-reduced-motion: reduce) { + html { + scroll-behavior: auto; + } + + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } + } +} + +@layer components { + /* Grid overlay */ + .grid-overlay { + background-image: + linear-gradient(hsl(var(--grid-color)) 1px, transparent 1px), + linear-gradient(90deg, hsl(var(--grid-color)) 1px, transparent 1px); + background-size: 60px 60px; + opacity: 0.4; + } + + /* Neon glow effects */ + .neon-glow { + box-shadow: var(--shadow-neon); + transition: var(--transition-smooth); + } + + .neon-glow:hover { + box-shadow: var(--shadow-neon-strong); + } + + /* Text glow */ + .text-glow { + text-shadow: 0 0 10px hsl(var(--neon) / 0.5); + } + + /* Scroll reveal animation */ + .scroll-reveal { + opacity: 0; + transform: translateY(20px); + transition: opacity 0.6s ease-out, transform 0.6s ease-out; + } + + .scroll-reveal.revealed { + opacity: 1; + transform: translateY(0); + } + + /* Parallax container */ + .parallax { + transform: translateZ(0); + will-change: transform; + } + + /* Section pinning */ + .section-pin { + position: sticky; + top: 0; + height: 100vh; + overflow: hidden; + } + + /* Button variants */ + .btn-neon { + @apply bg-primary text-primary-foreground hover:bg-primary-hover; + @apply rounded-[var(--radius)] px-8 py-4 font-semibold; + @apply transition-all duration-300 ease-out; + @apply shadow-[0_0_0_1px_hsl(var(--neon))] hover:shadow-[0_0_20px_hsl(var(--neon)/0.5)]; + } + + .btn-ghost { + @apply border border-border hover:border-neon text-foreground hover:text-neon; + @apply rounded-[var(--radius)] px-8 py-4 font-semibold; + @apply transition-all duration-300 ease-out; + @apply hover:shadow-[0_0_15px_hsl(var(--neon)/0.3)]; + } + + /* Card styles */ + .card-dark { + @apply bg-card border border-card-border rounded-[var(--radius-lg)]; + @apply backdrop-blur-sm shadow-[var(--shadow-card)]; + } + + /* Typography helpers */ + .text-balance { + text-wrap: balance; } } \ No newline at end of file diff --git a/src/pages/About.tsx b/src/pages/About.tsx new file mode 100644 index 0000000..3b9f735 --- /dev/null +++ b/src/pages/About.tsx @@ -0,0 +1,266 @@ +import Navigation from '@/components/Navigation'; +import Footer from '@/components/Footer'; +import { Shield, Users, Zap, MapPin } from 'lucide-react'; +import ScrollReveal from '@/components/ScrollReveal'; + +const About = () => { + const values = [ + { + icon: Shield, + title: 'Security-First', + description: 'Every solution we implement prioritizes your data security and business continuity.' + }, + { + icon: Zap, + title: 'Reliability', + description: 'We build systems that work consistently, so you can depend on your technology.' + }, + { + icon: Users, + title: 'Clarity', + description: 'No tech jargon or hidden fees. We explain what we do and why it matters.' + } + ]; + + const timeline = [ + { + year: '2010', + title: 'Founded in Corpus Christi', + description: 'Started with a mission to bring enterprise-level IT solutions to local businesses.' + }, + { + year: '2015', + title: 'Expanded Service Portfolio', + description: 'Added cloud services and advanced networking to serve growing businesses.' + }, + { + year: '2020', + title: 'Remote Work Transformation', + description: 'Helped 100+ businesses transition to secure remote work during the pandemic.' + }, + { + year: '2024', + title: 'Leading the Coastal Bend', + description: '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. +

+
+ +
+
+ + {/* Story section */} +
+
+
+ +
+

+ 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. +

+
+
+ + + +
+

+ By the numbers +

+
+
+
150+
+
Businesses served
+
+
+
99.9%
+
Uptime achieved
+
+
+
15+
+
Years of service
+
+
+
<2min
+
Response time
+
+
+
+ +
+
+
+ + {/* Values section */} +
+
+ +
+

+ Our values guide everything we do +

+

+ These principles shape how we work with clients and build solutions. +

+
+ + +
+ {values.map((value, index) => { + const Icon = value.icon; + + return ( + +
+
+ +
+

+ {value.title} +

+

+ {value.description} +

+
+ + ); + })} +
+
+
+ + {/* Timeline section */} +
+
+ +
+

+ Our journey +

+

+ From a small startup to the Coastal Bend's trusted IT partner. +

+
+ + +
+ {/* Timeline line */} +
+ +
+ {timeline.map((item, index) => { + const isEven = index % 2 === 0; + + return ( + +
+ {/* Content */} +
+
+
+ {item.year} +
+

+ {item.title} +

+

+ {item.description} +

+
+
+ + {/* Timeline dot */} +
+
+
+ + {/* Spacer */} +
+
+ + ); + })} +
+
+
+
+ + {/* Local commitment */} +
+
+
+ +
+ + Proudly local +
+ +

+ Committed to the{' '} + Coastal Bend +

+ +

+ We live and work here too. When you succeed, our community succeeds. + That's why we're invested in building long-term partnerships, not just + providing quick fixes. +

+ + + Start a conversation + + +
+
+
+
+ +
+
+ ); +}; + +export default About; \ No newline at end of file diff --git a/src/pages/Blog.tsx b/src/pages/Blog.tsx new file mode 100644 index 0000000..62279ce --- /dev/null +++ b/src/pages/Blog.tsx @@ -0,0 +1,314 @@ +import Navigation from '@/components/Navigation'; +import Footer from '@/components/Footer'; +import { Calendar, ArrowRight, Clock } from 'lucide-react'; +import { Link } from 'react-router-dom'; +import ScrollReveal from '@/components/ScrollReveal'; + +const Blog = () => { + const posts = [ + { + id: 1, + title: 'Upgrade your HDD to SSD for a big speed boost', + excerpt: 'A practical checklist for business owners considering SSD upgrades, including before/after performance comparisons and cost analysis.', + content: ` +

Why SSD upgrades matter for business computers

+

If your business computers are still running traditional hard disk drives (HDDs), you're likely experiencing slower boot times, delayed file access, and frustrated employees. Solid State Drives (SSDs) can transform your computing experience dramatically.

+ +

The performance difference

+

Here's what you can expect when upgrading from HDD to SSD:

+
    +
  • Boot time: From 2-3 minutes to 15-30 seconds
    • +
  • Application loading: 50-70% faster startup times
    • +
  • File transfers: 3-5x faster copying and moving files
    • +
  • Overall responsiveness: Instant access to documents and programs
    • +
+ +

Real-world impact

+

For a typical office worker who starts their computer 2-3 times per day and opens multiple applications, an SSD upgrade can save 15-30 minutes daily. Over a year, that's 65-130 hours of increased productivity per employee.

+ +

Implementation checklist

+

Before upgrading your business computers:

+
    +
  1. Audit current hardware (age, compatibility, warranty status)
    2. +
  2. Identify priority machines (key employees, frequently used computers)
    3. +
  3. Plan data migration strategy (clone drives or fresh installs)
    4. +
  4. Budget for professional installation vs. DIY approach
    5. +
  5. Schedule upgrades during off-hours to minimize disruption
    6. +
+ +

Cost considerations

+

SSD prices have dropped significantly. A typical business-grade 500GB SSD costs $60-100, with installation running $50-150 per machine if done professionally. For a computer that's 2-4 years old, this upgrade often provides better ROI than buying new hardware.

+ +

If you're ready to boost your team's productivity with SSD upgrades, contact us for a free assessment of your current hardware.

+ `, + author: 'Technical Team', + date: '2024-01-15', + readTime: '8 min read', + category: 'Hardware', + image: 'https://images.unsplash.com/photo-1597872200969-2b65d56bd16b?w=800&h=400&fit=crop&auto=format' + }, + { + id: 2, + title: 'Secure your corporate network access with WireGuard VPN', + excerpt: 'Learn why modern businesses are switching to WireGuard VPN for faster, more secure remote access, and how to implement it properly.', + content: ` +

Why traditional VPNs are holding your business back

+

If your remote workers complain about slow, unreliable VPN connections, you're not alone. Traditional VPN protocols like OpenVPN and IPSec were designed decades ago and struggle with modern internet conditions.

+ +

What makes WireGuard different

+

WireGuard is a modern VPN protocol that's faster, more secure, and easier to manage than traditional solutions:

+
    +
  • Speed: Up to 5x faster than OpenVPN in real-world tests
    • +
  • Security: Modern cryptography with smaller attack surface
    • +
  • Reliability: Seamless roaming between networks (WiFi to cellular)
    • +
  • Battery life: More efficient on mobile devices
    • +
+ +

Business benefits

+

Beyond technical advantages, WireGuard delivers real business value:

+
    +
  • Remote workers stay productive with fast, reliable connections
    • +
  • Reduced support tickets related to VPN issues
    • +
  • Better security posture with modern encryption
    • +
  • Easier management and troubleshooting for IT teams
    • +
+ +

Implementation considerations

+

While WireGuard is more straightforward than traditional VPNs, proper implementation requires planning:

+
    +
  1. Network design: Plan IP address ranges and routing
    2. +
  2. Certificate management: Secure key distribution strategy
    3. +
  3. Client configuration: Standardized setup for all devices
    4. +
  4. Monitoring: Track usage and performance metrics
    5. +
  5. Training: Ensure users understand the new system
    6. +
+ +

Security best practices

+

A WireGuard VPN is only as secure as its implementation. Key security measures include:

+
    +
  • Regular key rotation and revocation procedures
    • +
  • Network segmentation to limit access scope
    • +
  • Multi-factor authentication for administrative access
    • +
  • Logging and monitoring for unusual activity
    • +
  • Regular security audits and penetration testing
    • +
+ +

Ready to give your team faster, more secure remote access? Contact us to discuss WireGuard implementation for your business.

+ `, + author: 'Security Team', + date: '2024-01-08', + readTime: '12 min read', + category: 'Security', + image: 'https://images.unsplash.com/photo-1563986768494-4dee2763ff3f?w=800&h=400&fit=crop&auto=format' + }, + { + id: 3, + title: 'What comprehensive IT support looks like for SMBs', + excerpt: 'Understanding the full scope of managed IT services: from hardware and network infrastructure to virtualization and helpdesk support.', + content: ` +

Beyond break-fix: The modern approach to IT support

+

Many small and medium businesses still operate on a "break-fix" model—calling for help only when something stops working. But comprehensive IT support takes a proactive approach that prevents problems before they impact your business.

+ +

The four pillars of comprehensive IT support

+ +

1. Hardware and Desktop Support

+

This goes beyond fixing broken computers:

+
    +
  • Proactive hardware monitoring and maintenance
    • +
  • Planned hardware refresh cycles to avoid unexpected failures
    • +
  • Performance optimization (SSD upgrades, memory increases)
    • +
  • 24/7 helpdesk for user support and troubleshooting
    • +
  • Asset management and warranty tracking
    • +
+ +

2. Network Infrastructure

+

Your network is the foundation of modern business operations:

+
    +
  • Enterprise-grade switching and routing equipment
    • +
  • Reliable, secure wireless networks that scale
    • +
  • Network monitoring and performance optimization
    • +
  • Redundancy planning to minimize downtime
    • +
  • Regular security audits and updates
    • +
+ +

3. Virtualization and Cloud Services

+

Modern infrastructure that grows with your business:

+
    +
  • Server virtualization to reduce hardware costs
    • +
  • Cloud migration strategy and implementation
    • +
  • Hybrid solutions that balance performance and cost
    • +
  • Resource scaling based on business needs
    • +
  • Backup and disaster recovery in the cloud
    • +
+ +

4. Security and Compliance

+

Protecting your business from ever-evolving threats:

+
    +
  • Multi-layered security strategy (endpoint, network, email)
    • +
  • Regular security training for employees
    • +
  • Compliance management for industry regulations
    • +
  • Incident response planning and testing
    • +
  • Security monitoring and threat detection
    • +
+ +

What this means for your business

+

Comprehensive IT support transforms technology from a business constraint into a competitive advantage:

+
    +
  • Increased uptime: Proactive monitoring prevents 80% of potential issues
    • +
  • Predictable costs: Monthly service fees instead of emergency repair bills
    • +
  • Enhanced security: Professional-grade protection without dedicated IT staff
    • +
  • Scalable growth: Technology that adapts as your business evolves
    • +
  • Peace of mind: Focus on your core business while experts handle IT
    • +
+ +

Choosing the right IT partner

+

Not all managed service providers offer truly comprehensive support. Look for:

+
    +
  • Local presence and understanding of your market
    • +
  • Transparent pricing with clear service level agreements
    • +
  • Proactive approach, not just reactive support
    • +
  • Experience with businesses similar to yours
    • +
  • Strong references and proven track record
    • +
+ +

Ready to move beyond break-fix IT support? Schedule a consultation to learn how comprehensive IT support can benefit your business.

+ `, + author: 'Strategy Team', + date: '2024-01-01', + readTime: '15 min read', + category: 'Strategy', + image: 'https://images.unsplash.com/photo-1551434678-e076c223a692?w=800&h=400&fit=crop&auto=format' + } + ]; + + return ( +
+ + +
+ {/* Hero section */} +
+
+ +
+ +
+

+ IT insights for{' '} + your business +

+

+ Practical advice, industry insights, and technical guides to help + your business make better technology decisions. +

+
+ +
+
+ + {/* Blog posts */} +
+
+
+ {posts.map((post, index) => ( + +
+
+ {/* Image */} +
+ {post.title} +
+ + {post.category} + +
+
+ + {/* Content */} +
+
+
+ + {new Date(post.date).toLocaleDateString('en-US', { + year: 'numeric', + month: 'long', + day: 'numeric' + })} +
+
+ + {post.readTime} +
+
+ +

+ {post.title} +

+ +

+ {post.excerpt} +

+ +
+ + By {post.author} + + + + Read article + + +
+
+
+
+ + ))} +
+ + {/* Newsletter signup */} + +
+
+

+ Stay updated with IT insights +

+

+ Get practical tips, industry updates, and technology guidance + delivered to your inbox monthly. +

+ +
+ + +
+ +

+ No spam, unsubscribe anytime. +

+
+
+ +
+
+
+ +
+
+ ); +}; + +export default Blog; \ No newline at end of file diff --git a/src/pages/Contact.tsx b/src/pages/Contact.tsx new file mode 100644 index 0000000..571e479 --- /dev/null +++ b/src/pages/Contact.tsx @@ -0,0 +1,336 @@ +import { useState } from 'react'; +import Navigation from '@/components/Navigation'; +import Footer from '@/components/Footer'; +import { Mail, Phone, MapPin, Clock, DollarSign, Headphones } from 'lucide-react'; +import ScrollReveal from '@/components/ScrollReveal'; +import { useToast } from '@/hooks/use-toast'; + +const Contact = () => { + const { toast } = useToast(); + const [formData, setFormData] = useState({ + name: '', + email: '', + company: '', + phone: '', + message: '' + }); + const [isSubmitting, setIsSubmitting] = useState(false); + + const handleSubmit = async (e: React.FormEvent) => { + e.preventDefault(); + setIsSubmitting(true); + + // Simulate form submission + setTimeout(() => { + setIsSubmitting(false); + toast({ + title: "Message sent successfully!", + description: "We'll get back to you within 24 hours.", + }); + setFormData({ + name: '', + email: '', + company: '', + phone: '', + message: '' + }); + }, 1000); + }; + + const handleChange = (e: React.ChangeEvent) => { + setFormData(prev => ({ + ...prev, + [e.target.name]: e.target.value + })); + }; + + const faqs = [ + { + icon: Clock, + question: "How quickly can you start?", + answer: "Most assessments can begin within 48 hours of contact. Emergency support is available 24/7." + }, + { + icon: DollarSign, + question: "How do you price services?", + answer: "Transparent monthly pricing based on devices and services needed. No hidden fees or surprise charges." + }, + { + icon: Headphones, + question: "What's included in support?", + answer: "24/7 monitoring, helpdesk, proactive maintenance, security updates, and SLA guarantees." + } + ]; + + return ( +
+ + +
+ {/* Hero section */} +
+
+ +
+ +
+

+ Let's talk about your{' '} + IT needs +

+

+ 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. +

+
+ +
+
+ + {/* Contact form and info */} +
+
+
+ {/* Contact form */} +
+ +
+

+ Send us a message +

+ +
+
+
+ + +
+ +
+ + +
+
+ +
+
+ + +
+ +
+ + +
+
+ +
+ +