1734 lines
64 KiB
HTML
1734 lines
64 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>adiuvAI — Your AI Secretary</title>
|
|
<meta name="description" content="adiuvAI is an AI-powered personal secretary that reads your email, organizes your work, and briefs you every morning — all without your data leaving your device.">
|
|
<link rel="canonical" href="https://adiuvai.com/">
|
|
<meta name="theme-color" content="#f4edf3">
|
|
|
|
<!-- Hreflang for multilanguage SEO -->
|
|
<link rel="alternate" hreflang="en" href="https://adiuvai.com/">
|
|
<link rel="alternate" hreflang="it" href="https://adiuvai.com/?lang=it">
|
|
<link rel="alternate" hreflang="es" href="https://adiuvai.com/?lang=es">
|
|
<link rel="alternate" hreflang="fr" href="https://adiuvai.com/?lang=fr">
|
|
<link rel="alternate" hreflang="de" href="https://adiuvai.com/?lang=de">
|
|
<link rel="alternate" hreflang="x-default" href="https://adiuvai.com/">
|
|
|
|
<!-- Open Graph -->
|
|
<meta property="og:title" content="adiuvAI — Meet your new chief of staff">
|
|
<meta property="og:description" content="What if AI could be your secretary? Private by design. EU AI Act compliant. Beta June 2026.">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:url" content="https://adiuvai.com/">
|
|
<meta property="og:image" content="https://adiuvai.com/assets/og-image.png">
|
|
<meta property="og:image:width" content="1200">
|
|
<meta property="og:image:height" content="630">
|
|
<meta property="og:site_name" content="adiuvAI">
|
|
|
|
<!-- Twitter Card -->
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:title" content="adiuvAI — Your AI Secretary">
|
|
<meta name="twitter:description" content="What if AI could be your secretary? Private by design. EU AI Act compliant. Beta June 2026.">
|
|
<meta name="twitter:image" content="https://adiuvai.com/assets/og-image.png">
|
|
|
|
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8,1 L13,8 L3,8 Z' fill='%23fbc881'/%3E%3Cpath d='M3,8 L13,8 L8,15 Z' fill='%23040404'/%3E%3C/svg%3E">
|
|
<link rel="apple-touch-icon" href="assets/apple-touch-icon.png">
|
|
|
|
<!-- Fonts -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
|
|
<!-- GSAP -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js" defer></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js" defer></script>
|
|
|
|
<!-- Lucide -->
|
|
<script src="https://unpkg.com/lucide@latest" defer></script>
|
|
|
|
<style>
|
|
/* ═══════════════════════════════════════
|
|
RESET
|
|
═══════════════════════════════════════ */
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
html { scroll-behavior: smooth; }
|
|
|
|
/* ═══════════════════════════════════════
|
|
CUSTOM PROPERTIES (adiuvAI brand)
|
|
═══════════════════════════════════════ */
|
|
:root {
|
|
--bg: #f4edf3;
|
|
--bg-shifted: #efe5ef;
|
|
--bg-dark: #0c0c0c;
|
|
--text: #040404;
|
|
--text-light: #fbfbfb;
|
|
--text-muted: #8a8ea9;
|
|
--primary: #fbc881;
|
|
--primary-deep: #e5a94e;
|
|
--primary-glow: rgba(251, 200, 129, 0.25);
|
|
--muted: #c8c3cd;
|
|
--muted-soft: rgba(200, 195, 205, 0.4);
|
|
--card-bg: rgba(255, 255, 255, 0.45);
|
|
--card-border: rgba(255, 255, 255, 0.55);
|
|
--radius: 20px;
|
|
--radius-sm: 12px;
|
|
--transition: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
|
|
}
|
|
|
|
/* ═══════════════════════════════════════
|
|
BASE
|
|
═══════════════════════════════════════ */
|
|
body {
|
|
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
line-height: 1.6;
|
|
overflow-x: hidden;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
/* Gradient mesh background */
|
|
body::before {
|
|
content: '';
|
|
position: fixed;
|
|
inset: 0;
|
|
background:
|
|
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;
|
|
}
|
|
|
|
/* Subtle grain texture */
|
|
body::after {
|
|
content: '';
|
|
position: fixed;
|
|
inset: 0;
|
|
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;
|
|
padding: 0 24px;
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
a { color: inherit; text-decoration: none; }
|
|
|
|
/* ═══════════════════════════════════════
|
|
TYPOGRAPHY
|
|
═══════════════════════════════════════ */
|
|
h1 {
|
|
font-size: clamp(2.8rem, 6vw, 4.8rem);
|
|
font-weight: 300;
|
|
letter-spacing: -0.04em;
|
|
line-height: 1.08;
|
|
}
|
|
h1 .accent {
|
|
font-weight: 700;
|
|
background: linear-gradient(135deg, #fbc881 0%, #e5a94e 50%, #fbc881 100%);
|
|
background-size: 200% 200%;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
animation: shimmer 6s ease-in-out infinite;
|
|
}
|
|
@keyframes shimmer {
|
|
0%, 100% { background-position: 0% 50%; }
|
|
50% { background-position: 100% 50%; }
|
|
}
|
|
|
|
h2 {
|
|
font-size: clamp(2rem, 4vw, 3rem);
|
|
font-weight: 600;
|
|
letter-spacing: -0.03em;
|
|
line-height: 1.15;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 1.15rem;
|
|
font-weight: 600;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
.text-muted { color: var(--text-muted); }
|
|
|
|
/* ═══════════════════════════════════════
|
|
NAV
|
|
═══════════════════════════════════════ */
|
|
nav {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 64px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 32px;
|
|
z-index: 100;
|
|
background: rgba(244, 237, 243, 0.5);
|
|
backdrop-filter: blur(16px);
|
|
-webkit-backdrop-filter: blur(16px);
|
|
border-bottom: 1px solid transparent;
|
|
transition: border-color 0.3s, background 0.3s;
|
|
}
|
|
nav.scrolled {
|
|
background: rgba(244, 237, 243, 0.9);
|
|
border-bottom-color: var(--muted-soft);
|
|
}
|
|
.nav-logo {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 1.1rem;
|
|
font-weight: 400;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
.nav-logo svg { width: 28px; height: 28px; }
|
|
.nav-logo .ai { font-weight: 700; color: var(--primary-deep); }
|
|
|
|
/* Language Switcher */
|
|
.nav-right { display: flex; align-items: center; gap: 12px; }
|
|
.lang-switcher {
|
|
position: relative;
|
|
font-size: 0.78rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
.lang-switcher summary {
|
|
list-style: none;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
cursor: pointer;
|
|
padding: 6px 10px;
|
|
border-radius: 8px;
|
|
border: 1px solid var(--muted-soft);
|
|
background: rgba(255,255,255,0.4);
|
|
color: var(--text-muted);
|
|
transition: all 0.2s;
|
|
user-select: none;
|
|
}
|
|
.lang-switcher summary::-webkit-details-marker { display: none; }
|
|
.lang-switcher summary:hover { background: rgba(255,255,255,0.7); color: var(--text); }
|
|
.lang-switcher[open] summary { background: rgba(255,255,255,0.7); color: var(--text); }
|
|
.lang-options {
|
|
position: absolute;
|
|
top: calc(100% + 6px);
|
|
right: 0;
|
|
background: rgba(255,255,255,0.95);
|
|
backdrop-filter: blur(16px);
|
|
border: 1px solid var(--muted-soft);
|
|
border-radius: 10px;
|
|
padding: 4px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 56px;
|
|
box-shadow: 0 8px 24px rgba(0,0,0,0.08);
|
|
z-index: 200;
|
|
}
|
|
.lang-option {
|
|
padding: 6px 12px;
|
|
border: none;
|
|
background: none;
|
|
cursor: pointer;
|
|
font-family: inherit;
|
|
font-size: 0.78rem;
|
|
font-weight: 600;
|
|
color: var(--text-muted);
|
|
border-radius: 6px;
|
|
transition: all 0.15s;
|
|
text-align: center;
|
|
}
|
|
.lang-option:hover { background: rgba(251,200,129,0.12); color: var(--text); }
|
|
.lang-option.active { color: var(--primary-deep); background: rgba(251,200,129,0.15); }
|
|
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
padding: 10px 24px;
|
|
border-radius: 50px;
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
border: none;
|
|
cursor: pointer;
|
|
transition: all var(--transition);
|
|
font-family: inherit;
|
|
}
|
|
.btn-primary {
|
|
background: var(--text);
|
|
color: var(--text-light);
|
|
}
|
|
.btn-primary:hover {
|
|
background: #222;
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
|
|
}
|
|
.btn-primary:focus-visible {
|
|
outline: 2px solid var(--primary);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* ═══════════════════════════════════════
|
|
HERO
|
|
═══════════════════════════════════════ */
|
|
.hero {
|
|
min-height: 100vh;
|
|
min-height: 100dvh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
padding: 100px 24px 60px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.compass-wrapper {
|
|
position: relative;
|
|
margin-bottom: 40px;
|
|
}
|
|
.compass-wrapper::before {
|
|
content: '';
|
|
position: absolute;
|
|
width: 300px;
|
|
height: 300px;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
background: radial-gradient(circle, var(--primary-glow) 0%, rgba(251,200,129,0.06) 45%, transparent 70%);
|
|
filter: blur(30px);
|
|
z-index: -1;
|
|
animation: glow-pulse 4s ease-in-out infinite;
|
|
}
|
|
@keyframes glow-pulse {
|
|
0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
|
|
50% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
|
|
}
|
|
|
|
.hero-compass {
|
|
width: 120px;
|
|
height: 120px;
|
|
filter: drop-shadow(0 4px 20px rgba(251,200,129,0.2));
|
|
}
|
|
.compass-needle-group {
|
|
transform-origin: 32px 32px;
|
|
}
|
|
|
|
/* Floating particles */
|
|
.particles {
|
|
position: absolute;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
overflow: hidden;
|
|
z-index: 0;
|
|
}
|
|
.particle {
|
|
position: absolute;
|
|
background: var(--primary);
|
|
border-radius: 50%;
|
|
opacity: 0;
|
|
animation: drift var(--dur, 10s) var(--delay, 0s) ease-in-out infinite;
|
|
}
|
|
@keyframes drift {
|
|
0% { opacity: 0; transform: translateY(0) scale(0.3); }
|
|
15% { opacity: var(--peak, 0.35); }
|
|
100% { opacity: 0; transform: translateY(var(--travel, -200px)) translateX(var(--sway, 30px)) scale(0.7); }
|
|
}
|
|
|
|
.hero-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 6px 16px;
|
|
border-radius: 50px;
|
|
background: rgba(251,200,129,0.12);
|
|
border: 1px solid rgba(251,200,129,0.2);
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
color: var(--primary-deep);
|
|
margin-bottom: 24px;
|
|
}
|
|
.hero-badge .dot {
|
|
width: 6px; height: 6px; border-radius: 50%;
|
|
background: var(--primary);
|
|
animation: pulse-dot 2s ease-in-out infinite;
|
|
}
|
|
@keyframes pulse-dot {
|
|
0%, 100% { opacity: 0.5; } 50% { opacity: 1; }
|
|
}
|
|
|
|
.hero-tagline {
|
|
font-size: 0.95rem;
|
|
font-weight: 500;
|
|
letter-spacing: 0.04em;
|
|
color: var(--text-muted);
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.hero h1 { margin-bottom: 20px; }
|
|
|
|
.hero-sub {
|
|
font-size: 1.15rem;
|
|
color: var(--text-muted);
|
|
max-width: 540px;
|
|
margin: 0 auto 40px;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
/* Email form */
|
|
.waitlist-form {
|
|
display: flex;
|
|
gap: 8px;
|
|
max-width: 440px;
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
}
|
|
.waitlist-form input[type="email"] {
|
|
flex: 1;
|
|
padding: 14px 20px;
|
|
border-radius: 50px;
|
|
border: 1.5px solid var(--muted);
|
|
background: rgba(255,255,255,0.6);
|
|
backdrop-filter: blur(8px);
|
|
font-size: 0.95rem;
|
|
font-family: inherit;
|
|
outline: none;
|
|
transition: all var(--transition);
|
|
color: var(--text);
|
|
}
|
|
.waitlist-form input[type="email"]:focus {
|
|
border-color: var(--primary);
|
|
box-shadow: 0 0 0 3px var(--primary-glow);
|
|
}
|
|
.waitlist-form input[type="email"]::placeholder { color: var(--muted); }
|
|
.waitlist-form .btn-primary {
|
|
padding: 14px 28px;
|
|
white-space: nowrap;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.form-note {
|
|
font-size: 0.78rem;
|
|
color: var(--muted);
|
|
margin-top: 14px;
|
|
text-align: center;
|
|
}
|
|
|
|
.form-success {
|
|
display: none;
|
|
text-align: center;
|
|
padding: 20px;
|
|
}
|
|
.form-success .check-icon {
|
|
width: 48px; height: 48px; border-radius: 50%;
|
|
background: rgba(251,200,129,0.15);
|
|
display: flex; align-items: center; justify-content: center;
|
|
margin: 0 auto 12px;
|
|
}
|
|
.form-success p { font-weight: 600; }
|
|
.form-success .sub { font-weight: 400; color: var(--text-muted); font-size: 0.9rem; }
|
|
|
|
.scroll-hint {
|
|
position: absolute;
|
|
bottom: 32px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 6px;
|
|
color: var(--muted);
|
|
font-size: 0.7rem;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
animation: bob 2.5s ease-in-out infinite;
|
|
}
|
|
@keyframes bob {
|
|
0%, 100% { transform: translateX(-50%) translateY(0); }
|
|
50% { transform: translateX(-50%) translateY(8px); }
|
|
}
|
|
|
|
/* ═══════════════════════════════════════
|
|
SOCIAL PROOF BAR
|
|
═══════════════════════════════════════ */
|
|
.proof-bar {
|
|
padding: 20px 24px;
|
|
text-align: center;
|
|
font-size: 0.82rem;
|
|
color: var(--text-muted);
|
|
letter-spacing: 0.02em;
|
|
border-top: 1px solid var(--muted-soft);
|
|
border-bottom: 1px solid var(--muted-soft);
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
.proof-bar .sep { margin: 0 12px; opacity: 0.3; }
|
|
|
|
/* ═══════════════════════════════════════
|
|
SECTIONS (shared)
|
|
═══════════════════════════════════════ */
|
|
.section {
|
|
padding: 64px 24px;
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
.section-label {
|
|
font-size: 0.72rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.14em;
|
|
text-transform: uppercase;
|
|
color: var(--primary-deep);
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
/* ═══════════════════════════════════════
|
|
APP WALKTHROUGH — Sticky + IntersectionObserver
|
|
═══════════════════════════════════════ */
|
|
.walkthrough {
|
|
position: relative;
|
|
z-index: 2;
|
|
padding: 80px 0 40px;
|
|
}
|
|
.walkthrough-inner {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 64px;
|
|
padding: 0 48px;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
width: 100%;
|
|
}
|
|
|
|
/* 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 360px;
|
|
position: relative;
|
|
}
|
|
.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;
|
|
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;
|
|
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.3;
|
|
margin-bottom: 12px;
|
|
}
|
|
.wt-step p {
|
|
font-size: 0.95rem;
|
|
color: var(--text-muted);
|
|
line-height: 1.7;
|
|
}
|
|
.wt-step .emphasis {
|
|
font-weight: 700;
|
|
color: var(--text);
|
|
}
|
|
.wt-step .emphasis em {
|
|
font-style: normal;
|
|
color: var(--primary-deep);
|
|
}
|
|
|
|
/* 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 column — sticky, pins below nav while text scrolls */
|
|
.wt-device {
|
|
flex: 1;
|
|
max-width: 640px;
|
|
position: sticky;
|
|
top: calc(50vh - 240px);
|
|
align-self: flex-start;
|
|
}
|
|
.wt-device-frame {
|
|
border-radius: 14px;
|
|
overflow: hidden;
|
|
background: #fafafa;
|
|
box-shadow:
|
|
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);
|
|
position: relative;
|
|
}
|
|
.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;
|
|
}
|
|
.wt-topbar {
|
|
height: 28px;
|
|
background: #f0f0f0;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 12px;
|
|
gap: 5px;
|
|
border-bottom: 1px solid #e8e8e8;
|
|
}
|
|
.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; }
|
|
|
|
/* App recreation */
|
|
.wt-app {
|
|
display: flex;
|
|
min-height: 380px;
|
|
font-size: 13px;
|
|
color: #1a1a1a;
|
|
}
|
|
|
|
/* Sidebar — CSS-driven reveal */
|
|
.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;
|
|
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;
|
|
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;
|
|
}
|
|
|
|
/* 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;
|
|
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;
|
|
}
|
|
|
|
/* 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;
|
|
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; }
|
|
|
|
/* 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;
|
|
gap: 8px;
|
|
font-size: 12.5px;
|
|
color: #8a8ea9;
|
|
padding: 2px 0;
|
|
}
|
|
.wt-suggestion i { width: 14px; height: 14px; flex-shrink: 0; }
|
|
|
|
/* Pillar pills — CSS-driven reveal */
|
|
.wt-pillars {
|
|
display: flex;
|
|
gap: 16px;
|
|
justify-content: center;
|
|
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: 0;
|
|
padding: 0 20px;
|
|
}
|
|
.wt-progress { display: none; }
|
|
.wt-device {
|
|
order: -1;
|
|
position: sticky;
|
|
top: 72px;
|
|
max-width: 100%;
|
|
z-index: 1;
|
|
padding-bottom: 8px;
|
|
}
|
|
.wt-device-frame { max-height: 35vh; }
|
|
.wt-app { min-height: 0; max-height: calc(35vh - 22px); overflow: hidden; }
|
|
.wt-text {
|
|
flex: none;
|
|
width: 100%;
|
|
position: relative;
|
|
}
|
|
.wt-step-pin { min-height: 100vh; }
|
|
.wt-step-pin:last-child { min-height: 70vh; }
|
|
.wt-step {
|
|
position: sticky;
|
|
top: calc(72px + 35vh + 16px);
|
|
min-height: 0;
|
|
height: auto;
|
|
padding: 24px 16px;
|
|
background: rgba(244,237,243,0.97);
|
|
border-radius: 16px;
|
|
margin-bottom: 0;
|
|
}
|
|
.wt-device { max-width: 100%; }
|
|
.wt-app { min-height: 0; }
|
|
.wt-pillars { display: none; }
|
|
.wt-suggestions { display: none; }
|
|
.wt-main { padding: 14px 16px; }
|
|
.wt-greeting-name { font-size: 20px; }
|
|
.wt-greeting-label { font-size: 11px; }
|
|
.wt-topbar { height: 22px; }
|
|
.wt-topbar span { width: 6px; height: 6px; }
|
|
}
|
|
|
|
/* Walkthrough — Mobile */
|
|
@media (max-width: 640px) {
|
|
.walkthrough { padding: 24px 0 16px; }
|
|
.walkthrough-inner { padding: 0 16px; }
|
|
.wt-device { top: 68px; }
|
|
.wt-device-frame { max-height: 30vh; }
|
|
.wt-app { max-height: calc(30vh - 22px); }
|
|
.wt-step {
|
|
top: calc(68px + 30vh + 12px);
|
|
padding: 20px 12px;
|
|
}
|
|
.wt-main { padding: 10px 12px; }
|
|
.wt-greeting-name { font-size: 16px; }
|
|
.wt-greeting-name .wt-sparkle { font-size: 14px; }
|
|
.wt-greeting-label { font-size: 9px; }
|
|
.wt-sidebar { width: 30px; }
|
|
.wt-sidebar-logo { width: 18px; height: 18px; }
|
|
.wt-sidebar-icon { width: 22px; height: 22px; }
|
|
.wt-sidebar-icon i { width: 11px; height: 11px; }
|
|
.wt-sidebar-avatar { width: 22px; height: 22px; font-size: 7px; }
|
|
.wt-brief { font-size: 9px; }
|
|
.wt-chat-input { padding: 6px 8px 6px 12px; }
|
|
.wt-chat-input span { font-size: 10px; }
|
|
.wt-chat-send { width: 22px; height: 22px; }
|
|
.wt-chat-send i { width: 11px; height: 11px; }
|
|
.wt-suggestion { font-size: 9px; }
|
|
.wt-suggestion i { width: 11px; height: 11px; }
|
|
}
|
|
|
|
/* ═══════════════════════════════════════
|
|
HOW IT WORKS
|
|
═══════════════════════════════════════ */
|
|
.steps-header { text-align: center; margin-bottom: 64px; }
|
|
|
|
.steps {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 24px;
|
|
position: relative;
|
|
}
|
|
.steps::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 48px;
|
|
left: 15%;
|
|
right: 15%;
|
|
height: 2px;
|
|
background: linear-gradient(90deg, transparent, var(--primary), transparent);
|
|
opacity: 0.25;
|
|
}
|
|
|
|
.step-card {
|
|
text-align: center;
|
|
padding: 40px 24px;
|
|
border-radius: var(--radius);
|
|
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.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%;
|
|
background: rgba(251,200,129,0.12);
|
|
border: 1.5px solid rgba(251,200,129,0.25);
|
|
display: flex; align-items: center; justify-content: center;
|
|
margin: 0 auto 20px;
|
|
font-size: 1rem; font-weight: 700; color: var(--primary-deep);
|
|
}
|
|
.step-card h3 { margin-bottom: 8px; }
|
|
.step-card p { font-size: 0.92rem; color: var(--text-muted); line-height: 1.6; }
|
|
.step-card i { width: 22px; height: 22px; color: var(--primary-deep); margin-bottom: 14px; }
|
|
|
|
/* ═══════════════════════════════════════
|
|
FEATURES
|
|
═══════════════════════════════════════ */
|
|
.features-header { text-align: center; margin-bottom: 56px; }
|
|
|
|
.features-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 20px;
|
|
}
|
|
.feature-card {
|
|
padding: 28px;
|
|
border-radius: var(--radius);
|
|
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.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;
|
|
background: rgba(251,200,129,0.1);
|
|
display: flex; align-items: center; justify-content: center;
|
|
margin-bottom: 16px;
|
|
}
|
|
.feature-icon i { width: 20px; height: 20px; color: var(--primary-deep); }
|
|
.feature-card h3 { margin-bottom: 6px; font-size: 1rem; }
|
|
.feature-card p { font-size: 0.85rem; color: var(--text-muted); line-height: 1.55; }
|
|
|
|
.feature-status {
|
|
position: absolute;
|
|
top: 16px; right: 16px;
|
|
display: flex; align-items: center; gap: 5px;
|
|
font-size: 0.68rem; font-weight: 600;
|
|
letter-spacing: 0.04em; text-transform: uppercase;
|
|
}
|
|
.status-dot { width: 7px; height: 7px; border-radius: 50%; }
|
|
.status-beta .status-dot { background: #34c759; }
|
|
.status-beta { color: #2da44e; }
|
|
.status-soon .status-dot { background: var(--primary); animation: pulse-dot 2s ease-in-out infinite; }
|
|
.status-soon { color: var(--primary-deep); }
|
|
.status-roadmap .status-dot { background: var(--muted); }
|
|
.status-roadmap { color: var(--text-muted); }
|
|
|
|
/* ═══════════════════════════════════════
|
|
FOUNDER
|
|
═══════════════════════════════════════ */
|
|
.founder { max-width: 640px; margin: 0 auto; }
|
|
|
|
.founder-quote {
|
|
position: relative;
|
|
padding: 40px;
|
|
border-radius: var(--radius);
|
|
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';
|
|
position: absolute;
|
|
top: -8px; left: 28px;
|
|
font-size: 5rem; font-weight: 700; line-height: 1;
|
|
color: var(--primary); opacity: 0.18;
|
|
font-family: Georgia, serif;
|
|
}
|
|
.founder-quote p {
|
|
font-size: 1.05rem; line-height: 1.75;
|
|
color: var(--text); margin-bottom: 12px;
|
|
}
|
|
.founder-quote p:last-of-type { margin-bottom: 0; }
|
|
|
|
.founder-sig {
|
|
margin-top: 24px;
|
|
padding-top: 20px;
|
|
border-top: 1px solid var(--muted-soft);
|
|
display: flex; align-items: center; gap: 12px;
|
|
}
|
|
.founder-sig svg { width: 28px; height: 28px; flex-shrink: 0; }
|
|
.founder-sig .name { font-weight: 600; font-size: 0.95rem; }
|
|
.founder-sig .title { font-size: 0.82rem; color: var(--text-muted); }
|
|
|
|
/* ═══════════════════════════════════════
|
|
FINAL CTA
|
|
═══════════════════════════════════════ */
|
|
.final-cta {
|
|
text-align: center;
|
|
padding: 64px 24px;
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
.final-cta h2 { margin-bottom: 12px; }
|
|
.final-cta .subtitle {
|
|
font-size: 1.05rem; color: var(--text-muted); margin-bottom: 36px;
|
|
}
|
|
|
|
/* ═══════════════════════════════════════
|
|
FOOTER
|
|
═══════════════════════════════════════ */
|
|
footer {
|
|
padding: 40px 24px;
|
|
text-align: center;
|
|
border-top: 1px solid var(--muted-soft);
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
.footer-logo {
|
|
display: flex; align-items: center; justify-content: center;
|
|
gap: 8px; margin-bottom: 10px;
|
|
color: var(--text-muted); font-size: 0.95rem;
|
|
}
|
|
.footer-logo svg { width: 22px; height: 22px; }
|
|
.footer-logo .ai { font-weight: 700; }
|
|
footer .legal { font-size: 0.78rem; color: var(--muted); }
|
|
footer .legal a {
|
|
color: var(--text-muted);
|
|
text-decoration: underline;
|
|
text-underline-offset: 2px;
|
|
}
|
|
footer .legal a:hover { color: var(--text); }
|
|
|
|
/* ═══════════════════════════════════════
|
|
GSAP initial states
|
|
═══════════════════════════════════════ */
|
|
.gs-reveal { opacity: 0; transform: translateY(32px); }
|
|
|
|
/* ═══════════════════════════════════════
|
|
RESPONSIVE
|
|
═══════════════════════════════════════ */
|
|
@media (max-width: 900px) {
|
|
.steps { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
|
|
.steps::before { display: none; }
|
|
.features-grid { grid-template-columns: repeat(2, 1fr); }
|
|
}
|
|
@media (max-width: 640px) {
|
|
.hero { padding: 100px 20px 48px; }
|
|
.hero-compass { width: 88px; height: 88px; }
|
|
.compass-wrapper { margin-bottom: 28px; }
|
|
.compass-wrapper::before { width: 200px; height: 200px; }
|
|
.waitlist-form { flex-direction: column; }
|
|
.waitlist-form .btn-primary { width: 100%; }
|
|
.features-grid { grid-template-columns: 1fr; }
|
|
.pillars { flex-direction: column; align-items: center; }
|
|
nav { padding: 0 16px; }
|
|
.nav-right { gap: 8px; }
|
|
.lang-switcher summary { padding: 6px; gap: 0; }
|
|
.lang-switcher .lang-label { display: none; }
|
|
.nav-right .btn-primary { padding: 8px 16px; font-size: 0.78rem; }
|
|
.section { padding: 48px 20px; }
|
|
.final-cta { padding: 48px 20px; }
|
|
.founder-quote { padding: 28px; }
|
|
}
|
|
|
|
/* ═══════════════════════════════════════
|
|
REDUCED MOTION
|
|
═══════════════════════════════════════ */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*, *::before, *::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
.gs-reveal { opacity: 1; transform: none; }
|
|
.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>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- ═══════ NAV ═══════ -->
|
|
<nav id="nav" role="navigation" aria-label="Main navigation">
|
|
<a href="#" class="nav-logo" aria-label="adiuvAI home">
|
|
<svg viewBox="0 0 64 64" fill="none" aria-hidden="true">
|
|
<path d="M32,4 L48,32 L16,32 Z" fill="#fbc881"/>
|
|
<path d="M16,32 L48,32 L32,60 Z" fill="#040404"/>
|
|
<circle cx="32" cy="32" r="2.5" fill="#040404" opacity="0.18"/>
|
|
</svg><span>adiuv<span class="ai">AI</span></span>
|
|
</a>
|
|
<div class="nav-right">
|
|
<details id="lang-dropdown" class="lang-switcher">
|
|
<summary class="lang-current" aria-label="Select language"><i data-lucide="globe" style="width:16px;height:16px;"></i> <span id="lang-current-label" class="lang-label">EN</span></summary>
|
|
<div class="lang-options">
|
|
<button class="lang-option active" data-lang="en">EN</button>
|
|
<button class="lang-option" data-lang="it">IT</button>
|
|
<button class="lang-option" data-lang="es">ES</button>
|
|
<button class="lang-option" data-lang="fr">FR</button>
|
|
<button class="lang-option" data-lang="de">DE</button>
|
|
</div>
|
|
</details>
|
|
<a href="#final-cta" class="btn btn-primary" data-i18n="navJoinWaitlist">Join the waitlist</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- ═══════ HERO ═══════ -->
|
|
<section class="hero" id="hero">
|
|
<div class="particles" id="particles" aria-hidden="true"></div>
|
|
|
|
<div class="compass-wrapper hero-el">
|
|
<svg class="hero-compass" viewBox="0 0 64 64" fill="none" aria-hidden="true">
|
|
<g class="compass-needle-group">
|
|
<path d="M32,4 L48,32 L16,32 Z" fill="#fbc881"/>
|
|
<path d="M16,32 L48,32 L32,60 Z" fill="#040404"/>
|
|
<line x1="16" y1="32" x2="48" y2="32" stroke="#040404" stroke-width="0.5" opacity="0.12"/>
|
|
<circle cx="32" cy="32" r="2.5" fill="#040404" opacity="0.18"/>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
|
|
<div class="hero-badge hero-el">
|
|
<span class="dot"></span> <span data-i18n="heroBadge">Beta launching June 2026</span>
|
|
</div>
|
|
|
|
<p class="hero-tagline hero-el" data-i18n="heroTagline">Meet your new chief of staff.</p>
|
|
|
|
<h1 class="hero-el" data-i18n-html="heroH1">
|
|
What if AI could be<br>
|
|
<span class="accent">your secretary?</span>
|
|
</h1>
|
|
|
|
<p class="hero-sub hero-el" data-i18n="heroSub">
|
|
Not a chatbot. Not another app. A real AI that reads your email, knows your projects, and tells you what to focus on — without ever seeing your data.
|
|
</p>
|
|
|
|
<form class="waitlist-form hero-el" id="waitlist-hero" aria-label="Join the waitlist">
|
|
<input type="email" name="email" placeholder="your@email.com" required autocomplete="email" aria-label="Email address">
|
|
<button type="submit" class="btn btn-primary" data-i18n="heroButton">Get early access</button>
|
|
</form>
|
|
<p class="form-note hero-el"><span data-i18n="heroFormNote">Free to start · No credit card</span> · <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>
|
|
<p data-i18n="heroSuccessTitle">Check your inbox!</p>
|
|
<p class="sub" data-i18n="heroSuccessSub">We sent you a confirmation link. Click it to secure your spot.</p>
|
|
</div>
|
|
|
|
<div class="scroll-hint" aria-hidden="true">
|
|
<i data-lucide="chevron-down" style="width:16px; height:16px;"></i>
|
|
<span data-i18n="scrollHint">scroll</span>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ═══════ 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-pin">
|
|
<div class="wt-step" data-step="0">
|
|
<p class="wt-step-num" data-i18n="wtStep0Label">The problem</p>
|
|
<h3 data-i18n="wtStep0Title">Your important emails hide between newsletters.</h3>
|
|
<p data-i18n="wtStep0Desc">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-pin">
|
|
<div class="wt-step" data-step="1">
|
|
<p class="wt-step-num" data-i18n="wtStep1Label">The greeting</p>
|
|
<h3 data-i18n="wtStep1Title">Every morning, your AI secretary is ready.</h3>
|
|
<p data-i18n="wtStep1Desc">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-pin">
|
|
<div class="wt-step" data-step="2">
|
|
<p class="wt-step-num" data-i18n="wtStep2Label">The brief</p>
|
|
<h3 data-i18n="wtStep2Title">Meeting notes sit in a doc you'll never open again.</h3>
|
|
<p data-i18n="wtStep2Desc">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-pin">
|
|
<div class="wt-step" data-step="3">
|
|
<p class="wt-step-num" data-i18n="wtStep3Label">The result</p>
|
|
<h3 class="emphasis" data-i18n-html="wtStep3Title">You don't need another tool.<br>You need <em>a secretary</em>.</h3>
|
|
<p data-i18n="wtStep3Desc">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>
|
|
|
|
<!-- Device column -->
|
|
<div class="wt-device">
|
|
<div class="wt-device-frame">
|
|
<div class="wt-topbar"><span></span><span></span><span></span></div>
|
|
<div class="wt-app">
|
|
<!-- Sidebar -->
|
|
<div class="wt-sidebar" id="wt-sidebar">
|
|
<svg class="wt-sidebar-logo" viewBox="0 0 64 64" fill="none">
|
|
<path d="M32,4 L48,32 L16,32 Z" fill="#fbc881"/>
|
|
<path d="M16,32 L48,32 L32,60 Z" fill="#040404"/>
|
|
</svg>
|
|
<div class="wt-sidebar-icon active"><i data-lucide="house"></i></div>
|
|
<div class="wt-sidebar-icon"><i data-lucide="chart-gantt"></i></div>
|
|
<div class="wt-sidebar-icon"><i data-lucide="clipboard-check"></i></div>
|
|
<div class="wt-sidebar-icon"><i data-lucide="folder-kanban"></i></div>
|
|
<div class="wt-sidebar-avatar">JD</div>
|
|
</div>
|
|
<!-- Main -->
|
|
<div class="wt-main">
|
|
<div class="wt-greeting" id="wt-greeting">
|
|
<div class="wt-greeting-label" data-i18n="wtGreetingLabel">Good morning,</div>
|
|
<div class="wt-greeting-name">James <span class="wt-sparkle">✦</span></div>
|
|
</div>
|
|
<div class="wt-brief" id="wt-brief" data-i18n="wtBrief">
|
|
Good morning! Just a quick reminder to wrap up task X today and reply to that project email. Also, please don't forget that the documentation and the estimate are due tomorrow.
|
|
</div>
|
|
<div class="wt-chat" id="wt-chat">
|
|
<div class="wt-chat-input">
|
|
<span data-i18n="wtChatPlaceholder">Ask me anything...</span>
|
|
<div class="wt-chat-send"><i data-lucide="arrow-up"></i></div>
|
|
</div>
|
|
</div>
|
|
<div class="wt-suggestions" id="wt-suggestions">
|
|
<div class="wt-suggestion"><i data-lucide="list-todo"></i> <span data-i18n="wtSuggestion1">What's on my plate today?</span></div>
|
|
<div class="wt-suggestion"><i data-lucide="trending-up"></i> <span data-i18n="wtSuggestion2">Summarize this week</span></div>
|
|
<div class="wt-suggestion"><i data-lucide="circle-alert"></i> <span data-i18n="wtSuggestion3">Any overdue tasks?</span></div>
|
|
<div class="wt-suggestion"><i data-lucide="lightbulb"></i> <span data-i18n="wtSuggestion4">Suggest next actions</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pillars wt-pillars" id="wt-pillars">
|
|
<div class="pillar"><i data-lucide="sparkles"></i> <span data-i18n="wtPillar1">AI Secretary</span></div>
|
|
<div class="pillar"><i data-lucide="lock"></i> <span data-i18n="wtPillar2">Private by Design</span></div>
|
|
<div class="pillar"><i data-lucide="scale"></i> <span data-i18n="wtPillar3">EU AI Act Compliant</span></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ═══════ HOW IT WORKS ═══════ -->
|
|
<section class="section" id="how-it-works">
|
|
<div class="container">
|
|
<div class="steps-header">
|
|
<p class="section-label gs-reveal" data-i18n="howLabel">How it works</p>
|
|
<h2 class="gs-reveal" data-i18n="howHeading">Three steps to clarity.</h2>
|
|
</div>
|
|
<div class="steps">
|
|
<div class="step-card gs-reveal">
|
|
<div class="step-num">1</div>
|
|
<i data-lucide="plug"></i>
|
|
<h3 data-i18n="step1Title">Connect</h3>
|
|
<p data-i18n="step1Desc">Link your Gmail, Outlook, or local folders. adiuvAI starts learning what matters to you.</p>
|
|
</div>
|
|
<div class="step-card gs-reveal">
|
|
<div class="step-num">2</div>
|
|
<i data-lucide="scan-search"></i>
|
|
<h3 data-i18n="step2Title">Extract</h3>
|
|
<p data-i18n="step2Desc">AI agents scan your email, files, and meetings. They detect tasks, deadlines, and key info — automatically.</p>
|
|
</div>
|
|
<div class="step-card gs-reveal">
|
|
<div class="step-num">3</div>
|
|
<i data-lucide="sunrise"></i>
|
|
<h3 data-i18n="step3Title">Brief</h3>
|
|
<p data-i18n="step3Desc">Every morning, get a personalized briefing. Today's priorities, what changed overnight, what needs your attention.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ═══════ FEATURES ═══════ -->
|
|
<section class="section" id="features">
|
|
<div class="container">
|
|
<div class="features-header">
|
|
<p class="section-label gs-reveal" data-i18n="featLabel">Features</p>
|
|
<h2 class="gs-reveal" data-i18n-html="featHeading">Built for busy people,<br>not busy work.</h2>
|
|
</div>
|
|
<div class="features-grid">
|
|
<div class="feature-card gs-reveal">
|
|
<div class="feature-status status-beta"><span class="status-dot"></span> <span data-i18n="statusBeta">Beta</span></div>
|
|
<div class="feature-icon"><i data-lucide="sun"></i></div>
|
|
<h3 data-i18n="feat1Title">Daily Brief & Carousel</h3>
|
|
<p data-i18n="feat1Desc">Start every day with clarity. Swipe through your priorities like stories.</p>
|
|
</div>
|
|
<div class="feature-card gs-reveal">
|
|
<div class="feature-status status-beta"><span class="status-dot"></span> <span data-i18n="statusBeta">Beta</span></div>
|
|
<div class="feature-icon"><i data-lucide="mail-search"></i></div>
|
|
<h3 data-i18n="feat2Title">Email → Task Extraction</h3>
|
|
<p data-i18n="feat2Desc">Gmail and Outlook integration. Important emails become tasks automatically.</p>
|
|
</div>
|
|
<div class="feature-card gs-reveal">
|
|
<div class="feature-status status-beta"><span class="status-dot"></span> <span data-i18n="statusBeta">Beta</span></div>
|
|
<div class="feature-icon"><i data-lucide="layout-list"></i></div>
|
|
<h3 data-i18n="feat3Title">Projects & Tasks</h3>
|
|
<p data-i18n="feat3Desc">Full project management with priorities, timelines, and milestone tracking.</p>
|
|
</div>
|
|
<div class="feature-card gs-reveal">
|
|
<div class="feature-status status-beta"><span class="status-dot"></span> <span data-i18n="statusBeta">Beta</span></div>
|
|
<div class="feature-icon"><i data-lucide="file-text"></i></div>
|
|
<h3 data-i18n="feat4Title">Smart Notes</h3>
|
|
<p data-i18n="feat4Desc">Markdown notes with AI-powered semantic search across your workspace.</p>
|
|
</div>
|
|
<div class="feature-card gs-reveal">
|
|
<div class="feature-status status-beta"><span class="status-dot"></span> <span data-i18n="statusBeta">Beta</span></div>
|
|
<div class="feature-icon"><i data-lucide="send"></i></div>
|
|
<h3 data-i18n="feat5Title">Telegram Bot</h3>
|
|
<p data-i18n="feat5Desc">Talk to your secretary on Telegram. Check tasks, get your brief, add notes.</p>
|
|
</div>
|
|
<div class="feature-card gs-reveal">
|
|
<div class="feature-status status-beta"><span class="status-dot"></span> <span data-i18n="statusBeta">Beta</span></div>
|
|
<div class="feature-icon"><i data-lucide="folder-search"></i></div>
|
|
<h3 data-i18n="feat6Title">File Monitoring</h3>
|
|
<p data-i18n="feat6Desc">AI agents watch your local folders and extract important information.</p>
|
|
</div>
|
|
<div class="feature-card gs-reveal">
|
|
<div class="feature-status status-soon"><span class="status-dot"></span> <span data-i18n="statusSoon">Soon</span></div>
|
|
<div class="feature-icon"><i data-lucide="mic"></i></div>
|
|
<h3 data-i18n="feat7Title">Voice Assistant</h3>
|
|
<p data-i18n="feat7Desc">Joins your calls, takes notes, suggests next steps — in real-time.</p>
|
|
</div>
|
|
<div class="feature-card gs-reveal">
|
|
<div class="feature-status status-soon"><span class="status-dot"></span> <span data-i18n="statusSoon">Soon</span></div>
|
|
<div class="feature-icon"><i data-lucide="smartphone"></i></div>
|
|
<h3 data-i18n="feat8Title">Mobile App</h3>
|
|
<p data-i18n="feat8Desc">Your daily brief, wherever you are. Review tasks and stay in sync.</p>
|
|
</div>
|
|
<div class="feature-card gs-reveal">
|
|
<div class="feature-status status-roadmap"><span class="status-dot"></span> <span data-i18n="statusRoadmap">Roadmap</span></div>
|
|
<div class="feature-icon"><i data-lucide="users"></i></div>
|
|
<h3 data-i18n="feat9Title">Team Workspace</h3>
|
|
<p data-i18n="feat9Desc">Shared workspace, SSO, and team coordination — coming for organizations.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ═══════ FOUNDER ═══════ -->
|
|
<section class="section" id="founder">
|
|
<div class="container">
|
|
<div class="founder gs-reveal">
|
|
<p class="section-label" data-i18n="founderLabel">From the maker</p>
|
|
<div class="founder-quote">
|
|
<p data-i18n="founderP1">I built adiuvAI because I was tired of promising my clients intelligent AI solutions while my own workday was chaos — emails piling up, tasks scattered across apps, meetings with no follow-through.</p>
|
|
<p data-i18n="founderP2">adiuvAI is the tool I needed: an AI that actually reads my world and tells me what to do, without shipping my data to someone else's server.</p>
|
|
<p data-i18n="founderP3">If that resonates, join the waitlist. Early adopters will shape what we build.</p>
|
|
<div class="founder-sig">
|
|
<svg viewBox="0 0 64 64" fill="none" aria-hidden="true">
|
|
<path d="M32,4 L48,32 L16,32 Z" fill="#fbc881"/>
|
|
<path d="M16,32 L48,32 L32,60 Z" fill="#040404"/>
|
|
</svg>
|
|
<div>
|
|
<div class="name">Roberto Musso</div>
|
|
<div class="title" data-i18n="founderTitle">Founder</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ═══════ FINAL CTA ═══════ -->
|
|
<section class="final-cta" id="final-cta">
|
|
<div class="container">
|
|
<h2 class="gs-reveal" data-i18n-html="ctaHeading">Be the first to meet<br>your AI secretary.</h2>
|
|
<p class="subtitle gs-reveal" data-i18n="ctaSub">Beta launches June 2026. Early adopters get free priority access and a voice in what we build next.</p>
|
|
|
|
<form class="waitlist-form gs-reveal" id="waitlist-footer" aria-label="Join the waitlist">
|
|
<input type="email" name="email" placeholder="your@email.com" required autocomplete="email" aria-label="Email address">
|
|
<button type="submit" class="btn btn-primary" data-i18n="ctaButton">Join the waitlist</button>
|
|
</form>
|
|
<p class="form-note gs-reveal"><span data-i18n="ctaFormNote">No spam, ever.</span> <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>
|
|
<p data-i18n="ctaSuccessTitle">Check your inbox!</p>
|
|
<p class="sub" data-i18n="ctaSuccessSub">We sent you a confirmation link. Click it to secure your spot.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ═══════ FOOTER ═══════ -->
|
|
<footer>
|
|
<div class="footer-logo">
|
|
<svg viewBox="0 0 64 64" fill="none" aria-hidden="true">
|
|
<path d="M32,4 L48,32 L16,32 Z" fill="#fbc881"/>
|
|
<path d="M16,32 L48,32 L32,60 Z" fill="currentColor"/>
|
|
</svg><span>adiuv<span class="ai">AI</span></span>
|
|
</div>
|
|
<p class="legal">
|
|
<span data-i18n="footerCopyright">© 2026 adiuvAI. All rights reserved.</span>
|
|
·
|
|
<a href="./privacy.html" data-i18n="footerPrivacy">Privacy</a>
|
|
·
|
|
<a href="./terms.html" data-i18n="footerTerms">Terms</a>
|
|
</p>
|
|
</footer>
|
|
|
|
<!-- ═══════════════════════════════════════
|
|
SCRIPTS
|
|
═══════════════════════════════════════ -->
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
// ─── Init Lucide Icons ───
|
|
if (typeof lucide !== 'undefined') lucide.createIcons();
|
|
|
|
// ─── Generate floating particles ───
|
|
const pc = document.getElementById('particles');
|
|
if (pc) {
|
|
for (let i = 0; i < 18; i++) {
|
|
const d = document.createElement('div');
|
|
d.classList.add('particle');
|
|
d.style.left = `${10 + Math.random() * 80}%`;
|
|
d.style.top = `${40 + Math.random() * 50}%`;
|
|
d.style.setProperty('--dur', `${7 + Math.random() * 8}s`);
|
|
d.style.setProperty('--delay', `${Math.random() * 12}s`);
|
|
d.style.setProperty('--travel', `${-(100 + Math.random() * 200)}px`);
|
|
d.style.setProperty('--sway', `${-40 + Math.random() * 80}px`);
|
|
d.style.setProperty('--peak', `${0.15 + Math.random() * 0.3}`);
|
|
const size = 2 + Math.random() * 4;
|
|
d.style.width = d.style.height = `${size}px`;
|
|
pc.appendChild(d);
|
|
}
|
|
}
|
|
|
|
// ─── Bail if reduced motion ───
|
|
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
|
|
|
|
// ─── GSAP ───
|
|
gsap.registerPlugin(ScrollTrigger);
|
|
|
|
// Nav background on scroll
|
|
ScrollTrigger.create({
|
|
trigger: '#hero',
|
|
start: 'bottom top+=64',
|
|
onLeave: () => document.getElementById('nav').classList.add('scrolled'),
|
|
onEnterBack: () => document.getElementById('nav').classList.remove('scrolled'),
|
|
});
|
|
|
|
// ─── Hero entrance ───
|
|
const tl = gsap.timeline({ defaults: { ease: 'power3.out' } });
|
|
tl.from('.compass-wrapper', { opacity: 0, scale: 0.5, duration: 1, delay: 0.15 })
|
|
.from('.hero-badge', { opacity: 0, y: 16, duration: 0.6 }, '-=0.5')
|
|
.from('.hero-tagline', { opacity: 0, y: 16, duration: 0.6 }, '-=0.4')
|
|
.from('.hero h1', { opacity: 0, y: 24, duration: 0.8 }, '-=0.4')
|
|
.from('.hero-sub', { opacity: 0, y: 16, duration: 0.6 }, '-=0.5')
|
|
.from('#waitlist-hero', { opacity: 0, y: 16, duration: 0.6 }, '-=0.4')
|
|
.from('.form-note.hero-el', { opacity: 0, duration: 0.5 }, '-=0.2')
|
|
.from('.scroll-hint', { opacity: 0, duration: 0.8 }, '-=0.1');
|
|
|
|
// ─── Compass follows mouse (hero only) ───
|
|
const heroEl = document.getElementById('hero');
|
|
const needle = document.querySelector('.compass-needle-group');
|
|
|
|
heroEl.addEventListener('mousemove', (e) => {
|
|
const svg = document.querySelector('.hero-compass');
|
|
const r = svg.getBoundingClientRect();
|
|
const cx = r.left + r.width / 2;
|
|
const cy = r.top + r.height / 2;
|
|
const angle = Math.atan2(e.clientY - cy, e.clientX - cx) * (180 / Math.PI);
|
|
gsap.to(needle, {
|
|
rotation: angle + 90,
|
|
duration: 1,
|
|
ease: 'power2.out',
|
|
svgOrigin: '32 32',
|
|
});
|
|
});
|
|
|
|
heroEl.addEventListener('mouseleave', () => {
|
|
gsap.to(needle, {
|
|
rotation: 0,
|
|
duration: 2,
|
|
ease: 'elastic.out(1, 0.35)',
|
|
svgOrigin: '32 32',
|
|
});
|
|
});
|
|
|
|
// ─── Walkthrough: CSS sticky + IntersectionObserver ───
|
|
const wtSection = document.getElementById('walkthrough');
|
|
const wtSteps = document.querySelectorAll('.wt-step');
|
|
const wtProgress = document.getElementById('wt-progress');
|
|
|
|
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,
|
|
});
|
|
|
|
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 ───
|
|
gsap.utils.toArray('.gs-reveal').forEach((el, i) => {
|
|
gsap.fromTo(el,
|
|
{ opacity: 0, y: 32 },
|
|
{
|
|
opacity: 1,
|
|
y: 0,
|
|
duration: 0.8,
|
|
ease: 'power2.out',
|
|
scrollTrigger: {
|
|
trigger: el,
|
|
start: 'top 87%',
|
|
toggleActions: 'play none none reverse',
|
|
},
|
|
}
|
|
);
|
|
});
|
|
|
|
// ─── Fade out scroll hint on scroll ───
|
|
gsap.to('.scroll-hint', {
|
|
opacity: 0,
|
|
scrollTrigger: {
|
|
trigger: '#hero',
|
|
start: 'top top',
|
|
end: '+=200',
|
|
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 ───
|
|
function initForm(formId, successId) {
|
|
const form = document.getElementById(formId);
|
|
if (!form) return;
|
|
|
|
form.addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
const input = form.querySelector('input[type="email"]');
|
|
const email = input.value.trim();
|
|
if (!email) return;
|
|
|
|
const btn = form.querySelector('button');
|
|
const original = btn.textContent;
|
|
const lang = localStorage.getItem('adiuvai-lang') || 'en';
|
|
const t = typeof I18N !== 'undefined' ? I18N[lang] || I18N.en : null;
|
|
btn.textContent = t ? t.joining : 'Joining…';
|
|
btn.disabled = true;
|
|
|
|
try {
|
|
// POST to your FastAPI backend — create a route at: POST /api/v1/waitlist
|
|
// Expected body: { "email": "user@example.com" }
|
|
// Replace the URL below with your API domain in production.
|
|
const res = await fetch('/api/v1/waitlist', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ email, lang }),
|
|
});
|
|
|
|
if (!res.ok) throw new Error(res.statusText);
|
|
|
|
// Success
|
|
form.style.display = 'none';
|
|
const note = form.nextElementSibling;
|
|
if (note && note.classList.contains('form-note')) note.style.display = 'none';
|
|
document.getElementById(successId).style.display = 'block';
|
|
} catch {
|
|
btn.textContent = t ? t.tryAgain : 'Try again';
|
|
btn.disabled = false;
|
|
setTimeout(() => {
|
|
btn.textContent = original;
|
|
btn.disabled = false;
|
|
}, 2000);
|
|
}
|
|
});
|
|
}
|
|
initForm('waitlist-hero', 'success-hero');
|
|
initForm('waitlist-footer', 'success-footer');
|
|
</script>
|
|
|
|
<!-- Structured Data -->
|
|
<script type="application/ld+json">
|
|
{
|
|
"@context": "https://schema.org",
|
|
"@type": "SoftwareApplication",
|
|
"name": "adiuvAI",
|
|
"description": "AI-powered personal secretary that reads your email, organizes your work, and briefs you every morning — all without your data leaving your device.",
|
|
"url": "https://adiuvai.com",
|
|
"applicationCategory": "ProductivityApplication",
|
|
"operatingSystem": "Windows, macOS, Linux",
|
|
"offers": {
|
|
"@type": "Offer",
|
|
"price": "0",
|
|
"priceCurrency": "EUR",
|
|
"availability": "https://schema.org/PreOrder"
|
|
},
|
|
"author": {
|
|
"@type": "Person",
|
|
"name": "Roberto Musso"
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<script defer src='https://static.cloudflareinsights.com/beacon.min.js' data-cf-beacon='{"token": "33a52748219640618115655d931ddb87"}'></script>
|
|
<script src="i18n.js" defer></script>
|
|
</body>
|
|
</html>
|