added homecontainer views

package.json

@@ -27,6 +27,7 @@
     "node-mailjet": "^3.2.1"
   },
   "devDependencies": {
+    "animate.css": "^3.6.1",
     "autoprefixer": "^7.2.6",
     "axios": "^0.17.1",
     "babel-core": "^6.26.0",

src/actions/index.js

@@ -13,3 +13,5 @@ function createAction(actionType) {
 }
 
 export const setStyle = createAction(headerActions.SET_STYLE);
+export const toggleInfo = createAction(headerActions.TOGGLE_INFO);
+

src/api.js

@@ -1,22 +1,11 @@
 const axios = require('axios');
 
 module.exports = {
-    curriculum: {
-        create(params) {
-            return axios.put(`/api/curriculum`, params);
-        },
-        getAll() {
-            return axios.get(`/api/curriculum`)
-                .then(response => response.data.data);
-        }
-    },
-    learner: {
-        create(params) {
-            return axios.put(`/api/learner`, params);
-        },
-        getAll() {
-            return axios.get(`/api/learner`)
-                .then(response => response.data.data);
+    subscribe: {
+        new(email) {
+            return axios.put(`/api/subscribe`, {
+                email: email
+            });
         }
     }
 };

src/components/header/header.action.js

@@ -1,3 +1,4 @@
 export default {
     SET_STYLE: 'SET_STYLE',
+    TOGGLE_INFO: 'TOGGLE_INFO'
 };

src/components/header/header.component.js

@@ -31,41 +31,84 @@ export class HeaderComponent extends React.Component {
         }, 200);
     }
 
+    onToggleInfo() {
+        return this.props.onToggleInfo();
+    }
+
     initializeScrollHandler() {
         window.addEventListener('scroll', this.onScroll());
     }
 
     render() {
-        let classNames = ['coinbank-navbar', 'navbar', 'navbar-toggleable-md', 'navbar-inverse'];
-        let animationClasses = [];
+        let classNames = ['navbar'];
+        // let animationClasses = [];
+        let headerInfoStyle = {display: 'none'};
+        let headerContainerStyle = {width: '100%', top: 0};
 
         switch (this.props.header.style) {
             case 'jumbotron':
-                animationClasses = ['fadeIn', 'animated'];
-                animationClasses.forEach((className) => classNames.push(className));
-                setTimeout(() => animationClasses.forEach((className) => this.navEl.classList.remove(className)), 1000);
+                // animationClasses = ['fadeIn', 'animated'];
+                // animationClasses.forEach((className) => classNames.push(className));
+                // setTimeout(() => animationClasses.forEach((className) => this.navEl.classList.remove(className)), 1000);
                 classNames.push('coinbank-navbar-jumbotron');
                 this.initializeScrollHandler();
                 break;
             default:
-                animationClasses = ['slideInDown', 'animated'];
-                animationClasses.forEach((className) => classNames.push(className));
-                setTimeout(() => animationClasses.forEach((className) => this.navEl.classList.remove(className)), 1000);
-                classNames.push('fixed-top', 'bg-inverse');
+                // animationClasses = ['slideInDown', 'animated'];
+                // animationClasses.forEach((className) => classNames.push(className));
+                // setTimeout(() => animationClasses.forEach((className) => this.navEl.classList.remove(className)), 1000);
+                classNames.push('fixed-top', 'bg-dark', 'navbar-dark');
 
                 if (!this.triggeredByScroll) {
                     this.triggeredByScroll = false;
                     window.removeEventListener('scroll', this.onScroll());
+
                 }
         }
 
+        if (this.props.header.showInfo) {
+            let fixedHeaderClassIndex = classNames.indexOf('fixed-top');
+            headerInfoStyle.display = 'block';
+            headerContainerStyle.position = 'fixed';
+            if (fixedHeaderClassIndex !== -1) {
+                classNames.splice(fixedHeaderClassIndex, 1);
+            }
+        }
+
         return (
-            <nav className={classNames.join(' ')}
-                 ref={(navEl) => { this.navEl = navEl; }}>
-                <div className="container">
-                    <a className="navbar-brand" href="#">Qoinbank</a>
+            <div style={headerContainerStyle}>
+                <div className="bg-dark" style={headerInfoStyle}>
+                    <div className="container">
+                        <div className="row">
+                            <div className="col-sm-8 py-4">
+                                <h4 className="text-white">About</h4>
+                                <p className="text-muted">Clout Tech is an organization that aims to make application development simpler and quicker.</p>
+                                <p className="text-muted">Our contributers include experts in the IT industry who have built scalable applications in multiple enterprises.</p>
+                            </div>
+                            <div className="col-sm-4 py-4">
+                                <h4 className="text-white">Links</h4>
+                                <ul className="list-unstyled">
+                                    <li><a href="https://github.com/clout-stack/clout-js" className="text-white">Github</a></li>
+                                    <li><a href="http://docs.clout.tech" className="text-white">Documentation</a></li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
                 </div>
-            </nav>
+
+                <nav className={classNames.join(' ')}
+                     ref={(navEl) => { this.navEl = navEl; }}>
+                    <div className="container">
+                        <a className="navbar-brand" href="#">Clout Tech</a>
+                        <button
+                            className="navbar-toggler"
+                            type="button"
+                            onClick={this.onToggleInfo.bind(this)}>
+                            <span className="navbar-toggler-icon"></span>
+                        </button>
+                    </div>
+                </nav>
+            </div>
         );
     }
 };

src/components/header/header.reducer.js

@@ -5,9 +5,17 @@
 export function headerReducer(state={}, action) {
     switch (action.type) {
         case 'SET_STYLE':
-            return {...state, ...{
-                style: action.data
-            }};
+            return {
+                ...state, ...{
+                    style: action.data
+                }
+            };
+        case 'TOGGLE_INFO':
+            return {
+                ...state, ...{
+                    showInfo: !state.showInfo
+                }
+            };
         default:
             return state;
     }

src/containers/home/home.container.js

@@ -5,10 +5,12 @@ import React from 'react';
 import {store} from '../../main';
 
 import {connect} from 'react-redux';
-import {setStyle} from '../../actions';
+import {setStyle, toggleInfo} from '../../actions';
 
 import { HeaderComponent } from '../../components/header/header.component';
 
+const PLACEHOLDER_IMAGE = 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22356%22%20height%3D%22280%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20356%20280%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_16187649576%20text%20%7B%20fill%3A%23AAAAAA%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace%3Bfont-size%3A18pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_16187649576%22%3E%3Crect%20width%3D%22356%22%20height%3D%22280%22%20fill%3D%22%23EEEEEE%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22130.7750015258789%22%20y%3D%22148.25%22%3E356x280%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E';
+
 export class HomePage extends React.Component {
     constructor(props) {
         super(props);
@@ -20,9 +22,61 @@ export class HomePage extends React.Component {
     }
 
     render() {
+        let projects = [
+            {
+                alt: 'Card image cap',
+                image: PLACEHOLDER_IMAGE,
+                text: 'This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.'
+            },
+            {
+                alt: 'Card image cap',
+                image: PLACEHOLDER_IMAGE,
+                text: 'This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.'
+            },
+            {
+                alt: 'Card image cap',
+                image: PLACEHOLDER_IMAGE,
+                text: 'This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.'
+            }
+        ];
+
         return (
-            <div>
+            <div className="home-container">
                 <HeaderComponent {...this.props} />
+                <section className="jumbotron text-center">
+                    <div className="container">
+                        <h1 className="jumbotron-heading">Introducing Clout-JS</h1>
+                        <p className="lead text-muted">Providing a way to build scalable application quickly and modular-ly!</p>
+                        <p>
+                            <a href="https://github.com/clout-stack/clout-js" className="btn btn-primary">Github</a>&nbsp;
+                            <a href="http://docs.clout.tech" className="btn btn-secondary">Documentation</a>
+                        </p>
+                    </div>
+                </section>
+
+                <section className="album text-muted">
+                    <div className="container">
+                        <h3>Example Projects</h3>
+                        <br />
+                        <div className="row">
+                            {projects.map((item) => (
+                                <div className="card">
+                                    <img src={item.image} alt={item.alt} />
+                                    <p className="card-text">{item.text}</p>
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+                </section>
+
+                <footer className="footer text-muted">
+                    <div className="container">
+                        <p className="float-right">
+                            <a href="#">Back to top</a>
+                        </p>
+                        <p>This website is &copy; Clout Tech, but please <a href="https://github.com/clout-stack/clout-tech-web">download</a> and customize it for yourself!</p>
+                    </div>
+                </footer>
             </div>
         );
     }
@@ -36,7 +90,8 @@ const stateToProps = (state) => {
 
 const dispatchToProps = (dispatch) => {
     return {
-        onSetStyle: (...args) => dispatch(setStyle(...args))
+        onSetStyle: (...args) => dispatch(setStyle(...args)),
+        onToggleInfo: (...args) => dispatch(toggleInfo(...args))
     };
 };
 

src/style/components/_module.scss

@@ -1 +1,4 @@
-@import './components/header.component.scss';
+@import './header.component.scss';
+@import './jumbotron.component.scss';
+@import './footer.component.scss';
+@import './album.component.scss';

src/style/components/album.component.scss

@@ -0,0 +1,21 @@
+.album {
+    padding-top: 3rem;
+    padding-bottom: 3rem;
+    background-color: #f7f7f7;
+
+    .card {
+        float: left;
+        width: 33.333%;
+        padding: .75rem;
+        margin-bottom: 2rem;
+        border: 0;
+    }
+
+    .card > img {
+        margin-bottom: .75rem;
+    }
+
+    .card-text {
+        font-size: 85%;
+    }
+}

src/style/components/footer.component.scss

@@ -0,0 +1,8 @@
+.footer {
+  padding-top: 3rem;
+  padding-bottom: 3rem;
+}
+
+.footer p {
+  margin-bottom: .25rem;
+}

src/style/components/jumbotron.component.scss

@@ -0,0 +1,18 @@
+.jumbotron {
+  padding-top: 6rem;
+  padding-bottom: 6rem;
+  margin-bottom: 0;
+  background-color: #fff;
+}
+
+.jumbotron p:last-child {
+  margin-bottom: 0;
+}
+
+.jumbotron-heading {
+  font-weight: 300;
+}
+
+.jumbotron .container {
+  max-width: 40rem;
+}

src/style/containers/home.container.scss

@@ -0,0 +1,4 @@
+.home-container {
+    min-height: 100vh;
+    margin-top: 50px;
+}

src/style/main.scss

@@ -1,4 +1,5 @@
 @import '~bootstrap/scss/bootstrap';
 @import '~bootstrap/scss/mixins';
+@import "~animate.css";
 @import './components/_module.scss';
 @import './containers/_module.scss';