// ============================================================ // Digital Slap — Главная (home page) — v2 // Пофикшено: шрифты, отступы, контрастность, анимации, фото. // ============================================================ const { useState, useEffect, useRef } = React; // ---------- HERO ---------- function HomeHero() { return (
); } // ---------- PROBLEM ---------- function ProblemGlyph({ kind, accent }) { const c = accent || DS_ACCENT.bg; const dim = DS_THEME.dim; if (kind === "metrics") return ( CTR ↑ ); if (kind === "chain") return ( {[8, 40, 72, 104].map((x, i) => ( {["T","S","W","?"][i]} {i < 3 && } ))} ); if (kind === "funnel") return ( 100 ? 3 ); // chaos return ( {[ [12, 18], [42, 14], [78, 20], [102, 12], [8, 44], [34, 50], [68, 42], [94, 46], [20, 70], [54, 64], [82, 70], [108, 66] ].map(([x, y], i) => ( ))} ); } function HomeProblem() { const cards = [ { t: "Имитация бурной деятельности вместо продаж", b: "Вместо реальных денег в кассе вам показывают CTR и клики. Вы платите за процессы, а не за результат, поэтому связь между рекламным бюджетом и чистой прибылью остаётся туманной.", glyph: "metrics", span: 2, tone: "surface" }, { t: "Нет ответственного за финальный результат", b: "Один делает таргет, второй — контент, третий — сайт, четвёртый — съёмки. Никто не отвечает за результат целиком. А сводить всех вместе приходится вам в WhatsApp по вечерам.", glyph: "chain", span: 1, tone: "outline" }, { t: "Красивый маркетинг ≠ продажи", b: "Контент эстетичный, реклама в вашем стиле, сайт современный. А заявок всё равно мало. Непонятно, на каком этапе воронки теряются люди.", glyph: "funnel", span: 1, tone: "surface2" }, { t: "Хаос в маркетинге", b: "Больше клиентов сегодня означает больше хаоса завтра. Масштабироваться страшно: непонятно, какой рычаг нажать, чтобы вырасти в два раза и не превратить себя в диспетчера на круглосуточной связи.", glyph: "chaos", span: 2, tone: "accent" }, ]; const cardBg = (tone) => ({ surface: DS_THEME.surface, surface2: "#0F0F0F", outline: "transparent", accent: "#0F0F0F", }[tone]); return (

Почему ваш маркетинг превратился в «чёрный ящик»

Вы ежемесячно вливаете деньги в продвижение. Таргетолог присылает отчёты об охватах, SMM-щик радуется лайкам, а вы не понимаете: три клиента, которые купили на неделе, пришли из рекламы или просто сработал «сарафан»?

{cards.map((c, i) => { const isAccent = c.tone === "accent"; const isOutline = c.tone === "outline"; return (
{isAccent && ( ); })}
); } // ---------- DASHBOARD MOCK (для блока "Подход") ---------- function DashboardMock() { return (
{/* top bar */}
Live · Октябрь 2026
Обновлено 4 мин назад
{/* KPI row */}
{[ { label: "Бюджет", val: "€ 4 820", delta: "−12%", up: false }, { label: "Заявки", val: "127", delta: "+38%", up: true }, { label: "Клиенты", val: "41", delta: "+24%", up: true }, ].map((k, i) => (
{k.label}
{k.val}
{k.delta} мес.
))}
{/* Chart */}
CAC vs LTV · 8 недель
LTV CAC
{/* gridlines */} {[0, 1, 2, 3].map(i => ( ))} {/* CAC (gray, descending) */} {/* LTV (lime, ascending) */} {/* dot */}
{/* Channel breakdown */}
{[ { ch: "Meta / Instagram", pct: 62, roas: "4.2×" }, { ch: "Google Search", pct: 48, roas: "3.1×" }, { ch: "YouTube Ads", pct: 28, roas: "2.4×" }, ].map((c, i) => (
{c.ch}
{c.roas}
))}
); } // ---------- APPROACH ---------- function HomeApproach() { return (

Маркетинг как дашборд,
а не чёрный ящик

Мы выстраиваем работу так, чтобы вы в любой момент видели цифры, которые имеют смысл. Не охваты и клики, а стоимость клиента и окупаемость — от первого показа рекламы до оплаченного счёта.

Берём маркетинг целиком: одна команда ведёт стратегию, рекламу, контент и сайт. Масштабируем то, что окупается, и отключаем то, что перестало работать.

); } // ---------- SERVICE ICONS ---------- function IconInstagram({ size = 36, color }) { return ( ); } function IconMeta({ size = 36, color }) { return ( ); } function IconGoogle({ size = 36, color }) { return ( ); } function IconLanding({ size = 36, color }) { return ( ); } // ---------- SERVICES ---------- function HomeServices() { const services = [ { Icon: IconInstagram, name: "Reels под ключ", href: "/reels.html", desc: "От сценария до публикации. Контент, после которого пишут в директ и покупают, а не просто ставят лайки.", accent: true }, { Icon: IconMeta, name: "Meta таргет", href: "/meta-target.html", desc: "Facebook и Instagram. Ведём клиента по воронке продаж, которая окупается." }, { Icon: IconGoogle, name: "Google реклама", href: "/google-reklama.html", desc: "Search, Performance Max и YouTube. Ловим людей, которые уже ищут ваш продукт." }, { Icon: IconLanding, name: "Лендинги", href: "/landings.html", desc: "Сайты, которые продают. Копирайтинг, дизайн, вёрстка и аналитика — в одной связке." }, ]; return (

Как мы приводим клиентов бизнесу

{services.map((s, i) => { const iconColor = s.accent ? DS_ACCENT.ink : DS_ACCENT.bg; return (

{s.name}

{s.desc}

Подробнее →
 ); })}
); } // ---------- PROCESS ---------- function HomeProcess() { const steps = [ { t: "Консультация", sub: "30 минут", b: "На видеозвонке разбираем вашу ситуацию: что делаете сейчас, какие цифры, где застряли. На выходе подсветим слабые места маркетинга и варианты, как их закрыть. Если поймём, что вы не наш клиент — скажем прямо.", meta: [["Длительность", "30 мин"], ["Формат", "Zoom"], ["Цена", "Бесплатно"]], kind: "call", }, { t: "Стратегия", sub: "Карта на 3–6 месяцев", b: "Строим план маркетинга: с какого канала начинаем, сколько закладываем на рекламу, прогноз по заявкам и окупаемости, KPI, по которым вы нас оцениваете.", meta: [["Сроки", "5–7 дней"], ["Горизонт", "3–6 мес"], ["KPI", "CAC · LTV · ROAS"]], kind: "plan", }, { t: "Запуск", sub: "Всё под ключ", featured: true, b: "Берём на себя всё: сценарии, съёмки, креативы, рекламные кабинеты, лендинги, аналитику. Вы утверждаете оффер и ключевые макеты — остальное двигаем сами.", meta: [["До первых заявок", "7–14 дней"], ["Ваше время", "≈ 3 ч/нед"], ["Команда", "5 специалистов"]], kind: "launch", }, { t: "Ведение", sub: "Дашборд 24/7", b: "В любой момент открываете дашборд и видите цифры: бюджет, заявки, стоимость клиента, окупаемость. Каждый день усиливаем то, что работает, и отключаем то, что нет.", meta: [["Отчётность", "Live дашборд"], ["Созвоны", "1 раз в неделю"], ["Оптимизация", "Ежедневно"]], kind: "ops", }, { t: "Масштабирование", sub: "Когда связки окупаются", b: "Когда основной канал стабильно даёт положительный ROI — подключаем следующий. Каждый новый канал проходит тот же цикл: гипотеза → тест → оптимизация → масштаб.", meta: [["Старт", "после 2–3 мес"], ["Каналов", "2–4 паралл."], ["Цель", "×2–3 объёма"]], kind: "scale", }, ]; return (

Как устроена работа с Digital Slap

{/* Progress pills */}
{steps.map((s, i) => (
{i + 1} {s.t}
))}
{/* Vertical connector line */}
Начните с шага 01
30 минут, чтобы понять, подходим ли мы друг другу
Получить бесплатную консультацию
); } // ---------- FOUNDER ---------- function HomeFounder() { return (
Степан Лаппо

Основатель
агентства

Степан Лаппо

9 лет строю маркетинг под ключ: от стратегии и позиционирования до управления командой и контроля за цифрами. Работал с Ed-Tech, клиниками, услугами и стартапами в Чехии и за её пределами.

Особенность подхода — считаю деньги бизнеса до конца воронки, а не до клика или заявки. Сначала разбираю, на чём ваш бизнес зарабатывает сегодня, и только потом предлагаю инструменты, которые встраиваются в эту экономику.

Ed-Tech· Клиники· Услуги· Стартапы
); } // ---------- FAQ ---------- function FAQItem({ q, a, idx, open, onToggle }) { const ref = React.useRef(null); React.useEffect(() => { if (open && ref.current) { // небольшой таймаут чтобы аккордеон успел раскрыться setTimeout(() => { const el = ref.current; if (!el) return; const rect = el.getBoundingClientRect(); const header = document.querySelector("[data-ds-header]"); const headerH = (header ? header.getBoundingClientRect().height : 0) + 20; // если верх элемента под хедером — подскроллим if (rect.top < headerH) { window.scrollTo({ top: window.scrollY + rect.top - headerH, behavior: "smooth" }); } }, 60); } }, [open]); return (

{a}

); } function HomeFAQ() { const [open, setOpen] = useState(-1); const faq = [ { q: "С каким бизнесом вы работаете?", a: "С владельцами бизнеса с оборотом от 250 000 евро в год. В основном — клиники, услуги, образовательные проекты и стартапы. Хотите поработать, но ваш бизнес меньше? На консультации поймём, подходим ли мы друг другу." }, { q: "Сколько стоят ваши услуги?", a: "Зависит от услуги и объёма работ. Точную стоимость рассчитаем после консультации, когда поймём, какой канал имеет смысл запускать именно у вас и какого масштаба нужна команда под вашу задачу." }, { q: "Как устроена бесплатная консультация?", a: "Мы встречаемся с вами на 30 минут по видеозвонку. Вы рассказываете про бизнес и текущий маркетинг, я задаю вопросы по цифрам, сайту, контенту. На выходе — конкретные слабые места и варианты, как их закрыть. Если увидим, что нам по пути, — обсуждаем, как мы могли бы это реализовать." }, { q: "Можно ли работать с вами удалённо?", a: "Да. Большинство клиентов работают с нами удалённо — встречи по Zoom, дашборды и материалы в облаке. Съёмки Reels проходят в Праге или выезжаем на локацию клиента. Их мы также можем курировать удалённо." }, { q: "На каких языках работаете?", a: "Русский, чешский, английский. Всю коммуникацию и дашборды ведём на удобном вам языке." }, { q: "Как быстро видны результаты?", a: "Зависит от канала. Google и Meta дают первые заявки уже в первую неделю, но честную оценку канала нужно делать на горизонте 4–6 недель — за это время алгоритмы обучаются, а мы успеваем проверить несколько гипотез. Reels и органический контент обычно требуют 2–3 месяца до стабильных результатов. На консультации скажу реалистичный прогноз для вашей ниши." }, ]; return (

Частые вопросы

Не нашли ответа? Задайте вопрос напрямую в Telegram или на консультации.

{faq.map((f, i) => ( setOpen(open === i ? -1 : i)}/> ))}
); } // ---------- CONTACT FORM ---------- // Форма вынесена в общий компонент DSContactSection (в ds.jsx) — // используется и главной, и страницами-заглушками. function HomeContact() { return ; } // ---------- ROOT ---------- function HomeApp() { return ( ); } ReactDOM.createRoot(document.getElementById("root")).render();