diff --git a/static/images/landing-page/education/flexible-administration.svg b/static/images/landing-page/education/flexible-administration.svg new file mode 100644 index 0000000000..5b7125d3b3 Binary files /dev/null and b/static/images/landing-page/education/flexible-administration.svg differ diff --git a/static/images/landing-page/education/for-education-cover.jpg b/static/images/landing-page/education/for-education-cover.jpg new file mode 100644 index 0000000000..d2e076e4a6 Binary files /dev/null and b/static/images/landing-page/education/for-education-cover.jpg differ diff --git a/static/images/landing-page/education/interactive_messaging_day.png b/static/images/landing-page/education/interactive_messaging_day.png new file mode 100644 index 0000000000..68b8e34760 Binary files /dev/null and b/static/images/landing-page/education/interactive_messaging_day.png differ diff --git a/static/images/landing-page/education/knowledge-repository.svg b/static/images/landing-page/education/knowledge-repository.svg new file mode 100644 index 0000000000..aae7e5561f Binary files /dev/null and b/static/images/landing-page/education/knowledge-repository.svg differ diff --git a/static/images/landing-page/education/message_formatting_day.png b/static/images/landing-page/education/message_formatting_day.png new file mode 100644 index 0000000000..3b5ba502ba Binary files /dev/null and b/static/images/landing-page/education/message_formatting_day.png differ diff --git a/static/images/landing-page/education/mobile.svg b/static/images/landing-page/education/mobile.svg new file mode 100644 index 0000000000..327b284302 Binary files /dev/null and b/static/images/landing-page/education/mobile.svg differ diff --git a/static/images/landing-page/education/privacy.svg b/static/images/landing-page/education/privacy.svg new file mode 100644 index 0000000000..8722ef8738 Binary files /dev/null and b/static/images/landing-page/education/privacy.svg differ diff --git a/static/images/landing-page/education/streams_and_topics_day.png b/static/images/landing-page/education/streams_and_topics_day.png new file mode 100644 index 0000000000..e78fd677d8 Binary files /dev/null and b/static/images/landing-page/education/streams_and_topics_day.png differ diff --git a/static/js/portico/landing-page.js b/static/js/portico/landing-page.js index 2936fcc569..1700d71736 100644 --- a/static/js/portico/landing-page.js +++ b/static/js/portico/landing-page.js @@ -230,4 +230,19 @@ $(() => { if (window.location.pathname === "/team/") { render_tabs(); } + + // Source: https://stackoverflow.com/questions/819416/adjust-width-and-height-of-iframe-to-fit-with-content-in-it + // Resize tweet to avoid overlapping with image. Since tweet uses an iframe which doesn't adjust with + // screen resize, we need to manually adjust its width. + + function resizeIFrameToFitContent(iFrame) { + $(iFrame).width("38vw"); + } + + window.addEventListener("resize", () => { + const iframes = document.querySelectorAll(".twitter-tweet iframe"); + for (const iframe of iframes) { + resizeIFrameToFitContent(iframe); + } + }); }); diff --git a/static/styles/portico/landing_page.css b/static/styles/portico/landing_page.css index 16ea6e80d1..46cf80738c 100644 --- a/static/styles/portico/landing_page.css +++ b/static/styles/portico/landing_page.css @@ -335,7 +335,7 @@ nav { } ul.solutions-options { - width: 400px; + width: 450px; div.dropdown-column { float: left; @@ -2263,6 +2263,7 @@ nav { } .portico-landing.why-page .hero h1 { + position: relative; margin: 0 0 20px 0; font-size: 3.5em; @@ -2334,6 +2335,14 @@ nav { margin-top: 20px; } +.portico-landing.why-page .bg-education { + position: relative; + + background-image: url(../../images/landing-page/education/for-education-cover.jpg); + background-size: cover; + background-position: center; +} + .portico-landing.why-page .bg-pycon { position: relative; @@ -2358,7 +2367,7 @@ nav { background-image: url(../../images/landing-page/why-zulip-threads.jpg); } -.portico-landing.why-page .bg-pycon .bg-dimmer { +.portico-landing.why-page .bg-dimmer { position: absolute; width: 100%; height: 100%; @@ -3957,3 +3966,325 @@ nav { font-size: 13px; padding-left: 10px; } + +.feature-container { + display: flex; + flex-wrap: wrap; + justify-content: center; + padding: 50px 4vw 10px; + + .feature-half { + display: flex; + flex-direction: column; + justify-content: center; + } + + .md-hide { + display: none; + } + + .md-display { + display: block; + } + + @media (width <= 768px) { + .feature-text { + margin-bottom: 10px; + } + + .twitter-tweet { + margin: 30px auto !important; + } + } + + @media (width >= 768px) { + display: grid; + grid-column-gap: 5%; + grid-template-columns: 43% auto; + max-width: 1300px; + align-items: center; + justify-items: center; + margin: auto; + + .alternate-grid& { + grid-template-columns: auto 43%; + } + + .feature-half { + display: block; + } + + .md-display { + display: none !important; + } + } + + .feature-text { + h1 { + font-size: 30px; + font-weight: 600; + } + + ul { + list-style: none; + margin-left: 0; + } + + ul li { + margin-bottom: 15px; + + &::before { + float: left; + background-repeat: no-repeat; + content: ""; + width: 18px; + height: 18px; + margin-right: 5px; + margin-top: 2px; + background-image: url('data:image/svg+xml;utf8,'); + } + + .list-content { + margin-left: 22px; + } + } + } + + .feature-image { + img, + div.quote { + width: 400px; + } + } + + .feature-buttons { + margin: 0 auto; + } +} + +.twitter-tweet { + margin: auto; +} + +.discounts-section { + text-align: center; + + header { + b { + font-weight: 600; + color: hsl(169, 45%, 43%); + } + } +} + +.register-buttons { + display: flex; + flex-flow: row wrap; + justify-content: center; + margin: 20px; +} + +/* Common button styles */ +.register-now { + font-size: 15px; + margin: 10px 20px; + float: left; + width: 200px; + display: block; + border: 2px solid; + border-radius: 4px; + background: none; + color: inherit; + vertical-align: middle; + position: relative; + z-index: 1; + backface-visibility: hidden; + -moz-osx-font-smoothing: grayscale; + letter-spacing: 2px; + text-transform: uppercase; + overflow: hidden; + transition: border-color 0.3s, background-color 0.3s; + transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); + font-weight: 800; + padding: 15px 5px; + + &:focus { + outline: none; + } + + p { + font-weight: 600; + margin-bottom: 0; + } + + &:hover { + border-color: hsl(169, 45%, 43%); + background-color: hsl(170, 47%, 53%); + color: hsl(0, 0%, 100%); + } +} + +.quote { + background: hsl(218, 46%, 43%); + padding: 1em; + border-radius: 1em; + font-weight: 400; + margin: 40px 5px; + + a { + color: hsl(0, 0%, 100%); + &.case-study-link { + margin-left: 20px; + text-decoration: underline; + } + + &:hover { + text-decoration: underline; + } + } + + .author, + blockquote { + color: hsl(0, 0%, 100%); + margin: 5px 20px 20px; + } + + blockquote { + font-size: 18px; + } + + blockquote::before { + font-size: 20px; + font-weight: 800; + } +} + +.solutions-page { + .hero-text { + position: relative; + width: 80%; + max-width: 700px; + margin: 40px auto; + font-size: 20px; + text-align: center; + font-weight: bolder; + opacity: 0.9; + + a { + color: hsl(170, 76%, 64%); + } + } + + .hero-buttons { + display: flex; + flex-flow: row wrap; + justify-content: center; + + a { + color: hsl(170, 47%, 33%); + font-weight: 600; + font-size: 15px; + margin: 10px; + + &:hover { + color: hsl(0, 0%, 100%); + background-color: hsl(170, 47%, 33%); + border-color: hsl(170, 47%, 33%); + } + } + } + + .feature-end { + @media (width >= 768px) { + margin: 10px; + } + + h1 { + margin-top: 20px; + text-align: center; + font-weight: 600; + margin-bottom: 10px; + padding-bottom: 0; + } + + ul { + margin: auto; + max-width: 800px; + padding: 30px; + } + + p { + margin: auto; + max-width: 800px; + padding: 30px; + } + + .feature-pricing { + margin: auto; + max-width: 635px; + } + + table { + border-collapse: separate; + border-spacing: 0; + } + table tr th, + table tr td { + border-right: 1px solid hsl(0, 0%, 73.3%); + border-bottom: 1px solid hsl(0, 0%, 73.3%); + padding: 20px; + font-weight: 500; + } + table tr th:first-child, + table tr td:first-child { + border-left: 1px solid hsl(0, 0%, 73.3%); + } + + td:nth-child(2), + th:nth-child(2) { + font-weight: 600; + } + + table tr th { + background: hsl(0, 0%, 93.3%); + border-top: 1px solid hsl(0, 0%, 73.3%); + text-align: left; + } + + /* top-left border-radius */ + table tr:first-child th:first-child { + border-top-left-radius: 6px; + } + + /* top-right border-radius */ + table tr:first-child th:last-child { + border-top-right-radius: 6px; + } + + /* bottom-left border-radius */ + table tr:last-child td:first-child { + border-bottom-left-radius: 6px; + } + + /* bottom-right border-radius */ + table tr:last-child td:last-child { + border-bottom-right-radius: 6px; + } + } +} + +.bottom-register-buttons { + max-width: 800px; + margin: auto; + + h1 { + text-align: center; + font-weight: 600; + margin-bottom: 0; + padding-bottom: 0; + } + + .hero-buttons { + margin: 20px; + } +} diff --git a/stylelint.config.js b/stylelint.config.js index e93d6f45c2..d17e807f12 100644 --- a/stylelint.config.js +++ b/stylelint.config.js @@ -19,7 +19,6 @@ module.exports = { // Additional stylistic rules "font-family-name-quotes": "always-where-recommended", - "function-url-quotes": "never", // Limit language features "color-no-hex": true, @@ -38,7 +37,9 @@ module.exports = { // Zulip CSS should have no dependencies on external resources "function-url-no-scheme-relative": true, - "function-url-scheme-allowed-list": [], + "function-url-scheme-allowed-list": [ + "data", // Allow data URIs + ], // We use autoprefixer to generate vendor prefixes "at-rule-no-vendor-prefix": true, diff --git a/templates/zerver/for-education.html b/templates/zerver/for-education.html new file mode 100644 index 0000000000..18d831b021 --- /dev/null +++ b/templates/zerver/for-education.html @@ -0,0 +1,266 @@ +{% extends "zerver/portico.html" %} +{% set entrypoint = "landing-page" %} + +{% set OPEN_GRAPH_TITLE = 'Teach a course with Zulip.' %} +{% set OPEN_GRAPH_DESCRIPTION = 'Online, in-person, and anything in between' %} + +{% block title %} +Teach a course with Zulip for Education: Online, in-person, and anything in between +{% endblock %} + +{% block customhead %} + +{% endblock %} + +{% block portico_content %} + +{% include 'zerver/landing_nav.html' %} + + +
+
+
+
+

Teach a course with Zulip.

+

Online, in-person, and anything in between

+
+ + +
+ +
+
+
+

+ Use topics to organize the discussion +

+ +
+
+ Zulip has the best user experience of all the chat apps I’ve tried. With the discussion organized by topic within each stream, Zulip is the only app that makes hundreds of conversations manageable. +
+
+ — Tobias Lasser, lecturer at the Technical University of Munich Department of Informatics +
+ Learn more about how TUM uses Zulip. +
+
+
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+
+

+ Powerful formatting +

+
    +
  • Type LaTeX directly into your Zulip message, and see it beautifully rendered.
  • +
  • Structure your points with bulleted and numbered lists.
  • +
  • Zulip code blocks come with syntax highlighting for over 250 languages, and integrated code playgrounds.
  • +
+ +
+
+
+
+ +
+
+
+ +
+
+
+

+ Interactive messaging +

+
    +
  • +
    + Use emoji reactions for a quick pulse check. +
    +
  • +
  • Gather students’ preferences with built-in polls.
  • +
  • Hide answers behind spoilers, letting students think before they read.
  • +
  • Share lecture notes and reading materials with drag-and-drop file uploads.
  • +
+
+
+ Participants across six continents signed up for my graduate-level classes when I decided to open them up to the world during the pandemic. Zulip became a central hub for asychronous Q&A and posting Zoom links for lectures, whiteboard PDFs, and announcements. Zulip’s topics, and the ability to change the topic of someone else's message, has made it much easier for me to keep things coherent. It’s super easy to discuss technical material using the TeX integration, and spoilers are a great way to answer questions about homework without depriving students of a chance to keep thinking about the problem on their own. +
+
+ — Kiran S. Kedlaya, Professor of Mathematics at University of California San Diego +
+ Learn more about how UCSD uses Zulip. +
+
+
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+
+

+ Flexible administration and moderation +

+ +
+
+
+
+ +
+
+
+ + +
+
+
+

+ Maintain student privacy +

+ +
+
+
+
+ +
+
+
+ + +
+
+
+ +
+
+
+
+

+ Never miss a beat +

+
    +
  • +
    + With apps for every platform, you can check Zulip at your computer or on your phone. +
    +
  • +
  • Zulip alerts you about urgent messages with fully customizable mobile, email and desktop notifications.
  • +
  • Mention users, groups of users or everyone when you need their attention.
    +
  • +
  • Use Zulip in your language or choice, with translations into 17 languages.
  • +
  • Zulip works reliably for organizations with thousands of users online at once.
  • +
+
+
+
+
+ +
+
+
+ +
+
+

Zulip Cloud for Education plans

+ + + + + + + + + +
Zulip Cloud Standard with education discount +
$1 per user per month
+
$1.20/month billed monthly
+
Zulip Cloud Standard for education non-profits* +
$0.67 per user per month
+
$0.80/month billed monthly
+
+

+ * Discount applies to online purchases only for use at + non-profit institutions (e.g. colleges and universities). +

+
+ +

+ Learn about using Zulip + for conferences and + research communities. If you have any + questions, please contact us + at sales@zulip.com. You + can also drop by + our friendly developer + community at chat.zulip.org to ask for help or suggest + improvements! +

+
+ + +
+ +{% endblock %} diff --git a/templates/zerver/for-events.html b/templates/zerver/for-events.html new file mode 100644 index 0000000000..524893faea --- /dev/null +++ b/templates/zerver/for-events.html @@ -0,0 +1,278 @@ +{% extends "zerver/portico.html" %} +{% set entrypoint = "landing-page" %} + +{% set OPEN_GRAPH_TITLE = 'Zulip for conferences and events' %} +{% set OPEN_GRAPH_DESCRIPTION = 'Conferences, workshops, hackathons. In-person, online, and anything in between.' %} + +{% block title %} +Zulip for conferences and events: Conferences, workshops, hackathons. In-person, online, and anything in between. +{% endblock %} + +{% block customhead %} + +{% endblock %} + +{% block portico_content %} + +{% include 'zerver/landing_nav.html' %} + + +
+
+
+
+

Zulip for conferences and events

+

Conferences, workshops, hackathons. In-person, online, and anything in between.

+
+
+ Zulip Standard is free for academic conferences and most other non-profit events! Contact sales@zulip.com to check whether your organization qualifies, or request sponsorship today. +
+ +
+ + +
+
+
+

+ Use topics to organize the discussion +

+
    +
  • +
    + Zulip + topics create a separate space for + each discussion or question. +
    +
  • +
  • +
    + Make your event more inclusive by lowering the bar + to ask a question, share ideas, and learn from experts. +
    +
  • +
  • +
    + Take time to think. Discussions work great + in real time or async, and conversations + evolve into collaborations. +
    +
  • +
+
+
+ Discussions at conferences often happen in small groups — most + people are not able to participate because they are not present, + or are too intimidated to join. In the conferences we organized + with Zulip, questions or ideas were spread openly. Anybody could + get a chance to contribute, and to benefit from new ideas and + opportunities for collaboration. +

+ Zulip turned out to be a great asset that we plan to keep even + when we go back to face-to-face events. +
+
+ — Christophe Ritzenthaler, Executive Director of CIMPA + and Professor at Rennes 1 University +
+
+
+
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+
+

+ Your communication hub +

+
    +
  • Share the agenda and presentations with + drag-and-drop file uploads.
  • +
  • Use emoji reactions for lightweight interactions. Have fun with custom emoji, or get feedback with a poll.
  • +
  • Announce the schedule without worrying about time zones using local times.
  • +
  • Make a video call with the click of a button.
  • +
  • Use Zulip in your language or choice, with translations into 17 languages.
  • +
+
+
+
+
+ +
+
+
+ +
+
+
+

+ Lasting knowledge repository +

+ +
+
+ The fact that the chat serves as a repository of the scientific / + academic exchanges is a big unanticipated bonus. Participants tend + to log in after the event, sometimes repeatedly, to consult the + messages and get in touch with others. +
+
+ — Marianne Mandl, COMS | Conference Management Software +
+
+
+
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+
+

+ Powerful formatting +

+ +
+
+
+
+ +
+
+
+ +
+
+
+

+ Set everything up ahead of time +

+
    +
  • +
    + With multi-use invite links, there’s no need to create individual Zulip invitations. +
    +
  • +
  • Signing up for Zulip is quick and easy. Participants can make an account, or log in with Google, Apple, etc.
  • +
  • Automatically subscribe members to streams when they join, subscribe a group of users, or copy membership from another stream.
  • +
  • Make an announcement stream where only organizers can post messages. Use private streams to plan the event.
  • +
+
+
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+
+

+ Never miss a beat +

+
    +
  • +
    + With apps for every + platform, check Zulip at your computer or on your + phone. Zulip works great in a browser, so no download is + required. +
    +
  • +
  • Zulip alerts participants about urgent messages with fully customizable mobile, email and desktop notifications.
  • +
  • Mention users, groups of users or everyone when you need their attention.
  • +
  • Zulip works reliably for organizations + with thousands of users online at once.
  • +
+
+
+
+
+ +
+
+
+ +
+
+

+ Zulip Standard is free for academic conferences and + most other non-profit events! +

+ +
+ +

+ Learn about using Zulip for teaching + and research communities. If you have any + questions, please contact us + at sales@zulip.com. You can also drop by + our friendly developer community at + chat.zulip.org to ask for help or suggest improvements! +

+
+
+ +{% endblock %} diff --git a/templates/zerver/for-open-source.html b/templates/zerver/for-open-source.html index ba97128bc3..0258b3406a 100644 --- a/templates/zerver/for-open-source.html +++ b/templates/zerver/for-open-source.html @@ -16,13 +16,27 @@ {% include 'zerver/landing_nav.html' %} -
+

{% trans %}Zulip for open source.{% endtrans %}

Grow your community with fun, thoughtful, and inclusive discussion.

+
+ Zulip Standard is free for open-source projects! Contact sales@zulip.com to check whether your organization qualifies, or request sponsorship today. +
+
@@ -32,6 +46,23 @@
+ +