UX refinements: Color strategy + Hero Section 2 implementation

## 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>

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?