diff --git a/.gitignore b/.gitignore index d634306c..7e59a432 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,5 @@ .next +.nova .env .env-custom-development .env-development diff --git a/pages/_/marketing-candidate/community.js b/pages/_/community.js similarity index 82% rename from pages/_/marketing-candidate/community.js rename to pages/_/community.js index 0d2333d3..a15f8d95 100644 --- a/pages/_/marketing-candidate/community.js +++ b/pages/_/community.js @@ -9,7 +9,6 @@ import { SceneUtils } from "three"; import WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper"; import WebsitePrototypeHeader from "~/components/core/NewWebsitePrototypeHeader"; import WebsitePrototypeFooter from "~/components/core/NewWebsitePrototypeFooter"; -import IssuesList from "~/components/core/marketing/IssuesList"; import CodeBlock from "~/components/system/CodeBlock"; const FEATURES = [ @@ -36,27 +35,6 @@ const FEATURES = [ }, ]; -const CONTRIBUTIONS = [ - { - contribution: "An open source brandbook for Slate.", - contributor: "Narrative", - illustration: - "https://slate.textile.io/ipfs/bafkreiamnbqik6542ydqowdicdqji7jljbtvebee7vaciyozklgn6uycim", - }, - { - contribution: "A portrait of Slate", - contributor: "Jason Yuan", - illustration: - "https://slate.textile.io/ipfs/bafkreidtgwdyqwqwk2apprnu3rwxkzv5lewktquou6k6crckpouxpq5ugm", - }, - { - contribution: "A playful hover tile", - contributor: "Someone", - illustration: - "https://slate.textile.io/ipfs/bafkreiaz2hmjkzau3kkcah55rxdkwzum33n35icqbse2ik5e7vqcsb73kq", - }, -]; - const SLATE_CORE_TEAM = [ { id: 1, @@ -64,7 +42,7 @@ const SLATE_CORE_TEAM = [ url: "https://github.com/jasonleyser", username: "jasonleyser", imageUrl: - "https://avatars0.githubusercontent.com/u/310223?s=400&u=62a15c1b5791b953fc5153a4b3f491f4b0bf2ae5&v=4", + "https://slate.textile.io/ipfs/bafkreidw22xqcr6fo6m7k25qe3yemby6w4dlawbsu6yxs7qjnpu5gyoiwm", }, { id: 2, @@ -72,7 +50,7 @@ const SLATE_CORE_TEAM = [ url: "https://github.com/jimmylee", username: "jimmylee", imageUrl: - "https://avatars0.githubusercontent.com/u/310223?s=400&u=62a15c1b5791b953fc5153a4b3f491f4b0bf2ae5&v=4", + "https://slate.textile.io/ipfs/bafkreigxoyf43vw3p2hbc4ycsyh2og36cgy3s47xkb2n4w3i7auv2a6cei", }, { id: 3, @@ -80,7 +58,7 @@ const SLATE_CORE_TEAM = [ url: "https://github.com/martinalong", username: "martinalong", imageUrl: - "https://avatars0.githubusercontent.com/u/310223?s=400&u=62a15c1b5791b953fc5153a4b3f491f4b0bf2ae5&v=4", + "https://slate.textile.io/ipfs/bafkreiasfgunf66fxncazlfzff3vp2btfe4j55jxgb2epcthrnvwkthwrq", }, { id: 4, @@ -96,15 +74,15 @@ const SLATE_CORE_TEAM = [ url: "https://github.com/tarafanlin", username: "tarafanlin", imageUrl: - "https://avatars0.githubusercontent.com/u/310223?s=400&u=62a15c1b5791b953fc5153a4b3f491f4b0bf2ae5&v=4", + "https://slate.textile.io/ipfs/bafkreieuxq4itewoes3wnpfxw2dfat6oi6rsy2snix7tvtgv7d7bgre64q", }, { id: 6, name: "William Felker", - url: "https://slate.host/gndclouds/urban-gardens", + url: "https://github.com/gndclouds", username: "gndclouds", imageUrl: - "https://avatars0.githubusercontent.com/u/310223?s=400&u=62a15c1b5791b953fc5153a4b3f491f4b0bf2ae5&v=4", + "https://bafkreih2b33oaftlflmsg6njtu7i54f2nwws5gfhhf5w4qaezcejs6gjte.ipfs.slate.textile.io/", }, ]; @@ -173,14 +151,6 @@ const SLATE_CONTRIBUTOR_TEAM = [ imageUrl: "https://slate.textile.io/ipfs/bafkreihdkapriwuzfh42zkhs3kwj5qki43dvyu6mq5j3rug3uf6i7egs6y", }, - { - id: 9, - name: "Colin S. McCaleb", - url: "https://github.com/uonai", - username: "uonai", - imageUrl: - "https://slate.textile.io/ipfs/bafkreigbjyxbmc2cirha3g4y2rmlrntau2l2gjy4ft3y6ii3kyh4ifw5li", - }, ]; const STYLES_ROOT = css` @@ -252,6 +222,22 @@ const STYLES_P = css` } `; +const STYLES_P_FULL_WIDTH = css` + 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 0; + width: 100%; + color: ${Constants.system.slate}; + opacity: 0.7; + + @media (max-width: ${Constants.sizes.mobile}px) { + width: 100%; + } +`; + const STYLES_TEXT_BLOCK = css` display: flex; flex: 1 1 auto; @@ -270,17 +256,31 @@ const STYLES_SECTION_WRAPPER = css` display: flex; flex-wrap: wrap; align-items: center; - background-color: ${Constants.system.white}; - border-radius: 16px; @media (max-width: ${Constants.sizes.mobile}px) { padding: 24px; } `; +const STYLES_SECTION_WRAPPER_BOX = css` + width: 750px; + padding: 44px; + margin: 12px auto; + display: flex; + flex-wrap: wrap; + align-items: center; + background: white; + border-radius: 8px; + + @media (max-width: ${Constants.sizes.mobile}px) { + padding: 24px; + margin: 36px; + } +`; const STYLES_BUTTON = css` margin-top: 48px; min-height: 48px; + margin-right: 12px; box-sizing: border-box; border: 0; border-radius: 4px; @@ -331,10 +331,16 @@ const STYLES_SPLIT_WIDTH = css` @media (max-width: ${Constants.sizes.tablet}px) { width: 100%; + :nth-child(2) { + padding-left: 0; + } } @media (max-width: ${Constants.sizes.mobile}px) { width: 100%; + :nth-child(2) { + padding-left: 0; + } } `; @@ -488,18 +494,43 @@ const STYLES_SLATE_CARD_EFFECTS = css` } `; +const STYLES_FEATURE_CARD_WRAPPER = css` + width: 33%; + height: auto; + padding-right: 24px; + :nth-last-child() { + padding-right: 0px; + } + + @media (max-width: ${Constants.sizes.tablet}px) { + width: 100%; + height: auto; + margin-bottom: 32px; + } + + @media (max-width: ${Constants.sizes.mobile}px) { + width: 100%; + height: auto; + margin-bottom: 32px; + } +`; + const STYLES_FEATURE_CARD = css` - width: 30%; - height: 450px; - justify-content: space-between; - margin: auto; + margin: 24px auto; padding: 16px; border-radius: 8px; background-color: #f2f4f8; box-shadow: -6px -6px 10px #ffffff, 4px 4px 10px #d4d4d4; + @media (max-width: ${Constants.sizes.tablet}px) { + width: 100%; + height: auto; + margin-bottom: 32px; + } + @media (max-width: ${Constants.sizes.mobile}px) { width: 100%; + height: auto; margin-bottom: 32px; } `; @@ -567,7 +598,6 @@ const STYLES_IMG_ICON = css` `; const STYLES_CHAT = css` - width: 350px; background: #ffffff; border: 1px solid #000000; box-sizing: border-box; @@ -603,9 +633,7 @@ const STYLES_CONSOLE = css` font-size: 14px; box-sizing: border-box; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); - - :hover { - } + border-radius: 8px; `; const STYLES_CONSOLE_BODY = css` @@ -705,11 +733,13 @@ const SlateTeamCards = (props) => { const FeatureCard = (props) => { return ( -
- -
{props.title}
-
- {props.description} +
+
+ +
{props.title}
+
+ {props.description} +
); @@ -766,13 +796,17 @@ export default class CommunityPage extends React.Component { />

An open invitation to everyone

-

+

Slate is designed and built by a growing community of hackers, artists, and creatives on the web.

@@ -796,9 +830,10 @@ export default class CommunityPage extends React.Component {

Core Team

-

- We work on the core product of Slate, and you can reachout to us - about for anything you might need to know about Slate. +
+

+ We work on Slate, and you can reachout to us about for anything + you might need to know.

{SLATE_CORE_TEAM.map((each) => ( @@ -816,9 +851,9 @@ export default class CommunityPage extends React.Component {

Contributors

-

- We couldn’t make Slate without the input and continures from the - out community. +
+

+ Our amazing community members helping us make Slate.

{SLATE_CONTRIBUTOR_TEAM.map((each) => ( @@ -833,107 +868,6 @@ export default class CommunityPage extends React.Component {
-
-
-

- We couldn’t build Slate without our community of contributors -

-

- Here features some great work from our contributors. We define - contribution beyond code. And we believe that everyone has - something to bring to the table. 🍰 -

-
-
-
-
- {CONTRIBUTIONS.map((each) => ( - - ))} -
-
- -

- Have some 🍰 to bring to the table? -
- Let’s chat about how we can support you. -

- -
-
-
-
-
-

- Hey Slate Team, -
-
Have you thought about adding a confetti 🎉 effect to - the download button? -
-
- Best,
- 🦄 -

-
-
-

- Hey 🦄,
-
- That would be so fun, will work in it!
-
best,
- 🐳 -

-
-
-
-

- Have an idea for - how to make Slate better? -

-

- You can create an issue on github or send us an email with your - recommendation. -

-
- - -
-
-

Further down the road

@@ -942,6 +876,8 @@ export default class CommunityPage extends React.Component { we’re excited about.

+
+
{FEATURES.map((each) => ( ))}
+
+
+
+
+

+ Have an idea for + how to make Slate better? +

+

+ You can create an issue on github or send us an email with your + recommendation. +

+
+ + +
+
+
+
+

+ Hey Slate Team, +
+
Have you thought about adding a confetti 🎉 effect to + the download button? +
+
+ Best,
+ 🦄 +

+
+
+

+ Hey 🦄,
+
+ That would be so fun, will work in it!
+
Best,
+ 🐳 +

+
+
+

@@ -984,7 +975,7 @@ export default class CommunityPage extends React.Component {

Checkout the examples below to see how quickly you can get up - and running wtih Slate’s API. + and running with Slate’s API.

diff --git a/pages/_/marketing-candidate/community-t.js b/pages/_/marketing-candidate/community-t.js deleted file mode 100644 index b864d429..00000000 --- a/pages/_/marketing-candidate/community-t.js +++ /dev/null @@ -1,488 +0,0 @@ -import * as React from "react"; -import * as Constants from "~/common/constants"; -import * as Actions from "~/common/actions"; - -import { css } from "@emotion/react"; - -import WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper"; -import WebsitePrototypeHeader from "~/components/core/NewWebsitePrototypeHeader"; -import WebsitePrototypeFooter from "~/components/core/NewWebsitePrototypeFooter"; - -const FEATURES = [ - { - illustration: "https://slate.textile.io/ipfs/bafkreih4hmgltk3mboh5to6lwzcmcptzsiuzlodpdxztynsl2xij6q4deq", - title: "Multiplayer slate", - description: - "Slate as social space. Co-create slates with family and friends. Share design, code, research, dinner plans with others and discuss your ideas.", - }, - { - illustration: "https://slate.textile.io/ipfs/bafybeiebglllfwpqk7v57erslgmsjq2vkfav7zmcgjb7dcq3rhca26iwli", - title: "Unity game engine", - description: - "Slate as playground. Upload your favorite unity game to the file-sharing network. Invite your friends to play together.", - }, - { - illustration: "https://slate.textile.io/ipfs/bafkreigwlh7kmqnay2qs5lrcyl34mq7rhlcwfwld4vwstmnhhxyrqdyhaq", - title: "Flexible content arrangement", - description: - "Slate as digital garden. Organized information with gallery view, list view, a node-link diagram, a timeline, a discussion thread and more.", - }, -]; - -const CONTRIBUTIONS = [ - { - contribution: "An open source brandbook for Slate.", - contributor: "Narrative", - illustration: "https://slate.textile.io/ipfs/bafkreiamnbqik6542ydqowdicdqji7jljbtvebee7vaciyozklgn6uycim", - }, - { - contribution: "A portrait of Slate", - contributor: "Jason Yuan", - illustration: "https://slate.textile.io/ipfs/bafkreidtgwdyqwqwk2apprnu3rwxkzv5lewktquou6k6crckpouxpq5ugm", - }, - { - contribution: "A playful hover tile", - contributor: "Someone", - illustration: "https://slate.textile.io/ipfs/bafkreiaz2hmjkzau3kkcah55rxdkwzum33n35icqbse2ik5e7vqcsb73kq", - }, -]; - -const STYLES_ROOT = css` - display: flex; - flex-direction: column; - justify-content: space-between; - max-width: 1440px; - margin: -88px 0 0 0; - background-color: #f2f4f8; -`; - -const STYLES_H1 = css` - font-family: ${Constants.font.medium}; - font-weight: 400; - font-size: ${Constants.typescale.lvl5}; - letter-spacing: -0.022rem; - line-height: 1.3; - color: ${Constants.system.slate}; - margin-bottom: 1rem; - width: 45%; - - @media (max-width: ${Constants.sizes.mobile}px) { - font-size: ${Constants.typescale.lvl4}; - } -`; - -const STYLES_H2 = css` - font-family: ${Constants.font.medium}; - font-weight: 400; - font-size: ${Constants.typescale.lvl4}; - letter-spacing: -0.022rem; - line-height: 1.3; - color: ${Constants.system.slate}; - margin-bottom: 1rem; - width: 45%; - - @media (max-width: ${Constants.sizes.mobile}px) { - width: 100%; - font-size: ${Constants.typescale.lvl3}; - } -`; - -const STYLES_H3 = css` - font-family: ${Constants.font.medium}; - font-weight: 400; - font-size: ${Constants.typescale.lvl3}; - letter-spacing: -0.022rem; - line-height: 1.3; - color: ${Constants.system.slate}; - margin-bottom: 1rem; - width: 45%; - - @media (max-width: ${Constants.sizes.mobile}px) { - width: 100%; - font-size: ${Constants.typescale.lvl2}; - } -`; - -const STYLES_P = css` - 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 0; - width: 50%; - color: ${Constants.system.slate}; - opacity: 0.7; - - @media (max-width: ${Constants.sizes.mobile}px) { - width: 100%; - } -`; - -const STYLES_TEXT_BLOCK = css` - display: flex; - flex: 1 1 auto; - justify-content: space-between; - width: 67%; - - @media (max-width: ${Constants.sizes.mobile}px) { - display: block; - width: 100%; - } -`; - -const stylesFullWidthText = { - width: `100%`, -}; - -const STYLES_SECTION_WRAPPER = css` - width: 100%; - padding: 120px 88px; - - @media (max-width: ${Constants.sizes.mobile}px) { - padding: 48px; - } -`; - -const STYLES_DINNER_TABLE = css` - width: 50%; - padding: 48px 64px; - background-color: #e7e7e9; - display: inline-block; - box-shadow: 0px 10px 50px 20px rgba(0, 0, 0, 0.1); - - @media (max-width: ${Constants.sizes.mobile}px) { - width: 100%; - padding: 24px 32px; - } -`; - -const STYLES_TABLE_ROW = css` - width: 100%; -`; - -const STYLES_FIGURES_GROUP = css` - width: 50%; - margin: -4px auto; - - @media (max-width: ${Constants.sizes.mobile}px) { - width: 100%; - margin: 10vh 0 -4px 0; - } -`; - -const STYLES_FIGURE = css` - width: 50%; -`; - -const STYLES_FIGURES_BOTTOM = css` - width: 50%; - margin: -4px auto; - transform: rotate(180deg); - - @media (max-width: ${Constants.sizes.mobile}px) { - width: 100%; - } -`; - -const STYLES_FIGURE_RIGHT = css` - width: 25%; - transform: rotate(90deg) translateY(39%); - - @media (max-width: ${Constants.sizes.mobile}px) { - display: none; - } -`; - -const STYLES_FIGURE_LEFT = css` - width: 25%; - transform: rotate(-90deg) translateY(39%); - - @media (max-width: ${Constants.sizes.mobile}px) { - display: none; - } -`; - -const STYLES_BUTTON = css` - margin-top: 48px; - min-height: 48px; - box-sizing: border-box; - border: 0; - border-radius: 4px; - padding: 0 16px; - display: inline-flex; - align-items: center; - justify-content: center; - user-select: none; - background-color: #e7e7e9; - color: ${Constants.system.slate}; - font-family: ${Constants.font.semiBold}; - font-weight: 400; - font-size: ${Constants.typescale.lvl1}; - letter-spacing: -0.011rem; - - box-shadow: -4px -4px 10px #ffffff, 4px 4px 10px #b2b4b3; - transition: 200ms ease all; - cursor: pointer; - - :hover { - color: ${Constants.system.brand}; - } -`; - -const STYLES_CENTER_BLOCK = css` - width: 50%; - margin: 96px auto; - text-align: center; - - @media (max-width: ${Constants.sizes.mobile}px) { - margin: 0 auto 48px autp; - width: 100%; - } -`; - -const STYLES_IMG = css` - width: 15%; - margin-bottom: 24px; -`; - -const STYLES_CARD_GROUP = css` - display: flex; - width: 100%; - margin-top: 48px; - - @media (max-width: ${Constants.sizes.mobile}px) { - display: block; - } -`; - -const STYLES_FEATURE_CARD = css` - width: 33.3%; - margin: 0 16px 0 0; - padding: 16px; - border-radius: 8px; - background-color: #f2f4f8; - box-shadow: -6px -6px 10px #ffffff, 4px 4px 10px #d4d4d4; - - @media (max-width: ${Constants.sizes.mobile}px) { - width: 100%; - margin-bottom: 32px; - } -`; - -const STYLES_CONTRIBUTION_CARD = css` - margin-left: 33.3%; - width: 66.6%; - display: flex; - justify-content: space-between; - padding: 16px; - border: 1px solid ${Constants.system.gray}; - - @media (max-width: ${Constants.sizes.mobile}px) { - margin: 0; - width: 100%; - } -`; - -const STYLES_FEATURE_TEXT = css` - font-family: ${Constants.font.text}; - font-weight: 400; - font-size: ${Constants.typescale.lvl1}; - letter-spacing: -0.011rem; - line-height: 1.5; - margin: 8px 0 0 0; - color: ${Constants.system.slate}; -`; - -const STYLES_CONTRIBUTION_TEXT = css` - font-family: ${Constants.font.text}; - font-weight: 400; - font-size: ${Constants.typescale.lvl1}; - letter-spacing: -0.011rem; - line-height: 1.5; - margin: 8px 0 0 0; - color: ${Constants.system.slate}; -`; - -const STYLES_DOT = css` - height: 12px; - width: 12px; - margin-right: 8px; - background-color: ${Constants.system.darkGray}; - border-radius: 50%; - display: inline-block; -`; - -const STYLES_CONTRIBUTION_IMG = css` - width: 40%; - box-shadow: 0px 0px 20px 10px rgba(0, 0, 0, 0.1); -`; - -const STYLES_FEATURE_IMG = css` - width: 100%; - border-radius: 4px; - margin-bottom: 8px; -`; - -const FeatureCard = (props) => { - return ( -
- -
{props.title}
-
- {props.description} -
-
- ); -}; - -const ContributionCard = (props) => { - return ( -
-
- - {props.contributor} -
- {props.contribution} -
- -
- ); -}; - -export const getServerSideProps = async (context) => { - return { - props: { ...context.query }, - }; -}; - -export default class CommunityPage extends React.Component { - async componentDidMount() { - const response = await Actions.health(); - console.log("HEALTH_CHECK", response); - } - - render() { - const title = `Slate`; - const description = - "Slate is designed and built by a growing community of hackers, artists, and creatives on the web."; - const url = "https://slate.host/community"; - - return ( - - -
-
-
- - -
-
- -
-

- An open invitation to everyone -

-

- Slate is designed and built by a growing community of hackers, artists, and creatives on the web. -

- -
- -
-
- - -
-
-
-
-

Further down the road

-

Slate has infinite possibilities. Here are some of them that we’re excited about.

-
-
- {FEATURES.map((each) => ( - - ))} -
-
- -

- Have an idea? -
- Expand our imaginations. -

- -
-
-
-
-

We couldn’t build Slate without our community of contributors

-

- Here features some great work from our contributors. We define contribution beyond code. And we believe - that everyone has something to bring to the table. 🍰 -

-
-
-
-
- {CONTRIBUTIONS.map((each) => ( - - ))} -
-
- -

- Have some 🍰 to bring to the table? -
- Let’s chat about how we can support you. -

- -
-
-
- - - ); - } -}