Home: fix auto theme assets issue, other tweaks (#4709)

Author: Simek

website/src/pages/Home/CallToAction/index.tsx renamed to website/src/components/Home/CallToAction/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';
 

website/src/pages/Home/CallToAction/styles.module.css renamed to website/src/components/Home/CallToAction/styles.module.css

@@ -7,9 +7,11 @@
 
 import React from 'react';
 
-import ThemeImage from '../components/ThemeImage';
-import Section from '../components/Section';
-import SectionTitle from '../components/SectionTitle';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import ThemedImage from '@theme/ThemedImage';
+
+import Section from '../Section';
+import SectionTitle from '../SectionTitle';
 
 import styles from './styles.module.css';
 
@@ -30,9 +32,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 +49,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: 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}
           />
           <div className={styles.cardContent}>
             <h4 className={styles.cardTitle}>
@@ -62,9 +68,11 @@ function Framework() {
           </div>
         </div>
         <div className={styles.card}>
-          <ThemeImage
-            lightSrc="/img/homepage/tools.png"
-            darkSrc="/img/homepage/tools-dark.png"
+          <ThemedImage
+            sources={{
+              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"
           />

website/src/pages/Home/Community/index.tsx renamed to website/src/components/Home/Community/index.tsx

@@ -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/Community/styles.module.css renamed to website/src/components/Home/Community/styles.module.css

@@ -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() {