tbianchini/shopit-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(hero-banner): update event icons and add gradient overlay to hero banner

Browse Source
This commit is contained in:
ncoronel
2026-07-14 14:30:01 -03:00
parent 257e4fbeb8
commit 25085f6f85
2 changed files with 30 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/shared/components/hero-banner/hero-banner.component.html
View File

@@ -34,13 +34,13 @@
<div class="event-details d-flex flex-column flex-md-row justify-content-center align-items-center gap-3 gap-md-5 text-muted"> <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) { @if (eventConfig.dates && eventConfig.dates.length > 0) {
<div class="d-flex align-items-center gap-2"> <div class="d-flex align-items-center gap-2">
<i class="bi bi-calendar event-icon"></i> <i class="fa-regular fa-calendar event-icon"></i>
<span class="event-info-text">{{ formattedDates }}</span> <span class="event-info-text">{{ formattedDates }}</span>
</div> </div>
} }
@if (eventConfig.location) { @if (eventConfig.location) {
<div class="d-flex align-items-center gap-2"> <div class="d-flex align-items-center gap-2">
<i class="bi bi-geo-alt event-icon"></i> <i class="fa-solid fa-location-dot event-icon"></i>
<span class="event-info-text">{{ eventConfig.location }}</span> <span class="event-info-text">{{ eventConfig.location }}</span>
</div> </div>
} }

32
src/app/shared/components/hero-banner/hero-banner.component.scss
View File

@@ -10,6 +10,18 @@
min-height: 400px; min-height: 400px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
&::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0.95) 100%);
border-radius: inherit;
z-index: 1;
}
} }
.hero-text-box { .hero-text-box {
@@ -18,8 +30,15 @@
background: transparent; background: transparent;
} }
.hero-content {
position: relative;
z-index: 2;
flex-grow: 1;
}
::ng-deep .hero-title, .hero-title { ::ng-deep .hero-title, .hero-title {
color: #555; color: #666666;
font-size: 1.5rem; font-size: 1.5rem;
margin-bottom: 1rem; margin-bottom: 1rem;
strong { strong {
@@ -28,7 +47,7 @@
} }
::ng-deep .hero-description, .hero-description { ::ng-deep .hero-description, .hero-description {
color: #666; color: #666666;
font-size: 1.1rem; font-size: 1.1rem;
line-height: 1.5; line-height: 1.5;
strong { strong {
@@ -58,17 +77,22 @@
.event-icon { .event-icon {
font-size: 1.3rem; font-size: 1.3rem;
color: #888; color: #8a8a8a;
} }
.event-info-text { .event-info-text {
color: #777; color: #8a8a8a;
font-weight: 500; font-weight: 500;
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.hero-banner::before {
background: none;
}
.hero-content { .hero-content {
justify-content: center !important; justify-content: center !important;
background: none;
} }
.hero-text-box { .hero-text-box {