filecoin-project/slate
1
1
Fork 0
mirror of https://github.com/filecoin-project/slate.git synced 2024-12-26 10:34:09 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #296 from filecoin-project/@tarafanlin/marketing

Browse Source 
[WIP] Community page: hero section draft
This commit is contained in:
CAKE 2020-09-16 22:55:12 -07:00 committed by GitHub
commit e042abb2d6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 156 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
components/core/NewWebsitePrototypeFooter.js
View File

@ -105,7 +105,11 @@ 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 />
@ -113,7 +117,11 @@ 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>
@ -125,11 +133,19 @@ export const NewWebsitePrototypeFooter = (props) => {
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" target="_blank">
<a
css={STYLES_LINK}
href="https://github.com/filecoin-project/slate/issues/126"
target="_blank"
>
Community
</a>
<br />

136
pages/_/marketing-candidate/community-t.js Normal file
View File

@ -0,0 +1,136 @@
import * as React from "react";
import * as Constants from "~/common/constants";
import * as Actions from "~/common/actions";
import { css } from "@emotion/react";
import WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper";
import WebsitePrototypeHeader from "~/components/core/NewWebsitePrototypeHeader";
import WebsitePrototypeFooter from "~/components/core/NewWebsitePrototypeFooter";
const STYLES_ROOT = css`
display: flex;
flex-direction: column;
justify-content: space-between;
max-width: 1440px;
margin: -88px 0 0 0;
background-color: ${Constants.system.foreground};
`;
const STYLES_H1 = css`
font-family: ${Constants.font.medium};
font-weight: 400;
font-size: ${Constants.typescale.lvl5};
letter-spacing: -0.022rem;
line-height: 1.3;
color: ${Constants.system.slate};
margin-bottom: 1rem;
@media (max-width: ${Constants.sizes.mobile}px) {
font-size: ${Constants.typescale.lvl4};
}
`;
const STYLES_P = css`
font-family: ${Constants.font.text};
font-weight: 400;
font-size: ${Constants.typescale.lvl1};
letter-spacing: -0.011rem;
line-height: 1.3;
color: ${Constants.system.slate};
opacity: 0.7;
`;
const STYLES_SECTION_WRAPPER = css`
width: 100%;
height: 90vh;
padding: 88px;
@media (max-width: ${Constants.sizes.mobile}px) {
padding: 24px;
}
`;
const STYLES_DINNER_TABLE = css`
width: 50%;
margin: 10vh auto;
padding: 48px 64px;
background: ${Constants.system.wall};
@media (max-width: ${Constants.sizes.mobile}px) {
width: 100%;
margin: 20vh 0;
padding: 24px 32px;
}
`;
const STYLES_BUTTON = css`
margin-top: 48px;
min-height: 48px;
box-sizing: border-box;
border: 0;
border-radius: 4px;
padding: 0 24px;
display: inline-flex;
align-items: center;
justify-content: center;
user-select: none;
background: ${Constants.system.slate};
color: ${Constants.system.white};
font-family: ${Constants.font.semiBold};
font-weight: 400;
font-size: ${Constants.typescale.lvl1};
letter-spacing: -0.011rem;
box-shadow: 0px 10px 50px 20px rgba(0, 0, 0, 0.1);
transition: 200ms ease all;
cursor: pointer;
:hover {
background: ${Constants.system.white};
color: ${Constants.system.slate};
}
`;
export const getServerSideProps = async (context) => {
return {
props: { ...context.query },
};
};
export default class CommunityPage extends React.Component {
async componentDidMount() {
const response = await Actions.health();
console.log("HEALTH_CHECK", response);
}
render() {
const title = `Slate`;
const description =
"Slate is designed and built by a growing community of hackers, artists, and creatives on the web.";
const url = "https://slate.host/community";
return (
<WebsitePrototypeWrapper
title={title}
description={description}
url={url}
>
<WebsitePrototypeHeader />
<div css={STYLES_ROOT}>
<section css={STYLES_SECTION_WRAPPER} style={{ marginTop: 80 }}>
<div css={STYLES_DINNER_TABLE}>
<h1 css={STYLES_H1}>An open invitation to everyone</h1>
<p css={STYLES_P}>
Slate is designed and built by a growing community of hackers,
artists, and creatives on the web.
</p>
<button css={STYLES_BUTTON}>Join our community </button>
</div>
</section>
</div>
<WebsitePrototypeFooter />
</WebsitePrototypeWrapper>
);
}
}