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