Add first page

blocks/breadcrumb/breadcrumb.css

@@ -0,0 +1,34 @@
+.breadcrumb {
+  color: rgb(0 161 159);
+  font-size: 16px;
+}
+
+.breadcrumb a:any-link {
+  color: rgb(0 161 159);
+  font-family: rwe-light;
+}
+
+.breadcrumb ul {
+  list-style: none;
+  padding: 0;
+  display: flex;
+  flex-direction: row;
+  gap: 4px;
+  margin: 0;
+}
+
+.breadcrumb ul li:last-of-type {
+  font-weight: 600;
+}
+
+.breadcrumb li span {
+  font-size: 14px;
+  margin-left: 4px;
+  font-weight: 700;
+}
+
+.breadcrumb.dark {
+  background: #1d4477;
+  color: var(--white);
+  padding: 16px;
+}

blocks/breadcrumb/breadcrumb.js

@@ -0,0 +1,8 @@
+export default function decorate(block) {
+  block.querySelectorAll('ul li:not(:last-of-type)').forEach((el) => {
+    const iconEl = document.createElement('span');
+    iconEl.classList.add('icon-rwe-anchor-right');
+
+    el.append(iconEl);
+  });
+}

blocks/carousel/carousel.css

@@ -0,0 +1,143 @@
+.carousel {
+  padding-top: 16px;
+}
+
+.carousel .carousel-slides-container {
+  position: relative;
+}
+
+.carousel .carousel-slides,
+.carousel .carousel-slide-indicators {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.carousel .carousel-slides {
+  display: flex;
+  scroll-behavior: smooth;
+  scroll-snap-type: x mandatory;
+  overflow: scroll clip;
+}
+
+.carousel .carousel-slides::-webkit-scrollbar {
+  display: none;
+}
+
+.carousel .carousel-slide {
+  flex: 0 0 100%;
+  scroll-snap-align: start;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  position: relative;
+  width: 100%;
+  min-height: min(50vw, calc(100dvh - var(--header-height)));
+}
+
+.carousel .carousel-slide:has(.carousel-slide-content[data-align="center"]) {
+  align-items: center;
+}
+
+.carousel .carousel-slide:has(.carousel-slide-content[data-align="right"]) {
+  align-items: flex-end;
+}
+
+.carousel .carousel-slide .carousel-slide-image {
+  display: flex;
+  flex-direction: row;
+  gap: 24px;
+  max-width: 100%;
+  margin: 0 8px;
+}
+
+.carousel .carousel-slide .carousel-slide-image p {
+  display: flex;
+  gap: 16px;
+}
+
+.carousel .carousel-slide .carousel-slide-image .video-block {
+  width: calc(50% - 12px);
+}
+
+.carousel .carousel-slide .carousel-slide-image picture {
+  width: calc((100% - 32px) / 3);
+  inset: 0;
+}
+
+.carousel .carousel-slide .carousel-slide-image picture > img {
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+}
+
+.carousel .carousel-slide .carousel-slide-content {
+  z-index: 1;
+  margin: 68px;
+  padding: 16px;
+  color: white;
+  background-color: rgba(19 19 19 / 75%);
+  position: relative;
+  width: var(--slide-content-width, auto);
+}
+
+.carousel .carousel-slide-indicators {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 6px 12px;
+  padding: 12px;
+  background-color: var(--light-color);
+  line-height: 0;
+}
+
+.carousel .carousel-slide-indicator {
+  display: flex;
+  align-items: center;
+}
+
+.carousel .carousel-slide-indicator button {
+  width: 14px;
+  height: 14px;
+  margin: 0;
+  padding: 0;
+  border-radius: 50%;
+  background-color: #3ed8c3;
+  transition: all 0.2s;
+  border: none;
+}
+
+.carousel .carousel-slide-indicator button:disabled,
+.carousel .carousel-slide-indicator button:focus-visible {
+  background-color: #00a19f;
+  width: 18px;
+  height: 18px;
+}
+
+/* stylelint-disable-next-line no-descending-specificity */
+.carousel .slide-button {
+  position: relative;
+  margin: 0;
+  padding: 0;
+  background-color: transparent;
+  color: #00a19f;
+  border: none;
+}
+
+.carousel .slide-button:hover,
+.carousel .slide-button:focus-visible {
+  background-color: transparent;
+}
+
+@media (width >= 600px) {
+  .carousel .carousel-slide .carousel-slide-content {
+    --slide-content-width: calc((100% - 184px) / 2);
+
+    margin: 92px;
+  }
+
+  .carousel .carousel-slide .carousel-slide-content[data-align="justify"] {
+    --slide-content-width: auto;
+  }
+}

blocks/carousel/carousel.js

@@ -0,0 +1,151 @@
+import { fetchPlaceholders } from '../../scripts/aem.js';
+
+function updateActiveSlide(slide) {
+  const block = slide.closest('.carousel');
+  const slideIndex = parseInt(slide.dataset.slideIndex, 10);
+  block.dataset.activeSlide = slideIndex;
+
+  const slides = block.querySelectorAll('.carousel-slide');
+
+  slides.forEach((aSlide, idx) => {
+    aSlide.setAttribute('aria-hidden', idx !== slideIndex);
+    aSlide.querySelectorAll('a').forEach((link) => {
+      if (idx !== slideIndex) {
+        link.setAttribute('tabindex', '-1');
+      } else {
+        link.removeAttribute('tabindex');
+      }
+    });
+  });
+
+  const indicators = block.querySelectorAll('.carousel-slide-indicator');
+  indicators.forEach((indicator, idx) => {
+    if (idx !== slideIndex) {
+      indicator.querySelector('button').removeAttribute('disabled');
+    } else {
+      indicator.querySelector('button').setAttribute('disabled', 'true');
+    }
+  });
+}
+
+function showSlide(block, slideIndex = 0) {
+  const slides = block.querySelectorAll('.carousel-slide');
+  let realSlideIndex = slideIndex < 0 ? slides.length - 1 : slideIndex;
+  if (slideIndex >= slides.length) realSlideIndex = 0;
+  const activeSlide = slides[realSlideIndex];
+
+  activeSlide.querySelectorAll('a').forEach((link) => link.removeAttribute('tabindex'));
+  block.querySelector('.carousel-slides').scrollTo({
+    top: 0,
+    left: activeSlide.offsetLeft,
+    behavior: 'smooth',
+  });
+}
+
+function bindEvents(block) {
+  const slideIndicators = block.querySelector('.carousel-slide-indicators');
+  if (!slideIndicators) return;
+
+  slideIndicators.querySelectorAll('button').forEach((button) => {
+    button.addEventListener('click', (e) => {
+      const slideIndicator = e.currentTarget.parentElement;
+      showSlide(block, parseInt(slideIndicator.dataset.targetSlide, 10));
+    });
+  });
+
+  block.querySelector('.slide-prev').addEventListener('click', () => {
+    showSlide(block, parseInt(block.dataset.activeSlide, 10) - 1);
+  });
+  block.querySelector('.slide-next').addEventListener('click', () => {
+    showSlide(block, parseInt(block.dataset.activeSlide, 10) + 1);
+  });
+
+  const slideObserver = new IntersectionObserver((entries) => {
+    entries.forEach((entry) => {
+      if (entry.isIntersecting) updateActiveSlide(entry.target);
+    });
+  }, { threshold: 0.5 });
+  block.querySelectorAll('.carousel-slide').forEach((slide) => {
+    slideObserver.observe(slide);
+  });
+}
+
+function createSlide(row, slideIndex, carouselId) {
+  const slide = document.createElement('li');
+  slide.dataset.slideIndex = slideIndex;
+  slide.setAttribute('id', `carousel-${carouselId}-slide-${slideIndex}`);
+  slide.classList.add('carousel-slide');
+
+  row.querySelectorAll(':scope > div').forEach((column, colIdx) => {
+    column.classList.add(`carousel-slide-${colIdx === 0 ? 'image' : 'content'}`);
+    slide.append(column);
+  });
+
+  const labeledBy = slide.querySelector('h1, h2, h3, h4, h5, h6');
+  if (labeledBy) {
+    slide.setAttribute('aria-labelledby', labeledBy.getAttribute('id'));
+  }
+
+  return slide;
+}
+
+let carouselId = 0;
+export default async function decorate(block) {
+  carouselId += 1;
+  block.setAttribute('id', `carousel-${carouselId}`);
+  const rows = block.querySelectorAll(':scope > div');
+  const isSingleSlide = rows.length < 2;
+
+  const placeholders = await fetchPlaceholders();
+
+  block.setAttribute('role', 'region');
+  block.setAttribute('aria-roledescription', placeholders.carousel || 'Carousel');
+
+  const container = document.createElement('div');
+  container.classList.add('carousel-slides-container');
+
+  const slidesWrapper = document.createElement('ul');
+  slidesWrapper.classList.add('carousel-slides');
+  block.prepend(slidesWrapper);
+
+  let slideIndicators;
+  if (!isSingleSlide) {
+    const slideIndicatorsNav = document.createElement('nav');
+    slideIndicatorsNav.setAttribute('aria-label', placeholders.carouselSlideControls || 'Carousel Slide Controls');
+    slideIndicators = document.createElement('ol');
+    slideIndicators.classList.add('carousel-slide-indicators');
+    slideIndicatorsNav.append(slideIndicators);
+    block.append(slideIndicatorsNav);
+  }
+
+  rows.forEach((row, idx) => {
+    const slide = createSlide(row, idx, carouselId);
+    slidesWrapper.append(slide);
+
+    if (slideIndicators) {
+      const indicator = document.createElement('li');
+      indicator.classList.add('carousel-slide-indicator');
+      indicator.dataset.targetSlide = idx;
+      indicator.innerHTML = `<button type="button" aria-label="${placeholders.showSlide || 'Show Slide'} ${idx + 1} ${placeholders.of || 'of'} ${rows.length}"></button>`;
+      slideIndicators.append(indicator);
+    }
+    row.remove();
+  });
+
+  slideIndicators.innerHTML = `
+    <button type="button" class="slide-button slide-prev" aria-label="${placeholders.previousSlide || 'Previous Slide'}">
+      <span class="icon-rwe-anchor-left"></span>
+    </button>
+    ${slideIndicators.innerHTML}
+    <button type="button" class="slide-button slide-next" aria-label="${placeholders.nextSlide || 'Next Slide'}">
+      <span class="icon-rwe-anchor-right"></span>
+    </button>
+  `;
+
+  container.append(slidesWrapper);
+  block.prepend(container);
+
+  if (!isSingleSlide) {
+    bindEvents(block);
+  }
+}

blocks/columns/columns.css

@@ -21,7 +21,7 @@
 
 @media (width >= 900px) {
   .columns > div {
-    align-items: center;
+    align-items: flex-start;
     flex-direction: unset;
     gap: 24px;
   }

blocks/facts/facts.css

@@ -0,0 +1,33 @@
+.facts {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  gap: 32px;
+  margin-top: 16px;
+}
+
+.facts > div {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  gap: 16px;
+}
+
+.facts > div > div {
+  flex: 1;
+  text-align: center;
+  background-color: var(--white);
+  padding: 16px;
+}
+
+.facts .facts-value {
+  font-size: 24px;
+  line-height: 28px;
+  font-family: rwe-bold;
+  color: #00a19f;
+}
+
+.facts p {
+  margin: 0;
+  font-family: rwe-medium;
+}

blocks/facts/facts.js

@@ -0,0 +1,4 @@
+export default function decorate(block) {
+  block.querySelectorAll(':scope > div > div > p:first-child')
+    .forEach((el) => el.classList.add('facts-value'));
+}