Initial commit: TopSysOps site + admin panel

Multi-page public site (Next.js), Node/Express backend with Postgres, and Vite admin/account app, restructured from a single-page layout into dedicated service, promotions, cases, about, FAQ, and blog pages for SEO. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_013otXCiTZsxdZ4SJKZ9wUky
2026-08-25 23:12:16 +03:00
commit 130c5382cd
@@ -0,0 +1,45 @@
+import { Bot, MessageCircle, Sparkles } from 'lucide-react';
+import Reveal from '../Reveal.jsx';
+
+export default function AccountPromo() {
+  return (
+    <section className="max-w-6xl mx-auto px-5 sm:px-8 pb-16">
+      <Reveal>
+        <div className="rounded-lg border border-emerald-200 bg-emerald-50 dark:bg-emerald-950/30 dark:border-emerald-900 p-6 sm:p-8 flex flex-col sm:flex-row items-start sm:items-center gap-6 justify-between">
+          <div>
+            <p className="text-xs uppercase tracking-widest text-emerald-600 dark:text-emerald-400 mb-2 font-mono">
+              &gt; account --perks
+            </p>
+            <h3 className="font-bold text-lg mb-2 font-display">Личный кабинет для клиентов</h3>
+            <ul className="text-sm text-slate-600 dark:text-slate-400 space-y-1">
+              <li className="flex items-center gap-2">
+                <Bot className="h-4 w-4 text-emerald-500 flex-shrink-0" /> ИИ-ассистент отвечает на вопросы 24/7
+              </li>
+              <li className="flex items-center gap-2">
+                <MessageCircle className="h-4 w-4 text-emerald-500 flex-shrink-0" /> Личная переписка с нашей командой
+              </li>
+              <li className="flex items-center gap-2">
+                <Sparkles className="h-4 w-4 text-emerald-500 flex-shrink-0" /> Акции и предложения специально для вас
+              </li>
+            </ul>
+          </div>
+          <div className="flex gap-3 flex-shrink-0">
+            {/* /account живёт в отдельном приложении (Vite), поэтому обычная ссылка, а не next/link */}
+            <a
+              href="/account/register"
+              className="px-4 py-2.5 rounded-md bg-emerald-500 text-white text-sm font-medium hover:bg-emerald-600 transition-colors whitespace-nowrap"
+            >
+              Зарегистрироваться
+            </a>
+            <a
+              href="/account"
+              className="px-4 py-2.5 rounded-md text-sm font-medium border border-slate-300 dark:border-slate-700 hover:bg-white dark:hover:bg-slate-900 transition-colors whitespace-nowrap"
+            >
+              Войти
+            </a>
+          </div>
+        </div>
+      </Reveal>
+    </section>
+  );
+}
@@ -0,0 +1,50 @@
+import Link from 'next/link';
+import Reveal from '../Reveal.jsx';
+import SectionHeading from '../SectionHeading.jsx';
+import StatusDot from '../StatusDot.jsx';
+
+export default function Cases({ cases, limit, moreHref, showDisclaimer = false }) {
+  if (cases.length === 0) return null;
+  const list = limit ? cases.slice(0, limit) : cases;
+
+  return (
+    <section id="cases" className="max-w-6xl mx-auto px-5 sm:px-8 py-20">
+      <SectionHeading eyebrow="cases --log" title="Кейсы и портфолио" />
+      <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
+        {list.map((c, i) => (
+          <Reveal key={c.id} delay={i * 60}>
+            <div className="h-full rounded-lg border p-5 bg-white border-slate-200 dark:bg-slate-900 dark:border-slate-800">
+              <div className="flex items-center justify-between mb-3">
+                {c.tag && (
+                  <span className="text-xs px-2 py-0.5 rounded-full bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-300">
+                    {c.tag}
+                  </span>
+                )}
+                <StatusDot tone={c.tone} label={c.status} mono />
+              </div>
+              <h3 className="font-bold mb-2 font-display text-[15px]">{c.title}</h3>
+              <p className="text-sm text-slate-600 dark:text-slate-400">{c.description}</p>
+            </div>
+          </Reveal>
+        ))}
+      </div>
+
+      {moreHref && (
+        <Reveal className="mt-8">
+          <Link href={moreHref} className="text-sm text-emerald-500 font-medium hover:underline">
+            Все кейсы →
+          </Link>
+        </Reveal>
+      )}
+
+      {showDisclaimer && (
+        <Reveal className="mt-8">
+          <p className="text-xs text-slate-400 dark:text-slate-500">
+            * Показатели по срокам, объёмам и улучшениям — ориентировочные оценки по внутренним данным, точные цифры
+            уточняются и согласовываются с клиентом по каждому проекту.
+          </p>
+        </Reveal>
+      )}
+    </section>
+  );
+}
@@ -0,0 +1,73 @@
+import Link from 'next/link';
+import { MapPin, Phone, Mail, Clock, ArrowRight } from 'lucide-react';
+import Reveal from '../Reveal.jsx';
+import SectionHeading from '../SectionHeading.jsx';
+
+export default function Contact({ contact, compact = false }) {
+  const rows = contact
+    ? [
+        { icon: MapPin, label: 'Адрес', value: contact.address },
+        { icon: Phone, label: 'Телефон', value: contact.phone },
+        { icon: Mail, label: 'Email', value: contact.email },
+        { icon: Clock, label: 'Режим работы', value: contact.hours },
+      ].filter((r) => r.value)
+    : [];
+
+  if (compact) {
+    return (
+      <section id="contact" className="max-w-6xl mx-auto px-5 sm:px-8 py-16">
+        <Reveal>
+          <div className="rounded-lg border p-6 sm:p-8 flex flex-col sm:flex-row items-start sm:items-center gap-6 justify-between bg-white border-slate-200 dark:bg-slate-900 dark:border-slate-800">
+            <div>
+              <h3 className="font-bold text-lg mb-2 font-display">Оставить заявку</h3>
+              <p className="text-sm text-slate-600 dark:text-slate-400">
+                {contact?.phone && `${contact.phone} · `}
+                {contact?.email}
+              </p>
+            </div>
+            <Link
+              href="/kontakty"
+              className="inline-flex items-center gap-2 px-5 py-3 rounded-md bg-emerald-500 text-white font-medium text-sm hover:bg-emerald-600 transition-colors whitespace-nowrap"
+            >
+              Все контакты <ArrowRight className="h-4 w-4" />
+            </Link>
+          </div>
+        </Reveal>
+      </section>
+    );
+  }
+
+  return (
+    <section id="contact" className="max-w-6xl mx-auto px-5 sm:px-8 py-20">
+      <SectionHeading eyebrow="contact --reach-us" title="Контакты" />
+      <div className="grid md:grid-cols-2 gap-5">
+        <Reveal>
+          <div className="rounded-lg border p-5 h-full bg-white border-slate-200 dark:bg-slate-900 dark:border-slate-800">
+            <div className="space-y-5">
+              {rows.map((r) => {
+                const Icon = r.icon;
+                return (
+                  <div key={r.label} className="flex items-start gap-3">
+                    <Icon className="h-4 w-4 text-emerald-500 mt-0.5" />
+                    <div>
+                      <div className="text-xs text-slate-400 dark:text-slate-500">{r.label}</div>
+                      <div className="text-sm">{r.value}</div>
+                    </div>
+                  </div>
+                );
+              })}
+              {rows.length === 0 && <p className="text-sm text-slate-400">Контакты пока не заполнены.</p>}
+            </div>
+          </div>
+        </Reveal>
+        {contact?.map_embed && (
+          <Reveal delay={100}>
+            <div className="rounded-lg border overflow-hidden h-64 md:h-full bg-white border-slate-200 dark:bg-slate-900 dark:border-slate-800">
+              <iframe title="Карта офиса TopSysOps" className="w-full h-full" src={contact.map_embed} />
+            </div>
+          </Reveal>
+        )}
+      </div>
+    </section>
+  );
+}
@@ -0,0 +1,49 @@
+'use client';
+
+import { useState } from 'react';
+import Link from 'next/link';
+import { ChevronDown } from 'lucide-react';
+import Reveal from '../Reveal.jsx';
+import SectionHeading from '../SectionHeading.jsx';
+
+function cx(...args) {
+  return args.filter(Boolean).join(' ');
+}
+
+function FaqItem({ item }) {
+  const [open, setOpen] = useState(false);
+  return (
+    <div className="border-b border-slate-200 dark:border-slate-800">
+      <button onClick={() => setOpen(!open)} className="w-full flex items-center justify-between gap-4 py-4 text-left">
+        <span className="text-sm sm:text-base font-medium">{item.question}</span>
+        <ChevronDown className={cx('h-4 w-4 flex-shrink-0 transition-transform', open && 'rotate-180')} />
+      </button>
+      {open && <p className="pb-4 text-sm text-slate-600 dark:text-slate-400">{item.answer}</p>}
+    </div>
+  );
+}
+
+export default function Faq({ faqs, limit, moreHref }) {
+  if (faqs.length === 0) return null;
+  const list = limit ? faqs.slice(0, limit) : faqs;
+
+  return (
+    <section id="faq" className="max-w-3xl mx-auto px-5 sm:px-8 py-20">
+      <SectionHeading eyebrow="faq --common" title="Частые вопросы" />
+      <Reveal>
+        <div>
+          {list.map((item) => (
+            <FaqItem key={item.id} item={item} />
+          ))}
+        </div>
+      </Reveal>
+      {moreHref && (
+        <Reveal className="mt-6">
+          <Link href={moreHref} className="text-sm text-emerald-500 font-medium hover:underline">
+            Все вопросы →
+          </Link>
+        </Reveal>
+      )}
+    </section>
+  );
+}
@@ -0,0 +1,77 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import Link from 'next/link';
+import { ArrowRight } from 'lucide-react';
+
+const LINES = ['$ status --infra', 'uptime: 99.98%', 'incidents_resolved: 1240+', 'avg_response_time: 15m'];
+
+function cx(...args) {
+  return args.filter(Boolean).join(' ');
+}
+
+export default function Hero() {
+  const [shown, setShown] = useState(0);
+
+  useEffect(() => {
+    if (shown >= LINES.length) return undefined;
+    const timer = setTimeout(() => setShown((s) => s + 1), 450);
+    return () => clearTimeout(timer);
+  }, [shown]);
+
+  return (
+    <section id="home" className="max-w-6xl mx-auto px-5 sm:px-8 pt-16 pb-20 grid md:grid-cols-2 gap-12 items-center">
+      <div>
+        <p className="text-xs uppercase tracking-widest text-emerald-500 mb-4 font-mono">
+          &gt; top-sysops.ru --about
+        </p>
+        <h1
+          className="text-[clamp(1.5rem,7.5vw,3rem)] md:text-3xl lg:text-4xl leading-tight font-bold mb-6 font-display text-slate-900 dark:text-slate-100 break-words"
+          style={{ hyphens: 'auto' }}
+          lang="ru"
+        >
+          IT-аутсорсинг и техподдержка<br />
+          инфраструктуры, за которую<br />
+          можно не переживать
+        </h1>
+        <p className="text-base sm:text-lg mb-8 max-w-md text-slate-600 dark:text-slate-400">
+          Администрирование серверов, кибербезопасность, сетевая инфраструктура и автоматизация бизнес-процессов
+          с помощью ИИ — с гарантией отклика от 15 минут.
+        </p>
+        <div className="flex flex-wrap gap-3">
+          <Link
+            href="/uslugi"
+            className="inline-flex items-center gap-2 px-5 py-3 rounded-md bg-emerald-500 text-white font-medium text-sm hover:bg-emerald-600 transition-colors"
+          >
+            Наши услуги <ArrowRight className="h-4 w-4" />
+          </Link>
+          <Link
+            href="/kontakty"
+            className="inline-flex items-center gap-2 px-5 py-3 rounded-md font-medium text-sm border transition-colors border-slate-300 hover:bg-slate-100 dark:border-slate-700 dark:hover:bg-slate-900"
+          >
+            Оставить заявку
+          </Link>
+        </div>
+      </div>
+
+      <div className="rounded-lg border p-5 shadow-sm font-mono bg-white border-slate-200 dark:bg-slate-900 dark:border-slate-800">
+        <div className="flex items-center gap-1.5 mb-4">
+          <span className="h-2.5 w-2.5 rounded-full bg-rose-400" />
+          <span className="h-2.5 w-2.5 rounded-full bg-amber-400" />
+          <span className="h-2.5 w-2.5 rounded-full bg-emerald-400" />
+        </div>
+        <div className="space-y-2 text-sm">
+          {LINES.slice(0, shown).map((line, i) => (
+            <div key={line} className={cx(i === 0 ? 'text-emerald-500' : 'text-slate-700 dark:text-slate-300')}>
+              {line}
+            </div>
+          ))}
+          <span className="inline-flex items-center gap-1 text-slate-700 dark:text-slate-300">
+            {shown >= LINES.length && <span className="text-emerald-500">$</span>}
+            <span className="inline-block w-2 h-4 bg-emerald-500 animate-pulse align-middle" />
+          </span>
+        </div>
+      </div>
+    </section>
+  );
+}
@@ -0,0 +1,68 @@
+import Link from 'next/link';
+import { ArrowUpRight } from 'lucide-react';
+import Reveal from '../Reveal.jsx';
+import SectionHeading from '../SectionHeading.jsx';
+
+export default function Promotions({ promotions, limit, moreHref, showMailNote = false }) {
+  if (promotions.length === 0) return null;
+  const list = limit ? promotions.slice(0, limit) : promotions;
+
+  return (
+    <section id="promotions" className="py-20 bg-slate-100/60 dark:bg-slate-950/40">
+      <div className="max-w-6xl mx-auto px-5 sm:px-8">
+        <SectionHeading
+          eyebrow="promotions --active"
+          title="Акции и специальные предложения"
+          desc="Актуальные сроки и условия уточняйте у менеджера при обращении."
+        />
+        <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
+          {list.map((p, i) => (
+            <Reveal key={p.id} delay={i * 60}>
+              <div className="h-full rounded-lg border p-5 flex flex-col bg-white border-slate-200 dark:bg-slate-900 dark:border-slate-800">
+                <h3 className="font-bold mb-2 font-display text-[15px]">{p.title}</h3>
+                <div className="flex items-baseline gap-2 mb-3">
+                  <span className="text-xl font-bold text-emerald-500 font-mono">{p.price_text}</span>
+                  {p.old_price_text && (
+                    <span className="text-sm line-through text-slate-400 dark:text-slate-600 font-mono">
+                      {p.old_price_text}
+                    </span>
+                  )}
+                </div>
+                <p className="text-sm flex-1 text-slate-600 dark:text-slate-400">{p.description}</p>
+                <Link
+                  href="/kontakty"
+                  className="mt-4 text-sm text-emerald-500 font-medium inline-flex items-center gap-1 hover:gap-2 transition-all"
+                >
+                  Забронировать <ArrowUpRight className="h-3.5 w-3.5" />
+                </Link>
+              </div>
+            </Reveal>
+          ))}
+        </div>
+
+        {moreHref && (
+          <Reveal className="mt-8">
+            <Link href={moreHref} className="text-sm text-emerald-500 font-medium hover:underline">
+              Все акции →
+            </Link>
+          </Reveal>
+        )}
+
+        {showMailNote && (
+          <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-sm font-medium mb-1">В чём разница между акцией и обычной услугой на почтовый сервер?</p>
+              <p className="text-xs text-slate-500 dark:text-slate-400">
+                Услуги «Почтовый сервер (ваше/наше оборудование)» из прайс-листа — это базовое развёртывание или
+                аренда+администрирование без пакета доп. настроек. Акция «Почтовый сервер под ключ» — это
+                отдельный, более полный пакет: настройка на вашем оборудовании + SPF/DKIM/DMARC, антиспам,
+                веб-почта и 3 месяца сопровождения включены в стоимость — по акционной цене вместо отдельной оплаты
+                каждого пункта.
+              </p>
+            </div>
+          </Reveal>
+        )}
+      </div>
+    </section>
+  );
+}
@@ -0,0 +1,97 @@
+'use client';
+
+import { useState } from 'react';
+import { Star } from 'lucide-react';
+import { clientApi } from '../../lib/clientApi.js';
+
+function cx(...args) {
+  return args.filter(Boolean).join(' ');
+}
+
+function StarRating({ value, onChange }) {
+  return (
+    <div className="flex gap-1">
+      {[1, 2, 3, 4, 5].map((n) => (
+        <button key={n} type="button" onClick={() => onChange(n)} aria-label={`${n} звёзд`}>
+          <Star className={cx('h-5 w-5', n <= value ? 'fill-amber-400 text-amber-400' : 'text-slate-400')} />
+        </button>
+      ))}
+    </div>
+  );
+}
+
+export default function ReviewForm() {
+  const [form, setForm] = useState({ name: '', role: '', rating: 5, text: '', website: '' });
+  const [status, setStatus] = useState('idle'); // idle | sending | sent | error
+
+  async function handleSubmit(e) {
+    e.preventDefault();
+    if (!form.name.trim() || !form.text.trim()) return;
+    setStatus('sending');
+    try {
+      await clientApi.submitReview(form);
+      setForm({ name: '', role: '', rating: 5, text: '', website: '' });
+      setStatus('sent');
+    } catch (err) {
+      setStatus('error');
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="rounded-lg border p-5 space-y-4 bg-white border-slate-200 dark:bg-slate-900 dark:border-slate-800">
+      <h3 className="font-bold font-display text-[15px]">Оставить отзыв</h3>
+
+      {/* honeypot field - hidden from real users via CSS, bots often fill every input */}
+      <input
+        type="text"
+        value={form.website}
+        onChange={(e) => setForm({ ...form, website: e.target.value })}
+        className="hidden"
+        tabIndex={-1}
+        autoComplete="off"
+        aria-hidden="true"
+      />
+
+      <div>
+        <label className="text-xs block mb-1">Имя*</label>
+        <input
+          required
+          value={form.name}
+          onChange={(e) => setForm({ ...form, name: e.target.value })}
+          className="w-full rounded-md border px-3 py-2 text-sm bg-transparent border-slate-300 dark:border-slate-700"
+        />
+      </div>
+      <div>
+        <label className="text-xs block mb-1">Должность / компания</label>
+        <input
+          value={form.role}
+          onChange={(e) => setForm({ ...form, role: e.target.value })}
+          className="w-full rounded-md border px-3 py-2 text-sm bg-transparent border-slate-300 dark:border-slate-700"
+        />
+      </div>
+      <div>
+        <label className="text-xs block mb-1">Оценка*</label>
+        <StarRating value={form.rating} onChange={(n) => setForm({ ...form, rating: n })} />
+      </div>
+      <div>
+        <label className="text-xs block mb-1">Отзыв*</label>
+        <textarea
+          required
+          rows={3}
+          value={form.text}
+          onChange={(e) => setForm({ ...form, text: e.target.value })}
+          className="w-full rounded-md border px-3 py-2 text-sm bg-transparent border-slate-300 dark:border-slate-700"
+        />
+      </div>
+      <button
+        type="submit"
+        disabled={status === 'sending'}
+        className="w-full py-2.5 rounded-md bg-emerald-500 text-white text-sm font-medium hover:bg-emerald-600 transition-colors disabled:opacity-60"
+      >
+        {status === 'sending' ? 'Отправляем...' : 'Отправить на модерацию'}
+      </button>
+      {status === 'sent' && <p className="text-xs text-emerald-500">Спасибо! Отзыв появится на сайте после одобрения.</p>}
+      {status === 'error' && <p className="text-xs text-rose-500">Не получилось отправить отзыв, попробуйте ещё раз чуть позже.</p>}
+    </form>
+  );
+}
@@ -0,0 +1,57 @@
+import Link from 'next/link';
+import { Star } from 'lucide-react';
+import Reveal from '../Reveal.jsx';
+import SectionHeading from '../SectionHeading.jsx';
+import ReviewForm from './ReviewForm.jsx';
+
+function cx(...args) {
+  return args.filter(Boolean).join(' ');
+}
+
+export default function Reviews({ reviews, limit, moreHref, showForm = true }) {
+  const list = limit ? reviews.slice(0, limit) : reviews;
+
+  return (
+    <section id="reviews" className="py-20 bg-slate-100/60 dark:bg-slate-950/40">
+      <div className="max-w-6xl mx-auto px-5 sm:px-8">
+        <SectionHeading
+          eyebrow="reviews --approved"
+          title="Отзывы клиентов"
+          desc="Публикуются после проверки менеджером - это защищает страницу от спама и фейков."
+        />
+        <div className={cx('grid gap-10', showForm && 'md:grid-cols-2')}>
+          <Reveal>
+            <div className="space-y-4">
+              {list.length === 0 && <p className="text-sm text-slate-400">Пока нет опубликованных отзывов. Будьте первым!</p>}
+              {list.map((r) => (
+                <div key={r.id} className="rounded-lg border p-5 bg-white border-slate-200 dark:bg-slate-900 dark:border-slate-800">
+                  <div className="flex items-center gap-1 mb-2">
+                    {[1, 2, 3, 4, 5].map((n) => (
+                      <Star key={n} className={cx('h-4 w-4', n <= r.rating ? 'fill-amber-400 text-amber-400' : 'text-slate-300')} />
+                    ))}
+                  </div>
+                  <p className="text-sm mb-3">{r.text}</p>
+                  <p className="text-xs text-slate-400 dark:text-slate-500">
+                    {r.name}
+                    {r.role ? ` · ${r.role}` : ''}
+                  </p>
+                </div>
+              ))}
+            </div>
+            {moreHref && (
+              <Link href={moreHref} className="mt-6 inline-block text-sm text-emerald-500 font-medium hover:underline">
+                Все отзывы →
+              </Link>
+            )}
+          </Reveal>
+
+          {showForm && (
+            <Reveal delay={100}>
+              <ReviewForm />
+            </Reveal>
+          )}
+        </div>
+      </div>
+    </section>
+  );
+}
@@ -0,0 +1,88 @@
+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 = 'Гибкие тарифы для бизнеса любого масштаба. Возможна индивидуальная настройка под ваши задачи.',
+}) {
+  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} />
+
+      {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>
+  );
+}