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/Reviews.jsx

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