mirror of https://github.com/zulip/zulip.git
product-pages: Add integrations section to hello (landing) page.
This commit is contained in:
Jack Zhang
Tim Abbott
parent
5606435a90
commit
ec673c739c
|
|
@ -1121,6 +1121,55 @@ a:not(.no-style):hover:before {
|
|||
filter: brightness(4) saturate(0);
|
||||
}
|
||||
|
||||
.portico-landing.hello .integrations {
|
||||
padding: 80px 80px 120px;
|
||||
}
|
||||
|
||||
.portico-landing.hello .integrations .content {
|
||||
margin-left: 50px;
|
||||
}
|
||||
|
||||
.portico-landing.hello .integrations .integration-icons {
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.portico-landing.hello .integrations .integration-icons .group {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: 170px;
|
||||
height: 220px;
|
||||
padding: 0 4px;
|
||||
transition: all 0.3s ease;
|
||||
margin-top: 10px;
|
||||
color: #414e67;
|
||||
}
|
||||
|
||||
.portico-landing.hello .integrations .integration-icons .group:hover {
|
||||
-webkit-box-shadow: 1px 5px 20px 5px rgba(0,0,0,0.08);
|
||||
-moz-box-shadow: 1px 5px 20px 5px rgba(0,0,0,0.08);
|
||||
box-shadow: 1px 5px 20px 5px rgba(0,0,0,0.08);
|
||||
}
|
||||
|
||||
.portico-landing.hello .integrations .integration-logo {
|
||||
margin-top: 20px;
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.portico-landing.hello .integrations .integration-name {
|
||||
margin-top: 20px;
|
||||
font-size: 22px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.portico-landing.hello .integrations .integration-description {
|
||||
width: 120px;
|
||||
margin: 0 auto 20px;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.portico-landing.hello .call-to-action-bottom {
|
||||
position: relative;
|
||||
padding: 125px 100px 20px 100px;
|
||||
|
|
@ -1643,6 +1692,12 @@ a:not(.no-style):hover:before {
|
|||
}
|
||||
|
||||
/* -- media queries -- */
|
||||
@media (max-width: 1426px) {
|
||||
.portico-landing.hello .integrations .integration-icons .hide-1 {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1368px) {
|
||||
.portico-landing.apps .main .details-container {
|
||||
height: auto;
|
||||
|
|
@ -1698,6 +1753,16 @@ a:not(.no-style):hover:before {
|
|||
.portico-landing.hello .apps .left-side {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.portico-landing.hello .integrations .content {
|
||||
max-width: 750px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.portico-landing.hello .integrations .integration-icons {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
|
|
@ -1786,7 +1851,8 @@ a:not(.no-style):hover:before {
|
|||
top: -12px;
|
||||
}
|
||||
|
||||
.portico-landing.hello .apps {
|
||||
.portico-landing.hello .apps,
|
||||
.portico-landing.hello .integrations {
|
||||
padding: 80px 50px;
|
||||
}
|
||||
|
||||
|
|
@ -1794,6 +1860,15 @@ a:not(.no-style):hover:before {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.portico-landing.hello .integrations {
|
||||
width: 100%;
|
||||
padding: 80px 0;
|
||||
}
|
||||
|
||||
.portico-landing.hello .integrations .content {
|
||||
padding: 0 50px;
|
||||
}
|
||||
|
||||
.portico-landing.hello .testimonials .quote-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -2008,16 +2083,25 @@ a:not(.no-style):hover:before {
|
|||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.portico-landing.hello .integrations .integration-icons .group {
|
||||
margin: 10px 16px 0 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-device-width: 450px) {
|
||||
nav {
|
||||
padding-bottom: 105px;
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.portico-landing.hello .integrations .integration-icons .group {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.main,
|
||||
.portico-landing.integrations .main {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.portico-landing.integrations .main .portico-page-header {
|
||||
|
|
@ -2036,3 +2120,14 @@ a:not(.no-style):hover:before {
|
|||
width: 100vw;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
.portico-landing.hello .integrations .integration-icons .group {
|
||||
width: 130px;
|
||||
height: 215px;
|
||||
}
|
||||
|
||||
.portico-landing.hello .integrations .integration-icons .integration-logo {
|
||||
width: 60px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -478,6 +478,76 @@ html {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="integrations">
|
||||
<div class="content">
|
||||
<header>
|
||||
<h1>Seamless integrations with everything you use</h1>
|
||||
</header>
|
||||
<p>
|
||||
Zulip has more than 60 native integrations. Several hundred more
|
||||
are available through
|
||||
<a href="/integrations#hubot">Hubot</a>,
|
||||
<a href="/integrations#zapier">Zapier</a>,
|
||||
and
|
||||
<a href="/integrations#ifttt">IFTTT</a>.
|
||||
</p>
|
||||
<p><a href="/integrations">See all available integrations.</a></p>
|
||||
<br />
|
||||
</div>
|
||||
|
||||
<div class="integration-icons">
|
||||
<a href="/integrations#travis" class="no-style">
|
||||
<div class="group">
|
||||
<img class="integration-logo" src="/static/images/integrations/logos/travis.svg" alt="{{ _('Travis logo') }}"></img>
|
||||
<h3 class="integration-name">Travis CI</h3>
|
||||
<p class="integration-description">See build results immediately</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="/integrations#github" class="no-style">
|
||||
<div class="group">
|
||||
<img class="integration-logo" src="/static/images/integrations/logos/github.svg" alt="{{ _('Github logo') }}"></img>
|
||||
<h3 class="integration-name">Github</h3>
|
||||
<p class="integration-description">Track issues and pull requests</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="/integrations#heroku" class="no-style">
|
||||
<div class="group">
|
||||
<img class="integration-logo" src="/static/images/integrations/logos/heroku.svg" alt="{{ _('Heroku logo') }}"></img>
|
||||
<h3 class="integration-name">Heroku</h3>
|
||||
<p class="integration-description">Keep up with deployments</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="/integrations#zendesk" class="no-style">
|
||||
<div class="group">
|
||||
<img class="integration-logo" src="/static/images/integrations/logos/zendesk.svg" alt="{{ _('Zendesk logo') }}"></img>
|
||||
<h3 class="integration-name">Zendesk</h3>
|
||||
<p class="integration-description">Receive support tickets and updates</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="/integrations#jira" class="no-style">
|
||||
<div class="group">
|
||||
<img class="integration-logo" src="/static/images/integrations/logos/jira.svg" alt="{{ _('JIRA logo') }}"></img>
|
||||
<h3 class="integration-name">JIRA</h3>
|
||||
<p class="integration-description">Monitor project bugs and issues</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="/integrations#sentry" class="no-style">
|
||||
<div class="group">
|
||||
<img class="integration-logo" src="/static/images/integrations/logos/sentry.svg" alt="{{ _('Sentry logo') }}"></img>
|
||||
<h3 class="integration-name">Sentry</h3>
|
||||
<p class="integration-description">See real-time error tracking</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="/integrations#pagerduty" class="hide-1 no-style">
|
||||
<div class="group">
|
||||
<img class="integration-logo" src="/static/images/integrations/logos/pagerduty.svg" alt="{{ _('Pagerduty logo') }}"></img>
|
||||
<h3 class="integration-name">Pagerduty</h3>
|
||||
<p class="integration-description">Connect to your monitoring systems</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="testimonials">
|
||||
<div class="padded-content">
|
||||
<div class="quote-container">
|
||||
|
|
|
|||
Loading…
Reference in New Issue