diff --git a/css/styles.css b/css/styles.css index f2c6a83..b641b9e 100644 --- a/css/styles.css +++ b/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 ========================================================================== */ diff --git a/images/biografieautobiografie.png b/images/biografieautobiografie.png new file mode 100644 index 0000000..76eae02 Binary files /dev/null and b/images/biografieautobiografie.png differ diff --git a/images/boeddhisme-en-het-westen.png b/images/boeddhisme-en-het-westen.png new file mode 100644 index 0000000..b661288 Binary files /dev/null and b/images/boeddhisme-en-het-westen.png differ diff --git a/images/boeddhismealgemeen.png b/images/boeddhismealgemeen.png new file mode 100644 index 0000000..f9173cc Binary files /dev/null and b/images/boeddhismealgemeen.png differ diff --git a/images/kinderboeken.png b/images/kinderboeken.png new file mode 100644 index 0000000..80151b2 Binary files /dev/null and b/images/kinderboeken.png differ diff --git a/images/meditatie.png b/images/meditatie.png new file mode 100644 index 0000000..ff02c07 Binary files /dev/null and b/images/meditatie.png differ diff --git a/images/mindfulness.png b/images/mindfulness.png new file mode 100644 index 0000000..7070b30 Binary files /dev/null and b/images/mindfulness.png differ diff --git a/images/palicanon.png b/images/palicanon.png new file mode 100644 index 0000000..2f1e617 Binary files /dev/null and b/images/palicanon.png differ diff --git a/images/theravada.png b/images/theravada.png new file mode 100644 index 0000000..a1285c3 Binary files /dev/null and b/images/theravada.png differ diff --git a/images/tibetaans-boeddhisme.png b/images/tibetaans-boeddhisme.png new file mode 100644 index 0000000..c04abdb Binary files /dev/null and b/images/tibetaans-boeddhisme.png differ diff --git a/images/vipassana.png b/images/vipassana.png new file mode 100644 index 0000000..0c8a43f Binary files /dev/null and b/images/vipassana.png differ diff --git a/index.html b/index.html index d9c8b9f..5b02d61 100644 --- a/index.html +++ b/index.html @@ -94,8 +94,51 @@ +
+ +
+ + + + + Toon meer recent verschenen boeken +
+
+
- +
+ Toon meer meest verkochte boeken
- -
- - - - + +
+ + + + + + + + + +
+ Toon alle onderwerpen
diff --git a/js/app.js b/js/app.js index 634c3b7..b228149 100644 --- a/js/app.js +++ b/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", () => { diff --git a/js/components/category-card.js b/js/components/category-card.js new file mode 100644 index 0000000..22655a7 --- /dev/null +++ b/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 + ? `${this.title}` + : `
+ + + +
`; + + this.shadowRoot.innerHTML = ` + + + ${iconHtml} +

${this.title}

+ + `; + } +} + +customElements.define("category-card", CategoryCard); diff --git a/js/components/cta-button.js b/js/components/cta-button.js new file mode 100644 index 0000000..d143635 --- /dev/null +++ b/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 = ` + + <${tag} class="cta-button" ${hrefAttr} type="${isLink ? "" : "button"}"> + + + + + `; + } +} + +customElements.define("cta-button", CtaButton);