Skip to content

Commit dba6eab

Browse files
huangyiirenehuangyiirene
authored
Merge pull request #68 from objectstack-ai/copilot/simplify-studio-homepage
2 parents 882bd53 + 96a3331 commit dba6eab

File tree

1 file changed

+72
-108
lines changed

1 file changed

+72
-108
lines changed

‎apps/playground/src/pages/Home.tsx‎

Lines changed: 72 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -20,34 +20,34 @@ export const Home = () => {
2020

2121
return (
2222
<div className="min-h-screen bg-background text-foreground">
23-
{/* Hero Section */}
24-
<header className="bg-white/80 backdrop-blur-md border-b border-gray-200/50 sticky top-0 z-20 shadow-sm">
25-
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
26-
<div className="flex items-center gap-3">
27-
<div className="bg-primary p-2 rounded-xl shadow-lg">
28-
<Box className="w-5 h-5 text-primary-foreground" />
23+
{/* Header */}
24+
<header className="bg-background border-b border-border sticky top-0 z-20">
25+
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-14 flex items-center justify-between">
26+
<div className="flex items-center gap-2">
27+
<div className="bg-primary p-1.5 rounded-lg">
28+
<Box className="w-4 h-4 text-primary-foreground" />
2929
</div>
30-
<span className="font-bold text-xl tracking-tight">Object UI Studio</span>
30+
<span className="font-semibold text-base">Object UI Studio</span>
3131
</div>
32-
<div className="flex items-center gap-3">
32+
<div className="flex items-center gap-2">
3333
<button
3434
onClick={() => navigate('/studio/new')}
35-
className="flex items-center gap-2 px-4 py-2 text-sm font-semibold bg-primary text-primary-foreground hover:bg-primary/90 rounded-lg transition-all shadow-sm hover:shadow"
35+
className="flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium bg-primary text-primary-foreground hover:bg-primary/90 rounded-md transition-colors"
3636
>
3737
<Plus className="w-4 h-4" />
38-
New Design
38+
New
3939
</button>
4040
<button
4141
onClick={() => navigate('/my-designs')}
42-
className="flex items-center gap-2 px-4 py-2 text-sm font-semibold bg-secondary text-secondary-foreground hover:bg-secondary/80 border border-border rounded-lg transition-all shadow-sm hover:shadow"
42+
className="flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium hover:bg-muted rounded-md transition-colors"
4343
>
4444
<FolderOpen className="w-4 h-4" />
4545
My Designs
4646
</button>
4747
<a
4848
href="https://github.com/objectql/objectui"
4949
target="_blank"
50-
className="flex items-center gap-2 px-4 py-2 text-sm font-medium bg-secondary text-secondary-foreground hover:bg-secondary/80 border border-border rounded-lg transition-all shadow-sm hover:shadow"
50+
className="flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium hover:bg-muted rounded-md transition-colors"
5151
>
5252
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
5353
<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" />
@@ -58,122 +58,86 @@ export const Home = () => {
5858
</div>
5959
</header>
6060

61-
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
62-
<div className="text-center mb-20 relative">
63-
{/* Decorative elements */}
64-
<div className="absolute inset-0 -z-10 overflow-hidden">
65-
<div className="absolute top-0 left-1/4 w-96 h-96 bg-muted/20 rounded-full blur-3xl opacity-30 animate-pulse"></div>
66-
<div className="absolute top-20 right-1/4 w-80 h-80 bg-muted/30 rounded-full blur-3xl opacity-30 animate-pulse"></div>
67-
</div>
68-
69-
<div className="inline-flex items-center gap-2 px-4 py-2 bg-muted border border-border rounded-full text-sm font-semibold text-muted-foreground mb-6 shadow-sm">
70-
<span className="relative flex h-2 w-2">
71-
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75"></span>
72-
<span className="relative inline-flex rounded-full h-2 w-2 bg-primary"></span>
73-
</span>
74-
Interactive Visual Editor
75-
</div>
76-
77-
<h1 className="text-5xl md:text-6xl lg:text-7xl font-black tracking-tight mb-6 leading-tight">
78-
Build Stunning Interfaces,<br />
79-
<span className="text-primary">Purely from JSON.</span>
80-
</h1>
81-
<p className="max-w-2xl mx-auto text-xl text-muted-foreground leading-relaxed mb-8">
82-
Object UI transforms JSON schemas into fully functional, accessible, and responsive React applications.
83-
<br className="hidden sm:block" />
84-
<span className="font-semibold">Select a template below or start from scratch.</span>
85-
</p>
86-
87-
<div className="flex justify-center gap-4">
88-
<button
89-
onClick={() => navigate('/studio/new')}
90-
className="flex items-center gap-2 px-6 py-3 text-lg font-bold bg-primary text-primary-foreground hover:bg-primary/90 rounded-xl shadow-lg transition-all transform hover:scale-105"
91-
>
92-
<Plus className="w-5 h-5" />
93-
Start New Design
94-
</button>
95-
<button
96-
onClick={() => navigate('/my-designs')}
97-
className="flex items-center gap-2 px-6 py-3 text-lg font-bold bg-secondary text-secondary-foreground hover:bg-secondary/80 border-2 border-border rounded-xl shadow-lg transition-all transform hover:scale-105"
98-
>
99-
<FolderOpen className="w-5 h-5" />
100-
Open Saved
101-
</button>
61+
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
62+
{/* Quick Actions */}
63+
<div className="mb-6">
64+
<div className="flex items-center justify-between mb-4">
65+
<h2 className="text-lg font-semibold">Quick Start</h2>
66+
<div className="flex items-center gap-2">
67+
<button
68+
onClick={() => navigate('/my-designs')}
69+
className="flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium hover:bg-muted rounded-md transition-colors"
70+
>
71+
<FolderOpen className="w-4 h-4" />
72+
Open Saved
73+
</button>
74+
</div>
10275
</div>
10376
</div>
10477

10578
{/* Category Filter */}
106-
<div className="flex flex-wrap justify-center gap-3 mb-16">
107-
{Object.keys(exampleCategories).map((category) => (
108-
<button
109-
key={category}
110-
onClick={() => setActiveCategory(category)}
111-
className={`
112-
group flex items-center gap-2 px-5 py-2.5 rounded-xl text-sm font-semibold transition-all duration-200
113-
${activeCategory === category
114-
? 'bg-primary text-primary-foreground shadow-lg scale-105'
115-
: 'bg-secondary text-secondary-foreground hover:bg-secondary/80 border-2 border-border hover:shadow-md'}
116-
`}
117-
>
118-
<CategoryIcon name={category} />
119-
{category}
120-
{activeCategory === category && (
121-
<span className="ml-1 px-2 py-0.5 bg-primary-foreground/20 rounded-full text-xs font-bold">
122-
{exampleCategories[category as keyof typeof exampleCategories].length}
79+
<div className="mb-4">
80+
<div className="flex items-center gap-2 border-b border-border">
81+
{Object.keys(exampleCategories).map((category) => (
82+
<button
83+
key={category}
84+
onClick={() => setActiveCategory(category)}
85+
className={`
86+
flex items-center gap-1.5 px-3 py-2 text-sm font-medium transition-colors border-b-2 -mb-px
87+
${activeCategory === category
88+
? 'border-primary text-primary'
89+
: 'border-transparent text-muted-foreground hover:text-foreground hover:border-border'}
90+
`}
91+
>
92+
<CategoryIcon name={category} />
93+
{category}
94+
<span
95+
className={`text-xs ${activeCategory === category ? 'text-primary' : 'text-muted-foreground'}`}
96+
>
97+
({exampleCategories[category as keyof typeof exampleCategories].length})
12398
</span>
124-
)}
125-
</button>
126-
))}
99+
</button>
100+
))}
101+
</div>
127102
</div>
128103

129-
{/* Examples Grid */}
130-
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
104+
{/* Templates Grid */}
105+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
131106
{exampleCategories[activeCategory as keyof typeof exampleCategories].map((key) => {
132-
// Try to parse the example to get a description or just format the title
133107
const title = key.split('-').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' ');
134108

135109
return (
136110
<div
137111
key={key}
138-
onClick={() => navigate(`/${key}`)}
139-
className="group relative bg-card rounded-2xl border-2 border-border overflow-hidden hover:shadow-2xl transition-all duration-300 cursor-pointer hover:border-primary hover:-translate-y-1 flex flex-col h-72"
112+
onClick={() => navigate(`/studio/${key}`)}
113+
className="group bg-card rounded-lg border border-border overflow-hidden hover:border-primary hover:shadow-md transition-all cursor-pointer"
140114
>
141-
{/* Overlay on hover */}
142-
<div className="absolute inset-0 bg-primary/0 group-hover:bg-primary/5 transition-all duration-500 pointer-events-none z-10"></div>
143-
144-
{/* Mock Preview Window */}
145-
<div className="bg-muted border-b border-border p-6 flex-1 flex items-center justify-center overflow-hidden relative">
146-
{/* Decorative grid */}
147-
<div className="absolute inset-0 opacity-20 bg-dot-pattern-sm"></div>
148-
149-
<div className="relative w-3/4 h-3/4 bg-card shadow-xl border-2 border-border rounded-xl flex flex-col group-hover:scale-110 transition-transform duration-500">
150-
<div className="h-5 border-b-2 border-border bg-muted flex items-center px-2 gap-1.5 rounded-t-xl">
151-
<div className="w-2 h-2 rounded-full bg-red-500 shadow-sm"></div>
152-
<div className="w-2 h-2 rounded-full bg-yellow-500 shadow-sm"></div>
153-
<div className="w-2 h-2 rounded-full bg-green-500 shadow-sm"></div>
154-
</div>
155-
<div className="flex-1 p-3">
156-
<div className="space-y-2.5">
157-
<div className="h-2.5 bg-muted rounded-full w-1/2 animate-pulse"></div>
158-
<div className="h-2.5 bg-muted rounded-full w-3/4 animate-pulse [animation-delay:75ms]"></div>
159-
<div className="h-2.5 bg-muted rounded-full w-full animate-pulse [animation-delay:150ms]"></div>
160-
</div>
115+
{/* Preview */}
116+
<div className="bg-muted p-4 aspect-video flex items-center justify-center border-b border-border">
117+
<div className="w-full h-full bg-background rounded border border-border flex flex-col shadow-sm">
118+
<div className="h-4 border-b border-border bg-muted flex items-center px-1.5 gap-1">
119+
<div className="w-1.5 h-1.5 rounded-full bg-red-500"></div>
120+
<div className="w-1.5 h-1.5 rounded-full bg-yellow-500"></div>
121+
<div className="w-1.5 h-1.5 rounded-full bg-green-500"></div>
122+
</div>
123+
<div className="flex-1 p-2">
124+
<div className="space-y-1.5">
125+
<div className="h-1.5 bg-muted rounded w-1/2"></div>
126+
<div className="h-1.5 bg-muted rounded w-3/4"></div>
127+
<div className="h-1.5 bg-muted rounded w-full"></div>
161128
</div>
162129
</div>
130+
</div>
163131
</div>
164132

165-
<div className="p-6 relative z-10 bg-card border-t border-border">
166-
<h3 className="text-lg font-bold group-hover:text-primary transition-colors mb-2">
133+
{/* Info */}
134+
<div className="p-3">
135+
<h3 className="text-sm font-medium group-hover:text-primary transition-colors mb-1">
167136
{title}
168137
</h3>
169-
<div className="flex items-center justify-between">
170-
<div className="flex items-center text-sm font-semibold text-muted-foreground group-hover:text-primary transition-colors">
171-
Launch Studio
172-
<ArrowRight className="w-4 h-4 ml-2 transform group-hover:translate-x-2 transition-transform" />
173-
</div>
174-
<div className="px-3 py-1 bg-muted text-muted-foreground rounded-full text-xs font-bold group-hover:bg-primary group-hover:text-primary-foreground transition-colors">
175-
Try Now
176-
</div>
138+
<div className="flex items-center text-xs text-muted-foreground">
139+
<span>Open in Studio</span>
140+
<ArrowRight className="w-3 h-3 ml-1 group-hover:translate-x-0.5 transition-transform" />
177141
</div>
178142
</div>
179143
</div>

0 commit comments

Comments
 (0)