From b66266b13e26b65405a20025b66e44d913725911 Mon Sep 17 00:00:00 2001 From: jakmro Date: Sat, 28 Dec 2024 00:45:14 +0100 Subject: [PATCH 01/10] Add docs button to navbar --- docs/docusaurus.config.js | 15 +++++++++------ docs/src/css/overrides.css | 4 ---- 2 files changed, 9 insertions(+), 10 deletions(-) diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js index 4d3ce8d4be..0e6c8d9fbe 100644 --- a/docs/docusaurus.config.js +++ b/docs/docusaurus.config.js @@ -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 = { @@ -54,10 +52,15 @@ const config = { }, items: [ { - 'href': - 'https://github.com/software-mansion/react-native-executorch', - 'position': 'right', - 'className': 'header-github', + to: 'docs/fundamentals/getting-started', + activeBasePath: 'docs', + label: 'Docs', + position: 'right', + }, + { + href: 'https://github.com/software-mansion/react-native-executorch', + position: 'right', + className: 'header-github', 'aria-label': 'GitHub repository', }, ], diff --git a/docs/src/css/overrides.css b/docs/src/css/overrides.css index bcab954495..d7f6664b20 100644 --- a/docs/src/css/overrides.css +++ b/docs/src/css/overrides.css @@ -132,10 +132,6 @@ table thead tr { } } -[class*='navbar__link']:not([class*='header-github']):not([role='button']) { - display: none; -} - /* TODO: Remove after @swmansion-t-rex-ui 0.0.10 patch */ button[class*='DocSearch-Button'] { margin: 0 !important; From c18330d884a098c68bcff1b740ccd6a43b2f4dcf Mon Sep 17 00:00:00 2001 From: jakmro Date: Sat, 28 Dec 2024 01:20:47 +0100 Subject: [PATCH 02/10] Add features list --- .../index.tsx | 17 ++++ .../styles.module.css | 29 +++++++ .../index.tsx | 32 +++++++ .../styles.module.css | 10 +++ .../ReactNativeExecuTorchFeatures/index.tsx | 24 ++++++ .../styles.module.css | 83 +++++++++++++++++++ docs/src/pages/index.tsx | 21 ++++- 7 files changed, 214 insertions(+), 2 deletions(-) create mode 100644 docs/src/components/ReactNativeExecuTorchFeatures/ReactNativeExecuTorchFeatureItem/index.tsx create mode 100644 docs/src/components/ReactNativeExecuTorchFeatures/ReactNativeExecuTorchFeatureItem/styles.module.css create mode 100644 docs/src/components/ReactNativeExecuTorchFeatures/ReactNativeExecuTorchFeatureList/index.tsx create mode 100644 docs/src/components/ReactNativeExecuTorchFeatures/ReactNativeExecuTorchFeatureList/styles.module.css create mode 100644 docs/src/components/ReactNativeExecuTorchFeatures/index.tsx create mode 100644 docs/src/components/ReactNativeExecuTorchFeatures/styles.module.css diff --git a/docs/src/components/ReactNativeExecuTorchFeatures/ReactNativeExecuTorchFeatureItem/index.tsx b/docs/src/components/ReactNativeExecuTorchFeatures/ReactNativeExecuTorchFeatureItem/index.tsx new file mode 100644 index 0000000000..8876f6481f --- /dev/null +++ b/docs/src/components/ReactNativeExecuTorchFeatures/ReactNativeExecuTorchFeatureItem/index.tsx @@ -0,0 +1,17 @@ +import React, { PropsWithChildren } from 'react'; +import styles from './styles.module.css'; + +interface Props extends PropsWithChildren { + title: string; +} + +const ReactNativeExecuTorchFeatureItem = ({ title, children }: Props) => { + return ( +
+

{title}

+

{children}

+
+ ); +}; + +export default ReactNativeExecuTorchFeatureItem; diff --git a/docs/src/components/ReactNativeExecuTorchFeatures/ReactNativeExecuTorchFeatureItem/styles.module.css b/docs/src/components/ReactNativeExecuTorchFeatures/ReactNativeExecuTorchFeatureItem/styles.module.css new file mode 100644 index 0000000000..08b97b56e4 --- /dev/null +++ b/docs/src/components/ReactNativeExecuTorchFeatures/ReactNativeExecuTorchFeatureItem/styles.module.css @@ -0,0 +1,29 @@ +.featureItem { + background-color: var(--swm-blue-light-20); + box-shadow: -12px 12px 0px var(--swm-blue-light-60); + flex: 1; + padding: 1.5em; +} + +[data-theme='dark'] .featureItem { + background-color: var(--swm-purple-dark-40); + box-shadow: -12px 12px 0px var(--swm-purple-dark-140); +} + +[data-theme='dark'] .featureTitle, +[data-theme='dark'] .featureBody { + color: var(--swm-navy-light-100); +} + +.featureTitle { + margin-bottom: 40px; + font-weight: 600; + font-size: 24px; + text-transform: uppercase; +} + +@media (max-width: 420px) { + .featureTitle { + font-size: 20px; + } +} diff --git a/docs/src/components/ReactNativeExecuTorchFeatures/ReactNativeExecuTorchFeatureList/index.tsx b/docs/src/components/ReactNativeExecuTorchFeatures/ReactNativeExecuTorchFeatureList/index.tsx new file mode 100644 index 0000000000..891efbcc18 --- /dev/null +++ b/docs/src/components/ReactNativeExecuTorchFeatures/ReactNativeExecuTorchFeatureList/index.tsx @@ -0,0 +1,32 @@ +import React from 'react'; +import styles from './styles.module.css'; +import ReactNativeExecuTorchFeatureItem from '@site/src/components/ReactNativeExecuTorchFeatures/ReactNativeExecuTorchFeatureItem'; + +const items = [ + { + title: 'privacy first', + body: "React Native ExecuTorch allows on-device execution of AI models, eliminating the need for external API calls. This means your app's data stays on the device, ensuring maximum privacy for your users.", + }, + { + title: 'cost fffective', + body: "The on-device computing nature of React Native ExecuTorch means you don't have to worry about cloud infrastructure. This approach reduces server costs and minimizes latency.", + }, + { + title: 'developer friendly', + body: "There's no need for deep AI expertise, we handle the complexities of AI models on the native site, making it simple for developers to use these models in React Native.", + }, +]; + +const ReactNativeExecuTorchFeatureList = () => { + return ( +
+ {items.map((item, idx) => ( + + {item.body} + + ))} +
+ ); +}; + +export default ReactNativeExecuTorchFeatureList; diff --git a/docs/src/components/ReactNativeExecuTorchFeatures/ReactNativeExecuTorchFeatureList/styles.module.css b/docs/src/components/ReactNativeExecuTorchFeatures/ReactNativeExecuTorchFeatureList/styles.module.css new file mode 100644 index 0000000000..9989e8be03 --- /dev/null +++ b/docs/src/components/ReactNativeExecuTorchFeatures/ReactNativeExecuTorchFeatureList/styles.module.css @@ -0,0 +1,10 @@ +.featureList { + display: flex; + gap: 1.5rem; +} + +@media (max-width: 996px) { + .featureList { + flex-direction: column; + } +} diff --git a/docs/src/components/ReactNativeExecuTorchFeatures/index.tsx b/docs/src/components/ReactNativeExecuTorchFeatures/index.tsx new file mode 100644 index 0000000000..5d9c1dc880 --- /dev/null +++ b/docs/src/components/ReactNativeExecuTorchFeatures/index.tsx @@ -0,0 +1,24 @@ +import React from 'react'; +import styles from './styles.module.css'; +import HomepageButton from '@site/src/components/HomepageButton'; +import ReactNativeExecuTorchFeatureList from '@site/src/components/ReactNativeExecuTorchFeatures/ReactNativeExecuTorchFeatureList'; + +const ReactNativeExecuTorchFeatures = () => { + return ( +
+

Why React Native ExecuTorch?

+ +
+

Learn more about React Native ExecuTorch

+ +
+
+ ); +}; + +export default ReactNativeExecuTorchFeatures; diff --git a/docs/src/components/ReactNativeExecuTorchFeatures/styles.module.css b/docs/src/components/ReactNativeExecuTorchFeatures/styles.module.css new file mode 100644 index 0000000000..f58300ea36 --- /dev/null +++ b/docs/src/components/ReactNativeExecuTorchFeatures/styles.module.css @@ -0,0 +1,83 @@ +.featuresContainer { + display: flex; + flex-direction: column; + margin-top: 7.5rem; + gap: 5rem; +} + +.featuresButton { + background-color: transparent; + color: var(--swm-landing-button-purple); +} + +[data-theme='dark'] .featuresButton { + background-color: transparent; + border-color: var(--swm-purple-dark-100); + color: var(--swm-purple-dark-100); +} +[data-theme='dark'] .featuresButton:hover { + background-color: var(--swm-purple-light-100); + border-color: var(--swm-purple-light-100); + color: var(--swm-off-white); +} + +.featuresButton svg { + stroke: var(--swm-landing-button-purple); +} + +.featuresButton:hover { + background-color: var(--swm-landing-button-purple); + color: var(--swm-off-white); +} + +.featuresButton:hover svg { + stroke: var(--swm-off-white); +} + +.title { + font-size: var(--swm-h2-font-size); +} + +.learnMoreSection { + display: flex; + flex-direction: row; + justify-content: space-between; + gap: 5rem; +} + +.learnMoreSection p { + font-size: 24px; + font-weight: 700; + line-height: 28.8px; + margin-bottom: 0; +} + +@media (max-width: 996px) { + .featuresContainer { + margin-top: 3.5rem; + } + .learnMoreSection { + gap: 2rem; + } +} + +@media (max-width: 768px) { + .learnMoreSection { + margin-top: 2.25rem; + flex-direction: column; + } + .featuresContainer { + margin-bottom: 0.5rem; + gap: 0; + } + .title { + margin-bottom: 1.5rem; + } +} + +@media (max-width: 420px) { + .title { + margin-bottom: 1.5rem; + font-size: 24px; + } +} diff --git a/docs/src/pages/index.tsx b/docs/src/pages/index.tsx index 9b96097bb0..894b1cf1cb 100644 --- a/docs/src/pages/index.tsx +++ b/docs/src/pages/index.tsx @@ -1,9 +1,26 @@ import React from 'react'; -import { Redirect } from '@docusaurus/router'; +import Layout from '@theme/Layout'; +import styles from './styles.module.css'; +import HomepageStartScreen from '@site/src/components/Hero/StartScreen'; +import ReactNativeExecuTorchFeatures from '@site/src/components/ReactNativeExecuTorchFeatures'; +import { HireUsSection } from '@swmansion/t-rex-ui'; function Home() { return ( - + +
+ + + +
+ ); } From 56a5b0b06754cd8833fada206787b5c2debb657e Mon Sep 17 00:00:00 2001 From: jakmro Date: Sat, 28 Dec 2024 01:46:09 +0100 Subject: [PATCH 03/10] Add ExecuTorch introduction section --- .../components/ExecuTorchIntroduction/index.tsx | 16 ++++++++++++++++ .../ExecuTorchIntroduction/styles.module.css | 15 +++++++++++++++ .../styles.module.css | 1 + docs/src/pages/index.tsx | 2 ++ 4 files changed, 34 insertions(+) create mode 100644 docs/src/components/ExecuTorchIntroduction/index.tsx create mode 100644 docs/src/components/ExecuTorchIntroduction/styles.module.css diff --git a/docs/src/components/ExecuTorchIntroduction/index.tsx b/docs/src/components/ExecuTorchIntroduction/index.tsx new file mode 100644 index 0000000000..55f5a130c1 --- /dev/null +++ b/docs/src/components/ExecuTorchIntroduction/index.tsx @@ -0,0 +1,16 @@ +import React from 'react'; +import styles from './styles.module.css'; + +const ExecuTorchIntroduction = () => { + return ( +
+

+ 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. +

+
+ ); +}; + +export default ExecuTorchIntroduction; diff --git a/docs/src/components/ExecuTorchIntroduction/styles.module.css b/docs/src/components/ExecuTorchIntroduction/styles.module.css new file mode 100644 index 0000000000..382d1c7e63 --- /dev/null +++ b/docs/src/components/ExecuTorchIntroduction/styles.module.css @@ -0,0 +1,15 @@ +.introductionContainer { + max-width: 768px; +} + +.introduction { + font-size: 24px; + font-weight: 400; +} + +@media (max-width: 768px) { + .introduction { + font-size: 20px !important; + } +} + diff --git a/docs/src/components/ReactNativeExecuTorchFeatures/styles.module.css b/docs/src/components/ReactNativeExecuTorchFeatures/styles.module.css index f58300ea36..c2ee899fd9 100644 --- a/docs/src/components/ReactNativeExecuTorchFeatures/styles.module.css +++ b/docs/src/components/ReactNativeExecuTorchFeatures/styles.module.css @@ -42,6 +42,7 @@ display: flex; flex-direction: row; justify-content: space-between; + align-items: center; gap: 5rem; } diff --git a/docs/src/pages/index.tsx b/docs/src/pages/index.tsx index 894b1cf1cb..b65e3e3639 100644 --- a/docs/src/pages/index.tsx +++ b/docs/src/pages/index.tsx @@ -2,6 +2,7 @@ import React from 'react'; import Layout from '@theme/Layout'; import styles from './styles.module.css'; import HomepageStartScreen from '@site/src/components/Hero/StartScreen'; +import ExecuTorchIntroduction from '@site/src/components/ExecuTorchIntroduction'; import ReactNativeExecuTorchFeatures from '@site/src/components/ReactNativeExecuTorchFeatures'; import { HireUsSection } from '@swmansion/t-rex-ui'; @@ -13,6 +14,7 @@ function Home() { >
+ Date: Sat, 28 Dec 2024 20:49:42 +0100 Subject: [PATCH 04/10] Add logo --- .../src/components/Hero/StartScreen/index.tsx | 25 +++++++++------ .../Hero/StartScreen/styles.module.css | 25 ++++++++++++--- docs/src/hooks/useScreenSize.tsx | 32 +++++++++++++++++++ 3 files changed, 68 insertions(+), 14 deletions(-) create mode 100644 docs/src/hooks/useScreenSize.tsx diff --git a/docs/src/components/Hero/StartScreen/index.tsx b/docs/src/components/Hero/StartScreen/index.tsx index e6ee7925c5..2fce88dfda 100644 --- a/docs/src/components/Hero/StartScreen/index.tsx +++ b/docs/src/components/Hero/StartScreen/index.tsx @@ -1,20 +1,27 @@ import React from 'react'; import styles from './styles.module.css'; import HomepageButton from '@site/src/components/HomepageButton'; +import useScreenSize from '@site/src/hooks/useScreenSize'; +import Logo from '@site/static/img/logo-hero.svg'; const StartScreen = () => { + const { windowWidth } = useScreenSize(); + return (
-
-

- React Native - ExecuTorch -

-

- Declarative way to run AI models in React Native on device, powered - by ExecuTorch. -

+
+
+

+ React Native + ExecuTorch +

+

+ Declarative way to run AI models in React Native on device, + powered by ExecuTorch. +

+
+ {windowWidth > 768 && }
diff --git a/docs/src/components/Hero/StartScreen/styles.module.css b/docs/src/components/Hero/StartScreen/styles.module.css index 1757e4819c..a4d10d3146 100644 --- a/docs/src/components/Hero/StartScreen/styles.module.css +++ b/docs/src/components/Hero/StartScreen/styles.module.css @@ -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 { @@ -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: 5rem; display: flex; justify-content: flex-start; } @@ -54,8 +69,8 @@ } @media (max-width: 420px) { - .heading { - margin-top: 9.5rem; + .heading { + margin-top: 6rem; } .headingLabel { font-size: 26px; diff --git a/docs/src/hooks/useScreenSize.tsx b/docs/src/hooks/useScreenSize.tsx new file mode 100644 index 0000000000..816db7ff5e --- /dev/null +++ b/docs/src/hooks/useScreenSize.tsx @@ -0,0 +1,32 @@ +import React, { useEffect, useState } from 'react'; + +/* + * Caution - read before use! + * As this hook uses innerWidth prop, which belongs to the window object, + * it requires to use the viewport. Thus, building the production build of the + * application may fail, as the Docusaurus is using SSR to serve it. + * Remember to verify if user can use the viewport by using + * `ExecutionEnvironment.canUseViewport` method, `` component or + * `useIsBrowser` hook. + */ +const useScreenSize = () => { + const [windowWidth, setWindowWidth] = useState(window.innerWidth); + + useEffect(() => { + const handleWindowResize = () => { + setWindowWidth(window.innerWidth); + }; + + window.addEventListener('resize', handleWindowResize); + + return () => { + window.removeEventListener('resize', handleWindowResize); + }; + }, []); + + return { + windowWidth, + }; +}; + +export default useScreenSize; From 13457255d304ac29125496187ee342a9fe2fe6e9 Mon Sep 17 00:00:00 2001 From: jakmro Date: Sat, 4 Jan 2025 15:46:40 +0100 Subject: [PATCH 05/10] Add waves and changle colors --- .../ExecuTorchIntroduction/index.tsx | 1 + .../ExecuTorchIntroduction/styles.module.css | 27 +++- .../src/components/FooterBackground/index.tsx | 14 ++ .../FooterBackground/styles.module.css | 36 +++++ .../src/components/Hero/StartScreen/index.tsx | 12 +- .../Hero/StartScreen/styles.module.css | 12 +- .../HomepageButton/styles.module.css | 20 +-- .../styles.module.css | 8 +- .../styles.module.css | 8 +- docs/src/components/Wave/WaveBottom/index.tsx | 29 ++++ .../Wave/WaveBottom/styles.module.css | 6 + docs/src/components/Wave/WaveBottom/waves.tsx | 114 +++++++++++++++ docs/src/components/Wave/WaveTop/index.tsx | 29 ++++ .../components/Wave/WaveTop/styles.module.css | 13 ++ docs/src/components/Wave/WaveTop/waves.tsx | 134 ++++++++++++++++++ docs/src/css/colors.css | 29 ++-- docs/src/css/overrides.css | 2 +- docs/src/hooks/usePageType.tsx | 14 ++ docs/src/pages/index.tsx | 26 ++-- docs/src/pages/styles.module.css | 53 ++++++- 20 files changed, 536 insertions(+), 51 deletions(-) create mode 100644 docs/src/components/FooterBackground/index.tsx create mode 100644 docs/src/components/FooterBackground/styles.module.css create mode 100644 docs/src/components/Wave/WaveBottom/index.tsx create mode 100644 docs/src/components/Wave/WaveBottom/styles.module.css create mode 100644 docs/src/components/Wave/WaveBottom/waves.tsx create mode 100644 docs/src/components/Wave/WaveTop/index.tsx create mode 100644 docs/src/components/Wave/WaveTop/styles.module.css create mode 100644 docs/src/components/Wave/WaveTop/waves.tsx create mode 100644 docs/src/hooks/usePageType.tsx diff --git a/docs/src/components/ExecuTorchIntroduction/index.tsx b/docs/src/components/ExecuTorchIntroduction/index.tsx index 55f5a130c1..be7caffde6 100644 --- a/docs/src/components/ExecuTorchIntroduction/index.tsx +++ b/docs/src/components/ExecuTorchIntroduction/index.tsx @@ -4,6 +4,7 @@ import styles from './styles.module.css'; const ExecuTorchIntroduction = () => { return (
+

What is ExecuTorch?

ExecuTorch is a novel AI framework from the PyTorch team which provides tools to export and run PyTorch models on edge devices like mobile diff --git a/docs/src/components/ExecuTorchIntroduction/styles.module.css b/docs/src/components/ExecuTorchIntroduction/styles.module.css index 382d1c7e63..84df810ce2 100644 --- a/docs/src/components/ExecuTorchIntroduction/styles.module.css +++ b/docs/src/components/ExecuTorchIntroduction/styles.module.css @@ -1,5 +1,9 @@ .introductionContainer { - max-width: 768px; + max-width: 996px; + display: flex; + flex-direction: column; + margin-bottom: -8rem; + gap: 4rem; } .introduction { @@ -7,9 +11,28 @@ font-weight: 400; } +.title { + font-size: var(--swm-h2-font-size); +} + @media (max-width: 768px) { .introduction { - font-size: 20px !important; + 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; + } +} diff --git a/docs/src/components/FooterBackground/index.tsx b/docs/src/components/FooterBackground/index.tsx new file mode 100644 index 0000000000..a3d6ed8314 --- /dev/null +++ b/docs/src/components/FooterBackground/index.tsx @@ -0,0 +1,14 @@ +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 ( +

{isLanding && }
+ ); +}; + +export default FooterBackground; diff --git a/docs/src/components/FooterBackground/styles.module.css b/docs/src/components/FooterBackground/styles.module.css new file mode 100644 index 0000000000..47c0a573bf --- /dev/null +++ b/docs/src/components/FooterBackground/styles.module.css @@ -0,0 +1,36 @@ +.waveContainer { + position: relative; + margin-top: 106px; + z-index: 0; +} + +[class*='footerLanding'] { + margin-top: -106px; +} + +@media (max-width: 996px) { + .waveContainer { + margin-top: 121px; + } + [class*='footerLanding'] { + margin-top: -121px; + } +} + +@media (max-width: 700px) { + .waveContainer { + margin-top: 147px; + } + [class*='footerLanding'] { + margin-top: -147px; + } +} + +@media (max-width: 376px) { + .waveContainer { + margin-top: 173px; + } + [class*='footerLanding'] { + margin-top: -173px; + } +} diff --git a/docs/src/components/Hero/StartScreen/index.tsx b/docs/src/components/Hero/StartScreen/index.tsx index 2fce88dfda..d6c6a8d983 100644 --- a/docs/src/components/Hero/StartScreen/index.tsx +++ b/docs/src/components/Hero/StartScreen/index.tsx @@ -3,10 +3,9 @@ import styles from './styles.module.css'; import HomepageButton from '@site/src/components/HomepageButton'; import useScreenSize from '@site/src/hooks/useScreenSize'; import Logo from '@site/static/img/logo-hero.svg'; +import BrowserOnly from '@docusaurus/BrowserOnly'; const StartScreen = () => { - const { windowWidth } = useScreenSize(); - return (
@@ -21,7 +20,14 @@ const StartScreen = () => { powered by ExecuTorch.
- {windowWidth > 768 && } + + {() => { + const { windowWidth } = useScreenSize(); + if (windowWidth > 768) { + return ; + } + }} +
diff --git a/docs/src/components/Hero/StartScreen/styles.module.css b/docs/src/components/Hero/StartScreen/styles.module.css index a4d10d3146..6f504f66c0 100644 --- a/docs/src/components/Hero/StartScreen/styles.module.css +++ b/docs/src/components/Hero/StartScreen/styles.module.css @@ -36,7 +36,7 @@ } .headingLabel :nth-child(2) { - color: var(--swm-purple-light-100); + color: var(--swm-cornflower-80); } .subheadingLabel { @@ -52,7 +52,7 @@ } .buttonContainer { - margin-top: 5rem; + margin-top: 3rem; display: flex; justify-content: flex-start; } @@ -66,6 +66,10 @@ font-size: 26px; width: 100%; } + + .buttonContainer { + margin-top: -2rem; + } } @media (max-width: 420px) { @@ -79,4 +83,8 @@ margin: 1rem 0 2rem 0; font-size: 20px; } + + .buttonContainer { + margin-top: -1rem; + } } diff --git a/docs/src/components/HomepageButton/styles.module.css b/docs/src/components/HomepageButton/styles.module.css index 0170cb92de..b8213dcd23 100644 --- a/docs/src/components/HomepageButton/styles.module.css +++ b/docs/src/components/HomepageButton/styles.module.css @@ -7,15 +7,15 @@ text-wrap: nowrap; color: var(--swm-off-white); - background-color: var(--swm-landing-button-purple); + background-color: var(--swm-cornflower-80); 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); + background-color: var(--swm-cornflower-80); + border-color: var(--swm-cornflower-80); } a.homepageButtonLink:hover { @@ -68,15 +68,15 @@ a.homepageButtonLink:hover { .buttonTransparentStyling { background-color: transparent; - color: var(--swm-landing-button-purple); + color: var(--swm-cornflower-80); } .buttonTransparentStyling svg { - stroke: var(--swm-landing-button-purple); + stroke: var(--swm-cornflower-80); } .buttonTransparentStyling:hover { - background-color: var(--swm-landing-button-purple); + background-color: var(--swm-cornflower-80); color: var(--swm-off-white); } @@ -87,7 +87,7 @@ a.homepageButtonLink:hover { /* Button - purple styling */ .buttonPurpleStyling { - background-color: var(--swm-landing-button-purple); + background-color: var(--swm-cornflower-80); color: var(--swm-off-white); } @@ -97,15 +97,15 @@ a.homepageButtonLink:hover { .buttonPurpleStyling:hover { background-color: transparent; - color: var(--swm-landing-button-purple); + color: var(--swm-cornflower-80); } .buttonPurpleStyling:hover svg { - stroke: var(--swm-landing-button-purple); + stroke: var(--swm-cornflower-80); } .buttonPurpleBorderStyling { - border: 1px solid var(--swm-landing-button-purple); + border: 1px solid var(--swm-cornflower-80); } .arrow { diff --git a/docs/src/components/ReactNativeExecuTorchFeatures/ReactNativeExecuTorchFeatureItem/styles.module.css b/docs/src/components/ReactNativeExecuTorchFeatures/ReactNativeExecuTorchFeatureItem/styles.module.css index 08b97b56e4..437537b99d 100644 --- a/docs/src/components/ReactNativeExecuTorchFeatures/ReactNativeExecuTorchFeatureItem/styles.module.css +++ b/docs/src/components/ReactNativeExecuTorchFeatures/ReactNativeExecuTorchFeatureItem/styles.module.css @@ -1,13 +1,13 @@ .featureItem { - background-color: var(--swm-blue-light-20); - box-shadow: -12px 12px 0px var(--swm-blue-light-60); + background-color: var(--swm-cornflower-0); + box-shadow: -12px 12px 0px var(--swm-cornflower-80); flex: 1; padding: 1.5em; } [data-theme='dark'] .featureItem { - background-color: var(--swm-purple-dark-40); - box-shadow: -12px 12px 0px var(--swm-purple-dark-140); + background-color: var(--swm-cornflower-60); + box-shadow: -12px 12px 0px var(--swm-cornflower-80); } [data-theme='dark'] .featureTitle, diff --git a/docs/src/components/ReactNativeExecuTorchFeatures/styles.module.css b/docs/src/components/ReactNativeExecuTorchFeatures/styles.module.css index c2ee899fd9..c1f2d66dc5 100644 --- a/docs/src/components/ReactNativeExecuTorchFeatures/styles.module.css +++ b/docs/src/components/ReactNativeExecuTorchFeatures/styles.module.css @@ -12,12 +12,12 @@ [data-theme='dark'] .featuresButton { background-color: transparent; - border-color: var(--swm-purple-dark-100); - color: var(--swm-purple-dark-100); + border-color: var(--swm-cornflower-80); + color: var(--swm-cornflower-80); } [data-theme='dark'] .featuresButton:hover { - background-color: var(--swm-purple-light-100); - border-color: var(--swm-purple-light-100); + background-color: var(--swm-cornflower-80); + border-color: var(--swm-cornflower-80); color: var(--swm-off-white); } diff --git a/docs/src/components/Wave/WaveBottom/index.tsx b/docs/src/components/Wave/WaveBottom/index.tsx new file mode 100644 index 0000000000..59962cc75c --- /dev/null +++ b/docs/src/components/Wave/WaveBottom/index.tsx @@ -0,0 +1,29 @@ +import React from 'react'; +import useScreenSize from '@site/src/hooks/useScreenSize'; +import BrowserOnly from '@docusaurus/BrowserOnly'; +import { useColorMode } from '@docusaurus/theme-common'; +import { WaveLight, WaveDark, WaveLightMobile, WaveDarkMobile } from './waves'; + +const WaveBottom = () => { + const theme = useColorMode().colorMode; + + return ( + + {() => { + const { windowWidth } = useScreenSize(); + + if (theme === 'dark') { + return windowWidth > 768 + ? WaveDark(windowWidth) + : WaveDarkMobile(windowWidth); + } + + return windowWidth > 768 + ? WaveLight(windowWidth) + : WaveLightMobile(windowWidth); + }} + + ); +}; + +export default WaveBottom; diff --git a/docs/src/components/Wave/WaveBottom/styles.module.css b/docs/src/components/Wave/WaveBottom/styles.module.css new file mode 100644 index 0000000000..502a4b06e2 --- /dev/null +++ b/docs/src/components/Wave/WaveBottom/styles.module.css @@ -0,0 +1,6 @@ +.waveBottom { + position: absolute; + z-index: -1; + bottom: 0; + right: 0; +} diff --git a/docs/src/components/Wave/WaveBottom/waves.tsx b/docs/src/components/Wave/WaveBottom/waves.tsx new file mode 100644 index 0000000000..5e5521c914 --- /dev/null +++ b/docs/src/components/Wave/WaveBottom/waves.tsx @@ -0,0 +1,114 @@ +import React from 'react'; +import styles from './styles.module.css'; + +export const WaveLight = (width: number) => ( + + + + + + + + + +); + +export const WaveDark = (width: number) => ( + + + + + + + + + +); + +export const WaveLightMobile = (width: number) => ( + 376 ? 340 : 360) - width * 0.3}`} + fill="none" + xmlns="http://www.w3.org/2000/svg" + > + + + + + + + + +); + +export const WaveDarkMobile = (width: number) => ( + 376 ? 340 : 360) - width * 0.3}`} + fill="none" + xmlns="http://www.w3.org/2000/svg" + > + + + + + + + + +); diff --git a/docs/src/components/Wave/WaveTop/index.tsx b/docs/src/components/Wave/WaveTop/index.tsx new file mode 100644 index 0000000000..2e22deda0c --- /dev/null +++ b/docs/src/components/Wave/WaveTop/index.tsx @@ -0,0 +1,29 @@ +import React from 'react'; +import useScreenSize from '@site/src/hooks/useScreenSize'; +import BrowserOnly from '@docusaurus/BrowserOnly'; +import { useColorMode } from '@docusaurus/theme-common'; +import { WaveLight, WaveDark, WaveLightMobile, WaveDarkMobile } from './waves'; + +const WaveTop = () => { + const theme = useColorMode().colorMode; + + return ( + + {() => { + const { windowWidth } = useScreenSize(); + + if (theme === 'dark') { + return windowWidth > 768 + ? WaveDark(windowWidth) + : WaveDarkMobile(windowWidth); + } + + return windowWidth > 768 + ? WaveLight(windowWidth) + : WaveLightMobile(windowWidth); + }} + + ); +}; + +export default WaveTop; diff --git a/docs/src/components/Wave/WaveTop/styles.module.css b/docs/src/components/Wave/WaveTop/styles.module.css new file mode 100644 index 0000000000..4b347bd867 --- /dev/null +++ b/docs/src/components/Wave/WaveTop/styles.module.css @@ -0,0 +1,13 @@ +.wave { + position: absolute; + bottom: 100%; + width: 100%; + z-index: -1; + margin-bottom: -5%; +} + +@media (max-width: 768px) { + .wave { + margin-bottom: -29%; + } +} \ No newline at end of file diff --git a/docs/src/components/Wave/WaveTop/waves.tsx b/docs/src/components/Wave/WaveTop/waves.tsx new file mode 100644 index 0000000000..dea1061f36 --- /dev/null +++ b/docs/src/components/Wave/WaveTop/waves.tsx @@ -0,0 +1,134 @@ +import React from 'react'; +import styles from './styles.module.css'; + +export const WaveLight = (width: number) => ( + + + + + + + + + + + + + + +); + +export const WaveDark = (width: number) => ( + + + + + + + + + + + + + + +); + +export const WaveLightMobile = (width: number) => ( + + + + + + + + + + + + + + +); + +export const WaveDarkMobile = (width: number) => ( + + + + + + + + + + + + + + +); diff --git a/docs/src/css/colors.css b/docs/src/css/colors.css index 73e84454e9..84c327c0c0 100644 --- a/docs/src/css/colors.css +++ b/docs/src/css/colors.css @@ -15,6 +15,15 @@ --swm-navy-dark-40: #abbcf5; --swm-navy-dark-20: #c1c6e5; + /* react-native-executorch */ + --swm-cornflower-100: #4B6CF4; + --swm-cornflower-80: #7394FF; + --swm-cornflower-60: #A6C2FF; + --swm-cornflower-0: #F7FAFF; + + --swm-navy-100: #160042; + /* end react-native-executorch */ + --swm-purple-light-100: #782aeb; --swm-purple-light-80: #b58df1; --swm-purple-light-60: #d1bbf3; @@ -232,22 +241,22 @@ /* Landing */ --swm-landing-heading: var(--ifm-font-color-base); - --swm-landing-heading-selected: var(--swm-purple-light-100); + --swm-landing-heading-selected: var(--swm-cornflower-80); --swm-landing-heading-selected-border: var(--swm-navy-light-100); --swm-landing-horse: var(--swm-navy-light-100); - --swm-landing-button-purple: var(--swm-purple-light-100); + --swm-landing-button-purple: var(--swm-cornflower-80); --swm-landing-feature-item: var(--swm-purple-light-40); - --swm-landing-feature-item-shadow: var(--swm-purple-light-100); + --swm-landing-feature-item-shadow: var(--swm-cornflower-80); --swm-landing-sponsors-color: var(--ifm-font-color-base); /* Hire Us Section */ - --swm-hire-us-section-title: var(--swm-blue-light-60); - --swm-hire-us-section: var(--swm-navy-light-100); + --swm-hire-us-section-title: var(--swm-cornflower-100); + --swm-hire-us-section: var(--swm-cornflower-80); --swm-hire-us-section-color: var(--swm-off-white); /* Cards */ @@ -415,18 +424,18 @@ --swm-landing-horse: var(--swm-off-white); - --swm-landing-button-purple: var(--swm-purple-dark-100); + --swm-landing-button-purple: var(--swm-cornflower-80); - --swm-landing-feature-item: var(--swm-purple-dark-100); + --swm-landing-feature-item: var(--swm-cornflower-80); --swm-landing-feature-item-shadow: var(--swm-purple-dark-140); --swm-landing-sponsors-color: var(--swm-off-white); /* Hire Us Section */ - --swm-hire-us-section-title: var(--swm-purple-dark-100); - --swm-hire-us-section: var(--swm-off-white); - --swm-hire-us-section-color: var(--swm-purple-light-100); + --swm-hire-us-section-title: var(--swm-cornflower-80); + --swm-hire-us-section: var(--swm-cornflower-80); + --swm-hire-us-section-color: var(--swm-white); /* Cards */ --swm-card-background: var(--swm-navy); diff --git a/docs/src/css/overrides.css b/docs/src/css/overrides.css index d7f6664b20..eaa21a3de6 100644 --- a/docs/src/css/overrides.css +++ b/docs/src/css/overrides.css @@ -9,7 +9,7 @@ background-color: #ffffff; } [data-theme='dark'][class*='plugin-pages'] { - background-color: var(--swm-navy-dark-140); + background-color: var(--swm-navy-100); } table { diff --git a/docs/src/hooks/usePageType.tsx b/docs/src/hooks/usePageType.tsx new file mode 100644 index 0000000000..75577cac88 --- /dev/null +++ b/docs/src/hooks/usePageType.tsx @@ -0,0 +1,14 @@ +import { useLocation } from '@docusaurus/router'; +import useBaseUrl from '@docusaurus/useBaseUrl'; + +const usePageType = () => { + const location = useLocation(); + const baseUrl = useBaseUrl('/'); + + return { + isDocumentation: location.pathname.startsWith(`${baseUrl}docs`), + isLanding: location.pathname === baseUrl, + }; +}; + +export default usePageType; diff --git a/docs/src/pages/index.tsx b/docs/src/pages/index.tsx index b65e3e3639..d1c05bd259 100644 --- a/docs/src/pages/index.tsx +++ b/docs/src/pages/index.tsx @@ -2,26 +2,34 @@ import React from 'react'; import Layout from '@theme/Layout'; import styles from './styles.module.css'; import HomepageStartScreen from '@site/src/components/Hero/StartScreen'; -import ExecuTorchIntroduction from '@site/src/components/ExecuTorchIntroduction'; +import WaveTop from '@site/src/components/Wave/WaveTop'; +import ExecuTorchIntroduction from '../components/ExecuTorchIntroduction'; import ReactNativeExecuTorchFeatures from '@site/src/components/ReactNativeExecuTorchFeatures'; import { HireUsSection } from '@swmansion/t-rex-ui'; +import FooterBackground from '../components/FooterBackground'; function Home() { return (
- - -
+
+ +
+ + + +
+
+ ); } diff --git a/docs/src/pages/styles.module.css b/docs/src/pages/styles.module.css index 47adf3019b..f969c71d05 100644 --- a/docs/src/pages/styles.module.css +++ b/docs/src/pages/styles.module.css @@ -1,24 +1,65 @@ .container { - width: 60%; + width: 70%; margin: 0 auto; display: flex; flex-direction: column; - gap: 7.5rem; + gap: 8rem; } -.waveContainer { +.linearGradient { position: relative; + width: 100%; + margin-top: 20rem; + background: linear-gradient(#7394FF, #FFFFFF); + padding-top: 4rem; + margin-bottom: 2rem; +} + +[data-theme='dark'] .linearGradient { + background: linear-gradient(#313c9c, #160042); +} + +@media (max-width: 2560px) { + .linearGradient { + margin-top: 16rem; + } +} + +@media (max-width: 1920px) { + .linearGradient { + margin-top: 14rem; + } } @media (max-width: 1440px) { .container { - width: 75%; + width: 80%; + } + + .linearGradient { + margin-top: 12rem; } } @media (max-width: 996px) { .container { width: 85%; - gap: 3.5rem; + gap: 6rem; } -} \ No newline at end of file + + .linearGradient { + margin-top: 10rem; + } +} + +@media (max-width: 768px) { + .linearGradient { + padding-top: 2rem; + } +} + +@media (max-width: 420px) { + .linearGradient { + margin-top: 8rem; + } +} From 16ef7b13343545546f1d5c5af3fad72d434ce55b Mon Sep 17 00:00:00 2001 From: jakmro Date: Tue, 7 Jan 2025 08:34:49 +0100 Subject: [PATCH 06/10] Change defaultMode to dark --- docs/docusaurus.config.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js index 0e6c8d9fbe..0208b9db7f 100644 --- a/docs/docusaurus.config.js +++ b/docs/docusaurus.config.js @@ -42,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', From d8eb2bab69ecdf733abfcd1761072f6cb05680c4 Mon Sep 17 00:00:00 2001 From: jakmro Date: Tue, 7 Jan 2025 11:32:20 +0100 Subject: [PATCH 07/10] Fix buttons styles and waves --- .../src/components/FooterBackground/index.tsx | 9 ++- .../FooterBackground/styles.module.css | 30 +++++--- .../HomepageButton/styles.module.css | 72 ++++++++++++------- .../styles.module.css | 25 ++++--- docs/src/components/Wave/WaveBottom/index.tsx | 8 +-- .../Wave/WaveBottom/styles.module.css | 20 +++++- docs/src/components/Wave/WaveBottom/waves.tsx | 32 ++++----- docs/src/components/Wave/WaveTop/index.tsx | 8 +-- docs/src/components/Wave/WaveTop/waves.tsx | 16 ++--- docs/src/css/colors.css | 6 +- docs/src/pages/index.tsx | 12 ++-- docs/src/pages/styles.module.css | 18 ++++- 12 files changed, 163 insertions(+), 93 deletions(-) diff --git a/docs/src/components/FooterBackground/index.tsx b/docs/src/components/FooterBackground/index.tsx index a3d6ed8314..1a00966ecd 100644 --- a/docs/src/components/FooterBackground/index.tsx +++ b/docs/src/components/FooterBackground/index.tsx @@ -7,7 +7,14 @@ const FooterBackground = () => { const { isLanding } = usePageType(); return ( -
{isLanding && }
+
+ {isLanding && ( + <> + +
+ + )} +
); }; diff --git a/docs/src/components/FooterBackground/styles.module.css b/docs/src/components/FooterBackground/styles.module.css index 47c0a573bf..5fdda1a2b2 100644 --- a/docs/src/components/FooterBackground/styles.module.css +++ b/docs/src/components/FooterBackground/styles.module.css @@ -1,6 +1,6 @@ .waveContainer { position: relative; - margin-top: 106px; + margin-top: 2rem; z-index: 0; } @@ -8,29 +8,39 @@ 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) { - .waveContainer { - margin-top: 121px; - } [class*='footerLanding'] { margin-top: -121px; } + .linearGradient { + height: 121px; + } } @media (max-width: 700px) { - .waveContainer { - margin-top: 147px; - } [class*='footerLanding'] { margin-top: -147px; } + .linearGradient { + height: 147px; + } } @media (max-width: 376px) { - .waveContainer { - margin-top: 173px; - } [class*='footerLanding'] { margin-top: -173px; } + .linearGradient { + height: 173px; + } } diff --git a/docs/src/components/HomepageButton/styles.module.css b/docs/src/components/HomepageButton/styles.module.css index b8213dcd23..feffb4d27e 100644 --- a/docs/src/components/HomepageButton/styles.module.css +++ b/docs/src/components/HomepageButton/styles.module.css @@ -7,17 +7,12 @@ text-wrap: nowrap; color: var(--swm-off-white); - background-color: var(--swm-cornflower-80); + 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-cornflower-80); - border-color: var(--swm-cornflower-80); -} - a.homepageButtonLink:hover { text-decoration: none !important; } @@ -67,29 +62,14 @@ a.homepageButtonLink:hover { /* Button - transparent styling */ .buttonTransparentStyling { - background-color: transparent; - color: var(--swm-cornflower-80); + color: var(--swm-navy-light-100); } .buttonTransparentStyling svg { - stroke: var(--swm-cornflower-80); -} - -.buttonTransparentStyling:hover { - background-color: var(--swm-cornflower-80); - 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-cornflower-80); - color: var(--swm-off-white); -} +/* Button - navy styling */ .buttonPurpleStyling svg { stroke: var(--swm-off-white); @@ -97,15 +77,15 @@ a.homepageButtonLink:hover { .buttonPurpleStyling:hover { background-color: transparent; - color: var(--swm-cornflower-80); + color: var(--swm-navy-light-100); } .buttonPurpleStyling:hover svg { - stroke: var(--swm-cornflower-80); + stroke: var(--swm-navy-light-100); } .buttonPurpleBorderStyling { - border: 1px solid var(--swm-cornflower-80); + border: 1px solid var(--swm-navy-light-100); } .arrow { @@ -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); +} diff --git a/docs/src/components/ReactNativeExecuTorchFeatures/styles.module.css b/docs/src/components/ReactNativeExecuTorchFeatures/styles.module.css index c1f2d66dc5..42a57454f4 100644 --- a/docs/src/components/ReactNativeExecuTorchFeatures/styles.module.css +++ b/docs/src/components/ReactNativeExecuTorchFeatures/styles.module.css @@ -7,27 +7,34 @@ .featuresButton { background-color: transparent; - color: var(--swm-landing-button-purple); + color: var(--swm-navy-light-100); + border-color: var(--swm-navy-light-100); } [data-theme='dark'] .featuresButton { background-color: transparent; - border-color: var(--swm-cornflower-80); - color: var(--swm-cornflower-80); + color: var(--swm-off-white); + border-color: var(--swm-off-white); +} + +.featuresButton:hover { + background-color: var(--swm-navy-light-100); + border-color: var(--swm-navy-light-100); + color: var(--swm-off-white); } + [data-theme='dark'] .featuresButton:hover { - background-color: var(--swm-cornflower-80); - border-color: var(--swm-cornflower-80); + background-color: var(--swm-cornflower-100); + border-color: var(--swm-cornflower-100); color: var(--swm-off-white); } .featuresButton svg { - stroke: var(--swm-landing-button-purple); + stroke: var(--swm-navy-light-100); } -.featuresButton:hover { - background-color: var(--swm-landing-button-purple); - color: var(--swm-off-white); +[data-theme='dark'] .featuresButton svg { + stroke: var(--swm-off-white); } .featuresButton:hover svg { diff --git a/docs/src/components/Wave/WaveBottom/index.tsx b/docs/src/components/Wave/WaveBottom/index.tsx index 59962cc75c..8aad64f48d 100644 --- a/docs/src/components/Wave/WaveBottom/index.tsx +++ b/docs/src/components/Wave/WaveBottom/index.tsx @@ -13,14 +13,10 @@ const WaveBottom = () => { const { windowWidth } = useScreenSize(); if (theme === 'dark') { - return windowWidth > 768 - ? WaveDark(windowWidth) - : WaveDarkMobile(windowWidth); + return windowWidth > 768 ? WaveDark() : WaveDarkMobile(); } - return windowWidth > 768 - ? WaveLight(windowWidth) - : WaveLightMobile(windowWidth); + return windowWidth > 768 ? WaveLight() : WaveLightMobile(); }} ); diff --git a/docs/src/components/Wave/WaveBottom/styles.module.css b/docs/src/components/Wave/WaveBottom/styles.module.css index 502a4b06e2..0bd33f0171 100644 --- a/docs/src/components/Wave/WaveBottom/styles.module.css +++ b/docs/src/components/Wave/WaveBottom/styles.module.css @@ -1,6 +1,24 @@ .waveBottom { position: absolute; z-index: -1; - bottom: 0; + bottom: 100px; right: 0; } + +@media (max-width: 996px) { + .waveBottom { + bottom: 115px; + } +} + +@media (max-width: 700px) { + .waveBottom { + bottom: 141px; + } +} + +@media (max-width: 376px) { + .waveBottom { + bottom: 167px; + } +} diff --git a/docs/src/components/Wave/WaveBottom/waves.tsx b/docs/src/components/Wave/WaveBottom/waves.tsx index 5e5521c914..7b14351b71 100644 --- a/docs/src/components/Wave/WaveBottom/waves.tsx +++ b/docs/src/components/Wave/WaveBottom/waves.tsx @@ -1,11 +1,11 @@ import React from 'react'; import styles from './styles.module.css'; -export const WaveLight = (width: number) => ( +export const WaveLight = () => ( @@ -23,17 +23,17 @@ export const WaveLight = (width: number) => ( gradientUnits="userSpaceOnUse" > - + ); -export const WaveDark = (width: number) => ( +export const WaveDark = () => ( @@ -51,17 +51,17 @@ export const WaveDark = (width: number) => ( gradientUnits="userSpaceOnUse" > - + ); -export const WaveLightMobile = (width: number) => ( +export const WaveLightMobile = () => ( 376 ? 340 : 360) - width * 0.3}`} + width="100%" + viewBox="0 0 390 50" fill="none" xmlns="http://www.w3.org/2000/svg" > @@ -79,17 +79,17 @@ export const WaveLightMobile = (width: number) => ( gradientUnits="userSpaceOnUse" > - + ); -export const WaveDarkMobile = (width: number) => ( +export const WaveDarkMobile = () => ( 376 ? 340 : 360) - width * 0.3}`} + width="100%" + viewBox="0 0 390 50" fill="none" xmlns="http://www.w3.org/2000/svg" > @@ -107,7 +107,7 @@ export const WaveDarkMobile = (width: number) => ( gradientUnits="userSpaceOnUse" > - + diff --git a/docs/src/components/Wave/WaveTop/index.tsx b/docs/src/components/Wave/WaveTop/index.tsx index 2e22deda0c..efd5320b75 100644 --- a/docs/src/components/Wave/WaveTop/index.tsx +++ b/docs/src/components/Wave/WaveTop/index.tsx @@ -13,14 +13,10 @@ const WaveTop = () => { const { windowWidth } = useScreenSize(); if (theme === 'dark') { - return windowWidth > 768 - ? WaveDark(windowWidth) - : WaveDarkMobile(windowWidth); + return windowWidth > 768 ? WaveDark() : WaveDarkMobile(); } - return windowWidth > 768 - ? WaveLight(windowWidth) - : WaveLightMobile(windowWidth); + return windowWidth > 768 ? WaveLight() : WaveLightMobile(); }} ); diff --git a/docs/src/components/Wave/WaveTop/waves.tsx b/docs/src/components/Wave/WaveTop/waves.tsx index dea1061f36..2196d82453 100644 --- a/docs/src/components/Wave/WaveTop/waves.tsx +++ b/docs/src/components/Wave/WaveTop/waves.tsx @@ -1,10 +1,10 @@ import React from 'react'; import styles from './styles.module.css'; -export const WaveLight = (width: number) => ( +export const WaveLight = () => ( ( ); -export const WaveDark = (width: number) => ( +export const WaveDark = () => ( ( ); -export const WaveLightMobile = (width: number) => ( +export const WaveLightMobile = () => ( ( ); -export const WaveDarkMobile = (width: number) => ( +export const WaveDarkMobile = () => ( - +
+ +
diff --git a/docs/src/pages/styles.module.css b/docs/src/pages/styles.module.css index f969c71d05..d281b1fb1f 100644 --- a/docs/src/pages/styles.module.css +++ b/docs/src/pages/styles.module.css @@ -6,19 +6,35 @@ gap: 8rem; } +.container > div { + z-index: 10; +} + .linearGradient { position: relative; width: 100%; margin-top: 20rem; background: linear-gradient(#7394FF, #FFFFFF); padding-top: 4rem; - margin-bottom: 2rem; } [data-theme='dark'] .linearGradient { background: linear-gradient(#313c9c, #160042); } +.hireUsSection { + z-index: 10; +} + +[data-theme='dark'] .hireUsSection a div:hover { + border-color: var(--swm-off-white); + color: var(--swm-off-white); +} + +[data-theme='dark'] .hireUsSection a div:hover svg{ + stroke: var(--swm-off-white); +} + @media (max-width: 2560px) { .linearGradient { margin-top: 16rem; From 9fea389e362d3d7ec751010232caf22fdf77b403 Mon Sep 17 00:00:00 2001 From: jakmro Date: Tue, 7 Jan 2025 22:24:49 +0100 Subject: [PATCH 08/10] Fix linter errors --- docs/docusaurus.config.js | 7 ++++--- .../src/components/FooterBackground/index.tsx | 2 +- docs/src/components/Hero/StartScreen/Logo.tsx | 13 ++++++++++++ .../src/components/Hero/StartScreen/index.tsx | 14 +++---------- docs/src/components/Wave/WaveBottom/index.tsx | 17 ++------------- .../Wave/WaveBottom/{waves.tsx => wave.tsx} | 21 +++++++++++++++---- docs/src/components/Wave/WaveTop/index.tsx | 18 ++-------------- .../Wave/WaveTop/{waves.tsx => wave.tsx} | 21 +++++++++++++++---- docs/src/hooks/useScreenSize.tsx | 2 +- 9 files changed, 60 insertions(+), 55 deletions(-) create mode 100644 docs/src/components/Hero/StartScreen/Logo.tsx rename docs/src/components/Wave/WaveBottom/{waves.tsx => wave.tsx} (87%) rename docs/src/components/Wave/WaveTop/{waves.tsx => wave.tsx} (88%) diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js index 0208b9db7f..08354e8a70 100644 --- a/docs/docusaurus.config.js +++ b/docs/docusaurus.config.js @@ -61,9 +61,10 @@ const config = { position: 'right', }, { - href: 'https://github.com/software-mansion/react-native-executorch', - position: 'right', - className: 'header-github', + 'href': + 'https://github.com/software-mansion/react-native-executorch', + 'position': 'right', + 'className': 'header-github', 'aria-label': 'GitHub repository', }, ], diff --git a/docs/src/components/FooterBackground/index.tsx b/docs/src/components/FooterBackground/index.tsx index 1a00966ecd..341c01b37e 100644 --- a/docs/src/components/FooterBackground/index.tsx +++ b/docs/src/components/FooterBackground/index.tsx @@ -11,7 +11,7 @@ const FooterBackground = () => { {isLanding && ( <> -
+
)}
diff --git a/docs/src/components/Hero/StartScreen/Logo.tsx b/docs/src/components/Hero/StartScreen/Logo.tsx new file mode 100644 index 0000000000..302232a881 --- /dev/null +++ b/docs/src/components/Hero/StartScreen/Logo.tsx @@ -0,0 +1,13 @@ +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 ; + } +}; + +export default Logo; diff --git a/docs/src/components/Hero/StartScreen/index.tsx b/docs/src/components/Hero/StartScreen/index.tsx index d6c6a8d983..c45673bac2 100644 --- a/docs/src/components/Hero/StartScreen/index.tsx +++ b/docs/src/components/Hero/StartScreen/index.tsx @@ -1,9 +1,8 @@ import React from 'react'; +import BrowserOnly from '@docusaurus/BrowserOnly'; import styles from './styles.module.css'; import HomepageButton from '@site/src/components/HomepageButton'; -import useScreenSize from '@site/src/hooks/useScreenSize'; -import Logo from '@site/static/img/logo-hero.svg'; -import BrowserOnly from '@docusaurus/BrowserOnly'; +import Logo from './Logo'; const StartScreen = () => { return ( @@ -20,14 +19,7 @@ const StartScreen = () => { powered by ExecuTorch.
- - {() => { - const { windowWidth } = useScreenSize(); - if (windowWidth > 768) { - return ; - } - }} - + {() => }
diff --git a/docs/src/components/Wave/WaveBottom/index.tsx b/docs/src/components/Wave/WaveBottom/index.tsx index 8aad64f48d..3fa943be1d 100644 --- a/docs/src/components/Wave/WaveBottom/index.tsx +++ b/docs/src/components/Wave/WaveBottom/index.tsx @@ -1,25 +1,12 @@ import React from 'react'; -import useScreenSize from '@site/src/hooks/useScreenSize'; import BrowserOnly from '@docusaurus/BrowserOnly'; import { useColorMode } from '@docusaurus/theme-common'; -import { WaveLight, WaveDark, WaveLightMobile, WaveDarkMobile } from './waves'; +import Wave from './wave'; const WaveBottom = () => { const theme = useColorMode().colorMode; - return ( - - {() => { - const { windowWidth } = useScreenSize(); - - if (theme === 'dark') { - return windowWidth > 768 ? WaveDark() : WaveDarkMobile(); - } - - return windowWidth > 768 ? WaveLight() : WaveLightMobile(); - }} - - ); + return {() => }; }; export default WaveBottom; diff --git a/docs/src/components/Wave/WaveBottom/waves.tsx b/docs/src/components/Wave/WaveBottom/wave.tsx similarity index 87% rename from docs/src/components/Wave/WaveBottom/waves.tsx rename to docs/src/components/Wave/WaveBottom/wave.tsx index 7b14351b71..cd6ee9995e 100644 --- a/docs/src/components/Wave/WaveBottom/waves.tsx +++ b/docs/src/components/Wave/WaveBottom/wave.tsx @@ -1,7 +1,8 @@ import React from 'react'; import styles from './styles.module.css'; +import useScreenSize from '@site/src/hooks/useScreenSize'; -export const WaveLight = () => ( +const WaveLight = () => ( ( ); -export const WaveDark = () => ( +const WaveDark = () => ( ( ); -export const WaveLightMobile = () => ( +const WaveLightMobile = () => ( ( ); -export const WaveDarkMobile = () => ( +const WaveDarkMobile = () => ( ( ); + +const Wave: React.FC<{ theme: string }> = ({ theme }) => { + const { windowWidth } = useScreenSize(); + + if (theme === 'dark') { + return windowWidth > 768 ? WaveDark() : WaveDarkMobile(); + } + + return windowWidth > 768 ? WaveLight() : WaveLightMobile(); +}; + +export default Wave; diff --git a/docs/src/components/Wave/WaveTop/index.tsx b/docs/src/components/Wave/WaveTop/index.tsx index efd5320b75..c72103918f 100644 --- a/docs/src/components/Wave/WaveTop/index.tsx +++ b/docs/src/components/Wave/WaveTop/index.tsx @@ -1,25 +1,11 @@ import React from 'react'; -import useScreenSize from '@site/src/hooks/useScreenSize'; import BrowserOnly from '@docusaurus/BrowserOnly'; import { useColorMode } from '@docusaurus/theme-common'; -import { WaveLight, WaveDark, WaveLightMobile, WaveDarkMobile } from './waves'; +import Wave from './wave'; const WaveTop = () => { const theme = useColorMode().colorMode; - - return ( - - {() => { - const { windowWidth } = useScreenSize(); - - if (theme === 'dark') { - return windowWidth > 768 ? WaveDark() : WaveDarkMobile(); - } - - return windowWidth > 768 ? WaveLight() : WaveLightMobile(); - }} - - ); + return {() => }; }; export default WaveTop; diff --git a/docs/src/components/Wave/WaveTop/waves.tsx b/docs/src/components/Wave/WaveTop/wave.tsx similarity index 88% rename from docs/src/components/Wave/WaveTop/waves.tsx rename to docs/src/components/Wave/WaveTop/wave.tsx index 2196d82453..bdbc7eff72 100644 --- a/docs/src/components/Wave/WaveTop/waves.tsx +++ b/docs/src/components/Wave/WaveTop/wave.tsx @@ -1,7 +1,8 @@ import React from 'react'; import styles from './styles.module.css'; +import useScreenSize from '@site/src/hooks/useScreenSize'; -export const WaveLight = () => ( +const WaveLight = () => ( ( ); -export const WaveDark = () => ( +const WaveDark = () => ( ( ); -export const WaveLightMobile = () => ( +const WaveLightMobile = () => ( ( ); -export const WaveDarkMobile = () => ( +const WaveDarkMobile = () => ( ( ); + +const Wave: React.FC<{ theme: string }> = ({ theme }) => { + const { windowWidth } = useScreenSize(); + + if (theme === 'dark') { + return windowWidth > 768 ? WaveDark() : WaveDarkMobile(); + } + + return windowWidth > 768 ? WaveLight() : WaveLightMobile(); +}; + +export default Wave; diff --git a/docs/src/hooks/useScreenSize.tsx b/docs/src/hooks/useScreenSize.tsx index 816db7ff5e..08db813dd9 100644 --- a/docs/src/hooks/useScreenSize.tsx +++ b/docs/src/hooks/useScreenSize.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react'; +import { useEffect, useState } from 'react'; /* * Caution - read before use! From 08bc0be3801884c2d34f43a3b470a8763fc2dd5f Mon Sep 17 00:00:00 2001 From: jakmro Date: Wed, 8 Jan 2025 12:24:06 +0100 Subject: [PATCH 09/10] Add requested changes --- docs/src/components/Hero/StartScreen/Logo.tsx | 6 ++++-- .../ReactNativeExecuTorchFeatureList/index.tsx | 4 ++-- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/docs/src/components/Hero/StartScreen/Logo.tsx b/docs/src/components/Hero/StartScreen/Logo.tsx index 302232a881..07ad0fe445 100644 --- a/docs/src/components/Hero/StartScreen/Logo.tsx +++ b/docs/src/components/Hero/StartScreen/Logo.tsx @@ -5,9 +5,11 @@ import LogoIcon from '@site/static/img/logo-hero.svg'; const Logo = () => { const { windowWidth } = useScreenSize(); - if (windowWidth > 768) { - return ; + if (windowWidth <= 768) { + return null; } + + return ; }; export default Logo; diff --git a/docs/src/components/ReactNativeExecuTorchFeatures/ReactNativeExecuTorchFeatureList/index.tsx b/docs/src/components/ReactNativeExecuTorchFeatures/ReactNativeExecuTorchFeatureList/index.tsx index 891efbcc18..13d51e6719 100644 --- a/docs/src/components/ReactNativeExecuTorchFeatures/ReactNativeExecuTorchFeatureList/index.tsx +++ b/docs/src/components/ReactNativeExecuTorchFeatures/ReactNativeExecuTorchFeatureList/index.tsx @@ -8,12 +8,12 @@ const items = [ body: "React Native ExecuTorch allows on-device execution of AI models, eliminating the need for external API calls. This means your app's data stays on the device, ensuring maximum privacy for your users.", }, { - title: 'cost fffective', + title: 'cost effective', body: "The on-device computing nature of React Native ExecuTorch means you don't have to worry about cloud infrastructure. This approach reduces server costs and minimizes latency.", }, { title: 'developer friendly', - body: "There's no need for deep AI expertise, we handle the complexities of AI models on the native site, making it simple for developers to use these models in React Native.", + body: "There's no need for deep AI expertise, we handle the complexities of AI models on the native side, making it simple for developers to use these models in React Native.", }, ]; From bed4d227c1b74966597d5619463505e057065985 Mon Sep 17 00:00:00 2001 From: jakmro Date: Wed, 8 Jan 2025 16:10:30 +0100 Subject: [PATCH 10/10] Add requested changes v2 --- .../ExecuTorchIntroduction/index.tsx | 8 +++++--- .../Hero/StartScreen/styles.module.css | 2 +- docs/src/components/Wave/WaveBottom/wave.tsx | 14 +++++++------- docs/src/components/Wave/WaveTop/wave.tsx | 14 +++++++------- docs/src/css/colors.css | 2 +- docs/src/pages/index.tsx | 12 ++++-------- docs/src/pages/styles.module.css | 18 +++++++++--------- 7 files changed, 34 insertions(+), 36 deletions(-) diff --git a/docs/src/components/ExecuTorchIntroduction/index.tsx b/docs/src/components/ExecuTorchIntroduction/index.tsx index be7caffde6..c6b8c38812 100644 --- a/docs/src/components/ExecuTorchIntroduction/index.tsx +++ b/docs/src/components/ExecuTorchIntroduction/index.tsx @@ -6,9 +6,11 @@ const ExecuTorchIntroduction = () => {

What is ExecuTorch?

- 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. + 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.

); diff --git a/docs/src/components/Hero/StartScreen/styles.module.css b/docs/src/components/Hero/StartScreen/styles.module.css index 6f504f66c0..24e8c447a7 100644 --- a/docs/src/components/Hero/StartScreen/styles.module.css +++ b/docs/src/components/Hero/StartScreen/styles.module.css @@ -6,7 +6,7 @@ .heading { width: 100%; - margin-top: 8rem; + margin-top: 11rem; } .subheadingContainer { diff --git a/docs/src/components/Wave/WaveBottom/wave.tsx b/docs/src/components/Wave/WaveBottom/wave.tsx index cd6ee9995e..37e8d12951 100644 --- a/docs/src/components/Wave/WaveBottom/wave.tsx +++ b/docs/src/components/Wave/WaveBottom/wave.tsx @@ -2,7 +2,7 @@ import React from 'react'; import styles from './styles.module.css'; import useScreenSize from '@site/src/hooks/useScreenSize'; -const WaveLight = () => ( +const WaveLight = ( ( ); -const WaveDark = () => ( +const WaveDark = ( ( ); -const WaveLightMobile = () => ( +const WaveLightMobile = ( ( ); -const WaveDarkMobile = () => ( +const WaveDarkMobile = ( ( ); -const Wave: React.FC<{ theme: string }> = ({ theme }) => { +const Wave = ({ theme }) => { const { windowWidth } = useScreenSize(); if (theme === 'dark') { - return windowWidth > 768 ? WaveDark() : WaveDarkMobile(); + return windowWidth > 768 ? WaveDark : WaveDarkMobile; } - return windowWidth > 768 ? WaveLight() : WaveLightMobile(); + return windowWidth > 768 ? WaveLight : WaveLightMobile; }; export default Wave; diff --git a/docs/src/components/Wave/WaveTop/wave.tsx b/docs/src/components/Wave/WaveTop/wave.tsx index bdbc7eff72..90db6e4e92 100644 --- a/docs/src/components/Wave/WaveTop/wave.tsx +++ b/docs/src/components/Wave/WaveTop/wave.tsx @@ -2,7 +2,7 @@ import React from 'react'; import styles from './styles.module.css'; import useScreenSize from '@site/src/hooks/useScreenSize'; -const WaveLight = () => ( +const WaveLight = ( ( ); -const WaveDark = () => ( +const WaveDark = ( ( ); -const WaveLightMobile = () => ( +const WaveLightMobile = ( ( ); -const WaveDarkMobile = () => ( +const WaveDarkMobile = ( ( ); -const Wave: React.FC<{ theme: string }> = ({ theme }) => { +const Wave = ({ theme }) => { const { windowWidth } = useScreenSize(); if (theme === 'dark') { - return windowWidth > 768 ? WaveDark() : WaveDarkMobile(); + return windowWidth > 768 ? WaveDark : WaveDarkMobile; } - return windowWidth > 768 ? WaveLight() : WaveLightMobile(); + return windowWidth > 768 ? WaveLight : WaveLightMobile; }; export default Wave; diff --git a/docs/src/css/colors.css b/docs/src/css/colors.css index c3bc7ab37e..6ea5765423 100644 --- a/docs/src/css/colors.css +++ b/docs/src/css/colors.css @@ -312,7 +312,7 @@ /* Color Mode */ --swm-color-mode-enabled: var(--swm-off-navy); - --swm-color-mode-enabled-color-landing: var(--swm-purple-dark-120); + --swm-color-mode-enabled-color-landing: var(--swm-navy-100); --swm-color-mode-disabled-color: var(--swm-navy-light-40); /* Typography */ diff --git a/docs/src/pages/index.tsx b/docs/src/pages/index.tsx index fb019950c9..31dedd45e9 100644 --- a/docs/src/pages/index.tsx +++ b/docs/src/pages/index.tsx @@ -8,10 +8,10 @@ import ReactNativeExecuTorchFeatures from '@site/src/components/ReactNativeExecu import { HireUsSection } from '@swmansion/t-rex-ui'; import FooterBackground from '../components/FooterBackground'; -function Home() { +const Home = () => { return (
@@ -23,17 +23,13 @@ function Home() {
- +
); -} +}; export default Home; diff --git a/docs/src/pages/styles.module.css b/docs/src/pages/styles.module.css index d281b1fb1f..1635a7eb22 100644 --- a/docs/src/pages/styles.module.css +++ b/docs/src/pages/styles.module.css @@ -3,7 +3,7 @@ margin: 0 auto; display: flex; flex-direction: column; - gap: 8rem; + gap: 10rem; } .container > div { @@ -13,9 +13,9 @@ .linearGradient { position: relative; width: 100%; - margin-top: 20rem; + margin-top: 18rem; background: linear-gradient(#7394FF, #FFFFFF); - padding-top: 4rem; + padding-top: 8.25rem; } [data-theme='dark'] .linearGradient { @@ -37,13 +37,13 @@ @media (max-width: 2560px) { .linearGradient { - margin-top: 16rem; + margin-top: 14rem; } } @media (max-width: 1920px) { .linearGradient { - margin-top: 14rem; + margin-top: 12rem; } } @@ -53,14 +53,14 @@ } .linearGradient { - margin-top: 12rem; + margin-top: 10rem; } } @media (max-width: 996px) { .container { width: 85%; - gap: 6rem; + gap: 8rem; } .linearGradient { @@ -70,12 +70,12 @@ @media (max-width: 768px) { .linearGradient { - padding-top: 2rem; + padding-top: 4rem; } } @media (max-width: 420px) { .linearGradient { - margin-top: 8rem; + margin-top: 6rem; } }