const { SectionHeading, Eyebrow, IconCircle, Switch } = window.HYSNDesignSystem_e25aa3;
/* "Bewegung zieht Aufmerksamkeit an" is HYSN's own pitch — so the Branchen
row moves like signage content: a slow, continuous rail that pauses on hover. */
const BRANCHEN = [
['utensils', 'Restaurants'], ['beef', 'Dönerläden'], ['croissant', 'Bäckereien'],
['coffee', 'Cafés'], ['ice-cream-cone', 'Eisdielen'], ['pizza', 'Pizzerien'], ['flame', 'Grillhäuser'],
];
function IdealFuer() {
const tiles = [...BRANCHEN, ...BRANCHEN];
return (
Ideal für…und jeden Betrieb mit einer Karte an der Wand.
{tiles.map(([ic, label], i) => (
{label}
))}
);
}
/* The CMS toggle is HYSN's most recognisable control (AKTION · 2 für 1 · toggle).
So the benefits section IS a toggle: flip between the owner's everyday pain
and what the same day looks like with HYSN. Cards cascade when flipped. */
const VORTEILE = [
['usb', 'Keine USB-Sticks mehr', 'USB-Stick bespielen, hintragen, einstecken – für jede Änderung'],
['timer', 'Änderungen in Sekunden', 'Stunden warten, bis neue Karten überall hängen'],
['printer', 'Keine Druckkosten', 'Neu drucken bei jeder Preisänderung'],
['monitor-check', 'Einheitliches Erscheinungsbild', 'Jede Filiale sieht anders aus'],
['clock', 'Zeit sparen', 'Abende gehen für die Karte drauf'],
['star', 'Professioneller Auftritt', 'Zettel, Klebeband und Provisorien'],
];
function VorteileSection() {
const [mit, setMit] = React.useState(true);
return (
Ihre Vorteile auf einen Blick{mit ? 'Mit HYSN.' : 'Ohne HYSN?'}
OhneMit HYSN
{VORTEILE.map(([ic, gut, schlecht], i) => (
{mit ? gut : schlecht}
))}
Der Schalter ist derselbe wie im HYSN CMS – eine Aktion einschalten dauert genau so lang.