diff --git a/static/images/landing-page/hello/original/screen-1-dark.png b/static/images/landing-page/hello/original/screen-1-dark.png index ce57731008..fd3b6a04cb 100644 Binary files a/static/images/landing-page/hello/original/screen-1-dark.png and b/static/images/landing-page/hello/original/screen-1-dark.png differ diff --git a/static/images/landing-page/hello/original/screen-1-mobile-dark.png b/static/images/landing-page/hello/original/screen-1-mobile-dark.png index a75adda48e..c984c8b11e 100644 Binary files a/static/images/landing-page/hello/original/screen-1-mobile-dark.png and b/static/images/landing-page/hello/original/screen-1-mobile-dark.png differ diff --git a/static/images/landing-page/hello/original/screen-1-mobile.png b/static/images/landing-page/hello/original/screen-1-mobile.png index 7594cabfd0..8cb19e05ab 100644 Binary files a/static/images/landing-page/hello/original/screen-1-mobile.png and b/static/images/landing-page/hello/original/screen-1-mobile.png differ diff --git a/static/images/landing-page/hello/original/screen-1.png b/static/images/landing-page/hello/original/screen-1.png index c9d32db837..c72d778f51 100644 Binary files a/static/images/landing-page/hello/original/screen-1.png and b/static/images/landing-page/hello/original/screen-1.png differ diff --git a/static/images/landing-page/hello/original/screen-2-dark.png b/static/images/landing-page/hello/original/screen-2-dark.png deleted file mode 100644 index 79bac100aa..0000000000 Binary files a/static/images/landing-page/hello/original/screen-2-dark.png and /dev/null differ diff --git a/static/images/landing-page/hello/original/screen-2-mobile-dark.png b/static/images/landing-page/hello/original/screen-2-mobile-dark.png index 242beeb0c3..cda0ae15be 100644 Binary files a/static/images/landing-page/hello/original/screen-2-mobile-dark.png and b/static/images/landing-page/hello/original/screen-2-mobile-dark.png differ diff --git a/static/images/landing-page/hello/original/screen-2-mobile.png b/static/images/landing-page/hello/original/screen-2-mobile.png index a4bbe5dced..d8a69b7c38 100644 Binary files a/static/images/landing-page/hello/original/screen-2-mobile.png and b/static/images/landing-page/hello/original/screen-2-mobile.png differ diff --git a/static/images/landing-page/hello/switch-diagram.png b/static/images/landing-page/hello/switch-diagram.png new file mode 100644 index 0000000000..6459a11149 Binary files /dev/null and b/static/images/landing-page/hello/switch-diagram.png differ diff --git a/templates/corporate/hello.html b/templates/corporate/hello.html index 661bb43ee8..d38a34aa3d 100644 --- a/templates/corporate/hello.html +++ b/templates/corporate/hello.html @@ -18,58 +18,49 @@

Organized team chat

-
- The calmer, more efficient way to work. -
- - + {{ static('images/landing-page/hello/generated/screen-1-2x.jpg') }} 2x"/>
- See it in use +
in an open organization
 - Create organization +
in 1 minute for free
 - Get a demo +
request a call
@@ -86,63 +77,40 @@

What makes Zulip different

-
+

People often tell us that traditional team chat tools (Slack, Microsoft Teams, etc.) feel chaotic and stressful.

- Zulip is designed around conversations that are labeled with topics, to make communication feel organized and efficient. It’s easy to get an overview of what conversations are happening, and to read one conversation at a time. + Zulip is designed around conversations that are labeled with topics, to make communication organized and efficient. It’s easy to get an overview of what conversations are happening, and to read one conversation at a time.

-
+
- Zulip’s threading model makes it so much easier to manage my team… As a leader, in just a few minutes I can get an overview over what’s going on and see where my attention is needed. -
+ Zulip’s threading model makes it so much easier to manage my team… As a leader, in just a few minutes I can get an overview over what’s going on and see where my attention is needed.
- Case study with - Gaute Lund, - co-founder of iDrift AS + Case study with Gaute Lund, co-founder of iDrift AS
-
+
- + - + {{ static('images/landing-page/hello/generated/screen-2-mobile-dark-2x.webp') }} 2x" + media="(prefers-color-scheme: dark)"/> - + {{ static('images/landing-page/hello/generated/screen-2-mobile-2x.webp') }} 2x"/> + src="{{ static('images/landing-page/hello/generated/screen-2-mobile-1x.jpg') }}" + srcset="{{ static('images/landing-page/hello/generated/screen-2-mobile-1x.jpg') }}, + {{ static('images/landing-page/hello/generated/screen-2-mobile-2x.jpg') }} 2x"/>
@@ -150,206 +118,134 @@
-

Collaboration at scale

-
- Zulip helps teams of all sizes be more productive together, from a few friends hacking on a new idea, to globally distributed organizations with hundreds of people tackling the world’s hardest problems. +

Zulip transforms how work gets done.

+
Check out these case studies to see the impact.
+
+ +
+

Less stress

+ With Zulip, I can manage hundreds of participants across two communities extremely efficiently, and I don’t feel stressed. +
+
+ Dan Allen, Asciidoctor open-source project lead +
+ + +
+

Faster decisions

+ Zulip lets us move faster, connect with each other better, and have interactive technical discussions that are organized, recorded, and welcoming. +
+
+ Josh Triplett, Rust Language team co-lead +
+ + +
+

Leaders are informed

+ Using Zulip significantly increases the size of the team for which a manager can meaningfully know what’s going on. +
+
+ Gaute Lund, co-founder of iDrift AS +
+ + +
+

Scalable communication

+ Zulip has the best user experience of all the chat apps I’ve tried… It is the only app that makes hundreds of conversations manageable. +
+
+ Tobias Lasser, Technical University of Munich +
+ + +
+

Uninterrupted focus

+ In Zulip, it’s super easy to find things 24 hours later if you weren’t online when a discussion happened. +
+
+ Gareth Watts, co-founder and CTO of Atolio +
+ + +
+

Easy to use software

+ The software must be as simple as possible. That’s why we love Zulip. +
+
+ Erik Dittert, Head of IT at GUT contact +
+
-
-
- Zulip has the best user experience of all the chat apps I’ve tried… It is the only app that makes hundreds of conversations manageable. -
-
-
- Case study with - Tobias Lasser, - Technical University of - Munich -
-
-
-
- - - - - - - - - - - -
-

Enterprise ready

-
+ +
+

Switching to Zulip isn’t hard.

- Take charge of your mission-critical communications with Zulip’s reliable 100% free and open-source software, with no vendor lock-in. You can count on our industry-leading security practices to keep your data safe. + Zulip offers a convenient cloud solution, with features to make your users and IT team happy. Import your data and integrations from Slack and other products.

+

Your data is yours!

- When you self-host Zulip, you get all the features of our cloud offering, plus ultimate control and compliance. + For ultimate control and compliance, self-host Zulip’s 100% open-source software, with easy installation and upgrades.

-
- SAML authentication - LDAP sync - Import & export tools - Fine-grained permissions - Extensive configuration - 100s of integrations - Slack-compatible webhooks - GDPR compliance - Retention policies -
-
-
- - - - - -
+
+ + + + + + +
-

- Learn how Zulip can help your organization! -

-
-
-
-
- Business - -
- Zulip is everything Slack is, but it’s smarter and more powerful. -
+

Curious to learn more?

+
Dive into our detailed guide for organizations like yours.
+
+ +
+

Business

+ Organizations from small businesses to enterprises communicate more efficiently.
-
- Review in The Register -
-
-
-
-
- Open source - -
- Rust development would not be moving at the pace that it has been without Zulip. -
-
-
- Josh Triplett,Rust Language team co-lead -
-
-
-
-
- Education - -
- Zulip’s topics have made it much easier for me to keep things coherent. -
-
-
-
- Kiran S. Kedlaya,Professor of Mathematics at UCSD -
-
-
-
-
- Research - -
- The excellent LaTeX rendering and clever threading make it far superior to email and Slack. -
-
-
-
- Tom Gur,Associate Professor at Warwick -
-
-
-
-
- Events - -
- With Zulip, questions or ideas were spread openly. -
-
-
- Christophe Ritzenthaler,Executive Director of CIMPA -
-
-
-
-
- Communities - -
- No other tool has a user experience that scales to a community of our size. -
-
-
-
- Nick Bergson-Shilcock,CEO of Recurse Center -
-
-
-
- - - - + +
+

Research

+ For your group, lab, department or scientific field. +
+ + +
+

Education

+ Communication hub for classes, in-person or online. +
+ + +
+

Open-source

+ Grow and engage your community. +
+ + +
+

Non-profits, Governments

+ Free or highly-discounted plans are available for most non-business uses. +
+ + +
+

Events and conferences

+ For organizers and attendees at your conference, workshop, or hackathon. +
diff --git a/tools/setup/generate_landing_page_images.py b/tools/setup/generate_landing_page_images.py index 63f23cf92d..45bf9fd92b 100755 --- a/tools/setup/generate_landing_page_images.py +++ b/tools/setup/generate_landing_page_images.py @@ -25,6 +25,10 @@ def get_x_size(size: Tuple[float, float], x: int) -> Tuple[int, int]: def generate_landing_page_images() -> None: if not os.path.exists(GENERATED_IMAGES_DIR): os.mkdir(GENERATED_IMAGES_DIR) + else: + # Delete folder contents to avoid stale images between different versions of the script. + for file in os.listdir(GENERATED_IMAGES_DIR): + os.remove(os.path.join(GENERATED_IMAGES_DIR, file)) for image_file_path in glob.glob(f"{ORIGINAL_IMAGES_DIR}/*"): file_name = Path(image_file_path).stem @@ -33,7 +37,6 @@ def generate_landing_page_images() -> None: size_1x = get_x_size(image.size, 1) ## Generate WEBP images. - image.save(f"{GENERATED_IMAGES_DIR}/{file_name}-3x.webp", quality=50) image_2x = image.resize(size_2x) image_2x.save(f"{GENERATED_IMAGES_DIR}/{file_name}-2x.webp", quality=50) image_1x = image.resize(size_1x) @@ -42,7 +45,6 @@ def generate_landing_page_images() -> None: ## Generate JPG images. # Convert from RGBA to RGB since jpg doesn't support transparency. rgb_image = image.convert("RGB") - rgb_image.save(f"{GENERATED_IMAGES_DIR}/{file_name}-3x.jpg", quality=19, optimize=True) rgb_image_2x = rgb_image.resize(size_2x) rgb_image_2x.save( f"{GENERATED_IMAGES_DIR}/{file_name}-2x.jpg", quality=50, optimize=True diff --git a/web/styles/portico/hello.css b/web/styles/portico/hello.css index ccf3bb1475..0372885cbd 100644 --- a/web/styles/portico/hello.css +++ b/web/styles/portico/hello.css @@ -2,12 +2,6 @@ --font-ss3: "Source Sans 3 VF", sans-serif; --font-ops: "Open Sans Variable", sans-serif; --appshot-1-img-width: 1095px; - --appshot-2-img-width: 1095px; - --appshot-3-width: 660px; - --appshot-3-height: 734px; - --appshot-3-1-img-width: 367px; - --appshot-3-2-img-width: 413px; - --appshot-4-img-width: 617px; } html, @@ -18,6 +12,7 @@ body { font-family: var(--font-ss3); background: hsl(209.4deg 40.2% 50.2%); color: hsl(0deg 0% 100%); + -webkit-tap-highlight-color: transparent; } body :target { @@ -53,20 +48,25 @@ ul { height: 100vh; background: linear-gradient( 180deg, - hsl(209.4deg 40.2% 50.2%) 30%, + hsl(209deg 45% 58%) 30%, hsl(238.4deg 27.9% 26.7%) 70% ); @media (prefers-color-scheme: dark) { background: linear-gradient( 180deg, - hsl(209deg 63% 40%) 30%, + hsl(209deg 55% 40%) 30%, hsl(238deg 28% 21%) 70% ); } } .portico-hello-page { + ._full-height-no-scroll { + height: 100%; + overflow: hidden; + } + & details summary::marker, & details summary::-webkit-details-marker { display: none; @@ -92,11 +92,11 @@ ul { .screen-1 { background: linear-gradient( 180deg, - hsl(209.4deg 40.2% 50.2%) 0%, - hsl(209.6deg 48.4% 68.8%) 100% + hsl(209deg 45% 58%) 0%, + hsl(210deg 48% 66%) 100% ); padding-top: 102px; - padding-bottom: 58px; + padding-bottom: 20px; overflow: hidden; text-align: center; } @@ -112,97 +112,74 @@ ul { z-index: 5; } - .h1-subheader { - font-family: var(--font-ops); - font-style: normal; - font-weight: 350; - font-size: 24px; - line-height: 142%; - text-align: center; - font-feature-settings: - "pnum" on, - "lnum" on; - color: hsl(0deg 0% 100%); - margin: 0 10px; - z-index: 5; - } - .appshot-1 { display: inline-block; - position: relative; - margin-top: 30px; + margin-top: 20px; text-align: center; } .appshot-1__img { - box-shadow: 0 0 70px hsl(209deg 96% 30% / 45%); + box-shadow: 0 8px 70px hsl(209deg 100% 31% / 40%); border-radius: 10px; width: var(--appshot-1-img-width); height: auto; } .cta-buttons { - position: absolute; - right: 10px; - bottom: 24px; - width: 780px; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr; - gap: 10px; + gap: 16px; + padding-top: 16px; } .cta-buttons a { user-select: none; display: inline-block; - padding: 10px 0; + padding: 10px 0 9px; text-align: center; - background: hsl(216.2deg 78.2% 55.1%); + background: hsl(216deg 70% 47% / 100%); border-radius: 5px; border: none; font-family: var(--font-ops); font-style: normal; font-weight: 500; - font-size: 18px; - line-height: 25px; + font-size: 20px; + line-height: 100%; font-feature-settings: "pnum" on, "lnum" on; - box-shadow: 0 0 10px hsl(210.7deg 100% 49.4% / 70%); color: hsl(0deg 0% 100%); transition: all 0.8s ease-out; cursor: pointer; } - .cta-buttons i { - margin-right: 4px; - } - .cta-buttons a:hover { - transition: none; + transition-duration: 0.1s; background: hsl(215.9deg 98.3% 53.3%); - box-shadow: - 0 0 1px hsl(0deg 0% 100%), - 0 0 16px hsl(210.7deg 100% 49.4%); + transform: scale(1.01); } .cta-buttons a:active { transition-duration: 0.1s; background: hsl(215.8deg 89.3% 47.8%); - box-shadow: - 0 0 1px hsl(0deg 0% 100%), - 0 0 12px hsl(210.7deg 100% 49.4%); + transform: scale(0.99); + } + + .cta-desc { + font-size: 16px; + font-weight: 400; + opacity: 0.75; + padding-top: 4px; } .client-logos { - margin-top: 38px; - overflow: hidden; + margin-top: 24px; display: grid; grid-template-columns: repeat(6, 200px); grid-template-rows: 100px; justify-content: center; place-items: center; - gap: 24px 0; } .client-logos div { @@ -210,19 +187,19 @@ ul { background-position: center; } - .screen-4, + .screen-2, .screen-3, - .screen-2 { - height: 899px; + .screen-4 { box-sizing: border-box; overflow: hidden; } .screen-2 { + height: 740px; background: linear-gradient( 180deg, - hsl(233.8deg 61.9% 62.9%) 0%, - hsl(223.2deg 59.8% 64.9%) 100% + hsl(210deg 48% 66%) 0%, + hsl(236deg 48% 58%) 100% ); } @@ -234,60 +211,70 @@ ul { overflow: visible; position: relative; margin: auto; + gap: 56px; } .screen-4__container, - .screen-3__container, .screen-2__container { display: flex; flex-flow: row nowrap; align-items: center; + justify-content: center; height: 100%; } - .screen-4__content, - .screen-3__content, - .screen-2__content { - padding-right: 40px; - } - .appshot-2__img { - width: var(--appshot-2-img-width); height: auto; - box-shadow: 0 -4px 70px hsl(208.9deg 70.4% 22.5% / 40%); + box-shadow: 0 -4px 40px hsl(208deg 70% 22% / 20%); border-radius: 10px; } & h2 { font-family: var(--font-ss3); font-style: normal; - font-weight: 500; - font-size: 54px; - line-height: 119%; color: hsl(0deg 0% 100%); + font-size: 50px; + font-weight: 550; + line-height: 116%; } - .screen-2__header, - .screen-3__header, - .screen-4__header { - width: 600px; + & h3 { + font-family: var(--font-ss3); + font-style: normal; + color: hsl(0deg 0% 100%); + font-size: 42px; + font-weight: 550; + line-height: 119%; + margin: 32px 0 16px; + } + + .screen-2__header { + max-width: 600px; display: inline-block; margin: 0; } + .screen-4__header, + .screen-5__header { + margin: 0; + } + .screen-2__desc, - .screen-3__desc, .screen-4__desc { - width: 590px; + max-width: 590px; font-family: var(--font-ops); font-style: normal; + font-size: 21px; font-weight: 350; - font-size: 24px; - line-height: 150%; + line-height: 140%; color: hsl(0deg 0% 100%); margin-top: 20px; } + .screen-4__desc { + max-width: 630px; + } + & em { font-style: normal; font-weight: 650; @@ -300,41 +287,91 @@ ul { .quote { margin-top: 50px; + max-width: 590px; + padding-bottom: 10px; + display: block; } .quote__text { + transition: all 0.5s ease-out; font-family: var(--font-ss3); font-style: normal; font-weight: 400; - font-size: 24px; - line-height: 142%; + font-size: 21px; + line-height: 140%; position: relative; - left: -24px; - border-radius: 25px; - padding: 20px 24px; + border-radius: 25px 25px 25px 0; + padding: 20px 24px 18px; + background: linear-gradient( + 0deg, + hsl(0deg 0% 100% / 50%) 0%, + hsl(0deg 0% 100% / 75%) 100% + ); + color: hsl(233deg 14% 26%); } - .screen-1 .quote__text, .screen-2 .quote__text, .screen-3 .quote__text { - width: 580px; + max-width: 580px; } - .quote__text-tail { - width: 44px; - height: 63px; - background: inherit; - mask-image: var(--quote-tail-mask); - overflow: hidden; - + .quote__text::after { + content: ""; + display: block; position: absolute; - bottom: -34px; + width: 42px; + height: 37px; + bottom: -37px; left: 0; + mask-image: var(--quote-tail-mask); + transition: all 0.5s ease-out; + background: linear-gradient( + 0deg, + hsl(0deg 0% 100% / 49%) 0%, + hsl(0deg 0% 100% / 49%) 100% + ); } - .screen-2 .quote__text { - background: hsl(227.3deg 60% 89.2%); - color: hsl(233.3deg 13.6% 25.9%); + .quote:hover { + .quote__text { + transition-duration: 0.3s; + box-shadow: 0 8px 36px hsl(208deg 70% 25% / 35%); + background: linear-gradient( + 0deg, + hsl(0deg 0% 100% / 65%) 0%, + hsl(0deg 0% 100% / 80%) 100% + ); + } + + .quote__text::after { + transition-duration: 0.3s; + background: linear-gradient( + 0deg, + hsl(0deg 0% 100% / 64%) 0%, + hsl(0deg 0% 100% / 64%) 100% + ); + } + } + + .quote:active { + .quote__text { + transition-duration: 0.1s; + box-shadow: 0 0 0 hsl(208deg 70% 25% / 25%); + background: linear-gradient( + 0deg, + hsl(0deg 0% 100% / 70%) 0%, + hsl(0deg 0% 100% / 85%) 100% + ); + } + + .quote__text::after { + transition-duration: 0.1s; + background: linear-gradient( + 0deg, + hsl(0deg 0% 100% / 69%) 0%, + hsl(0deg 0% 100% / 69%) 100% + ); + } } .screen-2 .quote__text strong { @@ -344,24 +381,20 @@ ul { .quote__source { position: relative; - top: 16px; - left: 16px; - background-image: var(--quote-source-icon); - background-position-y: 2px; - background-size: 24px 24px; - background-repeat: no-repeat; - padding-left: 28px; + top: 7px; + left: 0; + padding-left: 24px; font-family: var(--font-ops); font-style: normal; font-weight: 350; - font-size: 20px; - line-height: 140%; + font-size: 18px; + line-height: 130%; color: hsl(0deg 0% 100%); } .quote__source strong { font-family: var(--font-ops); - font-weight: 600; + font-weight: 550; font-style: bold; } @@ -377,240 +410,191 @@ ul { } .quote__source a:hover { - border-bottom: 2px solid hsl(0deg 0% 100%); + border-bottom: 1px solid hsl(0deg 0% 100%); transition: none; } .screen-3 { + height: 920px; background: linear-gradient( 180deg, - hsl(244.9deg 56.2% 57.1%) 0%, - hsl(274.8deg 45.1% 70%) 100% + hsl(236deg 48% 58%) 0%, + hsl(250deg 50% 54%) 100% ); + + .screen-3__quotes { + display: grid; + max-width: 1120px; + margin: 30px auto; + grid-template-columns: 1fr 1fr; + gap: 24px 28px; + justify-items: center; + } + + .screen-3__quotes .quote { + margin: 0; + } + + .quote__text { + line-height: 130%; + } + + .quote__text strong { + color: hsl(250deg 70% 60% / 100%); + font-weight: 600; + } + + .quote__text h4 { + margin: 0 0 8px; + color: hsl(250deg 57% 49% / 100%); + font-size: 30px; + font-style: normal; + font-weight: 600; + line-height: 110%; + } } - .screen-3 .quote__text { - background: hsl(255deg 51.9% 89.4%); - color: hsl(290deg 13.6% 25.9%); + .screen-3__container { + padding: 60px 16px; } - .screen-3 .quote__text strong { - color: hsl(255deg 74.8% 54.9%); - font-weight: 600; + .screen-3__header, + .screen-5__header { + margin: 0; + text-align: center; } - .appshot-3 { - position: relative; - width: var(--appshot-3-width); - height: var(--appshot-3-height); - } - - .appshot-3-1__img, - .appshot-3-2__img { - position: absolute; - box-shadow: 0 -4px 70px hsl(244.4deg 69.2% 22.9% / 30%); - border-radius: 10px; - } - - .appshot-3-1__img { - width: var(--appshot-3-1-img-width); - height: auto; - top: 42px; - } - - .appshot-3-2__img { - width: var(--appshot-3-2-img-width); - height: auto; - right: 0; + .screen-3__subtitle, + .screen-5__subtitle { + text-align: center; + font-size: 28px; + font-style: normal; + font-weight: 350; + line-height: 120%; + opacity: 0.8; + margin-top: 4px; } .screen-4 { background: linear-gradient( 180deg, - hsl(263.1deg 56% 49%) 0%, - hsl(346.8deg 45.6% 66.9%) 100% + hsl(250deg 50% 54%) 0%, + hsl(281deg 67% 62%) 100% ); } - .screen-description a { + .screen-4__content { + display: flex; + gap: 48px; + align-items: center; + } + + .switch-diagram { + flex: 0 1; + } + + .badges { + display: flex; + justify-content: center; + margin-top: 64px; + gap: 50px; + flex-wrap: wrap; + } + + .screen-2__desc a, + .screen-4__desc a { font-weight: 550; border-bottom: 1px solid hsl(0deg 0% 100% / 50%); transition: border 0.4s ease-out; } - .screen-description a:hover { - border-bottom: 2px solid hsl(0deg 0% 100%); + .screen-2__desc a:hover, + .screen-4__desc a:hover { + border-bottom: 1px solid hsl(0deg 0% 100%); transition: none; } - .appshot-4__img { - width: var(--appshot-4-img-width); - height: auto; - box-shadow: 0 -4px 70px hsl(262.7deg 70.2% 18.4% / 40%); - border-radius: 10px; - } - - .screen-4__tags { - margin-top: 50px; - position: relative; - left: -10px; - } - - .screen-4__tags a { - background: hsl(263.3deg 55.4% 49.2% / 90%); - border-radius: 4px; - display: inline-block; - font-family: var(--font-ops); - font-style: normal; - font-weight: 500; - font-size: 20px; - line-height: 145%; - letter-spacing: 0.01em; - font-feature-settings: "ss01" on; - padding: 2px 10px 3px; - margin-bottom: 10px; - margin-right: 10px; - color: hsl(0deg 0% 100%); - transition-property: box-shadow, background-color; - transition-duration: 0.2s; - } - - .screen-4__tags a:hover { - background: hsl(263.3deg 55.4% 49.2%); - box-shadow: inset 0 0 0 1px hsl(0deg 0% 100% / 80%); - } - .screen-5 { background: linear-gradient( 180deg, - hsl(241.6deg 48.1% 45.3%) 0%, - hsl(273.7deg 46.3% 55.5%) 99.36% + hsl(281deg 67% 62%) 0%, + hsl(317deg 45% 32%) 100% ); box-sizing: border-box; overflow: hidden; } .screen-5__container { - padding-bottom: 40px; + padding: 90px 16px; } - .screen-5__header { - margin: 102px 16px 70px; - text-align: center; - opacity: 0.8; - } - - .screen-5__quotes { - display: flex; - flex-flow: row wrap; - justify-content: space-evenly; - align-items: flex-start; - margin: auto 24px; - gap: 16px; - } - - .screen-5__quotes .quote { - width: 370px; - margin: 0 0 70px; - flex-shrink: 0; - position: relative; - left: 24px; - } - - .screen-5 .quote__text { - display: block; - background: hsl(255deg 51.9% 89.4%); - color: hsl(290deg 13.6% 25.9%); - font-family: var(--font-ops); - font-style: normal; - font-weight: 400; - font-size: 20px; - line-height: 140%; - } - - .screen-5 .quote__source { - width: 300px; - } - - .screen-5 .quote__text-tail { - bottom: -34px; - } - - .screen-5 .quote__text strong { - color: hsl(247.7deg 54.1% 52.2%); - } - - .quote__text-industry { - display: flex; - align-items: flex-end; - color: hsl(248deg 54% 52%); - font-family: var(--font-ops); - font-style: normal; - font-weight: 600; - font-size: 30px; - line-height: 133%; - margin-bottom: 13px; - - text-decoration: underline; - text-decoration-style: solid; - text-underline-offset: 4px; - text-decoration-color: hsl(248deg 54% 52% / 30%); - } - - .quote__text-industry:hover { - color: hsl(248deg 70% 54%); - text-decoration-color: currentcolor; - } - - .quote__text-industry:active { - color: hsl(248deg 70% 40%); - text-decoration-color: currentcolor; - } - - .quote__text-industry-icon { - margin-bottom: 5px; - height: 32px; - max-width: 36px; - margin-left: 0.5ch; - } - - .quote__text-industry-icon._wider { - max-width: 44px; - height: 34px; - } - - .screen-5 .quote__source i.quote__source-title { - margin-top: 2px; - display: block; - font-size: 18px; - line-height: 160%; - } - - .screen-5__badges { - display: flex; - justify-content: center; - margin-bottom: 24px; - gap: 50px; - flex-wrap: wrap; - } - - .screen-5__badge-getapp img, - .screen-5__badge-capterra img { - opacity: 0.8; + .badge-getapp img, + .badge-capterra img { + opacity: 0.9; height: 128px; } + .screen-5__cards { + display: grid; + max-width: 900px; + margin: 30px auto; + grid-template-columns: 1fr 1fr; + gap: 20px; + } + + .card { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 4px; + justify-content: flex-start; + border-radius: 9px; + border: 2px solid hsl(0deg 0% 100% / 26%); + background: hsl(0deg 0% 100% / 7%); + min-height: 80px; + transition: all 0.2s; + padding: 12px 16px 14px; + + .card__text { + width: 100%; + font-size: 17px; + font-weight: 400; + line-height: 140%; + } + + h4 { + font-size: 28px; + font-weight: 550; + line-height: 32px; + margin: 0 0 4px; + position: relative; + } + + h4::after { + content: ""; + display: block; + position: absolute; + right: 0; + top: 4px; + opacity: 0.5; + } + } + + .card:hover { + background: hsl(0deg 0% 100% / 15%); + } + /* Dark theme modifications */ @media (prefers-color-scheme: dark) { & body { - background: hsl(209deg 63% 40%); + background: hsl(209deg 55% 40%); } .screen-1 { background: linear-gradient( 180deg, - hsl(209deg 63% 40%) 0%, - hsl(210deg 55% 56%) 100% + hsl(209deg 55% 40%) 0%, + hsl(209deg 40% 55%) 100% ); } @@ -619,79 +603,56 @@ ul { } .cta-buttons a { - background: hsl(216deg 90% 65%); - display: flex; - justify-content: center; - align-items: center; - gap: 7px; + background: hsl(216deg 90% 82%); + color: hsl(216deg 90% 15% / 100%); + font-weight: 600; + } - & i { - display: inline-block; - width: 24px; - height: 24px; - } + .cta-desc { + font-weight: 500; } .cta-buttons a:hover { - background: hsl(216deg 100% 63%); - box-shadow: - 0 0 1px hsl(0deg 0% 100%), - 0 0 16px hsl(210.7deg 100% 49.4%); + background: hsl(216deg 90% 90%); } .cta-buttons a:active { - background: hsl(216deg 100% 60%); - box-shadow: - 0 0 1px hsl(0deg 0% 100%), - 0 0 12px hsl(210.7deg 100% 49.4%); + background: hsl(216deg 90% 82%); } .screen-2 { background: linear-gradient( 180deg, - hsl(234deg 56% 53%) 0%, - hsl(223deg 51% 55%) 100% + hsl(209deg 40% 55%) 0%, + hsl(236deg 47% 50%) 100% ); } .appshot-2__img { - box-shadow: 0 0 70px hsl(233.5deg 100% 18.2% / 70%); - } - - .screen-2 .quote__text { - background: hsl(227deg 60% 80%); + box-shadow: 0 0 40px hsl(233.5deg 100% 18.2% / 50%); } .screen-3 { background: linear-gradient( 180deg, - hsl(245deg 56% 51%) 0%, - hsl(275deg 45% 53%) 100% + hsl(236deg 47% 50%) 0%, + hsl(250deg 50% 45%) 99.36% ); } - .appshot-3-1__img, - .appshot-3-2__img { - box-shadow: 0 0 42px hsl(252deg 100% 5% / 28%); - } - - .screen-3 .quote__text { - background: hsl(255deg 52% 83%); - } - .screen-4 { background: linear-gradient( 180deg, - hsl(263deg 56% 39%) 0%, - hsl(347deg 35% 57%) 100% + hsl(250deg 50% 45%) 0%, + hsl(281deg 68% 55%) 100% ); } .screen-5 { background: linear-gradient( 180deg, - hsl(242deg 48% 35%) 0%, - hsl(274deg 46% 45%) 99.36% + hsl(281deg 68% 55%) 0%, + hsl(317deg 45% 30%) 100% ); } @@ -713,60 +674,16 @@ ul { @media (width <= 1320px) { .client-logos { transform: scale(0.8); - /* Add a lot of negative margin on left and right so that when transform - reduces its width, it still has enough width to display all logos without - cropping them. */ - margin: 38px -500px 0; } } @media (width <= 1311px) { - .screen-4, - .screen-3, .screen-2 { height: 768px; } .appshot-2__img { - width: calc(var(--appshot-2-img-width) * 0.9); - } - - .appshot-3 { - width: calc(var(--appshot-3-width) * 0.85); - height: calc(var(--appshot-3-height) * 0.85); - } - - .appshot-3-1__img { - width: calc(var(--appshot-3-1-img-width) * 0.85); - } - - .appshot-3-2__img { - width: calc(var(--appshot-3-2-img-width) * 0.85); - } - - .appshot-4 { - padding-right: 54px; - } - - .appshot-4__img { - width: calc(var(--appshot-4-img-width) * 0.95); - } - - .screen-4__content, - .screen-3__content, - .screen-2__content { - padding-right: 16px; - padding-left: 54px; - /* Hack to emulate `zoom: 0.9` since zoom - doesn't work on FireFox. */ - transform: scale(0.9); - margin: -30px; - } - - .screen-4__tags a { - margin-right: 8px; - margin-bottom: 8px; - font-size: 18px; + width: 320px; } } @@ -775,50 +692,54 @@ ul { width: calc(var(--appshot-1-img-width) * 0.8); } - .cta-buttons { - transform: scale(0.8); - transform-origin: bottom right; + .screen-2__container, + .screen-4__container { + gap: 32px; + } + + .switch-diagram { + max-width: 280px; + height: auto; } } @media (width <= 1050px) { .client-logos { - transform: scale(0.9); + transform: scale(1); grid-template-columns: repeat(3, 200px); grid-template-rows: 100px 100px; } + + .screen-2__container, + .screen-3__container, + .screen-4__container { + gap: 16px 24px; + padding: 0 16px; + } } @media (width <= 990px) { - .appshot-2__img { - width: calc(var(--appshot-2-img-width) * 0.75); + & h1 { + font-size: 40px; } - .appshot-3 { - width: calc(var(--appshot-3-width) * 0.75); - height: calc(var(--appshot-3-height) * 0.75); + & h2 { + font-size: 34px; } - .appshot-3-1__img { - width: calc(var(--appshot-3-1-img-width) * 0.75); + & h3 { + font-size: 28px; } - .appshot-3-2__img { - width: calc(var(--appshot-3-2-img-width) * 0.75); - } - - .screen-5__header { - margin: 70px 16px 40px; + .screen-3 .screen-3__subtitle, + .screen-5 .screen-5__subtitle { + font-size: 24px; } } @media (width <= 940px) { .appshot-1 { width: auto; - - .cta-buttons { - transform: scale(1); - } } .appshot-1__img { @@ -829,10 +750,11 @@ ul { .cta-buttons { position: static; width: 100%; - margin: 16px 0 8px; + margin: 0; display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr 1fr 1fr; + gap: 8px; } .cta-buttons a, @@ -846,18 +768,6 @@ ul { height: 44px; } - & h1 { - font-size: 40px; - } - - .h1-subheader { - font-size: 20px; - } - - & h2 { - font-size: 34px; - } - .screen-2__desc, .screen-3__desc, .screen-4__desc { @@ -874,36 +784,41 @@ ul { .screen-3__container, .screen-4__container { flex-direction: column; - padding: 50px 0; + padding: 50px 24px; height: auto; - width: 100%; align-items: unset; } .screen-2__content, - .screen-3__content, .screen-4__content { transform: scale(1); padding: 0; - margin: 0 24px; + max-width: 600px; + margin: auto; + } + + .screen-4__content { + flex-direction: column; + gap: 16px; + align-items: flex-start; + } + + .switch-diagram { + max-width: 220px; } .screen-2__header, .screen-2__desc, .screen-2 .quote__text, - .screen-3__header, - .screen-3__desc, .screen-3 .quote__text, .screen-4__header, .screen-4__desc, - .screen-4 .quote__text { + .screen-5__header { width: auto; } .quote { margin-top: 24px; - margin-left: 14px; - margin-right: -34px; } .quote__text { @@ -916,35 +831,38 @@ ul { background-position-y: 0; } - .screen-5 .quote__source i.quote__source-title { - font-size: 14px; + .screen-3 .screen-3__quotes { + margin: 30px auto; + grid-template-columns: 1fr; + gap: 24px; } - .quote__text-tail { - bottom: -34px; + .screen-5 .screen-5__cards { + margin: 20px auto; + grid-template-columns: 1fr; + gap: 16px; + max-width: 400px; + + .card { + min-height: 60px; + } + + .card__text { + font-size: 15px; + } + + h4 { + font-size: 24px; + line-height: 26px; + margin: 0 0 4px; + } + + h4::after { + top: 0; + } } - .quote__text-industry { - font-size: 24px; - font-weight: 700; - margin-bottom: 4px; - } - - .quote__text-industry-icon { - height: 28px; - } - - .quote__text-industry-icon._wider { - height: 30px; - } - - .screen-5__quotes .quote { - margin: 0 0 30px; - } - - .appshot-2, - .appshot-3, - .appshot-4 { + .appshot-2 { width: auto; height: auto; text-align: center; @@ -952,63 +870,21 @@ ul { margin-top: 50px; } - .appshot-3-1__img { - display: none; - } - - .appshot-2__img, - .appshot-3-2__img, - .appshot-4__img { + .appshot-2__img { position: static; width: 100%; height: auto; - } - - .appshot-2__img, - .appshot-3-2__img { max-width: 375px; } - .appshot-4__img { - max-width: 600px; - } - - .screen-4__tags { - margin-top: 24px; - } - - .screen-5__badges { - margin-top: 48px; - } - } - - @media (width <= 940px) and (prefers-color-scheme: dark) { - .cta-buttons a, - .cta-buttons a:hover, - .cta-buttons a:active { - box-shadow: none; - } - - .cta-buttons a { - background: hsl(216deg 49% 36%); - } - - .cta-buttons a:hover { - background: hsl(216deg 75% 34%); - } - - .cta-buttons a:active { - background: hsl(215deg 81% 28%); - } - - .screen-4__tags a { - background: hsl(263deg 55% 56% / 88%); + .badges { + margin-top: 16px; } } @media (width <= 900px) { .client-logos { - transform: scale(0.8); + transform: scale(0.86); } } @@ -1021,30 +897,21 @@ ul { } } - @media (width <= 516px) { - .screen-4__tags { - display: flex; - flex-direction: column; - align-items: flex-start; - } - } - @media (width <= 400px) { .client-logos { transform: scale(0.7); grid-template-columns: repeat(2, 200px); grid-template-rows: 100px 100px 100px; } - } - @media (width <= 375px) { - .appshot-1, - .appshot-2, - .appshot-3 { + .appshot-1 { + margin: 20px 7px; + } + + .appshot-2 { margin: 30px 7px; } - .appshot-3-2__img, .appshot-2__img, .appshot-1__img { /* Let the image change width based on window width */ @@ -1055,6 +922,28 @@ ul { font-size: 36px; } + .screen-5 .screen-5__cards { + margin: 10px auto; + grid-template-columns: 1fr; + gap: 12px; + max-width: 320px; + + .card { + min-height: 50px; + } + + .card__text { + font-size: 13px; + line-height: 120%; + } + + h4 { + font-size: 18px; + line-height: 24px; + margin: 0; + } + } + .screen-5__quotes .quote { width: 320px; } diff --git a/web/styles/portico/svg_icons.css b/web/styles/portico/svg_icons.css index 56fc0a4f1c..7d696b0ee4 100644 --- a/web/styles/portico/svg_icons.css +++ b/web/styles/portico/svg_icons.css @@ -5,23 +5,7 @@ before the animation of the logos begins. */ :root { - --quote-source-icon: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.08301 17.5H13.083C13.3663 17.5 13.604 17.404 13.796 17.212C13.9873 17.0207 14.083 16.7833 14.083 16.5C14.083 16.2167 13.9873 15.979 13.796 15.787C13.604 15.5957 13.3663 15.5 13.083 15.5H8.08301C7.79967 15.5 7.56201 15.5957 7.37001 15.787C7.17867 15.979 7.08301 16.2167 7.08301 16.5C7.08301 16.7833 7.17867 17.0207 7.37001 17.212C7.56201 17.404 7.79967 17.5 8.08301 17.5ZM8.08301 13.5H16.083C16.3663 13.5 16.6037 13.404 16.795 13.212C16.987 13.0207 17.083 12.7833 17.083 12.5C17.083 12.2167 16.987 11.979 16.795 11.787C16.6037 11.5957 16.3663 11.5 16.083 11.5H8.08301C7.79967 11.5 7.56201 11.5957 7.37001 11.787C7.17867 11.979 7.08301 12.2167 7.08301 12.5C7.08301 12.7833 7.17867 13.0207 7.37001 13.212C7.56201 13.404 7.79967 13.5 8.08301 13.5ZM8.08301 9.5H16.083C16.3663 9.5 16.6037 9.404 16.795 9.212C16.987 9.02067 17.083 8.78333 17.083 8.5C17.083 8.21667 16.987 7.979 16.795 7.787C16.6037 7.59567 16.3663 7.5 16.083 7.5H8.08301C7.79967 7.5 7.56201 7.59567 7.37001 7.787C7.17867 7.979 7.08301 8.21667 7.08301 8.5C7.08301 8.78333 7.17867 9.02067 7.37001 9.212C7.56201 9.404 7.79967 9.5 8.08301 9.5ZM5.08301 21.5C4.53301 21.5 4.06201 21.3043 3.67001 20.913C3.27867 20.521 3.08301 20.05 3.08301 19.5V5.5C3.08301 4.95 3.27867 4.479 3.67001 4.087C4.06201 3.69567 4.53301 3.5 5.08301 3.5H19.083C19.633 3.5 20.104 3.69567 20.496 4.087C20.8873 4.479 21.083 4.95 21.083 5.5V19.5C21.083 20.05 20.8873 20.521 20.496 20.913C20.104 21.3043 19.633 21.5 19.083 21.5H5.08301Z' fill='white'/%3E%3C/svg%3E%0A"); - --quote-tail-mask: url("data:image/svg+xml,%3csvg width='44' height='63' viewBox='0 0 44 63' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M43.583 29L0.0830078 0.5C0.0830078 26.5 -3.91699 63 43.583 63C12.083 63 9.08301 29 43.583 29Z' fill='white'/%3e%3c/svg%3e"); -} - -.background-activity-icon { - background: no-repeat - url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3e%3cpath fill='white' d='m12 14.4 1.22-2.68 2.68-1.22-2.68-1.22L12 6.6l-1.22 2.68L8.1 10.5l2.68 1.22L12 14.4ZM3.5 18c-.4 0-.75-.15-1.05-.45-.3-.3-.45-.65-.45-1.05v-12c0-.4.15-.75.45-1.05.3-.3.65-.45 1.05-.45h17c.4 0 .75.15 1.05.45.3.3.45.65.45 1.05v12c0 .4-.15.75-.45 1.05-.3.3-.65.45-1.05.45h-17Zm-1.75 3a.73.73 0 0 1-.75-.75.73.73 0 0 1 .75-.75h20.5a.73.73 0 0 1 .75.75.73.73 0 0 1-.75.75H1.75Z'/%3e%3c/svg%3e"); -} - -.visibility-icon { - background: no-repeat - url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3e%3cg clip-path='url(%23a)'%3e%3cpath fill='white' d='M12 4.5C7 4.5 2.73 7.61 1 12a11.83 11.83 0 0 0 22 0c-1.73-4.39-6-7.5-11-7.5ZM12 17a5 5 0 1 1 0-10 5 5 0 0 1 0 10Zm0-8a3 3 0 1 0 0 6 3 3 0 0 0 0-6Z'/%3e%3c/g%3e%3cdefs%3e%3cclipPath id='a'%3e%3cpath fill='white' d='M0 0h24v24H0z'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e"); -} - -.add-box-icon { - background: no-repeat - url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3e%3cpath fill='white' d='M12 17a.73.73 0 0 0 .75-.75v-3.5h3.5A.73.73 0 0 0 17 12a.73.73 0 0 0-.75-.75h-3.5v-3.5A.73.73 0 0 0 12 7a.73.73 0 0 0-.75.75v3.5h-3.5A.73.73 0 0 0 7 12a.73.73 0 0 0 .75.75h3.5v3.5A.73.73 0 0 0 12 17Zm-7.5 4c-.4 0-.75-.15-1.05-.45-.3-.3-.45-.65-.45-1.05v-15c0-.4.15-.75.45-1.05.3-.3.65-.45 1.05-.45h15c.4 0 .75.15 1.05.45.3.3.45.65.45 1.05v15c0 .4-.15.75-.45 1.05-.3.3-.65.45-1.05.45h-15Z'/%3e%3c/svg%3e"); + --quote-tail-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='42' height='37' fill='none' viewBox='0 0 42 37'%3e%3cpath fill='white' d='M0 0h42C-3 .003 7 37 29 37 12 37 0 26 0 0Z'/%3e%3c/svg%3e"); } .client-logos__logo_akamai { @@ -125,44 +109,9 @@ url("data:image/svg+xml,%3csvg width='77' height='51' viewBox='0 0 77 51' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M14.7596 41.3891C14.7596 43.2858 14.5443 44.8178 14.1137 45.984C13.6831 47.1511 13.071 48.0567 12.2763 48.7018C11.4825 49.3468 10.5301 49.7785 9.41988 49.9968C8.30968 50.2141 7.07446 50.3232 5.71622 50.3232C3.87778 50.3232 2.47093 50.039 1.49565 49.4697C0.519384 48.9004 0.03125 48.218 0.03125 47.4205C0.03125 46.7568 0.303097 46.1973 0.848774 45.7421C1.39445 45.2868 2.12665 45.0597 3.04538 45.0597C3.73491 45.0597 4.28555 45.2445 4.6963 45.6143C5.10804 45.984 5.44834 46.3497 5.71622 46.7096C6.0218 47.1079 6.28075 47.3734 6.49108 47.5061C6.70142 47.6388 6.8929 47.7057 7.06553 47.7057C7.42865 47.7057 7.70645 47.4923 7.89794 47.0656C8.08942 46.6388 8.18467 45.8089 8.18467 44.5759V21.1855L14.7596 19.3929V41.3891ZM24.1234 20.0183V35.0714C24.1234 35.4893 24.2048 35.8827 24.3675 36.2524C24.5302 36.6221 24.7554 36.9407 25.0421 37.2062C25.3299 37.4716 25.6642 37.685 26.0472 37.8463C26.4301 38.0075 26.8419 38.0882 27.2824 38.0882C27.7795 38.0882 28.345 37.8119 29.0335 37.334C30.1239 36.5769 30.7847 36.0567 30.7847 35.4412C30.7847 35.2937 30.7847 20.0183 30.7847 20.0183H37.3308V41.3891H30.7847V39.3969C29.9235 40.1177 29.0047 40.6958 28.0285 41.1324C27.0522 41.569 26.1047 41.7873 25.186 41.7873C24.1145 41.7873 23.1184 41.6113 22.1997 41.2603C21.2809 40.9092 20.4773 40.4304 19.7887 39.8237C19.0992 39.217 18.5585 38.5051 18.1656 37.689C17.7737 36.8738 17.5773 36.0006 17.5773 35.0714V20.0183H24.1234ZM46.5111 41.3891H39.9937V11.4253L46.5111 9.63281V41.3891ZM49.2335 21.1855L55.7797 19.3929V41.3891H49.2335V21.1855ZM69.4573 30.3477C68.8253 30.6142 68.1884 30.922 67.5475 31.273C66.9065 31.624 66.3222 32.0085 65.7963 32.4254C65.2695 32.8423 64.8439 33.2887 64.5184 33.7627C64.193 34.2366 64.0303 34.7302 64.0303 35.2425C64.0303 35.6408 64.0829 36.0252 64.1881 36.3949C64.2932 36.7647 64.442 37.0823 64.6335 37.3478C64.825 37.6132 65.0353 37.8266 65.2655 37.9879C65.4947 38.1491 65.7437 38.2298 66.0116 38.2298C66.5474 38.2298 67.0881 38.0685 67.6338 37.746C68.1794 37.4235 68.7866 37.0164 69.4573 36.5228V30.3477ZM76.0313 41.3891H69.4573V39.6811C69.0932 39.9849 68.739 40.2652 68.3947 40.5208C68.0505 40.7765 67.6625 40.9997 67.2319 41.1895C66.8014 41.3792 66.3182 41.5257 65.7814 41.631C65.2457 41.7352 64.6137 41.7873 63.8874 41.7873C62.8913 41.7873 61.9964 41.6447 61.2027 41.3605C60.408 41.0754 59.7333 40.687 59.1787 40.1934C58.6231 39.7008 58.1975 39.1167 57.9009 38.4431C57.6042 37.7706 57.4554 37.0351 57.4554 36.2386C57.4554 35.4225 57.6131 34.683 57.9296 34.0183C58.2451 33.3546 58.6757 32.7578 59.2214 32.2258C59.7671 31.6948 60.403 31.2209 61.1303 30.803C61.8575 30.3861 62.6383 30.0016 63.4707 29.6506C64.3031 29.2995 65.1693 28.978 66.0692 28.684C66.968 28.39 67.859 28.1098 68.739 27.8443L69.4573 27.6732V25.568C69.4573 24.2022 69.1934 23.2346 68.6676 22.6653C68.1408 22.096 67.4373 21.8118 66.5573 21.8118C65.5235 21.8118 64.8052 22.0586 64.4034 22.5512C64.0015 23.0449 63.8001 23.6417 63.8001 24.3438C63.8001 24.742 63.7575 25.1314 63.6712 25.5109C63.5858 25.8905 63.437 26.2219 63.2267 26.507C63.0163 26.7912 62.7147 27.0193 62.3218 27.1894C61.9299 27.3605 61.4369 27.446 60.8436 27.446C59.9248 27.446 59.1787 27.1845 58.6043 26.6634C58.0298 26.1412 57.7431 25.4824 57.7431 24.685C57.7431 23.9455 57.9961 23.2582 58.5031 22.623C59.0111 21.9868 59.6947 21.4411 60.5568 20.9868C61.418 20.5306 62.4131 20.1707 63.5422 19.9052C64.6712 19.6397 65.8678 19.507 67.1308 19.507C68.6815 19.507 70.0169 19.6446 71.137 19.919C72.2562 20.1943 73.1798 20.5876 73.9071 21.0999C74.6343 21.6122 75.1701 22.2287 75.5143 22.9495C75.8596 23.6702 76.0313 24.4775 76.0313 25.3684V41.3891Z' fill='white'/%3e%3cpath d='M57.2763 13.8954C57.2763 16.329 55.2861 18.3005 52.8315 18.3005C50.376 18.3005 48.3867 16.329 48.3867 13.8954C48.3867 11.4627 50.376 9.49023 52.8315 9.49023C55.2861 9.49023 57.2763 11.4627 57.2763 13.8954Z' fill='white'/%3e%3cpath d='M16.0517 13.8954C16.0517 16.329 14.0615 18.3005 11.6069 18.3005C9.15234 18.3005 7.16211 16.329 7.16211 13.8954C7.16211 11.4627 9.15234 9.49023 11.6069 9.49023C14.0615 9.49023 16.0517 11.4627 16.0517 13.8954Z' fill='white'/%3e%3cpath d='M67.956 13.8954C67.956 16.329 65.9658 18.3005 63.5112 18.3005C61.0566 18.3005 59.0664 16.329 59.0664 13.8954C59.0664 11.4627 61.0566 9.49023 63.5112 9.49023C65.9658 9.49023 67.956 11.4627 67.956 13.8954Z' fill='white'/%3e%3cpath d='M62.6181 4.72837C62.6181 7.16102 60.6279 9.1335 58.1733 9.1335C55.7178 9.1335 53.7285 7.16102 53.7285 4.72837C53.7285 2.29572 55.7178 0.323242 58.1733 0.323242C60.6279 0.323242 62.6181 2.29572 62.6181 4.72837Z' fill='white'/%3e%3c/svg%3e"); } -.quote-business-icon { - width: 34px; - height: 34px; +.right-arrow-icon::after { + width: 24px; + height: 24px; background: no-repeat - url("data:image/svg+xml, %3Csvg width='34' height='34' viewBox='0 0 34 34' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6 2C3.79086 2 2 3.79086 2 6V28C2 30.2091 3.79086 32 6 32H28C30.2091 32 32 30.2091 32 28V6C32 3.79086 30.2091 2 28 2H6ZM7.50057 27.6858H27.6849V25.3112H8.68788V6.3142H6.31326V26.4985C6.31326 27.1542 6.84484 27.6858 7.50057 27.6858ZM11.0625 20.1535L12.6927 21.7492H12.6939L17.6438 16.9026L20.2891 19.4934C20.743 19.9344 21.4654 19.9344 21.9193 19.4934L27.6849 13.8465L26.0547 12.2508L21.1024 17.0962L18.4583 14.5066C18.0044 14.0655 17.282 14.0655 16.8281 14.5066L11.0625 20.1535Z' fill='hsl(248, 54%, 52%)' /%3E%3C/svg%3E"); -} - -.quote-open-source-icon { - width: 34px; - height: 34px; - background: no-repeat - url("data:image/svg+xml,%3Csvg viewBox='0 0 34 34' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M17 0C7.61116 0 0 7.61116 0 17C0 26.3888 7.61116 34 17 34C26.3888 34 34 26.3888 34 17C34 7.61116 26.3888 0 17 0ZM19.0457 24.8151V27.5H22.1904C23.2523 27.5 24.1529 27.1269 24.892 26.3808C25.6312 25.6351 26.0007 24.7189 26.0007 23.6322V21.3308C26.0007 20.8194 26.1674 20.3931 26.5007 20.052C26.8341 19.7114 27.2506 19.5411 27.7504 19.5411H28.5V14.4904H27.7504C27.2506 14.4904 26.8341 14.3201 26.5007 13.9795C26.1674 13.6383 26.0007 13.2121 26.0007 12.7007V10.3993C26.0007 9.31253 25.6312 8.39096 24.892 7.63458C24.1529 6.87819 23.2523 6.5 22.1904 6.5H19.0457V9.18493H21.6282C22.1279 9.18493 22.5445 9.35523 22.8778 9.69584C23.2106 10.037 23.377 10.4632 23.377 10.9746V13.276C23.377 14.1285 23.6219 14.8957 24.1117 15.5774C24.6009 16.2591 25.2516 16.6639 26.0637 16.7917V17.0157C25.2721 17.2929 24.6264 17.7724 24.1267 18.4541C23.6269 19.1358 23.377 19.8922 23.377 20.7232V23.0246C23.377 23.5575 23.2106 23.9891 22.8778 24.3195C22.5445 24.6499 22.1279 24.8151 21.6282 24.8151H19.0457ZM9.09222 26.3808C9.82086 27.1269 10.7162 27.5 11.7781 27.5H14.9228V24.8151H12.3718C11.8511 24.8151 11.4293 24.6499 11.1065 24.3195C10.7836 23.9891 10.6222 23.5575 10.6222 23.0246V20.7232C10.6222 19.8922 10.3671 19.1358 9.85684 18.4541C9.34709 17.7724 8.69642 17.2929 7.90481 17.0157V16.7917C8.71691 16.6639 9.37283 16.2591 9.87258 15.5774C10.3723 14.8957 10.6222 14.1285 10.6222 13.276V10.9746C10.6222 10.4632 10.7836 10.037 11.1065 9.69584C11.4293 9.35523 11.8511 9.18493 12.3718 9.18493H14.9228V6.5H11.7781C10.7162 6.5 9.82086 6.87819 9.09222 7.63458C8.36308 8.39096 7.99851 9.31253 7.99851 10.3993V12.7007C7.99851 13.2121 7.82685 13.6383 7.48352 13.9795C7.13969 14.3201 6.72839 14.4904 6.24963 14.4904H5.5V19.5411H6.24963C6.72839 19.5411 7.13969 19.7114 7.48352 20.052C7.82685 20.3931 7.99851 20.8194 7.99851 21.3308V23.6322C7.99851 24.7189 8.36308 25.6351 9.09222 26.3808Z' fill='hsl(248, 54%, 52%)' /%3E%3C/svg%3E"); -} - -.quote-education-icon { - width: 34px; - height: 34px; - background: no-repeat - url("data:image/svg+xml,%3Csvg viewBox='0 0 34 34' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_690_16408)'%3E%3Cpath d='M5.09691 18.6168V23.0794C5.09691 24.2387 5.73216 25.3186 6.74855 25.8744L14.6891 30.21C15.6419 30.734 16.7854 30.734 17.7382 30.21L25.6788 25.8744C26.6952 25.3186 27.3304 24.2387 27.3304 23.0794V18.6168L17.7382 23.8575C16.7854 24.3816 15.6419 24.3816 14.6891 23.8575L5.09691 18.6168ZM14.6891 3.27568L1.30134 10.581C0.205544 11.1845 0.205544 12.7726 1.30134 13.376L14.6891 20.6813C15.6419 21.2054 16.7854 21.2054 17.7382 20.6813L30.5066 13.7095V23.0953C30.5066 23.9687 31.2213 24.6834 32.0947 24.6834C32.9682 24.6834 33.6828 23.9687 33.6828 23.0953V12.9155C33.6828 12.3279 33.3652 11.8038 32.857 11.518L17.7382 3.27568C16.7854 2.76748 15.6419 2.76748 14.6891 3.27568V3.27568Z' fill='hsl(248, 54%, 52%)' /%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_690_16408'%3E%3Crect width='34' height='34' fill='white' /%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); -} - -.quote-research-icon { - width: 34px; - height: 34px; - background: no-repeat - url("data:image/svg+xml, %3Csvg viewBox='0 0 34 35' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M28.9193 26.9631L20.1151 15.1935V8.59738L21.8801 6.31244C22.42 5.60109 21.9424 4.56641 21.0703 4.56641H12.9306C12.0585 4.56641 11.5809 5.60109 12.1207 6.31244L13.8857 8.59738V15.172L5.08155 26.9415C4.00179 28.3642 4.97773 30.4336 6.70119 30.4336H27.2789C29.0231 30.4336 29.999 28.3642 28.9193 26.9631Z' fill='hsl(248, 54%, 52%)' /%3E%3C/svg%3E"); -} - -.quote-events-icon { - width: 34px; - height: 34px; - background: no-repeat - url("data:image/svg+xml,%3Csvg viewBox='0 0 34 34' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_765_19667)'%3E%3Cpath d='M26.9167 5.66634H25.5V2.83301H22.6667V5.66634H11.3333V2.83301H8.5V5.66634H7.08333C5.51083 5.66634 4.26417 6.94134 4.26417 8.49967L4.25 28.333C4.25 29.8913 5.51083 31.1663 7.08333 31.1663H26.9167C28.475 31.1663 29.75 29.8913 29.75 28.333V8.49967C29.75 6.94134 28.475 5.66634 26.9167 5.66634ZM26.9167 28.333H7.08333V14.1663H26.9167V28.333ZM12.75 19.833H9.91667V16.9997H12.75V19.833ZM18.4167 19.833H15.5833V16.9997H18.4167V19.833ZM24.0833 19.833H21.25V16.9997H24.0833V19.833ZM12.75 25.4997H9.91667V22.6663H12.75V25.4997ZM18.4167 25.4997H15.5833V22.6663H18.4167V25.4997ZM24.0833 25.4997H21.25V22.6663H24.0833V25.4997Z' fill='hsl(248, 54%, 52%)' /%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_765_19667'%3E%3Crect width='34' height='34' fill='white' /%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); -} - -.quote-communities-icon { - width: 34px; - height: 34px; - background: no-repeat - url("data:image/svg+xml,%3Csvg viewBox='0 0 40 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 16.25C22.7167 16.25 25.1167 16.9 27.0667 17.75C28.8667 18.55 30 20.35 30 22.3V25H10V22.3167C10 20.35 11.1333 18.55 12.9333 17.7667C14.8833 16.9 17.2833 16.25 20 16.25ZM6.66667 16.6667C8.5 16.6667 10 15.1667 10 13.3333C10 11.5 8.5 10 6.66667 10C4.83333 10 3.33333 11.5 3.33333 13.3333C3.33333 15.1667 4.83333 16.6667 6.66667 16.6667ZM8.55 18.5C7.93333 18.4 7.31667 18.3333 6.66667 18.3333C5.01667 18.3333 3.45 18.6833 2.03333 19.3C0.8 19.8333 0 21.0333 0 22.3833V25H7.5V22.3167C7.5 20.9333 7.88333 19.6333 8.55 18.5ZM33.3333 16.6667C35.1667 16.6667 36.6667 15.1667 36.6667 13.3333C36.6667 11.5 35.1667 10 33.3333 10C31.5 10 30 11.5 30 13.3333C30 15.1667 31.5 16.6667 33.3333 16.6667ZM40 22.3833C40 21.0333 39.2 19.8333 37.9667 19.3C36.55 18.6833 34.9833 18.3333 33.3333 18.3333C32.6833 18.3333 32.0667 18.4 31.45 18.5C32.1167 19.6333 32.5 20.9333 32.5 22.3167V25H40V22.3833ZM20 5C22.7667 5 25 7.23333 25 10C25 12.7667 22.7667 15 20 15C17.2333 15 15 12.7667 15 10C15 7.23333 17.2333 5 20 5Z' fill='hsl(248, 54%, 52%)' /%3E%3C/svg%3E"); + url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3e%3cpath fill='white' fill-rule='evenodd' d='M14.2929 5.2929c.3905-.3905 1.0237-.3905 1.4142 0l6 6c.3905.3905.3905 1.0237 0 1.4142l-6 6c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L19.5858 12l-5.2929-5.2929c-.3905-.3905-.3905-1.0237 0-1.4142Z' clip-rule='evenodd'/%3e%3c/svg%3e"); } diff --git a/zerver/tests/test_docs.py b/zerver/tests/test_docs.py index 08e6a342c3..3c074df68d 100644 --- a/zerver/tests/test_docs.py +++ b/zerver/tests/test_docs.py @@ -254,7 +254,7 @@ class DocPageTest(ZulipTestCase): # Test the i18n version of one of these pages. self._test("/en/history/", ["Zulip released as open source!"]) self._test("/values/", ["designed our company"]) - self._test("/hello/", ["your mission-critical communications with Zulip"]) + self._test("/hello/", ["Zulip lets us move faster, connect with each"]) self._test("/communities/", ["Open communities directory"]) self._test("/development-community/", ["Zulip development community"]) self._test("/features/", ["Organized team chat solution"]) diff --git a/zerver/tests/test_home.py b/zerver/tests/test_home.py index 396f4c05c1..c4e575cb82 100644 --- a/zerver/tests/test_home.py +++ b/zerver/tests/test_home.py @@ -666,7 +666,7 @@ class HomeTest(ZulipTestCase): result = self.client_post("/accounts/accept_terms/") self.assertEqual(result.status_code, 200) self.assert_in_response("I agree to the", result) - self.assert_in_response("your mission-critical communications with Zulip", result) + self.assert_in_response("Zulip lets us move faster, connect with each", result) def test_accept_terms_of_service(self) -> None: self.login("hamlet") @@ -1229,7 +1229,7 @@ class HomeTest(ZulipTestCase): with patch("zerver.views.home.get_subdomain", return_value=""): result = self._get_home_page() self.assertEqual(result.status_code, 200) - self.assert_in_response("your mission-critical communications with Zulip", result) + self.assert_in_response("Zulip lets us move faster, connect with each", result) with patch("zerver.views.home.get_subdomain", return_value="subdomain"): result = self._get_home_page()