[37288f42] feat: add GTM Engine ecosystem slide (Slide 0) with interactive tool icons
This commit is contained in:
@@ -41,6 +41,67 @@
|
|||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Slide 0 Specifics */
|
||||||
|
#slide0 {
|
||||||
|
flex-direction: column;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tool-icon-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
gap: 3rem;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 15%;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0 5%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tool-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1rem;
|
||||||
|
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
|
||||||
|
opacity: 0.2;
|
||||||
|
transform: scale(0.8);
|
||||||
|
filter: grayscale(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tool-item.active {
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(1.4);
|
||||||
|
filter: grayscale(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tool-label {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 800;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
color: var(--robo-blue);
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(10px);
|
||||||
|
transition: all 0.4s ease;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tool-item.active .tool-label {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tool-icon {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
color: var(--text-main);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tool-item.active .tool-icon {
|
||||||
|
color: var(--robo-blue);
|
||||||
|
}
|
||||||
|
|
||||||
.split-layout {
|
.split-layout {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
@@ -208,6 +269,52 @@
|
|||||||
</header>
|
</header>
|
||||||
|
|
||||||
<main id="main" class="pt-32">
|
<main id="main" class="pt-32">
|
||||||
|
<!-- Slide 0: GTM Engine & Ecosystem -->
|
||||||
|
<section class="slide" id="slide0">
|
||||||
|
<div class="max-w-4xl">
|
||||||
|
<span class="pre-headline">Strategischer Kontext</span>
|
||||||
|
<h2 style="font-size: 6.5rem; margin-bottom: 2rem;">GTM Intelligence <br><span class="text-blue-700">Engine.</span></h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="tool-icon-container">
|
||||||
|
<!-- 1. Connector -->
|
||||||
|
<div class="tool-item" id="tool-connector">
|
||||||
|
<svg class="tool-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v8"/><path d="M18 8v5a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V8"/><path d="M6 3v3"/><path d="M18 3v3"/><path d="M10 22v-5"/><path d="M14 22v-5"/></svg>
|
||||||
|
<span class="tool-label">SO Connector</span>
|
||||||
|
</div>
|
||||||
|
<!-- 2. Lead Engine -->
|
||||||
|
<div class="tool-item" id="tool-lead">
|
||||||
|
<svg class="tool-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></svg>
|
||||||
|
<span class="tool-label">Lead Engine</span>
|
||||||
|
</div>
|
||||||
|
<!-- 3. Mailing Engine -->
|
||||||
|
<div class="tool-item" id="tool-mail">
|
||||||
|
<svg class="tool-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>
|
||||||
|
<span class="tool-label">Mailing Engine</span>
|
||||||
|
</div>
|
||||||
|
<!-- 4. PIM Engine -->
|
||||||
|
<div class="tool-item" id="tool-pim">
|
||||||
|
<svg class="tool-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"/><path d="m3.3 7 8.7 5 8.7-5"/><path d="M12 22V12"/></svg>
|
||||||
|
<span class="tool-label">PIM Engine</span>
|
||||||
|
</div>
|
||||||
|
<!-- 5. Messe Follow-Up -->
|
||||||
|
<div class="tool-item" id="tool-messe">
|
||||||
|
<svg class="tool-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
|
||||||
|
<span class="tool-label">Messe Follow-Up</span>
|
||||||
|
</div>
|
||||||
|
<!-- 6. Service -->
|
||||||
|
<div class="tool-item" id="tool-service">
|
||||||
|
<svg class="tool-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>
|
||||||
|
<span class="tool-label">After Sales & Service</span>
|
||||||
|
</div>
|
||||||
|
<!-- 7. Heatmap -->
|
||||||
|
<div class="tool-item" id="tool-heatmap">
|
||||||
|
<svg class="tool-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="3 6 9 3 15 6 21 3 21 18 15 21 9 18 3 21"/><line x1="9" y1="3" x2="9" y2="18"/><line x1="15" y1="6" x2="15" y2="21"/></svg>
|
||||||
|
<span class="tool-label">Heatmap Tool</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<!-- Slide 1: Ausgangslage -->
|
<!-- Slide 1: Ausgangslage -->
|
||||||
<section class="slide" id="slide1">
|
<section class="slide" id="slide1">
|
||||||
<div class="split-layout">
|
<div class="split-layout">
|
||||||
@@ -555,10 +662,48 @@
|
|||||||
});
|
});
|
||||||
|
|
||||||
// Scrollytelling Setup
|
// Scrollytelling Setup
|
||||||
const slides = ["slide1", "slide2", "slide3", "slide4", "slide5", "slide6", "slide7", "slide8"];
|
const slides = ["slide0", "slide1", "slide2", "slide3", "slide4", "slide5", "slide6", "slide7", "slide8"];
|
||||||
|
|
||||||
|
// Special Logic for Slide 0 (Ecosystem)
|
||||||
|
const tl0 = gsap.timeline({
|
||||||
|
scrollTrigger: {
|
||||||
|
trigger: "#slide0",
|
||||||
|
start: "top top",
|
||||||
|
end: "+=3500",
|
||||||
|
pin: true,
|
||||||
|
scrub: 0.5,
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Intro scaling
|
||||||
|
tl0.to("#slide0 h2", { scale: 0.8, opacity: 0.1, duration: 2 }, 0);
|
||||||
|
tl0.to("#slide0 p", { opacity: 0.1, duration: 2 }, 0);
|
||||||
|
|
||||||
|
// Animate each tool icon sequentially
|
||||||
|
const toolItems = gsap.utils.toArray(".tool-item");
|
||||||
|
toolItems.forEach((item, i) => {
|
||||||
|
// Activate
|
||||||
|
tl0.to(item, {
|
||||||
|
className: "tool-item active",
|
||||||
|
duration: 1
|
||||||
|
}, (i * 2) + 1);
|
||||||
|
|
||||||
|
// Deactivate (except the last one which stays active or fades out)
|
||||||
|
if (i < toolItems.length - 1) {
|
||||||
|
tl0.to(item, {
|
||||||
|
className: "tool-item",
|
||||||
|
duration: 1
|
||||||
|
}, (i * 2) + 2.5);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Final fade out of Slide 0 elements
|
||||||
|
tl0.to("#slide0", { opacity: 0, duration: 1 }, "+=1");
|
||||||
|
|
||||||
slides.forEach((slideId, index) => {
|
slides.forEach((slideId, index) => {
|
||||||
const visualId = `visual${index + 1}`;
|
if (slideId === "slide0") return; // Skip slide0 in the generic loop
|
||||||
|
|
||||||
|
const visualId = `visual${index}`; // slide1 corresponds to visual1, index 1-8
|
||||||
const visual = document.getElementById(visualId);
|
const visual = document.getElementById(visualId);
|
||||||
|
|
||||||
const tl = gsap.timeline({
|
const tl = gsap.timeline({
|
||||||
|
|||||||
1
docs/Praesentation/so_ui_base64.txt
Normal file
1
docs/Praesentation/so_ui_base64.txt
Normal file
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user