first commit

2026-08-03 21:02:34 +04:00
commit 2dd4f32646
39 changed files with 2326 additions and 0 deletions
@@ -0,0 +1,150 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import {
+  Send,
+  MessageCircle,
+  ArrowUpRight,
+  Check,
+  Bell,
+  ShoppingBag,
+  Headphones,
+  Workflow,
+  Mail,
+  FileText,
+} from "lucide-react";
+import PageHero from "@/components/PageHero";
+import SectionEyebrow from "@/components/SectionEyebrow";
+import CTASection from "@/components/CTASection";
+
+export const metadata: Metadata = {
+  title: "Боты для Telegram и VK",
+  description:
+    "Разработка Telegram- и VK-ботов любой сложности: автоматизация заявок, уведомления, интеграция с CRM.",
+};
+
+const platforms = [
+  {
+    icon: Send,
+    title: "Telegram-боты",
+    description:
+      "Боты любой сложности: приём заявок, уведомления, интеграция с CRM и сервисами.",
+    points: ["Диалоговые сценарии и кнопки", "Оплата и интеграции", "Уведомления в реальном времени"],
+  },
+  {
+    icon: MessageCircle,
+    title: "Боты для ВКонтакте",
+    description:
+      "Боты для сообществ VK: рассылки, магазины в чате, поддержка подписчиков.",
+    points: ["Автоответы и сценарии диалога", "Магазин прямо в сообществе", "Рассылки по базе подписчиков"],
+  },
+];
+
+const useCases = [
+  {
+    icon: FileText,
+    title: "Приём заявок",
+    description: "Клиент оставляет заявку в чате — она сразу попадает в CRM или менеджеру.",
+  },
+  {
+    icon: Bell,
+    title: "Уведомления",
+    description: "Автоматические напоминания клиентам и сотрудникам о статусе заказа.",
+  },
+  {
+    icon: ShoppingBag,
+    title: "Магазин в чате",
+    description: "Каталог, корзина и оформление заказа без перехода на сайт.",
+  },
+  {
+    icon: Headphones,
+    title: "Поддержка клиентов",
+    description: "Ответы на частые вопросы и передача сложных случаев менеджеру.",
+  },
+  {
+    icon: Workflow,
+    title: "Интеграция с CRM",
+    description: "Бот пишет и читает данные напрямую из вашей CRM-системы.",
+  },
+  {
+    icon: Mail,
+    title: "Рассылки",
+    description: "Массовые и сегментированные рассылки по базе клиентов.",
+  },
+];
+
+export default function BotsPage() {
+  return (
+    <>
+      <PageHero
+        eyebrow="Боты для соцсетей"
+        title="Боты, которые"
+        highlight="работают без выходных"
+        subtitle="Создаём Telegram- и VK-ботов любой сложности: автоматизация заявок, уведомления, интеграция с CRM и сервисами вашего бизнеса."
+      >
+        <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 grid max-w-6xl gap-5 lg:grid-cols-2">
+          {platforms.map((platform) => (
+            <div
+              key={platform.title}
+              className="rounded-2xl border border-white/[0.06] bg-base-900/50 p-8"
+            >
+              <div className="mb-5 flex h-11 w-11 items-center justify-center rounded-xl border border-blue-500/25 bg-blue-500/10 text-blue-400">
+                <platform.icon size={20} strokeWidth={1.75} />
+              </div>
+              <h3 className="font-display text-xl font-medium">{platform.title}</h3>
+              <p className="mt-3 text-ink-500">{platform.description}</p>
+              <ul className="mt-6 space-y-3">
+                {platform.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>
+      </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 sm:grid-cols-2 lg:grid-cols-3">
+            {useCases.map((item) => (
+              <div
+                key={item.title}
+                className="rounded-2xl border border-white/[0.06] bg-base-900/40 p-6"
+              >
+                <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">
+                  <item.icon size={18} strokeWidth={1.75} />
+                </div>
+                <h3 className="font-medium text-ink-100">{item.title}</h3>
+                <p className="mt-2 text-sm leading-relaxed text-ink-500">
+                  {item.description}
+                </p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      <CTASection
+        title="Готовы автоматизировать общение с клиентами?"
+        subtitle="Опишите задачу — предложим сценарий бота и сроки разработки."
+      />
+    </>
+  );
+}