mirror of
https://github.com/filecoin-project/slate.git
synced 2024-11-09 20:28:29 +03:00
Styling updates
This commit is contained in:
William Felker
parent
e86aead989
commit
079e8b9cfd
@ -11,7 +11,7 @@ const STYLES_CONTAINER = css`
|
||||
display: flex;
|
||||
align-items: top;
|
||||
justify-content: top;
|
||||
padding: 96px 88px 240px 88px;
|
||||
padding: 96px 88px 96px 88px;
|
||||
background-color: ${Constants.system.pitchBlack};
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
position: absolute;
|
||||
@ -79,7 +79,7 @@ const STYLES_RIGHT = css`
|
||||
}
|
||||
`;
|
||||
|
||||
export const NewWebsitePrototypeFooter = (props) => {
|
||||
export const NewWebsitePrototypeFooter = props => {
|
||||
return (
|
||||
<div css={STYLES_CONTAINER} style={props.style}>
|
||||
<div css={STYLES_TRADEMARK}>
|
||||
|
||||
463
pages/_/marketing-candidate/community-old.js
Normal file
463
pages/_/marketing-candidate/community-old.js
Normal file
@ -0,0 +1,463 @@
|
||||
import * as React from "react";
|
||||
import * as Constants from "~/common/constants";
|
||||
import * as Actions from "~/common/actions";
|
||||
import * as System from "~/components/system";
|
||||
import CodeBlock from "~/components/system/CodeBlock";
|
||||
import ReactDOM from "react-dom";
|
||||
|
||||
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`
|
||||
padding: 16px 88px;
|
||||
section {
|
||||
width: 1140px;
|
||||
margin: auto;
|
||||
padding: 15vh 0;
|
||||
}
|
||||
h1 {
|
||||
font-size: 46px;
|
||||
line-height: 100%;
|
||||
}
|
||||
button {
|
||||
background: #36383d;
|
||||
color: white;
|
||||
width: 300px;
|
||||
height: 60px;
|
||||
border-radius: 5px;
|
||||
font-style: normal;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_SECTION_CONTAINER = css`
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
`;
|
||||
|
||||
const STYLES_OPENSOURCE_CONTAINER = css`
|
||||
width: 100%;
|
||||
background-color: ${Constants.system.foreground};
|
||||
`;
|
||||
|
||||
const STYLES_HEADER_TEXT = css`
|
||||
font-size: 4.768rem;
|
||||
padding: 0px 0px 32px 0px;
|
||||
width: 100%;
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
font-size: 2.441rem;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_SECTION_TEXT = css`
|
||||
font-size: 1rem;
|
||||
color: ${Constants.system.black};
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_CONTRIBUTOR_CONTAINER = css`
|
||||
display: grid;
|
||||
padding-top: 32px;
|
||||
column-gap: 5px;
|
||||
row-gap: 10px;
|
||||
justify-items: center;
|
||||
align-item: center;
|
||||
grid-template-columns: repeat(auto-fit, 150px);
|
||||
height: 70vh;
|
||||
overflow: hidden;
|
||||
`;
|
||||
|
||||
const STYLES_CONTRIBUTOR_CARD = css`
|
||||
height: 200px;
|
||||
width: 150px;
|
||||
background-color: ${Constants.system.white};
|
||||
`;
|
||||
|
||||
const STYLES_IMAGE_CONTAINER = css`
|
||||
height: 150px;
|
||||
width: 150px;
|
||||
`;
|
||||
|
||||
const STYLES_CARD_IMAGE = css`
|
||||
width: 100%;
|
||||
height: auto;
|
||||
`;
|
||||
|
||||
const STYLES_CARD_TEXT = css`
|
||||
font-size: 1rem;
|
||||
color: ${Constants.system.black};
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_SECTION_CONTRIBUTE = css`
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: auto 1fr 1fr;
|
||||
`;
|
||||
|
||||
const STYLES_BTN_SPACER = css`
|
||||
padding-bottom: 32px;
|
||||
`;
|
||||
|
||||
const STYLES_IMAGES_CONTAINER = css`
|
||||
grid-row: 1 / span 2;
|
||||
grid-column: 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
`;
|
||||
|
||||
const STYLES_IMAGE_CONT = css`
|
||||
max-width: 500px;
|
||||
float: right;
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
margin-bottom: 20px;
|
||||
border: 1px solid ${Constants.system.border};
|
||||
box-shadow: 5px 5px 1px ${Constants.system.border};
|
||||
`;
|
||||
|
||||
const STYLES_CONTRIBUTE_CONTAINER = css`
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
`;
|
||||
|
||||
const STYLES_IMAGE_THREE = css`
|
||||
width: 100%;
|
||||
height: auto;
|
||||
`;
|
||||
|
||||
const STYLES_SECTION_QUOTE = css`
|
||||
grid-row: 3;
|
||||
grid-column: 1;
|
||||
font-size: 2rem;
|
||||
color: ${Constants.system.black};
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
font-size: 1rem;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_CONTACT_CONTAINER = css`
|
||||
width: 100%;
|
||||
height: auto;
|
||||
`;
|
||||
|
||||
const STYLES_CONTACT_BTN_CONTAINER = css`
|
||||
display: flex;
|
||||
padding: 96px 0;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
`;
|
||||
|
||||
const STYLES_INTEGRATE_GIF = css`
|
||||
width: 100%
|
||||
height: 70vh;
|
||||
padding-top: 20vh;
|
||||
`;
|
||||
|
||||
const STYLES_DESIGN_CONTAINER = css`
|
||||
display: grid;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-column-gap: 32px;
|
||||
`;
|
||||
|
||||
const STYLES_D_TEXT = css`
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
`;
|
||||
|
||||
const STYLES_DESIGN_CODE = css`
|
||||
width: 100%;
|
||||
grid-row: 2;
|
||||
grid-column: 1;
|
||||
`;
|
||||
|
||||
const STYLES_D_IMAGE_CONTAINER = css`
|
||||
height: auto;
|
||||
width: 90%;
|
||||
grid-column: 2;
|
||||
grid-row: 1 / span 2;
|
||||
`;
|
||||
|
||||
const STYLES_DESIGN_IMAGE = css`
|
||||
width: 100%;
|
||||
height: auto;
|
||||
`;
|
||||
const STYLES_WRAPPER_TEXT = css`
|
||||
width: 40%;
|
||||
align-self: center;
|
||||
padding: 0 50px;
|
||||
`;
|
||||
const STYLES_SECTION = css`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-self: center;
|
||||
h1 {
|
||||
font-size: 46px;
|
||||
line-height: 100%;
|
||||
}
|
||||
`;
|
||||
const STYLES_CARD = css``;
|
||||
|
||||
export const getServerSideProps = async context => {
|
||||
return {
|
||||
props: { ...context.query }
|
||||
};
|
||||
};
|
||||
|
||||
export default class IndexPage extends React.Component {
|
||||
async componentDidMount() {
|
||||
const response = await Actions.health();
|
||||
console.log("HEALTH_CHECK", response);
|
||||
this.addContributors();
|
||||
}
|
||||
|
||||
contributorsList = [
|
||||
{
|
||||
id: 1,
|
||||
name: "jimmylee",
|
||||
url: "https://github.com/jimmylee",
|
||||
organization: "Slate",
|
||||
pic:
|
||||
"https://avatars0.githubusercontent.com/u/310223?s=400&u=62a15c1b5791b953fc5153a4b3f491f4b0bf2ae5&v=4"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "martinalong",
|
||||
url: "https://github.com/martinalong",
|
||||
organization: "Slate",
|
||||
pic:
|
||||
"https://avatars2.githubusercontent.com/u/33686587?s=400&u=d1841da2872f30f7f8cb80e67cdc9b385d0f50e1&v=4"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "gndclouds",
|
||||
url: "https://github.com/gndclouds",
|
||||
organization: "Slate",
|
||||
pic:
|
||||
"https://avatars0.githubusercontent.com/u/1757261?s=400&u=b7136d82bfacac3002b3b08980ac611ca7f34b7b&v=4"
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "uonai",
|
||||
url: "https://github.com/uonai",
|
||||
organization: "",
|
||||
pic:
|
||||
"https://avatars2.githubusercontent.com/u/7935491?s=400&u=8d91d58215c8df440eacf37d6291d912252685c3&v=4"
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: "tarafanlin",
|
||||
url: "https://github.com/tarafanlin",
|
||||
organization: "Slate",
|
||||
pic:
|
||||
"https://avatars2.githubusercontent.com/u/35607644?s=400&u=48483bdf251e5293fefb30ae993bfa04d06601a6&v=4"
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: "jasonleyser",
|
||||
url: "https://github.com/",
|
||||
organization: "Slate",
|
||||
pic: "/static/a1.jpg"
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
name: "akuokojnr",
|
||||
url: "https://github.com/akuokojnr",
|
||||
organization: "",
|
||||
pic:
|
||||
"https://avatars2.githubusercontent.com/u/31008944?s=400&u=340814cc84eac860654a072781661e58aadaf560&v=4"
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
name: "jordattebayo",
|
||||
url: "https://github.com/jordattebayo",
|
||||
organization: "",
|
||||
pic:
|
||||
"https://avatars2.githubusercontent.com/u/31581758?s=400&u=21765bba0c302a554ef3aab835450a32fc947a98&v=4"
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
name: "Pooja",
|
||||
url: "https://github.com/",
|
||||
organization: "",
|
||||
pic: "/static/a1.jpg"
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
name: "tmytrn",
|
||||
url: "https://github.com/tmrtrn",
|
||||
organization: "",
|
||||
pic:
|
||||
"https://avatars0.githubusercontent.com/u/2691514?s=400&u=b589dc97fa893152768b00c27b5f9f68d1a7fb79&v=4"
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
name: "motdde",
|
||||
url: "https://github.com/motdde",
|
||||
organization: "",
|
||||
pic:
|
||||
"https://avatars3.githubusercontent.com/u/12215060?s=400&u=aa85ebcfc7438becdb50a67aa79e78ba8feb2d77&v=4"
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
name: "harisbutt",
|
||||
url: "https://github.com/harisbutt",
|
||||
organization: "",
|
||||
pic: "/static/a1.jpg"
|
||||
},
|
||||
{
|
||||
id: 13,
|
||||
name: "andrewxhill",
|
||||
url: "https://github.com/andrewxhill",
|
||||
organization: "",
|
||||
pic: "/static/a1.jpg"
|
||||
},
|
||||
{
|
||||
id: 14,
|
||||
name: "johannes-jp",
|
||||
url: "https://github.com/johannes-jp",
|
||||
organization: "",
|
||||
pic: "/static/a1.jpg"
|
||||
},
|
||||
{
|
||||
id: 15,
|
||||
name: "Anish-Agnihotri",
|
||||
url: "https://github.com/anish-agnihotri",
|
||||
organization: "",
|
||||
pic: "/static/a1.jpg"
|
||||
},
|
||||
{
|
||||
id: 16,
|
||||
name: "Aminejvm",
|
||||
url: "https://github.com/aminejvm",
|
||||
organization: "",
|
||||
pic: "/static/a1.jpg"
|
||||
}
|
||||
];
|
||||
|
||||
addContributors = () => {
|
||||
const allContributors = [];
|
||||
const contributors = this.contributorsList;
|
||||
for (let c of contributors) {
|
||||
allContributors.push(
|
||||
<div key={c.id} css={STYLES_CONTRIBUTOR_CARD}>
|
||||
<div css={STYLES_IMAGE_CONTAINER}>
|
||||
<img css={STYLES_CARD_IMAGE} src={c.pic} />
|
||||
</div>
|
||||
<System.P css={STYLES_CARD_TEXT}>{c.name}</System.P>
|
||||
<a href={c.url}>{`@${c.name}`}</a>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
ReactDOM.render(allContributors, document.getElementById("contr-cont"));
|
||||
};
|
||||
|
||||
render() {
|
||||
const title = `Slate`;
|
||||
const description =
|
||||
"The place for all of your assets. Powered by Textile and Filecoin.";
|
||||
const url = "https://slate.host/community";
|
||||
|
||||
return (
|
||||
<WebsitePrototypeWrapper
|
||||
title={title}
|
||||
description={description}
|
||||
url={url}
|
||||
>
|
||||
<WebsitePrototypeHeader />
|
||||
<div css={STYLES_ROOT}>
|
||||
<section css={STYLES_SECTION}>
|
||||
<div>
|
||||
<System.H1>
|
||||
Slate is designed and built by a growing community of hackers,
|
||||
artists, and creatives on the web.
|
||||
</System.H1>
|
||||
<System.P>ytu</System.P>
|
||||
</div>
|
||||
<div>
|
||||
{" "}
|
||||
<div id="contr-cont" css={STYLES_CONTRIBUTOR_CONTAINER}></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section css={STYLES_SECTION}>
|
||||
<div css={STYLES_WRAPPER_TEXT}>
|
||||
<System.H1>Get Involved</System.H1>
|
||||
<System.P>
|
||||
Slate is a fully open-source file sharing network designed for
|
||||
research and collaboration.
|
||||
</System.P>
|
||||
<br />
|
||||
<br />
|
||||
<div>
|
||||
<img
|
||||
src="https://d2w9rnfcy7mm78.cloudfront.net/8547413/original_613b9b0a650a3f274c68e1407f552ff3.png?1599111034?bc=0"
|
||||
alt="Slate Web App Screenshot"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div css={STYLES_CARD}>
|
||||
<System.H2>Contribute</System.H2>
|
||||
<br />
|
||||
<System.P>Get involved with the project and contribute.</System.P>
|
||||
<br />
|
||||
<br />
|
||||
</div>
|
||||
|
||||
<div css={STYLES_CARD}>
|
||||
<System.H2>Contact</System.H2>
|
||||
<br />
|
||||
<System.P>
|
||||
Reach out to any of the core contributors, reach us on Twitter,
|
||||
or join our Slack.
|
||||
</System.P>
|
||||
<br />
|
||||
<br />
|
||||
</div>
|
||||
|
||||
<div css={STYLES_CARD}>
|
||||
<System.H2>Integrate</System.H2>
|
||||
<br />
|
||||
<System.P>
|
||||
Explore our API and SDK and build on top of Slate.
|
||||
</System.P>
|
||||
<br />
|
||||
<br />
|
||||
<CodeBlock>npm install --save slate-react-system</CodeBlock>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<System.H2>Design System</System.H2>
|
||||
<br />
|
||||
<System.P>
|
||||
Check out our open source design system for your projects
|
||||
</System.P>
|
||||
<br />
|
||||
<br />
|
||||
<CodeBlock>npm install --save slate-react-system</CodeBlock>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<WebsitePrototypeFooter />
|
||||
</WebsitePrototypeWrapper>
|
||||
);
|
||||
}
|
||||
}
|
||||
442
pages/_/marketing-candidate/community.js
Normal file
442
pages/_/marketing-candidate/community.js
Normal file
@ -0,0 +1,442 @@
|
||||
import * as React from "react";
|
||||
import * as Constants from "~/common/constants";
|
||||
import * as Actions from "~/common/actions";
|
||||
import * as System from "~/components/system";
|
||||
import CodeBlock from "~/components/system/CodeBlock";
|
||||
import ReactDOM from "react-dom";
|
||||
|
||||
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`
|
||||
padding: 16px 88px;
|
||||
section {
|
||||
width: 1140px;
|
||||
margin: auto;
|
||||
padding: 15vh 0;
|
||||
}
|
||||
h1 {
|
||||
font-size: 46px;
|
||||
line-height: 100%;
|
||||
}
|
||||
button {
|
||||
background: #36383d;
|
||||
color: white;
|
||||
width: 300px;
|
||||
height: 60px;
|
||||
border-radius: 5px;
|
||||
font-style: normal;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_SECTION = css`
|
||||
width: 100%;
|
||||
`;
|
||||
const STYLES_HERO = css`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-self: center;
|
||||
`;
|
||||
const STYLES_TEAM = css`
|
||||
flex-wrap: wrap;
|
||||
`;
|
||||
|
||||
const STYLES_CARD = css``;
|
||||
|
||||
const STYLES_CONTRIBUTOR_CARD = css`
|
||||
height: 200px;
|
||||
width: 150px;
|
||||
background-color: ${Constants.system.white};
|
||||
border-radius: 4px;
|
||||
transition: 200ms ease box-shadow;
|
||||
box-shadow: 0px 4px 8px 4px rgba(0, 0, 0, 0.02);
|
||||
:hover {
|
||||
transition: 200ms ease box-shadow;
|
||||
box-shadow: 0px 10px 40px 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
a {
|
||||
color: ${Constants.system.moonstone};
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: ${Constants.system.pitchBlack};
|
||||
font-color: ${Constants.system.pitchBlack};
|
||||
background-color: transparent;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:active {
|
||||
color: ${Constants.system.pitchBlack};
|
||||
background-color: transparent;
|
||||
text-decoration: none;
|
||||
}
|
||||
`;
|
||||
const STYLES_IMAGE_CONTAINER = css`
|
||||
height: 150px;
|
||||
width: 150px;
|
||||
`;
|
||||
|
||||
const STYLES_CARD_IMAGE = css`
|
||||
width: 100%;
|
||||
height: auto;
|
||||
`;
|
||||
const STYLES_CARD_TEXT = css`
|
||||
margin: auto;
|
||||
width: 100%;
|
||||
padding: 10px 5px;
|
||||
text-align: center;
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
`;
|
||||
const STYLES_TEAM_GALLERY = css`
|
||||
display: grid;
|
||||
padding-top: 20px;
|
||||
column-gap: 20px;
|
||||
row-gap: 20px;
|
||||
justify-items: center;
|
||||
align-item: center;
|
||||
grid-template-columns: repeat(auto-fit, 150px);
|
||||
overflow: hidden;
|
||||
`;
|
||||
|
||||
const STYLES_TEAM_CARD = css`
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
background-color: black;
|
||||
border-radius: 4px;
|
||||
transition: 200ms ease box-shadow;
|
||||
box-shadow: 0px 4px 8px 4px rgba(0, 0, 0, 0.02);
|
||||
:hover {
|
||||
transition: 200ms ease box-shadow;
|
||||
box-shadow: 0px 10px 40px 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
a {
|
||||
color: ${Constants.system.moonstone};
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: ${Constants.system.pitchBlack};
|
||||
font-color: ${Constants.system.pitchBlack};
|
||||
background-color: transparent;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:active {
|
||||
color: ${Constants.system.pitchBlack};
|
||||
background-color: transparent;
|
||||
text-decoration: none;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_GET_INVOLVED_WRAPPER = css`
|
||||
height: 100%;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
flex-wrap:wrap;
|
||||
const STYLES_GET_IN
|
||||
|
||||
`;
|
||||
const STYLES_GET_INVOLVED = css`
|
||||
width: 50%;
|
||||
padding-top: 100px;
|
||||
padding-right: 50px;
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
width: 100%;
|
||||
}
|
||||
`;
|
||||
|
||||
export const getServerSideProps = async context => {
|
||||
return {
|
||||
props: { ...context.query }
|
||||
};
|
||||
};
|
||||
|
||||
export default class IndexPage extends React.Component {
|
||||
async componentDidMount() {
|
||||
const response = await Actions.health();
|
||||
console.log("HEALTH_CHECK", response);
|
||||
}
|
||||
|
||||
render() {
|
||||
const title = `Slate`;
|
||||
const description =
|
||||
"The place for all of your assets. Powered by Textile and Filecoin.";
|
||||
const url = "https://slate.host/community";
|
||||
|
||||
return (
|
||||
<WebsitePrototypeWrapper
|
||||
title={title}
|
||||
description={description}
|
||||
url={url}
|
||||
>
|
||||
<WebsitePrototypeHeader />
|
||||
<div css={STYLES_ROOT}>
|
||||
<section css={STYLES_SECTION}>
|
||||
<div>
|
||||
<System.H1>
|
||||
Slate is designed and built by a growing community of hackers,
|
||||
artists, and creatives on the web.
|
||||
</System.H1>
|
||||
</div>
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<System.H2>Core Team</System.H2>
|
||||
<div css={STYLES_TEAM_GALLERY}>
|
||||
<div css={STYLES_CONTRIBUTOR_CARD}>
|
||||
<div css={STYLES_IMAGE_CONTAINER}>
|
||||
<img
|
||||
css={STYLES_CARD_IMAGE}
|
||||
alt="Github Profile Photo for Jason Leyser"
|
||||
src="https://avatars3.githubusercontent.com/u/60402678?s=400&u=b7d840718b781d4266fff7fb59e688d369ec1e6b&v=4"
|
||||
/>
|
||||
</div>
|
||||
<System.P css={STYLES_CARD_TEXT}>
|
||||
<a href="https://github.com/jasonleyser">Jason Leyser</a>
|
||||
</System.P>
|
||||
</div>
|
||||
<div css={STYLES_CONTRIBUTOR_CARD}>
|
||||
<div css={STYLES_IMAGE_CONTAINER}>
|
||||
<img
|
||||
css={STYLES_CARD_IMAGE}
|
||||
alt="Github Profile Photo for Cake"
|
||||
src="https://avatars0.githubusercontent.com/u/310223?s=400&u=62a15c1b5791b953fc5153a4b3f491f4b0bf2ae5&v=4"
|
||||
/>
|
||||
</div>
|
||||
<System.P css={STYLES_CARD_TEXT}>
|
||||
<a href="https://github.com/jimmylee">Cake</a>
|
||||
</System.P>
|
||||
</div>
|
||||
<div css={STYLES_CONTRIBUTOR_CARD}>
|
||||
<div css={STYLES_IMAGE_CONTAINER}>
|
||||
<img
|
||||
css={STYLES_CARD_IMAGE}
|
||||
alt="Github Profile Photo for Martina Long"
|
||||
src="https://avatars2.githubusercontent.com/u/33686587?s=400&u=d1841da2872f30f7f8cb80e67cdc9b385d0f50e1&v=4"
|
||||
/>
|
||||
</div>
|
||||
<System.P css={STYLES_CARD_TEXT}>
|
||||
<a href="https://github.com/martinalong">Martina Long</a>
|
||||
</System.P>
|
||||
</div>
|
||||
<div css={STYLES_CONTRIBUTOR_CARD}>
|
||||
<div css={STYLES_IMAGE_CONTAINER}>
|
||||
<img
|
||||
css={STYLES_CARD_IMAGE}
|
||||
alt="Github Profile Photo for Haris Butt"
|
||||
src="https://avatars2.githubusercontent.com/u/13544493?s=400&u=264f4b9241b2520ba13e4eb4d71042b05adc5f74&v=4"
|
||||
/>
|
||||
</div>
|
||||
<System.P css={STYLES_CARD_TEXT}>
|
||||
<a href="https://github.com/harisbutt">Haris Butt</a>
|
||||
</System.P>
|
||||
</div>
|
||||
<div css={STYLES_CONTRIBUTOR_CARD}>
|
||||
<div css={STYLES_IMAGE_CONTAINER}>
|
||||
<img
|
||||
css={STYLES_CARD_IMAGE}
|
||||
alt="Github Profile Photo for Tara Lin"
|
||||
src="https://avatars2.githubusercontent.com/u/35607644?s=400&u=48483bdf251e5293fefb30ae993bfa04d06601a6&v=4"
|
||||
/>
|
||||
</div>
|
||||
<System.P css={STYLES_CARD_TEXT}>
|
||||
<a href="https://github.com/tarafanlin">Tara Lin</a>
|
||||
</System.P>
|
||||
</div>
|
||||
<div css={STYLES_CONTRIBUTOR_CARD}>
|
||||
<div css={STYLES_IMAGE_CONTAINER}>
|
||||
<img
|
||||
css={STYLES_CARD_IMAGE}
|
||||
alt="Github Profile Photo for William Felker"
|
||||
src="https://avatars0.githubusercontent.com/u/1757261?s=400&u=b7136d82bfacac3002b3b08980ac611ca7f34b7b&v=4"
|
||||
/>
|
||||
</div>
|
||||
<System.P css={STYLES_CARD_TEXT}>
|
||||
<a href="https://github.com/gndclouds">William Felker</a>
|
||||
</System.P>
|
||||
</div>
|
||||
</div>
|
||||
<System.H2>Contributors</System.H2>
|
||||
<div css={STYLES_TEAM_GALLERY}>
|
||||
<div css={STYLES_CONTRIBUTOR_CARD}>
|
||||
<div css={STYLES_IMAGE_CONTAINER}>
|
||||
<img
|
||||
css={STYLES_CARD_IMAGE}
|
||||
alt="Github Profile Photo for Pooja Shah"
|
||||
src="https://avatars0.githubusercontent.com/u/5668171?s=400&u=68f1223a7b241c0b8622b921805a0d9cb816a679&v=4"
|
||||
/>
|
||||
</div>
|
||||
<System.P css={STYLES_CARD_TEXT}>
|
||||
<a href="https://github.com/pooja">Pooja Shah</a>
|
||||
</System.P>
|
||||
</div>
|
||||
<div css={STYLES_CONTRIBUTOR_CARD}>
|
||||
<div css={STYLES_IMAGE_CONTAINER}>
|
||||
<img
|
||||
css={STYLES_CARD_IMAGE}
|
||||
alt="Github Profile Photo for Why"
|
||||
src="https://avatars2.githubusercontent.com/u/1243164?s=400&u=04070140d22a204d2510a3b115943583b4e28df9&v=4"
|
||||
/>
|
||||
</div>
|
||||
<System.P css={STYLES_CARD_TEXT}>
|
||||
<a href="https://github.com/whyrusleeping">Why</a>
|
||||
</System.P>
|
||||
</div>
|
||||
<div css={STYLES_CONTRIBUTOR_CARD}>
|
||||
<div css={STYLES_IMAGE_CONTAINER}>
|
||||
<img
|
||||
css={STYLES_CARD_IMAGE}
|
||||
alt="Github Profile Photo for Aaron Sutula"
|
||||
src="https://avatars0.githubusercontent.com/u/528969?s=400&v=4"
|
||||
/>
|
||||
</div>
|
||||
<System.P css={STYLES_CARD_TEXT}>
|
||||
<a href="https://github.com/asutula">Aaron Sutula</a>
|
||||
</System.P>
|
||||
</div>
|
||||
<div css={STYLES_CONTRIBUTOR_CARD}>
|
||||
<div css={STYLES_IMAGE_CONTAINER}>
|
||||
<img
|
||||
css={STYLES_CARD_IMAGE}
|
||||
alt="Github Profile Photo for Ignacio Hagopian"
|
||||
src="https://avatars3.githubusercontent.com/u/6136245?s=400&u=50177a94e7b3be5fcfcede6d8f1f641c16568ebe&v=4"
|
||||
/>
|
||||
</div>
|
||||
<System.P css={STYLES_CARD_TEXT}>
|
||||
<a href="https://github.com/jsign">Ignacio Hagopian</a>
|
||||
</System.P>
|
||||
</div>
|
||||
<div css={STYLES_CONTRIBUTOR_CARD}>
|
||||
<div css={STYLES_IMAGE_CONTAINER}>
|
||||
<img
|
||||
css={STYLES_CARD_IMAGE}
|
||||
alt="Github Profile Photo for Sander Pick"
|
||||
src="https://avatars1.githubusercontent.com/u/361000?s=400&u=d95539a31bca0d2e5be3cfc366321f17aa755ebd&v=4"
|
||||
/>
|
||||
</div>
|
||||
<System.P css={STYLES_CARD_TEXT}>
|
||||
<a href="https://github.com/sanderpick">Sander Pick</a>
|
||||
</System.P>
|
||||
</div>
|
||||
<div css={STYLES_CONTRIBUTOR_CARD}>
|
||||
<div css={STYLES_IMAGE_CONTAINER}>
|
||||
<img
|
||||
css={STYLES_CARD_IMAGE}
|
||||
alt="Github Profile Photo for Andrew Hill"
|
||||
src="https://avatars2.githubusercontent.com/u/370259?s=400&u=76ac510ace513bd7fb04ef7011d8402a6b3a3043&v=4"
|
||||
/>
|
||||
</div>
|
||||
<System.P css={STYLES_CARD_TEXT}>
|
||||
<a href="https://github.com/andrewxhill">Andrew Hill</a>
|
||||
</System.P>
|
||||
</div>
|
||||
<div css={STYLES_CONTRIBUTOR_CARD}>
|
||||
<div css={STYLES_IMAGE_CONTAINER}>
|
||||
<img
|
||||
css={STYLES_CARD_IMAGE}
|
||||
alt="Github Profile Photo for Narative"
|
||||
src="https://avatars0.githubusercontent.com/u/38549791?s=200&v=4"
|
||||
/>
|
||||
</div>
|
||||
<System.P css={STYLES_CARD_TEXT}>
|
||||
<a href="https://github.com/Narative">Narative</a>
|
||||
</System.P>
|
||||
</div>
|
||||
<div css={STYLES_CONTRIBUTOR_CARD}>
|
||||
<div css={STYLES_IMAGE_CONTAINER}>
|
||||
<img
|
||||
css={STYLES_CARD_IMAGE}
|
||||
src="https://avatars2.githubusercontent.com/u/7935491?s=400&u=8d91d58215c8df440eacf37d6291d912252685c3&v=4"
|
||||
/>
|
||||
</div>
|
||||
<System.P css={STYLES_CARD_TEXT}>
|
||||
<a href="https://github.com/uonai">Colin S. Mccaleb</a>
|
||||
</System.P>
|
||||
</div>
|
||||
<div css={STYLES_CONTRIBUTOR_CARD}>
|
||||
<div css={STYLES_IMAGE_CONTAINER}>
|
||||
<img
|
||||
css={STYLES_CARD_IMAGE}
|
||||
alt="Github Profile Photo for Akuoko Daniel Jnr"
|
||||
src="https://avatars2.githubusercontent.com/u/31008944?s=400&u=340814cc84eac860654a072781661e58aadaf560&v=4"
|
||||
/>
|
||||
</div>
|
||||
<System.P css={STYLES_CARD_TEXT}>
|
||||
<a href="https://github.com/akuokojnr">Akuoko Daniel Jnr</a>
|
||||
</System.P>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<div>
|
||||
<System.H1>Get Involved</System.H1>
|
||||
<br />
|
||||
<System.P>
|
||||
Slate is a fully open-source file sharing network designed for
|
||||
research and collaboration.
|
||||
</System.P>
|
||||
</div>
|
||||
|
||||
<div css={STYLES_GET_INVOLVED_WRAPPER}>
|
||||
<div css={STYLES_GET_INVOLVED}>
|
||||
<System.H2>Contribute</System.H2>
|
||||
<br />
|
||||
<System.P>
|
||||
Get involved with the project and contribute
|
||||
</System.P>
|
||||
<System.P>WIP ASSET</System.P>
|
||||
</div>
|
||||
<div css={STYLES_GET_INVOLVED}>
|
||||
<System.H2>Contact</System.H2>
|
||||
<br />
|
||||
<System.P>
|
||||
Reach out to any of the core contributors, reach us on
|
||||
Twitter, or join our Slack.
|
||||
</System.P>
|
||||
<div>
|
||||
<button>
|
||||
<a>Twitter</a>
|
||||
</button>
|
||||
<button>
|
||||
<a>Join Slack</a>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div css={STYLES_GET_INVOLVED}>
|
||||
<System.H2>Integrate</System.H2>
|
||||
<br />
|
||||
<System.P>
|
||||
Explore our API and SDK and build on top of Slate
|
||||
</System.P>
|
||||
<br />
|
||||
<CodeBlock>npm install --save slate-react-system</CodeBlock>
|
||||
</div>
|
||||
<div css={STYLES_GET_INVOLVED}>
|
||||
<System.H2>Design System</System.H2>
|
||||
<br />
|
||||
<System.P>
|
||||
Check out our open source design system for your projects
|
||||
</System.P>
|
||||
<br />
|
||||
<CodeBlock>npm install --save slate-react-system</CodeBlock>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<WebsitePrototypeFooter />
|
||||
</WebsitePrototypeWrapper>
|
||||
);
|
||||
}
|
||||
}
|
||||
225
pages/_/marketing-candidate/download.js
Normal file
225
pages/_/marketing-candidate/download.js
Normal file
@ -0,0 +1,225 @@
|
||||
import * as React from "react";
|
||||
import * as Constants from "~/common/constants";
|
||||
import * as Actions from "~/common/actions";
|
||||
import * as System from "~/components/system";
|
||||
|
||||
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`
|
||||
padding: 16px 88px;
|
||||
section {
|
||||
width: 1140px;
|
||||
margin: auto;
|
||||
padding: 15vh 0;
|
||||
}
|
||||
h1 {
|
||||
font-size: 46px;
|
||||
line-height: 100%;
|
||||
}
|
||||
button {
|
||||
background: #36383d;
|
||||
color: white;
|
||||
width: 300px;
|
||||
height: 60px;
|
||||
border-radius: 5px;
|
||||
font-style: normal;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
h1 {
|
||||
font-size: 1.953rem;
|
||||
padding: 0px 0px 16px 0px;
|
||||
line-height: 1.25;
|
||||
}
|
||||
h2 {
|
||||
font-size: 1.25rem;
|
||||
padding: 0px 0px 8px 0px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
h3 {
|
||||
font-size: 1rem;
|
||||
padding: 0px 0px 8px 0px;
|
||||
line-height: 1.5;
|
||||
color: ${Constants.system.moonstone};
|
||||
}
|
||||
p {
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
img {
|
||||
width: 80%;
|
||||
hight: auto;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_APP = css`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-self: center;
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
flex-direction: column;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_EXTENSTION = css`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-self: center;
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
flex-direction: column;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_WRAPPER_TEXT = css`
|
||||
width: 40%;
|
||||
align-self: center;
|
||||
padding: 0 50px;
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
padding: 0 10px;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_BROWSER_WINDOW = css`
|
||||
background: #ffffff;
|
||||
box-shadow: 0px 10px 50px 20px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 10px;
|
||||
align-self: center;
|
||||
`;
|
||||
|
||||
const STYLES_ANNOTATION = css`
|
||||
font-size: 12px;
|
||||
color: #646464;
|
||||
`;
|
||||
|
||||
export const getServerSideProps = async context => {
|
||||
return {
|
||||
props: { ...context.query }
|
||||
};
|
||||
};
|
||||
|
||||
export default class IndexPage extends React.Component {
|
||||
async componentDidMount() {
|
||||
const response = await Actions.health();
|
||||
console.log("HEALTH_CHECK", response);
|
||||
}
|
||||
getOs = () => {
|
||||
const os = ["Windows", "Linux", "Mac"]; // add your OS values
|
||||
return os.find(v => navigator.appVersion.indexOf(v) >= 0);
|
||||
};
|
||||
render() {
|
||||
const title = `Slate Download`;
|
||||
const description = "Donwload Slate app and web extenstion";
|
||||
const url = "https://slate.host/download";
|
||||
|
||||
return (
|
||||
<WebsitePrototypeWrapper
|
||||
title={title}
|
||||
description={description}
|
||||
url={url}
|
||||
>
|
||||
<WebsitePrototypeHeader />
|
||||
<div css={STYLES_ROOT}>
|
||||
<section css={STYLES_EXTENSTION}>
|
||||
<div css={STYLES_BROWSER_WINDOW}>
|
||||
<img
|
||||
src="https://d2w9rnfcy7mm78.cloudfront.net/8547413/original_613b9b0a650a3f274c68e1407f552ff3.png?1599111034?bc=0"
|
||||
alt="Slate browser extension"
|
||||
/>
|
||||
</div>
|
||||
<div css={STYLES_WRAPPER_TEXT}>
|
||||
<System.H1>Slate Chrome Extensions</System.H1>
|
||||
<br />
|
||||
|
||||
<System.P>
|
||||
Take any image on the web and save it to Slate right from your
|
||||
browser tab
|
||||
</System.P>
|
||||
<br />
|
||||
<br />
|
||||
<a>
|
||||
<button>Get Chrome Extension</button>
|
||||
</a>
|
||||
<System.P css={STYLES_ANNOTATION}>
|
||||
Currently avaible for <a href="/">Chrome</a>.
|
||||
</System.P>
|
||||
</div>
|
||||
</section>
|
||||
<section css={STYLES_APP}>
|
||||
<div css={STYLES_WRAPPER_TEXT}>
|
||||
<System.H1>Slate client for Mac, Windows and Linux</System.H1>
|
||||
<br />
|
||||
<System.P>
|
||||
Local folder and offline client for seamless filesharing between
|
||||
your machine and the network
|
||||
</System.P>
|
||||
<br />
|
||||
<br />
|
||||
<a>
|
||||
<button>Coming Soon</button>
|
||||
</a>
|
||||
<System.P css={STYLES_ANNOTATION}>
|
||||
Also avaible for <a>Windows</a> and <a>Linux</a>
|
||||
</System.P>
|
||||
</div>
|
||||
<div css={STYLES_BROWSER_WINDOW}>
|
||||
<img
|
||||
src="https://d2w9rnfcy7mm78.cloudfront.net/8547413/original_613b9b0a650a3f274c68e1407f552ff3.png?1599111034?bc=0"
|
||||
alt="Slate Web App Screenshot"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section css={STYLES_APP}>
|
||||
<div css={STYLES_WRAPPER_TEXT}>
|
||||
<System.H1>Releases</System.H1>
|
||||
<br />
|
||||
<System.P>
|
||||
Slate is built in public and all past releases are always
|
||||
avaible for download.
|
||||
</System.P>
|
||||
</div>
|
||||
<div>
|
||||
<System.Table
|
||||
data={{
|
||||
columns: [
|
||||
{ key: "a", name: "Version / Product", width: "50%" },
|
||||
{ key: "b", name: "Date", width: "50%" },
|
||||
{ key: "c", name: "Link", width: "50%" }
|
||||
],
|
||||
rows: [
|
||||
{
|
||||
id: 1,
|
||||
a: "v1.0.0 Design System",
|
||||
b: "2020 09 14",
|
||||
c: "Download"
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
a: "v1.0.0 Chome Extenstion",
|
||||
b: "2020 09 14",
|
||||
c: "Download"
|
||||
}
|
||||
]
|
||||
}}
|
||||
name="exampleOne"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<WebsitePrototypeFooter />
|
||||
</WebsitePrototypeWrapper>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,403 +0,0 @@
|
||||
import * as React from "react";
|
||||
import * as Constants from "~/common/constants";
|
||||
import * as Actions from "~/common/actions";
|
||||
import * as System from "~/components/system";
|
||||
import CodeBlock from "~/components/system/CodeBlock";
|
||||
import ReactDOM from "react-dom";
|
||||
|
||||
import { css } from "@emotion/react";
|
||||
|
||||
import WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper";
|
||||
import WebsitePrototypeHeader from "~/components/core/WebsitePrototypeHeader";
|
||||
import WebsitePrototypeFooter from "~/components/core/NewWebsitePrototypeFooter";
|
||||
|
||||
const STYLES_ROOT = css`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
padding: 5%;
|
||||
margin: 0;
|
||||
`;
|
||||
|
||||
const STYLES_SECTION_CONTAINER = css `
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
`;
|
||||
|
||||
const STYLES_OPENSOURCE_CONTAINER = css `
|
||||
width: 100%;
|
||||
background-color: ${Constants.system.foreground};
|
||||
`;
|
||||
|
||||
const STYLES_HEADER_TEXT = css`
|
||||
font-size: 4.768rem;
|
||||
padding: 0px 0px 32px 0px;
|
||||
width: 100%;
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
font-size: 2.441rem;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_SECTION_TEXT = css `
|
||||
font-size: 1rem;
|
||||
color: ${Constants.system.black};
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_CONTRIBUTOR_CONTAINER = css `
|
||||
display: grid;
|
||||
padding-top: 32px;
|
||||
column-gap: 5px;
|
||||
row-gap: 10px;
|
||||
justify-items: center;
|
||||
align-item: center;
|
||||
grid-template-columns: repeat(auto-fit, 150px);
|
||||
height: 70vh;
|
||||
overflow: hidden;
|
||||
`;
|
||||
|
||||
const STYLES_CONTRIBUTOR_CARD = css `
|
||||
height: 200px;
|
||||
width: 150px;
|
||||
background-color: ${Constants.system.white};
|
||||
`;
|
||||
|
||||
const STYLES_IMAGE_CONTAINER = css `
|
||||
height: 150px;
|
||||
width: 150px;
|
||||
`;
|
||||
|
||||
const STYLES_CARD_IMAGE = css `
|
||||
width: 100%;
|
||||
height: auto;
|
||||
`;
|
||||
|
||||
const STYLES_CARD_TEXT = css `
|
||||
font-size: 1rem;
|
||||
color: ${Constants.system.black};
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_SECTION_CONTRIBUTE = css `
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: auto 1fr 1fr;
|
||||
`;
|
||||
|
||||
const STYLES_BTN_SPACER = css`
|
||||
padding-bottom: 32px;
|
||||
`;
|
||||
|
||||
const STYLES_IMAGES_CONTAINER = css `
|
||||
grid-row: 1 / span 2;
|
||||
grid-column: 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
`;
|
||||
|
||||
const STYLES_IMAGE_CONT = css `
|
||||
max-width: 500px;
|
||||
float: right;
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
margin-bottom: 20px;
|
||||
border: 1px solid ${Constants.system.border};
|
||||
box-shadow: 5px 5px 1px ${Constants.system.border};
|
||||
`;
|
||||
|
||||
const STYLES_CONTRIBUTE_CONTAINER = css `
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
`;
|
||||
|
||||
const STYLES_IMAGE_THREE = css `
|
||||
width: 100%;
|
||||
height: auto;
|
||||
`;
|
||||
|
||||
const STYLES_SECTION_QUOTE = css `
|
||||
grid-row: 3;
|
||||
grid-column: 1;
|
||||
font-size: 2rem;
|
||||
color: ${Constants.system.black};
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
font-size: 1rem;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_CONTACT_CONTAINER = css `
|
||||
width: 100%;
|
||||
height: auto;
|
||||
`;
|
||||
|
||||
const STYLES_CONTACT_BTN_CONTAINER = css `
|
||||
display: flex;
|
||||
padding: 96px 0;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
`;
|
||||
|
||||
const STYLES_INTEGRATE_GIF = css `
|
||||
width: 100%
|
||||
height: 70vh;
|
||||
padding-top: 20vh;
|
||||
`;
|
||||
|
||||
const STYLES_DESIGN_CONTAINER = css `
|
||||
display: grid;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-column-gap: 32px;
|
||||
`;
|
||||
|
||||
const STYLES_D_TEXT = css `
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
`;
|
||||
|
||||
const STYLES_DESIGN_CODE = css `
|
||||
width: 100%;
|
||||
grid-row: 2;
|
||||
grid-column: 1;
|
||||
`;
|
||||
|
||||
const STYLES_D_IMAGE_CONTAINER = css `
|
||||
height: auto;
|
||||
width: 90%;
|
||||
grid-column: 2;
|
||||
grid-row: 1 / span 2;
|
||||
`;
|
||||
|
||||
const STYLES_DESIGN_IMAGE = css `
|
||||
width: 100%;
|
||||
height: auto;
|
||||
`;
|
||||
|
||||
export const getServerSideProps = async (context) => {
|
||||
return {
|
||||
props: { ...context.query },
|
||||
};
|
||||
};
|
||||
|
||||
export default class IndexPage extends React.Component {
|
||||
async componentDidMount() {
|
||||
const response = await Actions.health();
|
||||
console.log("HEALTH_CHECK", response);
|
||||
this.addContributors();
|
||||
}
|
||||
|
||||
contributorsList = [
|
||||
{id: 1,
|
||||
name: "jimmylee",
|
||||
url: "https://github.com/jimmylee",
|
||||
organization: "",
|
||||
pic: "/static/a1.jpg"
|
||||
},
|
||||
{id: 2,
|
||||
name: "martinalong",
|
||||
url: "https://github.com/martinalong",
|
||||
organization: "",
|
||||
pic: "/static/a1.jpg"
|
||||
},
|
||||
{id: 3,
|
||||
name: "gndclouds",
|
||||
url: "https://github.com/gndclouds",
|
||||
organization: "",
|
||||
pic: "/static/a1.jpg"
|
||||
},
|
||||
{id: 4,
|
||||
name: "uonai",
|
||||
url: "https://github.com/uonai",
|
||||
organization: "",
|
||||
pic: "/static/a1.jpg"
|
||||
},
|
||||
{id: 5,
|
||||
name: "tarafanlin",
|
||||
url: "https://github.com/tarafanlin",
|
||||
organization: "",
|
||||
pic: "/static/a1.jpg"
|
||||
},
|
||||
{id: 6,
|
||||
name: "jasonleyser",
|
||||
url: "https://github.com/",
|
||||
organization: "",
|
||||
pic: "/static/a1.jpg"
|
||||
},
|
||||
{id: 7,
|
||||
name: "akuokojnr",
|
||||
url: "https://github.com/akuokojnr",
|
||||
organization: "",
|
||||
pic: "/static/a1.jpg"
|
||||
},
|
||||
{id: 8,
|
||||
name: "jordattebayo",
|
||||
url: "https://github.com/jordattebayo",
|
||||
organization: "",
|
||||
pic: "/static/a1.jpg"
|
||||
},
|
||||
{id: 9,
|
||||
name: "Pooja",
|
||||
url: "https://github.com/",
|
||||
organization: "",
|
||||
pic: "/static/a1.jpg"
|
||||
},
|
||||
{id: 10,
|
||||
name: "tmytrn",
|
||||
url: "https://github.com/tmrtrn",
|
||||
organization: "",
|
||||
pic: "/static/a1.jpg"
|
||||
},
|
||||
{id: 11,
|
||||
name: "motdde",
|
||||
url: "https://github.com/motdde",
|
||||
organization: "",
|
||||
pic: "/static/a1.jpg"
|
||||
},
|
||||
{id: 12,
|
||||
name: "harisbutt",
|
||||
url: "https://github.com/harisbutt",
|
||||
organization: "",
|
||||
pic: "/static/a1.jpg"
|
||||
},
|
||||
{id: 13,
|
||||
name: "andrewxhill",
|
||||
url: "https://github.com/andrewxhill",
|
||||
organization: "",
|
||||
pic: "/static/a1.jpg"
|
||||
},
|
||||
{id: 14,
|
||||
name: "johannes-jp",
|
||||
url: "https://github.com/johannes-jp",
|
||||
organization: "",
|
||||
pic: "/static/a1.jpg"
|
||||
},
|
||||
{id: 15,
|
||||
name: "Anish-Agnihotri",
|
||||
url: "https://github.com/anish-agnihotri",
|
||||
organization: "",
|
||||
pic: "/static/a1.jpg"
|
||||
},
|
||||
{id: 16,
|
||||
name: "Aminejvm",
|
||||
url: "https://github.com/aminejvm",
|
||||
organization: "",
|
||||
pic: "/static/a1.jpg"
|
||||
},
|
||||
]
|
||||
|
||||
addContributors = () => {
|
||||
const allContributors = []
|
||||
const contributors = this.contributorsList
|
||||
for (let c of contributors) {
|
||||
allContributors.push(
|
||||
<div key={c.id} css={STYLES_CONTRIBUTOR_CARD}>
|
||||
<div css={STYLES_IMAGE_CONTAINER}>
|
||||
<img css={STYLES_CARD_IMAGE} src={c.pic}/>
|
||||
</div>
|
||||
<System.P css={STYLES_CARD_TEXT}>
|
||||
{c.name}
|
||||
</System.P>
|
||||
<a href={c.url}>{`@${c.name}`}</a>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
ReactDOM.render(allContributors, document.getElementById("contr-cont"))
|
||||
}
|
||||
|
||||
render() {
|
||||
const title = `Slate`;
|
||||
const description =
|
||||
"The place for all of your assets. Powered by Textile and Filecoin.";
|
||||
const url = "https://slate.host/community";
|
||||
|
||||
return (
|
||||
<WebsitePrototypeWrapper
|
||||
title={title}
|
||||
description={description}
|
||||
url={url}
|
||||
>
|
||||
<WebsitePrototypeHeader />
|
||||
<div css={STYLES_ROOT}>
|
||||
<div css={STYLES_OPENSOURCE_CONTAINER}>
|
||||
<System.H1 css={STYLES_HEADER_TEXT}>Open source</System.H1>
|
||||
<System.P css={STYLES_SECTION_TEXT}>
|
||||
Slate is designed and built by a growing community of hackers,
|
||||
artists, and creatives on the web.
|
||||
</System.P>
|
||||
<div id="contr-cont" css={STYLES_CONTRIBUTOR_CONTAINER}>
|
||||
</div>
|
||||
</div>
|
||||
<div css={STYLES_CONTRIBUTE_CONTAINER}>
|
||||
<System.H1 css={STYLES_HEADER_TEXT}>Contribute</System.H1>
|
||||
<div css={STYLES_SECTION_CONTRIBUTE}>
|
||||
<System.P css={STYLES_SECTION_TEXT, STYLES_BTN_SPACER}>Get involved with the project and contribute.</System.P>
|
||||
<a>
|
||||
<System.ButtonPrimary>Contribute on Github</System.ButtonPrimary>
|
||||
</a>
|
||||
|
||||
<div css={STYLES_IMAGES_CONTAINER}>
|
||||
<div css={STYLES_IMAGE_CONT}><img css={STYLES_IMAGE_THREE} src="/static/githubissueA.jpg" alt="Previous GitHub Issues for Slate" /></div>
|
||||
<div css={STYLES_IMAGE_CONT}><img css={STYLES_IMAGE_THREE} src="/static/githubissueB.jpg" alt="Previous GitHub Issues for Slate" /></div>
|
||||
<div css={STYLES_IMAGE_CONT}> <img css={STYLES_IMAGE_THREE} src="/static/githubissueC.jpg" alt="Previous GitHub Issues for Slate" /></div>
|
||||
</div>
|
||||
|
||||
<System.P css={STYLES_SECTION_QUOTE}>
|
||||
<q cite="#">Maybe put here an interesting quote about collaboration?</q><br/>
|
||||
–Albert Einstein
|
||||
</System.P>
|
||||
</div>
|
||||
</div>
|
||||
<div css={STYLES_CONTACT_CONTAINER}>
|
||||
<System.H1 css={STYLES_HEADER_TEXT}>Contact</System.H1>
|
||||
<System.P css={STYLES_SECTION_TEXT}>
|
||||
Reach out to any of the core contributors, reach us on Twitter, or
|
||||
join our Slack.
|
||||
</System.P>
|
||||
<div css={STYLES_CONTACT_BTN_CONTAINER}>
|
||||
<a>
|
||||
<System.ButtonPrimary>Join Slack Discussions</System.ButtonPrimary>
|
||||
</a>
|
||||
<a>
|
||||
<System.ButtonPrimary>Twitter @_slate</System.ButtonPrimary>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div css={STYLES_SECTION_CONTAINER}>
|
||||
<System.H1 css={STYLES_HEADER_TEXT}>Integrate</System.H1>
|
||||
<System.P css={STYLES_SECTION_TEXT}>
|
||||
Explore our API and SDK and build on top of Slate
|
||||
</System.P>
|
||||
<div css={STYLES_INTEGRATE_GIF}>
|
||||
<CodeBlock>npm install --save slate-react-system</CodeBlock>
|
||||
<img src="" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div css={STYLES_SECTION_CONTAINER}>
|
||||
<System.H1 css={STYLES_HEADER_TEXT}>Design System</System.H1>
|
||||
<div css={STYLES_DESIGN_CONTAINER}>
|
||||
<System.P css={STYLES_SECTION_TEXT, STYLES_D_TEXT}>
|
||||
Check out our open source design system. You can use these
|
||||
components, experiences, and constants in your own React projects.
|
||||
First, install the npm module:{" "}
|
||||
</System.P>
|
||||
<div css={STYLES_DESIGN_CODE}>
|
||||
<CodeBlock>npm install --save slate-react-system</CodeBlock>
|
||||
</div>
|
||||
<div css={STYLES_D_IMAGE_CONTAINER}>
|
||||
<img css={STYLES_DESIGN_IMAGE} src="/static/designSystemScreenshot.png" alt="A screenshot of Slate's design system"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<WebsitePrototypeFooter />
|
||||
</WebsitePrototypeWrapper>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,121 +0,0 @@
|
||||
import * as React from "react";
|
||||
import * as Constants from "~/common/constants";
|
||||
import * as Actions from "~/common/actions";
|
||||
import * as System from "~/components/system";
|
||||
|
||||
import { css } from "@emotion/react";
|
||||
|
||||
import WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper";
|
||||
import WebsitePrototypeHeader from "~/components/core/WebsitePrototypeHeader";
|
||||
import WebsitePrototypeFooter from "~/components/core/NewWebsitePrototypeFooter";
|
||||
|
||||
const STYLES_ROOT = css`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
section {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_APP = css`
|
||||
background-color: #e2e2e2;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
`;
|
||||
|
||||
const STYLES_EXTENSTION = css`
|
||||
background-color: #c4c4c4;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
`;
|
||||
const STYLES_WRAPPER_TEXT = css`
|
||||
width: 40%;
|
||||
align-items: left;
|
||||
`;
|
||||
const STYLES_BROWSER = css`
|
||||
width: 60%;
|
||||
border: 1px solid #000000;
|
||||
box-shadow: 0px 0px 0px #dcdcdc;
|
||||
align-items: right;
|
||||
`;
|
||||
|
||||
export const getServerSideProps = async (context) => {
|
||||
return {
|
||||
props: { ...context.query },
|
||||
};
|
||||
};
|
||||
|
||||
export default class IndexPage extends React.Component {
|
||||
async componentDidMount() {
|
||||
const response = await Actions.health();
|
||||
console.log("HEALTH_CHECK", response);
|
||||
}
|
||||
|
||||
render() {
|
||||
const title = `Slate Download`;
|
||||
const description = "Donwload Slate app and web extenstion";
|
||||
const url = "https://slate.host/download";
|
||||
|
||||
return (
|
||||
<WebsitePrototypeWrapper
|
||||
title={title}
|
||||
description={description}
|
||||
url={url}
|
||||
>
|
||||
<WebsitePrototypeHeader />
|
||||
<div css={STYLES_ROOT}>
|
||||
<section css={STYLES_APP}>
|
||||
<div css={STYLES_WRAPPER_TEXT}>
|
||||
<System.H1>Slate client for Mac, Windows and Linux</System.H1>
|
||||
<System.P>
|
||||
Local folder and offline client for seamless filesharing between
|
||||
your machine and the network
|
||||
</System.P>
|
||||
<a>
|
||||
<button>
|
||||
Download Slate for <span>Mac</span>
|
||||
</button>
|
||||
</a>
|
||||
<System.P>
|
||||
Also avaible for <a>Windows</a> and <a>Linux</a>
|
||||
</System.P>
|
||||
</div>
|
||||
|
||||
<img
|
||||
css={STYLES_BROWSER}
|
||||
src="https://source.unsplash.com/user/gndclouds/800x600"
|
||||
alt="example image"
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section css={STYLES_EXTENSTION}>
|
||||
<div css={STYLES_WRAPPER_TEXT}>
|
||||
<System.H1>Slate Chrome Extensions</System.H1>
|
||||
<System.P>
|
||||
Take any image on the web and save it to Slate right from your
|
||||
browser tab
|
||||
</System.P>
|
||||
<a>
|
||||
<button>Get Chrome Extension</button>
|
||||
</a>
|
||||
</div>
|
||||
<img
|
||||
css={STYLES_BROWSER}
|
||||
src="https://source.unsplash.com/user/gndclouds/800x600"
|
||||
alt="example image"
|
||||
/>
|
||||
</section>
|
||||
<section>
|
||||
<System.H1>Changelog</System.H1>
|
||||
<System.P>List of releases</System.P>
|
||||
</section>
|
||||
</div>
|
||||
<WebsitePrototypeFooter />
|
||||
</WebsitePrototypeWrapper>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -461,9 +461,9 @@ const STYLES_SLATE_CARD_CTA_PARAGRAPH = css`
|
||||
}
|
||||
`;
|
||||
|
||||
export const getServerSideProps = async (context) => {
|
||||
export const getServerSideProps = async context => {
|
||||
return {
|
||||
props: { ...context.query },
|
||||
props: { ...context.query }
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user