wow
This commit is contained in:
parent
91b819e9c1
commit
1a93c0f5ed
11
index.html
11
index.html
|
|
@ -213,10 +213,21 @@
|
|||
|
||||
<!-- Performance Optimization -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link rel="dns-prefetch" href="https://fonts.gstatic.com" />
|
||||
|
||||
<!-- Non-blocking font loading with font-display: swap -->
|
||||
<link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@600;700;800&display=swap" />
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@600;700;800&display=swap" media="print" onload="this.media='all'" />
|
||||
<noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@600;700;800&display=swap" /></noscript>
|
||||
|
||||
<!-- Critical asset preloads -->
|
||||
<link rel="preload" href="/logo_bayarea.svg" as="image" />
|
||||
<link rel="preload" href="/serverroom.webp" as="image" type="image/webp" />
|
||||
|
||||
<!-- Canonical URL -->
|
||||
<link rel="canonical" href="https://bayarea-cc.com/" />
|
||||
|
||||
<!-- Favicon -->
|
||||
<link rel="icon" type="image/svg+xml" href="/logo_bayarea.svg" />
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/logo_bayarea.svg" />
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ const Footer = () => {
|
|||
];
|
||||
|
||||
return (
|
||||
<footer className="bg-background-deep border-t border-border">
|
||||
<footer role="contentinfo" className="bg-background-deep border-t border-border">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
|
||||
{/* Company info */}
|
||||
|
|
|
|||
|
|
@ -37,9 +37,9 @@ const Navigation = () => {
|
|||
|
||||
<motion.nav
|
||||
className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${isScrolled
|
||||
? 'bg-white/5 backdrop-blur-2xl border-b border-white/20 shadow-2xl shadow-black/20'
|
||||
: 'bg-transparent'
|
||||
}`}
|
||||
? 'bg-background-deep/80 backdrop-blur-md border-b border-neon/30 shadow-[0_0_20px_rgba(0,0,0,0.5)]'
|
||||
: 'bg-transparent border-b border-transparent'
|
||||
}`}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
variants={navVariants}
|
||||
|
|
@ -48,153 +48,153 @@ const Navigation = () => {
|
|||
>
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex items-center justify-between h-14 md:h-16">
|
||||
{/* Logo with animation */}
|
||||
<Link to="/" className="flex items-center space-x-3">
|
||||
<motion.div
|
||||
className="w-12 h-12 flex items-center justify-center overflow-visible"
|
||||
whileHover={{ rotate: 360 }}
|
||||
transition={{ duration: 0.6, ease: "easeInOut" }}
|
||||
>
|
||||
<img
|
||||
src="/logo_bayarea.svg"
|
||||
alt="Bay Area Affiliates Logo"
|
||||
className="w-10 h-10 opacity-90"
|
||||
/>
|
||||
</motion.div>
|
||||
<span className="font-heading font-bold text-lg text-white">
|
||||
Bay Area Affiliates
|
||||
</span>
|
||||
</Link>
|
||||
|
||||
{/* Desktop Navigation with animations */}
|
||||
<div className="hidden md:flex items-center space-x-8">
|
||||
{navItems.map((item, index) => (
|
||||
{/* Logo with animation */}
|
||||
<Link to="/" className="flex items-center space-x-3">
|
||||
<motion.div
|
||||
key={item.name}
|
||||
initial={{ opacity: 0, y: -20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: index * 0.1, duration: 0.5 }}
|
||||
className="w-12 h-12 flex items-center justify-center overflow-visible"
|
||||
whileHover={{ rotate: 360 }}
|
||||
transition={{ duration: 0.6, ease: "easeInOut" }}
|
||||
>
|
||||
<Link
|
||||
to={item.path}
|
||||
className={`font-medium transition-all duration-200 relative group px-2 py-1 ${isActive(item.path)
|
||||
? 'text-neon'
|
||||
: 'text-white hover:text-neon'
|
||||
}`}
|
||||
>
|
||||
{item.name}
|
||||
{/* Animated underline */}
|
||||
<motion.span
|
||||
className="absolute -bottom-1 left-0 h-0.5 bg-neon rounded-full"
|
||||
initial={{ width: isActive(item.path) ? '100%' : 0 }}
|
||||
whileHover={{ width: '100%', boxShadow: '0 0 8px rgba(51, 102, 255, 0.6)' }}
|
||||
transition={{ duration: 0.3, ease: "easeOut" }}
|
||||
/>
|
||||
{/* Glow effect on hover */}
|
||||
<motion.span
|
||||
className="absolute inset-0 bg-neon/5 rounded-lg -z-10"
|
||||
initial={{ opacity: 0, scale: 0.8 }}
|
||||
whileHover={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
/>
|
||||
</Link>
|
||||
<img
|
||||
src="/logo_bayarea.svg"
|
||||
alt="Bay Area Affiliates Logo"
|
||||
className="w-10 h-10 opacity-90"
|
||||
/>
|
||||
</motion.div>
|
||||
))}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.8 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ delay: 0.5, duration: 0.5 }}
|
||||
whileHover={buttonHover}
|
||||
whileTap={buttonTap}
|
||||
>
|
||||
<Link
|
||||
to="/contact"
|
||||
className="btn-neon ml-4"
|
||||
>
|
||||
Get Started
|
||||
</Link>
|
||||
</motion.div>
|
||||
</div>
|
||||
<span className="font-heading font-bold text-lg text-white">
|
||||
Bay Area Affiliates
|
||||
</span>
|
||||
</Link>
|
||||
|
||||
{/* Mobile menu button with animation */}
|
||||
<motion.button
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
className="md:hidden text-white hover:text-neon transition-colors"
|
||||
aria-label="Toggle navigation menu"
|
||||
whileHover={{ scale: 1.1 }}
|
||||
whileTap={{ scale: 0.9 }}
|
||||
>
|
||||
<AnimatePresence mode="wait">
|
||||
{isOpen ? (
|
||||
{/* Desktop Navigation with animations */}
|
||||
<div className="hidden md:flex items-center space-x-8">
|
||||
{navItems.map((item, index) => (
|
||||
<motion.div
|
||||
key="close"
|
||||
initial={{ rotate: -90, opacity: 0 }}
|
||||
animate={{ rotate: 0, opacity: 1 }}
|
||||
exit={{ rotate: 90, opacity: 0 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
key={item.name}
|
||||
initial={{ opacity: 0, y: -20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: index * 0.1, duration: 0.5 }}
|
||||
>
|
||||
<X size={24} />
|
||||
</motion.div>
|
||||
) : (
|
||||
<motion.div
|
||||
key="menu"
|
||||
initial={{ rotate: 90, opacity: 0 }}
|
||||
animate={{ rotate: 0, opacity: 1 }}
|
||||
exit={{ rotate: -90, opacity: 0 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
>
|
||||
<Menu size={24} />
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</motion.button>
|
||||
</div>
|
||||
|
||||
{/* Mobile Navigation with smooth animations */}
|
||||
<AnimatePresence>
|
||||
{isOpen && (
|
||||
<motion.div
|
||||
initial={{ height: 0, opacity: 0 }}
|
||||
animate={{ height: 'auto', opacity: 1 }}
|
||||
exit={{ height: 0, opacity: 0 }}
|
||||
transition={{ duration: 0.3, ease: "easeInOut" }}
|
||||
className="md:hidden bg-white/5 backdrop-blur-2xl border-t border-white/20 overflow-hidden"
|
||||
>
|
||||
<motion.div
|
||||
className="px-2 pt-2 pb-3 space-y-1"
|
||||
variants={staggerContainer}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
>
|
||||
{navItems.map((item) => (
|
||||
<motion.div key={item.name} variants={staggerItem}>
|
||||
<Link
|
||||
to={item.path}
|
||||
onClick={() => setIsOpen(false)}
|
||||
className={`block px-3 py-2 rounded-md text-base font-medium transition-colors ${isActive(item.path)
|
||||
? 'text-neon bg-neon/10'
|
||||
: 'text-white hover:text-neon hover:bg-neon/5'
|
||||
}`}
|
||||
>
|
||||
{item.name}
|
||||
</Link>
|
||||
</motion.div>
|
||||
))}
|
||||
<motion.div variants={staggerItem}>
|
||||
<Link
|
||||
to="/contact"
|
||||
onClick={() => setIsOpen(false)}
|
||||
className="block w-full text-center btn-neon mt-4"
|
||||
to={item.path}
|
||||
className={`font-medium transition-all duration-200 relative group px-2 py-1 ${isActive(item.path)
|
||||
? 'text-neon'
|
||||
: 'text-white hover:text-neon'
|
||||
}`}
|
||||
>
|
||||
Get Started
|
||||
{item.name}
|
||||
{/* Animated underline */}
|
||||
<motion.span
|
||||
className="absolute -bottom-1 left-0 h-0.5 bg-neon rounded-full"
|
||||
initial={{ width: isActive(item.path) ? '100%' : 0 }}
|
||||
whileHover={{ width: '100%', boxShadow: '0 0 8px rgba(51, 102, 255, 0.6)' }}
|
||||
transition={{ duration: 0.3, ease: "easeOut" }}
|
||||
/>
|
||||
{/* Glow effect on hover */}
|
||||
<motion.span
|
||||
className="absolute inset-0 bg-neon/5 rounded-lg -z-10"
|
||||
initial={{ opacity: 0, scale: 0.8 }}
|
||||
whileHover={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
/>
|
||||
</Link>
|
||||
</motion.div>
|
||||
))}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.8 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ delay: 0.5, duration: 0.5 }}
|
||||
whileHover={buttonHover}
|
||||
whileTap={buttonTap}
|
||||
>
|
||||
<Link
|
||||
to="/contact"
|
||||
className="btn-neon ml-4"
|
||||
>
|
||||
Get Started
|
||||
</Link>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</motion.nav>
|
||||
</div>
|
||||
|
||||
{/* Mobile menu button with animation */}
|
||||
<motion.button
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
className="md:hidden text-white hover:text-neon transition-colors"
|
||||
aria-label="Toggle navigation menu"
|
||||
whileHover={{ scale: 1.1 }}
|
||||
whileTap={{ scale: 0.9 }}
|
||||
>
|
||||
<AnimatePresence mode="wait">
|
||||
{isOpen ? (
|
||||
<motion.div
|
||||
key="close"
|
||||
initial={{ rotate: -90, opacity: 0 }}
|
||||
animate={{ rotate: 0, opacity: 1 }}
|
||||
exit={{ rotate: 90, opacity: 0 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
>
|
||||
<X size={24} />
|
||||
</motion.div>
|
||||
) : (
|
||||
<motion.div
|
||||
key="menu"
|
||||
initial={{ rotate: 90, opacity: 0 }}
|
||||
animate={{ rotate: 0, opacity: 1 }}
|
||||
exit={{ rotate: -90, opacity: 0 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
>
|
||||
<Menu size={24} />
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</motion.button>
|
||||
</div>
|
||||
|
||||
{/* Mobile Navigation with smooth animations */}
|
||||
<AnimatePresence>
|
||||
{isOpen && (
|
||||
<motion.div
|
||||
initial={{ height: 0, opacity: 0 }}
|
||||
animate={{ height: 'auto', opacity: 1 }}
|
||||
exit={{ height: 0, opacity: 0 }}
|
||||
transition={{ duration: 0.3, ease: "easeInOut" }}
|
||||
className="md:hidden bg-white/5 backdrop-blur-2xl border-t border-white/20 overflow-hidden"
|
||||
>
|
||||
<motion.div
|
||||
className="px-2 pt-2 pb-3 space-y-1"
|
||||
variants={staggerContainer}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
>
|
||||
{navItems.map((item) => (
|
||||
<motion.div key={item.name} variants={staggerItem}>
|
||||
<Link
|
||||
to={item.path}
|
||||
onClick={() => setIsOpen(false)}
|
||||
className={`block px-3 py-2 rounded-md text-base font-medium transition-colors ${isActive(item.path)
|
||||
? 'text-neon bg-neon/10'
|
||||
: 'text-white hover:text-neon hover:bg-neon/5'
|
||||
}`}
|
||||
>
|
||||
{item.name}
|
||||
</Link>
|
||||
</motion.div>
|
||||
))}
|
||||
<motion.div variants={staggerItem}>
|
||||
<Link
|
||||
to="/contact"
|
||||
onClick={() => setIsOpen(false)}
|
||||
className="block w-full text-center btn-neon mt-4"
|
||||
>
|
||||
Get Started
|
||||
</Link>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</motion.nav>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,29 +1,51 @@
|
|||
import { ReactNode } from 'react';
|
||||
import { motion, useInView } from 'framer-motion';
|
||||
import { useRef } from 'react';
|
||||
import { scrollRevealVariants } from '@/utils/animations';
|
||||
import React, { useRef } from 'react';
|
||||
|
||||
type ScrollRevealProps = {
|
||||
children: ReactNode;
|
||||
interface ScrollRevealProps {
|
||||
children: React.ReactNode;
|
||||
width?: 'fit-content' | '100%';
|
||||
delay?: number;
|
||||
duration?: number;
|
||||
direction?: 'up' | 'down' | 'left' | 'right';
|
||||
className?: string;
|
||||
};
|
||||
}
|
||||
|
||||
const ScrollReveal = ({ children, delay = 0, className = '' }: ScrollRevealProps) => {
|
||||
const ScrollReveal: React.FC<ScrollRevealProps> = ({
|
||||
children,
|
||||
width = 'fit-content',
|
||||
delay = 0,
|
||||
duration = 0.5,
|
||||
direction = 'up',
|
||||
className = ""
|
||||
}) => {
|
||||
const ref = useRef(null);
|
||||
const isInView = useInView(ref, { once: true, margin: "-100px" });
|
||||
const isInView = useInView(ref, { once: true, margin: "-50px 0px" }); // Trigger slightly before element is fully in view
|
||||
|
||||
const getDirectionOffset = () => {
|
||||
switch (direction) {
|
||||
case 'up': return { y: 75 };
|
||||
case 'down': return { y: -75 };
|
||||
case 'left': return { x: 75 };
|
||||
case 'right': return { x: -75 };
|
||||
default: return { y: 75 };
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
ref={ref}
|
||||
initial="hidden"
|
||||
animate={isInView ? "visible" : "hidden"}
|
||||
variants={scrollRevealVariants}
|
||||
transition={{ delay: delay / 1000 }}
|
||||
className={className}
|
||||
>
|
||||
{children}
|
||||
</motion.div>
|
||||
<div ref={ref} style={{ position: 'relative', width, overflow: 'hidden' }} className={className}>
|
||||
<motion.div
|
||||
variants={{
|
||||
hidden: { opacity: 0, ...getDirectionOffset() },
|
||||
visible: { opacity: 1, x: 0, y: 0 },
|
||||
}}
|
||||
initial="hidden"
|
||||
animate={isInView ? "visible" : "hidden"}
|
||||
transition={{ duration, delay, ease: "easeOut" }}
|
||||
>
|
||||
{children}
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ const HeroSection = () => {
|
|||
animate={{ scale: 1.1, opacity: 1 }}
|
||||
transition={{ duration: 1.2, ease: easing.elegant }}
|
||||
loading="eager"
|
||||
fetchpriority="high"
|
||||
fetchPriority="high"
|
||||
/>
|
||||
</picture>
|
||||
|
||||
|
|
|
|||
|
|
@ -82,23 +82,13 @@ const ProofSection = () => {
|
|||
variants={staggerItem}
|
||||
className="text-center"
|
||||
>
|
||||
<motion.div
|
||||
className="font-heading font-bold text-4xl lg:text-5xl text-neon mb-2"
|
||||
initial={{ scale: 0, rotate: -180 }}
|
||||
animate={isStatsInView ? { scale: 1, rotate: 0 } : { scale: 0, rotate: -180 }}
|
||||
transition={{
|
||||
delay: index * 0.1,
|
||||
duration: 0.6,
|
||||
type: "spring",
|
||||
stiffness: 150
|
||||
}}
|
||||
>
|
||||
<div className="font-heading font-bold text-4xl lg:text-5xl text-neon mb-2">
|
||||
<CountUpNumber
|
||||
value={stat.value}
|
||||
duration={2000 + index * 200}
|
||||
className="inline-block"
|
||||
/>
|
||||
</motion.div>
|
||||
</div>
|
||||
<motion.div
|
||||
className="text-foreground-muted text-sm lg:text-base"
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
|
|
|
|||
|
|
@ -85,71 +85,77 @@ const ServicesOverview = () => {
|
|||
const Icon = service.icon;
|
||||
|
||||
return (
|
||||
<motion.div key={service.title} variants={staggerItem}>
|
||||
<motion.div key={service.title} variants={staggerItem} className="h-full">
|
||||
<motion.div
|
||||
className="card-dark p-8 h-full"
|
||||
className="card-dark p-8 h-full relative overflow-hidden group border border-white/5 hover:border-neon/50 transition-colors duration-500"
|
||||
whileHover={{
|
||||
y: -8,
|
||||
boxShadow: "0 0 30px rgba(51, 102, 255, 0.4)"
|
||||
y: -10,
|
||||
scale: 1.02,
|
||||
boxShadow: "0 20px 40px -10px rgba(51, 102, 255, 0.3)"
|
||||
}}
|
||||
transition={{ duration: 0.3 }}
|
||||
transition={{ duration: 0.4, ease: "easeOut" }}
|
||||
>
|
||||
{/* Subtle gradient background nice touch */}
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-neon/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
|
||||
|
||||
{/* Icon */}
|
||||
<motion.div
|
||||
className="w-12 h-12 bg-neon/20 rounded-xl flex items-center justify-center mb-6"
|
||||
className="w-12 h-12 bg-neon/10 rounded-xl flex items-center justify-center mb-6 relative z-10 group-hover:bg-neon/20 transition-colors duration-300"
|
||||
whileHover={{ rotate: 360, scale: 1.1 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
>
|
||||
<Icon className="w-6 h-6 text-neon" />
|
||||
<Icon className="w-6 h-6 text-neon drop-shadow-[0_0_8px_rgba(51,102,255,0.6)]" />
|
||||
</motion.div>
|
||||
|
||||
{/* Content */}
|
||||
<h3 className="font-heading font-bold text-xl text-foreground mb-4">
|
||||
{service.title}
|
||||
</h3>
|
||||
<div className="relative z-10">
|
||||
<h3 className="font-heading font-bold text-xl text-foreground mb-4 group-hover:text-neon transition-colors duration-300">
|
||||
{service.title}
|
||||
</h3>
|
||||
|
||||
<p className="text-foreground-muted mb-6 leading-relaxed">
|
||||
{service.description}
|
||||
</p>
|
||||
<p className="text-foreground-muted mb-6 leading-relaxed">
|
||||
{service.description}
|
||||
</p>
|
||||
|
||||
{/* Features */}
|
||||
<ul className="space-y-2 mb-6">
|
||||
{service.features.map((feature) => (
|
||||
<li key={feature} className="flex items-center text-sm text-foreground-muted">
|
||||
<motion.div
|
||||
className="w-1.5 h-1.5 bg-neon rounded-full mr-3"
|
||||
animate={{
|
||||
scale: [1, 1.3, 1],
|
||||
opacity: [0.7, 1, 0.7]
|
||||
}}
|
||||
transition={{
|
||||
duration: 2,
|
||||
repeat: Infinity,
|
||||
delay: index * 0.2
|
||||
}}
|
||||
/>
|
||||
{feature}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
{/* Features */}
|
||||
<ul className="space-y-2 mb-6">
|
||||
{service.features.map((feature) => (
|
||||
<li key={feature} className="flex items-center text-sm text-foreground-muted">
|
||||
<motion.div
|
||||
className="w-1.5 h-1.5 bg-neon rounded-full mr-3 shadow-[0_0_5px_rgba(51,102,255,0.8)]"
|
||||
animate={{
|
||||
scale: [1, 1.5, 1],
|
||||
opacity: [0.7, 1, 0.7]
|
||||
}}
|
||||
transition={{
|
||||
duration: 2,
|
||||
repeat: Infinity,
|
||||
delay: index * 0.2
|
||||
}}
|
||||
/>
|
||||
{feature}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
{/* CTA */}
|
||||
<Link
|
||||
to="/services"
|
||||
className="inline-flex items-center text-neon font-medium hover:text-neon/80 transition-colors group"
|
||||
>
|
||||
Learn more
|
||||
<motion.svg
|
||||
className="w-4 h-4 ml-1"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
animate={{ x: [0, 3, 0] }}
|
||||
transition={{ duration: 1.5, repeat: Infinity, ease: "easeInOut" }}
|
||||
{/* CTA */}
|
||||
<Link
|
||||
to="/services"
|
||||
className="inline-flex items-center text-neon font-medium group-hover:translate-x-2 transition-transform duration-300"
|
||||
>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5l7 7-7 7" />
|
||||
</motion.svg>
|
||||
</Link>
|
||||
Learn more
|
||||
<motion.svg
|
||||
className="w-4 h-4 ml-1"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
animate={{ x: [0, 3, 0] }}
|
||||
transition={{ duration: 1.5, repeat: Infinity, ease: "easeInOut" }}
|
||||
>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5l7 7-7 7" />
|
||||
</motion.svg>
|
||||
</Link>
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,54 @@
|
|||
import { motion } from 'framer-motion';
|
||||
|
||||
const TrustedBy = () => {
|
||||
// Placeholder logos - in a real app these would be SVGs
|
||||
const companies = [
|
||||
{ name: "TechCorp", color: "bg-blue-400" },
|
||||
{ name: "SecureNet", color: "bg-indigo-400" },
|
||||
{ name: "CloudSystems", color: "bg-cyan-400" },
|
||||
{ name: "FutureData", color: "bg-sky-400" },
|
||||
{ name: "CyberGuard", color: "bg-teal-400" },
|
||||
{ name: "NetWorks", color: "bg-emerald-400" },
|
||||
];
|
||||
|
||||
// duplicate for seamless loop
|
||||
const logos = [...companies, ...companies, ...companies];
|
||||
|
||||
return (
|
||||
<section className="py-10 border-b border-white/5 bg-background-deep relative overflow-hidden">
|
||||
<p className="text-center text-sm font-medium text-foreground-muted mb-8 tracking-wider uppercase relative z-10 px-4">
|
||||
Trusted by innovative businesses in Corpus Christi
|
||||
</p>
|
||||
|
||||
<div className="relative flex overflow-hidden mask-linear-fade">
|
||||
{/* Gradient Masks for smooth fade out at edges */}
|
||||
<div className="absolute left-0 top-0 bottom-0 w-24 bg-gradient-to-r from-background-deep to-transparent z-10"></div>
|
||||
<div className="absolute right-0 top-0 bottom-0 w-24 bg-gradient-to-l from-background-deep to-transparent z-10"></div>
|
||||
|
||||
<motion.div
|
||||
className="flex space-x-16 items-center"
|
||||
animate={{ x: ["0%", "-50%"] }}
|
||||
transition={{
|
||||
duration: 30,
|
||||
repeat: Infinity,
|
||||
ease: "linear",
|
||||
repeatType: "loop"
|
||||
}}
|
||||
>
|
||||
{logos.map((company, index) => (
|
||||
<div key={index} className="flex items-center space-x-2 opacity-50 grayscale hover:grayscale-0 hover:opacity-100 transition-all duration-300">
|
||||
{/* Fake Logo Icon */}
|
||||
<div className={`w-8 h-8 rounded-lg ${company.color}/20 flex items-center justify-center`}>
|
||||
<div className={`w-4 h-4 rounded-full ${company.color}`}></div>
|
||||
</div>
|
||||
{/* Fake Logo Text */}
|
||||
<span className="text-xl font-bold text-white tracking-tight">{company.name}</span>
|
||||
</div>
|
||||
))}
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default TrustedBy;
|
||||
|
|
@ -1,5 +1,3 @@
|
|||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@600;700;800&display=swap');
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
|
|
|||
|
|
@ -4,10 +4,19 @@ import { Shield, Users, Zap, MapPin } from 'lucide-react';
|
|||
import ScrollReveal from '@/components/ScrollReveal';
|
||||
import CountUpNumber from '@/components/CountUpNumber';
|
||||
import { useEffect, useRef } from 'react';
|
||||
import { useSEO } from '@/hooks/useSEO';
|
||||
|
||||
const About = () => {
|
||||
const imageRef = useRef<HTMLImageElement>(null);
|
||||
|
||||
useSEO({
|
||||
title: 'About Bay Area Affiliates | IT Experts Corpus Christi Since 2010',
|
||||
description: 'Local IT expertise for the Coastal Bend since 2010. 150+ businesses served, 99.9% uptime. Security-first approach with clear communication. Meet the team.',
|
||||
keywords: 'about Bay Area Affiliates, IT company Corpus Christi, managed services provider Texas, local IT support Coastal Bend',
|
||||
canonical: 'https://bayarea-cc.com/about',
|
||||
ogImage: 'https://bayarea-cc.com/og-image.png',
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
if (imageRef.current) {
|
||||
|
|
@ -66,7 +75,7 @@ const About = () => {
|
|||
<div className="min-h-screen">
|
||||
<Navigation />
|
||||
|
||||
<main>
|
||||
<main role="main">
|
||||
{/* Hero section with image background */}
|
||||
<section className="relative h-screen flex items-center justify-center overflow-hidden">
|
||||
{/* Background image with parallax */}
|
||||
|
|
@ -78,7 +87,7 @@ const About = () => {
|
|||
className="w-full h-[110%] object-cover will-change-transform"
|
||||
style={{ transform: 'translateY(0px) scale(1.1)' }}
|
||||
loading="eager"
|
||||
fetchpriority="high"
|
||||
fetchPriority="high"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -81,7 +81,7 @@ const Blog = () => {
|
|||
<div className="min-h-screen">
|
||||
<Navigation />
|
||||
|
||||
<main>
|
||||
<main role="main">
|
||||
{/* Hero section with image background */}
|
||||
<section className="relative h-screen flex items-center justify-center overflow-hidden">
|
||||
{/* Background image with parallax */}
|
||||
|
|
@ -93,7 +93,7 @@ const Blog = () => {
|
|||
className="w-full h-[110%] object-cover will-change-transform"
|
||||
style={{ transform: 'translateY(0px) scale(1.1)' }}
|
||||
loading="eager"
|
||||
fetchpriority="high"
|
||||
fetchPriority="high"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
@ -211,9 +211,8 @@ const Blog = () => {
|
|||
{/* Scroll to Top Button */}
|
||||
<button
|
||||
onClick={scrollToTop}
|
||||
className={`fixed bottom-8 right-8 z-50 p-4 bg-neon text-neon-foreground rounded-full shadow-lg shadow-neon/50 transition-all duration-300 hover:scale-110 hover:shadow-neon ${
|
||||
showScrollTop ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-16 pointer-events-none'
|
||||
}`}
|
||||
className={`fixed bottom-8 right-8 z-50 p-4 bg-neon text-neon-foreground rounded-full shadow-lg shadow-neon/50 transition-all duration-300 hover:scale-110 hover:shadow-neon ${showScrollTop ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-16 pointer-events-none'
|
||||
}`}
|
||||
aria-label="Scroll to top"
|
||||
>
|
||||
<ArrowUp className="w-6 h-6" />
|
||||
|
|
|
|||
|
|
@ -112,7 +112,7 @@ const BlogPost = () => {
|
|||
<div className="min-h-screen bg-background-deep">
|
||||
<Navigation />
|
||||
|
||||
<main>
|
||||
<main role="main">
|
||||
{/* Hero section with featured image */}
|
||||
<section className="relative h-[60vh] min-h-[400px] flex items-center justify-center overflow-hidden">
|
||||
{/* Background image */}
|
||||
|
|
@ -122,7 +122,7 @@ const BlogPost = () => {
|
|||
alt={post.title}
|
||||
className="w-full h-full object-cover"
|
||||
loading="eager"
|
||||
fetchpriority="high"
|
||||
fetchPriority="high"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-background-deep via-background-deep/60 to-transparent"></div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,8 +5,17 @@ import { Mail, Phone, MapPin, Clock, DollarSign, Headphones } from 'lucide-react
|
|||
import ScrollReveal from '@/components/ScrollReveal';
|
||||
import { useToast } from '@/hooks/use-toast';
|
||||
import { useEffect, useRef } from 'react';
|
||||
import { useSEO } from '@/hooks/useSEO';
|
||||
|
||||
const Contact = () => {
|
||||
useSEO({
|
||||
title: 'Contact Bay Area Affiliates | Free IT Consultation Corpus Christi',
|
||||
description: 'Get in touch for a free IT consultation. 24-hour response, free assessment, no obligation. Serving Corpus Christi, Portland, Rockport & the Coastal Bend.',
|
||||
keywords: 'contact IT support Corpus Christi, free IT consultation, Bay Area Affiliates phone, IT services quote Texas',
|
||||
canonical: 'https://bayarea-cc.com/contact',
|
||||
ogImage: 'https://bayarea-cc.com/og-image.png',
|
||||
});
|
||||
|
||||
const { toast } = useToast();
|
||||
const imageRef = useRef<HTMLImageElement>(null);
|
||||
const [formData, setFormData] = useState({
|
||||
|
|
@ -81,7 +90,7 @@ const Contact = () => {
|
|||
<div className="min-h-screen">
|
||||
<Navigation />
|
||||
|
||||
<main>
|
||||
<main role="main">
|
||||
{/* Hero section with image background */}
|
||||
<section className="relative h-screen flex items-center justify-center overflow-hidden">
|
||||
{/* Background image with parallax */}
|
||||
|
|
@ -158,7 +167,7 @@ const Contact = () => {
|
|||
required
|
||||
value={formData.name}
|
||||
onChange={handleChange}
|
||||
className="w-full px-4 py-3 bg-input border border-input-border rounded-lg focus:outline-none focus:ring-2 focus:ring-neon focus:border-transparent text-foreground"
|
||||
className="w-full px-4 py-3 bg-white/5 backdrop-blur-sm border border-white/10 rounded-lg focus:outline-none focus:ring-2 focus:ring-neon focus:border-neon focus:bg-white/10 focus:shadow-[0_0_15px_rgba(51,102,255,0.3)] transition-all duration-300 text-foreground placeholder-foreground-muted/50"
|
||||
placeholder="Your full name"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -174,7 +183,7 @@ const Contact = () => {
|
|||
required
|
||||
value={formData.email}
|
||||
onChange={handleChange}
|
||||
className="w-full px-4 py-3 bg-input border border-input-border rounded-lg focus:outline-none focus:ring-2 focus:ring-neon focus:border-transparent text-foreground"
|
||||
className="w-full px-4 py-3 bg-white/5 backdrop-blur-sm border border-white/10 rounded-lg focus:outline-none focus:ring-2 focus:ring-neon focus:border-neon focus:bg-white/10 focus:shadow-[0_0_15px_rgba(51,102,255,0.3)] transition-all duration-300 text-foreground placeholder-foreground-muted/50"
|
||||
placeholder="your@email.com"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -191,7 +200,7 @@ const Contact = () => {
|
|||
name="company"
|
||||
value={formData.company}
|
||||
onChange={handleChange}
|
||||
className="w-full px-4 py-3 bg-input border border-input-border rounded-lg focus:outline-none focus:ring-2 focus:ring-neon focus:border-transparent text-foreground"
|
||||
className="w-full px-4 py-3 bg-white/5 backdrop-blur-sm border border-white/10 rounded-lg focus:outline-none focus:ring-2 focus:ring-neon focus:border-neon focus:bg-white/10 focus:shadow-[0_0_15px_rgba(51,102,255,0.3)] transition-all duration-300 text-foreground placeholder-foreground-muted/50"
|
||||
placeholder="Your company name"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -206,7 +215,7 @@ const Contact = () => {
|
|||
name="phone"
|
||||
value={formData.phone}
|
||||
onChange={handleChange}
|
||||
className="w-full px-4 py-3 bg-input border border-input-border rounded-lg focus:outline-none focus:ring-2 focus:ring-neon focus:border-transparent text-foreground"
|
||||
className="w-full px-4 py-3 bg-white/5 backdrop-blur-sm border border-white/10 rounded-lg focus:outline-none focus:ring-2 focus:ring-neon focus:border-neon focus:bg-white/10 focus:shadow-[0_0_15px_rgba(51,102,255,0.3)] transition-all duration-300 text-foreground placeholder-foreground-muted/50"
|
||||
placeholder="(361) 555-0123"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -223,7 +232,7 @@ const Contact = () => {
|
|||
rows={5}
|
||||
value={formData.message}
|
||||
onChange={handleChange}
|
||||
className="w-full px-4 py-3 bg-input border border-input-border rounded-lg focus:outline-none focus:ring-2 focus:ring-neon focus:border-transparent text-foreground resize-none"
|
||||
className="w-full px-4 py-3 bg-white/5 backdrop-blur-sm border border-white/10 rounded-lg focus:outline-none focus:ring-2 focus:ring-neon focus:border-neon focus:bg-white/10 focus:shadow-[0_0_15px_rgba(51,102,255,0.3)] transition-all duration-300 text-foreground placeholder-foreground-muted/50 resize-none"
|
||||
placeholder="Tell us about your IT needs or challenges..."
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -375,8 +384,8 @@ const Contact = () => {
|
|||
|
||||
{/* Service Area Map */}
|
||||
<section className="py-16 bg-background-deep">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<ScrollReveal>
|
||||
<div className="w-full max-w-[95%] mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<ScrollReveal width="100%">
|
||||
<div className="text-center mb-8">
|
||||
<h2 className="font-heading font-bold text-3xl text-foreground mb-4">
|
||||
Our Service Area
|
||||
|
|
|
|||
|
|
@ -9,27 +9,27 @@ import { Monitor, HardDrive, Cpu, CheckCircle, DollarSign, Truck, Shield, Award
|
|||
const DesktopHardware = () => {
|
||||
useEffect(() => {
|
||||
document.title = 'Desktop Hardware Corpus Christi | Bay Area Affiliates';
|
||||
|
||||
|
||||
const metaDescription = document.querySelector('meta[name="description"]');
|
||||
if (metaDescription) {
|
||||
metaDescription.setAttribute('content', 'Quality new/refurbished desktops, fast local installation.');
|
||||
}
|
||||
|
||||
|
||||
const ogTitle = document.querySelector('meta[property="og:title"]');
|
||||
if (ogTitle) {
|
||||
ogTitle.setAttribute('content', 'Refurbished Desktops Corpus Christi—Quality Business Hardware');
|
||||
}
|
||||
|
||||
|
||||
const ogDescription = document.querySelector('meta[property="og:description"]');
|
||||
if (ogDescription) {
|
||||
ogDescription.setAttribute('content', 'Quality new/refurbished desktops, fast local installation.');
|
||||
}
|
||||
|
||||
|
||||
const twitterTitle = document.querySelector('meta[name="twitter:title"]');
|
||||
if (twitterTitle) {
|
||||
twitterTitle.setAttribute('content', 'Affordable PC Business Hardware Corpus Christi');
|
||||
}
|
||||
|
||||
|
||||
const twitterDescription = document.querySelector('meta[name="twitter:description"]');
|
||||
if (twitterDescription) {
|
||||
twitterDescription.setAttribute('content', 'Quality new/refurbished desktops, fast local installation.');
|
||||
|
|
@ -39,7 +39,7 @@ const DesktopHardware = () => {
|
|||
return (
|
||||
<div className="min-h-screen">
|
||||
<Navigation />
|
||||
<main>
|
||||
<main role="main">
|
||||
{/* Hero Section */}
|
||||
<section className="bg-gradient-to-br from-gray-900 via-gray-800 to-gray-600 text-white py-20">
|
||||
<div className="container mx-auto px-4">
|
||||
|
|
@ -72,7 +72,7 @@ const DesktopHardware = () => {
|
|||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h2 className="text-3xl font-bold text-center mb-12">Professional Desktop Solutions</h2>
|
||||
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-8 mb-12">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
|
|
@ -93,7 +93,7 @@ const DesktopHardware = () => {
|
|||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4">
|
||||
|
|
@ -113,7 +113,7 @@ const DesktopHardware = () => {
|
|||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4">
|
||||
|
|
@ -133,7 +133,7 @@ const DesktopHardware = () => {
|
|||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4">
|
||||
|
|
@ -163,7 +163,7 @@ const DesktopHardware = () => {
|
|||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h2 className="text-3xl font-bold text-center mb-12">Desktop Categories for Every Business Need</h2>
|
||||
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-8 mb-12">
|
||||
<div className="bg-white p-6 rounded-lg shadow border-l-4 border-blue-500">
|
||||
<h3 className="font-bold text-lg mb-4">Essential Business</h3>
|
||||
|
|
@ -180,7 +180,7 @@ const DesktopHardware = () => {
|
|||
<div className="text-sm text-gray-500">Starting price</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="bg-white p-6 rounded-lg shadow border-l-4 border-orange-500">
|
||||
<h3 className="font-bold text-lg mb-4">Professional Plus</h3>
|
||||
<p className="text-gray-600 mb-4">Enhanced performance for demanding business applications and multitasking.</p>
|
||||
|
|
@ -196,7 +196,7 @@ const DesktopHardware = () => {
|
|||
<div className="text-sm text-gray-500">Starting price</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="bg-white p-6 rounded-lg shadow border-l-4 border-purple-500">
|
||||
<h3 className="font-bold text-lg mb-4">Workstation Class</h3>
|
||||
<p className="text-gray-600 mb-4">High-performance systems for CAD, design, development, and intensive applications.</p>
|
||||
|
|
@ -213,7 +213,7 @@ const DesktopHardware = () => {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="bg-white p-8 rounded-lg shadow-lg">
|
||||
<h3 className="text-2xl font-bold mb-6 text-center">Why Choose Refurbished Business Hardware?</h3>
|
||||
<div className="grid md:grid-cols-2 gap-8">
|
||||
|
|
@ -270,7 +270,7 @@ const DesktopHardware = () => {
|
|||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h2 className="text-3xl font-bold text-center mb-12">Complete Installation & Setup Service</h2>
|
||||
|
||||
|
||||
<div className="grid md:grid-cols-4 gap-8">
|
||||
<Card className="text-center">
|
||||
<CardHeader>
|
||||
|
|
@ -283,7 +283,7 @@ const DesktopHardware = () => {
|
|||
<p className="text-sm">Assess your needs and recommend the optimal hardware configuration for your business.</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
|
||||
<Card className="text-center">
|
||||
<CardHeader>
|
||||
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
|
|
@ -295,7 +295,7 @@ const DesktopHardware = () => {
|
|||
<p className="text-sm">Install and configure software, security settings, and business applications.</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
|
||||
<Card className="text-center">
|
||||
<CardHeader>
|
||||
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
|
|
@ -307,7 +307,7 @@ const DesktopHardware = () => {
|
|||
<p className="text-sm">On-site installation, network integration, and user account setup.</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
|
||||
<Card className="text-center">
|
||||
<CardHeader>
|
||||
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
|
|
@ -330,10 +330,10 @@ const DesktopHardware = () => {
|
|||
<div className="max-w-4xl mx-auto text-center">
|
||||
<h2 className="text-3xl font-bold mb-8">Trusted Hardware Supplier for Coastal Bend SMBs</h2>
|
||||
<p className="text-xl text-gray-600 mb-8">
|
||||
Bay Area Affiliates has supplied and serviced business computers throughout the Corpus Christi area since 1999.
|
||||
Bay Area Affiliates has supplied and serviced business computers throughout the Corpus Christi area since 1999.
|
||||
We understand local business needs and provide personalized hardware solutions.
|
||||
</p>
|
||||
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-8 mb-12">
|
||||
<div className="text-center">
|
||||
<div className="text-4xl font-bold text-blue-600 mb-2">5,000+</div>
|
||||
|
|
@ -348,11 +348,11 @@ const DesktopHardware = () => {
|
|||
<div className="text-gray-600">Years Experience</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="bg-white p-8 rounded-lg shadow-lg">
|
||||
<h3 className="text-2xl font-bold mb-4">Local Hardware Support Throughout the Coastal Bend</h3>
|
||||
<p className="text-gray-700 mb-6">
|
||||
From single desktop replacements to complete office refreshes, we provide comprehensive
|
||||
From single desktop replacements to complete office refreshes, we provide comprehensive
|
||||
hardware solutions with local pickup, delivery, and installation services.
|
||||
</p>
|
||||
<div className="flex flex-wrap justify-center gap-4">
|
||||
|
|
@ -374,10 +374,10 @@ const DesktopHardware = () => {
|
|||
<div className="max-w-4xl mx-auto text-center">
|
||||
<h2 className="text-3xl font-bold mb-6">Upgrade Your Business Hardware Today</h2>
|
||||
<p className="text-xl mb-8 text-gray-100">
|
||||
Get quality business desktops with professional installation and local support.
|
||||
Get quality business desktops with professional installation and local support.
|
||||
Free consultation and custom quotes for Corpus Christi area businesses.
|
||||
</p>
|
||||
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center mb-8">
|
||||
<Button size="lg" className="bg-orange-600 hover:bg-orange-700">
|
||||
<Award className="w-5 h-5 mr-2" />
|
||||
|
|
@ -387,7 +387,7 @@ const DesktopHardware = () => {
|
|||
Call (361) 765-8400
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
|
||||
<p className="text-gray-200">
|
||||
Free consultation • Local delivery • Professional installation • 12-month warranty
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -6,18 +6,48 @@ import ProcessTimeline from '@/components/home/ProcessTimeline';
|
|||
import ServicesOverview from '@/components/home/ServicesOverview';
|
||||
import ProofSection from '@/components/home/ProofSection';
|
||||
import CTASection from '@/components/home/CTASection';
|
||||
import TrustedBy from '@/components/home/TrustedBy';
|
||||
import ScrollReveal from '@/components/ScrollReveal';
|
||||
import { useSEO } from '@/hooks/useSEO';
|
||||
|
||||
const Index = () => {
|
||||
useSEO({
|
||||
title: 'IT Support Corpus Christi ⚡ 24/7 Managed Services | Bay Area Affiliates',
|
||||
description: 'Stop IT headaches! 25+ years experience, 2-hour response time, 24/7 monitoring. Managed IT services in Corpus Christi & Coastal Bend. Free assessment. Call (361) 765-8400',
|
||||
keywords: 'managed IT services corpus christi, IT support coastal bend, 24/7 IT monitoring, business computer solutions, Windows 11 migration, VPN setup, network security corpus christi',
|
||||
canonical: 'https://bayarea-cc.com/',
|
||||
ogImage: 'https://bayarea-cc.com/og-image.png',
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="min-h-screen">
|
||||
<Navigation />
|
||||
<main id="main-content" role="main">
|
||||
<HeroSection />
|
||||
<ValuePillars />
|
||||
<ProcessTimeline />
|
||||
<ServicesOverview />
|
||||
<ProofSection />
|
||||
<CTASection />
|
||||
|
||||
<ScrollReveal delay={0.2} width="100%">
|
||||
<TrustedBy />
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal width="100%">
|
||||
<ValuePillars />
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal width="100%">
|
||||
<ProcessTimeline />
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal width="100%">
|
||||
<ServicesOverview />
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal width="100%">
|
||||
<ProofSection />
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal width="100%">
|
||||
<CTASection />
|
||||
</ScrollReveal>
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -9,27 +9,27 @@ import { HardDrive, Cloud, Shield, CheckCircle, Database, Server, Lock, Archive
|
|||
const NetworkAttachedStorage = () => {
|
||||
useEffect(() => {
|
||||
document.title = 'NAS Setup Corpus Christi | Bay Area Affiliates';
|
||||
|
||||
|
||||
const metaDescription = document.querySelector('meta[name="description"]');
|
||||
if (metaDescription) {
|
||||
metaDescription.setAttribute('content', 'Secure, scalable backups for business data. Book install.');
|
||||
}
|
||||
|
||||
|
||||
const ogTitle = document.querySelector('meta[property="og:title"]');
|
||||
if (ogTitle) {
|
||||
ogTitle.setAttribute('content', 'Network Attached Storage Setup Corpus Christi—Business Data Solutions');
|
||||
}
|
||||
|
||||
|
||||
const ogDescription = document.querySelector('meta[property="og:description"]');
|
||||
if (ogDescription) {
|
||||
ogDescription.setAttribute('content', 'Secure, scalable backups for business data. Book install.');
|
||||
}
|
||||
|
||||
|
||||
const twitterTitle = document.querySelector('meta[name="twitter:title"]');
|
||||
if (twitterTitle) {
|
||||
twitterTitle.setAttribute('content', 'NAS Backup Storage SMB Corpus Christi');
|
||||
}
|
||||
|
||||
|
||||
const twitterDescription = document.querySelector('meta[name="twitter:description"]');
|
||||
if (twitterDescription) {
|
||||
twitterDescription.setAttribute('content', 'Secure, scalable backups for business data. Book install.');
|
||||
|
|
@ -39,7 +39,7 @@ const NetworkAttachedStorage = () => {
|
|||
return (
|
||||
<div className="min-h-screen">
|
||||
<Navigation />
|
||||
<main>
|
||||
<main role="main">
|
||||
{/* Hero Section */}
|
||||
<section className="bg-gradient-to-br from-blue-900 via-blue-800 to-blue-600 text-white py-20">
|
||||
<div className="container mx-auto px-4">
|
||||
|
|
@ -72,7 +72,7 @@ const NetworkAttachedStorage = () => {
|
|||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h2 className="text-3xl font-bold text-center mb-12">Protect Your Business Data with Professional NAS</h2>
|
||||
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-8 mb-12">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
|
|
@ -93,7 +93,7 @@ const NetworkAttachedStorage = () => {
|
|||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4">
|
||||
|
|
@ -113,7 +113,7 @@ const NetworkAttachedStorage = () => {
|
|||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4">
|
||||
|
|
@ -133,7 +133,7 @@ const NetworkAttachedStorage = () => {
|
|||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4">
|
||||
|
|
@ -163,7 +163,7 @@ const NetworkAttachedStorage = () => {
|
|||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h2 className="text-3xl font-bold text-center mb-12">NAS Solutions for Every Business Size</h2>
|
||||
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-8 mb-12">
|
||||
<div className="bg-white p-6 rounded-lg shadow border-l-4 border-blue-500">
|
||||
<h3 className="font-bold text-lg mb-4">Essential NAS</h3>
|
||||
|
|
@ -181,7 +181,7 @@ const NetworkAttachedStorage = () => {
|
|||
<div className="text-sm text-gray-500">Complete setup</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="bg-white p-6 rounded-lg shadow border-l-4 border-orange-500">
|
||||
<h3 className="font-bold text-lg mb-4">Professional NAS</h3>
|
||||
<p className="text-gray-600 mb-4">Advanced features for growing businesses with critical data protection needs.</p>
|
||||
|
|
@ -198,7 +198,7 @@ const NetworkAttachedStorage = () => {
|
|||
<div className="text-sm text-gray-500">Complete setup</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="bg-white p-6 rounded-lg shadow border-l-4 border-purple-500">
|
||||
<h3 className="font-bold text-lg mb-4">Enterprise NAS</h3>
|
||||
<p className="text-gray-600 mb-4">High-performance storage for businesses with demanding data requirements.</p>
|
||||
|
|
@ -216,7 +216,7 @@ const NetworkAttachedStorage = () => {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="bg-white p-8 rounded-lg shadow-lg">
|
||||
<h3 className="text-2xl font-bold mb-6 text-center">Why Businesses Choose NAS Over Cloud Storage</h3>
|
||||
<div className="grid md:grid-cols-2 gap-8">
|
||||
|
|
@ -263,7 +263,7 @@ const NetworkAttachedStorage = () => {
|
|||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="mt-6 bg-blue-50 p-6 rounded-lg">
|
||||
<h4 className="font-semibold text-blue-700 mb-3">ROI Calculation Example</h4>
|
||||
<div className="grid md:grid-cols-2 gap-6 text-sm">
|
||||
|
|
@ -288,7 +288,7 @@ const NetworkAttachedStorage = () => {
|
|||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h2 className="text-3xl font-bold text-center mb-12">Professional NAS Installation Process</h2>
|
||||
|
||||
|
||||
<div className="grid md:grid-cols-4 gap-8">
|
||||
<Card className="text-center">
|
||||
<CardHeader>
|
||||
|
|
@ -301,7 +301,7 @@ const NetworkAttachedStorage = () => {
|
|||
<p className="text-sm">Analyze your data storage needs, backup requirements, and growth projections.</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
|
||||
<Card className="text-center">
|
||||
<CardHeader>
|
||||
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
|
|
@ -313,7 +313,7 @@ const NetworkAttachedStorage = () => {
|
|||
<p className="text-sm">Set up NAS hardware, configure RAID, and install necessary software applications.</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
|
||||
<Card className="text-center">
|
||||
<CardHeader>
|
||||
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
|
|
@ -325,7 +325,7 @@ const NetworkAttachedStorage = () => {
|
|||
<p className="text-sm">Transfer existing data safely and set up automated backup schedules for all devices.</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
|
||||
<Card className="text-center">
|
||||
<CardHeader>
|
||||
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
|
|
@ -349,11 +349,11 @@ const NetworkAttachedStorage = () => {
|
|||
<h2 className="text-3xl font-bold text-center mb-8">Emergency Data Recovery Services</h2>
|
||||
<div className="text-center mb-8">
|
||||
<p className="text-xl text-gray-600">
|
||||
Already experienced data loss? We provide emergency recovery services while setting up
|
||||
Already experienced data loss? We provide emergency recovery services while setting up
|
||||
your new NAS to prevent future disasters.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-8">
|
||||
<div className="bg-white p-6 rounded-lg shadow">
|
||||
<h3 className="text-xl font-bold mb-4 text-red-600">What We Recover</h3>
|
||||
|
|
@ -366,7 +366,7 @@ const NetworkAttachedStorage = () => {
|
|||
<li>• Photos and multimedia files</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="bg-white p-6 rounded-lg shadow">
|
||||
<h3 className="text-xl font-bold mb-4 text-red-600">Recovery Process</h3>
|
||||
<ul className="space-y-2 text-gray-700">
|
||||
|
|
@ -379,7 +379,7 @@ const NetworkAttachedStorage = () => {
|
|||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="mt-8 text-center">
|
||||
<Button size="lg" className="bg-red-600 hover:bg-red-700 text-white">
|
||||
<Lock className="w-5 h-5 mr-2" />
|
||||
|
|
@ -396,10 +396,10 @@ const NetworkAttachedStorage = () => {
|
|||
<div className="max-w-4xl mx-auto text-center">
|
||||
<h2 className="text-3xl font-bold mb-8">Data Storage Specialists Serving the Coastal Bend</h2>
|
||||
<p className="text-xl text-gray-600 mb-8">
|
||||
Bay Area Affiliates has protected business data for Corpus Christi companies since 1999.
|
||||
Bay Area Affiliates has protected business data for Corpus Christi companies since 1999.
|
||||
We understand the critical importance of data security and business continuity.
|
||||
</p>
|
||||
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-8 mb-12">
|
||||
<div className="text-center">
|
||||
<div className="text-4xl font-bold text-blue-600 mb-2">250+</div>
|
||||
|
|
@ -414,11 +414,11 @@ const NetworkAttachedStorage = () => {
|
|||
<div className="text-gray-600">Data Loss with Our NAS</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="bg-blue-50 p-8 rounded-lg shadow-lg">
|
||||
<h3 className="text-2xl font-bold mb-4">Protecting Business Data Throughout the Coastal Bend</h3>
|
||||
<p className="text-gray-700 mb-6">
|
||||
From small professional practices to growing enterprises, we provide comprehensive
|
||||
From small professional practices to growing enterprises, we provide comprehensive
|
||||
data storage and backup solutions with local support and maintenance.
|
||||
</p>
|
||||
<div className="flex flex-wrap justify-center gap-4">
|
||||
|
|
@ -440,10 +440,10 @@ const NetworkAttachedStorage = () => {
|
|||
<div className="max-w-4xl mx-auto text-center">
|
||||
<h2 className="text-3xl font-bold mb-6">Don't Risk Your Business Data</h2>
|
||||
<p className="text-xl mb-8 text-blue-100">
|
||||
Get professional NAS installation and data protection from Corpus Christi's trusted IT experts.
|
||||
Get professional NAS installation and data protection from Corpus Christi's trusted IT experts.
|
||||
Protect your business before disaster strikes.
|
||||
</p>
|
||||
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center mb-8">
|
||||
<Button size="lg" className="bg-orange-600 hover:bg-orange-700">
|
||||
<Database className="w-5 h-5 mr-2" />
|
||||
|
|
@ -453,7 +453,7 @@ const NetworkAttachedStorage = () => {
|
|||
Call (361) 765-8400
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
|
||||
<p className="text-blue-200">
|
||||
Free consultation • Professional installation • 24/7 monitoring • Local support
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -9,27 +9,27 @@ import { Network, Router, Shield, CheckCircle, Users, Monitor, Lock, Search } fr
|
|||
const NetworkInfrastructure = () => {
|
||||
useEffect(() => {
|
||||
document.title = 'Network Support Corpus Christi | Bay Area Affiliates';
|
||||
|
||||
|
||||
const metaDescription = document.querySelector('meta[name="description"]');
|
||||
if (metaDescription) {
|
||||
metaDescription.setAttribute('content', 'Reliable SMB network solutions—secure, scalable, supported.');
|
||||
}
|
||||
|
||||
|
||||
const ogTitle = document.querySelector('meta[property="og:title"]');
|
||||
if (ogTitle) {
|
||||
ogTitle.setAttribute('content', 'Network Infrastructure Support Corpus Christi—SMB IT Solutions');
|
||||
}
|
||||
|
||||
|
||||
const ogDescription = document.querySelector('meta[property="og:description"]');
|
||||
if (ogDescription) {
|
||||
ogDescription.setAttribute('content', 'Reliable SMB network solutions—secure, scalable, supported.');
|
||||
}
|
||||
|
||||
|
||||
const twitterTitle = document.querySelector('meta[name="twitter:title"]');
|
||||
if (twitterTitle) {
|
||||
twitterTitle.setAttribute('content', 'Router Setup IT Audit Corpus Christi');
|
||||
}
|
||||
|
||||
|
||||
const twitterDescription = document.querySelector('meta[name="twitter:description"]');
|
||||
if (twitterDescription) {
|
||||
twitterDescription.setAttribute('content', 'Reliable SMB network solutions—secure, scalable, supported.');
|
||||
|
|
@ -39,7 +39,7 @@ const NetworkInfrastructure = () => {
|
|||
return (
|
||||
<div className="min-h-screen">
|
||||
<Navigation />
|
||||
<main>
|
||||
<main role="main">
|
||||
{/* Hero Section */}
|
||||
<section className="bg-gradient-to-br from-teal-900 via-teal-800 to-teal-600 text-white py-20">
|
||||
<div className="container mx-auto px-4">
|
||||
|
|
@ -72,7 +72,7 @@ const NetworkInfrastructure = () => {
|
|||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h2 className="text-3xl font-bold text-center mb-12">Comprehensive Network Solutions</h2>
|
||||
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-8 mb-12">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
|
|
@ -93,7 +93,7 @@ const NetworkInfrastructure = () => {
|
|||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="w-16 h-16 bg-teal-100 rounded-full flex items-center justify-center mb-4">
|
||||
|
|
@ -113,7 +113,7 @@ const NetworkInfrastructure = () => {
|
|||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="w-16 h-16 bg-teal-100 rounded-full flex items-center justify-center mb-4">
|
||||
|
|
@ -133,7 +133,7 @@ const NetworkInfrastructure = () => {
|
|||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="w-16 h-16 bg-teal-100 rounded-full flex items-center justify-center mb-4">
|
||||
|
|
@ -163,7 +163,7 @@ const NetworkInfrastructure = () => {
|
|||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h2 className="text-3xl font-bold text-center mb-12">Scalable Network Solutions for Growing SMBs</h2>
|
||||
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-8 mb-12">
|
||||
<div className="bg-white p-6 rounded-lg shadow border-l-4 border-teal-500">
|
||||
<h3 className="font-bold text-lg mb-4">Starter Network</h3>
|
||||
|
|
@ -181,7 +181,7 @@ const NetworkInfrastructure = () => {
|
|||
<div className="text-sm text-gray-500">Complete setup</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="bg-white p-6 rounded-lg shadow border-l-4 border-orange-500">
|
||||
<h3 className="font-bold text-lg mb-4">Professional Network</h3>
|
||||
<p className="text-gray-600 mb-4">Advanced infrastructure for growing businesses with 15-50 employees.</p>
|
||||
|
|
@ -198,7 +198,7 @@ const NetworkInfrastructure = () => {
|
|||
<div className="text-sm text-gray-500">Complete setup</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="bg-white p-6 rounded-lg shadow border-l-4 border-purple-500">
|
||||
<h3 className="font-bold text-lg mb-4">Enterprise Network</h3>
|
||||
<p className="text-gray-600 mb-4">Comprehensive infrastructure for larger organizations with 50+ employees.</p>
|
||||
|
|
@ -216,7 +216,7 @@ const NetworkInfrastructure = () => {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="bg-white p-8 rounded-lg shadow-lg">
|
||||
<h3 className="text-2xl font-bold mb-6 text-center">Network Performance Benefits</h3>
|
||||
<div className="grid md:grid-cols-2 gap-8">
|
||||
|
|
@ -273,7 +273,7 @@ const NetworkInfrastructure = () => {
|
|||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h2 className="text-3xl font-bold text-center mb-12">Professional Network Implementation</h2>
|
||||
|
||||
|
||||
<div className="grid md:grid-cols-4 gap-8">
|
||||
<Card className="text-center">
|
||||
<CardHeader>
|
||||
|
|
@ -286,7 +286,7 @@ const NetworkInfrastructure = () => {
|
|||
<p className="text-sm">Comprehensive evaluation of current infrastructure, requirements, and growth plans.</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
|
||||
<Card className="text-center">
|
||||
<CardHeader>
|
||||
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
|
|
@ -298,7 +298,7 @@ const NetworkInfrastructure = () => {
|
|||
<p className="text-sm">Custom network design with equipment selection and detailed implementation plan.</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
|
||||
<Card className="text-center">
|
||||
<CardHeader>
|
||||
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
|
|
@ -310,7 +310,7 @@ const NetworkInfrastructure = () => {
|
|||
<p className="text-sm">Professional installation, configuration, and testing with minimal business disruption.</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
|
||||
<Card className="text-center">
|
||||
<CardHeader>
|
||||
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
|
|
@ -332,7 +332,7 @@ const NetworkInfrastructure = () => {
|
|||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h2 className="text-3xl font-bold text-center mb-12">Network Problems We Solve</h2>
|
||||
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-8">
|
||||
<div className="bg-white p-6 rounded-lg shadow">
|
||||
<h3 className="text-xl font-bold mb-4 text-red-600">Performance Issues</h3>
|
||||
|
|
@ -345,7 +345,7 @@ const NetworkInfrastructure = () => {
|
|||
<li>• Printers frequently going offline</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="bg-white p-6 rounded-lg shadow">
|
||||
<h3 className="text-xl font-bold mb-4 text-red-600">Security Concerns</h3>
|
||||
<ul className="space-y-3 text-gray-700">
|
||||
|
|
@ -358,11 +358,11 @@ const NetworkInfrastructure = () => {
|
|||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="mt-8 bg-white p-6 rounded-lg shadow text-center">
|
||||
<h3 className="text-xl font-bold mb-4 text-teal-600">Emergency Network Support</h3>
|
||||
<p className="text-gray-700 mb-4">
|
||||
When your network goes down, every minute counts. Our emergency support team provides
|
||||
When your network goes down, every minute counts. Our emergency support team provides
|
||||
same-day response for critical network issues affecting your business operations.
|
||||
</p>
|
||||
<Button className="bg-red-600 hover:bg-red-700 text-white">
|
||||
|
|
@ -380,10 +380,10 @@ const NetworkInfrastructure = () => {
|
|||
<div className="max-w-4xl mx-auto text-center">
|
||||
<h2 className="text-3xl font-bold mb-8">Trusted Network Experts in the Coastal Bend</h2>
|
||||
<p className="text-xl text-gray-600 mb-8">
|
||||
Bay Area Affiliates has designed and maintained business networks throughout the Corpus Christi area since 1999.
|
||||
Bay Area Affiliates has designed and maintained business networks throughout the Corpus Christi area since 1999.
|
||||
We understand the unique connectivity challenges of coastal businesses.
|
||||
</p>
|
||||
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-8 mb-12">
|
||||
<div className="text-center">
|
||||
<div className="text-4xl font-bold text-teal-600 mb-2">300+</div>
|
||||
|
|
@ -398,11 +398,11 @@ const NetworkInfrastructure = () => {
|
|||
<div className="text-gray-600">Average Response Time</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="bg-teal-50 p-8 rounded-lg shadow-lg">
|
||||
<h3 className="text-2xl font-bold mb-4">Network Support Across the Coastal Bend</h3>
|
||||
<p className="text-gray-700 mb-6">
|
||||
From small office networks to multi-location enterprises, we provide comprehensive
|
||||
From small office networks to multi-location enterprises, we provide comprehensive
|
||||
network infrastructure solutions with 24/7 monitoring and local technical support.
|
||||
</p>
|
||||
<div className="flex flex-wrap justify-center gap-4">
|
||||
|
|
@ -424,10 +424,10 @@ const NetworkInfrastructure = () => {
|
|||
<div className="max-w-4xl mx-auto text-center">
|
||||
<h2 className="text-3xl font-bold mb-6">Secure Your Business Network Infrastructure</h2>
|
||||
<p className="text-xl mb-8 text-teal-100">
|
||||
Get a comprehensive network assessment and custom infrastructure solution from Corpus Christi's
|
||||
Get a comprehensive network assessment and custom infrastructure solution from Corpus Christi's
|
||||
trusted IT experts. Free consultation for SMBs.
|
||||
</p>
|
||||
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center mb-8">
|
||||
<Button size="lg" className="bg-orange-600 hover:bg-orange-700">
|
||||
<Router className="w-5 h-5 mr-2" />
|
||||
|
|
@ -437,7 +437,7 @@ const NetworkInfrastructure = () => {
|
|||
Call (361) 765-8400
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
|
||||
<p className="text-teal-200">
|
||||
Free network assessment • Same-day emergency support • Local experts • 24/7 monitoring
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -9,27 +9,27 @@ import { Zap, HardDrive, TrendingUp, CheckCircle, DollarSign, Clock, Gauge, BarC
|
|||
const PerformanceUpgrades = () => {
|
||||
useEffect(() => {
|
||||
document.title = 'SSD Upgrade Corpus Christi | Bay Area Affiliates';
|
||||
|
||||
|
||||
const metaDescription = document.querySelector('meta[name="description"]');
|
||||
if (metaDescription) {
|
||||
metaDescription.setAttribute('content', 'Boost device speed and reliability. Contact for upgrade today.');
|
||||
}
|
||||
|
||||
|
||||
const ogTitle = document.querySelector('meta[property="og:title"]');
|
||||
if (ogTitle) {
|
||||
ogTitle.setAttribute('content', 'SSD Upgrade Corpus Christi—Boost SMB Performance');
|
||||
}
|
||||
|
||||
|
||||
const ogDescription = document.querySelector('meta[property="og:description"]');
|
||||
if (ogDescription) {
|
||||
ogDescription.setAttribute('content', 'Boost device speed and reliability. Contact for upgrade today.');
|
||||
}
|
||||
|
||||
|
||||
const twitterTitle = document.querySelector('meta[name="twitter:title"]');
|
||||
if (twitterTitle) {
|
||||
twitterTitle.setAttribute('content', 'Desktop Speed & Laptop Optimization Corpus Christi');
|
||||
}
|
||||
|
||||
|
||||
const twitterDescription = document.querySelector('meta[name="twitter:description"]');
|
||||
if (twitterDescription) {
|
||||
twitterDescription.setAttribute('content', 'Boost device speed and reliability. Contact for upgrade today.');
|
||||
|
|
@ -39,7 +39,7 @@ const PerformanceUpgrades = () => {
|
|||
return (
|
||||
<div className="min-h-screen">
|
||||
<Navigation />
|
||||
<main>
|
||||
<main role="main">
|
||||
{/* Hero Section */}
|
||||
<section className="bg-gradient-to-br from-purple-900 via-purple-800 to-purple-600 text-white py-20">
|
||||
<div className="container mx-auto px-4">
|
||||
|
|
@ -72,7 +72,7 @@ const PerformanceUpgrades = () => {
|
|||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h2 className="text-3xl font-bold text-center mb-12">Transform Your Business Performance</h2>
|
||||
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-8 mb-12">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
|
|
@ -95,7 +95,7 @@ const PerformanceUpgrades = () => {
|
|||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-4">
|
||||
|
|
@ -113,7 +113,7 @@ const PerformanceUpgrades = () => {
|
|||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-4">
|
||||
|
|
@ -132,7 +132,7 @@ const PerformanceUpgrades = () => {
|
|||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-4">
|
||||
|
|
@ -160,7 +160,7 @@ const PerformanceUpgrades = () => {
|
|||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h2 className="text-3xl font-bold text-center mb-12">Professional Upgrade Process</h2>
|
||||
|
||||
|
||||
<div className="grid md:grid-cols-4 gap-8 mb-12">
|
||||
<Card className="text-center">
|
||||
<CardHeader>
|
||||
|
|
@ -173,7 +173,7 @@ const PerformanceUpgrades = () => {
|
|||
<p className="text-sm">Comprehensive performance testing to identify bottlenecks and optimal upgrade path.</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
|
||||
<Card className="text-center">
|
||||
<CardHeader>
|
||||
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
|
|
@ -185,7 +185,7 @@ const PerformanceUpgrades = () => {
|
|||
<p className="text-sm">Right-sized SSD recommendation based on your usage patterns and budget.</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
|
||||
<Card className="text-center">
|
||||
<CardHeader>
|
||||
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
|
|
@ -197,7 +197,7 @@ const PerformanceUpgrades = () => {
|
|||
<p className="text-sm">Seamless transfer of all files, programs, and settings to the new SSD.</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
|
||||
<Card className="text-center">
|
||||
<CardHeader>
|
||||
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
|
|
@ -210,7 +210,7 @@ const PerformanceUpgrades = () => {
|
|||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="bg-white p-8 rounded-lg shadow-lg">
|
||||
<h3 className="text-2xl font-bold mb-6 text-center">Performance Upgrade Options</h3>
|
||||
<div className="grid md:grid-cols-3 gap-6">
|
||||
|
|
@ -227,7 +227,7 @@ const PerformanceUpgrades = () => {
|
|||
<div className="text-sm text-gray-600">per device</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="border-2 border-purple-500 p-6 rounded-lg bg-purple-50">
|
||||
<h4 className="font-bold text-lg mb-4 text-purple-600">Professional</h4>
|
||||
<ul className="space-y-2 text-sm mb-4">
|
||||
|
|
@ -242,7 +242,7 @@ const PerformanceUpgrades = () => {
|
|||
<div className="text-sm text-gray-600">per device</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="border-2 border-gray-200 p-6 rounded-lg">
|
||||
<h4 className="font-bold text-lg mb-4 text-purple-600">Enterprise</h4>
|
||||
<ul className="space-y-2 text-sm mb-4">
|
||||
|
|
@ -270,10 +270,10 @@ const PerformanceUpgrades = () => {
|
|||
<div className="max-w-4xl mx-auto text-center">
|
||||
<h2 className="text-3xl font-bold mb-8">Trusted Performance Experts in the Coastal Bend</h2>
|
||||
<p className="text-xl text-gray-600 mb-8">
|
||||
Bay Area Affiliates has optimized thousands of computers for Corpus Christi businesses since 1999.
|
||||
Bay Area Affiliates has optimized thousands of computers for Corpus Christi businesses since 1999.
|
||||
We know which upgrades deliver the best ROI for your specific needs.
|
||||
</p>
|
||||
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-8 mb-12">
|
||||
<div className="text-center">
|
||||
<div className="text-4xl font-bold text-purple-600 mb-2">2,500+</div>
|
||||
|
|
@ -288,11 +288,11 @@ const PerformanceUpgrades = () => {
|
|||
<div className="text-gray-600">Average Turnaround</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="bg-purple-50 p-8 rounded-lg shadow-lg">
|
||||
<h3 className="text-2xl font-bold mb-4">Serving All Coastal Bend SMBs</h3>
|
||||
<p className="text-gray-700 mb-6">
|
||||
From single-device upgrades to fleet optimization, we provide on-site and in-shop services
|
||||
From single-device upgrades to fleet optimization, we provide on-site and in-shop services
|
||||
throughout the Corpus Christi area.
|
||||
</p>
|
||||
<div className="flex flex-wrap justify-center gap-4">
|
||||
|
|
@ -314,10 +314,10 @@ const PerformanceUpgrades = () => {
|
|||
<div className="max-w-4xl mx-auto text-center">
|
||||
<h2 className="text-3xl font-bold mb-6">Stop Waiting for Slow Computers</h2>
|
||||
<p className="text-xl mb-8 text-purple-100">
|
||||
Transform your business productivity with professional SSD upgrades. Same-day service available
|
||||
Transform your business productivity with professional SSD upgrades. Same-day service available
|
||||
for Corpus Christi area businesses.
|
||||
</p>
|
||||
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center mb-8">
|
||||
<Button size="lg" className="bg-orange-600 hover:bg-orange-700">
|
||||
<Clock className="w-5 h-5 mr-2" />
|
||||
|
|
@ -327,7 +327,7 @@ const PerformanceUpgrades = () => {
|
|||
Call (361) 765-8400
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
|
||||
<p className="text-purple-200">
|
||||
Free speed analysis • Same-day service • Local pickup & delivery
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -9,27 +9,27 @@ import { Printer, Scan, Network, CheckCircle, Wrench, Clock, Settings, Users } f
|
|||
const PrinterScannerInstallation = () => {
|
||||
useEffect(() => {
|
||||
document.title = 'Printer Install Corpus Christi | Bay Area Affiliates';
|
||||
|
||||
|
||||
const metaDescription = document.querySelector('meta[name="description"]');
|
||||
if (metaDescription) {
|
||||
metaDescription.setAttribute('content', 'Hassle-free device setup—local experts, same-day support.');
|
||||
}
|
||||
|
||||
|
||||
const ogTitle = document.querySelector('meta[property="og:title"]');
|
||||
if (ogTitle) {
|
||||
ogTitle.setAttribute('content', 'Printer Installation Corpus Christi—Same-Day Setup');
|
||||
}
|
||||
|
||||
|
||||
const ogDescription = document.querySelector('meta[property="og:description"]');
|
||||
if (ogDescription) {
|
||||
ogDescription.setAttribute('content', 'Hassle-free device setup—local experts, same-day support.');
|
||||
}
|
||||
|
||||
|
||||
const twitterTitle = document.querySelector('meta[name="twitter:title"]');
|
||||
if (twitterTitle) {
|
||||
twitterTitle.setAttribute('content', 'Scanner Setup & Office Device Support Corpus Christi');
|
||||
}
|
||||
|
||||
|
||||
const twitterDescription = document.querySelector('meta[name="twitter:description"]');
|
||||
if (twitterDescription) {
|
||||
twitterDescription.setAttribute('content', 'Hassle-free device setup—local experts, same-day support.');
|
||||
|
|
@ -39,7 +39,7 @@ const PrinterScannerInstallation = () => {
|
|||
return (
|
||||
<div className="min-h-screen">
|
||||
<Navigation />
|
||||
<main>
|
||||
<main role="main">
|
||||
{/* Hero Section */}
|
||||
<section className="bg-gradient-to-br from-indigo-900 via-indigo-800 to-indigo-600 text-white py-20">
|
||||
<div className="container mx-auto px-4">
|
||||
|
|
@ -72,7 +72,7 @@ const PrinterScannerInstallation = () => {
|
|||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h2 className="text-3xl font-bold text-center mb-12">End Office Device Frustrations</h2>
|
||||
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-8 mb-12">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
|
|
@ -92,7 +92,7 @@ const PrinterScannerInstallation = () => {
|
|||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mb-4">
|
||||
|
|
@ -111,7 +111,7 @@ const PrinterScannerInstallation = () => {
|
|||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mb-4">
|
||||
|
|
@ -130,7 +130,7 @@ const PrinterScannerInstallation = () => {
|
|||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mb-4">
|
||||
|
|
@ -159,7 +159,7 @@ const PrinterScannerInstallation = () => {
|
|||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h2 className="text-3xl font-bold text-center mb-12">Professional Installation Process</h2>
|
||||
|
||||
|
||||
<div className="grid md:grid-cols-4 gap-8 mb-12">
|
||||
<Card className="text-center">
|
||||
<CardHeader>
|
||||
|
|
@ -172,7 +172,7 @@ const PrinterScannerInstallation = () => {
|
|||
<p className="text-sm">Evaluate your office layout, network setup, and device requirements.</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
|
||||
<Card className="text-center">
|
||||
<CardHeader>
|
||||
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
|
|
@ -184,7 +184,7 @@ const PrinterScannerInstallation = () => {
|
|||
<p className="text-sm">Install drivers, configure network settings, and optimize device performance.</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
|
||||
<Card className="text-center">
|
||||
<CardHeader>
|
||||
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
|
|
@ -196,7 +196,7 @@ const PrinterScannerInstallation = () => {
|
|||
<p className="text-sm">Configure access for all users and train staff on device operation.</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
|
||||
<Card className="text-center">
|
||||
<CardHeader>
|
||||
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
|
|
@ -209,7 +209,7 @@ const PrinterScannerInstallation = () => {
|
|||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="bg-white p-8 rounded-lg shadow-lg">
|
||||
<h3 className="text-2xl font-bold mb-6 text-center">Common Device Issues We Solve</h3>
|
||||
<div className="grid md:grid-cols-2 gap-8">
|
||||
|
|
@ -274,7 +274,7 @@ const PrinterScannerInstallation = () => {
|
|||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h2 className="text-3xl font-bold text-center mb-12">We Support All Major Brands</h2>
|
||||
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-8 mb-12">
|
||||
<div className="bg-gray-50 p-6 rounded-lg text-center">
|
||||
<h3 className="font-bold text-lg mb-4">Printer Brands</h3>
|
||||
|
|
@ -285,7 +285,7 @@ const PrinterScannerInstallation = () => {
|
|||
<div>Kyocera • Sharp • Konica</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="bg-gray-50 p-6 rounded-lg text-center">
|
||||
<h3 className="font-bold text-lg mb-4">Scanner Types</h3>
|
||||
<div className="space-y-2 text-gray-700">
|
||||
|
|
@ -296,7 +296,7 @@ const PrinterScannerInstallation = () => {
|
|||
<div>Photo Scanners</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="bg-gray-50 p-6 rounded-lg text-center">
|
||||
<h3 className="font-bold text-lg mb-4">Connection Types</h3>
|
||||
<div className="space-y-2 text-gray-700">
|
||||
|
|
@ -318,10 +318,10 @@ const PrinterScannerInstallation = () => {
|
|||
<div className="max-w-4xl mx-auto text-center">
|
||||
<h2 className="text-3xl font-bold mb-8">Corpus Christi's Office Device Specialists</h2>
|
||||
<p className="text-xl text-gray-600 mb-8">
|
||||
Bay Area Affiliates has been solving office equipment challenges for Coastal Bend businesses since 1999.
|
||||
Bay Area Affiliates has been solving office equipment challenges for Coastal Bend businesses since 1999.
|
||||
We know the unique needs of local SMBs and provide same-day service.
|
||||
</p>
|
||||
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-8 mb-12">
|
||||
<div className="text-center">
|
||||
<div className="text-4xl font-bold text-indigo-600 mb-2">1,200+</div>
|
||||
|
|
@ -336,11 +336,11 @@ const PrinterScannerInstallation = () => {
|
|||
<div className="text-gray-600">Technical Support</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="bg-white p-8 rounded-lg shadow-lg">
|
||||
<h3 className="text-2xl font-bold mb-4">Serving the Entire Coastal Bend</h3>
|
||||
<p className="text-gray-700 mb-6">
|
||||
On-site installation and support for businesses throughout the Corpus Christi area.
|
||||
On-site installation and support for businesses throughout the Corpus Christi area.
|
||||
We bring the expertise to your location.
|
||||
</p>
|
||||
<div className="flex flex-wrap justify-center gap-4">
|
||||
|
|
@ -362,10 +362,10 @@ const PrinterScannerInstallation = () => {
|
|||
<div className="max-w-4xl mx-auto text-center">
|
||||
<h2 className="text-3xl font-bold mb-6">Stop Wrestling with Office Devices</h2>
|
||||
<p className="text-xl mb-8 text-indigo-100">
|
||||
Get professional printer and scanner installation from Corpus Christi's trusted IT experts.
|
||||
Get professional printer and scanner installation from Corpus Christi's trusted IT experts.
|
||||
Same-day service available for urgent business needs.
|
||||
</p>
|
||||
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center mb-8">
|
||||
<Button size="lg" className="bg-orange-600 hover:bg-orange-700">
|
||||
<Clock className="w-5 h-5 mr-2" />
|
||||
|
|
@ -375,7 +375,7 @@ const PrinterScannerInstallation = () => {
|
|||
Call (361) 765-8400
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
|
||||
<p className="text-indigo-200">
|
||||
Free consultation • Same-day service • Local on-site support
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -3,11 +3,20 @@ import Footer from '@/components/Footer';
|
|||
import { Monitor, Wifi, Cloud, Shield, Database, Settings, CheckCircle } from 'lucide-react';
|
||||
import ScrollReveal from '@/components/ScrollReveal';
|
||||
import { useLayoutEffect, useRef } from 'react';
|
||||
import { useSEO } from '@/hooks/useSEO';
|
||||
|
||||
const Services = () => {
|
||||
const pageRef = useRef<HTMLDivElement>(null);
|
||||
const heroImageRef = useRef<HTMLImageElement>(null);
|
||||
|
||||
useSEO({
|
||||
title: 'IT Services Corpus Christi | Managed IT, Network, Cloud | Bay Area Affiliates',
|
||||
description: 'Complete IT solutions for Corpus Christi businesses. Hardware support, network infrastructure, cloud services, secure remote access, backup & Microsoft 365. Free consultation.',
|
||||
keywords: 'IT services Corpus Christi, managed IT Coastal Bend, network infrastructure Texas, cloud services, VPN setup, Microsoft 365',
|
||||
canonical: 'https://bayarea-cc.com/services',
|
||||
ogImage: 'https://bayarea-cc.com/og-image.png',
|
||||
});
|
||||
|
||||
useLayoutEffect(() => {
|
||||
// Dynamically import GSAP only when needed to reduce initial bundle size
|
||||
let ctx: any;
|
||||
|
|
@ -163,7 +172,7 @@ const Services = () => {
|
|||
<div ref={pageRef} className="min-h-screen">
|
||||
<Navigation />
|
||||
|
||||
<main>
|
||||
<main role="main">
|
||||
{/* Hero section with image background */}
|
||||
<section className="relative h-screen flex items-center justify-center overflow-hidden">
|
||||
{/* Background image with parallax */}
|
||||
|
|
@ -174,7 +183,7 @@ const Services = () => {
|
|||
alt="Corpus Christi IT services data center with enterprise networking equipment and server infrastructure"
|
||||
className="w-full h-[110%] object-cover will-change-transform"
|
||||
loading="eager"
|
||||
fetchpriority="high"
|
||||
fetchPriority="high"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -9,27 +9,27 @@ import { Shield, Lock, Zap, CheckCircle, Users, Globe, Server, Smartphone } from
|
|||
const VpnSetup = () => {
|
||||
useEffect(() => {
|
||||
document.title = 'VPN Setup Corpus Christi | Business WireGuard Experts';
|
||||
|
||||
|
||||
const metaDescription = document.querySelector('meta[name="description"]');
|
||||
if (metaDescription) {
|
||||
metaDescription.setAttribute('content', 'Secure remote access for SMBs—Corpus Christi\'s WireGuard VPN experts. Get fast, reliable VPN setup today.');
|
||||
}
|
||||
|
||||
|
||||
const ogTitle = document.querySelector('meta[property="og:title"]');
|
||||
if (ogTitle) {
|
||||
ogTitle.setAttribute('content', 'Corpus Christi WireGuard VPN Setup—Fast, Secure for SMBs');
|
||||
}
|
||||
|
||||
|
||||
const ogDescription = document.querySelector('meta[property="og:description"]');
|
||||
if (ogDescription) {
|
||||
ogDescription.setAttribute('content', 'Secure remote access for SMBs—Corpus Christi\'s WireGuard VPN experts. Get fast, reliable VPN setup today.');
|
||||
}
|
||||
|
||||
|
||||
const twitterTitle = document.querySelector('meta[name="twitter:title"]');
|
||||
if (twitterTitle) {
|
||||
twitterTitle.setAttribute('content', 'WireGuard VPN—Remote Work Corpus Christi');
|
||||
}
|
||||
|
||||
|
||||
const twitterDescription = document.querySelector('meta[name="twitter:description"]');
|
||||
if (twitterDescription) {
|
||||
twitterDescription.setAttribute('content', 'Secure remote access for SMBs—Corpus Christi\'s WireGuard VPN experts. Get fast, reliable VPN setup today.');
|
||||
|
|
@ -39,7 +39,7 @@ const VpnSetup = () => {
|
|||
return (
|
||||
<div className="min-h-screen">
|
||||
<Navigation />
|
||||
<main>
|
||||
<main role="main">
|
||||
{/* Hero Section */}
|
||||
<section className="bg-gradient-to-br from-green-900 via-green-800 to-green-600 text-white py-20">
|
||||
<div className="container mx-auto px-4">
|
||||
|
|
@ -72,7 +72,7 @@ const VpnSetup = () => {
|
|||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h2 className="text-3xl font-bold text-center mb-12">Why WireGuard for Corpus SMBs</h2>
|
||||
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-8 mb-12">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
|
|
@ -85,7 +85,7 @@ const VpnSetup = () => {
|
|||
<p className="text-gray-600">WireGuard outperforms traditional VPN protocols with minimal latency and maximum throughput for your remote teams.</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-4">
|
||||
|
|
@ -97,7 +97,7 @@ const VpnSetup = () => {
|
|||
<p className="text-gray-600">Advanced cryptography and smaller codebase mean fewer vulnerabilities and stronger protection for your business data.</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-4">
|
||||
|
|
@ -109,7 +109,7 @@ const VpnSetup = () => {
|
|||
<p className="text-gray-600">Easy configuration and maintenance with automatic key exchange and seamless roaming between networks.</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-4">
|
||||
|
|
@ -131,7 +131,7 @@ const VpnSetup = () => {
|
|||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h2 className="text-3xl font-bold text-center mb-12">Benefits of Secure Remote Work</h2>
|
||||
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-8 mb-12">
|
||||
<div className="text-center">
|
||||
<div className="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
|
|
@ -140,7 +140,7 @@ const VpnSetup = () => {
|
|||
<h3 className="text-xl font-bold mb-2">Work From Anywhere</h3>
|
||||
<p className="text-gray-600">Access your office network securely from home, client sites, or anywhere in the world.</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="text-center">
|
||||
<div className="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<Server className="w-10 h-10 text-blue-600" />
|
||||
|
|
@ -148,7 +148,7 @@ const VpnSetup = () => {
|
|||
<h3 className="text-xl font-bold mb-2">Secure File Access</h3>
|
||||
<p className="text-gray-600">Connect to your business servers, printers, and shared drives as if you're in the office.</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="text-center">
|
||||
<div className="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<Smartphone className="w-10 h-10 text-blue-600" />
|
||||
|
|
@ -157,7 +157,7 @@ const VpnSetup = () => {
|
|||
<p className="text-gray-600">One VPN solution for all your devices—laptops, phones, tablets, and desktops.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="bg-white p-8 rounded-lg shadow-lg">
|
||||
<h3 className="text-2xl font-bold mb-6 text-center">WireGuard vs Traditional VPN</h3>
|
||||
<div className="overflow-x-auto">
|
||||
|
|
@ -208,7 +208,7 @@ const VpnSetup = () => {
|
|||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h2 className="text-3xl font-bold text-center mb-12">Fast, Reliable VPN Deployment</h2>
|
||||
|
||||
|
||||
<div className="grid md:grid-cols-4 gap-8">
|
||||
<Card className="text-center">
|
||||
<CardHeader>
|
||||
|
|
@ -221,7 +221,7 @@ const VpnSetup = () => {
|
|||
<p className="text-sm">Evaluate your network infrastructure and remote access needs.</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
|
||||
<Card className="text-center">
|
||||
<CardHeader>
|
||||
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
|
|
@ -233,7 +233,7 @@ const VpnSetup = () => {
|
|||
<p className="text-sm">Install and configure WireGuard server on your network.</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
|
||||
<Card className="text-center">
|
||||
<CardHeader>
|
||||
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
|
|
@ -245,7 +245,7 @@ const VpnSetup = () => {
|
|||
<p className="text-sm">Set up VPN clients on all employee devices with secure keys.</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
|
||||
<Card className="text-center">
|
||||
<CardHeader>
|
||||
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
|
|
@ -268,10 +268,10 @@ const VpnSetup = () => {
|
|||
<div className="max-w-4xl mx-auto text-center">
|
||||
<h2 className="text-3xl font-bold mb-8">Trusted VPN Experts Serving the Coastal Bend</h2>
|
||||
<p className="text-xl text-gray-600 mb-8">
|
||||
Bay Area Affiliates specializes in secure network solutions for local businesses.
|
||||
Bay Area Affiliates specializes in secure network solutions for local businesses.
|
||||
We've helped hundreds of Corpus Christi SMBs implement reliable remote access.
|
||||
</p>
|
||||
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-8 mb-12">
|
||||
<div className="bg-white p-6 rounded-lg shadow">
|
||||
<h3 className="text-xl font-bold mb-4 text-green-600">Local Business Focus</h3>
|
||||
|
|
@ -282,7 +282,7 @@ const VpnSetup = () => {
|
|||
<li>• Bilingual technical support</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="bg-white p-6 rounded-lg shadow">
|
||||
<h3 className="text-xl font-bold mb-4 text-green-600">WireGuard Specialization</h3>
|
||||
<ul className="text-left space-y-2 text-gray-700">
|
||||
|
|
@ -293,7 +293,7 @@ const VpnSetup = () => {
|
|||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="bg-white p-8 rounded-lg shadow-lg">
|
||||
<h3 className="text-2xl font-bold mb-4">Areas We Serve</h3>
|
||||
<div className="flex flex-wrap justify-center gap-4">
|
||||
|
|
@ -315,10 +315,10 @@ const VpnSetup = () => {
|
|||
<div className="max-w-4xl mx-auto text-center">
|
||||
<h2 className="text-3xl font-bold mb-6">Secure Your Remote Work Today</h2>
|
||||
<p className="text-xl mb-8 text-green-100">
|
||||
Get a fast, secure WireGuard VPN setup from Corpus Christi's trusted IT experts.
|
||||
Get a fast, secure WireGuard VPN setup from Corpus Christi's trusted IT experts.
|
||||
Protect your business data and enable productive remote work.
|
||||
</p>
|
||||
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center mb-8">
|
||||
<Button size="lg" className="bg-orange-600 hover:bg-orange-700">
|
||||
<Lock className="w-5 h-5 mr-2" />
|
||||
|
|
@ -328,7 +328,7 @@ const VpnSetup = () => {
|
|||
Call (361) 765-8400
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
|
||||
<p className="text-green-200">
|
||||
Free consultation • Same-day setup available • Local support team
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -9,27 +9,27 @@ import { Globe, Mail, Palette, CheckCircle, Smartphone, Search, TrendingUp, User
|
|||
const WebServices = () => {
|
||||
useEffect(() => {
|
||||
document.title = 'Web Services Corpus Christi | Bay Area Affiliates';
|
||||
|
||||
|
||||
const metaDescription = document.querySelector('meta[name="description"]');
|
||||
if (metaDescription) {
|
||||
metaDescription.setAttribute('content', 'Elevate your local business presence—sites, domains, email.');
|
||||
}
|
||||
|
||||
|
||||
const ogTitle = document.querySelector('meta[property="og:title"]');
|
||||
if (ogTitle) {
|
||||
ogTitle.setAttribute('content', 'Web Services Corpus Christi—Professional Business Websites');
|
||||
}
|
||||
|
||||
|
||||
const ogDescription = document.querySelector('meta[property="og:description"]');
|
||||
if (ogDescription) {
|
||||
ogDescription.setAttribute('content', 'Elevate your local business presence—sites, domains, email.');
|
||||
}
|
||||
|
||||
|
||||
const twitterTitle = document.querySelector('meta[name="twitter:title"]');
|
||||
if (twitterTitle) {
|
||||
twitterTitle.setAttribute('content', 'Web Design Domain Email Portland Coastal Bend SMB');
|
||||
}
|
||||
|
||||
|
||||
const twitterDescription = document.querySelector('meta[name="twitter:description"]');
|
||||
if (twitterDescription) {
|
||||
twitterDescription.setAttribute('content', 'Elevate your local business presence—sites, domains, email.');
|
||||
|
|
@ -39,7 +39,7 @@ const WebServices = () => {
|
|||
return (
|
||||
<div className="min-h-screen">
|
||||
<Navigation />
|
||||
<main>
|
||||
<main role="main">
|
||||
{/* Hero Section */}
|
||||
<section className="bg-gradient-to-br from-emerald-900 via-emerald-800 to-emerald-600 text-white py-20">
|
||||
<div className="container mx-auto px-4">
|
||||
|
|
@ -72,7 +72,7 @@ const WebServices = () => {
|
|||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h2 className="text-3xl font-bold text-center mb-12">Complete Digital Presence Solutions</h2>
|
||||
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-8 mb-12">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
|
|
@ -93,7 +93,7 @@ const WebServices = () => {
|
|||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="w-16 h-16 bg-emerald-100 rounded-full flex items-center justify-center mb-4">
|
||||
|
|
@ -113,7 +113,7 @@ const WebServices = () => {
|
|||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="w-16 h-16 bg-emerald-100 rounded-full flex items-center justify-center mb-4">
|
||||
|
|
@ -133,7 +133,7 @@ const WebServices = () => {
|
|||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="w-16 h-16 bg-emerald-100 rounded-full flex items-center justify-center mb-4">
|
||||
|
|
@ -163,7 +163,7 @@ const WebServices = () => {
|
|||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h2 className="text-3xl font-bold text-center mb-12">Website Packages for Local SMBs</h2>
|
||||
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-8 mb-12">
|
||||
<div className="bg-white p-6 rounded-lg shadow border-l-4 border-emerald-500">
|
||||
<h3 className="font-bold text-lg mb-4">Business Starter</h3>
|
||||
|
|
@ -181,7 +181,7 @@ const WebServices = () => {
|
|||
<div className="text-sm text-gray-500">One-time setup</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="bg-white p-6 rounded-lg shadow border-l-4 border-orange-500">
|
||||
<h3 className="font-bold text-lg mb-4">Professional Plus</h3>
|
||||
<p className="text-gray-600 mb-4">Advanced features for growing businesses with online sales needs.</p>
|
||||
|
|
@ -198,7 +198,7 @@ const WebServices = () => {
|
|||
<div className="text-sm text-gray-500">One-time setup</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="bg-white p-6 rounded-lg shadow border-l-4 border-purple-500">
|
||||
<h3 className="font-bold text-lg mb-4">Enterprise Solution</h3>
|
||||
<p className="text-gray-600 mb-4">Comprehensive digital presence for established businesses and organizations.</p>
|
||||
|
|
@ -216,7 +216,7 @@ const WebServices = () => {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="bg-white p-8 rounded-lg shadow-lg">
|
||||
<h3 className="text-2xl font-bold mb-6 text-center">Why Local Businesses Choose Our Web Services</h3>
|
||||
<div className="grid md:grid-cols-2 gap-8">
|
||||
|
|
@ -273,7 +273,7 @@ const WebServices = () => {
|
|||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h2 className="text-3xl font-bold text-center mb-12">Boost Your Local Business Visibility</h2>
|
||||
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-8 mb-12">
|
||||
<div className="text-center">
|
||||
<div className="w-20 h-20 bg-emerald-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
|
|
@ -282,7 +282,7 @@ const WebServices = () => {
|
|||
<h3 className="text-xl font-bold mb-2">Get Found Online</h3>
|
||||
<p className="text-gray-600">Appear at the top of Google searches when Corpus Christi customers look for your services.</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="text-center">
|
||||
<div className="w-20 h-20 bg-emerald-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<Smartphone className="w-10 h-10 text-emerald-600" />
|
||||
|
|
@ -290,7 +290,7 @@ const WebServices = () => {
|
|||
<h3 className="text-xl font-bold mb-2">Mobile-First Design</h3>
|
||||
<p className="text-gray-600">Your website looks perfect on phones, tablets, and desktops—critical for local searches.</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="text-center">
|
||||
<div className="w-20 h-20 bg-emerald-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<TrendingUp className="w-10 h-10 text-emerald-600" />
|
||||
|
|
@ -299,7 +299,7 @@ const WebServices = () => {
|
|||
<p className="text-gray-600">Track website visitors, leads, and customer inquiries with detailed analytics reporting.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="bg-emerald-50 p-8 rounded-lg shadow-lg">
|
||||
<h3 className="text-2xl font-bold mb-6 text-center">Local SEO Success Stories</h3>
|
||||
<div className="grid md:grid-cols-2 gap-8">
|
||||
|
|
@ -314,7 +314,7 @@ const WebServices = () => {
|
|||
</div>
|
||||
<div className="mt-6 text-center">
|
||||
<p className="text-gray-700">
|
||||
"Bay Area Affiliates redesigned our website and now we get 3x more customer inquiries from online searches.
|
||||
"Bay Area Affiliates redesigned our website and now we get 3x more customer inquiries from online searches.
|
||||
They understand the Corpus Christi market better than anyone."
|
||||
</p>
|
||||
<p className="text-emerald-600 font-semibold mt-2">— Local Business Owner</p>
|
||||
|
|
@ -329,7 +329,7 @@ const WebServices = () => {
|
|||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h2 className="text-3xl font-bold text-center mb-12">Professional Web Development Process</h2>
|
||||
|
||||
|
||||
<div className="grid md:grid-cols-4 gap-8">
|
||||
<Card className="text-center">
|
||||
<CardHeader>
|
||||
|
|
@ -342,7 +342,7 @@ const WebServices = () => {
|
|||
<p className="text-sm">In-person consultation to understand your business goals and target customers.</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
|
||||
<Card className="text-center">
|
||||
<CardHeader>
|
||||
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
|
|
@ -354,7 +354,7 @@ const WebServices = () => {
|
|||
<p className="text-sm">Custom website design that reflects your brand and appeals to local customers.</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
|
||||
<Card className="text-center">
|
||||
<CardHeader>
|
||||
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
|
|
@ -366,7 +366,7 @@ const WebServices = () => {
|
|||
<p className="text-sm">Professional coding and testing to ensure optimal performance and security.</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
|
||||
<Card className="text-center">
|
||||
<CardHeader>
|
||||
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
|
|
@ -389,10 +389,10 @@ const WebServices = () => {
|
|||
<div className="max-w-4xl mx-auto text-center">
|
||||
<h2 className="text-3xl font-bold mb-8">Serving Coastal Bend Businesses Since 1999</h2>
|
||||
<p className="text-xl text-gray-600 mb-8">
|
||||
Bay Area Affiliates has created professional websites for hundreds of local businesses throughout
|
||||
Bay Area Affiliates has created professional websites for hundreds of local businesses throughout
|
||||
the Corpus Christi area. We understand what works in our local market.
|
||||
</p>
|
||||
|
||||
|
||||
<div className="grid md:grid-cols-4 gap-8 mb-12">
|
||||
<div className="text-center">
|
||||
<div className="text-4xl font-bold text-emerald-600 mb-2">200+</div>
|
||||
|
|
@ -411,11 +411,11 @@ const WebServices = () => {
|
|||
<div className="text-gray-600">Support Team</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="bg-white p-8 rounded-lg shadow-lg">
|
||||
<h3 className="text-2xl font-bold mb-4">Web Services Throughout the Coastal Bend</h3>
|
||||
<p className="text-gray-700 mb-6">
|
||||
From Portland's waterfront businesses to Kingsville's agricultural services, we create websites
|
||||
From Portland's waterfront businesses to Kingsville's agricultural services, we create websites
|
||||
that connect local businesses with their communities and drive real results.
|
||||
</p>
|
||||
<div className="flex flex-wrap justify-center gap-4">
|
||||
|
|
@ -437,10 +437,10 @@ const WebServices = () => {
|
|||
<div className="max-w-4xl mx-auto text-center">
|
||||
<h2 className="text-3xl font-bold mb-6">Ready to Grow Your Local Business Online?</h2>
|
||||
<p className="text-xl mb-8 text-emerald-100">
|
||||
Get a professional website that attracts local customers and grows your business.
|
||||
Get a professional website that attracts local customers and grows your business.
|
||||
Free consultation and custom quote for Coastal Bend SMBs.
|
||||
</p>
|
||||
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center mb-8">
|
||||
<Button size="lg" className="bg-orange-600 hover:bg-orange-700">
|
||||
<Globe className="w-5 h-5 mr-2" />
|
||||
|
|
@ -450,7 +450,7 @@ const WebServices = () => {
|
|||
Call (361) 765-8400
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
|
||||
<p className="text-emerald-200">
|
||||
Free consultation • Local market expertise • Ongoing support • Mobile-first design
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -9,27 +9,27 @@ import { Clock, Shield, Zap, CheckCircle, AlertTriangle } from 'lucide-react';
|
|||
const Windows11Transition = () => {
|
||||
useEffect(() => {
|
||||
document.title = 'Windows 11 Upgrade Corpus Christi | Bay Area Affiliates';
|
||||
|
||||
|
||||
const metaDescription = document.querySelector('meta[name="description"]');
|
||||
if (metaDescription) {
|
||||
metaDescription.setAttribute('content', 'Windows 10 support ends Oct 14, 2025—upgrade now for security. Trusted service for Corpus Christi businesses.');
|
||||
}
|
||||
|
||||
|
||||
const ogTitle = document.querySelector('meta[property="og:title"]');
|
||||
if (ogTitle) {
|
||||
ogTitle.setAttribute('content', 'Windows 11 Upgrade: Secure Your Business Before Deadline');
|
||||
}
|
||||
|
||||
|
||||
const ogDescription = document.querySelector('meta[property="og:description"]');
|
||||
if (ogDescription) {
|
||||
ogDescription.setAttribute('content', 'Windows 10 support ends Oct 14, 2025—upgrade now for security. Trusted service for Corpus Christi businesses.');
|
||||
}
|
||||
|
||||
|
||||
const twitterTitle = document.querySelector('meta[name="twitter:title"]');
|
||||
if (twitterTitle) {
|
||||
twitterTitle.setAttribute('content', 'Corpus Christi Windows 11 Upgrade—Urgent for Business Security');
|
||||
}
|
||||
|
||||
|
||||
const twitterDescription = document.querySelector('meta[name="twitter:description"]');
|
||||
if (twitterDescription) {
|
||||
twitterDescription.setAttribute('content', 'Windows 10 support ends Oct 14, 2025—upgrade now for security. Trusted service for Corpus Christi businesses.');
|
||||
|
|
@ -39,7 +39,7 @@ const Windows11Transition = () => {
|
|||
return (
|
||||
<div className="min-h-screen">
|
||||
<Navigation />
|
||||
<main>
|
||||
<main role="main">
|
||||
{/* Hero Section */}
|
||||
<section className="bg-gradient-to-br from-blue-900 via-blue-800 to-blue-600 text-white py-20">
|
||||
<div className="container mx-auto px-4">
|
||||
|
|
@ -77,11 +77,11 @@ const Windows11Transition = () => {
|
|||
<h2 className="text-2xl font-bold text-red-800">Windows 10 Support Ends Oct 14, 2025</h2>
|
||||
</div>
|
||||
<p className="text-red-700 text-lg">
|
||||
After this date, Microsoft will no longer provide security updates, bug fixes, or technical support for Windows 10.
|
||||
After this date, Microsoft will no longer provide security updates, bug fixes, or technical support for Windows 10.
|
||||
Your business will be vulnerable to security threats and compliance issues.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-8">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
|
|
@ -106,7 +106,7 @@ const Windows11Transition = () => {
|
|||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-green-600">Benefits of Windows 11</CardTitle>
|
||||
|
|
@ -140,7 +140,7 @@ const Windows11Transition = () => {
|
|||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h2 className="text-3xl font-bold text-center mb-12">Seamless Migration for Local SMBs</h2>
|
||||
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-8 mb-12">
|
||||
<Card className="text-center">
|
||||
<CardHeader>
|
||||
|
|
@ -153,7 +153,7 @@ const Windows11Transition = () => {
|
|||
<p>We evaluate your current hardware and software for Windows 11 compatibility.</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
|
||||
<Card className="text-center">
|
||||
<CardHeader>
|
||||
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
|
|
@ -165,7 +165,7 @@ const Windows11Transition = () => {
|
|||
<p>Custom migration plan tailored to minimize business disruption.</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
|
||||
<Card className="text-center">
|
||||
<CardHeader>
|
||||
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
|
|
@ -178,7 +178,7 @@ const Windows11Transition = () => {
|
|||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="bg-blue-50 p-8 rounded-lg">
|
||||
<h3 className="text-2xl font-bold mb-4">Enhanced Security & Features</h3>
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
|
|
@ -212,10 +212,10 @@ const Windows11Transition = () => {
|
|||
<div className="max-w-4xl mx-auto text-center">
|
||||
<h2 className="text-3xl font-bold mb-8">Trusted by Corpus Christi Businesses for 25+ Years</h2>
|
||||
<p className="text-xl text-gray-600 mb-8">
|
||||
Bay Area Affiliates has been helping local businesses navigate technology transitions since 1999.
|
||||
Bay Area Affiliates has been helping local businesses navigate technology transitions since 1999.
|
||||
We understand the unique needs of Coastal Bend SMBs.
|
||||
</p>
|
||||
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-8 mb-12">
|
||||
<div className="text-center">
|
||||
<div className="text-4xl font-bold text-blue-600 mb-2">25+</div>
|
||||
|
|
@ -230,7 +230,7 @@ const Windows11Transition = () => {
|
|||
<div className="text-gray-600">Local Support</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="bg-white p-8 rounded-lg shadow-lg">
|
||||
<h3 className="text-2xl font-bold mb-4">Serving the Entire Coastal Bend</h3>
|
||||
<div className="flex flex-wrap justify-center gap-4">
|
||||
|
|
@ -254,7 +254,7 @@ const Windows11Transition = () => {
|
|||
<p className="text-xl mb-8 text-blue-100">
|
||||
Schedule your Windows 11 upgrade assessment today. Protect your business before the October 14, 2025 deadline.
|
||||
</p>
|
||||
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center mb-8">
|
||||
<Button size="lg" className="bg-orange-600 hover:bg-orange-700">
|
||||
<Clock className="w-5 h-5 mr-2" />
|
||||
|
|
@ -264,7 +264,7 @@ const Windows11Transition = () => {
|
|||
Call (361) 765-8400
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
|
||||
<p className="text-blue-200">
|
||||
Free consultation • Same-day response • Local experts
|
||||
</p>
|
||||
|
|
|
|||
Loading…
Reference in New Issue