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