mirror of
https://github.com/filecoin-project/slate.git
synced 2024-12-24 01:23:08 +03:00
teaser: pre-launch teaser
This commit is contained in:
jimmylee
parent
f3c85f9cc3
commit
d387be15b0
@ -6,7 +6,7 @@ import { GoogleScript } from "~/common/analytics";
|
||||
|
||||
export default class WebsitePrototypeWrapper extends React.Component {
|
||||
static defaultProps = {
|
||||
image: "/static/art-v2-social.png",
|
||||
image: "/static/new-brand-teaser.png",
|
||||
};
|
||||
|
||||
render() {
|
||||
@ -26,30 +26,12 @@ export default class WebsitePrototypeWrapper extends React.Component {
|
||||
<meta property="twitter:card" content="summary_large_image" />
|
||||
<meta property="twitter:url" content={this.props.url} />
|
||||
<meta property="twitter:title" content={this.props.title} />
|
||||
<meta
|
||||
property="twitter:description"
|
||||
content={this.props.description}
|
||||
/>
|
||||
<meta property="twitter:description" content={this.props.description} />
|
||||
<meta property="twitter:image" content={this.props.image} />
|
||||
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/png"
|
||||
sizes="32x32"
|
||||
href="/static/favicon-32x32.png"
|
||||
/>
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/png"
|
||||
sizes="96x96"
|
||||
href="/static/favicon-96x96.png"
|
||||
/>
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/png"
|
||||
sizes="16x16"
|
||||
href="/static/favicon-16x16.png"
|
||||
/>
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/static/favicon-32x32.png" />
|
||||
<link rel="icon" type="image/png" sizes="96x96" href="/static/favicon-96x96.png" />
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/static/favicon-16x16.png" />
|
||||
|
||||
<link rel="shortcut icon" href="/static/favicon.ico" />
|
||||
<GoogleScript id="UA-52930282-7" />
|
||||
|
||||
@ -99,13 +99,10 @@ const SidebarLink = (props) => {
|
||||
<a
|
||||
css={props.url.includes(props.href) ? STYLES_LINK_ACTIVE : STYLES_LINK}
|
||||
href={props.href}
|
||||
target={props.target}
|
||||
>
|
||||
target={props.target}>
|
||||
{props.title}
|
||||
</a>
|
||||
{props.children ? (
|
||||
<div css={STYLES_DESCRIPTION}>{props.children}</div>
|
||||
) : null}
|
||||
{props.children ? <div css={STYLES_DESCRIPTION}>{props.children}</div> : null}
|
||||
</React.Fragment>
|
||||
);
|
||||
};
|
||||
@ -139,32 +136,17 @@ export default class SystemPage extends React.Component {
|
||||
<meta property="og:url" content={url} />
|
||||
<meta property="og:title" content={title} />
|
||||
<meta property="og:description" content={description} />
|
||||
<meta property="og:image" content="/static/art-v2-social.png" />
|
||||
<meta property="og:image" content="/static/new-brand-teaser.png" />
|
||||
|
||||
<meta property="twitter:card" content="summary_large_image" />
|
||||
<meta property="twitter:url" content={url} />
|
||||
<meta property="twitter:title" content={title} />
|
||||
<meta property="twitter:description" content={description} />
|
||||
<meta property="twitter:image" content="/static/art-v2-social.png" />
|
||||
<meta property="twitter:image" content="/static/new-brand-teaser.png" />
|
||||
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/png"
|
||||
sizes="32x32"
|
||||
href="/static/favicon-32x32.png"
|
||||
/>
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/png"
|
||||
sizes="96x96"
|
||||
href="/static/favicon-96x96.png"
|
||||
/>
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/png"
|
||||
sizes="16x16"
|
||||
href="/static/favicon-16x16.png"
|
||||
/>
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/static/favicon-32x32.png" />
|
||||
<link rel="icon" type="image/png" sizes="96x96" href="/static/favicon-96x96.png" />
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/static/favicon-16x16.png" />
|
||||
|
||||
<link rel="shortcut icon" href="/static/favicon.ico" />
|
||||
|
||||
@ -173,51 +155,15 @@ export default class SystemPage extends React.Component {
|
||||
<div css={STYLES_BODY}>{children}</div>
|
||||
<div css={STYLES_SIDEBAR}>
|
||||
<span css={STYLES_LABEL}>Experiences</span>
|
||||
<SidebarLink
|
||||
url={url}
|
||||
href="/_/experiences/create-address"
|
||||
title="CreateFilecoinAddress"
|
||||
/>
|
||||
<SidebarLink
|
||||
url={url}
|
||||
href="/_/experiences/make-storage-deal"
|
||||
title="CreateFilecoinStorageDeal"
|
||||
/>
|
||||
<SidebarLink
|
||||
url={url}
|
||||
href="/_/experiences/generate-powergate-token"
|
||||
title="CreateToken"
|
||||
/>
|
||||
<SidebarLink
|
||||
url={url}
|
||||
href="/_/experiences/filecoin-wallet-balances"
|
||||
title="FilecoinBalancesList"
|
||||
/>
|
||||
<SidebarLink
|
||||
url={url}
|
||||
href="/_/experiences/list-filecoin-deals"
|
||||
title="FilecoinDealsList"
|
||||
/>
|
||||
<SidebarLink
|
||||
url={url}
|
||||
href="/_/experiences/filecoin-settings"
|
||||
title="FilecoinSettings"
|
||||
/>
|
||||
<SidebarLink
|
||||
url={url}
|
||||
href="/_/experiences/friends-list"
|
||||
title="FriendsList"
|
||||
/>
|
||||
<SidebarLink
|
||||
url={url}
|
||||
href="/_/experiences/peers-list"
|
||||
title="PeersList"
|
||||
/>
|
||||
<SidebarLink
|
||||
url={url}
|
||||
href="/_/experiences/send-address-filecoin"
|
||||
title="SendAddressFilecoin"
|
||||
/>
|
||||
<SidebarLink url={url} href="/_/experiences/create-address" title="CreateFilecoinAddress" />
|
||||
<SidebarLink url={url} href="/_/experiences/make-storage-deal" title="CreateFilecoinStorageDeal" />
|
||||
<SidebarLink url={url} href="/_/experiences/generate-powergate-token" title="CreateToken" />
|
||||
<SidebarLink url={url} href="/_/experiences/filecoin-wallet-balances" title="FilecoinBalancesList" />
|
||||
<SidebarLink url={url} href="/_/experiences/list-filecoin-deals" title="FilecoinDealsList" />
|
||||
<SidebarLink url={url} href="/_/experiences/filecoin-settings" title="FilecoinSettings" />
|
||||
<SidebarLink url={url} href="/_/experiences/friends-list" title="FriendsList" />
|
||||
<SidebarLink url={url} href="/_/experiences/peers-list" title="PeersList" />
|
||||
<SidebarLink url={url} href="/_/experiences/send-address-filecoin" title="SendAddressFilecoin" />
|
||||
|
||||
<span css={STYLES_LABEL}>
|
||||
<br />
|
||||
@ -225,51 +171,23 @@ export default class SystemPage extends React.Component {
|
||||
Components
|
||||
</span>
|
||||
|
||||
<SidebarLink
|
||||
url={url}
|
||||
href="/_/system/avatar-group"
|
||||
title="Avatar Group"
|
||||
/>
|
||||
<SidebarLink url={url} href="/_/system/avatar-group" title="Avatar Group" />
|
||||
<SidebarLink url={url} href="/_/system/buttons" title="Buttons" />
|
||||
<SidebarLink url={url} href="/_/system/card-tabs" title="Card Tabs" />
|
||||
<SidebarLink url={url} href="/_/system/carousel" title="Carousel" />
|
||||
<SidebarLink
|
||||
url={url}
|
||||
href="/_/system/checkboxes"
|
||||
title="Checkboxes"
|
||||
/>
|
||||
<SidebarLink url={url} href="/_/system/checkboxes" title="Checkboxes" />
|
||||
<SidebarLink url={url} href="/_/system/colors" title="Colors" />
|
||||
<SidebarLink
|
||||
url={url}
|
||||
href="/_/system/datepicker"
|
||||
title="Datepicker"
|
||||
/>
|
||||
<SidebarLink url={url} href="/_/system/datepicker" title="Datepicker" />
|
||||
<SidebarLink url={url} href="/_/system/dropdowns" title="Dropdowns" />
|
||||
<SidebarLink url={url} href="/_/system/globe" title="Globe" />
|
||||
<SidebarLink
|
||||
url={url}
|
||||
href="/_/system/hover-tile"
|
||||
title="Hover Tile"
|
||||
/>
|
||||
<SidebarLink url={url} href="/_/system/hover-tile" title="Hover Tile" />
|
||||
<SidebarLink url={url} href="/_/system/icons" title="Icons" />
|
||||
<SidebarLink url={url} href="/_/system/inputs" title="Inputs" />
|
||||
<SidebarLink
|
||||
url={url}
|
||||
href="/_/system/line-chart"
|
||||
title="Line Chart"
|
||||
/>
|
||||
<SidebarLink
|
||||
url={url}
|
||||
href="/_/system/list-editor"
|
||||
title="List Editor"
|
||||
/>
|
||||
<SidebarLink url={url} href="/_/system/line-chart" title="Line Chart" />
|
||||
<SidebarLink url={url} href="/_/system/list-editor" title="List Editor" />
|
||||
<SidebarLink url={url} href="/_/system/loaders" title="Loaders" />
|
||||
<SidebarLink url={url} href="/_/system/modals" title="Modals" />
|
||||
<SidebarLink
|
||||
url={url}
|
||||
href="/_/system/notifications"
|
||||
title="Notifications"
|
||||
/>
|
||||
<SidebarLink url={url} href="/_/system/notifications" title="Notifications" />
|
||||
<SidebarLink url={url} href="/_/system/radios" title="Radios" />
|
||||
<SidebarLink url={url} href="/_/system/sliders" title="Sliders" />
|
||||
<SidebarLink url={url} href="/_/system/stats" title="Stats" />
|
||||
@ -277,30 +195,22 @@ export default class SystemPage extends React.Component {
|
||||
<SidebarLink url={url} href="/_/system/tabs" title="Tabs" />
|
||||
<SidebarLink url={url} href="/_/system/toggles" title="Toggles" />
|
||||
<SidebarLink url={url} href="/_/system/tooltips" title="Tooltips" />
|
||||
<SidebarLink
|
||||
url={url}
|
||||
href="/_/system/typography"
|
||||
title="Typography"
|
||||
/>
|
||||
<SidebarLink url={url} href="/_/system/typography" title="Typography" />
|
||||
|
||||
<div
|
||||
css={STYLES_SMALL_LINK}
|
||||
style={{ marginTop: 48 }}
|
||||
onClick={() => {
|
||||
window.open("https://github.com/filecoin-project/slate");
|
||||
}}
|
||||
>
|
||||
}}>
|
||||
<SVG.ExpandBox height="12px" style={{ marginRight: 10 }} />
|
||||
View source
|
||||
</div>
|
||||
<div
|
||||
css={STYLES_SMALL_LINK}
|
||||
onClick={() => {
|
||||
window.open(
|
||||
"https://github.com/filecoin-shipyard/js-lotus-client"
|
||||
);
|
||||
}}
|
||||
>
|
||||
window.open("https://github.com/filecoin-shipyard/js-lotus-client");
|
||||
}}>
|
||||
<SVG.ExpandBox height="12px" style={{ marginRight: 10 }} />
|
||||
JS Lotus Client
|
||||
</div>
|
||||
@ -308,8 +218,7 @@ export default class SystemPage extends React.Component {
|
||||
css={STYLES_SMALL_LINK}
|
||||
onClick={() => {
|
||||
window.open("https://github.com/textileio/js-powergate-client");
|
||||
}}
|
||||
>
|
||||
}}>
|
||||
<SVG.ExpandBox height="12px" style={{ marginRight: 10 }} />
|
||||
JS Powergate Client
|
||||
</div>
|
||||
@ -317,8 +226,7 @@ export default class SystemPage extends React.Component {
|
||||
css={STYLES_SMALL_LINK}
|
||||
onClick={() => {
|
||||
window.open("https://docs.textile.io/");
|
||||
}}
|
||||
>
|
||||
}}>
|
||||
<SVG.ExpandBox height="12px" style={{ marginRight: 10 }} />
|
||||
Textile Documentation
|
||||
</div>
|
||||
@ -326,8 +234,7 @@ export default class SystemPage extends React.Component {
|
||||
css={STYLES_SMALL_LINK}
|
||||
onClick={() => {
|
||||
window.open("https://docs.lotu.sh/");
|
||||
}}
|
||||
>
|
||||
}}>
|
||||
<SVG.ExpandBox height="12px" style={{ marginRight: 10 }} />
|
||||
Lotus Documentation
|
||||
</div>
|
||||
@ -335,8 +242,7 @@ export default class SystemPage extends React.Component {
|
||||
css={STYLES_SMALL_LINK}
|
||||
onClick={() => {
|
||||
window.open("https://docs.filecoin.io/");
|
||||
}}
|
||||
>
|
||||
}}>
|
||||
<SVG.ExpandBox height="12px" style={{ marginRight: 10 }} />
|
||||
Filecoin Documentation
|
||||
</div>
|
||||
@ -344,8 +250,7 @@ export default class SystemPage extends React.Component {
|
||||
css={STYLES_SMALL_LINK}
|
||||
onClick={() => {
|
||||
window.open("https://filecoin.io/#community");
|
||||
}}
|
||||
>
|
||||
}}>
|
||||
<SVG.ExpandBox height="12px" style={{ marginRight: 10 }} />
|
||||
Community
|
||||
</div>
|
||||
|
||||
@ -36,7 +36,7 @@ const STYLES_MIDDLE = css`
|
||||
|
||||
const STYLES_CARD = css`
|
||||
margin: 0 auto 0 auto;
|
||||
max-width: 640px;
|
||||
max-width: 420px;
|
||||
width: 100%;
|
||||
background: #000000;
|
||||
border-radius: 8px;
|
||||
@ -50,7 +50,7 @@ const STYLES_CARD_IMAGE = css`
|
||||
|
||||
const STYLES_CARD_PARAGRAPH = css`
|
||||
padding: 48px;
|
||||
font-size: 1.6rem;
|
||||
font-size: 1.2rem;
|
||||
color: ${Constants.system.white};
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
@ -90,16 +90,17 @@ const STYLES_CARD_ACTIONS_RIGHT = css`
|
||||
`;
|
||||
|
||||
const STYLES_LINK = css`
|
||||
color: ${Constants.system.green};
|
||||
color: #6a737d;
|
||||
text-decoration: none;
|
||||
transition: 200ms ease color;
|
||||
cursor: pointer;
|
||||
|
||||
:visited {
|
||||
color: ${Constants.system.green};
|
||||
color: #959da5;
|
||||
}
|
||||
|
||||
:hover {
|
||||
color: ${Constants.system.brand};
|
||||
color: #959da5;
|
||||
}
|
||||
`;
|
||||
|
||||
@ -144,54 +145,36 @@ 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="/public/static/art-v2-index.png"
|
||||
/>
|
||||
<img css={STYLES_CARD_IMAGE} src="/public/static/new-brand-teaser.png" />
|
||||
<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>
|
||||
.
|
||||
<br />
|
||||
<br />
|
||||
We launch September 14th.
|
||||
</p>
|
||||
{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
|
||||
</div>
|
||||
<div css={STYLES_CARD_ACTIONS_LEFT}>alpha test 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("/_")}>Join 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>
|
||||
|
||||
BIN
public/static/new-brand-teaser.png
Normal file
BIN
public/static/new-brand-teaser.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 87 KiB |
Loading…
Reference in New Issue
Block a user