fix: add pushbox

js/components/push-box.js

@@ -0,0 +1,93 @@
+/**
+ * Push Box Component
+ * A promotional container with logo, title, and CTA
+ * Uses slots for all content to allow easy customization in HTML
+ */
+class PushBox extends HTMLElement {
+  static get observedAttributes() {
+    return ["background-color", "text-color"];
+  }
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  attributeChangedCallback() {
+    this.render();
+  }
+
+  get backgroundColor() {
+    return (
+      this.getAttribute("background-color") ||
+      "var(--color-push-box-bg, #EBEEF4)"
+    );
+  }
+
+  get textColor() {
+    return this.getAttribute("text-color") || "#951D51";
+  }
+
+  render() {
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+        }
+
+        .push-box {
+          background-color: ${this.backgroundColor};
+          margin-bottom: 16px;
+          padding: 48px 16px;
+          display: flex;
+          flex-direction: column;
+          gap: 16px;
+          border-radius: 4px;
+        }
+
+        .logo-wrapper {
+          display: block;
+          margin-bottom: 32px;
+        }
+
+        .logo-wrapper ::slotted(img) {
+          width: 104px;
+          height: auto;
+        }
+
+        .title-wrapper ::slotted(*) {
+          font-family: var(--font-family-outfit, "Outfit", sans-serif);
+          font-size: 24px;
+          font-weight: 700;
+          line-height: 34px;
+          color: #000000;
+          margin: 0;
+        }
+
+        .cta-wrapper {
+          color: #951D51;
+          font-family: var(--font-family-outfit, "Outfit", sans-serif);
+          font-size: 16px;
+          font-weight: 400;
+        }
+      </style>
+      <div class="push-box">
+        <div class="logo-wrapper">
+          <slot name="logo"></slot>
+        </div>
+        <div class="title-wrapper">
+          <slot name="title"></slot>
+        </div>
+        <div class="cta-wrapper">
+          <slot name="cta"></slot>
+        </div>
+      </div>
+    `;
+  }
+}
+
+customElements.define("push-box", PushBox);