first commit

2026-08-03 21:02:34 +04:00
commit 2dd4f32646
39 changed files with 2326 additions and 0 deletions
@@ -0,0 +1,160 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { Check, ArrowUpRight } from "lucide-react";
+import PageHero from "@/components/PageHero";
+import SectionEyebrow from "@/components/SectionEyebrow";
+import CTASection from "@/components/CTASection";
+
+export const metadata: Metadata = {
+  title: "Сайты для бизнеса",
+  description:
+    "Разработка сайтов-визиток и полноценных корпоративных сайтов для малого и среднего бизнеса.",
+};
+
+const offers = [
+  {
+    title: "Сайт-визитка",
+    description:
+      "Компактный сайт на 1–5 страниц: рассказать о компании, показать услуги и получить первые заявки.",
+    points: [
+      "Адаптивная вёрстка под любые экраны",
+      "Форма заявки и контакты на видном месте",
+      "Быстрый запуск — от нескольких дней",
+    ],
+  },
+  {
+    title: "Корпоративный сайт под ключ",
+    description:
+      "Полноценный сайт для компании: каталог, блог, личный кабинет, интеграции с CRM и сервисами.",
+    points: [
+      "Структура под задачи бизнеса, а не шаблон",
+      "SEO-оптимизация и подготовка к продвижению",
+      "Интеграция с CRM, ботами и аналитикой",
+    ],
+  },
+];
+
+const steps = [
+  {
+    n: "01",
+    title: "Бриф",
+    description: "Обсуждаем задачи бизнеса, аудиторию и нужный результат.",
+  },
+  {
+    n: "02",
+    title: "Прототип и дизайн",
+    description: "Собираем структуру страниц и визуальный стиль сайта.",
+  },
+  {
+    n: "03",
+    title: "Разработка",
+    description: "Вёрстка и программирование с адаптацией под все устройства.",
+  },
+  {
+    n: "04",
+    title: "Тестирование",
+    description: "Проверяем работу форм, скорость и корректность на разных устройствах.",
+  },
+  {
+    n: "05",
+    title: "Запуск и поддержка",
+    description: "Публикуем сайт и остаёмся на связи для доработок.",
+  },
+];
+
+const included = [
+  "Адаптивная вёрстка под мобильные, планшеты и десктоп",
+  "SEO-оптимизация: метатеги, семантическая разметка, скорость загрузки",
+  "Интеграция форм обратной связи с Telegram, email или CRM",
+  "Подключение аналитики (Яндекс.Метрика, Google Analytics)",
+  "Настройка домена, SSL-сертификата и хостинга",
+  "Инструкция по управлению сайтом после запуска",
+];
+
+export default function WebsitesPage() {
+  return (
+    <>
+      <PageHero
+        eyebrow="Разработка сайтов"
+        title="Сайты, которые"
+        highlight="работают на бизнес"
+        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>
+        <Link
+          href="#process"
+          className="inline-flex items-center gap-1.5 rounded-full border border-white/[0.12] px-6 py-3.5 font-medium text-ink-100 transition-colors hover:bg-white/[0.05]"
+        >
+          Как мы работаем
+        </Link>
+      </PageHero>
+
+      <section className="px-6 py-20">
+        <div className="mx-auto grid max-w-6xl gap-5 lg:grid-cols-2">
+          {offers.map((offer) => (
+            <div
+              key={offer.title}
+              className="rounded-2xl border border-white/[0.06] bg-base-900/50 p-8"
+            >
+              <h3 className="font-display text-xl font-medium">{offer.title}</h3>
+              <p className="mt-3 text-ink-500">{offer.description}</p>
+              <ul className="mt-6 space-y-3">
+                {offer.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 id="process" className="scroll-mt-24 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-8 sm:grid-cols-2 lg:grid-cols-5">
+            {steps.map((step) => (
+              <div key={step.n}>
+                <p className="font-mono text-sm text-blue-400">{step.n}</p>
+                <h3 className="mt-2 font-display text-lg font-medium">
+                  {step.title}
+                </h3>
+                <p className="mt-2 text-sm leading-relaxed text-ink-500">
+                  {step.description}
+                </p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      <section className="px-6 py-20">
+        <div className="mx-auto max-w-6xl rounded-3xl border border-white/[0.06] bg-base-900/40 p-10">
+          <SectionEyebrow>Что входит в разработку</SectionEyebrow>
+          <div className="mt-6 grid gap-4 sm:grid-cols-2">
+            {included.map((item) => (
+              <div key={item} className="flex items-start gap-2.5">
+                <Check size={17} className="mt-0.5 shrink-0 text-blue-400" />
+                <span className="text-ink-300">{item}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      <CTASection />
+    </>
+  );
+}