docs: add State of React Native 2024 banner (#3300)

## Description

This PR adds a State of React Native 2024 banner to the top of Gesture
Handler documentation.

_Fill out the survey now_ button leads to
https://survey.stateofreactnative.com/
The banner **will automatically disappear January 8.**

### Desktop
<img width="1728" alt="image"
src="https://github.com/user-attachments/assets/58171699-b738-4d99-b8ad-3283e6258e95"
/>


### Tablet
<img width="786" alt="image"
src="https://github.com/user-attachments/assets/be1073c5-1c41-4b31-b4fd-2de80c1a3ea2"
/>



### Mobile

<img width="438" alt="image"
src="https://github.com/user-attachments/assets/338273f3-eaa3-4d06-bccc-16a603d3746c"
/>


## How to test?

```
cd docs
yarn
yarn start
```

docs/docusaurus.config.js

@@ -99,10 +99,12 @@ const config = {
           },
         ],
       },
+      // State of React Native survey banner
       announcementBar: {
+        id: 'state-of-react-native-2024',
         content: ' ',
-        backgroundColor: '#03c',
-        textColor: '#fff',
+        backgroundColor: '#b1dfd0',
+        textColor: '#001a72',
       },
       footer: {
         style: 'light',

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

@@ -2,23 +2,28 @@ import React from 'react';
 import clsx from 'clsx';
 import ArrowButton from './ArrowButton';
 import styles from './styles.module.css';
+import useBaseUrl from '@docusaurus/useBaseUrl';
 
 export default function AnnouncementBarContent(props) {
   return (
     <div className={clsx(styles.content, props.className)}>
       <div className={styles.wrapper}>
-        <strong className={styles.headline}>App.js Conf 2024</strong>
+        <img
+          className={styles.logo}
+          src={useBaseUrl('/img/state-of-react-native-logo.svg')}
+          alt="State of React Native logo"
+        />
+        <strong className={styles.headline}>State of React Native 2024</strong>
         <p className={styles.subText}>
-          An Expo & React Native conference in Europe is back, May 22-24 in
-          Kraków, Poland!
+          Have a few minutes and want to shape the future of React Native?
         </p>
       </div>
       <a
         className={styles.link}
-        href="https://appjs.co/"
+        href="https://survey.stateofreactnative.com/"
         target="_blank"
         rel="noreferrer noopener">
-        <span className={styles.linkTitle}>Learn More</span>
+        <span className={styles.linkTitle}>Fill out the survey now!</span>
         <div className={styles.linkArrowContainer}>
           <ArrowButton className={styles.linkArrow} />
         </div>

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

@@ -5,7 +5,14 @@
   margin: 0 auto;
   max-width: 1440px;
 
-  padding: 1rem 1.5rem;
+  padding: 8px 16px;
+}
+
+.logo {
+  height: 36px;
+  width: 36px;
+  margin: auto;
+  grid-area: logo;
 }
 
 .content a {
@@ -15,18 +22,22 @@
 .wrapper {
   display: flex;
   flex-direction: row;
-  gap: 1rem;
+  gap: 8px;
   align-items: center;
   justify-content: center;
 }
 
 .headline {
   font-size: 16px;
+  grid-area: headline;
+  text-wrap: nowrap;
 }
 
 p.subText {
   font-size: 14px;
+  text-wrap: balance;
   margin: 0;
+  grid-area: subText;
 }
 
 a.link {
@@ -38,29 +49,36 @@ a.link {
   flex-direction: row;
   align-items: center;
   gap: 6px;
-  font-size: 12px;
+  font-size: 14px;
   padding: 4px 12px;
-  border: 1px solid var(--swm-off-white);
-  border-radius: 6px;
-  background-color: var(--swm-off-white);
-  transition: 0.2s ease-in-out;
+  border: 1px solid var(--swm-navy-light-100);
+  background-color: var(--swm-navy-light-100);
+  transition: all 0.2s ease-in-out;
 }
 
 .linkTitle {
-  color: #03c;
+  color: var(--swm-white);
   font-weight: 500;
+  text-wrap: nowrap;
+  transition: all 0.2s ease-in-out;
 }
 
 .link:hover {
-  background-color: var(--swm-navy-light-20);
-  border-color: var(--swm-navy-light-20);
+  background-color: var(--swm-white);
+  border-color: var(--swm-navy-light-100);
   text-decoration: none;
 }
 
+.link:hover .linkTitle,
+.link:hover .linkArrow {
+  color: var(--swm-navy-light-100);
+}
+
 .linkArrow {
   width: 16px;
   height: 16px;
-  color: #03c;
+  color: var(--swm-white);
+  transition: all 0.2s ease-in-out;
 }
 
 .linkArrowContainer {
@@ -73,15 +91,27 @@ a.link {
     gap: 12px;
   }
   .wrapper {
-    flex-direction: column;
-    align-items: flex-start;
+    display: grid;
+    grid-template-columns: 50px 1fr;
+    grid-template-areas:
+      'logo headline'
+      'logo subText';
+    gap: 0;
+    align-items: center;
   }
 }
 
 @media screen and (max-width: 768px) {
   .content {
     flex-direction: column;
     align-items: flex-start;
-    padding: 1rem 1.5rem;
+    padding: 8px 16px;
+  }
+}
+
+@media screen and (max-width: 450px) {
+  .link {
+    width: 100%;
+    justify-content: center;
   }
 }

docs/src/theme/AnnouncementBar/index.js

@@ -33,10 +33,10 @@ function AnnouncementBar() {
     return null;
   }
 
-  // hide announcement bar after app.js
+  // hide announcement bar at the end of the State of React Native survey
   const today = new Date();
-  const endOfAppJS = new Date('2024-05-25T00:00:00.000Z');
-  if (today > endOfAppJS) {
+  const endOfStateOfReactNative = new Date('2025-01-08T00:00:00.000Z');
+  if (today > endOfStateOfReactNative) {
     return null;
   }
 

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

@@ -5,7 +5,6 @@
 .announcementBar {
   display: flex;
   font-size: var(--docusaurus-announcement-bar-font-size);
-  background-image: url(/static/img/appjs.svg), linear-gradient(#03c, #03c);
   background-position: 0;
   background-size: cover;
   color: var(--swm-off-white);
@@ -34,6 +33,11 @@
   opacity: 1;
 }
 
+.announcementBarClose svg g {
+  stroke: var(--swm-navy-light-100);
+  stroke-width: 2;
+}
+
 .announcementBarContent {
   flex: 1 1 auto;
 }
@@ -71,3 +75,11 @@
     display: none;
   }
 }
+
+@media screen and (max-width: 450px) {
+  .buttonContainer {
+    padding-top: 0;
+    align-items: center;
+    justify-content: center;
+  }
+}