You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@beam.apache.org by pa...@apache.org on 2022/05/12 20:48:48 UTC

[beam] branch master updated: Merge pull request #17408 from [BEAM-14312] [Website] change section order, move socials to footer

This is an automated email from the ASF dual-hosted git repository.

pabloem pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/beam.git


The following commit(s) were added to refs/heads/master by this push:
     new 704ecc62588 Merge pull request #17408 from [BEAM-14312] [Website] change section order, move socials to footer
704ecc62588 is described below

commit 704ecc62588d0dc730574546a241286732874f3c
Author: bullet03 <bu...@akvelon.com>
AuthorDate: Fri May 13 02:48:41 2022 +0600

    Merge pull request #17408 from [BEAM-14312] [Website] change section 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
---
 website/www/site/assets/icons/linkedin-icon.svg    |  21 +++++
 website/www/site/assets/scss/_footer.sass          |  19 +++-
 website/www/site/assets/scss/_graphic.scss         |   8 ++
 website/www/site/assets/scss/_logos.scss           |   2 +-
 website/www/site/assets/scss/_pillars.scss         |  85 ++++++++++++++++-
 .../assets/scss/{_logos.scss => _pipelines.scss}   |  26 +++---
 website/www/site/assets/scss/_quotes.scss          |   6 +-
 website/www/site/assets/scss/main.scss             |   1 +
 website/www/site/data/en/pillars_social.yaml       |   5 +-
 website/www/site/data/pipelines.yaml               |  24 +++++
 website/www/site/data/works_with.yaml              |  13 ++-
 website/www/site/i18n/home/logos/en.yaml           |   5 +-
 website/www/site/layouts/_default/baseof.html      |   3 +-
 website/www/site/layouts/index.html                | 101 +++++++--------------
 website/www/site/layouts/partials/footer.html      |  26 ++++++
 .../www/site/static/images/graphic-background.png  | Bin 0 -> 10948 bytes
 .../www/site/static/images/logo_amazon-kinesis.png | Bin 0 -> 5441 bytes
 .../site/static/images/logos/sdks/go_pipelines.png | Bin 0 -> 3590 bytes
 .../static/images/logos/sdks/java_pipelines.png    | Bin 0 -> 9461 bytes
 .../static/images/logos/sdks/python_pipelines.png  | Bin 0 -> 6956 bytes
 .../static/images/logos/sdks/sql_pipelines.png     | Bin 0 -> 9856 bytes
 .../images/logos/social-icons/github-logo-150.png  | Bin 0 -> 3884 bytes
 .../logos/social-icons/linkedin-logo-150.png       | Bin 0 -> 1816 bytes
 .../images/logos/social-icons/twitter-logo-150.png | Bin 0 -> 2116 bytes
 .../images/logos/social-icons/youtube-logo-150.png | Bin 0 -> 1746 bytes
 25 files changed, 246 insertions(+), 99 deletions(-)

diff --git a/website/www/site/assets/icons/linkedin-icon.svg b/website/www/site/assets/icons/linkedin-icon.svg
new file mode 100644
index 00000000000..86d58686665
--- /dev/null
+++ b/website/www/site/assets/icons/linkedin-icon.svg
@@ -0,0 +1,21 @@
+<?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"  viewBox="0 0 48 48" width="48px" height="48px"><path fill="#0078d4" d="M42,37c0,2.762-2.238,5-5,5H11c-2.761,0-5-2.238-5-5V11c0-2.762,2.239-5,5-5h26c2.762,0,5,2.238,5,5	V37z"/><path d="M30,37V26.901c0-1.689-0.819-2.698-2.192-2.698c-0.815,0-1.414,0.459-1.779,1.364	c-0.017,0.064-0.041,0.325-0.031,1.114L26,37h-7V18h7v1.061C27.022,18.356,28.275,18,29.738,18c4.547,0,7.261,3.093,7.261,8.274	L37,37H30z M11,37V18h3.457C12.454,18,11,16.528,11,14.499C11,12.4 [...]
diff --git a/website/www/site/assets/scss/_footer.sass b/website/www/site/assets/scss/_footer.sass
index ce99da118e5..0aa826792a1 100644
--- 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
index 7b25a596ec6..2396e076c46 100644
--- 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
index 5706a9bba9c..849ecccaf97 100644
--- 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
index ae80f38c5ff..9f05beaa7fb 100644
--- 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,10 +96,6 @@
           opacity: 1;
         }
       }
-
-      .pillars-youtube-icon {
-        margin: 0 80px;
-      }
     }
 
     .pillars-social-text {
@@ -98,6 +103,78 @@
       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/_logos.scss b/website/www/site/assets/scss/_pipelines.scss
similarity index 81%
copy from website/www/site/assets/scss/_logos.scss
copy to website/www/site/assets/scss/_pipelines.scss
index 5706a9bba9c..4057b8aabde 100644
--- a/website/www/site/assets/scss/_logos.scss
+++ b/website/www/site/assets/scss/_pipelines.scss
@@ -17,23 +17,23 @@
 
 @import "media";
 
-.logos {
-  padding: 25px 30px 35px;
+.pipelines {
+  padding: 40px 30px 10px;
 
-  .logos-title {
+  .pipelines-title {
     @extend .component-title;
 
     text-align: center;
   }
 
-  .logos-logos {
+  .pipelines-logos {
     display: flex;
-    justify-content: space-between;
+    justify-content: space-around;
     width: 100%;
     max-width: 1111px;
-    margin: 40px auto 0;
+    margin: 70px auto 60px;
 
-    .logos-logo {
+    .pipelines-logo {
       line-height: 0;
 
       img {
@@ -44,16 +44,16 @@
 }
 
 @media (max-width: $tablet) {
-  .logos {
-    padding: $pad-md $pad-s;
+  .pipelines {
+    padding: 20px 30px 10px;
 
-    .logos-logos {
+    .pipelines-logos {
       max-width: 360px;
       flex-wrap: wrap;
       justify-content: center;
-      margin: 50px auto 20px;
+      margin: 50px auto 0;
 
-      .logos-logo {
+      .pipelines-logo {
         margin-right: 60px;
         margin-bottom: 50px;
 
@@ -62,7 +62,7 @@
         }
       }
 
-      :nth-child(3),
+      :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
index 96667a79931..8d50f1384b3 100644
--- 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
index a86585101fb..e3510b5d06e 100644
--- 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
index 2ed3ff6c03a..192780de264 100644
--- 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
\ No newline at end of file
+  url: https://twitter.com/apachebeam
diff --git a/website/www/site/data/pipelines.yaml b/website/www/site/data/pipelines.yaml
new file mode 100644
index 00000000000..767ca12e10d
--- /dev/null
+++ 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
index 6447a1402cf..96bcb336c92 100644
--- 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//
\ No newline at end of file
+  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
index 772807b469d..1d433cb7a33 100644
--- 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
index b90b21c1fd8..3c83c919a7e 100644
--- 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 }}
diff --git a/website/www/site/layouts/index.html b/website/www/site/layouts/index.html
index 397ad93f214..7e79c2db6f5 100644
--- a/website/www/site/layouts/index.html
+++ b/website/www/site/layouts/index.html
@@ -36,28 +36,17 @@ limitations under the License. See accompanying LICENSE file.
 {{ end }}
 
 {{ define "pillars-section" }}
-<div class="pillars">
-  <h2 class="pillars-title">
-    {{ T "home-pillars-title" }}
-  </h2>
-  <div class="pillars-content">
-    {{ $data := index $.Site.Data .Site.Language.Lang }}
-    {{ range $pillar := $data.pillars }}
-    {{ partial "pillars/pillars-item" (dict "logo" $pillar.icon  "header" $pillar.title "text" $pillar.body) }}
-    {{ end }}
-  </div>
-  <div class="pillars-social">
-    <div class="pillars-social-icons">
+  <div class="pillars">
+    <h2 class="pillars-title">
+      {{ T "home-pillars-title" }}
+    </h2>
+    <div class="pillars-content">
       {{ $data := index $.Site.Data .Site.Language.Lang }}
-      {{ range $pillars_social := $data.pillars_social }}
-      {{ partial "pillars/pillars-social" (dict "icon" $pillars_social.icon  "url" $pillars_social.url "name" $pillars_social.name) }}
+      {{ range $pillar := $data.pillars }}
+          {{ partial "pillars/pillars-item" (dict "logo" $pillar.icon  "header" $pillar.title "text" $pillar.body) }}
       {{ end }}
     </div>
-    <p class="pillars-social-text">
-      {{ T "home-pillars-social-text" }}
-    </p>
   </div>
-</div>
 {{ end }}
 
 {{ define "playground-section" }}
@@ -85,58 +74,24 @@ limitations under the License. See accompanying LICENSE file.
 {{ end }}
 
 {{ define "graphic-section" }}
-<div class="graphic">
-  <div class="quotes">
-    <h2 class="margin">{{ T "home-model-title1" }}</h2>
-    <div class="margin section">
-      <div class="row images desktop">
-        <img src="/images/model-sources-icon.svg" class='icon'/>
-        <img src="/images/model-ellipse.svg"/>
-        <img src="/images/model-processing-icon.svg" class='icon'/>
-        <img src="/images/model-ellipse.svg"/>
-        <img src="/images/model-sinks-icon.svg" class='icon'/>
-      </div>
-      <div class="row">
-        {{ $data := index $.Site.Data .Site.Language.Lang }}
-        {{ range $item := $data.graphic }}
-        <div class="column">
-          <img src="{{ .icon }}" class='icon mobile'/>
-          <h4>{{ .title }}</h4>
-          <p>{{ .body }}</p>
-        </div>
-        {{ end }}
-      </div>
-    </div>
-  </div>
-  <div class="section">
-    <h2 class="margin">{{ T "home-model-title2" }}</h2>
-    <div class="row margin">
-      <div class="column">
-        <div class="logos-row">
-          <img class="first_logo" src="/images/logos/runners/flink.png"/>
-          <img src="/images/logos/runners/spark.png"/>
-          <img id="last_logo" src="/images/logos/runners/amazon_kinesis.png"/>
-        </div>
-        <p class="more">{{ T "home-graphic-more" }}</p>
-        <div>
-          <h4>{{ T "home-graphic-runner-title" }}</h4>
-          <p>{{ T "home-graphic-runner-body" }}</p>
-        </div>
-      </div>
-      <div class="column">
-        <div class="logos-row">
-          <img class="first_logo" src="/images/logos/sdks/python-logo.png"/>
-          <img src="/images/logos/sdks/go.png"/>
-        </div>
-        <p class="more">{{ T "home-graphic-more" }}</p>
-        <div>
-          <h4>{{ T "home-graphic-language-title" }}</h4>
-          <p>{{ T "home-graphic-language-body" }}</p>
+  <div class="graphic">
+    <div class="quotes">
+      <h2 class="margin">{{ T "home-model-title1" }}</h2>
+      <div class="margin section">
+        <img class="row-image" src="/images/graphic-background.png">
+        <div class="row">
+          {{ $data := index $.Site.Data .Site.Language.Lang }}
+          {{ range $item := $data.graphic }}
+            <div class="column">
+              <img src="{{ .icon }}" class='icon mobile'/>
+              <h4>{{ .title }}</h4>
+              <p>{{ .body }}</p>
+            </div>
+          {{ end }}
         </div>
       </div>
     </div>
   </div>
-</div>
 {{ end }}
 
 {{ define "calendar-section" }}
@@ -260,3 +215,17 @@ limitations under the License. See accompanying LICENSE file.
 </div>
 {{ end }}
 
+{{ define "pipelines-section" }}
+<div class="pipelines">
+  <div class="pipelines-title">
+    {{ T "home-pipelines-title" }}
+  </div>
+  <div class="pipelines-logos">
+    {{ range $pipeline := $.Site.Data.pipelines }}
+    <div class="pipelines-logo">
+      <a href="{{ $pipeline.url }}"><img src="{{ $pipeline.image_url }}" alt="{{ $pipeline.title }}"></a>
+    </div>
+    {{ end }}
+  </div>
+</div>
+{{ end }}
diff --git a/website/www/site/layouts/partials/footer.html b/website/www/site/layouts/partials/footer.html
index ef6604f5557..cfdde015a26 100644
--- a/website/www/site/layouts/partials/footer.html
+++ b/website/www/site/layouts/partials/footer.html
@@ -62,6 +62,32 @@
              {{ T "footer-copy" }}
            </div>
        </div>
+        <div class="footer__cols__col footer__cols__col__logos">
+          <div class="footer__cols__col--group">
+            <div class="footer__cols__col__logo">
+              <a href="https://github.com/apache/beam">
+                <img src="/images/logos/social-icons/github-logo-150.png" class="footer__logo" alt="Github logo">
+              </a>
+            </div>
+            <div class="footer__cols__col__logo">
+              <a href="https://www.linkedin.com/company/apache-beam/">
+                <img src="/images/logos/social-icons/linkedin-logo-150.png" class="footer__logo" alt="Linkedin logo">
+              </a>
+            </div>
+          </div>
+          <div class="footer__cols__col--group">
+            <div class="footer__cols__col__logo">
+              <a href="https://twitter.com/apachebeam">
+                <img src="/images/logos/social-icons/twitter-logo-150.png" class="footer__logo" alt="Twitter logo">
+              </a>
+            </div>
+            <div class="footer__cols__col__logo">
+              <a href="https://www.youtube.com/channel/UChNnb_YO_7B0HlW6FhAXZZQ">
+                <img src="/images/logos/social-icons/youtube-logo-150.png" class="footer__logo" alt="Youtube logo">
+              </a>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
 
diff --git a/website/www/site/static/images/graphic-background.png b/website/www/site/static/images/graphic-background.png
new file mode 100644
index 00000000000..0c40bac6103
Binary files /dev/null and b/website/www/site/static/images/graphic-background.png differ
diff --git a/website/www/site/static/images/logo_amazon-kinesis.png b/website/www/site/static/images/logo_amazon-kinesis.png
new file mode 100644
index 00000000000..080378eba47
Binary files /dev/null and b/website/www/site/static/images/logo_amazon-kinesis.png differ
diff --git a/website/www/site/static/images/logos/sdks/go_pipelines.png b/website/www/site/static/images/logos/sdks/go_pipelines.png
new file mode 100644
index 00000000000..bd00fc64f00
Binary files /dev/null and b/website/www/site/static/images/logos/sdks/go_pipelines.png differ
diff --git a/website/www/site/static/images/logos/sdks/java_pipelines.png b/website/www/site/static/images/logos/sdks/java_pipelines.png
new file mode 100644
index 00000000000..7f20bdd2963
Binary files /dev/null and b/website/www/site/static/images/logos/sdks/java_pipelines.png differ
diff --git a/website/www/site/static/images/logos/sdks/python_pipelines.png b/website/www/site/static/images/logos/sdks/python_pipelines.png
new file mode 100644
index 00000000000..469a2a2ff9d
Binary files /dev/null and b/website/www/site/static/images/logos/sdks/python_pipelines.png differ
diff --git a/website/www/site/static/images/logos/sdks/sql_pipelines.png b/website/www/site/static/images/logos/sdks/sql_pipelines.png
new file mode 100644
index 00000000000..e464391589a
Binary files /dev/null and b/website/www/site/static/images/logos/sdks/sql_pipelines.png differ
diff --git a/website/www/site/static/images/logos/social-icons/github-logo-150.png b/website/www/site/static/images/logos/social-icons/github-logo-150.png
new file mode 100644
index 00000000000..6006868e562
Binary files /dev/null and b/website/www/site/static/images/logos/social-icons/github-logo-150.png differ
diff --git a/website/www/site/static/images/logos/social-icons/linkedin-logo-150.png b/website/www/site/static/images/logos/social-icons/linkedin-logo-150.png
new file mode 100644
index 00000000000..4eedb182c08
Binary files /dev/null and b/website/www/site/static/images/logos/social-icons/linkedin-logo-150.png differ
diff --git a/website/www/site/static/images/logos/social-icons/twitter-logo-150.png b/website/www/site/static/images/logos/social-icons/twitter-logo-150.png
new file mode 100644
index 00000000000..b12f0212f2f
Binary files /dev/null and b/website/www/site/static/images/logos/social-icons/twitter-logo-150.png differ
diff --git a/website/www/site/static/images/logos/social-icons/youtube-logo-150.png b/website/www/site/static/images/logos/social-icons/youtube-logo-150.png
new file mode 100644
index 00000000000..2235d85ac12
Binary files /dev/null and b/website/www/site/static/images/logos/social-icons/youtube-logo-150.png differ