docs: add react native paradise banner (#3334)

This PR adds a react native paradise banner to the react native gesture
handler documentation.


### Mobile


![image](https://github.com/user-attachments/assets/3dd8f298-2d7e-4836-b1d4-a98f998b7b4a)


### Tablet


![image](https://github.com/user-attachments/assets/c2df74e2-dd54-41fb-a8fa-4901ec7d6772)

### Desktop


![image](https://github.com/user-attachments/assets/7c892744-b3cd-47a2-a019-8e12fbd55d74)

docs/docusaurus.config.js

@@ -99,11 +99,11 @@ const config = {
           },
         ],
       },
-      // State of React Native survey banner
+      // React Native Paradise banner
       announcementBar: {
-        id: 'state-of-react-native-2024',
+        id: 'react-native-paradise-2025',
         content: ' ',
-        backgroundColor: '#b1dfd0',
+        backgroundColor: '#fff5f7',
         textColor: '#001a72',
       },
       footer: {

docs/src/theme/AnnouncementBar/Content/index.js

@@ -11,19 +11,19 @@ export default function AnnouncementBarContent(props) {
     <div className={clsx(styles.content, props.className)}>
       <img
         className={styles.logo}
-        src={useBaseUrl('/img/state-of-react-native-logo.svg')}
-        alt="State of React Native logo"
+        src={useBaseUrl('/img/react-native-paradise.svg')}
+        alt="React Native Paradise logo"
       />
-      <strong className={styles.headline}>State of React Native 2024</strong>
+      <strong className={styles.headline}>React Native Paradise</strong>
       <p className={styles.subText}>
-        Have a few minutes and want to shape the future of React Native?
+        Join us for one week of workshops hosted by React Native experts!
       </p>
       <a
         className={styles.link}
-        href="https://survey.stateofreactnative.com/"
+        href="https://paradise.swmansion.com/"
         target="_blank"
         rel="noreferrer noopener">
-        <span className={styles.linkTitle}>Fill out the survey now!</span>
+        <span className={styles.linkTitle}>Check the details</span>
         <div className={styles.linkArrowContainer}>
           <ArrowButton className={styles.linkArrow} />
         </div>

docs/src/theme/AnnouncementBar/Content/styles.module.css

@@ -54,24 +54,26 @@ a.link {
   grid-area: link;
   margin-left: auto;
   margin-right: 64px;
+  border-radius: 4px;
+  text-transform: uppercase;
 }
 
 .linkTitle {
   color: var(--swm-white);
-  font-weight: 500;
+  font-weight: bold;
   text-wrap: nowrap;
   transition: all 0.2s ease-in-out;
 }
 
 .link:hover {
-  background-color: var(--swm-white);
-  border-color: var(--swm-navy-light-100);
+  background-color: var(--swm-blue-light-100);
+  border-color: var(--swm-blue-light-100);
   text-decoration: none;
 }
 
 .link:hover .linkTitle,
 .link:hover .linkArrow {
-  color: var(--swm-navy-light-100);
+  color: var(--swm-white);
 }
 
 .linkArrow {

docs/src/theme/AnnouncementBar/index.js

@@ -32,10 +32,10 @@ function AnnouncementBar() {
     return null;
   }
 
-  // hide announcement bar at the end of the State of React Native survey
+  // hide announcement bar after 14.02.2025
   const today = new Date();
-  const endOfStateOfReactNative = new Date('2025-01-08T00:00:00.000Z');
-  if (today > endOfStateOfReactNative) {
+  const hideAfter = new Date('2025-02-14T00:00:00.000Z');
+  if (today > hideAfter) {
     return null;
   }