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

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

Browse Source 
landing v.2 iteration + terms & guideline pages v.2
This commit is contained in:
CAKE 2020-09-29 03:53:43 -07:00 committed by GitHub
commit b44794370a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 865 additions and 1337 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
common/constants.js
View File

@ -37,6 +37,7 @@ export const system = {
newBlue: "#043D96",
newGreen: "#377749",
newYellow: "#F2B256",
newRed: "#BE5234",
shadow: "rgba(15, 14, 18, 0.03)",
};

9
components/core/NewWebsitePrototypeFooter.js
View File

@ -23,8 +23,6 @@ const STYLES_CONTAINER = css`
z-index: ${Constants.zindex.navigation};
@media (max-width: ${Constants.sizes.mobile}px) {
position: absolute;
flex-shrink: 0;
display: block;
justify-content: left;
padding: 64px 24px;
@ -50,9 +48,7 @@ const STYLES_LINK = css`
`;
const STYLES_FLEX = css`
min-width: 10%;
display: flex;
color: ${Constants.system.gray};
@media (max-width: ${Constants.sizes.mobile}px) {
display: block;
@ -62,10 +58,7 @@ const STYLES_FLEX = css`
const STYLES_CONTENT_BLOCK = css`
width: 16.67%;
@media {
max-width: ${Constants.sizes.tablet}px;
}
{
@media (max-width: ${Constants.sizes.tablet}px) {
width: 50%;
}
`;

1
components/core/NewWebsitePrototypeHeader.js
View File

@ -23,7 +23,6 @@ const STYLES_CONTAINER = css`
display: flex;
justify-content: space-between;
padding: 16px 24px;
mix-blend-mode: normal;
}
`;

359
pages/guidelines-new.js Normal file
View File

@ -0,0 +1,359 @@
import React, { useState } from "react";
import * as System from "~/components/system";
import * as Constants from "~/common/constants";
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: 88px 88px 128px 88px;
width: 100%;
margin: 0 auto;
@media (max-width: ${Constants.sizes.mobile}px) {
display: block;
padding: 24px 24px 88px 24px;
}
`;
const STYLES_H1 = css`
width: 30%;
font-size: ${Constants.typescale.lvl5};
font-family: ${Constants.font.medium};
font-weight: 400;
line-height: 1.3;
padding: 0px 0px 16px 0px;
letter-spacing: -0.021rem;
width: 100%;
color: ${Constants.system.slate};
@media (max-width: ${Constants.sizes.tablet}px) {
font-size: ${Constants.typescale.lvl4};
}
@media (max-width: ${Constants.sizes.mobile}px) {
font-size: ${Constants.typescale.lvl3};
}
`;
const STYLES_H2 = css`
font-size: ${Constants.typescale.lvl3};
font-family: ${Constants.font.medium};
font-weight: 400;
line-height: 1.3;
letter-spacing: -0.019rem;
margin-top: 24px;
width: 100%;
color: ${Constants.system.slate};
@media (max-width: ${Constants.sizes.tablet}px) {
font-size: ${Constants.typescale.lvl2};
}
`;
const STYLES_CONTENT_BLOCK1 = css`
width: 30%;
position: -webkit-sticky;
position: sticky;
top: 80px;
@media (max-width: ${Constants.sizes.mobile}px) {
position: relative;
top: 0;
width: 100%;
}
`;
const STYLES_CONTENT_BLOCK2 = css`
margin: -264px 0 0 auto;
width: 66%;
@media (max-width: ${Constants.sizes.mobile}px) {
margin: 48px 0 0 0;
width: 100%;
}
`;
const STYLES_LIST = css`
list-style-type: none;
font-family: ${Constants.font.text};
font-weight: 400;
font-size: ${Constants.typescale.lvl1};
letter-spacing: -0.011rem;
line-height: 1.5;
margin: 4px 0 0 16px;
opacity: 0.7;
padding: 0;
`;
const STYLES_LINK = css`
text-decoration: none;
transition: 200ms ease none;
color: ${Constants.system.slate};
:hover {
color: ${Constants.system.newBlue};
}
:active {
color: ${Constants.system.newBlue};
}
:visited {
color: ${Constants.system.slate};
}
`;
export default class GuidelinesPage extends React.Component {
render() {
const title = `Slate: Terms of Service`;
const description = "You must agree to our terms of service to use Slate.";
const url = "https://slate.host/guidelines-new";
return (
<WebsitePrototypeWrapper title={title} description={description} url={url}>
<WebsitePrototypeHeader />
<div css={STYLES_ROOT}>
<div css={STYLES_CONTENT_BLOCK1}>
<h1 css={STYLES_H1}> 💙</h1>
<h1 css={STYLES_H1}> Community Guidelines</h1>
<br />
<System.P>In this page</System.P>
<ul css={STYLES_LIST}>
<li>
<a css={STYLES_LINK} href="#Friendly Harassment-Free Space">
Friendly Harassment-Free Space
</a>
</li>
<li>
<a css={STYLES_LINK} href="#Avoid Marketing or Soliciting">
Avoid Marketing or Soliciting
</a>
</li>
<li>
<a css={STYLES_LINK} href="#Reporting Violations of this Code of Conduct">
Reporting Violations of this Code of Conduct
</a>
</li>
<li>
<a css={STYLES_LINK} href="#Copyright Violations">
Copyright Violations
</a>
</li>
<li>
<a css={STYLES_LINK} href="#Consequences">
Consequences
</a>
</li>
<li>
<a css={STYLES_LINK} href="#Addressing Grievances">
Addressing Grievances
</a>
</li>
<li>
<a css={STYLES_LINK} href="#Contact Info">
Contact Info
</a>
</li>
<li>
<a css={STYLES_LINK} href="#Changes">
Changes
</a>
</li>
<li>
<a css={STYLES_LINK} href="#Credit and License">
Credit and License
</a>
</li>
</ul>
</div>
<br />
<div css={STYLES_CONTENT_BLOCK2}>
<System.P>
We believe that our mission is best served in an environment that is friendly, safe, and accepting; free
from intimidation or harassment. Towards this end, certain behaviors and practices will not be tolerated.
</System.P>
<br />
<System.UL>
<System.LI>Be respectful.</System.LI>
<System.LI>
We're here to help: <CopyEmail />
</System.LI>
<System.LI>Abusive behavior is never tolerated.</System.LI>
<System.LI>
Violations of this code may result in swift and permanent expulsion from the Slate community.
</System.LI>
<System.LI>
"Too long, didn't read" is not a valid excuse for not knowing what is in this document.
</System.LI>
</System.UL>
<br />
<System.P>
We expect all members of the Slate community to abide by this Code of Conduct at all times in all Slate
community venues, online and in person, and in one-on-one communications pertaining to Slate affairs.
</System.P>
<br />
<System.P>
This policy covers the usage of Filecoin public infrastructure, as well as other Filecoin websites,
Filecoin related events, and any other services offered by or on behalf of the Filecoin community. It also
applies to behavior in the context of the Filecoin Open Source project communities, including but not
limited to public GitHub repositories, IRC channels, social media, mailing lists, and public events.
</System.P>
<br />
<System.P>
The definitions of various subjective terms such as "discriminatory", "hateful", or "confusing" will be
decided at the sole discretion of the Filecoin abuse team.
</System.P>
<div id="Friendly Harassment-Free Space">
<br />
<br />
<h2 css={STYLES_H2}>Friendly Harassment-Free Space</h2>
<br />
<System.P>
We are committed to providing a friendly, safe and welcoming environment for all, regardless of gender
identity, sexual orientation, disability, ethnicity, religion, age, physical appearance, body size,
race, or similar personal characteristics.We ask that you please respect that people have differences of
opinion regarding technical choices, and that every design or implementation choice carries a trade-off
and numerous costs. There is seldom a single right answer. A difference of technology preferences is not
a license to be rude.{" "}
</System.P>
<br />
<System.P>
Any spamming, trolling, flaming, baiting, or other attention-stealing behavior is not welcome, and will
not be tolerated. Harassing other users is never tolerated, whether via public or private media. Avoid
using offensive or harassing nicknames, or other identifiers that might detract from a friendly, safe,
and welcoming environment for all.{" "}
</System.P>
<br />
<System.P>
Harassment includes, but is not limited to: harmful or prejudicial verbal or written comments related to
gender identity, sexual orientation, disability, ethnicity, religion, age, physical appearance, body
size, race, or similar personal characteristics; inappropriate use of nudity, sexual images, and/or
sexually explicit language in public spaces; threats of physical or non-physical harm; deliberate
intimidation, stalking or following; harassing photography or recording; sustained disruption of talks
or other events; inappropriate physical contact; and unwelcome sexual attention.{" "}
</System.P>
<br />
<System.P>
Media shared through public infrastructure run by the Filecoin team must not contain illegal or
infringing content. You should only publish content via Filecoin public infrastructure if you have the
right to do so. This include complying with all software license agreements or other intellectual
property restrictions. You will be solely responsible for any violation of laws or others' intellectual
property rights.
</System.P>
</div>
<div id="Avoid Marketing or Soliciting">
<br />
<br />
<h2 css={STYLES_H2}>Avoid Marketing or Soliciting</h2>
<br />
<System.P>
You are welcome to post endorsements of tools, products or services that you personally find useful, but
please refrain from blatant advertising, marketing or any kind of spam. Selling commercial services or
fundraising is not allowed.
</System.P>
</div>
<div id="Reporting Violations of this Code of Conduct">
<br />
<br />
<h2 css={STYLES_H2}>Reporting Violations of this Code of Conduct</h2>
<br />
<System.P>
If you believe someone is harassing you or has otherwise violated this Code of Conduct, please contact
us at <CopyEmail /> to send us an abuse report. If this is the initial report of a problem, please
include as much detail as possible. It is easiest for us to address issues when we have more context.
</System.P>
</div>
<div id="Copyright Violations">
<br />
<br />
<h2 css={STYLES_H2}>Copyright Violations</h2>
<br />
<System.P>
We respect the intellectual property of others and ask that you do too. If you believe any content or
other materials available through public Filecoin infrastructure violates a copyright held by you and
you would like to submit a notice pursuant to the Digital Millennium Copyright Act or other similar
international law, you can submit a notice to our agent for service of notice to: <CopyEmail />. Please
make sure your notice meets the Digital Millennium Copyright Act requirements.
</System.P>
</div>
<div id="Consequences">
<br />
<br />
<h2 css={STYLES_H2}>Consequences</h2>
<br />
<System.P>
All content published to public Filecoin infrastructure is hosted at the sole discretion of the Filecoin
team. Unacceptable behavior from any community member will not be tolerated. Anyone asked to stop
unacceptable behavior is expected to comply immediately. If a community member engages in unacceptable
behavior, the Filecoin team may take any action they deem appropriate, up to and including a temporary
ban or permanent expulsion from the community without warning (and without refund in the case of a paid
event or service).
</System.P>
</div>
<div id="Addressing Grievances">
<br />
<br />
<h2 css={STYLES_H2}>Addressing Grievances</h2>
<br />
<System.P>
Please contact <CopyEmail /> if you need to report a problem or address a grievance related to an abuse
report. If you feel you have been falsely or unfairly accused of violating this Code of Conduct, you
should contact <CopyEmail />. We will do our best to ensure that your grievance is handled
appropriately. In general, we will choose the course of action that we judge as being most in the
interest of fostering a safe and friendly community.
</System.P>
</div>
<div id="Contact Info">
<br />
<br />
<h2 css={STYLES_H2}>Contact Info</h2>
<br />
<System.P>
Please contact <CopyEmail /> if you need to report a problem or address a grievance related to an abuse
report. You are also encouraged to contact us if you are curious about something that might be "on the
line" between appropriate and inappropriate content. We are happy to provide guidance to help you be a
successful part of our community.
</System.P>
</div>
<div id="Changes">
<br />
<br />
<h2 css={STYLES_H2}>Changes</h2>
<br />
<System.P>
This is a living document and may be updated from time to time. Please refer to the{" "}
<a
href="https://github.com/filecoin-project/slate/blob/main/pages/guidelines.js"
alt="GitHub Changelog"
>
git history
</a>{" "}
for this document to view the changes.
</System.P>
</div>
<div id="Credit and License">
<br />
<br />
<h2 css={STYLES_H2}>Credit and License</h2>
<br />
<System.P>
This Code of Conduct is based on the{" "}
<a href="https://www.npmjs.com/policies/conduct">npm Code of Conduct</a>. This document may be reused
under a{" "}
<a href="http://creativecommons.org/licenses/by-sa/4.0/">
Creative Commons Attribution-ShareAlike License
</a>
.
</System.P>
</div>
</div>
</div>
<WebsitePrototypeFooter />
</WebsitePrototypeWrapper>
);
}
}

417
pages/index-new.js
View File

@ -20,12 +20,6 @@ const USER_SLATES = [
username: "haris",
preview: "https://slate.textile.io/ipfs/bafybeifgxtl7mq5djnorxedzi35hkizjmbjvdy3nnoitd3xvdnqpmruxbm",
},
{
name: "Mountains",
url: "https://slate.host/jason/mountains",
username: "jason",
preview: "https://slate.textile.io/ipfs/bafkreies6uykgocrkunrsndxfubntyqvfqzo5wuwyos42vak6d4qnvtdn4",
},
{
name: "Loom",
url: "https://slate.host/tara/loom",
@ -38,6 +32,13 @@ const USER_SLATES = [
username: "slate",
preview: "https://slate.textile.io/ipfs/bafybeiaerbu2nivrgncqtwgwom27caji25netswvjbo6tcmbka47ucmupa",
},
{
name: "Start your first slate",
url: "/_",
username: "",
preview: "",
style: { backgroundColor: Constants.system.newBlue, color: Constants.system.white },
},
{
name: "Montreal underground",
url: "https://slate.host/tcosta/montreal-underground",
@ -77,10 +78,9 @@ const STYLES_H1 = css`
letter-spacing: -0.022rem;
line-height: 1.3;
color: ${Constants.system.slate};
margin-bottom: 1rem;
width: 95%;
margin-bottom: 16px;
@media (max-width: ${Constants.sizes.mobile}px) {
@media (max-width: ${Constants.sizes.tablet}px) {
font-size: ${Constants.typescale.lvl3};
}
`;
@ -93,18 +93,30 @@ const STYLES_P = css`
line-height: 1.5;
margin: 4px 0 0 0;
color: ${Constants.system.slate};
width: 90%;
width: 64%;
@media (max-width: ${Constants.sizes.tablet}px) {
width: 100%;
}
`;
const STYLES_TEXT_BLOCK = css`
display: block;
width: 50%;
@media (max-width: ${Constants.sizes.mobile}px) {
width: 100%;
}
`;
const STYLES_TEXT_BLOCK = css`
width: 33.3%;
const STYLES_TEXT_BLOCK_CENTER = css`
display: block;
margin: 0 auto;
width: 50%;
text-align: center;
@media (max-width: ${Constants.sizes.mobile}px) {
display: block;
margin-top: 48px;
width: 100%;
}
`;
@ -113,66 +125,35 @@ const STYLES_SECTION_WRAPPER = css`
width: 100%;
height: 100%;
padding: 120px 88px;
display: flex;
align-items: flex-start;
@media (max-width: ${Constants.sizes.tablet}px) {
padding: 88px;
}
@media (max-width: ${Constants.sizes.mobile}px) {
padding: 48px;
padding: 48px 24px;
display: block;
}
`;
const STYLES_BUTTON_PRIMARY = css`
margin: 32px 0 16px 0;
min-height: 48px;
box-sizing: border-box;
border: 0;
border-radius: 4px;
padding: 0 32px;
display: inline-flex;
align-items: center;
justify-content: center;
user-select: none;
background-color: ${Constants.system.newBlue};
color: ${Constants.system.white};
font-family: ${Constants.font.semiBold};
font-weight: 400;
font-size: ${Constants.typescale.lvl1};
letter-spacing: -0.011rem;
const STYLES_SECTIONCTA_WRAPPER = css`
padding: 88px 88px 240px 88px;
width: 100%;
height: 100%;
transition: 200ms ease all;
cursor: pointer;
@media (max-width: ${Constants.sizes.tablet}px) {
padding: 48px 24px 160px 24px;
}
:hover {
opacity: 0.9;
@media (max-width: ${Constants.sizes.mobile}px) {
padding: 0 24px 88px 24px;
}
`;
const STYLES_BUTTON_SECONDARY = css`
margin: 32px 0 16px 0;
min-height: 48px;
box-sizing: border-box;
border: 0;
border-radius: 4px;
padding: 0 32px;
display: inline-flex;
align-items: center;
justify-content: center;
user-select: none;
background-color: ${Constants.system.white};
const STYLES_LINK = css`
color: ${Constants.system.newBlue};
font-family: ${Constants.font.semiBold};
font-weight: 400;
font-size: ${Constants.typescale.lvl1};
letter-spacing: -0.011rem;
transition: 200ms ease all;
cursor: pointer;
:hover {
opacity: 0.9;
}
`;
const STYLES_LINK_WHITE = css`
color: ${Constants.system.white};
text-decoration: none;
transition: 200ms ease none;
font-family: ${Constants.font.medium};
@ -209,87 +190,52 @@ const STYLES_HIGHLIGHT_YELLOW = css`
const STYLES_HIGHLIGHT_BLUE = css`
color: ${Constants.system.newBlue};
font-family: ${Constants.font.medium};
font-weight: 400;
`;
const STYLES_HIGHLIGHT_RED = css`
color: ${Constants.system.newRed};
`;
const STYLES_HR_GREEN = css`
border: 0;
border-top: 1px solid ${Constants.system.newGreen};
@media (max-width: ${Constants.sizes.mobile}px) {
margin-left: 0;
width: 10%;
border-top: 2px solid ${Constants.system.newGreen};
}
`;
const STYLES_HR_BLUE = css`
const STYLES_HR_YELLOW = css`
border: 0;
border-top: 1px solid ${Constants.system.newBlue};
`;
border-top: 1px solid ${Constants.system.newYellow};
const STYLES_VR = css`
width: 0.5px;
height: 50px;
opacity: 0.5;
margin: 0 auto;
@media (max-width: ${Constants.sizes.mobile}px) {
margin-left: 0;
width: 10%;
border-top: 2px solid ${Constants.system.newYellow};
}
`;
const STYLES_IMG = css`
width: 66.6%;
height: auto;
width: 100%;
margin: 48px -88px 0 0;
overflow: hidden;
box-shadow: 0px 10px 50px 20px rgba(0, 0, 0, 0.2);
`;
const styleWhite = {
color: `${Constants.system.white}`,
};
const stylePWhite = {
color: `${Constants.system.white}`,
opacity: `0.7`,
};
const styleWall = {
backgroundColor: `${Constants.system.wall}`,
boxShadow: `-6px -6px 10px #ffffff, 4px 4px 10px #d4d4d4`,
display: `flex`,
};
const styleWallVert = {
backgroundColor: `${Constants.system.wall}`,
boxShadow: `-6px -6px 10px #ffffff, 4px 4px 10px #d4d4d4`,
};
const styleSlate = {
backgroundColor: `${Constants.system.slate}`,
boxShadow: `-6px -6px 10px #ffffff, 4px 4px 10px #d4d4d4`,
display: `flex`,
};
const styleCenter = {
width: `33.3%`,
margin: `auto`,
};
const styleCenterAlign = {
width: `33.3%`,
margin: `auto`,
textAlign: `center`,
};
const STYLES_SLATE_CARD_GROUP = css`
width: 100%;
display: flex;
flex-wrap: wrap;
margin-top: 48px;
@media (max-width: ${Constants.sizes.mobile}px) {
display: block;
}
`;
const STYLES_SLATE_CARD = css`
width: calc(33.33% - 16px);
height: 25vh;
margin: 16px 16px 0 0;
border-radius: 4px;
width: calc(33.33% - 1px);
height: 20vh;
margin: -1px -1px 0 0;
transition: 200ms ease box-shadow;
border: 1px solid ${Constants.system.darkGray};
@ -297,25 +243,19 @@ const STYLES_SLATE_CARD = css`
transition: 200ms ease box-shadow;
box-shadow: 0px 10px 40px 20px rgba(0, 0, 0, 0.1);
}
@media (max-width: ${Constants.sizes.mobile}px) {
width: 100%;
margin-bottom: 16px;
}
`;
const STYLES_CLEAN_SLATE = css`
width: 100%;
height: 25vh;
margin: 16px 16px 0 0;
border-radius: 4px;
width: calc(33.33% - 1px);
margin: 0 auto;
height: 20vh;
transition: 200ms ease box-shadow;
border: 1px solid ${Constants.system.darkGray};
opacity: 0.5;
background-color: ${Constants.system.newBlue};
@media (max-width: ${Constants.sizes.mobile}px) {
width: 100%;
margin-bottom: 16px;
:hover {
transition: 200ms ease box-shadow;
box-shadow: 0px 10px 40px 20px rgba(0, 0, 0, 0.1);
}
`;
@ -327,6 +267,13 @@ const STYLES_SLATE_CARD_TEXT = css`
display: flex;
justify-content: space-between;
padding: 8px 16px;
width: 100%;
height: 100%;
@media (max-width: ${Constants.sizes.mobile}px) {
flex-direction: column;
justify-content: space-between;
}
`;
const STYLES_CARDP = css`
@ -338,14 +285,14 @@ const STYLES_CARDP = css`
margin: 4px 0 0 0;
color: ${Constants.system.slate};
@media (max-width: ${Constants.sizes.mobile}px) {
width: 100%;
@media (max-width: ${Constants.sizes.tablet}px) {
font-size: ${Constants.typescale.lvl0};
}
`;
const SlateCard = (props) => {
return (
<div css={STYLES_SLATE_CARD}>
<div css={STYLES_SLATE_CARD} style={props.style}>
<a css={STYLES_SLATE_CARD_LINK} href={props.url} target="_blank">
<div
css={css`
@ -354,19 +301,18 @@ const SlateCard = (props) => {
background-color: transparent;
background-position: 50% 50%;
background-size: cover;
border-radius: 4px;
:hover {
background-color: ${Constants.system.pitchBlack};
background-image: url("${props.preview}");
opacity: 0.9;
}
`}
>
<div css={STYLES_SLATE_CARD_TEXT}>
<p css={STYLES_CARDP}>{props.name}</p>
<p css={STYLES_CARDP} style={{ opacity: 0.7 }}>
{`@${props.username}`}
<p css={STYLES_CARDP} style={props.style}>
{props.name}
</p>
<p css={STYLES_CARDP} style={{ opacity: 0.7 }}>{`${props.username}`}</p>
</div>
</div>
</a>
@ -374,12 +320,6 @@ const SlateCard = (props) => {
);
};
export const getServerSideProps = async (context) => {
return {
props: { ...context.query },
};
};
export default class IndexPage extends React.Component {
render() {
const title = `Slate`;
@ -390,39 +330,54 @@ export default class IndexPage extends React.Component {
<WebsitePrototypeWrapper title={title} description={description} url={url}>
<WebsitePrototypeHeader />
<div css={STYLES_ROOT}>
<div css={STYLES_SECTION_WRAPPER}>
<img
style={{ width: `100%`, marginBottom: -64 }}
src="https://slate.textile.io/ipfs/bafkreigowyoo25djd5qrbemkyelm5g2ptc5rc2vzyynwzgxfy4kmhbaumy"
/>
<div css={STYLES_TEXT_BLOCK} style={styleCenter}>
<div css={STYLES_SECTION_WRAPPER} style={{ display: `block` }}>
<div css={STYLES_TEXT_BLOCK_CENTER}>
<h1 css={STYLES_H1}>
Public file sharing network <span style={{ opacity: 0.7 }}>for you, your files, and your friends.</span>
Take <span css={STYLES_HIGHLIGHT_BLUE}>the blue pill</span>
</h1>
<button css={STYLES_BUTTON_PRIMARY} onClick={() => window.open("/_")}>
Use Slate
</button>
<p css={STYLES_P}>
<span css={STYLES_HIGHLIGHT_BLUE}>Enjoy 50GB free storage with early sign up.</span>
<p css={STYLES_P} style={{ width: `100%` }}>
for a new file-sharing experience that makes it possible for people to collect, organize, and link files
together.
</p>
<br />
<p css={STYLES_P} style={{ opacity: 0.7 }}>
Slate is a fully open-source file sharing network designed for research and collaboration. <br />
Store your data, <br />
organize it any way you like, <br />
and share it publicly with the world.
</p>
<br />
<p css={STYLES_P}>Powered by Textile, Filecoin and IPFS.</p>
</div>
<div css={STYLES_SLATE_CARD_GROUP}>
{USER_SLATES.map((each) => (
<SlateCard
key={each.name}
preview={each.preview}
url={each.url}
name={each.name}
username={each.username}
style={each.style}
/>
))}
</div>
</div>
<div css={STYLES_SECTION_WRAPPER} style={styleWall}>
<div css={STYLES_SECTION_WRAPPER} style={{ display: `block` }}>
<p css={STYLES_P} style={{ fontFamily: `${Constants.font.medium}` }}>
Get all the space you need for your valuable information
</p>
<br />
<img
style={{ width: `100%` }}
src="https://slate.textile.io/ipfs/bafkreig5365lqtjs5p3yrwh5p4a66wv372c5eesc2fhbmw3l5btourjo2a"
/>
<br />
<a css={STYLES_LINK} href="/_">
50GB free storage for early sign up ->
</a>
</div>
<div css={STYLES_SECTION_WRAPPER}>
<div css={STYLES_TEXT_BLOCK}>
<h1 css={STYLES_H1}>
<span css={STYLES_HIGHLIGHT_GREEN}>Store, annotate, cite, link</span> your files
<span css={STYLES_HIGHLIGHT_GREEN}>Store, annotate, cite, link</span> <br />
your files
</h1>
<p css={STYLES_P} style={{ opacity: 0.7 }}>
Slate is the new home for your valuable information.
Slate is the new home for information that matters to you.
</p>
<br />
<hr css={STYLES_HR_GREEN} />
@ -441,7 +396,11 @@ export default class IndexPage extends React.Component {
<li>Podcasts</li>
<li>Games</li>
<li>Code</li>
<li style={{ opacity: 0.7 }}>And more</li>
<li>
<a css={STYLES_LINK} href="/_">
+ more
</a>
</li>
</ul>
</div>
<img
@ -449,127 +408,67 @@ export default class IndexPage extends React.Component {
src="https://slate.textile.io/ipfs/bafybeidagkcnwti4ndspssvfzquuqfdib5ak2yq4kghdfcsybahm2v64me"
/>
</div>
<div css={STYLES_SECTION_WRAPPER} style={styleSlate}>
<div css={STYLES_SECTION_WRAPPER}>
<div css={STYLES_TEXT_BLOCK}>
<h1 css={STYLES_H1}>
<span css={STYLES_HIGHLIGHT_YELLOW}>Upload images</span>{" "}
<span style={styleWhite}>
<br />
from anywhere
</span>
</h1>
<p css={STYLES_P} style={stylePWhite}>
The Slate Chrome extension lets you seamlessly upload files to your slates from anywhere on the web.
</p>
<button
css={STYLES_BUTTON_SECONDARY}
onClick={() =>
window.open("https://chrome.google.com/webstore/detail/slate/gloembacbehhbfbkcfjmloikeeaebnoc")
}
>
Add Slate to Chrome
</button>
</div>
<img
css={STYLES_IMG}
style={{ boxShadow: `none` }}
src="https://slate.textile.io/ipfs/bafybeidlg6opyuq6hjli5glyfczrfxaqoftidcllhsd65vofyrbv5k56c4"
/>
</div>
<div css={STYLES_SECTION_WRAPPER} style={{ display: `flex` }}>
<div css={STYLES_TEXT_BLOCK}>
<h1 css={STYLES_H1}>
<span css={STYLES_HIGHLIGHT_BLUE}>Organize your mind</span> <br />
with drag and drop
<span css={STYLES_HIGHLIGHT_YELLOW}>Curate, present, share</span> <br />
your slates
</h1>
<p css={STYLES_P} style={{ opacity: 0.7 }}>
A modular interface for your files, giving you complete flexibility.
</p>
<br />
<hr css={STYLES_HR_BLUE} />
<hr css={STYLES_HR_YELLOW} />
<ul css={STYLES_LIST}>
<li>Arrange moodboard</li>
<li>Organize research</li>
<li>Share presentation</li>
<li style={{ opacity: 0.7 }}>And more</li>
<li>
<a css={STYLES_LINK} href="/_">
+ more
</a>
</li>
</ul>
</div>
<img
css={STYLES_IMG}
style={{ boxShadow: `0px 4px 100px 10px rgba(0, 0, 0, 0.1)` }}
src="https://slate.textile.io/ipfs/bafybeih5ndej2zhjxqewbqxqtf34su57lhdlxbeetv2xaokpvmo35exjry"
src="https://slate.textile.io/ipfs/bafybeihihnvl4gzh6vysjwwhzo2i4f5ed7qrh4e4iwaz7y6b3ua3hb5upm"
/>
</div>
<div css={STYLES_SECTION_WRAPPER} style={styleWallVert}>
<div css={STYLES_SECTION_WRAPPER} style={{ display: `block` }}>
<h1 css={STYLES_H1}>
<span css={STYLES_HIGHLIGHT_RED}>Connect to think, learn and disucss </span> <br />
with others
</h1>
<div css={STYLES_TEXT_BLOCK}>
<h1 css={STYLES_H1}>
<span css={STYLES_HIGHLIGHT_GREEN}>Connect with people</span> <br />
to learn, think, and discuss
</h1>
<p css={STYLES_P} style={{ opacity: 0.7 }}>
A file sharing network built on top of a storage system making it possible to connect with other people.
Information is only meaningful when it's shared. Slate is fundamentally a file sharing network built on
top of a storage system, making it possible to connect with other people.
</p>
</div>
<img
css={STYLES_IMG}
style={{ width: `100%`, boxShadow: `none` }}
src="https://slate.textile.io/ipfs/bafybeigscozubtk6szip7yeaukqnzbxqhladxu5fyu5mghi32sdpzyzlxm"
style={{ margin: `48px auto`, boxShadow: `none` }}
src="https://slate.textile.io/ipfs/bafkreihen4fii4jmtbpslpjofujdrgrbmnzr3pittluinvmdvszkhtsw2a"
/>
</div>
<div css={STYLES_SECTION_WRAPPER} style={styleSlate}>
<div css={STYLES_TEXT_BLOCK}>
<div css={STYLES_SECTIONCTA_WRAPPER}>
<div css={STYLES_TEXT_BLOCK_CENTER}>
<h1 css={STYLES_H1}>
<span css={STYLES_HIGHLIGHT_YELLOW}>Privacy feature</span>{" "}
<span style={styleWhite}>
{" "}
<br />
coming soon
</span>
<span css={STYLES_HIGHLIGHT_BLUE}>Take a slate</span> <br />
to experience the file sharing network
</h1>
<p css={STYLES_P} style={stylePWhite}>
Building on top of Filecoin, Textile and IPFS — technologies built around ownership and transparency for
the future of the web, Slate will soon support people who want to provide key-only-access to data. This
will allow you to send data privately to people you trust.
</p>
<br />
<a css={STYLES_LINK_WHITE} href="https://filecoin.io" target="_blank">
Learn more about Filecoin -&gt;
</a>
</div>
<img
css={STYLES_IMG}
style={{ boxShadow: `none` }}
src="https://slate.textile.io/ipfs/bafybeigp65g7y5pdor5gkvm3f43m35n4dr2rq62hdltfe7iwbiltdoj7yy"
/>
</div>
<div css={STYLES_SECTION_WRAPPER}>
<div css={STYLES_TEXT_BLOCK} style={styleCenterAlign}>
<h1 css={STYLES_H1}>
<span css={STYLES_HIGHLIGHT_BLUE}>Join us</span> <br />
in the file sharing network
</h1>
<br />
<div css={STYLES_CLEAN_SLATE}>
<div css={STYLES_CLEAN_SLATE}>
<a css={STYLES_SLATE_CARD_LINK} href="/_">
<div css={STYLES_SLATE_CARD_TEXT}>
<p css={STYLES_CARDP}>A clean slate</p>
<p css={STYLES_CARDP} style={{ color: `${Constants.system.white}` }}>
Start the journey
</p>
</div>
</div>
<hr css={STYLES_VR} />
<button css={STYLES_BUTTON_PRIMARY} style={{ margin: 0 }} onClick={() => window.open("/_")}>
Use Slate
</button>
</div>
<div css={STYLES_SLATE_CARD_GROUP}>
{USER_SLATES.map((each) => (
<SlateCard
key={each.name}
preview={each.preview}
url={each.url}
name={each.name}
username={each.username}
/>
))}
</a>
</div>
</div>
</div>

1067
pages/index-t.js
View File

File diff suppressed because it is too large Load Diff

4
pages/slate-for-chrome.js
View File

@ -222,9 +222,9 @@ export default class IndexPage extends React.Component {
<a
css={STYLES_BUTTON_SECONDARY}
href="/public/static/slate-for-chrome-V0.4.zip"
download="Slate Chrome extension V0.4"
download="Slate Chrome extension.zip"
>
Download Slate for Chrome 0.4
Download Slate for Chrome
</a>
</div>
</div>

344
pages/terms-new.js Normal file
View File

@ -0,0 +1,344 @@
import React, { useState } from "react";
import * as System from "~/components/system";
import * as Constants from "~/common/constants";
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: 88px 88px 128px 88px;
width: 100%;
margin: 0 auto;
@media (max-width: ${Constants.sizes.mobile}px) {
display: block;
padding: 24px 24px 88px 24px;
}
`;
const STYLES_H1 = css`
font-size: ${Constants.typescale.lvl5};
font-family: ${Constants.font.medium};
font-weight: 400;
line-height: 1.3;
padding: 0px 0px 16px 0px;
letter-spacing: -0.021rem;
width: 100%;
color: ${Constants.system.slate};
@media (max-width: ${Constants.sizes.tablet}px) {
font-size: ${Constants.typescale.lvl4};
}
@media (max-width: ${Constants.sizes.mobile}px) {
font-size: ${Constants.typescale.lvl3};
}
`;
const STYLES_H2 = css`
font-size: ${Constants.typescale.lvl3};
font-family: ${Constants.font.medium};
font-weight: 400;
line-height: 1.3;
letter-spacing: -0.019rem;
margin-top: 24px;
width: 100%;
color: ${Constants.system.slate};
@media (max-width: ${Constants.sizes.tablet}px) {
font-size: ${Constants.typescale.lvl2};
}
`;
const STYLES_CONTENT_BLOCK1 = css`
width: 30%;
position: -webkit-sticky;
position: sticky;
top: 80px;
@media (max-width: ${Constants.sizes.mobile}px) {
position: relative;
top: 0;
width: 100%;
}
`;
const STYLES_CONTENT_BLOCK2 = css`
margin: -280px 0 0 auto;
width: 66%;
@media (max-width: ${Constants.sizes.mobile}px) {
margin: 48px 0 0 0;
width: 100%;
}
`;
const STYLES_LIST = css`
list-style-type: none;
font-family: ${Constants.font.text};
font-weight: 400;
font-size: ${Constants.typescale.lvl1};
letter-spacing: -0.011rem;
line-height: 1.5;
margin: 4px 0 0 16px;
opacity: 0.7;
padding: 0;
`;
const STYLES_LINK = css`
text-decoration: none;
transition: 200ms ease none;
color: ${Constants.system.slate};
:hover {
color: ${Constants.system.newBlue};
}
:active {
color: ${Constants.system.newBlue};
}
:visited {
color: ${Constants.system.slate};
}
`;
export default class TermsPage extends React.Component {
render() {
const title = `Slate: Terms of Service`;
const description = "You must agree to our terms of service to use Slate.";
const url = "https://slate.host/terms-new";
return (
<WebsitePrototypeWrapper title={title} description={description} url={url}>
<WebsitePrototypeHeader />
<div css={STYLES_ROOT}>
<div css={STYLES_CONTENT_BLOCK1}>
<h1 css={STYLES_H1}> 📑 </h1>
<h1 css={STYLES_H1}> Terms of Service</h1>
<br />
<System.P>In this page</System.P>
<ul css={STYLES_LIST}>
<li>
<a css={STYLES_LINK} href="#Storage Deals to the Filecoin Network">
Storage Deals to the Filecoin Network
</a>
</li>
<li>
<a css={STYLES_LINK} href="#Your Slate Account and Site">
Your Slate Account and Site
</a>
</li>
<li>
<a css={STYLES_LINK} href="#Responsibility of Contributors">
Responsibility of Contributors
</a>
</li>
<li>
<a css={STYLES_LINK} href="#Changes">
Changes
</a>
</li>
<li>
<a css={STYLES_LINK} href="#Termination">
Termination
</a>
</li>
<li>
<a css={STYLES_LINK} href="#Disclaimer of Warranties">
Disclaimer of Warranties
</a>
</li>
<li>
<a css={STYLES_LINK} href="#Limitation of Liability">
Limitation of Liability
</a>
</li>
<li>
<a css={STYLES_LINK} href="#General Representation and Warranty">
General Representation and Warranty
</a>
</li>
<li>
<a css={STYLES_LINK} href="#Indemnification">
Indemnification
</a>
</li>
<li>
<a css={STYLES_LINK} href="#Miscellaneous">
Miscellaneous
</a>
</li>
</ul>
</div>
<br />
<div css={STYLES_CONTENT_BLOCK2}>
<System.P>
The following terms and conditions govern all use of the Slate's website and all content, services and
products available at or through the website.
</System.P>
<br />
<System.P>
Please read this Agreement carefully before accessing or using the Website. By accessing or using any part
of the web site, you agree to become bound by the terms and conditions of this agreement.
</System.P>
<br />
<System.P>
If you do not agree to all the terms and conditions of this agreement, then you may not access the Website
or use any services. If these terms and conditions are considered an offer by Slate, acceptance is
expressly limited to these terms. The Website is available only to individuals who are at least 18 years
old.
</System.P>
<div id="Storage Deals to the Filecoin Network">
<br />
<br />
<h2 css={STYLES_H2}>Storage Deals to the Filecoin Network</h2>
<br />
<System.P>
You agree to allow Slate to make storage deals on your behalf to the Filecoin Network at any given time.
</System.P>
</div>
<div id="Your Slate Account and Site">
<br />
<br />
<h2 css={STYLES_H2}>Your Slate Account and Site</h2>
<br />
<System.P>
If you create an account on the Website, you are responsible for maintaining the security of your
account and its content, and you are fully responsible for all activities that occur under the account
and any other actions taken in connection with the Website. You must not describe or assign content to
your account in a misleading or unlawful manner, including in a manner intended to trade on the name or
reputation of others, and Slate may change or remove any description or keyword that it considers
inappropriate or unlawful, or otherwise likely to cause Slate liability. You must immediately notify
Slate of any unauthorized uses of your account or any other breaches of security. Slate will not be
liable for any acts or omissions by You, including any damages of any kind incurred as a result of such
acts or omissions.
</System.P>
</div>
<div id="Responsibility of Contributors">
<br />
<br />
<h2 css={STYLES_H2}>Responsibility of Contributors</h2>
<br />
<System.P>
If you operate an account, post material to the Website, post links on the Website, or otherwise make
(or allow any third party to make) material available by means of the Website (any such material,
Content), You are entirely responsible for the content of, and any harm resulting from, that Content.
That is the case regardless of whether the Content in question constitutes text or graphics. By making
Content available, you represent and warrant that: the downloading, copying and use of the Content will
not infringe the proprietary rights, including but not limited to the copyright, patent, trademark or
trade secret rights, of any third party.
</System.P>
</div>
<div id="Changes">
<br />
<br />
<h2 css={STYLES_H2}>Changes</h2>
<br />
<System.P>
Slate reserves the right, at its sole discretion, to modify or replace any part of this Agreement. It is
your responsibility to check this Agreement periodically for changes. Your continued use of or access to
the Website following the posting of any changes to this Agreement constitutes acceptance of those
changes. Slate may also, in the future, offer new services and/or features through the Website
(including, the release of new tools and resources). Such new features and/or services shall be subject
to the terms and conditions of this Agreement.
</System.P>
</div>
<div id="Termination">
<br />
<br />
<h2 css={STYLES_H2}>Termination</h2>
<br />
<System.P>
Slate may terminate your access to all or any part of the Website at any time, with or without cause,
with or without notice, effective immediately. If you wish to terminate this Agreement or your Slate
account (if you have one), you may simply discontinue using the Website. Notwithstanding the foregoing,
if you have a VIP Services account, such account can only be terminated by Slate if you materially
breach this Agreement and fail to cure such breach within thirty (30) days from Slate notice to you
thereof; provided that, Slate can terminate the Website immediately as part of a general shut down of
our service. All provisions of this Agreement which by their nature should survive termination shall
survive termination, including, without limitation, ownership provisions, warranty disclaimers,
indemnity and limitations of liability.
</System.P>
</div>
<div id="Disclaimer of Warranties">
<br />
<br />
<h2 css={STYLES_H2}>Disclaimer of Warranties</h2>
<br />
<System.P>
The Website is provided “as is”. Slate and its suppliers and licensors hereby disclaim all warranties of
any kind, express or implied, including, without limitation, the warranties of merchantability, fitness
for a particular purpose and non-infringement. Neither Slate nor its suppliers and licensors, makes any
warranty that the Website will be error free or that access thereto will be continuous or uninterrupted.
You understand that you download from, or otherwise obtain content or services through, the Website at
your own discretion and risk.
</System.P>
</div>
<div id="Limitation of Liability">
<br />
<br />
<h2 css={STYLES_H2}>Limitation of Liability</h2>
<br />
<System.P>
In no event will Slate, or its suppliers or licensors, be liable with respect to any subject matter of
this agreement under any contract, negligence, strict liability or other legal or equitable theory for:
any special, incidental or consequential damages; the cost of procurement or substitute products or
services; for interruption of use or loss or corruption of data; for any amounts that exceed the fees
paid by you to Slate under this agreement during the twelve (12) month period prior to the cause of
action.
</System.P>
<br />
<System.P>
Slate shall have no liability for any failure or delay due to matters beyond their reasonable control.
The foregoing shall not apply to the extent prohibited by applicable law.
</System.P>
</div>
<div id="General Representation and Warranty">
<br />
<br />
<h2 css={STYLES_H2}>General Representation and Warranty</h2>
<br />
<System.P>
You represent and warrant that Your use of the Website will be in strict accordance with the Slate
Community Guidelines, with this Agreement and with all applicable laws and regulations (including
without limitation any local laws or regulations in your country, state, city, or other governmental
area, regarding online conduct and acceptable content, and including all applicable laws regarding the
transmission of technical data exported from the United States or the country in which you reside) and
your use of the Website will not infringe or misappropriate the intellectual property rights of any
third party.
</System.P>
</div>
<div id="Indemnification">
<br />
<br />
<h2 css={STYLES_H2}>Indemnification</h2>
<br />
<System.P>
You agree to indemnify and hold harmless Slate, its contractors, and its licensors, and their respective
directors, officers, employees and agents from and against any and all claims and expenses, including
attorneys fees, arising out of your use of the Website, including but not limited to out of your
violation this Agreement.
</System.P>
</div>
<div id="Miscellaneous">
<br />
<br />
<h2 css={STYLES_H2}>Miscellaneous</h2>
<br />
<System.P>
This Agreement constitutes the entire agreement between Slate and you concerning the subject matter
hereof, and they may only be modified by a written amendment signed by an authorized executive of Slate,
or by the posting by Slate of a revised version. Except to the extent applicable law, if any, provides
otherwise, this Agreement, any access to or use of the Website will be governed by the laws of the state
of California, U.S.A.
</System.P>
</div>
</div>
</div>
<WebsitePrototypeFooter />
</WebsitePrototypeWrapper>
);
}
}