252 lines
14 KiB
TypeScript
252 lines
14 KiB
TypeScript
import React, { useEffect } from 'react';
|
|
import { motion } from 'framer-motion';
|
|
import { Link } from 'react-router-dom';
|
|
import SEO from '../../components/SEO';
|
|
import Services from '../../components/Services';
|
|
import CTA from '../../components/CTA';
|
|
import AreasWeServe from '../../components/AreasWeServe';
|
|
import { BlogPostData } from '../data/seoData';
|
|
|
|
interface BlogPostPageProps {
|
|
data: BlogPostData;
|
|
}
|
|
|
|
const BlogPostPage: React.FC<BlogPostPageProps> = ({ data }) => {
|
|
useEffect(() => {
|
|
window.scrollTo(0, 0);
|
|
}, []);
|
|
|
|
const category = data.slug.includes('corpus-christi-blog') ||
|
|
data.slug.includes('portland-tx') ||
|
|
data.slug.includes('rockport-tx') ||
|
|
data.slug.includes('aransas-pass') ||
|
|
data.slug.includes('kingsville-tx')
|
|
? 'Local Services'
|
|
: 'IT Insights';
|
|
|
|
const schema = {
|
|
"@context": "https://schema.org",
|
|
"@type": "BlogPosting",
|
|
"headline": data.h1,
|
|
"description": data.description,
|
|
"url": `https://bayareait.services/${data.slug}`,
|
|
"image": data.image ? `https://bayareait.services${data.image}` : "https://bayareait.services/logo.svg",
|
|
"publisher": {
|
|
"@type": "Organization",
|
|
"name": "Bay Area Affiliates",
|
|
"url": "https://bayareait.services"
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<SEO
|
|
title={data.title}
|
|
description={data.description}
|
|
keywords={data.keywords}
|
|
canonicalUrl={`https://bayareait.services/${data.slug}`}
|
|
schema={schema}
|
|
/>
|
|
|
|
<div className="min-h-screen bg-background-light dark:bg-background-dark relative overflow-x-hidden pt-32 pb-16">
|
|
{/* Clean Hero Section */}
|
|
<article className="max-w-4xl mx-auto px-6">
|
|
<header className="mb-12 text-center">
|
|
{/* Breadcrumbs */}
|
|
<nav className="mb-8 text-sm">
|
|
<ol className="flex items-center gap-2 text-gray-500 dark:text-gray-400 justify-center">
|
|
<li>
|
|
<Link to="/" className="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
|
|
Home
|
|
</Link>
|
|
</li>
|
|
<span className="material-symbols-outlined text-xs">chevron_right</span>
|
|
<li>
|
|
<Link to="/blog" className="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
|
|
Blog
|
|
</Link>
|
|
</li>
|
|
<span className="material-symbols-outlined text-xs">chevron_right</span>
|
|
<li className="text-gray-900 dark:text-white font-medium">{category}</li>
|
|
</ol>
|
|
</nav>
|
|
|
|
<div className="flex items-center justify-center gap-2 mb-6">
|
|
<span className="h-px w-8 bg-blue-600/30 dark:bg-blue-400/30"></span>
|
|
<span className="text-xs uppercase tracking-[0.2em] text-blue-600 dark:text-blue-400 font-bold">
|
|
{category}
|
|
</span>
|
|
<span className="h-px w-8 bg-blue-600/30 dark:bg-blue-400/30"></span>
|
|
</div>
|
|
|
|
<h1 className="font-display text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight leading-tight mb-6 text-gray-900 dark:text-white">
|
|
{data.h1}
|
|
</h1>
|
|
|
|
{/* Meta Info */}
|
|
<div className="flex items-center gap-6 text-gray-500 dark:text-gray-400 mb-10 justify-center">
|
|
<div className="flex items-center gap-2">
|
|
<span className="material-symbols-outlined text-sm">schedule</span>
|
|
<span>5 min read</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<span className="material-symbols-outlined text-sm">location_on</span>
|
|
<span>Coastal Bend business guide</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Featured Image */}
|
|
{data.image && (
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6 }}
|
|
className="rounded-3xl overflow-hidden border border-gray-100 dark:border-white/5 shadow-xl md:mb-16 mb-8 max-w-4xl mx-auto"
|
|
>
|
|
<img
|
|
src={data.image}
|
|
alt={data.h1}
|
|
loading="eager"
|
|
decoding="async"
|
|
fetchPriority="high"
|
|
className="w-full h-auto max-h-[500px] object-cover"
|
|
/>
|
|
</motion.div>
|
|
)}
|
|
</header>
|
|
|
|
{/* Main Content Section */}
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ delay: 0.2, duration: 0.6 }}
|
|
className="bg-white dark:bg-[#111] rounded-[2rem] p-8 md:p-12 lg:p-16 shadow-lg border border-gray-100 dark:border-white/5 mb-16"
|
|
>
|
|
<div className="prose prose-lg dark:prose-invert max-w-none prose-headings:font-display prose-headings:font-bold prose-h2:text-3xl prose-h2:mb-6 prose-h2:mt-12 prose-h3:text-2xl prose-h3:mt-8 prose-h3:mb-4 prose-p:leading-relaxed prose-li:leading-relaxed prose-a:text-blue-600 dark:prose-a:text-blue-400 prose-a:no-underline hover:prose-a:underline prose-img:rounded-xl prose-img:shadow-md">
|
|
<div dangerouslySetInnerHTML={{ __html: data.content }} />
|
|
</div>
|
|
</motion.div>
|
|
</article>
|
|
|
|
{/* CTA Section */}
|
|
<section className="px-6 py-16">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
className="max-w-4xl mx-auto"
|
|
>
|
|
<div className="p-10 md:p-14 bg-gradient-to-br from-blue-50 to-gray-50 dark:from-blue-950/20 dark:to-gray-900/20 rounded-[2.5rem] border border-blue-100/50 dark:border-blue-900/30 shadow-xl text-center">
|
|
<span className="material-symbols-outlined text-blue-600 dark:text-blue-400 text-5xl mb-6 block">
|
|
{category === 'Local Services' ? 'location_on' : 'insights'}
|
|
</span>
|
|
<h2 className="font-display text-3xl font-bold mb-4 text-gray-900 dark:text-white">
|
|
{category === 'Local Services'
|
|
? 'Ready to Get IT Support in Your Area?'
|
|
: 'Need Expert IT Support for Your Business?'}
|
|
</h2>
|
|
<p className="text-lg text-gray-600 dark:text-gray-400 mb-8 max-w-2xl mx-auto">
|
|
{category === 'Local Services'
|
|
? 'Contact us today to learn how we can help your business with reliable IT support and managed services.'
|
|
: 'Let us handle your IT needs so you can focus on growing your business. Contact us today to get started.'}
|
|
</p>
|
|
<Link
|
|
to="/contact"
|
|
className="inline-flex items-center gap-3 px-10 py-4 bg-blue-600 hover:bg-blue-700 text-white rounded-full font-bold text-lg transition-all hover:scale-105 shadow-xl hover:shadow-blue-500/25"
|
|
>
|
|
Get Started
|
|
<span className="material-symbols-outlined">arrow_forward</span>
|
|
</Link>
|
|
</div>
|
|
</motion.div>
|
|
</section>
|
|
|
|
{/* Related Content Grid */}
|
|
<section className="px-6 py-16">
|
|
<div className="max-w-5xl mx-auto">
|
|
<motion.h2
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
className="font-display text-4xl font-bold mb-12 text-center text-gray-900 dark:text-white"
|
|
>
|
|
Why Choose Bay Area Affiliates?
|
|
</motion.h2>
|
|
|
|
<div className="grid md:grid-cols-3 gap-8">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ delay: 0.1 }}
|
|
className="p-8 bg-white dark:bg-[#111] rounded-3xl border border-gray-100 dark:border-white/5 hover:shadow-xl transition-shadow"
|
|
>
|
|
<div className="w-14 h-14 bg-blue-50 dark:bg-blue-900/20 rounded-2xl flex items-center justify-center mb-6">
|
|
<span className="material-symbols-outlined text-blue-600 dark:text-blue-400 text-3xl">
|
|
verified_user
|
|
</span>
|
|
</div>
|
|
<h3 className="font-display text-xl font-bold mb-3 text-gray-900 dark:text-white">
|
|
Proven Expertise
|
|
</h3>
|
|
<p className="text-gray-600 dark:text-gray-400 leading-relaxed">
|
|
Years of experience serving businesses across the Coastal Bend with comprehensive IT solutions.
|
|
</p>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ delay: 0.2 }}
|
|
className="p-8 bg-white dark:bg-[#111] rounded-3xl border border-gray-100 dark:border-white/5 hover:shadow-xl transition-shadow"
|
|
>
|
|
<div className="w-14 h-14 bg-blue-50 dark:bg-blue-900/20 rounded-2xl flex items-center justify-center mb-6">
|
|
<span className="material-symbols-outlined text-blue-600 dark:text-blue-400 text-3xl">
|
|
support_agent
|
|
</span>
|
|
</div>
|
|
<h3 className="font-display text-xl font-bold mb-3 text-gray-900 dark:text-white">
|
|
24/7 Support
|
|
</h3>
|
|
<p className="text-gray-600 dark:text-gray-400 leading-relaxed">
|
|
Remote-first support and practical escalation to keep work moving when issues appear.
|
|
</p>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ delay: 0.3 }}
|
|
className="p-8 bg-white dark:bg-[#111] rounded-3xl border border-gray-100 dark:border-white/5 hover:shadow-xl transition-shadow"
|
|
>
|
|
<div className="w-14 h-14 bg-blue-50 dark:bg-blue-900/20 rounded-2xl flex items-center justify-center mb-6">
|
|
<span className="material-symbols-outlined text-blue-600 dark:text-blue-400 text-3xl">
|
|
handshake
|
|
</span>
|
|
</div>
|
|
<h3 className="font-display text-xl font-bold mb-3 text-gray-900 dark:text-white">
|
|
Local Partnership
|
|
</h3>
|
|
<p className="text-gray-600 dark:text-gray-400 leading-relaxed">
|
|
A trusted local partner who understands your community and business needs.
|
|
</p>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Services Section */}
|
|
<Services preview={true} />
|
|
|
|
{/* Areas We Serve & CTA */}
|
|
<AreasWeServe />
|
|
<CTA />
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default BlogPostPage;
|