ogrechkoandClaude Sonnet 5
f53c8b1ed7
SectionHeading always rendered its title as <h2>, so every page whose only heading came from a shared section component (services hub, promotions, cases, faq, contact, reviews, blog list) had no <h1> at all. Add a level prop (default h2) and pass headingLevel="h1" from each page where that section is the page's own top-level heading. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_013otXCiTZsxdZ4SJKZ9wUky
90 lines
3.6 KiB
React
90 lines
3.6 KiB
React
import Link from 'next/link';
|
|
import Reveal from '../Reveal.jsx';
|
|
import SectionHeading from '../SectionHeading.jsx';
|
|
import { getIcon } from '../../lib/icons.js';
|
|
|
|
export function ServicePriceList({ category }) {
|
|
return (
|
|
<ul className="space-y-3">
|
|
{category.items.map((it) => (
|
|
<li key={it.id} className="pt-3 border-t border-slate-100 dark:border-slate-800">
|
|
<div className="flex items-baseline justify-between gap-2">
|
|
<span className="text-sm">{it.name}</span>
|
|
<span className="text-sm text-emerald-500 whitespace-nowrap font-mono">
|
|
{it.price_text}
|
|
{it.period}
|
|
</span>
|
|
</div>
|
|
{it.note && <p className="text-xs mt-1 text-slate-400 dark:text-slate-500">{it.note}</p>}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
);
|
|
}
|
|
|
|
export default function Services({
|
|
categories,
|
|
compact = false,
|
|
limit,
|
|
moreHref,
|
|
eyebrow = 'services --price-list',
|
|
title = 'Услуги IT-аутсорсинга и техподдержки: прайс-лист',
|
|
desc = 'Гибкие тарифы для бизнеса любого масштаба. Возможна индивидуальная настройка под ваши задачи.',
|
|
headingLevel = 'h2',
|
|
}) {
|
|
const list = limit ? categories.slice(0, limit) : categories;
|
|
|
|
return (
|
|
<section id="services" className="max-w-6xl mx-auto px-5 sm:px-8 py-20">
|
|
<SectionHeading eyebrow={eyebrow} title={title} desc={desc} level={headingLevel} />
|
|
|
|
{list.length === 0 && <p className="text-sm text-slate-400">Прайс-лист пока пуст.</p>}
|
|
|
|
<div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
|
|
{list.map((cat, i) => {
|
|
const Icon = getIcon(cat.icon);
|
|
return (
|
|
<Reveal key={cat.id} delay={i * 60}>
|
|
<div className="h-full rounded-lg border p-5 transition-transform hover:-translate-y-1 bg-white border-slate-200 dark:bg-slate-900 dark:border-slate-800">
|
|
<Icon className="h-5 w-5 text-emerald-500 mb-3" />
|
|
<Link href={`/uslugi/${cat.slug}`} className="hover:text-emerald-500 transition-colors">
|
|
<h3 className="font-bold mb-1 font-display text-[15px]">{cat.title}</h3>
|
|
</Link>
|
|
<p className="text-xs mb-4 text-slate-500 dark:text-slate-400">{cat.description}</p>
|
|
{compact ? (
|
|
<Link
|
|
href={`/uslugi/${cat.slug}`}
|
|
className="text-sm text-emerald-500 font-medium hover:underline"
|
|
>
|
|
Подробнее и цены →
|
|
</Link>
|
|
) : (
|
|
<ServicePriceList category={cat} />
|
|
)}
|
|
</div>
|
|
</Reveal>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{moreHref && (
|
|
<Reveal className="mt-8">
|
|
<Link href={moreHref} className="text-sm text-emerald-500 font-medium hover:underline">
|
|
Все услуги и полный прайс-лист →
|
|
</Link>
|
|
</Reveal>
|
|
)}
|
|
|
|
{!compact && !moreHref && (
|
|
<Reveal className="mt-8">
|
|
<div className="rounded-lg border p-5 bg-white border-slate-200 dark:bg-slate-900 dark:border-slate-800">
|
|
<p className="text-xs text-slate-400 dark:text-slate-500">
|
|
Цены указаны в рублях (RUB). Точная стоимость рассчитывается индивидуально после анализа задач.
|
|
</p>
|
|
</div>
|
|
</Reveal>
|
|
)}
|
|
</section>
|
|
);
|
|
}
|