Files
sag24-website/src/components/sections/FaqSection.tsx
striker 55f88d5227 SEO: JSON-LD, hreflang x-default, 404 page, localized OG
- FaqSection: h1/h2 based on standalone prop (fixes missing H1 on /faq)
- faq/page: FAQPage JSON-LD, hreflang x-default, OG image/url
- kontakty/page: LocalBusiness JSON-LD (address, geo, tel, openingHours), hreflang x-default, OG
- uslugi/page: geo in H1 («в Пушкино»), hreflang x-default, OG, expanded description
- [lang]/page: Organization JSON-LD, localized OG (ru_RU/en_US), x-default hreflang
- [slug]/page: localized og:title/siteName, x-default hreflang, areaServed+telephone in Service JSON-LD
- not-found.tsx: 404 page → generates 404.html for nginx error_page directive

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-16 00:56:47 +03:00

42 lines
1.7 KiB
TypeScript

'use client'
import { useState } from 'react'
import { ChevronDown } from 'lucide-react'
import type { Dictionary } from '@/lib/i18n'
function FaqItem({ q, a }: { q: string; a: string }) {
const [open, setOpen] = useState(false)
return (
<div className="border border-slate-200 rounded-xl overflow-hidden">
<button onClick={() => setOpen(!open)}
className="w-full flex items-center justify-between px-6 py-4 text-left bg-white hover:bg-slate-50 transition-colors">
<span className="font-semibold text-slate-800 pr-4">{q}</span>
<ChevronDown size={18} className={`text-slate-400 flex-shrink-0 transition-transform duration-200 ${open ? 'rotate-180' : ''}`} />
</button>
{open && (
<div className="px-6 py-4 bg-slate-50 border-t border-slate-200 text-slate-600 text-sm leading-relaxed">{a}</div>
)}
</div>
)
}
export default function FaqSection({ d, standalone }: { d: Dictionary; standalone?: boolean }) {
return (
<section id="faq" className={`${standalone ? 'py-24' : 'py-24 border-t border-slate-100'} bg-white`}>
<div className="max-w-3xl mx-auto px-4 sm:px-6">
<div className="text-center mb-12">
{standalone
? <h1 className="text-3xl sm:text-4xl font-bold text-slate-900 mb-4">{d.faq.title}</h1>
: <h2 className="text-3xl sm:text-4xl font-bold text-slate-900 mb-4">{d.faq.title}</h2>
}
<p className="text-slate-500 text-lg">{d.faq.subtitle}</p>
</div>
<div className="flex flex-col gap-3">
{d.faq.items.map((item, i) => (
<FaqItem key={i} q={item.q} a={item.a} />
))}
</div>
</div>
</section>
)
}