feat: Epic 1 completion - Marketing refactor met timeline en Bento Grid login

Epic 1 Stories (E1.S1 t/m E1.S6):

✨ E1.S1 - Verwijder EPD demo pagina
- Removed /epd route en credentials-box component
- Updated navigation: EPD Prototype → Login link
- Removed demo_users references from middleware en auth libs
- Cleaned up TypeScript errors in hero-section-2

✨ E1.S2 - Homepage vereenvoudigen
- Replaced lange manifesto (8000+ woorden) met statement section
- Added problem-solution-proof format (3 paragrafen)
- Removed comparison table, experiment CTA, manifesto content
- Timeline placeholder toegevoegd (completed in E1.S3)

✨ E1.S3 - Timeline component integreren
- Created BuildTimeline component (Aceternity UI pattern)
- Added timeline.json met 4 weken data (Week 1 completed)
- Features per week met icons, metrics, achievements
- Scroll-based animation met Framer Motion
- Responsive design (sticky titles, mobile/desktop layouts)

✨ E1.S4 - Timeline content structuur
- Structured JSON data in content/nl/timeline.json
- 15 Lucide icons voor feature types
- Week status badges (completed/in_progress/planned)
- Time savings display (< 5 sec vs 30 min)

✨ E1.S5 - Login pagina refactor
- Split-screen layout (60% features, 40% login)
- Teal gradient showcase met 4 feature cards
- Time savings badges per feature
- Responsive stack layout voor mobile
- Footer met AI Speedrun branding

✨ E1.S6 - Bento Grid showcase
- Replaced feature grid met Bento Grid layout
- Variable card sizes voor visual hierarchy (col-span-2, col-span-1)
- Dark slate background (from-slate-900)
- Gradient backgrounds per card (teal, amber, purple)
- Stats footer met 3 key metrics (90%+, < 5 sec, 4 weken)
- Hover animations en glassmorphism effects

🎨 Design System:
- Teal-first brand colors (#0D9488)
- Amber accents voor AI features (#F59E0B)
- Slate scale voor neutral colors
- WCAG AA compliant contrast

📦 Components:
- BuildTimeline (app/(marketing)/components)
- BentoGrid & BentoCard (components/ui)
- Button variants (components/ui)

📄 Content:
- timeline.json met volledige 4-weken data
- Features array per week
- Metrics en achievements tracking

🔧 Technical:
- Removed demo user scripts en migrations
- Updated middleware routes (removed /epd)
- TypeScript type fixes (hero-section-2, auth)
- Build succesvol: 13 routes generated

🚀 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

app/epd/components/epd-header.tsx

@@ -0,0 +1,55 @@
+"use client";
+import React from 'react';
+import { Bell, Search } from 'lucide-react';
+
+interface EPDHeaderProps {
+  title?: string;
+  subtitle?: string;
+}
+
+export function EPDHeader({ title, subtitle }: EPDHeaderProps) {
+  return (
+    <header className="sticky top-0 z-20 bg-white border-b border-slate-200 shadow-sm">
+      <div className="px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
+        {/* Left: Page Title */}
+        <div className="flex-1">
+          {title && (
+            <div>
+              <h1 className="text-lg font-semibold text-slate-900">
+                {title}
+              </h1>
+              {subtitle && (
+                <p className="text-xs text-slate-500 mt-0.5">
+                  {subtitle}
+                </p>
+              )}
+            </div>
+          )}
+        </div>
+
+        {/* Right: Search & Notifications */}
+        <div className="flex items-center gap-3">
+          {/* Search Bar - Hidden on mobile */}
+          <div className="hidden md:block relative">
+            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-slate-400" />
+            <input
+              type="text"
+              placeholder="Zoeken..."
+              className="w-64 pl-9 pr-4 py-2 bg-slate-50 border border-slate-200 rounded-lg text-sm placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent transition-all duration-200"
+            />
+          </div>
+
+          {/* Notifications */}
+          <button
+            className="relative p-2 text-slate-600 hover:text-slate-900 hover:bg-slate-50 rounded-lg transition-colors"
+            aria-label="Notificaties"
+          >
+            <Bell className="h-5 w-5" />
+            {/* Notification badge */}
+            <span className="absolute top-1 right-1 h-2 w-2 bg-red-500 rounded-full" />
+          </button>
+        </div>
+      </div>
+    </header>
+  );
+}

app/epd/components/epd-sidebar.tsx

@@ -0,0 +1,273 @@
+"use client";
+import React, { useState, useEffect } from 'react';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import {
+  Users,
+  Settings,
+  LogOut,
+  Menu,
+  X,
+  ChevronLeft,
+  ChevronRight,
+  FileText,
+  HelpCircle,
+  LayoutDashboard
+} from 'lucide-react';
+
+interface NavigationItem {
+  id: string;
+  name: string;
+  icon: React.ComponentType<{ className?: string }>;
+  href: string;
+  badge?: string;
+}
+
+interface EPDSidebarProps {
+  className?: string;
+  userEmail?: string;
+  userName?: string;
+}
+
+// EPD Navigation items
+const navigationItems: NavigationItem[] = [
+  { id: "dashboard", name: "Dashboard", icon: LayoutDashboard, href: "/epd/clients" },
+  { id: "clients", name: "Cliënten", icon: Users, href: "/epd/clients" },
+  { id: "documentation", name: "Documentatie", icon: FileText, href: "/epd/docs" },
+  { id: "settings", name: "Instellingen", icon: Settings, href: "/epd/settings" },
+  { id: "help", name: "Help", icon: HelpCircle, href: "/epd/help" },
+];
+
+export function EPDSidebar({ className = "", userEmail, userName }: EPDSidebarProps) {
+  const pathname = usePathname();
+  const [isOpen, setIsOpen] = useState(false);
+  const [isCollapsed, setIsCollapsed] = useState(false);
+
+  // 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 = () => {
+    if (window.innerWidth < 768) {
+      setIsOpen(false);
+    }
+  };
+
+  // Get user initials
+  const userInitials = userName
+    ? userName.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2)
+    : userEmail?.slice(0, 2).toUpperCase() || 'EP';
+
+  return (
+    <>
+      {/* Mobile hamburger button */}
+      <button
+        onClick={toggleSidebar}
+        className="fixed top-4 left-4 z-50 p-2.5 rounded-lg bg-white shadow-md border border-slate-200 md:hidden hover:bg-slate-50 transition-all duration-200"
+        aria-label="Toggle sidebar"
+      >
+        {isOpen ?
+          <X className="h-5 w-5 text-slate-600" /> :
+          <Menu className="h-5 w-5 text-slate-600" />
+        }
+      </button>
+
+      {/* Mobile overlay */}
+      {isOpen && (
+        <div
+          className="fixed inset-0 bg-black/40 backdrop-blur-sm z-30 md:hidden transition-opacity duration-300"
+          onClick={toggleSidebar}
+        />
+      )}
+
+      {/* Sidebar */}
+      <div
+        className={`
+          fixed top-0 left-0 h-full bg-white border-r border-slate-200 z-40 transition-all duration-300 ease-in-out flex flex-col
+          ${isOpen ? "translate-x-0" : "-translate-x-full"}
+          ${isCollapsed ? "w-20" : "w-64"}
+          md:translate-x-0 md:static md:z-auto
+          ${className}
+        `}
+      >
+        {/* Header with logo and collapse button */}
+        <div className="flex items-center justify-between p-4 border-b border-slate-200 bg-gradient-to-br from-teal-50 to-white">
+          {!isCollapsed && (
+            <Link href="/" className="flex items-center space-x-2.5 group">
+              <div className="w-9 h-9 bg-gradient-to-br from-teal-600 to-teal-700 rounded-lg flex items-center justify-center shadow-sm group-hover:shadow-md transition-shadow">
+                <span className="text-white font-bold font-mono text-sm">AI</span>
+              </div>
+              <div className="flex flex-col">
+                <span className="font-semibold text-slate-800 text-sm">Mini-EPD</span>
+                <span className="text-xs text-slate-500">Prototype</span>
+              </div>
+            </Link>
+          )}
+
+          {isCollapsed && (
+            <Link href="/" className="w-9 h-9 bg-gradient-to-br from-teal-600 to-teal-700 rounded-lg flex items-center justify-center mx-auto shadow-sm hover:shadow-md transition-shadow">
+              <span className="text-white font-bold font-mono text-sm">AI</span>
+            </Link>
+          )}
+
+          {/* Desktop collapse button */}
+          <button
+            onClick={toggleCollapse}
+            className="hidden md:flex p-1.5 rounded-md hover:bg-white/80 transition-all duration-200"
+            aria-label={isCollapsed ? "Uitklappen" : "Inklappen"}
+          >
+            {isCollapsed ? (
+              <ChevronRight className="h-4 w-4 text-slate-500" />
+            ) : (
+              <ChevronLeft className="h-4 w-4 text-slate-500" />
+            )}
+          </button>
+        </div>
+
+        {/* Navigation */}
+        <nav className="flex-1 px-3 py-4 overflow-y-auto">
+          <ul className="space-y-1">
+            {navigationItems.map((item) => {
+              const Icon = item.icon;
+              const isActive = pathname === item.href || pathname.startsWith(item.href + '/');
+
+              return (
+                <li key={item.id}>
+                  <Link
+                    href={item.href}
+                    onClick={handleItemClick}
+                    className={`
+                      w-full flex items-center space-x-2.5 px-3 py-2.5 rounded-md text-left transition-all duration-200 group
+                      ${isActive
+                        ? "bg-teal-50 text-teal-700"
+                        : "text-slate-600 hover:bg-slate-50 hover:text-slate-900"
+                      }
+                      ${isCollapsed ? "justify-center px-2" : ""}
+                    `}
+                    title={isCollapsed ? item.name : undefined}
+                  >
+                    <div className="flex items-center justify-center min-w-[20px]">
+                      <Icon
+                        className={`
+                          h-5 w-5 flex-shrink-0
+                          ${isActive
+                            ? "text-teal-600"
+                            : "text-slate-500 group-hover:text-slate-700"
+                          }
+                        `}
+                      />
+                    </div>
+
+                    {!isCollapsed && (
+                      <div className="flex items-center justify-between w-full">
+                        <span className={`text-sm ${isActive ? "font-medium" : "font-normal"}`}>
+                          {item.name}
+                        </span>
+                        {item.badge && (
+                          <span className={`
+                            px-2 py-0.5 text-xs font-medium rounded-full
+                            ${isActive
+                              ? "bg-teal-100 text-teal-700"
+                              : "bg-slate-100 text-slate-600"
+                            }
+                          `}>
+                            {item.badge}
+                          </span>
+                        )}
+                      </div>
+                    )}
+
+                    {/* Tooltip for collapsed state */}
+                    {isCollapsed && (
+                      <div className="absolute left-full ml-2 px-2 py-1 bg-slate-800 text-white text-xs rounded opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 whitespace-nowrap z-50">
+                        {item.name}
+                        <div className="absolute left-0 top-1/2 transform -translate-y-1/2 -translate-x-1 w-1.5 h-1.5 bg-slate-800 rotate-45" />
+                      </div>
+                    )}
+                  </Link>
+                </li>
+              );
+            })}
+          </ul>
+        </nav>
+
+        {/* Bottom section with profile and logout */}
+        <div className="mt-auto border-t border-slate-200">
+          {/* Profile Section */}
+          <div className={`border-b border-slate-200 bg-slate-50/30 ${isCollapsed ? 'py-3 px-2' : 'p-3'}`}>
+            {!isCollapsed ? (
+              <div className="flex items-center px-3 py-2 rounded-md bg-white hover:bg-slate-50 transition-colors duration-200">
+                <div className="w-8 h-8 bg-gradient-to-br from-teal-500 to-teal-600 rounded-full flex items-center justify-center shadow-sm">
+                  <span className="text-white font-medium text-xs">{userInitials}</span>
+                </div>
+                <div className="flex-1 min-w-0 ml-2.5">
+                  <p className="text-sm font-medium text-slate-800 truncate">
+                    {userName || userEmail || 'Demo User'}
+                  </p>
+                  <p className="text-xs text-slate-500 truncate">
+                    {userEmail || 'demo@mini-epd.demo'}
+                  </p>
+                </div>
+                <div className="w-2 h-2 bg-green-500 rounded-full ml-2" title="Online" />
+              </div>
+            ) : (
+              <div className="flex justify-center">
+                <div className="relative">
+                  <div className="w-9 h-9 bg-gradient-to-br from-teal-500 to-teal-600 rounded-full flex items-center justify-center shadow-sm">
+                    <span className="text-white font-medium text-xs">{userInitials}</span>
+                  </div>
+                  <div className="absolute -bottom-1 -right-1 w-3 h-3 bg-green-500 rounded-full border-2 border-white" />
+                </div>
+              </div>
+            )}
+          </div>
+
+          {/* Logout Button */}
+          <div className="p-3">
+            <form action="/auth/logout" method="POST">
+              <button
+                type="submit"
+                className={`
+                  w-full flex items-center rounded-md text-left transition-all duration-200 group
+                  text-red-600 hover:bg-red-50 hover:text-red-700
+                  ${isCollapsed ? "justify-center p-2.5" : "space-x-2.5 px-3 py-2.5"}
+                `}
+                title={isCollapsed ? "Uitloggen" : undefined}
+              >
+                <div className="flex items-center justify-center min-w-[20px]">
+                  <LogOut className="h-5 w-5 flex-shrink-0 text-red-500 group-hover:text-red-600" />
+                </div>
+
+                {!isCollapsed && (
+                  <span className="text-sm">Uitloggen</span>
+                )}
+
+                {/* Tooltip for collapsed state */}
+                {isCollapsed && (
+                  <div className="absolute left-full ml-2 px-2 py-1 bg-slate-800 text-white text-xs rounded opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 whitespace-nowrap z-50">
+                    Uitloggen
+                    <div className="absolute left-0 top-1/2 transform -translate-y-1/2 -translate-x-1 w-1.5 h-1.5 bg-slate-800 rotate-45" />
+                  </div>
+                )}
+              </button>
+            </form>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}