Skip to content

Commit 4a5e7d7

Browse files
jonsampjonsamp
authored
Homepage redesign (#4100)
* init * adds hero section * adds media query * adds responsiveness * adds native section * adds framework section * adds watch * adds community * cta * adds (c) * use default export * fix showcase * media queries * fix media queries * hero dark mode * use dark theme body attr * Revert "use dark theme body attr" This reverts commit 04267e7. * Revert "hero dark mode" This reverts commit 3855f81. * revert * use different media queries * remove only and screen * Revert "fix media queries" This reverts commit 0870975. * fix media queries * dark mode for hero * save * dark mode * dark mode * adds social links * compress images
1 parent 212cd89 commit 4a5e7d7

50 files changed

Lines changed: 2800 additions & 679 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎website/src/css/customTheme.scss‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,45 @@
4949
@media (min-width: 340px) {
5050
--ifm-navbar-sidebar-width: 340px;
5151
}
52+
53+
--logo: #087ea4;
54+
--home-hero-floor-background: rgb(236, 248, 250);
55+
--home-hero-floor-background-bottom: white;
56+
--home-button-primary: #087ea4;
57+
--home-button-primary-text: white;
58+
--home-button-primary-hover: #4e98b6;
59+
--home-button-secondary: white;
60+
--home-button-secondary-text: #404756;
61+
--home-button-secondary-border: #bcc1cd;
62+
--home-button-secondary-hover: #f8f9fa;
63+
--home-hero-devices-border: #5e687e;
64+
--home-hero-devices-stop: #66728b;
65+
--home-hero-devices-skeleton-element: #cfe6ee;
66+
--home-hero-devices-background: #fff;
67+
--home-hero-devices-icon: #000;
68+
--home-hero-devices-icon-border: #e5e7eb;
69+
--home-hero-floor: #acddec;
70+
--home-hero-grid-icon-background: #f8f9fa;
71+
--home-hero-grid-icon: #e1e4e8;
72+
--home-hero-grid-grid: #ced4da;
73+
--home-section-top: white;
74+
--home-section-bottom: #efeff2;
75+
--home-secondary-text: #404756;
76+
--home-feature-background-1: #f1dbfc;
77+
--home-feature-background-2: #e1eefc;
78+
--home-feature-background-3: #d4f3e7;
79+
--home-border: #e5e7eb;
80+
--home-background: #fff;
81+
--home-secondary-background: #f6f7f9;
82+
--home-text: #1c1e21;
83+
--home-code-red: #d73a49;
84+
--home-code-purple: #6f42c1;
85+
--home-code-green: #22863a;
86+
87+
@media (max-width: 900px) {
88+
--home-hero-grid-icon: transparent;
89+
--home-hero-grid-icon-background: transparent;
90+
}
5291
}
5392

5493
html[data-theme="light"] {
@@ -72,6 +111,45 @@ html[data-theme="dark"] {
72111
0 1px 2px 1px var(--ifm-table-border-color);
73112
--docsearch-container-background: rgba(0, 0, 0, 0.6);
74113
}
114+
115+
--logo: #58c4dc;
116+
--home-hero-floor-background: #151517;
117+
--home-hero-floor-background-bottom: #1b1b1d;
118+
--home-button-primary: #58c4dc;
119+
--home-button-primary-text: #1b1b1d;
120+
--home-button-primary-hover: #71d6ec;
121+
--home-button-secondary: #1b1b1d;
122+
--home-button-secondary-text: #f6f7f9;
123+
--home-button-secondary-border: #4e5668;
124+
--home-button-secondary-hover: #2b2b2d;
125+
--home-hero-devices-border: #404756;
126+
--home-hero-devices-stop: #4a5160;
127+
--home-hero-devices-skeleton-element: #404756;
128+
--home-hero-devices-background: #242426;
129+
--home-hero-devices-icon: #fff;
130+
--home-hero-devices-icon-border: #404756;
131+
--home-hero-floor: #30363d;
132+
--home-hero-grid-icon-background: #1e2025;
133+
--home-hero-grid-icon: #282c36;
134+
--home-hero-grid-grid: #30363d;
135+
--home-section-top: #1b1b1d;
136+
--home-section-bottom: #111113;
137+
--home-secondary-text: #c0c1c4;
138+
--home-feature-background-1: #333049;
139+
--home-feature-background-2: #1c3950;
140+
--home-feature-background-3: #1d413e;
141+
--home-border: #404756;
142+
--home-background: #242426;
143+
--home-secondary-background: #2c2c2e;
144+
--home-text: #e3e3e3;
145+
--home-code-red: #f46b78;
146+
--home-code-purple: #a77cf7;
147+
--home-code-green: #74e68f;
148+
149+
@media (max-width: 900px) {
150+
--home-hero-grid-icon: transparent;
151+
--home-hero-grid-icon-background: transparent;
152+
}
75153
}
76154

77155
:root {

‎website/src/pages/Home/CallToAction/index.js‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
/**
2+
* Copyright (c) Meta Platforms, Inc. and affiliates.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*/
7+
8+
import React from 'react';
9+
10+
import Logo from '../Logo';
11+
12+
import styles from './styles.module.css';
13+
14+
function CallToAction() {
15+
return (
16+
<div className={styles.wrapper}>
17+
<div className={styles.background} />
18+
<div className={styles.container}>
19+
<Logo />
20+
<h1 className={styles.title}>Welcome to the React Native community</h1>
21+
<a href="/docs/environment-setup" className={styles.primaryButton}>
22+
Get Started
23+
</a>
24+
</div>
25+
</div>
26+
);
27+
}
28+
29+
export default CallToAction;

‎website/src/pages/Home/CallToAction/styles.module.css‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
/**
2+
* Copyright (c) Meta Platforms, Inc. and affiliates.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*/
7+
8+
.wrapper {
9+
text-align: center;
10+
overflow: hidden;
11+
position: relative;
12+
}
13+
14+
.background {
15+
position: absolute;
16+
width: 100%;
17+
height: 100%;
18+
background-image: url("/img/homepage/cta-bg-pattern.png");
19+
background-size: cover;
20+
background-position: center center;
21+
opacity: 0.1;
22+
}
23+
24+
.container {
25+
position: relative;
26+
display: flex;
27+
flex-direction: column;
28+
justify-content: center;
29+
align-items: center;
30+
gap: 1rem;
31+
padding: 2rem;
32+
margin: 8rem auto;
33+
max-width: 600px;
34+
}
35+
36+
.title {
37+
font-size: 40px;
38+
line-height: 140%;
39+
}
40+
41+
.primaryButton {
42+
background-color: var(--home-button-primary);
43+
color: var(--home-button-primary-text);
44+
border: none;
45+
padding: 10px 24px;
46+
border-radius: 99rem;
47+
font-weight: bold;
48+
font-size: 17px;
49+
display: flex;
50+
align-items: center;
51+
justify-content: center;
52+
gap: 0.35rem;
53+
}
54+
55+
.primaryButton:hover {
56+
background-color: var(--home-button-primary-hover);
57+
color: var(--home-button-primary-text);
58+
}
59+
60+
@media (max-width: 600px) {
61+
.background {
62+
display: none;
63+
}
64+
}

‎website/src/pages/Home/Community/index.js‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
/**
2+
* Copyright (c) Meta Platforms, Inc. and affiliates.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*/
7+
8+
import React from 'react';
9+
import useBaseUrl from '@docusaurus/useBaseUrl';
10+
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
11+
12+
import Section from '../components/Section';
13+
import SectionTitle from '../components/SectionTitle';
14+
15+
import styles from './styles.module.css';
16+
17+
function Community() {
18+
const {siteConfig} = useDocusaurusContext();
19+
const apps = Object.values(siteConfig.customFields.users)
20+
.flat()
21+
.filter(app => app.pinned);
22+
23+
return (
24+
<Section>
25+
<SectionTitle title="Meta supported. Community driven." />
26+
<div className={styles.featureContainer}>
27+
<div>
28+
<p>
29+
Meta released React Native in 2015 and has been maintaining it ever
30+
since.
31+
</p>
32+
<p>
33+
In 2018, React Native had the{' '}
34+
<a href="https://octoverse.github.com/2018/projects#repositories">
35+
2nd highest
36+
</a>{' '}
37+
number of contributors for any repository in GitHub. Today, React
38+
Native is supported by contributions from individuals and companies
39+
around the world including{' '}
40+
<span>
41+
<a href="https://callstack.com/">Callstack</a>
42+
</span>
43+
,{' '}
44+
<span>
45+
<a href="https://expo.io/">Expo</a>
46+
</span>
47+
, <a href="https://infinite.red/">Infinite Red</a>,{' '}
48+
<a href="https://www.microsoft.com/">Microsoft</a> and{' '}
49+
<a href="https://swmansion.com/">Software Mansion</a>.
50+
</p>
51+
<p>
52+
Our community is always shipping exciting new projects and exploring
53+
platforms beyond Android and iOS with repos like{' '}
54+
<span>
55+
<a href="https://github.com/microsoft/react-native-windows#readme">
56+
React Native Windows
57+
</a>
58+
</span>
59+
,{' '}
60+
<a href="https://github.com/microsoft/react-native-macos#readme">
61+
React Native macOS
62+
</a>{' '}
63+
and{' '}
64+
<a href="https://github.com/necolas/react-native-web#readme">
65+
React Native Web
66+
</a>
67+
.
68+
</p>
69+
</div>
70+
<div>
71+
<p>
72+
React Native is being used in thousands of apps, but it's likely
73+
you've already used it in one of these apps:
74+
</p>
75+
<ul className="AppList">
76+
{apps.map((app, i) => {
77+
const imgSource = !app.icon.startsWith('http')
78+
? useBaseUrl('img/showcase/' + app.icon)
79+
: app.icon;
80+
return (
81+
<li key={i} className="item">
82+
{app.infoLink ? (
83+
<a href={app.infoLink}>
84+
<img src={imgSource} alt={app.name} />
85+
</a>
86+
) : (
87+
<img src={imgSource} alt={app.name} />
88+
)}
89+
</li>
90+
);
91+
})}
92+
</ul>
93+
<p>
94+
and <a href={useBaseUrl(`showcase`)}>many more</a>.
95+
</p>
96+
</div>
97+
</div>
98+
</Section>
99+
);
100+
}
101+
102+
export default Community;

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

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
/**
2+
* Copyright (c) Meta Platforms, Inc. and affiliates.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*/
7+
8+
.featureContainer {
9+
display: flex;
10+
justify-content: space-between;
11+
gap: 2rem;
12+
margin: 1rem auto;
13+
}
14+
15+
.featureContainer > :first-child {
16+
border-right: 1px solid var(--home-border);
17+
padding-right: 2rem;
18+
}
19+
20+
@media only screen and (max-width: 900px) {
21+
.featureContainer {
22+
flex-direction: column;
23+
gap: 0rem;
24+
max-width: 600px;
25+
}
26+
27+
.featureContainer > :first-child {
28+
border-right: none;
29+
padding-right: 0;
30+
}
31+
}

0 commit comments

Comments
 (0)