Merge pull request #312 from filecoin-project/@tarafanlin/landing

linking terms+chrome extension to landing page and footer
This commit is contained in:
CAKE 2020-09-21 18:23:24 -07:00 committed by GitHub
commit 2aa766a3d4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 82 additions and 159 deletions

View File

@ -105,11 +105,7 @@ export const NewWebsitePrototypeFooter = (props) => {
<div css={STYLES_RIGHT}>
<div style={{ marginRight: 88 }}>
<p css={STYLES_P}>Reach out</p>
<a
css={STYLES_LINK}
href="https://twitter.com/_slate"
target="_blank"
>
<a css={STYLES_LINK} href="https://twitter.com/_slate" target="_blank">
Twitter
</a>
<br />
@ -117,11 +113,7 @@ export const NewWebsitePrototypeFooter = (props) => {
Slack
</a>
<br />
<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">
Github
</a>
</div>
@ -129,29 +121,29 @@ export const NewWebsitePrototypeFooter = (props) => {
<br />
<div>
<p css={STYLES_P}>Resources</p>
<a css={STYLES_LINK} href="/_/system" target="_blank">
<a css={STYLES_LINK} href="/_/system">
Design system
</a>
<br />
<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">
View source
</a>
<br />
<a
css={STYLES_LINK}
href="https://github.com/filecoin-project/slate/issues/126"
target="_blank"
>
<a css={STYLES_LINK} href="/download">
Download
</a>
<br />
<a css={STYLES_LINK} href="https://github.com/filecoin-project/slate/issues/126" target="_blank">
Community
</a>
<br />
<a css={STYLES_LINK} href="/guidelines" target="_blank">
<a css={STYLES_LINK} href="/guidelines">
Guidelines
</a>
<br />
<a css={STYLES_LINK} href="/terms">
Terms
</a>
</div>
</div>
</div>

View File

@ -13,138 +13,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;
@ -620,7 +593,7 @@ export default class IndexPage extends React.Component {
threshold: 0.1,
};
const observer = new IntersectionObserver(function(entries, self) {
const observer = new IntersectionObserver(function (entries, self) {
entries.forEach((entry) => {
if (entry.isIntersecting) {
preloadVideo(entry.target);
@ -636,16 +609,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}>
@ -656,10 +624,7 @@ export default class IndexPage extends React.Component {
</h1>
<div css={STYLES_ACTIONS_RIGHT}>
<div
css={STYLES_BUTTON_PRIMARY}
onClick={() => window.open("/_")}
>
<div css={STYLES_BUTTON_PRIMARY} onClick={() => window.open("/_")}>
Use slate
</div>
</div>
@ -684,11 +649,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.
@ -697,29 +658,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 />
@ -733,14 +684,10 @@ export default class IndexPage extends React.Component {
<div css={STYLES_SECTION_SLATE}>
<div css={STYLES_TEXT_BLOCK}>
<h1 css={STYLES_H1}>
A new home{" "}
<span css={STYLES_HIGHLIGHT}>
for your images, video, audio, ePUBs, and PDFs
</span>
A new home <span css={STYLES_HIGHLIGHT}>for your images, video, 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.
<span css={STYLES_HIGHLIGHT}>Easily upload </span>any kind of media file to your storage system.
<br />
</h3>
</div>
@ -756,9 +703,7 @@ export default class IndexPage extends React.Component {
type="video/mp4"
playsInline
style={{
backgroundImage: `url('${
ASSETS_SMALL[0].backgroundImage
}')`,
backgroundImage: `url('${ASSETS_SMALL[0].backgroundImage}')`,
}}
/>
</div>
@ -772,9 +717,7 @@ export default class IndexPage extends React.Component {
type="video/mp4"
playsInline
style={{
backgroundImage: `url('${
ASSETS_SMALL[1].backgroundImage
}')`,
backgroundImage: `url('${ASSETS_SMALL[1].backgroundImage}')`,
}}
/>
</div>
@ -789,9 +732,7 @@ export default class IndexPage extends React.Component {
type="video/mp4"
playsInline
style={{
backgroundImage: `url('${
ASSETS_SMALL[2].backgroundImage
}')`,
backgroundImage: `url('${ASSETS_SMALL[2].backgroundImage}')`,
}}
/>
</div>
@ -805,9 +746,7 @@ export default class IndexPage extends React.Component {
type="video/mp4"
playsInline
style={{
backgroundImage: `url('${
ASSETS_SMALL[3].backgroundImage
}')`,
backgroundImage: `url('${ASSETS_SMALL[3].backgroundImage}')`,
}}
/>
</div>
@ -820,10 +759,22 @@ 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 css={STYLES_ACTIONS_RIGHT}>
<div
css={STYLES_BUTTON_PRIMARY}
style={{ marginTop: 16 }}
onClick={() =>
window.open(
"https://chrome.google.com/webstore/detail/slate/gloembacbehhbfbkcfjmloikeeaebnoc?hl=en"
)
}
>
Add Slate to Chrome
</div>
</div>
</div>
<div>
<img
@ -840,8 +791,7 @@ 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>
</div>
@ -876,9 +826,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>
@ -891,9 +840,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>
@ -901,21 +848,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 -&gt;
</a>
</div>
@ -927,22 +866,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}>-&gt;</div>
</div>
</div>