From f9601c70fcc170198351fe8eb0a5dd3fc8faa82e Mon Sep 17 00:00:00 2001
From: Thomas Smith <49042513+tsmitty11@users.noreply.github.com>
Date: Wed, 15 Mar 2023 18:26:51 -0400
Subject: [PATCH] Add Video of Max at Web Summit (#293)

* Add video player to 'www'

* Switch to YouTube embed + spacing

* Unnecessary script

* Added image back, moved video to section below

* Change copy, forgot to add responsive columns

* Change elipses and capitalize Homebrew

* apostrophes are elipses
---
 src/layouts/index.html              | 27 +++++++++++++++++++++++++--
 src/layouts/partials/max-video.html | 11 +++++++++++
 2 files changed, 36 insertions(+), 2 deletions(-)
 create mode 100644 src/layouts/partials/max-video.html

diff --git a/src/layouts/index.html b/src/layouts/index.html
index 5ee07b1..410a019 100644
--- a/src/layouts/index.html
+++ b/src/layouts/index.html
@@ -722,18 +722,41 @@
 <section>
   <div class="container two-boxes-down">
     <div class="row">
-      <div class="col-xl-7 col-lg-7 col-md-6 col-sm-12 col-12 order-xl-1 order-lg-1 order-md-1 order-sm-2 order-2 my-auto">
+      <div class="col-xl-7 col-lg-7 col-md-6 col-sm-12 col-12 order-xl-2 order-lg-2 order-md-2 order-sm-2 order-2 my-auto ps-xl-4 ps-lg-4">
         <h2 class="display-5">A mission to fix open-source development</h2>
         <p class="lead"><span class="tea">tea</span> is one of the first legitimate use cases for blockchain technology. Just as the US dollar was once backed by gold, we're building an economy that's backed <em>by code</em>.</p>
         <p>We want to fix one of tech’s biggest problems: hardworking developers <i>not</i> getting compensated for their contributions to the building blocks of the internet. By leveraging blockchain technology we can keep track of who creates & maintains what, remunerate them for their efforts with <span class="tea">tea</span> tokens, and keep FAANG corporations from building empires atop unpaid labor.</p>
       </div>
-      <div class="col-xl-5 col-lg-5 col-md-6 col-sm-12 col-12 order-xl-2 order-lg-2 order-md-2 order-sm-1 order-1 mb-4">
+      <div class="col-xl-5 col-lg-5 col-md-6 col-sm-12 col-12 order-xl-1 order-lg-1 order-md-1 order-sm-1 order-1 mb-4">
         <img src="/Images/horizon-illustration.png" class="horizon-img" alt="Over the horizon" style="border-radius:10px; width:100%;">
       </div>
     </div>
   </div>
 </section>
 
+
+<section class="purple-bg">
+  <div class="container two-boxes">
+    <div class="row">
+      <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 my-auto">
+        <h3 class="display-6 white">But videos are better than words… listen to our CEO, <a class="link-purple-bg" href="https://twitter.com/mxcl">Max</a> (creator of <a class="link-purple-bg" href="https://brew.sh/">Homebrew</a>), talk about <span class="tea">tea</span>&#39;s grand mission @ Web Summit 2022.</h3>
+        <p>If this talk gets you as excited about what <span class="tea">tea</span>&#39;s doing as it did us, then you should definitely head over to our GitHub repo and <a class="link-purple-bg" href="https://docs.tea.xyz/getting-started">install <span class="tea">tea</span></a> (if you haven&#39;t already). If you have… well, good on ya… have a cookie.</p>
+      </div>
+      <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 mt-xl-0 mt-lg-0 mt-md-0 mt-sm-4 mt-4">
+        {{- partial "max-video.html" . -}}
+      </div>
+    </div>
+  </div>
+</section>
+
+<style>
+
+  .link-purple-bg:hover{
+    color:#1a1a1a;
+  }
+
+</style>
+
 <script>
 
   var contributorsList = $("#contributors-list");
diff --git a/src/layouts/partials/max-video.html b/src/layouts/partials/max-video.html
new file mode 100644
index 0000000..c5dfb51
--- /dev/null
+++ b/src/layouts/partials/max-video.html
@@ -0,0 +1,11 @@
+<iframe width="100%" height="400" src="https://www.youtube.com/embed/xiq5euezOEQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+
+<style>
+  iframe{
+    border-radius: 5px;
+    max-width: 700px;
+    margin-left:auto;
+    margin-right:auto;
+    display: block;
+  }
+</style>