Home: replace raw links with logo wordmarks in the Community section

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() {
       <div className={styles.communityNote}>
         <p>
           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{' '}
-          <span>
-            <a
-              href="https://callstack.com/"
-              target="_blank"
-              rel="noopener noreferrer">
-              Callstack
-            </a>
-          </span>
-          ,{' '}
-          <span>
-            <a
-              href="https://expo.dev/"
-              target="_blank"
-              rel="noopener noreferrer">
-              Expo
-            </a>
-          </span>
-          ,{' '}
+          since.
+          <br />
+          Today, React Native is supported by contributions from individuals and
+          companies around the world including:
+        </p>
+        <div className={styles.companiesContainer}>
           <a
-            href="https://infinite.red/"
+            href="https://callstack.com/"
             target="_blank"
             rel="noopener noreferrer">
-            Infinite Red
+            <CallstackWordmark />
           </a>
-          ,{' '}
           <a
-            href="https://www.microsoft.com/"
+            href="https://expo.dev/"
+            target="_blank"
+            rel="noopener noreferrer"
+            className={styles.expo}>
+            <ExpoWordmark />
+          </a>
+          <a
+            href="https://infinite.red/"
             target="_blank"
             rel="noopener noreferrer">
-            Microsoft
-          </a>{' '}
-          and{' '}
+            <InfiniteRedWordmark />
+          </a>
           <a
-            href="https://swmansion.com/"
+            href="https://www.microsoft.com/"
             target="_blank"
             rel="noopener noreferrer">
-            Software Mansion
+            <MicrosoftWordmark />
           </a>
-          . If you're interested in learning more, check out{' '}
           <a
-            href="https://github.com/react/react-native/blob/main/ECOSYSTEM.md"
+            href="https://swmansion.com/"
             target="_blank"
             rel="noopener noreferrer">
-            how we have structured the ecosystem
+            <SWMWordmark />
           </a>
-          .
-        </p>
+        </div>
         <p>
-          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{' '}
           <a
             href="https://microsoft.github.io/react-native-windows/"
             target="_blank"
@@ -132,9 +127,15 @@ function Community() {
             rel="noopener noreferrer">
             React Native Web
           </a>
-          .
         </p>
       </div>
+      <a
+        href="https://github.com/react/react-native/blob/main/ECOSYSTEM.md"
+        target="_blank"
+        rel="noopener noreferrer"
+        className={styles.secondaryButton}>
+        Learn more about the Ecosystem
+      </a>
     </Section>
   );
 }

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 {