diff --git a/pages/_/marketing-candidate/community-t.js b/pages/_/marketing-candidate/community-t.js index 2f65fed6..b864d429 100644 --- a/pages/_/marketing-candidate/community-t.js +++ b/pages/_/marketing-candidate/community-t.js @@ -8,13 +8,52 @@ import WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper"; import WebsitePrototypeHeader from "~/components/core/NewWebsitePrototypeHeader"; import WebsitePrototypeFooter from "~/components/core/NewWebsitePrototypeFooter"; +const FEATURES = [ + { + illustration: "https://slate.textile.io/ipfs/bafkreih4hmgltk3mboh5to6lwzcmcptzsiuzlodpdxztynsl2xij6q4deq", + title: "Multiplayer slate", + description: + "Slate as social space. Co-create slates with family and friends. Share design, code, research, dinner plans with others and discuss your ideas.", + }, + { + illustration: "https://slate.textile.io/ipfs/bafybeiebglllfwpqk7v57erslgmsjq2vkfav7zmcgjb7dcq3rhca26iwli", + title: "Unity game engine", + description: + "Slate as playground. Upload your favorite unity game to the file-sharing network. Invite your friends to play together.", + }, + { + illustration: "https://slate.textile.io/ipfs/bafkreigwlh7kmqnay2qs5lrcyl34mq7rhlcwfwld4vwstmnhhxyrqdyhaq", + title: "Flexible content arrangement", + description: + "Slate as digital garden. Organized information with gallery view, list view, a node-link diagram, a timeline, a discussion thread and more.", + }, +]; + +const CONTRIBUTIONS = [ + { + contribution: "An open source brandbook for Slate.", + contributor: "Narrative", + illustration: "https://slate.textile.io/ipfs/bafkreiamnbqik6542ydqowdicdqji7jljbtvebee7vaciyozklgn6uycim", + }, + { + contribution: "A portrait of Slate", + contributor: "Jason Yuan", + illustration: "https://slate.textile.io/ipfs/bafkreidtgwdyqwqwk2apprnu3rwxkzv5lewktquou6k6crckpouxpq5ugm", + }, + { + contribution: "A playful hover tile", + contributor: "Someone", + illustration: "https://slate.textile.io/ipfs/bafkreiaz2hmjkzau3kkcah55rxdkwzum33n35icqbse2ik5e7vqcsb73kq", + }, +]; + const STYLES_ROOT = css` display: flex; flex-direction: column; justify-content: space-between; max-width: 1440px; margin: -88px 0 0 0; - background-color: ${Constants.system.foreground}; + background-color: #f2f4f8; `; const STYLES_H1 = css` @@ -33,6 +72,22 @@ const STYLES_H1 = css` `; const STYLES_H2 = css` + font-family: ${Constants.font.medium}; + font-weight: 400; + font-size: ${Constants.typescale.lvl4}; + letter-spacing: -0.022rem; + line-height: 1.3; + color: ${Constants.system.slate}; + margin-bottom: 1rem; + width: 45%; + + @media (max-width: ${Constants.sizes.mobile}px) { + width: 100%; + font-size: ${Constants.typescale.lvl3}; + } +`; + +const STYLES_H3 = css` font-family: ${Constants.font.medium}; font-weight: 400; font-size: ${Constants.typescale.lvl3}; @@ -68,7 +123,7 @@ const STYLES_TEXT_BLOCK = css` display: flex; flex: 1 1 auto; justify-content: space-between; - width: 70%; + width: 67%; @media (max-width: ${Constants.sizes.mobile}px) { display: block; @@ -76,16 +131,16 @@ const STYLES_TEXT_BLOCK = css` } `; -const stylesHeroText = { +const stylesFullWidthText = { width: `100%`, }; const STYLES_SECTION_WRAPPER = css` width: 100%; - padding: 88px; + padding: 120px 88px; @media (max-width: ${Constants.sizes.mobile}px) { - padding: 24px; + padding: 48px; } `; @@ -94,6 +149,7 @@ const STYLES_DINNER_TABLE = css` padding: 48px 64px; background-color: #e7e7e9; display: inline-block; + box-shadow: 0px 10px 50px 20px rgba(0, 0, 0, 0.1); @media (max-width: ${Constants.sizes.mobile}px) { width: 100%; @@ -153,13 +209,13 @@ const STYLES_BUTTON = css` box-sizing: border-box; border: 0; border-radius: 4px; - padding: 0 24px; + padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; user-select: none; - background-color: ${Constants.system.slate}; - color: ${Constants.system.white}; + background-color: #e7e7e9; + color: ${Constants.system.slate}; font-family: ${Constants.font.semiBold}; font-weight: 400; font-size: ${Constants.typescale.lvl1}; @@ -170,11 +226,130 @@ const STYLES_BUTTON = css` cursor: pointer; :hover { - background: #e7e7e9; - color: ${Constants.system.slate}; + color: ${Constants.system.brand}; } `; +const STYLES_CENTER_BLOCK = css` + width: 50%; + margin: 96px auto; + text-align: center; + + @media (max-width: ${Constants.sizes.mobile}px) { + margin: 0 auto 48px autp; + width: 100%; + } +`; + +const STYLES_IMG = css` + width: 15%; + margin-bottom: 24px; +`; + +const STYLES_CARD_GROUP = css` + display: flex; + width: 100%; + margin-top: 48px; + + @media (max-width: ${Constants.sizes.mobile}px) { + display: block; + } +`; + +const STYLES_FEATURE_CARD = css` + width: 33.3%; + margin: 0 16px 0 0; + padding: 16px; + border-radius: 8px; + background-color: #f2f4f8; + box-shadow: -6px -6px 10px #ffffff, 4px 4px 10px #d4d4d4; + + @media (max-width: ${Constants.sizes.mobile}px) { + width: 100%; + margin-bottom: 32px; + } +`; + +const STYLES_CONTRIBUTION_CARD = css` + margin-left: 33.3%; + width: 66.6%; + display: flex; + justify-content: space-between; + padding: 16px; + border: 1px solid ${Constants.system.gray}; + + @media (max-width: ${Constants.sizes.mobile}px) { + margin: 0; + width: 100%; + } +`; + +const STYLES_FEATURE_TEXT = css` + font-family: ${Constants.font.text}; + font-weight: 400; + font-size: ${Constants.typescale.lvl1}; + letter-spacing: -0.011rem; + line-height: 1.5; + margin: 8px 0 0 0; + color: ${Constants.system.slate}; +`; + +const STYLES_CONTRIBUTION_TEXT = css` + font-family: ${Constants.font.text}; + font-weight: 400; + font-size: ${Constants.typescale.lvl1}; + letter-spacing: -0.011rem; + line-height: 1.5; + margin: 8px 0 0 0; + color: ${Constants.system.slate}; +`; + +const STYLES_DOT = css` + height: 12px; + width: 12px; + margin-right: 8px; + background-color: ${Constants.system.darkGray}; + border-radius: 50%; + display: inline-block; +`; + +const STYLES_CONTRIBUTION_IMG = css` + width: 40%; + box-shadow: 0px 0px 20px 10px rgba(0, 0, 0, 0.1); +`; + +const STYLES_FEATURE_IMG = css` + width: 100%; + border-radius: 4px; + margin-bottom: 8px; +`; + +const FeatureCard = (props) => { + return ( +
+ +
{props.title}
+
+ {props.description} +
+
+ ); +}; + +const ContributionCard = (props) => { + return ( +
+
+ + {props.contributor} +
+ {props.contribution} +
+ +
+ ); +}; + export const getServerSideProps = async (context) => { return { props: { ...context.query }, @@ -214,13 +389,15 @@ export default class CommunityPage extends React.Component { src="https://slate.textile.io/ipfs/bafybeiehufugq7vujsclzdpkdhff5kop6c4uw6emjuswwp3jhpznaou2se" />
-

+

An open invitation to everyone

-

+

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

- +
-

What features are your most excited about?

-

- Slate has infinite possibilities. Upvote your favorite ideas or expand our imaginations. -

+

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. +

+
@@ -254,6 +451,34 @@ export default class CommunityPage extends React.Component { 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. +

+ +
diff --git a/pages/index.js b/pages/index.js index b359f34e..8eff434e 100644 --- a/pages/index.js +++ b/pages/index.js @@ -430,7 +430,7 @@ const STYLES_SLATE_CARD_GROUP = css` const STYLES_SLATE_CARD = css` width: 33.33%; - height: calc(100vh / 4); + height: 25vh; margin: -1px 0 0 -1px; transition: 200ms ease box-shadow; border: 1px solid ${Constants.system.darkGray};