[37288f42] feat: add GTM Engine ecosystem slide (Slide 0) with interactive tool icons
This commit is contained in:
@@ -41,6 +41,67 @@
|
||||
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 {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@@ -208,6 +269,52 @@
|
||||
</header>
|
||||
|
||||
<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 -->
|
||||
<section class="slide" id="slide1">
|
||||
<div class="split-layout">
|
||||
@@ -555,10 +662,48 @@
|
||||
});
|
||||
|
||||
// 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) => {
|
||||
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 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