Nebula: Add radial gradient on top - DO NOT MERGE

Author: MananTank

apps/dashboard/src/app/nebula-app/(app)/components/ChatPageContent.tsx

@@ -352,6 +352,7 @@ export function ChatPageContent(props: {
           {showEmptyState ? (
             <div className="fade-in-0 container flex max-w-[800px] grow animate-in flex-col justify-center">
               <EmptyStateChatPageContent
+                showAurora={true}
                 isConnectingWallet={connectionStatus === "connecting"}
                 sendMessage={handleSendMessage}
                 prefillMessage={props.initialParams?.q}

apps/dashboard/src/app/nebula-app/(app)/components/EmptyStateChatPageContent.stories.tsx

@@ -34,6 +34,7 @@ function Story(props: {
     <ThirdwebProvider>
       <div className="container flex max-w-[800px] grow flex-col justify-center overflow-hidden">
         <EmptyStateChatPageContent
+          showAurora={false}
           isConnectingWallet={false}
           sendMessage={() => {}}
           prefillMessage={props.prefillMessage}

apps/dashboard/src/app/nebula-app/(app)/components/EmptyStateChatPageContent.tsx

@@ -18,9 +18,13 @@ export function EmptyStateChatPageContent(props: {
   activeAccountAddress: string | undefined;
   setActiveWallet: (wallet: WalletMeta) => void;
   isConnectingWallet: boolean;
+  showAurora: boolean;
 }) {
   return (
-    <div className="py-10 lg:py-16">
+    <div className="overflow-hidden py-10 lg:py-16">
+      {props.showAurora && (
+        <Aurora className="top-0 left-1/2 h-[800px] w-[1000px] text-[hsl(var(--nebula-pink-foreground)/8%)] lg:w-[150%] dark:text-[hsl(var(--nebula-pink-foreground)/10%)]" />
+      )}
       <div className="relative py-10">
         <FancyBorders />
         <div className="flex justify-center">
@@ -136,3 +140,22 @@ function DashedBgDiv(props: {
     />
   );
 }
+
+type AuroraProps = {
+  className?: string;
+};
+
+export const Aurora: React.FC<AuroraProps> = ({ className }) => {
+  return (
+    <div
+      className={cn(
+        "-translate-x-1/2 -translate-y-1/2 pointer-events-none absolute",
+        className,
+      )}
+      style={{
+        backgroundImage:
+          "radial-gradient(ellipse at center, currentColor, transparent 60%)",
+      }}
+    />
+  );
+};

apps/dashboard/src/app/nebula-app/login/NebulaLoginPage.tsx

@@ -88,6 +88,7 @@ export function NebulaLoggedOutStatePage(props: {
       {showPage === "welcome" && (
         <div className="container relative flex max-w-[800px] grow flex-col justify-center overflow-hidden rounded-lg pb-6">
           <EmptyStateChatPageContent
+            showAurora={false}
             isConnectingWallet={false}
             prefillMessage={message}
             context={{