feat: Update local agent documentation to reflect changes in user_id and session_id handling; add marketing strategy document; update skills-lock.json with new Remotion best practices; update website subproject commit.
This commit is contained in:
Roberto Musso
153
docs/creative-brief.md
Normal file
153
docs/creative-brief.md
Normal file
@@ -0,0 +1,153 @@
|
||||
# adiuvAI — Creative Brief: Waitlist Landing Page
|
||||
|
||||
> **Purpose:** Design direction for scrollytelling waitlist page
|
||||
> **Status:** Proposals for review — pick a direction before I build
|
||||
|
||||
---
|
||||
|
||||
## Brand Audit Summary
|
||||
|
||||
| Element | Value |
|
||||
|---------|-------|
|
||||
| **Logo Mark** | Compass needle — golden north (AI), dark south (human). Animates with gentle oscillation. |
|
||||
| **Primary Color** | `#fbc881` — Golden Yellow (the "AI" accent) |
|
||||
| **Dark Base** | `#0c0c0c` — Near-black |
|
||||
| **Light Base** | `#f4edf3` — Pinkish-white canvas |
|
||||
| **Secondary** | `#8a8ea9` — Slate blue-gray |
|
||||
| **Muted** | `#c8c3cd` — Light gray-purple |
|
||||
| **App Font** | Geist (400/600/700) |
|
||||
| **App Screenshot** | Daily brief view: "Good evening, Roberto" + greeting, chat, quick actions |
|
||||
|
||||
---
|
||||
|
||||
## Style Direction — Two Options
|
||||
|
||||
### Option A: "The Dark Executive" (Recommended)
|
||||
|
||||
> Think **Linear.app meets Stripe's documentation** — but warmer, more human, with the golden compass as a guiding light through darkness.
|
||||
|
||||
**Mood:** Premium, confident, dark. Like a private briefing room at midnight.
|
||||
**Background:** Near-black (`#0c0c0c`) with subtle radial gradients and noise texture.
|
||||
**Typography:** Geist for headings (tight letter-spacing, large scale). DM Sans or Satoshi for body.
|
||||
**Color play:** Gold (`#fbc881`) is the ONLY color accent — glowing, warm against the dark void. Everything else is white/gray hierarchy. The gold appears sparingly: on the compass, on CTAs, on scrollytelling highlights.
|
||||
**Scrollytelling philosophy:** Each scroll "chapter" reveals one concept — like pages of a briefing document. Text fades in from below, sections pin and transform, the compass needle rotates as you scroll deeper.
|
||||
**Animation:** Scroll-triggered reveals (GSAP ScrollTrigger), the compass needle slowly settling as you scroll, golden light trails connecting sections like a thread of attention.
|
||||
|
||||
**Why it works for adiuvAI:**
|
||||
- Dark mode signals "this is serious technology for professionals, not a toy"
|
||||
- Gold-on-dark is inherently premium — it says "personal secretary," not "productivity tool"
|
||||
- The restraint (one accent color) mirrors the USP: "complex AI, invisible to you"
|
||||
- The scrollytelling parallels the daily brief: information revealed progressively, just for you
|
||||
|
||||
---
|
||||
|
||||
### Option B: "The Warm Canvas"
|
||||
|
||||
> Think **Granola.ai meets Apple product pages** — light, airy, warm.
|
||||
|
||||
**Mood:** Clean, human, warm. Like a fresh notebook on a sunny desk.
|
||||
**Background:** Light canvas (`#f4edf3`) with soft shadows and paper-like texture.
|
||||
**Typography:** Geist for headings, system body. Generous whitespace.
|
||||
**Color play:** Gold accents on light backgrounds, dark cards for contrast sections.
|
||||
**Scrollytelling:** Smooth vertical reveals, product screenshot floats in center, feature cards slide in from sides.
|
||||
|
||||
**Why it could work:** Friendlier, less intimidating, closer to the app's light mode.
|
||||
**Why I don't recommend it:** Every AI productivity tool (Motion, Granola, Reclaim) uses light backgrounds. You'd blend in.
|
||||
|
||||
---
|
||||
|
||||
<!-- 💬 USER REVIEW: Pick Option A or Option B, or ask me to combine elements. -->
|
||||
|
||||
---
|
||||
|
||||
## Page Architecture (Scrollytelling Flow)
|
||||
|
||||
The page scrolls through **7 chapters**. Each pinned section transitions to the next with a scroll-driven animation.
|
||||
|
||||
```
|
||||
CHAPTER 1: THE HOOK
|
||||
├── Full-screen dark canvas
|
||||
├── Compass needle animates in (settles from rotation)
|
||||
├── Tagline types in: "Meet your new chief of staff."
|
||||
├── Headline fades up: "What if AI could be your secretary?"
|
||||
├── Subheadline fades up
|
||||
├── Email input + CTA
|
||||
└── Scroll indicator: subtle down-arrow pulse
|
||||
|
||||
CHAPTER 2: THE PROBLEM (scroll-triggered)
|
||||
├── Text fades in line by line as you scroll:
|
||||
│ "Your important emails hide between newsletters."
|
||||
│ "Your tasks live in three different apps."
|
||||
│ "Meeting notes sit in a doc you'll never open again."
|
||||
├── Each line appears with a slight delay, dimming the previous
|
||||
└── Final line glows gold: "You need a secretary, not another tool."
|
||||
|
||||
CHAPTER 3: THE REVEAL (pinned section, parallax)
|
||||
├── App screenshot rises from below (parallax entrance)
|
||||
├── Three pillars appear around the screenshot:
|
||||
│ 🧭 AI Secretary | 🔒 Private by Design | 🇪🇺 EU AI Act
|
||||
├── Each pillar highlights on scroll with gold underline
|
||||
└── Screenshot subtly shifts to show Daily Brief
|
||||
|
||||
CHAPTER 4: HOW IT WORKS (horizontal scroll-within-scroll)
|
||||
├── 3 steps slide horizontally as you scroll vertically:
|
||||
│ Step 1: Connect (Gmail/Outlook icons float in)
|
||||
│ Step 2: Extract (animated lines flow from email → task cards)
|
||||
│ Step 3: Brief (morning brief card materializes)
|
||||
└── Progress bar at bottom fills gold as you move through steps
|
||||
|
||||
CHAPTER 5: FEATURES (staggered grid reveal)
|
||||
├── Feature cards fade in one by one as you scroll
|
||||
├── Each card: icon + title + one-line description
|
||||
├── ✅ Beta features have a subtle green dot
|
||||
├── 🔜 Coming Soon features have a pulsing amber dot
|
||||
└── Hover/tap reveals expanded description
|
||||
|
||||
CHAPTER 6: THE FOUNDER (personal touch)
|
||||
├── Clean section, minimal
|
||||
├── Blockquote style with Roberto's note
|
||||
├── "Built by an AI Enterprise Solution Architect"
|
||||
└── Compass needle icon as pull-quote mark
|
||||
|
||||
CHAPTER 7: THE FINAL CTA (pinned, full-screen)
|
||||
├── Dark full-bleed section
|
||||
├── Large headline: "Be the first to meet your AI secretary."
|
||||
├── Email input with animated border (gold shimmer)
|
||||
├── "Beta launches June 2026"
|
||||
└── Footer fades in below
|
||||
```
|
||||
|
||||
<!-- 💬 USER REVIEW: Does this flow feel right? Any chapter you'd cut or add? -->
|
||||
|
||||
---
|
||||
|
||||
## Technical Approach
|
||||
|
||||
| Concern | Solution |
|
||||
|---------|----------|
|
||||
| **Scrollytelling engine** | GSAP 3 + ScrollTrigger (already used on current site, proven, lightweight) |
|
||||
| **Icons** | Lucide (already used on current site) |
|
||||
| **Font** | Geist via Google Fonts or CDN (not @fontsource since this is a static HTML page) |
|
||||
| **Email collection** | Simple `<form>` that POSTs to your API endpoint or a service like Buttondown/Mailchimp. I'll build the form shell — you wire it to your backend. |
|
||||
| **Image** | Embed the app screenshot (`home.png`) inline. SVG logos embedded directly. |
|
||||
| **Mobile** | Fully responsive. Scrollytelling degrades gracefully — pinned sections become normal scroll on mobile. |
|
||||
| **Performance** | Single HTML file, no build step. GSAP loaded from CDN. Total page weight < 200KB. |
|
||||
| **Accessibility** | `prefers-reduced-motion` disables scroll animations. Focus states on form. Contrast ratios verified. |
|
||||
|
||||
<!-- 💬 USER REVIEW: Any technical constraints I should know? Where should the waitlist emails go? -->
|
||||
|
||||
---
|
||||
|
||||
## Deliverable
|
||||
|
||||
Once you approve a direction, I'll build the complete `website/index.html` — a single self-contained HTML file with:
|
||||
- Embedded CSS (all custom properties from your app's palette)
|
||||
- Embedded SVG logos (compass mark + wordmark)
|
||||
- GSAP scrollytelling animations
|
||||
- Responsive layout
|
||||
- Working email form (shell)
|
||||
- The app screenshot as the centerpiece visual
|
||||
|
||||
---
|
||||
|
||||
*Review the options above and tell me your direction. I'll start building immediately.*
|
||||
Reference in New Issue
Block a user