docs: add Radon IDE banner to TOCItems (#3592)

This PR adds a Radon IDE banner to the right-hand side part of the
documentation.


![image](https://github.com/user-attachments/assets/e7ee0fe9-e6fa-4f23-882d-07d783297aa3)

The banner rotates a couple of different labels and CTAs. It's only
visible on desktop.

Related to
software-mansion/react-native-reanimated#7631
and
software-mansion/react-native-reanimated#7634

Author: kacperkapusciak

packages/docs-gesture-handler/src/components/RadonBanner/index.tsx

@@ -0,0 +1,71 @@
+import React, { useRef } from 'react';
+import BrowserOnly from '@docusaurus/BrowserOnly';
+import styles from './styles.module.css';
+
+import ArrowRight from '@site/static/img/arrow-right.svg';
+
+const items = [
+  {
+    text: 'An all-in-one IDE for Expo & React Native.',
+    button: 'Try Radon IDE for free',
+  },
+  {
+    text: 'Streamline your React Native & Expo development.',
+    button: 'Install Radon IDE',
+  },
+  {
+    text: 'Set breakpoints and debug React Native apps with ease.',
+    button: 'Try Radon IDE for free',
+  },
+  {
+    text: 'Catch runtime errors right in your editor.',
+    button: 'Install Radon IDE',
+  },
+  {
+    text: 'Preview React Native components in isolation.',
+    button: 'Try Radon IDE',
+  },
+  {
+    text: 'Run, preview, and debug your React Native & Expo apps without leaving VSCode.',
+    button: 'Try Radon IDE for free',
+  },
+  {
+    text: 'Run, preview, and debug apps faster.',
+    button: 'Try our IDE for React Native',
+  },
+  {
+    text: 'Reduce context switching & debug faster.',
+    button: 'Try Radon IDE for free',
+  },
+  {
+    text: 'Reduce context switching & preview components instantly.',
+    button: 'Try Radon IDE for free',
+  },
+  {
+    text: 'Reduce context switching & streamline React Native and Expo development.',
+    button: 'Install Radon IDE',
+  },
+];
+
+function RadonBannerInner(): JSX.Element {
+  const item = useRef(items[Math.floor(Math.random() * items.length)]);
+
+  return (
+    <a
+      href="https://ide.swmansion.com/?utm_source=gesture-handler"
+      className={styles.container}>
+      <div className={styles.content}>
+        <p className={styles.text}>{item.current.text}</p>
+        <span className={styles.button}>
+          {item.current.button} <ArrowRight />
+        </span>
+      </div>
+      <span className={styles.ellipseLeft} />
+      <span className={styles.ellipseRight} />
+    </a>
+  );
+}
+
+export default function RadonBanner() {
+  return <BrowserOnly>{() => <RadonBannerInner />}</BrowserOnly>;
+}

packages/docs-gesture-handler/src/components/RadonBanner/styles.module.css

@@ -0,0 +1,83 @@
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 14px;
+  background-color: var(--swm-green-light-60);
+  border-radius: 4px;
+  position: relative;
+  overflow: hidden;
+  text-decoration: none !important;
+}
+
+.container:hover .button svg {
+  transform: translate(5px);
+}
+
+.container:hover .button {
+  border: 1px solid var(--swm-green-light-100);
+}
+
+.text {
+  font-size: 15px;
+  color: var(--swm-navy-light-100);
+  font-weight: 500;
+  z-index: 1;
+  position: relative;
+  margin-bottom: 8px;
+  text-wrap: balance;
+  text-align: center;
+}
+
+.button {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 5px 10px;
+  color: var(--swm-navy-light-100);
+  background-color: var(--swm-white);
+  transition: border 0.3s;
+  border: 1px solid var(--swm-navy-light-100);
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  z-index: 1;
+  gap: 4px;
+}
+
+.button svg {
+  transition: transform 0.3s;
+}
+
+.ellipseLeft {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  top: -20px;
+  left: -30px;
+  border-radius: 50%;
+  transform: rotate(-30deg);
+  background: linear-gradient(
+    184.24deg,
+    var(--swm-green-light-80) 3.45%,
+    var(--swm-green-light-40) 66.97%,
+    rgba(255, 255, 255, 0) 124.45%
+  );
+}
+
+.ellipseRight {
+  position: absolute;
+  width: 150px;
+  height: 150px;
+  bottom: -45px;
+  right: -70px;
+  border-radius: 50%;
+  transform: rotate(-120deg);
+  background: linear-gradient(
+    184.24deg,
+    var(--swm-green-light-80) 3.45%,
+    var(--swm-green-light-40) 66.97%,
+    rgba(255, 255, 255, 0) 124.45%
+  );
+}

packages/docs-gesture-handler/src/theme/TOCItems/index.js

@@ -1,3 +1,7 @@
 import { TOCItems } from '@swmansion/t-rex-ui';
 
-export default TOCItems;
+import RadonBanner from '../../components/RadonBanner';
+
+export default function TOCItemsWrapper(props) {
+  return <TOCItems slot={<RadonBanner />} {...props} />;
+}