create new apex banner with animations v2

Author: AKCodez

@theme/components/Navbar/Navbar.tsx

@@ -14,8 +14,33 @@ const alertBanner = {
   message: "XRP Ledger Apex 2025 | June 10-12",
   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 }) {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+  if (show) {
+    return (
+      <a
+        href={link}
+        target="_blank"
+        className="top-banner fixed-top web-banner"
+        rel="noopener noreferrer"
+        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>
+        <div className="banner-button">
+          <div className="button-text">GET TICKETS</div>
+          <img className="button-icon" src={arrowUpRight} alt="Get Tickets Icon" />
+        </div>
+      </a>
+    );
+  }
+  return null;
+}
 export function Navbar(props) {
   // const [isOpen, setIsOpen] = useMobileMenu(false);
   const themeConfig = useThemeConfig();
@@ -49,6 +74,7 @@ export function Navbar(props) {
     }
   });
 
+
   React.useEffect(() => {
     // Turns out jQuery is necessary for firing events on Bootstrap v4
     // dropdowns. These events set classes so that the search bar and other
@@ -86,12 +112,7 @@ export function Navbar(props) {
 
   return (
     <>
-      <AlertBanner
-        show={alertBanner.show}
-        message={alertBanner.message}
-        button={alertBanner.button}
-        link={alertBanner.link}
-      />
+      <AlertBanner {...alertBanner} />
       <NavWrapper belowAlertBanner={alertBanner.show}>
         <LogoBlock to={href} img={logo} alt={altText} />
         <NavControls>
@@ -120,30 +141,14 @@ export function Navbar(props) {
   );
 }
 
-export function AlertBanner({ message, button, link, show }) {
+export function XrplApexEvent({ message, button, link, show, date }) {
   const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
   if (show) {
     return (
-      <a
-        href={link}
-        target="_blank"
-        className="top-banner fixed-top web-banner"
-        rel="noopener noreferrer"
-        aria-label="Get Tickets for XRP Ledger Apex 2025 Event"
-      >
-        <div className="banner-content">
-          <div className="event-info">{translate(message)}</div>
-          <div className="ticket-button">
-            <span className="button-text">{translate(button)}</span>
-            <img
-              src={arrowUpRight}
-              alt="Get Tickets Icon"
-              className="button-icon"
-            />
-          </div>
-        </div>
-      </a>
+      <div className="xrpl-apex-event">
+        
+      </div>
     );
   }
   return null;
@@ -273,7 +278,7 @@ export function NavWrapper(props) {
   return (
     <nav
       className="top-nav navbar navbar-expand-lg navbar-dark fixed-top"
-      style={props.belowAlertBanner ? { marginTop: "46px" } : {}}
+      style={props.belowAlertBanner ? { marginTop: "52px" } : {}}
     >
       {props.children}
     </nav>

static/css/devportal2024-v1.css

@@ -37,6 +37,7 @@
     object-fit: cover;
     content: url("../img/home-hero.svg");
     margin-bottom: 24px;
+    margin-top: 24px;
     @media (min-width: 992px) {
       min-height: 470px;
     }

styles/_pages.scss

@@ -1,52 +1,75 @@
 .web-banner {
   text-decoration: none;
   display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 46px;
-  color: $white;
-  background: var(--XRPL-Secondary-Blue-Purple, #7919FF);
-  padding: 7px 70px;
+  justify-content: space-between;
+  height: 52px;
+  background: #D919FF !important;
+  padding: 7px 35px;
+  font-family: "Work Sans";
   z-index: 9999;
   cursor: pointer;
   &:hover {
     text-decoration: none;
-    background: var(--XRPL-Blue-Purple-700, #4A00B2);
-    .button-icon {
-      animation: iconJitter 0.7s ease forwards;
+    color: $white;
+    .button-icon{
+      animation: iconJitter 1.65s ease-in-out forwards;
     }
   }
+  color: $white !important;
+  text-align: center;
+  font-family: "Work Sans";
+  font-size: 26px; // Further scaled down from 28px
+  font-style: normal;
+  font-weight: 600;
+  letter-spacing: -0.32px;
+  // Pseudo-element for the fill animation
+  &::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 0%;
+    height: 100%;
+    background-color: #7919FF;
+    z-index: 0;
+    transition: width 2s ease-out;
+  }
+
+  // On hover, expand the pseudo-element to cover the full width
+  &:hover::after {
+    width: 100%;
+  }
+
+  // Ensure direct children are above the pseudo-element
+  > * {
+    position: relative;
+    z-index: 1;
+  }
+
   @media (max-width: 991px) {
     padding: 0 20px;
   }
-
-  .banner-content {
+  .banner-button{
     display: flex;
     align-items: center;
-    gap: 24px;
-    justify-content: flex-start;
-    flex-wrap: nowrap;
-
-    @media (max-width: 524px) {
-      gap: 8px;
-    }
-
-    @media (max-width: 991px) {
-      max-width: 100%;
+    gap: 14.5px;
+    img{
+      width: 24.5px; 
+      height: 33.7px;
     }
   }
-
   .event-info {
-    color: #fff;
-    font: 500 18px/1 Work Sans, -apple-system, Roboto, Helvetica, sans-serif;
-    align-self: stretch;
-    margin: auto 0;
 
     @media (max-width: 524px) {
-      font-size: 12px;
+      font-size: 15px;
     }
   }
 
+  .banner-event-details {
+    display: flex;
+    gap: 32px;
+  }
+
   .ticket-button {
     border: 1px solid var(--XRPL-Primary-White, #fff);
     display: flex;
@@ -59,37 +82,29 @@
     text-align: center;
     letter-spacing: -0.16px;
     padding: 8px 16px;
-    font: 600 18px/1 Work Sans Apex, -apple-system, Roboto, Helvetica, sans-serif;
+    font: 600 15px/1 Work Sans ;
     cursor: pointer;
     white-space: nowrap;
     text-decoration: none;
     transform-origin: center;
     transition: background-color 0.3s ease, color 0.3s ease;
 
     @media (max-width: 524px) {
-      font: 600 12px/1 Work Sans Apex, -apple-system, Roboto, Helvetica, sans-serif;
+      font: 600 9px/1 Work Sans ;
       width: 117px;
       height: 27px;
       padding: 6px 12px;
     }
   }
 
-  .button-text {
-    align-self: stretch;
-    margin: auto 0;
-    font-size: 16px;
-    @media (max-width: 524px) {
-      font-size: 12px;
-    }
-  }
-
   .button-icon {
     aspect-ratio: 0.71;
     object-fit: contain;
-    width: 13.8px;
+    width: 12.5px; // Scaled down from 13.8px
+    animation: none;
 
     @media (max-width: 524px) {
-      width: 10px;
+      width: 9px; // Scaled down from 10px
     }
 
     align-self: stretch;
@@ -119,9 +134,16 @@
 
 .web-banner a {
   text-decoration: none;
-  background-color: var(--XRPL-Secondary-Blue-Purple, #7919FF);
+  // 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;
+
+// // 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;
 }