fix: add category card

js/app.js

@@ -15,6 +15,8 @@ import "./components/push-box.js";
 import "./components/arrow-button.js";
 import "./components/section-title.js";
 import "./components/add-to-cart-button.js";
+import "./components/cta-button.js";
+import "./components/category-card.js";
 
 // App initialization (if needed)
 document.addEventListener("DOMContentLoaded", () => {

js/components/category-card.js

@@ -0,0 +1,112 @@
+/**
+ * Category Card Component
+ * Displays a category with an icon and title
+ * Icon is centered above the category text
+ */
+class CategoryCard extends HTMLElement {
+  static get observedAttributes() {
+    return ["title", "href", "icon"];
+  }
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  attributeChangedCallback() {
+    if (this.shadowRoot) {
+      this.render();
+    }
+  }
+
+  get title() {
+    return this.getAttribute("title") || "Category";
+  }
+
+  get href() {
+    return this.getAttribute("href") || "#";
+  }
+
+  get icon() {
+    return this.getAttribute("icon") || "";
+  }
+
+  render() {
+    const iconHtml = this.icon
+      ? `<img src="${this.icon}" alt="${this.title}" class="category-icon">`
+      : `<div class="category-icon placeholder">
+           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor">
+             <path stroke-linecap="round" stroke-linejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25ZM6.75 12h.008v.008H6.75V12Zm0 3h.008v.008H6.75V15Zm0 3h.008v.008H6.75V18Z" />
+           </svg>
+         </div>`;
+
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+        }
+
+        .card {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          color: inherit;
+          padding: var(--spacing-md, 0.875rem) var(--spacing-xs, 0.25rem);
+          text-decoration: none;
+          transition: transform var(--transition-fast, 150ms ease);
+          background-color: #F5F4FC;
+        }
+
+        .card:hover {
+          transform: translateY(-2px);
+        }
+
+        .card:active {
+          transform: translateY(0);
+        }
+
+        .category-icon {
+          width: 64px;
+          height: 64px;
+          object-fit: contain;
+          display: block;
+        }
+
+        .category-icon.placeholder {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          background-color: var(--color-background-tertiary, #f1f5f9);
+          border-radius: var(--radius-md, 0.5rem);
+          color: var(--color-text-light, #64748b);
+        }
+
+        .category-icon.placeholder svg {
+          width: 32px;
+          height: 32px;
+          opacity: 0.5;
+        }
+
+        .category-title {
+          font-family: var(--font-family-outfit, "Outfit", sans-serif);
+          font-size: var(--font-size-sm, 0.875rem); /* 14px */
+          font-weight: var(--font-weight-light, 300);
+          line-height: var(--line-height-24, 24px);
+          color: var(--color-text, #1e293b);
+          text-align: center;
+          margin: 0;
+        }
+      </style>
+      <a href="${this.href}" class="card">
+        ${iconHtml}
+        <p class="category-title">${this.title}</p>
+      </a>
+    `;
+  }
+}
+
+customElements.define("category-card", CategoryCard);

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);