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 000000000000..86d58686665b --- /dev/null +++ b/website/www/site/assets/icons/linkedin-icon.svg @@ -0,0 +1,21 @@ + + + + diff --git a/website/www/site/assets/scss/_footer.sass b/website/www/site/assets/scss/_footer.sass index ce99da118e58..0aa826792a18 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 7b25a596ec6e..2396e076c468 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 5706a9bba9c2..849ecccaf972 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 ae80f38c5ffb..9f05beaa7fbe 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/_pipelines.scss b/website/www/site/assets/scss/_pipelines.scss new file mode 100644 index 000000000000..4057b8aabded --- /dev/null +++ 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 index 96667a79931f..8d50f1384b3c 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 a86585101fb8..e3510b5d06e3 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 2ed3ff6c03a9..192780de264d 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 000000000000..767ca12e10df --- /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 6447a1402cf4..96bcb336c920 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 772807b469da..1d433cb7a33b 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 b90b21c1fd87..3c83c919a7e0 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 397ad93f2142..7e79c2db6f58 100644 --- a/website/www/site/layouts/index.html +++ b/website/www/site/layouts/index.html @@ -36,28 +36,17 @@

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

{{ end }} {{ define "pillars-section" }} -
-

- {{ T "home-pillars-title" }} -

-
- {{ $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 }} -
-
-
+
+

+ {{ T "home-pillars-title" }} +

+
{{ $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 }}
-

- {{ T "home-pillars-social-text" }} -

-
{{ end }} {{ define "playground-section" }} @@ -85,58 +74,24 @@

Try Beam Playground

{{ end }} {{ define "graphic-section" }} -
-
-

{{ T "home-model-title1" }}

-
-
- - - - - -
-
- {{ $data := index $.Site.Data .Site.Language.Lang }} - {{ range $item := $data.graphic }} -
- -

{{ .title }}

-

{{ .body }}

-
- {{ end }} -
-
-
-
-

{{ T "home-model-title2" }}

-
-
-
- - - -
-

{{ T "home-graphic-more" }}

-
-

{{ T "home-graphic-runner-title" }}

-

{{ T "home-graphic-runner-body" }}

-
-
-
-
- - -
-

{{ T "home-graphic-more" }}

-
-

{{ T "home-graphic-language-title" }}

-

{{ T "home-graphic-language-body" }}

+
+
+

{{ T "home-model-title1" }}

+
+ +
+ {{ $data := index $.Site.Data .Site.Language.Lang }} + {{ range $item := $data.graphic }} +
+ +

{{ .title }}

+

{{ .body }}

+
+ {{ end }}
-
{{ end }} {{ define "calendar-section" }} @@ -260,3 +215,17 @@

{{ end }} +{{ define "pipelines-section" }} +
+
+ {{ T "home-pipelines-title" }} +
+
+ {{ range $pipeline := $.Site.Data.pipelines }} + + {{ end }} +
+
+{{ end }} diff --git a/website/www/site/layouts/partials/footer.html b/website/www/site/layouts/partials/footer.html index ef6604f5557e..cfdde015a26f 100644 --- a/website/www/site/layouts/partials/footer.html +++ b/website/www/site/layouts/partials/footer.html @@ -62,6 +62,32 @@ {{ T "footer-copy" }}
+
+
+ + +
+
+ + +
+
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 000000000000..0c40bac6103f 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 000000000000..080378eba475 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 000000000000..bd00fc64f00f 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 000000000000..7f20bdd29635 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 000000000000..469a2a2ff9d0 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 000000000000..e464391589ae 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 000000000000..6006868e562d 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 000000000000..4eedb182c087 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 000000000000..b12f0212f2f3 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 000000000000..2235d85ac12b Binary files /dev/null and b/website/www/site/static/images/logos/social-icons/youtube-logo-150.png differ