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

[37288f42] Docs: Launch der v2.0 Sales Dashboard Präsentation - Beamer-tauglicher Light Mode & Controlling-Fokus

Browse Source
This commit is contained in:
Floke
2026-06-02 05:59:26 +00:00
parent ffc5081c6e
commit 11d55ad98e
1 changed files with 539 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

539
docs/Praesentation/Sales_Intelligence_Cockpit_CLevel_v2.html Normal file
View File

@@ -0,0 +1,539 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sales Intelligence Cockpit | RoboPlanet</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- GSAP & ScrollTrigger (Local) -->
<script src="lib/gsap.min.js"></script>
<script src="lib/ScrollTrigger.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;600;800&display=swap" rel="stylesheet">
<style>
:root {
--robo-blue: #2563eb;
--robo-dark-blue: #1e40af;
--bg-light: #f8fafc;
--text-main: #0f172a;
--text-muted: #64748b;
}
body {
font-family: 'Plus Jakarta Sans', sans-serif;
background-color: var(--bg-light);
color: var(--text-main);
overflow-x: hidden;
margin: 0;
padding: 0;
}
/* 1080p Optimization */
.slide {
height: 100vh;
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
padding: 0 8%;
position: relative;
overflow: hidden;
}
.split-layout {
display: grid;
grid-template-cols: 42% 58%;
width: 100%;
height: 100%;
align-items: center;
gap: 6rem;
}
.story-content {
z-index: 10;
}
.visual-area {
position: relative;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* UI Element Styling */
.dashboard-card {
background: white;
border: 1px solid #e2e8f0;
border-radius: 1.5rem;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.02);
padding: 2.5rem;
width: 100%;
max-width: 650px;
}
.kpi-card {
background: white;
border-radius: 1.25rem;
border: 1px solid #e2e8f0;
padding: 2rem;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}
/* Scrollytelling Transitions */
.visual-element {
position: absolute;
opacity: 0;
transform: translateY(40px);
pointer-events: none;
width: 100%;
display: flex;
justify-content: center;
}
.visual-element.active {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.progress-bar {
position: fixed;
top: 0;
left: 0;
height: 6px;
background: var(--robo-blue);
z-index: 100;
}
.logo {
position: fixed;
top: 3rem;
left: 3rem;
width: 14rem;
z-index: 50;
}
h1, h2 {
letter-spacing: -0.03em;
}
.highlight-blue {
color: var(--robo-blue);
}
.manager-dot {
width: 10px;
height: 10px;
border-radius: 50%;
display: inline-block;
margin-right: 8px;
}
</style>
</head>
<body>
<div class="progress-bar" id="progressBar" style="width: 0%;"></div>
<!-- Logo Area -->
<div class="logo">
<img src="ROBOPLANET-Logo-2024_blue-white_4c.svg" alt="RoboPlanet Logo" class="w-full">
</div>
<main id="main">
<!-- Slide 1: Ausgangslage -->
<section class="slide" id="slide1">
<div class="split-layout">
<div class="story-content">
<span class="text-blue-600 font-bold uppercase tracking-[0.2em] text-xs mb-6 block">Executive Briefing</span>
<h2 class="text-7xl font-extrabold mb-10 leading-[1.1]">Die Ausgangslage: <br><span class="text-slate-300">Verteilte Sichten.</span></h2>
<p class="text-2xl text-slate-500 leading-relaxed mb-10 font-light">
Daten waren vorhanden – aber nicht schnell genug operativ nutzbar. Fragmentierung machte eine einheitliche Steuerung schwierig.
</p>
<div class="space-y-6">
<div class="flex items-center gap-4 text-xl font-semibold text-slate-700">
<div class="w-3 h-3 rounded-full bg-blue-600"></div> Manuelle Reports statt Live-Sicht
</div>
<div class="flex items-center gap-4 text-xl font-semibold text-slate-700">
<div class="w-3 h-3 rounded-full bg-blue-600"></div> Verteilte Informationen statt operativer Sicht
</div>
<div class="flex items-center gap-4 text-xl font-semibold text-slate-700">
<div class="w-3 h-3 rounded-full bg-blue-600"></div> Erschwerte Priorisierung im Tagesgeschäft
</div>
</div>
</div>
<div class="visual-area">
<div class="visual-element active" id="visual1">
<div class="relative w-[500px] h-[400px]">
<div class="absolute top-0 left-0 kpi-card w-64 opacity-40 shadow-xl border-slate-200">
<div class="h-4 w-full bg-slate-100 rounded mb-2"></div>
<div class="h-4 w-2/3 bg-slate-50 rounded"></div>
</div>
<div class="absolute top-20 right-0 kpi-card w-64 opacity-60 shadow-2xl border-slate-200">
<div class="h-4 w-full bg-slate-100 rounded mb-2"></div>
<div class="h-4 w-1/2 bg-slate-50 rounded"></div>
</div>
<div class="absolute bottom-10 left-10 kpi-card w-64 opacity-30 shadow-lg border-slate-200">
<div class="h-4 w-full bg-slate-100 rounded mb-2"></div>
<div class="h-4 w-3/4 bg-slate-50 rounded"></div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Slide 2: Das Cockpit -->
<section class="slide" id="slide2">
<div class="split-layout">
<div class="story-content">
<h2 class="text-7xl font-extrabold mb-10 leading-[1.1]">Das Cockpit: <br><span class="text-blue-600">Alles Wesentliche auf einer Seite.</span></h2>
<p class="text-2xl text-slate-500 leading-relaxed mb-10 font-light">
Das Dashboard bündelt CRM-Daten zu einer operativen Kommandozentrale. Account, Sale, Aktivitäten und nächste Schritte auf einen Blick.
</p>
<div class="bg-blue-50/50 border-l-[6px] border-blue-600 p-8 rounded-r-2xl">
<p class="text-blue-900 text-2xl font-bold italic">"Eine Seite statt zehn Klicks."</p>
</div>
</div>
<div class="visual-area">
<div class="visual-element" id="visual2">
<div class="dashboard-card border-blue-100">
<div class="flex justify-between items-start mb-8">
<div>
<h3 class="text-3xl font-extrabold text-slate-900 mb-1">DGS GmbH</h3>
<div class="text-blue-600 font-bold text-lg">Paul Goliasch</div>
</div>
<div class="text-right">
<div class="text-3xl font-black text-slate-900">56.996 €</div>
<div class="text-[10px] font-bold text-slate-400 uppercase tracking-[0.2em]">Deal Volumen</div>
</div>
</div>
<div class="flex gap-3 mb-8">
<span class="px-3 py-1.5 bg-red-50 text-red-600 text-[10px] font-bold rounded-lg border border-red-100">OVERDUE DATE</span>
<span class="px-3 py-1.5 bg-blue-50 text-blue-600 text-[10px] font-bold rounded-lg border border-blue-100">SERVICE ROBOTICS</span>
</div>
<div class="grid grid-cols-4 gap-6 py-6 border-y border-slate-100 mb-8">
<div class="text-center">
<div class="text-slate-400 text-[10px] uppercase font-bold mb-2">Ort</div>
<div class="font-bold text-lg">Neuching</div>
</div>
<div class="text-center">
<div class="text-slate-400 text-[10px] uppercase font-bold mb-2">Letzter Call</div>
<div class="font-bold text-lg">Gestern</div>
</div>
<div class="text-center">
<div class="text-slate-400 text-[10px] uppercase font-bold mb-2">Timeline</div>
<div class="font-bold text-lg">Schritt 2</div>
</div>
<div class="text-center">
<div class="text-slate-400 text-[10px] uppercase font-bold mb-2">Status</div>
<div class="font-bold text-blue-600 text-lg italic uppercase">Offen</div>
</div>
</div>
<div class="space-y-4">
<div class="text-[11px] font-bold text-slate-400 uppercase tracking-[0.2em]">Nächste Schritte</div>
<div class="flex items-center gap-4 p-4 bg-slate-50 rounded-2xl border border-slate-100">
<div class="w-3 h-3 rounded-full bg-blue-600 shadow-[0_0_10px_rgba(37,99,235,0.4)]"></div>
<div class="text-lg font-semibold text-slate-700">Angebot nachfassen (Dienstag)</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Slide 3: Vom Überblick zur Aktion -->
<section class="slide" id="slide3">
<div class="split-layout">
<div class="story-content">
<h2 class="text-7xl font-extrabold mb-10 leading-[1.1]">Vom Überblick <br><span class="text-blue-600">zur Aktion.</span></h2>
<p class="text-2xl text-slate-500 leading-relaxed mb-10 font-light">
Kein Rückspiegel, sondern ein aktives Werkzeug. Das Dashboard ermöglicht direkte Interaktionen, die messbare Ergebnisse liefern.
</p>
<div class="bg-slate-50 p-10 rounded-[2rem] border border-slate-100">
<div class="text-7xl font-black text-blue-600 mb-4">~20%</div>
<div class="text-2xl font-bold text-slate-800 italic">Dokumentierte Response</div>
<p class="text-lg text-slate-500 mt-4 leading-relaxed">Innerhalb von 10 Tagen bei ~70 Bestandskontakten durch gezielte, systemgestützte Rückrufbitten.</p>
</div>
</div>
<div class="visual-area">
<div class="visual-element" id="visual3">
<div class="kpi-card w-[450px] border-blue-200 bg-white relative">
<div class="absolute -top-6 -right-6 w-20 h-20 bg-blue-600 rounded-full flex items-center justify-center text-white shadow-2xl">
<svg class="w-10 h-10" fill="currentColor" viewBox="0 0 20 20"><path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z"></path></svg>
</div>
<div class="font-black text-2xl mb-8 italic text-slate-800">Aktion: Bulk-Rückrufbitte</div>
<div class="space-y-6">
<div>
<div class="flex justify-between text-xs font-bold text-slate-400 mb-2 uppercase tracking-widest">Kontaktdichte</div>
<div class="h-3 w-full bg-slate-100 rounded-full">
<div class="h-full bg-blue-600 w-[20%] rounded-full shadow-[0_0_15px_rgba(37,99,235,0.3)]"></div>
</div>
</div>
<div class="grid grid-cols-2 gap-6 pt-4 border-t border-slate-50">
<div class="text-center">
<div class="text-3xl font-black text-slate-900">70</div>
<div class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Kontakte</div>
</div>
<div class="text-center">
<div class="text-3xl font-black text-blue-600">14</div>
<div class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Reaktionen</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Slide 4: Ehrliche Pipeline -->
<section class="slide" id="slide4">
<div class="split-layout">
<div class="story-content">
<h2 class="text-7xl font-extrabold mb-10 leading-[1.1]">Ehrliche Pipeline <br><span class="text-red-600">statt schöne Pipeline.</span></h2>
<p class="text-2xl text-slate-500 leading-relaxed mb-10 font-light">
Gute Steuerung beginnt mit der Realität. Wir haben diesen Monat bewusst mehr "verlorene" Deals dokumentiert als je zuvor.
</p>
<div class="kpi-card border-red-100 bg-red-50/20 p-10">
<div class="text-6xl font-black text-red-600 mb-2">+44%</div>
<div class="text-2xl font-bold text-slate-800">Bereinigtes Lost-Volumen</div>
<p class="text-lg text-slate-500 italic mt-4 leading-relaxed">Wir reduzieren Pipeline-Schulden und schaffen eine belastbare Forecast-Grundlage.</p>
</div>
</div>
<div class="visual-area">
<div class="visual-element" id="visual4">
<div class="dashboard-card w-[500px]">
<div class="text-[11px] font-bold text-slate-400 uppercase tracking-[0.2em] mb-8 text-center">Pipeline Bereinigung (Volume)</div>
<div class="space-y-10">
<div>
<div class="flex justify-between text-sm font-bold mb-3">
<span class="text-slate-400">MÄRZ 2026</span>
<span class="text-slate-800">1,42 Mio. € LOST</span>
</div>
<div class="h-6 w-full bg-slate-100 rounded-full overflow-hidden">
<div class="h-full bg-slate-300 w-[42%]"></div>
</div>
</div>
<div>
<div class="flex justify-between text-sm font-bold mb-3">
<span class="text-red-600">MAI 2026</span>
<span class="text-red-600">2,05 Mio. € LOST</span>
</div>
<div class="h-6 w-full bg-slate-100 rounded-full overflow-hidden shadow-inner">
<div class="h-full bg-red-600 w-[65%]"></div>
</div>
</div>
<div class="pt-6 border-t border-slate-50 text-center">
<p class="text-sm text-slate-400 italic">"Transparenz ohne Schuldzuweisung: <br>Wir schaffen Platz für echte Chancen."</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Slide 5: Management Intelligence -->
<section class="slide" id="slide5">
<div class="split-layout">
<div class="story-content">
<h2 class="text-7xl font-extrabold mb-10 leading-[1.1]">Management <br><span class="text-blue-600">Intelligence.</span></h2>
<p class="text-2xl text-slate-500 leading-relaxed mb-10 font-light">
Muster erkennen, bevor sie Bauchgefühl bleiben. Wir identifizieren jetzt Habits, die zum Erfolg führen, und visualisieren Stagnations-Zonen.
</p>
<div class="space-y-10">
<div class="flex items-start gap-6">
<div class="w-14 h-14 bg-blue-50 rounded-2xl flex items-center justify-center text-blue-600 flex-shrink-0 shadow-sm">
<svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
</div>
<div>
<div class="text-xl font-bold text-slate-800 mb-1">Pipeline Velocity</div>
<p class="text-lg text-slate-500 leading-relaxed">Identifikation von Deals ohne Interaktion (>30 Tage). Wir sehen, wo Energie hinfließt – und wo sie fehlt.</p>
</div>
</div>
<div class="flex items-start gap-6">
<div class="w-14 h-14 bg-blue-50 rounded-2xl flex items-center justify-center text-blue-600 flex-shrink-0 shadow-sm">
<svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path></svg>
</div>
<div>
<div class="text-xl font-bold text-slate-800 mb-1">Winning Patterns</div>
<p class="text-lg text-slate-500 leading-relaxed">Korrelation zwischen Schlagzahl und Abschlussquote. Datenbelegte Habits statt Vermutungen.</p>
</div>
</div>
</div>
</div>
<div class="visual-area">
<div class="visual-element" id="visual5">
<div class="dashboard-card w-[550px]">
<div class="text-[11px] font-bold text-slate-400 uppercase tracking-[0.2em] mb-10 text-center">Controlling: Habits & Performance</div>
<div class="grid grid-cols-3 gap-8 mb-12">
<div class="text-center">
<div class="text-blue-600 font-black text-3xl leading-none">12.4d</div>
<div class="text-[9px] font-bold text-slate-400 uppercase mt-3 tracking-widest">Ø Response</div>
</div>
<div class="text-center">
<div class="text-blue-600 font-black text-3xl leading-none">4.8</div>
<div class="text-[9px] font-bold text-slate-400 uppercase mt-3 tracking-widest">Calls / Deal</div>
</div>
<div class="text-center">
<div class="text-blue-600 font-black text-3xl leading-none">+159%</div>
<div class="text-[9px] font-bold text-slate-400 uppercase mt-3 tracking-widest">Uplift Demo</div>
</div>
</div>
<div class="space-y-6">
<div class="text-[11px] font-bold text-slate-400 uppercase tracking-[0.2em] mb-4">Team-Aktivität & Puls</div>
<div class="flex items-center gap-4 p-4 bg-blue-50/50 rounded-2xl border border-blue-100 relative overflow-hidden">
<div class="absolute left-0 top-0 bottom-0 w-1 bg-blue-600"></div>
<div class="w-10 h-10 bg-blue-600 rounded-full flex items-center justify-center text-xs font-bold text-white italic">PH</div>
<div class="flex-1">
<div class="text-sm font-bold text-slate-800">Pierre Hollein</div>
<div class="text-[10px] text-slate-500 italic">Vorführung @ Jedenak CNC</div>
</div>
<div class="text-[10px] font-mono font-bold text-blue-600 bg-blue-100 px-2 py-1 rounded">LIVE</div>
</div>
<div class="flex items-center gap-4 p-4 bg-slate-50 rounded-2xl border border-slate-100">
<div class="w-10 h-10 bg-slate-200 rounded-full flex items-center justify-center text-xs font-bold text-white italic">IA</div>
<div class="flex-1">
<div class="text-sm font-bold text-slate-800">Ibrahim Akar</div>
<div class="text-[10px] text-slate-500 italic">Angebot @ Bayernwerk Netz</div>
</div>
<div class="text-[10px] font-mono text-slate-400">Vor 15 Min.</div>
</div>
<div class="flex items-center gap-4 p-4 bg-slate-50 rounded-2xl border border-slate-100">
<div class="w-10 h-10 bg-slate-200 rounded-full flex items-center justify-center text-xs font-bold text-white italic">SH</div>
<div class="flex-1">
<div class="text-sm font-bold text-slate-800">Sebastian Hosbach</div>
<div class="text-[10px] text-slate-500 italic">Follow-up: Klinikum Erding</div>
</div>
<div class="text-[10px] font-mono text-slate-400">Vor 1 Std.</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Slide 6: White Space -->
<section class="slide" id="slide6">
<div class="split-layout">
<div class="story-content">
<h2 class="text-7xl font-extrabold mb-10 leading-[1.1]">Ungenutztes <br><span class="text-blue-600">Potenzial.</span></h2>
<p class="text-2xl text-slate-500 leading-relaxed mb-10 font-light">
Die Analyse offenbart eine strategische Chance: 68% unserer Accounts im CRM haben bisher keinen direkten Ansprechpartner.
</p>
<div class="bg-blue-50 p-10 rounded-[2.5rem] border border-blue-100 relative overflow-hidden">
<div class="absolute -right-10 -bottom-10 w-40 h-40 bg-blue-100/50 rounded-full"></div>
<div class="text-7xl font-black text-blue-600 mb-4">68%</div>
<div class="text-2xl font-bold text-slate-800 italic">White Space Accounts</div>
<p class="text-lg text-slate-500 mt-4 leading-relaxed">Nächster Schritt: Systematische Qualifizierung und Erschließung dieser Daten-Rohstoffe.</p>
</div>
</div>
<div class="visual-area">
<div class="visual-element" id="visual6">
<div class="relative w-80 h-80 flex items-center justify-center">
<svg class="absolute inset-0 w-full h-full -rotate-90" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" fill="none" stroke="#f1f5f9" stroke-width="12" />
<circle cx="50" cy="50" r="40" fill="none" stroke="#2563eb" stroke-width="12" stroke-dasharray="251.2" stroke-dashoffset="80.4" stroke-linecap="round" />
</svg>
<div class="text-center z-10">
<div class="text-5xl font-black text-blue-600 leading-none">11.216</div>
<div class="text-[11px] font-bold text-slate-400 uppercase mt-4 tracking-[0.2em]">Roh-Accounts</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Slide 7: Abschluss -->
<section class="slide" id="slide7">
<div class="w-full text-center max-w-5xl mx-auto">
<h2 class="text-[7rem] font-extrabold mb-16 italic leading-none tracking-tighter">Vertrieb. <span class="text-blue-600">Steuerbar.</span></h2>
<div class="grid grid-cols-3 gap-10 mb-20">
<div class="p-10 kpi-card shadow-xl border-slate-100">
<div class="text-blue-600 font-black text-3xl mb-4">Transparent</div>
<p class="text-lg text-slate-500 leading-relaxed">Alle relevanten Daten auf einer einzigen Seite.</p>
</div>
<div class="p-10 kpi-card shadow-xl border-slate-100">
<div class="text-blue-600 font-black text-3xl mb-4">Priorisiert</div>
<p class="text-lg text-slate-500 leading-relaxed">Vom Stagnations-Alarm direkt zur operativen Aktion.</p>
</div>
<div class="p-10 kpi-card shadow-xl border-slate-100">
<div class="text-blue-600 font-black text-3xl mb-4">Handlungsfähig</div>
<p class="text-lg text-slate-500 leading-relaxed">Echte Hebel statt bloßer Dokumentation.</p>
</div>
</div>
<div class="max-w-3xl mx-auto border-t border-slate-100 pt-12">
<p class="text-3xl text-slate-600 italic font-light leading-relaxed mb-6">"Du katapultierst uns damit definitiv in eine modernere Zukunft."</p>
<p class="text-[11px] font-bold text-slate-400 uppercase tracking-[0.4em]">— Feedback aus dem Team</p>
</div>
</div>
</section>
</main>
<script>
gsap.registerPlugin(ScrollTrigger);
// Progress Bar
gsap.to("#progressBar", {
width: "100%",
scrollTrigger: {
trigger: "body",
start: "top top",
end: "bottom bottom",
scrub: 0.3
}
});
// Scrollytelling Setup
const slides = ["slide1", "slide2", "slide3", "slide4", "slide5", "slide6", "slide7"];
slides.forEach((slideId, index) => {
const visualId = `visual${index + 1}`;
const visual = document.getElementById(visualId);
if (visual) {
ScrollTrigger.create({
trigger: `#${slideId}`,
start: "top center",
end: "bottom center",
onEnter: () => {
gsap.to(`#${visualId}`, { opacity: 1, y: 0, duration: 0.8, ease: "power2.out" });
},
onLeave: () => {
if (index < slides.length - 1) {
gsap.to(`#${visualId}`, { opacity: 0, y: -30, duration: 0.5 });
}
},
onEnterBack: () => {
gsap.to(`#${visualId}`, { opacity: 1, y: 0, duration: 0.8 });
},
onLeaveBack: () => {
gsap.to(`#${visualId}`, { opacity: 0, y: 30, duration: 0.5 });
}
});
}
});
// Animation for Slide 1 visual
gsap.from("#visual1 .kpi-card", {
opacity: 0,
scale: 0.8,
stagger: 0.1,
duration: 1,
ease: "back.out(1.7)"
});
</script>
</body>
</html>