Skip to content

Commit e306330

Browse files
hotlonghotlong
authored
Merge pull request #125 from objectstack-ai/copilot/redesign-elegant-homepage
2 parents b0041c4 + 11704e3 commit e306330

File tree

1 file changed

+300
-14
lines changed

1 file changed

+300
-14
lines changed

‎apps/site/app/page.tsx‎

Lines changed: 300 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,306 @@
11
import Link from 'next/link';
2+
import { HomeLayout } from 'fumadocs-ui/layouts/home';
23

34
export default function HomePage() {
45
return (
5-
<main className="flex min-h-screen flex-col items-center justify-center p-24">
6-
<div className="text-center">
7-
<h1 className="mb-4 text-4xl font-bold">Object UI</h1>
8-
<p className="mb-8 text-xl text-muted-foreground">
9-
A Universal, Schema-Driven UI Engine built on React, Tailwind, and Shadcn UI.
10-
</p>
11-
<Link
12-
href="/docs"
13-
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"
14-
>
15-
Get Started
16-
</Link>
17-
</div>
18-
</main>
6+
<HomeLayout
7+
nav={{
8+
title: 'Object UI',
9+
url: '/',
10+
}}
11+
githubUrl="https://github.com/objectstack-ai/objectui"
12+
links={[
13+
{
14+
text: 'Documentation',
15+
url: '/docs',
16+
active: 'nested-url',
17+
},
18+
]}
19+
>
20+
{/* Hero Section */}
21+
<section className="relative overflow-hidden bg-gradient-to-br from-fd-background via-fd-background to-fd-muted/20 px-6 py-24 sm:py-32 lg:px-8">
22+
<div className="relative mx-auto max-w-7xl">
23+
<div className="mx-auto max-w-3xl text-center">
24+
<div className="mb-8 inline-flex items-center rounded-full border border-fd-primary/20 bg-fd-primary/10 px-4 py-1.5 text-sm font-medium text-fd-primary">
25+
✨ The Universal Schema-Driven UI Engine
26+
</div>
27+
<h1 className="mb-6 text-5xl font-bold tracking-tight text-fd-foreground sm:text-7xl">
28+
From JSON to
29+
<span className="bg-gradient-to-r from-fd-primary to-fd-accent bg-clip-text text-transparent"> World-Class UI </span>
30+
in Minutes
31+
</h1>
32+
<p className="mb-10 text-lg leading-8 text-fd-muted-foreground">
33+
Build beautiful, production-ready interfaces without writing React code.
34+
Just define your UI in JSON and let ObjectUI handle the rest with Tailwind CSS and Shadcn UI.
35+
</p>
36+
<div className="flex flex-col items-center justify-center gap-4 sm:flex-row">
37+
<Link
38+
href="/docs"
39+
className="inline-flex items-center justify-center rounded-lg bg-fd-primary px-8 py-3.5 text-base font-semibold text-fd-primary-foreground shadow-lg transition-all hover:bg-fd-primary/90 hover:shadow-xl"
40+
>
41+
Get Started
42+
<svg className="ml-2 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
43+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
44+
</svg>
45+
</Link>
46+
<a
47+
href="https://github.com/objectstack-ai/objectui"
48+
target="_blank"
49+
rel="noopener noreferrer"
50+
className="inline-flex items-center justify-center rounded-lg border-2 border-fd-border bg-fd-background px-8 py-3.5 text-base font-semibold text-fd-foreground transition-all hover:bg-fd-accent/50"
51+
>
52+
<svg className="mr-2 h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
53+
<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" />
54+
</svg>
55+
View on GitHub
56+
</a>
57+
</div>
58+
</div>
59+
60+
{/* Code Preview */}
61+
<div className="mx-auto mt-16 max-w-4xl">
62+
<div className="relative rounded-2xl bg-fd-card p-8 shadow-2xl ring-1 ring-fd-border">
63+
<div className="flex items-center gap-2 mb-4">
64+
<div className="h-3 w-3 rounded-full bg-red-500"></div>
65+
<div className="h-3 w-3 rounded-full bg-yellow-500"></div>
66+
<div className="h-3 w-3 rounded-full bg-green-500"></div>
67+
</div>
68+
<pre className="overflow-x-auto text-sm text-fd-muted-foreground">
69+
<code>{`{
70+
"type": "page",
71+
"title": "Dashboard",
72+
"body": {
73+
"type": "grid",
74+
"columns": 3,
75+
"items": [
76+
{
77+
"type": "card",
78+
"title": "Total Users",
79+
"value": "\${stats.users}"
80+
},
81+
{
82+
"type": "card",
83+
"title": "Revenue",
84+
"value": "\${stats.revenue}"
85+
},
86+
{
87+
"type": "card",
88+
"title": "Orders",
89+
"value": "\${stats.orders}"
90+
}
91+
]
92+
}
93+
}`}</code>
94+
</pre>
95+
</div>
96+
</div>
97+
</div>
98+
</section>
99+
100+
{/* Features Section */}
101+
<section className="py-24 sm:py-32 bg-fd-muted/30">
102+
<div className="mx-auto max-w-7xl px-6 lg:px-8">
103+
<div className="mx-auto max-w-2xl text-center mb-16">
104+
<h2 className="text-3xl font-bold tracking-tight text-fd-foreground sm:text-4xl">
105+
Why Choose ObjectUI?
106+
</h2>
107+
<p className="mt-4 text-lg text-fd-muted-foreground">
108+
Stop writing repetitive UI code. Build faster with better results.
109+
</p>
110+
</div>
111+
112+
<div className="mx-auto grid max-w-6xl grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
113+
{/* Feature 1 */}
114+
<div className="relative rounded-2xl border border-fd-border bg-fd-card p-8 shadow-sm transition-all hover:shadow-lg">
115+
<div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-fd-primary/10 text-fd-primary">
116+
<svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
117+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
118+
</svg>
119+
</div>
120+
<h3 className="mb-2 text-xl font-semibold text-fd-foreground">
121+
Blazing Fast
122+
</h3>
123+
<p className="text-fd-muted-foreground">
124+
3x faster page loads and 6x smaller bundle sizes compared to traditional low-code platforms. Built on React 18+ with automatic optimizations.
125+
</p>
126+
</div>
127+
128+
{/* Feature 2 */}
129+
<div className="relative rounded-2xl border border-fd-border bg-fd-card p-8 shadow-sm transition-all hover:shadow-lg">
130+
<div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-fd-accent/10 text-fd-accent">
131+
<svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
132+
<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" />
133+
</svg>
134+
</div>
135+
<h3 className="mb-2 text-xl font-semibold text-fd-foreground">
136+
Beautiful by Default
137+
</h3>
138+
<p className="text-fd-muted-foreground">
139+
Professional designs using Tailwind CSS and Shadcn UI. Light/dark theme support, fully customizable, and WCAG 2.1 AA accessible.
140+
</p>
141+
</div>
142+
143+
{/* Feature 3 */}
144+
<div className="relative rounded-2xl border border-fd-border bg-fd-card p-8 shadow-sm transition-all hover:shadow-lg">
145+
<div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-fd-primary/10 text-fd-primary">
146+
<svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
147+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
148+
</svg>
149+
</div>
150+
<h3 className="mb-2 text-xl font-semibold text-fd-foreground">
151+
Developer Friendly
152+
</h3>
153+
<p className="text-fd-muted-foreground">
154+
TypeScript-first with complete type definitions. Zero learning curve if you know React. Works with existing tools and workflows.
155+
</p>
156+
</div>
157+
158+
{/* Feature 4 */}
159+
<div className="relative rounded-2xl border border-fd-border bg-fd-card p-8 shadow-sm transition-all hover:shadow-lg">
160+
<div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-fd-accent/10 text-fd-accent">
161+
<svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
162+
<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" />
163+
</svg>
164+
</div>
165+
<h3 className="mb-2 text-xl font-semibold text-fd-foreground">
166+
Production Ready
167+
</h3>
168+
<p className="text-fd-muted-foreground">
169+
85%+ test coverage, enterprise security built-in, comprehensive documentation, and active development support.
170+
</p>
171+
</div>
172+
173+
{/* Feature 5 */}
174+
<div className="relative rounded-2xl border border-fd-border bg-fd-card p-8 shadow-sm transition-all hover:shadow-lg">
175+
<div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-fd-primary/10 text-fd-primary">
176+
<svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
177+
<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" />
178+
</svg>
179+
</div>
180+
<h3 className="mb-2 text-xl font-semibold text-fd-foreground">
181+
Modular Architecture
182+
</h3>
183+
<p className="text-fd-muted-foreground">
184+
Tree-shakable packages, lazy-loaded plugins, and support for Server Components. Only load what you need.
185+
</p>
186+
</div>
187+
188+
{/* Feature 6 */}
189+
<div className="relative rounded-2xl border border-fd-border bg-fd-card p-8 shadow-sm transition-all hover:shadow-lg">
190+
<div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-fd-accent/10 text-fd-accent">
191+
<svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
192+
<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" />
193+
</svg>
194+
</div>
195+
<h3 className="mb-2 text-xl font-semibold text-fd-foreground">
196+
Backend Agnostic
197+
</h3>
198+
<p className="text-fd-muted-foreground">
199+
Works with any backend through universal DataSource interface. REST, GraphQL, Firebase, or custom adapters.
200+
</p>
201+
</div>
202+
</div>
203+
</div>
204+
</section>
205+
206+
{/* Stats Section */}
207+
<section className="bg-gradient-to-r from-fd-primary to-fd-accent py-24 sm:py-32">
208+
<div className="mx-auto max-w-7xl px-6 lg:px-8">
209+
<div className="grid grid-cols-1 gap-8 sm:grid-cols-3 text-center text-fd-primary-foreground">
210+
<div>
211+
<div className="text-5xl font-bold mb-2">60+</div>
212+
<div className="text-xl opacity-90">Components</div>
213+
</div>
214+
<div>
215+
<div className="text-5xl font-bold mb-2">85%+</div>
216+
<div className="text-xl opacity-90">Test Coverage</div>
217+
</div>
218+
<div>
219+
<div className="text-5xl font-bold mb-2">50KB</div>
220+
<div className="text-xl opacity-90">Bundle Size</div>
221+
</div>
222+
</div>
223+
</div>
224+
</section>
225+
226+
{/* Use Cases Section */}
227+
<section className="py-24 sm:py-32 bg-fd-muted/30">
228+
<div className="mx-auto max-w-7xl px-6 lg:px-8">
229+
<div className="mx-auto max-w-2xl text-center mb-16">
230+
<h2 className="text-3xl font-bold tracking-tight text-fd-foreground sm:text-4xl">
231+
What Can You Build?
232+
</h2>
233+
<p className="mt-4 text-lg text-fd-muted-foreground">
234+
From admin panels to dashboards, ObjectUI handles it all
235+
</p>
236+
</div>
237+
238+
<div className="mx-auto grid max-w-6xl grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
239+
{[
240+
{ icon: "📊", title: "Dashboards", desc: "Data visualization and analytics" },
241+
{ icon: "⚙️", title: "Admin Panels", desc: "Complete CRUD interfaces" },
242+
{ icon: "📝", title: "Forms", desc: "Complex multi-step forms" },
243+
{ icon: "📄", title: "CMS", desc: "Content management systems" },
244+
{ icon: "🔧", title: "Internal Tools", desc: "Business applications" },
245+
{ icon: "🎨", title: "Prototypes", desc: "Rapid UI prototyping" }
246+
].map((useCase) => (
247+
<div key={useCase.title} className="rounded-xl border border-fd-border bg-fd-card p-6">
248+
<div className="text-4xl mb-3">{useCase.icon}</div>
249+
<h3 className="text-lg font-semibold text-fd-foreground mb-1">
250+
{useCase.title}
251+
</h3>
252+
<p className="text-fd-muted-foreground text-sm">
253+
{useCase.desc}
254+
</p>
255+
</div>
256+
))}
257+
</div>
258+
</div>
259+
</section>
260+
261+
{/* CTA Section */}
262+
<section className="py-24 sm:py-32">
263+
<div className="mx-auto max-w-7xl px-6 lg:px-8">
264+
<div className="relative overflow-hidden rounded-3xl bg-gradient-to-r from-fd-primary to-fd-accent px-8 py-16 text-center shadow-2xl sm:px-16">
265+
<div className="relative z-10">
266+
<h2 className="text-3xl font-bold tracking-tight text-fd-primary-foreground sm:text-4xl">
267+
Ready to Build Something Amazing?
268+
</h2>
269+
<p className="mx-auto mt-6 max-w-2xl text-lg text-fd-primary-foreground/90">
270+
Join developers who are building faster with ObjectUI. Get started in minutes with our comprehensive documentation.
271+
</p>
272+
<div className="mt-10 flex items-center justify-center gap-4">
273+
<Link
274+
href="/docs"
275+
className="rounded-lg bg-fd-background px-8 py-3.5 text-base font-semibold text-fd-foreground shadow-lg transition-all hover:bg-fd-background/90"
276+
>
277+
Get Started Now
278+
</Link>
279+
<a
280+
href="https://github.com/objectstack-ai/objectui"
281+
target="_blank"
282+
rel="noopener noreferrer"
283+
className="rounded-lg border-2 border-fd-primary-foreground bg-transparent px-8 py-3.5 text-base font-semibold text-fd-primary-foreground transition-all hover:bg-fd-primary-foreground hover:text-fd-primary"
284+
>
285+
Star on GitHub
286+
</a>
287+
</div>
288+
</div>
289+
</div>
290+
</div>
291+
</section>
292+
293+
{/* Footer */}
294+
<footer className="border-t border-fd-border">
295+
<div className="mx-auto max-w-7xl px-6 py-12 lg:px-8">
296+
<p className="text-center text-sm text-fd-muted-foreground">
297+
Built with ❤️ by the{' '}
298+
<a href="https://github.com/objectstack-ai" className="font-medium hover:text-fd-foreground">
299+
ObjectStack Team
300+
</a>
301+
</p>
302+
</div>
303+
</footer>
304+
</HomeLayout>
19305
);
20306
}

0 commit comments

Comments
 (0)