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/(marketing)/page.tsx

@@ -16,6 +16,7 @@ import type { Metadata } from 'next'
 import { getContent } from '@/lib/content/loader'
 import type { MetadataContent } from '@/content/schemas/manifesto'
 import { HeroQuote } from './components/hero-quote'
+import { BuildTimeline } from './components/build-timeline'
 
 // Generate metadata for SEO
 export async function generateMetadata(): Promise<Metadata> {
@@ -68,7 +69,7 @@ export async function generateMetadata(): Promise<Metadata> {
   }
 }
 
-// Statement content interface
+// Content interfaces
 interface StatementContent {
   hero: {
     quote: string
@@ -78,14 +79,43 @@ interface StatementContent {
   }
 }
 
+interface Feature {
+  title: string
+  description: string
+  time?: string
+  traditional?: string
+  icon: "Rocket" | "Database" | "Sparkles" | "Palette" | "Calendar" | "Layout" | "Users" | "Smartphone" | "FileText" | "Brain" | "Tags" | "Target" | "HelpCircle" | "Zap" | "Eye"
+}
+
+interface WeekData {
+  weekNumber: number
+  title: string
+  status: "completed" | "in_progress" | "planned"
+  description: string
+  features: Feature[]
+  metrics: {
+    hours: string
+    cost: string
+    linesOfCode: string
+  }
+  achievements: string[]
+}
+
+interface TimelineContent {
+  heading: string
+  description: string
+  weeks: WeekData[]
+}
+
 export default async function HomePage() {
-  // Load hero content from existing manifesto
-  const content = await getContent<StatementContent>('nl', 'manifesto')
+  // Load content
+  const manifestoContent = await getContent<StatementContent>('nl', 'manifesto')
+  const timelineContent = await getContent<TimelineContent>('nl', 'timeline')
 
   return (
     <>
       {/* Hero Quote Section */}
-      <HeroQuote content={content.hero} />
+      <HeroQuote content={manifestoContent.hero} />
 
       {/* Statement Section - Software on Demand */}
       <section className="w-full md:max-w-[750px] mx-auto px-4 md:px-16 py-16 md:py-24">
@@ -121,18 +151,9 @@ export default async function HomePage() {
         </div>
       </section>
 
-      {/* Timeline Section - Coming in E1.S3 */}
-      <section id="timeline" className="w-full bg-slate-50 py-16 md:py-24">
-        <div className="max-w-6xl mx-auto px-4">
-          <div className="text-center">
-            <h2 className="font-serif text-3xl md:text-4xl font-bold text-slate-900 mb-4">
-              Build in Public: 4 Weken
-            </h2>
-            <p className="text-slate-600 text-lg max-w-2xl mx-auto">
-              Timeline komt hier in E1.S3 - volledige transparantie over voortgang, features en metrics
-            </p>
-          </div>
-        </div>
+      {/* Timeline Section */}
+      <section id="timeline">
+        <BuildTimeline data={timelineContent} />
       </section>
 
       {/* CTA Section */}