// Hyper · section components function NavBar() { const [open, setOpen] = React.useState(false); // блокируем скролл фона, пока открыто мобильное меню React.useEffect(() => { document.body.classList.toggle('nav-open', open); return () => document.body.classList.remove('nav-open'); }, [open]); // закрываем меню по Esc и при возврате на десктоп React.useEffect(() => { const onKey = (e) => { if (e.key === 'Escape') setOpen(false); }; const onResize = () => { if (window.innerWidth > 900) setOpen(false); }; window.addEventListener('keydown', onKey); window.addEventListener('resize', onResize); return () => { window.removeEventListener('keydown', onKey); window.removeEventListener('resize', onResize); }; }, []); const links = [ { href: '#directions', label: 'Отличия', n: '01' }, { href: 'services.html', label: 'Услуги', n: '02' }, { href: '#metrics', label: 'Каналы', n: '03' }, { href: 'work.html', label: 'Кейсы', n: '04' }, { href: '#contact', label: 'Контакты', n: '05' }, ]; return ( <> {/* ── мобильное меню (полноэкранное) — вне

, чтобы не наследовать containing block от backdrop-filter навбара ── */} ); } // ── Hero brand mark function HeroMark() { return (

); } // ── Бегущий слоган: вторая строка hero печатается и сменяется по кругу (typewriter) function TypewriterRotator({ phrases }) { const [index, setIndex] = React.useState(0); // какая фраза сейчас const [count, setCount] = React.useState(0); // сколько букв показано const [phase, setPhase] = React.useState('idle'); // idle | typing | deleting const TYPE = 60; // мс на букву при печати const ERASE = 32; // мс на букву при стирании const HOLD = 1600; // пауза на готовой фразе const START = 1300; // задержка старта — даём отыграть reveal-анимации строки // Старт печати с небольшой задержкой — даём отыграть reveal-анимации строки. // (Намеренно не глушим эффект при prefers-reduced-motion: бегущий слоган — // ключевой имиджевый элемент главного экрана, он должен работать у всех.) React.useEffect(() => { const t = setTimeout(() => setPhase('typing'), START); return () => clearTimeout(t); }, []); React.useEffect(() => { if (phase === 'idle') return; const word = phrases[index]; let t; if (phase === 'typing') { if (count < word.length) { t = setTimeout(() => setCount(count + 1), TYPE); } else { t = setTimeout(() => setPhase('deleting'), HOLD); } } else if (phase === 'deleting') { if (count > 0) { t = setTimeout(() => setCount(count - 1), ERASE); } else { setIndex((index + 1) % phrases.length); setPhase('typing'); } } return () => clearTimeout(t); }, [phase, count, index, phrases]); const word = phrases[index]; return ( {word.slice(0, count)} ); } function Hero() { return (

Хайпер · агентство маркетинга · 2026

Маркетинг, который

Стратегия, SMM, личный бренд и продакшн. Каждое решение обосновано цифрами, каждая цифра упакована в смелую идею.

Смотреть кейсы ↓

100+ проектов

300K+ привлечённых лидов

7+ лет на рынке маркетинга

); } // ── Ticker: two counter-rotating rows (v2) function Ticker() { const itemsA = [ 'Стратегия', 'SMM', 'Перформанс', 'Личный бренд', 'Продакшн', 'Аналитика', 'Креатив', 'Reels']; const itemsB = [ '100+ проектов', '300K+ лидов', '7 лет на рынке', '13,1М охват с одного Reels', '×30 рост Reels', '+489% переходов', '97,7% органика', 'Махачкала · Дагестан']; const make = (items) => {items.map((t, i) => {t} )} ; const blockA = make(itemsA); const blockB = make(itemsB); return ( <>

{blockA}{blockA}{blockA}{blockA}

{blockB}{blockB}{blockB}{blockB}

); } // ────────────────────────────────────────────── // Scroll-driven "constructor" assembly for card grids — same motion language as // the client-logos block, with a left-to-right cascade so cards lock into the // grid one after another. Uses the independent `translate`/`scale` CSS props so // it never fights each card's own hover transform. Returns a cleanup fn. // ────────────────────────────────────────────── function runConstructor(grid, { expand = 0.1, stagger = 0.5, lift = 30, dim = 0.65 } = {}) { const cards = [...grid.children]; const n = cards.length; if (!n) return () => {}; const clamp = (v) => v < 0 ? 0 : v > 1 ? 1 : v; const ease = (t) => t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2; // each card's offset from grid centre (layout coords, transform-independent); // re-measured on resize so it tracks the responsive breakpoints let off = []; const measure = () => { const cx = grid.clientWidth / 2, cy = grid.clientHeight / 2; off = cards.map((c) => ({ x: c.offsetLeft + c.offsetWidth / 2 - cx, y: c.offsetTop + c.offsetHeight / 2 - cy, })); }; measure(); window.addEventListener('resize', measure); let raf = 0, last = -1; const tick = () => { const rect = grid.getBoundingClientRect(); const vh = window.innerHeight || 1; const v = (rect.top + rect.height / 2) / vh; // 1 = grid centre at viewport bottom const raw = clamp((1.08 - v) / (1.08 - 0.5)); // linear 0→1, fully locked by v=0.5 if (Math.abs(raw - last) > 0.0006) { last = raw; for (let i = 0; i < n; i++) { const local = clamp((raw - (i / n) * stagger) / (1 - stagger)); // per-card cascade const k = 1 - ease(local); // 1 = apart, 0 = locked into slot const o = off[i]; cards[i].style.translate = `${(o.x * expand * k).toFixed(2)}px ${(o.y * expand * k + lift * k).toFixed(2)}px`; cards[i].style.scale = (1 - 0.05 * k).toFixed(3); cards[i].style.opacity = (1 - dim * k).toFixed(3); } } raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => { cancelAnimationFrame(raf); window.removeEventListener('resize', measure); }; } // ────────────────────────────────────────────── // Mobile reveal — на телефоне «конструктор» требует долгой прокрутки, чтобы // собрать карточки в сетку. Вместо него: карточки поочерёдно выезжают с боков // (нечётные — слева, чётные — справа) по мере появления в кадре. Направление и // смещение заданы в CSS (.m-reveal, ≤640px), здесь только триггер на скролл. // Карточки уже несут класс .m-reveal из разметки, поэтому на мобиле скрыты // сразу (без вспышки); на десктопе те же правила выключены медиазапросом. // ────────────────────────────────────────────── function runMobileReveal(grid) { const cards = [...grid.children]; if (!cards.length) return () => {}; // подчищаем инлайн-стили, если до ресайза успел отработать десктопный конструктор cards.forEach((c) => { c.style.translate = ''; c.style.scale = ''; c.style.opacity = ''; }); const io = new IntersectionObserver((entries) => { entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add('m-in'); io.unobserve(e.target); } }); }, { threshold: 0.25 }); cards.forEach((c) => io.observe(c)); return () => io.disconnect(); } // Выбирает анимацию под ширину экрана: десктоп — «конструктор», мобайл — выезд // с боков. Переключается при пересечении брейкпоинта (поворот экрана / ресайз). function runGridAssembly(grid, constructorOpts) { const desktop = window.matchMedia('(min-width: 641px)'); let cleanup = () => {}; const setup = () => { cleanup(); cleanup = desktop.matches ? runConstructor(grid, constructorOpts) : runMobileReveal(grid); }; setup(); desktop.addEventListener('change', setup); return () => { desktop.removeEventListener('change', setup); cleanup(); }; } function Directions() { const bentoRef = React.useRef(null); React.useEffect(() => { if (!bentoRef.current) return; return runGridAssembly(bentoRef.current, { expand: 0.09, stagger: 0.5, lift: 28, dim: 0.6 }); }, []); const points = [ { idx: '01', area: 'a', featured: true, title: 'Весь маркетинг под ключ', body: 'Брендинг, стратегия, SMM, performance, продакшн — одна команда вместо пяти подрядчиков. С нуля или после провального тендера.', tag: 'полный цикл' }, { idx: '02', area: 'b', title: '7+ лет на рынке', body: 'Запустились в Махачкале одними из первых.', tag: 'опыт' }, { idx: '03', area: 'c', title: 'Цифры, а не отчёты', body: 'KPI, ROAS, CPL. Канал не выходит — закрываем без эго.', tag: 'результат' }, { idx: '04', area: 'd', title: 'Смелые идеи в метрике', body: 'Креатив доказывает себя цифрами, а не на дегустации.', tag: 'креатив' }, { idx: '05', area: 'e', title: 'Команда, которая не рассыпается', body: 'Продюсер на каждом проекте, отчёты по понедельникам, планы на квартал. Никаких «забыли, потерялись, заболели».', tag: 'процесс' }]; return (

01 · отличия

Чем мы отличаемся
от других.

Пять опор, на которых держится наша работа. Без маркетинговой воды — только то, что мы готовы защищать на любом созвоне.

{points.map((p) =>

/ {p.idx} {p.tag}

{p.title}

{p.body}

{p.featured && }

)}

); } // ────────────────────────────────────────────── // SERVICES — компактное превью направлений (главная). // Полный прайс и состав работ — на отдельной странице services.html. // ────────────────────────────────────────────── function ServicePreviewCard({ dir }) { return (

/ {dir.idx} {dir.tag && {dir.tag}}

{dir.name}

{dir.desc}

·{t}

Смотреть тарифы

); } function Services() { const gridRef = React.useRef(null); React.useEffect(() => { if (!gridRef.current) return; return runGridAssembly(gridRef.current, { expand: 0.28, stagger: 0.5, lift: 30, dim: 0.72 }); }, []); const directions = [ { id: 'marketing', idx: '01', name: 'Маркетинг', tag: 'полный цикл', desc: 'Забираем управление маркетингом на себя и превращаем его в конвейер лидов. Считаем каждый канал — что не приносит денег, закрываем без эго.', items: ['Start — фокус на одной метрике', 'Boost — все каналы и стратегия'] }, { id: 'smm', idx: '02', name: 'SMM', tag: 'контент', desc: 'Instagram, который работает на охваты и продажи: контент по стратегии, блогеры, продвижение. От стабильного присутствия до заметного роста.', items: ['База — регулярное ведение', 'Pro — комплексный рост'] }, { id: 'maximum', idx: '03', name: 'Максимум', tag: 'флагман', featured: true, desc: 'Весь маркетинг и SMM в одной команде под единым KPI. Один подрядчик с ответственностью за результат — вместо пяти, которые кивают друг на друга.', items: ['Boost+ маркетинг', 'Pro+ SMM', 'Продюсер и арт-директор'] }, { id: 'branding', idx: '04', name: 'Брендинг', tag: 'айдентика', desc: 'Визуальный код, который раскрывает смыслы бренда и работает на продажи. Не просто «красиво» — маркетинговый подход от позиционирования.', items: ['Логотип и айдентика', 'Дизайн упаковки', 'Позиционирование'] }, { id: 'production', idx: '05', name: 'Продакшн', tag: 'видео', desc: 'Рекламные ролики, которые цепляют: от reels на телефон до павильона с режиссёром. Идея, съёмка, монтаж — под любую площадку.', items: ['Сценарий и раскадровка', 'Съёмка и монтаж'] }, { id: 'extra', idx: '06', name: 'Доп. услуги', tag: 'разовые', desc: 'Глубокий разбор бизнеса и каналов с готовой дорожной картой роста. Когда нужен не подрядчик на ведение, а ясность, что делать дальше.', items: ['Разработка стратегии', 'Аудит маркетинга и SMM'] }]; return (

02 · услуги

Что мы делаем
и какой даём результат.

Шесть направлений — от одной услуги до полного цикла. Здесь коротко, под какую задачу каждое. Подробные тарифы, состав работ и цены — на отдельной странице.

{directions.map((d) => )}

Все услуги и цены → 6 направлений · можно собрать своё решение

); } function Channels() { // "Decoder" heading: on first scroll-in every letter flickers through digits // (a nod to "считаем") and then resolves into the slogan, left-to-right. const headingRef = React.useRef(null); React.useEffect(() => { const h2 = headingRef.current; if (!h2) return; // wrap each character in its own span, preserving the red/muted colour spans // and the
line breaks; spaces stay as plain text const chars = []; const walk = (node) => { [...node.childNodes].forEach((child) => { if (child.nodeType === 3) { const frag = document.createDocumentFragment(); for (const ch of child.nodeValue) { if (ch === ' ' || ch === ' ') { frag.appendChild(document.createTextNode(ch)); continue; } const s = document.createElement('span'); s.className = 'sc'; s.textContent = ch; frag.appendChild(s); chars.push({ el: s, fin: ch, letter: /[A-Za-zА-Яа-яЁё]/.test(ch) }); } child.replaceWith(frag); } else if (child.nodeType === 1 && child.tagName !== 'BR') { walk(child); } }); }; walk(h2); if (!chars.length) return; const DIGITS = '0123456789'; let raf = 0, running = false, widthsLocked = false; const run = () => { // lock each slot to its final width once so flickering digits never reflow the line if (!widthsLocked) { chars.forEach((c) => { c.el.style.display = 'inline-block'; c.el.style.width = c.el.getBoundingClientRect().width + 'px'; c.el.style.textAlign = 'center'; }); widthsLocked = true; } cancelAnimationFrame(raf); running = true; const DUR = 1050; chars.forEach((c, i) => { c.revealAt = c.letter ? (i / chars.length) * (DUR * 0.6) + Math.random() * (DUR * 0.4) : 0; c.nextFlip = 0; c.el.classList.remove('sc-in'); // allow the red "click" to replay }); let start = 0; const frame = (ts) => { if (!start) start = ts; const t = ts - start; let done = true; for (const c of chars) { if (!c.letter || t >= c.revealAt) { if (c.el.textContent !== c.fin) { c.el.textContent = c.fin; c.el.classList.add('sc-in'); } } else { done = false; if (ts >= c.nextFlip) { c.el.textContent = DIGITS[(Math.random() * 10) | 0]; c.nextFlip = ts + 45; } } } if (!done) raf = requestAnimationFrame(frame); else { chars.forEach((c) => { c.el.textContent = c.fin; }); running = false; } }; raf = requestAnimationFrame(frame); }; // Replays every time the slogan re-enters view. Hysteresis (re-arm only after // it drops below 0.2) prevents re-firing while you linger near the edge. let armed = true; const io = new IntersectionObserver((entries) => { entries.forEach((e) => { if (e.intersectionRatio >= 0.4) { if (armed && !running) { armed = false; run(); } } else if (e.intersectionRatio <= 0.2) { armed = true; } }); }, { threshold: [0.2, 0.4] }); io.observe(h2); return () => { cancelAnimationFrame(raf); io.disconnect(); }; }, []); // Channels table: the grid frame stays put while its contents "populate" — // column by column left→right, rows top→down within each column — like a data // feed filling in. Replays each time the table re-enters view. const tableRef = React.useRef(null); React.useEffect(() => { const table = tableRef.current; if (!table) return; const cols = [...table.querySelectorAll('.ch-col')]; const cells = []; cols.forEach((col, ci) => { const items = [col.querySelector('.ch-col-head'), ...col.querySelectorAll('.ch-row')]; items.forEach((el, ri) => { if (el) cells.push({ el, delay: ci * 85 + ri * 55 }); }); }); if (!cells.length) return; const clamp = (v) => v < 0 ? 0 : v > 1 ? 1 : v; const ease = (t) => 1 - Math.pow(1 - t, 3); // easeOutCubic const DUR = 480; const apply = (c, p) => { const e = ease(p); c.el.style.opacity = e.toFixed(3); c.el.style.transform = `translateY(${((1 - e) * 18).toFixed(2)}px)`; }; const reset = () => cells.forEach((c) => { c.el.style.willChange = 'transform, opacity'; c.el.style.opacity = '0'; c.el.style.transform = 'translateY(18px)'; }); reset(); // hidden until first reveal (prevents a flash before the trigger) let raf = 0, running = false; const run = () => { cancelAnimationFrame(raf); running = true; reset(); let start = 0; const frame = (ts) => { if (!start) start = ts; const t = ts - start; let done = true; for (const c of cells) { const p = clamp((t - c.delay) / DUR); apply(c, p); if (p < 1) done = false; } if (!done) raf = requestAnimationFrame(frame); else running = false; }; raf = requestAnimationFrame(frame); }; let armed = true; const io = new IntersectionObserver((entries) => { entries.forEach((e) => { if (e.intersectionRatio >= 0.22) { if (armed && !running) { armed = false; run(); } } else if (e.intersectionRatio <= 0.06) { armed = true; } }); }, { threshold: [0.06, 0.22] }); io.observe(table); return () => { cancelAnimationFrame(raf); io.disconnect(); }; }, []); const channels = [ { idx: '01', name: 'Instagram', kicker: 'основная площадка', rows: [ { k: 'Контент', v: 'Reels, ленты, истории по стратегии бренда' }, { k: 'Блогеры', v: 'Подбор, переговоры, контроль интеграций' }, { k: 'Паблики', v: 'Посевы и тематические сообщества' }] }, { idx: '02', name: 'Telegram', kicker: 'охват и трафик', rows: [ { k: 'Паблики', v: 'Подбор каналов, рекламные посты под ЦА' }, { k: 'Таргет', v: 'Таргетированная реклама внутри Telegram' }, { k: 'Кабинеты', v: 'Запуск и ведение рекламных кабинетов' }] }, { idx: '03', name: 'Яндекс.Директ', kicker: 'тёплая аудитория', rows: [ { k: 'Семантика', v: 'Сбор и кластеризация ключевых запросов' }, { k: 'Поиск', v: 'Объявления под горячий спрос' }, { k: 'РСЯ', v: 'Сети, ретаргет, look-alike по базам' }] }, { idx: '04', name: 'Авито', kicker: 'прямые заявки', rows: [ { k: 'Объявления', v: 'Тексты, фото, упаковка, которая продаёт' }, { k: 'Магазины', v: 'Оформление витрин и тарифов' }, { k: 'Продвижение', v: 'Платное продвижение и аналитика' }] }, { idx: '05', name: 'Гео-карты', kicker: 'локальный поиск', rows: [ { k: 'Карты', v: 'Яндекс, 2ГИС, Google — карточки бизнеса' }, { k: 'Оформление', v: 'Фото, описания, услуги, акции' }, { k: 'Геотаргет', v: 'Реклама по радиусу и районам' }] }, { idx: '06', name: 'Наружка и полиграфия', kicker: 'офлайн-присутствие', rows: [ { k: 'Идея', v: 'Концепт под город, район, бренд' }, { k: 'Дизайн', v: 'Билборды, вывески, носители, мерч' }, { k: 'Размещение', v: 'Подбор площадок, печать, монтаж' }] }]; return (

03 · каналы

Считаем всё, что
движется, а что не движется —
двигаем и считаем.

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

Каналы, с которыми мы работаем 6 направлений

{channels.map((c) =>

/ {c.idx}

{c.name}

{c.kicker}

{r.k}: {r.v}

)}

); } // ────────────────────────────────────────────── // CASES · v3 — компактная превью-карточка // ────────────────────────────────────────────── function CaseDIOX() { return (

{/* media: tilted phones + headline badge */}

215K

SMM полного цикла · 12 месяцев

{/* content: brand, headline, 3 stats, link */}

CASE / 01 витамины и БАДы

DIOX

С 500 до 160 000 {' '}просмотров на Reels
и +489% {' '}переходов на маркетплейсы.

Экспертный контент от врачей, чат-бот в Direct, сетка блогеров по сегментам ЦА. Из витрины с баночками — в канал продаж.

×30 охват Reels

1M+ охват за год

+489% переходов на маркетплейсы

Открыть кейс целиком →

); } function CasePavlonia() { return (

{/* media: tilted phones */}

17,4М

SMM · influence · 6 месяцев

{/* content */}

CASE / 02 сеть кафе · общепит

Павлония

13,1 млн просмотров {' '}с одного Reels.

Связали два формата, которые до нас никто не комбинировал: бытовые скетчи «муж и жена» на охваты и продающие ролики на заказы. Из аккаунта без системы — в контентную машину.

13,1М лучший Reels

+1921% рост охвата

97,7% органика

Открыть кейс целиком →

); } function CaseSHRM() { return (

{/* media: tilted phones */}

7 141 комм.

SMM + маркетинг · 7 месяцев

{/* content */}

CASE / 03 застройщик · недвижимость

ШРМЖК «Пражская»

С 0 до 300 {' '}целевых лидов в месяц
и до 100 000 {' '}охватов.

Отказались от корпоративного контента — продвижение строится вокруг личного бренда собственника: лайфстайл со стройки, вопросы-хуки от первого лица и офферы-дефицит «только 3 квартиры». Из нуля узнаваемости — в поток целевых заявок.

0 → 300 целевых лидов/мес

100K охватов в месяц

50K ₽ рекламный бюджет

Открыть кейс целиком →

); } function Cases() { return (

04 · кейсы

Кейсы, которые говорят
сами за себя.

Коротко: бренд, цифра, что сделали. Полный разбор — на странице кейсов.

Все кейсы → ещё кейсы готовятся к публикации

); } function BriefForm({ status, onSubmit }) { const sent = status === 'sent'; const sending = status === 'sending'; return ( ); } function Contact() { const [status, setStatus] = React.useState('idle'); // idle | sending | sent | error const onSubmit = async (e) => { e.preventDefault(); const f = e.currentTarget; const name = f.elements.name.value.trim(); const phone = f.elements.phone.value.trim(); if (!name || !phone) return; setStatus('sending'); try { await window.sendLead({ name, phone, service: 'Нужна консультация', partnership: false, source: 'Форма в контактах', }); setStatus('sent'); f.reset(); setTimeout(() => setStatus('idle'), 5000); } catch (err) { setStatus('error'); } }; return (

07 · контакты

Давайте считать вместе.

{/* Форма сверху */}

{/* Контакты снизу */}

Телефон · звонок +7 (988) 655-47-17

Telegram @hyper_agency

E-mail hi@hyper.agency

Офис Махачкала · Дагестан

Часы работы Пн–Сб · 10:00–20:00

Соцсети @Hyper_Marketing_agency

); } function Footer() { return ( ); } Object.assign(window, { NavBar, Hero, Ticker, Directions, Services, Channels, Cases, BriefForm, Contact, Footer });