feat: Enhance demo components with improved layout, styling, and functionality for login and dashboard views

ts_web/elements/dees-simple-login.demo.ts

@@ -1,3 +1,31 @@
 import { html } from '@design.estate/dees-element';
 
-export const demoFunc = () => html` <dees-simple-login name="someapp"> Hello there </dees-simple-login> `;
+export const demoFunc = () => html`
+  <style>
+    body {
+      margin: 0;
+      padding: 0;
+    }
+    .demo-container {
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+  </style>
+  <div class="demo-container">
+    <dees-simple-login 
+      name="My Application"
+      @login=${(e: CustomEvent) => {
+        console.log('Login event received:', e.detail);
+        alert(`Login attempted with:\nUsername: ${e.detail.formData.username}\nPassword: ${e.detail.formData.password}`);
+      }}
+    >
+      <div style="padding: 40px; text-align: center;">
+        <h1>Welcome!</h1>
+        <p>This is the slotted content that appears after login.</p>
+      </div>
+    </dees-simple-login>
+  </div>
+`;