brand assets

pages/about-us.js

@@ -0,0 +1,120 @@
+import * as React from "react";
+import * as Constants from "~/common/constants";
+import * as SVGLogo from "~/common/logo";
+import * as SVG from "~/common/svg";
+import * as System from "~/components/system";
+import * as Validations from "~/common/validations";
+import * as Strings from "~/common/strings";
+
+import WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper";
+import WebsiteHeader from "~/components/core/WebsiteHeader";
+import WebsiteFooter from "~/components/core/WebsiteFooter";
+
+import { css } from "@emotion/react";
+
+const STYLES_ROOT = css`
+  width: 100%;
+  height: 100%;
+  position: -webkit-sticky;
+  position: sticky;
+  top: 52px;
+  overflow: hidden;
+  height: calc(100vh - 113px);
+  background-color: ${Constants.semantic.bgLight};
+  color: ${Constants.semantic.textBlack};
+`;
+
+const STYLES_CONTAINER = css`
+  max-width: 700px;
+  margin: 0 auto;
+  padding: 80px 0;
+
+  @media (max-width: ${Constants.sizes.mobile}px) {
+    max-width: 480px;
+    padding: 96px 16px;
+  }
+`;
+
+const STYLES_HEADING = css`
+  flex-shrink: 0;
+  color: ${Constants.semantic.textBlack};
+  flex-shrink: 0;
+  min-width: 50%;
+  max-width: 100%;
+`;
+
+const STYLES_HEADING1 = css`
+  ${STYLES_HEADING};
+  font-family: ${Constants.font.bold};
+  font-size: 88px;
+  line-height: 88px;
+  letter-spacing: -0.05em;
+  margin-bottom: 25px;
+
+  @media (max-width: ${Constants.sizes.tablet}px) {
+    font-size: 64px;
+    line-height: 68px;
+    letter-spacing: -0.04em;
+  }
+
+  @media (max-width: ${Constants.sizes.mobile}px) {
+    font-size: 48px;
+    line-height: 52px;
+    letter-spacing: -0.04em;
+  }
+`;
+
+const STYLES_HEADING2 = css`
+  ${STYLES_HEADING};
+  font-family: ${Constants.font.semiBold};
+  font-size: 40px;
+  line-height: 40px;
+  letter-spacing: -0.035em;
+  margin: 40px 0;
+
+  @media (max-width: ${Constants.sizes.tablet}px) {
+    font-size: 48px;
+    line-height: 56px;
+  }
+
+  @media (max-width: ${Constants.sizes.mobile}px) {
+    font-size: 40px;
+    line-height: 48px;
+    margin-bottom: 32px;
+  }
+`;
+
+const STYLES_BODY = css`
+  font-family: ${Constants.font.text};
+  font-size: 20px;
+  line-height: 28px;
+  letter-spacing: -0.01em;
+  margin-bottom: 16px;
+`;
+
+export default function AboutUsPage() {
+  const title = `About Us - Slate`;
+  const description = "Your personal search engine";
+  const url = "https://slate.host/about-us";
+  const image =
+    "https://slate.textile.io/ipfs/bafkreifww37ypduoi5pvj2cuikz7iycp7l5h7czke6lcboukkaqkoab3t4";
+
+  return (
+    <WebsitePrototypeWrapper title={title} description={description} url={url} image={image}>
+      <WebsiteHeader />
+      <div css={STYLES_ROOT}>
+        <div css={STYLES_CONTAINER}>
+          <div css={STYLES_HEADING1}>About Us</div>
+          <div css={STYLES_BODY}>
+            Slate is a Chrome extension that helps you save, organize and search stuff you care
+            about on the web. It’s a lightweight tool designed to make the internet feel a little
+            more personal.
+          </div>
+          <div css={STYLES_HEADING2}>The team</div>
+          <div css={STYLES_HEADING2}>Special thanks to</div>
+        </div>
+      </div>
+      <WebsiteFooter />
+    </WebsitePrototypeWrapper>
+  );
+}

pages/faq.js

@@ -0,0 +1,110 @@
+import * as React from "react";
+import * as Constants from "~/common/constants";
+import * as SVGLogo from "~/common/logo";
+import * as SVG from "~/common/svg";
+import * as System from "~/components/system";
+import * as Validations from "~/common/validations";
+import * as Strings from "~/common/strings";
+
+import WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper";
+import WebsiteHeader from "~/components/core/WebsiteHeader";
+import WebsiteFooter from "~/components/core/WebsiteFooter";
+
+import { css } from "@emotion/react";
+
+const STYLES_ROOT = css`
+  width: 100%;
+  height: 100%;
+  position: -webkit-sticky;
+  position: sticky;
+  top: 52px;
+  overflow: hidden;
+  height: calc(100vh - 113px);
+  background-color: ${Constants.semantic.bgLight};
+  color: ${Constants.semantic.textBlack};
+`;
+
+const STYLES_CONTAINER = css`
+  max-width: 700px;
+  margin: 0 auto;
+  padding: 80px 0;
+
+  @media (max-width: ${Constants.sizes.mobile}px) {
+    max-width: 480px;
+    padding: 96px 16px;
+  }
+`;
+
+const STYLES_HEADING = css`
+  flex-shrink: 0;
+  color: ${Constants.semantic.textBlack};
+  flex-shrink: 0;
+  min-width: 50%;
+  max-width: 100%;
+`;
+
+const STYLES_HEADING1 = css`
+  ${STYLES_HEADING};
+  font-family: ${Constants.font.bold};
+  font-size: 88px;
+  line-height: 88px;
+  letter-spacing: -0.05em;
+  margin-bottom: 25px;
+
+  @media (max-width: ${Constants.sizes.tablet}px) {
+    font-size: 64px;
+    line-height: 68px;
+    letter-spacing: -0.04em;
+  }
+
+  @media (max-width: ${Constants.sizes.mobile}px) {
+    font-size: 48px;
+    line-height: 52px;
+    letter-spacing: -0.04em;
+  }
+`;
+
+const STYLES_HEADING2 = css`
+  ${STYLES_HEADING};
+  font-family: ${Constants.font.medium};
+  font-size: 20px;
+  line-height: 28px;
+  letter-spacing: -0.02em;
+  margin: 40px 0 4px 0;
+`;
+
+const STYLES_BODY = css`
+  font-family: ${Constants.font.text};
+  font-size: 18px;
+  line-height: 28px;
+  letter-spacing: -0.01em;
+  margin-bottom: 16px;
+`;
+
+export default function FAQPage() {
+  const title = `FAQ - Slate`;
+  const description = "Your personal search engine";
+  const url = "https://slate.host/faqs";
+  const image =
+    "https://slate.textile.io/ipfs/bafkreifww37ypduoi5pvj2cuikz7iycp7l5h7czke6lcboukkaqkoab3t4";
+
+  return (
+    <WebsitePrototypeWrapper title={title} description={description} url={url} image={image}>
+      <WebsiteHeader />
+      <div css={STYLES_ROOT}>
+        <div css={STYLES_CONTAINER}>
+          <div css={STYLES_HEADING1}>FAQs</div>
+          <div css={STYLES_HEADING2}>What is a personal search engine?</div>
+          <div css={STYLES_BODY}>
+            Slate is a Chrome extension that helps you save, organize and search stuff you care
+            about on the web. It’s a lightweight tool designed to make the internet feel a little
+            more personal.
+          </div>
+          <div css={STYLES_HEADING2}>How will Slate protect my privacy?</div>
+          <div css={STYLES_HEADING2}>How much does Slate cost?</div>
+        </div>
+      </div>
+      <WebsiteFooter />
+    </WebsitePrototypeWrapper>
+  );
+}

pages/get-slate.js

@@ -0,0 +1,154 @@
+import * as React from "react";
+import * as Constants from "~/common/constants";
+import * as SVGLogo from "~/common/logo";
+import * as SVG from "~/common/svg";
+import * as System from "~/components/system";
+import * as Validations from "~/common/validations";
+import * as Strings from "~/common/strings";
+
+import WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper";
+import WebsiteHeader from "~/components/core/WebsiteHeader";
+import WebsiteFooter from "~/components/core/WebsiteFooter";
+
+import { css } from "@emotion/react";
+
+const STYLES_ROOT = css`
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  height: 100vh;
+  background-color: ${Constants.semantic.bgLight};
+  color: ${Constants.semantic.textBlack};
+`;
+
+const STYLES_CONTAINER = css`
+  max-width: 700px;
+  margin: 0 auto;
+  padding: 80px 0;
+
+  @media (max-width: ${Constants.sizes.mobile}px) {
+    max-width: 480px;
+    padding: 96px 16px;
+  }
+`;
+
+const STYLES_HEADING = css`
+  font-family: ${Constants.font.bold};
+  flex-shrink: 0;
+  flex-shrink: 0;
+  min-width: 50%;
+  max-width: 100%;
+  font-size: 88px;
+  line-height: 88px;
+  letter-spacing: -0.05em;
+  margin-bottom: 25px;
+
+  @media (max-width: ${Constants.sizes.tablet}px) {
+    font-size: 64px;
+    line-height: 68px;
+    letter-spacing: -0.04em;
+  }
+
+  @media (max-width: ${Constants.sizes.mobile}px) {
+    font-size: 48px;
+    line-height: 52px;
+    letter-spacing: -0.04em;
+  }
+`;
+
+const STYLES_BODY = css`
+  font-family: ${Constants.font.text};
+  font-size: 20px;
+  line-height: 28px;
+  letter-spacing: -0.01em;
+  margin-bottom: 40px;
+`;
+
+const STYLES_CURSOR_BLINK = css`
+  display: inline-block;
+  background-color: ${Constants.semantic.textGray};
+  width: 32px;
+  height: 61px;
+  margin-left: 6px;
+  overflow: visible;
+  animation: blink-animation 1s steps(5, start) infinite;
+  -webkit-animation: blink-animation 1s steps(5, start) infinite;
+  @keyframes blink-animation {
+    to {
+      visibility: hidden;
+    }
+  }
+  @-webkit-keyframes blink-animation {
+    to {
+      visibility: hidden;
+    }
+  }
+  @media (max-width: ${Constants.sizes.tablet}px) {
+    width: 28.5px;
+    height: 47px;
+    margin-left: 4px;
+  }
+  @media (max-width: ${Constants.sizes.mobile}px) {
+    width: 21px;
+    height: 35px;
+    margin-left: 2px;
+  }
+`;
+
+const STYLES_CURSOR_BLINK_SMALL = css`
+  ${STYLES_CURSOR_BLINK}
+  width: 25px;
+  height: 41px;
+  @media (max-width: ${Constants.sizes.tablet}px) {
+    width: 21px;
+    height: 35px;
+    margin-left: 2px;
+  }
+  @media (max-width: ${Constants.sizes.mobile}px) {
+    width: 17.5px;
+    height: 29px;
+    margin-left: 2px;
+  }
+`;
+
+const STYLES_BUTTON = css`
+  cursor: poitner;
+  display: inline-flex;
+  flex-grow: 0;
+  justify-content: center;
+  align-items: center;
+  padding: 18px 32px;
+  border-radius: 20px;
+  font-family: ${Constants.font.medium};
+  font-size: 18px;
+  line-height: 20px;
+  text-decoration: none;
+  cursor: pointer;
+  background-color: ${Constants.system.blue};
+  color: ${Constants.semantic.textWhite};
+`;
+
+export default function InstallPage() {
+  const title = `Install Slate for Chrome - Slate`;
+  const description = "Install Slate from Chrome web store";
+  const url = "https://slate.host/get-slate";
+  const image =
+    "https://slate.textile.io/ipfs/bafkreifww37ypduoi5pvj2cuikz7iycp7l5h7czke6lcboukkaqkoab3t4";
+  const slate = "../public/static/Slate_volumetric.png";
+
+  return (
+    <WebsitePrototypeWrapper title={title} description={description} url={url} image={image}>
+      <div css={STYLES_ROOT}>
+        <div css={STYLES_CONTAINER}>
+          <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">
+            <SVG.RightArrow height={20} width={20} style={{ marginRight: 8 }} />
+            Get Slate from Chrome Store{" "}
+          </a>
+        </div>
+      </div>
+      <WebsiteFooter />
+    </WebsitePrototypeWrapper>
+  );
+}

pages/get-started/browser-control.js

@@ -0,0 +1,21 @@
+import * as React from "react";
+import * as Constants from "~/common/constants";
+
+import Guide from "~/pages/get-started/guide.js";
+
+import { css } from "@emotion/react";
+
+export default function BrowserControlGuidePage() {
+  return (
+    <Guide
+      title="Browser Control Guide - Slate"
+      description="Your personal search engine"
+      url="https://slate.host/guide/browser-control"
+      image="https://slate.textile.io/ipfs/bafkreifww37ypduoi5pvj2cuikz7iycp7l5h7czke6lcboukkaqkoab3t4"
+      heading="Organize your internet browsing"
+      body="It connects with your browser so you can easily see recent sites, all your open tabs, and everything in your current window at a glance."
+      next="save"
+      prev="../"
+    />
+  );
+}

pages/get-started/file.js

@@ -0,0 +1,21 @@
+import * as React from "react";
+import * as Constants from "~/common/constants";
+
+import Guide from "~/pages/get-started/guide.js";
+
+import { css } from "@emotion/react";
+
+export default function FileGuidePage() {
+  return (
+    <Guide
+      title="File Guide - Slate"
+      description="Your personal search engine"
+      url="https://slate.host/guide/file"
+      image="https://slate.textile.io/ipfs/bafkreifww37ypduoi5pvj2cuikz7iycp7l5h7czke6lcboukkaqkoab3t4"
+      heading="Files and links in one place"
+      body="In addition to links, Slate includes integrated storage that allows you to upload files and clip things from the web."
+      next="search"
+      prev="space"
+    />
+  );
+}

pages/get-started/guide.js

@@ -0,0 +1,183 @@
+import * as React from "react";
+import * as Constants from "~/common/constants";
+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 { css } from "@emotion/react";
+import { useEventListener } from "~/common/hooks";
+import { convertToV1Slate } from "~/common/conversions";
+import e from "express";
+
+const STYLES_ROOT = css`
+  width: 100%;
+  height: 100%;
+  position: -webkit-sticky;
+  position: sticky;
+  top: 52px;
+  overflow: hidden;
+  height: calc(100vh - 113px);
+  background-color: ${Constants.semantic.bgLight};
+  color: ${Constants.semantic.textBlack};
+`;
+
+const STYLES_CONTAINER = css`
+  max-width: 700px;
+  margin: 0 auto;
+  padding: 80px 0;
+
+  @media (max-width: ${Constants.sizes.mobile}px) {
+    max-width: 480px;
+    padding: 96px 16px;
+  }
+`;
+
+const STYLES_HEADING = css`
+  font-family: ${Constants.font.semiBold};
+  flex-shrink: 0;
+  flex-shrink: 0;
+  min-width: 50%;
+  max-width: 100%;
+  font-size: 40px;
+  line-height: 40px;
+  letter-spacing: -0.035em;
+  margin-bottom: 30px;
+
+  @media (max-width: ${Constants.sizes.tablet}px) {
+    font-size: 32px;
+    line-height: 40px;
+  }
+
+  @keyframes fade-in {
+    0% {
+      opacity: 0%;
+      transform: translateY(30%);
+    }
+    100% {
+      opacity: 100%;
+      transform: translateY(0%);
+    }
+  }
+  animation: fade-in 300ms ease-in-out;
+`;
+
+const STYLES_BODY = css`
+  font-family: ${Constants.font.text};
+  font-size: 18px;
+  line-height: 28px;
+  letter-spacing: -0.01em;
+  margin-bottom: 16px;
+
+  @keyframes fade-in {
+    0% {
+      opacity: 0%;
+      transform: translateY(50%);
+    }
+    50% {
+      opacity: 0%;
+      transform: translateY(50%);
+    }
+    100% {
+      opacity: 100%;
+      transform: translateY(0%);
+    }
+  }
+  animation: fade-in 500ms ease-in-out;
+`;
+
+const STYLES_FLEX = css`
+  position: absolute;
+  bottom: 48px;
+  width: 100%;
+  max-width: 700px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const STYLES_BUTTON = css`
+  cursor: poitner;
+  display: inline-flex;
+  flex-grow: 0;
+  justify-content: center;
+  align-items: center;
+  height: 40px;
+  width: 40px;
+  border-radius: 8px;
+  text-decoration: none;
+  cursor: pointer;
+  border: 1.25px solid ${Constants.semantic.borderGray};
+  color: ${Constants.semantic.textBlack};
+
+  :hover {
+    background-color: ${Constants.semantic.textGray};
+    color: ${Constants.semantic.textWhite};
+  }
+`;
+
+const useGuideKeyCommands = (handleNext, handlePrev) => {
+  console.log("ping");
+  const handleKeyUp = (e) => {
+    const input = document.querySelectorAll("input");
+    for (let elem of input) {
+      if (document.activeElement === elem) {
+        return;
+      }
+    }
+    const textarea = document.querySelectorAll("textarea");
+    for (let elem of textarea) {
+      if (document.activeElement === elem) {
+        return;
+      }
+    }
+
+    switch (e.key) {
+      case "ArrowRight":
+        handleNext();
+        break;
+      case "ArrowLeft":
+        handlePrev();
+        break;
+    }
+  };
+  useEventListener({ type: "keyup", handler: handleKeyUp });
+};
+
+const handleNext = () => {
+  console.log("next");
+};
+
+const handlePrev = () => {
+  console.log("prev");
+};
+
+export default function Guide(props) {
+  useGuideKeyCommands();
+  return (
+    <WebsitePrototypeWrapper
+      title={props.title}
+      description={props.description}
+      url={props.url}
+      image={props.image}
+    >
+      <WebsiteHeader />
+      <div css={STYLES_ROOT}>
+        <div css={STYLES_CONTAINER}>
+          <div css={STYLES_HEADING}>{props.heading}</div>
+          <div css={STYLES_BODY}>{props.body}</div>
+          <div css={STYLES_FLEX}>
+            <a css={STYLES_BUTTON} href={props.prev} style={{ marginRight: `12px` }}>
+              <SVG.LeftArrow height={16} width={16} />
+            </a>
+            <a css={STYLES_BUTTON} href={props.next}>
+              <SVG.RightArrow height={16} width={16} />
+            </a>
+          </div>
+        </div>
+      </div>
+      <WebsiteFooter />
+    </WebsitePrototypeWrapper>
+  );
+}

pages/get-started/new-tab.js

@@ -0,0 +1,21 @@
+import * as React from "react";
+import * as Constants from "~/common/constants";
+
+import Guide from "~/pages/get-started/guide.js";
+
+import { css } from "@emotion/react";
+
+export default function NewTabGuidePage() {
+  return (
+    <Guide
+      title="New Tab Guide - Slate"
+      description="Your personal search engine"
+      url="https://slate.host/guide/new-tab"
+      image="https://slate.textile.io/ipfs/bafkreifww37ypduoi5pvj2cuikz7iycp7l5h7czke6lcboukkaqkoab3t4"
+      heading="Slate new tab"
+      body="You can even use Slate as your new tab experience to refresh your memory as you browse."
+      next="/get-slate"
+      prev="search"
+    />
+  );
+}

pages/get-started/save.js

@@ -0,0 +1,21 @@
+import * as React from "react";
+import * as Constants from "~/common/constants";
+
+import Guide from "~/pages/get-started/guide.js";
+
+import { css } from "@emotion/react";
+
+export default function SaveGuidePage() {
+  return (
+    <Guide
+      title="Save Guide - Slate"
+      description="Your personal search engine"
+      url="https://slate.host/guide/save"
+      image="https://slate.textile.io/ipfs/bafkreifww37ypduoi5pvj2cuikz7iycp7l5h7czke6lcboukkaqkoab3t4"
+      heading="Quick save"
+      body="You can easily save any webpage using a keyboard shortcut or through the app."
+      next="tag"
+      prev="browser-control"
+    />
+  );
+}

pages/get-started/search.js

@@ -0,0 +1,21 @@
+import * as React from "react";
+import * as Constants from "~/common/constants";
+
+import Guide from "~/pages/get-started/guide.js";
+
+import { css } from "@emotion/react";
+
+export default function SearchGuidePage() {
+  return (
+    <Guide
+      title="Search Guide - Slate"
+      description="Your personal search engine"
+      url="https://slate.host/guide/search"
+      image="https://slate.textile.io/ipfs/bafkreifww37ypduoi5pvj2cuikz7iycp7l5h7czke6lcboukkaqkoab3t4"
+      heading="One place to search it all"
+      body="Search allows you to easily find things by either keyword or tag (we’ve got some filters on the way too)."
+      next="new-tab"
+      prev="file"
+    />
+  );
+}

pages/get-started/space.js

@@ -0,0 +1,21 @@
+import * as React from "react";
+import * as Constants from "~/common/constants";
+
+import Guide from "~/pages/get-started/guide.js";
+
+import { css } from "@emotion/react";
+
+export default function SpaceGuidePage() {
+  return (
+    <Guide
+      title="Space Guide - Slate"
+      description="Your personal search engine"
+      url="https://slate.host/guide/space"
+      image="https://slate.textile.io/ipfs/bafkreifww37ypduoi5pvj2cuikz7iycp7l5h7czke6lcboukkaqkoab3t4"
+      heading="Customize your spaces"
+      body="As you save and tag things, you can create spaces for your favorite tags and sites so your can easily jump between them."
+      next="file"
+      prev="tag"
+    />
+  );
+}

pages/get-started/tag.js

@@ -0,0 +1,21 @@
+import * as React from "react";
+import * as Constants from "~/common/constants";
+
+import Guide from "~/pages/get-started/guide.js";
+
+import { css } from "@emotion/react";
+
+export default function TagGuidePage() {
+  return (
+    <Guide
+      title="Tag Guide - Slate"
+      description="Your personal search engine"
+      url="https://slate.host/guide/tag"
+      image="https://slate.textile.io/ipfs/bafkreifww37ypduoi5pvj2cuikz7iycp7l5h7czke6lcboukkaqkoab3t4"
+      heading="Tag on the fly"
+      body="Tags can be added to anything you save to help you organize things further."
+      next="space"
+      prev="save"
+    />
+  );
+}