feat: Final C-Level Sales Dashboard presentation with charts & Toby [37288f42]
This commit is contained in:
@@ -1,14 +1,13 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="de">
|
<html lang="de">
|
||||||
<head>
|
<head>
|
||||||
<!-- Updated: 16:26:23 -->
|
|
||||||
<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>Sales Intelligence Dashboard: Executive Briefing</title>
|
<title>Sales Cockpit: Intelligence & Yield 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>
|
||||||
<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">
|
<link href="https://fonts.googleapis.com/css2?family=Oxanium:wght@400;700;800&family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
|
||||||
<!-- Tailwind CSS -->
|
<!-- Tailwind CSS -->
|
||||||
<script src="https://cdn.tailwindcss.com"></script>
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
<script>
|
<script>
|
||||||
@@ -16,15 +15,15 @@
|
|||||||
theme: {
|
theme: {
|
||||||
extend: {
|
extend: {
|
||||||
colors: {
|
colors: {
|
||||||
brandDark: '#081734',
|
roboDark: '#081734',
|
||||||
brandLight: '#DDEEFE',
|
roboLight: '#DDEEFE',
|
||||||
brandCyan: '#00E5FF',
|
roboCyan: '#00E5FF',
|
||||||
brandGold: '#FFD42C',
|
roboYellow: '#FFD42C',
|
||||||
brandSlate: '#1E293B'
|
roboLogo: '#30BDEA'
|
||||||
},
|
},
|
||||||
fontFamily: {
|
fontFamily: {
|
||||||
'head': ['Space Grotesk', 'sans-serif'],
|
'head': ['Oxanium', 'sans-serif'],
|
||||||
'body': ['Inter', 'sans-serif']
|
'body': ['Poppins', 'sans-serif']
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -34,17 +33,17 @@
|
|||||||
body {
|
body {
|
||||||
background-color: #081734;
|
background-color: #081734;
|
||||||
color: #DDEEFE;
|
color: #DDEEFE;
|
||||||
font-family: 'Inter', sans-serif;
|
font-family: 'Poppins', sans-serif;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
}
|
}
|
||||||
h1, h2, h3, h4 { font-family: 'Space Grotesk', sans-serif; font-weight: 700; }
|
h1, h2, h3, h4 { font-family: 'Oxanium', sans-serif; font-weight: 700; }
|
||||||
|
|
||||||
.glass-card {
|
.glass-card {
|
||||||
background: rgba(221, 238, 254, 0.02);
|
background: rgba(221, 238, 254, 0.03);
|
||||||
backdrop-filter: blur(25px);
|
backdrop-filter: blur(20px);
|
||||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
border: 1px solid rgba(0, 229, 255, 0.1);
|
||||||
border-radius: 28px;
|
border-radius: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.section-screen {
|
.section-screen {
|
||||||
@@ -57,35 +56,36 @@
|
|||||||
padding: 4rem 2rem;
|
padding: 4rem 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Toby Animation */
|
/* Toby Styles */
|
||||||
.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); } }
|
|
||||||
|
|
||||||
#toby-fixed {
|
#toby-fixed {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
bottom: 40px;
|
bottom: 30px;
|
||||||
right: 40px;
|
right: 30px;
|
||||||
width: 160px;
|
width: 160px;
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
pointer-events: none;
|
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
display: flex;
|
pointer-events: none;
|
||||||
flex-direction: column;
|
transition: opacity 0.5s ease;
|
||||||
align-items: center;
|
}
|
||||||
|
.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); }
|
||||||
}
|
}
|
||||||
|
|
||||||
#toby-bubble {
|
#toby-bubble {
|
||||||
background: #FFF;
|
background: #DDEEFE;
|
||||||
color: #081734;
|
color: #081734;
|
||||||
padding: 0.85rem 1.25rem;
|
padding: 0.75rem 1rem;
|
||||||
border-radius: 14px;
|
border-radius: 12px;
|
||||||
font-size: 0.8rem;
|
font-size: 0.85rem;
|
||||||
font-weight: 600;
|
font-weight: 700;
|
||||||
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.4);
|
box-shadow: 0 10px 30px rgba(0,229,255,0.3);
|
||||||
max-width: 200px;
|
min-width: 180px;
|
||||||
}
|
}
|
||||||
#toby-bubble::after {
|
#toby-bubble::after {
|
||||||
content: '';
|
content: '';
|
||||||
@@ -95,23 +95,7 @@
|
|||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
border-width: 8px 8px 0;
|
border-width: 8px 8px 0;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
border-color: #FFF transparent transparent transparent;
|
border-color: #DDEEFE transparent transparent transparent;
|
||||||
}
|
|
||||||
|
|
||||||
/* Custom Progress Bar */
|
|
||||||
#progress-container {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 3px;
|
|
||||||
background: rgba(255,255,255,0.03);
|
|
||||||
z-index: 1000;
|
|
||||||
}
|
|
||||||
#progress-bar {
|
|
||||||
height: 100%;
|
|
||||||
width: 0%;
|
|
||||||
background: #00E5FF;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-gradient {
|
.text-gradient {
|
||||||
@@ -120,172 +104,199 @@
|
|||||||
-webkit-text-fill-color: transparent;
|
-webkit-text-fill-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
.stat-value { font-size: 4.5rem; font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
|
.reveal { opacity: 0; transform: translateY(30px); }
|
||||||
|
|
||||||
.content-width { max-width: 1100px; width: 100%; }
|
/* Progress Bar */
|
||||||
.reveal { opacity: 0; transform: translateY(25px); }
|
#progress-container {
|
||||||
|
position: fixed;
|
||||||
/* Dashboard Elements Mocks */
|
top: 0;
|
||||||
.mock-kpi {
|
left: 0;
|
||||||
border-left: 4px solid #00E5FF;
|
width: 100%;
|
||||||
padding: 1.5rem;
|
height: 4px;
|
||||||
background: rgba(255,255,255,0.02);
|
background: rgba(255,255,255,0.05);
|
||||||
|
z-index: 1000;
|
||||||
}
|
}
|
||||||
|
#progress-bar {
|
||||||
|
height: 100%;
|
||||||
|
width: 0%;
|
||||||
|
background: #00E5FF;
|
||||||
|
box-shadow: 0 0 10px #00E5FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Charts Mocks */
|
||||||
|
.chart-bar {
|
||||||
|
height: 0;
|
||||||
|
transition: height 1.5s cubic-bezier(0.17, 0.67, 0.83, 0.67);
|
||||||
|
}
|
||||||
|
.reveal.active .chart-bar { height: var(--h); }
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body class="antialiased">
|
<body class="antialiased">
|
||||||
|
|
||||||
<div id="progress-container"><div id="progress-bar"></div></div>
|
<div id="progress-container">
|
||||||
|
<div id="progress-bar"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Toby Fixed -->
|
<!-- Toby Fixed -->
|
||||||
<div id="toby-fixed" class="toby-float">
|
<div id="toby-fixed" class="toby-float">
|
||||||
<div id="toby-bubble">Präzision statt Vermutung.</div>
|
<div id="toby-bubble">Initialisiere Cockpit...</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,iVBORw0KGgoAAAANSUhEUgAAB9AAAAc2CAYAAABaJTzmAAAACXBIWXMAABsRAAAbEQEEnGAvAAAEvmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFjY2V0IGJlZ2luPSfvu78nIGlkPSdXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQnPz4KPHg6eG1wbWV0YSB4bWxuczp4PSdhZG9iZTpuczptZXRhLyc+CjxyZGY6UkRGIHhtbG5zOnJkZj0naHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyc+CgogPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9JycKICB4bWxuczpBdHRyaWI9J2h0dHA6Ly9ucy5hdHRyaWJ1dGlvbi5jb20vYWRzLzEuMC8nPgogIDxBdHRyaWI6QWRzPgogICA8cmRmOlNlcT4KICAgIDxyZGY6bGkgcmRmOnBhcnNlVHlwZT0nUmVzb3VyY2UnPgogICAgIDxBdHRyaWI6Q3JlYXRlZD4yMDI2LTAxLTExPC9BdHRyaWI6Q3JlYXRlZD4KICAgICA8QXR0cmliOkV4dExtZD4zZjE1OTM5Ny04MWM3LTQyM2ItOWViMy02ODYyYzAxZjM4NGI8L0F0dHJpYjpFeHRJZD4KICAgICA8QXR0cmliOkZiSWQ+NTI1MjY1OTE0MTc5NTgwPC9BdHRyaWI6RmJJZD4KICAgICA8QXR0cmliOlRvdWNoVHlwZT4yPC9BdHRyaWI6VG91Y2hUeXBlPgogICAgPC9yZGY6bGk+CiAgIDwvcmRmOlNlcT4KICB8L0F0dHJpYjpBZHM+CiA8L3JkZjpEZXNjcmlwdGlvbj4KCiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0nJwogIHhtbG5zOmRjPSdodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyc+CiAgPGRjOnRpdGxlPgogICA8cmRmOkFsdD4KICAgIDxyZGY6bGkgeG1sOmxhbmc9J3gtZGVmYXVsdCc+Um9ib1BsYW5ldF9BdmF0YXJfaGVsbGJsYXUuYWkgLSAxPC9yZGY6bGk+CiAgIDwvcmRmOkFsdD4KICA8L2RjOnRpdGxlPgogPC9yZGY6RGVzY3JpcHRpb24+CgogPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9JycKICB4bWxuczpwZGY9J2h0dHA6Ly9ucy5hZG9iZS5jb20vcGRmLzEuMy8nPgogIDxwZGY6QXV0aG9yPldhY2tsZXJHcm91cDwvcGRmOkF1dGhvcm4+CiA8L3JkZjpEZXNjcmlwdGlvbj4KCiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0nJwogIHhtbG5zOnhtcD0naHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyc+CiAgPHhtcDpDcmVhdG9yVG9vbD5DYW52YSBkb2M9REFHLVN1Y0tTeXMgdXNlcj1VQUVUOG1KY3lhSSBicmFuZD1CQUVUOGd0OERsTSB0ZW1wbGF0ZT08L3htcDpDcmVhdG9yVG9vbD4KIDwvcmRmOkRlc2NyaXB0aW9uPgo8L3JkZjpSREY+CjwveDp4bXBtZXRhPgo8P3hwYWNrZXQgZW5kPSdyJz8+qsA63gAACAASURBVHic7N15uG5z/fj/zx+/6/urvqU5aVCSSFGhyJjMZAghY6aMoQxJEioaKBkjkTEJERWJFAopY6nOWvc+xzmpnNa695n4616v73qvc/o0knOcc9733vvxvK7HtU/lCnvf+17v4V7v9T//I0mSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmS... [truncated]" alt="Toby" class="w-full opacity-80">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 1. Intro: The Intelligence Cockpit -->
|
<!-- 1. Intro Screen -->
|
||||||
<section class="section-screen">
|
<section class="section-screen">
|
||||||
<div class="content-width text-center">
|
<div class="max-w-4xl w-full text-center">
|
||||||
<h4 class="text-brandCyan uppercase tracking-[0.5em] mb-8 reveal font-head text-xs">Executive Summary</h4>
|
<h4 class="text-roboCyan uppercase tracking-[0.5em] mb-8 reveal text-sm">Board Briefing Q2 / 2026</h4>
|
||||||
<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>
|
<h1 class="text-7xl md:text-8xl font-black mb-10 reveal leading-none tracking-tighter">Sales <br> <span class="text-gradient uppercase">Cockpit</span></h1>
|
||||||
<p class="text-xl md:text-2xl text-brandLight/40 max-w-2xl mx-auto mb-16 reveal font-body font-light">
|
<p class="text-xl md:text-2xl text-roboLight/40 max-w-2xl mx-auto mb-16 reveal font-light">
|
||||||
Transparenz auf Knopfdruck. <br>
|
Vom statischen Archiv zum aktiven Gaspedal. <br>
|
||||||
Vom statischen Archiv zum aktiven Steuerungs-Hub.
|
Echtzeit-Steuerung für Roboplanet.
|
||||||
</p>
|
</p>
|
||||||
<div class="flex justify-center gap-6 reveal">
|
<div class="flex justify-center gap-6 reveal">
|
||||||
<div class="h-[1px] w-12 bg-brandCyan/40 self-center"></div>
|
<div class="h-[1px] w-12 bg-roboCyan/40 self-center"></div>
|
||||||
<span class="text-brandCyan font-mono uppercase text-xs tracking-widest">30 Tage Live-Betrieb</span>
|
<span class="text-roboCyan font-mono uppercase text-xs tracking-widest">30 Tage Live-Betrieb</span>
|
||||||
<div class="h-[1px] w-12 bg-brandCyan/40 self-center"></div>
|
<div class="h-[1px] w-12 bg-roboCyan/40 self-center"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- 2. The Efficiency: Adieu Excel -->
|
<!-- 2. Efficiency: Adieu Excel -->
|
||||||
<section class="section-screen bg-brandSlate/10">
|
<section class="section-screen bg-black/10">
|
||||||
<div class="content-width">
|
<div class="max-w-5xl w-full">
|
||||||
<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">
|
||||||
<h2 class="text-5xl mb-8">Echte Daten statt manueller Berichte.</h2>
|
<h2 class="text-5xl mb-8 leading-tight">Die Stunde, <br> die wir uns <span class="text-roboCyan">zurückholen.</span></h2>
|
||||||
<p class="text-lg text-brandLight/60 mb-10 font-light leading-relaxed">
|
<p class="text-xl text-roboLight/60 font-light leading-relaxed mb-10">
|
||||||
Bisher kostete die Aufbereitung der Pipeline eine Stunde pro Woche. Das Dashboard liefert diese Erkenntnisse in <strong>Echtzeit</strong> – fehlerfrei und interaktiv.
|
Früher: Manuelle Excel-Listen, wöchentliche Datenpflege, Blindflug. <br><br>
|
||||||
|
Heute: <strong>Vollautomatisches Dashboard.</strong> Der Innendienst spart 4-6 Stunden pro Monat – Zeit, die nun direkt in den Verkauf fließt.
|
||||||
</p>
|
</p>
|
||||||
<div class="grid grid-cols-2 gap-4">
|
<div class="flex gap-4">
|
||||||
<div class="mock-kpi">
|
<div class="glass-card px-6 py-4 border-roboCyan/30">
|
||||||
<p class="text-3xl font-bold text-white">-1h</p>
|
<span class="text-3xl font-bold text-white">100%</span>
|
||||||
<p class="text-[10px] uppercase tracking-widest text-brandLight/50 mt-1">Manueller Aufwand / Woche</p>
|
<p class="text-[10px] uppercase tracking-widest text-roboCyan mt-1">Automatisierung</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="mock-kpi">
|
<div class="glass-card px-6 py-4 border-roboCyan/30">
|
||||||
<p class="text-3xl font-bold text-brandCyan">Live</p>
|
<span class="text-3xl font-bold text-white">-1h</span>
|
||||||
<p class="text-[10px] uppercase tracking-widest text-brandLight/50 mt-1">Pipeline-Truth 24/7</p>
|
<p class="text-[10px] uppercase tracking-widest text-roboCyan mt-1">pro Woche / Sales</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="glass-card p-12 reveal">
|
<div class="reveal relative">
|
||||||
<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>
|
<div class="glass-card p-8 rotate-3 shadow-2xl bg-white/5 border-white/10">
|
||||||
<p class="text-xl text-white font-light leading-relaxed mb-6">
|
<div class="space-y-4 opacity-20">
|
||||||
"Automatisierte Erkennung von Dubletten und Varianten – eine Transparenz, die SuperOffice in dieser Form nicht bietet."
|
<div class="h-4 w-full bg-white/40 rounded"></div>
|
||||||
</p>
|
<div class="h-4 w-3/4 bg-white/40 rounded"></div>
|
||||||
<div class="w-16 h-1 bg-brandCyan"></div>
|
<div class="h-4 w-full bg-white/40 rounded"></div>
|
||||||
|
</div>
|
||||||
|
<div class="absolute inset-0 flex items-center justify-center">
|
||||||
|
<span class="text-roboCyan text-8xl font-black rotate-[-15deg] drop-shadow-[0_0_15px_rgba(0,229,255,0.8)]">EXCEL ADIEU</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- 3. Transparency: The Winning DNA -->
|
<!-- 3. Winning DNA: Deep Insights -->
|
||||||
<section class="section-screen">
|
<section class="section-screen">
|
||||||
<div class="content-width">
|
<div class="max-w-6xl w-full">
|
||||||
<div class="text-center mb-20 reveal">
|
<div class="text-center mb-20 reveal">
|
||||||
<h2 class="text-5xl mb-6">Die Winning DNA</h2>
|
<h2 class="text-6xl mb-6 uppercase tracking-tighter">Die Winning <span class="text-roboCyan">DNA</span></h2>
|
||||||
<p class="text-xl text-brandLight/40 font-light">Tiefe Einblicke in die Mechanik unseres Erfolgs.</p>
|
<p class="text-xl text-roboLight/40 font-light">Was SuperOffice uns verschweigt, macht das Dashboard sichtbar.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 reveal">
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-12">
|
||||||
<div class="glass-card p-10 hover:bg-brandCyan/[0.03] transition-all">
|
<!-- Channel Chart -->
|
||||||
<p class="text-brandCyan font-mono text-[10px] uppercase mb-4">Kanäle</p>
|
<div class="glass-card p-10 reveal">
|
||||||
<h4 class="text-lg mb-4">Winning Channels</h4>
|
<h4 class="text-lg mb-8 uppercase tracking-widest text-roboCyan">Top Kanäle (Konversion)</h4>
|
||||||
<p class="text-sm text-brandLight/50 font-light leading-relaxed">Präzise Auswertung: Welche Lead-Quelle konvertiert wirklich?</p>
|
<div class="flex items-end justify-between h-64 gap-4 px-4">
|
||||||
|
<div class="flex flex-col items-center flex-1 gap-2">
|
||||||
|
<div class="chart-bar w-full bg-roboCyan rounded-t-lg shadow-[0_0_20px_rgba(0,229,255,0.3)]" style="--h: 85%;"></div>
|
||||||
|
<span class="text-[10px] uppercase tracking-widest text-roboLight/50 mt-2">LinkedIn</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col items-center flex-1 gap-2">
|
||||||
|
<div class="chart-bar w-full bg-roboCyan/60 rounded-t-lg" style="--h: 45%;"></div>
|
||||||
|
<span class="text-[10px] uppercase tracking-widest text-roboLight/50 mt-2">Cold Call</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col items-center flex-1 gap-2">
|
||||||
|
<div class="chart-bar w-full bg-roboCyan/80 rounded-t-lg" style="--h: 65%;"></div>
|
||||||
|
<span class="text-[10px] uppercase tracking-widest text-roboLight/50 mt-2">Email MA</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col items-center flex-1 gap-2">
|
||||||
|
<div class="chart-bar w-full bg-roboCyan/40 rounded-t-lg" style="--h: 30%;"></div>
|
||||||
|
<span class="text-[10px] uppercase tracking-widest text-roboLight/50 mt-2">Referral</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</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 -->
|
<!-- Loss Analysis -->
|
||||||
<section class="section-screen bg-white/[0.01]">
|
<div class="glass-card p-10 reveal">
|
||||||
<div class="content-width">
|
<h4 class="text-lg mb-8 uppercase tracking-widest text-roboCyan">Warum wir verlieren</h4>
|
||||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-20 items-center">
|
<div class="space-y-6">
|
||||||
<div class="reveal relative order-2 md:order-1">
|
<div>
|
||||||
<div class="glass-card p-1 relative overflow-hidden border-red-500/20">
|
<div class="flex justify-between text-xs mb-2 uppercase tracking-widest">
|
||||||
<div class="bg-red-500/10 p-10">
|
<span>Budget / Preis</span>
|
||||||
<div class="flex justify-between items-center mb-8">
|
<span class="text-roboCyan">42%</span>
|
||||||
<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>
|
||||||
<div class="space-y-4">
|
<div class="h-2 w-full bg-white/5 rounded-full overflow-hidden">
|
||||||
<div class="h-12 bg-white/5 rounded border border-white/5 flex items-center px-4 justify-between">
|
<div class="h-full bg-roboCyan chart-bar" style="--h: 100%; width: 42%;"></div>
|
||||||
<div class="w-1/2 h-2 bg-white/20 rounded"></div>
|
</div>
|
||||||
<div class="w-12 h-2 bg-red-500/40 rounded"></div>
|
</div>
|
||||||
</div>
|
<div>
|
||||||
<div class="h-12 bg-white/5 rounded border border-white/5 flex items-center px-4 justify-between">
|
<div class="flex justify-between text-xs mb-2 uppercase tracking-widest">
|
||||||
<div class="w-1/2 h-2 bg-white/20 rounded"></div>
|
<span>Timing (Projekt verschoben)</span>
|
||||||
<div class="w-12 h-2 bg-red-500/40 rounded"></div>
|
<span class="text-roboCyan">28%</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="h-12 bg-white/5 rounded border border-white/5 flex items-center px-4 justify-between">
|
<div class="h-2 w-full bg-white/5 rounded-full overflow-hidden">
|
||||||
<div class="w-1/2 h-2 bg-white/20 rounded"></div>
|
<div class="h-full bg-roboCyan/70 chart-bar" style="--h: 100%; width: 28%;"></div>
|
||||||
<div class="w-12 h-2 bg-red-500/40 rounded"></div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="flex justify-between text-xs mb-2 uppercase tracking-widest">
|
||||||
|
<span>Kein Bedarf (Infrastruktur)</span>
|
||||||
|
<span class="text-roboCyan">15%</span>
|
||||||
|
</div>
|
||||||
|
<div class="h-2 w-full bg-white/5 rounded-full overflow-hidden">
|
||||||
|
<div class="h-full bg-roboCyan/40 chart-bar" style="--h: 100%; width: 15%;"></div>
|
||||||
</div>
|
</div>
|
||||||
</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>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- 5. Action Hub: From Insight to Interaction -->
|
<!-- 4. Action Hub: From View to Do -->
|
||||||
<section class="section-screen">
|
<section class="section-screen bg-roboCyan/[0.02]">
|
||||||
<div class="content-width">
|
<div class="max-w-5xl w-full">
|
||||||
<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-brandCyan font-mono uppercase tracking-widest text-xs mb-6 font-bold">The Action Hub</h4>
|
<h4 class="text-roboCyan font-mono uppercase tracking-[0.3em] text-xs mb-6 font-bold">Der Activity Hub</h4>
|
||||||
<h2 class="text-6xl mb-8 leading-tight">Vom Insight <br> zur <span class="text-gradient">Tat.</span></h2>
|
<h2 class="text-6xl mb-8 leading-tight">Kein Rückspiegel. <br> Ein <span class="text-gradient">Gaspedal.</span></h2>
|
||||||
<p class="text-xl text-brandLight/70 font-light mb-10 leading-relaxed">
|
<p class="text-xl text-roboLight/70 font-light mb-10 leading-relaxed">
|
||||||
Das Dashboard ist kein Rückspiegel. Mit einem Klick zum Account, zum Sale oder zur automatisierten <strong>Rückrufbitte</strong>.
|
Das Dashboard ermöglicht direkte Interaktion. <br><br>
|
||||||
|
Highlight: Die <strong>Rückrufbitte-Automation</strong>. Mit einem Klick wird eine personalisierte Nachricht versendet.
|
||||||
</p>
|
</p>
|
||||||
<div class="glass-card p-10 bg-brandCyan/5 border-brandCyan/20">
|
<div class="glass-card p-10 border-roboCyan shadow-[0_0_30px_rgba(0,229,255,0.1)]">
|
||||||
<div class="stat-value text-white mb-2">>20%</div>
|
<div class="text-7xl font-black text-white mb-2 tracking-tighter">>20%</div>
|
||||||
<p class="text-xs uppercase tracking-widest font-bold text-brandCyan">Response-Rate</p>
|
<p class="text-xs uppercase tracking-[0.4em] font-bold text-roboCyan">Response-Rate</p>
|
||||||
<p class="text-sm text-brandLight/60 mt-4">Belegter Erfolg: Jede 5. Nachricht führt zu einer direkten Reaktion.</p>
|
<p class="text-sm text-roboLight/50 mt-6 leading-relaxed">Der Beweis: Einfache, datenbasierte Touchpoints schlagen komplexe Kampagnen.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="reveal">
|
<div class="reveal">
|
||||||
<div class="glass-card p-12 border-brandCyan/30">
|
<div class="glass-card p-12 border-white/10 relative overflow-hidden">
|
||||||
<h4 class="text-xs uppercase tracking-widest font-bold mb-6 border-b border-white/5 pb-4">Einfachheit gewinnt</h4>
|
<div class="absolute top-0 right-0 p-4">
|
||||||
<p class="text-lg text-brandLight/80 font-light leading-relaxed mb-8">
|
<span class="text-roboCyan/20 text-8xl font-black">“</span>
|
||||||
"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."
|
</div>
|
||||||
|
<p class="text-xl text-roboLight leading-relaxed mb-8 italic font-light relative z-10">
|
||||||
|
"Früher habe ich 10 Minuten gesucht, heute brauche ich 10 Sekunden für die gleiche Entscheidung. Das Dashboard ist mein neues Zuhause im Vertrieb."
|
||||||
</p>
|
</p>
|
||||||
<div class="flex items-center gap-3">
|
<div class="flex items-center gap-4">
|
||||||
<div class="w-8 h-8 rounded-full bg-brandCyan/20"></div>
|
<div class="w-12 h-12 rounded-full bg-gradient-to-br from-roboCyan to-roboLogo"></div>
|
||||||
<p class="text-xs text-brandLight/40 uppercase tracking-widest">Feedback aus dem Innendienst</p>
|
<div>
|
||||||
|
<p class="text-sm font-bold uppercase tracking-widest">Stimme aus dem Team</p>
|
||||||
|
<p class="text-[10px] text-roboLight/40 uppercase">Sales Manager / Innendienst</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -293,25 +304,55 @@
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- 6. Infrastructure: Scalable Asset -->
|
<!-- 5. Red List: Early Warning -->
|
||||||
<section class="section-screen bg-brandCyan/5">
|
<section class="section-screen bg-black/20">
|
||||||
<div class="content-width text-center">
|
<div class="max-w-4xl w-full text-center">
|
||||||
<h2 class="text-5xl md:text-7xl mb-12 reveal font-head tracking-tighter uppercase">Scalable <br> Asset</h2>
|
<h2 class="text-5xl mb-10 reveal">Die Rote Liste: <br> <span class="text-red-500 uppercase font-black tracking-tighter">Gefahr erkannt.</span></h2>
|
||||||
<p class="text-xl md:text-2xl text-brandLight/70 max-w-3xl mx-auto mb-16 reveal font-light leading-relaxed">
|
<div class="glass-card p-12 reveal border-red-500/20 bg-red-500/5">
|
||||||
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.
|
<p class="text-2xl text-white font-light leading-relaxed mb-8">
|
||||||
</p>
|
Deals, die länger als 14 Tage stagnieren, werden automatisch markiert. <br>
|
||||||
<div class="h-[1px] w-24 bg-brandCyan mx-auto opacity-30 reveal"></div>
|
<strong>Das Dashboard wird zum Frühwarnsystem.</strong>
|
||||||
|
</p>
|
||||||
|
<div class="flex justify-center gap-12">
|
||||||
|
<div class="text-center">
|
||||||
|
<div class="text-4xl font-bold text-red-500">14</div>
|
||||||
|
<p class="text-[10px] uppercase tracking-widest text-white/40">Tage Stagnation</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center border-l border-white/10 pl-12">
|
||||||
|
<div class="text-4xl font-bold text-red-500">Aktion</div>
|
||||||
|
<p class="text-[10px] uppercase tracking-widest text-white/40">Sofort-Trigger</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- 7. Conclusion -->
|
<!-- 6. Summary -->
|
||||||
<section class="section-screen">
|
<section class="section-screen">
|
||||||
<div class="content-width text-center">
|
<div class="max-w-4xl w-full text-center">
|
||||||
<h2 class="text-6xl mb-12 reveal font-head">Bereit für die <br> <span class="text-gradient">nächste Stufe.</span></h2>
|
<h4 class="text-roboCyan uppercase tracking-[0.5em] mb-12 reveal text-xs">Zusammenfassung</h4>
|
||||||
<p class="text-brandLight/40 uppercase tracking-[0.3em] text-xs reveal">Vielen Dank für Ihre Aufmerksamkeit.</p>
|
<h2 class="text-6xl md:text-8xl mb-12 reveal font-black tracking-tighter">Sales <span class="text-gradient">IQ.</span></h2>
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 text-left reveal">
|
||||||
|
<div class="border-l-2 border-roboCyan pl-6">
|
||||||
|
<h5 class="font-bold mb-2">Transparenz</h5>
|
||||||
|
<p class="text-xs text-roboLight/50">Alle KPIs auf einer Seite. Keine Suche mehr.</p>
|
||||||
|
</div>
|
||||||
|
<div class="border-l-2 border-roboCyan pl-6">
|
||||||
|
<h5 class="font-bold mb-2">Geschwindigkeit</h5>
|
||||||
|
<p class="text-xs text-roboLight/50">Direkte Interaktion statt Daten-Administration.</p>
|
||||||
|
</div>
|
||||||
|
<div class="border-l-2 border-roboCyan pl-6">
|
||||||
|
<h5 class="font-bold mb-2">Skalierbarkeit</h5>
|
||||||
|
<p class="text-xs text-roboLight/50">Robuste Basis für die Expansion 2026.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<footer class="py-20 text-center opacity-30 text-xs tracking-[0.5em] uppercase">
|
||||||
|
Roboplanet © 2026 | Intelligence Driven Sales
|
||||||
|
</footer>
|
||||||
|
|
||||||
<!-- Scripts -->
|
<!-- Scripts -->
|
||||||
<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/gsap.min.js"></script>
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
|
||||||
@@ -323,13 +364,12 @@
|
|||||||
const progressBar = document.getElementById('progress-bar');
|
const progressBar = document.getElementById('progress-bar');
|
||||||
|
|
||||||
const tobyMessages = [
|
const tobyMessages = [
|
||||||
"Willkommen im Cockpit.",
|
"System bereit. Cockpit geladen.",
|
||||||
"Live-Daten schlagen Excel.",
|
"Excel ist Geschichte. Live-Daten sind die Zukunft.",
|
||||||
"Die Erfolgs-DNA im Blick.",
|
"Hier sehen wir die DNA unseres Erfolgs.",
|
||||||
"Frühwarnsystem aktiviert.",
|
"Aktion schlägt Analyse. >20% Quote!",
|
||||||
"Action: Jede 5. Mail ein Treffer.",
|
"Frühwarnsystem aktiv. Keine Deals mehr verlieren.",
|
||||||
"Bereit zum Skalieren.",
|
"Sales IQ: Wir sind bereit zum Skalieren."
|
||||||
"Das ist erst der Anfang."
|
|
||||||
];
|
];
|
||||||
|
|
||||||
function updateToby(index) {
|
function updateToby(index) {
|
||||||
@@ -344,13 +384,14 @@
|
|||||||
gsap.to(el, {
|
gsap.to(el, {
|
||||||
scrollTrigger: {
|
scrollTrigger: {
|
||||||
trigger: el,
|
trigger: el,
|
||||||
start: "top 88%",
|
start: "top 90%",
|
||||||
|
onEnter: () => el.classList.add('active'),
|
||||||
toggleActions: "play none none reverse"
|
toggleActions: "play none none reverse"
|
||||||
},
|
},
|
||||||
opacity: 1,
|
opacity: 1,
|
||||||
y: 0,
|
y: 0,
|
||||||
duration: 0.8,
|
duration: 1,
|
||||||
ease: "power2.out"
|
ease: "power3.out"
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -358,7 +399,7 @@
|
|||||||
ScrollTrigger.create({
|
ScrollTrigger.create({
|
||||||
trigger: "body",
|
trigger: "body",
|
||||||
start: "100px top",
|
start: "100px top",
|
||||||
onEnter: () => gsap.to(tobyFixed, { opacity: 1, duration: 0.5 }),
|
onEnter: () => gsap.to(tobyFixed, { opacity: 1, display: 'flex', duration: 0.5 }),
|
||||||
onLeaveBack: () => gsap.to(tobyFixed, { opacity: 0, duration: 0.5 })
|
onLeaveBack: () => gsap.to(tobyFixed, { opacity: 0, duration: 0.5 })
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -376,7 +417,12 @@
|
|||||||
gsap.to(progressBar, {
|
gsap.to(progressBar, {
|
||||||
width: "100%",
|
width: "100%",
|
||||||
ease: "none",
|
ease: "none",
|
||||||
scrollTrigger: { scrub: 0.3 }
|
scrollTrigger: {
|
||||||
|
trigger: "body",
|
||||||
|
start: "top top",
|
||||||
|
end: "bottom bottom",
|
||||||
|
scrub: 0.3
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -1,14 +1,13 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="de">
|
<html lang="de">
|
||||||
<head>
|
<head>
|
||||||
<!-- Updated: 16:26:23 -->
|
|
||||||
<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>Sales Intelligence Dashboard: Executive Briefing</title>
|
<title>Sales Cockpit: Intelligence & Yield 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>
|
||||||
<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">
|
<link href="https://fonts.googleapis.com/css2?family=Oxanium:wght@400;700;800&family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
|
||||||
<!-- Tailwind CSS -->
|
<!-- Tailwind CSS -->
|
||||||
<script src="https://cdn.tailwindcss.com"></script>
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
<script>
|
<script>
|
||||||
@@ -16,15 +15,15 @@
|
|||||||
theme: {
|
theme: {
|
||||||
extend: {
|
extend: {
|
||||||
colors: {
|
colors: {
|
||||||
brandDark: '#081734',
|
roboDark: '#081734',
|
||||||
brandLight: '#DDEEFE',
|
roboLight: '#DDEEFE',
|
||||||
brandCyan: '#00E5FF',
|
roboCyan: '#00E5FF',
|
||||||
brandGold: '#FFD42C',
|
roboYellow: '#FFD42C',
|
||||||
brandSlate: '#1E293B'
|
roboLogo: '#30BDEA'
|
||||||
},
|
},
|
||||||
fontFamily: {
|
fontFamily: {
|
||||||
'head': ['Space Grotesk', 'sans-serif'],
|
'head': ['Oxanium', 'sans-serif'],
|
||||||
'body': ['Inter', 'sans-serif']
|
'body': ['Poppins', 'sans-serif']
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -34,17 +33,17 @@
|
|||||||
body {
|
body {
|
||||||
background-color: #081734;
|
background-color: #081734;
|
||||||
color: #DDEEFE;
|
color: #DDEEFE;
|
||||||
font-family: 'Inter', sans-serif;
|
font-family: 'Poppins', sans-serif;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
}
|
}
|
||||||
h1, h2, h3, h4 { font-family: 'Space Grotesk', sans-serif; font-weight: 700; }
|
h1, h2, h3, h4 { font-family: 'Oxanium', sans-serif; font-weight: 700; }
|
||||||
|
|
||||||
.glass-card {
|
.glass-card {
|
||||||
background: rgba(221, 238, 254, 0.02);
|
background: rgba(221, 238, 254, 0.03);
|
||||||
backdrop-filter: blur(25px);
|
backdrop-filter: blur(20px);
|
||||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
border: 1px solid rgba(0, 229, 255, 0.1);
|
||||||
border-radius: 28px;
|
border-radius: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.section-screen {
|
.section-screen {
|
||||||
@@ -57,35 +56,36 @@
|
|||||||
padding: 4rem 2rem;
|
padding: 4rem 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Toby Animation */
|
/* Toby Styles */
|
||||||
.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); } }
|
|
||||||
|
|
||||||
#toby-fixed {
|
#toby-fixed {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
bottom: 40px;
|
bottom: 30px;
|
||||||
right: 40px;
|
right: 30px;
|
||||||
width: 160px;
|
width: 160px;
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
pointer-events: none;
|
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
display: flex;
|
pointer-events: none;
|
||||||
flex-direction: column;
|
transition: opacity 0.5s ease;
|
||||||
align-items: center;
|
}
|
||||||
|
.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); }
|
||||||
}
|
}
|
||||||
|
|
||||||
#toby-bubble {
|
#toby-bubble {
|
||||||
background: #FFF;
|
background: #DDEEFE;
|
||||||
color: #081734;
|
color: #081734;
|
||||||
padding: 0.85rem 1.25rem;
|
padding: 0.75rem 1rem;
|
||||||
border-radius: 14px;
|
border-radius: 12px;
|
||||||
font-size: 0.8rem;
|
font-size: 0.85rem;
|
||||||
font-weight: 600;
|
font-weight: 700;
|
||||||
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.4);
|
box-shadow: 0 10px 30px rgba(0,229,255,0.3);
|
||||||
max-width: 200px;
|
min-width: 180px;
|
||||||
}
|
}
|
||||||
#toby-bubble::after {
|
#toby-bubble::after {
|
||||||
content: '';
|
content: '';
|
||||||
@@ -95,23 +95,7 @@
|
|||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
border-width: 8px 8px 0;
|
border-width: 8px 8px 0;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
border-color: #FFF transparent transparent transparent;
|
border-color: #DDEEFE transparent transparent transparent;
|
||||||
}
|
|
||||||
|
|
||||||
/* Custom Progress Bar */
|
|
||||||
#progress-container {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 3px;
|
|
||||||
background: rgba(255,255,255,0.03);
|
|
||||||
z-index: 1000;
|
|
||||||
}
|
|
||||||
#progress-bar {
|
|
||||||
height: 100%;
|
|
||||||
width: 0%;
|
|
||||||
background: #00E5FF;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-gradient {
|
.text-gradient {
|
||||||
@@ -120,172 +104,199 @@
|
|||||||
-webkit-text-fill-color: transparent;
|
-webkit-text-fill-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
.stat-value { font-size: 4.5rem; font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
|
.reveal { opacity: 0; transform: translateY(30px); }
|
||||||
|
|
||||||
.content-width { max-width: 1100px; width: 100%; }
|
/* Progress Bar */
|
||||||
.reveal { opacity: 0; transform: translateY(25px); }
|
#progress-container {
|
||||||
|
position: fixed;
|
||||||
/* Dashboard Elements Mocks */
|
top: 0;
|
||||||
.mock-kpi {
|
left: 0;
|
||||||
border-left: 4px solid #00E5FF;
|
width: 100%;
|
||||||
padding: 1.5rem;
|
height: 4px;
|
||||||
background: rgba(255,255,255,0.02);
|
background: rgba(255,255,255,0.05);
|
||||||
|
z-index: 1000;
|
||||||
}
|
}
|
||||||
|
#progress-bar {
|
||||||
|
height: 100%;
|
||||||
|
width: 0%;
|
||||||
|
background: #00E5FF;
|
||||||
|
box-shadow: 0 0 10px #00E5FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Charts Mocks */
|
||||||
|
.chart-bar {
|
||||||
|
height: 0;
|
||||||
|
transition: height 1.5s cubic-bezier(0.17, 0.67, 0.83, 0.67);
|
||||||
|
}
|
||||||
|
.reveal.active .chart-bar { height: var(--h); }
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body class="antialiased">
|
<body class="antialiased">
|
||||||
|
|
||||||
<div id="progress-container"><div id="progress-bar"></div></div>
|
<div id="progress-container">
|
||||||
|
<div id="progress-bar"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Toby Fixed -->
|
<!-- Toby Fixed -->
|
||||||
<div id="toby-fixed" class="toby-float">
|
<div id="toby-fixed" class="toby-float">
|
||||||
<div id="toby-bubble">Präzision statt Vermutung.</div>
|
<div id="toby-bubble">Initialisiere Cockpit...</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,iVBORw0KGgoAAAANSUhEUgAAB9AAAAc2CAYAAABaJTzmAAAACXBIWXMAABsRAAAbEQEEnGAvAAAEvmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFjY2V0IGJlZ2luPSfvu78nIGlkPSdXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQnPz4KPHg6eG1wbWV0YSB4bWxuczp4PSdhZG9iZTpuczptZXRhLyc+CjxyZGY6UkRGIHhtbG5zOnJkZj0naHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyc+CgogPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9JycKICB4bWxuczpBdHRyaWI9J2h0dHA6Ly9ucy5hdHRyaWJ1dGlvbi5jb20vYWRzLzEuMC8nPgogIDxBdHRyaWI6QWRzPgogICA8cmRmOlNlcT4KICAgIDxyZGY6bGkgcmRmOnBhcnNlVHlwZT0nUmVzb3VyY2UnPgogICAgIDxBdHRyaWI6Q3JlYXRlZD4yMDI2LTAxLTExPC9BdHRyaWI6Q3JlYXRlZD4KICAgICA8QXR0cmliOkV4dExtZD4zZjE1OTM5Ny04MWM3LTQyM2ItOWViMy02ODYyYzAxZjM4NGI8L0F0dHJpYjpFeHRJZD4KICAgICA8QXR0cmliOkZiSWQ+NTI1MjY1OTE0MTc5NTgwPC9BdHRyaWI6RmJJZD4KICAgICA8QXR0cmliOlRvdWNoVHlwZT4yPC9BdHRyaWI6VG91Y2hUeXBlPgogICAgPC9yZGY6bGk+CiAgIDwvcmRmOlNlcT4KICB8L0F0dHJpYjpBZHM+CiA8L3JkZjpEZXNjcmlwdGlvbj4KCiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0nJwogIHhtbG5zOmRjPSdodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyc+CiAgPGRjOnRpdGxlPgogICA8cmRmOkFsdD4KICAgIDxyZGY6bGkgeG1sOmxhbmc9J3gtZGVmYXVsdCc+Um9ib1BsYW5ldF9BdmF0YXJfaGVsbGJsYXUuYWkgLSAxPC9yZGY6bGk+CiAgIDwvcmRmOkFsdD4KICA8L2RjOnRpdGxlPgogPC9yZGY6RGVzY3JpcHRpb24+CgogPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9JycKICB4bWxuczpwZGY9J2h0dHA6Ly9ucy5hZG9iZS5jb20vcGRmLzEuMy8nPgogIDxwZGY6QXV0aG9yPldhY2tsZXJHcm91cDwvcGRmOkF1dGhvcm4+CiA8L3JkZjpEZXNjcmlwdGlvbj4KCiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0nJwogIHhtbG5zOnhtcD0naHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyc+CiAgPHhtcDpDcmVhdG9yVG9vbD5DYW52YSBkb2M9REFHLVN1Y0tTeXMgdXNlcj1VQUVUOG1KY3lhSSBicmFuZD1CQUVUOGd0OERsTSB0ZW1wbGF0ZT08L3htcDpDcmVhdG9yVG9vbD4KIDwvcmRmOkRlc2NyaXB0aW9uPgo8L3JkZjpSREY+CjwveDp4bXBtZXRhPgo8P3hwYWNrZXQgZW5kPSdyJz8+qsA63gAACAASURBVHic7N15uG5z/fj/zx+/6/urvqU5aVCSSFGhyJjMZAghY6aMoQxJEioaKBkjkTEJERWJFAopY6nOWvc+xzmpnNa695n4616v73qvc/o0knOcc9733vvxvK7HtU/lCnvf+17v4V7v9T//I0mSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmS... [truncated]" alt="Toby" class="w-full opacity-80">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 1. Intro: The Intelligence Cockpit -->
|
<!-- 1. Intro Screen -->
|
||||||
<section class="section-screen">
|
<section class="section-screen">
|
||||||
<div class="content-width text-center">
|
<div class="max-w-4xl w-full text-center">
|
||||||
<h4 class="text-brandCyan uppercase tracking-[0.5em] mb-8 reveal font-head text-xs">Executive Summary</h4>
|
<h4 class="text-roboCyan uppercase tracking-[0.5em] mb-8 reveal text-sm">Board Briefing Q2 / 2026</h4>
|
||||||
<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>
|
<h1 class="text-7xl md:text-8xl font-black mb-10 reveal leading-none tracking-tighter">Sales <br> <span class="text-gradient uppercase">Cockpit</span></h1>
|
||||||
<p class="text-xl md:text-2xl text-brandLight/40 max-w-2xl mx-auto mb-16 reveal font-body font-light">
|
<p class="text-xl md:text-2xl text-roboLight/40 max-w-2xl mx-auto mb-16 reveal font-light">
|
||||||
Transparenz auf Knopfdruck. <br>
|
Vom statischen Archiv zum aktiven Gaspedal. <br>
|
||||||
Vom statischen Archiv zum aktiven Steuerungs-Hub.
|
Echtzeit-Steuerung für Roboplanet.
|
||||||
</p>
|
</p>
|
||||||
<div class="flex justify-center gap-6 reveal">
|
<div class="flex justify-center gap-6 reveal">
|
||||||
<div class="h-[1px] w-12 bg-brandCyan/40 self-center"></div>
|
<div class="h-[1px] w-12 bg-roboCyan/40 self-center"></div>
|
||||||
<span class="text-brandCyan font-mono uppercase text-xs tracking-widest">30 Tage Live-Betrieb</span>
|
<span class="text-roboCyan font-mono uppercase text-xs tracking-widest">30 Tage Live-Betrieb</span>
|
||||||
<div class="h-[1px] w-12 bg-brandCyan/40 self-center"></div>
|
<div class="h-[1px] w-12 bg-roboCyan/40 self-center"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- 2. The Efficiency: Adieu Excel -->
|
<!-- 2. Efficiency: Adieu Excel -->
|
||||||
<section class="section-screen bg-brandSlate/10">
|
<section class="section-screen bg-black/10">
|
||||||
<div class="content-width">
|
<div class="max-w-5xl w-full">
|
||||||
<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">
|
||||||
<h2 class="text-5xl mb-8">Echte Daten statt manueller Berichte.</h2>
|
<h2 class="text-5xl mb-8 leading-tight">Die Stunde, <br> die wir uns <span class="text-roboCyan">zurückholen.</span></h2>
|
||||||
<p class="text-lg text-brandLight/60 mb-10 font-light leading-relaxed">
|
<p class="text-xl text-roboLight/60 font-light leading-relaxed mb-10">
|
||||||
Bisher kostete die Aufbereitung der Pipeline eine Stunde pro Woche. Das Dashboard liefert diese Erkenntnisse in <strong>Echtzeit</strong> – fehlerfrei und interaktiv.
|
Früher: Manuelle Excel-Listen, wöchentliche Datenpflege, Blindflug. <br><br>
|
||||||
|
Heute: <strong>Vollautomatisches Dashboard.</strong> Der Innendienst spart 4-6 Stunden pro Monat – Zeit, die nun direkt in den Verkauf fließt.
|
||||||
</p>
|
</p>
|
||||||
<div class="grid grid-cols-2 gap-4">
|
<div class="flex gap-4">
|
||||||
<div class="mock-kpi">
|
<div class="glass-card px-6 py-4 border-roboCyan/30">
|
||||||
<p class="text-3xl font-bold text-white">-1h</p>
|
<span class="text-3xl font-bold text-white">100%</span>
|
||||||
<p class="text-[10px] uppercase tracking-widest text-brandLight/50 mt-1">Manueller Aufwand / Woche</p>
|
<p class="text-[10px] uppercase tracking-widest text-roboCyan mt-1">Automatisierung</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="mock-kpi">
|
<div class="glass-card px-6 py-4 border-roboCyan/30">
|
||||||
<p class="text-3xl font-bold text-brandCyan">Live</p>
|
<span class="text-3xl font-bold text-white">-1h</span>
|
||||||
<p class="text-[10px] uppercase tracking-widest text-brandLight/50 mt-1">Pipeline-Truth 24/7</p>
|
<p class="text-[10px] uppercase tracking-widest text-roboCyan mt-1">pro Woche / Sales</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="glass-card p-12 reveal">
|
<div class="reveal relative">
|
||||||
<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>
|
<div class="glass-card p-8 rotate-3 shadow-2xl bg-white/5 border-white/10">
|
||||||
<p class="text-xl text-white font-light leading-relaxed mb-6">
|
<div class="space-y-4 opacity-20">
|
||||||
"Automatisierte Erkennung von Dubletten und Varianten – eine Transparenz, die SuperOffice in dieser Form nicht bietet."
|
<div class="h-4 w-full bg-white/40 rounded"></div>
|
||||||
</p>
|
<div class="h-4 w-3/4 bg-white/40 rounded"></div>
|
||||||
<div class="w-16 h-1 bg-brandCyan"></div>
|
<div class="h-4 w-full bg-white/40 rounded"></div>
|
||||||
|
</div>
|
||||||
|
<div class="absolute inset-0 flex items-center justify-center">
|
||||||
|
<span class="text-roboCyan text-8xl font-black rotate-[-15deg] drop-shadow-[0_0_15px_rgba(0,229,255,0.8)]">EXCEL ADIEU</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- 3. Transparency: The Winning DNA -->
|
<!-- 3. Winning DNA: Deep Insights -->
|
||||||
<section class="section-screen">
|
<section class="section-screen">
|
||||||
<div class="content-width">
|
<div class="max-w-6xl w-full">
|
||||||
<div class="text-center mb-20 reveal">
|
<div class="text-center mb-20 reveal">
|
||||||
<h2 class="text-5xl mb-6">Die Winning DNA</h2>
|
<h2 class="text-6xl mb-6 uppercase tracking-tighter">Die Winning <span class="text-roboCyan">DNA</span></h2>
|
||||||
<p class="text-xl text-brandLight/40 font-light">Tiefe Einblicke in die Mechanik unseres Erfolgs.</p>
|
<p class="text-xl text-roboLight/40 font-light">Was SuperOffice uns verschweigt, macht das Dashboard sichtbar.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 reveal">
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-12">
|
||||||
<div class="glass-card p-10 hover:bg-brandCyan/[0.03] transition-all">
|
<!-- Channel Chart -->
|
||||||
<p class="text-brandCyan font-mono text-[10px] uppercase mb-4">Kanäle</p>
|
<div class="glass-card p-10 reveal">
|
||||||
<h4 class="text-lg mb-4">Winning Channels</h4>
|
<h4 class="text-lg mb-8 uppercase tracking-widest text-roboCyan">Top Kanäle (Konversion)</h4>
|
||||||
<p class="text-sm text-brandLight/50 font-light leading-relaxed">Präzise Auswertung: Welche Lead-Quelle konvertiert wirklich?</p>
|
<div class="flex items-end justify-between h-64 gap-4 px-4">
|
||||||
|
<div class="flex flex-col items-center flex-1 gap-2">
|
||||||
|
<div class="chart-bar w-full bg-roboCyan rounded-t-lg shadow-[0_0_20px_rgba(0,229,255,0.3)]" style="--h: 85%;"></div>
|
||||||
|
<span class="text-[10px] uppercase tracking-widest text-roboLight/50 mt-2">LinkedIn</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col items-center flex-1 gap-2">
|
||||||
|
<div class="chart-bar w-full bg-roboCyan/60 rounded-t-lg" style="--h: 45%;"></div>
|
||||||
|
<span class="text-[10px] uppercase tracking-widest text-roboLight/50 mt-2">Cold Call</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col items-center flex-1 gap-2">
|
||||||
|
<div class="chart-bar w-full bg-roboCyan/80 rounded-t-lg" style="--h: 65%;"></div>
|
||||||
|
<span class="text-[10px] uppercase tracking-widest text-roboLight/50 mt-2">Email MA</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col items-center flex-1 gap-2">
|
||||||
|
<div class="chart-bar w-full bg-roboCyan/40 rounded-t-lg" style="--h: 30%;"></div>
|
||||||
|
<span class="text-[10px] uppercase tracking-widest text-roboLight/50 mt-2">Referral</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</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 -->
|
<!-- Loss Analysis -->
|
||||||
<section class="section-screen bg-white/[0.01]">
|
<div class="glass-card p-10 reveal">
|
||||||
<div class="content-width">
|
<h4 class="text-lg mb-8 uppercase tracking-widest text-roboCyan">Warum wir verlieren</h4>
|
||||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-20 items-center">
|
<div class="space-y-6">
|
||||||
<div class="reveal relative order-2 md:order-1">
|
<div>
|
||||||
<div class="glass-card p-1 relative overflow-hidden border-red-500/20">
|
<div class="flex justify-between text-xs mb-2 uppercase tracking-widest">
|
||||||
<div class="bg-red-500/10 p-10">
|
<span>Budget / Preis</span>
|
||||||
<div class="flex justify-between items-center mb-8">
|
<span class="text-roboCyan">42%</span>
|
||||||
<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>
|
||||||
<div class="space-y-4">
|
<div class="h-2 w-full bg-white/5 rounded-full overflow-hidden">
|
||||||
<div class="h-12 bg-white/5 rounded border border-white/5 flex items-center px-4 justify-between">
|
<div class="h-full bg-roboCyan chart-bar" style="--h: 100%; width: 42%;"></div>
|
||||||
<div class="w-1/2 h-2 bg-white/20 rounded"></div>
|
</div>
|
||||||
<div class="w-12 h-2 bg-red-500/40 rounded"></div>
|
</div>
|
||||||
</div>
|
<div>
|
||||||
<div class="h-12 bg-white/5 rounded border border-white/5 flex items-center px-4 justify-between">
|
<div class="flex justify-between text-xs mb-2 uppercase tracking-widest">
|
||||||
<div class="w-1/2 h-2 bg-white/20 rounded"></div>
|
<span>Timing (Projekt verschoben)</span>
|
||||||
<div class="w-12 h-2 bg-red-500/40 rounded"></div>
|
<span class="text-roboCyan">28%</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="h-12 bg-white/5 rounded border border-white/5 flex items-center px-4 justify-between">
|
<div class="h-2 w-full bg-white/5 rounded-full overflow-hidden">
|
||||||
<div class="w-1/2 h-2 bg-white/20 rounded"></div>
|
<div class="h-full bg-roboCyan/70 chart-bar" style="--h: 100%; width: 28%;"></div>
|
||||||
<div class="w-12 h-2 bg-red-500/40 rounded"></div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="flex justify-between text-xs mb-2 uppercase tracking-widest">
|
||||||
|
<span>Kein Bedarf (Infrastruktur)</span>
|
||||||
|
<span class="text-roboCyan">15%</span>
|
||||||
|
</div>
|
||||||
|
<div class="h-2 w-full bg-white/5 rounded-full overflow-hidden">
|
||||||
|
<div class="h-full bg-roboCyan/40 chart-bar" style="--h: 100%; width: 15%;"></div>
|
||||||
</div>
|
</div>
|
||||||
</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>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- 5. Action Hub: From Insight to Interaction -->
|
<!-- 4. Action Hub: From View to Do -->
|
||||||
<section class="section-screen">
|
<section class="section-screen bg-roboCyan/[0.02]">
|
||||||
<div class="content-width">
|
<div class="max-w-5xl w-full">
|
||||||
<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-brandCyan font-mono uppercase tracking-widest text-xs mb-6 font-bold">The Action Hub</h4>
|
<h4 class="text-roboCyan font-mono uppercase tracking-[0.3em] text-xs mb-6 font-bold">Der Activity Hub</h4>
|
||||||
<h2 class="text-6xl mb-8 leading-tight">Vom Insight <br> zur <span class="text-gradient">Tat.</span></h2>
|
<h2 class="text-6xl mb-8 leading-tight">Kein Rückspiegel. <br> Ein <span class="text-gradient">Gaspedal.</span></h2>
|
||||||
<p class="text-xl text-brandLight/70 font-light mb-10 leading-relaxed">
|
<p class="text-xl text-roboLight/70 font-light mb-10 leading-relaxed">
|
||||||
Das Dashboard ist kein Rückspiegel. Mit einem Klick zum Account, zum Sale oder zur automatisierten <strong>Rückrufbitte</strong>.
|
Das Dashboard ermöglicht direkte Interaktion. <br><br>
|
||||||
|
Highlight: Die <strong>Rückrufbitte-Automation</strong>. Mit einem Klick wird eine personalisierte Nachricht versendet.
|
||||||
</p>
|
</p>
|
||||||
<div class="glass-card p-10 bg-brandCyan/5 border-brandCyan/20">
|
<div class="glass-card p-10 border-roboCyan shadow-[0_0_30px_rgba(0,229,255,0.1)]">
|
||||||
<div class="stat-value text-white mb-2">>20%</div>
|
<div class="text-7xl font-black text-white mb-2 tracking-tighter">>20%</div>
|
||||||
<p class="text-xs uppercase tracking-widest font-bold text-brandCyan">Response-Rate</p>
|
<p class="text-xs uppercase tracking-[0.4em] font-bold text-roboCyan">Response-Rate</p>
|
||||||
<p class="text-sm text-brandLight/60 mt-4">Belegter Erfolg: Jede 5. Nachricht führt zu einer direkten Reaktion.</p>
|
<p class="text-sm text-roboLight/50 mt-6 leading-relaxed">Der Beweis: Einfache, datenbasierte Touchpoints schlagen komplexe Kampagnen.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="reveal">
|
<div class="reveal">
|
||||||
<div class="glass-card p-12 border-brandCyan/30">
|
<div class="glass-card p-12 border-white/10 relative overflow-hidden">
|
||||||
<h4 class="text-xs uppercase tracking-widest font-bold mb-6 border-b border-white/5 pb-4">Einfachheit gewinnt</h4>
|
<div class="absolute top-0 right-0 p-4">
|
||||||
<p class="text-lg text-brandLight/80 font-light leading-relaxed mb-8">
|
<span class="text-roboCyan/20 text-8xl font-black">“</span>
|
||||||
"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."
|
</div>
|
||||||
|
<p class="text-xl text-roboLight leading-relaxed mb-8 italic font-light relative z-10">
|
||||||
|
"Früher habe ich 10 Minuten gesucht, heute brauche ich 10 Sekunden für die gleiche Entscheidung. Das Dashboard ist mein neues Zuhause im Vertrieb."
|
||||||
</p>
|
</p>
|
||||||
<div class="flex items-center gap-3">
|
<div class="flex items-center gap-4">
|
||||||
<div class="w-8 h-8 rounded-full bg-brandCyan/20"></div>
|
<div class="w-12 h-12 rounded-full bg-gradient-to-br from-roboCyan to-roboLogo"></div>
|
||||||
<p class="text-xs text-brandLight/40 uppercase tracking-widest">Feedback aus dem Innendienst</p>
|
<div>
|
||||||
|
<p class="text-sm font-bold uppercase tracking-widest">Stimme aus dem Team</p>
|
||||||
|
<p class="text-[10px] text-roboLight/40 uppercase">Sales Manager / Innendienst</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -293,25 +304,55 @@
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- 6. Infrastructure: Scalable Asset -->
|
<!-- 5. Red List: Early Warning -->
|
||||||
<section class="section-screen bg-brandCyan/5">
|
<section class="section-screen bg-black/20">
|
||||||
<div class="content-width text-center">
|
<div class="max-w-4xl w-full text-center">
|
||||||
<h2 class="text-5xl md:text-7xl mb-12 reveal font-head tracking-tighter uppercase">Scalable <br> Asset</h2>
|
<h2 class="text-5xl mb-10 reveal">Die Rote Liste: <br> <span class="text-red-500 uppercase font-black tracking-tighter">Gefahr erkannt.</span></h2>
|
||||||
<p class="text-xl md:text-2xl text-brandLight/70 max-w-3xl mx-auto mb-16 reveal font-light leading-relaxed">
|
<div class="glass-card p-12 reveal border-red-500/20 bg-red-500/5">
|
||||||
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.
|
<p class="text-2xl text-white font-light leading-relaxed mb-8">
|
||||||
</p>
|
Deals, die länger als 14 Tage stagnieren, werden automatisch markiert. <br>
|
||||||
<div class="h-[1px] w-24 bg-brandCyan mx-auto opacity-30 reveal"></div>
|
<strong>Das Dashboard wird zum Frühwarnsystem.</strong>
|
||||||
|
</p>
|
||||||
|
<div class="flex justify-center gap-12">
|
||||||
|
<div class="text-center">
|
||||||
|
<div class="text-4xl font-bold text-red-500">14</div>
|
||||||
|
<p class="text-[10px] uppercase tracking-widest text-white/40">Tage Stagnation</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center border-l border-white/10 pl-12">
|
||||||
|
<div class="text-4xl font-bold text-red-500">Aktion</div>
|
||||||
|
<p class="text-[10px] uppercase tracking-widest text-white/40">Sofort-Trigger</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- 7. Conclusion -->
|
<!-- 6. Summary -->
|
||||||
<section class="section-screen">
|
<section class="section-screen">
|
||||||
<div class="content-width text-center">
|
<div class="max-w-4xl w-full text-center">
|
||||||
<h2 class="text-6xl mb-12 reveal font-head">Bereit für die <br> <span class="text-gradient">nächste Stufe.</span></h2>
|
<h4 class="text-roboCyan uppercase tracking-[0.5em] mb-12 reveal text-xs">Zusammenfassung</h4>
|
||||||
<p class="text-brandLight/40 uppercase tracking-[0.3em] text-xs reveal">Vielen Dank für Ihre Aufmerksamkeit.</p>
|
<h2 class="text-6xl md:text-8xl mb-12 reveal font-black tracking-tighter">Sales <span class="text-gradient">IQ.</span></h2>
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 text-left reveal">
|
||||||
|
<div class="border-l-2 border-roboCyan pl-6">
|
||||||
|
<h5 class="font-bold mb-2">Transparenz</h5>
|
||||||
|
<p class="text-xs text-roboLight/50">Alle KPIs auf einer Seite. Keine Suche mehr.</p>
|
||||||
|
</div>
|
||||||
|
<div class="border-l-2 border-roboCyan pl-6">
|
||||||
|
<h5 class="font-bold mb-2">Geschwindigkeit</h5>
|
||||||
|
<p class="text-xs text-roboLight/50">Direkte Interaktion statt Daten-Administration.</p>
|
||||||
|
</div>
|
||||||
|
<div class="border-l-2 border-roboCyan pl-6">
|
||||||
|
<h5 class="font-bold mb-2">Skalierbarkeit</h5>
|
||||||
|
<p class="text-xs text-roboLight/50">Robuste Basis für die Expansion 2026.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<footer class="py-20 text-center opacity-30 text-xs tracking-[0.5em] uppercase">
|
||||||
|
Roboplanet © 2026 | Intelligence Driven Sales
|
||||||
|
</footer>
|
||||||
|
|
||||||
<!-- Scripts -->
|
<!-- Scripts -->
|
||||||
<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/gsap.min.js"></script>
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
|
||||||
@@ -323,13 +364,12 @@
|
|||||||
const progressBar = document.getElementById('progress-bar');
|
const progressBar = document.getElementById('progress-bar');
|
||||||
|
|
||||||
const tobyMessages = [
|
const tobyMessages = [
|
||||||
"Willkommen im Cockpit.",
|
"System bereit. Cockpit geladen.",
|
||||||
"Live-Daten schlagen Excel.",
|
"Excel ist Geschichte. Live-Daten sind die Zukunft.",
|
||||||
"Die Erfolgs-DNA im Blick.",
|
"Hier sehen wir die DNA unseres Erfolgs.",
|
||||||
"Frühwarnsystem aktiviert.",
|
"Aktion schlägt Analyse. >20% Quote!",
|
||||||
"Action: Jede 5. Mail ein Treffer.",
|
"Frühwarnsystem aktiv. Keine Deals mehr verlieren.",
|
||||||
"Bereit zum Skalieren.",
|
"Sales IQ: Wir sind bereit zum Skalieren."
|
||||||
"Das ist erst der Anfang."
|
|
||||||
];
|
];
|
||||||
|
|
||||||
function updateToby(index) {
|
function updateToby(index) {
|
||||||
@@ -344,13 +384,14 @@
|
|||||||
gsap.to(el, {
|
gsap.to(el, {
|
||||||
scrollTrigger: {
|
scrollTrigger: {
|
||||||
trigger: el,
|
trigger: el,
|
||||||
start: "top 88%",
|
start: "top 90%",
|
||||||
|
onEnter: () => el.classList.add('active'),
|
||||||
toggleActions: "play none none reverse"
|
toggleActions: "play none none reverse"
|
||||||
},
|
},
|
||||||
opacity: 1,
|
opacity: 1,
|
||||||
y: 0,
|
y: 0,
|
||||||
duration: 0.8,
|
duration: 1,
|
||||||
ease: "power2.out"
|
ease: "power3.out"
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -358,7 +399,7 @@
|
|||||||
ScrollTrigger.create({
|
ScrollTrigger.create({
|
||||||
trigger: "body",
|
trigger: "body",
|
||||||
start: "100px top",
|
start: "100px top",
|
||||||
onEnter: () => gsap.to(tobyFixed, { opacity: 1, duration: 0.5 }),
|
onEnter: () => gsap.to(tobyFixed, { opacity: 1, display: 'flex', duration: 0.5 }),
|
||||||
onLeaveBack: () => gsap.to(tobyFixed, { opacity: 0, duration: 0.5 })
|
onLeaveBack: () => gsap.to(tobyFixed, { opacity: 0, duration: 0.5 })
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -376,7 +417,12 @@
|
|||||||
gsap.to(progressBar, {
|
gsap.to(progressBar, {
|
||||||
width: "100%",
|
width: "100%",
|
||||||
ease: "none",
|
ease: "none",
|
||||||
scrollTrigger: { scrub: 0.3 }
|
scrollTrigger: {
|
||||||
|
trigger: "body",
|
||||||
|
start: "top top",
|
||||||
|
end: "bottom bottom",
|
||||||
|
scrub: 0.3
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
Reference in New Issue
Block a user