);
}
/* ------------------------------------------------------------------ About */
function About() {
const reasons = [
["Мировой уровень", "Участник международных тату-конвенций и лауреат премий. Постоянно совершенствую навыки."],
["Безопасность", "Только одноразовые материалы и стерилизация в автоклавах класса B."],
["Индивидуальный подход", "Каждый эскиз создаю лично, учитывая ваши пожелания и особенности тела."],
];
return (
{/* atmospheric oversize wordmark */}
Тэд
{/* ----- portrait ----- */}
Tattoo master · с 2015
{/* Фон у фото вырезан (webp с альфой) — мастер стоит прямо на фоне
секции, без прямоугольной подложки. Потому ни overflow, ни cover. */}
{/* Растворяем прямые кромки в фоне секции: низ (подлокотник) и левый
край (коробка) упираются в край кадра прямым резом. Две маски,
пересечение — гаснет там, где гасит любая. Контур головы и плеч
уже вырезан в самом webp, его маски не трогают. */}
{/* ----- profile copy ----- */}
Эталон качества.
Я создаю не просто татуировки, а произведения искусства, которые будут радовать вас всю жизнь. Реализм, графика и орнаменты — авторский подход к каждому эскизу.
{/* Ключ по пути файла, а не по индексу: при перестановке React должен
переносить готовые плитки, а не переписывать их содержимое на месте —
иначе уже загруженные картинки сбрасываются и лента моргает. */}
{items.map((w, i) => (
= order.length ? "~2" : "~1")} w={w} clone={i >= order.length}
onOpen={(e) => open(i, e)}
onFocus={() => glideIntoView(i % order.length)} />
))}
{/* Стили: подсвечен стиль работы в центре, клик — собрать этот стиль подряд. */}
{WORK_STYLES.map((s) => {
const on = s === style;
return (
/* Подчёркивание живёт на внутреннем span, поэтому кнопке можно
задать крупную область нажатия, не отрывая линию от текста. */
/* Гасим на время просмотра: лайтбокс не запирает фокус, и Shift+Tab
с кнопки закрытия уходит сюда. Перестановка сменила бы работу под
открытым просмотром — индекс тот же, работа уже другая. */
);
})}
setShot(-1)} onStep={step} />
);
}
/* ---------------------------------------------------------------- Процесс */
/* [id ролика в Cloud Video, название, категория, обложка, сек, ширина, высота] */
const CLIPS = [
["vplveewfxat7z3sqekdv", "Тимур за работой", "процесс", "./assets/img/video/v10.webp", 23, 528, 960],
["vplvrja4qp3ps3fonejk", "Змея", "процесс", "./assets/img/video/v01.webp", 22, 540, 960],
["vplvxwh3dnpgcnqcxzrj", "Медведь", "процесс", "./assets/img/video/v02.webp", 12, 540, 960],
["vplvp4tgzzga2un52nna", "Биомеханика", "процесс", "./assets/img/video/v03.webp", 28, 764, 960],
["vplvhiavnn74sa3ad2hz", "Портрет", "процесс", "./assets/img/video/v04.webp", 33, 768, 960],
["vplv63sw637q4xgtjwjc", "Гризли", "процесс", "./assets/img/video/v05.webp", 17, 540, 960],
["vplvn7i2a6l6b2y3xzeq", "Цветной рукав", "процесс", "./assets/img/video/v06.webp", 23, 576, 720],
["vplvxwfyyymbucdbuzn2", "It's alive !!!", "процесс", "./assets/img/video/v07.webp", 28, 576, 720],
["vplvmsh2zy23inmeyaxv", "Скорпион", "процесс", "./assets/img/video/v08.webp", 36, 576, 720],
["vplvovbcxpfwrrtqifjh", "Кинжал", "процесс", "./assets/img/video/v09.webp", 22, 576, 720],
["vplvql3ud6lpffedk4lj", "Персик", "процесс", "./assets/img/video/v11.webp", 32, 540, 960],
["vplvuapkkbbpheyzvrbw", "Клоун", "процесс", "./assets/img/video/v12.webp", 22, 576, 720],
["vplvxwcmg67sld53q7sz", "Взгляд", "процесс", "./assets/img/video/v13.webp", 17, 720, 720],
["vplvrmu6ndlyfzpuizmj", "Череп в шлеме", "процесс", "./assets/img/video/v14.webp", 29, 576, 720],
["vplvdepowfldj4muyxv4", "Lars", "процесс", "./assets/img/video/v15.webp", 37, 768, 960],
["vplvnmmmdtnjf32tzesl", "Череп", "процесс", "./assets/img/video/v16.webp", 22, 540, 960],
["vplv7dm2fazospgd5sjx", "Зверь", "процесс", "./assets/img/video/v17.webp", 16, 720, 720],
["vplvy4urfrwgh2sps5sl", "Triangle", "финал", "./assets/img/video/v18.webp", 12, 540, 960],
["vplv34slx5lve5p7j4tm", "Шаманка", "финал", "./assets/img/video/v19.webp", 14, 540, 960],
["vplv2hpr4stl3yklrnuw", "Сова", "процесс", "./assets/img/video/v20.webp", 13, 560, 960],
["vplvhsvigv4bgohwi45v", "Бабочки", "процесс", "./assets/img/video/v21.webp", 18, 540, 960],
["vplvgq57pvyskz2gs2bb", "Via the End", "процесс", "./assets/img/video/v22.webp", 13, 540, 960],
["vplvhsuvqkpjpl65bay7", "Харли — Джокер", "процесс", "./assets/img/video/v23.webp", 11, 540, 960],
["vplv4i6vmqnttvts7epq", "Волк и птица", "финал", "./assets/img/video/v24.webp", 29, 1707, 960],
];
/* Пропорция сцены. В передаче было 16:10, но под неё подходит один ролик из 24 —
остальные вертикальные, их резало на 65%. 4:5 садится на основную массу, а что
не совпало, вписывается целиком: рамку добирает размытая обложка того же кадра. */
const STAGE_AR = 0.8;
const STAGE_H = "clamp(340px, 60vh, 600px)";
/* Родной интерфейс плеера убран (hidden=*) — вся обвязка своя, как в макете.
mute=1 обязателен: без него браузеры не дают автозапуск. */
const clipSrc = (id) =>
"https://runtime.video.cloud.yandex.net/player/video/" + id +
"?autoplay=1&mute=1&hidden=*&preload=false&background_color=0A0A0C";
const mmss = (s) => {
s = Math.max(0, Math.floor(s || 0));
return String(Math.floor(s / 60)).padStart(2, "0") + ":" + String(s % 60).padStart(2, "0");
};
/* Кадр вписывается в сцену целиком: считаем его коробку внутри 4:5. */
const clipBox = (w, h) => {
const a = w / h;
return a > STAGE_AR
? { width: "100%", height: (STAGE_AR / a * 100).toFixed(3) + "%" }
: { width: (a / STAGE_AR * 100).toFixed(3) + "%", height: "100%" };
};
function Process() {
const [active, setActive] = React.useState(0);
const [playing, setPlaying] = React.useState(true);
const [progress, setProgress] = React.useState(0);
const [time, setTime] = React.useState("00:00");
const [live, setLive] = React.useState(false); /* плеер создан только когда секция в кадре */
const [fade, setFade] = React.useState(false);
const frameRef = React.useRef(null);
const stageRef = React.useRef(null);
const listRef = React.useRef(null);
const durRef = React.useRef(0);
const activeRef = React.useRef(0);
const cur = CLIPS[active];
React.useEffect(() => { activeRef.current = active; }, [active]);
const send = (method, params) => {
const f = frameRef.current;
if (f && f.contentWindow) f.contentWindow.postMessage(Object.assign({ method: method }, params || {}), "*");
};
/* Плеер весит около 2 МБ, поэтому создаём его только когда секция доехала до экрана. */
React.useEffect(() => {
const el = stageRef.current;
if (!el) return;
const io = new IntersectionObserver((es) => {
es.forEach((e) => {
if (e.isIntersecting) setLive(true);
else if (live) send("pause");
});
}, { threshold: 0.25 });
io.observe(el);
return () => io.disconnect();
}, [live]);
/* События плеера приходят через postMessage — строкой JSON, а не объектом.
В примере из документации Яндекса разбора строки нет, и без него
event всегда undefined, а вся обвязка стоит на нулях. */
React.useEffect(() => {
const onMsg = (e) => {
let d = e.data;
if (typeof d === "string") { try { d = JSON.parse(d); } catch (_) { return; } }
if (!d || !d.event) return;
if (d.duration) durRef.current = d.duration;
if (d.event === "timeupdate" || d.event === "started" || d.event === "resumed" || d.event === "rewound") {
setTime(mmss(d.time));
if (durRef.current) setProgress(Math.min(1, (d.time || 0) / durRef.current));
if (d.event !== "timeupdate") setPlaying(true);
} else if (d.event === "paused") {
setPlaying(false); setTime(mmss(d.time));
} else if (d.event === "ended") {
step((activeRef.current + 1) % CLIPS.length);
}
};
window.addEventListener("message", onMsg);
return () => window.removeEventListener("message", onMsg);
}, []);
/* Активный пункт подтягиваем внутри списка вручную: scrollIntoView утянул бы
за собой и саму страницу. */
React.useEffect(() => {
const l = listRef.current;
if (!l) return;
const el = l.children[active];
if (!el) return;
const top = el.offsetTop - l.clientHeight / 2 + el.clientHeight / 2;
l.scrollTo({ top: Math.max(0, top), behavior: "smooth" });
}, [active]);
const step = (i) => {
if (i === activeRef.current) return;
setFade(true);
setTimeout(() => {
setActive(i); setProgress(0); setTime("00:00"); durRef.current = CLIPS[i][4];
setFade(false);
send("updateSource", { id: CLIPS[i][0] });
send("play");
setPlaying(true);
}, 260);
};
const toggle = () => {
if (playing) { send("pause"); setPlaying(false); }
else { send("play"); setPlaying(true); }
};
const seek = (e) => {
e.stopPropagation();
const r = e.currentTarget.getBoundingClientRect();
const frac = Math.min(1, Math.max(0, (e.clientX - r.left) / r.width));
const d = durRef.current || cur[4];
send("seek", { time: frac * d });
setProgress(frac);
};
const glass = { background: "rgba(10,10,12,.55)", backdropFilter: "blur(4px)" };
return (
Ближе, чем фото
{/* Сцена */}
{/* Размытая подложка — тот же кадр, чтобы поля не были пустыми */}
);
}
/* --------------------------------------------------------------- Benefits */
const BENEFITS = [
["fas fa-shield-halved", "100% стерильность", "Только одноразовые иглы и медицинская стерилизация в автоклаве."],
["fas fa-droplet", "Премиальные пигменты", "Eternal Ink, Dynamic Color и Fusion Ink — яркие и долговечные."],
["fas fa-gem", "Эксклюзивные эскизы", "Каждый дизайн создаётся специально для вас."],
["fas fa-infinity", "Пожизненная гарантия", "Если потребуется коррекция через годы — сделаю бесплатно."],
["fas fa-couch", "Максимальный комфорт", "Просторный кабинет, музыка, кино и игры во время сеанса."],
["fas fa-location-dot", "Центр Москвы", "Студия рядом со станцией метро «Смоленская»."],
];
function Benefits() {
return (
Почему мне доверяют
{BENEFITS.map(([icon, title, body]) => (
{title}
{body}
))}
);
}
/* ----------------------------------------------------------- Testimonials */
const YANDEX_REVIEWS = "https://yandex.ru/maps/org/rated_tattoo/1269715236/reviews/";
const REVIEWS = [
{ name: "Артур", date: "08.05.2026", avatar: "./assets/img/reviews/av-artur.jpg", photo: "./assets/img/reviews/ph-artur.jpg", text: "Очень круто, всё понравилось — лучшее место, где я набивал тату." },
{ name: "Елизавета З.", date: "21.02.2026", avatar: "./assets/img/reviews/av-elizaveta.jpg", photo: "./assets/img/reviews/ph-elizaveta.jpg", text: "Решалась долго, но когда созрела — нашла Тимура и не прогадала. Работы зацепили даже через экран, а в кабинете невероятная атмосфера. Всё аккуратно и стерильно." },
{ name: "Лидия Лукьянова", date: "29.10.2025", avatar: "./assets/img/reviews/av-lidiya.jpg", photo: "./assets/img/reviews/ph-lidiya.jpg", text: "Тимур — профессионал, и при этом с ним кайфово: поболтать, фильм, поржать. Кайфуешь от всего процесса, а не только от результата. Теперь только ему доверяю." },
{ name: "Владимир З.", date: "24.10.2025", avatar: "./assets/img/reviews/av-vladimir.jpg", photo: null, text: "Татуировка огонь, качественная работа, рука мастера. Вайбовая атмосфера, приятное общение." },
{ name: "Елена Пушкина", date: "07.08.2025", avatar: "./assets/img/reviews/av-elena.jpg", photo: null, text: "Всё прошло идеально: профессионально, аккуратно и очень красиво. Тимур внимателен к деталям и создаёт комфортную атмосферу." },
{ name: "Дмитрий Кэт", date: "24.03.2025", avatar: null, photo: "./assets/img/reviews/ph-dmitriy.jpg", text: "Тимур лучший мастер! Судьба свела с ним повторно после долгого перерыва — невероятно круто. Профессионализм и внимание к деталям." },
{ name: "Нина Г.", date: "05.11.2024", avatar: "./assets/img/reviews/av-nina.jpg", photo: "./assets/img/reviews/ph-nina.jpg", text: "Была у Тимура ещё 7 лет назад — и снова знала, к кому ехать. Мои друзья тоже ездили, все остались довольны!" },
{ name: "Юлия В.", date: "26.05.2024", avatar: "./assets/img/reviews/av-yulia.jpg", photo: "./assets/img/reviews/ph-yulia.jpg", text: "Невозможно выразить словами восторг от результата! Тимур — не просто тату-мастер, а художник, реализующий любую фантазию." },
];
function ReviewStars() {
return (
Стоимость зависит от размера, сложности, места нанесения и деталей. Минимальная стоимость сеанса — 15 000 ₽. Запишитесь на бесплатную консультацию для точного расчёта.
},
{ q: "Больно ли делать тату?", a:
Ощущения индивидуальны и зависят от зоны тела и болевого порога. Использую обезболивающие гели. Рекомендую выспаться, плотно поесть и не пить алкоголь за 24 часа.
},
{ q: "Как ухаживать за татуировкой?", a:
Не снимать плёнку 2–4 часа, аккуратно мыть тёплой водой с мылом, наносить мазь 2–3 раза в день, избегать солнца и бассейнов. Мы всегда на связи при заживлении.
