This is an automated email from the ASF dual-hosted git repository.
bhulette pushed a commit to branch website-revamp
in repository https://gitbox.apache.org/repos/asf/beam.git
The following commit(s) were added to refs/heads/website-revamp by this push:
new 140a913 [Website revamp][11179 - 11180 - 11183] Implemented Quotes
component, Header and Navbar (#13439)
140a913 is described below
commit 140a9139328ac7a87b9291aaa16bee5724009842
Author: Nam Bui <[email protected]>
AuthorDate: Tue Dec 8 09:08:25 2020 +0700
[Website revamp][11179 - 11180 - 11183] Implemented Quotes component,
Header and Navbar (#13439)
* Implemented About social media component
* Implemented Quotes component
* Implemented Hero component
* Changed Navbar component
* Added license
* Review changes
* Review changes
---
build.gradle | 3 +
.../www/site/assets/icons/install-button-icon.svg | 22 +++
.../www/site/assets/icons/navbar-arrow-icon.svg | 23 +++
.../assets/icons/navbar-documentation-icon.svg | 22 +++
website/www/site/assets/icons/quote-icon.svg | 22 +++
website/www/site/assets/scss/_calendar.scss | 2 +-
website/www/site/assets/scss/_cards.sass | 69 --------
website/www/site/assets/scss/_global.sass | 7 +-
website/www/site/assets/scss/_graphic.sass | 2 +
.../assets/scss/{_vars.sass => _hero-mobile.scss} | 66 +++++---
website/www/site/assets/scss/_hero.sass | 156 ------------------
website/www/site/assets/scss/_hero.scss | 128 +++++++++++++++
website/www/site/assets/scss/_keen-slider.scss | 40 +++++
website/www/site/assets/scss/_navbar-desktop.scss | 174 +++++++++++++++++++++
.../scss/{_navbar.sass => _navbar-mobile.sass} | 17 +-
website/www/site/assets/scss/_quotes.scss | 151 ++++++++++++++++++
website/www/site/assets/scss/_section-nav.sass | 4 +-
website/www/site/assets/scss/_typography.scss | 47 +++++-
website/www/site/assets/scss/_vars.sass | 4 +
website/www/site/assets/scss/main.scss | 12 +-
website/www/site/data/en/quotes.yaml | 23 +++
website/www/site/i18n/home/en.yaml | 4 -
.../{data/en/cards.yaml => i18n/home/hero/en.yaml} | 14 +-
.../en/cards.yaml => i18n/home/quotes/en.yaml} | 8 +-
website/www/site/i18n/navbar/en.yaml | 4 +-
website/www/site/layouts/_default/baseof.html | 4 +-
website/www/site/layouts/index.html | 121 ++++++--------
website/www/site/layouts/partials/header.html | 58 ++++++-
.../www/site/layouts/partials/hooks/body-end.html | 17 ++
.../quotes/quote-mobile.html} | 28 ++--
.../baseof.html => partials/quotes/quote.html} | 26 +--
.../www/site/static/images/quote-paypal-logo.png | Bin 0 -> 16047 bytes
website/www/site/static/js/hero/hero-desktop.js | 21 +++
website/www/site/static/js/hero/hero-mobile.js | 21 +++
.../www/site/static/js/hero/lottie-light.min.js | 18 +++
website/www/site/static/js/keen-slider.min.js | 15 ++
website/www/site/static/js/quotes-slider.js | 42 +++++
website/www/site/static/js/section-nav.js | 2 +-
38 files changed, 996 insertions(+), 401 deletions(-)
diff --git a/build.gradle b/build.gradle
index 15d1dd0..c836cea 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 0000000..39c3ffc
--- /dev/null
+++ b/website/www/site/assets/icons/install-button-icon.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ 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.
+-->
+<svg xmlns="http://www.w3.org/2000/svg"; width="16" height="18" fill="none"
viewBox="0 0 16 18">
+ <path stroke="#F26628" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" d="M1 13v2c0 .53.184 1.04.513 1.414.328.375.773.586
1.237.586h10.5c.464 0 .91-.21 1.237-.586.329-.375.513-.884.513-1.414v-2M3 7l5 5
5-5M8 1v11"/>
+</svg>
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 0000000..78724e9
--- /dev/null
+++ b/website/www/site/assets/icons/navbar-arrow-icon.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ 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.
+-->
+<svg xmlns="http://www.w3.org/2000/svg"; width="20" height="20" fill="none"
viewBox="0 0 20 20">
+ <circle cx="10" cy="10" r="10" fill="#FF6D00"/>
+ <path stroke="#fff" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" d="M8.535 5.28l4.573 4.818-4.573 4.403"/>
+</svg>
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 0000000..11c165b
--- /dev/null
+++ b/website/www/site/assets/icons/navbar-documentation-icon.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ 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.
+-->
+<svg xmlns="http://www.w3.org/2000/svg"; width="12" height="11" fill="none"
viewBox="0 0 12 11">
+ <path stroke="#FF6D00" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" d="M10.666 4.535L5.847 9.108 1.444 4.535"/>
+</svg>
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 0000000..0a32eea
--- /dev/null
+++ b/website/www/site/assets/icons/quote-icon.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ 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.
+-->
+<svg xmlns="http://www.w3.org/2000/svg"; width="73" height="26" fill="none"
viewBox="0 0 73 26">
+ <path fill="#FF6D05" d="M13.248 19.058c0-3.696-2.4-6.16-5.952-6.16 0-3.413
2.4-7.489 5.856-9.953L7.968.291C3.36 3.324 0 10.149 0 16.689c0 5.118 2.784 8.53
6.912 8.53 3.648 0 6.336-2.559 6.336-6.16zm18.048 0c0-3.696-2.4-6.16-5.952-6.16
0-3.413 2.4-7.489 5.856-9.953L26.016.291c-4.608 3.033-7.968 9.858-7.968 16.398
0 5.118 2.784 8.53 6.912 8.53 3.648 0 6.336-2.559 6.336-6.16zM41.499 6.926c0
3.697 2.4 6.161 5.952 6.161 0 3.412-2.4 7.488-5.76 9.952l5.088
2.654c4.704-3.033 7.968-9.857 7.96 [...]
+</svg>
diff --git a/website/www/site/assets/scss/_calendar.scss
b/website/www/site/assets/scss/_calendar.scss
index 69e2bf8..c78c160 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 a1562d0..0000000
--- 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 a4dd355..2410e0d 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 f01c72a..cd171f7 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/_vars.sass
b/website/www/site/assets/scss/_hero-mobile.scss
similarity index 55%
copy from website/www/site/assets/scss/_vars.sass
copy to website/www/site/assets/scss/_hero-mobile.scss
index df4276a..343c279 100644
--- a/website/www/site/assets/scss/_vars.sass
+++ b/website/www/site/assets/scss/_hero-mobile.scss
@@ -15,24 +15,48 @@
* limitations under the License.
*/
-$color-brand: #FF6D00
-$color-dark: #37424B
-$color-white: #FFF
-$color-light-gray: #F7F7F7
-$color-dark-gray: #555
-$color-gray: #333333
-$color-smoke: #8C8B8E
-$color-sun: #F26628
-$color-silver: #C4C4C4
-
-$pad-sm: 15px
-$pad-s: 24px
-$pad: 30px
-$pad-md: 60px
-$pad-l: 84px
-$pad-xl: 100px
-
-$box-shadow: 0px 3px 20px 0 rgba(0,0,0,0.075)
-$box-shadow-hover: 0px 3px 50px 0 rgba(0,0,0,0.075)
-$font-weight-semibold: 500
-$font-weight-bold: 600
+@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 63c22b9..0000000
--- 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 0000000..e204d1b
--- /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 0000000..08a4326
--- /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 <[email protected]>
+ * License: MIT
+ * Released on: 2020-11-10
+ */
+
+/*# sourceMappingURL=keen-slider.min.css.map */
+// This is pulled from
"https://cdn.jsdelivr.net/npm/[email protected]/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 0000000..57eb633
--- /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 f4b4ea6..762b5e5 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 0000000..6d59798
--- /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 61aff9f..d8c4ed1 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 99eacfe..807619c 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 df4276a..626313d 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 e4075a1..b40befd 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 0000000..537171a
--- /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 8a1ac53..6ae87c0 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%
copy from website/www/site/data/en/cards.yaml
copy to website/www/site/i18n/home/hero/en.yaml
index a2981e7..85f4728 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/data/en/cards.yaml
b/website/www/site/i18n/home/quotes/en.yaml
similarity index 60%
rename from website/www/site/data/en/cards.yaml
rename to website/www/site/i18n/home/quotes/en.yaml
index a2981e7..95c8e85 100644
--- a/website/www/site/data/en/cards.yaml
+++ b/website/www/site/i18n/home/quotes/en.yaml
@@ -10,9 +10,5 @@
# 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-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 fd22c3a..ae6255e 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 6c245c5..b8b6e26 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 }}
</div>
{{ partial "footer.html" . }}
+ {{ partial "hooks/body-end.html"}}
</body>
</html>
diff --git a/website/www/site/layouts/index.html
b/website/www/site/layouts/index.html
index bbfdf71..4f7f0a5 100644
--- a/website/www/site/layouts/index.html
+++ b/website/www/site/layouts/index.html
@@ -11,47 +11,28 @@
*/}}
{{ define "hero-section" }}
- <div class="hero-bg">
- <div class="hero section">
- <div class="hero__cols">
- <div class="hero__cols__col">
- <div class="hero__cols__col__content">
- <div class="hero__title">
- {{ T "home-hero-title" }}
- </div>
- <div class="hero__subtitle">
- {{ T "home-hero-subtitle" }}
- </div>
- <div class="hero__ctas hero__ctas--first">
- <a class="button button--primary" href={{
"/get-started/beam-overview/" | relLangURL }}>{{ T "home-learn-more" }}</a>
- <a class="button button--primary" href={{
"/get-started/try-apache-beam/" | relLangURL }}>{{ T "home-try-beam" }}</a>
- <a class="button button--primary" href={{
"/get-started/downloads/" | relLangURL }}>{{ T "home-download-beam" . }}</a>
- </div>
- <div class="hero__ctas">
- <a class="button" href="/get-started/quickstart-java/">{{ T
"home-java-quickstart" }}</a>
- <a class="button" href="/get-started/quickstart-py/">{{ T
"home-python-quickstart" }}</a>
- <a class="button" href="/get-started/quickstart-go/">{{ T
"home-go-quickstart" }}</a>
- </div>
- </div>
- </div>
- <div class="hero__cols__col">
- <div class="hero__blog">
- <div class="hero__blog__title">
- {{ T "home-hero-blog-title" }}
- </div>
- <div class="hero__blog__cards">
-
- {{ range ( where site.RegularPages "Section" "blog" | first 3 )
}}
- <a class="hero__blog__cards__card" href="{{ .RelPermalink
}}">
- <div class="hero__blog__cards__card__title">{{ .Title
}}</div>
- <div class="hero__blog__cards__card__date">{{ .Date.Format
"Jan 2, 2006" }}</div>
- </a>
- {{ end }}
-
- </div>
- </div>
- </div>
- </div>
+ <div id="hero-desktop" class="hero-desktop">
+ <div class="hero-content">
+ <h3>{{ T "home-hero-title" }}</h3>
+ <h1>{{ T "home-hero-heading" }}</h1>
+ <h2>{{ T "home-hero-subheading" }}</h2>
+ <a href={{ "/get-started/downloads/" | relLangURL }}>
+ <button>
+ <span>
+ {{ with resources.Get "icons/install-button-icon.svg" }}
+ {{ .Content | safeHTML }}
+ {{ end }}
+ </span>
+ <span>{{ T "home-hero-button" }}</span>
+ </button>
+ </a>
+ </div>
+ </div>
+ <div id="hero-mobile" class="hero-mobile">
+ <div class="hero-content">
+ <h3>{{ T "home-hero-title" }}</h3>
+ <h1>{{ T "home-hero-heading" }}</h1>
+ <h2>{{ T "home-hero-subheading" }}</h2>
</div>
</div>
{{ end }}
@@ -154,6 +135,32 @@
</div>
{{ end }}
+{{ define "quotes-section" }}
+ <div class="quotes">
+ <div class="quotes-title">
+ {{ T "home-quotes-title" }}
+ </div>
+
+ <div class="quotes-desktop">
+ {{ $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 }}
+ </div>
+
+ {{/*
+ The id "my-keen-slider" and "dots" should be named as defaults to make
the external library (Keen Slider) works well
+ */}}
+ <div id="my-keen-slider" class="keen-slider quote-mobile">
+ {{ $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 }}
+ </div>
+ <div id="dots" class="dots"></div>
+ </div>
+{{ end }}
+
{{ define "logos-section" }}
<div class="logos">
<div class="logos-title">
@@ -169,38 +176,6 @@
</div>
{{ end }}
-{{ define "cards-section" }}
- <div class="cards section section--wide">
- <div class="section__contained">
- <div class="cards__title">
- {{ T "home-cards-title" }}
- </div>
- <div class="cards__cards">
- {{ $data := index $.Site.Data .Site.Language.Lang }}
- {{ range $card := $data.cards }}
- <div class="cards__cards__card">
- <div class="cards__cards__card__body">
- {{ $card.quote }}
- </div>
- <div class="cards__cards__card__user">
- {{/* TODO: Implement icons (Original comment from Jekyll)
- <div class="cards__cards__card__user__icon">
- </div>
- */}}
- <div class="cards__cards__card__user__name">
- {{ $card.name }}
- </div>
- </div>
- </div>
- {{ end }}
- </div>
- <div class="cards__body">
- {{ T "home-cards-body" }} <a href={{ "/contribute/" | relLangURL }}>{{
T "home-contribute" }}</a> {{ T "home-section" }}.
- </div>
- </div>
- </div>
-{{ end }}
-
{{ define "ctas-section" }}
<div class="ctas section">
<div class="ctas__title">
diff --git a/website/www/site/layouts/partials/header.html
b/website/www/site/layouts/partials/header.html
index 73c9867..af84170 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.
*/}}
-<nav class="header navbar navbar-fixed-top">
+<nav class="navigation-bar-mobile header navbar navbar-fixed-top">
<div class="navbar-header">
+ <a href={{ "/" | relLangURL }} class="navbar-brand" >
+ <img alt="Brand" style="height: 25px"
src="/images/beam_logo_navbar.png">
+ </a>
+
<button type="button" class="navbar-toggle" aria-expanded="false"
aria-controls="navbar">
<span class="sr-only">{{ T "nav-toggle-navigation" }}</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
-
- <a href={{ "/" | relLangURL }} class="navbar-brand" >
- <img alt="Brand" style="height: 25px"
src="/images/beam_logo_navbar.png">
- </a>
</div>
<div class="navbar-mask closed"></div>
@@ -53,7 +53,7 @@
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
- <div style="width: 300px;">
+ <div style="width: 250px;">
<script>
(function() {
var cx = '012923275103528129024:4emlchv9wzi';
@@ -92,3 +92,49 @@
</ul>
</div>
</nav>
+
+<nav class="navigation-bar-desktop">
+ <a href={{ "/" | relLangURL }} class="navbar-logo" >
+ <img src="/images/beam_logo_navbar.png" alt="Beam Logo">
+ </a>
+ <div class="navbar-links">
+ <a class="navbar-link" href={{ "/get-started/beam-overview/" | relLangURL
}}>{{ T "nav-get-started" }}</a>
+ <li class="dropdown navbar-dropdown navbar-dropdown-documentation">
+ <a class="navbar-link" href="#" class="dropdown-toggle" role="button"
aria-haspopup="true" aria-expanded="false">
+ Documentation
+ <span>
+ {{ with resources.Get "icons/navbar-documentation-icon.svg" }}
+ {{ .Content | safeHTML }}
+ {{ end }}
+ </span>
+ </a>
+ <ul class="dropdown-menu">
+ <li><a class="navbar-dropdown-menu-link" href={{ "/documentation/" |
relLangURL }}>{{ T "nav-documentation-general" }}</a></li>
+ <li><a class="navbar-dropdown-menu-link" href={{
"/documentation/sdks/java/" | relLangURL }}>{{ T "nav-languages" }}</a></li>
+ <li><a class="navbar-dropdown-menu-link" href={{
"/documentation/runners/capability-matrix/" | relLangURL }}>{{ T "nav-runners"
}}</a></li>
+ </ul>
+ </li>
+ <a class="navbar-link" href={{ "/roadmap/" | relLangURL }}>{{ T
"nav-roadmap" }}</a>
+ <a class="navbar-link" href={{ "/community/contact-us/" | relLangURL }}>{{
T "nav-community" }}</a>
+ <a class="navbar-link" href={{ "/contribute/" | relLangURL }}>{{ T
"nav-contribute" }}</a>
+ <a class="navbar-link" href={{ "/blog/" | relLangURL }}>{{ T "nav-blog"
}}</a>
+ </div>
+ <li class="dropdown navbar-dropdown navbar-dropdown-apache">
+ <a href="#" class="dropdown-toggle" role="button" aria-haspopup="true"
aria-expanded="false"><img
src="https://www.apache.org/foundation/press/kit/feather_small.png"; alt="Apache
Logo" style="height:20px;">
+ Apache
+ <span class="arrow-icon">
+ {{ with resources.Get "icons/navbar-arrow-icon.svg" }}
+ {{ .Content | safeHTML }}
+ {{ end }}
+ </span>
+ </a>
+ <ul class="dropdown-menu">
+ <li><a class="navbar-dropdown-menu-link"
href="http://www.apache.org/";>{{ T "nav-asf-homepage" }}</a></li>
+ <li><a class="navbar-dropdown-menu-link"
href="http://www.apache.org/licenses/";>{{ T "nav-license" }}</a></li>
+ <li><a class="navbar-dropdown-menu-link"
href="http://www.apache.org/security/";>{{ T "nav-security" }}</a></li>
+ <li><a class="navbar-dropdown-menu-link"
href="http://www.apache.org/foundation/thanks.html";>{{ T "nav-thanks"
}}</a></li>
+ <li><a class="navbar-dropdown-menu-link"
href="http://www.apache.org/foundation/sponsorship.html";>{{ T "nav-sponsorship"
}}</a></li>
+ <li><a class="navbar-dropdown-menu-link"
href="https://www.apache.org/foundation/policies/conduct";>{{ T
"nav-code-of-conduct" }}</a></li>
+ </ul>
+ </li>
+</nav>
diff --git a/website/www/site/layouts/partials/hooks/body-end.html
b/website/www/site/layouts/partials/hooks/body-end.html
new file mode 100644
index 0000000..1e8c61c
--- /dev/null
+++ b/website/www/site/layouts/partials/hooks/body-end.html
@@ -0,0 +1,17 @@
+{{/*
+ 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. See accompanying LICENSE file.
+*/}}
+
+<script src="/js/hero/lottie-light.min.js"></script>
+<script src="/js/hero/hero-desktop.js"></script>
+<script src="/js/hero/hero-mobile.js"></script>
+<script src="/js/keen-slider.min.js"></script>
+<script src="/js/quotes-slider.js"></script>
diff --git a/website/www/site/layouts/_default/baseof.html
b/website/www/site/layouts/partials/quotes/quote-mobile.html
similarity index 50%
copy from website/www/site/layouts/_default/baseof.html
copy to website/www/site/layouts/partials/quotes/quote-mobile.html
index 6c245c5..756fe3b 100644
--- a/website/www/site/layouts/_default/baseof.html
+++ b/website/www/site/layouts/partials/quotes/quote-mobile.html
@@ -9,23 +9,13 @@
See the License for the specific language governing permissions and
limitations under the License. See accompanying LICENSE file.
*/}}
-
-<!DOCTYPE html>
-<html lang="{{ .Site.Language.Lang }}" class="no-js">
-<head>
- {{ partial "head.html" . }}
-</head>
-<body class="body body--index">
- {{ partial "header.html" . }}
- <div class="body__contained">
- {{ block "hero-section" . }}{{ end }}
- {{ block "pillars-section" . }}{{ end }}
- {{ block "graphic-section" . }}{{ end }}
- {{ block "calendar-section" . }}{{ end }}
- {{ block "logos-section" . }}{{ end }}
- {{ block "cards-section" . }}{{ end }}
- {{ block "ctas-section" . }}{{ end }}
+
+<div class="keen-slider__slide">
+ <div class="quote-icon">
+ {{ with resources.Get .icon }}
+ {{ .Content | safeHTML }}
+ {{ end }}
</div>
- {{ partial "footer.html" . }}
-</body>
-</html>
+ <h5 class="quote-text">{{ .text | markdownify }}</h5>
+ <img src="{{ .logoUrl }}" alt="Quote Logo" />
+</div>
\ No newline at end of file
diff --git a/website/www/site/layouts/_default/baseof.html
b/website/www/site/layouts/partials/quotes/quote.html
similarity index 50%
copy from website/www/site/layouts/_default/baseof.html
copy to website/www/site/layouts/partials/quotes/quote.html
index 6c245c5..45f7ccd 100644
--- a/website/www/site/layouts/_default/baseof.html
+++ b/website/www/site/layouts/partials/quotes/quote.html
@@ -10,22 +10,12 @@
limitations under the License. See accompanying LICENSE file.
*/}}
-<!DOCTYPE html>
-<html lang="{{ .Site.Language.Lang }}" class="no-js">
-<head>
- {{ partial "head.html" . }}
-</head>
-<body class="body body--index">
- {{ partial "header.html" . }}
- <div class="body__contained">
- {{ block "hero-section" . }}{{ end }}
- {{ block "pillars-section" . }}{{ end }}
- {{ block "graphic-section" . }}{{ end }}
- {{ block "calendar-section" . }}{{ end }}
- {{ block "logos-section" . }}{{ end }}
- {{ block "cards-section" . }}{{ end }}
- {{ block "ctas-section" . }}{{ end }}
+<div class="quote-card">
+ <div class="quote-icon">
+ {{ with resources.Get .icon }}
+ {{ .Content | safeHTML }}
+ {{ end }}
</div>
- {{ partial "footer.html" . }}
-</body>
-</html>
+ <h5 class="quote-text">{{ .text | markdownify }}</h5>
+ <img src="{{ .logoUrl }}" alt="Quote Logo" />
+</div>
\ No newline at end of file
diff --git a/website/www/site/static/images/quote-paypal-logo.png
b/website/www/site/static/images/quote-paypal-logo.png
new file mode 100644
index 0000000..0bf48f2
Binary files /dev/null and
b/website/www/site/static/images/quote-paypal-logo.png differ
diff --git a/website/www/site/static/js/hero/hero-desktop.js
b/website/www/site/static/js/hero/hero-desktop.js
new file mode 100644
index 0000000..4833284
--- /dev/null
+++ b/website/www/site/static/js/hero/hero-desktop.js
@@ -0,0 +1,21 @@
+// 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.
+
+var animationData =
{"v":"5.7.1","fr":30,"ip":0,"op":120,"w":1440,"h":536,"nm":"opt2","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":2,"ty":4,"nm":"Shape
Layer
1","sr":1,"ks":{"o":{"a":0,"k":24,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.34],"y":[1]},"o":{"x":[0.22],"y":[1]},"t":-5,"s":[62.997],"e":[20]},{"t":77}],"ix":10},"p":{"a":0,"k":[2112,250,0],"ix":2},"a":{"a":0,"k":[1228.201,-1.163,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a
[...]
+
+var animation = bodymovin.loadAnimation({
+ container: document.getElementById("hero-desktop"),
+ renderer: "svg",
+ loop: false,
+ autoplay: true,
+ animationData: animationData,
+});
diff --git a/website/www/site/static/js/hero/hero-mobile.js
b/website/www/site/static/js/hero/hero-mobile.js
new file mode 100644
index 0000000..979a5ec
--- /dev/null
+++ b/website/www/site/static/js/hero/hero-mobile.js
@@ -0,0 +1,21 @@
+// 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.
+
+var animationData =
{"v":"5.7.1","fr":30,"ip":0,"op":120,"w":375,"h":462,"nm":"opt2","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":2,"ty":4,"nm":"Shape
Layer
1","sr":1,"ks":{"o":{"a":0,"k":24,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.34],"y":[1]},"o":{"x":[0.22],"y":[1]},"t":-5,"s":[62.997],"e":[20]},{"t":77}],"ix":10},"p":{"a":0,"k":[1635.5,319,0],"ix":2},"a":{"a":0,"k":[1228.201,-1.163,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"
[...]
+
+var animation = bodymovin.loadAnimation({
+ container: document.getElementById("hero-mobile"),
+ renderer: "svg",
+ loop: false,
+ autoplay: true,
+ animationData: animationData,
+});
diff --git a/website/www/site/static/js/hero/lottie-light.min.js
b/website/www/site/static/js/hero/lottie-light.min.js
new file mode 100644
index 0000000..feb1796
--- /dev/null
+++ b/website/www/site/static/js/hero/lottie-light.min.js
@@ -0,0 +1,18 @@
+// TODO [website-revamp]:
+// License header should be added
+
+(typeof navigator !== "undefined") && (function(root, factory) {
+ if (typeof define === "function" && define.amd) {
+ define(function() {
+ return factory(root);
+ });
+ } else if (typeof module === "object" && module.exports) {
+ module.exports = factory(root);
+ } else {
+ root.lottie = factory(root);
+ root.bodymovin = root.lottie;
+ }
+}((window || {}), function(window) {
+ "use strict";var
h,e="http://www.w3.org/2000/svg",A="",s=-999999,i=!0,b=(/^((?!chrome|android).)*safari/i.test(navigator.userAgent),Math.round,Math.pow),k=Math.sqrt,f=(Math.abs,Math.floor),m=(Math.max,Math.min),a={};!function(){var
t,e=["abs","acos","acosh","asin","asinh","atan","atanh","atan2","ceil","cbrt","expm1","clz32","cos","cosh","exp","floor","fround","hypot","imul","log","log1p","log2","log10","max","min","pow","random","round","sign","sin","sinh","sqrt","tan","tanh","trunc","E
[...]
+return lottie;
+}));
\ No newline at end of file
diff --git a/website/www/site/static/js/keen-slider.min.js
b/website/www/site/static/js/keen-slider.min.js
new file mode 100644
index 0000000..ca5f654
--- /dev/null
+++ b/website/www/site/static/js/keen-slider.min.js
@@ -0,0 +1,15 @@
+/**
+ * Skipped minification because the original files appears to be already
minified.
+ * Do NOT use SRI with dynamically generated files! More information:
https://www.jsdelivr.com/using-sri-with-dynamic-files
+ */
+/**
+ * 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 <[email protected]>
+ * License: MIT
+ * Released on: 2020-11-10
+ */
+
+!function(t,n){"object"==typeof exports&&"undefined"!=typeof
module?module.exports=n():"function"==typeof
define&&define.amd?define(n):(t=t||self).KeenSlider=n()}(this,(function(){"use
strict";function t(t,n,e){return n in
t?Object.defineProperty(t,n,{value:e,enumerable:!0,configurable:!0,writable:!0}):t[n]=e,t}function
n(t,n){var e=Object.keys(t);if(Object.getOwnPropertySymbols){var
r=Object.getOwnPropertySymbols(t);n&&(r=r.filter((function(n){return
Object.getOwnPropertyDescriptor(t,n) [...]
+//# sourceMappingURL=keen-slider.js.map
\ No newline at end of file
diff --git a/website/www/site/static/js/quotes-slider.js
b/website/www/site/static/js/quotes-slider.js
new file mode 100644
index 0000000..27f2d93
--- /dev/null
+++ b/website/www/site/static/js/quotes-slider.js
@@ -0,0 +1,42 @@
+// 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.
+
+var slider = new KeenSlider("#my-keen-slider", {
+ loop: true,
+ created: function (instance) {
+ var dots_wrapper = document.getElementById("dots");
+ var slides = document.querySelectorAll(".keen-slider__slide");
+ slides.forEach(function (t, idx) {
+ var dot = document.createElement("button");
+ dot.classList.add("dot");
+ dots_wrapper.appendChild(dot);
+ dot.addEventListener("click", function () {
+ instance.moveToSlide(idx);
+ });
+ });
+ updateClasses(instance);
+ },
+ slideChanged(instance) {
+ updateClasses(instance);
+ }
+});
+
+function updateClasses(instance) {
+ var slide = instance.details().relativeSlide;
+
+ var dots = document.querySelectorAll(".dot");
+ dots.forEach(function (dot, idx) {
+ idx === slide
+ ? dot.classList.add("dot--active")
+ : dot.classList.remove("dot--active");
+ });
+}
\ No newline at end of file
diff --git a/website/www/site/static/js/section-nav.js
b/website/www/site/static/js/section-nav.js
index 50d7a3f..1d40720 100644
--- a/website/www/site/static/js/section-nav.js
+++ b/website/www/site/static/js/section-nav.js
@@ -24,7 +24,7 @@ $(document).ready(function () {
var CONST = {
ACTIVE_CLASS: "active",
EXPANDED_CLASS: "expanded",
- DESKTOP_BREAKPOINT: 1024,
+ DESKTOP_BREAKPOINT: 1280,
OPEN_CLASS: "open"
};
![https://www.apache.org/foundation/press/kit/feather_small.png"](https://www.apache.org/foundation/press/kit/feather_small.png"){kind=link}