Build a complete Next.js app shell with a 3-column layout similar to Kling AI (可灵) video creation platform. This is for an AI Video Creation SaaS called "ClipAI".
DESIGN REQUIREMENTS:
#0a0a0f, Sidebar #111118, Content area #15151e, Cards #1a1a26#7c3aed → #3b82f6) for primary buttons and highlights#ec4899 → #8b5cf6) for special elements#ffffff) background, subtle gray cards (#f8f9fa)LAYOUT STRUCTURE:
Use shadcn/ui components, Tailwind CSS, Lucide icons. Make it production-ready with proper responsive behavior. Include the theme provider setup. Create the layout as app/layout.tsx and a reusable Sidebar, TopBar, and RightPanel components.
Now I have all the context I need. Let me build all the components in parallel.
Now I have all context. Let me build everything in parallel.
The ClipAI app shell is fully built. Here's a summary of what was created:
Files created:
app/layout.tsx — Inter font, next-themes provider defaulting to dark mode, Chinese lang="zh-CN"app/globals.css — Complete dual-theme token system: dark (#0a0a0f-family) and light, plus gradient-primary, gradient-pink, gradient-text utilitiescomponents/layout/sidebar.tsx — Collapsible 240px→64px sidebar with icon-only mode, active gradient left-border indicator, theme toggle, user dropdown, and tooltips when collapsedcomponents/layout/topbar.tsx — Breadcrumb navigation, points balance, create button, notification dropdown with unread badges, user avatar, and right-panel togglecomponents/layout/right-panel.tsx — Animated 320px→0 panel with quick-action cards, live task progress bars, trending topics, and a points summary cardcomponents/layout/app-shell.tsx — Client wrapper managing collapse/open state, composing all three panelscomponents/dashboard/dashboard-content.tsx — Full dashboard with welcome banner, 4 stat cards, creation mode grid, recent works list, monthly usage progress, and template recommendations