Skip to content

Commit af6767f

Browse files
jonsampjonsamp
authored
feat: redesign home page (react-navigation#992)
1 parent dda9002 commit af6767f

18 files changed

+881
-165
lines changed

‎src/css/custom.css

+16-3
Original file line numberDiff line numberDiff line change
@@ -14,19 +14,32 @@
1414
--ifm-color-primary-lighter: #816cba;
1515
--ifm-color-primary-lightest: #9886c6;
1616
--ifm-code-font-size: 95%;
17-
1817
--ifm-hero-background-color: #6b52ae;
1918
--ifm-hero-text-color: #fff;
19+
20+
--ifm-home-color-text: #414360;
21+
--ifm-home-color-background: #f7f7ff;
22+
--ifm-home-color-background-secondary: #d5d6f5;
23+
--ifm-home-color-highlight: #8c90e0;
24+
--ifm-home-color-border: #414360;
25+
--ifm-home-color-black: #25292e;
26+
--ifm-home-color-white: #f7f7ff;
2027
}
2128

22-
:root[data-theme="dark"] {
29+
:root[data-theme='dark'] {
2330
--ifm-color-primary: #a697ce;
2431
--ifm-color-primary-dark: #917fc3;
2532
--ifm-color-primary-darker: #8773bd;
2633
--ifm-color-primary-darkest: #6950aa;
2734
--ifm-color-primary-light: #bbafd9;
2835
--ifm-color-primary-lighter: #c5bbdf;
2936
--ifm-color-primary-lightest: #e4e0f0;
37+
38+
--ifm-home-color-text: #f7f7ff;
39+
--ifm-home-color-background: #414360;
40+
--ifm-home-color-background-secondary: #585b82;
41+
--ifm-home-color-highlight: #9692ff;
42+
--ifm-home-color-border: #f7f7ff;
3043
}
3144

3245
.docusaurus-highlight-code-line {
@@ -41,7 +54,7 @@ blockquote {
4154
border-left: 5px solid rgba(226, 232, 125, 0.5);
4255
}
4356

44-
[data-theme="dark"] blockquote {
57+
[data-theme='dark'] blockquote {
4558
background-color: #1c1c1c;
4659
border-left: 5px solid var(--ifm-color-primary);
4760
}

‎src/pages/home/BLM/index.js

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import React from 'react';
2+
import styles from './styles.module.css';
3+
4+
export default function BLM() {
5+
return (
6+
<section className={styles.wrapper}>
7+
<div className={styles.container}>
8+
Black Lives Matter.{' '}
9+
<a
10+
target="_blank"
11+
rel="noopener"
12+
rel="noreferrer"
13+
href="https://support.eji.org/give/153413/#!/donation/checkout"
14+
>
15+
Support the Equal Justice Initiative
16+
</a>
17+
.
18+
</div>
19+
</section>
20+
);
21+
}

‎src/pages/home/BLM/styles.module.css

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
.wrapper {
2+
background-color: var(--ifm-home-color-black);
3+
color: var(--ifm-home-color-white);
4+
display: flex;
5+
align-items: center;
6+
justify-content: center;
7+
padding: 4rem 1.5rem;
8+
text-align: center;
9+
font-size: 1.25rem;
10+
}
11+
12+
.wrapper a {
13+
color: var(--ifm-home-color-highlight);
14+
font-weight: bold;
15+
}
16+
17+
.container {
18+
max-width: 1366px;
19+
}

‎src/pages/home/Features/index.js

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import React from 'react';
2+
3+
import styles from './styles.module.css';
4+
5+
export default function Features() {
6+
const features = [
7+
{
8+
image: '/img/home_smile.svg',
9+
title: `Easy to Use`,
10+
description: `
11+
Start quickly with built-in navigators that deliver a seamless
12+
out-of-the-box experience.
13+
`,
14+
},
15+
{
16+
image: '/img/home_devices.svg',
17+
title: `Components built for iOS and Android`,
18+
description: `
19+
Platform-specific look-and-feel with smooth animations and gestures.
20+
`,
21+
},
22+
{
23+
image: '/img/home_star.svg',
24+
title: `Completely customizable`,
25+
description: `
26+
If you know how to write apps using JavaScript you can customize any
27+
part of React Navigation.
28+
`,
29+
},
30+
{
31+
image: '/img/home_extend.svg',
32+
title: `Extensible platform`,
33+
description: `
34+
React Navigation is extensible at every layer— you can write your own
35+
navigators or even replace the user-facing API.
36+
`,
37+
},
38+
];
39+
40+
return (
41+
<section className={styles.wrapper}>
42+
<div className={styles.container}>
43+
{features.map((feature) => (
44+
<div key={feature.title} className={styles.feature}>
45+
<img src={feature.image} />
46+
<h5 className={styles.title}>{feature.title}</h5>
47+
<p className={styles.description}>{feature.description}</p>
48+
</div>
49+
))}
50+
</div>
51+
</section>
52+
);
53+
}

‎src/pages/home/Features/styles.module.css

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
.wrapper {
2+
background-color: var(--ifm-home-color-black);
3+
color: var(--ifm-home-color-white);
4+
display: flex;
5+
align-items: center;
6+
justify-content: center;
7+
padding: 6rem 0;
8+
}
9+
10+
.container {
11+
display: grid;
12+
grid-template-columns: repeat(2, calc(50% - 4rem));
13+
justify-content: center;
14+
align-items: center;
15+
gap: 4rem;
16+
max-width: 1366px;
17+
}
18+
19+
.feature {
20+
max-width: 36rem;
21+
}
22+
23+
.title {
24+
font-size: 2rem;
25+
font-weight: 700;
26+
margin-top: 1rem;
27+
}
28+
29+
.description {
30+
font-size: 1.25rem;
31+
opacity: 0.8;
32+
}
33+
34+
@media (max-width: 1050px) {
35+
.container {
36+
grid-template-columns: auto;
37+
padding: 0 1.5rem;
38+
}
39+
40+
.title {
41+
font-size: 1.75rem;
42+
}
43+
}
44+
45+
@media (max-width: 570px) {
46+
.container {
47+
grid-template-columns: auto;
48+
}
49+
50+
.title {
51+
font-size: 1.5rem;
52+
}
53+
}

‎src/pages/home/Splash/SplashLeftIllustration.js

+124
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
import React from 'react';
2+
3+
export default function SplashLeftIllustration() {
4+
return (
5+
<svg
6+
width="240"
7+
height="430"
8+
fill="none"
9+
id="splashLeftIllustration"
10+
viewBox="0 0 247 470"
11+
>
12+
<rect
13+
x="49.26"
14+
y="53.906"
15+
width="190.827"
16+
height="353.79"
17+
rx="21.109"
18+
fill="var(--ifm-home-color-background)"
19+
stroke="var(--ifm-home-color-border)"
20+
stroke-width="10.132"
21+
/>
22+
<path
23+
d="M236.286 118.078H51.792"
24+
stroke="var(--ifm-home-color-border)"
25+
stroke-width="3.377"
26+
/>
27+
<rect
28+
x="64.458"
29+
y="70.793"
30+
width="33.775"
31+
height="33.775"
32+
rx="6.755"
33+
fill="var(--ifm-home-color-highlight)"
34+
/>
35+
<path
36+
d="M236.286 343.524H51.792"
37+
stroke="var(--ifm-home-color-border)"
38+
stroke-width="3.377"
39+
/>
40+
<path
41+
d="M84 82l-6 5.5 6 5.5"
42+
stroke="var(--ifm-home-color-background)"
43+
stroke-width="5.066"
44+
stroke-linecap="round"
45+
/>
46+
<path
47+
d="M123 88h44M180.98 48.84h35.464M245.152 136.654V101.19M245.152 182.25v-35.464"
48+
stroke="var(--ifm-home-color-border)"
49+
stroke-width="3.377"
50+
stroke-linecap="round"
51+
/>
52+
<rect
53+
x="69.524"
54+
y="136.654"
55+
width="150.297"
56+
height="59.95"
57+
rx="4.222"
58+
fill="var(--ifm-home-color-background-secondary)"
59+
/>
60+
<path
61+
d="M69.524 270.064a4.222 4.222 0 014.222-4.222H215.6a4.222 4.222 0 014.222 4.222v71.771H69.524v-71.771z"
62+
fill="var(--ifm-home-color-background-secondary)"
63+
/>
64+
<rect
65+
x="69.524"
66+
y="210.114"
67+
width="68.394"
68+
height="42.218"
69+
rx="4.222"
70+
fill="var(--ifm-home-color-background-secondary)"
71+
/>
72+
<rect
73+
x="151.428"
74+
y="210.114"
75+
width="68.394"
76+
height="42.218"
77+
rx="4.222"
78+
fill="var(--ifm-home-color-background-secondary)"
79+
/>
80+
<rect
81+
x="61.08"
82+
y="351.968"
83+
width="167.185"
84+
height="43.907"
85+
rx="10.132"
86+
fill="var(--ifm-home-color-highlight)"
87+
/>
88+
<path
89+
fill-rule="evenodd"
90+
clip-rule="evenodd"
91+
d="M195.713 364.478a.844.844 0 01.83-.689h2.651c.407 0 .755.289.83.689l.308 1.643c.112.6.805.886 1.308.541l1.392-.956a.844.844 0 011.075.099l1.878 1.878c.287.288.329.74.098 1.075l-.957 1.392a.845.845 0 00.541 1.309l1.645.307a.845.845 0 01.689.83v2.651a.844.844 0 01-.689.83l-1.645.307a.845.845 0 00-.54 1.309l.956 1.391a.846.846 0 01-.098 1.076l-1.878 1.877a.844.844 0 01-1.075.099l-1.391-.957a.844.844 0 00-1.308.54l-.309 1.646a.845.845 0 01-.83.689h-2.651a.845.845 0 01-.83-.689l-.307-1.645a.845.845 0 00-1.309-.541l-1.391.957a.846.846 0 01-1.076-.099l-1.878-1.878a.846.846 0 01-.099-1.075l.954-1.391a.845.845 0 00-.541-1.307l-1.641-.309a.844.844 0 01-.689-.83v-2.651c0-.407.29-.755.689-.83l1.643-.308a.844.844 0 00.54-1.308l-.955-1.392a.846.846 0 01.099-1.075l1.879-1.878a.844.844 0 011.075-.099l1.392.955a.845.845 0 001.308-.54l.307-1.643zm2.156 13.158a3.715 3.715 0 100-7.43 3.715 3.715 0 000 7.43z"
92+
fill="var(--ifm-home-color-background)"
93+
/>
94+
<path
95+
d="M81.345 369.171v14.39h7.634v-7.142c0-.555.333-1.057.845-1.273a4.838 4.838 0 013.764 0c.512.216.844.718.844 1.273v7.142h7.635v-14.39l-10.361-6.332-10.361 6.332z"
96+
fill="var(--ifm-home-color-background)"
97+
/>
98+
<path
99+
stroke="var(--ifm-home-color-background)"
100+
stroke-width="3.377"
101+
stroke-linecap="round"
102+
d="M133.696 367.011h22.797M133.696 373.766h22.797M133.696 380.521h22.797"
103+
/>
104+
<path
105+
d="M25.494 457.263l-3.465.162c-.216 0-.44-.142-.669-.426-.23-.284-.344-.56-.344-.831 0-.243.385-.398 1.155-.466.783-.067 2.492-.101 5.127-.101 1.364 0 2.486.149 3.364.446.891.297 1.337.628 1.337.993 0 .256-.223.385-.669.385-.445 0-1.067-.027-1.864-.081a47.376 47.376 0 00-2.29-.102c.04.135.06.284.06.446 0 .5-.526 2.824-1.58 6.971-.108.433-.27 1.108-.486 2.027-.216.918-.378 1.56-.486 1.925-.19.716-.358 1.074-.507 1.074-.203 0-.432-.149-.69-.446-.242-.311-.364-.621-.364-.932 0-.311.365-1.905 1.095-4.783.729-2.891 1.155-4.978 1.276-6.261zM36.602 459.715c.608 0 1.169.31 1.682.932.514.608.77 1.162.77 1.662 0 .486-.168.986-.506 1.499.162.203.243.378.243.527 0 .378-.088 1.027-.263 1.945-.163.919-.264 1.52-.304 1.804-.027.284-.054.513-.081.689-.027.162-.061.324-.102.486-.054.338-.175.507-.364.507-.244 0-.446-.209-.608-.628-.15-.432-.237-.986-.264-1.662-1.202 1.527-2.317 2.29-3.344 2.29-.621 0-1.236-.263-1.844-.79-.594-.541-.891-1.095-.891-1.662 0-.811.297-1.81.891-2.999a11.802 11.802 0 012.31-3.202c.946-.932 1.838-1.398 2.675-1.398zm.933 3.566c0-1.256-.25-1.884-.75-1.884-.527 0-1.142.378-1.844 1.134a10.978 10.978 0 00-1.784 2.534c-.486.945-.73 1.695-.73 2.249 0 .23.096.419.285.567.189.136.412.203.668.203.635 0 1.351-.426 2.148-1.277.797-.864 1.351-1.911 1.662-3.141.04-.202.156-.324.345-.364v-.021zM41.583 469.766c-.19 0-.413-.142-.67-.426-.256-.297-.384-.574-.384-.83 0-.257.21-1.135.628-2.635.432-1.499.858-3.303 1.277-5.411.432-2.121.648-4.059.648-5.816 0-.405.149-.607.446-.607.216 0 .48.202.79.607.311.392.466.777.466 1.156 0 1.661-.364 4.032-1.094 7.113 1.608-2.176 3.067-3.263 4.377-3.263.635 0 1.169.311 1.601.932.446.622.669 1.365.669 2.229 0 .851-.25 1.831-.75 2.939a8.757 8.757 0 01-1.986 2.857c-.837.784-1.716 1.175-2.634 1.175-.919 0-1.824-.466-2.716-1.398l-.02.02c-.297.905-.513 1.358-.648 1.358zm3.222-1.56c.878 0 1.736-.595 2.573-1.784.851-1.202 1.277-2.465 1.277-3.789 0-.797-.243-1.196-.73-1.196-.783 0-1.661.547-2.634 1.642-.96 1.094-1.79 2.398-2.493 3.911.635.81 1.304 1.216 2.007 1.216zM57.154 459.715c.46 0 .891.256 1.297.77.405.5.608.939.608 1.317 0 .23-.108.344-.325.344-.148 0-.378-.114-.689-.344-.31-.243-.628-.365-.952-.365-.324 0-.838.189-1.54.568-.69.378-1.034.776-1.034 1.195 0 .311.622.845 1.865 1.601.473.297.898.682 1.276 1.155.392.46.588.959.588 1.5 0 .527-.371 1.047-1.114 1.56-.73.5-1.588.75-2.574.75-.973 0-1.837-.236-2.594-.709-.743-.473-1.114-.919-1.114-1.338 0-.175.04-.31.121-.405a.441.441 0 01.345-.162c.135 0 .324.088.567.263.73.527 1.486.791 2.27.791.797 0 1.37-.088 1.722-.264.351-.189.527-.432.527-.729 0-.311-.196-.635-.588-.973a7.537 7.537 0 00-1.297-.932 6.356 6.356 0 01-1.276-.993c-.392-.392-.588-.791-.588-1.196 0-.716.56-1.459 1.682-2.229 1.135-.784 2.074-1.175 2.817-1.175zM10.1 12.308c0 1.108-.5 2.04-1.5 2.796-1 .743-2.148 1.115-3.445 1.115-1.284 0-2.344-.331-3.182-.993-.837-.676-1.256-1.31-1.256-1.905 0-.405.121-.608.365-.608.216 0 .641.324 1.276.973.243.23.568.446.973.648.419.203.858.304 1.317.304.946 0 1.783-.243 2.513-.73.743-.486 1.115-1.012 1.115-1.58 0-.365-.244-.83-.73-1.398a13.977 13.977 0 00-1.621-1.601 15.277 15.277 0 01-1.601-1.642c-.486-.58-.73-1.04-.73-1.378 0-.337.068-.695.203-1.074.135-.378.284-.655.446-.83.527-.581 1.344-1.115 2.452-1.601 1.121-.487 2.06-.73 2.817-.73.392 0 .723.128.993.385s.405.527.405.81c0 .136-.142.244-.426.325-.283.081-.716.19-1.296.324a9.709 9.709 0 00-1.52.446c-1.554.594-2.33 1.169-2.33 1.722 0 .298.79 1.129 2.37 2.493a9.822 9.822 0 011.642 1.844c.5.69.75 1.317.75 1.885zM14.279 14.314c0 .257.149.385.446.385.513 0 1.135-.142 1.864-.425.743-.298 1.155-.446 1.236-.446.244 0 .365.128.365.385 0 .392-.405.844-1.216 1.357-.797.514-1.526.77-2.188.77-.649 0-1.19-.175-1.621-.526-.433-.365-.649-.737-.649-1.115s.081-.858.243-1.439a74.27 74.27 0 01.69-2.33c.31-.973.553-1.777.729-2.412-.635.149-1.06.223-1.277.223-.216 0-.432-.108-.648-.324-.203-.23-.304-.446-.304-.649 0-.324.878-.634 2.634-.932.243-1.121.365-2.114.365-2.979 0-.405.135-.608.405-.608.23 0 .513.149.851.446.338.284.507.608.507.973s-.115 1.006-.345 1.925c.77-.067 1.385-.101 1.844-.101.811 0 1.216.175 1.216.527 0 .202-.223.371-.668.506-.433.135-1.351.345-2.756.629a87.671 87.671 0 01-1.074 3.667c-.433 1.365-.649 2.196-.649 2.493zM25.237 6.29c.608 0 1.168.31 1.682.931.513.608.77 1.162.77 1.662 0 .486-.17.986-.507 1.5.162.202.243.378.243.527 0 .378-.088 1.026-.263 1.945-.162.919-.264 1.52-.304 1.803a12.43 12.43 0 01-.081.69c-.027.162-.061.324-.102.486-.054.338-.175.506-.364.506-.244 0-.446-.209-.608-.628-.149-.432-.237-.986-.264-1.661-1.202 1.526-2.317 2.29-3.343 2.29-.622 0-1.237-.264-1.845-.79-.594-.541-.891-1.095-.891-1.662 0-.811.297-1.81.892-3a11.814 11.814 0 012.31-3.202c.945-.932 1.837-1.398 2.675-1.398zm.932 3.566c0-1.257-.25-1.885-.75-1.885-.527 0-1.142.378-1.844 1.135a10.956 10.956 0 00-1.783 2.533c-.487.946-.73 1.696-.73 2.25 0 .23.095.418.284.567.189.135.412.203.669.203.634 0 1.35-.426 2.148-1.277.797-.865 1.35-1.912 1.661-3.141.04-.203.156-.324.345-.365v-.02zM32.608 16.34c-.784 0-1.52-.303-2.209-.911-.689-.622-1.033-1.351-1.033-2.189 0-.851.283-1.83.85-2.938a9.493 9.493 0 012.19-2.837c.904-.784 1.783-1.176 2.634-1.176.554 0 1.04.25 1.459.75.419.5.628.939.628 1.317a.43.43 0 01-.101.284c-.068.067-.17.101-.304.101-.122 0-.345-.121-.669-.365-.324-.243-.615-.364-.871-.364-.73 0-1.581.641-2.554 1.925-.973 1.283-1.459 2.405-1.459 3.364 0 .419.128.75.385.993.27.243.696.364 1.277.364a6.05 6.05 0 001.621-.202c.5-.149.885-.29 1.155-.426.27-.148.48-.223.628-.223.257 0 .385.129.385.385 0 .392-.472.851-1.418 1.378-.932.514-1.797.77-2.594.77zM47.327 7.383c0 .122-.602.757-1.804 1.905a8.45 8.45 0 00-1.236 1.54c-.365.581-.547 1.115-.547 1.601 0 .487.142.94.425 1.358.297.405.615.716.953.932.35.203.668.406.952.608.297.203.446.372.446.507 0 .338-.27.506-.81.506-.528 0-1.163-.297-1.906-.891-.73-.608-1.182-1.284-1.357-2.027a2.96 2.96 0 01-.162-.385c-.92 1.243-1.588 2.108-2.007 2.594-.405.473-.709.71-.912.71-.202 0-.425-.156-.668-.467-.244-.324-.365-.587-.365-.79 0-.216.216-1.088.648-2.614.446-1.54.885-3.384 1.318-5.532.445-2.148.668-4.067.668-5.756 0-.216.027-.364.081-.445.068-.081.203-.122.406-.122.202 0 .452.203.75.608.297.392.445.777.445 1.155 0 1.202-.243 2.884-.73 5.046a56.743 56.743 0 01-1.742 6.16c1.527-2.175 2.844-3.93 3.952-5.268 1.121-1.351 1.81-2.027 2.067-2.027.27 0 .527.128.77.385s.364.493.364.71z"
106+
fill="var(--ifm-home-color-border)"
107+
/>
108+
<path
109+
d="M116.52 387.426a1.69 1.69 0 00-.266-3.367c-2.49.196-4.992 1.525-7.408 3.415-2.442 1.912-4.966 4.533-7.516 7.589-5.102 6.113-10.483 14.176-15.707 22.329-1.556 2.428-3.1 4.867-4.62 7.269v.001c-3.606 5.696-7.078 11.181-10.299 15.873-2.288 3.334-4.422 6.227-6.358 8.483-1.967 2.291-3.612 3.783-4.905 4.472a1.689 1.689 0 001.59 2.981c1.873-1 3.856-2.898 5.878-5.253 2.051-2.39 4.264-5.397 6.58-8.772 3.258-4.747 6.774-10.301 10.38-15.999l.007-.01c1.517-2.396 3.05-4.819 4.59-7.223 5.226-8.153 10.505-16.054 15.457-21.987 2.476-2.966 4.826-5.388 7.005-7.093 2.205-1.726 4.071-2.588 5.592-2.708z"
110+
fill="var(--ifm-home-color-border)"
111+
stroke="var(--ifm-home-color-background-secondary)"
112+
stroke-width="1.689"
113+
stroke-linecap="round"
114+
/>
115+
<path
116+
d="M31.809 19.44a1.689 1.689 0 00-1.407 3.07c.956.439 2.197 1.439 3.7 3.062 1.475 1.593 3.092 3.664 4.817 6.087 3.45 4.847 7.233 10.957 11.067 17.17l.298.484.01.014c3.716 6.025 7.472 12.113 10.953 17.085 1.79 2.556 3.528 4.848 5.172 6.703 1.624 1.831 3.245 3.34 4.813 4.218a1.689 1.689 0 001.65-2.947c-1.07-.6-2.391-1.77-3.936-3.512-1.523-1.719-3.18-3.895-4.932-6.4-3.421-4.886-7.131-10.898-10.87-16.959l-.284-.46c-3.818-6.188-7.662-12.4-11.19-17.355-1.765-2.479-3.476-4.68-5.09-6.423-1.586-1.713-3.195-3.114-4.771-3.837z"
117+
fill="var(--ifm-home-color-border)"
118+
stroke="var(--ifm-home-color-background)"
119+
stroke-width="1.689"
120+
stroke-linecap="round"
121+
/>
122+
</svg>
123+
);
124+
}

0 commit comments

Comments
 (0)