feat: add auto-prompt for push notifications on app load

- Create NotificationPrompt component that appears 3 seconds after app loads
- Add to main layout so it shows on all pages (for logged-in users)
- Prompt only shows if permission not yet requested
- Users can dismiss temporarily or permanently
- Add slide-up animation for smooth appearance
- Create simplified SETUP_PUSH_NOTIFICATIONS.md guide

Users will now be automatically prompted to enable notifications
instead of having to go to the profile page.

app/globals.css

@@ -63,6 +63,17 @@ mark {
     }
   }
   
+  @keyframes slide-up {
+    from {
+      transform: translateY(100%);
+      opacity: 0;
+    }
+    to {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+  
   .animate-slide-in-right {
     animation: slide-in-right 0.3s ease-out;
   }
@@ -75,6 +86,10 @@ mark {
     animation: scale-in 0.2s ease-out;
   }
   
+  .animate-slide-up {
+    animation: slide-up 0.4s ease-out;
+  }
+  
   /* Smooth transitions for interactive elements */
   .transition-smooth {
     transition: all 0.2s ease-in-out;

app/layout.tsx

@@ -2,6 +2,7 @@ import type { Metadata, Viewport } from 'next'
 import './globals.css'
 import ServiceWorkerRegistration from '@/components/ServiceWorkerRegistration'
 import OfflineIndicator from '@/components/OfflineIndicator'
+import NotificationPrompt from '@/components/NotificationPrompt'
 import { ToastProvider } from '@/components/ToastContainer'
 import ErrorBoundary from '@/components/ErrorBoundary'
 
@@ -75,6 +76,7 @@ export default function RootLayout({
           <ToastProvider>
             <ServiceWorkerRegistration />
             <OfflineIndicator />
+            <NotificationPrompt />
             {children}
           </ToastProvider>
         </ErrorBoundary>