From 16e7b573e0d1ced39d5a84b93465d6025d6b4b81 Mon Sep 17 00:00:00 2001 From: Bartosz Kaszubowski Date: Wed, 24 Jun 2026 13:25:21 +0200 Subject: [PATCH 1/2] Home: replace raw link with logo wordmarks in Community section --- .../src/components/Home/Community/index.tsx | 75 ++++++++++--------- .../Home/Community/styles.module.css | 54 ++++++++++++- .../img/showcase/callstack_wordmark.svg | 3 + website/static/img/showcase/expo-wordmark.svg | 7 ++ .../img/showcase/infinite-red-wordmark.svg | 32 ++++++++ .../img/showcase/microsoft-wordmark.svg | 8 ++ website/static/img/showcase/swm-wordmark.svg | 52 +++++++++++++ 7 files changed, 193 insertions(+), 38 deletions(-) create mode 100644 website/static/img/showcase/callstack_wordmark.svg create mode 100644 website/static/img/showcase/expo-wordmark.svg create mode 100644 website/static/img/showcase/infinite-red-wordmark.svg create mode 100644 website/static/img/showcase/microsoft-wordmark.svg create mode 100644 website/static/img/showcase/swm-wordmark.svg 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..2c05a315daf 100644 --- a/website/src/components/Home/Community/styles.module.css +++ b/website/src/components/Home/Community/styles.module.css @@ -53,11 +53,63 @@ } } +.companiesContainer { + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr 1fr; + align-items: center; + justify-content: center; + gap: 16px; + padding: 16px 0 32px; + + 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; + row-gap: 20px; + column-gap: 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 From f62ef1784c9379ea041ed2c3d6257d262a1f53d9 Mon Sep 17 00:00:00 2001 From: Bartosz Kaszubowski Date: Wed, 24 Jun 2026 13:37:14 +0200 Subject: [PATCH 2/2] style lint fix, spacing tweak --- website/src/components/Home/Community/styles.module.css | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/website/src/components/Home/Community/styles.module.css b/website/src/components/Home/Community/styles.module.css index 2c05a315daf..8da76a2b941 100644 --- a/website/src/components/Home/Community/styles.module.css +++ b/website/src/components/Home/Community/styles.module.css @@ -59,7 +59,7 @@ align-items: center; justify-content: center; gap: 16px; - padding: 16px 0 32px; + padding: 20px 0 40px; a { display: flex; @@ -91,8 +91,7 @@ html[data-theme="dark"] { @media only screen and (max-width: 800px) { .companiesContainer { grid-template-columns: 1fr 1fr 1fr; - row-gap: 20px; - column-gap: 24px; + gap: 20px 24px; } }