diff --git a/website/src/components/Home/Community/index.tsx b/website/src/components/Home/Community/index.tsx index ce0079a3e4c..c66d9a14eca 100644 --- a/website/src/components/Home/Community/index.tsx +++ b/website/src/components/Home/Community/index.tsx @@ -11,6 +11,12 @@ import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import Section from '../Section'; import SectionTitle from '../SectionTitle'; +import CallstackWordmark from '@site/static/img/showcase/callstack_wordmark.svg'; +import ExpoWordmark from '@site/static/img/showcase/expo-wordmark.svg'; +import InfiniteRedWordmark from '@site/static/img/showcase/infinite-red-wordmark.svg'; +import MicrosoftWordmark from '@site/static/img/showcase/microsoft-wordmark.svg'; +import SWMWordmark from '@site/static/img/showcase/swm-wordmark.svg'; + import styles from './styles.module.css'; function Community() { @@ -60,58 +66,47 @@ function Community() {

Meta released React Native in 2015 and has been maintaining it ever - since. Today, React Native is supported by contributions from - individuals and companies around the world including{' '} - - - Callstack - - - ,{' '} - - - Expo - - - ,{' '} + since. +
+ Today, React Native is supported by contributions from individuals and + companies around the world including: +

+
- Infinite Red + - ,{' '} + + + - Microsoft - {' '} - and{' '} + + - Software Mansion + - . If you're interested in learning more, check out{' '} - how we have structured the ecosystem + - . -

+

- Our community is always shipping exciting new projects and expanding - beyond Android and iOS with initiatives like{' '} + Additionally, our community is always shipping exciting new projects + and expanding beyond Android and iOS with initiatives like{' '} React Native Web - .

+ + Learn more about the Ecosystem + ); } diff --git a/website/src/components/Home/Community/styles.module.css b/website/src/components/Home/Community/styles.module.css index 4935464b005..8da76a2b941 100644 --- a/website/src/components/Home/Community/styles.module.css +++ b/website/src/components/Home/Community/styles.module.css @@ -53,11 +53,62 @@ } } +.companiesContainer { + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr 1fr; + align-items: center; + justify-content: center; + gap: 16px; + padding: 20px 0 40px; + + a { + display: flex; + justify-content: center; + color: var(--ifm-heading-color); + + &, + &:hover { + border-bottom: 0 !important; + } + + &.expo svg { + max-width: 130px; + } + } + + svg { + max-width: 142px; + max-height: 56px; + } +} + +html[data-theme="dark"] { + .companiesContainer a { + color: var(--ifm-heading-color) !important; + } +} + +@media only screen and (max-width: 800px) { + .companiesContainer { + grid-template-columns: 1fr 1fr 1fr; + gap: 20px 24px; + } +} + +@media only screen and (max-width: 450px) { + .companiesContainer { + grid-template-columns: 1fr 1fr; + column-gap: 32px; + } +} + .communityNote { - margin-top: 48px; + margin-top: 52px; + margin-bottom: 8px; text-align: center; color: var(--home-secondary-text); padding: 0 12px; + font-size: 0.9rem; } .secondaryButton { diff --git a/website/static/img/showcase/callstack_wordmark.svg b/website/static/img/showcase/callstack_wordmark.svg new file mode 100644 index 00000000000..b94c7f3e6e6 --- /dev/null +++ b/website/static/img/showcase/callstack_wordmark.svg @@ -0,0 +1,3 @@ + + + diff --git a/website/static/img/showcase/expo-wordmark.svg b/website/static/img/showcase/expo-wordmark.svg new file mode 100644 index 00000000000..62fe56891b1 --- /dev/null +++ b/website/static/img/showcase/expo-wordmark.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/website/static/img/showcase/infinite-red-wordmark.svg b/website/static/img/showcase/infinite-red-wordmark.svg new file mode 100644 index 00000000000..01b71f28dd0 --- /dev/null +++ b/website/static/img/showcase/infinite-red-wordmark.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/website/static/img/showcase/microsoft-wordmark.svg b/website/static/img/showcase/microsoft-wordmark.svg new file mode 100644 index 00000000000..e8c71b399e8 --- /dev/null +++ b/website/static/img/showcase/microsoft-wordmark.svg @@ -0,0 +1,8 @@ + + + + + + + \ No newline at end of file diff --git a/website/static/img/showcase/swm-wordmark.svg b/website/static/img/showcase/swm-wordmark.svg new file mode 100644 index 00000000000..c745750fac1 --- /dev/null +++ b/website/static/img/showcase/swm-wordmark.svg @@ -0,0 +1,52 @@ + + + + + + + + + + + + + + + + + + + + \ No newline at end of file