Simplify studio homepage to professional development tool aesthetic

[Copilot]

The homepage had a marketing-focused design (hero section, decorative animations, excessive whitespace) unsuitable for a professional development tool.

Changes

Header

• Reduced height: 64px → 56px
• Simplified buttons: removed shadows, reduced padding, changed "New Design" → "New"
• Removed decorative elements (blur, heavy borders)

Hero Section Removed

• Large headline "Build Stunning Interfaces, Purely from JSON"
• Marketing copy and product description
• Decorative blur animations, pulsing badges, transform effects
• Padding reduced: py-16 → py-6

Category Navigation

• Changed from pill-style buttons to tab navigation with bottom border (VS Code-style)
• Shows counts inline: "Layouts (3)"
• Active state indicated by border-bottom instead of background fill

Template Grid

• Increased density: 3 → 4 columns on xl screens
• Simplified cards: removed decorative mock windows, animations, overlays
• Card height: fixed 288px → dynamic with aspect-video
• Clean hover: border color change only

Routing Fix

• Template navigation corrected: /${key} → /studio/${key}

Code Impact

apps/playground/src/pages/Home.tsx: +77 / -108 lines

Before / After

Before - Marketing Landing Page:

After - Professional Tool Interface:

Category View (Data Display):

The new design aligns with professional development tools (VS Code, Figma, CodeSandbox) - information-dense, minimal decoration, functional hierarchy.

Original prompt

简化studio首页，你必须像一个专业的开发工具

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
objectui-playground	Ready	Preview, Comment	Jan 15, 2026 4:13am

[Copilot]

Pull request overview

This PR transforms the Object UI Studio homepage from a marketing-focused landing page to a professional development tool interface, aligning it with industry-standard IDEs like VS Code and Figma.

Changes:

• Simplified header styling with reduced height (64px → 56px) and minimalist button design
• Removed hero section including marketing copy, decorative animations, and excessive whitespace
• Replaced pill-style category buttons with tab-based navigation featuring VS Code-style bottom borders
• Increased template grid density (3 → 4 columns) with cleaner, more compact card designs

Comments suppressed due to low confidence (1)

apps/playground/src/pages/Home.tsx:38

• The header button label was shortened from "New Design" to just "New", which may be too terse and could confuse users about what type of new item will be created. In a professional tool, clarity is important. Consider keeping "New Design" or using an alternative like "New Project" to maintain clarity.

              New

[github-actions]

✅ All checks passed!

• ✅ Type check passed
• ✅ Tests passed
• ✅ Lint check completed

[github-actions]

✅ All checks passed!

• ✅ Type check passed
• ✅ Tests passed
• ✅ Lint check completed

[github-actions]

✅ All checks passed!

• ✅ Type check passed
• ✅ Tests passed
• ✅ Lint check completed