Nebula: Add radial gradient on top (#6888)

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on enhancing the `EmptyStateChatPageContent` component by adding a new `showAurora` prop to control the display of an `Aurora` visual effect. It also adjusts the `isConnectingWallet` prop based on connection status and updates styles for better layout.

### Detailed summary
- Added `showAurora` prop to `EmptyStateChatPageContent` in multiple files.
- Updated `isConnectingWallet` logic based on connection status.
- Modified layout styles in `EmptyStateChatPageContent` for improved appearance.
- Introduced `Aurora` component with specific styles for visual effects.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

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;
+};
+
+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={{