cta update

components/core/WebsiteFooter.js

@@ -17,7 +17,7 @@ const STYLES_CONTAINER = css`
   margin: 0 auto;
   width: 100%;
   font-family: ${Constants.font.text};
-  color: ${Constants.semantic.textGrayDark};
+  color: ${Constants.semantic.textGray};
   font-weight: 400;
   font-size: 14px;
   line-height: 28px;
@@ -37,7 +37,7 @@ const STYLES_LINK = css`
   font-size: 14px;
   line-height: 28px;
   letter-spacing: -0.01px;
-  color: ${Constants.semantic.textGrayDark};
+  color: ${Constants.semantic.textGray};
   display: flex;
   align-items: center;
   justify-content: center;
@@ -99,10 +99,10 @@ export const WebsiteFooter = (props) => {
       <div css={STYLES_CONTAINER} style={props.style}>
         <div css={STYLES_FLEX}>
           <div css={STYLES_FLEX_LEFT}>
-            <a css={STYLES_LINK} style={{ marginRight: `16px` }} href="/about-us">
+            <a css={STYLES_LINK} style={{ marginRight: `16px` }} href="/about">
               About Us
             </a>
-            <a css={STYLES_LINK} style={{ marginRight: `16px` }} href="/faq">
+            <a css={STYLES_LINK} style={{ marginRight: `16px` }} href="/faqs">
               FAQs
             </a>
           </div>

pages/get-slate.js

@@ -11,6 +11,7 @@ import WebsiteHeader from "~/components/core/WebsiteHeader";
 import WebsiteFooter from "~/components/core/WebsiteFooter";
 
 import { css } from "@emotion/react";
+import { useGuideKeyCommands } from "./guide/guide";
 
 const STYLES_ROOT = css`
   width: 100%;
@@ -24,7 +25,7 @@ const STYLES_ROOT = css`
 const STYLES_CONTAINER = css`
   max-width: 700px;
   margin: 0 auto;
-  padding: 80px 0;
+  padding: 64px 0;
 
   @media (max-width: ${Constants.sizes.mobile}px) {
     max-width: 480px;
@@ -32,6 +33,11 @@ const STYLES_CONTAINER = css`
   }
 `;
 
+const STYLES_IMG = css`
+  width: 100%;
+  margin-bottom: 40px;
+`;
+
 const STYLES_HEADING = css`
   font-family: ${Constants.font.bold};
   flex-shrink: 0;
@@ -135,11 +141,16 @@ export default function InstallPage() {
   const image =
     "https://slate.textile.io/ipfs/bafkreifww37ypduoi5pvj2cuikz7iycp7l5h7czke6lcboukkaqkoab3t4";
   const slate = "../public/static/Slate_volumetric.png";
+  const next =
+    "https://chrome.google.com/webstore/detail/slate-web-extension/gloembacbehhbfbkcfjmloikeeaebnoc?hl=en-US";
+  const prev = "../guide/new-tab";
+  useGuideKeyCommands(next, prev);
 
   return (
     <WebsitePrototypeWrapper title={title} description={description} url={url} image={image}>
       <div css={STYLES_ROOT}>
         <div css={STYLES_CONTAINER}>
+          <img css={STYLES_IMG} src="../public/static/slate-jumper.png" />
           <div css={STYLES_HEADING}>Get started with Slate for Free</div>
           <div css={STYLES_BODY}>Slate is free to use, with monthly premium plan coming soom.</div>
           <a css={STYLES_BUTTON} href="../get-started">

pages/index.js

@@ -24,7 +24,7 @@ const STYLES_ROOT = css`
 const STYLES_CONTAINER = css`
   max-width: 700px;
   margin: 0 auto;
-  padding: 80px 0;
+  padding: 40px 0;
 
   @media (max-width: ${Constants.sizes.mobile}px) {
     max-width: 480px;
@@ -32,6 +32,11 @@ const STYLES_CONTAINER = css`
   }
 `;
 
+const STYLES_IMG = css`
+  width: 100%;
+  margin-bottom: 40px;
+`;
+
 const STYLES_HEADING = css`
   font-family: ${Constants.font.bold};
   flex-shrink: 0;
@@ -147,6 +152,7 @@ export default function IndexPage() {
       <WebsiteHeader />
       <div css={STYLES_ROOT}>
         <div css={STYLES_CONTAINER}>
+          <img css={STYLES_IMG} src="../public/static/browser-tabs.png" />
           <div css={STYLES_HEADING}>
             Search your internet memory
             <span css={STYLES_CURSOR_BLINK} />