Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

features: Swap in redesigned feature-comparison table.

This commit is contained in:
Karl Stolley 2024-02-12 14:35:19 -06:00 committed by Tim Abbott
parent f9ba4da012
commit 04b94f6ad5
5 changed files with 17 additions and 802 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
static/images/landing-page/features/love-keyboard-shortcuts.svg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 52 KiB

BIN
static/images/landing-page/features/message-formatting.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 107 KiB

BIN
static/images/landing-page/features/wave.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 41 KiB

381
templates/corporate/features.html
View File

@ -1,380 +1,27 @@
{% extends "zerver/portico.html" %}
{% set entrypoint = "landing-page" %}
{% extends "zerver/base.html" %}
{% set entrypoint = "plans-page" %}
{% set PAGE_TITLE = "Features | Zulip" %}
{% set PAGE_DESCRIPTION = "From highly configurable notifications, to powerful
formatting and flexible administration, Zulip has you covered." %}
{% block portico_content %}
{% block customhead %}
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
{% endblock %}
{% block content %}
{% include 'zerver/landing_nav.html' %}
<div class="portico-landing features-app">
{% include 'zerver/gradients.html' %}
<section class="hero">
<div class="copy">
<h1>Powerful group chat.</h1>
<h2>First class threading on top of everything you could want from real-time chat.</h2>
<div class="portico-pricing showing-cloud">
<div class="body-bg">
<div class="body-bg__layer"></div>
</div>
</section>
<section class="messages">
<div class="features">
<h2>Beautiful messaging.</h2>
<div class="feature-block">
<h3>MARKDOWN OPTIMIZED FOR CHAT</h3>
<p>
Express your ideas clearly with
<a href="/help/format-your-message-using-markdown#quotes">quote blocks</a>,
<a href="/help/format-your-message-using-markdown#spoilers">spoilers</a>,
<a href="/help/format-your-message-using-markdown#latex">LaTeX/math blocks</a>,
<a href="/help/create-a-poll">polls</a>,
<a href="/help/format-your-message-using-markdown#global-times">global times</a>,
and <a href="/help/format-your-message-using-markdown">much more</a>.
</p>
<div class="main">
{% include "corporate/comparison_table_integrated.html" %}
</div>
<div class="feature-block">
<h3>EMOJI AND EMOJI REACTIONS</h3>
<p>Have fun expressing yourself with emoji!</p>
</div>
<div class="feature-block">
<h3>INLINE IMAGE, VIDEO, AND TWEET PREVIEWS</h3>
<p>Send a link and we’ll automatically generate a
preview; click the preview to see it at full scale.</p>
</div>
<div class="feature-block">
<h3>DRAG-AND-DROP FILE UPLOADS</h3>
<p>
Drag a file into the compose box and we’ll upload
and preview it for you. Sharing and discussing
work with team mates has never been easier.
</p>
</div>
<div class="feature-block">
<h3>CODE BLOCKS</h3>
<p>
Discuss code with ease using Markdown code blocks,
syntax highlighting, and
<a href="/help/code-blocks#code-playgrounds">code playgrounds</a>.
</p>
</div>
<div class="feature-block">
<h3>CUSTOMIZABLE AUTOMATIC LINKIFICATION</h3>
<p>
Customize Zulip’s markup to automatically link back
to your issue tracker or GitHub when you type
“#1235” or a commit ID.
</p>
</div>
</div>
<img class="image" src="{{ static('images/landing-page/features/message-formatting.png') }}" alt="" />
</section>
<section class="notifications">
<svg class="envelope" height="500" width="100" preserveAspectRatio="none" viewBox="0 0 100 100">
<polygon points="0,0 100,0 50,50" style="fill: #fafafa;" />
</svg>
<h2>Highly configurable notifications.</h2>
<div class="center">
<div class="image-block"></div>
<div class="feature-list">
<h3>@-mentions</h3>
<h3>Stream-wide announcements</h3>
<h3>Desktop notifications</h3>
<h3>Audible notifications</h3>
<h3>Message notification emails</h3>
<h3>Alert words</h3>
<h3>Optional weekly digest emails</h3>
</div>
</div>
</section>
<section class="keyboard-shortcuts">
<img class="overflow-wave" src="{{ static('images/landing-page/features/wave.png') }}" alt="" />
<div class="feature-block">
<h3>Keyboard shortcuts.</h3>
<p>Communicate as efficiently as you use your favorite
text editor. Anything you can do with a mouse, you
can do even faster from the keyboard.
<a class="cta" href="/help/keyboard-shortcuts" target="_blank" rel="noopener noreferrer">
Learn more about keyboard shortcuts.</a>
</p>
</div>
<img class="image" src="{{ static('images/landing-page/features/love-keyboard-shortcuts.svg') }}" alt="" />
</section>
<section>
<h2>Apps, integrations, and API.</h2>
<a class="feature-block" href="/integrations/" target="_blank" rel="noopener noreferrer">
<h3>INTEGRATIONS</h3>
<p>
Get alerts and updates from your favorite services with
off-the-shelf integrations for Trac, Nagios, GitHub,
Jenkins, and more.
</p>
</a>
<a class="feature-block" href="/api" target="_blank" rel="noopener noreferrer">
<h3>API</h3>
<p>
Rolling your own integrations—both sending and receiving—is a
snap with our simple RESTful API and Python bindings.
</p>
</a>
<a class="feature-block" href="/apps/" target="_blank" rel="noopener noreferrer">
<h3>MOBILE APPS</h3>
<p>Keep up while on the go with Zulip's iOS and Android apps.</p>
</a>
<a class="feature-block" href="/apps/" target="_blank" rel="noopener noreferrer">
<h3>DESKTOP APPS</h3>
<p>Even better than Zulip on the web, our desktop apps offer native
notifications and support for multiple Zulip accounts.</p>
</a>
<a class="feature-block" href="https://github.com/zulip/zulip-terminal#readme" target="_blank" rel="noopener noreferrer">
<h3>TERMINAL APP</h3>
<p>Terminal fans will love Zulip's official terminal client.</p>
</a>
<!--Hack: These 3 pseudo elements are here to ensure the flex
arrangement uses the proper cell size with 5 elements in 2 rows.-->
<div class="feature-block"></div>
<div class="feature-block"></div>
<div class="feature-block"></div>
</section>
<section>
<h2>And everything else you need…</h2>
<a class="feature-block" href="/security/" target="_blank" rel="noopener noreferrer">
<h3>ENTERPRISE-GRADE SECURITY</h3>
<p>
Zulip is used by some of the most security-conscious
organizations in the world.
</p>
</a>
<a class="feature-block" href="/help/search-for-messages" target="_blank" rel="noopener noreferrer">
<h3>POWERFUL FULL-TEXT SEARCH</h3>
<p>
Search is both snappy and smart, helping you look for
text, people, and threads of conversation, with advanced
search filters for fine-grained control.
</p>
</a>
<a class="feature-block" href="/help/stream-permissions" target="_blank" rel="noopener noreferrer">
<h3>COMPLETE HISTORY</h3>
<p>Join a stream and see its history, so even new team
members are never out of the loop.</p>
</a>
<a class="feature-block" href="/help/star-a-message" target="_blank" rel="noopener noreferrer">
<h3>STARRED MESSAGES</h3>
<p>Use starred messages as a todo list, or keep track of interesting
conversations.</p>
</a>
<a class="feature-block" href="/help/marking-messages-as-unread" target="_blank" rel="noopener noreferrer">
<h3>MARK AS UNREAD</h3>
<p>Mark messages as unread to return to them later.</p>
</a>
<a class="feature-block" href="/help/analytics" target="_blank" rel="noopener noreferrer">
<h3>STATISTICS</h3>
<p>Zulip has a powerful set of analytics available to
help you see how your organization communicates.</p>
</a>
<a class="feature-block" href="/help/direct-messages" target="_blank" rel="noopener noreferrer">
<h3>ONE-ON-ONE AND GROUP PRIVATE CONVERSATIONS</h3>
<p>Lightweight private conversations with one or as many people as you need.</p>
</a>
<a class="feature-block" href="/help/status-and-availability" target="_blank" rel="noopener noreferrer">
<h3>TEAM AVAILABILITY</h3>
<p>Let others know whether you're around with emoji statuses and
availability, or choose “invisible” mode.</p>
</a>
<a class="feature-block" href="/help/stream-permissions" target="_blank" rel="noopener noreferrer">
<h3>PRIVATE STREAMS</h3>
<p>Enjoy the benefits of threaded conversations while
controlling your audience and privacy.</p>
</a>
<a class="feature-block" href="/help/edit-a-message" target="_blank" rel="noopener noreferrer">
<h3>MESSAGE EDITING</h3>
<p>Don’t worry, you can always fix that typo, either in
the body of a message or its topic.</p>
</a>
<a class="feature-block" href="/help/move-content-to-another-stream" target="_blank" rel="noopener noreferrer">
<h3>MOVING MESSAGES</h3>
<p>
Organize conversations by easily moving messages to the
right stream and topic.
</p>
</a>
<a class="feature-block" href="/help/typing-notifications" target="_blank" rel="noopener noreferrer">
<h3>TYPING NOTIFICATIONS</h3>
<p>Know when other users are composing messages to you.</p>
</a>
<a class="feature-block" href="/help/read-receipts" target="_blank" rel="noopener noreferrer">
<h3>READ RECEIPTS</h3>
<p>Check who has read any message, no matter who sent it.</p>
</a>
<a class="feature-block" href="/help/view-and-edit-your-message-drafts" target="_blank" rel="noopener noreferrer">
<h3>SAVED DRAFTS</h3>
<p>Zulip’s drafts make it easy to write longer messages
without worrying about losing your work.</p>
</a>
<a class="feature-block" href="/help/schedule-a-message" target="_blank" rel="noopener noreferrer">
<h3>MESSAGE SCHEDULING</h3>
<p>Schedule a message to be sent later, when others are working.</p>
</a>
<a class="feature-block" href="/help/streams-and-topics" target="_blank" rel="noopener noreferrer">
<h3>CONVERSATIONS THREADED BY TOPIC</h3>
<p>Participate in several conversations with the same
group at once, without getting lost or overwhelmed.</p>
</a>
<a class="feature-block" href="/help/resolve-a-topic" target="_blank" rel="noopener noreferrer">
<h3>RESOLVE TOPIC</h3>
<p>Mark topics as ✔ completed. A lightweight way to manage support
interactions, investigating issues, and more.</p>
</a>
<a class="feature-block" href="/help/reading-strategies" target="_blank" rel="noopener noreferrer">
<h3>CATCH UP IN NO TIME</h3>
<p>With topics, hotkeys and snappy performance, usefully
reviewing hundreds of messages takes just minutes.</p>
</a>
<a class="feature-block" href="/help/mute-a-stream" target="_blank" rel="noopener noreferrer">
<h3>MUTE STREAM OR TOPIC</h3>
<p>Manage notifications by muting streams and topics that don't
require your attention.</p>
</a>
<a class="feature-block" href="/help/mute-a-user" target="_blank" rel="noopener noreferrer">
<h3>MUTE USER</h3>
<p>Users can mute anyone they'd rather not interact with.</p>
</a>
<a class="feature-block"
href="/help/link-to-a-message-or-conversation#link-to-zulip-from-anywhere"
target="_blank" rel="noopener noreferrer">
<h3>PERMANENT LINKS</h3>
<p>Permanently link to a Zulip conversation or a message in context
from your issue tracker, emails, documents, or anywhere else.</p>
</a>
<a class="feature-block" href="/help/change-your-language" target="_blank" rel="noopener noreferrer">
<h3>FULLY INTERNATIONALIZED</h3>
<p>The Zulip UI is fully internationalized and has been
translated into 23 languages.</p>
</a>
<a class="feature-block" href="/help/start-a-call" target="_blank" rel="noopener noreferrer">
<h3>VIDEO CALLS</h3>
<p>
Create and join video calls with a single click. Powered
by your choice of Zoom, Jitsi Meet, or BigBlueButton.
</p>
</a>
<a class="feature-block" href="/help/configure-authentication-methods" target="_blank" rel="noopener noreferrer">
<h3>FLEXIBLE AUTHENTICATION</h3>
<p>
Supported authentication providers include LDAP, SAML,
OIDC, Google, GitHub, GitLab, Apple, and more.
</p>
</a>
<a class="feature-block" href="/help/roles-and-permissions" target="_blank" rel="noopener noreferrer">
<h3>FLEXIBLE PERMISSIONS</h3>
<p>
Fine-grained permission settings for administrators and
moderators, and custom viewing and posting permissions for
streams.
</p>
</a>
<a class="feature-block" href="/help/add-or-remove-users-from-a-stream" target="_blank" rel="noopener noreferrer">
<h3>CONVENIENT SUBSCRIPTION MANAGEMENT</h3>
<p>
Subscribe a group of users to a stream, or copy membership from another stream.
</p>
</a>
<a class="feature-block" href="/help/invite-new-users" target="_blank" rel="noopener noreferrer">
<h3>CUSTOMIZABLE INVITATIONS</h3>
<p>
Configure user role, stream subscriptions and invite expiration
time when inviting new users.
</p>
</a>
<a class="feature-block" href="/help/import-from-slack" target="_blank" rel="noopener noreferrer">
<h3>DATA IMPORT</h3>
<p>
Import an existing Slack, Mattermost, Gitter or Rocket.Chat workspace into Zulip.
</p>
</a>
<a class="feature-block" href="/help/custom-profile-fields" target="_blank" rel="noopener noreferrer">
<h3>CUSTOM PROFILE FIELDS</h3>
<p>
Use Zulip to store directory information, pronouns, birthdays,
links to external accounts, or anything else.
</p>
</a>
<a class="feature-block" href="/help/roles-and-permissions" target="_blank" rel="noopener noreferrer">
<h3>GUESTS</h3>
<p>
Guests cannot access streams unless they are
explicitly added. Perfect for partners, vendors, and
temporary contractors.
</p>
</a>
<a class="feature-block" href="/help/create-your-organization-profile" target="_blank" rel="noopener noreferrer">
<h3>CUSTOM BRANDING</h3>
<p>
Use your logo instead of Zulip’s in the desktop and web app.
</p>
</a>
<a class="feature-block" href="https://github.com/42wim/matterbridge#readme" target="_blank" rel="noopener noreferrer">
<h3>CHAT BRIDGES</h3>
<p>
Mirror messages between Zulip and Slack, Microsoft
Teams, Discord, Matrix, and other tools.
</p>
</a>
<a class="feature-block" href="/help/moderating-open-organizations" target="_blank" rel="noopener noreferrer">
<h3>MODERATION</h3>
<p>
A full suite of tools for moderating open communities.
</p>
</a>
<a class="feature-block" href="/help/public-access-option" target="_blank" rel="noopener noreferrer">
<h3>PUBLIC ACCESS OPTION</h3>
<p>
Enable transparency by setting streams to be viewable
and searchable by anyone on the Internet, without
creating an account.
</p>
</a>
<a class="feature-block" href="/help/export-your-organization" target="_blank" rel="noopener noreferrer">
<h3>DATA EXPORTS</h3>
<p>
No vendor lock-in. Export your hosted Zulip to an
on-premises installation at any time. You can also request a
compliance export.
</p>
</a>
<a class="feature-block" href="/help/animated-gifs-from-giphy" target="_blank" rel="noopener noreferrer">
<h3>GIPHY INTEGRATION</h3>
<p>
Enjoy animated GIFs with Zulip's native GIPHY
integration.
</p>
</a>
<a class="feature-block" href="/help" target="_blank" rel="noopener noreferrer">
<h3>HELP CENTER</h3>
<p>
It's easy to get started with detailed documentation and
onboarding guides in the Zulip help center.
</p>
</a>
<a class="feature-block" href="https://github.com/zulip/zulip/" target="_blank" rel="noopener noreferrer">
<h3>YOUR FEATURE HERE</h3>
<p>Zulip is open source, so if something important for
your use case is missing, you can make it happen!</p>
</a>
<!--Hack: These two pseudo elements are here to ensure the flex
arrangement uses the proper cell size with 4 elements in 2 rows.-->
<div class="feature-block"></div>
<div class="feature-block"></div>
<div class="feature-block"></div>
</section>
</div>
{% include 'zerver/footer.html' %}
{% endblock %}

434
web/styles/portico/landing_page.css
View File

@ -215,7 +215,6 @@ button {
display: none;
}
/* -- features page css -- */
.portico-landing {
position: relative;
@ -246,294 +245,6 @@ button {
}
}
.portico-landing.features-app {
position: relative;
overflow-x: hidden;
padding-top: 0;
z-index: 2;
.gradients {
z-index: -1;
}
& section {
max-width: 1440px;
display: flex;
flex: 1 1 auto;
flex-flow: row wrap;
justify-content: space-around;
margin: 40px auto;
padding: 0 30px;
color: hsl(219deg 21% 21%);
&.hero {
display: flex;
align-items: center;
justify-content: center;
height: 400px;
padding: 100px 100px 50px;
margin: 0;
max-width: none;
color: hsl(0deg 0% 100%);
background-color: hsl(0deg 0% 0% / 10%);
.copy {
max-width: 800px;
margin: 0 auto;
text-align: center;
}
& h1 {
margin: 0;
font-size: 3.7em;
}
& h2 {
font-size: 1.8em;
margin: 30px auto 0;
max-width: 600px;
line-height: 1.3;
}
.image {
height: 400px;
width: 40%;
background-color: hsl(0deg 0% 0% / 5%);
}
}
&.keyboard-shortcuts {
display: flex;
justify-content: center;
align-items: center;
position: relative;
max-width: none;
padding: 50px;
/* this should only be a thing if the section above is not white */
margin-top: 0;
background-color: hsl(219deg 21% 21%);
color: hsl(219deg 76% 93%);
& img {
&.overflow-wave {
width: 685px;
right: 0;
top: -168px;
position: absolute;
}
&.image {
width: 600px;
margin-left: 100px;
}
}
& h3 {
font-size: 3em;
}
.feature-block {
width: 50%;
}
& p {
font-size: 1.2em;
}
& a.cta {
font-size: 1em;
color: hsl(170deg 52% 70%);
}
}
&.messages {
display: flex;
justify-content: center;
align-items: center;
margin: 50px auto;
padding: 0 50px;
.image {
width: calc(100% - 500px - 100px);
margin: 50px 0 50px 50px;
max-width: 500px;
}
.features {
max-width: 500px;
& h2 {
margin: 0;
}
.feature-block {
display: block;
margin: 30px 0;
}
}
}
&.notifications {
position: relative;
padding: 50px 100px;
max-width: calc(1000px);
background-color: hsl(0deg 0% 100%);
border-radius: 10px;
box-shadow: 10px 20px 80px hsl(0deg 0% 0% / 15%);
margin: 100px auto 150px;
text-align: center;
.envelope {
position: absolute;
top: 0;
left: 0;
width: 100%;
max-height: 40vw;
}
& h2 {
position: relative;
margin-bottom: 120px;
top: 0;
}
.feature-list {
position: relative;
display: inline-block;
vertical-align: top;
text-align: left;
margin: 35px 0 0 20px;
z-index: 1;
& h3 {
position: relative;
margin: 15px 0 15px 50px;
font-size: 1.2em;
font-weight: 400;
color: hsl(0deg 0% 53%);
&::before {
content: " ";
display: block;
position: absolute;
left: -35px;
top: 0;
width: 20px;
height: 20px;
border-radius: 4px;
background-image: url("../../images/checkbox-green.svg");
background-size: 100% auto;
background-position: center;
background-repeat: no-repeat;
}
}
}
.image-block {
width: 400px;
height: 280px;
background: linear-gradient(
135deg,
hsl(0deg 0% 0% / 5%),
hsl(0deg 0% 0% / 20%)
);
border-radius: 4px;
background-image: url("../../images/landing-page/features/notifications.jpg");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
display: inline-block;
}
}
.feature-block {
display: inline-block;
vertical-align: top;
}
& h2 {
font-size: 2.5em;
text-align: center;
margin: 0 10px;
line-height: 1.6;
flex: 1 0 100%;
}
> .feature-block {
padding: 10px 20px;
flex: 1 1 320px;
color: inherit;
}
& a {
&.feature-block {
&:hover {
box-shadow: 0 3px 10px hsl(0deg 0% 75%);
}
&:active {
box-shadow: 0 3px 10px hsl(0deg 0% 50%);
}
}
}
}
.cta {
&::after {
content: "\2192";
margin-left: 5px;
transform: scaleX(2);
transition: all 0.3s ease;
}
&:hover {
&::after {
margin-left: 10px;
}
}
}
.feature-block {
& h3 {
font-size: 1.2em;
font-weight: 600;
}
& p {
margin: 0;
opacity: 0.8;
}
}
}
/* -- hello page -- */
.portico-landing.hello {
background-color: transparent;
@ -1317,8 +1028,7 @@ button {
padding-top: 0;
}
.portico-landing.apps .main,
.portico-landing.features-app .main {
.portico-landing.apps .main {
background-color: hsl(0deg 0% 100%);
}
@ -2101,47 +1811,12 @@ button {
padding-top: 170px;
}
.portico-landing.features-app {
& section {
&.messages {
display: block;
text-align: center;
> * {
display: inline-block;
text-align: left;
}
.image {
width: 100%;
margin: 0;
}
}
}
}
.portico-landing.plans .compare .padded-content {
width: auto;
}
}
@media (width <= 985px) {
.features .feature-box .text-content {
width: 100%;
height: auto;
margin-bottom: 20px;
}
.features .feature-box .image {
float: none;
width: 100%;
margin: 0;
}
.features .text-content .flex {
display: block;
}
.portico-landing.apps .main {
width: 100%;
margin: 0;
@ -2177,20 +1852,6 @@ button {
}
}
@media (width <= 906px) {
.portico-landing.features-app {
& section {
&.notifications {
padding: 50px 10px;
.image-block {
display: none;
}
}
}
}
}
@media (width <= 830px) {
.portico-landing.hello .apps .left-side .platform-icons .group {
margin: 50px 30px;
@ -2257,20 +1918,6 @@ button {
.portico-landing.hello .apps .left-side .content {
width: auto;
}
.portico-landing.features-app {
& section {
padding: 0 20px;
&.hero {
padding: 50px;
& h1 {
font-size: 3em;
}
}
}
}
}
@media (width <= 1024px) {
@ -2397,43 +2044,9 @@ button {
.portico-landing.hello .integrations .integration-icons .group {
margin: 10px 16px 0;
}
.portico-landing.features-app {
& section {
&.keyboard-shortcuts {
& img {
&.overflow-wave {
top: -100px;
}
}
}
}
}
}
@media (width <= 550px) {
.portico-landing.features-app {
& section {
&.hero {
padding: 50px 20px 20px;
}
&.messages {
padding: 0 20px;
& h2 {
font-size: 2em;
}
.features {
.feature-block {
margin: 20px 0;
}
}
}
}
}
.billing-upgrade-page {
.payment-schedule {
.box {
@ -2522,10 +2135,6 @@ button {
hsl(49deg 71% 68%) 80%
);
}
.features-app .gradients .gradient {
height: 700px;
}
}
@media (width <= 375px) {
@ -2541,47 +2150,6 @@ button {
.portico-landing.integrations .integration-categories-dropdown {
width: 323px;
}
.portico-landing.features-app {
& section {
&.keyboard-shortcuts {
& img {
&.overflow-wave {
top: -92px;
}
}
}
}
}
}
@media (width <= 360px) {
.portico-landing.features-app {
& section {
.keyboard-shortcuts {
& img {
&.overflow-wave {
top: -88px;
}
}
}
}
}
}
/* For iPhone 5/SE device */
@media (width <= 320px) {
.portico-landing.features-app {
& section {
.keyboard-shortcuts {
& img {
&.overflow-wave {
top: -78px;
}
}
}
}
}
}
#download-from-microsoft-store,