first draft of landing page
@ -12,7 +12,7 @@ const STYLES_CONTAINER = css`
|
||||
display: flex;
|
||||
align-items: top;
|
||||
justify-content: top;
|
||||
padding: 48px 24px;
|
||||
padding: 48px 88px;
|
||||
background-color: ${Constants.system.black};
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
@ -58,8 +58,8 @@ const STYLES_TRADEMARK = css`
|
||||
const transition = {
|
||||
loop: Infinity,
|
||||
ease: "easeInOut",
|
||||
duration: 4
|
||||
}
|
||||
duration: 4,
|
||||
};
|
||||
|
||||
const STYLES_CREDIT = css`
|
||||
flex-shrink: 0;
|
||||
@ -76,9 +76,9 @@ const STYLES_RIGHT = css`
|
||||
align-items: top;
|
||||
justify-content: flex-end;
|
||||
position: absolute;
|
||||
right: 24px;
|
||||
right: 88px;
|
||||
|
||||
color: ${Constants.system.gray};
|
||||
color: ${Constants.system.darkGray};
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
position: absolute;
|
||||
@ -93,15 +93,20 @@ export default (props) => {
|
||||
return (
|
||||
<div css={STYLES_CONTAINER} style={props.style}>
|
||||
<div css={STYLES_LEFT}>
|
||||
<motion.div css={STYLES_TRADEMARK} animate={{ rotateY: 360 }}
|
||||
transition={transition}>
|
||||
<img width = "80px" src="/static/slate.png" />
|
||||
<motion.div
|
||||
css={STYLES_TRADEMARK}
|
||||
animate={{ rotateY: 360 }}
|
||||
transition={transition}
|
||||
>
|
||||
<img width="80px" src="/static/slate.png" />
|
||||
</motion.div>
|
||||
<div css={STYLES_SLATE}>
|
||||
Slate is the gateway to {" "}
|
||||
<a css={STYLES_LINK} href="https://filecoin.io">Filecoin</a> –
|
||||
<br />
|
||||
A new network design we trust.
|
||||
Slate is the gateway to{" "}
|
||||
<a css={STYLES_LINK} href="https://filecoin.io">
|
||||
Filecoin
|
||||
</a>{" "}
|
||||
–
|
||||
<br />A new network design we trust.
|
||||
</div>
|
||||
<div css={STYLES_CREDIT}>
|
||||
Powered by{" "}
|
||||
@ -119,7 +124,7 @@ export default (props) => {
|
||||
<br />
|
||||
<br />
|
||||
<div css={STYLES_RIGHT}>
|
||||
<div style={{ flex:1 }}>
|
||||
<div style={{ marginRight: 48 }}>
|
||||
<b>Reach out</b>
|
||||
<br />
|
||||
<br />
|
||||
@ -133,7 +138,7 @@ export default (props) => {
|
||||
</div>
|
||||
<br />
|
||||
<br />
|
||||
<div style={{ flex:1 }}>
|
||||
<div>
|
||||
Resources
|
||||
<br />
|
||||
<br />
|
||||
@ -141,33 +146,20 @@ export default (props) => {
|
||||
Github
|
||||
</a>
|
||||
<br />
|
||||
<a css={STYLES_LINK} href="https://github.com/filecoin-project/slate/issues">
|
||||
<a
|
||||
css={STYLES_LINK}
|
||||
href="https://github.com/filecoin-project/slate/issues"
|
||||
>
|
||||
Community Guidelines
|
||||
</a>
|
||||
<br />
|
||||
<a css={STYLES_LINK} href="https://github.com/filecoin-project/slate/issues">
|
||||
<a
|
||||
css={STYLES_LINK}
|
||||
href="https://github.com/filecoin-project/slate/issues"
|
||||
>
|
||||
Privacy
|
||||
</a>
|
||||
</div>
|
||||
<br />
|
||||
<br />
|
||||
<div style={{ flex:2 }}>
|
||||
Stay in the looop
|
||||
<br />
|
||||
<br />
|
||||
<a css={STYLES_LINK} href="https://twitter.com/_slate">
|
||||
Github
|
||||
</a>
|
||||
<br />
|
||||
<a css={STYLES_LINK} href="https://github.com/filecoin-project/slate/issues">
|
||||
Community Guidelines
|
||||
</a>
|
||||
<br />
|
||||
<a css={STYLES_LINK} href="https://github.com/filecoin-project/slate/issues">
|
||||
Privacy
|
||||
</a>
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
@ -10,9 +10,13 @@ const STYLES_CONTAINER = css`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 16px 24px;
|
||||
padding: 16px 88px;
|
||||
postion: fixed;
|
||||
top: 0px;
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
z-index: 3;
|
||||
height: 88px;
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
display: block;
|
||||
@ -54,16 +58,27 @@ export default (props) => {
|
||||
return (
|
||||
<div css={STYLES_CONTAINER} style={props.style}>
|
||||
<div css={STYLES_LEFT}>
|
||||
<a css={STYLES_LINK} href="/" style={{ marginRight: 24, fontFamily: Constants.font.codeBold }}>
|
||||
<a
|
||||
css={STYLES_LINK}
|
||||
href="/"
|
||||
style={{ marginRight: 24, fontFamily: Constants.font.codeBold }}
|
||||
>
|
||||
Slate {Constants.values.version}
|
||||
</a>
|
||||
<a css={STYLES_LINK} href="/_/system">
|
||||
Design System
|
||||
</a>
|
||||
</div>
|
||||
<div css={STYLES_RIGHT}>
|
||||
<a css={STYLES_LINK} style={{ marginRight: 24 }} href="/_/system">
|
||||
Design System
|
||||
</a>
|
||||
<a
|
||||
css={STYLES_LINK}
|
||||
style={{ marginRight: 24 }}
|
||||
href="https://github.com/filecoin-project/slate"
|
||||
>
|
||||
Community
|
||||
</a>
|
||||
<a css={STYLES_LINK} href="https://github.com/filecoin-project/slate">
|
||||
View Source
|
||||
Download
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -144,19 +144,32 @@ export default class IndexPage extends React.Component {
|
||||
|
||||
render() {
|
||||
const title = `Slate`;
|
||||
const description = "The place for all of your assets. Powered by Textile and Filecoin.";
|
||||
const description =
|
||||
"The place for all of your assets. Powered by Textile and Filecoin.";
|
||||
const url = "https://slate.host";
|
||||
|
||||
return (
|
||||
<WebsitePrototypeWrapper title={title} description={description} url={url}>
|
||||
<WebsitePrototypeWrapper
|
||||
title={title}
|
||||
description={description}
|
||||
url={url}
|
||||
>
|
||||
<div css={STYLES_ROOT}>
|
||||
<WebsitePrototypeHeader />
|
||||
<div css={STYLES_MIDDLE}>
|
||||
<div css={STYLES_CARD}>
|
||||
<img css={STYLES_CARD_IMAGE} src="/static/social-github-dark.jpg" />
|
||||
<img
|
||||
css={STYLES_CARD_IMAGE}
|
||||
src="/static/social-github-dark.jpg"
|
||||
/>
|
||||
<p css={STYLES_CARD_PARAGRAPH}>
|
||||
Store your files, turn them into collections, and share them with the world — with{" "}
|
||||
<a css={STYLES_LINK} href="https://github.com/filecoin-project/slate" target="_blank">
|
||||
Store your files, turn them into collections, and share them
|
||||
with the world — with{" "}
|
||||
<a
|
||||
css={STYLES_LINK}
|
||||
href="https://github.com/filecoin-project/slate"
|
||||
target="_blank"
|
||||
>
|
||||
Filecoin & Slate
|
||||
</a>
|
||||
.
|
||||
@ -164,15 +177,21 @@ export default class IndexPage extends React.Component {
|
||||
{this.state.available ? (
|
||||
<div css={STYLES_CARD_ACTIONS}>
|
||||
<div css={STYLES_CARD_ACTIONS_LEFT}>
|
||||
Try out our alpha testing application v{Constants.values.version} for Filecoin
|
||||
Try out our alpha testing application v
|
||||
{Constants.values.version} for Filecoin
|
||||
</div>
|
||||
<div css={STYLES_CARD_ACTIONS_RIGHT}>
|
||||
<System.ButtonPrimary onClick={() => window.open("/_")}>Use Slate</System.ButtonPrimary>
|
||||
<System.ButtonPrimary onClick={() => window.open("/_")}>
|
||||
Use Slate
|
||||
</System.ButtonPrimary>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div css={STYLES_CARD_ACTIONS}>
|
||||
<div css={STYLES_CARD_ACTIONS_LEFT} style={{ textAlign: "center" }}>
|
||||
<div
|
||||
css={STYLES_CARD_ACTIONS_LEFT}
|
||||
style={{ textAlign: "center" }}
|
||||
>
|
||||
Slate is currently down for maintenance.
|
||||
</div>
|
||||
</div>
|
||||
|
Before Width: | Height: | Size: 150 KiB After Width: | Height: | Size: 150 KiB |
BIN
public/static/landing/decentralized.png
Normal file
After Width: | Height: | Size: 67 KiB |
BIN
public/static/landing/file-storage-network.jpg
Normal file
After Width: | Height: | Size: 279 KiB |
BIN
public/static/landing/file-storage-network.png
Normal file
After Width: | Height: | Size: 544 KiB |
Before Width: | Height: | Size: 168 KiB After Width: | Height: | Size: 168 KiB |
BIN
public/static/landing/privacy.jpg
Normal file
After Width: | Height: | Size: 279 KiB |
Before Width: | Height: | Size: 96 KiB After Width: | Height: | Size: 96 KiB |
Before Width: | Height: | Size: 11 MiB After Width: | Height: | Size: 11 MiB |
Before Width: | Height: | Size: 144 KiB After Width: | Height: | Size: 144 KiB |
Before Width: | Height: | Size: 145 KiB After Width: | Height: | Size: 145 KiB |
Before Width: | Height: | Size: 146 KiB After Width: | Height: | Size: 146 KiB |
Before Width: | Height: | Size: 440 KiB After Width: | Height: | Size: 440 KiB |
Before Width: | Height: | Size: 196 KiB After Width: | Height: | Size: 196 KiB |
Before Width: | Height: | Size: 172 KiB After Width: | Height: | Size: 172 KiB |
Before Width: | Height: | Size: 130 KiB After Width: | Height: | Size: 130 KiB |
Before Width: | Height: | Size: 77 KiB After Width: | Height: | Size: 77 KiB |
Before Width: | Height: | Size: 52 KiB |
Before Width: | Height: | Size: 1.1 MiB |