Homepage refresh new intro section

network-api/networkapi/wagtailpages/factory/homepage.py

@@ -26,6 +26,9 @@ class Meta:
     hero_image = SubFactory(ImageFactory)
     cause_statement = Faker("text", max_nb_chars=150)
     # cause_statement_link_text and cause_statement_link_page are created at a later state
+    hero_intro_heading = Faker("text", max_nb_chars=60)
+    hero_intro_body = Faker("text", max_nb_chars=250)
+    hero_intro_link_text = Faker("text", max_nb_chars=30)
     quote_image = SubFactory(ImageFactory)
     quote_text = Faker("text", max_nb_chars=300)
     quote_source_name = Faker("text", max_nb_chars=30)
@@ -102,6 +105,10 @@ def generate(seed):
         print('Generating "who we are" Page (PrimaryPage)')
         wwa_page = PrimaryPageFactory.create(parent=home_page, title="Who we are", show_in_menus=True)
 
+    # Set the hero_intro_link_page
+    home_page.hero_intro_link_page = wwa_page
+    home_page.save()
+
     reseed(seed)
 
     print('Generating child pages for "who we are" page')

network-api/networkapi/wagtailpages/migrations/0163_remove_focusarea_page_homepage_hero_intro_body_and_more.py

@@ -0,0 +1,45 @@
+# Generated by Django 4.2.15 on 2024-09-19 20:09
+
+import django.db.models.deletion
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("wagtailcore", "0089_log_entry_data_json_null_to_object"),
+        ("wagtailpages", "0162_alter_articlepage_body"),
+    ]
+
+    operations = [
+        migrations.RemoveField(
+            model_name="focusarea",
+            name="page",
+        ),
+        migrations.AddField(
+            model_name="homepage",
+            name="hero_intro_body",
+            field=models.TextField(blank=True, max_length=300),
+        ),
+        migrations.AddField(
+            model_name="homepage",
+            name="hero_intro_heading",
+            field=models.CharField(blank=True, max_length=100),
+        ),
+        migrations.AddField(
+            model_name="homepage",
+            name="hero_intro_link_page",
+            field=models.ForeignKey(
+                blank=True,
+                null=True,
+                on_delete=django.db.models.deletion.SET_NULL,
+                related_name="hero_intro_link",
+                to="wagtailcore.page",
+            ),
+        ),
+        migrations.AddField(
+            model_name="homepage",
+            name="hero_intro_link_text",
+            field=models.CharField(blank=True, max_length=50),
+        ),
+    ]

network-api/networkapi/wagtailpages/pagemodels/base.py

@@ -604,19 +604,10 @@ class FocusArea(TranslatableMixin, models.Model):
         help_text="Description of this area of focus. Max. 300 characters.",
     )
 
-    page = models.ForeignKey(
-        "wagtailcore.Page",
-        blank=True,
-        null=True,
-        on_delete=models.SET_NULL,
-        related_name="+",
-    )
-
     panels = [
         FieldPanel("interest_icon"),
         FieldPanel("name"),
         FieldPanel("description"),
-        FieldPanel("page"),
     ]
 
     translatable_fields = [
@@ -764,6 +755,17 @@ def get_banner(self):
 
     hero_button_url = models.URLField(blank=True)
 
+    hero_intro_heading = models.CharField(max_length=100, blank=True)
+    hero_intro_body = models.TextField(max_length=300, blank=True)
+    hero_intro_link_text = models.CharField(max_length=50, blank=True)
+    hero_intro_link_page = models.ForeignKey(
+        Page,
+        null=True,
+        blank=True,
+        on_delete=models.SET_NULL,
+        related_name="hero_intro_link",
+    )
+
     ideas_image = models.ForeignKey(
         "wagtailimages.Image",
         null=True,
@@ -865,6 +867,16 @@ def get_banner(self):
             heading="cause statement",
             classname="collapsible collapsed",
         ),
+        MultiFieldPanel(
+            [
+                FieldPanel("hero_intro_heading"),
+                FieldPanel("hero_intro_body"),
+                FieldPanel("hero_intro_link_text"),
+                FieldPanel("hero_intro_link_page"),
+            ],
+            heading="Hero Intro Box",
+            classname="collapsible",
+        ),
         MultiFieldPanel(
             [
                 InlinePanel("focus_areas", min_num=3, max_num=3),
@@ -933,6 +945,10 @@ def get_banner(self):
         SynchronizedField("hero_image"),
         TranslatableField("hero_button_text"),
         SynchronizedField("hero_button_url"),
+        TranslatableField("hero_intro_heading"),
+        TranslatableField("hero_intro_body"),
+        TranslatableField("hero_intro_link_text"),
+        SynchronizedField("hero_intro_link_page"),
         SynchronizedField("ideas_image"),
         TranslatableField("ideas_headline"),
         TranslatableField("cause_statement"),

network-api/networkapi/wagtailpages/templates/wagtailpages/fragments/focus_area.html

@@ -1,15 +1,11 @@
-{% load wagtailimages_tags i18n %}
+{% load wagtailimages_tags %}
 
-<div class="col-12 col-lg-4 mb-3 mb-lg-0 d-block d-sm-flex flex-sm-row flex-lg-column">
-    {% image area.interest_icon width-100 class="icon flex-shrink-0 mb-3 mb-sm-0 mb-lg-3 mr-sm-5 align-self-start" alt=area.interest_icon.title %}
+<div class="tw-flex tw-flex-col tw-items-center medium:tw-flex-row tw-gap-16 medium:tw-mx-auto medium:tw-w-[29rem]">
+    {% image area.interest_icon width-100 class="tw-max-w-[4em] tw-max-h-[4em]" alt=area.interest_icon.title %}
 
-    <div class="focus-content">
-        <h2 class="tw-h4-heading">{{ area.name }}</h2>
+    <div class="tw-text-center medium:tw-text-left">
+        <h2 class="tw-font-zilla tw-text-[40px] tw-mb-0">{{ area.name }}</h2>
         <p>{{ area.description }}</p>
-
-        {% if area.page %}<div class="mb-4 learn-more-link">
-            <a href="{{ area.page.localized.url }}" aria-label="{% blocktrans with name=area.name %}Learn more about: {{ name }}{% endblocktrans %}">{% trans "Learn more →" %}</a>
-        </div>{% endif %}
     </div>
 </div>
 

network-api/networkapi/wagtailpages/templates/wagtailpages/fragments/focus_areas.html

@@ -1,12 +1,7 @@
 {% load wagtailimages_tags i18n %}
 
-<div class="row areas-of-focus">
-    <div class="col my-3 my-sm-5">
-        <h2 class="focus-heading text-center mb-4">{% trans "Our areas of focus" %}</h2>
-        <div class="row">
-            {% for focus in page.focus_areas.all %}
-                {% include "./focus_area.html" with area=focus.area %}
-            {% endfor %}
-        </div>
-    </div>
+<div class="areas-of-focus tw-bg-blue-03 large:tw-bg-transparent tw-py-24 tw-flex tw-flex-col tw-gap-8 large:tw-flex-shrink-0 large:tw-py-40">
+    {% for focus in page.focus_areas.all %}
+        {% include "./focus_area.html" with area=focus.area %}
+    {% endfor %}
 </div>

network-api/networkapi/wagtailpages/templates/wagtailpages/fragments/hero_intro_box.html

@@ -0,0 +1,9 @@
+{% load wagtailcore_tags %}
+
+<div class="tw-container tw-flex tw-flex-col tw-my-24 medium:!tw-px-0 medium:tw-my-40">
+    <h2 class="tw-leading-tight tw-mb-8 medium:tw-text-[28px]">{{ page.hero_intro_heading }}</h2>
+    <p>{{ page.hero_intro_body }}</p>
+    {% if page.hero_intro_link_page %}
+        <a href="{% pageurl page.hero_intro_link_page %}" class="tw-cta-link d-inline-block tw-mt-2 tw-mb-5">{{ page.hero_intro_link_text }}</a>
+    {% endif %}
+</div>

network-api/networkapi/wagtailpages/templates/wagtailpages/homepage.html

@@ -33,6 +33,9 @@
         {% if page.show_cause_statement %}
             {% include "./fragments/cause_statement.html" %}
         {% endif %}
+    </div>
+    <div class="tw-flex tw-flex-col large:tw-flex-row large:tw-gap-40 large:tw-container">
+        {% include "./fragments/hero_intro_box.html" %}
         {% include "./fragments/focus_areas.html" %}
     </div>
 

network-api/networkapi/wagtailpages/wagtail_hooks.py

@@ -533,7 +533,7 @@ class AreasOfFocusViewSet(SnippetViewSet):
     menu_order = 000
     menu_label = "Areas of Focus"
     menu_name = "Areas of Focus"
-    list_display = ("name", "interest_icon", "page")
+    list_display = ("name", "interest_icon")
     search_fields = ("name",)
     ordering = ("name",)