425 lines
19 KiB
HTML
425 lines
19 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 -->
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<!-- GSAP & ScrollTrigger -->
|
||
<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;
|
||
--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 */
|
||
.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; /* Wider for bigger headlines */
|
||
z-index: 10;
|
||
}
|
||
|
||
.visual-area {
|
||
flex: 1;
|
||
position: relative;
|
||
height: 600px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end; /* Strictly Right Aligned */
|
||
}
|
||
|
||
/* Screenshot Styling */
|
||
.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;
|
||
opacity: 0;
|
||
transform: translateX(50px);
|
||
}
|
||
|
||
.screenshot-img {
|
||
width: 100%;
|
||
height: auto;
|
||
display: block;
|
||
}
|
||
|
||
.system-label {
|
||
position: absolute;
|
||
top: -40px;
|
||
right: 0;
|
||
font-size: 10px;
|
||
font-weight: 800;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.3em;
|
||
color: #94a3b8;
|
||
}
|
||
|
||
/* Scrollytelling Transitions */
|
||
.visual-element {
|
||
position: absolute;
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.visual-element.active {
|
||
pointer-events: auto;
|
||
}
|
||
|
||
.progress-bar {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
height: 6px;
|
||
background: var(--robo-blue);
|
||
z-index: 110;
|
||
}
|
||
|
||
/* Solid 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;
|
||
}
|
||
|
||
.logo-img { width: 14rem; }
|
||
|
||
h2 {
|
||
letter-spacing: -0.05em;
|
||
line-height: 0.9;
|
||
font-size: 7.5rem; /* Massive C-Level Headlines */
|
||
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-card {
|
||
background: white;
|
||
border: 1px solid #e2e8f0;
|
||
border-radius: 1.5rem;
|
||
padding: 2.5rem;
|
||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
|
||
width: 100%;
|
||
max-width: 450px;
|
||
}
|
||
|
||
.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; transition: width 1.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="progress-bar" id="progressBar" style="width: 0%;"></div>
|
||
|
||
<!-- Header -->
|
||
<header>
|
||
<img src="ROBOPLANET-Logo-2024_blue-black_4c.svg" alt="RoboPlanet Logo" class="logo-img">
|
||
<div class="text-[11px] font-bold uppercase tracking-[0.3em] text-slate-400">Board Presentation | Executive Briefing</div>
|
||
</header>
|
||
|
||
<main id="main" class="pt-32">
|
||
|
||
<!-- Slide 1: Ausgangslage (SuperOffice) -->
|
||
<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 operativ nicht schnell genug nutzbar.
|
||
</p>
|
||
</div>
|
||
<div class="visual-area">
|
||
<div class="visual-element active" id="visual1">
|
||
<div class="screenshot-frame border-slate-200">
|
||
<span class="system-label">Standard CRM View (Fragmentiert)</span>
|
||
<img src="Screenshot 2026-06-02 085018.png" alt="SuperOffice Screenshot" class="screenshot-img">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Slide 2: Das Cockpit (DGS GmbH Dashboard) -->
|
||
<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-12">
|
||
Alles Wesentliche auf einer Seite. <br>
|
||
Sofortige operative Klarheit.
|
||
</p>
|
||
<div class="bg-blue-600 text-white p-10 rounded-2xl shadow-xl transform -rotate-1">
|
||
<p class="text-3xl font-bold italic">"Eine Seite statt zehn Klicks."</p>
|
||
</div>
|
||
</div>
|
||
<div class="visual-area">
|
||
<div class="visual-element" id="visual2">
|
||
<div class="screenshot-frame border-slate-800 shadow-[0_40px_80px_rgba(0,0,0,0.3)]">
|
||
<span class="system-label">RoboPlanet Sales Intelligence (Live)</span>
|
||
<img src="Screenshot 2026-06-02 084142.png" alt="DGS Dashboard Screenshot" class="screenshot-img">
|
||
</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-12 rounded-[3rem] border border-slate-100">
|
||
<div class="text-8xl font-black text-blue-600 mb-4">~20%</div>
|
||
<div class="text-2xl font-bold text-slate-800">Response Quote</div>
|
||
<p class="text-xl text-slate-500 mt-6 italic">Erster Proof-of-Value innerhalb von 10 Tagen.</p>
|
||
</div>
|
||
</div>
|
||
<div class="visual-area">
|
||
<div class="visual-element" id="visual3">
|
||
<div class="kpi-card border-blue-200">
|
||
<div class="flex items-center gap-6 mb-10">
|
||
<div class="w-16 h-16 bg-blue-600 rounded-full flex items-center justify-center text-white shadow-xl">
|
||
<svg class="w-10 h-10" fill="currentColor" viewBox="0 0 20 20"><path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z"></path></svg>
|
||
</div>
|
||
<div class="font-bold text-2xl italic text-slate-800">Bulk-Rückrufbitte</div>
|
||
</div>
|
||
<div class="kpi-bar-bg">
|
||
<div id="bar3" class="kpi-bar-fill bg-blue-600"></div>
|
||
</div>
|
||
<div class="flex justify-between text-xs font-bold text-slate-400 uppercase mt-6 tracking-widest">
|
||
<span>70 Kontakte</span>
|
||
<span class="text-blue-700">14 Reaktionen</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Slide 4: Ehrliche Pipeline -->
|
||
<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>
|
||
<p class="text-2xl leading-relaxed mb-12">
|
||
Gute Steuerung beginnt mit der Realität. <br>Bereinigung statt Scheingenauigkeit.
|
||
</p>
|
||
<div class="kpi-card border-red-100 bg-red-50/20">
|
||
<div class="text-7xl font-black text-red-600 mb-2">+44%</div>
|
||
<div class="text-2xl 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-3xl shadow-2xl w-[500px]">
|
||
<div class="space-y-12">
|
||
<div>
|
||
<div class="flex justify-between text-sm font-bold mb-4"><span class="text-slate-400">MÄRZ 26</span><span class="text-slate-800 font-black">1,42 Mio. €</span></div>
|
||
<div class="kpi-bar-bg"><div id="bar4a" class="kpi-bar-fill bg-slate-300"></div></div>
|
||
</div>
|
||
<div>
|
||
<div class="flex justify-between text-sm font-bold mb-4 text-red-600"><span class="uppercase">MAI 26</span><span class="font-black">2,05 Mio. €</span></div>
|
||
<div class="kpi-bar-bg"><div id="bar4b" class="kpi-bar-fill bg-red-600 shadow-lg"></div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Slide 5: Management Cockpit -->
|
||
<section class="slide" id="slide5">
|
||
<div class="split-layout">
|
||
<div class="story-content">
|
||
<span class="pre-headline">Intelligence</span>
|
||
<h2>Sales <br><span class="text-blue-700">Patterns.</span></h2>
|
||
<div class="space-y-10">
|
||
<div class="flex items-center gap-8">
|
||
<div class="w-14 h-14 bg-blue-50 rounded-2xl flex items-center justify-center text-blue-700 font-bold text-2xl">01</div>
|
||
<div class="text-2xl font-bold text-slate-800">Pipeline Velocity Analyse</div>
|
||
</div>
|
||
<div class="flex items-center gap-8">
|
||
<div class="w-14 h-14 bg-blue-50 rounded-2xl flex items-center justify-center text-blue-700 font-bold text-2xl">02</div>
|
||
<div class="text-2xl font-bold text-slate-800">Winning Habits Tracking</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="visual-area">
|
||
<div class="visual-element" id="visual5">
|
||
<div class="bg-white border border-slate-200 p-12 rounded-3xl shadow-2xl w-[550px]">
|
||
<div class="grid grid-cols-3 gap-8 mb-12 text-center border-b border-slate-50 pb-12">
|
||
<div><div class="text-blue-700 font-black text-4xl">12d</div><div class="text-[10px] font-bold text-slate-400 uppercase mt-2">Response</div></div>
|
||
<div><div class="text-blue-700 font-black text-4xl">4.8</div><div class="text-[10px] font-bold text-slate-400 uppercase mt-2">Calls/Deal</div></div>
|
||
<div><div class="text-blue-700 font-black text-4xl">+159%</div><div class="text-[10px] font-bold text-slate-400 uppercase mt-2">Uplift</div></div>
|
||
</div>
|
||
<div class="space-y-4">
|
||
<div class="flex items-center justify-between p-5 bg-blue-50/50 rounded-2xl border border-blue-100">
|
||
<div class="flex items-center gap-4">
|
||
<div class="w-10 h-10 bg-blue-700 rounded-full flex items-center justify-center text-xs font-bold text-white shadow-lg">PH</div>
|
||
<span class="text-lg font-bold">Pierre Hollein | LIVE</span>
|
||
</div>
|
||
<span class="text-[10px] font-bold text-blue-700 uppercase tracking-widest 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">Potenzial</span>
|
||
<h2>Nächster <br><span class="text-blue-600">Hebel.</span></h2>
|
||
<p class="text-3xl mb-12 font-medium">68% der CRM-Accounts <br>ohne Ansprechpartner.</p>
|
||
</div>
|
||
<div class="visual-area">
|
||
<div class="visual-element" id="visual6">
|
||
<div class="text-center">
|
||
<div id="count6" class="text-[12rem] font-black text-blue-700 leading-none">0</div>
|
||
<div class="text-sm font-bold text-slate-400 uppercase mt-10 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-6xl mx-auto">
|
||
<h2 class="text-[10rem] mb-24 italic leading-none tracking-tighter">Vertrieb. <span class="text-blue-700">Steuerbar.</span></h2>
|
||
<div class="grid grid-cols-3 gap-16">
|
||
<div class="p-12 bg-white border border-slate-200 rounded-3xl shadow-xl text-left">
|
||
<div class="text-blue-700 font-black text-4xl mb-6">Transparent</div>
|
||
<p class="text-xl text-slate-500">Alle Daten auf einer Seite.</p>
|
||
</div>
|
||
<div class="p-12 bg-white border border-slate-200 rounded-3xl shadow-xl text-left">
|
||
<div class="text-blue-700 font-black text-4xl mb-6">Priorisiert</div>
|
||
<p class="text-xl text-slate-500">Alarm zur Aktion.</p>
|
||
</div>
|
||
<div class="p-12 bg-white border border-slate-200 rounded-3xl shadow-xl text-left">
|
||
<div class="text-blue-700 font-black text-4xl mb-6">Handlungsfähig</div>
|
||
<p class="text-xl text-slate-500">Echte Steuerungs-Hebel.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
</main>
|
||
|
||
<script>
|
||
gsap.registerPlugin(ScrollTrigger);
|
||
|
||
// Progress Bar
|
||
gsap.to("#progressBar", {
|
||
width: "100%",
|
||
scrollTrigger: {
|
||
trigger: "body",
|
||
start: "top top",
|
||
end: "bottom bottom",
|
||
scrub: 0.3
|
||
}
|
||
});
|
||
|
||
// Scrollytelling Setup
|
||
const slides = ["slide1", "slide2", "slide3", "slide4", "slide5", "slide6", "slide7"];
|
||
|
||
slides.forEach((slideId, index) => {
|
||
const visualId = `visual${index + 1}`;
|
||
const visual = document.getElementById(visualId);
|
||
|
||
if (visual) {
|
||
const tl = gsap.timeline({
|
||
scrollTrigger: {
|
||
trigger: `#${slideId}`,
|
||
start: "top center",
|
||
end: "bottom center",
|
||
toggleActions: "play reverse play reverse"
|
||
}
|
||
});
|
||
|
||
tl.to(`#${visualId} .screenshot-frame, #${visualId} .kpi-card, #${visualId}`, {
|
||
opacity: 1,
|
||
x: 0,
|
||
duration: 1.2,
|
||
ease: "expo.out"
|
||
});
|
||
|
||
// Mini-Animations
|
||
if (slideId === "slide3") {
|
||
tl.to("#bar3", { width: "20%", duration: 2, ease: "expo.out" }, "-=0.5");
|
||
}
|
||
if (slideId === "slide4") {
|
||
tl.to("#bar4a", { width: "42%", duration: 1.2, ease: "power2.out" }, "-=0.8");
|
||
tl.to("#bar4b", { width: "65%", duration: 1.5, ease: "expo.out" }, "-=1.0");
|
||
}
|
||
if (slideId === "slide6") {
|
||
tl.to("#count6", {
|
||
innerHTML: 11216,
|
||
duration: 3,
|
||
snap: { innerHTML: 1 },
|
||
ease: "power2.out"
|
||
}, "-=0.8");
|
||
}
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|