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

2026-07-14 14:03:51 -03:00
parent cc87169c1c
commit 257e4fbeb8
5 changed files with 193 additions and 1 deletions
--- a/src/app/shared/components/hero-banner/hero-banner.component.scss
+++ b/src/app/shared/components/hero-banner/hero-banner.component.scss
@@ -0,0 +1,87 @@
+.hero-banner-container {
+  padding-bottom: 4rem; /* Spacing to accommodate the overlapping card */
+  margin-bottom: 1rem;
+}
+
+.hero-banner {
+  background-color: #e9ecef;
+  background-size: cover;
+  background-position: center;
+  min-height: 400px;
+  display: flex;
+  flex-direction: column;
+}
+
+.hero-text-box {
+  max-width: 500px;
+  padding: 1.5rem;
+  background: transparent;
+}
+
+::ng-deep .hero-title, .hero-title {
+  color: #555;
+  font-size: 1.5rem;
+  margin-bottom: 1rem;
+  strong {
+    font-weight: 800;
+  }
+}
+
+::ng-deep .hero-description, .hero-description {
+  color: #666;
+  font-size: 1.1rem;
+  line-height: 1.5;
+  strong {
+    font-weight: 700;
+  }
+}
+
+.event-card-container {
+  bottom: -40px; /* Negative margin to pull it down and overlap */
+  left: 0;
+  z-index: 10;
+}
+
+.event-card {
+  width: 90%;
+  max-width: 900px;
+}
+
+.event-title {
+  font-size: 1.4rem;
+  letter-spacing: 0.5px;
+}
+
+.event-details {
+  font-size: 1.1rem;
+}
+
+.event-icon {
+  font-size: 1.3rem;
+  color: #888;
+}
+
+.event-info-text {
+  color: #777;
+  font-weight: 500;
+}
+
+@media (max-width: 768px) {
+  .hero-content {
+    justify-content: center !important;
+  }
+  
+  .hero-text-box {
+    text-align: center;
+    background: rgba(255, 255, 255, 0.8);
+    border-radius: 8px;
+  }
+  
+  .event-card-container {
+    bottom: -80px;
+  }
+  
+  .hero-banner-container {
+    padding-bottom: 6rem;
+  }
+}