5ce8fdabe9
Some checks failed
Deploy HTML to Docker LXC / deploy (push) Failing after 3s
- Scrollytelling landing page (GSAP ScrollTrigger, interactive compass, glassmorphism) - Privacy policy (GDPR, local-first architecture, AI provider disclosure) - Terms of service (EU law, beta program, data ownership) - Deploy workflow updated to include all new files and assets
1178 lines
43 KiB
HTML
1178 lines
43 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.">
|
|
<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">
|
|
<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">
|
|
|
|
<!-- 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.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%);
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
|
|
/* Subtle grain texture */
|
|
body::after {
|
|
content: '';
|
|
position: fixed;
|
|
inset: 0;
|
|
opacity: 0.025;
|
|
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;
|
|
}
|
|
|
|
.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: 10px;
|
|
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); }
|
|
|
|
.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: 120px 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;
|
|
}
|
|
|
|
/* ═══════════════════════════════════════
|
|
PROBLEM — Scrollytelling
|
|
═══════════════════════════════════════ */
|
|
.problem {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
.problem-lines {
|
|
max-width: 700px;
|
|
margin: 0 auto;
|
|
text-align: center;
|
|
}
|
|
.problem-line {
|
|
font-size: clamp(1.4rem, 3vw, 2rem);
|
|
font-weight: 400;
|
|
letter-spacing: -0.02em;
|
|
line-height: 1.5;
|
|
margin-bottom: 28px;
|
|
color: var(--text-muted);
|
|
}
|
|
.problem-conclusion {
|
|
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 {
|
|
font-style: normal;
|
|
color: var(--primary-deep);
|
|
}
|
|
|
|
/* ═══════════════════════════════════════
|
|
THE REVEAL
|
|
═══════════════════════════════════════ */
|
|
.reveal { text-align: center; }
|
|
.reveal h2 { margin-bottom: 56px; }
|
|
|
|
.device-frame {
|
|
max-width: 840px;
|
|
margin: 0 auto 56px;
|
|
border-radius: 16px;
|
|
overflow: hidden;
|
|
background: #fff;
|
|
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;
|
|
}
|
|
.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);
|
|
}
|
|
.device-topbar {
|
|
height: 32px;
|
|
background: #f8f8f8;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 14px;
|
|
gap: 6px;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
.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; }
|
|
|
|
.pillars {
|
|
display: flex;
|
|
gap: 16px;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
.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);
|
|
}
|
|
.pillar:hover {
|
|
background: rgba(255,255,255,0.7);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 20px rgba(0,0,0,0.04);
|
|
}
|
|
.pillar i { width: 18px; height: 18px; color: var(--primary-deep); }
|
|
|
|
/* ═══════════════════════════════════════
|
|
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: var(--card-bg);
|
|
backdrop-filter: blur(16px);
|
|
border: 1px solid var(--card-border);
|
|
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);
|
|
}
|
|
.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: var(--card-bg);
|
|
backdrop-filter: blur(16px);
|
|
border: 1px solid var(--card-border);
|
|
transition: all var(--transition);
|
|
position: relative;
|
|
}
|
|
.feature-card:hover {
|
|
background: rgba(255,255,255,0.65);
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 12px 32px rgba(0,0,0,0.04);
|
|
}
|
|
.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: var(--card-bg);
|
|
backdrop-filter: blur(16px);
|
|
border: 1px solid var(--card-border);
|
|
}
|
|
.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: 120px 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 {
|
|
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; }
|
|
.device-frame { transform: none; }
|
|
.device-frame:hover { transform: none; }
|
|
.section { padding: 80px 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; }
|
|
.problem-line, .problem-conclusion { opacity: 1 !important; transform: 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>
|
|
adiuv<span class="ai">AI</span>
|
|
</a>
|
|
<a href="#final-cta" class="btn btn-primary">Join the waitlist</a>
|
|
</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> Beta launching June 2026
|
|
</div>
|
|
|
|
<p class="hero-tagline hero-el">Meet your new chief of staff.</p>
|
|
|
|
<h1 class="hero-el">
|
|
What if AI could be<br>
|
|
<span class="accent">your secretary?</span>
|
|
</h1>
|
|
|
|
<p class="hero-sub hero-el">
|
|
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">Get early access</button>
|
|
</form>
|
|
<p class="form-note hero-el">Free to start · No credit card · Early adopters get priority</p>
|
|
|
|
<div class="form-success" id="success-hero" role="status">
|
|
<div class="check-icon"><i data-lucide="check" style="color: var(--primary-deep); width:24px; height:24px;"></i></div>
|
|
<p>You're on the list!</p>
|
|
<p class="sub">We'll reach out when the beta launches.</p>
|
|
</div>
|
|
|
|
<div class="scroll-hint" aria-hidden="true">
|
|
<i data-lucide="chevron-down" style="width:16px; height:16px;"></i>
|
|
scroll
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ═══════ SOCIAL PROOF BAR ═══════ -->
|
|
<div class="proof-bar" role="complementary">
|
|
Gmail, Outlook & Teams
|
|
<span class="sep">·</span>
|
|
100% on your device
|
|
</div>
|
|
|
|
<!-- ═══════ THE PROBLEM — Scrollytelling ═══════ -->
|
|
<section class="section problem" id="problem">
|
|
<div class="problem-lines">
|
|
<p class="problem-line">Your important emails hide between newsletters.</p>
|
|
<p class="problem-line">Your tasks live in three different apps.</p>
|
|
<p class="problem-line">Meeting notes sit in a doc you'll never open again.</p>
|
|
<p class="problem-conclusion">You don't need another tool.<br>You need <em>a secretary</em>.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ═══════ THE REVEAL ═══════ -->
|
|
<section class="section reveal" id="reveal">
|
|
<div class="container">
|
|
<p class="section-label gs-reveal">The product</p>
|
|
<h2 class="gs-reveal">Your daily brief, every morning.</h2>
|
|
|
|
<div class="device-frame gs-reveal">
|
|
<div class="device-topbar" aria-hidden="true">
|
|
<div class="device-dot"></div>
|
|
<div class="device-dot"></div>
|
|
<div class="device-dot"></div>
|
|
</div>
|
|
<!-- Screenshot of the adiuvAI desktop app -->
|
|
<img src="./assets/home.png"
|
|
alt="adiuvAI dashboard showing a personalized morning brief with tasks, priorities, and AI chat assistant"
|
|
loading="lazy" width="1920" height="1079">
|
|
</div>
|
|
|
|
<div class="pillars">
|
|
<div class="pillar gs-reveal"><i data-lucide="sparkles"></i> AI Secretary</div>
|
|
<div class="pillar gs-reveal"><i data-lucide="lock"></i> Private by Design</div>
|
|
<div class="pillar gs-reveal"><i data-lucide="scale"></i> EU AI Act Compliant</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">How it works</p>
|
|
<h2 class="gs-reveal">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>Connect</h3>
|
|
<p>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>Extract</h3>
|
|
<p>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>Brief</h3>
|
|
<p>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">Features</p>
|
|
<h2 class="gs-reveal">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> Beta</div>
|
|
<div class="feature-icon"><i data-lucide="sun"></i></div>
|
|
<h3>Daily Brief & Carousel</h3>
|
|
<p>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> Beta</div>
|
|
<div class="feature-icon"><i data-lucide="mail-search"></i></div>
|
|
<h3>Email → Task Extraction</h3>
|
|
<p>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> Beta</div>
|
|
<div class="feature-icon"><i data-lucide="layout-list"></i></div>
|
|
<h3>Projects & Tasks</h3>
|
|
<p>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> Beta</div>
|
|
<div class="feature-icon"><i data-lucide="file-text"></i></div>
|
|
<h3>Smart Notes</h3>
|
|
<p>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> Beta</div>
|
|
<div class="feature-icon"><i data-lucide="send"></i></div>
|
|
<h3>Telegram Bot</h3>
|
|
<p>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> Beta</div>
|
|
<div class="feature-icon"><i data-lucide="folder-search"></i></div>
|
|
<h3>File Monitoring</h3>
|
|
<p>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> Soon</div>
|
|
<div class="feature-icon"><i data-lucide="mic"></i></div>
|
|
<h3>Voice Assistant</h3>
|
|
<p>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> Soon</div>
|
|
<div class="feature-icon"><i data-lucide="smartphone"></i></div>
|
|
<h3>Mobile App</h3>
|
|
<p>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> Roadmap</div>
|
|
<div class="feature-icon"><i data-lucide="users"></i></div>
|
|
<h3>Team Workspace</h3>
|
|
<p>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">From the maker</p>
|
|
<div class="founder-quote">
|
|
<p>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>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>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">CEO</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ═══════ FINAL CTA ═══════ -->
|
|
<section class="final-cta" id="final-cta">
|
|
<div class="container">
|
|
<h2 class="gs-reveal">Be the first to meet<br>your AI secretary.</h2>
|
|
<p class="subtitle gs-reveal">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">Join the waitlist</button>
|
|
</form>
|
|
<p class="form-note gs-reveal">No spam, ever. Unsubscribe anytime.</p>
|
|
|
|
<div class="form-success" id="success-footer" role="status">
|
|
<div class="check-icon"><i data-lucide="check" style="color: var(--primary-deep); width:24px; height:24px;"></i></div>
|
|
<p>You're on the list!</p>
|
|
<p class="sub">We'll reach out when the beta launches.</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>
|
|
adiuv<span class="ai">AI</span>
|
|
</div>
|
|
<p class="legal">
|
|
© 2026 adiuvAI. All rights reserved.
|
|
·
|
|
<a href="./privacy.html">Privacy</a>
|
|
·
|
|
<a href="./terms.html">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',
|
|
});
|
|
});
|
|
|
|
// ─── 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',
|
|
scrollTrigger: {
|
|
trigger: el,
|
|
start: 'top 82%',
|
|
end: 'top 58%',
|
|
scrub: 0.5,
|
|
},
|
|
});
|
|
});
|
|
|
|
// ─── 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,
|
|
},
|
|
});
|
|
});
|
|
|
|
// ─── 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;
|
|
btn.textContent = '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 }),
|
|
});
|
|
|
|
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 = 'Try again';
|
|
btn.disabled = false;
|
|
setTimeout(() => {
|
|
btn.textContent = original;
|
|
btn.disabled = false;
|
|
}, 2000);
|
|
}
|
|
});
|
|
}
|
|
initForm('waitlist-hero', 'success-hero');
|
|
initForm('waitlist-footer', 'success-footer');
|
|
</script>
|
|
</body>
|
|
</html>
|