// ============================================================ // Digital Slap — Design System (shared across all RU pages) // Палитра, шрифты, шапка, sticky CTA, футер, компоненты // ============================================================ const DS_ACCENT = { bg: "#C6FF3D", ink: "#0A0A0A" }; const DS_THEME = { bg: "#0A0A0A", surface: "#141414", surface2: "#1C1C1C", line: "#242424", line2: "#2E2E2E", fg: "#F5F2EC", dim: "#9A968D", dim2: "#6E6A60", }; const DS_CSS_VARS = { "--bg": DS_THEME.bg, "--surface": DS_THEME.surface, "--surface2": DS_THEME.surface2, "--line": DS_THEME.line, "--line2": DS_THEME.line2, "--fg": DS_THEME.fg, "--dim": DS_THEME.dim, "--dim2": DS_THEME.dim2, "--accent": DS_ACCENT.bg, "--accent-ink": DS_ACCENT.ink, }; const DS_NAV = [ { href: "/", label: "Главная" }, { href: "/reels.html", label: "Reels под ключ" }, { href: "/meta-target.html", label: "Meta таргет" }, { href: "/google-reklama.html", label: "Google реклама" }, { href: "/landings.html", label: "Лендинги" }, ]; const DS_CONTACTS = { whatsapp: "+420 777 199 116", whatsappLink: "https://wa.me/420777199116", telegram: "@LappoS", telegramLink: "https://t.me/LappoS", email: "info@lappo.online", emailLink: "mailto:info@lappo.online", calendly: "https://calendly.com/lappo-stepan/introductory-call", }; const DS_CTA = { primary: "Бесплатная консультация", short: "Получить консультацию", }; // ---------- primitives ---------- function DSArrow({ size = 16 }) { return ( ); } function DSCheck() { return ( ); } function DSLogo({ size = 32 }) { return (
D
DIGITAL SLAP
); } // ---------- CTA button ---------- // По умолчанию ведёт к форме внизу страницы (секция id="Контакты"). // Если передан href с http(s) — открывается в новой вкладке как внешняя ссылка. function DSButton({ href = "#Контакты", children = DS_CTA.primary, size = "md", variant = "primary", target }) { const sizes = { sm: { pad: "12px 18px", fs: 13, gap: 10, arrowBox: 22, arrowSize: 10 }, md: { pad: "16px 24px", fs: 14, gap: 12, arrowBox: 28, arrowSize: 12 }, lg: { pad: "20px 30px", fs: 16, gap: 14, arrowBox: 32, arrowSize: 14 }, }; const s = sizes[size] || sizes.md; const primary = variant === "primary"; const isExternal = /^https?:\/\//.test(href); const isAnchor = href && href.startsWith("#"); function onClick(e) { if (!isAnchor) return; const id = decodeURIComponent(href.slice(1)); // секции обёрнуты в
через DSSection; fallback на форму внутри const el = document.getElementById(id) || document.querySelector(`[id="${id}"]`) || document.querySelector(`a[name="${id}"]`); if (!el) return; e.preventDefault(); const header = document.querySelector("[data-ds-header]"); const offset = (header ? header.getBoundingClientRect().height : 0) + 16; const top = el.getBoundingClientRect().top + window.scrollY - offset; window.scrollTo({ top, behavior: "smooth" }); history.replaceState(null, "", href); } return ( {children} ); } // ---------- Eyebrow label ---------- function DSEyebrow({ children }) { return (
{children}
); } // ---------- Reveal on scroll ---------- function DSReveal({ children, delay = 0, as = "div", style = {}, ...rest }) { const ref = React.useRef(null); const [shown, setShown] = React.useState(false); React.useEffect(() => { const el = ref.current; if (!el) return; const obs = new IntersectionObserver(entries => { entries.forEach(e => { if (e.isIntersecting) { setShown(true); obs.disconnect(); } }); }, { rootMargin: "-8% 0px" }); obs.observe(el); return () => obs.disconnect(); }, []); const Tag = as; return ( {children} ); } // ---------- Section wrapper ---------- function DSSection({ id, children, style = {}, pad = "clamp(60px, 9vh, 120px)", bg = "transparent" }) { return (
{children}
); } // ---------- Header ---------- function DSHeader({ active }) { const [scrolled, setScrolled] = React.useState(false); React.useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 20); onScroll(); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); const [menuOpen, setMenuOpen] = React.useState(false); return ( <>
{/* desktop nav */}
{DS_CTA.short}
{/* mobile CTA — появляется при скролле */}
{DS_CTA.short}
{/* mobile burger */}
{/* mobile fullscreen menu */} {menuOpen && (
{ /* Закрываем меню когда кликнули по ссылке или кнопке внутри: тогда пользователь сразу видит, куда его перенесло (форма, раздел) */ if (e.target.closest("a, button")) setMenuOpen(false); }} style={{ position: "fixed", inset: 0, zIndex: 200, background: DS_THEME.bg, display: "flex", flexDirection: "column", padding: "24px clamp(20px, 5vw, 40px)", }}>
{DS_CTA.primary}
)} ); } // sticky CTA removed — header already has a fixed CTA // ---------- Footer ---------- function DSFooter() { return ( ); } function FooterCol({ title, items }) { return (
{title}
); } // ---------- Page shell ---------- function DSPage({ active, children }) { return (
{children}
); } // ---------- Contact form (shared between Home & Stub pages) ---------- const DS_FORM_ENDPOINT = "https://script.google.com/macros/s/AKfycbxS7L3UWdXIh3wWR5iipaGLKOcQiBjp7Y52k5O4tf2vfT9btx-IqW1JDcACfQYPxZSI7g/exec"; function DSFormField({ label, name, type = "text", required, textarea, rows, placeholder }) { const [focus, setFocus] = React.useState(false); const shared = { width: "100%", padding: "14px 16px", background: DS_THEME.surface, border: `1px solid ${focus ? DS_ACCENT.bg : DS_THEME.line2}`, borderRadius: 10, color: DS_THEME.fg, fontFamily: "'Archivo', sans-serif", fontSize: 15, outline: "none", resize: textarea ? "vertical" : "none", transition: "border-color .2s ease", }; return (