Bulma v9 website (#3249)

* Add Bulma v9

* Add vendor dependencies

* Fix native

* Fix sponsors

* Add style attribute

docs/_includes/index/modifiers.html

@@ -1,23 +1,28 @@
 {% assign modifiers_link = site.data.links.by_id['modifiers-syntax'] %}
+{% assign heading_href = site.url | append: modifiers_link.path %}
+
+<section class="bd-index-section">
+  {%
+    include components/heading.html
+    color="primary"
+    icon="fas fa-graduation-cap"
+    title="So <strong>easy</strong> to learn"
+    subtitle="Get a design <strong>started</strong> within <strong>minutes</strong>"
+    href=heading_href
+    button_icon_after="fas fa-arrow-right"
+    button_label="See <strong>modifiers</strong> syntax"
+  %}
 
-<section class="bd-easy section is-medium">
   <div class="container">
     <div class="columns is-vcentered">
-      <div class="column">
-        <header class="bd-index-header bd-is-left">
-          <h3 class="title is-3">
-            <a href="{{ site.url }}{{ modifiers_link.path }}">
-              So <strong>easy</strong> to learn
-            </a>
-          </h3>
-          <h4 class="subtitle is-4">
-            Get a design started within minutes
-          </h4>
-        </header>
-
-        {% include elements/tw.html tweet_id="868829487072464897"
-        modifier='bd-is-grey' drawing_id='crazy' drawing_width=108
-        drawing_height=48 %}
+      <div class="column is-size-5-desktop">
+        {%
+          include elements/tw.html
+          tweet_id="868829487072464897"
+          drawing_id='crazy'
+          drawing_width=108
+          drawing_height=48
+        %}
       </div>
 
       <div class="column">
@@ -55,9 +60,5 @@
         </div>
       </div>
     </div>
-
-    {% include components/hero-buttons.html href=modifiers_link.path
-    content="<span>Learn the <strong>modifiers syntax</strong></span
-    >" %}
   </div>
 </section>