(WIP) a simple landing page

Gulpfile.js

@@ -12,7 +12,7 @@ var env = process.env
 var nodeEnv = env.NODE_ENV
 
 var isDeploy = function (env) {
-  return env === 'production' || env === 'staging'
+  return env === 'production'
 }
 
 var lr

package.json

@@ -12,8 +12,8 @@
     "start": "npm run build && npm run server",
     "develop": "NODE_ENV=development npm run watch-start",
     "prod": "NODE_ENV=production npm start",
-    "stage": "(export NODE_ENV=staging; gulp branch && git push origin gh-pages -f)",
-    "deploy": "(export NODE_ENV=production; gulp branch && git push deploy gh-pages:master -f)"
+    "stage": "(export NODE_ENV=production; gulp build && gulp branch && git push origin gh-pages -f)",
+    "deploy": "(export NODE_ENV=production; gulp build && gulp branch && git push deploy gh-pages:master -f)"
   },
   "repository": {
     "type": "git",

src/assets/css/fonts.css

@@ -22,3 +22,7 @@ html, body {
   font-family: 'Roboto', sans-serif;
   font-weight: 300;
 }
+
+* {
+  box-sizing: border-box;
+}

src/props.js

@@ -1,8 +1,8 @@
 module.exports = {
   name: "Holodex",
   pitchPhrase: "People and Groups",
-  pitchSentence: "Holodex empowers you to find people, understand relationships, and manage roles in your groups.",
-  description: "Holodex is a web-based directory to search, visualize, and organize networks of people. The system is built around you, so everyone can come together.",
+  pitchSentence: "Holodex empowers you to discover people, understand relationships, and organize roles as they emerge in your groups.",
+  description: "Holodex is a web-based directory to search, visualize, and manage groups of people. The system is built around you, so everyone can come together.",
   valueProps: [],
   callToAction: {
     text: "Request an invite",

src/views/index.js

@@ -8,6 +8,23 @@ var Layout = require('../partials/layout')
 var vars = {
   fontBase: 14,
   gutterWidth: 60,
+// colors chosen from https://www.google.com/design/spec/style/color.html#color-color-palette
+//
+// primary Purple
+//  500  #9C27B0
+//  100  #E1BEE7
+//  800  #6A1B9A
+//
+// secondary Teal
+//  A700 #00BFA5
+  }
+var colors = {
+  primary: '#9C27B0',
+  primaryLight: '#E1BEE7',
+  primaryDark: '#6A1B9A',
+  secondary: '#00BFA5',
+  secondaryLight: '',
+  secondaryDark: ''
 }
 
 var style = Stylesheet.create({
@@ -20,37 +37,70 @@ var style = Stylesheet.create({
     padding: vars.gutterWidth
   },
   introBlock: {
-    backgroundImage: 'linear-gradient(top, #6f27ff, rgba(0,0,0,0));'
+    backgroundColor: colors.primary,
+    //backgroundImage: '-webkit-linear-gradient(top, #6f27ff, rgba(0,0,0,0));',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center'
   },
   introH1: {
-    fontSize: vars.fontBase * 3,
+    marginBottom: 0,
+    fontSize: vars.fontBase * 3.8,
     fontWeight: 700,
-    lineHeight: 1.1
+    lineHeight: 1.1,
+    color: colors.primaryLight
   },
   introH2: {
     fontSize: vars.fontBase * 2,
     fontWeight: 300,
-    lineHeight: 1.1
+    lineHeight: 1.1,
+    width: '75%',
+    color: colors.primaryLight
   },
-  about: {
-
+  aboutBlock: {
+    backgroundColor: colors.primaryLight
   },
   aboutH1: {
 
   },
   aboutP: {
 
   },
-  value: {
+  aboutCarousel: {
 
   },
-  who: {
+  whoBlock: {
+    display: 'none'
+  },
+  actionBlock: {
+    backgroundColor: colors.primaryDark
 
   },
   actionButton: {
+    height: vars.fontBase * 4,
+    width: vars.fontBase * 24,
+    fontSize: vars.fontBase * 1.6,
+    border: '2px solid black',
+    borderRadius: 10,
+    color: 'black',
     outline: 0,
+    backgroundColor: 'transparent',
+    transition: 'background-color 0.4s ease-in-out, border-color 0.4s ease-in-out, color 0.4s ease-in-out',
+    fontWeight: 300,
+    ':hover': {
+      color: colors.secondary,
+      backgroundColor: 'white',
+      borderColor: colors.secondary
+    }
+  },
+  button: {
     'WebkitAppearance': 'button',
-    cursor: 'pointer'
+    cursor: 'pointer',
+    alignItems: 'flex-start',
+    textAlign: 'center',
+    color: 'buttontext',
+    backgroundColor: 'buttonface',
+    textDecoration: 'none'
   }
 })
 
@@ -74,10 +124,31 @@ module.exports = React.createClass({
           r.a({
             className: style.actionButton,
             href: props.callToAction.url
-          }, props.callToAction.text)
+          }, [
+            r.button({
+              className: style.button + ' ' + style.actionButton,
+            }, props.callToAction.text)
+          ])
         ]),
-        r.section({}, [
-
+        r.section({
+          className: style.block + ' ' + style.aboutBlock
+        }, [
+          r.h1({
+            className: style.aboutH1
+          }, "What is " + props.name + "?"),
+          r.p({
+            className: style.aboutP
+          }, props.description)
+        ]),
+        r.section({
+          className: style.block + ' ' + style.whoBlock
+        }),
+        r.section({
+          className: style.block + ' ' + style.actionBlock
+        }, [
+          r.p({
+            className: style.actionP
+          }, props.callToAction.text)
         ])
       ])
     ])