feat: enhance hero banner component with event schedule toggle and styling improvements

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

@@ -1,5 +1,4 @@
 .hero-banner-container {
-  padding-bottom: 4rem; /* Spacing to accommodate the overlapping card */
   margin-bottom: 1rem;
 }
 
@@ -19,10 +18,15 @@
   border-radius: inherit;
 
   &::after {
-    content: "";
+    content: '';
     position: absolute;
     inset: 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%);
+    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;
   }
 }
@@ -39,8 +43,8 @@
   flex-grow: 1;
 }
 
-
-::ng-deep .hero-title, .hero-title {
+::ng-deep .hero-title,
+.hero-title {
   color: #666666;
   font-size: 1.5rem;
   margin-bottom: 1rem;
@@ -49,7 +53,8 @@
   }
 }
 
-::ng-deep .hero-description, .hero-description {
+::ng-deep .hero-description,
+.hero-description {
   color: #666666;
   font-size: 1.1rem;
   line-height: 1.5;
@@ -59,8 +64,8 @@
 }
 
 .event-card-container {
-  bottom: -40px; /* Negative margin to pull it down and overlap */
-  left: 0;
+  position: relative;
+  margin-top: -40px;
   z-index: 10;
 }
 
@@ -70,12 +75,13 @@
 }
 
 .event-title {
-  font-size: 1.4rem;
+  font-size: 25px;
+  font-weight: 700;
   letter-spacing: 0.5px;
 }
 
 .event-details {
-  font-size: 1.1rem;
+  font-size: 21px;
 }
 
 .event-icon {
@@ -85,11 +91,55 @@
 
 .event-info-text {
   color: #8a8a8a;
-  font-weight: 500;
+  font-weight: 400;
 }
 
-.event-schedule-label {
-  display: none;
+.event-schedule-toggle {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.55rem;
+  margin-top: 1.75rem;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--tenant-primary, #009d4f);
+  font-size: 15px;
+  font-weight: 700;
+
+  &:focus-visible {
+    outline: 2px solid currentColor;
+    outline-offset: 0.25rem;
+  }
+
+  i {
+    font-size: 0.7rem;
+  }
+}
+
+.event-schedules {
+  margin-top: 1.25rem;
+
+  td {
+    width: 50%;
+    padding: 0.65rem 1rem;
+    border-radius: 0.5rem;
+    vertical-align: middle;
+  }
+}
+
+.event-schedule-value {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.75rem;
+  color: #8a8a8a;
+  font-size: 19px;
+  font-weight: 400;
+
+  i {
+    width: 1rem;
+    color: #c9ccce;
+  }
 }
 
 @media (max-width: 767.98px) {
@@ -175,9 +225,7 @@
   }
 
   .event-card-container {
-    position: relative !important;
-    bottom: auto;
-    left: auto;
+    margin-top: 0;
     padding: 0 1.25rem 1.2rem;
   }
 
@@ -193,14 +241,12 @@
   .event-title {
     max-width: 16rem;
     margin: 0 auto 0.85rem !important;
-    font-size: 1rem;
     line-height: 1.1;
     letter-spacing: 0;
   }
 
   .event-details {
     gap: 0.45rem !important;
-    font-size: 0.7rem;
     line-height: 1.25;
   }
 
@@ -213,22 +259,23 @@
     font-size: 0.85rem;
   }
 
-  .event-info-text {
-    font-weight: 400;
-  }
-
-  .event-schedule-label {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 0.55rem;
+  .event-schedule-toggle {
     margin-top: 1.9rem;
-    color: var(--tenant-primary, #009d4f);
-    font-size: 0.625rem;
-    font-weight: 700;
   }
 
-  .event-schedule-label i {
+  .event-schedule-toggle i {
     font-size: 0.65rem;
   }
+
+  .event-schedules {
+    margin-top: 1rem;
+
+    td {
+      padding: 0.55rem 0.4rem;
+    }
+  }
+
+  .event-schedule-value {
+    gap: 0.4rem;
+  }
 }