fix: add category card

css/styles.css

@@ -389,8 +389,6 @@ site-content {
 
 /* Section */
 .section {
-  margin-top: var(--spacing-md);
-  margin-bottom: var(--spacing-md);
   /* Full-width within container */
   width: 100%;
   /* Padding inside section */
@@ -424,6 +422,14 @@ site-content {
   padding-bottom: var(--spacing-md, 1rem);
 }
 
+/* Category Grid */
+.category-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: var(--spacing-md, 1rem); /* 16px */
+  padding-bottom: var(--spacing-md, 1rem);
+}
+
 /* ==========================================================================
    Book Detail Page
    ========================================================================== */

index.html

@@ -94,8 +94,51 @@
           </push-box>
         </div>
 
+        <section class="section section">
+          <section-title text="Recent verschenen boeken"></section-title>
+          <div class="book-grid">
+            <book-card
+              title="The Midnight Library"
+              description="A library of infinite possibilities"
+              author="Matt Haig"
+              price="$14.99"
+              rating="4.5"
+              href="book.html"
+              theme="dark"
+            ></book-card>
+            <book-card
+              title="Atomic Habits"
+              description="A simple, proven system for breaking bad habits and forming good ones"
+              author="James Clear"
+              price="$16.99"
+              rating="5"
+              href="book.html"
+              theme="dark"
+            ></book-card>
+            <book-card
+              title="The Psychology of Money"
+              description="A book about the psychology of money and how it affects our lives"
+              author="Morgan Housel"
+              price="$12.99"
+              rating="4"
+              href="book.html"
+              theme="dark"
+            ></book-card>
+            <book-card
+              title="Project Hail Mary"
+              description="A book about the science of space travel and the future of humanity"
+              author="Andy Weir"
+              price="$18.99"
+              rating="4.5"
+              href="book.html"
+              theme="dark"
+            ></book-card>
+            <cta-button href="#">Toon meer recent verschenen boeken</cta-button>
+          </div>
+        </section>
+
         <section class="section section-dark">
-          <section-title text="Featured Books"></section-title>
+          <section-title text="Meest verkochte boeken"></section-title>
           <div class="book-grid">
             <book-card
               title="The Midnight Library"
@@ -129,49 +172,65 @@
               rating="4.5"
               href="book.html"
             ></book-card>
+            <cta-button href="#">Toon meer meest verkochte boeken</cta-button>
           </div>
         </section>
 
         <section class="section">
-          <section-title text="Featured Books"></section-title>
+          <section-title text="Onderwerpen"></section-title>
-          <div class="book-grid">
+          <div class="category-grid">
-            <book-card
+            <category-card
-              title="The Midnight Library"
+              title="Biografie / autobiografie"
-              description="A library of infinite possibilities"
+              icon="images/biografieautobiografie.png"
-              author="Matt Haig"
+              href="category.html"
-              price="$14.99"
+            ></category-card>
-              rating="4.5"
+            <category-card
-              href="book.html"
+              title="Boeddhisme (algemeen)"
-              theme="dark"
+              icon="images/boeddhismealgemeen.png"
-            ></book-card>
+              href="category.html"
-            <book-card
+            ></category-card>
-              title="Atomic Habits"
+            <category-card
-              description="A simple, proven system for breaking bad habits and forming good ones"
+              title="Boeddhisme en het Westen"
-              author="James Clear"
+              icon="images/boeddhisme-en-het-westen.png"
-              price="$16.99"
+              href="category.html"
-              rating="5"
+            ></category-card>
-              href="book.html"
+            <category-card
-              theme="dark"
+              title="Kinderboeken"
-            ></book-card>
+              icon="images/kinderboeken.png"
-            <book-card
+              href="category.html"
-              title="The Psychology of Money"
+            ></category-card>
-              description="A book about the psychology of money and how it affects our lives"
+            <category-card
-              author="Morgan Housel"
+              title="Meditatie"
-              price="$12.99"
+              icon="images/meditatie.png"
-              rating="4"
+              href="category.html"
-              href="book.html"
+            ></category-card>
-              theme="dark"
+            <category-card
-            ></book-card>
+              title="Mindfulness"
-            <book-card
+              icon="images/mindfulness.png"
-              title="Project Hail Mary"
+              href="category.html"
-              description="A book about the science of space travel and the future of humanity"
+            ></category-card>
-              author="Andy Weir"
+            <category-card
-              price="$18.99"
+              title="Pali-canon"
-              rating="4.5"
+              icon="images/palicanon.png"
-              href="book.html"
+              href="category.html"
-              theme="dark"
+            ></category-card>
-            ></book-card>
+            <category-card
+              title="Theravada"
+              icon="images/theravada.png"
+              href="category.html"
+            ></category-card>
+            <category-card
+              title="Tibetaans boeddhisme"
+              icon="images/tibetaans-boeddhisme.png"
+              href="category.html"
+            ></category-card>
+            <category-card
+              title="Vipassana"
+              icon="images/vipassana.png"
+              href="category.html"
+            ></category-card>
           </div>
+          <cta-button href="#">Toon alle onderwerpen</cta-button>
         </section>
       </site-content>
 

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