Initial commit

84 files changed, 1055 insertions, 694 deletions

diff --git a/gulpfile.babel.js b/gulpfile.babel.js
index 8aafe62..fd93ae4 100644
--- a/gulpfile.babel.js
+++ b/gulpfile.babel.js
@@ -7,6 +7,9 @@ import cssnext from "postcss-cssnext";
 import BrowserSync from "browser-sync";
 import webpack from "webpack";
 import webpackConfig from "./webpack.conf";
+import svgstore from "gulp-svgstore";
+import svgmin from "gulp-svgmin";
+import inject from "gulp-inject";
 
 const browserSync = BrowserSync.create();
 const hugoBin = "hugo";
@@ -39,7 +42,24 @@ gulp.task("js", (cb) => {
   });
 });
 
-gulp.task("server", ["hugo", "css", "js"], () => {
+gulp.task('svg', () => {
+    const svgs = gulp
+      .src('site/static/img/icons/*.svg')
+      .pipe(svgmin())
+      .pipe(svgstore({ inlineSvg: true }));
+
+    function fileContents(filePath, file) {
+        return file.contents.toString();
+    }
+
+    return gulp
+      .src('site/layouts/partials/svg.html')
+      .pipe(inject(svgs, { transform: fileContents }))
+      .pipe(gulp.dest('site/layouts/partials/'));
+      browserSync.reload();
+});
+
+gulp.task("server", ["hugo", "css", "js", "svg"], () => {
   browserSync.init({
     server: {
       baseDir: "./dist"
@@ -55,7 +75,7 @@ function buildSite(cb, options) {
 
   return cp.spawn(hugoBin, args, {stdio: "inherit"}).on("close", (code) => {
     if (code === 0) {
-      browserSync.reload();
+      browserSync.reload("notify:false");
       cb();
     } else {
       browserSync.notify("Hugo build failed :(");
diff --git a/package.json b/package.json
index f82f02b..82c6bfb 100644
--- a/package.json
+++ b/package.json
@@ -40,5 +40,9 @@
     "url-loader": "^0.5.7",
     "webpack": "^1.13.1",
     "whatwg-fetch": "^1.0.0"
+  },
+  "devDependencies": {
+    "gulp-svgstore": "^6.1.0",
+    "svg-sprite-loader": "^0.1.2"
   }
 }
diff --git a/site/content/about.md b/site/content/about.md
new file mode 100644
index 0000000..df221a8
--- /dev/null
+++ b/site/content/about.md
@@ -0,0 +1,5 @@
++++
+title = "Another Hugo Post"
+type = "about"
+page="/about.html"
++++
diff --git a/site/content/contact.md b/site/content/contact.md
new file mode 100644
index 0000000..d0e0e10
--- /dev/null
+++ b/site/content/contact.md
@@ -0,0 +1,5 @@
++++
+title = "Another Hugo Post"
+type = "contact"
+page="/contact.html"
++++
diff --git a/site/content/post/brewing-chemex.md b/site/content/post/brewing-chemex.md
new file mode 100644
index 0000000..ba0ac68
--- /dev/null
+++ b/site/content/post/brewing-chemex.md
@@ -0,0 +1,18 @@
++++
+title = "A beginners’ guide to brewing with Chemex"
+type = "post"
++++
+
+Brewing with a Chemex probably seems like a complicated, time-consuming ordeal, but once you get used to the process, it becomes a soothing ritual that’s worth the effort every time.
+
+<!--more-->
+
+This [week](/wdwdw) we’ll take a look at all the steps required to make astonishing coffee with a Chemex at home. The Chemex Coffeemaker is a manual, pour-over style glass-container coffeemaker that Peter Schlumbohm invented in 1941, and which continues to be manufactured by the Chemex Corporation in Chicopee, Massachusetts.
+
+In 1958, designers at the Illinois Institute of Technology said that the Chemex Coffeemaker is "one of the best-designed products of modern times", and so is included in the collection of the Museum of Modern Art in New York City.
+
+The Chemex Coffeemaker consists of an hourglass-shaped glass flask with a conical funnel-like neck (rather than the cylindrical neck of an Erlenmeyer flask) and uses proprietary filters, made of bonded paper (thicker-gauge paper than the standard paper filters for a drip-method coffeemaker) that removes most of the coffee oils, brewing coffee with a taste that is different than coffee brewed in other coffee-making systems; also, the thicker paper of the Chemex coffee filters may assist in removing cafestol, a cholesterol-containing compound found in coffee oils.
+
+The most visually distinctive feature of the Chemex is the heatproof wooden collar around the neck, allowing it to be handled and poured when full of hot water. This is turned, then split in two to allow it to fit around the glass neck. The two pieces are held loosely in place by a tied leather thong. The pieces are not tied tightly and can still move slightly, retained by the shape of the conical glass.
+
+For a design piece that became popular post-war at a time of Modernism and precision manufacture, this juxtaposition of natural wood and the organic nature of a hand-tied knot with the laboratory nature of glassware was a distinctive feature of its appearance.
diff --git a/site/content/post/jamaica-blue.md b/site/content/post/jamaica-blue.md
new file mode 100644
index 0000000..7d932ae
--- /dev/null
+++ b/site/content/post/jamaica-blue.md
@@ -0,0 +1,20 @@
++++
+title = "Just in: small batch of Jamaica Blue Mountain in store next week"
+type = "post"
++++
+
+We’re proud to announce that we’ll be offering a small batch of Jamaica Blue Mountain coffee beans in our store next week.
+
+<!--more-->
+
+We expect the shipment of a limited quantity of green beans next Monday. We’ll be offering the roasted beans from Tuesday, but quantities are limited, so be quick.
+
+Blue Mountain Peak is the highest mountain in Jamaica and one of the highest peaks in the Caribbean at 7,402 ft. It is the home of Blue Mountain coffee and their famous tours. It is located on the border of the Portland and Saint Thomas parishes of Jamaica.
+
+The Blue Mountains are considered by many to be a hiker's and camper's paradise. The traditional Blue Mountain trek is a 7-mile hike to the peak and consists of a 3,000-foot increase in elevation. Jamaicans prefer to reach the peak at sunrise, thus the 3–4 hour hike is usually undertaken in darkness. Since the sky is usually very clear in the mornings, Cuba can be seen in the distance. Some of the plants found on the Blue Mountain cannot be found anywhere else in the world and they are often of a dwarfed sort. This is mainly due to the cold climate which inhibits growth. The small coffee farming communities of Claverty Cottage and Hagley Gap are located near the peak.
+
+Jamaican Blue Mountain Coffee or Jamaica Blue Mountain Coffee is a classification of coffee grown in the Blue Mountains of Jamaica. The best lots of Blue Mountain coffee are noted for their mild flavor and lack of bitterness. Over the past few decades, this coffee has developed a reputation that has made it one of the most expensive and sought-after coffees in the world. Over 80% of all Jamaican Blue Mountain Coffee is exported to Japan.[1] In addition to its use for brewed coffee, the beans are the flavor base of Tia Maria coffee liqueur.
+
+Jamaican Blue Mountain Coffee is a globally protected certification mark, meaning only coffee certified by the Coffee Industry Board of Jamaica can be labeled as such. It comes from a recognized growing region in the Blue Mountain region of Jamaica, and its cultivation is monitored by the Coffee Industry Board of Jamaica.
+
+The Blue Mountains are generally located between Kingston to the south and Port Antonio to the north. Rising 7,402 ft, they are some of the highest mountains in the Caribbean. The climate of the region is cool and misty with high rainfall. The soil is rich, with excellent drainage. This combination of climate and soil is considered ideal for coffee.
diff --git a/site/content/post/making-sense.md b/site/content/post/making-sense.md
new file mode 100644
index 0000000..eb788b7
--- /dev/null
+++ b/site/content/post/making-sense.md
@@ -0,0 +1,18 @@
++++
+title = "Making sense of the SCAA’s new Flavor Wheel"
+type = "post"
++++
+
+The Coffee Taster’s Flavor Wheel, the official resource used by coffee tasters, has been revised for the first time this year.
+
+<!--more-->
+
+The SCAA updated the wheel to reflect the finer nuances needed to describe flavors more precisely. The new descriptions are more detailed and hence allow cuppers to distinguish between more flavors.
+
+While this is going to be a big change for professional coffee tasters, it means a lot to you as a consumer as well. We’ll explain how the wheel came to be, how pros use it and what the flavors actually mean.
+
+The Specialty Coffee Association of America (SCAA), founded in 1982, is a non-profit trade organization for the specialty coffee industry. With members located in more than 40 countries, SCAA represents every segment of the specialty coffee industry, including producers, roasters, importers/exporters, retailers, manufacturers, baristas and other industry professionals. For over 30 years, SCAA has been dedicated to creating a vibrant specialty coffee community by recognizing, developing and promoting specialty coffee. SCAA sets and maintains quality standards for the industry, conducts market research, and provides education, training, resources, and business services for its members.
+
+Coffee cupping, or coffee tasting, is the practice of observing the tastes and aromas of brewed coffee. It is a professional practice but can be done informally by anyone or by professionals known as "Q Graders". A standard coffee cupping procedure involves deeply sniffing the coffee, then loudly slurping the coffee so it spreads to the back of the tongue.
+
+The coffee taster attempts to measure aspects of the coffee's taste, specifically the body (the texture or mouthfeel, such as oiliness), sweetness, acidity (a sharp and tangy feeling, like when biting into an orange), flavour (the characters in the cup), and aftertaste. Since coffee beans embody telltale flavours from the region where they were grown, cuppers may attempt to identify the coffee's origin.
diff --git a/site/content/products.md b/site/content/products.md
new file mode 100644
index 0000000..1f41f10
--- /dev/null
+++ b/site/content/products.md
@@ -0,0 +1,5 @@
++++
+title = "Another Hugo Post"
+type = "products"
+page="/products.html"
++++
diff --git a/site/layouts/_default/li.html b/site/layouts/_default/li.html
new file mode 100644
index 0000000..d521ea0
--- /dev/null
+++ b/site/layouts/_default/li.html
@@ -0,0 +1,3 @@
+<li>
+  Hello
+</li>
diff --git a/site/layouts/_default/single.html b/site/layouts/_default/single.html
new file mode 100644
index 0000000..124e30d
--- /dev/null
+++ b/site/layouts/_default/single.html
@@ -0,0 +1,5 @@
+{{ partial "header" . }}
+{{ partial "nav" . }}
+{{ partial "jumbotron" (dict "imageUrl" "/img/7.jpg" "title" "This is where the heading goes" "subtitle" "This is where the subtitle goes") }}
+  {{ .Content }}
+{{ partial "footer" . }}
diff --git a/site/layouts/about/single.html b/site/layouts/about/single.html
new file mode 100644
index 0000000..ddcdd5f
--- /dev/null
+++ b/site/layouts/about/single.html
@@ -0,0 +1,16 @@
+{{ partial "header" . }}
+{{ partial "nav" . }}
+{{ partial "jumbotron" (dict "imageUrl" "/img/about/jumbotron.jpg" "title" "About us" "subtitle" "Our values") }}
+
+<div class="mw7 center ph3 pt4">
+
+  {{ partial "media-block" (dict "heading" "Shade-grown coffee" "text" "Coffee is a small tree or shrub that grows in the forest understory in its wild form, and traditionally was grown commercially under other trees that provided shade. The forest-like structure of shade coffee farms provides habitat for a great number of migratory and resident species." "imageUrl" "/img/about/direct-sourcing.jpg") }}
+
+  {{ partial "media-block-reverse" (dict "heading" "Shade-grown coffee" "text" "Coffee is a small tree or shrub that grows in the forest understory in its wild form, and traditionally was grown commercially under other trees that provided shade. The forest-like structure of shade coffee farms provides habitat for a great number of migratory and resident species." "imageUrl" "/img/about/reinvest-profits.jpg") }}
+
+  {{ partial "media-block" (dict "heading" "Shade-grown coffee" "text" "Coffee is a small tree or shrub that grows in the forest understory in its wild form, and traditionally was grown commercially under other trees that provided shade. The forest-like structure of shade coffee farms provides habitat for a great number of migratory and resident species." "imageUrl" "/img/about/shade-grown.jpg") }}
+
+  {{ partial "media-block-reverse" (dict "heading" "Shade-grown coffee" "text" "Coffee is a small tree or shrub that grows in the forest understory in its wild form, and traditionally was grown commercially under other trees that provided shade. The forest-like structure of shade coffee farms provides habitat for a great number of migratory and resident species." "imageUrl" "/img/about/single-origin.jpg") }}
+</div>
+
+{{ partial "footer" . }}
diff --git a/site/layouts/contact/single.html b/site/layouts/contact/single.html
new file mode 100644
index 0000000..e98f8d1
--- /dev/null
+++ b/site/layouts/contact/single.html
@@ -0,0 +1,60 @@
+{{ partial "header" . }}
+
+{{ partial "nav" . }}
+
+<div class="bg-black white ph3">
+	<div class="center mw6 pv3">
+		<img src="/img/logo.svg" alt="" class="db w4 center pv4">
+		<p>We’d love to get in touch with you and hear your ideas and questions. We strive to grow and improve constantly and your feedback is valuable for us.</p>
+		<h3 class="f4 b lh-title mb2">How can I get…?</h3>
+		<p>You can also use the form below for any inquiries about coffee availability, monthly subscriptions and scheduling a 1-on-1 session with our baristas. Don’t be shy, drop us a line!</p>
+
+		<div class="flex-ns">
+			<div>
+				<h4 class="f4 b lh-title mb2 primary">Location</h4>
+				<p>3153 Lynn Avenue, South San Francisco, California 94080</p>
+			</div>
+
+			<div>
+				<h4 class="f4 b lh-title mb2 primary">Working hours</h4>
+				<p>Monday – Saturday: 9AM – 7PM We’re closed on Sundays</p>
+			</div>
+		</div>
+
+		<!-- Contact -->
+		<div>
+		  <h4 class="f3 b lh-title mb3 tc">Drop us a line below</h4>
+
+		  <form action="">
+		    <div class="flex-l mhn1-l">
+		          <!-- Name -->
+		      <div class="ph1-l w-50-l">
+		        <fieldset>
+		          <input type="text" id="name" placeholder="Name" class="w-100 mb2">
+		          <label for="name">Name</label>
+		        </fieldset>
+		      </div>
+		          <!-- Email -->
+		      <div class="ph1-l w-50-l">
+		        <fieldset>
+		          <input type="email" id="email" placeholder="Email" class="w-100 mb2">
+		          <label for="email">Email</label>
+		        </fieldset>
+		      </div>
+		    </div>
+
+		        <!-- Message -->
+		    <fieldset>
+		      <textarea name="name" placeholder="Your message" rows="8" cols="80" id="message" class="w-100"></textarea>
+		      <label for="message">Your message</label>
+		    </fieldset>
+		        <!-- Button -->
+		    <div class="tc">
+		      <button type="submit" class="btn w-100 w-auto-ns raise">Submit</button>
+		    </div>
+		  </form>
+		</div>
+	</div>
+</div>
+
+{{ partial "footer" . }}
diff --git a/site/layouts/index.html b/site/layouts/index.html
index 225c92b..fa1b5cb 100644
--- a/site/layouts/index.html
+++ b/site/layouts/index.html
@@ -1,5 +1,15 @@
 {{ partial "header" . }}
 
-<h1>Hugo with Gulp, PostCSS and Webpack</h1>
+{{ partial "nav" . }}
+
+{{ partial "jumbotron" (dict "imageUrl" "/img/home/jumbotron.jpg" "title" "Great coffee with a conscience" "subtitle" "Support sustainable farming while enjoying a cup") }}
+
+{{ partial "short-text" (dict "heading" "Why Kaldi?" "text" "Kaldi is the coffee store for everyone who believes that great coffee shouldn't just taste good, it should do good too. We source all of our beans directly from small scale sustainable farmers and make sure part of the profits are reinvested in their communities.")}}
+
+{{ partial "2-up" (dict "heading" "What we offer" "description" "Kaldi is the ultimate spot for coffee lovers who want to learn about their java’s origin and support the farmers that grew it. We take coffee production, roasting and brewing seriously and we’re glad to pass that knowledge to anyone." "svg1" "img/illustrations/coffee.svg" "text1" "We sell green and roasted coffee beans that are sourced directly from independent farmers and farm cooperatives. We’re proud to offer a variety of coffee beans grown with great care for the environment and local communities. Check our post or contact us directly for current availability." "svg2" "/img/illustrations/coffee-gear.svg" "text2" "We offer a small, but carefully curated selection of brewing gear and tools for every taste and experience level. No matter if you roast your own beans or just bought your first french press, you’ll find a gadget to fall in love with in our shop." "buttonText" "See all products"  ) }}
+
+{{ partial "about" (dict "heading" "Our values" "text" "Coffee is an amazing part of human culture but it has a dark side too – one of colonialism and mindless abuse of natural resources and human lives. We want to turn this around and return the coffee trade to the drink’s exhilarating, empowering and unifying nature." "buttonText" "Read more") }}
+
+{{ partial "post" . }}
 
 {{ partial "footer" . }}
diff --git a/site/layouts/indexes/post.html b/site/layouts/indexes/post.html
new file mode 100644
index 0000000..a60f513
--- /dev/null
+++ b/site/layouts/indexes/post.html
@@ -0,0 +1,16 @@
+{{ partial "header" . }}
+{{ partial "nav" . }}
+
+{{ partial "jumbotron" (dict "imageUrl" "/img/post-index.jpg" "title" "post") }}
+
+<div class="mw7 center">
+  <ul class="flex-ns flex-wrap mhn1-ns pa3">
+      {{ range .Data.Pages }}
+          <div class="w-50-ns ph1-ns flex">
+            {{ .Render "li"}}
+          </div>
+      {{ end }}
+  </ul>
+</div>
+
+{{ partial "footer" . }}
diff --git a/site/layouts/partials/2-up.html b/site/layouts/partials/2-up.html
new file mode 100644
index 0000000..d4f30fe
--- /dev/null
+++ b/site/layouts/partials/2-up.html
@@ -0,0 +1,24 @@
+<div class="bg-off-white pv4">
+  <div class="ph3 mw7 center">
+    <h2 class="f2 b lh-title mb2">{{.heading}}</h2>
+    <p class="mb4 mw6">{{.description}}</p>
+
+    <div class="flex-ns mhn2-ns mb3">
+      <div class="ph2-ns w-50-ns">
+        <img src="{{.svg1}}" alt="" class="center db mb3" style="width: 240px">
+        <p>{{.text1}}</p>
+      </div>
+
+      <div class="ph2-ns w-50-ns">
+        <img src="{{.svg2}}" alt="" class="center db mb3" style="width: 240px">
+        <p>{{.text2}}</p>
+      </div>
+    </div>
+
+    {{ if .buttonText }}
+      <div class="tc">
+        <a href="#" class="btn raise">{{.buttonText}}</a>
+      </div>
+    {{ end }}
+  </div>
+</div>
diff --git a/site/layouts/partials/4-up.html b/site/layouts/partials/4-up.html
new file mode 100644
index 0000000..dff48b4
--- /dev/null
+++ b/site/layouts/partials/4-up.html
@@ -0,0 +1,36 @@
+<div class="bg-off-white pv4">
+	<div class="ph3 mw7 center">
+		<h2 class="f2 b lh-title mb2">{{.heading}}</h2>
+		<p class="mb4 mw6">{{.description}}</p>
+
+		<div class="flex-ns flex-wrap mhn2-ns mb3">
+
+			<div class="ph2-ns w-50-ns mb4">
+				<img src="{{.svg1}}" alt="" class="center db mb3" style="width: 240px">
+				<p>{{.text1}}</p>
+			</div>
+
+			<div class="ph2-ns w-50-ns mb4">
+				<img src="{{.svg2}}" alt="" class="center db mb3" style="width: 240px">
+				<p>{{.text2}}</p>
+			</div>
+
+      <div class="ph2-ns w-50-ns mb4">
+        <img src="{{.svg3}}" alt="" class="center db mb3" style="width: 240px">
+        <p>{{.text3}}</p>
+      </div>
+
+      <div class="ph2-ns w-50-ns mb4">
+        <img src="{{.svg4}}" alt="" class="center db mb3" style="width: 240px">
+        <p>{{.text4}}</p>
+      </div>
+
+		</div>
+
+		{{ if .buttonText }}
+			<div class="tc">
+				<a href="#" class="btn raise">{{.buttonText}}</a>
+			</div>
+		{{ end }}
+	</div>
+</div>
diff --git a/site/layouts/partials/about.html b/site/layouts/partials/about.html
new file mode 100644
index 0000000..657aead
--- /dev/null
+++ b/site/layouts/partials/about.html
@@ -0,0 +1,21 @@
+<div class="bg-grey-1 pv4">
+	<div class="ph3 mw7 center">
+
+		<div class="flex-l mhn2-l">
+			<div class="w-40-l ph2-l">
+				<h2 class="f2 b lh-title mb2">{{.heading}}</h1>
+
+				<p>{{.text}}</p>
+			</div>
+
+			<div class="w-60-l ph2-l">
+				<img src="img/home/about-section.jpg" alt="" class="mb3">
+			</div>
+		</div>
+
+		<div class="tc">
+			<a href="#" class="btn raise">{{.buttonText}}</a>
+		</div>
+
+	</div>
+</div>
diff --git a/site/layouts/partials/blockquote.html b/site/layouts/partials/blockquote.html
new file mode 100644
index 0000000..6f432bd
--- /dev/null
+++ b/site/layouts/partials/blockquote.html
@@ -0,0 +1,6 @@
+<div class="mw6 center mb3">
+  <blockquote class="bg-grey-1 primary pa3 mb3 br1 b">
+    <p class="f4 mb0">{{.quote}}</p>
+    <cite class="tr db grey-3">{{.author}}</cite>
+  </blockquote>
+</div>
diff --git a/site/layouts/partials/blog.html b/site/layouts/partials/blog.html
new file mode 100644
index 0000000..c8f5ff1
--- /dev/null
+++ b/site/layouts/partials/blog.html
@@ -0,0 +1,22 @@
+<div class="bg-off-white">
+	<div class="ph3 mw7 center mb4">
+
+		<h2 class="f2 b lh-title mb2">post section</h1>
+
+
+	  <div class="flex-l mhn1-l flex-wrap mb3">
+
+			{{ range where .Data.Pages "Type" "post" }}
+				<div class="ph1-l w-50-l flex">
+					{{ .Render "li" }}
+				</div>
+			{{ end }}
+
+	  </div>
+
+	  <div class="tc">
+	  	<a href="/post" class="btn mb3 raise">Read more</a>
+	  </div>
+
+	</div>
+</div>
diff --git a/site/layouts/partials/footer.html b/site/layouts/partials/footer.html
index 310a610..629e288 100644
--- a/site/layouts/partials/footer.html
+++ b/site/layouts/partials/footer.html
@@ -1,3 +1,59 @@
+<footer class="bg-black ph3 pv4 white">
+
+	<div class="mw7 center pt3">
+		<div class="measure-narrow center mb4">
+			<img src="/img/logo.svg" alt="" class="db w4 center mb4">
+			<p class="f3 lh-title light-gray b tc mb2">Newsletter subscribe</p>
+			<p>Get awesome news from us in your inbox every two weeks. Be the first to learn about new products.</p>
+
+			<form action="" class="flex-ns mb3">
+				<fieldset class="flex-auto mb2 mb0-ns mr2-ns">
+					<input type="text" id="email" placeholder="Your email" class="w-100">
+					<label for="email">Your email</label>
+				</fieldset>
+				<button class="btn mb3 w-100 w-auto-ns mb0-ns raise" type="submit">Submit</button>
+			</form>
+		</div>
+
+		<div class="flex-ns justify-between">
+			<div>
+				<h3 class="f4 b lh-title mb1 primary">List of links</h3>
+				<ul class="mb3">
+					<li><a href="/" class="link">Home</a></li>
+					<li><a href="/products" class="link">Our products</a></li>
+					<li><a href="/about" class="link">About us</a></li>
+					<li><a href="/post" class="link">post</a></li>
+					<li><a href="/contact" class="link">Contact</a></li>
+				</ul>
+			</div>
+
+			<div>
+				<h3 class="f4 b lh-title mb1 primary">Another list of links</h3>
+				<ul class="mb3">
+					<li><a href="#" class="link">Latest offer</a></li>
+					<li><a href="#" class="link">Our locations</a></li>
+					<li><a href="#" class="link">Our partners</a></li>
+				</ul>
+			</div>
+
+			<div>
+				<h3 class="f4 b lh-title mb2 primary">Social media</h3>
+				<ul class="mhn2">
+					{{ partial "social-icon" (dict "link" "facebook.com" "svg" "500px") }}
+					{{ partial "social-icon" (dict "link" "facebook.com" "svg" "Airbnb") }}
+					{{ partial "social-icon" (dict "link" "facebook.com" "svg" "Facebook") }}
+					{{ partial "social-icon" (dict "link" "facebook.com" "svg" "Amazon") }}
+				</ul>
+			</div>
+		</div>
+	</div>
+
+</footer>
+
+{{ partial "svg" . }}
+
 <script src="/app.js"></script>
+
 </body>
+
 </html>
diff --git a/site/layouts/partials/header.html b/site/layouts/partials/header.html
index c84dc6e..c9268c2 100644
--- a/site/layouts/partials/header.html
+++ b/site/layouts/partials/header.html
@@ -3,5 +3,10 @@
   <head>
     <title>Hugo with Gulp and Webpack</title>
     <link rel="stylesheet" href="/css/main.css"/>
+
+    <meta charset="utf-8">
+  	<meta http-equiv="x-ua-compatible" content="ie=edge">
+  	<meta name="viewport" content="width=device-width, initial-scale=1">
+    <link href="https://fonts.googleapis.com/css?family=Nunito+Sans:400,700,800" rel="stylesheet">
   </head>
-  <body>
+  <body class="sans-serif">
diff --git a/site/layouts/partials/image-grid.html b/site/layouts/partials/image-grid.html
new file mode 100644
index 0000000..25bf701
--- /dev/null
+++ b/site/layouts/partials/image-grid.html
@@ -0,0 +1,17 @@
+<div class="mw7 center ph3 pv4">
+
+	<div class="flex flex-wrap mhn1">
+		<div class="w-100 w-50-ns ph1-ns">
+			<img src="/img/products/products-grid3.jpg" alt="">
+		</div>
+
+		<div class="w-100 w-50-ns ph1-ns">
+			<img src="/img/products/products-grid2.jpg" alt="">
+		</div>
+
+		<div class="w-100 ph1-ns">
+			<img src="/img/products/products-grid1.jpg" alt="">
+		</div>
+	</div>
+
+</div>
diff --git a/site/layouts/partials/jumbotron.html b/site/layouts/partials/jumbotron.html
new file mode 100644
index 0000000..b843c1c
--- /dev/null
+++ b/site/layouts/partials/jumbotron.html
@@ -0,0 +1,18 @@
+<div class="pv5 pv6-l ph3 bg-center cover" style="background-image: url('{{.imageUrl}}')">
+  <div class="mw7 center ph3">
+    <div class="db mb3">
+      <div class="mw7 relative bg-fix-primary mb3">
+        <h1 class="f2 f1-l b di lh-title mb3 white mw6 bg-primary">
+          {{.title}}
+        </h1>
+      </div>
+      <div class="mw7 relative bg-fix-primary">
+        {{ if .subtitle }}
+        <p class="b f4 di lh-title mb3 white mw6 bg-primary">
+          {{.subtitle}}
+        </p>
+        {{ end }}
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/site/layouts/partials/media-block-reverse.html b/site/layouts/partials/media-block-reverse.html
new file mode 100644
index 0000000..a7b8c18
--- /dev/null
+++ b/site/layouts/partials/media-block-reverse.html
@@ -0,0 +1,12 @@
+<div class="flex-ns mhn3-ns mb4">
+
+  <div class="ph3-ns w-50-ns order-last-ns">
+    <img src="{{.imageUrl}}" alt="" class="db mb2">
+  </div>
+
+  <div class="ph3-ns w-50-ns">
+    <h3 class="f3 b lh-title mb1">{{.heading}}</h3>
+    <p>{{.text}}</p>
+  </div>
+
+</div>
diff --git a/site/layouts/partials/media-block.html b/site/layouts/partials/media-block.html
new file mode 100644
index 0000000..db5f619
--- /dev/null
+++ b/site/layouts/partials/media-block.html
@@ -0,0 +1,12 @@
+<div class="flex-ns mhn3-ns mb4">
+
+  <div class="ph3-ns w-50-ns">
+    <img src="{{.imageUrl}}" alt="" class="db mb2">
+  </div>
+
+  <div class="ph3-ns w-50-ns">
+    <h3 class="f3 b lh-title mb1">{{.heading}}</h3>
+    <p>{{.text}}</p>
+  </div>
+
+</div>
diff --git a/site/layouts/partials/nav.html b/site/layouts/partials/nav.html
new file mode 100644
index 0000000..8225a10
--- /dev/null
+++ b/site/layouts/partials/nav.html
@@ -0,0 +1,12 @@
+<nav class="overflow-x-scroll flex justify-between center bg-white divider">
+  <a href="/" class="pa3 dib mr4 flex-none">
+    <img src="/img/logo.svg" alt="" width="80px">
+  </a>
+
+  <ul class="flex b grey-3">
+    <li><a href="/products" class="pa3 link db">Products</a></li>
+    <li><a href="/about" class="pa3 link db">About</a></li>
+    <li><a href="/post" class="pa3 link db">post</a></li>
+    <li><a href="/contact" class="pa3 link db">Contact</a></li>
+  </ul>
+</nav>
diff --git a/site/layouts/partials/pricing-card.html b/site/layouts/partials/pricing-card.html
new file mode 100644
index 0000000..2f009b2
--- /dev/null
+++ b/site/layouts/partials/pricing-card.html
@@ -0,0 +1,27 @@
+<div class="ph2">
+
+	<!-- Title -->
+	<h3 class="b f5 grey-3 tc lh-title mb3">{{.plan}}</h3>
+
+	<!-- Price -->
+	<p class="primary f1 b tc lh-title">
+		<span class="f4">$</span>{{.price}}
+	</p>
+
+	<!-- Description -->
+	<p class="b">{{.description}}</p>
+
+	<!-- Features -->
+	<ul>
+		<li>
+			<p class="pb2 mb2 divider">{{.item1}}</p>
+		</li>
+		<li>
+			<p class="pb2 mb2 divider">{{.item2}}</p>
+		</li>
+		<li>
+			<p>{{.item3}}</p>
+		</li>
+	</ul>
+
+</div>
diff --git a/site/layouts/partials/short-text.html b/site/layouts/partials/short-text.html
new file mode 100644
index 0000000..7f10bb7
--- /dev/null
+++ b/site/layouts/partials/short-text.html
@@ -0,0 +1,6 @@
+<div class="bg-grey-1 pv4">
+  <div class="flex-l mhn1-l ph3 center mw7">
+    <h2 class="f2 b lh-title mb2 w-40-l">{{.heading}}</h2>
+    <p class="w-60-l mb0">{{.text}}</p>
+  </div>
+</div>
diff --git a/site/layouts/partials/social-icon.html b/site/layouts/partials/social-icon.html
new file mode 100644
index 0000000..6d616be
--- /dev/null
+++ b/site/layouts/partials/social-icon.html
@@ -0,0 +1,7 @@
+<li class="dib ph2">
+  <a href="{{.link}}" class="link bg-white black db relative br-100 pa2 raise">
+    <svg width="16px" height="16px" class="db">
+      <use xlink:href="#{{.svg}}"></use>
+    </svg>
+  </a>
+</li>
diff --git a/site/layouts/partials/svg.html b/site/layouts/partials/svg.html
new file mode 100644
index 0000000..7a0c34d
--- /dev/null
+++ b/site/layouts/partials/svg.html
@@ -0,0 +1,5 @@
+<div style="height: 0; width: 0; position: absolute; visibility: hidden">
+	<!-- inject:svg -->
+  <svg xmlns="http://www.w3.org/2000/svg"><symbol id="500px" viewBox="0 0 36 46"><title>500px-black</title><path d="M35.374 38.234c-.326-.324-.604-.515-.848-.584a.618.618 0 0 0-.639.152l-.161.159a18.262 18.262 0 0 1-5.82 3.901 18.28 18.28 0 0 1-7.126 1.43 18.28 18.28 0 0 1-7.126-1.43 18.262 18.262 0 0 1-5.82-3.901c-1.752-1.742-3.072-3.688-3.924-5.785-.83-2.045-1.102-3.583-1.191-4.088l-.02-.112c-.114-.595-.665-.637-1.457-.516-.329.05-1.331.202-1.236.919l.002.016a20.815 20.815 0 0 0 5.9 11.48 20.956 20.956 0 0 0 6.685 4.48 20.998 20.998 0 0 0 8.187 1.644c2.838 0 5.592-.553 8.187-1.645a20.964 20.964 0 0 0 6.685-4.481l.168-.171c.213-.23.398-.633-.446-1.469zM20.754 4.928c-2.713 0-5.599.544-7.719 1.456a.602.602 0 0 0-.392.523c-.028.24.037.556.199.968.132.334.481 1.221 1.157.965 2.17-.823 4.569-1.276 6.755-1.276 2.477 0 4.879.482 7.14 1.433 1.796.756 3.491 1.847 5.334 3.434a.645.645 0 0 0 .424.175c.359 0 .704-.351.999-.68.492-.549.83-1.005.345-1.461-1.76-1.657-3.688-2.895-6.069-3.896a20.967 20.967 0 0 0-8.173-1.641zm-3.699 22.804c.003.305.284.572.451.732l.053.051c.287.281.561.424.814.424a.567.567 0 0 0 .384-.14c.127-.117 1.559-1.56 1.696-1.697l1.597 1.583c.148.166.309.249.496.254.255 0 .533-.151.826-.448.689-.7.344-1.077.178-1.259l-1.618-1.609 1.688-1.69c.37-.398.043-.821-.283-1.145-.473-.471-.93-.592-1.223-.324l-1.678 1.671-1.697-1.688a.465.465 0 0 0-.328-.131c-.226 0-.494.152-.795.452-.522.519-.634.877-.362 1.164l1.698 1.682-1.688 1.681c-.139.138-.208.286-.207.44zM6.293 30.224c.01.028.25.687.389 1.013a14.994 14.994 0 0 0 3.245 4.785 15.139 15.139 0 0 0 10.71 4.41c2.044 0 4.028-.398 5.896-1.184 1.804-.758 3.423-1.844 4.814-3.226a14.981 14.981 0 0 0 4.436-10.647 14.89 14.89 0 0 0-1.191-5.861 15.02 15.02 0 0 0-3.245-4.786 15.139 15.139 0 0 0-10.71-4.41c-2.069 0-4.135.409-5.977 1.184-1.472.619-3.964 2.213-5.423 3.709l-.009.009V2.828h20.939c.762-.008.762-1.066.762-1.414 0-.347 0-1.405-.764-1.414H7.524a.992.992 0 0 0-.998.982v17.442c0 .563.705.969 1.36 1.108 1.279.272 1.575-.135 1.888-.565l.042-.057c.478-.706 1.973-2.202 1.988-2.217 2.333-2.319 5.452-3.596 8.783-3.596 3.315 0 6.425 1.277 8.758 3.596 2.341 2.327 3.63 5.411 3.63 8.682 0 3.284-1.282 6.367-3.611 8.682-2.299 2.286-5.511 3.596-8.812 3.596-2.236 0-4.394-.592-6.243-1.713l.008-10.606c0-1.414.617-2.951 1.651-4.112a6.068 6.068 0 0 1 4.588-2.058c1.72 0 3.327.649 4.524 1.828a6.122 6.122 0 0 1 1.843 4.391c0 3.544-2.803 6.32-6.382 6.32-.69 0-1.944-.303-1.996-.316-.723-.214-1.03.783-1.131 1.112-.389 1.264.196 1.515.317 1.552 1.152.355 1.907.423 2.897.423 5.052 0 9.162-4.088 9.162-9.113 0-4.984-4.108-9.04-9.157-9.04-2.473 0-4.795.94-6.54 2.646-1.662 1.625-2.615 3.791-2.615 5.943l-.001.053c-.008.268-.013 6.626-.015 8.713l-.009-.01c-.95-1.045-1.888-2.645-2.51-4.28-.244-.641-.795-.527-1.547-.297-.328.101-1.328.407-1.107 1.125l.003.009z"/></symbol><symbol id="Airbnb" viewBox="0 0 44 48"><title>Airbnb-black</title><path d="M43.2 33.5l-.2-.6c-.2-.4-.3-.8-.5-1.1-.2-.4-.3-.8-.5-1.1l-.6-1.2-.1-.1C38 22.2 34.6 15.3 31.2 8.7l-.1-.3c-.4-.7-.8-1.4-1.1-2.2l-.2-.2c-.4-.8-.9-1.6-1.6-2.4-1.5-1.9-3.8-3-6.2-3-2.4 0-4.6 1-6.2 2.9-.7.9-1.2 1.8-1.7 2.6L13 8.3l-.1.3C9 16.1 5.6 22.9 2.7 29.3l-.1.1c-.2.4-.4.8-.5 1.2l-.5 1.1c-.2.5-.5 1.1-.7 1.7-.6 1.8-.8 3.5-.6 5.2.5 3.6 2.9 6.6 6.3 8 1.2.5 2.5.8 3.9.8l1.3-.1c1.6-.2 3.3-.7 4.8-1.6 1.8-1 3.5-2.4 5.5-4.5 1.9 2 3.7 3.4 5.5 4.5 1.5.9 3.1 1.4 4.8 1.6.3 0 .8.1 1.3.1 1.4 0 2.8-.3 3.9-.8 3.3-1.3 5.7-4.4 6.3-8 .1-1.5-.1-3.2-.7-5.1zm-25.5-8.7c.1-.6.3-1.2.6-1.7.8-1.2 2.1-1.8 3.6-1.8 1.6 0 2.9.7 3.6 1.8.4.5.6 1.1.7 1.7.1.8.1 1.7-.1 2.6-.5 2.2-1.9 4.9-4.2 7.9-2.2-2.9-3.7-5.6-4.2-7.9-.1-1-.1-1.8 0-2.6zM30 28.4c.3-1.4.4-2.7.2-4.1-.2-1.2-.6-2.4-1.3-3.3-1.5-2.2-4-3.5-6.9-3.5-2.8 0-5.3 1.3-6.9 3.5-.7 1-1.1 2.1-1.3 3.3-.2 1.3-.1 2.7.2 4.1.7 3 2.5 6.4 5.4 10.1-1.7 1.9-3.3 3.2-4.8 4.1-1.1.6-2.2 1-3.3 1.1-1.1.1-2.2 0-3.3-.4-2.1-.9-3.6-2.8-3.9-5-.1-1.3 0-2.3.5-3.5.1-.3.2-.6.4-.9l.2-.5c.3-.7.7-1.5 1-2.3V31c3.4-7.2 6.8-14.2 10.1-20.6l.1-.3c.2-.3.4-.7.6-1.1l.6-1.1c.4-.8.8-1.4 1.2-1.9.9-1 2-1.5 3.3-1.5s2.4.5 3.3 1.5c.4.5.8 1.1 1.2 1.9.2.3.4.7.5 1.1.2.4.4.7.5 1l.1.3c3.5 6.8 6.8 13.7 10 20.5l.1.2.5 1.1c.2.4.4.8.5 1.1l.2.5c.2.3.3.6.4.9.4 1.2.5 2.3.3 3.3-.3 2.2-1.8 4.1-3.9 5-1 .4-2.1.6-3.2.4-1.1-.1-2.2-.5-3.3-1.1-1.5-.8-3-2.1-4.8-4.1 3-3.3 4.8-6.7 5.5-9.7z"/></symbol><symbol id="Amazon" viewBox="0 0 48 48"><title>Amazon-black</title><path d="M25.403 25.96c-.742 1.482-2.015 2.437-3.392 2.759-.209 0-.528.104-.847.104-2.328 0-3.706-1.801-3.706-4.45 0-3.394 2.012-4.981 4.552-5.726 1.377-.316 2.969-.424 4.558-.424v1.273c0 2.437.104 4.343-1.166 6.463zm1.166-12.607c-1.377.104-2.969.209-4.558.418-2.436.322-4.871.745-6.881 1.7-3.92 1.59-6.57 4.981-6.57 9.959 0 6.257 4.024 9.433 9.113 9.433 1.693 0 3.071-.215 4.338-.528 2.018-.638 3.708-1.804 5.721-3.925 1.166 1.59 1.487 2.335 3.497 4.029.531.209 1.061.209 1.482-.104 1.273-1.062 3.5-2.97 4.662-4.029.531-.424.426-1.062.104-1.587-1.163-1.485-2.331-2.759-2.331-5.619v-9.538c0-4.026.322-7.736-2.644-10.489C30.066.851 26.251.001 23.285.001h-1.273C16.613.314 10.895 2.647 9.62 9.324c-.212.85.426 1.166.849 1.271l5.932.743c.635-.107.954-.638 1.058-1.163.528-2.332 2.436-3.498 4.552-3.713h.426c1.273 0 2.65.531 3.389 1.592.847 1.271.742 2.968.742 4.453v.847zM47.994 35.946v-.003c-.023-.5-.127-.881-.336-1.197l-.023-.031-.025-.031c-.212-.232-.415-.319-.635-.415-.658-.254-1.614-.39-2.766-.392-.827 0-1.738.079-2.656.28l-.003-.062-.923.308-.017.008-.522.169v.023a8.17 8.17 0 0 0-1.685.946c-.322.24-.587.559-.601 1.048a.98.98 0 0 0 .35.751c.223.181.483.243.711.243l.15-.011.045-.003.034-.006c.452-.096 1.109-.161 1.88-.268.66-.073 1.36-.127 1.967-.127.429-.003.816.028 1.081.085l.285.09.042.02.025.265c.006.508-.209 1.451-.505 2.372-.288.92-.638 1.844-.869 2.456a1.253 1.253 0 0 0-.093.466c-.006.246.096.545.31.743.209.198.48.277.706.277h.011c.339-.003.627-.138.875-.333 2.342-2.106 3.158-5.472 3.192-7.367l-.006-.302zm-6.945 2.92a1.648 1.648 0 0 0-.714.161l-.768.325-.364.152-.474.189v.006c-5.151 2.089-10.561 3.315-15.567 3.422l-.548.006c-7.874.006-14.297-3.648-20.777-7.248a1.478 1.478 0 0 0-.686-.181c-.291 0-.59.11-.807.313a1.11 1.11 0 0 0-.344.805c-.003.392.209.754.505.988C6.587 43.087 13.253 47.994 22.219 48l.531-.008c5.704-.127 12.152-2.056 17.159-5.201l.031-.02a17.47 17.47 0 0 0 1.928-1.333c.384-.285.649-.731.649-1.194-.017-.822-.714-1.378-1.468-1.378z"/></symbol><symbol id="Facebook" viewBox="0 0 48 48"><title>Facebook-black</title><path d="M25.638 48H2.649A2.648 2.648 0 0 1 0 45.351V2.65A2.649 2.649 0 0 1 2.649.001h42.702A2.649 2.649 0 0 1 48 2.65v42.701A2.649 2.649 0 0 1 45.351 48H33.119V29.412h6.239l.934-7.244h-7.173v-4.625c0-2.097.582-3.527 3.59-3.527l3.836-.002V7.535c-.663-.088-2.941-.286-5.59-.286-5.531 0-9.317 3.376-9.317 9.576v5.342h-6.255v7.244h6.255v18.588z"/></symbol></svg>
+  <!-- endinject -->
+</div>
diff --git a/site/layouts/partials/table.html b/site/layouts/partials/table.html
new file mode 100644
index 0000000..66da24c
--- /dev/null
+++ b/site/layouts/partials/table.html
@@ -0,0 +1,25 @@
+<div class="bg-off-white pv4 ph3">
+
+	<div class="mw7 center">
+
+		<h2 class="f2 b lh-title mb3">{{.heading}}</h1>
+		<p class="mw6">{{.text}}</p>
+
+		<div class="flex-l mhn2-l mw7">
+
+			<div class="w-33-l ph2">{{ partial "pricing-card" (dict "plan" "Small" "price" "50" "description" "Perfect for the drinker who likes to enjoy 1-2 cups per day." "item1" "3 lbs of coffee per month" "item2" "Green or roasted beans" "item3" "One or two varieties of beans") }}
+			</div>
+
+			<div class="w-33-l ph2">
+				{{ partial "pricing-card" (dict "plan" "Big" "price" "80" "description" "Great for avid drinkers, java-loving couples and bigger crowds" "item1" "6 lbs of coffee per month" "item2" "Green or roasted beans" "item3" "Up to 4 different varieties of beans") }}
+			</div>
+
+			<div class="w-33-l ph2">
+				{{ partial "pricing-card" (dict "plan" "Small" "price" "80" "description" "Want a few tiny batches from different varieties? Try our custom plan" "item1" "However little or much you need" "item2" "Green or roasted beans" "item3" "Unlimited varieties") }}
+			</div>
+
+		</div>
+
+	</div>
+
+</div>
diff --git a/site/layouts/post/li.html b/site/layouts/post/li.html
new file mode 100644
index 0000000..de2d1da
--- /dev/null
+++ b/site/layouts/post/li.html
@@ -0,0 +1,6 @@
+<a href="{{ .Permalink }}" class="no-underline pa3 bg-grey-1 br1 mb2 db raise">
+		<h3 class="f3 b lh-title mb1 primary">{{ .Title }}</h3>
+		<p class="mid-gray lh-title mb2">{{ .Date.Format "Mon, Jan 2, 2006" }}</p>
+		<p class="mb0">{{ .Summary }}</p>
+		<p class="link b dib black mb0">Read more →</p>
+</a>
diff --git a/site/layouts/post/list.html b/site/layouts/post/list.html
new file mode 100644
index 0000000..5d13c7e
--- /dev/null
+++ b/site/layouts/post/list.html
@@ -0,0 +1,14 @@
+{{ partial "header" . }}
+{{ partial "nav" . }}
+
+{{ partial "jumbotron" (dict "imageUrl" "img/2.jpg" "title" "post title goes here") }}
+
+<ul class="flex-l">
+    {{ range .Data.Pages }}
+        <div>
+          {{ .Render "li"}}
+        </div>
+    {{ end }}
+</ul>
+
+{{ partial "footer" . }}
diff --git a/site/layouts/post/single.html b/site/layouts/post/single.html
new file mode 100644
index 0000000..e7198b3
--- /dev/null
+++ b/site/layouts/post/single.html
@@ -0,0 +1,13 @@
+{{ partial "header" . }}
+{{ partial "nav" . }}
+  <div class="mw6 center ph3 pv4">
+    <h1 class="f2 lh-title b mb3">{{.Title}}</h1>
+    <div class="flex justify-between grey-3">
+      <p>{{ .Date.Format "Mon, Jan 2, 2006" }}</p>
+      <p>Read in {{ .ReadingTime }} minutes</p>
+    </div>
+    <div class="cms mw6">
+      {{ .Content }}
+    </div>
+  </div>
+{{ partial "footer" . }}
diff --git a/site/layouts/products/single.html b/site/layouts/products/single.html
new file mode 100644
index 0000000..0124e39
--- /dev/null
+++ b/site/layouts/products/single.html
@@ -0,0 +1,29 @@
+{{ partial "header" . }}
+{{ partial "nav" . }}
+
+{{ partial "jumbotron" (dict "imageUrl" "/img/products/jumbotron.jpg" "title" "Products") }}
+
+{{ partial "4-up" (dict "heading" "What we offer" "description" "Kaldi is the ultimate spot for coffee lovers who want to learn about their java’s origin and support the farmers that grew it. We take coffee production, roasting and brewing seriously and we’re glad to pass that knowledge to anyone." "svg1" "/img/illustrations/coffee.svg" "text1" "We sell green and roasted coffee beans that are sourced directly from independent farmers and farm cooperatives. We’re proud to offer a variety of coffee beans grown with great care for the environment and local communities. Check our post or contact us directly for current availability." "svg2" "/img/illustrations/coffee-gear.svg" "text2" "We offer a small, but carefully curated selection of brewing gear and tools for every taste and experience level. No matter if you roast your own beans or just bought your first french press, you’ll find a gadget to fall in love with in our shop." "svg3" "/img/illustrations/tutorials.svg" "text3" "Love a great cup of coffee, but never knew how to make one? Bought a fancy new Chemex but have no clue how to use it? Don't worry, we’re here to help. You can schedule a custom 1-on-1 consultation with our baristas to learn anything you want to know about coffee roasting and brewing. Email us or call the store for details." "svg4" "/img/illustrations/meeting-space.svg" "text4" "We believe that good coffee has the power to bring people together. That’s why we decided to turn a corner of our shop into a cozy meeting space where you can hang out with fellow coffee lovers and learn about coffee making techniques. All of the artwork on display there is for sale. The full price you pay goes to the artist."  ) }}
+
+<div class="mw7 center">
+  <div class="mw6 ph3 mb3">
+    <h3 class="f3 b lh-title mb2">Great coffee with no compromises</h3>
+    <p>We hold our coffee to the highest standards from the shrub to the cup. That’s why we’re meticulous and transparent about each step of the coffee’s journey. We personally visit each farm to make sure the conditions are optimal for the plants, farmers and the local environment.</p>
+  </div>
+</div>
+
+<!-- Image grid -->
+{{ partial "image-grid" . }}
+
+{{ partial "blockquote" (dict "quote" "A testimonial from someone who can’t live without this." "author" "A satisfied customer") }}
+
+{{ partial "blockquote" (dict "quote" "“The first time I tried Kaldi’s coffee, I couldn’t even believe that was the same thing I’ve been drinking every morning.”" "author" "Elisabeth Kaurismäki") }}
+
+{{ partial "blockquote" (dict "quote" "“Kaldi is the place to go if you want the best quality coffee. I love their stance on empowering farmers and transparency.”" "author" "Philipp Trommler") }}
+
+<!-- Full-width image -->
+<img src="/img/products/products-full-width.jpg" alt="" class="db">
+
+{{ partial "table" (dict "heading" "Monthly subscriptions" "text" "We make it easy to make great coffee a part of your life. Choose one of our monthly subscription plans to receive great coffee at your doorstep each month. Contact us about more details and payment info.") }}
+
+{{ partial "footer" . }}
diff --git a/site/static/admin/config.yml b/site/static/admin/config.yml
new file mode 100644
index 0000000..657ec6d
--- /dev/null
+++ b/site/static/admin/config.yml
@@ -0,0 +1,26 @@
+backend:
+  name: github
+  repo: owner/repo # Path to your Github repository
+  branch: master # Branch to update (master by default)
+
+media_folder: "img/uploads" # Folder where user uploaded files should go
+
+collections: # A list of collections the CMS should be able to edit
+  - name: "post" # Used in routes, ie.: /admin/collections/:slug/edit
+    label: "Post" # Used in the UI, ie.: "New Post"
+    folder: "post" # The path to the folder where the documents are stored
+    create: true # Allow users to create new documents in this collection
+    fields: # The fields each document in this collection have
+      - {label: "Title", name: "title", widget: "string", tagname: "h1"}
+      - {label: "Body", name: "body", widget: "markdown"}
+      - {label: "Publish Date", name: "date", widget: "datetime"}
+  # - name: "settings"
+  #   label: "Settings"
+  #   files:
+  #     - name: "general"
+  #       label: "General settings"
+  #       file: "_settings/general.json"
+  #       fields:
+  #         - {label: "Main site title", name: "site_title", widget: "string"}
+  #         - {label: "Number of fronpage posts", name: "post_count", widget: "number"}
+  #         - {label: "Site cover image", name: "cover", widget: "image"}
diff --git a/site/static/admin/index.html b/site/static/admin/index.html
new file mode 100644
index 0000000..69d8a76
--- /dev/null
+++ b/site/static/admin/index.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<html>
+
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+		<title>Content Manager</title>
+		<!-- Include the stylesheets from your site here -->
+		<link rel="stylesheet" href="https://unpkg.com/netlify-cms@^0.1/dist/cms.css" />
+		<!-- Include a CMS specific stylesheet here -->
+
+	</head>
+
+	<body>
+		<script src="https://unpkg.com/netlify-cms@^0.1/dist/cms.js"></script>
+	</body>
+
+</html>
diff --git a/site/static/img/about/direct-sourcing.jpg b/site/static/img/about/direct-sourcing.jpg
new file mode 100755
index 0000000..0a52cc5
--- /dev/null
+++ b/site/static/img/about/direct-sourcing.jpg
diff --git a/site/static/img/about/jumbotron.jpg b/site/static/img/about/jumbotron.jpg
new file mode 100644
index 0000000..6ecc2b2
--- /dev/null
+++ b/site/static/img/about/jumbotron.jpg
diff --git a/site/static/img/about/reinvest-profits.jpg b/site/static/img/about/reinvest-profits.jpg
new file mode 100755
index 0000000..73bd5d0
--- /dev/null
+++ b/site/static/img/about/reinvest-profits.jpg
diff --git a/site/static/img/about/shade-grown.jpg b/site/static/img/about/shade-grown.jpg
new file mode 100755
index 0000000..2f4b502
--- /dev/null
+++ b/site/static/img/about/shade-grown.jpg
diff --git a/site/static/img/about/single-origin.jpg b/site/static/img/about/single-origin.jpg
new file mode 100755
index 0000000..78becb3
--- /dev/null
+++ b/site/static/img/about/single-origin.jpg
diff --git a/site/static/img/about/sustainable-farming.jpg b/site/static/img/about/sustainable-farming.jpg
new file mode 100755
index 0000000..54eac24
--- /dev/null
+++ b/site/static/img/about/sustainable-farming.jpg
diff --git a/site/static/img/blog posts/chemex.jpg b/site/static/img/blog posts/chemex.jpg
new file mode 100755
index 0000000..903f68a
--- /dev/null
+++ b/site/static/img/blog posts/chemex.jpg
diff --git a/site/static/img/blog posts/flavor wheel.jpg b/site/static/img/blog posts/flavor wheel.jpg
new file mode 100755
index 0000000..dc2a87d
--- /dev/null
+++ b/site/static/img/blog posts/flavor wheel.jpg
diff --git a/site/static/img/blog-index.jpg b/site/static/img/blog-index.jpg
new file mode 100755
index 0000000..b9c1c8c
--- /dev/null
+++ b/site/static/img/blog-index.jpg
diff --git a/site/static/img/home/about-section.jpg b/site/static/img/home/about-section.jpg
new file mode 100755
index 0000000..2571ab6
--- /dev/null
+++ b/site/static/img/home/about-section.jpg
diff --git a/site/static/img/home/jumbotron.jpg b/site/static/img/home/jumbotron.jpg
new file mode 100644
index 0000000..f02e6d8
--- /dev/null
+++ b/site/static/img/home/jumbotron.jpg
diff --git a/site/static/img/icon.svg b/site/static/img/icon.svg
new file mode 100644
index 0000000..1f8f439
--- /dev/null
+++ b/site/static/img/icon.svg
@@ -0,0 +1,42 @@
+<svg width="190" height="190" viewBox="0 0 190 190" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:figma="http://www.figma.com/figma/ns">
+<title>icon</title>
+<desc>Created using Figma</desc>
+<g id="Canvas" transform="translate(-61 -613)" figma:type="canvas">
+<g id="icon" style="mix-blend-mode:normal;" figma:type="frame">
+<g id="Ellipse 2" style="mix-blend-mode:normal;" figma:type="ellipse">
+<mask id="mask0_outline_ins">
+<use xlink:href="#path0_fill" fill="white" transform="translate(61 613)"/>
+</mask>
+<g mask="url(#mask0_outline_ins)">
+<use xlink:href="#path1_stroke_2x" transform="translate(61 613)" fill="#9EA1A6" style="mix-blend-mode:normal;"/>
+</g>
+</g>
+<g id="img" style="mix-blend-mode:normal;" figma:type="frame">
+<g id="nature" style="mix-blend-mode:normal;" opacity="0.5" figma:type="frame">
+<g id="img" style="mix-blend-mode:normal;" figma:type="rounded-rectangle">
+<mask id="mask1_outline_ins">
+<use xlink:href="#path2_fill" fill="white" transform="translate(111 663)"/>
+</mask>
+<g mask="url(#mask1_outline_ins)">
+<use xlink:href="#path3_stroke_2x" transform="translate(111 663)" fill="#C6C8CC" style="mix-blend-mode:normal;"/>
+</g>
+</g>
+<g id="mountain" style="mix-blend-mode:normal;" figma:type="vector">
+<use xlink:href="#path4_stroke" transform="translate(112 709.5)" fill="#C6C8CC" style="mix-blend-mode:normal;"/>
+</g>
+<g id="sun" style="mix-blend-mode:normal;" figma:type="ellipse">
+<use xlink:href="#path5_stroke" transform="translate(129 690)" fill="#C6C8CC" style="mix-blend-mode:normal;"/>
+</g>
+</g>
+</g>
+</g>
+</g>
+<defs>
+<path id="path0_fill" d="M 190 95C 190 147.467 147.467 190 95 190C 42.5329 190 0 147.467 0 95C 0 42.5329 42.5329 0 95 0C 147.467 0 190 42.5329 190 95Z"/>
+<path id="path1_stroke_2x" d="M 188 95C 188 146.362 146.362 188 95 188L 95 192C 148.572 192 192 148.572 192 95L 188 95ZM 95 188C 43.6375 188 2 146.362 2 95L -2 95C -2 148.572 41.4284 192 95 192L 95 188ZM 2 95C 2 43.6375 43.6375 2 95 2L 95 -2C 41.4284 -2 -2 41.4284 -2 95L 2 95ZM 95 2C 146.362 2 188 43.6375 188 95L 192 95C 192 41.4284 148.572 -2 95 -2L 95 2Z"/>
+<path id="path2_fill" d="M 0 3C 0 1.34315 1.34315 0 3 0L 87 0C 88.6569 0 90 1.34315 90 3L 90 87C 90 88.6569 88.6569 90 87 90L 3 90C 1.34315 90 0 88.6569 0 87L 0 3Z"/>
+<path id="path3_stroke_2x" d="M 3 2L 87 2L 87 -2L 3 -2L 3 2ZM 88 3L 88 87L 92 87L 92 3L 88 3ZM 87 88L 3 88L 3 92L 87 92L 87 88ZM 2 87L 2 3L -2 3L -2 87L 2 87ZM 3 -2C 0.238576 -2 -2 0.238576 -2 3L 2 3C 2 2.44772 2.44772 2 3 2L 3 -2ZM 87 2C 87.5523 2 88 2.44772 88 3L 92 3C 92 0.238576 89.7614 -2 87 -2L 87 2ZM 88 87C 88 87.5523 87.5523 88 87 88L 87 92C 89.7614 92 92 89.7614 92 87L 88 87ZM 3 88C 2.44772 88 2 87.5523 2 87L -2 87C -2 89.7614 0.238576 92 3 92L 3 88Z"/>
+<path id="path4_stroke" d="M -0.460815 18.6125C -0.950966 18.867 -1.142 19.4707 -0.887496 19.9608C -0.632995 20.451 -0.0293353 20.642 0.460815 20.3875L -0.460815 18.6125ZM 26 6L 26.515 5.14281C 26.2171 4.96383 25.8476 4.95235 25.5392 5.1125L 26 6ZM 42.8108 16.1L 42.2958 16.9572C 42.627 17.1562 43.0432 17.1466 43.3649 16.9325L 42.8108 16.1ZM 67 0L 67.6842 -0.729321C 67.3455 -1.04707 66.8325 -1.0898 66.4459 -0.832465L 67 0ZM 87.3158 20.4293C 87.7186 20.8072 88.3515 20.787 88.7293 20.3842C 89.1072 19.9814 89.087 19.3485 88.6842 18.9707L 87.3158 20.4293ZM 0.460815 20.3875L 26.4608 6.8875L 25.5392 5.1125L -0.460815 18.6125L 0.460815 20.3875ZM 25.485 6.85719L 42.2958 16.9572L 43.3258 15.2428L 26.515 5.14281L 25.485 6.85719ZM 43.3649 16.9325L 67.5541 0.832465L 66.4459 -0.832465L 42.2567 15.2675L 43.3649 16.9325ZM 66.3158 0.729321L 87.3158 20.4293L 88.6842 18.9707L 67.6842 -0.729321L 66.3158 0.729321Z"/>
+<path id="path5_stroke" d="M 14 7.5C 14 11.0899 11.0899 14 7.5 14L 7.5 16C 12.1944 16 16 12.1944 16 7.5L 14 7.5ZM 7.5 14C 3.91015 14 1 11.0899 1 7.5L -1 7.5C -1 12.1944 2.80558 16 7.5 16L 7.5 14ZM 1 7.5C 1 3.91015 3.91015 1 7.5 1L 7.5 -1C 2.80558 -1 -1 2.80558 -1 7.5L 1 7.5ZM 7.5 1C 11.0899 1 14 3.91015 14 7.5L 16 7.5C 16 2.80558 12.1944 -1 7.5 -1L 7.5 1Z"/>
+</defs>
+</svg>
diff --git a/site/static/img/icons/500px.svg b/site/static/img/icons/500px.svg
new file mode 100644
index 0000000..7460839
--- /dev/null
+++ b/site/static/img/icons/500px.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 36 46" xmlns="http://www.w3.org/2000/svg"><title>500px-black</title><path d="M35.374 38.234c-.326-.324-.604-.515-.848-.584-.247-.071-.468-.018-.639.152l-.161.159c-1.682 1.672-3.64 2.984-5.82 3.901-2.256.949-4.654 1.43-7.126 1.43-2.472 0-4.87-.481-7.126-1.43-2.18-.917-4.138-2.229-5.82-3.901-1.752-1.742-3.072-3.688-3.924-5.785-.83-2.045-1.102-3.583-1.191-4.088l-.02-.112c-.114-.595-.665-.637-1.457-.516-.329.05-1.331.202-1.236.919l.002.016c.265 1.659.734 3.286 1.393 4.835 1.059 2.49 2.576 4.726 4.507 6.645 1.931 1.92 4.18 3.427 6.685 4.48 2.593 1.091 5.348 1.644 8.187 1.644 2.838 0 5.592-.553 8.187-1.645 2.504-1.053 4.753-2.56 6.685-4.481l.168-.171c.213-.23.398-.633-.446-1.469zm-14.62-33.306c-2.713 0-5.599.544-7.719 1.456-.227.088-.362.269-.392.523-.028.24.037.556.199.968.132.334.481 1.221 1.157.965 2.17-.823 4.569-1.276 6.755-1.276 2.477 0 4.879.482 7.14 1.433 1.796.756 3.491 1.847 5.334 3.434.134.116.277.175.424.175.359 0 .704-.351.999-.68.492-.549.83-1.005.345-1.461-1.76-1.657-3.688-2.895-6.069-3.896-2.589-1.089-5.339-1.641-8.173-1.641zm-3.699 22.804c.003.305.284.572.451.732l.053.051c.287.281.561.424.814.424.209 0 .338-.098.384-.14.127-.117 1.559-1.56 1.696-1.697l1.597 1.583c.148.166.309.249.496.254.255 0 .533-.151.826-.448.689-.7.344-1.077.178-1.259l-1.618-1.609 1.688-1.69c.37-.398.043-.821-.283-1.145-.473-.471-.93-.592-1.223-.324l-1.678 1.671-1.697-1.688c-.09-.086-.203-.131-.328-.131-.226 0-.494.152-.795.452-.522.519-.634.877-.362 1.164l1.698 1.682-1.688 1.681c-.139.138-.208.286-.207.44zm-10.762 2.492c.01.028.25.687.389 1.013.762 1.792 1.854 3.402 3.245 4.785 1.39 1.382 3.01 2.467 4.814 3.226 1.868.785 3.852 1.184 5.896 1.184s4.028-.398 5.896-1.184c1.804-.758 3.423-1.844 4.814-3.226s2.482-2.992 3.245-4.786c.79-1.857 1.191-3.829 1.191-5.861 0-2.032-.401-4.004-1.191-5.861-.763-1.793-1.855-3.403-3.245-4.786-1.39-1.382-3.01-2.468-4.814-3.226-1.868-.785-3.852-1.184-5.896-1.184-2.069 0-4.135.409-5.977 1.184-1.472.619-3.964 2.213-5.423 3.709l-.009.009v-12.392h20.939c.762-.008.762-1.066.762-1.414 0-.347 0-1.405-.764-1.414h-22.641c-.616 0-.998.51-.998.982v17.442c0 .563.705.969 1.36 1.108 1.279.272 1.575-.135 1.888-.565l.042-.057c.478-.706 1.973-2.202 1.988-2.217 2.333-2.319 5.452-3.596 8.783-3.596 3.315 0 6.425 1.277 8.758 3.596 2.341 2.327 3.63 5.411 3.63 8.682 0 3.284-1.282 6.367-3.611 8.682-2.299 2.286-5.511 3.596-8.812 3.596-2.236 0-4.394-.592-6.243-1.713l.008-10.606c0-1.414.617-2.951 1.651-4.112 1.182-1.327 2.811-2.058 4.588-2.058 1.72 0 3.327.649 4.524 1.828 1.188 1.17 1.843 2.73 1.843 4.391 0 3.544-2.803 6.32-6.382 6.32-.69 0-1.944-.303-1.996-.316-.723-.214-1.03.783-1.131 1.112-.389 1.264.196 1.515.317 1.552 1.152.355 1.907.423 2.897.423 5.052 0 9.162-4.088 9.162-9.113 0-4.984-4.108-9.04-9.157-9.04-2.473 0-4.795.94-6.54 2.646-1.662 1.625-2.615 3.791-2.615 5.943l-.001.053c-.008.268-.013 6.626-.015 8.713l-.009-.01c-.95-1.045-1.888-2.645-2.51-4.28-.244-.641-.795-.527-1.547-.297-.328.101-1.328.407-1.107 1.125l.003.009z"/></svg>
diff --git a/site/static/img/icons/Airbnb.svg b/site/static/img/icons/Airbnb.svg
new file mode 100644
index 0000000..d8c0234
--- /dev/null
+++ b/site/static/img/icons/Airbnb.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 48" enable-background="new 0 0 44 48"><title>Airbnb-black</title><desc>Created with Sketch.</desc><path d="M43.2 33.5l-.2-.6c-.2-.4-.3-.8-.5-1.1-.2-.4-.3-.8-.5-1.1l-.6-1.2-.1-.1c-3.3-7.2-6.7-14.1-10.1-20.7l-.1-.3c-.4-.7-.8-1.4-1.1-2.2l-.2-.2c-.4-.8-.9-1.6-1.6-2.4-1.5-1.9-3.8-3-6.2-3-2.4 0-4.6 1-6.2 2.9-.7.9-1.2 1.8-1.7 2.6l-1.1 2.2-.1.3c-3.9 7.5-7.3 14.3-10.2 20.7l-.1.1c-.2.4-.4.8-.5 1.2l-.5 1.1c-.2.5-.5 1.1-.7 1.7-.6 1.8-.8 3.5-.6 5.2.5 3.6 2.9 6.6 6.3 8 1.2.5 2.5.8 3.9.8l1.3-.1c1.6-.2 3.3-.7 4.8-1.6 1.8-1 3.5-2.4 5.5-4.5 1.9 2 3.7 3.4 5.5 4.5 1.5.9 3.1 1.4 4.8 1.6.3 0 .8.1 1.3.1 1.4 0 2.8-.3 3.9-.8 3.3-1.3 5.7-4.4 6.3-8 .1-1.5-.1-3.2-.7-5.1zm-25.5-8.7c.1-.6.3-1.2.6-1.7.8-1.2 2.1-1.8 3.6-1.8 1.6 0 2.9.7 3.6 1.8.4.5.6 1.1.7 1.7.1.8.1 1.7-.1 2.6-.5 2.2-1.9 4.9-4.2 7.9-2.2-2.9-3.7-5.6-4.2-7.9-.1-1-.1-1.8 0-2.6zm12.3 3.6c.3-1.4.4-2.7.2-4.1-.2-1.2-.6-2.4-1.3-3.3-1.5-2.2-4-3.5-6.9-3.5-2.8 0-5.3 1.3-6.9 3.5-.7 1-1.1 2.1-1.3 3.3-.2 1.3-.1 2.7.2 4.1.7 3 2.5 6.4 5.4 10.1-1.7 1.9-3.3 3.2-4.8 4.1-1.1.6-2.2 1-3.3 1.1-1.1.1-2.2 0-3.3-.4-2.1-.9-3.6-2.8-3.9-5-.1-1.3 0-2.3.5-3.5.1-.3.2-.6.4-.9l.2-.5c.3-.7.7-1.5 1-2.3v-.1c3.4-7.2 6.8-14.2 10.1-20.6l.1-.3c.2-.3.4-.7.6-1.1l.6-1.1c.4-.8.8-1.4 1.2-1.9.9-1 2-1.5 3.3-1.5s2.4.5 3.3 1.5c.4.5.8 1.1 1.2 1.9.2.3.4.7.5 1.1.2.4.4.7.5 1l.1.3c3.5 6.8 6.8 13.7 10 20.5l.1.2.5 1.1c.2.4.4.8.5 1.1l.2.5c.2.3.3.6.4.9.4 1.2.5 2.3.3 3.3-.3 2.2-1.8 4.1-3.9 5-1 .4-2.1.6-3.2.4-1.1-.1-2.2-.5-3.3-1.1-1.5-.8-3-2.1-4.8-4.1 3-3.3 4.8-6.7 5.5-9.7z"/></svg>
\ No newline at end of file
diff --git a/site/static/img/icons/Amazon.svg b/site/static/img/icons/Amazon.svg
new file mode 100644
index 0000000..70cfe69
--- /dev/null
+++ b/site/static/img/icons/Amazon.svg
@@ -0,0 +1 @@
+<svg width="48" height="48" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><title>Amazon-black</title><desc>Created with Sketch.</desc><g ><path d="M25.403 25.96c-.742 1.482-2.015 2.437-3.392 2.759-.209 0-.528.104-.847.104-2.328 0-3.706-1.801-3.706-4.45 0-3.394 2.012-4.981 4.552-5.726 1.377-.316 2.969-.424 4.558-.424v1.273c0 2.437.104 4.343-1.166 6.463zm1.166-12.607c-1.377.104-2.969.209-4.558.418-2.436.322-4.871.745-6.881 1.7-3.92 1.59-6.57 4.981-6.57 9.959 0 6.257 4.024 9.433 9.113 9.433 1.693 0 3.071-.215 4.338-.528 2.018-.638 3.708-1.804 5.721-3.925 1.166 1.59 1.487 2.335 3.497 4.029.531.209 1.061.209 1.482-.104 1.273-1.062 3.5-2.97 4.662-4.029.531-.424.426-1.062.104-1.587-1.163-1.485-2.331-2.759-2.331-5.619v-9.538c0-4.026.322-7.736-2.644-10.489-2.436-2.222-6.251-3.072-9.217-3.072h-1.273c-5.399.313-11.117 2.646-12.392 9.323-.212.85.426 1.166.849 1.271l5.932.743c.635-.107.954-.638 1.058-1.163.528-2.332 2.436-3.498 4.552-3.713h.426c1.273 0 2.65.531 3.389 1.592.847 1.271.742 2.968.742 4.453v.847z"/><path d="M47.994 35.946v-.003c-.023-.5-.127-.881-.336-1.197l-.023-.031-.025-.031c-.212-.232-.415-.319-.635-.415-.658-.254-1.614-.39-2.766-.392-.827 0-1.738.079-2.656.28l-.003-.062-.923.308-.017.008-.522.169v.023c-.612.254-1.168.57-1.685.946-.322.24-.587.559-.601 1.048-.008.265.127.57.35.751.223.181.483.243.711.243l.15-.011.045-.003.034-.006c.452-.096 1.109-.161 1.88-.268.66-.073 1.36-.127 1.967-.127.429-.003.816.028 1.081.085l.285.09.042.02.025.265c.006.508-.209 1.451-.505 2.372-.288.92-.638 1.844-.869 2.456-.056.141-.093.296-.093.466-.006.246.096.545.31.743.209.198.48.277.706.277h.011c.339-.003.627-.138.875-.333 2.342-2.106 3.158-5.472 3.192-7.367l-.006-.302zm-6.945 2.92c-.24-.003-.485.054-.714.161l-.768.325-.364.152-.474.189v.006c-5.151 2.089-10.561 3.315-15.567 3.422l-.548.006c-7.874.006-14.297-3.648-20.777-7.248-.226-.119-.46-.181-.686-.181-.291 0-.59.11-.807.313-.217.206-.347.503-.344.805-.003.392.209.754.505.988 6.082 5.283 12.748 10.19 21.714 10.196l.531-.008c5.704-.127 12.152-2.056 17.159-5.201l.031-.02c.655-.392 1.31-.839 1.928-1.333.384-.285.649-.731.649-1.194-.017-.822-.714-1.378-1.468-1.378z"/></g></svg>
\ No newline at end of file
diff --git a/site/static/img/icons/Facebook.svg b/site/static/img/icons/Facebook.svg
new file mode 100644
index 0000000..f488b2a
--- /dev/null
+++ b/site/static/img/icons/Facebook.svg
@@ -0,0 +1 @@
+<svg width="48" height="48" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><title>Facebook-black</title><desc>Created with Sketch.</desc><path d="M25.638 48h-22.989c-1.464 0-2.649-1.186-2.649-2.649v-42.701c0-1.463 1.186-2.649 2.649-2.649h42.702c1.463 0 2.649 1.186 2.649 2.649v42.701c0 1.463-1.186 2.649-2.649 2.649h-12.232v-18.588h6.239l.934-7.244h-7.173v-4.625c0-2.097.582-3.527 3.59-3.527l3.836-.002v-6.479c-.663-.088-2.941-.286-5.59-.286-5.531 0-9.317 3.376-9.317 9.576v5.342h-6.255v7.244h6.255v18.588z" /></svg>
\ No newline at end of file
diff --git a/site/static/img/illustrations/coffee-gear.svg b/site/static/img/illustrations/coffee-gear.svg
new file mode 100644
index 0000000..93b797e
--- /dev/null
+++ b/site/static/img/illustrations/coffee-gear.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 240 190" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path fill="none" d="M0 0h240v190H0z"/><clipPath id="a"><path d="M0 0h240v190H0z"/></clipPath><g clip-path="url(#a)" fill="#f40"><path d="M92.316 32H105a2 2 0 0 1 1.6 3.2L93.489 52.682m7.545 133.092A3.997 3.997 0 0 1 97.041 190H15.493a3.999 3.999 0 0 1-3.995-4.213L19.684 32h72.632l8.718 153.774z" fill-opacity=".3"/><path d="M18.989 45.055l-.429 8.057-.468.038c-1.09.174-2.154.5-3.154.967a12.12 12.12 0 0 0-3.917 2.927 12.032 12.032 0 0 0-2.023 3.159 12.065 12.065 0 0 0-.691 7.51c.252 1.091.66 2.146 1.207 3.123a12.103 12.103 0 0 0 5.957 5.28l1.835.55-.429 8.073a18.475 18.475 0 0 1-4.207-1.127c-.753-.3-1.488-.64-2.2-1.027a20.122 20.122 0 0 1-7.938-7.843 19.901 19.901 0 0 1-2.019-5.228 20.125 20.125 0 0 1-.222-7.929 19.876 19.876 0 0 1 1.378-4.59 20.027 20.027 0 0 1 3.054-4.898 20.145 20.145 0 0 1 6.392-5.017 19.896 19.896 0 0 1 5.47-1.789l2.404-.236zM54 11.658A6.006 6.006 0 0 1 50 6c0-3.311 2.689-6 6-6s6 2.689 6 6a6.006 6.006 0 0 1-4 5.658v2.04A45.116 45.116 0 0 1 92.316 32H19.684A45.116 45.116 0 0 1 54 13.698v-2.04z"/><path d="M218 132c0-2.208-1.792-4-4-4h-68c-2.208 0-4 1.792-4 4v16c0 2.208 1.792 4 4 4h68c2.208 0 4-1.792 4-4v-16z" fill-opacity=".5"/><path d="M236 110v76c0 2.208-1.792 4-4 4H130c-2.208 0-4-1.792-4-4v-76h110zm-35.389-10a28.027 28.027 0 0 0 8.309-17.88 1.987 1.987 0 0 0-1.982-2.106C198.147 80 163.853 80 155.062 80a2 2 0 0 0-1.997 2.121A28.12 28.12 0 0 0 161.389 100h39.222zM183 76h-4c0-2.375-.014-4.749.001-7.124a10.023 10.023 0 0 1 2.67-6.679 9.997 9.997 0 0 1 7.205-3.196c10.391-.063 20.783.128 31.173-.002.214-.008.424-.044.625-.116a2.018 2.018 0 0 0 1.192-1.163c.091-.235.131-.481.134-.733V53h4v4.012a6.046 6.046 0 0 1-.303 1.872 6.026 6.026 0 0 1-1.561 2.463 6.021 6.021 0 0 1-3.396 1.607 6.499 6.499 0 0 1-.591.044c-10.432.131-20.867-.19-31.298.004a6.145 6.145 0 0 0-1.874.349 6.04 6.04 0 0 0-2.375 1.567 6.024 6.024 0 0 0-1.251 2.059 6.123 6.123 0 0 0-.351 2.029V76z" fill-opacity=".5"/><path d="M180 136c2.208 0 4 1.792 4 4s-1.792 4-4 4-4-1.792-4-4 1.792-4 4-4zm58-36a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H124a2 2 0 0 1-2-2v-6a2 2 0 0 1 2-2h114zm-51-20a6 6 0 1 0-12 0h12zm33-33c0-2.208 1.792-4 4-4s4 1.792 4 4v6c0 2.208-1.792 4-4 4s-4-1.792-4-4v-6zM146 138c2.208 0 4 1.792 4 4v24c0 13.246-10.754 24-24 24h-14c-11.575 0-21.247-8.212-23.503-19.122l-.207.087A14.007 14.007 0 0 1 83 172c-1.81 0-3.614-.35-5.29-1.035a14.092 14.092 0 0 1-7.329-6.898 13.924 13.924 0 0 1-1.245-4.11 14.102 14.102 0 0 1 .115-4.606c.248-1.293.681-2.55 1.282-3.722a14.072 14.072 0 0 1 6.553-6.32 13.92 13.92 0 0 1 5.733-1.308h.362c.653.013 1.304.062 1.95.16.98.15 1.943.406 2.869.76V142c0-2.208 1.792-4 4-4h54zm-58 16.685a6.09 6.09 0 0 0-2.342-2.065 5.908 5.908 0 0 0-2.421-.615c-.106-.004-.211-.005-.316-.004a5.913 5.913 0 0 0-2.449.556 6.061 6.061 0 0 0-3.004 3.114 5.913 5.913 0 0 0-.428 1.632 5.94 5.94 0 0 0 .787 3.737 6.084 6.084 0 0 0 2.778 2.463c.729.319 1.52.486 2.315.496a5.99 5.99 0 0 0 2.343-.44A6.028 6.028 0 0 0 88 161.314v-6.629zm12.682-32.773c.242.014.48.049.714.116.204.059.398.142.586.24 2.356 1.313 4.672 2.695 7.007 4.044a3.016 3.016 0 0 1 .935.844 3.02 3.02 0 0 1 .54 2.145 3.027 3.027 0 0 1-1.448 2.192 2.983 2.983 0 0 1-1.647.414 3.003 3.003 0 0 1-1.3-.355c-2.356-1.313-4.672-2.696-7.008-4.044a2.996 2.996 0 0 1-1.445-3.169 2.993 2.993 0 0 1 .782-1.507c.251-.262.55-.477.877-.633a3.01 3.01 0 0 1 1.226-.289c.091 0 .09 0 .181.002zm36.817-.002a3.01 3.01 0 0 1 1.226.289 3.014 3.014 0 0 1 1.398 1.37 3.002 3.002 0 0 1-1.106 3.892c-2.315 1.384-4.671 2.698-7.006 4.047a3.034 3.034 0 0 1-1.199.387 3.018 3.018 0 0 1-2.128-.605 3.023 3.023 0 0 1-1.173-2.35 3.033 3.033 0 0 1 .464-1.634 3.027 3.027 0 0 1 .958-.948c2.315-1.383 4.67-2.698 7.006-4.046.159-.089.321-.167.493-.228.286-.102.583-.155.886-.172.091-.002.09-.002.181-.002zm-18.353-10.906c.325.021.642.083.946.202a3.02 3.02 0 0 1 1.72 1.748c.113.306.171.624.186.949.044 2.699.002 5.398.002 8.097a3.018 3.018 0 0 1-.931 2.172 3 3 0 0 1-5.067-2.075c-.044-2.699-.002-5.398-.002-8.097.006-.358.063-.71.188-1.046a3.022 3.022 0 0 1 1.811-1.782c.308-.109.627-.161.952-.172.098 0 .098 0 .195.004z"/></g></svg>
\ No newline at end of file
diff --git a/site/static/img/illustrations/coffee.svg b/site/static/img/illustrations/coffee.svg
new file mode 100644
index 0000000..baa46a7
--- /dev/null
+++ b/site/static/img/illustrations/coffee.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 240 190" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path fill="none" d="M0 0h240v190H0z"/><clipPath id="a"><path d="M0 0h240v190H0z"/></clipPath><g clip-path="url(#a)" fill="#f40"><path d="M67.42 0c17.84.002 46.565.797 52.787.975a.996.996 0 0 1 .761.391c.183.238.251.547.186.841l-2.209 9.921s12.475 36.373 12.475 85.399c0 51.875-3.768 84.388-3.768 84.388l6.862 6.328c.305.281.408.723.259 1.112a1 1 0 0 1-.933.645H1a.999.999 0 0 1-.932-.645 1.017 1.017 0 0 1 .258-1.112l6.863-6.328S3.42 149.402 3.42 97.527c0-49.026 12.475-85.399 12.475-85.399l-2.208-9.921a1.016 1.016 0 0 1 .185-.841.999.999 0 0 1 .761-.391C20.855.797 49.58.002 67.42 0z" fill-opacity=".5"/><path d="M75.789 82.504a2 2 0 0 1 3.305-.236c2.89 3.909 2.535 11.121-1.281 17.732-3.817 6.611-9.886 10.524-14.707 9.915a1.938 1.938 0 0 1-1.404-2.889c2.985-5.292 11.049-19.26 14.087-24.522zm-2.598-1.5a1.997 1.997 0 0 0-1.448-2.98c-4.83-.548-10.898 3.365-14.715 9.976-3.817 6.611-4.171 13.823-1.234 17.694a1.94 1.94 0 0 0 3.205-.229c3.09-5.231 11.154-19.199 14.192-24.461z"/><path d="M67.646 59.001a35.84 35.84 0 0 1 5.101.403 34.757 34.757 0 0 1 9.071 2.69 35.102 35.102 0 0 1 9.439 6.287 35.232 35.232 0 0 1 7.136 9.315 34.795 34.795 0 0 1 3.359 9.468c.75 3.782.869 7.688.358 11.51a34.796 34.796 0 0 1-3.052 10.303 35.178 35.178 0 0 1-18.02 17.271 34.727 34.727 0 0 1-6.781 2.083 35.11 35.11 0 0 1-6.611.668 34.87 34.87 0 0 1-13.45-2.587 35.15 35.15 0 0 1-18.229-17.053 34.824 34.824 0 0 1-3.176-10.249 35.304 35.304 0 0 1 .176-11.302 34.84 34.84 0 0 1 3.094-9.358 35.19 35.19 0 0 1 16.575-16.179 34.798 34.798 0 0 1 9.024-2.798 35.92 35.92 0 0 1 5.986-.472zm-.401 8c-1.32.012-2.637.111-3.942.311a26.788 26.788 0 0 0-7.132 2.138 27.194 27.194 0 0 0-12.725 12.125 26.821 26.821 0 0 0-2.51 7.145 27.276 27.276 0 0 0-.229 9.23 26.793 26.793 0 0 0 2.373 7.744 27.184 27.184 0 0 0 5.718 7.847 27.138 27.138 0 0 0 8.426 5.466 26.815 26.815 0 0 0 10.372 1.992 26.8 26.8 0 0 0 10.324-2.119 27.112 27.112 0 0 0 8.356-5.565 27.146 27.146 0 0 0 5.625-7.917 26.829 26.829 0 0 0 2.28-7.784 27.247 27.247 0 0 0-.379-9.387A26.823 26.823 0 0 0 91.086 81a27.198 27.198 0 0 0-12.865-11.751 26.795 26.795 0 0 0-6.851-1.962 27.64 27.64 0 0 0-4.125-.286z" fill-opacity=".5" fill-rule="nonzero"/><path d="M158 138c2.208 0 4 1.792 4 4v24c0 13.246-10.754 24-24 24h-14c-11.575 0-21.247-8.212-23.503-19.122l-.207.087A14.007 14.007 0 0 1 95 172c-1.81 0-3.614-.35-5.29-1.035a14.092 14.092 0 0 1-7.329-6.898 13.924 13.924 0 0 1-1.245-4.11 14.102 14.102 0 0 1 .115-4.606c.248-1.293.681-2.55 1.282-3.722a14.072 14.072 0 0 1 6.553-6.32 13.92 13.92 0 0 1 5.733-1.308h.362c.653.013 1.304.062 1.95.16.98.15 1.943.406 2.869.76V142c0-2.208 1.792-4 4-4h54zm-58 16.686a6.092 6.092 0 0 0-2.342-2.066 5.908 5.908 0 0 0-2.421-.615c-.106-.004-.211-.005-.316-.004a5.913 5.913 0 0 0-2.449.556 6.045 6.045 0 0 0-1.814 1.307 6.022 6.022 0 0 0-1.19 1.807 5.913 5.913 0 0 0-.428 1.632 5.94 5.94 0 0 0 .787 3.737 6.084 6.084 0 0 0 2.778 2.463c.729.319 1.52.486 2.315.496a5.99 5.99 0 0 0 2.343-.44 6.056 6.056 0 0 0 2.737-2.245v-6.628z"/><g><path d="M235 90h-80l-4.79 95.8a4 4 0 0 0 3.995 4.2h81.59a3.998 3.998 0 0 0 3.995-4.2L235 90z" fill-opacity=".3"/><path d="M151.802 153.96L153.2 126h83.6l1.398 27.96-.198.04h-86l-.198-.04z" fill-opacity=".5"/><path d="M236.522 82.392A2.001 2.001 0 0 0 234.56 80h-79.12a2 2 0 0 0-1.962 2.392L155 90h80l1.522-7.608z"/><ellipse cx="195" cy="140" rx="28" ry="21"/><path d="M176.682 63.912c.212.012.421.04.626.092.236.061.459.152.674.264 2.356 1.313 4.672 2.695 7.007 4.044a2.992 2.992 0 0 1 1.373 1.734c.079.261.121.532.127.804a3.026 3.026 0 0 1-1.102 2.384 3.006 3.006 0 0 1-3.318.318c-2.356-1.313-4.672-2.696-7.008-4.044a2.977 2.977 0 0 1-1.373-1.734 3.004 3.004 0 0 1 1.587-3.574 2.98 2.98 0 0 1 1.226-.289c.09-.001.09-.001.181.001zm36.817-.001a2.978 2.978 0 0 1 1.307.329 3.02 3.02 0 0 1 1.459 1.663 3.002 3.002 0 0 1-1.248 3.559c-2.315 1.383-4.671 2.698-7.006 4.046a3.034 3.034 0 0 1-1.199.387 3.018 3.018 0 0 1-2.128-.605 3.04 3.04 0 0 1-.572-.578 3.023 3.023 0 0 1-.499-2.579 3.014 3.014 0 0 1 1.32-1.775c2.315-1.383 4.67-2.698 7.006-4.046.159-.089.321-.167.493-.228.286-.102.583-.155.886-.172.091-.002.09-.002.181-.001zm-18.353-10.907c.325.021.642.083.946.202a3.02 3.02 0 0 1 1.72 1.748c.113.306.171.624.186.949.044 2.699.002 5.398.002 8.097a3.016 3.016 0 0 1-.862 2.104 2.99 2.99 0 0 1-.694.526 3 3 0 0 1-4.442-2.533C191.958 61.399 192 58.699 192 56c.006-.358.063-.71.188-1.046a3.022 3.022 0 0 1 1.811-1.782c.308-.109.627-.161.952-.172.098 0 .097 0 .195.004z" fill-opacity=".5"/></g></g></svg>
\ No newline at end of file
diff --git a/site/static/img/illustrations/meeting-space.svg b/site/static/img/illustrations/meeting-space.svg
new file mode 100644
index 0000000..043eafb
--- /dev/null
+++ b/site/static/img/illustrations/meeting-space.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 240 190" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path fill="none" d="M0 0h240v190H0z"/><clipPath id="a"><path d="M0 0h240v190H0z"/></clipPath><g clip-path="url(#a)" fill="#f40"><path d="M99.678 20h14a2 2 0 0 1 1.6 3.2l-12.487 16.649V174h-76v-53.291l-2.638-2.238c-.543-.467-1.084-.936-1.618-1.414a87.761 87.761 0 0 1-3.425-3.229 82.347 82.347 0 0 1-3.788-4.028 76.794 76.794 0 0 1-3.066-3.72 70.793 70.793 0 0 1-2.458-3.385C7.134 98.788 4.867 94.6 3.176 90.181c-1.201-3.136-2.111-6.389-2.644-9.706-.742-4.623-.75-9.392.247-13.977.604-2.778 1.579-5.478 2.949-7.971a26.203 26.203 0 0 1 3.531-4.966 25.108 25.108 0 0 1 5.032-4.267 26.124 26.124 0 0 1 5.969-2.831 29.144 29.144 0 0 1 5.914-1.268c.87-.096 1.743-.153 2.617-.179V20h72.887zM26.791 55.021l-.035.001c-1.93.088-3.851.406-5.678 1.044a15.99 15.99 0 0 0-3.543 1.746 15.12 15.12 0 0 0-3.738 3.516c-.3.396-.582.807-.845 1.229-2.021 3.251-2.88 7.112-2.948 10.909-.012.702.002 1.405.041 2.106.046.827.126 1.651.236 2.472a36.785 36.785 0 0 0 1.383 6.122c.808 2.572 1.87 5.061 3.119 7.449a56.416 56.416 0 0 0 4.897 7.708c2.151 2.863 4.545 5.539 7.111 8.034V55.021z" fill-opacity=".3"/><path d="M26.791 16c0-2.208 1.792-4 4-4h68c2.208 0 4 1.792 4 4v4h-76v-4z"/><path d="M62.791 174V8h-8a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h20a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-8v166h36v8l5.549 6.341a1.002 1.002 0 0 1-.753 1.659H21.995a.999.999 0 0 1-.753-1.659L26.791 182v-8h36z" fill-opacity=".5"/><path d="M217 124c2.208 0 4 1.792 4 4v6.541a14.774 14.774 0 0 1 1.717-.368 15.876 15.876 0 0 1 2.089-.172h.388a14.9 14.9 0 0 1 6.142 1.401 15.077 15.077 0 0 1 7.022 6.772 14.863 14.863 0 0 1 1.373 3.988c.312 1.623.353 3.298.123 4.935a14.913 14.913 0 0 1-1.334 4.404 15.064 15.064 0 0 1-7.852 7.39 15.03 15.03 0 0 1-10.111.438C218.017 178.458 204.846 190 189 190h-12c-17.661 0-32-14.339-32-32v-30c0-2.208 1.792-4 4-4h68zm4 30.743c.401.28.831.519 1.281.71.83.351 1.726.535 2.626.546a6.985 6.985 0 0 0 2.732-.513 7.045 7.045 0 0 0 2.187-1.42 7.048 7.048 0 0 0 1.487-2.039 6.925 6.925 0 0 0 .606-1.955 7.092 7.092 0 0 0-.098-2.657 6.914 6.914 0 0 0-.702-1.816 7.106 7.106 0 0 0-3.017-2.876 6.914 6.914 0 0 0-3.194-.722 6.922 6.922 0 0 0-3.908 1.257v11.485zM56 134.541V128c0-2.208 1.792-4 4-4h68c2.208 0 4 1.792 4 4v30c0 17.661-14.339 32-32 32H88c-15.846 0-29.017-11.542-31.557-26.671a15.03 15.03 0 0 1-10.111-.438 15.064 15.064 0 0 1-7.852-7.39 14.913 14.913 0 0 1-1.334-4.404 15.084 15.084 0 0 1 .123-4.935 14.863 14.863 0 0 1 1.373-3.988 15.089 15.089 0 0 1 7.022-6.772 14.9 14.9 0 0 1 6.142-1.401h.388c.7.014 1.397.066 2.089.172.579.089 1.153.211 1.717.368zm0 8.717a6.925 6.925 0 0 0-4.092-1.257 6.893 6.893 0 0 0-2.858.649 7.1 7.1 0 0 0-2.997 2.659 6.93 6.93 0 0 0-.833 1.939 7.094 7.094 0 0 0-.163 2.652 6.88 6.88 0 0 0 .558 1.973 7.074 7.074 0 0 0 3.59 3.547 7.016 7.016 0 0 0 5.356.097c.508-.2.992-.461 1.439-.775v-11.484z"/><g><path d="M205 54c0-19.317-15.683-35-35-35s-35 15.683-35 35 15.683 35 35 35a35.003 35.003 0 0 0 17.87-4.906l13.664 3.913a2 2 0 0 0 2.473-2.473l-3.913-13.664A35.003 35.003 0 0 0 205 54z" fill-opacity=".5"/><path d="M175.975 59.092a3.005 3.005 0 0 1 2.277 1.164c1.617 2.158 3.17 4.362 4.755 6.543a2.993 2.993 0 0 1 .546 2.167 3.02 3.02 0 0 1-.244.843 3.023 3.023 0 0 1-1.954 1.651 2.986 2.986 0 0 1-2.141-.227 3.028 3.028 0 0 1-1.008-.837c-1.617-2.157-3.171-4.361-4.755-6.542a2.998 2.998 0 0 1 1.156-4.481 2.98 2.98 0 0 1 1.192-.282c.088-.001.087-.001.176.001zm-11.774-.001a3 3 0 0 1 2.399 4.691c-1.553 2.204-3.168 4.363-4.753 6.544a3.028 3.028 0 0 1-1.061.907 3.023 3.023 0 0 1-2.557.083 3.031 3.031 0 0 1-1.326-1.121 3.004 3.004 0 0 1-.142-3.022c.055-.104.116-.204.181-.302 1.553-2.204 3.168-4.363 4.753-6.544a3.02 3.02 0 0 1 1.551-1.106 3.173 3.173 0 0 1 .955-.13zm-11.234-13.652c.127.006.253.015.379.035.125.02.248.049.371.083 2.579.793 5.133 1.666 7.699 2.5a3.01 3.01 0 0 1 1.713 1.428 3.02 3.02 0 0 1 .166 2.487 3.015 3.015 0 0 1-1.256 1.507 3.021 3.021 0 0 1-2.014.395 3.632 3.632 0 0 1-.372-.083c-2.579-.793-5.133-1.666-7.699-2.5a3.011 3.011 0 0 1-1.713-1.428 3.024 3.024 0 0 1-.131-2.576c.122-.293.29-.566.497-.807a3.015 3.015 0 0 1 2.169-1.04c.095-.002.095-.002.191-.001zm34.257.001a2.996 2.996 0 0 1 2.587 1.674 3.02 3.02 0 0 1 .033 2.579 3.009 3.009 0 0 1-1.708 1.567c-2.553.874-5.132 1.669-7.698 2.503a3.014 3.014 0 0 1-1.411.108 3.023 3.023 0 0 1-2.071-1.388 3.01 3.01 0 0 1-.209-2.741 2.994 2.994 0 0 1 1.746-1.654c2.553-.875 5.133-1.67 7.699-2.503.122-.038.243-.071.369-.095.125-.024.25-.037.377-.047.096-.004.19-.005.286-.003zm-17.078-12.436c.325.021.642.083.946.202a3.02 3.02 0 0 1 1.72 1.748c.113.306.171.624.186.949.044 2.699.002 5.398.002 8.097a3.016 3.016 0 0 1-.347 1.401 3.024 3.024 0 0 1-2.026 1.533 2.99 2.99 0 0 1-1.719-.14 3 3 0 0 1-1.906-2.697C166.958 41.398 167 38.699 167 36c.005-.326.052-.645.156-.955a3.022 3.022 0 0 1 1.752-1.839 3.131 3.131 0 0 1 1.043-.206c.098 0 .098 0 .195.004z"/></g></g></svg>
\ No newline at end of file
diff --git a/site/static/img/illustrations/tutorials.svg b/site/static/img/illustrations/tutorials.svg
new file mode 100644
index 0000000..64f42a1
--- /dev/null
+++ b/site/static/img/illustrations/tutorials.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 240 190" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path fill="none" d="M0 0h240v190H0z"/><clipPath id="a"><path d="M0 0h240v190H0z"/></clipPath><g clip-path="url(#a)" fill="#f40"><path d="M36.682 67.912c.212.012.421.039.626.092.236.061.459.152.674.263 2.356 1.313 4.672 2.696 7.007 4.044a3.044 3.044 0 0 1 .935.845 3.02 3.02 0 0 1 .54 2.145 3.023 3.023 0 0 1-1.448 2.191 2.976 2.976 0 0 1-1.647.415 3.003 3.003 0 0 1-1.3-.355c-2.356-1.313-4.672-2.696-7.008-4.044a3.014 3.014 0 0 1-1.345-1.648 2.998 2.998 0 0 1 2.785-3.95c.091 0 .09 0 .181.002zm36.817-.002a3.044 3.044 0 0 1 1.226.289 3.03 3.03 0 0 1 1.398 1.37c.121.243.209.503.261.77a3.02 3.02 0 0 1-.41 2.174 2.987 2.987 0 0 1-.957.948c-2.315 1.384-4.671 2.698-7.006 4.047a2.97 2.97 0 0 1-1.199.386 2.998 2.998 0 0 1-2.7-1.182 3.023 3.023 0 0 1-.499-2.579 2.99 2.99 0 0 1 1.32-1.775c2.315-1.384 4.67-2.698 7.006-4.047.265-.147.544-.261.841-.328.177-.04.356-.061.538-.071.091-.002.09-.002.181-.002zM55.146 57.003c.325.021.642.084.946.202.79.309 1.424.953 1.72 1.748.113.306.171.624.186.95.044 2.698.002 5.398.002 8.097a3.009 3.009 0 0 1-.347 1.4 3.021 3.021 0 0 1-2.026 1.533c-.285.061-.579.08-.87.057a3.02 3.02 0 0 1-1.755-.752 3.011 3.011 0 0 1-.963-1.755 3.317 3.317 0 0 1-.037-.386C51.958 65.398 52 62.699 52 60c.005-.326.052-.646.156-.955a3.023 3.023 0 0 1 1.752-1.84 3.155 3.155 0 0 1 1.238-.202zM83 96.5V186c0 .582.125 1.135.345 1.602A46.537 46.537 0 0 1 78.974 190H31.026A55 55 0 0 1 22 96.5h61z" fill-opacity=".5"/><path d="M83 129.619V186c0 .582.125 1.135.345 1.602A46.537 46.537 0 0 1 78.974 190H31.026a55 55 0 0 1-29.939-60.381H83zM83 96.5H22l-7.266-8.72a1.999 1.999 0 0 1 1.536-3.28H83v12z"/><g><path d="M213 14c0-2.208-1.792-4-4-4H87c-2.208 0-4 1.792-4 4v172c0 2.208 1.792 4 4 4h122c2.208 0 4-1.792 4-4V14z" fill-opacity=".3"/><path d="M140.519 4A8.989 8.989 0 0 1 148 0a8.989 8.989 0 0 1 7.481 4H179c2.217.009 4 1.798 4 4v6c0 2.208-1.792 4-4 4h-62c-2.208 0-4-1.792-4-4V8a4.005 4.005 0 0 1 4-4h23.519z"/><path d="M150 144c2.208 0 4 1.792 4 4s-1.792 4-4 4h-48c-2.208 0-4-1.792-4-4s1.792-4 4-4h48zm44-16c2.208 0 4 1.792 4 4s-1.792 4-4 4h-92c-2.208 0-4-1.792-4-4s1.792-4 4-4h92zm0-16c2.208 0 4 1.792 4 4s-1.792 4-4 4h-92c-2.208 0-4-1.792-4-4s1.792-4 4-4h92zm0-16c2.208 0 4 1.792 4 4s-1.792 4-4 4h-92c-2.208 0-4-1.792-4-4s1.792-4 4-4h92zm0-16c2.208 0 4 1.792 4 4s-1.792 4-4 4h-80c-2.208 0-4-1.792-4-4s1.792-4 4-4h80zm-88 4c0-2.208-1.792-4-4-4s-4 1.792-4 4 1.792 4 4 4 4-1.792 4-4zm88-20c2.208 0 4 1.792 4 4s-1.792 4-4 4h-92c-2.208 0-4-1.792-4-4s1.792-4 4-4h92zm-88-12c0-2.208-1.792-4-4-4s-4 1.792-4 4 1.792 4 4 4 4-1.792 4-4zm88-4c2.208 0 4 1.792 4 4s-1.792 4-4 4h-80c-2.208 0-4-1.792-4-4s1.792-4 4-4h80zm0-16c2.208 0 4 1.792 4 4s-1.792 4-4 4h-92c-2.208 0-4-1.792-4-4s1.792-4 4-4h92z" fill-opacity=".5"/></g><path d="M217 124c2.208 0 4 1.792 4 4v6.541a14.774 14.774 0 0 1 1.717-.368 15.876 15.876 0 0 1 2.089-.172h.388a14.9 14.9 0 0 1 6.142 1.401 15.077 15.077 0 0 1 7.022 6.772 14.863 14.863 0 0 1 1.373 3.988c.312 1.623.353 3.298.123 4.935a14.913 14.913 0 0 1-1.334 4.404 15.064 15.064 0 0 1-7.852 7.39 15.03 15.03 0 0 1-10.111.438C218.017 178.458 204.846 190 189 190h-12c-17.661 0-32-14.339-32-32v-30c0-2.208 1.792-4 4-4h68zm4 30.743c.401.28.831.519 1.281.71.83.351 1.726.535 2.626.546a7.008 7.008 0 0 0 2.733-.513 7.04 7.04 0 0 0 2.186-1.42 7.048 7.048 0 0 0 1.487-2.039 6.912 6.912 0 0 0 .606-1.953 7.1 7.1 0 0 0-.118-2.743 6.942 6.942 0 0 0-.855-2.023 7.092 7.092 0 0 0-2.844-2.584 6.874 6.874 0 0 0-2.827-.719 7.346 7.346 0 0 0-1.349.076 6.897 6.897 0 0 0-2.926 1.177v11.485z"/></g></svg>
\ No newline at end of file
diff --git a/site/static/img/logo.svg b/site/static/img/logo.svg
new file mode 100644
index 0000000..2077f34
--- /dev/null
+++ b/site/static/img/logo.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 109 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:figma="http://www.figma.com/figma/ns"><title>Logo</title><g transform="translate(-1470)" figma:type="canvas"><g style="mix-blend-mode:normal" figma:type="vector" transform="translate(1470)" fill="#f40"><use xlink:href="#b" style="mix-blend-mode:normal"/><use xlink:href="#c" style="mix-blend-mode:normal"/><use xlink:href="#d" style="mix-blend-mode:normal"/><use xlink:href="#e" style="mix-blend-mode:normal"/><use xlink:href="#f" style="mix-blend-mode:normal"/></g></g><defs><path id="b" d="M22.735 23.171c.283.323.053.829-.376.829h-5.907c-.285 0-.556-.121-.745-.333l-9.414-10.526v10.36c0 .276-.224.5-.5.5h-5.293c-.276 0-.5-.224-.5-.5v-23c0-.276.224-.5.5-.5h5.293c.276 0 .5.224.5.5v9.815l9.141-9.99c.19-.207.457-.325.738-.325h5.762c.437 0 .664.521.366.841l-9.851 10.563 10.287 11.767z"/><path id="c" d="M45.991 24c-.199 0-.38-.118-.459-.301l-2.024-4.669h-10.67l-2.024 4.669c-.079.183-.259.301-.459.301h-5.212c-.366 0-.608-.381-.453-.712l10.782-23c.082-.176.259-.288.453-.288h4.358c.194 0 .37.112.453.287l10.815 23c.156.332-.086.713-.452.713h-5.108zm-11.135-9.668h6.635l-3.317-7.694-3.317 7.694z"/><path id="d" d="M55.525 24c-.276 0-.5-.224-.5-.5v-23c0-.276.224-.5.5-.5h5.293c.276 0 .5.224.5.5v18.428h9.759c.276 0 .5.224.5.5v4.072c0 .276-.224.5-.5.5h-15.552z"/><path id="e" d="M75.279.5c0-.276.224-.5.5-.5h9.315c2.667 0 4.959.477 6.874 1.43 1.938.953 3.42 2.338 4.446 4.153 1.026 1.793 1.539 3.926 1.539 6.4 0 2.496-.513 4.652-1.539 6.468-1.003 1.793-2.474 3.166-4.412 4.119-1.915.953-4.218 1.43-6.908 1.43h-9.315c-.276 0-.5-.224-.5-.5v-23zm9.37 18.462c2.371 0 4.138-.579 5.301-1.736 1.163-1.157 1.744-2.905 1.744-5.242 0-2.338-.581-4.074-1.744-5.209-1.163-1.157-2.93-1.736-5.301-1.736h-3.078v13.923h3.078z"/><path id="f" d="M102.913 24c-.276 0-.5-.224-.5-.5v-23c0-.276.224-.5.5-.5h5.293c.276 0 .5.224.5.5v23c0 .276-.224.5-.5.5h-5.293z"/></defs></svg>
diff --git a/site/static/img/products/jumbotron.jpg b/site/static/img/products/jumbotron.jpg
new file mode 100755
index 0000000..dfb2dbe
--- /dev/null
+++ b/site/static/img/products/jumbotron.jpg
diff --git a/site/static/img/products/products-full-width.jpg b/site/static/img/products/products-full-width.jpg
new file mode 100644
index 0000000..b1a0194
--- /dev/null
+++ b/site/static/img/products/products-full-width.jpg
diff --git a/site/static/img/products/products-grid1.jpg b/site/static/img/products/products-grid1.jpg
new file mode 100755
index 0000000..600be3c
--- /dev/null
+++ b/site/static/img/products/products-grid1.jpg
diff --git a/site/static/img/products/products-grid2.jpg b/site/static/img/products/products-grid2.jpg
new file mode 100755
index 0000000..b066a88
--- /dev/null
+++ b/site/static/img/products/products-grid2.jpg
diff --git a/site/static/img/products/products-grid3.jpg b/site/static/img/products/products-grid3.jpg
new file mode 100755
index 0000000..df47e06
--- /dev/null
+++ b/site/static/img/products/products-grid3.jpg
diff --git a/src/css/imports/_border-colors.css b/src/css/imports/_border-colors.css
index 4eaf69e..0babaab 100755
--- a/src/css/imports/_border-colors.css
+++ b/src/css/imports/_border-colors.css
@@ -1,84 +1,35 @@
-/*
+.b--primary {
+  border-color: var(--primary);
+}
 
-   BORDER COLORS
-   Docs: http://tachyons.io/docs/themes/borders/
+.b--highlight {
+  border-color: --var(--highlight);
+}
 
-   Border colors can be used to extend the base
-   border classes ba,bt,bb,br,bl found in the _borders.css file.
+.b--white {
+  border-color: var(--white);
+}
 
-   The base border class by default will set the color of the border
-   to that of the current text color. These classes are for the cases
-   where you desire for the text and border colors to be different.
+.b--off-white {
+  border-color: var(--off-white);
+}
 
-   Base:
-     b = border
+.b--grey-1 {
+  border-color: var(--grey-1);
+}
 
-   Modifiers:
-   --color-name = each color variable name is also a border color name
+.b--grey-2 {
+  border-color: var(--grey-2);
+}
 
-*/
+.b--grey-3 {
+  border-color: var(--grey-3);
+}
 
-.b--black {        border-color: var(--black); }
-.b--near-black {   border-color: var(--near-black); }
-.b--dark-gray {    border-color: var(--dark-gray); }
-.b--mid-gray {     border-color: var(--mid-gray); }
-.b--gray {         border-color: var(--gray); }
-.b--silver {       border-color: var(--silver); }
-.b--light-silver { border-color: var(--light-silver); }
-.b--light-gray {   border-color: var(--light-gray); }
-.b--near-white {   border-color: var(--near-white); }
-.b--white {        border-color: var(--white); }
+.b--grey-4 {
+  border-color: var(--grey-4);
+}
 
-.b--white-90 {   border-color: var(--white-90); }
-.b--white-80 {   border-color: var(--white-80); }
-.b--white-70 {   border-color: var(--white-70); }
-.b--white-60 {   border-color: var(--white-60); }
-.b--white-50 {   border-color: var(--white-50); }
-.b--white-40 {   border-color: var(--white-40); }
-.b--white-30 {   border-color: var(--white-30); }
-.b--white-20 {   border-color: var(--white-20); }
-.b--white-10 {   border-color: var(--white-10); }
-.b--white-05 {   border-color: var(--white-05); }
-.b--white-025 {   border-color: var(--white-025); }
-.b--white-0125 {   border-color: var(--white-0125); }
-
-.b--black-90 {   border-color: var(--black-90); }
-.b--black-80 {   border-color: var(--black-80); }
-.b--black-70 {   border-color: var(--black-70); }
-.b--black-60 {   border-color: var(--black-60); }
-.b--black-50 {   border-color: var(--black-50); }
-.b--black-40 {   border-color: var(--black-40); }
-.b--black-30 {   border-color: var(--black-30); }
-.b--black-20 {   border-color: var(--black-20); }
-.b--black-10 {   border-color: var(--black-10); }
-.b--black-05 {   border-color: var(--black-05); }
-.b--black-025 {   border-color: var(--black-025); }
-.b--black-0125 {   border-color: var(--black-0125); }
-
-.b--dark-red { border-color: var(--dark-red); }
-.b--red { border-color: var(--red); }
-.b--light-red { border-color: var(--light-red); }
-.b--orange { border-color: var(--orange); }
-.b--gold { border-color: var(--gold); }
-.b--yellow { border-color: var(--yellow); }
-.b--light-yellow { border-color: var(--light-yellow); }
-.b--purple { border-color: var(--purple); }
-.b--light-purple { border-color: var(--light-purple); }
-.b--dark-pink { border-color: var(--dark-pink); }
-.b--hot-pink { border-color: var(--hot-pink); }
-.b--pink { border-color: var(--pink); }
-.b--light-pink { border-color: var(--light-pink); }
-.b--dark-green { border-color: var(--dark-green); }
-.b--green { border-color: var(--green); }
-.b--light-green { border-color: var(--light-green); }
-.b--navy { border-color: var(--navy); }
-.b--dark-blue { border-color: var(--dark-blue); }
-.b--blue { border-color: var(--blue); }
-.b--light-blue { border-color: var(--light-blue); }
-.b--lightest-blue { border-color: var(--lightest-blue); }
-.b--washed-blue { border-color: var(--washed-blue); }
-.b--washed-green { border-color: var(--washed-green); }
-.b--washed-yellow { border-color: var(--washed-yellow); }
-.b--washed-red { border-color: var(--washed-red); }
-
-.b--transparent { border-color: var(--transparent); }
+.b--black {
+  border-color: var(--black);
+}
diff --git a/src/css/imports/_border-radius.css b/src/css/imports/_border-radius.css
index 19b873c..2422bd2 100755
--- a/src/css/imports/_border-radius.css
+++ b/src/css/imports/_border-radius.css
@@ -24,11 +24,12 @@
 
 */
 
+  :root {
+    --border-radius: .25rem;
+  }
+
   .br0 {        border-radius: 0; }
-  .br1 {        border-radius: .125rem; }
-  .br2 {        border-radius: .25rem; }
-  .br3 {        border-radius: .5rem; }
-  .br4 {        border-radius: 1rem; }
+  .br1 {        border-radius: var(--border-radius); }
   .br-100 {     border-radius: 100%; }
   .br-pill {    border-radius: 9999px; }
   .br--bottom {
@@ -50,10 +51,7 @@
 
 @media (--breakpoint-not-small) {
   .br0-ns {     border-radius: 0; }
-  .br1-ns {     border-radius: .125rem; }
-  .br2-ns {     border-radius: .25rem; }
-  .br3-ns {     border-radius: .5rem; }
-  .br4-ns {     border-radius: 1rem; }
+  .br1-ns {     border-radius: var(--border-radius); }
   .br-100-ns {  border-radius: 100%; }
   .br-pill-ns { border-radius: 9999px; }
   .br--bottom-ns {
@@ -76,10 +74,7 @@
 
 @media (--breakpoint-medium) {
   .br0-m {     border-radius: 0; }
-  .br1-m {     border-radius: .125rem; }
-  .br2-m {     border-radius: .25rem; }
-  .br3-m {     border-radius: .5rem; }
-  .br4-m {     border-radius: 1rem; }
+  .br1-m {     border-radius: var(--border-radius); }
   .br-100-m {  border-radius: 100%; }
   .br-pill-m { border-radius: 9999px; }
   .br--bottom-m {
@@ -102,10 +97,7 @@
 
 @media (--breakpoint-large) {
   .br0-l {     border-radius: 0; }
-  .br1-l {     border-radius: .125rem; }
-  .br2-l {     border-radius: .25rem; }
-  .br3-l {     border-radius: .5rem; }
-  .br4-l {     border-radius: 1rem; }
+  .br1-l {     border-radius: var(--border-radius); }
   .br-100-l {  border-radius: 100%; }
   .br-pill-l { border-radius: 9999px; }
   .br--bottom-l {
diff --git a/src/css/imports/_buttons.css b/src/css/imports/_buttons.css
new file mode 100644
index 0000000..57cb4ff
--- /dev/null
+++ b/src/css/imports/_buttons.css
@@ -0,0 +1,13 @@
+.btn {
+  display: inline-block;
+  padding: 12px 16px 10px;
+  font-size: 1rem;
+  line-height: 1.25;
+  background-color: var(--white);
+  border-radius: var(--border-radius);
+  text-decoration: none;
+  font-weight: bold;
+  color: var(--primary);
+  text-align: center;
+  box-shadow: inset 0 0 0 2px var(--primary);
+}
diff --git a/src/css/imports/_cms.css b/src/css/imports/_cms.css
new file mode 100644
index 0000000..e82565e
--- /dev/null
+++ b/src/css/imports/_cms.css
@@ -0,0 +1,13 @@
+.cms {
+  & h1, h2, h3, h4, h5, h6 {
+    font-weight: bold;
+  }
+  & a {
+    color: var(--primary);
+    transition: var(--hover-transition);
+    &:hover {
+      background-color: var(--highlight);
+      color: var(--black);
+    }
+  }
+}
diff --git a/src/css/imports/_colors.css b/src/css/imports/_colors.css
index 7280aec..9d09e73 100755
--- a/src/css/imports/_colors.css
+++ b/src/css/imports/_colors.css
@@ -1,80 +1,94 @@
-/*
+/* Color variables */
 
-   Tachyons
-   COLOR VARIABLES
+:root {
+  --primary: rgba(255, 68, 0, 1);
+  --highlight: rgba(254, 213, 198, 1);
+  --white: rgba(255, 255, 255, 1);
+  --off-white: rgba(255, 253, 252, 1);
+  --grey-1: rgba(245, 243, 242, 1);
+  --grey-2: rgba(235, 231, 230, 1);
+  --grey-3: rgba(89, 87, 86, 1);
+  --grey-4: rgba(66, 64, 64, 1);
+  --black: rgba(43, 37, 35, 1);
+}
 
-   Grayscale
-   - Solids
-   - Transparencies
-   Colors
+/* Text colors */
 
-*/
+.primary {
+  color: var(--primary);
+}
 
-:root {
-  --black: #000;
-  --near-black: #111;
-  --dark-gray:#333;
-  --mid-gray:#555;
-  --gray: #777;
-  --silver: #999;
-  --light-silver: #aaa;
-  --moon-gray: #ccc;
-  --light-gray: #eee;
-  --near-white: #f4f4f4;
-  --white: #fff;
+.highlight {
+  color: --var(--highlight);
+}
 
-  --transparent:transparent;
+.white {
+  color: var(--white);
+}
 
- --black-90: rgba(0,0,0,.9);
- --black-80: rgba(0,0,0,.8);
- --black-70: rgba(0,0,0,.7);
- --black-60: rgba(0,0,0,.6);
- --black-50: rgba(0,0,0,.5);
- --black-40: rgba(0,0,0,.4);
- --black-30: rgba(0,0,0,.3);
- --black-20: rgba(0,0,0,.2);
- --black-10: rgba(0,0,0,.1);
- --black-05: rgba(0,0,0,.05);
- --black-025: rgba(0,0,0,.025);
- --black-0125: rgba(0,0,0,.0125);
+.off-white {
+  color: var(--off-white);
+}
 
- --white-90: rgba(255,255,255,.9);
- --white-80: rgba(255,255,255,.8);
- --white-70: rgba(255,255,255,.7);
- --white-60: rgba(255,255,255,.6);
- --white-50: rgba(255,255,255,.5);
- --white-40: rgba(255,255,255,.4);
- --white-30: rgba(255,255,255,.3);
- --white-20: rgba(255,255,255,.2);
- --white-10: rgba(255,255,255,.1);
- --white-05: rgba(255,255,255,.05);
- --white-025: rgba(255,255,255,.025);
- --white-0125: rgba(255,255,255,.0125);
+.grey-1 {
+  color: var(--grey-1);
+}
 
-  --dark-red:  #e7040f;
-  --red:  #ff4136;
-  --light-red:  #ff725c;
-  --orange:  #ff6300;
-  --gold:  #ffb700;
-  --yellow:  #ffd700;
-  --light-yellow:  #fbf1a9;
-  --purple:  #5e2ca5;
-  --light-purple:  #a463f2;
-  --dark-pink:  #d5008f;
-  --hot-pink: #ff41b4;
-  --pink:  #ff80cc;
-  --light-pink:  #ffa3d7;
-  --dark-green:  #137752;
-  --green:  #19a974;
-  --light-green:  #9eebcf;
-  --navy:  #001b44;
-  --dark-blue:  #00449e;
-  --blue:  #357edd;
-  --light-blue:  #96ccff;
-  --lightest-blue:  #cdecff;
-  --washed-blue:  #f6fffe;
-  --washed-green:  #e8fdf5;
-  --washed-yellow:  #fffceb;
-  --washed-red:  #ffdfdf;
+.grey-2 {
+  color: var(--grey-2);
+}
+
+.grey-3 {
+  color: var(--grey-3);
+}
+
+.grey-4 {
+  color: var(--grey-4);
+}
+
+.black {
+  color: var(--black);
+}
+
+.bg-primary {
+  background-color: var(--primary);
+}
+
+.bg-highlight {
+  background-color: --var(--highlight);
+}
+
+.bg-white {
+  background-color: var(--white);
+}
+
+.bg-off-white {
+  background-color: var(--off-white);
+}
+
+.bg-grey-1 {
+  background-color: var(--grey-1);
+}
+
+.bg-grey-2 {
+  background-color: var(--grey-2);
+}
+
+.bg-grey-3 {
+  background-color: var(--grey-4);
+}
+
+.bg-grey-4 {
+  background-color: var(--grey-4);
+}
+
+.bg-black {
+  background-color: var(--black);
+}
 
+.bg-fix-primary {
+  padding: 0 .5rem;
+  & :first-child {
+    box-shadow: .5rem 0 0 var(--primary), -.5rem 0 0 var(--primary);
+  }
 }
diff --git a/src/css/imports/_font-family.css b/src/css/imports/_font-family.css
index eed780a..f71d65d 100755
--- a/src/css/imports/_font-family.css
+++ b/src/css/imports/_font-family.css
@@ -7,7 +7,7 @@
 
 
 .sans-serif {
-  font-family: -apple-system, BlinkMacSystemFont,
+  font-family: Nunito Sans, -apple-system, BlinkMacSystemFont,
                'avenir next', avenir,
                helvetica, 'helvetica neue',
                ubuntu,
@@ -97,4 +97,3 @@ code, .code {
   font-family: baskerville,
                serif;
 }
-
diff --git a/src/css/imports/_forms.css b/src/css/imports/_forms.css
index fe0b8ab..12ee7c6 100755
--- a/src/css/imports/_forms.css
+++ b/src/css/imports/_forms.css
@@ -1,9 +1,14 @@
 /*
 
    FORMS
-   
+
 */
 
+fieldset
+{
+  position: relative;
+}
+
 .input-reset {
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -14,3 +19,62 @@
   border: 0;
   padding: 0;
 }
+
+input, textarea {
+  background-color: var(--grey-2);
+  border-radius: var(--border-radius);
+  padding: 12px 16px 10px;
+  font-size: 1rem;
+  line-height: 1.25;
+  position: relative;
+  z-index: 2;
+  &:focus {
+    background-color: var(--white);
+  }
+  &:focus + label {
+    opacity: 1;
+    pointer-events: auto;
+    transform: translateY(-120%);
+  }
+}
+
+::-webkit-input-placeholder {
+   color: var(--black);
+   font-size: 1rem;
+   line-height: normal;
+}
+
+:-moz-placeholder {
+   color: var(--black);
+   font-size: 1rem;
+   line-height: normal;
+}
+
+::-moz-placeholder {
+   color: var(--black);
+   font-size: 1rem;
+   line-height: normal;
+}
+
+:-ms-input-placeholder {
+   color: var(--black);
+   font-size: 1rem;
+   line-height: normal;
+}
+
+label
+{
+  font-size: .875rem;
+  font-weight: 800;
+  color: var(--primary);
+  background-color: var(--grey-2);
+  border-radius: .25rem;
+  padding: .25rem .5rem;
+  position: absolute;
+  left: 0;
+  pointer-events: none;
+  opacity: 0;
+  line-height: 1;
+  transition: var(--hover-transition);
+  z-index: 2;
+}
diff --git a/src/css/imports/_hovers.css b/src/css/imports/_hovers.css
index 7e9a64e..a10c718 100755
--- a/src/css/imports/_hovers.css
+++ b/src/css/imports/_hovers.css
@@ -1,33 +1,16 @@
-/*
-
-  HOVER EFFECTS
-  Docs: http://tachyons.io/docs/themes/hovers/
-
-    - Dim
-    - Hide Child
-    - Underline text
-    - Grow
-    - Pointer
-    - Shadow
-
-*/
-
-/*
-
-  Dim element on hover by adding the dim class.
-
-*/
-.dim {
-  opacity: 1;
-  transition: opacity .15s ease-in;
-}
-.dim:hover,
-.dim:focus {
-  opacity: .5;
-  transition: opacity .15s ease-in;
-}
-.dim:active {
-  opacity: .8; transition: opacity .15s ease-out;
+@media (--breakpoint-large) {
+  .raise {
+    transform: none;
+    transition: var(--hover-transition);
+  }
+  .raise:hover,
+  .raise:focus {
+    transform: translateY(-.1rem);
+    transition: var(--hover-transition);
+  }
+  .raise:active {
+    opacity: .5; transition: var(--hover-transition);
+  }
 }
 
 /*
@@ -101,31 +84,3 @@
 .pointer:hover {
   cursor: pointer;
 }
-
-/* 
-   Add shadow on hover.
-
-   Performant box-shadow animation pattern from 
-   http://tobiasahlin.com/blog/how-to-animate-box-shadow/ 
-*/
-
-.shadow-hover::after {
-  box-shadow: 0px 0px 8px 2px rgba( 0, 0, 0, .2 );
-  opacity: 0;
-  transition: opacity .25s ease-in-out;
-}
-
-.shadow-hover:hover::after,
-.shadow-hover:focus::after {
-  opacity: 1;
-}
-
-/* Combine with classes in skins and skins-pseudo for 
- * thousands of different transition possibilities. */
-
-.bg-animate,
-.bg-animate:hover,
-.bg-animate:focus {
-  transition: background-color .15s ease-in-out; 
-}
-
diff --git a/src/css/imports/_links.css b/src/css/imports/_links.css
index 6c9a2c8..243b5f0 100755
--- a/src/css/imports/_links.css
+++ b/src/css/imports/_links.css
@@ -8,6 +8,7 @@
 .link {
   text-decoration: none;
   transition: color .15s ease-in;
+  color: inherit;
 }
 
 .link:link,
@@ -16,6 +17,7 @@
 }
 .link:hover   {
   transition: color .15s ease-in;
+  text-decoration: underline;
 }
 .link:active  {
   transition: color .15s ease-in;
@@ -24,4 +26,3 @@
   transition: color .15s ease-in;
   outline: 1px dotted currentColor;
 }
-
diff --git a/src/css/imports/_media-queries.css b/src/css/imports/_media-queries.css
index d8a4c93..d3be559 100755
--- a/src/css/imports/_media-queries.css
+++ b/src/css/imports/_media-queries.css
@@ -1,36 +1,5 @@
-/*
+@custom-media --breakpoint-not-small screen and (min-width: 40em);
 
-  CUSTOM MEDIA QUERIES
+@custom-media --breakpoint-medium screen and (min-width: 40em) and (max-width: 60em);
 
-  Media query values can be changed to fit your own content.
-  There are no magic bullets when it comes to media query width values.
-  They should be declared in em units - and they should be set to meet
-  the needs of your content. You can also add additional media queries,
-  or remove some of the existing ones.
-
-  These media queries can be referenced like so:
-
-  @media (--breakpoint-not-small) {
-    .medium-and-larger-specific-style {
-      background-color: red;
-    }
-  }
-
-  @media (--breakpoint-medium) {
-    .medium-screen-specific-style {
-      background-color: red;
-    }
-  }
-
-  @media (--breakpoint-large) {
-    .large-and-larger-screen-specific-style {
-      background-color: red;
-    }
-  }
-
-*/
-
-/* Media Queries */
-@custom-media --breakpoint-not-small screen and (min-width: 30em);
-@custom-media --breakpoint-medium screen and (min-width: 30em) and (max-width: 60em);
 @custom-media --breakpoint-large screen and (min-width: 60em);
diff --git a/src/css/imports/_normalize.css b/src/css/imports/_normalize.css
deleted file mode 100755
index f1f7770..0000000
--- a/src/css/imports/_normalize.css
+++ /dev/null
@@ -1,422 +0,0 @@
-/* normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */
-
-/**
- * 1. Change the default font family in all browsers (opinionated).
- * 2. Correct the line height in all browsers.
- * 3. Prevent adjustments of font size after orientation changes in IE and iOS.
- */
-
-html {
-  font-family: sans-serif; /* 1 */
-  line-height: 1.15; /* 2 */
-  -ms-text-size-adjust: 100%; /* 3 */
-  -webkit-text-size-adjust: 100%; /* 3 */
-}
-
-/**
- * Remove the margin in all browsers (opinionated).
- */
-
-body {
-  margin: 0;
-}
-
-/* HTML5 display definitions
-   ========================================================================== */
-
-/**
- * Add the correct display in IE 9-.
- * 1. Add the correct display in Edge, IE, and Firefox.
- * 2. Add the correct display in IE.
- */
-
-article,
-aside,
-details, /* 1 */
-figcaption,
-figure,
-footer,
-header,
-main, /* 2 */
-menu,
-nav,
-section,
-summary { /* 1 */
-  display: block;
-}
-
-/**
- * Add the correct display in IE 9-.
- */
-
-audio,
-canvas,
-progress,
-video {
-  display: inline-block;
-}
-
-/**
- * Add the correct display in iOS 4-7.
- */
-
-audio:not([controls]) {
-  display: none;
-  height: 0;
-}
-
-/**
- * Add the correct vertical alignment in Chrome, Firefox, and Opera.
- */
-
-progress {
-  vertical-align: baseline;
-}
-
-/**
- * Add the correct display in IE 10-.
- * 1. Add the correct display in IE.
- */
-
-template, /* 1 */
-[hidden] {
-  display: none;
-}
-
-/* Links
-   ========================================================================== */
-
-/**
- * 1. Remove the gray background on active links in IE 10.
- * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
- */
-
-a {
-  background-color: transparent; /* 1 */
-  -webkit-text-decoration-skip: objects; /* 2 */
-}
-
-/**
- * Remove the outline on focused links when they are also active or hovered
- * in all browsers (opinionated).
- */
-
-a:active,
-a:hover {
-  outline-width: 0;
-}
-
-/* Text-level semantics
-   ========================================================================== */
-
-/**
- * 1. Remove the bottom border in Firefox 39-.
- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
- */
-
-abbr[title] {
-  border-bottom: none; /* 1 */
-  text-decoration: underline; /* 2 */
-  text-decoration: underline dotted; /* 2 */
-}
-
-/**
- * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
- */
-
-b,
-strong {
-  font-weight: inherit;
-}
-
-/**
- * Add the correct font weight in Chrome, Edge, and Safari.
- */
-
-b,
-strong {
-  font-weight: bolder;
-}
-
-/**
- * Add the correct font style in Android 4.3-.
- */
-
-dfn {
-  font-style: italic;
-}
-
-/**
- * Correct the font size and margin on `h1` elements within `section` and
- * `article` contexts in Chrome, Firefox, and Safari.
- */
-
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
-}
-
-/**
- * Add the correct background and color in IE 9-.
- */
-
-mark {
-  background-color: #ffd700;
-  color: #000;
-}
-
-/**
- * Add the correct font size in all browsers.
- */
-
-small {
-  font-size: 80%;
-}
-
-/**
- * Prevent `sub` and `sup` elements from affecting the line height in
- * all browsers.
- */
-
-sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-
-sub {
-  bottom: -0.25em;
-}
-
-sup {
-  top: -0.5em;
-}
-
-/* Embedded content
-   ========================================================================== */
-
-/**
- * Remove the border on images inside links in IE 10-.
- */
-
-img {
-  border-style: none;
-}
-
-/**
- * Hide the overflow in IE.
- */
-
-svg:not(:root) {
-  overflow: hidden;
-}
-
-/* Grouping content
-   ========================================================================== */
-
-/**
- * 1. Correct the inheritance and scaling of font size in all browsers.
- * 2. Correct the odd `em` font sizing in all browsers.
- */
-
-code,
-kbd,
-pre,
-samp {
-  font-family: monospace, monospace; /* 1 */
-  font-size: 1em; /* 2 */
-}
-
-/**
- * Add the correct margin in IE 8.
- */
-
-figure {
-  margin: 1em 40px;
-}
-
-/**
- * 1. Add the correct box sizing in Firefox.
- * 2. Show the overflow in Edge and IE.
- */
-
-hr {
-  box-sizing: content-box; /* 1 */
-  height: 0; /* 1 */
-  overflow: visible; /* 2 */
-}
-
-/* Forms
-   ========================================================================== */
-
-/**
- * 1. Change font properties to `inherit` in all browsers (opinionated).
- * 2. Remove the margin in Firefox and Safari.
- */
-
-button,
-input,
-optgroup,
-select,
-textarea {
-  font: inherit; /* 1 */
-  margin: 0; /* 2 */
-}
-
-/**
- * Restore the font weight unset by the previous rule.
- */
-
-optgroup {
-  font-weight: bold;
-}
-
-/**
- * Show the overflow in IE.
- * 1. Show the overflow in Edge.
- */
-
-button,
-input { /* 1 */
-  overflow: visible;
-}
-
-/**
- * Remove the inheritance of text transform in Edge, Firefox, and IE.
- * 1. Remove the inheritance of text transform in Firefox.
- */
-
-button,
-select { /* 1 */
-  text-transform: none;
-}
-
-/**
- * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
- *    controls in Android 4.
- * 2. Correct the inability to style clickable types in iOS and Safari.
- */
-
-button,
-html [type="button"], /* 1 */
-[type="reset"],
-[type="submit"] {
-  -webkit-appearance: button; /* 2 */
-}
-
-/**
- * Remove the inner border and padding in Firefox.
- */
-
-button::-moz-focus-inner,
-[type="button"]::-moz-focus-inner,
-[type="reset"]::-moz-focus-inner,
-[type="submit"]::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-
-/**
- * Restore the focus styles unset by the previous rule.
- */
-
-button:-moz-focusring,
-[type="button"]:-moz-focusring,
-[type="reset"]:-moz-focusring,
-[type="submit"]:-moz-focusring {
-  outline: 1px dotted ButtonText;
-}
-
-/**
- * Change the border, margin, and padding in all browsers (opinionated).
- */
-
-fieldset {
-  border: 1px solid #c0c0c0;
-  margin: 0 2px;
-  padding: 0.35em 0.625em 0.75em;
-}
-
-/**
- * 1. Correct the text wrapping in Edge and IE.
- * 2. Correct the color inheritance from `fieldset` elements in IE.
- * 3. Remove the padding so developers are not caught out when they zero out
- *    `fieldset` elements in all browsers.
- */
-
-legend {
-  box-sizing: border-box; /* 1 */
-  color: inherit; /* 2 */
-  display: table; /* 1 */
-  max-width: 100%; /* 1 */
-  padding: 0; /* 3 */
-  white-space: normal; /* 1 */
-}
-
-/**
- * Remove the default vertical scrollbar in IE.
- */
-
-textarea {
-  overflow: auto;
-}
-
-/**
- * 1. Add the correct box sizing in IE 10-.
- * 2. Remove the padding in IE 10-.
- */
-
-[type="checkbox"],
-[type="radio"] {
-  box-sizing: border-box; /* 1 */
-  padding: 0; /* 2 */
-}
-
-/**
- * Correct the cursor style of increment and decrement buttons in Chrome.
- */
-
-[type="number"]::-webkit-inner-spin-button,
-[type="number"]::-webkit-outer-spin-button {
-  height: auto;
-}
-
-/**
- * 1. Correct the odd appearance in Chrome and Safari.
- * 2. Correct the outline style in Safari.
- */
-
-[type="search"] {
-  -webkit-appearance: textfield; /* 1 */
-  outline-offset: -2px; /* 2 */
-}
-
-/**
- * Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
- */
-
-[type="search"]::-webkit-search-cancel-button,
-[type="search"]::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-
-/**
- * Correct the text style of placeholders in Chrome, Edge, and Safari.
- */
-
-::-webkit-input-placeholder {
-  color: inherit;
-  opacity: 0.54;
-}
-
-/**
- * 1. Correct the inability to style clickable types in iOS and Safari.
- * 2. Change font properties to `inherit` in Safari.
- */
-
-::-webkit-file-upload-button {
-  -webkit-appearance: button; /* 1 */
-  font: inherit; /* 2 */
-}
diff --git a/src/css/imports/_reset.css b/src/css/imports/_reset.css
new file mode 100755
index 0000000..d0a1f31
--- /dev/null
+++ b/src/css/imports/_reset.css
@@ -0,0 +1,67 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+
+input, textarea {
+	font-size: 1rem;
+	border: none;
+	font-family: inherit;
+	border: 0;
+	margin: 0;
+}
+
+button {
+	font-family: inherit;
+	border: 0;
+	margin: 0;
+	cursor: pointer;
+}
+
+a {
+	color: inherit;
+}
diff --git a/src/css/imports/_spacing.css b/src/css/imports/_spacing.css
index 8057126..41d4118 100755
--- a/src/css/imports/_spacing.css
+++ b/src/css/imports/_spacing.css
@@ -46,7 +46,6 @@
 
 */
 
-
 .pa0 { padding: var(--spacing-none); }
 .pa1 { padding: var(--spacing-extra-small); }
 .pa2 { padding: var(--spacing-small); }
@@ -277,6 +276,10 @@
   margin-right: var(--spacing-extra-extra-extra-large);
 }
 
+.mhn1 { margin-left: -.25rem; margin-right: -.25rem; }
+.mhn2 { margin-left: -.5rem; margin-right: -.5rem; }
+.mhn3 { margin-left: -1rem; margin-right: -1rem; }
+
 @media (--breakpoint-not-small) {
   .pa0-ns  {  padding: var(--spacing-none); }
   .pa1-ns {  padding: var(--spacing-extra-small); }
@@ -499,6 +502,10 @@
     margin-right: var(--spacing-extra-extra-extra-large);
   }
 
+  .mhn1-ns { margin-left: -.25rem; margin-right: -.25rem; }
+  .mhn2-ns { margin-left: -.5rem; margin-right: -.5rem; }
+  .mhn3-ns { margin-left: -1rem; margin-right: -1rem; }
+
 }
 
 @media (--breakpoint-medium) {
@@ -724,6 +731,10 @@
     margin-right: var(--spacing-extra-extra-extra-large);
   }
 
+  .mhn1-m { margin-left: -.25rem; margin-right: -.25rem; }
+  .mhn2-m { margin-left: -.5rem; margin-right: -.5rem; }
+  .mhn3-m { margin-left: -1rem; margin-right: -1rem; }
+
 }
 
 @media (--breakpoint-large) {
@@ -948,5 +959,8 @@
     margin-left: var(--spacing-extra-extra-extra-large);
     margin-right: var(--spacing-extra-extra-extra-large);
   }
-}
 
+  .mhn1-l { margin-left: -.25rem; margin-right: -.25rem; }
+  .mhn2-l { margin-left: -.5rem; margin-right: -.5rem; }
+  .mhn3-l { margin-left: -1rem; margin-right: -1rem; }
+}
diff --git a/src/css/imports/_styles.css b/src/css/imports/_styles.css
index 56beaae..1b6eca0 100755
--- a/src/css/imports/_styles.css
+++ b/src/css/imports/_styles.css
@@ -6,3 +6,6 @@
 
 */
 
+::selection {
+  background-color: var(--highlight);
+}
diff --git a/src/css/imports/_svg.css b/src/css/imports/_svg.css
new file mode 100644
index 0000000..165b5e9
--- /dev/null
+++ b/src/css/imports/_svg.css
@@ -0,0 +1,7 @@
+svg {
+  fill: currentColor;
+  fill-rule:evenodd;
+  clip-rule:evenodd;
+  max-width: 100%;
+  max-height: 100%;
+}
diff --git a/src/css/imports/_type-scale.css b/src/css/imports/_type-scale.css
index 31f1018..dab4aa6 100755
--- a/src/css/imports/_type-scale.css
+++ b/src/css/imports/_type-scale.css
@@ -27,6 +27,25 @@
  * so be careful using them on smaller screens.
  * */
 
+html {
+  font-size: 18px;
+  @media (--breakpoint-medium) {
+    font-size: 20px;
+  }
+  @media (--breakpoint-large) {
+    font-size: 22px;
+  }
+}
+
+
+body {
+  font-size: 1rem;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background-color: var(--white);
+ }
+
 .f-6,
 .f-headline {
   font-size: 6rem;
diff --git a/src/css/imports/_typography.css b/src/css/imports/_typography.css
index 4a41038..4d6fecc 100755
--- a/src/css/imports/_typography.css
+++ b/src/css/imports/_typography.css
@@ -10,7 +10,10 @@
 
 */
 
-
+p {
+  margin-bottom: 1rem;
+  max-width: 32rem;
+}
 
 /* Measure is limited to ~66 characters */
 .measure {
@@ -24,7 +27,7 @@
 
 /* Measure is limited to ~45 characters */
 .measure-narrow {
-  max-width: 20em;
+  max-width: 25em;
 }
 
 /* Book paragraph style - paragraphs are indented with no vertical spacing. */
diff --git a/src/css/imports/_utilities.css b/src/css/imports/_utilities.css
index 73c6b5d..01da910 100755
--- a/src/css/imports/_utilities.css
+++ b/src/css/imports/_utilities.css
@@ -58,3 +58,24 @@
   margin-right: auto;
   margin-left: auto;
 }
+
+.fade-bottom-light {
+  position: relative;
+}
+
+.fade-bottom-light:after {
+
+    content: "";
+    position: absolute;
+    z-index: 1;
+    bottom: 0;
+    left: 0;
+    pointer-events: none;
+    background-image: linear-gradient(to bottom, color(#F0F2F5 alpha(-100%)), var(--white) 90%);
+    width: 100%;
+    height: 3rem;
+  }
+
+.divider {
+  box-shadow: inset 0 -4px 0 var(--grey-1);
+}
diff --git a/src/css/imports/_variables.css b/src/css/imports/_variables.css
new file mode 100644
index 0000000..f75395f
--- /dev/null
+++ b/src/css/imports/_variables.css
@@ -0,0 +1,3 @@
+:root {
+  --hover-transition: all 150ms ease;
+}
diff --git a/src/css/main.css b/src/css/main.css
index 98cfc95..c9a363a 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -12,7 +12,7 @@
  *    TABLE OF CONTENTS
  *
  *    1. External Library Includes
- *       - Normalize.css | http://normalize.css.github.io
+ *       - Reset.css | http://meyerweb.com/eric/tools/css/reset/
  *    2. Tachyons Modules
  *    3. Variables
  *       - Media Queries
@@ -25,7 +25,7 @@
 
 
 /* External Library Includes */
-@import './imports/_normalize';
+@import './imports/_reset';
 
 /* Modules */
 @import './imports/_box-sizing';
@@ -34,10 +34,10 @@
 @import './imports/_background-position';
 @import './imports/_outlines';
 @import './imports/_borders';
-@import './imports/_border-colors';
 @import './imports/_border-radius';
 @import './imports/_border-style';
 @import './imports/_border-widths';
+@import './imports/_border-colors';
 @import './imports/_box-shadow';
 @import './imports/_code';
 @import './imports/_coordinates';
@@ -59,10 +59,7 @@
 @import './imports/_overflow';
 @import './imports/_position';
 @import './imports/_opacity';
-@import './imports/_skins';
-@import './imports/_skins-pseudo';
 @import './imports/_spacing';
-@import './imports/_tables';
 @import './imports/_text-decoration';
 @import './imports/_text-align';
 @import './imports/_text-transform';
@@ -75,15 +72,19 @@
 @import './imports/_hovers';
 @import './imports/_z-index';
 @import './imports/_styles';
+@import './imports/_buttons';
+@import './imports/_svg';
+@import './imports/_cms';
 
 /* Variables */
 /* Importing here will allow you to override any variables in the modules */
 @import './imports/_colors';
 @import './imports/_media-queries';
+@import './imports/_variables';
 
 /* Debugging */
 @import './imports/_debug-children';
 @import './imports/_debug-grid';
 
 /* Uncomment out the line below to help debug layout issues */
-/* @import './imports/_debug'; */
+/*@import './imports/_debug';*/
diff --git a/src/site/static/img/icons/svg.html b/src/site/static/img/icons/svg.html
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/site/static/img/icons/svg.html