Merge pull request apache#17408 from [BEAM-14312] [Website] change se…

…ction order, move socials to footer * [BEAM-14312] [Website] change section order, move socials to footer * [BEAM-14312] [Website] change margin * [BEAM-14312] [Website] change link * [BEAM-14312] [Website] delete section, change title and links of the pillars * [BEAM-14312] [Website] add pipelines section * [BEAM-14312] [Website] change image in graphic section * [BEAM-14312] [Website] delete width of 95%, change flink link * [BEAM-14312] [Website] move css style, delete unused html, optimized logos size * [BEAM-14312] [Website] substitute images, fix css styles for pipelines and logos sections * [BEAM-14312] [Website] add kinesis runner * [BEAM-14312] [Website] add kinesis runner, add margin-right to pipelines-logos * [BEAM-14312] [Website] change amazon kinesis logo * [BEAM-14312] change structure of logos in the footer * [BEAM-14312] add license header to linkedin.svg * [BEAM-14312] change margin in quote section
tomstepp · May 12, 2022 · 704ecc6 · 704ecc6
1 parent c36f544
commit 704ecc6
Show file tree

Hide file tree

Showing 25 changed files with 304 additions and 86 deletions.
diff --git a/website/www/site/assets/icons/linkedin-icon.svg b/website/www/site/assets/icons/linkedin-icon.svg
diff --git a/website/www/site/assets/scss/_footer.sass b/website/www/site/assets/scss/_footer.sass
@@ -43,6 +43,12 @@
     padding: 5px
     box-sizing: border-box
 
+    .footer__cols__col--group
+      display: flex
+      gap: 30px
+      @media (max-width: $ak-breakpoint-lg)
+        gap: 0
+
     .footer__cols__col__title
       color: #fff
       font-weight: $font-weight-bold
@@ -54,7 +60,16 @@
     .footer__cols__col__logo
       margin-bottom: $pad
       @media (max-width: $ak-breakpoint-lg)
-        margin-right: 50px
+        margin-right: 20px
+      a
+        img
+          width: 64px
+          border-radius: 50%
+          filter: grayscale(100%)
+          opacity: 0.7
+          &:hover, focus
+            filter: grayscale(0)
+            opacity: 1
 
   .footer__flex_mobile
     display: flex
@@ -93,6 +108,6 @@
 
 .main-padding
   padding-bottom: 48px
-  background: #37424B;
+  background: #37424B
   @media (max-width: $ak-breakpoint-lg)
     padding-bottom: 100px
diff --git a/website/www/site/assets/scss/_graphic.scss b/website/www/site/assets/scss/_graphic.scss
@@ -34,6 +34,14 @@
       margin-bottom: 30px;
     }
   }
+
+  .row-image {
+    display: block;
+    @media (max-width: 1024px) {
+     display: none;
+    }
+  }
+
   .row {
     display: flex;
     justify-content: space-between;

diff --git a/website/www/site/assets/scss/_logos.scss b/website/www/site/assets/scss/_logos.scss
@@ -45,7 +45,7 @@
 
 @media (max-width: $tablet) {
   .logos {
-    padding: $pad-md $pad-s;
+    padding: 20px 30px;
 
     .logos-logos {
       max-width: 360px;

diff --git a/website/www/site/assets/scss/_pillars.scss b/website/www/site/assets/scss/_pillars.scss
@@ -67,8 +67,17 @@
     .pillars-social-icons {
       display: flex;
       align-items: center;
+      justify-content: space-between;
       margin-bottom: 45px;
 
+      div {
+        padding-right: 20px;
+
+        &:last-child {
+          padding-right: 0;
+        }
+      }
+
       svg {
         height: 41px;
         width: auto;
@@ -87,17 +96,85 @@
           opacity: 1;
         }
       }
-
-      .pillars-youtube-icon {
-        margin: 0 80px;
-      }
     }
 
     .pillars-social-text {
       @extend .component-text;
       max-width: 285px;
     }
   }
+
+  h2 {
+    @extend .component-title;
+  }
+
+  .margin {
+    margin-top: 84px;
+    margin-bottom: 84px;
+    @media (max-width: $mobile) {
+      margin-top: 0;
+      margin-bottom: 64px;
+    }
+  }
+
+  .row {
+    display: flex;
+    justify-content: space-between;
+    @media (max-width: $mobile) {
+      flex-direction: column;
+      align-items: center;
+    }
+    .logos-row {
+      display: flex;
+      align-items: center;
+      margin-top: 20px;
+      max-height: 73px;
+      @media (max-width: $mobile) {
+        margin-top: 64px;
+      }
+      img {
+        height: auto;
+        width: 112px;
+      }
+    }
+    .first_logo {
+      margin-right: 18px;
+    }
+    #last_logo {
+      margin-left: 18px;
+      width: 55px;
+    }
+    .column {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      max-width: 306px;
+
+      h4 {
+        margin-top: 32px;
+      }
+      .more {
+        margin-top: 32px;
+        font-size: 14px;
+        font-weight: bold;
+        line-height: 16px;
+        letter-spacing: 0.6px;
+        color: #f26628;
+      }
+    }
+    .icon {
+      width: 34px;
+      height: 44px;
+      margin-top: 16px;
+      @media (max-width: $mobile) {
+        margin-top: 64px;
+      }
+    }
+    img {
+      max-width: 306px;
+      height: 42px;
+    }
+  }
 }
 
 @media (max-width: $ak-breakpoint-lg) {

diff --git a/website/www/site/assets/scss/_pipelines.scss b/website/www/site/assets/scss/_pipelines.scss
@@ -0,0 +1,71 @@
+/*!
+ *  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";
+
+.pipelines {
+  padding: 40px 30px 10px;
+
+  .pipelines-title {
+    @extend .component-title;
+
+    text-align: center;
+  }
+
+  .pipelines-logos {
+    display: flex;
+    justify-content: space-around;
+    width: 100%;
+    max-width: 1111px;
+    margin: 70px auto 60px;
+
+    .pipelines-logo {
+      line-height: 0;
+
+      img {
+        max-height: 70px;
+      }
+    }
+  }
+}
+
+@media (max-width: $tablet) {
+  .pipelines {
+    padding: 20px 30px 10px;
+
+    .pipelines-logos {
+      max-width: 360px;
+      flex-wrap: wrap;
+      justify-content: center;
+      margin: 50px auto 0;
+
+      .pipelines-logo {
+        margin-right: 60px;
+        margin-bottom: 50px;
+
+        img {
+          max-height: 45px;
+        }
+      }
+
+      :nth-child(2),
+      :last-child {
+        margin-right: 0;
+      }
+    }
+  }
+}
diff --git a/website/www/site/assets/scss/_quotes.scss b/website/www/site/assets/scss/_quotes.scss
@@ -77,7 +77,7 @@
     width: 100%;
     overflow: hidden;
     height: 600px;
-    margin: 76px 0 20px 0;
+    margin: 30px 0 20px 0;
     padding: 55px 20px 24px 20px;
     border-radius: 16px;
     background-color: $color-white;
@@ -113,10 +113,6 @@
 
 @media (max-width: $tablet) {
   .quotes {
-    .quotes-title {
-      margin-bottom: 64px;
-    }
-
     h2 {
       margin-bottom: 0 !important;
     }

diff --git a/website/www/site/assets/scss/main.scss b/website/www/site/assets/scss/main.scss
@@ -55,4 +55,5 @@
 @import "_powered_by.scss";
 @import "_case_study.scss";
 @import "_banner.sass";
+@import "_pipelines.scss";
 @import "_about.sass";
diff --git a/website/www/site/data/en/pillars_social.yaml b/website/www/site/data/en/pillars_social.yaml
@@ -13,9 +13,12 @@
 - name: pillars-github-icon
   icon: icons/github-icon.svg
   url: https://github.com/apache/beam
+- name: pillars-linkedin-icon
+  icon: icons/linkedin-icon.svg
+  url: https://www.linkedin.com/company/apache-beam/
 - name: pillars-youtube-icon
   icon: icons/youtube-icon.svg
   url: https://www.youtube.com/channel/UChNnb_YO_7B0HlW6FhAXZZQ
 - name: pillars-twitter-icon
   icon: icons/twitter-icon.svg
-  url: https://twitter.com/apachebeam
+  url: https://twitter.com/apachebeam
diff --git a/website/www/site/data/pipelines.yaml b/website/www/site/data/pipelines.yaml
@@ -0,0 +1,24 @@
+# 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.
+
+- title: Python
+  image_url: /images/logos/sdks/python_pipelines.png
+  url: http://apache-beam-website-pull-requests.storage.googleapis.com/17388/documentation/sdks/python/index.html
+- title: Java
+  image_url: /images/logos/sdks/java_pipelines.png
+  url: http://apache-beam-website-pull-requests.storage.googleapis.com/17388/documentation/sdks/java/index.html
+- title: Go
+  image_url: /images/logos/sdks/go_pipelines.png
+  url: http://apache-beam-website-pull-requests.storage.googleapis.com/17388/documentation/sdks/go/index.html
+- title: SQL
+  image_url: /images/logos/sdks/sql_pipelines.png
+  url: http://apache-beam-website-pull-requests.storage.googleapis.com/17388/documentation/dsls/sql/overview/index.html
diff --git a/website/www/site/data/works_with.yaml b/website/www/site/data/works_with.yaml
@@ -12,16 +12,19 @@
 
 - title: Flink
   image_url: /images/logo_flink.png
-  url: https://flink.apache.org
+  url: https://beam.apache.org/documentation/runners/flink/
 - title: Spark
   image_url: /images/logo_spark.png
-  url: https://spark.apache.org/
+  url: https://beam.apache.org/documentation/runners/spark/
 - title: Google Cloud Dataflow
   image_url: /images/logo_google_cloud.png
-  url: https://cloud.google.com/dataflow/
+  url: https://beam.apache.org/documentation/runners/dataflow/
 - title: Samza
   image_url: /images/logo_samza.png
-  url: https://samza.apache.org/
+  url: https://beam.apache.org/documentation/runners/samza/
 - title: Twister2
   image_url: /images/logo_twister2.png
-  url: https://twister2.org//
+  url: https://beam.apache.org/documentation/runners/twister2/
+- title: Amazon Kinesis Data Analytics
+  image_url: /images/logo_amazon-kinesis.png
+  url: https://docs.aws.amazon.com/kinesisanalytics/latest/java/examples-beam.html
diff --git a/website/www/site/i18n/home/logos/en.yaml b/website/www/site/i18n/home/logos/en.yaml
@@ -11,4 +11,7 @@
 # limitations under the License.
 
 - id: home-logos-title
-  translation: "Apache Beam Runs in These Environments"
+  translation: "Write Once, Run Anywhere"
+
+- id: home-pipelines-title
+  translation: "Create Multi-language Pipelines"
diff --git a/website/www/site/layouts/_default/baseof.html b/website/www/site/layouts/_default/baseof.html
@@ -22,8 +22,9 @@
     {{ block "ctas-section" . }}{{ end }}
     {{ block "graphic-section" . }}{{ end }}
     {{ block "pillars-section" . }}{{ end }}
-    {{ block "playground-section" . }}{{ end }}
     {{ block "logos-section" . }}{{ end }}
+    {{ block "pipelines-section" . }}{{ end }}
+    {{ block "playground-section" . }}{{ end }}
     {{ block "quotes-section" . }}{{ end }}
     {{ block "quotes-mobile-section" . }}{{ end }}
     {{ block "calendar-section" . }}{{ end }}