From 811ab63f1ea04e68016eb3ebd2f5d9f5f7ea9ed2 Mon Sep 17 00:00:00 2001
From: Lisa P <mail@lislis.de>
Date: Wed, 21 Oct 2015 14:28:48 +0200
Subject: [PATCH] start styling pro landing page

---
 app/styles/app.scss                  |  1 +
 app/styles/app/layouts/home-pro.sass | 66 ++++++++++++++++++++++++++++
 app/templates/home-pro.hbs           | 36 +++++++--------
 3 files changed, 85 insertions(+), 18 deletions(-)
 create mode 100644 app/styles/app/layouts/home-pro.sass

diff --git a/app/styles/app.scss b/app/styles/app.scss
index 454f557d..21f6ae5c 100644
--- a/app/styles/app.scss
+++ b/app/styles/app.scss
@@ -65,4 +65,5 @@
 @import "app/layouts/first-sync";
 @import "app/layouts/missing-notice";
 @import "app/layouts/settings";
+@import "app/layouts/home-pro";
 
diff --git a/app/styles/app/layouts/home-pro.sass b/app/styles/app/layouts/home-pro.sass
new file mode 100644
index 00000000..7724b9e7
--- /dev/null
+++ b/app/styles/app/layouts/home-pro.sass
@@ -0,0 +1,66 @@
+.inner
+  margin: auto
+  max-width: 1024px
+  padding: 0 $column-gutter/2
+
+
+.h1
+  font-size: 50px
+  color: #408692 !important
+  font-weight: 300
+  margin: 0
+
+%h2
+  font-size: 40px
+  font-weight: 300
+  line-height: 1.2
+
+.h2--green
+  @extend %h2
+  color: #39A85B
+
+.h2--teal
+  @extend %h2
+  color: #408692
+
+.h3
+  font-size: 22px
+  font-weight: 300
+
+.text-big
+  font-size: 26px
+  font-weight: 300
+  line-height: 1.45
+
+.text-small
+  font-size: 18px
+
+.hero-button
+  display: inline-block
+  background:
+    color: #39A85B
+    image: inline-image('landing-page/sign-in-mascot.svg')
+    size: 1.7em
+    position: 0.8em center
+    repeat: no-repeat
+  padding: 0.9em 1em 0.9em 3em
+  margin: 0 auto
+  color: white
+  border-radius: 4px
+  font-size: 27px
+  text-decoration: none
+  &:hover
+    color: white
+    background-color: darken(#39A85B, 10)
+
+
+.section--grey
+  background-color: #F6F6F6
+
+.section--white
+  background-color: white
+
+
+.list--check
+  li
+    @extend .text-big
\ No newline at end of file
diff --git a/app/templates/home-pro.hbs b/app/templates/home-pro.hbs
index 4fff878f..578eb4f3 100644
--- a/app/templates/home-pro.hbs
+++ b/app/templates/home-pro.hbs
@@ -1,9 +1,9 @@
-<div id="landing" class="landing">
+<div id="landing" class="landing wrapper">
   <section class="section--grey">
     <div class="inner">
       <div class="section-text">
-        <h1>Builds apps <br class="br-small"> with confidence</h1>
-        <p>Focus on writing code. Let Travis CI take care<br class="br-small"> of running your tests and deploying your apps.</p>
+        <h1 class="h1">Builds apps <br class="br-small"> with confidence</h1>
+        <p class="text-big">Focus on writing code. Let Travis CI take care<br class="br-small"> of running your tests and deploying your apps.</p>
         <a href="#" class="hero-button" title="Start your free trial">Start your free trial</a>
       </div>
       <div class="section-image">
@@ -13,8 +13,8 @@
   </section>
   <section class="section--white">
     <div class="inner">
-      <h3>Some pretty awesome companies and projects are a few of our users</h3>
-      <ul>
+      <h3 class="h3">Some pretty awesome companies and projects are a few of our users</h3>
+      <ul class="list--logos">
         <li><a href="#">zendesk</a></li>
         <li><a href="#">heroku</a></li>
         <li><a href="#">Engine Yard</a></li>
@@ -29,29 +29,29 @@
         <ul>
           <li>
             <span>GH</span>
-            <h3>Get set up in seconds</h3>
-            <p>Login with GitHub, tell Travis CI to test a project, and then push to GitHub. Could it be any simpler!</p>
+            <h3 class="h3">Get set up in seconds</h3>
+            <p class="text-small">Login with GitHub, tell Travis CI to test a project, and then push to GitHub. Could it be any simpler!</p>
           </li>
           <li>
             <span>DB</span>
-            <h3>Supports your platform</h3>
-            <p>Many databases and services are pre-installed and can be enabled in your build configuration.</p>
+            <h3 class="h3">Supports your platform</h3>
+            <p class="text-small">Many databases and services are pre-installed and can be enabled in your build configuration.</p>
           </li>
           <li>
             <span>PR</span>
-            <h3>Test your pull requests</h3>
-            <p>Make sure every Pull Request to your project is tested before it's merged.</p>
+            <h3 class="h3">Test your pull requests</h3>
+            <p class="text-small">Make sure every Pull Request to your project is tested before it's merged.</p>
           </li>
           <li>
             <span>HEROKU</span>
-            <h3>Deploy anywhere</h3>
-            <p>Updating staging or production as soon as your tests pass has never been easier!</p>
+            <h3 class="h3">Deploy anywhere</h3>
+            <p class="text-small">Updating staging or production as soon as your tests pass has never been easier!</p>
           </li>
         </ul>
       </div>
       <div class="section-text">
-        <h2>Features created to help your projects and teams</h2>
-        <ul>
+        <h2 class="h2--green">Features created to help your projects and teams</h2>
+        <ul class="list--check">
           <li>Watch your tests as they run</li>
           <li>Keep your config with your code</li>
           <li>Slack, HipChat, Emails and more</li>
@@ -65,8 +65,8 @@
   </section>
   <section class="section--white">
     <div class="inner">
-      <h3>Supported languages</h3>
-      <p>These are just a few of our most popular languages, check out the full list <a href="#">in our docs</a>.</p>
+      <h3 class="h3">Supported languages</h3>
+      <p class="text-small">These are just a few of our most popular languages, check out the full list <a href="#">in our docs</a>.</p>
       <ul>
         <li><span></span>Clojure</li>
         <li><span></span>Node</li>
@@ -84,7 +84,7 @@
   </section>
   <section class="section--grey">
     <div class="inner">
-      <h2>Interested in running your <br class="br-small"> private projects with Travis CI?</h2>
+      <h2 class="h2--teal">Interested in running your <br class="br-small"> private projects with Travis CI?</h2>
       <a href="#">Start your free trial</a>
     </div>
   </section>