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>
This commit is contained in:
colinislit
2025-11-17 19:22:49 +01:00
parent 273c00f9e8
commit b7d19a8e1a
20 changed files with 2097 additions and 68 deletions

View File

@@ -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>
);
}