From 95ffd84aeb8d8c546d7d753456f7d89b89432ebd Mon Sep 17 00:00:00 2001
From: Tim Rijkse <trijkse@gmail.com>
Date: Fri, 16 Jan 2026 10:37:43 +0100
Subject: [PATCH] fix: purple pushbox

---
 book.html                     |  6 +++---
 js/components/content-tabs.js | 28 ++++++++++++++--------------
 js/components/push-box.js     | 28 +++++++++++++++++++++++++---
 3 files changed, 42 insertions(+), 20 deletions(-)

diff --git a/book.html b/book.html
index 074f300..711493d 100644
--- a/book.html
+++ b/book.html
@@ -132,10 +132,10 @@
         </section>
 
         <div class="content-padding">
-          <push-box>
+          <push-box variant="purple">
             <h2 slot="title">
-              Gespecialiseerd op het vlak van boeddhisme en aanverwante
-              Oost-West thema's
+              Kom je er niet uit of heb je een vraag? Neem contact op met de
+              klantenservice.
             </h2>
             <div slot="cta" class="cta-buttons">
               <arrow-button href="#">Klantenservice</arrow-button>
diff --git a/js/components/content-tabs.js b/js/components/content-tabs.js
index 85080a7..15cff59 100644
--- a/js/components/content-tabs.js
+++ b/js/components/content-tabs.js
@@ -74,6 +74,7 @@ class ContentTabs extends HTMLElement {
       <style>
         :host {
           display: block;
+          margin: var(--spacing-xl, 2rem) 0;
         }
 
         .tabs-container {
@@ -83,15 +84,18 @@ class ContentTabs extends HTMLElement {
 
         .tab-list {
           display: flex;
-          gap: var(--spacing-lg, 1.5rem);
+          gap: var(--spacing-md, 1rem);
+          margin-top: var(--spacing-lg, 1.5rem);
           border-bottom: 1px solid var(--color-border, #e2e8f0);
-          margin-bottom: var(--spacing-md, 1rem);
         }
 
         .tab-button {
-          padding: var(--spacing-sm, 0.5rem) 0;
-          background: none;
+          padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
+          background: transparent;
           border: none;
+          border-radius: 4px;
+          border-bottom-left-radius: 0;
+          border-bottom-right-radius: 0;
           font-family: var(--font-family-outfit, "Outfit", sans-serif);
           font-size: 16px;
           font-weight: 400;
@@ -100,28 +104,24 @@ class ContentTabs extends HTMLElement {
           text-decoration: underline;
           text-underline-offset: 3px;
           cursor: pointer;
-          transition: opacity var(--transition-fast, 150ms ease);
-          position: relative;
-        }
-
-        .tab-button:first-child {
-          color: var(--color-text, #1e293b);
-          text-decoration: none;
-          font-weight: 400;
+          transition: all var(--transition-fast, 150ms ease);
         }
 
         .tab-button.active {
+          background: var(--color-border, #e2e8f0);
           color: var(--color-text, #1e293b);
           text-decoration: none;
-          font-weight: 400;
         }
 
-        .tab-button:hover {
+        .tab-button:not(.active):hover {
           opacity: 0.7;
         }
 
         .tab-panels {
           min-height: 100px;
+          background: var(--color-border, #e2e8f0);
+          padding: var(--spacing-lg, 1.5rem) var(--spacing-md, 1rem);
+          border-radius: var(--radius-sm, 0.25rem);
         }
       </style>
       <div class="tabs-container">
diff --git a/js/components/push-box.js b/js/components/push-box.js
index fe9dfa6..1eb0a66 100644
--- a/js/components/push-box.js
+++ b/js/components/push-box.js
@@ -2,10 +2,11 @@
  * Push Box Component
  * A promotional container with logo, title, and CTA
  * Uses slots for all content to allow easy customization in HTML
+ * Supports variant="purple" for purple background with white content
  */
 class PushBox extends HTMLElement {
   static get observedAttributes() {
-    return ["background-color", "text-color"];
+    return ["background-color", "text-color", "variant"];
   }
 
   constructor() {
@@ -48,7 +49,18 @@ class PushBox extends HTMLElement {
     }
   }
 
+  get variant() {
+    return this.getAttribute("variant") || "default";
+  }
+
+  get isPurple() {
+    return this.variant === "purple";
+  }
+
   get backgroundColor() {
+    if (this.isPurple) {
+      return "#951D51";
+    }
     return (
       this.getAttribute("background-color") ||
       "var(--color-push-box-bg, #EBEEF4)"
@@ -56,9 +68,19 @@ class PushBox extends HTMLElement {
   }
 
   get textColor() {
+    if (this.isPurple) {
+      return "#FFFFFF";
+    }
     return this.getAttribute("text-color") || "#951D51";
   }
 
+  get titleColor() {
+    if (this.isPurple) {
+      return "#FFFFFF";
+    }
+    return "#000000";
+  }
+
   render() {
     this.shadowRoot.innerHTML = `
       <style>
@@ -94,12 +116,12 @@ class PushBox extends HTMLElement {
           font-size: 24px;
           font-weight: 700;
           line-height: 34px;
-          color: #000000;
+          color: ${this.titleColor};
           margin: 0;
         }
 
         .cta-wrapper {
-          color: #951D51;
+          color: ${this.textColor};
           font-family: var(--font-family-outfit, "Outfit", sans-serif);
           font-size: 16px;
           font-weight: 400;