changed design for notification settings

resources/views/filament/pages/notification-settings.blade.php

@@ -1,11 +1,44 @@
 <x-filament-panels::page>
-    <button
+    {{-- <button
         type="button"
         class="filament-button filament-button-primary"
         onclick="registerPush()"
     >
         Enable Push Notifications
-    </button>
+    </button> --}}
+
+    <div class="max-w-md mx-auto">
+        <x-filament::card>
+            <div class="text-center space-y-4">
+                <h2 class="text-xl font-semibold">
+                    🔔 Stay Updated
+                </h2>
+
+                <p class="text-sm text-gray-500">
+                    Enable push notifications to receive real-time alerts and updates.
+                </p>
+
+                <button
+    type="button"
+    onclick="registerPush()"
+    class="
+        filament-button
+        filament-button-primary
+        w-full
+        flex items-center justify-center gap-2
+        py-3
+        rounded-lg
+        shadow-sm
+        hover:shadow-md
+        transition
+    "
+>
+    <x-heroicon-o-bell class="w-5 h-5"/>
+    <span class="font-medium">Enable Push Notifications</span>
+</button>
+            </div>
+        </x-filament::card>
+    </div>
 
     <script>
         const vapidKey = "{{ config('webpush.vapid.public_key') }}";