diff --git a/app/styles/app/layouts/home-pro.sass b/app/styles/app/layouts/home-pro.sass
index 75852450..e4bdead5 100644
--- a/app/styles/app/layouts/home-pro.sass
+++ b/app/styles/app/layouts/home-pro.sass
@@ -1,6 +1,11 @@
-.landing
- width: 100%
+.landing-pro
+ .wrapper
+ width: 100%
+ padding-bottom: 0
+ margin-bottom: 0
+ .landing-footer
+ margin-top: 0
.inner
margin: auto
@@ -28,6 +33,7 @@
color: #408692
.h3
+ margin: .5em 0
font-size: 22px
font-weight: 300
@@ -37,26 +43,35 @@
line-height: 1.55
.text-small
+ margin: 0
font-size: 18px
-.hero-button
+
+.landing-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
+ padding: 0.9em 1em
margin: 0 auto
color: white
border-radius: 2px
font-size: 27px
text-decoration: none
+ background-color: #39A85B
&:hover
color: white
background-color: #73c78d
+.hero-button
+ @extend .landing-button
+ padding: 0.9em 1em 0.9em 3em
+ background:
+ image: inline-image('landing-page/sign-in-mascot.svg')
+ size: 1.7em
+ position: 0.8em center
+ repeat: no-repeat
+
+.hero-computer
+ width: 100%
+ height: 100%
.section--grey
background-color: #F6F6F6
@@ -119,7 +134,7 @@
margin-right: .3em
vertical-align: middle
background:
- image: url(../images/line-icons/icon-passed.svg)
+ image: inline-image('line-icons/icon-passed.svg')
.list--features
@@ -145,15 +160,36 @@
position: center center
.customer-zendesk
- background-image: url(../images/pro-landing/customer-logos-zendesk.svg)
+ background-image: inline-image('pro-landing/customer-logos-zendesk.svg')
.customer-heroku
- background-image: url(../images/pro-landing/customer-logos-heroku.svg)
+ background-image: inline-image('pro-landing/customer-logos-heroku.svg')
.customer-engineyard
- background-image: url(../images/pro-landing/customer-logos-engineyard.svg)
+ background-image: inline-image('pro-landing/customer-logos-engineyard.svg')
.customer-bittorrent
- background-image: url(../images/pro-landing/customer-logos-bittorrent.svg)
+ background-image: inline-image('pro-landing/customer-logos-bittorrent.svg')
.customer-moz
- background-image: url(../images/pro-landing/customer-logos-moz.svg)
+ background-image: inline-image('pro-landing/customer-logos-moz.svg')
+
+
+ [class^="feature-"]
+ display: block
+ height: 2.5em
+ width: 2.5em
+ overflow: hidden
+ margin: auto
+ background:
+ repeat: no-repeat
+ size: 100%
+ position: center center
+
+ .feature-github
+ background-image: inline-image('pro-landing/feature-icon-github.svg')
+ .feature-db
+ background-image: inline-image('pro-landing/feature-icon-platform.svg')
+ .feature-pr
+ background-image: inline-image('pro-landing/feature-icon-pullrequests.svg')
+ .feature-heroku
+ background-image: inline-image('pro-landing/feature-icon-heroku.svg')
[class^="language-"]
@@ -167,27 +203,27 @@
position: center center
.language-clojure
- background-image: url(../images/pro-landing/lang-clojure.svg)
+ background-image: inline-image('pro-landing/lang-clojure.svg')
.language-node
- background-image: url(../images/pro-landing/lang-nodejs.svg)
+ background-image: inline-image('pro-landing/lang-nodejs.svg')
.language-php
- background-image: url(../images/pro-landing/lang-php.svg)
+ background-image: inline-image('pro-landing/lang-php.svg')
.language-xcode
- background-image: url(../images/pro-landing/lang-xcode.svg)
+ background-image: inline-image('pro-landing/lang-xcode.svg')
.language-ruby
- background-image: url(../images/pro-landing/lang-ruby.svg)
+ background-image: inline-image('pro-landing/lang-ruby.svg')
.language-python
- background-image: url(../images/pro-landing/lang-python.svg)
+ background-image: inline-image('pro-landing/lang-python.svg')
.language-java
- background-image: url(../images/pro-landing/lang-java.svg)
+ background-image: inline-image('pro-landing/lang-java.svg')
.language-erlang
- background-image: url(../images/pro-landing/lang-erlang.svg)
+ background-image: inline-image('pro-landing/lang-erlang.svg')
.language-go
- background-image: url(../images/pro-landing/lang-go.svg)
+ background-image: inline-image('pro-landing/lang-go.svg')
.language-scala
- background-image: url(../images/pro-landing/lang-scala.svg)
+ background-image: inline-image('pro-landing/lang-scala.svg')
.language-perl
- background-image: url(../images/pro-landing/lang-perl.svg)
+ background-image: inline-image('pro-landing/lang-perl.svg')
diff --git a/app/templates/home-pro.hbs b/app/templates/home-pro.hbs
index 9b3e89dc..13dc6fc6 100644
--- a/app/templates/home-pro.hbs
+++ b/app/templates/home-pro.hbs
@@ -1,4 +1,4 @@
-<div id="landing" class="landing landing-pro wrapper">
+<div id="landing" class="landing wrapper">
<section class="section--hero section--grey">
<div class="inner">
<div class="section-text">
@@ -7,7 +7,7 @@
<a href="#" class="hero-button" title="Start your free trial">Start your free trial</a>
</div>
<div class="section-image">
- computer
+ <img src="../images/pro-landing/hero-screen.svg" class="hero-computer" aria-hidden="true">
</div>
</div>
</section>
@@ -28,22 +28,22 @@
<div class="section-list section--center">
<ul class="list--features">
<li>
- <span>GH</span>
+ <span class="feature-github" aria-hidden="true"></span>
<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>
+ <span class="feature-db" aria-hidden="true"></span>
<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>
+ <span class="feature-pr" aria-hidden="true"></span>
<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>
+ <span class="feature-heroku" aria-hidden="true"></span>
<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>
@@ -85,7 +85,7 @@
<section class="section--grey section--center">
<div class="inner">
<h2 class="h2--teal">Interested in running your <br class="br-small"> private projects with Travis CI?</h2>
- <a href="#" class="hero-button">Start your free trial</a>
+ <a href="#" class="landing-button">Start your free trial</a>
</div>
</section>
</div>
\ No newline at end of file
diff --git a/app/templates/layouts/landing-page.hbs b/app/templates/layouts/landing-page.hbs
index d0ff4bd8..69757bde 100644
--- a/app/templates/layouts/landing-page.hbs
+++ b/app/templates/layouts/landing-page.hbs
@@ -6,6 +6,6 @@
{{yield}}
-<footer>
+<footer class="landing-footer">
{{render "footer"}}
</footer>
diff --git a/app/views/home-pro.coffee b/app/views/home-pro.coffee
index 06446f76..a55ab739 100644
--- a/app/views/home-pro.coffee
+++ b/app/views/home-pro.coffee
@@ -1,6 +1,8 @@
`import BasicView from 'travis/views/basic'`
View = BasicView.extend
+
+ classNames: ['landing-pro']
layoutName: 'layouts/landing-page'
`export default View`
diff --git a/public/images/pro-landing/feature-icon-github.svg b/public/images/pro-landing/feature-icon-github.svg
index e3d34a26..435a2afd 100644
--- a/public/images/pro-landing/feature-icon-github.svg
+++ b/public/images/pro-landing/feature-icon-github.svg
@@ -3,7 +3,7 @@
<svg version="1.1" id="github-icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 28 27.7" style="enable-background:new 0 0 28 27.7;" xml:space="preserve">
<style type="text/css">
- .st0{fill:#C7C8C9;}
+ .st0{fill:#97A1AA;}
</style>
<g id="circledgithub">
<path class="st0" d="M11.1,27.7c-0.1,0-0.1,0-0.2,0C4.6,26.3,0,20.5,0,14C0,6.3,6.3,0,14,0s14,6.3,14,14c0,6.2-4,11.6-9.9,13.4
diff --git a/public/images/pro-landing/feature-icon-heroku.svg b/public/images/pro-landing/feature-icon-heroku.svg
index 3baffa8d..c9c2c710 100644
--- a/public/images/pro-landing/feature-icon-heroku.svg
+++ b/public/images/pro-landing/feature-icon-heroku.svg
@@ -3,7 +3,7 @@
<svg version="1.1" id="heroku-icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 28 27.7" style="enable-background:new 0 0 28 27.7;" xml:space="preserve">
<style type="text/css">
- .st0{fill:#C7C8C9;}
+ .st0{fill:#9B8CBA;}
</style>
<g>
<g>
diff --git a/public/images/pro-landing/feature-icon-platform.svg b/public/images/pro-landing/feature-icon-platform.svg
index 3aa708e9..9ce0d5ba 100644
--- a/public/images/pro-landing/feature-icon-platform.svg
+++ b/public/images/pro-landing/feature-icon-platform.svg
@@ -3,7 +3,7 @@
<svg version="1.1" id="platform-icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 28 27.7" style="enable-background:new 0 0 28 27.7;" xml:space="preserve">
<style type="text/css">
- .st0{fill:#C7C8C9;}
+ .st0{fill:#ED8843;}
</style>
<g>
<path class="st0" d="M14.6,1L14.6,1c0.4,0,0.8,0.1,1.1,0.2l10.7,4.2l-11.3,5.1c-0.3,0.1-0.7,0.2-1.2,0.2c-0.4,0-0.8-0.1-1-0.2
diff --git a/public/images/pro-landing/feature-icon-pullrequests.svg b/public/images/pro-landing/feature-icon-pullrequests.svg
index 76a3ab89..3ca9b17e 100644
--- a/public/images/pro-landing/feature-icon-pullrequests.svg
+++ b/public/images/pro-landing/feature-icon-pullrequests.svg
@@ -4,7 +4,7 @@
y="0px" viewBox="0 0 28 27.7" style="enable-background:new 0 0 28 27.7;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;}
- .st1{fill:#C7C8C9;}
+ .st1{fill:#E5C025;}
</style>
<polygon class="st0" points="12.6,5.8 12.6,5.8 12.6,5.8 "/>
<circle class="st0" cx="21.2" cy="22.8" r="1.3"/>
diff --git a/public/images/pro-landing/hero-screen.svg b/public/images/pro-landing/hero-screen.svg
index c8f711b8..4bb7e1eb 100644
--- a/public/images/pro-landing/hero-screen.svg
+++ b/public/images/pro-landing/hero-screen.svg
@@ -1,5 +1,3 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 300 254.6" style="enable-background:new 0 0 300 254.6;" xml:space="preserve">
<style type="text/css">