Skip to content

Commit

Permalink
wip: screen 4 is done
Browse files Browse the repository at this point in the history
  • Loading branch information
@terpimost
terpimost committed May 9, 2024
1 parent 0e686b0 commit 0eeea95
Show file tree
Hide file tree
Showing 3 changed files with 76 additions and 28 deletions.
Binary file added static/images/landing-page/hello/switch-diagram.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
32 changes: 18 additions & 14 deletions templates/corporate/hello.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ <h1>Organized team&nbsp;chat.</h1>
<div class="screen-2__container">
<div class="screen-2__content">
<h2 class="screen-2__header">What makes Zulip different.</h2>
<div class="screen-2__desc screen-description">
<div class="screen-2__desc">
<p>
People often tell us that traditional team chat tools (Slack, Microsoft Teams, etc.) feel chaotic and stressful.
</p>
Expand Down Expand Up @@ -184,17 +184,28 @@ <h4>Easy to use software</h4>
<div class="screen-4">
<div class="screen-4__container">
<div class="screen-4__content">
<h2 class="screen-4__header">Enterprise ready</h2>
<div class="screen-4__desc screen-description">
<img class='switch-diagram' loading="lazy" width="396" height="466"
src="{{ static('images/landing-page/hello/switch-diagram.png') }}"
/>
<div class="screen-4__desc">
<h2 class="screen-4__header">Switching to Zulip isn’t hard</h2>
<p>
Take charge of&nbsp;your mission-critical communications with Zulip&rsquo;s reliable <a href="/for/open-source/">100% free and open-source software</a>, with no&nbsp;vendor lock-in. You can count on&nbsp;our industry-leading <a href="/security/">security practices</a> to&nbsp;keep your data safe.
Zulip offers a convenient cloud solution, with <a href="/features/">features</a> to make your users and IT team happy. Import your data and integrations <a href="/help/import-from-slack">from Slack</a> and other products.
</p>
<h3>Your data is yours!</h3>
<p>
When you <a href="/self-hosting/">self-host Zulip</a>, you get all the features of&nbsp;our cloud offering, plus ultimate control and compliance.
For ultimate control and <a href="/help/gdpr-compliance">compliance</a>, <a href="/self-hosting/">self-host</a> Zulip’s 100% <a href="https://github.com/zulip/zulip#readme">open-source</a> software, with easy <a href="https://zulip.readthedocs.io/en/stable/production/install.html">installation</a> and <a href="https://zulip.readthedocs.io/en/stable/production/upgrade.html">upgrades</a>.
</p>
</div>
</div>

</div>
<div class="badges">
<a class="badge-getapp" href="https://www.getapp.com/collaboration-software/web-collaboration/category-leaders/">
<img alt="" src="https://capterra.s3.amazonaws.com/assets/images/gdm-badges/ga-category_leaders-2023.png"/>
</a>
<a class="badge-capterra" href="https://www.capterra.com/p/197945/Zulip/">
<img alt="" src="{{ static('images/landing-page/hello/capterra-2023.png') }}"/>
</a>
</div>
</div>
<div class="screen-5">
Expand All @@ -203,14 +214,7 @@ <h2 class="screen-5__header">
Learn how Zulip can help your organization!
</h2>

<div class="screen-5__badges">
<a class="screen-5__badge-getapp" href="https://www.getapp.com/collaboration-software/web-collaboration/category-leaders/">
<img alt="" src="https://capterra.s3.amazonaws.com/assets/images/gdm-badges/ga-category_leaders-2023.png"/>
</a>
<a class="screen-5__badge-capterra" href="https://www.capterra.com/p/197945/Zulip/">
<img alt="" src="{{ static('images/landing-page/hello/capterra-2023.png') }}"/>
</a>
</div>

</div>
</div>
</div>
Expand Down
72 changes: 58 additions & 14 deletions web/styles/portico/hello.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -237,6 +237,17 @@ ul {
line-height: 116%;
}

& 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,
.screen-4__header {
max-width: 600px;
Expand All @@ -255,6 +266,9 @@ ul {
color: hsl(0deg 0% 100%);
margin-top: 20px;
}
.screen-4__desc {
max-width: 630px;
}

& em {
font-style: normal;
Expand Down Expand Up @@ -458,14 +472,33 @@ ul {
hsl(281, 67%, 65%) 100%
);
}
.screen-4__content{
display: flex;
gap: 48px;
align-items: center;

.screen-description a {
}
.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 {
.screen-2__desc a:hover,
.screen-4__desc a:hover {
border-bottom: 1px solid hsl(0deg 0% 100%);
transition: none;
}
Expand Down Expand Up @@ -498,16 +531,10 @@ ul {
color: hsl(247.7deg 54.1% 52.2%);
}

.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 {
.badge-getapp img,
.badge-capterra img {
opacity: 0.8;
height: 128px;
}
Expand Down Expand Up @@ -604,6 +631,10 @@ ul {
.screen-4__container {
gap: 32px;
}
.switch-diagram{
max-width: 280px;
height: auto;
}
}

@media (width <= 1050px) {
Expand Down Expand Up @@ -632,9 +663,14 @@ ul {
& h2 {
font-size: 34px;
}

& h3 {
font-size: 28px;
}
.screen-3 .screen-3__subtitle{
font-size: 24px;
}

}

@media (width <= 940px) {
Expand Down Expand Up @@ -668,7 +704,6 @@ ul {
height: 44px;
}



.screen-2__desc,
.screen-3__desc,
Expand Down Expand Up @@ -699,6 +734,15 @@ ul {
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,
Expand Down Expand Up @@ -752,8 +796,8 @@ ul {
}


.screen-5__badges {
margin-top: 48px;
.badges {
margin-top: 16px;
}
}

Expand Down

0 comments on commit 0eeea95

Please sign in to comment.