const { Button, Icon, Badge } = window.HYSNDesignSystem_e25aa3; /* The hero shows the product doing its job: a change is made in the CMS, saved, and goes live on the board — told by a cycling toast over the mockup. */ const TOASTS = [ ['pencil-line', 'Preis angepasst', 'Cheese Burger · 12,90 €'], ['check', 'Gespeichert', 'Änderung übernommen'], ['monitor-check', 'Live auf allen Bildschirmen', 'gleichzeitig aktualisiert'], ]; function Hero() { const wrap = React.useRef(null); const [toast, setToast] = React.useState(0); React.useEffect(() => { const t = setInterval(() => setToast((v) => (v + 1) % TOASTS.length), 3200); return () => clearInterval(t); }, []); const onMove = (e) => { const el = wrap.current; if (!el) return; const r = el.getBoundingClientRect(); el.style.setProperty('--px', ((e.clientX - r.left) / r.width - .5).toFixed(3)); el.style.setProperty('--py', ((e.clientY - r.top) / r.height - .5).toFixed(3)); }; const onLeave = () => { const el = wrap.current; if (el) { el.style.setProperty('--px', 0); el.style.setProperty('--py', 0); } }; const [tIc, tTitle, tSub] = TOASTS[toast]; const layer = (f) => ({ transform: `translate3d(calc(var(--px,0)*${f}px), calc(var(--py,0)*${Math.round(f * .7)}px), 0)`, transition: 'transform .5s var(--ease-out)' }); return (
Digital Signage für Gastronomie

Ihre Speisekarte war noch nie so einfach zu verwalten.

Änderungen in wenigen Sekunden – auf allen Bildschirmen gleichzeitig. Und Ihre Aktionen laufen dort, wo Gäste bestellen: direkt über der Theke. Das verkauft mit.

{[['timer', 'Änderungen in Sekunden'], ['printer', 'Keine Druckkosten'], ['shield-check', '5 Jahre Garantie']].map(([ic, t]) => ( {t} ))}
HYSN CMS auf einem Bildschirm im Restaurant: Menüboard bearbeiten
Digitales Menüboard mit Cheese Burger Aktion LIVE
HYSN
{tTitle} {tSub}
); } Object.assign(window, { Hero });