Skip to content

Commit 3627631

Browse files
jakmrojakmro
authored
docs: Add landing page (#78)
## Description Add Landing Page ### Type of change - [ ] Bug fix (non-breaking change which fixes an issue) - [ ] New feature (non-breaking change which adds functionality) - [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected) - [x] Documentation update (improves or adds clarity to existing documentation) ### Checklist - [x] I have performed a self-review of my code - [x] I have commented my code, particularly in hard-to-understand areas - [x] I have updated the documentation accordingly - [x] My changes generate no new warnings
1 parent cf7f372 commit 3627631

File tree

27 files changed

+931
-69
lines changed

27 files changed

+931
-69
lines changed

‎docs/docusaurus.config.js

+9-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
const lightCodeTheme = require('./src/theme/CodeBlock/highlighting-light.js');
22
const darkCodeTheme = require('./src/theme/CodeBlock/highlighting-dark.js');
3-
// @ts-check
4-
const webpack = require('webpack');
53

64
/** @type {import('@docusaurus/types').Config} */
75
const config = {
@@ -44,6 +42,9 @@ const config = {
4442
themeConfig:
4543
/** @type {import('@docusaurus/preset-classic').ThemeConfig} */
4644
({
45+
colorMode: {
46+
defaultMode: 'dark',
47+
},
4748
image: 'img/og-image.png',
4849
navbar: {
4950
title: 'React Native ExecuTorch',
@@ -53,6 +54,12 @@ const config = {
5354
src: 'img/logo-hero.svg',
5455
},
5556
items: [
57+
{
58+
to: 'docs/fundamentals/getting-started',
59+
activeBasePath: 'docs',
60+
label: 'Docs',
61+
position: 'right',
62+
},
5663
{
5764
'href':
5865
'https://github.com/software-mansion/react-native-executorch',

‎docs/src/components/ExecuTorchIntroduction/index.tsx

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import React from 'react';
2+
import styles from './styles.module.css';
3+
4+
const ExecuTorchIntroduction = () => {
5+
return (
6+
<div className={styles.introductionContainer}>
7+
<h2 className={styles.title}>What is ExecuTorch?</h2>
8+
<p className={styles.introduction}>
9+
ExecuTorch is an end-to-end solution for enabling on-device inference
10+
capabilities across mobile and edge devices including wearables,
11+
embedded devices and microcontrollers. It is part of the PyTorch Edge
12+
ecosystem and enables efficient deployment of various PyTorch models to
13+
edge devices.
14+
</p>
15+
</div>
16+
);
17+
};
18+
19+
export default ExecuTorchIntroduction;

‎docs/src/components/ExecuTorchIntroduction/styles.module.css

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
.introductionContainer {
2+
max-width: 996px;
3+
display: flex;
4+
flex-direction: column;
5+
margin-bottom: -8rem;
6+
gap: 4rem;
7+
}
8+
9+
.introduction {
10+
font-size: 24px;
11+
font-weight: 400;
12+
}
13+
14+
.title {
15+
font-size: var(--swm-h2-font-size);
16+
}
17+
18+
@media (max-width: 768px) {
19+
.introduction {
20+
font-size: 20px;
21+
}
22+
23+
.introductionContainer {
24+
gap: 0;
25+
margin-bottom: -6rem;
26+
}
27+
28+
.title {
29+
margin-bottom: 1rem;
30+
}
31+
}
32+
33+
@media (max-width: 420px) {
34+
.title {
35+
margin-bottom: 1.5rem;
36+
font-size: 24px;
37+
}
38+
}

‎docs/src/components/FooterBackground/index.tsx

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import React from 'react';
2+
import usePageType from '@site/src/hooks/usePageType';
3+
import WaveBottom from '@site/src/components/Wave/WaveBottom';
4+
import styles from './styles.module.css';
5+
6+
const FooterBackground = () => {
7+
const { isLanding } = usePageType();
8+
9+
return (
10+
<div className={styles.waveContainer}>
11+
{isLanding && (
12+
<>
13+
<WaveBottom />
14+
<div className={styles.linearGradient} />
15+
</>
16+
)}
17+
</div>
18+
);
19+
};
20+
21+
export default FooterBackground;

‎docs/src/components/FooterBackground/styles.module.css

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
.waveContainer {
2+
position: relative;
3+
margin-top: 2rem;
4+
z-index: 0;
5+
}
6+
7+
[class*='footerLanding'] {
8+
margin-top: -106px;
9+
}
10+
11+
.linearGradient {
12+
height: 106px;
13+
width: 100%;
14+
background: linear-gradient(#7394FF, #FFFFFF 150%);
15+
}
16+
17+
[data-theme='dark'] .linearGradient {
18+
background: linear-gradient(#313C9C, #160042 150%);
19+
}
20+
21+
@media (max-width: 996px) {
22+
[class*='footerLanding'] {
23+
margin-top: -121px;
24+
}
25+
.linearGradient {
26+
height: 121px;
27+
}
28+
}
29+
30+
@media (max-width: 700px) {
31+
[class*='footerLanding'] {
32+
margin-top: -147px;
33+
}
34+
.linearGradient {
35+
height: 147px;
36+
}
37+
}
38+
39+
@media (max-width: 376px) {
40+
[class*='footerLanding'] {
41+
margin-top: -173px;
42+
}
43+
.linearGradient {
44+
height: 173px;
45+
}
46+
}

‎docs/src/components/Hero/StartScreen/Logo.tsx

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import React from 'react';
2+
import useScreenSize from '@site/src/hooks/useScreenSize';
3+
import LogoIcon from '@site/static/img/logo-hero.svg';
4+
5+
const Logo = () => {
6+
const { windowWidth } = useScreenSize();
7+
8+
if (windowWidth <= 768) {
9+
return null;
10+
}
11+
12+
return <LogoIcon />;
13+
};
14+
15+
export default Logo;

‎docs/src/components/Hero/StartScreen/index.tsx

+14-9
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,25 @@
11
import React from 'react';
2+
import BrowserOnly from '@docusaurus/BrowserOnly';
23
import styles from './styles.module.css';
34
import HomepageButton from '@site/src/components/HomepageButton';
5+
import Logo from './Logo';
46

57
const StartScreen = () => {
68
return (
79
<section className={styles.hero}>
810
<div className={styles.heading}>
9-
<div>
10-
<h1 className={styles.headingLabel}>
11-
<span>React Native</span>
12-
<span>ExecuTorch</span>
13-
</h1>
14-
<h2 className={styles.subheadingLabel}>
15-
Declarative way to run AI models in React Native on device, powered
16-
by ExecuTorch.
17-
</h2>
11+
<div className={styles.subheadingContainer}>
12+
<div>
13+
<h1 className={styles.headingLabel}>
14+
<span>React Native</span>
15+
<span>ExecuTorch</span>
16+
</h1>
17+
<h2 className={styles.subheadingLabel}>
18+
Declarative way to run AI models in React Native on device,
19+
powered by ExecuTorch.
20+
</h2>
21+
</div>
22+
<BrowserOnly>{() => <Logo />}</BrowserOnly>
1823
</div>
1924
<div className={styles.lowerHeading}>
2025
<div className={styles.buttonContainer}>

‎docs/src/components/Hero/StartScreen/styles.module.css

+29-6
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,22 @@
55
}
66

77
.heading {
8-
margin-top: 11.25rem;
8+
width: 100%;
9+
margin-top: 11rem;
10+
}
11+
12+
.subheadingContainer {
13+
width: 100%;
14+
display: flex;
15+
flex-direction: row;
16+
justify-content: space-between;
17+
align-items: center;
18+
}
19+
20+
.subheadingContainer svg {
21+
height: 100%;
22+
width: 100%;
23+
max-width: 220px;
924
}
1025

1126
.headingLabel {
@@ -21,7 +36,7 @@
2136
}
2237

2338
.headingLabel :nth-child(2) {
24-
color: var(--swm-purple-light-100);
39+
color: var(--swm-cornflower-80);
2540
}
2641

2742
.subheadingLabel {
@@ -32,12 +47,12 @@
3247
letter-spacing: var(--swm-heading-letter-spacing-bigger);
3348

3449
margin-top: 3rem;
35-
margin-bottom: 5.5rem;
36-
width: 70%;
50+
width: 80%;
3751
color: var(--swm-landing-heading);
3852
}
3953

4054
.buttonContainer {
55+
margin-top: 3rem;
4156
display: flex;
4257
justify-content: flex-start;
4358
}
@@ -51,11 +66,15 @@
5166
font-size: 26px;
5267
width: 100%;
5368
}
69+
70+
.buttonContainer {
71+
margin-top: -2rem;
72+
}
5473
}
5574

5675
@media (max-width: 420px) {
57-
.heading {
58-
margin-top: 9.5rem;
76+
.heading {
77+
margin-top: 6rem;
5978
}
6079
.headingLabel {
6180
font-size: 26px;
@@ -64,4 +83,8 @@
6483
margin: 1rem 0 2rem 0;
6584
font-size: 20px;
6685
}
86+
87+
.buttonContainer {
88+
margin-top: -1rem;
89+
}
6790
}

‎docs/src/components/HomepageButton/styles.module.css

+45-27
Original file line numberDiff line numberDiff line change
@@ -7,17 +7,12 @@
77
text-wrap: nowrap;
88

99
color: var(--swm-off-white);
10-
background-color: var(--swm-landing-button-purple);
10+
background-color: var(--swm-navy-light-100);
1111

1212
cursor: pointer;
1313
transition: background-color 0.3s, color 0.3s;
1414
}
1515

16-
[data-theme='dark'] .homepageButton {
17-
background-color: var(--swm-purple-light-100);
18-
border-color: var(--swm-purple-light-100);
19-
}
20-
2116
a.homepageButtonLink:hover {
2217
text-decoration: none !important;
2318
}
@@ -67,45 +62,30 @@ a.homepageButtonLink:hover {
6762
/* Button - transparent styling */
6863

6964
.buttonTransparentStyling {
70-
background-color: transparent;
71-
color: var(--swm-landing-button-purple);
65+
color: var(--swm-navy-light-100);
7266
}
7367

7468
.buttonTransparentStyling svg {
75-
stroke: var(--swm-landing-button-purple);
76-
}
77-
78-
.buttonTransparentStyling:hover {
79-
background-color: var(--swm-landing-button-purple);
80-
color: var(--swm-off-white);
81-
}
82-
83-
.buttonTransparentStyling:hover svg {
84-
stroke: var(--swm-off-white);
69+
stroke: var(--swm-navy-light-100);
8570
}
8671

87-
/* Button - purple styling */
88-
89-
.buttonPurpleStyling {
90-
background-color: var(--swm-landing-button-purple);
91-
color: var(--swm-off-white);
92-
}
72+
/* Button - navy styling */
9373

9474
.buttonPurpleStyling svg {
9575
stroke: var(--swm-off-white);
9676
}
9777

9878
.buttonPurpleStyling:hover {
9979
background-color: transparent;
100-
color: var(--swm-landing-button-purple);
80+
color: var(--swm-navy-light-100);
10181
}
10282

10383
.buttonPurpleStyling:hover svg {
104-
stroke: var(--swm-landing-button-purple);
84+
stroke: var(--swm-navy-light-100);
10585
}
10686

10787
.buttonPurpleBorderStyling {
108-
border: 1px solid var(--swm-landing-button-purple);
88+
border: 1px solid var(--swm-navy-light-100);
10989
}
11090

11191
.arrow {
@@ -117,3 +97,41 @@ a.homepageButtonLink:hover {
11797
width: 24px;
11898
height: 24px;
11999
}
100+
101+
[data-theme='dark'] .homepageButton {
102+
background-color: var(--swm-cornflower-100);
103+
border-color: var(--swm-cornflower-100);
104+
}
105+
106+
[data-theme='dark'] .homepageButton:hover {
107+
border-color: var(--swm-off-white);
108+
}
109+
110+
/* Button - transparent styling */
111+
112+
[data-theme='dark'] .buttonTransparentStyling {
113+
color: var(--swm-cornflower-100);
114+
}
115+
116+
[data-theme='dark'] .buttonTransparentStyling svg {
117+
stroke: var(--swm-cornflower-100);
118+
}
119+
120+
/* Button - navy styling */
121+
122+
[data-theme='dark'] .buttonPurpleStyling svg {
123+
stroke: var(--swm-off-white);
124+
}
125+
126+
[data-theme='dark'] .buttonPurpleStyling:hover {
127+
background-color: transparent;
128+
color: var(--swm-off-white);
129+
}
130+
131+
[data-theme='dark'] .buttonPurpleStyling:hover svg {
132+
stroke: var(--swm-off-white);
133+
}
134+
135+
[data-theme='dark'] .buttonPurpleBorderStyling {
136+
border: 1px solid var(--swm-cornflower-100);
137+
}

0 commit comments

Comments
 (0)