From 121e2297840087264a62949748164d42c550de5a Mon Sep 17 00:00:00 2001 From: Roberto Musso Date: Sat, 11 Apr 2026 16:22:28 +0200 Subject: [PATCH] Replace dark problem section with sticky scroll app walkthrough - Remove old Problem + Reveal sections (dark bg, SVG waves, static screenshot) - Add interactive walkthrough: sticky scroll with progressive app UI reveal - Recreate app UI in HTML/CSS (sidebar, greeting, daily brief, chat, suggestions) - 4 scroll steps with text descriptions + progress dots on the left - GSAP ScrollTrigger pins the section and animates elements in sequence - Pillar badges (AI Secretary, Private by Design, EU AI Act) appear at final step - Clean up all orphaned CSS/JS from old sections - Responsive breakpoints for mobile walkthrough layout --- index.html | 610 ++++++++++++++++++++++++++++++++++++++++------------- 1 file changed, 464 insertions(+), 146 deletions(-) diff --git a/index.html b/index.html index 0a31b0a..f80d039 100644 --- a/index.html +++ b/index.html @@ -69,9 +69,9 @@ position: fixed; inset: 0; background: - radial-gradient(ellipse 80% 60% at 25% 20%, rgba(251,200,129,0.07) 0%, transparent 60%), - radial-gradient(ellipse 70% 50% at 75% 70%, rgba(138,142,169,0.06) 0%, transparent 50%), - radial-gradient(ellipse 90% 60% at 50% 110%, rgba(200,195,205,0.08) 0%, transparent 50%); + radial-gradient(ellipse 80% 60% at 25% 20%, rgba(251,200,129,0.10) 0%, transparent 60%), + radial-gradient(ellipse 70% 50% at 75% 70%, rgba(138,142,169,0.08) 0%, transparent 50%), + radial-gradient(ellipse 90% 60% at 50% 110%, rgba(200,195,205,0.10) 0%, transparent 50%); pointer-events: none; z-index: 0; } @@ -81,13 +81,15 @@ content: ''; position: fixed; inset: 0; - opacity: 0.025; + opacity: 0.03; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 200px; pointer-events: none; z-index: 1; } + /* Section wave dividers — removed, using gradient fades instead */ + .container { max-width: 1100px; margin: 0 auto; @@ -163,7 +165,7 @@ .nav-logo { display: flex; align-items: center; - gap: 10px; + gap: 8px; font-size: 1.1rem; font-weight: 400; letter-spacing: -0.02em; @@ -402,7 +404,7 @@ SECTIONS (shared) ═══════════════════════════════════════ */ .section { - padding: 120px 24px; + padding: 64px 24px; position: relative; z-index: 2; } @@ -416,106 +418,308 @@ } /* ═══════════════════════════════════════ - PROBLEM — Scrollytelling + APP WALKTHROUGH — Sticky Scroll ═══════════════════════════════════════ */ - .problem { - min-height: 100vh; + .walkthrough { + position: relative; + z-index: 2; + height: 100vh; display: flex; - flex-direction: column; + align-items: center; justify-content: center; + overflow: hidden; } - .problem-lines { - max-width: 700px; + .walkthrough-inner { + display: flex; + align-items: center; + justify-content: center; + gap: 64px; + padding: 0 48px; + max-width: 1200px; margin: 0 auto; - text-align: center; + width: 100%; } - .problem-line { - font-size: clamp(1.4rem, 3vw, 2rem); - font-weight: 400; + + /* Text column (left) */ + .wt-text { + flex: 0 0 320px; + position: relative; + min-height: 200px; + } + .wt-step { + position: absolute; + top: 0; + left: 0; + right: 0; + opacity: 0; + transform: translateY(20px); + } + .wt-step.active { + opacity: 1; + transform: none; + } + .wt-step-num { + font-size: 0.68rem; + font-weight: 600; + letter-spacing: 0.14em; + text-transform: uppercase; + color: var(--primary-deep); + margin-bottom: 10px; + } + .wt-step h3 { + font-size: clamp(1.5rem, 2.5vw, 2rem); + font-weight: 600; letter-spacing: -0.02em; - line-height: 1.5; - margin-bottom: 28px; - color: var(--text-muted); + line-height: 1.3; + margin-bottom: 12px; } - .problem-conclusion { + .wt-step p { + font-size: 0.95rem; + color: var(--text-muted); + line-height: 1.7; + } + .wt-step .emphasis { font-weight: 700; color: var(--text); - margin-top: 36px; - font-size: clamp(1.5rem, 3.5vw, 2.2rem); - line-height: 1.4; - letter-spacing: -0.02em; } - .problem-conclusion em { + .wt-step .emphasis em { font-style: normal; color: var(--primary-deep); } - /* ═══════════════════════════════════════ - THE REVEAL - ═══════════════════════════════════════ */ - .reveal { text-align: center; } - .reveal h2 { margin-bottom: 56px; } + /* Progress dots */ + .wt-dots { + display: flex; + gap: 8px; + margin-top: 28px; + } + .wt-dot { + width: 8px; + height: 8px; + border-radius: 50%; + background: var(--muted); + transition: all 0.4s ease; + } + .wt-dot.active { + background: var(--primary); + transform: scale(1.25); + } - .device-frame { - max-width: 840px; - margin: 0 auto 56px; - border-radius: 16px; + /* Device column (right) */ + .wt-device { + flex: 1; + max-width: 640px; + position: relative; + } + .wt-device-frame { + border-radius: 14px; overflow: hidden; - background: #fff; + background: #fafafa; box-shadow: - 0 2px 4px rgba(0,0,0,0.02), - 0 8px 16px rgba(0,0,0,0.04), - 0 32px 64px rgba(0,0,0,0.06); - transform: perspective(1200px) rotateX(2deg); - transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s ease; + 0 2px 4px rgba(0,0,0,0.03), + 0 8px 20px rgba(0,0,0,0.06), + 0 24px 48px rgba(0,0,0,0.08), + 0 48px 80px rgba(0,0,0,0.05); } - .device-frame:hover { - transform: perspective(1200px) rotateX(0deg) translateY(-4px); - box-shadow: - 0 2px 4px rgba(0,0,0,0.02), - 0 12px 24px rgba(0,0,0,0.06), - 0 48px 80px rgba(0,0,0,0.08); + .wt-device-frame::before { + content: ''; + position: absolute; + inset: -40px; + background: radial-gradient(ellipse 70% 60% at 50% 55%, rgba(251,200,129,0.10) 0%, rgba(251,200,129,0.02) 40%, transparent 70%); + filter: blur(40px); + z-index: -1; + border-radius: 40px; } - .device-topbar { - height: 32px; - background: #f8f8f8; + .wt-topbar { + height: 28px; + background: #f0f0f0; display: flex; align-items: center; - padding: 0 14px; - gap: 6px; - border-bottom: 1px solid #eee; + padding: 0 12px; + gap: 5px; + border-bottom: 1px solid #e8e8e8; } - .device-dot { width: 9px; height: 9px; border-radius: 50%; } - .device-dot:nth-child(1) { background: #ff5f57; } - .device-dot:nth-child(2) { background: #febc2e; } - .device-dot:nth-child(3) { background: #28c840; } - .device-frame img { width: 100%; height: auto; display: block; object-fit: contain; } + .wt-topbar span { width: 8px; height: 8px; border-radius: 50%; } + .wt-topbar span:nth-child(1) { background: #ff5f57; } + .wt-topbar span:nth-child(2) { background: #febc2e; } + .wt-topbar span:nth-child(3) { background: #28c840; } - .pillars { + /* App recreation */ + .wt-app { + display: flex; + min-height: 380px; + font-size: 13px; + color: #1a1a1a; + } + + /* Sidebar */ + .wt-sidebar { + width: 44px; + background: #f4f0f4; + border-right: 1px solid #e8e4e8; + display: flex; + flex-direction: column; + align-items: center; + padding: 10px 0; + gap: 4px; + opacity: 0; + } + .wt-sidebar-logo { + width: 24px; + height: 24px; + margin-bottom: 8px; + } + .wt-sidebar-icon { + width: 32px; + height: 32px; + border-radius: 8px; + display: flex; + align-items: center; + justify-content: center; + color: #8a8ea9; + transition: all 0.2s; + } + .wt-sidebar-icon.active { + background: rgba(251,200,129,0.15); + color: #e5a94e; + } + .wt-sidebar-icon i { width: 16px; height: 16px; } + .wt-sidebar-avatar { + width: 28px; + height: 28px; + border-radius: 50%; + background: #d4d0d8; + margin-top: auto; + display: flex; + align-items: center; + justify-content: center; + font-size: 9px; + font-weight: 700; + color: #666; + } + + /* Main content area */ + .wt-main { + flex: 1; + padding: 32px 40px; + display: flex; + flex-direction: column; + background: #fafafa; + } + .wt-greeting { + opacity: 0; + margin-bottom: 4px; + } + .wt-greeting-label { + font-size: 14px; + color: #8a8ea9; + font-weight: 400; + } + .wt-greeting-name { + font-size: 36px; + font-weight: 700; + letter-spacing: -0.03em; + color: #1a1a1a; + display: flex; + align-items: baseline; + gap: 8px; + } + .wt-greeting-name .wt-sparkle { + color: #e5a94e; + font-size: 28px; + line-height: 1; + } + .wt-brief { + opacity: 0; + margin: 16px 0 20px; + font-size: 13px; + line-height: 1.6; + color: #555; + max-width: 480px; + } + .wt-chat { + opacity: 0; + margin-top: auto; + } + .wt-chat-input { + display: flex; + align-items: center; + background: #fff; + border: 1px solid #e0dce0; + border-radius: 24px; + padding: 10px 14px 10px 18px; + gap: 8px; + box-shadow: 0 2px 8px rgba(0,0,0,0.03); + } + .wt-chat-input span { + flex: 1; + color: #b0aab4; + font-size: 13px; + } + .wt-chat-send { + width: 28px; + height: 28px; + border-radius: 50%; + background: rgba(251,200,129,0.15); + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .wt-chat-send i { width: 14px; height: 14px; color: #e5a94e; } + .wt-suggestions { + opacity: 0; + display: flex; + flex-direction: column; + gap: 6px; + margin-top: 12px; + } + .wt-suggestion { + display: flex; + align-items: center; + gap: 8px; + font-size: 12.5px; + color: #8a8ea9; + padding: 2px 0; + } + .wt-suggestion i { width: 14px; height: 14px; flex-shrink: 0; } + + /* Pillar pills (below device) */ + .wt-pillars { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; + margin-top: 32px; + opacity: 0; } - .pillar { - display: flex; - align-items: center; - gap: 10px; - padding: 12px 22px; - border-radius: 50px; - background: var(--card-bg); - backdrop-filter: blur(16px); - border: 1px solid var(--card-border); - font-size: 0.88rem; - font-weight: 500; - transition: all var(--transition); + + @media (max-width: 900px) { + .walkthrough-inner { + flex-direction: column; + gap: 32px; + padding: 80px 20px 24px; + } + .wt-text { flex: none; width: 100%; min-height: 120px; } + .wt-device { max-width: 100%; } + .wt-app { min-height: 280px; } + .wt-main { padding: 20px 24px; } + .wt-greeting-name { font-size: 24px; } } - .pillar:hover { - background: rgba(255,255,255,0.7); - transform: translateY(-2px); - box-shadow: 0 8px 20px rgba(0,0,0,0.04); + @media (max-width: 640px) { + .walkthrough-inner { padding: 72px 16px 16px; gap: 20px; } + .wt-text { flex: none; } + .wt-app { min-height: 240px; font-size: 11px; } + .wt-main { padding: 16px 18px; } + .wt-greeting-name { font-size: 20px; } + .wt-greeting-name .wt-sparkle { font-size: 18px; } + .wt-sidebar { width: 36px; } + .wt-sidebar-icon { width: 26px; height: 26px; } + .wt-sidebar-icon i { width: 13px; height: 13px; } + .wt-brief { font-size: 11px; } + .wt-chat-input { padding: 8px 10px 8px 14px; } + .wt-suggestion { font-size: 11px; } } - .pillar i { width: 18px; height: 18px; color: var(--primary-deep); } /* ═══════════════════════════════════════ HOW IT WORKS @@ -543,15 +747,16 @@ text-align: center; padding: 40px 24px; border-radius: var(--radius); - background: var(--card-bg); - backdrop-filter: blur(16px); - border: 1px solid var(--card-border); + background: rgba(255, 255, 255, 0.55); + backdrop-filter: blur(20px); + border: 1px solid rgba(255, 255, 255, 0.65); + box-shadow: 0 4px 16px rgba(0,0,0,0.03), 0 1px 2px rgba(0,0,0,0.02); transition: all var(--transition); } .step-card:hover { - background: rgba(255,255,255,0.65); - transform: translateY(-4px); - box-shadow: 0 12px 32px rgba(0,0,0,0.05); + background: rgba(255,255,255,0.75); + transform: translateY(-6px); + box-shadow: 0 16px 40px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.03); } .step-num { width: 48px; height: 48px; border-radius: 50%; @@ -578,16 +783,17 @@ .feature-card { padding: 28px; border-radius: var(--radius); - background: var(--card-bg); - backdrop-filter: blur(16px); - border: 1px solid var(--card-border); - transition: all var(--transition); + background: rgba(255, 255, 255, 0.5); + backdrop-filter: blur(20px); + border: 1px solid rgba(255, 255, 255, 0.6); + box-shadow: 0 4px 16px rgba(0,0,0,0.03), 0 1px 2px rgba(0,0,0,0.02); + transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); position: relative; + transform-style: preserve-3d; } .feature-card:hover { - background: rgba(255,255,255,0.65); - transform: translateY(-3px); - box-shadow: 0 12px 32px rgba(0,0,0,0.04); + background: rgba(255,255,255,0.75); + box-shadow: 0 20px 48px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.03); } .feature-icon { width: 42px; height: 42px; border-radius: 12px; @@ -623,9 +829,10 @@ position: relative; padding: 40px; border-radius: var(--radius); - background: var(--card-bg); - backdrop-filter: blur(16px); - border: 1px solid var(--card-border); + background: rgba(255, 255, 255, 0.55); + backdrop-filter: blur(20px); + border: 1px solid rgba(255, 255, 255, 0.65); + box-shadow: 0 8px 32px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.02); } .founder-quote::before { content: '\201C'; @@ -656,12 +863,9 @@ ═══════════════════════════════════════ */ .final-cta { text-align: center; - padding: 120px 24px; + padding: 64px 24px; position: relative; z-index: 2; - background: - radial-gradient(ellipse 80% 50% at 50% 100%, rgba(251,200,129,0.06) 0%, transparent 60%), - linear-gradient(180deg, var(--bg) 0%, var(--bg-shifted) 100%); } .final-cta h2 { margin-bottom: 12px; } .final-cta .subtitle { @@ -716,9 +920,8 @@ .features-grid { grid-template-columns: 1fr; } .pillars { flex-direction: column; align-items: center; } nav { padding: 0 16px; } - .device-frame { transform: none; } - .device-frame:hover { transform: none; } - .section { padding: 80px 20px; } + .section { padding: 48px 20px; } + .final-cta { padding: 48px 20px; } .founder-quote { padding: 28px; } } @@ -732,7 +935,8 @@ transition-duration: 0.01ms !important; } .gs-reveal { opacity: 1; transform: none; } - .problem-line, .problem-conclusion { opacity: 1 !important; transform: none !important; } + .wt-step { opacity: 1 !important; transform: none !important; } + .wt-sidebar, .wt-greeting, .wt-brief, .wt-chat, .wt-suggestions, .wt-pillars { opacity: 1 !important; transform: none !important; } .particle { display: none; } } @@ -746,8 +950,7 @@ - - adiuvAI + adiuvAI Join the waitlist @@ -807,40 +1010,88 @@ 100% on your device - -
-
-

Your important emails hide between newsletters.

-

Your tasks live in three different apps.

-

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

-

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

-
-
+ +
+
- -
-
-

The product

-

Your daily brief, every morning.

- -
- -
-
AI Secretary
-
Private by Design
-
EU AI Act Compliant
-
@@ -989,8 +1240,7 @@ - adiuvAI + adiuvAI

© 2026 adiuvAI. All rights reserved. @@ -1080,22 +1330,64 @@ }); }); - // ─── Problem: scroll-driven line reveals ─── - const lines = gsap.utils.toArray('.problem-line, .problem-conclusion'); - lines.forEach((el) => { - gsap.set(el, { opacity: 0, y: 28 }); - gsap.to(el, { - opacity: 1, - y: 0, - ease: 'power2.out', + // ─── Walkthrough: sticky scroll with progressive app reveal ─── + const wtSection = document.getElementById('walkthrough'); + const wtSteps = gsap.utils.toArray('.wt-step'); + const wtSidebar = document.getElementById('wt-sidebar'); + const wtGreeting = document.getElementById('wt-greeting'); + const wtBrief = document.getElementById('wt-brief'); + const wtChat = document.getElementById('wt-chat'); + const wtSuggestions = document.getElementById('wt-suggestions'); + const wtPillars = document.getElementById('wt-pillars'); + + if (wtSection) { + // Set initial states + gsap.set(wtSteps, { opacity: 0, y: 40 }); + gsap.set(wtSteps[0], { opacity: 1, y: 0 }); + gsap.set([wtSidebar], { opacity: 0, x: -30 }); + gsap.set([wtGreeting], { opacity: 0, y: -20 }); + gsap.set([wtBrief], { opacity: 0, y: 20 }); + gsap.set([wtChat], { opacity: 0, y: 30 }); + gsap.set([wtSuggestions], { opacity: 0, y: 30 }); + gsap.set([wtPillars], { opacity: 0, y: 20 }); + + const wtTl = gsap.timeline({ scrollTrigger: { - trigger: el, - start: 'top 82%', - end: 'top 58%', - scrub: 0.5, + trigger: wtSection, + start: 'top top', + end: () => '+=' + (window.innerHeight * 3), + scrub: 0.6, + pin: true, + anticipatePin: 1, + invalidateOnRefresh: true, }, }); - }); + + // Use normalized 0-1 positions so timing scales with any scroll distance + wtTl + // Step 0 visible at start → sidebar flies in + .to(wtSidebar, { opacity: 1, x: 0, duration: 0.15, ease: 'power2.out' }, 0) + .to(wtSteps[0], { opacity: 0, y: -30, duration: 0.08 }, 0.13) + // Step 1: greeting + .to(wtSteps[1], { opacity: 1, y: 0, duration: 0.1, ease: 'power2.out' }, 0.18) + .to(wtGreeting, { opacity: 1, y: 0, duration: 0.1, ease: 'power2.out' }, 0.18) + // Hold step 1 + .to({}, { duration: 0.08 }, 0.28) + // Step 2: brief + .to(wtSteps[1], { opacity: 0, y: -30, duration: 0.08 }, 0.36) + .to(wtSteps[2], { opacity: 1, y: 0, duration: 0.1, ease: 'power2.out' }, 0.42) + .to(wtBrief, { opacity: 1, y: 0, duration: 0.1, ease: 'power2.out' }, 0.42) + // Hold step 2 + .to({}, { duration: 0.08 }, 0.52) + // Step 3: chat + suggestions + pillars + .to(wtSteps[2], { opacity: 0, y: -30, duration: 0.08 }, 0.60) + .to(wtSteps[3], { opacity: 1, y: 0, duration: 0.1, ease: 'power2.out' }, 0.66) + .to(wtChat, { opacity: 1, y: 0, duration: 0.08, ease: 'power2.out' }, 0.66) + .to(wtSuggestions, { opacity: 1, y: 0, duration: 0.08, ease: 'power2.out' }, 0.72) + .to(wtPillars, { opacity: 1, y: 0, duration: 0.08, ease: 'power2.out' }, 0.78) + // Hold step 3 visible + .to({}, { duration: 0.14 }, 0.86); + } // ─── Generic scroll reveals for gs-reveal ─── gsap.utils.toArray('.gs-reveal').forEach((el, i) => { @@ -1125,6 +1417,32 @@ scrub: true, }, }); + + + + // ─── 3D tilt on feature cards ─── + document.querySelectorAll('.feature-card').forEach((card) => { + card.addEventListener('mousemove', (e) => { + const r = card.getBoundingClientRect(); + const x = (e.clientX - r.left) / r.width - 0.5; + const y = (e.clientY - r.top) / r.height - 0.5; + gsap.to(card, { + rotateY: x * 10, + rotateX: y * -10, + transformPerspective: 600, + duration: 0.4, + ease: 'power2.out', + }); + }); + card.addEventListener('mouseleave', () => { + gsap.to(card, { + rotateY: 0, + rotateX: 0, + duration: 0.6, + ease: 'elastic.out(1, 0.5)', + }); + }); + }); }); // ─── Waitlist Form Handler ───