thevar1able/ClickHouse
1
0
Fork 0
mirror of https://github.com/ClickHouse/ClickHouse.git synced 2024-11-25 00:52:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add edits per beta feedback

Browse Source
This commit is contained in:
Cody Baker 2021-09-16 11:43:39 -06:00
parent 3c48622a37
commit 2596298ce4
37 changed files with 1050 additions and 343 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
website/css/bootstrap.css vendored
View File

@ -438,56 +438,56 @@ h6, .h6 {
}
.lead {
font-size: 1.5rem;
font-size: 1.375rem;
font-weight: 400;
}
@media (max-width: 1200px) {
.lead {
font-size: calc(1.275rem + 0.3vw);
font-size: calc(1.2625rem + 0.15vw);
}
}
.display-1 {
font-size: 5rem;
font-size: 4rem;
font-weight: 600;
line-height: 1.125;
}
@media (max-width: 1200px) {
.display-1 {
font-size: calc(1.625rem + 4.5vw);
font-size: calc(1.525rem + 3.3vw);
}
}
.display-2 {
font-size: 3rem;
font-size: 2.5rem;
font-weight: 600;
line-height: 1.125;
}
@media (max-width: 1200px) {
.display-2 {
font-size: calc(1.425rem + 2.1vw);
font-size: calc(1.375rem + 1.5vw);
}
}
.display-3 {
font-size: 2.25rem;
font-size: 2rem;
font-weight: 500;
line-height: 1.125;
}
@media (max-width: 1200px) {
.display-3 {
font-size: calc(1.35rem + 1.2vw);
font-size: calc(1.325rem + 0.9vw);
}
}
.display-4 {
font-size: 1.875rem;
font-size: 1.75rem;
font-weight: 500;
line-height: 1.125;
}
@media (max-width: 1200px) {
.display-4 {
font-size: calc(1.3125rem + 0.75vw);
font-size: calc(1.3rem + 0.6vw);
}
}
@ -631,12 +631,12 @@ pre code {
}
@media (min-width: 768px) {
.container {
max-width: 748px;
max-width: 958px;
}
}
@media (min-width: 980px) {
.container {
max-width: 948px;
max-width: 1008px;
}
}
@media (min-width: 1240px) {
@ -665,12 +665,12 @@ pre code {
}
@media (min-width: 768px) {
.container-md, .container-sm, .container-xs, .container {
max-width: 748px;
max-width: 958px;
}
}
@media (min-width: 980px) {
.container-lg, .container-md, .container-sm, .container-xs, .container {
max-width: 948px;
max-width: 1008px;
}
}
@media (min-width: 1240px) {

182
website/css/main.css
View File

@ -236,15 +236,25 @@ a.card:hover:after,
position: absolute;
right: 0;
top: 40px;
transform: translateX(30%);
transition: 0.4s transform;
transition-delay: 0.6s;
width: 100%;
z-index: 1;
}
}
@media screen and (min-width: 980px) and (min-width: 1240px) {
.case-study-card:before {
transform: translateX(10%);
}
}
@media screen and (min-width: 980px) {
.case-study-card.is-open:before {
transform: translateX(60%);
transition-delay: 0s;
}
}
@media screen and (min-width: 980px) {
.case-study-card-wrap {
align-items: stretch;
display: flex;
@ -256,18 +266,24 @@ a.card:hover:after,
width: calc(200% + 42px);
z-index: 2;
}
}
@media screen and (min-width: 980px) {
.case-study-card.is-open .case-study-card-wrap {
transition-delay: 0s;
width: 100%;
}
}
@media screen and (min-width: 980px) {
.case-study-card-body {
display: flex;
flex-direction: column;
padding-right: 112px !important;
padding-right: 80px !important;
}
.case-study-card-body > .row {
align-self: stretch;
}
}
@media screen and (min-width: 980px) {
.case-study-card-toggle {
background: #fff;
box-shadow: 0 8px 20px rgba(108, 117, 125, 0.2);
@ -291,33 +307,55 @@ a.card:hover:after,
.case-study-card-toggle:after {
transform: rotate(90deg);
}
}
@media screen and (min-width: 980px) {
.case-study-card.is-open .case-study-card-toggle:before {
opacity: 0;
transform: rotate(-90deg);
}
}
@media screen and (min-width: 980px) {
.case-study-card.is-open .case-study-card-toggle:after {
transform: rotate(0);
}
.case-study-card .col-lg-4,
.case-study-card .col-lg-6 {
}
@media screen and (min-width: 980px) {
.case-study-card .col-lg-3,
.case-study-card .col-lg-auto {
opacity: 0;
transform: translateX(24px);
transition: 0.4s opacity, 0.4s transform;
}
.case-study-card .col-lg-4 {
}
@media screen and (min-width: 980px) {
.case-study-card .col-lg-3 {
transition-delay: 0s;
}
.case-study-card .col-lg-6 {
}
@media screen and (min-width: 980px) {
.case-study-card .col-lg-auto {
transition-delay: 0.2s;
}
.case-study-card.is-open .col-lg-4, .case-study-card.is-open .col-lg-6 {
}
@media screen and (min-width: 980px) and (min-width: 980px) {
.case-study-card .col-lg-auto {
max-width: 605px;
width: calc(100% - 319px);
}
}
@media screen and (min-width: 980px) {
.case-study-card.is-open .col-lg-3, .case-study-card.is-open .col-lg-auto {
opacity: 1;
transform: none;
}
.case-study-card.is-open .col-lg-4 {
}
@media screen and (min-width: 980px) {
.case-study-card.is-open .col-lg-3 {
transition-delay: 0.4s;
}
.case-study-card.is-open .col-lg-6 {
}
@media screen and (min-width: 980px) {
.case-study-card.is-open .col-lg-auto {
transition-delay: 0.2s;
}
}
@ -326,6 +364,41 @@ a.card:hover:after,
white-space: nowrap;
}
.form-control {
border: 1px solid #6c757d;
border-radius: 6px;
box-shadow: 0 8px 20px rgba(108, 117, 125, 0.2);
color: #212529;
height: auto;
min-height: 48px;
padding: 12px 16px;
width: 100%;
}
.form-control:focus {
border-color: #212529;
box-shadow: 0 8px 20px rgba(108, 117, 125, 0.2);
color: #212529;
}
.form-control::-moz-placeholder {
color: #6c757d;
}
.form-control:-ms-input-placeholder {
color: #6c757d;
}
.form-control::placeholder {
color: #6c757d;
}
select.form-control {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
select.form-control:not([data-chosen]) {
color: #6c757d;
}
.hero {
background-repeat: no-repeat;
background-position: center;
@ -387,6 +460,10 @@ hr.is-yellow {
display: block;
height: 48px;
margin-bottom: 24px;
-o-object-fit: contain;
object-fit: contain;
-o-object-position: center;
object-position: center;
}
@media screen and (min-width: 576px) {
.icon {
@ -537,10 +614,10 @@ img {
}
.photo-frame {
background: #fff;
border: 6px solid #257af4;
background: rgba(255, 255, 255, 0.6);
border-radius: 100%;
box-shadow: 0 8px 20px rgba(108, 117, 125, 0.2);
display: block;
margin-bottom: 24px;
max-width: 160px;
overflow: hidden;
@ -696,9 +773,14 @@ img {
left: 1px;
position: absolute;
right: 1px;
top: 76px;
top: 68px;
z-index: 10;
}
@media screen and (min-width: 1240px) {
.tabs:before {
top: 76px;
}
}
.tabs-body {
background: #fff;
border-color: #6c757d;
@ -706,21 +788,41 @@ img {
border-style: solid;
border-width: 1px;
box-shadow: 0 8px 20px rgba(108, 117, 125, 0.2);
padding: 40px;
padding: 24px;
}
@media screen and (min-width: 980px) {
.tabs-body {
padding: 32px;
}
}
@media screen and (min-width: 1240px) {
.tabs-body {
padding: 40px;
}
}
.tabs .nav-tabs {
border-bottom: 0;
flex-wrap: nowrap;
height: 84px;
height: 76px;
margin: -20px -20px -9px;
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 20px, #000 calc(100% - 20px), transparent 100%);
mask-image: linear-gradient(90deg, transparent 0%, #000 20px, #000 calc(100% - 20px), transparent 100%);
overflow: auto;
overflow-x: auto;
overflow: scroll;
overflow-x: scroll;
overflow-y: visible;
padding: 20px 20px 0;
position: relative;
}
@media screen and (min-width: 940px) {
.tabs .nav-tabs {
overflow: visible;
}
}
@media screen and (min-width: 1240px) {
.tabs .nav-tabs {
height: 84px;
}
}
.tabs .nav-link {
align-items: center;
border-bottom: 0;
@ -728,24 +830,45 @@ img {
display: flex;
font-size: 0.875rem;
flex-shrink: 0;
height: 64px;
height: 56px;
justify-content: center;
padding: 0 16px 8px;
padding: 0 12px 8px;
text-align: center;
white-space: nowrap;
}
@media screen and (min-width: 1240px) {
.tabs .nav-link {
height: 64px;
padding: 0 16px 8px;
}
}
.tabs .nav-link.active {
background: #fff;
box-shadow: 0 -4px 8px rgba(108, 117, 125, 0.1);
font-weight: 700;
padding: 0 32px 8px;
padding: 0 16px 8px;
}
@media screen and (min-width: 980px) {
.tabs .nav-link.active {
padding: 0 24px 8px;
}
}
@media screen and (min-width: 1240px) {
.tabs .nav-link.active {
padding: 0 32px 8px;
}
}
.tab-pane pre {
background: #212529;
border-radius: 16px;
color: #fff;
padding: 32px 24px;
padding: 24px 16px;
}
@media screen and (min-width: 1240px) {
.tab-pane pre {
padding: 32px 24px;
}
}
.trailing-link {
@ -807,15 +930,32 @@ ul.has-separators li:not(:last-child) {
}
.bg-offset-right {
bottom: 0;
left: -24px;
position: absolute;
top: 0;
width: calc(100vw + 24px);
z-index: -1;
}
@media screen and (min-width: 1240px) {
.bg-offset-right {
left: -96px;
width: calc(100vw + 96px);
}
}
.bg-inset-right {
bottom: 0;
left: 40px;
position: absolute;
top: 0;
width: 100vw;
width: calc(100vw - 40px);
z-index: -1;
}
@media screen and (min-width: 980px) {
.bg-offset-right {
.bg-inset-right {
left: 96px;
width: calc(100vw - 96px);
}
}

BIN
website/images/logos/logo-cloudflare.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.6 KiB

25
website/images/logos/logo-cloudflare.svg Normal file
View File

@ -0,0 +1,25 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="1062px" height="155px" viewBox="0 0 1062 155" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>cf-logo-h</title>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="cf-logo-h" fill-rule="nonzero">
<g id="Group" transform="translate(367.600000, 95.800000)" fill="#404041">
<polygon id="Path" points="77.1 1.1 92.7 1.1 92.7 43.6 119.8 43.6 119.8 57.2 77.1 57.2"></polygon>
<path d="M135.9,29.3 L135.9,29.2 C135.9,13.1 148.9,0 166.2,0 C183.5,0 196.3,12.9 196.3,29 L196.3,29.2 C196.3,45.3 183.3,58.4 166,58.4 C148.8,58.3 135.9,45.4 135.9,29.3 M180.5,29.3 L180.5,29.2 C180.5,21.1 174.7,14.1 166.1,14.1 C157.6,14.1 151.9,21 151.9,29.1 L151.9,29.3 C151.9,37.4 157.7,44.4 166.2,44.4 C174.8,44.3 180.5,37.4 180.5,29.3" id="Shape"></path>
<path d="M215.4,32.6 L215.4,1.1 L231.2,1.1 L231.2,32.3 C231.2,40.4 235.3,44.2 241.5,44.2 C247.7,44.2 251.8,40.5 251.8,32.7 L251.8,1.1 L267.6,1.1 L267.6,32.2 C267.6,50.3 257.3,58.2 241.3,58.2 C225.4,58.3 215.4,50.2 215.4,32.6" id="Path"></path>
<path d="M291.4,1.1 L313.1,1.1 C333.1,1.1 344.8,12.6 344.8,28.8 L344.8,29 C344.8,45.2 333,57.2 312.8,57.2 L291.5,57.2 L291.4,1.1 L291.4,1.1 Z M313.3,43.4 C322.6,43.4 328.8,38.3 328.8,29.2 L328.8,29 C328.8,20 322.6,14.8 313.3,14.8 L307,14.8 L307,43.3 L313.3,43.4 L313.3,43.4 Z" id="Shape"></path>
<polygon id="Path" points="367.3 1.1 412.2 1.1 412.2 14.8 382.8 14.8 382.8 24.3 409.4 24.3 409.4 37.2 382.8 37.2 382.8 57.2 367.3 57.2"></polygon>
<polygon id="Path" points="433.8 1.1 449.3 1.1 449.3 43.6 476.5 43.6 476.5 57.2 433.8 57.2"></polygon>
<path d="M517.1,0.7 L532.1,0.7 L556,57.2 L539.3,57.2 L535.2,47.2 L513.6,47.2 L509.6,57.2 L493.3,57.2 L517.1,0.7 Z M530.8,35.1 L524.6,19.2 L518.3,35.1 L530.8,35.1 Z" id="Shape"></path>
<path d="M576,1.1 L602.5,1.1 C611.1,1.1 617,3.3 620.8,7.2 C624.1,10.4 625.8,14.7 625.8,20.3 L625.8,20.5 C625.8,29.1 621.2,34.8 614.3,37.7 L627.7,57.3 L609.7,57.3 L598.4,40.3 L591.6,40.3 L591.6,57.3 L576.1,57.3 L576,1.1 L576,1.1 Z M601.8,28.1 C607.1,28.1 610.1,25.5 610.1,21.5 L610.1,21.2 C610.1,16.8 606.9,14.6 601.7,14.6 L591.5,14.6 L591.5,28.1 L601.8,28.1 L601.8,28.1 Z" id="Shape"></path>
<polygon id="Path" points="648.2 1.1 693.3 1.1 693.3 14.4 663.6 14.4 663.6 22.8 690.5 22.8 690.5 35.1 663.6 35.1 663.6 44 693.7 44 693.7 57.2 648.2 57.2"></polygon>
<path d="M43.1,35.9 C40.9,40.8 36.3,44.3 30.3,44.3 C21.8,44.3 16,37.2 16,29.2 L16,29 C16,20.9 21.7,14 30.2,14 C36.6,14 41.5,17.9 43.5,23.3 L59.9,23.3 C57.3,9.9 45.5,0 30.3,0 C13,0 5.68434189e-14,13.1 5.68434189e-14,29.2 L5.68434189e-14,29.4 C5.68434189e-14,45.5 12.8,58.4 30.1,58.4 C44.9,58.4 56.5,48.8 59.5,36 L43.1,35.9 L43.1,35.9 Z" id="Path"></path>
</g>
<g id="Group">
<polygon id="Path" fill="#FFFFFF" points="312.8 91.6 269.9 67 262.5 63.8 87 65.1 87 154.1 312.8 154.2"></polygon>
<path d="M234.7,146 C236.8,138.8 236,132.2 232.5,127.3 C229.3,122.8 223.9,120.2 217.4,119.9 L94.3,118.3 C93.5,118.3 92.8,117.9 92.4,117.3 C92,116.7 91.9,115.9 92.1,115.1 C92.5,113.9 93.7,113 95,112.9 L219.2,111.3 C233.9,110.6 249.9,98.7 255.5,84.1 L262.6,65.6 C262.9,64.8 263,64 262.8,63.2 C254.8,27 222.5,1.42108547e-14 183.9,1.42108547e-14 C148.3,1.42108547e-14 118.1,23 107.3,54.9 C100.3,49.7 91.4,46.9 81.8,47.8 C64.7,49.5 51,63.2 49.3,80.3 C48.9,84.7 49.2,89 50.2,93 C22.3,93.8 1.42108547e-14,116.6 1.42108547e-14,144.7 C1.42108547e-14,147.2 0.2,149.7 0.5,152.2 C0.7,153.4 1.7,154.3 2.9,154.3 L230.1,154.3 C231.4,154.3 232.6,153.4 233,152.1 L234.7,146 Z" id="Path" fill="#F38020"></path>
<path d="M273.9,66.9 C272.8,66.9 271.6,66.9 270.5,67 C269.7,67 269,67.6 268.7,68.4 L263.9,85.1 C261.8,92.3 262.6,98.9 266.1,103.8 C269.3,108.3 274.7,110.9 281.2,111.2 L307.4,112.8 C308.2,112.8 308.9,113.2 309.3,113.8 C309.7,114.4 309.8,115.3 309.6,116 C309.2,117.2 308,118.1 306.7,118.2 L279.4,119.8 C264.6,120.5 248.7,132.4 243.1,147 L241.1,152.1 C240.7,153.1 241.4,154.1 242.5,154.1 L336.3,154.1 C337.4,154.1 338.4,153.4 338.7,152.3 C340.3,146.5 341.2,140.4 341.2,134.1 C341.2,97 311.1,66.9 273.9,66.9" id="Path" fill="#FAAE40"></path>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

BIN
website/images/photos/photo-aaron-katz.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 34 KiB

After

Width:  |  Height:  |  Size: 31 KiB

BIN
website/images/photos/photo-alexey-milovidov.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 19 KiB

BIN
website/images/photos/photo-arno-van-driel.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 19 KiB

BIN
website/images/photos/photo-brian-hunter.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

BIN
website/images/photos/photo-dorota-szeremeta.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 23 KiB

After

Width:  |  Height:  |  Size: 22 KiB

BIN
website/images/photos/photo-ivan-blinkov.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 21 KiB

After

Width:  |  Height:  |  Size: 22 KiB

BIN
website/images/photos/photo-jason-chan.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 17 KiB

BIN
website/images/photos/photo-kristina-frost.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
website/images/photos/photo-mike-hayes.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 31 KiB

After

Width:  |  Height:  |  Size: 29 KiB

BIN
website/images/photos/photo-placeholder.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
website/images/photos/photo-richard-raposa.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

BIN
website/images/photos/photo-thom-oconner.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 32 KiB

After

Width:  |  Height:  |  Size: 29 KiB

BIN
website/images/photos/photo-yury-izrailevsky.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 17 KiB

14
website/src/scss/_variables.scss
View File

@ -139,8 +139,8 @@ $grid-breakpoints: (
$container-max-widths: (
xs: 576px,
sm: 576px,
md: 748px,
lg: 948px,
md: 958px,
lg: 1008px,
xl: 1118px
);
@ -206,10 +206,10 @@ $headings-font-weight: 500;
$headings-line-height: 1.125;
$headings-color: null;
$display1-size: 80px;
$display2-size: 48px;
$display3-size: 36px;
$display4-size: 30px;
$display1-size: 64px;
$display2-size: 40px;
$display3-size: 32px;
$display4-size: 28px;
$display5-size: 20px;
$display6-size: 14px;
@ -221,7 +221,7 @@ $display5-weight: 500;
$display6-weight: 700;
$display-line-height: $headings-line-height;
$lead-font-size: $font-size-base * 1.5;
$lead-font-size: 22px;
$lead-font-weight: 400;
$text-muted: $gray-700;

28
website/src/scss/components/_case-study-card.scss
View File

@ -88,10 +88,15 @@
position: absolute;
right: 0;
top: 40px;
transform: translateX(30%);
transition: 0.4s transform;
transition-delay: 0.6s;
width: 100%;
z-index: 1;
@media screen and (min-width: 1240px) {
transform: translateX(10%);
}
}
&.is-open:before {
@ -119,7 +124,7 @@
&-body {
display: flex;
flex-direction: column;
padding-right: 112px !important;
padding-right: 80px !important;
> .row {
align-self: stretch;
@ -162,32 +167,37 @@
transform: rotate(0);
}
.col-lg-4,
.col-lg-6 {
.col-lg-3,
.col-lg-auto {
opacity: 0;
transform: translateX(24px);
transition: 0.4s opacity, 0.4s transform;
}
.col-lg-4 {
.col-lg-3 {
transition-delay: 0s;
}
.col-lg-6 {
.col-lg-auto {
transition-delay: 0.2s;
@media screen and (min-width: 980px) {
max-width: 605px;
width: calc(100% - 319px);
}
}
&.is-open .col-lg-4,
&.is-open .col-lg-6 {
&.is-open .col-lg-3,
&.is-open .col-lg-auto {
opacity: 1;
transform: none;
}
&.is-open .col-lg-4 {
&.is-open .col-lg-3 {
transition-delay: 0.4s;
}
&.is-open .col-lg-6 {
&.is-open .col-lg-auto {
transition-delay: 0.2s;
}
}

28
website/src/scss/components/_form.scss Normal file
View File

@ -0,0 +1,28 @@
.form-control {
border: 1px solid $gray-700;
border-radius: 6px;
box-shadow: $box-shadow;
color: $black;
height: auto;
min-height: 48px;
padding: 12px 16px;
width: 100%;
&:focus {
border-color: $black;
box-shadow: $box-shadow;
color: $black;
}
&::placeholder {
color: $gray-700;
}
}
select.form-control {
appearance: none;
}
select.form-control:not([data-chosen]) {
color: $gray-700;
}

2
website/src/scss/components/_icon.scss
View File

@ -2,6 +2,8 @@
display: block;
height: 48px;
margin-bottom: $spacer * 3;
object-fit: contain;
object-position: center;
@media screen and (min-width: 576px) {
height: 64px;

5
website/src/scss/components/_photo-frame.scss
View File

@ -1,8 +1,9 @@
.photo-frame {
background: $white;
border: 6px solid $color-primary-accent-blue;
background: rgba($white, 0.6);
//border: 6px solid $color-primary-accent-blue;
border-radius: 100%;
box-shadow: $box-shadow;
display: block;
margin-bottom: $spacer * 3;
max-width: 160px;
overflow: hidden;

55
website/src/scss/components/_tabs.scss
View File

@ -10,8 +10,12 @@
left: 1px;
position: absolute;
right: 1px;
top: 76px;
top: 68px;
z-index: 10;
@media screen and (min-width: 1240px) {
top: 76px;
}
}
&-body {
@ -21,20 +25,36 @@
border-style: solid;
border-width: $border-width;
box-shadow: $box-shadow;
padding: 40px;
padding: $spacer * 3;
@media screen and (min-width: 980px) {
padding: $spacer * 4;
}
@media screen and (min-width: 1240px) {
padding: $spacer * 5;
}
}
.nav-tabs {
border-bottom: 0;
flex-wrap: nowrap;
height: 76px + $border-radius;
height: 68px + $border-radius;
margin: -20px -20px #{-($border-radius + $border-width)};
mask-image: linear-gradient(90deg, transparent 0%, #000 20px, #000 calc(100% - 20px), transparent 100%);
overflow: auto;
overflow-x: auto;
overflow: scroll;
overflow-x: scroll;
overflow-y: visible;
padding: 20px 20px 0;
position: relative;
@media screen and (min-width: 940px) {
overflow: visible;
}
@media screen and (min-width: 1240px) {
height: 76px + $border-radius;
}
}
.nav-link {
@ -44,18 +64,31 @@
display: flex;
font-size: $font-size-sm;
flex-shrink: 0;
height: 56px + $border-radius;
height: 48px + $border-radius;
justify-content: center;
padding: 0 16px $border-radius;
padding: 0 12px $border-radius;
text-align: center;
white-space: nowrap;
@media screen and (min-width: 1240px) {
height: 56px + $border-radius;
padding: 0 16px $border-radius;
}
}
.nav-link.active {
background: $white;
box-shadow: 0 -4px 8px rgba($gray-700, .1);
font-weight: $font-weight-bold;
padding: 0 32px $border-radius;
padding: 0 16px $border-radius;
@media screen and (min-width: 980px) {
padding: 0 24px $border-radius;
}
@media screen and (min-width: 1240px) {
padding: 0 32px $border-radius;
}
}
}
@ -64,6 +97,10 @@
background: $black;
border-radius: 16px;
color: $white;
padding: ($spacer * 4) ($spacer * 3);
padding: ($spacer * 3) ($spacer * 2);
@media screen and (min-width: 1240px) {
padding: ($spacer * 4) ($spacer * 3);
}
}
}

18
website/src/scss/utilities/_bg.scss
View File

@ -7,13 +7,29 @@
}
.bg-offset-right {
bottom: 0;
left: -24px;
position: absolute;
top: 0;
width: calc(100vw + 24px);
z-index: -1;
@media screen and (min-width: 1240px) {
left: -96px;
width: calc(100vw + 96px);
}
}
.bg-inset-right {
bottom: 0;
left: 40px;
position: absolute;
top: 0;
width: 100vw;
width: calc(100vw - 40px);
z-index: -1;
@media screen and (min-width: 980px) {
left: 96px;
width: calc(100vw - 96px);
}
}

1
website/templates/common_meta.html
View File

@ -1,5 +1,6 @@
{% set description = description or _('ClickHouse is a fast open-source column-oriented database management system that allows generating analytical data reports in real-time using SQL queries') %}
<meta charset="utf-8" />
<META http-equiv="Content-type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1" />

284
website/templates/company/contact.html
View File

@ -1,4 +1,4 @@
<div class="section bg-light-orange pb-8 pb-lg-10 pt-8 pt-lg-10 mb-medium-5 mb-lg-10">
<div id="contact" class="section bg-light-orange pb-8 pb-lg-10 pt-8 pt-lg-10 mb-medium-5 mb-lg-10">
<div class="container">
<h2 class="display-2 text-center mb-3 mb-lg-5">
@ -7,7 +7,287 @@
<div class="pb-5 pt-5 mb-5" style="position: relative;">
<div class="bg-gradient-light-orange bg-offset-right"></div>
<img src="/images/placeholder-contact-form.png" height="332" width="890" class="d-block mx-auto" style="aspect-ratio: 890 / 332; height: auto; margin-top: -8px; position: relative; z-index: 2;">
<form action="https://webto.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST">
<input type=hidden name="oid" value="00D5f000000JueF">
<input type=hidden name="retURL" value="http://www.clickhouse.tech/">
<div class="row mb-5 mx-auto" style="max-width:860px;">
<div class="form-group col-md-6 mb-3">
<input class="form-control" id="first_name" placeholder="First Name*" maxlength="40" name="first_name" size="20" type="text" required>
</div>
<div class="form-group col-md-6 mb-3">
<input class="form-control" id="last_name" placeholder="Last Name*" maxlength="80" name="last_name" size="20" type="text" required>
</div>
<div class="form-group col-md-6 mb-3">
<input class="form-control" id="email" placeholder="Email*" maxlength="80" name="email" size="20" type="text" required>
</div>
<div class="form-group col-md-6 mb-3">
<input class="form-control" id="company" placeholder="Company" maxlength="40" name="company" size="20" type="text">
</div>
<div class="form-group col-md-6 mb-3 mb-md-0">
<select class="form-control" id="00N5f000006YIf5" name="00N5f000006YIf5" onchange="this.dataset.chosen = this.value;">
<option selected disabled>Country</option>
<option value="Afganistan">Afghanistan</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
<option value="American Samoa">American Samoa</option>
<option value="Andorra">Andorra</option>
<option value="Angola">Angola</option>
<option value="Anguilla">Anguilla</option>
<option value="Antigua & Barbuda">Antigua & Barbuda</option>
<option value="Argentina">Argentina</option>
<option value="Armenia">Armenia</option>
<option value="Aruba">Aruba</option>
<option value="Australia">Australia</option>
<option value="Austria">Austria</option>
<option value="Azerbaijan">Azerbaijan</option>
<option value="Bahamas">Bahamas</option>
<option value="Bahrain">Bahrain</option>
<option value="Bangladesh">Bangladesh</option>
<option value="Barbados">Barbados</option>
<option value="Belarus">Belarus</option>
<option value="Belgium">Belgium</option>
<option value="Belize">Belize</option>
<option value="Benin">Benin</option>
<option value="Bermuda">Bermuda</option>
<option value="Bhutan">Bhutan</option>
<option value="Bolivia">Bolivia</option>
<option value="Bonaire">Bonaire</option>
<option value="Bosnia & Herzegovina">Bosnia & Herzegovina</option>
<option value="Botswana">Botswana</option>
<option value="Brazil">Brazil</option>
<option value="British Indian Ocean Ter">British Indian Ocean Ter</option>
<option value="Brunei">Brunei</option>
<option value="Bulgaria">Bulgaria</option>
<option value="Burkina Faso">Burkina Faso</option>
<option value="Burundi">Burundi</option>
<option value="Cambodia">Cambodia</option>
<option value="Cameroon">Cameroon</option>
<option value="Canada">Canada</option>
<option value="Canary Islands">Canary Islands</option>
<option value="Cape Verde">Cape Verde</option>
<option value="Cayman Islands">Cayman Islands</option>
<option value="Central African Republic">Central African Republic</option>
<option value="Chad">Chad</option>
<option value="Channel Islands">Channel Islands</option>
<option value="Chile">Chile</option>
<option value="China">China</option>
<option value="Christmas Island">Christmas Island</option>
<option value="Cocos Island">Cocos Island</option>
<option value="Colombia">Colombia</option>
<option value="Comoros">Comoros</option>
<option value="Congo">Congo</option>
<option value="Cook Islands">Cook Islands</option>
<option value="Costa Rica">Costa Rica</option>
<option value="Cote DIvoire">Cote DIvoire</option>
<option value="Croatia">Croatia</option>
<option value="Cuba">Cuba</option>
<option value="Curaco">Curacao</option>
<option value="Cyprus">Cyprus</option>
<option value="Czech Republic">Czech Republic</option>
<option value="Denmark">Denmark</option>
<option value="Djibouti">Djibouti</option>
<option value="Dominica">Dominica</option>
<option value="Dominican Republic">Dominican Republic</option>
<option value="East Timor">East Timor</option>
<option value="Ecuador">Ecuador</option>
<option value="Egypt">Egypt</option>
<option value="El Salvador">El Salvador</option>
<option value="Equatorial Guinea">Equatorial Guinea</option>
<option value="Eritrea">Eritrea</option>
<option value="Estonia">Estonia</option>
<option value="Ethiopia">Ethiopia</option>
<option value="Falkland Islands">Falkland Islands</option>
<option value="Faroe Islands">Faroe Islands</option>
<option value="Fiji">Fiji</option>
<option value="Finland">Finland</option>
<option value="France">France</option>
<option value="French Guiana">French Guiana</option>
<option value="French Polynesia">French Polynesia</option>
<option value="French Southern Ter">French Southern Ter</option>
<option value="Gabon">Gabon</option>
<option value="Gambia">Gambia</option>
<option value="Georgia">Georgia</option>
<option value="Germany">Germany</option>
<option value="Ghana">Ghana</option>
<option value="Gibraltar">Gibraltar</option>
<option value="Great Britain">Great Britain</option>
<option value="Greece">Greece</option>
<option value="Greenland">Greenland</option>
<option value="Grenada">Grenada</option>
<option value="Guadeloupe">Guadeloupe</option>
<option value="Guam">Guam</option>
<option value="Guatemala">Guatemala</option>
<option value="Guinea">Guinea</option>
<option value="Guyana">Guyana</option>
<option value="Haiti">Haiti</option>
<option value="Hawaii">Hawaii</option>
<option value="Honduras">Honduras</option>
<option value="Hong Kong">Hong Kong</option>
<option value="Hungary">Hungary</option>
<option value="Iceland">Iceland</option>
<option value="Indonesia">Indonesia</option>
<option value="India">India</option>
<option value="Iran">Iran</option>
<option value="Iraq">Iraq</option>
<option value="Ireland">Ireland</option>
<option value="Isle of Man">Isle of Man</option>
<option value="Israel">Israel</option>
<option value="Italy">Italy</option>
<option value="Jamaica">Jamaica</option>
<option value="Japan">Japan</option>
<option value="Jordan">Jordan</option>
<option value="Kazakhstan">Kazakhstan</option>
<option value="Kenya">Kenya</option>
<option value="Kiribati">Kiribati</option>
<option value="Korea North">Korea North</option>
<option value="Korea Sout">Korea South</option>
<option value="Kuwait">Kuwait</option>
<option value="Kyrgyzstan">Kyrgyzstan</option>
<option value="Laos">Laos</option>
<option value="Latvia">Latvia</option>
<option value="Lebanon">Lebanon</option>
<option value="Lesotho">Lesotho</option>
<option value="Liberia">Liberia</option>
<option value="Libya">Libya</option>
<option value="Liechtenstein">Liechtenstein</option>
<option value="Lithuania">Lithuania</option>
<option value="Luxembourg">Luxembourg</option>
<option value="Macau">Macau</option>
<option value="Macedonia">Macedonia</option>
<option value="Madagascar">Madagascar</option>
<option value="Malaysia">Malaysia</option>
<option value="Malawi">Malawi</option>
<option value="Maldives">Maldives</option>
<option value="Mali">Mali</option>
<option value="Malta">Malta</option>
<option value="Marshall Islands">Marshall Islands</option>
<option value="Martinique">Martinique</option>
<option value="Mauritania">Mauritania</option>
<option value="Mauritius">Mauritius</option>
<option value="Mayotte">Mayotte</option>
<option value="Mexico">Mexico</option>
<option value="Midway Islands">Midway Islands</option>
<option value="Moldova">Moldova</option>
<option value="Monaco">Monaco</option>
<option value="Mongolia">Mongolia</option>
<option value="Montserrat">Montserrat</option>
<option value="Morocco">Morocco</option>
<option value="Mozambique">Mozambique</option>
<option value="Myanmar">Myanmar</option>
<option value="Nambia">Nambia</option>
<option value="Nauru">Nauru</option>
<option value="Nepal">Nepal</option>
<option value="Netherland Antilles">Netherland Antilles</option>
<option value="Netherlands">Netherlands (Holland, Europe)</option>
<option value="Nevis">Nevis</option>
<option value="New Caledonia">New Caledonia</option>
<option value="New Zealand">New Zealand</option>
<option value="Nicaragua">Nicaragua</option>
<option value="Niger">Niger</option>
<option value="Nigeria">Nigeria</option>
<option value="Niue">Niue</option>
<option value="Norfolk Island">Norfolk Island</option>
<option value="Norway">Norway</option>
<option value="Oman">Oman</option>
<option value="Pakistan">Pakistan</option>
<option value="Palau Island">Palau Island</option>
<option value="Palestine">Palestine</option>
<option value="Panama">Panama</option>
<option value="Papua New Guinea">Papua New Guinea</option>
<option value="Paraguay">Paraguay</option>
<option value="Peru">Peru</option>
<option value="Phillipines">Philippines</option>
<option value="Pitcairn Island">Pitcairn Island</option>
<option value="Poland">Poland</option>
<option value="Portugal">Portugal</option>
<option value="Puerto Rico">Puerto Rico</option>
<option value="Qatar">Qatar</option>
<option value="Republic of Montenegro">Republic of Montenegro</option>
<option value="Republic of Serbia">Republic of Serbia</option>
<option value="Reunion">Reunion</option>
<option value="Romania">Romania</option>
<option value="Russia">Russia</option>
<option value="Rwanda">Rwanda</option>
<option value="St Barthelemy">St Barthelemy</option>
<option value="St Eustatius">St Eustatius</option>
<option value="St Helena">St Helena</option>
<option value="St Kitts-Nevis">St Kitts-Nevis</option>
<option value="St Lucia">St Lucia</option>
<option value="St Maarten">St Maarten</option>
<option value="St Pierre & Miquelon">St Pierre & Miquelon</option>
<option value="St Vincent & Grenadines">St Vincent & Grenadines</option>
<option value="Saipan">Saipan</option>
<option value="Samoa">Samoa</option>
<option value="Samoa American">Samoa American</option>
<option value="San Marino">San Marino</option>
<option value="Sao Tome & Principe">Sao Tome & Principe</option>
<option value="Saudi Arabia">Saudi Arabia</option>
<option value="Senegal">Senegal</option>
<option value="Seychelles">Seychelles</option>
<option value="Sierra Leone">Sierra Leone</option>
<option value="Singapore">Singapore</option>
<option value="Slovakia">Slovakia</option>
<option value="Slovenia">Slovenia</option>
<option value="Solomon Islands">Solomon Islands</option>
<option value="Somalia">Somalia</option>
<option value="South Africa">South Africa</option>
<option value="Spain">Spain</option>
<option value="Sri Lanka">Sri Lanka</option>
<option value="Sudan">Sudan</option>
<option value="Suriname">Suriname</option>
<option value="Swaziland">Swaziland</option>
<option value="Sweden">Sweden</option>
<option value="Switzerland">Switzerland</option>
<option value="Syria">Syria</option>
<option value="Tahiti">Tahiti</option>
<option value="Taiwan">Taiwan</option>
<option value="Tajikistan">Tajikistan</option>
<option value="Tanzania">Tanzania</option>
<option value="Thailand">Thailand</option>
<option value="Togo">Togo</option>
<option value="Tokelau">Tokelau</option>
<option value="Tonga">Tonga</option>
<option value="Trinidad & Tobago">Trinidad & Tobago</option>
<option value="Tunisia">Tunisia</option>
<option value="Turkey">Turkey</option>
<option value="Turkmenistan">Turkmenistan</option>
<option value="Turks & Caicos Is">Turks & Caicos Is</option>
<option value="Tuvalu">Tuvalu</option>
<option value="Uganda">Uganda</option>
<option value="United Kingdom">United Kingdom</option>
<option value="Ukraine">Ukraine</option>
<option value="United Arab Erimates">United Arab Emirates</option>
<option value="United States of America">United States of America</option>
<option value="Uraguay">Uruguay</option>
<option value="Uzbekistan">Uzbekistan</option>
<option value="Vanuatu">Vanuatu</option>
<option value="Vatican City State">Vatican City State</option>
<option value="Venezuela">Venezuela</option>
<option value="Vietnam">Vietnam</option>
<option value="Virgin Islands (Brit)">Virgin Islands (Brit)</option>
<option value="Virgin Islands (USA)">Virgin Islands (USA)</option>
<option value="Wake Island">Wake Island</option>
<option value="Wallis & Futana Is">Wallis & Futana Is</option>
<option value="Yemen">Yemen</option>
<option value="Zaire">Zaire</option>
<option value="Zambia">Zambia</option>
<option value="Zimbabwe">Zimbabwe</option>
</select>
</div>
<div class="form-group col-md-6">
<textarea class="form-control" id="00N5f000000lOdD" placeholder="Tell us about your use case, other example..." name="00N5f000000lOdD" rows="1" type="text" wrap="soft" required></textarea>
</div>
</div>
<div class="d-flex justify-content-center">
<input type="submit" name="submit" class="btn btn-lg btn-secondary">
</div>
</form>
</div>
<p class="text-center text-muted mx-auto" style="max-width:620px;">

2
website/templates/company/hero.html
View File

@ -3,7 +3,7 @@
<div class="container pt-10 pt-lg-15 pb-10 pb-lg-15">
<h1 class="display-1 mb-0">
Company
{{ _('About Us') }}
</h1>
</div>

46
website/templates/company/leadership.html
View File

@ -2,75 +2,51 @@
<div class="container">
<h2 class="display-2 text-center mb-5 mb-md-8 mb-lg-10">
{{ _('ClickHouse Leadership') }}
{{ _('Meet the team') }}
</h2>
<h3 class="display-3 text-center mb-3 mb-md-5 mb-lg-8">
{{ _('Co-Founders') }}
{{ _('ClickHouse Leadership') }}
</h3>
<div class="row">
<div class="col-lg-4 mb-3 mb-lg-0 text-center">
<div class="photo-frame mx-auto">
<a href="https://www.linkedin.com/in/yuryizrailevsky/" target="_blank" class="photo-frame mx-auto">
<img src="/images/photos/photo-yury-izrailevsky.jpg">
</div>
</a>
<h3 class="display-4">
{{ _('Yury Izrailevsky') }}
</h3>
<p class="font-lg text-muted mx-auto" style="max-width:220px;">
<p class="font-lg text-muted mb-0 mx-auto" style="max-width:220px;">
{{ _('Co-Founder & President, Product & Engineering') }}
</p>
<div class="social-icons justify-content-center size-small">
<a
rel="external nofollow noreferrer"
target="_blank"
href="#"
class="social-icons-linkedin-alt"
></a>
</div>
</div>
<div class="col-lg-4 mb-3 mb-lg-0 text-center">
<div class="photo-frame mx-auto">
<a href=" https://www.linkedin.com/in/aaron-k-5762094/" target="_blank" class="photo-frame mx-auto">
<img src="/images/photos/photo-aaron-katz.jpg">
</div>
</a>
<h3 class="display-4">
{{ _('Aaron Katz') }}
</h3>
<p class="font-lg text-muted mx-auto" style="max-width:220px;">
<p class="font-lg text-muted mb-0 mx-auto" style="max-width:220px;">
{{ _('Co-Founder & CEO') }}
</p>
<div class="social-icons justify-content-center size-small">
<a
rel="external nofollow noreferrer"
target="_blank"
href="#"
class="social-icons-linkedin-alt"
></a>
</div>
</div>
<div class="col-lg-4 text-center">
<div class="photo-frame mx-auto">
<a href="https://www.linkedin.com/in/alexey-milovidov-7b658135/" target="_blank" class="photo-frame mx-auto">
<img src="/images/photos/photo-alexey-milovidov.jpg">
</div>
</a>
<h3 class="display-4">
{{ _('Alexey Milovidov') }}
</h3>
<p class="font-lg text-muted mx-auto" style="max-width:220px;">
<p class="font-lg text-muted mb-0 mx-auto" style="max-width:220px;">
{{ _('Co-Founder & CTO') }}
</p>
<div class="social-icons justify-content-center size-small">
<a
rel="external nofollow noreferrer"
target="_blank"
href="#"
class="social-icons-linkedin-alt"
></a>
</div>
</div>
</div>

347
website/templates/company/team.html
View File

@ -1,157 +1,330 @@
<div class="section pb-10 pb-lg-15 pt-10">
<div class="bg-offset-right bg-light"></div>
<div class="container">
<div class="section">
<div class="container pb-10 pb-lg-15 pt-10">
<div class="bg-offset-right bg-light"></div>
<h2 class="display-3 text-center mb-3 mb-md-5 mb-lg-8">
{{ _('The ClickHouse Team') }}
{{ _('ClickHouse Team') }}
</h2>
<div class="row mb-3 mb-lg-8">
<div class="col-lg-3 mb-3 mb-lg-0 text-center">
<div class="row mb-8 mb-md-10 mb-lg-15">
<div class="col-xl-3 col-lg-4 col-md-6 mb-3 mb-md-8 text-center">
<div class="photo-frame mx-auto">
<a href="#" target="_blank" class="photo-frame mx-auto">
<img src="/images/photos/photo-placeholder.png">
</a>
<h3 class="display-4">
{{ _('Vitaly Baranov') }}
</h3>
<p class="font-lg text-muted mb-0 mx-auto" style="max-width:220px;">
{{ _('Principal Sofware Engineer') }}
</p>
</div>
<div class="col-xl-3 col-lg-4 col-md-6 mb-3 mb-md-8 text-center">
<a href="https://www.linkedin.com/in/ivanblinkov/" target="_blank" class="photo-frame mx-auto">
<img src="/images/photos/photo-ivan-blinkov.jpg">
</div>
</a>
<h3 class="display-4">
{{ _('Ivan Blinkov') }}
</h3>
<p class="font-lg text-muted mx-auto" style="max-width:220px;">
<p class="font-lg text-muted mb-0 mx-auto" style="max-width:220px;">
{{ _('VP, Product') }}
</p>
<div class="social-icons justify-content-center size-small">
<a
rel="external nofollow noreferrer"
target="_blank"
href="#"
class="social-icons-linkedin-alt"
></a>
</div>
</div>
<div class="col-lg-3 mb-3 mb-lg-0 text-center">
<div class="col-xl-3 col-lg-4 col-md-6 mb-3 mb-md-8 text-center">
<div class="photo-frame mx-auto">
<a href="https://www.linkedin.com/in/jasonbchan/" target="_blank" class="photo-frame mx-auto">
<img src="/images/photos/photo-jason-chan.jpg">
</div>
</a>
<h3 class="display-4">
{{ _('Jason Chan') }}
</h3>
<p class="font-lg text-muted mx-auto" style="max-width:220px;">
<p class="font-lg text-muted mb-0 mx-auto" style="max-width:220px;">
{{ _('Adviser, Security, Privacy & Compliance') }}
</p>
<div class="social-icons justify-content-center size-small">
<a
rel="external nofollow noreferrer"
target="_blank"
href="#"
class="social-icons-linkedin-alt"
></a>
</div>
</div>
<div class="col-lg-3 mb-3 mb-lg-0 text-center">
<div class="col-xl-3 col-lg-4 col-md-6 mb-3 mb-md-8 text-center">
<div class="photo-frame mx-auto">
<a href="https://www.linkedin.com/in/vdimir" target="_blank" class="photo-frame mx-auto">
<img src="/images/photos/photo-placeholder.png">
</a>
<h3 class="display-4">
{{ _('Vladimir Cherkasov') }}
</h3>
<p class="font-lg text-muted mb-0 mx-auto" style="max-width:220px;">
{{ _('Software Engineer') }}
</p>
</div>
<div class="col-xl-3 col-lg-4 col-md-6 mb-3 mb-md-8 text-center">
<a href="https://www.linkedin.com/in/kristinamfrost/" target="_blank" class="photo-frame mx-auto">
<img src="/images/photos/photo-kristina-frost.jpg">
</a>
<h3 class="display-4">
{{ _('Kristina Frost') }}
</h3>
<p class="font-lg text-muted mb-0 mx-auto" style="max-width:220px;">
{{ _('Senior Director, Business Technology') }}
</p>
</div>
<div class="col-xl-3 col-lg-4 col-md-6 mb-3 mb-md-8 text-center">
<a href="https://www.linkedin.com/in/mike-hayes-54990310/" target="_blank" class="photo-frame mx-auto">
<img src="/images/photos/photo-mike-hayes.jpg">
</div>
</a>
<h3 class="display-4">
{{ _('Mike Hayes') }}
</h3>
<p class="font-lg text-muted mx-auto" style="max-width:220px;">
<p class="font-lg text-muted mb-0 mx-auto" style="max-width:220px;">
{{ _('VP, Sales') }}
</p>
<div class="social-icons justify-content-center size-small">
<a
rel="external nofollow noreferrer"
target="_blank"
href="#"
class="social-icons-linkedin-alt"
></a>
</div>
</div>
<div class="col-lg-3 mb-3 mb-lg-0 text-center">
{% if false %}
<div class="col-xl-3 col-lg-4 col-md-6 mb-3 mb-md-8 text-center">
<div class="photo-frame mx-auto">
<a href="#" target="_blank" class="photo-frame mx-auto">
<img src="/images/photos/photo-brian-hunter.jpg">
</a>
<h3 class="display-4">
{{ _('Brian Hunter') }}
</h3>
<p class="font-lg text-muted mb-0 mx-auto" style="max-width:220px;">
{{ _('') }}
</p>
</div>
{% endif %}
<div class="col-xl-3 col-lg-4 col-md-6 mb-3 mb-md-8 text-center">
<a href="https://www.linkedin.com/in/maksim-kita/" target="_blank" class="photo-frame mx-auto">
<img src="/images/photos/photo-placeholder.png">
</a>
<h3 class="display-4">
{{ _('Maksim Kita') }}
</h3>
<p class="font-lg text-muted mb-0 mx-auto" style="max-width:220px;">
{{ _('Senior Software Engineer') }}
</p>
</div>
<div class="col-xl-3 col-lg-4 col-md-6 mb-3 mb-md-8 text-center">
<a href="#" target="_blank" class="photo-frame mx-auto">
<img src="/images/photos/photo-placeholder.png">
</a>
<h3 class="display-4">
{{ _('Nikolai Kochetov') }}
</h3>
<p class="font-lg text-muted mb-0 mx-auto" style="max-width:220px;">
{{ _('Engineering Team Lead') }}
</p>
</div>
{% if false %}
<div class="col-xl-3 col-lg-4 col-md-6 mb-3 mb-md-8 text-center">
<a href="#" target="_blank" class="photo-frame mx-auto">
<img src="/images/photos/photo-placeholder.png">
</a>
<h3 class="display-4">
{{ _('Anne Krechmer') }}
</h3>
<p class="font-lg text-muted mb-0 mx-auto" style="max-width:220px;">
{{ _('') }}
</p>
</div>
{% endif %}
<div class="col-xl-3 col-lg-4 col-md-6 mb-3 mb-md-8 text-center">
<a href="https://www.linkedin.com/in/avogar" target="_blank" class="photo-frame mx-auto">
<img src="/images/photos/photo-placeholder.png">
</a>
<h3 class="display-4">
{{ _('Pavel Kruglov') }}
</h3>
<p class="font-lg text-muted mb-0 mx-auto" style="max-width:220px;">
{{ _('Software Engineer') }}
</p>
</div>
{% if false %}
<div class="col-xl-3 col-lg-4 col-md-6 mb-3 mb-md-8 text-center">
<a href="#" target="_blank" class="photo-frame mx-auto">
<img src="/images/photos/photo-placeholder.png">
</a>
<h3 class="display-4">
{{ _('Claire Lucas') }}
</h3>
<p class="font-lg text-muted mb-0 mx-auto" style="max-width:220px;">
{{ _('') }}
</p>
</div>
{% endif %}
<div class="col-xl-3 col-lg-4 col-md-6 mb-3 mb-md-8 text-center">
<a href="https://www.linkedin.com/in/nikitamikhaylov/" target="_blank" class="photo-frame mx-auto">
<img src="/images/photos/photo-placeholder.png">
</a>
<h3 class="display-4">
{{ _('Nikita Mikhailov') }}
</h3>
<p class="font-lg text-muted mb-0 mx-auto" style="max-width:220px;">
{{ _('Software Engineer') }}
</p>
</div>
<div class="col-xl-3 col-lg-4 col-md-6 mb-3 mb-md-8 text-center">
<a href="https://www.linkedin.com/in/novik-dmitry/" target="_blank" class="photo-frame mx-auto">
<img src="/images/photos/photo-placeholder.png">
</a>
<h3 class="display-4">
{{ _('Dmitry Novik') }}
</h3>
<p class="font-lg text-muted mb-0 mx-auto" style="max-width:220px;">
{{ _('Senior Software Engineer') }}
</p>
</div>
<div class="col-xl-3 col-lg-4 col-md-6 mb-3 mb-md-8 text-center">
<a href="https://www.linkedin.com/in/4thom/" target="_blank" class="photo-frame mx-auto">
<img src="/images/photos/photo-thom-oconner.jpg">
</div>
</a>
<h3 class="display-4">
{{ _('Thom O’Connor') }}
</h3>
<p class="font-lg text-muted mx-auto" style="max-width:220px;">
<p class="font-lg text-muted mb-0 mx-auto" style="max-width:220px;">
{{ _('VP, Support & Services') }}
</p>
<div class="social-icons justify-content-center size-small">
<a
rel="external nofollow noreferrer"
target="_blank"
href="#"
class="social-icons-linkedin-alt"
></a>
</div>
</div>
</div>
<div class="row justify-content-center mb-8 mb-md-10 mb-lg-15">
<div class="col-lg-3 mb-3 mb-lg-0 text-center">
<div class="col-xl-3 col-lg-4 col-md-6 mb-3 mb-md-8 text-center">
<div class="photo-frame mx-auto">
<a href="https://www.linkedin.com/in/anton-popov-a592b9194/" target="_blank" class="photo-frame mx-auto">
<img src="/images/photos/photo-placeholder.png">
</a>
<h3 class="display-4">
{{ _('Anton Popov') }}
</h3>
<p class="font-lg text-muted mb-0 mx-auto" style="max-width:220px;">
{{ _('Senior Software Engineer') }}
</p>
</div>
<div class="col-xl-3 col-lg-4 col-md-6 mb-3 mb-md-8 text-center">
<a href="https://www.linkedin.com/in/richraposa/" target="_blank" class="photo-frame mx-auto">
<img src="/images/photos/photo-richard-raposa.jpg">
</a>
<h3 class="display-4">
{{ _('Richard Raposa') }}
</h3>
<p class="font-lg text-muted mb-0 mx-auto" style="max-width:220px;">
{{ _('Director, Global Learning') }}
</p>
</div>
<div class="col-xl-3 col-lg-4 col-md-6 mb-3 mb-md-8 text-center">
<a href="#" target="_blank" class="photo-frame mx-auto">
<img src="/images/photos/photo-placeholder.png">
</a>
<h3 class="display-4">
{{ _('Alexander Sapin') }}
</h3>
<p class="font-lg text-muted mb-0 mx-auto" style="max-width:220px;">
{{ _('Engineering Team Lead') }}
</p>
</div>
<div class="col-xl-3 col-lg-4 col-md-6 mb-3 mb-md-8 text-center">
<a href="https://www.linkedin.com/in/kssenii" target="_blank" class="photo-frame mx-auto">
<img src="/images/photos/photo-placeholder.png">
</a>
<h3 class="display-4">
{{ _('Kseniia Sumarokova') }}
</h3>
<p class="font-lg text-muted mb-0 mx-auto" style="max-width:220px;">
{{ _('Software Engineer') }}
</p>
</div>
<div class="col-xl-3 col-lg-4 col-md-6 mb-3 mb-md-8 mb-xl-0 text-center">
<a href="https://www.linkedin.com/in/dorota-szeremeta-a849b7/" target="_blank" class="photo-frame mx-auto">
<img src="/images/photos/photo-dorota-szeremeta.jpg">
</div>
</a>
<h3 class="display-4">
{{ _('Dorota Szeremeta') }}
</h3>
<p class="font-lg text-muted mx-auto" style="max-width:220px;">
<p class="font-lg text-muted mb-0 mx-auto" style="max-width:220px;">
{{ _('VP, Operations') }}
</p>
<div class="social-icons justify-content-center size-small">
<a
rel="external nofollow noreferrer"
target="_blank"
href="#"
class="social-icons-linkedin-alt"
></a>
</div>
</div>
<div class="col-lg-3 text-center">
<div class="col-xl-3 col-lg-4 col-md-6 mb-3 mb-md-8 mb-xl-0 text-center">
<div class="photo-frame mx-auto">
<a href="https://www.linkedin.com/in/tavplubix" target="_blank" class="photo-frame mx-auto">
<img src="/images/photos/photo-placeholder.png">
</a>
<h3 class="display-4">
{{ _('Alexander Tokmakov') }}
</h3>
<p class="font-lg text-muted mb-0 mx-auto" style="max-width:220px;">
{{ _('Software Engineer') }}
</p>
</div>
<div class="col-xl-3 col-lg-4 col-md-6 mb-0 text-center">
<a href="https://www.linkedin.com/in/arnovandriel" target="_blank" class="photo-frame mx-auto">
<img src="/images/photos/photo-arno-van-driel.jpg">
</div>
</a>
<h3 class="display-4">
{{ _('Arno Van Driel') }}
</h3>
<p class="font-lg text-muted mx-auto" style="max-width:220px;">
<p class="font-lg text-muted mb-0 mx-auto" style="max-width:220px;">
{{ _('VP, EMEA') }}
</p>
<div class="social-icons justify-content-center size-small">
<a
rel="external nofollow noreferrer"
target="_blank"
href="#"
class="social-icons-linkedin-alt"
></a>
</div>
</div>
<div class="col-xl-3 col-lg-4 col-md-6 mb-3 mb-md-0 text-center">
<a href="#" target="_blank" class="photo-frame mx-auto">
<img src="/images/photos/photo-placeholder.png">
</a>
<h3 class="display-4">
{{ _('Ilya Yatsishin') }}
</h3>
<p class="font-lg text-muted mb-0 mx-auto" style="max-width:220px;">
{{ _('Senior Technical Project Manager') }}
</p>
</div>
</div>
<div class="card mx-auto mb-8 mb-md-10 mb-lg-15 is-large has-dark-border has-pattern" style="max-width:840px;">
<div class="card mx-auto mb-8 mb-md-10 mb-lg-15 is-large has-dark-border has-pattern" style="max-width:480px;">
<div class="card-body">
<h3 class="display-3 text-center">
{{ _('Join the team') }}
</h3>
<p class="font-lg text-muted text-center mb-5 mx-auto" style="max-width:630px;">
{{ _('We are primarily looking for Support Engineers and Software Engineers at this time! For more information, contact us at') }}
<a href="mailto:careers@clickhouse.com" class="text-blue text-decoration-underline">careers@clickhouse.com</a>
</p>
<div class="btns">
<a href="#" class="btn btn-outline-secondary" role="button">See Careers</a>
<a href="mailto:careers@clickhouse.com" class="btn btn-outline-secondary" role="button">
{{ _('Apply Now') }}
</a>
</div>
</div>

2
website/templates/footer.html
View File

@ -3,7 +3,7 @@
<div class="container d-flex align-items-center {{ footer_container_class or 'py-2' }}">
<div class="footer-copy font-weight-bold">
&copy; 2016–2021 <a href="https://yandex.com/company/" rel="external nofollow noreferrer" target="_blank" class="text-muted">{{ _('ClickHouse Inc') }}</a>
&copy; 2016–2021 {{ _('ClickHouse Inc') }}
</div>
<div class="footer-license ml-4">

2
website/templates/global/nav.html
View File

@ -49,7 +49,7 @@
<a class="nav-link" href="/company.html">Company</a>
</li>
<li class="nav-item">
<a class="btn btn-outline-tertiary" href="/contact.html">Contact Us</a>
<a class="btn btn-outline-tertiary" href="/company.html#contact">Contact Us</a>
</li>
</ul>
</div>

2
website/templates/global/newsletter.html
View File

@ -2,7 +2,7 @@
<div class="section-bg" style="background-image:url('/images/backgrounds/bg-footer-cta.png');width:2448px;"></div>
<div class="container">
<h2 class="display-2 mb-7 mx-auto text-center">
<h2 class="display-2 mb-7 mx-auto text-center" style="max-width:960px;">
{{ _('Stay informed on feature releases, product roadmap, and future support and cloud offerings! ') }}
</h2>

213
website/templates/index/community.html
View File

@ -4,7 +4,7 @@
<div class="row">
<div class="col-lg-4 mb-5 mb-lg-0">
<h2 id="community" class="display-2 mb-3 mb-lg-5">
<h2 id="community" class="display-2 mb-3 mb-lg-5" style="max-width: 400px;">
{{ _('Join our growing ClickHouse community') }}
</h2>
@ -17,129 +17,142 @@
</div>
<div class="col-lg-8">
<div class="bg-offset-right bg-light" style="bottom:40px;top:40px;"></div>
<div class="bg-inset-right bg-light" style="bottom:40px;top:40px;"></div>
<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">
<div class="row mx-n2">
<div class="col-lg-4 col-md-2 col-sm-4 col-xs-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 text-center text-lg-left">
<div class="embed-responsive embed-responsive-1by1" style="overflow: visible;">
<div class="embed-responsive-item d-flex align-items-stretch">
<a href="https://github.com/ClickHouse/ClickHouse/issues/new/choose" rel="external nofollow noreferrer" target="_blank" class="card d-flex align-items-stretch text-decoration-none">
<div class="card-body d-flex align-items-center justify-content-center">
<img data-src="/images/icons/icon-github.svg" alt="ClickHouse GitHub" title="ClickHouse GitHub" class="icon mx-auto">
<div class="display-6">GitHub</div>
<p class="font-sm text-muted">Open GitHub issue to ask for help or to file a feature request</p>
</div>
</a>
</div>
<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 text-center text-lg-left">
<img data-src="/images/icons/icon-slack.svg" alt="ClickHouse Slack Workspace" title="ClickHouse Slack Workspace" class="icon mx-auto">
<div class="display-6">Slack</div>
<p class="font-sm text-muted">Multipurpose public hangout</p>
</div>
</a>
</div>
<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 text-center text-lg-left">
<img data-src="/images/icons/icon-stack-overflow.svg" alt="ClickHouse at Stack Overflow" title="ClickHouse at Stack Overflow" class="icon mx-auto">
<div class="display-6">Stack Overflow</div>
<p class="font-sm text-muted">Ask any questions</p>
</div>
</a>
</div>
<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 text-center text-lg-left">
<img data-src="/images/icons/icon-google.svg" alt="ClickHouse at Google Groups" title="ClickHouse at Google Groups" class="icon mx-auto">
<div class="display-6">Google Group</div>
<p class="font-sm text-muted">Email discussions</p>
</div>
</a>
</div>
<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 text-center text-lg-left">
<img data-src="/images/icons/icon-youtube.svg" alt="ClickHouse YouTube Channel" title="ClickHouse YouTube Channel" class="icon mx-auto">
<div class="display-6">YouTube</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 px-2 d-flex align-items-stretch">
<div rel="external nofollow noreferrer" target="_blank" class="card has-hover">
<div class="card-body text-center text-lg-left">
<img data-src="/images/icons/icon-telegram.svg" alt="ClickHouse at Telegram" title="ClickHouse at Telegram" class="icon mx-auto">
<div class="display-6">Telegram</div>
<p class="font-sm text-muted">
{{ _('Chat with real users in ') }}
<a href="https://telegram.me/clickhouse_en" rel="external nofollow noreferrer" target="_blank" class="text-blue text-decoration-underline">{{ _('English') }}</a>
{{ _('or in') }}
<a href="https://telegram.me/clickhouse_ru" rel="external nofollow noreferrer" target="_blank" class="text-blue text-decoration-underline">{{ _('Russian') }}</a>
</p>
<img data-src="/images/icons/icon-github.svg" alt="ClickHouse GitHub" title="ClickHouse GitHub" class="icon mx-auto mb-0">
</div>
</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mb-4 mb-lg-0 px-2 d-flex align-items-stretch">
<div class="col-lg-4 col-md-2 col-sm-4 col-xs-6 mb-4 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 text-center text-lg-left">
<div class="embed-responsive embed-responsive-1by1" style="overflow: visible;">
<div class="embed-responsive-item 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 d-flex align-items-stretch text-decoration-none">
<div class="card-body d-flex align-items-center justify-content-center">
<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>
<img data-src="/images/icons/icon-slack.svg" alt="ClickHouse Slack Workspace" title="ClickHouse Slack Workspace" class="icon mx-auto mb-0">
</div>
</a>
</div>
</a>
</div>
</div>
<div class="col-lg-4 col-md-6 mb-4 mb-lg-0 px-2 d-flex align-items-stretch">
<div class="col-lg-4 col-md-2 col-sm-4 col-xs-6 mb-4 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 text-center text-lg-left">
<div class="embed-responsive embed-responsive-1by1" style="overflow: visible;">
<div class="embed-responsive-item d-flex align-items-stretch">
<a href="https://stackoverflow.com/questions/tagged/clickhouse" rel="external nofollow noreferrer" target="_blank" class="card d-flex align-items-stretch text-decoration-none">
<div class="card-body d-flex align-items-center justify-content-center">
<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>
<img data-src="/images/icons/icon-stack-overflow.svg" alt="ClickHouse at Stack Overflow" title="ClickHouse at Stack Overflow" class="icon mx-auto mb-0">
</div>
</a>
</div>
</a>
</div>
</div>
<div class="col-lg-4 col-md-6 px-2 d-flex align-items-stretch">
<div class="col-lg-4 col-md-2 col-sm-4 col-xs-6 mb-4 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 text-center text-lg-left">
<div class="embed-responsive embed-responsive-1by1" style="overflow: visible;">
<div class="embed-responsive-item d-flex align-items-stretch">
<a href="https://groups.google.com/group/clickhouse" rel="external nofollow noreferrer" target="_blank" class="card d-flex align-items-stretch text-decoration-none">
<div class="card-body d-flex align-items-center justify-content-center">
<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>
<img data-src="/images/icons/icon-google.svg" alt="ClickHouse at Google Groups" title="ClickHouse at Google Groups" class="icon mx-auto mb-0">
</div>
</a>
</div>
</a>
</div>
</div>
<div class="col-lg-4 col-md-2 col-sm-4 col-xs-6 mb-4 px-2 d-flex align-items-stretch">
<div class="embed-responsive embed-responsive-1by1" style="overflow: visible;">
<div class="embed-responsive-item d-flex align-items-stretch">
<a href="https://www.youtube.com/c/ClickHouseDB" rel="external nofollow noreferrer" target="_blank" class="card d-flex align-items-stretch text-decoration-none">
<div class="card-body d-flex align-items-center justify-content-center">
<img data-src="/images/icons/icon-youtube.svg" alt="ClickHouse YouTube Channel" title="ClickHouse YouTube Channel" class="icon mx-auto mb-0">
</div>
</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-2 col-sm-4 col-xs-6 mb-4 px-2 d-flex align-items-stretch">
<div class="embed-responsive embed-responsive-1by1" style="overflow: visible;">
<div class="embed-responsive-item d-flex align-items-stretch">
<a href="https://telegram.me/clickhouse_en" rel="external nofollow noreferrer" target="_blank" class="card d-flex align-items-stretch text-decoration-none">
<div class="card-body d-flex align-items-center justify-content-center">
<img data-src="/images/icons/icon-telegram.svg" alt="ClickHouse at Telegram" title="ClickHouse at Telegram" class="icon mx-auto mb-0">
</div>
</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-2 col-sm-4 col-xs-6 mb-4 mb-sm-0 px-2 d-flex align-items-stretch">
<div class="embed-responsive embed-responsive-1by1" style="overflow: visible;">
<div class="embed-responsive-item d-flex align-items-stretch">
<a href="https://www.facebook.com/ClickHouseDB/" rel="external nofollow noreferrer" target="_blank" class="card d-flex align-items-stretch text-decoration-none">
<div class="card-body d-flex align-items-center justify-content-center">
<img data-src="/images/icons/icon-facebook.svg" alt="ClickHouse at Facebook" title="ClickHouse at Facebook" class="icon mx-auto mb-0">
</div>
</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-2 col-sm-4 col-xs-6 mb-4 mb-sm-0 px-2 d-flex align-items-stretch">
<div class="embed-responsive embed-responsive-1by1" style="overflow: visible;">
<div class="embed-responsive-item d-flex align-items-stretch">
<a href="https://twitter.com/clickhousedb" rel="external nofollow noreferrer" target="_blank" class="card d-flex align-items-stretch text-decoration-none">
<div class="card-body d-flex align-items-center justify-content-center">
<img data-src="/images/icons/icon-twitter.svg" alt="ClickHouse at Twitter" title="ClickHouse at Twitter" class="icon mx-auto mb-0">
</div>
</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-2 col-sm-4 col-xs-6 px-2 d-flex align-items-stretch">
<div class="embed-responsive embed-responsive-1by1" style="overflow: visible;">
<div class="embed-responsive-item d-flex align-items-stretch">
<a href="https://www.linkedin.com/company/ClickHouseDB/" rel="external nofollow noreferrer" target="_blank" class="card d-flex align-items-stretch text-decoration-none">
<div class="card-body d-flex align-items-center justify-content-center">
<img data-src="/images/icons/icon-linkedin.png" alt="ClickHouse at LinkedIn" title="ClickHouse at LinkedIn" class="icon mx-auto mb-0">
</div>
</a>
</div>
</div>
</div>
</div>

23
website/templates/index/hero.html
View File

@ -1,19 +1,24 @@
<div class="hero bg-white">
<div class="hero-bg" style="background-image:url('/images/backgrounds/bg-hero-home.png');height:68vw;max-height:980px;max-width:2448px;width:170vw;"></div>
<div class="container pt-10 pb-10 pb-lg-15">
<div class="container pt-10 pb-10">
<h1 class="display-1 mb-7 mx-auto text-center" style="max-width:840px;">
ClickHouse Inc. the Company <span class="text-blue">Has Arrived</span>
<h1 class="display-1 mb-3 mx-auto text-center">
ClickHouse, Inc <span class="text-blue">Has Arrived</span>
</h1>
<p class="lead mb-7 mx-auto text-muted text-center" style="max-width:780px;">
{{ _('ClickHouse® is an open-source, high performance columnar OLAP database management system for real-time analytics using SQL.') }}
</p>
<div class="btns" role="group">
<a href="#" class="btn btn-lg btn-primary" role="button">Read the Blog Post</a>
{% if false %}
<a href="#" class="btn btn-lg btn-primary" role="button">Learn More</a>
<a href="#" class="btn btn-lg btn-outline-primary" role="button">Online Demo</a>
{% endif %}
<div class="btns mb-5" role="group">
<a href="/company.html" class="btn btn-lg btn-primary" role="button">Learn More</a>
<a href="https://play.clickhouse.tech/?file=welcome" class="btn btn-lg btn-outline-primary" role="button">Online Demo</a>
</div>
<p class="d-flex justify-content-center">
<a href="https://clickhouse.tech/blog/en/" class="trailing-link">Read the Blog Post</a>
</p>
</div>
</div>

2
website/templates/index/quickstart.html
View File

@ -11,7 +11,7 @@
<a class="nav-link active" id="deb-tab" data-toggle="tab" href="#deb" role="tab" aria-controls="deb" aria-selected="true" title="deb packages">Ubuntu or Debian</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/docs/en/commercial/cloud/" role="tab" aria-controls="cloud" aria-selected="false" title="Cloud Service Providers"><strong>Cloud</strong></a>
<a class="nav-link" href="https://clickhouse.tech/docs/en/commercial/cloud/" role="tab" aria-controls="cloud" aria-selected="false" title="Cloud Service Providers"><strong>Cloud</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" id="rpm-tab" data-toggle="tab" href="#rpm" role="tab" aria-controls="rpm" aria-selected="false" title="rpm packages">CentOS or RedHat</a>

72
website/templates/index/success.html
View File

@ -13,22 +13,22 @@
<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="40" width="108" title="Yandex" style="aspect-ratio: 108 / 40;height: auto;">
<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;object-fit:contain;object-position:left center;">
<div class="row mx-n2" equalize-heights="case-study-card-row">
<div class="col-lg-2 px-2 d-none d-lg-flex flex-column">
<div class="row flex-lg-nowrap mx-n2" equalize-heights="case-study-card-row">
<div class="px-2 d-none d-lg-flex flex-column" style="width: 104px;">
<div class="case-study-card-toggle mt-auto"></div>
</div>
<div class="col-lg-6 pb-5 pb-lg-0 px-2">
<div class="col-lg-auto pb-5 pb-lg-0 px-2">
<p class="mb-3 mb-lg-5 text-dark">{{ _('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.') }}</p>
<p class="mb-3 text-dark">{{ _('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.') }}</p>
<a class="trailing-link" href="/docs/en/introduction/history/">{{ _('Read the Case Study') }}</a>
</div>
<div class="col-lg-4 px-2">
<div class="col-lg-3 px-2">
<ul>
<li class="font-weight-bold">Stored 10’s of trillions of rows of data</li>
@ -52,22 +52,22 @@
<div class="card-body case-study-card-body">
<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;">
<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;object-fit:contain;object-position:left center;">
<div class="row mx-n2" equalize-heights="case-study-card-row">
<div class="col-lg-2 px-2 d-none d-lg-flex flex-column">
<div class="row flex-lg-nowrap mx-n2" equalize-heights="case-study-card-row">
<div class="px-2 d-none d-lg-flex flex-column" style="width: 104px;">
<div class="case-study-card-toggle mt-auto"></div>
</div>
<div class="col-lg-6 pb-5 pb-lg-0 px-2">
<div class="col-lg-auto pb-5 pb-lg-0 px-2">
<p class="mb-3 mb-lg-5 text-dark">{{ _('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.') }}</p>
<p class="mb-3 text-dark">{{ _('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.') }}</p>
<a class="trailing-link" href="https://eng.uber.com/logging/">{{ _('Read the Case Study') }}</a>
</div>
<div class="col-lg-4 px-2">
<div class="col-lg-3 px-2">
<ul>
<li class="font-weight-bold">3x data compression</li>
@ -91,22 +91,22 @@
<div class="card-body case-study-card-body">
<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;">
<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;object-fit:contain;object-position:left center;">
<div class="row mx-n2" equalize-heights="case-study-card-row">
<div class="col-lg-2 px-2 d-none d-lg-flex flex-column">
<div class="row flex-lg-nowrap mx-n2" equalize-heights="case-study-card-row">
<div class="px-2 d-none d-lg-flex flex-column" style="width: 104px;">
<div class="case-study-card-toggle mt-auto"></div>
</div>
<div class="col-lg-6 pb-5 pb-lg-0 px-2">
<div class="col-lg-auto pb-5 pb-lg-0 px-2">
<p class="mb-3 mb-lg-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>
<p class="mb-3 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>
<a class="trailing-link" href="https://tech.ebayinc.com/engineering/ou-online-analytical-processing/">{{ _('Read the Case Study') }}</a>
</div>
<div class="col-lg-4 px-2">
<div class="col-lg-3 px-2">
<ul>
<li class="font-weight-bold">Reduced DevOps activity and troubleshooting</li>
@ -130,22 +130,22 @@
<div class="card-body case-study-card-body">
<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;">
<img class="d-block mb-3" src="/images/logos/logo-cloudflare.svg" height="40" width="246" title="Cloudflare" style="aspect-ratio: 246 / 40;height: auto;object-fit:contain;object-position:left center;">
<div class="row mx-n2" equalize-heights="case-study-card-row">
<div class="col-lg-2 px-2 d-none d-lg-flex flex-column">
<div class="row flex-lg-nowrap mx-n2" equalize-heights="case-study-card-row">
<div class="px-2 d-none d-lg-flex flex-column" style="width: 104px;">
<div class="case-study-card-toggle mt-auto"></div>
</div>
<div class="col-lg-6 pb-5 pb-lg-0 px-2">
<div class="col-lg-auto pb-5 pb-lg-0 px-2">
<p class="mb-3 mb-lg-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 10’s of thousands of lines of code, reduced their MTTR, and saw a 7x improvement on customer queries per second they could serve.') }}</p>
<p class="mb-3 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 10’s of thousands of lines of code, reduced their MTTR, and saw a 7x improvement on customer queries per second they could serve.') }}</p>
<a class="trailing-link" href="https://blog.cloudflare.com/http-analytics-for-6m-requests-per-second-using-clickhouse/">{{ _('Read the Case Study') }}</a>
</div>
<div class="col-lg-4 px-2">
<div class="col-lg-3 px-2">
<ul>
<li class="font-weight-bold">Scaled to 8M requests per second</li>
@ -169,22 +169,22 @@
<div class="card-body case-study-card-body">
<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;">
<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;object-fit:contain;object-position:left center;">
<div class="row mx-n2" equalize-heights="case-study-card-row">
<div class="col-lg-2 px-2 d-none d-lg-flex flex-column">
<div class="row flex-lg-nowrap mx-n2" equalize-heights="case-study-card-row">
<div class="px-2 d-none d-lg-flex flex-column" style="width: 104px;">
<div class="case-study-card-toggle mt-auto"></div>
</div>
<div class="col-lg-6 pb-5 pb-lg-0 px-2">
<div class="col-lg-auto pb-5 pb-lg-0 px-2">
<p class="mb-3 mb-lg-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>
<p class="mb-3 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>
<a class="trailing-link" href="https://www.slideshare.net/glebus/using-clickhouse-for-experimentation-104247173">{{ _('Read the Case Study') }}</a>
</div>
<div class="col-lg-4 px-2">
<div class="col-lg-3 px-2">
<ul>
<li class="font-weight-bold">Reduced the amount of low-variance work</li>
@ -208,22 +208,22 @@
<div class="card-body case-study-card-body">
<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;">
<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;object-fit:contain;object-position:left center;">
<div class="row mx-n2" equalize-heights="case-study-card-row">
<div class="col-lg-2 px-2 d-none d-lg-flex flex-column">
<div class="row flex-lg-nowrap mx-n2" equalize-heights="case-study-card-row">
<div class="px-2 d-none d-lg-flex flex-column" style="width: 104px;">
<div class="case-study-card-toggle mt-auto"></div>
</div>
<div class="col-lg-6 pb-5 pb-lg-0 px-2">
<div class="col-lg-auto pb-5 pb-lg-0 px-2">
<p class="mb-3 mb-lg-5 text-dark">{{ _('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.') }}</p>
<p class="mb-3 text-dark">{{ _('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.') }}</p>
<a class="trailing-link" href="https://bigdatadays.ru/wp-content/uploads/2019/10/D2-H3-3_Yakunin-Goihburg.pdf">{{ _('Read the Case Study') }}</a>
</div>
<div class="col-lg-4 px-2">
<div class="col-lg-3 px-2">
<ul>
<li class="font-weight-bold">Platform for reporting and deep data analysis</li>

12
website/templates/index/why.html
View File

@ -1,15 +1,15 @@
<div class="section pt-0">
<div class="section">
<div class="container">
<h2 class="display-2 text-center mb-5 mb-md-8 mb-lg-10">
<hr class="mb-10">
<h2 class="display-2 text-center mb-3">
Why ClickHouse
</h2>
{% if false %}
<p class="lead text-muted text-center mb-5 mb-md-8 mb-lg-10 mx-auto" style="max-width:840px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<p class="lead text-muted text-center mb-5 mb-md-8 mb-lg-10 mx-auto" style="max-width:740px;">
{{ _('Our feature rich and hardware efficient OLAP data management system is the right choice for your organization.') }}
</p>
{% endif %}
<div class="row mb-5 mb-md-8 mb-lg-10">
<div class="col-lg-6 mb-5 mb-md-8 mb-lg-0 mx-auto mx-lg-0 d-flex flex-column align-items-center align-items-lg-start text-center text-lg-left" style="max-width: 560px;">