mirror of
https://github.com/qdrant/landing_page.git
synced 2026-10-02 01:18:30 +02:00
Update the legal tech page with a guide section (#2124)
* update the legal tech page with a guide section * remove comment
This commit is contained in:
trean
@@ -4,104 +4,142 @@
|
||||
.legal-tech-help {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding-top: $spacer * 4;
|
||||
padding-bottom: $spacer * 4;
|
||||
background-color: $neutral-10;
|
||||
|
||||
&__content {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: $spacer * 2;
|
||||
z-index: 1;
|
||||
padding-top: $spacer * 4;
|
||||
padding-bottom: $spacer * 4;
|
||||
}
|
||||
|
||||
&__badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: $spacer * 0.5;
|
||||
padding: pxToRem(4) $spacer;
|
||||
background-color: $neutral-20;
|
||||
border-radius: pxToRem(100);
|
||||
font-size: pxToRem(14);
|
||||
font-weight: 500;
|
||||
line-height: 1.5;
|
||||
color: $neutral-90;
|
||||
|
||||
&-icon {
|
||||
width: $spacer;
|
||||
height: $spacer;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
position: relative;
|
||||
margin: 0 auto $spacer * 5;
|
||||
font-size: $spacer * 2.5;
|
||||
line-height: $spacer * 3;
|
||||
margin: 0;
|
||||
font-size: pxToRem(24);
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
letter-spacing: -0.5px;
|
||||
color: $neutral-98;
|
||||
text-align: center;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&__items {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacer * 2;
|
||||
&__description {
|
||||
margin: 0;
|
||||
font-size: pxToRem(18);
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
letter-spacing: -0.2px;
|
||||
color: $neutral-70;
|
||||
}
|
||||
|
||||
&__item {
|
||||
position: relative;
|
||||
padding-left: $spacer * 1.5;
|
||||
&__button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: pxToRem(36);
|
||||
padding: $spacer * 0.5 pxToRem(20);
|
||||
background: linear-gradient(180deg, $primary-50 0%, $primary-30 100%);
|
||||
border-radius: $spacer * 0.5;
|
||||
font-size: $spacer;
|
||||
font-weight: 600;
|
||||
line-height: 1.5;
|
||||
color: $neutral-100;
|
||||
text-decoration: none;
|
||||
box-shadow: inset 0 pxToRem(2) pxToRem(1) 0 #ff516b;
|
||||
transition: opacity 0.2s ease;
|
||||
|
||||
&-title {
|
||||
margin-bottom: math.div($spacer, 4);
|
||||
font-size: $spacer * 1.5;
|
||||
line-height: pxToRem(34);
|
||||
color: $neutral-98;
|
||||
}
|
||||
|
||||
&-description {
|
||||
margin-bottom: 0;
|
||||
font-size: pxToRem(18);
|
||||
line-height: pxToRem(27);
|
||||
color: $neutral-70;
|
||||
}
|
||||
|
||||
&:before {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: pxToRem(12);
|
||||
content: '';
|
||||
width: $spacer * 0.5;
|
||||
height: $spacer * 0.5;
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='8' height='10' viewBox='0 0 8 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 0.5L0 2.75V7.25L4 9.5L8 7.25V2.75L4 0.5Z' fill='%23DC244C'/%3E%3C/svg%3E%0A");
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
&:hover {
|
||||
opacity: 0.9;
|
||||
color: $neutral-100;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__preview {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
height: 100%;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
max-width: pxToRem(540);
|
||||
margin: $spacer * 2.5 auto 0;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.overlay-top {
|
||||
right: auto;
|
||||
left: 0;
|
||||
transform: scaleX(-1);
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.overlay-bottom {
|
||||
left: auto;
|
||||
right: 0;
|
||||
transform: scaleX(-1);
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
&__preview {
|
||||
min-height: pxToRem(462);
|
||||
img {
|
||||
margin-top: -pxToRem(42);
|
||||
width: auto;
|
||||
left: 25%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
&__preview {
|
||||
img {
|
||||
width: pxToRem(502);
|
||||
top: 70px;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-top: $spacer * 7.5;
|
||||
padding-bottom: $spacer * 9;
|
||||
&__content {
|
||||
max-width: pxToRem(560);
|
||||
padding-top: $spacer * 7.5;
|
||||
padding-bottom: $spacer * 9;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 3;
|
||||
line-height: pxToRem(58);
|
||||
font-size: pxToRem(40);
|
||||
}
|
||||
|
||||
&__items {
|
||||
max-width: pxToRem(514);
|
||||
}
|
||||
|
||||
&__item {
|
||||
padding-right: $spacer * 3;
|
||||
&__description {
|
||||
font-size: pxToRem(20);
|
||||
}
|
||||
|
||||
&__preview {
|
||||
img {
|
||||
margin-right: 0;
|
||||
margin-top: 0;
|
||||
width: pxToRem(772);
|
||||
top: -42px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,17 +1,32 @@
|
||||
<section class="legal-tech-help">
|
||||
<div class="container">
|
||||
<h3 class="legal-tech-help__title">{{ .Params.title | safeHTML }}</h3>
|
||||
<div class="row justify-content-lg-between align-items-lg-center">
|
||||
<div class="col-12 col-lg-6 legal-tech-help__items">
|
||||
{{ range .Params.items }}
|
||||
<div class="legal-tech-help__item">
|
||||
<h3 class="legal-tech-help__item-title">{{ .title }}</h3>
|
||||
<p class="legal-tech-help__item-description">{{ .description }}</p>
|
||||
<div class="col-12 col-lg-7 legal-tech-help__content">
|
||||
{{ if .Params.badge }}
|
||||
<div class="legal-tech-help__badge">
|
||||
{{ if .Params.badgeIcon }}
|
||||
<img src="{{ .Params.badgeIcon }}" alt="" class="legal-tech-help__badge-icon" />
|
||||
{{ end }}
|
||||
<span>{{ .Params.badge }}</span>
|
||||
</div>
|
||||
{{ end }}
|
||||
<h2 class="legal-tech-help__title">{{ .Params.title | safeHTML }}</h2>
|
||||
{{ if .Params.description }}
|
||||
<p class="legal-tech-help__description">{{ .Params.description | safeHTML }}</p>
|
||||
{{ end }}
|
||||
{{ if .Params.buttonText }}
|
||||
<a href="{{ .Params.buttonLink | default "#" }}" class="legal-tech-help__button">
|
||||
{{ .Params.buttonText }}
|
||||
</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
<div class="col-12 col-lg-6 legal-tech-help__preview">
|
||||
<img src="{{ .Params.image.src }}" alt="{{ .Params.image.alt }}" />
|
||||
<div class="col-12 col-lg-5 legal-tech-help__preview">
|
||||
<img
|
||||
src="{{ .Params.image.src }}"
|
||||
srcset="{{ .Params.image.src }} 1x{{ with .Params.image.src2x }}, {{ . }} 2x{{ end }}"
|
||||
alt="{{ .Params.image.alt }}"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
<svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M3.33333 9.93334L6 10.6667M6 4.86667L3.33333 4.13334M6 7.66667L3.33333 7.00001M12.6667 9.93334L10 10.6667M10 4.86667L12.6667 4.13334M10 7.66667L12.6667 7.00001M0.666667 0.666673L8 2.66667L15.3333 0.666673V12L8 14L0.666667 12V0.666673Z" stroke="#2F6FF0" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 437 B |
Binary file not shown.
|
After Width: | Height: | Size: 575 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 205 KiB |
Reference in New Issue
Block a user