krzysztof/landing_page
1
0
Fork 0
mirror of https://github.com/qdrant/landing_page.git synced 2026-10-03 01:48:32 +02:00
Code Issues Packages Projects Releases Wiki Activity

Link cards (#1587)

Browse Source 
Making whole cards clickable
This commit is contained in:
trean
2025-04-23 14:12:05 +02:00
committed by GitHub
parent 148f8f373f
commit b527126e5c
16 changed files with 130 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
qdrant-landing/themes/qdrant-2024/assets/css/components/_card.scss
+21 -1
View File
@@ -11,13 +11,25 @@
flex-direction: column;
justify-content: space-between;
&:hover {
&[href]:hover {
border-top: 1px solid $neutral-100;
background: $neutral-98;
box-shadow:
0 10px 20px 0 rgba(22, 30, 51, 0.1),
0 1px 2px 0 rgba(22, 30, 51, 0.1);
.link {
&:after {
animation: dash 0.3s ease-in-out forwards;
}
&:before {
animation: dash 0.3s ease-in-out forwards;
}
}
}
&:hover {
.link.link_dark {
$link-color: $primary-50;
color: $link-color;
@@ -34,3 +46,11 @@
}
}
}
.card__content-link {
cursor: pointer;
color: $primary-50;
&:hover {
color: $primary-60;
}
}
qdrant-landing/themes/qdrant-2024/assets/css/partials/_additional-resources.scss
+11
View File
@@ -43,6 +43,17 @@
max-height: pxToRem(24);
}
}
&[href]:hover {
.link {
&:after {
animation: dash 0.3s ease-in-out forwards;
}
&:before {
animation: dash 0.3s ease-in-out forwards;
}
}
}
}
&__card-title {
qdrant-landing/themes/qdrant-2024/assets/css/partials/_advanced-search-use-cases.scss
+1
View File
@@ -26,6 +26,7 @@
&-title {
margin-bottom: $spacer;
color: $neutral-40;
}
&-description {
qdrant-landing/themes/qdrant-2024/assets/css/partials/_community-features.scss
+11
View File
@@ -39,6 +39,12 @@
align-self: center;
margin-top: $spacer * 1.5;
}
&:hover {
.community-features__resources-card-title {
color: $primary-50;
}
}
}
&__resources-cards {
@@ -85,6 +91,11 @@
&-link {
@include mixins.link-color($neutral-20);
}
&:hover {
.community-features__card-title {
color: $primary-50;
}
}
}
@include media-breakpoint-up(lg) {
qdrant-landing/themes/qdrant-2024/assets/css/partials/_link.scss
+31
View File
@@ -174,6 +174,37 @@
}
}
&_white {
$link-color: $neutral-98;
color: $link-color;
&:before {
background: linear-gradient(to right, $link-color 50%, transparent 50%);
background-size: 200% 100%;
background-position: -100% 0;
}
&:after {
background: $link-color;
}
&:hover {
$link-color: $neutral-98;
color: $link-color;
&:before {
background: linear-gradient(to right, $link-color 50%, transparent 50%);
background-size: 200% 100%;
background-position: -100% 0;
}
&:after {
background: $link-color;
}
}
}
// font-size
&_inherit {
font-size: inherit;
qdrant-landing/themes/qdrant-2024/assets/css/partials/_use-cases-vector-cases.scss
+1
View File
@@ -36,6 +36,7 @@
&-title {
margin-bottom: $spacer;
color: $neutral-40;
}
&-description {
qdrant-landing/themes/qdrant-2024/assets/js/index.js
+10
View File
@@ -106,4 +106,14 @@ document.addEventListener('DOMContentLoaded', function () {
if (document.getElementById('TableOfContents') && document.querySelector('.qdrant-post__body')) {
new TableOfContents('#TableOfContents', '.qdrant-post__body');
}
document.querySelectorAll('.card__content-link').forEach((link) => {
link.addEventListener('click', (e) => {
e.preventDefault();
e.stopPropagation();
const url = link.dataset.href;
window.history.pushState({}, '', url);
window.location.href = url;
});
});
});
qdrant-landing/themes/qdrant-2024/layouts/partials/additional-resources.html
+5 -6
View File
@@ -4,19 +4,18 @@
<h2 class="additional-resources__title">{{ .Params.title }}</h2>
<div class="additional-resources__cards row">
{{ range .Params.resourceCards }}
<div class="additional-resources__card col-12 col-md-6 col-xl-3 gy-3 gy-xl-0">
<a href="{{ .link.url }}" class="additional-resources__card col-12 col-md-6 col-xl-3 gy-3 gy-xl-0">
<div class="additional-resources__card-info">
<div>
{{ .icon | safeHTML }}
<h6 class="additional-resources__card-title">{{ .title }}</h6>
<p class="additional-resources__card-content">{{ .content }}</p>
</div>
<a class="additional-resources__card-link" href="{{ .link.url }}">
<span>{{ .link.text }}</span>
<span>{{ partial "svg" "arrow-right-white.svg" }}</span>
</a>
<span class="link link_white link_md additional-resources__card-link">
{{ .link.text }}
</span>
</div>
</div>
</a>
{{ end }}
</div>
</div>
qdrant-landing/themes/qdrant-2024/layouts/partials/advanced-search-features.html
+4 -4
View File
@@ -8,14 +8,14 @@
<div class="row g-4 gy-lg-3">
{{ range $index, $element := .Params.features }}
<div class="col-12 {{ if or (eq $index 0) (eq $index 3) }}col-lg-7{{ else }}col-lg-5{{ end }}">
<div class="card use-cases-vector-features__card">
<a href="{{ .link.url }}" class="card use-cases-vector-features__card">
<img class="use-cases-vector-features__card-icon" src="{{ .icon.src }}" alt="{{ .icon.alt }}" />
<h6 class="use-cases-vector-features__card-title">{{ .title }}</h6>
<p class="use-cases-vector-features__card-description">{{ .description }}</p>
<a class="use-cases-vector-features__card-link link link_md align-self-start" href="{{ .link.url }}">
<span class="use-cases-vector-features__card-link link link_md align-self-start">
{{ .link.text }}
</a>
</div>
</span>
</a>
</div>
{{ end }}
</div>
qdrant-landing/themes/qdrant-2024/layouts/partials/advanced-search-use-cases.html
+3 -3
View File
@@ -5,14 +5,14 @@
<div class="advanced-search-use-cases__cards row g-4">
{{ range .Params.features }}
<div class="col-12 col-md-6 col-xl-4">
<div class="card advanced-search-use-cases__card">
<a href="{{ .link.url }}" class="card advanced-search-use-cases__card">
<img class="advanced-search-use-cases__card-image" src="{{ .image.src }}" alt="{{ .image.alt }}" />
<h6 class="advanced-search-use-cases__card-title">{{ .title }}</h6>
<p class="advanced-search-use-cases__card-description">{{ .description }}</p>
<div class="advanced-search-use-cases__card-link">
<a class="link link_md" href="{{ .link.url }}">{{ .link.text }}</a>
<span class="link link_md">{{ .link.text }}</span>
</div>
</div>
</a>
</div>
{{ end }}
</div>
qdrant-landing/themes/qdrant-2024/layouts/partials/ai-agents-features.html
+4 -4
View File
@@ -26,14 +26,14 @@
<div class="row g-4 gy-md-3">
{{ range $index, $element := .Params.features }}
<div class="col-12 col-md-6 {{ if or (eq $index 3) (eq $index 4) }}col-xl-6{{ else }}col-xl-4{{ end }}">
<div class="card use-cases-vector-features__card">
<a href="{{ .link.url }}" class="card use-cases-vector-features__card">
<img class="use-cases-vector-features__card-icon" src="{{ .icon.src }}" alt="{{ .icon.alt }}" />
<h6 class="use-cases-vector-features__card-title">{{ .title }}</h6>
<p class="use-cases-vector-features__card-description">{{ .description }}</p>
<a class="use-cases-vector-features__card-link link link_md align-self-start" href="{{ .link.url }}">
<span class="use-cases-vector-features__card-link link link_md align-self-start">
{{ .link.text }}
</a>
</div>
</span>
</a>
</div>
{{ end }}
</div>
qdrant-landing/themes/qdrant-2024/layouts/partials/community-features.html
+8 -8
View File
@@ -6,14 +6,14 @@
<div class="community-features__resources-cards row g-4">
{{ range $index, $element := .Params.resources }}
<div class="col-12 {{ if or (eq $index 0) (eq $index 3) }}col-lg-7{{ else }}col-lg-5{{ end }}">
<div class="card community-features__resources-card">
<a href="{{ .link.url }}" class="card community-features__resources-card">
<h6 class="community-features__resources-card-title">{{ .title }}</h6>
<p class="community-features__resources-card-description">{{ .description }}</p>
<a class="community-features__resources-card-link link link_md align-self-start" href="{{ .link.url }}">
<span class="community-features__resources-card-link link link_md align-self-start">
{{ .link.text }}
</a>
</span>
<img class="community-features__resources-card-image" src="{{ .image.src }}" alt="{{ .image.alt }}" />
</div>
</a>
</div>
{{ end }}
</div>
@@ -21,14 +21,14 @@
<div class="row g-4 gy-lg-3">
{{ range $index, $element := .Params.features }}
<div class="col-12 col-lg-3">
<div class="card community-features__card">
<a class="card community-features__card" href="{{ .link.url }}">
<img class="community-features__card-icon" src="{{ .icon.src }}" alt="{{ .icon.alt }}" />
<h6 class="community-features__card-title">{{ .title }}</h6>
<p class="community-features__card-description">{{ .description }}</p>
<a class="community-features__card-link link link_md align-self-start" href="{{ .link.url }}">
<span class="community-features__card-link link link_md align-self-start">
{{ .link.text }}
</a>
</div>
</span>
</a>
</div>
{{ end }}
</div>
qdrant-landing/themes/qdrant-2024/layouts/partials/core-features.html
+7 -7
View File
@@ -10,27 +10,27 @@
</div>
</div>
<div class="col-12">
<div class="card core-features__cloud-native">
<a href="{{ .Params.cloudFeature.link.url }}" class="card core-features__cloud-native">
<div>
<h4 class="core-features__card-title">{{ .Params.cloudFeature.title }}</h4>
<p class="core-features__card-content">{{ .Params.cloudFeature.content }}</p>
<a class="link link_dark link_md" href="{{ .Params.cloudFeature.link.url }}">
<span class="link link_dark link_md">
{{ .Params.cloudFeature.link.text }}
</a>
</span>
</div>
<div class="core-features__cloud-native-image"></div>
</div>
</a>
</div>
{{ range .Params.featureCards }}
<div class="col-12 col-xl-4">
<div class="card core-features__card">
<a href="{{ .link.url }}" class="card core-features__card">
<div>
{{ .icon | safeHTML }}
<h6 class="core-features__card-title">{{ .title }}</h6>
<p class="core-features__card-content">{{ .content }}</p>
</div>
<a class="link link_dark link_md align-self-start" href="{{ .link.url }}"> {{ .link.text }} </a>
</div>
<span class="link link_dark link_md align-self-start"> {{ .link.text }} </span>
</a>
</div>
{{ end }}
</div>
qdrant-landing/themes/qdrant-2024/layouts/partials/enterprise-solutions-use-cases.html
+6 -5
View File
@@ -5,21 +5,22 @@
<div class="enterprise-solutions-use-cases__cases row g-4">
{{ range $index, $element := .Params.items }}
<div class="{{ if eq $index 0 }}col-12{{ else }}col-12 col-lg-6{{ end }}">
<div class="card enterprise-solutions-use-cases__case">
<a
href="{{ .link.url }}"
class="card enterprise-solutions-use-cases__case">
<div class="enterprise-solutions-use-cases__case-text">
<h3 class="enterprise-solutions-use-cases__case-title">{{ .title }}</h3>
<p class="enterprise-solutions-use-cases__case-description">{{ .description }}</p>
<a
<span
class="enterprise-solutions-use-cases__case-link link link_md align-self-start"
href="{{ .link.url }}"
>
{{ .link.text }}
</a>
</span>
</div>
<div class="enterprise-solutions-use-cases__case-preview">
<img src="{{ .image.src }}" alt="{{ .image.alt }}" />
</div>
</div>
</a>
</div>
{{ end }}
</div>
qdrant-landing/themes/qdrant-2024/layouts/partials/feature-overview.html
+4 -4
View File
@@ -9,22 +9,22 @@
<div class="feature-overview__cards-wrapper col-12">
<div class="feature-overview__cards">
{{ range $index, $element := .Params.cards }}
<div class="card feature-overview__card">
<a href="{{ .link.url }}" class="card feature-overview__card">
<div>
<img src="{{ .icon.src }}" alt="{{ .icon.alt }}" />
<h5 class="feature-overview__card-title">{{ .title }}</h5>
{{ if eq $index 1 }}
<p class="feature-overview__card-content">
{{ .content }}
<a href="{{ .contentLink.url }}">{{ .contentLink.text }}</a>
<span class="card__content-link" data-href="{{ .contentLink.url }}">{{ .contentLink.text }}</span>
{{ .contentSecondPart }}
</p>
{{ else }}
<p class="feature-overview__card-content">{{ .content }}</p>
{{ end }}
</div>
<a class="link link_dark link_md align-self-start" href="{{ .link.url }}">{{ .link.text }}</a>
</div>
<span class="link link_dark link_md align-self-start">{{ .link.text }}</span>
</a>
{{ end }}
</div>
</div>
qdrant-landing/themes/qdrant-2024/layouts/partials/use-cases-cards.html
+3 -3
View File
@@ -3,15 +3,15 @@
<div class="use-cases-vector-cases__cards row g-4">
{{ range .context.Params.features }}
<div class="col-12 {{ if eq $class "ai-agents-use-cases" }}col-xl-4{{ else }}col-md-6{{ end }}">
<div class="card use-cases-vector-cases__card">
<a href="{{ .link.url }}" class="card use-cases-vector-cases__card">
<img class="use-cases-vector-cases__card-image" src="{{ .image.src }}" alt="{{ .image.alt }}" />
<img class="use-cases-vector-cases__card-image-mobile" src="{{ .image.srcMobile }}" alt="{{ .image.alt }}" />
<h6 class="use-cases-vector-cases__card-title">{{ .title }}</h6>
<p class="use-cases-vector-cases__card-description">{{ .description }}</p>
<div class="use-cases-vector-cases__card-link">
<a class="link link_md" href="{{ .link.url }}">{{ .link.text }}</a>
<span class="link link_md">{{ .link.text }}</span>
</div>
</div>
</a>
</div>
{{ end }}
</div>