Add Hire us section to docs

README.md

@@ -61,3 +61,11 @@ This project has been build 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 Gesture Handler or other Software Mansion libraries.
+
+## Gesture Handler 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 gestures 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,71 @@
+.hireUsSectionWrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2.5rem;
+  margin-bottom: 16rem;
+  margin-top: 4.5rem;
+}
+
+@media (max-width: 768px) {
+  .hireUsSectionWrapper {
+    gap: 1.5rem;
+    margin-bottom: 5rem !important;
+  }
+  .hireUsTitleContainer h2 {
+    font-size: 42px !important;
+  }
+  .hireUsSectionBody {
+    font-size: 20px !important;
+  }
+}
+
+@media (max-width: 420px) {
+  .hireUsSectionWrapper {
+    margin-bottom: 2rem !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-wrap: balance;
+  text-align: center;
+  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

@@ -10,7 +10,6 @@
 
 .sponsorsBrand {
   margin-top: 5rem;
-  margin-bottom: 7.5rem;
   display: flex;
   justify-content: center;
   gap: 4rem;

docs/src/pages/index.js

@@ -8,6 +8,7 @@ import Playground from '@site/src/components/Playground';
 import GestureFeatures from '@site/src/components/GestureFeatures';
 import Testimonials from '@site/src/components/Testimonials';
 import Sponsors from '@site/src/components/Sponsors';
+import HireUsSection from '../components/HireUsSection';
 
 function Home() {
   const context = useDocusaurusContext();
@@ -28,6 +29,7 @@ function Home() {
         <GestureFeatures />
         <Testimonials />
         <Sponsors />
+        <HireUsSection />
       </div>
     </Layout>
   );