beam-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From bhule...@apache.org
Subject [beam] branch website-revamp updated: [Website revamp][11179 - 11180 - 11183] Implemented Quotes component, Header and Navbar (#13439)
Date Tue, 08 Dec 2020 02:09:43 GMT
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 <bntnam.app@gmail.com>
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 <contact@ericbeyer.de>
+ * 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 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>&nbsp;&nbsp;
+          <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;">
+      &nbsp;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 <contact@ericbeyer.de>
+ * 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"
         };
 


Mime
View raw message