docs: add banner rotator (#3696)

## Description

Replaces appjs banner with TopPromoRotator component in navbar. Adds
paradise promo.
<img width="1702" height="607" alt="Screenshot 2026-02-26 at 13 23 50"
src="https://github.com/user-attachments/assets/f36d776e-dfb6-4ad9-9bff-3a0a0a7df39c"
/>

Author: p-malecki

docs/src/components/HandIcon/index.tsx

@@ -1,6 +1,6 @@
 .screens {
   position: absolute;
-  top: 2rem;
+  top: calc(3rem + 50px);
   right: 0;
   overflow: hidden;
   min-height: 55%;
@@ -10,41 +10,41 @@
 
 @media (min-width: 2920px) {
   .screens {
-    top: 3rem;
+    top: calc(3rem + 50px);
     min-height: 70%;
   }
 }
 @media (min-width: 3000px) and (min-height: 1500px) {
   .screens {
-    top: -3vh;
+    top: calc(-3vh + 50px);
     min-height: 50%;
   }
 }
 
 @media (min-width: 3000px) and (min-height: 2000px) {
   .screens {
-    top: 3vh;
+    top: calc(3vh + 50px);
     min-height: 35%;
   }
 }
 
 @media (max-width: 2000px) {
   .screens {
-    top: 4rem;
+    top: calc(4rem + 50px);
     min-height: 70%;
   }
 }
 
 @media (max-width: 1350px) {
   .screens {
-    top: 9rem;
+    top: calc(9rem + 50px);
     min-height: 60%;
   }
 }
 
 @media (max-width: 996px) {
   .screens {
-    top: 2rem;
+    top: calc(2rem + 50px);
   }
 }
 

docs/src/components/Hero/ScreenSequence/styles.module.css

@@ -0,0 +1,97 @@
+import clsx from 'clsx';
+import React, { type ReactNode, useEffect, useMemo, useState } from 'react';
+
+import HandIcon from '../HandIcon';
+import styles from './styles.module.css';
+
+type Promo = {
+  key: string;
+  href: string;
+  bg: string;
+  buttonLabel: string;
+  label: ReactNode;
+};
+
+const PROMOS: readonly Promo[] = [
+  {
+    key: 'appjs',
+    href: 'https://appjs.co?origin=swmansion_bar',
+    bg: '#C7CEF5',
+    buttonLabel: 'Get your tickets',
+    label: (
+      <>
+        <strong>App.js Conf 2026</strong>
+        <span className={styles.hiddenOnMobile}>
+          {' '}
+          is just around the corner!
+        </span>
+      </>
+    ),
+  },
+  {
+    key: 'paradise',
+    href: 'https://paradise.swmansion.com?origin=swmansion_bar',
+    bg: '#FFF4C0',
+    buttonLabel: 'Learn more',
+    label: (
+      <>
+        <strong>React Native Paradise</strong>
+        <span className={styles.hiddenOnMobile}>
+          {' '}
+          - a week of advanced RN workshops in Croatia!
+        </span>
+      </>
+    ),
+  },
+];
+
+export default function TopPromoRotator() {
+  const promos = useMemo(() => PROMOS, []);
+
+  const [index, setIndex] = useState(0);
+
+  useEffect(() => {
+    const id = window.setInterval(() => {
+      setIndex(i => (i + 1) % promos.length);
+    }, 5_000);
+
+    return () => window.clearInterval(id);
+  }, [promos.length]);
+
+  const active = promos[index];
+
+  const barHeight = 50;
+  const translateY = `translateY(-${index * barHeight}px)`;
+
+  return (
+    <div
+      className={clsx(styles.wrapper)}
+      style={{
+        backgroundColor: active.bg,
+        transition: 'background-color 600ms ease',
+      }}>
+      <div
+        className={styles.slider}
+        style={{
+          transform: translateY,
+          transition: 'transform 700ms cubic-bezier(0.22, 1, 0.36, 1)',
+        }}>
+        {promos.map(p => (
+          <a
+            key={p.key}
+            href={p.href}
+            target="_blank"
+            rel="noopener noreferrer"
+            className={styles.banner}>
+            <span>{p.label}</span>
+            <HandIcon aria-hidden="true" className={styles.icon} />
+            <span className={styles.underline}>{p.buttonLabel}</span>
+          </a>
+        ))}
+      </div>
+      <span className="sr-only">
+        {typeof active.label === 'string' ? active.label : ''}
+      </span>
+    </div>
+  );
+}

docs/src/components/TopPromoRotator/index.tsx

@@ -0,0 +1,77 @@
+.wrapper {
+  position: relative;
+  height: 50px;
+  min-height: 50px;
+  max-height: 50px;
+  width: 100%;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1rem;
+  font-weight: 500;
+}
+
+.slider {
+  position: absolute;
+  inset: 0;
+  will-change: transform;
+}
+
+.banner {
+  display: flex;
+  height: 50px;
+  min-height: 50px;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0 0.75rem;
+  font-size: 1rem;
+  font-weight: 500;
+  line-height: 1;
+  color: #001a72;
+  text-align: center;
+  text-decoration: none;
+  transition: background-color 300ms ease-out;
+  white-space: nowrap;
+  box-sizing: border-box;
+}
+
+.banner:hover {
+  color: #001a72 !important;
+  text-decoration: none !important;
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+.banner:hover * {
+  text-decoration: none !important;
+}
+
+.banner:hover .underline {
+  text-decoration: underline !important;
+  text-underline-offset: 2px;
+}
+
+.hiddenOnMobile {
+  display: inline;
+}
+
+@media (max-width: 768px) {
+  .hiddenOnMobile {
+    display: none;
+  }
+}
+
+.icon {
+  flex-shrink: 0;
+  width: 28px;
+  height: 28px;
+  transform: rotate(-90deg);
+  display: block;
+}
+
+.underline {
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}

docs/src/components/TopPromoRotator/styles.module.css

@@ -1,12 +1,16 @@
 import React from 'react';
 import { Navbar } from '@swmansion/t-rex-ui';
+import TopPromoRotator from '@site/src/components/TopPromoRotator';
 
 export default function NavbarWrapper(props) {
   return (
-    <Navbar
-      useLandingLogoDualVariant={true}
-      isAlgoliaActive={false}
-      {...props}
-    />
+    <div style={{ display: 'flex', flexDirection: 'column', flexShrink: 0 }}>
+      <TopPromoRotator />
+      <Navbar
+        useLandingLogoDualVariant={true}
+        isAlgoliaActive={false}
+        {...props}
+      />
+    </div>
   );
 }