From cc3c6040f2f06f64e3eda697b64980492109a9b3 Mon Sep 17 00:00:00 2001
From: Simek <gosimek@gmail.com>
Date: Sat, 9 Aug 2025 14:02:10 +0200
Subject: [PATCH 1/3] Home: tweaks and fixes

---
 website/src/pages/Home/Framework/index.tsx    | 28 +++++++-----
 .../pages/Home/Framework/styles.module.css    | 13 +++++-
 website/src/pages/Home/Hero/styles.module.css |  1 +
 website/src/pages/Home/Native/index.tsx       | 10 +++--
 website/src/pages/Home/Platforms/index.tsx    | 18 +++++---
 website/src/pages/Home/Watch/index.tsx        |  6 ++-
 .../components/SectionTitle/styles.module.css |  6 +++
 .../Home/components/ThemeImage/index.tsx      | 43 -------------------
 8 files changed, 59 insertions(+), 66 deletions(-)
 delete mode 100644 website/src/pages/Home/components/ThemeImage/index.tsx

diff --git a/website/src/pages/Home/Framework/index.tsx b/website/src/pages/Home/Framework/index.tsx
index 4dd1d0984e9..66b096429b7 100644
--- a/website/src/pages/Home/Framework/index.tsx
+++ b/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 @@ function Framework() {
       />
       <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 @@ function Framework() {
           </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 @@ function Framework() {
           </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"
           />
diff --git a/website/src/pages/Home/Framework/styles.module.css b/website/src/pages/Home/Framework/styles.module.css
index 90170878480..2b457135440 100644
--- a/website/src/pages/Home/Framework/styles.module.css
+++ b/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);
diff --git a/website/src/pages/Home/Hero/styles.module.css b/website/src/pages/Home/Hero/styles.module.css
index 36d4633875c..c4f3701bd9c 100644
--- a/website/src/pages/Home/Hero/styles.module.css
+++ b/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;
diff --git a/website/src/pages/Home/Native/index.tsx b/website/src/pages/Home/Native/index.tsx
index f8c84882d17..fff8c1d4848 100644
--- a/website/src/pages/Home/Native/index.tsx
+++ b/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"
       />
diff --git a/website/src/pages/Home/Platforms/index.tsx b/website/src/pages/Home/Platforms/index.tsx
index 031229b1968..67dfa26f1c9 100644
--- a/website/src/pages/Home/Platforms/index.tsx
+++ b/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 @@ function Platforms() {
     <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 @@ function Platforms() {
             </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"
             />
diff --git a/website/src/pages/Home/Watch/index.tsx b/website/src/pages/Home/Watch/index.tsx
index fb27d80860a..782c36844ed 100644
--- a/website/src/pages/Home/Watch/index.tsx
+++ b/website/src/pages/Home/Watch/index.tsx
@@ -20,7 +20,11 @@ function Watch() {
         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>
diff --git a/website/src/pages/Home/components/SectionTitle/styles.module.css b/website/src/pages/Home/components/SectionTitle/styles.module.css
index 872d3ccba75..fd75411db12 100644
--- a/website/src/pages/Home/components/SectionTitle/styles.module.css
+++ b/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;
+  }
+}
\ No newline at end of file
diff --git a/website/src/pages/Home/components/ThemeImage/index.tsx b/website/src/pages/Home/components/ThemeImage/index.tsx
deleted file mode 100644
index 1b50f92d5af..00000000000
--- a/website/src/pages/Home/components/ThemeImage/index.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import React, {useState, useEffect} from 'react';
-
-function ThemeImage({lightSrc, darkSrc, className, alt}) {
-  const [theme, setTheme] = useState('light');
-
-  useEffect(() => {
-    const themeObserver = new MutationObserver(mutations => {
-      mutations.forEach(mutation => {
-        if (
-          mutation.type === 'attributes' &&
-          mutation.attributeName === 'data-theme' &&
-          mutation.target instanceof Element
-        ) {
-          setTheme(mutation.target.getAttribute('data-theme'));
-        }
-      });
-    });
-
-    const htmlElement = document.documentElement;
-    themeObserver.observe(htmlElement, {
-      attributes: true,
-    });
-
-    return () => themeObserver.disconnect();
-  }, []);
-
-  return (
-    <img
-      src={theme === 'dark' ? darkSrc : lightSrc}
-      alt={alt}
-      className={className}
-    />
-  );
-}
-
-export default ThemeImage;

From cbaa4c6dcb35ebae481d84f4d8f5a4157bc5290e Mon Sep 17 00:00:00 2001
From: Simek <gosimek@gmail.com>
Date: Sat, 9 Aug 2025 18:56:38 +0200
Subject: [PATCH 2/3] fix lint, rearrange files to avoid SSG issue

---
 .../Home/CallToAction/index.tsx                |  0
 .../Home/CallToAction/styles.module.css        |  0
 .../Home/Community/index.tsx                   |  5 +++--
 .../Home/Community/styles.module.css           |  0
 .../Home/Framework/index.tsx                   | 18 ++++++++++--------
 .../Home/Framework/styles.module.css           |  0
 .../Home/Hero/Devices.tsx                      |  0
 .../Home/Hero/FloorBackground.tsx              |  0
 .../Home/Hero/GridBackground.tsx               |  0
 .../{pages => components}/Home/Hero/index.tsx  |  2 +-
 .../Home/Hero/styles.module.css                |  0
 .../src/{pages => components}/Home/Logo.tsx    |  0
 .../Home/Native/index.tsx                      |  5 +++--
 .../Home/Native/styles.module.css              |  0
 .../Home/Platforms/FoxFact.tsx                 |  0
 .../Home/Platforms/index.tsx                   | 16 ++++++++++------
 .../Home/Platforms/styles.module.css           |  0
 .../Home}/Section/index.tsx                    |  0
 .../Home}/Section/styles.module.css            |  0
 .../Home}/SectionTitle/index.tsx               |  0
 .../Home}/SectionTitle/styles.module.css       |  0
 .../{pages => components}/Home/Watch/index.tsx |  9 +++++----
 .../Home/Watch/styles.module.css               |  0
 .../src/{pages => components}/Home/index.tsx   |  0
 website/src/pages/index.tsx                    |  3 +--
 25 files changed, 33 insertions(+), 25 deletions(-)
 rename website/src/{pages => components}/Home/CallToAction/index.tsx (100%)
 rename website/src/{pages => components}/Home/CallToAction/styles.module.css (100%)
 rename website/src/{pages => components}/Home/Community/index.tsx (97%)
 rename website/src/{pages => components}/Home/Community/styles.module.css (100%)
 rename website/src/{pages => components}/Home/Framework/index.tsx (84%)
 rename website/src/{pages => components}/Home/Framework/styles.module.css (100%)
 rename website/src/{pages => components}/Home/Hero/Devices.tsx (100%)
 rename website/src/{pages => components}/Home/Hero/FloorBackground.tsx (100%)
 rename website/src/{pages => components}/Home/Hero/GridBackground.tsx (100%)
 rename website/src/{pages => components}/Home/Hero/index.tsx (100%)
 rename website/src/{pages => components}/Home/Hero/styles.module.css (100%)
 rename website/src/{pages => components}/Home/Logo.tsx (100%)
 rename website/src/{pages => components}/Home/Native/index.tsx (92%)
 rename website/src/{pages => components}/Home/Native/styles.module.css (100%)
 rename website/src/{pages => components}/Home/Platforms/FoxFact.tsx (100%)
 rename website/src/{pages => components}/Home/Platforms/index.tsx (89%)
 rename website/src/{pages => components}/Home/Platforms/styles.module.css (100%)
 rename website/src/{pages/Home/components => components/Home}/Section/index.tsx (100%)
 rename website/src/{pages/Home/components => components/Home}/Section/styles.module.css (100%)
 rename website/src/{pages/Home/components => components/Home}/SectionTitle/index.tsx (100%)
 rename website/src/{pages/Home/components => components/Home}/SectionTitle/styles.module.css (100%)
 rename website/src/{pages => components}/Home/Watch/index.tsx (90%)
 rename website/src/{pages => components}/Home/Watch/styles.module.css (100%)
 rename website/src/{pages => components}/Home/index.tsx (100%)

diff --git a/website/src/pages/Home/CallToAction/index.tsx b/website/src/components/Home/CallToAction/index.tsx
similarity index 100%
rename from website/src/pages/Home/CallToAction/index.tsx
rename to website/src/components/Home/CallToAction/index.tsx
diff --git a/website/src/pages/Home/CallToAction/styles.module.css b/website/src/components/Home/CallToAction/styles.module.css
similarity index 100%
rename from website/src/pages/Home/CallToAction/styles.module.css
rename to website/src/components/Home/CallToAction/styles.module.css
diff --git a/website/src/pages/Home/Community/index.tsx b/website/src/components/Home/Community/index.tsx
similarity index 97%
rename from website/src/pages/Home/Community/index.tsx
rename to website/src/components/Home/Community/index.tsx
index fe4987f1703..05e5db13dec 100644
--- a/website/src/pages/Home/Community/index.tsx
+++ b/website/src/components/Home/Community/index.tsx
@@ -6,11 +6,12 @@
  */
 
 import React from 'react';
+
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 
-import Section from '../components/Section';
-import SectionTitle from '../components/SectionTitle';
+import Section from '../Section';
+import SectionTitle from '../SectionTitle';
 
 import styles from './styles.module.css';
 
diff --git a/website/src/pages/Home/Community/styles.module.css b/website/src/components/Home/Community/styles.module.css
similarity index 100%
rename from website/src/pages/Home/Community/styles.module.css
rename to website/src/components/Home/Community/styles.module.css
diff --git a/website/src/pages/Home/Framework/index.tsx b/website/src/components/Home/Framework/index.tsx
similarity index 84%
rename from website/src/pages/Home/Framework/index.tsx
rename to website/src/components/Home/Framework/index.tsx
index 66b096429b7..2bd04b08c06 100644
--- a/website/src/pages/Home/Framework/index.tsx
+++ b/website/src/components/Home/Framework/index.tsx
@@ -7,9 +7,11 @@
 
 import React from 'react';
 
+import useBaseUrl from '@docusaurus/useBaseUrl';
 import ThemedImage from '@theme/ThemedImage';
-import Section from '../components/Section';
-import SectionTitle from '../components/SectionTitle';
+
+import Section from '../Section';
+import SectionTitle from '../SectionTitle';
 
 import styles from './styles.module.css';
 
@@ -32,8 +34,8 @@ function Framework() {
         <div className={styles.card}>
           <ThemedImage
             sources={{
-              light: "/img/homepage/file-based-routing.png",
-              dark: "/img/homepage/file-based-routing-dark.png",
+              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"
@@ -49,8 +51,8 @@ function Framework() {
         <div className={styles.card}>
           <ThemedImage
             sources={{
-              light: "/img/homepage/libraries.png",
-              dark: "/img/homepage/libraries-dark.png",
+              light: useBaseUrl('/img/homepage/libraries.png'),
+              dark: useBaseUrl('/img/homepage/libraries-dark.png'),
             }}
             alt="Grid of icons representing libraries, SDKs, and native code"
             className={styles.cardImage}
@@ -68,8 +70,8 @@ function Framework() {
         <div className={styles.card}>
           <ThemedImage
             sources={{
-              light: "/img/homepage/tools.png",
-              dark: "/img/homepage/tools-dark.png",
+              light: useBaseUrl('/img/homepage/tools.png'),
+              dark: useBaseUrl('/img/homepage/tools-dark.png'),
             }}
             className={styles.cardImage}
             alt="List of developer tool toggles for debugging, performance, and more"
diff --git a/website/src/pages/Home/Framework/styles.module.css b/website/src/components/Home/Framework/styles.module.css
similarity index 100%
rename from website/src/pages/Home/Framework/styles.module.css
rename to website/src/components/Home/Framework/styles.module.css
diff --git a/website/src/pages/Home/Hero/Devices.tsx b/website/src/components/Home/Hero/Devices.tsx
similarity index 100%
rename from website/src/pages/Home/Hero/Devices.tsx
rename to website/src/components/Home/Hero/Devices.tsx
diff --git a/website/src/pages/Home/Hero/FloorBackground.tsx b/website/src/components/Home/Hero/FloorBackground.tsx
similarity index 100%
rename from website/src/pages/Home/Hero/FloorBackground.tsx
rename to website/src/components/Home/Hero/FloorBackground.tsx
diff --git a/website/src/pages/Home/Hero/GridBackground.tsx b/website/src/components/Home/Hero/GridBackground.tsx
similarity index 100%
rename from website/src/pages/Home/Hero/GridBackground.tsx
rename to website/src/components/Home/Hero/GridBackground.tsx
diff --git a/website/src/pages/Home/Hero/index.tsx b/website/src/components/Home/Hero/index.tsx
similarity index 100%
rename from website/src/pages/Home/Hero/index.tsx
rename to website/src/components/Home/Hero/index.tsx
index 265c0966d84..8c9251bf3c5 100644
--- a/website/src/pages/Home/Hero/index.tsx
+++ b/website/src/components/Home/Hero/index.tsx
@@ -9,10 +9,10 @@ import React from 'react';
 import GitHubButton from 'react-github-btn';
 
 import Logo from '../Logo';
-
 import GridBackground from './GridBackground';
 import FloorBackground from './FloorBackground';
 import Devices from './Devices';
+
 import styles from './styles.module.css';
 
 function Hero() {
diff --git a/website/src/pages/Home/Hero/styles.module.css b/website/src/components/Home/Hero/styles.module.css
similarity index 100%
rename from website/src/pages/Home/Hero/styles.module.css
rename to website/src/components/Home/Hero/styles.module.css
diff --git a/website/src/pages/Home/Logo.tsx b/website/src/components/Home/Logo.tsx
similarity index 100%
rename from website/src/pages/Home/Logo.tsx
rename to website/src/components/Home/Logo.tsx
diff --git a/website/src/pages/Home/Native/index.tsx b/website/src/components/Home/Native/index.tsx
similarity index 92%
rename from website/src/pages/Home/Native/index.tsx
rename to website/src/components/Home/Native/index.tsx
index fff8c1d4848..050b66ef67a 100644
--- a/website/src/pages/Home/Native/index.tsx
+++ b/website/src/components/Home/Native/index.tsx
@@ -8,8 +8,9 @@
 import React from 'react';
 
 import ThemedImage from '@theme/ThemedImage';
-import Section from '../components/Section';
-import SectionTitle from '../components/SectionTitle';
+
+import Section from '../Section';
+import SectionTitle from '../SectionTitle';
 
 import styles from './styles.module.css';
 
diff --git a/website/src/pages/Home/Native/styles.module.css b/website/src/components/Home/Native/styles.module.css
similarity index 100%
rename from website/src/pages/Home/Native/styles.module.css
rename to website/src/components/Home/Native/styles.module.css
diff --git a/website/src/pages/Home/Platforms/FoxFact.tsx b/website/src/components/Home/Platforms/FoxFact.tsx
similarity index 100%
rename from website/src/pages/Home/Platforms/FoxFact.tsx
rename to website/src/components/Home/Platforms/FoxFact.tsx
diff --git a/website/src/pages/Home/Platforms/index.tsx b/website/src/components/Home/Platforms/index.tsx
similarity index 89%
rename from website/src/pages/Home/Platforms/index.tsx
rename to website/src/components/Home/Platforms/index.tsx
index 67dfa26f1c9..b060e542499 100644
--- a/website/src/pages/Home/Platforms/index.tsx
+++ b/website/src/components/Home/Platforms/index.tsx
@@ -7,11 +7,13 @@
 
 import React from 'react';
 
+import useBaseUrl from '@docusaurus/useBaseUrl';
 import ThemedImage from '@theme/ThemedImage';
-import Section from '../components/Section';
-import SectionTitle from '../components/SectionTitle';
 
+import Section from '../Section';
+import SectionTitle from '../SectionTitle';
 import FoxFact from './FoxFact';
+
 import styles from './styles.module.css';
 
 function Platforms() {
@@ -21,9 +23,11 @@ function Platforms() {
         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.
+            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.
+            It's a best-in-class JavaScript library for building user
+            interfaces.
           </>
         }
       />
@@ -62,8 +66,8 @@ function Platforms() {
           <div className={styles.deviceContainer}>
             <ThemedImage
               sources={{
-                light: '/img/homepage/devices.png',
-                dark: '/img/homepage/devices-dark.png',
+                light: useBaseUrl('/img/homepage/devices.png'),
+                dark: useBaseUrl('/img/homepage/devices-dark.png'),
               }}
               className={styles.devices}
               alt="Android device and iOS device"
diff --git a/website/src/pages/Home/Platforms/styles.module.css b/website/src/components/Home/Platforms/styles.module.css
similarity index 100%
rename from website/src/pages/Home/Platforms/styles.module.css
rename to website/src/components/Home/Platforms/styles.module.css
diff --git a/website/src/pages/Home/components/Section/index.tsx b/website/src/components/Home/Section/index.tsx
similarity index 100%
rename from website/src/pages/Home/components/Section/index.tsx
rename to website/src/components/Home/Section/index.tsx
diff --git a/website/src/pages/Home/components/Section/styles.module.css b/website/src/components/Home/Section/styles.module.css
similarity index 100%
rename from website/src/pages/Home/components/Section/styles.module.css
rename to website/src/components/Home/Section/styles.module.css
diff --git a/website/src/pages/Home/components/SectionTitle/index.tsx b/website/src/components/Home/SectionTitle/index.tsx
similarity index 100%
rename from website/src/pages/Home/components/SectionTitle/index.tsx
rename to website/src/components/Home/SectionTitle/index.tsx
diff --git a/website/src/pages/Home/components/SectionTitle/styles.module.css b/website/src/components/Home/SectionTitle/styles.module.css
similarity index 100%
rename from website/src/pages/Home/components/SectionTitle/styles.module.css
rename to website/src/components/Home/SectionTitle/styles.module.css
diff --git a/website/src/pages/Home/Watch/index.tsx b/website/src/components/Home/Watch/index.tsx
similarity index 90%
rename from website/src/pages/Home/Watch/index.tsx
rename to website/src/components/Home/Watch/index.tsx
index 782c36844ed..900a823f5a6 100644
--- a/website/src/pages/Home/Watch/index.tsx
+++ b/website/src/components/Home/Watch/index.tsx
@@ -7,8 +7,8 @@
 
 import React from 'react';
 
-import Section from '../components/Section';
-import SectionTitle from '../components/SectionTitle';
+import Section from '../Section';
+import SectionTitle from '../SectionTitle';
 
 import styles from './styles.module.css';
 
@@ -23,8 +23,9 @@ function Watch() {
             React Native.
             <br />
             Find the latest on{' '}
-            <a href="https://bsky.app/profile/reactnative.dev">Bluesky</a>{' '}
-            and{' '}
+            <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>
diff --git a/website/src/pages/Home/Watch/styles.module.css b/website/src/components/Home/Watch/styles.module.css
similarity index 100%
rename from website/src/pages/Home/Watch/styles.module.css
rename to website/src/components/Home/Watch/styles.module.css
diff --git a/website/src/pages/Home/index.tsx b/website/src/components/Home/index.tsx
similarity index 100%
rename from website/src/pages/Home/index.tsx
rename to website/src/components/Home/index.tsx
diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx
index 93c5718ce30..cd743b733d4 100644
--- a/website/src/pages/index.tsx
+++ b/website/src/pages/index.tsx
@@ -8,10 +8,9 @@
 import React from 'react';
 
 import Head from '@docusaurus/Head';
-
 import Layout from '@theme/Layout';
 
-import Home from './Home';
+import Home from '../components/Home';
 
 const Index = () => {
   return (

From 6bfe21c952d86917bd675d1fde3de55da017c2fe Mon Sep 17 00:00:00 2001
From: Simek <gosimek@gmail.com>
Date: Sat, 9 Aug 2025 19:20:32 +0200
Subject: [PATCH 3/3] reformat styles

---
 website/src/components/Home/SectionTitle/styles.module.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/website/src/components/Home/SectionTitle/styles.module.css b/website/src/components/Home/SectionTitle/styles.module.css
index fd75411db12..5582e85b7a4 100644
--- a/website/src/components/Home/SectionTitle/styles.module.css
+++ b/website/src/components/Home/SectionTitle/styles.module.css
@@ -29,4 +29,4 @@
   .title {
     font-size: 40px;
   }
-}
\ No newline at end of file
+}