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:
@@ -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>
|
||||
}
|
||||
Reference in New Issue
Block a user