Contouring page v2

package.json

@@ -8,7 +8,8 @@
     "doc": "docs"
   },
   "scripts": {
-    "start": "node server.js"
+    "start": "node server.js",
+    "dev": "nodemon server.js"
   },
   "repository": {
     "type": "git",
@@ -27,6 +28,10 @@
   "homepage": "https://github.com/fdnd-task/pleasurable-ui#readme",
   "dependencies": {
     "express": "^5.0.1",
-    "liquidjs": "^10.21.0"
+    "liquidjs": "^10.21.0",
+    "method-override": "^3.0.0"
+  },
+  "devDependencies": {
+    "nodemon": "^3.1.10"
   }
 }

public/assets-speaker/arrow-right.liquid

@@ -0,0 +1,3 @@
+<svg width="15" height="15" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.8125 0.21875C6.9375 0.0625 7.1875 0.0625 7.34375 0.21875L13.875 6.75C14.0312 6.90625 14.0312 7.125 13.875 7.28125L7.34375 13.8125C7.1875 13.9688 6.9375 13.9688 6.8125 13.8125L6.1875 13.2188C6.03125 13.0625 6.03125 12.8125 6.1875 12.6875L11.0312 7.8125H0.375C0.15625 7.8125 0 7.65625 0 7.4375V6.5625C0 6.375 0.15625 6.1875 0.375 6.1875H11.0312L6.1875 1.34375C6.03125 1.21875 6.03125 0.96875 6.1875 0.8125L6.8125 0.21875Z" fill="#00193F"/>
+</svg>

public/assets-speaker/bookmark-icon.liquid

@@ -0,0 +1,5 @@
+<svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.5 15L1 18V3H8L9 5.5L12.5 9V18L6.5 15Z" fill="black" stroke="black"/>
+<circle cx="12" cy="5" r="4.5" fill="black" stroke="#19B2A2"/>
+<path d="M14.5462 4.53698C14.662 4.53698 14.7777 4.65272 14.7777 4.76846V5.23143C14.7777 5.36164 14.662 5.46291 14.5462 5.46291H12.4629V7.54624C12.4629 7.67645 12.3472 7.77772 12.2314 7.77772H11.7685C11.6383 7.77772 11.537 7.67645 11.537 7.54624V5.46291H9.45365C9.32344 5.46291 9.22217 5.36164 9.22217 5.23143V4.76846C9.22217 4.65272 9.32344 4.53698 9.45365 4.53698H11.537V2.45365C11.537 2.33791 11.6383 2.22217 11.7685 2.22217H12.2314C12.3472 2.22217 12.4629 2.33791 12.4629 2.45365V4.53698H14.5462Z" fill="#19B2A2"/>
+</svg>

public/assets-speakers/arrow-right.liquid

@@ -0,0 +1,3 @@
+<svg width="15" height="15" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.8125 0.21875C6.9375 0.0625 7.1875 0.0625 7.34375 0.21875L13.875 6.75C14.0312 6.90625 14.0312 7.125 13.875 7.28125L7.34375 13.8125C7.1875 13.9688 6.9375 13.9688 6.8125 13.8125L6.1875 13.2188C6.03125 13.0625 6.03125 12.8125 6.1875 12.6875L11.0312 7.8125H0.375C0.15625 7.8125 0 7.65625 0 7.4375V6.5625C0 6.375 0.15625 6.1875 0.375 6.1875H11.0312L6.1875 1.34375C6.03125 1.21875 6.03125 0.96875 6.1875 0.8125L6.8125 0.21875Z" fill="#00193F"/>
+</svg>

public/assets-speakers/bookmark-icon.liquid

@@ -0,0 +1,5 @@
+<svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.5 15L1 18V3H8L9 5.5L12.5 9V18L6.5 15Z" fill="black" stroke="black"/>
+<circle cx="12" cy="5" r="4.5" fill="black" stroke="#19B2A2"/>
+<path d="M14.5462 4.53698C14.662 4.53698 14.7777 4.65272 14.7777 4.76846V5.23143C14.7777 5.36164 14.662 5.46291 14.5462 5.46291H12.4629V7.54624C12.4629 7.67645 12.3472 7.77772 12.2314 7.77772H11.7685C11.6383 7.77772 11.537 7.67645 11.537 7.54624V5.46291H9.45365C9.32344 5.46291 9.22217 5.36164 9.22217 5.23143V4.76846C9.22217 4.65272 9.32344 4.53698 9.45365 4.53698H11.537V2.45365C11.537 2.33791 11.6383 2.22217 11.7685 2.22217H12.2314C12.3472 2.22217 12.4629 2.33791 12.4629 2.45365V4.53698H14.5462Z" fill="#19B2A2"/>
+</svg>

public/assets-webinars/icon-arrow-right.liquid

@@ -0,0 +1,3 @@
+<svg width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.8125 0.21875C6.9375 0.0625 7.1875 0.0625 7.34375 0.21875L13.875 6.75C14.0312 6.90625 14.0312 7.125 13.875 7.28125L7.34375 13.8125C7.1875 13.9688 6.9375 13.9688 6.8125 13.8125L6.1875 13.2188C6.03125 13.0625 6.03125 12.8125 6.1875 12.6875L11.0312 7.8125H0.375C0.15625 7.8125 0 7.65625 0 7.4375V6.5625C0 6.375 0.15625 6.1875 0.375 6.1875H11.0312L6.1875 1.34375C6.03125 1.21875 6.03125 0.96875 6.1875 0.8125L6.8125 0.21875Z" fill="#00193F"/>
+</svg>

public/assets-webinars/icon-bookmark.liquid

@@ -0,0 +1,5 @@
+<svg width="17" height="21" viewBox="0 0 17 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.8125 2.25C12.7266 2.25 13.5 3.02344 13.5 3.9375V20.25L6.75 16.3125L0 20.25V3.9375C0 3.02344 0.738281 2.25 1.6875 2.25H11.8125ZM11.8125 17.332V4.14844C11.8125 4.04297 11.707 3.9375 11.6016 3.9375H1.89844C1.75781 3.9375 1.6875 4.04297 1.6875 4.14844V17.332L6.75 14.3789L11.8125 17.332Z" fill="#00193F"/>
+<circle cx="12" cy="5" r="4.5" fill="#00193F" stroke="#19B2A2"/>
+<path d="M14.5462 4.53704C14.662 4.53704 14.7777 4.65278 14.7777 4.76853V5.23149C14.7777 5.3617 14.662 5.46297 14.5462 5.46297H12.4629V7.5463C12.4629 7.67651 12.3472 7.77778 12.2314 7.77778H11.7685C11.6383 7.77778 11.537 7.67651 11.537 7.5463V5.46297H9.45365C9.32344 5.46297 9.22217 5.3617 9.22217 5.23149V4.76853C9.22217 4.65278 9.32344 4.53704 9.45365 4.53704H11.537V2.45371C11.537 2.33797 11.6383 2.22223 11.7685 2.22223H12.2314C12.3472 2.22223 12.4629 2.33797 12.4629 2.45371V4.53704H14.5462Z" fill="#19B2A2"/>
+</svg>

public/assets-webinars/icon-bookmarked.liquid

@@ -0,0 +1,5 @@
+<svg width="17" height="21" viewBox="0 0 17 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 20.25V3.9375C0 3.02344 0.738281 2.25 1.6875 2.25H11.8125C12.7266 2.25 13.5 3.02344 13.5 3.9375V20.25L6.75 16.3125L0 20.25Z" fill="#00193F"/>
+<circle cx="12" cy="5" r="4.5" fill="#00193F" stroke="#19B2A2"/>
+<path d="M13.8333 4C13.9167 4 14 4.125 14 4.25V4.75C14 4.89062 13.9167 5 13.8333 5H10.1667C10.0729 5 10 4.89062 10 4.75V4.25C10 4.125 10.0729 4 10.1667 4H13.8333Z" fill="#19B2A2"/>
+</svg>

public/script-index.js

@@ -0,0 +1,24 @@
+// alle scrollers opzoeken en selecteren
+const scrollers = document.querySelectorAll(".scroller");
+
+// kijken of reduced motion aan staat 
+if (!window.matchMedia("(prefers-reduced-motion:reduce)").matches) {
+  addAnimation();
+}
+
+// als er geen reduced animation aan staat mag de animatie doorgaan
+function addAnimation() {
+  scrollers.forEach(scroller => {
+    scroller.setAttribute('data-animated', true);
+
+    const scrollerInner = scroller.querySelector('.scroller-inner');
+    const scrollerContent = Array.from(scrollerInner.children);
+
+    // dupliceerd de content zodat het achterelkaar door blijft gaan, zonder dat het twee keer in de HTML staat (goed voor screenreaders)
+    scrollerContent.forEach(item => {
+      const duplicatedItem = item.cloneNode(true);
+      duplicatedItem.setAttribute('aria-hidden', true);
+      scrollerInner.appendChild(duplicatedItem);
+    });
+  });
+}

public/script-mobile-menu.js

@@ -0,0 +1,15 @@
+const observer = new IntersectionObserver(entries => {
+  entries.forEach(entry => {
+    const intersecting = entry.isIntersecting
+
+    if (!intersecting) {
+      document.documentElement.classList.add("uitbeeld");
+    }
+  })
+})
+
+let deDivs = document.querySelectorAll("div");
+
+let deHeader = document.querySelector(".main-header")
+
+observer.observe(deHeader);