503 lines
37 KiB
HTML
503 lines
37 KiB
HTML
<!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 (CDN) -->
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<!-- GSAP & ScrollTrigger (CDN) -->
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/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: #1d4ed8;
|
||
--robo-dark-blue: #1e3a8a;
|
||
--bg-light: #ffffff;
|
||
--text-main: #020617;
|
||
--text-muted: #475569;
|
||
}
|
||
|
||
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 Precision Layout - Maximum Whitespace */
|
||
.slide {
|
||
height: 100vh;
|
||
width: 100vw;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 0 10%;
|
||
position: relative;
|
||
}
|
||
|
||
.split-layout {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
width: 100%;
|
||
gap: 120px;
|
||
}
|
||
|
||
.story-content {
|
||
flex: 0 0 600px;
|
||
z-index: 10;
|
||
}
|
||
|
||
.visual-area {
|
||
flex: 1;
|
||
position: relative;
|
||
height: 600px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
/* UI Element Styling - Compressed & Authentic */
|
||
.dashboard-card {
|
||
background: white;
|
||
border: 1px solid #cbd5e1;
|
||
border-radius: 1rem;
|
||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
|
||
padding: 2rem;
|
||
width: 100%;
|
||
max-width: 650px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.system-header {
|
||
background: #f8fafc;
|
||
border-bottom: 1px solid #e2e8f0;
|
||
padding: 0.5rem 1rem;
|
||
margin: -2rem -2rem 1.5rem -2rem;
|
||
border-radius: 1rem 1rem 0 0;
|
||
display: flex;
|
||
gap: 0.5rem;
|
||
align-items: center;
|
||
}
|
||
|
||
.dot { width: 8px; height: 8px; border-radius: 50%; background: #e2e8f0; }
|
||
|
||
/* Scrollytelling Transitions */
|
||
.visual-element {
|
||
position: absolute;
|
||
opacity: 0;
|
||
transform: translateX(40px);
|
||
pointer-events: none;
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
.visual-element.active {
|
||
opacity: 1;
|
||
transform: translateX(0);
|
||
pointer-events: auto;
|
||
}
|
||
|
||
.progress-bar {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
height: 6px;
|
||
background: var(--robo-blue);
|
||
z-index: 110;
|
||
}
|
||
|
||
/* Fixed Opaque Header */
|
||
header {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
padding: 1.5rem 4rem;
|
||
background: #ffffff;
|
||
z-index: 100;
|
||
border-bottom: 1px solid #f1f5f9;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
.logo-img { width: 14rem; }
|
||
|
||
h2 {
|
||
letter-spacing: -0.05em;
|
||
line-height: 0.9;
|
||
font-size: 7.5rem;
|
||
font-weight: 800;
|
||
margin-bottom: 3rem;
|
||
}
|
||
|
||
.text-2xl { font-size: 2.2rem; color: #475569; font-weight: 400; line-height: 1.3; }
|
||
.pre-headline { font-size: 1.2rem; letter-spacing: 0.4em; font-weight: 700; text-transform: uppercase; color: var(--robo-blue); margin-bottom: 2rem; display: block; }
|
||
|
||
.kpi-bar-bg { width: 100%; height: 16px; background: #f1f5f9; border-radius: 8px; overflow: hidden; margin: 15px 0; }
|
||
.kpi-bar-fill { height: 100%; width: 0%; border-radius: 8px; }
|
||
|
||
/* Vertical Action List */
|
||
.action-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 1rem;
|
||
padding: 0.75rem 0;
|
||
border-bottom: 1px solid #f1f5f9;
|
||
font-size: 1.1rem;
|
||
font-weight: 600;
|
||
color: #334155;
|
||
opacity: 0;
|
||
transform: translateY(10px);
|
||
}
|
||
.action-label { font-size: 0.8rem; color: #94a3b8; width: 120px; text-transform: uppercase; letter-spacing: 0.05em; }
|
||
|
||
.badge-red { background: #fee2e2; color: #b91c1c; font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 6px; text-transform: uppercase; }
|
||
.badge-orange { background: #ffedd5; color: #c2410c; font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 6px; text-transform: uppercase; }
|
||
|
||
.screenshot-frame {
|
||
background: white;
|
||
border: 1px solid #cbd5e1;
|
||
border-radius: 1rem;
|
||
box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.15);
|
||
overflow: hidden;
|
||
width: 100%;
|
||
max-width: 800px;
|
||
}
|
||
.screenshot-img { width: 100%; height: auto; display: block; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="progress-bar" id="progressBar"></div>
|
||
|
||
<!-- Header -->
|
||
<header>
|
||
<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDU4MS45IDE1My4yIj4KICA8ZGVmcz4KICAgIDxzdHlsZT4KICAgICAgLmNscy0xIHsKICAgICAgICBmaWxsOiBub25lOwogICAgICB9CgogICAgICAuY2xzLTIgewogICAgICAgIGZpbGw6ICMwYjBhMGQ7CiAgICAgIH0KCiAgICAgIC5jbHMtMyB7CiAgICAgICAgZmlsbDogIzMwYmRlYTsKICAgICAgfQogICAgPC9zdHlsZT4KICA8L2RlZnM+CiAgPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI4LjcuNSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDEuMi4wIEJ1aWxkIDE3NikgIC0tPgogIDxnPgogICAgPGcgaWQ9IkxvZ28iPgogICAgICA8cGF0aCBpZD0iZmxvdyIgY2xhc3M9ImNscy0zIiBkPSJNNjcuNSwyMi4yYzgtMy45LDE3LjYtLjYsMjEuNSw3LjQsMy45LDgsLjYsMTcuNi03LjQsMjEuNS04LDMuOS0xNy42LjYtMjEuNS03LjQtMy45LTgtLjYtMTcuNiw3LjQtMjEuNVpNMzMuMSw2MC42YzMuMSw2LjQsMTAuOCw5LDE3LjIsNS45LDYuNC0zLjEsOS0xMC44LDUuOS0xNy4yLTMuMS02LjQtMTAuOC05LTE3LjItNS45LTYuNCwzLjEtOSwxMC44LTUuOSwxNy4yWk0yMS42LDg1LjZjMi41LDUuMSw4LjcsNy4yLDEzLjgsNC43LDUuMS0yLjUsNy4yLTguNyw0LjctMTMuOC0yLjUtNS4xLTguNi03LjItMTMuOC00LjctNS4xLDIuNS03LjIsOC43LTQuNywxMy44Wk0yMi43LDEwOS43YzIsNC4xLDYuOSw1LjgsMTEsMy44LDQuMS0yLDUuOC02LjksMy44LTExLTItNC4xLTYuOS01LjgtMTEtMy44LTQuMSwyLTUuOCw2LjktMy44LDExWk0zMS41LDEyOWMxLjYsMy4zLDUuNSw0LjYsOC44LDMsMy4zLTEuNiw0LjYtNS41LDMtOC44LTEuNi0zLjMtNS41LTQuNi04LjgtMy0zLjMsMS42LTQuNiw1LjUtMyw4LjhaIi8+CiAgICAgIDxwYXRoIGNsYXNzPSJjbHMtMiIgZD0iTTk3LjksMTI0LjhjMCwuOC0uNCwxLjItMS4yLDEuMmgtNC45Yy0uOCwwLTEuMi0uNC0xLjItMS4ydi01Ny45aDI0LjVjNS42LDAsOS42LDEuNCwxMiw0LjMsMi40LDIuOCwzLjYsNywzLjYsMTIuNXYxLjVjMCwyLS4yLDMuOC0uNSw1LjUtLjMsMS43LS45LDMuMi0xLjgsNC42LS44LDEuNC0xLjksMi41LTMuMywzLjUtMS40LDEtMy4xLDEuNy01LjEsMi4ybDEwLjYsMjRjLjMuNiwwLC45LS42LjloLTUuNmMtLjgsMC0xLjItLjMtMS40LS45bC05LjktMjNoLTE1LjF2MjIuN1pNMTIzLjEsODMuNWMwLTMuNC0uNy01LjktMi03LjYtMS40LTEuNy0zLjgtMi41LTcuMi0yLjVoLTE2djIyLjdoMTZjMS4yLDAsMi4zLS4xLDMuNC0uNCwxLjEtLjMsMi4xLS44LDIuOS0xLjcuOS0uNywxLjYtMS44LDIuMS0zLjIuNS0xLjQuOC0zLjIuOC01LjV2LTEuOVoiLz4KICAgICAgPHBhdGggY2xhc3M9ImNscy0yIiBkPSJNMTU5LjYsMTI2LjRjLTMuOCwwLTcuMS0uNC0xMC0xLjEtMi45LS43LTUuMi0yLjItNy4xLTQuMy0xLjktMi4xLTMuMy01LTQuMy04LjktMS0zLjgtMS41LTguOS0xLjUtMTUuMnYtMWMwLTYuMy41LTExLjMsMS41LTE1LjIsMS0zLjgsMi40LTYuOCw0LjMtOSwxLjktMi4xLDQuMy0zLjUsNy4xLTQuMiwyLjgtLjcsNi4yLTEuMSwxMC0xLjFoLjRjMy44LDAsNy4xLjQsMTAsMS4xLDIuOC43LDUuMywyLjEsNy4yLDQuMiwxLjgsMi4yLDMuMiw1LjEsNC4yLDksMSwzLjgsMS41LDguOSwxLjUsMTUuMnYxYzAsNi4zLS41LDExLjMtMS41LDE1LjItMSwzLjgtMi40LDYuOC00LjIsOC45LTIsMi4yLTQuNCwzLjYtNy4yLDQuMy0yLjguNy02LjIsMS4xLTEwLDEuMWgtLjRaTTE2MCwxMTkuOGMyLjcsMCw1LS4zLDctLjgsMS45LS41LDMuNS0xLjYsNC44LTMuMSwxLjMtMS42LDIuMi00LDIuOC02LjkuNi0zLC45LTcsLjktMTIuMXYtMWMwLTUuMS0uMy05LjItLjktMTIuMi0uNi0zLTEuNS01LjMtMi44LTYuOC0xLjMtMS42LTIuOS0yLjYtNC44LTMuMS0xLjktLjUtNC4zLS44LTctLjhoLS40Yy0yLjcsMC01LC4zLTYuOS44LTEuOS41LTMuNSwxLjYtNC44LDMuMS0xLjMsMS42LTIuMiwzLjktMi44LDYuOC0uNiwzLS45LDctLjksMTIuMnYxYzAsNS4xLjMsOS4xLjksMTIuMS42LDMsMS42LDUuMywyLjgsNi45LDEuMywxLjYsMi45LDIuNiw0LjgsMy4xLDEuOS41LDQuMi44LDYuOS44aC40WiIvPgogICAgICA8cGF0aCBjbGFzcz0iY2xzLTIiIGQ9Ik0xOTMuMSwxMjZjLTEuNCwwLTIuMS0uNy0yLjEtMi4xdi01NS4zYzAtMS4xLjYtMS43LDEuNy0xLjdoMTkuNGMxMC4zLDAsMTUuNCw1LjEsMTUuNCwxNS4ycy0uOCw2LjYtMi4zLDguOWMtMS42LDIuMi0zLjMsMy43LTUuOSw0LjMsMy40LjksNiwyLjYsNy43LDUuMywxLjcsMi42LDIuNiw1LjcsMi42LDkuMSwwLDUuOC0xLjQsOS45LTQuMiwxMi41LTIuOCwyLjYtNywzLjgtMTIuNSwzLjhoLTE5LjhaTTE5OC40LDkyLjhoMTMuOWMyLjQsMCw0LjMtLjksNS43LTIuNiwxLjQtMS43LDIuMi00LDIuMy02LjkuMS0zLjEtLjUtNS41LTEuOS03LjItMS40LTEuNy0zLjYtMi42LTYuNC0yLjZoLTEzLjZ2MTkuM1pNMTk4LjQsMTE5LjVoMTQuMmMzLjUsMCw2LjEtMSw3LjYtMywxLjUtMiwyLjItNC43LDIuMi04cy0uOS01LjQtMi43LTcuMmMtMS44LTEuOC00LjEtMi43LTcuMS0yLjdoLTE0LjJ2MjAuOVoiLz4KICAgICAgPHBhdGggY2xhc3M9ImNscy0yIiBkPSJNMjU5LjEsMTI2LjRjLTMuOCwwLTcuMS0uNC0xMC0xLjEtMi45LS43LTUuMi0yLjItNy4xLTQuMy0xLjktMi4xLTMuMy01LTQuMy04LjktMS0zLjgtMS41LTguOS0xLjUtMTUuMnYtMWMwLTYuMy41LTExLjMsMS41LTE1LjIsMS0zLjgsMi40LTYuOCw0LjMtOSwxLjktMi4xLDQuMy0zLjUsNy4xLTQuMiwyLjgtLjcsNi4yLTEuMSwxMC0xLjFoLjRjMy44LDAsNy4xLjQsMTAsMS4xLDIuOC43LDUuMywyLjEsNy4yLDQuMiwxLjgsMi4yLDMuMiw1LjEsNC4yLDksMSwzLjgsMS41LDguOSwxLjUsMTUuMnYxYzAsNi4zLS41LDExLjMtMS41LDE1LjItMSwzLjgtMi40LDYuOC00LjIsOC45LTIsMi4yLTQuNCwzLjYtNy4yLDQuMy0yLjguNy02LjIsMS4xLTEwLDEuMWgtLjRaTTE2MCwxMTkuOGMyLjcsMCw1LS4zLDctLjgsMS45LS41LDMuNS0xLjYsNC44LTMuMSwxLjMtMS42LDIuMi00LDIuOC02LjkuNi0zLC45LTcsLjktMTIuMXYtMWMwLTUuMS0uMy05LjItLjktMTIuMi0uNi0zLTEuNS01LjMtMi44LTYuOC0xLjMtMS42LTIuOS0yLjYtNC44LTMuMS0xLjktLjUtNC4zLS44LTctLjhoLS40Yy0yLjcsMC01LC4zLTYuOS44LTEuOS41LTMuNSwxLjYtNC44LDMuMS0xLjMsMS42LTIuMiwzLjktMi44LDYuOC0uNiwzLS45LDctLjksMTIuMnYxYzAsNS4xLjMsOS4xLjksMTIuMS42LDMsMS42LDUuMywyLjgsNi45LDEuMywxLjYsMi45LDIuNiw0LjgsMy4xLDEuOS41LDQuMi44LDYuOS44aC40WiIvPjwvc3ZnPg==" alt="RoboPlanet Logo" class="logo-img">
|
||
<div class="text-[10px] font-bold uppercase tracking-[0.3em] text-slate-400">Board Presentation | Executive Strategic Briefing</div>
|
||
</header>
|
||
|
||
<main id="main" class="pt-32">
|
||
|
||
<!-- Slide 1: Ausgangslage (SuperOffice eingebettet) -->
|
||
<section class="slide" id="slide1">
|
||
<div class="split-layout">
|
||
<div class="story-content">
|
||
<span class="pre-headline">Status Quo</span>
|
||
<h2>Verteilte <br><span class="text-slate-200">Sichten.</span></h2>
|
||
<p class="text-2xl leading-relaxed">
|
||
Daten waren vorhanden – aber nicht operativ nutzbar.
|
||
</p>
|
||
<div class="space-y-6 mt-12">
|
||
<div class="flex items-center gap-4 text-xl font-bold text-slate-800">
|
||
<div class="w-2 h-2 rounded-full bg-blue-700"></div> Manuelle Excel-Reports
|
||
</div>
|
||
<div class="flex items-center gap-4 text-xl font-bold text-slate-800">
|
||
<div class="w-2 h-2 rounded-full bg-blue-700"></div> Fragmentiertes Wissen
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="visual-area">
|
||
<div class="visual-element active" id="visual1">
|
||
<div class="screenshot-frame border-slate-200">
|
||
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABzMAAAPYCAYAAABe8dR1AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAP+lSURBVHhe7N15fFNV+j/wT/YudIOWtuwFBFs2iyyCOjC4FIuACINKxRkFV3BGpDoyoqLiOGIRZ1hEBX/fAUFFBKFQBDcYFZCtstgKFgq00BW60SX7748kbXKatEmbtkn6eb9eeZE85+TmNrkNt+e5zzmSW265xQgiIiIiIiIiIiIiIiIiIg8juT3hTiYziYiIiIiIiIiIiIiIiMjjSJCcZASAkoUrxTYiIiIiIiIiIiIiIiIiojYjBQCJRAwTEREREREREREREREREbUtKQAYOdEsEREREREREREREREREXkYc2UmSzOJiIiIiIiIiIiIiIiIyLOYKzNZmklEREREREREREREREREnsVUmSlGiYiIiIiIiIiIiIiIiIjamKkyU4wSEREREREREREREREREbUxrplJRERERERERERERERERB6Ja2YSERERERERERERERERkUfimplERERERERERERERERE5JEkSE4yAkDJwpViGxEREREREREREREREbUAL9IP45vfTiE99yJyrl5BlUaNAKUK3Tt2Qny3Hrj9+oGYGj9cfBpRuyNBcpJRAgmuLlwhthEREREREREREREREZEbvfvdV1i57xsUX6sQm+oJ7xCEOWNuxzPjxotNRO0GKzOJiIiIiLyY0WgUQ0RE1AiJhAvuEBERUes7cSkH8zZ/jGMXz4tNjRraoxeWTXsQg7t2F5uIfB7XzCQiIiIi8gJGo9HujYiIXCd+l/I7lYiIiFra92cycdeKt5uUyASAYxfP464Vb+P7M5liE5HPY2UmucRoNPIKViIiIqJWwoF1IqK2w799iYiIyF1OXMrBXSveRpVGLTYB9/0Lxjt6iVEAlfjus1m47WvbaIBShV1zn2OFJrUrbbpmZk1NDaqrq6FWq6HVaKDT62E0GDho40YBAYGoqqoUw00mkUggkUqhkMuhUCqhUiqh8vODv7+/2NWr1NTUoLqqynQsarU8FluR5ZiSy2RQKBRQqVTwDwiAn5+f2JWIiKhdcHT+YTAYYDAYas9RjEYjYASMsN+fiIgck0ACSMx/j5j/JFeb/YwsUlERETNcdu/33RYk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" alt="SuperOffice Screenshot" class="screenshot-img">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Slide 2: Das Cockpit (DGS GmbH Dashboard überarbeitet) -->
|
||
<section class="slide" id="slide2">
|
||
<div class="split-layout">
|
||
<div class="story-content">
|
||
<span class="pre-headline">Die Lösung</span>
|
||
<h2>Das <br><span class="text-blue-700">Cockpit.</span></h2>
|
||
<p class="text-2xl leading-relaxed mb-10">
|
||
Eine operative Ansicht für jeden Account.
|
||
</p>
|
||
<div class="bg-blue-50 border-l-[6px] border-blue-600 p-8 rounded-r-2xl">
|
||
<p class="text-blue-900 text-xl 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">
|
||
<div class="system-header">
|
||
<div class="dot" style="background:#ef4444"></div>
|
||
<div class="dot" style="background:#fbbf24"></div>
|
||
<div class="dot" style="background:#10b981"></div>
|
||
<span class="text-[10px] font-bold text-slate-400 ml-2 uppercase">Account Inspector | DGS GmbH</span>
|
||
</div>
|
||
|
||
<div class="mb-10">
|
||
<div class="flex justify-between items-start mb-4">
|
||
<div>
|
||
<h3 class="text-3xl font-black text-slate-900 leading-tight">DGS GmbH</h3>
|
||
<div class="text-blue-600 font-bold text-lg mt-1">Paul Goliasch</div>
|
||
<div class="text-sm font-semibold text-slate-500 italic mt-2">3 x CC1 Pro mit Nachlass</div>
|
||
</div>
|
||
<div class="flex flex-col gap-2 items-end">
|
||
<span class="badge-red">overdue date</span>
|
||
<span class="badge-orange">missing contract type</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Vertical Actions Section -->
|
||
<div class="border-t border-slate-100 pt-6">
|
||
<div class="text-[10px] font-bold text-slate-400 uppercase mb-4 tracking-widest">Letzte Aktionen</div>
|
||
<div id="dgsGrid">
|
||
<div class="action-item">
|
||
<span class="action-label">Vor Ort</span>
|
||
<span>📍 03.12.2025</span>
|
||
</div>
|
||
<div class="action-item">
|
||
<span class="action-label">E-Mail</span>
|
||
<span>✉️ 01.12.2025</span>
|
||
</div>
|
||
<div class="action-item">
|
||
<span class="action-label">Call</span>
|
||
<span>📞 29.04.2026</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Status Section -->
|
||
<div class="mt-10 flex items-center gap-6">
|
||
<div class="flex flex-col">
|
||
<span class="text-[10px] font-bold text-slate-400 uppercase mb-1">Geplanter Abschluss</span>
|
||
<div class="bg-red-600 text-white px-4 py-2 rounded-lg font-black text-xl shadow-lg shadow-red-200">
|
||
30.05.2026
|
||
</div>
|
||
</div>
|
||
<div class="flex flex-col">
|
||
<span class="text-[10px] font-bold text-slate-400 uppercase mb-1">Status</span>
|
||
<div class="text-blue-700 font-black text-3xl italic">
|
||
OPEN
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Slide 3: Aktion -->
|
||
<section class="slide" id="slide3">
|
||
<div class="split-layout">
|
||
<div class="story-content">
|
||
<span class="pre-headline">Performance</span>
|
||
<h2>Vom Überblick <br><span class="text-blue-600">zur Aktion.</span></h2>
|
||
<div class="bg-slate-50 p-10 rounded-2xl border border-slate-100">
|
||
<div class="text-7xl font-black text-blue-600 mb-2">~20%</div>
|
||
<div class="text-xl font-bold text-slate-800">Response Quote</div>
|
||
<p class="text-lg text-slate-500 mt-4">Innerhalb von 10 Tagen durch systemgestützte Rückrufbitten.</p>
|
||
</div>
|
||
</div>
|
||
<div class="visual-area">
|
||
<div class="visual-element" id="visual3">
|
||
<div class="bg-white border border-blue-200 p-10 rounded-2xl shadow-2xl w-[400px]">
|
||
<div class="flex items-center gap-4 mb-8">
|
||
<div class="w-12 h-12 bg-blue-600 rounded-full flex items-center justify-center text-white">
|
||
<svg class="w-6 h-6" 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-bold text-xl italic text-slate-800">Bulk-Rückrufbitte</div>
|
||
</div>
|
||
<div class="kpi-bar-bg">
|
||
<div id="bar3" class="kpi-bar-fill bg-blue-600 shadow-lg"></div>
|
||
</div>
|
||
<div class="flex justify-between text-[10px] font-bold text-slate-400 uppercase mt-4">
|
||
<span>70 Kontakte</span>
|
||
<span class="text-blue-700">14 Reaktionen</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Slide 4: Ehrliche Pipeline (Überarbeitet mit April) -->
|
||
<section class="slide" id="slide4">
|
||
<div class="split-layout">
|
||
<div class="story-content">
|
||
<span class="pre-headline">Steuerung</span>
|
||
<h2>Ehrliche <br><span class="text-red-600">Pipeline.</span></h2>
|
||
<div class="bg-red-50/30 border-l-[6px] border-red-600 p-10 rounded-r-2xl">
|
||
<div class="text-6xl font-black text-red-600 mb-2">+44%</div>
|
||
<div class="text-xl font-bold text-slate-800 uppercase">Bereinigtes Lost-Volumen</div>
|
||
</div>
|
||
</div>
|
||
<div class="visual-area">
|
||
<div class="visual-element" id="visual4">
|
||
<div class="bg-white border border-slate-200 p-12 rounded-2xl shadow-2xl w-[500px]">
|
||
<div class="space-y-10">
|
||
<div>
|
||
<div class="flex justify-between text-[10px] font-black mb-3"><span class="text-slate-400 uppercase tracking-widest">März 26</span><span class="text-slate-800">1,42 Mio. €</span></div>
|
||
<div class="kpi-bar-bg"><div id="bar4a" class="kpi-bar-fill bg-slate-200"></div></div>
|
||
</div>
|
||
<div>
|
||
<div class="flex justify-between text-[10px] font-black mb-3"><span class="text-slate-400 uppercase tracking-widest">April 26</span><span class="text-slate-800">1,36 Mio. €</span></div>
|
||
<div class="kpi-bar-bg"><div id="bar4b" class="kpi-bar-fill bg-slate-300"></div></div>
|
||
</div>
|
||
<div>
|
||
<div class="flex justify-between text-[10px] font-black mb-3 text-red-600 uppercase tracking-widest"><span>Mai 26</span><span>2,05 Mio. €</span></div>
|
||
<div class="kpi-bar-bg"><div id="bar4c" class="kpi-bar-fill bg-red-600 shadow-lg shadow-red-100"></div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Slide 5: Management Intelligence -->
|
||
<section class="slide" id="slide5">
|
||
<div class="split-layout">
|
||
<div class="story-content">
|
||
<span class="pre-headline">Intelligence</span>
|
||
<h2>Management <br><span class="text-blue-700">Cockpit.</span></h2>
|
||
<div class="space-y-8">
|
||
<div class="text-xl font-bold text-slate-800 flex items-center gap-4">
|
||
<div class="w-1.5 h-1.5 rounded-full bg-blue-700"></div> Pipeline Velocity Analyse
|
||
</div>
|
||
<div class="text-xl font-bold text-slate-800 flex items-center gap-4">
|
||
<div class="w-1.5 h-1.5 rounded-full bg-blue-700"></div> Winning Habits Tracking
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="visual-area">
|
||
<div class="visual-element" id="visual5">
|
||
<div class="bg-white border border-slate-200 p-8 rounded-2xl shadow-2xl w-[500px]">
|
||
<div class="grid grid-cols-3 gap-4 mb-8 text-center border-b border-slate-50 pb-8">
|
||
<div><div class="text-blue-700 font-black text-2xl">12d</div><div class="text-[8px] font-bold text-slate-400 uppercase mt-1">Response</div></div>
|
||
<div><div class="text-blue-700 font-black text-2xl">4.8</div><div class="text-[8px] font-bold text-slate-400 uppercase mt-1">Calls/Deal</div></div>
|
||
<div><div class="text-blue-700 font-black text-2xl">+159%</div><div class="text-[8px] font-bold text-slate-400 uppercase mt-1">Uplift</div></div>
|
||
</div>
|
||
<div class="space-y-3">
|
||
<div class="flex items-center justify-between p-3 bg-blue-50/50 rounded border border-blue-100">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-7 h-7 bg-blue-700 rounded-full flex items-center justify-center text-[8px] font-bold text-white italic shadow-md">PH</div>
|
||
<span class="text-[11px] font-bold">Pierre Hollein | LIVE</span>
|
||
</div>
|
||
<span class="text-[8px] font-bold text-blue-700 uppercase animate-pulse">Vorführung</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Slide 6: White Space -->
|
||
<section class="slide" id="slide6">
|
||
<div class="split-layout">
|
||
<div class="story-content">
|
||
<span class="pre-headline">Potential</span>
|
||
<h2>Nächster <br><span class="text-blue-600">Hebel.</span></h2>
|
||
<p class="text-2xl mb-10">68% der Accounts im CRM ohne Ansprechpartner.</p>
|
||
</div>
|
||
<div class="visual-area">
|
||
<div class="visual-element" id="visual6">
|
||
<div class="text-center">
|
||
<div id="count6" class="text-[10rem] font-black text-blue-700 leading-none">10500</div>
|
||
<div class="text-sm font-bold text-slate-400 uppercase mt-8 tracking-[0.6em]">Roh-Accounts</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 pt-20">
|
||
<h2 class="text-[8.5rem] mb-20 italic leading-none tracking-tighter">Vertrieb. <span class="text-blue-700">Steuerbar.</span></h2>
|
||
<div class="grid grid-cols-3 gap-12 mb-20">
|
||
<div class="p-10 bg-white border border-slate-200 rounded-2xl shadow-xl text-left">
|
||
<div class="text-blue-700 font-black text-3xl mb-4">Transparent</div>
|
||
<p class="text-lg text-slate-500 font-medium">Alle Daten auf einer Seite.</p>
|
||
</div>
|
||
<div class="p-10 bg-white border border-slate-200 rounded-2xl shadow-xl text-left">
|
||
<div class="text-blue-700 font-black text-3xl mb-4">Priorisiert</div>
|
||
<p class="text-lg text-slate-500 font-medium">Alarm zur Aktion.</p>
|
||
</div>
|
||
<div class="p-10 bg-white border border-slate-200 rounded-2xl shadow-xl text-left">
|
||
<div class="text-blue-700 font-black text-3xl mb-4">Handlungsfähig</div>
|
||
<p class="text-lg text-slate-500 font-medium">Echte Hebel statt Listen.</p>
|
||
</div>
|
||
</div>
|
||
<p class="text-3xl text-slate-400 italic font-light leading-relaxed">"Du katapultierst uns damit definitiv in eine modernere Zukunft."</p>
|
||
</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) {
|
||
const tl = gsap.timeline({
|
||
scrollTrigger: {
|
||
trigger: `#${slideId}`,
|
||
start: "top center",
|
||
end: "bottom center",
|
||
toggleActions: "play reverse play reverse"
|
||
}
|
||
});
|
||
|
||
tl.to(`#${visualId}`, { opacity: 1, x: 0, duration: 0.8, ease: "power2.out" });
|
||
|
||
// Mini-Animations
|
||
if (slideId === "slide2") {
|
||
tl.to("#dgsGrid .action-item", { opacity: 1, y: 0, stagger: 0.15, duration: 0.6 }, "-=0.4");
|
||
}
|
||
if (slideId === "slide3") {
|
||
tl.to("#bar3", { width: "20%", duration: 1.5, ease: "power4.out" }, "-=0.5");
|
||
}
|
||
if (slideId === "slide4") {
|
||
tl.to("#bar4a", { width: "42%", duration: 1, ease: "power2.out" }, "-=0.5");
|
||
tl.to("#bar4b", { width: "40%", duration: 1, ease: "power2.out" }, "-=0.8");
|
||
tl.to("#bar4c", { width: "65%", duration: 1.2, ease: "power2.out" }, "-=1.0");
|
||
}
|
||
if (slideId === "slide6") {
|
||
tl.to("#count6", {
|
||
innerHTML: 11216,
|
||
duration: 2.5,
|
||
snap: { innerHTML: 50 },
|
||
ease: "power2.out"
|
||
}, "-=0.5");
|
||
}
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|