Skip to content

Commit

Permalink
docs: Add landing page (#78)
Browse files Browse the repository at this point in the history
## 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
  • Loading branch information
jakmro authored Jan 9, 2025
1 parent cf7f372 commit 3627631
Show file tree
Hide file tree
Showing 27 changed files with 931 additions and 69 deletions.
11 changes: 9 additions & 2 deletions docs/docusaurus.config.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
const lightCodeTheme = require('./src/theme/CodeBlock/highlighting-light.js');
const darkCodeTheme = require('./src/theme/CodeBlock/highlighting-dark.js');
// @ts-check
const webpack = require('webpack');

/** @type {import('@docusaurus/types').Config} */
const config = {
Expand Down Expand Up @@ -44,6 +42,9 @@ const config = {
themeConfig:
/** @type {import('@docusaurus/preset-classic').ThemeConfig} */
({
colorMode: {
defaultMode: 'dark',
},
image: 'img/og-image.png',
navbar: {
title: 'React Native ExecuTorch',
Expand All @@ -53,6 +54,12 @@ const config = {
src: 'img/logo-hero.svg',
},
items: [
{
to: 'docs/fundamentals/getting-started',
activeBasePath: 'docs',
label: 'Docs',
position: 'right',
},
{
'href':
'/~https://github.com/software-mansion/react-native-executorch',
Expand Down
19 changes: 19 additions & 0 deletions docs/src/components/ExecuTorchIntroduction/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import React from 'react';
import styles from './styles.module.css';

const ExecuTorchIntroduction = () => {
return (
<div className={styles.introductionContainer}>
<h2 className={styles.title}>What is ExecuTorch?</h2>
<p className={styles.introduction}>
ExecuTorch is an end-to-end solution for enabling on-device inference
capabilities across mobile and edge devices including wearables,
embedded devices and microcontrollers. It is part of the PyTorch Edge
ecosystem and enables efficient deployment of various PyTorch models to
edge devices.
</p>
</div>
);
};

export default ExecuTorchIntroduction;
38 changes: 38 additions & 0 deletions docs/src/components/ExecuTorchIntroduction/styles.module.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
.introductionContainer {
max-width: 996px;
display: flex;
flex-direction: column;
margin-bottom: -8rem;
gap: 4rem;
}

.introduction {
font-size: 24px;
font-weight: 400;
}

.title {
font-size: var(--swm-h2-font-size);
}

@media (max-width: 768px) {
.introduction {
font-size: 20px;
}

.introductionContainer {
gap: 0;
margin-bottom: -6rem;
}

.title {
margin-bottom: 1rem;
}
}

@media (max-width: 420px) {
.title {
margin-bottom: 1.5rem;
font-size: 24px;
}
}
21 changes: 21 additions & 0 deletions docs/src/components/FooterBackground/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import React from 'react';
import usePageType from '@site/src/hooks/usePageType';
import WaveBottom from '@site/src/components/Wave/WaveBottom';
import styles from './styles.module.css';

const FooterBackground = () => {
const { isLanding } = usePageType();

return (
<div className={styles.waveContainer}>
{isLanding && (
<>
<WaveBottom />
<div className={styles.linearGradient} />
</>
)}
</div>
);
};

export default FooterBackground;
46 changes: 46 additions & 0 deletions docs/src/components/FooterBackground/styles.module.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
.waveContainer {
position: relative;
margin-top: 2rem;
z-index: 0;
}

[class*='footerLanding'] {
margin-top: -106px;
}

.linearGradient {
height: 106px;
width: 100%;
background: linear-gradient(#7394FF, #FFFFFF 150%);
}

[data-theme='dark'] .linearGradient {
background: linear-gradient(#313C9C, #160042 150%);
}

@media (max-width: 996px) {
[class*='footerLanding'] {
margin-top: -121px;
}
.linearGradient {
height: 121px;
}
}

@media (max-width: 700px) {
[class*='footerLanding'] {
margin-top: -147px;
}
.linearGradient {
height: 147px;
}
}

@media (max-width: 376px) {
[class*='footerLanding'] {
margin-top: -173px;
}
.linearGradient {
height: 173px;
}
}
15 changes: 15 additions & 0 deletions docs/src/components/Hero/StartScreen/Logo.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import React from 'react';
import useScreenSize from '@site/src/hooks/useScreenSize';
import LogoIcon from '@site/static/img/logo-hero.svg';

const Logo = () => {
const { windowWidth } = useScreenSize();

if (windowWidth <= 768) {
return null;
}

return <LogoIcon />;
};

export default Logo;
23 changes: 14 additions & 9 deletions docs/src/components/Hero/StartScreen/index.tsx
Original file line number Diff line number Diff line change
@@ -1,20 +1,25 @@
import React from 'react';
import BrowserOnly from '@docusaurus/BrowserOnly';
import styles from './styles.module.css';
import HomepageButton from '@site/src/components/HomepageButton';
import Logo from './Logo';

const StartScreen = () => {
return (
<section className={styles.hero}>
<div className={styles.heading}>
<div>
<h1 className={styles.headingLabel}>
<span>React Native</span>
<span>ExecuTorch</span>
</h1>
<h2 className={styles.subheadingLabel}>
Declarative way to run AI models in React Native on device, powered
by ExecuTorch.
</h2>
<div className={styles.subheadingContainer}>
<div>
<h1 className={styles.headingLabel}>
<span>React Native</span>
<span>ExecuTorch</span>
</h1>
<h2 className={styles.subheadingLabel}>
Declarative way to run AI models in React Native on device,
powered by ExecuTorch.
</h2>
</div>
<BrowserOnly>{() => <Logo />}</BrowserOnly>
</div>
<div className={styles.lowerHeading}>
<div className={styles.buttonContainer}>
Expand Down
35 changes: 29 additions & 6 deletions docs/src/components/Hero/StartScreen/styles.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,22 @@
}

.heading {
margin-top: 11.25rem;
width: 100%;
margin-top: 11rem;
}

.subheadingContainer {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}

.subheadingContainer svg {
height: 100%;
width: 100%;
max-width: 220px;
}

.headingLabel {
Expand All @@ -21,7 +36,7 @@
}

.headingLabel :nth-child(2) {
color: var(--swm-purple-light-100);
color: var(--swm-cornflower-80);
}

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

margin-top: 3rem;
margin-bottom: 5.5rem;
width: 70%;
width: 80%;
color: var(--swm-landing-heading);
}

.buttonContainer {
margin-top: 3rem;
display: flex;
justify-content: flex-start;
}
Expand All @@ -51,11 +66,15 @@
font-size: 26px;
width: 100%;
}

.buttonContainer {
margin-top: -2rem;
}
}

@media (max-width: 420px) {
.heading {
margin-top: 9.5rem;
.heading {
margin-top: 6rem;
}
.headingLabel {
font-size: 26px;
Expand All @@ -64,4 +83,8 @@
margin: 1rem 0 2rem 0;
font-size: 20px;
}

.buttonContainer {
margin-top: -1rem;
}
}
72 changes: 45 additions & 27 deletions docs/src/components/HomepageButton/styles.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -7,17 +7,12 @@
text-wrap: nowrap;

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

cursor: pointer;
transition: background-color 0.3s, color 0.3s;
}

[data-theme='dark'] .homepageButton {
background-color: var(--swm-purple-light-100);
border-color: var(--swm-purple-light-100);
}

a.homepageButtonLink:hover {
text-decoration: none !important;
}
Expand Down Expand Up @@ -67,45 +62,30 @@ a.homepageButtonLink:hover {
/* Button - transparent styling */

.buttonTransparentStyling {
background-color: transparent;
color: var(--swm-landing-button-purple);
color: var(--swm-navy-light-100);
}

.buttonTransparentStyling svg {
stroke: var(--swm-landing-button-purple);
}

.buttonTransparentStyling:hover {
background-color: var(--swm-landing-button-purple);
color: var(--swm-off-white);
}

.buttonTransparentStyling:hover svg {
stroke: var(--swm-off-white);
stroke: var(--swm-navy-light-100);
}

/* Button - purple styling */

.buttonPurpleStyling {
background-color: var(--swm-landing-button-purple);
color: var(--swm-off-white);
}
/* Button - navy styling */

.buttonPurpleStyling svg {
stroke: var(--swm-off-white);
}

.buttonPurpleStyling:hover {
background-color: transparent;
color: var(--swm-landing-button-purple);
color: var(--swm-navy-light-100);
}

.buttonPurpleStyling:hover svg {
stroke: var(--swm-landing-button-purple);
stroke: var(--swm-navy-light-100);
}

.buttonPurpleBorderStyling {
border: 1px solid var(--swm-landing-button-purple);
border: 1px solid var(--swm-navy-light-100);
}

.arrow {
Expand All @@ -117,3 +97,41 @@ a.homepageButtonLink:hover {
width: 24px;
height: 24px;
}

[data-theme='dark'] .homepageButton {
background-color: var(--swm-cornflower-100);
border-color: var(--swm-cornflower-100);
}

[data-theme='dark'] .homepageButton:hover {
border-color: var(--swm-off-white);
}

/* Button - transparent styling */

[data-theme='dark'] .buttonTransparentStyling {
color: var(--swm-cornflower-100);
}

[data-theme='dark'] .buttonTransparentStyling svg {
stroke: var(--swm-cornflower-100);
}

/* Button - navy styling */

[data-theme='dark'] .buttonPurpleStyling svg {
stroke: var(--swm-off-white);
}

[data-theme='dark'] .buttonPurpleStyling:hover {
background-color: transparent;
color: var(--swm-off-white);
}

[data-theme='dark'] .buttonPurpleStyling:hover svg {
stroke: var(--swm-off-white);
}

[data-theme='dark'] .buttonPurpleBorderStyling {
border: 1px solid var(--swm-cornflower-100);
}
Loading

0 comments on commit 3627631

Please sign in to comment.