@repobit/dex-system-design 0.24.18 → 0.24.20

package/src/components/header/header-code.css.js

@@ -4,6 +4,32 @@ export default css`
   :host {
     display: block;
     font-family: var(--typography-fontFamily-sans);
+    position: relative;
+    background-color: var(--color-neutral-0, #fff);
+    overflow: hidden; /* clips the ::after floor grid, which extends past the edges */
+  }
+
+  :host([variant="tint"]) {
+    background-image: radial-gradient(ellipse 900px 560px at 84% 8%, rgba(59, 130, 246, 0.16), transparent 65%);
+    background-repeat: no-repeat;
+  }
+
+  :host([variant="tint"])::after {
+    content: "";
+    position: absolute;
+    left: -20%;
+    right: -20%;
+    bottom: -38%;
+    height: 72%;
+    transform-origin: 50% 0;
+    transform: perspective(620px) rotateX(64deg);
+    background:
+      linear-gradient(#006dff1a 1px, #0000 1px) 0 0 / 100% 44px,
+      linear-gradient(90deg, #006dff1a 1px, #0000 1px) 0 0 / 44px 100%;
+    -webkit-mask-image: linear-gradient(#0000 0%, #000 45%, #0000 100%);
+    mask-image: linear-gradient(#0000 0%, #000 45%, #0000 100%);
+    pointer-events: none;
+    z-index: 0;
   }
 
   .bd-headercode-container {
@@ -15,6 +41,8 @@ export default css`
     margin: 0 auto;
     padding: var(--spacing-48) var(--layout-ensemble-inline-padding, var(--spacing-24));
     box-sizing: border-box;
+    position: relative;
+    z-index: 1;
   }
 
   /* === ENTRANCE ANIMATION === */
@@ -53,9 +81,6 @@ export default css`
     gap: var(--spacing-16);
   }
 
-  /* Slot for a small breadcrumb-style line above the eyebrow
-     (e.g. "Bitdefender AI    skill-scanner"). Empty by default —
-     collapses to nothing when no content is slotted in. */
   .bd-headercode-breadcrumb {
     display: flex;
     flex-wrap: wrap;
@@ -89,45 +114,200 @@ export default css`
   }
 
   .bd-headercode-cta {
-    display: flex;
+    display: inline-flex;
     flex-wrap: wrap;
     align-items: center;
     gap: var(--spacing-16);
     margin-top: var(--spacing-8);
   }
 
-  /* Slot for a small status badge next to the CTA buttons (e.g. "AVAILABLE").
-     Empty by default — collapses to nothing when no content is slotted in. */
   .bd-headercode-badge {
     display: inline-flex;
     align-items: center;
-    color: var(--color-neutral-500);
+    color: var(--color-neutral-600);
     font-family: var(--typography-fontFamily-mono, monospace);
     font-size: var(--typography-fontSize-xs, 12px);
     letter-spacing: 0.05em;
+    padding: var(--spacing-4, 4px) var(--spacing-12, 12px);
+    border: 1px solid var(--color-neutral-200, #e5e7eb);
+    border-radius: var(--radius-full, 999px);
+    background: var(--color-neutral-0, #fff);
   }
 
   .bd-headercode-badge:not(:has(*)) {
     display: none;
   }
 
+  .bd-headercode-meta {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+
+  .bd-headercode-meta-spec {
+    color: var(--color-neutral-500);
+    margin: 0;
+    padding-top: var(--spacing-16);
+  }
+
+  .bd-headercode-meta-facts {
+    display: grid;
+    grid-template-columns: repeat(3, auto);
+    gap: var(--spacing-8) var(--spacing-32);
+    margin-top: var(--spacing-40);
+    padding-top: var(--spacing-24);
+    border-top: 1px solid var(--color-neutral-100);
+  }
+
+  .bd-headercode-meta-fact {
+    display: flex;
+    align-items: baseline;
+    gap: var(--spacing-8, 8px);
+    white-space: nowrap;
+  }
+
+  .bd-headercode-meta-fact-label {
+    margin: 0;
+    color: var(--color-neutral-400);
+    text-transform: uppercase;
+  }
+
+  .bd-headercode-meta-fact-value {
+    margin: 0;
+    color: var(--color-neutral-900);
+  }
+
+  @media (max-width: 480px) {
+    .bd-headercode-meta-facts {
+      grid-template-columns: repeat(2, auto);
+    }
+  }
+
   /* === RIGHT COLUMN === */
   .bd-headercode-right {
     display: flex;
     flex-direction: column;
     align-items: flex-end;
     gap: var(--spacing-8);
+    position: relative;
   }
 
-  .bd-headercode-right ::slotted(*) {
+  /* === 3D SCENE === */
+  .bd-headercode-scene {
+    width: 100%;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    perspective: 1300px;
+    min-height: 400px;
+    padding: var(--spacing-16, 16px) 0;
+    margin: 0;
+    position: relative;
+  }
+
+  .bd-headercode-stack {
+    position: relative;
     width: 100%;
     max-width: 520px;
-    box-shadow: 0 1px 2px #0003,0 18px 48px #000a1e73
+    transform-style: preserve-3d;
+  }
+
+  :host([variant="tint"]) .bd-headercode-stack {
+    transform: perspective(1300px)
+      rotateY(var(--ry, -10deg))
+      rotateX(var(--rx, 6deg))
+      rotateZ(1deg);
+    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :host([variant="tint"]) .bd-headercode-stack {
+      transition: none;
+    }
+  }
+
+  .bd-headercode-right ::slotted(*) {
+    display: block;
+    width: 100%;
+    box-shadow: 0 1px 2px #0003, 0 18px 48px #000a1e73;
+    position: relative;
+    z-index: 1; /* sits above the rings */
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :host([variant="tint"]) .bd-headercode-stack {
+      transform: none;
+    }
   }
 
   .bd-headercode-terminal-caption {
     color: var(--color-neutral-500);
     margin: 0;
+    position: relative;
+    z-index: 1;
+  }
+
+  .bd-headercode-rings {
+    position: absolute;
+    inset: 0;
+    transform-style: preserve-3d;
+    pointer-events: none;
+    z-index: 0;
+  }
+
+  .bd-headercode-ring {
+    position: absolute;
+    inset: 0;
+    border-radius: 28px;
+    border: 1.5px solid rgba(0, 109, 255, calc(0.5 - var(--d) * 0.08));
+    background: rgba(0, 109, 255, calc(0.05 - var(--d) * 0.008));
+    box-shadow: 0 0 26px rgba(0, 109, 255, calc(0.16 - var(--d) * 0.025));
+    animation: bd-headercode-ring-breathe 6s ease-in-out calc(var(--d) * -1.2s) infinite;
+    transform: translate(calc(var(--d) * 10px), calc(var(--d) * 8px));
+  }
+
+  @keyframes bd-headercode-ring-breathe {
+    0%, 100% {
+      opacity: 0.85;
+    }
+    50% {
+      opacity: 0.45;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .bd-headercode-ring {
+      animation: none;
+    }
+  }
+
+  /* === FLOATING ANNOTATION PILLS === */
+  .bd-headercode-annotation {
+    position: absolute;
+    z-index: 2;
+    pointer-events: none;
+  }
+
+  .bd-headercode-annotation--top {
+    top: -14px;
+    right: 32px;
+  }
+
+  .bd-headercode-annotation--bottom {
+    bottom: -14px;
+    left: 16px;
+    right: auto;
+  }
+
+  .bd-headercode-annotation:not(:has(*)) {
+    display: none;
+  }
+
+  .bd-headercode-annotation ::slotted(*) {
+    width: auto;
+    max-width: none;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+    pointer-events: auto;
   }
 
   /* === RESPONSIVE === */
@@ -142,12 +322,30 @@ export default css`
       align-items: stretch;
     }
 
-    .bd-headercode-right ::slotted(*) {
+    .bd-headercode-scene {
+      min-height: 0;
+      perspective: none;
+      justify-content: stretch;
+    }
+
+    .bd-headercode-stack {
       max-width: none;
     }
 
+    :host([variant="tint"]) .bd-headercode-stack {
+      transform: none;
+    }
+
+    .bd-headercode-rings {
+      display: none;
+    }
+
     .bd-headercode-description {
       max-width: none;
     }
+
+    .bd-headercode-annotation {
+      display: none;
+    }
   }
 `;

package/src/components/header/header-code.js

@@ -11,7 +11,11 @@ class HeaderCode extends LitElement {
     eyebrow        : { type: String },
     title          : { type: String },
     description    : { type: String },
-    terminalCaption: { type: String, attribute: "terminal-caption" }
+    terminalCaption: { type: String, attribute: "terminal-caption" },
+    variant        : { type: String, reflect: true },
+    metaSpec       : { type: String, attribute: "meta-spec" },
+    metaFacts      : { type: Array },
+    _hasBadge      : { state: true }
   };
 
   static styles = [tokens, headerCodeCSS];
@@ -22,6 +26,131 @@ class HeaderCode extends LitElement {
     this.title = "";
     this.description = "";
     this.terminalCaption = "";
+    this.variant = "default";
+    this.metaSpec = "";
+    this.metaFacts = [];
+    this._hasBadge = false;
+
+    this._scene = null;
+    this._onPointerMove = this._onPointerMove.bind(this);
+    this._onPointerLeave = this._onPointerLeave.bind(this);
+  }
+
+  firstUpdated() {
+    this._bindScene();
+  }
+
+  updated(changed) {
+    if (changed.has("variant")) this._bindScene();
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._unbindScene();
+  }
+
+  _bindScene() {
+    this._unbindScene();
+    if (this.variant !== "tint") return;
+
+    this._scene = this.shadowRoot?.querySelector(".bd-headercode-scene") || null;
+    if (!this._scene) return;
+
+    this._scene.addEventListener("pointermove", this._onPointerMove);
+    this._scene.addEventListener("pointerleave", this._onPointerLeave);
+  }
+
+  _unbindScene() {
+    if (!this._scene) return;
+    this._scene.removeEventListener("pointermove", this._onPointerMove);
+    this._scene.removeEventListener("pointerleave", this._onPointerLeave);
+    this._scene = null;
+  }
+
+  _onPointerMove(event) {
+    const rect = this._scene.getBoundingClientRect();
+    const px = (event.clientX - rect.left) / rect.width - 0.5;
+    const py = (event.clientY - rect.top) / rect.height - 0.5;
+
+    const ry = px * 18; // deg
+    const rx = -py * 12; // deg
+
+    this.style.setProperty("--rx", `${rx.toFixed(2)}deg`);
+    this.style.setProperty("--ry", `${ry.toFixed(2)}deg`);
+  }
+
+  _onPointerLeave() {
+    this.style.removeProperty("--rx");
+    this.style.removeProperty("--ry");
+  }
+
+  _onBadgeSlotChange(event) {
+    this._hasBadge = event.target.assignedNodes({ flatten: true }).length > 0;
+  }
+
+
+  _renderRings() {
+    if (this.variant !== "tint") return nothing;
+
+    return html`
+      <div class="bd-headercode-rings" aria-hidden="true">
+        <span class="bd-headercode-ring" style="--d:1"></span>
+        <span class="bd-headercode-ring" style="--d:2"></span>
+        <span class="bd-headercode-ring" style="--d:3"></span>
+        <span class="bd-headercode-ring" style="--d:4"></span>
+        <span class="bd-headercode-ring" style="--d:5"></span>
+      </div>
+    `;
+  }
+
+  _renderBadge() {
+    const badgeSlot = html`<slot name="badge" @slotchange=${this._onBadgeSlotChange}></slot>`;
+
+    return this._hasBadge
+      ? html`<span class="bd-headercode-badge">${badgeSlot}</span>`
+      : html`<span class="bd-headercode-badge-slot-holder" hidden>${badgeSlot}</span>`;
+  }
+
+  _renderMeta() {
+    const hasSpec = !!this.metaSpec;
+    const hasFacts = this.metaFacts && this.metaFacts.length > 0;
+
+    if (!hasSpec && !hasFacts) return nothing;
+
+    const monoFontFamily = "'IBM Plex Mono', ui-monospace, SFMono-Regular, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace";
+
+    return html`
+      <div class="bd-headercode-meta">
+        ${hasSpec
+          ? html`<bd-p
+              kind="xsmall"
+              class="bd-headercode-meta-spec"
+              font-family=${monoFontFamily}
+              letter-spacing=".1em"
+            >${this.metaSpec}</bd-p>`
+          : nothing}
+
+        ${hasFacts
+          ? html`
+              <div class="bd-headercode-meta-facts">
+                ${this.metaFacts.map(
+                  (fact) => html`
+                    <div class="bd-headercode-meta-fact">
+                      <bd-p
+                        kind="xsmall"
+                        class="bd-headercode-meta-fact-label"
+                        font-family=${monoFontFamily}
+                        letter-spacing=".1em"
+                      >${fact.label}</bd-p>
+                      <bd-p kind="regular" font-weight="700" class="bd-headercode-meta-fact-value">${fact.value}</bd-p>
+                    </div>
+                  `
+                )}
+              </div>
+            `
+          : nothing}
+      </div>
+    `;
   }
 
   render() {
@@ -47,14 +176,28 @@ class HeaderCode extends LitElement {
           <div class="bd-headercode-cta">
             <slot name="primary-button"></slot>
             <slot name="secondary-button"></slot>
-            <span class="bd-headercode-badge">
-              <slot name="badge"></slot>
-            </span>
+            ${this._renderBadge()}
           </div>
+
+          ${this._renderMeta()}
         </div>
 
         <div class="bd-headercode-right">
-          <slot name="terminal-content"></slot>
+          <div class="bd-headercode-annotation bd-headercode-annotation--top">
+            <slot name="annotation-top"></slot>
+          </div>
+
+
+          <div class="bd-headercode-scene">
+            <div class="bd-headercode-stack">
+              ${this._renderRings()}
+              <slot name="terminal-content"></slot>
+            </div>
+          </div>
+
+          <div class="bd-headercode-annotation bd-headercode-annotation--bottom">
+            <slot name="annotation-bottom"></slot>
+          </div>
 
           ${this.terminalCaption
             ? html`<bd-p kind="small" class="bd-headercode-terminal-caption" font-family="'IBM Plex Mono', ui-monospace, SFMono-Regular, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace"

package/src/components/header/header-code.stories.js

@@ -14,53 +14,51 @@ export default {
         component: `
 **HeaderCode** is a hero/header variant pairing marketing copy on the left with a
 terminal-style code/demo window on the right. Unlike \`bd-header\`, it has no pricing —
-just eyebrow, title, description, two CTA buttons, and a slotted terminal.
+just eyebrow, title, description, two CTA buttons, an optional meta row, and a slotted terminal.
 
 The terminal window — including the traffic-light titlebar dots — is owned by
 \`<bd-terminal-message>\`. \`bd-header-code\` additionally renders an optional small
 caption **below** the terminal box via \`terminal-caption\`.
 
+\`variant="tint"\` swaps the plain white background for a light-blue gradient with a
+dot-grid pattern, and gives the \`badge\` slot a bordered pill treatment.
+
 ### Usage
 \`\`\`html
 <bd-header-code
-  eyebrow="Security for autonomous AI agents"
-  title="Bitdefender AI Guardian"
-  description="A security layer between your AI agents and the actions they take."
-  terminal-caption="AI Guardian CLI · first-run setup"
+  variant="tint"
+  eyebrow="Privacy for autonomous AI agents"
+  title="Bitdefender VPN for AI Agents"
+  description="Each prompt gets a fresh, disposable container scoped to a specific location."
+  terminal-caption="// illustrative — every connection closes when the prompt ends"
 >
-  <bd-button-link slot="primary-button" label="Download BETA Today" kind="primary">Download BETA Today</bd-button-link>
+  <span slot="badge">EXTERNAL BETA</span>
+  <bd-button-link slot="primary-button" label="Download for macOS" kind="primary">Download for macOS</bd-button-link>
   <bd-button-link slot="secondary-button" label="See how it works" kind="outline">See how it works</bd-button-link>
 
-  <bd-terminal-message
-    slot="terminal-content"
-    show-titlebar
-    panel-label="Welcome"
-    icon="👋"
-    greeting="Hi, I'm AI Guardian."
-    intro="I keep an eye on what your AI assistant can access and do:"
-    .items=\${["which tools it can use", "which credentials to watch", "which MCP servers to trust"]}
-    footer-bold="Let's get started."
-    footer="It only takes a minute, and nothing changes until you confirm it."
-    show-cursor
-    hint="[Enter] to continue · [esc] to cancel"
-  ></bd-terminal-message>
+  <div slot="meta">…facts row…</div>
+
+  <bd-terminal-message slot="terminal-content" show-titlebar></bd-terminal-message>
 </bd-header-code>
 \`\`\`
 
 ### Attributes
-| Attribute          | Type   | Default | Description                                       |
-|----------------------|--------|---------|-----------------------------------------------------|
-| \`eyebrow\`            | String | \`""\`    | Small label above the title                        |
-| \`title\`              | String | \`""\`    | Main heading (can be overridden via \`title\` slot) |
-| \`description\`        | String | \`""\`    | Supporting paragraph under the title               |
-| \`terminal-caption\`   | String | \`""\`    | Small caption rendered below the terminal box       |
+| Attribute          | Type   | Default     | Description                                          |
+|----------------------|--------|--------------|---------------------------------------------------------|
+| \`eyebrow\`            | String | \`""\`         | Small label above the title                            |
+| \`title\`              | String | \`""\`         | Main heading (can be overridden via \`title\` slot)     |
+| \`description\`        | String | \`""\`         | Supporting paragraph under the title                    |
+| \`terminal-caption\`   | String | \`""\`         | Small caption rendered below the terminal box           |
+| \`variant\`            | String | \`"default"\`  | \`"default"\` or \`"tint"\` — background treatment       |
 
 ### Slots
 | Slot               | Description                                  |
 |---------------------|-----------------------------------------------|
 | \`title\`             | Overrides the \`title\` attribute if content is provided |
+| \`badge\`             | Small pill badge next to the CTAs (e.g. "AVAILABLE", "EXTERNAL BETA") |
 | \`primary-button\`    | The main CTA (typically \`bd-button-link\`)    |
 | \`secondary-button\`  | The secondary CTA                             |
+| \`meta\`              | Freeform row under the CTAs — spec line, facts list, etc. |
 | \`terminal-content\`  | Freeform content rendered on the right (typically a \`bd-terminal-message\`) |
         `
       }
@@ -70,7 +68,8 @@ caption **below** the terminal box via \`terminal-caption\`.
     eyebrow        : { control: "text", table: { category: "Content" } },
     title          : { control: "text", table: { category: "Content" } },
     description    : { control: "text", table: { category: "Content" } },
-    terminalCaption: { control: "text", table: { category: "Terminal" } }
+    terminalCaption: { control: "text", table: { category: "Terminal" } },
+    variant        : { control: { type: "select" }, options: ["default", "tint"], table: { category: "Appearance" } }
   }
 };
 
@@ -92,6 +91,7 @@ const terminalContent = html`
 
 const render = (args) => html`
   <bd-header-code
+    variant=${args.variant}
     eyebrow=${args.eyebrow}
     title=${args.title}
     description=${args.description}
@@ -122,6 +122,7 @@ const render = (args) => html`
 export const Default = {
   name: "Default — AI Guardian",
   args: {
+    variant        : "default",
     eyebrow        : "Security for autonomous AI agents",
     title          : "Bitdefender AI Guardian",
     description    : "A security layer between your AI agents and the actions they take — policies, guardrails, and monitoring that let agents run safely.",
@@ -137,9 +138,60 @@ export const Default = {
   }
 };
 
+export const TintVariant = {
+  name: "Tint Variant — VPN",
+  args: {
+    variant        : "tint",
+    eyebrow        : "Privacy for autonomous AI agents",
+    title          : "Bitdefender VPN for AI Agents",
+    description    : "Each prompt gets a fresh, disposable container scoped to a specific location, so your agent's traffic isn't tied to your home connection or your personal IP.",
+    terminalCaption: "// illustrative — every connection closes when the prompt ends"
+  },
+  render: (args) => html`
+    <bd-header-code
+      variant=${args.variant}
+      eyebrow=${args.eyebrow}
+      title=${args.title}
+      description=${args.description}
+      terminal-caption=${args.terminalCaption}
+    >
+      <span slot="breadcrumb">Bitdefender AI</span>
+      <span slot="breadcrumb">vpn-for-agents</span>
+
+      <bd-button-link slot="primary-button" label="Download for macOS" kind="primary" size="md" font-size="18px" font-weight="600">Download for macOS</bd-button-link>
+      <bd-button-link slot="secondary-button" label="See how it works" kind="primary-outline" size="md" font-size="18px" font-weight="600">See how it works</bd-button-link>
+      <span slot="badge">EXTERNAL BETA</span>
+
+      <bd-terminal-message
+        slot="terminal-content"
+        show-titlebar
+        .lines=${[
+          { type: "strong", text: "VPN for AI Agents · connection log" },
+          { type: "sep" },
+          { type: "dim", text: "MCP      vpn_connect(location: frankfurt)               [Open]" },
+          { type: "dim", text: "REQUEST  agent reaches insurer-compare.com          [Server IP]" },
+          { type: "dim", text: "NETWORK  hotel Wi-Fi, unencrypted                    [Protected]" },
+          { type: "dim", text: "MCP      vpn_safefetch(location: frankfurt, url:" },
+          { type: "dim", text: "         insurer-compare.com)                        [Scanned]" },
+          { type: "dim", text: "MCP      vpn_disconnect(location: frankfurt)" },
+          { type: "dim", text: "         — prompt ends              [Closed, session cleared]" }
+        ]}
+      ></bd-terminal-message>
+    </bd-header-code>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: "`variant=\"tint\"` swaps the plain background for the light-blue gradient + dot-grid treatment, and the badge slot renders as a bordered pill. The floating annotation callouts seen in the reference design (\"exit: frankfurt · server IP\", \"tunnel closed — session cleared\") aren't reproduced here — they'd need to be a feature of `bd-terminal-message` itself, which isn't in scope for `bd-header-code`."
+      }
+    }
+  }
+};
+
 export const NoEyebrow = {
   name: "No Eyebrow",
   args: {
+    variant        : "default",
     eyebrow        : "",
     title          : "Bitdefender AI Guardian",
     description    : "A security layer between your AI agents and the actions they take.",
@@ -158,6 +210,7 @@ export const NoEyebrow = {
 export const SingleButton = {
   name: "Single CTA",
   args: {
+    variant        : "default",
     eyebrow        : "Security for autonomous AI agents",
     title          : "Bitdefender AI Guardian",
     description    : "A security layer between your AI agents and the actions they take.",
@@ -165,6 +218,7 @@ export const SingleButton = {
   },
   render: (args) => html`
     <bd-header-code
+      variant=${args.variant}
       eyebrow=${args.eyebrow}
       title=${args.title}
       description=${args.description}
@@ -192,6 +246,7 @@ export const SingleButton = {
 export const NoCaption = {
   name: "No Caption",
   args: {
+    variant        : "default",
     eyebrow        : "Security for autonomous AI agents",
     title          : "Bitdefender AI Guardian",
     description    : "A security layer between your AI agents and the actions they take.",
@@ -210,6 +265,7 @@ export const NoCaption = {
 export const Playground = {
   name: "Playground",
   args: {
+    variant        : "default",
     eyebrow        : "Security for autonomous AI agents",
     title          : "Bitdefender AI Guardian",
     description    : "A security layer between your AI agents and the actions they take — policies, guardrails, and monitoring that let agents run safely.",
@@ -219,7 +275,7 @@ export const Playground = {
   parameters: {
     docs: {
       description: {
-        story: "Fully interactive story — use the Controls panel to edit eyebrow, title, description, and terminal caption live."
+        story: "Fully interactive story — use the Controls panel to edit eyebrow, title, description, variant, and terminal caption live."
       }
     }
   }

package/src/components/page-switcher/page-switcher.js

@@ -19,7 +19,7 @@ class BdPageSwitcher extends LitElement {
   render() {
     return html`
       <div class="inner">
-        <bd-ai-icon class="logo" width="126" height="24"></bd-ai-icon>
+        <bd-ai-icon class="logo" width="200" height="24"></bd-ai-icon>
 
         <nav aria-label="Product navigation">
           ${this.items.map(({ title, href, active }) => html`