Redesign elegant homepage with fumadocs layout and navigation #125

Copilot · 2026-01-20T05:13:33Z

Screenshots

Homepage with Fumadocs Navigation

Docs Page - After Fix

Summary

The homepage has been completely redesigned following fumadocs conventions with professional navigation, search functionality, and theme switching.

🎯 Fumadocs Integration

Navigation Bar: Professional navbar using fumadocs' HomeLayout

Logo with link to homepage
Documentation link
GitHub repository link
Search button with ⌘K keyboard shortcut
Theme toggle (light/dark/system modes)

Design System: All styling uses fumadocs design tokens

fd-primary, fd-accent, fd-background
fd-foreground, fd-muted-foreground
fd-card, fd-border
Automatic theme adaptation

✨ Content Sections

Hero Section: Gradient background with clear value proposition

Badge showing "The Universal Schema-Driven UI Engine"
Two prominent CTAs: "Get Started" and "View on GitHub"
Terminal-style code preview showing JSON schema example

Features Section: 6 key benefits with icons

Blazing Fast, Beautiful by Default, Developer Friendly
Production Ready, Modular Architecture, Backend Agnostic

Stats Section: Key metrics (60+ Components, 85%+ Test Coverage, 50KB Bundle Size)

Use Cases Section: 6 cards showing practical applications

CTA Section: Engaging call-to-action with gradient background

🔍 Root Cause Analysis & Fix

Problem: Documentation sidebar height was calculated incorrectly

Root Cause Identified:
Through commit history analysis, discovered the issue was caused by duplicate RootProvider components:

Original State: RootProvider correctly in root layout
Incorrect Fix: RootProvider removed from root and added to docs layout (commit a446d4a)
Partial Revert: RootProvider restored to root layout for HomeLayout, but NOT removed from docs layout (commit 3911242)
Result: Duplicate nested RootProvider components causing CSS conflicts

Proper Solution Applied:

Removed duplicate RootProvider from docs layout
Kept single RootProvider in root layout (correct fumadocs pattern)
Removed temporary CSS hack from global.css
Restored clean architecture following fumadocs best practices

Correct Pattern:

RootProvider (root layout)
├── HomeLayout (homepage)
└── DocsLayout (docs pages)

🔧 Technical Implementation

Uses HomeLayout from fumadocs-ui/layouts/home
Single RootProvider at root level (proper fumadocs architecture)
All sections use fumadocs design tokens for consistency
Responsive navigation with mobile support

✅ Features Working

✅ Navigation bar with logo and links
✅ Search dialog (⌘K shortcut)
✅ Theme toggle (light/dark/system modes)
✅ GitHub repository link
✅ Responsive design
✅ All content sections preserved with fumadocs styling
✅ Clean layout architecture with no duplicate providers

Quality Assurance

✅ Root cause properly identified and documented
✅ Duplicate RootProvider removed
✅ Follows fumadocs best practices and conventions
✅ Uses fumadocs design tokens throughout
✅ Proper React keys and best practices
✅ Consistent formatting and clean code
✅ Navigation, search, and theme toggle tested and working
✅ Clean architecture with proper layout nesting
✅ Both homepage and docs pages tested and working correctly

Original prompt

重新设计精致的首页

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

vercel · 2026-01-20T05:14:40Z

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

Project	Deployment	Review	Updated (UTC)
objectui-docs	Error		Jan 20, 2026 7:56am
objectui-site	Ready	Preview, Comment	Jan 20, 2026 7:56am

huangyiirene · 2026-01-20T06:11:15Z

@copilot 继续

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

Copilot · 2026-01-20T06:16:13Z

@copilot 继续

已完成首页重新设计！新的首页包含：

✨ 现代化的渐变色英雄区块，清晰展示价值主张
📝 终端风格的代码预览示例
🎯 6个特性展示卡片（性能快、美观、开发友好等）
📊 统计数据展示区（60+组件、85%+测试覆盖率、50KB包大小）
🎨 用例展示区（仪表板、管理面板、表单等）
🚀 吸引人的行动号召区块
📱 完全响应式设计，支持亮/暗主题

提交哈希：78c5255

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

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

hotlong · 2026-01-20T06:22:41Z

@copilot 应该是首页样式和fumadocs冲突的

github-actions · 2026-01-20T06:23:57Z

✅ All checks passed!

✅ Type check passed
✅ Tests passed
✅ Lint check completed

…only Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

Copilot · 2026-01-20T06:27:10Z

@copilot 应该是首页样式和fumadocs冲突的

已修复！将 fumadocs 的 RootProvider 从根布局移至 /docs 布局，这样首页样式就不会受到 fumadocs 的影响。现在首页有独立的样式，文档页面继续正常使用 fumadocs UI。

提交哈希：a446d4a

hotlong · 2026-01-20T06:33:50Z

不对，你应该按照fumadocs的规范重新开发首页，包括要支持导航条搜索深浅色的切换 @copilot

github-actions · 2026-01-20T06:34:52Z

✅ All checks passed!

✅ Type check passed
✅ Tests passed
✅ Lint check completed

Copilot

Pull request overview

This PR completely redesigns the ObjectUI homepage from a simple centered landing page to a comprehensive, multi-section marketing page. The design showcases ObjectUI's capabilities with modern aesthetics using Tailwind CSS and proper dark mode support.

Changes:

Transformed the homepage from a minimal single-section design to a full-featured marketing page with hero, features, stats, use cases, CTA, and footer sections
Moved RootProvider from root layout to docs-specific layout to isolate fumadocs styles and prevent conflicts
Added responsive design with proper breakpoints, gradient backgrounds, and hover effects throughout

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 11 comments.

File	Description
apps/site/app/page.tsx	Complete homepage redesign with 6 sections (hero, features, stats, use cases, CTA, footer) using Tailwind CSS utility classes and inline SVG icons
apps/site/app/layout.tsx	Removed RootProvider to prevent style conflicts with homepage
apps/site/app/docs/layout.tsx	Added RootProvider to isolate fumadocs styles to documentation pages only

Copilot · 2026-01-20T06:36:17Z

apps/site/app/page.tsx

+                className="inline-flex items-center justify-center rounded-lg bg-gradient-to-r from-blue-600 to-purple-600 px-8 py-3.5 text-base font-semibold text-white shadow-lg transition-all hover:shadow-xl hover:scale-105"
+              >
+                Get Started
+                <svg className="ml-2 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">


The inline SVG icon lacks accessibility attributes. Add an aria-label or aria-hidden attribute to provide context for screen readers or explicitly mark it as decorative.

Suggested change

<svg className="ml-2 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">

<svg

className="ml-2 h-5 w-5"

fill="none"

stroke="currentColor"

viewBox="0 0 24 24"

aria-hidden="true"

focusable="false"

>

Copilot · 2026-01-20T06:36:17Z

apps/site/app/page.tsx

+                <svg className="h-6 w-6 text-blue-600 dark:text-blue-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
+                </svg>
+              </div>
+              <h3 className="mb-2 text-xl font-semibold text-gray-900 dark:text-white">
+                Blazing Fast
+              </h3>
+              <p className="text-gray-600 dark:text-gray-300">
+                3x faster page loads and 6x smaller bundle sizes compared to traditional low-code platforms. Built on React 18+ with automatic optimizations.
+              </p>
+            </div>
+
+            {/* Feature 2 */}
+            <div className="relative rounded-2xl border border-gray-200 bg-white p-8 shadow-sm transition-all hover:shadow-lg dark:border-gray-700 dark:bg-gray-800">
+              <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-purple-100 dark:bg-purple-900">
+                <svg className="h-6 w-6 text-purple-600 dark:text-purple-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" />
+                </svg>
+              </div>
+              <h3 className="mb-2 text-xl font-semibold text-gray-900 dark:text-white">
+                Beautiful by Default
+              </h3>
+              <p className="text-gray-600 dark:text-gray-300">
+                Professional designs using Tailwind CSS and Shadcn UI. Light/dark theme support, fully customizable, and WCAG 2.1 AA accessible.
+              </p>
+            </div>
+
+            {/* Feature 3 */}
+            <div className="relative rounded-2xl border border-gray-200 bg-white p-8 shadow-sm transition-all hover:shadow-lg dark:border-gray-700 dark:bg-gray-800">
+              <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-green-100 dark:bg-green-900">
+                <svg className="h-6 w-6 text-green-600 dark:text-green-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
+                </svg>
+              </div>
+              <h3 className="mb-2 text-xl font-semibold text-gray-900 dark:text-white">
+                Developer Friendly
+              </h3>
+              <p className="text-gray-600 dark:text-gray-300">
+                TypeScript-first with complete type definitions. Zero learning curve if you know React. Works with existing tools and workflows.
+              </p>
+            </div>
+
+            {/* Feature 4 */}
+            <div className="relative rounded-2xl border border-gray-200 bg-white p-8 shadow-sm transition-all hover:shadow-lg dark:border-gray-700 dark:bg-gray-800">
+              <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-orange-100 dark:bg-orange-900">
+                <svg className="h-6 w-6 text-orange-600 dark:text-orange-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
+                </svg>
+              </div>
+              <h3 className="mb-2 text-xl font-semibold text-gray-900 dark:text-white">
+                Production Ready
+              </h3>
+              <p className="text-gray-600 dark:text-gray-300">
+                85%+ test coverage, enterprise security built-in, comprehensive documentation, and active development support.
+              </p>
+            </div>
+
+            {/* Feature 5 */}
+            <div className="relative rounded-2xl border border-gray-200 bg-white p-8 shadow-sm transition-all hover:shadow-lg dark:border-gray-700 dark:bg-gray-800">
+              <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-pink-100 dark:bg-pink-900">
+                <svg className="h-6 w-6 text-pink-600 dark:text-pink-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z" />
+                </svg>
+              </div>
+              <h3 className="mb-2 text-xl font-semibold text-gray-900 dark:text-white">
+                Modular Architecture
+              </h3>
+              <p className="text-gray-600 dark:text-gray-300">
+                Tree-shakable packages, lazy-loaded plugins, and support for Server Components. Only load what you need.
+              </p>
+            </div>
+
+            {/* Feature 6 */}
+            <div className="relative rounded-2xl border border-gray-200 bg-white p-8 shadow-sm transition-all hover:shadow-lg dark:border-gray-700 dark:bg-gray-800">
+              <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-cyan-100 dark:bg-cyan-900">
+                <svg className="h-6 w-6 text-cyan-600 dark:text-cyan-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
+                </svg>
+              </div>
+              <h3 className="mb-2 text-xl font-semibold text-gray-900 dark:text-white">
+                Backend Agnostic
+              </h3>
+              <p className="text-gray-600 dark:text-gray-300">
+                Works with any backend through universal DataSource interface. REST, GraphQL, Firebase, or custom adapters.
+              </p>
+            </div>


All decorative SVG icons in the features section lack accessibility attributes. Add aria-hidden="true" to each SVG since they are purely decorative and the heading text already conveys the meaning.

Copilot · 2026-01-20T06:36:17Z

apps/site/app/page.tsx

+          <div className="grid grid-cols-1 gap-8 sm:grid-cols-3 text-center text-white">
+            <div>
+              <div className="text-5xl font-bold mb-2">60+</div>
+              <div className="text-xl opacity-90">Components</div>
+            </div>
+            <div>
+              <div className="text-5xl font-bold mb-2">85%+</div>
+              <div className="text-xl opacity-90">Test Coverage</div>
+            </div>
+            <div>
+              <div className="text-5xl font-bold mb-2">50KB</div>
+              <div className="text-xl opacity-90">Bundle Size</div>
+            </div>
+          </div>


The semantic HTML could be improved by wrapping the stat values in appropriate elements. Consider using a
(description list) structure with
and
tags for better semantic markup and screen reader compatibility.

Suggested change

<div className="grid grid-cols-1 gap-8 sm:grid-cols-3 text-center text-white">

<div>

<div className="text-5xl font-bold mb-2">60+</div>

<div className="text-xl opacity-90">Components</div>

</div>

<div>

<div className="text-5xl font-bold mb-2">85%+</div>

<div className="text-xl opacity-90">Test Coverage</div>

</div>

<div>

<div className="text-5xl font-bold mb-2">50KB</div>

<div className="text-xl opacity-90">Bundle Size</div>

</div>

</div>

<dl className="grid grid-cols-1 gap-8 sm:grid-cols-3 text-center text-white">

<div>

<dd className="text-5xl font-bold mb-2">60+</dd>

<dt className="text-xl opacity-90">Components</dt>

</div>

<div>

<dd className="text-5xl font-bold mb-2">85%+</dd>

<dt className="text-xl opacity-90">Test Coverage</dt>

</div>

<div>

<dd className="text-5xl font-bold mb-2">50KB</dd>

<dt className="text-xl opacity-90">Bundle Size</dt>

</div>

</dl>

Copilot · 2026-01-20T06:36:18Z

apps/site/app/page.tsx

+              <pre className="overflow-x-auto text-sm text-gray-300">
+                <code>{`{
+  "type": "page",
+  "title": "Dashboard",
+  "body": {
+    "type": "grid",
+    "columns": 3,
+    "items": [
+      {
+        "type": "card",
+        "title": "Total Users",
+        "value": "\${stats.users}"
+      },
+      {
+        "type": "card",
+        "title": "Revenue",
+        "value": "\${stats.revenue}"
+      },
+      {
+        "type": "card",
+        "title": "Orders",
+        "value": "\${stats.orders}"
+      }
+    ]
+  }
+}`}</code>
+              </pre>


The code preview lacks a descriptive aria-label on the pre element. Add an aria-label to describe what the code example demonstrates, improving accessibility for screen reader users.

Copilot · 2026-01-20T06:36:18Z

apps/site/app/page.tsx

@@ -1,20 +1,292 @@
 import Link from 'next/link';



The HomePage component lacks a JSDoc comment explaining its purpose and structure. According to documentation best practices, exported components should have documentation describing their functionality.

Suggested change

/**

* Renders the main marketing homepage for ObjectUI.

*

* The layout includes:

* - A hero section introducing the JSON-driven UI engine.

* - Primary calls to action linking to documentation and GitHub.

* - A code preview demonstrating a sample JSON page schema.

*

* This component is used as the root route of the site (`/`).

*/

Copilot · 2026-01-20T06:36:18Z

apps/site/app/page.tsx

+                <svg className="mr-2 h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
+                  <path fillRule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clipRule="evenodd" />
+                </svg>
+                View on GitHub


The external link to GitHub lacks a visual indicator for screen readers to announce that it opens in a new tab. While rel="noopener noreferrer" is correctly included for security, consider adding sr-only text like "(opens in new tab)" to improve accessibility.

Suggested change

View on GitHub

View on GitHub

<span className="sr-only">(opens in a new tab)</span>

Copilot · 2026-01-20T06:36:19Z

apps/site/app/page.tsx

+                  rel="noopener noreferrer"
+                  className="rounded-lg border-2 border-white bg-transparent px-8 py-3.5 text-base font-semibold text-white transition-all hover:bg-white hover:text-blue-600"
+                >
+                  Star on GitHub


The external link to GitHub in the CTA section also lacks a visual indicator for screen readers to announce that it opens in a new tab. Consider adding sr-only text like "(opens in new tab)" to improve accessibility.

Suggested change

Star on GitHub

Star on GitHub

<span className="sr-only">(opens in new tab)</span>

Copilot · 2026-01-20T06:36:19Z

apps/site/app/page.tsx

+                <svg className="mr-2 h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
+                  <path fillRule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clipRule="evenodd" />
+                </svg>


The GitHub icon SVG lacks accessibility attributes. Add aria-hidden="true" to mark it as decorative since the adjacent text "View on GitHub" already provides the context.

Copilot · 2026-01-20T06:36:19Z

apps/site/app/page.tsx

+                <svg className="ml-2 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
+                </svg>
+              </Link>
+              <a
+                href="https://github.com/objectstack-ai/objectui"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center justify-center rounded-lg border-2 border-gray-300 bg-white px-8 py-3.5 text-base font-semibold text-gray-900 transition-all hover:border-gray-400 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:hover:border-gray-500 dark:hover:bg-gray-700"
+              >
+                <svg className="mr-2 h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
+                  <path fillRule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clipRule="evenodd" />
+                </svg>
+                View on GitHub
+              </a>
+            </div>
+          </div>
+
+          {/* Code Preview */}
+          <div className="mx-auto mt-16 max-w-4xl">
+            <div className="relative rounded-2xl bg-gray-900 p-8 shadow-2xl ring-1 ring-gray-800">
+              <div className="flex items-center gap-2 mb-4">
+                <div className="h-3 w-3 rounded-full bg-red-500"></div>
+                <div className="h-3 w-3 rounded-full bg-yellow-500"></div>
+                <div className="h-3 w-3 rounded-full bg-green-500"></div>
+              </div>
+              <pre className="overflow-x-auto text-sm text-gray-300">
+                <code>{`{
+  "type": "page",
+  "title": "Dashboard",
+  "body": {
+    "type": "grid",
+    "columns": 3,
+    "items": [
+      {
+        "type": "card",
+        "title": "Total Users",
+        "value": "\${stats.users}"
+      },
+      {
+        "type": "card",
+        "title": "Revenue",
+        "value": "\${stats.revenue}"
+      },
+      {
+        "type": "card",
+        "title": "Orders",
+        "value": "\${stats.orders}"
+      }
+    ]
+  }
+}`}</code>
+              </pre>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Features Section */}
+      <section className="py-24 sm:py-32">
+        <div className="mx-auto max-w-7xl px-6 lg:px-8">
+          <div className="mx-auto max-w-2xl text-center mb-16">
+            <h2 className="text-3xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-4xl">
+              Why Choose ObjectUI?
+            </h2>
+            <p className="mt-4 text-lg text-gray-600 dark:text-gray-300">
+              Stop writing repetitive UI code. Build faster with better results.
+            </p>
+          </div>
+
+          <div className="mx-auto grid max-w-6xl grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
+            {/* Feature 1 */}
+            <div className="relative rounded-2xl border border-gray-200 bg-white p-8 shadow-sm transition-all hover:shadow-lg dark:border-gray-700 dark:bg-gray-800">
+              <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-blue-100 dark:bg-blue-900">
+                <svg className="h-6 w-6 text-blue-600 dark:text-blue-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
+                </svg>
+              </div>
+              <h3 className="mb-2 text-xl font-semibold text-gray-900 dark:text-white">
+                Blazing Fast
+              </h3>
+              <p className="text-gray-600 dark:text-gray-300">
+                3x faster page loads and 6x smaller bundle sizes compared to traditional low-code platforms. Built on React 18+ with automatic optimizations.
+              </p>
+            </div>
+
+            {/* Feature 2 */}
+            <div className="relative rounded-2xl border border-gray-200 bg-white p-8 shadow-sm transition-all hover:shadow-lg dark:border-gray-700 dark:bg-gray-800">
+              <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-purple-100 dark:bg-purple-900">
+                <svg className="h-6 w-6 text-purple-600 dark:text-purple-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" />
+                </svg>
+              </div>
+              <h3 className="mb-2 text-xl font-semibold text-gray-900 dark:text-white">
+                Beautiful by Default
+              </h3>
+              <p className="text-gray-600 dark:text-gray-300">
+                Professional designs using Tailwind CSS and Shadcn UI. Light/dark theme support, fully customizable, and WCAG 2.1 AA accessible.
+              </p>
+            </div>
+
+            {/* Feature 3 */}
+            <div className="relative rounded-2xl border border-gray-200 bg-white p-8 shadow-sm transition-all hover:shadow-lg dark:border-gray-700 dark:bg-gray-800">
+              <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-green-100 dark:bg-green-900">
+                <svg className="h-6 w-6 text-green-600 dark:text-green-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
+                </svg>
+              </div>
+              <h3 className="mb-2 text-xl font-semibold text-gray-900 dark:text-white">
+                Developer Friendly
+              </h3>
+              <p className="text-gray-600 dark:text-gray-300">
+                TypeScript-first with complete type definitions. Zero learning curve if you know React. Works with existing tools and workflows.
+              </p>
+            </div>
+
+            {/* Feature 4 */}
+            <div className="relative rounded-2xl border border-gray-200 bg-white p-8 shadow-sm transition-all hover:shadow-lg dark:border-gray-700 dark:bg-gray-800">
+              <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-orange-100 dark:bg-orange-900">
+                <svg className="h-6 w-6 text-orange-600 dark:text-orange-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
+                </svg>
+              </div>
+              <h3 className="mb-2 text-xl font-semibold text-gray-900 dark:text-white">
+                Production Ready
+              </h3>
+              <p className="text-gray-600 dark:text-gray-300">
+                85%+ test coverage, enterprise security built-in, comprehensive documentation, and active development support.
+              </p>
+            </div>
+
+            {/* Feature 5 */}
+            <div className="relative rounded-2xl border border-gray-200 bg-white p-8 shadow-sm transition-all hover:shadow-lg dark:border-gray-700 dark:bg-gray-800">
+              <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-pink-100 dark:bg-pink-900">
+                <svg className="h-6 w-6 text-pink-600 dark:text-pink-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z" />
+                </svg>
+              </div>
+              <h3 className="mb-2 text-xl font-semibold text-gray-900 dark:text-white">
+                Modular Architecture
+              </h3>
+              <p className="text-gray-600 dark:text-gray-300">
+                Tree-shakable packages, lazy-loaded plugins, and support for Server Components. Only load what you need.
+              </p>
+            </div>
+
+            {/* Feature 6 */}
+            <div className="relative rounded-2xl border border-gray-200 bg-white p-8 shadow-sm transition-all hover:shadow-lg dark:border-gray-700 dark:bg-gray-800">
+              <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-cyan-100 dark:bg-cyan-900">
+                <svg className="h-6 w-6 text-cyan-600 dark:text-cyan-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
+                </svg>


According to ObjectUI coding guidelines, Lucide Icons should be used instead of inline SVGs. The ObjectUI project explicitly uses lucide-react as a UI primitive. Consider replacing the inline SVG icons with Lucide React components for consistency with the project's architecture and to reduce code duplication.

Copilot · 2026-01-20T06:36:20Z

apps/site/app/page.tsx

+            <div className="flex flex-col items-center justify-center gap-4 sm:flex-row">
+              <Link
+                href="/docs"
+                className="inline-flex items-center justify-center rounded-lg bg-gradient-to-r from-blue-600 to-purple-600 px-8 py-3.5 text-base font-semibold text-white shadow-lg transition-all hover:shadow-xl hover:scale-105"


The hover effect hover:scale-105 on the primary CTA button could cause layout shift issues. Consider using transform-gpu or will-change-transform to improve performance and prevent layout instability.

Suggested change

className="inline-flex items-center justify-center rounded-lg bg-gradient-to-r from-blue-600 to-purple-600 px-8 py-3.5 text-base font-semibold text-white shadow-lg transition-all hover:shadow-xl hover:scale-105"

className="inline-flex items-center justify-center rounded-lg bg-gradient-to-r from-blue-600 to-purple-600 px-8 py-3.5 text-base font-semibold text-white shadow-lg transition-all transform-gpu will-change-[transform] hover:shadow-xl hover:scale-105"

…and theme toggle Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

Copilot · 2026-01-20T06:40:40Z

不对，你应该按照fumadocs的规范重新开发首页，包括要支持导航条搜索深浅色的切换 @copilot

已按照 fumadocs 规范重新开发首页！现在使用 HomeLayout 组件，包含：

✅ 导航栏（包含 Logo 和文档链接）
✅ 搜索功能（支持 ⌘K 快捷键）
✅ 深浅色主题切换
✅ GitHub 链接
✅ 所有内容使用 fumadocs 设计令牌（fd-primary、fd-background 等）

提交哈希：3911242

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

fumadocs.vercel.app
- Triggering command: /home/REDACTED/work/_temp/ghcca-node/node/bin/node /home/REDACTED/work/_temp/ghcca-node/node/bin/node --enable-source-maps /home/REDACTED/work/_temp/copilot-developer-action-main/dist/index.js (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

Configure Actions setup steps to set up my environment, which run before the firewall is enabled
Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

huangyiirene · 2026-01-20T07:19:48Z

@copilot 总觉得哪里还有点样式冲突文档左侧的导航高度不对

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

Copilot · 2026-01-20T07:25:28Z

@copilot 总觉得哪里还有点样式冲突文档左侧的导航高度不对

已修复文档左侧导航栏高度问题！问题是由于 CSS 冲突导致侧边栏的 bottom 属性被设置为 421px 而不是 0，导致侧边栏无法延伸到页面底部。

修复方法：

在 global.css 中添加 CSS 覆盖规则强制侧边栏使用完整视口高度
更新 DocsLayout 配置以确保正确的侧边栏行为

提交哈希：588eb2b

修复前：

修复后：

huangyiirene · 2026-01-20T07:49:29Z

@copilot 我不要你乱改，我让你找到问题的根源在哪？

Copilot · 2026-01-20T07:51:34Z

@copilot 我不要你乱改，我让你找到问题的根源在哪？

找到根本原因了！

问题的根源是：RootProvider 被重复嵌套了两次

追踪变更历史：

最初：RootProvider 在根布局中（正确）
提交 a446d4a：为了"隔离样式"，将 RootProvider 从根布局移除，添加到文档布局
提交 3911242：为了支持首页的 HomeLayout，又将 RootProvider 恢复到根布局
当前状态：RootProvider 同时存在于根布局和文档布局，造成双层嵌套

结果：双层 RootProvider 导致 fumadocs 的 CSS 冲突，侧边栏高度计算错误（bottom: 421px 而不是 0）

正确的解决方案：

保留根布局中的 RootProvider（这是 fumadocs 的标准用法）
从文档布局中删除重复的 RootProvider
移除 global.css 中的临时 CSS hack

这样就能从根本上解决问题，而不是用 !important 强制覆盖症状。

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

huangyiirene · 2026-01-20T08:04:04Z

@copilot 帮我修改

github-actions · 2026-01-20T08:05:18Z

✅ All checks passed!

✅ Type check passed
✅ Tests passed
✅ Lint check completed

Copilot · 2026-01-20T08:07:40Z

@copilot 帮我修改

已完成修改！

修复内容（提交哈希：11704e3）：

✅ 从文档布局中移除重复的 RootProvider
✅ 保留根布局中的单个 RootProvider（正确的 fumadocs 模式）
✅ 移除 global.css 中的临时 CSS hack（!important 规则）

结果：

不再有重复嵌套的 RootProvider
遵循 fumadocs 最佳实践
干净的架构，无 CSS 冲突
首页和文档页面都能正常工作

当前的正确结构：

RootProvider (根布局)
├── HomeLayout (首页)
└── DocsLayout (文档页面)

Initial plan

b4fda5b

Copilot AI assigned Copilot and huangyiirene Jan 20, 2026

vercel bot had a problem deploying to Preview – objectui-docs January 20, 2026 05:14 Failure

Copilot started work on behalf of huangyiirene January 20, 2026 05:18 View session

Copilot AI requested a review from huangyiirene January 20, 2026 05:20

Copilot started work on behalf of huangyiirene January 20, 2026 06:11 View session

Redesign elegant homepage with modern layout and sections

78c5255

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

vercel bot deployed to Preview – objectui-site January 20, 2026 06:16 View deployment

vercel bot had a problem deploying to Preview – objectui-docs January 20, 2026 06:16 Failure

Copilot AI and others added 2 commits January 20, 2026 06:18

Fix code review issues: remove non-standard classes, use unique keys,…

25e34dc

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

Remove trailing whitespace for consistent formatting

63ab58b

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

vercel bot deployed to Preview – objectui-site January 20, 2026 06:19 View deployment

vercel bot had a problem deploying to Preview – objectui-docs January 20, 2026 06:19 Failure

Copilot AI changed the title ~~[WIP] Redesign elegant homepage layout~~ Redesign elegant homepage layout Jan 20, 2026

Copilot finished work on behalf of huangyiirene January 20, 2026 06:21

github-actions bot added the apps label Jan 20, 2026

Copilot started work on behalf of hotlong January 20, 2026 06:23 View session

Fix fumadocs style conflict by isolating RootProvider to docs layout …

a446d4a

…only Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

vercel bot deployed to Preview – objectui-site January 20, 2026 06:27 View deployment

vercel bot had a problem deploying to Preview – objectui-docs January 20, 2026 06:27 Failure

Copilot finished work on behalf of hotlong January 20, 2026 06:29

Copilot AI requested a review from hotlong January 20, 2026 06:29

Copilot started work on behalf of hotlong January 20, 2026 06:34 View session

Copilot AI reviewed Jan 20, 2026

View reviewed changes

Redesign homepage with fumadocs HomeLayout including navbar, search, …

3911242

…and theme toggle Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

vercel bot deployed to Preview – objectui-site January 20, 2026 06:41 View deployment

vercel bot had a problem deploying to Preview – objectui-docs January 20, 2026 06:41 Failure

Copilot AI changed the title ~~Redesign elegant homepage layout~~ Redesign elegant homepage with fumadocs layout and navigation Jan 20, 2026

Copilot finished work on behalf of hotlong January 20, 2026 06:45

Copilot started work on behalf of huangyiirene January 20, 2026 07:20 View session

Fix docs sidebar height issue with CSS override

588eb2b

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

vercel bot deployed to Preview – objectui-site January 20, 2026 07:25 View deployment

vercel bot had a problem deploying to Preview – objectui-docs January 20, 2026 07:26 Failure

Copilot finished work on behalf of huangyiirene January 20, 2026 07:26

Copilot started work on behalf of huangyiirene January 20, 2026 07:49 View session

Fix root cause: Remove duplicate RootProvider from docs layout

11704e3

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

vercel bot had a problem deploying to Preview – objectui-docs January 20, 2026 07:56 Failure

Copilot finished work on behalf of huangyiirene January 20, 2026 07:56

vercel bot deployed to Preview – objectui-site January 20, 2026 07:56 View deployment

Copilot started work on behalf of huangyiirene January 20, 2026 08:04 View session

Copilot finished work on behalf of huangyiirene January 20, 2026 08:09

hotlong merged commit e306330 into main Jan 20, 2026
12 of 13 checks passed

+/**
+ * Renders the main marketing homepage for ObjectUI.
+ *
+ * The layout includes:
+ * - A hero section introducing the JSON-driven UI engine.
+ * - Primary calls to action linking to documentation and GitHub.
+ * - A code preview demonstrating a sample JSON page schema.
+ *
+ * This component is used as the root route of the site (`/`).
+ */

	View on GitHub
	View on GitHub
	<span className="sr-only">(opens in a new tab)</span>

	Star on GitHub
	Star on GitHub
	<span className="sr-only">(opens in new tab)</span>

	className="inline-flex items-center justify-center rounded-lg bg-gradient-to-r from-blue-600 to-purple-600 px-8 py-3.5 text-base font-semibold text-white shadow-lg transition-all hover:shadow-xl hover:scale-105"
	className="inline-flex items-center justify-center rounded-lg bg-gradient-to-r from-blue-600 to-purple-600 px-8 py-3.5 text-base font-semibold text-white shadow-lg transition-all transform-gpu will-change-[transform] hover:shadow-xl hover:scale-105"

Redesign elegant homepage with fumadocs layout and navigation #125

Redesign elegant homepage with fumadocs layout and navigation #125

Uh oh!

Conversation

Copilot AI commented Jan 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Screenshots

Homepage with Fumadocs Navigation

Docs Page - After Fix

Summary

🎯 Fumadocs Integration

✨ Content Sections

🔍 Root Cause Analysis & Fix

🔧 Technical Implementation

✅ Features Working

Quality Assurance

Uh oh!

vercel bot commented Jan 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

huangyiirene commented Jan 20, 2026

Uh oh!

Copilot AI commented Jan 20, 2026

Uh oh!

hotlong commented Jan 20, 2026

Uh oh!

github-actions bot commented Jan 20, 2026

Uh oh!

Copilot AI commented Jan 20, 2026

Uh oh!

hotlong commented Jan 20, 2026

Uh oh!

github-actions bot commented Jan 20, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Jan 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI commented Jan 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

I tried to connect to the following addresses, but was blocked by firewall rules:

Uh oh!

huangyiirene commented Jan 20, 2026

Uh oh!

Copilot AI commented Jan 20, 2026

Uh oh!

huangyiirene commented Jan 20, 2026

Uh oh!

Copilot AI commented Jan 20, 2026

Copilot AI commented Jan 20, 2026 •

edited

Loading

vercel bot commented Jan 20, 2026 •

edited

Loading

Copilot AI commented Jan 20, 2026 •

edited

Loading