mirror of
https://github.com/qdrant/landing_page.git
synced 2026-10-07 03:48:30 +02:00
new pricing pages
This commit is contained in:
trean
@@ -25,6 +25,10 @@
|
||||
@import 'partials/qdrant-pricing-doors-a';
|
||||
@import 'partials/qdrant-pricing-doors-b';
|
||||
@import 'partials/qdrant-pricing-marketplaces';
|
||||
@import 'partials/qdrant-pricing-features';
|
||||
@import 'partials/qdrant-pricing-faq';
|
||||
@import 'partials/qdrant-pricing-comparison';
|
||||
@import 'partials/qdrant-pricing-cta';
|
||||
@import 'partials/pricing-door';
|
||||
@import 'partials/get-contacted-with-question';
|
||||
@import 'partials/private-cloud-hero';
|
||||
|
||||
+134
-30
@@ -1,45 +1,149 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.qdrant-pricing-calculator {
|
||||
padding-bottom: $spacer * 4;
|
||||
background-color: $neutral-10;
|
||||
color: $neutral-98;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
padding: $spacer * 5 0;
|
||||
background-color: $neutral-94;
|
||||
overflow: hidden;
|
||||
|
||||
&__background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&__grid {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-image:
|
||||
linear-gradient(to right, $neutral-90 1px, transparent 1px),
|
||||
linear-gradient(to bottom, $neutral-90 1px, transparent 1px);
|
||||
background-size: 80px 80px;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background:
|
||||
linear-gradient(to bottom, $neutral-94 0%, transparent 30%, transparent 70%, $neutral-94 100%),
|
||||
linear-gradient(to right, $neutral-94 0%, transparent 15%, transparent 85%, $neutral-94 100%);
|
||||
}
|
||||
}
|
||||
|
||||
&__container {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: $spacer * 1.5;
|
||||
padding: $spacer * 1.5 $spacer * 3.5;
|
||||
background-color: $neutral-98;
|
||||
border: 1px solid $neutral-90;
|
||||
border-radius: pxToRem(8);
|
||||
max-width: pxToRem(600);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
flex-shrink: 0;
|
||||
width: 76px;
|
||||
height: 64px;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacer * 0.5;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: pxToRem(20);
|
||||
line-height: pxToRem(30);
|
||||
margin-bottom: 0;
|
||||
font-size: pxToRem(24);
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
letter-spacing: -0.5px;
|
||||
margin: 0;
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&__link-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $spacer * 0.5;
|
||||
margin: 0;
|
||||
font-size: pxToRem(16);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
&__link-prefix {
|
||||
color: $neutral-30;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&__link {
|
||||
margin-top: $spacer * 1.5;
|
||||
}
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
font-weight: 500;
|
||||
color: $primary-50;
|
||||
text-decoration: none;
|
||||
transition: color 0.2s ease;
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-bottom: $spacer * 7.5;
|
||||
svg {
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
&__content {
|
||||
position: relative;
|
||||
&:hover {
|
||||
color: $primary-60;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: ('');
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: pxToRem(29.5);
|
||||
height: pxToRem(1);
|
||||
width: calc((100% - 453px) / 2);
|
||||
background-color: $neutral-30;
|
||||
}
|
||||
|
||||
&:before {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&:after {
|
||||
right: 0;
|
||||
svg {
|
||||
transform: translateX(2px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
padding: $spacer * 2.5 0;
|
||||
|
||||
&__container {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
padding: $spacer * 1.5 $spacer * 1.25;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
width: 76px;
|
||||
height: 64px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
&__content {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: pxToRem(20);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__link-wrapper {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+405
@@ -0,0 +1,405 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.qdrant-pricing-comparison-hero {
|
||||
position: relative;
|
||||
padding: $spacer * 5 0 $spacer * 3.5;
|
||||
background-color: $neutral-94;
|
||||
background-image: linear-gradient(180deg, rgba(225, 229, 240, 0) 8.3%, #e1e5f0 52.24%, rgba(225, 229, 240, 0) 112.78%);
|
||||
overflow: hidden;
|
||||
|
||||
&__background {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&__grid {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image:
|
||||
linear-gradient(to right, rgba(180, 186, 204, 0.3) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, rgba(180, 186, 204, 0.3) 1px, transparent 1px);
|
||||
background-size: 80px 80px;
|
||||
mask-image: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%);
|
||||
}
|
||||
|
||||
&__content {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
max-width: pxToRem(730);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
&__badge {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $spacer * 0.5;
|
||||
padding: $spacer * 0.5 $spacer;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
background-color: $neutral-98;
|
||||
border: 1px solid $neutral-90;
|
||||
border-radius: pxToRem(8);
|
||||
|
||||
svg {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: pxToRem(16);
|
||||
line-height: 1.5;
|
||||
color: $neutral-30;
|
||||
}
|
||||
}
|
||||
|
||||
&__badge-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: pxToRem(2);
|
||||
font-size: pxToRem(16);
|
||||
font-weight: 500;
|
||||
line-height: 1.5;
|
||||
color: $primary-50;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
svg {
|
||||
margin-top: pxToRem(2);
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
margin: 0 0 $spacer;
|
||||
font-size: pxToRem(56);
|
||||
font-weight: 600;
|
||||
line-height: 1.1;
|
||||
letter-spacing: -0.5px;
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&__description {
|
||||
margin: 0 0 $spacer;
|
||||
font-size: pxToRem(18);
|
||||
line-height: 1.5;
|
||||
color: $neutral-30;
|
||||
}
|
||||
|
||||
&__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $spacer * 1.5;
|
||||
}
|
||||
|
||||
&__link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: pxToRem(2);
|
||||
font-size: pxToRem(16);
|
||||
font-weight: 500;
|
||||
line-height: 1.5;
|
||||
color: $primary-50;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
svg {
|
||||
margin-top: pxToRem(2);
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
padding: $spacer * 3 0 $spacer * 2;
|
||||
|
||||
&__title {
|
||||
font-size: pxToRem(40);
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: pxToRem(16);
|
||||
}
|
||||
|
||||
&__actions {
|
||||
flex-direction: column;
|
||||
gap: $spacer;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
&__badge {
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: pxToRem(32);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.qdrant-pricing-comparison {
|
||||
padding: 0 0 $spacer * 5;
|
||||
background-color: $neutral-94;
|
||||
|
||||
&__table {
|
||||
border-radius: pxToRem(8);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&__table-header {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&__table-section {
|
||||
&-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: $spacer * 1.5 $spacer * 2;
|
||||
background-color: #f5f8ff;
|
||||
border-top: 0.5px solid $neutral-80;
|
||||
border-bottom: 0.5px solid $neutral-80;
|
||||
border-right: 0.5px solid $neutral-80;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
&-title {
|
||||
font-size: pxToRem(16);
|
||||
font-weight: 500;
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&-rows {
|
||||
overflow: hidden;
|
||||
transition: max-height 0.35s ease;
|
||||
}
|
||||
|
||||
&--collapsed {
|
||||
.qdrant-pricing-comparison__chevron {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__chevron {
|
||||
color: $neutral-20;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
&__table-body {
|
||||
border-left: 0.5px solid $neutral-80;
|
||||
}
|
||||
|
||||
&__table-row {
|
||||
display: flex;
|
||||
background-color: $neutral-98;
|
||||
border-bottom: 0.5px solid $neutral-80;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__table-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: pxToRem(200);
|
||||
padding: $spacer $spacer * 2;
|
||||
font-size: pxToRem(14);
|
||||
line-height: 1.5;
|
||||
color: $neutral-30;
|
||||
border-right: 0.5px solid $neutral-80;
|
||||
text-align: center;
|
||||
|
||||
&--feature {
|
||||
flex: 1;
|
||||
justify-content: flex-start;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&--tier {
|
||||
padding: $spacer $spacer * 2;
|
||||
font-size: pxToRem(20);
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.2px;
|
||||
color: $neutral-20;
|
||||
background-color: $neutral-98;
|
||||
border-top: 0.5px solid $neutral-80;
|
||||
border-left: 0.5px solid $neutral-80;
|
||||
|
||||
&:first-of-type {
|
||||
border-top-left-radius: pxToRem(8);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-top-right-radius: pxToRem(8);
|
||||
}
|
||||
}
|
||||
|
||||
&--highlight {
|
||||
background-color: #f5f8ff;
|
||||
}
|
||||
|
||||
&--cta {
|
||||
padding: $spacer * 1.5 $spacer * 2 $spacer * 1.25;
|
||||
background-color: $neutral-98;
|
||||
border-bottom: 0.5px solid $neutral-80;
|
||||
|
||||
&:last-child {
|
||||
border-bottom-right-radius: pxToRem(8);
|
||||
}
|
||||
|
||||
.button {
|
||||
width: pxToRem(160);
|
||||
padding: $spacer * 0.5 $spacer * 1.375;
|
||||
font-size: pxToRem(16);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__table-footer {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&__check {
|
||||
color: $secondary-blue-50;
|
||||
}
|
||||
|
||||
&__x {
|
||||
color: $neutral-60;
|
||||
}
|
||||
|
||||
&__text {
|
||||
font-size: pxToRem(14);
|
||||
color: $neutral-30;
|
||||
|
||||
&--bold {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
&__tier-tabs {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xl) {
|
||||
&__table {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
&__table-header,
|
||||
&__table-row,
|
||||
&__table-footer {
|
||||
min-width: pxToRem(900);
|
||||
}
|
||||
|
||||
&__table-cell {
|
||||
min-width: pxToRem(160);
|
||||
|
||||
&--feature {
|
||||
min-width: pxToRem(260);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
padding: 0 0 $spacer * 4;
|
||||
|
||||
&__tier-tabs {
|
||||
display: flex;
|
||||
gap: 0;
|
||||
padding: pxToRem(4);
|
||||
margin-bottom: $spacer * 1.5;
|
||||
background-color: $neutral-98;
|
||||
border: 1px solid $neutral-90;
|
||||
border-radius: pxToRem(8);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__tier-tab {
|
||||
flex: 1;
|
||||
padding: $spacer * 0.5 $spacer;
|
||||
font-size: pxToRem(14);
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
color: $neutral-30;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: pxToRem(8);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&--active {
|
||||
font-weight: 600;
|
||||
color: $neutral-20;
|
||||
background-color: $neutral-94;
|
||||
}
|
||||
}
|
||||
|
||||
&__table {
|
||||
overflow-x: visible;
|
||||
}
|
||||
|
||||
&__table-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__table-header,
|
||||
&__table-row,
|
||||
&__table-footer {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
&__table-row {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&__table-cell {
|
||||
min-width: 0;
|
||||
|
||||
&[data-tier-col] {
|
||||
display: none;
|
||||
|
||||
&.qdrant-pricing-comparison__table-cell--mobile-active {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
width: pxToRem(144);
|
||||
}
|
||||
}
|
||||
|
||||
&--feature {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__table-section-header {
|
||||
border-top-left-radius: pxToRem(8);
|
||||
border-top-right-radius: pxToRem(8);
|
||||
}
|
||||
|
||||
&__table-footer {
|
||||
.qdrant-pricing-comparison__table-cell--feature {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.qdrant-pricing-comparison__table-cell--cta {
|
||||
width: 100%;
|
||||
|
||||
&[data-tier-col].qdrant-pricing-comparison__table-cell--mobile-active {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,130 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.qdrant-pricing-cta {
|
||||
position: relative;
|
||||
padding: $spacer * 7.5 0 $spacer * 7;
|
||||
background-color: $neutral-10;
|
||||
overflow: hidden;
|
||||
|
||||
&__background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&__stars {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-image: url('/img/backgrounds/stars-bg.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
&__globe {
|
||||
position: absolute;
|
||||
top: pxToRem(-50);
|
||||
right: pxToRem(-200);
|
||||
width: pxToRem(800);
|
||||
height: pxToRem(800);
|
||||
background-image: url('/img/backgrounds/globe-grid.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
&__content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
max-width: pxToRem(500);
|
||||
}
|
||||
|
||||
&__title {
|
||||
margin-bottom: $spacer;
|
||||
font-size: pxToRem(40);
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
color: $neutral-100;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
margin-bottom: $spacer * 2;
|
||||
font-size: pxToRem(18);
|
||||
line-height: 1.5;
|
||||
color: $neutral-80;
|
||||
}
|
||||
|
||||
&__button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: $spacer * 0.5;
|
||||
|
||||
svg {
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
&:hover svg {
|
||||
transform: translateX(4px);
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
padding: $spacer * 5 0;
|
||||
|
||||
&__title {
|
||||
font-size: pxToRem(32);
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: pxToRem(16);
|
||||
}
|
||||
|
||||
&__globe {
|
||||
right: pxToRem(-300);
|
||||
width: pxToRem(600);
|
||||
height: pxToRem(600);
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
padding: $spacer * 5 0 $spacer * 3;
|
||||
text-align: center;
|
||||
|
||||
&__content {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: pxToRem(36);
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: pxToRem(16);
|
||||
margin-bottom: $spacer * 1.5;
|
||||
}
|
||||
|
||||
&__button {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__globe {
|
||||
position: relative;
|
||||
top: auto;
|
||||
right: auto;
|
||||
width: 100%;
|
||||
height: pxToRem(300);
|
||||
margin-top: $spacer * 3;
|
||||
opacity: 0.3;
|
||||
}
|
||||
}
|
||||
}
|
||||
+321
-15
@@ -1,32 +1,338 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.qdrant-pricing-doors-b {
|
||||
padding-bottom: $spacer * 4;
|
||||
padding-top: $spacer * 4;
|
||||
background-color: $neutral-10;
|
||||
padding: 0 0 $spacer * 2;
|
||||
background-color: $neutral-94;
|
||||
|
||||
&__tabs {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: $spacer * 0.5;
|
||||
padding: 4px;
|
||||
margin-bottom: $spacer * 2;
|
||||
background-color: $neutral-98;
|
||||
border: 1px solid $neutral-90;
|
||||
border-radius: pxToRem(8);
|
||||
width: fit-content;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
&__tab {
|
||||
padding: $spacer * 0.5 $spacer * 1.5;
|
||||
min-width: pxToRem(160);
|
||||
height: pxToRem(40);
|
||||
font-size: pxToRem(16);
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
color: $neutral-30;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: pxToRem(8);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba($neutral-94, 0.5);
|
||||
}
|
||||
|
||||
&--active {
|
||||
font-weight: 600;
|
||||
color: $neutral-20;
|
||||
background-color: $neutral-94;
|
||||
}
|
||||
}
|
||||
|
||||
&__doors {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: pxToRem(30);
|
||||
width: 100%;
|
||||
max-width: pxToRem(1110);
|
||||
margin: 0 auto;
|
||||
|
||||
&--hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-bottom: $spacer * 5;
|
||||
padding-top: $spacer * 5;
|
||||
&__door {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: $neutral-98;
|
||||
border: 1px solid $neutral-90;
|
||||
border-right: none;
|
||||
|
||||
&__doors {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
&:first-child {
|
||||
border-radius: pxToRem(8) 0 0 pxToRem(8);
|
||||
}
|
||||
|
||||
&__door {
|
||||
width: calc((100% / 3) - 20px);
|
||||
&:last-child {
|
||||
border-right: 1px solid $neutral-90;
|
||||
border-radius: 0 pxToRem(8) pxToRem(8) 0;
|
||||
}
|
||||
|
||||
.pricing-door__description {
|
||||
height: pxToRem(42);
|
||||
&--paid {
|
||||
border: 1px solid $neutral-90;
|
||||
}
|
||||
}
|
||||
|
||||
&__heading {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacer * 0.5;
|
||||
padding: $spacer * 1.5 $spacer * 2;
|
||||
border-bottom: 0.5px solid $neutral-80;
|
||||
min-height: pxToRem(135);
|
||||
|
||||
&:has(.qdrant-pricing-doors-b__badge) {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
min-height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: pxToRem(24);
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
letter-spacing: -0.5px;
|
||||
color: $neutral-20;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__badge {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: pxToRem(6);
|
||||
padding: pxToRem(4) $spacer * 0.5;
|
||||
background-color: $neutral-94;
|
||||
border: 1px solid $neutral-90;
|
||||
border-radius: pxToRem(8);
|
||||
flex-shrink: 0;
|
||||
|
||||
span {
|
||||
font-size: pxToRem(14);
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
color: $neutral-30;
|
||||
}
|
||||
|
||||
svg {
|
||||
display: block;
|
||||
width: pxToRem(20);
|
||||
height: pxToRem(20);
|
||||
}
|
||||
}
|
||||
|
||||
&__pricing {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: pxToRem(16);
|
||||
font-weight: 500;
|
||||
line-height: 1.5;
|
||||
color: $neutral-30;
|
||||
}
|
||||
|
||||
&__pricing-main {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&__pricing-note {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&__target {
|
||||
padding: $spacer $spacer * 2;
|
||||
border-bottom: 0.5px solid $neutral-80;
|
||||
min-height: pxToRem(80);
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
font-size: pxToRem(16);
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
color: $neutral-30;
|
||||
}
|
||||
}
|
||||
|
||||
&__features {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacer * 0.5;
|
||||
padding: $spacer $spacer * 2;
|
||||
border-bottom: 0.5px solid $neutral-80;
|
||||
min-height: pxToRem(168);
|
||||
}
|
||||
|
||||
&__feature-group-label {
|
||||
margin: 0;
|
||||
font-size: pxToRem(16);
|
||||
font-weight: 500;
|
||||
line-height: 1.5;
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&__feature-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacer * 0.5;
|
||||
}
|
||||
|
||||
&__feature-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: $spacer * 0.5;
|
||||
font-size: pxToRem(14);
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
color: $neutral-30;
|
||||
|
||||
span {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&__check-icon {
|
||||
flex-shrink: 0;
|
||||
margin-top: 3px;
|
||||
color: $neutral-30;
|
||||
}
|
||||
|
||||
&__marketplace {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacer * 0.5;
|
||||
}
|
||||
|
||||
&__marketplace-label {
|
||||
font-size: pxToRem(14);
|
||||
font-weight: 500;
|
||||
line-height: 1.5;
|
||||
color: $neutral-30;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__marketplace-logos {
|
||||
display: flex;
|
||||
gap: $spacer * 0.5;
|
||||
}
|
||||
|
||||
&__marketplace-logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: pxToRem(32);
|
||||
height: pxToRem(32);
|
||||
border: 0.667px solid rgba(0, 0, 0, 0.12);
|
||||
border-radius: pxToRem(3);
|
||||
background-color: $neutral-100;
|
||||
|
||||
svg {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&__contact-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
font-size: pxToRem(14);
|
||||
font-weight: 500;
|
||||
line-height: 1.5;
|
||||
color: $primary-50;
|
||||
text-decoration: none;
|
||||
transition: color 0.2s ease;
|
||||
|
||||
svg {
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $primary-60;
|
||||
|
||||
svg {
|
||||
transform: translateX(2px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__cta {
|
||||
padding: $spacer * 1.5 $spacer * 2;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
&__cta-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: pxToRem(40);
|
||||
padding: $spacer * 0.5 $spacer * 1.375;
|
||||
font-size: pxToRem(16);
|
||||
font-weight: 600;
|
||||
line-height: 1.5;
|
||||
text-decoration: none;
|
||||
border-radius: pxToRem(8);
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&--outlined {
|
||||
color: $neutral-20;
|
||||
background-color: transparent;
|
||||
border: 1px solid $neutral-60;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba($neutral-90, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
&--contained {
|
||||
color: $neutral-100;
|
||||
background: linear-gradient(180deg, $primary-50 0%, #BE003A 100%);
|
||||
border: none;
|
||||
box-shadow: inset 0px 2px 1px 0px #FF516B;
|
||||
|
||||
&:hover {
|
||||
filter: brightness(1.05);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
padding: 0 0 $spacer * 2;
|
||||
|
||||
&__doors {
|
||||
flex-direction: column;
|
||||
gap: $spacer * 1.5;
|
||||
}
|
||||
|
||||
&__door {
|
||||
border-radius: pxToRem(8);
|
||||
border: 1px solid $neutral-90;
|
||||
border-right: 1px solid $neutral-90;
|
||||
|
||||
&:first-child,
|
||||
&:last-child {
|
||||
border-radius: pxToRem(8);
|
||||
border-right: 1px solid $neutral-90;
|
||||
}
|
||||
}
|
||||
|
||||
&__heading,
|
||||
&__target,
|
||||
&__features {
|
||||
min-height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
padding: 0 $spacer * 1.25 $spacer * 2;
|
||||
|
||||
&__tabs {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,147 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.qdrant-pricing-faq {
|
||||
padding: $spacer * 5 0 $spacer * 2.5;
|
||||
background-color: $neutral-94;
|
||||
|
||||
&__title {
|
||||
margin-bottom: $spacer * 5;
|
||||
font-size: pxToRem(56);
|
||||
font-weight: 600;
|
||||
line-height: 1.1;
|
||||
letter-spacing: -0.5px;
|
||||
color: $neutral-20;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__questions {
|
||||
max-width: pxToRem(800);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
&__item {
|
||||
border-bottom: 1px solid $neutral-80;
|
||||
|
||||
&:first-child {
|
||||
border-top: 1px solid $neutral-80;
|
||||
}
|
||||
|
||||
&--active {
|
||||
.qdrant-pricing-faq__answer {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.qdrant-pricing-faq__icon-plus {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.qdrant-pricing-faq__icon-minus {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__question {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: $spacer * 1.5;
|
||||
padding: $spacer * 2 $spacer * 2.5;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background-color: $neutral-98;
|
||||
}
|
||||
}
|
||||
|
||||
&__question-text {
|
||||
flex: 1;
|
||||
margin: 0;
|
||||
font-size: pxToRem(24);
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
letter-spacing: -0.5px;
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
flex-shrink: 0;
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&__icon-plus {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&__icon-minus {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__answer {
|
||||
display: none;
|
||||
padding: 0 $spacer * 2.5 $spacer * 2.5 $spacer * 2.5;
|
||||
}
|
||||
|
||||
&__answer-text {
|
||||
margin: 0;
|
||||
font-size: pxToRem(18);
|
||||
line-height: 1.5;
|
||||
color: $neutral-40;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
padding: $spacer * 4 0 $spacer * 2;
|
||||
|
||||
&__title {
|
||||
margin-bottom: $spacer * 3;
|
||||
font-size: pxToRem(40);
|
||||
}
|
||||
|
||||
&__question {
|
||||
padding: $spacer * 1.5 $spacer * 1.5;
|
||||
}
|
||||
|
||||
&__question-text {
|
||||
font-size: pxToRem(18);
|
||||
}
|
||||
|
||||
&__answer {
|
||||
padding: 0 $spacer * 1.5 $spacer * 1.5 $spacer * 1.5;
|
||||
}
|
||||
|
||||
&__answer-text {
|
||||
font-size: pxToRem(16);
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
padding: $spacer * 2.5 0 $spacer * 2;
|
||||
|
||||
&__title {
|
||||
margin-bottom: $spacer * 5;
|
||||
font-size: pxToRem(40);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__questions {
|
||||
margin: 0 $spacer * 1.25;
|
||||
}
|
||||
|
||||
&__question {
|
||||
padding: $spacer * 1.5 0;
|
||||
}
|
||||
|
||||
&__question-text {
|
||||
font-size: pxToRem(16);
|
||||
}
|
||||
|
||||
&__answer {
|
||||
padding: 0 0 $spacer * 1.5 0;
|
||||
}
|
||||
|
||||
&__answer-text {
|
||||
font-size: pxToRem(14);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,337 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.qdrant-pricing-features {
|
||||
padding: $spacer * 2.5 0 $spacer * 7.5;
|
||||
background-color: $neutral-94;
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
margin-bottom: $spacer * 3.5;
|
||||
}
|
||||
|
||||
&__title {
|
||||
margin: 0;
|
||||
font-size: pxToRem(40);
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
letter-spacing: -0.5px;
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&__tabs {
|
||||
display: flex;
|
||||
gap: $spacer * 0.5;
|
||||
padding: pxToRem(4);
|
||||
background-color: $neutral-98;
|
||||
border: 1px solid $neutral-90;
|
||||
border-radius: pxToRem(8);
|
||||
}
|
||||
|
||||
&__tab {
|
||||
padding: $spacer * 0.5 $spacer * 1.5;
|
||||
font-size: pxToRem(16);
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
color: $neutral-30;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: pxToRem(8);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&--active {
|
||||
font-weight: 600;
|
||||
color: $neutral-20;
|
||||
background-color: $neutral-94;
|
||||
}
|
||||
|
||||
&:hover:not(&--active) {
|
||||
background-color: $neutral-94;
|
||||
}
|
||||
}
|
||||
|
||||
&__table {
|
||||
border-radius: pxToRem(8);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&__table-header {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&__table-section {
|
||||
&-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: $spacer * 1.5 $spacer * 2;
|
||||
background-color: #f5f8ff;
|
||||
border-top: 0.5px solid $neutral-80;
|
||||
border-bottom: 0.5px solid $neutral-80;
|
||||
border-right: 0.5px solid $neutral-80;
|
||||
border-top-left-radius: pxToRem(8);
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
&-title {
|
||||
font-size: pxToRem(16);
|
||||
font-weight: 500;
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&-rows {
|
||||
overflow: hidden;
|
||||
transition: max-height 0.35s ease;
|
||||
}
|
||||
|
||||
&--collapsed {
|
||||
.qdrant-pricing-features__chevron {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__chevron {
|
||||
color: $neutral-20;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
&__table-body {
|
||||
border-left: 0.5px solid $neutral-80;
|
||||
}
|
||||
|
||||
&__table-row {
|
||||
display: flex;
|
||||
background-color: $neutral-98;
|
||||
border-bottom: 0.5px solid $neutral-80;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__table-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: pxToRem(200);
|
||||
padding: $spacer $spacer * 2;
|
||||
font-size: pxToRem(14);
|
||||
line-height: 1.5;
|
||||
color: $neutral-30;
|
||||
border-right: 0.5px solid $neutral-80;
|
||||
text-align: center;
|
||||
|
||||
&--feature {
|
||||
flex: 1;
|
||||
justify-content: flex-start;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&--tier {
|
||||
padding: $spacer $spacer * 2;
|
||||
font-size: pxToRem(20);
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.2px;
|
||||
color: $neutral-20;
|
||||
background-color: $neutral-98;
|
||||
border-top: 0.5px solid $neutral-80;
|
||||
border-left: 0.5px solid $neutral-80;
|
||||
|
||||
&:first-of-type {
|
||||
border-top-left-radius: pxToRem(8);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-top-right-radius: pxToRem(8);
|
||||
}
|
||||
}
|
||||
|
||||
&--highlight {
|
||||
background-color: #f5f8ff;
|
||||
}
|
||||
|
||||
&--cta {
|
||||
padding: $spacer * 1.5 $spacer * 2 $spacer * 1.25;
|
||||
background-color: $neutral-98;
|
||||
border-bottom: 0.5px solid $neutral-80;
|
||||
|
||||
&:last-child {
|
||||
border-bottom-right-radius: pxToRem(8);
|
||||
}
|
||||
|
||||
.button {
|
||||
width: pxToRem(160);
|
||||
padding: $spacer * 0.5 $spacer * 1.375;
|
||||
font-size: pxToRem(16);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__table-footer {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&__check {
|
||||
color: $secondary-blue-50;
|
||||
}
|
||||
|
||||
&__x {
|
||||
color: $neutral-60;
|
||||
}
|
||||
|
||||
&__text {
|
||||
font-size: pxToRem(14);
|
||||
color: $neutral-30;
|
||||
|
||||
&--bold {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
&__tier-tabs {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__compare {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: $spacer * 2.5;
|
||||
|
||||
.button {
|
||||
padding: $spacer * 0.5 $spacer * 1.375;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xl) {
|
||||
&__header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: $spacer * 2;
|
||||
}
|
||||
|
||||
&__table {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
&__table-header,
|
||||
&__table-row,
|
||||
&__table-footer {
|
||||
min-width: pxToRem(900);
|
||||
}
|
||||
|
||||
&__table-cell {
|
||||
min-width: pxToRem(160);
|
||||
|
||||
&--feature {
|
||||
min-width: pxToRem(260);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
padding: $spacer * 2.5 0 $spacer * 4;
|
||||
|
||||
&__header {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: $spacer * 1.5;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: pxToRem(32);
|
||||
}
|
||||
|
||||
&__tier-tabs {
|
||||
display: flex;
|
||||
gap: 0;
|
||||
padding: pxToRem(4);
|
||||
margin-bottom: $spacer * 1.5;
|
||||
background-color: $neutral-98;
|
||||
border: 1px solid $neutral-90;
|
||||
border-radius: pxToRem(8);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__tier-tab {
|
||||
flex: 1;
|
||||
padding: $spacer * 0.5 $spacer;
|
||||
font-size: pxToRem(14);
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
color: $neutral-30;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: pxToRem(8);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&--active {
|
||||
font-weight: 600;
|
||||
color: $neutral-20;
|
||||
background-color: $neutral-94;
|
||||
}
|
||||
}
|
||||
|
||||
&__table {
|
||||
overflow-x: visible;
|
||||
}
|
||||
|
||||
&__table-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__table-header,
|
||||
&__table-row,
|
||||
&__table-footer {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
&__table-row {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&__table-cell {
|
||||
min-width: 0;
|
||||
|
||||
&[data-tier-col] {
|
||||
display: none;
|
||||
|
||||
&.qdrant-pricing-features__table-cell--mobile-active {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
width: pxToRem(144);
|
||||
}
|
||||
}
|
||||
|
||||
&--feature {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__table-section-header {
|
||||
border-top-left-radius: pxToRem(8);
|
||||
border-top-right-radius: pxToRem(8);
|
||||
}
|
||||
|
||||
&__table-footer {
|
||||
.qdrant-pricing-features__table-cell--feature {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.qdrant-pricing-features__table-cell--cta {
|
||||
width: 100%;
|
||||
|
||||
&[data-tier-col].qdrant-pricing-features__table-cell--mobile-active {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,46 +1,148 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.qdrant-pricing-hero {
|
||||
padding-top: $spacer * 2.5;
|
||||
background-color: $neutral-10;
|
||||
color: $neutral-98;
|
||||
position: relative;
|
||||
padding: $spacer * 5 0 $spacer * 4;
|
||||
background-color: $neutral-94;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 2;
|
||||
line-height: pxToRem(38);
|
||||
margin-bottom: $spacer;
|
||||
&__background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: $spacer * 1.5;
|
||||
line-height: pxToRem(34);
|
||||
&__grid {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 400px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(18, 80px);
|
||||
grid-template-rows: repeat(5, 80px);
|
||||
justify-content: center;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-image:
|
||||
linear-gradient(to right, $neutral-90 1px, transparent 1px),
|
||||
linear-gradient(to bottom, $neutral-90 1px, transparent 1px);
|
||||
background-size: 80px 80px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background:
|
||||
linear-gradient(to bottom, rgba($neutral-94, 0) 0%, $neutral-94 100%),
|
||||
linear-gradient(to right, $neutral-94 0%, transparent 15%, transparent 85%, $neutral-94 100%);
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
max-width: pxToRem(730);
|
||||
margin: 0 auto;
|
||||
padding: 0 $spacer;
|
||||
background: linear-gradient(to right, rgba($neutral-94, 0) 8%, $neutral-94 50%, rgba($neutral-94, 0) 92%);
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: pxToRem(56);
|
||||
font-weight: 600;
|
||||
line-height: 1.1;
|
||||
letter-spacing: -0.5px;
|
||||
margin-bottom: $spacer;
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&__description {
|
||||
margin-bottom: 0;
|
||||
color: $neutral-70;
|
||||
margin-bottom: $spacer;
|
||||
font-size: pxToRem(18);
|
||||
line-height: 1.5;
|
||||
color: $neutral-30;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-top: $spacer * 5;
|
||||
&__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: $spacer * 1.5;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 3;
|
||||
line-height: pxToRem(57);
|
||||
margin-bottom: $spacer * 1.5;
|
||||
&__button {
|
||||
min-width: pxToRem(166);
|
||||
}
|
||||
|
||||
&__link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: $spacer * 0.25;
|
||||
font-size: pxToRem(16);
|
||||
font-weight: 500;
|
||||
color: $primary-50;
|
||||
text-decoration: none;
|
||||
transition: color 0.2s ease;
|
||||
|
||||
svg {
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: $spacer * 2;
|
||||
line-height: pxToRem(38);
|
||||
margin-bottom: $spacer * 1.5;
|
||||
&:hover {
|
||||
color: $primary-60;
|
||||
|
||||
svg {
|
||||
transform: translateX(2px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
padding: $spacer * 3 0 $spacer * 2.5;
|
||||
|
||||
&__title {
|
||||
font-size: pxToRem(40);
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: pxToRem(18);
|
||||
line-height: pxToRem(27);
|
||||
font-size: pxToRem(16);
|
||||
}
|
||||
|
||||
&__actions {
|
||||
flex-direction: column;
|
||||
gap: $spacer;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
padding: $spacer * 2.5 0 $spacer * 2;
|
||||
|
||||
&__grid {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__content {
|
||||
background: none;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: pxToRem(36);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user