62 lines
2.4 KiB
HTML
62 lines
2.4 KiB
HTML
<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 ? 'url(' + heroConfig.background_image + ')' : 'none'}"
|
|
></div>
|
|
|
|
@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="hero-action 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 id="event-details" 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="fa-regular fa-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="fa-solid fa-location-dot event-icon"></i>
|
|
<span class="event-info-text">{{ eventConfig.location }}</span>
|
|
</div>
|
|
}
|
|
</div>
|
|
|
|
<div class="event-schedule-label" aria-hidden="true">
|
|
<i class="fa-solid fa-chevron-down"></i>
|
|
<span>Ver horarios</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|