Commit 0bc4724a authored by Sean Packham's avatar Sean Packham

Finsihed refactor

parent dd9d5a09
......@@ -21,7 +21,7 @@ small:
<div class="description">
For new teams or small communities
</div>
<a class="button red" href="https://cloud.rocket.chat/trial/small">Start Trial</a>
<a class="button secondary" href="https://cloud.rocket.chat/trial/small">Start Trial</a>
<div class="pricing"><span>$50</span>/month</div>
total: 500
concurrent: Up to 50
......@@ -38,7 +38,7 @@ medium:
<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>
<a class="button secondary" href="https://cloud.rocket.chat/trial/medium">Start Trial</a>
<div class="pricing"><span>$200</span>/month</div>
total: 5,000
concurrent: Up to 200
......@@ -55,7 +55,7 @@ large:
<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>
<a class="button secondary" href="https://cloud.rocket.chat/trial/large">Start Trial</a>
<div class="pricing"><span>$500</span>/month</div>
total: 50,000
concurrent: Up to 500
......
body.blog {
ul.posts {
.posts ul {
margin: 0;
list-style: none;
padding: 0;
......@@ -65,8 +65,7 @@ body.blog {
}
@media all and (max-width: 900px) {
ul.posts {
.posts ul {
display: block;
li {
......@@ -80,8 +79,6 @@ body.blog {
height: 130px;
}
}
}
}
......
body.cloud {
min-width: 600px;
.testimonials {
margin-top: 6em;
img {
max-width: 150px;
}
.hero {
padding-bottom: 12em;
}
.message {
max-width: 900px;
margin-left: auto;
margin-right: auto;
p {
color: #929db3;
}
section {
padding-bottom: 6em;
}
}
body.community {
.header {
margin-bottom: 4em;
.hero {
padding-bottom: 12em;
}
section {
padding-bottom: 6em;
}
.connect {
padding-bottom: 1em;
ul {
list-style: none;
padding: 0;
......@@ -27,13 +33,7 @@ body.community {
}
}
.left {
margin-top: 4em;
}
.involved {
margin-bottom: 0;
ul {
list-style: none;
padding: 0;
......@@ -60,11 +60,6 @@ body.community {
}
@media all and (max-width: 900px) {
.header {
margin-bottom: 0;
}
.right img {
display: none;
}
......@@ -76,7 +71,6 @@ body.community {
.involved ul {
display: block;
}
}
}
body.contact {
section {
margin-bottom: 0;
&.header {
margin-bottom: 3em;
}
}
label, input, textarea {
display: block;
margin-bottom: 5px;
font-size: $font-size;
}
label {
margin-top: 8px;
}
input[type=text] {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
.hero {
padding-bottom: 12em;
}
textarea {
width: 100%;
padding: 10px;
min-height: 344px;
border: 1px solid #ddd;
section {
padding-bottom: 6em;
}
input[type=button] {
margin-top: 10px;
display: inline-block;
#message {
padding-top: 0;
.address {
padding-top: 3em;
}
}
}
......@@ -5,7 +5,7 @@ body.download {
background-color: $color-dark;
text-align: center;
color: #fff;
padding: 6em 0 0 ;
padding: 6em 0 0;
.wrapper {
padding-bottom: 20em;
......@@ -17,7 +17,6 @@ body.download {
}
h1 {
margin-top: 2em;
color: #fff;
}
......@@ -150,6 +149,7 @@ body.download {
}
#support {
padding-bottom: 3em;
.header {
text-align: center;
......
......@@ -3,12 +3,8 @@ body.index {
.hero {
background-image: url('images/index/clouds.png');
background-repeat: no-repeat;
background-size: contain;
background-position: bottom;
background-color: $color-dark;
padding: 4em 0 12em;
color: #fff;
text-align: left;
h1 {
font-size: 2.5em;
......@@ -245,8 +241,6 @@ body.index {
@media all and (max-width: 900px) {
.hero {
padding: 4em 0;
.left {
float: none;
width: 100%;
......
......@@ -188,9 +188,21 @@ section {
padding: 9em 0;
&.hero {
background-repeat: no-repeat;
background-size: contain;
background-position: bottom;
background-color: $color-dark;
padding: 6em 0 12em;
text-align: center;
color: #fff;
h1 {
font-size: 2.2em;
}
em {
font-style: normal;
}
}
}
......@@ -241,15 +253,15 @@ table {
td {
padding: 0 1em 1em;
font-size: 1.25em;
}
.description {
min-height: 100px;
min-height: 80px;
vertical-align: top;
}
.pricing {
margin-top: 1em;
font-size: 1.25em;
span {
......@@ -332,8 +344,12 @@ table {
section {
padding: 3em 0;
&.hero {
padding-bottom: 6em;
}
}
.left {
float: none;
width: 100%;
......
......@@ -5,8 +5,11 @@ body.partners {
list-style: none;
display: grid;
grid-template-columns: repeat(2, 0.5fr);
grid-gap: 30px;
grid-gap: 50px;
h2 {
margin-top: 0.5em;
}
div {
height: 180px;
......
body.press {
section {
padding-bottom: 3em;
}
.company {
img {
margin: 40px auto 0;
......@@ -10,7 +14,7 @@ body.press {
.gabriel {
img {
max-width: 260px;
max-width: 300px;
}
}
......@@ -24,6 +28,7 @@ body.press {
li {
float: left;
padding: 0 1em;
width: 25%;
}
......@@ -43,14 +48,40 @@ body.press {
max-width: 200px;
vertical-align: middle;
}
.more {
margin-top: 2em;
}
}
.contact {
margin-bottom: 0;
padding-bottom: 3em;
padding-bottom: 6em;
img {
max-width: 150px;
}
}
@media all and (max-width: 800px) {
.company .right {
display: none;
}
.gabriel {
padding-top: 0;
img {
margin-bottom: 3em;
}
}
.logos {
li {
float: none;
width: 100%;
}
}
}
}
body.team {
.header {
margin-bottom: 4em;
}
.left {
padding-right: 50px;
}
.right img {
margin-top: -60px;
.message {
padding-bottom: 3em;
.left {
padding-top: 5em;
}
}
ul.team {
......@@ -47,6 +43,12 @@ body.team {
.header {
margin: 0;
}
.message {
.left {
padding-top: 0;
}
}
.right img {
display: none;
......
......@@ -3,51 +3,55 @@ layout: en/default
class: blog
---
<section class="header center">
<h1>Rocket.Chat Blog</h1>
<em>Find out what the Rocket.Chat team and community have been up to</em>
<section class="hero">
<div class="wrapper">
<h1>Rocket.Chat Blog</h1>
<em>Find out what the Rocket.Chat team and community have been up to</em>
</div>
</section>
<ul class="posts">
{% for post in paginator.posts %}
<li class="post">
<a class="header" href="{{ site.url }}{{ post.url | remove: "index.html" }}"
style="background-image: url('{{ site.url }}/images/blog/post.png')">
</a>
<div class="content">
<div class="top">
<h2><a href="{{ site.url }}{{ post.url | remove: "index.html" }}">{{ post.title }}</a></h2>
<p class="summary">
{{ post.summary | strip_html }}
</p>
</div>
<div class="bottom">
<div class="meta">
<span class="author">{{ post.author }}</span> -
<span class="read">
{% assign words = content | number_of_words %}
{% if words < site.wpm %} 1 min {% else %} {{ words | divided_by: site.wpm }} mins {% endif %} read
</span>
<span class="date"> {{ post.date | date: "%b %-d, %Y" }}</span>
<section class="posts">
<div class="wrapper">
<ul>
{% for post in paginator.posts %}
<li class="post">
<a class="header" href="{{ site.url }}{{ post.url | remove: "index.html" }}"
style="background-image: url('{{ site.url }}/images/blog/post.png')">
</a>
<div class="content">
<div class="top">
<h2><a href="{{ site.url }}{{ post.url | remove: "index.html" }}">{{ post.title }}</a></h2>
<p class="summary">
{{ post.summary }}
</p>
</div>
<div class="bottom">
<div class="meta">
<span class="author">{{ post.author }}</span> -
<span class="read">
{% assign words = post.content | number_of_words %}
{% if words < site.wpm %} 1 min {% else %} {{ words | divided_by: site.wpm }} mins {% endif %} read
</span>
<span class="date"> {{ post.date | date: "%b %-d, %Y" }}</span>
</div>
</div>
</div>
</div>
</li>
{% endfor %}
</ul>
<div class="clear"></div>
<div class="pagination">
{% if paginator.previous_page %}
<a href="{{ site.url }}{{ paginator.previous_page_path }}" class="previous">Previous</a>
{% else %}
<span class="previous">Previous</span>
{% endif %}
<span class="page ">Page: {{ paginator.page }} of {{ paginator.total_pages }}</span>
{% if paginator.next_page %}
<a href="{{ site.url }}{{ paginator.next_page_path }}" class="next">Next</a>
{% else %}
<span class="next">Next</span>
{% endif %}
</div>
<div class="clear"></div>
</li>
{% endfor %}
</ul>
<div class="pagination">
{% if paginator.previous_page %}
<a href="{{ site.url }}{{ paginator.previous_page_path }}" class="previous">Previous</a>
{% else %}
<span class="previous">Previous</span>
{% endif %}
<span class="page ">Page: {{ paginator.page }} of {{ paginator.total_pages }}</span>
{% if paginator.next_page %}
<a href="{{ site.url }}{{ paginator.next_page_path }}" class="next">Next</a>
{% else %}
<span class="next">Next</span>
{% endif %}
</div>
</div>
<div class="clear"></div>
</section>
......@@ -5,145 +5,151 @@ redirect_from:
- /hosting/
---
<section class="header center">
<h1>Run Rocket.Chat on our Cloud</h1>
<em>The worry free way to affordably host, manage and scale Rocket.Chat</em>
<section class="hero">
<div class="wrapper">
<h1>Run Rocket.Chat on our Cloud</h1>
<em>The worry free way to affordably host, manage and scale Rocket.Chat</em>
</div>
</section>
<section class="message">
<div class="left">
<h3>Easy</h3>
<p>
Rocket.Chat Cloud is the easiest way to install, setup and manage Rocket.Chat.
It requires no technical knowledge and you can start a trial in a couple of minutes, no credit card required.
</p>
<h3>Affordable</h3>
<p>
We believe in charging a fair rate for the resources your need rather than for every team member or guest,
giving you an affordable and scalable team chat solution for tens of thousands of users.
</p>
</div>
<div class="right">
<h3>Scalable</h3>
<p>
Rocket.Chat's robust and scalable Cloud, built on Docker and Kubernetes,
gives you the benefits of an open source communication platform
without having to manage and scale your own infrastructure and support team.
</p>
<h3>Secure</h3>
<p>
Every cloud instance runs in it's own secure isolated environment which we monitor 24x7.
Your data is backed-up up to every hour, to give you peace of mind in the case of an emergency.
</p>
<div class="wrapper">
<div class="left">
<h3>Easy</h3>
<p>
Rocket.Chat Cloud is the easiest way to install, setup and manage Rocket.Chat.
It requires no technical knowledge and you can start a trial in a couple of minutes, no credit card required.
</p>
<h3>Affordable</h3>
<p>
We believe in charging a fair rate for the resources your need rather than for every team member or guest,
giving you an affordable and scalable team chat solution for tens of thousands of users.
</p>
</div>
<div class="right">
<h3>Scalable</h3>
<p>
Rocket.Chat's robust and scalable Cloud, built on Docker and Kubernetes,
gives you the benefits of an open source communication platform
without having to manage and scale your own infrastructure and support team.
</p>
<h3>Secure</h3>
<p>
Every cloud instance runs in it's own secure isolated environment which we monitor 24x7.
Your data is backed-up up to every hour, to give you peace of mind in the case of an emergency.
</p>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</section>
{% assign cloud = site.data.cloud %}
<section>
<table>
<thead>
<tr>
<th></th>
<th><h2>{{ cloud.small.name }}</h2></th>
<th><h2>{{ cloud.medium.name }}</h2></th>
<th><h2>{{ cloud.large.name }}</h2></th>
</tr>
</thead>
<tbody>
<section class="plans">
<div class="wrapper">
<table>
<thead>
<tr>
<th></th>
<th><h2>{{ cloud.small.name }}</h2></th>
<th><h2>{{ cloud.medium.name }}</h2></th>
<th><h2>{{ cloud.large.name }}</h2></th>
</tr>
</thead>
<tbody>
{% for key in cloud.keys %}
{% assign k = key[0] %}
{% for key in cloud.keys %}
{% assign k = key[0] %}
<tr>
{% unless cloud.large[k] %}
<td class="seperator" colspan="4">
{{ key[1] }}
</td>
{% else %}
<td>{{ key[1] }}</td>
<td>{{ cloud.small[k] }}</td>
<td>{{ cloud.medium[k] }}</td>
<td>{{ cloud.large[k] }}</td>
{% endunless %}
</tr>
{% endfor %}
</tbody>
</table>
<tr>
{% unless cloud.large[k] %}
<td class="seperator" colspan="4">
{{ key[1] }}
</td>
{% else %}
<td>{{ key[1] }}</td>
<td>{{ cloud.small[k] }}</td>
<td>{{ cloud.medium[k] }}</td>
<td>{{ cloud.large[k] }}</td>
{% endunless %}
</tr>
{% endfor %}
</tbody>
</table>
</div>
</section>
<section class="testimonials">
<ul>
<li class="procempa">
<div class="left">
<img src="{{ site.url }}/images/testimonials/procempa.jpg" alt="">
</div>
<div class="right">
<h3>Procempa</h3>
<h4>César Bridi - <span>Technology Manager</span></h4>
<p>
We were looking for a tool that facilitates team and cross department
communication. It was a pleasant surprise when we discovered Rocket.Chat
and everything it offers, especially the ease of integration with other
products and tools.
</p>
</div>
<div class="clear"></div>
</li>
</ul>
</section>
<section class="faq">
<h2>FAQ</h2>
<ol>
<div class="wrapper">
<div class="left">
<li>
<h3>How long will Rocket.Chat Cloud be in beta?</h3>
<p>
We are close to bringing Rocket.Chat Cloud out of beta,
while in beta Rocket.Chat cloud is completely free.
</p>
</li>
<li>
<h3>How long do Rocket.Chat Cloud free trials last?</h3>
<p>
Every plan has a 30 day free trial. You can choose to cancel your plan anytime during the trial.
</p>
</li>
<li>
<h3>When will I be billed after my trial finishes?</h3>
<p>
You won't be billed automatically when your trial ends.
Explicit permission to bill you and continue the plan will be requested.
</p>
</li>
<img src="{{ site.url }}/images/testimonials/procempa.jpg" alt="">
</div>
<div class="right">
<li>
<h3>What is the billing period?</h3>
<p>
All plans are billed monthly.
</p>
</li>
<li>
<h3>When can I cancel a plan?</h3>
<p>
You can cancel a plan at anytime and can continue to use your plan for the remainder of your billing month.
</p>
</li>
<li>
<h3>Do you offer discounts for NGOs and educational institutes?</h3>
<p>
Yes if you run or work for a <a href="{{ site.url }}/concession">non-profit or educational institute</a>
you may be eligible for up to 80% discount on Rocket.Chat Cloud.
</p>
</li>
<h3>Procempa</h3>
<h4>César Bridi - <span>Technology Manager</span></h4>
<p>
We were looking for a tool that facilitates team and cross department
communication. It was a pleasant surprise when we discovered Rocket.Chat
and everything it offers, especially the ease of integration with other
products and tools.
</p>
</div>
<div class="clear"></div>
</ol>
</div>
</section>
<section class="faq">
<div class="wrapper">
<h2>FAQ</h2>
<ol>
<div class="left">
<li>
<h3>How long will Rocket.Chat Cloud be in beta?</h3>
<p>
We are close to bringing Rocket.Chat Cloud out of beta,
while in beta Rocket.Chat cloud is completely free.
</p>
</li>
<li>
<h3>How long do Rocket.Chat Cloud free trials last?</h3>
<p>
Every plan has a 30 day free trial. You can choose to cancel your plan anytime during the trial.
</p>
</li>
<li>
<h3>When will I be billed after my trial finishes?</h3>
<p>
You won't be billed automatically when your trial ends.
Explicit permission to bill you and continue the plan will be requested.
</p>
</li>
</div>
<div class="right">
<li>
<h3>What is the billing period?</h3>
<p>
All plans are billed monthly.
</p>
</li>
<li>
<h3>When can I cancel a plan?</h3>
<p>
You can cancel a plan at anytime and can continue to use your plan for the remainder of your billing month.
</p>
</li>
<li>
<h3>Do you offer discounts for NGOs and educational institutes?</h3>
<p>
Yes if you run or work for a <a href="{{ site.url }}/concession">non-profit or educational institute</a>
you may be eligible for up to 80% discount on Rocket.Chat Cloud.
</p>
</li>
</div>