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 ( +
+
Slate is designed and built by a growing community of hackers, artists, and creatives on the web.
- +- Slate has infinite possibilities. Upvote your favorite ideas or expand our imaginations. -
+Slate has infinite possibilities. Here are some of them that we’re excited about.
+