feat: add immersive store header with carousel and Smooch font

- Implemented a new immersive store header component with a background image, logo, hero content, and a continuous image carousel.
- Integrated the Smooch font for enhanced typography in the header.
- Updated the store layout to support the new immersive header type.
- Added necessary styles and templates for the immersive header and carousel components.
- Enhanced unit tests to cover the new immersive header functionality.

src/app/shared/components/continuous-image-carousel/continuous-image-carousel.component.scss

@@ -0,0 +1,71 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+.continuous-carousel {
+  --gap: 1rem;
+  --card-width: calc((100vw - 4 * var(--gap)) / 5);
+
+  width: 100%;
+  overflow: hidden;
+}
+
+.continuous-carousel__track {
+  display: flex;
+  width: max-content;
+  animation: continuous-carousel-scroll var(--duration) linear infinite;
+}
+
+.continuous-carousel__set {
+  display: flex;
+  flex: none;
+  gap: var(--gap);
+  padding-right: var(--gap);
+}
+
+.continuous-carousel__image {
+  display: block;
+  flex: none;
+  width: var(--card-width);
+  aspect-ratio: 1.45;
+  object-fit: cover;
+  border-radius: 2px;
+  background: #e5e5e5;
+}
+
+.continuous-carousel:hover .continuous-carousel__track,
+.continuous-carousel:focus-within .continuous-carousel__track {
+  animation-play-state: paused;
+}
+
+@keyframes continuous-carousel-scroll {
+  to {
+    transform: translateX(-50%);
+  }
+}
+
+@media (max-width: 767px) {
+  .continuous-carousel {
+    --gap: 0.75rem;
+    --card-width: calc((100vw - 2 * var(--gap)) / 3);
+  }
+}
+
+@media (max-width: 480px) {
+  .continuous-carousel {
+    --card-width: calc((100vw - var(--gap)) / 2);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .continuous-carousel {
+    overflow-x: auto;
+  }
+  .continuous-carousel__track {
+    animation: none;
+  }
+  .continuous-carousel__set[aria-hidden='true'] {
+    display: none;
+  }
+}