Add Hire us section to docs (#6003)

<img width="688" alt="image"
src="https://github.com/software-mansion/react-native-reanimated/assets/59940332/8af3df0d-bd69-4ef7-a546-d1f2b1cf661f">

We added `Hire us` section to help clients recognise and contact us
directly from documentation's landing page.

Additionally we expanded `README.md` by adding information about Discord
and SWM.

README.md

@@ -49,3 +49,11 @@ This project has been built and is maintained thanks to the support from [Shopif
 [![shopify](https://avatars1.githubusercontent.com/u/8085?v=3&s=100 'Shopify.com')](https://shopify.com)
 [![expo](https://avatars2.githubusercontent.com/u/12504344?v=3&s=100 'Expo.io')](https://expo.io)
 [![swm](https://logo.swmansion.com/logo?color=white&variant=desktop&width=150&tag=react-native-reanimated-github 'Software Mansion')](https://swmansion.com)
+
+## Community Discord
+
+[Join the Software Mansion Community Discord](https://discord.swmansion.com) to chat about Reanimated or other Software Mansion libraries.
+
+## Reanimated is created by Software Mansion
+
+Since 2012 [Software Mansion](https://swmansion.com) is a software agency with experience in building web and mobile apps. We are Core React Native Contributors and experts in dealing with all kinds of React Native issues. We can help you build your next dream product – [Hire us](https://swmansion.com/contact#contact-form).

docs/src/components/HireUsSection/index.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import HomepageButton from '../HomepageButton';
+import styles from './styles.module.css';
+
+const HireUsSection = () => {
+  return (
+    <div className={styles.hireUsSectionWrapper}>
+      <div className={styles.hireUsTitleContainer}>
+        <h2>We are Software Mansion.</h2>
+      </div>
+      <p className={styles.hireUsSectionBody}>
+        React Native Core Contributors and experts in dealing with all kinds of
+        React Native issues. No matter if you need help with animations or React
+        Native development we can help.
+      </p>
+
+      <div className={styles.hireUsButton}>
+        <HomepageButton
+          backgroundStyling={styles.buttonNavyStyling}
+          borderStyling={styles.buttonNavyBorderStyling}
+          href="https://swmansion.com/contact#contact-form"
+          title="Hire us"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default HireUsSection;

docs/src/components/HireUsSection/styles.module.css

@@ -0,0 +1,72 @@
+.hireUsSectionWrapper {
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  align-items: center;
+  gap: 2.5rem;
+  width: 60%;
+  margin: 16rem auto 12rem auto;
+  padding-bottom: 2rem;
+}
+@media (max-width: 1440px) {
+  .hireUsSectionWrapper {
+    width: 75%;
+  }
+}
+
+@media (max-width: 768px) {
+  .hireUsSectionWrapper {
+    width: 80%;
+    gap: 1.5rem;
+  }
+  .hireUsTitleContainer h2 {
+    font-size: 42px !important;
+  }
+  .hireUsSectionBody {
+    font-size: 20px !important;
+  }
+}
+
+.hireUsTitleContainer {
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+  justify-content: center;
+  align-items: center;
+}
+
+.hireUsTitleContainer h2 {
+  text-align: center;
+  font-size: 64px;
+  font-weight: 500;
+}
+
+.hireUsSectionBody {
+  font-size: 24px;
+  text-align: center;
+  text-wrap: balance;
+  font-weight: 400;
+}
+
+.buttonNavyStyling {
+  background-color: var(--swm-navy-light-100);
+  padding: 20px 50px;
+  color: var(--swm-off-white);
+}
+
+.buttonNavyStyling svg {
+  stroke: var(--swm-off-white);
+}
+
+.buttonNavyStyling:hover {
+  background-color: transparent;
+  color: var(--swm-navy-light-100);
+}
+
+.buttonNavyStyling:hover svg {
+  stroke: var(--swm-navy-light-100);
+}
+
+.buttonNavyBorderStyling {
+  border: 1px solid var(--swm-navy-light-100);
+}

docs/src/components/Sponsors/styles.module.css

@@ -6,7 +6,7 @@
   width: 100%;
   height: 100%;
 
-  margin: 180px 0 120px 0;
+  margin-top: 180px;
 }
 
 @media (max-width: 996px) {

docs/src/pages/index.tsx

@@ -7,6 +7,7 @@ import ReanimatedFeatures from '@site/src/components/ReanimatedFeatures';
 import Animations from '@site/src/components/Animations';
 import Testimonials from '@site/src/components/Testimonials';
 import Sponsors from '@site/src/components/Sponsors';
+import HireUsSection from '../components/HireUsSection';
 
 export default function Home(): JSX.Element {
   return (
@@ -17,6 +18,7 @@ export default function Home(): JSX.Element {
         <Animations />
         <Testimonials />
         <Sponsors />
+        <HireUsSection />
       </div>
     </Layout>
   );

docs/src/theme/Footer/Layout/styles.module.css

@@ -29,7 +29,7 @@ footer {
       var(--swm-purple-light-40) 100%
     );
   width: 100%;
-  height: 50vh;
+  height: 40vh;
 
   z-index: -100;
 }