mirror of
https://github.com/qdrant/landing_page.git
synced 2026-09-26 14:38:30 +02:00
Update HR-Tech page (#2286)
* Update HR-Tech page * delete comments * fixes * small fix
This commit is contained in:
nastyapash
@@ -1,6 +1,369 @@
|
||||
---
|
||||
title: HR Tech & Talent Marketplaces
|
||||
description: Discover how Qdrant's vector search technology can transform HR marketplaces and recruitment platforms by powering intelligent job matching, resume search, and candidate recommendations.
|
||||
sections:
|
||||
#hero-section
|
||||
- type: hero
|
||||
badge:
|
||||
title: HR Tech
|
||||
icon:
|
||||
src: /icons/outline/briefcase-business.svg
|
||||
alt: Case
|
||||
title: Recruitment Data is Fuzzy. Hiring Constraints Aren't.
|
||||
description: Power job search, candidate matching, and recommendation systems for scaled talent platforms.
|
||||
containedButton:
|
||||
text: Talk to an Expert
|
||||
url: /contact-us/
|
||||
outlinedButton:
|
||||
text: Read the Docs
|
||||
url: /documentation/
|
||||
language: Python
|
||||
code: |
|
||||
result = client.query_points(
|
||||
collection_name="jobs",
|
||||
prefetch=[
|
||||
models.Prefetch(
|
||||
query=dense_emb, using="dense",
|
||||
),
|
||||
models.Prefetch(
|
||||
query=sparse_vec, using="sparse",
|
||||
),
|
||||
],
|
||||
query=models.FusionQuery(
|
||||
fusion=models.Fusion.RRF),
|
||||
query_filter=models.Filter(must=[
|
||||
models.FieldCondition(
|
||||
key="location",
|
||||
match=models.MatchAny(any=["london", "remote"]),
|
||||
),
|
||||
models.FieldCondition(
|
||||
key="salary_max",
|
||||
range=models.Range(gte=60000),
|
||||
),
|
||||
]),
|
||||
limit=20,
|
||||
)
|
||||
steps:
|
||||
- id: 0
|
||||
title: Step 1
|
||||
description: Embed - Parse + Embed Resume / JD
|
||||
icon:
|
||||
src: /icons/outline/square-code.svg
|
||||
alt: Code
|
||||
- id: 1
|
||||
title: Step 2
|
||||
description: Search - Semantic Search + Strict Filter
|
||||
icon:
|
||||
src: /icons/outline/filter-blue-small.svg
|
||||
alt: Filter
|
||||
- id: 2
|
||||
title: Step 3
|
||||
description: Rank - Rank + Rerank (Optional)
|
||||
icon:
|
||||
src: /icons/outline/list.svg
|
||||
alt: List
|
||||
- id: 3
|
||||
title: Step 4
|
||||
description: Result - Evidence-based Match
|
||||
icon:
|
||||
src: /icons/outline/circle-check.svg
|
||||
alt: Check
|
||||
badges:
|
||||
- id: 0
|
||||
title: Advanced filters for hiring constraints
|
||||
icon:
|
||||
src: /icons/outline/filter-green.svg
|
||||
alt: Filter
|
||||
- id: 1
|
||||
title: Real-time matching speed
|
||||
icon:
|
||||
src: /icons/outline/rocket-blue-small.svg
|
||||
alt: Rocket
|
||||
- id: 2
|
||||
title: Optimize at scale to meet budget
|
||||
icon:
|
||||
src: /icons/outline/circle-dollar-sign.svg
|
||||
alt: Dollar
|
||||
- id: 3
|
||||
title: Native inference capability
|
||||
icon:
|
||||
src: /icons/outline/server.svg
|
||||
alt: Server
|
||||
|
||||
#testimonials-section
|
||||
- type: testimonials
|
||||
testimonials:
|
||||
- id: 0
|
||||
reverse: true
|
||||
review: “Qdrant is the last thing I worry about breaking.”
|
||||
author:
|
||||
name: Elvis Moraa
|
||||
role: Engineering Lead, Pariti
|
||||
avatar:
|
||||
src: /img/hr-tech/image.svg
|
||||
alt: Elvis Moraa avatar
|
||||
metric:
|
||||
- id: 0
|
||||
title: 2.4x
|
||||
description: increase in hiring fill rate
|
||||
- id: 1
|
||||
title: 70%
|
||||
description: reduction in candidate vetting time
|
||||
logo:
|
||||
src: /img/hr-tech/pariti-light.svg
|
||||
alt: Pariti logo
|
||||
|
||||
#bento-cards-section
|
||||
- type: bento-cards
|
||||
subtitle: Why Teams Choose Qdrant
|
||||
title: Recruitment Search is Broken at Scale
|
||||
description: Many HR tech teams don't start with vector search. They start with Elasticsearch, PGVector, or a managed API, and hit a wall when the product needs compound filters at scale, multi-language support, or sub-second latency on millions of vectors. These are the engineering problems that surface, and the pain we hear from teams switching.
|
||||
cards:
|
||||
- id: 0
|
||||
icon:
|
||||
src: /icons/outline/circle-alert.svg
|
||||
alt: Alert
|
||||
title: Inconsistent Taxonomies
|
||||
description: '"Senior Software Engineer," "Staff Dev," and "Lead SWE" might be the same role. Keyword search misses these. Semantic search doesn''t. Embeddings catch them.'
|
||||
- id: 1
|
||||
icon:
|
||||
src: /icons/outline/circle-alert.svg
|
||||
alt: Alert
|
||||
title: Fuzzy Data with Constraints
|
||||
description: Skills and titles are inconsistent across resumes, but location, work authorization, and certifications are hard constraints. You need semantic similarity AND hard filters on the same query.
|
||||
|
||||
#case-studies-section
|
||||
- type: case-studies
|
||||
title: What Our Clients Say
|
||||
caseStudies:
|
||||
- id: 0
|
||||
title: “Our managed search API is a black box.”
|
||||
description: No tuning, debugging, or control over ranking, even though you're paying a premium for convenience. With Qdrant, you can inspect every result, tune every parameter, and debug without guessing.
|
||||
- id: 1
|
||||
title: “Filters destroy our recall.”
|
||||
description: Post-filter architectures degrade when you add location + salary + category + level. Apply filters during HNSW traversal with Qdrant? No need to reduce recall or spike latency.
|
||||
- id: 2
|
||||
title: “We over-provision and still get spikes.”
|
||||
description: Burst traffic during peak hiring seasons, latency spikes during daily ingestion, clusters sized for worst-case that idle most of the day. Qdrant's Rust-based engine and quantization options mean you provision for actual usage, not theoretical peaks.
|
||||
- id: 3
|
||||
title: “Our solution doesn't scale past two languages.”
|
||||
description: PGVector worked at first for your home market. Now you're expanding to new countries and your search infrastructure can't handle multi-language embeddings or regional deployment. Qdrant supports any embedding model and deploys across regions.
|
||||
|
||||
#get-contacted-section
|
||||
- type: get-contacted
|
||||
title: Evaluating Migration?
|
||||
description: Our solutions engineers do technical deep-dives with HR tech teams weekly.
|
||||
contactUs:
|
||||
text: Book a Session
|
||||
url: /contact-us/
|
||||
|
||||
#bento-cards-section
|
||||
- type: bento-cards
|
||||
title: What you can build with Qdrant
|
||||
cards:
|
||||
- id: 0
|
||||
icon:
|
||||
src: /icons/outline/search-blue.svg
|
||||
alt: Search
|
||||
title: Modernized Job Search
|
||||
description: Layer semantic relevance on top of existing keyword/Boolean patterns with hybrid search. Apply strict metadata filters alongside vector similarity, no post-filter penalty.
|
||||
chips:
|
||||
- id: 0
|
||||
title: Hybrid Search
|
||||
link: /documentation/search/hybrid-queries/
|
||||
- id: 1
|
||||
title: Payload Filters
|
||||
link: /documentation/search/filtering/
|
||||
- id: 2
|
||||
title: Reciprocal Rank Fusion
|
||||
link: /documentation/search/hybrid-queries/#reciprocal-rank-fusion-rrf
|
||||
- id: 1
|
||||
icon:
|
||||
src: /icons/outline/heart-handshake.svg
|
||||
alt: Alert
|
||||
title: Similar Jobs & Candidates
|
||||
description: Layer semantic relevance on top of existing keyword/Boolean patterns with hybrid search. Apply strict metadata filters alongside vector similarity, no post-filter penalty.
|
||||
chips:
|
||||
- id: 0
|
||||
title: Recommendation API
|
||||
link: /documentation/search/explore/#recommendation-api
|
||||
|
||||
#architecture-section
|
||||
- type: architecture
|
||||
title: How It Works Under the Hood
|
||||
description: Architecture patterns with API examples for the problems above.
|
||||
sections:
|
||||
- id: 0
|
||||
title: Semantic Match with Hard Hiring Constraints
|
||||
description: Embed the job description or resume, then apply must-match payload filters for non-negotiable constraints. Filters applied during HNSW traversal, not after, so recall doesn't degrade.
|
||||
link:
|
||||
href: /documentation/search/hybrid-queries/
|
||||
text: View Full Example
|
||||
steps:
|
||||
- id: 0
|
||||
title: Pre-filter during graph traversal
|
||||
description: Compound filters on location, salary, category don't cause latency spikes.
|
||||
- id: 1
|
||||
title: Hybrid Search
|
||||
description: Combine dense + sparse vectors with Reciprocal Rank Fusion in a single query.
|
||||
- id: 2
|
||||
title: Native Inferencing
|
||||
description: Use Qdrant Cloud inference to simplify your data pipeline.
|
||||
language: Python
|
||||
code: |
|
||||
# Pattern: hybrid semantic + keyword with filters
|
||||
# → see docs for complete example
|
||||
result = client.query_points(
|
||||
collection_name="jobs",
|
||||
prefetch=[
|
||||
models.Prefetch(
|
||||
query=dense_emb, using="dense",
|
||||
limit=100),
|
||||
models.Prefetch(
|
||||
query=sparse_vec, using="sparse",
|
||||
limit=100),
|
||||
],
|
||||
query=models.FusionQuery(
|
||||
fusion=models.Fusion.RRF),
|
||||
query_filter=models.Filter(must=[
|
||||
models.FieldCondition(
|
||||
key="location",
|
||||
match=models.MatchAny(any=["london", "remote"]),
|
||||
),
|
||||
models.FieldCondition(
|
||||
key="salary_max",
|
||||
range=models.Range(gte=60000),
|
||||
),
|
||||
]),
|
||||
limit=20,
|
||||
)
|
||||
- id: 1
|
||||
title: Quantization for 10M+ Vectors
|
||||
description: Scalar and binary quantization compress vectors 4-32x in memory. At 10M+ candidate or job vectors.
|
||||
link:
|
||||
href: /documentation/manage-data/quantization/
|
||||
text: View Full Example
|
||||
steps:
|
||||
- id: 0
|
||||
title: Scalar Quantization
|
||||
description: 4x memory reduction with minimal recall loss. One config flag.
|
||||
- id: 1
|
||||
title: Predictable Cost
|
||||
description: fixed infra cost for vector search means retrieval across multiple pipeline stages without margin erosion.
|
||||
language: Python
|
||||
code: |
|
||||
# Pattern: quantized collection for scale
|
||||
# → see docs for complete example
|
||||
client.create_collection(
|
||||
collection_name="candidates_quantized",
|
||||
vectors_config={
|
||||
"dense": models.VectorParams(
|
||||
size=1536,
|
||||
distance=models.Distance.COSINE,
|
||||
),
|
||||
},
|
||||
sparse_vectors_config={
|
||||
"sparse": models.SparseVectorParams(
|
||||
modifier=models.Modifier.IDF,
|
||||
),
|
||||
},
|
||||
quantization_config=models.ScalarQuantization(
|
||||
scalar=models.ScalarQuantizationConfig(
|
||||
type=models.ScalarType.INT8,
|
||||
quantile=0.99,
|
||||
always_ram=True,
|
||||
)
|
||||
),
|
||||
)
|
||||
- id: 2
|
||||
title: '"Similar Jobs" and Candidate Discovery'
|
||||
description: Recommendation-style retrieval using existing points as query inputs. Pass positive and negative examples, no embedding step needed on the query side.
|
||||
link:
|
||||
href: /documentation/search/explore/
|
||||
text: View Full Example
|
||||
steps:
|
||||
- id: 0
|
||||
title: Recommend by Point ID
|
||||
description: No re-embedding required. Just pass the job or candidate ID.
|
||||
- id: 1
|
||||
title: Positive + Negative Examples
|
||||
description: '"More like these 3, less like that one": refine without retraining.'
|
||||
language: Python
|
||||
code: |
|
||||
# Pattern: recommend by point ID
|
||||
# → see docs for complete example
|
||||
result = client.query_points(
|
||||
collection_name="jobs",
|
||||
query=models.RecommendQuery(
|
||||
recommend=models.RecommendInput(
|
||||
positive=[0], # job_id_0
|
||||
negative=[1], # job_id_1
|
||||
)
|
||||
),
|
||||
using="dense",
|
||||
query_filter=models.Filter(
|
||||
must=[
|
||||
models.FieldCondition(
|
||||
key="category",
|
||||
match=models.MatchValue(value="engineering"),
|
||||
),
|
||||
models.FieldCondition(
|
||||
key="remote",
|
||||
match=models.MatchValue(value=True),
|
||||
),
|
||||
]
|
||||
),
|
||||
limit=20,
|
||||
)
|
||||
|
||||
#dark-banner-section
|
||||
- type: dark-banner
|
||||
description: Pariti is referral-driven hiring marketplace in Africa. Qdrant vector search ranks 70k candidates in real time.
|
||||
industry: Pariti · HR Tech
|
||||
metric:
|
||||
rate: 20% → 48%
|
||||
description: Hiring Fill Rate
|
||||
logo:
|
||||
src: /img/hr-tech/pariti-light-small.svg
|
||||
alt: Pariti logo
|
||||
link:
|
||||
href: /blog/case-study-pariti/?q=Pariti
|
||||
text: Read the Full Case Study
|
||||
|
||||
#faq-section
|
||||
- type: faq
|
||||
title: FAQs
|
||||
questions:
|
||||
- id: 0
|
||||
question: How Does Vector Search Improve Job Matching Compared to Keyword Search?
|
||||
answer: Keyword search requires candidates to guess the exact terms employers use. A job seeker searching "development" gets "business development" results mixed in with software engineering roles. Vector search converts job descriptions, resumes, and queries into embeddings that capture meaning, so "Senior Software Engineer," "Staff Dev," and "Lead SWE" all surface as semantically similar. Qdrant combines this semantic matching with strict payload filters (location, salary range, work authorization) in a single query, so results are both relevant and compliant with hard hiring constraints.
|
||||
- id: 1
|
||||
question: Can Qdrant Handle Millions of Job or Candidate Vectors Without Performance Degradation?
|
||||
answer: Yes. Qdrant is built in Rust with a custom HNSW implementation and storage engine designed for high-throughput, concurrent read/write workloads. Recruiting platforms commonly maintain millions of vectors (candidates and jobs combined) with heavy daily update loads. Scalar and binary quantization compress vectors 4 to 32x in memory, which helps keep infrastructure costs predictable as you scale. Filters are applied during HNSW graph traversal, not after, so compound queries on location, salary, category, and experience level avoid the recall degradation and latency spikes that other architectures can produce.
|
||||
- id: 2
|
||||
question: Is Qdrant Compliant with HIPAA, GDPR, and Data Residency Requirements for HR Data?
|
||||
answer: "Qdrant Cloud is SOC 2 Type 2 certified and supports HIPAA-compliant deployments with a Business Associate Agreement (BAA) for healthcare recruiting platforms. For teams with GDPR or data residency requirements, Qdrant offers Hybrid Cloud deployment: your data stays on your own AWS, GCP, or Azure infrastructure while Qdrant manages the control plane. On-premises and fully air-gapped deployments are also available for organizations that require complete data sovereignty."
|
||||
- id: 3
|
||||
question: How Does Qdrant Compare to Elasticsearch or OpenSearch for Recruiting Search?
|
||||
answer: "Elasticsearch and OpenSearch were designed for full-text keyword search and log analytics, not semantic vector retrieval. Teams that bolt vector search onto these systems often report filter performance degradation, over-provisioned clusters to handle burst traffic, and complex operational overhead. Qdrant is purpose-built for vector workloads: filters execute during graph traversal (not as a post-processing step), hybrid search combines dense semantic vectors with sparse BM25 keyword vectors in a single query, and the Rust-based engine provides consistent low-latency performance without the memory overhead of JVM-based systems. Some HR tech teams that evaluate Qdrant are replacing an existing search stack, not building from scratch."
|
||||
- id: 4
|
||||
question: Does Qdrant Support Geospatial Search for Location-Based Job Matching?
|
||||
answer: Yes. Qdrant has native geospatial filtering that lets you run radius queries and bounding-box filters alongside vector search in the same request. For job boards operating across multiple countries or regions, this means you can combine semantic job matching with location constraints without maintaining a separate geospatial index. This is a common reason teams explore alternatives to solutions where geospatial and vector search are difficult to combine without custom engineering.
|
||||
- id: 5
|
||||
question: Can Qdrant Support Multi-Language Job Search for International Job Boards?
|
||||
answer: Qdrant is embedding-model agnostic, which means it supports any multi-language embedding model your team selects (such as multilingual-e5, Cohere multilingual, or OpenAI embeddings). For teams that want to simplify their pipeline, Qdrant Cloud Inference handles embedding directly within Qdrant, so you can send raw text (job descriptions, resumes, queries in any language) and skip managing a separate inference service. Job boards expanding from a single market to multiple countries can store all language variants in the same collection and query across them with consistent performance. Combined with regional deployment options and geospatial filtering, this lets you scale from one market to dozens without re-architecting your search infrastructure.
|
||||
- id: 6
|
||||
question: What Latency Can I Expect from Qdrant for Real-Time Candidate or Job Search?
|
||||
answer: "Qdrant helps teams meet aggressive latency goals on collections with billions of vectors, including filtered queries. This matters for recruiting platforms because search latency directly affects candidate experience: slow search times lead to measurable user abandonment. Qdrant maintains performance during concurrent ingestion (daily job or candidate updates) and search traffic, helping avoid the latency spikes that commonly occur during peak hours or batch update windows."
|
||||
|
||||
#cta-banner-section
|
||||
- type: cta-banner
|
||||
title: Talk to an expert about <br><span>HR marketplace</span> retrieval.
|
||||
description: Get guidance on scaling search, matching, and recommendations beyond 20M vectors.
|
||||
button:
|
||||
text: Talk to an Expert
|
||||
url: /contact-us/
|
||||
|
||||
build:
|
||||
render: always
|
||||
cascade:
|
||||
|
||||
@@ -128,6 +128,14 @@
|
||||
@import 'partials/hr-tech/index';
|
||||
@import 'partials/healthcare/index';
|
||||
@import 'partials/cta-banner';
|
||||
@import 'partials/industries/industries-faq';
|
||||
@import 'partials/industries/industries-bento-cards';
|
||||
@import 'partials/industries/industries-case-studies';
|
||||
@import 'partials/industries/industries-get-contacted';
|
||||
@import 'partials/industries/industries-hero';
|
||||
@import 'partials/industries/industries-testimonials';
|
||||
@import 'partials/industries/industries-architecture';
|
||||
@import 'partials/industries/industries-dark-banner';
|
||||
@import 'partials/vsd/vsd-speaker-lineup';
|
||||
@import 'partials/vsd/vsd-last-year';
|
||||
@import 'partials/vsd/vsd-sponsors';
|
||||
|
||||
@@ -47,6 +47,10 @@
|
||||
line-height: pxToRem(38);
|
||||
letter-spacing: -0.5px;
|
||||
color: $neutral-98;
|
||||
|
||||
span {
|
||||
color: $primary-50;
|
||||
}
|
||||
}
|
||||
|
||||
&__description {
|
||||
|
||||
+207
@@ -0,0 +1,207 @@
|
||||
@use '../../helpers/functions' as *;
|
||||
@use 'sass:math';
|
||||
|
||||
.industries-architecture {
|
||||
padding-top: $spacer * 2.5;
|
||||
padding-bottom: $spacer * 2.5;
|
||||
background-color: $neutral-10;
|
||||
|
||||
&__title {
|
||||
margin-bottom: pxToRem(30);
|
||||
color: $neutral-98;
|
||||
font-size: $h4-font-size;
|
||||
line-height: $spacer * 3;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__description {
|
||||
margin-bottom: pxToRem(30);
|
||||
color: $neutral-70;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__sections {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: pxToRem(30);
|
||||
}
|
||||
|
||||
&__checklist {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
border-radius: $spacer * 0.5;
|
||||
border: pxToRem(1) solid $neutral-30;
|
||||
background-color: $neutral-10;
|
||||
|
||||
&-top {
|
||||
padding: $spacer * 1.5 $spacer * 1.5 $spacer * 2.5;
|
||||
}
|
||||
|
||||
&-title {
|
||||
margin-bottom: $spacer;
|
||||
font-size: $h5-font-size;
|
||||
line-height: pxToRem(42);
|
||||
color: $neutral-100;
|
||||
}
|
||||
|
||||
&-description {
|
||||
margin-bottom: 0;
|
||||
color: $neutral-70;
|
||||
}
|
||||
|
||||
&-link {
|
||||
margin: 0 $spacer * 1.5 $spacer * 1.5;
|
||||
}
|
||||
|
||||
&-bottom {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
&-step {
|
||||
padding: $spacer $spacer * 1.5;
|
||||
border-top: pxToRem(1) solid $neutral-30;
|
||||
|
||||
&-top {
|
||||
display: flex;
|
||||
gap: $spacer * 0.5;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
height: pxToRem(18);
|
||||
width: pxToRem(18);
|
||||
}
|
||||
}
|
||||
|
||||
&-title {
|
||||
margin-bottom: 0;
|
||||
font-size: $font-size-md;
|
||||
line-height: $spacer * 1.5;
|
||||
color: $neutral-100;
|
||||
}
|
||||
|
||||
&-description {
|
||||
margin-bottom: 0;
|
||||
color: $neutral-70;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__code {
|
||||
height: 100%;
|
||||
padding: pxToRem(3);
|
||||
border-radius: $spacer * 0.5;
|
||||
border: pxToRem(1) solid $neutral-30;
|
||||
background-color: $neutral-10;
|
||||
|
||||
&-tabs {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: $spacer * 2.5;
|
||||
padding: 0 $spacer;
|
||||
|
||||
&-button {
|
||||
padding: 0 $spacer * 2;
|
||||
border: 0;
|
||||
border-bottom: pxToRem(2) solid $primary-50;
|
||||
font-size: $font-size-s;
|
||||
line-height: $spacer * 2.5;
|
||||
background-color: transparent;
|
||||
color: $neutral-100;
|
||||
}
|
||||
}
|
||||
|
||||
&-button {
|
||||
height: $spacer * 1.5;
|
||||
width: $spacer * 1.5;
|
||||
padding: math.div($spacer, 4);
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
|
||||
img {
|
||||
height: $spacer;
|
||||
width: $spacer;
|
||||
}
|
||||
}
|
||||
|
||||
&-done {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
width: 100%;
|
||||
margin-bottom: 0;
|
||||
padding: $spacer * 1.5;
|
||||
border: pxToRem(1) solid $neutral-30;
|
||||
border-radius: $spacer * 0.5;
|
||||
background: linear-gradient($neutral-20, #0e1424);
|
||||
|
||||
pre {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
white-space: pre-wrap;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
code {
|
||||
display: block;
|
||||
width: 100%;
|
||||
overflow-wrap: anywhere;
|
||||
word-break: break-word;
|
||||
|
||||
.line {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
* {
|
||||
font-size: $font-size-s;
|
||||
line-height: $line-height-sm;
|
||||
color: #C5C8C6;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
color: #7C7C7C;
|
||||
}
|
||||
|
||||
.s2, .nb {
|
||||
color: #A8FF60;
|
||||
}
|
||||
|
||||
.k {
|
||||
color: #96CBFE;
|
||||
}
|
||||
|
||||
.mi {
|
||||
color: #FF73FD;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-top: $spacer * 7.5;
|
||||
padding-bottom: $spacer * 7.5;
|
||||
background-image: url("/img/blurred/blurred-light-29.png");
|
||||
background-position: top pxToRem(-52) left 0;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
&__title {
|
||||
margin-bottom: $spacer;
|
||||
font-size: $h3-font-size;
|
||||
line-height: pxToRem(52);
|
||||
}
|
||||
|
||||
&__description {
|
||||
margin-bottom: $spacer * 4;
|
||||
font-size: $font-size-l;
|
||||
line-height: $line-height-lg;
|
||||
}
|
||||
|
||||
&__sections {
|
||||
gap: $spacer * 4;
|
||||
}
|
||||
}
|
||||
}
|
||||
+125
@@ -0,0 +1,125 @@
|
||||
@use '../../helpers/functions' as *;
|
||||
@use 'sass:math';
|
||||
|
||||
.industries-bento-cards {
|
||||
padding-top: $spacer * 2.5;
|
||||
padding-bottom: $spacer * 2.5;
|
||||
background-color: $neutral-94;
|
||||
|
||||
&__subtitle {
|
||||
margin-bottom: pxToRem(30);
|
||||
text-align: center;
|
||||
font-family: $font-family-code;
|
||||
font-size: $font-size-s;
|
||||
font-weight: 500;
|
||||
line-height: $line-height-sm;
|
||||
text-transform: uppercase;
|
||||
color: $neutral-30;
|
||||
}
|
||||
|
||||
&__title {
|
||||
margin-bottom: 0;
|
||||
text-align: center;
|
||||
font-size: $h4-font-size;
|
||||
line-height: $spacer * 3;
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&__description {
|
||||
margin-top: pxToRem(30);
|
||||
margin-bottom: 0;
|
||||
text-align: center;
|
||||
color: $neutral-30;
|
||||
}
|
||||
|
||||
&__header {
|
||||
margin-bottom: pxToRem(30);
|
||||
}
|
||||
|
||||
&__card {
|
||||
justify-content: flex-start;
|
||||
gap: $spacer;
|
||||
|
||||
&-icon {
|
||||
height: $spacer * 1.5;
|
||||
width: $spacer * 1.5;
|
||||
}
|
||||
|
||||
&-title {
|
||||
margin-bottom: 0;
|
||||
font-size: $font-size-xl;
|
||||
line-height: pxToRem(30);
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&-description {
|
||||
margin-bottom: 0;
|
||||
color: $neutral-30;
|
||||
}
|
||||
|
||||
&-chips {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: $spacer * 0.5;
|
||||
|
||||
&-link {
|
||||
display: flex;
|
||||
gap: pxToRem(6);
|
||||
padding: math.div($spacer, 4) pxToRem(10);
|
||||
border-radius: math.div($spacer, 4);
|
||||
background: $neutral-94;
|
||||
font-size: $font-size-xs;
|
||||
line-height: pxToRem(18);
|
||||
color: $neutral-30;
|
||||
|
||||
&:hover {
|
||||
background: $neutral-90;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
display: block;
|
||||
width: $spacer;
|
||||
height: $spacer;
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.6665 4.66675H11.3332M11.3332 4.66675V11.3334M11.3332 4.66675L4.6665 11.3334' stroke='%2328324D' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__card-with-chips {
|
||||
gap: $spacer * 1.5;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-top: $spacer * 2.5;
|
||||
padding-bottom: $spacer * 7.5;
|
||||
|
||||
&-with-subtitle {
|
||||
padding-top: $spacer * 6.5;
|
||||
padding-bottom: $spacer * 4;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
margin-bottom: $spacer;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: $h3-font-size;
|
||||
line-height: pxToRem(52);
|
||||
}
|
||||
|
||||
&__description {
|
||||
margin-top: $spacer;
|
||||
font-size: $font-size-l;
|
||||
line-height: $line-height-lg;
|
||||
}
|
||||
|
||||
&__header {
|
||||
margin-bottom: $spacer * 4;
|
||||
}
|
||||
}
|
||||
}
|
||||
+154
@@ -0,0 +1,154 @@
|
||||
@use '../../helpers/functions' as *;
|
||||
|
||||
.industries-case-studies {
|
||||
padding-top: $spacer * 2.5;
|
||||
padding-bottom: $spacer * 2.5;
|
||||
background-color: $neutral-94;
|
||||
|
||||
&__header {
|
||||
text-align: center;
|
||||
margin-bottom: pxToRem(30);
|
||||
}
|
||||
|
||||
&__title {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
font-size: $h5-font-size;
|
||||
line-height: 1.3;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.5px;
|
||||
color: $neutral-20;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__controls {
|
||||
flex-shrink: 0;
|
||||
margin-left: auto;
|
||||
display: none;
|
||||
gap: $spacer * 2;
|
||||
}
|
||||
|
||||
&__active-slider {
|
||||
.industries-case-studies__controls {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__arrow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: $spacer * 2.5;
|
||||
height: $spacer * 2.5;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color: $neutral-20;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
svg path {
|
||||
stroke: $primary-50;
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
cursor: not-allowed;
|
||||
|
||||
svg path {
|
||||
stroke: $neutral-80;
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
path {
|
||||
transition: stroke 0.2s ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__carousel {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&__track {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--industries-case-studies-gap, #{pxToRem(30)});
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
&__slide {
|
||||
flex-shrink: 0;
|
||||
width: var(
|
||||
--industries-case-studies-slide-width,
|
||||
calc((100% - (2 * #{pxToRem(30)})) / 3)
|
||||
);
|
||||
}
|
||||
|
||||
&__card {
|
||||
justify-content: flex-start;
|
||||
gap: $spacer * 2;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
|
||||
&-title {
|
||||
margin: 0;
|
||||
font-size: $h6-font-size;
|
||||
line-height: $spacer * 2;
|
||||
font-weight: 500;
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&-description {
|
||||
margin: 0;
|
||||
color: $neutral-30;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
&__track {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
&__active-slider {
|
||||
.industries-case-studies__header {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: $spacer * 1.5;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.industries-case-studies__controls {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-top: $spacer * 5;
|
||||
padding-bottom: $spacer * 5;
|
||||
|
||||
&__header {
|
||||
margin-bottom: $spacer * 2.5;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: $h4-font-size;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
&__card {
|
||||
&-title {
|
||||
min-height: $spacer * 4;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
+110
@@ -0,0 +1,110 @@
|
||||
@use '../../helpers/functions' as *;
|
||||
|
||||
.industries-dark-banner {
|
||||
padding-top: $spacer * 5;
|
||||
padding-bottom: $spacer * 5;
|
||||
background-color: $neutral-10;
|
||||
|
||||
&__block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
padding: $spacer * 2;
|
||||
border-radius: $spacer * 0.5;
|
||||
border: pxToRem(1) solid $neutral-30;
|
||||
background: linear-gradient($neutral-20, #0e1424);
|
||||
}
|
||||
|
||||
&__logo {
|
||||
margin-bottom: pxToRem(30);
|
||||
|
||||
img {
|
||||
height: $spacer * 3;
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
border-bottom: pxToRem(1) solid $neutral-30;
|
||||
|
||||
&-description {
|
||||
margin-bottom: pxToRem(30);
|
||||
font-size: $h6-font-size;
|
||||
line-height: $spacer * 2;
|
||||
color: $neutral-94;
|
||||
}
|
||||
|
||||
&-industry {
|
||||
margin-bottom: pxToRem(30);
|
||||
color: $neutral-70;
|
||||
}
|
||||
}
|
||||
|
||||
&__metric {
|
||||
&-rate {
|
||||
margin-top: pxToRem(30);
|
||||
margin-bottom: $spacer;
|
||||
font-size: $h5-font-size;
|
||||
line-height: pxToRem(42);
|
||||
color: #1FC7C7;
|
||||
}
|
||||
|
||||
&-description {
|
||||
margin-bottom: $spacer * 5;
|
||||
color: $neutral-70;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-top: 0;
|
||||
padding-bottom: $spacer * 7.5;
|
||||
|
||||
&__block {
|
||||
flex-direction: row;
|
||||
padding: $spacer * 3.5;
|
||||
}
|
||||
|
||||
&__logo {
|
||||
flex-shrink: 0;
|
||||
padding-right: $spacer * 3;
|
||||
}
|
||||
|
||||
&__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 $spacer * 3;
|
||||
border-left: pxToRem(1) solid $neutral-30;
|
||||
border-right: pxToRem(1) solid $neutral-30;
|
||||
border-bottom: 0;
|
||||
|
||||
&-industry {
|
||||
margin-top: auto;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__metric {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
align-items: flex-start;
|
||||
width: pxToRem(293);
|
||||
padding-left: $spacer * 3;
|
||||
|
||||
&-rate {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
font-size: $h4-font-size;
|
||||
line-height: $spacer * 3;
|
||||
}
|
||||
|
||||
&-description {
|
||||
margin-bottom: $spacer * 5;
|
||||
color: $neutral-70;
|
||||
}
|
||||
|
||||
&-link {
|
||||
margin-top: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
@use '../../helpers/functions' as *;
|
||||
|
||||
.industries-faq {
|
||||
padding-top: $spacer * 5;
|
||||
padding-bottom: $spacer * 2.5;
|
||||
background-color: $neutral-94;
|
||||
|
||||
&__title {
|
||||
margin-bottom: $spacer * 5;
|
||||
font-size: $h2-font-size;
|
||||
line-height: pxToRem(62);
|
||||
color: $neutral-20;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
+24
@@ -0,0 +1,24 @@
|
||||
@use '../../helpers/functions' as *;
|
||||
@use '../../mixins/get-contacted' as get-contacted;
|
||||
|
||||
.industries-get-contacted {
|
||||
@include get-contacted.base($spacer * 4, pxToRem(30), $spacer * 7.5, $spacer * 2.5, pxToRem(620));
|
||||
|
||||
h3 {
|
||||
margin-bottom: $spacer * 0.5;
|
||||
text-align: center;
|
||||
font-size: $h6-font-size;
|
||||
line-height: $spacer * 2;
|
||||
color: $neutral-98;
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
color: $neutral-70;
|
||||
font-size: $font-size-md;
|
||||
line-height: $spacer * 1.5;
|
||||
}
|
||||
}
|
||||
+382
@@ -0,0 +1,382 @@
|
||||
@use '../../helpers/functions' as *;
|
||||
@use 'sass:math';
|
||||
|
||||
.industries-hero {
|
||||
padding-top: $spacer * 5;
|
||||
padding-bottom: $spacer * 5;
|
||||
background-color: $neutral-10;
|
||||
background-image:
|
||||
radial-gradient(
|
||||
105.1% 114.35% at 50% 2%,
|
||||
rgba($neutral-10, 0) 0%,
|
||||
rgba($neutral-10, 0.32) 81.57%,
|
||||
rgba($secondary-blue-50, 0.8) 99.31%
|
||||
);
|
||||
background-position: 0 0;
|
||||
background-size: auto;
|
||||
background-repeat: no-repeat;
|
||||
position: relative;
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url("/img/stars-pattern.png");
|
||||
background-position: 0 0;
|
||||
background-size: pxToRem(350) pxToRem(350);
|
||||
background-repeat: repeat;
|
||||
opacity: .5;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: $spacer;
|
||||
margin-bottom: $spacer * 4.5;
|
||||
}
|
||||
|
||||
&__badge {
|
||||
display: flex;
|
||||
gap: $spacer * 0.5;
|
||||
align-items: center;
|
||||
padding: math.div($spacer, 4) $spacer;
|
||||
border-radius: math.div($spacer, 4);
|
||||
background: linear-gradient($neutral-20, #0e1424);
|
||||
|
||||
img {
|
||||
height: pxToRem(20);
|
||||
width: pxToRem(20);
|
||||
}
|
||||
|
||||
span {
|
||||
color: $neutral-98;
|
||||
font-size: $font-size-s;
|
||||
line-height: $line-height-sm;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
margin-bottom: 0;
|
||||
color: $neutral-98;
|
||||
font-size: $h5-font-size;
|
||||
line-height: pxToRem(42);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__description {
|
||||
margin-bottom: 0;
|
||||
color: $neutral-70;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__mobile-buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacer * 1.5;
|
||||
margin-top: $spacer * 2;
|
||||
align-items: center;
|
||||
|
||||
a {
|
||||
width: pxToRem(170)
|
||||
}
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
display: none;
|
||||
gap: $spacer * 1.5;
|
||||
}
|
||||
|
||||
&__block {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
border-radius: $spacer;
|
||||
background-color: $neutral-20;
|
||||
border: pxToRem(1) solid $neutral-20;
|
||||
}
|
||||
|
||||
&__tabs {
|
||||
display: flex;
|
||||
padding: pxToRem(3) pxToRem(3) math.div($spacer, 4) pxToRem(3);
|
||||
|
||||
button {
|
||||
width: 50%;
|
||||
border: 0;
|
||||
padding: $spacer * 0.5 $spacer * 1.5;
|
||||
border-radius: pxToRem(12);
|
||||
background-color: $neutral-20;
|
||||
color: $neutral-70;
|
||||
|
||||
&.active {
|
||||
background-color: $neutral-40;
|
||||
color: $neutral-98;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__code {
|
||||
border-radius: $spacer * 0.5;
|
||||
background-color: $neutral-10;
|
||||
|
||||
&-tabs {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 $spacer;
|
||||
}
|
||||
|
||||
&-tab {
|
||||
height: $spacer * 2.5;
|
||||
padding: 0 $spacer * 2;
|
||||
font-size: $font-size-s;
|
||||
line-height: $spacer * 2.5;
|
||||
color: $neutral-94;
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
border-bottom: pxToRem(2) solid $primary-50;
|
||||
}
|
||||
|
||||
&-button {
|
||||
display: flex;
|
||||
gap: $spacer * 0.5;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
|
||||
span {
|
||||
display: none;
|
||||
font-size: $font-size-s;
|
||||
line-height: $line-height-sm;
|
||||
color: $neutral-80;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
span {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-collapse {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.is-expanded {
|
||||
.industries-hero__code-expand {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.industries-hero__code-collapse {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.industries-hero__code-content {
|
||||
overflow-y: visible;
|
||||
}
|
||||
}
|
||||
|
||||
&-content {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
height: pxToRem(280);
|
||||
transition: height 0.2s;
|
||||
margin: 0 pxToRem(3);
|
||||
padding: $spacer * 1.5 $spacer $spacer * 1.5 $spacer * 1.5;
|
||||
border-radius: $spacer * 0.5 $spacer * 0.5 0 0;
|
||||
background: linear-gradient($neutral-20, #0e1424);
|
||||
border: pxToRem(1) solid $neutral-20;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
word-break: break-word;
|
||||
overflow-wrap: anywhere;
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
width: calc(100% - pxToRem(24));
|
||||
margin-bottom: 0;
|
||||
background: transparent;
|
||||
|
||||
pre {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
white-space: pre-wrap;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
code {
|
||||
display: block;
|
||||
width: 100%;
|
||||
overflow-wrap: anywhere;
|
||||
word-break: break-word;
|
||||
|
||||
.line {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
* {
|
||||
font-size: $font-size-s;
|
||||
line-height: $line-height-sm;
|
||||
color: #C5C8C6;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
color: #7C7C7C;
|
||||
}
|
||||
|
||||
.s2, .nb {
|
||||
color: #A8FF60;
|
||||
}
|
||||
|
||||
.k {
|
||||
color: #96CBFE;
|
||||
}
|
||||
|
||||
.mi {
|
||||
color: #FF73FD;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-button {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: pxToRem(5);
|
||||
border: pxToRem(1) solid $neutral-30;
|
||||
border-radius: math.div($spacer, 4);
|
||||
background: linear-gradient($neutral-20, #0e1424);
|
||||
|
||||
svg {
|
||||
height: pxToRem(12);
|
||||
width: pxToRem(12);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-done {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__steps {
|
||||
height: pxToRem(320);
|
||||
border-radius: $spacer * 0.5;
|
||||
background-color: $neutral-10;
|
||||
|
||||
&-item {
|
||||
height: $spacer * 5;
|
||||
padding: $spacer $spacer * 1.5;
|
||||
|
||||
&:not(:last-of-type) {
|
||||
border-bottom: pxToRem(1) solid $neutral-20;
|
||||
}
|
||||
|
||||
&-header {
|
||||
display: flex;
|
||||
gap: $spacer * 0.5;
|
||||
align-items: center;
|
||||
|
||||
h6 {
|
||||
color: $neutral-94;
|
||||
font-size: $font-size-md;
|
||||
line-height: $spacer * 1.5;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
img {
|
||||
height: pxToRem(18);
|
||||
width: pxToRem(18);
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
color: $neutral-70;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__badges {
|
||||
display: none;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: $spacer * 1.5;
|
||||
margin-top: $spacer * 5;
|
||||
|
||||
&-item {
|
||||
display: flex;
|
||||
gap: $spacer * 0.5;
|
||||
align-items: center;
|
||||
padding: pxToRem(6) pxToRem(10);
|
||||
border-radius: math.div($spacer, 4);
|
||||
background: linear-gradient($neutral-20, #0e1424);
|
||||
|
||||
img {
|
||||
height: $spacer;
|
||||
width: $spacer;
|
||||
}
|
||||
|
||||
span {
|
||||
color: $neutral-98;
|
||||
font-size: $font-size-s;
|
||||
line-height: $line-height-sm;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-top: $spacer * 7.5;
|
||||
padding-bottom: $spacer * 7.5;
|
||||
|
||||
&__content {
|
||||
gap: $spacer * 1.5;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: $h4-font-size;
|
||||
line-height: $spacer * 3;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: $font-size-xl;
|
||||
line-height: pxToRem(30);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&__mobile-buttons {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__badges {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
+198
@@ -0,0 +1,198 @@
|
||||
@use '../../helpers/functions' as *;
|
||||
|
||||
.industries-testimonials {
|
||||
padding-top: $spacer * 5;
|
||||
padding-bottom: $spacer * 5;
|
||||
background-color: $neutral-94;
|
||||
|
||||
&__item {
|
||||
&:not(:last-of-type) {
|
||||
margin-bottom: $spacer * 5;
|
||||
}
|
||||
}
|
||||
|
||||
&__logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: $spacer * 10;
|
||||
width: 100%;
|
||||
border-radius: $spacer * 0.5;
|
||||
border: pxToRem(1) solid $neutral-90;
|
||||
background-color: $neutral-10;
|
||||
background-image: url("/img/stars-pattern.png");
|
||||
background-position: 0;
|
||||
background-size: pxToRem(350) pxToRem(350);
|
||||
background-repeat: no-repeat;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: pxToRem(-20);
|
||||
background-image: url("/img/blurred/blurred-light-28.svg");
|
||||
background-position: 0;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
width: 100%;
|
||||
aspect-ratio: 4 / 1;
|
||||
}
|
||||
}
|
||||
|
||||
&__card {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
padding: $spacer * 2 0;
|
||||
|
||||
&-review {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: $spacer * 5 $spacer * 2 0;
|
||||
|
||||
&-text {
|
||||
margin-bottom: $spacer * 2;
|
||||
font-size: $h6-font-size;
|
||||
line-height: $spacer * 2;
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&-block {
|
||||
display: flex;
|
||||
gap: $spacer;
|
||||
|
||||
img {
|
||||
height: $spacer * 3;
|
||||
width: $spacer * 3;
|
||||
}
|
||||
}
|
||||
|
||||
&-name {
|
||||
margin: 0;
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&-role {
|
||||
margin: 0;
|
||||
font-size: $font-size-s;
|
||||
line-height: $line-height-sm;
|
||||
color: $neutral-60;
|
||||
}
|
||||
}
|
||||
|
||||
&-metric {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&-divider {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: pxToRem(1);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: $neutral-90;
|
||||
}
|
||||
|
||||
&-item {
|
||||
padding: $spacer * 1.5 0 $spacer * 1.5 $spacer * 2;
|
||||
|
||||
img {
|
||||
height: $spacer * 2;
|
||||
width: $spacer * 2;
|
||||
}
|
||||
|
||||
&:nth-of-type(1) {
|
||||
padding: $spacer 0 $spacer * 1.5 $spacer * 2;
|
||||
|
||||
.industries-testimonials__card-metric-count {
|
||||
color: $secondary-blue-50;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-of-type(2) {
|
||||
.industries-testimonials__card-metric-count {
|
||||
color: $secondary-teal-50;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-of-type(3) {
|
||||
.industries-testimonials__card-metric-count {
|
||||
color: $secondary-violet-50;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-count {
|
||||
margin-bottom: 0;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&-description {
|
||||
margin-bottom: 0;
|
||||
font-size: $font-size-l;
|
||||
line-height: $line-height-lg;
|
||||
color: $neutral-50;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
&__item {
|
||||
&:not(:last-of-type) {
|
||||
margin-bottom: pxToRem(30);
|
||||
}
|
||||
}
|
||||
|
||||
&__logo {
|
||||
height: pxToRem(300);
|
||||
|
||||
&:after {
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__card {
|
||||
height: pxToRem(300);
|
||||
flex-direction: row;
|
||||
padding: $spacer * 3.5;
|
||||
|
||||
&-review {
|
||||
justify-content: space-between;
|
||||
padding: 0 $spacer * 0.5 0 0;
|
||||
|
||||
&-text {
|
||||
margin-bottom: $spacer * 0.2;
|
||||
}
|
||||
}
|
||||
|
||||
&-metric {
|
||||
width: pxToRem(232);
|
||||
justify-content: space-between;
|
||||
flex-shrink: 0;
|
||||
border-left: pxToRem(1) solid $neutral-90;
|
||||
|
||||
&-item {
|
||||
padding: 0 0 0 $spacer * 2;
|
||||
border-bottom: 0;
|
||||
|
||||
&:nth-of-type(1) {
|
||||
padding: 0 $spacer * 0.5 0 $spacer * 2;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-divider {
|
||||
&:last-of-type {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,252 @@
|
||||
(function () {
|
||||
const initTabs = (root) => {
|
||||
const tabsWrap = root.querySelector(".industries-hero__tabs");
|
||||
if (!tabsWrap) return;
|
||||
const [btnCode, btnSteps] = tabsWrap.querySelectorAll("button");
|
||||
const codeBlock = root.querySelector(".industries-hero__code");
|
||||
const stepsBlock = root.querySelector(".industries-hero__steps");
|
||||
if (!btnCode || !btnSteps || !codeBlock || !stepsBlock) return;
|
||||
|
||||
const setActive = (view) => {
|
||||
const isCode = view === "code";
|
||||
codeBlock.hidden = !isCode;
|
||||
stepsBlock.hidden = isCode;
|
||||
btnCode.classList.toggle("active", isCode);
|
||||
btnSteps.classList.toggle("active", !isCode);
|
||||
btnCode.type = "button";
|
||||
btnSteps.type = "button";
|
||||
btnCode.setAttribute("aria-selected", String(isCode));
|
||||
btnSteps.setAttribute("aria-selected", String(!isCode));
|
||||
};
|
||||
|
||||
btnCode.addEventListener("click", () => setActive("code"));
|
||||
btnSteps.addEventListener("click", () => setActive("steps"));
|
||||
setActive("code");
|
||||
};
|
||||
|
||||
const initCodeExpandCollapse = (root) => {
|
||||
const code = root.querySelector(".industries-hero__code");
|
||||
if (!code) return;
|
||||
|
||||
const content = code.querySelector(".industries-hero__code-content");
|
||||
const btnExpand = code.querySelector(".industries-hero__code-expand");
|
||||
const btnCollapse = code.querySelector(".industries-hero__code-collapse");
|
||||
if (!content || !btnExpand || !btnCollapse) return;
|
||||
|
||||
const collapsedHeightPx = parseFloat(getComputedStyle(content).height);
|
||||
|
||||
btnExpand.type = "button";
|
||||
btnCollapse.type = "button";
|
||||
|
||||
const expand = () => {
|
||||
code.classList.add("is-expanded");
|
||||
|
||||
const startHeight = content.getBoundingClientRect().height;
|
||||
content.style.height = `${startHeight}px`;
|
||||
content.offsetHeight;
|
||||
|
||||
const targetHeight = content.scrollHeight;
|
||||
content.style.height = `${targetHeight}px`;
|
||||
|
||||
const onEnd = (e) => {
|
||||
if (e.propertyName !== "height") return;
|
||||
content.style.height = "auto";
|
||||
content.removeEventListener("transitionend", onEnd);
|
||||
};
|
||||
content.addEventListener("transitionend", onEnd);
|
||||
};
|
||||
|
||||
const collapse = () => {
|
||||
code.classList.remove("is-expanded");
|
||||
|
||||
const startHeight = content.getBoundingClientRect().height;
|
||||
|
||||
content.style.height = `${startHeight}px`;
|
||||
content.offsetHeight;
|
||||
content.style.height = `${collapsedHeightPx}px`;
|
||||
};
|
||||
|
||||
btnExpand.addEventListener("click", expand);
|
||||
btnCollapse.addEventListener("click", collapse);
|
||||
};
|
||||
|
||||
const initCopyCode = (root) => {
|
||||
const bindCopy = (codeWrap, { copyDisplay = "block", doneDisplay = "block" } = {}) => {
|
||||
const btnCopy = codeWrap.querySelector(".industries-architecture__code-copy, .industries-hero__code-copy");
|
||||
const btnDone = codeWrap.querySelector(".industries-architecture__code-done, .industries-hero__code-done");
|
||||
const codeEl = codeWrap.querySelector(".highlight code");
|
||||
|
||||
if (!btnCopy || !btnDone || !codeEl) return;
|
||||
|
||||
btnCopy.type = "button";
|
||||
btnDone.type = "button";
|
||||
|
||||
btnCopy.addEventListener("click", async () => {
|
||||
const text = codeEl.textContent || "";
|
||||
|
||||
try {
|
||||
await navigator.clipboard.writeText(text);
|
||||
btnCopy.style.display = "none";
|
||||
btnDone.style.display = doneDisplay;
|
||||
|
||||
setTimeout(() => {
|
||||
btnDone.style.display = "none";
|
||||
btnCopy.style.display = copyDisplay;
|
||||
}, 1200);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// industries-architecture
|
||||
root.querySelectorAll(".industries-architecture__code").forEach((codeWrap) => {
|
||||
bindCopy(codeWrap, { copyDisplay: "block", doneDisplay: "block" });
|
||||
});
|
||||
|
||||
// industries-hero
|
||||
const codeWrap = root.querySelector(".industries-hero__code");
|
||||
if (!codeWrap) return;
|
||||
bindCopy(codeWrap, { copyDisplay: "flex", doneDisplay: "flex" });
|
||||
};
|
||||
|
||||
const initCaseStudiesCarousel = () => {
|
||||
const root = document.querySelector('.industries-case-studies');
|
||||
const container = document.querySelector('.industries-case-studies__container');
|
||||
const carousel = document.querySelector('.industries-case-studies__carousel');
|
||||
const track = document.querySelector('.industries-case-studies__track');
|
||||
const prevBtn = document.querySelector('.industries-case-studies__arrow--prev');
|
||||
const nextBtn = document.querySelector('.industries-case-studies__arrow--next');
|
||||
|
||||
if (!root || !container || !carousel || !track || !prevBtn || !nextBtn) return;
|
||||
|
||||
const slides = track.querySelectorAll('.industries-case-studies__slide');
|
||||
const breakpoints = { sm: 576, md: 768, xl: 1200 };
|
||||
let currentOffset = 0;
|
||||
let gap = 0;
|
||||
let lastSlideWidth = 0;
|
||||
let lastGap = 0;
|
||||
let sliderEnabled = false;
|
||||
|
||||
function readGap() {
|
||||
const style = getComputedStyle(track);
|
||||
gap = parseFloat(style.columnGap || style.gap) || 0;
|
||||
carousel.style.setProperty('--industries-case-studies-gap', gap + 'px');
|
||||
}
|
||||
|
||||
function getVisibleCount() {
|
||||
const w = window.innerWidth;
|
||||
if (w < breakpoints.md) return 1;
|
||||
if (w < breakpoints.xl) return 2;
|
||||
return 3;
|
||||
}
|
||||
|
||||
function getContainerContentWidth() {
|
||||
const style = getComputedStyle(container);
|
||||
const paddingLeft = parseFloat(style.paddingLeft) || 0;
|
||||
const paddingRight = parseFloat(style.paddingRight) || 0;
|
||||
return container.offsetWidth - paddingLeft - paddingRight;
|
||||
}
|
||||
|
||||
function getSlideWidth() {
|
||||
const contentWidth = getContainerContentWidth();
|
||||
const count = Math.min(getVisibleCount(), slides.length);
|
||||
const gaps = Math.max(0, count - 1) * gap;
|
||||
return Math.floor((contentWidth - gaps) / count);
|
||||
}
|
||||
|
||||
function applySlideWidth() {
|
||||
const slideWidth = getSlideWidth();
|
||||
carousel.style.setProperty('--industries-case-studies-slide-width', slideWidth + 'px');
|
||||
}
|
||||
|
||||
function getMaxOffset() {
|
||||
applySlideWidth();
|
||||
const slideWidth = getSlideWidth();
|
||||
const trackWidth = slides.length * slideWidth + (slides.length - 1) * gap;
|
||||
const contentWidth = getContainerContentWidth();
|
||||
return Math.max(0, trackWidth - contentWidth);
|
||||
}
|
||||
|
||||
function updateTrack() {
|
||||
if (!sliderEnabled) {
|
||||
currentOffset = 0;
|
||||
track.style.transform = 'translateX(0px)';
|
||||
return;
|
||||
}
|
||||
const maxOffset = getMaxOffset();
|
||||
currentOffset = Math.min(Math.max(0, currentOffset), maxOffset);
|
||||
track.style.transform = `translateX(-${currentOffset}px)`;
|
||||
}
|
||||
|
||||
function updateButtons() {
|
||||
if (!sliderEnabled) {
|
||||
prevBtn.disabled = true;
|
||||
nextBtn.disabled = true;
|
||||
return;
|
||||
}
|
||||
const maxOffset = getMaxOffset();
|
||||
prevBtn.disabled = currentOffset <= 0;
|
||||
nextBtn.disabled = currentOffset >= maxOffset;
|
||||
}
|
||||
|
||||
prevBtn.addEventListener('click', function() {
|
||||
if (!sliderEnabled) return;
|
||||
const slideWidth = getSlideWidth();
|
||||
currentOffset = Math.max(0, currentOffset - (slideWidth + gap));
|
||||
updateTrack();
|
||||
updateButtons();
|
||||
});
|
||||
|
||||
nextBtn.addEventListener('click', function() {
|
||||
if (!sliderEnabled) return;
|
||||
const maxOffset = getMaxOffset();
|
||||
const slideWidth = getSlideWidth();
|
||||
currentOffset = Math.min(maxOffset, currentOffset + (slideWidth + gap));
|
||||
updateTrack();
|
||||
updateButtons();
|
||||
});
|
||||
|
||||
function onResize() {
|
||||
const prevStep = (lastSlideWidth || getSlideWidth()) + (lastGap || gap || 0);
|
||||
const prevIndex = prevStep > 0 ? Math.round(currentOffset / prevStep) : 0;
|
||||
|
||||
readGap();
|
||||
applySlideWidth();
|
||||
|
||||
const visible = Math.min(getVisibleCount(), slides.length);
|
||||
const isSmall = window.innerWidth < breakpoints.md;
|
||||
sliderEnabled = !isSmall && slides.length > visible;
|
||||
root.classList.toggle('industries-case-studies__active-slider', sliderEnabled);
|
||||
|
||||
if (!sliderEnabled) {
|
||||
currentOffset = 0;
|
||||
} else {
|
||||
const nextStep = getSlideWidth() + gap;
|
||||
currentOffset = prevIndex * nextStep;
|
||||
}
|
||||
|
||||
updateTrack();
|
||||
updateButtons();
|
||||
|
||||
lastGap = gap;
|
||||
lastSlideWidth = getSlideWidth();
|
||||
}
|
||||
|
||||
let resizeRaf = 0;
|
||||
window.addEventListener('resize', function() {
|
||||
if (resizeRaf) return;
|
||||
resizeRaf = requestAnimationFrame(function() {
|
||||
resizeRaf = 0;
|
||||
onResize();
|
||||
});
|
||||
});
|
||||
|
||||
onResize();
|
||||
}
|
||||
|
||||
initTabs(document);
|
||||
initCodeExpandCollapse(document);
|
||||
initCopyCode(document);
|
||||
initCaseStudiesCarousel();
|
||||
})();
|
||||
@@ -1,28 +1,14 @@
|
||||
{{ define "main" }}
|
||||
{{ partial "site-header" . }}
|
||||
|
||||
{{ with (.Site.GetPage "hr-tech/hero") }}
|
||||
{{ partial "hr-tech/hr-tech-hero" . }}
|
||||
{{ end }}
|
||||
{{ range .Params.sections }}
|
||||
{{ $type := .type }}
|
||||
{{ $special := dict
|
||||
"cta-banner" "partials/cta-banner.html"
|
||||
}}
|
||||
|
||||
{{ with (.Site.GetPage "/hr-tech/testimonial-light") }}
|
||||
{{ partial "testimonial-light" (dict "context" . "class" "customers-testimonial pb-5 pb-lg-7") }}
|
||||
{{ end }}
|
||||
|
||||
{{ with (.Site.GetPage "/hr-tech/help") }}
|
||||
{{ partial "hr-tech/hr-tech-help" . }}
|
||||
{{ end }}
|
||||
|
||||
{{ with (.Site.GetPage "/hr-tech/features") }}
|
||||
{{ partial "hr-tech/hr-tech-features" . }}
|
||||
{{ end }}
|
||||
|
||||
{{ with (.Site.GetPage "/hr-tech/why-qdrant") }}
|
||||
{{ partial "hr-tech/hr-tech-why-qdrant" . }}
|
||||
{{ end }}
|
||||
|
||||
{{ with (.Site.GetPage "/hr-tech/get-contacted") }}
|
||||
{{ partial "cta-banner" . }}
|
||||
{{ $partialPath := (index $special $type) | default (printf "partials/industries/industries-%s.html" $type) }}
|
||||
{{ partial $partialPath (dict "Params" .) }}
|
||||
{{ end }}
|
||||
|
||||
{{ end }}
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
<div class="cta-banner__background" style="background-image: url('{{ $background.src }}');{{ if $background.webp }} background-image: image-set(url('{{ $background.webp }}') type('image/webp'), url('{{ $background.src }}') type('image/png'));{{ end }}"></div>
|
||||
<div class="cta-banner__content">
|
||||
<div class="cta-banner__text">
|
||||
<h2 class="cta-banner__title">{{ .Params.title }}</h2>
|
||||
<h2 class="cta-banner__title">{{ .Params.title | safeHTML }}</h2>
|
||||
{{ if .Params.description }}
|
||||
<p class="cta-banner__description">{{ .Params.description }}</p>
|
||||
{{ end }}
|
||||
|
||||
+68
@@ -0,0 +1,68 @@
|
||||
<section class="industries-architecture">
|
||||
<div class="container">
|
||||
<h3 class="industries-architecture__title">{{ .Params.title }}</h3>
|
||||
<p class="industries-architecture__description">{{ .Params.description }}</p>
|
||||
|
||||
<div class="industries-architecture__sections">
|
||||
{{ range .Params.sections }}
|
||||
<div class="row g-1 industries-architecture__section">
|
||||
<div class="col-12 col-lg-6">
|
||||
<div class="industries-architecture__checklist">
|
||||
<div class="industries-architecture__checklist-top">
|
||||
<h4 class="industries-architecture__checklist-title">{{ .title }}</h4>
|
||||
<p class="industries-architecture__checklist-description">{{ .description }}</p>
|
||||
</div>
|
||||
|
||||
<div class="industries-architecture__checklist-bottom">
|
||||
<a class="link link_md industries-architecture__checklist-link" href="{{ .link.href }}">
|
||||
{{ .link.text }}
|
||||
</a>
|
||||
<div class="industries-architecture__checklist-steps">
|
||||
{{ range .steps }}
|
||||
<div class="industries-architecture__checklist-step">
|
||||
<div class="industries-architecture__checklist-step-top">
|
||||
<img src="/icons/outline/circle-check-green.svg" alt="Check" />
|
||||
<h6 class="industries-architecture__checklist-step-title">{{ .title }}</h6>
|
||||
</div>
|
||||
<p class="industries-architecture__checklist-step-description">{{ .description }}</p>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-lg-6">
|
||||
<div class="industries-architecture__code">
|
||||
<div class="industries-architecture__code-tabs">
|
||||
<button class="industries-architecture__code-tabs-button">{{ .language }}</button>
|
||||
<button class="industries-architecture__code-button industries-architecture__code-copy">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_14927_49916)">
|
||||
<path d="M2 8C1.45 8 1 7.55 1 7V2C1 1.45 1.45 1 2 1H7C7.55 1 8 1.45 8 2M5 4H10C10.5523 4 11 4.44771 11 5V10C11 10.5523 10.5523 11 10 11H5C4.44771 11 4 10.5523 4 10V5C4 4.44771 4.44771 4 5 4Z" stroke="#B4BACC" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_14927_49916">
|
||||
<rect width="12" height="12" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="industries-architecture__code-button industries-architecture__code-done">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10 3L4.5 8.5L2 6" stroke="#F0F3FA" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="industries-architecture__code-content">
|
||||
{{ with .code }}
|
||||
{{ $lang := $.Params.language | default "python" }}
|
||||
{{ highlight . $lang "" }}
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
+35
@@ -0,0 +1,35 @@
|
||||
<section class="industries-bento-cards{{ if .Params.subtitle }} industries-bento-cards-with-subtitle{{ end }}">
|
||||
<div class="container">
|
||||
<div class="industries-bento-cards__header">
|
||||
{{ if .Params.subtitle }}
|
||||
<p class="industries-bento-cards__subtitle">{{ .Params.subtitle }}</p>
|
||||
{{ end }}
|
||||
<h3 class="industries-bento-cards__title">{{ .Params.title }}</h3>
|
||||
{{ if .Params.description }}
|
||||
<p class="industries-bento-cards__description">{{ .Params.description }}</p>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
<div class="row g-4">
|
||||
{{ $mdCol := cond (eq (len .Params.cards) 3) "col-md-4" "col-md-6" }}
|
||||
{{ range .Params.cards }}
|
||||
<div class="col-12 {{ $mdCol }}">
|
||||
<div
|
||||
class="card industries-bento-cards__card{{ if .chips }} industries-bento-cards__card-with-chips{{ end }}"
|
||||
>
|
||||
<img class="industries-bento-cards__card-icon" src="{{ .icon.src }}" alt="{{ .icon.alt }}" />
|
||||
<h6 class="industries-bento-cards__card-title">{{ .title }}</h6>
|
||||
<p class="industries-bento-cards__card-description">{{ .description }}</p>
|
||||
{{ if .chips }}
|
||||
<div class="industries-bento-cards__card-chips">
|
||||
{{ range .chips }}
|
||||
<a class="industries-bento-cards__card-chips-link" href="{{ .link }}">{{ .title }}</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
+34
@@ -0,0 +1,34 @@
|
||||
<section
|
||||
class="industries-case-studies{{ if ge (len .Params.caseStudies) 4 }} industries-case-studies__active-slider{{ end }}"
|
||||
>
|
||||
<div class="container industries-case-studies__container">
|
||||
<div class="industries-case-studies__header">
|
||||
<h2 class="industries-case-studies__title">{{ .Params.title }}</h2>
|
||||
<div class="industries-case-studies__controls">
|
||||
<button type="button" class="industries-case-studies__arrow industries-case-studies__arrow--prev" aria-label="Previous slide">
|
||||
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M36.6668 20H3.3335M3.3335 20L15.0002 31.6667M3.3335 20L15.0002 8.33337" stroke="#161E33" stroke-width="3.33333" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button type="button" class="industries-case-studies__arrow industries-case-studies__arrow--next" aria-label="Next slide">
|
||||
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M25 8.33337L36.6667 20L25 31.6667" stroke="#161E33" stroke-width="3.33333" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M3.3335 20H36.6668" stroke="#161E33" stroke-width="3.33333" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="industries-case-studies__carousel">
|
||||
<div class="industries-case-studies__track">
|
||||
{{ range .Params.caseStudies }}
|
||||
<div class="industries-case-studies__slide">
|
||||
<div class="card industries-case-studies__card">
|
||||
<h4 class="industries-case-studies__card-title">{{ .title }}</h4>
|
||||
<p class="industries-case-studies__card-description">{{ .description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
+22
@@ -0,0 +1,22 @@
|
||||
<section class="industries-dark-banner">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="industries-dark-banner__block">
|
||||
<div class="industries-dark-banner__logo">
|
||||
<img src="{{ .Params.logo.src }}" alt="{{ .Params.logo.alt }}">
|
||||
</div>
|
||||
<div class="industries-dark-banner__content">
|
||||
<p class="industries-dark-banner__content-description">{{ .Params.description }}</p>
|
||||
<p class="industries-dark-banner__content-industry">{{ .Params.industry }}</p>
|
||||
</div>
|
||||
<div class="industries-dark-banner__metric">
|
||||
<h3 class="industries-dark-banner__metric-rate">{{ .Params.metric.rate }}</h3>
|
||||
<p class="industries-dark-banner__metric-description">{{ .Params.metric.description }}</p>
|
||||
<a class="link link_md industries-dark-banner__metric-link" href="{{ .Params.link.href }}">{{ .Params.link.text }}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,6 @@
|
||||
<section class="industries-faq">
|
||||
<div class="container">
|
||||
<h2 class="industries-faq__title">{{ .Params.title }}</h2>
|
||||
{{ partial "accordion" . }}
|
||||
</div>
|
||||
</section>
|
||||
+13
@@ -0,0 +1,13 @@
|
||||
<section class="industries-get-contacted">
|
||||
<div class="container">
|
||||
<div class="industries-get-contacted__content col-12">
|
||||
<div>
|
||||
<h3 class="industries-get-contacted__title">{{ .Params.title }}</h3>
|
||||
<p class="industries-get-contacted__description">{{ .Params.description }}</p>
|
||||
</div>
|
||||
<a href="{{ .Params.contactUs.url }}" class="{{ .class }}__button button button_contained">
|
||||
{{ .Params.contactUs.text | safeHTML }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,101 @@
|
||||
<section class="industries-hero">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="industries-hero__content col-12 col-lg-7">
|
||||
<div class="industries-hero__badge">
|
||||
<img src="{{ .Params.badge.icon.src }}" alt="{{ .Params.badge.icon.alt }}">
|
||||
<span>{{ .Params.badge.title }}</span>
|
||||
</div>
|
||||
<h1 class="industries-hero__title">{{ .Params.title }}</h1>
|
||||
<p class="industries-hero__description">{{ .Params.description }}</p>
|
||||
<div class="industries-hero__buttons">
|
||||
<a href="{{ .Params.containedButton.url }}" class="button button_contained button_lg">
|
||||
{{ .Params.containedButton.text }}
|
||||
</a>
|
||||
<a href="{{ .Params.outlinedButton.url }}" class="button button_outlined button_lg">
|
||||
{{ .Params.outlinedButton.text }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-lg-5">
|
||||
<div class="industries-hero__block">
|
||||
<div class="industries-hero__tabs">
|
||||
<button>Code</button>
|
||||
<button>Steps</button>
|
||||
</div>
|
||||
<div class="industries-hero__code">
|
||||
<div class="industries-hero__code-tabs">
|
||||
<button class="industries-hero__code-tab">{{ .Params.language }}</button>
|
||||
<button class="industries-hero__code-button industries-hero__code-expand">
|
||||
<span>Expand</span>
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M4.66699 10.0004L8.00049 13.3339L11.334 10.0004M4.66699 6.00025L8.00049 2.66675L11.334 6.00025" stroke="#B4BACC" stroke-width="1.3334" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="industries-hero__code-button industries-hero__code-collapse">
|
||||
<span>Collapse</span>
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M4.66699 13.3339L8.00049 10.0004L11.334 13.3339M4.66699 2.66675L8.00049 6.00025L11.334 2.66675" stroke="#B4BACC" stroke-width="1.3334" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="industries-hero__code-content">
|
||||
{{ with .Params.code }}
|
||||
{{ $lang := $.Params.language | default "python" }}
|
||||
{{ highlight . $lang "" }}
|
||||
{{ end }}
|
||||
<button class="industries-hero__code-content-button industries-hero__code-copy">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_14927_49916)">
|
||||
<path d="M2 8C1.45 8 1 7.55 1 7V2C1 1.45 1.45 1 2 1H7C7.55 1 8 1.45 8 2M5 4H10C10.5523 4 11 4.44771 11 5V10C11 10.5523 10.5523 11 10 11H5C4.44771 11 4 10.5523 4 10V5C4 4.44771 4.44771 4 5 4Z" stroke="#B4BACC" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_14927_49916">
|
||||
<rect width="12" height="12" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="industries-hero__code-content-button industries-hero__code-done">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10 3L4.5 8.5L2 6" stroke="#F0F3FA" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="industries-hero__steps">
|
||||
{{ range .Params.steps }}
|
||||
<div class="industries-hero__steps-item">
|
||||
<div class="industries-hero__steps-item-header">
|
||||
<img src="{{ .icon.src }}" alt="{{ .icon.alt }}">
|
||||
<h6>{{ .title }}</h6>
|
||||
</div>
|
||||
<p>{{ .description }}</p>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="industries-hero__mobile-buttons">
|
||||
<a href="{{ .Params.containedButton.url }}" class="button button_contained button_sm" target="_blank">
|
||||
{{ .Params.containedButton.text }}
|
||||
</a>
|
||||
<a href="{{ .Params.outlinedButton.url }}" class="button button_outlined button_sm">
|
||||
{{ .Params.outlinedButton.text }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="industries-hero__badges">
|
||||
{{ range .Params.badges }}
|
||||
<div class="industries-hero__badges-item">
|
||||
<img src="{{ .icon.src }}" alt="{{ .icon.alt }}">
|
||||
<span>{{ .title }}</span>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
+41
@@ -0,0 +1,41 @@
|
||||
<section class="industries-testimonials">
|
||||
<div class="container">
|
||||
{{ range .Params.testimonials }}
|
||||
<div class="industries-testimonials__item row{{ if .reverse }} flex-row-reverse{{ end }} g-4">
|
||||
<div class="col-12 col-lg-8">
|
||||
<div class="card industries-testimonials__card">
|
||||
<div class="industries-testimonials__card-review">
|
||||
<p class="industries-testimonials__card-review-text">{{ .review }}</p>
|
||||
<div class="industries-testimonials__card-review-block">
|
||||
<img src="{{ .author.avatar.src }}" alt="{{ .author.avatar.alt }}">
|
||||
<div>
|
||||
<p class="industries-testimonials__card-review-name">{{ .author.name }}</p>
|
||||
<p class="industries-testimonials__card-review-role">{{ .author.role }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="industries-testimonials__card-metric">
|
||||
{{ range .metric }}
|
||||
<div class="industries-testimonials__card-metric-item">
|
||||
{{ if .icon }}
|
||||
<img src="{{ .icon.src }}" alt="{{ .icon.alt }}">
|
||||
{{ end }}
|
||||
{{ if .title }}
|
||||
<h6 class="industries-testimonials__card-metric-count">{{ .title }}</h6>
|
||||
{{ end }}
|
||||
<p class="industries-testimonials__card-metric-description">{{ .description }}</p>
|
||||
</div>
|
||||
<hr class="industries-testimonials__card-metric-divider" />
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-lg-4">
|
||||
<div class="industries-testimonials__logo">
|
||||
<img src="{{ .logo.src }}" alt="{{ .logo.alt }}">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</section>
|
||||
@@ -117,6 +117,11 @@
|
||||
<script src="{{ $customersJs.RelPermalink }}"></script>
|
||||
{{ end }}
|
||||
|
||||
{{ if eq .Section "hr-tech" }}
|
||||
{{ $customersJs := resources.Get "js/industries.js" | js.Build | minify | resources.Fingerprint "sha512" }}
|
||||
<script src="{{ $customersJs.RelPermalink }}"></script>
|
||||
{{ end }}
|
||||
|
||||
{{ if in (slice "blog" "articles" "course" "learn" "benchmarks" "docs" "documentation") .Section }}
|
||||
<!--popper.js for bootstrap-->
|
||||
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"></script>
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M9.99984 10.0001H10.0082M13.3332 5.00008V3.33341C13.3332 2.89139 13.1576 2.46746 12.845 2.1549C12.5325 1.84234 12.1085 1.66675 11.6665 1.66675H8.33317C7.89114 1.66675 7.46722 1.84234 7.15466 2.1549C6.8421 2.46746 6.6665 2.89139 6.6665 3.33341V5.00008M18.3332 10.8334C15.8605 12.4659 12.9628 13.3362 9.99984 13.3362C7.03688 13.3362 4.13918 12.4659 1.6665 10.8334M3.33317 5.00008H16.6665C17.587 5.00008 18.3332 5.74627 18.3332 6.66675V15.0001C18.3332 15.9206 17.587 16.6667 16.6665 16.6667H3.33317C2.4127 16.6667 1.6665 15.9206 1.6665 15.0001V6.66675C1.6665 5.74627 2.4127 5.00008 3.33317 5.00008Z" stroke="#2F6FF0" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 798 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12 8V12M12 16H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z" stroke="#E0700D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 330 B |
@@ -0,0 +1,10 @@
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_16830_5273)">
|
||||
<path d="M6.75 9L8.25 10.5L11.25 7.5M16.5 9C16.5 13.1421 13.1421 16.5 9 16.5C4.85786 16.5 1.5 13.1421 1.5 9C1.5 4.85786 4.85786 1.5 9 1.5C13.1421 1.5 16.5 4.85786 16.5 9Z" stroke="#038585" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_16830_5273">
|
||||
<rect width="18" height="18" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 508 B |
@@ -0,0 +1,10 @@
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_15086_52199)">
|
||||
<path d="M6.75 9L8.25 10.5L11.25 7.5M16.5 9C16.5 13.1421 13.1421 16.5 9 16.5C4.85786 16.5 1.5 13.1421 1.5 9C1.5 4.85786 4.85786 1.5 9 1.5C13.1421 1.5 16.5 4.85786 16.5 9Z" stroke="#DC244C" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_15086_52199">
|
||||
<rect width="18" height="18" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 510 B |
@@ -0,0 +1,10 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_16830_5056)">
|
||||
<path d="M10.6668 5.33325H6.66683C6.31321 5.33325 5.97407 5.47373 5.72402 5.72378C5.47397 5.97382 5.3335 6.31296 5.3335 6.66658C5.3335 7.02021 5.47397 7.35935 5.72402 7.60939C5.97407 7.85944 6.31321 7.99992 6.66683 7.99992H9.3335C9.68712 7.99992 10.0263 8.14039 10.2763 8.39044C10.5264 8.64049 10.6668 8.97963 10.6668 9.33325C10.6668 9.68687 10.5264 10.026 10.2763 10.2761C10.0263 10.5261 9.68712 10.6666 9.3335 10.6666H5.3335M8.00016 11.9999V3.99992M14.6668 7.99992C14.6668 11.6818 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6818 1.3335 7.99992C1.3335 4.31802 4.31826 1.33325 8.00016 1.33325C11.6821 1.33325 14.6668 4.31802 14.6668 7.99992Z" stroke="#8547FF" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_16830_5056">
|
||||
<rect width="16" height="16" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 994 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16.5 2.25H1.5L7.5 9.345V14.25L10.5 15.75V9.345L16.5 2.25Z" stroke="#2F6FF0" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 257 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M14.6668 2H1.3335L6.66683 8.30667V12.6667L9.3335 14V8.30667L14.6668 2Z" stroke="#038585" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 269 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12 5C13.5 3.5 14.74 3 16.5 3C17.9587 3 19.3576 3.57946 20.3891 4.61091C21.4205 5.64236 22 7.04131 22 8.5C22 10.79 20.49 12.54 19 14L12 21L5 14C3.5 12.55 2 10.8 2 8.5C2 7.04131 2.57946 5.64236 3.61091 4.61091C4.64236 3.57946 6.04131 3 7.5 3C9.26 3 10.5 3.5 12 5ZM12 5L9.04 7.96C8.83682 8.16171 8.67556 8.40162 8.56552 8.66593C8.45548 8.93023 8.39882 9.2137 8.39882 9.5C8.39882 9.7863 8.45548 10.0698 8.56552 10.3341C8.67556 10.5984 8.83682 10.8383 9.04 11.04C9.86 11.86 11.17 11.89 12.04 11.11L14.11 9.21C14.6289 8.73919 15.3044 8.47839 16.005 8.47839C16.7056 8.47839 17.3811 8.73919 17.9 9.21L20.86 11.87M18 15L16 13M15 18L13 16" stroke="#2F6FF0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 826 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M6 4.5H15.75M6 9H15.75M6 13.5H15.75M2.25 4.5H2.2575M2.25 9H2.2575M2.25 13.5H2.2575" stroke="#E0700D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 281 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7.99984 10.0001L5.99984 8.00008M7.99984 10.0001C8.93107 9.64591 9.82443 9.19923 10.6665 8.66675M7.99984 10.0001V13.3334C7.99984 13.3334 10.0198 12.9667 10.6665 12.0001C11.3865 10.9201 10.6665 8.66675 10.6665 8.66675M5.99984 8.00008C6.3546 7.0797 6.80131 6.19746 7.33317 5.36675C8.10996 4.12474 9.19159 3.10212 10.4752 2.39614C11.7588 1.69017 13.2016 1.32433 14.6665 1.33342C14.6665 3.14675 14.1465 6.33342 10.6665 8.66675M5.99984 8.00008H2.6665C2.6665 8.00008 3.03317 5.98008 3.99984 5.33342C5.07984 4.61342 7.33317 5.33342 7.33317 5.33342M2.99984 11.0001C1.99984 11.8401 1.6665 14.3334 1.6665 14.3334C1.6665 14.3334 4.15984 14.0001 4.99984 13.0001C5.47317 12.4401 5.4665 11.5801 4.93984 11.0601C4.68071 10.8128 4.33937 10.6698 3.98132 10.6588C3.62328 10.6477 3.27375 10.7692 2.99984 11.0001Z" stroke="#2F6FF0" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 992 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M4.00016 3.99992H4.00683M4.00016 11.9999H4.00683M2.66683 1.33325H13.3335C14.0699 1.33325 14.6668 1.93021 14.6668 2.66659V5.33325C14.6668 6.06963 14.0699 6.66658 13.3335 6.66658H2.66683C1.93045 6.66658 1.3335 6.06963 1.3335 5.33325V2.66659C1.3335 1.93021 1.93045 1.33325 2.66683 1.33325ZM2.66683 9.33325H13.3335C14.0699 9.33325 14.6668 9.93021 14.6668 10.6666V13.3333C14.6668 14.0696 14.0699 14.6666 13.3335 14.6666H2.66683C1.93045 14.6666 1.3335 14.0696 1.3335 13.3333V10.6666C1.3335 9.93021 1.93045 9.33325 2.66683 9.33325Z" stroke="#DC244C" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 723 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7.5 7.125L6 9L7.5 10.875M10.5 7.125L12 9L10.5 10.875M3.75 2.25H14.25C15.0784 2.25 15.75 2.92157 15.75 3.75V14.25C15.75 15.0784 15.0784 15.75 14.25 15.75H3.75C2.92157 15.75 2.25 15.0784 2.25 14.25V3.75C2.25 2.92157 2.92157 2.25 3.75 2.25Z" stroke="#038585" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 437 B |
@@ -0,0 +1,19 @@
|
||||
<svg width="350" height="86" viewBox="0 0 350 86" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g opacity="0.5" filter="url(#filter0_f_15223_44939)">
|
||||
<path d="M-64.9561 101.046C-66.5909 103.047 -22.2897 88.1164 26.4252 113.206C63.8604 97.352 130.721 132.293 164.56 131.832C198.399 131.37 262.316 103.509 332.937 113.822C349.665 107.614 389.498 95.5664 415 97.0441" stroke="url(#paint0_linear_15223_44939)" stroke-width="120"/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_f_15223_44939" x="-161.93" y="1.90735e-05" width="617.324" height="228.759" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feGaussianBlur stdDeviation="18.4615" result="effect1_foregroundBlur_15223_44939"/>
|
||||
</filter>
|
||||
<linearGradient id="paint0_linear_15223_44939" x1="414.837" y1="93.3498" x2="-59.5577" y2="97.3428" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#039BE5"/>
|
||||
<stop offset="0.239583" stop-color="#6047FF"/>
|
||||
<stop offset="0.484375" stop-color="#DC244C"/>
|
||||
<stop offset="0.6875" stop-color="#E53935"/>
|
||||
<stop offset="1" stop-color="#EF6C00"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 733 KiB |
@@ -0,0 +1,12 @@
|
||||
<svg width="117" height="48" viewBox="0 0 117 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M14.2324 7.53389C10.8072 8.74769 8.76206 11.6741 8.79532 15.2822C8.79532 16.9283 8.99485 17.7596 9.69319 19.0566C10.7407 21.0519 13.2348 22.8642 15.2134 23.0969L16.0448 23.1967L16.3274 22.0162C16.9592 19.306 18.8215 16.8784 21.1993 15.648C22.2467 15.0993 22.7456 14.933 24.3251 14.6005C24.8904 14.4841 24.9237 13.9853 24.4416 12.6052C23.7266 10.5102 22.2467 8.89733 20.1517 7.89969C18.9545 7.31774 18.755 7.28449 17.0424 7.23461C15.5294 7.20135 15.0471 7.25123 14.2324 7.53389Z" fill="#E1E5F0"/>
|
||||
<path d="M23.8272 16.0968C21.0006 16.7286 18.4732 19.1063 17.8247 21.75C17.409 23.4128 17.3757 23.2798 18.2404 23.4128C20.2191 23.712 22.3473 24.876 23.7773 26.4389C24.7416 27.4865 25.889 29.7311 26.0386 30.8452C26.2049 32.0423 26.2713 32.0756 27.3854 31.8427C31.0267 31.0779 33.5873 27.8523 33.5873 24.028C33.5873 21.7001 32.9721 20.0873 31.4591 18.4745C29.5635 16.446 26.5042 15.4816 23.8272 16.0968Z" fill="#E1E5F0"/>
|
||||
<path d="M5.23758 16.3962C1.96201 17.6266 0 20.4698 0 23.9948C0 26.306 0.615208 27.8855 2.12828 29.515C3.69125 31.1944 5.55349 31.9759 8.03094 31.9759C11.1402 31.9759 13.7008 30.4795 15.0975 27.8524C15.5299 27.0542 16.2282 24.8428 16.0785 24.7264C16.0619 24.7098 15.4966 24.5767 14.8149 24.4271C12.9527 24.0114 11.5725 23.2633 10.2257 21.9165C8.69604 20.4033 7.8813 18.8071 7.39912 16.4627C7.31598 16.0803 7.23284 16.0138 6.76728 16.0304C6.48462 16.0304 5.78628 16.1966 5.23758 16.3962Z" fill="#E1E5F0"/>
|
||||
<path d="M17.2929 25.7739C16.9603 27.4866 15.9461 29.3654 14.6491 30.6457C13.1526 32.1088 11.7394 32.8405 9.27855 33.3726C8.6966 33.5056 8.66334 34.0044 9.14553 35.3844C10.0434 37.9782 12.2548 39.9901 14.9484 40.6221C15.4971 40.755 16.4283 40.8049 17.3927 40.755C18.7229 40.6885 19.1052 40.5888 20.186 40.0733C22.2977 39.0757 23.7109 37.4795 24.4426 35.3013C24.7585 34.3869 24.7917 33.9379 24.7418 32.375C24.6919 30.6457 24.6588 30.4794 24.0601 29.2823C23.0458 27.2038 21.0507 25.5246 19.0388 25.0257C17.3428 24.61 17.5256 24.5268 17.2929 25.7739Z" fill="#E1E5F0"/>
|
||||
<path d="M36.7695 40.7741V14.4678H40.6037V18.4439L40.1421 17.5209C40.8522 16.4322 41.7989 15.5801 42.9822 14.9648C44.1656 14.3494 45.5146 14.0417 47.0294 14.0417C48.8518 14.0417 50.4848 14.4796 51.9285 15.3553C53.3959 16.231 54.5438 17.4262 55.3721 18.9409C56.2241 20.4556 56.6501 22.1596 56.6501 24.0531C56.6501 25.9464 56.2241 27.6505 55.3721 29.1652C54.5438 30.6799 53.4077 31.8869 51.964 32.7863C50.5202 33.662 48.8754 34.0998 47.0294 34.0998C45.5382 34.0998 44.1774 33.7921 42.9467 33.1768C41.7397 32.5614 40.8049 31.6739 40.1421 30.5142L40.7812 29.7687V40.7741H36.7695ZM46.6388 30.3722C47.7749 30.3722 48.7807 30.1 49.6564 29.5557C50.5321 29.0113 51.2185 28.2658 51.7154 27.3192C52.2362 26.3487 52.4965 25.2601 52.4965 24.0531C52.4965 22.846 52.2362 21.7691 51.7154 20.8225C51.2185 19.8758 50.5321 19.1302 49.6564 18.5859C48.7807 18.0415 47.7749 17.7694 46.6388 17.7694C45.5264 17.7694 44.5206 18.0415 43.6212 18.5859C42.7455 19.1302 42.0474 19.8758 41.5267 20.8225C41.0296 21.7691 40.7812 22.846 40.7812 24.0531C40.7812 25.2601 41.0296 26.3487 41.5267 27.3192C42.0474 28.2658 42.7455 29.0113 43.6212 29.5557C44.5206 30.1 45.5264 30.3722 46.6388 30.3722Z" fill="#E1E5F0"/>
|
||||
<path d="M65.2383 34.0998C63.9366 34.0998 62.7887 33.875 61.7947 33.4253C60.8243 32.952 60.067 32.3129 59.5226 31.5083C58.9782 30.6799 58.7061 29.7096 58.7061 28.5972C58.7061 27.5559 58.9309 26.6209 59.3805 25.7926C59.8539 24.9643 60.5757 24.266 61.5462 23.6981C62.5165 23.1301 63.7354 22.7276 65.2028 22.4911L71.8769 21.3905V24.55L65.9838 25.5796C64.9188 25.7689 64.1377 26.1121 63.6408 26.6091C63.1437 27.0825 62.8952 27.6978 62.8952 28.4552C62.8952 29.1889 63.1674 29.7924 63.7117 30.2658C64.2798 30.7154 65.0016 30.9403 65.8773 30.9403C66.966 30.9403 67.9127 30.7036 68.7174 30.2302C69.5458 29.7569 70.1848 29.1297 70.6344 28.3486C71.0841 27.5439 71.3089 26.6564 71.3089 25.6861V20.7515C71.3089 19.8047 70.9539 19.0356 70.2439 18.4439C69.5576 17.8285 68.6345 17.5209 67.4749 17.5209C66.4098 17.5209 65.475 17.8049 64.6702 18.3729C63.8893 18.9173 63.3094 19.6273 62.9307 20.503L59.5936 18.8344C59.9486 17.8877 60.5284 17.0593 61.3332 16.3493C62.1379 15.6156 63.0727 15.0476 64.1377 14.6453C65.2264 14.2429 66.3743 14.0417 67.5813 14.0417C69.096 14.0417 70.4333 14.3258 71.5929 14.8938C72.7763 15.4618 73.6875 16.2547 74.3266 17.2723C74.9892 18.2664 75.3206 19.426 75.3206 20.7515V33.6738H71.4864V30.1947L72.303 30.3013C71.8533 31.0822 71.2734 31.7568 70.5634 32.3249C69.8771 32.8927 69.0842 33.3307 68.1849 33.6383C67.3092 33.946 66.327 34.0998 65.2383 34.0998Z" fill="#E1E5F0"/>
|
||||
<path d="M78.9453 33.6738V14.4678H82.7793V18.3374L82.4243 17.7694C82.8504 16.515 83.5367 15.6156 84.4834 15.0713C85.4301 14.5033 86.5661 14.2192 87.8916 14.2192H89.0631V17.8758H87.3945C86.0691 17.8758 84.9923 18.29 84.1639 19.1184C83.3592 19.9231 82.9569 21.0828 82.9569 22.5975V33.6738H78.9453Z" fill="#E1E5F0"/>
|
||||
<path d="M90.7432 33.6739V14.4678H94.7548V33.6739H90.7432ZM92.749 11.8407C91.6412 11.8407 90.7432 10.9427 90.7432 9.83491V9.2314C90.7432 8.12361 91.6412 7.22559 92.749 7.22559C93.8568 7.22559 94.7548 8.12361 94.7548 9.2314V9.83491C94.7548 10.9427 93.8568 11.8407 92.749 11.8407Z" fill="#E1E5F0"/>
|
||||
<path d="M106.687 33.8869C104.675 33.8869 103.113 33.3189 102.001 32.1828C100.888 31.0468 100.332 29.4493 100.332 27.3902V18.0889H96.9595V14.4678H97.492C98.3914 14.4678 100.332 14.9096 100.332 14.1205C100.332 13.3314 100.332 12.2104 100.332 11.311V10.0657H104.344V14.4678H108.71V18.0889H104.344V27.2126C104.344 27.8754 104.45 28.4433 104.663 28.9167C104.876 29.3665 105.219 29.7214 105.693 29.9818C106.166 30.2184 106.781 30.3368 107.539 30.3368C107.728 30.3368 107.941 30.325 108.178 30.3013C108.415 30.2776 108.639 30.254 108.852 30.2302V33.6739C108.521 33.7212 108.154 33.7685 107.752 33.8159C107.349 33.8632 106.994 33.8869 106.687 33.8869Z" fill="#E1E5F0"/>
|
||||
<path d="M111.702 33.6739V14.4678H115.714V33.6739H111.702ZM113.708 11.8407C112.6 11.8407 111.702 10.9427 111.702 9.83491V9.2314C111.702 8.12361 112.6 7.22559 113.708 7.22559C114.816 7.22559 115.714 8.12361 115.714 9.2314V9.83491C115.714 10.9427 114.816 11.8407 113.708 11.8407Z" fill="#E1E5F0"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.1 KiB |
@@ -0,0 +1,12 @@
|
||||
<svg width="194" height="56" viewBox="0 0 194 56" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M23.7514 0.51451C18.0354 2.54011 14.6224 7.42371 14.6779 13.445C14.6779 16.192 15.0109 17.5794 16.1763 19.7437C17.9244 23.0735 22.0866 26.098 25.3885 26.4864L26.776 26.6529L27.2477 24.6828C28.302 20.16 31.4097 16.1088 35.3778 14.0554C37.1259 13.1398 37.9584 12.8623 40.5943 12.3073C41.5377 12.1131 41.5933 11.2807 40.7887 8.9776C39.5955 5.48137 37.1259 2.78983 33.6296 1.12496C31.6318 0.153788 31.2988 0.0982954 28.4408 0.0150517C25.9159 -0.0404427 25.111 0.042801 23.7514 0.51451Z" fill="white"/>
|
||||
<path d="M39.7631 14.8046C35.046 15.859 30.8283 19.827 29.7461 24.2388C29.0524 27.0137 28.9968 26.7917 30.4397 27.0137C33.7419 27.513 37.2935 29.4555 39.6799 32.0637C41.2891 33.8119 43.2038 37.5578 43.4536 39.4169C43.731 41.4147 43.8419 41.4703 45.7011 41.0817C51.7777 39.8053 56.051 34.4224 56.051 28.0404C56.051 24.1556 55.0243 21.4641 52.4993 18.7726C49.336 15.3873 44.2305 13.778 39.7631 14.8046Z" fill="white"/>
|
||||
<path d="M8.74056 15.304C3.27424 17.3573 0 22.1021 0 27.9848C0 31.8417 1.02667 34.4776 3.55171 37.197C6.16002 39.9996 9.26776 41.3037 13.4022 41.3037C18.591 41.3037 22.8642 38.8064 25.195 34.4223C25.9165 33.0903 27.0818 29.3998 26.8321 29.2056C26.8044 29.1779 25.861 28.9559 24.7234 28.7061C21.6156 28.0124 19.3125 26.7639 17.0649 24.5164C14.5121 21.9912 13.1524 19.3274 12.3478 15.415C12.209 14.7768 12.0703 14.6658 11.2934 14.6935C10.8216 14.6935 9.65624 14.971 8.74056 15.304Z" fill="white"/>
|
||||
<path d="M28.8581 30.9538C28.3031 33.812 26.6106 36.9474 24.4461 39.084C21.9488 41.5257 19.5903 42.7468 15.4836 43.6347C14.5125 43.8568 14.457 44.689 15.2617 46.9922C16.76 51.3207 20.4505 54.6782 24.9456 55.7328C25.8613 55.9546 27.4152 56.0379 29.0246 55.9546C31.2445 55.8437 31.8826 55.6772 33.6862 54.817C37.2102 53.1522 39.5686 50.4884 40.7897 46.8533C41.3169 45.3274 41.3723 44.5781 41.289 41.9699C41.2058 39.084 41.1504 38.8066 40.1514 36.8088C38.4587 33.3402 35.1291 30.5378 31.7717 29.7053C28.9414 29.0116 29.2465 28.8728 28.8581 30.9538Z" fill="white"/>
|
||||
<path d="M61.3618 55.9863V12.086H67.7603V18.7214L66.99 17.181C68.175 15.3642 69.7549 13.9423 71.7297 12.9154C73.7045 11.8885 75.9557 11.375 78.4837 11.375C81.5249 11.375 84.25 12.1057 86.6593 13.5671C89.1081 15.0284 91.0238 17.023 92.4062 19.5509C93.8279 22.0786 94.5389 24.9222 94.5389 28.0821C94.5389 31.2417 93.8279 34.0855 92.4062 36.6133C91.0238 39.1411 89.1279 41.1554 86.7186 42.6562C84.3092 44.1176 81.5643 44.8482 78.4837 44.8482C75.9952 44.8482 73.7242 44.3347 71.6705 43.3079C69.6561 42.281 68.0961 40.7998 66.99 38.8645L68.0566 37.6205V55.9863H61.3618ZM77.8318 38.6276C79.7277 38.6276 81.4062 38.1734 82.8676 37.2649C84.329 36.3565 85.4745 35.1124 86.3038 33.5326C87.1728 31.9131 87.6073 30.0964 87.6073 28.0821C87.6073 26.0678 87.1728 24.2706 86.3038 22.6908C85.4745 21.111 84.329 19.8667 82.8676 18.9583C81.4062 18.0499 79.7277 17.5957 77.8318 17.5957C75.9754 17.5957 74.2969 18.0499 72.7961 18.9583C71.3347 19.8667 70.1696 21.111 69.3006 22.6908C68.4711 24.2706 68.0566 26.0678 68.0566 28.0821C68.0566 30.0964 68.4711 31.9131 69.3006 33.5326C70.1696 35.1124 71.3347 36.3565 72.7961 37.2649C74.2969 38.1734 75.9754 38.6276 77.8318 38.6276Z" fill="white"/>
|
||||
<path d="M108.87 44.8482C106.698 44.8482 104.782 44.4731 103.124 43.7226C101.504 42.9328 100.24 41.8662 99.3319 40.5235C98.4235 39.1411 97.9692 37.5217 97.9692 35.6654C97.9692 33.9276 98.3445 32.3673 99.0948 30.9851C99.8849 29.6027 101.089 28.4374 102.709 27.4897C104.328 26.5417 106.362 25.8702 108.811 25.4754L119.949 23.6387V28.9114L110.115 30.6296C108.337 30.9454 107.034 31.5183 106.204 32.3476C105.375 33.1376 104.96 34.1645 104.96 35.4285C104.96 36.6528 105.414 37.6599 106.323 38.4499C107.271 39.2003 108.475 39.5755 109.937 39.5755C111.754 39.5755 113.333 39.1805 114.676 38.3905C116.059 37.6007 117.125 36.5541 117.875 35.2506C118.626 33.9077 119.001 32.4265 119.001 30.8072V22.5723C119.001 20.9923 118.409 19.7088 117.224 18.7214C116.079 17.6945 114.538 17.181 112.603 17.181C110.825 17.181 109.265 17.655 107.922 18.6029C106.619 19.5114 105.651 20.6962 105.019 22.1576L99.4504 19.373C100.043 17.7932 101.01 16.4108 102.353 15.2259C103.696 14.0015 105.256 13.0536 107.034 12.3822C108.851 11.7107 110.766 11.375 112.78 11.375C115.308 11.375 117.54 11.849 119.475 12.7969C121.45 13.7448 122.97 15.0679 124.037 16.7663C125.143 18.4251 125.696 20.3604 125.696 22.5723V44.1373H119.297V38.3313L120.66 38.5092C119.91 39.8124 118.942 40.9382 117.757 41.8862C116.612 42.8339 115.288 43.5647 113.788 44.0781C112.326 44.5916 110.687 44.8482 108.87 44.8482Z" fill="white"/>
|
||||
<path d="M131.746 44.1373V12.0859H138.144V18.5436L137.551 17.5956C138.263 15.5023 139.408 14.0014 140.988 13.093C142.567 12.1451 144.463 11.6711 146.675 11.6711H148.63V17.7734H145.846C143.634 17.7734 141.837 18.4645 140.454 19.8469C139.112 21.1898 138.44 23.1252 138.44 25.6529V44.1373H131.746Z" fill="white"/>
|
||||
<path d="M151.434 44.1373V12.0859H158.129V44.1373H151.434ZM154.781 7.70183C152.933 7.70183 151.434 6.20318 151.434 4.35449V3.34733C151.434 1.49864 152.933 0 154.781 0C156.63 0 158.129 1.49864 158.129 3.34733V4.35449C158.129 6.20318 156.63 7.70183 154.781 7.70183Z" fill="white"/>
|
||||
<path d="M178.041 44.4928C174.683 44.4928 172.077 43.5448 170.22 41.649C168.364 39.7531 167.436 37.0872 167.436 33.6509V18.1288H161.808V12.0859H162.696C164.197 12.0859 167.436 12.823 167.436 11.5062C167.436 10.1894 167.436 8.31859 167.436 6.81773V4.7395H174.131V12.0859H181.418V18.1288H174.131V33.3546C174.131 34.4607 174.308 35.4084 174.664 36.1984C175.019 36.949 175.592 37.5414 176.382 37.9759C177.172 38.3707 178.199 38.5683 179.463 38.5683C179.779 38.5683 180.134 38.5485 180.529 38.5091C180.924 38.4696 181.299 38.4301 181.655 38.3904V44.1372C181.102 44.2162 180.49 44.2952 179.818 44.3743C179.147 44.4533 178.554 44.4928 178.041 44.4928Z" fill="white"/>
|
||||
<path d="M186.411 44.1373V12.0859H193.106V44.1373H186.411ZM189.759 7.70183C187.91 7.70183 186.411 6.20318 186.411 4.35449V3.34733C186.411 1.49864 187.91 0 189.759 0C191.607 0 193.106 1.49864 193.106 3.34733V4.35449C193.106 6.20318 191.607 7.70183 189.759 7.70183Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.0 KiB |
Reference in New Issue
Block a user