From 146c7041f82030e8d4446fb347a9a4b54d44e1df Mon Sep 17 00:00:00 2001
From: colinislit <colin@ikbenlit.nl>
Date: Mon, 17 Nov 2025 19:48:54 +0100
Subject: [PATCH] UX refinements: Color strategy + Hero Section 2
 implementation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Color Strategy: "Dark Elegance with Innovation Sparks"

Reduced teal usage from ~30% to ~5% as strategic AI/innovation accent.
Introduced amber for speed/performance metrics. Slate foundation for
professional, calm aesthetic suitable for healthcare EPD application.

### Login Page (app/login/page.tsx)
- Bento grid: Color variety (teal=AI, amber=speed, blue/indigo=general)
- Stats footer: Amber for time metrics (90%+, <5 sec), slate for build time
- Focus rings: teal-500 → slate-400 (subtle, professional)
- Clock icon for time savings feature

### Homepage (app/(marketing)/page.tsx)
- CTA background: teal-50 → slate-50 (calm, elegant)
- Teal CTA button remains (strategic conversion accent)
- NEW: Hero Section 2 implementation with:
  - Split-screen layout (60% content, 40% background image)
  - Framer Motion animations (staggered reveal + clip-path)
  - Logo, slogan, title with teal accent, CTA, contact footer
  - Tech-themed Unsplash background image

### EPD Sidebar (app/epd/components/epd-sidebar.tsx)
- Kept LIGHT theme (white/slate-50) - suitable for long EPD sessions
- Active states: teal-50 → slate-100 (professional, not distracting)
- Navigation: Subtle slate colors, not teal
- Teal AI logo only (innovation marker)
- Slate avatar (neutral, professional)

### New Files
- app/(marketing)/components/hero-section-client.tsx
  Client wrapper for HeroSection (framer-motion compatibility)

## Result
- Teal is now meaningful AI/innovation signal (not decorative)
- Amber signals speed ("aispeedrun.nl" brand alignment)
- Slate provides professional foundation for EPD context
- Build succeeds ✅

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../components/hero-section-client.tsx        | 28 ++++++++++++++++
 app/(marketing)/page.tsx                      | 33 ++++++++++++++++---
 app/epd/components/epd-sidebar.tsx            | 14 ++++----
 app/login/page.tsx                            | 16 ++++-----
 4 files changed, 72 insertions(+), 19 deletions(-)
 create mode 100644 app/(marketing)/components/hero-section-client.tsx

diff --git a/app/(marketing)/components/hero-section-client.tsx b/app/(marketing)/components/hero-section-client.tsx
new file mode 100644
index 0000000..17e5f4f
--- /dev/null
+++ b/app/(marketing)/components/hero-section-client.tsx
@@ -0,0 +1,28 @@
+'use client'
+
+import { HeroSection } from '@/components/ui/hero-section-2'
+
+interface HeroSectionClientProps {
+  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
+  }
+}
+
+export function HeroSectionClient(props: HeroSectionClientProps) {
+  return <HeroSection {...props} />
+}
diff --git a/app/(marketing)/page.tsx b/app/(marketing)/page.tsx
index 67f729a..53e86f4 100644
--- a/app/(marketing)/page.tsx
+++ b/app/(marketing)/page.tsx
@@ -15,7 +15,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 { HeroSectionClient } from './components/hero-section-client'
 import { BuildTimeline } from './components/build-timeline'
 
 // Generate metadata for SEO
@@ -114,8 +114,33 @@ export default async function HomePage() {
 
   return (
     <>
-      {/* Hero Quote Section */}
-      <HeroQuote content={manifestoContent.hero} />
+      {/* Hero Section */}
+      <HeroSectionClient
+        logo={{
+          url: "/next.svg",
+          alt: "AI Speedrun Logo",
+          text: "AI Speedrun"
+        }}
+        slogan="BUILD IN PUBLIC"
+        title={
+          <>
+            Software on Demand
+            <br />
+            <span className="text-teal-600">Van €100k naar €200</span>
+          </>
+        }
+        subtitle="Enterprise software hoeft niet meer €100.000+ per jaar te kosten. AI-powered development verkort dit naar 4 weken en €200 totale kosten. Dit EPD prototype is het levende bewijs."
+        callToAction={{
+          text: "PROBEER HET PROTOTYPE →",
+          href: "/login"
+        }}
+        backgroundImage="https://images.unsplash.com/photo-1451187580459-43490279c0fa?q=80&w=2072&auto=format&fit=crop"
+        contactInfo={{
+          website: "aispeedrun.nl",
+          phone: "Demo Project",
+          address: "Build in Public"
+        }}
+      />
 
       {/* 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">
@@ -157,7 +182,7 @@ export default async function HomePage() {
       </section>
 
       {/* CTA Section */}
-      <section className="py-24 px-4 text-center bg-gradient-to-br from-teal-50 to-white">
+      <section className="py-24 px-4 text-center bg-gradient-to-br from-slate-50 to-white">
         <div className="max-w-3xl mx-auto">
           <h2 className="text-3xl md:text-4xl font-bold text-slate-900 mb-4">
             Klaar om het prototype te proberen?
diff --git a/app/epd/components/epd-sidebar.tsx b/app/epd/components/epd-sidebar.tsx
index d38111c..fd90a99 100644
--- a/app/epd/components/epd-sidebar.tsx
+++ b/app/epd/components/epd-sidebar.tsx
@@ -105,7 +105,7 @@ export function EPDSidebar({ className = "", userEmail, userName }: EPDSidebarPr
         `}
       >
         {/* 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">
+        <div className="flex items-center justify-between p-4 border-b border-slate-200 bg-slate-50">
           {!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">
@@ -127,7 +127,7 @@ export function EPDSidebar({ className = "", userEmail, userName }: EPDSidebarPr
           {/* Desktop collapse button */}
           <button
             onClick={toggleCollapse}
-            className="hidden md:flex p-1.5 rounded-md hover:bg-white/80 transition-all duration-200"
+            className="hidden md:flex p-1.5 rounded-md hover:bg-slate-100 transition-all duration-200"
             aria-label={isCollapsed ? "Uitklappen" : "Inklappen"}
           >
             {isCollapsed ? (
@@ -153,7 +153,7 @@ export function EPDSidebar({ className = "", userEmail, userName }: EPDSidebarPr
                     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"
+                        ? "bg-slate-100 text-slate-900"
                         : "text-slate-600 hover:bg-slate-50 hover:text-slate-900"
                       }
                       ${isCollapsed ? "justify-center px-2" : ""}
@@ -165,7 +165,7 @@ export function EPDSidebar({ className = "", userEmail, userName }: EPDSidebarPr
                         className={`
                           h-5 w-5 flex-shrink-0
                           ${isActive
-                            ? "text-teal-600"
+                            ? "text-slate-700"
                             : "text-slate-500 group-hover:text-slate-700"
                           }
                         `}
@@ -181,7 +181,7 @@ export function EPDSidebar({ className = "", userEmail, userName }: EPDSidebarPr
                           <span className={`
                             px-2 py-0.5 text-xs font-medium rounded-full
                             ${isActive
-                              ? "bg-teal-100 text-teal-700"
+                              ? "bg-slate-200 text-slate-700"
                               : "bg-slate-100 text-slate-600"
                             }
                           `}>
@@ -211,7 +211,7 @@ export function EPDSidebar({ className = "", userEmail, userName }: EPDSidebarPr
           <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">
+                <div className="w-8 h-8 bg-gradient-to-br from-slate-600 to-slate-700 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">
@@ -227,7 +227,7 @@ export function EPDSidebar({ className = "", userEmail, userName }: EPDSidebarPr
             ) : (
               <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">
+                  <div className="w-9 h-9 bg-gradient-to-br from-slate-600 to-slate-700 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" />
diff --git a/app/login/page.tsx b/app/login/page.tsx
index 181b8c4..47e5406 100644
--- a/app/login/page.tsx
+++ b/app/login/page.tsx
@@ -22,7 +22,7 @@ const bentoFeatures = [
   {
     name: '90%+ Tijdsbesparing',
     description: 'Gemiddeld bespaar je 2+ uur per dag op documentatie',
-    icon: TrendingDown,
+    icon: Clock,
     className: 'col-span-3 lg:col-span-1',
     background: (
       <div className="absolute inset-0 bg-gradient-to-br from-amber-500/20 to-amber-600/20" />
@@ -36,7 +36,7 @@ const bentoFeatures = [
     icon: Zap,
     className: 'col-span-3 lg:col-span-1',
     background: (
-      <div className="absolute inset-0 bg-gradient-to-br from-purple-500/20 to-purple-600/20" />
+      <div className="absolute inset-0 bg-gradient-to-br from-amber-500/20 to-orange-500/20" />
     ),
     href: '#',
     cta: 'Ontdekken'
@@ -47,7 +47,7 @@ const bentoFeatures = [
     icon: Target,
     className: 'col-span-3 lg:col-span-2',
     background: (
-      <div className="absolute inset-0 bg-gradient-to-br from-teal-500/20 to-blue-600/20" />
+      <div className="absolute inset-0 bg-gradient-to-br from-blue-500/20 to-indigo-600/20" />
     ),
     href: '#',
     cta: 'Bekijk voorbeeld'
@@ -172,7 +172,7 @@ export default function LoginPage() {
           {/* Stats Footer */}
           <div className="grid grid-cols-3 gap-4 mt-8">
             <div className="text-center p-4 bg-white/5 rounded-lg border border-white/10">
-              <div className="text-2xl md:text-3xl font-bold text-teal-400">90%+</div>
+              <div className="text-2xl md:text-3xl font-bold text-amber-400">90%+</div>
               <div className="text-xs md:text-sm text-slate-400 mt-1">Tijdsbesparing</div>
             </div>
             <div className="text-center p-4 bg-white/5 rounded-lg border border-white/10">
@@ -180,7 +180,7 @@ export default function LoginPage() {
               <div className="text-xs md:text-sm text-slate-400 mt-1">Gemiddelde respons</div>
             </div>
             <div className="text-center p-4 bg-white/5 rounded-lg border border-white/10">
-              <div className="text-2xl md:text-3xl font-bold text-purple-400">4 weken</div>
+              <div className="text-2xl md:text-3xl font-bold text-slate-300">4 weken</div>
               <div className="text-xs md:text-sm text-slate-400 mt-1">Build tijd</div>
             </div>
           </div>
@@ -235,7 +235,7 @@ export default function LoginPage() {
                     onChange={(e) => setEmail(e.target.value)}
                     placeholder="jouw@email.nl"
                     required
-                    className="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-transparent"
+                    className="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:ring-2 focus:ring-slate-400 focus:border-slate-400"
                   />
                   <p className="mt-1 text-xs text-slate-500">
                     Nieuw? Account wordt automatisch aangemaakt!
@@ -324,7 +324,7 @@ export default function LoginPage() {
                     onChange={(e) => setEmail(e.target.value)}
                     placeholder="demo@mini-ecd.demo"
                     required
-                    className="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-transparent"
+                    className="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:ring-2 focus:ring-slate-400 focus:border-slate-400"
                   />
                 </div>
 
@@ -342,7 +342,7 @@ export default function LoginPage() {
                     onChange={(e) => setPassword(e.target.value)}
                     placeholder="••••••••"
                     required
-                    className="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-transparent"
+                    className="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:ring-2 focus:ring-slate-400 focus:border-slate-400"
                   />
                 </div>