Add discoverability improvements: homepage card, navigation link, and comprehensive demos page

Co-authored-by: huangyiirene <7665279+huangyiirene@users.noreply.github.com>

Author: Copilot

apps/site/app/page.tsx

@@ -243,22 +243,38 @@ export default function HomePage() {
 
           <div className="mx-auto grid max-w-6xl grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
             {[
-              { icon: "📊", title: "Dashboards", desc: "Data visualization and analytics" },
-              { icon: "⚙️", title: "Admin Panels", desc: "Complete CRUD interfaces" },
-              { icon: "📝", title: "Forms", desc: "Complex multi-step forms" },
-              { icon: "📄", title: "CMS", desc: "Content management systems" },
-              { icon: "🔧", title: "Internal Tools", desc: "Business applications" },
-              { icon: "🎨", title: "Prototypes", desc: "Rapid UI prototyping" }
+              { icon: "📊", title: "Dashboards", desc: "Data visualization and analytics", link: null },
+              { icon: "⚙️", title: "Admin Panels", desc: "Complete CRUD interfaces", link: null },
+              { icon: "📝", title: "Forms", desc: "Complex multi-step forms", link: null },
+              { icon: "📄", title: "CMS", desc: "Content management systems", link: null },
+              { icon: "🔧", title: "Internal Tools", desc: "Business applications", link: null },
+              { icon: "✨", title: "Interactive Examples", desc: "Explore 30+ components with live demos", link: "/docs/guide/interactive-demos" }
             ].map((useCase) => (
-              <div key={useCase.title} className="rounded-xl border border-fd-border bg-fd-card p-6">
-                <div className="text-4xl mb-3">{useCase.icon}</div>
-                <h3 className="text-lg font-semibold text-fd-foreground mb-1">
-                  {useCase.title}
-                </h3>
-                <p className="text-fd-muted-foreground text-sm">
-                  {useCase.desc}
-                </p>
-              </div>
+              useCase.link ? (
+                <Link 
+                  key={useCase.title} 
+                  href={useCase.link}
+                  className="rounded-xl border border-fd-border bg-fd-card p-6 transition-all hover:shadow-lg hover:border-fd-primary/50"
+                >
+                  <div className="text-4xl mb-3">{useCase.icon}</div>
+                  <h3 className="text-lg font-semibold text-fd-foreground mb-1">
+                    {useCase.title}
+                  </h3>
+                  <p className="text-fd-muted-foreground text-sm">
+                    {useCase.desc}
+                  </p>
+                </Link>
+              ) : (
+                <div key={useCase.title} className="rounded-xl border border-fd-border bg-fd-card p-6">
+                  <div className="text-4xl mb-3">{useCase.icon}</div>
+                  <h3 className="text-lg font-semibold text-fd-foreground mb-1">
+                    {useCase.title}
+                  </h3>
+                  <p className="text-fd-muted-foreground text-sm">
+                    {useCase.desc}
+                  </p>
+                </div>
+              )
             ))}
           </div>
         </div>

docs/guide/interactive-demos.md

@@ -0,0 +1,216 @@
+---
+title: "Interactive Component Demos"
+description: "Explore all ObjectUI components and plugins with live interactive examples"
+---
+
+# Interactive Component Demos
+
+Explore ObjectUI's comprehensive component library with **live interactive demos**. Each demo features:
+
+- 👁️ **Live Preview** - See components in action
+- 💻 **Source Code** - View and copy JSON schemas  
+- 📋 **Copy Button** - One-click code copying
+- 🎨 **Multiple Examples** - Various use cases
+
+## 🧩 Components by Category
+
+### Form Components
+
+Build powerful forms with our comprehensive form controls:
+
+- **[Input](/docs/components/form/input)** - Text input fields with validation
+- **[Select](/docs/components/form/select)** - Dropdown selection menus
+- **[Checkbox](/docs/components/form/checkbox)** - Toggle selection boxes
+- **[Switch](/docs/components/form/switch)** - Binary toggle switches
+- **[Textarea](/docs/components/form/textarea)** - Multi-line text input
+- **[Slider](/docs/components/form/slider)** - Range selection sliders
+- **[Button](/docs/components/form/button)** - Action triggers with variants
+
+### Layout Components
+
+Structure your UI with flexible layout containers:
+
+- **[Stack](/docs/components/layout/stack)** - Vertical/horizontal stacking
+- **[Grid](/docs/components/layout/grid)** - Responsive grid layouts
+- **[Card](/docs/components/layout/card)** - Content containers
+- **[Tabs](/docs/components/layout/tabs)** - Tabbed content sections
+- **[Separator](/docs/components/layout/separator)** - Visual dividers
+
+### Overlay Components
+
+Create modal and overlay experiences:
+
+- **[Dialog](/docs/components/overlay/dialog)** - Modal dialogs
+- **[Drawer](/docs/components/overlay/drawer)** - Sliding side panels
+- **[Tooltip](/docs/components/overlay/tooltip)** - Contextual hints
+- **[Popover](/docs/components/overlay/popover)** - Floating content panels
+
+### Data Display Components
+
+Present information beautifully:
+
+- **[Table](/docs/components/data-display/table)** - Tabular data display
+- **[List](/docs/components/data-display/list)** - Ordered/unordered lists
+- **[Avatar](/docs/components/data-display/avatar)** - User profile images
+- **[Badge](/docs/components/data-display/badge)** - Status indicators
+- **[Alert](/docs/components/data-display/alert)** - Notification messages
+
+### Feedback Components
+
+Provide user feedback and status:
+
+- **[Progress](/docs/components/feedback/progress)** - Progress indicators
+- **[Loading](/docs/components/feedback/loading)** - Loading spinners
+- **[Skeleton](/docs/components/feedback/skeleton)** - Loading placeholders
+- **[Toast](/docs/components/feedback/toast)** - Toast notifications
+
+### Disclosure Components
+
+Progressive content disclosure:
+
+- **[Accordion](/docs/components/disclosure/accordion)** - Collapsible sections
+- **[Collapse](/docs/components/disclosure/collapse)** - Show/hide content
+
+### Complex Components
+
+Advanced composite components:
+
+- **[Command](/docs/components/complex/command)** - Command palette
+- **[DatePicker](/docs/components/complex/date-picker)** - Date selection
+
+## 🔌 Plugin Demos
+
+Extend ObjectUI with powerful plugins:
+
+### [Plugin Markdown](/docs/ecosystem/plugins/plugin-markdown)
+
+Render GitHub Flavored Markdown with syntax highlighting:
+
+- ✅ Basic formatting (bold, italic, links)
+- ✅ Task lists with checkboxes
+- ✅ Tables and code blocks
+- ✅ XSS protection built-in
+
+**Interactive Examples**: 3 live demos
+
+### [Plugin Kanban](/docs/ecosystem/plugins/plugin-kanban)
+
+Drag-and-drop Kanban boards for project management:
+
+- ✅ Drag cards between columns
+- ✅ WIP limits per column
+- ✅ Card badges for status/priority
+- ✅ Keyboard navigation support
+
+**Interactive Examples**: 2 live demos
+
+### [Plugin Charts](/docs/ecosystem/plugins/plugin-charts)
+
+Beautiful data visualizations powered by Recharts:
+
+- ✅ Bar, line, area, pie charts
+- ✅ Responsive design
+- ✅ Customizable colors
+- ✅ Multiple data series
+
+**Interactive Examples**: 3 live demos
+
+### [Plugin Editor](/docs/ecosystem/plugins/plugin-editor)
+
+Monaco Editor integration for code editing:
+
+- ✅ 100+ programming languages
+- ✅ IntelliSense & autocomplete
+- ✅ Syntax highlighting
+- ✅ Find and replace
+
+**Interactive Examples**: 3 live demos
+
+### [Plugin Object](/docs/ecosystem/plugins/plugin-object)
+
+ObjectQL integration for CRUD operations:
+
+- ✅ Auto-generated tables
+- ✅ Smart forms with validation
+- ✅ Complete CRUD views
+- ✅ Schema-driven UI
+
+**Interactive Examples**: 3 live demos
+
+## 🚀 Quick Start
+
+### 1. Browse Components
+
+Click any component link above to see:
+- Live interactive preview
+- JSON schema code
+- Multiple usage examples
+
+### 2. Copy Code
+
+Each demo has a **Code tab** with:
+- Formatted JSON schema
+- Copy button for instant use
+- Syntax highlighting
+
+### 3. Use in Your Project
+
+```tsx
+import { SchemaRenderer } from '@object-ui/react';
+
+const schema = {
+  type: "input",
+  label: "Email",
+  placeholder: "user@example.com"
+};
+
+<SchemaRenderer schema={schema} />
+```
+
+## 💡 How Interactive Demos Work
+
+Each component page uses our new **InteractiveDemo** component:
+
+```tsx
+<InteractiveDemo
+  schema={{
+    type: "button",
+    label: "Click me",
+    variant: "default"
+  }}
+  title="Primary Button"
+  description="Main action button"
+/>
+```
+
+### Features
+
+- **Tab Switching** - Toggle between Preview and Code views
+- **Live Rendering** - See components rendered in real-time
+- **Copy Button** - One-click code copying
+- **Multi-Example** - Show related variations together
+- **Responsive** - Works on all screen sizes
+
+## 📚 Component Reference
+
+For complete API documentation including all props, events, and advanced usage:
+
+- **[Component Registry](/docs/concepts/component-registry)** - All available component types
+- **[Schema Rendering](/docs/concepts/schema-rendering)** - How the rendering engine works
+- **[Plugin System](/docs/concepts/plugins)** - Creating custom plugins
+
+## 🎨 Design Resources
+
+- **[Tailwind Integration](/docs/guide/components#styling)** - Using Tailwind classes
+- **[Theming](/docs/guide/components#theming)** - Light/dark mode support
+- **[Accessibility](/docs/guide/components#accessibility)** - WCAG 2.1 compliance
+
+## 🔗 Next Steps
+
+- **[Quick Start Guide](/docs/guide/quick-start)** - Get up and running in 5 minutes
+- **[Try It Online](/docs/guide/try-it-online)** - Online playground
+- **[GitHub Repository](https://github.com/objectstack-ai/objectui)** - Star the project
+
+---
+
+**Have questions?** Check out our [Getting Started Guide](/docs/guide/quick-start) or visit the [GitHub Discussions](https://github.com/objectstack-ai/objectui/discussions).

docs/guide/meta.json

@@ -4,6 +4,7 @@
     "index",
     "installation",
     "quick-start",
+    "interactive-demos",
     "studio",
     "cli",
     "try-it-online",