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

public-site/components/sections/Cases.jsx

@@ -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>
+  );
+}