feat: implement programmatic SEO infrastructure with localized service pages

This commit is contained in:
AyrisAI
2026-05-16 00:55:42 +03:00
parent c5703c060d
commit d0a7205f90
5 changed files with 300 additions and 3 deletions

View File

@@ -21,8 +21,9 @@ const processSteps = [
{ icon: Zap, title: "Raporlama", desc: "Sonuçları ölçüyor ve optimize ediyoruz." }
];
export default function ServicesClient({ services: initialServices }: { services: any[] }) {
export default function ServicesClient({ services: initialServices, locations: initialLocations }: { services: any[], locations?: any[] }) {
const [services] = useState<any[]>(initialServices);
const [locations] = useState<any[]>(initialLocations || []);
const DynamicIcon = ({ name, className }: { name: string, className?: string }) => {
const IconComponent = (LucideIcons as any)[name] || Layers;
@@ -102,6 +103,39 @@ export default function ServicesClient({ services: initialServices }: { services
</div>
</section>
{/* Locations Section (pSEO Hub) */}
{locations.length > 0 && (
<section className="py-24 px-6 md:px-12 border-b border-black/10 bg-white/30">
<div className="max-w-7xl mx-auto">
<div className="mb-16">
<span className="text-[10px] tracking-[0.2em] uppercase text-black/40 block mb-4">Operasyon Bölgelerimiz</span>
<h2 className="editorial-headline text-3xl md:text-5xl text-black uppercase">Muğla'nın Her <br /><span className="text-primary">Noktasındayız.</span></h2>
</div>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-x-12 gap-y-16">
{locations.map((loc) => (
<div key={loc.id} className="space-y-6">
<h3 className="text-lg font-bold uppercase tracking-widest border-b border-black/10 pb-2">{loc.name}</h3>
<ul className="space-y-3">
{services.slice(0, 3).map((service) => (
<li key={service.id}>
<Link
href={`/services/${service.slug}/${loc.slug}`}
className="text-[11px] text-black/40 hover:text-primary transition-colors flex items-center justify-between group"
>
{loc.name} {service.title}
<ArrowRight className="w-2 h-2 opacity-0 group-hover:opacity-100 transition-all -translate-x-1 group-hover:translate-x-0" />
</Link>
</li>
))}
</ul>
</div>
))}
</div>
</div>
</section>
)}
{/* CTA Section */}
<section className="py-24 px-6 text-center">
<div className="max-w-4xl mx-auto space-y-12">