diff --git a/website/company.html b/website/company.html index 1f72e1281a7..1b8aee71632 100644 --- a/website/company.html +++ b/website/company.html @@ -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 %} diff --git a/website/css/main.css b/website/css/main.css index a71c07c5153..62dec9800b1 100644 --- a/website/css/main.css +++ b/website/css/main.css @@ -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; } diff --git a/website/images/icons/icon-facebook.svg b/website/images/icons/icon-facebook.svg new file mode 100644 index 00000000000..910235c7ed8 --- /dev/null +++ b/website/images/icons/icon-facebook.svg @@ -0,0 +1,19 @@ + + + Group + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/website/images/icons/icon-linkedin.png b/website/images/icons/icon-linkedin.png new file mode 100644 index 00000000000..8bc2d53ce28 Binary files /dev/null and b/website/images/icons/icon-linkedin.png differ diff --git a/website/images/icons/icon-twitter.svg b/website/images/icons/icon-twitter.svg new file mode 100644 index 00000000000..b25ac9353ac --- /dev/null +++ b/website/images/icons/icon-twitter.svg @@ -0,0 +1,16 @@ + + + diff --git a/website/images/logos/logo-cloudflare.png b/website/images/logos/logo-cloudflare.png index fd5faecf6f1..84b81dd2215 100644 Binary files a/website/images/logos/logo-cloudflare.png and b/website/images/logos/logo-cloudflare.png differ diff --git a/website/images/logos/logo-deutsche-bank.png b/website/images/logos/logo-deutsche-bank.png index 54b4ba5cd4c..ba1de3a2873 100644 Binary files a/website/images/logos/logo-deutsche-bank.png and b/website/images/logos/logo-deutsche-bank.png differ diff --git a/website/images/logos/logo-ebay.png b/website/images/logos/logo-ebay.png index f5104ba9c66..6234cd2ac22 100644 Binary files a/website/images/logos/logo-ebay.png and b/website/images/logos/logo-ebay.png differ diff --git a/website/images/logos/logo-spotify.png b/website/images/logos/logo-spotify.png index 9d9c6e2bec3..bc7c102e6ae 100644 Binary files a/website/images/logos/logo-spotify.png and b/website/images/logos/logo-spotify.png differ diff --git a/website/images/logos/logo-uber.png b/website/images/logos/logo-uber.png index 776b14f7f1a..cb820664636 100644 Binary files a/website/images/logos/logo-uber.png and b/website/images/logos/logo-uber.png differ diff --git a/website/images/logos/logo-yandex.png b/website/images/logos/logo-yandex.png index 24cb9e16aad..900fd13a683 100644 Binary files a/website/images/logos/logo-yandex.png and b/website/images/logos/logo-yandex.png differ diff --git a/website/index.html b/website/index.html index 365d2872978..093d8ae4a99 100644 --- a/website/index.html +++ b/website/index.html @@ -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 %} diff --git a/website/js/main.js b/website/js/main.js index f4a252a9ea2..9466b6849ba 100644 --- a/website/js/main.js +++ b/website/js/main.js @@ -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?"); /***/ }), diff --git a/website/src/js/main.js b/website/src/js/main.js index a9f6f50dbb1..e86e5bda09a 100644 --- a/website/src/js/main.js +++ b/website/src/js/main.js @@ -1 +1,2 @@ import './components/case-study-card' +import './utilities/equalize-heights' diff --git a/website/src/js/utilities/equalize-heights.js b/website/src/js/utilities/equalize-heights.js new file mode 100644 index 00000000000..9d3dc6c604a --- /dev/null +++ b/website/src/js/utilities/equalize-heights.js @@ -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() diff --git a/website/src/scss/components/_case-study-card.scss b/website/src/scss/components/_case-study-card.scss index 06054e02e9e..1aee4b02ad7 100644 --- a/website/src/scss/components/_case-study-card.scss +++ b/website/src/scss/components/_case-study-card.scss @@ -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; } } diff --git a/website/templates/company/newsletter.html b/website/templates/global/newsletter.html similarity index 100% rename from website/templates/company/newsletter.html rename to website/templates/global/newsletter.html diff --git a/website/templates/index/community.html b/website/templates/index/community.html index ecdb11baf9c..4e117984d37 100644 --- a/website/templates/index/community.html +++ b/website/templates/index/community.html @@ -2,15 +2,11 @@
-
+

- {{ _('Join our growing Clickhouse Community') }} + {{ _('Join our growing ClickHouse Community') }}

- -

- {{ _('Together we are building the best analytical open source software,.. Join the conversation, ask questions, get answers, and connect.') }} -

@@ -18,41 +14,13 @@
-
-

{{ _('Like ClickHouse?') }}

-

{{ _('Help to spread the word about it via Facebook, Twitter and LinkedIn!') }}

- -
-
-
+
-
-
+
+
@@ -65,7 +33,7 @@
-
+
@@ -78,9 +46,7 @@
-
-
-
+
@@ -93,7 +59,7 @@
-
+
@@ -106,9 +72,7 @@
-
-
-
+
@@ -121,7 +85,7 @@
-
+
@@ -139,6 +103,45 @@
+
+ + +
+ + ClickHouse at Facebook +
Facebook
+

Subheader text goes here lorem ipsum sit amet dolor

+ +
+ + +
+
+ + +
+ + ClickHouse at Twitter +
Twitter
+

Subheader text goes here lorem ipsum sit amet dolor

+ +
+ + +
+
+ + +
+ + ClickHouse at LinkedIn +
LinkedIn
+

Subheader text goes here lorem ipsum sit amet dolor

+ +
+ + +
diff --git a/website/templates/index/newsletter.html b/website/templates/index/newsletter.html deleted file mode 100644 index 1fe669956fd..00000000000 --- a/website/templates/index/newsletter.html +++ /dev/null @@ -1,24 +0,0 @@ -
-
-
- -

- {{ _('Learn more about Commercial Support and future Cloud plans') }} -

- -
-
- -

- {{ _('Sign up for our newsletter') }} -

- -
- -
- -
-
- -
-
diff --git a/website/templates/index/success.html b/website/templates/index/success.html index 98dd68229a8..a78ebc7daf8 100644 --- a/website/templates/index/success.html +++ b/website/templates/index/success.html @@ -13,18 +13,17 @@
- + -
-
+
+
-

The original usecase

-
+
-

{{ _('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.') }}

+

{{ _('ClickHouse was born and in production inside Yandex over a decade ago and now stores 10’s 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.') }}

{{ _('Read the Case Study') }} @@ -32,9 +31,9 @@
    -
  • 13 trillion records
    • -
  • 20 billion daily events
    • -
  • 17 petabytes of data
    • +
  • Stored 10’s of trillions of rows of data
    • +
  • Query throughput of 2TB per second
    • +
  • Became de facto standard inside Yandex
@@ -53,16 +52,15 @@
- + -
-
+
+
-

At Uber

-
+

{{ _('Uber moved it’s 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.') }}

@@ -93,16 +91,15 @@
- + -
-
+
+
-

At eBay

-
+

{{ _('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.') }}

@@ -133,16 +130,15 @@
- + -
-
+
+
-

At Cloudflare

-
+

{{ _('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 10’s of thousands of lines of code, reduced their MTTR, and saw a 7x improvement on customer queries per second they could serve.') }}

@@ -173,16 +169,15 @@
- + -
-
+
+
-

At Spotify

-
+

{{ _('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.') }}

@@ -213,16 +208,15 @@
- + -
-
+
+
-

At Deutsche Bank

-
+

{{ _('ClickHouse helps serve the Client Analytics platform for reporting, deep data analysis as well as advanced data science to provide Deutsche Bank’s front office a clear view on their client\'s activity and profitability.') }}