From 1591e3271a9dcab896d119075be7d04a181eece7 Mon Sep 17 00:00:00 2001 From: colinislit Date: Mon, 17 Nov 2025 17:24:35 +0100 Subject: [PATCH] new ux start --- components/ui/hero-section-2.tsx | 160 ++ components/ui/modern-side-bar.tsx | 300 ++++ components/ui/timeline.tsx | 90 + docs/design/timeline-comp.tsx | 158 ++ ...uwplan-ai-speedrun-marketing-first-v1.1.md | 0 ...uwplan-ai-speedrun-marketing-first-v2.1.md | 495 ++++++ docs/specs/fo-marketing-app-flow-v2.md | 699 ++++++++ docs/specs/ux-implementation-plan-v2.md | 1538 +++++++++++++++++ package.json | 1 + pnpm-lock.yaml | 38 + tailwind.config.ts | 45 +- 11 files changed, 3515 insertions(+), 9 deletions(-) create mode 100644 components/ui/hero-section-2.tsx create mode 100644 components/ui/modern-side-bar.tsx create mode 100644 components/ui/timeline.tsx create mode 100644 docs/design/timeline-comp.tsx rename docs/specs/{ => archive}/bouwplan-ai-speedrun-marketing-first-v1.1.md (100%) create mode 100644 docs/specs/bouwplan-ai-speedrun-marketing-first-v2.1.md create mode 100644 docs/specs/fo-marketing-app-flow-v2.md create mode 100644 docs/specs/ux-implementation-plan-v2.md diff --git a/components/ui/hero-section-2.tsx b/components/ui/hero-section-2.tsx new file mode 100644 index 0000000..71baeff --- /dev/null +++ b/components/ui/hero-section-2.tsx @@ -0,0 +1,160 @@ +import React from 'react'; +import { cn } from "@/lib/utils"; +import { motion } from 'framer-motion'; + +// Icon component for contact details +const InfoIcon = ({ type }: { type: 'website' | 'phone' | 'address' }) => { + const icons = { + website: ( + + + + + + ), + phone: ( + + + + ), + address: ( + + + + + ), + }; + return
{icons[type]}
; +}; + + +// Prop types for the HeroSection component +interface HeroSectionProps extends React.HTMLAttributes { + logo?: { + url: string; + alt: string; + text?: string; + }; + slogan?: string; + title: React.ReactNode; + subtitle: string; + callToAction: { + text: string; + href: string; + }; + backgroundImage: string; + contactInfo: { + website: string; + phone: string; + address: string; + }; +} + +const HeroSection = React.forwardRef( + ({ className, logo, slogan, title, subtitle, callToAction, backgroundImage, contactInfo, ...props }, ref) => { + + // Animation variants for the container to orchestrate children animations + const containerVariants = { + hidden: { opacity: 0 }, + visible: { + opacity: 1, + transition: { + staggerChildren: 0.15, + delayChildren: 0.2, + }, + }, + }; + + // Animation variants for individual text/UI elements + const itemVariants = { + hidden: { y: 20, opacity: 0 }, + visible: { + y: 0, + opacity: 1, + transition: { + duration: 0.5, + ease: "easeOut", + }, + }, + }; + + return ( + + {/* Left Side: Content */} +
+ {/* Top Section: Logo & Main Content */} +
+ + {logo && ( +
+ {logo.alt} +
+ {logo.text &&

{logo.text}

} + {slogan &&

{slogan}

} +
+
+ )} + + + + + {title} + + + + {subtitle} + + + {callToAction.text} + + +
+ + {/* Bottom Section: Footer Info */} + +
+
+ + {contactInfo.website} +
+
+ + {contactInfo.phone} +
+
+ + {contactInfo.address} +
+
+ +
+ + {/* Right Side: Image with Clip Path Animation */} + + + + ); + } +); + +HeroSection.displayName = "HeroSection"; + +export { HeroSection }; diff --git a/components/ui/modern-side-bar.tsx b/components/ui/modern-side-bar.tsx new file mode 100644 index 0000000..990cc4e --- /dev/null +++ b/components/ui/modern-side-bar.tsx @@ -0,0 +1,300 @@ +"use client"; +import React, { useState, useEffect } from 'react'; +import { + Home, + User, + Settings, + LogOut, + Menu, + X, + ChevronLeft, + ChevronRight, + BarChart3, + FileText, + Bell, + Search, + HelpCircle +} from 'lucide-react'; + +interface NavigationItem { + id: string; + name: string; + icon: React.ComponentType<{ className?: string }>; + href: string; + badge?: string; +} + +interface SidebarProps { + className?: string; +} + +// Updated navigation items - remove logout from here +const navigationItems: NavigationItem[] = [ + { id: "dashboard", name: "Dashboard", icon: Home, href: "/dashboard" }, + { id: "analytics", name: "Analytics", icon: BarChart3, href: "/analytics" }, + { id: "documents", name: "Documents", icon: FileText, href: "/documents", badge: "3" }, + { id: "notifications", name: "Notifications", icon: Bell, href: "/notifications", badge: "12" }, + { id: "profile", name: "Profile", icon: User, href: "/profile" }, + { id: "settings", name: "Settings", icon: Settings, href: "/settings" }, + { id: "help", name: "Help & Support", icon: HelpCircle, href: "/help" }, +]; + +export function Sidebar({ className = "" }: SidebarProps) { + const [isOpen, setIsOpen] = useState(false); + const [isCollapsed, setIsCollapsed] = useState(false); + const [activeItem, setActiveItem] = useState("dashboard"); + + // Auto-open sidebar on desktop + useEffect(() => { + const handleResize = () => { + if (window.innerWidth >= 768) { + setIsOpen(true); + } else { + setIsOpen(false); + } + }; + + handleResize(); + window.addEventListener('resize', handleResize); + return () => window.removeEventListener('resize', handleResize); + }, []); + + const toggleSidebar = () => setIsOpen(!isOpen); + const toggleCollapse = () => setIsCollapsed(!isCollapsed); + + const handleItemClick = (itemId: string) => { + setActiveItem(itemId); + if (window.innerWidth < 768) { + setIsOpen(false); + } + }; + + return ( + <> + {/* Mobile hamburger button */} + + + {/* Mobile overlay */} + {isOpen && ( +
+ )} + + {/* Sidebar */} +
+ {/* Header with logo and collapse button */} +
+ {!isCollapsed && ( +
+
+ A +
+
+ Acme Corp + Enterprise Dashboard +
+
+ )} + + {isCollapsed && ( +
+ A +
+ )} + + {/* Desktop collapse button */} + +
+ + {/* Search Bar */} + {!isCollapsed && ( +
+
+ + +
+
+ )} + + {/* Navigation */} + + + {/* Bottom section with profile and logout */} +
+ {/* Profile Section */} +
+ {!isCollapsed ? ( +
+
+ JD +
+
+

John Doe

+

Senior Administrator

+
+
+
+ ) : ( +
+
+
+ JD +
+
+
+
+ )} +
+ + {/* Logout Button */} +
+ +
+
+
+ + {/* Main Content Area */} +
+ {/* Your content remains the same */} + +
+ + ); +} \ No newline at end of file diff --git a/components/ui/timeline.tsx b/components/ui/timeline.tsx new file mode 100644 index 0000000..d48e981 --- /dev/null +++ b/components/ui/timeline.tsx @@ -0,0 +1,90 @@ +"use client"; +import { + useMotionValueEvent, + useScroll, + useTransform, + motion, +} from "framer-motion"; +import React, { useEffect, useRef, useState } from "react"; + +interface TimelineEntry { + title: string; + content: React.ReactNode; +} + +export const Timeline = ({ data }: { data: TimelineEntry[] }) => { + const ref = useRef(null); + const containerRef = useRef(null); + const [height, setHeight] = useState(0); + + useEffect(() => { + if (ref.current) { + const rect = ref.current.getBoundingClientRect(); + setHeight(rect.height); + } + }, [ref]); + + const { scrollYProgress } = useScroll({ + target: containerRef, + offset: ["start 10%", "end 50%"], + }); + + const heightTransform = useTransform(scrollYProgress, [0, 1], [0, height]); + const opacityTransform = useTransform(scrollYProgress, [0, 0.1], [0, 1]); + + return ( +
+
+

+ Changelog from my journey +

+

+ I've been working on Aceternity for the past 2 years. Here's + a timeline of my journey. +

+
+ +
+ {data.map((item, index) => ( +
+
+
+
+
+

+ {item.title} +

+
+ +
+

+ {item.title} +

+ {item.content}{" "} +
+
+ ))} +
+ +
+
+
+ ); +}; diff --git a/docs/design/timeline-comp.tsx b/docs/design/timeline-comp.tsx new file mode 100644 index 0000000..b57b910 --- /dev/null +++ b/docs/design/timeline-comp.tsx @@ -0,0 +1,158 @@ + +import Image from "next/image"; +import React from "react"; +import { Timeline } from "@/components/ui/timeline"; + +export function TimelineDemo() { + const data = [ + { + title: "2024", + content: ( +
+

+ Built and launched Aceternity UI and Aceternity UI Pro from scratch +

+
+ startup template + startup template + startup template + startup template +
+
+ ), + }, + { + title: "Early 2023", + content: ( +
+

+ I usually run out of copy, but when I see content this big, I try to + integrate lorem ipsum. +

+

+ Lorem ipsum is for people who are too lazy to write copy. But we are + not. Here are some more example of beautiful designs I built. +

+
+ hero template + feature template + bento template + cards template +
+
+ ), + }, + { + title: "Changelog", + content: ( +
+

+ Deployed 5 new components on Aceternity today +

+
+
+ ✅ Card grid component +
+
+ ✅ Startup template Aceternity +
+
+ ✅ Random file upload lol +
+
+ ✅ Himesh Reshammiya Music CD +
+
+ ✅ Salman Bhai Fan Club registrations open +
+
+
+ hero template + feature template + bento template + cards template +
+
+ ), + }, + ]; + return ( +
+
+ +
+
+ ); +} diff --git a/docs/specs/bouwplan-ai-speedrun-marketing-first-v1.1.md b/docs/specs/archive/bouwplan-ai-speedrun-marketing-first-v1.1.md similarity index 100% rename from docs/specs/bouwplan-ai-speedrun-marketing-first-v1.1.md rename to docs/specs/archive/bouwplan-ai-speedrun-marketing-first-v1.1.md diff --git a/docs/specs/bouwplan-ai-speedrun-marketing-first-v2.1.md b/docs/specs/bouwplan-ai-speedrun-marketing-first-v2.1.md new file mode 100644 index 0000000..1950ced --- /dev/null +++ b/docs/specs/bouwplan-ai-speedrun-marketing-first-v2.1.md @@ -0,0 +1,495 @@ +# 🚀 Mission Control – Bouwplan AI Speedrun EPD v2.1 + +**Projectnaam:** AI Speedrun - Mini-EPD Prototype +**Versie:** v2.1 (Vereenvoudigde User Journey + Teal Design System) +**Datum:** 17-11-2024 +**Auteur:** Colin Lit +**Laatste Update:** 17-11-2024 + +--- + +## 1. Doel en context + +🎯 **Doel:** Een werkend EPD-prototype bouwen in 4 weken dat demonstreert hoe "Software on Demand" traditionele ontwikkeling disrupts: van €100.000+ en 12-24 maanden naar €200 build cost en 4 weken doorlooptijd. + +📘 **Toelichting:** Dit project dient een drievoudig doel: +1. **Demo voor GGZ-sector:** Tonen van AI-waarde in EPD-workflows (intake → profiel → plan) tijdens inspiratiesessies +2. **LinkedIn Build in Public:** Wekelijkse transparante updates die viral marketing genereren voor AI consultancy +3. **Software on Demand Proof:** Bewijs dat enterprise-kwaliteit software nu in weken ipv jaren gebouwd kan worden + +**Nieuwe Strategie (v2.1):** +- **Vereenvoudigde user journey:** Geen separate EPD demo pagina meer +- **Features in timeline:** Build-in-public transparantie met features showcase per week +- **Login met features:** Directe showcase van EPD capabilities op login pagina +- **Teal-first design:** Modern, innovatief brand identity (#0D9488) + +Het systeem toont praktische AI-integratie: intake samenvattingen in seconden ipv uren, automatische DSM-classificatie, en behandelplannen die direct bruikbaar zijn. Alles met fictieve demo-data, privacy-first design. + +**Referenties:** +- **FO v2.1:** `docs/specs/fo-marketing-app-flow-v2.md` - Vereenvoudigde user journey +- **UX Plan v2.0:** `docs/specs/ux-implementation-plan-v2.md` - Teal-first design system + +--- + +## 2. Uitgangspunten + +### 2.1 Technische Stack + +🎯 **Doel:** Modern, bewezen technologie stack voor snelle development en lage run costs. + +**Frontend:** +- **Framework:** Next.js 15 (App Router) - Single repo voor marketing + EPD +- **Styling:** Tailwind CSS v3.4 met teal-first design system +- **UI Components:** shadcn/ui + custom components (Timeline, AIButton) +- **Rich Text:** TipTap editor (ProseMirror basis) - Week 3 +- **Icons:** Lucide React +- **Animations:** Framer Motion (voor timeline scroll effects) +- **State:** Zustand + React Context (simpel maar effectief) + +**Backend:** +- **API:** Next.js Route Handlers (server-side) +- **Database:** Supabase (PostgreSQL + Auth + Storage) - EU region +- **AI:** Claude 3.5 Sonnet (Anthropic) - Superieur voor Nederlands +- **Hosting:** Vercel (EU region Amsterdam) + +**Development & Tools:** +- **Version Control:** GitHub (public repo voor transparantie) +- **Type Safety:** TypeScript overal +- **Package Manager:** pnpm (sneller dan npm) +- **AI Pair Programming:** Cursor IDE +- **Testing:** Vitest + Playwright (basis coverage) + +### 2.2 Projectkaders + +🎯 **Doel:** Realistische constraints voor 4-weken sprint. + +- **Tijd:** 4 weken part-time (80-120 uur totaal) +- **Budget:** €200 totaal (€50/maand runtime target) +- **Team:** 1 developer (Colin) + AI tools als co-pilot +- **Data:** 100% fictieve demo data +- **Scope:** MVP voor 10-min demo + marketing site +- **Launch:** LinkedIn viral series + demo sessies + +### 2.3 Programmeer Uitgangspunten + +🎯 **Doel:** Code quality zonder over-engineering voor MVP. + +**Core Principles:** +- **DRY:** Herbruikbare componenten, centrale configs +- **KISS:** Simpele oplossingen boven complexiteit +- **SOC:** UI/logic/data layers gescheiden +- **YAGNI:** Alleen bouwen wat nu nodig is + +**Development Practices:** +- **Iteratief:** Ship daily, perfect later +- **AI-First:** Laat Claude/Cursor heavy lifting doen +- **Copy-Paste OK:** Voor MVP snelheid > perfectie +- **Error Handling:** User-friendly messages overal +- **Security:** API keys server-side, RLS in Supabase + +**Design System:** +- **Primary Color:** Teal (#0D9488 / teal-600) - Innovation signal +- **AI Color:** Amber (#F59E0B / amber-500) - AI actions +- **Neutral:** Slate scale voor professional foundation +- **Typography:** Crimson Text (serif) + Inter (sans) + JetBrains Mono + +--- + +## 3. Epics & Stories Overzicht + +🎯 **Doel:** 8 duidelijke epics voor 4-weken development sprint - **Marketing First Strategy met vereenvoudigde user journey**. + +| Epic ID | Titel | Doel | Status | Story Count | Week | +|---------|-------|------|--------|-------------|------| +| **WEEK 1 - FOUNDATION & MARKETING REFACTOR** ||||| +| E0 | Project Setup | Next.js + Supabase + Vercel running | ✅ Compleet | 5 | 1 | +| E1 | Marketing Website Refactor | Homepage met timeline + login met features | 🔄 In Progress | 7 | 1 | +| E2 | Design System Migration | Teal-first colors + component updates | ⏳ To Do | 5 | 1 | +| **WEEK 2 - EPD CORE** ||||| +| E3 | Database & Auth | Schema + RLS + demo users | ✅ Compleet | 4 | 2 | +| E4 | Core UI & Client Module | Layout + Client CRUD + Navigation | ⏳ To Do | 5 | 2 | +| **WEEK 3 - AI MAGIC** ||||| +| E5 | Intake & AI Integration | TipTap + Claude API + Prompts | ⏳ To Do | 6 | 3 | +| E6 | Profile & Plan | DSM + behandelplan flows | ⏳ To Do | 4 | 3 | +| **WEEK 4 - POLISH & LAUNCH** ||||| +| E7 | Onboarding System | Walkthrough + tooltips + help | ⏳ To Do | 4 | 4 | +| E8 | Performance & Launch | Optimization + demo prep | ⏳ To Do | 4 | 4 | + +--- + +## 4. Epics & Stories (Uitwerking) + +### Epic 0 — Project Setup + +**Epic Doel:** Werkende development omgeving met alle benodigde tools en dependencies. + +| Story ID | Beschrijving | Acceptatiecriteria | Status | Afhankelijkheden | Story Points | +|----------|--------------|---------------------|--------|------------------|--------------| +| E0.S1 | Repository aanmaken | GitHub repo + lokale clone, `.gitignore` config | ✅ | — | 1 | +| E0.S2 | Next.js project initialisatie | Next.js 15 App Router draait, dev server start | ✅ | E0.S1 | 2 | +| E0.S3 | Supabase setup | Project aangemaakt, database connected, Auth enabled | ✅ | E0.S2 | 3 | +| E0.S4 | Dependencies installeren | Tailwind, shadcn/ui, Framer Motion, Lucide geïnstalleerd | ✅ | E0.S2 | 2 | +| E0.S5 | Environment variables | `.env.local` + Vercel vars geconfigureerd | ✅ | E0.S3 | 1 | + +**Technical Notes:** +- Gebruik `pnpm` voor snellere installs +- `.env.example` committen voor team onboarding +- Supabase project in EU region (Amsterdam) + +--- + +### Epic 1 — Marketing Website Refactor + +**Epic Doel:** Vereenvoudigde marketing homepage met timeline (features showcase) en login pagina met features. + +| Story ID | Beschrijving | Acceptatiecriteria | Status | Afhankelijkheden | Story Points | +|----------|--------------|---------------------|--------|------------------|--------------| +| E1.S1 | Verwijder EPD demo pagina | `/epd` route verwijderd, navigation updated | ⏳ | E0.S5 | 1 | +| E1.S2 | Homepage vereenvoudigen | Manifesto content verwijderd, statement section toegevoegd | ⏳ | E1.S1 | 3 | +| E1.S3 | Timeline component integreren | Aceternity timeline met features per week | ⏳ | E1.S2 | 5 | +| E1.S4 | Timeline content structuur | `content/nl/timeline.json` met features array | ⏳ | E1.S3 | 2 | +| E1.S5 | Login pagina refactor | Split-screen layout: features links, login rechts | ⏳ | E1.S1 | 4 | +| E1.S6 | Features showcase component | Herbruikbare feature cards voor timeline + login | ⏳ | E1.S3, E1.S5 | 3 | +| E1.S7 | CTA updates | Homepage CTA naar `/login`, navigation cleanup | ⏳ | E1.S2, E1.S5 | 1 | + +**Technical Notes:** +- Timeline component: `components/ui/timeline.tsx` (Aceternity UI pattern) +- Features data: `content/nl/timeline.json` (met features array per week) +- Login layout: Inspiratie van `components/ui/sign-in.tsx` +- Mobile: Stack layout voor login pagina (features boven, form onder) + +**Content Structure:** +```json +// content/nl/timeline.json +{ + "weeks": [ + { + "weekNumber": 1, + "title": "Week 1 • Nov 11-17", + "status": "completed", + "description": "...", + "features": [ + { + "title": "AI-Gestuurde Intake", + "description": "...", + "time": "< 5 seconden", + "traditional": "15-20 minuten handmatig", + "icon": "Brain" + } + ], + "metrics": { ... }, + "achievements": [ ... ] + } + ] +} +``` + +--- + +### Epic 2 — Design System Migration + +**Epic Doel:** Teal-first design system implementeren (migratie van blue naar teal). + +| Story ID | Beschrijving | Acceptatiecriteria | Status | Afhankelijkheden | Story Points | +|----------|--------------|---------------------|--------|------------------|--------------| +| E2.S1 | Tailwind config update | Teal brand colors, amber AI colors | ⏳ | E0.S4 | 2 | +| E2.S2 | Global CSS variables | `--primary`, `--info` naar teal | ⏳ | E2.S1 | 1 | +| E2.S3 | Component color updates | Buttons, links, navigation naar teal | ⏳ | E2.S2 | 3 | +| E2.S4 | AIButton component | Amber gradient button voor AI actions | ⏳ | E2.S1 | 2 | +| E2.S5 | Contrast testing | WCAG AA compliance voor teal colors | ⏳ | E2.S3 | 1 | + +**Technical Notes:** +- Primary: `teal-600` (#0D9488) +- AI actions: `amber-500` (#F59E0B) +- Test contrast: WebAIM Contrast Checker +- Rollback plan: Git revert indien nodig + +**Color Palette:** +```typescript +// tailwind.config.ts +colors: { + brand: { + 600: '#0D9488', // PRIMARY + 700: '#0F766E', // Hover + // ... full scale + }, + ai: colors.amber, // AI features +} +``` + +--- + +### Epic 3 — Database & Auth + +**Epic Doel:** Werkend datamodel met seed data, auth flow en RLS policies. + +| Story ID | Beschrijving | Acceptatiecriteria | Status | Afhankelijkheden | Story Points | +|----------|--------------|---------------------|--------|------------------|--------------| +| E3.S1 | Database schema | 5 core tables: clients, intake_notes, problem_profiles, treatment_plans, ai_events | ✅ | E0.S3 | 5 | +| E3.S2 | RLS policies | Row-level security per table (user isolation) | ✅ | E3.S1 | 3 | +| E3.S3 | Demo users seed | demo@mini-ecd.demo account aangemaakt | ✅ | E3.S2 | 1 | +| E3.S4 | Auth flow | Magic link + password login werkend | ✅ | E3.S3 | 2 | + +**Technical Notes:** +- Schema: PostgreSQL via Supabase +- RLS: `auth.uid() = created_by` pattern +- Demo users: Shared dataset voor demo purposes +- Auth: Supabase Auth (magic link + password) + +--- + +### Epic 4 — Core UI & Client Module + +**Epic Doel:** EPD app foundation: layout, client CRUD, navigation. + +| Story ID | Beschrijving | Acceptatiecriteria | Status | Afhankelijkheden | Story Points | +|----------|--------------|---------------------|--------|------------------|--------------| +| E4.S1 | Coming Soon dashboard | `/epd/clients` placeholder met roadmap | ⏳ | E3.S4 | 2 | +| E4.S2 | App layout | Header + sidebar + main content area | ⏳ | E4.S1 | 3 | +| E4.S3 | Client list page | CRUD operations, table view, filters | ⏳ | E4.S2 | 5 | +| E4.S4 | Client detail page | Tabs: Intake, Profile, Plan (placeholders) | ⏳ | E4.S3 | 3 | +| E4.S5 | Navigation & routing | App routes, breadcrumbs, logout flow | ⏳ | E4.S2 | 2 | + +**Technical Notes:** +- Layout: Separate van marketing (app header vs MinimalNav) +- Client CRUD: Forms met validation (Zod) +- Routing: `/epd/clients` namespace +- Mobile: Responsive table → card layout + +--- + +### Epic 5 — Intake & AI Integration + +**Epic Doel:** TipTap editor + Claude API voor intake samenvatting en B1 readability. + +| Story ID | Beschrijving | Acceptatiecriteria | Status | Afhankelijkheden | Story Points | +|----------|--------------|---------------------|--------|------------------|--------------| +| E5.S1 | TipTap editor setup | Rich text editor in client detail | ⏳ | E4.S4 | 4 | +| E5.S2 | Claude API endpoints | `/api/ai/summarize`, `/api/ai/simplify` | ⏳ | E0.S5 | 5 | +| E5.S3 | AI-rail component | Right panel voor AI suggestions | ⏳ | E5.S2 | 4 | +| E5.S4 | Prompt engineering | Nederlands prompts voor samenvatting | ⏳ | E5.S2 | 3 | +| E5.S5 | AI event logging | Log alle AI calls naar `ai_events` table | ⏳ | E5.S2 | 2 | +| E5.S6 | Error handling | Retry logic, user-friendly errors | ⏳ | E5.S2 | 2 | + +**Technical Notes:** +- TipTap: ProseMirror-based editor +- Claude: 3.5 Sonnet voor Nederlands +- Prompts: Templates in `/lib/prompts/` +- Cost tracking: Log tokens + estimated costs + +--- + +### Epic 6 — Profile & Plan + +**Epic Doel:** DSM-light classificatie + SMART behandelplan generatie. + +| Story ID | Beschrijving | Acceptatiecriteria | Status | Afhankelijkheden | Story Points | +|----------|--------------|---------------------|--------|------------------|--------------| +| E6.S1 | Profile tab UI | DSM categories + severity selector | ⏳ | E4.S4 | 3 | +| E6.S2 | AI categorize endpoint | `/api/ai/categorize` met DSM-light output | ⏳ | E5.S2 | 4 | +| E6.S3 | Plan tab UI | SMART doelen form + interventies | ⏳ | E4.S4 | 3 | +| E6.S4 | AI plan generator | `/api/ai/plan` met 4 secties output | ⏳ | E6.S2 | 5 | + +**Technical Notes:** +- DSM-light: 6 categorieën (stemming, angst, gedrag, etc.) +- Plan structuur: JSONB in database (flexibel) +- AI output: Structured JSON voor consistentie + +--- + +### Epic 7 — Onboarding System + +**Epic Doel:** User guidance voor eerste gebruik (tooltips, walkthrough). + +| Story ID | Beschrijving | Acceptatiecriteria | Status | Afhankelijkheden | Story Points | +|----------|--------------|---------------------|--------|------------------|--------------| +| E7.S1 | First-time user detection | Check `user_metadata.onboarded` flag | ⏳ | E4.S2 | 1 | +| E7.S2 | Tooltip system | React Joyride of custom tooltips | ⏳ | E7.S1 | 3 | +| E7.S3 | Help documentation | In-app help modal met shortcuts | ⏳ | E7.S2 | 2 | +| E7.S4 | Skip onboarding | Option om walkthrough te skippen | ⏳ | E7.S2 | 1 | + +**Technical Notes:** +- Tooltips: Highlight key features (AI buttons, etc.) +- Help: Keyboard shortcuts, feature overview +- Optional: Skip voor returning users + +--- + +### Epic 8 — Performance & Launch + +**Epic Doel:** Optimization, testing, demo preparation. + +| Story ID | Beschrijving | Acceptatiecriteria | Status | Afhankelijkheden | Story Points | +|----------|--------------|---------------------|--------|------------------|--------------| +| E8.S1 | Performance optimization | Lighthouse > 90, LCP < 2.5s | ⏳ | E7.S4 | 3 | +| E8.S2 | Accessibility audit | WCAG AA compliance, keyboard nav | ⏳ | E8.S1 | 2 | +| E8.S3 | Demo dry-run | 10-min demo scenario werkt | ⏳ | E8.S2 | 2 | +| E8.S4 | Production deployment | Live op Vercel, monitoring setup | ⏳ | E8.S3 | 2 | + +**Technical Notes:** +- Performance: Image optimization, code splitting +- Accessibility: Focus states, ARIA labels +- Demo: Pre-seeded data, backup plan +- Monitoring: Vercel Analytics + error tracking + +--- + +## 5. Kwaliteit & Testplan + +🎯 **Doel:** Vastleggen hoe de kwaliteit van het project wordt geborgd. + +### Test Types + +| Test Type | Scope | Tools | Verantwoordelijke | +|-----------|-------|-------|-------------------| +| Unit Tests | Business logic, utilities | Vitest | Developer | +| Integration Tests | API endpoints, database | Playwright | Developer | +| Smoke Tests | Kritieke user flows | Manual checklist | Developer | +| Performance Tests | Load times, API response | Lighthouse | Developer | +| Accessibility Tests | WCAG AA compliance | axe DevTools | Developer | + +### Test Coverage Targets + +- **Unit tests:** 80%+ coverage op `/lib` folder +- **Integration tests:** Alle API endpoints +- **Smoke tests:** 5 happy flows + 3 error scenarios + +### Manual Test Checklist (voor demo) + +**Marketing Site:** +- [ ] Homepage laadt met hero + statement + timeline +- [ ] Timeline scrollt en toont features per week +- [ ] Login pagina toont features showcase + form +- [ ] Navigation werkt (Home, Contact, Login) +- [ ] Mobile responsive (timeline, login layout) + +**EPD App:** +- [ ] User kan inloggen (magic link + demo credentials) +- [ ] Coming Soon dashboard toont roadmap +- [ ] Client CRUD werkt (Week 2) +- [ ] Intake editor werkt met TipTap (Week 3) +- [ ] AI samenvatting genereert binnen 5 sec (Week 3) +- [ ] Profile + Plan tabs werken (Week 3) +- [ ] Navigatie werkt zonder errors +- [ ] Mobile view is responsive +- [ ] Error states tonen user-friendly messages + +**Design System:** +- [ ] Teal colors consistent overal +- [ ] Amber AI buttons duidelijk +- [ ] Contrast ratios WCAG AA compliant +- [ ] Focus states zichtbaar + +--- + +## 6. Demo & Presentatieplan + +🎯 **Doel:** Beschrijven hoe de demo wordt gepresenteerd. + +### Demo Scenario + +**Duur:** 10 minuten +**Doelgroep:** GGZ innovatiemanagers + bestuurders +**Locatie:** Live op Vercel (backup: localhost) + +**Flow:** +1. **Intro** (1 min): Homepage - Statement + Timeline overview +2. **Features showcase** (2 min): Timeline scrollen, features per week zien +3. **Login** (1 min): Login pagina met features showcase +4. **EPD demo** (4 min): + - Client lijst + - Nieuwe intake maken + - AI samenvatting genereren + - Profile + Plan tabs +5. **Afsluiting** (2 min): Vragen + LinkedIn build-in-public link + +**Backup Plan:** +- Lokale versie klaar bij internet issues +- Pre-seeded data als AI API niet reageert +- Screenshots als complete fallback + +--- + +## 7. Risico's & Mitigatie + +🎯 **Doel:** Risico's vroeg signaleren en voorzien van oplossingen. + +| Risico | Kans | Impact | Mitigatie | Owner | +|--------|------|--------|-----------|-------| +| Teal design niet goed ontvangen | Laag | Middel | Rollback plan (1 uur), hybrid approach mogelijk | Developer | +| Timeline component complex | Middel | Middel | Aceternity UI pattern gebruiken, simplify indien nodig | Developer | +| Features data structuur te complex | Middel | Laag | Start simpel, iteratief uitbreiden | Developer | +| AI-output inconsistent | Hoog | Hoog | Snapshot tests, prompt versioning, fallback responses | Developer | +| API rate limits tijdens demo | Middel | Hoog | Caching, pre-warmed responses, backup data | Developer | +| Tijdsdruk deadline | Hoog | Middel | Prioriteer MVP features, cut scope indien nodig | Developer | +| Login pagina layout niet responsive | Laag | Middel | Test op mobile early, stack layout fallback | Developer | + +--- + +## 8. Evaluatie & Lessons Learned + +🎯 **Doel:** Reflecteren op het proces en verbeteringen vastleggen. + +**Te documenteren na project:** +- Wat ging goed? Wat niet? +- Was teal-first design de juiste keuze? +- Werkt vereenvoudigde user journey beter? +- Welke AI-tools waren het meest effectief? +- Welke prompts werkten het beste? +- Waar liepen we vertraging op? +- Wat doen we volgende keer anders? +- Herbruikbare componenten voor volgende projecten + +--- + +## 9. Referenties + +🎯 **Doel:** Koppelen aan de overige Mission Control-documenten. + +**Mission Control Documents:** +- **PRD v1.2** — `docs/specs/prd-mini-ecd-v2.md` - Product Requirements & Business Case +- **FO v2.1** — `docs/specs/fo-marketing-app-flow-v2.md` - Functioneel Ontwerp (vereenvoudigde user journey) +- **UX Plan v2.0** — `docs/specs/ux-implementation-plan-v2.md` - Teal-first design system +- **TO v1.2** — `docs/specs/to-mini-ecd-v1_2.md` - Technische Architectuur & Database Schema +- **API Specs** — `docs/specs/api-acces-mini-ecd.md` - Endpoint Documentation + +**External Resources:** +- Repository: GitHub (public voor transparantie) +- Deployment: Vercel (EU region Amsterdam) +- Design: Tailwind CSS + shadcn/ui +- Documentation: `/docs` folder in repo + +--- + +## 10. Glossary & Abbreviations + +| Term | Betekenis | +|------|-----------| +| Epic | Grote feature of fase in development (bevat meerdere stories) | +| Story | Kleine, uitvoerbare taak binnen een epic | +| Story Points | Schatting van complexiteit (Fibonacci: 1, 2, 3, 5, 8, 13) | +| MVP | Minimum Viable Product | +| DRY | Don't Repeat Yourself | +| KISS | Keep It Simple, Stupid | +| SOC | Separation of Concerns | +| YAGNI | You Aren't Gonna Need It | +| RLS | Row Level Security (Supabase) | +| WCAG | Web Content Accessibility Guidelines | +| LCP | Largest Contentful Paint (performance metric) | + +--- + +## Versiehistorie + +| Versie | Datum | Auteur | Wijziging | +|--------|-------|--------|-----------| +| v2.1 | 17-11-2024 | Colin | Nieuw bouwplan op basis van FO v2.1 (vereenvoudigde user journey) en UX Plan v2.0 (teal-first design). Verwijderd: EPD demo pagina. Nieuw: Timeline met features, login met features showcase. | +| v1.6 | 15-11-2024 | Colin | Eerdere versie met separate EPD demo pagina | + +--- + +**Status:** Ready for Week 1 Implementation +**Next Action:** Begin Epic 1 (Marketing Website Refactor) +**Owner:** Colin Lit +**Timeline:** Week 1-4 (4 weken sprint) + diff --git a/docs/specs/fo-marketing-app-flow-v2.md b/docs/specs/fo-marketing-app-flow-v2.md new file mode 100644 index 0000000..7e69724 --- /dev/null +++ b/docs/specs/fo-marketing-app-flow-v2.md @@ -0,0 +1,699 @@ +# 🧩 Functioneel Ontwerp (FO) – Marketing & App Flow v2.1 + +**Projectnaam:** AI Speedrun - Mini-EPD Prototype +**Versie:** v2.1 (Vereenvoudigde User Journey) +**Datum:** 17-11-2024 +**Auteur:** Colin Lit + +--- + +## 1. Doel en relatie met het PRD + +🎯 **Doel van dit document:** +Dit Functioneel Ontwerp beschrijft de **vereenvoudigde user journey** voor de AI Speedrun marketing website en EPD applicatie. Het lost de huidige UX problemen op (broken links, onduidelijke navigatie) en introduceert een heldere scheiding tussen marketing en applicatie. + +📘 **Toelichting aan de lezer:** +Versie 2.0 is een refactor van de huidige implementatie (v1.2). De belangrijkste wijzigingen: +- **Marketing vereenvoudigd**: Van lange manifesto naar compacte statement + timeline met features +- **Geen separate EPD demo pagina**: Features worden getoond in timeline op homepage en op login pagina +- **Duidelijke app routing**: `/epd/*` namespace voor alle EPD functionaliteit +- **Werkende flows**: Alle CTA's en login links gaan naar bestaande pagina's +- **Coming Soon strategie**: Eerlijke communicatie tijdens Week 2 development + +Dit document is niet-technisch en beschrijft wat gebruikers zien en kunnen doen. + +--- + +## 2. Overzicht van de belangrijkste onderdelen + +🎯 **Doel:** De 4 kernmodules van de applicatie + +**Marketing Modules (Publiek):** +1. **Marketing Homepage** (`/`) - Vereenvoudigde landing met hero, statement en timeline (met features) +2. **Contact & Leads** (`/contact`) - Lead capture formulier + +**Auth & App Modules (Protected/Semi-Protected):** +3. **Login & Authentication** (`/login`) - Magic link + demo credentials + features showcase +4. **EPD App Dashboard** (`/epd/clients`) - Coming Soon placeholder (Week 2+) + +--- + +## 3. User Stories + +🎯 **Doel:** Wat gebruikers kunnen en willen doen + +### Prioriteit: Hoog (MVP Critical) + +| ID | Rol | Doel / Actie | Verwachte waarde | Status | +|----|-----|--------------|------------------|--------| +| US-01 | Marketing bezoeker | Homepage bekijken met project statement en voortgang | Begrijpen wat AI Speedrun doet en volgen van build progress + features zien | ✅ Te implementeren | +| US-02 | Marketing bezoeker | EPD features bekijken in timeline | Zien wat het prototype kan (features getoond in timeline op homepage) | ✅ Te implementeren | +| US-03 | Marketing bezoeker | Contact opnemen voor lead | Interesse tonen in Software on Demand services | ✅ Bestaand | +| US-04 | Demo gebruiker | Inloggen met demo credentials | Toegang tot EPD app prototype | ✅ Bestaand (fix redirect) | +| US-05 | Demo gebruiker | Coming Soon dashboard zien | Weten dat app in Week 2 komt + verwachtingen managen | ✅ Te implementeren | +| US-06 | Terugkerende gebruiker | Direct naar login navigeren | Snel inloggen zonder homepage te moeten bezoeken | ✅ Te implementeren (nav link) | + +### Prioriteit: Middel (Nice to Have) + +| ID | Rol | Doel / Actie | Verwachte waarde | Status | +|----|-----|--------------|------------------|--------| +| US-07 | Ingelogde gebruiker | Uitloggen | Sessie beëindigen en terug naar marketing | 🔄 Toekomstig | +| US-08 | Marketing bezoeker | Wekelijkse updates volgen via timeline | Build in public transparantie ervaren | ✅ Te implementeren | +| US-09 | Stakeholder | ROI vergelijking zien | Business case begrijpen (traditioneel vs AI) | ⏸️ On hold | + +### Prioriteit: Laag (Future Enhancement) + +| ID | Rol | Doel / Actie | Verwachte waarde | Status | +|----|-----|--------------|------------------|--------| +| US-10 | Developer | Interactieve ROI calculator gebruiken | Eigen business case berekenen | ⏸️ On hold | +| US-11 | LinkedIn volger | Build metrics dashboard zien | Real-time tracking van uren en kosten | ⏸️ On hold | + +--- + +## 4. Functionele werking per onderdel + +🎯 **Doel:** Per module beschrijven wat gebruikers kunnen doen + +### 4.1 Marketing Homepage (`/`) + +**Doel:** Compacte, krachtige introductie van Software on Demand concept met build-in-public transparantie. + +**Secties (van boven naar beneden):** + +1. **Hero Section** (behouden zoals nu) + - Full-viewport quote van Jensen Huang: "Software is eating the world" + - Dot-shader achtergrond (subtiel, opacity 0.02) + - Scroll indicator + +2. **Statement Section** (NIEUW - vervangt lange manifesto) + - **Heading**: "Software on Demand: Van €100k naar €200" + - **3-4 Paragrafen** in problem → solution → proof format: + - *Problem*: Enterprise software kost €100.000+ en duurt 12-24 maanden + - *Solution*: AI-powered development verkort dit naar 4 weken en €200 + - *Proof*: Dit EPD is het bewijs - gebouwd in 4 weken, build in public + - *CTA*: Volg de voortgang hieronder + - **Visueel**: Clean, serif typography (Crimson Text), breathing room + +3. **Timeline Section** (NIEUW - build in public met features showcase) + - **Component**: Aceternity UI Timeline (21st.dev) + - **Content structure** per week: + - Week nummer + datum range (bijv. "Week 1 • Nov 11-17") + - Status badge: Completed / In Progress / Planned + - Korte beschrijving (3-4 zinnen): wat is er gebouwd + - **Features showcase** (NIEUW): + - Per week worden relevante EPD features getoond + - Feature cards met: Titel, beschrijving, tijdswinst (bijv. "30 min → 5 sec") + - Icons per feature type (Brain voor AI, Zap voor snelheid, etc.) + - Visuele highlight van wat er die week gebouwd is + - Metrics cards: Development hours, Infrastructure cost + - Achievements lijst: Bullets met voltooide features + - Optioneel: Screenshot of visual van die week + - **Interactie**: Scroll-based animation (timeline ontvouwt) + - **Data source**: `content/nl/timeline.json` (met features array per week) + +4. **CTA Section** (vereenvoudigd) + - **Primary CTA**: "Probeer het prototype" → `/login` (direct naar login met features) + - **Secondary CTA**: "Volg voortgang" → Scroll to timeline (anchor link `#timeline`) + - **Tertiary**: "Contact" → `/contact` + - **Visueel**: Button hierarchy duidelijk (primary = green, secondary = outline) + +**Verwijderd uit v1.2:** +- Lange manifesto content (8000+ woorden) +- Separate EPD demo pagina (`/epd`) - features nu in timeline +- Comparison table (verwijderd - niet meer nodig) +- Multiple insight boxes +- Statement sections met dark backgrounds + +**States:** +- **Normal**: Alle content zichtbaar +- **Loading**: Skeleton voor timeline items +- **Empty state**: (niet van toepassing - statische content) + +**Navigatie:** +- Top: MinimalNav (Home, Contact, Login) - EPD Prototype link verwijderd +- Footer: Copyright + link naar ikbenlit.nl + +--- + +### 4.2 ~~EPD Demo Info Pagina (`/epd`)~~ VERWIJDERD + +**Status:** Deze pagina is verwijderd in v2.1. Features worden nu getoond in: +- Timeline op homepage (`/`) +- Features showcase op login pagina (`/login`) + +**Reden:** Vereenvoudiging van user journey - gebruikers zien features direct in context van build progress en kunnen direct naar login gaan. + +--- + +### 4.3 Contact & Lead Capture (`/contact`) + +**Doel:** Lead acquisition voor Software on Demand consultancy. + +**Functionaliteit:** (behouden zoals nu - werkt al) +- Form fields: Naam, Email, Bericht +- Client-side validation (Zod) +- Submit → API `/api/leads` → Supabase `leads` table +- Success state: "Bedankt! We nemen contact op" +- Error state: "Er ging iets mis. Probeer opnieuw" + +**Navigatie:** +- Terug naar homepage via nav + +--- + +### 4.4 Login & Authentication (`/login`) + +**Doel:** Flexibele auth met magic link (productie) en demo credentials (MVP), inclusief features showcase. + +**Layout:** Split-screen design (zoals `sign-in.tsx` component) +- **Links (60%)**: Features showcase met visuals +- **Rechts (40%)**: Login formulier + +**Features Showcase Sectie (Links):** +- **Grid layout** met feature cards: + - AI-Gestuurde Intake (30 min → 5 sec) + - Automatische DSM Classificatie (15 min → 3 sec) + - Behandelplan Generatie (45 min → 10 sec) + - B1 Readability (30 min → 3 sec) +- **Visuals**: Icons, stat cards, of screenshots per feature +- **Metrics**: Tijdswinst per feature prominent getoond +- **Design**: Inspiratie van `components/ui/sign-in.tsx` collage layout + +**Login Form Sectie (Rechts):** + +**Twee tabs/modes:** + +1. **Magic Link Login** (voor productie users) + - Email input + - "Stuur Magic Link" button + - Success: "Check je email voor login link" + - Nieuwe users: Account wordt automatisch aangemaakt + - Callback: `/auth/callback` → redirect naar `/epd/clients` + +2. **Demo Credentials Login** (voor demo) + - Email + Password inputs + - Toggle show/hide password + - "Login" button + - Quick demo button: Auto-fill + submit + - Success: Redirect naar `/epd/clients` + - Error: "Ongeldige credentials" + +**Demo credentials info box:** +- Gele achtergrond +- Credentials in monospace font +- Copy-paste friendly + +**States:** +- Loading: "Inloggen..." spinner +- Error: Red error message +- Success: Green message + redirect +- Mobile: Features sectie wordt boven login form getoond (stack layout) + +**Navigatie:** +- Link in MinimalNav: "Login" +- Logo → terug naar `/` + +--- + +### 4.5 EPD App - Coming Soon Dashboard (`/epd/clients`) + +**Doel:** Eerlijke communicatie dat app in Week 2 gebouwd wordt, manage expectations. + +**Functionaliteit:** (NIEUW - te bouwen) + +**Layout:** +``` +┌────────────────────────────────────────────┐ +│ Header: Logo | "EPD Dashboard" | Logout │ +├────────────────────────────────────────────┤ +│ │ +│ [Icon] Coming Soon │ +│ │ +│ EPD Dashboard - In Ontwikkeling │ +│ │ +│ Week 2 (Nov 18-24): Client management │ +│ Week 3 (Nov 25-Dec 1): AI integrations │ +│ │ +│ [Mockup screenshot placeholder] │ +│ │ +│ [Button: Terug naar Info] [Logout] │ +│ │ +└────────────────────────────────────────────┘ +``` + +**Content:** +- **Heading**: "EPD Dashboard - Coming Week 2" +- **Beschrijving**: + - "De EPD applicatie wordt momenteel gebouwd." + - "Bekijk de voortgang op de homepage (timeline sectie)" +- **Timeline preview**: + - Week 2: Client management & CRUD + - Week 3: AI integrations (intake, profiel, plan) + - Week 4: Polish & onboarding +- **Mockup/Screenshot**: Wireframe of visual preview van wat komt +- **Actions**: + - Button: "Terug naar Prototype Info" → `/epd` + - Button: "Logout" → `/auth/logout` → redirect `/` + +**States:** +- **Authenticated**: Normale weergave +- **Not authenticated**: Redirect naar `/login` (middleware) + +**Navigatie:** +- Logo → `/epd/clients` (blijf in app context) +- "Terug naar Info" → `/epd` (exit app) +- Logout → `/` (marketing) + +**Future states (Week 2+):** +- Replace Coming Soon met werkende client lijst +- Zelfde layout, andere content + +--- + +## 5. UI-overzicht (visuele structuur) + +🎯 **Doel:** Globale schermopbouw voor developers en designers + +### 5.1 Marketing Layout (alle publieke paginas) + +``` +┌─────────────────────────────────────────────────────┐ +│ MinimalNav (fixed top) │ +│ [Logo] Home | Contact | Login │ +├─────────────────────────────────────────────────────┤ +│ ReadingProgress (scroll-based bar) │ +├─────────────────────────────────────────────────────┤ +│ │ +│ Page Content │ +│ (hero, statement, timeline, │ +│ features, forms, etc.) │ +│ │ +├─────────────────────────────────────────────────────┤ +│ Footer: © AI Speedrun | ikbenlit.nl │ +└─────────────────────────────────────────────────────┘ +``` + +**Features:** +- Minimal navigation: scroll-based color change +- Reading progress bar (client component) +- No sidebar +- Full-width content +- Mobile: Hamburger menu + +### 5.2 EPD App Layout (protected paginas) + +``` +┌─────────────────────────────────────────────────────┐ +│ App Header │ +│ [Logo: EPD] EPD Dashboard [User] [Logout] │ +├─────────────────────────────────────────────────────┤ +│ │ +│ Main Content │ +│ (coming soon state │ +│ of client list future) │ +│ │ +├─────────────────────────────────────────────────────┤ +│ Footer: Terug naar Info | ikbenlit.nl │ +└─────────────────────────────────────────────────────┘ +``` + +**Features:** +- Separate header (geen MinimalNav) +- User state visible +- Logout prominent +- Exit to marketing link +- Future: Sidebar toevoegen voor app nav + +--- + +## 6. Navigatie Flows & User Journeys + +🎯 **Doel:** Visualiseren hoe gebruikers door de applicatie bewegen + +### Flow 1: Marketing Bezoeker → Lead + +``` +Landing (/) + ↓ +Lees Statement + Timeline (met features) + ↓ +Decision Point: + ├─→ "Probeer het prototype" → /login + │ ↓ + │ Zie features showcase + login form + │ ↓ + │ Login met demo credentials + │ ↓ + │ /epd/clients (Coming Soon) + │ + └─→ "Contact" → /contact + ↓ + Vul formulier in + ↓ + Lead opgeslagen ✓ +``` + +### Flow 2: Demo Gebruiker → EPD App + +``` +Direct naar /login (nav link) + ↓ +Kies: Magic Link OF Demo Credentials + ↓ +[Demo pad] +Fill demo@mini-ecd.demo + Demo2024! + ↓ +Submit + ↓ +Auth success → Middleware redirect + ↓ +/epd/clients (Coming Soon) + ↓ +Options: + ├─→ "Terug naar Info" → /epd + └─→ "Logout" → / +``` + +### Flow 3: Terugkerende Gebruiker (Week 2+) + +``` +Homepage / or direct /login + ↓ +Login (magic link of credentials) + ↓ +/epd/clients (werkende app) + ↓ +Client lijst → Client detail + ↓ +Intake → AI → Profiel → Plan + ↓ +Logout → terug naar marketing +``` + +### Flow 4: Build-in-Public Volger + +``` +LinkedIn post → Homepage + ↓ +Scroll naar Timeline (met features per week) + ↓ +Lees weekly updates + zie features + ↓ +Decision: + ├─→ "Probeer demo" → /login (met features showcase) + ├─→ "Contact" → /contact + └─→ Exit (volg op LinkedIn) +``` + +--- + +## 7. Interacties met AI (functionele beschrijving) + +🎯 **Doel:** Waar AI voorkomt in toekomstige EPD app (Week 3+) + +📘 **Toelichting:** Deze sectie beschrijft toekomstige AI features die nog niet in Coming Soon state zitten. + +| Locatie | AI-actie | Trigger | Input | Output | Timing | +|---------|----------|---------|-------|--------|--------| +| Intake Editor | Samenvatten | Button "AI Samenvatten" | TipTap editor content (max 20k chars) | 5-8 bullets in rechterpaneel | ~3-5 sec | +| Intake Editor | B1 Leesbaarheid | Button "Vereenvoudig taal" | Selected text of hele intake | Herschreven versie in B1 Nederlands | ~5 sec | +| Profiel Tab | Extract Problemen | Button "AI Analyse" | Intake content | DSM-light categorie + severity + rationale | ~5-8 sec | +| Plan Tab | Genereer Plan | Button "Genereer Behandelplan" | Profiel + intake data | 4 secties: Doelen, Interventies, Freq/Duur, Meetmomenten | ~10-15 sec | + +**AI-rail (rechterpaneel) gedrag:** +- Slides in vanaf rechts bij AI actie +- Loading state: Spinner + "AI analyseert..." +- Result state: Content + bronverwijzingen +- Actions: "Invoegen", "Regenereer", "Annuleer" +- Preview mode: Highlight waar content ingevoegd wordt + +**Cost tracking** (toekomstig): +- Alle AI calls worden gelogd in `ai_events` table +- Dashboard toont: Aantal calls, tokens gebruikt, geschatte kosten +- Target: <€5/maand voor MVP demo use + +--- + +## 8. Routes & Toegangsrechten + +🎯 **Doel:** Duidelijk overzicht welke routes publiek of protected zijn + +### Publieke Routes (geen auth vereist) + +| Route | Naam | Functie | Status | +|-------|------|---------|--------| +| `/` | Marketing Homepage | Statement + Timeline (met features) | ✅ Refactor | +| `/contact` | Contact Form | Lead capture | ✅ Bestaand | +| `/login` | Login Pagina | Auth flow + features showcase | ✅ Refactor | +| `/auth/callback` | OAuth Callback | Magic link handler | ✅ Bestaand | + +**Verwijderd:** +- `/epd` - EPD Demo Info pagina (features nu in timeline en login) + +### Protected Routes (auth vereist) + +| Route | Naam | Functie | Status | +|-------|------|---------|--------| +| `/epd/clients` | EPD Dashboard | Coming Soon (Week 2: Client lijst) | ⏳ Te bouwen | +| `/epd/clients/[id]` | Client Detail | Client dossier (Week 2) | 🔄 Toekomstig | +| `/epd/clients/[id]/intake` | Intake Editor | TipTap + AI (Week 3) | 🔄 Toekomstig | +| `/epd/clients/[id]/profile` | Probleem Profiel | DSM-light + AI (Week 3) | 🔄 Toekomstig | +| `/epd/clients/[id]/plan` | Behandelplan | SMART doelen + AI (Week 3) | 🔄 Toekomstig | + +### API Routes + +| Route | Naam | Functie | Auth | Status | +|-------|------|---------|------|--------| +| `/api/leads` | Lead Submission | POST contact form data | No | ✅ Bestaand | +| `/api/ai/summarize` | AI Summarize | POST intake → bullets | Yes | 🔄 Week 3 | +| `/api/ai/categorize` | AI Categorize | POST intake → DSM profile | Yes | 🔄 Week 3 | +| `/api/ai/plan` | AI Plan Generator | POST profile → treatment plan | Yes | 🔄 Week 3 | +| `/auth/logout` | Logout | Supabase signOut | Yes | ✅ Bestaand | + +### Middleware Logic (simplified) + +```typescript +// Public routes (no redirect) +const publicRoutes = [ + '/', '/contact', '/login', + '/auth/callback', '/auth/logout' +] + +// Logic +if (!user && !isPublicRoute) { + redirect('/login?redirect=' + pathname) +} + +if (user && pathname === '/login') { + redirect('/epd/clients') +} +``` + +--- + +## 9. Content Management Strategie + +🎯 **Doel:** Hoe content beheerd en bijgewerkt wordt + +### Timeline Content (Build-in-Public updates) + +**Locatie**: `content/timeline/` of `content/nl/timeline.json` + +**Structuur per week**: +```json +{ + "weekNumber": 1, + "title": "Week 1 • Nov 11-17", + "status": "completed", // completed | in_progress | planned + "description": "Marketing site foundation. Hero, statement setup, database schema aangemaakt.", + "features": [ + { + "title": "AI-Gestuurde Intake", + "description": "Schrijf een intakeverslag en krijg binnen seconden een gestructureerde samenvatting", + "time": "< 5 seconden", + "traditional": "15-20 minuten handmatig", + "icon": "Brain" + }, + { + "title": "Automatische DSM Classificatie", + "description": "Het systeem analyseert de intake en stelt DSM-categorieën voor", + "time": "< 3 seconden", + "traditional": "10-15 minuten analyse", + "icon": "Zap" + } + ], + "metrics": { + "developmentHours": 30, + "infrastructureCost": 50, + "totalCost": 50 + }, + "achievements": [ + "Landing page met hero + statement", + "Timeline component met features", + "Contact form + lead capture API", + "Database schema (5 core tables)", + "Supabase Auth + RLS policies" + ], + "visual": "/timeline/week-1-screenshot.png" // optional +} +``` + +**Update frequency**: Einde van elke week (zaterdag/zondag) + +**Ownership**: Handmatig door Colin via JSON edit + +**Alternative**: MDX files met frontmatter voor meer flexibiliteit + +### Static Content (niet-timeline) + +| Content Type | Locatie | Format | Update Freq | +|--------------|---------|--------|-------------| +| Navigation | `content/nl/navigation.json` | JSON | Ad-hoc | +| Timeline (met features) | `content/nl/timeline.json` | JSON | Weekly | +| EPD Features (voor login) | `content/nl/epd.json` | JSON | Rarely | +| Metadata (SEO) | `content/nl/metadata.json` | JSON | Once | + +--- + +## 10. Gebruikersrollen en rechten + +🎯 **Doel:** Wie kan wat binnen de applicatie + +| Rol | Toegang tot | Beperkingen | Auth Method | +|-----|-------------|-------------|-------------| +| **Anonymous Visitor** | Marketing pages (/, /contact, /login) | Geen EPD app toegang | - | +| **Demo User** | Alles (marketing + EPD app) | Fictieve data only, geen wijzigingen persistent | Email/password (demo credentials) | +| **Magic Link User** | Marketing + EPD app (toekomstig) | Eigen dossiers (RLS) | Magic link email | +| **Admin** (toekomstig) | Alle dossiers + metrics | - | Special credentials | + +**RLS (Row Level Security) in Supabase:** +- Elke gebruiker ziet alleen eigen clients/notes/profiles/plans +- Policy: `auth.uid() = created_by` +- Demo users delen fictieve dataset +- Real users: isolated per user_id + +--- + +## 11. States & Edge Cases + +🎯 **Doel:** Hoe systeem omgaat met uitzonderlijke situaties + +### Marketing Website + +| Scenario | Gedrag | +|----------|--------| +| Timeline data niet beschikbaar | Toon skeleton loading + "Updates coming soon" | +| Image load failure | Fallback naar placeholder met initials | +| Form submission error | Retry optie + error message + support email | +| Slow network | Progressive loading, defer non-critical content | + +### Login Flow + +| Scenario | Gedrag | +|----------|--------| +| Ongeldige demo credentials | Error: "Credentials incorrect. Gebruik demo@mini-ecd.demo" | +| Magic link expired | Error + "Request new link" button | +| Already logged in | Direct redirect naar `/epd/clients` | +| Network error tijdens auth | Error message + retry button | + +### EPD App (Coming Soon) + +| Scenario | Gedrag | +|----------|--------| +| User bezoekt direct `/epd/clients` | Middleware check → redirect `/login` als niet ingelogd | +| Logout tijdens session | Redirect naar `/` + success toast | +| Session expired | Redirect naar `/login` + "Session verlopen, log opnieuw in" | + +### Week 2+ (Toekomstig - Client CRUD) + +| Scenario | Gedrag | +|----------|--------| +| Lege state (geen clients) | "Voeg je eerste cliënt toe" + CTA button | +| Delete confirmation | Modal: "Weet je zeker? Alle dossiers worden verwijderd" | +| Concurrent edit conflict | Toast: "Data is veranderd, herlaad pagina" | +| AI API failure | Retry 3x, dan error + support contact | + +--- + +## 12. Bijlagen & Referenties + +🎯 **Doel:** Linken naar gerelateerde documenten + +**Mission Control Documents:** +- **PRD v1.2** (`docs/specs/prd-mini-ecd-v2.md`) - Product Requirements & Business Case +- **TO v1.2** (`docs/specs/to-mini-ecd-v1_2.md`) - Technische Architectuur & Database Schema +- **Bouwplan v1.6** (`docs/specs/bouwplan-ai-speedrun-marketing-first-v1.1.md`) - Epic & Story Planning +- **UX Stylesheet** (`docs/specs/ux-stylesheet.md`) - Design System & Tailwind Config +- **API Specs** (`docs/specs/api-acces-mini-ecd.md`) - Endpoint Documentation + +**External Resources:** +- [Aceternity UI Timeline](https://21st.dev/r/timeline) - Timeline component inspiratie +- [Supabase Auth Docs](https://supabase.com/docs/guides/auth) - Authentication flows +- [Next.js 15 Routing](https://nextjs.org/docs/app/building-your-application/routing) - App Router patterns + +**Design References:** +- `docs/design/timeline-comp.tsx` - Timeline component voorbeeld +- Bestaande marketing components in `app/(marketing)/components/` + +--- + +## 13. Implementatie Prioriteiten (voor Developers) + +🎯 **Doel:** Volgorde van bouwen voor maximale impact + +### 🔴 Critical (Week 1 fixes - nu) + +1. **Verwijder EPD demo pagina** (15 min) + - Delete `/app/(marketing)/epd/page.tsx` + - Update navigation (verwijder "EPD Prototype" link) + - Update middleware (verwijder `/epd` uit public routes) + +2. **Coming Soon page** (30 min) + - Create `/epd/clients/page.tsx` + - Simple layout + logout + - Middleware redirect update + +### 🟡 High Priority (Week 1-2 refactor) + +3. **Timeline component met features** (3-4 uur) + - Install/copy Aceternity timeline + - Create timeline content JSON met features array + - Add features showcase per week item + - Add to homepage + +4. **Homepage vereenvoudiging** (2-3 uur) + - Remove manifesto long-form + - Add statement section + - Integrate timeline (met features) + - Update CTA: "Probeer het prototype" → `/login` + +5. **Login pagina met features showcase** (2-3 uur) + - Split-screen layout (features links, login rechts) + - Features grid component (hergebruik van EPD features) + - Mobile responsive (stack layout) + - Integreer bestaande login functionaliteit + +### 🟢 Medium Priority (Week 2 app build) + +5. **EPD App foundation** (Week 2) + - Client CRUD + - App layout met sidebar + - Navigation tussen contexts + +6. **AI integrations** (Week 3) + - API endpoints + - TipTap editor + - AI-rail components + +--- + +## Changelog + +| Versie | Datum | Auteur | Wijzigingen | +|--------|-------|--------|-------------| +| v2.0 | 17-11-2024 | Colin | Initiële versie - Refactor van v1.2 implementatie. Nieuwe timeline approach, vereenvoudigde marketing, /epd/* routing, coming soon strategie | +| v2.1 | 17-11-2024 | Colin | Verwijderd: Separate EPD demo pagina (/epd). Features nu in timeline op homepage en features showcase op login pagina. Vereenvoudigde user journey. | + +--- + +**Einde Functioneel Ontwerp v2.1** diff --git a/docs/specs/ux-implementation-plan-v2.md b/docs/specs/ux-implementation-plan-v2.md new file mode 100644 index 0000000..c727996 --- /dev/null +++ b/docs/specs/ux-implementation-plan-v2.md @@ -0,0 +1,1538 @@ +# 🎨 UX Implementation Plan v2.0 - Teal Primary System + +**Project:** AI Speedrun - Mini-EPD Prototype +**Versie:** v2.0 (Teal-First Design System) +**Datum:** 17-11-2024 +**Auteur:** Colin Lit +**Context:** Showcase voor AI consultancy, niet productie EPD + +--- + +## 1. Strategic Context & Design Rationale + +### 1.1 Project Identity (Revised Understanding) + +**Wat AI Speedrun ECHT is:** +- AI consultancy portfolio piece (NIET een EPD vendor) +- Technical demonstration van "Software on Demand" (NIET production healthcare tool) +- Build-in-public LinkedIn content machine (NIET end-user product) +- Proof-of-concept voor GGZ innovatiemanagers (NIET voor therapeuten) + +**Target Audience:** +- ✅ GGZ innovatiemanagers & bestuurders (decision makers) +- ✅ Tech-savvy stakeholders (CTO's, IT managers) +- ✅ LinkedIn followers (build-in-public audience) +- ✅ Consultancy prospects (potential clients) +- ❌ NIET: Dagelijkse EPD gebruikers (therapeuten, psychologen) + +**Business Goal:** +> Demonstrate AI expertise through rapid EPD development (€100k → €200, 12 months → 4 weeks) to attract GGZ consultancy clients. + +### 1.2 Why Teal (#0D9488) as Primary Color + +**Strategic Reasoning:** + +| Criterion | Blue (#3B82F6) | Teal (#0D9488) | Violet (#5B47ED) | Winner | +|-----------|----------------|----------------|------------------|--------| +| **Differentiation** | Blends with traditional EPDs | Distinct but professional | Very bold, might alienate | **Teal** | +| **Innovation Signal** | Conservative, "old guard" | Modern, tech-forward | Cutting-edge, risky | **Teal** | +| **GGZ Appropriateness** | Expected, safe | Healthcare-adjacent, fresh | Too unconventional | **Teal** | +| **LinkedIn Visual Recall** | Generic screenshots | Recognizable brand color | Memorable but polarizing | **Teal** | +| **Demo Context** | Works but boring | Perfect for 10-min showcase | Strong but might distract | **Teal** | +| **Tailwind Integration** | Native (blue-600) | Native (teal-600) | Native (purple-600) | **Tie** | + +**Decision:** Teal (#0D9488 / Tailwind teal-600) as primary brand color. + +**Rationale:** +1. **Differentiates** from traditional EPD blue-sea (Chipsoft, Epic, Nexus) +2. **Signals innovation** without alienating conservative GGZ sector +3. **Modern aesthetic** (2020s design language, not dated #008080) +4. **LinkedIn-friendly** (visual brand consistency in screenshots) +5. **Tailwind-native** (free design system with teal-50 through teal-900) +6. **Demo-optimized** (visual impact for 10-minute showcases) + +**Psychology:** Teal = Innovation + Clarity + Forward-thinking (without purple's "luxury" or blue's "corporate" baggage) + +--- + +## 2. Color System Design + +### 2.1 Primary Brand Colors + +```css +/* Teal - Primary Brand (Innovation Signal) */ +--color-brand-50: #F0FDFA; /* Subtle backgrounds, hover states */ +--color-brand-100: #CCFBF1; /* Light backgrounds, disabled states */ +--color-brand-200: #99F6E4; /* Borders, dividers */ +--color-brand-300: #5EEAD4; /* Hover borders */ +--color-brand-400: #2DD4BF; /* Active states */ +--color-brand-500: #14B8A6; /* Base teal (lighter variant) */ +--color-brand-600: #0D9488; /* PRIMARY - Main brand color */ +--color-brand-700: #0F766E; /* Hover state for buttons */ +--color-brand-800: #115E59; /* Active state for buttons */ +--color-brand-900: #134E4A; /* Deep variant for text on light bg */ +``` + +**Usage:** +- Primary CTAs (buttons, links) +- Focus states (input fields, interactive elements) +- Navigation highlights (active menu items) +- Brand elements (logo accents, hero sections) +- Timeline dots, progress indicators + +### 2.2 AI Features - Amber Highlights + +```css +/* Amber - AI Augmentation (Enhancement Signal) */ +--color-ai-50: #FFFBEB; /* Subtle AI suggestion backgrounds */ +--color-ai-100: #FEF3C7; /* AI suggestion panels */ +--color-ai-200: #FDE68A; /* AI highlight borders */ +--color-ai-300: #FCD34D; /* Hover states */ +--color-ai-400: #FBBF24; /* AI inline highlights */ +--color-ai-500: #F59E0B; /* PRIMARY - AI actions */ +--color-ai-600: #D97706; /* Hover state */ +--color-ai-700: #B45309; /* Active state */ +--color-ai-800: #92400E; /* Dark text on light bg */ +--color-ai-900: #78350F; /* Deep variant */ +``` + +**Usage:** +- AI action buttons (gradient from-amber-500 to-amber-400) +- AI processing states (shimmer animations) +- AI suggestion badges ("AI" icon + amber glow) +- Inline AI highlights (selected text suggestions) + +### 2.3 Neutral Base - Slate + +```css +/* Slate - Professional Foundation */ +--color-bg-app: #F8FAFC; /* slate-50 - Main app background */ +--color-surface: #FFFFFF; /* White - Cards, panels */ +--color-surface-secondary: #F1F5F9; /* slate-100 - Secondary surfaces */ + +--color-border-subtle: #F1F5F9; /* slate-100 - Very subtle borders */ +--color-border: #E2E8F0; /* slate-200 - Default borders */ +--color-border-strong: #CBD5E1; /* slate-300 - Emphasized borders */ + +--color-text-primary: #0F172A; /* slate-900 - Headings, emphasis */ +--color-text-secondary: #475569;/* slate-600 - Body text, labels */ +--color-text-tertiary: #64748B; /* slate-500 - Metadata, captions */ +--color-text-placeholder: #94A3B8; /* slate-400 - Input placeholders */ +``` + +**Usage:** +- Background hierarchy (app → surface → cards) +- Text hierarchy (primary → secondary → tertiary) +- Border weights (subtle → default → strong) + +### 2.4 Semantic Colors (Universal) + +```css +/* Success - Green */ +--color-success: #16A34A; /* green-600 - Success states */ +--color-success-subtle: #ECFDF5;/* green-50 - Success backgrounds */ +--color-success-border: #86EFAC;/* green-300 - Success borders */ + +/* Warning - Yellow */ +--color-warning: #EAB308; /* yellow-500 - Warning states */ +--color-warning-subtle: #FEFCE8;/* yellow-50 - Warning backgrounds */ +--color-warning-border: #FDE047;/* yellow-300 - Warning borders */ + +/* Error - Red */ +--color-error: #DC2626; /* red-600 - Error states */ +--color-error-subtle: #FEF2F2; /* red-50 - Error backgrounds */ +--color-error-border: #FCA5A5; /* red-300 - Error borders */ + +/* Info - Teal (uses brand) */ +--color-info: #0D9488; /* teal-600 - Info states (brand color) */ +--color-info-subtle: #CCFBF1; /* teal-100 - Info backgrounds */ +--color-info-border: #5EEAD4; /* teal-300 - Info borders */ +``` + +**Usage:** +- Toast notifications +- Form validation states +- Alert banners +- Status badges + +### 2.5 Functional Module Colors (Behouden) + +```css +/* Appointments Module - Green */ +--color-module-appointments-bg: #E8F8EF; /* green-100 variant */ +--color-module-appointments-accent: #16A34A; /* green-600 */ +--color-module-appointments-border: #CDECDC; /* green-200 variant */ + +/* Medications Module - Amber */ +--color-module-meds-bg: #FEF6DC; /* amber-100 variant */ +--color-module-meds-accent: #F59E0B; /* amber-500 */ +--color-module-meds-border: #F6E7B6; /* amber-200 variant */ + +/* Lab Results Module - Orange */ +--color-module-labs-bg: #FFEBDC; /* orange-100 variant */ +--color-module-labs-accent: #F97316; /* orange-500 */ +--color-module-labs-border: #FFD2B8; /* orange-200 variant */ +``` + +**Usage:** +- EPD module cards (left-border accent pattern) +- Dashboard widgets +- Category badges + +--- + +## 3. Typography System + +### 3.1 Font Families (Behouden - Perfect) + +```typescript +// Current font stack is excellent, no changes needed +--font-serif: 'Crimson Text', Georgia, serif; // Storytelling, manifesto +--font-sans: 'Inter', system-ui, sans-serif; // UI, body text +--font-mono: 'JetBrains Mono', 'Courier New', monospace; // Data, timestamps +``` + +**Rationale:** +- Crimson Text = elegant long-form reading (manifesto) +- Inter = clean UI workhorse (buttons, labels, forms) +- JetBrains Mono = technical credibility (IDs, timestamps, code) + +### 3.2 Type Scale + +```css +/* Display & Headings */ +--text-display: clamp(2.5rem, 6vw, 4rem); /* 40-64px - Hero headings */ + line-height: 1.1; + letter-spacing: -0.02em; + +--text-h1: clamp(2rem, 5vw, 3rem); /* 32-48px - Page titles */ + line-height: 1.1; + letter-spacing: -0.01em; + +--text-h2: clamp(1.75rem, 4vw, 2.5rem); /* 28-40px - Section headers */ + line-height: 1.2; + font-weight: 600; + +--text-h3: 1.5rem; /* 24px - Subsection headers */ + line-height: 1.3; + font-weight: 600; + +--text-h4: 1.125rem; /* 18px - Card headers */ + line-height: 1.4; + font-weight: 600; + +/* Body Text */ +--text-body: 1rem; /* 16px - Default body */ + line-height: 1.5; + +--text-body-lg: 1.125rem; /* 18px - Emphasized body */ + line-height: 1.6; + +--text-body-sm: 0.875rem; /* 14px - Dense content */ + line-height: 1.5; + +/* Utility Text */ +--text-caption: 0.875rem; /* 14px - Metadata, timestamps */ + line-height: 1.4; + +--text-overline: 0.75rem; /* 12px - Labels, badges */ + line-height: 1.4; + letter-spacing: 0.08em; + text-transform: uppercase; +``` + +### 3.3 Font Weight Strategy + +```css +/* Inter weights for UI hierarchy */ +--font-weight-normal: 400; /* Body text, form inputs */ +--font-weight-medium: 500; /* Subtle emphasis, labels */ +--font-weight-semibold: 600; /* Buttons, card titles, h3-h4 */ +--font-weight-bold: 700; /* Important CTAs, h1-h2 */ + +/* Crimson Text for storytelling */ +--font-weight-regular: 400; /* Manifesto body */ +--font-weight-semibold: 600; /* Manifesto headings */ + +/* JetBrains Mono for data */ +--font-weight-regular: 400; /* Timestamps, IDs */ +--font-weight-medium: 500; /* Emphasized data points */ +``` + +--- + +## 4. Component Patterns + +### 4.1 Button System + +#### Primary Button (Teal) +```tsx + +``` + +**Usage:** Main CTAs, form submissions, primary navigation actions + +#### AI Action Button (Amber Gradient) +```tsx + +``` + +**Usage:** AI-powered actions (summarize, categorize, generate plan) + +#### Secondary Button (Neutral) +```tsx + +``` + +**Usage:** Alternative actions, cancel, back navigation + +#### Ghost Button (Teal Outline) +```tsx + +``` + +**Usage:** Tertiary actions, filters, toggles + +### 4.2 Input Fields + +#### Standard Input +```tsx + +``` + +#### AI-Enhanced Input (with suggestion indicator) +```tsx +
+ + +
+ + + AI + +
+
+``` + +### 4.3 Card System + +#### Module Card (Semantic Left Border) +```tsx +
+
+ {/* Icon */} +
+ +
+ + {/* Content */} +
+

+ Card Title +

+

+ Metadata or timestamp +

+

+ Card description content +

+
+
+
+``` + +**Variants:** +- `border-l-green-600` for appointments module +- `border-l-amber-500` for medications module +- `border-l-orange-500` for lab results module + +#### Standard Card (No Accent) +```tsx +
+ {/* Content */} +
+``` + +### 4.4 Badge System + +```tsx +// Status Badge + + Active + + +// AI Badge + + + AI Generated + + +// Severity Badge (DSM) + + Hoog + +``` + +--- + +## 5. Motion & Animation Principles + +### 5.1 Duration Scale + +```typescript +export const motionDurations = { + instant: '100ms', // Micro-feedback (button press, checkbox toggle) + fast: '200ms', // Hover states, tooltips + normal: '300ms', // Panel opens, dropdown menus + slow: '500ms', // Modals, drawers + glacial: '800ms', // Marketing animations only (hero sections) +} +``` + +**Rules:** +- **EPD Interface:** Use `instant` to `normal` only (users want speed) +- **Marketing Site:** Can use up to `glacial` (storytelling allows slower pace) + +### 5.2 Easing Functions + +```css +/* Standard easing (default) */ +--ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1); + +/* Decelerate (elements entering screen) */ +--ease-decelerate: cubic-bezier(0.0, 0.0, 0.2, 1); + +/* Accelerate (elements exiting screen) */ +--ease-accelerate: cubic-bezier(0.4, 0.0, 1, 1); + +/* Gentle (calm, therapeutic feel) */ +--ease-gentle: cubic-bezier(0.25, 0.46, 0.45, 0.94); +``` + +**Usage:** +- Standard: Most transitions +- Decelerate: Modals opening, panels sliding in +- Accelerate: Modals closing, panels sliding out +- Gentle: Marketing site, long-form content + +### 5.3 AI-Specific Animations + +#### "Thinking" Shimmer +```css +@keyframes ai-thinking { + 0% { background-position: -200% center; } + 100% { background-position: 200% center; } +} + +.ai-processing { + background: linear-gradient( + 90deg, + transparent, + rgba(245, 158, 11, 0.1), + transparent + ); + background-size: 200% 100%; + animation: ai-thinking 1.5s ease-in-out infinite; +} +``` + +**Usage:** Loading states for AI API calls + +#### Fade-Slide-Up (AI Suggestions) +```css +@keyframes fadeSlideUp { + from { + opacity: 0; + transform: translateY(8px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +.ai-suggestion-enter { + animation: fadeSlideUp 400ms var(--ease-gentle); +} +``` + +**Usage:** AI suggestions appearing in right panel (AI-rail) + +#### Pulse (AI Badge) +```css +@keyframes pulse-amber { + 0%, 100% { opacity: 1; } + 50% { opacity: 0.6; } +} + +.ai-badge-pulse { + animation: pulse-amber 2s ease-in-out infinite; +} +``` + +**Usage:** AI badge on active processing + +### 5.4 Performance Guidelines + +```typescript +// Prefer transforms over top/left +// GOOD: +transform: translateY(8px); + +// BAD: +top: 8px; + +// Prefer opacity over visibility +// GOOD: +opacity: 0; pointer-events: none; + +// BAD: +display: none; + +// Use will-change sparingly +.modal-enter { + will-change: transform, opacity; +} + +.modal-enter-done { + will-change: auto; /* Remove after animation */ +} +``` + +--- + +## 6. Implementation Roadmap + +### Phase 1: Foundation (Week 1 - Day 1-2) + +**Priority: CRITICAL** - Breaking changes, full color swap + +#### Task 1.1: Update Tailwind Config +**File:** `tailwind.config.ts` +**Time:** 30 min + +```typescript +// Replace blue-based brand with teal +colors: { + brand: { + 50: '#F0FDFA', + 100: '#CCFBF1', + 200: '#99F6E4', + 300: '#5EEAD4', + 400: '#2DD4BF', + 500: '#14B8A6', + 600: '#0D9488', // PRIMARY + 700: '#0F766E', + 800: '#115E59', + 900: '#134E4A', + }, + + ai: colors.amber, // Keep amber for AI features + + // Semantic colors (keep existing) + success: colors.green, + warning: colors.yellow, + error: colors.red, + + // Info now uses brand teal + info: { + DEFAULT: '#0D9488', + light: '#CCFBF1', + dark: '#0F766E', + }, +} +``` + +#### Task 1.2: Update Global CSS Variables +**File:** `app/globals.css` +**Time:** 20 min + +```css +@layer base { + :root { + /* Primary Brand - UPDATE from blue to teal */ + --primary: #0D9488; /* was #3B82F6 */ + --primary-foreground: #FFFFFF; + + /* Info color - UPDATE to match brand */ + --info: #0D9488; /* was #3B82F6 */ + + /* Keep existing */ + --background: #F8FAFC; + --foreground: #0F172A; + --border: #E2E8F0; + + /* AI colors - KEEP */ + --ai-highlight: #F59E0B; + --ai-subtle: #FEF3C7; + + /* Module colors - KEEP */ + --module-appointments: #16A34A; + --module-meds: #F59E0B; + --module-labs: #F97316; + } + + .dark { + /* Dark mode variants (if needed later) */ + --primary: #14B8A6; /* Lighter teal for dark bg */ + } +} +``` + +#### Task 1.3: Test Contrast Ratios +**Tool:** WebAIM Contrast Checker +**Time:** 15 min + +Verify WCAG AA compliance: +- [ ] Teal-600 (#0D9488) on white: 4.58:1 ✅ (AA Large Text) +- [ ] Teal-700 (#0F766E) on white: 5.77:1 ✅ (AA Normal Text) +- [ ] Teal-900 (#134E4A) on white: 11.32:1 ✅ (AAA) +- [ ] White on teal-600: 4.58:1 ✅ (AA Large Text) + +**Action if needed:** Use teal-700 for small text on white, teal-600 for buttons with white text. + +--- + +### Phase 2: Component Updates (Week 1 - Day 2-3) + +**Priority: HIGH** - Visible user-facing changes + +#### Task 2.1: Sign-In Component Refactor +**File:** `components/ui/sign-in.tsx` +**Time:** 1 hour + +**Changes:** +```tsx +// Background +- className="bg-[#e8f4ef]" ++ className="bg-slate-50" + +// Primary buttons +- className="bg-blue-600 hover:bg-blue-500" ++ className="bg-teal-600 hover:bg-teal-700" + +// Links +- className="text-blue-400 hover:text-blue-300" ++ className="text-teal-400 hover:text-teal-300" + +// Stat card 1 (Orange - Cost reduction) +- Content: "41% of recruiters..." ++ Content: "€100k → €200: 99.8% cost reduction" ++ Keep: bg-gradient-to-br from-orange-500 to-orange-400 + +// Stat card 2 (Green - Speed) +- Content: "76% of hiring managers..." ++ Content: "4 weeks: traditional takes 6 months" +- bg-green-500 ++ bg-gradient-to-br from-teal-500 to-teal-400 +``` + +**Before/After:** +- Before: Generic job-seeking stats with blue/green +- After: AI Speedrun specific metrics with teal/amber theme + +#### Task 2.2: Timeline Component Update +**File:** `components/ui/timeline.tsx` (to be created from docs/design/timeline-comp.tsx) +**Time:** 1.5 hours + +**Implementation:** +1. Copy timeline component from `docs/design/timeline-comp.tsx` +2. Update gradient: +```tsx +// Line gradient +- className="bg-gradient-to-t from-purple-500 via-blue-500" ++ className="bg-gradient-to-t from-teal-600 via-teal-500 to-transparent" + +// Dots +- className="bg-white border-purple-200" ++ className="bg-white border-teal-200" + +// Active dot +- className="bg-purple-600" ++ className="bg-teal-600" + +// Timestamps (add mono font) ++ className="text-teal-600 font-mono text-caption" +``` + +3. Create content structure: +**File:** `content/nl/timeline.json` + +```json +[ + { + "weekNumber": 1, + "title": "Week 1 • Nov 11-17", + "status": "completed", + "description": "Marketing site foundation opgezet. Hero section, manifesto content, database schema aangemaakt.", + "metrics": { + "developmentHours": 30, + "infrastructureCost": 50 + }, + "achievements": [ + "Landing page met hero + statement", + "EPD demo pagina met credentials", + "Contact form + lead capture API", + "Database schema (5 core tables)", + "Supabase Auth + RLS policies" + ] + }, + { + "weekNumber": 2, + "title": "Week 2 • Nov 18-24", + "status": "in_progress", + "description": "EPD app foundation. Client management, auth flow, protected routes.", + "metrics": { + "developmentHours": 0, + "infrastructureCost": 0 + }, + "achievements": [] + } +] +``` + +#### Task 2.3: Navigation Component Update +**File:** `app/(marketing)/components/minimal-nav.tsx` +**Time:** 30 min + +**Changes:** +```tsx +// Active link styling +- className="text-blue-600" ++ className="text-teal-600" + +// Hover states +- className="hover:text-blue-700" ++ className="hover:text-teal-700" + +// Mobile menu button +- className="text-blue-600" ++ className="text-teal-600" +``` + +#### Task 2.4: Create AI Button Component +**File:** `components/ui/ai-button.tsx` (NEW) +**Time:** 20 min + +```tsx +import { SparklesIcon } from 'lucide-react' + +interface AIButtonProps { + children: React.ReactNode + onClick?: () => void + loading?: boolean + disabled?: boolean +} + +export function AIButton({ children, onClick, loading, disabled }: AIButtonProps) { + return ( + + ) +} +``` + +**Usage:** +```tsx + + Generate Summary + +``` + +#### Task 2.5: Update Module Cards (EPD) +**Files:** Future EPD components +**Time:** 30 min + +**Pattern:** +```tsx +// Appointments card +
+ +// Medications card +
+ +// Labs card +
+``` + +--- + +### Phase 3: Marketing Site Integration (Week 1 - Day 3-4) + +**Priority: MEDIUM** - Content updates, new sections + +#### Task 3.1: Homepage Restructure +**File:** `app/(marketing)/page.tsx` +**Time:** 2 hours + +**New Structure:** +```tsx +export default function HomePage() { + return ( +
+ {/* 1. Hero Section - KEEP */} + + + {/* 2. Statement Section - NEW */} + + + {/* 3. Timeline Section - NEW */} + + + {/* 4. CTA Section - SIMPLIFIED */} + +
+ ) +} +``` + +**Remove:** +- ManifestoContent (long-form moved to separate /about page if needed) +- ComparisonTable (moved to /epd page) +- Multiple InsightBox components + +#### Task 3.2: Create Statement Section +**File:** `app/(marketing)/components/statement-section.tsx` (NEW) +**Time:** 1 hour + +```tsx +export function StatementSection() { + return ( +
+

+ Software on Demand: Van €100k naar €200 +

+ +
+

+ Enterprise software kost gemiddeld €100.000+ en duurt + 12-24 maanden om te bouwen. Voor een GGZ-praktijk met + 5 therapeuten is dit onbereikbaar. +

+ +

+ AI-powered development verandert dit. Met Claude als co-pilot, moderne + frameworks, en cloud infrastructure bouwen we hetzelfde EPD in + 4 weken voor €200 totale kosten. +

+ +

+ Dit project is het bewijs. Volg hieronder de voortgang week voor week. +

+
+
+ ) +} +``` + +#### Task 3.3: Integrate Timeline Component +**File:** `app/(marketing)/components/timeline-section.tsx` (NEW) +**Time:** 1 hour + +```tsx +import { Timeline } from '@/components/ui/timeline' +import { getContent } from '@/lib/content/loader' + +export async function TimelineSection() { + const timelineData = await getContent('nl', 'timeline') + + // Transform to Timeline component format + const data = timelineData.map(week => ({ + title: week.title, + content: ( +
+

+ {week.description} +

+ + {/* Metrics */} + {week.metrics && ( +
+
+
Dev Hours
+
+ {week.metrics.developmentHours} +
+
+
+
Cost
+
+ €{week.metrics.infrastructureCost} +
+
+
+ )} + + {/* Achievements */} + {week.achievements && week.achievements.length > 0 && ( +
+ {week.achievements.map((achievement, i) => ( +
+
+ {achievement} +
+ ))} +
+ )} +
+ ), + })) + + return ( +
+
+

+ Build in Public: 4 Weken Progress +

+

+ Transparantie vanaf dag 1. Volg elke week de voortgang, + kosten, en geleerde lessen. +

+ + +
+
+ ) +} +``` + +#### Task 3.4: Update CTA Section +**File:** Update existing CTA in homepage +**Time:** 20 min + +**Simplified CTA:** +```tsx +
+
+

+ Klaar om te experimenteren? +

+ +
+ {/* Primary CTA */} + + Bekijk het EPD Prototype + + + {/* Secondary CTA */} + + Start een Project + +
+
+
+``` + +--- + +### Phase 4: Content Updates (Week 1 - Day 4) + +**Priority: MEDIUM** - Supporting content + +#### Task 4.1: Fix EPD Page Links +**File:** `app/(marketing)/epd/credentials-box.tsx` +**Time:** 5 min + +```tsx +// Line 80 or wherever login link is +- href="/app/login" ++ href="/login" +``` + +#### Task 4.2: Update Navigation Content +**File:** `content/nl/navigation.json` +**Time:** 5 min + +```json +{ + "logo": { + "text": "AI Speedrun", + "href": "/" + }, + "links": [ + { + "label": "Home", + "href": "/" + }, + { + "label": "EPD Prototype", + "href": "/epd" + }, + { + "label": "Contact", + "href": "/contact" + }, + { + "label": "Login", + "href": "/login" + } + ] +} +``` + +#### Task 4.3: Create Timeline Content +**File:** `content/nl/timeline.json` (NEW) +**Time:** 30 min + +See Task 2.2 for structure. Populate with real Week 1 data. + +--- + +### Phase 5: EPD App Foundation (Week 2 - Later) + +**Priority: LOW** - Can be done in Week 2 + +#### Task 5.1: Coming Soon Dashboard +**File:** `app/epd/clients/page.tsx` (NEW) +**Time:** 45 min + +```tsx +import { redirect } from 'next/navigation' +import { createClient } from '@/lib/supabase/server' + +export default async function ClientsPage() { + const supabase = createClient() + const { data: { user } } = await supabase.auth.getUser() + + if (!user) { + redirect('/login') + } + + return ( +
+
+ {/* Icon */} +
+ + + +
+ + {/* Heading */} +

+ EPD Dashboard - Coming Week 2 +

+ + {/* Description */} +

+ De EPD applicatie wordt momenteel gebouwd. + Volg de voortgang op de homepage timeline. +

+ + {/* Timeline Preview */} +
+

+ Development Roadmap +

+
+
+
+ + + +
+
+
Week 1: Foundation ✓
+
Marketing site, auth, database schema
+
+
+ +
+
+
+
+
+
Week 2: Client Management
+
CRUD operations, client list, detail views
+
+
+ +
+
+
+
Week 3: AI Integration
+
Intake editor, summarization, categorization
+
+
+ +
+
+
+
Week 4: Polish & Launch
+
Onboarding, optimization, demo prep
+
+
+
+
+ + {/* Actions */} + +
+
+ ) +} +``` + +#### Task 5.2: Update Middleware Redirects +**File:** `middleware.ts` +**Time:** 10 min + +```typescript +// Line 78-81: Update redirect target +if (user && pathname === '/login') { + return NextResponse.redirect(new URL('/epd/clients', request.url)) +} + +// Ensure /epd/clients is protected +const publicRoutes = [ + '/', '/epd', '/contact', '/login', + '/auth/callback', '/auth/logout' +] +// /epd/clients is NOT in publicRoutes, so it's protected ✓ +``` + +--- + +### Phase 6: Documentation (Week 1 - Day 5) + +**Priority: LOW** - Can be done async + +#### Task 6.1: Update UX Stylesheet +**File:** `docs/specs/ux-stylesheet.md` +**Time:** 30 min + +Document the new teal-first system with: +- Color palette updates +- Component examples +- Usage guidelines + +#### Task 6.2: Create Component Library Doc +**File:** `docs/specs/component-library.md` (NEW) +**Time:** 1 hour + +Document all reusable components: +- AIButton +- ModuleCard +- Timeline +- Badge variants +- Button variants + +#### Task 6.3: Update Bouwplan +**File:** `docs/specs/bouwplan-ai-speedrun-marketing-first-v1.1.md` +**Time:** 15 min + +Update status: +- E1 (Marketing Website): 100% complete → Mark timeline integration +- E2 (Database & Auth): Update progress + +--- + +## 7. Testing & Quality Assurance + +### 7.1 Visual Regression Checklist + +**Manual Testing:** +- [ ] Homepage: Hero, statement, timeline, CTA flow correctly +- [ ] EPD page: Features, credentials, comparison table visible +- [ ] Contact page: Form submits, validation works +- [ ] Login page: Both flows work (magic link + demo) +- [ ] Coming Soon page: Roadmap displays, logout works + +**Cross-Browser:** +- [ ] Chrome (latest) +- [ ] Firefox (latest) +- [ ] Safari (latest) +- [ ] Edge (latest) + +**Responsive:** +- [ ] Mobile (375px) +- [ ] Tablet (768px) +- [ ] Desktop (1440px) + +### 7.2 Accessibility Audit + +**WCAG AA Compliance:** +- [ ] Color contrast ≥ 4.5:1 for normal text +- [ ] Color contrast ≥ 3:1 for large text (18px+) +- [ ] Focus states visible (teal ring) +- [ ] Keyboard navigation works +- [ ] Screen reader labels present +- [ ] No color-only information (icons + text) + +**Tools:** +- axe DevTools (Chrome extension) +- Lighthouse (built into Chrome DevTools) +- Color contrast analyzer + +### 7.3 Performance Benchmarks + +**Lighthouse Targets:** +- [ ] Performance: > 90 +- [ ] Accessibility: 100 +- [ ] Best Practices: > 95 +- [ ] SEO: 100 + +**Core Web Vitals:** +- [ ] LCP (Largest Contentful Paint): < 2.5s +- [ ] FID (First Input Delay): < 100ms +- [ ] CLS (Cumulative Layout Shift): < 0.1 + +**Optimization:** +- Use next/image for all images +- Lazy load timeline component +- Code-split marketing vs EPD routes +- Minimize CSS (Tailwind purge) + +--- + +## 8. Migration Checklist (Quick Reference) + +### Global Changes +- [x] tailwind.config.ts: blue → teal brand colors +- [x] globals.css: --primary and --info variables +- [x] Test contrast ratios (WCAG AA) + +### Component Updates +- [ ] Sign-in: bg, buttons, stats content +- [ ] Timeline: gradient, dots, timestamps +- [ ] MinimalNav: links, active states +- [ ] AIButton: create new component +- [ ] Module cards: left-border pattern + +### Content Updates +- [ ] navigation.json: add Login link +- [ ] timeline.json: create Week 1 data +- [ ] epd/credentials-box: fix login href + +### New Components +- [ ] StatementSection: homepage pitch +- [ ] TimelineSection: build-in-public +- [ ] Coming Soon page: /epd/clients + +### Cleanup +- [ ] Remove long-form manifesto from homepage +- [ ] Move comparison table to /epd only +- [ ] Archive unused InsightBox components + +--- + +## 9. Success Metrics + +### Qualitative Goals +- **Visual Impact:** Screenshots are instantly recognizable as AI Speedrun brand +- **LinkedIn Shareability:** Timeline posts generate engagement +- **Demo Effectiveness:** 10-min demo flows smoothly without confusion +- **Brand Coherence:** Teal = innovation signal is clear to stakeholders + +### Quantitative Targets +- **Lighthouse Performance:** > 90 +- **Accessibility Score:** 100 (WCAG AA) +- **Load Time:** Homepage < 2s on 3G +- **Conversion:** > 5% contact form completion from landing + +### Week 1 Review Questions +1. Does teal feel "innovative but trustworthy"? +2. Do GGZ stakeholders understand the AI Speedrun value prop? +3. Is the timeline section compelling for LinkedIn? +4. Does the Coming Soon page manage expectations well? + +--- + +## 10. Rollback Plan (If Needed) + +### If Teal Doesn't Work + +**Scenario:** Stakeholder feedback is negative, teal feels wrong + +**Quick Rollback (< 1 hour):** +1. Revert tailwind.config.ts: teal → blue +2. Revert globals.css: --primary back to #3B82F6 +3. Git revert component changes +4. Deploy previous version + +**Keep:** Timeline component, statement section, improved content +**Revert:** Only color changes + +### Partial Rollback + +**Scenario:** Teal works for marketing, not for EPD + +**Hybrid Approach:** +- Marketing site: Keep teal (#0D9488) +- EPD app: Revert to blue (#3B82F6) +- Justification: "Bold vision (marketing) + Familiar execution (product)" + +--- + +## 11. Next Steps (Week 2+) + +### After Teal Implementation + +**Week 2 Focus:** +1. Build actual EPD client list (replace Coming Soon) +2. Client detail page with tabs (intake, profile, plan) +3. Forms for client creation/editing + +**Week 3 Focus:** +1. TipTap editor for intake notes +2. AI integration (Claude API endpoints) +3. AI-rail component for suggestions + +**Week 4 Focus:** +1. Onboarding flow +2. Polish & optimization +3. Demo dry-run preparation + +--- + +## 12. Resources & References + +### Design System Documentation +- **Tailwind Docs:** https://tailwindcss.com/docs/customizing-colors +- **WCAG Contrast:** https://webaim.org/resources/contrastchecker/ +- **Color Palette Tool:** https://coolors.co + +### Inspiration +- **Linear:** https://linear.app (violet/purple primary) +- **Vercel:** https://vercel.com/design (systematic grays) +- **Notion:** https://notion.so (clean, minimal) + +### Internal Docs +- FO v2.0: `docs/specs/fo-marketing-app-flow-v2.md` +- UX Stylesheet (current): `docs/specs/ux-stylesheet.md` +- Bouwplan: `docs/specs/bouwplan-ai-speedrun-marketing-first-v1.1.md` + +--- + +## Changelog + +| Version | Date | Author | Changes | +|---------|------|--------|---------| +| v2.0 | 17-11-2024 | Colin | Initial UX Implementation Plan with teal-first design system. Strategic pivot from blue to teal based on AI Speedrun positioning as consultancy showcase. | + +--- + +**Status:** Ready for Implementation +**Next Action:** Begin Phase 1 (tailwind.config.ts update) +**Owner:** Colin Lit +**Timeline:** Week 1, Days 1-5 diff --git a/package.json b/package.json index b0486b5..e0154b2 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "@supabase/supabase-js": "^2.81.1", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", + "framer-motion": "^12.23.24", "lucide-react": "^0.553.0", "next": "16.0.1", "next-themes": "^0.4.6", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2190989..ae11b6b 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -26,6 +26,9 @@ importers: clsx: specifier: ^2.1.1 version: 2.1.1 + framer-motion: + specifier: ^12.23.24 + version: 12.23.24(react-dom@19.2.0(react@19.2.0))(react@19.2.0) lucide-react: specifier: ^0.553.0 version: 0.553.0(react@19.2.0) @@ -1553,6 +1556,20 @@ packages: fraction.js@5.3.4: resolution: {integrity: sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==} + framer-motion@12.23.24: + resolution: {integrity: sha512-HMi5HRoRCTou+3fb3h9oTLyJGBxHfW+HnNE25tAXOvVx/IvwMHK0cx7IR4a2ZU6sh3IX1Z+4ts32PcYBOqka8w==} + peerDependencies: + '@emotion/is-prop-valid': '*' + react: ^18.0.0 || ^19.0.0 + react-dom: ^18.0.0 || ^19.0.0 + peerDependenciesMeta: + '@emotion/is-prop-valid': + optional: true + react: + optional: true + react-dom: + optional: true + fsevents@2.3.3: resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==} engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0} @@ -2023,6 +2040,12 @@ packages: resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==} engines: {node: '>=16 || 14 >=14.17'} + motion-dom@12.23.23: + resolution: {integrity: sha512-n5yolOs0TQQBRUFImrRfs/+6X4p3Q4n1dUEqt/H58Vx7OW6RF+foWEgmTVDhIWJIMXOuNNL0apKH2S16en9eiA==} + + motion-utils@12.23.6: + resolution: {integrity: sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ==} + ms@2.1.3: resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==} @@ -4292,6 +4315,15 @@ snapshots: fraction.js@5.3.4: {} + framer-motion@12.23.24(react-dom@19.2.0(react@19.2.0))(react@19.2.0): + dependencies: + motion-dom: 12.23.23 + motion-utils: 12.23.6 + tslib: 2.8.1 + optionalDependencies: + react: 19.2.0 + react-dom: 19.2.0(react@19.2.0) + fsevents@2.3.3: optional: true @@ -4730,6 +4762,12 @@ snapshots: minipass@7.1.2: {} + motion-dom@12.23.23: + dependencies: + motion-utils: 12.23.6 + + motion-utils@12.23.6: {} + ms@2.1.3: {} mz@2.7.0: diff --git a/tailwind.config.ts b/tailwind.config.ts index 8dfd3b5..60b1b7a 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -57,12 +57,39 @@ const config: Config = { // Borders border: '#E2E8F0', - // Brand & Primary + // Brand & Primary (Teal-first design system) brand: { - DEFAULT: '#3B82F6', - hover: '#2563EB', - active: '#1D4ED8', - subtle: '#EFF6FF', + 50: '#F0FDFA', + 100: '#CCFBF1', + 200: '#99F6E4', + 300: '#5EEAD4', + 400: '#2DD4BF', + 500: '#14B8A6', + 600: '#0D9488', // PRIMARY + 700: '#0F766E', + 800: '#115E59', + 900: '#134E4A', + DEFAULT: '#0D9488', + hover: '#0F766E', + active: '#115E59', + subtle: '#F0FDFA', + }, + + // AI Features (Amber) + ai: { + 50: '#FFFBEB', + 100: '#FEF3C7', + 200: '#FDE68A', + 300: '#FCD34D', + 400: '#FBBF24', + 500: '#F59E0B', // PRIMARY AI + 600: '#D97706', + 700: '#B45309', + 800: '#92400E', + 900: '#78350F', + DEFAULT: '#F59E0B', + hover: '#D97706', + subtle: '#FFFBEB', }, // Neutral CTA @@ -104,8 +131,8 @@ const config: Config = { subtle: '#FEF2F2', }, info: { - DEFAULT: '#3B82F6', - subtle: '#EFF6FF', + DEFAULT: '#0D9488', // Uses brand teal + subtle: '#CCFBF1', // teal-100 }, // Severity badges (DSM-light) @@ -131,7 +158,7 @@ const config: Config = { placeholder: '#94A3B8', border: '#CBD5E1', 'border-hover': '#94A3B8', - focus: '#3B82F6', + focus: '#0D9488', // Teal focus states disabled: { bg: '#F1F5F9', text: '#94A3B8', @@ -145,7 +172,7 @@ const config: Config = { 'lg': '0 8px 20px rgba(15,23,42,0.10)', }, ringColor: { - DEFAULT: '#3B82F6', + DEFAULT: '#0D9488', // Teal ring for focus states }, ringWidth: { DEFAULT: '2px',