docs: Replace HireUsSection with @swmansion/t-rex-ui component (#6274)

**This PR bumps `@swmansion/t-rex-ui` to 0.0.13** 

With new release of `@swmansion/t-rex-ui` we can replace HireUsSection
with reusable component. Additionally, there were changes to definition
of HireUs button in TOC, but the desired outcome is - after update it
should stay the same.

Section:
<img width="952" alt="image"
src="https://github.com/user-attachments/assets/f267bd15-b4dc-4679-afb1-2f7d297a550b">
<img width="952" alt="image"
src="https://github.com/user-attachments/assets/f5346cf6-ded5-4c88-8565-f9590dc5b42e">

TOC:
<img width="204" alt="image"
src="https://github.com/user-attachments/assets/6d99ce71-8384-4570-895e-6c9eadaee0c1">
<img width="204" alt="image"
src="https://github.com/user-attachments/assets/fd7807a2-19bf-4579-848f-b8a1841be8dc">

## Test plan
1. In `docs-reanimated` run `yarn && yarn start`
2. Check HireUsSection on landing in dark and light mode, check the link
- the link should have correct source
3. Do the same to HireUs banner in docs' TOC

packages/docs-reanimated/package.json

@@ -28,7 +28,7 @@
     "@mdx-js/react": "^1.6.22",
     "@mui/material": "^5.12.0",
     "@shopify/flash-list": "^1.6.3",
-    "@swmansion/t-rex-ui": "^0.0.12",
+    "@swmansion/t-rex-ui": "^0.0.13",
     "@vercel/og": "^0.6.2",
     "babel-polyfill": "^6.26.0",
     "babel-preset-expo": "^9.2.2",

packages/docs-reanimated/src/css/colors.css

@@ -132,6 +132,11 @@
   --ifm-toc-link-color: var(--swm-navy-light-60);
   --ifm-toc-link-color-active: var(--swm-navy-light-100);
 
+  --swm-hire-us-toc: var(--swm-navy-light-100);
+  --swm-hire-us-toc-color: var(--swm-off-white);
+  --swm-hire-us-toc-color-hover: var(--swm-navy-light-100);
+  --swm-hire-us-toc-border-hover: var(--swm-navy-light-100);
+
   /* Details section */
   --swm-details-foreground: var(--swm-purple-light-20);
   --swm-details-background: var(--swm-purple-light-100);
@@ -239,6 +244,12 @@
 
   --swm-landing-sponsors-color: var(--ifm-font-color-base);
 
+  /* Hire Us Section */
+
+  --swm-hire-us-section-title: var(--swm-purple-light-80);
+  --swm-hire-us-section: var(--swm-navy-light-100);
+  --swm-hire-us-section-color: var(--swm-off-white);
+
   /* Cards */
   --swm-card-background: var(--swm-background);
   --swm-card-border: var(--swm-navy-light-20);
@@ -308,6 +319,11 @@
   --ifm-toc-link-color: var(--swm-navy-light-40);
   --ifm-toc-link-color-active: var(--swm-off-white);
 
+  --swm-hire-us-toc: var(--swm-blue-light-80);
+  --swm-hire-us-toc-color: var(--swm-off-white);
+  --swm-hire-us-toc-color-hover: var(--swm-navy-light-40);
+  --swm-hire-us-toc-border-hover: var(--swm-navy-light-40);
+
   /* Details section */
   --swm-details-foreground: var(--swm-purple-dark-120);
   --swm-details-background: var(--swm-purple-dark-140);
@@ -406,6 +422,12 @@
 
   --swm-landing-sponsors-color: var(--swm-off-white);
 
+  /* Hire Us Section */
+
+  --swm-hire-us-section-title: var(--swm-purple-dark-100);
+  --swm-hire-us-section: var(--swm-purple-dark-100);
+  --swm-hire-us-section-color: var(--swm-off-white);
+
   /* Cards */
   --swm-card-background: var(--swm-navy);
   --swm-card-border: var(--swm-navy-dark-60);

packages/docs-reanimated/src/pages/index.module.css

@@ -20,3 +20,26 @@ html {
   align-items: center;
   justify-content: center;
 }
+
+.hireUsContainer {
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  align-items: center;
+  gap: 2.5rem;
+  width: 60%;
+  margin: 4rem auto 0;
+  padding-bottom: 2rem;
+}
+@media (max-width: 1440px) {
+  .hireUsContainer {
+    width: 75%;
+  }
+}
+
+@media (max-width: 768px) {
+  .hireUsContainer {
+    width: 80%;
+    gap: 1.5rem;
+  }
+}

packages/docs-reanimated/src/pages/index.tsx

@@ -8,7 +8,7 @@ import Animations from '@site/src/components/Animations';
 import Testimonials from '@site/src/components/Testimonials';
 import FooterBackground from '../components/FooterBackground';
 import Sponsors from '@site/src/components/Sponsors';
-import HireUsSection from '../components/HireUsSection';
+import { HireUsSection } from '@swmansion/t-rex-ui';
 
 export default function Home(): JSX.Element {
   return (
@@ -19,7 +19,13 @@ export default function Home(): JSX.Element {
         <Animations />
         <Testimonials />
         <Sponsors />
-        <HireUsSection />
+        <div className={styles.hireUsContainer}>
+          <HireUsSection
+            href={
+              'https://swmansion.com/contact/projects?utm_source=reanimated&utm_medium=docs'
+            }
+          />
+        </div>
       </div>
       <FooterBackground />
     </Layout>

packages/docs-reanimated/yarn.lock

@@ -3905,10 +3905,10 @@
     "@svgr/plugin-jsx" "^6.5.1"
     "@svgr/plugin-svgo" "^6.5.1"
 
-"@swmansion/t-rex-ui@^0.0.12":
-  version "0.0.12"
-  resolved "https://registry.npmjs.org/@swmansion/t-rex-ui/-/t-rex-ui-0.0.12.tgz#fffdc8a222773fb77019d188a60dd60decbe8ddf"
-  integrity sha512-l2gtWH6Z9CVl1GoZoypkcMM0mYBShOBvE13ct40sKc7LwqKtFv+PCrdYwMbGcd2kj95fhG7dTyueZW2pMP6R1w==
+"@swmansion/t-rex-ui@^0.0.13":
+  version "0.0.13"
+  resolved "https://registry.npmjs.org/@swmansion/t-rex-ui/-/t-rex-ui-0.0.13.tgz#9602168498ce1b6e74dad855982c719676828e79"
+  integrity sha512-PLUkfb8bN/wu8I/rY8KKb9xztxjPnNf9O8Ash40dKIkN0lcGERIgOb6HrVv9I5uyeszxHhVOS0S2tu/seVbO+w==
   dependencies:
     "@docsearch/react" "^3.6.0"
     "@docusaurus/core" "^2.4.3"