Commit dd9d5a09 authored by Sean Packham's avatar Sean Packham

Home, Download pages

parent 35d8a6c4
......@@ -18,7 +18,7 @@ keys:
small:
name: Small
description: |
<div>
<div class="description">
For new teams or small communities
</div>
<a class="button red" href="https://cloud.rocket.chat/trial/small">Start Trial</a>
......@@ -35,7 +35,7 @@ small:
medium:
name: Medium
description: |
<div>
<div class="description">
For growing teams or communities with increased activity
</div>
<a class="button red" href="https://cloud.rocket.chat/trial/medium">Start Trial</a>
......@@ -52,7 +52,7 @@ medium:
large:
name: Large
description: |
<div>
<div class="description">
For active or large enterprises or communities
</div>
<a class="button red" href="https://cloud.rocket.chat/trial/large">Start Trial</a>
......
......@@ -14,7 +14,7 @@ keys:
basic:
name: Basic
description: |
<div>
<div class="description">
Get Basic support and have the Rocket.Chat experts on-hand in case of an emergency
</div>
<a class="button highlight" href="../contact/index.html#message">Contact Us</a>
......@@ -33,7 +33,7 @@ basic:
plus:
name: Plus
description: |
<div>
<div class="description">
For larger teams who need quicker responses and 24x7 phone support
</div>
<a class="button highlight" href="../contact/index.html#message">Contact Us</a>
......@@ -52,7 +52,7 @@ plus:
premium:
name: Premium
description: |
<div>
<div class="description">
For larger teams who need quicker responses and 24x7 phone support
</div>
<a class="button highlight" href="#">Contact Us</a>
......
......@@ -14,7 +14,7 @@
</head>
<body class="{{ page.class }}">
{{ content }}
{{ content }}
</body>
</html>
......@@ -3,70 +3,50 @@ layout: default
class: index
---
<div class="wrapper">
<div class="header-wrapper">
<header>
<a class="logo" href="{{ site.url }}">
<img src="{{ site.url }}/images/default/logo.svg" alt="Rocket.CHat">
</a>
<ul>
<li><a {% if page.class == 'download' %}class="active"{%endif%} href="{{ site.url }}/download/">Download</a></li>
<li><a {% if page.class == 'cloud' %}class="active"{%endif%} href="{{ site.url }}/cloud/">Cloud</a></li>
<li><a {% if page.class == 'community' %}class="active"{%endif%} href="{{ site.url }}/community/">Community</a></li>
<li><a {% if page.class == 'docs' %}class="active"{%endif%} href="https://docs.rocket.chat">Docs</a></li>
<li><a {% if page.class == 'blog' %}class="active"{%endif%} href="{{ site.url }}/blog/">Blog</a></li>
<li><a {% if page.class == 'contact' %}class="active"{%endif%} href="{{ site.url }}/contact">Contact</a></li>
</ul>
<div class="clear"></div>
</header>
<header>
<div class="wrapper">
<a class="logo" href="{{ site.url }}">
<img src="{{ site.url }}/images/default/logo.svg" alt="Rocket.CHat">
</a>
<ul>
<li><a {% if page.class == 'download' %}class="active"{%endif%} href="{{ site.url }}/download/">Download</a></li>
<li><a {% if page.class == 'cloud' %}class="active"{%endif%} href="{{ site.url }}/cloud/">Cloud</a></li>
<li><a {% if page.class == 'community' %}class="active"{%endif%} href="{{ site.url }}/community/">Community</a></li>
<li><a {% if page.class == 'docs' %}class="active"{%endif%} href="https://docs.rocket.chat">Docs</a></li>
<li><a {% if page.class == 'blog' %}class="active"{%endif%} href="{{ site.url }}/blog/">Blog</a></li>
<li><a {% if page.class == 'contact' %}class="active"{%endif%} href="{{ site.url }}/contact">Contact</a></li>
</ul>
<div class="clear"></div>
</div>
</header>
<div class="main">
{{ content }}
</div>
</div>
{{ content }}
<footer>
<div class="main">
<!-- <div class="social">
<div class="left">
<h4>Connect with Rocket.Chat</h4>
</div>
<div class="right">
<a target="_blank" href="https://github.com/RocketChat">GitHub</a>
<a target="_blank" href="https://www.facebook.com/RocketChat">Facebook</a>
<a target="_blank" href="https://twitter.com/RocketChat">Twitter</a>
</div>
<div class="clear">
</div>
</div> -->
<div class="links">
<ul>
<li><a href="{{ site.url }}/download/">Download</a></li>
<li><a href="{{ site.url }}/cloud/">Cloud</a></li>
<li><a href="https://rocket.chat/docs/">Docs</a></li>
</ul>
<ul>
<li><a href="{{ site.url }}/team/">Team</a></li>
<li><a href="https://rocketchat.recruitee.com/">Jobs</a></li>
<li><a href="{{ site.url }}/partners/">Partners</a></li>
</ul>
<ul>
<li><a href="{{ site.url }}/contact/">Contact</a></li>
<li><a href="{{ site.url }}/press/">Press</a></li>
<li><a href="{{ site.url }}/blog/">Blog</a></li>
</ul>
<ul>
<li><a href="https://shop.spreadshirt.com/rocketchat" target="_blank">Store</a></li>
<li><a href="https://www.stickermule.com/user/1070688638/stickers" target="_blank">Stickers</a></li>
</ul>
<ul>
<li><a href="{{ site.url }}/terms/">Terms of Service</a></li>
<li><a href="{{ site.url }}/privacy/">Privacy</a></li>
</ul>
</div>
<div class="wrapper">
<ul>
<li><a href="{{ site.url }}/download/">Download</a></li>
<li><a href="{{ site.url }}/cloud/">Cloud</a></li>
<li><a href="https://rocket.chat/docs/">Docs</a></li>
</ul>
<ul>
<li><a href="{{ site.url }}/team/">Team</a></li>
<li><a href="https://rocketchat.recruitee.com/">Jobs</a></li>
<li><a href="{{ site.url }}/partners/">Partners</a></li>
</ul>
<ul>
<li><a href="{{ site.url }}/contact/">Contact</a></li>
<li><a href="{{ site.url }}/press/">Press</a></li>
<li><a href="{{ site.url }}/blog/">Blog</a></li>
</ul>
<ul>
<li><a href="https://shop.spreadshirt.com/rocketchat" target="_blank">Store</a></li>
<li><a href="https://www.stickermule.com/user/1070688638/stickers" target="_blank">Stickers</a></li>
</ul>
<ul>
<li><a href="{{ site.url }}/terms/">Terms of Service</a></li>
<li><a href="{{ site.url }}/privacy/">Privacy</a></li>
</ul>
<div class="clear"></div>
</div>
</footer>
---
layout: default
class: index
---
<div class="wrapper">
<header>
<h2><a href="{{ site.url }}">{{ site.title }}</a></h2>
<ul>
<li><a {% if page.class == 'products' %}class="active"{%endif%} href="{{ site.url }}/product/solutions/">Solutions</a></li>
<li><a {% if page.class == 'support' %}class="active"{%endif%} href="{{ site.url }}/product/support/">Support</a></li>
<li><a {% if page.class == 'blog' %}class="active"{%endif%} href="{{ site.url }}/blog/">Blog</a></li>
<li><a {% if page.class == 'contact' %}class="active"{%endif%} href="{{ site.url }}/company/contact">Contact</a></li>
<li class="button"><a class="button highlight" href="{{ site.url }}/product/download/">Download</a></li>
</ul>
<div class="clear"></div>
</header>
<div class="main">
{{ content }}
</div>
</div>
<footer>
<div class="callout">
<div class="left">
<h4>Connect with Rocket.Chat</h4>
</div>
<div class="right">
<a href="#">GitHub Stars</a>
<a href="#">GitHub Forks</a>
<a href="#">Facebook</a>
<a href="#">Twitter</a>
<a href="#">LinkedIn</a>
</div>
<div class="clear">
</div>
</div>
<div class="links">
<ul>
<li><a href="{{ site.url }}/product/solutions/">Solutions</a></li>
<li><a href="{{ site.url }}/product/support">Support</a></li>
<li><a href="{{ site.url }}/product/solutions/#cloud">Hosting</a></li>
<li><a href="https://rocket.chat/docs/">Docs</a></li>
</ul>
<ul>
<li><a href="{{ site.url }}/product/compare/">Comparisons</a></li>
<li><a href="{{ site.url }}/company/customers/">Customers</a></li>
<li><a href="{{ site.url }}/company/partners/">Partners</a></li>
<li><a href="{{ site.url }}/blog/">Blog</a></li>
</ul>
<ul>
<li><a href="{{ site.url }}/company/contact/">Contact</a></li>
<li><a href="{{ site.url }}/company/press/">Press</a></li>
<li><a href="{{ site.url }}/company/team/">Team</a></li>
<li><a href="{{ site.url }}/company/jobs/">Jobs</a></li>
</ul>
<ul>
<li><a href="https://www.stickermule.com/user/1070688638/stickers" target="_blank">Stickers</a></li>
<li><a href="https://shop.spreadshirt.com/rocketchat" target="_blank">Store</a></li>
</ul>
<ul>
<li><a href="{{ site.url }}/terms/">Terms of Service</a></li>
<li><a href="{{ site.url }}/privacy/">Privacy</a></li>
</ul>
</div>
<div class="clear"></div>
</footer>
......@@ -12,7 +12,7 @@ body.contact {
label, input, textarea {
display: block;
margin-bottom: 5px;
font-size: $body-font-size;
font-size: $font-size;
}
label {
......
......@@ -2,17 +2,18 @@
body.download {
.hero {
background-color: #1e232a;
background-color: $color-dark;
text-align: center;
color: #fff;
padding-bottom: 0;
padding: 6em 0 0 ;
.main {
.wrapper {
padding-bottom: 20em;
background-image: url("images/download/devices.png");
background-repeat: no-repeat;
background-position: bottom;
background-size: contain;
margin-bottom: -12px;
}
h1 {
......@@ -21,10 +22,13 @@ body.download {
}
em {
margin-bottom: 1em;
margin-bottom: 2em;
display: block;
font-style: normal;
}
a.button {
display: none;
margin-bottom: 2em;
}
}
......@@ -49,15 +53,14 @@ body.download {
.desktop, .mobile {
display: block;
margin-bottom: 8em;
h2 {
margin-bottom: 40px;
margin-bottom: 3em;
text-align: center;
}
img {
width: 48px;
width: 44px;
}
a {
......@@ -89,24 +92,12 @@ body.download {
}
}
.server {
background-color: $cta-background;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
color: #929db3;
.main {
padding: 6em 2em;
}
h2, h3 {
font-size: 2em;
color: #fff;
}
h3 {
text-align: center;
color: #fff;
#server {
background-color: $color-dark;
color: #fff;
p {
color: #929db3;
}
.left {
......@@ -118,51 +109,56 @@ body.download {
background-color: #272b33;
color: #fff;
display: block;
padding: 10px 15px;
font-size: 16px;
margin-top: 25px;
padding: 0.75em 1em;
margin-top: 2em;
border: 1px solid #2f343d;
border-radius: 5px;
width: 370px;
max-width: 370px;
}
}
.right {
float: right;
width: 40%;
h2 {
text-align: center;
}
a, a:visited {
display: block;
color: #fff;
}
img {
width: 60px;
margin-bottom: 15px;
width: 50px;
margin-bottom: 1em;
}
ul {
margin-top: 2em;
list-style: none;
padding: 0;
}
li {
text-align: center;
float: left;
width: 33.3%;
padding-top: 15px;
padding-top: 1em;
}
}
}
#support {
margin-top: 6em;
.header {
text-align: center;
margin-bottom: 9em;
}
h2 {
font-size: 2.2em;
margin-bottom: 10px;
color: #000;
}
}
......
$focus-padding: 12em;
body.index {
.hero {
......@@ -8,97 +6,51 @@ body.index {
background-repeat: no-repeat;
background-size: contain;
background-position: bottom;
margin-bottom: 6em;
background-color: #1f2329;
padding: 4em 0 11em;
background-color: $color-dark;
padding: 4em 0 12em;
color: #fff;
.main {
max-width: $wrapper-width;
margin-bottom: 0;
}
h1, h2 {
letter-spacing: .01rem;
font-weight: 400;
font-style: normal;
}
h1 {
font-family: $ui-font-family;
font-size: 44px;
font-weight: 600;
line-height: 1.2em;
font-size: 2.5em;
margin-bottom: 2em;
color: #fff;
}
h2 {
font-size: 20px;
font-weight: 600;
color: #fff;
margin: 40px 0 10px 0;
margin: 2em 0 0;
}
p {
margin-top: 0;
padding-right: 15px;
color: #ccc;
}
.button {
margin-top: 12px;
margin-right: 5px;
}
.left {
width: 38%;
padding: 0
padding-bottom: 1em;
}
.right {
width: 62%;
padding: 0;
}
.solution {
margin: 20px 0 32px;
}
}
.focus {
max-width: $content-width;
margin: 0 auto;
padding: 0 0 $focus-padding;
h2 {
font-size: 32px;
}
p.highlight {
color: $highlight-color;
em {
color: $color-primary;
font-style: normal;
font-weight: 600;
}
img {
max-height: 400px;
}
.left, .right {
padding: 0 25px;
}
}
.community {
padding-bottom: 3em;
.left {
margin-top: 5em;
}
.right {
img {
margin-top: 2em;
height: inherit;
}
margin-top: 4em;
}
.github {
......@@ -109,15 +61,15 @@ body.index {
}
a, a:visited {
color: #000;
color: $color-dark;
}
a:hover {
color: $link-color;
color: $color-secondary;
}
svg {
fill: #222;
fill: $color-dark;
margin-bottom: -8px;
margin-right: 10px;
}
......@@ -137,12 +89,11 @@ body.index {
text-transform: uppercase;
font-weight: 800;
text-align: center;
font-size: 12px;
font-size: 0.75em;
.top {
padding-bottom: 0.75em;
margin-bottom: 0.75em;
border-bottom: 1px solid #fff;
}
span {
......@@ -155,10 +106,6 @@ body.index {
}
}
.features-wrapper {
background-color: #f7f8fa;
}
.features {
ul {
list-style: none;
......@@ -169,7 +116,11 @@ body.index {
li {
width: 50%;
float: left;
height: 32px;
height: 2em;
&:nth-child(4) {
float: right;
}
.img-wrapper {
display: inline-block;
......@@ -182,18 +133,14 @@ body.index {
}
}
li:nth-child(4) {
float: right;
}
.right {
margin-top: 2em;
margin-top: 4em;
}
}
.livechat {
padding-top: $focus-padding;
padding-bottom: 6em;
background-color: #f7f8fa;
padding-bottom: 0;
.left {
margin-top: 6em;
......@@ -205,27 +152,26 @@ body.index {
}
.translation {
padding-top: 6em;
background-color: #f7f8fa;
.right {
margin-top: 6em;
margin-top: 8em;
}
}
.apps-wrapper {
.apps {
background-image: url("images/index/clients.png");
background-position: right;
background-repeat: no-repeat;
}
.apps {
padding-top: $focus-padding;
padding-top: 12em;
.left {
margin-top: 5em;
}
}
.own {
.right {
margin-top: 7em;
}
......@@ -233,19 +179,14 @@ body.index {
.clients {
text-align: center;
padding: 50px 0;
line-height: 5em;
.main {
max-width: $content-width;
}
padding: 0;
line-height: 6em;
img {
margin-top: -20px;
display: inline-block;
max-width: 140px;
margin-right: 35px;
// filter: grayscale(100%);
}
.steadymd {
......@@ -270,21 +211,22 @@ body.index {
}
.cta {
background-color: #1d74f5;
max-width: $content-width;
margin: 0 auto;
text-align: center;
font-size: 18px;
color: #fff;
margin-bottom: 8em;
border-top-right-radius: 7px;
border-bottom-right-radius: 7px;
padding: 0;
.grey {
margin-left: 20px;
background-color: #272b33;
padding: 3em 2em 3.5em;
.wrapper, .content {
border-top-right-radius: 7px;
border-bottom-right-radius: 7px;
}
.wrapper {
background-color: $color-primary;
padding: 0 0 0 1.5em;
}
.content {
background-color: $color-dark;
padding: 4em 0;
}
h2 {
......@@ -299,78 +241,47 @@ body.index {
font-size: 20px;
}
}
@media all and (max-width: 900px) {
.focus {
margin: 0;
padding: 2em 0;
.hero {
padding: 4em 0;
.left {
float: none;
width: 100%;
padding: 0;
}
.right {
float: none;
width: 100%;
padding: 0;
}
}
.hero {
padding: 1em 0 6em;
h1 {
margin: 0 0 1em;
margin-bottom: 1em;
}
br {
content: " ";
display: none;
}
.left {
float: none;
width: 100%;
padding: 0;
}
.right {
float: none;
width: 100%;
padding: 0;
}
}
.cta {
margin-bottom: 0;
}
.clients {
margin: 0;
}
.testimonials {
margin-bottom: 0;
.focus {
padding: 3em 0;
}
.apps-wrapper {
background: none;
padding: 0 1em;
.apps {
background-image: none;
}