Commit 19a15bac authored by Danilo Woznica's avatar Danilo Woznica Committed by GitHub

Feat/illustrations (#226)

* feat(Cloud): Hero image

* feat(Download): Hero image

* feat(Contact): Add image

* feat(Support): Add icons

* feat(Cloud): Add icopns

* feat(Homepage): Add images

* feat(Home): Parallax

* Animation fixes

* Animation fixes
parent c2166638
......@@ -3,15 +3,12 @@ layout: default
---
<div class="app-header {% if page.theme == 'light' %}app-header--light{% else %}app-header--black{% endif %}">
<header class="app-header_wrap">
<header class="app-header_wrap headroom--top">
<div class="container">
<h1 class="app-header_logo">
<a href="/">
{% if page.theme == 'light' %}
<img src="/images/default/logo--dark.svg" alt="Rocket.Chat">
{% else %}
<img src="/images/default/logo.svg" alt="Rocket.Chat">
{% endif %}
<img class="dark" src="/images/default/logo--dark.svg" alt="Rocket.Chat">
<img class="normal" src="/images/default/logo.svg" alt="Rocket.Chat">
</a>
</h1>
......
......@@ -7,7 +7,7 @@
top: 0;
left: 0;
right: 0;
transition: transform 0.4s ease;
transition: all 0.4s ease;
z-index: 9999;
&.headroom--unpinned {
......@@ -38,6 +38,13 @@
img {
width: 7.5em;
transition: all .3s ease;
}
.dark {
position: absolute;
opacity: 0;
z-index: 2;
}
}
......@@ -162,11 +169,19 @@
// Dark version
.app-header--black {
background: $space;
.headroom--not-top {
background: $space;
.app-header_wrap,
.app-header_menu {
background: $space;
}
}
.app-header_wrap,
.app-header_menu {
background: $space;
@media screen and (max-width: $tablet) {
background: $space;
}
}
.app-header_wrap:after {
......@@ -218,6 +233,12 @@
background: #fff;
}
.app-header_logo {
.dark {
opacity: 1;
}
}
.app-header_wrap:after {
background-image: linear-gradient(
-90deg,
......
.hero {
text-align: center;
padding: 2em;
height: 50vh;
min-height: 20em;
min-height: 30em;
@media screen and (min-width: $tablet) {
padding-top: 5em;
height: 70vh;
min-height: 83vh;
}
p {
......
......@@ -4,6 +4,7 @@
left: 0;
right: 0;
bottom: 0;
z-index: 9999;
background: rgba($space, .9);
display: none;
}
......@@ -17,6 +18,23 @@
margin: auto;
animation: scaleIn .5s ease;
max-width: 90vw;
position: relative;
@media screen and (min-width: $tablet) {
width: 40vw;
}
.col--haft {
position: relative;
z-index: 1;
}
}
.modal__success {
position: absolute;
right: -1em;
bottom: 0em;
border-bottom-right-radius: 2px;
}
@keyframes appearsModal {
......
body.cloud {
background-image: url('../images/cloud/hero.jpg');
background-position: center top;
background-repeat: no-repeat;
background-size: auto 32em;
@media screen and (min-width: $tablet) {
background-image: url('../images/cloud/hero@2x.jpg');
background-size: 100% auto;
}
.headroom--top {
&.app-header_wrap {
background: none !important;
&:after {
opacity: .2;
}
}
.app-header_download,
.app-header_menu li {
color: #fff;
&:hover {
color: $grey-light;
}
}
.current-page {
color: rgba(255,255,255,0.6);
}
.app-header_logo .dark {
opacity: 0;
}
#handle-menu:checked ~ .app-header_menu {
background: #327dd8;
}
}
// scroll
.app-header--light {
background: none;
.app-header_wrap,
.app-header_menu {
background: none;
}
.headroom--not-top {
background: #fff;
.app-header_menu {
@media screen and (max-width: $tablet) {
background: #fff;
}
}
.app-header_wrap {
background: #fff;
}
}
}
}
\ No newline at end of file
body.download {
background-image: url('../images/download/hero.jpg');
background-position: center 8em;
background-repeat: no-repeat;
background-size: auto 32em;
@media screen and (min-width: $tablet) {
background-image: url('../images/download/hero@2x.jpg');
background-position: center top;
background-size: 100% auto;
}
}
.download-apps {
margin-bottom: 5em;
......
.home-backgrounds {
@include transform(translateZ(0));
position: relative;
overflow: hidden;
}
.home-landingpage {
@include transform(translateZ(0));
}
.home-landingpage__planets {
@include transform(translateZ(0));
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
background-image:
url('../images/index/landingpage-whiteplanet.png'),
url('../images/index/landingpage-orangeplanet.png')
;
background-repeat:
no-repeat,
no-repeat
;
background-position:
left 4% bottom -1%,
right -14% bottom 30%
;
background-size:
5em auto,
10em auto
;
@media screen and (min-width: $tablet) {
background-position:
left 4% bottom 1%,
right -14% bottom 30%
;
background-size:
10em auto,
30em auto
;
}
}
.home-landingpage__stars {
@include transform(translateZ(0));
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url('../images/index/landingpage-stars.jpg');
background-repeat: repeat;
background-position: center;
background-size: 100% auto;
@include transform(translate3d(0,0,0));
}
.home-landingpage__mail {
margin-left: -5em;
@media screen and (min-width: $tablet) {
width: 55vw;
margin-top: -33vw;
margin-left: -26vw;
max-width: none;
}
}
.home-landingpage__chat {
right: -1em;
position: relative;
@media screen and (min-width: $tablet) {
right: 0;
width: 55vw;
margin-left: -4vw;
max-width: none;
}
}
//
// Hero section
//
......@@ -51,7 +139,7 @@
//
// Generic box
//
.home_box {
.home-box {
border-radius: 2px;
position: relative;
......@@ -61,7 +149,7 @@
}
}
.home_box-wrap {
.home-box__wrap {
padding: 2em $gutter;
position: relative;
z-index: 2;
......@@ -72,6 +160,16 @@
}
}
.home-box__image {
@media screen and (min-width: $tablet) {
position: absolute;
right: 0px;
bottom: 0em;
border-bottom-right-radius: 2px;
height: 65vw;
max-height: 40em;
}
}
//
// Community section
//
......
body.press {
.hero {
img {
width: 100%;
max-width: 40em;
margin: auto;
}
}
}
.press-download {
.logo-dark {
background: #fff;
......
body.support {
background-image: url('../images/support/hero.jpg');
background-position: center 8em;
background-repeat: no-repeat;
background-size: 150% auto;
@media screen and (min-width: 31em) {
background-position: center 0;
}
@media screen and (min-width: 48em) {
background-size: 100% auto;
background-position: center 6em;
background-image: url('../images/support/hero@2x.jpg');
}
@media screen and (min-width: 70em) {
background-position: center -3em;
}
}
\ No newline at end of file
......@@ -200,11 +200,14 @@ theme: dark
<div class="col--haft">
<div class="space--2"></div>
<p class="label theme_type--grey">Become a partner</p>
<h2 class="display--small theme_type--dark">Application Successful!</h2>
<h2 class="display--small theme_type--dark"><strong>Application Successful!</strong></h2>
<p class="theme_type--dark">Thank your for applying! We will review your applicantion and will be in touch with you very shortly.</p>
<button class="button js-become-partner-close">Got it</button>
<div class="space--1"></div>
</div>
<div class="col">
<img class="modal__success" src="/images/default/success@2x.png" />
</div>
</div>
</div>
</div>
......
......@@ -14,12 +14,12 @@ redirect_from:
---
<section class="hero">
<h1 class="display--big">Rocket.Chat Cloud</h1>
<p class="display--small theme_type--light">The worry free way to host, manage &amp; scale Rocket.Chat</p>
<h1 class="display--big theme_type--dark">Rocket.Chat Cloud</h1>
<p class="display--small theme_type--dark">The worry free way to host, manage &amp; scale Rocket.Chat</p>
<br />
<br />
<a href="#pricing" class="button--ghost">See plans</a>
<a href="//cloud.rocket.chat/trial/small" target="_blank" rel="noopener noreferrer" rel="noopener noreferrer" class="button">Start Trial</a>
<a href="//cloud.rocket.chat/trial/small" target="_blank" rel="noopener noreferrer" rel="noopener noreferrer" class="button--blank">Start Trial</a>
</section>
<section class="container">
......@@ -28,7 +28,7 @@ redirect_from:
<div class="col">
<div class="card card--full-height theme_box--light theme_type--light">
<div class="flex-grid">
<div class="col--fourth no-gutter"><img class="card_icon" src="/images/index/devices.png" alt="Easy" /></div>
<div class="col--fourth no-gutter"><img class="card_icon" src="/images/cloud/easy.png" alt="Easy" /></div>
<div class="col no-gutter">
<h3 class="display--small"><strong>Easy</strong></h3>
<p class="theme_type--light type--nomargin">
......@@ -42,7 +42,7 @@ redirect_from:
<div class="col">
<div class="card card--full-height theme_box--light theme_type--light">
<div class="flex-grid">
<div class="col--fourth no-gutter"><img class="card_icon" src="/images/index/devices.png" alt="Scalable" /></div>
<div class="col--fourth no-gutter"><img class="card_icon" src="/images/cloud/scalable.png" alt="Scalable" /></div>
<div class="col no-gutter">
<h3 class="display--small"><strong>Scalable</strong></h3>
<p class="theme_type--light type--nomargin">
......@@ -60,7 +60,7 @@ redirect_from:
<div class="col">
<div class="card card--full-height theme_box--light theme_type--light">
<div class="flex-grid">
<div class="col--fourth no-gutter"><img class="card_icon" src="/images/index/devices.png" alt="Affordable" /></div>
<div class="col--fourth no-gutter"><img class="card_icon" src="/images/cloud/affordable.png" alt="Affordable" /></div>
<div class="col no-gutter">
<h3 class="display--small"><strong>Affordable</strong></h3>
<p class="theme_type--light type--nomargin">
......@@ -75,7 +75,7 @@ redirect_from:
<div class="col">
<div class="card card--full-height theme_box--light theme_type--light">
<div class="flex-grid">
<div class="col--fourth no-gutter"><img class="card_icon" src="/images/index/devices.png" alt="Easy" /></div>
<div class="col--fourth no-gutter"><img class="card_icon" src="/images/cloud/secure.png" alt="Secure" /></div>
<div class="col no-gutter">
<h3 class="display--small"><strong>Secure</strong></h3>
<p class="theme_type--light type--nomargin">
......
......@@ -108,6 +108,9 @@ theme: dark
<button class="button js-become-partner-close">Got it</button>
<div class="space--1"></div>
</div>
<div class="col">
<img class="modal__success" src="/images/default/success@2x.png" />
</div>
</div>
</div>
</div>
......
images/clients/aeb.png

9.18 KB | W: | H:

images/clients/aeb.png

3.96 KB | W: | H:

images/clients/aeb.png
images/clients/aeb.png
images/clients/aeb.png
images/clients/aeb.png
  • 2-up
  • Swipe
  • Onion skin
images/clients/canonical.png

13.1 KB | W: | H:

images/clients/canonical.png

5.21 KB | W: | H:

images/clients/canonical.png
images/clients/canonical.png
images/clients/canonical.png
images/clients/canonical.png
  • 2-up
  • Swipe
  • Onion skin
images/clients/citibank.png

6.07 KB | W: | H:

images/clients/citibank.png

2.76 KB | W: | H:

images/clients/citibank.png
images/clients/citibank.png
images/clients/citibank.png
images/clients/citibank.png
  • 2-up
  • Swipe
  • Onion skin
images/clients/classuite.png

11.4 KB | W: | H:

images/clients/classuite.png

4.74 KB | W: | H:

images/clients/classuite.png
images/clients/classuite.png
images/clients/classuite.png
images/clients/classuite.png
  • 2-up
  • Swipe
  • Onion skin
images/clients/lisk.png

2.57 KB | W: | H:

images/clients/lisk.png

1.29 KB | W: | H:

images/clients/lisk.png
images/clients/lisk.png
images/clients/lisk.png
images/clients/lisk.png
  • 2-up
  • Swipe
  • Onion skin
images/clients/selu.png

13.4 KB | W: | H:

images/clients/selu.png

5.67 KB | W: | H:

images/clients/selu.png
images/clients/selu.png
images/clients/selu.png
images/clients/selu.png
  • 2-up
  • Swipe
  • Onion skin
images/clients/steadymd.png

13.1 KB | W: | H:

images/clients/steadymd.png

4.84 KB | W: | H:

images/clients/steadymd.png
images/clients/steadymd.png
images/clients/steadymd.png
images/clients/steadymd.png
  • 2-up
  • Swipe
  • Onion skin
images/flags/Brazil.png

3 KB | W: | H:

images/flags/Brazil.png

2.59 KB | W: | H:

images/flags/Brazil.png
images/flags/Brazil.png
images/flags/Brazil.png
images/flags/Brazil.png
  • 2-up
  • Swipe
  • Onion skin
images/flags/India.png

2.54 KB | W: | H:

images/flags/India.png

2.22 KB | W: | H:

images/flags/India.png
images/flags/India.png
images/flags/India.png
images/flags/India.png
  • 2-up
  • Swipe
  • Onion skin
images/flags/Peru.png

2.36 KB | W: | H:

images/flags/Peru.png

1.83 KB | W: | H:

images/flags/Peru.png
images/flags/Peru.png
images/flags/Peru.png
images/flags/Peru.png
  • 2-up
  • Swipe
  • Onion skin
images/flags/USA.png

3.47 KB | W: | H:

images/flags/USA.png

3.29 KB | W: | H:

images/flags/USA.png
images/flags/USA.png
images/flags/USA.png
images/flags/USA.png
  • 2-up
  • Swipe
  • Onion skin
images/flags/United-Kingdom.png

3.59 KB | W: | H:

images/flags/United-Kingdom.png

3.38 KB | W: | H:

images/flags/United-Kingdom.png
images/flags/United-Kingdom.png
images/flags/United-Kingdom.png
images/flags/United-Kingdom.png
  • 2-up
  • Swipe
  • Onion skin
<svg height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg"><g fill="none"><path d="M-2-2h24v24h-24z"/><g stroke="#fff" stroke-width="1.5" transform="translate(-2 -2)"><circle cx="12" cy="12" r="4"/><path d="M15.445 20.317c-1.061.44-2.225.683-3.445.683-4.971 0-9-4.029-9-9s4.029-9 9-9 9 4.029 9 9v1.55M21 13.491c0 1.386-1.11 2.509-2.5 2.509-1.381 0-2.5-1.112-2.5-2.509v-5.491"/></g></g></svg>
\ No newline at end of file
<svg height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg"><g fill="none"><path d="m-2-2h24v24h-24z"/><g stroke="#fff" stroke-width="1.5" transform="translate(-2 -2)"><circle cx="12" cy="12" r="4"/><path d="m15.445 20.317c-1.061.44-2.225.683-3.445.683-4.971 0-9-4.029-9-9s4.029-9 9-9 9 4.029 9 9v1.55m0-.059c0 1.386-1.11 2.509-2.5 2.509-1.381 0-2.5-1.112-2.5-2.509v-5.491"/></g></g></svg>
\ No newline at end of file
images/partners/cheflogo.png

10.7 KB | W: | H:

images/partners/cheflogo.png

7.47 KB | W: | H:

images/partners/cheflogo.png
images/partners/cheflogo.png
images/partners/cheflogo.png
images/partners/cheflogo.png
  • 2-up
  • Swipe
  • Onion skin
images/partners/mconf.png

11.7 KB | W: | H:

images/partners/mconf.png

9.99 KB | W: | H:

images/partners/mconf.png
images/partners/mconf.png
images/partners/mconf.png
images/partners/mconf.png
  • 2-up
  • Swipe
  • Onion skin
images/partners/openenvy.png

9.2 KB | W: | H:

images/partners/openenvy.png

6.89 KB | W: | H:

images/partners/openenvy.png
images/partners/openenvy.png
images/partners/openenvy.png
images/partners/openenvy.png
  • 2-up
  • Swipe
  • Onion skin
images/team/member/aaron-ogle-01.jpg

38.1 KB | W: | H:

images/team/member/aaron-ogle-01.jpg

36.1 KB | W: | H:

images/team/member/aaron-ogle-01.jpg
images/team/member/aaron-ogle-01.jpg
images/team/member/aaron-ogle-01.jpg
images/team/member/aaron-ogle-01.jpg
  • 2-up
  • Swipe
  • Onion skin
images/team/member/diego-dorgam-01.jpg

38.7 KB | W: | H:

images/team/member/diego-dorgam-01.jpg

36.8 KB | W: | H:

images/team/member/diego-dorgam-01.jpg
images/team/member/diego-dorgam-01.jpg
images/team/member/diego-dorgam-01.jpg
images/team/member/diego-dorgam-01.jpg
  • 2-up
  • Swipe
  • Onion skin
images/team/member/filipe-brito-01.jpg

36.4 KB | W: | H:

images/team/member/filipe-brito-01.jpg

34.6 KB | W: | H:

images/team/member/filipe-brito-01.jpg
images/team/member/filipe-brito-01.jpg
images/team/member/filipe-brito-01.jpg
images/team/member/filipe-brito-01.jpg
  • 2-up
  • Swipe
  • Onion skin
images/team/member/julia-grala-01.jpg

48.3 KB | W: | H:

images/team/member/julia-grala-01.jpg

46.1 KB | W: | H:

images/team/member/julia-grala-01.jpg
images/team/member/julia-grala-01.jpg
images/team/member/julia-grala-01.jpg
images/team/member/julia-grala-01.jpg
  • 2-up
  • Swipe
  • Onion skin
images/team/member/karl-prieb-01.jpg

44.4 KB | W: | H:

images/team/member/karl-prieb-01.jpg

42.3 KB | W: | H:

images/team/member/karl-prieb-01.jpg
images/team/member/karl-prieb-01.jpg
images/team/member/karl-prieb-01.jpg
images/team/member/karl-prieb-01.jpg
  • 2-up
  • Swipe
  • Onion skin
images/team/member/ramon-nobre-01.jpg

39.8 KB | W: | H:

images/team/member/ramon-nobre-01.jpg

37.8 KB | W: | H:

images/team/member/ramon-nobre-01.jpg
images/team/member/ramon-nobre-01.jpg
images/team/member/ramon-nobre-01.jpg
images/team/member/ramon-nobre-01.jpg
  • 2-up
  • Swipe
  • Onion skin
images/team/member/renato-becker-01.jpg

39.1 KB | W: | H:

images/team/member/renato-becker-01.jpg

37.1 KB | W: | H:

images/team/member/renato-becker-01.jpg
images/team/member/renato-becker-01.jpg
images/team/member/renato-becker-01.jpg
images/team/member/renato-becker-01.jpg
  • 2-up
  • Swipe
  • Onion skin
images/team/member/sing-li-01.jpg

33.7 KB | W: | H:

images/team/member/sing-li-01.jpg

32.1 KB | W: | H:

images/team/member/sing-li-01.jpg
images/team/member/sing-li-01.jpg
images/team/member/sing-li-01.jpg
images/team/member/sing-li-01.jpg
  • 2-up
  • Swipe
  • Onion skin
......@@ -16,104 +16,107 @@ redirect_from:
- /2017/12/18/how-classuite-built-their-product-with-rocket-chat/
---
<section class="container home-hero">
<div class="home-hero_wrap">
<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 &amp; Slack with the ultimate team chat software solution.</p>
<div class="download">
<a href="/download" class="button">Download</a>
<div class="home-backgrounds">
<div class="home-landingpage__stars"></div>
<div class="home-landingpage__planets"></div>
<section class="container home-hero">
<div class="home-hero_wrap home-landingpage">
<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 &amp; Slack with the ultimate team chat software solution.</p>
<div class="download">
<a href="/download" class="button">Download</a>
</div>
</div>
</div>
<img
class="home-hero_image"
srcset="/images/index/devices.png, /images/index/devices@2x.png 2x, /images/index/devices@3x.png 3x"
src="/images/index/devices.png" alt="Rocket Chat apps"
/>
</section>
<img
class="home-hero_image"
srcset="/images/index/devices.png, /images/index/devices@2x.png 2x, /images/index/devices@3