This commit is contained in:
trean
2026-03-11 23:37:37 +01:00
parent 383e9d55d8
commit 9bc1daf3eb
2 changed files with 41 additions and 10 deletions
@@ -4,29 +4,52 @@
position: relative; position: relative;
padding: $spacer * 5 0 $spacer * 3.5; padding: $spacer * 5 0 $spacer * 3.5;
background-color: $neutral-94; 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; overflow: hidden;
&__background { &__background {
position: absolute; position: absolute;
inset: 0; top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none; pointer-events: none;
background: url('/img/prices-background.svg') top center / 100% auto no-repeat; background: url('/img/prices-background.svg') top center / 100% auto no-repeat;
} }
&__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;
&::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 { &__content {
position: relative; position: relative;
z-index: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
text-align: center; text-align: center;
max-width: pxToRem(730); max-width: pxToRem(730);
margin: 0 auto; margin: 0 auto;
padding: 0 $spacer;
background: linear-gradient(to right, rgba($neutral-94, 0) 8%, $neutral-94 50%, rgba($neutral-94, 0) 92%);
} }
&__badge { &__badge {
@@ -84,7 +107,6 @@
} }
&__link { &__link {
align-self: flex-start;
width: fit-content; width: fit-content;
display: flex; display: flex;
align-items: center; align-items: center;
@@ -124,12 +146,19 @@
@include media-breakpoint-down(md) { @include media-breakpoint-down(md) {
padding: $spacer * 2.5 0 $spacer * 2; padding: $spacer * 2.5 0 $spacer * 2;
background-image: none;
&__background { &__background {
display: none; display: none;
} }
&__grid {
display: none;
}
&__content {
background: none;
}
&__badge { &__badge {
max-width: pxToRem(280); max-width: pxToRem(280);
flex-wrap: wrap; flex-wrap: wrap;
@@ -2,7 +2,9 @@
<section class="qdrant-pricing-comparison-hero"> <section class="qdrant-pricing-comparison-hero">
<div class="qdrant-pricing-comparison-hero__background"></div> <div class="qdrant-pricing-comparison-hero__background">
<div class="qdrant-pricing-comparison-hero__grid"></div>
</div>
<div class="container"> <div class="container">
<div class="qdrant-pricing-comparison-hero__content"> <div class="qdrant-pricing-comparison-hero__content">
{{ with .Params.badge }} {{ with .Params.badge }}