mirror of
https://github.com/filecoin-project/slate.git
synced 2024-12-25 01:52:45 +03:00
Merge pull request #324 from filecoin-project/@tarafanlin/marketing
Community page: feature + contribution sections complete
This commit is contained in:
CAKE
GitHub
commit
d0132717ea
@ -8,13 +8,52 @@ import WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper";
|
||||
import WebsitePrototypeHeader from "~/components/core/NewWebsitePrototypeHeader";
|
||||
import WebsitePrototypeFooter from "~/components/core/NewWebsitePrototypeFooter";
|
||||
|
||||
const FEATURES = [
|
||||
{
|
||||
illustration: "https://slate.textile.io/ipfs/bafkreih4hmgltk3mboh5to6lwzcmcptzsiuzlodpdxztynsl2xij6q4deq",
|
||||
title: "Multiplayer slate",
|
||||
description:
|
||||
"Slate as social space. Co-create slates with family and friends. Share design, code, research, dinner plans with others and discuss your ideas.",
|
||||
},
|
||||
{
|
||||
illustration: "https://slate.textile.io/ipfs/bafybeiebglllfwpqk7v57erslgmsjq2vkfav7zmcgjb7dcq3rhca26iwli",
|
||||
title: "Unity game engine",
|
||||
description:
|
||||
"Slate as playground. Upload your favorite unity game to the file-sharing network. Invite your friends to play together.",
|
||||
},
|
||||
{
|
||||
illustration: "https://slate.textile.io/ipfs/bafkreigwlh7kmqnay2qs5lrcyl34mq7rhlcwfwld4vwstmnhhxyrqdyhaq",
|
||||
title: "Flexible content arrangement",
|
||||
description:
|
||||
"Slate as digital garden. Organized information with gallery view, list view, a node-link diagram, a timeline, a discussion thread and more.",
|
||||
},
|
||||
];
|
||||
|
||||
const CONTRIBUTIONS = [
|
||||
{
|
||||
contribution: "An open source brandbook for Slate.",
|
||||
contributor: "Narrative",
|
||||
illustration: "https://slate.textile.io/ipfs/bafkreiamnbqik6542ydqowdicdqji7jljbtvebee7vaciyozklgn6uycim",
|
||||
},
|
||||
{
|
||||
contribution: "A portrait of Slate",
|
||||
contributor: "Jason Yuan",
|
||||
illustration: "https://slate.textile.io/ipfs/bafkreidtgwdyqwqwk2apprnu3rwxkzv5lewktquou6k6crckpouxpq5ugm",
|
||||
},
|
||||
{
|
||||
contribution: "A playful hover tile",
|
||||
contributor: "Someone",
|
||||
illustration: "https://slate.textile.io/ipfs/bafkreiaz2hmjkzau3kkcah55rxdkwzum33n35icqbse2ik5e7vqcsb73kq",
|
||||
},
|
||||
];
|
||||
|
||||
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};
|
||||
background-color: #f2f4f8;
|
||||
`;
|
||||
|
||||
const STYLES_H1 = css`
|
||||
@ -33,6 +72,22 @@ const STYLES_H1 = css`
|
||||
`;
|
||||
|
||||
const STYLES_H2 = css`
|
||||
font-family: ${Constants.font.medium};
|
||||
font-weight: 400;
|
||||
font-size: ${Constants.typescale.lvl4};
|
||||
letter-spacing: -0.022rem;
|
||||
line-height: 1.3;
|
||||
color: ${Constants.system.slate};
|
||||
margin-bottom: 1rem;
|
||||
width: 45%;
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
width: 100%;
|
||||
font-size: ${Constants.typescale.lvl3};
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_H3 = css`
|
||||
font-family: ${Constants.font.medium};
|
||||
font-weight: 400;
|
||||
font-size: ${Constants.typescale.lvl3};
|
||||
@ -68,7 +123,7 @@ const STYLES_TEXT_BLOCK = css`
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
justify-content: space-between;
|
||||
width: 70%;
|
||||
width: 67%;
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
display: block;
|
||||
@ -76,16 +131,16 @@ const STYLES_TEXT_BLOCK = css`
|
||||
}
|
||||
`;
|
||||
|
||||
const stylesHeroText = {
|
||||
const stylesFullWidthText = {
|
||||
width: `100%`,
|
||||
};
|
||||
|
||||
const STYLES_SECTION_WRAPPER = css`
|
||||
width: 100%;
|
||||
padding: 88px;
|
||||
padding: 120px 88px;
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
padding: 24px;
|
||||
padding: 48px;
|
||||
}
|
||||
`;
|
||||
|
||||
@ -94,6 +149,7 @@ const STYLES_DINNER_TABLE = css`
|
||||
padding: 48px 64px;
|
||||
background-color: #e7e7e9;
|
||||
display: inline-block;
|
||||
box-shadow: 0px 10px 50px 20px rgba(0, 0, 0, 0.1);
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
width: 100%;
|
||||
@ -153,13 +209,13 @@ const STYLES_BUTTON = css`
|
||||
box-sizing: border-box;
|
||||
border: 0;
|
||||
border-radius: 4px;
|
||||
padding: 0 24px;
|
||||
padding: 0 16px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
user-select: none;
|
||||
background-color: ${Constants.system.slate};
|
||||
color: ${Constants.system.white};
|
||||
background-color: #e7e7e9;
|
||||
color: ${Constants.system.slate};
|
||||
font-family: ${Constants.font.semiBold};
|
||||
font-weight: 400;
|
||||
font-size: ${Constants.typescale.lvl1};
|
||||
@ -170,11 +226,130 @@ const STYLES_BUTTON = css`
|
||||
cursor: pointer;
|
||||
|
||||
:hover {
|
||||
background: #e7e7e9;
|
||||
color: ${Constants.system.slate};
|
||||
color: ${Constants.system.brand};
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_CENTER_BLOCK = css`
|
||||
width: 50%;
|
||||
margin: 96px auto;
|
||||
text-align: center;
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
margin: 0 auto 48px autp;
|
||||
width: 100%;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_IMG = css`
|
||||
width: 15%;
|
||||
margin-bottom: 24px;
|
||||
`;
|
||||
|
||||
const STYLES_CARD_GROUP = css`
|
||||
display: flex;
|
||||
width: 100%;
|
||||
margin-top: 48px;
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
display: block;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_FEATURE_CARD = css`
|
||||
width: 33.3%;
|
||||
margin: 0 16px 0 0;
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
background-color: #f2f4f8;
|
||||
box-shadow: -6px -6px 10px #ffffff, 4px 4px 10px #d4d4d4;
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
width: 100%;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_CONTRIBUTION_CARD = css`
|
||||
margin-left: 33.3%;
|
||||
width: 66.6%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 16px;
|
||||
border: 1px solid ${Constants.system.gray};
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_FEATURE_TEXT = css`
|
||||
font-family: ${Constants.font.text};
|
||||
font-weight: 400;
|
||||
font-size: ${Constants.typescale.lvl1};
|
||||
letter-spacing: -0.011rem;
|
||||
line-height: 1.5;
|
||||
margin: 8px 0 0 0;
|
||||
color: ${Constants.system.slate};
|
||||
`;
|
||||
|
||||
const STYLES_CONTRIBUTION_TEXT = css`
|
||||
font-family: ${Constants.font.text};
|
||||
font-weight: 400;
|
||||
font-size: ${Constants.typescale.lvl1};
|
||||
letter-spacing: -0.011rem;
|
||||
line-height: 1.5;
|
||||
margin: 8px 0 0 0;
|
||||
color: ${Constants.system.slate};
|
||||
`;
|
||||
|
||||
const STYLES_DOT = css`
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
margin-right: 8px;
|
||||
background-color: ${Constants.system.darkGray};
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
`;
|
||||
|
||||
const STYLES_CONTRIBUTION_IMG = css`
|
||||
width: 40%;
|
||||
box-shadow: 0px 0px 20px 10px rgba(0, 0, 0, 0.1);
|
||||
`;
|
||||
|
||||
const STYLES_FEATURE_IMG = css`
|
||||
width: 100%;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 8px;
|
||||
`;
|
||||
|
||||
const FeatureCard = (props) => {
|
||||
return (
|
||||
<div css={STYLES_FEATURE_CARD}>
|
||||
<img css={STYLES_FEATURE_IMG} src={props.illustration} />
|
||||
<div css={STYLES_FEATURE_TEXT}>{props.title}</div>
|
||||
<div css={STYLES_FEATURE_TEXT} style={{ opacity: 0.7 }}>
|
||||
{props.description}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const ContributionCard = (props) => {
|
||||
return (
|
||||
<div css={STYLES_CONTRIBUTION_CARD}>
|
||||
<div css={STYLES_CONTRIBUTION_TEXT} style={{ marginRight: 8 }}>
|
||||
<span css={STYLES_DOT} />
|
||||
{props.contributor}
|
||||
<br />
|
||||
{props.contribution}
|
||||
</div>
|
||||
<img css={STYLES_CONTRIBUTION_IMG} src={props.illustration} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const getServerSideProps = async (context) => {
|
||||
return {
|
||||
props: { ...context.query },
|
||||
@ -214,13 +389,15 @@ export default class CommunityPage extends React.Component {
|
||||
src="https://slate.textile.io/ipfs/bafybeiehufugq7vujsclzdpkdhff5kop6c4uw6emjuswwp3jhpznaou2se"
|
||||
/>
|
||||
<div css={STYLES_DINNER_TABLE}>
|
||||
<h1 css={STYLES_H1} style={stylesHeroText}>
|
||||
<h1 css={STYLES_H1} style={stylesFullWidthText}>
|
||||
An open invitation to everyone
|
||||
</h1>
|
||||
<p css={STYLES_P} style={stylesHeroText}>
|
||||
<p css={STYLES_P} style={stylesFullWidthText}>
|
||||
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>
|
||||
<button css={STYLES_BUTTON} onClick={() => window.open("https://filecoin.io/slack")}>
|
||||
Join our community{" "}
|
||||
</button>
|
||||
</div>
|
||||
<img
|
||||
css={STYLES_FIGURE_RIGHT}
|
||||
@ -240,10 +417,30 @@ export default class CommunityPage extends React.Component {
|
||||
</section>
|
||||
<section css={STYLES_SECTION_WRAPPER}>
|
||||
<div css={STYLES_TEXT_BLOCK}>
|
||||
<h2 css={STYLES_H2}>What features are your most excited about?</h2>
|
||||
<p css={STYLES_P}>
|
||||
Slate has infinite possibilities. Upvote your favorite ideas or expand our imaginations.
|
||||
</p>
|
||||
<h2 css={STYLES_H2}>Further down the road</h2>
|
||||
<p css={STYLES_P}>Slate has infinite possibilities. Here are some of them that we’re excited about.</p>
|
||||
</div>
|
||||
<div css={STYLES_CARD_GROUP}>
|
||||
{FEATURES.map((each) => (
|
||||
<FeatureCard illustration={each.illustration} title={each.title} description={each.description} />
|
||||
))}
|
||||
</div>
|
||||
<div css={STYLES_CENTER_BLOCK}>
|
||||
<img
|
||||
css={STYLES_IMG}
|
||||
src="https://slate.textile.io/ipfs/bafkreicq4yjwe47vu66u3qt5qqvznrq5vb4tfunmbrjjt3w6rg5p7pdcwy"
|
||||
/>
|
||||
<h3 css={STYLES_H3} style={stylesFullWidthText}>
|
||||
Have an idea?
|
||||
<br />
|
||||
Expand our imaginations.
|
||||
</h3>
|
||||
<button
|
||||
css={STYLES_BUTTON}
|
||||
onClick={() => window.open("https://github.com/filecoin-project/slate/issues")}
|
||||
>
|
||||
Submit a feature request
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
<section css={STYLES_SECTION_WRAPPER}>
|
||||
@ -254,6 +451,34 @@ export default class CommunityPage extends React.Component {
|
||||
that everyone has something to bring to the table. 🍰
|
||||
</p>
|
||||
</div>
|
||||
<br />
|
||||
<br />
|
||||
<div>
|
||||
{CONTRIBUTIONS.map((each) => (
|
||||
<ContributionCard
|
||||
contribution={each.contribution}
|
||||
contributor={each.contributor}
|
||||
illustration={each.illustration}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<div css={STYLES_CENTER_BLOCK}>
|
||||
<img
|
||||
css={STYLES_IMG}
|
||||
src="https://slate.textile.io/ipfs/bafkreiav4ursjyxypvx5nvils6wyskpdua64pnzukmun3xmilndiuv3vp4"
|
||||
/>
|
||||
<h3 css={STYLES_H3} style={stylesFullWidthText}>
|
||||
Have some 🍰 to bring to the table?
|
||||
<br />
|
||||
Let’s chat about how we can support you.
|
||||
</h3>
|
||||
<button
|
||||
css={STYLES_BUTTON}
|
||||
onClick={() => window.open("https://github.com/filecoin-project/slate/issues")}
|
||||
>
|
||||
Join Slack channel
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<WebsitePrototypeFooter />
|
||||
|
||||
@ -430,7 +430,7 @@ const STYLES_SLATE_CARD_GROUP = css`
|
||||
|
||||
const STYLES_SLATE_CARD = css`
|
||||
width: 33.33%;
|
||||
height: calc(100vh / 4);
|
||||
height: 25vh;
|
||||
margin: -1px 0 0 -1px;
|
||||
transition: 200ms ease box-shadow;
|
||||
border: 1px solid ${Constants.system.darkGray};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user