20:I[56068,["839","static/chunks/839-2352a2065a183f65.js","709","static/chunks/709-c7ab0a304ea8b038.js","925","static/chunks/925-69fb52a4e901152e.js","853","static/chunks/853-dcfdfe547532d294.js","571","static/chunks/571-8b5bf8d0458b7f0c.js","253","static/chunks/253-c379627a9c0ae60e.js","511","static/chunks/511-d1ef9ee37fcf8f46.js","486","static/chunks/486-3413269d7f5a7539.js","57","static/chunks/57-e1f1a7e6c6010d76.js","668","static/chunks/app/%5Blocale%5D/blocks/%5Bslug%5D/page-5f788ec514886822.js"],"BlockCard"] 21:I[70793,["839","static/chunks/839-2352a2065a183f65.js","709","static/chunks/709-c7ab0a304ea8b038.js","925","static/chunks/925-69fb52a4e901152e.js","853","static/chunks/853-dcfdfe547532d294.js","571","static/chunks/571-8b5bf8d0458b7f0c.js","253","static/chunks/253-c379627a9c0ae60e.js","511","static/chunks/511-d1ef9ee37fcf8f46.js","486","static/chunks/486-3413269d7f5a7539.js","57","static/chunks/57-e1f1a7e6c6010d76.js","668","static/chunks/app/%5Blocale%5D/blocks/%5Bslug%5D/page-5f788ec514886822.js"],"CodeBlock"] 22:T2484,"use client"; import { Header } from "denjs-ui"; import type { ComponentPropsWithoutRef, KeyboardEvent as ReactKeyboardEvent, } from "react"; import { useEffect, useId, useRef, useState } from "react"; const navigation = [ { name: "Product", href: "/product" }, { name: "Features", href: "/features" }, { name: "Marketplace", href: "/marketplace" }, { name: "Company", href: "/company" }, ]; const focusableSelector = [ "a[href]", "button:not([disabled])", "textarea:not([disabled])", "input:not([disabled])", "select:not([disabled])", "[tabindex]:not([tabindex='-1'])", ].join(","); function getFocusableElements(element: HTMLElement) { return Array.from( element.querySelectorAll(focusableSelector), ).filter( (node) => !node.hasAttribute("disabled") && node.getAttribute("aria-hidden") !== "true" && node.tabIndex >= 0 && !node.closest("[inert]") && node.getClientRects().length > 0 && window.getComputedStyle(node).visibility !== "hidden", ); } function XMarkIcon(props: ComponentPropsWithoutRef<"svg">) { return ( ); } function LogoMark() { return ( ); } export function HeroSimple() { const [mobileMenuOpen, setMobileMenuOpen] = useState(false); const mobileMenuTitleId = useId(); const heroRef = useRef(null); const closeButtonRef = useRef(null); const mobileMenuPanelRef = useRef(null); useEffect(() => { if (!mobileMenuOpen) { return; } const hero = heroRef.current; if (!hero) { return; } const rootFontSize = Number.parseFloat( window.getComputedStyle(document.documentElement).fontSize, ) || 16; const desktopContainerWidth = 42 * rootFontSize; if (hero.getBoundingClientRect().width >= desktopContainerWidth) { setMobileMenuOpen(false); return; } const previousOverflow = document.body.style.overflow; const previouslyFocused = document.activeElement instanceof HTMLElement ? document.activeElement : null; const animationFrame = window.requestAnimationFrame(() => { closeButtonRef.current?.focus(); }); const handleKeyDown = (event: KeyboardEvent) => { if (event.key === "Escape") { setMobileMenuOpen(false); } }; const resizeObserver = new ResizeObserver((entries) => { if ( entries.some( (entry) => entry.contentRect.width >= desktopContainerWidth, ) ) { setMobileMenuOpen(false); } }); document.body.style.overflow = "hidden"; window.addEventListener("keydown", handleKeyDown); resizeObserver.observe(hero); return () => { window.cancelAnimationFrame(animationFrame); document.body.style.overflow = previousOverflow; window.removeEventListener("keydown", handleKeyDown); resizeObserver.disconnect(); previouslyFocused?.focus(); }; }, [mobileMenuOpen]); const handleMobileMenuKeyDown = ( event: ReactKeyboardEvent, ) => { if (event.key !== "Tab") { return; } const panel = mobileMenuPanelRef.current; if (!panel) { return; } const focusableElements = getFocusableElements(panel); const firstElement = focusableElements.at(0); const lastElement = focusableElements.at(-1); if (!firstElement || !lastElement) { event.preventDefault(); panel.focus(); return; } if ( event.shiftKey && (document.activeElement === firstElement || document.activeElement === panel) ) { event.preventDefault(); lastElement.focus(); return; } if (!event.shiftKey && document.activeElement === lastElement) { event.preventDefault(); firstElement.focus(); } }; return (

Your Company } navigation={navigation.map((item) => ( {item.name} ))} actions={ Log in } isMobileMenuOpen={mobileMenuOpen} onMobileMenuOpenChange={setMobileMenuOpen} openMobileMenuLabel="Open main menu" closeMobileMenuLabel="Close menu" mobileMenu={

{mobileMenuOpen ? (

{navigation.map((item) => ( {item.name} ))}

) : null} } />

Announcing our next round of funding.{" "}

Data to enrich your online business

Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat.

Get started Learn more about our platform

); } 6:["$","article",null,{"className":"min-w-0","children":["$","$L20",null,{"id":"hero-simple","name":"Simple hero","category":"marketing.hero","description":"A focused marketing hero with a badge, headline, supporting copy, and two calls to action.","dependencies":["denjs-ui"],"labels":{"view":"Вид блока","preview":"Пример","code":"Код","theme":"Тема примера","themeLight":"Светлая","themeSystem":"Системная","themeDark":"Тёмная","fullscreen":"На весь экран","exitFullscreen":"Выйти из полноэкранного режима"},"source":["$","$L21",null,{"code":"$22"}],"children":"$L23"}]}]