diff --git a/pages/_/marketing-candidate/community-t.js b/pages/_/marketing-candidate/community-t.js index 2f65fed6..9d71a369 100644 --- a/pages/_/marketing-candidate/community-t.js +++ b/pages/_/marketing-candidate/community-t.js @@ -8,13 +8,76 @@ 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 STYLES_FEATURE_CARD_GROUP = css` + display: flex; + flex-wrap: wrap; + width: 100%; + margin-top: 48px; +`; + +const STYLES_FEATURE_CARD = css` + width: 32%; + margin: 0 16px 0 0; + border-radius: 8px; + background-color: #f2f4f8; + box-shadow: -6px -6px 10px #ffffff, 4px 4px 10px #d4d4d4; +`; + +const STYLES_CARD_TEXT = css` + font-family: ${Constants.font.text}; + font-weight: 400; + font-size: ${Constants.typescale.lvl1}; + letter-spacing: -0.011rem; + line-height: 1.5; + margin: 4px 16px; + color: ${Constants.system.slate}; +`; + +const STYLES_CARD_IMG = css` + width: 100%; + padding: 16px; +`; + +const FeatureCard = (props) => { + return ( +
+ +
{props.title}
+
+ {props.description} +
+
+ ); +}; + 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` @@ -35,7 +98,7 @@ const STYLES_H1 = css` const STYLES_H2 = css` font-family: ${Constants.font.medium}; font-weight: 400; - font-size: ${Constants.typescale.lvl3}; + font-size: ${Constants.typescale.lvl4}; letter-spacing: -0.022rem; line-height: 1.3; color: ${Constants.system.slate}; @@ -68,7 +131,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,7 +139,7 @@ const STYLES_TEXT_BLOCK = css` } `; -const stylesHeroText = { +const stylesFullWidthText = { width: `100%`, }; @@ -94,6 +157,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 +217,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 +234,20 @@ const STYLES_BUTTON = css` cursor: pointer; :hover { - background: #e7e7e9; - color: ${Constants.system.slate}; + color: ${Constants.system.brand}; } `; +const STYLES_CENTER_BLOCK = css` + width: 33%; + margin: 48px auto; + text-align: center; +`; + +const STYLES_IMG = css` + width: 20%; +`; + export const getServerSideProps = async (context) => { return { props: { ...context.query }, @@ -214,13 +287,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. +

+
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};