diff --git a/build.gradle b/build.gradle index 15d1dd0d22fb..c836cea30c43 100644 --- a/build.gradle +++ b/build.gradle @@ -82,6 +82,9 @@ rat { "website/www/site/themes", "website/www/yarn.lock", "website/www/package.json", + "website/www/site/static/js/hero/lottie-light.min.js", + "website/www/site/static/js/keen-slider.min.js", + "website/www/site/assets/scss/_keen-slider.scss", // Ignore ownership files "ownership/**/*", diff --git a/website/www/site/assets/icons/install-button-icon.svg b/website/www/site/assets/icons/install-button-icon.svg new file mode 100644 index 000000000000..39c3ffcfbd31 --- /dev/null +++ b/website/www/site/assets/icons/install-button-icon.svg @@ -0,0 +1,22 @@ + + + + + diff --git a/website/www/site/assets/icons/navbar-arrow-icon.svg b/website/www/site/assets/icons/navbar-arrow-icon.svg new file mode 100644 index 000000000000..78724e930331 --- /dev/null +++ b/website/www/site/assets/icons/navbar-arrow-icon.svg @@ -0,0 +1,23 @@ + + + + + + diff --git a/website/www/site/assets/icons/navbar-documentation-icon.svg b/website/www/site/assets/icons/navbar-documentation-icon.svg new file mode 100644 index 000000000000..11c165b0feba --- /dev/null +++ b/website/www/site/assets/icons/navbar-documentation-icon.svg @@ -0,0 +1,22 @@ + + + + + diff --git a/website/www/site/assets/icons/quote-icon.svg b/website/www/site/assets/icons/quote-icon.svg new file mode 100644 index 000000000000..0a32eea254ad --- /dev/null +++ b/website/www/site/assets/icons/quote-icon.svg @@ -0,0 +1,22 @@ + + + + + diff --git a/website/www/site/assets/scss/_calendar.scss b/website/www/site/assets/scss/_calendar.scss index 69e2bf81a291..c78c16081571 100644 --- a/website/www/site/assets/scss/_calendar.scss +++ b/website/www/site/assets/scss/_calendar.scss @@ -209,7 +209,7 @@ min-height: 456px; .calendar-card-small { - max-width: 327px; + width: 327px; height: 216px; padding: 24px 20px; diff --git a/website/www/site/assets/scss/_cards.sass b/website/www/site/assets/scss/_cards.sass deleted file mode 100644 index a1562d0dde1d..000000000000 --- a/website/www/site/assets/scss/_cards.sass +++ /dev/null @@ -1,69 +0,0 @@ -/*! - * Licensed to the Apache Software Foundation (ASF) under one or more - * contributor license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright ownership. - * The ASF licenses this file to You under the Apache License, Version 2.0 - * (the "License"); you may not use this file except in compliance with - * the License. You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -.cards - background-image: url(../images/cards_bg.svg) - background-size: cover - background-repeat: no-repeat - background-position: top - text-align: center - margin-bottom: $pad*2 - - .cards__title - +type-h2 - color: #fff - padding-top: $pad-md - margin-bottom: $pad - - .cards__body - max-width: 550px - +type-body - margin: 0 auto - - .cards__cards - margin-bottom: $pad*2 - +md - display: flex - justify-content: center - align-items: center - - .cards__cards__card - background: #fff - box-shadow: $box-shadow - max-width: 300px - margin: 0 auto $pad - padding: $pad*1.5 - +md - margin: 0 $pad/2 - - .cards__cards__card__body - margin-bottom: $pad - +type-h3 - - .cards__cards__card__user - display: flex - justify-content: center - align-items: center - - .cards__cards__card__user__icon - border-radius: 100% - background: #efefef - width: 40px - height: 40px - - .cards__cards__card__user__name - margin-left: $pad/2 diff --git a/website/www/site/assets/scss/_global.sass b/website/www/site/assets/scss/_global.sass index a4dd35517e26..2410e0d64693 100644 --- a/website/www/site/assets/scss/_global.sass +++ b/website/www/site/assets/scss/_global.sass @@ -26,7 +26,6 @@ body .body background: #fff margin: 0 auto - padding-top: 130px &:not(.body--index) .body__contained @@ -67,4 +66,8 @@ body .container-main-content padding: 0 20px - position: relative \ No newline at end of file + position: relative + margin-top: 85px + + @media (min-width: $tablet) + margin-top: 0 \ No newline at end of file diff --git a/website/www/site/assets/scss/_graphic.sass b/website/www/site/assets/scss/_graphic.sass index f01c72a12528..cd171f7db00b 100644 --- a/website/www/site/assets/scss/_graphic.sass +++ b/website/www/site/assets/scss/_graphic.sass @@ -16,6 +16,8 @@ */ .graphic + padding: $pad-l $pad + .graphic__image text-align: center line-height: 0 diff --git a/website/www/site/assets/scss/_hero-mobile.scss b/website/www/site/assets/scss/_hero-mobile.scss new file mode 100644 index 000000000000..343c279f4c90 --- /dev/null +++ b/website/www/site/assets/scss/_hero-mobile.scss @@ -0,0 +1,62 @@ +/*! + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +@import "media"; + +.hero-mobile { + position: relative; + margin-bottom: 0; + display: none; + + .hero-content { + position: absolute; + z-index: 1; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + width: 100%; + max-width: 506px; + + h3 { + @extend .hero-title; + + text-transform: uppercase; + margin: 0 auto 16px auto; + } + + h1 { + @extend .hero-heading; + + width: 300px; + margin: 0 auto 24px auto; + } + + h2 { + @extend .hero-subheading; + + width: 300px; + margin: 0 auto; + } + } +} + +@media (max-width: $mobile) { + .hero-mobile { + display: inherit; + } +} diff --git a/website/www/site/assets/scss/_hero.sass b/website/www/site/assets/scss/_hero.sass deleted file mode 100644 index 63c22b9282a5..000000000000 --- a/website/www/site/assets/scss/_hero.sass +++ /dev/null @@ -1,156 +0,0 @@ -/*! - * Licensed to the Apache Software Foundation (ASF) under one or more - * contributor license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright ownership. - * The ASF licenses this file to You under the Apache License, Version 2.0 - * (the "License"); you may not use this file except in compliance with - * the License. You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -.hero-bg - background-image: url(../images/hero_bg_flat.svg) - background-repeat: no-repeat - background-size: cover - background-position: top center - margin-top: -50px - +md - background-size: 100% - padding-bottom: $pad - -.hero - padding-top: $pad-xl - margin-bottom: $pad-md - position: relative - z-index: 1 - +md - padding-top: $pad-sm - margin-bottom: $pad-xl - - .hero__content - position: relative - z-index: 1 - - .hero__image - bottom: 0 - content: '' - left: 0 - line-height: 0 - position: absolute - right: 0 - top: 0 - z-index: 0 - img - position: absolute - bottom: 0 - width: 100% - - .hero__title - +type-h1 - color: #fff - max-width: 500px - margin: 0 auto $pad - text-align: center - +md - margin: 0 0 $pad - text-align: left - - .hero__ctas - text-align: center - margin-bottom: $pad-md - +md - margin-bottom: 0 - text-align: left - - &--first - margin-bottom: $pad - +md - margin-bottom: $pad-sm - - .hero__subtitle - +type-h3 - color: #fff - max-width: 540px - margin: 0 auto $pad - font-weight: $font-weight-semibold - text-align: center - +md - margin: 0 0 $pad-md - text-align: left - - .hero__blog - .hero__blog__title - +type-h4 - font-weight: $font-weight-bold - margin-bottom: $pad - text-align: center - +md - color: #fff - text-align: left - margin-bottom: $pad/2 - - .hero__blog__cards - +md - display: flex - margin: 0 -10px - - .hero__blog__cards__card - background-color: #fff - color: inherit - box-shadow: $box-shadow - padding: 20px - display: block - transition: transform 300ms ease, box-shadow 300ms ease - position: relative - max-width: 300px - margin: 0 auto $pad - +md - margin: 0 10px - - &:before - background-image: url(../images/card_border.svg) - background-position: top - background-repeat: no-repeat - background-size: cover - content: ' ' - display: block - height: 2px - position: absolute - width: 100% - left: 0 - top: 0 - - &:hover - text-decoration: none - transform: translateY(-8px) - box-shadow: $box-shadow-hover - - .hero__blog__cards__card__title - +type-body - margin-bottom: $pad - - .hero__blog__cards__card__date - +type-body-sm - font-weight: $font-weight-semibold - text-transform: uppercase - letter-spacing: 1px - - .hero__cols - +md - display: flex - min-height: 500px - - .hero__cols__col - width: 50% - display: flex - align-items: flex-end - - &:first-child - align-items: center diff --git a/website/www/site/assets/scss/_hero.scss b/website/www/site/assets/scss/_hero.scss new file mode 100644 index 000000000000..e204d1bf015d --- /dev/null +++ b/website/www/site/assets/scss/_hero.scss @@ -0,0 +1,128 @@ +/*! + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +@import "media"; + +.hero-desktop { + position: relative; + margin-bottom: 0; + width: 100%; + height: 100%; + display: inherit; + margin-top: -30px; + + .hero-content { + position: absolute; + z-index: 1; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + + h3 { + @extend .hero-title; + + text-transform: uppercase; + margin: 0 auto 24px auto; + } + + h1 { + @extend .hero-heading; + width: 506px; + + margin: 0 auto 36px auto; + } + + h2 { + @extend .hero-subheading; + + width: 344px; + margin: 0 auto 56px auto; + } + + a { + text-decoration: none; + } + + button { + width: 184px; + height: 46px; + padding: 15px 28px 15px 26px; + border-radius: 100px; + box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.16), + 0 4px 4px 0 rgba(0, 0, 0, 0.06); + background-color: $color-white; + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto; + border: none; + outline: none; + + span { + text-transform: uppercase; + font-size: 14px; + font-weight: bold; + letter-spacing: 0.6px; + color: $color-sun; + } + } + + button:hover { + background-color: $color-white; + box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.24), + 0 4px 6px 0 rgba(0, 0, 0, 0.24); + } + + button:focus { + box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.16), + 0 4px 4px 0 rgba(0, 0, 0, 0.06); + } + } +} + +@media (max-width: $tablet) { + .hero-desktop { + margin-top: 70px; + + .hero-content { + h3 { + margin: 0 auto 16px auto; + } + + h1 { + width: 300px; + margin: 0 auto 24px auto; + } + + h2 { + width: 300px; + margin: 0 auto; + } + + button { + display: none; + } + } + } +} + +@media (max-width: $mobile) { + .hero-desktop { + display: none; + } +} diff --git a/website/www/site/assets/scss/_keen-slider.scss b/website/www/site/assets/scss/_keen-slider.scss new file mode 100644 index 000000000000..08a4326e0042 --- /dev/null +++ b/website/www/site/assets/scss/_keen-slider.scss @@ -0,0 +1,40 @@ +/** + * keen-slider 5.3.2 + * The HTML touch slider carousel with the most native feeling you will get. + * https://keen-slider.io + * Copyright 2020-2020 Eric Beyer + * License: MIT + * Released on: 2020-11-10 + */ + +/*# sourceMappingURL=keen-slider.min.css.map */ +// This is pulled from "https://cdn.jsdelivr.net/npm/keen-slider@5.3.2/keen-slider.min.css" to serve the consistency +.keen-slider { + display: flex; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-touch-callout: none; + -khtml-user-select: none; + touch-action: pan-y; + -webkit-tap-highlight-color: transparent; +} +.keen-slider, +.keen-slider__slide { + overflow: hidden; + position: relative; +} +.keen-slider__slide { + width: 100%; + min-height: 100%; +} +.keen-slider[data-keen-slider-v] { + flex-wrap: wrap; +} +.keen-slider[data-keen-slider-v] .keen-slider__slide { + width: 100%; +} +.keen-slider[data-keen-slider-moves] * { + pointer-events: none; +} diff --git a/website/www/site/assets/scss/_navbar-desktop.scss b/website/www/site/assets/scss/_navbar-desktop.scss new file mode 100644 index 000000000000..57eb63350808 --- /dev/null +++ b/website/www/site/assets/scss/_navbar-desktop.scss @@ -0,0 +1,174 @@ +/*! + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +@import "media"; + +.navigation-bar-mobile { + display: none; +} + +.navigation-bar-desktop { + display: flex; + height: 96px; + width: 100%; + align-items: center; + justify-content: space-between; + margin-bottom: 30px; + box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.06); + background-color: $color-white; + z-index: 10000; // just to make sure that navbar always on top of other elements + + a { + @extend .component-text; + + color: $color-dark-gray; + letter-spacing: 0.2; + margin-right: 56px; + text-decoration: none; + cursor: pointer; + } + + .navbar-logo { + margin-left: 58px; + + img { + width: 88px; + } + } + + .navbar-links { + display: flex; + align-items: center; + justify-content: space-between; + z-index: 10000; + + :last-child { + margin-right: 0; + } + + .navbar-link { + display: inline-block; + position: relative; + margin-bottom: 2px; + } + + .navbar-link::before { + transition: 0.3; + content: ""; + position: absolute; + background-color: $color-sun; + height: 0%; + width: 100%; + bottom: 0px; + border-radius: 5px; + } + + .navbar-link:hover::before { + height: 2px; + } + + .navbar-dropdown-documentation { + list-style-type: none; + + .dropdown-toggle { + margin: 0; + } + + ul { + width: 209px; + left: -25%; + text-align: center; + border: none; + box-shadow: none; + padding-top: 34px; + padding-bottom: 0; + + a { + @extend .component-text; + } + } + } + } + + .navbar-dropdown-apache { + margin-right: 90px; + list-style-type: none; + + .dropdown-toggle { + margin: 0; + } + + ul { + width: 209px; + left: 70%; + transform: translateX(-50%); + text-align: center; + border: none; + box-shadow: none; + padding-top: 35px; + padding-bottom: 0; + + a { + @extend .component-text; + + margin-right: 0 !important; + } + } + + .arrow-icon { + position: absolute; + top: 3px; + right: -30px; + } + } + + .navbar-dropdown-apache:hover { + .arrow-icon { + opacity: 0.84; + } + } + + .navbar-dropdown { + .dropdown-menu > li > a { + &:hover, + &:focus { + text-decoration: none; + color: $color-dropdown-link-hover-text; + background-color: $color-dropdown-link-hover-bg; + } + } + } + + .dropdown:hover .dropdown-menu { + display: block; + margin-top: 0; + } +} + +@media (max-width: $tablet) { + .navigation-bar-desktop { + display: none; + } + + .navigation-bar-mobile { + display: block; + } + + .page-nav { + margin-top: 30px; + } +} \ No newline at end of file diff --git a/website/www/site/assets/scss/_navbar.sass b/website/www/site/assets/scss/_navbar-mobile.sass similarity index 87% rename from website/www/site/assets/scss/_navbar.sass rename to website/www/site/assets/scss/_navbar-mobile.sass index f4b4ea6bcae7..762b5e517b9a 100644 --- a/website/www/site/assets/scss/_navbar.sass +++ b/website/www/site/assets/scss/_navbar-mobile.sass @@ -23,6 +23,7 @@ .navbar-header margin-left: $pad + float: none .navbar-brand +md @@ -40,16 +41,17 @@ color: $color-dark-gray .navbar-toggle - float: left + margin-right: 24px .icon-bar - background-color: $color-dark-gray + background-color: $color-sun + height: 3px - @media (max-width: $ak-breakpoint-lg) + @media (max-width: $tablet) display: block .navbar-container - @media (max-width: $ak-breakpoint-lg) + @media (max-width: $tablet) background-color: $color-white bottom: 0 min-height: 100vh @@ -59,12 +61,13 @@ top: 0 transition: transform 100ms linear width: calc(100% - 32px) + right: 0 .navbar-nav > li width: 100% &.closed - transform: translateX(-100%) + transform: translateX(100%) &.open transform: translateX(0) @@ -78,7 +81,7 @@ top: 0 transition: opacity 200ms - @media (max-width: $ak-breakpoint-lg) + @media (max-width: $tablet) display: block &.closed @@ -89,6 +92,6 @@ opacity: 0.5 width: 100% - @media (max-width: $ak-breakpoint-lg) + @media (max-width: $tablet) .navbar-right margin-right: -15px diff --git a/website/www/site/assets/scss/_quotes.scss b/website/www/site/assets/scss/_quotes.scss new file mode 100644 index 000000000000..6d59798289f0 --- /dev/null +++ b/website/www/site/assets/scss/_quotes.scss @@ -0,0 +1,151 @@ +/*! + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +@import "media"; + +.quotes { + padding: $pad-l $pad; + background-color: $color-medium-gray; + + .quotes-title { + @extend .component-title; + + text-align: center; + border: none; + } + + .quotes-desktop { + display: flex; + justify-content: center; + + .quote-card { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + width: 100%; + max-width: 381px; + height: 474px; + margin: 86px 36px 0 0; + padding: 55px 20px 24px 20px; + border-radius: 16px; + background-color: $color-white; + box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.16), + 0 4px 4px 0 rgba(0, 0, 0, 0.06); + margin-right: 36px; + + .quote-text { + @extend .component-quote; + + margin: 108px 0 20px 0; + } + + img { + width: 172px; + } + } + + :last-child { + margin-right: 0; + } + } + + // Sliding feature is only displayed on mobile version + .keen-slider { + display: none; + } + + .dots { + display: none; + } + + .keen-slider { + width: 327px; + margin: 0 auto; + border-radius: 16px; + background-color: $color-white; + box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.16), + 0 4px 4px 0 rgba(0, 0, 0, 0.06); + + .keen-slider__slide { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + width: 100%; + max-width: 327px; + height: 468px; + padding: 55px 24px 24px 24px; + + .quote-text { + @extend .component-quote; + + margin: 108px 0 20px 0; + } + + img { + width: 172px; + } + } + } + + .dots { + display: none; + padding: 10px 0; + justify-content: center; + margin-top: 46px; + } + + .dot { + border: none; + width: 13px; + height: 13px; + background: $color-smoke; + border-radius: 50%; + margin: 0 5px; + padding: 4px; + cursor: pointer; + } + + .dot:focus { + outline: none; + } + + .dot--active { + background: $color-sun; + } +} + +@media (max-width: $tablet) { + .quotes { + .quotes-title { + margin-bottom: 64px; + } + + .quotes-desktop { + display: none; + } + + .keen-slider { + display: flex; + } + + .dots { + display: flex; + } + } +} diff --git a/website/www/site/assets/scss/_section-nav.sass b/website/www/site/assets/scss/_section-nav.sass index 61aff9f462ea..d8c4ed195b83 100644 --- a/website/www/site/assets/scss/_section-nav.sass +++ b/website/www/site/assets/scss/_section-nav.sass @@ -97,7 +97,7 @@ @media (max-width: $ak-breakpoint-lg) background-color: $color-light-gray bottom: 0 - left: 0 + right: 0 max-width: 256px position: fixed top: 0 @@ -110,7 +110,7 @@ overflow-y: auto &.closed - transform: translateX(-100%) + transform: translateX(100%) &.open transform: translateX(0) diff --git a/website/www/site/assets/scss/_typography.scss b/website/www/site/assets/scss/_typography.scss index 99eacfe4ca04..807619cadd05 100644 --- a/website/www/site/assets/scss/_typography.scss +++ b/website/www/site/assets/scss/_typography.scss @@ -14,8 +14,8 @@ * See the License for the specific language governing permissions and * limitations under the License. */ - - @import "media"; + +@import "media"; .component-title { font-size: 36px; @@ -88,6 +88,44 @@ color: $color-smoke; } +.component-quote { + font-size: 20px; + font-weight: normal; + font-stretch: normal; + font-style: italic; + line-height: 1.44; + letter-spacing: 0.43px; + text-align: center; + color: $color-gray; +} + +.hero-title { + font-size: 16px; + font-weight: normal; + font-style: normal; + line-height: 1.88; + letter-spacing: 0.8px; + color: $color-white; +} + +.hero-heading { + font-size: 46px; + font-weight: 500; + font-style: normal; + line-height: 1; + letter-spacing: normal; + color: $color-white; +} + +.hero-subheading { + font-size: 20px; + font-weight: normal; + font-style: normal; + line-height: 1.44; + letter-spacing: normal; + color: $color-white; +} + @media (max-width: $tablet) { .component-title { font-size: 28px; @@ -95,4 +133,7 @@ .component-large-header { font-size: 24px; } -} \ No newline at end of file + .hero-heading { + font-size: 32px; + } +} diff --git a/website/www/site/assets/scss/_vars.sass b/website/www/site/assets/scss/_vars.sass index df4276a042b1..626313d993b2 100644 --- a/website/www/site/assets/scss/_vars.sass +++ b/website/www/site/assets/scss/_vars.sass @@ -24,6 +24,10 @@ $color-gray: #333333 $color-smoke: #8C8B8E $color-sun: #F26628 $color-silver: #C4C4C4 +$color-medium-gray: #FBFBFB + +$color-dropdown-link-hover-text: #E65D21 +$color-dropdown-link-hover-bg: #FFEDE5 $pad-sm: 15px $pad-s: 24px diff --git a/website/www/site/assets/scss/main.scss b/website/www/site/assets/scss/main.scss index e4075a1fe51a..b40befd414cd 100644 --- a/website/www/site/assets/scss/main.scss +++ b/website/www/site/assets/scss/main.scss @@ -20,26 +20,28 @@ // Globals. @import "_vars.sass"; +@import "_media.scss"; @import "_breakpoints.sass"; @import "_type.sass"; @import "_global.sass"; -@import "_navbar.sass"; +@import "_navbar-mobile.sass"; @import "_typography.scss"; -@import "_media.scss"; // Components. @import "_button.sass"; // Modules. -@import "_cards.sass"; @import "_ctas.sass"; @import "_footer.sass"; @import "_graphic.sass"; @import "_header.sass"; -@import "_hero.sass"; +@import "_hero.scss"; +@import "_hero-mobile.scss"; @import "_logos.scss"; @import "_pillars.scss"; @import "_section-nav.sass"; @import "_page-nav.sass"; @import "_table-wrapper.sass"; -@import "_calendar.scss"; \ No newline at end of file +@import "_calendar.scss"; +@import "_quotes.scss"; +@import "navbar-desktop.scss"; \ No newline at end of file diff --git a/website/www/site/data/en/quotes.yaml b/website/www/site/data/en/quotes.yaml new file mode 100644 index 000000000000..537171a7d4c2 --- /dev/null +++ b/website/www/site/data/en/quotes.yaml @@ -0,0 +1,23 @@ +# Licensed under the Apache License, Version 2.0 (the "License"); +# you may not use this file except in compliance with the License. +# You may obtain a copy of the License at +# +# http://www.apache.org/licenses/LICENSE-2.0 +# +# Unless required by applicable law or agreed to in writing, software +# distributed under the License is distributed on an "AS IS" BASIS, +# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +# See the License for the specific language governing permissions and +# limitations under the License. + +# TODO: +# Placeholder texts should be updated later +- text: A framework that delivers the flexibility and advanced functionality our customers need. + icon: icons/quote-icon.svg + logoUrl: images/quote-paypal-logo.png +- text: A framework that delivers the flexibility and advanced functionality our customers need. + icon: icons/quote-icon.svg + logoUrl: images/quote-paypal-logo.png +- text: A framework that delivers the flexibility and advanced functionality our customers need. + icon: icons/quote-icon.svg + logoUrl: images/quote-paypal-logo.png \ No newline at end of file diff --git a/website/www/site/i18n/home/en.yaml b/website/www/site/i18n/home/en.yaml index 8a1ac53eecf8..6ae87c04f465 100644 --- a/website/www/site/i18n/home/en.yaml +++ b/website/www/site/i18n/home/en.yaml @@ -10,10 +10,6 @@ # See the License for the specific language governing permissions and # limitations under the License. -- id: home-hero-title - translation: "Apache Beam: An advanced unified programming model" -- id: home-hero-subtitle - translation: "Implement batch and streaming data processing jobs that run on any execution engine." - id: home-learn-more translation: "Learn more" - id: home-try-beam diff --git a/website/www/site/data/en/cards.yaml b/website/www/site/i18n/home/hero/en.yaml similarity index 60% rename from website/www/site/data/en/cards.yaml rename to website/www/site/i18n/home/hero/en.yaml index a2981e7fba86..85f4728d86be 100644 --- a/website/www/site/data/en/cards.yaml +++ b/website/www/site/i18n/home/hero/en.yaml @@ -10,9 +10,11 @@ # See the License for the specific language governing permissions and # limitations under the License. -- quote: "A framework that delivers the flexibility and advanced functionality our customers need." - name: –Talend -- quote: "Apache Beam has powerful semantics that solve real-world challenges of stream processing." - name: –PayPal -- quote: "Apache Beam represents a principled approach for analyzing data streams." - name: –data Artisans +- id: home-hero-title + translation: Introducing Apache Beam +- id: home-hero-heading + translation: An advanced unified programming model +- id: home-hero-subheading + translation: Implement batch and streaming data processing jobs that run on any execution engine. +- id: home-hero-button + translation: Install Beam diff --git a/website/www/site/i18n/home/quotes/en.yaml b/website/www/site/i18n/home/quotes/en.yaml new file mode 100644 index 000000000000..95c8e85b6453 --- /dev/null +++ b/website/www/site/i18n/home/quotes/en.yaml @@ -0,0 +1,14 @@ +# Licensed under the Apache License, Version 2.0 (the "License"); +# you may not use this file except in compliance with the License. +# You may obtain a copy of the License at +# +# http://www.apache.org/licenses/LICENSE-2.0 +# +# Unless required by applicable law or agreed to in writing, software +# distributed under the License is distributed on an "AS IS" BASIS, +# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +# See the License for the specific language governing permissions and +# limitations under the License. + +- id: home-quotes-title + translation: "They tried it out" \ No newline at end of file diff --git a/website/www/site/i18n/navbar/en.yaml b/website/www/site/i18n/navbar/en.yaml index fd22c3a73821..ae6255e50683 100644 --- a/website/www/site/i18n/navbar/en.yaml +++ b/website/www/site/i18n/navbar/en.yaml @@ -16,10 +16,12 @@ translation: "Get Started" - id: nav-documentation translation: "Documentation" +- id: nav-documentation-general + translation: "General" - id: nav-languages translation: "Languages" - id: nav-runners - translation: "RUNNERS" + translation: "Runners" - id: nav-roadmap translation: "Roadmap" - id: nav-contribute diff --git a/website/www/site/layouts/_default/baseof.html b/website/www/site/layouts/_default/baseof.html index 6c245c51ac9f..b8b6e26cdfd9 100644 --- a/website/www/site/layouts/_default/baseof.html +++ b/website/www/site/layouts/_default/baseof.html @@ -22,10 +22,12 @@ {{ block "pillars-section" . }}{{ end }} {{ block "graphic-section" . }}{{ end }} {{ block "calendar-section" . }}{{ end }} + {{ block "quotes-section" . }}{{ end }} + {{ block "quotes-mobile-section" . }}{{ end }} {{ block "logos-section" . }}{{ end }} - {{ block "cards-section" . }}{{ end }} {{ block "ctas-section" . }}{{ end }} {{ partial "footer.html" . }} + {{ partial "hooks/body-end.html"}} diff --git a/website/www/site/layouts/index.html b/website/www/site/layouts/index.html index bbfdf71b9132..4f7f0a536587 100644 --- a/website/www/site/layouts/index.html +++ b/website/www/site/layouts/index.html @@ -11,47 +11,28 @@ */}} {{ define "hero-section" }} -
-
-
-
-
-
- {{ T "home-hero-title" }} -
-
- {{ T "home-hero-subtitle" }} -
-
- {{ T "home-learn-more" }} - {{ T "home-try-beam" }} - {{ T "home-download-beam" . }} -
-
- {{ T "home-java-quickstart" }} - {{ T "home-python-quickstart" }} - {{ T "home-go-quickstart" }} -
-
-
-
-
-
- {{ T "home-hero-blog-title" }} -
-
- - {{ range ( where site.RegularPages "Section" "blog" | first 3 ) }} - -
{{ .Title }}
-
{{ .Date.Format "Jan 2, 2006" }}
- - {{ end }} - -
-
-
-
+
+
+

{{ T "home-hero-title" }}

+

{{ T "home-hero-heading" }}

+

{{ T "home-hero-subheading" }}

+ + + +
+
+
+
+

{{ T "home-hero-title" }}

+

{{ T "home-hero-heading" }}

+

{{ T "home-hero-subheading" }}

{{ end }} @@ -154,6 +135,32 @@

{{ end }} +{{ define "quotes-section" }} +
+
+ {{ T "home-quotes-title" }} +
+ +
+ {{ $data := index $.Site.Data .Site.Language.Lang }} + {{ range $quote := $data.quotes }} + {{ partial "quotes/quote.html" (dict "icon" $quote.icon "text" $quote.text "logoUrl" $quote.logoUrl) }} + {{ end }} +
+ + {{/* + The id "my-keen-slider" and "dots" should be named as defaults to make the external library (Keen Slider) works well + */}} +
+ {{ $data := index $.Site.Data .Site.Language.Lang }} + {{ range $quote := $data.quotes }} + {{ partial "quotes/quote-mobile.html" (dict "icon" $quote.icon "text" $quote.text "logoUrl" $quote.logoUrl) }} + {{ end }} +
+
+
+{{ end }} + {{ define "logos-section" }}
@@ -169,38 +176,6 @@

{{ end }} -{{ define "cards-section" }} -
-
-
- {{ T "home-cards-title" }} -
-
- {{ $data := index $.Site.Data .Site.Language.Lang }} - {{ range $card := $data.cards }} -
-
- {{ $card.quote }} -
-
- {{/* TODO: Implement icons (Original comment from Jekyll) -
-
- */}} -
- {{ $card.name }} -
-
-
- {{ end }} -
-
- {{ T "home-cards-body" }} {{ T "home-contribute" }} {{ T "home-section" }}. -
-
-
-{{ end }} - {{ define "ctas-section" }}
diff --git a/website/www/site/layouts/partials/header.html b/website/www/site/layouts/partials/header.html index 73c9867acffc..af8417087c20 100644 --- a/website/www/site/layouts/partials/header.html +++ b/website/www/site/layouts/partials/header.html @@ -10,18 +10,18 @@ limitations under the License. See accompanying LICENSE file. */}} -