SEO
This commit is contained in:
466
src/pages/WebServices.tsx
Normal file
466
src/pages/WebServices.tsx
Normal file
@@ -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;
|
||||
Reference in New Issue
Block a user