Add edits to homepage

This commit is contained in:
Cody Baker 2021-09-10 15:54:19 -06:00
parent 211017bf4a
commit bf35875586
20 changed files with 179 additions and 118 deletions

View File

@ -48,6 +48,7 @@
{% include "templates/company/team.html" %}
{% include "templates/company/press.html" %}
{% include "templates/company/contact.html" %}
{% include "templates/company/newsletter.html" %}
{% include "templates/global/newsletter.html" %}
{% endblock %}

View File

@ -149,7 +149,7 @@ a.card:hover:after,
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
row-gap: 80px;
padding-bottom: 240px;
padding-bottom: 120px;
position: relative;
}
.case-study-cards > div {
@ -270,7 +270,7 @@ a.card:hover:after,
transform: rotate(0);
}
.case-study-card .col-lg-4,
.case-study-card .col-lg-5 {
.case-study-card .col-lg-6 {
opacity: 0;
transform: translateX(24px);
transition: 0.4s opacity, 0.4s transform;
@ -278,17 +278,17 @@ a.card:hover:after,
.case-study-card .col-lg-4 {
transition-delay: 0s;
}
.case-study-card .col-lg-5 {
.case-study-card .col-lg-6 {
transition-delay: 0.2s;
}
.case-study-card.is-open .col-lg-4, .case-study-card.is-open .col-lg-5 {
.case-study-card.is-open .col-lg-4, .case-study-card.is-open .col-lg-6 {
opacity: 1;
transform: none;
}
.case-study-card.is-open .col-lg-4 {
transition-delay: 0.4s;
}
.case-study-card.is-open .col-lg-5 {
.case-study-card.is-open .col-lg-6 {
transition-delay: 0.2s;
}

View File

@ -0,0 +1,19 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="81px" height="81px" viewBox="0 0 81 81" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Group</title>
<defs>
<polygon id="path-1" points="4.44115232e-15 0 80 0 80 79.5155966 4.44115232e-15 79.5155966"></polygon>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Group" transform="translate(0.060000, 0.040000)">
<g id="Group-3">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<g id="Clip-2"></g>
<path d="M80,39.9992187 C80,17.906518 62.0903569,-0.00312518312 39.9976561,-0.00312518312 C17.9049554,-0.00312518312 -0.00468777467,17.906518 -0.00468777467,39.9992187 C-0.00468777467,59.9655449 14.6235912,76.5146395 33.7472899,79.5155966 L33.7472899,51.5623962 L23.5904448,51.5623962 L23.5904448,39.9992187 L33.7472899,39.9992187 L33.7472899,31.1862023 C33.7472899,21.1606149 39.7193586,15.6227904 48.856769,15.6227904 C53.2333535,15.6227904 57.8111999,16.4040862 57.8111999,16.4040862 L57.8111999,26.248413 L52.7669981,26.248413 C47.7977225,26.248413 46.2480223,29.331953 46.2480223,32.4954197 L46.2480223,39.9992187 L57.3424224,39.9992187 L55.568881,51.5623962 L46.2480223,51.5623962 L46.2480223,79.5155966 C65.371721,76.5146395 80,59.9655449 80,39.9992187" id="Fill-1" fill="#1877F2" mask="url(#mask-2)"></path>
</g>
<path d="M55.568881,51.5623962 L57.3424224,39.9992187 L46.2480223,39.9992187 L46.2480223,32.4954197 C46.2480223,29.331953 47.7977225,26.248413 52.7669981,26.248413 L57.8111999,26.248413 L57.8111999,16.4040862 C57.8111999,16.4040862 53.2333535,15.6227904 48.856769,15.6227904 C39.7193586,15.6227904 33.7472899,21.1606149 33.7472899,31.1862023 L33.7472899,39.9992187 L23.5904448,39.9992187 L23.5904448,51.5623962 L33.7472899,51.5623962 L33.7472899,79.5155966 C35.7838936,79.8351466 37.8712815,80.0015626 39.9976561,80.0015626 C42.1240307,80.0015626 44.2114186,79.8351466 46.2480223,79.5155966 L46.2480223,51.5623962 L55.568881,51.5623962" id="Fill-4" fill="#FFFFFF"></path>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.2 KiB

View File

@ -0,0 +1,16 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 248 204" style="enable-background:new 0 0 248 204;" xml:space="preserve">
<style type="text/css">
.st0{fill:#1D9BF0;}
</style>
<g id="Logo_1_">
<path id="white_background" class="st0" d="M221.95,51.29c0.15,2.17,0.15,4.34,0.15,6.53c0,66.73-50.8,143.69-143.69,143.69v-0.04
C50.97,201.51,24.1,193.65,1,178.83c3.99,0.48,8,0.72,12.02,0.73c22.74,0.02,44.83-7.61,62.72-21.66
c-21.61-0.41-40.56-14.5-47.18-35.07c7.57,1.46,15.37,1.16,22.8-0.87C27.8,117.2,10.85,96.5,10.85,72.46c0-0.22,0-0.43,0-0.64
c7.02,3.91,14.88,6.08,22.92,6.32C11.58,63.31,4.74,33.79,18.14,10.71c25.64,31.55,63.47,50.73,104.08,52.76
c-4.07-17.54,1.49-35.92,14.61-48.25c20.34-19.12,52.33-18.14,71.45,2.19c11.31-2.23,22.15-6.38,32.07-12.26
c-3.77,11.69-11.66,21.62-22.2,27.93c10.01-1.18,19.79-3.86,29-7.95C240.37,35.29,231.83,44.14,221.95,51.29z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.5 KiB

After

Width:  |  Height:  |  Size: 3.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.7 KiB

After

Width:  |  Height:  |  Size: 2.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.3 KiB

After

Width:  |  Height:  |  Size: 2.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.7 KiB

After

Width:  |  Height:  |  Size: 3.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.1 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.3 KiB

After

Width:  |  Height:  |  Size: 4.2 KiB

View File

@ -45,10 +45,15 @@
{% include "templates/index/hero.html" %}
{% include "templates/index/why.html" %}
{% include "templates/index/success.html" %}
{% include "templates/index/pullquote.html" %}
{% if false %}
{% include "templates/index/pullquote.html" %}
{% endif %}
{% include "templates/index/performance.html" %}
{% include "templates/index/quickstart.html" %}
{% include "templates/index/community.html" %}
{% include "templates/index/newsletter.html" %}
{% include "templates/global/newsletter.html" %}
{% endblock %}

View File

@ -105,7 +105,18 @@ eval("function _classCallCheck(instance, Constructor) { if (!(instance instanceo
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _components_case_study_card__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./components/case-study-card */ \"../../website/src/js/components/case-study-card.js\");\n/* harmony import */ var _components_case_study_card__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_components_case_study_card__WEBPACK_IMPORTED_MODULE_0__);\n\n\n//# sourceURL=webpack:////Users/cody/Sites/tech.clickhouse/website/src/js/main.js?");
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _components_case_study_card__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./components/case-study-card */ \"../../website/src/js/components/case-study-card.js\");\n/* harmony import */ var _components_case_study_card__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_components_case_study_card__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _utilities_equalize_heights__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./utilities/equalize-heights */ \"../../website/src/js/utilities/equalize-heights.js\");\n/* harmony import */ var _utilities_equalize_heights__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_utilities_equalize_heights__WEBPACK_IMPORTED_MODULE_1__);\n\n\n\n//# sourceURL=webpack:////Users/cody/Sites/tech.clickhouse/website/src/js/main.js?");
/***/ }),
/***/ "../../website/src/js/utilities/equalize-heights.js":
/*!**************************************************************************************!*\
!*** /Users/cody/Sites/tech.clickhouse/website/src/js/utilities/equalize-heights.js ***!
\**************************************************************************************/
/*! no static exports found */
/***/ (function(module, exports) {
eval("function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }\n\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\n\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\n\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }\n\nfunction _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== \"undefined\" && arr[Symbol.iterator] || arr[\"@@iterator\"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i[\"return\"] != null) _i[\"return\"](); } finally { if (_d) throw _e; } } return _arr; }\n\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\n\nvar $allElements = document.querySelectorAll('[equalize-heights]');\nvar groupedElements = {};\n$allElements.forEach(function ($el) {\n var group = $el.getAttribute('equalize-heights');\n groupedElements[group] = groupedElements[group] || [];\n groupedElements[group].push($el);\n});\n\nfunction resizeElements() {\n Object.entries(groupedElements).forEach(function (_ref) {\n var _ref2 = _slicedToArray(_ref, 2),\n group = _ref2[0],\n $elements = _ref2[1];\n\n $elements.forEach(function ($el) {\n var styles = window.getComputedStyle($el);\n\n if ('none' === styles.getPropertyValue('display')) {\n $el.style.display = 'block';\n }\n\n $el.style.minHeight = 'auto';\n });\n var minHeight = $elements.reduce(function (max, $el) {\n if ($el.offsetHeight > max) {\n max = $el.offsetHeight;\n }\n\n return max;\n }, 0);\n $elements.forEach(function ($el) {\n $el.style.display = null;\n $el.style.minHeight = \"\".concat(minHeight, \"px\");\n });\n });\n}\n\nwindow.addEventListener('resize', resizeElements);\nwindow.addEventListener('orientationchange', resizeElements);\nresizeElements();\n\n//# sourceURL=webpack:////Users/cody/Sites/tech.clickhouse/website/src/js/utilities/equalize-heights.js?");
/***/ }),

View File

@ -1 +1,2 @@
import './components/case-study-card'
import './utilities/equalize-heights'

View File

@ -0,0 +1,35 @@
const $allElements = document.querySelectorAll('[equalize-heights]')
const groupedElements = {}
$allElements.forEach(($el) => {
const group = $el.getAttribute('equalize-heights')
groupedElements[group] = groupedElements[group] || []
groupedElements[group].push($el)
})
function resizeElements() {
Object.entries(groupedElements).forEach(([group, $elements]) => {
$elements.forEach(($el) => {
const styles = window.getComputedStyle($el)
if ('none' === styles.getPropertyValue('display')) {
$el.style.display = 'block'
}
$el.style.minHeight = 'auto'
})
const minHeight = $elements.reduce((max, $el) => {
if ($el.offsetHeight > max) {
max = $el.offsetHeight
}
return max
}, 0)
$elements.forEach(($el) => {
$el.style.display = null
$el.style.minHeight = `${minHeight}px`
})
})
}
window.addEventListener('resize', resizeElements)
window.addEventListener('orientationchange', resizeElements)
resizeElements()

View File

@ -3,7 +3,7 @@
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
row-gap: 80px;
padding-bottom: 240px;
padding-bottom: 120px;
position: relative;
> div {
@ -144,7 +144,7 @@
}
.col-lg-4,
.col-lg-5 {
.col-lg-6 {
opacity: 0;
transform: translateX(24px);
transition: 0.4s opacity, 0.4s transform;
@ -154,12 +154,12 @@
transition-delay: 0s;
}
.col-lg-5 {
.col-lg-6 {
transition-delay: 0.2s;
}
&.is-open .col-lg-4,
&.is-open .col-lg-5 {
&.is-open .col-lg-6 {
opacity: 1;
transform: none;
}
@ -168,7 +168,7 @@
transition-delay: 0.4s;
}
&.is-open .col-lg-5 {
&.is-open .col-lg-6 {
transition-delay: 0.2s;
}
}

View File

@ -2,15 +2,11 @@
<div class="container">
<div class="row">
<div class="col-lg-5">
<div class="col-lg-4">
<h2 id="community" class="display-2 mb-5">
{{ _('Join our growing Clickhouse Community') }}
{{ _('Join our growing ClickHouse Community') }}
</h2>
<p class="lead text-muted mb-3">
{{ _('Together we are building the best analytical open source software,.. Join the conversation, ask questions, get answers, and connect.') }}
</p>
<div class="mb-10">
<a href="/blog/en/" class="btn btn-outline-secondary" role="button" rel="nofollow">
@ -18,41 +14,13 @@
</a>
</div>
<div class="has-border-left">
<p class="display-6 mb-1">{{ _('Like ClickHouse?') }}</p>
<p class="mb-3">{{ _('Help to spread the word about it via Facebook, Twitter and LinkedIn!') }}</p>
<div class="social-icons">
<a
rel="external nofollow noreferrer"
target="_blank"
href="https://www.facebook.com/sharer.php?u=https://clickhouse.tech"
title="Facebook"
class="social-icons-facebook"
></a>
<a
rel="external nofollow noreferrer"
target="_blank"
href="https://twitter.com/intent/tweet?url=https://clickhouse.tech"
title="Twitter"
class="social-icons-twitter"
></a>
<a
rel="external nofollow noreferrer"
target="_blank"
href="https://www.linkedin.com/shareArticle?url=https://clickhouse.tech"
title="LinkedIn"
class="social-icons-linkedin"
></a>
</div>
</div>
</div>
<div class="col-lg-7">
<div class="col-lg-8">
<div class="bg-offset-right bg-light" style="bottom:40px;top:40px;"></div>
<div class="row mb-5 align-items-stretch">
<div class="col-lg-6 d-flex align-items-stretch">
<div class="row mx-n2 align-items-stretch">
<div class="col-lg-4 col-md-6 mb-4 px-2 d-flex align-items-stretch">
<a href="https://github.com/ClickHouse/ClickHouse/issues/new/choose" rel="external nofollow noreferrer" target="_blank" class="card text-decoration-none">
<div class="card-body">
@ -65,7 +33,7 @@
</a>
</div>
<div class="col-lg-6 d-flex align-items-stretch">
<div class="col-lg-4 col-md-6 mb-4 px-2 d-flex align-items-stretch">
<a href="https://join.slack.com/t/clickhousedb/shared_invite/zt-rxm3rdrk-lIUmhLC3V8WTaL0TGxsOmg" rel="external nofollow noreferrer" target="_blank" class="card text-decoration-none">
<div class="card-body">
@ -78,9 +46,7 @@
</a>
</div>
</div>
<div class="row mb-5 align-items-stretch">
<div class="col-lg-6 d-flex align-items-stretch">
<div class="col-lg-4 col-md-6 mb-4 px-2 d-flex align-items-stretch">
<a href="https://stackoverflow.com/questions/tagged/clickhouse" rel="external nofollow noreferrer" target="_blank" class="card text-decoration-none">
<div class="card-body">
@ -93,7 +59,7 @@
</a>
</div>
<div class="col-lg-6 d-flex align-items-stretch">
<div class="col-lg-4 col-md-6 mb-4 px-2 d-flex align-items-stretch">
<a href="https://groups.google.com/group/clickhouse" rel="external nofollow noreferrer" target="_blank" class="card text-decoration-none">
<div class="card-body">
@ -106,9 +72,7 @@
</a>
</div>
</div>
<div class="row align-items-stretch">
<div class="col-lg-6 d-flex align-items-stretch">
<div class="col-lg-4 col-md-6 mb-4 px-2 d-flex align-items-stretch">
<a href="https://www.youtube.com/c/ClickHouseDB" rel="external nofollow noreferrer" target="_blank" class="card text-decoration-none">
<div class="card-body">
@ -121,7 +85,7 @@
</a>
</div>
<div class="col-lg-6 d-flex align-items-stretch">
<div class="col-lg-4 col-md-6 mb-4 px-2 d-flex align-items-stretch">
<div rel="external nofollow noreferrer" target="_blank" class="card has-hover">
<div class="card-body">
@ -139,6 +103,45 @@
</div>
</div>
<div class="col-lg-4 col-md-6 mb-4 mb-lg-0 px-2 d-flex align-items-stretch">
<a href="https://www.facebook.com/ClickHouseDB/" rel="external nofollow noreferrer" target="_blank" class="card text-decoration-none">
<div class="card-body">
<img data-src="/images/icons/icon-facebook.svg" alt="ClickHouse at Facebook" title="ClickHouse at Facebook" class="icon mx-auto">
<div class="display-6">Facebook</div>
<p class="font-sm text-muted">Subheader text goes here lorem ipsum sit amet dolor</p>
</div>
</a>
</div>
<div class="col-lg-4 col-md-6 mb-4 mb-lg-0 px-2 d-flex align-items-stretch">
<a href="https://twitter.com/clickhousedb" rel="external nofollow noreferrer" target="_blank" class="card text-decoration-none">
<div class="card-body">
<img data-src="/images/icons/icon-twitter.svg" alt="ClickHouse at Twitter" title="ClickHouse at Twitter" class="icon mx-auto">
<div class="display-6">Twitter</div>
<p class="font-sm text-muted">Subheader text goes here lorem ipsum sit amet dolor</p>
</div>
</a>
</div>
<div class="col-lg-4 col-md-6 px-2 d-flex align-items-stretch">
<a href="https://www.linkedin.com/company/ClickHouseDB/" rel="external nofollow noreferrer" target="_blank" class="card text-decoration-none">
<div class="card-body">
<img data-src="/images/icons/icon-linkedin.png" alt="ClickHouse at LinkedIn" title="ClickHouse at LinkedIn" class="icon mx-auto">
<div class="display-6">LinkedIn</div>
<p class="font-sm text-muted">Subheader text goes here lorem ipsum sit amet dolor</p>
</div>
</a>
</div>
</div>
</div>

View File

@ -1,24 +0,0 @@
<div class="section bg-white pt-8 pb-12">
<div class="section-bg" style="background-image:url('/images/backgrounds/bg-footer-cta.png');width:2440px;"></div>
<div class="container">
<h2 class="display-2 mb-7 mx-auto text-center" style="max-width:720px;">
{{ _('Learn more about Commercial Support and future Cloud plans') }}
</h2>
<div class="card bg-primary-light is-large">
<div class="card-body d-flex align-items-center">
<h2 class="display-3 mb-0">
{{ _('Sign up for our newsletter') }}
</h2>
<div class="ml-auto pl-3" style="max-width: 557px; position: relative;">
<img src="/images/placeholder-newsletter-form.png" height="94" width="557" class="d-block mx-auto" style="aspect-ratio: 557 / 94; height: auto; margin: -14px 0 -26px -20px;">
</div>
</div>
</div>
</div>
</div>

View File

@ -13,18 +13,17 @@
<div class="card-body case-study-card-body case-study-card-body">
<img class="d-block mb-3" src="/images/logos/logo-yandex.png" height="20" width="54" title="Yandex">
<img class="d-block mb-3" src="/images/logos/logo-yandex.png" height="40" width="108" title="Yandex" style="aspect-ratio: 108 / 40;height: auto;">
<div class="row mx-n2">
<div class="col-lg-3 px-2">
<div class="row mx-n2"equalize-heights="case-study-card-row">
<div class="col-lg-2 px-2 d-flex flex-column">
<h3 class="display-3 mb-3">The original usecase</h3>
<div class="case-study-card-toggle mt-auto"></div>
</div>
<div class="col-lg-5 px-2">
<div class="col-lg-6 px-2">
<p class="mb-5 text-dark">{{ _('ClickHouse has been developed initially to power Yandex.Metrica, the second largest web analytics platform in the world, and continues to be the core component of this system.') }}</p>
<p class="mb-5 text-dark">{{ _('ClickHouse was born and in production inside Yandex over a decade ago and now stores 10s of trillions of rows of data serving a query throughput of 2TB per second for Yandex Metrica. It has also become the de facto standard inside Yandex for advertising systems, monitoring and observability data, business intelligence, recommendations platforms, OLAP, and even cars telemetry.') }}</p>
<a class="trailing-link" href="/docs/en/introduction/history/">{{ _('Read the Case Study') }}</a>
@ -32,9 +31,9 @@
<div class="col-lg-4 px-2">
<ul>
<li class="font-weight-bold">13 trillion records</li>
<li class="font-weight-bold">20 billion daily events</li>
<li class="font-weight-bold">17 petabytes of data</li>
<li class="font-weight-bold">Stored 10s of trillions of rows of data</li>
<li class="font-weight-bold">Query throughput of 2TB per second</li>
<li class="font-weight-bold">Became de facto standard inside Yandex</li>
</ul>
</div>
@ -53,16 +52,15 @@
<div class="card-body case-study-card-body">
<img class="d-block mb-3" src="/images/logos/logo-uber.png" height="20" width="57" title="Uber">
<img class="d-block mb-3" src="/images/logos/logo-uber.png" height="40" width="114" title="Uber" style="aspect-ratio: 114 / 40;height: auto;">
<div class="row mx-n2">
<div class="col-lg-3 px-2">
<div class="row mx-n2"equalize-heights="case-study-card-row">
<div class="col-lg-2 px-2 d-flex flex-column">
<h3 class="display-3 mb-3">At Uber</h3>
<div class="case-study-card-toggle mt-auto"></div>
</div>
<div class="col-lg-5 px-2">
<div class="col-lg-6 px-2">
<p class="mb-5 text-dark">{{ _('Uber moved its logging platform to ClickHouse increasing developer productivity and overall reliability of the platform while seeing 3x data compression, 10x performance increase, and ½ the reduction in hardware cost.') }}</p>
@ -93,16 +91,15 @@
<div class="card-body case-study-card-body">
<img class="d-block mb-3" src="/images/logos/logo-ebay.png" height="20" width="50" title="eBay">
<img class="d-block mb-3" src="/images/logos/logo-ebay.png" height="40" width="100" title="eBay" style="aspect-ratio: 100 / 40;height: auto;">
<div class="row mx-n2">
<div class="col-lg-3 px-2">
<div class="row mx-n2"equalize-heights="case-study-card-row">
<div class="col-lg-2 px-2 d-flex flex-column">
<h3 class="display-3">At eBay</h3>
<div class="case-study-card-toggle mt-auto"></div>
</div>
<div class="col-lg-5 px-2">
<div class="col-lg-6 px-2">
<p class="mb-5 text-dark">{{ _('eBay adopted ClickHouse for their real time OLAP events (Logs + Metrics) infrastructure. The simplified architecture with ClickHouse allowed them to reduce their DevOps activity and troubleshooting, reduced the overall infrastructure by 90%%, and they saw a stronger integration with Grafana and ClickHouse for visualization and alerting.') }}</p>
@ -133,16 +130,15 @@
<div class="card-body case-study-card-body">
<img class="d-block mb-3" src="/images/logos/logo-cloudflare.png" height="20" width="141" title="Cloudflare">
<img class="d-block mb-3" src="/images/logos/logo-cloudflare.png" height="40" width="282" title="Cloudflare" style="aspect-ratio: 282 / 40;height: auto;">
<div class="row mx-n2">
<div class="col-lg-3 px-2">
<div class="row mx-n2"equalize-heights="case-study-card-row">
<div class="col-lg-2 px-2 d-flex flex-column">
<h3 class="display-3">At Cloudflare</h3>
<div class="case-study-card-toggle mt-auto"></div>
</div>
<div class="col-lg-5 px-2">
<div class="col-lg-6 px-2">
<p class="mb-5 text-dark">{{ _('Cloudflare was having challenges scaling their CitusDB-based system which had a high TCO and maintenance costs due to the complex architecture. By moving their HTTP analytics data to ClickHouse they were able to scale to 8M requests per second, deleted 10s of thousands of lines of code, reduced their MTTR, and saw a 7x improvement on customer queries per second they could serve.') }}</p>
@ -173,16 +169,15 @@
<div class="card-body case-study-card-body">
<img class="d-block mb-3" src="/images/logos/logo-spotify.png" height="20" width="67" title="Spotify">
<img class="d-block mb-3" src="/images/logos/logo-spotify.png" height="40" width="134" title="Spotify" style="aspect-ratio: 134 / 40;height: auto;">
<div class="row mx-n2">
<div class="col-lg-3 px-2">
<div class="row mx-n2"equalize-heights="case-study-card-row">
<div class="col-lg-2 px-2 d-flex flex-column">
<h3 class="display-3">At Spotify</h3>
<div class="case-study-card-toggle mt-auto"></div>
</div>
<div class="col-lg-5 px-2">
<div class="col-lg-6 px-2">
<p class="mb-5 text-dark">{{ _('Spotify\'s A/B Experimentation platform is serving thousands of sub-second queries per second on petabyte-scale datasets with Clickhouse. They reduced the amount of low-variance work by an order of magnitude and enabled feature teams to self-serve insights by introducing a unified SQL interface for Data Platform and tools for automatic decision making for Experimentation.') }}</p>
@ -213,16 +208,15 @@
<div class="card-body case-study-card-body">
<img class="d-block mb-3" src="/images/logos/logo-deutsche-bank.png" height="20" width="102" title="Deutsche Bank">
<img class="d-block mb-3" src="/images/logos/logo-deutsche-bank.png" height="40" width="204" title="Deutsche Bank" style="aspect-ratio: 204 / 40;height: auto;">
<div class="row mx-n2">
<div class="col-lg-3 px-2">
<div class="row mx-n2"equalize-heights="case-study-card-row">
<div class="col-lg-2 px-2 d-flex flex-column">
<h3 class="display-3">At Deutsche Bank</h3>
<div class="case-study-card-toggle mt-auto"></div>
</div>
<div class="col-lg-5 px-2">
<div class="col-lg-6 px-2">
<p class="mb-5 text-dark">{{ _('ClickHouse helps serve the Client Analytics platform for reporting, deep data analysis as well as advanced data science to provide Deutsche Banks front office a clear view on their client\'s activity and profitability.') }}</p>