initial

ts_web/pages/mainpage.ts

@@ -0,0 +1,78 @@
+import { html } from '@design.estate/dees-element';
+
+// Import all components to register them
+import '../elements/index.js';
+
+export const mainPage = () => html`
+  <style>
+    .main-container {
+      max-width: 600px;
+      margin: 0 auto;
+      padding: 2rem 1rem;
+    }
+    .hero {
+      text-align: center;
+      margin-bottom: 3rem;
+    }
+    .hero h1 {
+      font-size: 2rem;
+      font-weight: 700;
+      margin: 0 0 0.5rem 0;
+      color: var(--dees-foreground);
+    }
+    .hero p {
+      color: var(--dees-muted-foreground);
+      margin: 0;
+    }
+    .demo-section {
+      margin-bottom: 2rem;
+    }
+    .demo-section h2 {
+      font-size: 1.25rem;
+      font-weight: 600;
+      margin: 0 0 1rem 0;
+      color: var(--dees-foreground);
+    }
+    .demo-grid {
+      display: grid;
+      gap: 1rem;
+    }
+  </style>
+
+  <div class="main-container">
+    <div class="hero">
+      <h1>dees-catalog-mobile</h1>
+      <p>Mobile-optimized components for cross-platform apps</p>
+    </div>
+
+    <div class="demo-section">
+      <h2>Quick Start</h2>
+      <div class="demo-grid">
+        <dees-mobile-input
+          label="Your Name"
+          placeholder="Enter your name"
+        ></dees-mobile-input>
+
+        <dees-mobile-input
+          label="Email"
+          type="email"
+          placeholder="you@example.com"
+        ></dees-mobile-input>
+
+        <dees-mobile-button variant="primary" style="width: 100%">
+          Get Started
+        </dees-mobile-button>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h2>Components</h2>
+      <div class="demo-grid">
+        <dees-mobile-button variant="outline">
+          <dees-mobile-icon icon="layout-grid" size="18"></dees-mobile-icon>
+          View All Components
+        </dees-mobile-button>
+      </div>
+    </div>
+  </div>
+`;