Put inline some detail pages

Author: stvncode

src-11ty/vpe/index.njk

@@ -5,6 +5,93 @@ description: Home Assistant Voice Preview Edition - Local voice control for your
 permalink: /vpe/index.html
 ---
 
-<script type="module" src="/src/pages/vpe-details.ts"></script>
+<script type="module" src="/src/components/details.ts"></script>
+<script type="module" src="/src/components/action-item.ts"></script>
 
-<vpe-details></vpe-details>
+<style>
+    p[slot='subtitle'] {
+      color: var(--wa-color-brand-50);
+      font-size: 1.1rem;
+      font-weight: 500;
+      margin: 0 0 10px 0;
+    }
+
+    p[slot='description'] {
+      color: var(--app-text-secondary);
+      line-height: 1.6;
+      margin: 0;
+      font-size: 1.05rem;
+    }
+    
+     h3 {
+      margin: 0 0 6px 0;
+      color: var(--app-text-primary);
+      font-size: 1rem;
+      font-weight: 600;
+    }
+</style>
+
+<details-page>
+        <span slot="title">Home Assistant Voice Preview Edition</span>
+        <p slot="subtitle">Local voice control for your smart home</p>
+        <p slot="description">
+          Experience the future of voice control with complete local processing.
+          The Voice Preview Edition brings fast, private voice commands to your
+          smart home without sending data to the cloud.
+        </p>
+
+        <div slot="actions">
+          <action-item
+            href="/vpe/install"
+            icon="/svgs/install.svg"
+            trailing-icon="/svgs/chevron-right.svg"
+          >
+            <h3>Install firmware</h3>
+            <p>Flash the latest Voice PE firmware</p>
+          </action-item>
+
+          <action-item
+            href="https://www.home-assistant.io/voice_control/"
+            icon="/svgs/doc.svg"
+          >
+            <h3>Voice control in Home Assistant</h3>
+            <p>
+              Complete guide to setting up voice control, wake words, and
+              commands
+            </p>
+          </action-item>
+
+          <action-item
+            href="https://support.nabucasa.com/hc/en-us/categories/24451727188125-Home-Assistant-Voice-Preview-Edition"
+            icon="/svgs/doc.svg"
+          >
+            <h3>Documentation</h3>
+            <p>
+              Complete documentation, troubleshooting guides, and technical
+              specifications
+            </p>
+          </action-item>
+
+          <action-item
+            href="https://www.home-assistant.io/voice-pe/"
+            icon="/svgs/product.svg"
+          >
+            <h3>Product info</h3>
+            <p>
+              Learn about Voice PE features, hardware specifications, and where
+              to buy
+            </p>
+          </action-item>
+
+          <action-item
+            href="https://github.com/esphome/home-assistant-voice-pe"
+            icon="/svgs/github.svg"
+          >
+            <h3>Source code</h3>
+            <p>
+              View the open-source Voice PE firmware code and contribute to
+              development
+            </p>
+          </action-item>
+        </div>
+      </details-page>

src-11ty/zbt1/index.njk

@@ -5,6 +5,78 @@ description: Update firmware for your Connect ZBT-1 adapter
 permalink: /zbt1/index.html
 ---
 
-<script type="module" src="/src/pages/zbt1-details.ts"></script>
+<script type="module" src="/src/components/details.ts"></script>
+<script type="module" src="/src/components/action-item.ts"></script>
 
-<zbt1-details></zbt1-details>
+<style>
+    p[slot='subtitle'] {
+      color: var(--wa-color-brand-50);
+      font-size: 1.1rem;
+      font-weight: 500;
+      margin: 0 0 10px 0;
+    }
+
+    p[slot='description'] {
+      color: var(--app-text-secondary);
+      line-height: 1.6;
+      margin: 0;
+      font-size: 1.05rem;
+    }
+    
+     h3 {
+      margin: 0 0 6px 0;
+      color: var(--app-text-primary);
+      font-size: 1rem;
+      font-weight: 600;
+    }
+</style>
+
+ <details-page>
+        <span slot="title">Home Assistant Connect ZBT-1</span>
+        <p slot="subtitle">Zigbee 3.0 USB adapter</p>
+        <p slot="description">
+          The Home Assistant Connect ZBT-1 (formerly SkyConnect) is a powerful
+          Zigbee 3.0 USB adapter that connects your Zigbee devices to Home
+          Assistant. Easy setup, reliable performance, and seamless integration.
+        </p>
+
+        <div slot="actions">
+          <action-item
+            href="/zbt1/install"
+            icon="/svgs/install.svg"
+            trailing-icon="/svgs/chevron-right.svg"
+          >
+            <h3>Install firmware</h3>
+            <p>Update your ZBT-1 with the latest Zigbee or Thread firmware</p>
+          </action-item>
+          <action-item
+            href="https://support.nabucasa.com/hc/en-us/categories/24734620813469"
+            icon="/svgs/doc.svg"
+          >
+            <h3>Documentation</h3>
+            <p>
+              Complete documentation, troubleshooting guides, and technical
+              specifications
+            </p>
+          </action-item>
+
+          <action-item
+            href="https://www.home-assistant.io/connectzbt1"
+            icon="/svgs/product.svg"
+          >
+            <h3>Product info</h3>
+            <p>
+              Learn more about Connect ZBT-1 product features, specifications,
+              and where to buy
+            </p>
+          </action-item>
+
+          <action-item
+            href="https://github.com/NabuCasa/silabs-firmware-builder"
+            icon="/svgs/github.svg"
+          >
+            <h3>Source code</h3>
+            <p>View the open-source firmware code</p>
+          </action-item>
+        </div>
+      </details-page>