121 lines
5.1 KiB
TypeScript
121 lines
5.1 KiB
TypeScript
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="Опишите ситуацию — предложим формат работы и следующий шаг."
|
|
/>
|
|
</>
|
|
);
|
|
}
|