refactor: Update LoginDemo layout and styling for improved user experience

- Adjust spacing and layout in the LoginDemo component for better visual hierarchy.
- Enhance demo account creation section with clearer labels and a demo notice.
- Update button text to reflect demo account creation instead of fake account.
- Clean up unused imports and streamline the component structure.

src/components/demo/DemoAccountCreator.vue

@@ -137,3 +137,4 @@ async function createFakeAccount() {
   }
 }
 </script>
+

src/pages/LoginDemo.vue

@@ -2,74 +2,84 @@
   <div class="min-h-screen flex items-center justify-center px-4 sm:px-6 lg:px-8 xl:px-12 2xl:px-16 py-8">
     <div class="flex flex-col items-center justify-center space-y-8 max-w-4xl mx-auto w-full">
       <!-- Welcome Section -->
-      <div class="text-center space-y-4">
+      <div class="text-center space-y-6">
         <div class="flex justify-center">
           <img src="@/assets/logo.png" alt="Logo" class="h-36 w-36 sm:h-48 sm:w-48 md:h-60 md:w-60" />
         </div>
-        <h1 class="text-4xl font-bold tracking-tight">Welcome to the Virtual Realm</h1>
+        <div class="space-y-4">
-        <p class="text-xl text-muted-foreground max-w-md">
+          <h1 class="text-4xl font-bold tracking-tight">Welcome to the Virtual Realm</h1>
-          Your secure platform for events and community management
+          <p class="text-xl text-muted-foreground max-w-md mx-auto">
-        </p>
+            Your secure platform for events and community management
-        <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4 max-w-md mx-auto">
-          <p class="text-sm text-yellow-800">
-            <strong>Demo Mode:</strong> Click the button below to create a fake account for testing purposes.
           </p>
         </div>
       </div>
 
       <!-- Demo Account Creation Card -->
       <Card class="w-full max-w-md">
-        <CardHeader>
+        <CardContent class="p-8 space-y-6">
-          <CardTitle class="text-center">Demo Account Creation</CardTitle>
+          <!-- Demo Badge -->
-          <CardDescription class="text-center">
+          <div class="flex justify-center">
-            Create a fake account with auto-generated credentials for testing
+            <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-yellow-100 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800">
-          </CardDescription>
+              <div class="w-2 h-2 bg-yellow-500 rounded-full animate-pulse"></div>
-        </CardHeader>
+              <span class="text-sm font-medium text-yellow-800 dark:text-yellow-200">Demo Mode</span>
-        <CardContent class="space-y-6">
+            </div>
+          </div>
+
+          <!-- Demo Info -->
+          <div class="text-center space-y-3">
+            <h2 class="text-2xl font-semibold">Create Demo Account</h2>
+            <p class="text-muted-foreground text-sm leading-relaxed">
+              Get instant access with a pre-funded demo account containing 
+              <span class="font-semibold text-green-600 dark:text-green-400">1,000,000 FAKE satoshis</span>
+            </p>
+          </div>
+
           <!-- Generated Credentials Display -->
-          <div v-if="generatedCredentials" class="space-y-4 p-4 bg-gray-50 rounded-lg">
+          <div v-if="generatedCredentials" class="space-y-4 p-4 bg-muted/50 rounded-lg border">
-            <div class="space-y-2">
+            <div class="space-y-3">
-              <Label class="text-sm font-medium text-gray-700">Generated Username:</Label>
+              <div class="space-y-2">
-              <div class="flex items-center gap-2">
+                <Label class="text-sm font-medium">Username</Label>
-                <Input :value="generatedCredentials.username" readonly class="font-mono text-sm" />
+                <div class="flex items-center gap-2">
-                <Button 
+                  <Input :value="generatedCredentials.username" readonly class="font-mono text-sm" />
-                  variant="outline" 
+                  <Button 
-                  size="sm" 
+                    variant="outline" 
-                  @click="copyToClipboard(generatedCredentials.username)"
+                    size="sm" 
-                  class="shrink-0"
+                    @click="copyToClipboard(generatedCredentials.username)"
-                >
+                    class="shrink-0"
-                  Copy
+                  >
-                </Button>
+                    Copy
+                  </Button>
+                </div>
+              </div>
+              <div class="space-y-2">
+                <Label class="text-sm font-medium">Password</Label>
+                <div class="flex items-center gap-2">
+                  <Input :value="generatedCredentials.password" readonly class="font-mono text-sm" />
+                  <Button 
+                    variant="outline" 
+                    size="sm" 
+                    @click="copyToClipboard(generatedCredentials.password)"
+                    class="shrink-0"
+                  >
+                    Copy
+                  </Button>
+                </div>
               </div>
             </div>
-            <div class="space-y-2">
+            <div class="text-xs text-muted-foreground text-center">
-              <Label class="text-sm font-medium text-gray-700">Generated Password:</Label>
-              <div class="flex items-center gap-2">
-                <Input :value="generatedCredentials.password" readonly class="font-mono text-sm" />
-                <Button 
-                  variant="outline" 
-                  size="sm" 
-                  @click="copyToClipboard(generatedCredentials.password)"
-                  class="shrink-0"
-                >
-                  Copy
-                </Button>
-              </div>
-            </div>
-            <div class="text-xs text-gray-500 text-center">
               These credentials will be used to automatically log you in
             </div>
           </div>
 
-          <!-- Create Fake Account Button -->
+          <!-- Create Account Button -->
           <Button 
             @click="createFakeAccount" 
             :disabled="isLoading" 
-            class="w-full"
+            class="w-full h-12 text-lg font-medium"
             size="lg"
           >
             <span v-if="isLoading" class="animate-spin mr-2">⚡</span>
-            {{ isLoading ? 'Creating Account...' : 'Create Fake Account' }}
+            {{ isLoading ? 'Creating Demo Account...' : 'Create Demo Account' }}
           </Button>
 
           <!-- Error Display -->
@@ -78,9 +88,16 @@
           </p>
 
           <!-- Success Message -->
-          <div v-if="successMessage" class="text-sm text-green-600 text-center bg-green-50 p-3 rounded-lg">
+          <div v-if="successMessage" class="text-sm text-green-600 dark:text-green-400 text-center bg-green-50 dark:bg-green-950/20 p-3 rounded-lg border border-green-200 dark:border-green-800">
             {{ successMessage }}
           </div>
+
+          <!-- Demo Notice -->
+          <div class="text-center">
+            <p class="text-xs text-muted-foreground">
+              This is a demo environment. All transactions use fake satoshis for testing purposes.
+            </p>
+          </div>
         </CardContent>
       </Card>
     </div>
@@ -90,7 +107,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Card, CardContent } from '@/components/ui/card'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'