diff --git a/index.html b/index.html index a28e61d..8e5499b 100644 --- a/index.html +++ b/index.html @@ -453,11 +453,17 @@ flex: 0 0 360px; position: relative; } - .wt-step { + .wt-step-pin { + min-height: 100vh; + } + .wt-step-pin:last-child { min-height: 80vh; + } + .wt-step { + position: sticky; + top: 25vh; display: flex; flex-direction: column; - justify-content: center; padding: 40px 0; opacity: 0.12; transform: translateY(16px); @@ -466,8 +472,6 @@ transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s cubic-bezier(0.16, 1, 0.3, 1); } - .wt-step:first-child { padding-top: 0; } - .wt-step:last-child { min-height: 60vh; } .wt-step.active { opacity: 1; transform: none; @@ -584,6 +588,7 @@ transform: translateX(-20px); transition: opacity 0.5s ease, transform 0.5s ease; } + .walkthrough[data-step="0"] .wt-sidebar, .walkthrough[data-step="1"] .wt-sidebar, .walkthrough[data-step="2"] .wt-sidebar, .walkthrough[data-step="3"] .wt-sidebar { @@ -784,15 +789,18 @@ position: relative; z-index: 2; } + .wt-step-pin { min-height: auto; } .wt-step { - min-height: 70vh; - padding: 32px 0; + position: relative; + top: auto; + height: 80vh; + justify-content: center; + padding: 32px 16px; background: linear-gradient(180deg, rgba(244,237,243,0.95) 0%, rgba(244,237,243,0.8) 80%, transparent 100%); border-radius: 16px; - padding-left: 16px; - padding-right: 16px; } .wt-step:first-child { padding-top: 24px; } + .wt-step:last-child { height: 60vh; } .wt-step.active { filter: blur(0px); } .wt-app { min-height: 260px; } .wt-main { padding: 20px 24px; } @@ -805,9 +813,10 @@ .walkthrough-inner { padding: 0 16px; } .wt-device { top: 68px; } .wt-step { - min-height: 55vh; + height: 75vh; padding: 20px 12px; } + .wt-step:last-child { height: 55vh; } .wt-app { min-height: 200px; font-size: 11px; } .wt-main { padding: 16px 18px; } .wt-greeting-name { font-size: 20px; } @@ -1105,35 +1114,43 @@ -
+
-
-

The problem

-

Your important emails hide between newsletters.

-

You miss deadlines buried in threads. Tasks get lost across three different apps. Sound familiar?

-
+
+
+

The problem

+

Your important emails hide between newsletters.

+

You miss deadlines buried in threads. Tasks get lost across three different apps. Sound familiar?

+
+
-
-

The greeting

-

Every morning, your AI secretary is ready.

-

Open the app and it already knows what happened overnight — emails scanned, tasks prioritized, deadlines flagged.

-
+
+
+

The greeting

+

Every morning, your AI secretary is ready.

+

Open the app and it already knows what happened overnight — emails scanned, tasks prioritized, deadlines flagged.

+
+
-
-

The brief

-

Meeting notes sit in a doc you'll never open again.

-

Not here. Your daily brief is a clear, AI-generated summary of what matters today — tasks, follow-ups, and deadlines in one place.

-
+
+
+

The brief

+

Meeting notes sit in a doc you'll never open again.

+

Not here. Your daily brief is a clear, AI-generated summary of what matters today — tasks, follow-ups, and deadlines in one place.

+
+
-
-

The result

-

You don't need another tool.
You need a secretary.

-

Ask it anything. It understands your projects, your emails, your schedule — and it never leaves your device.

-
+
+
+

The result

+

You don't need another tool.
You need a secretary.

+

Ask it anything. It understands your projects, your emails, your schedule — and it never leaves your device.

+
+
@@ -1431,25 +1448,32 @@ const wtProgress = document.getElementById('wt-progress'); if (wtSection && wtSteps.length) { - // Set first step active - wtSteps[0].classList.add('active'); - - // IntersectionObserver for step activation + // IntersectionObserver for step activation (observe pin wrappers) + const wtPins = document.querySelectorAll('.wt-step-pin'); + const activeSteps = new Set(); const stepObserver = new IntersectionObserver((entries) => { entries.forEach(entry => { + const stepEl = entry.target.querySelector('.wt-step'); + const step = stepEl.getAttribute('data-step'); if (entry.isIntersecting) { - const step = entry.target.getAttribute('data-step'); + activeSteps.add(step); wtSteps.forEach(s => s.classList.remove('active')); - entry.target.classList.add('active'); + stepEl.classList.add('active'); wtSection.setAttribute('data-step', step); + } else { + activeSteps.delete(step); + stepEl.classList.remove('active'); + if (activeSteps.size === 0) { + wtSection.removeAttribute('data-step'); + } } }); }, { - rootMargin: '-40% 0px -40% 0px', + rootMargin: '-45% 0px -45% 0px', threshold: 0, }); - wtSteps.forEach(step => stepObserver.observe(step)); + wtPins.forEach(pin => stepObserver.observe(pin)); // Scroll progress indicator if (wtProgress) {