css/styles.css

@@ -189,6 +189,7 @@ table {
   --color-text: #1e293b;
   --color-text-light: #64748b;
   --color-text-inverse: #ffffff;
+  --color-black: #000000;
 
   --color-background: #ffffff;
   --color-background-secondary: #f8fafc;
@@ -198,6 +199,8 @@ table {
   --color-border-light: #f1f5f9;
 
   --color-push-box-bg: #ebeef4;
+  --color-card-dark-bg: #ebeef4;
+  --color-button-primary: #951d51;
 
   /* Layout */
   --site-header-height: 210px;
@@ -375,13 +378,28 @@ site-content {
   overflow: hidden;
 }
 
+.content-padding {
+  padding-left: var(--spacing-md, 1rem);
+  padding-right: var(--spacing-md, 1rem);
+}
+
 /* ==========================================================================
    Page Components
    ========================================================================== */
 
 /* Section */
 .section {
-  margin-bottom: var(--spacing-xl);
+  margin-top: var(--spacing-md);
+  margin-bottom: var(--spacing-md);
+  /* Full-width within container */
+  width: 100%;
+  /* Padding inside section */
+  padding-left: var(--spacing-md, 1rem);
+  padding-right: var(--spacing-md, 1rem);
+}
+
+.section-dark {
+  background-color: var(--color-card-dark-bg);
 }
 
 .section-title {
@@ -401,8 +419,9 @@ site-content {
 /* Book Grid */
 .book-grid {
   display: grid;
-  grid-template-columns: repeat(2, 1fr);
+  grid-template-columns: 1fr;
-  gap: var(--spacing-md);
+  gap: var(--spacing-md, 1rem); /* 16px */
+  padding-bottom: var(--spacing-md, 1rem);
 }
 
 /* ==========================================================================

index.html

@@ -52,8 +52,9 @@
                 stroke-linecap="round"
                 stroke-linejoin="round"
               >
-                <circle cx="12" cy="8" r="5"></circle>
+                <path d="M18 20a6 6 0 0 0-12 0" />
-                <path d="M20 21a8 8 0 0 0-16 0"></path>
+                <circle cx="12" cy="10" r="4" />
+                <circle cx="12" cy="12" r="10" />
               </svg>
             </button>
             <button class="icon-button" aria-label="Shopping basket">
@@ -68,11 +69,11 @@
                 stroke-linecap="round"
                 stroke-linejoin="round"
               >
+                <circle cx="8" cy="21" r="1" />
+                <circle cx="19" cy="21" r="1" />
                 <path
-                  d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"
+                  d="M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12"
-                ></path>
+                />
-                <path d="M3 6h18"></path>
-                <path d="M16 10a4 4 0 0 1-8 0"></path>
               </svg>
             </button>
           </div>
@@ -82,20 +83,23 @@
       </site-header>
 
       <site-content>
-        <push-box>
+        <div class="content-padding">
-          <img slot="logo" src="images/logo-asoka.png" alt="Asoka Logo" />
+          <push-box>
-          <h2 slot="title">
+            <img slot="logo" src="images/logo-asoka.png" alt="Asoka Logo" />
-            Gespecialiseerd op het vlak van boeddhisme en aanverwante Oost-West
+            <h2 slot="title">
-            thema's
+              Gespecialiseerd op het vlak van boeddhisme en aanverwante
-          </h2>
+              Oost-West thema's
-          <arrow-button slot="cta" href="#">Meer over Asoka</arrow-button>
+            </h2>
-        </push-box>
+            <arrow-button slot="cta" href="#">Meer over Asoka</arrow-button>
+          </push-box>
+        </div>
 
-        <section class="section">
+        <section class="section section-dark">
-          <h2 class="section-title">Featured Books</h2>
+          <section-title text="Featured Books"></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"
@@ -103,6 +107,7 @@
             ></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"
@@ -110,6 +115,7 @@
             ></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"
@@ -117,6 +123,7 @@
             ></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"
@@ -126,69 +133,43 @@
         </section>
 
         <section class="section">
-          <h2 class="section-title">New Releases</h2>
+          <section-title text="Featured Books"></section-title>
           <div class="book-grid">
             <book-card
-              title="Tomorrow, and Tomorrow"
+              title="The Midnight Library"
-              author="Gabrielle Zevin"
+              description="A library of infinite possibilities"
-              price="$15.99"
+              author="Matt Haig"
-              rating="4"
-              href="book.html"
-            ></book-card>
-            <book-card
-              title="The House in the Pines"
-              author="Ana Reyes"
-              price="$13.99"
-              rating="3.5"
-              href="book.html"
-            ></book-card>
-            <book-card
-              title="Demon Copperhead"
-              author="Barbara Kingsolver"
-              price="$19.99"
-              rating="5"
-              href="book.html"
-            ></book-card>
-            <book-card
-              title="The Light We Carry"
-              author="Michelle Obama"
-              price="$17.99"
-              rating="4.5"
-              href="book.html"
-            ></book-card>
-          </div>
-        </section>
-
-        <section class="section">
-          <h2 class="section-title">Best Sellers</h2>
-          <div class="book-grid">
-            <book-card
-              title="Where the Crawdads Sing"
-              author="Delia Owens"
-              price="$11.99"
-              rating="4.5"
-              href="book.html"
-            ></book-card>
-            <book-card
-              title="The Silent Patient"
-              author="Alex Michaelides"
               price="$14.99"
-              rating="4"
-              href="book.html"
-            ></book-card>
-            <book-card
-              title="Educated"
-              author="Tara Westover"
-              price="$13.99"
               rating="4.5"
               href="book.html"
+              theme="dark"
             ></book-card>
             <book-card
-              title="Becoming"
+              title="Atomic Habits"
-              author="Michelle Obama"
+              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>
           </div>
         </section>

js/app.js

@@ -4,17 +4,19 @@
  */
 
 // Import all components
-import './components/site-header.js';
+import "./components/site-header.js";
-import './components/top-bar.js';
+import "./components/top-bar.js";
-import './components/horizontal-scroll-nav.js';
+import "./components/horizontal-scroll-nav.js";
-import './components/search-bar.js';
+import "./components/search-bar.js";
-import './components/site-content.js';
+import "./components/site-content.js";
-import './components/site-footer.js';
+import "./components/site-footer.js";
-import './components/book-card.js';
+import "./components/book-card.js";
-import './components/push-box.js';
+import "./components/push-box.js";
-import './components/arrow-button.js';
+import "./components/arrow-button.js";
+import "./components/section-title.js";
+import "./components/add-to-cart-button.js";
 
 // App initialization (if needed)
-document.addEventListener('DOMContentLoaded', () => {
+document.addEventListener("DOMContentLoaded", () => {
-  console.log('BookStore app initialized');
+  console.log("BookStore app initialized");
 });

js/components/add-to-cart-button.js

@@ -0,0 +1,77 @@
+/**
+ * Add to Cart Button Component
+ * Button with plus icon and shopping bag icon
+ */
+import { plusIcon } from "../icons/plus.js";
+import { shoppingBagIcon } from "../icons/shopping-bag.js";
+
+class AddToCartButton extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+  }
+
+  connectedCallback() {
+    this.render();
+    this.setupEventListeners();
+  }
+
+  setupEventListeners() {
+    const button = this.shadowRoot.querySelector(".add-to-cart-button");
+    if (button) {
+      button.addEventListener("click", () => {
+        this.dispatchEvent(
+          new CustomEvent("add-to-cart", {
+            bubbles: true,
+            composed: true,
+          })
+        );
+      });
+    }
+  }
+
+  render() {
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: inline-block;
+        }
+
+        .add-to-cart-button {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          gap: var(--spacing-xs, 0.25rem);
+          width: 70px;
+          height: 40px;
+          padding: 0;
+          background-color: var(--color-button-primary, #951d51);
+          border: none;
+          border-radius: var(--radius-sm, 0.25rem);
+          cursor: pointer;
+          transition: opacity var(--transition-fast, 150ms ease);
+        }
+
+        .add-to-cart-button:hover {
+          opacity: 0.9;
+        }
+
+        .add-to-cart-button:active {
+          opacity: 0.8;
+        }
+
+        .add-to-cart-button svg {
+          width: 24px;
+          height: 24px;
+          color: var(--color-text-inverse, #ffffff);
+        }
+      </style>
+      <button class="add-to-cart-button" type="button">
+        ${plusIcon({ size: 16, color: "#ffffff" })}
+        ${shoppingBagIcon({ size: 16, color: "#ffffff" })}
+      </button>
+    `;
+  }
+}
+
+customElements.define("add-to-cart-button", AddToCartButton);

js/components/arrow-button.js

@@ -51,16 +51,12 @@ class ArrowButton extends HTMLElement {
           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;
+          width: 24px;
-          height: 12px;
+          height: 24px;
           stroke: currentColor;
           fill: none;
         }
@@ -72,9 +68,10 @@ class ArrowButton extends HTMLElement {
       </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">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <path d="M5 12h14"></path>
+            <circle cx="12" cy="12" r="10"/>
-            <path d="m12 5 7 7-7 7"></path>
+            <path d="m12 16 4-4-4-4"/>
+            <path d="M8 12h8"/>
           </svg>
         </span>
         <span class="button-text">

js/components/book-card.js

@@ -1,91 +1,96 @@
 /**
  * Book Card Component
- * Reusable card displaying book thumbnail, title, author, and price
+ * Reusable card displaying book thumbnail, title, description, author, and price
+ * Horizontal layout with image on left and content on right
  */
 class BookCard extends HTMLElement {
   static get observedAttributes() {
-    return ['title', 'author', 'price', 'image', 'href', 'rating'];
+    return [
+      "title",
+      "author",
+      "description",
+      "price",
+      "image",
+      "href",
+      "theme",
+    ];
   }
 
   constructor() {
     super();
-    this.attachShadow({ mode: 'open' });
+    this.attachShadow({ mode: "open" });
   }
 
   connectedCallback() {
     this.render();
+    this.setupEventListeners();
+  }
+
+  setupEventListeners() {
+    const addToCartButton =
+      this.shadowRoot?.querySelector("add-to-cart-button");
+    if (addToCartButton) {
+      addToCartButton.addEventListener("add-to-cart", (e) => {
+        e.stopPropagation();
+        // Re-dispatch with book details
+        this.dispatchEvent(
+          new CustomEvent("add-to-cart", {
+            bubbles: true,
+            composed: true,
+            detail: {
+              title: this.title,
+              author: this.author,
+              price: this.price,
+            },
+          })
+        );
+      });
+    }
   }
 
   attributeChangedCallback() {
     if (this.shadowRoot) {
       this.render();
+      this.setupEventListeners();
     }
   }
 
   get title() {
-    return this.getAttribute('title') || 'Book Title';
+    return this.getAttribute("title") || "Book Title";
   }
 
   get author() {
-    return this.getAttribute('author') || 'Author Name';
+    return this.getAttribute("author") || "Author Name";
+  }
+
+  get description() {
+    return this.getAttribute("description") || "";
   }
 
   get price() {
-    return this.getAttribute('price') || '$0.00';
+    return this.getAttribute("price") || "$0.00";
   }
 
   get image() {
-    return this.getAttribute('image') || '';
+    return this.getAttribute("image") || "";
   }
 
   get href() {
-    return this.getAttribute('href') || 'book.html';
+    return this.getAttribute("href") || "book.html";
   }
 
-  get rating() {
+  get theme() {
-    return parseFloat(this.getAttribute('rating')) || 0;
+    return this.getAttribute("theme") || "light"; // 'light' or 'dark'
-  }
-
-  renderStars(rating) {
-    const fullStars = Math.floor(rating);
-    const hasHalf = rating % 1 >= 0.5;
-    const emptyStars = 5 - fullStars - (hasHalf ? 1 : 0);
-    
-    let stars = '';
-    
-    // Full stars
-    for (let i = 0; i < fullStars; i++) {
-      stars += `<svg class="star star-full" viewBox="0 0 24 24" fill="currentColor">
-        <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
-      </svg>`;
-    }
-    
-    // Half star
-    if (hasHalf) {
-      stars += `<svg class="star star-half" viewBox="0 0 24 24">
-        <defs>
-          <linearGradient id="halfGrad">
-            <stop offset="50%" stop-color="currentColor"/>
-            <stop offset="50%" stop-color="transparent"/>
-          </linearGradient>
-        </defs>
-        <path fill="url(#halfGrad)" stroke="currentColor" stroke-width="1" d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
-      </svg>`;
-    }
-    
-    // Empty stars
-    for (let i = 0; i < emptyStars; i++) {
-      stars += `<svg class="star star-empty" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1">
-        <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
-      </svg>`;
-    }
-    
-    return stars;
   }
 
   render() {
+    const backgroundColor =
+      this.theme === "dark"
+        ? "var(--color-card-dark-bg, #ebeef4)"
+        : "var(--color-background, #ffffff)";
+
     // Generate placeholder image if none provided
-    const imageHtml = this.image 
+    const imageHtml = this.image
       ? `<img src="${this.image}" alt="${this.title}" class="book-image">`
       : `<div class="book-image placeholder">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor">
@@ -100,14 +105,18 @@ class BookCard extends HTMLElement {
         }
 
         .card {
-          display: block;
+          display: flex;
-          text-decoration: none;
+          flex-direction: row;
+          align-items: stretch;
+          gap: var(--spacing-md, 1rem);
           color: inherit;
-          background-color: var(--color-background, #ffffff);
+          background-color: ${backgroundColor};
-          border-radius: var(--radius-lg, 0.75rem);
+          border-radius: var(--radius-sm, 0.25rem);
-          overflow: hidden;
+          padding: var(--spacing-md, 1rem);
           transition: transform var(--transition-fast, 150ms ease), 
                       box-shadow var(--transition-fast, 150ms ease);
+          min-width: 0;
+          overflow: hidden;
         }
 
         .card:hover {
@@ -120,16 +129,34 @@ class BookCard extends HTMLElement {
         }
 
         .image-container {
-          position: relative;
+          width: 102px;
-          aspect-ratio: 3 / 4;
+          min-width: 102px;
+          max-width: 102px;
+          height: 165px;
           background-color: var(--color-background-tertiary, #f1f5f9);
           overflow: hidden;
+          border-radius: var(--radius-sm, 0.25rem);
+        }
+
+        .image-link {
+          display: block;
+          height: 100%;
+          text-decoration: none;
+          color: inherit;
+        }
+
+        .image-link:visited,
+        .image-link:hover,
+        .image-link:active {
+          color: inherit;
+          text-decoration: none;
         }
 
         .book-image {
           width: 100%;
           height: 100%;
           object-fit: cover;
+          display: block;
         }
 
         .book-image.placeholder {
@@ -145,67 +172,107 @@ class BookCard extends HTMLElement {
           opacity: 0.5;
         }
 
-        .content {
+        .content-wrapper {
-          padding: var(--spacing-sm, 0.5rem);
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+          overflow: hidden;
         }
 
-        .title {
+        .content {
-          font-size: var(--font-size-sm, 0.875rem);
+          height: 100%;
-          font-weight: var(--font-weight-semibold, 600);
+          flex: 1;
-          color: var(--color-text, #1e293b);
+          display: flex;
-          margin-bottom: var(--spacing-xs, 0.25rem);
+          flex-direction: column;
+          gap: var(--spacing-sm, 0.5rem); /* 8px gap between elements */
+          justify-content: center;
+        }
+
+        .title-link {
+          font-family: var(--font-family-outfit, "Outfit", sans-serif);
+          font-size: var(--font-size-xl, 1.25rem); /* 20px */
+          font-weight: var(--font-weight-bold, 700);
+          line-height: var(--line-height-24, 24px);
+          color: var(--color-black, #000000);
+          text-decoration: underline;
           display: -webkit-box;
           -webkit-line-clamp: 2;
           -webkit-box-orient: vertical;
           overflow: hidden;
-          line-height: var(--line-height-tight, 1.25);
         }
 
-        .author {
+        .title-link:hover {
-          font-size: var(--font-size-xs, 0.75rem);
+          opacity: 0.8;
-          color: var(--color-text-light, #64748b);
+        }
-          margin-bottom: var(--spacing-xs, 0.25rem);
+
+        .description {
+          margin: 0;
+          font-family: var(--font-family-outfit, "Outfit", sans-serif);
+          font-size: var(--font-size-base, 1rem); /* 16px */
+          font-weight: var(--font-weight-light, 300);
+          line-height: var(--line-height-24, 24px);
+          color: var(--color-black, #000000);
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
+          overflow: hidden;
+        }
+
+        .author-link {
+          font-family: var(--font-family-outfit, "Outfit", sans-serif);
+          font-size: var(--font-size-base, 1rem); /* 16px */
+          font-weight: var(--font-weight-light, 300);
+          line-height: var(--line-height-24, 24px);
+          color: var(--color-button-primary, #951d51);
+          text-decoration: underline;
           white-space: nowrap;
           overflow: hidden;
           text-overflow: ellipsis;
         }
 
-        .rating {
+        .author-link:hover {
-          display: flex;
+          opacity: 0.8;
-          align-items: center;
-          gap: 2px;
-          margin-bottom: var(--spacing-xs, 0.25rem);
-        }
-
-        .star {
-          width: 12px;
-          height: 12px;
-          color: var(--color-accent, #f59e0b);
-        }
-
-        .star-empty {
-          color: var(--color-border, #e2e8f0);
         }
 
         .price {
-          font-size: var(--font-size-base, 1rem);
+          margin: 0;
+          font-family: var(--font-family-outfit, "Outfit", sans-serif);
+          font-size: var(--font-size-md, 1rem); /* 16px */
           font-weight: var(--font-weight-bold, 700);
-          color: var(--color-primary, #2563eb);
+          line-height: var(--line-height-24, 24px);
+          color: var(--color-text, #1e293b);
+        }
+
+        .actions {
+          display: flex;
+          justify-content: flex-end;
+          margin-top: auto;
         }
       </style>
-      <a href="${this.href}" class="card">
+      <div class="card">
-        <div class="image-container">
+        <a href="${this.href}" class="image-link">
-          ${imageHtml}
+          <div class="image-container">
+            ${imageHtml}
+          </div>
+        </a>
+        <div class="content-wrapper">
+          <div class="content">
+            <a href="${this.href}" class="title-link">${this.title}</a>
+            ${
+              this.description
+                ? `<p class="description">${this.description}</p>`
+                : ""
+            }
+            <a href="${this.href}" class="author-link">${this.author}</a>
+            <p class="price">${this.price}</p>
+          </div>
+          <div class="actions">
+            <add-to-cart-button></add-to-cart-button>
+          </div>
         </div>
-        <div class="content">
+      </div>
-          <h3 class="title">${this.title}</h3>
-          <p class="author">${this.author}</p>
-          ${this.rating > 0 ? `<div class="rating">${this.renderStars(this.rating)}</div>` : ''}
-          <p class="price">${this.price}</p>
-        </div>
-      </a>
     `;
   }
 }
 
-customElements.define('book-card', BookCard);
+customElements.define("book-card", BookCard);

js/components/push-box.js

@@ -41,7 +41,6 @@ class PushBox extends HTMLElement {
 
         .push-box {
           background-color: ${this.backgroundColor};
-          margin-bottom: 16px;
           padding: 48px 16px;
           display: flex;
           flex-direction: column;

js/components/section-title.js

@@ -0,0 +1,75 @@
+/**
+ * Section Title Component
+ * Displays a title with an arrow right icon on the right side
+ */
+import { arrowRightIcon } from "../icons/arrow-right.js";
+
+class SectionTitle extends HTMLElement {
+  static get observedAttributes() {
+    return ["text"];
+  }
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  attributeChangedCallback() {
+    if (this.shadowRoot) {
+      this.render();
+    }
+  }
+
+  get text() {
+    return this.getAttribute("text") || this.textContent || "Section Title";
+  }
+
+  render() {
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+        }
+
+        .section-title {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: var(--spacing-lg, 1.5rem) 0;
+        }
+
+        .title-text {
+          font-family: var(--font-family-outfit, "Outfit", sans-serif);
+          font-size: var(--font-size-2xl, 1.5rem);
+          font-weight: var(--font-weight-normal, 400);
+          line-height: var(--line-height-24, 24px);
+          color: var(--color-text, #1e293b);
+          margin: 0;
+        }
+
+        .icon-wrapper {
+          display: flex;
+          align-items: center;
+          color: var(--color-text, #1e293b);
+        }
+
+        .icon-wrapper svg {
+          width: 24px;
+          height: 24px;
+        }
+      </style>
+      <div class="section-title">
+        <h2 class="title-text">${this.text}</h2>
+        <div class="icon-wrapper">
+          ${arrowRightIcon({ size: 24, color: "currentColor" })}
+        </div>
+      </div>
+    `;
+  }
+}
+
+customElements.define("section-title", SectionTitle);

js/components/site-content.js

@@ -5,7 +5,7 @@
 class SiteContent extends HTMLElement {
   constructor() {
     super();
-    this.attachShadow({ mode: 'open' });
+    this.attachShadow({ mode: "open" });
   }
 
   connectedCallback() {
@@ -22,7 +22,8 @@ class SiteContent extends HTMLElement {
         }
 
         .content {
-          padding: var(--spacing-md, 1rem);
+          padding-top: var(--spacing-md);
+          padding-bottom: var(--spacing-md);
         }
       </style>
       <main class="content">
@@ -32,4 +33,4 @@ class SiteContent extends HTMLElement {
   }
 }
 
-customElements.define('site-content', SiteContent);
+customElements.define("site-content", SiteContent);

js/components/site-footer.js

@@ -5,7 +5,7 @@
 class SiteFooter extends HTMLElement {
   constructor() {
     super();
-    this.attachShadow({ mode: 'open' });
+    this.attachShadow({ mode: "open" });
   }
 
   connectedCallback() {
@@ -17,7 +17,7 @@ class SiteFooter extends HTMLElement {
       <style>
         :host {
           display: block;
-          background-color: var(--color-background-secondary, #f8fafc);
+          background-color: var(--color-button-primary, #951D51);
           border-top: 1px solid var(--color-border, #e2e8f0);
         }
 
@@ -34,13 +34,13 @@ class SiteFooter extends HTMLElement {
 
         .footer-link {
           font-size: var(--font-size-sm, 0.875rem);
-          color: var(--color-text-light, #64748b);
+          color: var(--color-text-inverse, #ffffff);
           text-decoration: none;
           transition: color var(--transition-fast, 150ms ease);
         }
 
         .footer-link:hover {
-          color: var(--color-primary, #2563eb);
+          color: rgba(255, 255, 255, 0.8);
         }
 
         .social-icons {
@@ -55,15 +55,15 @@ class SiteFooter extends HTMLElement {
           justify-content: center;
           width: 40px;
           height: 40px;
-          color: var(--color-text-light, #64748b);
+          color: var(--color-text-inverse, #ffffff);
-          background-color: var(--color-background, #ffffff);
+          background-color: rgba(255, 255, 255, 0.2);
           border-radius: var(--radius-full, 9999px);
           transition: all var(--transition-fast, 150ms ease);
         }
 
         .social-icon:hover {
-          color: var(--color-primary, #2563eb);
+          color: var(--color-text-inverse, #ffffff);
-          background-color: var(--color-background-tertiary, #f1f5f9);
+          background-color: rgba(255, 255, 255, 0.3);
         }
 
         .social-icon svg {
@@ -73,7 +73,7 @@ class SiteFooter extends HTMLElement {
 
         .copyright {
           font-size: var(--font-size-xs, 0.75rem);
-          color: var(--color-text-light, #64748b);
+          color: var(--color-text-inverse, #ffffff);
           text-align: center;
         }
       </style>
@@ -108,4 +108,4 @@ class SiteFooter extends HTMLElement {
   }
 }
 
-customElements.define('site-footer', SiteFooter);
+customElements.define("site-footer", SiteFooter);

js/icons/arrow-right.js

@@ -0,0 +1,30 @@
+/**
+ * Arrow Right Icon (Lucide)
+ * @param {Object} props - Icon properties
+ * @param {number} props.size - Icon size (default: 24)
+ * @param {string} props.color - Icon color (default: currentColor)
+ * @param {number} props.strokeWidth - Stroke width (default: 2)
+ * @returns {string} SVG string
+ */
+export function arrowRightIcon({
+  size = 24,
+  color = "currentColor",
+  strokeWidth = 2,
+} = {}) {
+  return `
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="${size}"
+      height="${size}"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="${color}"
+      stroke-width="${strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <path d="M5 12h14"/>
+      <path d="m12 5 7 7-7 7"/>
+    </svg>
+  `;
+}

js/icons/mic.js

@@ -23,9 +23,9 @@ export function micIcon({
       stroke-linecap="round"
       stroke-linejoin="round"
     >
-      <path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/>
+      <path d="M12 19v3"/>
       <path d="M19 10v2a7 7 0 0 1-14 0v-2"/>
-      <line x1="12" x2="12" y1="19" y2="22"/>
+      <rect x="9" y="2" width="6" height="13" rx="3"/>
     </svg>
   `;
 }

js/icons/plus.js

@@ -0,0 +1,30 @@
+/**
+ * Plus Icon (Lucide)
+ * @param {Object} props - Icon properties
+ * @param {number} props.size - Icon size (default: 24)
+ * @param {string} props.color - Icon color (default: currentColor)
+ * @param {number} props.strokeWidth - Stroke width (default: 2)
+ * @returns {string} SVG string
+ */
+export function plusIcon({
+  size = 24,
+  color = "currentColor",
+  strokeWidth = 2,
+} = {}) {
+  return `
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="${size}"
+      height="${size}"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="${color}"
+      stroke-width="${strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <path d="M5 12h14"/>
+      <path d="M12 5v14"/>
+    </svg>
+  `;
+}

js/icons/search.js

@@ -23,8 +23,8 @@ export function searchIcon({
       stroke-linecap="round"
       stroke-linejoin="round"
     >
+      <path d="m21 21-4.34-4.34"/>
       <circle cx="11" cy="11" r="8"/>
-      <path d="m21 21-4.3-4.3"/>
     </svg>
   `;
 }

js/icons/shopping-bag.js

@@ -23,9 +23,9 @@ export function shoppingBagIcon({
       stroke-linecap="round"
       stroke-linejoin="round"
     >
-      <path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"/>
+      <circle cx="8" cy="21" r="1"/>
-      <path d="M3 6h18"/>
+      <circle cx="19" cy="21" r="1"/>
-      <path d="M16 10a4 4 0 0 1-8 0"/>
+      <path d="M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12"/>
     </svg>
   `;
 }

js/icons/user.js

@@ -23,8 +23,9 @@ export function userIcon({
       stroke-linecap="round"
       stroke-linejoin="round"
     >
-      <circle cx="12" cy="8" r="5"/>
+      <path d="M18 20a6 6 0 0 0-12 0"/>
-      <path d="M20 21a8 8 0 0 0-16 0"/>
+      <circle cx="12" cy="10" r="4"/>
+      <circle cx="12" cy="12" r="10"/>
     </svg>
   `;
 }