Merge pull request #3001 from XRPLF/apex-banner-2025-v2

Apex banner 2025 v2

Author: AKCodez

.gitignore

@@ -7,7 +7,6 @@ yarn-error.log
 /.idea
 *.iml
 .venv/
-
 _code-samples/*/js/package-lock.json
 
 # PHP

@theme/components/Navbar/Navbar.tsx

@@ -1,21 +1,63 @@
 import * as React from "react";
-import styled from "styled-components";
 import { useThemeConfig, useThemeHooks } from "@redocly/theme/core/hooks";
 import { LanguagePicker } from "@redocly/theme/components/LanguagePicker/LanguagePicker";
 import { slugify } from "../../helpers";
 import { Link } from "@redocly/theme/components/Link/Link";
 import { ColorModeSwitcher } from "@redocly/theme/components/ColorModeSwitcher/ColorModeSwitcher";
 import { AlgoliaSearch } from "./AlgoliaSearch";
+import arrowUpRight from "../../../static/img/icons/arrow-up-right-custom.svg";
 
 // @ts-ignore
 
 const alertBanner = {
-  show: false,
-  message: "XRP Ledger Apex is back in Amsterdam",
-  button: "Register Now",
-  link: "https://www.xrpledgerapex.com/?utm_source=email&utm_medium=email_marketing&utm_campaign=EVENTS_XRPL_Apex_2024_Q2&utm_term=events_page_cta_button",
+  show: true,
+  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_pencilbanner",
+  date: "JUNE 10-12",
 };
+export function AlertBanner({ message, date, button, link, show }) {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+  const bannerRef = React.useRef(null);
+
+  React.useEffect(() => {
+    const banner = bannerRef.current;
+    if (!banner) return;
+    const handleMouseEnter = () => {
+      banner.classList.add('has-hover');
+    };
+    // Attach the event listener
+    banner.addEventListener('mouseenter', handleMouseEnter);
+    // Clean up the event listener on unmount
+    return () => {
+      banner.removeEventListener('mouseenter', handleMouseEnter);
+    };
+  }, []);
 
+  if (show) {
+    return (
+      <a
+        href={link}
+        target="_blank"
+        ref={bannerRef}
+        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">{translate(message)}</div>
+          <div className="event-date">{translate(date)}</div>
+        </div>
+        <div className="banner-button">
+          <div className="button-text">{translate(button)}</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 +91,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 +129,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 +158,6 @@ export function Navbar(props) {
   );
 }
 
-const StyledColorModeSwitcher = styled(ColorModeSwitcher)`
-  padding: 10px;
-`;
-
-export function AlertBanner({ message, button, link, show }) {
-  if (show) {
-    return (
-      <div className="top-banner fixed-top">
-        <div className="inner-apex">
-          <span>
-            <p className="mb-0 apex-banner-text">{message}</p>
-          </span>
-          <span>
-            <Link to={link} target="_blank" className="apex-btn">
-              {button}
-            </Link>
-          </span>
-        </div>
-      </div>
-    );
-  }
-  return null;
-}
-
 export function TopNavCollapsible({ children }) {
   return (
     <div
@@ -268,7 +282,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

@@ -1,85 +1,156 @@
-.top-banner {
+.web-banner {
+  text-decoration: none;
   display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 46px;
-  background: url(../img/backgrounds/bg-apex-banner.svg);
-  background-position: center !important;
-  background-size: cover;
-  background-color: $blue-purple-500;
-  color: $white;
+  justify-content: space-between;
+  height: $banner-height;
+  background: #D919FF !important;
+  padding: 7px 35px;
+  font-family: "Work Sans";
+  z-index: 9999;
+  cursor: pointer;
+  
+  &:hover {
+    text-decoration: none;
+    color: $white;
+    .button-icon{
+      animation: iconJitter 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+      transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
+    }
+  }
+  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: 100%; // Full width so that we can scale it
+    height: 100%;
+    background-color: #7919FF;
+    z-index: 0;
+    transform: scaleX(0);       // Start scaled down to 0
+    transform-origin: left;     // Scale from the left edge
+    transition: transform 0.7s cubic-bezier(0.7, 0, 0.84, 0);
+    will-change: transform;     // Hint for smoother animations
+  }
 
-  .inner-apex {
+  // On hover, scale to full width
+  &:hover::after {
+    transform: scaleX(1);
+    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
+  }
+  // Ensure direct children are above the pseudo-element
+  > * {
+    position: relative;
+    z-index: 1;
+  }
+  @media (max-width: 768px) {
+    font-size: 18px;
+    padding: 11px 35px;
+    .banner-button{
+      gap: 11px !important;
+    }
+    .button-text{
+      margin-bottom: 4px;
+    }
+  }
+  @media (max-width: 564px) {
+    font-size: 15px;
+    padding: 9px 40px;
+    .button-text{
+      margin-bottom: 0px;
+    }
+    .banner-event-details{
+      gap: 0px !important;
+      flex-direction: column;
+      text-align: left;
+      line-height: 21px;
+      .event-date{
+        position: relative;
+        top: -5px;
+      }
+    }
+    .banner-button{
+      align-self: baseline;
+      gap: 8px !important;
+      margin-top: -2px !important;
+      padding-top: 0px !important;
+    }
+  }
+  .banner-button{
     display: flex;
-    justify-content: center;
     align-items: center;
-
-  }
-
-  .apex-banner-text {
-    color: #FFF;
-    font-family: "Work Sans";
-    font-size: 20px;
-    font-style: normal;
-    font-weight: 600;
-    line-height: 24px;
+    gap: 14.5px;
+    padding-top: 1px;
+    img{
+      width: 24.5px; 
+      height: 33.7px;
+      @media (max-width: 768px) {
+        width: 15.5px;
+        height: 17px;
+        margin-top: 4px;
+      }
+      @media (max-width: 564px) {
+        width: 14.5px;
+        height: 13.85px;
+      }
+    }
   }
 
-  .apex-btn {
-    margin-left: 16px;
-    color: var(--Gray-100, #000) !important;
-    font-family: "Work Sans";
-    font-size: 16px;
-    font-style: normal;
+  .banner-event-details {
     display: flex;
-    justify-content: center;
-    font-weight: 600;
-    align-items: center;
-    line-height: 100%;
-    letter-spacing: -0.16px;
-    padding: 2px 4px;
-    border-radius: 100px !important;
-    background: #18FF83 !important;
-    text-decoration: none !important;
-    width: 135px;
-    height: 28px;
+    gap: 32px;
   }
 
-  @media (max-width: 1024px) {
-    background: url(../img/backgrounds/bg-apex-banner-md.svg);
 
-    .apex-banner-text {
-      font-size: 18px;
-    }
+  .button-icon {
+    transform-style: preserve-3d;
+    aspect-ratio: 0.71;
+    object-fit: contain;
+    animation: none;
+    transform: rotateZ(0deg);
+    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); // Adjust duration as needed
+    align-self: stretch;
+    margin: auto 0;
+    transform-style: preserve-3d;
+  }
 
-    .apex-btn {
-      width: 122px;
-      height: 26px;
-      font-size: 14px;
-      letter-spacing: -0.14px;
+  @keyframes iconJitter {
+    from {
+      transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotateZ(0deg) skew(0deg, 0deg);
+    }
+    to {
+      transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotateZ(45deg) skew(0deg, 0deg);
     }
   }
 
-  @media (max-width: 535px) {
-    background: url(../img/backgrounds/bg-apex-banner-sm.svg);
+}
 
-    .apex-btn {
-      margin-left: 0;
-      width: 85px;
-      height: 16px;
-      font-size: 10px;
-      line-height: 100%;
-      letter-spacing: -0.1px;
-    }
-
-    .apex-banner-text {
-      font-size: 12px;
-      line-height: 12px;
-    }
+.web-banner a {
+  text-decoration: none;
+}
 
-    .inner-apex {
-      flex-direction: column;
-      gap: 8px;
-    }
+.button-icon {
+  animation: iconJitter 0.7s ease-in-out;
+  animation-iteration-count: 1;
+  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
+}
+@keyframes iconReturn {
+  from {
+    transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotateZ(45deg) skew(0deg, 0deg);
+  }
+  to {
+    transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotateZ(0deg) skew(0deg, 0deg);
   }
+}
+/* After the banner has been hovered once, on unhover run the reverse animation */
+.web-banner.has-hover:not(:hover) .button-icon {
+  animation: iconReturn 0.7s ease-in-out forwards;
+  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
 }

static/img/backgrounds/bg-apex-banner-md.svg

@@ -1,6 +1,6 @@
 /* Top navigation ----------------------------------------------------------- */
 $nav-height: 80px;
-$banner-height: 0; // Apex 2024 banner was 46px. 0 for no pencil banner.
+$banner-height: 52px; // Apex 2025 banner is 52px. 0 for no pencil banner.
 
 [data-component-name="layouts/RootLayout"] {
   padding-top: $nav-height + $banner-height;