hero banner

src/js/App.jsx

@@ -75,6 +75,7 @@ export default React.createClass({
 
   // Show projects.
   projects() {
+    document.title = 'Burnchart: GitHub Burndown Chart as a Service';
     actions.emit('projects.load');
     return <ProjectsPage />;
   },

src/js/components/Hero.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import Icon from './Icon.jsx';
+import Link from './Link.jsx';
+
+export default React.createClass({
+
+  displayName: 'Hero.jsx',
+
+  render() {
+    return (
+      <div id="hero">
+        <div className="content">
+          <Icon name="direction" />
+          <h2>See your project progress</h2>
+          <p>Serious about a project deadline? Add your GitHub project and we'll tell you if it is running on time or not.</p>
+          <div className="cta">
+            <Link route={{ to: 'addProject' }} className="primary"><Icon name="plus" /> Add a Project</Link>
+            <Link route={{ to: 'demo' }} className="secondary"><Icon name="computer" /> See Examples</Link>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+});

src/js/components/Projects.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+export default React.createClass({
+
+  displayName: 'Projects.jsx',
+
+  // TODO.
+  render() {
+    return false;
+  }
+
+});

src/js/pages/ProjectsPage.jsx

@@ -5,6 +5,9 @@ import Page from '../mixins/Page.js';
 import Notify from '../components/Notify.jsx';
 import Header from '../components/Header.jsx';
 
+import Projects from '../components/Projects.jsx';
+import Hero from '../components/Hero.jsx';
+
 export default React.createClass({
 
   displayName: 'ProjectsPage.jsx',
@@ -12,12 +15,30 @@ export default React.createClass({
   mixins: [ Page ],
 
   render() {
+    let projects = this.state.projects;
+
+    let content;
+    if (!this.state.app.loading) {
+      if (projects.list.length) {
+        // Show a list of projects.
+        content = (
+          <div>
+            <Projects />
+          </div>
+        );
+      } else {
+        content = <Hero />;
+      }
+    }
+
     return (
       <div>
         <Notify />
         <Header {...this.state} />
 
-        <div id="page" />
+        <div id="page">
+          <div id="content" className="wrap">{content}</div>
+        </div>
 
         <div id="footer">
           <div className="wrap">

src/js/stores/projectsStore.js

@@ -12,8 +12,8 @@ class ProjectsStore extends Store {
       list: [ ]
     });
 
-    // Listen to all app actions.
-    actions.onAny((obj, event) => {
+    // Listen to only projects actions.
+    actions.on('projects.*', (obj, event) => {
       let fn = ('on.' + event).replace(/[.]+(\w|$)/g, (m, p) => {
         return p.toUpperCase();
       });
@@ -23,7 +23,14 @@ class ProjectsStore extends Store {
   }
 
   onProjectsLoad() {
-    console.log('load projects');
+    let list = this.get('list');
+
+    // Quit if we have no projects.
+    if (!list.length) {
+      return;
+    }
+
+    actions.emit('system.loading', true);
   }
 
 }