344 lines
17 KiB
TypeScript
344 lines
17 KiB
TypeScript
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 role="main">
|
|
{/* Hero Section */}
|
|
<section className="bg-gradient-to-br from-green-900 via-green-800 to-green-600 text-white py-20">
|
|
<div className="container mx-auto px-4">
|
|
<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; |