From d08ca5804793ddc9b66b96f1cc130d8f1a7570a1 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Thu, 21 Jan 2016 13:07:50 +0100
Subject: [PATCH] basic contact page & form

---
 _config.yml                                   |  5 ++
 _src/_assets/javascripts/bigchain.js          |  1 +
 .../javascripts/bigchain/form-contact.js      | 59 +++++++++++++++++++
 _src/_assets/styles/bigchain.scss             |  1 +
 _src/_assets/styles/page-contact.scss         |  9 +++
 _src/_includes/form-contact.html              | 37 ++++++++++++
 _src/contact.html                             | 27 +++++++++
 _src/contact.md                               |  5 --
 8 files changed, 139 insertions(+), 5 deletions(-)
 create mode 100644 _src/_assets/javascripts/bigchain/form-contact.js
 create mode 100644 _src/_assets/styles/page-contact.scss
 create mode 100644 _src/_includes/form-contact.html
 create mode 100644 _src/contact.html
 delete mode 100644 _src/contact.md

diff --git a/_config.yml b/_config.yml
index 60c6570..04c972e 100644
--- a/_config.yml
+++ b/_config.yml
@@ -12,6 +12,11 @@ email:
 twitter:                BigchainDB
 disqus:                 bigchain
 
+address:
+    street:             Wichertstr. 17
+    zip:                10439
+    city:               Berlin
+    country:            Germany
 
 # Track all the things
 # --------------------
diff --git a/_src/_assets/javascripts/bigchain.js b/_src/_assets/javascripts/bigchain.js
index fa8e88d..93f7f87 100644
--- a/_src/_assets/javascripts/bigchain.js
+++ b/_src/_assets/javascripts/bigchain.js
@@ -8,6 +8,7 @@
 //=include bigchain/dnt.js
 
 //=include bigchain/form-earlyaccess.js
+//=include bigchain/form-contact.js
 
 jQuery(function($) {
 
diff --git a/_src/_assets/javascripts/bigchain/form-contact.js b/_src/_assets/javascripts/bigchain/form-contact.js
new file mode 100644
index 0000000..0cc3f00
--- /dev/null
+++ b/_src/_assets/javascripts/bigchain/form-contact.js
@@ -0,0 +1,59 @@
+
+var FormContact = (function(w, d, $) {
+
+    'use strict';
+
+    var app, _private, _config;
+
+    _config = {
+        form:       $('#form-contact'),
+        formBtn:    $('#form-contact').find('.btn'),
+        formURL:    $('#form-contact').attr('action'),
+        formMethod: $('#form-contact').attr('method')
+    };
+
+    _private = {
+        formSubmit: function() {
+            _config.form.submit(function(e) {
+                e.preventDefault();
+
+                if ( $(this).parsley().isValid() ) {
+                    $.ajax({
+                        url: _config.formURL,
+                        type: _config.formMethod,
+                        accept: {
+                            javascript: 'application/javascript'
+                        },
+                        data: _config.form.serialize(),
+                        crossDomain: true,
+                        beforeSend: function() {
+                            _config.formBtn
+                                .addClass('disabled')
+                                .attr('value', 'Sending...');
+                        },
+                        success: function(data) {
+                            _config.form.find('.form-group').addClass('hide');
+                            _config.form.find('.alert-success').removeClass('hide');
+                            _config.formBtn.removeClass('disabled');
+                        },
+                        error: function(err) {
+                            _config.form.find('.alert-danger').removeClass('hide');
+                            _config.formBtn
+                                .removeClass('disabled')
+                                .attr('value', 'Send');
+                        }
+                    });
+                }
+            });
+        }
+    };
+
+    app = {
+        init: function() {
+            _private.formSubmit();
+        }
+    };
+
+    return app;
+
+})(window, document, jQuery);
diff --git a/_src/_assets/styles/bigchain.scss b/_src/_assets/styles/bigchain.scss
index b66c6fe..029fc9e 100644
--- a/_src/_assets/styles/bigchain.scss
+++ b/_src/_assets/styles/bigchain.scss
@@ -45,3 +45,4 @@
 @import 'page-about';
 @import 'page-features';
 @import 'page-community';
+@import 'page-contact';
diff --git a/_src/_assets/styles/page-contact.scss b/_src/_assets/styles/page-contact.scss
new file mode 100644
index 0000000..b5bf9c0
--- /dev/null
+++ b/_src/_assets/styles/page-contact.scss
@@ -0,0 +1,9 @@
+//
+// Page: Contact
+// ---
+// bigchain.io
+//
+
+.contactlist {
+    p { margin-bottom: 0 }
+}
diff --git a/_src/_includes/form-contact.html b/_src/_includes/form-contact.html
new file mode 100644
index 0000000..5b0145b
--- /dev/null
+++ b/_src/_includes/form-contact.html
@@ -0,0 +1,37 @@
+
+<form id="form-contact" class="js-parsley" action="//formspree.io/{{ site.email.contact }}" method="POST" accept-charset="UTF-8">
+    <p class="form-group">
+        <input class="form-control" type="text" id="name" name="name" required>
+        <label class="form-label" for="name">Your Name</label>
+    </p>
+    <p class="form-group">
+        <input class="form-control" type="email" id="email" name="_replyto" required>
+        <label class="form-label" for="email">Your Email</label>
+    </p>
+    <p class="form-group">
+        <textarea class="form-control" id="comment" name="comment" rows="1" required></textarea>
+        <label class="form-label" for="comment">Your Message</label>
+    </p>
+    <p class="form-group">
+        <input class="btn btn-primary" type="submit" value="Send">
+    </p>
+
+    <div class="alert alert-success animation-slide-in-from-bottom hide">
+        <svg class="alert__icon icon icon-success">
+            <use xlink:href="/assets/img/sprite.svg#icon-success"></use>
+        </svg>
+        <p>
+            <strong class="alert__title">Great to hear you’re interested!</strong>
+            We’ll get in touch soon to discuss how we can work together.
+        </p>
+    </div>
+    <div class="alert alert-danger hide">
+        <svg class="alert__icon icon icon-fail">
+            <use xlink:href="/assets/img/sprite.svg#icon-fail"></use>
+        </svg>
+        <p>
+            <strong class="alert__title">Ops, there was an error</strong>
+            Would you mind trying again?
+        </p>
+    </div>
+</form>
diff --git a/_src/contact.html b/_src/contact.html
new file mode 100644
index 0000000..278405a
--- /dev/null
+++ b/_src/contact.html
@@ -0,0 +1,27 @@
+---
+layout: page
+
+title: Contact
+---
+
+<section class="section section-contactform">
+    <div class="row">
+        <header class="section-header">
+            <h1 class="section-title">Get in touch</h1>
+        </header>
+
+        <div class="grid grid--full grid-small--fit grid--gutters">
+            <div class="grid__col">
+                {% include/form-contact.html %}
+            </div>
+            <div class="grid__col">
+                <div class="contactlist">
+                    <p>{{ site.address.street }}</p>
+                    <p>{{ site.address.zip }} {{ site.address.city }}</p>
+                    <p>{{ site.address.country }}</p>
+                    <p>{{ site.email.contact }}</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
diff --git a/_src/contact.md b/_src/contact.md
deleted file mode 100644
index 5861f09..0000000
--- a/_src/contact.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-layout: page
-
-title: Contact
----