feat: banner

Author: vuonghuuhung

src/App.tsx

@@ -1,4 +1,5 @@
 // import { AgentChat } from './components/AgentChat'
+import { useEffect, useState } from 'react'
 import { AppSidebar } from './components/app-sidebar'
 import { SiteHeader } from './components/site-header'
 import AgentConversation from './components/ui/AgentConversation'
@@ -14,6 +15,14 @@ export const iframeHeight = "800px"
 export const description = "A sidebar with a header and a search form."
 
 function App() {
+  const [showWalrusDialog, setShowWalrusDialog] = useState(true);
+
+  useEffect(() => {
+    setShowWalrusDialog(true);
+  }, []);
+
+  const walrusAppUrl = "https://orbiton.wal.app";
+
   return (
     <>
       <SuiClientProvider networks={networks} defaultNetwork="mainnet">
@@ -29,6 +38,50 @@ function App() {
             </div>
           </SidebarProvider>
         </div>
+        {showWalrusDialog && (
+          <div className="fixed inset-0 z-50 flex items-center justify-center bg-gradient-to-br from-indigo-900/90 via-purple-900/85 to-pink-800/80 backdrop-blur">
+            <div className="relative w-full max-w-4xl overflow-hidden rounded-[32px] border border-white/10 bg-white/90 p-10 shadow-[0_25px_80px_rgba(0,0,0,0.45)] backdrop-blur-2xl dark:bg-neutral-900/90">
+              <div className="pointer-events-none absolute inset-0 opacity-40 blur-2xl">
+                <div className="absolute -left-20 -top-20 h-64 w-64 rounded-full bg-indigo-500/40" />
+                <div className="absolute -right-10 top-10 h-52 w-52 rounded-full bg-pink-400/30" />
+                <div className="absolute bottom-0 right-1/3 h-48 w-48 rounded-full bg-purple-400/25" />
+              </div>
+
+              <div className="relative flex flex-col gap-6 text-center text-neutral-900 dark:text-neutral-50">
+                <p className="mx-auto inline-flex items-center gap-2 rounded-full bg-white/80 px-4 py-1 text-xs font-semibold uppercase tracking-[0.2em] text-indigo-700 shadow-sm ring-1 ring-white/40 backdrop-blur dark:bg-white/10 dark:text-white">
+                  New on Walrus
+                </p>
+                <h2 className="text-4xl font-extrabold leading-tight sm:text-5xl">
+                  Predict Orbiton AI Agent is now live on Walrus!!!
+                </h2>
+                <p className="mx-auto max-w-2xl text-lg text-neutral-700/90 dark:text-neutral-200">
+                  Explore the fully decentralized AI Agent Sites powered by Walrus. Your chats,
+                  tools, and automations now live on distributed storage with true user ownership.
+                </p>
+                <p className="mx-auto max-w-xl rounded-full bg-white/70 px-4 py-2 text-sm font-mono text-indigo-800 shadow-sm ring-1 ring-white/50 backdrop-blur dark:bg-white/10 dark:text-indigo-100 dark:ring-white/10">
+                  {walrusAppUrl}
+                </p>
+
+                <div className="mx-auto flex flex-wrap items-center justify-center gap-4">
+                  <a
+                    href={walrusAppUrl}
+                    target="_blank"
+                    rel="noreferrer"
+                    className="inline-flex items-center justify-center rounded-full bg-gradient-to-r from-indigo-600 via-purple-600 to-pink-600 px-6 py-3 text-sm font-semibold text-white shadow-lg shadow-purple-500/40 transition hover:scale-[1.02] hover:shadow-xl hover:shadow-pink-500/40"
+                  >
+                    Open Walrus app
+                  </a>
+                  <button
+                    onClick={() => setShowWalrusDialog(false)}
+                    className="inline-flex items-center justify-center rounded-full border border-white/40 bg-white/70 px-6 py-3 text-sm font-semibold text-neutral-900 shadow-sm transition hover:bg-white/90 dark:border-white/20 dark:bg-white/10 dark:text-white dark:hover:bg-white/20"
+                  >
+                    Maybe later
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
       </SuiClientProvider>
 
     </>