fix: add pushbox

js/app.js

@@ -11,6 +11,8 @@ import './components/search-bar.js';
 import './components/site-content.js';
 import './components/site-footer.js';
 import './components/book-card.js';
+import './components/push-box.js';
+import './components/arrow-button.js';
 
 // App initialization (if needed)
 document.addEventListener('DOMContentLoaded', () => {

js/components/arrow-button.js

@@ -0,0 +1,88 @@
+/**
+ * Arrow Button Component
+ * A CTA link with a circular arrow icon
+ * Uses a slot for the button text content
+ */
+class ArrowButton 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() {
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: inline-block;
+        }
+
+        .arrow-button {
+          display: inline-flex;
+          align-items: center;
+          gap: 12px;
+          text-decoration: none;
+          color: inherit;
+          font-family: inherit;
+          font-size: inherit;
+          transition: opacity var(--transition-fast, 150ms ease);
+        }
+
+        .arrow-button:hover {
+          opacity: 0.8;
+        }
+
+        .arrow-icon {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 24px;
+          height: 24px;
+          border: 1.5px solid currentColor;
+          border-radius: 50%;
+          flex-shrink: 0;
+        }
+
+        .arrow-icon svg {
+          width: 12px;
+          height: 12px;
+          stroke: currentColor;
+          fill: none;
+        }
+
+        .button-text {
+          text-decoration: underline;
+          text-underline-offset: 3px;
+        }
+      </style>
+      <a class="arrow-button" href="${this.href}">
+        <span class="arrow-icon">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M5 12h14"></path>
+            <path d="m12 5 7 7-7 7"></path>
+          </svg>
+        </span>
+        <span class="button-text">
+          <slot></slot>
+        </span>
+      </a>
+    `;
+  }
+}
+
+customElements.define("arrow-button", ArrowButton);

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

js/components/search-bar.js

@@ -173,7 +173,7 @@ class SearchBar extends HTMLElement {
           align-items: center;
           width: 100%;
           height: 40px;
-          background-color: #FADCE7;
+          background-color: #FFF;
           border-radius: 8px;
           overflow: hidden;
         }