second iteration pricing styles

2015-10-29 16:58:04 +01:00 · 2015-10-29 16:58:04 +01:00 · 6a8911b36e
commit 6a8911b36e
parent 8f7ec796af
2 changed files with 115 additions and 45 deletions
--- a/app/styles/app/layouts/home-pro.sass
+++ b/app/styles/app/layouts/home-pro.sass
@ -1,5 +1,10 @@
 .landing-pro

+  $teal: #40A3AD
+  $green: #39A85B
+  $red: #DB4242
+  $yellow: #E5C025
+
  @mixin linkStyle
    a
      text-decoration: none
@ -45,22 +50,21 @@

  %h2
    margin: 0 0 .5em
-    font-size: 32px
+    font-size: 36px
    font-weight: 300
    line-height: 1.3

  .h2--green
    @extend %h2
-    color: #39A85B
+    color: $green

  .h2--teal
    @extend %h2
-    margin-bottom: 1em
-    color: #408692
+    color: $teal

  %h3
    margin: .5em 0
-    font-size: 20px
+    font-size: 22px
    font-weight: 300

  .h3
@ -68,9 +72,25 @@

  .h3--plans
    @extend %h3
-    font-size: 26px
+    font-size: 28px
    text-align: center

+  .h3--teal
+    @extend %h3
+    color: $teal
+
+  .h3--red
+    @extend %h3
+    color: $red
+
+  .h3--green
+    @extend %h3
+    color: $green
+
+  .h3--yellow
+    @extend %h3
+    color: $yellow
+
  .text-big
    @include linkStyle
    font-size: 20px
@ -80,6 +100,7 @@
  .text-small
    @include linkStyle
    margin: 0 0 2.5em
+    font-size: 16px

  .landing-button
    display: inline-block
@ -89,7 +110,7 @@
    border-radius: 2px
    font-size: 27px
    text-decoration: none
-    background-color: #39A85B
+    background-color: $green
    &:hover
      color: white
      background-color: #73c78d
@ -203,7 +224,7 @@
        margin-right: .3em
        vertical-align: middle
        background:
-          image: inline-image('line-icons/icon-passed.svg')
+          image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGcgaWQ9IlBhc3NlZCI+Cgk8Zz4KCQk8cGF0aCBmaWxsPSIjMzlBODVCIiBkPSJNOS42LDE0LjRjLTAuMSwwLTAuMy0wLjEtMC40LTAuMWwtNC0zLjNjLTAuMy0wLjItMC4zLTAuNi0wLjEtMC45UzUuOCw5LjgsNi4xLDEwbDMuNCwyLjhsNC45LTcuNQoJCQlDMTQuNiw1LDE1LDQuOSwxNS4zLDUuMWMwLjMsMC4yLDAuNCwwLjYsMC4yLDAuOWwtNS4zLDguMUMxMC4xLDE0LjMsOS45LDE0LjQsOS42LDE0LjRDOS43LDE0LjQsOS43LDE0LjQsOS42LDE0LjR6Ii8+Cgk8L2c+CjwvZz4KPC9zdmc+")

  .list--features
    @extend %list
@ -235,15 +256,64 @@
    display: flex
    justify-content: space-between
    margin: 5em 0
-    > li
-      flex: 0 0 230px
-      padding: 1em 2em 3em
-      border: 1px solid
+    
+  [class^="plan--"]
+    flex: 0 0 230px
+    padding: .5em 1.5em 3em
+    border:
+      width: 2px
+      color: #E8E8E8
+      style: solid

    .list--check
      margin: 3em 0
+      font-size: 16px
      li
-        line-height: 1.45
+        line-height: 2
+        &[data-jobs]:before
+          content: attr(data-jobs)
+          width: 1em
+          background-image: none
+          line-height: 1
+          font-weight: 600
+          text-align: center
+          font-size: 18px
+
+
+  =colorPlans($color, $hover-color, $bg: true)
+    border-top-color: $color
+    .plan-title
+      color: $color
+    .plan-cta-btn
+      border: $color solid 1px
+      @if $bg
+        background-color: $color
+        color: white
+      @else
+        color: $color
+        background-color: white
+      &:hover
+        background-color: $hover-color
+    .list--check li:before
+      color: $color
+
+
+  .plan--red
+    +colorPlans($red, #FCF0F0, false)
+    .list--check li:before
+      background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGcgaWQ9IlBhc3NlZCI+Cgk8Zz4KCQk8cGF0aCBmaWxsPSIjREI0MjQyIiBkPSJNOS42LDE0LjRjLTAuMSwwLTAuMy0wLjEtMC40LTAuMWwtNC0zLjNjLTAuMy0wLjItMC4zLTAuNi0wLjEtMC45UzUuOCw5LjgsNi4xLDEwbDMuNCwyLjhsNC45LTcuNQoJCQlDMTQuNiw1LDE1LDQuOSwxNS4zLDUuMWMwLjMsMC4yLDAuNCwwLjYsMC4yLDAuOWwtNS4zLDguMUMxMC4xLDE0LjMsOS45LDE0LjQsOS42LDE0LjRDOS43LDE0LjQsOS43LDE0LjQsOS42LDE0LjR6Ii8+Cgk8L2c+CjwvZz4KPC9zdmc+")
+  .plan--green
+    +colorPlans($green, #73c78d)
+    .list--check li:before
+      background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGcgaWQ9IlBhc3NlZCI+Cgk8Zz4KCQk8cGF0aCBmaWxsPSIjMzlBODVCIiBkPSJNOS42LDE0LjRjLTAuMSwwLTAuMy0wLjEtMC40LTAuMWwtNC0zLjNjLTAuMy0wLjItMC4zLTAuNi0wLjEtMC45UzUuOCw5LjgsNi4xLDEwbDMuNCwyLjhsNC45LTcuNQoJCQlDMTQuNiw1LDE1LDQuOSwxNS4zLDUuMWMwLjMsMC4yLDAuNCwwLjYsMC4yLDAuOWwtNS4zLDguMUMxMC4xLDE0LjMsOS45LDE0LjQsOS42LDE0LjRDOS43LDE0LjQsOS43LDE0LjQsOS42LDE0LjR6Ii8+Cgk8L2c+CjwvZz4KPC9zdmc+")
+  .plan--teal
+    +colorPlans($teal, #8CC8CE)
+    .list--check li:before
+      background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGcgaWQ9IlBhc3NlZCI+Cgk8Zz4KCQk8cGF0aCBmaWxsPSIjNDBBM0FEIiBkPSJNOS42LDE0LjRjLTAuMSwwLTAuMy0wLjEtMC40LTAuMWwtNC0zLjNjLTAuMy0wLjItMC4zLTAuNi0wLjEtMC45UzUuOCw5LjgsNi4xLDEwbDMuNCwyLjhsNC45LTcuNQoJCQlDMTQuNiw1LDE1LDQuOSwxNS4zLDUuMWMwLjMsMC4yLDAuNCwwLjYsMC4yLDAuOWwtNS4zLDguMUMxMC4xLDE0LjMsOS45LDE0LjQsOS42LDE0LjRDOS43LDE0LjQsOS43LDE0LjQsOS42LDE0LjR6Ii8+Cgk8L2c+CjwvZz4KPC9zdmc+")
+  .plan--yellow
+    +colorPlans($yellow, #EFD97C)
+    .list--check li:before
+      background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGcgaWQ9IlBhc3NlZCI+Cgk8Zz4KCQk8cGF0aCBmaWxsPSIjRTVDMDI1IiBkPSJNOS42LDE0LjRjLTAuMSwwLTAuMy0wLjEtMC40LTAuMWwtNC0zLjNjLTAuMy0wLjItMC4zLTAuNi0wLjEtMC45UzUuOCw5LjgsNi4xLDEwbDMuNCwyLjhsNC45LTcuNQoJCQlDMTQuNiw1LDE1LDQuOSwxNS4zLDUuMWMwLjMsMC4yLDAuNCwwLjYsMC4yLDAuOWwtNS4zLDguMUMxMC4xLDE0LjMsOS45LDE0LjQsOS42LDE0LjRDOS43LDE0LjQsOS43LDE0LjQsOS42LDE0LjR6Ii8+Cgk8L2c+CjwvZz4KPC9zdmc+")


  .plan-title
@ -263,11 +333,11 @@

  .plan-cta-btn
    display: inline-block
-    padding: 0.7em
+    padding: 0.4em 0.9em
    border-radius: 2px
    font-size: 22px
    text-decoration: none
-    border: solid 1px black
+    transition: border-color 200ms ease


  .section--enterprise
@ -295,6 +365,6 @@
      flex: 0 0 48%
      padding: 1em 1.5em 0
      margin-bottom: 2em
-      border: solid 1px lightgrey
+      border: solid 1px #E8E8E8


--- a/app/templates/pricing.hbs
+++ b/app/templates/pricing.hbs
@ -8,11 +8,11 @@
        </p>
      </header>
      <ul class="list--plans">
-        <li>
+        <li class="plan--red">
          <h2 class="plan-title">Open Source</h2>
          <div class="plan-pricing">
            <div class="price">Free</div>
-            <div class="timefrane">always</div>
+            <div class="timemrane">always</div>
          </div>
          <ul class="list--check">
            <li>Fair use</li>
@ -24,14 +24,14 @@
            <a href="https://travis-ci.org" class="plan-cta-btn">Get Started</a>
          </div>
        </li>
-        <li>
+        <li class="plan--green">
          <h2 class="plan-title">Startup</h2>
          <div class="plan-pricing">
            <div class="price">$129</div>
-            <div class="timefrane">per month</div>
+            <div class="timeframe">per month</div>
          </div>
          <ul class="list--check">
-            <li data-jobs="2"><span aria-hidden="false" class="is-hidden">2</span>Concurrent jobs</li>
+            <li data-jobs="2"><span aria-hidden="false" class="hidden">2</span>Concurrent jobs</li>
            <li>Ulimited build minutes</li>
            <li>Unlimited repositories</li>
            <li>Unlimited collaborators</li>
@ -40,14 +40,14 @@
            <a href="https://travis-ci.com/signin" class="plan-cta-btn">Start Trial</a>
          </div>
        </li>
-        <li>
+        <li class="plan--teal">
          <h2 class="plan-title">Small Business</h2>
          <div class="plan-pricing">
            <div class="price">$249</div>
-            <div class="timefrane">per month</div>
+            <div class="timeframe">per month</div>
          </div>
          <ul class="list--check">
-            <li data-jobs="5"><span aria-hidden="false" class="is-hidden">5</span>Concurrent jobs</li>
+            <li data-jobs="5"><span aria-hidden="false" class="hidden">5</span>Concurrent jobs</li>
            <li>Ulimited build minutes</li>
            <li>Unlimited repositories</li>
            <li>Unlimited collaborators</li>
@ -56,14 +56,14 @@
            <a href="https://travis-ci.com/signin" class="plan-cta-btn">Start Trial</a>
          </div>
        </li>
-        <li>
+        <li class="plan--yellow">
          <h2 class="plan-title">Premium</h2>
          <div class="plan-pricing">
            <div class="price">$489</div>
-            <div class="timefrane">per month</div>
+            <div class="timeframe">per month</div>
          </div>
          <ul class="list--check">
-            <li data-jobs="10"><span aria-hidden="false" class="is-hidden">10</span>Concurrent jobs</li>
+            <li data-jobs="10"><span aria-hidden="false" class="hidden">10</span>Concurrent jobs</li>
            <li>Ulimited build minutes</li>
            <li>Unlimited repositories</li>
            <li>Unlimited collaborators</li>
@ -94,39 +94,39 @@
      <h3 class="h3--plans">Frequently asked questions about Travis CI plans</h3>
      <ul class="list--faq">
        <li>
-          <h4 class="h3">What is a concurrent job?</h4>
+          <h4 class="h3--green">What is a concurrent job?</h4>
          <p class="text-small">Every commit triggers a single job by default. If two commits have been pushed on the Startup plan, they'll be run right away. Subsequent commits have to wait until the builds finished.</p>
        </li>
        <li>
-          <h4 class="h3">Are there any restrictions on build time?</h4>
-          <p class="text-small">A build has 120 minutes to run. Should your build take longer, you can split it up using a build matrix.</p>
-        </li>
-        <li>
-          <h4 class="h3">Can I cancel anytime?</h4>
-          <p class="text-small">Absolutely! Contact us and we'll make sure your subscription gets cancelled as you want.</p>
-        </li>
-        <li>
-          <h4 class="h3">Do the listed prices include VAT?</h4>
-          <p class="text-small">Prices listed are excluding VAT, which will be added depending on origin (Germany and Europe). Make sure to have your company's VAT ID ready when entering billing details to remove VAT!</p>
-        </li>
-        <li>
-          <h4 class="h3">What hardware are my tests running on?</h4>
+          <h4 class="h3--teal">What hardware are my tests running on?</h4>
          <p class="text-small">We use dedicated hardware to ensure full speed for your tests. You have 3GB of memory and up to 2 cores available. Your tests are running directly off SSDs with the most common databases optimized to run off RAM disks.</p>
        </li>
        <li>
-          <h4 class="h3">Can I pay anually?</h4>
+          <h4 class="h3--yellow">Are there any restrictions on build time?</h4>
+          <p class="text-small">A build has 120 minutes to run. Should your build take longer, you can split it up using a build matrix.</p>
+        </li>
+        <li>
+          <h4 class="h3--red">Can I pay anually?</h4>
          <p class="text-small">You most certainly can! When signing up for a subscription, simply select the annual option. You get 1 month for free &mdash; 12 months for the price of 11!</p>
        </li>
        <li>
-          <h4 class="h3">Am I able to upgrade my plan?</h4>
+          <h4 class="h3--teal">Can I cancel anytime?</h4>
+          <p class="text-small">Absolutely! Contact us and we'll make sure your subscription gets cancelled as you want.</p>
+        </li>
+        <li>
+          <h4 class="h3--green">Am I able to upgrade my plan?</h4>
          <p class="text-small">Yes, you can change your plan subscription at any time.</p>
        </li>
        <li>
-          <h4 class="h3">How does the trial work?</h4>
+          <h4 class="h3--red">Do the listed prices include VAT?</h4>
+          <p class="text-small">Prices listed are excluding VAT, which will be added depending on origin (Germany and Europe). Make sure to have your company's VAT ID ready when entering billing details to remove VAT!</p>
+        </li>
+        <li>
+          <h4 class="h3--yellow">How does the trial work?</h4>
          <p class="text-small">Your free trial includes 100 builds and starts as soon as you set up your first project and push a commit. The trial is limitedj to one concurrent build.</p>
        </li>
        <li>
-          <h4 class="h3">Do you have plans for student?</h4>
+          <h4 class="h3--teal">Do you have plans for student?</h4>
          <p class="text-small">We most certainly do! You can find all details on <a href="https://education.travis-ci.com">education.travis-ci.com</a></p>
        </li>
      </ul>