update

ts_web/pages/mainpage.ts

@@ -1,3 +1,45 @@
 import { html } from '@design.estate/dees-element';
 
-export const mainpage = () => html` <lele-statusbar></lele-statusbar> `;
+export const mainpage = () => html`
+  <style>
+    body {
+      margin: 0;
+      padding: 0;
+      background: #f5f5f5;
+    }
+    .demo-container {
+      min-height: 100vh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 20px;
+    }
+    .demo-section {
+      background: white;
+      border-radius: 8px;
+      padding: 40px;
+      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+      max-width: 1200px;
+      width: 100%;
+    }
+    h2 {
+      margin-bottom: 20px;
+      font-family: sans-serif;
+    }
+    .component-demo {
+      margin: 20px 0;
+      position: relative;
+      min-height: 700px;
+    }
+  </style>
+  <div class="demo-container">
+    <div class="demo-section">
+      <h2>Social.io Catalog Components</h2>
+      
+      <div class="component-demo">
+        <h3>FAB with Combox Demo</h3>
+        <sio-fab .showCombox=${true}></sio-fab>
+      </div>
+    </div>
+  </div>
+`;