// shark service — page sections
const { useState: useS, useEffect: useE } = React;
const INDEX_URL = "index.html";
const COFFEE_URL = "coffee.html";
const LOGO_SRC = "components/logo.png";
function LogoMark() {
return (
);
}
const PHONE_DISPLAY = "+375 (44) 527-28-27";
const PHONE_HREF = "tel:+375445272827";
const TELEGRAM_HREF = "https://t.me/+375445272827";
const VIBER_HREF = "viber://chat?number=%2B375445272827";
const WHATSAPP_HREF = "https://wa.me/375445272827";
const HOURS_DISPLAY = "9.00–22.00 · Без выходных";
const scrollToSection = (id) => {
const el = document.getElementById(id);
if (!el) return;
const run = () => {
const root = getComputedStyle(document.documentElement);
const hdr = document.querySelector(".hdr");
const gap = parseFloat(root.getPropertyValue("--scroll-gap")) || 12;
const padKeep = parseFloat(root.getPropertyValue("--scroll-pad-keep")) || 20;
const offset = hdr ? hdr.offsetHeight + gap : 88;
const padTop = el.classList.contains("section") ? parseFloat(getComputedStyle(el).paddingTop) || 0 : 0;
const top = el.getBoundingClientRect().top + window.scrollY - offset + padTop - padKeep;
window.scroll({ top: Math.max(0, top), behavior: "smooth" });
};
run();
requestAnimationFrame(run);
};
/* ---------------- Studio rationale ribbon ---------------- */
function Rationale() {
const [open, setOpen] = useS(false);
const refs = [
{ ref: "REF 01 · coffeemachinerepaircenter.com", obj: "Цель — провести посетителя по единой истории сверху вниз.", krs: ["Фиксированный порядок: обещание в герое → эмпатия к проблеме → услуги → процесс → доверие → конверсия.", "Каждый блок отвечает на вопрос, поднятый предыдущим — скролл ощущается как путь.", "Спокойный ритм — одна идея на секцию, без конкуренции за внимание."] },
{ ref: "REF 02 · grajqevci.com", obj: "Цель — сделать «как заказать сервис?» очевидным на любой точке скролла.", krs: ["Постоянная закреплённая шапка с телефоном и кнопкой заявки на каждом экране.", "Полосы CTA повторяются между каждой крупной секцией.", "Доступ к контакту никогда не дальше половины скролла."] },
{ ref: "REF 03 · reliantcoffee.com", obj: "Цель — вплести повторные призывы к контакту между блоками.", krs: ["Тон CTA чередуется (звонок / запись / форма), чтобы повтор не раздражал.", "Акцентные CTA выделяются на нейтральных полосах для мгновенной считываемости.", "Полная форма контакта появляется в середине и снова перед футером."] },
{ ref: "REF 04 · tripleshotservices.com", obj: "Цель — сделать каждую услугу понятной.", krs: ["Каждая услуга: «решаемую проблему» → «что входит» → «что включено».", "Единая анатомия карточки: иконка, заголовок, описание, чек-лист, свой CTA.", "Простой язык и явный список включённого снимают неопределённость."] }];
return (
setOpen((o) => !o)}>
Обоснование дизайнаOKR-анализ 4 референсных сайтов — синтезирован в этот дизайн{open ? "Скрыть" : "Читать"}
Перед дизайном каждый референс проанализирован как Цель (что сайт делает хорошо) плюс конкретные Key Results, которые этого достигают. Лучшие Key Results затем объединены: нарративная структура из #1, насыщение CTA из #2 и #3, и подробные описания услуг из #4.
{refs.map((r) =>
{r.ref}
{r.obj}
{r.krs.map((k, i) =>
{k}
)}
)}
Синтез → Единая направляющая история (REF 1) с доступом к контакту на любой глубине скролла через закреплённую шапку, повторяющиеся полосы и две полные формы (REF 2 и 3), построенная вокруг подробных карточек услуг с чек-листами (REF 4). Доверие строится на гарантиях, сертификации и прозрачности — никогда на отзывах или выдуманной истории, ведь это новый сервис.
);
}
/* ---------------- Top contact bar ---------------- */
function TopBar() {
return (
);
}
/* ---------------- Hero ---------------- */
function Hero({ layout, onQuote }) {
const heroSub = "Бытовые и профессиональные кофемашины — от домашних до барных. Протекает, слабый напор, не греет или капризничает кофемолка: быстро находим причину и ремонтируем оригинальными деталями с гарантией по договору.";
const promises = [["building", "Бытовые и профессиональные"], ["award", "Сертифицированные мастера"], ["box", "Оригинальные и OEM-детали"], ["shield", "Гарантия по договору"]];
const HeroBadges = () =>
Бесплатная диагностикаРасчёт до начала работ
В том числе профессиональныеКофемашины для кафе и ресторанов
);
}
/* ---------------- Problem / reassurance ---------------- */
function Problem({ onQuote }) {
return (
Кофемашина барахлит?
Находим настоящую причину — и быстро её устраняем.
Кофемашину почти всегда можно спасти. Чаще всего причина простая: накипь, изношенное уплотнение, уставший насос или датчик — и всё это ремонтируется. Мы находим первопричину, а не гадаем, объясняем всё простым языком и возвращаем Вас к отличному кофе.
{SYMPTOMS.map((s) =>
{s.t}{s.d}
)}
);
}
/* ---------------- How it works ---------------- */
function HowItWorks({ dark = true }) {
return (
Опишите симптом — а ниже видно, как обычно решается проблема. Точную причину и расчёт мы назовём после бесплатной диагностики.
{DIAGNOSE.map((d, i) =>
{d.t}
Симптомы: {d.sym}
Что делаем: {d.do}
)}
);
}
/* ---------------- Final CTA ---------------- */
function FinalCta({ onQuote }) {
return (
Мы готовы, когда и Вы
Вернём Вашей кофемашине идеальный вкус.
Бесплатная диагностика, расчёт до начала работ, оригинальные детали и гарантия по договору. Запишитесь онлайн за две минуты или позвоните мастеру прямо сейчас.