Add wave-style hero, 100K promo, timeline card.

1 files changed, 56 insertions, 2 deletions

diff --git a/pydis_site/templates/home/index.html b/pydis_site/templates/home/index.html
index f31363a4..04ad4465 100644
--- a/pydis_site/templates/home/index.html
+++ b/pydis_site/templates/home/index.html
@@ -9,6 +9,35 @@
 {% block content %}
   {% include "base/navbar.html" %}
 
+  <section class="section main-head is-hidden-touch">
+      <div class="container is-spaced above-waves">
+        <div class="columns">
+          <div class="column is-half">
+            <div class="aspect-wrapper">
+              <iframe
+              class="welcome-video aspect-content"
+              src="https://www.youtube.com/embed/ZH26PuX3re0"
+              srcdoc="<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:68px/1.5 sans-serif;color:#FFFFFFEE;text-shadow:0 0 0.1em #00000020}</style><a href=https://www.youtube.com/embed/ZH26PuX3re0?autoplay=1><img src=https://i.ytimg.com/vi/ZH26PuX3re0/maxresdefault.jpg alt='Welcome to Python Discord'><span>▶</span></a>"
+              frameborder="0"
+              allow="autoplay; accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+              allowfullscreen
+              ></iframe>
+            </div>
+          </div>
+
+          <div class="column is-half hero-card has-text-right">
+              <img src="{% static "images/events/100k.png" %}" alt="100K members!">
+          </div>
+
+        </div>
+
+      </div>
+
+    <div class="wave"></div>
+    <div class="wave"></div>
+    <div class="bottom-wave"></div>
+
+  </section>
   <section class="section">
 
     {# Who are we? #}
@@ -38,8 +67,33 @@
         </div>
 
         {# Right column container #}
-        <div class="column is-half-desktop">
-          <iframe width="560" height="315" src="https://www.youtube.com/embed/ZH26PuX3re0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+        <div class="column is-half-desktop showcase has-text-centered">
+          <div class="box">
+            <p class="title">
+              New Timeline!
+            </p>
+            <div class="mini-timeline">
+              <i class="fa fa-asterisk mtl-item"></i>
+              <i class="fa fa-code mtl-item"></i>
+              <i class="fab fa-python mtl-item"></i>
+              <i class="fa fa-alien-monster mtl-item"></i>
+              <i class="fa fa-duck mtl-item"></i>
+              <i class="fa fa-bug mtl-item"></i>
+            </div>
+            <p class="subtitle">
+              Start from our humble beginnings to discover the events that made our community what it is today.
+            </p>
+            <div class="buttons are-large is-centered">
+              <a href="{% url 'timeline' %}">
+                <button class="button is-primary">
+                  <span>Check it out!</span>
+                  <span class="icon">
+                    <i class="fas fa-arrow-right"></i>
+                  </span>
+                </button>
+              </a>
+            </div>
+          </div>
         </div>
       </div>