feat: Final C-Level Story 'The Agentic Sales Engine' [37288f42]
This commit is contained in:
@@ -3,11 +3,11 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Executive Briefing: Sales Intelligence & Yield</title>
|
||||
<title>Executive Briefing: The Agentic Sales Engine</title>
|
||||
<!-- Fonts -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Space+Grotesk:wght@300;500;700&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Space+Grotesk:wght@300;500;700&display=swap" rel="stylesheet">
|
||||
<!-- Tailwind CSS -->
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script>
|
||||
@@ -19,7 +19,8 @@
|
||||
brandLight: '#DDEEFE',
|
||||
brandCyan: '#00E5FF',
|
||||
brandGold: '#FFD42C',
|
||||
brandSlate: '#1E293B'
|
||||
brandSlate: '#1E293B',
|
||||
wacklerBlue: '#004A99'
|
||||
},
|
||||
fontFamily: {
|
||||
'head': ['Space Grotesk', 'sans-serif'],
|
||||
@@ -35,15 +36,15 @@
|
||||
color: #DDEEFE;
|
||||
font-family: 'Inter', sans-serif;
|
||||
overflow-x: hidden;
|
||||
line-height: 1.6;
|
||||
line-height: 1.5;
|
||||
}
|
||||
h1, h2, h3, h4 { font-family: 'Space Grotesk', sans-serif; font-weight: 700; }
|
||||
h1, h2, h3, h4 { font-family: 'Space Grotesk', sans-serif; }
|
||||
|
||||
.glass-card {
|
||||
background: rgba(221, 238, 254, 0.03);
|
||||
backdrop-filter: blur(12px);
|
||||
border: 1px solid rgba(0, 229, 255, 0.1);
|
||||
border-radius: 24px;
|
||||
background: rgba(221, 238, 254, 0.02);
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
border-radius: 32px;
|
||||
}
|
||||
|
||||
.section-screen {
|
||||
@@ -53,18 +54,18 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
padding: 4rem 2rem;
|
||||
padding: 6rem 2rem;
|
||||
}
|
||||
|
||||
/* Toby Animation */
|
||||
.toby-float { animation: float 6s ease-in-out infinite; }
|
||||
@keyframes float { 0% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(-20px) rotate(2deg); } 100% { transform: translateY(0px) rotate(0deg); } }
|
||||
.toby-float { animation: float 8s ease-in-out infinite; }
|
||||
@keyframes float { 0% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(-15px) rotate(1deg); } 100% { transform: translateY(0px) rotate(0deg); } }
|
||||
|
||||
#toby-fixed {
|
||||
position: fixed;
|
||||
bottom: 40px;
|
||||
right: 40px;
|
||||
width: 180px;
|
||||
width: 150px;
|
||||
z-index: 100;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
@@ -74,27 +75,27 @@
|
||||
}
|
||||
|
||||
#toby-bubble {
|
||||
background: #DDEEFE;
|
||||
background: #FFF;
|
||||
color: #081734;
|
||||
padding: 1rem 1.5rem;
|
||||
border-radius: 18px;
|
||||
font-size: 0.95rem;
|
||||
padding: 1rem 1.25rem;
|
||||
border-radius: 16px;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 15px;
|
||||
margin-bottom: 12px;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
box-shadow: 0 10px 30px rgba(0,229,255,0.2);
|
||||
max-width: 250px;
|
||||
box-shadow: 0 10px 40px rgba(0,0,0,0.3);
|
||||
max-width: 220px;
|
||||
}
|
||||
#toby-bubble::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -10px;
|
||||
bottom: -8px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
border-width: 10px 10px 0;
|
||||
border-width: 8px 8px 0;
|
||||
border-style: solid;
|
||||
border-color: #DDEEFE transparent transparent transparent;
|
||||
border-color: #FFF transparent transparent transparent;
|
||||
}
|
||||
|
||||
/* Custom Progress Bar */
|
||||
@@ -103,30 +104,40 @@
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background: rgba(255,255,255,0.05);
|
||||
height: 3px;
|
||||
background: rgba(255,255,255,0.03);
|
||||
z-index: 1000;
|
||||
}
|
||||
#progress-bar {
|
||||
height: 100%;
|
||||
width: 0%;
|
||||
background: linear-gradient(90deg, #00E5FF, #30BDEA);
|
||||
box-shadow: 0 0 10px rgba(0,229,255,0.5);
|
||||
background: #00E5FF;
|
||||
}
|
||||
|
||||
.text-gradient {
|
||||
background: linear-gradient(135deg, #FFF 0%, #00E5FF 100%);
|
||||
background: linear-gradient(135deg, #FFF 30%, #00E5FF 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.stat-value { font-size: 4rem; font-weight: 700; line-height: 1; }
|
||||
.stat-large { font-size: 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 Animations */
|
||||
.reveal { opacity: 0; transform: translateY(30px); }
|
||||
.reveal { opacity: 0; transform: translateY(20px); }
|
||||
|
||||
.quote-mark {
|
||||
font-family: 'Space Grotesk', sans-serif;
|
||||
font-size: 8rem;
|
||||
line-height: 1;
|
||||
position: absolute;
|
||||
top: -2rem;
|
||||
left: -1rem;
|
||||
opacity: 0.05;
|
||||
color: #00E5FF;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="antialiased">
|
||||
@@ -135,229 +146,172 @@
|
||||
|
||||
<!-- Toby Fixed -->
|
||||
<div id="toby-fixed" class="toby-float">
|
||||
<div id="toby-bubble">Bereit für den Yield-Check?</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">
|
||||
<div id="toby-bubble">Tag 120: Das Fundament steht.</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">
|
||||
</div>
|
||||
|
||||
<!-- 1. Intro Screen -->
|
||||
<section class="section-screen">
|
||||
<div class="content-width text-center">
|
||||
<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">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">
|
||||
Vom manuellen Reporting zum Live-Cockpit. <br>
|
||||
Ergebnisse der ersten 4 Monate & 30 Tage Dashboard.
|
||||
<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 justify-center gap-4 reveal">
|
||||
<div class="h-[1px] w-24 bg-brandCyan/30 self-center"></div>
|
||||
<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="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 Shift / Efficiency -->
|
||||
<section class="section-screen bg-brandSlate/20">
|
||||
<!-- 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">
|
||||
<div class="content-width text-center">
|
||||
<h2 class="text-4xl md:text-5xl mb-20 reveal">Datentransparenz tut weh.</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
|
||||
<div class="glass-card p-16 reveal border-red-500/10">
|
||||
<div class="stat-large text-red-500 mb-2">68%</div>
|
||||
<p class="text-xs uppercase tracking-widest font-bold text-brandLight/40 mb-6">CRM White Space</p>
|
||||
<p class="text-brandLight/60 text-sm font-light">10.000+ Accounts ohne Ansprechpartner. <br> Ein automatisiertes "Datengrab" aus Leadinfo-Besuchen.</p>
|
||||
</div>
|
||||
<div class="text-left md:pl-12 reveal">
|
||||
<h3 class="text-2xl mb-6">Vom Blindflug zur Strategie.</h3>
|
||||
<p class="text-lg text-brandLight/70 mb-8 font-light">
|
||||
Die Transparenz zeigt uns die Lücken. Wir wissen jetzt exakt, wo wir investieren müssen, um brachliegendes Potenzial in echte Sales zu verwandeln.
|
||||
</p>
|
||||
<div class="p-6 bg-brandCyan/5 rounded-2xl border border-brandCyan/20">
|
||||
<p class="text-xs uppercase tracking-widest text-brandCyan font-bold mb-2">Next Step</p>
|
||||
<p class="text-sm">Automatisierte Kontaktrecherche zur Aktivierung des Bestands.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 4. From Reporting to Hub -->
|
||||
<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">
|
||||
<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">Schluss mit dem Excel-Silo.</h2>
|
||||
<p class="text-lg text-brandLight/70 mb-8">
|
||||
Bisher kostete die manuelle Aufbereitung der Pipeline eine Stunde pro Woche. Heute haben wir <strong>Live-Daten auf Knopfdruck</strong>.
|
||||
<h4 class="text-brandGold uppercase tracking-widest text-xs font-bold mb-6">Ergebnisse: Erste 30 Tage Dashboard</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>
|
||||
<p class="text-xl text-brandLight/60 font-light mb-8 leading-relaxed">
|
||||
Über 70 platzierte Rückrufbitten. <br>
|
||||
Jede 5. Mail führte zu einem direkten Austausch innerhalb von 10 Tagen.
|
||||
</p>
|
||||
<div class="grid grid-cols-2 gap-4 mb-8">
|
||||
<div class="p-6 bg-white/5 rounded-2xl border border-white/10">
|
||||
<p class="text-3xl font-bold text-white">-1h</p>
|
||||
<p class="text-xs uppercase tracking-widest text-brandLight/40">Manueller Aufwand</p>
|
||||
<p class="text-[10px] text-brandLight/50 mt-1">pro Woche eingespart</p>
|
||||
</div>
|
||||
<div class="p-6 bg-brandCyan/10 rounded-2xl border border-brandCyan/20">
|
||||
<p class="text-3xl font-bold text-brandCyan">Echtzeit</p>
|
||||
<p class="text-xs uppercase tracking-widest text-brandCyan/60">Pipeline Truth</p>
|
||||
<p class="text-[10px] text-brandCyan/50 mt-1">Interaktiv & Filterbar</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative reveal">
|
||||
<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="stat-value text-brandCyan mb-2">30</div>
|
||||
<p class="uppercase tracking-widest text-sm font-bold">Tage Live</p>
|
||||
<div class="w-full h-px bg-white/10 my-8"></div>
|
||||
<p class="text-brandLight/50 italic">"Das Dashboard verbindet die Punkte, die in SuperOffice verstreut liegen."</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 3. Transparency / Deep Integration -->
|
||||
<section class="section-screen">
|
||||
<div class="content-width">
|
||||
<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">
|
||||
<!-- Gross -->
|
||||
<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">SuperOffice Sicht</p>
|
||||
<div class="stat-value text-white mb-2">5,2M</div>
|
||||
<p class="text-sm text-brandLight/70">Inklusive Varianten-Bloat</p>
|
||||
</div>
|
||||
<!-- Bloat -->
|
||||
<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">Identifizierte Dubletten</p>
|
||||
<div class="stat-value text-red-500 mb-2">-1,6M</div>
|
||||
<p class="text-sm text-brandLight/70">Variantenschutz-Logik</p>
|
||||
</div>
|
||||
<!-- Netto -->
|
||||
<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">Real-Pipeline</p>
|
||||
<div class="stat-value text-brandCyan mb-2">3,6M</div>
|
||||
<p class="text-sm text-brandLight/70">Operative Handlungsgrundlage</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="mt-12 text-center text-brandLight/40 max-w-2xl mx-auto reveal">
|
||||
Unser Dashboard übertrifft die manuelle Analyse. Es erkennt Varianten automatisch und liefert die 'Clean Pipeline'.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 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.
|
||||
<div class="reveal relative">
|
||||
<span class="quote-mark">“</span>
|
||||
<div class="glass-card p-12 border-brandCyan/20">
|
||||
<p class="text-xl text-white font-light italic leading-relaxed mb-8 relative z-10">
|
||||
"Ich danke dir für dein unermüdliches Engagement. Du katapultierst uns damit definitiv in eine modernere Zukunft."
|
||||
</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 class="flex items-center gap-4">
|
||||
<div class="w-10 h-10 rounded-full bg-brandCyan/20 flex items-center justify-center font-bold text-brandCyan">E</div>
|
||||
<div>
|
||||
<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 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">
|
||||
<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/60">Die Daten-Analyse der Historie zeigt den Weg.</p>
|
||||
</div>
|
||||
<!-- 6. Vision: Agentic Engineering -->
|
||||
<section class="section-screen bg-brandCyan/5">
|
||||
<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>
|
||||
<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>
|
||||
Wie wir mit KI-gestützter Entwicklung in Lichtgeschwindigkeit Werkzeuge bauen, die den Vertrieb nicht nur unterstützen, sondern skalieren.
|
||||
</p>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-12">
|
||||
<div class="glass-card p-12 reveal">
|
||||
<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">Insight</span>
|
||||
Der Vor-Ort-Fokus
|
||||
</h3>
|
||||
<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="absolute bottom-0 w-full bg-brandLight/20 h-[38%] flex items-center justify-center text-xs font-bold">9%</div>
|
||||
</div>
|
||||
<div class="w-full bg-brandCyan/10 h-48 rounded-t-lg relative overflow-hidden">
|
||||
<div class="absolute bottom-0 w-full bg-brandCyan h-[100%] flex items-center justify-center text-brandDark font-bold text-xl">24%</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-3xl font-bold text-brandCyan mb-2">+159% Win-Rate</p>
|
||||
<p class="text-brandLight/60">Die historische Korrelation ist eindeutig: Demos vor Ort verdreifachen die Gewinnchance.</p>
|
||||
<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="glass-card p-12 reveal">
|
||||
<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">Ziel</span>
|
||||
Speed-to-Lead
|
||||
</h3>
|
||||
<div class="flex items-center justify-between gap-8 mb-12">
|
||||
<div class="text-center">
|
||||
<p class="text-4xl font-bold text-white/30 line-through">37</p>
|
||||
<p class="text-xs uppercase tracking-widest text-brandLight/40">Tage (Median)</p>
|
||||
</div>
|
||||
<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>
|
||||
<div class="text-center">
|
||||
<p class="text-6xl font-bold text-brandCyan">10</p>
|
||||
<p class="text-xs uppercase tracking-widest font-bold">Tage (Target)</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xl text-white mb-2">Reaktionszeit als Benchmark.</p>
|
||||
<p class="text-brandLight/60">Das Dashboard macht Stagnation sichtbar, bevor der Lead erkaltet.</p>
|
||||
<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>
|
||||
</section>
|
||||
|
||||
<!-- 7. Conclusion -->
|
||||
<!-- 7. Final -->
|
||||
<section class="section-screen">
|
||||
<div class="content-width text-center">
|
||||
<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">
|
||||
<p class="text-xl text-brandLight/70">
|
||||
Wir haben aufgehört, Berichte zu bauen. Wir haben angefangen, ein Cockpit zu fliegen.
|
||||
</p>
|
||||
<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 für Monat 2.</p>
|
||||
<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>
|
||||
<div class="max-w-xl mx-auto space-y-12 reveal">
|
||||
<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>
|
||||
</section>
|
||||
@@ -373,13 +327,13 @@
|
||||
const progressBar = document.getElementById('progress-bar');
|
||||
|
||||
const tobyMessages = [
|
||||
"Tag 120: Wir sind bereit!",
|
||||
"Adieu Excel! Hallo Freizeit.",
|
||||
"Alles im Blick. Ohne 1000 Klicks.",
|
||||
"Die Pipeline ist jetzt blitzsauber.",
|
||||
"20% Quote? Das ist erst der Anfang!",
|
||||
"Daten lügen nicht: Demos bringen Yield.",
|
||||
"Anschnallen, wir skalieren!"
|
||||
"Tag 120 Briefing.",
|
||||
"Wir haben das Fundament gebaut.",
|
||||
"68% White Space – Wir sehen jetzt alles.",
|
||||
"Weg von Excel, hin zum Cockpit.",
|
||||
"Das Team liebt es. Die Zahlen beweisen es.",
|
||||
"Wir bauen die Zukunft, nicht nur Berichte.",
|
||||
"Bereit für Monat 2?"
|
||||
];
|
||||
|
||||
function updateToby(index) {
|
||||
@@ -394,7 +348,7 @@
|
||||
gsap.to(el, {
|
||||
scrollTrigger: {
|
||||
trigger: el,
|
||||
start: "top 85%",
|
||||
start: "top 90%",
|
||||
toggleActions: "play none none reverse"
|
||||
},
|
||||
opacity: 1,
|
||||
|
||||
Reference in New Issue
Block a user