mirror of
https://github.com/qdrant/landing_page.git
synced 2026-09-28 23:48:31 +02:00
New Design (#640)
* new design dir
* build script
* build script
* Implement new design (#706)
* initial basic set up
* add customers section
* add core features section
* add customer-stories section
* create common link component
* add docker deploy section
* add vectors section
* minor tweaks
* add footer component
* add use cases page
* general improvements
* add controls to customer stories section
* use mobile first approach
* minor tweaks
* small fix
* add menu mobile
* align breakpoints with Bootstrap
* expand menu items and add menu icos
---------
Co-authored-by: Nik Shemel <nikita_shershnev@hotmail.com>
* Link hover effect (#739)
* moved icons to the assets dir
* styles for link
* better link animation, added modifiers and updated links on the main page
* fix
* improved arrow animation without js debouncing
* fix
* npm run format
* Hover effects for some links and cards (#744)
* inline links hover
* no underline by default, will add it only in articles later
* more hovers
* reusable card styles
* fix
* Fix top header and add some visual effects (#749)
* fix top banner on mobile and add star background pattern
* add more visual effects
* update vectors image blur effect
---------
Co-authored-by: Nik Shemel <nikita_shershnev@hotmail.com>
* Updated styles for docker commands to make copying more user-friendly (#750)
* updated styles for docker commans to make copying more user friendly
* npm run format
* Add feature overview cards (#753)
* add feature overview cards
* fix
* Hero image styles and optimization (#756)
* hero image
* optimized hero image for different rezolutions
* image source from md file, fixes
* mobile fix
* removed too small img
* Add grid layout (#752)
* add grid template
* use bootstrap grid main page
* small tweaks
* fix
* fix grid layout
* polish main page
* format code
---------
Co-authored-by: Nik Shemel <nikita_shershnev@hotmail.com>
* add qdrant vector database page (#757)
* add qdrant vector database page
* fix
* add get started small block
* format code
* fix
---------
Co-authored-by: trean <trean.mi@gmail.com>
* Prettier for Hugo templates (#758)
* better formatting for hugo templates
* npm run format
* add enterprise solutions page (#762)
* add enterprise solutions page
* fix
* customers logos animation (#763)
* use cases page (#760)
* use cases page
* fix use cases layout
* small tweaks
---------
Co-authored-by: Nik Shemel <nikita_shershnev@hotmail.com>
* Replaced horizontal sections paddings with customized .container padding (#764)
* replaced horizontal sections paddings with customized .container padding
* updated new files
* redundant whitespace
* make asset file names lowercase
* Content structure refactoring (#766)
* refactor top-banner content source
* refactor menu content source
* refactor menu-mobile content source
* refactor hero content source
* refactor main page & get-started content source
* refactor footer content source
* refactor enterprise-solutions content source
* refactor qdrant-vector-database content source
* structure pages content
* format code
* add demos page (#768)
* add demos page
* add interactive tutorials section
---------
Co-authored-by: Nik Shemel <nikita_shershnev@hotmail.com>
* add qdrant cloud page (#767)
* add qdrant cloud page
* add new blocks and refactor
* fix
* fix
* delete wrapper
* add hybrid cloud page (#769)
* add hybrid cloud page
* fix
* delete wrapper
* run format
---------
Co-authored-by: trean <trean.mi@gmail.com>
* add private cloud page (#773)
* add private cloud page
* delete wrapper
* add pricing page (#777)
* add pricing page
* add and fix some blocks
* fix
* delete empty file
* fix
* finished Hybrid-Cloud page and improved other pages (#782)
* Add blog page (#789)
* add blog page
* fix
* fix
* fix
* fix
* Hybrid cloud landing launch preparation (#791)
* moved img dir from assets to static
* moved styles for the hybrid cloud page to the separate file
* replaced png with svg, made images not interactable
* updated head with title, favicons, seo
* favicons files
* npm run format
* removed unused files
* Svg instead png and hot-fix (#794)
* moved new images to static
* fixes
* npm run format
* added global base of, removed baseof from hybrid cloud, moved code to the list layout
* npm run format
* fix
* moved icons to static dir (#797)
* add qdrant blog post page (#795)
* add qdrant blog post page
* fix
* Fix core features section (#799)
* fix for core features section
* fix cloud natve card
* google analytis and gtm (#806)
* About us page (#801)
* about us page
* add leadership section
* add investors section
* add open roles section
* add more component to the about page
* our story component
* fix carousel position on the xl screen size
---------
Co-authored-by: Nik Shemel <nikita_shershnev@hotmail.com>
* Add contact pages (#815)
* Add Not-found Page (#816)
* Add Articles Page and Article-Post Page (#810)
* Add Articles Page and Article-Post Page
* fix
* custom gutters (#812)
* fix
---------
Co-authored-by: trean <trean.mi@gmail.com>
* Add Advanced-search Page (#825)
* Add Advanced-search Page
* fix
* fix format
* Customers review animation (#798)
* splide carousel on the main page
* npm run format
* fix
* buttons fix
* moved content of baseof files to lists, so that all pages used the default layout (#831)
* Add Recommendations page (#833)
* Popup for the desktop submenu (#832)
* popup for the desktop submenu
* section link
* menu urls
* open external menu links in a new tab
* Changed background icons to img so that they are pre-loaded and don't cause glitches when the submenu first appears
* Add RAG and Data-Analysis Pages (#839)
* Add RAG and Data-Analysis Pages
* fix
* Footer links and form (#838)
* updated footer
* hubspot form in the footer
* fix IDs
* submitted message alingn
* fix
* removed unused .md
* Revert "removed unused .md"
This reverts commit e6406a701b.
* Moved 404 page to layouts root (#841)
* moved 404 page to laouts root
* removed unused .md
* format
* Move updates from hc landing (#842)
* fixed scheme image
* fix
* cookie banner and base
* new preview
* fix
* upd seo title, description, keywords
* moved fonts
* youtube video
* format
* Contac forms from Hubspot (#843)
* adjusted the form partial to reuse
* hubspot contact form
* fixes
* format
* error messages fixes
* Single page default layout, article content partial, table (#846)
* single page default layout, article content partial, table
* fix
* fix
* Code snippets for articles, blog, docs (#847)
* code highlight
* import highlight scss
* code copy button and highlight styles
* fix highlight
* code snippet tabs
* changes in lang switcher
* changes to fix mobile view
* no scrollbar
* Article and blog pages update (#850)
* returned input
* articles, blog pages: a link to post, pagination
* format
* a form in blog hero
* subscribe banner, fixes for hubspot styles
* overall fixes, links
* page-search
* format
* mobile fixes
* fix search modal and pagination
* removed todos comments
---------
Co-authored-by: generall <andrey@vasnetsov.com>
* Some links and fixes (#853)
* links and fixes
* links and menus adjustments
* inline code highlight only inside article tag
* demos and tutorials links and fixes
* rag page fixes
* links, hidden non existing links on the main
* mobile
* hidden menu links
* Centered article post layout (#860)
* centered layout for article posts and a separate partial for social share buttons
* fix
* mathjax support
* format
* links, small fixes (#859)
* Add Documentation page (#861)
* create menu structure
* add docs menu
* minor tweaks
* add table contents
* add article
* fix
* add text trim and indentation
* fix
---------
Co-authored-by: Nik Shemel <nikita_shershnev@hotmail.com>
* breadcrumbs (#865)
* breadcrumbs
* post font-weight
* align
* ajusted layout to breadcrumbs
* Small fixes (#869)
* 6th tutorial card
* fixes
* some fixes
* tutorials links
* Docs update (#874)
* tables, images, figures
* aside alerts in a separate file
* alerts icons
* search button
* moved feedback buttons to the separate partials, added on click behavior, added github links
* dark theme of the search modal, separate css for docs section
* added anchor.js
* format
* Overall fixes (#876)
* top level links in the mobile menu
* moved breackpoint to lg at some places
* moved breackpoint to lg at some places
* blockquote
* format
* About us photo (#878)
* added a leadership photo
* stars
* hidden form header
* Benchmarks in new design (#857)
* benchmark list layout
* single page layout for benchmarks
* format
* script fixes
* benchmark list layout
* uninstal local chart.js
* benchmark layout fixes
* benchmarks style fixes
* format
---------
Co-authored-by: generall <andrey@vasnetsov.com>
* Overall fixes (#880)
* code snippets scroll bar
* global scrollbar
* fixes
* fixes
* upd CI
* upd CI
* upd CI
* move preview images to global static
* Fixed an issue with disappeared articles (#881)
* removed an excluding featured articles, increased number of articles per a page
* urlquery
* breadcrumbs url trailing slash
* fix link
* site map exclude upd, urls upd (#882)
* fix logo with text
* Article preview (#883)
* moved archetypes
* article preivew
* format
* fix
* rss
* Fixes (#888)
* fix links on qdrant-vector-database page
* update rag page
* update links
* resolve enterprise solutions
* demos, pricing
* fix link
* qdrant-post__preview
* fix
* Always visible menu (#895)
* replace built-for-perfomance.svg
* site-header partial, fixed menu
* format
* fix
* mobile fix
* Small refactoring and content (#896)
* moved some js to the file
* position fixed for github stars
* quotient logo
* soc2 logo, customer review
* hero subtitle
* hide cloud video section and run format (#898)
* Redirects for CMS authentication
* scroll to anchor (#901)
* fix
* gh stars manual update
* feat: CMD + K to search - New Design (#909)
* remove glg and add discrod and X to logos
---------
Co-authored-by: generall <andrey@vasnetsov.com>
Co-authored-by: Mikita Shershneu <52164620+nshershnev@users.noreply.github.com>
Co-authored-by: Nik Shemel <nikita_shershnev@hotmail.com>
Co-authored-by: nastyapash <38438810+nastyapash@users.noreply.github.com>
Co-authored-by: Anush <anushshetty90@gmail.com>
This commit is contained in:
trean
co-authored by
Nik Shemel
generall
Mikita Shershneu
nastyapash
Anush
Nik Shemel
generall
Mikita Shershneu
nastyapash
Anush
parent
266015adb0
commit
1f8607334b
@@ -0,0 +1,4 @@
|
||||
dist
|
||||
build
|
||||
node_modules
|
||||
**/*.md
|
||||
@@ -0,0 +1,13 @@
|
||||
{
|
||||
"singleQuote": true,
|
||||
"printWidth": 120,
|
||||
"plugins": ["prettier-plugin-go-template"],
|
||||
"overrides": [
|
||||
{
|
||||
"files": ["*.html"],
|
||||
"options": {
|
||||
"parser": "go-template"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
## Building, transpiling and running the project
|
||||
|
||||
Project uses Hugo build-in pipes to transpile and minify assets.
|
||||
|
||||
Pre-requisites:
|
||||
- Dart Sass
|
||||
|
||||
### Install Dart Sass
|
||||
|
||||
You can [download](https://github.com/sass/dart-sass/releases/) a package for your OS from [Sass github](https://github.com/sass/dart-sass/releases/) and [add it to your PATH](https://www.google.com/search?q=add+path+variable).
|
||||
|
||||
Don't forget to restart your terminal after adding Dart Sass to your PATH.
|
||||
|
||||
#### Troubleshooting
|
||||
|
||||
Run the following commands:
|
||||
|
||||
```bash
|
||||
hugo env | grep "dart-sass"
|
||||
|
||||
sass --embedded --version
|
||||
```
|
||||
|
||||
And check that both commands output the same version of Dart Sass. If not, you may have several versions of Dart Sass installed on your system.
|
||||
|
||||
Don't forget to restart your terminal after adding Dart Sass to your PATH.
|
||||
|
||||
Don't use node-sass, it's incompatible.
|
||||
|
||||
@@ -0,0 +1,29 @@
|
||||
// Configuration
|
||||
@import 'bootstrap/scss/functions';
|
||||
@import 'bootstrap/scss/variables';
|
||||
@import 'bootstrap/scss/variables-dark';
|
||||
@import 'theme-variables';
|
||||
@import 'bootstrap/scss/maps';
|
||||
@import 'bootstrap/scss/mixins';
|
||||
@import 'bootstrap/scss/utilities';
|
||||
|
||||
// Layout & components
|
||||
@import 'bootstrap/scss/root';
|
||||
@import 'bootstrap/scss/reboot';
|
||||
@import 'bootstrap/scss/type';
|
||||
@import 'bootstrap/scss/containers';
|
||||
@import 'bootstrap/scss/grid';
|
||||
@import 'bootstrap/scss/tables';
|
||||
@import 'bootstrap/scss/images';
|
||||
@import 'bootstrap/scss/forms';
|
||||
@import 'bootstrap/scss/buttons';
|
||||
@import 'bootstrap/scss/transitions';
|
||||
@import 'bootstrap/scss/dropdown';
|
||||
@import 'bootstrap/scss/button-group';
|
||||
@import 'bootstrap/scss/popover';
|
||||
|
||||
// Helpers
|
||||
@import 'bootstrap/scss/helpers';
|
||||
|
||||
// Utilities
|
||||
@import 'bootstrap/scss/utilities/api';
|
||||
@@ -0,0 +1,8 @@
|
||||
@import 'components/buttons';
|
||||
@import 'components/card';
|
||||
@import 'components/input';
|
||||
@import 'components/post';
|
||||
@import 'components/utilites';
|
||||
@import 'components/copy-btn';
|
||||
@import 'components/lang-switcher';
|
||||
@import 'components/alerts';
|
||||
@@ -0,0 +1,46 @@
|
||||
@import 'components/buttons';
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#cookit {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
padding: 0.6rem 2rem;
|
||||
display: flex;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
#cookit #cookit-container {
|
||||
@extend .container;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: end;
|
||||
align-items: center;
|
||||
@include media-breakpoint-up(xl) {
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
#cookit #cookit-container > * {
|
||||
margin: 0.4rem;
|
||||
}
|
||||
|
||||
#cookit #cookit-container p {
|
||||
line-height: 1.4rem;
|
||||
}
|
||||
|
||||
#cookit #cookit-container a {
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
#cookit #cookit-container #cookit-button {
|
||||
@extend .button;
|
||||
@extend .button_contained;
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
.has-jax {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
background: inherit !important;
|
||||
border: none !important;
|
||||
font-size: 100%;
|
||||
max-width: 100%;
|
||||
overflow-x: auto;
|
||||
}
|
||||
@@ -0,0 +1,177 @@
|
||||
/**
|
||||
* @license
|
||||
*
|
||||
* Font Family: Satoshi
|
||||
* Designed by: Deni Anggara
|
||||
* URL: https://www.fontshare.com/fonts/satoshi
|
||||
* © 2024 Indian Type Foundry
|
||||
*
|
||||
* Font Styles:
|
||||
* Satoshi Variable(Variable font)
|
||||
* Satoshi Variable Italic(Variable font)
|
||||
* Satoshi Light
|
||||
* Satoshi Light Italic
|
||||
* Satoshi Regular
|
||||
* Satoshi Italic
|
||||
* Satoshi Medium
|
||||
* Satoshi Medium Italic
|
||||
* Satoshi Bold
|
||||
* Satoshi Bold Italic
|
||||
* Satoshi Black
|
||||
* Satoshi Black Italic
|
||||
*
|
||||
*/
|
||||
|
||||
/**
|
||||
* This is a variable font
|
||||
* You can controll variable axes as shown below:
|
||||
* font-variation-settings: 'wght' 900.0;
|
||||
*
|
||||
* available axes:
|
||||
|
||||
* 'wght' (range from 300.0 to 900.0)
|
||||
|
||||
*/
|
||||
|
||||
@font-face {
|
||||
font-family: 'Satoshi';
|
||||
src:
|
||||
url('/fonts/satoshi/satoshi-variable.woff2') format('woff2'),
|
||||
url('/fonts/satoshi/satoshi-variable.woff') format('woff'),
|
||||
url('/fonts/satoshi/satoshi-variable.ttf') format('truetype');
|
||||
font-weight: 300 900;
|
||||
font-display: swap;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/**
|
||||
* This is a variable font
|
||||
* You can controll variable axes as shown below:
|
||||
* font-variation-settings: 'wght' 900.0;
|
||||
*
|
||||
* available axes:
|
||||
|
||||
* 'wght' (range from 300.0 to 900.0)
|
||||
|
||||
*/
|
||||
|
||||
@font-face {
|
||||
font-family: 'Satoshi';
|
||||
src:
|
||||
url('/fonts/satoshi/satoshi-variableitalic.woff2') format('woff2'),
|
||||
url('/fonts/satoshi/satoshi-variableitalic.woff') format('woff'),
|
||||
url('/fonts/satoshi/satoshi-variableitalic.ttf') format('truetype');
|
||||
font-weight: 300 900;
|
||||
font-display: swap;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Satoshi';
|
||||
src:
|
||||
url('/fonts/satoshi/satoshi-light.woff2') format('woff2'),
|
||||
url('/fonts/satoshi/satoshi-light.woff') format('woff'),
|
||||
url('/fonts/satoshi/satoshi-light.ttf') format('truetype');
|
||||
font-weight: 300;
|
||||
font-display: swap;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Satoshi';
|
||||
src:
|
||||
url('/fonts/satoshi/satoshi-lightitalic.woff2') format('woff2'),
|
||||
url('/fonts/satoshi/satoshi-lightitalic.woff') format('woff'),
|
||||
url('/fonts/satoshi/satoshi-lightitalic.ttf') format('truetype');
|
||||
font-weight: 300;
|
||||
font-display: swap;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Satoshi';
|
||||
src:
|
||||
url('/fonts/satoshi/satoshi-regular.woff2') format('woff2'),
|
||||
url('/fonts/satoshi/satoshi-regular.woff') format('woff'),
|
||||
url('/fonts/satoshi/satoshi-regular.ttf') format('truetype');
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Satoshi';
|
||||
src:
|
||||
url('/fonts/satoshi/satoshi-italic.woff2') format('woff2'),
|
||||
url('/fonts/satoshi/satoshi-italic.woff') format('woff'),
|
||||
url('/fonts/satoshi/satoshi-italic.ttf') format('truetype');
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Satoshi';
|
||||
src:
|
||||
url('/fonts/satoshi/satoshi-medium.woff2') format('woff2'),
|
||||
url('/fonts/satoshi/satoshi-medium.woff') format('woff'),
|
||||
url('/fonts/satoshi/satoshi-medium.ttf') format('truetype');
|
||||
font-weight: 500;
|
||||
font-display: swap;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Satoshi';
|
||||
src:
|
||||
url('/fonts/satoshi/satoshi-mediumitalic.woff2') format('woff2'),
|
||||
url('/fonts/satoshi/satoshi-mediumitalic.woff') format('woff'),
|
||||
url('/fonts/satoshi/satoshi-mediumitalic.ttf') format('truetype');
|
||||
font-weight: 500;
|
||||
font-display: swap;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Satoshi';
|
||||
src:
|
||||
url('/fonts/satoshi/satoshi-bold.woff2') format('woff2'),
|
||||
url('/fonts/satoshi/satoshi-bold.woff') format('woff'),
|
||||
url('/fonts/satoshi/satoshi-bold.ttf') format('truetype');
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Satoshi';
|
||||
src:
|
||||
url('/fonts/satoshi/satoshi-bolditalic.woff2') format('woff2'),
|
||||
url('/fonts/satoshi/satoshi-bolditalic.woff') format('woff'),
|
||||
url('/fonts/satoshi/satoshi-bolditalic.ttf') format('truetype');
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Satoshi';
|
||||
src:
|
||||
url('/fonts/satoshi/satoshi-black.woff2') format('woff2'),
|
||||
url('/fonts/satoshi/satoshi-black.woff') format('woff'),
|
||||
url('/fonts/satoshi/satoshi-black.ttf') format('truetype');
|
||||
font-weight: 900;
|
||||
font-display: swap;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Satoshi';
|
||||
src:
|
||||
url('/fonts/satoshi/satoshi-blackitalic.woff2') format('woff2'),
|
||||
url('/fonts/satoshi/satoshi-blackitalic.woff') format('woff'),
|
||||
url('/fonts/satoshi/satoshi-blackitalic.ttf') format('truetype');
|
||||
font-weight: 900;
|
||||
font-display: swap;
|
||||
font-style: italic;
|
||||
}
|
||||
@@ -0,0 +1,201 @@
|
||||
@use 'helpers/functions' as *;
|
||||
|
||||
$neutral-10: #090e1a;
|
||||
$neutral-20: #161e33;
|
||||
$neutral-30: #28324d;
|
||||
$neutral-40: #3d4866;
|
||||
$neutral-50: #576280;
|
||||
$neutral-60: #717c99;
|
||||
$neutral-70: #8f98b2;
|
||||
$neutral-80: #b4bacc;
|
||||
$neutral-90: #d4d9e6;
|
||||
$neutral-94: #e1e5f0;
|
||||
$neutral-98: #f0f3fa;
|
||||
$neutral-100: #ffffff;
|
||||
|
||||
$primary-10: #40000e;
|
||||
$primary-20: #67001b;
|
||||
$primary-30: #91012a;
|
||||
$primary-40: #be003a;
|
||||
$primary-50: #dc244c;
|
||||
$primary-60: #ff516b;
|
||||
$primary-70: #ff8792;
|
||||
$primary-80: #ffb2b7;
|
||||
$primary-90: #ffdadb;
|
||||
|
||||
$secondary-blue-10: #001848;
|
||||
$secondary-blue-30: #0040a1;
|
||||
$secondary-blue-50: #2f6ff0;
|
||||
$secondary-blue-70: #89a9ff;
|
||||
$secondary-blue-90: #d9e2fe;
|
||||
|
||||
$secondary-violet-10: #24005b;
|
||||
$secondary-violet-30: #5700c9;
|
||||
$secondary-violet-50: #8547ff;
|
||||
$secondary-violet-70: #b99aff;
|
||||
$secondary-violet-90: #eaddff;
|
||||
|
||||
$secondary-teal-10: #002020;
|
||||
$secondary-teal-30: #004f4f;
|
||||
$secondary-teal-50: #038585;
|
||||
$secondary-teal-70: #77e5e5;
|
||||
$secondary-teal-90: #c0f0f0;
|
||||
|
||||
$success-10: #00210f;
|
||||
$success-30: #00522f;
|
||||
$success-50: #008a53;
|
||||
$success-70: #50bf83;
|
||||
$success-90: #befad6;
|
||||
|
||||
$warning-10: #311300;
|
||||
$warning-30: #733501;
|
||||
$warning-50: #e0700d;
|
||||
$warning-70: #ff8d39;
|
||||
$warning-90: #ffdbc7;
|
||||
|
||||
$error-10: #410002;
|
||||
$error-30: #93000d;
|
||||
$error-50: #e02828;
|
||||
$error-70: #fe897f;
|
||||
$error-90: #ffdad6;
|
||||
|
||||
$grays: (
|
||||
'100': $neutral-98,
|
||||
'200': $neutral-94,
|
||||
'300': $neutral-90,
|
||||
'400': $neutral-70,
|
||||
'500': $neutral-50,
|
||||
'600': $neutral-40,
|
||||
'700': $neutral-30,
|
||||
'800': $neutral-20,
|
||||
'900': $neutral-10,
|
||||
);
|
||||
|
||||
$theme-colors: (
|
||||
'primary': $primary-50,
|
||||
'secondary': $secondary-blue-50,
|
||||
'success': $success-50,
|
||||
'info': $secondary-blue-70,
|
||||
'warning': $warning-50,
|
||||
'danger': $error-50,
|
||||
'light': $neutral-98,
|
||||
'dark': $neutral-10,
|
||||
);
|
||||
|
||||
$body-bg: $neutral-98;
|
||||
$link-color: $primary-50;
|
||||
$link-hover-color: $primary-50;
|
||||
$link-decoration: none;
|
||||
// don't use underline for links hover by default
|
||||
|
||||
$input-disabled-color: $neutral-40;
|
||||
$input-disabled-border-color: $neutral-94;
|
||||
$input-disabled-bg: $neutral-20;
|
||||
|
||||
$form-select-bg: $neutral-98;
|
||||
|
||||
$form-select-disabled-bg: $neutral-94;
|
||||
$form-select-disabled-border-color: $input-disabled-border-color;
|
||||
$form-select-disabled-color: $input-disabled-color;
|
||||
|
||||
$table-color: $neutral-10;
|
||||
$table-border-color: $neutral-90;
|
||||
$table-striped-color: $table-color;
|
||||
$table-striped-bg: $neutral-94;
|
||||
|
||||
$font-family-sans-serif: 'Satoshi', 'Helvetica Neue', 'Noto Sans', 'Liberation Sans', Arial, sans-serif,
|
||||
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
$font-family-monospace: 'Azeret Mono', SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
|
||||
monospace;
|
||||
$font-family-base: 'Satoshi', 'Helvetica Neue', 'Noto Sans', 'Liberation Sans', Arial, sans-serif, 'Apple Color Emoji',
|
||||
'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
$font-family-code: 'Azeret Mono', SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
|
||||
|
||||
$font-size-xs: rem(12);
|
||||
$font-size-s: rem(14);
|
||||
$font-size-md: rem(16);
|
||||
$font-size-l: rem(18);
|
||||
$font-size-xl: rem(20);
|
||||
|
||||
$font-sizes-text: (
|
||||
'xs': $font-size-xs,
|
||||
's': $font-size-s,
|
||||
'md': $font-size-md,
|
||||
'l': $font-size-l,
|
||||
'xl': $font-size-xl,
|
||||
);
|
||||
|
||||
// bootstrap
|
||||
$font-size-sm: $font-size-s;
|
||||
$font-size-lg: $font-size-l;
|
||||
|
||||
$font-weight-base: $font-weight-medium;
|
||||
|
||||
$line-height-sm: rem(21);
|
||||
$line-height-lg: rem(27);
|
||||
|
||||
$h1-font-size: rem(64);
|
||||
$h2-font-size: rem(56);
|
||||
$h3-font-size: rem(48);
|
||||
$h4-font-size: rem(40);
|
||||
$h5-font-size: rem(32);
|
||||
$h6-font-size: rem(24);
|
||||
|
||||
$font-sizes: (
|
||||
1: rem(64),
|
||||
2: rem(56),
|
||||
3: rem(48),
|
||||
4: rem(40),
|
||||
5: rem(32),
|
||||
6: rem(24),
|
||||
);
|
||||
|
||||
$headings-font-weight: 700;
|
||||
$headings-line-height: 1.2;
|
||||
|
||||
$display-font-sizes: (
|
||||
1: rem(80),
|
||||
//2: 4.5rem,
|
||||
//3: 4rem,
|
||||
//4: 3.5rem,
|
||||
//5: 3rem,
|
||||
//6: 2.5rem
|
||||
);
|
||||
|
||||
$display-font-weight: 700;
|
||||
|
||||
$container-max-widths: (
|
||||
sm: 540px,
|
||||
md: 720px,
|
||||
lg: 960px,
|
||||
xl: 1134px,
|
||||
xxl: 1134px,
|
||||
);
|
||||
|
||||
$container-padding-x: $grid-gutter-width + $spacer * 0.5;
|
||||
|
||||
$grid-gutter-width: 1.5rem;
|
||||
$gutters: (
|
||||
0: 0,
|
||||
1: $spacer * 0.5,
|
||||
2: $spacer,
|
||||
3: $spacer * 1.5,
|
||||
4: $spacer * 2,
|
||||
5: $spacer * 3,
|
||||
6: $spacer * 4,
|
||||
);
|
||||
|
||||
$spacers: (
|
||||
0: 0,
|
||||
1: $spacer * 0.25,
|
||||
2: $spacer * 0.5,
|
||||
3: $spacer,
|
||||
4: $spacer * 1.5,
|
||||
5: $spacer * 3,
|
||||
6: $spacer * 5,
|
||||
7: $spacer * 7.5,
|
||||
);
|
||||
|
||||
$code-snippet-border-radius: $border-radius * 2;
|
||||
|
||||
$post-content-width: rem(920);
|
||||
@@ -0,0 +1,59 @@
|
||||
@use 'sass:math';
|
||||
@use 'helpers/functions' as *;
|
||||
@import 'satoshi-font';
|
||||
@import 'bootstrap-custom';
|
||||
|
||||
html {
|
||||
&::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: $neutral-50;
|
||||
border-radius: 10px;
|
||||
}
|
||||
&::-webkit-scrollbar-track {
|
||||
background: $neutral-20;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb:hover {
|
||||
background: $neutral-60;
|
||||
}
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: $neutral-50 $neutral-20;
|
||||
}
|
||||
|
||||
.scrolled {
|
||||
.site-header {
|
||||
z-index: 3;
|
||||
}
|
||||
.main-menu {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: $neutral-10;
|
||||
padding-bottom: $spacer * 0.5;
|
||||
@include media-breakpoint-up(xl) {
|
||||
top: -24px;
|
||||
}
|
||||
}
|
||||
|
||||
.top-banner {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@import 'components';
|
||||
@import 'syntax-highlight';
|
||||
@import 'mathjax';
|
||||
@import 'cookit';
|
||||
@import 'partials/logo';
|
||||
@import 'partials/top-banner';
|
||||
@import 'partials/menu-mobile';
|
||||
@import 'partials/menu';
|
||||
@import 'partials/site-header';
|
||||
@import 'partials/link';
|
||||
@import 'partials/hubspot-form';
|
||||
@import 'partials/breadcrumbs';
|
||||
@import 'partials/footer';
|
||||
@import 'partials/not-found';
|
||||
@@ -0,0 +1,24 @@
|
||||
@import 'base';
|
||||
@import 'partials/qdrant-articles-hero';
|
||||
@import 'partials/qdrant-post';
|
||||
@import 'partials/share-buttons';
|
||||
|
||||
.benchmark {
|
||||
&__post-wrapper {
|
||||
width: 100%;
|
||||
max-width: 100% !important;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
&__plot-wrapper {
|
||||
margin-bottom: $spacer * 2;
|
||||
}
|
||||
.table-striped {
|
||||
th,
|
||||
td {
|
||||
font-size: $font-size-sm;
|
||||
}
|
||||
}
|
||||
.breadcrumbs {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
aside[role='alert'],
|
||||
aside[role='status'] {
|
||||
position: relative;
|
||||
padding: $spacer * 1.5 $spacer * 1.5 $spacer * 1.5 $spacer * 3.5;
|
||||
margin-bottom: $spacer;
|
||||
font-size: rem(14);
|
||||
line-height: rem(21);
|
||||
border-radius: $spacer * 0.5;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: $spacer * 1.5;
|
||||
top: $spacer * 1.5;
|
||||
height: rem(20);
|
||||
width: $spacer;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
aside[role='alert'] {
|
||||
background-color: $warning-10;
|
||||
color: $warning-70;
|
||||
a {
|
||||
color: $warning-70;
|
||||
border-bottom: rem(1) solid $warning-70;
|
||||
}
|
||||
&:before {
|
||||
content: '\26A0';
|
||||
font-size: rem(12);
|
||||
}
|
||||
code {
|
||||
color: $warning-70;
|
||||
background-color: $warning-30;
|
||||
}
|
||||
}
|
||||
aside[role='status'] {
|
||||
background-color: $secondary-blue-10;
|
||||
color: $secondary-blue-70;
|
||||
a {
|
||||
color: $secondary-blue-70;
|
||||
border-bottom: rem(1) solid $secondary-blue-70;
|
||||
}
|
||||
&:before {
|
||||
content: '\24D8';
|
||||
font-size: rem(24);
|
||||
}
|
||||
code {
|
||||
color: $secondary-blue-70;
|
||||
background-color: $secondary-blue-30;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,103 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.button {
|
||||
// VARIABLES
|
||||
$gradient: linear-gradient(180deg, $primary-50, $primary-40);
|
||||
|
||||
$height: (
|
||||
sm: 35px,
|
||||
md: 40px,
|
||||
lg: 48px,
|
||||
);
|
||||
|
||||
$padding: (
|
||||
sm: 0 rem(20),
|
||||
md: 0 rem(22),
|
||||
lg: 0 rem(28),
|
||||
);
|
||||
|
||||
// STYLES
|
||||
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-wrap: nowrap;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
color: $neutral-100;
|
||||
text-decoration: none;
|
||||
|
||||
height: map-get($height, md);
|
||||
padding: map-get($padding, md);
|
||||
font-weight: 700;
|
||||
font-size: map-get($font-sizes-text, md);
|
||||
z-index: 1;
|
||||
|
||||
// VARIANTS
|
||||
&_contained {
|
||||
background: $gradient;
|
||||
border: none;
|
||||
box-shadow: 0 2px 1px 0 $primary-60 inset;
|
||||
|
||||
&:hover {
|
||||
background: $primary-50;
|
||||
box-shadow: 0 2px 1px 0 $primary-70 inset;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: $primary-50;
|
||||
box-shadow:
|
||||
0 2px 1px 0 $primary-60 inset,
|
||||
0 0 0 2px rgba(220, 36, 76, 0.4);
|
||||
}
|
||||
|
||||
&.button_disabled,
|
||||
&:disabled {
|
||||
background: $primary-70;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
&_outlined {
|
||||
background: none;
|
||||
box-shadow: 0 0 0 1px $neutral-60;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 0 0 2px #b4bacc;
|
||||
}
|
||||
|
||||
&:active {
|
||||
box-shadow: 0 0 0 2px $neutral-98;
|
||||
}
|
||||
|
||||
&.button_disabled,
|
||||
&:disabled {
|
||||
box-shadow: 0 0 0 1px $neutral-60;
|
||||
opacity: 0.2;
|
||||
}
|
||||
}
|
||||
|
||||
&_disabled {
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
// SIZE
|
||||
&_sm {
|
||||
height: map-get($height, sm);
|
||||
padding: map-get($padding, sm);
|
||||
}
|
||||
|
||||
&_md {
|
||||
height: map-get($height, md);
|
||||
padding: map-get($padding, md);
|
||||
}
|
||||
|
||||
&_lg {
|
||||
height: map-get($height, lg);
|
||||
padding: map-get($padding, lg);
|
||||
font-size: map-get($font-sizes-text, l);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
.card {
|
||||
background-color: $neutral-98;
|
||||
padding: $spacer * 1.5;
|
||||
max-width: 100%;
|
||||
min-height: 100%;
|
||||
border-radius: calc($spacer / 2);
|
||||
border: 1px solid $neutral-90;
|
||||
width: 100%;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
&:hover {
|
||||
border-top: 1px solid $neutral-100;
|
||||
background: $neutral-98;
|
||||
box-shadow:
|
||||
0 10px 20px 0 rgba(22, 30, 51, 0.1),
|
||||
0 1px 2px 0 rgba(22, 30, 51, 0.1);
|
||||
|
||||
.link.link_dark {
|
||||
$link-color: $primary-50;
|
||||
color: $link-color;
|
||||
|
||||
&:before {
|
||||
background: linear-gradient(to right, $link-color 50%, transparent 50%);
|
||||
background-size: 200% 100%;
|
||||
background-position: -100% 0;
|
||||
}
|
||||
|
||||
&:after {
|
||||
background: $link-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
/* copy button for documentation */
|
||||
|
||||
.copy-code {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
top: 8px;
|
||||
|
||||
padding: 4px;
|
||||
background: $neutral-20;
|
||||
border: 0;
|
||||
i {
|
||||
display: block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background-color: $neutral-98;
|
||||
-webkit-mask-image: url('/icons/outline/copy.svg');
|
||||
mask-image: url('/icons/outline/copy.svg');
|
||||
mask-size: contain;
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
}
|
||||
}
|
||||
|
||||
.copy-code:hover {
|
||||
i {
|
||||
background-color: $neutral-94;
|
||||
}
|
||||
}
|
||||
|
||||
.copy-code_light {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.copy-code_light:hover {
|
||||
background: transparent;
|
||||
}
|
||||
@@ -0,0 +1,92 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
// we can not name it .input because it conflicts with hubspot embedded forms
|
||||
// where .input is a wrapper for the input field, not the input field itself
|
||||
|
||||
.q-input {
|
||||
// VARIABLES
|
||||
$height: (
|
||||
md: $spacer * 2.5,
|
||||
lg: $spacer * 3,
|
||||
);
|
||||
|
||||
$padding: (
|
||||
md: rem(7) $spacer,
|
||||
lg: rem(11) $spacer,
|
||||
);
|
||||
|
||||
// STYLES
|
||||
width: 100%;
|
||||
height: map-get($height, md);
|
||||
padding: map-get($padding, md);
|
||||
border: rem(1) solid $neutral-50;
|
||||
border-radius: $spacer * 0.5;
|
||||
background-color: transparent;
|
||||
color: $neutral-94;
|
||||
|
||||
&::placeholder {
|
||||
color: $neutral-70;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border: rem(1) solid $neutral-100;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:focus-visible {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
// VARIANTS
|
||||
&_dark-bg {
|
||||
border-color: $neutral-50;
|
||||
|
||||
&:focus {
|
||||
border-color: $neutral-100;
|
||||
color: $neutral-94;
|
||||
}
|
||||
}
|
||||
|
||||
&_light-bg {
|
||||
border-color: $neutral-70;
|
||||
|
||||
&:focus {
|
||||
border-color: $neutral-20;
|
||||
color: $neutral-20;
|
||||
}
|
||||
}
|
||||
|
||||
// SIZE
|
||||
&_md {
|
||||
height: map-get($height, md);
|
||||
padding: map-get($padding, md);
|
||||
}
|
||||
|
||||
&_lg {
|
||||
height: map-get($height, lg);
|
||||
padding: map-get($padding, lg);
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
&__button {
|
||||
position: relative;
|
||||
padding: rem(7) $spacer * 2.5 rem(7) $spacer;
|
||||
text-align: left;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: rem(12);
|
||||
right: $spacer;
|
||||
height: $spacer;
|
||||
width: $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='M1.33203 4.66666L7.9987 11.3333L14.6654 4.66666' stroke='%23D4D9E6' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,146 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
$tabs-bg-color: $neutral-30;
|
||||
$tabs-bg-color-active: $neutral-20;
|
||||
$tabs-bg-color-hover: $neutral-40;
|
||||
$tabs-font-color: $neutral-90;
|
||||
$tabs-font-color-active: $neutral-90;
|
||||
$tabs-font-color-hover: $neutral-90;
|
||||
|
||||
.lang-tabs {
|
||||
position: relative;
|
||||
|
||||
&__wrapper {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
align-self: stretch;
|
||||
background: $tabs-bg-color;
|
||||
border-top-left-radius: $code-snippet-border-radius;
|
||||
border-top-right-radius: $code-snippet-border-radius;
|
||||
position: relative;
|
||||
overflow-x: scroll;
|
||||
overflow-y: hidden;
|
||||
scrollbar-width: none;
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__overlay {
|
||||
display: block;
|
||||
height: 0.7rem;
|
||||
background: $tabs-bg-color-active;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: -0.7rem;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&__text {
|
||||
display: none;
|
||||
@include media-breakpoint-up(md) {
|
||||
display: inline-block;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
&__icon {
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-color: $tabs-font-color;
|
||||
mask-size: contain;
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
-webkit-mask-image: url('/icons/outline/http.svg');
|
||||
mask-image: url('/icons/outline/http.svg');
|
||||
|
||||
&_python {
|
||||
-webkit-mask-image: url('/icons/outline/python.svg');
|
||||
mask-image: url('/icons/outline/python.svg');
|
||||
}
|
||||
|
||||
&_typescript {
|
||||
-webkit-mask-image: url('/icons/outline/typescript.svg');
|
||||
mask-image: url('/icons/outline/typescript.svg');
|
||||
}
|
||||
|
||||
&_rust {
|
||||
-webkit-mask-image: url('/icons/outline/rust.svg');
|
||||
mask-image: url('/icons/outline/rust.svg');
|
||||
}
|
||||
|
||||
&_java {
|
||||
-webkit-mask-image: url('/icons/outline/java.svg');
|
||||
mask-image: url('/icons/outline/java.svg');
|
||||
}
|
||||
|
||||
&_csharp {
|
||||
-webkit-mask-image: url('/icons/outline/csharp.svg');
|
||||
mask-image: url('/icons/outline/csharp.svg');
|
||||
}
|
||||
}
|
||||
|
||||
&__button {
|
||||
display: flex;
|
||||
height: 44px;
|
||||
padding: 10px 20px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: $tabs-font-color;
|
||||
position: relative;
|
||||
flex-wrap: wrap;
|
||||
|
||||
&:not(.active):hover {
|
||||
background: $tabs-bg-color-hover;
|
||||
color: $tabs-font-color-hover;
|
||||
cursor: pointer;
|
||||
|
||||
.lang-tabs__icon {
|
||||
background-color: $tabs-font-color-hover;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -1px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
background: $tabs-bg-color-hover;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.lang-tabs__icon {
|
||||
background-color: $tabs-font-color-hover;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: $tabs-bg-color-active;
|
||||
color: $tabs-font-color-active;
|
||||
|
||||
.lang-tabs_icon {
|
||||
background-color: $tabs-font-color-active;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -1px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: $tabs-bg-color-active;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
& .lang-tabs__icon {
|
||||
background-color: $tabs-font-color-active;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.post {
|
||||
&-preview {
|
||||
width: 100%;
|
||||
height: 0;
|
||||
padding-bottom: 50%;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
overflow: hidden;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&-title {
|
||||
font-size: $spacer * 1.5;
|
||||
line-height: rem(34);
|
||||
color: $neutral-20;
|
||||
margin-bottom: rem(12);
|
||||
}
|
||||
|
||||
&-description {
|
||||
display: -webkit-box;
|
||||
max-height: $spacer * 4.5;
|
||||
-webkit-line-clamp: 3;
|
||||
line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: $neutral-30;
|
||||
margin-bottom: rem(12);
|
||||
}
|
||||
|
||||
&-about {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
gap: $spacer * 0.5;
|
||||
font-size: rem(14);
|
||||
line-height: rem(21);
|
||||
color: $neutral-50;
|
||||
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-link:hover {
|
||||
.post-title {
|
||||
color: $primary-50;
|
||||
}
|
||||
|
||||
.post-preview > img {
|
||||
transform: scale(1.1);
|
||||
transition: all 0.25s ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
.no-copy {
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
.no-events {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
// add more utility classes here
|
||||
@@ -0,0 +1,4 @@
|
||||
## What to put in components?
|
||||
|
||||
Components are the building blocks which don't have relations to partials or layouts.
|
||||
They are reusable classes that can be used across different pages.
|
||||
@@ -0,0 +1,7 @@
|
||||
@import 'base';
|
||||
@import 'partials/docs-menu';
|
||||
@import 'partials/documentation';
|
||||
@import 'partials/documentation-article';
|
||||
@import 'partials/table-contents';
|
||||
@import 'partials/feedback';
|
||||
@import 'search/dark-theme';
|
||||
@@ -0,0 +1,6 @@
|
||||
@use 'sass:math';
|
||||
|
||||
@function rem($value) {
|
||||
$remValue: math.div($value, 16) + rem;
|
||||
@return $remValue;
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
@import 'base';
|
||||
@import 'partials/hybrid-cloud-hero';
|
||||
@import 'partials/hybrid-cloud-kubernetes-clusters';
|
||||
@import 'partials/hybrid-cloud-cases';
|
||||
@import 'partials/hybrid-cloud-how-it-works';
|
||||
@import 'partials/hybrid-cloud-features';
|
||||
@import 'partials/hybrid-cloud-video';
|
||||
@import 'partials/hybrid-cloud-get-contacted';
|
||||
@import 'partials/hybrid-cloud-partners';
|
||||
@import 'partials/video';
|
||||
@import 'partials/get-started-small-rocket';
|
||||
@import 'partials/get-started-small-database';
|
||||
@import 'partials/get-started';
|
||||
@import 'partials/customer-list';
|
||||
@@ -0,0 +1,68 @@
|
||||
@import 'base';
|
||||
@import 'partials/customers';
|
||||
@import 'partials/hero';
|
||||
@import 'partials/core-features';
|
||||
@import 'partials/customer-stories';
|
||||
@import 'partials/docker-deploy';
|
||||
@import 'partials/vectors';
|
||||
@import 'partials/integrations';
|
||||
@import 'partials/get-started';
|
||||
@import 'partials/additional-resources';
|
||||
@import 'partials/feature-overview';
|
||||
@import 'partials/qdrant-vector-database-hero';
|
||||
@import 'partials/qdrant-vector-database-use-cases';
|
||||
@import 'partials/get-started-small-rocket';
|
||||
@import 'partials/get-started-small-database';
|
||||
@import 'partials/get-started-blogs';
|
||||
@import 'partials/enterprise-solutions-hero';
|
||||
@import 'partials/enterprise-solutions-use-cases';
|
||||
@import 'partials/testimonial';
|
||||
@import 'partials/enterprise-benefits';
|
||||
@import 'partials/top-and-bottom-overlay';
|
||||
@import 'partials/qdrant-pricing-hero';
|
||||
@import 'partials/qdrant-pricing-calculator';
|
||||
@import 'partials/qdrant-pricing-docker-deploy';
|
||||
@import 'partials/qdrant-pricing-doors-a';
|
||||
@import 'partials/qdrant-pricing-doors-b';
|
||||
@import 'partials/qdrant-pricing-marketplaces';
|
||||
@import 'partials/pricing-door';
|
||||
@import 'partials/get-contacted-with-question';
|
||||
@import 'partials/private-cloud-hero';
|
||||
@import 'partials/private-cloud-about';
|
||||
@import 'partials/private-cloud-get-contacted';
|
||||
@import 'partials/qdrant-cloud-hero';
|
||||
@import 'partials/qdrant-cloud-bento-cards';
|
||||
@import 'partials/qdrant-cloud-marketplaces';
|
||||
@import 'partials/qdrant-pricing-get-contacted';
|
||||
@import 'partials/qdrant-cloud-features-link';
|
||||
@import 'partials/video';
|
||||
@import 'partials/customer-list';
|
||||
@import 'partials/demos';
|
||||
@import 'partials/tutorials';
|
||||
@import 'partials/qdrant-blog-features';
|
||||
@import 'partials/qdrant-blog-posts';
|
||||
@import 'partials/qdrant-blog-hero';
|
||||
@import 'partials/pagination';
|
||||
@import 'partials/newsletter';
|
||||
@import 'partials/qdrant-post';
|
||||
@import 'partials/qdrant-articles-hero';
|
||||
@import 'partials/qdrant-articles-posts';
|
||||
@import 'partials/carousel';
|
||||
@import 'partials/leadership';
|
||||
@import 'partials/open-roles';
|
||||
@import 'partials/investors';
|
||||
@import 'partials/mission';
|
||||
@import 'partials/our-story';
|
||||
@import 'partials/contact-hero';
|
||||
@import 'partials/contact-form';
|
||||
@import 'partials/use-cases-vector-hero';
|
||||
@import 'partials/use-cases-vector-get-started';
|
||||
@import 'partials/use-cases-vector-features';
|
||||
@import 'partials/use-cases-vector-cases';
|
||||
@import 'partials/case-study';
|
||||
@import 'partials/advanced-search-use-cases';
|
||||
@import 'partials/recommendations-api';
|
||||
@import 'partials/retrieval-augmented-generation-integrations';
|
||||
@import 'partials/retrieval-augmented-generation-evaluation';
|
||||
@import 'partials/data-analysis-anomaly-detection';
|
||||
@import 'partials/share-buttons';
|
||||
@@ -0,0 +1,57 @@
|
||||
@use 'sass:math';
|
||||
@use '../helpers/functions' as *;
|
||||
@use '../bootstrap-custom' as bs;
|
||||
|
||||
@mixin base($paddingTop, $paddingTopMobile, $paddingBottom, $paddingBottomMobile, $contentWidth) {
|
||||
padding-top: $paddingTopMobile;
|
||||
padding-bottom: $paddingBottomMobile;
|
||||
background-color: #e1e5f0;
|
||||
|
||||
&__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: rem(40);
|
||||
background: linear-gradient(#161e33, #0e1424);
|
||||
border-radius: rem(16);
|
||||
|
||||
p {
|
||||
margin-bottom: rem(32);
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
text-align: center;
|
||||
color: #f0f3fa;
|
||||
}
|
||||
}
|
||||
|
||||
&__button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@include bs.media-breakpoint-up(lg) {
|
||||
padding-top: $paddingTop;
|
||||
padding-bottom: $paddingBottom;
|
||||
|
||||
&__content {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
padding: rem(40) rem(64);
|
||||
|
||||
p {
|
||||
max-width: $contentWidth;
|
||||
margin-bottom: 0;
|
||||
font-size: rem(24);
|
||||
line-height: rem(34);
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
&__button {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
&__button-mobile {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,99 @@
|
||||
@use 'sass:math';
|
||||
@use '../helpers/functions' as *;
|
||||
@use '../bootstrap-custom' as bs;
|
||||
|
||||
@mixin base(
|
||||
$paddingTop,
|
||||
$paddingTopMobile,
|
||||
$paddingBottom,
|
||||
$paddingBottomMobile,
|
||||
$mainBackground,
|
||||
$blockBackground,
|
||||
$blockBackgroundMobile
|
||||
) {
|
||||
padding-top: $paddingTopMobile;
|
||||
padding-bottom: $paddingBottomMobile;
|
||||
background-color: $mainBackground;
|
||||
|
||||
&__content {
|
||||
position: relative;
|
||||
background: $blockBackground;
|
||||
border-radius: rem(8);
|
||||
overflow: hidden;
|
||||
|
||||
a {
|
||||
margin-bottom: rem(40);
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
padding: 0 rem(17.5);
|
||||
}
|
||||
}
|
||||
|
||||
&__text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__title {
|
||||
padding: rem(40) rem(24) 0 rem(24);
|
||||
margin-bottom: rem(24);
|
||||
font-size: rem(24);
|
||||
line-height: rem(34);
|
||||
text-align: center;
|
||||
color: #f0f3fa;
|
||||
@include bs.media-breakpoint-up(lg) {
|
||||
font-size: rem(32);
|
||||
line-height: rem(38);
|
||||
}
|
||||
}
|
||||
|
||||
&__overlay-top {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: rem(220);
|
||||
height: rem(220);
|
||||
background-image: url('/img/blurred/blurred-light-6.svg');
|
||||
background-position: top;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
@include bs.media-breakpoint-up(md) {
|
||||
padding-top: $paddingTop;
|
||||
padding-bottom: $paddingBottom;
|
||||
|
||||
&__content {
|
||||
background: $blockBackgroundMobile;
|
||||
|
||||
img {
|
||||
padding: 0;
|
||||
width: rem(300);
|
||||
height: rem(210);
|
||||
}
|
||||
|
||||
a {
|
||||
height: rem(40);
|
||||
padding: 0 rem(22);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
text-align: left;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&__text {
|
||||
align-items: flex-start;
|
||||
margin-left: rem(56);
|
||||
}
|
||||
|
||||
&__image {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,98 @@
|
||||
@use 'sass:math';
|
||||
@use '../helpers/functions' as *;
|
||||
@use '../bootstrap-custom' as bs;
|
||||
|
||||
@mixin base(
|
||||
$paddingTop,
|
||||
$paddingTopMobile,
|
||||
$paddingBottom,
|
||||
$paddingBottomMobile,
|
||||
$titleWidth,
|
||||
$titleSize,
|
||||
$titleSizeMobile,
|
||||
$titleHeight,
|
||||
$titleHeightMobile
|
||||
) {
|
||||
background-color: #e1e5f0;
|
||||
padding-bottom: $paddingBottomMobile;
|
||||
padding-top: $paddingTopMobile;
|
||||
|
||||
&__title {
|
||||
margin-bottom: rem(40);
|
||||
font-size: $titleSizeMobile;
|
||||
line-height: $titleHeightMobile;
|
||||
color: #161e33;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__cards {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: rem(32);
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&__card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
margin-bottom: rem(24);
|
||||
}
|
||||
|
||||
h5 {
|
||||
margin-bottom: rem(24);
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
color: #161e33;
|
||||
}
|
||||
}
|
||||
|
||||
&__square-grid-overlay {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@include bs.media-breakpoint-up(lg) {
|
||||
padding-top: $paddingTop;
|
||||
padding-bottom: $paddingBottom;
|
||||
position: relative;
|
||||
|
||||
&__title {
|
||||
max-width: $titleWidth;
|
||||
margin: auto;
|
||||
margin-bottom: rem(80);
|
||||
font-size: $titleSize;
|
||||
line-height: $titleHeight;
|
||||
}
|
||||
|
||||
&__cards {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
gap: rem(75);
|
||||
padding: rem(53) 0;
|
||||
}
|
||||
|
||||
&__card {
|
||||
width: calc(100% / 3 - 50px);
|
||||
}
|
||||
|
||||
&__square-grid-overlay {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: $paddingBottom;
|
||||
width: 100%;
|
||||
height: rem(400);
|
||||
background-image: url('/img/square-grid.png');
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,110 @@
|
||||
@use 'sass:math';
|
||||
@use '../helpers/functions' as *;
|
||||
@use '../bootstrap-custom' as bs;
|
||||
|
||||
@mixin base(
|
||||
$height,
|
||||
$itemWidth: 200px,
|
||||
$total-marquee-items: 6,
|
||||
$visible-marquee-items: 6,
|
||||
$item-padding: 20px,
|
||||
$background-color: #090e1a,
|
||||
$pauseOnHover: false,
|
||||
$speed: 25s,
|
||||
$pseudoElementDisplay: block
|
||||
) {
|
||||
$inner-width: math.div($total-marquee-items, $visible-marquee-items) * 2 * 100%;
|
||||
|
||||
max-width: 100%;
|
||||
text-align: center;
|
||||
height: $height;
|
||||
|
||||
&__container {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
display: $pseudoElementDisplay;
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: rem(80);
|
||||
z-index: 1;
|
||||
|
||||
@include bs.media-breakpoint-up(lg) {
|
||||
width: rem(165);
|
||||
}
|
||||
}
|
||||
&:before {
|
||||
left: 0;
|
||||
background: linear-gradient(90deg, $background-color 0.5%, $background-color 38.79%, rgba(9, 14, 26, 0) 100%);
|
||||
}
|
||||
&:after {
|
||||
right: 0;
|
||||
background: linear-gradient(270deg, $background-color 38.79%, rgba(9, 14, 26, 0) 100%);
|
||||
}
|
||||
}
|
||||
|
||||
&__block {
|
||||
height: $height;
|
||||
display: grid;
|
||||
width: $itemWidth * $visible-marquee-items;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
&__inner {
|
||||
display: block;
|
||||
width: $inner-width;
|
||||
position: absolute;
|
||||
|
||||
& > span {
|
||||
float: left;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
&_to-left {
|
||||
animation: marqueeLeft $speed linear infinite;
|
||||
}
|
||||
|
||||
&_to-right {
|
||||
animation: marqueeRight $speed linear infinite;
|
||||
}
|
||||
}
|
||||
|
||||
&__item {
|
||||
width: $itemWidth - $item-padding * 2;
|
||||
height: $height;
|
||||
display: inline-flex;
|
||||
margin: 0 $item-padding;
|
||||
float: left;
|
||||
transition: all 0.2s ease-out;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes marqueeLeft {
|
||||
0% {
|
||||
left: 0;
|
||||
}
|
||||
100% {
|
||||
left: $inner-width * 0.5 * -1;
|
||||
}
|
||||
}
|
||||
@keyframes marqueeRight {
|
||||
0% {
|
||||
left: $inner-width * 0.5 * -1;
|
||||
}
|
||||
100% {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,60 @@
|
||||
@use '../helpers/functions' as lib;
|
||||
|
||||
@mixin content-image($caption-size, $caption-color, $margin) {
|
||||
img,
|
||||
figure {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
margin: $margin auto;
|
||||
}
|
||||
figcaption,
|
||||
figcaption p {
|
||||
color: $caption-color;
|
||||
font-size: $caption-size;
|
||||
text-align: center;
|
||||
margin-top: $margin;
|
||||
@if ($margin > 1rem) {
|
||||
margin-top: $margin * 0.4;
|
||||
}
|
||||
}
|
||||
figure img {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin transitionAll($ms) {
|
||||
-webkit-transition: all $ms ease;
|
||||
-ms-transition: all $ms ease;
|
||||
-o-transition: all $ms ease;
|
||||
-moz-transition: all $ms ease;
|
||||
transition: all $ms ease;
|
||||
}
|
||||
|
||||
@mixin font-styles($size, $weight, $line-height, $color, $font-family) {
|
||||
font-family: $font-family;
|
||||
font-size: $size;
|
||||
font-style: normal;
|
||||
font-weight: $weight;
|
||||
line-height: $line-height;
|
||||
color: $color;
|
||||
}
|
||||
|
||||
@mixin fixed-height-img($height, $width: auto) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
max-width: $width;
|
||||
min-width: $width;
|
||||
height: $width;
|
||||
overflow: hidden;
|
||||
margin-bottom: 0;
|
||||
& > img {
|
||||
flex-shrink: 0;
|
||||
width: auto;
|
||||
min-width: 100%;
|
||||
min-height: 100%;
|
||||
max-width: none;
|
||||
max-height: 100%;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,100 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.additional-resources {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background-color: $neutral-10;
|
||||
|
||||
padding-top: $spacer * 4;
|
||||
padding-bottom: $spacer * 4;
|
||||
|
||||
&__title {
|
||||
position: relative;
|
||||
margin-bottom: $spacer * 3;
|
||||
font-size: $spacer * 2;
|
||||
line-height: rem(38);
|
||||
color: $neutral-98;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&__cards {
|
||||
position: relative;
|
||||
justify-content: space-between;
|
||||
gap: rem(30);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&__card {
|
||||
&-info {
|
||||
background: linear-gradient($neutral-20, #0e1424);
|
||||
padding-top: $spacer * 1.5;
|
||||
padding-bottom: $spacer * 1.5;
|
||||
padding-left: $spacer * 1.5;
|
||||
padding-right: $spacer * 1.5;
|
||||
border-radius: calc($spacer / 2);
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
|
||||
svg {
|
||||
max-width: rem(24);
|
||||
max-height: rem(24);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__card-title {
|
||||
color: $neutral-98;
|
||||
margin-top: $spacer * 1.5;
|
||||
margin-bottom: $spacer;
|
||||
line-height: rem(34);
|
||||
}
|
||||
|
||||
&__card-content {
|
||||
color: $neutral-70;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
font-size: map-get($font-sizes-text, 's');
|
||||
line-height: rem(21);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&__card-link {
|
||||
color: $neutral-98;
|
||||
font-weight: 500;
|
||||
font-size: map-get($font-sizes-text, 'm');
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
&__cards {
|
||||
justify-content: space-between;
|
||||
gap: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-top: $spacer * 7.5;
|
||||
padding-bottom: $spacer * 7.5;
|
||||
|
||||
&__title {
|
||||
font-size: map-get($font-sizes, 3);
|
||||
line-height: rem(57);
|
||||
margin-bottom: $spacer * 4;
|
||||
}
|
||||
|
||||
&__cards {
|
||||
& > div {
|
||||
width: calc(25% - 4.5px);
|
||||
}
|
||||
}
|
||||
|
||||
&__card {
|
||||
&-info {
|
||||
width: 100%;
|
||||
min-height: rem(333);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.advanced-search-use-cases {
|
||||
padding-top: $spacer * 2.5;
|
||||
padding-bottom: $spacer * 2.5;
|
||||
background-color: $neutral-94;
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 2.5;
|
||||
line-height: $spacer * 3;
|
||||
color: $neutral-20;
|
||||
text-align: center;
|
||||
margin-bottom: $spacer * 2.5;
|
||||
}
|
||||
|
||||
&__card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
padding: $spacer * 2;
|
||||
|
||||
&-image {
|
||||
width: 100%;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
}
|
||||
|
||||
&-title {
|
||||
margin-bottom: $spacer;
|
||||
}
|
||||
|
||||
&-description {
|
||||
color: $neutral-40;
|
||||
margin-bottom: $spacer;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-top: $spacer * 2.5;
|
||||
padding-bottom: $spacer * 5;
|
||||
|
||||
&__title {
|
||||
max-width: rem(920);
|
||||
margin: 0 auto $spacer * 5;
|
||||
font-size: $spacer * 3.5;
|
||||
line-height: rem(67);
|
||||
}
|
||||
|
||||
&__card {
|
||||
height: rem(518);
|
||||
|
||||
&-link {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
.breadcrumbs {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
color: $neutral-60;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@include media-breakpoint-up(xl) {
|
||||
width: $post-content-width;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
&__crumb {
|
||||
display: inline-block;
|
||||
text-transform: capitalize;
|
||||
font-size: $font-size-sm;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
padding-right: 0;
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: 0.38rem;
|
||||
}
|
||||
|
||||
& > a {
|
||||
color: $neutral-60;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.carousel {
|
||||
min-height: rem(240);
|
||||
background-color: $neutral-94;
|
||||
|
||||
&__content {
|
||||
overflow-x: scroll;
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
&__content::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__cards {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: rem(30);
|
||||
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
&__image {
|
||||
min-width: rem(400);
|
||||
aspect-ratio: 5 / 3;
|
||||
height: 100%;
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-bottom: $spacer * 5;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xxl) {
|
||||
&__content {
|
||||
max-width: rem(1102);
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,105 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.case-study {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: $neutral-10;
|
||||
border-radius: $spacer * 0.5;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
&__content {
|
||||
position: relative;
|
||||
padding: $spacer * 2.5 $spacer * 1.5;
|
||||
}
|
||||
|
||||
&__logo {
|
||||
align-self: flex-start;
|
||||
height: rem(64);
|
||||
margin-bottom: $spacer * 1.5;
|
||||
}
|
||||
|
||||
&__title {
|
||||
color: $neutral-98;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
color: $neutral-70;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
}
|
||||
|
||||
&__preview {
|
||||
position: relative;
|
||||
align-self: flex-end;
|
||||
width: calc(100% - 24px);
|
||||
max-width: rem(440);
|
||||
margin-left: $spacer * 1.5;
|
||||
background-image: url('/img/case-study-bg.svg');
|
||||
background-size: 100%;
|
||||
background-position: left top;
|
||||
background-repeat: no-repeat;
|
||||
z-index: 1;
|
||||
|
||||
&-image {
|
||||
width: 100%;
|
||||
padding: rem(28) 0 0 rem(28);
|
||||
}
|
||||
|
||||
&-overlay {
|
||||
position: absolute;
|
||||
left: -20%;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
padding-bottom: 79%;
|
||||
background-image: url('/img/blurred/blurred-light-13.svg');
|
||||
background-position: top;
|
||||
background-size: cover;
|
||||
border-radius: 0 rem(12) 0 0;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
|
||||
&__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: rem(472);
|
||||
padding: $spacer * 4 $spacer * 3 $spacer * 4 $spacer * 5;
|
||||
}
|
||||
|
||||
&__link {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
&__tiitle {
|
||||
width: rem(520);
|
||||
}
|
||||
|
||||
&__description {
|
||||
width: rem(520);
|
||||
//margin-bottom: $spacer * 5;
|
||||
}
|
||||
|
||||
&__preview {
|
||||
&-image {
|
||||
padding: $spacer * 2.5 0 0 $spacer * 2.5;
|
||||
}
|
||||
|
||||
&-overlay {
|
||||
width: rem(597);
|
||||
height: rem(472);
|
||||
left: -150px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,93 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.contact-form {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding: $spacer * 2.5 $spacer * 1.5;
|
||||
border-radius: $spacer * 0.5;
|
||||
background: linear-gradient($neutral-20, #0e1424);
|
||||
color: $neutral-98;
|
||||
|
||||
&__title {
|
||||
margin-bottom: $spacer * 0.5;
|
||||
}
|
||||
|
||||
&__description {
|
||||
margin-bottom: 0;
|
||||
font-size: rem(14);
|
||||
line-height: rem(21);
|
||||
color: $neutral-70;
|
||||
}
|
||||
|
||||
form {
|
||||
$last-row-margin: rem(34);
|
||||
|
||||
display: flex;
|
||||
margin-top: $spacer * 2;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
|
||||
.hs_submit {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-top: $spacer;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
width: 50%;
|
||||
text-align: right;
|
||||
margin-top: $last-row-margin;
|
||||
}
|
||||
|
||||
input[type='submit'] {
|
||||
width: 100%;
|
||||
@include media-breakpoint-up(md) {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
fieldset {
|
||||
&.form-columns-1:has(> .legal-consent-container) {
|
||||
width: auto;
|
||||
margin-bottom: 0;
|
||||
@include media-breakpoint-up(md) {
|
||||
max-width: 50%;
|
||||
min-width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
@include media-breakpoint-up(md) {
|
||||
margin-top: $last-row-margin;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.submitted-message {
|
||||
text-align: center;
|
||||
margin-top: $spacer * 4;
|
||||
}
|
||||
|
||||
.hs_error_rollup {
|
||||
position: absolute;
|
||||
bottom: -20px;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
&__top-overlay {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: rem(220);
|
||||
height: rem(192);
|
||||
background-image: url('/img/blurred/blurred-light-9.png');
|
||||
background-position: top;
|
||||
background-size: cover;
|
||||
border-radius: 0 rem(12) 0 0;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding: $spacer * 3 $spacer * 2.5;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,122 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.contact-hero {
|
||||
padding-top: $spacer * 2.5;
|
||||
padding-bottom: $spacer * 7.5;
|
||||
background-color: $neutral-10;
|
||||
|
||||
&__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacer * 5;
|
||||
}
|
||||
|
||||
&__title,
|
||||
&__sales-title {
|
||||
font-size: $spacer * 2;
|
||||
line-height: rem(38);
|
||||
color: $neutral-98;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
}
|
||||
|
||||
&__description {
|
||||
color: $neutral-70;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
&__card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: $spacer * 0.5;
|
||||
padding: $spacer * 1.5 0;
|
||||
border-top: rem(1) solid $neutral-20;
|
||||
|
||||
&:not(:last-of-type) {
|
||||
margin-bottom: $spacer * 0.5;
|
||||
}
|
||||
|
||||
img {
|
||||
height: $spacer * 1.5;
|
||||
width: $spacer * 1.5;
|
||||
}
|
||||
|
||||
&-title {
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
color: $neutral-98;
|
||||
}
|
||||
|
||||
&-description {
|
||||
font-size: rem(14);
|
||||
line-height: rem(21);
|
||||
color: $neutral-70;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&-link {
|
||||
$link-color: $secondary-blue-50;
|
||||
color: $link-color;
|
||||
|
||||
&:before {
|
||||
background: linear-gradient(to right, $link-color 50%, transparent 50%);
|
||||
background-size: 200% 100%;
|
||||
background-position: -100% 0;
|
||||
}
|
||||
|
||||
&:after {
|
||||
background: $link-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-link-mail {
|
||||
$link-color: $secondary-violet-50;
|
||||
color: $link-color;
|
||||
|
||||
&:before {
|
||||
background: linear-gradient(to right, $link-color 50%, transparent 50%);
|
||||
background-size: 200% 100%;
|
||||
background-position: -100% 0;
|
||||
}
|
||||
|
||||
&:after {
|
||||
background: $link-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-top: $spacer * 5;
|
||||
padding-bottom: $spacer * 5;
|
||||
|
||||
&__content {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
&__info {
|
||||
width: rem(382);
|
||||
}
|
||||
|
||||
&__form {
|
||||
width: rem(600);
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 3;
|
||||
line-height: rem(57);
|
||||
}
|
||||
|
||||
&__sales-title {
|
||||
font-size: $spacer * 2.5;
|
||||
line-height: $spacer * 3;
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,162 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.core-features {
|
||||
background-color: $neutral-94;
|
||||
|
||||
padding-top: $spacer * 4;
|
||||
padding-bottom: $spacer * 4;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&__title {
|
||||
font-size: rem(40);
|
||||
line-height: rem(48);
|
||||
text-align: start;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: map-get($font-sizes-text, 'l');
|
||||
line-height: rem(27);
|
||||
margin-bottom: $spacer * 1.5;
|
||||
max-width: 100%;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
&__card-title {
|
||||
color: $neutral-20;
|
||||
margin-top: $spacer * 1.5;
|
||||
margin-bottom: $spacer;
|
||||
line-height: rem(34);
|
||||
}
|
||||
|
||||
&__cloud-native {
|
||||
@include media-breakpoint-up(xl) {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
&.card {
|
||||
padding-top: 0;
|
||||
padding-right: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
& div:first-child {
|
||||
padding-right: $spacer * 2;
|
||||
padding-top: $spacer * 2;
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-right: rem(122);
|
||||
padding-top: $spacer * 5;
|
||||
}
|
||||
}
|
||||
|
||||
.core-features__card-title {
|
||||
font-size: rem(24);
|
||||
line-height: rem(34);
|
||||
margin-top: 0;
|
||||
margin-bottom: rem(12);
|
||||
}
|
||||
|
||||
.core-features__card-content {
|
||||
font-size: map-get($font-sizes-text, 'l');
|
||||
line-height: rem(27);
|
||||
margin-bottom: rem(12);
|
||||
}
|
||||
}
|
||||
|
||||
&__cloud-native-image {
|
||||
margin-top: $spacer;
|
||||
background: url('/img/qdrant-cloud.png') right bottom no-repeat;
|
||||
background-size: contain;
|
||||
max-width: 100% !important;
|
||||
width: rem(372);
|
||||
height: rem(214);
|
||||
border-radius: 0 0 calc($spacer / 2) 0;
|
||||
aspect-ratio: 1.45/1;
|
||||
align-self: end;
|
||||
}
|
||||
|
||||
&__card-content {
|
||||
color: $neutral-30;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
}
|
||||
|
||||
&__card-link {
|
||||
color: $neutral-20;
|
||||
font-size: map-get($font-sizes-text, 'm');
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-top: $spacer * 6.5;
|
||||
padding-bottom: $spacer * 6.5;
|
||||
|
||||
&__title {
|
||||
font-size: map-get($font-sizes, 2);
|
||||
text-align: center;
|
||||
line-height: rem(67);
|
||||
max-width: rem(920);
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: map-get($font-sizes-text, 'xl');
|
||||
line-height: rem(30);
|
||||
max-width: rem(920);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__cards {
|
||||
margin-left: rem(-15);
|
||||
margin-right: rem(-15);
|
||||
}
|
||||
|
||||
&__cards > div {
|
||||
padding: 0 rem(15);
|
||||
}
|
||||
|
||||
&__card {
|
||||
padding-top: $spacer * 2.5;
|
||||
padding-bottom: $spacer * 2.5;
|
||||
padding-left: $spacer * 2.5;
|
||||
padding-right: $spacer * 2.5;
|
||||
min-height: rem(390);
|
||||
|
||||
svg {
|
||||
max-width: rem(48);
|
||||
max-height: rem(48);
|
||||
}
|
||||
}
|
||||
|
||||
&__cloud-native {
|
||||
padding-top: rem(75);
|
||||
padding-bottom: rem(75);
|
||||
max-width: rem(1110);
|
||||
min-height: rem(420);
|
||||
padding-left: $spacer * 3;
|
||||
padding-right: $spacer * 3;
|
||||
margin-top: $spacer * 5;
|
||||
|
||||
.core-features__card-title {
|
||||
font-size: map-get($font-sizes-text, 'xxl');
|
||||
line-height: rem(48);
|
||||
margin-bottom: $spacer * 1.5;
|
||||
}
|
||||
|
||||
.core-features__card-content {
|
||||
font-size: map-get($font-sizes-text, 'l');
|
||||
line-height: rem(27);
|
||||
margin-bottom: $spacer * 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
&__cloud-native-image {
|
||||
width: rem(540);
|
||||
height: rem(372);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
@use '../helpers/functions' as *;
|
||||
@use '../mixins/marquee' as marquee;
|
||||
|
||||
.customer-list {
|
||||
padding-top: $spacer * 2.5;
|
||||
padding-bottom: $spacer * 2.5;
|
||||
background-color: $neutral-94;
|
||||
|
||||
&__logos {
|
||||
@include marquee.base(64px, 224px, 15, 15, 52px, $neutral-94, false, 50s, block);
|
||||
}
|
||||
|
||||
&__title {
|
||||
margin-bottom: $spacer * 3;
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
font-weight: 400;
|
||||
color: $neutral-20;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&.dark {
|
||||
padding-top: $spacer * 4;
|
||||
padding-bottom: $spacer * 4;
|
||||
background-color: $neutral-20;
|
||||
|
||||
.customer-list__logos {
|
||||
@include marquee.base(64px, 224px, 15, 15, 52px, $neutral-20, false, 50s, block);
|
||||
}
|
||||
|
||||
.customer-list__title {
|
||||
color: $neutral-98;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-top: $spacer * 4;
|
||||
padding-bottom: $spacer * 4;
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 1.5;
|
||||
line-height: rem(34);
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,161 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.customer-stories {
|
||||
background-color: $neutral-94;
|
||||
|
||||
padding-top: $spacer * 4;
|
||||
padding-bottom: $spacer * 4;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
position: relative;
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: rem(1110);
|
||||
min-width: 100%;
|
||||
margin-bottom: $spacer * 2.5;
|
||||
}
|
||||
|
||||
&__header-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: $spacer;
|
||||
}
|
||||
|
||||
&__controls {
|
||||
display: none;
|
||||
gap: $spacer * 2.5;
|
||||
position: absolute;
|
||||
top: -85px;
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
&__button {
|
||||
border-radius: 8px;
|
||||
outline: none;
|
||||
border: 1px solid $neutral-80;
|
||||
background-color: transparent;
|
||||
width: rem(64);
|
||||
height: rem(64);
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__button-prev svg {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
&__button svg {
|
||||
width: rem(24);
|
||||
height: rem(24);
|
||||
}
|
||||
|
||||
&__button:disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: rem(32);
|
||||
line-height: rem(38);
|
||||
color: $neutral-20;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__cards-wrapper::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__cards {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: $spacer * 2;
|
||||
}
|
||||
|
||||
&__card {
|
||||
padding-top: $spacer * 2;
|
||||
padding-bottom: $spacer * 2;
|
||||
margin-bottom: $spacer * 2;
|
||||
|
||||
min-height: rem(407);
|
||||
|
||||
img {
|
||||
max-width: rem(120);
|
||||
max-height: rem(64);
|
||||
}
|
||||
}
|
||||
|
||||
&__card-footer {
|
||||
display: flex;
|
||||
gap: $spacer;
|
||||
|
||||
img {
|
||||
min-width: rem(48);
|
||||
min-height: rem(48);
|
||||
}
|
||||
}
|
||||
|
||||
&__card-author p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__card-author-name {
|
||||
font-weight: bold;
|
||||
color: $neutral-20;
|
||||
font-size: map-get($font-sizes-text, 's');
|
||||
}
|
||||
|
||||
&__card-author-position {
|
||||
color: $neutral-60;
|
||||
font-size: map-get($font-sizes-text, 's');
|
||||
}
|
||||
|
||||
&__card:last-of-type img {
|
||||
min-width: rem(80);
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-top: $spacer * 2.5;
|
||||
padding-bottom: $spacer * 6;
|
||||
|
||||
&__title {
|
||||
font-size: map-get($font-sizes, 3);
|
||||
line-height: rem(57);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&__controls {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&__header-content {
|
||||
justify-content: space-between;
|
||||
margin-top: 0;
|
||||
height: rem(64);
|
||||
}
|
||||
|
||||
&__cards-wrapper {
|
||||
padding-bottom: $spacer * 1.5;
|
||||
}
|
||||
|
||||
&__cards {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
&__cards {
|
||||
margin-left: rem(-15);
|
||||
margin-right: rem(-15);
|
||||
}
|
||||
.splide {
|
||||
margin-left: -20px;
|
||||
margin-right: -20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
@use '../helpers/functions' as *;
|
||||
@use '../mixins/marquee' as marquee;
|
||||
|
||||
.customers {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: $spacer * 3;
|
||||
padding-top: $spacer * 4;
|
||||
padding-bottom: $spacer * 4;
|
||||
background: $neutral-10;
|
||||
|
||||
&__title {
|
||||
color: $neutral-70;
|
||||
text-align: center;
|
||||
font-size: map-get($font-sizes-text, 'l');
|
||||
margin: 0 auto calc($spacer / 2);
|
||||
}
|
||||
|
||||
&__description {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-left: rem(20);
|
||||
padding-right: rem(20);
|
||||
}
|
||||
|
||||
&__link {
|
||||
color: $primary-60;
|
||||
font-size: map-get($font-sizes-text, 'l');
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.customers__logos {
|
||||
@include marquee.base(64px, 224px, 16, 16, 52px, $neutral-10, false, 50s, block);
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
&__title {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__description {
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
gap: calc($spacer / 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
+47
@@ -0,0 +1,47 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.data-analysis-anomaly-detection {
|
||||
padding-top: $spacer * 4;
|
||||
padding-bottom: $spacer * 4;
|
||||
background-color: $neutral-94;
|
||||
|
||||
&__content {
|
||||
margin-bottom: $spacer * 5;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 2;
|
||||
line-height: rem(38);
|
||||
margin-bottom: $spacer * 1.5;
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&__description {
|
||||
color: $neutral-30;
|
||||
margin-bottom: $spacer * 2.5;
|
||||
}
|
||||
|
||||
&__preview {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-top: $spacer * 6.5;
|
||||
padding-bottom: $spacer * 6.5;
|
||||
|
||||
&__content {
|
||||
margin-bottom: $spacer * 10;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 3;
|
||||
line-height: rem(57);
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,140 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.demos {
|
||||
background-color: $neutral-94;
|
||||
|
||||
padding-top: $spacer * 4;
|
||||
padding-bottom: $spacer * 4;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&__title {
|
||||
font-size: rem(40);
|
||||
line-height: rem(48);
|
||||
text-align: start;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: map-get($font-sizes-text, 'l');
|
||||
line-height: rem(27);
|
||||
margin: 0;
|
||||
max-width: 100%;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
&__cards {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
|
||||
min-width: 100%;
|
||||
row-gap: $spacer * 2;
|
||||
margin-top: ($spacer * 4);
|
||||
}
|
||||
|
||||
&__card-title {
|
||||
color: $neutral-20;
|
||||
margin-top: calc($spacer / 2);
|
||||
margin-bottom: $spacer * 1.5;
|
||||
font-size: rem(24);
|
||||
line-height: rem(34);
|
||||
}
|
||||
|
||||
&__card-description {
|
||||
color: $neutral-30;
|
||||
font-size: rem(16);
|
||||
line-height: rem(24);
|
||||
margin-bottom: $spacer * 1.5;
|
||||
}
|
||||
|
||||
&__card-description p {
|
||||
margin-bottom: $spacer * 1.5;
|
||||
}
|
||||
|
||||
&__card-description p:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&__card-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-top: $spacer * 2.5;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: rem(287);
|
||||
max-height: rem(197);
|
||||
aspect-ratio: 1.46;
|
||||
background-size: contain;
|
||||
background-color: $neutral-98;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
box-shadow: 0px 5.13px 10.25px 0px rgba(22, 30, 51, 0.1);
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-top: $spacer * 7.5;
|
||||
padding-bottom: $spacer * 10;
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: map-get($font-sizes, 2);
|
||||
line-height: rem(67);
|
||||
max-width: rem(445);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: map-get($font-sizes-text, 'xl');
|
||||
max-width: rem(540);
|
||||
line-height: rem(30);
|
||||
}
|
||||
|
||||
&__cards {
|
||||
margin-top: $spacer * 7.5;
|
||||
row-gap: $spacer * 2.5;
|
||||
}
|
||||
|
||||
&__card {
|
||||
flex-direction: row;
|
||||
|
||||
padding-top: $spacer * 4;
|
||||
padding-left: $spacer * 5;
|
||||
padding-bottom: $spacer * 4;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
&__card-content {
|
||||
max-width: rem(400);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__card-title {
|
||||
margin-top: 0;
|
||||
font-size: rem(32);
|
||||
line-height: rem(38);
|
||||
}
|
||||
|
||||
&__card-description {
|
||||
font-size: rem(16);
|
||||
line-height: rem(24);
|
||||
}
|
||||
|
||||
&__card-image {
|
||||
margin: 0;
|
||||
max-width: rem(560);
|
||||
max-height: rem(384);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,115 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.docker-deploy {
|
||||
background-color: $neutral-94;
|
||||
|
||||
padding-top: $spacer * 4;
|
||||
padding-bottom: $spacer * 4;
|
||||
|
||||
&__content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
row-gap: rem(40);
|
||||
}
|
||||
|
||||
&__description {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: rem(32);
|
||||
line-height: rem(38);
|
||||
color: $neutral-20;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: map-get($font-sizes-text, 'l');
|
||||
line-height: rem(27);
|
||||
margin-top: $spacer * 1.5;
|
||||
margin-bottom: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__link {
|
||||
color: $primary-50;
|
||||
font-size: $font-size-xl;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
&__preview {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__image {
|
||||
width: 100%;
|
||||
height: rem(229);
|
||||
max-width: rem(335);
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
position: relative;
|
||||
padding-top: rem(54);
|
||||
padding-left: rem(50);
|
||||
padding-bottom: rem(80);
|
||||
padding-right: rem(50);
|
||||
}
|
||||
|
||||
&__image code {
|
||||
color: $neutral-98;
|
||||
font-size: rem(9);
|
||||
line-height: rem(14);
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
flex-direction: row;
|
||||
padding-top: $spacer * 5;
|
||||
padding-bottom: $spacer * 5;
|
||||
gap: $spacer * 5;
|
||||
|
||||
&__description {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: map-get($font-sizes, 3);
|
||||
line-height: rem(57);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: map-get($font-sizes-text, 'xl');
|
||||
line-height: rem(30);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&__preview {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
&__image {
|
||||
width: rem(584);
|
||||
height: rem(400);
|
||||
max-width: rem(584);
|
||||
padding-top: rem(94);
|
||||
padding-left: rem(107);
|
||||
padding-bottom: rem(80);
|
||||
padding-right: rem(80);
|
||||
}
|
||||
|
||||
&__image code {
|
||||
font-size: rem(15);
|
||||
line-height: rem(24);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,190 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.docs-menu {
|
||||
background-color: $neutral-20;
|
||||
border-top: 1px solid $neutral-30;
|
||||
margin: 0 -16px;
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: rem(15) rem(20);
|
||||
cursor: pointer;
|
||||
|
||||
&.active {
|
||||
.docs-menu__button svg {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
font-weight: 400;
|
||||
color: $neutral-90;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
display: none;
|
||||
padding: $spacer * 1.5 $spacer * 2 rem(12);
|
||||
|
||||
&.active {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&__input {
|
||||
position: relative;
|
||||
|
||||
svg {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: $spacer;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
button {
|
||||
padding-left: $spacer * 2.8;
|
||||
color: $neutral-70;
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-top: 1px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: $spacer;
|
||||
transform: translateY(-50%);
|
||||
background: url('/icons/outline/search-white.svg') no-repeat;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__button {
|
||||
padding: 0;
|
||||
outline: none;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
width: rem(24);
|
||||
height: rem(24);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__links {
|
||||
margin-top: $spacer * 1.5;
|
||||
|
||||
&-title {
|
||||
color: $neutral-98;
|
||||
font-weight: bold;
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
margin: 0 0 $spacer;
|
||||
padding-top: $spacer * 0.5;
|
||||
}
|
||||
|
||||
&-group {
|
||||
padding-bottom: rem(4);
|
||||
|
||||
&-heading {
|
||||
display: block;
|
||||
position: relative;
|
||||
margin-bottom: $spacer * 0.5;
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: $neutral-70;
|
||||
}
|
||||
}
|
||||
|
||||
summary:after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: rem(10);
|
||||
height: rem(10);
|
||||
position: absolute;
|
||||
top: rem(7);
|
||||
right: rem(4);
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.16667 0.916341C3.10476 0.869913 3.03115 0.841641 2.95409 0.834692C2.87702 0.827742 2.79954 0.842391 2.73033 0.876997C2.66112 0.911602 2.60291 0.964797 2.56223 1.03062C2.52155 1.09644 2.5 1.17229 2.5 1.24967V8.74968C2.5 8.82706 2.52155 8.90291 2.56223 8.96873C2.60291 9.03455 2.66112 9.08775 2.73033 9.12235C2.79954 9.15696 2.87702 9.17161 2.95409 9.16466C3.03115 9.15771 3.10476 9.12944 3.16667 9.08301L8.16667 5.33301C8.21842 5.2942 8.26042 5.24387 8.28934 5.18601C8.31827 5.12816 8.33333 5.06436 8.33333 4.99967C8.33333 4.93499 8.31827 4.87119 8.28934 4.81334C8.26042 4.75548 8.21842 4.70515 8.16667 4.66634L3.16667 0.916341Z' fill='%238F98B3'/%3E%3C/svg%3E%0A");
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
&.active {
|
||||
.docs-menu__links-group-heading > a {
|
||||
padding: rem(4) 0 rem(4) $spacer;
|
||||
border-left: rem(1) solid $primary-50;
|
||||
font-weight: 600;
|
||||
background-color: $neutral-30;
|
||||
color: $neutral-90;
|
||||
}
|
||||
|
||||
summary:after {
|
||||
top: rem(11);
|
||||
}
|
||||
}
|
||||
|
||||
&[open=''] {
|
||||
summary:after {
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.66732 8.16667C4.70781 8.21588 4.75871 8.25552 4.81634 8.28273C4.87397 8.30995 4.93692 8.32406 5.00065 8.32406C5.06439 8.32406 5.12733 8.30995 5.18496 8.28273C5.2426 8.25552 5.29349 8.21588 5.33398 8.16667L9.08399 3.16667C9.13041 3.10476 9.15869 3.03115 9.16564 2.95409C9.17258 2.87702 9.15794 2.79954 9.12333 2.73033C9.08872 2.66112 9.03553 2.60291 8.96971 2.56223C8.90388 2.52155 8.82803 2.5 8.75065 2.5H1.25065C1.17327 2.5 1.09742 2.52155 1.0316 2.56223C0.965773 2.60291 0.912579 2.66112 0.877973 2.73033C0.843368 2.79954 0.828719 2.87702 0.835668 2.95409C0.842617 3.03115 0.87089 3.10476 0.917318 3.16667L4.66732 8.16667Z' fill='%238F98B3'/%3E%3C/svg%3E%0A");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-submenu {
|
||||
margin-bottom: 0;
|
||||
padding-left: $spacer;
|
||||
|
||||
&-item {
|
||||
margin-bottom: $spacer * 0.5;
|
||||
list-style: none;
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: $neutral-70;
|
||||
font-size: rem(14);
|
||||
line-height: rem(21);
|
||||
}
|
||||
|
||||
&.active {
|
||||
a {
|
||||
color: $primary-50;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
background-color: $neutral-10;
|
||||
border-top: none;
|
||||
margin: 0;
|
||||
|
||||
&__header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__content {
|
||||
display: block;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&__links-group {
|
||||
&.active {
|
||||
.docs-menu__links-group-heading > a {
|
||||
background-color: $neutral-20;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
@use '../helpers/functions' as *;
|
||||
@use '../mixins/mixins' as *;
|
||||
|
||||
.documentation-article {
|
||||
padding-top: $spacer * 2;
|
||||
padding-bottom: $spacer * 1.5;
|
||||
|
||||
h1 {
|
||||
font-size: $spacer * 2;
|
||||
line-height: rem(38);
|
||||
color: $neutral-98;
|
||||
margin-bottom: $spacer;
|
||||
padding-top: $spacer * 0.5;
|
||||
}
|
||||
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
font-size: $spacer * 1.5;
|
||||
line-height: rem(34);
|
||||
color: $neutral-98;
|
||||
margin-bottom: $spacer;
|
||||
padding-top: $spacer * 0.5;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: $spacer;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@include content-image($font-size-sm, $neutral-90, $spacer);
|
||||
|
||||
li:not(:last-of-type) {
|
||||
margin-bottom: $spacer * 0.5;
|
||||
}
|
||||
|
||||
code:not([class]) {
|
||||
padding: rem(4);
|
||||
color: $neutral-90;
|
||||
background-color: $neutral-20;
|
||||
}
|
||||
|
||||
.table-responsive {
|
||||
.table {
|
||||
@extend .table-dark;
|
||||
}
|
||||
th,
|
||||
td {
|
||||
background: inherit;
|
||||
img {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
margin: -8px 0 -16px;
|
||||
padding: 0 $spacer * 1.5;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.documentation {
|
||||
padding-top: $spacer;
|
||||
background-color: $neutral-10;
|
||||
color: $neutral-70;
|
||||
|
||||
&__container {
|
||||
@extend .container;
|
||||
max-width: rem(1440);
|
||||
padding: 0 $spacer;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-top: $spacer * 4;
|
||||
padding-bottom: $spacer * 7.5;
|
||||
|
||||
&__container {
|
||||
padding: 0 $spacer * 2.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.enterprise-benefits {
|
||||
background-color: $neutral-94;
|
||||
|
||||
padding-top: $spacer * 4;
|
||||
padding-bottom: $spacer * 4;
|
||||
|
||||
&__title {
|
||||
margin-bottom: $spacer * 2.5;
|
||||
font-size: $spacer * 2;
|
||||
line-height: rem(38);
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&__cards {
|
||||
gap: $spacer * 2;
|
||||
}
|
||||
|
||||
&__card {
|
||||
&-info {
|
||||
justify-content: flex-start;
|
||||
padding-top: $spacer * 2;
|
||||
padding-bottom: $spacer * 2;
|
||||
}
|
||||
|
||||
&-icon {
|
||||
height: $spacer * 1.5;
|
||||
width: $spacer * 1.5;
|
||||
margin-bottom: $spacer;
|
||||
}
|
||||
|
||||
&-title {
|
||||
font-size: $spacer * 1.5;
|
||||
line-height: rem(34);
|
||||
margin-bottom: $spacer;
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&-description {
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
margin-bottom: 0;
|
||||
color: $neutral-30;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-top: $spacer * 7.5;
|
||||
padding-bottom: $spacer * 5;
|
||||
|
||||
&__title {
|
||||
margin-bottom: $spacer * 4;
|
||||
font-size: $spacer * 3;
|
||||
line-height: rem(57);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__cards {
|
||||
justify-content: space-between;
|
||||
column-gap: 0;
|
||||
|
||||
& > div {
|
||||
width: calc(50% - 3px);
|
||||
}
|
||||
}
|
||||
|
||||
&__card {
|
||||
&-info {
|
||||
padding-bottom: $spacer * 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,78 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.enterprise-solutions-hero {
|
||||
padding-top: $spacer * 2.5;
|
||||
text-align: center;
|
||||
background: url('/img/stars-pattern.png') $neutral-10;
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 2.5;
|
||||
line-height: $spacer * 3;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
color: $neutral-98;
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
margin-bottom: $spacer * 2;
|
||||
color: $neutral-70;
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: $spacer * 1.5;
|
||||
|
||||
.button {
|
||||
min-width: $spacer * 12.5;
|
||||
}
|
||||
}
|
||||
|
||||
&__preview-mobile {
|
||||
width: 100%;
|
||||
padding: 0 rem(12);
|
||||
}
|
||||
|
||||
&__preview {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
padding-top: $spacer * 5;
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 4;
|
||||
line-height: rem(76);
|
||||
}
|
||||
|
||||
&__description {
|
||||
max-width: rem(730);
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
margin: 0 auto $spacer * 2 auto;
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
flex-direction: row;
|
||||
|
||||
.button {
|
||||
min-width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&__preview-mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__preview {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
+125
@@ -0,0 +1,125 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.enterprise-solutions-use-cases {
|
||||
background-color: $neutral-94;
|
||||
|
||||
padding-top: $spacer * 3;
|
||||
padding-bottom: $spacer * 3;
|
||||
|
||||
&__title {
|
||||
margin-bottom: $spacer * 5;
|
||||
font-size: $spacer * 2.5;
|
||||
line-height: $spacer * 3;
|
||||
color: $neutral-20;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__cases {
|
||||
gap: $spacer * 5;
|
||||
}
|
||||
|
||||
&__case {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacer * 2.5;
|
||||
|
||||
&-text {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&-link {
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
margin-bottom: $spacer * 2.5;
|
||||
}
|
||||
|
||||
&-title {
|
||||
font-size: $spacer * 2;
|
||||
line-height: rem(38);
|
||||
margin-bottom: $spacer * 1.5;
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&-description {
|
||||
font-size: $spacer;
|
||||
line-height: $spacer * 1.5;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
color: $neutral-40;
|
||||
}
|
||||
|
||||
&-preview {
|
||||
width: 100%;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-top: $spacer * 7.5;
|
||||
padding-bottom: $spacer * 10;
|
||||
|
||||
&__title {
|
||||
margin-bottom: $spacer * 7.5;
|
||||
font-size: $spacer * 3.5;
|
||||
line-height: rem(67);
|
||||
}
|
||||
|
||||
&__cases {
|
||||
gap: $spacer * 7.5;
|
||||
|
||||
& > div:last-of-type {
|
||||
img {
|
||||
width: rem(394);
|
||||
margin-left: rem(50);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__case {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
&.case-reversed {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
&-text {
|
||||
width: rem(445);
|
||||
}
|
||||
|
||||
&-link {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&-title {
|
||||
font-size: $spacer * 3;
|
||||
line-height: rem(57);
|
||||
}
|
||||
|
||||
&-description {
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
}
|
||||
|
||||
&-preview {
|
||||
width: rem(540);
|
||||
text-align: left;
|
||||
order: initial;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
&__case {
|
||||
gap: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,126 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.feature-overview {
|
||||
background-color: $neutral-94;
|
||||
|
||||
padding-top: $spacer * 4;
|
||||
padding-bottom: $spacer * 3;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
&__header {
|
||||
margin-bottom: $spacer * 3;
|
||||
}
|
||||
|
||||
&__title {
|
||||
margin-bottom: rem(30);
|
||||
font-size: $spacer * 2.5;
|
||||
line-height: $spacer * 3;
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&__description {
|
||||
margin: 0;
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
color: $neutral-30;
|
||||
}
|
||||
|
||||
&__cards {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacer * 2;
|
||||
}
|
||||
|
||||
&__card img {
|
||||
margin-bottom: $spacer;
|
||||
}
|
||||
|
||||
&__card-title {
|
||||
margin-bottom: $spacer;
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
font-weight: bold;
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&__card-content {
|
||||
margin-bottom: $spacer;
|
||||
color: $neutral-30;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-top: $spacer * 7.5;
|
||||
padding-bottom: $spacer * 2.5;
|
||||
|
||||
&__header {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: rem(30);
|
||||
margin-bottom: $spacer * 5;
|
||||
}
|
||||
|
||||
&__title {
|
||||
margin: 0;
|
||||
font-size: $spacer * 3.5;
|
||||
line-height: rem(67);
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
}
|
||||
|
||||
&__cards {
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
'A A A B B B'
|
||||
'C C D D E E'
|
||||
'F F F F G G'
|
||||
'H H I I J J';
|
||||
gap: rem(30);
|
||||
}
|
||||
|
||||
&__card:nth-of-type(1) {
|
||||
grid-area: A;
|
||||
}
|
||||
|
||||
&__card:nth-of-type(2) {
|
||||
grid-area: B;
|
||||
}
|
||||
|
||||
&__card:nth-of-type(3) {
|
||||
grid-area: C;
|
||||
}
|
||||
|
||||
&__card:nth-of-type(4) {
|
||||
grid-area: D;
|
||||
}
|
||||
|
||||
&__card:nth-of-type(5) {
|
||||
grid-area: E;
|
||||
}
|
||||
|
||||
&__card:nth-of-type(6) {
|
||||
grid-area: F;
|
||||
}
|
||||
|
||||
&__card:nth-of-type(7) {
|
||||
grid-area: G;
|
||||
}
|
||||
|
||||
&__card:nth-of-type(8) {
|
||||
grid-area: H;
|
||||
}
|
||||
|
||||
&__card:nth-of-type(9) {
|
||||
grid-area: I;
|
||||
}
|
||||
|
||||
&__card:nth-of-type(10) {
|
||||
grid-area: J;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.feedback {
|
||||
margin-top: rem(12);
|
||||
&__title {
|
||||
color: $neutral-98;
|
||||
margin-bottom: calc($spacer / 2);
|
||||
font-size: map-get($font-sizes-text, 'md');
|
||||
line-height: rem(24);
|
||||
}
|
||||
&__question {
|
||||
font-size: map-get($font-sizes-text, 'md');
|
||||
line-height: rem(24);
|
||||
color: $neutral-70;
|
||||
margin-bottom: rem(12);
|
||||
}
|
||||
&__answer {
|
||||
outline: none;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: map-get($font-sizes-text, 'md');
|
||||
line-height: rem(24);
|
||||
padding: rem(4) $spacer;
|
||||
&_yes {
|
||||
color: $success-90;
|
||||
background-color: $success-10;
|
||||
margin-right: rem(12);
|
||||
box-sizing: border-box;
|
||||
&:hover {
|
||||
background-color: $success-30;
|
||||
color: $neutral-100;
|
||||
}
|
||||
}
|
||||
&_no {
|
||||
color: $error-90;
|
||||
background-color: $error-10;
|
||||
&:hover {
|
||||
background-color: $error-30;
|
||||
color: $neutral-100;
|
||||
}
|
||||
}
|
||||
&[disabled] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__response {
|
||||
display: none;
|
||||
padding: 10px 8px;
|
||||
color: $neutral-100;
|
||||
background: $neutral-20;
|
||||
border-radius: 8px;
|
||||
font-size: $font-size-sm;
|
||||
|
||||
&_visible {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,204 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.footer {
|
||||
padding-top: $spacer * 4;
|
||||
padding-bottom: $spacer * 2.5;
|
||||
background-color: $neutral-10;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
|
||||
&__top {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-bottom: $spacer * 4;
|
||||
border-bottom: 1px solid $neutral-20;
|
||||
}
|
||||
|
||||
&__top-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
gap: $spacer * 3;
|
||||
}
|
||||
|
||||
&__logo {
|
||||
max-width: rem(118);
|
||||
margin-bottom: $spacer * 2;
|
||||
}
|
||||
|
||||
&__social {
|
||||
max-width: rem(350);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: map-get($font-sizes-text, 's');
|
||||
line-height: rem(21);
|
||||
color: $neutral-70;
|
||||
margin-bottom: $spacer * 2;
|
||||
}
|
||||
|
||||
&__social-media-platforms {
|
||||
display: flex;
|
||||
gap: $spacer * 1.5;
|
||||
}
|
||||
|
||||
&__social-media-link {
|
||||
outline: none;
|
||||
&:hover svg path {
|
||||
fill: $neutral-70;
|
||||
}
|
||||
}
|
||||
|
||||
&__menu {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: $spacer * 3;
|
||||
}
|
||||
|
||||
&__menu-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: rem(120);
|
||||
}
|
||||
|
||||
&__menu-section-title {
|
||||
font-size: map-get($font-sizes-text, 'm');
|
||||
line-height: rem(24);
|
||||
color: $neutral-98;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&__menu-items {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__menu-item:not(:last-of-type) {
|
||||
margin-bottom: $spacer;
|
||||
}
|
||||
|
||||
&__menu-item a {
|
||||
color: $neutral-70;
|
||||
font-size: map-get($font-sizes-text, 's');
|
||||
line-height: rem(21);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&__menu-item a:hover {
|
||||
color: $neutral-98;
|
||||
}
|
||||
|
||||
&__middle {
|
||||
padding-top: $spacer * 2.5;
|
||||
padding-bottom: $spacer * 2.5;
|
||||
border-bottom: 1px solid $neutral-20;
|
||||
}
|
||||
|
||||
&__middle-content {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
max-width: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&__middle-newsletter {
|
||||
max-width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&__middle-title {
|
||||
font-weight: 500;
|
||||
font-size: map-get($font-sizes-text, 'xl');
|
||||
line-height: rem(30);
|
||||
margin-bottom: $spacer;
|
||||
color: $neutral-98;
|
||||
}
|
||||
|
||||
&__middle-subtitle {
|
||||
color: $neutral-70;
|
||||
font-size: map-get($font-sizes-text, 's');
|
||||
line-height: rem(21);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&__bottom {
|
||||
width: 100%;
|
||||
padding-top: rem(30);
|
||||
padding-bottom: 0;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__bottom-content {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
max-width: 100%;
|
||||
gap: $spacer * 1.5;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&__bottom-content span,
|
||||
&__bottom-content a {
|
||||
color: $neutral-70;
|
||||
font-weight: 500;
|
||||
font-size: map-get($font-sizes-text, 's');
|
||||
line-height: rem(21);
|
||||
}
|
||||
|
||||
&__bottom-content a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&__bottom-links {
|
||||
display: flex;
|
||||
gap: $spacer * 3;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-bottom: $spacer * 3;
|
||||
|
||||
&__menu {
|
||||
min-width: rem(540);
|
||||
gap: rem(54);
|
||||
}
|
||||
|
||||
&__menu-section {
|
||||
min-width: unset;
|
||||
}
|
||||
|
||||
&__top-content {
|
||||
padding: 0;
|
||||
flex-direction: row;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
&__middle-newsletter {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
&__bottom {
|
||||
padding-bottom: rem(30);
|
||||
}
|
||||
|
||||
&__bottom-content {
|
||||
gap: 0;
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@import 'subscribe-form';
|
||||
+6
@@ -0,0 +1,6 @@
|
||||
@use '../helpers/functions' as *;
|
||||
@use '../mixins/get-contacted' as get-contacted;
|
||||
|
||||
.get-contacted-with-question {
|
||||
@include get-contacted.base($spacer * 2.5, 0, 0, 0, rem(350));
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
@use '../mixins/get-started-small' as get-started-small;
|
||||
|
||||
.get-started-blogs {
|
||||
@include get-started-small.base(
|
||||
$spacer * 5,
|
||||
$spacer * 1.5,
|
||||
$spacer * 5,
|
||||
$spacer * 2.5,
|
||||
$neutral-98,
|
||||
url('/img/stars-pattern.png') $neutral-10,
|
||||
url('/img/stars-pattern.png') $neutral-10
|
||||
);
|
||||
}
|
||||
+13
@@ -0,0 +1,13 @@
|
||||
@use '../mixins/get-started-small' as get-started-small;
|
||||
|
||||
.get-started-small-database {
|
||||
@include get-started-small.base(
|
||||
$spacer * 5,
|
||||
$spacer * 1.5,
|
||||
$spacer * 5,
|
||||
$spacer * 2.5,
|
||||
$neutral-94,
|
||||
url('/img/stars-pattern.png') $neutral-10,
|
||||
url('/img/stars-pattern.png') $neutral-10
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
@use '../mixins/get-started-small' as get-started-small;
|
||||
|
||||
.get-started-small-rocket {
|
||||
@include get-started-small.base(
|
||||
$spacer * 5,
|
||||
$spacer * 1.5,
|
||||
$spacer * 7.5,
|
||||
$spacer * 2.5,
|
||||
$neutral-94,
|
||||
linear-gradient($neutral-20, #0e1424),
|
||||
linear-gradient(to left, $neutral-20, #0e1424)
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,136 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.get-started {
|
||||
background-color: $neutral-94;
|
||||
|
||||
padding-top: $spacer * 4;
|
||||
padding-bottom: $spacer * 4;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&__content {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background-color: $neutral-10;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
min-width: 100%;
|
||||
min-height: rem(615);
|
||||
|
||||
border-radius: 16px;
|
||||
|
||||
padding-top: $spacer * 5;
|
||||
padding-left: $spacer * 3.5;
|
||||
padding-right: $spacer * 3.5;
|
||||
padding-bottom: $spacer * 5;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: map-get($font-sizes, 4);
|
||||
line-height: rem(48);
|
||||
color: $neutral-98;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: map-get($font-sizes-text, 'l');
|
||||
line-height: rem(27);
|
||||
text-align: center;
|
||||
color: $neutral-90;
|
||||
margin-top: $spacer * 1.5;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&__planet-icon {
|
||||
position: absolute;
|
||||
top: $spacer * 1.5;
|
||||
left: $spacer * 2.5;
|
||||
width: rem(94);
|
||||
height: rem(83);
|
||||
background-position: top;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
&__duo-planet-icon {
|
||||
border-radius: 0 0 16px 0;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: rem(281);
|
||||
height: rem(151);
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
&__overlay-top {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: rem(250);
|
||||
height: rem(250);
|
||||
background-image: url('/img/blurred/blurred-light-2.svg');
|
||||
background-position: top;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
&__overlay-middle {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url('/img/blurred/blurred-light.png');
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
&__overlay-bottom {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
padding-top: $spacer * 6.5;
|
||||
padding-bottom: $spacer * 6.5;
|
||||
|
||||
&__content {
|
||||
min-height: rem(165);
|
||||
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: map-get($font-sizes, 3);
|
||||
line-height: rem(57);
|
||||
max-width: unset;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
max-width: rem(640);
|
||||
}
|
||||
|
||||
&__overlay-middle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__overlay-bottom {
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
background-image: url('/img/blurred/blurred-light-3.svg');
|
||||
background-position: right;
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,173 @@
|
||||
@use '../helpers/functions' as *;
|
||||
@use 'sass:math';
|
||||
|
||||
.hero {
|
||||
padding-top: $spacer * 2.5;
|
||||
position: relative;
|
||||
background: url('/img/stars-pattern.png') $neutral-10;
|
||||
|
||||
&__content {
|
||||
text-align: center;
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__image {
|
||||
width: 100%;
|
||||
min-height: rem(480);
|
||||
margin: rem(-142) auto 0;
|
||||
overflow: hidden;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
$height: math.div(-100vw, 2.46); // image's aspect ratio 2.46 / 1
|
||||
margin-top: calc(#{$height} * 0.34);
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: 250%;
|
||||
height: auto;
|
||||
margin-left: -75%;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
color: $neutral-98;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
margin-bottom: $spacer;
|
||||
font-size: map-get($font-sizes, 4);
|
||||
line-height: rem(48);
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
color: $neutral-70;
|
||||
text-align: center;
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
max-width: 100%;
|
||||
margin: 0 auto $spacer * 1.5;
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: $spacer * 1.5;
|
||||
margin-bottom: $spacer * 5;
|
||||
}
|
||||
|
||||
&__buttons a {
|
||||
min-width: rem(200);
|
||||
}
|
||||
|
||||
&__stars {
|
||||
position: absolute;
|
||||
right: $spacer;
|
||||
bottom: $spacer;
|
||||
border-radius: 8px;
|
||||
|
||||
border: none;
|
||||
outline: none;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
padding-top: calc($spacer / 2);
|
||||
padding-bottom: calc($spacer / 2);
|
||||
padding-left: rem(20);
|
||||
padding-right: rem(20);
|
||||
|
||||
background-color: $neutral-10;
|
||||
transition: bottom 1s ease-in-out;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&__stars svg {
|
||||
max-width: rem(24);
|
||||
max-height: rem(24);
|
||||
}
|
||||
|
||||
&__stars-text {
|
||||
color: $neutral-98;
|
||||
margin-right: calc($spacer / 2);
|
||||
margin-left: calc($spacer / 2);
|
||||
font-size: map-get($font-sizes-text, 's');
|
||||
line-height: rem(21);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&__stars-count {
|
||||
border-radius: 6px;
|
||||
border: 1px solid $neutral-30;
|
||||
color: $neutral-98;
|
||||
padding-left: calc($spacer / 2);
|
||||
padding-right: calc($spacer / 2);
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: calc($spacer / 4);
|
||||
|
||||
height: rem(25);
|
||||
|
||||
font-size: map-get($font-sizes-text, 's');
|
||||
line-height: rem(21);
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-top: $spacer * 5;
|
||||
|
||||
&__content {
|
||||
padding: 0;
|
||||
max-width: rem(920);
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: map-get($font-sizes, 1);
|
||||
line-height: rem(76);
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: map-get($font-sizes-text, 'xl');
|
||||
line-height: rem(30);
|
||||
max-width: rem(640);
|
||||
margin: 0 auto $spacer * 2;
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
&__buttons a {
|
||||
min-width: auto;
|
||||
}
|
||||
|
||||
&__stars {
|
||||
position: fixed;
|
||||
right: $spacer * 1.5;
|
||||
bottom: $spacer * 1.5;
|
||||
transition: background-color 0.2s;
|
||||
|
||||
&:hover {
|
||||
background-color: $neutral-100;
|
||||
.hero__stars-text,
|
||||
.hero__stars-count {
|
||||
color: $neutral-20;
|
||||
}
|
||||
& > svg path {
|
||||
fill: $neutral-20;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,140 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
form.hs-form {
|
||||
position: relative;
|
||||
|
||||
& > fieldset {
|
||||
min-width: 100%;
|
||||
margin-bottom: rem(20);
|
||||
|
||||
label {
|
||||
margin-bottom: rem(6);
|
||||
font-size: rem(14);
|
||||
line-height: rem(21);
|
||||
}
|
||||
|
||||
& > div.hs-form-field {
|
||||
div.input,
|
||||
textarea {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.form-columns-1 {
|
||||
display: block;
|
||||
|
||||
& > div.hs-form-field {
|
||||
div.input {
|
||||
input,
|
||||
textarea {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.form-columns-2 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: rem(20);
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
justify-content: space-between;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
& > div.hs-form-field {
|
||||
width: 100%;
|
||||
float: none;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
$remValue: rem(10);
|
||||
max-width: calc(50% - #{$remValue});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// todo: this may be removed once the form is updated
|
||||
&.form-columns-0 {
|
||||
margin: 0;
|
||||
.hs-richtext {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
margin-bottom: 0;
|
||||
|
||||
input,
|
||||
textarea {
|
||||
width: 100%;
|
||||
background-color: transparent;
|
||||
border: 1px solid $neutral-40;
|
||||
border-radius: 8px;
|
||||
outline: none;
|
||||
color: $neutral-98;
|
||||
padding-left: $spacer;
|
||||
padding-right: $spacer;
|
||||
padding-top: calc($spacer / 2);
|
||||
padding-bottom: calc($spacer / 2);
|
||||
|
||||
&:focus {
|
||||
border: 1px solid $neutral-100;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: $neutral-70;
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
display: block;
|
||||
height: rem(77);
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.error {
|
||||
border-color: $error-50;
|
||||
}
|
||||
}
|
||||
|
||||
.legal-consent-container {
|
||||
p {
|
||||
font-size: rem(12);
|
||||
line-height: rem(18);
|
||||
color: $neutral-60;
|
||||
|
||||
a {
|
||||
color: $neutral-80;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hs_submit {
|
||||
input[type='submit'] {
|
||||
padding-left: rem(22);
|
||||
padding-right: rem(22);
|
||||
|
||||
font-size: map-get($font-sizes-text, 'md');
|
||||
line-height: rem(24);
|
||||
}
|
||||
}
|
||||
|
||||
.hs-error-msgs {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
margin: 0;
|
||||
color: $error-50;
|
||||
font-size: $font-size-xs;
|
||||
}
|
||||
|
||||
.submitted-message {
|
||||
color: $success-90;
|
||||
font-size: map-get($font-sizes-text, 'md');
|
||||
line-height: rem(24);
|
||||
text-align: right;
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.hybrid-cloud-cases {
|
||||
padding-bottom: $spacer * 4;
|
||||
background-color: $neutral-94;
|
||||
|
||||
&__cards {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacer * 2;
|
||||
}
|
||||
|
||||
&__card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacer;
|
||||
|
||||
&-icon {
|
||||
height: $spacer * 1.5;
|
||||
width: $spacer * 1.5;
|
||||
}
|
||||
|
||||
&-title {
|
||||
margin-bottom: 0;
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&-description {
|
||||
margin-bottom: 0;
|
||||
color: $neutral-30;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-top: $spacer * 2.5;
|
||||
padding-bottom: $spacer * 6.5;
|
||||
|
||||
&__cards {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: rem(30);
|
||||
|
||||
& > div:nth-of-type(1),
|
||||
& > div:nth-of-type(2) {
|
||||
width: calc(50% - 15px);
|
||||
}
|
||||
|
||||
& > div:nth-of-type(3),
|
||||
& > div:nth-of-type(4),
|
||||
& > div:nth-of-type(5) {
|
||||
width: calc((100% / 3) - 20px);
|
||||
}
|
||||
}
|
||||
|
||||
&__card {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,93 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.hybrid-cloud-features {
|
||||
padding-top: $spacer * 2.5;
|
||||
padding-bottom: $spacer * 2.5;
|
||||
background-color: $neutral-94;
|
||||
|
||||
&__title {
|
||||
margin-bottom: $spacer * 2.5;
|
||||
font-size: $spacer * 2;
|
||||
line-height: rem(38);
|
||||
text-align: center;
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&__cards {
|
||||
gap: rem(30);
|
||||
margin-bottom: $spacer * 2.5;
|
||||
}
|
||||
|
||||
&__card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
gap: $spacer;
|
||||
|
||||
&-icon {
|
||||
height: $spacer * 1.5;
|
||||
width: $spacer * 1.5;
|
||||
}
|
||||
|
||||
&-description {
|
||||
margin-bottom: 0;
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
color: $neutral-20;
|
||||
}
|
||||
}
|
||||
|
||||
&__link {
|
||||
text-align: center;
|
||||
|
||||
p {
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
color: $neutral-20;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
&__title {
|
||||
font-size: $spacer * 3;
|
||||
line-height: rem(57);
|
||||
margin-bottom: $spacer * 5;
|
||||
}
|
||||
|
||||
&__cards {
|
||||
column-gap: 0;
|
||||
margin-bottom: $spacer * 5;
|
||||
|
||||
& > div {
|
||||
width: calc(25% - 4.5px);
|
||||
}
|
||||
}
|
||||
|
||||
&__link {
|
||||
position: relative;
|
||||
|
||||
p {
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
}
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: rem(22);
|
||||
width: rem(166);
|
||||
height: rem(1);
|
||||
background-color: $neutral-80;
|
||||
}
|
||||
|
||||
&:before {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&:after {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
@use '../helpers/functions' as *;
|
||||
@use '../mixins/get-contacted' as get-contacted;
|
||||
|
||||
.hybrid-cloud-get-contacted {
|
||||
@include get-contacted.base($spacer * 2.5, 0, 0, $spacer * 4, rem(350));
|
||||
}
|
||||
@@ -0,0 +1,119 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.hybrid-cloud-hero {
|
||||
padding-top: $spacer * 2.5;
|
||||
padding-bottom: $spacer * 4;
|
||||
text-align: center;
|
||||
background: url('/img/stars-pattern.png') $neutral-10;
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 2.5;
|
||||
line-height: $spacer * 3;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
color: $neutral-98;
|
||||
}
|
||||
|
||||
&__features {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: $spacer;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
|
||||
& > div {
|
||||
gap: $spacer * 0.5;
|
||||
padding: rem(4) $spacer;
|
||||
border-radius: rem(100);
|
||||
background-color: $neutral-20;
|
||||
|
||||
img {
|
||||
height: $spacer;
|
||||
width: $spacer;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: rem(14);
|
||||
line-height: rem(21);
|
||||
color: $neutral-90;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
margin-bottom: $spacer * 2;
|
||||
color: $neutral-70;
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: $spacer * 1.5;
|
||||
|
||||
.button {
|
||||
min-width: $spacer * 12.5;
|
||||
}
|
||||
}
|
||||
|
||||
&__preview {
|
||||
margin-top: -$spacer;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-top: $spacer * 5;
|
||||
padding-bottom: $spacer * 7.5;
|
||||
text-align: left;
|
||||
|
||||
&__content {
|
||||
width: rem(480);
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 4;
|
||||
line-height: rem(76);
|
||||
}
|
||||
|
||||
&__features {
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
|
||||
.button {
|
||||
min-width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&__preview {
|
||||
width: rem(480);
|
||||
margin-top: -$spacer * 5;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
&__content {
|
||||
width: rem(500);
|
||||
}
|
||||
&__preview {
|
||||
width: rem(550);
|
||||
}
|
||||
}
|
||||
}
|
||||
+131
@@ -0,0 +1,131 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.hybrid-cloud-how-it-works {
|
||||
padding-top: $spacer * 4;
|
||||
padding-bottom: $spacer * 4;
|
||||
background-color: $neutral-10;
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 2.5;
|
||||
line-height: $spacer * 3;
|
||||
color: $neutral-98;
|
||||
margin-bottom: $spacer * 2.5;
|
||||
}
|
||||
|
||||
&__steps {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacer * 1.5;
|
||||
margin-bottom: $spacer * 2.5;
|
||||
}
|
||||
|
||||
&__step {
|
||||
position: relative;
|
||||
padding-left: $spacer * 3.5;
|
||||
|
||||
&:not(:last-of-type) {
|
||||
&:before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: rem(15);
|
||||
bottom: -4px;
|
||||
width: rem(2);
|
||||
height: calc(100% - 52px);
|
||||
background-color: $neutral-40;
|
||||
}
|
||||
}
|
||||
|
||||
&-number {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
left: -4px;
|
||||
top: -4.5px;
|
||||
height: rem(45);
|
||||
width: $spacer * 2.4;
|
||||
background-image: url('/img/hybrid-cloud-steps-cube/cube.png');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
z-index: 2;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: -32px;
|
||||
top: -30px;
|
||||
width: $spacer * 6.5;
|
||||
height: rem(108.5);
|
||||
background-image: url('/img/hybrid-cloud-steps-cube/cube-blur.png');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
color: $neutral-98;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
&-title {
|
||||
margin-bottom: $spacer;
|
||||
font-size: $spacer * 1.5;
|
||||
line-height: $spacer * 2;
|
||||
color: $neutral-98;
|
||||
}
|
||||
|
||||
&-description {
|
||||
margin-bottom: $spacer * 1.5;
|
||||
color: $neutral-70;
|
||||
}
|
||||
}
|
||||
|
||||
&__preview img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-top: $spacer * 9;
|
||||
padding-bottom: $spacer * 9;
|
||||
|
||||
&__content {
|
||||
margin-bottom: $spacer * 7.5;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 3.5;
|
||||
line-height: rem(67);
|
||||
}
|
||||
|
||||
&__steps {
|
||||
gap: $spacer * 3;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&__step {
|
||||
&:not(:last-of-type) {
|
||||
&:before {
|
||||
bottom: -28px;
|
||||
width: rem(2);
|
||||
height: calc(100% - 28px);
|
||||
}
|
||||
}
|
||||
|
||||
&-description {
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
}
|
||||
}
|
||||
|
||||
&__preview {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
+61
@@ -0,0 +1,61 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.hybrid-cloud-kubernetes-clusters {
|
||||
padding-top: $spacer * 4;
|
||||
padding-bottom: $spacer * 4;
|
||||
background-color: $neutral-94;
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 2;
|
||||
line-height: rem(38);
|
||||
margin-bottom: $spacer * 1.5;
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
color: $neutral-20;
|
||||
|
||||
&:first-of-type {
|
||||
margin-bottom: rem(27);
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__preview {
|
||||
margin-top: $spacer * 2.5;
|
||||
text-align: center;
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-top: $spacer * 5;
|
||||
padding-bottom: $spacer * 5;
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 3;
|
||||
line-height: rem(57);
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
|
||||
&:first-of-type {
|
||||
margin-bottom: rem(30);
|
||||
}
|
||||
}
|
||||
}
|
||||
@include media-breakpoint-up(xl) {
|
||||
&__preview {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,82 @@
|
||||
@use 'sass:math';
|
||||
@use '../helpers/functions' as *;
|
||||
@use '../mixins/marquee' as marquee;
|
||||
|
||||
.hybrid-cloud-partners {
|
||||
padding-top: $spacer * 4;
|
||||
padding-bottom: $spacer * 4;
|
||||
background-color: $neutral-94;
|
||||
|
||||
&__title {
|
||||
margin: 0 auto $spacer * 2.5;
|
||||
font-size: $spacer * 1.5;
|
||||
line-height: rem(34);
|
||||
color: $neutral-20;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__content {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacer * 1.5;
|
||||
padding: rem(92) 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&__cards {
|
||||
@include marquee.base(96px, 264px, 20, 20, 12px, $neutral-94, false, 50s, none);
|
||||
|
||||
&__container {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $spacer;
|
||||
padding: $spacer 0 $spacer $spacer;
|
||||
background-color: $neutral-98;
|
||||
border-radius: rem(12);
|
||||
|
||||
img {
|
||||
width: $spacer * 4;
|
||||
height: $spacer * 4;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__square-grid-overlay {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: rem(400);
|
||||
background-image: url('/img/square-grid.png');
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-top: $spacer * 5;
|
||||
padding-bottom: $spacer * 5;
|
||||
|
||||
&__title {
|
||||
width: rem(920);
|
||||
font-size: $spacer * 2;
|
||||
line-height: rem(38);
|
||||
}
|
||||
|
||||
&__square-grid-overlay {
|
||||
background-size: contain;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.hybrid-cloud-video {
|
||||
padding-top: $spacer * 4;
|
||||
padding-bottom: $spacer * 4;
|
||||
background-color: $neutral-94;
|
||||
|
||||
&__title {
|
||||
margin-bottom: $spacer * 3;
|
||||
font-size: $spacer * 2;
|
||||
line-height: rem(38);
|
||||
text-align: center;
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-top: $spacer * 6.5;
|
||||
padding-bottom: $spacer * 2.5;
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 3;
|
||||
line-height: rem(57);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,89 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.integrations {
|
||||
background: $neutral-10;
|
||||
padding-top: $spacer * 4;
|
||||
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&__title {
|
||||
font-size: map-get($font-sizes, 4);
|
||||
line-height: rem(48);
|
||||
text-align: center;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
max-width: 100%;
|
||||
color: $neutral-98;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
color: $neutral-70;
|
||||
font-size: map-get($font-sizes-text, 'l');
|
||||
line-height: rem(27);
|
||||
margin-bottom: $spacer * 1.5;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__link {
|
||||
color: $primary-60;
|
||||
font-size: $font-size-xl;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
&__preview {
|
||||
margin-top: $spacer * 3;
|
||||
width: 100%;
|
||||
height: rem(440);
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-image: url('/img/mobile/integrations.svg');
|
||||
}
|
||||
|
||||
&__overlay {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
background: url('/img/stars-pattern.png') $neutral-10;
|
||||
padding-top: $spacer * 6.5;
|
||||
|
||||
&__title {
|
||||
font-size: map-get($font-sizes, 2);
|
||||
line-height: rem(67);
|
||||
max-width: rem(726);
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: map-get($font-sizes-text, 'xl');
|
||||
line-height: rem(30);
|
||||
}
|
||||
|
||||
&__preview {
|
||||
margin-top: $spacer * 5;
|
||||
width: rem(920);
|
||||
height: rem(440);
|
||||
background-image: url('/img/integrations.svg');
|
||||
}
|
||||
|
||||
&__overlay {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: rem(240);
|
||||
|
||||
position: absolute;
|
||||
bottom: rem(-255);
|
||||
left: 0;
|
||||
filter: blur(60px);
|
||||
background: linear-gradient(90deg, #dc244c 7%, #2567eb 30%, #f54c71 50%, #7335f0 70%, #bb3987 100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.investors {
|
||||
padding-top: $spacer * 4;
|
||||
padding-bottom: $spacer * 4;
|
||||
background-color: $neutral-94;
|
||||
position: relative;
|
||||
|
||||
&__title {
|
||||
font-size: map-get($font-sizes, 4);
|
||||
line-height: rem(48);
|
||||
text-align: center;
|
||||
margin-bottom: $spacer * 4;
|
||||
}
|
||||
|
||||
&__logos {
|
||||
position: relative;
|
||||
row-gap: $spacer * 4;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&__logo {
|
||||
width: 100%;
|
||||
min-height: rem(40);
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
&__overlay {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-top: $spacer * 7.5;
|
||||
padding-bottom: $spacer * 7.5;
|
||||
|
||||
&__title {
|
||||
font-size: map-get($font-sizes, 2);
|
||||
line-height: rem(67);
|
||||
margin-bottom: $spacer * 2.5;
|
||||
}
|
||||
|
||||
&__logos {
|
||||
align-items: center;
|
||||
min-height: rem(240);
|
||||
}
|
||||
|
||||
&__overlay {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: rem(240);
|
||||
bottom: $spacer * 7.5;
|
||||
background-image: url('../../img/grid.png');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.leadership {
|
||||
padding-top: $spacer * 4;
|
||||
background-color: $neutral-94;
|
||||
|
||||
&__title {
|
||||
font-size: map-get($font-sizes, 4);
|
||||
line-height: rem(48);
|
||||
margin-bottom: $spacer * 2.5;
|
||||
}
|
||||
|
||||
&__cards {
|
||||
row-gap: rem(7);
|
||||
}
|
||||
|
||||
&__card {
|
||||
padding: rem(10);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
row-gap: $spacer;
|
||||
background-color: $neutral-98;
|
||||
}
|
||||
|
||||
&__card-image {
|
||||
width: 100%;
|
||||
aspect-ratio: 0.96;
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
border-radius: rem(6);
|
||||
}
|
||||
|
||||
&__card-name {
|
||||
width: 100%;
|
||||
font-weight: bold;
|
||||
color: $neutral-20;
|
||||
text-align: center;
|
||||
margin-bottom: rem(4);
|
||||
font-size: map-get($font-sizes-text, md);
|
||||
}
|
||||
|
||||
&__card-position {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
color: $neutral-40;
|
||||
text-align: center;
|
||||
font-size: map-get($font-sizes-text, xs);
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-top: $spacer * 7.5;
|
||||
|
||||
&__title {
|
||||
text-align: center;
|
||||
font-size: map-get($font-sizes, 2);
|
||||
line-height: rem(67);
|
||||
margin-bottom: $spacer * 4;
|
||||
}
|
||||
|
||||
&__cards {
|
||||
row-gap: rem(30);
|
||||
}
|
||||
|
||||
&__card {
|
||||
padding: $spacer;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,192 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.link {
|
||||
$icon-width: rem(20);
|
||||
$icon-height: calc(1em * 0.62);
|
||||
$link-color: $primary-50;
|
||||
$link-font-size: $font-size-l;
|
||||
|
||||
display: inline-flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
color: $link-color;
|
||||
font-size: $link-font-size;
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
transition:
|
||||
all 0.3s ease-in-out,
|
||||
color 0.1s linear;
|
||||
padding-right: $icon-width;
|
||||
|
||||
&:before {
|
||||
display: block;
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: $icon-width;
|
||||
height: $icon-height;
|
||||
-webkit-mask: url('../../icons/outline/arrow-hand.svg') no-repeat center right;
|
||||
mask: url('../../icons/outline/arrow-hand.svg') no-repeat center right;
|
||||
-webkit-mask-size: contain;
|
||||
mask-size: contain;
|
||||
background: linear-gradient(to right, $link-color 50%, transparent 50%);
|
||||
background-size: 200% 100%;
|
||||
background-position: -100% 0;
|
||||
right: 0;
|
||||
margin-bottom: -2px;
|
||||
}
|
||||
|
||||
&:after {
|
||||
display: block;
|
||||
content: '';
|
||||
width: $icon-width;
|
||||
height: $icon-height;
|
||||
-webkit-mask: url('../../icons/outline/angle-right-color.svg') no-repeat center right;
|
||||
mask: url('../../icons/outline/angle-right-color.svg') no-repeat center right;
|
||||
-webkit-mask-size: contain;
|
||||
mask-size: contain;
|
||||
background: $link-color;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
margin-bottom: -2px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
padding-right: calc($icon-width + 6px);
|
||||
&:after {
|
||||
animation: dash 0.3s ease-in-out forwards;
|
||||
}
|
||||
|
||||
&:before {
|
||||
animation: dash 0.3s ease-in-out forwards;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:hover) {
|
||||
&:before {
|
||||
animation: dash-revert 0.3s ease-in-out forwards;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes dash {
|
||||
to {
|
||||
background-position: 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes dash-revert {
|
||||
from {
|
||||
background-position: 0 0;
|
||||
}
|
||||
to {
|
||||
background-position: -100% 0;
|
||||
}
|
||||
}
|
||||
|
||||
// MODIFIERS
|
||||
&_dark {
|
||||
$link-color: $neutral-20;
|
||||
color: $link-color;
|
||||
|
||||
&:before {
|
||||
background: linear-gradient(to right, $link-color 50%, transparent 50%);
|
||||
background-size: 200% 100%;
|
||||
background-position: -100% 0;
|
||||
}
|
||||
|
||||
&:after {
|
||||
background: $link-color;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
$link-color: $primary-50;
|
||||
color: $link-color;
|
||||
|
||||
&:before {
|
||||
background: linear-gradient(to right, $link-color 50%, transparent 50%);
|
||||
background-size: 200% 100%;
|
||||
background-position: -100% 0;
|
||||
}
|
||||
|
||||
&:after {
|
||||
background: $link-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&_light {
|
||||
$link-color: $primary-60;
|
||||
color: $link-color;
|
||||
|
||||
&:before {
|
||||
background: linear-gradient(to right, $link-color 50%, transparent 50%);
|
||||
background-size: 200% 100%;
|
||||
background-position: -100% 0;
|
||||
}
|
||||
|
||||
&:after {
|
||||
background: $link-color;
|
||||
}
|
||||
}
|
||||
|
||||
&_disabled,
|
||||
&:disabled {
|
||||
$link-color: $neutral-60;
|
||||
color: $link-color;
|
||||
|
||||
&:before {
|
||||
background: linear-gradient(to right, $link-color 50%, transparent 50%);
|
||||
background-size: 200% 100%;
|
||||
background-position: -100% 0;
|
||||
}
|
||||
|
||||
&:after {
|
||||
background: $link-color;
|
||||
}
|
||||
}
|
||||
|
||||
&_neutral {
|
||||
$link-color: $neutral-60;
|
||||
color: $link-color;
|
||||
|
||||
&:before {
|
||||
background: linear-gradient(to right, $link-color 50%, transparent 50%);
|
||||
background-size: 200% 100%;
|
||||
background-position: -100% 0;
|
||||
}
|
||||
|
||||
&:after {
|
||||
background: $link-color;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
$link-color: $neutral-20;
|
||||
color: $link-color;
|
||||
|
||||
&:before {
|
||||
background: linear-gradient(to right, $link-color 50%, transparent 50%);
|
||||
background-size: 200% 100%;
|
||||
background-position: -100% 0;
|
||||
}
|
||||
|
||||
&:after {
|
||||
background: $link-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// font-size
|
||||
&_inherit {
|
||||
font-size: inherit;
|
||||
}
|
||||
&_sm {
|
||||
font-size: $font-size-s;
|
||||
}
|
||||
|
||||
&_md {
|
||||
font-size: $font-size-md;
|
||||
}
|
||||
|
||||
&_xl {
|
||||
font-size: $font-size-xl;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
.logo {
|
||||
width: 178px;
|
||||
height: 36px;
|
||||
|
||||
&__img {
|
||||
width: auto;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,149 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.menu-mobile {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 2;
|
||||
padding-top: rem(52);
|
||||
background-color: $neutral-94;
|
||||
display: none;
|
||||
gap: $spacer * 3;
|
||||
flex-direction: column;
|
||||
overflow-y: scroll;
|
||||
|
||||
&--visible {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&__header {
|
||||
padding: 0 rem(20);
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&__close {
|
||||
outline: none;
|
||||
border: none;
|
||||
padding: rem(5);
|
||||
padding-top: rem(7);
|
||||
width: rem(40);
|
||||
height: rem(40);
|
||||
background-color: transparent;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__close svg {
|
||||
width: rem(24);
|
||||
height: rem(24);
|
||||
}
|
||||
|
||||
&__controls {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacer * 1.5;
|
||||
|
||||
padding-left: rem(20);
|
||||
padding-right: rem(20);
|
||||
padding-bottom: rem(60);
|
||||
}
|
||||
|
||||
&__login {
|
||||
color: $neutral-20 !important;
|
||||
}
|
||||
|
||||
&__items {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__item {
|
||||
width: 100%;
|
||||
border-bottom: 1px solid $neutral-90;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
|
||||
color: $neutral-20;
|
||||
|
||||
a {
|
||||
color: $neutral-20;
|
||||
}
|
||||
}
|
||||
|
||||
&__item-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
min-height: rem(64);
|
||||
padding: 0 rem(20);
|
||||
}
|
||||
|
||||
&__subitems {
|
||||
display: none;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background-color: $neutral-90;
|
||||
padding: $spacer rem(20);
|
||||
}
|
||||
|
||||
&__subitems a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&__subitem {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
min-height: rem(40);
|
||||
|
||||
font-size: rem(16);
|
||||
line-height: rem(24);
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&__subitem span {
|
||||
width: rem(16);
|
||||
height: rem(16);
|
||||
margin-right: $spacer;
|
||||
}
|
||||
|
||||
&__expand {
|
||||
outline: none;
|
||||
border: none;
|
||||
padding: rem(5);
|
||||
width: rem(34);
|
||||
height: rem(34);
|
||||
background-color: transparent;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__expand svg {
|
||||
height: rem(16);
|
||||
width: rem(16);
|
||||
}
|
||||
}
|
||||
|
||||
.menu-mobile__item--active {
|
||||
.menu-mobile__subitems {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.menu-mobile__expand svg {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,179 @@
|
||||
@use '../mixins/mixins' as mixins;
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.menu-link {
|
||||
text-decoration: none;
|
||||
color: $neutral-98;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: $primary-50;
|
||||
}
|
||||
}
|
||||
|
||||
.main-menu {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: nowrap;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
padding-top: rem(12);
|
||||
padding-bottom: rem(12);
|
||||
padding-left: rem(20);
|
||||
padding-right: rem(20);
|
||||
background: linear-gradient(180deg, #090d19, rgba(9, 13, 25, 0));
|
||||
z-index: 1;
|
||||
|
||||
&__trigger {
|
||||
outline: none;
|
||||
border: none;
|
||||
width: rem(40);
|
||||
height: rem(40);
|
||||
padding: 0 8px;
|
||||
border-radius: 8px;
|
||||
z-index: 1;
|
||||
background: linear-gradient($neutral-20, #0e1424);
|
||||
}
|
||||
|
||||
&__links {
|
||||
display: none;
|
||||
gap: calc($spacer / 2);
|
||||
position: relative;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-wrap: nowrap;
|
||||
flex-shrink: 0;
|
||||
margin: 0 $spacer;
|
||||
position: relative;
|
||||
color: $neutral-98;
|
||||
line-height: 1.5;
|
||||
white-space: nowrap;
|
||||
@include mixins.transitionAll(300ms);
|
||||
|
||||
&:hover {
|
||||
.main-menu__submenu {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__submenu {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
align-items: flex-start;
|
||||
padding: rem(24);
|
||||
position: absolute;
|
||||
|
||||
border-radius: 12px;
|
||||
border: 1px solid $neutral-90;
|
||||
background: $neutral-98;
|
||||
box-shadow:
|
||||
0 1px 2px 0 rgba(22, 30, 51, 0.1),
|
||||
0 10px 20px 0 rgba(22, 30, 51, 0.1);
|
||||
top: 48px;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: -7px;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 8px solid transparent;
|
||||
border-right: 8px solid transparent;
|
||||
border-bottom: 8px solid $neutral-98;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
top: -30px;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__submenu-item {
|
||||
width: 100%;
|
||||
list-style: none;
|
||||
margin-bottom: rem(4);
|
||||
&:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
& a {
|
||||
display: flex;
|
||||
height: 2.5rem;
|
||||
line-height: 1;
|
||||
align-items: center;
|
||||
border-radius: rem(4);
|
||||
color: $neutral-20;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
img {
|
||||
display: block;
|
||||
width: auto;
|
||||
height: 1rem;
|
||||
color: $primary-50;
|
||||
margin-top: 0.3rem;
|
||||
margin-bottom: 0.2rem;
|
||||
margin-right: rem(12);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
a {
|
||||
background: $neutral-94;
|
||||
color: $primary-50;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__section-link {
|
||||
padding: 0.5rem;
|
||||
margin-bottom: rem(4);
|
||||
text-transform: uppercase;
|
||||
a {
|
||||
line-height: $font-size-s;
|
||||
}
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
flex-wrap: nowrap;
|
||||
flex-shrink: 0;
|
||||
gap: $spacer;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
.main-menu {
|
||||
padding-top: $spacer * 2;
|
||||
padding-bottom: $spacer * 2;
|
||||
padding-left: $spacer * 1.5;
|
||||
padding-right: $spacer * 1.5;
|
||||
|
||||
&__links {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&__trigger {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,75 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.mission {
|
||||
padding-top: $spacer * 2.5;
|
||||
padding-bottom: $spacer * 4;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
background-color: $neutral-94;
|
||||
|
||||
&__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&__link {
|
||||
color: $neutral-94;
|
||||
padding: rem(4) $spacer;
|
||||
font-size: $font-size-s;
|
||||
line-height: rem(21);
|
||||
border-radius: 100px;
|
||||
background: linear-gradient($neutral-20, $neutral-10);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
&__logo {
|
||||
content: url('../../icons/logo.svg');
|
||||
min-width: rem(14);
|
||||
height: rem(16);
|
||||
padding-right: rem(8);
|
||||
}
|
||||
|
||||
&__title {
|
||||
color: $neutral-20;
|
||||
text-align: center;
|
||||
font-size: map-get($font-sizes, 4);
|
||||
line-height: rem(48);
|
||||
margin: $spacer * 1.5 0 0;
|
||||
}
|
||||
|
||||
&__overlay {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-image: url('../../img/mission-background-mobile.png');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding: rem(160) 0;
|
||||
|
||||
&__title {
|
||||
max-width: rem(920);
|
||||
font-size: map-get($font-sizes, 2);
|
||||
line-height: rem(67);
|
||||
}
|
||||
|
||||
&__overlay {
|
||||
height: rem(400);
|
||||
top: rem(87);
|
||||
background-image: url('../../img/mission-background.png');
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.newsletter {
|
||||
padding-bottom: $spacer * 4;
|
||||
background-color: $neutral-98;
|
||||
text-align: center;
|
||||
|
||||
&__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacer * 1.5;
|
||||
padding: $spacer * 2.5 $spacer * 1.5;
|
||||
border-radius: $spacer;
|
||||
background: linear-gradient($neutral-20, #0e1424);
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 1.5;
|
||||
line-height: rem(34);
|
||||
color: $neutral-98;
|
||||
margin-bottom: $spacer * 0.5;
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: rem(14);
|
||||
line-height: rem(21);
|
||||
color: $neutral-70;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&__form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacer * 0.5;
|
||||
margin-bottom: 0;
|
||||
|
||||
& > form {
|
||||
flex-direction: column;
|
||||
gap: $spacer * 0.5;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
button,
|
||||
input[type='submit'] {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-bottom: $spacer * 7.5;
|
||||
text-align: left;
|
||||
|
||||
&__content {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 0;
|
||||
padding: $spacer * 2.5 $spacer * 4;
|
||||
}
|
||||
|
||||
&__text {
|
||||
width: rem(381);
|
||||
}
|
||||
|
||||
&__form {
|
||||
form {
|
||||
flex-direction: row;
|
||||
width: rem(476);
|
||||
}
|
||||
|
||||
button,
|
||||
input[type='submit'] {
|
||||
width: rem(118);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,75 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.not-found {
|
||||
position: relative;
|
||||
min-height: calc(100vh - 104px);
|
||||
padding-top: rem(130);
|
||||
padding-bottom: $spacer * 5;
|
||||
text-align: center;
|
||||
background: url('/img/stars-pattern.png') $neutral-10;
|
||||
|
||||
&__image {
|
||||
display: none;
|
||||
|
||||
&-mobile {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-bottom: $spacer * 3;
|
||||
}
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
color: $neutral-94;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: $spacer * 1.5;
|
||||
|
||||
.button {
|
||||
width: rem(200);
|
||||
}
|
||||
}
|
||||
|
||||
&__overlay {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: rem(200);
|
||||
background-image: url('/img/blurred/blurred-light-12.svg');
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-top: rem(120);
|
||||
padding-bottom: rem(130);
|
||||
min-height: calc(100vh - 140px);
|
||||
|
||||
&__image {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-bottom: $spacer * 2;
|
||||
|
||||
&-mobile {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
flex-direction: row;
|
||||
|
||||
.button {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,109 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.open-roles {
|
||||
background-color: $neutral-94;
|
||||
|
||||
padding-top: $spacer * 1.5;
|
||||
padding-bottom: $spacer * 2.5;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
position: relative;
|
||||
|
||||
&__content {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background-color: $neutral-10;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
|
||||
min-width: 100%;
|
||||
|
||||
border-radius: 16px;
|
||||
|
||||
padding-top: $spacer * 2.5;
|
||||
padding-left: $spacer * 1.5;
|
||||
padding-right: $spacer * 1.5;
|
||||
}
|
||||
|
||||
&__summary {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__overlay {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: rem(250);
|
||||
height: rem(250);
|
||||
background-image: url('/img/blurred/blurred-light-9.png');
|
||||
background-position: top;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: map-get($font-sizes, 5);
|
||||
line-height: rem(38);
|
||||
color: $neutral-98;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: map-get($font-sizes-text, 'm');
|
||||
line-height: rem(24);
|
||||
text-align: center;
|
||||
color: $neutral-80;
|
||||
margin-top: $spacer;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&__image {
|
||||
width: 100%;
|
||||
min-height: rem(240);
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-top: 0;
|
||||
padding-bottom: $spacer * 6.5;
|
||||
|
||||
&__content {
|
||||
flex-direction: row;
|
||||
|
||||
padding-top: rem(30);
|
||||
padding-bottom: rem(30);
|
||||
padding-left: $spacer * 4;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
&__summary {
|
||||
min-width: rem(640);
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
&__title {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
max-width: rem(640);
|
||||
}
|
||||
|
||||
&__image {
|
||||
max-width: rem(300);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,100 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.our-story {
|
||||
padding-top: $spacer * 4;
|
||||
padding-bottom: $spacer * 4;
|
||||
background-color: $neutral-94;
|
||||
|
||||
&__row {
|
||||
margin-bottom: $spacer * 2.5;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: map-get($font-sizes, 2);
|
||||
line-height: rem(67);
|
||||
text-align: center;
|
||||
color: $neutral-20;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: map-get($font-sizes, 6);
|
||||
line-height: rem(34);
|
||||
margin-bottom: $spacer * 1.5;
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&__extra-title {
|
||||
font-size: map-get($font-sizes, 6);
|
||||
line-height: rem(34);
|
||||
margin-bottom: $spacer * 1.5;
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&__content {
|
||||
color: $neutral-20;
|
||||
margin-bottom: $spacer * 2;
|
||||
font-size: map-get($font-sizes-text, 'l');
|
||||
}
|
||||
|
||||
&__image {
|
||||
height: 100%;
|
||||
min-height: rem(332);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
&__date {
|
||||
margin-bottom: $spacer * 1.5;
|
||||
}
|
||||
|
||||
&__date::before {
|
||||
content: url('../../icons/outline/arrow-right.svg');
|
||||
display: inline-block;
|
||||
margin-right: $spacer;
|
||||
}
|
||||
|
||||
&__extra-content {
|
||||
color: $neutral-20;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
font-size: map-get($font-sizes-text, 'xl');
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-top: $spacer * 5;
|
||||
padding-bottom: $spacer * 7.5;
|
||||
|
||||
&__row {
|
||||
margin-bottom: $spacer * 5;
|
||||
}
|
||||
|
||||
&__row--offsetted {
|
||||
margin-bottom: $spacer * 7.5;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: rem(80);
|
||||
line-height: rem(96);
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: rem(40);
|
||||
line-height: rem(48);
|
||||
max-width: rem(475);
|
||||
}
|
||||
|
||||
&__content {
|
||||
max-width: rem(475);
|
||||
font-size: map-get($font-sizes-text, 'xl');
|
||||
}
|
||||
|
||||
&__image {
|
||||
min-height: rem(524);
|
||||
}
|
||||
|
||||
&__date {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.pagination {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
|
||||
&__list {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: rem(4);
|
||||
margin-bottom: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
&__item {
|
||||
height: $spacer * 2;
|
||||
width: $spacer * 2;
|
||||
list-style: none;
|
||||
line-height: $spacer * 2;
|
||||
|
||||
&:last-of-type {
|
||||
width: $spacer * 3.5;
|
||||
margin-left: $spacer;
|
||||
}
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: $neutral-50;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: $primary-50;
|
||||
border-radius: rem(10);
|
||||
|
||||
a {
|
||||
color: $neutral-100;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,129 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.pricing-door {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: rem(47) $spacer * 2 $spacer * 3 $spacer * 2;
|
||||
border-radius: rem(12);
|
||||
border-top: rem(1) solid $neutral-40;
|
||||
background: linear-gradient($neutral-20, #0e1424);
|
||||
color: $neutral-80;
|
||||
z-index: 1;
|
||||
|
||||
&.active,
|
||||
&:hover {
|
||||
padding: rem(47) rem(31);
|
||||
border: rem(1) solid $primary-40;
|
||||
|
||||
.pricing-door__popular {
|
||||
left: rem(31);
|
||||
}
|
||||
}
|
||||
|
||||
&__popular {
|
||||
position: absolute;
|
||||
top: -11px;
|
||||
left: $spacer * 2;
|
||||
padding: rem(2) rem(12);
|
||||
font-size: rem(12);
|
||||
line-height: rem(18);
|
||||
text-transform: uppercase;
|
||||
border-radius: rem(6);
|
||||
background-color: $primary-50;
|
||||
color: $neutral-98;
|
||||
}
|
||||
|
||||
&__top-overlay {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: rem(220);
|
||||
height: rem(192);
|
||||
background-image: url('/img/blurred/blurred-light-9.png');
|
||||
background-position: top;
|
||||
background-size: cover;
|
||||
border-radius: 0 rem(12) 0 0;
|
||||
}
|
||||
|
||||
&__title {
|
||||
margin-bottom: $spacer * 1.5;
|
||||
color: $neutral-98;
|
||||
}
|
||||
|
||||
&__price {
|
||||
margin-bottom: $spacer * 0.5;
|
||||
color: $neutral-98;
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: rem(14);
|
||||
line-height: rem(21);
|
||||
margin-bottom: $spacer * 1.5;
|
||||
}
|
||||
|
||||
&__button {
|
||||
width: 100%;
|
||||
margin-bottom: $spacer * 2.5;
|
||||
}
|
||||
|
||||
&__feature {
|
||||
padding-top: $spacer;
|
||||
border-top: rem(1) solid $neutral-40;
|
||||
|
||||
&-description {
|
||||
margin-bottom: $spacer * 1.5;
|
||||
|
||||
a {
|
||||
color: $neutral-80;
|
||||
border-bottom: rem(1) solid $neutral-80;
|
||||
}
|
||||
}
|
||||
|
||||
&-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacer;
|
||||
}
|
||||
|
||||
&-item {
|
||||
position: relative;
|
||||
margin-bottom: 0;
|
||||
padding-left: $spacer * 1.5;
|
||||
font-size: rem(14);
|
||||
line-height: rem(21);
|
||||
|
||||
&:before {
|
||||
content: ('');
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: rem(4);
|
||||
left: 0;
|
||||
height: $spacer;
|
||||
width: $spacer;
|
||||
background-image: url('/icons/fill/check-white.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-position: top;
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
|
||||
&-min-price {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: $spacer * 0.5;
|
||||
margin-bottom: 0;
|
||||
font-size: rem(14);
|
||||
line-height: rem(21);
|
||||
|
||||
span {
|
||||
display: block;
|
||||
width: $spacer;
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
text-align: center;
|
||||
color: $secondary-blue-50;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.private-cloud-about {
|
||||
padding-top: $spacer * 4;
|
||||
padding-bottom: $spacer * 4;
|
||||
background-color: $neutral-94;
|
||||
|
||||
&__title {
|
||||
color: $neutral-20;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&__image {
|
||||
width: 100%;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
}
|
||||
|
||||
&__description {
|
||||
color: $neutral-40;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-bottom: $spacer;
|
||||
|
||||
&__content {
|
||||
position: relative;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: rem(1);
|
||||
width: rem(920);
|
||||
margin: 0 auto;
|
||||
background-color: $neutral-80;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
position: absolute;
|
||||
top: $spacer * 4;
|
||||
left: rem(12);
|
||||
width: rem(400);
|
||||
}
|
||||
|
||||
&__image {
|
||||
display: block;
|
||||
width: rem(553);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
&__description {
|
||||
position: absolute;
|
||||
bottom: $spacer * 4;
|
||||
right: rem(12);
|
||||
width: rem(361);
|
||||
}
|
||||
}
|
||||
}
|
||||
+6
@@ -0,0 +1,6 @@
|
||||
@use '../helpers/functions' as *;
|
||||
@use '../mixins/get-contacted' as get-contacted;
|
||||
|
||||
.private-cloud-get-contacted {
|
||||
@include get-contacted.base($spacer * 3.5, $spacer * 4, $spacer * 7.5, $spacer * 4, rem(400));
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.private-cloud-hero {
|
||||
padding-top: $spacer * 2.5;
|
||||
background-color: $neutral-94;
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 2.5;
|
||||
line-height: $spacer * 3;
|
||||
color: $neutral-20;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
color: $neutral-30;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
}
|
||||
|
||||
&__button {
|
||||
min-width: $spacer * 10;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-top: $spacer * 7.5;
|
||||
|
||||
&__title {
|
||||
width: rem(540);
|
||||
font-size: $spacer * 3.5;
|
||||
line-height: rem(67);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&__content {
|
||||
width: rem(465);
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.qdrant-articles-hero {
|
||||
position: relative;
|
||||
padding-top: $spacer * 2.5;
|
||||
padding-bottom: $spacer * 5;
|
||||
background: url('/img/stars-pattern.png') $neutral-10;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 2.5;
|
||||
line-height: $spacer * 3;
|
||||
color: $neutral-98;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
color: $neutral-98;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&__overlay {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: rem(176);
|
||||
background-image: url('/img/blurred/blurred-light-11.png');
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-top: $spacer * 5;
|
||||
padding-bottom: $spacer * 7.5;
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 4;
|
||||
line-height: rem(76);
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: $spacer * 2;
|
||||
line-height: rem(38);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.qdrant-articles-posts {
|
||||
padding-bottom: $spacer * 2.5;
|
||||
padding-top: $spacer * 4;
|
||||
background-color: $neutral-98;
|
||||
|
||||
&__articles {
|
||||
margin-bottom: $spacer * 5;
|
||||
}
|
||||
|
||||
.post-preview {
|
||||
padding-bottom: 27.36%;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-top: $spacer * 7.5;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,133 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.qdrant-blog-features {
|
||||
padding-top: $spacer * 4;
|
||||
padding-bottom: $spacer * 4;
|
||||
background-color: $neutral-98;
|
||||
|
||||
&__header {
|
||||
margin-bottom: $spacer * 3;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 2.5;
|
||||
line-height: $spacer * 3;
|
||||
color: $neutral-20;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
}
|
||||
|
||||
&__form {
|
||||
margin-bottom: 0;
|
||||
|
||||
&-search-block {
|
||||
position: relative;
|
||||
|
||||
input,
|
||||
.qdr-search-input-btn {
|
||||
padding-right: $spacer * 2.5;
|
||||
}
|
||||
.qdr-search-input-btn {
|
||||
width: 100%;
|
||||
color: $neutral-70;
|
||||
}
|
||||
|
||||
i {
|
||||
position: absolute;
|
||||
top: rem(12);
|
||||
right: $spacer;
|
||||
width: $spacer;
|
||||
height: $spacer;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
background-image: url('/icons/outline/input-search.svg');
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__articles {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacer * 4;
|
||||
|
||||
&-main {
|
||||
width: 100%;
|
||||
|
||||
h5 {
|
||||
font-size: $spacer * 2;
|
||||
line-height: rem(38);
|
||||
color: $neutral-20;
|
||||
margin-bottom: $spacer;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.post-preview > div {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-secondary {
|
||||
.post {
|
||||
padding: rem(18) 0 rem(20);
|
||||
border-bottom: rem(1) solid $neutral-90;
|
||||
|
||||
&:first-of-type {
|
||||
padding-top: rem(20);
|
||||
border-top: rem(1) solid $neutral-90;
|
||||
}
|
||||
}
|
||||
|
||||
h6 {
|
||||
margin-bottom: $spacer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-top: $spacer * 5;
|
||||
padding-bottom: $spacer * 5;
|
||||
|
||||
&__header {
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&__articles {
|
||||
flex-direction: row;
|
||||
gap: rem(30);
|
||||
|
||||
&-main {
|
||||
width: calc(100% - 476px);
|
||||
}
|
||||
|
||||
&-secondary {
|
||||
width: rem(446);
|
||||
|
||||
.post {
|
||||
&:first-of-type {
|
||||
padding-top: 0;
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
&__title {
|
||||
font-size: $spacer * 3.5;
|
||||
line-height: rem(67);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&__form {
|
||||
&-search-block {
|
||||
width: rem(534);
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,71 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.qdrant-blog-hero {
|
||||
position: relative;
|
||||
padding-top: $spacer * 2.5;
|
||||
padding-bottom: $spacer * 5;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 2.5;
|
||||
line-height: $spacer * 3;
|
||||
color: $neutral-98;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
color: $neutral-70;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
}
|
||||
|
||||
&__form {
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacer * 0.5;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
button,
|
||||
input[type='submit'] {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&__overlay {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: rem(176);
|
||||
background-image: url('/img/blurred/blurred-light-11.png');
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-top: $spacer * 5;
|
||||
padding-bottom: $spacer * 7.5;
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 4;
|
||||
line-height: rem(76);
|
||||
}
|
||||
|
||||
&__form {
|
||||
form {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
button,
|
||||
input[type='submit'] {
|
||||
width: $spacer * 10;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.qdrant-blog-posts {
|
||||
padding-bottom: $spacer * 2.5;
|
||||
padding-top: $spacer * 2.5;
|
||||
background-color: $neutral-98;
|
||||
|
||||
&__articles {
|
||||
gap: $spacer * 3;
|
||||
margin-bottom: $spacer * 5;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
&__articles {
|
||||
gap: $spacer * 5 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.qdrant-cloud-bento-cards {
|
||||
background-color: $neutral-94;
|
||||
padding-bottom: $spacer * 4;
|
||||
|
||||
&__cards {
|
||||
gap: $spacer * 2;
|
||||
|
||||
& > div:nth-of-type(1),
|
||||
& > div:nth-of-type(3) {
|
||||
img {
|
||||
max-width: rem(255);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__card {
|
||||
padding-bottom: 0;
|
||||
|
||||
&-title {
|
||||
font-size: $spacer * 1.5;
|
||||
line-height: rem(34);
|
||||
margin-bottom: rem(12);
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&-description {
|
||||
margin-bottom: 0;
|
||||
color: $neutral-40;
|
||||
}
|
||||
|
||||
img {
|
||||
margin: $spacer auto 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
a {
|
||||
margin-top: rem(12);
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-bottom: $spacer * 5;
|
||||
|
||||
&__cards {
|
||||
justify-content: space-between;
|
||||
column-gap: 0;
|
||||
|
||||
& > div:nth-of-type(1),
|
||||
& > div:nth-of-type(3) {
|
||||
width: calc(25% - 3px);
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
& > div:nth-of-type(2) {
|
||||
width: calc(50% - 6px);
|
||||
}
|
||||
|
||||
& > div:nth-of-type(4),
|
||||
& > div:nth-of-type(5) {
|
||||
width: calc(50% - 3px);
|
||||
}
|
||||
}
|
||||
|
||||
&__card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
padding-bottom: 0;
|
||||
|
||||
img {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
a {
|
||||
margin-top: rem(12);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
+35
@@ -0,0 +1,35 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.qdrant-cloud-features-link {
|
||||
background-color: $neutral-94;
|
||||
padding-bottom: $spacer * 2.5;
|
||||
text-align: center;
|
||||
|
||||
&__content {
|
||||
margin-bottom: $spacer;
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
position: relative;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: ('');
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: rem(25);
|
||||
height: rem(1);
|
||||
width: calc((100% - 820px) / 2);
|
||||
background-color: $neutral-90;
|
||||
}
|
||||
|
||||
&:before {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&:after {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,101 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.qdrant-cloud-hero {
|
||||
padding-top: $spacer * 2.5;
|
||||
padding-bottom: $spacer * 5;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
background: url('/img/stars-pattern.png') $neutral-10;
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 2.5;
|
||||
line-height: $spacer * 3;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
color: $neutral-98;
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
margin-bottom: $spacer * 2;
|
||||
color: $neutral-70;
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: $spacer * 1.5;
|
||||
margin-bottom: $spacer * 2.5;
|
||||
|
||||
.button {
|
||||
min-width: $spacer * 12.5;
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: $spacer * 0.5;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
padding: rem(4) $spacer;
|
||||
border-radius: rem(100);
|
||||
background-color: $neutral-20;
|
||||
|
||||
img {
|
||||
width: $spacer;
|
||||
height: $spacer;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
font-size: rem(14);
|
||||
line-height: rem(21);
|
||||
color: $neutral-90;
|
||||
}
|
||||
}
|
||||
|
||||
&__overlay {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: -9px;
|
||||
width: 100%;
|
||||
height: rem(114);
|
||||
background-image: url('/img/blurred/blurred-light-10.png');
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-top: $spacer * 3.5;
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 4;
|
||||
line-height: rem(71);
|
||||
}
|
||||
|
||||
&__description {
|
||||
max-width: rem(730);
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
margin: 0 auto $spacer * 2 auto;
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
flex-direction: row;
|
||||
margin-bottom: $spacer * 3.5;
|
||||
|
||||
.button {
|
||||
min-width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&__overlay {
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
@use '../helpers/functions' as *;
|
||||
@use '../mixins/marketplaces' as marketplaces;
|
||||
|
||||
.qdrant-cloud-marketplaces {
|
||||
@include marketplaces.base(
|
||||
$spacer * 5,
|
||||
$spacer * 4,
|
||||
$spacer * 7.5,
|
||||
$spacer * 4,
|
||||
rem(728),
|
||||
$spacer * 3.5,
|
||||
$spacer * 2.5,
|
||||
rem(67),
|
||||
$spacer * 3
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,193 @@
|
||||
@use '../helpers/functions' as *;
|
||||
@use '../mixins/mixins' as *;
|
||||
|
||||
.qdrant-post {
|
||||
&__header {
|
||||
padding-top: $spacer * 2.5;
|
||||
padding-bottom: $spacer * 1.5;
|
||||
background-color: $neutral-98;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 2;
|
||||
line-height: rem(38);
|
||||
margin-bottom: $spacer;
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&__about {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: rem(6);
|
||||
font-size: rem(14);
|
||||
line-height: rem(21);
|
||||
color: $neutral-50;
|
||||
margin-bottom: $spacer * 2.5;
|
||||
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__preview {
|
||||
img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&__body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacer * 2.5;
|
||||
padding-bottom: $spacer * 3;
|
||||
}
|
||||
|
||||
&__content {
|
||||
p,
|
||||
li {
|
||||
margin-bottom: $spacer * 2;
|
||||
}
|
||||
p,
|
||||
li,
|
||||
table {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: $spacer * 2;
|
||||
line-height: rem(37);
|
||||
margin-bottom: $spacer;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: $spacer * 1.5;
|
||||
line-height: rem(34);
|
||||
margin-bottom: $spacer;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
margin-bottom: $spacer;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
margin-bottom: $spacer;
|
||||
}
|
||||
|
||||
@include content-image($font-size-sm, $neutral-50, $spacer * 2);
|
||||
|
||||
iframe {
|
||||
margin-bottom: $spacer * 2;
|
||||
width: 100%;
|
||||
|
||||
&[title='YouTube video player'] {
|
||||
height: auto;
|
||||
aspect-ratio: 1.7 / 1;
|
||||
}
|
||||
}
|
||||
|
||||
blockquote {
|
||||
padding: rem(32) rem(40) 1px;
|
||||
border-radius: $spacer * 0.5;
|
||||
background: linear-gradient(180deg, #161e33 0%, #0e1424 100%);
|
||||
color: $neutral-98;
|
||||
}
|
||||
|
||||
details {
|
||||
summary {
|
||||
font-size: rem(18);
|
||||
cursor: pointer;
|
||||
margin-bottom: $spacer * 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Modifiers
|
||||
&_centered {
|
||||
.qdrant-post__body {
|
||||
max-width: $post-content-width;
|
||||
margin: 0 auto;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.qdrant-post__content {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
&__header {
|
||||
width: $post-content-width;
|
||||
margin: 0 auto;
|
||||
padding-top: $spacer * 5;
|
||||
padding-bottom: $spacer * 2;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 3.5;
|
||||
line-height: rem(67);
|
||||
}
|
||||
|
||||
&__body {
|
||||
flex-direction: row;
|
||||
gap: $spacer * 5;
|
||||
width: $post-content-width;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
&__content {
|
||||
width: calc(100% - 160px);
|
||||
|
||||
p,
|
||||
li {
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
}
|
||||
|
||||
h1:not(:first-child) {
|
||||
padding-top: $spacer * 2;
|
||||
}
|
||||
h1 {
|
||||
font-size: $spacer * 3;
|
||||
line-height: $spacer * 3.5;
|
||||
}
|
||||
h2:not(:first-child) {
|
||||
padding-top: $spacer * 2;
|
||||
}
|
||||
h2 {
|
||||
font-size: $spacer * 2.5;
|
||||
line-height: $spacer * 3;
|
||||
}
|
||||
|
||||
h3:not(:first-child) {
|
||||
padding-top: $spacer * 2;
|
||||
}
|
||||
h3 {
|
||||
font-size: $spacer * 2;
|
||||
line-height: rem(38);
|
||||
}
|
||||
|
||||
h4:not(:first-child) {
|
||||
padding-top: $spacer * 2;
|
||||
}
|
||||
h4 {
|
||||
padding-top: $spacer * 2;
|
||||
font-size: $spacer * 1.5;
|
||||
line-height: rem(34);
|
||||
}
|
||||
|
||||
iframe {
|
||||
margin: $spacer * 2 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.qdrant-pricing-calculator {
|
||||
padding-bottom: $spacer * 4;
|
||||
background-color: $neutral-10;
|
||||
color: $neutral-98;
|
||||
text-align: center;
|
||||
|
||||
&__title {
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&__link {
|
||||
margin-top: $spacer * 1.5;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-bottom: $spacer * 7.5;
|
||||
|
||||
&__content {
|
||||
position: relative;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: ('');
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: rem(29.5);
|
||||
height: rem(1);
|
||||
width: calc((100% - 453px) / 2);
|
||||
background-color: $neutral-30;
|
||||
}
|
||||
|
||||
&:before {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&:after {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
+6
@@ -0,0 +1,6 @@
|
||||
.qdrant-pricing-docker-deploy {
|
||||
.docker-deploy__title,
|
||||
.docker-deploy__subtitle {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.qdrant-pricing-doors-a {
|
||||
padding-bottom: $spacer * 4;
|
||||
padding-top: $spacer * 4;
|
||||
background-color: $neutral-10;
|
||||
|
||||
&__doors {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: rem(30);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-bottom: $spacer * 5;
|
||||
padding-top: $spacer * 5;
|
||||
|
||||
&__doors {
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__door {
|
||||
width: rem(400);
|
||||
height: rem(896);
|
||||
|
||||
.pricing-door__feature-description a {
|
||||
color: $primary-50;
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.qdrant-pricing-doors-b {
|
||||
padding-bottom: $spacer * 4;
|
||||
padding-top: $spacer * 4;
|
||||
background-color: $neutral-10;
|
||||
|
||||
&__doors {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: rem(30);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-bottom: $spacer * 5;
|
||||
padding-top: $spacer * 5;
|
||||
|
||||
&__doors {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&__door {
|
||||
width: calc((100% / 3) - 20px);
|
||||
height: rem(896);
|
||||
|
||||
.pricing-door__description {
|
||||
height: rem(42);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
+6
@@ -0,0 +1,6 @@
|
||||
@use '../helpers/functions' as *;
|
||||
@use '../mixins/get-contacted' as get-contacted;
|
||||
|
||||
.qdrant-pricing-get-contacted {
|
||||
@include get-contacted.base($spacer * 2.5, $spacer * 2.5, $spacer * 5, $spacer * 4, rem(400));
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.qdrant-pricing-hero {
|
||||
padding-top: $spacer * 2.5;
|
||||
background-color: $neutral-10;
|
||||
color: $neutral-98;
|
||||
text-align: center;
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 2;
|
||||
line-height: rem(38);
|
||||
margin-bottom: $spacer;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: $spacer * 1.5;
|
||||
line-height: rem(34);
|
||||
margin-bottom: $spacer;
|
||||
}
|
||||
|
||||
&__description {
|
||||
margin-bottom: 0;
|
||||
color: $neutral-70;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-top: $spacer * 5;
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 3;
|
||||
line-height: rem(57);
|
||||
margin-bottom: $spacer * 1.5;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: $spacer * 2;
|
||||
line-height: rem(38);
|
||||
margin-bottom: $spacer * 1.5;
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
}
|
||||
}
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user