mirror of
https://github.com/filecoin-project/slate.git
synced 2024-11-23 14:07:20 +03:00
1068 lines
33 KiB
JavaScript
1068 lines
33 KiB
JavaScript
import * as React from "react";
|
|
import * as Constants from "~/common/constants";
|
|
import * as Actions from "~/common/actions";
|
|
|
|
import WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper";
|
|
import WebsitePrototypeHeader from "~/components/core/NewWebsitePrototypeHeader";
|
|
import WebsitePrototypeFooter from "~/components/core/NewWebsitePrototypeFooter";
|
|
|
|
import { css } from "@emotion/react";
|
|
|
|
const STYLES_ROOT = css`
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
max-width: 1440px;
|
|
`;
|
|
|
|
const STYLES_LINK = css`
|
|
text-decoration: none;
|
|
color: ${Constants.system.white};
|
|
transition: 200ms ease all;
|
|
|
|
:hover {
|
|
color: ${Constants.system.blue};
|
|
}
|
|
`;
|
|
|
|
const STYLES_H1 = css`
|
|
font-size: 3.815rem;
|
|
line-height: 1.25;
|
|
padding: 0px 0px 32px 0px;
|
|
width: 100%;
|
|
color: ${Constants.system.white};
|
|
|
|
@media (max-width: ${Constants.sizes.tablet}px) {
|
|
font-size: 3.052rem;
|
|
padding: 0px 0px 24px 0px;
|
|
}
|
|
|
|
@media (max-width: ${Constants.sizes.mobile}px) {
|
|
font-size: 1.953rem;
|
|
padding: 0px 0px 8px 0px;
|
|
}
|
|
`;
|
|
|
|
const STYLES_H2 = css`
|
|
font-size: 2.441em;
|
|
line-height: 1.25;
|
|
padding: 16px 0px 0 0px;
|
|
width: 100%;
|
|
color: ${Constants.system.darkGray};
|
|
|
|
@media (max-width: ${Constants.sizes.tablet}px) {
|
|
font-size: 1.563rem;
|
|
padding: 8px 0px 0px 0px;
|
|
}
|
|
|
|
@media (max-width: ${Constants.sizes.mobile}px) {
|
|
font-size: 1.25rem;
|
|
padding: 8px 0px 0 0px;
|
|
line-height: 1.5;
|
|
}
|
|
`;
|
|
|
|
const STYLES_H3 = css`
|
|
font-size: 1.563rem;
|
|
line-height: 1.5;
|
|
padding: 16px 0px 0px 0px;
|
|
color: ${Constants.system.darkGray};
|
|
|
|
@media (max-width: ${Constants.sizes.tablet}px) {
|
|
font-size: 1.25rem;
|
|
padding: 8px 0px 0px 0px;
|
|
}
|
|
|
|
@media (max-width: ${Constants.sizes.mobile}px) {
|
|
font-size: 1rem;
|
|
padding: 8px 0px 0px 0px;
|
|
}
|
|
`;
|
|
|
|
const STYLES_HIGHLIGHT = css`
|
|
color: ${Constants.system.white};
|
|
`;
|
|
|
|
const STYLES_HIGHLIGHT_BLACK = css`
|
|
color: ${Constants.system.slate};
|
|
`;
|
|
|
|
const STYLES_SECTION_HERO = css`
|
|
width: 100vw;
|
|
padding: 30vh 88px 88px 88px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
margin: -88px 0px 0px 0px;
|
|
background: ${Constants.system.black};
|
|
|
|
@media (max-width: ${Constants.sizes.mobile}px) {
|
|
padding: 40vh 24px 48px 24px;
|
|
display: block;
|
|
}
|
|
`;
|
|
|
|
const STYLES_SECTION_SLATE_WALL = css`
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100vw;
|
|
padding: 88px;
|
|
background: ${Constants.system.wall};
|
|
|
|
@media (max-width: ${Constants.sizes.mobile}px) {
|
|
padding: 64px 24px;
|
|
display: block;
|
|
}
|
|
`;
|
|
|
|
const STYLES_SECTION_SLATE = css`
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 88px;
|
|
width: 100vw;
|
|
background: ${Constants.system.slate};
|
|
|
|
@media (max-width: ${Constants.sizes.mobile}px) {
|
|
padding: 64px 24px;
|
|
display: block;
|
|
}
|
|
`;
|
|
|
|
const STYLES_FILETYPE = css`
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
width: 100%;
|
|
|
|
@media (max-width: ${Constants.sizes.mobile}px) {
|
|
display: block;
|
|
}
|
|
`;
|
|
|
|
const STYLES_FILETYPE_GRID_ITEM = css`
|
|
padding: 0 48px 48px 0;
|
|
width: 50%;
|
|
|
|
@media (max-width: ${Constants.sizes.mobile}px) {
|
|
width: 100%;
|
|
padding: 0 0 24px 0;
|
|
}
|
|
`;
|
|
|
|
const STYLES_VIDEO_BIG = css`
|
|
display: block;
|
|
background-color: ${Constants.system.moonstone};
|
|
padding: 0;
|
|
outline: 0;
|
|
margin: 48px auto 88px auto;
|
|
border-radius: 4px;
|
|
width: 100%;
|
|
box-shadow: 0px 10px 50px 20px rgba(0, 0, 0, 0.1);
|
|
|
|
@media (max-width: ${Constants.sizes.tablet}px) {
|
|
margin: 32px auto 64px auto;
|
|
}
|
|
|
|
@media (max-width: ${Constants.sizes.mobile}px) {
|
|
margin: 24px auto 48px auto;
|
|
}
|
|
`;
|
|
|
|
const STYLES_VIDEO_SMALL = css`
|
|
display: block;
|
|
background-color: ${Constants.system.moonstone};
|
|
padding: 0;
|
|
outline: 0;
|
|
border-radius: 4px;
|
|
width: 100%;
|
|
box-shadow: 0px 10px 50px 20px rgba(0, 0, 0, 0.1);
|
|
`;
|
|
|
|
const STYLES_MEDIA_LEFT = css`
|
|
margin: 64px 0 0 -240px;
|
|
width: 80vw;
|
|
border-radius: 4px;
|
|
box-shadow: 0px 10px 50px 20px rgba(0, 0, 0, 0.1);
|
|
|
|
@media (max-width: ${Constants.sizes.mobile}px) {
|
|
margin: 24px 0 0 -80px;
|
|
}
|
|
`;
|
|
|
|
const STYLES_MEDIA_RIGHT_OVERLAP = css`
|
|
float: right;
|
|
margin: -40px 240px 0 0;
|
|
width: 24vw;
|
|
|
|
@media (max-width: ${Constants.sizes.tablet}px) {
|
|
margin: 24px 0 0 80px;
|
|
width: 32vw;
|
|
}
|
|
|
|
@media (max-width: ${Constants.sizes.mobile}px) {
|
|
margin: 24px 0 0 80px;
|
|
width: 48vw;
|
|
}
|
|
`;
|
|
|
|
const STYLES_TEXT_BLOCK = css`
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
width: 56vw;
|
|
align-self: center;
|
|
|
|
@media (max-width: ${Constants.sizes.mobile}px) {
|
|
width: 88%;
|
|
right: 24px;
|
|
}
|
|
`;
|
|
|
|
const STYLES_ACTIONS_RIGHT = css`
|
|
@media (max-width: ${Constants.sizes.mobile}px) {
|
|
display: block;
|
|
padding: 16px 0 8px 0;
|
|
}
|
|
`;
|
|
|
|
const STYLES_BUTTON_PRIMARY = css`
|
|
box-sizing: border-box;
|
|
border-radius: 2px;
|
|
outline: 0;
|
|
border: 0;
|
|
min-height: 48px;
|
|
padding: 0px 24px 0px 24px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 16px;
|
|
letter-spacing: 0.2px;
|
|
font-family: ${Constants.font.semiBold};
|
|
transition: 200ms ease all;
|
|
user-select: none;
|
|
cursor: pointer;
|
|
background-color: ${Constants.system.wall};
|
|
color: ${Constants.system.slate};
|
|
box-shadow: 0px 10px 50px 20px rgba(0, 0, 0, 0.1);
|
|
|
|
:hover {
|
|
background-color: ${Constants.system.pitchBlack};
|
|
box-shadow: 0px 10px 90px 20px rgba(207, 206, 211, 0.3);
|
|
color: ${Constants.system.wall};
|
|
}
|
|
|
|
:focus {
|
|
box-shadow: inset 0 0 5px 2px rgba(0, 0, 0, 0.3);
|
|
background-color: ${Constants.system.pitchBlack};
|
|
color: ${Constants.system.wall};
|
|
outline: 0;
|
|
border: 0;
|
|
}
|
|
`;
|
|
|
|
const STYLES_LINK_WHITE = css`
|
|
color: ${Constants.system.white};
|
|
text-decoration: none;
|
|
transition: 200ms ease color;
|
|
font-size: 1.25rem;
|
|
padding: 24px 0 0 0;
|
|
|
|
:visited {
|
|
color: ${Constants.system.white};
|
|
}
|
|
|
|
:hover {
|
|
color: ${Constants.system.brand};
|
|
}
|
|
|
|
@media (max-width: ${Constants.sizes.mobile}px) {
|
|
font-size: 0.78rem;
|
|
}
|
|
`;
|
|
|
|
const STYLES_SLATE_CARD_GROUP = css`
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
width: 100%;
|
|
margin-bottom: -1px;
|
|
`;
|
|
|
|
const STYLES_SLATE_CARD = css`
|
|
width: calc(100% / 3 + 1px);
|
|
height: calc(100vh / 4);
|
|
margin-left: -1px;
|
|
border-radius: 4px;
|
|
transition: 200ms ease box-shadow;
|
|
box-shadow: 0px 4px 8px 4px rgba(0, 0, 0, 0.02);
|
|
:hover {
|
|
transition: 200ms ease box-shadow;
|
|
box-shadow: 0px 10px 40px 20px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
a {
|
|
color: ${Constants.system.moonstone};
|
|
|
|
:hover {
|
|
color: ${Constants.system.pitchBlack};
|
|
font-color: ${Constants.system.pitchBlack};
|
|
background-color: transparent;
|
|
text-decoration: none;
|
|
}
|
|
|
|
:active {
|
|
color: ${Constants.system.pitchBlack};
|
|
background-color: transparent;
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
`;
|
|
|
|
const STYLES_SLATE_CARD_GRAY = css`
|
|
width: 100%;
|
|
height: calc(100vh / 2);
|
|
margin-left: -1px;
|
|
box-shadow: 0px 4px 80px 4px rgba(0, 0, 0, 0.1);
|
|
text-decoration: none;
|
|
transition: 200ms ease box-shadow;
|
|
border-radius: 4px;
|
|
|
|
a {
|
|
color: ${Constants.system.pitchBlack};
|
|
transition: 200ms ease all;
|
|
|
|
:hover,
|
|
:active {
|
|
color: ${Constants.system.pitchBlack};
|
|
background-color: transparent;
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
`;
|
|
|
|
const STYLES_SLATE_CARD_TEXT = css`
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
align-items: left;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 12px;
|
|
`;
|
|
|
|
const STYLES_SLATE_CARD_TITLE = css`
|
|
padding: 12px;
|
|
font-size: 1.25rem;
|
|
text-align: left;
|
|
width: 100%;
|
|
|
|
@media (max-width: ${Constants.sizes.mobile}px) {
|
|
padding: 0px;
|
|
font-size: 1rem;
|
|
}
|
|
`;
|
|
|
|
const STYLES_SLATE_CARD_CTA_TITLE = css`
|
|
font-size: 3.815rem;
|
|
text-align: left;
|
|
line-height: 1.25;
|
|
padding: 12px;
|
|
overflow-wrap: break-word;
|
|
width: 100%;
|
|
color: ${Constants.system.darkGray};
|
|
|
|
@media (max-width: ${Constants.sizes.tablet}px) {
|
|
font-size: 3.052rem;
|
|
}
|
|
@media (max-width: ${Constants.sizes.mobile}px) {
|
|
font-size: 1.953rem;
|
|
padding: 0px 0px 8px 0px;
|
|
}
|
|
`;
|
|
|
|
const STYLES_SLATE_CARD_EXPLAINER = css`
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
padding: 12px;
|
|
@media (max-width: ${Constants.sizes.mobile}px) {
|
|
padding: 0px;
|
|
font-size: 1rem;
|
|
}
|
|
`;
|
|
|
|
const STYLES_SLATE_CARD_PARAGRAPH = css`
|
|
font-size: 12px;
|
|
text-align: left;
|
|
text-decoration: none;
|
|
|
|
@media (max-width: ${Constants.sizes.mobile}px) {
|
|
font-size: 0.78rem;
|
|
}
|
|
`;
|
|
|
|
const STYLES_SLATE_CARD_CTA_PARAGRAPH = css`
|
|
font-size: 1.25rem;
|
|
text-align: left;
|
|
|
|
@media (max-width: ${Constants.sizes.mobile}px) {
|
|
font-size: 1rem;
|
|
}
|
|
`;
|
|
const STYLES_SLATE_CARD_URBAN_GARDENS = css`
|
|
border-radius: 4px;
|
|
height: 100%;
|
|
:hover {
|
|
background-image: url(https://slate.textile.io/ipfs/bafybeiff7y4kz4e2z4nfso4nsgdbkfsyroa62jvvldoxafuaf34m7lticu);
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
opacity: 0.5;
|
|
}
|
|
`;
|
|
const STYLES_SLATE_CARD_SHAPES_LETTERS = css`
|
|
borderradius: 4px;
|
|
height: 100%;
|
|
:hover {
|
|
background-image: url(https://slate.textile.io/ipfs/bafybeifgxtl7mq5djnorxedzi35hkizjmbjvdy3nnoitd3xvdnqpmruxbm);
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
opacity: 0.5;
|
|
}
|
|
`;
|
|
const STYLES_SLATE_CARD_MOUNTIANS = css`
|
|
border-radius: 4px;
|
|
height: 100%;
|
|
:hover {
|
|
background-image: url(https://slate.textile.io/ipfs/bafkreies6uykgocrkunrsndxfubntyqvfqzo5wuwyos42vak6d4qnvtdn4);
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
opacity: 0.5;
|
|
}
|
|
`;
|
|
const STYLES_SLATE_CARD_LOOM = css`
|
|
border-radius: 4px;
|
|
height: 100%;
|
|
:hover {
|
|
background-image: url(https://slate.textile.io/ipfs/bafybeifl5xzy4vjctrsr3jywdlv5ceq3hpaadhcii2ekjx2gljyagveqna);
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
opacity: 0.5;
|
|
}
|
|
`;
|
|
const STYLES_SLATE_CARD_BRAND = css`
|
|
border-radius: 4px;
|
|
height: 100%;
|
|
:hover {
|
|
background-image: url(https://slate.textile.io/ipfs/bafybeiaerbu2nivrgncqtwgwom27caji25netswvjbo6tcmbka47ucmupa);
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
opacity: 0.5;
|
|
}
|
|
`;
|
|
const STYLES_SLATE_CARD_UNDERGROUND = css`
|
|
border-radius: 4px;
|
|
height: 100%;
|
|
:hover {
|
|
background-image: url(https://slate.textile.io/ipfs/bafybeieblkyt6d7wg4xmltshvxm6w7tz4c3zjpjuu4yfhiak36debqccda);
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
opacity: 0.5;
|
|
}
|
|
`;
|
|
const STYLES_SLATE_CARD_MONET = css`
|
|
border-radius: 4px;
|
|
height: 100%;
|
|
:hover {
|
|
background-image: url(https://slate.textile.io/ipfs/bafkreieb4yfiamtipapmhoihl547lxeod2vfku67dimrhmab5tcglr5bli);
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
opacity: 0.5;
|
|
}
|
|
`;
|
|
const STYLES_SLATE_CARD_BOOK_SHELF = css`
|
|
border-radius: 4px;
|
|
height: 100%;
|
|
:hover {
|
|
background-image: url(https://slate.textile.io/ipfs/bafkreihe7ismqfyytekj6yvbv6mpbc5de3gozk6n7a47smodbcsnrhbpri);
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
opacity: 0.5;
|
|
}
|
|
`;
|
|
const STYLES_SLATE_CARD_PAPERS = css`
|
|
border-radius: 4px;
|
|
height: 100%;
|
|
:hover {
|
|
background-image: url(https://slate.textile.io/ipfs/bafkreif7l2vxkvdyrydcjwjjrrmqq73id3tdrdkf3z54tp2fotc75wkdwm);
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
opacity: 0.5;
|
|
}
|
|
`;
|
|
|
|
export const getServerSideProps = async (context) => {
|
|
return {
|
|
props: { ...context.query },
|
|
};
|
|
};
|
|
|
|
export default class IndexPage extends React.Component {
|
|
async componentDidMount() {
|
|
const response = await Actions.health();
|
|
console.log("HEALTH_CHECK", response);
|
|
}
|
|
|
|
render() {
|
|
const title = `Slate`;
|
|
const description =
|
|
"Welcome to the future of file sharing. Powered by Textile, Filecoin, and IPFS.";
|
|
const url = "https://slate.host";
|
|
return (
|
|
<WebsitePrototypeWrapper
|
|
title={title}
|
|
description={description}
|
|
url={url}
|
|
>
|
|
<WebsitePrototypeHeader />
|
|
<div css={STYLES_ROOT}>
|
|
<section css={STYLES_SECTION_HERO}>
|
|
<div css={STYLES_TEXT_BLOCK}>
|
|
<h1 css={STYLES_H1}>
|
|
A file storage network <br />
|
|
for you, your files, <br />
|
|
and your friends.
|
|
</h1>
|
|
|
|
<div css={STYLES_ACTIONS_RIGHT}>
|
|
<div
|
|
css={STYLES_BUTTON_PRIMARY}
|
|
onClick={() => window.open("/_")}
|
|
>
|
|
Use Slate
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<br />
|
|
<video
|
|
css={STYLES_VIDEO_BIG}
|
|
autoPlay
|
|
loop
|
|
muted
|
|
src="https://slate.textile.io/ipfs/bafybeidfr2x5ftxzixjxtrgiqm6iuotzip25tlrpase226jog3tqenqd4a"
|
|
type="video/m4v"
|
|
playsInline
|
|
style={{
|
|
backgroundImage: `url('https://slate.textile.io/ipfs/bafybeict43te7wcy7pdw3v45dwwedwxw7yjthbytdsja6dpsiqkgil7iey')`,
|
|
borderRadius: `4px`,
|
|
width: `100%`,
|
|
boxShadow: `0px 10px 50px 20px rgba(0, 0, 0, 0.1)`,
|
|
backgroundSize: `cover`,
|
|
}}
|
|
/>
|
|
<div css={STYLES_TEXT_BLOCK}>
|
|
<h2 css={STYLES_H2}>
|
|
Slate{" "}
|
|
<span css={STYLES_HIGHLIGHT}>
|
|
is a{" "}
|
|
<a
|
|
css={STYLES_LINK}
|
|
href={"https://github.com/filecoin-project/slate"}
|
|
target="_blank"
|
|
>
|
|
fully open-source
|
|
</a>{" "}
|
|
file sharing network designed for research and collaboration.
|
|
</span>
|
|
<br />
|
|
<br />
|
|
<span css={STYLES_HIGHLIGHT}>Store</span> your data,
|
|
<br />
|
|
<span css={STYLES_HIGHLIGHT}>organize</span> it any way you
|
|
like, <br />
|
|
<span css={STYLES_HIGHLIGHT}>and share</span> it with the world
|
|
securely.
|
|
<br />
|
|
<br />
|
|
</h2>
|
|
<h3 css={STYLES_H3}>Powered by</h3>
|
|
<h2 css={STYLES_H2}>
|
|
<span css={STYLES_HIGHLIGHT}>
|
|
<a
|
|
href="https://textile.io"
|
|
css={STYLES_LINK}
|
|
target="_blank"
|
|
>
|
|
Textile
|
|
</a>{" "}
|
|
<br />
|
|
<a
|
|
href="https://filecoin.io"
|
|
css={STYLES_LINK}
|
|
target="_blank"
|
|
>
|
|
Filecoin
|
|
</a>
|
|
<br />
|
|
<a href="https://ipfs.io" css={STYLES_LINK} target="_blank">
|
|
IPFS
|
|
</a>
|
|
</span>
|
|
</h2>
|
|
</div>
|
|
</section>
|
|
<section css={STYLES_SECTION_SLATE}>
|
|
<div css={STYLES_TEXT_BLOCK}>
|
|
<h1 css={STYLES_H1}>
|
|
A new home
|
|
<br />{" "}
|
|
<span css={STYLES_HIGHLIGHT}>
|
|
for your images, videos, audio, ePUBs, and PDFs{" "}
|
|
</span>
|
|
</h1>
|
|
<h3 css={STYLES_H3} style={{ marginBottom: 48 }}>
|
|
<span css={STYLES_HIGHLIGHT}>Easily upload </span>any kind of
|
|
media file to your storage system.
|
|
<br />
|
|
</h3>
|
|
<div css={STYLES_FILETYPE}>
|
|
<div css={STYLES_FILETYPE_GRID_ITEM}>
|
|
<video
|
|
autoPlay
|
|
loop
|
|
muted
|
|
css={STYLES_VIDEO_SMALL}
|
|
src="https://slate.textile.io/ipfs/bafybeiawzns4vxqp3llkzmc4shvytzpurysh26yj3aljde4d4fsgf7wlze"
|
|
type="video/mp4"
|
|
playsInline
|
|
style={{
|
|
backgroundImage: `url('https://slate.textile.io/ipfs/bafybeihez3rtyqqftx7mkyktwozyqjkwdtk2kglxqjc4zspah26bva3yk4')`,
|
|
backgroundSize: `cover`,
|
|
borderRadius: `4px`,
|
|
boxShadow: `0px 10px 50px 20px rgba(0, 0, 0, 0.1)`,
|
|
}}
|
|
/>
|
|
</div>
|
|
<div css={STYLES_FILETYPE_GRID_ITEM}>
|
|
<video
|
|
autoPlay
|
|
loop
|
|
muted
|
|
css={STYLES_VIDEO_SMALL}
|
|
src="https://slate.textile.io/ipfs/bafybeiczug4d6uyr4pkejdwirkeffbzkkzrbaprxvreid6iitw3pmjzq3q"
|
|
type="video/mp4"
|
|
playsInline
|
|
style={{
|
|
backgroundImage: `url('https://slate.textile.io/ipfs/bafybeidnt2l3lslxi7ofkxs5ffncsh4fw5h2ohbukxumngrqj5pdrooaou')`,
|
|
backgroundSize: `cover`,
|
|
borderRadius: `4px`,
|
|
boxShadow: `0px 10px 50px 20px rgba(0, 0, 0, 0.1)`,
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div css={STYLES_FILETYPE}>
|
|
<div css={STYLES_FILETYPE_GRID_ITEM}>
|
|
<video
|
|
autoPlay
|
|
loop
|
|
muted
|
|
css={STYLES_VIDEO_SMALL}
|
|
src="https://slate.textile.io/ipfs/bafkreid7wl4443p764ozdlqtodh7dmsej6ffayp4tc3lr3hil2qkclrohi"
|
|
type="video/mp4"
|
|
playsInline
|
|
style={{
|
|
backgroundImage: `url('https://slate.textile.io/ipfs/bafkreibb3onijljnmonrbs7qguimjf5qwbnkx3m33pouxbtar2yb7hupti')`,
|
|
backgroundSize: `cover`,
|
|
borderRadius: `4px`,
|
|
boxShadow: `0px 10px 50px 20px rgba(0, 0, 0, 0.1)`,
|
|
}}
|
|
/>
|
|
</div>
|
|
<div css={STYLES_FILETYPE_GRID_ITEM}>
|
|
<video
|
|
autoPlay
|
|
loop
|
|
muted
|
|
css={STYLES_VIDEO_SMALL}
|
|
src="https://slate.textile.io/ipfs/bafybeicjovnsnhvt7xwjw3igdwwpb4ms2m23fayoydj3oevrwyi7dzjtga"
|
|
type="video/mp4"
|
|
playsInline
|
|
style={{
|
|
backgroundImage: `url('https://slate.textile.io/ipfs/bafkreihu7k46n6eixx6sxjv7aolou5bgvksvb7ryju3gbwie22t6r2dhli')`,
|
|
backgroundSize: `cover`,
|
|
borderRadius: `4px`,
|
|
boxShadow: `0px 10px 50px 20px rgba(0, 0, 0, 0.1)`,
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section css={STYLES_SECTION_SLATE}>
|
|
<div css={STYLES_TEXT_BLOCK}>
|
|
<h1 css={STYLES_H1}>
|
|
Upload from <br />
|
|
<span css={STYLES_HIGHLIGHT}>anywhere</span>
|
|
</h1>
|
|
<h3 css={STYLES_H3}>
|
|
<span css={STYLES_HIGHLIGHT}>The Slate Chrome extension</span>{" "}
|
|
lets you seamlessly upload files to your slates from anywhere on
|
|
the web.
|
|
</h3>
|
|
</div>
|
|
<div>
|
|
<img
|
|
css={STYLES_MEDIA_LEFT}
|
|
src="https://slate.textile.io/ipfs/bafybeig46uuyp3fkjpk2edeqlmt26r3rxdola52dy7kbgvjms6olyucjdu"
|
|
alt="Slate Web Clipper being used in chrome dropdown menu"
|
|
/>
|
|
</div>
|
|
</section>
|
|
|
|
<section css={STYLES_SECTION_SLATE}>
|
|
<div css={STYLES_TEXT_BLOCK}>
|
|
<h1 css={STYLES_H1}>
|
|
<span css={STYLES_HIGHLIGHT}>
|
|
Organize <br />
|
|
and publish
|
|
</span>
|
|
</h1>
|
|
<h3 css={STYLES_H3}>
|
|
<span css={STYLES_HIGHLIGHT}>A modular interface</span> for your
|
|
files, giving you complete flexibility.
|
|
</h3>
|
|
<br />
|
|
<br />
|
|
<br />
|
|
<h2 css={STYLES_H2}>Create moodboards</h2>
|
|
|
|
<video
|
|
css={STYLES_VIDEO_BIG}
|
|
autoPlay
|
|
loop
|
|
muted
|
|
src="https://slate.textile.io/ipfs/bafybeiagnzwfvdsqqxamlpru2fulmwzlgaqtg4ys4gs4wfnm5rq75c2cs4"
|
|
type="video/mp4"
|
|
playsInline
|
|
style={{
|
|
backgroundImage: `url('https://slate.textile.io/ipfs/bafybeicoaponp2nv3ikpsjgcgu7pio6aercflsvsiyxrpaonza7ncg73dq')`,
|
|
backgroundSize: `cover`,
|
|
borderRadius: `4px`,
|
|
boxShadow: `0px 10px 50px 20px rgba(0, 0, 0, 0.1)`,
|
|
}}
|
|
/>
|
|
|
|
<h2 css={STYLES_H2}>Organize research</h2>
|
|
|
|
<video
|
|
css={STYLES_VIDEO_BIG}
|
|
autoPlay
|
|
loop
|
|
muted
|
|
src="https://slate.textile.io/ipfs/bafybeigstyjfpzazdlmgkfuhw4yxrneux3opvbls7nmv6gq7dbnhmy6xwy"
|
|
type="video/mp4"
|
|
playsInline
|
|
style={{
|
|
backgroundImage: `url('https://slate.textile.io/ipfs/bafybeie4p45yfvbjdzc2rgw67e7crcltpu7o544xtugs3wyv3qh3t3oegi')`,
|
|
backgroundSize: `cover`,
|
|
borderRadius: `4px`,
|
|
boxShadow: `0px 10px 50px 20px rgba(0, 0, 0, 0.1)`,
|
|
}}
|
|
/>
|
|
|
|
<h2 css={STYLES_H2}>Share presentations</h2>
|
|
|
|
<video
|
|
css={STYLES_VIDEO_BIG}
|
|
autoPlay
|
|
loop
|
|
muted
|
|
src="https://slate.textile.io/ipfs/bafybeiampkmsxeihxnuz2hkgbhtzosgkwghslpwm7dsrxrzlqwa7tvzreq"
|
|
type="video/mp4"
|
|
playsInline
|
|
style={{
|
|
backgroundImage: `url('https://slate.textile.io/ipfs/bafkreiglefskwq7bpa3aazihegawd4qwxockl6shipnps7zlokrbnu4f7u')`,
|
|
backgroundSize: `cover`,
|
|
borderRadius: `4px`,
|
|
boxShadow: `0px 10px 50px 20px rgba(0, 0, 0, 0.1)`,
|
|
}}
|
|
/>
|
|
</div>
|
|
</section>
|
|
|
|
<section css={STYLES_SECTION_SLATE}>
|
|
<div css={STYLES_TEXT_BLOCK}>
|
|
<h1 css={STYLES_H1}>
|
|
<span css={STYLES_HIGHLIGHT}>
|
|
Collaborate <br />
|
|
and connect
|
|
</span>
|
|
</h1>
|
|
<h3 css={STYLES_H3}>
|
|
<span css={STYLES_HIGHLIGHT}>A file sharing network</span> built
|
|
on top of a storage system making it possible to connect with
|
|
other people on the Filecoin network.
|
|
</h3>
|
|
</div>
|
|
|
|
<div>
|
|
<video
|
|
css={STYLES_VIDEO_BIG}
|
|
autoPlay
|
|
loop
|
|
muted
|
|
src="https://slate.textile.io/ipfs/bafybeih63zq5f7htbhkmrog447ybytyid2yi6fix4k6z3pbegxpcq2r2qa"
|
|
type="video/mp4"
|
|
playsInline
|
|
style={{
|
|
backgroundImage: `url('https://slate.textile.io/ipfs/bafkreiagwjqvmisseb6voj7cwd3lhjudigkel63hqg6efpqjmhlfv5ucj4')`,
|
|
backgroundSize: `cover`,
|
|
borderRadius: `4px`,
|
|
boxShadow: `0px 10px 50px 20px rgba(0, 0, 0, 0.1)`,
|
|
}}
|
|
/>
|
|
</div>
|
|
</section>
|
|
|
|
<section css={STYLES_SECTION_SLATE}>
|
|
<div css={STYLES_TEXT_BLOCK}>
|
|
<h1 css={STYLES_H1}>
|
|
Built on <br />
|
|
<span css={STYLES_HIGHLIGHT}>
|
|
trust, privacy, <br />
|
|
and security
|
|
</span>
|
|
</h1>
|
|
<h3 css={STYLES_H3}>
|
|
<span css={STYLES_HIGHLIGHT}>
|
|
Slate is built on Filecoin and IPFS
|
|
</span>{" "}
|
|
— technologies built around ownership and transparency for the
|
|
future of the web.
|
|
</h3>
|
|
<a
|
|
css={STYLES_LINK_WHITE}
|
|
href="https://filecoin.io"
|
|
target="_blank"
|
|
>
|
|
Learn more about Filecoin ->
|
|
</a>
|
|
</div>
|
|
z
|
|
<div>
|
|
<img
|
|
css={STYLES_MEDIA_RIGHT_OVERLAP}
|
|
src="https://slate.textile.io/ipfs/bafybeiaex6rorqtumulc4x3u4sbl5pdbn5sx45mvm6uvbebu4cxgk3okjy"
|
|
alt="Slate logo in frosted cube"
|
|
/>
|
|
</div>
|
|
</section>
|
|
|
|
<section css={STYLES_SECTION_SLATE_WALL}>
|
|
<div css={STYLES_SLATE_CARD_GRAY}>
|
|
<a
|
|
css={STYLES_SLATE_CARD_PARAGRAPH}
|
|
href="https://slate.host/_"
|
|
target="_blank"
|
|
>
|
|
<div css={STYLES_SLATE_CARD_TEXT}>
|
|
<h1 css={STYLES_SLATE_CARD_CTA_TITLE}>
|
|
Join us <br />
|
|
<span css={STYLES_HIGHLIGHT_BLACK}>
|
|
in our open & secure network
|
|
</span>
|
|
</h1>
|
|
<div css={STYLES_SLATE_CARD_EXPLAINER}>
|
|
<div css={STYLES_SLATE_CARD_CTA_PARAGRAPH}>
|
|
Create your first slate
|
|
</div>
|
|
<div css={STYLES_SLATE_CARD_CTA_PARAGRAPH}>-></div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<br />
|
|
<br />
|
|
<div css={STYLES_SLATE_CARD_GROUP}>
|
|
<div css={STYLES_SLATE_CARD}>
|
|
<div css={STYLES_SLATE_CARD_URBAN_GARDENS}>
|
|
<a
|
|
css={STYLES_SLATE_CARD_PARAGRAPH}
|
|
href="https://slate.host/gndclouds/urban-gardens"
|
|
target="_blank"
|
|
>
|
|
<div css={STYLES_SLATE_CARD_TEXT}>
|
|
<div css={STYLES_SLATE_CARD_TITLE}>Urban gardens</div>
|
|
<div css={STYLES_SLATE_CARD_EXPLAINER}>
|
|
<div css={STYLES_SLATE_CARD_PARAGRAPH}>@gndclouds</div>
|
|
<div css={STYLES_SLATE_CARD_PARAGRAPH}>-></div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div css={STYLES_SLATE_CARD}>
|
|
<div css={STYLES_SLATE_CARD_SHAPES_LETTERS}>
|
|
<a
|
|
css={STYLES_SLATE_CARD_PARAGRAPH}
|
|
href="https://slate.host/haris/shapes-and-letters"
|
|
target="_blank"
|
|
>
|
|
<div css={STYLES_SLATE_CARD_TEXT}>
|
|
<div css={STYLES_SLATE_CARD_TITLE}>
|
|
Shapes and letters
|
|
</div>
|
|
<div css={STYLES_SLATE_CARD_EXPLAINER}>
|
|
<div css={STYLES_SLATE_CARD_PARAGRAPH}>@haris</div>
|
|
<div css={STYLES_SLATE_CARD_PARAGRAPH}>-></div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div css={STYLES_SLATE_CARD}>
|
|
<div css={STYLES_SLATE_CARD_MOUNTIANS}>
|
|
<a
|
|
css={STYLES_SLATE_CARD_PARAGRAPH}
|
|
href="https://slate.host/jason/mountains"
|
|
target="_blank"
|
|
>
|
|
<div css={STYLES_SLATE_CARD_TEXT}>
|
|
<div css={STYLES_SLATE_CARD_TITLE}>Mountains</div>
|
|
<div css={STYLES_SLATE_CARD_EXPLAINER}>
|
|
<div css={STYLES_SLATE_CARD_PARAGRAPH}>@jason</div>
|
|
<div css={STYLES_SLATE_CARD_PARAGRAPH}>-></div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div css={STYLES_SLATE_CARD_GROUP}>
|
|
<div css={STYLES_SLATE_CARD}>
|
|
<div css={STYLES_SLATE_CARD_LOOM}>
|
|
<a
|
|
css={STYLES_SLATE_CARD_PARAGRAPH}
|
|
href="https://slate.host/tara/loom"
|
|
target="_blank"
|
|
>
|
|
<div css={STYLES_SLATE_CARD_TEXT}>
|
|
<div css={STYLES_SLATE_CARD_TITLE}>Loom</div>
|
|
<div css={STYLES_SLATE_CARD_EXPLAINER}>
|
|
<div css={STYLES_SLATE_CARD_PARAGRAPH}>@tara</div>
|
|
<div css={STYLES_SLATE_CARD_PARAGRAPH}>-></div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div css={STYLES_SLATE_CARD}>
|
|
<div css={STYLES_SLATE_CARD_BRAND}>
|
|
<a
|
|
css={STYLES_SLATE_CARD_PARAGRAPH}
|
|
href="https://slate.host/slate/brand"
|
|
target="_blank"
|
|
>
|
|
<div css={STYLES_SLATE_CARD_TEXT}>
|
|
<div css={STYLES_SLATE_CARD_TITLE}>Brand</div>
|
|
<div css={STYLES_SLATE_CARD_EXPLAINER}>
|
|
<div css={STYLES_SLATE_CARD_PARAGRAPH}>@slate</div>
|
|
<div css={STYLES_SLATE_CARD_PARAGRAPH}>-></div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div css={STYLES_SLATE_CARD}>
|
|
<div css={STYLES_SLATE_CARD_UNDERGROUND}>
|
|
<a
|
|
css={STYLES_SLATE_CARD_PARAGRAPH}
|
|
href="https://slate.host/tcosta/montreal-underground"
|
|
target="_blank"
|
|
>
|
|
<div css={STYLES_SLATE_CARD_TEXT}>
|
|
<div css={STYLES_SLATE_CARD_TITLE}>
|
|
Montreal underground
|
|
</div>
|
|
<div css={STYLES_SLATE_CARD_EXPLAINER}>
|
|
<div css={STYLES_SLATE_CARD_PARAGRAPH}>@tcosta</div>
|
|
<div css={STYLES_SLATE_CARD_PARAGRAPH}>-></div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div css={STYLES_SLATE_CARD_GROUP}>
|
|
<div css={STYLES_SLATE_CARD}>
|
|
<div css={STYLES_SLATE_CARD_MONET}>
|
|
<a
|
|
css={STYLES_SLATE_CARD_PARAGRAPH}
|
|
href="https://slate.host/slate/monet"
|
|
target="_blank"
|
|
>
|
|
<div css={STYLES_SLATE_CARD_TEXT}>
|
|
<div css={STYLES_SLATE_CARD_TITLE}>Monet</div>
|
|
<div css={STYLES_SLATE_CARD_EXPLAINER}>
|
|
<div css={STYLES_SLATE_CARD_PARAGRAPH}>@slate</div>
|
|
<div css={STYLES_SLATE_CARD_PARAGRAPH}>-></div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div css={STYLES_SLATE_CARD}>
|
|
<div css={STYLES_SLATE_CARD_BOOK_SHELF}>
|
|
<a
|
|
css={STYLES_SLATE_CARD_PARAGRAPH}
|
|
href="https://slate.host/haris/book-shelf"
|
|
target="_blank"
|
|
>
|
|
<div css={STYLES_SLATE_CARD_TEXT}>
|
|
<div css={STYLES_SLATE_CARD_TITLE}>Book shelf</div>
|
|
<div css={STYLES_SLATE_CARD_EXPLAINER}>
|
|
<div css={STYLES_SLATE_CARD_PARAGRAPH}>@haris</div>
|
|
<div css={STYLES_SLATE_CARD_PARAGRAPH}>-></div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div css={STYLES_SLATE_CARD}>
|
|
<div css={STYLES_SLATE_CARD_PAPERS}>
|
|
<a
|
|
css={STYLES_SLATE_CARD_PARAGRAPH}
|
|
href="https://slate.host/slate/papers"
|
|
target="_blank"
|
|
>
|
|
<div css={STYLES_SLATE_CARD_TEXT}>
|
|
<div css={STYLES_SLATE_CARD_TITLE}>Papers</div>
|
|
<div css={STYLES_SLATE_CARD_EXPLAINER}>
|
|
<div css={STYLES_SLATE_CARD_PARAGRAPH}>@slate</div>
|
|
<div css={STYLES_SLATE_CARD_PARAGRAPH}>-></div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
<WebsitePrototypeFooter />
|
|
</WebsitePrototypeWrapper>
|
|
);
|
|
}
|
|
}
|