chore(pages/guide): fix couple of nits

components/core/WebsiteHeader.js

@@ -84,9 +84,9 @@ const WebsiteHeader = (props) => {
             <img css={STYLES_IMG} src={slate} alt="Slate volumetric logo" />
           </a>
         </Link>
-        <Link href="../_/auth">
-          <a css={STYLES_BUTTON_PRIMARY_SMALL}>Get started</a>
-        </Link>
+        <a href="/_/data" css={STYLES_BUTTON_PRIMARY_SMALL}>
+          Get started
+        </a>
       </div>
     </div>
   );

pages/get-slate.js

@@ -5,6 +5,7 @@ import * as SVG from "~/common/svg";
 import WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper";
 import WebsiteHeader from "~/components/core/WebsiteHeader";
 import WebsiteFooter from "~/components/core/WebsiteFooter";
+import Link from "next/link";
 
 import { css } from "@emotion/react";
 import { useGuideKeyCommands } from "./guide/guide";
@@ -36,8 +37,13 @@ const STYLES_CONTAINER = css`
 
 const STYLES_IMG = css`
   width: 88%;
+  height: auto;
   margin-bottom: 8px;
 
+  @media (max-width: ${Constants.sizes.mobile}px) {
+    width: 100%;
+  }
+
   @keyframes hero-fade-in {
     0% {
       opacity: 0%;
@@ -182,8 +188,9 @@ export default function InstallPage() {
   const url = "https://slate.host/get-slate";
   const image =
     "https://slate.textile.io/ipfs/bafkreifww37ypduoi5pvj2cuikz7iycp7l5h7czke6lcboukkaqkoab3t4";
-  const next = "/_/auth";
+  const next = "/_/data";
   const prev = "../guide/new-tab";
+
   useGuideKeyCommands(next, prev);
 
   return (
@@ -191,18 +198,31 @@ export default function InstallPage() {
       <div css={STYLES_ROOT}>
         <WebsiteHeader />
         <div css={STYLES_CONTAINER}>
-          <img css={STYLES_IMG} src="../public/static/slate-jumper.png" />
-          <div css={STYLES_HEADING}>
+          <div style={{ width: "100%" }}>
+            <img
+              css={STYLES_IMG}
+              src="../public/static/slate-jumper.png"
+              alt="extension jumper"
+              width="616"
+              height="278"
+            />
+          </div>
+          <h1 css={STYLES_HEADING}>
             Get started — <br />
             it’s free.
-          </div>
-          <div css={STYLES_BODY}>
+          </h1>
+          <p css={STYLES_BODY}>
             Slate is currently free to use, we’ll add premium features later on for you to use.
-          </div>
-          <a css={STYLES_PRIMARY_BUTTON} href="/_/auth">
+          </p>
+          <a href="/_/data" css={STYLES_PRIMARY_BUTTON}>
             Get started <SVG.RightArrow height={20} width={20} style={{ marginLeft: 8 }} />
           </a>
-          <a css={STYLES_SECONDARY_BUTTON} href="../get-started">
+          <a
+            css={STYLES_SECONDARY_BUTTON}
+            target="_blank"
+            rel="noreferrer"
+            href={Constants.extensionLink.chrome}
+          >
             Get Slate from Chrome store
           </a>
         </div>

pages/guide/guide.js

@@ -4,7 +4,7 @@ import * as SVG from "~/common/svg";
 
 import WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper";
 import WebsiteHeader from "~/components/core/WebsiteHeader";
-import { useRouter } from 'next/router'
+import { useRouter } from "next/router";
 import Link from "next/link";
 
 import { css } from "@emotion/react";
@@ -104,8 +104,6 @@ const STYLES_JUMPER = css`
   }
   animation: jumper-fade-in 200ms ease-in-out;
 
-  }
-
   @media (max-width: ${Constants.sizes.mobile}px) {
     display: none;
   }
@@ -142,6 +140,11 @@ const STYLES_BUTTON = css`
     background-color: ${Constants.semantic.textGray};
     color: ${Constants.semantic.textWhite};
   }
+
+  user-select: none;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
 `;
 
 const STYLES_IMGGUIDE = css`
@@ -241,7 +244,6 @@ export default function Guide({
   mobileguide,
   prev,
   next,
-  ...props
 }) {
   useGuideKeyCommands(next, prev);
   return (
@@ -249,11 +251,28 @@ export default function Guide({
       <div css={STYLES_ROOT}>
         <WebsiteHeader />
         <div css={STYLES_CONTAINER}>
-          <div css={STYLES_HEADING}>{heading}</div>
-          <div css={STYLES_BODY}>{body}</div>
+          <h1 css={STYLES_HEADING}>{heading}</h1>
+          <p css={STYLES_BODY}>{body}</p>
           {jumper && <div css={STYLES_JUMPER}>{jumper}</div>}
-          {imageguide && <img css={STYLES_IMGGUIDE} src={imageguide} />}
-          {mobileguide && <img css={STYLES_MOBILEGUIDE} src={mobileguide} />}
+          {imageguide && (
+            <img
+              css={STYLES_IMGGUIDE}
+              src={imageguide}
+              width="343"
+              height="158"
+              alt="extension jumper"
+            />
+          )}
+
+          {mobileguide && (
+            <img
+              css={STYLES_MOBILEGUIDE}
+              src={mobileguide}
+              width="343"
+              height="241"
+              alt="extension jumper"
+            />
+          )}
           <div css={STYLES_FLEX}>
             <Link href={prev}>
               <a css={STYLES_BUTTON} style={{ marginRight: `16px` }}>

pages/guide/space.js

@@ -1,12 +1,9 @@
 import * as React from "react";
-import * as Constants from "~/common/constants";
 import * as SVG from "~/common/svg";
 import * as JumperPrototype from "~/components/landing/jumperPrototype";
 
 import Guide from "~/pages/guide/guide.js";
 
-import { css } from "@emotion/react";
-
 const VIEWS_ACTIONS = [{ label: "Current Window" }, { label: "All Open" }, { label: "Recent" }];
 
 const CUSTOM_VIEWS_ACTIONS = [

pages/index.js

@@ -5,6 +5,7 @@ import * as SVG from "~/common/svg";
 import WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper";
 import WebsiteHeader from "~/components/core/WebsiteHeader";
 import WebsiteFooter from "~/components/core/WebsiteFooter";
+import Link from "next/link";
 
 import { css } from "@emotion/react";
 import { useGuideKeyCommands } from "./guide/guide";
@@ -36,6 +37,7 @@ const STYLES_CONTAINER = css`
 
 const STYLES_IMG = css`
   width: 92%;
+  height: auto;
   margin-bottom: 24px;
 
   @keyframes hero-fade-in {
@@ -209,6 +211,7 @@ export default function IndexPage() {
   const image =
     "https://slate.textile.io/ipfs/bafkreifww37ypduoi5pvj2cuikz7iycp7l5h7czke6lcboukkaqkoab3t4";
   const next = "../guide/browser-control";
+
   useGuideKeyCommands(next);
 
   return (
@@ -216,19 +219,29 @@ export default function IndexPage() {
       <div css={STYLES_ROOT}>
         <WebsiteHeader />
         <div css={STYLES_CONTAINER}>
-          <img css={STYLES_IMG} src="../public/static/browser-tabs.png" />
-          <div css={STYLES_HEADING}>
+          <div style={{ width: "100%" }}>
+            <img
+              css={STYLES_IMG}
+              width="644"
+              height="290.72"
+              src="../public/static/browser-tabs.png"
+              alt="a list of windows"
+            />
+          </div>
+          <h1 css={STYLES_HEADING}>
             Save, organize, <br />
             search
             <span css={STYLES_CURSOR_BLINK} />
-          </div>
-          <div css={STYLES_BODY}>
+          </h1>
+          <p css={STYLES_BODY}>
             Slate is a personal storage space that helps you keep track and come back to things you
             care about on the web.
-          </div>
-          <a css={STYLES_BUTTON} href={next}>
-            Get started <SVG.RightArrow height={20} width={20} style={{ marginLeft: 8 }} />
-          </a>
+          </p>
+          <Link href={next}>
+            <a css={STYLES_BUTTON}>
+              Get started <SVG.RightArrow height={20} width={20} style={{ marginLeft: 8 }} />
+            </a>
+          </Link>
         </div>
       </div>
       <WebsiteFooter />