Add logo

Author: jakmro

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 (
     <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>
+          {windowWidth > 768 && <Logo />}
         </div>
         <div className={styles.lowerHeading}>
           <div className={styles.buttonContainer}>

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;

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, `<BrowserOnly>` 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;