diff --git a/assets/js/home-interactions.js b/assets/js/home-interactions.js new file mode 100644 index 000000000..a90df14cd --- /dev/null +++ b/assets/js/home-interactions.js @@ -0,0 +1,22 @@ +$('.exp-btn').click(function() { + var targetBtnElement = $(this).parent() + $('.exp-btn > p', targetBtnElement).fadeOut(100); + setTimeout(function() { + $('.exp-btn-links', targetBtnElement).fadeIn(200) + $('.exp-btn', targetBtnElement).addClass('open'); + $('.close-btn', targetBtnElement).fadeIn(200); + }, 100); +}) + +$('.close-btn').click(function() { + var targetBtnElement = $(this).parent().parent() + $('.exp-btn-links', targetBtnElement).fadeOut(100) + $('.exp-btn', targetBtnElement).removeClass('open'); + $(this).fadeOut(100); + setTimeout(function() { + $('p', targetBtnElement).fadeIn(100); + }, 100); +}) + +/////////////////////////////// EXPANDING BUTTONS ////////////////////////////// + diff --git a/assets/js/search-interactions.js b/assets/js/search-interactions.js index 4628111bd..4f8fdd8ac 100644 --- a/assets/js/search-interactions.js +++ b/assets/js/search-interactions.js @@ -1,10 +1,10 @@ // Fade content wrapper when focusing on search input $('#algolia-search-input').focus(function() { - $('.content-wrapper, .group-wrapper').fadeTo(300, .35); + $('.content-wrapper').fadeTo(300, .35); }) // Hide search dropdown when leaving search input $('#algolia-search-input').blur(function() { - $('.content-wrapper, .group-wrapper').fadeTo(200, 1); + $('.content-wrapper').fadeTo(200, 1); $('.ds-dropdown-menu').hide(); }) diff --git a/assets/styles/layouts/_homepage.scss b/assets/styles/layouts/_homepage.scss index f187bd6b2..09f76efa9 100644 --- a/assets/styles/layouts/_homepage.scss +++ b/assets/styles/layouts/_homepage.scss @@ -1,120 +1,67 @@ +////////////////////////////// HOMEPAGE VARIABLES ////////////////////////////// + +$home-body-width: 1300px; + //////////////////////////////// HOMEPAGE STYLES /////////////////////////////// +body.home { + background-image: url('/img/hero-bg-light-1-diamond.png'); + background-size: 65%; + background-repeat: no-repeat; +} + .home { - display: flex; - flex-direction: column; - align-items: flex-start; + color: $article-bold; - .section { - display: flex; + .section{ width: 100%; - padding: 0rem 3rem; - flex-grow: 1; - - .row{ - flex-direction: row; - } - - .half { width: 50%; } - .third { width: 33.33%; } - .quarter { width: 25%; } - .two-thirds { width: 66.67%; } - .three-quarters { width: 75%; } - } - - ///////////////////////////// HERO SECTION STYLES //////////////////////////// - - .hero { + margin: 0 auto; + padding: 2rem 2rem 0; + max-width: $home-body-width; + display: block; position: relative; - padding-top: 3.5rem; - padding-bottom: 4.5rem; - @include gradient($grad-WarpSpeed) - color: $g20-white; - z-index: 0; - // overflow: hidden; - - h2 { - margin: 1.25rem 0 .5rem; - font-weight: 300; - font-size: 3rem; - } - p { - font-size: 1.1rem; - line-height: 1.85rem; - } - - #hero-img { - position: absolute; - max-width: 50%; - max-height: 135%; - bottom: -25%; - right: 0; - } - - .actions { - display: flex; - margin: 1.25rem 0 .75rem 0; - } - - a.btn { - position: relative; - display: inline-block; - flex: 1 0; - margin: 0 .5rem .5rem 0; - padding: 1.25rem 2.25rem; - color: $article-btn-text !important; - border-radius: $radius; - font-weight: $medium; - font-size: 1.2rem; - text-decoration: none; - text-align: center; - z-index: 1; - @include gradient($home-btn-gradient); - - &:after { - content: ""; - position: absolute; - display: block; - top: 0; - right: 0; - width: 100%; - height: 100%; - border-radius: $radius; - @include gradient($home-btn-gradient-hover, 270deg); - opacity: 0; - transition: opacity .2s; - z-index: -1; - } - - &:hover { - cursor: pointer; - - &:after { - opacity: 1; - } - } - } } //////////////////////////// SEARCH SECTION STYLES /////////////////////////// .search { - padding-top: 2rem; - padding-bottom: 2.25rem; - .sidebar--search { - max-width: 55%; font-size: 1.1rem; input { - padding: .75em 2.35rem .75rem 1rem + padding: .75em 2.35rem .75rem 1rem; + border-radius: 6px; + position: relative; + box-shadow: none; + + &::placeholder {color: rgba($sidebar-search-text, .65);} } &:after { font-size: 2rem; - top: .35rem; + top: .45rem; right: .45rem; } + + .algolia-autocomplete { + position: relative; + + &:after { + content: ""; + position: absolute; + display: block; + border-radius: 6px; + top: 0; + left: 0; + box-shadow: 2px 2px 6px $sidebar-search-shadow; + height: 100%; + width: 100%; + mix-blend-mode: multiply; + z-index: -1; + } + } + .algolia-autocomplete.algolia-autocomplete-left, .algolia-autocomplete.algolia-autocomplete-right { + .ds-dropdown-menu { top: auto !important; left: 0 !important; @@ -122,7 +69,7 @@ &:after { content: ""; - box-shadow: 2px 2px 10px $sidebar-search-shadow; + box-shadow: 2px 2px 6px $sidebar-search-shadow; height: 100%; width: 100%; mix-blend-mode: multiply; @@ -132,283 +79,547 @@ } } - /////////////////////////////// PRODUCT CARDS //////////////////////////////// + ///////////////////////////////// SPAN STYLES //////////////////////////////// - .group-wrapper { - display: flex; - flex-grow: 1; - width: 100%; - border-radius: $radius; - background-color: $sidebar-search-bg; - box-shadow: 2px 2px 10px $sidebar-search-shadow; - overflow: hidden; - color: $article-text; - - h2 { - margin-top: .5rem; - font-weight: $medium; - color: $article-heading-alt; - a {color: inherit; &:hover{color: inherit;}} - } - p { - line-height: 1.45rem; - max-width: 700px; - } - a { - color: $article-link; - text-decoration: none; - font-weight: $medium; - &:hover{ color: $article-link-hover; } - } + span { + &.magenta {color: $br-new-magenta;} + &.orange {color: $r-dreamsicle;} + &.blue {color: $b-pool;} } - .card { - display: flex; - flex-direction: column; - justify-content: space-between; - padding: 1.25rem 1.5rem .75rem; - flex: 1 0; + ///////////////////////////// EXPANDABLE BUTTONS ///////////////////////////// - .card-content p { margin-bottom: 0; } + .exp-btn-wrapper { + position: relative; + display: block; - span.version { - font-size: 1.15rem; - opacity: .65; - } - } - - #flux, #resources { - padding-bottom: 2.5rem; - .card .card-content { - h2 {margin-bottom: .5rem;} - p {margin: 0 0 1rem;} - } - .card.cta-btns { - flex-direction: row; - margin-bottom: .75rem; - justify-content: flex-end; + .exp-btn { + background: $br-dark-blue; + border-radius: 6px; + color: $br-teal; + padding: 1.5rem 2rem; + font-weight: $medium; align-items: center; - a.btn { - position: relative; - display: inline-block; + min-width: 340px; + min-height: 70px; + cursor: pointer; + transition: color .2s, background .2s, padding .2s; + + &:hover, &.open { + background: $br-teal; + color: $br-dark-blue; + } + + p { + margin: 0 !important; text-align: center; - margin: .5rem .5rem .5rem 0; - padding: .75rem 1.5rem; - color: $article-btn-text !important; - border-radius: $radius; - font-size: 1.05rem; - z-index: 1; - @include gradient($article-btn-gradient); + } + & > * {width: 100%;} - &:after { - content: ""; - position: absolute; - display: block; - top: 0; - right: 0; - width: 100%; - height: 100%; - border-radius: $radius; - @include gradient($article-btn-gradient-hover); - opacity: 0; - transition: opacity .2s; - z-index: -1; + &.open { + padding: 0; + li a {padding: 1rem 2rem;} + } + } + + .exp-btn-links { + border-radius: 6px; + color: $br-dark-blue; + margin: 0; + padding: 0; + list-style: none; + width: 100%; + height: 100%; + display: none; + + li { + background: $br-teal; + + &:first-child { + border-radius: 6px 6px 0 0; + border-bottom: 1px solid rgba($br-dark-blue, .5); } + &:last-child { + border-radius: 0 0 6px 6px; + border-bottom: none; + } + a { + display: block; + padding: 0rem 2rem; + color: $br-dark-blue; + text-decoration: none; + text-align: center; + transition: padding .2s; + } + } + } + + .close-btn { + position: absolute; + top: 38%; + right: -32px; + color: rgba($br-teal, .6); + font-size: 1.5rem; + display: none; + cursor: pointer; + transition: color .2s; + + &:hover { + opacity: 1; + color: $br-teal; + } + } + } - &:hover { - cursor: pointer; + //////////////////////////////// PRODUCT CARDS /////////////////////////////// + .product-cards { + display: flex; + flex-direction: row; + + .card { + padding: 3rem; + background: $sidebar-search-bg; + border-radius: 30px; + box-shadow: 1px 1px 7px $sidebar-search-shadow; + flex: 1 1 0; + display: flex; + flex-direction: column; + + &:first-child {margin-right: 1rem} + &:last-child {margin-left: 1rem} + + h3 { + margin: 0 0 1.5rem; + line-height: 1.1em; + font-size: 2.75rem; + } + + p { + margin-bottom: 2rem; + }; + + .card-links { + margin-top: auto; + + a { + position: relative; + display: block; + color: $article-text; + font-weight: $medium; + text-decoration: none; + margin-bottom: .3rem; + &:after { - opacity: 1; + content: ""; + display: block; + margin-top: .15rem; + border-top: 2px solid $br-new-magenta; + width: 0; + transition: width .2s; + } + + &:hover{ + color: $br-new-magenta; + &:after {width: 30%} } } } } } - #tick-cards { + ///////////////////////// GENERAL BLUE SECTION STYLES //////////////////////// + + .section.blue { + + h2, h3, h4 { + color: $br-teal; + } + + .padding-wrapper { + width: 100%; + max-width: $home-body-width; + color: $g20-white; + background: $br-dark-blue; + background-size: cover; + border-radius: 30px; + } + + &.flush-left .padding-wrapper { + padding: 2rem; + background-image: url('/svgs/home-bg-circle-right.svg')} + &.flush-right .padding-wrapper { + padding: 2rem; + background-image: url('/svgs/home-bg-circle-left.svg'); + } + } + + ////////////////////////////// INFLUXDB SECTION ////////////////////////////// + + #influxdb { + + padding-top: .5rem; display: flex; - flex-wrap: wrap; - position: relative; - color: $g20-white; - @include gradient($home-tick-bg-gradient, 45deg) - h2 { color: $article-heading-alt; } + .actions { + display: flex; + justify-content: center; + align-items: center; + max-width: 50%; + padding: 0 3rem 3rem; + flex: 1 1 0; + } - a { - display: inline-block; - position: relative; - &:after{ - content: ""; - margin-top: .15rem; - width: 0; - display: block; - height: 2px; - @include gradient($grad-whiteFade) - transition: width .2s; - } - &:hover{ - &:after { width: 100%; } + h2 { + margin: 0; + font-size: 3.5rem; + line-height: 1.1em; + & + p { + font-size: 1.2rem; + margin: .5rem 0 2rem; } } - .card { + h3 { + margin: 0; + color: $g20-white; + font-size: 2.25rem; + + & + p {margin: .5rem 0;} + } + + .hero-img { + background-image: url('/img/wind-turbine.jpg'); + background-size: cover; + margin: -.5rem .75rem 0 1rem; + z-index: -1; + min-height: 600px; + border-radius: 0 0 30px 30px; + flex: 1 1 0; + } + } + + #influxdb-btn { + .exp-btn { + @include gradient($grad-burningDusk, 270deg); + color: $g20-white; position: relative; z-index: 1; - color: $article-text; - transition: color .2s; &:after { content: ""; - position: absolute; - display: block; - bottom: 0; + top: 0; left: 0; + position: absolute; width: 100%; height: 100%; - opacity: 0; + @include gradient($grad-coolDusk); + border-radius: 6px; z-index: -1; - transition: opacity .4s; + opacity: 0; + transition: opacity .2s; } - &.telegraf:after {@include gradient($telegraf-home-card-gradient);} - &.influxdb:after {@include gradient($default-home-card-gradient);} - &.chronograf:after {@include gradient($chronograf-home-card-gradient);} - &.kapacitor:after {@include gradient($kapacitor-home-card-gradient);} - - &:hover { - color: $g20-white; - h2, a {color: $g20-white;} - &:after { opacity: 1; } + &:hover, &.open { + &:after {opacity: 1;} } + &.open { + padding: 0; + li a {padding: 1rem 2rem;} + } + } + .exp-btn-links { + color: $g20-white; + li { + @include gradient($grad-coolDusk); + + &:first-child { + border-bottom: 1px solid rgba($body-bg, .5); + a:after {border-radius: 6px 6px 0 0;} + } + + &:last-child a:after {border-radius: 0 0 6px 6px;} + + a { + color: $g20-white; + position: relative; + z-index: 1; + + &:after { + content: ""; + top: 0; + left: 0; + position: absolute; + width: 100%; + height: 100%; + @include gradient($grad-burningDusk, 270deg); + border-radius: 6px; + z-index: -1; + opacity: 0; + transition: opacity .2s; + } + + &:hover:after {opacity: 1} + } + } + } + + .close-btn { + color: rgba($br-new-magenta, .6); + &:hover {color: $br-new-magenta;} } } - #enterprise { - padding-top: 2.5rem; - padding-bottom: 2.5rem; - } + ///////////////////////////////// API SECTION //////////////////////////////// - //////////////////////////// HOMEPAGE MEDIA QUERIES //////////////////////////// + #api-guides { + .padding-wrapper { + display: flex; + justify-content: space-between; + align-items: center; + padding: 3.5rem; - @include media(large) { - overflow-x: hidden; - .hero #hero-img{ - max-height: 130%; - max-width: 70%; - right: -20%; - bottom: -30%; + .text {margin-right: 2rem;} + + h3 { + margin: 0; + font-size: 1.8rem; + } + + p { + margin: .5rem 0; + line-height: 1.5rem; + } } } - @media (max-width: 1020px) { - #tick-stack #tick-cards .card { width: 50%; flex: none;} - .section { - .quarter { width: 33.33%; } - .three-quarters { width: 66.64%; } + ///////////////////////////////// LEARN ITEMS //////////////////////////////// + + #learn-more { + margin-bottom: 2rem; + + h4 { + font-size: 1.8rem; + margin: 1rem 0 2rem; } - #flux .card.flux-btns { + + .learn-items { + display: flex; + flex-direction: row; + justify-content: flex-start; + + .item { + max-width: 25%; + flex: 1 1 0; + display: flex; + flex-direction: column; + margin: 0 .75rem; + + .icon { + svg {max-height: 60px; max-width: 60px} + .c1 {fill: $home-icon-c1;} + .c2 {fill: $home-icon-c2;} + .magenta {fill: $br-new-magenta;} + } + + h5 { + font-size: 1.4rem; + margin: 1rem 0 0; + } + + p { + margin: .5rem 0 1.5rem; + line-height: 1.7rem; + } + a { + position: relative; + color: $br-new-magenta; + font-weight: $medium; + text-decoration: none; + + &:after { + content: ""; + display: block; + margin-top: .25rem; + border-top: 2px solid $br-new-magenta; + width: 0; + transition: width .2s; + } + + &:hover:after {width: 30%} + } + + & > *:last-child {margin-top: auto} + } + } + } + + ////////////////////////////// TICK STACK STYLES ///////////////////////////// + + #tick { + padding-bottom: 0; + + .padding-wrapper { + display: flex; + flex-direction: row; + align-items: center; + padding: 2rem 3rem; + + h4 { + margin: 0; + font-size: 1.5rem; + & > a {color: inherit; text-decoration: none;} + & + p {margin: .5rem 0;} + } + h5 { + margin: 0 0 .5rem; + text-transform: uppercase; + letter-spacing: .06rem; + // font-weight: $medium; + } + + .tick-title { + padding-right: 3rem; + } + + .tick-links { + border-left: 1px solid rgba($br-teal, .3); + padding-left: 3rem; + display: flex; + + ul { + padding: 0; + margin-right: 4rem; + list-style: none; + + &:last-child {margin-right: 0;} + + li a { + color: $g20-white; + line-height: 1.6rem; + text-decoration: none; + + &:hover {color: $br-teal;} + span { + font-size: .75em; + opacity: .5; + } + } + } + } + } + } + + #copyright { + width: 100vw; + max-width: $home-body-width; + padding: 1rem 3rem; + color: rgba($article-text, .5); + + p { + margin: 0; + text-align: right; + font-size: .9rem; + } + } + + /////////////////////////// HOMEPAGE MEDIA QUERIES /////////////////////////// + + @media (max-width: 900px) { + #tick .padding-wrapper{ flex-direction: column; - align-items: flex-end; - } - } + align-items: flex-start; + padding-top: 3rem; - @media (max-width: 920px) { - .section { - padding-left: 1.5rem; - padding-right: 1.5rem; - &.hero { padding-top: 2rem; padding-bottom: 3rem;} - &.search, - &#enterprise, &#flux { padding-top: 1.5rem; padding-bottom: 1.5rem; } - } - .hero { - #hero-img{ display: none; } - .half { width: 100%; } - } - .search { - .sidebar--search { max-width: 100%; } + .tick-links { + padding-left: 0; + border: none; + } } } @include media(medium) { - .search .algolia-autocomplete.algolia-autocomplete-right, .algolia-autocomplete.algolia-autocomplete-right { - .ds-dropdown-menu { + #influxdb { + .actions { + max-width: 100%; + padding-top: 3rem; + text-align: center; + } + .hero-img {display: none} + } + #api-guides { + .padding-wrapper{ + flex-direction: column; + align-items: flex-start; + padding: 3rem; + } + .exp-btn-wrapper {width: 100%;} + .exp-btn { + margin-top: 2rem; width: 100%; + background: $br-teal; + color: $br-dark-blue; } } + .product-cards { + flex-direction: column; + .card { + margin-bottom: 2rem; + &:first-child {margin-right: 0;} + &:last-child {margin-left: 0;} + } + } + #learn-more { + margin-bottom: 0; + + h4 {margin-top: 0;} + + .learn-items { + flex-wrap: wrap; + .item { + max-width: 45%; + flex: 1 1 50%; + margin-bottom: 2rem; + } + } + } + } @include media(small) { - .section { + .section {padding: 1rem 1rem 0;} + .search.section {padding-top: .25rem;} + .exp-btn-wrapper .exp-btn {min-width: revert;} + .product-cards .card { + padding: 2rem; + margin-bottom: 1rem; - .quarter, .three-quarters { width: 100%; } - - &.hero { - order: 2; - padding-top: 1.5rem; - padding-bottom: 2rem; - h2 { font-size: 2rem; margin-top: .5rem; } - p { font-size: 1rem; line-height: 1.5rem; } - .actions { flex-direction: column; } - } - &.search { - order: 1; - padding: 0 1rem .5rem; - width: 100%; - - .sidebar--search { - max-width: 100%; - font-size: 1rem; - - input { - padding: .5em 2.15rem .5rem .75rem - } - - &:after { - top: .15rem; - right: .25rem; - font-size: 1.75rem; - } - .algolia-autocomplete.algolia-autocomplete-right, .algolia-autocomplete.algolia-autocomplete-right { - .ds-dropdown-menu { - width: 100vw; - left: -1rem !important; - right: inherit; - } - } - } - } - &#flux, &#resources { - order: 3; padding-left: 0; padding-right: 0; - .card.cta-btns { - padding-top: 0; - a.btn { - display: block; - width: 100%; - margin: 0 0 .5rem; - } - } - } - &#tick-stack { - order: 4; - padding-left: 0; - padding-right: 0; - #tick-cards { - flex-direction: column; - .card { - width: 100%; - border-top: 1px solid rgba($article-text, .15); - } - } - } - &#enterprise { order: 5; padding-left: 0; padding-right: 0; } + h3 {font-size: 2rem;} } - .group-wrapper {flex-direction: column;} - .row { - flex-direction: column; + #influxdb { + .actions {padding: 2rem;} + h2 {font-size: 2.65rem;} } + #api-guides { + .padding-wrapper { + padding: 2rem; + h3 {font-size: 1.6rem;} + p {font-size: 1.1rem;} + } + } + #learn-more { + h4 {margin-left: 1rem;} + .learn-items { + flex-direction: column; + .item {max-width: 100%;} + } + } + #tick .padding-wrapper {padding: 2rem;} } + @media (max-width: 480px) { + #tick .padding-wrapper .tick-links {flex-direction: column;} + } } diff --git a/assets/styles/themes/_theme-dark.scss b/assets/styles/themes/_theme-dark.scss index df9c6ec21..3d0b42b26 100644 --- a/assets/styles/themes/_theme-dark.scss +++ b/assets/styles/themes/_theme-dark.scss @@ -25,7 +25,7 @@ $theme-switch-dark: none; // Search $sidebar-search-bg: $grey15; -$sidebar-search-shadow: rgba($g0-obsidian, .05); +$sidebar-search-shadow: rgba($g0-obsidian, .5); $sidebar-search-highlight: $b-pool; $sidebar-search-text: $g20-white; @@ -179,10 +179,8 @@ $landing-btn-grad: $grad-blue; $landing-btn-grad-hover: $grad-blue-light; // Home page colors -$home-btn-gradient: $grad-NineteenEightyFour; -$home-btn-gradient-hover: $grad-PastelGothic; -$home-tick-bg-gradient: $grad-cool-grey-abyss; -$default-home-card-gradient: $grad-Miyazakisky; +$home-icon-c1: $g20-white; +$home-icon-c2: $body-bg; // Tooltip colors $tooltip-color: $br-chartreuse; diff --git a/assets/styles/themes/_theme-light.scss b/assets/styles/themes/_theme-light.scss index dad4ce3bc..16c4a116f 100644 --- a/assets/styles/themes/_theme-light.scss +++ b/assets/styles/themes/_theme-light.scss @@ -50,8 +50,8 @@ $product-enterprise: $br-pulsar !default; $article-bg: $g20-white !default; $article-heading: $br-pulsar !default; $article-heading-alt: $g5-pepper !default; -$article-text: $g6-smoke !default; -$article-bold: $g6-smoke !default; +$article-text: $br-dark-blue !default; +$article-bold: $br-dark-blue !default; $article-link: $b-pool !default; $article-link-hover: $br-magenta !default; $article-shadow: #cfd1e5 !default; @@ -179,10 +179,8 @@ $landing-btn-grad: $grad-blue !default; $landing-btn-grad-hover: $grad-blue-light !default; // Home page colors -$home-btn-gradient: $grad-NineteenEightyFour !default; -$home-btn-gradient-hover: $grad-PastelGothic !default; -$home-tick-bg-gradient: $grad-grey-mist !default; -$default-home-card-gradient: $grad-PastelGothic !default; +$home-icon-c1: $br-dark-blue !default; +$home-icon-c2: $g20-white !default; // Tooltip colors $tooltip-color: $p-amethyst !default; diff --git a/assets/styles/tools/_color-palette.scss b/assets/styles/tools/_color-palette.scss index 15f437560..5eca3ad52 100644 --- a/assets/styles/tools/_color-palette.scss +++ b/assets/styles/tools/_color-palette.scss @@ -1,5 +1,11 @@ // Influx Color Palette +// Brand Colors 2022 +$br-dark-blue: #020a47; +$br-new-magenta: #d30971; +$br-new-purple: #9b2aff; +$br-teal: #5ee4e4; + // Brand Colors $br-chartreuse: #D6F622; $br-deeppurple: #13002D; @@ -165,4 +171,10 @@ $grey85: #D5D5DD; $grey95: #F1F1F3; $white: #FFFFFF; -$grad-cool-grey-abyss: $grey10, $grey15; \ No newline at end of file +$grad-cool-grey-abyss: $grey10, $grey15; + +////////////////////////////// NEW BRAND GRADIENTS ///////////////////////////// +$grad-burningDusk: $br-new-magenta, $br-new-purple; +$grad-coolDusk: #771cc7, #b2025b; +$grad-tealDream: $b-pool, $br-teal; +$grad-tealDeepSleep: $b-ocean, #0ab8b8; diff --git a/layouts/index.html b/layouts/index.html index 64ac687d9..a7325366e 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -11,21 +11,6 @@
-
- {{ partial "svgs/homepage-hero.svg" }} -
-

InfluxDB Cloud &
InfluxDB OSS 2.x

-

- The most powerful time series database. - Designed to handle high write and query loads. - Run in the cloud with InfluxDB Cloud or on your own hardware with InfluxDB OSS {{ replaceRE "v" "" $influxdbVersionV2 }}. -

-
- InfluxDB Cloud Docs - InfluxDB OSS {{ replaceRE "v" "" $influxdbVersionV2 }} Docs -
-
-
-
-
-
-
-

Flux {{ $fluxVersion }}

-

The functional query and data scripting language.

+
+
+
+

Get started with InfluxDB

+

The time series platform

+ +
+
+

View the InfluxDB documentation

+ +
+
+ +
-
- Get started with Flux - Flux standard library -
+
-
-
-
-
-

InfluxData 1.x TICK stack

-

The leading modern time series platform, built for metrics and events.

+
+
+
+
+

Develop with the InfluxDB API

+

Build your application using the InfluxDB Cloud and InfluxDB OSS APIs.

-

Learn more

-
-
-
-

Telegraf {{ $telegrafVersion }}

-

Collect metrics from stacks, sensors and systems.

-
-

View documentation

+
+
+

View the InfluxDB API Dev Guides

+
-
-
-

InfluxDB {{ $influxdbVersionV1 }}

-

Write and query time series data.

-
-

View documentation

-
-
-
-

Chronograf {{ $chronografVersion }}

-

Visualize and manage time series data.

-
-

View documentation

-
-
-
-

Kapacitor {{ $kapacitorVersion }}

-

Process and alert on time series data.

-
-

View documentation

+
+
-
-
-
-
-

Enterprise offerings

-

Enterprise tools to meet your business needs.

+