SEO
This commit is contained in:
parent
afb89592d2
commit
a646542d8f
159
index.html
159
index.html
|
|
@ -3,20 +3,167 @@
|
|||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Bay Area Affiliates - IT Services Corpus Christi | Managed IT Coastal Bend</title>
|
||||
<meta name="description" content="Top-notch Computer & Networking solutions for the Coastal Bend. We design, run and protect your IT so you can focus on growth. Serving Corpus Christi businesses since 2010." />
|
||||
<meta name="keywords" content="IT services Corpus Christi, managed IT Coastal Bend, computer networking solutions, business IT support, VPN services, cloud computing Texas" />
|
||||
<title>Managed IT Services Corpus Christi | Bay Area Affiliates</title>
|
||||
<meta name="description" content="Secure, tailored IT support—Corpus Christi's trusted experts for 25+ years. Call today for a free assessment." />
|
||||
<meta name="keywords" content="managed IT services corpus christi, IT support coastal bend, business computer solutions, Portland IT services, computer repair corpus christi" />
|
||||
<meta name="author" content="Bay Area Affiliates, Inc." />
|
||||
|
||||
<meta property="og:title" content="Bay Area Affiliates - IT Services Corpus Christi | Managed IT Coastal Bend" />
|
||||
<meta property="og:description" content="Top-notch Computer & Networking solutions for the Coastal Bend. We design, run and protect your IT so you can focus on growth." />
|
||||
<meta property="og:title" content="Corpus Christi Managed IT Experts. Reliable, Secure, Local." />
|
||||
<meta property="og:description" content="Secure, tailored IT support—Corpus Christi's trusted experts for 25+ years. Call today for a free assessment." />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:image" content="https://lovable.dev/opengraph-image-p98pqg.png" />
|
||||
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:site" content="@lovable_dev" />
|
||||
<meta name="twitter:title" content="Leading IT Support Corpus Christi. Secure, Responsive, Local." />
|
||||
<meta name="twitter:description" content="Secure, tailored IT support—Corpus Christi's trusted experts for 25+ years. Call today for a free assessment." />
|
||||
<meta name="twitter:image" content="https://lovable.dev/opengraph-image-p98pqg.png" />
|
||||
|
||||
<!-- JSON-LD Schema Markup -->
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@graph": [
|
||||
{
|
||||
"@type": "LocalBusiness",
|
||||
"name": "Bay Area Affiliates, Inc.",
|
||||
"url": "https://bayarea-cc.com/",
|
||||
"image": "/logo_bayarea.svg",
|
||||
"telephone": "361-765-8400",
|
||||
"priceRange": "$",
|
||||
"address": {
|
||||
"@type": "PostalAddress",
|
||||
"streetAddress": "Corpus Christi Area",
|
||||
"addressLocality": "Corpus Christi",
|
||||
"addressRegion": "TX",
|
||||
"postalCode": "78401",
|
||||
"addressCountry": "US"
|
||||
},
|
||||
"areaServed": ["Corpus Christi", "Coastal Bend", "Portland", "Rockport", "Aransas Pass", "Kingsville", "Port Aransas"],
|
||||
"openingHoursSpecification": [
|
||||
{ "@type": "OpeningHoursSpecification", "dayOfWeek": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"], "opens": "08:00", "closes": "17:00" }
|
||||
],
|
||||
"sameAs": ["https://bayarea-cc.com/"]
|
||||
},
|
||||
{
|
||||
"@type": "Service",
|
||||
"serviceType": "Windows 11 Transition",
|
||||
"description": "Upgrade to Windows 11 before Windows 10 support ends October 14, 2025 for security and compliance.",
|
||||
"areaServed": ["Corpus Christi", "Coastal Bend", "Portland", "Rockport", "Aransas Pass", "Kingsville", "Port Aransas"]
|
||||
},
|
||||
{
|
||||
"@type": "Service",
|
||||
"serviceType": "Web Services",
|
||||
"description": "Local web design, domain registration, email hosting, and ongoing website support.",
|
||||
"areaServed": ["Corpus Christi", "Coastal Bend", "Portland", "Rockport", "Aransas Pass", "Kingsville", "Port Aransas"]
|
||||
},
|
||||
{
|
||||
"@type": "Service",
|
||||
"serviceType": "Performance Upgrades",
|
||||
"description": "SSD upgrades, device optimization, and speed improvements for business computers.",
|
||||
"areaServed": ["Corpus Christi", "Coastal Bend", "Portland", "Rockport", "Aransas Pass", "Kingsville", "Port Aransas"]
|
||||
},
|
||||
{
|
||||
"@type": "Service",
|
||||
"serviceType": "Printer & Scanner Installation",
|
||||
"description": "Professional installation/configuration for office printers and scanners.",
|
||||
"areaServed": ["Corpus Christi", "Coastal Bend", "Portland", "Rockport", "Aransas Pass", "Kingsville", "Port Aransas"]
|
||||
},
|
||||
{
|
||||
"@type": "Service",
|
||||
"serviceType": "New/Refurbished Desktop Hardware",
|
||||
"description": "Supply and setup of new and refurbished desktops, tailored for local SMBs.",
|
||||
"areaServed": ["Corpus Christi", "Coastal Bend", "Portland", "Rockport", "Aransas Pass", "Kingsville", "Port Aransas"]
|
||||
},
|
||||
{
|
||||
"@type": "Service",
|
||||
"serviceType": "VPN Setup (WireGuard)",
|
||||
"description": "WireGuard VPN Installation for secure SMB remote access and encrypted connections.",
|
||||
"areaServed": ["Corpus Christi", "Coastal Bend", "Portland", "Rockport", "Aransas Pass", "Kingsville", "Port Aransas"]
|
||||
},
|
||||
{
|
||||
"@type": "Service",
|
||||
"serviceType": "Network Infrastructure Support",
|
||||
"description": "Setup and support for routers, switches, and secure office networks.",
|
||||
"areaServed": ["Corpus Christi", "Coastal Bend", "Portland", "Rockport", "Aransas Pass", "Kingsville", "Port Aransas"]
|
||||
},
|
||||
{
|
||||
"@type": "Service",
|
||||
"serviceType": "Network Attached Storage",
|
||||
"description": "NAS installation, config, and backup for business continuity.",
|
||||
"areaServed": ["Corpus Christi", "Coastal Bend", "Portland", "Rockport", "Aransas Pass", "Kingsville", "Port Aransas"]
|
||||
},
|
||||
{
|
||||
"@type": "FAQPage",
|
||||
"mainEntity": [
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "When does Windows 10 support end?",
|
||||
"acceptedAnswer": {
|
||||
"@type": "Answer",
|
||||
"text": "Windows 10 support ends October 14, 2025. Businesses should upgrade before this date to maintain security and compliance."
|
||||
}
|
||||
},
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "Is there an Extended Security Update (ESU) for Windows 10 after EoS?",
|
||||
"acceptedAnswer": {
|
||||
"@type": "Answer",
|
||||
"text": "Yes, Microsoft offers paid Extended Security Updates (ESU) for Windows 10 through October 2028 for eligible devices."
|
||||
}
|
||||
},
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "What are the benefits of WireGuard VPN for SMBs?",
|
||||
"acceptedAnswer": {
|
||||
"@type": "Answer",
|
||||
"text": "WireGuard VPN provides fast, secure, and simplified remote access for small businesses, with robust cryptography and easier management."
|
||||
}
|
||||
},
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "SSD vs HDD: What's best for business computers?",
|
||||
"acceptedAnswer": {
|
||||
"@type": "Answer",
|
||||
"text": "SSD upgrades result in faster boot and application times, increased reliability, and lower energy usage than HDDs."
|
||||
}
|
||||
},
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "What are common printer/scanner setup issues?",
|
||||
"acceptedAnswer": {
|
||||
"@type": "Answer",
|
||||
"text": "Driver conflicts, device detection errors, and network configuration problems are frequent setup issues for office printers and scanners."
|
||||
}
|
||||
},
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "Why is NAS backup important for small businesses?",
|
||||
"acceptedAnswer": {
|
||||
"@type": "Answer",
|
||||
"text": "NAS provides scalable network storage and centralized backup, reducing risks of data loss and supporting business continuity."
|
||||
}
|
||||
},
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "How can small businesses harden their network?",
|
||||
"acceptedAnswer": {
|
||||
"@type": "Answer",
|
||||
"text": "Businesses can harden networks with firewalls, secure passwords, VPNs, regular patching, and professional network audits."
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"@type": "BreadcrumbList",
|
||||
"itemListElement": [
|
||||
{ "@type": "ListItem", "position": 1, "name": "Home", "item": "https://bayarea-cc.com/" },
|
||||
{ "@type": "ListItem", "position": 2, "name": "Services", "item": "https://bayarea-cc.com/services" }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Favicon -->
|
||||
<link rel="icon" type="image/svg+xml" href="/logo_bayarea.svg" />
|
||||
<link rel="icon" type="image/png" href="/logo_bayarea.svg" />
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 2.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.1 MiB |
|
|
@ -9,6 +9,8 @@ import About from "./pages/About";
|
|||
import Blog from "./pages/Blog";
|
||||
import Contact from "./pages/Contact";
|
||||
import NotFound from "./pages/NotFound";
|
||||
import Windows11Transition from "./pages/Windows11Transition";
|
||||
import VpnSetup from "./pages/VpnSetup";
|
||||
|
||||
const queryClient = new QueryClient();
|
||||
|
||||
|
|
@ -24,6 +26,8 @@ const App = () => (
|
|||
<Route path="/about" element={<About />} />
|
||||
<Route path="/blog" element={<Blog />} />
|
||||
<Route path="/contact" element={<Contact />} />
|
||||
<Route path="/windows-11-transition" element={<Windows11Transition />} />
|
||||
<Route path="/vpn-setup" element={<VpnSetup />} />
|
||||
{/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
|
||||
<Route path="*" element={<NotFound />} />
|
||||
</Routes>
|
||||
|
|
|
|||
|
|
@ -1,21 +1,30 @@
|
|||
import { useState, useEffect } from 'react';
|
||||
import { Link, useLocation } from 'react-router-dom';
|
||||
import { Menu, X } from 'lucide-react';
|
||||
import { Menu, X, ChevronUp } from 'lucide-react';
|
||||
|
||||
const Navigation = () => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [isScrolled, setIsScrolled] = useState(false);
|
||||
const [showScrollUp, setShowScrollUp] = useState(false);
|
||||
const location = useLocation();
|
||||
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
setIsScrolled(window.scrollY > 50);
|
||||
setShowScrollUp(window.scrollY > 300);
|
||||
};
|
||||
|
||||
window.addEventListener('scroll', handleScroll);
|
||||
return () => window.removeEventListener('scroll', handleScroll);
|
||||
}, []);
|
||||
|
||||
const scrollToTop = () => {
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
};
|
||||
|
||||
const navItems = [
|
||||
{ name: 'Home', path: '/' },
|
||||
{ name: 'Services', path: '/services' },
|
||||
|
|
@ -106,6 +115,17 @@ const Navigation = () => {
|
|||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Scroll to top button */}
|
||||
{showScrollUp && (
|
||||
<button
|
||||
onClick={scrollToTop}
|
||||
className="fixed bottom-8 right-8 z-50 w-12 h-12 bg-neon text-neon-foreground rounded-full shadow-lg hover:shadow-neon transition-all duration-300 flex items-center justify-center group hover:scale-110"
|
||||
aria-label="Scroll to top"
|
||||
>
|
||||
<ChevronUp className="w-6 h-6 transition-transform group-hover:-translate-y-0.5" />
|
||||
</button>
|
||||
)}
|
||||
</nav>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ const ValuePillars = () => {
|
|||
number: '02',
|
||||
title: 'Faster Devices, Happier Teams',
|
||||
description: 'Practical upgrades like SSD migrations and cleanup reduce tickets and boost morale.',
|
||||
image: '/Faster_Devices_Happier_Teams.png'
|
||||
image: '/faster_happier.png'
|
||||
},
|
||||
{
|
||||
icon: Shield,
|
||||
|
|
|
|||
|
|
@ -2,8 +2,24 @@ import Navigation from '@/components/Navigation';
|
|||
import Footer from '@/components/Footer';
|
||||
import { Shield, Users, Zap, MapPin } from 'lucide-react';
|
||||
import ScrollReveal from '@/components/ScrollReveal';
|
||||
import { useEffect, useRef } from 'react';
|
||||
|
||||
const About = () => {
|
||||
const imageRef = useRef<HTMLImageElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
if (imageRef.current) {
|
||||
const scrolled = window.pageYOffset;
|
||||
const parallax = scrolled * 0.5;
|
||||
imageRef.current.style.transform = `translateY(${parallax}px) scale(1.1)`;
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('scroll', handleScroll, { passive: true });
|
||||
return () => window.removeEventListener('scroll', handleScroll);
|
||||
}, []);
|
||||
|
||||
const values = [
|
||||
{
|
||||
icon: Shield,
|
||||
|
|
@ -50,28 +66,59 @@ const About = () => {
|
|||
<Navigation />
|
||||
|
||||
<main>
|
||||
{/* Hero section */}
|
||||
<section className="pt-32 pb-16 bg-background relative overflow-hidden">
|
||||
<div className="absolute inset-0 grid-overlay opacity-10"></div>
|
||||
{/* Hero section with image background */}
|
||||
<section className="relative h-screen flex items-center justify-center overflow-hidden">
|
||||
{/* Background image with parallax */}
|
||||
<div className="absolute inset-0 overflow-hidden">
|
||||
<img
|
||||
ref={imageRef}
|
||||
src="/about_banner.png"
|
||||
alt="About Bay Area Affiliates background"
|
||||
className="w-full h-[110%] object-cover will-change-transform"
|
||||
style={{ transform: 'translateY(0px) scale(1.1)' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
{/* Overlay for better text readability */}
|
||||
<div className="absolute inset-0 bg-black/40"></div>
|
||||
|
||||
{/* Hero content */}
|
||||
<div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<ScrollReveal>
|
||||
<div className="max-w-3xl">
|
||||
<h1 className="font-heading font-bold text-5xl sm:text-6xl text-foreground mb-6">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h1 className="font-heading font-bold text-5xl sm:text-6xl lg:text-7xl text-white mb-6 text-balance drop-shadow-[0_0_20px_rgba(255,255,255,0.3)]">
|
||||
Local IT expertise for the{' '}
|
||||
<span className="text-neon">Coastal Bend</span>
|
||||
<span className="text-neon text-glow drop-shadow-[0_0_30px_rgba(51,102,255,0.8)]">Coastal Bend</span>
|
||||
</h1>
|
||||
<p className="text-xl text-foreground-muted leading-relaxed">
|
||||
<p className="text-xl sm:text-2xl text-white/95 mb-8 max-w-3xl mx-auto leading-relaxed drop-shadow-[0_0_15px_rgba(255,255,255,0.2)]">
|
||||
Since 2010, we've been helping businesses in Corpus Christi and surrounding
|
||||
communities build reliable, secure technology foundations that drive growth.
|
||||
</p>
|
||||
|
||||
{/* CTA button */}
|
||||
<div className="flex justify-center">
|
||||
<a
|
||||
href="#story"
|
||||
className="btn-neon group flex items-center space-x-2"
|
||||
>
|
||||
<span>Learn our story</span>
|
||||
<MapPin className="w-5 h-5 transition-transform group-hover:scale-110" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
|
||||
{/* Scroll indicator */}
|
||||
<div className="absolute bottom-8 left-1/2 transform -translate-x-1/2">
|
||||
<div className="w-6 h-10 border-2 border-neon/60 rounded-full flex justify-center drop-shadow-[0_0_10px_rgba(51,102,255,0.3)]">
|
||||
<div className="w-1 h-3 bg-neon rounded-full mt-2 animate-bounce"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Story section */}
|
||||
<section className="py-24 bg-background-deep">
|
||||
<section id="story" className="py-24 bg-background-deep">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
|
||||
<ScrollReveal>
|
||||
|
|
|
|||
|
|
@ -3,8 +3,24 @@ import Footer from '@/components/Footer';
|
|||
import { Calendar, ArrowRight, Clock } from 'lucide-react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import ScrollReveal from '@/components/ScrollReveal';
|
||||
import { useEffect, useRef } from 'react';
|
||||
|
||||
const Blog = () => {
|
||||
const imageRef = useRef<HTMLImageElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
if (imageRef.current) {
|
||||
const scrolled = window.pageYOffset;
|
||||
const parallax = scrolled * 0.5;
|
||||
imageRef.current.style.transform = `translateY(${parallax}px) scale(1.1)`;
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('scroll', handleScroll, { passive: true });
|
||||
return () => window.removeEventListener('scroll', handleScroll);
|
||||
}, []);
|
||||
|
||||
const posts = [
|
||||
{
|
||||
id: 1,
|
||||
|
|
@ -186,28 +202,59 @@ const Blog = () => {
|
|||
<Navigation />
|
||||
|
||||
<main>
|
||||
{/* Hero section */}
|
||||
<section className="pt-32 pb-16 bg-background relative overflow-hidden">
|
||||
<div className="absolute inset-0 grid-overlay opacity-10"></div>
|
||||
{/* Hero section with image background */}
|
||||
<section className="relative h-screen flex items-center justify-center overflow-hidden">
|
||||
{/* Background image with parallax */}
|
||||
<div className="absolute inset-0 overflow-hidden">
|
||||
<img
|
||||
ref={imageRef}
|
||||
src="/blog_banner.png"
|
||||
alt="Blog and insights background"
|
||||
className="w-full h-[110%] object-cover will-change-transform"
|
||||
style={{ transform: 'translateY(0px) scale(1.1)' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
{/* Overlay for better text readability */}
|
||||
<div className="absolute inset-0 bg-black/40"></div>
|
||||
|
||||
{/* Hero content */}
|
||||
<div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<ScrollReveal>
|
||||
<div className="max-w-3xl">
|
||||
<h1 className="font-heading font-bold text-5xl sm:text-6xl text-foreground mb-6">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h1 className="font-heading font-bold text-5xl sm:text-6xl lg:text-7xl text-white mb-6 text-balance drop-shadow-[0_0_20px_rgba(255,255,255,0.3)]">
|
||||
IT insights for{' '}
|
||||
<span className="text-neon">your business</span>
|
||||
<span className="text-neon text-glow drop-shadow-[0_0_30px_rgba(51,102,255,0.8)]">your business</span>
|
||||
</h1>
|
||||
<p className="text-xl text-foreground-muted leading-relaxed">
|
||||
<p className="text-xl sm:text-2xl text-white/95 mb-8 max-w-3xl mx-auto leading-relaxed drop-shadow-[0_0_15px_rgba(255,255,255,0.2)]">
|
||||
Practical advice, industry insights, and technical guides to help
|
||||
your business make better technology decisions.
|
||||
</p>
|
||||
|
||||
{/* CTA button */}
|
||||
<div className="flex justify-center">
|
||||
<a
|
||||
href="#articles"
|
||||
className="btn-neon group flex items-center space-x-2"
|
||||
>
|
||||
<span>Read our articles</span>
|
||||
<ArrowRight className="w-5 h-5 transition-transform group-hover:translate-x-1" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
|
||||
{/* Scroll indicator */}
|
||||
<div className="absolute bottom-8 left-1/2 transform -translate-x-1/2">
|
||||
<div className="w-6 h-10 border-2 border-neon/60 rounded-full flex justify-center drop-shadow-[0_0_10px_rgba(51,102,255,0.3)]">
|
||||
<div className="w-1 h-3 bg-neon rounded-full mt-2 animate-bounce"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Blog posts */}
|
||||
<section className="py-24 bg-background-deep">
|
||||
<section id="articles" className="py-24 bg-background-deep">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="grid grid-cols-1 gap-16">
|
||||
{posts.map((post, index) => (
|
||||
|
|
@ -273,35 +320,6 @@ const Blog = () => {
|
|||
))}
|
||||
</div>
|
||||
|
||||
{/* Newsletter signup */}
|
||||
<ScrollReveal delay={400}>
|
||||
<div className="mt-20">
|
||||
<div className="card-dark p-8 lg:p-12 text-center">
|
||||
<h3 className="font-heading font-bold text-3xl text-foreground mb-4">
|
||||
Stay updated with IT insights
|
||||
</h3>
|
||||
<p className="text-foreground-muted mb-8 max-w-2xl mx-auto">
|
||||
Get practical tips, industry updates, and technology guidance
|
||||
delivered to your inbox monthly.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4 max-w-md mx-auto">
|
||||
<input
|
||||
type="email"
|
||||
placeholder="Enter your email"
|
||||
className="flex-1 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"
|
||||
/>
|
||||
<button className="btn-neon whitespace-nowrap">
|
||||
Subscribe
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p className="text-xs text-foreground-muted mt-4">
|
||||
No spam, unsubscribe anytime.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -4,9 +4,11 @@ import Footer from '@/components/Footer';
|
|||
import { Mail, Phone, MapPin, Clock, DollarSign, Headphones } from 'lucide-react';
|
||||
import ScrollReveal from '@/components/ScrollReveal';
|
||||
import { useToast } from '@/hooks/use-toast';
|
||||
import { useEffect, useRef } from 'react';
|
||||
|
||||
const Contact = () => {
|
||||
const { toast } = useToast();
|
||||
const imageRef = useRef<HTMLImageElement>(null);
|
||||
const [formData, setFormData] = useState({
|
||||
name: '',
|
||||
email: '',
|
||||
|
|
@ -16,6 +18,19 @@ const Contact = () => {
|
|||
});
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
if (imageRef.current) {
|
||||
const scrolled = window.pageYOffset;
|
||||
const parallax = scrolled * 0.5;
|
||||
imageRef.current.style.transform = `translateY(${parallax}px) scale(1.1)`;
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('scroll', handleScroll, { passive: true });
|
||||
return () => window.removeEventListener('scroll', handleScroll);
|
||||
}, []);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setIsSubmitting(true);
|
||||
|
|
@ -67,28 +82,59 @@ const Contact = () => {
|
|||
<Navigation />
|
||||
|
||||
<main>
|
||||
{/* Hero section */}
|
||||
<section className="pt-32 pb-16 bg-background relative overflow-hidden">
|
||||
<div className="absolute inset-0 grid-overlay opacity-10"></div>
|
||||
{/* Hero section with image background */}
|
||||
<section className="relative h-screen flex items-center justify-center overflow-hidden">
|
||||
{/* Background image with parallax */}
|
||||
<div className="absolute inset-0 overflow-hidden">
|
||||
<img
|
||||
ref={imageRef}
|
||||
src="/contact_banner.png"
|
||||
alt="Contact us background"
|
||||
className="w-full h-[110%] object-cover will-change-transform"
|
||||
style={{ transform: 'translateY(0px) scale(1.1)' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
{/* Overlay for better text readability */}
|
||||
<div className="absolute inset-0 bg-black/40"></div>
|
||||
|
||||
{/* Hero content */}
|
||||
<div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<ScrollReveal>
|
||||
<div className="max-w-3xl">
|
||||
<h1 className="font-heading font-bold text-5xl sm:text-6xl text-foreground mb-6">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h1 className="font-heading font-bold text-5xl sm:text-6xl lg:text-7xl text-white mb-6 text-balance drop-shadow-[0_0_20px_rgba(255,255,255,0.3)]">
|
||||
Let's talk about your{' '}
|
||||
<span className="text-neon">IT needs</span>
|
||||
<span className="text-neon text-glow drop-shadow-[0_0_30px_rgba(51,102,255,0.8)]">IT needs</span>
|
||||
</h1>
|
||||
<p className="text-xl text-foreground-muted leading-relaxed">
|
||||
<p className="text-xl sm:text-2xl text-white/95 mb-8 max-w-3xl mx-auto leading-relaxed drop-shadow-[0_0_15px_rgba(255,255,255,0.2)]">
|
||||
Ready to improve your technology? We're here to help. Get started with
|
||||
a free consultation and see how we can make your IT work better for you.
|
||||
</p>
|
||||
|
||||
{/* CTA button */}
|
||||
<div className="flex justify-center">
|
||||
<a
|
||||
href="#contact-form"
|
||||
className="btn-neon group flex items-center space-x-2"
|
||||
>
|
||||
<span>Get started today</span>
|
||||
<Mail className="w-5 h-5 transition-transform group-hover:scale-110" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
|
||||
{/* Scroll indicator */}
|
||||
<div className="absolute bottom-8 left-1/2 transform -translate-x-1/2">
|
||||
<div className="w-6 h-10 border-2 border-neon/60 rounded-full flex justify-center drop-shadow-[0_0_10px_rgba(51,102,255,0.3)]">
|
||||
<div className="w-1 h-3 bg-neon rounded-full mt-2 animate-bounce"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Contact form and info */}
|
||||
<section className="py-24 bg-background-deep">
|
||||
<section id="contact-form" className="py-24 bg-background-deep">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-16">
|
||||
{/* Contact form */}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,403 @@
|
|||
import { useEffect } from 'react';
|
||||
import Navigation from '@/components/Navigation';
|
||||
import Footer from '@/components/Footer';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Monitor, HardDrive, Cpu, CheckCircle, DollarSign, Truck, Shield, Award } from 'lucide-react';
|
||||
|
||||
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.');
|
||||
}
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen">
|
||||
<Navigation />
|
||||
<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">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<Badge className="mb-4 bg-gray-700 text-white">
|
||||
<Monitor className="w-4 h-4 mr-2" />
|
||||
HARDWARE SPECIALISTS
|
||||
</Badge>
|
||||
<h1 className="text-4xl md:text-6xl font-bold mb-6">
|
||||
Quality Desktop Hardware Solutions
|
||||
</h1>
|
||||
<p className="text-xl md:text-2xl mb-8 text-gray-100">
|
||||
New & refurbished business desktops for Corpus Christi SMBs
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<Button size="lg" className="bg-orange-600 hover:bg-orange-700 text-white">
|
||||
<Truck className="w-5 h-5 mr-2" />
|
||||
Browse Hardware
|
||||
</Button>
|
||||
<Button size="lg" variant="outline" className="text-gray-900 border-white hover:bg-white">
|
||||
Custom Quote
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Hardware Options */}
|
||||
<section className="py-16">
|
||||
<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>
|
||||
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4">
|
||||
<Monitor className="w-8 h-8 text-blue-600" />
|
||||
</div>
|
||||
<CardTitle>Refurbished Business Desktops</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-gray-600 mb-4">Enterprise-grade computers from major corporations, professionally refurbished with warranties.</p>
|
||||
<ul className="space-y-2 text-sm text-gray-700">
|
||||
<li>• Dell OptiPlex series</li>
|
||||
<li>• HP EliteDesk models</li>
|
||||
<li>• Lenovo ThinkCentre systems</li>
|
||||
<li>• Intel Core i5/i7 processors</li>
|
||||
<li>• SSD upgrades available</li>
|
||||
<li>• Windows 11 Pro licensed</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4">
|
||||
<Cpu className="w-8 h-8 text-blue-600" />
|
||||
</div>
|
||||
<CardTitle>New Business Systems</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-gray-600 mb-4">Latest business-class desktops configured specifically for your industry needs and workflows.</p>
|
||||
<ul className="space-y-2 text-sm text-gray-700">
|
||||
<li>• Custom specifications</li>
|
||||
<li>• Latest processors (Intel/AMD)</li>
|
||||
<li>• Professional graphics options</li>
|
||||
<li>• Extended warranties available</li>
|
||||
<li>• Industry-specific configurations</li>
|
||||
<li>• 24/7 technical support</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4">
|
||||
<DollarSign className="w-8 h-8 text-blue-600" />
|
||||
</div>
|
||||
<CardTitle>Cost-Effective Solutions</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-gray-600 mb-4">Maximize your IT budget with quality hardware that delivers professional performance at affordable prices.</p>
|
||||
<div className="bg-green-50 p-4 rounded-lg">
|
||||
<h4 className="font-semibold text-green-700 mb-2">Savings Comparison</h4>
|
||||
<div className="text-sm space-y-1">
|
||||
<div><strong>New System:</strong> $1,200 - $2,000</div>
|
||||
<div><strong>Refurbished:</strong> $400 - $800</div>
|
||||
<div className="text-green-600 font-bold">Save 50-70% with same performance</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4">
|
||||
<Shield className="w-8 h-8 text-blue-600" />
|
||||
</div>
|
||||
<CardTitle>Warranty & Support</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-gray-600 mb-4">All systems include comprehensive warranties and local technical support for peace of mind.</p>
|
||||
<ul className="space-y-2 text-sm text-gray-700">
|
||||
<li>• 12-month hardware warranty</li>
|
||||
<li>• Free local pickup/delivery</li>
|
||||
<li>• On-site service available</li>
|
||||
<li>• Remote technical support</li>
|
||||
<li>• Loaner systems during repairs</li>
|
||||
<li>• Parts & labor included</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Hardware Categories */}
|
||||
<section className="py-16 bg-gray-50">
|
||||
<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>
|
||||
<p className="text-gray-600 mb-4">Perfect for office productivity, email, and basic business applications.</p>
|
||||
<ul className="space-y-2 text-sm text-gray-700 mb-4">
|
||||
<li>• Intel Core i3 or AMD equivalent</li>
|
||||
<li>• 8GB RAM (upgradeable)</li>
|
||||
<li>• 256GB SSD</li>
|
||||
<li>• Windows 11 Pro</li>
|
||||
<li>• Office suite ready</li>
|
||||
</ul>
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold text-blue-600">$399-$599</div>
|
||||
<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>
|
||||
<ul className="space-y-2 text-sm text-gray-700 mb-4">
|
||||
<li>• Intel Core i5 or AMD equivalent</li>
|
||||
<li>• 16GB RAM</li>
|
||||
<li>• 512GB SSD</li>
|
||||
<li>• Dedicated graphics optional</li>
|
||||
<li>• Multiple monitor support</li>
|
||||
</ul>
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold text-orange-600">$649-$899</div>
|
||||
<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>
|
||||
<ul className="space-y-2 text-sm text-gray-700 mb-4">
|
||||
<li>• Intel Core i7/Xeon processors</li>
|
||||
<li>• 32GB+ RAM</li>
|
||||
<li>• 1TB+ SSD</li>
|
||||
<li>• Professional graphics cards</li>
|
||||
<li>• ECC memory options</li>
|
||||
</ul>
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold text-purple-600">$999-$1,599</div>
|
||||
<div className="text-sm text-gray-500">Starting price</div>
|
||||
</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">
|
||||
<div>
|
||||
<h4 className="font-semibold mb-4 text-blue-600">Quality Assurance</h4>
|
||||
<ul className="space-y-3 text-gray-700">
|
||||
<li className="flex items-center">
|
||||
<CheckCircle className="w-5 h-5 text-green-600 mr-2 flex-shrink-0" />
|
||||
Enterprise-grade components built to last
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<CheckCircle className="w-5 h-5 text-green-600 mr-2 flex-shrink-0" />
|
||||
Professional refurbishment process
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<CheckCircle className="w-5 h-5 text-green-600 mr-2 flex-shrink-0" />
|
||||
Stress tested before delivery
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<CheckCircle className="w-5 h-5 text-green-600 mr-2 flex-shrink-0" />
|
||||
Clean OS installation
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold mb-4 text-blue-600">Business Benefits</h4>
|
||||
<ul className="space-y-3 text-gray-700">
|
||||
<li className="flex items-center">
|
||||
<CheckCircle className="w-5 h-5 text-green-600 mr-2 flex-shrink-0" />
|
||||
Identical performance to new systems
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<CheckCircle className="w-5 h-5 text-green-600 mr-2 flex-shrink-0" />
|
||||
Standard business software compatibility
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<CheckCircle className="w-5 h-5 text-green-600 mr-2 flex-shrink-0" />
|
||||
Environmentally responsible choice
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<CheckCircle className="w-5 h-5 text-green-600 mr-2 flex-shrink-0" />
|
||||
Bulk pricing for multiple units
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Installation & Support */}
|
||||
<section className="py-16">
|
||||
<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>
|
||||
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<CheckCircle className="w-8 h-8 text-blue-600" />
|
||||
</div>
|
||||
<CardTitle className="text-lg">1. Selection</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<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">
|
||||
<Cpu className="w-8 h-8 text-blue-600" />
|
||||
</div>
|
||||
<CardTitle className="text-lg">2. Configuration</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<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">
|
||||
<Truck className="w-8 h-8 text-blue-600" />
|
||||
</div>
|
||||
<CardTitle className="text-lg">3. Deployment</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<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">
|
||||
<Shield className="w-8 h-8 text-blue-600" />
|
||||
</div>
|
||||
<CardTitle className="text-lg">4. Support</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm">Ongoing maintenance, updates, and technical support throughout the warranty period.</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Local Expertise */}
|
||||
<section className="py-16 bg-gray-50">
|
||||
<div className="container mx-auto px-4">
|
||||
<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.
|
||||
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>
|
||||
<div className="text-gray-600">Systems Deployed</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-4xl font-bold text-blue-600 mb-2">98%</div>
|
||||
<div className="text-gray-600">Client Satisfaction</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-4xl font-bold text-blue-600 mb-2">25+</div>
|
||||
<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
|
||||
hardware solutions with local pickup, delivery, and installation services.
|
||||
</p>
|
||||
<div className="flex flex-wrap justify-center gap-4">
|
||||
<Badge variant="secondary" className="text-lg py-2 px-4">Corpus Christi</Badge>
|
||||
<Badge variant="secondary" className="text-lg py-2 px-4">Portland</Badge>
|
||||
<Badge variant="secondary" className="text-lg py-2 px-4">Rockport</Badge>
|
||||
<Badge variant="secondary" className="text-lg py-2 px-4">Aransas Pass</Badge>
|
||||
<Badge variant="secondary" className="text-lg py-2 px-4">Kingsville</Badge>
|
||||
<Badge variant="secondary" className="text-lg py-2 px-4">Port Aransas</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className="py-16 bg-gray-900 text-white">
|
||||
<div className="container mx-auto px-4">
|
||||
<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.
|
||||
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" />
|
||||
Get Hardware Quote
|
||||
</Button>
|
||||
<Button size="lg" variant="outline" className="text-gray-900 border-white hover:bg-white">
|
||||
Call (361) 765-8400
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<p className="text-gray-200">
|
||||
Free consultation • Local delivery • Professional installation • 12-month warranty
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default DesktopHardware;
|
||||
|
|
@ -0,0 +1,469 @@
|
|||
import { useEffect } from 'react';
|
||||
import Navigation from '@/components/Navigation';
|
||||
import Footer from '@/components/Footer';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { HardDrive, Cloud, Shield, CheckCircle, Database, Server, Lock, Archive } from 'lucide-react';
|
||||
|
||||
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.');
|
||||
}
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen">
|
||||
<Navigation />
|
||||
<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">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<Badge className="mb-4 bg-blue-700 text-white">
|
||||
<Database className="w-4 h-4 mr-2" />
|
||||
DATA STORAGE EXPERTS
|
||||
</Badge>
|
||||
<h1 className="text-4xl md:text-6xl font-bold mb-6">
|
||||
Network Attached Storage Solutions
|
||||
</h1>
|
||||
<p className="text-xl md:text-2xl mb-8 text-blue-100">
|
||||
Secure, scalable backup and data storage for Corpus Christi SMBs
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<Button size="lg" className="bg-orange-600 hover:bg-orange-700 text-white">
|
||||
<HardDrive className="w-5 h-5 mr-2" />
|
||||
Get NAS Setup
|
||||
</Button>
|
||||
<Button size="lg" variant="outline" className="text-blue-900 border-white hover:bg-white">
|
||||
Data Recovery Help
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* NAS Benefits */}
|
||||
<section className="py-16">
|
||||
<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>
|
||||
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4">
|
||||
<Archive className="w-8 h-8 text-blue-600" />
|
||||
</div>
|
||||
<CardTitle>Automated Backup Solutions</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-gray-600 mb-4">Never lose business data again with automated, scheduled backups of all critical files and systems.</p>
|
||||
<ul className="space-y-2 text-sm text-gray-700">
|
||||
<li>• Real-time file synchronization</li>
|
||||
<li>• Scheduled system backups</li>
|
||||
<li>• Version control and history</li>
|
||||
<li>• Email backup notifications</li>
|
||||
<li>• QuickBooks data protection</li>
|
||||
<li>• Cross-platform compatibility</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4">
|
||||
<Server className="w-8 h-8 text-blue-600" />
|
||||
</div>
|
||||
<CardTitle>Centralized File Storage</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-gray-600 mb-4">Organize all business files in one secure, accessible location with user permissions and collaboration features.</p>
|
||||
<ul className="space-y-2 text-sm text-gray-700">
|
||||
<li>• Central document repository</li>
|
||||
<li>• User access controls</li>
|
||||
<li>• Remote file access</li>
|
||||
<li>• Mobile device sync</li>
|
||||
<li>• Team collaboration tools</li>
|
||||
<li>• File sharing with clients</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4">
|
||||
<Shield className="w-8 h-8 text-blue-600" />
|
||||
</div>
|
||||
<CardTitle>Enterprise-Grade Security</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-gray-600 mb-4">Military-grade encryption and security features keep your sensitive business data protected.</p>
|
||||
<ul className="space-y-2 text-sm text-gray-700">
|
||||
<li>• AES 256-bit encryption</li>
|
||||
<li>• Two-factor authentication</li>
|
||||
<li>• RAID redundancy options</li>
|
||||
<li>• Antivirus scanning</li>
|
||||
<li>• Activity logging</li>
|
||||
<li>• Network security integration</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4">
|
||||
<Cloud className="w-8 h-8 text-blue-600" />
|
||||
</div>
|
||||
<CardTitle>Business Continuity</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-gray-600 mb-4">Ensure your business keeps running even during hardware failures, disasters, or data corruption.</p>
|
||||
<ul className="space-y-2 text-sm text-gray-700">
|
||||
<li>• Instant file recovery</li>
|
||||
<li>• Disaster recovery planning</li>
|
||||
<li>• Hot-swap drive replacement</li>
|
||||
<li>• Off-site backup replication</li>
|
||||
<li>• 24/7 monitoring alerts</li>
|
||||
<li>• Business impact minimization</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* NAS Solutions */}
|
||||
<section className="py-16 bg-gray-50">
|
||||
<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>
|
||||
<p className="text-gray-600 mb-4">Perfect for small businesses with basic backup and file sharing needs.</p>
|
||||
<ul className="space-y-2 text-sm text-gray-700 mb-4">
|
||||
<li>• 2-bay NAS system</li>
|
||||
<li>• 4TB total storage (RAID 1)</li>
|
||||
<li>• Automated daily backups</li>
|
||||
<li>• Mobile access apps</li>
|
||||
<li>• Basic user management</li>
|
||||
<li>• 12-month warranty</li>
|
||||
</ul>
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold text-blue-600">$899</div>
|
||||
<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>
|
||||
<ul className="space-y-2 text-sm text-gray-700 mb-4">
|
||||
<li>• 4-bay NAS system</li>
|
||||
<li>• 12TB total storage (RAID 5)</li>
|
||||
<li>• Continuous data protection</li>
|
||||
<li>• Advanced user permissions</li>
|
||||
<li>• Cloud sync integration</li>
|
||||
<li>• 24-month warranty</li>
|
||||
</ul>
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold text-orange-600">$1,899</div>
|
||||
<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>
|
||||
<ul className="space-y-2 text-sm text-gray-700 mb-4">
|
||||
<li>• 8-bay NAS system</li>
|
||||
<li>• 32TB+ storage (RAID 6)</li>
|
||||
<li>• Real-time replication</li>
|
||||
<li>• Hot-swappable drives</li>
|
||||
<li>• 10GbE network connectivity</li>
|
||||
<li>• 36-month warranty</li>
|
||||
</ul>
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold text-purple-600">$3,999+</div>
|
||||
<div className="text-sm text-gray-500">Custom config</div>
|
||||
</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">
|
||||
<div>
|
||||
<h4 className="font-semibold mb-4 text-blue-600">Cost Advantages</h4>
|
||||
<ul className="space-y-3 text-gray-700">
|
||||
<li className="flex items-center">
|
||||
<CheckCircle className="w-5 h-5 text-green-600 mr-2 flex-shrink-0" />
|
||||
No monthly cloud storage fees
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<CheckCircle className="w-5 h-5 text-green-600 mr-2 flex-shrink-0" />
|
||||
One-time investment vs ongoing costs
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<CheckCircle className="w-5 h-5 text-green-600 mr-2 flex-shrink-0" />
|
||||
Unlimited storage capacity
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<CheckCircle className="w-5 h-5 text-green-600 mr-2 flex-shrink-0" />
|
||||
No bandwidth limitations
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold mb-4 text-blue-600">Control & Performance</h4>
|
||||
<ul className="space-y-3 text-gray-700">
|
||||
<li className="flex items-center">
|
||||
<CheckCircle className="w-5 h-5 text-green-600 mr-2 flex-shrink-0" />
|
||||
Complete data control
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<CheckCircle className="w-5 h-5 text-green-600 mr-2 flex-shrink-0" />
|
||||
Faster local network access
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<CheckCircle className="w-5 h-5 text-green-600 mr-2 flex-shrink-0" />
|
||||
Custom security policies
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<CheckCircle className="w-5 h-5 text-green-600 mr-2 flex-shrink-0" />
|
||||
Works without internet
|
||||
</li>
|
||||
</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">
|
||||
<div>
|
||||
<div className="font-semibold mb-2">Cloud Storage (5 years):</div>
|
||||
<div>1TB × $10/month × 60 months = <span className="text-red-600 font-bold">$3,600</span></div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-semibold mb-2">NAS Solution (5 years):</div>
|
||||
<div>Professional NAS setup = <span className="text-green-600 font-bold">$1,899</span></div>
|
||||
<div className="text-green-600 font-bold mt-2">Save $1,700+ over 5 years</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Implementation Process */}
|
||||
<section className="py-16">
|
||||
<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>
|
||||
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<CheckCircle className="w-8 h-8 text-blue-600" />
|
||||
</div>
|
||||
<CardTitle className="text-lg">1. Assessment</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<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">
|
||||
<Database className="w-8 h-8 text-blue-600" />
|
||||
</div>
|
||||
<CardTitle className="text-lg">2. Configuration</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<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">
|
||||
<Archive className="w-8 h-8 text-blue-600" />
|
||||
</div>
|
||||
<CardTitle className="text-lg">3. Migration</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<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">
|
||||
<Shield className="w-8 h-8 text-blue-600" />
|
||||
</div>
|
||||
<CardTitle className="text-lg">4. Training</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm">Train your team on accessing files, managing backups, and recovery procedures.</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Data Recovery Services */}
|
||||
<section className="py-16 bg-red-50">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<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
|
||||
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>
|
||||
<ul className="space-y-2 text-gray-700">
|
||||
<li>• Failed hard drives and SSDs</li>
|
||||
<li>• Corrupted QuickBooks files</li>
|
||||
<li>• Deleted business documents</li>
|
||||
<li>• Email archives (Outlook/Exchange)</li>
|
||||
<li>• Database files (SQL Server, Access)</li>
|
||||
<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">
|
||||
<li>• Free evaluation and diagnosis</li>
|
||||
<li>• No recovery, no charge policy</li>
|
||||
<li>• Clean room facility available</li>
|
||||
<li>• Emergency 24-hour service</li>
|
||||
<li>• Secure data handling protocols</li>
|
||||
<li>• Backup setup to prevent recurrence</li>
|
||||
</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" />
|
||||
Emergency Data Recovery: (361) 765-8400
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Local Expertise */}
|
||||
<section className="py-16">
|
||||
<div className="container mx-auto px-4">
|
||||
<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.
|
||||
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>
|
||||
<div className="text-gray-600">NAS Systems Deployed</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-4xl font-bold text-blue-600 mb-2">99.9%</div>
|
||||
<div className="text-gray-600">Data Recovery Success</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-4xl font-bold text-blue-600 mb-2">Zero</div>
|
||||
<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
|
||||
data storage and backup solutions with local support and maintenance.
|
||||
</p>
|
||||
<div className="flex flex-wrap justify-center gap-4">
|
||||
<Badge variant="secondary" className="text-lg py-2 px-4">Corpus Christi</Badge>
|
||||
<Badge variant="secondary" className="text-lg py-2 px-4">Portland</Badge>
|
||||
<Badge variant="secondary" className="text-lg py-2 px-4">Rockport</Badge>
|
||||
<Badge variant="secondary" className="text-lg py-2 px-4">Aransas Pass</Badge>
|
||||
<Badge variant="secondary" className="text-lg py-2 px-4">Kingsville</Badge>
|
||||
<Badge variant="secondary" className="text-lg py-2 px-4">Port Aransas</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className="py-16 bg-blue-900 text-white">
|
||||
<div className="container mx-auto px-4">
|
||||
<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.
|
||||
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" />
|
||||
Schedule NAS Installation
|
||||
</Button>
|
||||
<Button size="lg" variant="outline" className="text-blue-900 border-white hover:bg-white">
|
||||
Call (361) 765-8400
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<p className="text-blue-200">
|
||||
Free consultation • Professional installation • 24/7 monitoring • Local support
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default NetworkAttachedStorage;
|
||||
|
|
@ -0,0 +1,453 @@
|
|||
import { useEffect } from 'react';
|
||||
import Navigation from '@/components/Navigation';
|
||||
import Footer from '@/components/Footer';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Network, Router, Shield, CheckCircle, Users, Monitor, Lock, Search } from 'lucide-react';
|
||||
|
||||
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.');
|
||||
}
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen">
|
||||
<Navigation />
|
||||
<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">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<Badge className="mb-4 bg-teal-700 text-white">
|
||||
<Network className="w-4 h-4 mr-2" />
|
||||
NETWORK SPECIALISTS
|
||||
</Badge>
|
||||
<h1 className="text-4xl md:text-6xl font-bold mb-6">
|
||||
Network Infrastructure & Support
|
||||
</h1>
|
||||
<p className="text-xl md:text-2xl mb-8 text-teal-100">
|
||||
Secure, scalable network solutions for Corpus Christi SMBs
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<Button size="lg" className="bg-orange-600 hover:bg-orange-700 text-white">
|
||||
<Router className="w-5 h-5 mr-2" />
|
||||
Network Assessment
|
||||
</Button>
|
||||
<Button size="lg" variant="outline" className="text-teal-900 border-white hover:bg-white">
|
||||
Emergency Support
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Network Services */}
|
||||
<section className="py-16">
|
||||
<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>
|
||||
<div className="w-16 h-16 bg-teal-100 rounded-full flex items-center justify-center mb-4">
|
||||
<Network className="w-8 h-8 text-teal-600" />
|
||||
</div>
|
||||
<CardTitle>Network Design & Setup</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-gray-600 mb-4">Custom network architecture designed for your business requirements, growth plans, and security needs.</p>
|
||||
<ul className="space-y-2 text-sm text-gray-700">
|
||||
<li>• LAN/WAN design and implementation</li>
|
||||
<li>• Wired and wireless infrastructure</li>
|
||||
<li>• Network topology optimization</li>
|
||||
<li>• Bandwidth planning and QoS</li>
|
||||
<li>• Scalable architecture design</li>
|
||||
<li>• Documentation and diagrams</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="w-16 h-16 bg-teal-100 rounded-full flex items-center justify-center mb-4">
|
||||
<Router className="w-8 h-8 text-teal-600" />
|
||||
</div>
|
||||
<CardTitle>Router & Switch Configuration</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-gray-600 mb-4">Professional setup and configuration of business-grade networking equipment for optimal performance.</p>
|
||||
<ul className="space-y-2 text-sm text-gray-700">
|
||||
<li>• Enterprise router configuration</li>
|
||||
<li>• Managed switch setup</li>
|
||||
<li>• VLAN implementation</li>
|
||||
<li>• Firewall rule configuration</li>
|
||||
<li>• Port security and access control</li>
|
||||
<li>• Performance monitoring setup</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="w-16 h-16 bg-teal-100 rounded-full flex items-center justify-center mb-4">
|
||||
<Shield className="w-8 h-8 text-teal-600" />
|
||||
</div>
|
||||
<CardTitle>Network Security</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-gray-600 mb-4">Multi-layered security implementation to protect your business data and network infrastructure.</p>
|
||||
<ul className="space-y-2 text-sm text-gray-700">
|
||||
<li>• Firewall deployment & management</li>
|
||||
<li>• Intrusion detection systems</li>
|
||||
<li>• Network access control (NAC)</li>
|
||||
<li>• WiFi security (WPA3/Enterprise)</li>
|
||||
<li>• Network segmentation</li>
|
||||
<li>• Security auditing and testing</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="w-16 h-16 bg-teal-100 rounded-full flex items-center justify-center mb-4">
|
||||
<Search className="w-8 h-8 text-teal-600" />
|
||||
</div>
|
||||
<CardTitle>IT Audits & Assessment</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-gray-600 mb-4">Comprehensive evaluation of your current IT infrastructure with actionable recommendations for improvement.</p>
|
||||
<ul className="space-y-2 text-sm text-gray-700">
|
||||
<li>• Network performance analysis</li>
|
||||
<li>• Security vulnerability assessment</li>
|
||||
<li>• Infrastructure inventory audit</li>
|
||||
<li>• Compliance evaluation</li>
|
||||
<li>• Disaster recovery assessment</li>
|
||||
<li>• IT budget planning support</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Network Solutions */}
|
||||
<section className="py-16 bg-gray-50">
|
||||
<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>
|
||||
<p className="text-gray-600 mb-4">Essential network setup for small businesses with 5-15 employees.</p>
|
||||
<ul className="space-y-2 text-sm text-gray-700 mb-4">
|
||||
<li>• Business router & switch</li>
|
||||
<li>• Basic firewall protection</li>
|
||||
<li>• WiFi access point</li>
|
||||
<li>• Network printer setup</li>
|
||||
<li>• Basic monitoring</li>
|
||||
<li>• 6-month support</li>
|
||||
</ul>
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold text-teal-600">$1,299</div>
|
||||
<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>
|
||||
<ul className="space-y-2 text-sm text-gray-700 mb-4">
|
||||
<li>• Managed switches & routers</li>
|
||||
<li>• Advanced firewall (UTM)</li>
|
||||
<li>• Multiple WiFi access points</li>
|
||||
<li>• VLAN segmentation</li>
|
||||
<li>• Network monitoring & alerts</li>
|
||||
<li>• 12-month support</li>
|
||||
</ul>
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold text-orange-600">$2,899</div>
|
||||
<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>
|
||||
<ul className="space-y-2 text-sm text-gray-700 mb-4">
|
||||
<li>• Enterprise-grade equipment</li>
|
||||
<li>• Redundant internet connections</li>
|
||||
<li>• Advanced security stack</li>
|
||||
<li>• Guest network isolation</li>
|
||||
<li>• 24/7 monitoring & support</li>
|
||||
<li>• Annual security audit</li>
|
||||
</ul>
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold text-purple-600">$5,499+</div>
|
||||
<div className="text-sm text-gray-500">Custom quote</div>
|
||||
</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">
|
||||
<div>
|
||||
<h4 className="font-semibold mb-4 text-teal-600">Performance Improvements</h4>
|
||||
<ul className="space-y-3 text-gray-700">
|
||||
<li className="flex items-center">
|
||||
<CheckCircle className="w-5 h-5 text-green-600 mr-2 flex-shrink-0" />
|
||||
10x faster file transfers within office
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<CheckCircle className="w-5 h-5 text-green-600 mr-2 flex-shrink-0" />
|
||||
Reliable internet connectivity
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<CheckCircle className="w-5 h-5 text-green-600 mr-2 flex-shrink-0" />
|
||||
Seamless video conferencing
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<CheckCircle className="w-5 h-5 text-green-600 mr-2 flex-shrink-0" />
|
||||
Reduced network downtime
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold mb-4 text-teal-600">Security & Management</h4>
|
||||
<ul className="space-y-3 text-gray-700">
|
||||
<li className="flex items-center">
|
||||
<CheckCircle className="w-5 h-5 text-green-600 mr-2 flex-shrink-0" />
|
||||
Advanced threat protection
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<CheckCircle className="w-5 h-5 text-green-600 mr-2 flex-shrink-0" />
|
||||
Centralized network management
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<CheckCircle className="w-5 h-5 text-green-600 mr-2 flex-shrink-0" />
|
||||
Detailed usage reporting
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<CheckCircle className="w-5 h-5 text-green-600 mr-2 flex-shrink-0" />
|
||||
Remote monitoring & support
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Implementation Process */}
|
||||
<section className="py-16">
|
||||
<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>
|
||||
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<Search className="w-8 h-8 text-blue-600" />
|
||||
</div>
|
||||
<CardTitle className="text-lg">1. Assessment</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<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">
|
||||
<Monitor className="w-8 h-8 text-blue-600" />
|
||||
</div>
|
||||
<CardTitle className="text-lg">2. Design</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<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">
|
||||
<Network className="w-8 h-8 text-blue-600" />
|
||||
</div>
|
||||
<CardTitle className="text-lg">3. Implementation</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<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">
|
||||
<Users className="w-8 h-8 text-blue-600" />
|
||||
</div>
|
||||
<CardTitle className="text-lg">4. Support</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm">Ongoing monitoring, maintenance, and user training for optimal network performance.</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Common Network Issues */}
|
||||
<section className="py-16 bg-red-50">
|
||||
<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>
|
||||
<ul className="space-y-3 text-gray-700">
|
||||
<li>• Slow internet speeds throughout office</li>
|
||||
<li>• File transfers taking forever</li>
|
||||
<li>• Video conferences constantly buffering</li>
|
||||
<li>• Network timeouts and disconnections</li>
|
||||
<li>• WiFi dead zones and weak signals</li>
|
||||
<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">
|
||||
<li>• Unauthorized network access</li>
|
||||
<li>• Outdated security configurations</li>
|
||||
<li>• Guest network not isolated</li>
|
||||
<li>• No network monitoring or alerts</li>
|
||||
<li>• Vulnerable WiFi encryption</li>
|
||||
<li>• No backup internet connection</li>
|
||||
</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
|
||||
same-day response for critical network issues affecting your business operations.
|
||||
</p>
|
||||
<Button className="bg-red-600 hover:bg-red-700 text-white">
|
||||
<Lock className="w-4 h-4 mr-2" />
|
||||
Emergency Support: (361) 765-8400
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Local Expertise */}
|
||||
<section className="py-16">
|
||||
<div className="container mx-auto px-4">
|
||||
<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.
|
||||
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>
|
||||
<div className="text-gray-600">Networks Deployed</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-4xl font-bold text-teal-600 mb-2">99.9%</div>
|
||||
<div className="text-gray-600">Uptime Achievement</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-4xl font-bold text-teal-600 mb-2">4hr</div>
|
||||
<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
|
||||
network infrastructure solutions with 24/7 monitoring and local technical support.
|
||||
</p>
|
||||
<div className="flex flex-wrap justify-center gap-4">
|
||||
<Badge variant="secondary" className="text-lg py-2 px-4">Corpus Christi</Badge>
|
||||
<Badge variant="secondary" className="text-lg py-2 px-4">Portland</Badge>
|
||||
<Badge variant="secondary" className="text-lg py-2 px-4">Rockport</Badge>
|
||||
<Badge variant="secondary" className="text-lg py-2 px-4">Aransas Pass</Badge>
|
||||
<Badge variant="secondary" className="text-lg py-2 px-4">Kingsville</Badge>
|
||||
<Badge variant="secondary" className="text-lg py-2 px-4">Port Aransas</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className="py-16 bg-teal-900 text-white">
|
||||
<div className="container mx-auto px-4">
|
||||
<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
|
||||
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" />
|
||||
Schedule Network Audit
|
||||
</Button>
|
||||
<Button size="lg" variant="outline" className="text-teal-900 border-white hover:bg-white">
|
||||
Call (361) 765-8400
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<p className="text-teal-200">
|
||||
Free network assessment • Same-day emergency support • Local experts • 24/7 monitoring
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default NetworkInfrastructure;
|
||||
|
|
@ -0,0 +1,343 @@
|
|||
import { useEffect } from 'react';
|
||||
import Navigation from '@/components/Navigation';
|
||||
import Footer from '@/components/Footer';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Zap, HardDrive, TrendingUp, CheckCircle, DollarSign, Clock, Gauge, BarChart } from 'lucide-react';
|
||||
|
||||
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.');
|
||||
}
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen">
|
||||
<Navigation />
|
||||
<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">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<Badge className="mb-4 bg-purple-700 text-white">
|
||||
<Zap className="w-4 h-4 mr-2" />
|
||||
PERFORMANCE SPECIALISTS
|
||||
</Badge>
|
||||
<h1 className="text-4xl md:text-6xl font-bold mb-6">
|
||||
SSD Upgrades & Performance Optimization
|
||||
</h1>
|
||||
<p className="text-xl md:text-2xl mb-8 text-purple-100">
|
||||
Transform slow devices into productivity powerhouses for Corpus Christi SMBs
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<Button size="lg" className="bg-orange-600 hover:bg-orange-700 text-white">
|
||||
<HardDrive className="w-5 h-5 mr-2" />
|
||||
Get Speed Upgrade
|
||||
</Button>
|
||||
<Button size="lg" variant="outline" className="text-purple-900 border-white hover:bg-white">
|
||||
Free Speed Test
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Performance Benefits */}
|
||||
<section className="py-16">
|
||||
<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>
|
||||
<div className="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-4">
|
||||
<Gauge className="w-8 h-8 text-purple-600" />
|
||||
</div>
|
||||
<CardTitle>10x Faster Boot Times</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-gray-600 mb-4">SSD upgrades reduce boot times from 2-3 minutes to under 30 seconds, getting your team productive faster.</p>
|
||||
<div className="bg-purple-50 p-4 rounded-lg">
|
||||
<div className="flex justify-between text-sm mb-2">
|
||||
<span>Traditional HDD</span>
|
||||
<span className="text-red-600">2-3 minutes</span>
|
||||
</div>
|
||||
<div className="flex justify-between text-sm">
|
||||
<span>SSD Upgrade</span>
|
||||
<span className="text-green-600">15-30 seconds</span>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-4">
|
||||
<TrendingUp className="w-8 h-8 text-purple-600" />
|
||||
</div>
|
||||
<CardTitle>Application Performance</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-gray-600 mb-4">Programs load instantly, file transfers complete in seconds, and multitasking becomes seamless.</p>
|
||||
<ul className="space-y-2 text-sm text-gray-700">
|
||||
<li>• Excel/Word open in 2-3 seconds</li>
|
||||
<li>• QuickBooks loads 5x faster</li>
|
||||
<li>• File copies complete instantly</li>
|
||||
<li>• No more "spinning wheel" delays</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-4">
|
||||
<DollarSign className="w-8 h-8 text-purple-600" />
|
||||
</div>
|
||||
<CardTitle>ROI for SMBs</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-gray-600 mb-4">Calculate the business impact of faster computers on your bottom line.</p>
|
||||
<div className="bg-green-50 p-4 rounded-lg">
|
||||
<div className="text-sm space-y-1">
|
||||
<div><strong>5 employees</strong> × 30 min/day saved</div>
|
||||
<div><strong>2.5 hours</strong> daily productivity gain</div>
|
||||
<div><strong>$25/hour</strong> × 2.5 hours = <span className="text-green-600 font-bold">$62.50/day ROI</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-4">
|
||||
<CheckCircle className="w-8 h-8 text-purple-600" />
|
||||
</div>
|
||||
<CardTitle>Reliability Benefits</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-gray-600 mb-4">SSDs have no moving parts, making them more durable and reliable than traditional hard drives.</p>
|
||||
<ul className="space-y-2 text-sm text-gray-700">
|
||||
<li>• 99.9% less likely to fail</li>
|
||||
<li>• Shock and vibration resistant</li>
|
||||
<li>• Lower power consumption</li>
|
||||
<li>• Silent operation</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Upgrade Process */}
|
||||
<section className="py-16 bg-gray-50">
|
||||
<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>
|
||||
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<BarChart className="w-8 h-8 text-blue-600" />
|
||||
</div>
|
||||
<CardTitle className="text-lg">1. Speed Analysis</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<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">
|
||||
<HardDrive className="w-8 h-8 text-blue-600" />
|
||||
</div>
|
||||
<CardTitle className="text-lg">2. SSD Selection</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<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">
|
||||
<Zap className="w-8 h-8 text-blue-600" />
|
||||
</div>
|
||||
<CardTitle className="text-lg">3. Data Migration</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<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">
|
||||
<CheckCircle className="w-8 h-8 text-blue-600" />
|
||||
</div>
|
||||
<CardTitle className="text-lg">4. Optimization</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm">System tuning and performance validation to maximize your upgrade investment.</p>
|
||||
</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">
|
||||
<div className="border-2 border-gray-200 p-6 rounded-lg">
|
||||
<h4 className="font-bold text-lg mb-4 text-purple-600">Essential</h4>
|
||||
<ul className="space-y-2 text-sm mb-4">
|
||||
<li>• 256GB SSD upgrade</li>
|
||||
<li>• Data migration</li>
|
||||
<li>• Basic optimization</li>
|
||||
<li>• 1-year warranty</li>
|
||||
</ul>
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold">$199</div>
|
||||
<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">
|
||||
<li>• 512GB SSD upgrade</li>
|
||||
<li>• Complete data migration</li>
|
||||
<li>• Advanced optimization</li>
|
||||
<li>• RAM upgrade (if needed)</li>
|
||||
<li>• 2-year warranty</li>
|
||||
</ul>
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold">$349</div>
|
||||
<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">
|
||||
<li>• 1TB SSD upgrade</li>
|
||||
<li>• Full system migration</li>
|
||||
<li>• Premium optimization</li>
|
||||
<li>• Memory & other upgrades</li>
|
||||
<li>• 3-year warranty</li>
|
||||
<li>• Priority support</li>
|
||||
</ul>
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold">$549</div>
|
||||
<div className="text-sm text-gray-600">per device</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Local Expertise */}
|
||||
<section className="py-16">
|
||||
<div className="container mx-auto px-4">
|
||||
<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.
|
||||
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>
|
||||
<div className="text-gray-600">Devices Upgraded</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-4xl font-bold text-purple-600 mb-2">95%</div>
|
||||
<div className="text-gray-600">Performance Improvement</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-4xl font-bold text-purple-600 mb-2">48hr</div>
|
||||
<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
|
||||
throughout the Corpus Christi area.
|
||||
</p>
|
||||
<div className="flex flex-wrap justify-center gap-4">
|
||||
<Badge variant="secondary" className="text-lg py-2 px-4">Corpus Christi</Badge>
|
||||
<Badge variant="secondary" className="text-lg py-2 px-4">Portland</Badge>
|
||||
<Badge variant="secondary" className="text-lg py-2 px-4">Rockport</Badge>
|
||||
<Badge variant="secondary" className="text-lg py-2 px-4">Aransas Pass</Badge>
|
||||
<Badge variant="secondary" className="text-lg py-2 px-4">Kingsville</Badge>
|
||||
<Badge variant="secondary" className="text-lg py-2 px-4">Port Aransas</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className="py-16 bg-purple-900 text-white">
|
||||
<div className="container mx-auto px-4">
|
||||
<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
|
||||
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" />
|
||||
Schedule Upgrade Today
|
||||
</Button>
|
||||
<Button size="lg" variant="outline" className="text-purple-900 border-white hover:bg-white">
|
||||
Call (361) 765-8400
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<p className="text-purple-200">
|
||||
Free speed analysis • Same-day service • Local pickup & delivery
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PerformanceUpgrades;
|
||||
|
|
@ -0,0 +1,391 @@
|
|||
import { useEffect } from 'react';
|
||||
import Navigation from '@/components/Navigation';
|
||||
import Footer from '@/components/Footer';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Printer, Scan, Network, CheckCircle, Wrench, Clock, Settings, Users } from 'lucide-react';
|
||||
|
||||
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.');
|
||||
}
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen">
|
||||
<Navigation />
|
||||
<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">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<Badge className="mb-4 bg-indigo-700 text-white">
|
||||
<Printer className="w-4 h-4 mr-2" />
|
||||
DEVICE SETUP EXPERTS
|
||||
</Badge>
|
||||
<h1 className="text-4xl md:text-6xl font-bold mb-6">
|
||||
Professional Printer & Scanner Installation
|
||||
</h1>
|
||||
<p className="text-xl md:text-2xl mb-8 text-indigo-100">
|
||||
Hassle-free office device setup for Corpus Christi businesses
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<Button size="lg" className="bg-orange-600 hover:bg-orange-700 text-white">
|
||||
<Settings className="w-5 h-5 mr-2" />
|
||||
Schedule Installation
|
||||
</Button>
|
||||
<Button size="lg" variant="outline" className="text-indigo-900 border-white hover:bg-white">
|
||||
Device Troubleshooting
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Service Benefits */}
|
||||
<section className="py-16">
|
||||
<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>
|
||||
<div className="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mb-4">
|
||||
<Printer className="w-8 h-8 text-indigo-600" />
|
||||
</div>
|
||||
<CardTitle>Complete Printer Setup</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-gray-600 mb-4">From basic inkjet to enterprise multifunction devices, we handle every aspect of printer installation and optimization.</p>
|
||||
<ul className="space-y-2 text-sm text-gray-700">
|
||||
<li>• Network printer configuration</li>
|
||||
<li>• Driver installation & updates</li>
|
||||
<li>• Print queue optimization</li>
|
||||
<li>• Mobile printing setup</li>
|
||||
<li>• Wireless connectivity</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mb-4">
|
||||
<Scan className="w-8 h-8 text-indigo-600" />
|
||||
</div>
|
||||
<CardTitle>Scanner Integration</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-gray-600 mb-4">Seamless scanner setup with document management integration for efficient digital workflows.</p>
|
||||
<ul className="space-y-2 text-sm text-gray-700">
|
||||
<li>• Flatbed & document scanner setup</li>
|
||||
<li>• OCR software configuration</li>
|
||||
<li>• Cloud storage integration</li>
|
||||
<li>• Batch scanning automation</li>
|
||||
<li>• Multi-format output setup</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mb-4">
|
||||
<Network className="w-8 h-8 text-indigo-600" />
|
||||
</div>
|
||||
<CardTitle>Network Configuration</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-gray-600 mb-4">Professional network setup ensures all devices work seamlessly across your office infrastructure.</p>
|
||||
<ul className="space-y-2 text-sm text-gray-700">
|
||||
<li>• Shared printer access</li>
|
||||
<li>• Security configuration</li>
|
||||
<li>• User permission setup</li>
|
||||
<li>• Print server integration</li>
|
||||
<li>• Remote printing capability</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mb-4">
|
||||
<Wrench className="w-8 h-8 text-indigo-600" />
|
||||
</div>
|
||||
<CardTitle>Ongoing Support</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-gray-600 mb-4">Comprehensive troubleshooting and maintenance to keep your devices running smoothly.</p>
|
||||
<ul className="space-y-2 text-sm text-gray-700">
|
||||
<li>• Paper jam resolution</li>
|
||||
<li>• Print quality optimization</li>
|
||||
<li>• Driver conflict resolution</li>
|
||||
<li>• Toner/ink replacement</li>
|
||||
<li>• Preventive maintenance</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Installation Process */}
|
||||
<section className="py-16 bg-gray-50">
|
||||
<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>
|
||||
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<CheckCircle className="w-8 h-8 text-blue-600" />
|
||||
</div>
|
||||
<CardTitle className="text-lg">1. Assessment</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<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">
|
||||
<Settings className="w-8 h-8 text-blue-600" />
|
||||
</div>
|
||||
<CardTitle className="text-lg">2. Configuration</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<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">
|
||||
<Users className="w-8 h-8 text-blue-600" />
|
||||
</div>
|
||||
<CardTitle className="text-lg">3. User Setup</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<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">
|
||||
<CheckCircle className="w-8 h-8 text-blue-600" />
|
||||
</div>
|
||||
<CardTitle className="text-lg">4. Testing</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm">Comprehensive testing and documentation of all functions and features.</p>
|
||||
</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">
|
||||
<div>
|
||||
<h4 className="font-semibold mb-4 text-indigo-600">Printer Problems</h4>
|
||||
<ul className="space-y-3 text-gray-700">
|
||||
<li className="flex items-center">
|
||||
<CheckCircle className="w-5 h-5 text-green-600 mr-2 flex-shrink-0" />
|
||||
Won't connect to network
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<CheckCircle className="w-5 h-5 text-green-600 mr-2 flex-shrink-0" />
|
||||
Poor print quality
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<CheckCircle className="w-5 h-5 text-green-600 mr-2 flex-shrink-0" />
|
||||
Driver conflicts
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<CheckCircle className="w-5 h-5 text-green-600 mr-2 flex-shrink-0" />
|
||||
Frequent paper jams
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<CheckCircle className="w-5 h-5 text-green-600 mr-2 flex-shrink-0" />
|
||||
Mobile printing issues
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold mb-4 text-indigo-600">Scanner Challenges</h4>
|
||||
<ul className="space-y-3 text-gray-700">
|
||||
<li className="flex items-center">
|
||||
<CheckCircle className="w-5 h-5 text-green-600 mr-2 flex-shrink-0" />
|
||||
Software not recognizing device
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<CheckCircle className="w-5 h-5 text-green-600 mr-2 flex-shrink-0" />
|
||||
Poor scan quality
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<CheckCircle className="w-5 h-5 text-green-600 mr-2 flex-shrink-0" />
|
||||
Document feeder problems
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<CheckCircle className="w-5 h-5 text-green-600 mr-2 flex-shrink-0" />
|
||||
File format issues
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<CheckCircle className="w-5 h-5 text-green-600 mr-2 flex-shrink-0" />
|
||||
Network scanning setup
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Device Compatibility */}
|
||||
<section className="py-16">
|
||||
<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>
|
||||
<div className="space-y-2 text-gray-700">
|
||||
<div>HP • Canon • Epson</div>
|
||||
<div>Brother • Lexmark • Xerox</div>
|
||||
<div>Samsung • Ricoh • Dell</div>
|
||||
<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">
|
||||
<div>Flatbed Scanners</div>
|
||||
<div>Document Feeders</div>
|
||||
<div>All-in-One Devices</div>
|
||||
<div>High-Speed Scanners</div>
|
||||
<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">
|
||||
<div>USB • Ethernet</div>
|
||||
<div>Wi-Fi • Bluetooth</div>
|
||||
<div>Network Shared</div>
|
||||
<div>Cloud Printing</div>
|
||||
<div>Mobile Apps</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Local Expertise */}
|
||||
<section className="py-16 bg-indigo-50">
|
||||
<div className="container mx-auto px-4">
|
||||
<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.
|
||||
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>
|
||||
<div className="text-gray-600">Devices Installed</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-4xl font-bold text-indigo-600 mb-2">Same-Day</div>
|
||||
<div className="text-gray-600">Service Available</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-4xl font-bold text-indigo-600 mb-2">24/7</div>
|
||||
<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.
|
||||
We bring the expertise to your location.
|
||||
</p>
|
||||
<div className="flex flex-wrap justify-center gap-4">
|
||||
<Badge variant="secondary" className="text-lg py-2 px-4">Corpus Christi</Badge>
|
||||
<Badge variant="secondary" className="text-lg py-2 px-4">Portland</Badge>
|
||||
<Badge variant="secondary" className="text-lg py-2 px-4">Rockport</Badge>
|
||||
<Badge variant="secondary" className="text-lg py-2 px-4">Aransas Pass</Badge>
|
||||
<Badge variant="secondary" className="text-lg py-2 px-4">Kingsville</Badge>
|
||||
<Badge variant="secondary" className="text-lg py-2 px-4">Port Aransas</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className="py-16 bg-indigo-900 text-white">
|
||||
<div className="container mx-auto px-4">
|
||||
<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.
|
||||
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" />
|
||||
Schedule Installation
|
||||
</Button>
|
||||
<Button size="lg" variant="outline" className="text-indigo-900 border-white hover:bg-white">
|
||||
Call (361) 765-8400
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<p className="text-indigo-200">
|
||||
Free consultation • Same-day service • Local on-site support
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PrinterScannerInstallation;
|
||||
|
|
@ -0,0 +1,344 @@
|
|||
import { useEffect } from 'react';
|
||||
import Navigation from '@/components/Navigation';
|
||||
import Footer from '@/components/Footer';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Shield, Lock, Zap, CheckCircle, Users, Globe, Server, Smartphone } from 'lucide-react';
|
||||
|
||||
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.');
|
||||
}
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen">
|
||||
<Navigation />
|
||||
<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">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<Badge className="mb-4 bg-green-700 text-white">
|
||||
<Shield className="w-4 h-4 mr-2" />
|
||||
WIREGUARD VPN SPECIALISTS
|
||||
</Badge>
|
||||
<h1 className="text-4xl md:text-6xl font-bold mb-6">
|
||||
Secure WireGuard VPN Setup for Businesses
|
||||
</h1>
|
||||
<p className="text-xl md:text-2xl mb-8 text-green-100">
|
||||
Fast, reliable, and secure remote access for Corpus Christi SMBs
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<Button size="lg" className="bg-orange-600 hover:bg-orange-700 text-white">
|
||||
<Lock className="w-5 h-5 mr-2" />
|
||||
Get Secure VPN Setup
|
||||
</Button>
|
||||
<Button size="lg" variant="outline" className="text-green-900 border-white hover:bg-white">
|
||||
Free Consultation
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Why WireGuard */}
|
||||
<section className="py-16">
|
||||
<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>
|
||||
<div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-4">
|
||||
<Zap className="w-8 h-8 text-green-600" />
|
||||
</div>
|
||||
<CardTitle>Lightning Fast</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<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">
|
||||
<Shield className="w-8 h-8 text-green-600" />
|
||||
</div>
|
||||
<CardTitle>Military-Grade Security</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<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">
|
||||
<CheckCircle className="w-8 h-8 text-green-600" />
|
||||
</div>
|
||||
<CardTitle>Simple Management</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<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">
|
||||
<Users className="w-8 h-8 text-green-600" />
|
||||
</div>
|
||||
<CardTitle>Remote Team Ready</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-gray-600">Perfect for hybrid work environments with cross-platform support for Windows, Mac, iOS, and Android devices.</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Benefits Section */}
|
||||
<section className="py-16 bg-gray-50">
|
||||
<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">
|
||||
<Globe className="w-10 h-10 text-blue-600" />
|
||||
</div>
|
||||
<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" />
|
||||
</div>
|
||||
<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" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold mb-2">Multi-Device Support</h3>
|
||||
<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">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="border-b-2">
|
||||
<th className="text-left p-4">Feature</th>
|
||||
<th className="text-center p-4 text-green-600">WireGuard</th>
|
||||
<th className="text-center p-4 text-gray-500">OpenVPN</th>
|
||||
<th className="text-center p-4 text-gray-500">IPSec</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr className="border-b">
|
||||
<td className="p-4 font-medium">Setup Complexity</td>
|
||||
<td className="p-4 text-center text-green-600">Simple</td>
|
||||
<td className="p-4 text-center">Complex</td>
|
||||
<td className="p-4 text-center">Very Complex</td>
|
||||
</tr>
|
||||
<tr className="border-b">
|
||||
<td className="p-4 font-medium">Performance</td>
|
||||
<td className="p-4 text-center text-green-600">Excellent</td>
|
||||
<td className="p-4 text-center">Good</td>
|
||||
<td className="p-4 text-center">Fair</td>
|
||||
</tr>
|
||||
<tr className="border-b">
|
||||
<td className="p-4 font-medium">Security</td>
|
||||
<td className="p-4 text-center text-green-600">State-of-art</td>
|
||||
<td className="p-4 text-center">Good</td>
|
||||
<td className="p-4 text-center">Good</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="p-4 font-medium">Battery Impact</td>
|
||||
<td className="p-4 text-center text-green-600">Minimal</td>
|
||||
<td className="p-4 text-center">Moderate</td>
|
||||
<td className="p-4 text-center">High</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* VPN Deployment Process */}
|
||||
<section className="py-16">
|
||||
<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>
|
||||
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<CheckCircle className="w-8 h-8 text-blue-600" />
|
||||
</div>
|
||||
<CardTitle className="text-lg">1. Assessment</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<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">
|
||||
<Server className="w-8 h-8 text-blue-600" />
|
||||
</div>
|
||||
<CardTitle className="text-lg">2. Server Setup</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<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">
|
||||
<Smartphone className="w-8 h-8 text-blue-600" />
|
||||
</div>
|
||||
<CardTitle className="text-lg">3. Client Config</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<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">
|
||||
<Shield className="w-8 h-8 text-blue-600" />
|
||||
</div>
|
||||
<CardTitle className="text-lg">4. Security Testing</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm">Comprehensive testing and employee training on secure usage.</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Local Expertise */}
|
||||
<section className="py-16 bg-green-50">
|
||||
<div className="container mx-auto px-4">
|
||||
<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.
|
||||
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>
|
||||
<ul className="text-left space-y-2 text-gray-700">
|
||||
<li>• Understand Texas compliance requirements</li>
|
||||
<li>• Same-day on-site support available</li>
|
||||
<li>• 25+ years serving Coastal Bend</li>
|
||||
<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">
|
||||
<li>• Certified WireGuard deployment</li>
|
||||
<li>• Custom configurations for SMBs</li>
|
||||
<li>• Integration with existing networks</li>
|
||||
<li>• Ongoing monitoring and support</li>
|
||||
</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">
|
||||
<Badge variant="secondary" className="text-lg py-2 px-4">Corpus Christi</Badge>
|
||||
<Badge variant="secondary" className="text-lg py-2 px-4">Portland</Badge>
|
||||
<Badge variant="secondary" className="text-lg py-2 px-4">Rockport</Badge>
|
||||
<Badge variant="secondary" className="text-lg py-2 px-4">Aransas Pass</Badge>
|
||||
<Badge variant="secondary" className="text-lg py-2 px-4">Kingsville</Badge>
|
||||
<Badge variant="secondary" className="text-lg py-2 px-4">Port Aransas</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className="py-16 bg-green-900 text-white">
|
||||
<div className="container mx-auto px-4">
|
||||
<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.
|
||||
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" />
|
||||
Get VPN Setup Quote
|
||||
</Button>
|
||||
<Button size="lg" variant="outline" className="text-green-900 border-white hover:bg-white">
|
||||
Call (361) 765-8400
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<p className="text-green-200">
|
||||
Free consultation • Same-day setup available • Local support team
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default VpnSetup;
|
||||
|
|
@ -0,0 +1,466 @@
|
|||
import { useEffect } from 'react';
|
||||
import Navigation from '@/components/Navigation';
|
||||
import Footer from '@/components/Footer';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Globe, Mail, Palette, CheckCircle, Smartphone, Search, TrendingUp, Users } from 'lucide-react';
|
||||
|
||||
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.');
|
||||
}
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen">
|
||||
<Navigation />
|
||||
<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">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<Badge className="mb-4 bg-emerald-700 text-white">
|
||||
<Globe className="w-4 h-4 mr-2" />
|
||||
WEB DESIGN SPECIALISTS
|
||||
</Badge>
|
||||
<h1 className="text-4xl md:text-6xl font-bold mb-6">
|
||||
Professional Web Services for Local Business
|
||||
</h1>
|
||||
<p className="text-xl md:text-2xl mb-8 text-emerald-100">
|
||||
Custom websites, domains, and email solutions for Corpus Christi & Coastal Bend SMBs
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<Button size="lg" className="bg-orange-600 hover:bg-orange-700 text-white">
|
||||
<Palette className="w-5 h-5 mr-2" />
|
||||
Get Website Quote
|
||||
</Button>
|
||||
<Button size="lg" variant="outline" className="text-emerald-900 border-white hover:bg-white">
|
||||
View Portfolio
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Web Services Overview */}
|
||||
<section className="py-16">
|
||||
<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>
|
||||
<div className="w-16 h-16 bg-emerald-100 rounded-full flex items-center justify-center mb-4">
|
||||
<Palette className="w-8 h-8 text-emerald-600" />
|
||||
</div>
|
||||
<CardTitle>Custom Website Design</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-gray-600 mb-4">Professional, mobile-responsive websites designed specifically for your business and local market.</p>
|
||||
<ul className="space-y-2 text-sm text-gray-700">
|
||||
<li>• Mobile-first responsive design</li>
|
||||
<li>• Local SEO optimization</li>
|
||||
<li>• Content management systems</li>
|
||||
<li>• E-commerce integration</li>
|
||||
<li>• Contact forms & lead capture</li>
|
||||
<li>• Social media integration</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="w-16 h-16 bg-emerald-100 rounded-full flex items-center justify-center mb-4">
|
||||
<Globe className="w-8 h-8 text-emerald-600" />
|
||||
</div>
|
||||
<CardTitle>Domain & Hosting Services</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-gray-600 mb-4">Secure your business identity online with professional domain registration and reliable hosting services.</p>
|
||||
<ul className="space-y-2 text-sm text-gray-700">
|
||||
<li>• Domain name registration</li>
|
||||
<li>• DNS management</li>
|
||||
<li>• SSL certificates included</li>
|
||||
<li>• 99.9% uptime hosting</li>
|
||||
<li>• Daily automated backups</li>
|
||||
<li>• Local technical support</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="w-16 h-16 bg-emerald-100 rounded-full flex items-center justify-center mb-4">
|
||||
<Mail className="w-8 h-8 text-emerald-600" />
|
||||
</div>
|
||||
<CardTitle>Professional Email Solutions</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-gray-600 mb-4">Build credibility with custom business email addresses and professional communication tools.</p>
|
||||
<ul className="space-y-2 text-sm text-gray-700">
|
||||
<li>• Custom email addresses (@yourbusiness.com)</li>
|
||||
<li>• Microsoft 365 integration</li>
|
||||
<li>• Spam & virus protection</li>
|
||||
<li>• Mobile device sync</li>
|
||||
<li>• Calendar & contacts sharing</li>
|
||||
<li>• Email archiving & backup</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="w-16 h-16 bg-emerald-100 rounded-full flex items-center justify-center mb-4">
|
||||
<Search className="w-8 h-8 text-emerald-600" />
|
||||
</div>
|
||||
<CardTitle>Local SEO & Digital Marketing</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-gray-600 mb-4">Get found by local customers with targeted SEO and digital marketing strategies for the Coastal Bend.</p>
|
||||
<ul className="space-y-2 text-sm text-gray-700">
|
||||
<li>• Google My Business optimization</li>
|
||||
<li>• Local keyword targeting</li>
|
||||
<li>• Online review management</li>
|
||||
<li>• Local directory listings</li>
|
||||
<li>• Performance analytics</li>
|
||||
<li>• Monthly reporting</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Website Packages */}
|
||||
<section className="py-16 bg-gray-50">
|
||||
<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>
|
||||
<p className="text-gray-600 mb-4">Perfect for local service businesses and professional practices.</p>
|
||||
<ul className="space-y-2 text-sm text-gray-700 mb-4">
|
||||
<li>• 5-page responsive website</li>
|
||||
<li>• Mobile optimization</li>
|
||||
<li>• Contact forms</li>
|
||||
<li>• Basic SEO setup</li>
|
||||
<li>• 1 year domain & hosting</li>
|
||||
<li>• 3 months support</li>
|
||||
</ul>
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold text-emerald-600">$1,299</div>
|
||||
<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>
|
||||
<ul className="space-y-2 text-sm text-gray-700 mb-4">
|
||||
<li>• 10-page custom design</li>
|
||||
<li>• E-commerce capability</li>
|
||||
<li>• Blog/news section</li>
|
||||
<li>• Advanced SEO optimization</li>
|
||||
<li>• Social media integration</li>
|
||||
<li>• 6 months support</li>
|
||||
</ul>
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold text-orange-600">$2,499</div>
|
||||
<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>
|
||||
<ul className="space-y-2 text-sm text-gray-700 mb-4">
|
||||
<li>• Custom design & development</li>
|
||||
<li>• Advanced e-commerce</li>
|
||||
<li>• Customer portal/login</li>
|
||||
<li>• Database integration</li>
|
||||
<li>• Marketing automation</li>
|
||||
<li>• 12 months support</li>
|
||||
</ul>
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold text-purple-600">$4,999+</div>
|
||||
<div className="text-sm text-gray-500">Custom quote</div>
|
||||
</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">
|
||||
<div>
|
||||
<h4 className="font-semibold mb-4 text-emerald-600">Local Market Focus</h4>
|
||||
<ul className="space-y-3 text-gray-700">
|
||||
<li className="flex items-center">
|
||||
<CheckCircle className="w-5 h-5 text-green-600 mr-2 flex-shrink-0" />
|
||||
Corpus Christi & Coastal Bend SEO expertise
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<CheckCircle className="w-5 h-5 text-green-600 mr-2 flex-shrink-0" />
|
||||
Local keyword targeting strategies
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<CheckCircle className="w-5 h-5 text-green-600 mr-2 flex-shrink-0" />
|
||||
Understanding of local market needs
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<CheckCircle className="w-5 h-5 text-green-600 mr-2 flex-shrink-0" />
|
||||
Bilingual content capabilities
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold mb-4 text-emerald-600">Complete Support</h4>
|
||||
<ul className="space-y-3 text-gray-700">
|
||||
<li className="flex items-center">
|
||||
<CheckCircle className="w-5 h-5 text-green-600 mr-2 flex-shrink-0" />
|
||||
Local face-to-face consultations
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<CheckCircle className="w-5 h-5 text-green-600 mr-2 flex-shrink-0" />
|
||||
Ongoing maintenance & updates
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<CheckCircle className="w-5 h-5 text-green-600 mr-2 flex-shrink-0" />
|
||||
Same-day technical support
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<CheckCircle className="w-5 h-5 text-green-600 mr-2 flex-shrink-0" />
|
||||
Training on content management
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Digital Marketing Benefits */}
|
||||
<section className="py-16">
|
||||
<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">
|
||||
<Search className="w-10 h-10 text-emerald-600" />
|
||||
</div>
|
||||
<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" />
|
||||
</div>
|
||||
<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" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold mb-2">Measurable Results</h3>
|
||||
<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">
|
||||
<div className="text-center">
|
||||
<div className="text-3xl font-bold text-emerald-600 mb-2">300%</div>
|
||||
<div className="text-gray-600">Average increase in website traffic</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-3xl font-bold text-emerald-600 mb-2">85%</div>
|
||||
<div className="text-gray-600">Of clients rank on Google's first page</div>
|
||||
</div>
|
||||
</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.
|
||||
They understand the Corpus Christi market better than anyone."
|
||||
</p>
|
||||
<p className="text-emerald-600 font-semibold mt-2">— Local Business Owner</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Web Development Process */}
|
||||
<section className="py-16 bg-gray-50">
|
||||
<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>
|
||||
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<Users className="w-8 h-8 text-blue-600" />
|
||||
</div>
|
||||
<CardTitle className="text-lg">1. Discovery</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<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">
|
||||
<Palette className="w-8 h-8 text-blue-600" />
|
||||
</div>
|
||||
<CardTitle className="text-lg">2. Design</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<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">
|
||||
<Globe className="w-8 h-8 text-blue-600" />
|
||||
</div>
|
||||
<CardTitle className="text-lg">3. Development</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<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">
|
||||
<CheckCircle className="w-8 h-8 text-blue-600" />
|
||||
</div>
|
||||
<CardTitle className="text-lg">4. Launch</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm">Website launch with SEO optimization and ongoing support and maintenance.</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Local Portfolio */}
|
||||
<section className="py-16">
|
||||
<div className="container mx-auto px-4">
|
||||
<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
|
||||
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>
|
||||
<div className="text-gray-600">Websites Created</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-4xl font-bold text-emerald-600 mb-2">25+</div>
|
||||
<div className="text-gray-600">Years Experience</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-4xl font-bold text-emerald-600 mb-2">98%</div>
|
||||
<div className="text-gray-600">Client Satisfaction</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-4xl font-bold text-emerald-600 mb-2">Local</div>
|
||||
<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
|
||||
that connect local businesses with their communities and drive real results.
|
||||
</p>
|
||||
<div className="flex flex-wrap justify-center gap-4">
|
||||
<Badge variant="secondary" className="text-lg py-2 px-4">Corpus Christi</Badge>
|
||||
<Badge variant="secondary" className="text-lg py-2 px-4">Portland</Badge>
|
||||
<Badge variant="secondary" className="text-lg py-2 px-4">Rockport</Badge>
|
||||
<Badge variant="secondary" className="text-lg py-2 px-4">Aransas Pass</Badge>
|
||||
<Badge variant="secondary" className="text-lg py-2 px-4">Kingsville</Badge>
|
||||
<Badge variant="secondary" className="text-lg py-2 px-4">Port Aransas</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className="py-16 bg-emerald-900 text-white">
|
||||
<div className="container mx-auto px-4">
|
||||
<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.
|
||||
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" />
|
||||
Get Website Quote
|
||||
</Button>
|
||||
<Button size="lg" variant="outline" className="text-emerald-900 border-white hover:bg-white">
|
||||
Call (361) 765-8400
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<p className="text-emerald-200">
|
||||
Free consultation • Local market expertise • Ongoing support • Mobile-first design
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default WebServices;
|
||||
|
|
@ -0,0 +1,280 @@
|
|||
import { useEffect } from 'react';
|
||||
import Navigation from '@/components/Navigation';
|
||||
import Footer from '@/components/Footer';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
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.');
|
||||
}
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen">
|
||||
<Navigation />
|
||||
<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">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<Badge className="mb-4 bg-red-600 text-white">
|
||||
<AlertTriangle className="w-4 h-4 mr-2" />
|
||||
URGENT: DEADLINE APPROACHING
|
||||
</Badge>
|
||||
<h1 className="text-4xl md:text-6xl font-bold mb-6">
|
||||
Upgrade to Windows 11 Before the Deadline
|
||||
</h1>
|
||||
<p className="text-xl md:text-2xl mb-8 text-blue-100">
|
||||
Windows 10 support ends October 14, 2025. Secure your business now.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<Button size="lg" className="bg-orange-600 hover:bg-orange-700 text-white">
|
||||
<Clock className="w-5 h-5 mr-2" />
|
||||
Schedule Upgrade Today
|
||||
</Button>
|
||||
<Button size="lg" variant="outline" className="text-blue-900 border-white hover:bg-white">
|
||||
Free Assessment
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Critical Information */}
|
||||
<section className="py-16 bg-red-50">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<div className="bg-red-100 border-l-4 border-red-500 p-6 mb-8">
|
||||
<div className="flex items-center mb-4">
|
||||
<AlertTriangle className="w-8 h-8 text-red-600 mr-3" />
|
||||
<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.
|
||||
Your business will be vulnerable to security threats and compliance issues.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-8">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-red-600">Risks of Staying on Windows 10</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<div className="flex items-center text-red-700">
|
||||
<AlertTriangle className="w-5 h-5 mr-2" />
|
||||
Security vulnerabilities
|
||||
</div>
|
||||
<div className="flex items-center text-red-700">
|
||||
<AlertTriangle className="w-5 h-5 mr-2" />
|
||||
Compliance violations
|
||||
</div>
|
||||
<div className="flex items-center text-red-700">
|
||||
<AlertTriangle className="w-5 h-5 mr-2" />
|
||||
Software incompatibilities
|
||||
</div>
|
||||
<div className="flex items-center text-red-700">
|
||||
<AlertTriangle className="w-5 h-5 mr-2" />
|
||||
No technical support
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-green-600">Benefits of Windows 11</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<div className="flex items-center text-green-700">
|
||||
<CheckCircle className="w-5 h-5 mr-2" />
|
||||
Enhanced security features
|
||||
</div>
|
||||
<div className="flex items-center text-green-700">
|
||||
<CheckCircle className="w-5 h-5 mr-2" />
|
||||
Better performance
|
||||
</div>
|
||||
<div className="flex items-center text-green-700">
|
||||
<CheckCircle className="w-5 h-5 mr-2" />
|
||||
Modern user interface
|
||||
</div>
|
||||
<div className="flex items-center text-green-700">
|
||||
<CheckCircle className="w-5 h-5 mr-2" />
|
||||
Continued support through 2031
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Migration Process */}
|
||||
<section className="py-16">
|
||||
<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>
|
||||
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<CheckCircle className="w-8 h-8 text-blue-600" />
|
||||
</div>
|
||||
<CardTitle>1. Assessment</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<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">
|
||||
<Zap className="w-8 h-8 text-blue-600" />
|
||||
</div>
|
||||
<CardTitle>2. Planning</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<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">
|
||||
<Shield className="w-8 h-8 text-blue-600" />
|
||||
</div>
|
||||
<CardTitle>3. Migration</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p>Professional upgrade with data backup and post-migration support.</p>
|
||||
</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">
|
||||
<div>
|
||||
<h4 className="font-semibold mb-2">Security Improvements</h4>
|
||||
<ul className="space-y-2 text-gray-700">
|
||||
<li>• TPM 2.0 chip requirement</li>
|
||||
<li>• Secure Boot enabled</li>
|
||||
<li>• Windows Hello biometric authentication</li>
|
||||
<li>• Microsoft Defender improvements</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold mb-2">Performance Features</h4>
|
||||
<ul className="space-y-2 text-gray-700">
|
||||
<li>• Faster boot times</li>
|
||||
<li>• Better memory management</li>
|
||||
<li>• Improved battery life</li>
|
||||
<li>• Enhanced productivity tools</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Local Expertise */}
|
||||
<section className="py-16 bg-gray-50">
|
||||
<div className="container mx-auto px-4">
|
||||
<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.
|
||||
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>
|
||||
<div className="text-gray-600">Years Experience</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-4xl font-bold text-blue-600 mb-2">500+</div>
|
||||
<div className="text-gray-600">Businesses Served</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-4xl font-bold text-blue-600 mb-2">24/7</div>
|
||||
<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">
|
||||
<Badge variant="secondary">Corpus Christi</Badge>
|
||||
<Badge variant="secondary">Portland</Badge>
|
||||
<Badge variant="secondary">Rockport</Badge>
|
||||
<Badge variant="secondary">Aransas Pass</Badge>
|
||||
<Badge variant="secondary">Kingsville</Badge>
|
||||
<Badge variant="secondary">Port Aransas</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className="py-16 bg-blue-900 text-white">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<h2 className="text-3xl font-bold mb-6">Don't Wait Until It's Too Late</h2>
|
||||
<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" />
|
||||
Schedule Upgrade Now
|
||||
</Button>
|
||||
<Button size="lg" variant="outline" className="text-blue-900 border-white hover:bg-white">
|
||||
Call (361) 765-8400
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<p className="text-blue-200">
|
||||
Free consultation • Same-day response • Local experts
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Windows11Transition;
|
||||
Loading…
Reference in New Issue