Merged in feat/SW-1542-carousel-functionality (pull request #1311)

feat(SW-1542): Carousel component

* feat(SW-1542): add Embla Carousel component and use in CarouselCards

* fix(SW-1542): remove max-width constraint for card on ipad

* fix(SW-1542): Add padding to start page content container

* refactor(SW-1542): Improve Embla Carousel type imports

* refactor(SW-1542): Remove unnecessary carousel wrapper div

* refactor(SW-1542): Modularize Carousel component structure

* refactor(SW-1542): Remove carousel dots display

* feat(SW-1542): Add carousel dots navigation

* refactor(SW-1542): Update Carousel component styling and types

* refactor(SW-1542): Remove uneeded useCallback from Carousel navigation methods

* refactor(SW-1542): Modify CarouselContextProps type to exclude className

* refactor(SW-1542): Optimize React imports in Carousel components

* refactor(SW-1542): Consolidate Carousel component and remove CarouselRoot

* refactor(SW-1542): Update Carousel navigation methods to use function-based scroll checks

* refactor(SW-1542): Add explicit children prop support to CarouselContent component

* refactor(SW-1542): Add children prop support to CarouselItem component


Approved-by: Christian Andolf

components/Carousel/carousel.module.css

@@ -0,0 +1,82 @@
+.root {
+  position: relative;
+}
+
+.viewport {
+  overflow: hidden;
+}
+
+.container {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: 100%;
+  gap: var(--Spacing-x3);
+}
+
+.item {
+  min-width: 0;
+}
+
+.button {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  background: var(--Base-Surface-Primary-light-Normal);
+  box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.1);
+  border: none;
+  border-radius: 50%;
+  padding: var(--Spacing-x1);
+  cursor: pointer;
+  z-index: 1;
+}
+
+.buttonPrev {
+  left: calc(-1 * var(--Spacing-x3));
+}
+
+.buttonNext {
+  right: calc(-1 * var(--Spacing-x3));
+}
+
+.prevIcon {
+  transform: rotate(180deg);
+}
+
+.dots {
+  display: flex;
+  justify-content: center;
+  gap: var(--Spacing-x1);
+  margin-top: var(--Spacing-x3);
+}
+
+.dot {
+  height: 8px;
+  width: 8px;
+  border-radius: var(--Corner-radius-Large);
+  background: var(--UI-Grey-40);
+  transition: width 0.3s ease;
+}
+
+.dot[data-active="true"] {
+  width: 22px;
+  background: var(--UI-Text-Medium-contrast);
+}
+
+@media (min-width: 768px) {
+  .container {
+    grid-auto-columns: calc((100% - var(--Spacing-x3)) / 2);
+  }
+
+  .button {
+    display: flex;
+  }
+}
+
+@media (min-width: 1024px) {
+  .container {
+    grid-auto-columns: calc((100% - var(--Spacing-x3) * 2) / 3);
+  }
+}