Skip to content

Commit cc3c604

Browse files
committed
Home: tweaks and fixes
1 parent 682333d commit cc3c604

8 files changed

Lines changed: 59 additions & 66 deletions

File tree

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

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77

88
import React from 'react';
99

10-
import ThemeImage from '../components/ThemeImage';
10+
import ThemedImage from '@theme/ThemedImage';
1111
import Section from '../components/Section';
1212
import SectionTitle from '../components/SectionTitle';
1313

@@ -30,9 +30,11 @@ function Framework() {
3030
/>
3131
<div className={styles.cardContainer}>
3232
<div className={styles.card}>
33-
<ThemeImage
34-
lightSrc="/img/homepage/file-based-routing.png"
35-
darkSrc="/img/homepage/file-based-routing-dark.png"
33+
<ThemedImage
34+
sources={{
35+
light: "/img/homepage/file-based-routing.png",
36+
dark: "/img/homepage/file-based-routing-dark.png",
37+
}}
3638
className={styles.cardImage}
3739
alt="File system with folders and files representing screens and navigation"
3840
/>
@@ -45,11 +47,13 @@ function Framework() {
4547
</div>
4648
</div>
4749
<div className={styles.card}>
48-
<ThemeImage
49-
lightSrc="/img/homepage/libraries.png"
50-
darkSrc="/img/homepage/libraries-dark.png"
51-
className={styles.cardImage}
50+
<ThemedImage
51+
sources={{
52+
light: "/img/homepage/libraries.png",
53+
dark: "/img/homepage/libraries-dark.png",
54+
}}
5255
alt="Grid of icons representing libraries, SDKs, and native code"
56+
className={styles.cardImage}
5357
/>
5458
<div className={styles.cardContent}>
5559
<h4 className={styles.cardTitle}>
@@ -62,9 +66,11 @@ function Framework() {
6266
</div>
6367
</div>
6468
<div className={styles.card}>
65-
<ThemeImage
66-
lightSrc="/img/homepage/tools.png"
67-
darkSrc="/img/homepage/tools-dark.png"
69+
<ThemedImage
70+
sources={{
71+
light: "/img/homepage/tools.png",
72+
dark: "/img/homepage/tools-dark.png",
73+
}}
6874
className={styles.cardImage}
6975
alt="List of developer tool toggles for debugging, performance, and more"
7076
/>

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

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,11 @@
2424

2525
.cardContent {
2626
padding: 16px 24px;
27+
border-top: 1px solid var(--home-border);
28+
}
29+
30+
.cardImage {
31+
aspect-ratio: 284/148;
2732
}
2833

2934
.cardTitle {
@@ -40,7 +45,7 @@
4045
line-height: 150%;
4146
}
4247

43-
@media only screen and (max-width: 900px) {
48+
@media only screen and (max-width: 996px) {
4449
.cardContainer {
4550
display: flex;
4651
flex-direction: column;
@@ -51,9 +56,13 @@
5156
text-align: start;
5257
}
5358

59+
.cardContent {
60+
border-top: 0;
61+
}
62+
5463
.cardImage {
5564
width: auto;
56-
height: 150px;
65+
max-height: 150px;
5766
margin: 1rem;
5867
border-radius: 0.5rem;
5968
border: 1px solid var(--home-border);

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,7 @@
8282
.content {
8383
position: relative;
8484
top: 120px;
85+
padding-inline: 24px;
8586
display: flex;
8687
flex-direction: column;
8788
justify-content: center;

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

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,9 @@
77

88
import React from 'react';
99

10+
import ThemedImage from '@theme/ThemedImage';
1011
import Section from '../components/Section';
1112
import SectionTitle from '../components/SectionTitle';
12-
import ThemeImage from '../components/ThemeImage';
1313

1414
import styles from './styles.module.css';
1515

@@ -28,9 +28,11 @@ function Native() {
2828
</>
2929
}
3030
/>
31-
<ThemeImage
32-
lightSrc="/img/homepage/dissection.png"
33-
darkSrc="/img/homepage/dissection-dark.png"
31+
<ThemedImage
32+
sources={{
33+
light: '/img/homepage/dissection.png',
34+
dark: '/img/homepage/dissection-dark.png',
35+
}}
3436
className={styles.flyoutIllustration}
3537
alt="A React Native UI pointing out native elements like Views, ScrollViews, and more"
3638
/>

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

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,9 @@
77

88
import React from 'react';
99

10+
import ThemedImage from '@theme/ThemedImage';
1011
import Section from '../components/Section';
1112
import SectionTitle from '../components/SectionTitle';
12-
import ThemeImage from '../components/ThemeImage';
1313

1414
import FoxFact from './FoxFact';
1515
import styles from './styles.module.css';
@@ -19,7 +19,13 @@ function Platforms() {
1919
<Section>
2020
<SectionTitle
2121
title="Create native apps for Android, iOS, and more using React"
22-
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."
22+
description={
23+
<>
24+
React Native brings the best parts of developing with React to native development.
25+
<br />
26+
It's a best-in-class JavaScript library for building user interfaces.
27+
</>
28+
}
2329
/>
2430
<div className={styles.platformsContainer}>
2531
<div className={styles.featureContainer}>
@@ -54,9 +60,11 @@ function Platforms() {
5460
</div>
5561
</div>
5662
<div className={styles.deviceContainer}>
57-
<ThemeImage
58-
lightSrc="/img/homepage/devices.png"
59-
darkSrc="/img/homepage/devices-dark.png"
63+
<ThemedImage
64+
sources={{
65+
light: '/img/homepage/devices.png',
66+
dark: '/img/homepage/devices-dark.png',
67+
}}
6068
className={styles.devices}
6169
alt="Android device and iOS device"
6270
/>

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,11 @@ function Watch() {
2020
description={
2121
<>
2222
Watch talks by the React team and learn how to get the most out of
23-
React Native. Find the latest on{' '}
23+
React Native.
24+
<br />
25+
Find the latest on{' '}
26+
<a href="https://bsky.app/profile/reactnative.dev">Bluesky</a>{' '}
27+
and{' '}
2428
<a href="https://twitter.com/intent/follow?screen_name=reactnative&region=follow_link">
2529
X
2630
</a>

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,3 +24,9 @@
2424
font-weight: normal;
2525
max-width: 850px;
2626
}
27+
28+
@media only screen and (max-width: 996px) {
29+
.title {
30+
font-size: 40px;
31+
}
32+
}

website/src/pages/Home/components/ThemeImage/index.tsx

Lines changed: 0 additions & 43 deletions
This file was deleted.

0 commit comments

Comments
 (0)