146c7041f8
## 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>
29 lines
506 B
TypeScript
29 lines
506 B
TypeScript
'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} />
|
|
}
|