Home: tweaks and fixes

website/src/pages/Home/Framework/index.tsx

@@ -7,7 +7,7 @@
 
 import React from 'react';
 
-import ThemeImage from '../components/ThemeImage';
+import ThemedImage from '@theme/ThemedImage';
 import Section from '../components/Section';
 import SectionTitle from '../components/SectionTitle';
 
@@ -30,9 +30,11 @@
       />
       <div className={styles.cardContainer}>
         <div className={styles.card}>
-          <ThemeImage
-            lightSrc="/img/homepage/file-based-routing.png"
-            darkSrc="/img/homepage/file-based-routing-dark.png"
+          <ThemedImage
+            sources={{
+              light: "/img/homepage/file-based-routing.png",
+              dark: "/img/homepage/file-based-routing-dark.png",
+            }}
             className={styles.cardImage}
             alt="File system with folders and files representing screens and navigation"
           />
@@ -45,11 +47,13 @@
           </div>
         </div>
         <div className={styles.card}>
-          <ThemeImage
-            lightSrc="/img/homepage/libraries.png"
-            darkSrc="/img/homepage/libraries-dark.png"
-            className={styles.cardImage}
+          <ThemedImage
+            sources={{
+              light: "/img/homepage/libraries.png",
+              dark: "/img/homepage/libraries-dark.png",
+            }}
             alt="Grid of icons representing libraries, SDKs, and native code"
+            className={styles.cardImage}
           />
           <div className={styles.cardContent}>
             <h4 className={styles.cardTitle}>
@@ -62,9 +66,11 @@
           </div>
         </div>
         <div className={styles.card}>
-          <ThemeImage
-            lightSrc="/img/homepage/tools.png"
-            darkSrc="/img/homepage/tools-dark.png"
+          <ThemedImage
+            sources={{
+              light: "/img/homepage/tools.png",
+              dark: "/img/homepage/tools-dark.png",
+            }}
             className={styles.cardImage}
             alt="List of developer tool toggles for debugging, performance, and more"
           />

website/src/pages/Home/Framework/styles.module.css

@@ -24,6 +24,11 @@
 
 .cardContent {
   padding: 16px 24px;
+  border-top: 1px solid var(--home-border);
+}
+
+.cardImage {
+  aspect-ratio: 284/148;
 }
 
 .cardTitle {
@@ -40,7 +45,7 @@
   line-height: 150%;
 }
 
-@media only screen and (max-width: 900px) {
+@media only screen and (max-width: 996px) {
   .cardContainer {
     display: flex;
     flex-direction: column;
@@ -51,9 +56,13 @@
     text-align: start;
   }
 
+  .cardContent {
+    border-top: 0;
+  }
+
   .cardImage {
     width: auto;
-    height: 150px;
+    max-height: 150px;
     margin: 1rem;
     border-radius: 0.5rem;
     border: 1px solid var(--home-border);

website/src/pages/Home/Hero/styles.module.css

@@ -82,6 +82,7 @@
 .content {
   position: relative;
   top: 120px;
+  padding-inline: 24px;
   display: flex;
   flex-direction: column;
   justify-content: center;

website/src/pages/Home/Native/index.tsx

@@ -7,9 +7,9 @@
 
 import React from 'react';
 
+import ThemedImage from '@theme/ThemedImage';
 import Section from '../components/Section';
 import SectionTitle from '../components/SectionTitle';
-import ThemeImage from '../components/ThemeImage';
 
 import styles from './styles.module.css';
 
@@ -28,9 +28,11 @@ function Native() {
           </>
         }
       />
-      <ThemeImage
-        lightSrc="/img/homepage/dissection.png"
-        darkSrc="/img/homepage/dissection-dark.png"
+      <ThemedImage
+        sources={{
+          light: '/img/homepage/dissection.png',
+          dark: '/img/homepage/dissection-dark.png',
+        }}
         className={styles.flyoutIllustration}
         alt="A React Native UI pointing out native elements like Views, ScrollViews, and more"
       />

website/src/pages/Home/Platforms/index.tsx

@@ -7,9 +7,9 @@
 
 import React from 'react';
 
+import ThemedImage from '@theme/ThemedImage';
 import Section from '../components/Section';
 import SectionTitle from '../components/SectionTitle';
-import ThemeImage from '../components/ThemeImage';
 
 import FoxFact from './FoxFact';
 import styles from './styles.module.css';
@@ -19,7 +19,13 @@
     <Section>
       <SectionTitle
         title="Create native apps for Android, iOS, and more using React"
-        description="React Native brings the best parts of developing with React to native development. It's a best-in-class JavaScript library for building user interfaces."
+        description={
+          <>
+            React Native brings the best parts of developing with React to native development.
+            <br />
+            It's a best-in-class JavaScript library for building user interfaces.
+          </>
+        }
       />
       <div className={styles.platformsContainer}>
         <div className={styles.featureContainer}>
@@ -54,9 +60,11 @@
             </div>
           </div>
           <div className={styles.deviceContainer}>
-            <ThemeImage
-              lightSrc="/img/homepage/devices.png"
-              darkSrc="/img/homepage/devices-dark.png"
+            <ThemedImage
+              sources={{
+                light: '/img/homepage/devices.png',
+                dark: '/img/homepage/devices-dark.png',
+              }}
               className={styles.devices}
               alt="Android device and iOS device"
             />

website/src/pages/Home/Watch/index.tsx

@@ -20,7 +20,11 @@
         description={
           <>
             Watch talks by the React team and learn how to get the most out of
-            React Native. Find the latest on{' '}
+            React Native.
+            <br />
+            Find the latest on{' '}
+            <a href="https://bsky.app/profile/reactnative.dev">Bluesky</a>{' '}
+            and{' '}
             <a href="https://twitter.com/intent/follow?screen_name=reactnative&region=follow_link">
               X
             </a>

website/src/pages/Home/components/SectionTitle/styles.module.css

@@ -24,3 +24,9 @@
   font-weight: normal;
   max-width: 850px;
 }
+
+@media only screen and (max-width: 996px) {
+  .title {
+    font-size: 40px;
+  }
+}