first commit

2026-08-03 21:02:34 +04:00
commit 2dd4f32646
39 changed files with 2326 additions and 0 deletions
@@ -0,0 +1,120 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { ArrowUpRight, Server, Activity, Wrench, MessageSquare, Check } from "lucide-react";
+import PageHero from "@/components/PageHero";
+import SectionEyebrow from "@/components/SectionEyebrow";
+import CTASection from "@/components/CTASection";
+
+export const metadata: Metadata = {
+  title: "IT-поддержка и инфраструктура",
+  description:
+    "Обслуживание IT-инфраструктуры бизнеса: сборка серверов, мониторинг, устранение сбоев, консультации.",
+};
+
+const coverage = [
+  {
+    icon: Server,
+    title: "Обслуживание серверов",
+    description: "Настройка, обновление и сопровождение серверного оборудования.",
+  },
+  {
+    icon: Activity,
+    title: "Мониторинг и профилактика",
+    description: "Отслеживаем состояние систем, чтобы предупредить сбои заранее.",
+  },
+  {
+    icon: Wrench,
+    title: "Сборка и настройка оборудования",
+    description: "Подбираем и настраиваем технику под задачи вашей команды.",
+  },
+  {
+    icon: MessageSquare,
+    title: "Консультации",
+    description: "Помогаем принимать решения по развитию IT-инфраструктуры.",
+  },
+];
+
+const formats = [
+  {
+    title: "Разовая задача",
+    description:
+      "Точечная помощь: настройка сервера, устранение конкретной проблемы, консультация.",
+    points: ["Без долгосрочных обязательств", "Оценка сроков после диагностики задачи"],
+  },
+  {
+    title: "Постоянное обслуживание",
+    description:
+      "Регулярное сопровождение инфраструктуры: мониторинг, обновления, приоритетная поддержка.",
+    points: ["Согласованный формат и время реакции", "Профилактика вместо экстренных починок"],
+  },
+];
+
+export default function SupportPage() {
+  return (
+    <>
+      <PageHero
+        eyebrow="IT-поддержка"
+        title="Поддержка вашей"
+        highlight="IT-инфраструктуры"
+        subtitle="Обслуживаем существующую инфраструктуру бизнеса: от сборки и настройки оборудования до мониторинга и устранения сбоев."
+      >
+        <Link
+          href="/contacts"
+          className="inline-flex items-center gap-1.5 rounded-full bg-blue-500 px-6 py-3.5 font-medium text-white transition-transform hover:scale-[1.03]"
+        >
+          Обсудить задачу
+          <ArrowUpRight size={18} />
+        </Link>
+      </PageHero>
+
+      <section className="px-6 py-20">
+        <div className="mx-auto max-w-6xl grid gap-8 sm:grid-cols-2 lg:grid-cols-4">
+          {coverage.map((c) => (
+            <div key={c.title}>
+              <div className="mb-4 flex h-10 w-10 items-center justify-center rounded-lg border border-white/[0.08] bg-white/[0.03] text-blue-400">
+                <c.icon size={18} strokeWidth={1.75} />
+              </div>
+              <h3 className="font-medium text-ink-100">{c.title}</h3>
+              <p className="mt-2 text-sm leading-relaxed text-ink-500">
+                {c.description}
+              </p>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      <section className="px-6 py-20">
+        <div className="mx-auto max-w-6xl">
+          <SectionEyebrow>Формат работы</SectionEyebrow>
+          <h2 className="font-display text-3xl font-medium sm:text-4xl">
+            Как удобно вам
+          </h2>
+          <div className="mt-12 grid gap-5 lg:grid-cols-2">
+            {formats.map((f) => (
+              <div
+                key={f.title}
+                className="rounded-2xl border border-white/[0.06] bg-base-900/50 p-8"
+              >
+                <h3 className="font-display text-lg font-medium">{f.title}</h3>
+                <p className="mt-3 text-ink-500">{f.description}</p>
+                <ul className="mt-6 space-y-3">
+                  {f.points.map((point) => (
+                    <li key={point} className="flex items-start gap-2.5 text-sm text-ink-300">
+                      <Check size={17} className="mt-0.5 shrink-0 text-blue-400" />
+                      {point}
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      <CTASection
+        title="Нужна помощь с инфраструктурой?"
+        subtitle="Опишите ситуацию — предложим формат работы и следующий шаг."
+      />
+    </>
+  );
+}