You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@airflow.apache.org by ka...@apache.org on 2019/10/17 09:34:15 UTC

[airflow-site] branch aip-11 updated: Add list components (#76)

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

kamilbregula pushed a commit to branch aip-11
in repository https://gitbox.apache.org/repos/asf/airflow-site.git


The following commit(s) were added to refs/heads/aip-11 by this push:
     new 3d37522  Add list components (#76)
3d37522 is described below

commit 3d3752233f497be8a7097de634293d9e35cb7bac
Author: Kamil Gabryjelski <ka...@gmail.com>
AuthorDate: Thu Oct 17 11:34:05 2019 +0200

    Add list components (#76)
---
 landing-pages/site/assets/icons/azure-logo.svg     |  24 +++++
 landing-pages/site/assets/icons/dish-logo.svg      |  14 +++
 landing-pages/site/assets/icons/linkedin.svg       |  14 +++
 landing-pages/site/assets/icons/members-icon.svg   |  10 ++
 landing-pages/site/assets/icons/twitter.svg        |   1 +
 .../index.js => site/assets/scss/_avatar.scss}     |   6 ++
 landing-pages/site/assets/scss/_list-boxes.scss    | 118 +++++++++++++++++++++
 landing-pages/site/assets/scss/main-custom.scss    |   2 +
 landing-pages/site/data/case_studies.json          |  32 ++++++
 landing-pages/site/data/commiters.json             |  95 +++++++++++++++++
 landing-pages/site/data/integrations.json          |  27 +++++
 landing-pages/site/data/meetups.json               |  50 +++++++++
 landing-pages/site/layouts/examples/list.html      |  49 ++++++++-
 .../baseof.html => partials/boxes/case-study.html} |  27 ++---
 .../site/layouts/partials/boxes/commiter.html      |  51 +++++++++
 .../baseof.html => partials/boxes/event.html}      |  31 +++---
 .../button-filled.html => boxes/integration.html}  |  10 +-
 .../layouts/partials/buttons/button-filled.html    |   2 +-
 landing-pages/site/static/stock-guy.jpg            | Bin 0 -> 45492 bytes
 landing-pages/src/index.js                         |   4 +
 .../js/showAllCommiters.js}                        |  23 +++-
 21 files changed, 546 insertions(+), 44 deletions(-)

diff --git a/landing-pages/site/assets/icons/azure-logo.svg b/landing-pages/site/assets/icons/azure-logo.svg
new file mode 100644
index 0000000..f27261f
--- /dev/null
+++ b/landing-pages/site/assets/icons/azure-logo.svg
@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="198.073" height="60" viewBox="0 0 198.073 60">
+    <g id="Group_191" data-name="Group 191" transform="translate(549.893 -945.671)">
+        <g id="Group_190" data-name="Group 190" transform="translate(-549.893 945.671)">
+            <path id="Path_171" d="M-466.061 950.262c11.082-1.552 22.132-3.071 33.214-4.591-.032 9.752 0 19.5 0 29.256h-33.245c.032-8.2-.032-16.433.032-24.665" fill="#35a8e1" data-name="Path 171" transform="translate(492.626 -945.671)"/>
+            <path id="Path_172" d="M27.848 957.669a3.712 3.712 0 0 1 4.971-.823c-1.2.317-2.565.253-3.673.855-.95 1.33-.443 3.1-.6 4.654 2.216.032 4.4 0 6.617.032.032-1.615.063-3.2.063-4.813l1.172.032v4.718c1.171.032 2.311.032 3.483.063v.887c-1.171 0-2.343 0-3.483.032.032 3.42 0 6.807 0 10.227.095.918-.222 2.153.633 2.786.792.633 1.9.475 2.85.665v.855c-1.773.032-4.274-.348-4.559-2.5-.222-4.021-.032-8.042-.063-12.063h-6.651c0 4.876.032 9.752-.032 14.628-.285-.1-.792-.285-1.077-.348-.222-4. [...]
+            <path id="Path_173" d="M-307.661 956.671c.475.095 1.393.285 1.868.38 3.261 6.364 5.952 13.045 9.024 19.5 3.419-6.3 5.952-13.076 9.024-19.567.665 0 1.33-.032 1.995-.032v21.119l-1.425-.127c.032-6.491.095-12.95-.032-19.441-3.1 6.427-5.826 13.045-8.8 19.5h-1.3c-1.995-4.306-3.958-8.644-5.921-12.982a30.167 30.167 0 0 0-3.071-6.047c-.222 6.332-.063 12.665-.095 19.029-.317 0-.982.032-1.3.063.032-7.156 0-14.28.032-21.4" fill="#35a8e1" data-name="Path 173" transform="translate(384.653  [...]
+            <path id="Path_174" d="M-225.161 957.471c.285 0 .855.032 1.108.032v2.818h-1.14c0-.95.032-1.9.032-2.85" fill="#35a8e1" data-name="Path 174" transform="translate(328.329 -953.735)"/>
+            <path id="Path_175" d="M-549.893 964.181c8.422-1.2 16.876-2.216 25.3-3.609.063 8.2 0 16.369.032 24.57-8.422.063-16.844-.095-25.266.095-.063-7.029 0-14.058-.063-21.055" fill="#35a8e1" data-name="Path 175" transform="translate(549.893 -955.853)"/>
+            <path id="Path_176" d="M-209.483 976.323c3.515-3.673 10.987-2.565 12.317 2.691a40.82 40.82 0 0 1-1.077.38c-.95-5.066-8.549-5.7-11.082-1.646a8.815 8.815 0 0 0 .222 9.5c2.47 3.166 8.612 2.913 10.2-1.045.38-.792.7-1.836 1.836-1.615a7.323 7.323 0 0 1-9.309 5.446c-5.763-1.362-7.029-9.752-3.1-13.71" fill="#35a8e1" data-name="Path 176" transform="translate(319.18 -965.107)"/>
+            <path id="Path_177" d="M-225.138 975.471l1.14.032v15.324l-1.108.063a842.514 842.514 0 0 1-.032-15.419" fill="#35a8e1" data-name="Path 177" transform="translate(328.306 -965.995)"/>
+            <path id="Path_178" d="M-156.162 975.571h1.172c.032.95.032 1.868.063 2.818 1.71-1.488 3.736-3.166 6.174-2.755.127.158.412.475.538.665-2.818.127-5.952 1.615-6.586 4.623-.412 3.419.032 6.9-.253 10.322-.285-.158-.792-.475-1.045-.6-.19-5.034-.032-10.037-.063-15.071" fill="#35a8e1" data-name="Path 178" transform="translate(281.261 -966.063)"/>
+            <path id="Path_179" d="M-125.224 975.5c-5.6 1.8-5.952 10.955-.76 13.488a6.44 6.44 0 0 0 7-1.108 8.242 8.242 0 0 0 .317-10.638 6.328 6.328 0 0 0-6.554-1.741m-.633-.76a7.726 7.726 0 0 1 7.916 1.71c3.166 3.388 2.945 9.435-.633 12.412-3.325 2.691-8.96 1.836-11.05-1.995-2.533-4.053-1.045-10.544 3.768-12.127" fill="#35a8e1" data-name="Path 179" transform="translate(263.981 -965.199)"/>
+            <path id="Path_180" d="M-72.47 975.258a8.918 8.918 0 0 1 8.422.063c1.425.76 1.71 2.5 2.121 3.894-1.836.032-1.425-2.375-2.786-3.135a7.319 7.319 0 0 0-7-.095 2.572 2.572 0 0 0 .063 4.464c2.691 1.393 6.016 1.013 8.612 2.628 1.52.95 1.773 3.071 1.172 4.623-.792 1.741-2.818 2.311-4.528 2.6-2.691.412-5.889-.19-7.5-2.565-.6-.95-1.33-2.406.032-3.008.507 1.235.792 2.723 1.931 3.578 2.09 1.583 5.034 1.425 7.377.6a2.89 2.89 0 0 0 .7-5c-2.786-1.551-6.364-1.013-8.992-2.881a3.513 3.513 0 0 [...]
+            <path id="Path_181" d="M-19.512 975.265c-5.034.38-6.9 6.807-4.844 10.8 1.425 3.451 6.269 4.464 9.214 2.343 3.1-2.375 3.515-7.219 1.52-10.448a5.959 5.959 0 0 0-5.889-2.691m-2.343-.348a7.675 7.675 0 0 1 8.739 1.868 9.064 9.064 0 0 1-.317 11.462 7.6 7.6 0 0 1-10.259.348c-4.116-3.578-3.356-11.493 1.836-13.678" fill="#35a8e1" data-name="Path 181" transform="translate(192.731 -965.189)"/>
+            <path id="Path_182" d="M-549.738 1041.971h25.266c.032 8.137 0 16.274.032 24.443-8.454-.76-16.844-2.343-25.266-3.356a1577.65 1577.65 0 0 1-.032-21.087" fill="#35a8e1" data-name="Path 182" transform="translate(549.801 -1011.29)"/>
+            <path id="Path_183" d="M-466.093 1066.6c.063-8.232-.063-16.5.063-24.728 11.05.063 22.132-.032 33.182.032v29.319c-11.113-1.425-22.2-3.04-33.245-4.623" fill="#35a8e1" data-name="Path 183" transform="translate(492.626 -1011.222)"/>
+            <path id="Path_184" d="M-307.8 1061.414h7.947c-1.266-3.325-2.47-6.681-3.894-9.91-1.52 3.2-2.628 6.617-4.053 9.91m2.438-12.443c1.14 0 2.248.032 3.388.063 2.913 7.061 5.857 14.121 8.96 21.119-1.108 0-2.216-.032-3.325-.032-.823-2.121-1.646-4.211-2.47-6.333-3.325.032-6.617 0-9.942.032-.855 2.121-1.71 4.211-2.565 6.332h-2.976c2.976-7.061 5.921-14.153 8.929-21.182" fill="#35a8e1" data-name="Path 184" transform="translate(389.155 -1016.074)"/>
+            <path id="Path_185" d="M-133.843 1069.182c1.551-1.931 3.546-3.578 6.174-3.514 0 .855 0 1.71.032 2.565-2.28.095-4.939.982-5.6 3.451-.76 3.23-.222 6.554-.38 9.847h-2.723a1238.27 1238.27 0 0 1 0-15.419h2.533v3.071z" fill="#35a8e1" data-name="Path 185" transform="translate(267.735 -1027.483)"/>
+            <path id="Path_186" d="M-104.17 1072.733c3.388.063 6.744.063 10.132 0-.538-2.533-2.66-4.971-5.509-4.5-2.565-.127-4.116 2.28-4.623 4.5m-.728-3.926c2.66-3.356 8.359-3.7 11.272-.475a10.054 10.054 0 0 1 2.153 6.586c-4.243.032-8.454-.032-12.7.032.317 1.267.412 2.723 1.456 3.641 2.47 2.47 7.346 1.9 8.612-1.551.633.032 1.9.032 2.5.063-1.488 5.351-8.929 6.586-12.76 3.1a8.753 8.753 0 0 1-.538-11.4" fill="#35a8e1" data-name="Path 186" transform="translate(247.545 -1027.773)"/>
+            <path id="Path_187" d="M-245.15 1067.1c4.433-.032 8.834-.063 13.266.032-.1 1.71-1.425 2.85-2.47 4.084-2.628 3.008-5.288 6.016-7.884 9.055 3.514.665 7.092-.38 10.607.38 0 .443.032 1.362.032 1.836h-13.995v-1.931c3.261-3.736 6.681-7.314 9.784-11.177-3.008-.253-6.047-.032-9.055-.222-.095-.475-.222-1.52-.285-2.058" fill="#35a8e1" data-name="Path 187" transform="translate(342.271 -1028.443)"/>
+            <path id="Path_188" d="M-193.7 1067.071c.887 0 1.8 0 2.723.032.063 3.8-.19 7.631.1 11.43 1.425 4.084 8.359 2.185 8.359-1.9.095-3.166 0-6.364.032-9.53h2.628v15.42h-2.406c-.063-.507-.158-1.552-.222-2.09a7.509 7.509 0 0 1-8.707 1.741c-1.836-.823-2.438-2.976-2.438-4.813-.127-3.451-.032-6.871-.063-10.29" fill="#35a8e1" data-name="Path 188" transform="translate(306.87 -1028.443)"/>
+        </g>
+    </g>
+</svg>
diff --git a/landing-pages/site/assets/icons/dish-logo.svg b/landing-pages/site/assets/icons/dish-logo.svg
new file mode 100644
index 0000000..7468e84
--- /dev/null
+++ b/landing-pages/site/assets/icons/dish-logo.svg
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="Group_682" width="139.55" height="60.25" data-name="Group 682" viewBox="0 0 139.55 60.25">
+    <path id="Path_624" d="M298.423 157.971c0 6.651 4.875 9.953 10.306 13.021l4.842 2.753c2.637 1.485 3.816 3.165 3.816 5.442 0 3.016-2.227 4.891-5.81 4.891-6.606 0-8.593-5.49-9.668-10.862l-.166-.835h-3.234V187.5h2.512l.31-.349c.581-.654.581-.654 1.143-.654a15.716 15.716 0 0 1 3.666.6 26.522 26.522 0 0 0 6.022.9c5.464 0 13.159-3.665 13.159-11.814 0-5.685-3.4-8.232-7.518-10.75l-9.033-5.352a5.589 5.589 0 0 1-3.081-5.036c0-1.762 1.412-4.385 5.305-4.385 2.891 0 6.446 1.074 8.251 9.45l.18.824 [...]
+    <path id="Path_625" d="M36.892 109.727c0-10.7 5.02-14.493 9.319-14.493a7.619 7.619 0 0 1 7.559 7.811V121.6c-.574 2.394-3.258 4.132-6.391 4.132-4.836 0-10.486-4.2-10.486-16m24.438-37.591l-.27.1c-1.5.537-7.409 2.472-12.176 3.646l-.8.2v3.312l1.148-.12c2.676-.275 3.69.074 4.069.416.439.4.462 1.2.462 2.472V93.3a12.647 12.647 0 0 0-7.81-2.492A17.162 17.162 0 0 0 33 97.353a23.779 23.779 0 0 0-5.38 15.047c0 19.2 14.582 19.753 16.246 19.753a13.586 13.586 0 0 0 9.9-3.729v2.962l1.2.9 13.5-4.775 [...]
+    <path id="Path_626" d="M440.946 127.855c-3.677-.649-4.152-.738-4.152-6.078v-16.791c0-9.5-3.809-14.323-11.312-14.323a15.084 15.084 0 0 0-11.238 5.192V72.736l-1.375-.824-.13.056-.354.142c-1.762.724-8.6 2.765-11.744 3.641l-.762.209v3.294l1.157-.128a16.11 16.11 0 0 1 1.974-.079 2.258 2.258 0 0 1 1.639.483 3.589 3.589 0 0 1 .5 2.437v39.643c0 5.337-.332 5.8-4.411 6.233l-.939.1v3.231h19.369v-3.314l-.169-.016c-3.742-.4-4.748-.508-4.748-6.152V101.9c.469-.58 3.91-4.64 8.142-4.64 3.673 0 5.309  [...]
+    <path id="Path_627" d="M208.269 279.768c6.39 0 9.617-3.694 11.889-8.07.151-.288.034-.488-.257-.354a25.2 25.2 0 0 1-23.265 0c-.289-.133-.408.067-.257.354 2.272 4.377 5.5 8.07 11.889 8.07" fill="#e50034" fill-rule="evenodd" data-name="Path 627" transform="translate(-153.993 -221.253)"/>
+    <path id="Path_628" d="M206.6 229.682c1.76 3.414 4.291 6.393 9.337 6.393s7.577-2.98 9.336-6.393c.118-.229.024-.4-.222-.294a20.989 20.989 0 0 1-18.228 0c-.246-.107-.343.065-.224.294" fill="#e50034" fill-rule="evenodd" data-name="Path 628" transform="translate(-161.657 -189.83)"/>
+    <path id="Path_629" d="M215.956 191.162c1.3 2.536 3.186 4.855 7 4.855s5.705-2.32 7-4.855c.09-.175.014-.322-.192-.236a17.457 17.457 0 0 1-13.612 0c-.2-.086-.283.062-.194.236" fill="#e50034" fill-rule="evenodd" data-name="Path 629" transform="translate(-168.68 -161.023)"/>
+    <path id="Path_630" d="M229.555 158.393c2.656 0 3.949-1.706 4.8-3.41.064-.128 0-.248-.166-.185a15.213 15.213 0 0 1-9.272 0c-.169-.063-.229.057-.165.185.853 1.7 2.144 3.41 4.8 3.41" fill="#e50034" fill-rule="evenodd" data-name="Path 630" transform="translate(-175.279 -133.965)"/>
+    <path id="Path_631" d="M214.968 79.092a7.275 7.275 0 1 1 7.275 7.275 7.277 7.277 0 0 1-7.275-7.275" fill="#e50034" data-name="Path 631" transform="translate(-167.967 -71.813)"/>
+    <g id="Group_674" data-name="Group 674" transform="translate(136.411 56.162)">
+        <path id="Path_632" d="M576.085 299.279l.511.784h-.3l-.474-.774h-.313v.774h-.27v-1.785h.681c.422 0 .631.155.631.508a.466.466 0 0 1-.466.493zm-.255-.219c.232 0 .434-.017.434-.29 0-.223-.2-.264-.39-.264h-.368v.555z" fill="#e50034" data-name="Path 632" transform="translate(-574.261 -297.624)"/>
+        <path id="Path_633" d="M574.488 297.214a1.57 1.57 0 1 1-1.565-1.544 1.547 1.547 0 0 1 1.565 1.544zm-.311 0a1.258 1.258 0 1 0-1.254 1.293 1.251 1.251 0 0 0 1.255-1.293z" fill="#e50034" data-name="Path 633" transform="translate(-571.349 -295.67)"/>
+    </g>
+</svg>
diff --git a/landing-pages/site/assets/icons/linkedin.svg b/landing-pages/site/assets/icons/linkedin.svg
new file mode 100644
index 0000000..eaa8cd0
--- /dev/null
+++ b/landing-pages/site/assets/icons/linkedin.svg
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30">
+    <g id="Group_699" data-name="Group 699" transform="translate(1366.519 -1377.435)">
+        <circle id="Ellipse_20" cx="15" cy="15" r="15" data-name="Ellipse 20" transform="translate(-1366.519 1377.434)"
+                fill="#51504f"/>
+        <g id="Group_698" data-name="Group 698" transform="translate(-1357.541 1384.721)">
+            <path id="Path_644"
+                  d="M-1310.279 1424.337a1.272 1.272 0 01-1.376 1.275 1.257 1.257 0 01-1.326-1.275 1.266 1.266 0 011.359-1.276 1.262 1.262 0 011.343 1.276zm-2.635 10.49v-8.208h2.551v8.208z"
+                  fill="#fff" data-name="Path 644" transform="translate(1312.981 -1423.061)"/>
+            <path id="Path_645"
+                  d="M-1284.233 1449.589c0-1.024-.033-1.88-.067-2.618h2.215l.118 1.141h.05a2.948 2.948 0 012.535-1.326c1.678 0 2.937 1.125 2.937 3.542v4.851H-1279v-4.549c0-1.057-.37-1.779-1.293-1.779a1.4 1.4 0 00-1.309.957 1.831 1.831 0 00-.084.638v4.733h-2.551z"
+                  fill="#fff" data-name="Path 645" transform="translate(1288.378 -1443.413)"/>
+        </g>
+    </g>
+</svg>
diff --git a/landing-pages/site/assets/icons/members-icon.svg b/landing-pages/site/assets/icons/members-icon.svg
new file mode 100644
index 0000000..ab7d4ad
--- /dev/null
+++ b/landing-pages/site/assets/icons/members-icon.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="19.805" height="20">
+    <g id="Group_890" data-name="Group 890" transform="translate(-44.086 -41)">
+        <path id="Path_689"
+              d="M87.076 47.7a3.353 3.353 0 1 0-2.362-.974 3.34 3.34 0 0 0 2.362.974zm0-5.957a2.6 2.6 0 1 1-2.6 2.6 2.608 2.608 0 0 1 2.6-2.595z"
+              fill="#707070" data-name="Path 689" transform="translate(-35.934)"/>
+        <path id="Path_690"
+              d="M60.2 95.824a.31.31 0 0 0-.405.018 4.173 4.173 0 0 1-2.856 1.133 4.163 4.163 0 0 1-2.9-1.174.31.31 0 0 0-.406-.023 9.206 9.206 0 0 0-2.773 3.864h-6.016a10.888 10.888 0 0 1 3.171-7.571 4.914 4.914 0 0 0 5.581.467 3.185 3.185 0 0 0-.011.259A3.351 3.351 0 0 0 56.7 96.14c.08.006.16.01.242.01a3.352 3.352 0 1 0-3.056-4.729 4.167 4.167 0 0 1-5.638-.147.31.31 0 0 0-.406-.023c-2.135 1.647-3.621 4.864-3.751 8.608a.516.516 0 0 0 .516.531h5.98a14.242 14.242 0 0 0-.7 4 .516.516 0 0 0 [...]
+              fill="#707070" data-name="Path 690" transform="translate(0 -43.917)"/>
+    </g>
+</svg>
diff --git a/landing-pages/site/assets/icons/twitter.svg b/landing-pages/site/assets/icons/twitter.svg
new file mode 100644
index 0000000..70c9d2e
--- /dev/null
+++ b/landing-pages/site/assets/icons/twitter.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30"><g data-name="Group 697" transform="translate(1602.745 -1383.371)"><circle cx="15" cy="15" r="15" data-name="Ellipse 19" transform="translate(-1602.745 1383.371)" fill="#51504f"/><g data-name="Logo — FIXED"><path d="M-1590.711 1404.856a9.252 9.252 0 009.312-9.312c0-.14 0-.281-.006-.421a6.667 6.667 0 001.634-1.7 6.638 6.638 0 01-1.883.517 3.293 3.293 0 001.443-1.813 6.5 6.5 0 01-2.081.791 3.267 3.267 0 00-2.387-1.034 3.277 3.2 [...]
diff --git a/landing-pages/src/index.js b/landing-pages/site/assets/scss/_avatar.scss
similarity index 92%
copy from landing-pages/src/index.js
copy to landing-pages/site/assets/scss/_avatar.scss
index 51da6c0..14272a9 100644
--- a/landing-pages/src/index.js
+++ b/landing-pages/site/assets/scss/_avatar.scss
@@ -16,3 +16,9 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+
+.avatar {
+  border-radius: 50%;
+  width: 80px;
+  height: 80px;
+}
diff --git a/landing-pages/site/assets/scss/_list-boxes.scss b/landing-pages/site/assets/scss/_list-boxes.scss
new file mode 100644
index 0000000..f2b54d9
--- /dev/null
+++ b/landing-pages/site/assets/scss/_list-boxes.scss
@@ -0,0 +1,118 @@
+/**
+ * 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 "colors";
+
+$box-margin: 20px;
+
+.list-items {
+  display: flex;
+  flex-wrap: wrap;
+  margin: calc(-1 * #{$box-margin});
+}
+
+.list-item {
+  border: solid 1px $very-light-pink;
+  border-radius: 5px;
+  margin: $box-margin;
+  padding: 30px 10px;
+  width: 270px;
+}
+
+.box-event {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  &.hoverable-icon {
+    svg {
+      filter: grayscale(1);
+      opacity: 0.6;
+      transition: all 0.2s;
+    }
+
+    &:hover {
+      svg {
+        filter: none;
+        opacity: 1;
+      }
+    }
+  }
+
+  &__case-study {
+    padding: 18px 18px 0;
+    justify-content: space-between;
+
+    &--logo {
+      height: 60px;
+    }
+
+    &--quote {
+      font-style: italic;
+      margin: 30px 0 20px;
+      text-align: center;
+    }
+  }
+
+  &__commiter {
+    &--nick {
+      margin-top: 12px;
+    }
+
+    &--social-media-container {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+    }
+
+    &--social-media-icon {
+      margin: 0 6px;
+    }
+  }
+
+  &__meetup {
+    &--location {
+      margin-bottom: 10px;
+      text-align: center;
+    }
+
+    &--members {
+      margin-bottom: 30px;
+      span {
+        vertical-align: middle;
+      }
+    }
+
+    &--next-meetup {
+      margin-bottom: 20px;
+      text-align: center;
+    }
+  }
+
+  &__integration {
+    justify-content: space-between;
+
+    &--logo {
+      margin-top: 75px;
+    }
+
+    &--name {
+      margin-top: 50px;
+    }
+  }
+}
diff --git a/landing-pages/site/assets/scss/main-custom.scss b/landing-pages/site/assets/scss/main-custom.scss
index f887a63..22a164f 100644
--- a/landing-pages/site/assets/scss/main-custom.scss
+++ b/landing-pages/site/assets/scss/main-custom.scss
@@ -21,3 +21,5 @@
 @import "typography";
 @import "buttons";
 @import "ol-ul";
+@import "list-boxes";
+@import "avatar";
diff --git a/landing-pages/site/data/case_studies.json b/landing-pages/site/data/case_studies.json
new file mode 100644
index 0000000..965e1d1
--- /dev/null
+++ b/landing-pages/site/data/case_studies.json
@@ -0,0 +1,32 @@
+[
+  {
+    "name": "dish",
+    "logo_path": "icons/dish-logo.svg",
+    "quote": "\u201cA great ecosystem and community that comes together to address about any batch data pipeline need.\u201d",
+    "url": ""
+  },
+  {
+    "name": "dish",
+    "logo_path": "icons/dish-logo.svg",
+    "quote": "\u201cA great ecosystem and community that comes together to address about any batch data pipeline need.\u201d",
+    "url": ""
+  },
+  {
+    "name": "dish",
+    "logo_path": "icons/dish-logo.svg",
+    "quote": "\u201cA great ecosystem and community that comes together to address about any batch data pipeline need.\u201d",
+    "url": ""
+  },
+  {
+    "name": "dish",
+    "logo_path": "icons/dish-logo.svg",
+    "quote": "\u201cA great ecosystem and community that comes together to address about any batch data pipeline need.\u201d",
+    "url": ""
+  },
+  {
+    "name": "dish",
+    "logo_path": "icons/dish-logo.svg",
+    "quote": "\u201cA great ecosystem and community that comes together to address about any batch data pipeline need.\u201d",
+    "url": ""
+  }
+]
diff --git a/landing-pages/site/data/commiters.json b/landing-pages/site/data/commiters.json
new file mode 100644
index 0000000..28d0857
--- /dev/null
+++ b/landing-pages/site/data/commiters.json
@@ -0,0 +1,95 @@
+[
+  {
+    "name": "Maxime \u201cMax\u201d Beauchemin",
+    "github": "https://github.com",
+    "image": "/stock-guy.jpg",
+    "linkedin": "https://linkedin.com",
+    "nick": "mistercrunch",
+    "twitter": "https://twitter.com"
+  },
+  {
+    "name": "Maxime \u201cMax\u201d Beauchemin",
+    "github": "https://github.com",
+    "image": "/stock-guy.jpg",
+    "linkedin": "https://linkedin.com",
+    "nick": "mistercrunch",
+    "twitter": "https://twitter.com"
+  },
+  {
+    "name": "Maxime \u201cMax\u201d Beauchemin",
+    "github": "https://github.com",
+    "image": "/stock-guy.jpg",
+    "linkedin": "https://linkedin.com",
+    "nick": "mistercrunch",
+    "twitter": "https://twitter.com"
+  },
+  {
+    "name": "Maxime \u201cMax\u201d Beauchemin",
+    "image": "/stock-guy.jpg",
+    "nick": "mistercrunch"
+  },
+  {
+    "name": "Maxime \u201cMax\u201d Beauchemin",
+    "github": "https://github.com",
+    "image": "/stock-guy.jpg",
+    "linkedin": "https://linkedin.com",
+    "nick": "mistercrunch",
+    "twitter": "https://twitter.com"
+  },
+  {
+    "name": "Maxime \u201cMax\u201d Beauchemin",
+    "github": "https://github.com",
+    "image": "/stock-guy.jpg",
+    "linkedin": "https://linkedin.com",
+    "nick": "mistercrunch",
+    "twitter": "https://twitter.com"
+  },
+  {
+    "name": "Maxime \u201cMax\u201d Beauchemin",
+    "github": "https://github.com",
+    "image": "/stock-guy.jpg",
+    "linkedin": "https://linkedin.com",
+    "nick": "mistercrunch",
+    "twitter": "https://twitter.com"
+  },
+  {
+    "name": "Maxime \u201cMax\u201d Beauchemin",
+    "github": "https://github.com",
+    "image": "/stock-guy.jpg",
+    "linkedin": "https://linkedin.com",
+    "nick": "mistercrunch",
+    "twitter": "https://twitter.com"
+  },
+  {
+    "name": "Maxime \u201cMax\u201d Beauchemin",
+    "github": "https://github.com",
+    "image": "/stock-guy.jpg",
+    "linkedin": "https://linkedin.com",
+    "nick": "mistercrunch",
+    "twitter": "https://twitter.com"
+  },
+  {
+    "name": "Maxime \u201cMax\u201d Beauchemin",
+    "github": "https://github.com",
+    "image": "/stock-guy.jpg",
+    "linkedin": "https://linkedin.com",
+    "nick": "mistercrunch",
+    "twitter": "https://twitter.com"
+  },
+  {
+    "name": "Maxime \u201cMax\u201d Beauchemin",
+    "github": "https://github.com",
+    "image": "/stock-guy.jpg",
+    "linkedin": "https://linkedin.com",
+    "nick": "mistercrunch",
+    "twitter": "https://twitter.com"
+  },
+  {
+    "name": "Maxime \u201cMax\u201d Beauchemin",
+    "github": "https://github.com",
+    "image": "/stock-guy.jpg",
+    "linkedin": "https://linkedin.com",
+    "nick": "mistercrunch",
+    "twitter": "https://twitter.com"
+  }
+]
diff --git a/landing-pages/site/data/integrations.json b/landing-pages/site/data/integrations.json
new file mode 100644
index 0000000..7cd0d0a
--- /dev/null
+++ b/landing-pages/site/data/integrations.json
@@ -0,0 +1,27 @@
+[
+  {
+    "name": "Microsoft Azure",
+    "logo_path": "icons/azure-logo.svg",
+    "url": ""
+  },
+  {
+    "name": "Microsoft Azure",
+    "logo_path": "icons/azure-logo.svg",
+    "url": ""
+  },
+  {
+    "name": "Microsoft Azure",
+    "logo_path": "icons/azure-logo.svg",
+    "url": ""
+  },
+  {
+    "name": "Microsoft Azure",
+    "logo_path": "icons/azure-logo.svg",
+    "url": ""
+  },
+  {
+    "name": "Microsoft Azure",
+    "logo_path": "icons/azure-logo.svg",
+    "url": ""
+  }
+]
diff --git a/landing-pages/site/data/meetups.json b/landing-pages/site/data/meetups.json
new file mode 100644
index 0000000..5492c15
--- /dev/null
+++ b/landing-pages/site/data/meetups.json
@@ -0,0 +1,50 @@
+[
+  {
+    "city": "Warsaw",
+    "country": "Poland",
+    "date": "TUE, SEP 24, 6:00 PM",
+    "members": 100
+  },
+  {
+    "city": "Warsaw",
+    "country": "Poland",
+    "date": "TUE, SEP 24, 6:00 PM",
+    "members": 100
+  },
+  {
+    "city": "Warsaw",
+    "country": "Poland",
+    "date": "TUE, SEP 24, 6:00 PM",
+    "members": 100
+  },
+  {
+    "city": "Warsaw",
+    "country": "Poland",
+    "date": "TUE, SEP 24, 6:00 PM",
+    "members": 100
+  },
+  {
+    "city": "Warsaw",
+    "country": "Poland",
+    "date": "TUE, SEP 24, 6:00 PM",
+    "members": 100
+  },
+  {
+    "city": "Warsaw",
+    "country": "Poland",
+    "date": "TUE, SEP 24, 6:00 PM",
+    "members": 100
+  },
+  {
+    "city": "Warsaw",
+    "country": "Poland",
+    "date": "TUE, SEP 24, 6:00 PM",
+    "members": 100
+  },
+  {
+    "city": "Warsaw",
+    "country": "Poland",
+    "date": "TUE, SEP 24, 6:00 PM",
+    "members": 100
+  }
+]
diff --git a/landing-pages/site/layouts/examples/list.html b/landing-pages/site/layouts/examples/list.html
index d3055c9..329a10d 100644
--- a/landing-pages/site/layouts/examples/list.html
+++ b/landing-pages/site/layouts/examples/list.html
@@ -21,9 +21,50 @@
     {{ with .Content }}
         {{ . }}
     {{ end }}
-    <div class="col">
-        {{ partial "buttons/button-filled" (dict "text" "Learn more") }}
-        {{ partial "buttons/button-hollow" (dict "text" "Learn more") }}
-        {{ partial "buttons/button-with-icon" (dict "text" "Suggest a change on this page") }}
+
+    <div style="margin-bottom: 80px;">
+        <div id="events-container" class="list-items">
+            {{ range .Site.Data.meetups }}
+                <div class="list-item">
+                    {{ partial "boxes/event" . }}
+                </div>
+            {{ end }}
+        </div>
+    </div>
+
+    <div style="margin-bottom: 80px;">
+        <div id="integrations-container" class="list-items">
+            {{ range .Site.Data.integrations }}
+                <a class="list-item" href="{{ .url }}">
+                    {{ partial "boxes/integration" . }}
+                </a>
+            {{ end }}
+        </div>
+    </div>
+
+    <div style="margin: 0 auto 80px; max-width: 1200px">
+        <div id="commiters-container" class="list-items">
+            {{ range .Site.Data.commiters }}
+                <div class="list-item">
+                    {{ partial "boxes/commiter" . }}
+                </div>
+            {{ end }}
+        </div>
+        <div style="width: fit-content; margin: 60px auto 0">
+            {{ partial "buttons/button-filled" (dict "text" "Show all" "id" "show-all-commiters")}}
+        </div>
+    </div>
+
+    {{/*
+        TODO: replace json mockdata with case study site metadata
+    */}}
+    <div style="margin: 0 auto 48px; max-width: 1200px">
+        <div id="case-studies-container" class="list-items">
+            {{ range .Site.Data.case_studies }}
+                <a href="{{ .url }}" class="list-item">
+                    {{ partial "boxes/case-study" . }}
+                </a>
+            {{ end }}
+        </div>
     </div>
 {{ end }}
diff --git a/landing-pages/site/layouts/examples/baseof.html b/landing-pages/site/layouts/partials/boxes/case-study.html
similarity index 64%
copy from landing-pages/site/layouts/examples/baseof.html
copy to landing-pages/site/layouts/partials/boxes/case-study.html
index f4831e5..3c5db3e 100644
--- a/landing-pages/site/layouts/examples/baseof.html
+++ b/landing-pages/site/layouts/partials/boxes/case-study.html
@@ -17,21 +17,14 @@
  under the License.
 */}}
 
-<!doctype html>
-<html lang="{{ .Site.Language.Lang }}" class="no-js">
-<head>
-    {{ partial "head.html" . }}
-</head>
-<body class="td-{{ .Kind }}">
-<header>
-    {{ partial "navbar.html" . }}
-</header>
-<div class="container-fluid td-default td-outer">
-    <main role="main" class="td-main">
-        {{ block "main" . }}{{ end }}
-    </main>
-    {{ partial "footer.html" . }}
+
+<div class="box-event box-event__case-study hoverable-icon">
+    <div class="box-event__case-study--logo">
+        {{ with resources.Get .logo_path }}
+            {{ .Content | safeHTML }}
+        {{ end }}
+    </div>
+    <p class="bodytext__xsmall--brownish box-event__case-study--quote"
+       >{{ .quote }}</p>
+    {{ partial "buttons/button-hollow" (dict "text" "Learn more")}}
 </div>
-{{ partialCached "scripts.html" . }}
-</body>
-</html>
diff --git a/landing-pages/site/layouts/partials/boxes/commiter.html b/landing-pages/site/layouts/partials/boxes/commiter.html
new file mode 100644
index 0000000..73274fa
--- /dev/null
+++ b/landing-pages/site/layouts/partials/boxes/commiter.html
@@ -0,0 +1,51 @@
+{{/*
+ 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.
+*/}}
+
+{{ $iconScratch := newScratch }}
+<div class="box-event">
+    <img src="{{ .image }}" alt="Commiter {{ .name }}" class="avatar"/>
+    <p class="box-event__commiter--nick">@{{ .nick }}</p>
+    <p class="bodytext__medium--brownish-grey">{{ .name }}</p>
+    <div class="box-event__commiter--social-media-container">
+        {{ if .github }}
+            {{ $url := .github }}
+            {{ with resources.Get "icons/github.svg" }}
+                <a href="{{ $url }}" class="box-event__commiter--social-media-icon">
+                    {{ .Content | safeHTML }}
+                </a>
+            {{ end }}
+        {{ end }}
+        {{ if .twitter }}
+            {{ $url := .twitter }}
+            {{ with resources.Get "icons/twitter.svg" }}
+                <a href="{{ $url }}" class="box-event__commiter--social-media-icon">
+                    {{ .Content | safeHTML }}
+                </a>
+            {{ end }}
+        {{ end }}
+        {{ if .linkedin }}
+            {{ $url := .linkedin }}
+            {{ with resources.Get "icons/linkedin.svg" }}
+                <a href="{{ $url }}" class="box-event__commiter--social-media-icon">
+                    {{ .Content | safeHTML }}
+                </a>
+            {{ end }}
+        {{ end }}
+    </div>
+</div>
diff --git a/landing-pages/site/layouts/examples/baseof.html b/landing-pages/site/layouts/partials/boxes/event.html
similarity index 56%
rename from landing-pages/site/layouts/examples/baseof.html
rename to landing-pages/site/layouts/partials/boxes/event.html
index f4831e5..0223f88 100644
--- a/landing-pages/site/layouts/examples/baseof.html
+++ b/landing-pages/site/layouts/partials/boxes/event.html
@@ -17,21 +17,18 @@
  under the License.
 */}}
 
-<!doctype html>
-<html lang="{{ .Site.Language.Lang }}" class="no-js">
-<head>
-    {{ partial "head.html" . }}
-</head>
-<body class="td-{{ .Kind }}">
-<header>
-    {{ partial "navbar.html" . }}
-</header>
-<div class="container-fluid td-default td-outer">
-    <main role="main" class="td-main">
-        {{ block "main" . }}{{ end }}
-    </main>
-    {{ partial "footer.html" . }}
+
+<div class="box-event">
+    <p class="bodytext__medium--blue box-event__meetup--location">
+        {{ .city }}<br/>{{ .country }}
+    </p>
+    <p class="bodytext__xsmall--brownish box-event__meetup--members">
+        {{ with resources.Get "icons/members-icon.svg" }}
+            {{ .Content | safeHTML }}
+        {{ end }}
+        <span>{{ .members }} members</span>
+    </p>
+    <p class="bodytext__xsmall--blue box-event__meetup--next-meetup">Next meetup:<br><span
+                class="bodytext__xsmall--greyish">{{ .date }}</span></p>
+    {{ partial "buttons/button-hollow" (dict "text" "Learn more") }}
 </div>
-{{ partialCached "scripts.html" . }}
-</body>
-</html>
diff --git a/landing-pages/site/layouts/partials/buttons/button-filled.html b/landing-pages/site/layouts/partials/boxes/integration.html
similarity index 71%
copy from landing-pages/site/layouts/partials/buttons/button-filled.html
copy to landing-pages/site/layouts/partials/boxes/integration.html
index ebe64a1..4b00ac8 100644
--- a/landing-pages/site/layouts/partials/buttons/button-filled.html
+++ b/landing-pages/site/layouts/partials/boxes/integration.html
@@ -17,4 +17,12 @@
  under the License.
 */}}
 
-<button class="btn-filled bodytext__xsmall--white">{{ .text }}</button>
+
+<div class="box-event box-event__integration hoverable-icon">
+    <div class="box-event__integration--logo">
+        {{ with resources.Get .logo_path }}
+            {{ .Content | safeHTML }}
+        {{ end }}
+    </div>
+    <span class="bodytext__small box-event__integration--name">{{ .name }}</span>
+</div>
diff --git a/landing-pages/site/layouts/partials/buttons/button-filled.html b/landing-pages/site/layouts/partials/buttons/button-filled.html
index ebe64a1..37af82d 100644
--- a/landing-pages/site/layouts/partials/buttons/button-filled.html
+++ b/landing-pages/site/layouts/partials/buttons/button-filled.html
@@ -17,4 +17,4 @@
  under the License.
 */}}
 
-<button class="btn-filled bodytext__xsmall--white">{{ .text }}</button>
+<button id="{{ .id }}" class="btn-filled bodytext__xsmall--white">{{ .text }}</button>
diff --git a/landing-pages/site/static/stock-guy.jpg b/landing-pages/site/static/stock-guy.jpg
new file mode 100644
index 0000000..bbb2f59
Binary files /dev/null and b/landing-pages/site/static/stock-guy.jpg differ
diff --git a/landing-pages/src/index.js b/landing-pages/src/index.js
index 51da6c0..f7e4475 100644
--- a/landing-pages/src/index.js
+++ b/landing-pages/src/index.js
@@ -16,3 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+
+import {showAllCommiters} from "./js/showAllCommiters";
+
+showAllCommiters(8);
diff --git a/landing-pages/site/assets/scss/main-custom.scss b/landing-pages/src/js/showAllCommiters.js
similarity index 54%
copy from landing-pages/site/assets/scss/main-custom.scss
copy to landing-pages/src/js/showAllCommiters.js
index f887a63..1859b01 100644
--- a/landing-pages/site/assets/scss/main-custom.scss
+++ b/landing-pages/src/js/showAllCommiters.js
@@ -17,7 +17,22 @@
  * under the License.
  */
 
-@import "accordion";
-@import "typography";
-@import "buttons";
-@import "ol-ul";
+export const showAllCommiters = (initialChildrenCount) => {
+  const container = window.document.getElementById("commiters-container");
+  const button = window.document.getElementById("show-all-commiters");
+
+  if (container.childElementCount <= initialChildrenCount) return;
+
+  button.style.display = "block";
+  const hiddenChildren = Array.from(container.children)
+    .slice(initialChildrenCount, container.childElementCount)
+    .map((child) => {
+      child.style.display = "none";
+      return child;
+    });
+
+  button.addEventListener("click", () => {
+    hiddenChildren.forEach((child) => child.style.display = "block");
+    button.style.display = "none";
+  });
+};