feat(hero-banner): update image handling to support responsive images and refactor template

feat(cart): enhance editing logic and add tests for editable state
feat(tenant): modify HeroConfig to include responsive image type

src/app/shared/components/hero-banner/hero-banner.component.html

@@ -1,14 +1,13 @@
 <div class="hero-banner-container">
   <div class="hero-banner position-relative rounded">
-    <div
-      class="hero-media"
-      aria-hidden="true"
-      [ngStyle]="{
-        'background-image': heroConfig?.background_image_id
-          ? 'url(' + heroConfig.background_image_id + ')'
-          : 'none',
-      }"
-    ></div>
+    @if (desktopImageUrl) {
+      <picture class="hero-media" aria-hidden="true">
+        @if (mobileImageUrl) {
+          <source media="(max-width: 767.98px)" [srcset]="mobileImageUrl" />
+        }
+        <img [src]="desktopImageUrl" alt="" />
+      </picture>
+    }
 
     @if (heroConfig) {
       <div

src/app/shared/components/hero-banner/hero-banner.component.scss

@@ -12,11 +12,20 @@
 .hero-media {
   position: absolute;
   inset: 0;
+  display: block;
+  overflow: hidden;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   border-radius: inherit;
 
+  img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
   &::after {
     content: '';
     position: absolute;

src/app/shared/components/hero-banner/hero-banner.component.spec.ts

@@ -2,6 +2,28 @@ import { TestBed } from '@angular/core/testing';
 import { HeroBannerComponent } from './hero-banner.component';
 
 describe('HeroBannerComponent', () => {
+  it('renders desktop and mobile crop variants', async () => {
+    await TestBed.configureTestingModule({ imports: [HeroBannerComponent] }).compileComponents();
+
+    const fixture = TestBed.createComponent(HeroBannerComponent);
+    fixture.componentRef.setInput('heroConfig', {
+      background_image_id: {
+        desktop: 'https://example.com/desktop.jpg',
+        mobile: 'https://example.com/mobile.jpg',
+      },
+    });
+    fixture.detectChanges();
+
+    const element = fixture.nativeElement as HTMLElement;
+
+    expect(element.querySelector('source')?.getAttribute('srcset')).toBe(
+      'https://example.com/mobile.jpg',
+    );
+    expect(element.querySelector('img')?.getAttribute('src')).toBe(
+      'https://example.com/desktop.jpg',
+    );
+  });
+
   it('expands and collapses the event schedules', async () => {
     await TestBed.configureTestingModule({ imports: [HeroBannerComponent] }).compileComponents();
 

src/app/shared/components/hero-banner/hero-banner.component.ts

@@ -18,6 +18,18 @@ export class HeroBannerComponent {
 
   protected schedulesExpanded = false;
 
+  protected get desktopImageUrl(): string | null {
+    const image = this.heroConfig?.background_image_id;
+
+    return typeof image === 'string' ? image : (image?.desktop ?? null);
+  }
+
+  protected get mobileImageUrl(): string | null {
+    const image = this.heroConfig?.background_image_id;
+
+    return typeof image === 'string' ? image : (image?.mobile ?? image?.desktop ?? null);
+  }
+
   get formattedDates(): string {
     if (this.eventConfig?.dates_text) {
       return this.eventConfig.dates_text;