adiuvAI/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: adiuvAI:48110f8be66fd8e797d63dad4791d84ac96f04b1
Branches Tags
adiuvAI:main
..
compare: adiuvAI:5aa43d5b212d25f950f3047fa1d60fd7ca722419
Branches Tags
adiuvAI:main

2 Commits
48110f8be6 ... 5aa43d5b21

Author SHA1 Message Date
Roberto Musso
5aa43d5b21 fix: walkthrough scrollytelling rewrite - sticky pin dwell, observer cleanup
All checks were successful
Deploy Website / deploy (push) Successful in 3s
Details 
- Replace scroll-snap with sticky pin wrappers (120vh dwell per step)
- Steps stick at 25vh while user scrolls through wrapper height
- IntersectionObserver now watches pin wrappers, clears data-step on exit
- Sidebar animates in at step 0, hides when scrolling away
- Remove aggressive scroll-snap-type from html
- Tablet/mobile: fallback to relative positioning with fixed heights
 2026-04-11 20:24:11 +02:00
Roberto Musso
98f973316d feat: GDPR — add privacy link under forms, update privacy policy with Brevo and retention 2026-04-11 19:41:51 +02:00
2 changed files with 215 additions and 113 deletions
Expand all files Collapse all files

324
index.html
View File

@@ -418,21 +418,16 @@
}
/* ═══════════════════════════════════════
APP WALKTHROUGH — Sticky Scroll
APP WALKTHROUGH — Sticky + IntersectionObserver
═══════════════════════════════════════ */
.walkthrough {
position: relative;
z-index: 2;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
padding: 80px 0 40px;
}
.walkthrough-inner {
display: flex;
align-items: center;
justify-content: center;
align-items: flex-start;
gap: 64px;
padding: 0 48px;
max-width: 1200px;
@@ -440,23 +435,47 @@
width: 100%;
}
/* Text column (left) */
/* Scroll progress line — left edge */
.wt-progress {
position: absolute;
left: 0;
top: 0;
width: 3px;
height: 0%;
background: linear-gradient(180deg, var(--primary), var(--primary-deep));
border-radius: 0 2px 2px 0;
transition: height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
opacity: 0.6;
}
/* Text column — flows naturally, each step creates scroll distance */
.wt-text {
flex: 0 0 320px;
flex: 0 0 360px;
position: relative;
min-height: 200px;
}
.wt-step-pin {
min-height: 100vh;
}
.wt-step-pin:last-child {
min-height: 80vh;
}
.wt-step {
position: absolute;
top: 0;
left: 0;
right: 0;
opacity: 0;
transform: translateY(20px);
position: sticky;
top: 25vh;
display: flex;
flex-direction: column;
padding: 40px 0;
opacity: 0.12;
transform: translateY(16px);
filter: blur(1px);
transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
filter 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.wt-step.active {
opacity: 1;
transform: none;
filter: blur(0px);
}
.wt-step-num {
font-size: 0.68rem;
@@ -505,11 +524,13 @@
transform: scale(1.25);
}
/* Device column (right) */
/* Device column — sticky, pins below nav while text scrolls */
.wt-device {
flex: 1;
max-width: 640px;
position: relative;
position: sticky;
top: calc(50vh - 240px);
align-self: flex-start;
}
.wt-device-frame {
border-radius: 14px;
@@ -520,6 +541,7 @@
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);
position: relative;
}
.wt-device-frame::before {
content: '';
@@ -552,7 +574,7 @@
color: #1a1a1a;
}
/* Sidebar */
/* Sidebar — CSS-driven reveal */
.wt-sidebar {
width: 44px;
background: #f4f0f4;
@@ -563,6 +585,15 @@
padding: 10px 0;
gap: 4px;
opacity: 0;
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 {
opacity: 1;
transform: none;
}
.wt-sidebar-logo {
width: 24px;
@@ -606,10 +637,20 @@
flex-direction: column;
background: #fafafa;
}
/* Greeting — CSS-driven reveal */
.wt-greeting {
opacity: 0;
transform: translateY(-10px);
transition: opacity 0.5s ease 0.1s, transform 0.5s ease 0.1s;
margin-bottom: 4px;
}
.walkthrough[data-step="1"] .wt-greeting,
.walkthrough[data-step="2"] .wt-greeting,
.walkthrough[data-step="3"] .wt-greeting {
opacity: 1;
transform: none;
}
.wt-greeting-label {
font-size: 14px;
color: #8a8ea9;
@@ -629,18 +670,35 @@
font-size: 28px;
line-height: 1;
}
/* Brief — CSS-driven reveal */
.wt-brief {
opacity: 0;
transform: translateY(10px);
transition: opacity 0.5s ease 0.1s, transform 0.5s ease 0.1s;
margin: 16px 0 20px;
font-size: 13px;
line-height: 1.6;
color: #555;
max-width: 480px;
}
.walkthrough[data-step="2"] .wt-brief,
.walkthrough[data-step="3"] .wt-brief {
opacity: 1;
transform: none;
}
/* Chat — CSS-driven reveal */
.wt-chat {
opacity: 0;
transform: translateY(15px);
transition: opacity 0.5s ease, transform 0.5s ease;
margin-top: auto;
}
.walkthrough[data-step="3"] .wt-chat {
opacity: 1;
transform: none;
}
.wt-chat-input {
display: flex;
align-items: center;
@@ -667,13 +725,21 @@
flex-shrink: 0;
}
.wt-chat-send i { width: 14px; height: 14px; color: #e5a94e; }
/* Suggestions — CSS-driven reveal */
.wt-suggestions {
opacity: 0;
transform: translateY(15px);
transition: opacity 0.5s ease 0.1s, transform 0.5s ease 0.1s;
display: flex;
flex-direction: column;
gap: 6px;
margin-top: 12px;
}
.walkthrough[data-step="3"] .wt-suggestions {
opacity: 1;
transform: none;
}
.wt-suggestion {
display: flex;
align-items: center;
@@ -684,7 +750,7 @@
}
.wt-suggestion i { width: 14px; height: 14px; flex-shrink: 0; }
/* Pillar pills (below device) */
/* Pillar pills — CSS-driven reveal */
.wt-pillars {
display: flex;
gap: 16px;
@@ -692,24 +758,66 @@
flex-wrap: wrap;
margin-top: 32px;
opacity: 0;
transform: translateY(10px);
transition: opacity 0.5s ease 0.15s, transform 0.5s ease 0.15s;
}
.walkthrough[data-step="3"] .wt-pillars {
opacity: 1;
transform: none;
}
/* Walkthrough — Tablet */
@media (max-width: 900px) {
.walkthrough { padding: 40px 0 24px; }
.walkthrough-inner {
flex-direction: column;
gap: 32px;
padding: 80px 20px 24px;
gap: 0;
padding: 0 20px;
}
.wt-text { flex: none; width: 100%; min-height: 120px; }
.wt-device { max-width: 100%; }
.wt-app { min-height: 280px; }
.wt-progress { display: none; }
.wt-device {
order: -1;
position: sticky;
top: 72px;
max-width: 100%;
z-index: 1;
padding-bottom: 16px;
}
.wt-text {
flex: none;
width: 100%;
position: relative;
z-index: 2;
}
.wt-step-pin { min-height: auto; }
.wt-step {
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;
}
.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; }
.wt-greeting-name { font-size: 24px; }
}
/* Walkthrough — Mobile */
@media (max-width: 640px) {
.walkthrough-inner { padding: 72px 16px 16px; gap: 20px; }
.wt-text { flex: none; }
.wt-app { min-height: 240px; font-size: 11px; }
.walkthrough { padding: 24px 0 16px; }
.walkthrough-inner { padding: 0 16px; }
.wt-device { top: 68px; }
.wt-step {
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; }
.wt-greeting-name .wt-sparkle { font-size: 18px; }
@@ -935,8 +1043,10 @@
transition-duration: 0.01ms !important;
}
.gs-reveal { opacity: 1; transform: none; }
.wt-step { opacity: 1 !important; transform: none !important; }
.wt-step { opacity: 1 !important; transform: none !important; filter: none !important; }
.wt-sidebar, .wt-greeting, .wt-brief, .wt-chat, .wt-suggestions, .wt-pillars { opacity: 1 !important; transform: none !important; }
.wt-device { position: relative !important; top: auto !important; transform: none !important; }
.wt-progress { display: none !important; }
.particle { display: none; }
}
</style>
@@ -989,7 +1099,7 @@
<input type="email" name="email" placeholder="your@email.com" required autocomplete="email" aria-label="Email address">
<button type="submit" class="btn btn-primary">Get early access</button>
</form>
<p class="form-note hero-el">Free to start · No credit card · Early adopters get priority</p>
<p class="form-note hero-el">Free to start · No credit card · <a href="./privacy.html" style="color:var(--text-muted);text-decoration:underline;text-underline-offset:2px;">Privacy policy</a></p>
<div class="form-success" id="success-hero" role="status">
<div class="check-icon"><i data-lucide="mail" style="color: var(--primary-deep); width:24px; height:24px;"></i></div>
@@ -1003,42 +1113,44 @@
</div>
</section>
<!-- ═══════ SOCIAL PROOF BAR ═══════ -->
<div class="proof-bar" role="complementary">
Gmail, Outlook &amp; Teams
<span class="sep">·</span>
100% on your device
</div>
<!-- ═══════ APP WALKTHROUGH — Sticky Scroll ═══════ -->
<section class="walkthrough" id="walkthrough">
<div class="wt-progress" id="wt-progress"></div>
<div class="walkthrough-inner">
<!-- Text column -->
<div class="wt-text">
<div class="wt-step" data-step="0">
<p class="wt-step-num">The problem</p>
<h3>Your important emails hide between newsletters.</h3>
<p>You miss deadlines buried in threads. Tasks get lost across three different apps. Sound familiar?</p>
<div class="wt-dots"><span class="wt-dot active"></span><span class="wt-dot"></span><span class="wt-dot"></span><span class="wt-dot"></span></div>
<div class="wt-step-pin">
<div class="wt-step" data-step="0">
<p class="wt-step-num">The problem</p>
<h3>Your important emails hide between newsletters.</h3>
<p>You miss deadlines buried in threads. Tasks get lost across three different apps. Sound familiar?</p>
<div class="wt-dots"><span class="wt-dot active"></span><span class="wt-dot"></span><span class="wt-dot"></span><span class="wt-dot"></span></div>
</div>
</div>
<div class="wt-step" data-step="1">
<p class="wt-step-num">The greeting</p>
<h3>Every morning, your AI secretary is ready.</h3>
<p>Open the app and it already knows what happened overnight — emails scanned, tasks prioritized, deadlines flagged.</p>
<div class="wt-dots"><span class="wt-dot"></span><span class="wt-dot active"></span><span class="wt-dot"></span><span class="wt-dot"></span></div>
<div class="wt-step-pin">
<div class="wt-step" data-step="1">
<p class="wt-step-num">The greeting</p>
<h3>Every morning, your AI secretary is ready.</h3>
<p>Open the app and it already knows what happened overnight — emails scanned, tasks prioritized, deadlines flagged.</p>
<div class="wt-dots"><span class="wt-dot"></span><span class="wt-dot active"></span><span class="wt-dot"></span><span class="wt-dot"></span></div>
</div>
</div>
<div class="wt-step" data-step="2">
<p class="wt-step-num">The brief</p>
<h3>Meeting notes sit in a doc you'll never open again.</h3>
<p>Not here. Your daily brief is a clear, AI-generated summary of what matters today — tasks, follow-ups, and deadlines in one place.</p>
<div class="wt-dots"><span class="wt-dot"></span><span class="wt-dot"></span><span class="wt-dot active"></span><span class="wt-dot"></span></div>
<div class="wt-step-pin">
<div class="wt-step" data-step="2">
<p class="wt-step-num">The brief</p>
<h3>Meeting notes sit in a doc you'll never open again.</h3>
<p>Not here. Your daily brief is a clear, AI-generated summary of what matters today — tasks, follow-ups, and deadlines in one place.</p>
<div class="wt-dots"><span class="wt-dot"></span><span class="wt-dot"></span><span class="wt-dot active"></span><span class="wt-dot"></span></div>
</div>
</div>
<div class="wt-step" data-step="3">
<p class="wt-step-num">The result</p>
<h3 class="emphasis">You don't need another tool.<br>You need <em>a secretary</em>.</h3>
<p>Ask it anything. It understands your projects, your emails, your schedule — and it never leaves your device.</p>
<div class="wt-dots"><span class="wt-dot"></span><span class="wt-dot"></span><span class="wt-dot"></span><span class="wt-dot active"></span></div>
<div class="wt-step-pin">
<div class="wt-step" data-step="3">
<p class="wt-step-num">The result</p>
<h3 class="emphasis">You don't need another tool.<br>You need <em>a secretary</em>.</h3>
<p>Ask it anything. It understands your projects, your emails, your schedule — and it never leaves your device.</p>
<div class="wt-dots"><span class="wt-dot"></span><span class="wt-dot"></span><span class="wt-dot"></span><span class="wt-dot active"></span></div>
</div>
</div>
</div>
@@ -1224,7 +1336,7 @@
<input type="email" name="email" placeholder="your@email.com" required autocomplete="email" aria-label="Email address">
<button type="submit" class="btn btn-primary">Join the waitlist</button>
</form>
<p class="form-note gs-reveal">No spam, ever. Unsubscribe anytime.</p>
<p class="form-note gs-reveal">No spam, ever. <a href="./privacy.html" style="color:var(--text-muted);text-decoration:underline;text-underline-offset:2px;">Privacy policy</a></p>
<div class="form-success" id="success-footer" role="status">
<div class="check-icon"><i data-lucide="mail" style="color: var(--primary-deep); width:24px; height:24px;"></i></div>
@@ -1330,63 +1442,51 @@
});
});
// ─── Walkthrough: sticky scroll with progressive app reveal ───
// ─── Walkthrough: CSS sticky + IntersectionObserver ───
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');
const wtSteps = document.querySelectorAll('.wt-step');
const wtProgress = document.getElementById('wt-progress');
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: wtSection,
start: 'top top',
end: () => '+=' + (window.innerHeight * 3),
scrub: 0.6,
pin: true,
anticipatePin: 1,
invalidateOnRefresh: true,
},
if (wtSection && wtSteps.length) {
// 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) {
activeSteps.add(step);
wtSteps.forEach(s => s.classList.remove('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: '-45% 0px -45% 0px',
threshold: 0,
});
// 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);
wtPins.forEach(pin => stepObserver.observe(pin));
// Scroll progress indicator
if (wtProgress) {
const updateProgress = () => {
const rect = wtSection.getBoundingClientRect();
const sectionH = wtSection.offsetHeight;
const scrolled = -rect.top;
const pct = Math.max(0, Math.min(100, (scrolled / (sectionH - window.innerHeight)) * 100));
wtProgress.style.height = pct + '%';
};
window.addEventListener('scroll', updateProgress, { passive: true });
updateProgress();
}
}
// ─── Generic scroll reveals for gs-reveal ───

4
privacy.html
View File

@@ -259,6 +259,7 @@
<p>We do not sell, rent, or trade your personal information. We share data only with:</p>
<ul>
<li><strong>Stripe</strong> — for payment processing (PCI DSS Level 1 compliant)</li>
<li><strong>Brevo (Sendinblue SAS)</strong> — for transactional emails (waitlist confirmation, product updates). Your email address is shared with Brevo solely to deliver these messages. Brevo acts as a data processor under GDPR and stores data in the EU. <a href="https://www.brevo.com/legal/privacypolicy/">Brevo Privacy Policy</a></li>
<li><strong>LLM providers</strong> (OpenAI, Anthropic) — text snippets for AI processing, under no-training data agreements</li>
<li><strong>Cloud infrastructure</strong> (hosting provider) — encrypted data only for cloud backup/sync features</li>
<li><strong>Law enforcement</strong> — only when required by law, and limited to data we actually possess (account info, not your local content)</li>
@@ -286,7 +287,8 @@
<ul>
<li><strong>Account data:</strong> Retained while your account is active. Deleted within 30 days of account deletion request.</li>
<li><strong>Encrypted backups:</strong> Deleted within 30 days of account deletion, or on your request.</li>
<li><strong>Waitlist emails:</strong> Retained until beta launch, then migrated to account data or deleted.</li>
<li><strong>Waitlist (confirmed):</strong> Retained until beta launch, then migrated to account data or deleted on request. Every email includes an unsubscribe link that immediately anonymizes your data.</li>
<li><strong>Waitlist (unconfirmed):</strong> Automatically anonymized after 48 hours. The anonymized record (signup date, source) is retained for aggregate analytics but contains no personal data.</li>
<li><strong>Server logs:</strong> Retained for 90 days, then purged.</li>
<li><strong>Local data:</strong> Under your control — persists until you delete it or uninstall the app.</li>
</ul>