mirror of https://github.com/zulip/zulip.git
Restyle /hello/ page.
This restyles the /hello/ page to be the new portico branding.
This commit is contained in:
Brock Whittaker
Tim Abbott
parent
a82a0d16d5
commit
3fd3ae4199
Binary file not shown.
|
After Width: | Height: | Size: 108 KiB |
|
|
@ -113,6 +113,18 @@ var integration_events = function () {
|
|||
});
|
||||
};
|
||||
|
||||
var hello_events = function () {
|
||||
var counter = 0;
|
||||
$(window).scroll(function () {
|
||||
if (counter % 2 === 0) {
|
||||
$(".screen.hero-screen .message-feed").css("transform", "translateY(-" + $(this).scrollTop() / 5 + "px)");
|
||||
}
|
||||
counter += 1;
|
||||
});
|
||||
|
||||
$(".footer").addClass("hello");
|
||||
};
|
||||
|
||||
var events = function () {
|
||||
ScrollTo();
|
||||
|
||||
|
|
@ -204,6 +216,10 @@ var events = function () {
|
|||
if (/\/integrations\/*/.test(window.location.pathname)) {
|
||||
integration_events();
|
||||
}
|
||||
|
||||
if (/\/hello\/*/.test(window.location.pathname)) {
|
||||
hello_events();
|
||||
}
|
||||
};
|
||||
|
||||
// run this callback when the page is determined to have loaded.
|
||||
|
|
|
|||
|
|
@ -15,11 +15,11 @@ body {
|
|||
}
|
||||
|
||||
*::-moz-selection {
|
||||
background-color: rgba(69, 191, 168, 0.5);
|
||||
background-color: rgba(240, 155, 66, 0.3);
|
||||
}
|
||||
|
||||
*::selection {
|
||||
background-color: rgba(69, 191, 168, 0.5);
|
||||
background-color: rgba(240, 155, 66, 0.3);
|
||||
}
|
||||
|
||||
.center {
|
||||
|
|
@ -89,7 +89,7 @@ nav {
|
|||
color: #fff;
|
||||
}
|
||||
|
||||
nav #hamburger {
|
||||
nav .hamburger {
|
||||
display: none;
|
||||
fill: #fff;
|
||||
cursor: pointer;
|
||||
|
|
@ -140,6 +140,9 @@ nav .logo {
|
|||
}
|
||||
|
||||
nav .logo span {
|
||||
position: relative;
|
||||
left: 5px;
|
||||
top: 1px;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
vertical-align: top;
|
||||
|
|
@ -196,19 +199,26 @@ nav ul li.active::after {
|
|||
transform: scaleX(2) scaleY(0.5);
|
||||
}
|
||||
|
||||
nav.dark-blue {
|
||||
background: rgb(32, 39, 51);
|
||||
}
|
||||
|
||||
/* -- main panel styling -- */
|
||||
.portico-landing {
|
||||
position: relative;
|
||||
|
||||
transition: all 0.5s ease;
|
||||
margin-top: 200px;
|
||||
margin-top: -80px;
|
||||
-webkit-transform: translateY(120px);
|
||||
transform: translateY(120px);
|
||||
opacity: 0;
|
||||
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.portico-landing.show {
|
||||
margin-top: -80px;
|
||||
-webkit-transform: translateY(0px);
|
||||
transform: translateY(0px);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
|
@ -303,6 +313,18 @@ a:not(.no-style):hover:before {
|
|||
align-items: center;
|
||||
}
|
||||
|
||||
.float.left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.float.right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.float.clear {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.small {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
|
@ -394,6 +416,656 @@ a:not(.no-style):hover:before {
|
|||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
/* -- hello page -- */
|
||||
.portico-landing.hello {
|
||||
background-color: #fff;
|
||||
color: #414e67;
|
||||
}
|
||||
|
||||
.portico-landing.hello .hero {
|
||||
position: relative;
|
||||
padding: 100px 50px 320px 50px;
|
||||
|
||||
background-color: #262d3a;
|
||||
color: #bac0cc;
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.portico-landing.hello .hero .waves {
|
||||
position: absolute;
|
||||
|
||||
width: 150vw;
|
||||
height: 150vw;
|
||||
|
||||
top: 650px;
|
||||
left: -25vw;
|
||||
|
||||
z-index: 0;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.portico-landing.hello .hero .waves .wave {
|
||||
position: absolute;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
background-color: white;
|
||||
border-radius: 35%;
|
||||
|
||||
opacity: 0.3;
|
||||
|
||||
animation-name: waves;
|
||||
animation-duration: 15s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
|
||||
.portico-landing.hello .hero .waves .wave.dark-blue {
|
||||
background-color: #141d2e;
|
||||
}
|
||||
|
||||
.portico-landing.hello .hero .waves .wave.light-blue {
|
||||
background-color: rgba(220, 71, 71, 0.9);
|
||||
|
||||
animation-duration: 18s;
|
||||
|
||||
}
|
||||
|
||||
.portico-landing.hello .hero .waves .wave.light-green {
|
||||
background-color: rgba(129, 241, 255, 0.75);
|
||||
|
||||
animation-name: wavesBackward;
|
||||
animation-duration: 21s;
|
||||
}
|
||||
|
||||
@keyframes waves {
|
||||
0% {
|
||||
transform: rotate(0);
|
||||
}
|
||||
50% {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes wavesBackward {
|
||||
0% {
|
||||
transform: rotate(0);
|
||||
}
|
||||
50% {
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(-360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.portico-landing.hello .hero .content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.portico-landing.hello .hero header {
|
||||
width: 700px;
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.portico-landing.hello .hero header h1 {
|
||||
font-size: 3em;
|
||||
}
|
||||
|
||||
.portico-landing.hello .hero header p {
|
||||
margin: 30px 0px;
|
||||
|
||||
font-size: 1.2em;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.portico-landing.hello .hero header button {
|
||||
padding: 8px 15px;
|
||||
|
||||
background-color: #52c2af;
|
||||
border: none;
|
||||
|
||||
font-size: 1em;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
|
||||
box-shadow: 0px 1px 2px rgba(0,0,0,0.2);
|
||||
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.portico-landing.hello .hero header button:hover {
|
||||
background-color: #3fcdb6;
|
||||
|
||||
box-shadow: 0px 2px 5px rgba(0,0,0,0.18);
|
||||
}
|
||||
|
||||
.portico-landing.hello .hero header button:active {
|
||||
background-color: #44a796;
|
||||
|
||||
box-shadow: 0px 1px 1px rgba(0,0,0,0.18);
|
||||
}
|
||||
|
||||
.portico-landing.hello .hero header .download-button {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.portico-landing.hello .hero header #see_all_apps {
|
||||
display: inline-block;
|
||||
margin-top: 10px;
|
||||
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.portico-landing.hello .col-2 {
|
||||
width: 60%;
|
||||
margin-right: -4px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.portico-landing.hello .col-3 {
|
||||
width: 33.3%;
|
||||
margin-right: -4px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
|
||||
.portico-landing.hello .col-4 {
|
||||
width: 20%;
|
||||
margin-right: -4px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.screen .line {
|
||||
width: 100%;
|
||||
height: 6px;
|
||||
margin: 8px 0px;
|
||||
|
||||
background-color: #eee;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.screen .line.small {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
.screen .line.micro {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
|
||||
width: 15%;
|
||||
}
|
||||
|
||||
.screen .line.darker {
|
||||
background-color: #bbb;
|
||||
}
|
||||
|
||||
.screen .line.nano {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
|
||||
width: 10%;
|
||||
}
|
||||
|
||||
.screen .line.med {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.screen .col-4 .action-block {
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.screen .col-4 .action-block .sub-block {
|
||||
margin: 0px 10px;
|
||||
}
|
||||
|
||||
.screen .line.red {
|
||||
background-color: rgb(222, 172, 180);
|
||||
}
|
||||
|
||||
.screen .line.blue {
|
||||
background-color: rgb(172, 211, 222);
|
||||
}
|
||||
|
||||
.screen .line.green {
|
||||
background-color: rgb(173, 222, 172);
|
||||
}
|
||||
|
||||
.screen .line.orange {
|
||||
background-color: rgb(222, 197, 172);
|
||||
}
|
||||
|
||||
.screen .top .avatar {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-color: #bbb;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.screen .top .top-line {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
|
||||
width: 50px;
|
||||
margin-top: 0px;
|
||||
|
||||
background-color: #bbb;
|
||||
}
|
||||
|
||||
.screen .navbar {
|
||||
background-color: #52c2af;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.screen .center-page {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.screen .center-page .message-feed {
|
||||
height: calc(100% - 20px);
|
||||
margin-top: 20px;
|
||||
|
||||
transition: all 0.1s ease;
|
||||
}
|
||||
|
||||
.screen .message-feed .message .content {
|
||||
margin-left: 24px;
|
||||
position: relative;
|
||||
top: -15px;
|
||||
}
|
||||
|
||||
.screen .message-feed .stream {
|
||||
padding: 3px 5px 0px 5px;
|
||||
margin: 0px 5px;
|
||||
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
|
||||
box-shadow: 0px 0px 15px rgba(0,0,0,0.01);
|
||||
}
|
||||
|
||||
.portico-landing.hello .screen.hero-screen {
|
||||
padding: 95px 170px;
|
||||
height: 385px;
|
||||
|
||||
background-image: url(/static/images/landing-page/macbook-empty.png);
|
||||
background-size: 100% auto;
|
||||
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.portico-landing.hello .screen.hero-screen::before,
|
||||
.portico-landing.hello .screen.hero-screen::after {
|
||||
content: "";
|
||||
display: none;
|
||||
}
|
||||
|
||||
.portico-landing.hello .screen.hero-screen .main-page {
|
||||
transform: translateY(-12px) translateX(3px);
|
||||
-webkit-transform: translateY(-12px) translateX(3px);
|
||||
-moz-transform: translateY(-12px) translateX(3px);
|
||||
border: 5px solid #000;
|
||||
}
|
||||
|
||||
.portico-landing.hello .screen {
|
||||
position: relative;
|
||||
margin: -300px auto 0px auto;
|
||||
|
||||
width: 600px;
|
||||
background-color: #fafafa;
|
||||
height: 350px;
|
||||
|
||||
padding: 10px 30px 10px 30px;
|
||||
|
||||
border-radius: 12px;
|
||||
box-shadow: 0px 0px 50px rgba(0,0,0,0.2);
|
||||
|
||||
background-color: #444;
|
||||
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.portico-landing.hello .screen::before {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
top: calc(50% - 5px);
|
||||
left: 20px;
|
||||
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
|
||||
border-radius: 5px;
|
||||
background-color: #222;
|
||||
}
|
||||
|
||||
.portico-landing.hello .screen::after {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
top: calc(50% - 12.5px);
|
||||
right: 8px;
|
||||
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
|
||||
border-radius: 13px;
|
||||
background-color: #bbb;
|
||||
}
|
||||
|
||||
.portico-landing.hello .screen .main-page {
|
||||
display: inline-block;
|
||||
|
||||
height: calc(100% - 30px);
|
||||
width: calc(100% - 30px);
|
||||
margin: 10px;
|
||||
|
||||
border: 5px solid #222;
|
||||
border-radius: 4px;
|
||||
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.portico-landing.hello .features {
|
||||
padding: 50px 0px 100px 0px;
|
||||
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.portico-landing.hello .features .col-3 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.portico-landing.hello .features .col-3 .il-block {
|
||||
display: inline-block;
|
||||
width: 75%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.portico-landing.hello .features .col-3 h2 {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.portico-landing.hello .testimonials {
|
||||
color: #bac0cc;
|
||||
background-color: #262d3a;
|
||||
}
|
||||
|
||||
.portico-landing.hello .testimonials .text-header .text-content {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.portico-landing.hello .testimonials .text-header .action-content {
|
||||
float: right;
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
.portico-landing.hello .testimonials .quote-container {
|
||||
width: 60%;
|
||||
margin: 30px auto 20px auto;
|
||||
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.portico-landing.hello .testimonials blockquote::before {
|
||||
content: "“";
|
||||
margin-left: -10px;
|
||||
margin-right: -3px;
|
||||
}
|
||||
|
||||
.portico-landing.hello .testimonials blockquote::after {
|
||||
content: "”";
|
||||
margin-left: -3px;
|
||||
}
|
||||
|
||||
.portico-landing.hello .testimonials blockquote + cite {
|
||||
display: block;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 30px;
|
||||
|
||||
color: #797f8c;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
|
||||
.portico-landing.hello .testimonials blockquote {
|
||||
padding: 0px;
|
||||
|
||||
font-weight: 400;
|
||||
line-height: 1.6;
|
||||
text-align: left;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.portico-landing.hello .testimonials hr {
|
||||
width: 60%;
|
||||
margin: 0 auto;
|
||||
border: none;
|
||||
border-bottom: 1px solid #555;
|
||||
}
|
||||
|
||||
.portico-landing.hello .testimonials .company-container {
|
||||
width: 60%;
|
||||
margin: 20px auto;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.portico-landing.hello .testimonials .company-box {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.portico-landing.hello .testimonials .company-container header h2 {
|
||||
font-weight: 400;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.portico-landing.hello .testimonials .company-container header .arrow {
|
||||
margin-top: 12px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.portico-landing.hello .testimonials .company-box .company {
|
||||
display: inline-block;
|
||||
margin: 10px 20px;
|
||||
|
||||
height: 60px;
|
||||
width: calc(20% - 44px);
|
||||
|
||||
background-color: #aaa;
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
/* -- company logos -- */
|
||||
.portico-landing.hello .testimonials .company-box .company.akamai {
|
||||
background-image: url(/static/images/landing-page/logos/akamai.png);
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.portico-landing.hello .testimonials .company-box .company.doctorondemand {
|
||||
background-image: url(/static/images/landing-page/logos/doctorondemand.png);
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.portico-landing.hello .testimonials .company-box .company.layershift {
|
||||
background-image: url(/static/images/landing-page/logos/layershift.png);
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.portico-landing.hello .testimonials .company-box .company.recurse {
|
||||
background-image: url(/static/images/landing-page/logos/recurse.png);
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.portico-landing.hello .testimonials .company-box .company.solano {
|
||||
background-image: url(/static/images/landing-page/logos/solano.png);
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.portico-landing.hello .testimonials .company-box .company.veelo {
|
||||
background-image: url(/static/images/landing-page/logos/veelo.png);
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.portico-landing.hello .testimonials .company-box .company.panjiva {
|
||||
background-image: url(/static/images/landing-page/logos/panjiva.png);
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.portico-landing.hello .testimonials .company-box .company.cmt {
|
||||
background-image: url(/static/images/landing-page/logos/cambridge-mobile-telematics.png);
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.portico-landing.hello .testimonials .company-box .company.levelup {
|
||||
background-image: url(/static/images/landing-page/logos/levelup.png);
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.portico-landing.hello .apps {
|
||||
padding: 80px;
|
||||
|
||||
background: #50C9C3;
|
||||
background: -webkit-linear-gradient(145deg, #25b197, #4bb4cc);
|
||||
background: linear-gradient(145deg, #4bb4cc, #25b197);
|
||||
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.portico-landing.hello .apps .arrow {
|
||||
color: #fff;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.portico-landing.hello .apps .arrow::before {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.portico-landing.hello .apps .left-side,
|
||||
.portico-landing.hello .apps .right-side {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.portico-landing.hello .apps .left-side {
|
||||
width: calc(60% - 4px);
|
||||
}
|
||||
|
||||
.portico-landing.hello .apps .right-side {
|
||||
width: calc(40% - 4px);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.portico-landing.hello .apps .left-side .content {
|
||||
width: 650px;
|
||||
margin: 0 auto 50px auto;
|
||||
}
|
||||
|
||||
.portico-landing.hello .apps .left-side .platform-icons {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.portico-landing.hello .apps .left-side .platform-icons .group h2 {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.portico-landing.hello .apps .left-side .platform-icons .group {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin: 0px 30px;
|
||||
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.portico-landing.hello .apps .left-side .platform-icons .group a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.portico-landing.hello .apps .left-side .platform-icons .group i {
|
||||
display: inline-block;
|
||||
width: 80px;
|
||||
|
||||
font-size: 3.5em;
|
||||
}
|
||||
|
||||
.portico-landing.hello .apps .arrow::after {
|
||||
-webkit-filter: brightness(4) saturate(0);
|
||||
-moz-filter: brightness(4) saturate(0);
|
||||
filter: brightness(4) saturate(0);
|
||||
}
|
||||
|
||||
.portico-landing.hello .call-to-action-bottom {
|
||||
position: relative;
|
||||
padding: 125px 100px 20px 100px;
|
||||
margin-top: 0px;
|
||||
|
||||
background-color: rgb(32, 39, 51);
|
||||
}
|
||||
|
||||
.portico-landing.hello .call-to-action-bottom button {
|
||||
display: block;
|
||||
margin: 20px auto 0 auto;
|
||||
padding: 12px 25px 10px 25px;
|
||||
|
||||
font-size: 1.2rem;
|
||||
color: #bac0cc;
|
||||
|
||||
border: 1px solid #bac0cc;
|
||||
background: transparent;
|
||||
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.portico-landing.hello .call-to-action-bottom button:hover {
|
||||
border-color: #fff;
|
||||
background: #fff;
|
||||
color: #414e67;
|
||||
}
|
||||
|
||||
.portico-landing.hello .call-to-action-bottom h1 {
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.portico-landing.hello .call-to-action-bottom .zulip-octopus {
|
||||
margin: 130px auto 0 auto;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background-image: url(/static/images/landing-page/zulip-octopus.png);
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.footer.hello {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.footer.hello li a {
|
||||
color: #bac0cc;
|
||||
}
|
||||
|
||||
.footer.hello li a:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* -- apps page -- */
|
||||
.portico-landing.apps .main,
|
||||
.portico-landing.features-app .main {
|
||||
|
|
@ -695,6 +1367,83 @@ a:not(.no-style):hover:before {
|
|||
width: 195px;
|
||||
}
|
||||
|
||||
.portico-landing.hello .apps .screen {
|
||||
display: inline-block;
|
||||
margin: 0px 10px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
|
||||
.portico-landing.hello .apps .screen.ios {
|
||||
width: 200px;
|
||||
height: 350px;
|
||||
padding: 30px 0px;
|
||||
border-radius: 20px;
|
||||
|
||||
-webkit-transform: translateY(50px);
|
||||
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.portico-landing.hello .apps .screen.android {
|
||||
width: 200px;
|
||||
height: 370px;
|
||||
padding: 10px 0px 30px 0px;
|
||||
border-radius: 20px;
|
||||
|
||||
-webkit-transform: translateY(-50px);
|
||||
|
||||
background: linear-gradient(90deg, #444 0%, #555 8%, #555 92%, #444 100%);
|
||||
}
|
||||
|
||||
.portico-landing.hello .apps .screen .center-page {
|
||||
height: calc(100% - 20px);
|
||||
}
|
||||
|
||||
.portico-landing.hello .apps .screen .center-page .message-feed {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.portico-landing.hello .apps .screen.ios::before {
|
||||
top: 17px;
|
||||
left: calc(50% - 20px);
|
||||
|
||||
width: 40px;
|
||||
height: 5px;
|
||||
background-color: #ccc;
|
||||
}
|
||||
|
||||
.portico-landing.hello .apps .screen.ios::after {
|
||||
top: auto;
|
||||
bottom: 7px;
|
||||
left: calc(50% - 12.5px);
|
||||
background-color: #ccc;
|
||||
}
|
||||
|
||||
.portico-landing.hello .apps .screen.android::before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
.portico-landing.hello .apps .screen.android::after {
|
||||
top: auto;
|
||||
bottom: 10px;
|
||||
left: calc(50% - 17.5px);
|
||||
background-color: #ccc;
|
||||
|
||||
border-radius: 8px;
|
||||
background-color: #222;
|
||||
width: 35px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.portico-landing.hello .apps .screen.ios .main-page {
|
||||
border-color: #ddd;
|
||||
}
|
||||
|
||||
.portico-landing.hello .apps .screen.android .main-page {
|
||||
border-color: #222;
|
||||
}
|
||||
|
||||
/* -- integrations page css -- */
|
||||
.portico-landing.integrations {
|
||||
color: #444;
|
||||
|
|
@ -831,6 +1580,16 @@ a:not(.no-style):hover:before {
|
|||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1295px) {
|
||||
.portico-landing.hello .apps .right-side {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.portico-landing.hello .apps .left-side {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
.feature-block .flex {
|
||||
height: 130px;
|
||||
|
|
@ -891,6 +1650,47 @@ a:not(.no-style):hover:before {
|
|||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.portico-landing.hello .screen.hero-screen {
|
||||
width: 420px;
|
||||
height: 282px;
|
||||
padding: 65px 117px;
|
||||
}
|
||||
|
||||
.portico-landing.hello .screen.hero-screen .main-page {
|
||||
overflow: hidden;
|
||||
transform: translateY(-12px) translateX(2px);
|
||||
}
|
||||
|
||||
.screen.hero-screen .col-4 .action-block {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.screen.hero-screen .line {
|
||||
height: 4px;
|
||||
margin: 4px 0px;
|
||||
}
|
||||
|
||||
.screen .message-feed .message .content {
|
||||
top: -12px;
|
||||
}
|
||||
|
||||
.portico-landing.hello .apps {
|
||||
padding: 80px 50px;
|
||||
}
|
||||
|
||||
.portico-landing.hello .apps .left-side .content {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.portico-landing.hello .testimonials .quote-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.portico-landing.hello .testimonials hr,
|
||||
.portico-landing.hello .testimonials .company-container {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
|
|
@ -946,6 +1746,24 @@ a:not(.no-style):hover:before {
|
|||
.platform.description {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.portico-landing.hello .hero header {
|
||||
width: 600px;
|
||||
}
|
||||
|
||||
.portico-landing.hello .apps .left-side .content {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.portico-landing.hello .screen.hero-screen {
|
||||
width: 300px;
|
||||
height: 201px;
|
||||
padding: 43px 73px;
|
||||
}
|
||||
|
||||
.portico-landing.hello .features .col-3 {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 666px) {
|
||||
|
|
@ -955,6 +1773,22 @@ a:not(.no-style):hover:before {
|
|||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.portico-landing.hello .hero header {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.portico-landing.hello .screen.hero-screen {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.portico-landing.hello .hero {
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
|
||||
.portico-landing.hello .hero .waves {
|
||||
height: 450px;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
margin-top: 0px;
|
||||
text-align: left;
|
||||
|
|
@ -964,7 +1798,7 @@ a:not(.no-style):hover:before {
|
|||
display: inline-block;
|
||||
}
|
||||
|
||||
nav #hamburger {
|
||||
nav .hamburger {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
}
|
||||
|
|
@ -1052,6 +1886,11 @@ a:not(.no-style):hover:before {
|
|||
.portico-landing.apps .main .details-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.portico-landing.hello .testimonials .company-box .company {
|
||||
margin: 10px;
|
||||
width: calc(33% - 24px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-device-width: 450px) {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,43 @@
|
|||
<div class="footer">
|
||||
<div class="footer-main">
|
||||
<ul class="footer-navigation">
|
||||
{% if about_link_disabled %}
|
||||
{% else %}
|
||||
<li><a class="no-style" href="{{ server_uri }}/hello">{{ _('About') }}</a></li>
|
||||
<li><span class="little-bullet">·</span></li>
|
||||
{% endif %}
|
||||
|
||||
<li><a class="no-style" href="{{ server_uri }}/terms">{{ _('Legal') }}</a></li>
|
||||
<li><span class="little-bullet">·</span></li>
|
||||
<li><a class="no-style" href="{{ server_uri }}/privacy">{{ _('Privacy') }}</a></li>
|
||||
<li><span class="little-bullet">·</span></li>
|
||||
<li><a class="no-style" href="{{ server_uri }}/features">{{ _('Features') }}</a></li>
|
||||
<li><span class="little-bullet">·</span></li>
|
||||
<li><a class="no-style" href="{{ server_uri }}/help">{{ _('User documentation') }}</a></li>
|
||||
|
||||
{% if login_link_disabled %}
|
||||
{% else %}
|
||||
<li><span class="little-bullet">·</span></li>
|
||||
<li><a class="no-style" href="{{login_url}}">{{ _('Log in') }}</a></li>
|
||||
{% endif %}
|
||||
|
||||
{% if register_link_disabled %}
|
||||
{% elif only_sso %}
|
||||
{% else %}
|
||||
<li><span class="little-bullet">·</span></li>
|
||||
<li><a class="no-style" href="{{ url('register') }}">{{ _('Register') }}</a></li>
|
||||
{% endif %}
|
||||
|
||||
{% if open_realm_creation %}
|
||||
<li><span class="little-bullet">·</span></li>
|
||||
<li><a class="no-style" href="{{ server_uri }}/create_realm">{{ _('Create new organization') }}</a></li>
|
||||
{% endif %}
|
||||
|
||||
{% if find_team_link_disabled %}
|
||||
{% else %}
|
||||
<li><span class="little-bullet">·</span></li>
|
||||
<li><a class="no-style" href="{{ server_uri }}/find_my_team">{{ _('Find my team') }}</a></li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,204 +1,533 @@
|
|||
{% extends "zerver/portico.html" %}
|
||||
{% block hello_page_container %} hello-main{% endblock %}
|
||||
{% block os_announcement %}
|
||||
{% if show_oss_announcement %}
|
||||
<div class="os-headline-container">
|
||||
<img src="/static/images/logo/zballoon.png" class="os-illustration" alt="Zulip balloon" />
|
||||
<div class="main-headline-text">
|
||||
<span class="tagline os-tagline">
|
||||
{{ _('Zulip has been released as open source software!') }}
|
||||
</span>
|
||||
<span class="footnote os-footnote">
|
||||
{% trans %}Read the <a href="https://blogs.dropbox.com/tech/2015/09/open-sourcing-zulip-a-dropbox-hack-week-project" target="_blank">announcement</a> or go to <a href="https://www.zulip.org" target="_blank">the Zulip open source project website</a>.{% endtrans %}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% block customhead %}
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
{% stylesheet 'portico' %}
|
||||
{% stylesheet 'landing-page' %}
|
||||
{{ minified_js('landing-page')|safe }}
|
||||
<style>
|
||||
html {
|
||||
background: rgb(32, 39, 51);
|
||||
}
|
||||
</style>
|
||||
|
||||
{% endblock %}
|
||||
|
||||
{% block portico_content %}
|
||||
<div class="app main-headline">
|
||||
<div class="app-main main-headline-container">
|
||||
<img src="/static/images/logo/textlogo@2x.png" class="main-headline-logo" alt="Zulip logo" />
|
||||
<div class="main-headline-text">
|
||||
<span class="tagline">
|
||||
{{ _('Finally, workplace chat that actually improves your productivity.*') }}
|
||||
</span>
|
||||
<span class="footnote">{{ _("* It's also great for sharing cat pictures.") }}</span>
|
||||
{% if register_link_disabled %}
|
||||
{% elif only_sso %}
|
||||
<a href="{{ url('login-sso') }}" class="main-signup-button btn btn-large btn-primary">{{ _('Log in now!') }}</a>
|
||||
{% else %}
|
||||
<a href="{{ url('register') }}" class="main-signup-button btn btn-large btn-primary">{{ _('Register now!') }}</a>
|
||||
{% endif %}
|
||||
|
||||
{% include 'zerver/landing_nav_blue.html' %}
|
||||
<div class="portico-landing hello show">
|
||||
<div class="hero">
|
||||
<div class="content">
|
||||
<header>
|
||||
<h1>The world's most productive group chat</h1>
|
||||
<p>
|
||||
Zulip combines the immediacy of Slack with Gmail's
|
||||
threading model. <br />With Zulip, you don't have to
|
||||
choose between missing important conversations and
|
||||
wasting time reading irrelevant ones.
|
||||
</p>
|
||||
{% if register_link_disabled %}
|
||||
{% elif only_sso %}
|
||||
<a href="{{ url('login-sso') }}">
|
||||
<button href="" class="download-button" type="button"
|
||||
name="button">{{ _('Log in now!') }}</button>
|
||||
</a>
|
||||
{% else %}
|
||||
<a href="{{ url('register') }}">
|
||||
<button href="" class="download-button" type="button"
|
||||
name="button">{{ _('Register now!') }}</button>
|
||||
</a>
|
||||
{% endif %}
|
||||
<!-- we want this to be il-block so we'll put a <br> above so it's on
|
||||
the next line.
|
||||
<a id="see_all_apps" class="arrow">See all apps</a>
|
||||
-->
|
||||
</header>
|
||||
</div>
|
||||
</div>
|
||||
<img src="/static/images/landing-page/laptop-screenshot.png" class="main-image" alt="Screenshot of Zulip" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="app feature-line dark">
|
||||
<div class="app-main feature-line-container">
|
||||
<div class="feature-text">
|
||||
<span class="tagline">
|
||||
{{ _('Make sense of your messages.') }}
|
||||
</span>
|
||||
<span class="description">
|
||||
<p>{% trans %}Every conversation in Zulip has a <em>topic</em>, so it’s
|
||||
easy to keep conversations straight. Are other users discussing
|
||||
a software bug and the content of your website at the same time?
|
||||
No problem.{% endtrans %}
|
||||
</p>
|
||||
</span>
|
||||
</div>
|
||||
<div class="feature-illustration">
|
||||
<img class="feature-image" src="/static/images/landing-page/threads.png" alt="message threading in Zulip" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="screen hero-screen">
|
||||
<div class="main-page">
|
||||
<div class="left-sidebar col-4">
|
||||
<div class="action-block">
|
||||
<div class="line med"></div>
|
||||
<div class="line"></div>
|
||||
<div class="line"></div>
|
||||
<div class="line med"></div>
|
||||
</div>
|
||||
<div class="action-block">
|
||||
<div class="line small red"></div>
|
||||
<div class="sub-block">
|
||||
<div class="line small"></div>
|
||||
<div class="line"></div>
|
||||
<div class="line med"></div>
|
||||
<div class="line med"></div>
|
||||
</div>
|
||||
<div class="line blue"></div>
|
||||
<div class="sub-block">
|
||||
<div class="line small"></div>
|
||||
<div class="line"></div>
|
||||
<div class="line small"></div>
|
||||
</div>
|
||||
<div class="line green"></div>
|
||||
<div class="sub-block">
|
||||
<div class="line"></div>
|
||||
<div class="line med"></div>
|
||||
<div class="line small"></div>
|
||||
<div class="line med"></div>
|
||||
<div class="line"></div>
|
||||
</div>
|
||||
<div class="line med orange"></div>
|
||||
<div class="sub-block">
|
||||
<div class="line med"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="center-page col-2">
|
||||
<div class="message-feed">
|
||||
<div class="stream">
|
||||
<div class="line micro red"></div>
|
||||
<div class="line nano"></div>
|
||||
|
||||
<div class="app feature-line light">
|
||||
<div class="app-main feature-line-container">
|
||||
<div class="feature-text">
|
||||
<span class="tagline">
|
||||
{{ _('Never miss the conversations you care about.') }}
|
||||
</span>
|
||||
<span class="description">
|
||||
<p>{% trans %}Sometimes, important things get discussed when you’re not
|
||||
around. Unfortunately, so do a lot of unimportant things.{% endtrans %}</p>
|
||||
<div class="message">
|
||||
<div class="top">
|
||||
<div class="avatar"></div>
|
||||
<div class="line top-line"></div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="line"></div>
|
||||
<div class="line"></div>
|
||||
<div class="line med"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="message">
|
||||
<div class="top">
|
||||
<div class="avatar"></div>
|
||||
<div class="line top-line"></div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="line med"></div>
|
||||
<div class="line small"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stream">
|
||||
<div class="line micro green"></div>
|
||||
<div class="line nano"></div>
|
||||
|
||||
<p>{% trans %}Zulip makes it easy to review the conversations
|
||||
you missed, so you can focus on that important project
|
||||
without having to catch up on how Jim’s guitar
|
||||
lessons are going.{% endtrans %}</p>
|
||||
</span>
|
||||
</div>
|
||||
<div class="feature-illustration">
|
||||
<img class="feature-image shadow" src="/static/images/landing-page/important-things.png" alt="Zulip streams bar" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="message">
|
||||
<div class="top">
|
||||
<div class="avatar"></div>
|
||||
<div class="line top-line"></div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="line"></div>
|
||||
<div class="line small"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="message">
|
||||
<div class="top">
|
||||
<div class="avatar"></div>
|
||||
<div class="line top-line"></div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="line"></div>
|
||||
<div class="line small"></div>
|
||||
<div class="line med"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="message">
|
||||
<div class="top">
|
||||
<div class="avatar"></div>
|
||||
<div class="line top-line"></div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="line med"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stream">
|
||||
<div class="line micro blue"></div>
|
||||
<div class="line nano"></div>
|
||||
|
||||
<div class="app feature-line dark">
|
||||
<div class="app-main feature-line-container">
|
||||
<div class="feature-text">
|
||||
<span class="tagline">
|
||||
{{ _("Fast and powerful search.") }}
|
||||
</span>
|
||||
<span class="description">
|
||||
{% trans %}An impressive amount of knowledge lives in your chat system. Zulip’s
|
||||
Gmail-style search will delight you with how quickly you can find
|
||||
exactly what you’re looking for.{% endtrans %}
|
||||
</span>
|
||||
</div>
|
||||
<div class="feature-illustration">
|
||||
<img class="feature-image shadow" src="/static/images/landing-page/better-search.png" alt="example of Zulip search" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="message">
|
||||
<div class="top">
|
||||
<div class="avatar"></div>
|
||||
<div class="line top-line"></div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="line med"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="message">
|
||||
<div class="top">
|
||||
<div class="avatar"></div>
|
||||
<div class="line top-line"></div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="line med"></div>
|
||||
<div class="line small"></div>
|
||||
<div class="line small"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stream">
|
||||
<div class="line micro green"></div>
|
||||
<div class="line nano"></div>
|
||||
|
||||
<div class="app feature-line light">
|
||||
<div class="app-main feature-line-container">
|
||||
<div class="feature-text">
|
||||
<span class="tagline">
|
||||
{{ _("Integrations that don't intrude.") }}
|
||||
</span>
|
||||
<span class="description">
|
||||
<p>{% trans %}Zulip has <a href="/integrations">many
|
||||
integrations</a> and a powerful <a href="/api">API</a> to
|
||||
match. But here’s where it gets interesting: thanks to how
|
||||
Zulip categorizes messages, automated messages never overwhelm
|
||||
you. As with any topic in Zulip, they’re easy to focus on,
|
||||
skim, defer to later, or ignore—as appropriate.{% endtrans %}</p>
|
||||
</span>
|
||||
</div>
|
||||
<div class="feature-illustration">
|
||||
<img class="feature-image shadow" src="/static/images/landing-page/integrations.png" alt="Zulip's Jenkins integration" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="message">
|
||||
<div class="top">
|
||||
<div class="avatar"></div>
|
||||
<div class="line top-line"></div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="line"></div>
|
||||
<div class="line small"></div>
|
||||
<div class="line med"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="message">
|
||||
<div class="top">
|
||||
<div class="avatar"></div>
|
||||
<div class="line top-line"></div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="line"></div>
|
||||
<div class="line small"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="message">
|
||||
<div class="top">
|
||||
<div class="avatar"></div>
|
||||
<div class="line top-line"></div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="line med"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-sidebar col-4">
|
||||
<div class="action-block">
|
||||
<div class="line small darker"></div>
|
||||
<div class="line"></div>
|
||||
<div class="line"></div>
|
||||
<div class="line med"></div>
|
||||
<div class="line"></div>
|
||||
<div class="line"></div>
|
||||
<div class="line med"></div>
|
||||
<div class="line med"></div>
|
||||
<div class="line"></div>
|
||||
<div class="line med"></div>
|
||||
<div class="line med"></div>
|
||||
<div class="line"></div>
|
||||
</div>
|
||||
|
||||
<div class="app feature-line dark">
|
||||
<div class="app-main feature-line-container">
|
||||
<div class="feature-text">
|
||||
<span class="tagline">
|
||||
{{ _('As technical as you want to be.') }}
|
||||
</span>
|
||||
<span class="description">
|
||||
<p>{{ _('Keyboard shortcuts? Check.') }}<br />
|
||||
{{ _('Syntax highlighting? Check.') }}<br />
|
||||
{{ _('Discuss code and technical topics with ease.') }}</p>
|
||||
</span>
|
||||
</div>
|
||||
<div class="feature-illustration">
|
||||
<img class="feature-image shadow" src="/static/images/landing-page/technical.png" alt="code highlighting in Zulip" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="app feature-line light">
|
||||
<div class="app-main feature-line-container">
|
||||
<div class="feature-text">
|
||||
<span class="tagline">
|
||||
… {{ _('Everything else you need to be productive.') }}
|
||||
</span>
|
||||
<span class="description">
|
||||
<p>{% trans %}Drag-and-drop file uploads, image pasting, group
|
||||
private messages, audible notifications, missed-message
|
||||
emails, desktop apps, and <a href="/features">everything else
|
||||
you might want</a>. Including emoji, naturally. And it's all
|
||||
open source under the Apache license!{% endtrans %}</p>
|
||||
</span>
|
||||
</div>
|
||||
<div class="feature-illustration">
|
||||
<img class="feature-image shadow" src="/static/images/landing-page/features.png" alt="unicode and emoji in Zulip" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="app feature-line dark">
|
||||
<div class="app-main feature-line-container">
|
||||
<div class="platform-text">
|
||||
<span class="tagline">
|
||||
{{ _('On the platform of your choice.') }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="platform-icons">
|
||||
<div class="platform">
|
||||
<i class="icon-vector-apple platform-icon"></i>
|
||||
<h4>Mac</h4>
|
||||
</div>
|
||||
<div class="platform">
|
||||
<i class="icon-vector-windows platform-icon"></i>
|
||||
<h4>Windows</h4>
|
||||
</div>
|
||||
<div class="platform">
|
||||
<i class="icon-vector-linux platform-icon"></i>
|
||||
<h4>Linux</h4>
|
||||
</div>
|
||||
<div class="platform">
|
||||
<i class="icon-vector-android platform-icon"></i>
|
||||
<h4>Android</h4>
|
||||
</div>
|
||||
<div class="platform">
|
||||
<i class="icon-vector-mobile-phone platform-icon"></i>
|
||||
<h4>iOS</h4>
|
||||
</div>
|
||||
<div class="platform">
|
||||
<i class="icon-vector-desktop platform-icon"></i>
|
||||
<h4>Web</h4>
|
||||
</div>
|
||||
<div class="action-block">
|
||||
<div class="line small darker"></div>
|
||||
<div class="line"></div>
|
||||
<div class="line med"></div>
|
||||
<div class="line"></div>
|
||||
<div class="line med"></div>
|
||||
<div class="line med"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="app feature-line light">
|
||||
<div class="app-main feature-line-container centered-content">
|
||||
{% if register_link_disabled %}
|
||||
{% elif only_sso %}
|
||||
<a href="{{ url('login-sso') }}" class="bottom-signup-button btn btn-large btn-primary">{{ _('Log in now') }}</a>
|
||||
{% else %}
|
||||
<a href="{{ url('register') }}" class="bottom-signup-button btn btn-large btn-primary">{{ _('Register now') }}</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="features">
|
||||
<header>
|
||||
|
||||
</header>
|
||||
<div class="content">
|
||||
<div class="col-3">
|
||||
<div class="il-block">
|
||||
<h2>Organized</h2>
|
||||
<p>
|
||||
Tired of important discussions being disrupted
|
||||
by automated messages, lunch plans and random
|
||||
links? With Zulip, each conversation has its
|
||||
own thread. Looking for a conversation from
|
||||
two months ago? Zulip's fast and powerful
|
||||
search experience will delight you.
|
||||
</p>
|
||||
<p>
|
||||
Share content with drag-and-drop file uploads,
|
||||
link previews and inline images.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<div class="il-block">
|
||||
<h2>Fully Featured</h2>
|
||||
<p>
|
||||
Zulip has everything you want in group
|
||||
chat. Apps for the iPhone, Android and
|
||||
desktop. More than 60 integrations (GitHub,
|
||||
Jira, Stripe, Zendesk, etc.). Keyboard
|
||||
shortcuts. Emoji reactions. Translated into a
|
||||
dozen languages.
|
||||
</p>
|
||||
<p>
|
||||
Need anything else? <a href="/features">We
|
||||
probably have it.</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<div class="il-block">
|
||||
<h2>Open Source</h2>
|
||||
<p>
|
||||
Zulip is 100% open source software, built by a
|
||||
vibrant community of hundreds of developers
|
||||
from all around the world. With 90,000 words
|
||||
of developer documentation, a high quality
|
||||
code base and a welcoming community, it’s easy
|
||||
to extend or tweak Zulip.
|
||||
</p>
|
||||
<p>
|
||||
Zulip has a significantly larger and more
|
||||
active development community than other modern
|
||||
open source group chat solutions like
|
||||
Mattermost, Rocket.Chat, and matrix.org.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="apps">
|
||||
<div class="left-side">
|
||||
<div class="content">
|
||||
<header>
|
||||
<h1>Apps for every platform</h1>
|
||||
</header>
|
||||
<p>
|
||||
Zulip has modern apps for every major platform,
|
||||
powered by Electron and React Native.
|
||||
</p>
|
||||
<br />
|
||||
</div>
|
||||
|
||||
<div class="platform-icons">
|
||||
<div class="group">
|
||||
<h2>Web</h2>
|
||||
<a href="/apps/">
|
||||
<i class="icon-vector-desktop platform-icon"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div class="group">
|
||||
<h2>Desktop</h2>
|
||||
<a class="no-style" href="/apps/#mac">
|
||||
<i class="icon-vector-apple platform-icon"></i>
|
||||
</a>
|
||||
<a class="no-style" href="/apps/#windows">
|
||||
<i class="icon-vector-windows platform-icon"></i>
|
||||
</a>
|
||||
<a class="no-style" href="/apps/#linux">
|
||||
<i class="icon-vector-linux platform-icon"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div class="group">
|
||||
<h2>Mobile</h2>
|
||||
<a class="no-style" href="/apps/#ios">
|
||||
<i class="icon-vector-mobile-phone platform-icon"></i>
|
||||
</a>
|
||||
<a class="no-style" href="/apps/#android">
|
||||
<i class="icon-vector-android platform-icon"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-side">
|
||||
<div class="screen ios">
|
||||
<div class="main-page">
|
||||
<div class="navbar"></div>
|
||||
<div class="center-page">
|
||||
<div class="message-feed">
|
||||
<div class="stream">
|
||||
<div class="line micro red"></div>
|
||||
<div class="line nano"></div>
|
||||
|
||||
<div class="message">
|
||||
<div class="top">
|
||||
<div class="avatar"></div>
|
||||
<div class="line top-line"></div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="line"></div>
|
||||
<div class="line"></div>
|
||||
<div class="line med"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="message">
|
||||
<div class="top">
|
||||
<div class="avatar"></div>
|
||||
<div class="line top-line"></div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="line med"></div>
|
||||
<div class="line"></div>
|
||||
<div class="line small"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stream">
|
||||
<div class="line micro blue"></div>
|
||||
<div class="line nano"></div>
|
||||
|
||||
<div class="message">
|
||||
<div class="top">
|
||||
<div class="avatar"></div>
|
||||
<div class="line top-line"></div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="line med"></div>
|
||||
<div class="line med"></div>
|
||||
<div class="line small"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="message">
|
||||
<div class="top">
|
||||
<div class="avatar"></div>
|
||||
<div class="line top-line"></div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="line"></div>
|
||||
<div class="line"></div>
|
||||
<div class="line small"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="screen android">
|
||||
<div class="main-page">
|
||||
<div class="navbar"></div>
|
||||
<div class="center-page">
|
||||
<div class="message-feed">
|
||||
<div class="stream">
|
||||
<div class="line micro red"></div>
|
||||
<div class="line nano"></div>
|
||||
|
||||
<div class="message">
|
||||
<div class="top">
|
||||
<div class="avatar"></div>
|
||||
<div class="line top-line"></div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="line"></div>
|
||||
<div class="line"></div>
|
||||
<div class="line med"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="message">
|
||||
<div class="top">
|
||||
<div class="avatar"></div>
|
||||
<div class="line top-line"></div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="line med"></div>
|
||||
<div class="line"></div>
|
||||
<div class="line small"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stream">
|
||||
<div class="line micro blue"></div>
|
||||
<div class="line nano"></div>
|
||||
|
||||
<div class="message">
|
||||
<div class="top">
|
||||
<div class="avatar"></div>
|
||||
<div class="line top-line"></div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="line med"></div>
|
||||
<div class="line med"></div>
|
||||
<div class="line small"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="message">
|
||||
<div class="top">
|
||||
<div class="avatar"></div>
|
||||
<div class="line top-line"></div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="line"></div>
|
||||
<div class="line"></div>
|
||||
<div class="line small"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="testimonials">
|
||||
<div class="padded-content">
|
||||
<div class="quote-container">
|
||||
<blockquote>
|
||||
Choosing Zulip over Slack as our group chat is one
|
||||
of the best decisions we've ever made. Zulip makes
|
||||
it easy for our community of 1000 Recursers around
|
||||
the world to stay involved, even years after their
|
||||
batches finish. No other tool has a user
|
||||
experience that scales to a community of our
|
||||
size.</blockquote>
|
||||
<cite>Nick Bergson-Shilcock, founder and CEO, Recurse Center</cite>
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<div class="company-container">
|
||||
<header>
|
||||
<h2 class="float left">Leading organizations use Zulip:</h2>
|
||||
<div class="float clear"></div>
|
||||
</header>
|
||||
<div class="company-box">
|
||||
<div class="company akamai"></div>
|
||||
<div class="company doctorondemand"></div>
|
||||
<div class="company levelup"></div>
|
||||
<div class="company recurse"></div>
|
||||
<div class="company panjiva"></div>
|
||||
<div class="company layershift"></div>
|
||||
<div class="company solano"></div>
|
||||
<div class="company veelo"></div>
|
||||
<div class="company cmt"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="padded-content call-to-action-bottom">
|
||||
<h1>Experience Zulip today!</h1>
|
||||
{% if register_link_disabled %}
|
||||
{% elif only_sso %}
|
||||
<a href="{{ url('login-sso') }}">
|
||||
<button href="" type="button"
|
||||
name="button">{{ _('Log in now!') }}</button>
|
||||
</a>
|
||||
{% else %}
|
||||
<a href="{{ url('register') }}">
|
||||
<button href="" type="button"
|
||||
name="button">{{ _('Register now!') }}</button>
|
||||
</a>
|
||||
{% endif %}
|
||||
<div class="zulip-octopus"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -4,11 +4,11 @@
|
|||
<div class="faded"></div>
|
||||
<div class="faded-light"></div>
|
||||
<div class="content">
|
||||
<a class="brand logo" href="{{ server_uri }}">
|
||||
<a class="brand logo no-style" href="{{ server_uri }}">
|
||||
<svg class="brand-logo" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 40 40" version="1.1">
|
||||
<g transform="translate(-297.14285,-466.64792)">
|
||||
<circle cx="317.14285" cy="486.64792" r="19.030317" style="fill:#fff;stroke-width:1.93936479;stroke:transparent"></circle>
|
||||
<path d="m309.24286 477.14791 14.2 0 1.6 3.9-11.2 11.9 9.6 0 1.6 3.2-14.2 0-1.6-3.9 11.2-11.9-9.6 0z" style="fill:#52c2af;stroke:#52c2af"></path>
|
||||
<circle cx="317.14285" cy="486.64792" r="19.030317" style="fill:#fff;stroke-width:1.93936479;stroke:transparent"></circle>
|
||||
<path d="m309.24286 477.14791 14.2 0 1.6 3.9-11.2 11.9 9.6 0 1.6 3.2-14.2 0-1.6-3.9 11.2-11.9-9.6 0z" style="fill:#52c2af;stroke:#52c2af"></path>
|
||||
</g>
|
||||
</svg>
|
||||
<span>Zulip</span>
|
||||
|
|
@ -38,5 +38,5 @@
|
|||
</ul>
|
||||
<div class="clear-float"></div>
|
||||
</div>
|
||||
<svg height="32px" id="hamburger" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2 s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2 S29.104,22,28,22z"/></svg>
|
||||
<svg height="32px" class="hamburger" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2 s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2 S29.104,22,28,22z"/></svg>
|
||||
</nav>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,38 @@
|
|||
<nav class="dark-blue">
|
||||
<div class="content">
|
||||
<a class="brand logo no-style" href="{{ server_uri }}">
|
||||
<svg class="brand-logo" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 40 40" version="1.1">
|
||||
<g transform="translate(-297.14285,-466.64792)">
|
||||
<circle cx="317.14285" cy="486.64792" r="19.030317" style="fill:#fff;stroke-width:1.93936479;stroke:transparent"></circle>
|
||||
<path d="m309.24286 477.14791 14.2 0 1.6 3.9-11.2 11.9 9.6 0 1.6 3.2-14.2 0-1.6-3.9 11.2-11.9-9.6 0z" style="fill:#52c2af;stroke:#52c2af"></path>
|
||||
</g>
|
||||
</svg>
|
||||
<span>Zulip</span>
|
||||
</a>
|
||||
<ul>
|
||||
<li on-page="hello">
|
||||
<a class="no-style" href="/hello/">Home</a>
|
||||
</li>
|
||||
<li on-page="features">
|
||||
<a class="no-style" href="/features/">Features</a>
|
||||
</li>
|
||||
<li on-page="apps">
|
||||
<a class="no-style" href="/apps/">Apps</a>
|
||||
</li>
|
||||
<li on-page="integrations">
|
||||
<a class="no-style" href="/integrations/">Integrations</a>
|
||||
</li>
|
||||
<li on-page="help">
|
||||
<a class="no-style" href="/help/">Help Center</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="no-style" href="/login/">Login</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="no-style" href="/register/">Register</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="clear-float"></div>
|
||||
</div>
|
||||
<svg height="32px" class="hamburger" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2 s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2 S29.104,22,28,22z"/></svg>
|
||||
</nav>
|
||||
|
|
@ -60,47 +60,5 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<div class="footer-main">
|
||||
<ul class="footer-navigation">
|
||||
{% if about_link_disabled %}
|
||||
{% else %}
|
||||
<li><a href="{{ server_uri }}/hello">{{ _('About') }}</a></li>
|
||||
<li><span class="little-bullet">·</span></li>
|
||||
{% endif %}
|
||||
|
||||
<li><a href="{{ server_uri }}/terms">{{ _('Legal') }}</a></li>
|
||||
<li><span class="little-bullet">·</span></li>
|
||||
<li><a href="{{ server_uri }}/privacy">{{ _('Privacy') }}</a></li>
|
||||
<li><span class="little-bullet">·</span></li>
|
||||
<li><a href="{{ server_uri }}/features">{{ _('Features') }}</a></li>
|
||||
<li><span class="little-bullet">·</span></li>
|
||||
<li><a href="{{ server_uri }}/help">{{ _('User documentation') }}</a></li>
|
||||
|
||||
{% if login_link_disabled %}
|
||||
{% else %}
|
||||
<li><span class="little-bullet">·</span></li>
|
||||
<li><a href="{{login_url}}">{{ _('Log in') }}</a></li>
|
||||
{% endif %}
|
||||
|
||||
{% if register_link_disabled %}
|
||||
{% elif only_sso %}
|
||||
{% else %}
|
||||
<li><span class="little-bullet">·</span></li>
|
||||
<li><a href="{{ url('register') }}">{{ _('Register') }}</a></li>
|
||||
{% endif %}
|
||||
|
||||
{% if open_realm_creation %}
|
||||
<li><span class="little-bullet">·</span></li>
|
||||
<li><a href="{{ server_uri }}/create_realm">{{ _('Create new organization') }}</a></li>
|
||||
{% endif %}
|
||||
|
||||
{% if find_team_link_disabled %}
|
||||
{% else %}
|
||||
<li><span class="little-bullet">·</span></li>
|
||||
<li><a href="{{ server_uri }}/find_my_team">{{ _('Find my team') }}</a></li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{% include 'zerver/footer.html' %}
|
||||
{% endblock %}
|
||||
|
|
|
|||
Loading…
Reference in New Issue