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

feat: Refactor presentation to focus on Dashboard Cockpit & Action Hub [37288f42]

Browse Source
This commit is contained in:
Floke
2026-06-01 16:20:25 +00:00
parent 6722f7807f
commit b16e9ac8a0
1 changed files with 166 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files

337
docs/Praesentation/sales_dashboard_v2.html
View File

@@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Executive Briefing: The Agentic Sales Engine</title> <title>Sales Intelligence Dashboard: Executive Briefing</title>
<!-- Fonts --> <!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -19,8 +19,7 @@
brandLight: '#DDEEFE', brandLight: '#DDEEFE',
brandCyan: '#00E5FF', brandCyan: '#00E5FF',
brandGold: '#FFD42C', brandGold: '#FFD42C',
brandSlate: '#1E293B', brandSlate: '#1E293B'
wacklerBlue: '#004A99'
}, },
fontFamily: { fontFamily: {
'head': ['Space Grotesk', 'sans-serif'], 'head': ['Space Grotesk', 'sans-serif'],
@@ -36,15 +35,15 @@
color: #DDEEFE; color: #DDEEFE;
font-family: 'Inter', sans-serif; font-family: 'Inter', sans-serif;
overflow-x: hidden; overflow-x: hidden;
line-height: 1.5; line-height: 1.6;
} }
h1, h2, h3, h4 { font-family: 'Space Grotesk', sans-serif; } h1, h2, h3, h4 { font-family: 'Space Grotesk', sans-serif; font-weight: 700; }
.glass-card { .glass-card {
background: rgba(221, 238, 254, 0.02); background: rgba(221, 238, 254, 0.02);
backdrop-filter: blur(20px); backdrop-filter: blur(25px);
border: 1px solid rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 32px; border-radius: 28px;
} }
.section-screen { .section-screen {
@@ -54,18 +53,18 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
position: relative; position: relative;
padding: 6rem 2rem; padding: 4rem 2rem;
} }
/* Toby Animation */ /* Toby Animation */
.toby-float { animation: float 8s ease-in-out infinite; } .toby-float { animation: float 6s ease-in-out infinite; }
@keyframes float { 0% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(-15px) rotate(1deg); } 100% { transform: translateY(0px) rotate(0deg); } } @keyframes float { 0% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(-15px) rotate(1deg); } 100% { transform: translateY(0px) rotate(0deg); } }
#toby-fixed { #toby-fixed {
position: fixed; position: fixed;
bottom: 40px; bottom: 40px;
right: 40px; right: 40px;
width: 150px; width: 160px;
z-index: 100; z-index: 100;
pointer-events: none; pointer-events: none;
opacity: 0; opacity: 0;
@@ -77,15 +76,15 @@
#toby-bubble { #toby-bubble {
background: #FFF; background: #FFF;
color: #081734; color: #081734;
padding: 1rem 1.25rem; padding: 0.85rem 1.25rem;
border-radius: 16px; border-radius: 14px;
font-size: 0.85rem; font-size: 0.8rem;
font-weight: 600; font-weight: 600;
margin-bottom: 12px; margin-bottom: 12px;
position: relative; position: relative;
text-align: center; text-align: center;
box-shadow: 0 10px 40px rgba(0,0,0,0.3); box-shadow: 0 10px 40px rgba(0,0,0,0.4);
max-width: 220px; max-width: 200px;
} }
#toby-bubble::after { #toby-bubble::after {
content: ''; content: '';
@@ -115,28 +114,21 @@
} }
.text-gradient { .text-gradient {
background: linear-gradient(135deg, #FFF 30%, #00E5FF 100%); background: linear-gradient(135deg, #FFF 20%, #00E5FF 100%);
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
} }
.stat-large { font-size: 5rem; font-weight: 700; line-height: 1; letter-spacing: -0.02em; } .stat-value { font-size: 4.5rem; font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
/* White Space Helpers */ .content-width { max-width: 1100px; width: 100%; }
.content-width { max-width: 1000px; width: 100%; } .reveal { opacity: 0; transform: translateY(25px); }
/* Reveal Animations */
.reveal { opacity: 0; transform: translateY(20px); }
.quote-mark { /* Dashboard Elements Mocks */
font-family: 'Space Grotesk', sans-serif; .mock-kpi {
font-size: 8rem; border-left: 4px solid #00E5FF;
line-height: 1; padding: 1.5rem;
position: absolute; background: rgba(255,255,255,0.02);
top: -2rem;
left: -1rem;
opacity: 0.05;
color: #00E5FF;
} }
</style> </style>
</head> </head>
@@ -146,136 +138,153 @@
<!-- Toby Fixed --> <!-- Toby Fixed -->
<div id="toby-fixed" class="toby-float"> <div id="toby-fixed" class="toby-float">
<div id="toby-bubble">Tag 120: Das Fundament steht.</div> <div id="toby-bubble">Präzision statt Vermutung.</div>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAB9AAAAc2CAYAAABaJTzmAAAACXBIWXMAABsRAAAbEQEEnGAvAAAEvmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSfvu78nIGlkPSdXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQnPz4KPHg6eG1wbWV0YSB4bWxuczp4PSdhZG9iZTpuczptZXRhLyc+CjxyZGY6UkRGIHhtbG5zOnJkZj0naHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyc+CgogPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9JycKICB4bWxuczpBdHRyaWI9J2h0dHA6Ly9ucy5hdHRyaWJ1dGlvbi5jb20vYWRzLzEuMC8nPgogIDxBdHRyaWI6QWRzPgogICA8cmRmOlNlcT4KICAgIDxyZGY6bGkgcmRmOnBhcnNlVHlwZT0nUmVzb3VyY2UnPgogICAgIDxBdHRyaWI6Q3JlYXRlZD4yMDI2LTAxLTEzPC9BdHRyaWI6Q3JlYXRlZD4KICAgICA8QXR0cmliOkV4dExtZD4zZjE1OTM5Ny04MWM3LTQyM2ItOWViMy02ODYyYzAxZjM4NGI8L0F0dHJpYjpFeHRJZD4KICAgICA8QXR0cmliOkZiSWQ+NTI1MjY1OTE0MTc5NTgwPC9BdHRyaWI6RmJJZD4KICAgICA8QXR0cmliOlRvdWNoVHlwZT4yPC9BdHRyaWI6VG91Y2hUeXBlPgogICAgPC9yZGY6bGk+CiAgIDwvJmRmOlNlcT4KICB8L0F0dHJpYjpBZHM+CiA8L3JkZjpEZXNjcmlwdGlvbj4KCiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0nJwogIHhtbG5zOmRjPSdodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyc+CiAgPGRjOnRpdGxlPgogICA8cmRmOkFsdD4KICAgIDxyZGY6bGkgeG1sOmxhbmc9J3gtZGVmYXVsdCc+Um9ib1BsYW5ldF9BdmF0YXJfaGVsbGJsYXUuYWkgLSAxPC9yZGY6bGk+CiAgIDwvcmRmOkFsdD4KICA8L2RjOnRpdGxlPgogPC9yZGY6RGVzY3JpcHRpb24+CgogPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9JycKICB4bWxuczpwZGY9J2h0dHA6Ly9ucy5hZG9iZS5jb20vcGRmLzEuMy8nPgogIDxwZGY6QXV0aG9yPldhY2tsZXJHcm91cDwvcGRmOkF1dGhvcm4+CiA8L3JkZjpEZXNjcmlwdGlvbj4KCiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0nJwogIHhtbG5zOnhtcD0naHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyc+CiAgPHhtcDpDcmVhdG9yVG9vbD5DYW52YSBkb2M9REFHLVN1Y0tTeXMgdXNlcj1VQUVUOG1KY3lhSSBicmFuZD1CQUVUOGd0OERsTSB0ZW1wbGF0ZT08L3htcDpDcmVhdG9yVG9vbD4KIDwvcmRmOkRlc2NyaXB0aW9uPgo8L3JkZjpSREY+CjwveDp4bXBtZXRhPgo8P3hwYWNrZXQgZW5kPSdyJz8+qsA63gAACAASURBVHic7N15uG5z/fj/zx+/6/urvqU5aVCSSFGhyJjMZAghY6aMoQxJEioaKBkjkTEJERWJFAopY6nOWvc+xzmpnNa695n4616v73qvc/o0knOcc9733vvxvK7HtU/lCnvf+17v4V7v9T//I0mSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmS... [truncated]" alt="Toby" class="w-full opacity-80"> <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAB9AAAAc2CAYAAABaJTzmAAAACXBIWXMAABsRAAAbEQEEnGAvAAAEvmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSfvu78nIGlkPSdXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQnPz4KPHg6eG1wbWV0YSB4bWxuczp4PSdhZG9iZTpuczptZXRhLyc+CjxyZGY6UkRGIHhtbG5zOnJkZj0naHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyc+CgogPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9JycKICB4bWxuczpBdHRyaWI9J2h0dHA6Ly9ucy5hdHRyaWJ1dGlvbi5jb20vYWRzLzEuMC8nPgogIDxBdHRyaWI6QWRzPgogICA8cmRmOlNlcT4KICAgIDxyZGY6bGkgcmRmOnBhcnNlVHlwZT0nUmVzb3VyY2UnPgogICAgIDxBdHRyaWI6Q3JlYXRlZD4yMDI2LTAxLTEzPC9BdHRyaWI6Q3JlYXRlZD4KICAgICA8QXR0cmliOkV4dExtZD4zZjE1OTM5Ny04MWM3LTQyM2ItOWViMy02ODYyYzAxZjM4NGI8L0F0dHJpYjpFeHRJZD4KICAgICA8QXR0cmliOkZiSWQ+NTI1MjY1OTE0MTc5NTgwPC9BdHRyaWI6RmJJZD4KICAgICA8QXR0cmliOlRvdWNoVHlwZT4yPC9BdHRyaWI6VG91Y2hUeXBlPgogICAgPC9yZGY6bGk+CiAgIDwvJmRmOlNlcT4KICB8L0F0dHJpYjpBZHM+CiA8L3JkZjpEZXNjcmlwdGlvbj4KCiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0nJwogIHhtbG5zOmRjPSdodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyc+CiAgPGRjOnRpdGxlPgogICA8cmRmOkFsdD4KICAgIDxyZGY6bGkgeG1sOmxhbmc9J3gtZGVmYXVsdCc+Um9ib1BsYW5ldF9BdmF0YXJfaGVsbGJsYXUuYWkgLSAxPC9yZGY6bGk+CiAgIDwvcmRmOkFsdD4KICA8L2RjOnRpdGxlPgogPC9yZGY6RGVzY3JpcHRpb24+CgogPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9JycKICB4bWxuczpwZGY9J2h0dHA6Ly9ucy5hZG9iZS5jb20vcGRmLzEuMy8nPgogIDxwZGY6QXV0aG9yPldhY2tsZXJHcm91cDwvcGRmOkF1dGhvcm4+CiA8L3JkZjpEZXNjcmlwdGlvbj4KCiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0nJwogIHhtbG5zOnhtcD0naHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyc+CiAgPHhtcDpDcmVhdG9yVG9vbD5DYW52YSBkb2M9REFHLVN1Y0tTeXMgdXNlcj1VQUVUOG1KY3lhSSBicmFuZD1CQUVUOGd0OERsTSB0ZW1wbGF0ZT08L3htcDpDcmVhdG9yVG9vbD4KIDwvcmRmOkRlc2NyaXB0aW9uPgo8L3JkZjpSREY+CjwveDp4bXBtZXRhPgo8P3hwYWNrZXQgZW5kPSdyJz8+qsA63gAACAASURBVHic7N15uG5z/fj/zx+/6/urvqU5aVCSSFGhyJjMZAghY6aMoQxJEioaKBkjkTEJERWJFAopY6nOWvc+xzmpnNa695n4616v73qvc/o0knOcc9733vvxvK7HtU/lCnvf+17v4V7v9T//I0mSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmS... [truncated]" alt="Toby" class="w-full opacity-80">
</div> </div>
<!-- 1. Intro Screen --> <!-- 1. Intro: The Intelligence Cockpit -->
<section class="section-screen">
<div class="content-width">
<h4 class="text-brandCyan uppercase tracking-[0.4em] mb-8 reveal font-head text-sm">RoboPlanet Infrastructure Briefing</h4>
<h1 class="text-6xl md:text-8xl font-bold mb-10 reveal leading-[1.1] tracking-tight">The Agentic <br> <span class="text-gradient">Sales Engine</span></h1>
<p class="text-xl md:text-2xl text-brandLight/40 max-w-2xl mb-12 reveal font-body font-light">
Infrastruktur für skalierbares Wachstum. <br>
Statusbericht: Tag 120.
</p>
<div class="flex gap-4 reveal">
<div class="h-[1px] w-16 bg-brandCyan/40 self-center"></div>
<span class="text-brandCyan font-mono uppercase text-xs tracking-widest">Board Presentation June 2026</span>
</div>
</div>
</section>
<!-- 2. The Foundation -->
<section class="section-screen bg-brandSlate/10">
<div class="content-width">
<h2 class="text-4xl md:text-5xl mb-16 reveal max-w-2xl leading-tight">Das digitale Rückgrat der ersten 120 Tage.</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-start">
<div class="reveal">
<p class="text-xl text-brandLight/60 mb-10 font-light">
Wir haben die Silos aufgebrochen. Innerhalb von 4 Monaten wurde ein vollständiges digitales Ökosystem geschaffen:
</p>
<ul class="space-y-6">
<li class="flex items-start gap-4">
<span class="text-brandCyan text-xl">⚡</span>
<div>
<h4 class="font-bold text-white uppercase text-xs tracking-widest mb-1">SuperOffice Connector</h4>
<p class="text-brandLight/50 text-sm font-light">Bidirektionale API-Schnittstelle für Live-Datenaustausch.</p>
</div>
</li>
<li class="flex items-start gap-4">
<span class="text-brandCyan text-xl">🤖</span>
<div>
<h4 class="font-bold text-white uppercase text-xs tracking-widest mb-1">Lead Engine (Live)</h4>
<p class="text-brandLight/50 text-sm font-light">Autonome Beantwortung & Qualifizierung eingehender Anfragen.</p>
</div>
</li>
</ul>
</div>
<div class="glass-card p-10 reveal border-brandCyan/10">
<p class="text-brandCyan font-mono text-xs uppercase tracking-widest mb-6">Status Quo</p>
<h3 class="text-2xl mb-6">Infrastruktur > Intuition</h3>
<p class="text-brandLight/60 text-sm font-light leading-relaxed">
Anstatt passiv zu verwalten, haben wir eine aktive Maschine gebaut. Das Dashboard ist das sichtbare Cockpit dieser neuen Realität.
</p>
</div>
</div>
</div>
</section>
<!-- 3. The Reality Check (68%) -->
<section class="section-screen"> <section class="section-screen">
<div class="content-width text-center"> <div class="content-width text-center">
<h2 class="text-4xl md:text-5xl mb-20 reveal">Datentransparenz tut weh.</h2> <h4 class="text-brandCyan uppercase tracking-[0.5em] mb-8 reveal font-head text-xs">Executive Summary</h4>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-center"> <h1 class="text-7xl md:text-8xl font-bold mb-10 reveal leading-[1.1] tracking-tight">Sales Intelligence <br> <span class="text-gradient">Cockpit</span></h1>
<div class="glass-card p-16 reveal border-red-500/10"> <p class="text-xl md:text-2xl text-brandLight/40 max-w-2xl mx-auto mb-16 reveal font-body font-light">
<div class="stat-large text-red-500 mb-2">68%</div> Transparenz auf Knopfdruck. <br>
<p class="text-xs uppercase tracking-widest font-bold text-brandLight/40 mb-6">CRM White Space</p> Vom statischen Archiv zum aktiven Steuerungs-Hub.
<p class="text-brandLight/60 text-sm font-light">10.000+ Accounts ohne Ansprechpartner. <br> Ein automatisiertes "Datengrab" aus Leadinfo-Besuchen.</p> </p>
</div> <div class="flex justify-center gap-6 reveal">
<div class="text-left md:pl-12 reveal"> <div class="h-[1px] w-12 bg-brandCyan/40 self-center"></div>
<h3 class="text-2xl mb-6">Vom Blindflug zur Strategie.</h3> <span class="text-brandCyan font-mono uppercase text-xs tracking-widest">30 Tage Live-Betrieb</span>
<p class="text-lg text-brandLight/70 mb-8 font-light"> <div class="h-[1px] w-12 bg-brandCyan/40 self-center"></div>
Die Transparenz zeigt uns die Lücken. Wir wissen jetzt exakt, wo wir investieren müssen, um brachliegendes Potenzial in echte Sales zu verwandeln. </div>
</div>
</section>
<!-- 2. The Efficiency: Adieu Excel -->
<section class="section-screen bg-brandSlate/10">
<div class="content-width">
<div class="grid grid-cols-1 md:grid-cols-2 gap-20 items-center">
<div class="reveal">
<h2 class="text-5xl mb-8">Echte Daten statt manueller Berichte.</h2>
<p class="text-lg text-brandLight/60 mb-10 font-light leading-relaxed">
Bisher kostete die Aufbereitung der Pipeline eine Stunde pro Woche. Das Dashboard liefert diese Erkenntnisse in <strong>Echtzeit</strong> – fehlerfrei und interaktiv.
</p> </p>
<div class="p-6 bg-brandCyan/5 rounded-2xl border border-brandCyan/20"> <div class="grid grid-cols-2 gap-4">
<p class="text-xs uppercase tracking-widest text-brandCyan font-bold mb-2">Next Step</p> <div class="mock-kpi">
<p class="text-sm">Automatisierte Kontaktrecherche zur Aktivierung des Bestands.</p> <p class="text-3xl font-bold text-white">-1h</p>
<p class="text-[10px] uppercase tracking-widest text-brandLight/50 mt-1">Manueller Aufwand / Woche</p>
</div>
<div class="mock-kpi">
<p class="text-3xl font-bold text-brandCyan">Live</p>
<p class="text-[10px] uppercase tracking-widest text-brandLight/50 mt-1">Pipeline-Truth 24/7</p>
</div>
</div>
</div>
<div class="glass-card p-12 reveal">
<h4 class="text-brandCyan uppercase text-[10px] tracking-widest font-bold mb-6 border-b border-white/5 pb-4">Vorteil: Daten-Integrität</h4>
<p class="text-xl text-white font-light leading-relaxed mb-6">
"Automatisierte Erkennung von Dubletten und Varianten – eine Transparenz, die SuperOffice in dieser Form nicht bietet."
</p>
<div class="w-16 h-1 bg-brandCyan"></div>
</div>
</div>
</div>
</section>
<!-- 3. Transparency: The Winning DNA -->
<section class="section-screen">
<div class="content-width">
<div class="text-center mb-20 reveal">
<h2 class="text-5xl mb-6">Die Winning DNA</h2>
<p class="text-xl text-brandLight/40 font-light">Tiefe Einblicke in die Mechanik unseres Erfolgs.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 reveal">
<div class="glass-card p-10 hover:bg-brandCyan/[0.03] transition-all">
<p class="text-brandCyan font-mono text-[10px] uppercase mb-4">Kanäle</p>
<h4 class="text-lg mb-4">Winning Channels</h4>
<p class="text-sm text-brandLight/50 font-light leading-relaxed">Präzise Auswertung: Welche Lead-Quelle konvertiert wirklich?</p>
</div>
<div class="glass-card p-10 hover:bg-brandCyan/[0.03] transition-all">
<p class="text-brandCyan font-mono text-[10px] uppercase mb-4">Analyse</p>
<h4 class="text-lg mb-4">Absage-Gründe</h4>
<p class="text-sm text-brandLight/50 font-light leading-relaxed">Warum verlieren wir Deals? Daten statt Vermutungen.</p>
</div>
<div class="glass-card p-10 hover:bg-brandCyan/[0.03] transition-all">
<p class="text-brandCyan font-mono text-[10px] uppercase mb-4">Performance</p>
<h4 class="text-lg mb-4">Time to Sale</h4>
<p class="text-sm text-brandLight/50 font-light leading-relaxed">Abschlussquoten & Kontakthäufigkeit pro Sales Manager.</p>
</div>
</div>
</div>
</section>
<!-- 4. Proactivity: The Red List -->
<section class="section-screen bg-white/[0.01]">
<div class="content-width">
<div class="grid grid-cols-1 md:grid-cols-2 gap-20 items-center">
<div class="reveal relative order-2 md:order-1">
<div class="glass-card p-1 relative overflow-hidden border-red-500/20">
<div class="bg-red-500/10 p-10">
<div class="flex justify-between items-center mb-8">
<h4 class="text-red-500 font-bold uppercase text-xs tracking-widest">Rote Liste: Deals in Gefahr</h4>
<span class="bg-red-500 text-white text-[10px] px-2 py-1 rounded">Aktion Erforderlich</span>
</div>
<div class="space-y-4">
<div class="h-12 bg-white/5 rounded border border-white/5 flex items-center px-4 justify-between">
<div class="w-1/2 h-2 bg-white/20 rounded"></div>
<div class="w-12 h-2 bg-red-500/40 rounded"></div>
</div>
<div class="h-12 bg-white/5 rounded border border-white/5 flex items-center px-4 justify-between">
<div class="w-1/2 h-2 bg-white/20 rounded"></div>
<div class="w-12 h-2 bg-red-500/40 rounded"></div>
</div>
<div class="h-12 bg-white/5 rounded border border-white/5 flex items-center px-4 justify-between">
<div class="w-1/2 h-2 bg-white/20 rounded"></div>
<div class="w-12 h-2 bg-red-500/40 rounded"></div>
</div>
</div>
</div>
</div>
</div>
<div class="reveal order-1 md:order-2">
<h2 class="text-5xl mb-8 leading-tight">Wissen, wo <br> <span class="text-red-500">es brennt.</span></h2>
<p class="text-lg text-brandLight/60 font-light leading-relaxed mb-8">
Überschrittene Verkaufsdaten oder Stagnation > 14 Tage werden sofort markiert. Das Dashboard fungiert als <strong>Frühwarnsystem</strong> für die Pipeline.
</p>
<div class="flex items-center gap-4 text-brandCyan">
<span class="text-xl">➔</span>
<p class="text-sm uppercase tracking-widest font-bold">Prävention von Deal-Verlusten</p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<!-- 4. From Reporting to Hub --> <!-- 5. Action Hub: From Insight to Interaction -->
<section class="section-screen bg-white/[0.02]">
<div class="content-width">
<div class="text-center mb-20 reveal">
<h2 class="text-5xl mb-6 leading-tight">Vom Reporting zum <span class="text-gradient">Activity Hub.</span></h2>
<p class="text-brandLight/40 font-light italic">"SuperOffice ist das Archiv – Das Dashboard ist das Gaspedal."</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 reveal">
<div class="p-8 border-l border-white/5">
<h4 class="text-brandCyan font-bold text-xs uppercase tracking-widest mb-4">Live Insights</h4>
<p class="text-sm text-brandLight/70 font-light leading-relaxed">Letzte Mail, Call, Termin & Pipeline-Bloat. Alles auf einer Ebene – ohne 1.000 Klicks in Untermenüs.</p>
</div>
<div class="p-8 border-l border-white/5">
<h4 class="text-brandCyan font-bold text-xs uppercase tracking-widest mb-4">Interaktive Navigation</h4>
<p class="text-sm text-brandLight/70 font-light leading-relaxed">Deep-Links führen direkt zum Sale. Der Innendienst arbeitet bevorzugt im Dashboard: Schnellerer Zugriff, bessere Übersicht.</p>
</div>
<div class="p-8 border-l border-white/5">
<h4 class="text-brandCyan font-bold text-xs uppercase tracking-widest mb-4">Yield Fokus</h4>
<p class="text-sm text-brandLight/70 font-light leading-relaxed">Faktenbasierte Priorisierung von Großkunden statt opportunistischem Tagesgeschäft.</p>
</div>
</div>
</div>
</section>
<!-- 5. Traction & Elly -->
<section class="section-screen"> <section class="section-screen">
<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">
<h4 class="text-brandGold uppercase tracking-widest text-xs font-bold mb-6">Ergebnisse: Erste 30 Tage Dashboard</h4> <h4 class="text-brandCyan font-mono uppercase tracking-widest text-xs mb-6 font-bold">The Action Hub</h4>
<div class="stat-large text-white mb-6">20% <span class="text-2xl text-brandLight/40 tracking-normal font-normal">Response-Rate</span></div> <h2 class="text-6xl mb-8 leading-tight">Vom Insight <br> zur <span class="text-gradient">Tat.</span></h2>
<p class="text-xl text-brandLight/60 font-light mb-8 leading-relaxed"> <p class="text-xl text-brandLight/70 font-light mb-10 leading-relaxed">
Über 70 platzierte Rückrufbitten. <br> Das Dashboard ist kein Rückspiegel. Mit einem Klick zum Account, zum Sale oder zur automatisierten <strong>Rückrufbitte</strong>.
Jede 5. Mail führte zu einem direkten Austausch innerhalb von 10 Tagen.
</p> </p>
<div class="glass-card p-10 bg-brandCyan/5 border-brandCyan/20">
<div class="stat-value text-white mb-2">>20%</div>
<p class="text-xs uppercase tracking-widest font-bold text-brandCyan">Response-Rate</p>
<p class="text-sm text-brandLight/60 mt-4">Belegter Erfolg: Jede 5. Nachricht führt zu einer direkten Reaktion.</p>
</div>
</div> </div>
<div class="reveal relative"> <div class="reveal">
<span class="quote-mark">“</span> <div class="glass-card p-12 border-brandCyan/30">
<div class="glass-card p-12 border-brandCyan/20"> <h4 class="text-xs uppercase tracking-widest font-bold mb-6 border-b border-white/5 pb-4">Einfachheit gewinnt</h4>
<p class="text-xl text-white font-light italic leading-relaxed mb-8 relative z-10"> <p class="text-lg text-brandLight/80 font-light leading-relaxed mb-8">
"Ich danke dir für dein unermüdliches Engagement. Du katapultierst uns damit definitiv in eine modernere Zukunft." "Was in SuperOffice 5-10 Klicks braucht, liegt hier auf der Oberfläche. Das Team arbeitet lieber im Dashboard, weil es Zeit spart und Übersicht schafft."
</p> </p>
<div class="flex items-center gap-4"> <div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-full bg-brandCyan/20 flex items-center justify-center font-bold text-brandCyan">E</div> <div class="w-8 h-8 rounded-full bg-brandCyan/20"></div>
<div> <p class="text-xs text-brandLight/40 uppercase tracking-widest">Feedback aus dem Innendienst</p>
<p class="text-sm font-bold">Elizabeta Melcer</p>
<p class="text-[10px] text-brandLight/40 uppercase tracking-widest">Inside Sales | RoboPlanet</p>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -283,36 +292,22 @@
</div> </div>
</section> </section>
<!-- 6. Vision: Agentic Engineering --> <!-- 6. Infrastructure: Scalable Asset -->
<section class="section-screen bg-brandCyan/5"> <section class="section-screen bg-brandCyan/5">
<div class="content-width text-center"> <div class="content-width text-center">
<h2 class="text-6xl md:text-7xl mb-12 reveal font-head tracking-tighter uppercase">Agentic <br> Engineering</h2> <h2 class="text-5xl md:text-7xl mb-12 reveal font-head tracking-tighter uppercase">Scalable <br> Asset</h2>
<p class="text-xl md:text-2xl text-brandLight/70 max-w-3xl mx-auto mb-16 reveal font-light leading-relaxed"> <p class="text-xl md:text-2xl text-brandLight/70 max-w-3xl mx-auto mb-16 reveal font-light leading-relaxed">
Dieses Projekt ist der <strong>Proof of Concept</strong> für die gesamte Wackler-Gruppe. <br> Dieses Dashboard ist kein isoliertes Tool. Es fußt auf einem robusten <strong>API-Connector</strong>, der die Grundlage für alle zukünftigen Sales-Automatisierungen bildet.
Wie wir mit KI-gestützter Entwicklung in Lichtgeschwindigkeit Werkzeuge bauen, die den Vertrieb nicht nur unterstützen, sondern skalieren.
</p> </p>
<div class="h-[1px] w-24 bg-brandCyan mx-auto opacity-30 reveal"></div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 reveal max-w-3xl mx-auto">
<div class="p-8 glass-card border-brandCyan/20 text-left">
<p class="text-brandCyan font-bold uppercase text-[10px] tracking-widest mb-2">Technologie</p>
<p class="text-sm">Bau einer Sales-Engine, die Leads automatisiert recherchiert & aktiviert.</p>
</div>
<div class="p-8 glass-card border-brandCyan/20 text-left">
<p class="text-brandCyan font-bold uppercase text-[10px] tracking-widest mb-2">Impact</p>
<p class="text-sm">Transformation von Roboplanet zur Speerspitze der Automatisierung.</p>
</div>
</div>
</div> </div>
</section> </section>
<!-- 7. Final --> <!-- 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-5xl md:text-7xl mb-12 reveal font-head">Bereit für den <br> <span class="text-gradient">nächsten Meilenstein.</span></h2> <h2 class="text-6xl mb-12 reveal font-head">Bereit für die <br> <span class="text-gradient">nächste Stufe.</span></h2>
<div class="max-w-xl mx-auto space-y-12 reveal"> <p class="text-brandLight/40 uppercase tracking-[0.3em] text-xs reveal">Vielen Dank für Ihre Aufmerksamkeit.</p>
<div class="h-px w-24 bg-brandCyan mx-auto opacity-30"></div>
<p class="text-brandLight/40 uppercase tracking-[0.3em] text-xs">Vielen Dank für Ihre Zeit.</p>
</div>
</div> </div>
</section> </section>
@@ -327,13 +322,13 @@
const progressBar = document.getElementById('progress-bar'); const progressBar = document.getElementById('progress-bar');
const tobyMessages = [ const tobyMessages = [
"Tag 120 Briefing.", "Willkommen im Cockpit.",
"Wir haben das Fundament gebaut.", "Live-Daten schlagen Excel.",
"68% White Space – Wir sehen jetzt alles.", "Die Erfolgs-DNA im Blick.",
"Weg von Excel, hin zum Cockpit.", "Frühwarnsystem aktiviert.",
"Das Team liebt es. Die Zahlen beweisen es.", "Action: Jede 5. Mail ein Treffer.",
"Wir bauen die Zukunft, nicht nur Berichte.", "Bereit zum Skalieren.",
"Bereit für Monat 2?" "Das ist erst der Anfang."
]; ];
function updateToby(index) { function updateToby(index) {
@@ -348,7 +343,7 @@
gsap.to(el, { gsap.to(el, {
scrollTrigger: { scrollTrigger: {
trigger: el, trigger: el,
start: "top 90%", start: "top 88%",
toggleActions: "play none none reverse" toggleActions: "play none none reverse"
}, },
opacity: 1, opacity: 1,