Commit ac3a9f7b authored by Martin Schoeler's avatar Martin Schoeler Committed by Gabriel Engel

[NEW] Pricing page (#422)

* Create Pricing page

* add more slash to links

* fix cloud question icons

* fix links
parent b73556ee
......@@ -35,6 +35,7 @@
{% endcomment %}
{% include gtm/body.html %}
{{ content }}
<script src="/jquery.js"></script>
<script src="/main.js"></script>
<script src="/redirect.js"></script>
<!--[if IE]>
......
......@@ -18,15 +18,14 @@ theme: light
<nav class="app-header_menu">
<ul>
<li><a {% if page.class == 'cloud' %}class="current-page"{%endif%} href="/cloud">Cloud</a></li>
<li><a {% if page.class == 'install' %}class="active"{%endif%} href="/install">Install</a></li>
<li><a {% if page.class == 'support' %}class="current-page"{%endif%} href="/support">Support</a></li>
<li><a {% if page.class == 'pricing' %}class="current-page"{%endif%} href="/pricing">Pricing</a></li>
<li><a {% if page.class == 'community' %}class="current-page"{%endif%} href="/community">Community</a></li>
<li><a {% if page.class == 'docs' %}class="current-page"{%endif%} href="/docs/">Docs</a></li>
<li><a {% if page.class == 'blog' %}class="current-page"{%endif%} href="/blog/">Blog</a></li>
<li><a {% if page.class == 'docs' %}class="current-page"{%endif%} href="/docs">Docs</a></li>
<li><a {% if page.class == 'blog' %}class="current-page"{%endif%} href="/blog">Blog</a></li>
<li><a {% if page.class == 'contact' %}class="current-page"{%endif%} href="/contact">Contact</a></li>
</ul>
<a class="app-header_install" href="/cloud"><span><img src="/images/default/cloud.svg" alt="Install"></span> Try now</a>
<a class="app-header_install" href="/pricing"><span><img src="/images/default/cloud.svg" alt="Install"></span> Try now</a>
</nav>
</div>
......@@ -43,8 +42,7 @@ theme: light
<label for="menu1" class="app-footer_pre-menu">Product</label>
<ul class="app-footer_nav">
<li><a href="/">Rocket.Chat</a></li>
<li><a href="/support">Support</a></li>
<li><a href="/cloud">Cloud</a></li>
<li><a href="/pricing/">Pricing</a></li>
<li><a href="/bots">Bots</a></li>
<li><a href="/community">Community</a></li>
<li><a href="/webinars">Webinars</a></li>
......@@ -81,7 +79,7 @@ theme: light
<input id="menu4" type="checkbox" />
<label for="menu4" class="app-footer_pre-menu">Get started</label>
<ul class="app-footer_nav">
<li><a class="app-footer_install" target="_blank" rel="noopener noreferrer" href="//rocket.chat/cloud"><span><img src="/images/default/cloud.svg" alt="Free trial"></span> Cloud trial</a></li>
<li><a class="app-footer_install" target="_blank" rel="noopener noreferrer" href="//rocket.chat/pricing/"><span><img src="/images/default/cloud.svg" alt="Free trial"></span> Cloud trial</a></li>
<li><a class="app-footer_install" href="/install" title="install"><span style="margin-top: -0.1em;"><img src="/images/default/install.svg" alt="Install" style="margin-top: 0.35em"></span> Install server</a></li>
</ul>
</div>
......
......@@ -42,6 +42,7 @@
padding-left: $gutter;
margin-top: .3em;
@include align-self(flex-start);
height: 1.5em;
}
.card--shadow {
......
.cloud-hero__image {
.pricing-hero__image {
position: absolute;
top: -50%;
left: 0;
......@@ -16,7 +16,7 @@
}
}
body.cloud {
body.pricing {
.headroom--top {
&.app-header_wrap {
background: none !important;
......@@ -70,6 +70,40 @@ body.cloud {
}
}
.switch-container {
display: flex;
width: 369px;
margin: 0 auto;
justify-content: space-between;
}
.col.title {
margin-bottom: 102px;
}
.switch{
border-radius: 2px;
height: 43px;
width: 184px;
background: #A3B4CC;
&.active {
background: #030c1a;
}
p {
color: #FFFFFF;
font-size: 16px;
font-weight: 500;
text-align: center;
letter-spacing: 0.25px;
line-height: 42px;
}
}
.self-managed__container {
display: none;
}
// only IE
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
@include headerStyle();
......
.support-hero__image {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
background-image: url("../images/support/hero.jpg");
background-position: center bottom;
background-repeat: no-repeat;
background-size: 100% auto;
@media screen and (min-width: $tablet) {
bottom: -15%;
}
@media screen and (min-width: 72em) {
top: -10%;
bottom: -40%;
background-position: center top;
}
}
This diff is collapsed.
......@@ -67,7 +67,7 @@ redirect_from:
<div class="col">
<div class="card card--full-height theme_box--dark-strong theme_type--dark">
<div class="flex-grid">
<div class="col--fourth no-gutter"><img class="card_icon" src="/images/community/writte _documentation.png" alt="Documentation & Tutorials" /></div>
<div class="col--fourth no-gutter"><img class="card_icon" src="/images/community/writte_documentation.png" alt="Documentation & Tutorials" /></div>
<div class="col no-gutter">
<h3 class="display--small theme_type--dark"><strong>Write Documentation</strong></h3>
<p class="theme_type--grey">You don't have to be a developer to contribute to Rocket.Chat. You can create new or update old Rocket.Chat.Docs articles or tutorials directly through GitHub.</p>
......
......@@ -107,7 +107,7 @@ theme: dark
<div class="col">
<div class="card card--full-height theme_box--dark-strong theme_type--dark">
<div class="flex-grid">
<div class="col--fourth no-gutter"><img class="card_icon" src="/images/support/githubissues.png" alt="Github Issues" /></div>
<div class="col--fourth no-gutter"><img class="card_icon" src="/images/community/squash_bugs.png" alt="Github Issues" /></div>
<div class="col no-gutter">
<h3 class="display--small theme_type--dark"><strong>Features or Bugs</strong></h3>
<p class="theme_type--grey">If you think you've found a bug or would like to request a feature for Rocket.Chat, join GitHub and search through the existing issues or create a new one if one doesn't exist.</p>
......@@ -120,7 +120,7 @@ theme: dark
<div class="col">
<div class="card card--full-height theme_box--dark-strong theme_type--dark">
<div class="flex-grid">
<div class="col--fourth no-gutter"><img class="card_icon" src="/images/support/doc.png" alt="Documentation & Tutorials" /></div>
<div class="col--fourth no-gutter"><img class="card_icon" src="/images/community/writte_documentation.png" alt="Documentation & Tutorials" /></div>
<div class="col no-gutter">
<h3 class="display--small theme_type--dark"><strong>Documentation & Tutorials</strong></h3>
<p class="theme_type--grey">The Rocket.Chat documentation has guides to help users, administrators and developers use, manage, customize and develop for Rocket.Chat.</p>
......@@ -136,7 +136,7 @@ theme: dark
<div class="col">
<div class="card card--full-height theme_box--dark-strong theme_type--dark">
<div class="flex-grid">
<div class="col--fourth no-gutter"><img class="card_icon" src="/images/support/forum.png" alt="Rocket.Chat Forums" /></div>
<div class="col--fourth no-gutter"><img class="card_icon" src="/images/community/forum.png" alt="Rocket.Chat Forums" /></div>
<div class="col no-gutter">
<h3 class="display--small theme_type--dark"><strong>Forums</strong></h3>
<p class="theme_type--grey">To discuss Rocket.Chat development with the Rocket.Chat team and community join our Discourse forum.</p>
......@@ -165,7 +165,7 @@ theme: dark
<div class="col">
<div class="card card--full-height theme_box--dark-strong theme_type--dark">
<div class="flex-grid">
<div class="col--fourth no-gutter"><img class="card_icon" src="/images/support/forum.png" alt="Rocket.Chat Forums" /></div>
<div class="col--fourth no-gutter"><img class="card_icon" src="/images/community/chat_with_us.png" alt="Rocket.Chat Forums" /></div>
<div class="col no-gutter">
<h3 class="display--small theme_type--dark"><strong>Chat with Us</strong></h3>
<p class="theme_type--grey">Chat with us and thousands of developers who are creating the best chat platform on the Rocket.Chat open server.</p>
......@@ -178,7 +178,7 @@ theme: dark
<div class="col">
<div class="card card--full-height theme_box--dark-strong theme_type--dark">
<div class="flex-grid">
<div class="col--fourth no-gutter"><img class="card_icon" src="/images/support/video.png" alt="Tutorial Videos" /></div>
<div class="col--fourth no-gutter"><img class="card_icon" src="/images/community/come_meet_us.png" alt="Tutorial Videos" /></div>
<div class="col no-gutter">
<h3 class="display--small theme_type--dark"><strong>Come Meet Us</strong></h3>
<p class="theme_type--grey">Come say hi at a local meetup or conference, tell us how you customized it to suit your needs and improved your team’s communication.</p>
......
......@@ -26,7 +26,7 @@ redirect_from:
<h1 class="display--big theme_type--dark">Open Source Team Communication</h1>
<p class="display--small theme_type--grey">Rocket.Chat is free, unlimited and open source. Replace email, HipChat &amp; Slack with the ultimate team chat software solution.</p>
<div class="install">
<a href="/cloud" rel="noopener noreferrer" class="button">Start cloud trial</a>
<a href="/pricing" rel="noopener noreferrer" class="button">Start cloud trial</a>
<a href="/install" class="button button--ghost">Install own server</a>
</div>
</div>
......
......@@ -382,3 +382,16 @@ if (document.querySelector(".js-download")) {
);
xhttp.send();
})();
$('.switch').on('click', function () {
$('.switch').removeClass('active');
$(this).addClass(' active');
if ($(this).hasClass('cloud')){
$('.cloud__container').css("display","block");
$('.self-managed__container').css("display","none");
} else if ($(this).hasClass('self-managed')){
$('.cloud__container').css("display","none");
$('.self-managed__container').css("display","block");
}
})
\ No newline at end of file
This diff is collapsed.
......@@ -32,8 +32,7 @@
@import "pages/partner";
@import "pages/contact";
@import "pages/press";
@import "pages/cloud";
@import "pages/support";
@import "pages/pricing";
@import "pages/webinars";
@import "pages/404";
@import "pages/landing";
---
layout: en/default
class: support
title: "On-Premises, Download &amp; Install, Server &amp; Mobile Apps"
description: |
Download &amp; install the latest stable or release candidate version of
Rocket.Chat on your desktop, server, cloud or mobile phone.
permalink: /support
theme: dark
redirect_from:
- /support/
- /help
- /help/
---
<section class="hero">
<h1 class="display--big theme_type--dark">Rocket.Chat Support</h1>
<p class="display--small theme_type--grey">Support and resources from our experts and our community to keep your team connected</p>
<br />
<br />
<a href="/contact#free-resources" class="button--ghost">Free Resources</a>
<a href="#expert-support" class="button">Expert Support</a>
<div class="support-hero__image"></div>
</section>
<div class="space--6"></div>
<section class="container" id="expert-support">
<div class="flex-grid grid--justify-around align--center">
<div class="col--haft">
<p class="label">Expert Support</p>
<h2 class="display theme_type--dark">24/7 Support for your team</h2>
<p class="display--small theme_type--grey">Choose a plan to suit your support needs and keep your team connected, delivered by our team of experts</p>
</div>
</div>
<div class="space--2"></div>
<div class="flex-grid grid--justify-around">
<div class="col--three-quarter table table--two-column table--dark">
<table>
<tbody>
<tr>
<td>
<h2 class="display theme_type--dark">Basic</h2>
<br />
<p class="label theme_type--grey type--nomargin">*from</p>
<p class="display theme_type--dark">$525
<small class="label--small"><span class="label--small theme_type--grey">/mo</span></small>
</p>
<p class="theme_type--grey">For smaller teams who need basic support and help in case of emergencies</p>
<br />
<a class="button" href="/contact/">Contact Us</a>
</td>
</tr>
<tr>
<th><span>For Rocket.Chat Cloud customers</span></th>
</tr>
<tr>
<td><p><img src="/images/default/check.svg" />The basic support plan is already included for Rocket.Chat Cloud customers</p></td>
</tr>
<tr>
<th><span>Support First Response SLA</span></th>
</tr>
<tr>
<td>
<p>Critical business impact <strong>1 hour</strong></p>
<p>Normal business impact <strong>12 hours</strong></p>
<p>Min. business impact <strong>2 business days</strong></p>
</td>
</tr>
<tr>
<th><span>Contact</span></th>
</tr>
<tr>
<td>
<p><strong><img src="/images/default/check.svg" /> Self-help resources</strong></p>
<p><strong><img src="/images/default/check.svg" /> Online ticket creation</strong></p>
<div class="table--layout">
<p><br /></p>
<p><br /></p>
<p><br /></p>
</div>
</td>
</tr>
<tr class="table_hide-mobile">
<th><span>Extra</span></th>
</tr>
<tr class="table_hide-mobile">
<td>
<div class="table--layout">
<p><br /></p>
<p><br /></p>
<p><br /></p>
</div>
</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td>
<h2 class="display theme_type--dark">Premium</h2>
<br />
<p class="label theme_type--grey type--nomargin">*from</p>
<p class="display theme_type--dark">$1,275
<small class="label--small"><span class="label--small theme_type--grey">/mo</span></small>
</p>
<p class="theme_type--grey">For larger teams who need a quicker response and 24/7 phone support</p>
<br />
<a class="button" href="/contact/">Contact Us</a>
</td>
</tr>
<tr>
<th><span>For Rocket.Chat Cloud customers</span></th>
</tr>
<tr>
<td><p>You can upgrade the support plan included on Rocket.Chat Cloud to Premium for <strong>$750</strong>/mo</p></td>
</tr>
<tr>
<th><span>Support First Response SLA</span></th>
</tr>
<tr>
<td>
<p>Critical business impact <strong>30 min</strong></p>
<p>Normal business impact <strong>8 hours</strong></p>
<p>Min. business impact <strong>1 business day</strong></p>
</td>
</tr>
<tr>
<th><span>Contact</span></th>
</tr>
<tr>
<td>
<p><strong><img src="/images/default/check.svg" /> Self-help resources</strong></p>
<p><strong><img src="/images/default/check.svg" /> Online ticket creation</strong></p>
<p><strong><img src="/images/default/check.svg" /> Email support</strong></p>
<p><strong><img src="/images/default/check.svg" /> 24/7 chat support</strong></p>
<p><strong><img src="/images/default/check.svg" /> 24/7 phone support</strong></p>
</td>
</tr>
<tr>
<th><span>Extra</span></th>
</tr>
<tr>
<td>
<p><strong><img src="/images/default/check.svg" /> Account onboarding</strong></p>
<p><strong><img src="/images/default/check.svg" /> Migration assistance</strong></p>
<p><strong><img src="/images/default/check.svg" /> Direct access to product team</strong></p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<div class="space--8"></div>
<section class="container">
<div class="flex-grid grid--justify-around">
<div class="col--three-quarter">
<h2 class="display--small theme_type--dark"><strong>Premium Support Explained</strong></h2>
<p class="display--small theme_type--grey">All your questions answered</p>
<br />
<div class="flex-grid">
<div class="col">
<h3 class="theme_type--dark"><strong>*Pricing &amp; Billing</strong></h3>
<p class="theme_type--grey">Displayed prices represent the monthly breakdown for an annual contract; advanced annual payment is required.</p>
<h3 class="theme_type--dark"><strong>Cloud Support</strong></h3>
<p class="theme_type--grey">The Basic support plan is included for paying Cloud customers. Cloud not included with basic support plan.</p>
<h3 class="theme_type--dark"><strong>Point of contact</strong></h3>
<p class="theme_type--grey">Support plans do not include end users. Once a support plan has been purchased it is the business's responsiblity to inform Rocket.Chat who will be their internal point of contact for the support plan. Up to three contacts are permitted per organization. </p>
<h3 class="theme_type--dark"><strong>Critical business impact</strong></h3>
<p class="theme_type--grey">An issue affecting Rocket.Chat that prevents a business from operating as normal. Examples include: data loss or corruption; system crashes; loss of critical functionality; large numbers of users unable to work. </p>
</div>
<div class="col">
<h3 class="theme_type--dark"><strong>Minimal business impact</strong></h3>
<p class="theme_type--grey">A question, feature request or documentation issue that does not have an impact on performance.</p>
<h3 class="theme_type--dark"><strong>Self-help resources</strong></h3>
<p class="theme_type--grey">Rocket.Chat provides user information for adminstrators, end users and developers at <a href="/docs" class="button--link">https://rocket.chat/docs.</a></p>
<h3 class="theme_type--dark"><strong>Consultations with the product team</strong></h3>
<p class="theme_type--grey">Premium plan subscribers are entitled to a 1-hour consultation/month with a core team member. Additional hours can be purchased for a fee. </p>
<h3 class="theme_type--dark"><strong>Normal business impact</strong></h3>
<p class="theme_type--grey">An issue affecting Rocket.Chat that causes a partial or non-critical loss of functionality. Examples include: some system functions are unavailable; minor performance problems; small numbers of users unable to work. </p>
</div>
</div>
</div>
</div>
</section>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment