Sebastian Krüger
37920401b3
Initialize modern tech stack following audio-ui patterns: **Framework Setup** - Next.js 16 with App Router and Turbopack (ready in 754ms) - React 19 with TypeScript 5 - Static export configuration for deployment **Styling System** - Tailwind CSS 4 with @tailwindcss/postcss - OKLCH color space for vibrant, perceptually uniform colors - Custom CSS variables for theming (light/dark modes) - Canvas-specific color palette (canvas-bg, canvas-grid, canvas-selection) - Custom animations (fadeIn, slideDown, scaleIn, etc.) - Checkerboard pattern utility for transparency preview - Custom scrollbar styling **State Management** - Zustand installed for layers, canvas, and history state **Canvas Libraries** - pica for high-quality image resizing - file-saver for export functionality - uuid for layer ID generation **Development Experience** - Path aliases (@/* pattern) configured - Strict TypeScript with proper type checking - Auto dark mode detection with localStorage persistence - Responsive layout with overflow handling **Initial UI** - Root layout with theme system - Landing page showing Phase 1 completion status - Clean, modern design with gradient title Ready for Phase 2: Core Canvas Engine implementation. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
46 lines
2.0 KiB
TypeScript
46 lines
2.0 KiB
TypeScript
export default function HomePage() {
|
|
return (
|
|
<main className="flex min-h-screen flex-col items-center justify-center bg-background p-8">
|
|
<div className="max-w-2xl space-y-6 text-center">
|
|
<h1 className="text-6xl font-bold bg-gradient-to-r from-primary via-accent to-primary bg-clip-text text-transparent">
|
|
Paint UI
|
|
</h1>
|
|
<p className="text-xl text-muted-foreground">
|
|
Modern browser-based image editor
|
|
</p>
|
|
<div className="grid grid-cols-2 gap-4 pt-8 text-left">
|
|
<div className="space-y-2 rounded-lg border border-border bg-card p-4">
|
|
<h3 className="font-semibold text-card-foreground">Phase 1: Foundation</h3>
|
|
<ul className="space-y-1 text-sm text-muted-foreground">
|
|
<li className="flex items-center gap-2">
|
|
<span className="text-success">✓</span> Next.js 16 setup
|
|
</li>
|
|
<li className="flex items-center gap-2">
|
|
<span className="text-success">✓</span> Tailwind CSS 4
|
|
</li>
|
|
<li className="flex items-center gap-2">
|
|
<span className="text-success">✓</span> TypeScript config
|
|
</li>
|
|
<li className="flex items-center gap-2">
|
|
<span className="text-success">✓</span> Theme system
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div className="space-y-2 rounded-lg border border-border bg-card p-4">
|
|
<h3 className="font-semibold text-card-foreground">Coming Soon</h3>
|
|
<ul className="space-y-1 text-sm text-muted-foreground">
|
|
<li>Canvas rendering</li>
|
|
<li>Layer system</li>
|
|
<li>Drawing tools</li>
|
|
<li>Effects & filters</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<p className="pt-4 text-sm text-muted-foreground">
|
|
Built with Next.js 16 • React 19 • Tailwind CSS 4
|
|
</p>
|
|
</div>
|
|
</main>
|
|
);
|
|
}
|