small updates to finalize landing and chrome extension pages

This commit is contained in:
tarafanlin 2020-10-05 12:49:01 -07:00
parent fb4dfb4574
commit 1a0e557650
3 changed files with 33 additions and 85 deletions

View File

@ -17,48 +17,42 @@ const SLATE_CORE_TEAM = [
name: "Jason Leyser", name: "Jason Leyser",
url: "https://github.com/jasonleyser", url: "https://github.com/jasonleyser",
username: "jasonleyser", username: "jasonleyser",
imageUrl: imageUrl: "https://slate.textile.io/ipfs/bafkreidw22xqcr6fo6m7k25qe3yemby6w4dlawbsu6yxs7qjnpu5gyoiwm",
"https://slate.textile.io/ipfs/bafkreidw22xqcr6fo6m7k25qe3yemby6w4dlawbsu6yxs7qjnpu5gyoiwm",
}, },
{ {
id: 2, id: 2,
name: "Cake", name: "Cake",
url: "https://github.com/jimmylee", url: "https://github.com/jimmylee",
username: "jimmylee", username: "jimmylee",
imageUrl: imageUrl: "https://slate.textile.io/ipfs/bafkreigxoyf43vw3p2hbc4ycsyh2og36cgy3s47xkb2n4w3i7auv2a6cei",
"https://slate.textile.io/ipfs/bafkreigxoyf43vw3p2hbc4ycsyh2og36cgy3s47xkb2n4w3i7auv2a6cei",
}, },
{ {
id: 3, id: 3,
name: "Martina Long", name: "Martina Long",
url: "https://github.com/martinalong", url: "https://github.com/martinalong",
username: "martinalong", username: "martinalong",
imageUrl: imageUrl: "https://slate.textile.io/ipfs/bafkreiasfgunf66fxncazlfzff3vp2btfe4j55jxgb2epcthrnvwkthwrq",
"https://slate.textile.io/ipfs/bafkreiasfgunf66fxncazlfzff3vp2btfe4j55jxgb2epcthrnvwkthwrq",
}, },
{ {
id: 4, id: 4,
name: "Haris Butt", name: "Haris Butt",
url: "https://github.com/harisbutt", url: "https://github.com/harisbutt",
username: "harisbutt", username: "harisbutt",
imageUrl: imageUrl: "https://slate.textile.io/ipfs/bafkreih3tbsh6f4m3m2yv3uyc7cupriovl4b354rsyyxuh6l5sv7ftdgzq",
"https://slate.textile.io/ipfs/bafkreih3tbsh6f4m3m2yv3uyc7cupriovl4b354rsyyxuh6l5sv7ftdgzq",
}, },
{ {
id: 5, id: 5,
name: "Tara Lin", name: "Tara Lin",
url: "https://github.com/tarafanlin", url: "https://github.com/tarafanlin",
username: "tarafanlin", username: "tarafanlin",
imageUrl: imageUrl: "https://slate.textile.io/ipfs/bafkreih4jc7scjz7ni24enb6ur32mn7eel5nax562zohrhcq2xkcegukj4",
"https://slate.textile.io/ipfs/bafkreieuxq4itewoes3wnpfxw2dfat6oi6rsy2snix7tvtgv7d7bgre64q",
}, },
{ {
id: 6, id: 6,
name: "William Felker", name: "William Felker",
url: "https://github.com/gndclouds", url: "https://github.com/gndclouds",
username: "gndclouds", username: "gndclouds",
imageUrl: imageUrl: "https://bafkreih2b33oaftlflmsg6njtu7i54f2nwws5gfhhf5w4qaezcejs6gjte.ipfs.slate.textile.io/",
"https://bafkreih2b33oaftlflmsg6njtu7i54f2nwws5gfhhf5w4qaezcejs6gjte.ipfs.slate.textile.io/",
}, },
]; ];
@ -68,64 +62,56 @@ const SLATE_CONTRIBUTOR_TEAM = [
name: "Pooja Shah", name: "Pooja Shah",
url: "https://github.com/pooja", url: "https://github.com/pooja",
username: "pooja", username: "pooja",
imageUrl: imageUrl: "https://slate.textile.io/ipfs/bafkreier4xffhrpconlprzxvzslqsovykqet7xj6zhhptxgu4nm2qw5i3u",
"https://slate.textile.io/ipfs/bafkreier4xffhrpconlprzxvzslqsovykqet7xj6zhhptxgu4nm2qw5i3u",
}, },
{ {
id: 2, id: 2,
name: "Why", name: "Why",
url: "https://github.com/whyrusleeping", url: "https://github.com/whyrusleeping",
username: "whyrusleeping", username: "whyrusleeping",
imageUrl: imageUrl: "https://slate.textile.io/ipfs/bafkreigvs53l22cuswtc4dtgndmc3aqns2unpc5xndnzx5gjdbw4yv6qhm",
"https://slate.textile.io/ipfs/bafkreigvs53l22cuswtc4dtgndmc3aqns2unpc5xndnzx5gjdbw4yv6qhm",
}, },
{ {
id: 4, id: 4,
name: "Aaron Stula", name: "Aaron Stula",
url: "https://github.com/asutula", url: "https://github.com/asutula",
username: "asutula", username: "asutula",
imageUrl: imageUrl: "https://slate.textile.io/ipfs/bafkreig3vnxyqqsxnrs24zpbbuc6jh5wvdsa7w6fx5gvi4j3t7rhoelhlm",
"https://slate.textile.io/ipfs/bafkreig3vnxyqqsxnrs24zpbbuc6jh5wvdsa7w6fx5gvi4j3t7rhoelhlm",
}, },
{ {
id: 3, id: 3,
name: "Ignacio Hagopian", name: "Ignacio Hagopian",
url: "https://github.com/jsign", url: "https://github.com/jsign",
username: "jsign", username: "jsign",
imageUrl: imageUrl: "https://slate.textile.io/ipfs/bafkreicktewpelagb3uvgd6psacr4kra66ii7254ghqflklek7taahni2m",
"https://slate.textile.io/ipfs/bafkreicktewpelagb3uvgd6psacr4kra66ii7254ghqflklek7taahni2m",
}, },
{ {
id: 5, id: 5,
name: "Sander Pick", name: "Sander Pick",
url: "https://github.com/sanderpick", url: "https://github.com/sanderpick",
username: "sanderpick", username: "sanderpick",
imageUrl: imageUrl: "https://slate.textile.io/ipfs/bafkreihptnrkusu7qnsm4qure7noknmsrhftyrx7zy6aaj4e2cxmtcey6q",
"https://slate.textile.io/ipfs/bafkreihptnrkusu7qnsm4qure7noknmsrhftyrx7zy6aaj4e2cxmtcey6q",
}, },
{ {
id: 6, id: 6,
name: "Andrew Hill", name: "Andrew Hill",
url: "https://github.com/andrewxhill", url: "https://github.com/andrewxhill",
username: "andrewxhill", username: "andrewxhill",
imageUrl: imageUrl: "https://slate.textile.io/ipfs/bafkreicfbr2qpmineh2ezi2kjfbshbpizkikectbdurfskczwatjkdfcoa",
"https://slate.textile.io/ipfs/bafkreicfbr2qpmineh2ezi2kjfbshbpizkikectbdurfskczwatjkdfcoa",
}, },
{ {
id: 7, id: 7,
name: "Akuoko Daniel Jnr", name: "Akuoko Daniel Jnr",
url: "https://github.com/akuokojnr", url: "https://github.com/akuokojnr",
username: "akuokojnr", username: "akuokojnr",
imageUrl: imageUrl: "https://slate.textile.io/ipfs/bafkreiblpimmchcbvsv3xh5aimjzrjw6bmiz6yg2dtifssf2oencg5z54q",
"https://slate.textile.io/ipfs/bafkreiblpimmchcbvsv3xh5aimjzrjw6bmiz6yg2dtifssf2oencg5z54q",
}, },
{ {
id: 8, id: 8,
name: "Narative", name: "Narative",
url: "https://github.com/narative", url: "https://github.com/narative",
username: "Narative", username: "Narative",
imageUrl: imageUrl: "https://slate.textile.io/ipfs/bafkreihdkapriwuzfh42zkhs3kwj5qki43dvyu6mq5j3rug3uf6i7egs6y",
"https://slate.textile.io/ipfs/bafkreihdkapriwuzfh42zkhs3kwj5qki43dvyu6mq5j3rug3uf6i7egs6y",
}, },
]; ];
@ -545,11 +531,7 @@ class CodeWindow extends React.Component {
const textMap = codeBlockToken; const textMap = codeBlockToken;
return ( return (
<div <div css={STYLES_CODE_BLOCK} className="language-javascript" style={this.props.style}>
css={STYLES_CODE_BLOCK}
className="language-javascript"
style={this.props.style}
>
{textMap.map((element, index) => { {textMap.map((element, index) => {
return ( return (
<div css={STYLES_LINE} key={`${element}-${index}`}> <div css={STYLES_LINE} key={`${element}-${index}`}>
@ -569,17 +551,9 @@ const SlateTeamCards = (props) => {
return ( return (
<div key={props.id} css={STYLES_CARD_WRAPPER}> <div key={props.id} css={STYLES_CARD_WRAPPER}>
<a href={props.url}> <a href={props.url}>
<System.HoverTileColorful <System.HoverTileColorful height={350} width={300} style={{ borderRadius: 4 }}>
height={350}
width={300}
style={{ borderRadius: 4 }}
>
<div css={STYLES_SLATE_CARD_EFFECTS}> <div css={STYLES_SLATE_CARD_EFFECTS}>
<img <img css={STYLES_IMG} alt={`Github Profile Photo for ${props.handle}`} src={props.preview} />
css={STYLES_IMG}
alt={`Github Profile Photo for ${props.handle}`}
src={props.preview}
/>
<div css={STYLES_CARD_TEXT}> <div css={STYLES_CARD_TEXT}>
<p css={STYLES_CARD_NAME}>{props.name}</p> <p css={STYLES_CARD_NAME}>{props.name}</p>
<p css={STYLES_CARD_GITHUB}>{`@${props.username}`}</p> <p css={STYLES_CARD_GITHUB}>{`@${props.username}`}</p>
@ -617,19 +591,14 @@ export default class CommunityPage extends React.Component {
const url = "https://slate.host/community"; const url = "https://slate.host/community";
return ( return (
<WebsitePrototypeWrapper <WebsitePrototypeWrapper title={title} description={description} url={url}>
title={title}
description={description}
url={url}
>
<WebsitePrototypeHeader /> <WebsitePrototypeHeader />
<div css={STYLES_ROOT}> <div css={STYLES_ROOT}>
<div css={STYLES_SECTION_HERO}> <div css={STYLES_SECTION_HERO}>
<div css={STYLES_DINNER_TABLE}> <div css={STYLES_DINNER_TABLE}>
<h1 css={STYLES_H1}>An open invitation to everyone</h1> <h1 css={STYLES_H1}>An open invitation to everyone</h1>
<p css={STYLES_P}> <p css={STYLES_P}>
Slate is designed and built by a growing community of hackers, Slate is designed and built by a growing community of hackers, artists, and creatives on the web.
artists, and creatives on the web.
</p> </p>
<button <button
css={STYLES_BUTTON} css={STYLES_BUTTON}
@ -647,8 +616,7 @@ export default class CommunityPage extends React.Component {
<div css={STYLES_FULL_WIDTH}> <div css={STYLES_FULL_WIDTH}>
<h1>Core Team</h1> <h1>Core Team</h1>
<p css={STYLES_P}> <p css={STYLES_P}>
We work on Slate, and you can reachout to us about for anything We work on Slate, and you can reachout to us about for anything you might need to know.
you might need to know.
</p> </p>
<div css={STYLES_CARD_GROUP}> <div css={STYLES_CARD_GROUP}>
{SLATE_CORE_TEAM.map((each) => ( {SLATE_CORE_TEAM.map((each) => (
@ -666,9 +634,7 @@ export default class CommunityPage extends React.Component {
<div css={STYLES_SECTION_WRAPPER} style={{ marginTop: 80 }}> <div css={STYLES_SECTION_WRAPPER} style={{ marginTop: 80 }}>
<div css={STYLES_FULL_WIDTH}> <div css={STYLES_FULL_WIDTH}>
<h2 css={STYLES_H2}>Contributors</h2> <h2 css={STYLES_H2}>Contributors</h2>
<p css={STYLES_P}> <p css={STYLES_P}>Our amazing community members helping us make Slate.</p>
Our amazing community members helping us make Slate.
</p>
<div css={STYLES_CARD_GROUP}> <div css={STYLES_CARD_GROUP}>
{SLATE_CONTRIBUTOR_TEAM.map((each) => ( {SLATE_CONTRIBUTOR_TEAM.map((each) => (
<SlateTeamCards <SlateTeamCards
@ -685,28 +651,17 @@ export default class CommunityPage extends React.Component {
<div css={STYLES_SECTION_WRAPPER}> <div css={STYLES_SECTION_WRAPPER}>
<div css={STYLES_SPLIT_WIDTH}> <div css={STYLES_SPLIT_WIDTH}>
<h2 css={STYLES_H2}> <h2 css={STYLES_H2}>
<span css={STYLES_HIGLIGHT_TEXT_GREEN}>Have an idea</span> for <span css={STYLES_HIGLIGHT_TEXT_GREEN}>Have an idea</span> for how to make Slate better?
how to make Slate better?
</h2> </h2>
<p css={STYLES_P}> <p css={STYLES_P}>You can create an issue on github or send us an email with your recommendation.</p>
You can create an issue on github or send us an email with your
recommendation.
</p>
<div> <div>
<button <button
css={STYLES_BUTTON} css={STYLES_BUTTON}
onClick={() => onClick={() => window.open("https://github.com/filecoin-project/slate/issues")}
window.open(
"https://github.com/filecoin-project/slate/issues"
)
}
> >
Create an issue Create an issue
</button> </button>
<button <button css={STYLES_BUTTON} onClick={() => window.open("https://twitter.com/_slate")}>
css={STYLES_BUTTON}
onClick={() => window.open("https://twitter.com/_slate")}
>
Tweet us Tweet us
</button> </button>
</div> </div>
@ -716,8 +671,7 @@ export default class CommunityPage extends React.Component {
<p> <p>
Hey Slate Team, Hey Slate Team,
<br /> <br />
<br /> Have you thought about adding a confetti effect to the <br /> Have you thought about adding a confetti effect to the download button?
download button?
<br /> <br />
<br /> <br />
Best, <br /> Best, <br />
@ -738,19 +692,13 @@ export default class CommunityPage extends React.Component {
<div css={STYLES_SECTION_WRAPPER}> <div css={STYLES_SECTION_WRAPPER}>
<div css={STYLES_SPLIT_WIDTH}> <div css={STYLES_SPLIT_WIDTH}>
<h2 css={STYLES_H2}> <h2 css={STYLES_H2}>
<span css={STYLES_HIGLIGHT_TEXT_YELLOW}> <span css={STYLES_HIGLIGHT_TEXT_YELLOW}>Explore our API and SDK </span>
Explore our API and SDK{" "}
</span>
and build on top of Slate. and build on top of Slate.
</h2> </h2>
<p css={STYLES_P}> <p css={STYLES_P}>
Checkout the examples below to see how quickly you can get up Checkout the examples below to see how quickly you can get up and running with Slates API.
and running with Slates API.
</p> </p>
<button <button css={STYLES_BUTTON} onClick={() => window.open("https://slate.host/system")}>
css={STYLES_BUTTON}
onClick={() => window.open("https://slate.host/system")}
>
Use Slate API Use Slate API
</button> </button>
</div> </div>

View File

@ -33,7 +33,7 @@ const USER_SLATES = [
preview: "https://slate.textile.io/ipfs/bafybeiclkru6hwzw2ghvsyrbnaf67taxxhq2hbpcia2oqj5ufdggwhcbti", preview: "https://slate.textile.io/ipfs/bafybeiclkru6hwzw2ghvsyrbnaf67taxxhq2hbpcia2oqj5ufdggwhcbti",
}, },
{ {
name: "Get started with Slate", name: "Get started with Slate ->",
url: "/_", url: "/_",
username: "", username: "",
preview: "", preview: "",
@ -386,7 +386,7 @@ export default class IndexPage extends React.Component {
/> />
<br /> <br />
<a css={STYLES_LINK} href="/_"> <a css={STYLES_LINK} href="/_">
50GB free storage for early sign up -> Get 50GB free storage as an early member ->
</a> </a>
</div> </div>
@ -459,7 +459,7 @@ export default class IndexPage extends React.Component {
<img <img
css={STYLES_IMG} css={STYLES_IMG}
style={{ margin: `48px auto`, boxShadow: `none` }} style={{ margin: `48px auto`, boxShadow: `none` }}
src="https://slate.textile.io/ipfs/bafkreihen4fii4jmtbpslpjofujdrgrbmnzr3pittluinvmdvszkhtsw2a" src="https://slate.textile.io/ipfs/bafybeib2tdk7qvw754ho6ru3nj3wc24hf3lzppuce4lafx32qhkhjkehmy"
/> />
</div> </div>
<div css={STYLES_SECTIONCTA_WRAPPER}> <div css={STYLES_SECTIONCTA_WRAPPER}>

View File

@ -229,7 +229,7 @@ export default class SlateForChromePage extends React.Component {
/> />
<img <img
css={STYLES_IMG_OVERLAY} css={STYLES_IMG_OVERLAY}
src="https://slate.textile.io/ipfs/bafkreibgds7gena4fjhe57ozk45iy23wzh5klux4zsrlzbh2xo5ku2t6rm" src="https://slate.textile.io/ipfs/bafkreig2ynqlvfynv3zvft73fh2igyyks5bgmthugtq7azeed6rehd3s5u"
/> />
</div> </div>
<div css={STYLES_SECTION_FLEXWRAPPER}> <div css={STYLES_SECTION_FLEXWRAPPER}>