Update AlertBanner component with translation support and responsive design

Author: AKCodez

@theme/components/Navbar/Navbar.tsx

@@ -11,12 +11,12 @@ import arrowUpRight from "../../../static/img/icons/arrow-up-right-custom.svg";
 
 const alertBanner = {
   show: true,
-  message: "XRP Ledger Apex 2025 | June 10-12",
+  message: "XRP Ledger Apex 2025",
   button: "GET TICKETS",
   link: "https://www.xrpledgerapex.com/?utm_source=xrplwebsite&utm_medium=direct&utm_campaign=xrpl-event-ho-xrplapex-glb-2025-q1_xrplwebsite_ari_arp_bf_rsvp&utm_content=cta_btn_english_gettickets",
   date: "JUNE 10-12",
 };
-export function AlertBanner({ message, button, link, show }) {
+export function AlertBanner({ message, date, button, link, show }) {
   const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
   const bannerRef = React.useRef(null);
@@ -46,11 +46,11 @@ export function AlertBanner({ message, button, link, show }) {
         aria-label="Get Tickets for XRP Ledger Apex 2025 Event"
       >
         <div className="banner-event-details">
-          <div className="event-info">XRPL APEX 2025</div>
-          <div className="event-date">JUNE 10-12</div>
+          <div className="event-info">{translate(message)}</div>
+          <div className="event-date">{translate(date)}</div>
         </div>
         <div className="banner-button">
-          <div className="button-text">GET TICKETS</div>
+          <div className="button-text">{translate(button)}</div>
           <img className="button-icon" src={arrowUpRight} alt="Get Tickets Icon" />
         </div>
       </a>

static/css/devportal2024-v1.css

@@ -50,23 +50,42 @@
     position: relative;
     z-index: 1;
   }
+  @media (max-width: 768px) {
+    font-size: 18px;
+    padding: 11px 35px;
 
-  @media (max-width: 991px) {
-    padding: 0 20px;
+  }
+  @media (max-width: 564px) {
+    font-size: 15px;
+    padding: 5px 40px;
+    .banner-event-details{
+      gap: 0px !important;
+      flex-direction: column;
+      text-align: left;
+    }
+    .banner-button{
+      align-self: baseline;
+      gap: 8px !important;
+    }
   }
   .banner-button{
     display: flex;
     align-items: center;
     gap: 14.5px;
+    padding-top: 1px;
     img{
       width: 24.5px; 
       height: 33.7px;
-    }
-  }
-  .event-info {
-
-    @media (max-width: 524px) {
-      font-size: 15px;
+      @media (max-width: 768px) {
+        width: 19.5px;
+        height: 18.7px;
+        padding-top: 0px;
+      }
+      @media (max-width: 564px) {
+        width: 15.5px;
+        height: 20.85px;
+        padding-top: 0px;
+      }
     }
   }
 
@@ -94,7 +113,7 @@
     transform-origin: center;
     transition: background-color 0.3s ease, color 0.3s ease;
 
-    @media (max-width: 524px) {
+    @media (max-width: 564px) {
       font: 600 9px/1 Work Sans ;
       width: 117px;
       height: 27px;
@@ -106,14 +125,9 @@
     transform-style: preserve-3d;
     aspect-ratio: 0.71;
     object-fit: contain;
-    width: 12.5px; // Scaled down from 13.8px
     animation: none;
     transform: rotateZ(0deg);
     transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); // Adjust duration as needed
-    @media (max-width: 524px) {
-      width: 9px; // Scaled down from 10px
-    }
-
     align-self: stretch;
     margin: auto 0;
     transform-style: preserve-3d;
@@ -141,15 +155,8 @@
 
 .web-banner a {
   text-decoration: none;
-  // background-color: var(--XRPL-Secondary-Blue-Purple, #7919FF);
 }
 
-// // to avoid a focus outline causing the background to turn white
-// .web-banner:focus,
-// .web-banner:active {
-//   background-color: var(--XRPL-Secondary-Blue-Purple, #7919FF) !important;
-// }
-
 .button-icon {
   animation: iconJitter 1s ease-in-out;
   animation-iteration-count: 1;