Skip to content

Commit

Permalink
Feature/pricing page optimize (#6003)
Browse files Browse the repository at this point in the history 
* REFACTOR pricing page

* FIX layout

* FIX performance test

* FIX landingpage

* FIX button

* FIX typo

* ADD trigger
  • Loading branch information
@pubkey
pubkey committed May 15, 2024
1 parent 0078b68 commit 2fb195b
Show file tree
Hide file tree
Showing 6 changed files with 745 additions and 716 deletions.
124 changes: 75 additions & 49 deletions docs-src/src/css/custom.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,15 +59,15 @@ html[data-theme="dark"] {
/**
* Default font size was to big, decrease it here
*/
.markdown > h1 {
.markdown>h1 {
font-size: 2.1rem;
}

.markdown > h2 {
.markdown>h2 {
font-size: 1.75rem;
}

.markdown > p {
.markdown>p {
font-size: 1rem;
}

Expand Down Expand Up @@ -218,6 +218,7 @@ h1 .underline {
}

@media (max-width: 500px) {

/**
* Underline gets broken on mobile,
* so better disable it.
Expand Down Expand Up @@ -341,9 +342,10 @@ body {

.navbar {
z-index: 10;
background-color: var(--bg-color);
background-color: var(--bg-color-dark);
height: 60px;
box-shadow: none;
border-bottom: solid 1.43px var(--bg-color);
}

.navbar a {
Expand Down Expand Up @@ -706,7 +708,7 @@ body {
margin-top: 38px;
}

.block.first .inner {
.block.first.hero .inner {
flex-direction: column-reverse;
}
}
Expand Down Expand Up @@ -1188,7 +1190,7 @@ body {
}

.hover-shadow-top:hover {
box-shadow: 2px 2px 10px var(--color-top), -2px -1px 10px var(--color-top);
box-shadow: 2px 2px 6px var(--color-top), -2px -1px 10px var(--color-top);
}

.hover-shadow-middle:hover {
Expand All @@ -1202,48 +1204,38 @@ body {
}

.bg-gradient-right-bottom {
background: linear-gradient(
to right bottom,
var(--color-top),
var(--color-middle),
var(--color-bottom)
);
background: linear-gradient(to right bottom,
var(--color-top),
var(--color-middle),
var(--color-bottom));
}

.bg-gradient-left-bottom {
background: linear-gradient(
to left bottom,
var(--color-top),
var(--color-middle),
var(--color-bottom)
);
background: linear-gradient(to left bottom,
var(--color-top),
var(--color-middle),
var(--color-bottom));
}

.bg-gradient-right-top {
background: linear-gradient(
to right top,
var(--color-top),
var(--color-middle),
var(--color-bottom)
);
background: linear-gradient(to right top,
var(--color-top),
var(--color-middle),
var(--color-bottom));
}

.bg-gradient-left-top {
background: linear-gradient(
to left top,
var(--color-top),
var(--color-middle),
var(--color-bottom)
);
background: linear-gradient(to left top,
var(--color-top),
var(--color-middle),
var(--color-bottom));
}

.bg-gradient-top {
background: linear-gradient(
to top,
var(--color-top),
var(--color-middle),
var(--color-bottom)
);
background: linear-gradient(to top,
var(--color-top),
var(--color-middle),
var(--color-bottom));
}

.star-at-github {
Expand Down Expand Up @@ -1706,7 +1698,7 @@ a:hover {
border-radius: 6px;
padding: 3px;
width: 80%;
margin-top: 50px;
margin-top: 20px;
border-style: solid;
border-width: 1px;
border-color: rgba(255, 255, 255, 0.3);
Expand Down Expand Up @@ -1852,6 +1844,7 @@ a:hover {
border-color: red;
}


#price-calculator-result {
font-size: 120%;
}
Expand Down Expand Up @@ -1890,9 +1883,13 @@ a:hover {
border-bottom: double 3px;
}

#price-calculator-result .proceed-hint {
#price-calculator-block .button {
width: 100%;
text-align: right;
text-align: center;
box-sizing: border-box;
margin: 0;
margin-top: 20px;
margin-bottom: 20px;
}

#price-calculator-result a {
Expand Down Expand Up @@ -1971,8 +1968,7 @@ footer a:visited {
color: white;
}

@media (min-width: 576px) {
}
@media (min-width: 576px) {}

.redirectBox .ul-container {
text-align: center;
Expand All @@ -1987,8 +1983,7 @@ footer a:visited {
margin: 10px 0;
}

@media (min-width: 576px) {
}
@media (min-width: 576px) {}

/*
* Call to action button
Expand All @@ -1999,6 +1994,13 @@ footer a:visited {
flex: 1;
min-width: 0;
overflow: hidden;

/**
* We need the padding here
* to have enough space for the mouseover shadow.
*/
padding-left: 9px;
padding-right: 9px;
}

.call-to-action a {
Expand All @@ -2009,9 +2011,10 @@ footer a:visited {
text-align: center;
padding-left: 11px;
padding-right: 11px;
line-height: 37px;
border-radius: 7px;
height: 36px;
font-size: 90%;
height: 32px;
line-height: 32px;
vertical-align: middle;
}

Expand Down Expand Up @@ -2462,8 +2465,7 @@ footer a:visited {
gap: 8px;
align-items: center;
text-wrap: nowrap;
transition: color var(--ifm-transition-fast)
var(--ifm-transition-timing-default);
transition: color var(--ifm-transition-fast) var(--ifm-transition-timing-default);
display: flex;
font-size: 1.14em;
line-height: 150%;
Expand Down Expand Up @@ -2507,29 +2509,35 @@ footer a:visited {
flex-direction: row;
gap: 40px;
}

.consulting-page .block.benefits .ant-tabs-nav {
min-width: 371px;
height: auto;
display: flex;
justify-content: space-between;
flex-grow: 1;
}

.consulting-page .block.benefits .ant-tabs-nav-list {
flex-direction: column;
justify-content: space-between;
overflow: scroll;
}

.consulting-page .block.benefits .ant-tabs-nav-list::-webkit-scrollbar {
display: none;
}

.consulting-page .block.benefits .ant-tabs-nav::before,
.consulting-page .block.benefits .ant-tabs-ink-bar {
display: none;
}

.consulting-page .block.benefits .ant-tabs-tab-active {
margin: 0;
border-left: 2px solid #e6008d;
}

.consulting-page .block.benefits .ant-tabs-tab-active .ant-tabs-tab-btn {
color: white !important;
}
Expand All @@ -2542,6 +2550,7 @@ footer a:visited {
line-height: 140%;
padding: 24px 32px;
}

.consulting-page .block.benefits .ant-tabs-nav-operations {
display: none;
}
Expand Down Expand Up @@ -2595,11 +2604,13 @@ footer a:visited {
line-height: 150%;
margin: 0;
}

.consulting-page .benefit-tabs-content {
display: flex;
flex-direction: row;
gap: 40px;
}

.consulting-page .benefit-tabs {
min-width: 371px;
height: auto;
Expand Down Expand Up @@ -2885,6 +2896,7 @@ footer a:visited {
gap: 16px;
background-color: transparent;
}

.block.faq .ant-collapse-header {
font-size: 1.15em;
font-weight: 600;
Expand All @@ -2895,6 +2907,7 @@ footer a:visited {
padding: 0;
gap: 16px;
}

.block.faq .ant-collapse-item {
border: none;
border-radius: 24px;
Expand Down Expand Up @@ -3112,13 +3125,15 @@ footer a:visited {
}

@media (max-width: 1360px) {

/** packages **/
.consulting-page .block.packages .item-package.flex-column {
max-width: 48.5%;
}
}

@media (max-width: 1280px) {

/** hero **/
.consulting-page .block.first .inner {
margin-top: 38px;
Expand Down Expand Up @@ -3168,6 +3183,7 @@ footer a:visited {
}

@media (max-width: 1200px) {

/** packages **/
.consulting-page .block.packages .flex-row {
gap: 20px;
Expand Down Expand Up @@ -3309,26 +3325,33 @@ footer a:visited {
width: -webkit-fill-available;
width: stretch;
}
.consulting-page .benefit-tabs-content, .consulting-page .block.benefits .ant-tabs {

.consulting-page .benefit-tabs-content,
.consulting-page .block.benefits .ant-tabs {
display: flex;
flex-direction: column;
gap: 40px;
width: 100%;
width: -webkit-fill-available;
width: stretch;
}

.consulting-page .block.benefits .ant-tabs-nav-list {
flex-direction: row;
}

.consulting-page .block.benefits .ant-tabs-tab-active {
margin: 0;
border-left: unset;
border-bottom: 2px solid #e6008d;
}

.consulting-page .block.benefits .ant-tabs-tab {
padding: 12px 24px;
}
.consulting-page .benefit-tabs, .consulting-page .block.benefits .ant-tabs-nav {

.consulting-page .benefit-tabs,
.consulting-page .block.benefits .ant-tabs-nav {
min-width: unset;
}

Expand Down Expand Up @@ -3517,12 +3540,15 @@ footer a:visited {
.consulting-page .block.benefits {
padding-bottom: 48px;
}

.consulting-page .block.benefits .ant-tabs-tab {
padding: 16px 0px;
}

.consulting-page .block.benefits .ant-tabs-nav-list {
gap: 16px;
}

.consulting-page .block.benefits .ant-tabs-tab {
font-size: 20px;
}
Expand Down

0 comments on commit 2fb195b

Please sign in to comment.