-
Notifications
You must be signed in to change notification settings - Fork 0
Redesign elegant homepage with fumadocs layout and navigation #125
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. Weโll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
Changes from 5 commits
Commits
Show all changes
8 commits
Select commit
Hold shift + click to select a range
b4fda5b
Initial plan
Copilot 78c5255
Redesign elegant homepage with modern layout and sections
Copilot 25e34dc
Fix code review issues: remove non-standard classes, use unique keys,โฆ
Copilot 63ab58b
Remove trailing whitespace for consistent formatting
Copilot a446d4a
Fix fumadocs style conflict by isolating RootProvider to docs layout โฆ
Copilot 3911242
Redesign homepage with fumadocs HomeLayout including navbar, search, โฆ
Copilot 588eb2b
Fix docs sidebar height issue with CSS override
Copilot 11704e3
Fix root cause: Remove duplicate RootProvider from docs layout
Copilot File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,11 +1,14 @@ | ||
| import { source } from '@/lib/source'; | ||
| import type { ReactNode } from 'react'; | ||
| import { DocsLayout } from 'fumadocs-ui/layouts/docs'; | ||
| import { RootProvider } from 'fumadocs-ui/provider'; | ||
|
|
||
| export default function Layout({ children }: { children: ReactNode }) { | ||
| return ( | ||
| <DocsLayout tree={source.pageTree} nav={{ title: 'Object UI' }}> | ||
| {children} | ||
| </DocsLayout> | ||
| <RootProvider> | ||
| <DocsLayout tree={source.pageTree} nav={{ title: 'Object UI' }}> | ||
| {children} | ||
| </DocsLayout> | ||
| </RootProvider> | ||
| ); | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,13 +1,10 @@ | ||
| import './global.css'; | ||
| import { RootProvider } from 'fumadocs-ui/provider'; | ||
| import type { ReactNode } from 'react'; | ||
|
|
||
| export default function Layout({ children }: { children: ReactNode }) { | ||
| return ( | ||
| <html lang="en" suppressHydrationWarning> | ||
| <body> | ||
| <RootProvider>{children}</RootProvider> | ||
| </body> | ||
| <body>{children}</body> | ||
| </html> | ||
| ); | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
|
@@ -2,19 +2,291 @@ import Link from 'next/link'; | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| export default function HomePage() { | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| return ( | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <main className="flex min-h-screen flex-col items-center justify-center p-24"> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <div className="text-center"> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <h1 className="mb-4 text-4xl font-bold">Object UI</h1> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <p className="mb-8 text-xl text-muted-foreground"> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| A Universal, Schema-Driven UI Engine built on React, Tailwind, and Shadcn UI. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| </p> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <Link | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| href="/docs" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| className="inline-flex items-center justify-center rounded-md bg-primary px-8 py-3 text-sm font-medium text-primary-foreground hover:bg-primary/90" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| > | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Get Started | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| </Link> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| </div> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <main className="min-h-screen"> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| {/* Hero Section */} | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <section className="relative overflow-hidden bg-gradient-to-br from-blue-50 via-white to-purple-50 dark:from-gray-900 dark:via-gray-900 dark:to-gray-800"> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <div className="relative mx-auto max-w-7xl px-6 py-24 sm:py-32 lg:px-8"> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <div className="mx-auto max-w-3xl text-center"> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <div className="mb-8 inline-flex items-center rounded-full border border-blue-200 bg-blue-50 px-4 py-1.5 text-sm font-medium text-blue-700 dark:border-blue-800 dark:bg-blue-900/30 dark:text-blue-300"> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| โจ The Universal Schema-Driven UI Engine | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| </div> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <h1 className="mb-6 text-5xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-7xl"> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| From JSON to | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <span className="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent"> World-Class UI </span> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| in Minutes | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| </h1> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <p className="mb-10 text-lg leading-8 text-gray-600 dark:text-gray-300"> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Build beautiful, production-ready interfaces without writing React code. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Just define your UI in JSON and let ObjectUI handle the rest with Tailwind CSS and Shadcn UI. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| </p> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <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" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 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" |
Copilot
AI
Jan 20, 2026
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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" | |
| > |
Comment on lines
+52
to
+54
Copilot
AI
Jan 20, 2026
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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
AI
Jan 20, 2026
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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> |
Outdated
Copilot
AI
Jan 20, 2026
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Comment on lines
42
to
193
Copilot
AI
Jan 20, 2026
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Outdated
Copilot
AI
Jan 20, 2026
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Outdated
Copilot
AI
Jan 20, 2026
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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>
Comment on lines
+239
to
+246
Copilot
AI
Jan 20, 2026
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The use case data is defined inline within the JSX map function. Consider extracting this array to a constant at the top of the file or in a separate configuration file to improve code maintainability and make it easier to update the content.
Copilot
AI
Jan 20, 2026
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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> |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.