Commit 6faab841 authored by Danilo Woznica's avatar Danilo Woznica

feat(Home): Add entreprise section

parent 447dbb25
......@@ -56,7 +56,7 @@
<section class="container" style="padding: 2em;">
<div class="flex-grid">
<div class="col">
<div class="card theme_box--light">
<div class="card card--full-height theme_box--light">
<div class="flex-grid--nobreak">
<img class="card_icon--mini" src="/images/default/question.svg" />
<div class="col no-gutter">
......@@ -86,9 +86,10 @@
</div>
<div class="col">
<div class="card theme_box--light">
<p class="theme_type--light type--nomargin">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<div class="card card--full-height theme_box--brand card--shadow">
<p class="theme_type--dark type--nomargin">
<h3 class="display--small theme_type--dark">Brand color with shadow</h3>
<p class="theme_type--dark">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</p>
</div>
</div>
......
......@@ -34,3 +34,7 @@
padding-right: $gutter;
align-self: flex-start;
}
.card--shadow {
box-shadow: 0 15px 30px 0 rgba(3, 12, 26, 0.15);
}
......@@ -38,18 +38,36 @@
}
}
//
// Generic box
//
.home_box {
display: flex;
background-position: left top;
border-radius: 2px;
position: relative;
}
.home_box-wrap {
padding: 2em $gutter;
flex: 0.38;
font-size: 14px;
position: relative;
z-index: 2;
@media screen and (min-width: $tablet) {
padding: 4em 6.5em 4em 7em;
}
}
//
// Community section
//
.home-community {
background-color: $space-b;
border-radius: 2px;
position: relative;
justify-content: flex-end;
@media screen and (min-width: $tablet) {
display: flex;
justify-content: flex-end;
background-position: left top;
background-size: 60% auto;
background-image: url("../images/index/join-community.jpg");
background-repeat: repeat-y;
......@@ -68,28 +86,29 @@
$space-b 100%
);
}
&:after {
content: "";
position: absolute;
right: 0;
left: 0;
bottom: 0;
height: 35%;
background-image: linear-gradient(
180deg,
rgba(0, 0, 0, 0) 3%,
$space 100%
);
}
}
}
@keyframes positionX {
0% {
background-position: left 0%;
background-position: left -150%;
}
100% {
background-position: left 100%;
}
}
.home-community_wrap {
padding: 2em $gutter;
flex: 0.38;
font-size: 14px;
position: relative;
@media screen and (min-width: $tablet) {
padding-top: 4em;
padding-bottom: 4em;
padding-right: 3em;
background-position: left -100%;
}
}
......@@ -158,3 +177,35 @@
}
}
}
//
// Home enterprise
//
.home-entreprise {
margin-bottom: -15em;
position: relative;
+ section {
padding-top: 20em;
}
.list {
.list-img {
text-align: center;
min-width: 3.5em;
padding-right: 0.5em;
img {
display: inline-block;
}
}
p {
margin-bottom: 0;
}
p:not(:last-child) {
margin-bottom: 1em;
}
}
}
......@@ -43,6 +43,14 @@
}
}
> .col--free {
@include column;
@media (min-width: $tablet) {
flex: 0;
}
}
> .col {
@include column;
}
......@@ -115,6 +123,12 @@
}
}
> .col--free {
@include column;
flex: 0;
}
> .col {
@include column;
}
......
......@@ -20,11 +20,19 @@ body.light {
color: $grey-light;
}
.theme_type--grey-smoke-dark {
color: $grey-smoke-dark;
}
.theme_type--light {
color: $grey;
}
// Box
.theme_box--brand {
background-color: $brand;
}
.theme_box--space {
background-color: $space;
}
......@@ -45,6 +53,10 @@ body.light {
background-color: $grey-bg;
}
.theme_box--white {
background-color: #fff;
}
.code--light {
border: 1px solid $grey-smoke;
}
......
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>channels</title><desc>Created with Sketch.</desc><g transform="translate(-2 -2)" fill="none"><path d="M0 0h24v24h-24z"/><circle id="Oval" stroke="#fff" stroke-width="1.5" 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.55" stroke="#fff" stroke-width="1.5"/><path d="M21 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" stroke="#fff" stroke-width="1.5"/></g></svg>
\ No newline at end of file
<svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><title>guests</title><desc>Created with Sketch.</desc><g transform="translate(-3 -3)" fill="none"><path d="M0 0h24v24h-24z"/><rect stroke="#fff" stroke-width="1.5" x="3.75" y="3.75" width="16.5" height="16.5" rx="2"/><path d="M6.002 20c0-3.75 4.498-3 4.498-4.5 0 0 .086-.996-.409-1.5-.618-.625-1.09-1.376-1.09-2.625 0-1.864 1.343-3.375 2.999-3.375 1.656 0 2.999 1.511 2.999 3.375 0 1.232-.46 1.999-1.105 2.625-.471.491-.395 1.5-.395 1.5 0 1.5 4.498.75 4.498 4.5" stroke="#fff" stroke-width="1.5"/></g></svg>
\ No newline at end of file
<svg width="23" height="22" viewBox="0 0 23 22" xmlns="http://www.w3.org/2000/svg"><title>messages@3x</title><desc>Created with Sketch.</desc><g fill="none"><path d="M-1-1h24v24h-24z"/><path d="M12.2 20.6c1.462 0 8.4.152 9.6-2.4.607-1.291-3.47-1.292-2.4-3.6.469-1.132 1.2-2.298 1.2-3.6 0-5.302-4.298-9.6-9.6-9.6s-9.6 4.298-9.6 9.6 4.298 9.6 10.8 9.6z" stroke="#fff" stroke-width="1.5"/><path d="M6.8 9.2h7.299M6.8 12.8h8.499" stroke="#fff" stroke-width="1.5"/></g></svg>
\ No newline at end of file
<svg width="19" height="19" viewBox="0 0 19 19" xmlns="http://www.w3.org/2000/svg"><title>searches</title><desc>Created with Sketch.</desc><g transform="translate(-2 -2)" fill="none"><path d="M0 0h24v24h-24z"/><circle stroke="#fff" stroke-width="1.5" cx="9.5" cy="9.5" r="6.5"/><path d="M20 20l-5-5" stroke="#fff" stroke-width="1.5" stroke-linecap="square"/></g></svg>
\ No newline at end of file
<svg width="22" height="20" viewBox="0 0 22 20" xmlns="http://www.w3.org/2000/svg"><title>upload@3x</title><desc>Created with Sketch.</desc><g fill="none"><path d="M-1-2h24v24h-24z"/><g stroke="#fff" stroke-width="1.5"><path d="M6.758 13l4.242-4.242 4.242 4.242"/><path d="M11 10.5v8"/><path d="M17.875 13c2.209 0 3.125-1.791 3.125-4s-1.791-4-4-4c0-1.657-1.343-3-3-3-.748 0-1.431.273-1.957.726-.824-1.051-2.105-1.726-3.543-1.726-2.485 0-4.5 2.015-4.5 4.5 0 .526.09 1.031.256 1.5h-.256c-1.657 0-3 1.343-3 3s1.343 3 3 3"/></g></g></svg>
\ No newline at end of file
<svg width="24" height="20" viewBox="0 0 24 20" xmlns="http://www.w3.org/2000/svg"><title>users</title><desc>Created with Sketch.</desc><g fill="none"><path d="M0-2h24v24h-24z"/><path d="M6 18.106c0-3.783 4.5-3.027 4.5-4.54 0 0 .086-1.005-.41-1.513-.618-.63-1.09-1.388-1.09-2.648 0-1.881 1.343-3.405 3-3.405s3 1.524 3 3.405c0 1.243-.46 2.017-1.105 2.648-.471.496-.395 1.513-.395 1.513 0 1.513 4.5.757 4.5 4.54 0 0-1.195.894-6 .894s-6-.894-6-.894zM5.486 13.967c-.569-.026-1.071-.065-1.512-.114-2.313-.253-2.974-.747-2.974-.747 0-3.783 4.5-3.027 4.5-4.54 0 0 .086-1.005-.41-1.513-.618-.63-1.09-1.388-1.09-2.648 0-1.881 1.343-3.405 3-3.405s3 1.524 3 3.405M18.514 13.967c.569-.026 1.071-.065 1.512-.114 2.313-.253 2.974-.747 2.974-.747 0-3.783-4.5-3.027-4.5-4.54 0 0-.086-1.005.41-1.513.618-.63 1.09-1.388 1.09-2.648 0-1.881-1.343-3.405-3-3.405s-3 1.524-3 3.405" stroke="#fff" stroke-width="1.5"/></g></svg>
\ No newline at end of file
......@@ -29,30 +29,77 @@ redirect_from:
/>
</section>
<br />
<br />
<br />
<br />
<div class="container">
<div class="flex-grid grid--justify-around">
<div class="col--third">
<img src="/images/index/devices.png" alt="Our mission Replace Email" />
</div>
<div class="col--third">
<p class="label theme_type--grey">Our mission</p>
<h2 class="display theme_type--dark">Replace Email</h2>
<p class="theme_type--grey">Speak to your team openly for greater transparency and awareness by leaving behind email’s closed loops of conversation.</p>
<p class="theme_type--grey">Remove the need for CC/BCC by using Rocket.Chat Channels and Private Groups, 
to only include relevant participants and avoid bothering others.</p>
</div>
</div>
</div>
<br />
<br />
<br />
<br />
<div class="container">
<section class="home-community">
<div class="home-community_wrap col--third">
<div class="flex-grid grid--justify-around">
<div class="col--third">
<p class="label theme_type--grey">Our mission</p>
<h2 class="display theme_type--dark">Team Chat</h2>
<p class="theme_type--grey">Eliminate lengthy email chains and improve productivity by discussing and sharing ideas, projects and files with real-time team chat.</p>
<p class="theme_type--grey">Remove the need for CC/BCC by using Rocket.Chat Channels and Private Groups, 
to only include relevant participants and avoid bothering others.</p>
</div>
<div class="col--third">
<img src="/images/index/devices.png" alt="Our mission Team Chat" />
</div>
</div>
</div>
<br />
<br />
<br />
<br />
<section class="container">
<div class="home_box home-community">
<div class="home_box-wrap">
<p class="label theme_type--grey">Open source</p>
<h2 class="display--big theme_type--dark">Join the Rocket.Chat community </h2>
<p class="display--small theme_type--grey">With {{site.stars}}k stars on GitHub and more than 600 contributors across our products with over 13k commits, we are the largest and most active open source team chat community.</p>
<br />
<p class="display--small theme_type--grey">Join our community of 10 million users and chat to us on <a class="button--link" href="//open.rocket.chat/" target="_blank">open.rocket.chat</a></p>
<br />
<a class="home-community_github" target="_blank" href="https://github.com/RocketChat/Rocket.Chat">
<a class="home-community_github" target="_blank" href="//github.com/RocketChat/Rocket.Chat">
<span><img src="/images/default/star.svg" alt="GitHub Stars">Star</span>
<span>{{site.stars}}K</span>
</a>
<a class="home-community_github" target="_blank" href="https://github.com/RocketChat/Rocket.Chat/fork">
<a class="home-community_github" target="_blank" href="//github.com/RocketChat/Rocket.Chat/fork">
<span><img src="/images/default/fork.svg" alt="GitHub forks">Fork</span>
<span>{{site.forks}}K</span>
</a>
<a class="home-community_github-link" target="_blank" href="https://github.com/RocketChat/Rocket.Chat">
<a class="home-community_github-link" target="_blank" href="//github.com/RocketChat/Rocket.Chat">
<span><img src="/images/default/github.svg" alt="GitHub"></span>
Open on GitHub
</a>
</div>
</section>
</div>
<br />
<br />
<br />
<br />
<br />
......@@ -70,8 +117,64 @@ redirect_from:
<!-- <p><a href="" class="button--link button--with-arrow">Learn more</a> -->
</div>
</div>
</div>
</section>
<br />
<br />
<br />
<section class="container home-entreprise">
<div class="theme_box--brand card--shadow">
<div class="home_box">
<div class="home_box-wrap">
<p class="label theme_type--grey-smoke-dark">free, unlimited &amp; open source</p>
<h2 class="display--big theme_type--dark">Enterprise Features</h2>
<p class="theme_type--grey-smoke-dark"><strong>Free audio and video conferencing, guest access, screen sharing, file sharing, LiveChat, LDAP Group Sync, two-factor authentication (2FA), E2E encryption, SSO, and dozens of OAuth providers.</strong></p>
<br />
<p class="theme_type--dark">Also includes unlimited:</p>
<div class="list flex-grid">
<div class="col no-gutter">
<p class="theme_type--dark flex-grid--nobreak">
<span class="col--free no-gutter list-img"><img src="/images/index/users.svg" alt="Users" /> </span>
<span>Users</span>
</p>
<p class="theme_type--dark flex-grid--nobreak">
<span class="col--free no-gutter list-img"><img src="/images/index/channels.svg" alt="Channels" /> </span>
<span>Channels</span>
</p>
<p class="theme_type--dark flex-grid--nobreak">
<span class="col--free no-gutter list-img"><img src="/images/index/searches.svg" alt="Searches" /> </span>
<span>Searches</span>
</p>
</div>
<div class="col no-gutter">
<p class="theme_type--dark flex-grid--nobreak">
<span class="col--free no-gutter list-img"><img src="/images/index/messages.svg" alt="Messages" /> </span>
<span>Messages</span>
</p>
<p class="theme_type--dark flex-grid--nobreak">
<span class="col--free no-gutter list-img"><img src="/images/index/guests.svg" alt="Guests" /> </span>
<span>Guests</span>
</p>
<p class="theme_type--dark flex-grid--nobreak">
<span class="col--free no-gutter list-img"><img src="/images/index/upload.svg" alt="File uploads" /> </span>
<span>File uploads</span>
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="theme_box--white">
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
</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