Initial commit from gatsby: (https://github.com/ChangoMan/gatsby-starter-strata.git)

src/components/Footer.js

@@ -0,0 +1,23 @@
+import React from 'react'
+
+class Footer extends React.Component {
+    render() {
+        return (
+            <div id="footer">
+                <div className="inner">
+                    <ul className="icons">
+                        <li><a href="#" className="icon fa-twitter"><span className="label">Twitter</span></a></li>
+                        <li><a href="#" className="icon fa-github"><span className="label">Github</span></a></li>
+                        <li><a href="#" className="icon fa-dribbble"><span className="label">Dribbble</span></a></li>
+                        <li><a href="#" className="icon fa-envelope-o"><span className="label">Email</span></a></li>
+                    </ul>
+                    <ul className="copyright">
+                        <li>&copy; Gatsby Starter Strata</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
+                    </ul>
+                </div>
+            </div>
+        )
+    }
+}
+
+export default Footer

src/components/Gallery.js

@@ -0,0 +1,106 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import Lightbox from 'react-images';
+
+class Gallery extends Component {
+    constructor () {
+        super();
+
+        this.state = {
+            lightboxIsOpen: false,
+            currentImage: 0,
+        };
+
+        this.closeLightbox = this.closeLightbox.bind(this);
+        this.gotoNext = this.gotoNext.bind(this);
+        this.gotoPrevious = this.gotoPrevious.bind(this);
+        this.gotoImage = this.gotoImage.bind(this);
+        this.handleClickImage = this.handleClickImage.bind(this);
+        this.openLightbox = this.openLightbox.bind(this);
+    }
+    openLightbox (index, event) {
+        event.preventDefault();
+        this.setState({
+            currentImage: index,
+            lightboxIsOpen: true,
+        });
+    }
+    closeLightbox () {
+        this.setState({
+            currentImage: 0,
+            lightboxIsOpen: false,
+        });
+    }
+    gotoPrevious () {
+        this.setState({
+            currentImage: this.state.currentImage - 1,
+        });
+    }
+    gotoNext () {
+        this.setState({
+            currentImage: this.state.currentImage + 1,
+        });
+    }
+    gotoImage (index) {
+        this.setState({
+            currentImage: index,
+        });
+    }
+    handleClickImage () {
+        if (this.state.currentImage === this.props.images.length - 1) return;
+
+        this.gotoNext();
+    }
+    renderGallery () {
+        const { images } = this.props;
+
+        if (!images) return;
+
+        const gallery = images.map((obj, i) => {
+            return (
+                <article className="6u 12u$(xsmall) work-item" key={i}>
+                    <a
+                        className="image fit thumb"
+                        href={obj.src}
+                        onClick={(e) => this.openLightbox(i, e)}
+                    >
+                        <img src={obj.thumbnail} />
+                    </a>
+
+                    <h3>{obj.caption}</h3>
+                    <p>{obj.description}</p>
+                </article>
+            );
+        });
+
+        return (
+            <div className="row">
+                {gallery}
+            </div>
+        );
+    }
+    render () {
+        return (
+            <div>
+                {this.renderGallery()}
+                <Lightbox
+                    currentImage={this.state.currentImage}
+                    images={this.props.images}
+                    isOpen={this.state.lightboxIsOpen}
+                    onClickImage={this.handleClickImage}
+                    onClickNext={this.gotoNext}
+                    onClickPrev={this.gotoPrevious}
+                    onClickThumbnail={this.gotoImage}
+                    onClose={this.closeLightbox}
+                />
+            </div>
+        );
+    }
+}
+
+Gallery.displayName = 'Gallery';
+Gallery.propTypes = {
+    images: PropTypes.array
+};
+
+export default Gallery;

src/components/Header.js

@@ -0,0 +1,22 @@
+import React from 'react'
+
+import Footer from './Footer'
+import avatar from '../assets/images/avatar.jpg'
+
+class Header extends React.Component {
+    render() {
+        return (
+            <header id="header">
+                <div className="inner">
+                    <a href="#" className="image avatar"><img src={avatar} alt="" /></a>
+                    <h1><strong>I am Strata</strong>, a super simple<br />
+                    responsive site template freebie<br />
+                    crafted by <a href="http://html5up.net">HTML5 UP</a>.</h1>
+                </div>
+                <Footer />
+            </header>
+        )
+    }
+}
+
+export default Header

src/components/layout.js

@@ -0,0 +1,19 @@
+import React from 'react'
+import '../assets/scss/main.scss'
+
+import Header from './Header'
+
+class Template extends React.Component {
+    render() {
+        const { children } = this.props
+
+        return (
+            <div>
+                <Header />
+                {children}
+            </div>
+        )
+    }
+}
+
+export default Template