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,141 @@
+import Link from 'next/link';
+import { ArrowRight, Users, CalendarDays, MapPin, ShieldCheck, Clock, Bot } from 'lucide-react';
+import Header from '../../components/Header.jsx';
+import Footer from '../../components/Footer.jsx';
+import Reveal from '../../components/Reveal.jsx';
+import SectionHeading from '../../components/SectionHeading.jsx';
+import { serverApi } from '../../lib/serverApi.js';
+
+export const metadata = {
+  title: 'О компании',
+  description:
+    'TopSysOps — IT-аутсорсинг и техподдержка с 2023 года. Команда 20+ специалистов, штаб-квартира в Санкт-Петербурге, работаем с клиентами по всей России.',
+};
+
+const FACTS = [
+  { icon: CalendarDays, label: 'На рынке с', value: '2023 года' },
+  { icon: Users, label: 'В команде', value: '20+ специалистов' },
+  { icon: MapPin, label: 'Штаб-квартира', value: 'Санкт-Петербург' },
+];
+
+const DIFFERENTIATORS = [
+  {
+    icon: Clock,
+    title: 'Быстрый отклик',
+    text: 'На тарифе «Премиум» среднее время реакции на заявку — около 15 минут, поддержка доступна 24/7.',
+  },
+  {
+    icon: ShieldCheck,
+    title: 'Конфиденциальность',
+    text: 'Перед началом работ подписываем NDA и используем защищённые каналы доступа к инфраструктуре клиента.',
+  },
+  {
+    icon: Bot,
+    title: 'Личный кабинет с ИИ',
+    text: 'Клиенты получают личный кабинет с перепиской с командой и ИИ-ассистентом, отвечающим на вопросы 24/7.',
+  },
+  {
+    icon: MapPin,
+    title: 'Вся Россия удалённо',
+    text: 'Большинство работ выполняем удалённо для клиентов по всей стране, выезд специалиста — по Санкт-Петербургу.',
+  },
+];
+
+export default async function AboutPage() {
+  const contact = await serverApi.getContact();
+
+  const orgSchema = {
+    '@context': 'https://schema.org',
+    '@type': 'Organization',
+    name: 'TopSysOps',
+    url: process.env.NEXT_PUBLIC_SITE_URL || 'https://top-sysops.ru',
+    foundingDate: '2023',
+    numberOfEmployees: { '@type': 'QuantitativeValue', minValue: 20 },
+    ...(contact?.address ? { address: { '@type': 'PostalAddress', streetAddress: contact.address, addressCountry: 'RU' } } : {}),
+  };
+
+  return (
+    <div>
+      {/* eslint-disable-next-line react/no-danger */}
+      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(orgSchema) }} />
+
+      <Header />
+      <section className="max-w-4xl mx-auto px-5 sm:px-8 pt-16 pb-10">
+        <Reveal>
+          <p className="text-xs uppercase tracking-widest text-emerald-500 mb-4 font-mono">&gt; top-sysops.ru --about-company</p>
+          <h1 className="text-2xl sm:text-3xl font-bold mb-6 font-display">
+            TopSysOps — IT-аутсорсинг и техподдержка для бизнеса
+          </h1>
+          <p className="text-base text-slate-600 dark:text-slate-400 max-w-2xl">
+            Мы занимаемся IT-аутсорсингом, техподдержкой инфраструктуры, кибербезопасностью, администрированием
+            серверов и баз данных, а также автоматизацией процессов с помощью ИИ. Наша цель — чтобы за IT-инфраструктуру
+            бизнеса отвечала команда, а не один перегруженный сисадмин.
+          </p>
+        </Reveal>
+      </section>
+
+      <section className="max-w-4xl mx-auto px-5 sm:px-8 pb-16">
+        <div className="grid sm:grid-cols-3 gap-5">
+          {FACTS.map((f, i) => {
+            const Icon = f.icon;
+            return (
+              <Reveal key={f.label} 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">
+                  <Icon className="h-5 w-5 text-emerald-500 mb-3" />
+                  <div className="text-xs text-slate-400 dark:text-slate-500 mb-1">{f.label}</div>
+                  <div className="font-bold font-display">{f.value}</div>
+                </div>
+              </Reveal>
+            );
+          })}
+        </div>
+      </section>
+
+      <section className="max-w-4xl mx-auto px-5 sm:px-8 pb-20">
+        <SectionHeading eyebrow="why --us" title="Почему выбирают нас" />
+        <div className="grid sm:grid-cols-2 gap-5">
+          {DIFFERENTIATORS.map((d, i) => {
+            const Icon = d.icon;
+            return (
+              <Reveal key={d.title} 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">
+                  <Icon className="h-5 w-5 text-emerald-500 mb-3" />
+                  <h3 className="font-bold mb-1 font-display text-[15px]">{d.title}</h3>
+                  <p className="text-xs text-slate-500 dark:text-slate-400">{d.text}</p>
+                </div>
+              </Reveal>
+            );
+          })}
+        </div>
+      </section>
+
+      <section className="max-w-4xl mx-auto px-5 sm:px-8 pb-20">
+        <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-emerald-50 border-emerald-200 dark:bg-emerald-950/30 dark:border-emerald-900">
+            <div>
+              <h3 className="font-bold text-lg mb-2 font-display">Готовы обсудить вашу задачу?</h3>
+              <p className="text-sm text-slate-600 dark:text-slate-400">
+                Посмотрите услуги и цены или сразу оставьте заявку — свяжемся в течение рабочего дня.
+              </p>
+            </div>
+            <div className="flex gap-3 flex-shrink-0">
+              <Link
+                href="/uslugi"
+                className="inline-flex items-center gap-2 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"
+              >
+                Услуги
+              </Link>
+              <Link
+                href="/kontakty"
+                className="inline-flex items-center gap-2 px-4 py-2.5 rounded-md bg-emerald-500 text-white text-sm font-medium hover:bg-emerald-600 transition-colors whitespace-nowrap"
+              >
+                Оставить заявку <ArrowRight className="h-4 w-4" />
+              </Link>
+            </div>
+          </div>
+        </Reveal>
+      </section>
+      <Footer />
+    </div>
+  );
+}