fix: add category card

js/components/cta-button.js

@@ -0,0 +1,85 @@
+/**
+ * CTA Button Component
+ * Full-width purple button with white underlined text
+ */
+class CtaButton extends HTMLElement {
+  static get observedAttributes() {
+    return ["href"];
+  }
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  attributeChangedCallback() {
+    this.render();
+  }
+
+  get href() {
+    return this.getAttribute("href") || "#";
+  }
+
+  render() {
+    const isLink = this.hasAttribute("href");
+    const tag = isLink ? "a" : "button";
+    const hrefAttr = isLink ? `href="${this.href}"` : "";
+
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          width: 100%;
+        }
+
+        .cta-button {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 100%;
+          height: 48px;
+          padding: 0;
+          background-color: var(--color-button-primary, #951d51);
+          border: none;
+          border-radius: var(--radius-sm, 0.25rem);
+          color: var(--color-text-inverse, #ffffff);
+          font-family: inherit;
+          font-size: 16px;
+          line-height: 24px;
+          text-decoration: underline;
+          text-underline-offset: 3px;
+          cursor: pointer;
+          transition: opacity var(--transition-fast, 150ms ease);
+        }
+
+        .cta-button:hover {
+          opacity: 0.9;
+        }
+
+        .cta-button:active {
+          opacity: 0.8;
+        }
+
+        a.cta-button {
+          text-decoration: none;
+        }
+
+        a.cta-button .button-text {
+          text-decoration: underline;
+          text-underline-offset: 3px;
+        }
+      </style>
+      <${tag} class="cta-button" ${hrefAttr} type="${isLink ? "" : "button"}">
+        <span class="button-text">
+          <slot></slot>
+        </span>
+      </${tag}>
+    `;
+  }
+}
+
+customElements.define("cta-button", CtaButton);