feat: add a placeholder video to the homepage (#23)

* feat: add a placeholder video to the homepage

* fix: make iframe responsive

* fix: make caption i18n friendly

ckanext/zarr/assets/css/zarr.css

@@ -31,6 +31,21 @@
 
 }
 
+.homepage .hero .insights figure {
+    margin-top: 20px;
+    width: 560px;
+    max-width: 100%;
+}
+
+.homepage .hero .insights figure iframe {
+    width: 100%;
+}
+
+.homepage .hero .insights figcaption {
+    margin-left: 15px;
+    width: 90%;
+}
+
 .promoted-background {
     background-color: #13240F;
 }
@@ -286,4 +301,4 @@
     margin-top: 20px;
     color: var(--primary);
 }
-/* about */
+/* about */

ckanext/zarr/assets/css/zarr_palette.css

@@ -29,9 +29,6 @@
     /* promoted background color */
     --promoted-background-color: #13240F;
     /* insights */
-    --show-insights-title-display: none;  /* set to block to show */
-    --upper-container-display: none;  /* set to flex to show */
-    --upper-container-display-mobile: none; /* set to block to show */
     --lower-container-display: flex;  /* set to flex to show */
     --after-insights-min-height: 400px;
     /* masthead */

ckanext/zarr/templates/home/snippets/insights.html

@@ -1,7 +1,16 @@
 {% ckan_extends %}
 
-{% block bottom_container_left_label %}{{ _('Section title') }}{% endblock %}
+{% block top_container_title %}{{ _('Find out more about the repository') }}{% endblock %}
 
-{% block bottom_container_left_content_label %}{{ _('Indicators') }}{% endblock %}
+{% block top_container %}
+    <div class="row insight-row insights-upper-item">
+        <div class="d-flex justify-content-center">
+            <figure class="figure">
+                <iframe class="figure-img" width="560" height="315" src="https://www.youtube.com/embed/BzhjEphkQzQ?si=tLJ2xcxEjxIQvOIA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+                <figcaption class="figure-caption">{{ _('[Coming Soon] Watch this video to find out more about the Zambia Research and Evaluation Repository') }}</figcaption>
+            </figure>
+        </div>
+    </div>
+{% endblock %}
 
-{% block bottom_container_right_label %}Data hub stats{% endblock %}
+{% block bottom_container %}{% endblock bottom_container %}