diff --git a/README.md b/README.md index b8ac3a74dc3..066b673103b 100644 --- a/README.md +++ b/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). diff --git a/docs/src/components/HireUsSection/index.tsx b/docs/src/components/HireUsSection/index.tsx new file mode 100644 index 00000000000..d60ec9ea217 --- /dev/null +++ b/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 ( +
+
+

We are Software Mansion.

+
+

+ 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. +

+ +
+ +
+
+ ); +}; + +export default HireUsSection; diff --git a/docs/src/components/HireUsSection/styles.module.css b/docs/src/components/HireUsSection/styles.module.css new file mode 100644 index 00000000000..dab11800ac3 --- /dev/null +++ b/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); +} diff --git a/docs/src/components/Sponsors/styles.module.css b/docs/src/components/Sponsors/styles.module.css index 0e2c99f97b0..22a2e646bfc 100644 --- a/docs/src/components/Sponsors/styles.module.css +++ b/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) { diff --git a/docs/src/pages/index.tsx b/docs/src/pages/index.tsx index cbaae514ffd..cebb9b40973 100644 --- a/docs/src/pages/index.tsx +++ b/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 { + ); diff --git a/docs/src/theme/Footer/Layout/styles.module.css b/docs/src/theme/Footer/Layout/styles.module.css index ac97ca7da03..6fc6af7d359 100644 --- a/docs/src/theme/Footer/Layout/styles.module.css +++ b/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; }