Floke/Brancheneinstufung2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: Refine Sales Dashboard presentation with actual traction & features [37288f42]

Browse Source
This commit is contained in:
Floke
2026-06-01 15:23:06 +00:00
parent 289e706196
commit 7b6833cb42
1 changed files with 124 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

239
docs/Praesentation/sales_dashboard_v2.html
View File

@@ -142,98 +142,174 @@
<!-- 1. Intro Screen --> <!-- 1. Intro Screen -->
<section class="section-screen"> <section class="section-screen">
<div class="content-width text-center"> <div class="content-width text-center">
<h4 class="text-brandCyan uppercase tracking-[0.3em] mb-6 reveal font-head">Executive Briefing</h4> <h4 class="text-brandCyan uppercase tracking-[0.3em] mb-6 reveal font-head">Tag 120 Briefing</h4>
<h1 class="text-7xl md:text-8xl font-bold mb-8 reveal leading-tight">Sales Intelligence <br> <span class="text-gradient">& Yield Control</span></h1> <h1 class="text-7xl md:text-8xl font-bold mb-8 reveal leading-tight">Intelligence <br> <span class="text-gradient">Infrastructure</span></h1>
<p class="text-xl md:text-2xl text-brandLight/60 max-w-2xl mx-auto mb-12 reveal font-body font-light"> <p class="text-xl md:text-2xl text-brandLight/60 max-w-2xl mx-auto mb-12 reveal font-body font-light">
Vom passiven Archiv zum aktiven Steuerungsinstrument. <br> Vom manuellen Reporting zum Live-Cockpit. <br>
Die Wahrheit hinter den CRM-Zahlen. Ergebnisse der ersten 4 Monate & 30 Tage Dashboard.
</p> </p>
<div class="flex justify-center gap-4 reveal"> <div class="flex justify-center gap-4 reveal">
<div class="h-[1px] w-24 bg-brandCyan/30 self-center"></div> <div class="h-[1px] w-24 bg-brandCyan/30 self-center"></div>
<span class="text-brandCyan font-mono uppercase text-sm tracking-widest">Scrollen zum Start</span> <span class="text-brandCyan font-mono uppercase text-sm tracking-widest">Die Reise beginnt</span>
<div class="h-[1px] w-24 bg-brandCyan/30 self-center"></div> <div class="h-[1px] w-24 bg-brandCyan/30 self-center"></div>
</div> </div>
</div> </div>
</section> </section>
<!-- 2. The Vision / Motto --> <!-- 2. The Shift / Efficiency -->
<section class="section-screen bg-brandSlate/20"> <section class="section-screen bg-brandSlate/20">
<div class="content-width"> <div class="content-width">
<div class="grid grid-cols-1 md:grid-cols-2 gap-20 items-center"> <div class="grid grid-cols-1 md:grid-cols-2 gap-20 items-center">
<div class="reveal"> <div class="reveal">
<h2 class="text-5xl mb-8">"Vom Wiegen allein wird die Sau nicht fetter."</h2> <h2 class="text-5xl mb-8">Schluss mit dem Excel-Silo.</h2>
<p class="text-lg text-brandLight/70 mb-8"> <p class="text-lg text-brandLight/70 mb-8">
SuperOffice verwaltet Kontakte. Dieses Dashboard steuert den Erfolg. Wir haben aufgehört zu raten und angefangen zu wissen. Bisher kostete die manuelle Aufbereitung der Pipeline eine Stunde pro Woche. Heute haben wir <strong>Live-Daten auf Knopfdruck</strong>.
</p> </p>
<div class="grid grid-cols-2 gap-4 mb-8"> <div class="grid grid-cols-2 gap-4 mb-8">
<div class="p-6 bg-white/5 rounded-2xl border border-white/10"> <div class="p-6 bg-white/5 rounded-2xl border border-white/10">
<p class="text-3xl font-bold text-white">67%</p> <p class="text-3xl font-bold text-white">-1h</p>
<p class="text-xs uppercase tracking-widest text-brandLight/40">CRM White Space</p> <p class="text-xs uppercase tracking-widest text-brandLight/40">Manueller Aufwand</p>
<p class="text-[10px] text-brandLight/50 mt-1">10.000+ Accounts ohne Historie</p> <p class="text-[10px] text-brandLight/50 mt-1">pro Woche eingespart</p>
</div> </div>
<div class="p-6 bg-brandCyan/10 rounded-2xl border border-brandCyan/20"> <div class="p-6 bg-brandCyan/10 rounded-2xl border border-brandCyan/20">
<p class="text-3xl font-bold text-brandCyan">Aktiv</p> <p class="text-3xl font-bold text-brandCyan">Echtzeit</p>
<p class="text-xs uppercase tracking-widest text-brandCyan/60">Steuerung</p> <p class="text-xs uppercase tracking-widest text-brandCyan/60">Pipeline Truth</p>
<p class="text-[10px] text-brandCyan/50 mt-1">ROI-getriebene Allokation</p> <p class="text-[10px] text-brandCyan/50 mt-1">Interaktiv & Filterbar</p>
</div> </div>
</div> </div>
</div> </div>
<div class="relative reveal"> <div class="relative reveal">
<div class="absolute -inset-4 bg-brandCyan/10 blur-3xl rounded-full"></div> <div class="absolute -inset-4 bg-brandCyan/10 blur-3xl rounded-full"></div>
<div class="glass-card p-12 relative border-brandCyan/30 flex flex-col items-center justify-center text-center"> <div class="glass-card p-12 relative border-brandCyan/30 flex flex-col items-center justify-center text-center">
<div class="stat-value text-brandCyan mb-2">100%</div> <div class="stat-value text-brandCyan mb-2">30</div>
<p class="uppercase tracking-widest text-sm font-bold">Transparenz</p> <p class="uppercase tracking-widest text-sm font-bold">Tage Live</p>
<div class="w-full h-px bg-white/10 my-8"></div> <div class="w-full h-px bg-white/10 my-8"></div>
<p class="text-brandLight/50 italic">"Das Dashboard macht sich die Hände schmutzig, wo SuperOffice schweigt."</p> <p class="text-brandLight/50 italic">"Das Dashboard verbindet die Punkte, die in SuperOffice verstreut liegen."</p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<!-- 3. Risk Management / Clean Pipeline --> <!-- 3. Transparency / Deep Integration -->
<section class="section-screen"> <section class="section-screen">
<div class="content-width"> <div class="content-width">
<h2 class="text-5xl mb-16 text-center reveal">Pipeline Risk Management</h2> <div class="text-center mb-16 reveal">
<h2 class="text-5xl mb-6">Integrierte Transparenz</h2>
<p class="text-xl text-brandLight/60 max-w-3xl mx-auto">
Wir sehen nicht nur Zahlen, wir sehen die <strong>Kunden-Reise</strong>. Alles an einem Ort, statt in Untermenüs versteckt.
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 reveal">
<div class="glass-card p-8 border-white/10 hover:border-brandCyan/30 transition-all">
<div class="text-3xl mb-4">📧</div>
<h4 class="font-bold mb-2">Letzte Mail</h4>
<p class="text-xs text-brandLight/50">Direkter Status des Austauschs.</p>
</div>
<div class="glass-card p-8 border-white/10 hover:border-brandCyan/30 transition-all">
<div class="text-3xl mb-4">📞</div>
<h4 class="font-bold mb-2">Letzter Call</h4>
<p class="text-xs text-brandLight/50">Wann war der letzte Kontakt?</p>
</div>
<div class="glass-card p-8 border-white/10 hover:border-brandCyan/30 transition-all">
<div class="text-3xl mb-4">🚗</div>
<h4 class="font-bold mb-2">Vor-Ort-Termin</h4>
<p class="text-xs text-brandLight/50">Wichtige Meilensteine im Blick.</p>
</div>
<div class="glass-card p-8 border-white/10 hover:border-brandCyan/30 transition-all">
<div class="text-3xl mb-4">⚡</div>
<h4 class="font-bold mb-2">Deep Linking</h4>
<p class="text-xs text-brandLight/50">Ein Klick führt direkt zum SO-Sale.</p>
</div>
</div>
<div class="mt-16 glass-card p-10 bg-brandCyan/5 border-brandCyan/20 reveal">
<p class="text-2xl text-center text-white font-light">
"Was in SuperOffice 5 Klicks braucht, liegt hier auf der Oberfläche."
</p>
</div>
</div>
</section>
<!-- 4. Pipeline Insights / The Truth -->
<section class="section-screen bg-brandSlate/10">
<div class="content-width">
<h2 class="text-5xl mb-16 text-center reveal">Gereinigte Pipeline</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Gross --> <!-- Gross -->
<div class="glass-card p-10 reveal" style="transition-delay: 0.1s"> <div class="glass-card p-10 reveal" style="transition-delay: 0.1s">
<p class="text-brandLight/50 mb-4 uppercase text-xs font-bold tracking-widest">Brutto-Hoffnung</p> <p class="text-brandLight/50 mb-4 uppercase text-xs font-bold tracking-widest">SuperOffice Sicht</p>
<div class="stat-value text-white mb-2">5,2M</div> <div class="stat-value text-white mb-2">5,2M</div>
<p class="text-sm text-brandLight/70">Gross Pipeline in SuperOffice</p> <p class="text-sm text-brandLight/70">Inklusive Varianten-Bloat</p>
</div> </div>
<!-- Bloat --> <!-- Bloat -->
<div class="glass-card p-10 border-red-500/30 reveal" style="transition-delay: 0.2s"> <div class="glass-card p-10 border-red-500/30 reveal" style="transition-delay: 0.2s">
<p class="text-red-400 mb-4 uppercase text-xs font-bold tracking-widest">Duplicate Bloat</p> <p class="text-red-400 mb-4 uppercase text-xs font-bold tracking-widest">Identifizierte Dubletten</p>
<div class="stat-value text-red-500 mb-2">-31%</div> <div class="stat-value text-red-500 mb-2">-1,6M</div>
<p class="text-sm text-brandLight/70">Angebotsvarianten & Redundanz</p> <p class="text-sm text-brandLight/70">Variantenschutz-Logik</p>
</div> </div>
<!-- Netto --> <!-- Netto -->
<div class="glass-card p-10 border-brandCyan/50 bg-brandCyan/5 reveal" style="transition-delay: 0.3s"> <div class="glass-card p-10 border-brandCyan/50 bg-brandCyan/5 reveal" style="transition-delay: 0.3s">
<p class="text-brandCyan mb-4 uppercase text-xs font-bold tracking-widest">Reale Wahrheit</p> <p class="text-brandCyan mb-4 uppercase text-xs font-bold tracking-widest">Real-Pipeline</p>
<div class="stat-value text-brandCyan mb-2">3,6M</div> <div class="stat-value text-brandCyan mb-2">3,6M</div>
<p class="text-sm text-brandLight/70">Clean Pipeline (Investitionsbasis)</p> <p class="text-sm text-brandLight/70">Operative Handlungsgrundlage</p>
</div> </div>
</div> </div>
<p class="mt-12 text-center text-brandLight/40 max-w-2xl mx-auto reveal"> <p class="mt-12 text-center text-brandLight/40 max-w-2xl mx-auto reveal">
Unser Dashboard erkennt automatisch Dubletten und Varianten. Wir ziehen den Vorhang beiseite und sehen den realen Marktwert. Unser Dashboard übertrifft die manuelle Analyse. Es erkennt Varianten automatisch und liefert die 'Clean Pipeline'.
</p> </p>
</div> </div>
</section> </section>
<!-- 4. Winning DNA / Yield Proof --> <!-- 5. First Traction / Action Hub -->
<section class="section-screen">
<div class="content-width">
<div class="grid grid-cols-1 md:grid-cols-2 gap-20 items-center">
<div class="reveal order-2 md:order-1">
<div class="glass-card p-10 border-brandCyan/40 relative overflow-hidden">
<div class="absolute top-0 right-0 p-4 opacity-10 text-8xl">🚀</div>
<h2 class="text-4xl mb-6">Erster Proof-of-Value</h2>
<p class="text-lg text-brandLight/70 mb-8">
Der "Magic Wand" ist bereits im Einsatz. In den ersten 30 Tagen haben wir gezielte Rückrufbitte-Mails aus dem Dashboard heraus versendet.
</p>
<div class="space-y-6">
<div class="flex items-center gap-6">
<div class="stat-value text-brandGold">>20%</div>
<p class="text-xl font-semibold leading-tight">Response-Rate (Erste 70 Leads)</p>
</div>
<div class="p-4 bg-brandCyan/10 rounded-lg border border-brandCyan/20">
<p class="text-xs uppercase tracking-widest text-brandCyan font-bold mb-2">Ergebnis</p>
<p class="text-sm text-brandLight/90">Direkte Kundenreaktion und dokumentierter Austausch innerhalb von 10 Tagen.</p>
</div>
</div>
</div>
</div>
<div class="reveal order-1 md:order-2">
<h3 class="text-brandCyan font-mono uppercase tracking-widest mb-6">Early Traction</h3>
<h2 class="text-6xl mb-8 leading-tight">Vom Reporting zum <span class="text-gradient">Hub.</span></h2>
<p class="text-xl text-brandLight/60 font-light">
Ein Kollege, 70 Kontakte, massiver Erfolg. <br>
Das Dashboard befähigt zur schnellen Interaktion.
</p>
</div>
</div>
</div>
</section>
<!-- 6. Winning DNA / Discovered Pattern -->
<section class="section-screen bg-white/5"> <section class="section-screen bg-white/5">
<div class="content-width"> <div class="content-width">
<div class="text-center mb-20 reveal"> <div class="text-center mb-20 reveal">
<h2 class="text-5xl mb-6">Die Winning DNA</h2> <h2 class="text-5xl mb-6">Die Winning DNA</h2>
<p class="text-xl text-brandLight/60">Datenbelegte Erfolgsmuster statt Bauchgefühl.</p> <p class="text-xl text-brandLight/60">Die Daten-Analyse der Historie zeigt den Weg.</p>
</div> </div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-12"> <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
<div class="glass-card p-12 reveal"> <div class="glass-card p-12 reveal">
<h3 class="text-2xl mb-8 flex items-center gap-3"> <h3 class="text-2xl mb-8 flex items-center gap-3">
<span class="w-8 h-8 rounded bg-brandCyan/20 flex items-center justify-center text-brandCyan">01</span> <span class="w-8 h-8 rounded bg-brandCyan/20 flex items-center justify-center text-brandCyan">Insight</span>
Der Vor-Ort-Hebel Der Vor-Ort-Fokus
</h3> </h3>
<div class="flex items-end gap-6 mb-8"> <div class="flex items-end gap-6 mb-8">
<div class="w-full bg-white/5 h-48 rounded-t-lg relative overflow-hidden"> <div class="w-full bg-white/5 h-48 rounded-t-lg relative overflow-hidden">
@@ -244,111 +320,44 @@
</div> </div>
</div> </div>
<p class="text-3xl font-bold text-brandCyan mb-2">+159% Win-Rate</p> <p class="text-3xl font-bold text-brandCyan mb-2">+159% Win-Rate</p>
<p class="text-brandLight/60">Sobald eine Demo vor Ort stattfindet, verdreifacht sich die Abschlusswahrscheinlichkeit.</p> <p class="text-brandLight/60">Die historische Korrelation ist eindeutig: Demos vor Ort verdreifachen die Gewinnchance.</p>
</div> </div>
<div class="glass-card p-12 reveal"> <div class="glass-card p-12 reveal">
<h3 class="text-2xl mb-8 flex items-center gap-3"> <h3 class="text-2xl mb-8 flex items-center gap-3">
<span class="w-8 h-8 rounded bg-brandCyan/20 flex items-center justify-center text-brandCyan">02</span> <span class="w-8 h-8 rounded bg-brandCyan/20 flex items-center justify-center text-brandCyan">Ziel</span>
Follow-Up Speed Speed-to-Lead
</h3> </h3>
<div class="flex items-center justify-between gap-8 mb-12"> <div class="flex items-center justify-between gap-8 mb-12">
<div class="text-center"> <div class="text-center">
<p class="text-4xl font-bold text-white/30 line-through">37</p> <p class="text-4xl font-bold text-white/30 line-through">37</p>
<p class="text-xs uppercase tracking-widest text-brandLight/40">Tage (Alt)</p> <p class="text-xs uppercase tracking-widest text-brandLight/40">Tage (Median)</p>
</div> </div>
<div class="flex-1 h-px bg-white/10 relative"> <div class="flex-1 h-px bg-white/10 relative">
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-8 h-8 rounded-full bg-brandCyan flex items-center justify-center text-brandDark font-bold">➔</div> <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-8 h-8 rounded-full bg-brandCyan flex items-center justify-center text-brandDark font-bold">➔</div>
</div> </div>
<div class="text-center"> <div class="text-center">
<p class="text-6xl font-bold text-brandCyan">10</p> <p class="text-6xl font-bold text-brandCyan">10</p>
<p class="text-xs uppercase tracking-widest font-bold">Tage (Neu)</p> <p class="text-xs uppercase tracking-widest font-bold">Tage (Target)</p>
</div> </div>
</div> </div>
<p class="text-xl text-white mb-2">Reaktionszeit massiv gesenkt.</p> <p class="text-xl text-white mb-2">Reaktionszeit als Benchmark.</p>
<p class="text-brandLight/60">Das Dashboard erkennt Stagnation sofort und triggert den Sales-Manager.</p> <p class="text-brandLight/60">Das Dashboard macht Stagnation sichtbar, bevor der Lead erkaltet.</p>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<!-- 5. Action Hub / ROI -->
<section class="section-screen">
<div class="content-width">
<div class="grid grid-cols-1 md:grid-cols-2 gap-20 items-center">
<div class="reveal order-2 md:order-1">
<div class="glass-card p-10 border-brandCyan/40 relative overflow-hidden">
<div class="absolute top-0 right-0 p-4 opacity-10 text-8xl">✨</div>
<h2 class="text-4xl mb-6">Der Activity Hub</h2>
<p class="text-lg text-brandLight/70 mb-8">
Das Dashboard ist kein Rückspiegel, es ist ein Gaspedal. Über den "Magic Wand" generiert der Manager mit einem Klick personalisierte Nachrichten.
</p>
<div class="space-y-6">
<div class="flex items-center gap-6">
<div class="stat-value text-brandGold">20%</div>
<p class="text-xl font-semibold leading-tight">Reaktionsquote auf Rückrufbitte</p>
</div>
<div class="p-4 bg-white/5 rounded-lg border border-white/10">
<p class="text-xs uppercase tracking-widest text-brandCyan font-bold mb-2">Sicherheit & Transparenz</p>
<p class="text-sm text-brandLight/60">Vollständige Entra ID Integration. Jede Aktion ist personengebunden und fließt direkt als Aktivität zurück ins CRM.</p>
</div>
</div>
</div>
</div>
<div class="reveal order-1 md:order-2">
<h3 class="text-brandCyan font-mono uppercase tracking-widest mb-6">Effizienz-Hebel</h3>
<h2 class="text-6xl mb-8 leading-tight">Vom Reporting zur <span class="text-gradient">Interaktion.</span></h2>
<p class="text-xl text-brandLight/60 font-light">
Wir befreien den Vertrieb von administrativen Fesseln. <br>
Mehr Zeit für Kunden, weniger Zeit in Excel-Silos.
</p>
</div>
</div>
</div>
</section>
<!-- 6. Scalability / The Machine -->
<section class="section-screen bg-brandCyan/5">
<div class="content-width text-center">
<div class="inline-block glass-card px-8 py-3 mb-10 reveal">
<span class="text-brandCyan font-mono uppercase tracking-widest text-sm">Prognose & Skalierung</span>
</div>
<h2 class="text-7xl mb-12 reveal font-head uppercase tracking-tighter">The Machine</h2>
<p class="text-2xl text-brandLight/70 max-w-3xl mx-auto mb-16 reveal font-light">
Wir übersetzen Ihre strategischen Monatsziele live in wöchentliche Lead-Vorgaben für jeden Sales-Manager – individuell berechnet auf Basis ihrer Hit-Rate.
</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 reveal">
<div class="p-8 border-r border-white/5">
<p class="text-brandLight/40 mb-2 uppercase text-xs tracking-widest">Ziel-Vorgabe</p>
<p class="text-4xl font-bold text-white">300k €</p>
</div>
<div class="p-8 border-r border-white/5">
<p class="text-brandLight/40 mb-2 uppercase text-xs tracking-widest">Erforderliche Demos</p>
<p class="stat-value text-brandCyan">14</p>
</div>
<div class="p-8">
<p class="text-brandLight/40 mb-2 uppercase text-xs tracking-widest">Leads pro Woche</p>
<p class="stat-value text-brandGold">42</p>
</div>
</div>
<div class="mt-20 reveal">
<p class="text-brandCyan font-bold uppercase tracking-widest text-sm">Wachstum wird vorhersagbar.</p>
</div>
</div>
</section>
<!-- 7. Conclusion --> <!-- 7. Conclusion -->
<section class="section-screen"> <section class="section-screen">
<div class="content-width text-center"> <div class="content-width text-center">
<h2 class="text-6xl mb-12 reveal">Das Fundament für <br> <span class="text-gradient">RoboPlanet 2026</span></h2> <h2 class="text-6xl mb-12 reveal">Ein Werkzeug für <br> <span class="text-gradient">echte Sales-Champions.</span></h2>
<div class="max-w-xl mx-auto space-y-8 reveal"> <div class="max-w-xl mx-auto space-y-8 reveal">
<p class="text-xl text-brandLight/70"> <p class="text-xl text-brandLight/70">
Wir haben das CRM modernisiert, die Pipeline bereinigt und die Erfolgs-DNA entschlüsselt. Wir haben aufgehört, Berichte zu bauen. Wir haben angefangen, ein Cockpit zu fliegen.
</p> </p>
<div class="h-px w-32 bg-brandCyan mx-auto opacity-30"></div> <div class="h-px w-32 bg-brandCyan mx-auto opacity-30"></div>
<p class="text-2xl font-bold text-white uppercase tracking-widest">Bereit zum Abheben.</p> <p class="text-2xl font-bold text-white uppercase tracking-widest">Bereit für Monat 2.</p>
</div> </div>
</div> </div>
</section> </section>
@@ -364,13 +373,13 @@
const progressBar = document.getElementById('progress-bar'); const progressBar = document.getElementById('progress-bar');
const tobyMessages = [ const tobyMessages = [
"Willkommen im Maschinenraum!", "Tag 120: Wir sind bereit!",
"Hier wird die 'Brutto-Hoffnung' zur Realität.", "Adieu Excel! Hallo Freizeit.",
"31% weniger Müll in der Pipeline!", "Alles im Blick. Ohne 1000 Klicks.",
"Vor-Ort-Termine sind unser Gold.", "Die Pipeline ist jetzt blitzsauber.",
"Magic Wand: 20% Antwortquote!", "20% Quote? Das ist erst der Anfang!",
"Individuelle Ziele für jeden Manager.", "Daten lügen nicht: Demos bringen Yield.",
"Wachstum ist jetzt Mathematik!" "Anschnallen, wir skalieren!"
]; ];
function updateToby(index) { function updateToby(index) {