toolctrl-labs/posts
9
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Post 9: Varianten überarbeitet, Variante 6 und 7 nach Noahs Arbeitsheft

Browse Source 
- Variante 2/3: Webinar statt HiveGrid, Noahs Satz zum Kopf des Chefs,
  vorher und heute am Beispiel „Angebot nachfassen“ als Schema
- Variante 4/5: drei verschiedene Grafiken, Wabenanimation gelb dann rot,
  Titel mit Wabenwelle animiert
- Variante 6/7: Aussagen, Zeichnungen und Schriften aus „Jede Frage lief
  über meinen Tisch“, Titel dunkel, Pfeile werden gezeichnet (Test)
- post9-hub.mjs legt alle Varianten als Bilder und Videos ins Marketing-Hub
- Menüs aller Posts und Übersicht mit Variante 6 und 7

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
dejanandClaude Opus 5.5 committed 2026-11-06 21:51:51 +01:00
1 parent f9f48609dd
commit 07deacde41
39 files changed
+18434 -205
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

post9-v3.html
+135 -52
View File
@@ -1063,6 +1063,8 @@ if (location.search.indexOf("nur=anim") >= 0)
<button type="button" data-gehe="./post9-v3.html">Post 9 · Variante 3 · Kundengeschichte dunkel</button>
<button type="button" data-gehe="./post9-v4.html">Post 9 · Variante 4 · Zahlen</button>
<button type="button" data-gehe="./post9-v5.html">Post 9 · Variante 5 · Zahlen dunkel</button>
<button type="button" data-gehe="./post9-v6.html">Post 9 · Variante 6 · Arbeitsheft</button>
<button type="button" data-gehe="./post9-v7.html">Post 9 · Variante 7 · Arbeitsheft dunkel</button>
<button type="button" data-gehe="./post9-varianten.html">Post 9 · Varianten im Vergleich</button>
<hr>
<button type="button" data-gehe="./uebersicht.html">Alle Projekte im Streifen</button>
@@ -1451,13 +1453,21 @@ if (location.search.indexOf("nur=anim") >= 0)
KEINE ERFUNDENEN ZAHLEN. weclapp beginnt mit einem Ergebnis in Zahlen.
Fuer Geerkens gibt es keine gemessene Zahl, also steht keine da. Belegt:
- vierte Generation, mit der Schwester, „Wir wollten auch gar nicht
wechseln. Wir wollten mehr. KI-Lösungen. Ein CRM.
Automatisierungen.“: Website, LandingPageClient.tsx, „Warum es
HiveGrid gibt“
- Postfach und Zettel, Nachfassen, WhatsApp-Gruppe, Urlaubsliste,
Passwort am Bildschirm, KWP und PDS: Webinar-Skript (Hub,
webinar/Skript.md), Noahs Teile „Bei uns war es so“
- vierte Generation: Website, LandingPageClient.tsx
- „Ich kriege das, was in meinem Kopf ist, nicht in die Ausführung.“:
Noah, festgehalten in Kontext.md im Hub, im Webinar Slide „problem“
- Postfach, Zettel im Auto, WhatsApp-Gruppe, Excel-Liste: Webinar-
Skript (Hub, webinar/Skript.md), Noahs Teile „Bei uns war es so“.
Ordner und Kopf: „Bei Geerkens war es vorher auch so“ im PDF
„Dunford und JOLT im Trichter“ vom 03.11.2026, Kapitel 3
- Das Branchenprogramm bleibt: Website, „kein Ersatz für dein
Branchenprogramm“
Umbau 04.11.2026 (Dejan): HiveGrid kommt im Text nicht mehr vor, es geht
um das Webinar. Slide 3 und 4 als Bild statt Liste, keine Fachwoerter
wie CRM, Pipeline oder Automatisierung. Grundlage sind die drei PDFs
aus dem Vertrieb (02. und 03.11.): Anzeigen holen den Betrieb bei der
Szene ab, in der er sich wiedererkennt, nicht beim Produkt.
Fotos: assets/eigene/geerkens-team.jpg (Dejan, 02.11.2026),
assets/team/noah-person.webp und assets/brand/geerkens-logo.png aus
Post 2. Wer auf dem Teamfoto steht, ist nicht bekannt, deshalb kein
@@ -1470,8 +1480,8 @@ if (location.search.indexOf("nur=anim") >= 0)
const VORLAGEN = [
V2_VORLAGE("betrieb", "Der Betrieb"),
V2_VORLAGE("zitat", "Das Zitat"),
V2_VORLAGE("vorher", "Die Ausgangslage"),
V2_VORLAGE("nachher", "Mit HiveGrid"),
V2_VORLAGE("vorher", "Vorher"),
V2_VORLAGE("nachher", "Heute"),
V2_VORLAGE("anmeldung", "Jetzt anmelden"),
];
@@ -5024,17 +5034,6 @@ if (location.search.indexOf("nur=anim") >= 0)
'<g clip-path="url(#' + id + ')">' + m + "</g>";
}
/* Eine Liste mit Waben als Aufzaehlungszeichen, je Punkt zwei Zeilen. */
function v2Liste(y0, punkte, zeichenFarbe) {
let g = "";
punkte.forEach((p, i) => {
const y = y0 + i * 116;
g += v2Wabe(V2_RAND + 13, y - 10, 13, zeichenFarbe);
p.forEach((z, j) => { g += v2Text(V2_RAND + 50, y + j * 40, z, 31, V2.text, { gew: 700, sperr: "-0.01em" }); });
});
return g;
}
/* 1 · Der Betrieb. weclapp: „In 15 Monaten auf 11 Standorte. Das steckt
hinter dem Erfolg von PV Green.“ Eine Zahl haben wir nicht, also traegt
die Tatsache: vierte Generation. */
@@ -5045,10 +5044,12 @@ if (location.search.indexOf("nur=anim") >= 0)
g += v2Wabe(1050, 120, 170, V2.gelb); // oben rechts
g += v2Wabe(40, H - 70, 300, V2.form); // hinter dem Foto
g += v2Logo(V2_RAND, 86, 42);
g += v2Chamfer(V2_RAND + 180, 82, 292, 50, 10, V2.gelbHell);
g += uiText(V2_RAND + 180 + 146, 115, "AUS DEM HANDWERK", 19, 700, V2.gelbText, { anker: "middle", sperr: "0.14em" });
/* Seit 04.11.2026 das Webinar statt „Aus dem Handwerk“: Die Anzeige
laedt ins Webinar ein und nicht zu HiveGrid. */
g += v2Chamfer(V2_RAND + 180, 82, 236, 50, 10, V2.gelbHell);
g += uiText(V2_RAND + 180 + 118, 115, "LIVE-WEBINAR", 19, 700, V2.gelbText, { anker: "middle", sperr: "0.14em" });
[["SHK-Betrieb in", V2.gelb], ["vierter Generation.", V2.gelb],
["Das steckt hinter", V2.text], ["HiveGrid.", V2.text]].forEach(([z, f], i) => {
["Wie er Zeit spart,", V2.text], ["zeigt Noah im Webinar.", V2.text]].forEach(([z, f], i) => {
g += v2Text(V2_RAND, 232 + i * 70, z, 64, f);
});
const fy = 500, fb = 780, fh = H - fy - 132;
@@ -5067,9 +5068,15 @@ if (location.search.indexOf("nur=anim") >= 0)
return v2Svg(g);
}
/* 2 · Das Zitat. Der Satz steht so auf der Website, „Warum es HiveGrid
gibt“. Noah freigestellt vor einer grossen gelben Wabe: Er traegt
Schwarz, vor dem Dunkel waere er darin verschwunden. */
/* 2 · Das Zitat. Noah ueber seine Rolle als Chef, so festgehalten im Hub
(Brainstorming Kickoff/Kontext/Kontext.md) und im Webinar auf der Slide
„problem“. Seit 04.11.2026 (Dejan: mehr um Zeit und das, was von selbst
laeuft): Der Satz oeffnet die Geschichte von Slide 3 und 4, was im Kopf
des Chefs haengt, laeuft heute von selbst. Davor stand „Kein Chef fährt
seinen Betrieb für ein halbes Jahr an die Wand …“ (Website), davor
„KI-Lösungen. Ein CRM. Automatisierungen.“ (zu technisch). Noah
freigestellt vor einer grossen gelben Wabe: Er traegt Schwarz, vor dem
Dunkel waere er darin verschwunden. */
function v2Zitat() {
v2Ton();
const H = SLIDE_H;
@@ -5077,13 +5084,15 @@ if (location.search.indexOf("nur=anim") >= 0)
g += v2Wabe(60, H - 40, 150, V2.form);
g += v2UebergangWabe(0);
g += v2Logo(1080 - V2_RAND, 86, 42, { rechts: true });
[["„Wir wollten auch gar", V2.text], ["nicht wechseln.", V2.text], ["Wir wollten mehr.", V2.gelb],
["KI-Lösungen. Ein CRM.", V2.text], ["Automatisierungen.“", V2.text]].forEach(([z, f], i) => {
[["„Ich kriege das,", V2.text], ["was in meinem Kopf ist,", V2.gelb],
["nicht in die", V2.text], ["Ausführung.“", V2.text]].forEach(([z, f], i) => {
g += v2Text(V2_RAND - 12, 236 + i * 66, z, 56, f);
});
g += uiText(V2_RAND, 640, "NOAH GEERKENS", 30, 800, V2.kopf, { sperr: "0.04em" });
g += uiText(V2_RAND, 682, "Handwerksmeister und Gründer", 23, 600, V2.text2);
g += uiText(V2_RAND, 714, "SHK-Betrieb in vierter Generation", 23, 600, V2.text2);
g += v2Chamfer(V2_RAND, 574, 236, 46, 10, V2.gelbHell);
g += uiText(V2_RAND + 118, 605, "LIVE-WEBINAR", 18, 700, V2.gelbText, { anker: "middle", sperr: "0.14em" });
g += uiText(V2_RAND, 676, "NOAH GEERKENS", 30, 800, V2.kopf, { sperr: "0.04em" });
g += uiText(V2_RAND, 718, "Handwerksmeister", 23, 600, V2.text2);
g += uiText(V2_RAND, 750, "SHK-Betrieb in vierter Generation", 23, 600, V2.text2);
/* noah-person.webp ist 1600 x 1049, die Person steht etwa zwischen 20
und 75 Prozent der Breite. So gesetzt, dass sie rechts unten steht. */
const pb = 980, ph = pb * 1049 / 1600;
@@ -5091,38 +5100,109 @@ if (location.search.indexOf("nur=anim") >= 0)
return v2Svg(g);
}
/* 3 · Die Ausgangslage. weclapp: „Herausforderungen“. Die vier Punkte
sind Noahs „Bei uns war es so“ aus dem Webinar-Skript. */
/* ─── Slide 3 und 4: vorher und heute ───────────────────────────────────
Stand 04.11.2026, dritter Umbau. Dejan: Es muss mehr um das gehen, was
von selbst laeuft, und um Zeit, aber ohne das Wort Automatisierung. Also
umschreiben und zeigen, an einem einzigen Fall: Angebot raus, und dann?
Das ist das Beispiel aus dem Webinar, Teil 2 („Wenn das passiert, dann
mach das.“) und im Vertrieb der staerkste Schmerz („Angebot raus und
dann passiert nichts“, PDF „Dunford und JOLT im Trichter“ vom 03.11.).
Vorbilder aus der Werbebibliothek (Nachtrag 04.11. in webinar/
Ad-Recherche.md im Hub): weclapp, Karte „vorher“ mit drei kurzen Zeilen
(ID 2419932468433925); Zapier, drei Schritte in Alltagssprache als
Karten untereinander, mit einer Linie verbunden, am Ende das Ergebnis
(ID 393789279875187, laeuft seit Januar 2024). Slide 3 sind die drei
Handgriffe des Chefs, Slide 4 dieselben drei als Kette, die von selbst
laeuft. Das ist der Ablauf „Angebot nachfassen“ aus dem Webinar, Teil 2,
als Schema und nicht als Screen: Dejan, 04.11.2026, „es sollen nur
Schemas und Prozesse dargestellt werden, wir verkaufen das Produkt
nicht“. Der Nachbau des Editors davor sah zu sehr nach angeschnittenem
Screenshot aus. */
/* Lucide-Formen, wie sie Subframe als Feather-Icons zeichnet
(lucide-static 0.460.0, wie LUCIDE in Post 8). */
const V2_LUCIDE = {
"send": '<path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z"/><path d="m21.854 2.147-10.94 10.939"/>',
"clock": '<circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>',
"phone": '<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>',
};
const v2Lucide = (name, cx, cy, s, farbe, strich) =>
'<g transform="translate(' + n1(cx - s / 2) + ',' + n1(cy - s / 2) + ') scale(' + (s / 24).toFixed(4) +
')" fill="none" stroke="' + farbe + '" stroke-width="' + (strich || 2) +
'" stroke-linecap="round" stroke-linejoin="round">' + V2_LUCIDE[name] + "</g>";
/* Die Ueberschrift beider Slides: Rubrik, darunter eine Zeile. */
function v2KopfZeilen(rubrik, farbe, zeilen) {
let g = v2Text(V2_RAND, 200, rubrik, 52, farbe, { sperr: "0.01em" });
zeilen.forEach((z, i) => { g += v2Text(V2_RAND, 262 + i * 46, z, 38, V2.text, { gew: 700 }); });
return g;
}
/* 3 · Vorher. Die Karte „vorher“ von weclapp: drei Zeilen, je ein Zeichen.
Was der Chef selbst machen musste, damit ein Angebot nicht liegen
bleibt. Auf Slide 4 macht das der Ablauf. */
const V2_HANDGRIFFE = [
["send", "Das Angebot geht raus."],
["clock", "Drei Tage dran denken."],
["phone", "Abends nachtelefonieren."],
];
function v2Vorher() {
v2Ton();
const dunkel = variant === "dunkel", dy = (SLIDE_H - 1080) / 2;
let g = "";
g += v2Logo(1080 - V2_RAND, 86, 42, { rechts: true });
g += v2Text(V2_RAND, 262, "DIE AUSGANGSLAGE", 52, V2.kopf, { sperr: "0.01em" });
g += v2Liste(372, [
["Anfragen landen im Postfach", "und auf Zetteln im Auto"],
["Nach dem Angebot fragt keiner nach,", "jeder denkt, der andere ruft an"],
["Fotos, Urlaub, Material: alles in", "einer WhatsApp-Gruppe"],
["Urlaubsliste in Excel, das Passwort", "fürs Großhändler-Portal am Bildschirm"],
], V2.kopf);
g += v2KopfZeilen("VORHER", V2.kopf, ["Alles hing am Kopf vom Chef."]);
const x = V2_RAND, y = 340 + dy, b = 770, zh = 132, h = 3 * zh + 36;
g += v2Chamfer(x, y, b, h, 18, dunkel ? "#16243B" : "#F5F4F4",
dunkel ? { stroke: "rgba(255,255,255,.12)" } : null);
V2_HANDGRIFFE.forEach(([zeichen, text], i) => {
const ym = y + 18 + i * zh + zh / 2;
if (i) g += '<path d="M' + (x + 36) + "," + n1(y + 18 + i * zh) + "H" + (x + b - 36) +
'" stroke="' + (dunkel ? "rgba(255,255,255,.12)" : "#E5E5E5") + '" stroke-width="1.5"/>';
g += v2Chamfer(x + 36, ym - 36, 72, 72, 10, dunkel ? "rgba(255,255,255,.08)" : "#FFFFFF",
dunkel ? null : { stroke: "#E5E5E5" });
g += v2Lucide(zeichen, x + 72, ym, 34, dunkel ? "#FFFFFF" : "#24242B");
g += v2Text(x + 140, ym + 13, text, 36, V2.text, { gew: 700, sperr: "-0.01em" });
});
g += v2Band(SLIDE_H - V2_BAND_H, 2);
g += v2UebergangWabe(-1080);
return v2Svg(g);
}
/* 4 · Mit HiveGrid. weclapp: „Ergebnisse“, im Akzent. Gemessene
Ergebnisse gibt es nicht, deshalb steht hier, was sich aendert: die
Teile des Webinars und das Versprechen, dass das Programm bleibt. */
/* 4 · Heute. Dieselben drei Handgriffe wie auf Slide 3, jetzt als Kette
wie bei Zapier: Karten untereinander, eine Linie dazwischen, die Zeichen
gelb, weil das jetzt erledigt ist. Liest sich als ein Satz. Am Ende das
Ergebnis als Etikett, wie das „Faster communication“ bei Zapier. Inhalt
wie die Notiz im Webinar-Ablauf (S08): „Kommt ein Projekt auf ‚Angebot
versendet‘, ruft das Büro nach drei Tagen beim Kunden an. Der Chef
bekommt Bescheid.“ */
const V2_KETTE = [
["send", "Wenn ein Angebot rausgeht,"],
["clock", "nach drei Tagen"],
["phone", "steht der Anruf auf der Liste."],
];
function v2Nachher() {
v2Ton();
const dunkel = variant === "dunkel", dy = (SLIDE_H - 1080) / 2;
let g = "";
g += v2Logo(1080 - V2_RAND, 86, 42, { rechts: true });
g += v2Text(V2_RAND, 262, "MIT HIVEGRID", 52, V2.gelb, { sperr: "0.01em" });
g += v2Liste(372, [
["Jede Anfrage landet in der Pipeline,", "bis daraus ein Auftrag wird"],
["Das Nachfassen läuft automatisch,", "über die Workflow-Engine"],
["Chat, Personal und Passwörter", "an einem Ort statt verstreut"],
["Das Branchenprogramm bleibt und ist", "angebunden, zum Beispiel KWP und PDS"],
], V2.gelb);
g += v2KopfZeilen("HEUTE", V2.gelb, ["Dran denken muss keiner mehr."]);
const x = V2_RAND, b = 770, kh = 104, luecke = 40, y0 = 334 + dy;
const linie = dunkel ? "rgba(255,255,255,.28)" : "#B5B5B7";
V2_KETTE.forEach(([zeichen, text], i) => {
const y = y0 + i * (kh + luecke), ym = y + kh / 2;
g += v2Chamfer(x, y, b, kh, 16, dunkel ? "#16243B" : "#F5F4F4",
dunkel ? { stroke: "rgba(255,255,255,.12)" } : null);
g += v2Chamfer(x + 22, ym - 32, 64, 64, 10, V2.gelb);
g += v2Lucide(zeichen, x + 54, ym, 30, "#1A1A1A");
g += v2Text(x + 112, ym + 13, text, 36, V2.text, { gew: 700, sperr: "-0.01em" });
/* Die Linie zur naechsten Karte, unter den Zeichen. */
g += '<path d="M' + (x + 54) + "," + n1(y + kh) + "V" + n1(y + kh + luecke) +
'" stroke="' + linie + '" stroke-width="2"/>';
});
const ty = y0 + 3 * (kh + luecke);
g += v2Chamfer(x + 22, ty, 404, 56, 12, V2.gelbHell);
g += v2Text(x + 22 + 202, ty + 37, "Und der Chef weiß Bescheid.", 26, V2.gelbText, { anker: "middle", gew: 800, sperr: "-0.01em" });
g += v2Band(SLIDE_H - V2_BAND_H, 3);
return v2Svg(g);
}
@@ -5138,12 +5218,15 @@ if (location.search.indexOf("nur=anim") >= 0)
g += v2BandEnde();
g += v2Text(m, 300 + dy, "Live zuschauen,", 56, V2.gelb, { anker: "middle" });
g += v2Text(m, 366 + dy, "live fragen:", 56, V2.gelb, { anker: "middle" });
g += v2Text(m, 462 + dy, "Automatisierung im Handwerk.", 50, V2.text, { anker: "middle" });
/* Bis 04.11.2026 „Automatisierung im Handwerk.“, der Arbeitstitel des
Webinars. Der Titel ist noch offen (Hub, daten/webinar.json), und das
Wort ist zu technisch (Dejan). */
g += v2Text(m, 462 + dy, "Weniger Zeit im Büro.", 50, V2.text, { anker: "middle" });
g += v2Text(m, 522 + dy, "Mit dem Programm, das du hast.", 50, V2.text, { anker: "middle" });
const kb = 420, kh = 88, ky = 590 + dy;
g += v2Chamfer(m - kb / 2, ky, kb, kh, 16, V2.gelb);
g += uiText(m, ky + 56, "Jetzt anmelden", 32, 800, V2.aufHell, { anker: "middle" });
g += uiText(m, ky + 160, WEBINAR.wochentag + ", " + WEBINAR.datum + ", " + WEBINAR.uhrzeit + " Uhr, online",
g += uiText(m, ky + 160, "Webinar am " + WEBINAR.wochentag + ", " + WEBINAR.datum + ", " + WEBINAR.uhrzeit + " Uhr, online",
26, 600, V2.text2, { anker: "middle" });
g += uiText(m, ky + 198, "Mit Noah Geerkens und David Bertram", 26, 600, V2.text2, { anker: "middle" });
g += v2Logo(m, H - 150, 46, { mitte: true });