mirror of
https://github.com/filecoin-project/slate.git
synced 2024-12-25 18:13:10 +03:00
feat(pages/index): auth integration
This commit is contained in:
Aminejv
parent
42a81b9e0c
commit
580cf3b1a5
@ -10,9 +10,9 @@ import * as Styles from "~/common/styles";
|
|||||||
import { css } from "@emotion/react";
|
import { css } from "@emotion/react";
|
||||||
import { useField, useForm } from "~/common/hooks";
|
import { useField, useForm } from "~/common/hooks";
|
||||||
import { Toggle, SignUpPopover, ArrowButton } from "~/components/core/Auth/components";
|
import { Toggle, SignUpPopover, ArrowButton } from "~/components/core/Auth/components";
|
||||||
|
import { AnimateSharedLayout, motion } from "framer-motion";
|
||||||
|
|
||||||
import Field from "~/components/core/Field";
|
import Field from "~/components/core/Field";
|
||||||
import { AnimateSharedLayout, motion } from "framer-motion";
|
|
||||||
|
|
||||||
const STYLES_INITIAL_CONTAINER = css`
|
const STYLES_INITIAL_CONTAINER = css`
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -217,21 +217,19 @@ function Initial(
|
|||||||
)}
|
)}
|
||||||
|
|
||||||
{showTermsAndServices && (
|
{showTermsAndServices && (
|
||||||
<AnimateSharedLayout>
|
<div style={{ marginTop: "auto" }}>
|
||||||
<motion.div style={{ marginTop: "auto" }}>
|
<a css={STYLES_LINK_ITEM} href="/terms" target="_blank">
|
||||||
<a css={STYLES_LINK_ITEM} href="/terms" target="_blank">
|
<div css={Styles.HORIZONTAL_CONTAINER_CENTERED}>
|
||||||
<div css={Styles.HORIZONTAL_CONTAINER_CENTERED}>
|
<SVG.RightArrow height="16px" style={{ marginRight: 4 }} /> Terms of service
|
||||||
<SVG.RightArrow height="16px" style={{ marginRight: 4 }} /> Terms of service
|
</div>
|
||||||
</div>
|
</a>
|
||||||
</a>
|
|
||||||
|
|
||||||
<a css={STYLES_LINK_ITEM} style={{ marginTop: 4 }} href="/guidelines" target="_blank">
|
<a css={STYLES_LINK_ITEM} style={{ marginTop: 4 }} href="/guidelines" target="_blank">
|
||||||
<div css={Styles.HORIZONTAL_CONTAINER_CENTERED}>
|
<div css={Styles.HORIZONTAL_CONTAINER_CENTERED}>
|
||||||
<SVG.RightArrow height="16px" style={{ marginRight: 4 }} /> Community guidelines
|
<SVG.RightArrow height="16px" style={{ marginRight: 4 }} /> Community guidelines
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
</motion.div>
|
</div>
|
||||||
</AnimateSharedLayout>
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</SignUpPopover>
|
</SignUpPopover>
|
||||||
|
|||||||
@ -5,9 +5,10 @@ import * as Strings from "~/common/strings";
|
|||||||
|
|
||||||
import { Boundary } from "~/components/system/components/fragments/Boundary";
|
import { Boundary } from "~/components/system/components/fragments/Boundary";
|
||||||
import { css } from "@emotion/react";
|
import { css } from "@emotion/react";
|
||||||
import AuthInitial from "~/components/core/Auth/Initial";
|
|
||||||
import { Alert } from "~/components/core/Alert";
|
import { Alert } from "~/components/core/Alert";
|
||||||
|
|
||||||
|
import AuthInitial from "~/components/core/Auth/Initial";
|
||||||
|
|
||||||
const STYLES_BACKGROUND = css`
|
const STYLES_BACKGROUND = css`
|
||||||
z-index: ${Constants.zindex.cta};
|
z-index: ${Constants.zindex.cta};
|
||||||
${Styles.CONTAINER_CENTERED};
|
${Styles.CONTAINER_CENTERED};
|
||||||
|
|||||||
@ -28,6 +28,7 @@ const STYLES_BUTTON_PRIMARY = css`
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
background-color: ${Constants.system.blue};
|
background-color: ${Constants.system.blue};
|
||||||
color: ${Constants.system.white};
|
color: ${Constants.system.white};
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
:hover {
|
:hover {
|
||||||
background-color: #0079eb;
|
background-color: #0079eb;
|
||||||
@ -53,12 +54,12 @@ const STYLES_BUTTON_PRIMARY_TRANSPARENT = css`
|
|||||||
color: ${Constants.system.blue};
|
color: ${Constants.system.blue};
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export const ButtonPrimary = (props) => {
|
export const ButtonPrimary = ({ style, full, ...props }) => {
|
||||||
if (props.loading) {
|
if (props.loading) {
|
||||||
return (
|
return (
|
||||||
<button
|
<button
|
||||||
css={props.transparent ? STYLES_BUTTON_PRIMARY_TRANSPARENT : STYLES_BUTTON_PRIMARY}
|
css={props.transparent ? STYLES_BUTTON_PRIMARY_TRANSPARENT : STYLES_BUTTON_PRIMARY}
|
||||||
style={{ width: props.full ? "100%" : "auto", ...props.style }}
|
style={{ width: full ? "100%" : "auto", ...style }}
|
||||||
type={props.type}
|
type={props.type}
|
||||||
>
|
>
|
||||||
<LoaderSpinner style={{ height: 16, width: 16, color: Constants.system.white }} />
|
<LoaderSpinner style={{ height: 16, width: 16, color: Constants.system.white }} />
|
||||||
@ -70,7 +71,7 @@ export const ButtonPrimary = (props) => {
|
|||||||
return (
|
return (
|
||||||
<label
|
<label
|
||||||
css={props.transparent ? STYLES_BUTTON_PRIMARY_TRANSPARENT : STYLES_BUTTON_PRIMARY}
|
css={props.transparent ? STYLES_BUTTON_PRIMARY_TRANSPARENT : STYLES_BUTTON_PRIMARY}
|
||||||
style={{ width: props.full ? "100%" : "auto", ...props.style }}
|
style={{ width: full ? "100%" : "auto", ...style }}
|
||||||
children={props.children}
|
children={props.children}
|
||||||
type={props.label}
|
type={props.label}
|
||||||
htmlFor={props.htmlFor}
|
htmlFor={props.htmlFor}
|
||||||
@ -79,11 +80,21 @@ export const ButtonPrimary = (props) => {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (props.type === "link") {
|
||||||
|
return (
|
||||||
|
<a
|
||||||
|
css={props.transparent ? STYLES_BUTTON_PRIMARY_TRANSPARENT : STYLES_BUTTON_PRIMARY}
|
||||||
|
style={{ width: full ? "100%" : "auto", ...style }}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
if (props.disabled) {
|
if (props.disabled) {
|
||||||
return (
|
return (
|
||||||
<button
|
<button
|
||||||
css={STYLES_BUTTON_PRIMARY_DISABLED}
|
css={STYLES_BUTTON_PRIMARY_DISABLED}
|
||||||
style={{ width: props.full ? "100%" : "auto", ...props.style }}
|
style={{ width: full ? "100%" : "auto", ...style }}
|
||||||
onClick={props.onClick}
|
onClick={props.onClick}
|
||||||
children={props.children}
|
children={props.children}
|
||||||
type={props.type}
|
type={props.type}
|
||||||
@ -94,7 +105,7 @@ export const ButtonPrimary = (props) => {
|
|||||||
return (
|
return (
|
||||||
<button
|
<button
|
||||||
css={props.transparent ? STYLES_BUTTON_PRIMARY_TRANSPARENT : STYLES_BUTTON_PRIMARY}
|
css={props.transparent ? STYLES_BUTTON_PRIMARY_TRANSPARENT : STYLES_BUTTON_PRIMARY}
|
||||||
style={{ width: props.full ? "100%" : "auto", ...props.style }}
|
style={{ width: full ? "100%" : "auto", ...style }}
|
||||||
onClick={props.onClick}
|
onClick={props.onClick}
|
||||||
children={props.children}
|
children={props.children}
|
||||||
type={props.type}
|
type={props.type}
|
||||||
|
|||||||
771
pages/index.js
771
pages/index.js
@ -3,6 +3,8 @@ import * as Constants from "~/common/constants";
|
|||||||
import * as SVGLogo from "~/common/logo";
|
import * as SVGLogo from "~/common/logo";
|
||||||
import * as SVG from "~/common/svg";
|
import * as SVG from "~/common/svg";
|
||||||
import * as System from "~/components/system";
|
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 WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper";
|
||||||
import WebsiteHeader from "~/components/core/WebsiteHeader";
|
import WebsiteHeader from "~/components/core/WebsiteHeader";
|
||||||
@ -10,25 +12,24 @@ import WebsiteFooter from "~/components/core/WebsiteFooter";
|
|||||||
import Field from "~/components/core/Field";
|
import Field from "~/components/core/Field";
|
||||||
|
|
||||||
import { css } from "@emotion/react";
|
import { css } from "@emotion/react";
|
||||||
|
import { useForm } from "~/common/hooks";
|
||||||
|
import { motion, AnimateSharedLayout } from "framer-motion";
|
||||||
|
|
||||||
const INTEGRATION = [
|
const INTEGRATION = [
|
||||||
{
|
{
|
||||||
title: "Chrome",
|
title: "Chrome",
|
||||||
body: "Connect to your browser history and bookmarks.",
|
body: "Connect to your browser history and bookmarks.",
|
||||||
logo:
|
logo: "https://slate.textile.io/ipfs/bafkreiamdcnqxcga7dj4fur7nqd57pbey7s6znnj4o2zpbkmsydp6rspdy",
|
||||||
"https://slate.textile.io/ipfs/bafkreiamdcnqxcga7dj4fur7nqd57pbey7s6znnj4o2zpbkmsydp6rspdy",
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Twitter",
|
title: "Twitter",
|
||||||
body: "Search your twitter bookmarks.",
|
body: "Search your twitter bookmarks.",
|
||||||
logo:
|
logo: "https://slate.textile.io/ipfs/bafkreihtujowfnffw5jxvdo7gqazo4oy3q3q4u4z2jflx5ygmpaj7pgtnu",
|
||||||
"https://slate.textile.io/ipfs/bafkreihtujowfnffw5jxvdo7gqazo4oy3q3q4u4z2jflx5ygmpaj7pgtnu",
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "MetaMask",
|
title: "MetaMask",
|
||||||
body: "Keep all of your NFTs in one place.",
|
body: "Keep all of your NFTs in one place.",
|
||||||
logo:
|
logo: "https://slate.textile.io/ipfs/bafkreiecbn5pjuebdelsehul6sqmxs5kk74mijmo6ybts3hfg5tr2p4rti",
|
||||||
"https://slate.textile.io/ipfs/bafkreiecbn5pjuebdelsehul6sqmxs5kk74mijmo6ybts3hfg5tr2p4rti",
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "And more later",
|
title: "And more later",
|
||||||
@ -39,22 +40,19 @@ const INTEGRATION = [
|
|||||||
const WEB3 = [
|
const WEB3 = [
|
||||||
{
|
{
|
||||||
logo: <SVGLogo.PLHorizontal height="48px" />,
|
logo: <SVGLogo.PLHorizontal height="48px" />,
|
||||||
text:
|
text: "Textile is a set of open-source tools to help developers use the Filecoin network. That includes high-throughput storage APIs, permissionless storage bridges to Layer 1 blockchains, and more.",
|
||||||
"Textile is a set of open-source tools to help developers use the Filecoin network. That includes high-throughput storage APIs, permissionless storage bridges to Layer 1 blockchains, and more.",
|
|
||||||
link: "https://www.textile.io/",
|
link: "https://www.textile.io/",
|
||||||
action: "Learn more",
|
action: "Learn more",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
logo: <SVGLogo.PLHorizontal height="48px" />,
|
logo: <SVGLogo.PLHorizontal height="48px" />,
|
||||||
text:
|
text: "Filecoin and IPFS are complementary protocols for storing and sharing data in the distributed web. Both systems are free, open-source, and share many building blocks, including data representation formats (IPLD) and network communication protocols (libp2p).",
|
||||||
"Filecoin and IPFS are complementary protocols for storing and sharing data in the distributed web. Both systems are free, open-source, and share many building blocks, including data representation formats (IPLD) and network communication protocols (libp2p).",
|
|
||||||
link: "https://docs.filecoin.io/about-filecoin/ipfs-and-filecoin/",
|
link: "https://docs.filecoin.io/about-filecoin/ipfs-and-filecoin/",
|
||||||
action: "Learn more",
|
action: "Learn more",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
logo: <SVGLogo.PLHorizontal height="48px" />,
|
logo: <SVGLogo.PLHorizontal height="48px" />,
|
||||||
text:
|
text: "Estuary is a decentralized data storage service built on key d-web protocols that allow you to Store and retrieve content quickly using IPFS. It allows you to Store content on Filecoin with proposition and succesful deal receipts.",
|
||||||
"Estuary is a decentralized data storage service built on key d-web protocols that allow you to Store and retrieve content quickly using IPFS. It allows you to Store content on Filecoin with proposition and succesful deal receipts.",
|
|
||||||
link: "https://estuary.tech/",
|
link: "https://estuary.tech/",
|
||||||
action: "Learn more",
|
action: "Learn more",
|
||||||
},
|
},
|
||||||
@ -67,8 +65,7 @@ const FAQ = [
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "How does Slate handle data privacy?",
|
title: "How does Slate handle data privacy?",
|
||||||
text:
|
text: "We won’t monetize your data. It’s a pay subscription service. You should hold on to your sentitive data until we have an encryption solution.",
|
||||||
"We won’t monetize your data. It’s a pay subscription service. You should hold on to your sentitive data until we have an encryption solution.",
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "How much does Slate cost?",
|
title: "How much does Slate cost?",
|
||||||
@ -78,104 +75,76 @@ const FAQ = [
|
|||||||
|
|
||||||
const BANNER = [
|
const BANNER = [
|
||||||
{
|
{
|
||||||
link:
|
link: "https://slate.host/tara/neon-genesis-evangelion?cid=bafybeib2zzeknjmih25wivzogzupd7atrdbaxpvmsxfgutrqymlyfc2dvi",
|
||||||
"https://slate.host/tara/neon-genesis-evangelion?cid=bafybeib2zzeknjmih25wivzogzupd7atrdbaxpvmsxfgutrqymlyfc2dvi",
|
|
||||||
name: "@tara",
|
name: "@tara",
|
||||||
img:
|
img: "https://slate.textile.io/ipfs/bafybeib2zzeknjmih25wivzogzupd7atrdbaxpvmsxfgutrqymlyfc2dvi",
|
||||||
"https://slate.textile.io/ipfs/bafybeib2zzeknjmih25wivzogzupd7atrdbaxpvmsxfgutrqymlyfc2dvi",
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
link:
|
link: "https://slate.host/biodivlibrary/the-mushroom-book?cid=bafybeigph7tfup3wb3truahl7sycaywx3unwa365jk4assrjjlzv6d7x3a",
|
||||||
"https://slate.host/biodivlibrary/the-mushroom-book?cid=bafybeigph7tfup3wb3truahl7sycaywx3unwa365jk4assrjjlzv6d7x3a",
|
|
||||||
name: "@biodivlibrary",
|
name: "@biodivlibrary",
|
||||||
img:
|
img: "https://slate.textile.io/ipfs/bafybeigph7tfup3wb3truahl7sycaywx3unwa365jk4assrjjlzv6d7x3a",
|
||||||
"https://slate.textile.io/ipfs/bafybeigph7tfup3wb3truahl7sycaywx3unwa365jk4assrjjlzv6d7x3a",
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
link:
|
link: "https://slate.host/jin/cryptovoxels-history?cid=bafybeiafrj3erh3rfqux4zqc7u2px3veqdppbtizq26p443utxunrkgonu",
|
||||||
"https://slate.host/jin/cryptovoxels-history?cid=bafybeiafrj3erh3rfqux4zqc7u2px3veqdppbtizq26p443utxunrkgonu",
|
|
||||||
name: "@jin",
|
name: "@jin",
|
||||||
img:
|
img: "https://slate.textile.io/ipfs/bafybeiafrj3erh3rfqux4zqc7u2px3veqdppbtizq26p443utxunrkgonu",
|
||||||
"https://slate.textile.io/ipfs/bafybeiafrj3erh3rfqux4zqc7u2px3veqdppbtizq26p443utxunrkgonu",
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
link:
|
link: "https://slate.host/ng/numero?cid=bafybeibhhfgc4amvymoblaxcoe6glyyvaxhylzisl4ib2itcbhn3mrviou",
|
||||||
"https://slate.host/ng/numero?cid=bafybeibhhfgc4amvymoblaxcoe6glyyvaxhylzisl4ib2itcbhn3mrviou",
|
|
||||||
name: "@ng",
|
name: "@ng",
|
||||||
img:
|
img: "https://slate.textile.io/ipfs/bafybeibhhfgc4amvymoblaxcoe6glyyvaxhylzisl4ib2itcbhn3mrviou",
|
||||||
"https://slate.textile.io/ipfs/bafybeibhhfgc4amvymoblaxcoe6glyyvaxhylzisl4ib2itcbhn3mrviou",
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
link:
|
link: "https://slate.host/thesimpsons/clips?cid=bafybeigce5klzr3vgzmlathvepuzhzhmwjc6bbvmsmcvu5eyisy6mnkx34",
|
||||||
"https://slate.host/thesimpsons/clips?cid=bafybeigce5klzr3vgzmlathvepuzhzhmwjc6bbvmsmcvu5eyisy6mnkx34",
|
|
||||||
name: "@thesimpsons",
|
name: "@thesimpsons",
|
||||||
img:
|
img: "https://slate.textile.io/ipfs/bafybeigce5klzr3vgzmlathvepuzhzhmwjc6bbvmsmcvu5eyisy6mnkx34",
|
||||||
"https://slate.textile.io/ipfs/bafybeigce5klzr3vgzmlathvepuzhzhmwjc6bbvmsmcvu5eyisy6mnkx34",
|
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
link:
|
link: "https://slate.host/bitgraves/september?cid=bafybeiclkru6hwzw2ghvsyrbnaf67taxxhq2hbpcia2oqj5ufdggwhcbti",
|
||||||
"https://slate.host/bitgraves/september?cid=bafybeiclkru6hwzw2ghvsyrbnaf67taxxhq2hbpcia2oqj5ufdggwhcbti",
|
|
||||||
name: "@bitgraves",
|
name: "@bitgraves",
|
||||||
img:
|
img: "https://slate.textile.io/ipfs/bafybeiclkru6hwzw2ghvsyrbnaf67taxxhq2hbpcia2oqj5ufdggwhcbti",
|
||||||
"https://slate.textile.io/ipfs/bafybeiclkru6hwzw2ghvsyrbnaf67taxxhq2hbpcia2oqj5ufdggwhcbti",
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
link:
|
link: "https://slate.host/nypl/japan-kimbei-kusakabe?cid=bafkreidqz6imwffq5hpkacmxnrffagzxx5usybpitt42yuzthe6uf4idlm",
|
||||||
"https://slate.host/nypl/japan-kimbei-kusakabe?cid=bafkreidqz6imwffq5hpkacmxnrffagzxx5usybpitt42yuzthe6uf4idlm",
|
|
||||||
name: "@nypl",
|
name: "@nypl",
|
||||||
img:
|
img: "https://slate.textile.io/ipfs/bafkreidqz6imwffq5hpkacmxnrffagzxx5usybpitt42yuzthe6uf4idlm",
|
||||||
"https://slate.textile.io/ipfs/bafkreidqz6imwffq5hpkacmxnrffagzxx5usybpitt42yuzthe6uf4idlm",
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
link:
|
link: "https://slate.host/atlas/cartography?cid=bafybeid2n55qb4thosrxlszhzi3nwiorswv7xi2d5ykbudp3ph5hc54baa",
|
||||||
"https://slate.host/atlas/cartography?cid=bafybeid2n55qb4thosrxlszhzi3nwiorswv7xi2d5ykbudp3ph5hc54baa",
|
|
||||||
name: "@atlas",
|
name: "@atlas",
|
||||||
img:
|
img: "https://slate.textile.io/ipfs/bafybeid2n55qb4thosrxlszhzi3nwiorswv7xi2d5ykbudp3ph5hc54baa",
|
||||||
"https://slate.textile.io/ipfs/bafybeid2n55qb4thosrxlszhzi3nwiorswv7xi2d5ykbudp3ph5hc54baa",
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
link:
|
link: "https://slate.host/museosabiertos/palais-de-glace-fotografia?cid=bafybeigrznzuqymmfligf6mhc7adh6r7iw5gotbrzstcqeyyybaklfguki",
|
||||||
"https://slate.host/museosabiertos/palais-de-glace-fotografia?cid=bafybeigrznzuqymmfligf6mhc7adh6r7iw5gotbrzstcqeyyybaklfguki",
|
|
||||||
name: "@museosabiertos",
|
name: "@museosabiertos",
|
||||||
img:
|
img: "https://slate.textile.io/ipfs/bafybeigrznzuqymmfligf6mhc7adh6r7iw5gotbrzstcqeyyybaklfguki",
|
||||||
"https://slate.textile.io/ipfs/bafybeigrznzuqymmfligf6mhc7adh6r7iw5gotbrzstcqeyyybaklfguki",
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
link:
|
link: "https://slate.host/gndclouds/animation?cid=bafybeigh44l3uzsgv4hslpruxrr5s43olpj5llptmsafkemxbwlu4fbdc4",
|
||||||
"https://slate.host/gndclouds/animation?cid=bafybeigh44l3uzsgv4hslpruxrr5s43olpj5llptmsafkemxbwlu4fbdc4",
|
|
||||||
name: "@gndclouds",
|
name: "@gndclouds",
|
||||||
img:
|
img: "https://slate.textile.io/ipfs/bafybeigh44l3uzsgv4hslpruxrr5s43olpj5llptmsafkemxbwlu4fbdc4",
|
||||||
"https://slate.textile.io/ipfs/bafybeigh44l3uzsgv4hslpruxrr5s43olpj5llptmsafkemxbwlu4fbdc4",
|
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
link:
|
link: "https://slate.host/cindy/sw-sans?cid=bafkreihazsjq7hlho6ab6k7tise6ufv2ccat5gv5f3fz7yy4cluz3e356e",
|
||||||
"https://slate.host/cindy/sw-sans?cid=bafkreihazsjq7hlho6ab6k7tise6ufv2ccat5gv5f3fz7yy4cluz3e356e",
|
|
||||||
name: "@cindy",
|
name: "@cindy",
|
||||||
img:
|
img: "https://slate.textile.io/ipfs/bafkreihazsjq7hlho6ab6k7tise6ufv2ccat5gv5f3fz7yy4cluz3e356e",
|
||||||
"https://slate.textile.io/ipfs/bafkreihazsjq7hlho6ab6k7tise6ufv2ccat5gv5f3fz7yy4cluz3e356e",
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
link:
|
link: "https://slate.host/haris/archive?cid=bafkreigcdnhxnh4fp7g2xy2gp43umhjrqyzz2a2t3ovnmcabepwusx5ldi",
|
||||||
"https://slate.host/haris/archive?cid=bafkreigcdnhxnh4fp7g2xy2gp43umhjrqyzz2a2t3ovnmcabepwusx5ldi",
|
|
||||||
name: "@haris",
|
name: "@haris",
|
||||||
img:
|
img: "https://slate.textile.io/ipfs/bafkreigcdnhxnh4fp7g2xy2gp43umhjrqyzz2a2t3ovnmcabepwusx5ldi",
|
||||||
"https://slate.textile.io/ipfs/bafkreigcdnhxnh4fp7g2xy2gp43umhjrqyzz2a2t3ovnmcabepwusx5ldi",
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
link:
|
link: "https://slate.host/guji/%E5%8C%97%E4%BA%AC%E7%9A%87%E5%9F%8E%E5%BB%BA%E7%AD%91%E8%A3%85%E9%A5%B0?cid=bafybeiceh32ka3l6nlxniziefaxqs44ib4i47pohdftjzvlbsoem3qk6ly",
|
||||||
"https://slate.host/guji/%E5%8C%97%E4%BA%AC%E7%9A%87%E5%9F%8E%E5%BB%BA%E7%AD%91%E8%A3%85%E9%A5%B0?cid=bafybeiceh32ka3l6nlxniziefaxqs44ib4i47pohdftjzvlbsoem3qk6ly",
|
|
||||||
name: "@guji",
|
name: "@guji",
|
||||||
img:
|
img: "https://slate.textile.io/ipfs/bafybeiceh32ka3l6nlxniziefaxqs44ib4i47pohdftjzvlbsoem3qk6ly",
|
||||||
"https://slate.textile.io/ipfs/bafybeiceh32ka3l6nlxniziefaxqs44ib4i47pohdftjzvlbsoem3qk6ly",
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
link:
|
link: "https://slate.host/martina/reaction-gifs?cid=bafybeif344hukksxizwk2dhmp6xjybnbw6x62r23m6wju2btxpsk4yluki",
|
||||||
"https://slate.host/martina/reaction-gifs?cid=bafybeif344hukksxizwk2dhmp6xjybnbw6x62r23m6wju2btxpsk4yluki",
|
|
||||||
name: "@martina",
|
name: "@martina",
|
||||||
img:
|
img: "https://slate.textile.io/ipfs/bafybeif344hukksxizwk2dhmp6xjybnbw6x62r23m6wju2btxpsk4yluki",
|
||||||
"https://slate.textile.io/ipfs/bafybeif344hukksxizwk2dhmp6xjybnbw6x62r23m6wju2btxpsk4yluki",
|
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
@ -197,48 +166,42 @@ const OBJECTPREVIEWS = [
|
|||||||
type: "teenage.engineering",
|
type: "teenage.engineering",
|
||||||
preview:
|
preview:
|
||||||
"https://slate.textile.io/ipfs/bafkreifwroxchchkkgdg77uqqj5naycbjm45hnpdesrxw4cczlteye2g74",
|
"https://slate.textile.io/ipfs/bafkreifwroxchchkkgdg77uqqj5naycbjm45hnpdesrxw4cczlteye2g74",
|
||||||
URL:
|
URL: "https://slate.textile.io/ipfs/bafkreifwroxchchkkgdg77uqqj5naycbjm45hnpdesrxw4cczlteye2g74",
|
||||||
"https://slate.textile.io/ipfs/bafkreifwroxchchkkgdg77uqqj5naycbjm45hnpdesrxw4cczlteye2g74",
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "OP-Z Synthesizer",
|
title: "OP-Z Synthesizer",
|
||||||
type: "PDF",
|
type: "PDF",
|
||||||
preview:
|
preview:
|
||||||
"https://slate.textile.io/ipfs/bafkreiduzx7g3ujntby42o5wfvpqtelwdhopytqopyho2b6ejfuw4lxlqe",
|
"https://slate.textile.io/ipfs/bafkreiduzx7g3ujntby42o5wfvpqtelwdhopytqopyho2b6ejfuw4lxlqe",
|
||||||
URL:
|
URL: "https://slate.textile.io/ipfs/bafkreifwroxchchkkgdg77uqqj5naycbjm45hnpdesrxw4cczlteye2g74",
|
||||||
"https://slate.textile.io/ipfs/bafkreifwroxchchkkgdg77uqqj5naycbjm45hnpdesrxw4cczlteye2g74",
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "OP-Z Synthesizer",
|
title: "OP-Z Synthesizer",
|
||||||
type: "PNG",
|
type: "PNG",
|
||||||
preview:
|
preview:
|
||||||
"https://slate.textile.io/ipfs/bafkreifwroxchchkkgdg77uqqj5naycbjm45hnpdesrxw4cczlteye2g74",
|
"https://slate.textile.io/ipfs/bafkreifwroxchchkkgdg77uqqj5naycbjm45hnpdesrxw4cczlteye2g74",
|
||||||
URL:
|
URL: "https://slate.textile.io/ipfs/bafkreifwroxchchkkgdg77uqqj5naycbjm45hnpdesrxw4cczlteye2g74",
|
||||||
"https://slate.textile.io/ipfs/bafkreifwroxchchkkgdg77uqqj5naycbjm45hnpdesrxw4cczlteye2g74",
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "OP-Z Synthesizer",
|
title: "OP-Z Synthesizer",
|
||||||
type: "MP3",
|
type: "MP3",
|
||||||
preview:
|
preview:
|
||||||
"https://slate.textile.io/ipfs/bafkreighl64zbil2p2tr35omlvatur4mhrzh22j3gibjikbf5rwhtasu3m",
|
"https://slate.textile.io/ipfs/bafkreighl64zbil2p2tr35omlvatur4mhrzh22j3gibjikbf5rwhtasu3m",
|
||||||
URL:
|
URL: "https://slate.textile.io/ipfs/bafkreifwroxchchkkgdg77uqqj5naycbjm45hnpdesrxw4cczlteye2g74",
|
||||||
"https://slate.textile.io/ipfs/bafkreifwroxchchkkgdg77uqqj5naycbjm45hnpdesrxw4cczlteye2g74",
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "OP-Z Synthesizer",
|
title: "OP-Z Synthesizer",
|
||||||
type: "MP4",
|
type: "MP4",
|
||||||
preview:
|
preview:
|
||||||
"https://slate.textile.io/ipfs/bafkreifueoo5yk5ukl3ezjp2wwn6dqzjcn7ppv5yaxhni7aykhp76pjzli",
|
"https://slate.textile.io/ipfs/bafkreifueoo5yk5ukl3ezjp2wwn6dqzjcn7ppv5yaxhni7aykhp76pjzli",
|
||||||
URL:
|
URL: "https://slate.textile.io/ipfs/bafkreifwroxchchkkgdg77uqqj5naycbjm45hnpdesrxw4cczlteye2g74",
|
||||||
"https://slate.textile.io/ipfs/bafkreifwroxchchkkgdg77uqqj5naycbjm45hnpdesrxw4cczlteye2g74",
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "AUTHENTIC FONT",
|
title: "AUTHENTIC FONT",
|
||||||
type: "TTF",
|
type: "TTF",
|
||||||
preview:
|
preview:
|
||||||
"https://slate.textile.io/ipfs/bafkreidqoebuicx7miwrsva2raeeebmcpvavsxzbkfumry32egb47zas3y",
|
"https://slate.textile.io/ipfs/bafkreidqoebuicx7miwrsva2raeeebmcpvavsxzbkfumry32egb47zas3y",
|
||||||
URL:
|
URL: "https://slate.textile.io/ipfs/bafkreifwroxchchkkgdg77uqqj5naycbjm45hnpdesrxw4cczlteye2g74",
|
||||||
"https://slate.textile.io/ipfs/bafkreifwroxchchkkgdg77uqqj5naycbjm45hnpdesrxw4cczlteye2g74",
|
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
@ -558,6 +521,7 @@ const STYLES_CURSOR_BLINK = css`
|
|||||||
width: 21px;
|
width: 21px;
|
||||||
height: 35px;
|
height: 35px;
|
||||||
margin-left: 2px;
|
margin-left: 2px;
|
||||||
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const STYLES_CURSOR_BLINK_SMALL = css`
|
const STYLES_CURSOR_BLINK_SMALL = css`
|
||||||
@ -576,6 +540,7 @@ const STYLES_CURSOR_BLINK_SMALL = css`
|
|||||||
width: 17.5px;
|
width: 17.5px;
|
||||||
height: 29px;
|
height: 29px;
|
||||||
margin-left: 2px;
|
margin-left: 2px;
|
||||||
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const STYLES_ROTATING_BANNER = css`
|
const STYLES_ROTATING_BANNER = css`
|
||||||
@ -653,6 +618,7 @@ const STYLES_ROADMAP = css`
|
|||||||
|
|
||||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const STYLES_TOOL_ICON = css`
|
const STYLES_TOOL_ICON = css`
|
||||||
@ -688,7 +654,8 @@ const STYLES_CONNECT_BAR = css`
|
|||||||
margin: 0 -4px;
|
margin: 0 -4px;
|
||||||
|
|
||||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||||
height:5px;
|
height: 5px;
|
||||||
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const STYLES_STORAGE = css`
|
const STYLES_STORAGE = css`
|
||||||
@ -909,252 +876,161 @@ const Banner = (props) => {
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default class IndexPage extends React.Component {
|
export default function IndexPage() {
|
||||||
render() {
|
const title = `Slate`;
|
||||||
const title = `Slate`;
|
const description = "Your personal search engine";
|
||||||
const description = "Your personal search engine";
|
const url = "https://slate.host/";
|
||||||
const url = "https://slate.host/";
|
const image =
|
||||||
const image =
|
"https://slate.textile.io/ipfs/bafkreiddhzzwu5l6i7cikmydvumgnqwoml4rsurzftkopcvgcnwhndo7fa";
|
||||||
"https://slate.textile.io/ipfs/bafkreiddhzzwu5l6i7cikmydvumgnqwoml4rsurzftkopcvgcnwhndo7fa";
|
|
||||||
|
|
||||||
return (
|
const {
|
||||||
<WebsitePrototypeWrapper title={title} description={description} url={url} image={image}>
|
getFieldProps: getSignupFielProps,
|
||||||
<WebsiteHeader />
|
getFormProps: getSigninFormProps,
|
||||||
<div css={STYLES_ROOT}>
|
isSubmitting: isCheckingSignupEmail,
|
||||||
<div css={STYLES_CONTAINER}>
|
} = useForm({
|
||||||
<div css={STYLES_HEADING1}>your personal</div>
|
validateOnBlur: false,
|
||||||
<div css={STYLES_HEADING1} style={{ color: Constants.semantic.textGray }}>
|
initialValues: { email: "" },
|
||||||
search
|
validate: ({ email }, errors) => {
|
||||||
<div css={STYLES_CURSOR_BLINK} />
|
if (Strings.isEmpty(email)) errors.email = "Please provide an email";
|
||||||
|
else if (!Validations.email(email)) errors.email = "Invalid email address";
|
||||||
|
return errors;
|
||||||
|
},
|
||||||
|
onSubmit: async ({ email }) => {
|
||||||
|
window.open(`/_/auth?tab=signup&email=${email}`);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<WebsitePrototypeWrapper title={title} description={description} url={url} image={image}>
|
||||||
|
<WebsiteHeader />
|
||||||
|
<div css={STYLES_ROOT}>
|
||||||
|
<div css={STYLES_CONTAINER}>
|
||||||
|
<div css={STYLES_HEADING1}>your personal</div>
|
||||||
|
<div css={STYLES_HEADING1} style={{ color: Constants.semantic.textGray }}>
|
||||||
|
search
|
||||||
|
<div css={STYLES_CURSOR_BLINK} />
|
||||||
|
</div>
|
||||||
|
<div css={STYLES_HERO_TEXT}>
|
||||||
|
<div css={STYLES_HEADING1} style={{ marginBottom: 24 }}>
|
||||||
|
engine
|
||||||
</div>
|
</div>
|
||||||
<div css={STYLES_HERO_TEXT}>
|
<div css={STYLES_BODY1}>
|
||||||
<div css={STYLES_HEADING1} style={{ marginBottom: 24 }}>
|
Slate is a search tool for saving all of your files, bookmarks, and links on the web.
|
||||||
engine
|
|
||||||
</div>
|
|
||||||
<div css={STYLES_BODY1}>
|
|
||||||
Slate is a search tool for saving all of your files, bookmarks, and links on the
|
|
||||||
web.
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<a css={STYLES_BUTTON_PRIMARY_BIG_HERO}>
|
</div>
|
||||||
<img
|
<a css={STYLES_BUTTON_PRIMARY_BIG_HERO}>
|
||||||
src="https://slate.textile.io/ipfs/bafkreifaspqfcywjonh4rnzdxp3gqkgtgl7gxxy274gql34h5v3ow6rqse"
|
|
||||||
style={{ height: "24px", width: "24px", marginRight: "12px" }}
|
|
||||||
/>
|
|
||||||
Sign up
|
|
||||||
</a>
|
|
||||||
<img
|
<img
|
||||||
css={STYLES_IMG_HERO}
|
src="https://slate.textile.io/ipfs/bafkreifaspqfcywjonh4rnzdxp3gqkgtgl7gxxy274gql34h5v3ow6rqse"
|
||||||
src="https://slate.textile.io/ipfs/bafybeiatsp4eyc2dtshzweopxgekrx6ki7no3hzcz475lqq3rroneo3rwm"
|
style={{ height: "24px", width: "24px", marginRight: "12px" }}
|
||||||
/>
|
/>
|
||||||
</div>
|
Sign up
|
||||||
|
</a>
|
||||||
|
<img
|
||||||
|
css={STYLES_IMG_HERO}
|
||||||
|
src="https://slate.textile.io/ipfs/bafybeiatsp4eyc2dtshzweopxgekrx6ki7no3hzcz475lqq3rroneo3rwm"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div css={STYLES_CONTAINER_FLEX}>
|
<div css={STYLES_CONTAINER_FLEX}>
|
||||||
<div css={STYLES_OBJECT_GROUP} style={{ marginRight: 48 }}>
|
<div css={STYLES_OBJECT_GROUP} style={{ marginRight: 48 }}>
|
||||||
{OBJECTPREVIEWS.map((each) => (
|
{OBJECTPREVIEWS.map((each) => (
|
||||||
<ObjectPreview
|
<ObjectPreview
|
||||||
title={each.title}
|
title={each.title}
|
||||||
preview={each.preview}
|
preview={each.preview}
|
||||||
type={each.type}
|
type={each.type}
|
||||||
link={each.link}
|
link={each.link}
|
||||||
URL={each.URL}
|
URL={each.URL}
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
|
</div>
|
||||||
|
<div css={STYLES_TEXT}>
|
||||||
|
<div css={STYLES_HEADING2}>
|
||||||
|
All of your stuff <br />
|
||||||
|
in one place
|
||||||
</div>
|
</div>
|
||||||
<div css={STYLES_TEXT}>
|
<div css={STYLES_BODY2}>
|
||||||
<div css={STYLES_HEADING2}>
|
Slate gives you the power to save your bookmarks, files, and data all in one place.
|
||||||
All of your stuff <br />
|
|
||||||
in one place
|
|
||||||
</div>
|
|
||||||
<div css={STYLES_BODY2}>
|
|
||||||
Slate gives you the power to save your bookmarks, files, and data all in one place.
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div css={STYLES_CONTAINER}>
|
<div css={STYLES_CONTAINER}>
|
||||||
<div css={STYLES_TEXT}>
|
<div css={STYLES_TEXT}>
|
||||||
<div css={STYLES_HEADING2}>
|
<div css={STYLES_HEADING2}>
|
||||||
Instant <span style={{ color: Constants.semantic.textGray }}>search</span>
|
Instant <span style={{ color: Constants.semantic.textGray }}>search</span>
|
||||||
<div css={STYLES_CURSOR_BLINK_SMALL} />
|
<div css={STYLES_CURSOR_BLINK_SMALL} />
|
||||||
<br />
|
<br />
|
||||||
from anywhere
|
from anywhere
|
||||||
</div>
|
|
||||||
<div css={STYLES_BODY2}>
|
|
||||||
Your stuff is only as useful as it is accessible. Everything you save to Slate can
|
|
||||||
be instantly accessed in the app or from anywhere in the browser with the Slate
|
|
||||||
Chrome extension.
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div css={STYLES_CONTAINER_FLEX} style={{ padding: 0 }}>
|
<div css={STYLES_BODY2}>
|
||||||
<div css={STYLES_FEATURE_CARD}>
|
Your stuff is only as useful as it is accessible. Everything you save to Slate can be
|
||||||
<div css={STYLES_FEATURE_DESCRIPTION}>
|
instantly accessed in the app or from anywhere in the browser with the Slate Chrome
|
||||||
<div css={STYLES_HEADING3}>
|
extension.
|
||||||
Access Slate anytime, anywhere when you browse the Internet.
|
|
||||||
</div>
|
|
||||||
<div css={STYLES_ICON_BUTTON}>⌥</div>
|
|
||||||
<div css={STYLES_ICON_BUTTON}>S</div>
|
|
||||||
</div>
|
|
||||||
<img
|
|
||||||
css={STYLES_FEATURE_IMG}
|
|
||||||
style={{ width: "160%", margin: "0 -30%", border: "6px solid #000000" }}
|
|
||||||
src="https://slate.textile.io/ipfs/bafybeihsrxgjk5ax4wzbnfnq2kyg4djylrvpsbzrhitvnmcjixupbk5qjm"
|
|
||||||
/>
|
|
||||||
<img
|
|
||||||
css={STYLES_FEATURE_IMG}
|
|
||||||
style={{ margin: "-80% auto 48px auto" }}
|
|
||||||
src="https://slate.textile.io/ipfs/bafkreidm2ffwdjgk5j5w4ja2p7fjrflfeldyhak2qigkpatvhazc5rsvda"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div css={STYLES_FEATURE_CARD}>
|
|
||||||
<div css={STYLES_FEATURE_DESCRIPTION}>
|
|
||||||
<div css={STYLES_HEADING3}>
|
|
||||||
Search for references on your personal database with Slate.
|
|
||||||
</div>
|
|
||||||
<div style={{ height: 32 }}></div>
|
|
||||||
</div>
|
|
||||||
<img
|
|
||||||
css={STYLES_FEATURE_IMG}
|
|
||||||
style={{ margin: "0 0 0 20px", width: "110%" }}
|
|
||||||
src="https://slate.textile.io/ipfs/bafkreidm2ffwdjgk5j5w4ja2p7fjrflfeldyhak2qigkpatvhazc5rsvda"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div css={STYLES_CONTAINER_FLEX} style={{ padding: 0 }}>
|
||||||
<div css={STYLES_CONTAINER_FLEX}>
|
<div css={STYLES_FEATURE_CARD}>
|
||||||
<div css={STYLES_ROADMAP} style={{ marginRight: 48 }}>
|
<div css={STYLES_FEATURE_DESCRIPTION}>
|
||||||
<div
|
<div css={STYLES_HEADING3}>
|
||||||
css={STYLES_BUTTON_PRIMARY_SMALL}
|
Access Slate anytime, anywhere when you browse the Internet.
|
||||||
style={{
|
</div>
|
||||||
backgroundColor: Constants.system.orange,
|
<div css={STYLES_ICON_BUTTON}>⌥</div>
|
||||||
marginBottom: 16,
|
<div css={STYLES_ICON_BUTTON}>S</div>
|
||||||
alignSelf: "flex-start",
|
|
||||||
cursor: "default",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Coming soon
|
|
||||||
</div>
|
</div>
|
||||||
{INTEGRATION.map((each) => (
|
<img
|
||||||
<Integration
|
css={STYLES_FEATURE_IMG}
|
||||||
title={each.title}
|
style={{ width: "160%", margin: "0 -30%", border: "6px solid #000000" }}
|
||||||
body={each.body}
|
src="https://slate.textile.io/ipfs/bafybeihsrxgjk5ax4wzbnfnq2kyg4djylrvpsbzrhitvnmcjixupbk5qjm"
|
||||||
logo={each.logo}
|
/>
|
||||||
last={each.last}
|
<img
|
||||||
/>
|
css={STYLES_FEATURE_IMG}
|
||||||
))}
|
style={{ margin: "-80% auto 48px auto" }}
|
||||||
|
src="https://slate.textile.io/ipfs/bafkreidm2ffwdjgk5j5w4ja2p7fjrflfeldyhak2qigkpatvhazc5rsvda"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div css={STYLES_TEXT}>
|
<div css={STYLES_FEATURE_CARD}>
|
||||||
<div css={STYLES_HEADING2}>
|
<div css={STYLES_FEATURE_DESCRIPTION}>
|
||||||
Con
|
<div css={STYLES_HEADING3}>
|
||||||
<div css={STYLES_CONNECT_BAR} />
|
Search for references on your personal database with Slate.
|
||||||
nect with <br />
|
</div>
|
||||||
your favorite tools
|
<div style={{ height: 32 }}></div>
|
||||||
</div>
|
</div>
|
||||||
<div css={STYLES_BODY2}>
|
<img
|
||||||
Starting with your browser, Slate integrates seamlessly with all the places you
|
css={STYLES_FEATURE_IMG}
|
||||||
save, bookmark, and save things to make them searchable to you in one place.
|
style={{ margin: "0 0 0 20px", width: "110%" }}
|
||||||
</div>
|
src="https://slate.textile.io/ipfs/bafkreidm2ffwdjgk5j5w4ja2p7fjrflfeldyhak2qigkpatvhazc5rsvda"
|
||||||
<a css={STYLES_BUTTON_SECONDARY_BIG} style={{ marginTop: 48 }}>
|
/>
|
||||||
<img
|
|
||||||
src="https://slate.textile.io/ipfs/bafybeieslchdkdqj2ryh7wwazmsj2iumro7xcawitx2w3rze5glk5py76u"
|
|
||||||
style={{ height: "24px", width: "24px", marginRight: "12px" }}
|
|
||||||
/>
|
|
||||||
Join waitlist
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div css={STYLES_CONTAINER}>
|
<div css={STYLES_CONTAINER_FLEX}>
|
||||||
<div css={STYLES_TEXT}>
|
<div css={STYLES_ROADMAP} style={{ marginRight: 48 }}>
|
||||||
<div css={STYLES_HEADING2}>
|
<div
|
||||||
Minimize <br /> organizing effort
|
css={STYLES_BUTTON_PRIMARY_SMALL}
|
||||||
</div>
|
style={{
|
||||||
<div css={STYLES_BODY2}>
|
backgroundColor: Constants.system.orange,
|
||||||
Use Slate for yourself by creating channels based on filters applied to your files
|
marginBottom: 16,
|
||||||
and data. You can publish any collection to the web for others to subscribe to and
|
alignSelf: "flex-start",
|
||||||
follow.
|
cursor: "default",
|
||||||
</div>
|
}}
|
||||||
</div>
|
>
|
||||||
|
Coming soon
|
||||||
<div css={STYLES_CONTAINER_FLEX} style={{ padding: 0 }}>
|
|
||||||
<div css={STYLES_FEATURE_CARD}>
|
|
||||||
<div css={STYLES_FEATURE_DESCRIPTION}>
|
|
||||||
<div css={STYLES_HEADING3}>
|
|
||||||
No folders,
|
|
||||||
<br />
|
|
||||||
just tags
|
|
||||||
</div>
|
|
||||||
<div css={STYLES_ICON_BUTTON}>#</div>
|
|
||||||
</div>
|
|
||||||
<img
|
|
||||||
css={STYLES_FEATURE_IMG}
|
|
||||||
style={{ border: "6px solid #000000", marginTop: 48 }}
|
|
||||||
src="https://slate.textile.io/ipfs/bafybeia7eclwk2zk6jv2agfwjj4fs57yhxz7vgwchaa6w34wf7xwohq7ky"
|
|
||||||
/>
|
|
||||||
<img
|
|
||||||
css={STYLES_FEATURE_IMG}
|
|
||||||
style={{ width: "75%", margin: "-72% auto 48px auto" }}
|
|
||||||
src="https://slate.textile.io/ipfs/bafkreigl7t3sobz5rmgpqoptzh7bozwmygmxzgskpwdovchkvs2yiws2vu"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div css={STYLES_FEATURE_CARD}>
|
|
||||||
<div css={STYLES_FEATURE_DESCRIPTION}>
|
|
||||||
<div css={STYLES_HEADING3}>
|
|
||||||
Public tags for sharing,
|
|
||||||
<br />
|
|
||||||
private tags for yourself
|
|
||||||
</div>
|
|
||||||
<div style={{ height: 32 }}></div>
|
|
||||||
</div>
|
|
||||||
<img
|
|
||||||
css={STYLES_FEATURE_IMG}
|
|
||||||
style={{ margin: "0 0 0 20px", width: "110%" }}
|
|
||||||
src="https://slate.textile.io/ipfs/bafkreid33v3lktc3xicfqwhx55yssu2vo22dgax4pmax3bpgdfie4upy7e"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
{INTEGRATION.map((each) => (
|
||||||
|
<Integration title={each.title} body={each.body} logo={each.logo} last={each.last} />
|
||||||
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
<div css={STYLES_TEXT}>
|
||||||
<div css={STYLES_CONTAINER}>
|
<div css={STYLES_HEADING2}>
|
||||||
<div css={STYLES_TEXT}>
|
Con
|
||||||
<div css={STYLES_STORAGE_LINE}>
|
<div css={STYLES_CONNECT_BAR} />
|
||||||
<div css={STYLES_HEADING2} style={{ marginBottom: 8, minWidth: 0 }}>
|
nect with <br />
|
||||||
Affordable
|
your favorite tools
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div
|
|
||||||
css={STYLES_STORAGE}
|
|
||||||
style={{ marginBottom: 2, color: Constants.semantic.textGrayLight }}
|
|
||||||
>
|
|
||||||
storage
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
css={STYLES_STORAGE}
|
|
||||||
style={{ marginBottom: 2, color: Constants.semantic.textGray }}
|
|
||||||
>
|
|
||||||
storage
|
|
||||||
</div>
|
|
||||||
<div css={STYLES_STORAGE} style={{ marginBottom: 0 }}>
|
|
||||||
storage
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div css={STYLES_HEADING2}>for everyone</div>
|
|
||||||
<div css={STYLES_BODY2}>
|
|
||||||
With Slate, you never have to worry about storage space again. Every account comes
|
|
||||||
with 30GB of storage for free with a paid unlimited data plan coming soon.
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div css={STYLES_DATA_METER}>
|
<div css={STYLES_BODY2}>
|
||||||
{DATAMETER.map((each) => (
|
Starting with your browser, Slate integrates seamlessly with all the places you save,
|
||||||
<DataMeter radius={each.radius} width={each.width} color={each.color} />
|
bookmark, and save things to make them searchable to you in one place.
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
<div css={STYLES_DATA_LABEL_GROUP}>
|
|
||||||
{DATAMETER.map((each) => (
|
|
||||||
<DataLabel label={each.label} color={each.color} />
|
|
||||||
))}
|
|
||||||
</div>
|
</div>
|
||||||
<a css={STYLES_BUTTON_SECONDARY_BIG} style={{ marginTop: 48 }}>
|
<a css={STYLES_BUTTON_SECONDARY_BIG} style={{ marginTop: 48 }}>
|
||||||
<img
|
<img
|
||||||
@ -1164,94 +1040,209 @@ export default class IndexPage extends React.Component {
|
|||||||
Join waitlist
|
Join waitlist
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div css={STYLES_CONTAINER}>
|
<div css={STYLES_CONTAINER}>
|
||||||
<div css={STYLES_TEXT}>
|
<div css={STYLES_TEXT}>
|
||||||
<div css={STYLES_HEADING2}>Powered by web3</div>
|
<div css={STYLES_HEADING2}>
|
||||||
<div css={STYLES_BODY2}>
|
Minimize <br /> organizing effort
|
||||||
All of Slate is built on lasting new technologies where data storage is designed to
|
</div>
|
||||||
ensure the privacy, security, and portability of your data.
|
<div css={STYLES_BODY2}>
|
||||||
|
Use Slate for yourself by creating channels based on filters applied to your files and
|
||||||
|
data. You can publish any collection to the web for others to subscribe to and follow.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div css={STYLES_CONTAINER_FLEX} style={{ padding: 0 }}>
|
||||||
|
<div css={STYLES_FEATURE_CARD}>
|
||||||
|
<div css={STYLES_FEATURE_DESCRIPTION}>
|
||||||
|
<div css={STYLES_HEADING3}>
|
||||||
|
No folders,
|
||||||
|
<br />
|
||||||
|
just tags
|
||||||
|
</div>
|
||||||
|
<div css={STYLES_ICON_BUTTON}>#</div>
|
||||||
</div>
|
</div>
|
||||||
|
<img
|
||||||
|
css={STYLES_FEATURE_IMG}
|
||||||
|
style={{ border: "6px solid #000000", marginTop: 48 }}
|
||||||
|
src="https://slate.textile.io/ipfs/bafybeia7eclwk2zk6jv2agfwjj4fs57yhxz7vgwchaa6w34wf7xwohq7ky"
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
css={STYLES_FEATURE_IMG}
|
||||||
|
style={{ width: "75%", margin: "-72% auto 48px auto" }}
|
||||||
|
src="https://slate.textile.io/ipfs/bafkreigl7t3sobz5rmgpqoptzh7bozwmygmxzgskpwdovchkvs2yiws2vu"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div css={STYLES_CARD_GROUP}>
|
<div css={STYLES_FEATURE_CARD}>
|
||||||
{WEB3.map((each) => (
|
<div css={STYLES_FEATURE_DESCRIPTION}>
|
||||||
<Card logo={each.logo} text={each.text} link={each.link} action={each.action} />
|
<div css={STYLES_HEADING3}>
|
||||||
))}
|
Public tags for sharing,
|
||||||
</div>
|
<br />
|
||||||
</div>
|
private tags for yourself
|
||||||
<div css={STYLES_CONTAINER}>
|
</div>
|
||||||
<div css={STYLES_TEXT}>
|
<div style={{ height: 32 }}></div>
|
||||||
<div css={STYLES_HEADING2}>FAQs</div>
|
|
||||||
</div>
|
|
||||||
<div css={STYLES_CARD_GROUP}>
|
|
||||||
{FAQ.map((each) => (
|
|
||||||
<Card title={each.title} text={each.text} />
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div css={STYLES_CONTAINER} style={{ paddingBottom: 24 }}>
|
|
||||||
<div css={STYLES_TEXT}>
|
|
||||||
<div css={STYLES_HEADING2}>Come hang out</div>
|
|
||||||
<div css={STYLES_BODY2}>Join our discord channel for questions, discussions.</div>
|
|
||||||
<a
|
|
||||||
css={STYLES_BUTTON_PRIMARY_BIG}
|
|
||||||
style={{ backgroundColor: "#7289d9", marginTop: 24 }}
|
|
||||||
>
|
|
||||||
<SVGLogo.Discord height="14px" style={{ marginRight: "16px" }} />
|
|
||||||
Join Discord channel
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div css={STYLES_ROTATING_BANNER}>
|
|
||||||
<div css={STYLES_BANNER_GROUP}>
|
|
||||||
<div css={STYLES_BANNER_ANIMATION}>
|
|
||||||
{BANNER.map((each) => (
|
|
||||||
<Banner link={each.link} name={each.name} img={each.img} />
|
|
||||||
))}
|
|
||||||
{BANNER.map((each) => (
|
|
||||||
<Banner link={each.link} name={each.name} img={each.img} />
|
|
||||||
))}
|
|
||||||
{BANNER.map((each) => (
|
|
||||||
<Banner link={each.link} name={each.name} img={each.img} />
|
|
||||||
))}
|
|
||||||
{BANNER.map((each) => (
|
|
||||||
<Banner link={each.link} name={each.name} img={each.img} />
|
|
||||||
))}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<img
|
||||||
</div>
|
css={STYLES_FEATURE_IMG}
|
||||||
|
style={{ margin: "0 0 0 20px", width: "110%" }}
|
||||||
<div css={STYLES_CONTAINER}>
|
src="https://slate.textile.io/ipfs/bafkreid33v3lktc3xicfqwhx55yssu2vo22dgax4pmax3bpgdfie4upy7e"
|
||||||
<div css={STYLES_TEXT} style={{ margin: "40px auto", textAlign: "center" }}>
|
/>
|
||||||
<div css={STYLES_HEADING2}>Get started for free</div>
|
|
||||||
<div css={STYLES_BODY2}>Get 30GB storage for free and claim your user handle.</div>
|
|
||||||
</div>
|
|
||||||
<div css={STYLES_AUTH_MODAL}>
|
|
||||||
<System.ButtonPrimaryFull style={{ backgroundColor: "#1DA1F2" }}>
|
|
||||||
<SVGLogo.Twitter height="14px" style={{ marginRight: "16px" }} />
|
|
||||||
Continue with Twitter
|
|
||||||
</System.ButtonPrimaryFull>
|
|
||||||
<div css={STYLES_DIVIDER} />
|
|
||||||
<form style={{ width: "100%" }}>
|
|
||||||
<Field
|
|
||||||
label="Sign up with email"
|
|
||||||
placeholder="Email"
|
|
||||||
type="email"
|
|
||||||
name="email"
|
|
||||||
full
|
|
||||||
style={{ backgroundColor: "rgba(242,242,247,0.5)" }}
|
|
||||||
containerStyle={{ marginTop: "4px" }}
|
|
||||||
/>
|
|
||||||
<System.ButtonPrimaryFull style={{ marginTop: "16px" }}>
|
|
||||||
Create account
|
|
||||||
</System.ButtonPrimaryFull>
|
|
||||||
</form>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<WebsiteFooter />
|
|
||||||
</WebsitePrototypeWrapper>
|
<div css={STYLES_CONTAINER}>
|
||||||
);
|
<div css={STYLES_TEXT}>
|
||||||
}
|
<div css={STYLES_STORAGE_LINE}>
|
||||||
|
<div css={STYLES_HEADING2} style={{ marginBottom: 8, minWidth: 0 }}>
|
||||||
|
Affordable
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
css={STYLES_STORAGE}
|
||||||
|
style={{ marginBottom: 2, color: Constants.semantic.textGrayLight }}
|
||||||
|
>
|
||||||
|
storage
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
css={STYLES_STORAGE}
|
||||||
|
style={{ marginBottom: 2, color: Constants.semantic.textGray }}
|
||||||
|
>
|
||||||
|
storage
|
||||||
|
</div>
|
||||||
|
<div css={STYLES_STORAGE} style={{ marginBottom: 0 }}>
|
||||||
|
storage
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div css={STYLES_HEADING2}>for everyone</div>
|
||||||
|
<div css={STYLES_BODY2}>
|
||||||
|
With Slate, you never have to worry about storage space again. Every account comes
|
||||||
|
with 30GB of storage for free with a paid unlimited data plan coming soon.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div css={STYLES_DATA_METER}>
|
||||||
|
{DATAMETER.map((each) => (
|
||||||
|
<DataMeter radius={each.radius} width={each.width} color={each.color} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<div css={STYLES_DATA_LABEL_GROUP}>
|
||||||
|
{DATAMETER.map((each) => (
|
||||||
|
<DataLabel label={each.label} color={each.color} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<a css={STYLES_BUTTON_SECONDARY_BIG} style={{ marginTop: 48 }}>
|
||||||
|
<img
|
||||||
|
src="https://slate.textile.io/ipfs/bafybeieslchdkdqj2ryh7wwazmsj2iumro7xcawitx2w3rze5glk5py76u"
|
||||||
|
style={{ height: "24px", width: "24px", marginRight: "12px" }}
|
||||||
|
/>
|
||||||
|
Join waitlist
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div css={STYLES_CONTAINER}>
|
||||||
|
<div css={STYLES_TEXT}>
|
||||||
|
<div css={STYLES_HEADING2}>Powered by web3</div>
|
||||||
|
<div css={STYLES_BODY2}>
|
||||||
|
All of Slate is built on lasting new technologies where data storage is designed to
|
||||||
|
ensure the privacy, security, and portability of your data.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div css={STYLES_CARD_GROUP}>
|
||||||
|
{WEB3.map((each) => (
|
||||||
|
<Card logo={each.logo} text={each.text} link={each.link} action={each.action} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div css={STYLES_CONTAINER}>
|
||||||
|
<div css={STYLES_TEXT}>
|
||||||
|
<div css={STYLES_HEADING2}>FAQs</div>
|
||||||
|
</div>
|
||||||
|
<div css={STYLES_CARD_GROUP}>
|
||||||
|
{FAQ.map((each) => (
|
||||||
|
<Card title={each.title} text={each.text} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div css={STYLES_CONTAINER} style={{ paddingBottom: 24 }}>
|
||||||
|
<div css={STYLES_TEXT}>
|
||||||
|
<div css={STYLES_HEADING2}>Come hang out</div>
|
||||||
|
<div css={STYLES_BODY2}>Join our discord channel for questions, discussions.</div>
|
||||||
|
<a
|
||||||
|
css={STYLES_BUTTON_PRIMARY_BIG}
|
||||||
|
style={{ backgroundColor: "#7289d9", marginTop: 24 }}
|
||||||
|
>
|
||||||
|
<SVGLogo.Discord height="14px" style={{ marginRight: "16px" }} />
|
||||||
|
Join Discord channel
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div css={STYLES_ROTATING_BANNER}>
|
||||||
|
<div css={STYLES_BANNER_GROUP}>
|
||||||
|
<div css={STYLES_BANNER_ANIMATION}>
|
||||||
|
{BANNER.map((each) => (
|
||||||
|
<Banner link={each.link} name={each.name} img={each.img} />
|
||||||
|
))}
|
||||||
|
{BANNER.map((each) => (
|
||||||
|
<Banner link={each.link} name={each.name} img={each.img} />
|
||||||
|
))}
|
||||||
|
{BANNER.map((each) => (
|
||||||
|
<Banner link={each.link} name={each.name} img={each.img} />
|
||||||
|
))}
|
||||||
|
{BANNER.map((each) => (
|
||||||
|
<Banner link={each.link} name={each.name} img={each.img} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div css={STYLES_CONTAINER}>
|
||||||
|
<div css={STYLES_TEXT} style={{ margin: "40px auto", textAlign: "center" }}>
|
||||||
|
<div css={STYLES_HEADING2}>Get started for free</div>
|
||||||
|
<div css={STYLES_BODY2}>Get 30GB storage for free and claim your user handle.</div>
|
||||||
|
</div>
|
||||||
|
<div css={STYLES_AUTH_MODAL}>
|
||||||
|
<System.ButtonPrimaryFull
|
||||||
|
type="link"
|
||||||
|
href="/_/auth?tab=twitter"
|
||||||
|
style={{ backgroundColor: "#1DA1F2" }}
|
||||||
|
>
|
||||||
|
<SVGLogo.Twitter height="14px" style={{ marginRight: "16px" }} />
|
||||||
|
Continue with Twitter
|
||||||
|
</System.ButtonPrimaryFull>
|
||||||
|
<div css={STYLES_DIVIDER} />
|
||||||
|
<form {...getSigninFormProps()} style={{ width: "100%" }}>
|
||||||
|
<Field
|
||||||
|
{...getSignupFielProps("email")}
|
||||||
|
label="Sign up with email"
|
||||||
|
placeholder="Email"
|
||||||
|
type="text"
|
||||||
|
full
|
||||||
|
style={{ backgroundColor: "rgba(242,242,247,0.5)" }}
|
||||||
|
containerStyle={{ marginTop: "4px" }}
|
||||||
|
/>
|
||||||
|
<AnimateSharedLayout>
|
||||||
|
<motion.div layoutId="landing-signup-submit-button">
|
||||||
|
<System.ButtonPrimaryFull
|
||||||
|
loading={isCheckingSignupEmail}
|
||||||
|
type="submit"
|
||||||
|
style={{ marginTop: "16px" }}
|
||||||
|
>
|
||||||
|
Create account
|
||||||
|
</System.ButtonPrimaryFull>
|
||||||
|
</motion.div>
|
||||||
|
</AnimateSharedLayout>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<AnimateSharedLayout>
|
||||||
|
<motion.div layoutId="landing-footer">
|
||||||
|
<WebsiteFooter />
|
||||||
|
</motion.div>
|
||||||
|
</AnimateSharedLayout>
|
||||||
|
</WebsitePrototypeWrapper>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user