diff --git a/apps/app/src/app/globals.css b/apps/app/src/app/globals.css index b0e8d06..caa5763 100644 --- a/apps/app/src/app/globals.css +++ b/apps/app/src/app/globals.css @@ -308,6 +308,12 @@ body, html { @media (max-width: 768px) { .brand-shell { padding: 8px; } + .brand-glass-container { border-radius: var(--radius-lg); } +} + +@media (max-width: 480px) { + .brand-shell { padding: 4px; } + .brand-glass-container { border-radius: var(--radius-md); } } /* === Gradient Utilities === */ @@ -602,6 +608,35 @@ body, html { flex-shrink: 0; } +/* === Demo Gallery Drawer === */ +/* Mobile: full-screen, slides up from bottom */ +.demo-gallery-drawer { + inset: 0; + border-radius: 0; + transform: translateY(100%); +} +.demo-gallery-drawer--open { + transform: translateY(0); +} + +/* Desktop (sm+): right side panel, slides in from right */ +@media (min-width: 640px) { + .demo-gallery-drawer { + inset: auto; + top: 0; + right: 0; + height: 100%; + width: 480px; + max-width: 90vw; + border-left: 1px solid var(--color-border-glass, rgba(0,0,0,0.1)); + transform: translateX(100%); + } + .demo-gallery-drawer--open { + transform: translateX(0); + box-shadow: -8px 0 30px rgba(0,0,0,0.1); + } +} + /* === Flash Animation === */ .content-flash { animation: content-flash 700ms ease-out; diff --git a/apps/app/src/app/layout.tsx b/apps/app/src/app/layout.tsx index 112234f..0a06223 100644 --- a/apps/app/src/app/layout.tsx +++ b/apps/app/src/app/layout.tsx @@ -10,6 +10,7 @@ export default function RootLayout({children}: Readonly<{ children: React.ReactN return ( + Open Generative UI diff --git a/apps/app/src/app/page.tsx b/apps/app/src/app/page.tsx index 1f1fa66..2f91244 100644 --- a/apps/app/src/app/page.tsx +++ b/apps/app/src/app/page.tsx @@ -6,6 +6,7 @@ import { useGenerativeUIExamples, useExampleSuggestions } from "@/hooks"; import { ExplainerCardsPortal } from "@/components/explainer-cards"; import { DemoGallery, type DemoItem } from "@/components/demo-gallery"; import { GridIcon } from "@/components/demo-gallery/grid-icon"; +import { DesktopTipModal } from "@/components/desktop-tip-modal"; import { CopilotChat, useAgent, useCopilotKit } from "@copilotkit/react-core/v2"; export default function HomePage() { @@ -51,25 +52,25 @@ export default function HomePage() { background: "linear-gradient(135deg, rgba(190,194,255,0.08) 0%, rgba(133,224,206,0.06) 100%)", }} > -
-
+
+
- 🪁 + 🪁
-

+

Open Generative UI - — powered by CopilotKit + — powered by CopilotKit

-
+
setDemoDrawerOpen(false)} onTryDemo={handleTryDemo} /> + + ); } diff --git a/apps/app/src/components/demo-gallery/index.tsx b/apps/app/src/components/demo-gallery/index.tsx index e571b79..c35af59 100644 --- a/apps/app/src/components/demo-gallery/index.tsx +++ b/apps/app/src/components/demo-gallery/index.tsx @@ -42,21 +42,14 @@ export function DemoGallery({ open, onClose, onTryDemo }: DemoGalleryProps) { /> )} - {/* Drawer panel */} + {/* Drawer: full-screen bottom sheet on mobile, right side panel on sm+ */}
{/* Header */}
+
+
+ ); +}