[Docs] Add announcement Chip (#4366)

## Description

Adds announcement chip about v3


| Dark | Light |
|--------|-------|
| <img width="590" height="280" alt="image"
src="https://github.com/user-attachments/assets/6281491a-4521-4ccb-b84a-dada0a461604"
/> | <img width="590" height="280" alt="image"
src="https://github.com/user-attachments/assets/8538fc89-f33a-425f-90d0-3f2bbaba396b"
/> |



https://github.com/user-attachments/assets/73184439-9f22-4134-8c9d-f778dd37b82e



## Test plan

Read docs 🤓

Author: m-bert

packages/docs-gesture-handler/src/components/Hero/AnnouncementChip/index.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import styles from './styles.module.css';
+
+const AnnouncementChip: React.FC<{
+  label: string;
+  linkLabel: string;
+  href: string;
+}> = ({ label, linkLabel, href }) => {
+  return (
+    <a href={href} target="_blank" rel="noreferrer" className={styles.chip}>
+      <span className={styles.label}>{label}</span>
+      <span className={styles.link}>{linkLabel}</span>
+    </a>
+  );
+};
+
+export default AnnouncementChip;

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

@@ -0,0 +1,47 @@
+.chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.6rem;
+  padding: 0.7rem 1.5rem;
+  border-radius: 999px;
+  border: 1px solid var(--swm-purple-light-100);
+  background: color-mix(in srgb, var(--swm-purple-light-100) 15%, transparent);
+  text-decoration: none;
+  transition:
+    background-color 0.2s ease,
+    transform 0.2s ease;
+}
+
+.chip:hover {
+  text-decoration: none;
+  background: color-mix(in srgb, var(--swm-purple-light-100) 28%, transparent);
+  transform: scale(1.02);
+}
+
+.label {
+  font-size: 15px;
+  font-weight: 500;
+  color: var(--swm-landing-heading);
+  white-space: nowrap;
+}
+
+.link {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--swm-purple-light-100);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+  white-space: nowrap;
+}
+
+@media (max-width: 420px) {
+  .chip {
+    padding: 0.6rem 1rem;
+    gap: 0.4rem;
+  }
+
+  .label,
+  .link {
+    font-size: 13px;
+  }
+}

packages/docs-gesture-handler/src/components/Hero/StartScreen/index.tsx

@@ -1,3 +1,4 @@
+import AnnouncementChip from '@site/src/components/Hero/AnnouncementChip';
 import HomepageButton from '@site/src/components/HomepageButton';
 import React from 'react';
 
@@ -8,6 +9,11 @@ const StartScreen = () => {
     <section className={styles.hero}>
       <div className={styles.heading}>
         <div>
+          <AnnouncementChip
+            label="Gesture Handler v3 is out"
+            linkLabel="What's new"
+            href="https://swmansion.com/blog/introducing-gesture-handler-3-0-hook-based-api-deeper-reanimated-integration-more-9185b0c8e305/"
+          />
           <h1 className={styles.headingLabel}>
             <span>React Native</span>
             <span>Gesture Handler</span>

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

@@ -15,6 +15,7 @@
   font-size: 64px;
   font-weight: 700;
 
+  margin-top: 2rem;
   line-height: 1.1;
   letter-spacing: 0;
   color: var(--swm-landing-heading);