mirror of
https://github.com/filecoin-project/slate.git
synced 2024-09-11 22:07:08 +03:00
brand assets
This commit is contained in:
parent
3cd42ac66d
commit
831c2b8528
120
pages/about-us.js
Normal file
120
pages/about-us.js
Normal file
@ -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>
|
||||
);
|
||||
}
|
110
pages/faq.js
Normal file
110
pages/faq.js
Normal file
@ -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>
|
||||
);
|
||||
}
|
154
pages/get-slate.js
Normal file
154
pages/get-slate.js
Normal file
@ -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>
|
||||
);
|
||||
}
|
21
pages/get-started/browser-control.js
Normal file
21
pages/get-started/browser-control.js
Normal file
@ -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="../"
|
||||
/>
|
||||
);
|
||||
}
|
21
pages/get-started/file.js
Normal file
21
pages/get-started/file.js
Normal file
@ -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"
|
||||
/>
|
||||
);
|
||||
}
|
183
pages/get-started/guide.js
Normal file
183
pages/get-started/guide.js
Normal file
@ -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>
|
||||
);
|
||||
}
|
21
pages/get-started/new-tab.js
Normal file
21
pages/get-started/new-tab.js
Normal file
@ -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"
|
||||
/>
|
||||
);
|
||||
}
|
21
pages/get-started/save.js
Normal file
21
pages/get-started/save.js
Normal file
@ -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"
|
||||
/>
|
||||
);
|
||||
}
|
21
pages/get-started/search.js
Normal file
21
pages/get-started/search.js
Normal file
@ -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"
|
||||
/>
|
||||
);
|
||||
}
|
21
pages/get-started/space.js
Normal file
21
pages/get-started/space.js
Normal file
@ -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"
|
||||
/>
|
||||
);
|
||||
}
|
21
pages/get-started/tag.js
Normal file
21
pages/get-started/tag.js
Normal file
@ -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"
|
||||
/>
|
||||
);
|
||||
}
|
BIN
public/static/Inter-Bold.woff
Normal file
BIN
public/static/Inter-Bold.woff
Normal file
Binary file not shown.
BIN
public/static/Inter-Bold.woff2
Normal file
BIN
public/static/Inter-Bold.woff2
Normal file
Binary file not shown.
BIN
public/static/Inter-Medium.woff
Normal file
BIN
public/static/Inter-Medium.woff
Normal file
Binary file not shown.
BIN
public/static/Inter-Medium.woff2
Normal file
BIN
public/static/Inter-Medium.woff2
Normal file
Binary file not shown.
BIN
public/static/Inter-Regular.woff
Normal file
BIN
public/static/Inter-Regular.woff
Normal file
Binary file not shown.
BIN
public/static/Inter-Regular.woff2
Normal file
BIN
public/static/Inter-Regular.woff2
Normal file
Binary file not shown.
BIN
public/static/Inter-SemiBold.woff
Normal file
BIN
public/static/Inter-SemiBold.woff
Normal file
Binary file not shown.
BIN
public/static/Inter-SemiBold.woff2
Normal file
BIN
public/static/Inter-SemiBold.woff2
Normal file
Binary file not shown.
BIN
public/static/Slate_volumetric.png
Normal file
BIN
public/static/Slate_volumetric.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 861 KiB |
BIN
public/static/slate.png
Normal file
BIN
public/static/slate.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 67 KiB |
Loading…
Reference in New Issue
Block a user