feat(hero-banner): add HeroBanner component with dynamic hero and event configurations

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

@@ -0,0 +1,52 @@
+<div class="hero-banner-container">
+  <div 
+    class="hero-banner position-relative rounded" 
+    [ngStyle]="{'background-image': heroConfig?.background_image ? 'url(' + heroConfig.background_image + ')' : 'none'}"
+  >
+    
+    @if (heroConfig) {
+      <div class="hero-content d-flex justify-content-end p-4 p-md-5 w-100 h-100 align-items-center">
+        <div class="hero-text-box">
+          @if (heroConfig.title_html) {
+            <div class="hero-title" [innerHTML]="heroConfig.title_html"></div>
+          }
+          @if (heroConfig.description_html) {
+            <div class="hero-description" [innerHTML]="heroConfig.description_html"></div>
+          }
+          @if (heroConfig.button_text) {
+            <a [href]="heroConfig.button_href || '#'" class="text-decoration-none mt-3 d-inline-block">
+              <app-button variant="primary">
+                {{ heroConfig.button_text }}
+              </app-button>
+            </a>
+          }
+        </div>
+      </div>
+    }
+
+    @if (eventConfig) {
+      <div class="event-card-container position-absolute w-100 d-flex justify-content-center">
+        <div class="event-card bg-white shadow rounded p-3 p-md-4 text-center">
+          @if (eventConfig.title) {
+            <h3 class="event-title text-primary fw-bold mb-3">{{ eventConfig.title }}</h3>
+          }
+          
+          <div class="event-details d-flex flex-column flex-md-row justify-content-center align-items-center gap-3 gap-md-5 text-muted">
+            @if (eventConfig.dates && eventConfig.dates.length > 0) {
+              <div class="d-flex align-items-center gap-2">
+                <i class="bi bi-calendar event-icon"></i>
+                <span class="event-info-text">{{ formattedDates }}</span>
+              </div>
+            }
+            @if (eventConfig.location) {
+              <div class="d-flex align-items-center gap-2">
+                <i class="bi bi-geo-alt event-icon"></i>
+                <span class="event-info-text">{{ eventConfig.location }}</span>
+              </div>
+            }
+          </div>
+        </div>
+      </div>
+    }
+  </div>
+</div>