mirror of
https://github.com/filecoin-project/slate.git
synced 2024-12-24 17:44:50 +03:00
Merge pull request #268 from filecoin-project/@tarafanlin/marketing
Marketing pages: misc styling + remake table for download page
This commit is contained in:
CAKE
GitHub
commit
2daf6c3012
@ -1,7 +1,6 @@
|
||||
import * as React from "react";
|
||||
import * as Constants from "~/common/constants";
|
||||
import * as Actions from "~/common/actions";
|
||||
import * as System from "~/components/system";
|
||||
|
||||
import { css } from "@emotion/react";
|
||||
|
||||
@ -17,11 +16,14 @@ const STYLES_ROOT = css`
|
||||
|
||||
const STYLES_H1 = css`
|
||||
font-size: ${Constants.typescale.lvl5};
|
||||
font-family: ${Constants.font.medium};
|
||||
font-weight: 400;
|
||||
line-height: 1.3;
|
||||
padding: 0px 0px 24px 0px;
|
||||
letter-spacing: -0.021rem;
|
||||
width: 100%;
|
||||
color: ${Constants.system.slate};
|
||||
|
||||
@media (max-width: ${Constants.sizes.tablet}px) {
|
||||
font-size: ${Constants.typescale.lvl5};
|
||||
padding: 0px 0px 16px 0px;
|
||||
@ -34,9 +36,11 @@ const STYLES_H1 = css`
|
||||
|
||||
const STYLES_H3 = css`
|
||||
font-size: ${Constants.typescale.lvl2};
|
||||
font-family: ${Constants.font.text};
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
letter-spacing: -0.014rem;
|
||||
padding: 0 0 24px 0;
|
||||
padding: 0 0 8px 0;
|
||||
color: ${Constants.system.slate};
|
||||
|
||||
@media (max-width: ${Constants.sizes.tablet}px) {
|
||||
@ -48,17 +52,18 @@ const STYLES_H3 = css`
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_TEXT_BLOCK = css`
|
||||
const STYLES_BLOCK = css`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
max-width: 56vw;
|
||||
width: 100%;
|
||||
align-self: center;
|
||||
margin-bottom: 16px;
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
width: 100%;
|
||||
right: 24px;
|
||||
max-width: 100vw;
|
||||
}
|
||||
`;
|
||||
|
||||
@ -125,7 +130,7 @@ const STYLES_LINK_WHITE = css`
|
||||
|
||||
const STYLES_SECTION_HERO = css`
|
||||
width: 100vw;
|
||||
padding: 30vh 88px 88px 88px;
|
||||
padding: 16vh 88px 88px 88px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
@ -153,6 +158,26 @@ const STYLES_SECTION_WRAPPER = css`
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_TABLE = css`
|
||||
width: 100%;
|
||||
font-size: ${Constants.typescale.lvl0};
|
||||
border-collapse: collapse;
|
||||
text-align: left;
|
||||
`;
|
||||
|
||||
const STYLES_TABLE_ROW = css`
|
||||
font-family: ${Constants.font.text};
|
||||
`;
|
||||
|
||||
const STYLES_TABLE_TOP_ROW = css`
|
||||
font-family: ${Constants.font.semiBold};
|
||||
`;
|
||||
|
||||
const STYLES_TABLE_ITEM = css`
|
||||
border: 1px solid rgba(229, 229, 229, 0.75);
|
||||
padding: 12px;
|
||||
`;
|
||||
|
||||
export const getServerSideProps = async (context) => {
|
||||
return {
|
||||
props: { ...context.query },
|
||||
@ -178,11 +203,11 @@ export default class IndexPage extends React.Component {
|
||||
<WebsitePrototypeHeader color="dark" />
|
||||
<div css={STYLES_ROOT}>
|
||||
<div css={STYLES_SECTION_HERO}>
|
||||
<div css={STYLES_TEXT_BLOCK}>
|
||||
<div css={STYLES_BLOCK}>
|
||||
<h1 css={STYLES_H1}>Slate Chrome Extensions</h1>
|
||||
<h3 css={STYLES_H3}>Take any image on the web and save it to Slate right from your browser tab.</h3>
|
||||
<a src="/">
|
||||
<button css={STYLES_BUTTON_PRIMARY}>Get Chrome Extension</button>
|
||||
<button css={STYLES_BUTTON_PRIMARY}>Get Chrome extension</button>
|
||||
</a>
|
||||
<p css={STYLES_ANNOTATION}>
|
||||
Currently avaible for{" "}
|
||||
@ -191,6 +216,8 @@ export default class IndexPage extends React.Component {
|
||||
</a>
|
||||
.
|
||||
</p>
|
||||
</div>
|
||||
<div css={STYLES_BLOCK}>
|
||||
<img
|
||||
css={STYLES_IMG}
|
||||
src="https://slate.textile.io/ipfs/bafybeibwppu23j5wgshqvm5qyqv3c6pmhp3y5irdwn3ivvnnrpexiguzbi"
|
||||
@ -199,53 +226,35 @@ export default class IndexPage extends React.Component {
|
||||
</div>
|
||||
</div>
|
||||
<div css={STYLES_SECTION_WRAPPER}>
|
||||
<div css={STYLES_TEXT_BLOCK}>
|
||||
<div css={STYLES_BLOCK}>
|
||||
<h1 css={STYLES_H1}>Releases</h1>
|
||||
<h3 css={STYLES_H3}>Slate is built in public and all past releases are always avaible for download.</h3>
|
||||
<System.Table
|
||||
data={{
|
||||
columns: [
|
||||
{ key: "a", name: "Version", width: "15%" },
|
||||
|
||||
{ key: "b", name: "Product", width: "20%" },
|
||||
|
||||
{ key: "c", name: "Date", width: "20%" },
|
||||
|
||||
{
|
||||
key: "d",
|
||||
name: "Download link",
|
||||
copyable: true,
|
||||
width: "45%",
|
||||
},
|
||||
],
|
||||
|
||||
rows: [
|
||||
{
|
||||
id: 1,
|
||||
|
||||
a: "v1.0",
|
||||
|
||||
b: "Chrome Extension",
|
||||
|
||||
c: "2020-09-07",
|
||||
|
||||
d: "Download",
|
||||
},
|
||||
|
||||
{
|
||||
id: 2,
|
||||
|
||||
a: "v1.0",
|
||||
|
||||
b: "Design System",
|
||||
|
||||
c: "2020-09-07",
|
||||
|
||||
d: "Download",
|
||||
},
|
||||
],
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div css={STYLES_BLOCK}>
|
||||
<table css={STYLES_TABLE}>
|
||||
<tr css={STYLES_TABLE_TOP_ROW}>
|
||||
<th css={STYLES_TABLE_ITEM}>Version</th>
|
||||
<th css={STYLES_TABLE_ITEM}>Product</th>
|
||||
<th css={STYLES_TABLE_ITEM}>Date</th>
|
||||
<th css={STYLES_TABLE_ITEM}>Download</th>
|
||||
</tr>
|
||||
<tr css={STYLES_TABLE_ROW}>
|
||||
<td css={STYLES_TABLE_ITEM}>0.1.0</td>
|
||||
<td css={STYLES_TABLE_ITEM}>Chrome Extension</td>
|
||||
<td css={STYLES_TABLE_ITEM}>2020-09-07</td>
|
||||
<td css={STYLES_TABLE_ITEM}>
|
||||
<a href="../public/static/favicon-96x96.png" download>
|
||||
Download
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr css={STYLES_TABLE_ROW}>
|
||||
<td css={STYLES_TABLE_ITEM}>0.1.0</td>
|
||||
<td css={STYLES_TABLE_ITEM}>Design system</td>
|
||||
<td css={STYLES_TABLE_ITEM}>2020-09-07</td>
|
||||
<td css={STYLES_TABLE_ITEM}>Download</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
361
pages/index.js
361
pages/index.js
@ -14,138 +14,111 @@ const USER_SLATES = [
|
||||
name: "Urban gardens",
|
||||
url: "https://slate.host/gndclouds/urban-gardens",
|
||||
username: "gndclouds",
|
||||
preview:
|
||||
"https://slate.textile.io/ipfs/bafybeiff7y4kz4e2z4nfso4nsgdbkfsyroa62jvvldoxafuaf34m7lticu",
|
||||
preview: "https://slate.textile.io/ipfs/bafybeiff7y4kz4e2z4nfso4nsgdbkfsyroa62jvvldoxafuaf34m7lticu",
|
||||
},
|
||||
{
|
||||
name: "Shapes and Letters",
|
||||
url: "https://slate.host/haris/shapes-and-letters",
|
||||
username: "haris",
|
||||
preview:
|
||||
"https://slate.textile.io/ipfs/bafybeifgxtl7mq5djnorxedzi35hkizjmbjvdy3nnoitd3xvdnqpmruxbm",
|
||||
preview: "https://slate.textile.io/ipfs/bafybeifgxtl7mq5djnorxedzi35hkizjmbjvdy3nnoitd3xvdnqpmruxbm",
|
||||
},
|
||||
{
|
||||
name: "Mountains",
|
||||
url: "https://slate.host/jason/mountains",
|
||||
username: "jason",
|
||||
preview:
|
||||
"https://slate.textile.io/ipfs/bafkreies6uykgocrkunrsndxfubntyqvfqzo5wuwyos42vak6d4qnvtdn4",
|
||||
preview: "https://slate.textile.io/ipfs/bafkreies6uykgocrkunrsndxfubntyqvfqzo5wuwyos42vak6d4qnvtdn4",
|
||||
},
|
||||
{
|
||||
name: "Loom",
|
||||
url: "https://slate.host/tara/loom",
|
||||
username: "tara",
|
||||
preview:
|
||||
"https://slate.textile.io/ipfs/bafybeifl5xzy4vjctrsr3jywdlv5ceq3hpaadhcii2ekjx2gljyagveqna",
|
||||
preview: "https://slate.textile.io/ipfs/bafybeifl5xzy4vjctrsr3jywdlv5ceq3hpaadhcii2ekjx2gljyagveqna",
|
||||
},
|
||||
{
|
||||
name: "Brand",
|
||||
url: "https://slate.host/slate/brand",
|
||||
username: "slate",
|
||||
preview:
|
||||
"https://slate.textile.io/ipfs/bafybeiaerbu2nivrgncqtwgwom27caji25netswvjbo6tcmbka47ucmupa",
|
||||
preview: "https://slate.textile.io/ipfs/bafybeiaerbu2nivrgncqtwgwom27caji25netswvjbo6tcmbka47ucmupa",
|
||||
},
|
||||
{
|
||||
name: "Montreal underground",
|
||||
url: "https://slate.host/tcosta/montreal-underground",
|
||||
username: "tcosta",
|
||||
preview:
|
||||
"https://slate.textile.io/ipfs/bafybeieblkyt6d7wg4xmltshvxm6w7tz4c3zjpjuu4yfhiak36debqccda",
|
||||
preview: "https://slate.textile.io/ipfs/bafybeieblkyt6d7wg4xmltshvxm6w7tz4c3zjpjuu4yfhiak36debqccda",
|
||||
},
|
||||
{
|
||||
name: "Monet",
|
||||
url: "https://slate.host/slate/monet",
|
||||
username: "slate",
|
||||
preview:
|
||||
"https://slate.textile.io/ipfs/bafkreieb4yfiamtipapmhoihl547lxeod2vfku67dimrhmab5tcglr5bli",
|
||||
preview: "https://slate.textile.io/ipfs/bafkreieb4yfiamtipapmhoihl547lxeod2vfku67dimrhmab5tcglr5bli",
|
||||
},
|
||||
{
|
||||
name: "Books",
|
||||
url: "https://slate.host/haris/books",
|
||||
username: "haris",
|
||||
preview:
|
||||
"https://slate.textile.io/ipfs/bafkreihe7ismqfyytekj6yvbv6mpbc5de3gozk6n7a47smodbcsnrhbpri",
|
||||
preview: "https://slate.textile.io/ipfs/bafkreihe7ismqfyytekj6yvbv6mpbc5de3gozk6n7a47smodbcsnrhbpri",
|
||||
},
|
||||
{
|
||||
name: "Papers",
|
||||
url: "https://slate.host/slate/papers",
|
||||
username: "slate",
|
||||
preview:
|
||||
"https://slate.textile.io/ipfs/bafkreif7l2vxkvdyrydcjwjjrrmqq73id3tdrdkf3z54tp2fotc75wkdwm",
|
||||
preview: "https://slate.textile.io/ipfs/bafkreif7l2vxkvdyrydcjwjjrrmqq73id3tdrdkf3z54tp2fotc75wkdwm",
|
||||
},
|
||||
];
|
||||
|
||||
const ASSET_HERO = {
|
||||
src:
|
||||
"https://slate.textile.io/ipfs/bafybeidfr2x5ftxzixjxtrgiqm6iuotzip25tlrpase226jog3tqenqd4a",
|
||||
src: "https://slate.textile.io/ipfs/bafybeidfr2x5ftxzixjxtrgiqm6iuotzip25tlrpase226jog3tqenqd4a",
|
||||
backgroundImage: `https://slate.textile.io/ipfs/bafybeict43te7wcy7pdw3v45dwwedwxw7yjthbytdsja6dpsiqkgil7iey`,
|
||||
};
|
||||
|
||||
const ASSET_HERO_COLLABORATE = {
|
||||
src:
|
||||
"https://slate.textile.io/ipfs/bafybeih63zq5f7htbhkmrog447ybytyid2yi6fix4k6z3pbegxpcq2r2qa",
|
||||
backgroundImage:
|
||||
"https://slate.textile.io/ipfs/bafkreiagwjqvmisseb6voj7cwd3lhjudigkel63hqg6efpqjmhlfv5ucj4",
|
||||
src: "https://slate.textile.io/ipfs/bafybeih63zq5f7htbhkmrog447ybytyid2yi6fix4k6z3pbegxpcq2r2qa",
|
||||
backgroundImage: "https://slate.textile.io/ipfs/bafkreiagwjqvmisseb6voj7cwd3lhjudigkel63hqg6efpqjmhlfv5ucj4",
|
||||
};
|
||||
|
||||
const ASSETS_SMALL = [
|
||||
{
|
||||
src:
|
||||
"https://slate.textile.io/ipfs/bafybeiawzns4vxqp3llkzmc4shvytzpurysh26yj3aljde4d4fsgf7wlze",
|
||||
backgroundImage:
|
||||
"https://slate.textile.io/ipfs/bafybeihez3rtyqqftx7mkyktwozyqjkwdtk2kglxqjc4zspah26bva3yk4",
|
||||
src: "https://slate.textile.io/ipfs/bafybeiawzns4vxqp3llkzmc4shvytzpurysh26yj3aljde4d4fsgf7wlze",
|
||||
backgroundImage: "https://slate.textile.io/ipfs/bafybeihez3rtyqqftx7mkyktwozyqjkwdtk2kglxqjc4zspah26bva3yk4",
|
||||
},
|
||||
{
|
||||
src:
|
||||
"https://slate.textile.io/ipfs/bafybeiczug4d6uyr4pkejdwirkeffbzkkzrbaprxvreid6iitw3pmjzq3q",
|
||||
backgroundImage:
|
||||
"https://slate.textile.io/ipfs/bafybeidnt2l3lslxi7ofkxs5ffncsh4fw5h2ohbukxumngrqj5pdrooaou",
|
||||
src: "https://slate.textile.io/ipfs/bafybeiczug4d6uyr4pkejdwirkeffbzkkzrbaprxvreid6iitw3pmjzq3q",
|
||||
backgroundImage: "https://slate.textile.io/ipfs/bafybeidnt2l3lslxi7ofkxs5ffncsh4fw5h2ohbukxumngrqj5pdrooaou",
|
||||
},
|
||||
{
|
||||
src:
|
||||
"https://slate.textile.io/ipfs/bafkreid7wl4443p764ozdlqtodh7dmsej6ffayp4tc3lr3hil2qkclrohi",
|
||||
backgroundImage:
|
||||
"https://slate.textile.io/ipfs/bafkreibb3onijljnmonrbs7qguimjf5qwbnkx3m33pouxbtar2yb7hupti",
|
||||
src: "https://slate.textile.io/ipfs/bafkreid7wl4443p764ozdlqtodh7dmsej6ffayp4tc3lr3hil2qkclrohi",
|
||||
backgroundImage: "https://slate.textile.io/ipfs/bafkreibb3onijljnmonrbs7qguimjf5qwbnkx3m33pouxbtar2yb7hupti",
|
||||
},
|
||||
{
|
||||
src:
|
||||
"https://slate.textile.io/ipfs/bafybeicjovnsnhvt7xwjw3igdwwpb4ms2m23fayoydj3oevrwyi7dzjtga",
|
||||
backgroundImage:
|
||||
"https://slate.textile.io/ipfs/bafkreiefuyyk6dcjhyk3hl2httqvdlnl3mo6wrfzgmponexrc75jop757y",
|
||||
src: "https://slate.textile.io/ipfs/bafybeicjovnsnhvt7xwjw3igdwwpb4ms2m23fayoydj3oevrwyi7dzjtga",
|
||||
backgroundImage: "https://slate.textile.io/ipfs/bafkreiefuyyk6dcjhyk3hl2httqvdlnl3mo6wrfzgmponexrc75jop757y",
|
||||
},
|
||||
];
|
||||
|
||||
const ASSETS_MEDIUM = [
|
||||
{
|
||||
title: "Create moodboards",
|
||||
src:
|
||||
"https://slate.textile.io/ipfs/bafybeib46kplzcylnzviaojgbogua52wyrzbvnj6uulvo4zwrxm4hnxeqe",
|
||||
backgroundImage:
|
||||
"https://slate.textile.io/ipfs/bafybeicoaponp2nv3ikpsjgcgu7pio6aercflsvsiyxrpaonza7ncg73dq",
|
||||
src: "https://slate.textile.io/ipfs/bafybeib46kplzcylnzviaojgbogua52wyrzbvnj6uulvo4zwrxm4hnxeqe",
|
||||
backgroundImage: "https://slate.textile.io/ipfs/bafybeicoaponp2nv3ikpsjgcgu7pio6aercflsvsiyxrpaonza7ncg73dq",
|
||||
},
|
||||
|
||||
{
|
||||
title: "Organize research",
|
||||
src:
|
||||
"https://slate.textile.io/ipfs/bafybeigstyjfpzazdlmgkfuhw4yxrneux3opvbls7nmv6gq7dbnhmy6xwy",
|
||||
backgroundImage:
|
||||
"https://slate.textile.io/ipfs/bafybeie4p45yfvbjdzc2rgw67e7crcltpu7o544xtugs3wyv3qh3t3oegi",
|
||||
src: "https://slate.textile.io/ipfs/bafybeigstyjfpzazdlmgkfuhw4yxrneux3opvbls7nmv6gq7dbnhmy6xwy",
|
||||
backgroundImage: "https://slate.textile.io/ipfs/bafybeie4p45yfvbjdzc2rgw67e7crcltpu7o544xtugs3wyv3qh3t3oegi",
|
||||
},
|
||||
|
||||
{
|
||||
title: "Share presentations",
|
||||
src:
|
||||
"https://slate.textile.io/ipfs/bafybeiampkmsxeihxnuz2hkgbhtzosgkwghslpwm7dsrxrzlqwa7tvzreq",
|
||||
backgroundImage:
|
||||
"https://slate.textile.io/ipfs/bafkreiglefskwq7bpa3aazihegawd4qwxockl6shipnps7zlokrbnu4f7u",
|
||||
src: "https://slate.textile.io/ipfs/bafybeiampkmsxeihxnuz2hkgbhtzosgkwghslpwm7dsrxrzlqwa7tvzreq",
|
||||
backgroundImage: "https://slate.textile.io/ipfs/bafkreiglefskwq7bpa3aazihegawd4qwxockl6shipnps7zlokrbnu4f7u",
|
||||
},
|
||||
];
|
||||
|
||||
const ASSET_CHROME_EXTENSION =
|
||||
"https://slate.textile.io/ipfs/bafybeibwppu23j5wgshqvm5qyqv3c6pmhp3y5irdwn3ivvnnrpexiguzbi";
|
||||
|
||||
const ASSET_SLATE_CUBE =
|
||||
"https://slate.textile.io/ipfs/bafybeiaex6rorqtumulc4x3u4sbl5pdbn5sx45mvm6uvbebu4cxgk3okjy";
|
||||
const ASSET_SLATE_CUBE = "https://slate.textile.io/ipfs/bafybeiaex6rorqtumulc4x3u4sbl5pdbn5sx45mvm6uvbebu4cxgk3okjy";
|
||||
|
||||
const STYLES_ROOT = css`
|
||||
display: flex;
|
||||
@ -165,6 +138,8 @@ const STYLES_LINK = css`
|
||||
|
||||
const STYLES_H1 = css`
|
||||
font-size: ${Constants.typescale.lvl5};
|
||||
font-family: ${Constants.font.medium};
|
||||
font-weight: 400;
|
||||
line-height: 1.3;
|
||||
padding: 0px 0px 24px 0px;
|
||||
letter-spacing: -0.021rem;
|
||||
@ -183,6 +158,8 @@ const STYLES_H1 = css`
|
||||
|
||||
const STYLES_H2 = css`
|
||||
font-size: ${Constants.typescale.lvl3};
|
||||
font-family: ${Constants.font.medium};
|
||||
font-weight: 400;
|
||||
line-height: 1.3;
|
||||
letter-spacing: -0.019rem;
|
||||
padding: 0 0 24px 0;
|
||||
@ -201,6 +178,8 @@ const STYLES_H2 = css`
|
||||
|
||||
const STYLES_H3 = css`
|
||||
font-size: ${Constants.typescale.lvl2};
|
||||
font-family: ${Constants.font.medium};
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
letter-spacing: -0.014rem;
|
||||
padding: 0 0 8px 0;
|
||||
@ -269,16 +248,17 @@ const STYLES_FILETYPE = css`
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
display: block;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_FILETYPE_GRID_ITEM = css`
|
||||
padding: 0 24px 24px 0;
|
||||
width: 50%;
|
||||
width: 25%;
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
width: 100%;
|
||||
width: 50%;
|
||||
padding: 0 0 24px 0;
|
||||
}
|
||||
`;
|
||||
@ -314,10 +294,13 @@ const STYLES_VIDEO_MEDIUM = css`
|
||||
margin: 24px auto 96px auto;
|
||||
border-radius: 4px;
|
||||
width: 100%;
|
||||
max-width: 56vw;
|
||||
box-shadow: 0px 10px 50px 20px rgba(0, 0, 0, 0.1);
|
||||
|
||||
@media (max-width: ${Constants.sizes.tablet}px) {
|
||||
margin: 16px auto 64px auto;
|
||||
width: 100%;
|
||||
max-width: 100vw;
|
||||
}
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
@ -369,10 +352,11 @@ const STYLES_TEXT_BLOCK = css`
|
||||
max-width: 56vw;
|
||||
width: 100%;
|
||||
align-self: center;
|
||||
margin-bottom: 16px;
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
width: 88%;
|
||||
right: 24px;
|
||||
width: 100%;
|
||||
max-width: 100vw;
|
||||
}
|
||||
`;
|
||||
|
||||
@ -486,6 +470,8 @@ const STYLES_SLATE_CARD_TEXT = css`
|
||||
const STYLES_SLATE_CARD_TITLE = css`
|
||||
padding: 12px;
|
||||
font-size: ${Constants.typescale.lvl1};
|
||||
letter-spacing: -0.021rem;
|
||||
font-weight: 400;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
|
||||
@ -497,6 +483,8 @@ const STYLES_SLATE_CARD_TITLE = css`
|
||||
|
||||
const STYLES_SLATE_CARD_CTA_TITLE = css`
|
||||
font-size: ${Constants.typescale.lvl5};
|
||||
font-family: ${Constants.font.medium};
|
||||
font-weight: 400;
|
||||
text-align: left;
|
||||
line-height: 1.25;
|
||||
padding: 12px;
|
||||
@ -597,16 +585,11 @@ export default class IndexPage extends React.Component {
|
||||
|
||||
render() {
|
||||
const title = `Slate`;
|
||||
const description =
|
||||
"Welcome to the future of file sharing. Powered by Textile, Filecoin, and IPFS.";
|
||||
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}
|
||||
>
|
||||
<WebsitePrototypeWrapper title={title} description={description} url={url}>
|
||||
<WebsitePrototypeHeader />
|
||||
<div css={STYLES_ROOT}>
|
||||
<div css={STYLES_SECTION_HERO}>
|
||||
@ -617,11 +600,8 @@ export default class IndexPage extends React.Component {
|
||||
</h1>
|
||||
|
||||
<div css={STYLES_ACTIONS_RIGHT}>
|
||||
<div
|
||||
css={STYLES_BUTTON_PRIMARY}
|
||||
onClick={() => window.open("/_")}
|
||||
>
|
||||
Use Slate
|
||||
<div css={STYLES_BUTTON_PRIMARY} onClick={() => window.open("/_")}>
|
||||
Use slate
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -645,11 +625,7 @@ export default class IndexPage extends React.Component {
|
||||
Slate{" "}
|
||||
<span css={STYLES_HIGHLIGHT}>
|
||||
is a{" "}
|
||||
<a
|
||||
css={STYLES_LINK}
|
||||
href={"https://github.com/filecoin-project/slate"}
|
||||
target="_blank"
|
||||
>
|
||||
<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.
|
||||
@ -658,29 +634,19 @@ export default class IndexPage extends React.Component {
|
||||
<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.
|
||||
<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"
|
||||
>
|
||||
<a href="https://textile.io" css={STYLES_LINK} target="_blank">
|
||||
Textile
|
||||
</a>{" "}
|
||||
<br />
|
||||
<a
|
||||
href="https://filecoin.io"
|
||||
css={STYLES_LINK}
|
||||
target="_blank"
|
||||
>
|
||||
<a href="https://filecoin.io" css={STYLES_LINK} target="_blank">
|
||||
Filecoin
|
||||
</a>
|
||||
<br />
|
||||
@ -707,77 +673,67 @@ export default class IndexPage extends React.Component {
|
||||
</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.
|
||||
<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
|
||||
css={STYLES_VIDEO_SMALL}
|
||||
src={ASSETS_SMALL[0].src}
|
||||
autoPlay
|
||||
loop
|
||||
muted
|
||||
type="video/mp4"
|
||||
playsInline
|
||||
style={{
|
||||
backgroundImage: `url('${
|
||||
ASSETS_SMALL[0].backgroundImage
|
||||
}')`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div css={STYLES_FILETYPE_GRID_ITEM}>
|
||||
<video
|
||||
css={STYLES_VIDEO_SMALL}
|
||||
src={ASSETS_SMALL[1].src}
|
||||
autoPlay
|
||||
loop
|
||||
muted
|
||||
type="video/mp4"
|
||||
playsInline
|
||||
style={{
|
||||
backgroundImage: `url('${
|
||||
ASSETS_SMALL[1].backgroundImage
|
||||
}')`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div css={STYLES_FILETYPE}>
|
||||
<div css={STYLES_FILETYPE_GRID_ITEM}>
|
||||
<video
|
||||
css={STYLES_VIDEO_SMALL}
|
||||
src={ASSETS_SMALL[0].src}
|
||||
autoPlay
|
||||
loop
|
||||
muted
|
||||
type="video/mp4"
|
||||
playsInline
|
||||
style={{
|
||||
backgroundImage: `url('${ASSETS_SMALL[0].backgroundImage}')`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div css={STYLES_FILETYPE}>
|
||||
<div css={STYLES_FILETYPE_GRID_ITEM}>
|
||||
<video
|
||||
css={STYLES_VIDEO_SMALL}
|
||||
src={ASSETS_SMALL[2].src}
|
||||
autoPlay
|
||||
loop
|
||||
muted
|
||||
type="video/mp4"
|
||||
playsInline
|
||||
style={{
|
||||
backgroundImage: `url('${
|
||||
ASSETS_SMALL[2].backgroundImage
|
||||
}')`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div css={STYLES_FILETYPE_GRID_ITEM}>
|
||||
<video
|
||||
css={STYLES_VIDEO_SMALL}
|
||||
src={ASSETS_SMALL[3].src}
|
||||
autoPlay
|
||||
loop
|
||||
muted
|
||||
type="video/mp4"
|
||||
playsInline
|
||||
style={{
|
||||
backgroundImage: `url('${
|
||||
ASSETS_SMALL[3].backgroundImage
|
||||
}')`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div css={STYLES_FILETYPE_GRID_ITEM}>
|
||||
<video
|
||||
css={STYLES_VIDEO_SMALL}
|
||||
src={ASSETS_SMALL[1].src}
|
||||
autoPlay
|
||||
loop
|
||||
muted
|
||||
type="video/mp4"
|
||||
playsInline
|
||||
style={{
|
||||
backgroundImage: `url('${ASSETS_SMALL[1].backgroundImage}')`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div css={STYLES_FILETYPE_GRID_ITEM}>
|
||||
<video
|
||||
css={STYLES_VIDEO_SMALL}
|
||||
src={ASSETS_SMALL[2].src}
|
||||
autoPlay
|
||||
loop
|
||||
muted
|
||||
type="video/mp4"
|
||||
playsInline
|
||||
style={{
|
||||
backgroundImage: `url('${ASSETS_SMALL[2].backgroundImage}')`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div css={STYLES_FILETYPE_GRID_ITEM}>
|
||||
<video
|
||||
css={STYLES_VIDEO_SMALL}
|
||||
src={ASSETS_SMALL[3].src}
|
||||
autoPlay
|
||||
loop
|
||||
muted
|
||||
type="video/mp4"
|
||||
playsInline
|
||||
style={{
|
||||
backgroundImage: `url('${ASSETS_SMALL[3].backgroundImage}')`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -788,9 +744,8 @@ export default class IndexPage extends React.Component {
|
||||
Upload from <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.
|
||||
<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>
|
||||
@ -808,34 +763,33 @@ export default class IndexPage extends React.Component {
|
||||
<span css={STYLES_HIGHLIGHT}>Organize and publish</span>
|
||||
</h1>
|
||||
<h3 css={STYLES_H3}>
|
||||
<span css={STYLES_HIGHLIGHT}>A modular interface</span> for your
|
||||
files, giving you complete flexibility.
|
||||
<span css={STYLES_HIGHLIGHT}>A modular interface</span> for your files, giving you complete flexibility.
|
||||
</h3>
|
||||
<br />
|
||||
<br />
|
||||
</div>
|
||||
|
||||
{ASSETS_MEDIUM.map((each) => {
|
||||
return (
|
||||
<React.Fragment key={each.title}>
|
||||
{ASSETS_MEDIUM.map((each) => {
|
||||
return (
|
||||
<React.Fragment key={each.title}>
|
||||
<div css={STYLES_TEXT_BLOCK}>
|
||||
<h3 css={STYLES_H3}>
|
||||
<span css={STYLES_HIGHLIGHT}>{each.title}</span>
|
||||
</h3>
|
||||
<video
|
||||
css={STYLES_VIDEO_MEDIUM}
|
||||
autoPlay
|
||||
loop
|
||||
muted
|
||||
src={each.src}
|
||||
type="video/mp4"
|
||||
playsInline
|
||||
style={{
|
||||
backgroundImage: `url('${each.backgroundImage}')`,
|
||||
}}
|
||||
/>
|
||||
</React.Fragment>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
<video
|
||||
css={STYLES_VIDEO_MEDIUM}
|
||||
autoPlay
|
||||
loop
|
||||
muted
|
||||
src={each.src}
|
||||
type="video/mp4"
|
||||
playsInline
|
||||
style={{
|
||||
backgroundImage: `url('${each.backgroundImage}')`,
|
||||
}}
|
||||
/>
|
||||
</React.Fragment>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div css={STYLES_SECTION_SLATE}>
|
||||
@ -844,9 +798,8 @@ export default class IndexPage extends React.Component {
|
||||
<span css={STYLES_HIGHLIGHT}>Collaborate 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.
|
||||
<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>
|
||||
|
||||
@ -859,9 +812,7 @@ export default class IndexPage extends React.Component {
|
||||
type="video/mp4"
|
||||
playsInline
|
||||
style={{
|
||||
backgroundImage: `url('${
|
||||
ASSET_HERO_COLLABORATE.backgroundImage
|
||||
}')`,
|
||||
backgroundImage: `url('${ASSET_HERO_COLLABORATE.backgroundImage}')`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
@ -869,21 +820,13 @@ export default class IndexPage extends React.Component {
|
||||
<div css={STYLES_SECTION_SLATE}>
|
||||
<div css={STYLES_TEXT_BLOCK}>
|
||||
<h1 css={STYLES_H1}>
|
||||
Built on{" "}
|
||||
<span css={STYLES_HIGHLIGHT}>trust, privacy, and security</span>
|
||||
Built on <span css={STYLES_HIGHLIGHT}>trust, privacy, 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.
|
||||
<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"
|
||||
>
|
||||
<a css={STYLES_LINK_WHITE} href="https://filecoin.io" target="_blank">
|
||||
Learn more about Filecoin ->
|
||||
</a>
|
||||
</div>
|
||||
@ -895,22 +838,14 @@ export default class IndexPage extends React.Component {
|
||||
|
||||
<div css={STYLES_SECTION_SLATE_WALL}>
|
||||
<div css={STYLES_SLATE_CARD_CTA}>
|
||||
<a
|
||||
css={STYLES_SLATE_CARD_PARAGRAPH}
|
||||
href="https://slate.host/_"
|
||||
target="_blank"
|
||||
>
|
||||
<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>
|
||||
<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}>Create your first slate</div>
|
||||
<div css={STYLES_SLATE_CARD_CTA_PARAGRAPH}>-></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user