Skip to content

Commit 218a894

Browse files
SimekSimek
authored
refresh Community home page section, remove legacy styles (#5149)
1 parent a6a3054 commit 218a894

8 files changed

Lines changed: 227 additions & 801 deletions

File tree

‎website/showcase.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,8 @@
8282
"name": "Amazon Alexa",
8383
"icon": "amazon-alexa.webp",
8484
"linkAppStore": "https://apps.apple.com/us/app/amazon-alexa/id944011620",
85-
"linkPlayStore": "https://play.google.com/store/apps/details?id=com.amazon.dee.app&hl=en_US&gl=US"
85+
"linkPlayStore": "https://play.google.com/store/apps/details?id=com.amazon.dee.app&hl=en_US&gl=US",
86+
"pinned": true
8687
},
8788
{
8889
"name": "Amazon Photos",
@@ -351,4 +352,4 @@
351352
"linkPlayStore": "https://play.google.com/store/apps/details?id=com.brex.mobile&hl=en_US&gl=US"
352353
}
353354
]
354-
}
355+
}

‎website/src/components/Home/Community/index.tsx‎

Lines changed: 111 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,6 @@
55
* LICENSE file in the root directory of this source tree.
66
*/
77

8-
import React from 'react';
9-
108
import useBaseUrl from '@docusaurus/useBaseUrl';
119
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
1210

@@ -23,78 +21,119 @@ function Community() {
2321

2422
return (
2523
<Section>
26-
<SectionTitle title="Meta supported. Community driven." />
27-
<div className={styles.featureContainer}>
28-
<div>
29-
<p>
30-
Meta released React Native in 2015 and has been maintaining it ever
31-
since.
32-
</p>
33-
<p>
34-
In 2018, React Native had the{' '}
35-
<a href="https://octoverse.github.com/2018/projects#repositories">
36-
2nd highest
37-
</a>{' '}
38-
number of contributors for any repository in GitHub. Today, React
39-
Native is supported by contributions from individuals and companies
40-
around the world including{' '}
41-
<span>
42-
<a href="https://callstack.com/">Callstack</a>
43-
</span>
44-
,{' '}
45-
<span>
46-
<a href="https://expo.io/">Expo</a>
47-
</span>
48-
, <a href="https://infinite.red/">Infinite Red</a>,{' '}
49-
<a href="https://www.microsoft.com/">Microsoft</a> and{' '}
50-
<a href="https://swmansion.com/">Software Mansion</a>.
51-
</p>
52-
<p>
53-
Our community is always shipping exciting new projects and exploring
54-
platforms beyond Android and iOS with repos like{' '}
55-
<span>
56-
<a href="https://github.com/microsoft/react-native-windows#readme">
57-
React Native Windows
58-
</a>
59-
</span>
60-
,{' '}
61-
<a href="https://github.com/microsoft/react-native-macos#readme">
62-
React Native macOS
63-
</a>{' '}
64-
and{' '}
65-
<a href="https://github.com/necolas/react-native-web#readme">
66-
React Native Web
67-
</a>
68-
.
69-
</p>
70-
</div>
71-
<div>
72-
<p>
24+
<SectionTitle
25+
title="Meta supported. Community driven."
26+
description={
27+
<>
7328
React Native is being used in thousands of apps, but it's likely
74-
you've already used it in one of these apps:
75-
</p>
76-
<ul className="AppList">
77-
{apps.map((app, i) => {
78-
const imgSource = !app.icon.startsWith('http')
79-
? useBaseUrl('img/showcase/' + app.icon)
80-
: app.icon;
81-
return (
82-
<li key={i} className="item">
83-
{app.infoLink ? (
84-
<a href={app.infoLink}>
85-
<img src={imgSource} alt={app.name} />
86-
</a>
87-
) : (
29+
<br />
30+
you've already used it in one of these apps.
31+
</>
32+
}
33+
/>
34+
<div className={styles.featureContainer}>
35+
<ul className={styles.appList}>
36+
{apps.map((app, i) => {
37+
const imgSource = !app.icon.startsWith('http')
38+
? useBaseUrl('img/showcase/' + app.icon)
39+
: app.icon;
40+
return (
41+
<li key={i} className="item">
42+
{app.infoLink ? (
43+
<a
44+
href={app.infoLink}
45+
target="_blank"
46+
rel="noopener noreferrer">
8847
<img src={imgSource} alt={app.name} />
89-
)}
90-
</li>
91-
);
92-
})}
93-
</ul>
94-
<p>
95-
and <a href={useBaseUrl(`showcase`)}>many more</a>.
96-
</p>
97-
</div>
48+
</a>
49+
) : (
50+
<img src={imgSource} alt={app.name} />
51+
)}
52+
</li>
53+
);
54+
})}
55+
</ul>
56+
</div>
57+
<a href={useBaseUrl(`showcase`)} className={styles.secondaryButton}>
58+
See all featured apps
59+
</a>
60+
<div className={styles.communityNote}>
61+
<p>
62+
Meta released React Native in 2015 and has been maintaining it ever
63+
since. Today, React Native is supported by contributions from
64+
individuals and companies around the world including{' '}
65+
<span>
66+
<a
67+
href="https://callstack.com/"
68+
target="_blank"
69+
rel="noopener noreferrer">
70+
Callstack
71+
</a>
72+
</span>
73+
,{' '}
74+
<span>
75+
<a
76+
href="https://expo.dev/"
77+
target="_blank"
78+
rel="noopener noreferrer">
79+
Expo
80+
</a>
81+
</span>
82+
,{' '}
83+
<a
84+
href="https://infinite.red/"
85+
target="_blank"
86+
rel="noopener noreferrer">
87+
Infinite Red
88+
</a>
89+
,{' '}
90+
<a
91+
href="https://www.microsoft.com/"
92+
target="_blank"
93+
rel="noopener noreferrer">
94+
Microsoft
95+
</a>{' '}
96+
and{' '}
97+
<a
98+
href="https://swmansion.com/"
99+
target="_blank"
100+
rel="noopener noreferrer">
101+
Software Mansion
102+
</a>
103+
. If you're interested in learning more, check out{' '}
104+
<a
105+
href="https://github.com/react/react-native/blob/main/ECOSYSTEM.md"
106+
target="_blank"
107+
rel="noopener noreferrer">
108+
how we have structured the ecosystem
109+
</a>
110+
.
111+
</p>
112+
<p>
113+
Our community is always shipping exciting new projects and expanding
114+
beyond Android and iOS with initiatives like{' '}
115+
<a
116+
href="https://microsoft.github.io/react-native-windows/"
117+
target="_blank"
118+
rel="noopener noreferrer">
119+
React Native Windows
120+
</a>
121+
,{' '}
122+
<a
123+
href="https://microsoft.github.io/react-native-macos/"
124+
target="_blank"
125+
rel="noopener noreferrer">
126+
React Native macOS
127+
</a>{' '}
128+
and{' '}
129+
<a
130+
href="https://necolas.github.io/react-native-web/"
131+
target="_blank"
132+
rel="noopener noreferrer">
133+
React Native Web
134+
</a>
135+
.
136+
</p>
98137
</div>
99138
</Section>
100139
);

‎website/src/components/Home/Community/styles.module.css‎

Lines changed: 71 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -6,26 +6,83 @@
66
*/
77

88
.featureContainer {
9+
margin: 32px auto 16px;
10+
}
11+
12+
.appList {
913
display: flex;
10-
justify-content: space-between;
11-
gap: 2rem;
12-
margin: 1rem auto;
14+
flex-wrap: wrap;
15+
justify-content: center;
16+
gap: 16px;
17+
padding: 0;
18+
19+
li {
20+
list-style: none;
21+
width: calc((100% - 9 * 16px) / 10);
22+
23+
a {
24+
border-bottom: 0 !important;
25+
26+
&:hover {
27+
img {
28+
transform: scale(1.05);
29+
}
30+
}
31+
}
32+
33+
img {
34+
display: block;
35+
width: 100%;
36+
border-radius: 16px;
37+
overflow: hidden;
38+
box-shadow: 0 6px 14px rgb(20 20 20 / 0.08);
39+
transition: transform 0.2s ease-in-out;
40+
}
41+
}
1342
}
1443

15-
.featureContainer > :first-child {
16-
border-right: 1px solid var(--home-border);
17-
padding-right: 2rem;
44+
@media only screen and (max-width: 800px) {
45+
.appList li {
46+
width: calc((100% - 6 * 16px) / 7);
47+
}
1848
}
1949

20-
@media only screen and (max-width: 900px) {
21-
.featureContainer {
22-
flex-direction: column;
23-
gap: 0;
24-
max-width: 600px;
50+
@media only screen and (max-width: 450px) {
51+
.appList li {
52+
width: calc((100% - 3 * 16px) / 4);
2553
}
54+
}
55+
56+
.communityNote {
57+
margin-top: 48px;
58+
text-align: center;
59+
color: var(--home-secondary-text);
60+
padding: 0 12px;
61+
}
62+
63+
.secondaryButton {
64+
padding: 10px 24px;
65+
border-radius: 99rem;
66+
font-weight: bold;
67+
font-size: 1rem;
68+
display: flex;
69+
align-items: center;
70+
justify-content: center;
71+
gap: 0.35rem;
72+
color: var(--home-button-secondary-text);
73+
border: 1px solid var(--home-button-secondary-border);
74+
background-color: var(--home-button-secondary);
75+
transition: background-color 200ms ease-in-out;
2676

27-
.featureContainer > :first-child {
28-
border-right: none;
29-
padding-right: 0;
77+
&:hover {
78+
background-color: var(--home-button-secondary-hover);
79+
color: var(--home-button-secondary-text);
3080
}
3181
}
82+
83+
.buttonGroup {
84+
display: flex;
85+
justify-content: center;
86+
gap: 16px;
87+
margin-top: 16px;
88+
}

‎website/src/components/Home/Hero/styles.module.css‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -108,35 +108,35 @@
108108
padding: 10px 24px;
109109
border-radius: 99rem;
110110
font-weight: bold;
111-
font-size: 17px;
111+
font-size: 1rem;
112112
display: flex;
113113
align-items: center;
114114
justify-content: center;
115-
gap: 0.35rem;
116-
}
115+
transition: background-color 200ms ease-in-out;
117116

118-
.primaryButton:hover {
119-
color: var(--home-button-primary-text);
120-
background-color: var(--home-button-primary-hover);
117+
&:hover {
118+
color: var(--home-button-primary-text);
119+
background-color: var(--home-button-primary-hover);
120+
}
121121
}
122122

123123
.secondaryButton {
124124
padding: 10px 24px;
125125
border-radius: 99rem;
126126
font-weight: bold;
127-
font-size: 17px;
127+
font-size: 1rem;
128128
display: flex;
129129
align-items: center;
130130
justify-content: center;
131-
gap: 0.35rem;
132131
color: var(--home-button-secondary-text);
133132
border: 1px solid var(--home-button-secondary-border);
134133
background-color: var(--home-button-secondary);
135-
}
134+
transition: background-color 200ms ease-in-out;
136135

137-
.secondaryButton:hover {
138-
background-color: var(--home-button-secondary-hover);
139-
color: var(--home-button-secondary-text);
136+
&:hover {
137+
background-color: var(--home-button-secondary-hover);
138+
color: var(--home-button-secondary-text);
139+
}
140140
}
141141

142142
@media (max-width: 600px) {

‎website/src/components/Home/SectionTitle/index.tsx‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,16 @@
55
* LICENSE file in the root directory of this source tree.
66
*/
77

8-
import React from 'react';
8+
import {ReactNode} from 'react';
99

1010
import styles from './styles.module.css';
1111

12-
function SectionTitle({
13-
title,
14-
description,
15-
}: {
12+
type Props = {
1613
title: string;
17-
description?: React.ReactNode;
18-
}) {
14+
description?: ReactNode;
15+
};
16+
17+
function SectionTitle({title, description}: Props) {
1918
return (
2019
<div className={styles.container}>
2120
<h1 className={styles.title}>{title}</h1>

0 commit comments

Comments
 (0)