Skip to content

[WIP] Enhance visual appeal of examples in studio #29

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.

Sign up for GitHub

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
hotlong merged 6 commits into from
Jan 14, 2026
Merged

[WIP] Enhance visual appeal of examples in studio #29

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
eb03b06
Initial plan
Copilot Jan 14, 2026
143d6b7
Enhance visual appeal of dashboards, forms, and basic examples
Copilot Jan 14, 2026
835184c
Changes before error encountered
Copilot Jan 14, 2026
3b00948
Enhance complex and data-display examples with modern styling
Copilot Jan 14, 2026
d0a1b14
Enhance project management dashboard and badge examples
Copilot Jan 14, 2026
e166f7a
Fix JSON syntax errors in examples
Copilot Jan 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
243 changes: 141 additions & 102 deletions apps/playground/src/data/examples/basic/image-gallery.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,130 +1,169 @@
{
"type": "div",
"className": "space-y-6 max-w-6xl",
"className": "min-h-screen bg-gradient-to-br from-rose-50 via-pink-50 to-fuchsia-100 p-6 md:p-8",
"body": [
{
"type": "div",
"className": "space-y-2",
"className": "max-w-6xl mx-auto space-y-8",
"body": [
{
"type": "text",
"content": "Image Component Gallery",
"className": "text-3xl font-bold"
"type": "div",
"className": "space-y-3 backdrop-blur-sm bg-white/40 p-6 rounded-2xl border border-white/60 shadow-xl text-center",
"body": [
{
"type": "text",
"content": "🖼️ Image Component Gallery",
"className": "text-4xl font-black bg-gradient-to-r from-rose-600 via-pink-600 to-fuchsia-600 bg-clip-text text-transparent"
},
{
"type": "text",
"content": "Various image layouts and styles using Tailwind CSS",
"className": "text-gray-600 font-medium text-lg"
}
]
},
{
"type": "text",
"content": "Various image layouts and styles using Tailwind classes",
"className": "text-muted-foreground"
}
]
},
{
"type": "div",
"className": "space-y-6",
"body": [
{
"type": "card",
"className": "p-6",
"body": {
"type": "div",
"className": "space-y-4",
"body": [
{
"type": "text",
"content": "Standard Image",
"className": "text-lg font-semibold"
},
{
"type": "image",
"src": "https://images.unsplash.com/photo-1682687220742-aba13b6e50ba",
"alt": "Mountain landscape",
"className": "w-full h-64 object-cover rounded-lg"
}
]
}
},
{
"type": "card",
"className": "p-6",
"body": {
"type": "div",
"className": "space-y-4",
"body": [
{
"type": "text",
"content": "Image Grid",
"className": "text-lg font-semibold"
},
{
"type": "grid",
"columns": 3,
"gap": 4,
"children": [
"type": "div",
"className": "space-y-8",
"body": [
{
"type": "card",
"className": "p-8 shadow-2xl border-0 bg-white/90 backdrop-blur-lg rounded-2xl",
"body": {
"type": "div",
"className": "space-y-6",
"body": [
{
"type": "image",
"src": "https://images.unsplash.com/photo-1682687220742-aba13b6e50ba",
"alt": "Image 1",
"className": "w-full h-40 object-cover rounded-md"
"type": "text",
"content": "🌄 Hero Image",
"className": "text-2xl font-bold text-gray-900"
},
{
"type": "image",
"src": "https://images.unsplash.com/photo-1682687221038-404cb8830901",
"alt": "Image 2",
"className": "w-full h-40 object-cover rounded-md"
},
{
"type": "image",
"src": "https://images.unsplash.com/photo-1682687220063-4742bd7fd538",
"alt": "Image 3",
"className": "w-full h-40 object-cover rounded-md"
"src": "https://images.unsplash.com/photo-1682687220742-aba13b6e50ba",
"alt": "Mountain landscape",
"className": "w-full h-80 object-cover rounded-2xl shadow-2xl hover:shadow-3xl transition-all hover:scale-[1.02] duration-300 ring-4 ring-white"
}
]
}
]
}
},
{
"type": "card",
"className": "p-6",
"body": {
"type": "div",
"className": "space-y-4",
"body": [
{
"type": "text",
"content": "Rounded & Styled Images",
"className": "text-lg font-semibold"
},
{
"type": "flex",
"direction": "row",
"gap": 4,
"className": "flex-wrap",
"children": [
},
{
"type": "card",
"className": "p-8 shadow-2xl border-0 bg-white/90 backdrop-blur-lg rounded-2xl",
"body": {
"type": "div",
"className": "space-y-6",
"body": [
{
"type": "image",
"src": "https://images.unsplash.com/photo-1682687220742-aba13b6e50ba",
"alt": "Rounded",
"className": "w-32 h-32 object-cover rounded-full border-4 border-blue-200"
"type": "text",
"content": "🎨 Image Grid",
"className": "text-2xl font-bold text-gray-900"
},
{
"type": "image",
"src": "https://images.unsplash.com/photo-1682687221038-404cb8830901",
"alt": "Square",
"className": "w-32 h-32 object-cover rounded-xl shadow-lg"
"type": "grid",
"columns": 3,
"gap": 6,
"children": [
{
"type": "image",
"src": "https://images.unsplash.com/photo-1682687220742-aba13b6e50ba",
"alt": "Image 1",
"className": "w-full h-48 object-cover rounded-xl shadow-lg hover:shadow-2xl transition-all hover:scale-105 duration-300 ring-2 ring-white"
},
{
"type": "image",
"src": "https://images.unsplash.com/photo-1682687221038-404cb8830901",
"alt": "Image 2",
"className": "w-full h-48 object-cover rounded-xl shadow-lg hover:shadow-2xl transition-all hover:scale-105 duration-300 ring-2 ring-white"
},
{
"type": "image",
"src": "https://images.unsplash.com/photo-1682687220063-4742bd7fd538",
"alt": "Image 3",
"className": "w-full h-48 object-cover rounded-xl shadow-lg hover:shadow-2xl transition-all hover:scale-105 duration-300 ring-2 ring-white"
}
]
}
]
}
},
{
"type": "card",
"className": "p-8 shadow-2xl border-0 bg-white/90 backdrop-blur-lg rounded-2xl",
"body": {
"type": "div",
"className": "space-y-6",
"body": [
{
"type": "text",
"content": "✨ Styled Images",
"className": "text-2xl font-bold text-gray-900"
},
{
"type": "image",
"src": "https://images.unsplash.com/photo-1682687220063-4742bd7fd538",
"alt": "Styled",
"className": "w-32 h-32 object-cover rounded-lg ring-2 ring-purple-500 ring-offset-2"
"type": "flex",
"direction": "row",
"gap": 8,
"className": "flex-wrap justify-center",
"children": [
{
"type": "div",
"className": "text-center space-y-3",
"body": [
{
"type": "image",
"src": "https://images.unsplash.com/photo-1682687220742-aba13b6e50ba",
"alt": "Rounded",
"className": "w-40 h-40 object-cover rounded-full border-8 border-rose-200 shadow-2xl hover:border-rose-400 transition-all hover:scale-110 duration-300"
},
{
"type": "text",
"content": "Circular",
"className": "text-sm font-semibold text-gray-600"
}
]
},
{
"type": "div",
"className": "text-center space-y-3",
"body": [
{
"type": "image",
"src": "https://images.unsplash.com/photo-1682687221038-404cb8830901",
"alt": "Square",
"className": "w-40 h-40 object-cover rounded-2xl shadow-2xl hover:shadow-3xl transition-all hover:-translate-y-2 duration-300 ring-4 ring-pink-300"
},
{
"type": "text",
"content": "Rounded Square",
"className": "text-sm font-semibold text-gray-600"
}
]
},
{
"type": "div",
"className": "text-center space-y-3",
"body": [
{
"type": "image",
"src": "https://images.unsplash.com/photo-1682687220063-4742bd7fd538",
"alt": "Styled",
"className": "w-40 h-40 object-cover rounded-xl ring-4 ring-fuchsia-500 ring-offset-4 shadow-2xl hover:ring-offset-8 transition-all hover:rotate-3 duration-300"
},
{
"type": "text",
"content": "Ring Style",
"className": "text-sm font-semibold text-gray-600"
}
]
}
]
}
]
}
]
}
}
]
}
]
}
]
}
}
Loading