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.
This commit is contained in:
2026-09-18 09:11:09 -03:00
parent 6927da6342
commit 7f4aa81d4b
19 changed files with 849 additions and 12 deletions

View File

@@ -0,0 +1,18 @@
@if (trackImages().length) {
<div class="continuous-carousel" role="region" [attr.aria-label]="ariaLabel()">
<div class="continuous-carousel__track" [style.--duration]="durationSeconds() + 's'">
@for (set of [0, 1]; track set) {
<div class="continuous-carousel__set" [attr.aria-hidden]="set === 1 ? 'true' : null">
@for (image of trackImages(); track $index) {
<img
class="continuous-carousel__image"
[src]="image"
alt=""
[loading]="set === 0 && $index < 5 ? 'eager' : 'lazy'"
/>
}
</div>
}
</div>
</div>
}