Skip to content

Commit

Permalink
screen 5 is done
Browse files Browse the repository at this point in the history
  • Loading branch information
@terpimost
terpimost committed May 9, 2024
1 parent 0eeea95 commit da6467b
Show file tree
Hide file tree
Showing 2 changed files with 226 additions and 50 deletions.
64 changes: 60 additions & 4 deletions templates/corporate/hello.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -188,7 +188,7 @@ <h4>Easy to use software</h4>
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>
<h2 class="screen-4__header">Switching to Zulip isn’t hard.</h2>
<p>
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>
Expand All @@ -210,10 +210,66 @@ <h3>Your data is yours!</h3>
</div>
<div class="screen-5">
<div class="screen-5__container">
<h2 class="screen-5__header">
Learn how Zulip can help your organization!
</h2>
<h2 class="screen-5__header">Curious to learn more?</h2>
<div class="screen-5__subtitle">Dive into our detailed guide for organizations like yours.</div>
<div class="screen-5__cards">
<a href="/for/business/" class="card card-left">
<div class="card__text">
<h4>Business</h4>
Organizations from small businesses to enterprises communicate more efficiently.
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="none" viewBox="0 0 386 102">
<path d="M386 10c0-5.5229-4.477-10-10-10H45.5933A13 13 0 0 0 35.285 5.0792L3.2772 46.735c-1.9325 2.515-1.9325 6.015 0 8.53L35.285 96.9208A13.0003 13.0003 0 0 0 45.5933 102H376c5.523 0 10-4.4772 10-10V10Z"/>
</svg>
</a>
<a href="/for/research/" class="card card-right">
<div class="card__text">
<h4>Research</h4>
For your group, lab, department or scientific field.
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="none" viewBox="0 0 386 102">
<path d="M0 10C0 4.4771 4.4771 0 10 0h330.407c4.038 0 7.847 1.8769 10.308 5.0792l32.008 41.6558c1.932 2.515 1.932 6.015 0 8.53l-32.008 41.6558A13.001 13.001 0 0 1 340.407 102H10c-5.5229 0-10-4.4772-10-10V10Z"/>
</svg>
</a>
<a href="/for/education/" class="card card-left">
<div class="card__text">
<h4>Education</h4>
Communication hub for classes, in-person or online.
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="none" viewBox="0 0 386 102">
<path d="M386 10c0-5.5229-4.477-10-10-10H45.5933A13 13 0 0 0 35.285 5.0792L3.2772 46.735c-1.9325 2.515-1.9325 6.015 0 8.53L35.285 96.9208A13.0003 13.0003 0 0 0 45.5933 102H376c5.523 0 10-4.4772 10-10V10Z"/>
</svg>
</a>
<a href="/for/open-source/" class="card card-right">
<div class="card__text">
<h4>Open-source</h4>
Grow and engage your community.
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="none" viewBox="0 0 386 102">
<path d="M0 10C0 4.4771 4.4771 0 10 0h330.407c4.038 0 7.847 1.8769 10.308 5.0792l32.008 41.6558c1.932 2.515 1.932 6.015 0 8.53l-32.008 41.6558A13.001 13.001 0 0 1 340.407 102H10c-5.5229 0-10-4.4772-10-10V10Z"/>
</svg>
</a>
<a href="/for/communities/" class="card card-left">
<div class="card__text">
<h4>Non-profits, Governments</h4>
Free or highly-discounted plans are available for most non-business uses.
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="none" viewBox="0 0 386 102">
<path d="M386 10c0-5.5229-4.477-10-10-10H45.5933A13 13 0 0 0 35.285 5.0792L3.2772 46.735c-1.9325 2.515-1.9325 6.015 0 8.53L35.285 96.9208A13.0003 13.0003 0 0 0 45.5933 102H376c5.523 0 10-4.4772 10-10V10Z"/>
</svg>
</a>
<a href="/for/events/" class="card card-right">
<div class="card__text">
<h4>Events and conferences</h4>
For organizers and attendees at your conference, workshop, or hackathon.
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="none" viewBox="0 0 386 102">
<path d="M0 10C0 4.4771 4.4771 0 10 0h330.407c4.038 0 7.847 1.8769 10.308 5.0792l32.008 41.6558c1.932 2.515 1.932 6.015 0 8.53l-32.008 41.6558A13.001 13.001 0 0 1 340.407 102H10c-5.5229 0-10-4.4772-10-10V10Z"/>
</svg>
</a>
</div>



</div>
</div>
Expand Down
212 changes: 166 additions & 46 deletions web/styles/portico/hello.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -248,12 +248,15 @@ ul {

}

.screen-2__header,
.screen-4__header {
.screen-2__header {
max-width: 600px;
display: inline-block;
margin: 0;
}
.screen-4__header,
.screen-5__header{
margin: 0;
}

.screen-2__desc,
.screen-4__desc {
Expand Down Expand Up @@ -414,26 +417,6 @@ ul {
hsl(236, 48%, 58%) 0%,
hsl(250, 50%, 54%) 100%
);

.screen-3__container{
padding: 60px 16px;
}

.screen-3__header{
margin: 0;
text-align: center;
}

.screen-3__subtitle{
text-align: center;
font-size: 28px;
font-style: normal;
font-weight: 350;
line-height: 120%;
opacity: 0.8;
margin-top: 4px;
}

.screen-3__quotes {
display: grid;
max-width: 1120px;
Expand Down Expand Up @@ -464,12 +447,30 @@ ul {
line-height: 110%;
}
}
.screen-3__container{
padding: 60px 16px;
}
.screen-3__header,
.screen-5__header{
margin: 0;
text-align: center;
}
.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(250, 50%, 54%) 0%,
hsl(281, 67%, 65%) 100%
hsl(281, 67%, 62%) 100%
);
}
.screen-4__content{
Expand Down Expand Up @@ -507,36 +508,98 @@ ul {
.screen-5 {
background: linear-gradient(
180deg,
hsl(281, 67%, 65%) 0%,
hsl(317, 45%, 39%) 100%
hsl(281, 67%, 62%) 0%,
hsl(317, 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 .quote__source {
width: 300px;
.badge-getapp img,
.badge-capterra img {
opacity: 0.9;
height: 128px;
}

.screen-5 .quote__text strong {
color: hsl(247.7deg 54.1% 52.2%);
.screen-5__cards {
display: grid;
max-width: 900px;
margin: 30px auto;
grid-template-columns: 1fr 1fr;
gap: 20px 18px;
justify-items: center;
}



.badge-getapp img,
.badge-capterra img {
opacity: 0.8;
height: 128px;
.card-left,
.card-right{
display: flex;
width: 100%;
aspect-ratio: 386 / 102;
position: relative;
overflow: visible;

.card__text{
width: 100%;
font-size: 17px;
font-weight: 400;
line-height: 140%;
}
h4{
font-size: 28px;
font-weight: 550;
line-height: 32px;
margin: 16px 0 4px;
}

svg{
position: absolute;
top: -1px;
bottom: -1px;
left: 0;
right: 0;
}
path{
stroke: hsla(0, 0%, 100%, 0.3);
stroke-width: 1.25px;
stroke-linecap: round;
fill: white;
fill-opacity: 0.06;
transition: all 0.14s ease-out;
}
}
.card-left{
justify-content: flex-end;
.card__text{
padding-left: 12%;
padding-right: 20px;
}
}
.card-right{
justify-content: flex-start;
.card__text{
padding-right: 11%;
padding-left: 24px;
}
}
.card{
display: flex;
}
.card:hover{
path{
fill-opacity: 0.1;
stroke: hsla(0, 0%, 100%, 0.5);
}
}
.card:active{
path{
fill-opacity: 0.15;
}
}

/* Dark theme modifications */
Expand Down Expand Up @@ -652,9 +715,6 @@ ul {
}

@media (width <= 990px) {
.screen-5__header {
margin: 70px 16px 40px;
}

& h1 {
font-size: 40px;
Expand All @@ -667,7 +727,8 @@ ul {
& h3 {
font-size: 28px;
}
.screen-3 .screen-3__subtitle{
.screen-3 .screen-3__subtitle,
.screen-5 .screen-5__subtitle{
font-size: 24px;
}

Expand Down Expand Up @@ -749,7 +810,7 @@ ul {
.screen-3 .quote__text,
.screen-4__header,
.screen-4__desc,
.screen-4 .quote__text {
.screen-5__header {
width: auto;
}

Expand All @@ -774,8 +835,32 @@ ul {
grid-template-columns: 1fr;
gap: 24px;
}
.screen-5 .screen-5__cards {
margin: 20px auto;
grid-template-columns: 1fr;
gap: 16px;
max-width: 400px;

.card{
min-height: 90px;
}
.card-left{
margin-left: -6%;
}
.card-right{
margin-right: -6%;
}

.card__text{
font-size: 15px;
}
h4{
font-size: 24px;
line-height: 26px;
margin: 12px 0 4px;
}
}



.appshot-2 {
width: auto;
Expand Down Expand Up @@ -840,6 +925,41 @@ ul {
font-size: 36px;
}

.screen-5 .screen-5__cards {
margin: 10px auto;
grid-template-columns: 1fr;
gap: 12px;
max-width: 320px;
.card{
min-height: 70px;
}
.card-left{
margin-left: -6%;
}
.card-right{
margin-right: -6%;
}

.card__text{
font-size: 13px;
line-height: 120%;
}
.card-left .card__text {
padding-left: 11%;
padding-right: 4px;
}
.card-right .card__text {
padding-left: 16px;
padding-right: 11%;
}

h4{
font-size: 18px;
line-height: 24px;
margin: 8px 0 0px;
}
}

.screen-5__quotes .quote {
width: 320px;
}
Expand Down

0 comments on commit da6467b

Please sign in to comment.