From 879b7557270adf4b646b5515266cf6e4ba9176ab Mon Sep 17 00:00:00 2001
From: danielfmiranda <manieldiranda@gmail.com>
Date: Thu, 28 Mar 2024 14:19:30 -0700
Subject: [PATCH 01/20] backend first pass

---
 .../migrations/0133_appinstallpage.py         | 92 +++++++++++++++++++
 network-api/networkapi/wagtailpages/models.py |  1 +
 .../wagtailpages/pagemodels/app_install.py    | 91 ++++++++++++++++++
 .../wagtailpages/pagemodels/base.py           |  1 +
 .../wagtailpages/pagemodels/campaigns.py      |  1 +
 5 files changed, 186 insertions(+)
 create mode 100644 network-api/networkapi/wagtailpages/migrations/0133_appinstallpage.py
 create mode 100644 network-api/networkapi/wagtailpages/pagemodels/app_install.py

diff --git a/network-api/networkapi/wagtailpages/migrations/0133_appinstallpage.py b/network-api/networkapi/wagtailpages/migrations/0133_appinstallpage.py
new file mode 100644
index 00000000000..5d75b58f195
--- /dev/null
+++ b/network-api/networkapi/wagtailpages/migrations/0133_appinstallpage.py
@@ -0,0 +1,92 @@
+# Generated by Django 4.2.11 on 2024-03-28 21:19
+
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("wagtailimages", "0025_alter_image_file_alter_rendition_file"),
+        ("wagtailpages", "0132_make_link_to_required_in_link_block"),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name="AppInstallPage",
+            fields=[
+                (
+                    "campaignpage_ptr",
+                    models.OneToOneField(
+                        auto_created=True,
+                        on_delete=django.db.models.deletion.CASCADE,
+                        parent_link=True,
+                        primary_key=True,
+                        serialize=False,
+                        to="wagtailpages.campaignpage",
+                    ),
+                ),
+                ("hero_heading", models.CharField(help_text="Hero story headline", max_length=80)),
+                ("hero_subheading", models.CharField(blank=True, help_text="Hero story subheadline", max_length=80)),
+                (
+                    "hero_video",
+                    models.URLField(
+                        blank=True,
+                        help_text="To find embed link: go to your YouTube video and click “Share,” then “Embed,” and then copy and paste the provided URL only. For example: https://www.youtube.com/embed/3FIVXBawyQw.",
+                        null=True,
+                    ),
+                ),
+                (
+                    "button1_text",
+                    models.CharField(blank=True, help_text="Text for Button 1", max_length=50, null=True),
+                ),
+                (
+                    "button1_download_link",
+                    models.URLField(blank=True, help_text="Download link for Button 1", max_length=255, null=True),
+                ),
+                (
+                    "button2_text",
+                    models.CharField(blank=True, help_text="Text for Button 2", max_length=50, null=True),
+                ),
+                (
+                    "button2_download_link",
+                    models.URLField(blank=True, help_text="Download link for Button 2", max_length=255, null=True),
+                ),
+                (
+                    "button1_image",
+                    models.ForeignKey(
+                        blank=True,
+                        help_text="Image for Button 1",
+                        null=True,
+                        on_delete=django.db.models.deletion.SET_NULL,
+                        related_name="+",
+                        to="wagtailimages.image",
+                    ),
+                ),
+                (
+                    "button2_image",
+                    models.ForeignKey(
+                        blank=True,
+                        help_text="Image for Button 2",
+                        null=True,
+                        on_delete=django.db.models.deletion.SET_NULL,
+                        related_name="+",
+                        to="wagtailimages.image",
+                    ),
+                ),
+                (
+                    "hero_background",
+                    models.ForeignKey(
+                        help_text="Background image for the hero section",
+                        on_delete=django.db.models.deletion.PROTECT,
+                        related_name="+",
+                        to="wagtailimages.image",
+                    ),
+                ),
+            ],
+            options={
+                "abstract": False,
+            },
+            bases=("wagtailpages.campaignpage",),
+        ),
+    ]
diff --git a/network-api/networkapi/wagtailpages/models.py b/network-api/networkapi/wagtailpages/models.py
index bccbd890a7c..1c9247cd62c 100644
--- a/network-api/networkapi/wagtailpages/models.py
+++ b/network-api/networkapi/wagtailpages/models.py
@@ -14,6 +14,7 @@
     PrimaryPage,
     Styleguide,
 )
+from .pagemodels.app_install import AppInstallPage
 from .pagemodels.blog.blog import BlogAuthors, BlogPage, RelatedBlogPosts
 from .pagemodels.blog.blog_index import BlogIndexPage
 from .pagemodels.blog.blog_topic import BlogPageTopic
diff --git a/network-api/networkapi/wagtailpages/pagemodels/app_install.py b/network-api/networkapi/wagtailpages/pagemodels/app_install.py
new file mode 100644
index 00000000000..d53d4976e6b
--- /dev/null
+++ b/network-api/networkapi/wagtailpages/pagemodels/app_install.py
@@ -0,0 +1,91 @@
+from django.db import models
+from wagtail.models import Page
+from wagtail.admin.panels import FieldPanel
+
+from .campaigns import CampaignPage
+
+
+class AppInstallPage(CampaignPage):
+    hero_heading = models.CharField(
+        max_length=80,
+        help_text="Hero story headline",
+    )
+    hero_subheading = models.CharField(
+        max_length=80,
+        blank=True,
+        help_text="Hero story subheadline",
+    )
+    hero_background =  models.ForeignKey(
+        'wagtailimages.Image',
+        on_delete=models.PROTECT,
+        related_name='+',
+        help_text="Background image for the hero section"
+    )
+    hero_video = models.URLField(
+        null=True,
+        blank=True,
+        help_text="To find embed link: go to your YouTube video and click “Share,” then “Embed,” and then copy and paste the provided URL only. For example: https://www.youtube.com/embed/3FIVXBawyQw."
+    )
+    button1_text = models.CharField(
+        max_length=50,
+        help_text="Text for Button 1",
+        null=True,
+        blank=True,
+    )
+    button1_download_link = models.URLField(
+        max_length=255,
+        help_text="Download link for Button 1",
+        null=True,
+        blank=True,
+    )
+    button1_image = models.ForeignKey(
+        'wagtailimages.Image',
+        null=True,
+        blank=True,
+        on_delete=models.SET_NULL,
+        related_name='+',
+        help_text="Image for Button 1",
+    )
+    button2_text = models.CharField(
+        max_length=50,
+        help_text="Text for Button 2",
+        null=True,
+        blank=True,
+    )
+    button2_image = models.ForeignKey(
+        'wagtailimages.Image',
+        null=True,
+        blank=True,
+        on_delete=models.SET_NULL,
+        related_name='+',
+        help_text="Image for Button 2",
+    )
+    button2_download_link = models.URLField(
+        max_length=255,
+        help_text="Download link for Button 2",
+        null=True,
+        blank=True,
+    )
+
+    content_panels = CampaignPage.content_panels + [
+        FieldPanel('hero_heading'),
+        FieldPanel('hero_subheading'),
+        FieldPanel('hero_background'),
+        FieldPanel('hero_video'),
+        FieldPanel('button1_text'),
+        FieldPanel('button1_image'),
+        FieldPanel('button1_download_link'),
+        FieldPanel('button2_text'),
+        FieldPanel('button2_image'),
+        FieldPanel('button2_download_link'),
+    ]
+
+    subpage_types = [
+        "BanneredCampaignPage",
+        "OpportunityPage",
+    ]
+
+    parent_page_types = [
+        "BanneredCampaignPage",
+        "Homepage"
+    ]
diff --git a/network-api/networkapi/wagtailpages/pagemodels/base.py b/network-api/networkapi/wagtailpages/pagemodels/base.py
index aeb43066548..b40e7c67d70 100644
--- a/network-api/networkapi/wagtailpages/pagemodels/base.py
+++ b/network-api/networkapi/wagtailpages/pagemodels/base.py
@@ -959,6 +959,7 @@ def get_banner(self):
     ]
 
     subpage_types = [
+        "AppInstallPage",
         "BanneredCampaignPage",
         "BlogIndexPage",
         "CampaignIndexPage",
diff --git a/network-api/networkapi/wagtailpages/pagemodels/campaigns.py b/network-api/networkapi/wagtailpages/pagemodels/campaigns.py
index 54ca2608d4c..fc2d3953472 100644
--- a/network-api/networkapi/wagtailpages/pagemodels/campaigns.py
+++ b/network-api/networkapi/wagtailpages/pagemodels/campaigns.py
@@ -427,6 +427,7 @@ class BanneredCampaignPage(PrimaryPage):
     ]
 
     subpage_types = [
+        "AppInstallPage",
         "BanneredCampaignPage",
         "PublicationPage",
         "OpportunityPage",

From 9ef91daba5d20b2eeaf95cca21dd918baedef62c Mon Sep 17 00:00:00 2001
From: danielfmiranda <manieldiranda@gmail.com>
Date: Thu, 28 Mar 2024 14:32:06 -0700
Subject: [PATCH 02/20] frontend templates first pass

---
 .../wagtailpages/app_install_hero.html        | 46 +++++++++++++++++++
 .../wagtailpages/app_install_page.html        |  6 +++
 2 files changed, 52 insertions(+)
 create mode 100644 network-api/networkapi/wagtailpages/templates/wagtailpages/app_install_hero.html
 create mode 100644 network-api/networkapi/wagtailpages/templates/wagtailpages/app_install_page.html

diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/app_install_hero.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/app_install_hero.html
new file mode 100644
index 00000000000..b5cff9cf9f5
--- /dev/null
+++ b/network-api/networkapi/wagtailpages/templates/wagtailpages/app_install_hero.html
@@ -0,0 +1,46 @@
+{% load i18n wagtailcore_tags wagtailimages_tags %}
+{% image page.hero_background original as hero_background %}
+
+<div class="extension-hero tw-py-0 tw-flex medium:tw-py-24 tw-flex-col tw-justify-center tw-h-auto tw-min-h-[25em] medium:tw-h-[65vh] large:tw-h-[75vh] tw-bg-center tw-bg-cover" style="background-image:url('{{ hero_background.url }}')">
+    <div class="tw-px-6 tw-py-24 small:tw-px-24 medium:tw-py-24 large:tw-container large:tw-px-0">
+        <div class="tw-grid tw-gap-x-24 tw-grid-cols-1 tw-px-8 medium:tw-grid-cols-2 medium:tw-py-24">
+            <div class="tw-flex tw-flex-col tw-justify-center">
+                <h2 class="tw-mb-8 tw-text-white tw-font-zilla tw-font-light tw-text-4xl large:tw-text-5xl">
+                    {{page.hero_heading}}
+                </h2>
+                <p class='tw-body tw-text-white tw-font-light tw-pb-4'>
+                    {{page.hero_subheading}}
+                </p>
+                {% with download_button_classes="tw-max-w-max tw-btn tw-bg-white" %}
+                    <div class='download-share-btn-wrapper'>
+                        <div class="btn-container tw-mt-2 tw-flex tw-flex-wrap tw-gap-8">
+                            {% if page.button1_text and page.button1_image %}
+                            {% image page.button1_image original as btn1_image %}
+                            <a class="tw-btn {{ download_button_classes }} download-link-button" href="{{page.button1_download_link}}" target="_blank">
+                                <img src="{{ btn1_image.url }}" class="tw-mr-2 tw-inline" width="24" height="24">
+                                {{ page.button1_text }}
+                            </a>
+                            {% endif %}
+                            {% if page.button2_text and page.button2_image %}
+                            {% image page.button2_image original as btn2_image %}
+                            <a class="tw-btn {{ download_button_classes }} download-link-button" href="{{page.button2_download_link}}" target="_blank">
+                                    <img src="{{ btn2_image.url }}" class="tw-mr-2 tw-inline" width="24" height="24">
+                                    {{ page.button2_text }}
+                                </a>
+                            {% endif %}
+                {% endwith %}
+
+            </div>
+        </div>
+    </div>
+    {% if page.hero_video %}
+        <div class="tw-flex tw-flex-col tw-justify-center tw-mt-12 medium:tw-mt-0 large:tw-mt-12">
+            <div class="video-container tw-overflow-hidden tw-relative tw-w-full after:tw-pt-[56.25%] after:tw-block after:tw-content-['']">
+                <iframe class="tw-absolute tw-top-0 tw-left-0 tw-w-full tw-h-full" src="{{page.hero_video}}" allowfullscreen></iframe>
+            </div>
+        </div>
+    {% endif %}
+
+</div>
+</div>
+</div>
diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/app_install_page.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/app_install_page.html
new file mode 100644
index 00000000000..4176ffa2d74
--- /dev/null
+++ b/network-api/networkapi/wagtailpages/templates/wagtailpages/app_install_page.html
@@ -0,0 +1,6 @@
+{% extends "./campaign_page.html" %}
+
+{% block subcontent %}
+    {% include "./app_install_hero.html" %}
+    {{ block.super }}
+{% endblock %}
\ No newline at end of file

From f9a5628e068f3c07006a6d77ffc6b78582015bba Mon Sep 17 00:00:00 2001
From: danielfmiranda <manieldiranda@gmail.com>
Date: Thu, 28 Mar 2024 14:59:11 -0700
Subject: [PATCH 03/20] CMS Panel rearranging

---
 .../wagtailpages/pagemodels/app_install.py    | 36 ++++++++++++-------
 1 file changed, 24 insertions(+), 12 deletions(-)

diff --git a/network-api/networkapi/wagtailpages/pagemodels/app_install.py b/network-api/networkapi/wagtailpages/pagemodels/app_install.py
index d53d4976e6b..09c04c6eff9 100644
--- a/network-api/networkapi/wagtailpages/pagemodels/app_install.py
+++ b/network-api/networkapi/wagtailpages/pagemodels/app_install.py
@@ -1,6 +1,6 @@
 from django.db import models
 from wagtail.models import Page
-from wagtail.admin.panels import FieldPanel
+from wagtail.admin.panels import FieldPanel, MultiFieldPanel, InlinePanel
 
 from .campaigns import CampaignPage
 
@@ -67,17 +67,29 @@ class AppInstallPage(CampaignPage):
         blank=True,
     )
 
-    content_panels = CampaignPage.content_panels + [
-        FieldPanel('hero_heading'),
-        FieldPanel('hero_subheading'),
-        FieldPanel('hero_background'),
-        FieldPanel('hero_video'),
-        FieldPanel('button1_text'),
-        FieldPanel('button1_image'),
-        FieldPanel('button1_download_link'),
-        FieldPanel('button2_text'),
-        FieldPanel('button2_image'),
-        FieldPanel('button2_download_link'),
+    content_panels = [
+        FieldPanel('title'),
+        MultiFieldPanel([
+            FieldPanel('hero_heading'),
+            FieldPanel('hero_subheading'),
+            FieldPanel('hero_background'),
+            FieldPanel('hero_video'),
+            MultiFieldPanel([
+                FieldPanel('button1_image'),
+                FieldPanel('button1_text'),
+                FieldPanel('button1_download_link'),
+                FieldPanel('button2_image'),
+                FieldPanel('button2_text'),
+                FieldPanel('button2_download_link'),
+            ], heading="Download Link Buttons"),
+        ], heading='Hero Section'),
+        MultiFieldPanel([
+            FieldPanel('cta'),
+            InlinePanel("donation_modals", label="Donation Modal", max_num=4),
+            FieldPanel('header', heading="Content Header"),
+            FieldPanel('body'),
+
+        ], heading="Page Content"),
     ]
 
     subpage_types = [

From e7efaa4b8daef6205704874a223539a0689daae2 Mon Sep 17 00:00:00 2001
From: danielfmiranda <manieldiranda@gmail.com>
Date: Thu, 28 Mar 2024 15:10:56 -0700
Subject: [PATCH 04/20] zen nav is now always false

---
 network-api/networkapi/wagtailpages/pagemodels/app_install.py | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/network-api/networkapi/wagtailpages/pagemodels/app_install.py b/network-api/networkapi/wagtailpages/pagemodels/app_install.py
index 09c04c6eff9..6383b1087f9 100644
--- a/network-api/networkapi/wagtailpages/pagemodels/app_install.py
+++ b/network-api/networkapi/wagtailpages/pagemodels/app_install.py
@@ -6,6 +6,9 @@
 
 
 class AppInstallPage(CampaignPage):
+
+    zen_nav = False
+
     hero_heading = models.CharField(
         max_length=80,
         help_text="Hero story headline",

From 485e3a2faab0575e7bc3722ab02130a15d9a1696 Mon Sep 17 00:00:00 2001
From: danielfmiranda <manieldiranda@gmail.com>
Date: Thu, 28 Mar 2024 15:27:00 -0700
Subject: [PATCH 05/20] button conditional based on whether it has all three
 fields filled out

---
 .../wagtailpages/templates/wagtailpages/app_install_hero.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/app_install_hero.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/app_install_hero.html
index b5cff9cf9f5..9b144bba8fb 100644
--- a/network-api/networkapi/wagtailpages/templates/wagtailpages/app_install_hero.html
+++ b/network-api/networkapi/wagtailpages/templates/wagtailpages/app_install_hero.html
@@ -14,14 +14,14 @@ <h2 class="tw-mb-8 tw-text-white tw-font-zilla tw-font-light tw-text-4xl large:t
                 {% with download_button_classes="tw-max-w-max tw-btn tw-bg-white" %}
                     <div class='download-share-btn-wrapper'>
                         <div class="btn-container tw-mt-2 tw-flex tw-flex-wrap tw-gap-8">
-                            {% if page.button1_text and page.button1_image %}
+                            {% if page.button1_text and page.button1_image and page.button1_download_link %}
                             {% image page.button1_image original as btn1_image %}
                             <a class="tw-btn {{ download_button_classes }} download-link-button" href="{{page.button1_download_link}}" target="_blank">
                                 <img src="{{ btn1_image.url }}" class="tw-mr-2 tw-inline" width="24" height="24">
                                 {{ page.button1_text }}
                             </a>
                             {% endif %}
-                            {% if page.button2_text and page.button2_image %}
+                            {% if page.button2_text and page.button2_image and page.button2_download_link %}
                             {% image page.button2_image original as btn2_image %}
                             <a class="tw-btn {{ download_button_classes }} download-link-button" href="{{page.button2_download_link}}" target="_blank">
                                     <img src="{{ btn2_image.url }}" class="tw-mr-2 tw-inline" width="24" height="24">

From e563f62da7596c4fc1a61096303f2f3180928a1e Mon Sep 17 00:00:00 2001
From: danielfmiranda <manieldiranda@gmail.com>
Date: Thu, 28 Mar 2024 19:00:33 -0700
Subject: [PATCH 06/20] frontend formatting and linting

---
 .../wagtailpages/app_install_hero.html        | 46 -----------------
 .../wagtailpages/app_install_page.html        | 14 +++++-
 .../templates/wagtailpages/campaign_page.html | 10 ++--
 .../fragments/app_install_hero.html           | 49 +++++++++++++++++++
 4 files changed, 67 insertions(+), 52 deletions(-)
 delete mode 100644 network-api/networkapi/wagtailpages/templates/wagtailpages/app_install_hero.html
 create mode 100644 network-api/networkapi/wagtailpages/templates/wagtailpages/fragments/app_install_hero.html

diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/app_install_hero.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/app_install_hero.html
deleted file mode 100644
index 9b144bba8fb..00000000000
--- a/network-api/networkapi/wagtailpages/templates/wagtailpages/app_install_hero.html
+++ /dev/null
@@ -1,46 +0,0 @@
-{% load i18n wagtailcore_tags wagtailimages_tags %}
-{% image page.hero_background original as hero_background %}
-
-<div class="extension-hero tw-py-0 tw-flex medium:tw-py-24 tw-flex-col tw-justify-center tw-h-auto tw-min-h-[25em] medium:tw-h-[65vh] large:tw-h-[75vh] tw-bg-center tw-bg-cover" style="background-image:url('{{ hero_background.url }}')">
-    <div class="tw-px-6 tw-py-24 small:tw-px-24 medium:tw-py-24 large:tw-container large:tw-px-0">
-        <div class="tw-grid tw-gap-x-24 tw-grid-cols-1 tw-px-8 medium:tw-grid-cols-2 medium:tw-py-24">
-            <div class="tw-flex tw-flex-col tw-justify-center">
-                <h2 class="tw-mb-8 tw-text-white tw-font-zilla tw-font-light tw-text-4xl large:tw-text-5xl">
-                    {{page.hero_heading}}
-                </h2>
-                <p class='tw-body tw-text-white tw-font-light tw-pb-4'>
-                    {{page.hero_subheading}}
-                </p>
-                {% with download_button_classes="tw-max-w-max tw-btn tw-bg-white" %}
-                    <div class='download-share-btn-wrapper'>
-                        <div class="btn-container tw-mt-2 tw-flex tw-flex-wrap tw-gap-8">
-                            {% if page.button1_text and page.button1_image and page.button1_download_link %}
-                            {% image page.button1_image original as btn1_image %}
-                            <a class="tw-btn {{ download_button_classes }} download-link-button" href="{{page.button1_download_link}}" target="_blank">
-                                <img src="{{ btn1_image.url }}" class="tw-mr-2 tw-inline" width="24" height="24">
-                                {{ page.button1_text }}
-                            </a>
-                            {% endif %}
-                            {% if page.button2_text and page.button2_image and page.button2_download_link %}
-                            {% image page.button2_image original as btn2_image %}
-                            <a class="tw-btn {{ download_button_classes }} download-link-button" href="{{page.button2_download_link}}" target="_blank">
-                                    <img src="{{ btn2_image.url }}" class="tw-mr-2 tw-inline" width="24" height="24">
-                                    {{ page.button2_text }}
-                                </a>
-                            {% endif %}
-                {% endwith %}
-
-            </div>
-        </div>
-    </div>
-    {% if page.hero_video %}
-        <div class="tw-flex tw-flex-col tw-justify-center tw-mt-12 medium:tw-mt-0 large:tw-mt-12">
-            <div class="video-container tw-overflow-hidden tw-relative tw-w-full after:tw-pt-[56.25%] after:tw-block after:tw-content-['']">
-                <iframe class="tw-absolute tw-top-0 tw-left-0 tw-w-full tw-h-full" src="{{page.hero_video}}" allowfullscreen></iframe>
-            </div>
-        </div>
-    {% endif %}
-
-</div>
-</div>
-</div>
diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/app_install_page.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/app_install_page.html
index 4176ffa2d74..d9ccd213f87 100644
--- a/network-api/networkapi/wagtailpages/templates/wagtailpages/app_install_page.html
+++ b/network-api/networkapi/wagtailpages/templates/wagtailpages/app_install_page.html
@@ -1,6 +1,16 @@
 {% extends "./campaign_page.html" %}
 
 {% block subcontent %}
-    {% include "./app_install_hero.html" %}
+    {% include "./fragments/app_install_hero.html" %}
     {{ block.super }}
-{% endblock %}
\ No newline at end of file
+{% endblock subcontent %}
+
+{% block html_content_desktop %}
+    {% include "./fragments/campaign_main_body.html" with page=page class="tw-block" %}
+{% endblock html_content_desktop %}
+
+{% block html_content_mobile %}
+{% endblock html_content_mobile %}
+
+{% block cta_sticky_button %}
+{% endblock cta_sticky_button %}
diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/campaign_page.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/campaign_page.html
index f49b065becb..fbb5a03de10 100644
--- a/network-api/networkapi/wagtailpages/templates/wagtailpages/campaign_page.html
+++ b/network-api/networkapi/wagtailpages/templates/wagtailpages/campaign_page.html
@@ -65,10 +65,12 @@ <h1 class="tw-h1-heading {% if uses_menu %}tw-hidden medium:tw-block{% endif %}"
                                             tw-w-full
                                         {% endif %}"
                             >
-                                <div class="narrow-sticky-button-container hidden">
-                                    <a href="#cta-anchor" class="tw-btn-primary tw-block">{% trans "TAKE ACTION" context "Sticky button in mobile view on campaign pages" %}</a>
-                                </div>
-                                <div class="tw-sticky tw-top-40 tw-overflow-hidden tw-z-[1018]">
+                                {% block cta_sticky_button %}
+                                    <div class="narrow-sticky-button-container hidden">
+                                        <a href="#cta-anchor" class="tw-btn-primary tw-block">{% trans "TAKE ACTION" context "Sticky button in mobile view on campaign pages" %}</a>
+                                    </div>
+                                {% endblock cta_sticky_button %}
+                                <div class="tw-sticky tw-mx-auto tw-top-40 tw-overflow-hidden tw-z-[1018]">
                                     <div id="cta-anchor" class="-tw-mt-40 tw-pt-40">
                                         {% cta page %}
                                     </div>
diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/fragments/app_install_hero.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/fragments/app_install_hero.html
new file mode 100644
index 00000000000..22daa7c8ef2
--- /dev/null
+++ b/network-api/networkapi/wagtailpages/templates/wagtailpages/fragments/app_install_hero.html
@@ -0,0 +1,49 @@
+{% load i18n wagtailcore_tags wagtailimages_tags %}
+
+{% image page.hero_background original as hero_background %}
+
+<div class="app-install-page-hero tw-py-0 tw-flex tw-flex-col tw-justify-center tw-h-auto tw-min-h-[25em] tw-bg-center tw-bg-cover medium:tw-py-24 medium:tw-h-[65vh] large:tw-h-[75vh]" style="background-image:url('{{ hero_background.url }}')">
+    <div class="tw-px-6 tw-py-24 small:tw-px-24 medium:tw-py-24 large:tw-container large:tw-px-0">
+        <div class="tw-grid tw-gap-x-24 tw-grid-cols-1 tw-px-8 medium:tw-grid-cols-2 medium:tw-py-24">
+            <div class="tw-flex tw-flex-col tw-justify-center">
+                <h2 class="tw-mb-8 tw-text-white tw-h1-heading tw-font-light tw-text-4xl large:tw-text-5xl">
+                    {{ page.hero_heading }}
+                </h2>
+                <p class="tw-body-large tw-text-white tw-font-light tw-pb-4">
+                    {{ page.hero_subheading }}
+                </p>
+                {% with download_btn_classes="tw-max-w-max tw-btn tw-bg-white hover:tw-bg-gray-20 tw-transition-colors tw-border-black tw-border-2" btn_image_classes="tw-mr-2 tw-inline" %}
+                    <div class="download-btn-wrapper">
+                        <div class="btn-container tw-mt-2 tw-flex tw-flex-wrap tw-gap-8">
+                            {% if page.button1_text and page.button1_download_link %}
+                                <a class="{{ download_btn_classes }}" href="{{ page.button1_download_link }}" target="_blank">
+                                    {% if page.button1_image %}
+                                        {% image page.button1_image original as btn1_image %}
+                                        <img src="{{ btn1_image.url }}" alt="{{ page.button1_image_alt }}" class="{{ btn_image_classes }}" width="24" height="24">
+                                    {% endif %}
+                                    {{ page.button1_text }}
+                                </a>
+                            {% endif %}
+                            {% if page.button2_text and page.button2_download_link %}
+                                <a class="{{ download_btn_classes }}" href="{{ page.button2_download_link }}" target="_blank">
+                                    {% if page.button2_image %}
+                                        {% image page.button2_image original as btn2_image %}
+                                        <img src="{{ btn2_image.url }}" alt="{{ page.button2_image_alt }}" class="{{ btn_image_classes }}" width="24" height="24">
+                                    {% endif %}
+                                    {{ page.button2_text }}
+                                </a>
+                            {% endif %}
+                        </div>
+                    </div>
+                {% endwith %}
+            </div>
+            {% if page.hero_video %}
+                <div class="tw-flex tw-flex-col tw-justify-center tw-mt-12 medium:tw-mt-0 large:tw-mt-12">
+                    <div class="video-container tw-overflow-hidden tw-relative tw-w-full after:tw-pt-[56.25%] after:tw-block after:tw-content-['']">
+                        <iframe class="tw-absolute tw-top-0 tw-left-0 tw-w-full tw-h-full" src="{{ page.hero_video }}" allowfullscreen></iframe>
+                    </div>
+                </div>
+            {% endif %}
+        </div>
+    </div>
+</div>

From 79225691b959028d85ca41ded73b46e3072ee2d1 Mon Sep 17 00:00:00 2001
From: danielfmiranda <manieldiranda@gmail.com>
Date: Thu, 28 Mar 2024 19:13:08 -0700
Subject: [PATCH 07/20] finished with backend + formatting + linting

---
 .../migrations/0133_appinstallpage.py         |  6 +-
 network-api/networkapi/wagtailpages/models.py |  2 +-
 .../wagtailpages/pagemodels/app_install.py    | 77 ++++++++++---------
 3 files changed, 45 insertions(+), 40 deletions(-)

diff --git a/network-api/networkapi/wagtailpages/migrations/0133_appinstallpage.py b/network-api/networkapi/wagtailpages/migrations/0133_appinstallpage.py
index 5d75b58f195..440d3eff34c 100644
--- a/network-api/networkapi/wagtailpages/migrations/0133_appinstallpage.py
+++ b/network-api/networkapi/wagtailpages/migrations/0133_appinstallpage.py
@@ -1,7 +1,7 @@
-# Generated by Django 4.2.11 on 2024-03-28 21:19
+# Generated by Django 4.2.11 on 2024-03-29 02:12
 
-from django.db import migrations, models
 import django.db.models.deletion
+from django.db import migrations, models
 
 
 class Migration(migrations.Migration):
@@ -32,7 +32,7 @@ class Migration(migrations.Migration):
                     "hero_video",
                     models.URLField(
                         blank=True,
-                        help_text="To find embed link: go to your YouTube video and click “Share,” then “Embed,” and then copy and paste the provided URL only. For example: https://www.youtube.com/embed/3FIVXBawyQw.",
+                        help_text="To find embed link: go to your YouTube video and click “Share,” then “Embed,” and then copy and paste the provided URL only. EX: https://www.youtube.com/embed/3FIVXBawyQ",
                         null=True,
                     ),
                 ),
diff --git a/network-api/networkapi/wagtailpages/models.py b/network-api/networkapi/wagtailpages/models.py
index 1c9247cd62c..4dce3c774ef 100644
--- a/network-api/networkapi/wagtailpages/models.py
+++ b/network-api/networkapi/wagtailpages/models.py
@@ -1,4 +1,5 @@
 # flake8: noqa
+from .pagemodels.app_install import AppInstallPage
 from .pagemodels.base import (
     FocusArea,
     FoundationMetadataPageMixin,
@@ -14,7 +15,6 @@
     PrimaryPage,
     Styleguide,
 )
-from .pagemodels.app_install import AppInstallPage
 from .pagemodels.blog.blog import BlogAuthors, BlogPage, RelatedBlogPosts
 from .pagemodels.blog.blog_index import BlogIndexPage
 from .pagemodels.blog.blog_topic import BlogPageTopic
diff --git a/network-api/networkapi/wagtailpages/pagemodels/app_install.py b/network-api/networkapi/wagtailpages/pagemodels/app_install.py
index 6383b1087f9..23294c74eba 100644
--- a/network-api/networkapi/wagtailpages/pagemodels/app_install.py
+++ b/network-api/networkapi/wagtailpages/pagemodels/app_install.py
@@ -1,6 +1,6 @@
 from django.db import models
+from wagtail.admin.panels import FieldPanel, InlinePanel, MultiFieldPanel
 from wagtail.models import Page
-from wagtail.admin.panels import FieldPanel, MultiFieldPanel, InlinePanel
 
 from .campaigns import CampaignPage
 
@@ -18,16 +18,16 @@ class AppInstallPage(CampaignPage):
         blank=True,
         help_text="Hero story subheadline",
     )
-    hero_background =  models.ForeignKey(
-        'wagtailimages.Image',
+    hero_background = models.ForeignKey(
+        "wagtailimages.Image",
         on_delete=models.PROTECT,
-        related_name='+',
-        help_text="Background image for the hero section"
+        related_name="+",
+        help_text="Background image for the hero section",
     )
     hero_video = models.URLField(
         null=True,
         blank=True,
-        help_text="To find embed link: go to your YouTube video and click “Share,” then “Embed,” and then copy and paste the provided URL only. For example: https://www.youtube.com/embed/3FIVXBawyQw."
+        help_text="To find embed link: go to your YouTube video and click “Share,” then “Embed,” and then copy and paste the provided URL only. EX: https://www.youtube.com/embed/3FIVXBawyQ",
     )
     button1_text = models.CharField(
         max_length=50,
@@ -42,11 +42,11 @@ class AppInstallPage(CampaignPage):
         blank=True,
     )
     button1_image = models.ForeignKey(
-        'wagtailimages.Image',
+        "wagtailimages.Image",
         null=True,
         blank=True,
         on_delete=models.SET_NULL,
-        related_name='+',
+        related_name="+",
         help_text="Image for Button 1",
     )
     button2_text = models.CharField(
@@ -56,11 +56,11 @@ class AppInstallPage(CampaignPage):
         blank=True,
     )
     button2_image = models.ForeignKey(
-        'wagtailimages.Image',
+        "wagtailimages.Image",
         null=True,
         blank=True,
         on_delete=models.SET_NULL,
-        related_name='+',
+        related_name="+",
         help_text="Image for Button 2",
     )
     button2_download_link = models.URLField(
@@ -71,28 +71,36 @@ class AppInstallPage(CampaignPage):
     )
 
     content_panels = [
-        FieldPanel('title'),
-        MultiFieldPanel([
-            FieldPanel('hero_heading'),
-            FieldPanel('hero_subheading'),
-            FieldPanel('hero_background'),
-            FieldPanel('hero_video'),
-            MultiFieldPanel([
-                FieldPanel('button1_image'),
-                FieldPanel('button1_text'),
-                FieldPanel('button1_download_link'),
-                FieldPanel('button2_image'),
-                FieldPanel('button2_text'),
-                FieldPanel('button2_download_link'),
-            ], heading="Download Link Buttons"),
-        ], heading='Hero Section'),
-        MultiFieldPanel([
-            FieldPanel('cta'),
-            InlinePanel("donation_modals", label="Donation Modal", max_num=4),
-            FieldPanel('header', heading="Content Header"),
-            FieldPanel('body'),
-
-        ], heading="Page Content"),
+        FieldPanel("title"),
+        MultiFieldPanel(
+            [
+                FieldPanel("hero_heading"),
+                FieldPanel("hero_subheading"),
+                FieldPanel("hero_background"),
+                FieldPanel("hero_video"),
+                MultiFieldPanel(
+                    [
+                        FieldPanel("button1_image"),
+                        FieldPanel("button1_text"),
+                        FieldPanel("button1_download_link"),
+                        FieldPanel("button2_image"),
+                        FieldPanel("button2_text"),
+                        FieldPanel("button2_download_link"),
+                    ],
+                    heading="Download Link Buttons",
+                ),
+            ],
+            heading="Hero Section",
+        ),
+        MultiFieldPanel(
+            [
+                FieldPanel("cta"),
+                InlinePanel("donation_modals", label="Donation Modal", max_num=4),
+                FieldPanel("header", heading="Content Header"),
+                FieldPanel("body"),
+            ],
+            heading="Page Content",
+        ),
     ]
 
     subpage_types = [
@@ -100,7 +108,4 @@ class AppInstallPage(CampaignPage):
         "OpportunityPage",
     ]
 
-    parent_page_types = [
-        "BanneredCampaignPage",
-        "Homepage"
-    ]
+    parent_page_types = ["BanneredCampaignPage", "Homepage"]

From 480abea960578f7c1161e090f4b490aac7f71923 Mon Sep 17 00:00:00 2001
From: danielfmiranda <manieldiranda@gmail.com>
Date: Thu, 28 Mar 2024 19:24:38 -0700
Subject: [PATCH 08/20] indented long help text

---
 network-api/networkapi/wagtailpages/pagemodels/app_install.py | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/network-api/networkapi/wagtailpages/pagemodels/app_install.py b/network-api/networkapi/wagtailpages/pagemodels/app_install.py
index 23294c74eba..c4ecea9b3f8 100644
--- a/network-api/networkapi/wagtailpages/pagemodels/app_install.py
+++ b/network-api/networkapi/wagtailpages/pagemodels/app_install.py
@@ -1,6 +1,5 @@
 from django.db import models
 from wagtail.admin.panels import FieldPanel, InlinePanel, MultiFieldPanel
-from wagtail.models import Page
 
 from .campaigns import CampaignPage
 
@@ -27,7 +26,8 @@ class AppInstallPage(CampaignPage):
     hero_video = models.URLField(
         null=True,
         blank=True,
-        help_text="To find embed link: go to your YouTube video and click “Share,” then “Embed,” and then copy and paste the provided URL only. EX: https://www.youtube.com/embed/3FIVXBawyQ",
+        help_text="To find embed link: go to your YouTube video and click “Share,” then “Embed,” "
+        "and then copy and paste the provided URL only. EX: https://www.youtube.com/embed/3FIVXBawyQ",
     )
     button1_text = models.CharField(
         max_length=50,

From e6b386dd9bb8d7d30e6d7bb0c699f6c86a7d68c5 Mon Sep 17 00:00:00 2001
From: danielfmiranda <manieldiranda@gmail.com>
Date: Fri, 29 Mar 2024 00:39:34 -0700
Subject: [PATCH 09/20] hide campaign_header_block

---
 network-api/networkapi/wagtailpages/pagemodels/app_install.py  | 1 -
 .../wagtailpages/templates/wagtailpages/app_install_page.html  | 3 +++
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/network-api/networkapi/wagtailpages/pagemodels/app_install.py b/network-api/networkapi/wagtailpages/pagemodels/app_install.py
index c4ecea9b3f8..3d4fba799a3 100644
--- a/network-api/networkapi/wagtailpages/pagemodels/app_install.py
+++ b/network-api/networkapi/wagtailpages/pagemodels/app_install.py
@@ -96,7 +96,6 @@ class AppInstallPage(CampaignPage):
             [
                 FieldPanel("cta"),
                 InlinePanel("donation_modals", label="Donation Modal", max_num=4),
-                FieldPanel("header", heading="Content Header"),
                 FieldPanel("body"),
             ],
             heading="Page Content",
diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/app_install_page.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/app_install_page.html
index d9ccd213f87..2e004aa5cca 100644
--- a/network-api/networkapi/wagtailpages/templates/wagtailpages/app_install_page.html
+++ b/network-api/networkapi/wagtailpages/templates/wagtailpages/app_install_page.html
@@ -9,6 +9,9 @@
     {% include "./fragments/campaign_main_body.html" with page=page class="tw-block" %}
 {% endblock html_content_desktop %}
 
+{% block campaign_page_header %}
+{% endblock campaign_page_header %}
+
 {% block html_content_mobile %}
 {% endblock html_content_mobile %}
 

From d597de3e2a1d6690bf0171cbd2397a43a0fbd5ec Mon Sep 17 00:00:00 2001
From: danielfmiranda <manieldiranda@gmail.com>
Date: Fri, 29 Mar 2024 00:52:53 -0700
Subject: [PATCH 10/20] centered cta form on mobile and tablet breakpoints

---
 .../wagtailpages/templates/wagtailpages/campaign_page.html    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/campaign_page.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/campaign_page.html
index fbb5a03de10..9dd442b2a59 100644
--- a/network-api/networkapi/wagtailpages/templates/wagtailpages/campaign_page.html
+++ b/network-api/networkapi/wagtailpages/templates/wagtailpages/campaign_page.html
@@ -58,7 +58,7 @@ <h1 class="tw-h1-heading {% if uses_menu %}tw-hidden medium:tw-block{% endif %}"
 
                     {% block cta %}
                         {% if page.cta != None %}
-                            <div class="cta tw-pb-4
+                            <div class="cta tw-pb-4 tw-mx-auto
                                         {% if page.specific.narrowed_page_content == False %}
                                             large:tw-w-4/12 large:tw-ml-[8.3%] tw-px-8
                                         {% else %}
@@ -70,7 +70,7 @@ <h1 class="tw-h1-heading {% if uses_menu %}tw-hidden medium:tw-block{% endif %}"
                                         <a href="#cta-anchor" class="tw-btn-primary tw-block">{% trans "TAKE ACTION" context "Sticky button in mobile view on campaign pages" %}</a>
                                     </div>
                                 {% endblock cta_sticky_button %}
-                                <div class="tw-sticky tw-mx-auto tw-top-40 tw-overflow-hidden tw-z-[1018]">
+                                <div class="tw-sticky tw-top-40 tw-overflow-hidden tw-z-[1018]">
                                     <div id="cta-anchor" class="-tw-mt-40 tw-pt-40">
                                         {% cta page %}
                                     </div>

From 3fd6f749d7819d1a70344eebeab38c7eb9824696 Mon Sep 17 00:00:00 2001
From: danielfmiranda <manieldiranda@gmail.com>
Date: Mon, 1 Apr 2024 15:22:17 -0700
Subject: [PATCH 11/20] pushing WIP frontend update to get design approval

---
 .../fragments/app_install_hero.html           | 92 +++++++++++--------
 .../responsive_screen_wide_image.html         | 60 ++++++++++++
 2 files changed, 113 insertions(+), 39 deletions(-)
 create mode 100644 network-api/networkapi/wagtailpages/templates/wagtailpages/fragments/responsive_screen_wide_image.html

diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/fragments/app_install_hero.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/fragments/app_install_hero.html
index 22daa7c8ef2..b5fef84821b 100644
--- a/network-api/networkapi/wagtailpages/templates/wagtailpages/fragments/app_install_hero.html
+++ b/network-api/networkapi/wagtailpages/templates/wagtailpages/fragments/app_install_hero.html
@@ -1,49 +1,63 @@
 {% load i18n wagtailcore_tags wagtailimages_tags %}
 
-{% image page.hero_background original as hero_background %}
+<!-- {% image page.hero_background original as hero_background %} -->
 
-<div class="app-install-page-hero tw-py-0 tw-flex tw-flex-col tw-justify-center tw-h-auto tw-min-h-[25em] tw-bg-center tw-bg-cover medium:tw-py-24 medium:tw-h-[65vh] large:tw-h-[75vh]" style="background-image:url('{{ hero_background.url }}')">
-    <div class="tw-px-6 tw-py-24 small:tw-px-24 medium:tw-py-24 large:tw-container large:tw-px-0">
-        <div class="tw-grid tw-gap-x-24 tw-grid-cols-1 tw-px-8 medium:tw-grid-cols-2 medium:tw-py-24">
-            <div class="tw-flex tw-flex-col tw-justify-center">
-                <h2 class="tw-mb-8 tw-text-white tw-h1-heading tw-font-light tw-text-4xl large:tw-text-5xl">
-                    {{ page.hero_heading }}
-                </h2>
-                <p class="tw-body-large tw-text-white tw-font-light tw-pb-4">
-                    {{ page.hero_subheading }}
-                </p>
-                {% with download_btn_classes="tw-max-w-max tw-btn tw-bg-white hover:tw-bg-gray-20 tw-transition-colors tw-border-black tw-border-2" btn_image_classes="tw-mr-2 tw-inline" %}
-                    <div class="download-btn-wrapper">
-                        <div class="btn-container tw-mt-2 tw-flex tw-flex-wrap tw-gap-8">
-                            {% if page.button1_text and page.button1_download_link %}
-                                <a class="{{ download_btn_classes }}" href="{{ page.button1_download_link }}" target="_blank">
-                                    {% if page.button1_image %}
-                                        {% image page.button1_image original as btn1_image %}
-                                        <img src="{{ btn1_image.url }}" alt="{{ page.button1_image_alt }}" class="{{ btn_image_classes }}" width="24" height="24">
+    <div
+    class="publication-hero-container tw-relative tw-bg-gradient-to-b tw-from-gray-60 tw-to-gray-80 tw-pt-36 tw-pb-48 medium:tw-pt-72 medium:tw-pb-96"
+>
+        <div class="tw-absolute tw-inset-0">
+            {% include "./responsive_screen_wide_image.html" with image_object=page.hero_background %}
+            <div class="tw-absolute tw-inset-0" aria-hidden="true"></div>
+        </div>
+    <div class="tw-relative container">
+        <div class="row">
+            <div class="tw-px-6 small:tw-px-24 large:tw-container large:tw-px-0">
+                <div class="tw-grid tw-gap-x-24 tw-grid-cols-1 tw-px-8 medium:tw-grid-cols-2 ">
+                    <div class="tw-flex tw-flex-col tw-justify-center">
+                        <h2 class="tw-mb-8 tw-text-white tw-h1-heading tw-font-light tw-text-4xl large:tw-text-5xl">
+                            {{ page.hero_heading }}
+                        </h2>
+                        <p class="tw-body-large tw-text-white tw-font-light tw-pb-4">
+                            {{ page.hero_subheading }}
+                        </p>
+                        {% with download_btn_classes="tw-max-w-max tw-btn tw-bg-white hover:tw-bg-gray-20 tw-transition-colors tw-border-black tw-border-2" btn_image_classes="tw-mr-2 tw-inline" %}
+                            <div class="download-btn-wrapper">
+                                <div class="btn-container tw-mt-2 tw-flex tw-flex-wrap tw-gap-8">
+                                    {% if page.button1_text and page.button1_download_link %}
+                                        <a class="{{ download_btn_classes }}" href="{{ page.button1_download_link }}" target="_blank">
+                                            {% if page.button1_image %}
+                                                {% image page.button1_image original as btn1_image %}
+                                                <img src="{{ btn1_image.url }}" alt="{{ page.button1_image_alt }}" class="{{ btn_image_classes }}" width="24" height="24">
+                                            {% endif %}
+                                            {{ page.button1_text }}
+                                        </a>
                                     {% endif %}
-                                    {{ page.button1_text }}
-                                </a>
-                            {% endif %}
-                            {% if page.button2_text and page.button2_download_link %}
-                                <a class="{{ download_btn_classes }}" href="{{ page.button2_download_link }}" target="_blank">
-                                    {% if page.button2_image %}
-                                        {% image page.button2_image original as btn2_image %}
-                                        <img src="{{ btn2_image.url }}" alt="{{ page.button2_image_alt }}" class="{{ btn_image_classes }}" width="24" height="24">
+                                    {% if page.button2_text and page.button2_download_link %}
+                                        <a class="{{ download_btn_classes }}" href="{{ page.button2_download_link }}" target="_blank">
+                                            {% if page.button2_image %}
+                                                {% image page.button2_image original as btn2_image %}
+                                                <img src="{{ btn2_image.url }}" alt="{{ page.button2_image_alt }}" class="{{ btn_image_classes }}" width="24" height="24">
+                                            {% endif %}
+                                            {{ page.button2_text }}
+                                        </a>
                                     {% endif %}
-                                    {{ page.button2_text }}
-                                </a>
-                            {% endif %}
-                        </div>
-                    </div>
-                {% endwith %}
-            </div>
-            {% if page.hero_video %}
-                <div class="tw-flex tw-flex-col tw-justify-center tw-mt-12 medium:tw-mt-0 large:tw-mt-12">
-                    <div class="video-container tw-overflow-hidden tw-relative tw-w-full after:tw-pt-[56.25%] after:tw-block after:tw-content-['']">
-                        <iframe class="tw-absolute tw-top-0 tw-left-0 tw-w-full tw-h-full" src="{{ page.hero_video }}" allowfullscreen></iframe>
+                                </div>
+                            </div>
+                        {% endwith %}
                     </div>
+                    {% if page.hero_video %}
+                        <div class="tw-flex tw-flex-col tw-justify-center tw-mt-12 medium:tw-mt-0 large:tw-mt-12">
+                            <div class="video-container tw-overflow-hidden tw-relative tw-w-full after:tw-pt-[56.25%] after:tw-block after:tw-content-['']">
+                                <iframe class="tw-absolute tw-top-0 tw-left-0 tw-w-full tw-h-full" src="{{ page.hero_video }}" allowfullscreen></iframe>
+                            </div>
+                        </div>
+                    {% endif %}
                 </div>
-            {% endif %}
+            </div>
         </div>
     </div>
 </div>
+
+
+
+
diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/fragments/responsive_screen_wide_image.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/fragments/responsive_screen_wide_image.html
new file mode 100644
index 00000000000..d48548f65db
--- /dev/null
+++ b/network-api/networkapi/wagtailpages/templates/wagtailpages/fragments/responsive_screen_wide_image.html
@@ -0,0 +1,60 @@
+{% load wagtailimages_tags %}
+
+<picture
+>
+    {% comment %}
+    Screen sizes
+    small: "576px",
+    medium: "768px",
+    large: "992px",
+    xlarge: "1200px",
+    "2xl": "1400px",
+  {% endcomment %}
+    {% if not is_pattern_library %}
+        {% image image_object width-576 as img_576 %}
+        {% image image_object width-1152 as img_576_2x %}
+        {% image image_object width-768 as img_768 %}
+        {% image image_object width-1536 as img_768_2x %}
+        {% image image_object width-992 as img_992 %}
+        {% image image_object width-1984 as img_992_2x %}
+        {% image image_object width-1200 as img_1200 %}
+        {% image image_object width-2400 as img_1200_2x %}
+        {% image image_object width-1400 as img_1400 %}
+        {% image image_object width-2800 as img_1400_2x %}
+        {% image image_object original as img_original %}
+    {% endif %}
+    <source
+        media="(max-width: 576px)"
+        srcset="{{ img_576.url }}, {{ img_576_2x.url }} 2x"
+    />
+    <source
+        media="(max-width: 768px)"
+        srcset="{{ img_768.url }}, {{ img_768_2x.url }} 2x"
+    />
+    <source
+        media="(max-width: 992px)"
+        srcset="{{ img_992.url }}, {{ img_992_2x.url }} 2x"
+    />
+    <source
+        media="(max-width: 1200px)"
+        srcset="{{ img_1200.url }}, {{ img_1200_2x.url }} 2x"
+    />
+    <source
+        media="(max-width: 1400px)"
+        srcset="{{ img_1400.url }}, {{ img_1400_2x.url }} 2x"
+    />
+    <source
+        media="(min-width: 1401px)"
+        srcset="{{ img_original.url }}"
+    />
+    <img
+        class="tw-h-full tw-w-full tw-object-cover"
+        {% comment %}
+      This is only loaded when the browser does not know the picture and source element.
+      Trying to fall back to some reasonably sized image that should work on most screens.
+      Assuming low probability for a high res screen (since it's an outdated browser).
+    {% endcomment %}
+        src="{{ img_1200.url }}"
+        alt=""
+    >
+</picture>

From 54c7c0c01afcdcecad5fe8d2aabfc6b74e252c59 Mon Sep 17 00:00:00 2001
From: danielfmiranda <manieldiranda@gmail.com>
Date: Tue, 2 Apr 2024 12:11:19 -0700
Subject: [PATCH 12/20] updated page to use downloadbutton block

---
 .../migrations/0133_appinstallpage.py         | 123 +++++++++++++-----
 .../wagtailpages/pagemodels/app_install.py    |  59 ++-------
 .../pagemodels/customblocks/__init__.py       |   1 +
 .../app_install_download_button_block.py      |  12 ++
 .../app_install_download_button_block.html    |  10 ++
 .../fragments/app_install_hero.html           |  74 +++++------
 6 files changed, 148 insertions(+), 131 deletions(-)
 create mode 100644 network-api/networkapi/wagtailpages/pagemodels/customblocks/app_install_download_button_block.py
 create mode 100644 network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/app_install_download_button_block.html

diff --git a/network-api/networkapi/wagtailpages/migrations/0133_appinstallpage.py b/network-api/networkapi/wagtailpages/migrations/0133_appinstallpage.py
index 440d3eff34c..31dd8c830cd 100644
--- a/network-api/networkapi/wagtailpages/migrations/0133_appinstallpage.py
+++ b/network-api/networkapi/wagtailpages/migrations/0133_appinstallpage.py
@@ -1,8 +1,14 @@
-# Generated by Django 4.2.11 on 2024-03-29 02:12
+# Generated by Django 4.2.11 on 2024-04-02 18:55
 
 import django.db.models.deletion
+import wagtail.blocks
+import wagtail.documents.blocks
+import wagtail.fields
+import wagtail.images.blocks
 from django.db import migrations, models
 
+import networkapi.wagtailpages.validators
+
 
 class Migration(migrations.Migration):
 
@@ -37,41 +43,86 @@ class Migration(migrations.Migration):
                     ),
                 ),
                 (
-                    "button1_text",
-                    models.CharField(blank=True, help_text="Text for Button 1", max_length=50, null=True),
-                ),
-                (
-                    "button1_download_link",
-                    models.URLField(blank=True, help_text="Download link for Button 1", max_length=255, null=True),
-                ),
-                (
-                    "button2_text",
-                    models.CharField(blank=True, help_text="Text for Button 2", max_length=50, null=True),
-                ),
-                (
-                    "button2_download_link",
-                    models.URLField(blank=True, help_text="Download link for Button 2", max_length=255, null=True),
-                ),
-                (
-                    "button1_image",
-                    models.ForeignKey(
-                        blank=True,
-                        help_text="Image for Button 1",
-                        null=True,
-                        on_delete=django.db.models.deletion.SET_NULL,
-                        related_name="+",
-                        to="wagtailimages.image",
-                    ),
-                ),
-                (
-                    "button2_image",
-                    models.ForeignKey(
-                        blank=True,
-                        help_text="Image for Button 2",
-                        null=True,
-                        on_delete=django.db.models.deletion.SET_NULL,
-                        related_name="+",
-                        to="wagtailimages.image",
+                    "download_buttons",
+                    wagtail.fields.StreamField(
+                        [
+                            (
+                                "button",
+                                wagtail.blocks.StructBlock(
+                                    [
+                                        ("label", wagtail.blocks.CharBlock()),
+                                        (
+                                            "link_to",
+                                            wagtail.blocks.ChoiceBlock(
+                                                choices=[
+                                                    ("page", "Page"),
+                                                    ("external_url", "External URL"),
+                                                    ("relative_url", "Relative URL"),
+                                                    ("email", "Email"),
+                                                    ("anchor", "Anchor"),
+                                                    ("file", "File"),
+                                                    ("phone", "Phone"),
+                                                ],
+                                                label="Link to",
+                                            ),
+                                        ),
+                                        ("page", wagtail.blocks.PageChooserBlock(label="Page", required=False)),
+                                        (
+                                            "external_url",
+                                            wagtail.blocks.URLBlock(
+                                                help_text="Enter a full URL including http:// or https://",
+                                                label="External URL",
+                                                max_length=300,
+                                                required=False,
+                                            ),
+                                        ),
+                                        (
+                                            "relative_url",
+                                            wagtail.blocks.CharBlock(
+                                                help_text='A path relative to this domain. For example, "/foo/bar"',
+                                                label="Relative URL",
+                                                max_length=300,
+                                                required=False,
+                                                validators=[networkapi.wagtailpages.validators.RelativeURLValidator()],
+                                            ),
+                                        ),
+                                        (
+                                            "anchor",
+                                            wagtail.blocks.CharBlock(
+                                                help_text='An id attribute of an element on the current page. For example, "#section-1"',
+                                                label="#",
+                                                max_length=300,
+                                                required=False,
+                                                validators=[networkapi.wagtailpages.validators.AnchorLinkValidator()],
+                                            ),
+                                        ),
+                                        ("email", wagtail.blocks.EmailBlock(required=False)),
+                                        (
+                                            "file",
+                                            wagtail.documents.blocks.DocumentChooserBlock(
+                                                label="File", required=False
+                                            ),
+                                        ),
+                                        (
+                                            "phone",
+                                            wagtail.blocks.CharBlock(label="Phone", max_length=30, required=False),
+                                        ),
+                                        (
+                                            "new_window",
+                                            wagtail.blocks.BooleanBlock(label="Open in new window", required=False),
+                                        ),
+                                        ("icon", wagtail.images.blocks.ImageChooserBlock(required=False)),
+                                        (
+                                            "icon_alt_text",
+                                            wagtail.blocks.CharBlock(
+                                                help_text="Image description (for screen readers).", required=False
+                                            ),
+                                        ),
+                                    ]
+                                ),
+                            )
+                        ],
+                        use_json_field=True,
                     ),
                 ),
                 (
diff --git a/network-api/networkapi/wagtailpages/pagemodels/app_install.py b/network-api/networkapi/wagtailpages/pagemodels/app_install.py
index 3d4fba799a3..2a73bb42f38 100644
--- a/network-api/networkapi/wagtailpages/pagemodels/app_install.py
+++ b/network-api/networkapi/wagtailpages/pagemodels/app_install.py
@@ -1,6 +1,8 @@
 from django.db import models
 from wagtail.admin.panels import FieldPanel, InlinePanel, MultiFieldPanel
+from wagtail.fields import StreamField
 
+from . import customblocks
 from .campaigns import CampaignPage
 
 
@@ -29,45 +31,12 @@ class AppInstallPage(CampaignPage):
         help_text="To find embed link: go to your YouTube video and click “Share,” then “Embed,” "
         "and then copy and paste the provided URL only. EX: https://www.youtube.com/embed/3FIVXBawyQ",
     )
-    button1_text = models.CharField(
-        max_length=50,
-        help_text="Text for Button 1",
-        null=True,
-        blank=True,
-    )
-    button1_download_link = models.URLField(
-        max_length=255,
-        help_text="Download link for Button 1",
-        null=True,
-        blank=True,
-    )
-    button1_image = models.ForeignKey(
-        "wagtailimages.Image",
-        null=True,
-        blank=True,
-        on_delete=models.SET_NULL,
-        related_name="+",
-        help_text="Image for Button 1",
-    )
-    button2_text = models.CharField(
-        max_length=50,
-        help_text="Text for Button 2",
-        null=True,
-        blank=True,
-    )
-    button2_image = models.ForeignKey(
-        "wagtailimages.Image",
-        null=True,
-        blank=True,
-        on_delete=models.SET_NULL,
-        related_name="+",
-        help_text="Image for Button 2",
-    )
-    button2_download_link = models.URLField(
-        max_length=255,
-        help_text="Download link for Button 2",
-        null=True,
-        blank=True,
+    download_buttons = StreamField(
+        [
+            ("button", customblocks.AppInstallDownloadButtonBlock()),
+        ],
+        use_json_field=True,
+        max_num=2,
     )
 
     content_panels = [
@@ -78,17 +47,7 @@ class AppInstallPage(CampaignPage):
                 FieldPanel("hero_subheading"),
                 FieldPanel("hero_background"),
                 FieldPanel("hero_video"),
-                MultiFieldPanel(
-                    [
-                        FieldPanel("button1_image"),
-                        FieldPanel("button1_text"),
-                        FieldPanel("button1_download_link"),
-                        FieldPanel("button2_image"),
-                        FieldPanel("button2_text"),
-                        FieldPanel("button2_download_link"),
-                    ],
-                    heading="Download Link Buttons",
-                ),
+                FieldPanel("download_buttons"),
             ],
             heading="Hero Section",
         ),
diff --git a/network-api/networkapi/wagtailpages/pagemodels/customblocks/__init__.py b/network-api/networkapi/wagtailpages/pagemodels/customblocks/__init__.py
index 953b5bf4221..8d672a338cb 100644
--- a/network-api/networkapi/wagtailpages/pagemodels/customblocks/__init__.py
+++ b/network-api/networkapi/wagtailpages/pagemodels/customblocks/__init__.py
@@ -4,6 +4,7 @@
 from .advanced_table_block import AdvancedTableBlock
 from .airtable_block import AirTableBlock
 from .annotated_image_block import AnnotatedImageBlock
+from .app_install_download_button_block import AppInstallDownloadButtonBlock
 from .article_teaser_block import ArticleTeaserBlock
 from .articles import (
     ArticleDoubleImageBlock,
diff --git a/network-api/networkapi/wagtailpages/pagemodels/customblocks/app_install_download_button_block.py b/network-api/networkapi/wagtailpages/pagemodels/customblocks/app_install_download_button_block.py
new file mode 100644
index 00000000000..75b5a1e404b
--- /dev/null
+++ b/network-api/networkapi/wagtailpages/pagemodels/customblocks/app_install_download_button_block.py
@@ -0,0 +1,12 @@
+from wagtail import blocks
+from wagtail.images.blocks import ImageChooserBlock
+
+from networkapi.wagtailpages.pagemodels.customblocks.link_block import LinkBlock
+
+
+class AppInstallDownloadButtonBlock(LinkBlock):
+    icon = ImageChooserBlock(required=False)
+    icon_alt_text = blocks.CharBlock(required=False, help_text="Image description (for screen readers).")
+
+    class Meta:
+        template = "wagtailpages/blocks/app_install_download_button_block.html"
diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/app_install_download_button_block.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/app_install_download_button_block.html
new file mode 100644
index 00000000000..717f7a962a1
--- /dev/null
+++ b/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/app_install_download_button_block.html
@@ -0,0 +1,10 @@
+
+{% load wagtailcore_tags wagtailimages_tags i18n %}
+
+<a class="tw-max-w-max tw-btn tw-bg-white hover:tw-bg-gray-20 tw-transition-colors tw-border-black tw-border-2" href="{{value.url}}" target="_blank">
+    {% if value.icon %}
+        {% image value.icon original as btn_icon %}
+        <img src="{{ btn_icon.url }}" alt="{{ value.icon_alt_text }}" class="tw-mr-2 tw-inline tw-filter tw-grayscale tw-contrast-200 tw-brightness-75" width="24" height="24">
+    {% endif %}
+    <span>{{ value.label }}</span>
+</a>
diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/fragments/app_install_hero.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/fragments/app_install_hero.html
index b5fef84821b..a40fe813167 100644
--- a/network-api/networkapi/wagtailpages/templates/wagtailpages/fragments/app_install_hero.html
+++ b/network-api/networkapi/wagtailpages/templates/wagtailpages/fragments/app_install_hero.html
@@ -5,57 +5,41 @@
     <div
     class="publication-hero-container tw-relative tw-bg-gradient-to-b tw-from-gray-60 tw-to-gray-80 tw-pt-36 tw-pb-48 medium:tw-pt-72 medium:tw-pb-96"
 >
-        <div class="tw-absolute tw-inset-0">
-            {% include "./responsive_screen_wide_image.html" with image_object=page.hero_background %}
-            <div class="tw-absolute tw-inset-0" aria-hidden="true"></div>
-        </div>
-    <div class="tw-relative container">
-        <div class="row">
-            <div class="tw-px-6 small:tw-px-24 large:tw-container large:tw-px-0">
-                <div class="tw-grid tw-gap-x-24 tw-grid-cols-1 tw-px-8 medium:tw-grid-cols-2 ">
-                    <div class="tw-flex tw-flex-col tw-justify-center">
-                        <h2 class="tw-mb-8 tw-text-white tw-h1-heading tw-font-light tw-text-4xl large:tw-text-5xl">
-                            {{ page.hero_heading }}
-                        </h2>
-                        <p class="tw-body-large tw-text-white tw-font-light tw-pb-4">
-                            {{ page.hero_subheading }}
-                        </p>
-                        {% with download_btn_classes="tw-max-w-max tw-btn tw-bg-white hover:tw-bg-gray-20 tw-transition-colors tw-border-black tw-border-2" btn_image_classes="tw-mr-2 tw-inline" %}
-                            <div class="download-btn-wrapper">
-                                <div class="btn-container tw-mt-2 tw-flex tw-flex-wrap tw-gap-8">
-                                    {% if page.button1_text and page.button1_download_link %}
-                                        <a class="{{ download_btn_classes }}" href="{{ page.button1_download_link }}" target="_blank">
-                                            {% if page.button1_image %}
-                                                {% image page.button1_image original as btn1_image %}
-                                                <img src="{{ btn1_image.url }}" alt="{{ page.button1_image_alt }}" class="{{ btn_image_classes }}" width="24" height="24">
-                                            {% endif %}
-                                            {{ page.button1_text }}
-                                        </a>
-                                    {% endif %}
-                                    {% if page.button2_text and page.button2_download_link %}
-                                        <a class="{{ download_btn_classes }}" href="{{ page.button2_download_link }}" target="_blank">
-                                            {% if page.button2_image %}
-                                                {% image page.button2_image original as btn2_image %}
-                                                <img src="{{ btn2_image.url }}" alt="{{ page.button2_image_alt }}" class="{{ btn_image_classes }}" width="24" height="24">
-                                            {% endif %}
-                                            {{ page.button2_text }}
-                                        </a>
-                                    {% endif %}
+<div class="tw-absolute tw-inset-0">
+    {% include "./responsive_screen_wide_image.html" with image_object=page.hero_background %}
+    <div class="tw-absolute tw-inset-0" aria-hidden="true"></div>
+</div>
+<div class="tw-relative container">
+                <div class="row">
+                    <div class="tw-px-6 small:tw-px-24 large:tw-container large:tw-px-0">
+                        <div class="tw-grid tw-gap-x-24 tw-grid-cols-1 tw-px-8 medium:tw-grid-cols-2 ">
+                            <div class="tw-flex tw-flex-col tw-justify-center">
+                                <h2 class="tw-mb-8 tw-text-white tw-h1-heading tw-font-light tw-text-4xl large:tw-text-5xl">
+                                    {{ page.hero_heading }}
+                                </h2>
+                                <p class="tw-body-large tw-text-white tw-font-light tw-pb-4">
+                                    {{ page.hero_subheading }}
+                                </p>
+                                <div class="download-btn-wrapper">
+                                    <div class="btn-container tw-mt-2 tw-flex tw-flex-wrap tw-gap-8">
+                                        {% for block in page.download_buttons %}
+                                            {% include_block block %}
+                                        {% endfor %}
+                                    </div>
                                 </div>
                             </div>
-                        {% endwith %}
-                    </div>
-                    {% if page.hero_video %}
-                        <div class="tw-flex tw-flex-col tw-justify-center tw-mt-12 medium:tw-mt-0 large:tw-mt-12">
-                            <div class="video-container tw-overflow-hidden tw-relative tw-w-full after:tw-pt-[56.25%] after:tw-block after:tw-content-['']">
-                                <iframe class="tw-absolute tw-top-0 tw-left-0 tw-w-full tw-h-full" src="{{ page.hero_video }}" allowfullscreen></iframe>
-                            </div>
+                            {% if page.hero_video %}
+                                <div class="tw-flex tw-flex-col tw-justify-center tw-mt-12 medium:tw-mt-0 large:tw-mt-12">
+                                    <div class="video-container tw-overflow-hidden tw-relative tw-w-full after:tw-pt-[56.25%] after:tw-block after:tw-content-['']">
+                                        <iframe class="tw-absolute tw-top-0 tw-left-0 tw-w-full tw-h-full" src="{{ page.hero_video }}" allowfullscreen></iframe>
+                                    </div>
+                                </div>
+                            {% endif %}
                         </div>
-                    {% endif %}
+                    </div>
                 </div>
             </div>
         </div>
-    </div>
 </div>
 
 

From 3f66f2722eb9110c8ae9d4bd5ef23d83274eee9d Mon Sep 17 00:00:00 2001
From: danielfmiranda <manieldiranda@gmail.com>
Date: Tue, 2 Apr 2024 13:10:42 -0700
Subject: [PATCH 13/20] updated button styling

---
 .../blocks/app_install_download_button_block.html             | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/app_install_download_button_block.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/app_install_download_button_block.html
index 717f7a962a1..17178dbf0ac 100644
--- a/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/app_install_download_button_block.html
+++ b/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/app_install_download_button_block.html
@@ -1,10 +1,10 @@
 
 {% load wagtailcore_tags wagtailimages_tags i18n %}
 
-<a class="tw-max-w-max tw-btn tw-bg-white hover:tw-bg-gray-20 tw-transition-colors tw-border-black tw-border-2" href="{{value.url}}" target="_blank">
+<a class="tw-btn-secondary tw-bg-white hover:tw-bg-black tw-transition-colors  tw-border-2 tw-group after:tw-hidden tw-flex tw-items-center tw-gap-x-4" href="{{value.url}}" target="_blank">
     {% if value.icon %}
         {% image value.icon original as btn_icon %}
-        <img src="{{ btn_icon.url }}" alt="{{ value.icon_alt_text }}" class="tw-mr-2 tw-inline tw-filter tw-grayscale tw-contrast-200 tw-brightness-75" width="24" height="24">
+        <img src="{{ btn_icon.url }}" alt="{{ value.icon_alt_text }}" class="tw-inline tw-brightness-0 group-hover:tw-invert tw-transition-all" width="24" height="24">
     {% endif %}
     <span>{{ value.label }}</span>
 </a>

From a390a1ec16b550486f687b99124eb08903e1db0f Mon Sep 17 00:00:00 2001
From: danielfmiranda <manieldiranda@gmail.com>
Date: Tue, 2 Apr 2024 17:04:45 -0700
Subject: [PATCH 14/20] feedback from design and devs

---
 .../migrations/0133_appinstallpage.py         | 11 ++-
 .../wagtailpages/pagemodels/app_install.py    |  5 +-
 .../app_install_download_button_block.py      |  2 +-
 .../app_install_download_button_block.html    |  6 +-
 .../fragments/app_install_hero.html           | 70 ++++++++-----------
 .../responsive_screen_wide_image.html         | 60 ----------------
 6 files changed, 44 insertions(+), 110 deletions(-)
 delete mode 100644 network-api/networkapi/wagtailpages/templates/wagtailpages/fragments/responsive_screen_wide_image.html

diff --git a/network-api/networkapi/wagtailpages/migrations/0133_appinstallpage.py b/network-api/networkapi/wagtailpages/migrations/0133_appinstallpage.py
index 31dd8c830cd..163326b21d9 100644
--- a/network-api/networkapi/wagtailpages/migrations/0133_appinstallpage.py
+++ b/network-api/networkapi/wagtailpages/migrations/0133_appinstallpage.py
@@ -1,4 +1,4 @@
-# Generated by Django 4.2.11 on 2024-04-02 18:55
+# Generated by Django 4.2.11 on 2024-04-03 00:02
 
 import django.db.models.deletion
 import wagtail.blocks
@@ -111,7 +111,13 @@ class Migration(migrations.Migration):
                                             "new_window",
                                             wagtail.blocks.BooleanBlock(label="Open in new window", required=False),
                                         ),
-                                        ("icon", wagtail.images.blocks.ImageChooserBlock(required=False)),
+                                        (
+                                            "icon",
+                                            wagtail.images.blocks.ImageChooserBlock(
+                                                help_text="For best results, please use black or white icons.",
+                                                required=False,
+                                            ),
+                                        ),
                                         (
                                             "icon_alt_text",
                                             wagtail.blocks.CharBlock(
@@ -122,6 +128,7 @@ class Migration(migrations.Migration):
                                 ),
                             )
                         ],
+                        blank=True,
                         use_json_field=True,
                     ),
                 ),
diff --git a/network-api/networkapi/wagtailpages/pagemodels/app_install.py b/network-api/networkapi/wagtailpages/pagemodels/app_install.py
index 2a73bb42f38..66ee51e0d7c 100644
--- a/network-api/networkapi/wagtailpages/pagemodels/app_install.py
+++ b/network-api/networkapi/wagtailpages/pagemodels/app_install.py
@@ -37,17 +37,18 @@ class AppInstallPage(CampaignPage):
         ],
         use_json_field=True,
         max_num=2,
+        blank=True,
     )
 
     content_panels = [
         FieldPanel("title"),
         MultiFieldPanel(
             [
+                FieldPanel("hero_background"),
                 FieldPanel("hero_heading"),
                 FieldPanel("hero_subheading"),
-                FieldPanel("hero_background"),
-                FieldPanel("hero_video"),
                 FieldPanel("download_buttons"),
+                FieldPanel("hero_video"),
             ],
             heading="Hero Section",
         ),
diff --git a/network-api/networkapi/wagtailpages/pagemodels/customblocks/app_install_download_button_block.py b/network-api/networkapi/wagtailpages/pagemodels/customblocks/app_install_download_button_block.py
index 75b5a1e404b..4fea9baedff 100644
--- a/network-api/networkapi/wagtailpages/pagemodels/customblocks/app_install_download_button_block.py
+++ b/network-api/networkapi/wagtailpages/pagemodels/customblocks/app_install_download_button_block.py
@@ -5,7 +5,7 @@
 
 
 class AppInstallDownloadButtonBlock(LinkBlock):
-    icon = ImageChooserBlock(required=False)
+    icon = ImageChooserBlock(required=False, help_text="For best results, please use black or white icons.")
     icon_alt_text = blocks.CharBlock(required=False, help_text="Image description (for screen readers).")
 
     class Meta:
diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/app_install_download_button_block.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/app_install_download_button_block.html
index 17178dbf0ac..8d37133f9fb 100644
--- a/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/app_install_download_button_block.html
+++ b/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/app_install_download_button_block.html
@@ -1,10 +1,10 @@
 
-{% load wagtailcore_tags wagtailimages_tags i18n %}
+{% load wagtailcore_tags wagtailimages_tags %}
 
-<a class="tw-btn-secondary tw-bg-white hover:tw-bg-black tw-transition-colors  tw-border-2 tw-group after:tw-hidden tw-flex tw-items-center tw-gap-x-4" href="{{value.url}}" target="_blank">
+<a class="tw-group tw-btn-secondary tw-w-max tw-border-2 tw-flex tw-items-center tw-gap-x-4 tw-transition-colors tw-bg-white hover:tw-bg-black  after:tw-hidden" href="{{ value.url }}" target="_blank">
     {% if value.icon %}
         {% image value.icon original as btn_icon %}
-        <img src="{{ btn_icon.url }}" alt="{{ value.icon_alt_text }}" class="tw-inline tw-brightness-0 group-hover:tw-invert tw-transition-all" width="24" height="24">
+        <img src="{{ btn_icon.url }}" alt="{{ value.icon_alt_text }}" class="tw-inline tw-brightness-0 group-hover:tw-invert tw-transition-all" width="18" height="18">
     {% endif %}
     <span>{{ value.label }}</span>
 </a>
diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/fragments/app_install_hero.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/fragments/app_install_hero.html
index a40fe813167..a56a462ca79 100644
--- a/network-api/networkapi/wagtailpages/templates/wagtailpages/fragments/app_install_hero.html
+++ b/network-api/networkapi/wagtailpages/templates/wagtailpages/fragments/app_install_hero.html
@@ -1,47 +1,33 @@
-{% load i18n wagtailcore_tags wagtailimages_tags %}
+{% load wagtailcore_tags wagtailimages_tags %}
 
-<!-- {% image page.hero_background original as hero_background %} -->
-
-    <div
-    class="publication-hero-container tw-relative tw-bg-gradient-to-b tw-from-gray-60 tw-to-gray-80 tw-pt-36 tw-pb-48 medium:tw-pt-72 medium:tw-pb-96"
->
-<div class="tw-absolute tw-inset-0">
-    {% include "./responsive_screen_wide_image.html" with image_object=page.hero_background %}
-    <div class="tw-absolute tw-inset-0" aria-hidden="true"></div>
-</div>
-<div class="tw-relative container">
-                <div class="row">
-                    <div class="tw-px-6 small:tw-px-24 large:tw-container large:tw-px-0">
-                        <div class="tw-grid tw-gap-x-24 tw-grid-cols-1 tw-px-8 medium:tw-grid-cols-2 ">
-                            <div class="tw-flex tw-flex-col tw-justify-center">
-                                <h2 class="tw-mb-8 tw-text-white tw-h1-heading tw-font-light tw-text-4xl large:tw-text-5xl">
-                                    {{ page.hero_heading }}
-                                </h2>
-                                <p class="tw-body-large tw-text-white tw-font-light tw-pb-4">
-                                    {{ page.hero_subheading }}
-                                </p>
-                                <div class="download-btn-wrapper">
-                                    <div class="btn-container tw-mt-2 tw-flex tw-flex-wrap tw-gap-8">
-                                        {% for block in page.download_buttons %}
-                                            {% include_block block %}
-                                        {% endfor %}
-                                    </div>
-                                </div>
-                            </div>
-                            {% if page.hero_video %}
-                                <div class="tw-flex tw-flex-col tw-justify-center tw-mt-12 medium:tw-mt-0 large:tw-mt-12">
-                                    <div class="video-container tw-overflow-hidden tw-relative tw-w-full after:tw-pt-[56.25%] after:tw-block after:tw-content-['']">
-                                        <iframe class="tw-absolute tw-top-0 tw-left-0 tw-w-full tw-h-full" src="{{ page.hero_video }}" allowfullscreen></iframe>
-                                    </div>
-                                </div>
-                            {% endif %}
+<div id="app-install-hero" class="tw-relative tw-flex tw-flex-col tw-items-center tw-justify-center tw-h-full tw-overflow-hidden">
+    <div class="tw-absolute tw-inset-0">
+        {% include "fragments/responsive_screen_wide_image.html" with image_object=page.hero_background %}
+    </div>
+    <div class="tw-relative tw-container tw-px-8 {% if page.hero_video %} tw-py-32 {% else %} tw-pt-40 tw-pb-56 medium:tw-pt-56 medium:tw-pb-72 {% endif %} large:tw-pt-64 large:tw-pb-80">
+        <div class="tw-grid tw-grid-cols-1 large:tw-grid-cols-2 {% if page.hero_video %} tw-gap-x-32 {% endif %} ">
+            <div class="tw-flex tw-flex-col tw-justify-center">
+                <h2 class="tw-mb-8 tw-h1-heading tw-text-white tw-font-light tw-text-4xl large:tw-text-5xl">
+                    {{ page.hero_heading }}
+                </h2>
+                <p class="tw-pb-4 tw-body-large tw-text-white tw-font-light">
+                    {{ page.hero_subheading }}
+                </p>
+                {% if page.download_buttons %}
+                    <div class="download-btn-wrapper">
+                        <div class="tw-mt-2 tw-flex tw-flex-wrap tw-flex-col medium:tw-flex-row tw-gap-8">
+                            {% for block in page.download_buttons %}
+                                {% include_block block %}
+                            {% endfor %}
                         </div>
                     </div>
-                </div>
+                {% endif %}
             </div>
+            {% if page.hero_video %}
+                <div class="tw-mt-14 tw-overflow-hidden tw-relative tw-w-full after:tw-pt-[56.25%] after:tw-block after:tw-content-['']">
+                    <iframe class="tw-absolute tw-top-0 tw-left-0 tw-w-full tw-h-full" src="{{ page.hero_video }}" allowfullscreen></iframe>
+                </div>
+            {% endif %}
         </div>
-</div>
-
-
-
-
+    </div>
+</div>
\ No newline at end of file
diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/fragments/responsive_screen_wide_image.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/fragments/responsive_screen_wide_image.html
deleted file mode 100644
index d48548f65db..00000000000
--- a/network-api/networkapi/wagtailpages/templates/wagtailpages/fragments/responsive_screen_wide_image.html
+++ /dev/null
@@ -1,60 +0,0 @@
-{% load wagtailimages_tags %}
-
-<picture
->
-    {% comment %}
-    Screen sizes
-    small: "576px",
-    medium: "768px",
-    large: "992px",
-    xlarge: "1200px",
-    "2xl": "1400px",
-  {% endcomment %}
-    {% if not is_pattern_library %}
-        {% image image_object width-576 as img_576 %}
-        {% image image_object width-1152 as img_576_2x %}
-        {% image image_object width-768 as img_768 %}
-        {% image image_object width-1536 as img_768_2x %}
-        {% image image_object width-992 as img_992 %}
-        {% image image_object width-1984 as img_992_2x %}
-        {% image image_object width-1200 as img_1200 %}
-        {% image image_object width-2400 as img_1200_2x %}
-        {% image image_object width-1400 as img_1400 %}
-        {% image image_object width-2800 as img_1400_2x %}
-        {% image image_object original as img_original %}
-    {% endif %}
-    <source
-        media="(max-width: 576px)"
-        srcset="{{ img_576.url }}, {{ img_576_2x.url }} 2x"
-    />
-    <source
-        media="(max-width: 768px)"
-        srcset="{{ img_768.url }}, {{ img_768_2x.url }} 2x"
-    />
-    <source
-        media="(max-width: 992px)"
-        srcset="{{ img_992.url }}, {{ img_992_2x.url }} 2x"
-    />
-    <source
-        media="(max-width: 1200px)"
-        srcset="{{ img_1200.url }}, {{ img_1200_2x.url }} 2x"
-    />
-    <source
-        media="(max-width: 1400px)"
-        srcset="{{ img_1400.url }}, {{ img_1400_2x.url }} 2x"
-    />
-    <source
-        media="(min-width: 1401px)"
-        srcset="{{ img_original.url }}"
-    />
-    <img
-        class="tw-h-full tw-w-full tw-object-cover"
-        {% comment %}
-      This is only loaded when the browser does not know the picture and source element.
-      Trying to fall back to some reasonably sized image that should work on most screens.
-      Assuming low probability for a high res screen (since it's an outdated browser).
-    {% endcomment %}
-        src="{{ img_1200.url }}"
-        alt=""
-    >
-</picture>

From bb8fe7a0290ccf70105cbe4d384c1786b185c800 Mon Sep 17 00:00:00 2001
From: danielfmiranda <manieldiranda@gmail.com>
Date: Tue, 2 Apr 2024 17:18:30 -0700
Subject: [PATCH 15/20] updated imports, new line, and default alt text. (ready
 for review)

---
 .../templates/fragments/responsive_screen_wide_image.html   | 4 ++--
 .../networkapi/wagtailpages/pagemodels/app_install.py       | 6 ++++--
 .../templates/wagtailpages/fragments/app_install_hero.html  | 2 +-
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/network-api/networkapi/templates/fragments/responsive_screen_wide_image.html b/network-api/networkapi/templates/fragments/responsive_screen_wide_image.html
index d48548f65db..977d4733b29 100644
--- a/network-api/networkapi/templates/fragments/responsive_screen_wide_image.html
+++ b/network-api/networkapi/templates/fragments/responsive_screen_wide_image.html
@@ -1,4 +1,4 @@
-{% load wagtailimages_tags %}
+{% load wagtailimages_tags i18n %}
 
 <picture
 >
@@ -55,6 +55,6 @@
       Assuming low probability for a high res screen (since it's an outdated browser).
     {% endcomment %}
         src="{{ img_1200.url }}"
-        alt=""
+        alt="{% trans "Hero Image" %}"
     >
 </picture>
diff --git a/network-api/networkapi/wagtailpages/pagemodels/app_install.py b/network-api/networkapi/wagtailpages/pagemodels/app_install.py
index 66ee51e0d7c..5d2f6af8084 100644
--- a/network-api/networkapi/wagtailpages/pagemodels/app_install.py
+++ b/network-api/networkapi/wagtailpages/pagemodels/app_install.py
@@ -2,8 +2,10 @@
 from wagtail.admin.panels import FieldPanel, InlinePanel, MultiFieldPanel
 from wagtail.fields import StreamField
 
-from . import customblocks
 from .campaigns import CampaignPage
+from .customblocks.app_install_download_button_block import (
+    AppInstallDownloadButtonBlock,
+)
 
 
 class AppInstallPage(CampaignPage):
@@ -33,7 +35,7 @@ class AppInstallPage(CampaignPage):
     )
     download_buttons = StreamField(
         [
-            ("button", customblocks.AppInstallDownloadButtonBlock()),
+            ("button", AppInstallDownloadButtonBlock()),
         ],
         use_json_field=True,
         max_num=2,
diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/fragments/app_install_hero.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/fragments/app_install_hero.html
index a56a462ca79..7d174dd265c 100644
--- a/network-api/networkapi/wagtailpages/templates/wagtailpages/fragments/app_install_hero.html
+++ b/network-api/networkapi/wagtailpages/templates/wagtailpages/fragments/app_install_hero.html
@@ -30,4 +30,4 @@ <h2 class="tw-mb-8 tw-h1-heading tw-text-white tw-font-light tw-text-4xl large:t
             {% endif %}
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>

From 71ac3281c6374d9469b06354dbb3f6f0667523ce Mon Sep 17 00:00:00 2001
From: danielfmiranda <manieldiranda@gmail.com>
Date: Wed, 3 Apr 2024 12:52:43 -0700
Subject: [PATCH 16/20] hiding campaign_page_menu on app_install page template

---
 .../wagtailpages/templates/wagtailpages/app_install_page.html  | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/app_install_page.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/app_install_page.html
index 2e004aa5cca..a2c4bbacc8c 100644
--- a/network-api/networkapi/wagtailpages/templates/wagtailpages/app_install_page.html
+++ b/network-api/networkapi/wagtailpages/templates/wagtailpages/app_install_page.html
@@ -12,6 +12,9 @@
 {% block campaign_page_header %}
 {% endblock campaign_page_header %}
 
+{% block campaign_page_menu %}
+{% endblock campaign_page_menu %}
+
 {% block html_content_mobile %}
 {% endblock html_content_mobile %}
 

From e6bf9258863cb37db2b58e8bbdf8e7eee6bc8cf8 Mon Sep 17 00:00:00 2001
From: danielfmiranda <manieldiranda@gmail.com>
Date: Wed, 3 Apr 2024 13:00:34 -0700
Subject: [PATCH 17/20] translatable fields. Ready for review

---
 .../networkapi/wagtailpages/pagemodels/app_install.py    | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/network-api/networkapi/wagtailpages/pagemodels/app_install.py b/network-api/networkapi/wagtailpages/pagemodels/app_install.py
index 5d2f6af8084..9cfac4c13f4 100644
--- a/network-api/networkapi/wagtailpages/pagemodels/app_install.py
+++ b/network-api/networkapi/wagtailpages/pagemodels/app_install.py
@@ -1,6 +1,7 @@
 from django.db import models
 from wagtail.admin.panels import FieldPanel, InlinePanel, MultiFieldPanel
 from wagtail.fields import StreamField
+from wagtail_localize.fields import SynchronizedField, TranslatableField
 
 from .campaigns import CampaignPage
 from .customblocks.app_install_download_button_block import (
@@ -64,6 +65,14 @@ class AppInstallPage(CampaignPage):
         ),
     ]
 
+    translatable_fields = CampaignPage.translatable_fields + [
+        SynchronizedField("hero_background"),
+        TranslatableField("hero_heading"),
+        TranslatableField("hero_subheading"),
+        TranslatableField("download_buttons"),
+        SynchronizedField("hero_video"),
+    ]
+
     subpage_types = [
         "BanneredCampaignPage",
         "OpportunityPage",

From b968758dcc8523fa19475c3ef691c6f15cde8c6c Mon Sep 17 00:00:00 2001
From: danielfmiranda <manieldiranda@gmail.com>
Date: Thu, 4 Apr 2024 15:06:15 -0700
Subject: [PATCH 18/20] updated button focus state per PR feedback

---
 .../blocks/app_install_download_button_block.html             | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/app_install_download_button_block.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/app_install_download_button_block.html
index 8d37133f9fb..f22124ca6c6 100644
--- a/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/app_install_download_button_block.html
+++ b/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/app_install_download_button_block.html
@@ -1,10 +1,10 @@
 
 {% load wagtailcore_tags wagtailimages_tags %}
 
-<a class="tw-group tw-btn-secondary tw-w-max tw-border-2 tw-flex tw-items-center tw-gap-x-4 tw-transition-colors tw-bg-white hover:tw-bg-black  after:tw-hidden" href="{{ value.url }}" target="_blank">
+<a class="tw-group tw-btn-secondary tw-w-max tw-border-2 tw-flex tw-items-center tw-gap-x-4 tw-transition-colors tw-bg-white hover:tw-bg-black focus:tw-bg-black after:tw-hidden" href="{{ value.url }}" target="_blank">
     {% if value.icon %}
         {% image value.icon original as btn_icon %}
-        <img src="{{ btn_icon.url }}" alt="{{ value.icon_alt_text }}" class="tw-inline tw-brightness-0 group-hover:tw-invert tw-transition-all" width="18" height="18">
+        <img src="{{ btn_icon.url }}" alt="{{ value.icon_alt_text }}" class="tw-inline tw-brightness-0 group-hover:tw-invert group-focus:tw-invert tw-transition-all" width="18" height="18">
     {% endif %}
     <span>{{ value.label }}</span>
 </a>

From b48c2fd0dcfeebb54d94abe2e91500b89cd6648f Mon Sep 17 00:00:00 2001
From: danielfmiranda <manieldiranda@gmail.com>
Date: Thu, 4 Apr 2024 17:35:49 -0700
Subject: [PATCH 19/20] button update

---
 .../wagtailpages/blocks/app_install_download_button_block.html  | 2 +-
 .../templates/wagtailpages/fragments/app_install_hero.html      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/app_install_download_button_block.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/app_install_download_button_block.html
index f22124ca6c6..cc0fae4bfc9 100644
--- a/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/app_install_download_button_block.html
+++ b/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/app_install_download_button_block.html
@@ -1,7 +1,7 @@
 
 {% load wagtailcore_tags wagtailimages_tags %}
 
-<a class="tw-group tw-btn-secondary tw-w-max tw-border-2 tw-flex tw-items-center tw-gap-x-4 tw-transition-colors tw-bg-white hover:tw-bg-black focus:tw-bg-black after:tw-hidden" href="{{ value.url }}" target="_blank">
+<a class="tw-btn-secondary tw-flex tw-items-center tw-justify-center tw-gap-x-4 tw-transition-colors tw-bg-white hover:tw-bg-black focus:tw-bg-black after:tw-hidden" href="{{ value.url }}" target="_blank">
     {% if value.icon %}
         {% image value.icon original as btn_icon %}
         <img src="{{ btn_icon.url }}" alt="{{ value.icon_alt_text }}" class="tw-inline tw-brightness-0 group-hover:tw-invert group-focus:tw-invert tw-transition-all" width="18" height="18">
diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/fragments/app_install_hero.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/fragments/app_install_hero.html
index 7d174dd265c..90bc044e572 100644
--- a/network-api/networkapi/wagtailpages/templates/wagtailpages/fragments/app_install_hero.html
+++ b/network-api/networkapi/wagtailpages/templates/wagtailpages/fragments/app_install_hero.html
@@ -15,7 +15,7 @@ <h2 class="tw-mb-8 tw-h1-heading tw-text-white tw-font-light tw-text-4xl large:t
                 </p>
                 {% if page.download_buttons %}
                     <div class="download-btn-wrapper">
-                        <div class="tw-mt-2 tw-flex tw-flex-wrap tw-flex-col medium:tw-flex-row tw-gap-8">
+                        <div class="tw-mt-2 tw-grid tw-grid-flow-row tw-auto-cols-max tw-gap-8 medium:tw-grid-flow-col">
                             {% for block in page.download_buttons %}
                                 {% include_block block %}
                             {% endfor %}

From c7d76c3b30b217b93c5decf04d50d3c387493f24 Mon Sep 17 00:00:00 2001
From: danielfmiranda <manieldiranda@gmail.com>
Date: Thu, 4 Apr 2024 17:42:28 -0700
Subject: [PATCH 20/20] accidentally deleted tw-group on the download buttons

---
 .../wagtailpages/blocks/app_install_download_button_block.html  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/app_install_download_button_block.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/app_install_download_button_block.html
index cc0fae4bfc9..5379523e8e6 100644
--- a/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/app_install_download_button_block.html
+++ b/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/app_install_download_button_block.html
@@ -1,7 +1,7 @@
 
 {% load wagtailcore_tags wagtailimages_tags %}
 
-<a class="tw-btn-secondary tw-flex tw-items-center tw-justify-center tw-gap-x-4 tw-transition-colors tw-bg-white hover:tw-bg-black focus:tw-bg-black after:tw-hidden" href="{{ value.url }}" target="_blank">
+<a class="tw-group tw-btn-secondary tw-flex tw-items-center tw-justify-center tw-gap-x-4 tw-transition-colors tw-bg-white hover:tw-bg-black focus:tw-bg-black after:tw-hidden" href="{{ value.url }}" target="_blank">
     {% if value.icon %}
         {% image value.icon original as btn_icon %}
         <img src="{{ btn_icon.url }}" alt="{{ value.icon_alt_text }}" class="tw-inline tw-brightness-0 group-hover:tw-invert group-focus:tw-invert tw-transition-all" width="18" height="18">