Merge pull request #11515 from MozillaFoundation/feature/2708-hero

MozFest - 2708 Hero

network-api/networkapi/mozfest/templates/mozfest/mozfest_homepage.html

@@ -10,7 +10,7 @@
 {% block bodyclass %}mozfest {% if banner_video_type %}banner-type-{{ banner_video_type }}{% endif %}{% endblock %}
 
 {% block hero_guts %}
-    {% include "partials/primary_heroguts.html" with root=root page=page homepage=True banner_video_type=banner_video_type %}
+    {% include "partials/primary_hero.html" with page=page %}
 {% endblock %}
 
 {% block bootstrap_width %}col-lg-12{% endblock %}

network-api/networkapi/mozfest/templates/mozfest/mozfest_landing_page.html

@@ -0,0 +1,20 @@
+{% extends "./mozfest-base.html" %}
+{% load wagtailcore_tags mofo_common %}
+
+{% block page_title %}
+    {% environment_prefix %}
+    {{ page.title }}
+{% endblock page_title %}
+
+{% block mozfest_body_id %}landing-page{% endblock mozfest_body_id %}
+{% block bodyclass %}mozfest{% endblock bodyclass %}
+
+{% block hero_guts %}
+    {% include "partials/primary_hero.html" with page=page %}
+{% endblock hero_guts %}
+
+{% block bootstrap_width %}col-lg-12{% endblock bootstrap_width %}
+
+{% block footer_block %}
+    {% include "partials/mozfest_footer.html" %}
+{% endblock footer_block %}

network-api/networkapi/mozfest/templates/partials/primary_hero.html

@@ -0,0 +1,19 @@
+{% load wagtailimages_tags %}
+
+{% image page.hero_image fill-1500x620 as hero_image %}
+<div class="tw-relative tw-dark tw-w-full tw-h-[470px] large:tw-h-[620px] tw-bg-center tw-bg-cover" style="background-image:url('{{ hero_image.url }}')">
+    <div class="tw-bg-gradient-to-t tw-from-black tw-via-black tw-via-30% tw-to-festival-purple-200 tw-inset-0 tw-absolute tw-opacity-80"></div>
+    <div class="container">
+        <div class="tw-row">
+            <div class="tw-px-8 tw-absolute tw-w-full tw-bottom-12 large:tw-w-6/12 large:tw-bottom-24">
+                <p class="tw-bg-blue-05 tw-inline-block tw-text-black tw-text-sm tw-uppercase tw-py-3 tw-px-6 tw-rounded-3xl">
+                    <span>1st-3rd June 2024</span>
+                    <span>| Maldives</span>
+                </p>
+                <h1 class="tw-h1-heading">MozFest House: 2024</h1>
+                <p class="tw-body-large">Dedicated to creating a healthier and more inclusive internet.</p>
+                <a class="tw-btn-secondary" href="#">Get your tickets</a>
+            </div>
+        </div>
+    </div>
+</div>

network-api/networkapi/mozfest/templates/partials/primary_heroguts.html

@@ -1,20 +1,10 @@
 {% load wagtailcore_tags wagtailimages_tags %}
 
 <div id="hero">
-    {% if homepage %}
-        {% if page.banner_carousel %}
-            {# Hero with carousel and featured video below #}
-            {% include "fragments/hero/carousel_hero.html" with page=page banner_video_type=banner_video_type %}
-        {% else %}
-            {# Hero with hardcoded video as background #}
-            {% include "fragments/hero/hardcoded_video_hero.html" with page=page banner_video_type=banner_video_type %}
-        {% endif %}
-    {% else %}
-        <div class="banner">
-            {% include "fragments/hero/normal.html" with page=page %}
-        </div>
-        {% include "partials/intro_section.html" %}
-    {% endif %}
+    <div class="banner">
+        {% include "fragments/hero/normal.html" with page=page %}
+    </div>
+    {% include "partials/intro_section.html" %}
 
     {% if singleton_page == True %}
         {% include "partials/intro_and_content_divider.html" with wrapper_class="d-md-none" %}

tailwind.config.js

@@ -230,6 +230,7 @@ module.exports = {
         },
         purple: {
           100: "#fa00ff",
+          200: "#8e769d"
         },
       },
       "dear-internet": {