You are viewing a plain text version of this content. The canonical link for it is here.
Posted to issues@beam.apache.org by "ASF GitHub Bot (Jira)" <ji...@apache.org> on 2021/02/02 01:25:00 UTC

[jira] [Work logged] (BEAM-11466) [Website revamp] Development of the button bar on the Home Page

     [ https://issues.apache.org/jira/browse/BEAM-11466?focusedWorklogId=545720&page=com.atlassian.jira.plugin.system.issuetabpanels:worklog-tabpanel#worklog-545720 ]

ASF GitHub Bot logged work on BEAM-11466:
-----------------------------------------

                Author: ASF GitHub Bot
            Created on: 02/Feb/21 01:24
            Start Date: 02/Feb/21 01:24
    Worklog Time Spent: 10m 
      Work Description: TheNeuralBit commented on a change in pull request #13596:
URL: https://github.com/apache/beam/pull/13596#discussion_r568247822



##########
File path: website/www/site/static/js/calendar.js
##########
@@ -0,0 +1,28 @@
+// 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.
+
+$(document).ready(function() {
+    function setSize() {
+<<<<<<< HEAD
+        var height = $('.calendar-card-big-right').height();
+        var width = $('.calendar-card-big-right').width();
+        $('#calendar').height = height-100;
+        $('#calendar').width = width-100;
+=======
+       var height = $('.calendar-card-big-right').height();
+       var width = $('.calendar-card-big-right').width();
+       $('#calendar').height = height-100;
+       $('#calendar').width = width-100;
+>>>>>>> 39dcd8859211b7220d7717efd7afb0cb81f462a0

Review comment:
       Please resolve this merge conflict

##########
File path: website/www/site/layouts/index.html
##########
@@ -63,73 +61,105 @@ <h2 class="pillars-title">
 {{ end }}
 
 {{ define "graphic-section" }}
-  <div class="graphic section">
-    <div class="graphic__image">
-      <img src="/images/beam_architecture.png" alt="Beam architecture">
+  <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 src="/images/logos/runners/gray-logos-1.svg"/>
+          </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-gray.svg"/>
+            <img src="/images/logos/sdks/java-gray.svg"/>
+          </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>
+        </div>
+      </div>
     </div>
   </div>
 {{ end }}
 
-{{/*
-  TODO:
-    This is the implementation of the design.
-    The event sync functionality will be implemented when we have the event page.
-*/}}
 {{ define "calendar-section" }}
   <div class="calendar">
     <h2 class="calendar-title">
       {{ T "home-calendar-title" }}
     </h2>
     <div class="calendar-content">
-      <a href="#">
-        <div class="calendar-card-big calendar-card-big-left">
-            <div class="calendar-category">
-              <p class="calendar-category-tag">{{ T "home-calendar-category-tag-first" }}</p>
-              <p class="calendar-category-date">{{ T "home-calendar-category-date-first" }}</p>
-            </div>
-            <h4 class="calendar-card-big-title">
-              {{ T "home-calendar-card-title-first" }}
-            </h4>
-            <p class="calendar-card-author">{{ T "home-calendar-card-author-first" }}</p>
+      <div class="calendar-card-big calendar-card-big-left">
+        <div class="desktop">
+          <a class="twitter-timeline" data-width="381" data-height="460"  href="https://twitter.com/ApacheBeam?ref_src=twsrc%5Etfw">Tweets by ApacheBeam</a>
         </div>
-      </a>
+        <div class="mobile">
+          <a class="twitter-timeline" data-width="381" data-height="348"  href="https://twitter.com/ApacheBeam?ref_src=twsrc%5Etfw">Tweets by ApacheBeam</a>
+        </div>
+      </div>

Review comment:
       This widget just looks like a single link to the twitter page:
   
   ![image](https://user-images.githubusercontent.com/675055/106536840-0bccf280-64ae-11eb-866a-4c7a6109e8f9.png)
   
   Is it supposed to be a widget showing the latest tweets or something else?

##########
File path: website/www/site/layouts/index.html
##########
@@ -63,73 +61,105 @@ <h2 class="pillars-title">
 {{ end }}
 
 {{ define "graphic-section" }}
-  <div class="graphic section">
-    <div class="graphic__image">
-      <img src="/images/beam_architecture.png" alt="Beam architecture">
+  <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 src="/images/logos/runners/gray-logos-1.svg"/>
+          </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-gray.svg"/>
+            <img src="/images/logos/sdks/java-gray.svg"/>
+          </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>
+        </div>
+      </div>
     </div>
   </div>
 {{ end }}
 
-{{/*
-  TODO:
-    This is the implementation of the design.
-    The event sync functionality will be implemented when we have the event page.
-*/}}
 {{ define "calendar-section" }}
   <div class="calendar">
     <h2 class="calendar-title">
       {{ T "home-calendar-title" }}
     </h2>
     <div class="calendar-content">
-      <a href="#">
-        <div class="calendar-card-big calendar-card-big-left">
-            <div class="calendar-category">
-              <p class="calendar-category-tag">{{ T "home-calendar-category-tag-first" }}</p>
-              <p class="calendar-category-date">{{ T "home-calendar-category-date-first" }}</p>
-            </div>
-            <h4 class="calendar-card-big-title">
-              {{ T "home-calendar-card-title-first" }}
-            </h4>
-            <p class="calendar-card-author">{{ T "home-calendar-card-author-first" }}</p>
+      <div class="calendar-card-big calendar-card-big-left">
+        <div class="desktop">
+          <a class="twitter-timeline" data-width="381" data-height="460"  href="https://twitter.com/ApacheBeam?ref_src=twsrc%5Etfw">Tweets by ApacheBeam</a>
         </div>
-      </a>
+        <div class="mobile">
+          <a class="twitter-timeline" data-width="381" data-height="348"  href="https://twitter.com/ApacheBeam?ref_src=twsrc%5Etfw">Tweets by ApacheBeam</a>
+        </div>
+      </div>
       <div class="calendar-card-box">
-        <a href="#">
-          <div class="calendar-card-small">
-            <div class="calendar-category">
-              <p class="calendar-category-tag">{{ T "home-calendar-category-tag-second" }}</p>
-              <p class="calendar-category-date">{{ T "home-calendar-category-date-second" }}</p>
+        {{ range first 2 (after 1 (where .Site.Pages.ByPublishDate.Reverse "Section" "blog")) }}
+            <a class="post-card" href="{{ .RelPermalink }}" data-categories="{{ with .Params.categories }}{{ if eq ( printf "%T" . ) "string" }}{{ . | replaceRE "[.]" "_" | urlize }}{{ else if eq ( printf "%T" . ) "[]string" }}{{ range . }}{{ . | replaceRE "[.]" "_" | urlize }} {{end}}{{end}}{{else}}no-author{{end}}"
+            >
+              <div class="post-info post-category">
+                  <p>
+                    {{ if .Params.categories }}
+                      {{ delimit .Params.categories ", " " & " }}
+                    {{ end }}
+                  </p>
+                  <p>{{ .Date.Format "2006/01/02" }}</p>
+              </div>
+              <div>
+              <p class="post-title">{{ .Title }}</p>
+              <p class="post-info">
+                {{ if .Params.authors }}
+                      {{ delimit .Params.authors ", " " & " }}
+                {{ end }}

Review comment:
       We should also change this in other places where we have these cards. I see them:
   - When browsing the blog
   - At the bottom of blog posts in the "Latest from the blog" section

##########
File path: website/www/site/data/en/quotes.yaml
##########
@@ -10,14 +10,12 @@
 # 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
+  logoUrl: images/logos/full-color/nameless/eBay.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
+  icon: icons/quote-icon.svg
+  logoUrl: images/logos/full-color/nameless/klio.png

Review comment:
       Shouldn't each quote be changed too? This looks like we're attributing the same quote to three different entities.

##########
File path: examples/java/build.gradle
##########
@@ -25,6 +25,7 @@ plugins {
 }
 
 applyJavaNature(
+  enableStrictDependencies: true,

Review comment:
       Please merge website-revamp into this branch (that will remove these duplicate changes to the examples/ directory).

##########
File path: website/www/site/layouts/index.html
##########
@@ -63,73 +61,105 @@ <h2 class="pillars-title">
 {{ end }}
 
 {{ define "graphic-section" }}
-  <div class="graphic section">
-    <div class="graphic__image">
-      <img src="/images/beam_architecture.png" alt="Beam architecture">
+  <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 src="/images/logos/runners/gray-logos-1.svg"/>
+          </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-gray.svg"/>
+            <img src="/images/logos/sdks/java-gray.svg"/>
+          </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>
+        </div>
+      </div>
     </div>
   </div>
 {{ end }}
 
-{{/*
-  TODO:
-    This is the implementation of the design.
-    The event sync functionality will be implemented when we have the event page.
-*/}}
 {{ define "calendar-section" }}
   <div class="calendar">
     <h2 class="calendar-title">
       {{ T "home-calendar-title" }}
     </h2>
     <div class="calendar-content">
-      <a href="#">
-        <div class="calendar-card-big calendar-card-big-left">
-            <div class="calendar-category">
-              <p class="calendar-category-tag">{{ T "home-calendar-category-tag-first" }}</p>
-              <p class="calendar-category-date">{{ T "home-calendar-category-date-first" }}</p>
-            </div>
-            <h4 class="calendar-card-big-title">
-              {{ T "home-calendar-card-title-first" }}
-            </h4>
-            <p class="calendar-card-author">{{ T "home-calendar-card-author-first" }}</p>
+      <div class="calendar-card-big calendar-card-big-left">
+        <div class="desktop">
+          <a class="twitter-timeline" data-width="381" data-height="460"  href="https://twitter.com/ApacheBeam?ref_src=twsrc%5Etfw">Tweets by ApacheBeam</a>
         </div>
-      </a>
+        <div class="mobile">
+          <a class="twitter-timeline" data-width="381" data-height="348"  href="https://twitter.com/ApacheBeam?ref_src=twsrc%5Etfw">Tweets by ApacheBeam</a>
+        </div>
+      </div>
       <div class="calendar-card-box">
-        <a href="#">
-          <div class="calendar-card-small">
-            <div class="calendar-category">
-              <p class="calendar-category-tag">{{ T "home-calendar-category-tag-second" }}</p>
-              <p class="calendar-category-date">{{ T "home-calendar-category-date-second" }}</p>
+        {{ range first 2 (after 1 (where .Site.Pages.ByPublishDate.Reverse "Section" "blog")) }}
+            <a class="post-card" href="{{ .RelPermalink }}" data-categories="{{ with .Params.categories }}{{ if eq ( printf "%T" . ) "string" }}{{ . | replaceRE "[.]" "_" | urlize }}{{ else if eq ( printf "%T" . ) "[]string" }}{{ range . }}{{ . | replaceRE "[.]" "_" | urlize }} {{end}}{{end}}{{else}}no-author{{end}}"
+            >
+              <div class="post-info post-category">
+                  <p>
+                    {{ if .Params.categories }}
+                      {{ delimit .Params.categories ", " " & " }}
+                    {{ end }}
+                  </p>
+                  <p>{{ .Date.Format "2006/01/02" }}</p>
+              </div>
+              <div>
+              <p class="post-title">{{ .Title }}</p>
+              <p class="post-info">
+                {{ if .Params.authors }}
+                      {{ delimit .Params.authors ", " " & " }}
+                {{ end }}
+              </p>
             </div>
-            <h4 class="calendar-card-small-title">
-              {{ T "home-calendar-card-title-second" }}
-            </h4>
-            <p class="calendar-card-author">{{ T "home-calendar-card-author-second" }}</p>
-          </div>
-        </a>
-        <a href="#">
-          <div class="calendar-card-small">
-            <div class="calendar-category">
-              <p class="calendar-category-tag">{{ T "home-calendar-category-tag-third" }}</p>
-              <p class="calendar-category-date">{{ T "home-calendar-category-date-third" }}</p>
-            </div>
-            <h4 class="calendar-card-small-title">
-              {{ T "home-calendar-card-title-third" }}
-            </h4>
-            <p class="calendar-card-author">{{ T "home-calendar-card-author-third" }}</p>
-          </div>
-        </a>
+            </a>
+          {{ end }}
       </div>
       <div class="calendar-card-big calendar-card-big-right">
         <p class="calendar-card-event-title">{{ T "home-calendar-card-events-title" }}</p>
         <div class="calendar-card-events">
-          {{ $data := index $.Site.Data .Site.Language.Lang }}
-          {{ range $event := $data.calendar_events }}
-              {{ partial "calendar/calendar-events" (dict "icon" $event.icon  "title" $event.title "place" $event.place "time" $event.time "url" $event.url) }}
-          {{ end }}
+          <div class="calendar-desktop">
+            <iframe id='calendar' src="https://calendar.google.com/calendar/embed?src=r24up18ne2ddgl0t93flk0hsj8%40group.calendar.google.com&ctz=Europe%2FWarsaw" style="border: 0" width="333" height="320" frameborder="0" scrolling="no"></iframe>
+          </div>
+          <div class="calendar-mobile">
+            <iframe id='calendar' src="https://calendar.google.com/calendar/embed?src=r24up18ne2ddgl0t93flk0hsj8%40group.calendar.google.com&ctz=Europe%2FWarsaw" style="border: 0" width="287" height="300" frameborder="0" scrolling="no"></iframe>
+          </div>

Review comment:
       When I look at this calendar widget it shows events in Europe/Warsaw timezone, even though I'm in PST. I think just removing this `ctz=` will fix it.
   
   ```suggestion
             <div class="calendar-desktop">
               <iframe id='calendar' src="https://calendar.google.com/calendar/embed?src=r24up18ne2ddgl0t93flk0hsj8%40group.calendar.google.com" style="border: 0" width="333" height="320" frameborder="0" scrolling="no"></iframe>
             </div>
             <div class="calendar-mobile">
               <iframe id='calendar' src="https://calendar.google.com/calendar/embed?src=r24up18ne2ddgl0t93flk0hsj8%40group.calendar.google.com" style="border: 0" width="287" height="300" frameborder="0" scrolling="no"></iframe>
             </div>
   ```

##########
File path: website/www/site/layouts/index.html
##########
@@ -63,73 +61,105 @@ <h2 class="pillars-title">
 {{ end }}
 
 {{ define "graphic-section" }}
-  <div class="graphic section">
-    <div class="graphic__image">
-      <img src="/images/beam_architecture.png" alt="Beam architecture">
+  <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 src="/images/logos/runners/gray-logos-1.svg"/>
+          </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-gray.svg"/>
+            <img src="/images/logos/sdks/java-gray.svg"/>
+          </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>
+        </div>
+      </div>
     </div>
   </div>
 {{ end }}
 
-{{/*
-  TODO:
-    This is the implementation of the design.
-    The event sync functionality will be implemented when we have the event page.
-*/}}
 {{ define "calendar-section" }}
   <div class="calendar">
     <h2 class="calendar-title">
       {{ T "home-calendar-title" }}
     </h2>
     <div class="calendar-content">
-      <a href="#">
-        <div class="calendar-card-big calendar-card-big-left">
-            <div class="calendar-category">
-              <p class="calendar-category-tag">{{ T "home-calendar-category-tag-first" }}</p>
-              <p class="calendar-category-date">{{ T "home-calendar-category-date-first" }}</p>
-            </div>
-            <h4 class="calendar-card-big-title">
-              {{ T "home-calendar-card-title-first" }}
-            </h4>
-            <p class="calendar-card-author">{{ T "home-calendar-card-author-first" }}</p>
+      <div class="calendar-card-big calendar-card-big-left">
+        <div class="desktop">
+          <a class="twitter-timeline" data-width="381" data-height="460"  href="https://twitter.com/ApacheBeam?ref_src=twsrc%5Etfw">Tweets by ApacheBeam</a>
         </div>
-      </a>
+        <div class="mobile">
+          <a class="twitter-timeline" data-width="381" data-height="348"  href="https://twitter.com/ApacheBeam?ref_src=twsrc%5Etfw">Tweets by ApacheBeam</a>
+        </div>
+      </div>
       <div class="calendar-card-box">
-        <a href="#">
-          <div class="calendar-card-small">
-            <div class="calendar-category">
-              <p class="calendar-category-tag">{{ T "home-calendar-category-tag-second" }}</p>
-              <p class="calendar-category-date">{{ T "home-calendar-category-date-second" }}</p>
+        {{ range first 2 (after 1 (where .Site.Pages.ByPublishDate.Reverse "Section" "blog")) }}
+            <a class="post-card" href="{{ .RelPermalink }}" data-categories="{{ with .Params.categories }}{{ if eq ( printf "%T" . ) "string" }}{{ . | replaceRE "[.]" "_" | urlize }}{{ else if eq ( printf "%T" . ) "[]string" }}{{ range . }}{{ . | replaceRE "[.]" "_" | urlize }} {{end}}{{end}}{{else}}no-author{{end}}"
+            >
+              <div class="post-info post-category">
+                  <p>
+                    {{ if .Params.categories }}
+                      {{ delimit .Params.categories ", " " & " }}
+                    {{ end }}
+                  </p>
+                  <p>{{ .Date.Format "2006/01/02" }}</p>
+              </div>
+              <div>
+              <p class="post-title">{{ .Title }}</p>
+              <p class="post-info">
+                {{ if .Params.authors }}
+                      {{ delimit .Params.authors ", " " & " }}
+                {{ end }}

Review comment:
       This renders the author ASF id (bhulette). Is it possible to make it show their full name (Brian Hulette)?
   
   ![image](https://user-images.githubusercontent.com/675055/106537446-32d7f400-64af-11eb-8fa0-1c28189b2ad8.png)
   

##########
File path: website/www/site/layouts/index.html
##########
@@ -63,73 +61,105 @@ <h2 class="pillars-title">
 {{ end }}
 
 {{ define "graphic-section" }}
-  <div class="graphic section">
-    <div class="graphic__image">
-      <img src="/images/beam_architecture.png" alt="Beam architecture">
+  <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>

Review comment:
       I'm a little perplexed by this section, it just looks like this:
   ![image](https://user-images.githubusercontent.com/675055/106538378-02915500-64b1-11eb-9da0-a75dbc1237c2.png)
   
   Is there supposed to be something more here?

##########
File path: website/www/site/content/en/documentation/_index.md
##########
@@ -22,42 +23,38 @@ limitations under the License.
 
 This section provides in-depth conceptual information and reference material for the Beam Model, SDKs, and Runners:
 
+</br>
+
 ## Concepts
 
 Learn about the Beam Programming Model and the concepts common to all Beam SDKs and Runners.
 
-* Read the [Programming Guide](/documentation/programming-guide/), which introduces all the key Beam concepts.
-* Learn about Beam's [execution model](/documentation/runtime/model) to better understand how pipelines execute.
-* Visit [Learning Resources](/documentation/resources/learning-resources) for some of our favorite articles and talks about Beam.
+- Read the [Programming Guide](/documentation/programming-guide/), which introduces all the key Beam concepts.
+- Learn about Beam's [execution model](/documentation/runtime/model) to better understand how pipelines execute.
+- Visit [Learning Resources](/documentation/resources/learning-resources) for some of our favorite articles and talks about Beam.
 
 ## Pipeline Fundamentals
 
-* [Design Your Pipeline](/documentation/pipelines/design-your-pipeline/) by planning your pipeline’s structure, choosing transforms to apply to your data, and determining your input and output methods.
-* [Create Your Pipeline](/documentation/pipelines/create-your-pipeline/) using the classes in the Beam SDKs.
-* [Test Your Pipeline](/documentation/pipelines/test-your-pipeline/) to minimize debugging a pipeline’s remote execution.
+- [Design Your Pipeline](/documentation/pipelines/design-your-pipeline/) by planning your pipeline’s structure, choosing transforms to apply to your data, and determining your input and output methods.
+- [Create Your Pipeline](/documentation/pipelines/create-your-pipeline/) using the classes in the Beam SDKs.
+- [Test Your Pipeline](/documentation/pipelines/test-your-pipeline/) to minimize debugging a pipeline’s remote execution.

Review comment:
       It looks like this * to - change still needs to be reverted.




----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


Issue Time Tracking
-------------------

    Worklog Id:     (was: 545720)
    Time Spent: 2h 10m  (was: 2h)

> [Website revamp] Development of the button bar on the Home Page
> ---------------------------------------------------------------
>
>                 Key: BEAM-11466
>                 URL: https://issues.apache.org/jira/browse/BEAM-11466
>             Project: Beam
>          Issue Type: Improvement
>          Components: website
>            Reporter: Agnieszka Sell
>            Assignee: Jakub Sadowski
>            Priority: P2
>              Labels: website-revamp-2020, website-revamp-sprint-10
>          Time Spent: 2h 10m
>  Remaining Estimate: 0h
>




--
This message was sent by Atlassian Jira
(v8.3.4#803005)