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

docs: C-Level Story Refinement - High-Fidelity DGS GmbH Visual inkl. Lifecycle Timeline integriert

Browse Source
This commit is contained in:
Floke
2026-06-01 22:04:52 +00:00
parent f1eaab2c47
commit ffc5081c6e
1 changed files with 68 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
docs/Praesentation/Sales_Intelligence_Cockpit_CLevel.html
View File

@@ -95,45 +95,82 @@
</section>
<!-- 2. VORTEILE: KLARHEIT -->
<section class="slide" id="vorteile">
<div class="story-text">
<h2 class="text-5xl font-black italic mb-8 leading-tight">Vorteile: <br><span class="text-blue-500">Struktur schlägt Chaos.</span></h2>
<div class="space-y-6">
<div class="flex gap-4">
<div class="w-8 h-8 rounded-full bg-emerald-500/20 flex items-center justify-center text-emerald-500 shrink-0">✓</div>
<p class="text-slate-300 text-lg">Keine Excel-Wüsten mit 50 Spalten. Informationen sind logisch <span class="text-white font-bold italic">am Account gruppiert</span>.</p>
</div>
<div class="flex gap-4">
<div class="w-8 h-8 rounded-full bg-blue-500/20 flex items-center justify-center text-blue-500 shrink-0">✓</div>
<p class="text-slate-300 text-lg">Ein Klick statt endlosem Suchen. Die Historie und der nächste Schritt sind sofort sichtbar.</p>
</div>
</div>
</div>
<div class="visual-container">
<!-- Account Detail Card -->
<div class="visual-element glass-panel border-blue-500/30 scale-110">
<div class="flex justify-between items-start mb-6">
<div class="visual-container">
<div class="visual-element glass-panel border-blue-500/30 scale-100 p-0 overflow-hidden">
<!-- Header / Row View -->
<div class="p-6 bg-slate-900/80 border-b border-slate-800">
<div class="flex justify-between items-start mb-4">
<div>
<div class="text-[10px] font-bold text-blue-500 uppercase mb-1">Live Account View</div>
<h3 class="text-xl font-black text-white leading-none">Bayernwerk Netz GmbH</h3>
<h3 class="text-2xl font-black text-white leading-tight">DGS GmbH</h3>
<div class="text-blue-400 text-sm font-semibold">(Paul Goliasch)</div>
</div>
<div class="text-right">
<div class="text-2xl font-black text-white">56.996 €</div>
<div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Deal Volumen</div>
</div>
<span class="px-2 py-1 bg-emerald-500/10 text-emerald-500 text-[8px] font-bold rounded border border-emerald-500/20 uppercase">Validiert</span>
</div>
<div class="grid grid-cols-2 gap-4">
<div class="p-3 bg-slate-900/50 rounded-lg border border-slate-800">
<div class="text-[8px] text-slate-500 uppercase font-bold mb-1">Letzte Aktivität</div>
<div class="text-[11px] font-semibold text-slate-200 leading-tight">Angebot versendet (V5)</div>
<div class="text-[9px] text-slate-500 mt-1">vor 2 Tagen • I. Akar</div>
<div class="flex flex-wrap gap-2 mb-4">
<span class="px-2 py-0.5 bg-red-500/10 text-red-500 text-[9px] font-bold rounded border border-red-500/20 uppercase">Overdue Date</span>
<span class="px-2 py-0.5 bg-orange-500/10 text-orange-400 text-[9px] font-bold rounded border border-orange-500/20 uppercase">Missing Contract Type</span>
</div>
<div class="text-xs text-slate-300 italic mb-4">"3 x CC1 Pro mit Nachlass"</div>
<!-- Row-Data-Grid (Dashboard Style) -->
<div class="grid grid-cols-4 gap-2 py-3 border-y border-slate-800/50">
<div class="text-center">
<div class="text-slate-500 text-[10px] mb-1">📍 Ort</div>
<div class="text-[10px] font-mono">03.12.25</div>
</div>
<div class="p-3 bg-blue-600/10 rounded-lg border border-blue-500/20">
<div class="text-[8px] text-blue-400 uppercase font-bold mb-1">Nächster Schritt</div>
<div class="text-[11px] font-semibold text-blue-100 leading-tight">Follow-up Telefonat</div>
<div class="text-[9px] text-blue-400/60 mt-1">Morgen, 10:00 Uhr</div>
<div class="text-center">
<div class="text-slate-500 text-[10px] mb-1">📞 Call</div>
<div class="text-[10px] font-mono">29.04.26</div>
</div>
<div class="text-center">
<div class="text-slate-500 text-[10px] mb-1">✉️ Mail</div>
<div class="text-[10px] font-mono">01.12.25</div>
</div>
<div class="text-center">
<div class="text-slate-500 text-[10px] mb-1">Status</div>
<div class="text-[10px] font-bold text-blue-500 uppercase">Open</div>
</div>
</div>
</div>
<!-- Lifecycle Timeline Part -->
<div class="p-6 bg-slate-900/40">
<div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-6">Customer Lifecycle Timeline</div>
<div class="relative space-y-6 before:absolute before:left-[11px] before:top-2 before:bottom-2 before:w-0.5 before:bg-slate-800">
<!-- Step 1 -->
<div class="relative pl-8">
<div class="absolute left-0 top-1 w-6 h-6 rounded-full bg-emerald-500 flex items-center justify-center text-[10px] font-bold text-white shadow-[0_0_15px_rgba(16,185,129,0.5)]">1</div>
<div class="flex justify-between items-center">
<span class="text-xs font-bold text-white">Erster Kontakt</span>
<span class="text-[10px] text-slate-500">19.08.2025</span>
</div>
</div>
<!-- Step 2 -->
<div class="relative pl-8">
<div class="absolute left-0 top-1 w-6 h-6 rounded-full bg-blue-500 flex items-center justify-center text-[10px] font-bold text-white shadow-[0_0_15px_rgba(59,130,246,0.5)]">2</div>
<div class="flex justify-between items-center">
<span class="text-xs font-bold text-white">Angebot erstellt</span>
<span class="text-[10px] text-slate-500">30.03.2026</span>
</div>
</div>
<!-- Step 3 -->
<div class="relative pl-8 opacity-40">
<div class="absolute left-0 top-1 w-6 h-6 rounded-full bg-slate-700 flex items-center justify-center text-[10px] font-bold text-white">3</div>
<div class="flex justify-between items-center">
<span class="text-xs font-bold text-slate-400">Verkauf (Won)</span>
<span class="text-[10px] text-slate-500 italic">Ausstehend</span>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<!-- 3. UI TEASER: NAVIGATION -->
<section class="slide" id="ui-teaser">