Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: Add landing page #78

Merged
merged 10 commits into from
Jan 9, 2025
Merged
Show file tree
Hide file tree
Changes from 9 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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
17 changes: 17 additions & 0 deletions docs/src/components/ExecuTorchIntroduction/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
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 a novel AI framework from the PyTorch team which provides
tools to export and run PyTorch models on edge devices like mobile
phones and microcontrollers.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we should use the same copy as is present on the official website, which is:
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 (vision, speech, Generative AI, and more) to edge devices.
Possibly shorten it a little bit, maybe skip parentheses

</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: 8rem;
}

.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;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

picky but I would slow it down a little bit, like 0.4s

}

[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
Loading