diff --git a/docs/Praesentation/Sales_Intelligence_Cockpit_CLevel_v2.html b/docs/Praesentation/Sales_Intelligence_Cockpit_CLevel_v2.html index 488d5d990..d0cf9592c 100644 --- a/docs/Praesentation/Sales_Intelligence_Cockpit_CLevel_v2.html +++ b/docs/Praesentation/Sales_Intelligence_Cockpit_CLevel_v2.html @@ -29,36 +29,37 @@ padding: 0; } - /* 1080p Precision Layout */ + /* 1080p Precision Layout - Enhanced Whitespace */ .slide { height: 100vh; width: 100vw; display: flex; align-items: center; justify-content: center; - padding: 0 8%; + padding: 0 10%; position: relative; } .split-layout { - display: grid; - grid-template-cols: 35% 55%; - width: 100%; - height: 100%; + display: flex; + justify-content: space-between; align-items: center; - gap: 10%; + width: 100%; + gap: 100px; } .story-content { + flex: 0 0 500px; /* Fixed width to prevent wrapping issues */ z-index: 10; } .visual-area { + flex: 1; position: relative; - height: 100%; + height: 500px; display: flex; align-items: center; - justify-content: flex-end; + justify-content: flex-end; /* Strictly Right Aligned */ } /* DGS Dashboard UI - 1:1 Replica */ @@ -66,9 +67,10 @@ background: white; border: 1px solid #cbd5e1; border-radius: 0.5rem; - box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08); + box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15); width: 100%; max-width: 720px; + overflow: hidden; } .card-header { @@ -76,8 +78,8 @@ border-bottom: 1px solid #f1f5f9; } - .badge-red { background: #fee2e2; color: #b91c1c; font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 4px; text-transform: uppercase; } - .badge-orange { background: #ffedd5; color: #c2410c; font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 4px; text-transform: uppercase; } + .badge-red { background: #fee2e2; color: #b91c1c; font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 4px; text-transform: uppercase; display: inline-block; } + .badge-orange { background: #ffedd5; color: #c2410c; font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 4px; text-transform: uppercase; display: inline-block; } .data-grid { display: grid; @@ -89,14 +91,14 @@ text-align: center; } - .data-cell { font-size: 11px; font-weight: 600; color: #334155; } + .data-cell { font-size: 11px; font-weight: 600; color: #334155; opacity: 0; transform: translateY(10px); } .data-label { font-size: 9px; color: #94a3b8; font-weight: 700; margin-bottom: 4px; } /* Scrollytelling Transitions */ .visual-element { position: absolute; opacity: 0; - transform: translateY(40px); + transform: translateX(40px); pointer-events: none; width: 100%; display: flex; @@ -105,7 +107,7 @@ .visual-element.active { opacity: 1; - transform: translateY(0); + transform: translateX(0); pointer-events: auto; } @@ -118,12 +120,13 @@ z-index: 110; } + /* Fixed Opaque Header */ header { position: fixed; top: 0; left: 0; width: 100%; - padding: 1.5rem 3rem; + padding: 1.5rem 4rem; background: #ffffff; z-index: 100; border-bottom: 1px solid #f1f5f9; @@ -136,20 +139,25 @@ .logo-img { width: 14rem; } h2 { - letter-spacing: -0.04em; - line-height: 1.1; - font-size: 4.5rem; + letter-spacing: -0.05em; + line-height: 0.95; + font-size: 6rem; /* Increased size */ font-weight: 800; - margin-bottom: 2rem; + margin-bottom: 2.5rem; } - .text-2xl { font-size: 1.5rem; color: #475569; font-weight: 400; } + .text-2xl { font-size: 1.8rem; color: #475569; font-weight: 400; } + .pre-headline { font-size: 1rem; letter-spacing: 0.3em; font-weight: 700; text-transform: uppercase; color: var(--robo-blue); margin-bottom: 1.5rem; display: block; } + + .kpi-bar-bg { width: 100%; height: 12px; background: #f1f5f9; border-radius: 6px; overflow: hidden; margin: 10px 0; } + .kpi-bar-fill { height: 100%; width: 0%; border-radius: 6px; }
+
RoboPlanet Logo
Board Presentation | Executive Strategic Briefing
@@ -161,7 +169,7 @@
- Status Quo + Status Quo

Verteilte
Sichten.

Daten waren vorhanden – aber nicht operativ nutzbar. @@ -174,7 +182,7 @@

-
+
@@ -188,10 +196,10 @@
- Die Lösung + Die Lösung

Das
Cockpit.

- Eine operative Ansicht für jeden Account. + Operative Klarheit auf einer Seite.

"Eine Seite statt zehn Klicks."

@@ -203,7 +211,7 @@
-

DGS GmbH

+

DGS GmbH

(Paul Goliasch)
@@ -217,7 +225,7 @@
3 x CC1 Pro mit Nachlass
-
+
ORT
📍 3.12.25
CALL
📞 29.4.26
MAIL
✉️ 1.12.25
@@ -236,8 +244,8 @@
- Performance -

Vom Überblick
zur Aktion.

+ Aktivität +

Vom Überblick
zur Aktion.

~20%
Response Quote
@@ -246,17 +254,17 @@
-
-
-
- +
+
+
+
-
Bulk-Rückrufbitte
+
Bulk-Rückrufbitte
-
-
+
+
-
+
70 Kontakte 14 Reaktionen
@@ -270,7 +278,7 @@
- Steuerung + Steuerung

Ehrliche
Pipeline.

+44%
@@ -279,15 +287,15 @@
-
+
MÄRZ 261,42 Mio. €
-
+
MAI 262,05 Mio. €
-
+
@@ -300,32 +308,32 @@
- Intelligence + Intelligence

Management
Cockpit.

-
Pipeline Velocity +
Pipeline Velocity
-
Winning Habits +
Winning Habits
-
-
-
12d
Response
-
4.8
Calls/Deal
-
+159%
Uplift
+
+
+
12d
Response
+
4.8
Calls/Deal
+
+159%
Uplift
-
-
-
-
PH
- Pierre Hollein | LIVE +
+
+
+
PH
+ Pierre Hollein | LIVE
- Vorführung + Vorführung
@@ -338,14 +346,14 @@
- Potential + Potential

Nächster
Hebel.

-

68% der Accounts ohne Ansprechpartner.

+

68% der Accounts im CRM ohne Ansprechpartner.

-
11.216
+
0
Roh-Accounts
@@ -356,21 +364,22 @@
-

Vertrieb. Steuerbar.

+

Vertrieb. Steuerbar.

-
-
Transparent
-

Alle Daten auf einer Seite.

+
+
Transparent
+

Alle Daten auf einer Seite.

-
-
Priorisiert
-

Alarm zur Aktion.

+
+
Priorisiert
+

Vom Alarm zur Aktion.

-
-
Handlungsfähig
-

Echte Hebel statt Listen.

+
+
Handlungsfähig
+

Echte Hebel statt Listen.

+

"Du katapultierst uns damit definitiv in eine modernere Zukunft."

@@ -398,27 +407,44 @@ const visual = document.getElementById(visualId); if (visual) { - ScrollTrigger.create({ - trigger: `#${slideId}`, - start: "top center", - end: "bottom center", - onEnter: () => { - gsap.to(`#${visualId}`, { opacity: 1, y: 0, duration: 0.8, ease: "power2.out" }); - }, - onLeave: () => { - if (index < slides.length - 1) { - gsap.to(`#${visualId}`, { opacity: 0, y: -40, duration: 0.5 }); - } - }, - onEnterBack: () => { - gsap.to(`#${visualId}`, { opacity: 1, y: 0, duration: 0.8 }); - }, - onLeaveBack: () => { - gsap.to(`#${visualId}`, { opacity: 0, y: 40, duration: 0.5 }); + 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 for Slide 2 (DGS) + if (slideId === "slide2") { + tl.to("#dgsGrid .data-cell", { opacity: 1, y: 0, stagger: 0.1, duration: 0.5 }, "-=0.4"); + } + + // Mini-Animations for Slide 3 (Aktion) + if (slideId === "slide3") { + tl.to("#bar3", { width: "20%", duration: 1.5, ease: "power4.out" }, "-=0.5"); + } + + // Mini-Animations for Slide 4 (Pipeline) + if (slideId === "slide4") { + tl.to("#bar4a", { width: "42%", duration: 1, ease: "power2.out" }, "-=0.5"); + tl.to("#bar4b", { width: "65%", duration: 1.2, ease: "power2.out" }, "-=0.8"); + } + + // Mini-Animations for Slide 6 (Counter) + if (slideId === "slide6") { + tl.to("#count6", { + innerHTML: 11216, + duration: 2, + snap: { innerHTML: 1 }, + ease: "power2.out" + }, "-=0.5"); + } } }); - + \ No newline at end of file