From 1ab111e01426ddf8ebbd48167b5d2c2730dec05b Mon Sep 17 00:00:00 2001
From: Jonathan Cremin <jonathan@crem.in>
Date: Sun, 11 Jan 2015 23:03:07 +0000
Subject: [PATCH] Add some basic faq answers

---
 public/stylesheets/style.css |  8 ++++++++
 views/faq.jsx                | 30 ++++++++++++++++++++++++++++++
 views/home.jsx               |  2 ++
 3 files changed, 40 insertions(+)
 create mode 100644 views/faq.jsx

diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css
index 5273550..854b605 100644
--- a/public/stylesheets/style.css
+++ b/public/stylesheets/style.css
@@ -60,6 +60,14 @@ header h1 a:hover, header h1 a:focus{
   outline: 0 none;
 }
 
+.faq ul {
+  padding: 0;
+}
+
+.faq li {
+  list-style: none;
+}
+
 .share header h1, .share header h1 {
   text-align: left;
   font-size: 1.5em;
diff --git a/views/faq.jsx b/views/faq.jsx
new file mode 100644
index 0000000..3488156
--- /dev/null
+++ b/views/faq.jsx
@@ -0,0 +1,30 @@
+'use strict';
+
+var React = require('react');
+
+module.exports = React.createClass({
+
+  render: function() {
+    return (
+      <div className="row faq">
+        <div className="col-md-6 col-md-offset-3">
+          <h2>Questions?</h2>
+          <ul>
+            <li>
+              <h3>Why would I want to use this?</h3>
+              <p>Sometimes when people want to share music they don't know what service their friends are using. Match Audio let's you take a link from one service and expand it into a link that supports all services.</p>
+            </li>
+            <li>
+              <h3>I still don't get it.</h3>
+              <p>That's not actually a question, but that's ok. Here's an example: I'm listening to a cool new album I found on Google Play Music. So I go to the address bar (the box that sometimes says https://www.google.com in it) and copy the link to share with my friend. But my friend uses Spotify. So first I go to Match Audio and paste the link there, then grab the Match Audio link from the address bar and send them that link instead.</p>
+            </li>
+            <li>
+              <h3>Where do I find a link to paste in the box?</h3>
+              <p>Most music services have a "share" dialog for albums and tracks in their interface. If you have them open in a web browser instead of an app, you can simply copy and paste the address bar and we'll work out the rest.</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+    );
+  }
+});
diff --git a/views/home.jsx b/views/home.jsx
index e39aaa8..45d137d 100644
--- a/views/home.jsx
+++ b/views/home.jsx
@@ -4,6 +4,7 @@ var React = require('react');
 var request = require('superagent');
 var Router = require('react-router');
 var Link = require('react-router').Link;
+var Faq = require('./faq.jsx');
 var Foot = require('./foot.jsx');
 
 var Recent = React.createClass({
@@ -141,6 +142,7 @@ module.exports = React.createClass({
               </div>
             </div>
             <Recent recents={this.state.recents} />
+            <Faq />
           </div>
         </div>
         <Foot page="home" />