From 32c87c3af1d273e6199aa59cec6d515705b81881 Mon Sep 17 00:00:00 2001
From: luminaryFlowers <71102109+luminaryFlowers@users.noreply.github.com>
Date: Tue, 10 Sep 2024 14:57:14 -0700
Subject: [PATCH 01/15] tons and tons of little changes from qa feedback

---
 .../events/individual_event_page.html         |  10 +-
 .../impact_areas/components/UseCaseBox.html   |  11 +-
 .../individual_impact_area_page.html          |   8 +-
 app/members/models.py                         |   3 +-
 .../members/individual_member_page.html       |   4 +-
 ...022_contactuspage_body_background_image.py |  20 +++
 app/misc/models.py                            |  10 ++
 app/misc/templates/misc/contact_us_page.html  | 139 +++++++++---------
 .../misc/document_collection_page.html        |   2 +-
 .../templates/misc/work_for_hot_page.html     |   6 +-
 .../templates/news/individual_news_page.html  |  10 +-
 .../programs/individual_program_page.html     |  26 ++--
 ...ve_individualprojectpage_tools_and_more.py |  34 +++++
 app/projects/models.py                        |   8 +-
 .../projects/individual_project_page.html     | 100 +++++++------
 app/ui/templates/ui/components/BaseLink.html  |   2 +-
 .../ui/components/BaseLinkNoUnderline.html    |   4 +-
 .../components/BaseLinkNoUnderlineWhite.html  |   6 +
 .../ui/components/BasePageHeader.html         |   2 +-
 .../ui/components/PageHeaderWithBlur.html     |   4 +-
 .../dogear_boxes/DogearAnyColour.html         |  14 +-
 .../components/dogear_boxes/DogearBlack.html  |   2 +-
 .../dogear_boxes/DogearContent.html           |   4 +-
 .../ui/components/dogear_boxes/DogearRed.html |   2 +-
 .../dogear_boxes/SpecialDogearLinkBox.html    |   4 +-
 .../events/EventPreviewBlockEvent.html        |   5 +-
 .../components/icon_svgs/LinkCaretCircle.html |   3 +
 .../components/news/NewsPreviewBlockNews.html |  17 +--
 .../components/partners/PartnerViewBlock.html |  10 +-
 .../programs/ProgramCarouselBlock.html        |   8 +-
 .../projects/ProjectPreviewBlockMapHub.html   |   6 +-
 .../projects/ProjectPreviewBlockNews.html     |   6 +-
 frontend/tailwind.config.js                   |   1 +
 .../home/components/HomeSpecificCarousel.html |  39 ++---
 .../home/components/ImpactAreasPanel.html     |  25 ++--
 .../home/components/MappingHubsPanel.html     |  24 ++-
 home/templates/home/components/StatBlock.html |   4 +
 home/templates/home/home_page.html            |  38 ++---
 hot_osm/static/css/hot_osm.css                |  36 +++--
 .../components/branded_elements/button.html   |   2 +-
 .../branded_elements/button_bordered.html     |   2 +-
 41 files changed, 355 insertions(+), 306 deletions(-)
 create mode 100644 app/misc/migrations/0022_contactuspage_body_background_image.py
 create mode 100644 app/projects/migrations/0035_remove_individualprojectpage_tools_and_more.py
 create mode 100644 app/ui/templates/ui/components/BaseLinkNoUnderlineWhite.html
 create mode 100644 app/ui/templates/ui/components/icon_svgs/LinkCaretCircle.html
 create mode 100644 home/templates/home/components/StatBlock.html

diff --git a/app/events/templates/events/individual_event_page.html b/app/events/templates/events/individual_event_page.html
index 0598ed3..1f6d900 100644
--- a/app/events/templates/events/individual_event_page.html
+++ b/app/events/templates/events/individual_event_page.html
@@ -28,11 +28,11 @@ <h1>{{ page.title }}</h1>
                 </div>
                 {{ page.extended_description }}
 
-                {% include "ui/components/sharers/ShareSection.html" with class="mt-10" %}
+                {% include "ui/components/sharers/ShareSection.html" with class="mt-20" %}
             </div>
 
             {% comment %} SIDEBAR {% endcomment %}
-            <div class="base-article py-5 sidebar">
+            <div class="py-5 sidebar [&_h1]:font-bold">
                 <h1>
                     {{page.get_parent.specific.event_location_title}}
                 </h1>
@@ -53,7 +53,9 @@ <h1>
                         {{page.get_parent.specific.event_region_hub_title}}
                     </h1>
                     <p class="my-2">
-                        {{page.event_region_hub.title}}
+                        <a href="{{page.event_region_hub.url}}" class="hover:underline">
+                            {{page.event_region_hub.title}}
+                        </a>
                     </p>
                     <hr class="my-6" />
                 {% endif %}
@@ -64,7 +66,7 @@ <h1>
                     </h1>
                     <p class="my-2">
                         {% for category in page.event_categories.all %}
-                            <a href="{{page.get_parent.url}}?{{category}}=on">{{category}}</a>{% if not forloop.last %}, {% endif %}
+                            <a href="{{page.get_parent.url}}?{{category}}=on" class="hover:underline">{{category}}</a>{% if not forloop.last %}, {% endif %}
                         {% endfor %}
                     </p>
                     <hr class="my-6" />
diff --git a/app/impact_areas/templates/impact_areas/components/UseCaseBox.html b/app/impact_areas/templates/impact_areas/components/UseCaseBox.html
index 51c452a..2ae261c 100644
--- a/app/impact_areas/templates/impact_areas/components/UseCaseBox.html
+++ b/app/impact_areas/templates/impact_areas/components/UseCaseBox.html
@@ -2,13 +2,10 @@
     <h1 class="text-hot-red text-h4 font-bold">
         {{ number }}.
     </h1>
-    <div class="my-2">
+    <div class="mt-2 mb-4">
         {{ body }}
     </div>
-    <a href="{%include 'ui/components/PageOrLinkHrefText.html'%}" class="text-hot-red mt-auto font-medium py-2">
-        <p>
-            {{ linktext }}
-            {% include "ui/components/icon_svgs/LinkCaret.html" %}
-        </p>
-    </a>
+    <div class="mt-auto mb-2">
+        {% include "ui/components/BaseLinkNoUnderline.html" %}
+    </div>
 </div>
\ No newline at end of file
diff --git a/app/impact_areas/templates/impact_areas/individual_impact_area_page.html b/app/impact_areas/templates/impact_areas/individual_impact_area_page.html
index 8c05f76..80ab398 100644
--- a/app/impact_areas/templates/impact_areas/individual_impact_area_page.html
+++ b/app/impact_areas/templates/impact_areas/individual_impact_area_page.html
@@ -3,7 +3,7 @@
 {% load wagtailcore_tags %}
 {% load wagtailimages_tags %}
 {% load compress %}
-{% block body_class %}template-individualmappinghubpage{% endblock %}
+{% block body_class %}template-individualimpactareapage{% endblock %}
 {% block extra_css %}
     {% compress css %}
     {% endcompress css %}
@@ -15,13 +15,13 @@
     <div class="max-w-7xl mx-auto mb-20">
         <div class="px-8 my-10">
             {% comment %} MAIN BODY {% endcomment %}
-            <div class="grid grid-cols-1 lg:grid-cols-2 gap-x-10">
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-10 mb-10">
                 <div class="base-article-m [&_p:first-child]:mt-0 lg:order-2">
                     <div class="text-intro font-medium">
                         {{ page.description|richtext }}
                     </div>
                 </div>
-                {% image page.intro_image original class="pb-8 lg:order-1 w-full h-auto" %}
+                {% image page.intro_image original class="pb-8 lg:order-1 w-full h-auto aspect-[3/2] object-cover" %}
             </div>
 
             {% comment %} USE CASES {% endcomment %}
@@ -49,7 +49,7 @@
                                 hx-swap="beforeend"
                                 hx-select-oob="#projects-list:beforeend, #next-project:outerHTML"
                             >
-                                <span class="border-b-hot-red border-b-2 pb-1 font-medium mr-4 text-intro">
+                                <span class="border-b-hot-red border-b-2 pb-1 font-medium mr-4 text-intro hover:text-hot-red transition">
                                     {{page.get_parent.specific.load_more_projects_text}}
                                 </span>
                                 {% include "ui/components/icon_svgs/LinkCaret.html" with class="rotate-90 text-hot-red" %}
diff --git a/app/members/models.py b/app/members/models.py
index 7121960..ee59b9d 100644
--- a/app/members/models.py
+++ b/app/members/models.py
@@ -72,7 +72,7 @@ def get_context(self, request, *args, **kwargs):
         keyword = request.GET.get('keyword', '')
 
         if keyword:
-            members = members.search(keyword).get_queryset()
+            members = members.search(keyword, fields=["title"]).get_queryset()
         
         hubs = IndividualMappingHubPage.objects.live().filter(locale=context['page'].locale)
         query = Q()
@@ -209,6 +209,7 @@ def get_context(self, request, *args, **kwargs):
         index.SearchField('title'),
         index.SearchField('search_description'),
         index.SearchField('intro'),
+        index.FilterField('member_groups'),
     ]
 
     content_panels = Page.content_panels + [
diff --git a/app/members/templates/members/individual_member_page.html b/app/members/templates/members/individual_member_page.html
index c090bfe..48e32c9 100644
--- a/app/members/templates/members/individual_member_page.html
+++ b/app/members/templates/members/individual_member_page.html
@@ -10,9 +10,9 @@
 {% endblock extra_css %}
 
 {% block content %}
-    <div class="max-w-7xl mx-auto px-6 md:px-10 my-10">
+    <div class="max-w-7xl mx-auto px-6 md:px-10 mt-10 mb-20">
         {% comment %} BODY SECTION {% endcomment %}
-        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-8 [&_a:hover]:underline">
             <div class="w-full">
                 {% if page.image %}
                     {% image page.image original class="md:w-full h-auto w-auto max-h-[24rem] object-contain" %}
diff --git a/app/misc/migrations/0022_contactuspage_body_background_image.py b/app/misc/migrations/0022_contactuspage_body_background_image.py
new file mode 100644
index 0000000..b13552e
--- /dev/null
+++ b/app/misc/migrations/0022_contactuspage_body_background_image.py
@@ -0,0 +1,20 @@
+# Generated by Django 4.2.7 on 2024-09-10 19:26
+
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('wagtailimages', '0025_alter_image_file_alter_rendition_file'),
+        ('misc', '0021_alter_codeofconductpage_our_policies_links_and_more'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='contactuspage',
+            name='body_background_image',
+            field=models.ForeignKey(blank=True, help_text='Shows behind the entire body', null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='+', to='wagtailimages.image'),
+        ),
+    ]
diff --git a/app/misc/models.py b/app/misc/models.py
index 5c6dbd9..cd3b931 100644
--- a/app/misc/models.py
+++ b/app/misc/models.py
@@ -308,6 +308,15 @@ class ContactUsPage(Page):
         help_text="Header image"
     )
 
+    body_background_image = models.ForeignKey(
+        "wagtailimages.Image",
+        null=True,
+        blank=True,
+        on_delete=models.SET_NULL,
+        related_name="+",
+        help_text="Shows behind the entire body"
+    )
+
     global_office_title = models.CharField(default="Global Office")
     global_office_text = RichTextField(blank=True)
 
@@ -356,6 +365,7 @@ class ContactUsPage(Page):
     
     content_panels = Page.content_panels + [
         FieldPanel('header_image'),
+        FieldPanel('body_background_image'),
         MultiFieldPanel([
             FieldPanel('global_office_title'),
             FieldPanel('global_office_text'),
diff --git a/app/misc/templates/misc/contact_us_page.html b/app/misc/templates/misc/contact_us_page.html
index a7de22d..5373360 100644
--- a/app/misc/templates/misc/contact_us_page.html
+++ b/app/misc/templates/misc/contact_us_page.html
@@ -12,83 +12,90 @@
 {% block content %}
     {% include "ui/components/BasePageHeader.html" with title=page.title image=page.header_image endinlarge=True full_length=True %}
     
-    <div class="max-w-7xl mx-auto my-10">
-        <div class="px-6 md:px-10">
-            <div class="grid lg:grid-cols-3 gap-8">
-                <div>
-                    {% include "ui/components/SectionHeadingWithUnderline.html" with title=page.global_office_title %}
-                    <div class="font-medium text-intro mt-4">
-                        {{page.global_office_text|richtext}}
+    {% image page.body_background_image original as bg_p %}
+    <div style="background-image: url('{{bg_p.url}}');" class="bg-bottom bg-no-repeat">
+        <div class="max-w-7xl mx-auto mt-10">
+            <div class="px-6 md:px-10">
+                <div class="grid lg:grid-cols-3 gap-8">
+                    <div>
+                        {% include "ui/components/SectionHeadingWithUnderline.html" with title=page.global_office_title %}
+                        <div class="font-medium text-intro mt-4">
+                            {{page.global_office_text|richtext}}
+                        </div>
                     </div>
-                </div>
-                <div class="lg:col-span-2">
-                    <h1 class="text-h2 font-bold">
-                        {{page.send_message_title}}
-                    </h1>
+                    <div class="lg:col-span-2">
+                        <h1 class="text-h2 font-bold">
+                            {{page.send_message_title}}
+                        </h1>
 
-                    <form class="mt-4 grid gap-8 [&_label]:font-medium">
-                        <div class="grid md:grid-cols-2 gap-8">
-                            <div>
-                                <label for="firstname">{{page.first_name_text}}</label>
-                                <input class="mt-2 w-full bg-hot-off-white border-none px-4" placeholder="{{page.first_name_field_text}}" type="text" name="firstname" required>
+                        <form class="mt-4 grid gap-8 [&_label]:font-medium">
+                            <div class="grid md:grid-cols-2 gap-8">
+                                <div>
+                                    <label for="firstname">{{page.first_name_text}}</label>
+                                    <input class="mt-2 w-full bg-hot-off-white border-none px-4" placeholder="{{page.first_name_field_text}}" type="text" name="firstname" required>
+                                </div>
+                                <div>
+                                    <label for="lastname">{{page.last_name_text}}</label>
+                                    <input class="mt-2 w-full bg-hot-off-white border-none px-4" placeholder="{{page.last_name_field_text}}" type="text" name="lastname" required>
+                                </div>
+                                <div>
+                                    <label for="email">{{page.email_text}}</label>
+                                    <input class="mt-2 w-full bg-hot-off-white border-none px-4" placeholder="{{page.email_field_text}}" type="email" name="email" required>
+                                </div>
+                                <div class="relative" x-data="{ show: false, setSubject(text) {$refs.subjectfield.value = text} }" @click.away="show = false">
+                                    <label for="subject">{{page.subject_text}}</label>
+                                    <div class="mt-2 cursor-pointer flex w-full bg-hot-off-white items-center" @click="show = !show">
+                                        <input class="w-full bg-transparent border-none px-4 pointer-events-none flex-grow select-none" placeholder="{{page.subject_field_placeholder}}" type="text" name="subject" x-ref="subjectfield" tabindex="-1" onkeypress="return false;" required>
+                                        {% include "ui/components/icon_svgs/LinkCaret.html" with class="mr-4 text-hot-red rotate-90" %}
+                                    </div>
+                                    <div class="absolute z-20 bg-hot-off-white p-4 pt-2 w-full grid gap-4" x-show="show">
+                                        <hr class="border-b-2">
+                                        {% for subject in page.subject_field_options %}
+                                            <p class="cursor-pointer" @click="setSubject('{{subject.value.subject}}')">
+                                                {{subject.value.subject}}
+                                            </p>
+                                        {% endfor  %}
+                                    </div>
+                                </div>
                             </div>
                             <div>
-                                <label for="lastname">{{page.last_name_text}}</label>
-                                <input class="mt-2 w-full bg-hot-off-white border-none px-4" placeholder="{{page.last_name_field_text}}" type="text" name="lastname" required>
+                                <label for="message">{{page.message_text}}</label>
+                                <textarea class="mt-2 w-full bg-hot-off-white border-none px-4 min-h-48 resize-none" placeholder="{{page.message_field_text}}" type="text" name="message" required></textarea>
                             </div>
-                            <div>
-                                <label for="email">{{page.email_text}}</label>
-                                <input class="mt-2 w-full bg-hot-off-white border-none px-4" placeholder="{{page.email_field_text}}" type="email" name="email" required>
+                            <div class="flex">
+                                <input type="submit" value="{{page.submit_button_text}}" class="bg-hot-red border-2 border-hot-red text-white cursor-pointer py-1 px-6 font-medium text-intro hover:bg-hot-off-white hover:text-hot-red">
                             </div>
-                            <div class="relative" x-data="{ show: false, setSubject(text) {$refs.subjectfield.value = text} }" @click.away="show = false">
-                                <label for="subject">{{page.subject_text}}</label>
-                                <div class="mt-2 cursor-pointer flex w-full bg-hot-off-white items-center" @click="show = !show">
-                                    <input class="w-full bg-transparent border-none px-4 pointer-events-none flex-grow" placeholder="{{page.subject_field_placeholder}}" type="text" name="subject" x-ref="subjectfield" required>
-                                    {% include "ui/components/icon_svgs/LinkCaret.html" with class="mr-4 text-hot-red rotate-90" %}
-                                </div>
-                                <div class="absolute z-20 bg-hot-off-white p-4 pt-2 w-full grid gap-4" x-show="show">
-                                    <hr class="border-b-2">
-                                    {% for subject in page.subject_field_options %}
-                                        <p class="cursor-pointer" @click="setSubject('{{subject.value.subject}}')">
-                                            {{subject.value.subject}}
-                                        </p>
-                                    {% endfor  %}
+                        </form>
+                    </div>
+                </div>
+                <div class="grid lg:grid-cols-3 gap-8 mt-20">
+                    <div>
+                        {% include "ui/components/SectionHeadingWithUnderline.html" with title=page.inquiries_title %}
+                        <div class="grid gap-8 mt-4">
+                            {% for block in page.inquiries_blocks %}
+                                <div>
+                                    <p class="font-medium text-intro">{{block.value.title}}</p>
+                                    <p>{{block.value.email}}</p>
                                 </div>
-                            </div>
+                            {% endfor %}
                         </div>
-                        <div>
-                            <label for="message">{{page.message_text}}</label>
-                            <textarea class="mt-2 w-full bg-hot-off-white border-none px-4 min-h-48 resize-none" placeholder="{{page.message_field_text}}" type="text" name="message" required></textarea>
-                        </div>
-                        <div class="flex">
-                            <input type="submit" value="{{page.submit_button_text}}" class="bg-hot-red border-2 border-hot-red text-white cursor-pointer py-1 px-6 font-medium text-intro hover:bg-hot-off-white hover:text-hot-red">
+                    </div>
+                    <div class="lg:col-span-2">
+                        {% include "ui/components/SectionHeadingWithUnderline.html" with title=page.office_locations_title %}
+                        <div class="mt-4 grid lg:grid-cols-2 gap-8">
+                            {% for location in page.office_locations %}
+                                <div>
+                                    <p class="font-medium text-intro">{{location.value.title}}</p>
+                                    <p>{% include "ui/components/BaseLinkNoUnderline.html" with linktext=page.office_locations_visit_page_text linkurl=location.value.link %}</p>
+                                    <p>{{location.value.description}}</p>
+                                </div>
+                            {% endfor %}
                         </div>
-                    </form>
-                </div>
-            </div>
-            <div class="grid lg:grid-cols-3 gap-8 my-20">
-                <div>
-                    {% include "ui/components/SectionHeadingWithUnderline.html" with title=page.inquiries_title %}
-                    <div class="grid gap-8 mt-4">
-                        {% for block in page.inquiries_blocks %}
-                            <div>
-                                <p class="font-medium text-intro">{{block.value.title}}</p>
-                                <p>{{block.value.email}}</p>
-                            </div>
-                        {% endfor %}
                     </div>
                 </div>
-                <div class="lg:col-span-2">
-                    {% include "ui/components/SectionHeadingWithUnderline.html" with title=page.office_locations_title %}
-                    <div class="mt-4 grid lg:grid-cols-2 gap-8">
-                        {% for location in page.office_locations %}
-                            <div>
-                                <p class="font-medium text-intro">{{location.value.title}}</p>
-                                <p>{% include "ui/components/BaseLinkNoUnderline.html" with linktext=page.office_locations_visit_page_text linkurl=location.value.link %}</p>
-                                <p>{{location.value.description}}</p>
-                            </div>
-                        {% endfor %}
-                    </div>
+
+                <div class="text-black mt-20 pb-20 [&_h1]:text-black [&_a]:text-black">
+                    {% include "ui/components/dogear_boxes/DogearAnyColourLong.html" with colour="var(--hot-off-white)" title=page.dogear_box_title linktext=page.dogear_box_link_text linkurl=page.dogear_box_link %}
                 </div>
             </div>
         </div>
diff --git a/app/misc/templates/misc/document_collection_page.html b/app/misc/templates/misc/document_collection_page.html
index adc3d78..6e39194 100644
--- a/app/misc/templates/misc/document_collection_page.html
+++ b/app/misc/templates/misc/document_collection_page.html
@@ -10,7 +10,7 @@
 {% endblock extra_css %}
 
 {% block content %}
-    {% include "ui/components/PageHeaderWithBlur.html" with title=page.title image=page.header_image subtitle=page.header_description endinlarge=True full_length=True %}
+    {% include "ui/components/PageHeaderWithBlur.html" with title=page.title image=page.header_image subtitle=page.header_description endinlarge=True full_length=True smaller=True %}
     
     <div class="max-w-7xl mx-auto my-10">
         <div class="px-6 md:px-10">
diff --git a/app/misc/templates/misc/work_for_hot_page.html b/app/misc/templates/misc/work_for_hot_page.html
index 8121b48..4c6b94c 100644
--- a/app/misc/templates/misc/work_for_hot_page.html
+++ b/app/misc/templates/misc/work_for_hot_page.html
@@ -10,7 +10,7 @@
 {% endblock extra_css %}
 
 {% block content %}
-    {% include "ui/components/PageHeaderWithBlur.html" with title=page.title subtitle=page.header_text image=page.header_image full_length=True %}
+    {% include "ui/components/PageHeaderWithBlur.html" with title=page.title subtitle=page.header_text image=page.header_image full_length=True smaller=True %}
     
     <div class="max-w-7xl mx-auto my-10">
         <div class="px-6 md:px-10">
@@ -18,7 +18,7 @@
             <div class="grid lg:grid-cols-2 gap-8">
                 <div>
                     {% include "ui/components/SectionHeadingWithUnderline.html" with title=page.our_values_title %}
-                    <div class="base-article-m">
+                    <div class="base-article-m mt-8">
                         {{ page.our_values_text|richtext }}
                     </div>
                 </div>
@@ -40,7 +40,7 @@
                 {% endif %}
                 <div class="order-1 lg:order-2">
                     {% include "ui/components/SectionHeadingWithUnderline.html" with title=page.work_culture_title %}
-                    <div class="base-article-m">
+                    <div class="base-article-m mt-8">
                         {{ page.work_culture_description|richtext }}
                     </div>
                 </div>
diff --git a/app/news/templates/news/individual_news_page.html b/app/news/templates/news/individual_news_page.html
index 796ecec..dde0869 100644
--- a/app/news/templates/news/individual_news_page.html
+++ b/app/news/templates/news/individual_news_page.html
@@ -32,11 +32,13 @@ <h1>{{ page.title }}</h1>
                 </div>
                 {{ page.article_body }}
 
-                {% include "ui/components/sharers/ShareSection.html" %}
+                <div class="mt-20">
+                    {% include "ui/components/sharers/ShareSection.html" %}
+                </div>
             </div>
 
             {% comment %} SIDEBAR {% endcomment %}
-            <div class="base-article px-10 py-5 sidebar [&>div]:my-12 [&_div:first-child_hr]:hidden [&_hr]:mb-8">
+            <div class="px-10 py-5 sidebar [&>div]:my-12 [&_div:first-child_hr]:hidden [&_hr]:mb-8">
                 {% if page.related_projects%}
                     <div>
                         <hr />
@@ -81,7 +83,7 @@ <h1 class="text-h2 font-bold mb-4">
                         <p>
                             {% with categories=page.categories.all %}
                                 {% for category in categories %}
-                                    <a href="#" class="text-hot-red">{{ category.category_name }}</a>{% if not forloop.last %}, {% endif %}
+                                    <a href="#" class="text-hot-red hover:underline">{{ category.category_name }}</a>{% if not forloop.last %}, {% endif %}
                                 {% endfor %}
                             {% endwith %}
                         </p>
@@ -97,7 +99,7 @@ <h1 class="text-h2 font-bold mb-4">
                         <p>
                             {% with tags=page.tags.all %}
                                 {% for tag in tags %}
-                                    <a href="#" class="text-hot-red">{{ tag }}</a>{% if not forloop.last %}, {% endif %}
+                                    <a href="#" class="text-hot-red hover:underline">{{ tag }}</a>{% if not forloop.last %}, {% endif %}
                                 {% endfor %}
                             {% endwith %}
                         </p>
diff --git a/app/programs/templates/programs/individual_program_page.html b/app/programs/templates/programs/individual_program_page.html
index 469a6a4..5337750 100644
--- a/app/programs/templates/programs/individual_program_page.html
+++ b/app/programs/templates/programs/individual_program_page.html
@@ -3,7 +3,7 @@
 {% load wagtailcore_tags %}
 {% load wagtailimages_tags %}
 {% load compress %}
-{% block body_class %}template-individualprojectpage{% endblock %}
+{% block body_class %}template-individualprogrampage{% endblock %}
 {% block extra_css %}
     {% compress css %}
     {% endcompress css %}
@@ -12,8 +12,8 @@
 {% block content %}
     {% include "ui/components/PageHeaderWithBlur.html" with title=page.title subtitle=page.subtitle image=page.header_image %}
 
-    <div class="max-w-7xl mx-auto">
-        <div class="grid grid-cols-1 lg:grid-cols-2 p-10 gap-x-10">
+    <div class="max-w-7xl mx-auto my-10 px-6 md:px-10">
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-x-10">
             <div class="base-article-m [&_p:first-child]:mt-0 lg:order-2">
                 <div class="text-intro font-medium">
                     {{ page.intro|safe }}
@@ -23,10 +23,10 @@
             {% image page.intro_image original class="pb-8 lg:order-1" %}
         </div>
 
-        <h1 class="text-h2 px-10 font-bold">
+        <h1 class="text-h2 font-bold">
             {{ page.get_parent.specific.stats_title }}
         </h1>
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10 px-10 py-6">
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10 py-6">
             {% for stat in page.stats %}
                 <div class="bg-hot-off-white p-8">
                     <h1 class="text-h4 font-bold">
@@ -40,13 +40,13 @@ <h1 class="text-h4 font-bold">
             {% endfor %}
         </div>
 
-        <div class="px-10 py-6">
+        <div class="py-6">
             <h1 class="text-h2 font-bold">
                 {{ page.get_parent.specific.goals_title }}
             </h1>
             <hr class="border-hot-red w-16 border-b-2" />
         </div>
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10 px-10 py-6">
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10 py-6">
             {% for goal in page.goals %}
                 <div class="[&_ul]:list-disc [&_li]:py-1 [&_ul]:p-4 [&_li::marker]:text-hot-red">
                     <h1 class="text-h4 font-bold">
@@ -58,7 +58,7 @@ <h1 class="text-h4 font-bold">
             {% endfor %}
         </div>
 
-        <div class="px-10 py-6">
+        <div class="py-6">
             <h1 class="text-h2 font-bold">
                 {{ page.get_parent.specific.projects_title }}
             </h1>
@@ -71,7 +71,7 @@ <h1 class="text-h2 font-bold">
             </div>
         </div>
 
-        <div class="px-10 py-6">
+        <div class="py-6">
             <div class="grid grid-cols-1 md:grid-cols-2">
                 <div>
                     <h1 class="text-h2 font-bold">
@@ -80,22 +80,21 @@ <h1 class="text-h2 font-bold">
                     <hr class="border-hot-red w-16 border-b-2" />
                 </div>
 
-                <div class="text-right self-center">
+                <div class="text-right self-center text-intro">
                     {% include "ui/components/BaseLink.html" with linkurl=page.get_parent.specific.view_all_partners_link linktext=page.get_parent.specific.view_all_partners_title %}
                 </div>
             </div>
             
             {% include "ui/components/partners/PartnerViewBlock.html" with partners=page.partners.all %}
-            
         </div>
 
-        <div class="px-10 py-6">
+        <div class="py-6">
             <div class="grid grid-cols-1 md:grid-cols-2">
                 <h1 class="text-h2 font-bold">
                     {{ page.get_parent.specific.more_programs_title }}
                 </h1>
 
-                <div class="text-right self-center">
+                <div class="text-right self-center text-intro">
                     {% include "ui/components/BaseLink.html" with linkurl=page.get_parent.specific.view_all_programs_link linktext=page.get_parent.specific.view_all_programs_title %}
                 </div>
             </div>
@@ -106,5 +105,6 @@ <h1 class="text-h2 font-bold">
             </div>
         </div>
     </div>
+
     {% include "ui/components/FooterBannerWithTextAndLink.html" with text=page.get_parent.specific.bottom_banner_text buttontext=page.get_parent.specific.bottom_banner_url_text url=page.get_parent.specific.bottom_banner_url %}
 {% endblock %}
diff --git a/app/projects/migrations/0035_remove_individualprojectpage_tools_and_more.py b/app/projects/migrations/0035_remove_individualprojectpage_tools_and_more.py
new file mode 100644
index 0000000..c51d4a9
--- /dev/null
+++ b/app/projects/migrations/0035_remove_individualprojectpage_tools_and_more.py
@@ -0,0 +1,34 @@
+# Generated by Django 4.2.7 on 2024-09-09 23:12
+
+from django.db import migrations, models
+import wagtail.blocks
+import wagtail.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('projects', '0034_projectownerpage_types_title'),
+    ]
+
+    operations = [
+        migrations.RemoveField(
+            model_name='individualprojectpage',
+            name='tools',
+        ),
+        migrations.AddField(
+            model_name='individualprojectpage',
+            name='tools_list',
+            field=wagtail.fields.StreamField([('tool', wagtail.blocks.PageChooserBlock(page_type=['tech.IndividualTechStackPage']))], blank=True, null=True, use_json_field=True),
+        ),
+        migrations.AlterField(
+            model_name='individualprojectpage',
+            name='location_coordinates',
+            field=models.CharField(blank=True, help_text='Used to show where on the map the project takes place; used on the Our Work page.', max_length=250, null=True),
+        ),
+        migrations.AlterField(
+            model_name='individualprojectpage',
+            name='project_contributors',
+            field=wagtail.fields.StreamField([('contributor', wagtail.blocks.PageChooserBlock(page_type=['members.IndividualMemberPage']))], blank=True, help_text="If a member is listed as a contributor to a project, that project will appear on the given member's page.", null=True, use_json_field=True),
+        ),
+    ]
diff --git a/app/projects/models.py b/app/projects/models.py
index a651b85..1abb8a9 100644
--- a/app/projects/models.py
+++ b/app/projects/models.py
@@ -189,7 +189,7 @@ class IndividualProjectPage(Page):
     region_hub_list = StreamField([('region_hub', PageChooserBlock(page_type="mapping_hubs.IndividualMappingHubPage"))], use_json_field=True, null=True, blank=True)
     duration = models.CharField(default="Ongoing", blank=True)
     partners_list = ParentalManyToManyField('core.Partner', blank=True)
-    tools = RichTextField(null=True, blank=True)  # Will need to reference tools when they are added
+    tools_list = StreamField([('tool', PageChooserBlock(page_type="tech.IndividualTechStackPage"))], use_json_field=True, null=True, blank=True)
     contact = RichTextField(null=True, blank=True)
     types = ParentalManyToManyField('projects.ProjectType', blank=True)
     related_news = StreamField([
@@ -199,8 +199,8 @@ class IndividualProjectPage(Page):
         ('event_page', PageChooserBlock(page_type="events.IndividualEventPage"))
     ], use_json_field=True, null=True, blank=True)
 
-    project_contributors = StreamField([('contributor', PageChooserBlock(page_type="members.IndividualMemberPage"))], use_json_field=True, null=True, blank=True)
-    location_coordinates = models.CharField(max_length=250, blank=True, null=True)
+    project_contributors = StreamField([('contributor', PageChooserBlock(page_type="members.IndividualMemberPage"))], use_json_field=True, null=True, blank=True, help_text="If a member is listed as a contributor to a project, that project will appear on the given member's page.")
+    location_coordinates = models.CharField(max_length=250, blank=True, null=True, help_text="Used to show where on the map the project takes place; used on the Our Work page.")
 
     search_fields = Page.search_fields + [
         index.SearchField('title'),
@@ -230,7 +230,7 @@ class IndividualProjectPage(Page):
             FieldPanel('region_hub_list'),
             FieldPanel('duration'),
             FieldPanel('partners_list', widget=forms.CheckboxSelectMultiple),
-            FieldPanel('tools'),
+            FieldPanel('tools_list'),
             FieldPanel('contact'),
             FieldPanel('types', widget=forms.CheckboxSelectMultiple),
             MultiFieldPanel([
diff --git a/app/projects/templates/projects/individual_project_page.html b/app/projects/templates/projects/individual_project_page.html
index dde6d2f..612c23b 100644
--- a/app/projects/templates/projects/individual_project_page.html
+++ b/app/projects/templates/projects/individual_project_page.html
@@ -16,7 +16,7 @@
         <div class="grid grid-cols-1 lg:grid-cols-3">
             {% comment %} BODY {% endcomment %}
             <div class="p-10 col-span-2">
-                <div class="base-article-m">
+                <div class="base-article-m mb-20">
                     <div class="text-intro">
                         {{ page.intro|safe }}
                     </div>
@@ -29,59 +29,65 @@
             <div class="p-10 col-span-1">
                 {% comment %} NOTE TO SELF: the "safe" thing is only needed temporarily until everything is put in {% endcomment %}
                 <div class="project-sidebar">
-                    {% if page.impact_area_list %}
-                        <div>
-                            <p>{{page.get_parent.specific.impact_areas_title}}</p>
-                            {% for area in page.impact_area_list %}
-                                <p><a href="{{area.value.url}}">{{area.value.title}}</a></p>
-                            {% endfor %}
-                        </div>
-                    {% endif %}
-
-                    {% if page.region_hub_list %}
-                        <div>
-                            <p>{{page.get_parent.specific.region_hub_title}}</p>
-                            {% for hub in page.region_hub_list %}
-                                <p><a href="{{hub.value.url}}">{{hub.value.title}}</a></p>
-                            {% endfor %}
-                        </div>
-                    {% endif %}
+                    <div class="project-sidebar [&_div:last-child]:border-b-0 [&_a:hover]:underline" style="padding-bottom: 0;">
+                        {% if page.impact_area_list %}
+                            <div>
+                                <p>{{page.get_parent.specific.impact_areas_title}}</p>
+                                {% for area in page.impact_area_list %}
+                                    <p><a href="{{area.value.url}}">{{area.value.title}}</a></p>
+                                {% endfor %}
+                            </div>
+                        {% endif %}
 
-                    <div>
-                        <p>{{page.get_parent.specific.duration_title}}</p>
-                        <p>{{page.duration}}</p>
-                        {%if page.project_status%}<p>{{page.project_status}}</p>{%endif%}
-                    </div>
+                        {% if page.region_hub_list %}
+                            <div>
+                                <p>{{page.get_parent.specific.region_hub_title}}</p>
+                                {% for hub in page.region_hub_list %}
+                                    <p><a href="{{hub.value.url}}">{{hub.value.title}}</a></p>
+                                {% endfor %}
+                            </div>
+                        {% endif %}
 
-                    {% if page.partners_list.all %}
                         <div>
-                            <p>{{page.get_parent.specific.partners_title}}</p>
-                            {% for partner in page.partners_list.all %}
-                                <p><a href="{{partner.partner_url}}">{{partner.partner_name}}</a></p>
-                            {% endfor %}
+                            <p>{{page.get_parent.specific.duration_title}}</p>
+                            <p>{{page.duration}}</p>
+                            {%if page.project_status%}<p>{{page.project_status}}</p>{%endif%}
                         </div>
-                    {% endif %}
 
-                    <div>
-                        <p>{{page.get_parent.specific.tools_title}}</p>
-                        <p>{{page.tools|safe}}</p>
-                    </div>
+                        {% if page.partners_list.all %}
+                            <div>
+                                <p>{{page.get_parent.specific.partners_title}}</p>
+                                {% for partner in page.partners_list.all %}
+                                    <p><a href="{{partner.partner_url}}">{{partner.partner_name}}</a></p>
+                                {% endfor %}
+                            </div>
+                        {% endif %}
 
-                    {% if page.types.all %}
-                        <div>
-                            <p>{{page.get_parent.specific.types_title}}</p>
-                            {% for t in page.types.all %}
-                                <p>{{t.type_name}}</p>
-                            {% endfor %}
-                        </div>
-                    {% endif %}
+                        {% if page.tools_list %}
+                            <div>
+                                <p>{{page.get_parent.specific.tools_title}}</p>
+                                {% for tool in page.tools_list %}
+                                    <p><a href="{{tool.value.url}}">{{tool.value.title}}</a></p>
+                                {% endfor %}
+                            </div>
+                        {% endif %}
 
-                    {% if page.contact %}
-                        <div>
-                            <p>{{page.get_parent.specific.contact_title}}</p>
-                            <p>{{page.contact|safe}}</p>
-                        </div>
-                    {% endif %}
+                        {% if page.types.all %}
+                            <div>
+                                <p>{{page.get_parent.specific.types_title}}</p>
+                                {% for t in page.types.all %}
+                                    <p>{{t.type_name}}</p>
+                                {% endfor %}
+                            </div>
+                        {% endif %}
+
+                        {% if page.contact %}
+                            <div>
+                                <p>{{page.get_parent.specific.contact_title}}</p>
+                                <p>{{page.contact|safe}}</p>
+                            </div>
+                        {% endif %}
+                    </div>
                 </div>
 
                 {% comment %} RELATED NEWS {% endcomment %}
diff --git a/app/ui/templates/ui/components/BaseLink.html b/app/ui/templates/ui/components/BaseLink.html
index 2321ff3..6f65aee 100644
--- a/app/ui/templates/ui/components/BaseLink.html
+++ b/app/ui/templates/ui/components/BaseLink.html
@@ -7,7 +7,7 @@
 {% endcomment %}
 
 <a href="{% include 'ui/components/PageOrLinkHrefText.html' %}">
-    <span class="border-b-hot-red border-b-2 pb-1 font-medium" {% if colour %}style="border-color: {{ colour }}"{% endif %}>{{ linktext }}</span>
+    <span class="border-b-hot-red border-b-2 pb-1 font-medium {%if not colour%}hover:text-hot-red{%else%}link-hover-colourer{%endif%} transition duration-75" {% if colour %}style="border-color: {{ colour }}; --link-hover-colourer-colour: {{ colour }}"{% endif %}>{{ linktext }}</span>
     
     <svg class="inline ml-4" {% if colour %}style="color: {{ colour }}"{% else %}style="color: var(--hot-red)"{% endif %} xmlns="http://www.w3.org/2000/svg" width="10.808" height="16.817" viewBox="0 0 10.808 16.817">
         <path id="Path_13007" data-name="Path 13007" d="M0,8.4,7,0l7,8.4" transform="translate(9.808 1.408) rotate(90)" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
diff --git a/app/ui/templates/ui/components/BaseLinkNoUnderline.html b/app/ui/templates/ui/components/BaseLinkNoUnderline.html
index a956ca3..a70f652 100644
--- a/app/ui/templates/ui/components/BaseLinkNoUnderline.html
+++ b/app/ui/templates/ui/components/BaseLinkNoUnderline.html
@@ -1,4 +1,4 @@
-<a href="{%include 'ui/components/PageOrLinkHrefText.html'%}" class="font-medium text-hot-red">
-    {{linktext}}
+<a href="{%include 'ui/components/PageOrLinkHrefText.html'%}" class="font-medium text-hot-red [&:hover_span]:underline [&:hover_span]:decoration-2">
+    <span>{{linktext}}</span>
     {% include "ui/components/icon_svgs/LinkCaret.html" with class="ml-2" %}
 </a>
\ No newline at end of file
diff --git a/app/ui/templates/ui/components/BaseLinkNoUnderlineWhite.html b/app/ui/templates/ui/components/BaseLinkNoUnderlineWhite.html
new file mode 100644
index 0000000..c136e9f
--- /dev/null
+++ b/app/ui/templates/ui/components/BaseLinkNoUnderlineWhite.html
@@ -0,0 +1,6 @@
+<a href="{%include 'ui/components/PageOrLinkHrefText.html'%}" class="font-medium text-white [&:hover_span]:underline [&:hover_span]:decoration-2">
+    <span>{{linktext}}</span>
+    <span class="{%if whitearrow%}text-white{%else%}text-hot-red{%endif%}">
+        {% include "ui/components/icon_svgs/LinkCaret.html" with class="ml-2" %}
+    </span>
+</a>
\ No newline at end of file
diff --git a/app/ui/templates/ui/components/BasePageHeader.html b/app/ui/templates/ui/components/BasePageHeader.html
index f646afd..88a868c 100644
--- a/app/ui/templates/ui/components/BasePageHeader.html
+++ b/app/ui/templates/ui/components/BasePageHeader.html
@@ -11,7 +11,7 @@
 {% load wagtailimages_tags %}
 
 {% image image original as image_p %}
-<div class="w-full min-h-[24rem] content-end bg-no-repeat bg-cover" style="background-image: url('{{ image_p.url }}')">
+<div class="w-full {%if smaller%}min-h-[20rem]{%else%}min-h-[24rem]{%endif%} content-end bg-no-repeat bg-cover" style="background-image: url('{{ image_p.url }}')">
     <div class="bg-gradient-to-t from-black/70 to-transparent w-full">
         <div class="h-fit w-full py-10 text-white max-w-7xl mx-auto">
             <div class="grid grid-cols-1 lg:grid-cols-3">
diff --git a/app/ui/templates/ui/components/PageHeaderWithBlur.html b/app/ui/templates/ui/components/PageHeaderWithBlur.html
index 80e0c51..404b1c7 100644
--- a/app/ui/templates/ui/components/PageHeaderWithBlur.html
+++ b/app/ui/templates/ui/components/PageHeaderWithBlur.html
@@ -11,9 +11,9 @@
 
 {% image image original as image_p %}
 <div class="bg-no-repeat bg-cover relative" style="background-image: url('{{ image_p.url }}')">
-    <div class="min-h-[24rem] bg-gradient-to-r from-black/70 to-transparent before:w-full before:backdrop-blur-sm before:h-full before:block before:absolute {%if not full_length%}lg:before:w-5/6{%endif%}">
+    <div class="{%if smaller%}min-h-[20rem]{%else%}min-h-[24rem]{%endif%} bg-gradient-to-r from-black/70 to-transparent before:w-full before:backdrop-blur-sm before:h-full before:block before:absolute {%if not full_length%}lg:before:w-5/6{%endif%}">
         <div class="text-white max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-6 relative">
-            <div class="min-h-[24rem] py-10 px-10 pb-4 h-full col-span-5">
+            <div class="{%if smaller%}min-h-[20rem]{%else%}min-h-[24rem]{%endif%} py-10 px-10 pb-4 h-full col-span-5">
                 <div class="content-end {%if not endinlarge%}lg:content-center{%endif%} h-full py-10">
                     <h1 class="text-h1 font-bold lg:font-semibold text-wrap">
                         {{ title }}
diff --git a/app/ui/templates/ui/components/dogear_boxes/DogearAnyColour.html b/app/ui/templates/ui/components/dogear_boxes/DogearAnyColour.html
index 570cc20..9543120 100644
--- a/app/ui/templates/ui/components/dogear_boxes/DogearAnyColour.html
+++ b/app/ui/templates/ui/components/dogear_boxes/DogearAnyColour.html
@@ -6,16 +6,6 @@
 - colour: a string; the colour that the box should be (can be hex code or any other CSS compatible colour thing)
 {% endcomment %}
 
-<div class="p-6 flex flex-col text-white" style="background: linear-gradient(45deg, {{ colour }} 0%, {{ colour }} 95%, transparent 95%, transparent 100%);">
-    <h1 class="font-bold text-h2 my-0">
-        {{ title }}
-    </h1>
-    <a href="{%include 'ui/components/PageOrLinkHrefText.html' with linkurl=linkurl%}" class="mt-auto pt-6">
-        <p class="text-intro font-medium">
-            {{ linktext }}
-            <span class="ml-2 text-hot-red">
-                {% include "ui/components/icon_svgs/LinkCaret.html" %}
-            </span>
-        </p>
-    </a>
+<div class="px-6 py-8 flex flex-col text-white" style="background: linear-gradient(45deg, {{ colour }} 0%, {{ colour }} 95%, transparent 95%, transparent 100%);">
+    {% include "./DogearContent.html" with color="var(--hot-red)" %}
 </div>
\ No newline at end of file
diff --git a/app/ui/templates/ui/components/dogear_boxes/DogearBlack.html b/app/ui/templates/ui/components/dogear_boxes/DogearBlack.html
index 6a3d2fe..c061bb5 100644
--- a/app/ui/templates/ui/components/dogear_boxes/DogearBlack.html
+++ b/app/ui/templates/ui/components/dogear_boxes/DogearBlack.html
@@ -5,6 +5,6 @@
 - linktext: a string; the text that shows for the link
 {% endcomment %}
 
-<div class="dogear-box-black p-6 flex flex-col text-white">
+<div class="dogear-box-black px-6 py-8 flex flex-col text-white">
     {% include "./DogearContent.html" with color="var(--hot-red)" %}
 </div>
\ No newline at end of file
diff --git a/app/ui/templates/ui/components/dogear_boxes/DogearContent.html b/app/ui/templates/ui/components/dogear_boxes/DogearContent.html
index 9ae98e0..09cc3e0 100644
--- a/app/ui/templates/ui/components/dogear_boxes/DogearContent.html
+++ b/app/ui/templates/ui/components/dogear_boxes/DogearContent.html
@@ -10,14 +10,14 @@
 {% endcomment %}
 {% load wagtailcore_tags %}
 
-<h1 class="font-bold text-h2 my-0">
+<h1 class="font-bold text-h2 mb-2">
     {{ title }}
 </h1>
 {% if description %}
     <p class="font-medium mt-2">{{description|richtext}}</p>
 {% endif %}
 <a href="{% include 'ui/components/PageOrLinkHrefText.html' %}" class="mt-auto pt-6">
-    <p class="text-h5 font-medium">
+    <p class="text-h5 font-medium hover:underline decoration-2">
         {{ linktext }}
         <span class="ml-2" 
         {% if color %}
diff --git a/app/ui/templates/ui/components/dogear_boxes/DogearRed.html b/app/ui/templates/ui/components/dogear_boxes/DogearRed.html
index 384f924..b377c1f 100644
--- a/app/ui/templates/ui/components/dogear_boxes/DogearRed.html
+++ b/app/ui/templates/ui/components/dogear_boxes/DogearRed.html
@@ -5,6 +5,6 @@
 - linktext: a string; the text that shows for the link
 {% endcomment %}
 
-<div class="dogear-box-red p-6 flex flex-col text-white">
+<div class="dogear-box-red px-6 py-8 flex flex-col text-white">
     {% include "./DogearContent.html" %}
 </div>
\ No newline at end of file
diff --git a/app/ui/templates/ui/components/dogear_boxes/SpecialDogearLinkBox.html b/app/ui/templates/ui/components/dogear_boxes/SpecialDogearLinkBox.html
index 46eb0f2..a5079e3 100644
--- a/app/ui/templates/ui/components/dogear_boxes/SpecialDogearLinkBox.html
+++ b/app/ui/templates/ui/components/dogear_boxes/SpecialDogearLinkBox.html
@@ -12,10 +12,10 @@
     <h1 class="text-h2 font-bold">
         {{ title }}
     </h1>
-    <div class="my-4">
+    <div class="mt-4 mb-10">
         {{ description|richtext }}
     </div>
-    <div class="mt-auto">
+    <div class="mt-auto text-intro mb-6">
         {% include "ui/components/BaseLink.html" %}
     </div>
 </div>
\ No newline at end of file
diff --git a/app/ui/templates/ui/components/events/EventPreviewBlockEvent.html b/app/ui/templates/ui/components/events/EventPreviewBlockEvent.html
index 0335714..868813d 100644
--- a/app/ui/templates/ui/components/events/EventPreviewBlockEvent.html
+++ b/app/ui/templates/ui/components/events/EventPreviewBlockEvent.html
@@ -45,10 +45,7 @@
 
         {% if event.rsvp_link %}
             <p class="text-hot-red">
-                <a href="{{event.rsvp_link}}" class="font-medium">
-                    {{event.get_parent.specific.rsvp_button_text}}
-                    {% include "ui/components/icon_svgs/LinkCaret.html" with class="ml-2" %}
-                </a>
+                {% include "ui/components/BaseLinkNoUnderline.html" with linkurl=event.rsvp_link linktext=event.get_parent.specific.rsvp_button_text %}
             </p>
         {% endif %}
     </div>
diff --git a/app/ui/templates/ui/components/icon_svgs/LinkCaretCircle.html b/app/ui/templates/ui/components/icon_svgs/LinkCaretCircle.html
new file mode 100644
index 0000000..f3db3b7
--- /dev/null
+++ b/app/ui/templates/ui/components/icon_svgs/LinkCaretCircle.html
@@ -0,0 +1,3 @@
+<div class="{%if borderclass%}{{borderclass}}{%else%}border-hot-red{%endif%} {{outerclass}} border-2 rounded-full h-8 w-8 text-center {%if styledhover%}hover:bg-hot-red hover:text-white transition duration-75{%endif%}">
+    {% include "./LinkCaret.html" with class="mt-0.5" %}
+</div>
\ No newline at end of file
diff --git a/app/ui/templates/ui/components/news/NewsPreviewBlockNews.html b/app/ui/templates/ui/components/news/NewsPreviewBlockNews.html
index f3aa44a..5d6ab03 100644
--- a/app/ui/templates/ui/components/news/NewsPreviewBlockNews.html
+++ b/app/ui/templates/ui/components/news/NewsPreviewBlockNews.html
@@ -19,16 +19,11 @@
         {{ news.intro|safe }}
     </div>
 
-    <p class="mt-6 font-medium">
-        <a href="{{ news.url }}" class="text-hot-red">
-            <span class="pr-2">
-                {% if readmoretext %}
-                    {{ readmoretext }}
-                {% else %}
-                    Read More
-                {% endif %}
-            </span>
-            {% include "ui/components/icon_svgs/LinkCaret.html" %}
-        </a>
+    <p class="mt-4 font-medium">
+        {% if readmoretext %}
+            {% include "ui/components/BaseLinkNoUnderline.html" with linkurl=news.url linktext=readmoretext %}
+        {% else %}
+            {% include "ui/components/BaseLinkNoUnderline.html" with linkurl=news.url linktext="Read More" %}
+        {% endif %}
     </p>
 </div>
\ No newline at end of file
diff --git a/app/ui/templates/ui/components/partners/PartnerViewBlock.html b/app/ui/templates/ui/components/partners/PartnerViewBlock.html
index a711017..ef8efac 100644
--- a/app/ui/templates/ui/components/partners/PartnerViewBlock.html
+++ b/app/ui/templates/ui/components/partners/PartnerViewBlock.html
@@ -9,9 +9,7 @@
 <div x-data="{ partnerIndex: 0, fixedIndex(x) {return ({{partners|length}} + x + this.partnerIndex) % {{partners|length}}}, moveIndex(x) {this.partnerIndex = this.fixedIndex(x)} }">
     <div class="flex justify-between">
         <div x-on:click="moveIndex(1)" class="p-4 order-first rotate-180 text-hot-red flex flex-col justify-center">
-            <div class="inline border-hot-red border-2 rounded-full h-8 w-8 text-center">
-                {% include "ui/components/icon_svgs/LinkCaret.html" %}
-            </div>
+            {% include "ui/components/icon_svgs/LinkCaretCircle.html" with styledhover=True %}
         </div>
         {% for partner in partners %}
             <div :class="{ 'hidden md:block': fixedIndex({{forloop.counter0}}) > 0 && fixedIndex({{forloop.counter0}}) <= 2, 
@@ -21,13 +19,11 @@
                  :style="`order: ${fixedIndex({{forloop.counter0}}) + 1}`"
                  class="p-4"
             >
-                {% image partner.partner_logo original class="max-h-16 max-w-24 h-auto w-auto" %}
+                {% image partner.partner_logo original class="max-h-16 max-w-full h-full w-auto" %}
             </div>
         {% endfor %}
         <div x-on:click="moveIndex(-1)" class="p-4 order-last text-hot-red flex flex-col justify-center">
-            <div class="inline border-hot-red border-2 rounded-full h-8 w-8 text-center">
-                {% include "ui/components/icon_svgs/LinkCaret.html" %}
-            </div>
+            {% include "ui/components/icon_svgs/LinkCaretCircle.html" with styledhover=True %}
         </div>
     </div>
 </div>
\ No newline at end of file
diff --git a/app/ui/templates/ui/components/programs/ProgramCarouselBlock.html b/app/ui/templates/ui/components/programs/ProgramCarouselBlock.html
index 1e29732..dbc3ca8 100644
--- a/app/ui/templates/ui/components/programs/ProgramCarouselBlock.html
+++ b/app/ui/templates/ui/components/programs/ProgramCarouselBlock.html
@@ -6,14 +6,10 @@
 <div x-data="{ partnerIndex: 0, fixedIndex(x) {return ({{programs|length}} + x + this.partnerIndex) % {{programs|length}}}, moveIndex(x) {this.partnerIndex = this.fixedIndex(x)} }" class="{{class}}">
     <div class="text-right mb-4">
         <div x-on:click="moveIndex(1)" class="pr-4 text-hot-red inline-flex flex-col justify-center">
-            <div class="border-hot-red border-2 rounded-full h-8 w-8 text-center">
-                {% include "ui/components/icon_svgs/LinkCaret.html" with class="rotate-180" %}
-            </div>
+            {% include "ui/components/icon_svgs/LinkCaretCircle.html" with outerclass="rotate-180" styledhover=True %}
         </div>
         <div x-on:click="moveIndex(-1)" class="text-hot-red inline-flex flex-col justify-center">
-            <div class="border-hot-red border-2 rounded-full h-8 w-8 text-center">
-                {% include "ui/components/icon_svgs/LinkCaret.html" %}
-            </div>
+            {% include "ui/components/icon_svgs/LinkCaretCircle.html" with styledhover=True %}
         </div>
     </div>
     
diff --git a/app/ui/templates/ui/components/projects/ProjectPreviewBlockMapHub.html b/app/ui/templates/ui/components/projects/ProjectPreviewBlockMapHub.html
index a7c09bf..b3327c8 100644
--- a/app/ui/templates/ui/components/projects/ProjectPreviewBlockMapHub.html
+++ b/app/ui/templates/ui/components/projects/ProjectPreviewBlockMapHub.html
@@ -8,7 +8,7 @@
 
 {% image project.header_image original as image_p %}
 <div class="font-medium {{class}}">
-    <a href="{{ project.url }}">
+    <a href="{{ project.url }}" class="[&:hover_.project-preview-title]:underline">
         <div>
             {% if showimage %}
                 <div class="w-full min-h-[9rem] mb-3 content-end bg-no-repeat bg-cover image-overshadow-gradient" style="background-image: url('{{ image_p.url }}')">
@@ -23,7 +23,7 @@
                 </span>
             </p>
             
-            <p class="my-1">
+            <p class="my-1 project-preview-title">
                 {{ project.title }}
             </p>
         </div>
@@ -31,7 +31,7 @@
 
     <p class="text-mini">
         {% for hub in project.region_hub_list %}
-            <a class="text-hot-red text-mini" href="{{ hub.value.url }}">{{ hub.value.title }}</a>{% if not forloop.last %},{% endif %}
+            <a class="text-hot-red text-mini hover:underline" href="{{ hub.value.url }}">{{ hub.value.title }}</a>{% if not forloop.last %},{% endif %}
         {% endfor %}
     </p>
 </div>
\ No newline at end of file
diff --git a/app/ui/templates/ui/components/projects/ProjectPreviewBlockNews.html b/app/ui/templates/ui/components/projects/ProjectPreviewBlockNews.html
index b8b33f2..81cb4d6 100644
--- a/app/ui/templates/ui/components/projects/ProjectPreviewBlockNews.html
+++ b/app/ui/templates/ui/components/projects/ProjectPreviewBlockNews.html
@@ -8,7 +8,7 @@
 
 {% image project.header_image original as image_p %}
 <div class="font-medium {{class}}">
-    <a href="{{ project.url }}">
+    <a href="{{ project.url }}" class="[&:hover_.project-preview-title]:underline">
         <div>
             {% if showimage %}
                 <div class="w-full min-h-[9rem] mb-3 content-end bg-no-repeat bg-cover image-overshadow-gradient" style="background-image: url('{{ image_p.url }}')">
@@ -23,7 +23,7 @@
                 </span>
             </p>
             
-            <p class="my-1">
+            <p class="my-1 project-preview-title">
                 {{ project.title }}
             </p>
         </div>
@@ -32,7 +32,7 @@
     <div class="text-mini my-2">
         {% for area in project.impact_area_list %}
             <p>
-                <a class="text-hot-red text-mini" href="{{ area.value.url }}">{{ area.value.title }}</a>{% if not forloop.last %},{% endif %}
+                <a class="text-hot-red text-mini hover:underline" href="{{ area.value.url }}">{{ area.value.title }}</a>{% if not forloop.last %},{% endif %}
             </p>
         {% endfor %}
     </div>
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 7aa816e..2eb2e9d 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -44,6 +44,7 @@ module.exports = {
       },
       colors: {
         "hot-red": "var(--hot-red)",
+        "hot-burgundy": "var(--hot-burgundy)",
         "hot-navy": "var(--hot-navy)",
         "hot-navy-grey": "var(--hot-navy-grey)",
         "hot-dark-grey": "var(--hot-dark-grey)",
diff --git a/home/templates/home/components/HomeSpecificCarousel.html b/home/templates/home/components/HomeSpecificCarousel.html
index 39acbce..c500350 100644
--- a/home/templates/home/components/HomeSpecificCarousel.html
+++ b/home/templates/home/components/HomeSpecificCarousel.html
@@ -1,29 +1,22 @@
 <div x-data="{ slide: 0, slides: [] }"
     x-init="slides = [...$el.children];"
     class="w-full lg:w-1/2 flex flex-col lg:flex-row justify-center md:px-12">
-    {% for block in page.carousel %}
-        <div x-show="slide === {{ forloop.counter0 }}"
-            class="mt-20 lg:w-96 lg:mt-0 backdrop-blur-md p-8 shadow-md min-h-[20rem] flex flex-col bg-hot-red md:bg-transparent">
-            <div class="text-h4 font-bold h-fit">{{ block.value.header }}</div>
-            <div class="text-lg font-regular h-fit my-2">{{ block.value.body }}</div>
-            <a href="{%include 'ui/components/PageOrLinkHrefText.html' with linkurl=block.value.action_button.link%}" class="mt-auto">
-                <div class="text-intro font-medium inline-flex space-x-5 items-center">
-                    <span>{{ block.value.action_button.text }}</span>
-                    
-                    <svg xmlns="http://www.w3.org/2000/svg"
-                        width="10.689"
-                        height="16.819"
-                        class="text-white md:text-hot-red"
-                        viewBox="0 0 10.689 16.819">
-                        <path id="Path_4671" data-name="Path 4671" d="M0,8.28,7,0l7,8.28" transform="translate(9.689 1.409) rotate(90)" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
-                    </svg>
-                </div>
-            </a>
-            <button @click="slide = (slide + 1) % 3" class="md:hidden text-right mt-2">
-                Next →
-            </button>
-        </div>
-    {% endfor %}
+    <div class="grid">
+        {% for block in page.carousel %}
+            <div :class="slide === {{ forloop.counter0 }} ? '' : 'pointer-events-none invisible'"
+                class="col-start-1 row-start-1 mt-20 lg:w-96 lg:mt-0 backdrop-blur-md p-8 shadow-md min-h-[20rem] flex flex-col bg-hot-red md:bg-transparent">
+                <div class="text-h4 font-bold h-fit">{{ block.value.header }}</div>
+                <div class="text-lg font-regular h-fit my-2">{{ block.value.body }}</div>
+                
+                <p class="text-intro mt-auto md:[&_svg]:text-hot-red [&_svg]:text-white">
+                    {% include "ui/components/BaseLinkNoUnderlineWhite.html" with linktext=block.value.action_button.text linkurl=block.value.action_button.link %}
+                </p>
+                <button @click="slide = (slide + 1) % 3" class="md:hidden text-right mt-2">
+                    Next →
+                </button>
+            </div>
+        {% endfor %}
+    </div>
     <div class="md:flex flex-row hidden lg:flex-col justify-center lg:justify-normal">
         <button @click="slide=0"
                 x-bind:class="{'bg-hot-red shadow w-[45px] h-[45px] text-2xl text-hot-white font-bold flex items-center justify-center': slide === 0, 'backdrop-blur-lg shadow w-[45px] h-[45px] text-2xl text-hot-white font-regular flex items-center justify-center': slide !== 0}">
diff --git a/home/templates/home/components/ImpactAreasPanel.html b/home/templates/home/components/ImpactAreasPanel.html
index ea9db17..9fc0a02 100644
--- a/home/templates/home/components/ImpactAreasPanel.html
+++ b/home/templates/home/components/ImpactAreasPanel.html
@@ -6,15 +6,11 @@
             }">
     {% comment %} SELECTOR PANEL {% endcomment %}
     <div class="text-right mb-4 {%if impact_areas|length <= 5%}lg:hidden{%endif%}">
-        <div x-on:click="moveIndex(-1)" class="pr-4 text-hot-red inline-flex flex-col justify-center">
-            <div class="border-hot-red border-2 rounded-full h-8 w-8 text-center">
-                {% include "ui/components/icon_svgs/LinkCaret.html" with class="rotate-180" %}
-            </div>
+        <div x-on:click="moveIndex(1)" class="pr-4 text-hot-red inline-flex flex-col justify-center">
+            {% include "ui/components/icon_svgs/LinkCaretCircle.html" with outerclass="rotate-180" styledhover=True %}
         </div>
-        <div x-on:click="moveIndex(1)" class="text-hot-red inline-flex flex-col justify-center">
-            <div class="border-hot-red border-2 rounded-full h-8 w-8 text-center">
-                {% include "ui/components/icon_svgs/LinkCaret.html" %}
-            </div>
+        <div x-on:click="moveIndex(-1)" class="text-hot-red inline-flex flex-col justify-center">
+            {% include "ui/components/icon_svgs/LinkCaretCircle.html" with styledhover=True %}
         </div>
     </div>
     <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4 mb-10">
@@ -54,20 +50,17 @@
             <div class="row-start-1 col-start-1 bg-white w-full p-12"
                  x-bind:class="{'invisible pointer-events-none': selIndex != {{forloop.counter0}}}"
             >
-                <div class="grid grid-cols-1 md:grid-cols-5 gap-y-8 md:gap-8 max-w-5xl mx-auto">
-                    <div class="col-span-3">
+                <div class="grid grid-cols-1 md:grid-cols-5 gap-y-8 md:gap-8 max-w-5xl mx-auto h-full">
+                    <div class="col-span-3 flex flex-col h-full">
                         <h1 class="text-hot-red font-bold text-h4">
                             {{ area.title }}
                         </h1>
                         <div class="pt-2 mb-6">
                             {{ area.description|richtext }}
                         </div>
-                        <a href="{{ area.url }}" class="text-hot-red font-medium">
-                            <p>
-                                <span class="mr-2">{{ page.impact_areas_learn_more }}</span>
-                                {% include "ui/components/icon_svgs/LinkCaret.html" %}
-                            </p>
-                        </a>
+                        <p class="mt-auto">
+                            {% include "ui/components/BaseLinkNoUnderline.html" with linktext=page.impact_areas_learn_more linkurl=area.url %}
+                        </p>
                     </div>
                     {% image area.intro_image original as area_image %}
                     <div class="col-span-2 bg-cover bg-no-repeat h-40" style="background-image: url('{{area_image.url}}')" >
diff --git a/home/templates/home/components/MappingHubsPanel.html b/home/templates/home/components/MappingHubsPanel.html
index adb7281..9e3c016 100644
--- a/home/templates/home/components/MappingHubsPanel.html
+++ b/home/templates/home/components/MappingHubsPanel.html
@@ -19,20 +19,17 @@
                     {{ page.mapping_hubs_description|richtext }}
                 </div>
                 
-                <a href="{%include 'ui/components/PageOrLinkHrefText.html' with linkurl=page.mapping_hubs_link_link%}" class="font-medium text-intro mt-4">
-                    <p class="text-hot-red">
-                        <span class="text-white mr-2">{{ page.mapping_hubs_link_text }}</span>
-                        {% include "ui/components/icon_svgs/LinkCaret.html" with class="" %}
-                    </p>
-                </a>
+                <p class="mt-auto text-intro">
+                    {% include "ui/components/BaseLinkNoUnderlineWhite.html" with linktext=page.mapping_hubs_link_text linkurl=page.mapping_hubs_link_link %}
+                </p>
             </div>
         </div>
         {% for hub in mapping_hubs %}
             <div :class="selIndex == {{forloop.counter}} ? '' : 'invisible'" class="row-start-1 col-start-1 text-white lg:grid lg:grid-cols-3 md:block hidden" style="background-color: {{hub.main_colour}}">
                 {% image hub.header_image original as hub_image %}
-                <div class="hidden lg:block bg-no-repeat bg-cover" style="background-image: url('{{hub_image.url}}')">
+                <div class="hidden lg:block bg-no-repeat bg-cover bg-center" style="background-image: url('{{hub_image.url}}')">
                 </div>
-                <div class="col-span-2 p-10">
+                <div class="col-span-2 p-10 flex flex-col h-full">
                     <div class="flex items-center">
                         <div class="inline-grid mr-2">
                             <div class="row-start-1 col-start-1 inline mr-2" style="filter: grayscale(100%) invert(100%) contrast(2)">
@@ -55,13 +52,10 @@
                     <div class="my-4 text-intro">
                         {{ hub.intro|richtext }}
                     </div>
-                    
-                    <a href="{{ hub.url }}">
-                        <p class="text-intro font-medium">
-                            <span>{{page.mapping_hubs_hub_learn_more}}</span>
-                            {% include "ui/components/icon_svgs/LinkCaret.html" with class="text-hot-red" %}
-                        </p>
-                    </a>
+
+                    <p class="mt-auto text-intro">
+                        {% include "ui/components/BaseLinkNoUnderlineWhite.html" with linktext=page.mapping_hubs_hub_learn_more linkurl=hub.url %}
+                    </p>
                 </div>
             </div>
         {% endfor %}
diff --git a/home/templates/home/components/StatBlock.html b/home/templates/home/components/StatBlock.html
new file mode 100644
index 0000000..7b253b6
--- /dev/null
+++ b/home/templates/home/components/StatBlock.html
@@ -0,0 +1,4 @@
+<div class="md:backdrop-blur-lg md:shadow-md flex flex-col justify-center text-center h-32 p-4">
+    <div class="font-semibold text-h4">{{number}}</div>
+    <div>{{stat}}</div>
+</div>
\ No newline at end of file
diff --git a/home/templates/home/home_page.html b/home/templates/home/home_page.html
index e2482cc..0b6c75b 100644
--- a/home/templates/home/home_page.html
+++ b/home/templates/home/home_page.html
@@ -40,22 +40,10 @@
                     </div>
                     <!--CTA Statistics, TODO: Use HTMX to query endpoint for stats once the endpoint exists  -->
                     <div class="grid grid-cols-2 md:grid-cols-4 h-full md:pt-16 bg-hot-red md:bg-transparent gap-8 max-w-5xl mx-auto md:px-4">
-                        <div class="md:backdrop-blur-lg md:shadow-md flex flex-col justify-center text-center h-32 p-4">
-                            <div class="font-barlow font-semibold text-h4">468K</div>
-                            <div class="font-regular text-base-18">Total Mappers ⓘ</div>
-                        </div>
-                        <div class="md:backdrop-blur-lg md:shadow-md flex flex-col justify-center text-center h-32 p-4">
-                            <div class="font-barlow font-semibold text-h4">246.7M</div>
-                            <div class="font-regular text-base-18">Total Map Edits ⓘ</div>
-                        </div>
-                        <div class="md:backdrop-blur-lg md:shadow-md flex flex-col justify-center text-center h-32 p-4">
-                            <div class="font-barlow font-semibold text-h4">147.5M</div>
-                            <div class="font-regular text-base-18">Buildings Mapped ⓘ</div>
-                        </div>
-                        <div class="md:backdrop-blur-lg md:shadow-md flex flex-col justify-center text-center h-32 p-4">
-                            <div class="font-barlow font-semibold text-h4">2.7M</div>
-                            <div class="font-regular text-base-18">Roads Mapped(KM) ⓘ</div>
-                        </div>
+                        {% include "./components/StatBlock.html" with number="468K" stat="Total Mappers ⓘ" %}
+                        {% include "./components/StatBlock.html" with number="246.7M" stat="Total Map Edits ⓘ" %}
+                        {% include "./components/StatBlock.html" with number="147.5M" stat="Buildings Mapped ⓘ" %}
+                        {% include "./components/StatBlock.html" with number="2.7M" stat="Roads Mapped(KM) ⓘ" %}
                     </div>
                 </div>
             </div>
@@ -68,7 +56,7 @@
                 {% comment %} HIGHLIGHTED PROGRAMS {% endcomment %}
                 <div class="grid grid-cols-1 lg:grid-cols-5 mt-10 mb-5 gap-4">
                     <div class="col-span-3">
-                        <h2 class="text-h4 font-semibold">
+                        <h2 class="text-h4 font-semibold mb-2">
                             {{ page.highlighted_programs_title }}
                         </h2>
                         <div class="text-intro">
@@ -79,13 +67,13 @@ <h2 class="text-h4 font-semibold">
                         {% include "ui/components/BaseLink.html" with linktext=page.view_all_programs_text linkurl=page.view_all_programs_url %}
                     </div>
                 </div>
-                <div class="mb-10">
+                <div class="mb-20">
                     {% include "ui/components/programs/ProgramCarouselBlock.html" with programs=page.highlighted_programs %}
                 </div>
 
                 {% comment %} IMPACT AREAS {% endcomment %}
                 <div class="lg:w-3/5 my-10">
-                    <h2 class="text-h4 font-semibold">
+                    <h2 class="text-h4 font-semibold mb-2">
                         {{ page.impact_areas_title }}
                     </h2>
                     <div class="text-intro">
@@ -161,8 +149,8 @@ <h2 class="text-h4 font-semibold">
 
             {% comment %} SUBSCRIBE {% endcomment %}
             <div class="rounded-2xl shadow-md">
-                <div class="bg-hot-off-white py-8 px-16 my-20">
-                    <h1 class="text-h2 font-bold">
+                <div class="bg-hot-off-white py-6 md:py-8 px-8 md:px-16 my-20">
+                    <h1 class="text-h4 md:text-h2 font-bold">
                         {{ page.subscribe_title }}
                     </h1>
                     <form class=" mt-4 [&_label]:block 
@@ -173,20 +161,20 @@ <h1 class="text-h2 font-bold">
                                 <div>
                                     <label for="firstname" class="font-medium mb-2">{{ page.subscribe_first_name_text }}</label>
                                     <div class="rounded-2xl shadow-md">
-                                        <input name="firstname" id="firstname" type="text" placeholder="{{page.subscribe_first_name_field_hint}}" class="w-full">
+                                        <input name="firstname" id="firstname" type="text" placeholder="{{page.subscribe_first_name_field_hint}}" class="w-full" required>
                                     </div>
                                 </div>
                                 <div>
                                     <label for="lastname" class="font-medium mb-2">{{ page.subscribe_last_name_text }}</label>
                                     <div class="rounded-2xl shadow-md">
-                                        <input name="lastname" id="lastname" type="text" placeholder="{{page.subscribe_last_name_field_hint}}" class="w-full">
+                                        <input name="lastname" id="lastname" type="text" placeholder="{{page.subscribe_last_name_field_hint}}" class="w-full" required>
                                     </div>
                                 </div>
                                 <div class="md:col-span-2 lg:col-span-1 flex gap-4">
                                     <div class="grow">
                                         <label for="email" class="font-medium mb-2">{{ page.subscribe_email_text }}</label>
                                         <div class="rounded-2xl shadow-md">
-                                            <input name="email" id="email" type="text" placeholder="{{page.subscribe_email_field_hint}}" class="w-full">
+                                            <input name="email" id="email" type="text" placeholder="{{page.subscribe_email_field_hint}}" class="w-full" required>
                                         </div>
                                     </div>
                                     <div class="cursor-pointer hidden md:block lg:hidden self-end">
@@ -200,7 +188,7 @@ <h1 class="text-h2 font-bold">
                         </div>
                         
                         <div class="flex items-center mt-4 mb-4 md:mb-0">
-                            <input type="checkbox" id="agreecheckmark" name="agreecheckmark" value="Agree" class="rounded shadow-md">
+                            <input type="checkbox" id="agreecheckmark" name="agreecheckmark" value="Agree" class="rounded shadow-md" required>
                             <label for="agreecheckmark" class="ml-2 [&_a]:font-medium">
                                 {{page.subscribe_checkbox_text|safe}}
                             </label>
diff --git a/hot_osm/static/css/hot_osm.css b/hot_osm/static/css/hot_osm.css
index 74be538..29a4a2a 100644
--- a/hot_osm/static/css/hot_osm.css
+++ b/hot_osm/static/css/hot_osm.css
@@ -5,6 +5,7 @@
 :root {
     /* Colors */
     --hot-red: #D73F3F;
+    --hot-burgundy: #6D2021;
     --hot-navy: #20365B;
     --hot-navy-grey: #2C3038;
     --hot-dark-grey: #68707F;
@@ -100,10 +101,19 @@
     color: var(--hot-red);
 }
 
-.base-article-m p,
+.base-article a:hover,
+.base-article-m a:hover {
+    text-decoration: underline;
+}
+
+.base-article-m p {
+    margin-top: 0.7rem;
+    margin-bottom: 0.7rem;
+}
+
 .base-article-m img {
-    margin-top: 0.45rem;
-    margin-bottom: 0.45rem;
+    margin-top: 1.2rem;
+    margin-bottom: 1.2rem;
 }
 
 .base-article p,
@@ -149,22 +159,22 @@
 
 .base-article-m h1 {
     margin-top: 2.2rem;
-    margin-bottom: 0.8rem;
+    margin-bottom: 1rem;
 }
 
 .base-article-m h2 {
-    margin-top: 0.8rem;
-    margin-bottom: 0.6rem;
+    margin-top: 2rem;
+    margin-bottom: 1rem;
 }
 
 .base-article-m h3 {
-    margin-top: 0.8rem;
-    margin-bottom: 0.6rem;
+    margin-top: 2rem;
+    margin-bottom: 1rem;
 }
 
 .base-article-m h4 {
-    margin-top: 0.7rem;
-    margin-bottom: 0.5rem;
+    margin-top: 2rem;
+    margin-bottom: 1rem;
 }
 
 .base-article-m blockquote {
@@ -185,7 +195,7 @@
     font-size: var(--font-size-intro);
 }
 
-.project-sidebar div {
+.project-sidebar>div {
     padding: 1.5em 0;
     border-bottom: 0.1em solid black;
 }
@@ -235,4 +245,8 @@
 
 .black-image-redifier {
     filter: invert(23%) sepia(93%) saturate(1690%) hue-rotate(340deg) brightness(110%) contrast(81%);
+}
+
+.link-hover-colourer:hover {
+    color: var(--link-hover-colourer-colour);
 }
\ No newline at end of file
diff --git a/hot_osm/templates/components/branded_elements/button.html b/hot_osm/templates/components/branded_elements/button.html
index a188a32..0d57571 100644
--- a/hot_osm/templates/components/branded_elements/button.html
+++ b/hot_osm/templates/components/branded_elements/button.html
@@ -1,5 +1,5 @@
 <!-- Resolution: Added 'tabindex=0' to the element to fix an issue where the focus ring was not appearing in Safari. This makes the element focusable and ensures the focus ring is displayed. -->
 <button tabindex="0"
-        class="font-medium font-archivo py-1 text-intro bg-hot-red border-2 border-hot-red text-hot-white px-hot-3 hover:bg-hot-off-white hover:text-hot-red focus:bg-transparent focus:text-hot-red focus:ring-2 focus:ring-hot-red focus:ring-inset {{ classes }}">
+        class="font-medium font-archivo transition duration-75 py-1 text-intro bg-hot-red border-2 border-hot-red text-hot-white px-hot-3 hover:bg-hot-burgundy hover:border-hot-burgundy focus:bg-transparent focus:text-hot-red focus:ring-2 focus:ring-hot-red focus:ring-inset {{ classes }}">
     {{ text }}
 </button>
diff --git a/hot_osm/templates/components/branded_elements/button_bordered.html b/hot_osm/templates/components/branded_elements/button_bordered.html
index c1e004e..d311737 100644
--- a/hot_osm/templates/components/branded_elements/button_bordered.html
+++ b/hot_osm/templates/components/branded_elements/button_bordered.html
@@ -1,5 +1,5 @@
 <!-- Resolution: Added 'tabindex=0' to the element to fix an issue where the focus ring was not appearing in Safari. This makes the element focusable and ensures the focus ring is displayed. -->
 <button tabindex="0"
-        class="font-medium font-archivo py-1 text-intro border-2 border-white text-white px-hot-3 hover:bg-hot-off-white hover:text-hot-red focus:bg-transparent focus:text-hot-red focus:ring-2 focus:ring-hot-red focus:ring-inset {{ classes }}">
+        class="font-medium font-archivo transition duration-75 py-1 text-intro border-2 border-white text-white px-hot-3 hover:bg-hot-off-white hover:text-hot-red focus:bg-transparent focus:text-hot-red focus:ring-2 focus:ring-hot-red focus:ring-inset {{ classes }}">
     {{ text }}
 </button>

From b5a36cff0c1fe38546fd2e4459a58adf2d899cd4 Mon Sep 17 00:00:00 2001
From: luminaryFlowers <71102109+luminaryFlowers@users.noreply.github.com>
Date: Wed, 11 Sep 2024 10:35:58 -0700
Subject: [PATCH 02/15] smoother pagination

---
 .../templates/events/event_owner_page.html    | 26 ++++---
 .../templates/members/member_group_page.html  | 14 +++-
 app/news/models.py                            |  2 -
 app/news/templates/news/news_owner_page.html  | 30 ++++++---
 .../utilities/PaginatorNavigationHTMX.html    | 67 +++++++++++++++++++
 5 files changed, 117 insertions(+), 22 deletions(-)
 create mode 100644 app/ui/templates/ui/components/utilities/PaginatorNavigationHTMX.html

diff --git a/app/events/templates/events/event_owner_page.html b/app/events/templates/events/event_owner_page.html
index 3ffad23..2882d36 100644
--- a/app/events/templates/events/event_owner_page.html
+++ b/app/events/templates/events/event_owner_page.html
@@ -10,10 +10,18 @@
 {% endblock extra_css %}
 
 {% block content %}
-    <div class="max-w-7xl mx-auto my-10" x-data="{ params: new URLSearchParams((new URL(window.location.href)).search) }">
+    <div class="max-w-7xl mx-auto my-10" x-data="{ params: new URLSearchParams((new URL(window.location.href)).search), activeParams: {} }">
         <div class="px-6 md:px-10">
             <h1 class="text-h1 font-semibold my-10">{{page.title}}</h1>
-            <form class="my-10">
+            <form class="my-10"
+                hx-get="{{page.url}}"
+                hx-trigger="submit"
+                hx-target="#items-list, #paginator-navigation"
+                hx-select="#items-list, #paginator-navigation"
+                hx-swap="innerHTML"
+                hx-select-oob="#items-list:outerHTML, #paginator-navigation:innerHTML"
+                @submit="activeParams = new FormData($el);"
+            >
                 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                     {% comment %} KEYWORD SEARCH {% endcomment %}
                     <div class="bg-hot-off-white flex items-center">
@@ -102,15 +110,17 @@ <h1 class="text-h1 font-semibold my-10">{{page.title}}</h1>
             </form>
 
             {% comment %} EVENT ITEMS {% endcomment %}
-            <h2 class="text-h2 font-bold my-8">{{events_paginator.count}} {{page.results_text}}</h2>
-            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-10">
-                {% for event in events %}
-                    {% include "ui/components/events/EventPreviewBlockEvent.html" with event=event showimage=True %}
-                {% endfor %}
+            <div id="items-list">
+                <h2 class="text-h2 font-bold my-8">{{events_paginator.count}} {{page.results_text}}</h2>
+                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-10">
+                    {% for event in events %}
+                        {% include "ui/components/events/EventPreviewBlockEvent.html" with event=event showimage=True %}
+                    {% endfor %}
+                </div>
             </div>
 
             {% comment %} PAGE NAVIGATION {% endcomment %}
-            {% include "ui/components/utilities/PaginatorNavigation.html" with paginator=events_paginator current_page=current_page %}
+            {% include "ui/components/utilities/PaginatorNavigationHTMX.html" with paginator=events_paginator current_page=current_page %}
         </div>
     </div>
 {% endblock %}
diff --git a/app/members/templates/members/member_group_page.html b/app/members/templates/members/member_group_page.html
index 3910f80..1dae6d2 100644
--- a/app/members/templates/members/member_group_page.html
+++ b/app/members/templates/members/member_group_page.html
@@ -12,7 +12,7 @@
 {% block content %}
     {% include "ui/components/PageHeaderWithBlur.html" with title=page.title subtitle=page.intro image=page.header_image %}
 
-    <div class="max-w-7xl mx-auto px-6 md:px-10 my-10" x-data="{ params: new URLSearchParams((new URL(window.location.href)).search) }">
+    <div class="max-w-7xl mx-auto px-6 md:px-10 my-10" x-data="{ params: new URLSearchParams((new URL(window.location.href)).search), activeParams: {} }">
         <div class="max-w-3xl">
             <div class="text-intro">
                 {{page.body_intro|safe}}
@@ -23,7 +23,15 @@
         </div>
 
         {% if page.show_search_options %}
-            <form class="mt-20 mb-10">
+            <form class="mt-20 mb-10"
+                hx-get="{{page.url}}"
+                hx-trigger="submit"
+                hx-target="#members-list, #next-member"
+                hx-select="#members-list, #next-member"
+                hx-swap="innerHTML"
+                hx-select-oob="#members-list:outerHTML, #next-member:innerHTML"
+                @submit="activeParams = new FormData($el);"
+            >
                 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                     {% comment %} KEYWORD SEARCH {% endcomment %}
                     <div class="bg-hot-off-white flex items-center">
@@ -81,7 +89,7 @@
         <p class="text-center mt-10 mb-20" id="next-member" class="{% if not members.has_next %}hidden{% endif %}">
             {% if members.has_next %}
                     {% comment %} <a href="?page={{ projects.next_page_number }}"></a> {% endcomment %}
-                    <button hx-get="?page={{ members.next_page_number }}"
+                    <button :hx-get="'?page={{ members.next_page_number }}&' + `${(new URLSearchParams(activeParams)).toString()}`"
                         hx-trigger="click"
                         hx-select="#members-list, #next-project"
                         hx-swap="beforeend"
diff --git a/app/news/models.py b/app/news/models.py
index c0887ae..0cd3bbb 100644
--- a/app/news/models.py
+++ b/app/news/models.py
@@ -187,8 +187,6 @@ class IndividualNewsPage(Page):
     search_fields = Page.search_fields + [
         index.SearchField('title'),
         index.SearchField('intro'),
-        # index.FilterField('newscategory_id'),  # the console warns you about this but if you don't have this then category search doesn't work
-        # index.FilterField('name'),
         index.SearchField('search_description'),
     ]
 
diff --git a/app/news/templates/news/news_owner_page.html b/app/news/templates/news/news_owner_page.html
index e1e4d9d..bb154b3 100644
--- a/app/news/templates/news/news_owner_page.html
+++ b/app/news/templates/news/news_owner_page.html
@@ -10,10 +10,18 @@
 {% endblock extra_css %}
 
 {% block content %}
-    <div class="max-w-7xl mx-auto my-10" x-data="{ params: new URLSearchParams((new URL(window.location.href)).search) }">
+    <div class="max-w-7xl mx-auto my-10" x-data="{ params: new URLSearchParams((new URL(window.location.href)).search), activeParams: {} }">
         <div class="px-6 md:px-10">
             <h1 class="text-h1 font-semibold my-10">{{page.title}}</h1>
-            <form>
+            <form id="search-form"
+                hx-get="{{page.url}}"
+                hx-trigger="submit"
+                hx-target="#items-list, #paginator-navigation"
+                hx-select="#items-list, #paginator-navigation"
+                hx-swap="innerHTML"
+                hx-select-oob="#items-list:outerHTML, #paginator-navigation:innerHTML"
+                @submit="activeParams = new FormData($el);"
+            >
                 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                     {% comment %} KEYWORD SEARCH {% endcomment %}
                     <div class="bg-hot-off-white flex items-center">
@@ -69,7 +77,9 @@ <h1 class="text-h1 font-semibold my-10">{{page.title}}</h1>
                     </div>
 
                     <div class="bg-hot-red text-white font-semibold">
-                        <input type="submit" value="{{page.search_button_text}}" class="bg-transparent w-full h-full cursor-pointer py-2">
+                        <button class="bg-transparent w-full h-full cursor-pointer py-2">
+                            {{page.search_button_text}}
+                        </button>
                     </div>
                 </div>
 
@@ -95,15 +105,17 @@ <h1 class="text-h1 font-semibold my-10">{{page.title}}</h1>
             </form>
 
             {% comment %} NEWS ITEMS {% endcomment %}
-            <h2 class="text-h2 font-bold my-8">{{news_paginator.count}} {{page.results_text}}</h2>
-            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-10">
-                {% for article in news %}
-                    {% include "ui/components/news/NewsPreviewBlockProjects.html" with news=article showimage=True class="[&_.image-hide-small]:hidden md:[&_.image-hide-small]:block" %}
-                {% endfor %}
+            <div id="items-list">
+                <h2 class="text-h2 font-bold my-8">{{news_paginator.count}} {{page.results_text}}</h2>
+                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-10">
+                    {% for article in news %}
+                        {% include "ui/components/news/NewsPreviewBlockProjects.html" with news=article showimage=True class="[&_.image-hide-small]:hidden md:[&_.image-hide-small]:block" %}
+                    {% endfor %}
+                </div>
             </div>
 
             {% comment %} PAGE NAVIGATION {% endcomment %}
-            {% include "ui/components/utilities/PaginatorNavigation.html" with paginator=news_paginator current_page=current_page %}
+            {% include "ui/components/utilities/PaginatorNavigationHTMX.html" with paginator=news_paginator current_page=current_page %}
         </div>
     </div>
 {% endblock %}
diff --git a/app/ui/templates/ui/components/utilities/PaginatorNavigationHTMX.html b/app/ui/templates/ui/components/utilities/PaginatorNavigationHTMX.html
new file mode 100644
index 0000000..0596ac2
--- /dev/null
+++ b/app/ui/templates/ui/components/utilities/PaginatorNavigationHTMX.html
@@ -0,0 +1,67 @@
+{% comment %}
+PARAMETERS:
+=> paginator: a paginator object
+=> current_page: an integer, the current page
+{% endcomment %}
+<div x-data="{ params: new URLSearchParams((new URL(window.location.href)).search) }" id="paginator-navigation">
+    <div class="w-full flex justify-center items-center" 
+            x-data="{
+                    page: 1,
+                    paramsX: new URLSearchParams(activeParams),
+                    getPageLink(x) { this.paramsX.set('page', x); activeParams['page'] = x; return '?' + this.paramsX.toString() }
+                    }"
+            x-init="page = paramsX.get('page') ? paramsX.get('page') : 1"
+    >
+        <button :hx-get="{%if current_page == 1%}getPageLink(1){%else%}getPageLink({{current_page}} - 1){%endif%}"
+            hx-trigger="click"
+            hx-select="#items-list, #paginator-navigation"
+            hx-swap="outerHTML"
+            hx-select-oob="#items-list:outerHTML, #paginator-navigation:outerHTML"
+            {% if current_page == 1 %}disabled{% endif %}
+            aria-label="Previous Page"
+        >
+            <p class="cursor-pointer {%if current_page == 1%}text-hot-slate-grey{%else%}text-hot-red{%endif%}">
+                {% include "ui/components/icon_svgs/LinkCaret.html" with class="rotate-180" %}
+            </p>
+        </button>
+        <div class="flex gap-2 mx-4">
+            {% with ''|center:paginator.num_pages as range %}
+                {% for _ in range %}
+                    {% if forloop.counter == 1 or forloop.counter == paginator.num_pages or forloop.counter == current_page or forloop.counter|add:1 == current_page or forloop.counter|add:'-1' == current_page %}
+                        <button :hx-get="getPageLink(parseInt({{forloop.counter}}))"
+                                hx-trigger="click"
+                                hx-select="#items-list, #paginator-navigation"
+                                hx-swap="outerHTML"
+                                hx-select-oob="#items-list:outerHTML, #paginator-navigation:outerHTML"
+                        >
+                            <p class="px-2 font-bold {%if forloop.counter == current_page%}bg-hot-red text-white{%else%}bg-hot-off-white{%endif%}">
+                                {{forloop.counter}}
+                            </p>
+                        </button>
+                    {% endif %}
+                    {% if forloop.counter|add:2 == current_page or forloop.counter|add:'-2' == current_page and not forloop.last %}
+                        {% comment %} 
+                            for reasons that i can't begin to comprehend, the if statement 
+                            below CANNOT be part of the if statement above. it just does
+                            not work
+                        {% endcomment %}
+                        {% if not forloop.first %}
+                            <p class="mx-1">...</p>
+                        {% endif %}
+                    {% endif %}
+                {% endfor %}
+            {% endwith %}
+        </div>
+        <button {%if current_page == paginator.num_pages%}{%else%}:hx-get="getPageLink(parseInt({{current_page}}) + 1)"{%endif%}
+                hx-trigger="click"
+                hx-select="#items-list, #paginator-navigation"
+                hx-swap="outerHTML"
+                hx-select-oob="#items-list:outerHTML, #paginator-navigation:outerHTML"
+                aria-label="Next Page"
+        >
+            <p class="cursor-pointer {%if current_page == paginator.num_pages%}text-hot-slate-grey{%else%}text-hot-red{%endif%}">
+                {% include "ui/components/icon_svgs/LinkCaret.html" %}
+            </p>
+        </button>
+    </div>
+</div>

From d9e58ce60ef3b8ead8c18db49ee2c7a6e273ff87 Mon Sep 17 00:00:00 2001
From: luminaryFlowers <71102109+luminaryFlowers@users.noreply.github.com>
Date: Wed, 11 Sep 2024 16:50:37 -0700
Subject: [PATCH 03/15] many little qa things; doc collection pages now smooth
 paginated too

---
 app/misc/models.py                            |  1 +
 .../misc/document_collection_page.html        | 36 +++++++++--------
 .../partners/partner_with_us_page.html        |  4 +-
 .../partners/partnership_template_page.html   |  8 ++--
 .../ui/components/BasePageHeader.html         |  2 +-
 .../FooterBannerWithTextAndLink.html          | 12 ++++--
 .../ui/components/PageHeaderWithBlur.html     |  2 +-
 .../ui/components/PageOrLinkHrefText.html     |  8 ++--
 .../dogear_boxes/DogearAnyColour.html         |  2 +-
 .../components/dogear_boxes/DogearBlack.html  |  2 +-
 .../dogear_boxes/DogearContent.html           | 40 ++++++++++---------
 .../ui/components/dogear_boxes/DogearRed.html |  2 +-
 .../impact_areas/ImpactAreaPreviewBlock.html  |  2 +-
 .../ImpactAreaPreviewBlockMini.html           |  4 +-
 .../mapping_hub/MappingHubPreviewBlock.html   |  2 +-
 .../MappingHubPreviewProjectsBlock.html       |  2 +-
 .../components/partners/PartnerViewBlock.html | 20 +++++-----
 .../projects/ProjectPreviewBlockMapHub.html   |  5 +--
 .../projects/ProjectPreviewBlockNews.html     |  5 +--
 .../utilities/PaginatorNavigation.html        | 11 +++--
 .../utilities/PaginatorNavigationHTMX.html    | 11 +++--
 ...inator_next_homepage_paginator_previous.py | 23 +++++++++++
 home/models.py                                |  7 ++++
 23 files changed, 130 insertions(+), 81 deletions(-)
 create mode 100644 home/migrations/0035_homepage_paginator_next_homepage_paginator_previous.py

diff --git a/app/misc/models.py b/app/misc/models.py
index cd3b931..42ad079 100644
--- a/app/misc/models.py
+++ b/app/misc/models.py
@@ -254,6 +254,7 @@ def get_context(self, request, *args, **kwargs):
         
         context['documents'] = documents
         context['paginator'] = paginator
+        context['current_page'] = int(page)
         return context
 
     header_image = models.ForeignKey(
diff --git a/app/misc/templates/misc/document_collection_page.html b/app/misc/templates/misc/document_collection_page.html
index 6e39194..0a88839 100644
--- a/app/misc/templates/misc/document_collection_page.html
+++ b/app/misc/templates/misc/document_collection_page.html
@@ -14,28 +14,30 @@
     
     <div class="max-w-7xl mx-auto my-10">
         <div class="px-6 md:px-10">
-            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8" x-data="{ activeParams: {} }">
                 <div class="lg:col-span-2 grid gap-8">
-                    {% for doc in documents %}
-                        <div class="grid lg:grid-cols-4 gap-8">
-                            {% image doc.value.icon original class="w-full h-auto hidden lg:block" %}
-                            <div class="{%if not doc.value.icon%}lg:col-span-4{%else%}lg:col-span-3{%endif%}">
-                                <h1 class="text-h2 font-bold">
-                                    {{doc.value.document.title}}
-                                </h1>
-                                <div class="my-4">
-                                    {{doc.value.description}}
+                    <div id="items-list" class="grid gap-8">
+                        {% for doc in documents %}
+                            <div class="grid lg:grid-cols-4 gap-8">
+                                {% image doc.value.icon original class="w-full h-auto hidden lg:block" %}
+                                <div class="{%if not doc.value.icon%}lg:col-span-4{%else%}lg:col-span-3{%endif%}">
+                                    <h1 class="text-h2 font-bold">
+                                        {{doc.value.document.title}}
+                                    </h1>
+                                    <div class="my-4">
+                                        {{doc.value.description}}
+                                    </div>
+                                    <p class="text-intro mt-2">
+                                        {% include "ui/components/BaseLink.html" with linktext=page.document_access_prefix_text|add:" "|add:doc.value.document.title linkurl=doc.value.document.url %}
+                                    </p>
                                 </div>
-                                <p class="text-intro mt-2">
-                                    {% include "ui/components/BaseLink.html" with linktext=page.document_access_prefix_text|add:" "|add:doc.value.document.title linkurl=doc.value.document.url %}
-                                </p>
                             </div>
-                        </div>
 
-                        <hr class="border-b-2">
-                    {% endfor %}
+                            <hr class="border-b-2">
+                        {% endfor %}
+                    </div>
                     <div>
-                        {% include "ui/components/utilities/PaginatorNavigation.html" with paginator=paginator %}
+                        {% include "ui/components/utilities/PaginatorNavigationHTMX.html" with paginator=paginator %}
                     </div>
                 </div>
                 <div>
diff --git a/app/partners/templates/partners/partner_with_us_page.html b/app/partners/templates/partners/partner_with_us_page.html
index 752f088..63094ef 100644
--- a/app/partners/templates/partners/partner_with_us_page.html
+++ b/app/partners/templates/partners/partner_with_us_page.html
@@ -10,7 +10,7 @@
 {% endblock extra_css %}
 
 {% block content %}
-    {% include "ui/components/PageHeaderWithBlur.html" with title=page.title subtitle=page.header_description image=page.header_image full_length=True %}
+    {% include "ui/components/PageHeaderWithBlur.html" with title=page.title image=page.header_image full_length=True smaller=True %}
     
     <div class="max-w-7xl mx-auto my-10">
         <div class="px-6 md:px-10">
@@ -25,7 +25,7 @@
                 {% for ptype in page.get_children %}
                     <div class="p-6 bg-hot-off-white">
                         {% image ptype.specific.external_icon original class="h-8 w-8 mt-2" %}
-                        <a href="{{ptype.url}}">
+                        <a href="{{ptype.url}}" class="hover:underline">
                             <h1 class="text-h4 font-semibold mt-4">
                                 {{ptype.specific.title}}
                             </h1>
diff --git a/app/partners/templates/partners/partnership_template_page.html b/app/partners/templates/partners/partnership_template_page.html
index 889a663..3ee4cb1 100644
--- a/app/partners/templates/partners/partnership_template_page.html
+++ b/app/partners/templates/partners/partnership_template_page.html
@@ -10,7 +10,7 @@
 {% endblock extra_css %}
 
 {% block content %}
-    {% include "ui/components/PageHeaderWithBlur.html" with title=page.title subtitle=page.header_text image=page.header_image full_length=True %}
+    {% include "ui/components/PageHeaderWithBlur.html" with title=page.title subtitle=page.header_text image=page.header_image full_length=True smaller=True %}
 
     <div class="max-w-7xl mx-auto my-10">
         <div class="px-6 md:px-10">
@@ -58,12 +58,14 @@ <h1 class="text-h2 font-bold mb-4">
             </div>
 
             <div class="my-20">
-                {% include "ui/components/FlexTitleWithLink.html" with class="mb-8" title=page.get_parent.specific.meet_partners_title linktext=page.get_parent.specific.view_partners_text linkurl=page.get_parent.specific.view_partners_link underline=True %}
+                {% with page.id|stringformat:"s" as id %}
+                    {% include "ui/components/FlexTitleWithLink.html" with class="mb-8" title=page.get_parent.specific.meet_partners_title linktext=page.get_parent.specific.view_partners_text linkurl=page.get_parent.specific.view_partners_link linkappendage="?pt"|add:id|add:"=on" underline=True %}
+                {% endwith %}
                 {% include "ui/components/partners/PartnerViewBlock.html" with partners=page.featured_partners.all %}
             </div>
 
             <div class="my-20">
-                {% include "ui/components/FooterBannerWithTextAndLink.html" with text=page.get_parent.specific.call_to_action_title description=page.get_parent.specific.call_to_action_description buttontext=page.get_parent.specific.call_to_action_link_text linkurl=page.get_parent.specific.call_to_action_link_url %}
+                {% include "ui/components/FooterBannerWithTextAndLink.html" with text=page.get_parent.specific.call_to_action_title description=page.get_parent.specific.call_to_action_description %}
             </div>
         </div>
     </div>
diff --git a/app/ui/templates/ui/components/BasePageHeader.html b/app/ui/templates/ui/components/BasePageHeader.html
index 88a868c..7a80980 100644
--- a/app/ui/templates/ui/components/BasePageHeader.html
+++ b/app/ui/templates/ui/components/BasePageHeader.html
@@ -11,7 +11,7 @@
 {% load wagtailimages_tags %}
 
 {% image image original as image_p %}
-<div class="w-full {%if smaller%}min-h-[20rem]{%else%}min-h-[24rem]{%endif%} content-end bg-no-repeat bg-cover" style="background-image: url('{{ image_p.url }}')">
+<div class="w-full {%if smaller%}min-h-[20rem]{%else%}min-h-[24rem]{%endif%} content-end bg-no-repeat bg-cover bg-center" style="background-image: url('{{ image_p.url }}')">
     <div class="bg-gradient-to-t from-black/70 to-transparent w-full">
         <div class="h-fit w-full py-10 text-white max-w-7xl mx-auto">
             <div class="grid grid-cols-1 lg:grid-cols-3">
diff --git a/app/ui/templates/ui/components/FooterBannerWithTextAndLink.html b/app/ui/templates/ui/components/FooterBannerWithTextAndLink.html
index 06b1ba3..f74d48f 100644
--- a/app/ui/templates/ui/components/FooterBannerWithTextAndLink.html
+++ b/app/ui/templates/ui/components/FooterBannerWithTextAndLink.html
@@ -12,12 +12,16 @@ <h1 class="text-h2 font-bold mb-8">
             {{ text }}
         </h1>
         {% if description %}
-            <div class="my-6 font-medium text-intro">
+            <div class="mt-6 mb-2 font-medium text-intro [&_a]:text-hot-red [&_a:hover]:underline">
                 {{description|richtext}}
             </div>
         {% endif %}
-        <a href="{%include 'ui/components/PageOrLinkHrefText.html' with linkurl=url%}">
-            {% include "components/branded_elements/button.html" with text=buttontext %}
-        </a>
+        {% if buttontext %}
+            <div class="mt-6">
+                <a href="{%include 'ui/components/PageOrLinkHrefText.html' with linkurl=url%}">
+                    {% include "components/branded_elements/button.html" with text=buttontext %}
+                </a>
+            </div>
+        {% endif %}
     </div>
 </div>
\ No newline at end of file
diff --git a/app/ui/templates/ui/components/PageHeaderWithBlur.html b/app/ui/templates/ui/components/PageHeaderWithBlur.html
index 404b1c7..0e4d400 100644
--- a/app/ui/templates/ui/components/PageHeaderWithBlur.html
+++ b/app/ui/templates/ui/components/PageHeaderWithBlur.html
@@ -10,7 +10,7 @@
 {% load wagtailimages_tags %}
 
 {% image image original as image_p %}
-<div class="bg-no-repeat bg-cover relative" style="background-image: url('{{ image_p.url }}')">
+<div class="bg-no-repeat bg-cover relative bg-center" style="background-image: url('{{ image_p.url }}')">
     <div class="{%if smaller%}min-h-[20rem]{%else%}min-h-[24rem]{%endif%} bg-gradient-to-r from-black/70 to-transparent before:w-full before:backdrop-blur-sm before:h-full before:block before:absolute {%if not full_length%}lg:before:w-5/6{%endif%}">
         <div class="text-white max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-6 relative">
             <div class="{%if smaller%}min-h-[20rem]{%else%}min-h-[24rem]{%endif%} py-10 px-10 pb-4 h-full col-span-5">
diff --git a/app/ui/templates/ui/components/PageOrLinkHrefText.html b/app/ui/templates/ui/components/PageOrLinkHrefText.html
index 57a1547..d832ee7 100644
--- a/app/ui/templates/ui/components/PageOrLinkHrefText.html
+++ b/app/ui/templates/ui/components/PageOrLinkHrefText.html
@@ -1,13 +1,13 @@
 {% if linkurl.0 and linkurl.0.value %}
     {% if linkurl.0.value.page %}
-        {{linkurl.0.value.page.url}}
+        {{linkurl.0.value.page.url}}{{linkappendage}}
     {% elif linkurl.0.value.url %}
-        {{linkurl.0.value.url}}
+        {{linkurl.0.value.url}}{{linkappendage}}
     {% else %}
-        {{linkurl.0.value}}
+        {{linkurl.0.value}}{{linkappendage}}
     {% endif %}
 {% else %}
     {% if linkurl %}
-        {{ linkurl }}
+        {{ linkurl }}{{linkappendage}}
     {% endif %}
 {% endif %}
\ No newline at end of file
diff --git a/app/ui/templates/ui/components/dogear_boxes/DogearAnyColour.html b/app/ui/templates/ui/components/dogear_boxes/DogearAnyColour.html
index 9543120..4a821b3 100644
--- a/app/ui/templates/ui/components/dogear_boxes/DogearAnyColour.html
+++ b/app/ui/templates/ui/components/dogear_boxes/DogearAnyColour.html
@@ -6,6 +6,6 @@
 - colour: a string; the colour that the box should be (can be hex code or any other CSS compatible colour thing)
 {% endcomment %}
 
-<div class="px-6 py-8 flex flex-col text-white" style="background: linear-gradient(45deg, {{ colour }} 0%, {{ colour }} 95%, transparent 95%, transparent 100%);">
+<div class="text-white" style="background: linear-gradient(45deg, {{ colour }} 0%, {{ colour }} 95%, transparent 95%, transparent 100%);">
     {% include "./DogearContent.html" with color="var(--hot-red)" %}
 </div>
\ No newline at end of file
diff --git a/app/ui/templates/ui/components/dogear_boxes/DogearBlack.html b/app/ui/templates/ui/components/dogear_boxes/DogearBlack.html
index c061bb5..bd789dd 100644
--- a/app/ui/templates/ui/components/dogear_boxes/DogearBlack.html
+++ b/app/ui/templates/ui/components/dogear_boxes/DogearBlack.html
@@ -5,6 +5,6 @@
 - linktext: a string; the text that shows for the link
 {% endcomment %}
 
-<div class="dogear-box-black px-6 py-8 flex flex-col text-white">
+<div class="dogear-box-black text-white">
     {% include "./DogearContent.html" with color="var(--hot-red)" %}
 </div>
\ No newline at end of file
diff --git a/app/ui/templates/ui/components/dogear_boxes/DogearContent.html b/app/ui/templates/ui/components/dogear_boxes/DogearContent.html
index 09cc3e0..a741d4e 100644
--- a/app/ui/templates/ui/components/dogear_boxes/DogearContent.html
+++ b/app/ui/templates/ui/components/dogear_boxes/DogearContent.html
@@ -10,21 +10,25 @@
 {% endcomment %}
 {% load wagtailcore_tags %}
 
-<h1 class="font-bold text-h2 mb-2">
-    {{ title }}
-</h1>
-{% if description %}
-    <p class="font-medium mt-2">{{description|richtext}}</p>
-{% endif %}
-<a href="{% include 'ui/components/PageOrLinkHrefText.html' %}" class="mt-auto pt-6">
-    <p class="text-h5 font-medium hover:underline decoration-2">
-        {{ linktext }}
-        <span class="ml-2" 
-        {% if color %}
-            style="color: {{ color }}"
-        {% endif %}
-        >
-            {% include "ui/components/icon_svgs/LinkCaret.html" %}
-        </span>
-    </p>
-</a>
+<div class="p-8 flex flex-col h-full w-full">
+    <h1 class="font-bold text-h2 mb-6">
+        {{ title }}
+    </h1>
+    {% if description %}
+        <p class="font-medium mt-2">{{description|richtext}}</p>
+    {% endif %}
+    <div class="mt-auto pt-10">
+        <a href="{% include 'ui/components/PageOrLinkHrefText.html' %}">
+            <p class="text-h5 font-medium hover:underline decoration-2">
+                {{ linktext }}
+                <span class="ml-2" 
+                {% if color %}
+                    style="color: {{ color }}"
+                {% endif %}
+                >
+                    {% include "ui/components/icon_svgs/LinkCaret.html" %}
+                </span>
+            </p>
+        </a>
+    </div>
+</div>
\ No newline at end of file
diff --git a/app/ui/templates/ui/components/dogear_boxes/DogearRed.html b/app/ui/templates/ui/components/dogear_boxes/DogearRed.html
index b377c1f..41c4125 100644
--- a/app/ui/templates/ui/components/dogear_boxes/DogearRed.html
+++ b/app/ui/templates/ui/components/dogear_boxes/DogearRed.html
@@ -5,6 +5,6 @@
 - linktext: a string; the text that shows for the link
 {% endcomment %}
 
-<div class="dogear-box-red px-6 py-8 flex flex-col text-white">
+<div class="dogear-box-red text-white">
     {% include "./DogearContent.html" %}
 </div>
\ No newline at end of file
diff --git a/app/ui/templates/ui/components/impact_areas/ImpactAreaPreviewBlock.html b/app/ui/templates/ui/components/impact_areas/ImpactAreaPreviewBlock.html
index c8aefb6..19ff9a1 100644
--- a/app/ui/templates/ui/components/impact_areas/ImpactAreaPreviewBlock.html
+++ b/app/ui/templates/ui/components/impact_areas/ImpactAreaPreviewBlock.html
@@ -21,7 +21,7 @@ <h2 class="text-h3 font-bold py-1">
     </div>
 
     <p class="text-intro font-medium py-1">
-        <a href="{{ ia.url }}">
+        <a href="{{ ia.url }}" class="[&:hover_span]:underline">
             <span class="border-b-hot-red border-b-2 pb-1">Learn More about {{ ia.title }}</span>
             
             <svg class="inline ml-4" xmlns="http://www.w3.org/2000/svg" width="10.808" height="16.817" viewBox="0 0 10.808 16.817">
diff --git a/app/ui/templates/ui/components/impact_areas/ImpactAreaPreviewBlockMini.html b/app/ui/templates/ui/components/impact_areas/ImpactAreaPreviewBlockMini.html
index f28dad3..c44b00e 100644
--- a/app/ui/templates/ui/components/impact_areas/ImpactAreaPreviewBlockMini.html
+++ b/app/ui/templates/ui/components/impact_areas/ImpactAreaPreviewBlockMini.html
@@ -1,7 +1,7 @@
 {% load wagtailimages_tags %}
 
-<a href="{{ area.url }}{{ link_addendum }}" class="rounded-2xl shadow-md">
-    <div class="bg-hot-off-white p-6 text-center font-medium text-intro h-full">
+<a href="{{ area.url }}{{ link_addendum }}" class="rounded-2xl shadow-md hover:underline">
+    <div class="bg-hot-off-white p-6 text-center font-medium text-intro h-full flex flex-col justify-center">
         {% image area.external_icon fill-200x200 class="px-10" %}
         <p>
             {{ area.title }}
diff --git a/app/ui/templates/ui/components/mapping_hub/MappingHubPreviewBlock.html b/app/ui/templates/ui/components/mapping_hub/MappingHubPreviewBlock.html
index affd498..53dc78f 100644
--- a/app/ui/templates/ui/components/mapping_hub/MappingHubPreviewBlock.html
+++ b/app/ui/templates/ui/components/mapping_hub/MappingHubPreviewBlock.html
@@ -4,6 +4,6 @@
 {% endcomment %}
 {% load wagtailimages_tags %}
 
-<a href="{{ hub.url }}">
+<a href="{{ hub.url }}" class="hover:underline">
     {% include "./MappingHubPreviewBlockBase.html" %}
 </a>
diff --git a/app/ui/templates/ui/components/mapping_hub/MappingHubPreviewProjectsBlock.html b/app/ui/templates/ui/components/mapping_hub/MappingHubPreviewProjectsBlock.html
index dc8b399..09b1450 100644
--- a/app/ui/templates/ui/components/mapping_hub/MappingHubPreviewProjectsBlock.html
+++ b/app/ui/templates/ui/components/mapping_hub/MappingHubPreviewProjectsBlock.html
@@ -4,6 +4,6 @@
 {% endcomment %}
 {% load wagtailimages_tags %}
 
-<a href="{{ hub_project.url }}">
+<a href="{{ hub_project.url }}" class="hover:underline">
     {% include "./MappingHubPreviewBlockBase.html" with hub=hub_project.get_parent.specific %}
 </a>
diff --git a/app/ui/templates/ui/components/partners/PartnerViewBlock.html b/app/ui/templates/ui/components/partners/PartnerViewBlock.html
index ef8efac..af10c5f 100644
--- a/app/ui/templates/ui/components/partners/PartnerViewBlock.html
+++ b/app/ui/templates/ui/components/partners/PartnerViewBlock.html
@@ -12,15 +12,17 @@
             {% include "ui/components/icon_svgs/LinkCaretCircle.html" with styledhover=True %}
         </div>
         {% for partner in partners %}
-            <div :class="{ 'hidden md:block': fixedIndex({{forloop.counter0}}) > 0 && fixedIndex({{forloop.counter0}}) <= 2, 
-                           'hidden lg:block': fixedIndex({{forloop.counter0}}) == 3,
-                           'hidden': fixedIndex({{forloop.counter0}}) > 3,
-                        }"
-                 :style="`order: ${fixedIndex({{forloop.counter0}}) + 1}`"
-                 class="p-4"
-            >
-                {% image partner.partner_logo original class="max-h-16 max-w-full h-full w-auto" %}
-            </div>
+            <a href="{{partner.partner_url}}" aria-label="{{partner.partner_name}}">
+                <div :class="{ 'hidden md:block': fixedIndex({{forloop.counter0}}) > 0 && fixedIndex({{forloop.counter0}}) <= 2, 
+                            'hidden lg:block': fixedIndex({{forloop.counter0}}) == 3,
+                            'hidden': fixedIndex({{forloop.counter0}}) > 3,
+                            }"
+                    :style="`order: ${fixedIndex({{forloop.counter0}}) + 1}`"
+                    class="p-4"
+                >
+                    {% image partner.partner_logo original class="max-h-16 max-w-full h-full w-auto" %}
+                </div>
+            </a>
         {% endfor %}
         <div x-on:click="moveIndex(-1)" class="p-4 order-last text-hot-red flex flex-col justify-center">
             {% include "ui/components/icon_svgs/LinkCaretCircle.html" with styledhover=True %}
diff --git a/app/ui/templates/ui/components/projects/ProjectPreviewBlockMapHub.html b/app/ui/templates/ui/components/projects/ProjectPreviewBlockMapHub.html
index b3327c8..6eefaf4 100644
--- a/app/ui/templates/ui/components/projects/ProjectPreviewBlockMapHub.html
+++ b/app/ui/templates/ui/components/projects/ProjectPreviewBlockMapHub.html
@@ -11,9 +11,8 @@
     <a href="{{ project.url }}" class="[&:hover_.project-preview-title]:underline">
         <div>
             {% if showimage %}
-                <div class="w-full min-h-[9rem] mb-3 content-end bg-no-repeat bg-cover image-overshadow-gradient" style="background-image: url('{{ image_p.url }}')">
-                    <div>
-                    </div>
+                <div class="w-full min-h-[9rem] mb-3 image-overshadow-gradient">
+                    {% image project.header_image original class="aspect-[3/2] object-cover object-center" %}
                 </div>
             {% endif %}
 
diff --git a/app/ui/templates/ui/components/projects/ProjectPreviewBlockNews.html b/app/ui/templates/ui/components/projects/ProjectPreviewBlockNews.html
index 81cb4d6..485907b 100644
--- a/app/ui/templates/ui/components/projects/ProjectPreviewBlockNews.html
+++ b/app/ui/templates/ui/components/projects/ProjectPreviewBlockNews.html
@@ -11,9 +11,8 @@
     <a href="{{ project.url }}" class="[&:hover_.project-preview-title]:underline">
         <div>
             {% if showimage %}
-                <div class="w-full min-h-[9rem] mb-3 content-end bg-no-repeat bg-cover image-overshadow-gradient" style="background-image: url('{{ image_p.url }}')">
-                    <div>
-                    </div>
+                <div class="w-full min-h-[9rem] mb-3 image-overshadow-gradient">
+                    {% image project.header_image original class="aspect-[3/2] object-cover object-center" %}
                 </div>
             {% endif %}
 
diff --git a/app/ui/templates/ui/components/utilities/PaginatorNavigation.html b/app/ui/templates/ui/components/utilities/PaginatorNavigation.html
index e2ed781..0cc0b77 100644
--- a/app/ui/templates/ui/components/utilities/PaginatorNavigation.html
+++ b/app/ui/templates/ui/components/utilities/PaginatorNavigation.html
@@ -3,6 +3,9 @@
 => paginator: a paginator object
 => current_page: an integer, the current page
 {% endcomment %}
+{% load homepage_tags %}
+{% get_home_page as home_page %}
+
 <div x-data="{ params: new URLSearchParams((new URL(window.location.href)).search) }">
     <div class="w-full flex justify-center items-center" 
             x-data="{
@@ -11,8 +14,8 @@
                     getPageLink(x) { this.paramsX.set('page', x); return '?' + this.paramsX.toString() } 
     }">
         <a :href="page > 1 ? getPageLink(parseInt(page) - 1) : ''" aria-label="Previous Page">
-            <p class="cursor-pointer" :class="page == 1 ? 'text-hot-slate-grey' : 'text-hot-red'">
-                {% include "ui/components/icon_svgs/LinkCaret.html" with class="rotate-180" %}
+            <p class="cursor-pointer mr-2" :class="page == 1 ? 'text-hot-slate-grey' : 'text-hot-red'">
+                {% include "ui/components/icon_svgs/LinkCaret.html" with class="rotate-180" %} <span class="ml-2">{{home_page.paginator_previous}}</span>
             </p>
         </a>
         <div class="flex gap-2 mx-4">
@@ -39,8 +42,8 @@
             {% endwith %}
         </div>
         <a :href="page < {{paginator.num_pages}} ? getPageLink(parseInt(page) + 1) : ''" aria-label="Next Page">
-            <p class="cursor-pointer" :class="page == {{paginator.num_pages}} ? 'text-hot-slate-grey' : 'text-hot-red'">
-                {% include "ui/components/icon_svgs/LinkCaret.html" %}
+            <p class="cursor-pointer ml-2" :class="page == {{paginator.num_pages}} ? 'text-hot-slate-grey' : 'text-hot-red'">
+                <span class="mr-2">{{home_page.paginator_next}}</span> {% include "ui/components/icon_svgs/LinkCaret.html" %}
             </p>
         </a>
     </div>
diff --git a/app/ui/templates/ui/components/utilities/PaginatorNavigationHTMX.html b/app/ui/templates/ui/components/utilities/PaginatorNavigationHTMX.html
index 0596ac2..96df043 100644
--- a/app/ui/templates/ui/components/utilities/PaginatorNavigationHTMX.html
+++ b/app/ui/templates/ui/components/utilities/PaginatorNavigationHTMX.html
@@ -3,6 +3,9 @@
 => paginator: a paginator object
 => current_page: an integer, the current page
 {% endcomment %}
+{% load homepage_tags %}
+{% get_home_page as home_page %}
+
 <div x-data="{ params: new URLSearchParams((new URL(window.location.href)).search) }" id="paginator-navigation">
     <div class="w-full flex justify-center items-center" 
             x-data="{
@@ -20,8 +23,8 @@
             {% if current_page == 1 %}disabled{% endif %}
             aria-label="Previous Page"
         >
-            <p class="cursor-pointer {%if current_page == 1%}text-hot-slate-grey{%else%}text-hot-red{%endif%}">
-                {% include "ui/components/icon_svgs/LinkCaret.html" with class="rotate-180" %}
+            <p class="cursor-pointer mr-2 {%if current_page == 1%}text-hot-slate-grey{%else%}text-hot-red{%endif%}">
+                {% include "ui/components/icon_svgs/LinkCaret.html" with class="rotate-180" %} <span class="ml-2">{{home_page.paginator_previous}}</span>
             </p>
         </button>
         <div class="flex gap-2 mx-4">
@@ -59,8 +62,8 @@
                 hx-select-oob="#items-list:outerHTML, #paginator-navigation:outerHTML"
                 aria-label="Next Page"
         >
-            <p class="cursor-pointer {%if current_page == paginator.num_pages%}text-hot-slate-grey{%else%}text-hot-red{%endif%}">
-                {% include "ui/components/icon_svgs/LinkCaret.html" %}
+            <p class="cursor-pointer ml-2 {%if current_page == paginator.num_pages%}text-hot-slate-grey{%else%}text-hot-red{%endif%}">
+                <span class="mr-2">{{home_page.paginator_next}}</span> {% include "ui/components/icon_svgs/LinkCaret.html" %}
             </p>
         </button>
     </div>
diff --git a/home/migrations/0035_homepage_paginator_next_homepage_paginator_previous.py b/home/migrations/0035_homepage_paginator_next_homepage_paginator_previous.py
new file mode 100644
index 0000000..fdc445b
--- /dev/null
+++ b/home/migrations/0035_homepage_paginator_next_homepage_paginator_previous.py
@@ -0,0 +1,23 @@
+# Generated by Django 4.2.7 on 2024-09-11 19:21
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('home', '0034_alter_homepage_carousel_alter_homepage_e404_links_and_more'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='homepage',
+            name='paginator_next',
+            field=models.CharField(default='Next'),
+        ),
+        migrations.AddField(
+            model_name='homepage',
+            name='paginator_previous',
+            field=models.CharField(default='Previous'),
+        ),
+    ]
diff --git a/home/models.py b/home/models.py
index c72b59e..cfd374a 100644
--- a/home/models.py
+++ b/home/models.py
@@ -92,6 +92,9 @@ def get_context(self, request, *args, **kwargs):
         ]))
     ], use_json_field=True, null=True, blank=True, help_text="Links to be shown on the 404 page.")
 
+    paginator_previous = models.CharField(default="Previous")
+    paginator_next = models.CharField(default="Next")
+
     # Hero section
     image = models.ForeignKey(
         "wagtailimages.Image",
@@ -229,6 +232,10 @@ def get_context(self, request, *args, **kwargs):
                 FieldPanel('e404_description'),
                 FieldPanel('e404_links'),
             ], heading="404 Page"),
+            MultiFieldPanel([
+                FieldPanel('paginator_previous'),
+                FieldPanel('paginator_next'),
+            ], heading="Paginator", help_text="This is used in instances where there's a previous/next button; i.e., the news page when flipping through pages.")
         ], heading="Universal items"),
         MultiFieldPanel([
             FieldPanel("image"),

From 04f4d28ea04bcb96a9d4ea0406ca34925d6bed3a Mon Sep 17 00:00:00 2001
From: luminaryFlowers <71102109+luminaryFlowers@users.noreply.github.com>
Date: Fri, 13 Sep 2024 16:47:04 -0700
Subject: [PATCH 04/15] many small adjustments per qa, changes to models => of
 note: many urlfields changed to the more adaptable custom field, work for hot
 page now can use images OR videos, document collection now allows for not
 *just* documents, but also links; now requires titles for each document in
 the page's list (just because not all will have the built-in wagtail
 document's title)

---
 ..._alter_documentcollectionpage_documents.py | 22 ++++++++++
 ...forhotpage_our_values_subtitle_and_more.py | 35 +++++++++++++++
 ...rhotpage_work_culture_subtitle_and_more.py | 23 ++++++++++
 app/misc/models.py                            | 31 ++++++++++---
 .../templates/misc/data_principles_page.html  | 28 ++++++------
 .../misc/document_collection_page.html        |  6 +--
 .../misc/join_our_conversation_page.html      |  4 +-
 .../templates/misc/work_for_hot_page.html     | 24 ++++++++---
 .../templates/misc/working_groups_page.html   |  2 +-
 .../templates/partners/our_partners_page.html |  4 +-
 ...ramownerpage_bottom_banner_url_and_more.py | 43 +++++++++++++++++++
 .../0010_alter_individualprogrampage_stats.py | 20 +++++++++
 app/programs/models.py                        | 16 ++++---
 .../programs/individual_program_page.html     | 20 ++++-----
 .../tech/individual_tech_stack_page.html      | 31 ++++++-------
 .../tech/tech_product_suite_page.html         | 12 +++---
 .../open_mapping_solutions_page.html          | 14 +++---
 .../resource_and_learning_page.html           | 10 ++---
 .../dogear_boxes/DogearAnyColourLong.html     |  9 ++--
 .../components/icon_svgs/LinkCaretCircle.html |  2 +-
 .../misc_panels/LinkBlockWithImage.html       |  2 +-
 .../programs/ProgramPreviewBlockBase.html     |  6 +--
 .../components/sections/LinkListSection.html  |  2 +-
 ...ownerpage_aside_block_link_url_and_more.py | 43 +++++++++++++++++++
 app/volunteer_opportunities/models.py         | 14 +++---
 .../components/AsideBlockContents.html        |  3 +-
 .../volunteer_opportunity_owner_page.html     | 10 ++---
 hot_osm/settings/base.py                      |  4 +-
 hot_osm/static/css/hot_osm.css                |  6 ++-
 29 files changed, 325 insertions(+), 121 deletions(-)
 create mode 100644 app/misc/migrations/0023_alter_documentcollectionpage_documents.py
 create mode 100644 app/misc/migrations/0024_rename_our_values_youtube_subtitle_workforhotpage_our_values_subtitle_and_more.py
 create mode 100644 app/misc/migrations/0025_alter_workforhotpage_work_culture_subtitle_and_more.py
 create mode 100644 app/programs/migrations/0009_remove_programownerpage_bottom_banner_url_and_more.py
 create mode 100644 app/programs/migrations/0010_alter_individualprogrampage_stats.py
 create mode 100644 app/volunteer_opportunities/migrations/0006_remove_volunteeropportunityownerpage_aside_block_link_url_and_more.py

diff --git a/app/misc/migrations/0023_alter_documentcollectionpage_documents.py b/app/misc/migrations/0023_alter_documentcollectionpage_documents.py
new file mode 100644
index 0000000..f7153ec
--- /dev/null
+++ b/app/misc/migrations/0023_alter_documentcollectionpage_documents.py
@@ -0,0 +1,22 @@
+# Generated by Django 4.2.7 on 2024-09-13 18:58
+
+from django.db import migrations
+import wagtail.blocks
+import wagtail.documents.blocks
+import wagtail.fields
+import wagtail.images.blocks
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('misc', '0022_contactuspage_body_background_image'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='documentcollectionpage',
+            name='documents',
+            field=wagtail.fields.StreamField([('block', wagtail.blocks.StructBlock([('icon', wagtail.images.blocks.ImageChooserBlock(blank=True, null=True, required=False)), ('title', wagtail.blocks.CharBlock()), ('link', wagtail.blocks.StreamBlock([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock())])), ('description', wagtail.blocks.RichTextBlock(blank=True, null=True, required=False))]))], blank=True, null=True, use_json_field=True),
+        ),
+    ]
diff --git a/app/misc/migrations/0024_rename_our_values_youtube_subtitle_workforhotpage_our_values_subtitle_and_more.py b/app/misc/migrations/0024_rename_our_values_youtube_subtitle_workforhotpage_our_values_subtitle_and_more.py
new file mode 100644
index 0000000..1e0b0f3
--- /dev/null
+++ b/app/misc/migrations/0024_rename_our_values_youtube_subtitle_workforhotpage_our_values_subtitle_and_more.py
@@ -0,0 +1,35 @@
+# Generated by Django 4.2.7 on 2024-09-13 21:48
+
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('wagtailimages', '0025_alter_image_file_alter_rendition_file'),
+        ('misc', '0023_alter_documentcollectionpage_documents'),
+    ]
+
+    operations = [
+        migrations.RenameField(
+            model_name='workforhotpage',
+            old_name='our_values_youtube_subtitle',
+            new_name='our_values_subtitle',
+        ),
+        migrations.RenameField(
+            model_name='workforhotpage',
+            old_name='work_culture_youtube_subtitle',
+            new_name='work_culture_subtitle',
+        ),
+        migrations.AddField(
+            model_name='workforhotpage',
+            name='our_values_image',
+            field=models.ForeignKey(blank=True, help_text='If a YouTube URL is provided, the video will be prioritised over this image; if there is no URL provided, this image will show.', null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='+', to='wagtailimages.image'),
+        ),
+        migrations.AddField(
+            model_name='workforhotpage',
+            name='work_culture_image',
+            field=models.ForeignKey(blank=True, help_text='If a YouTube URL is provided, the video will be prioritised over this image; if there is no URL provided, this image will show.', null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='+', to='wagtailimages.image'),
+        ),
+    ]
diff --git a/app/misc/migrations/0025_alter_workforhotpage_work_culture_subtitle_and_more.py b/app/misc/migrations/0025_alter_workforhotpage_work_culture_subtitle_and_more.py
new file mode 100644
index 0000000..1394997
--- /dev/null
+++ b/app/misc/migrations/0025_alter_workforhotpage_work_culture_subtitle_and_more.py
@@ -0,0 +1,23 @@
+# Generated by Django 4.2.7 on 2024-09-13 22:53
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('misc', '0024_rename_our_values_youtube_subtitle_workforhotpage_our_values_subtitle_and_more'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='workforhotpage',
+            name='work_culture_subtitle',
+            field=models.CharField(blank=True),
+        ),
+        migrations.AlterField(
+            model_name='workforhotpage',
+            name='work_culture_youtube_url',
+            field=models.URLField(blank=True, help_text="The YouTube link provided should be in the following format: 'https://www.youtube.com/embed/[slug]'. You can get this by right-clicking on the YouTube video player and pressing 'Copy embed code'; this will give you a full embed code, which you will need to take the embed URL from."),
+        ),
+    ]
diff --git a/app/misc/models.py b/app/misc/models.py
index 42ad079..ada21b7 100644
--- a/app/misc/models.py
+++ b/app/misc/models.py
@@ -271,7 +271,8 @@ def get_context(self, request, *args, **kwargs):
     documents = StreamField([
         ('block', StructBlock([
             ('icon', ImageChooserBlock(blank=True, null=True, required=False)),
-            ('document', DocumentChooserBlock()),
+            ('title', CharBlock()),
+            ('link', LinkOrPageBlock()),
             ('description', RichTextBlock(blank=True, null=True, required=False))
         ]))
     ], use_json_field=True, null=True, blank=True)
@@ -423,12 +424,28 @@ class WorkForHotPage(Page):
     our_values_title = models.CharField(default="Our Values")
     our_values_text = RichTextField(blank=True)
     our_values_youtube_url = models.URLField(blank=True, help_text="The YouTube link provided should be in the following format: 'https://www.youtube.com/embed/[slug]'. You can get this by right-clicking on the YouTube video player and pressing 'Copy embed code'; this will give you a full embed code, which you will need to take the embed URL from.")
-    our_values_youtube_subtitle = models.CharField(blank=True)
+    our_values_image = models.ForeignKey(
+        "wagtailimages.Image",
+        null=True,
+        blank=True,
+        on_delete=models.SET_NULL,
+        related_name="+",
+        help_text="If a YouTube URL is provided, the video will be prioritised over this image; if there is no URL provided, this image will show."
+    )
+    our_values_subtitle = models.CharField(blank=True)
 
     work_culture_title = models.CharField(default="Work Culture & Benefits")
     work_culture_description = RichTextField(blank=True)
-    work_culture_youtube_url = models.URLField(blank=True)
-    work_culture_youtube_subtitle = models.CharField(blank=True, help_text="The YouTube link provided should be in the following format: 'https://www.youtube.com/embed/[slug]'. You can get this by right-clicking on the YouTube video player and pressing 'Copy embed code'; this will give you a full embed code, which you will need to take the embed URL from.")
+    work_culture_youtube_url = models.URLField(blank=True, help_text="The YouTube link provided should be in the following format: 'https://www.youtube.com/embed/[slug]'. You can get this by right-clicking on the YouTube video player and pressing 'Copy embed code'; this will give you a full embed code, which you will need to take the embed URL from.")
+    work_culture_image = models.ForeignKey(
+        "wagtailimages.Image",
+        null=True,
+        blank=True,
+        on_delete=models.SET_NULL,
+        related_name="+",
+        help_text="If a YouTube URL is provided, the video will be prioritised over this image; if there is no URL provided, this image will show."
+    )
+    work_culture_subtitle = models.CharField(blank=True)
 
     testimonials_title = models.CharField(default="What Our Staff Say")
     testimonials = StreamField([
@@ -464,13 +481,15 @@ class WorkForHotPage(Page):
             FieldPanel('our_values_title'),
             FieldPanel('our_values_text'),
             FieldPanel('our_values_youtube_url'),
-            FieldPanel('our_values_youtube_subtitle'),
+            FieldPanel('our_values_image'),
+            FieldPanel('our_values_subtitle'),
         ], heading="Our Values"),
         MultiFieldPanel([
             FieldPanel('work_culture_title'),
             FieldPanel('work_culture_description'),
             FieldPanel('work_culture_youtube_url'),
-            FieldPanel('work_culture_youtube_subtitle'),
+            FieldPanel('work_culture_image'),
+            FieldPanel('work_culture_subtitle'),
         ], heading="Work Culture"),
         MultiFieldPanel([
             FieldPanel('testimonials_title'),
diff --git a/app/misc/templates/misc/data_principles_page.html b/app/misc/templates/misc/data_principles_page.html
index 622308b..d293070 100644
--- a/app/misc/templates/misc/data_principles_page.html
+++ b/app/misc/templates/misc/data_principles_page.html
@@ -10,21 +10,19 @@
 {% endblock extra_css %}
 
 {% block content %}
-    {% include "ui/components/PageHeaderWithBlur.html" with title=page.title image=page.header_image endinlarge=True full_length=True %}
+    {% include "ui/components/PageHeaderWithBlur.html" with title=page.title image=page.header_image endinlarge=True full_length=True smaller=True %}
     
     <div class="max-w-7xl mx-auto my-10">
         <div class="px-6 md:px-10">
-            <div class="lg:grid lg:grid-cols-6 mb-10">
-                <div class="col-span-5 text-intro font-medium">
-                    {{page.intro|richtext}}
-                </div>
+            <div class="max-w-5xl mb-10 text-intro font-medium base-article-m">
+                {{page.intro|richtext}}
             </div>
 
             <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
-                <div class="base-article-m">
+                <div class="base-article-m [&>*:first-child]:mt-0">
                     {{page.body_text|richtext}}
                 </div>
-                <div class="base-article-m">
+                <div class="">
                     {% image page.body_image original %}
                 </div>
             </div>
@@ -45,15 +43,13 @@ <h1 class="flex items-center gap-8 text-h3 font-bold pb-4">
                 {% endfor %}
             </div>
 
-            <div class="lg:grid lg:grid-cols-6 my-20">
-                <div class="col-span-5">
-                    {{page.footer_text|richtext}}
-                    
-                    <div class="mt-8">
-                        <a href="{%include 'ui/components/PageOrLinkHrefText.html' with linkurl=page.footer_button_link%}">
-                            {% include "components/branded_elements/button.html" with text=page.footer_button_text %}
-                        </a>
-                    </div>
+            <div class="max-w-5xl my-20">
+                {{page.footer_text|richtext}}
+                
+                <div class="mt-8">
+                    <a href="{%include 'ui/components/PageOrLinkHrefText.html' with linkurl=page.footer_button_link%}">
+                        {% include "components/branded_elements/button.html" with text=page.footer_button_text %}
+                    </a>
                 </div>
             </div>
         </div>
diff --git a/app/misc/templates/misc/document_collection_page.html b/app/misc/templates/misc/document_collection_page.html
index 0a88839..ac152c6 100644
--- a/app/misc/templates/misc/document_collection_page.html
+++ b/app/misc/templates/misc/document_collection_page.html
@@ -14,7 +14,7 @@
     
     <div class="max-w-7xl mx-auto my-10">
         <div class="px-6 md:px-10">
-            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8" x-data="{ activeParams: {} }">
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-20" x-data="{ activeParams: {} }">
                 <div class="lg:col-span-2 grid gap-8">
                     <div id="items-list" class="grid gap-8">
                         {% for doc in documents %}
@@ -22,13 +22,13 @@
                                 {% image doc.value.icon original class="w-full h-auto hidden lg:block" %}
                                 <div class="{%if not doc.value.icon%}lg:col-span-4{%else%}lg:col-span-3{%endif%}">
                                     <h1 class="text-h2 font-bold">
-                                        {{doc.value.document.title}}
+                                        {{doc.value.title}}
                                     </h1>
                                     <div class="my-4">
                                         {{doc.value.description}}
                                     </div>
                                     <p class="text-intro mt-2">
-                                        {% include "ui/components/BaseLink.html" with linktext=page.document_access_prefix_text|add:" "|add:doc.value.document.title linkurl=doc.value.document.url %}
+                                        {% include "ui/components/BaseLink.html" with linktext=page.document_access_prefix_text|add:" "|add:doc.value.title linkurl=doc.value.link %}
                                     </p>
                                 </div>
                             </div>
diff --git a/app/misc/templates/misc/join_our_conversation_page.html b/app/misc/templates/misc/join_our_conversation_page.html
index 8d51e9e..73a7f9a 100644
--- a/app/misc/templates/misc/join_our_conversation_page.html
+++ b/app/misc/templates/misc/join_our_conversation_page.html
@@ -10,7 +10,7 @@
 {% endblock extra_css %}
 
 {% block content %}
-    {% include "ui/components/PageHeaderWithBlur.html" with title=page.title subtitle=page.intro image=page.header_image %}
+    {% include "ui/components/PageHeaderWithBlur.html" with title=page.title subtitle=page.intro image=page.header_image full_length=True smaller=True %}
     
     <div class="max-w-7xl mx-auto my-10">
         <div class="px-6 md:px-10">
@@ -29,7 +29,7 @@ <h1 class="text-h4 font-semibold mt-4">
                 {% endfor %}
             </div>
 
-            <div class="text-black mt-20 [&_h1]:text-black [&_a]:text-black">
+            <div class="text-black my-20 [&_h1]:text-black">
                 {% include "ui/components/dogear_boxes/DogearAnyColourLong.html" with colour="var(--hot-off-white)" title=page.code_of_conduct_title linktext=page.code_of_conduct_link_text linkurl=page.code_of_conduct_link_url %}
             </div>
 
diff --git a/app/misc/templates/misc/work_for_hot_page.html b/app/misc/templates/misc/work_for_hot_page.html
index 4c6b94c..279c8ab 100644
--- a/app/misc/templates/misc/work_for_hot_page.html
+++ b/app/misc/templates/misc/work_for_hot_page.html
@@ -22,20 +22,32 @@
                         {{ page.our_values_text|richtext }}
                     </div>
                 </div>
-                {% if page.our_values_youtube_url %}
+                {% if page.our_values_youtube_url or page.our_values_image %}
                     <div>
-                        <iframe class="w-full aspect-video" src="{{page.our_values_youtube_url}}" title="Our Values video" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
-                        <p class="mt-2 text-hot-dark-grey">{{page.our_values_youtube_subtitle}}</p>
+                        {% if page.our_values_youtube_url %}
+                            <iframe class="w-full aspect-video" src="{{page.our_values_youtube_url}}" title="Our Values video" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+                            {% else %}
+                                {% image page.our_values_image original class="w-full aspect-video object-cover object-center" %}
+                        {% endif %}
+                        {% if page.our_values_subtitle %}
+                            <p class="mt-2 text-hot-dark-grey">{{page.our_values_subtitle}}</p>
+                        {% endif %}
                     </div>
                 {% endif %}
             </div>
 
             {% comment %} WORK CULTURE & BENEFITS {% endcomment %}
             <div class="grid lg:grid-cols-2 gap-8 my-20">
-                {% if page.work_culture_youtube_url %}
+                {% if page.work_culture_youtube_url or page.work_culture_image %}
                     <div class="order-2 lg:order-1">
-                        <iframe class="w-full aspect-video" src="{{page.work_culture_youtube_url}}" title="Work Culture video" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
-                        <p class="mt-2 text-hot-dark-grey">{{page.work_culture_youtube_subtitle}}</p>
+                        {% if page.work_culture_youtube_url %}
+                            <iframe class="w-full aspect-video" src="{{page.work_culture_youtube_url}}" title="Work Culture video" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+                            {% else %}
+                                {% image page.work_culture_image original class="w-full aspect-video object-cover object-center" %}
+                        {% endif %}
+                        {% if page.work_culture_subtitle %}
+                            <p class="mt-2 text-hot-dark-grey">{{page.work_culture_subtitle}}</p>
+                        {% endif %}
                     </div>
                 {% endif %}
                 <div class="order-1 lg:order-2">
diff --git a/app/misc/templates/misc/working_groups_page.html b/app/misc/templates/misc/working_groups_page.html
index ef02579..8a15473 100644
--- a/app/misc/templates/misc/working_groups_page.html
+++ b/app/misc/templates/misc/working_groups_page.html
@@ -10,7 +10,7 @@
 {% endblock extra_css %}
 
 {% block content %}
-    {% include "ui/components/PageHeaderWithBlur.html" with title=page.title subtitle=page.intro image=page.header_image %}
+    {% include "ui/components/PageHeaderWithBlur.html" with title=page.title subtitle=page.intro image=page.header_image smaller=True %}
     
     <div class="max-w-5xl mx-auto my-10">
         <div class="px-6 md:px-10 grid gap-16">
diff --git a/app/partners/templates/partners/our_partners_page.html b/app/partners/templates/partners/our_partners_page.html
index 1706030..9fb2da5 100644
--- a/app/partners/templates/partners/our_partners_page.html
+++ b/app/partners/templates/partners/our_partners_page.html
@@ -10,7 +10,7 @@
 {% endblock extra_css %}
 
 {% block content %}
-    {% include "ui/components/PageHeaderWithBlur.html" with title=page.title subtitle=page.intro image=page.header_image full_length=True %}
+    {% include "ui/components/PageHeaderWithBlur.html" with title=page.title subtitle=page.intro image=page.header_image full_length=True smaller=True %}
     
     <div class="max-w-7xl mx-auto my-10" x-data="{ params: new URLSearchParams((new URL(window.location.href)).search) }">
         <div class="px-6 md:px-10">
@@ -44,7 +44,7 @@
             <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-8 mt-10" id="partners-list">
                 {% for partner in partners %}
                     <div class="flex justify-center">
-                        {% image partner.partner_logo original class="max-h-24 max-w-36 h-auto w-auto" %}
+                        {% image partner.partner_logo original class="max-h-24 max-w-full h-full w-auto" %}
                     </div>
                 {% endfor %}
             </div>
diff --git a/app/programs/migrations/0009_remove_programownerpage_bottom_banner_url_and_more.py b/app/programs/migrations/0009_remove_programownerpage_bottom_banner_url_and_more.py
new file mode 100644
index 0000000..47a9354
--- /dev/null
+++ b/app/programs/migrations/0009_remove_programownerpage_bottom_banner_url_and_more.py
@@ -0,0 +1,43 @@
+# Generated by Django 4.2.7 on 2024-09-13 22:53
+
+from django.db import migrations
+import wagtail.blocks
+import wagtail.documents.blocks
+import wagtail.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('programs', '0008_programownerpage_and_more'),
+    ]
+
+    operations = [
+        migrations.RemoveField(
+            model_name='programownerpage',
+            name='bottom_banner_url',
+        ),
+        migrations.RemoveField(
+            model_name='programownerpage',
+            name='view_all_partners_link',
+        ),
+        migrations.RemoveField(
+            model_name='programownerpage',
+            name='view_all_programs_link',
+        ),
+        migrations.AddField(
+            model_name='programownerpage',
+            name='bottom_banner_link_url',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock())], blank=True, use_json_field=True),
+        ),
+        migrations.AddField(
+            model_name='programownerpage',
+            name='view_all_partners_link_url',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock())], blank=True, use_json_field=True),
+        ),
+        migrations.AddField(
+            model_name='programownerpage',
+            name='view_all_programs_link_url',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock())], blank=True, use_json_field=True),
+        ),
+    ]
diff --git a/app/programs/migrations/0010_alter_individualprogrampage_stats.py b/app/programs/migrations/0010_alter_individualprogrampage_stats.py
new file mode 100644
index 0000000..a0da742
--- /dev/null
+++ b/app/programs/migrations/0010_alter_individualprogrampage_stats.py
@@ -0,0 +1,20 @@
+# Generated by Django 4.2.7 on 2024-09-13 22:55
+
+from django.db import migrations
+import wagtail.blocks
+import wagtail.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('programs', '0009_remove_programownerpage_bottom_banner_url_and_more'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='individualprogrampage',
+            name='stats',
+            field=wagtail.fields.StreamField([('stat_block', wagtail.blocks.StructBlock([('title', wagtail.blocks.CharBlock()), ('description', wagtail.blocks.CharBlock())]))], blank=True, null=True, use_json_field=True),
+        ),
+    ]
diff --git a/app/programs/models.py b/app/programs/models.py
index 701c7f5..1fb2b6a 100644
--- a/app/programs/models.py
+++ b/app/programs/models.py
@@ -14,10 +14,12 @@
 
 from modelcluster.fields import ParentalKey, ParentalManyToManyField
 
+from app.core.models import LinkOrPageBlock
+
 
 class IndividualStatBlock(StructBlock):
     title = CharBlock()
-    description = RichTextBlock()
+    description = CharBlock()
 
 
 class ProgramStatBlock(StreamBlock):
@@ -47,14 +49,14 @@ class ProgramOwnerPage(Page):
 
     partners_title = models.CharField(default="Meet Our Partners")
     view_all_partners_title = models.CharField(default="View All Partners")
-    view_all_partners_link = models.CharField(blank=True)
+    view_all_partners_link_url = StreamField(LinkOrPageBlock(), use_json_field=True, blank=True)
 
     more_programs_title = models.CharField(default="More Programs")
     view_all_programs_title = models.CharField(default="View All Programs")
-    view_all_programs_link = models.URLField(blank=True)
+    view_all_programs_link_url = StreamField(LinkOrPageBlock(), use_json_field=True, blank=True)
 
     bottom_banner_text = models.CharField(default="Check out the many opportunities to get involved with HOT!")
-    bottom_banner_url = models.URLField(blank=True)
+    bottom_banner_link_url = StreamField(LinkOrPageBlock(), use_json_field=True, blank=True)
     bottom_banner_url_text = models.CharField(default="Get Involved with HOT")
 
     content_panels = Page.content_panels + [
@@ -66,16 +68,16 @@ class ProgramOwnerPage(Page):
         MultiFieldPanel([
             FieldPanel("partners_title"),
             FieldPanel("view_all_partners_title"),
-            FieldPanel("view_all_partners_link"),
+            FieldPanel("view_all_partners_link_url"),
         ], heading="Partners"),
         MultiFieldPanel([
             FieldPanel("more_programs_title"),
             FieldPanel("view_all_programs_title"),
-            FieldPanel("view_all_programs_link"),
+            FieldPanel("view_all_programs_link_url"),
         ], heading="Programs"),
         MultiFieldPanel([
             FieldPanel('bottom_banner_text'),
-            FieldPanel('bottom_banner_url'),
+            FieldPanel('bottom_banner_link_url'),
             FieldPanel('bottom_banner_url_text'),
         ]),
     ]
diff --git a/app/programs/templates/programs/individual_program_page.html b/app/programs/templates/programs/individual_program_page.html
index 5337750..5a22951 100644
--- a/app/programs/templates/programs/individual_program_page.html
+++ b/app/programs/templates/programs/individual_program_page.html
@@ -10,7 +10,7 @@
 {% endblock extra_css %}
 
 {% block content %}
-    {% include "ui/components/PageHeaderWithBlur.html" with title=page.title subtitle=page.subtitle image=page.header_image %}
+    {% include "ui/components/PageHeaderWithBlur.html" with title=page.title subtitle=page.subtitle image=page.header_image full_length=True %}
 
     <div class="max-w-7xl mx-auto my-10 px-6 md:px-10">
         <div class="grid grid-cols-1 lg:grid-cols-2 gap-x-10">
@@ -20,7 +20,7 @@
                 </div>
                 {{ page.description|safe }}
             </div>
-            {% image page.intro_image original class="pb-8 lg:order-1" %}
+            {% image page.intro_image original class="pb-8 lg:order-1 aspect-[3/2]" %}
         </div>
 
         <h1 class="text-h2 font-bold">
@@ -28,14 +28,10 @@ <h1 class="text-h2 font-bold">
         </h1>
         <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10 py-6">
             {% for stat in page.stats %}
-                <div class="bg-hot-off-white p-8">
-                    <h1 class="text-h4 font-bold">
-                        {{ stat.value.title }}
+                <div class="bg-hot-off-white p-8 flex items-center justify-center text-center">
+                    <h1 class="text-h5 font-bold">
+                        <span class="text-hot-red">{{ stat.value.title }}</span> {{ stat.value.description }}
                     </h1>
-
-                    <p>
-                        {{ stat.value.description }}
-                    </p>
                 </div>
             {% endfor %}
         </div>
@@ -81,7 +77,7 @@ <h1 class="text-h2 font-bold">
                 </div>
 
                 <div class="text-right self-center text-intro">
-                    {% include "ui/components/BaseLink.html" with linkurl=page.get_parent.specific.view_all_partners_link linktext=page.get_parent.specific.view_all_partners_title %}
+                    {% include "ui/components/BaseLink.html" with linkurl=page.get_parent.specific.view_all_partners_link_url linktext=page.get_parent.specific.view_all_partners_title %}
                 </div>
             </div>
             
@@ -95,7 +91,7 @@ <h1 class="text-h2 font-bold">
                 </h1>
 
                 <div class="text-right self-center text-intro">
-                    {% include "ui/components/BaseLink.html" with linkurl=page.get_parent.specific.view_all_programs_link linktext=page.get_parent.specific.view_all_programs_title %}
+                    {% include "ui/components/BaseLink.html" with linkurl=page.get_parent.specific.view_all_programs_link_url linktext=page.get_parent.specific.view_all_programs_title %}
                 </div>
             </div>
             <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10 mt-6">
@@ -106,5 +102,5 @@ <h1 class="text-h2 font-bold">
         </div>
     </div>
 
-    {% include "ui/components/FooterBannerWithTextAndLink.html" with text=page.get_parent.specific.bottom_banner_text buttontext=page.get_parent.specific.bottom_banner_url_text url=page.get_parent.specific.bottom_banner_url %}
+    {% include "ui/components/FooterBannerWithTextAndLink.html" with text=page.get_parent.specific.bottom_banner_text buttontext=page.get_parent.specific.bottom_banner_url_text url=page.get_parent.specific.bottom_banner_link_url %}
 {% endblock %}
diff --git a/app/tech/templates/tech/individual_tech_stack_page.html b/app/tech/templates/tech/individual_tech_stack_page.html
index 099f25b..9e80a01 100644
--- a/app/tech/templates/tech/individual_tech_stack_page.html
+++ b/app/tech/templates/tech/individual_tech_stack_page.html
@@ -10,18 +10,16 @@
 {% endblock extra_css %}
 
 {% block content %}
-    {% include "ui/components/PageHeaderWithBlur.html" with title=page.title image=page.header_image endinlarge=True full_length=True %}
+    {% include "ui/components/PageHeaderWithBlur.html" with title=page.title image=page.header_image endinlarge=True full_length=True smaller=True %}
     
     <div class="max-w-7xl mx-auto my-10">
         <div class="px-6 md:px-10">
-            <div class="lg:grid lg:grid-cols-6 mb-10">
-                <div class="col-span-5">
-                    <div class="text-intro font-medium">
-                        {{page.intro|safe}}
-                    </div>
-                    <div class="mt-4 base-article-m">
-                        {{page.body_text|safe}}
-                    </div>
+            <div class="max-w-5xl mb-10 col-span-5">
+                <div class="text-intro font-medium">
+                    {{page.intro|richtext}}
+                </div>
+                <div class="mt-4 base-article-m">
+                    {{page.body_text|richtext}}
                 </div>
             </div>
 
@@ -32,7 +30,7 @@ <h1 class="text-h4 font-semibold">
                             {{block.value.title}}
                         </h1>
                         <div class="base-article-m">
-                            {{block.value.description|safe}}
+                            {{block.value.description|richtext}}
                         </div>
                     </div>
                 {% endfor %}
@@ -40,17 +38,17 @@ <h1 class="text-h4 font-semibold">
 
             <div class="my-20 grid grid-cols-1 lg:grid-cols-2 gap-8">
                 <div>
-                    {% image page.section_image original %}
+                    {% image page.section_image original class="aspect-[3/2] object-cover object-center w-full" %}
                 </div>
                 <div class="">
                     <h1 class="text-h2 font-bold mb-2">
                         {{page.section_title}}
                     </h1>
                     <div class="text-intro font-medium mb-4">
-                        {{page.section_intro|safe}}
+                        {{page.section_intro|richtext}}
                     </div>
                     <div class="base-article-m">
-                        {{page.section_description|safe}}
+                        {{page.section_description|richtext}}
                     </div>
                 </div>
             </div>
@@ -65,12 +63,7 @@ <h1 class="text-h4 font-semibold">
                             {{block.value.title}}
                         </h1>
                         <p class="text-hot-red font-medium mt-4">
-                            <a href="{%include 'ui/components/PageOrLinkHrefText.html' with linkurl=block.value.linkurl%}">
-                                {{block.value.linktext|safe}}
-                                <span class="ml-4">
-                                    {% include "ui/components/icon_svgs/LinkCaret.html" %}
-                                </span>
-                            </a>
+                            {% include "ui/components/BaseLinkNoUnderline.html" with linkurl=block.value.linkurl linktext=block.value.linktext %}
                         </p>
                     </div>
                 {% endfor %}
diff --git a/app/tech/templates/tech/tech_product_suite_page.html b/app/tech/templates/tech/tech_product_suite_page.html
index 9ffcba6..fddafd0 100644
--- a/app/tech/templates/tech/tech_product_suite_page.html
+++ b/app/tech/templates/tech/tech_product_suite_page.html
@@ -10,25 +10,25 @@
 {% endblock extra_css %}
 
 {% block content %}
-    {% include "ui/components/PageHeaderWithBlur.html" with title=page.title image=page.header_image endinlarge=True full_length=True %}
+    {% include "ui/components/PageHeaderWithBlur.html" with title=page.title image=page.header_image endinlarge=True full_length=True smaller=True %}
     
     <div class="max-w-7xl mx-auto my-10">
         <div class="px-6 md:px-10">
-            <div class="lg:grid lg:grid-cols-6 mb-10">
+            <div class="lg:grid lg:grid-cols-6 mb-20">
                 <div class="col-span-5 text-intro font-medium">
-                    {{page.intro|safe}}
+                    {{page.intro|richtext}}
                 </div>
             </div>
 
             {% include "ui/components/TitleWithUnderline.html" with title=page.tech_principles_title %}
-            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mt-8 mb-10">
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-x-8 gap-y-16 mt-8 mb-20">
                 {% for principle in page.tech_principle_blocks %}
                     <div class="bg-hot-off-white p-8">
                         <h1 class="text-h5 font-bold">
                             {{principle.value.title}}
                         </h1>
                         <div class="">
-                            {{principle.value.description|safe}}
+                            {{principle.value.description|richtext}}
                         </div>
                     </div>
                 {% endfor %}
@@ -41,7 +41,7 @@ <h1 class="text-h5 font-bold">
                 {% endfor %}
             </div>
 
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-8 text-white mt-10 mb-20">
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-8 text-white my-20">
                 <div>
                     {% include "ui/components/dogear_boxes/DogearRed.html" with title=page.red_box_title linktext=page.red_box_link_text linkurl=page.red_box_link_url %}
                 </div>
diff --git a/app/tools_and_resources/templates/tools_and_resources/open_mapping_solutions_page.html b/app/tools_and_resources/templates/tools_and_resources/open_mapping_solutions_page.html
index eff227e..12d7a73 100644
--- a/app/tools_and_resources/templates/tools_and_resources/open_mapping_solutions_page.html
+++ b/app/tools_and_resources/templates/tools_and_resources/open_mapping_solutions_page.html
@@ -10,7 +10,7 @@
 {% endblock extra_css %}
 
 {% block content %}
-    {% include "ui/components/PageHeaderWithBlur.html" with title=page.title image=page.header_image endinlarge=True full_length=True %}
+    {% include "ui/components/PageHeaderWithBlur.html" with title=page.title image=page.header_image endinlarge=True full_length=True smaller=True %}
     
     <div class="max-w-7xl mx-auto my-10">
         <div class="px-6 md:px-10">
@@ -21,14 +21,12 @@
             <div class="grid gap-8">
                 {% for solution in page.solutions %}
                     <div x-data="{ expand: false }">
-                        <div class="flex gap-4 justify-between px-4 cursor-pointer" @click="expand = !expand">
+                        <div class="flex gap-4 justify-between px-4 cursor-pointer [&:hover_.link-caret-circle]:bg-hot-red [&:hover_.link-caret-circle]:text-white [&:hover_h1]:underline" @click="expand = !expand">
                             <h1 class="text-h3 font-bold">
                                 {{solution.value.title}}
                             </h1>
-                            <div class="justify-self-end text-hot-red border-hot-red border-2 rounded-full h-8 w-8 flex items-center justify-center" :class="expand ? 'pl-0.5' : 'pr-0.5'">
-                                <div :class="expand ? 'rotate-90' : '-rotate-90'">
-                                    {% include "ui/components/icon_svgs/LinkCaret.html" %}
-                                </div>
+                            <div class="text-hot-red h-fit w-fit" :class="expand ? '-rotate-90' : 'rotate-90'">
+                                {% include "ui/components/icon_svgs/LinkCaretCircle.html" with styledhover=True %}
                             </div>
                         </div>
                         <div class="mt-8" x-show="expand" x-transition>
@@ -40,7 +38,7 @@ <h1 class="text-h3 font-bold">
                                 <div>
                                     <div class="grid gap-2">
                                         {% for item in solution.value.items %}
-                                            <div class="font-semibold px-4 py-2 cursor-pointer" :class="selected == {{forloop.counter0}} ? 'bg-hot-red text-white' : 'bg-hot-off-white'" @click="selected = {{forloop.counter0}}">
+                                            <div class="font-semibold px-4 py-2 cursor-pointer hover:bg-hot-red hover:text-white transition duration-100" :class="selected == {{forloop.counter0}} ? 'bg-hot-red text-white' : 'bg-hot-off-white'" @click="selected = {{forloop.counter0}}">
                                                 {{item.value.title}}
                                             </div>
                                         {% endfor %}
@@ -48,7 +46,7 @@ <h1 class="text-h3 font-bold">
                                 </div>
                                 <div class="md:col-span-2 lg:col-span-3">
                                     {% for item in solution.value.items %}
-                                        <div x-show="selected == {{forloop.counter0}}">
+                                        <div x-show="selected == {{forloop.counter0}}" x-transition>
                                             <h2 class="text-h4 font-semibold">
                                                 {{item.value.title}}
                                             </h2>
diff --git a/app/tools_and_resources/templates/tools_and_resources/resource_and_learning_page.html b/app/tools_and_resources/templates/tools_and_resources/resource_and_learning_page.html
index eed6304..b3c6cd0 100644
--- a/app/tools_and_resources/templates/tools_and_resources/resource_and_learning_page.html
+++ b/app/tools_and_resources/templates/tools_and_resources/resource_and_learning_page.html
@@ -10,17 +10,15 @@
 {% endblock extra_css %}
 
 {% block content %}
-    {% include "ui/components/PageHeaderWithBlur.html" with title=page.title image=page.header_image endinlarge=True full_length=True %}
+    {% include "ui/components/PageHeaderWithBlur.html" with title=page.title image=page.header_image endinlarge=True full_length=True smaller=True %}
     
     <div class="max-w-7xl mx-auto my-10">
         <div class="px-6 md:px-10">
-            <div class="lg:grid lg:grid-cols-6 mb-10">
-                <div class="col-span-5 text-intro font-medium">
-                    {{page.intro|safe}}
-                </div>
+            <div class="max-w-5xl mb-10 text-intro font-medium">
+                {{page.intro|safe}}
             </div>
 
-            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mt-10 mb-20">
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-x-8 gap-y-16 mt-10 mb-20">
                 {% for panel in page.large_panels %}
                     {% include "ui/components/misc_panels/LinkBlockWithImage.html" with title=panel.value.title image=panel.value.image description=panel.value.description linktext=panel.value.link_text linkurl=panel.value.link %}
                 {% endfor %}
diff --git a/app/ui/templates/ui/components/dogear_boxes/DogearAnyColourLong.html b/app/ui/templates/ui/components/dogear_boxes/DogearAnyColourLong.html
index 2271609..ba9caaa 100644
--- a/app/ui/templates/ui/components/dogear_boxes/DogearAnyColourLong.html
+++ b/app/ui/templates/ui/components/dogear_boxes/DogearAnyColourLong.html
@@ -11,10 +11,7 @@
     <h1 class="text-h3 font-bold col-span-3">
         {{ title }}
     </h1>
-    <a href="{% include 'ui/components/PageOrLinkHrefText.html' %}" class="text-intro font-medium col-span-1 text-left self-center lg:text-right mt-4 lg:mt-0">
-        {{ linktext }}
-        <span class="ml-4 text-hot-red" style="{%if arrowcolour%}color: {{arrowcolour}}{%endif%}">
-            {% include "ui/components/icon_svgs/LinkCaret.html" %}
-        </span>
-    </a>
+    <p class="[&_span]:text-black self-center text-intro text-right">
+        {% include "ui/components/BaseLinkNoUnderline.html" %}
+    </p>
 </div>
\ No newline at end of file
diff --git a/app/ui/templates/ui/components/icon_svgs/LinkCaretCircle.html b/app/ui/templates/ui/components/icon_svgs/LinkCaretCircle.html
index f3db3b7..c1225d6 100644
--- a/app/ui/templates/ui/components/icon_svgs/LinkCaretCircle.html
+++ b/app/ui/templates/ui/components/icon_svgs/LinkCaretCircle.html
@@ -1,3 +1,3 @@
-<div class="{%if borderclass%}{{borderclass}}{%else%}border-hot-red{%endif%} {{outerclass}} border-2 rounded-full h-8 w-8 text-center {%if styledhover%}hover:bg-hot-red hover:text-white transition duration-75{%endif%}">
+<div class="link-caret-circle {%if borderclass%}{{borderclass}}{%else%}border-hot-red{%endif%} {{outerclass}} border-2 rounded-full h-8 w-8 text-center {%if styledhover%}hover:bg-hot-red hover:text-white transition duration-75{%endif%}">
     {% include "./LinkCaret.html" with class="mt-0.5" %}
 </div>
\ No newline at end of file
diff --git a/app/ui/templates/ui/components/misc_panels/LinkBlockWithImage.html b/app/ui/templates/ui/components/misc_panels/LinkBlockWithImage.html
index a4c1df7..858bfe1 100644
--- a/app/ui/templates/ui/components/misc_panels/LinkBlockWithImage.html
+++ b/app/ui/templates/ui/components/misc_panels/LinkBlockWithImage.html
@@ -9,7 +9,7 @@
 {% load wagtailimages_tags %}
 
 <div>
-    {% image image original class="aspect-[2/1] object-cover" %}
+    {% image image original class="aspect-[3/2] object-cover" %}
     <h1 class="my-2 text-h3 font-bold">{{title}}</h1>
     <div class="my-2">
         {{description|richtext}}
diff --git a/app/ui/templates/ui/components/programs/ProgramPreviewBlockBase.html b/app/ui/templates/ui/components/programs/ProgramPreviewBlockBase.html
index b31c423..f429526 100644
--- a/app/ui/templates/ui/components/programs/ProgramPreviewBlockBase.html
+++ b/app/ui/templates/ui/components/programs/ProgramPreviewBlockBase.html
@@ -6,10 +6,10 @@
 {% load wagtailcore_tags %}
 {% load wagtailimages_tags %}
 
-{% image program.header_image original as image_p %}
 <a href="{{ program.url }}">
-    <div class="min-h-[14rem] content-end bg-no-repeat bg-cover" style="background-image: url('{{ image_p.url }}')">
-        <div class="bg-gradient-to-t from-black/90 to-transparent w-full">
+    <div class="w-full bg-no-repeat bg-cover aspect-[4/3] grid">
+        {% image program.header_image original class="h-full w-full object-cover object-center col-start-1 row-start-1" %}
+        <div class="bg-gradient-to-t from-black/90 to-black/15 w-full h-full flex items-end col-start-1 row-start-1">
             <div class="text-white p-4 text-small">
                 <h1 class="text-h5 font-bold mb-2">
                     {{ program.title }}
diff --git a/app/ui/templates/ui/components/sections/LinkListSection.html b/app/ui/templates/ui/components/sections/LinkListSection.html
index 4aff05a..63011ab 100644
--- a/app/ui/templates/ui/components/sections/LinkListSection.html
+++ b/app/ui/templates/ui/components/sections/LinkListSection.html
@@ -17,7 +17,7 @@ <h1 class="text-h2 font-bold">{{title}}</h1>
                 {% if not external_style %}
                     {% include "ui/components/BaseLink.html" with linktext=link.value.text linkurl=link.value.link %}
                 {% else %}
-                    <a href="{{link.value.link}}">
+                    <a href="{{link.value.link}}" class="hover:text-hot-red transition duration-100">
                         <span class="border-b-hot-red border-b-2 pb-1 font-medium">{{link.value.text}}</span> 
                         <span class="ml-4 text-hot-red">{% include "ui/components/icon_svgs/ExternalLinkIcon.html" with class="mb-1" %}</span>
                     </a>
diff --git a/app/volunteer_opportunities/migrations/0006_remove_volunteeropportunityownerpage_aside_block_link_url_and_more.py b/app/volunteer_opportunities/migrations/0006_remove_volunteeropportunityownerpage_aside_block_link_url_and_more.py
new file mode 100644
index 0000000..07fb86d
--- /dev/null
+++ b/app/volunteer_opportunities/migrations/0006_remove_volunteeropportunityownerpage_aside_block_link_url_and_more.py
@@ -0,0 +1,43 @@
+# Generated by Django 4.2.7 on 2024-09-13 18:02
+
+from django.db import migrations
+import wagtail.blocks
+import wagtail.documents.blocks
+import wagtail.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('volunteer_opportunities', '0005_individualvolunteeropportunitypage_is_active'),
+    ]
+
+    operations = [
+        migrations.RemoveField(
+            model_name='volunteeropportunityownerpage',
+            name='aside_block_link_url',
+        ),
+        migrations.RemoveField(
+            model_name='volunteeropportunityownerpage',
+            name='black_box_link_url',
+        ),
+        migrations.RemoveField(
+            model_name='volunteeropportunityownerpage',
+            name='red_box_link_url',
+        ),
+        migrations.AddField(
+            model_name='volunteeropportunityownerpage',
+            name='aside_block_link',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock())], blank=True, use_json_field=True),
+        ),
+        migrations.AddField(
+            model_name='volunteeropportunityownerpage',
+            name='black_box_link',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock())], blank=True, use_json_field=True),
+        ),
+        migrations.AddField(
+            model_name='volunteeropportunityownerpage',
+            name='red_box_link',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock())], blank=True, use_json_field=True),
+        ),
+    ]
diff --git a/app/volunteer_opportunities/models.py b/app/volunteer_opportunities/models.py
index 1c05db5..8375420 100644
--- a/app/volunteer_opportunities/models.py
+++ b/app/volunteer_opportunities/models.py
@@ -6,6 +6,8 @@
 from wagtail.blocks import CharBlock, StreamBlock, StructBlock, URLBlock, RichTextBlock, PageChooserBlock
 from wagtail.models import Page
 
+from app.core.models import LinkOrPageBlock
+
 
 class VolunteerOpportunityOwnerPage(Page):
     def get_context(self, request, *args, **kwargs):
@@ -45,14 +47,14 @@ def get_context(self, request, *args, **kwargs):
     aside_block_title = models.CharField(default="Didn't find the volunteer opportunity you were looking for?")
     aside_block_description = RichTextField(blank=True)
     aside_block_link_text = models.CharField(default="Contact us")
-    aside_block_link_url = models.URLField(blank=True)
+    aside_block_link = StreamField(LinkOrPageBlock(), use_json_field=True, blank=True)
 
     red_box_title = models.CharField(default="Join our Slack channel and find more opportunities")
     red_box_link_text = models.CharField(default="Join our conversation")
-    red_box_link_url = models.URLField(null=True, blank=True)
+    red_box_link = StreamField(LinkOrPageBlock(), use_json_field=True, blank=True)
     black_box_title = models.CharField(default="Check out upcoming events")
     black_box_link_text = models.CharField(default="See our events")
-    black_box_link_url = models.URLField(null=True, blank=True)
+    black_box_link = StreamField(LinkOrPageBlock(), use_json_field=True, blank=True)
 
     posted_by_prefix_text = models.CharField(default="Posted by")
     
@@ -82,15 +84,15 @@ def get_context(self, request, *args, **kwargs):
             FieldPanel('aside_block_title'),
             FieldPanel('aside_block_description'),
             FieldPanel('aside_block_link_text'),
-            FieldPanel('aside_block_link_url'),
+            FieldPanel('aside_block_link'),
         ], heading="Aside block"),
         MultiFieldPanel([
             FieldPanel('red_box_title'),
             FieldPanel('red_box_link_text'),
-            FieldPanel('red_box_link_url'),
+            FieldPanel('red_box_link'),
             FieldPanel('black_box_title'),
             FieldPanel('black_box_link_text'),
-            FieldPanel('black_box_link_url'),
+            FieldPanel('black_box_link'),
         ], heading="Dogear boxes"),
         MultiFieldPanel([
             FieldPanel('posted_by_prefix_text'),
diff --git a/app/volunteer_opportunities/templates/volunteer_opportunities/components/AsideBlockContents.html b/app/volunteer_opportunities/templates/volunteer_opportunities/components/AsideBlockContents.html
index 5732608..3c8efed 100644
--- a/app/volunteer_opportunities/templates/volunteer_opportunities/components/AsideBlockContents.html
+++ b/app/volunteer_opportunities/templates/volunteer_opportunities/components/AsideBlockContents.html
@@ -6,7 +6,6 @@ <h1 class="text-h3 font-bold">
         {{page.aside_block_description|safe}}
     </div>
     <p class="text-hot-red font-medium">
-        {{page.aside_block_link_text}}
-        <span class="ml-4">{% include "ui/components/icon_svgs/LinkCaret.html" %}</span>
+        {% include "ui/components/BaseLinkNoUnderline.html" with linkurl=page.aside_block_link linktext=page.aside_block_link_text %}
     </p>
 </div>
\ No newline at end of file
diff --git a/app/volunteer_opportunities/templates/volunteer_opportunities/volunteer_opportunity_owner_page.html b/app/volunteer_opportunities/templates/volunteer_opportunities/volunteer_opportunity_owner_page.html
index 206b4c1..9be188f 100644
--- a/app/volunteer_opportunities/templates/volunteer_opportunities/volunteer_opportunity_owner_page.html
+++ b/app/volunteer_opportunities/templates/volunteer_opportunities/volunteer_opportunity_owner_page.html
@@ -17,10 +17,10 @@
             <div class="lg:grid lg:grid-cols-3 gap-8">
                 <div class="lg:col-span-2">
                     <div class="text-intro font-bold mb-4">
-                        {{page.intro|safe}}
+                        {{page.intro|richtext}}
                     </div>
                     <div class="base-article-m [&_a]:font-bold mb-10">
-                        {{page.body_description|safe}}
+                        {{page.body_description|richtext}}
                     </div>
 
                     {% include "ui/components/TitleWithUnderline.html" with title=page.open_opportunities_title %}
@@ -53,7 +53,7 @@ <h1 class="text-h3 font-bold">
                                     {{page.no_opportunities_title}}
                                 </h1>
                                 <div class="base-article-m [&_a]:font-bold mt-4">
-                                    {{page.no_opportunities_description|safe}}
+                                    {{page.no_opportunities_description|richtext}}
                                 </div>
                             </div>
                         {% endif %}
@@ -66,10 +66,10 @@ <h1 class="text-h3 font-bold">
 
             <div class="grid grid-cols-1 md:grid-cols-2 gap-8 text-white my-20">
                 <div>
-                    {% include "ui/components/dogear_boxes/DogearRed.html" with title=page.red_box_title linktext=page.red_box_link_text linkurl=page.red_box_link_url %}
+                    {% include "ui/components/dogear_boxes/DogearRed.html" with title=page.red_box_title linktext=page.red_box_link_text linkurl=page.red_box_link %}
                 </div>
                 <div>
-                    {% include "ui/components/dogear_boxes/DogearBlack.html" with title=page.black_box_title linktext=page.black_box_link_text linkurl=page.black_box_link_url %}
+                    {% include "ui/components/dogear_boxes/DogearBlack.html" with title=page.black_box_title linktext=page.black_box_link_text linkurl=page.black_box_link %}
                 </div>
             </div>
         </div>
diff --git a/hot_osm/settings/base.py b/hot_osm/settings/base.py
index 2dd994a..52503d1 100644
--- a/hot_osm/settings/base.py
+++ b/hot_osm/settings/base.py
@@ -270,4 +270,6 @@
 
 GEO_WIDGET_LEAFLET_TILE_LAYER_OPTIONS = {
     "attribution": '© <a href="https://www.mapbox.com/feedback/">Mapbox</a> © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
-}
\ No newline at end of file
+}
+
+DATA_UPLOAD_MAX_NUMBER_FIELDS = 2000
diff --git a/hot_osm/static/css/hot_osm.css b/hot_osm/static/css/hot_osm.css
index 29a4a2a..6ff8175 100644
--- a/hot_osm/static/css/hot_osm.css
+++ b/hot_osm/static/css/hot_osm.css
@@ -89,10 +89,14 @@
 .base-article h2,
 .base-article h3,
 .base-article h4,
+.base-article h5,
+.base-article a,
 .base-article-m h1,
 .base-article-m h2,
 .base-article-m h3,
-.base-article-m h4 {
+.base-article-m h4,
+.base-article-m h5,
+.base-article-m a {
     font-weight: bold;
 }
 

From 9928cb75366e233d6d057881ec847eee53695daa Mon Sep 17 00:00:00 2001
From: luminaryFlowers <71102109+luminaryFlowers@users.noreply.github.com>
Date: Tue, 24 Sep 2024 17:01:15 -0700
Subject: [PATCH 05/15] five trillion small things, plus a couple new pages =>
 highlights among the small things include the social media share button
 changes, the upper navbar now being editable and the social media links being
 adjustable, mobile format navigation is overhauled, search will now grab
 focus when opened => salary framework page is mostly unnoteworthy; includes
 tables, which notably do not allow cell merging, which shouldn't be a problem
 on this page => job opportunities is so noteworthy that i would recommend
 just reading the information on the google sheets

---
 ...townerpage_view_all_events_url_and_more.py |  35 ++++
 app/events/models.py                          |  11 +-
 .../events/individual_event_page.html         |   4 +-
 ...nvolvedpage_black_box_link_url_and_more.py |  67 +++++++
 app/get_involved/models.py                    |  24 +--
 .../get_involved/get_involved_page.html       |  16 +-
 ...page_black_dogear_box_link_url_and_more.py |  48 +++++
 app/impact_areas/models.py                    |  15 +-
 .../impact_areas/impact_areas_page.html       |   2 +-
 .../individual_impact_area_page.html          |   2 +-
 app/job_opportunities/__init__.py             |   0
 app/job_opportunities/admin.py                |   3 +
 app/job_opportunities/apps.py                 |   6 +
 .../migrations/0001_initial.py                |  47 +++++
 ...tiespage_black_box_description_and_more.py |  44 +++++
 app/job_opportunities/migrations/__init__.py  |   0
 app/job_opportunities/models.py               |  83 +++++++++
 .../components/AsideBlock.html                |   4 +
 .../components/BambooHRScript.html            | 104 +++++++++++
 .../job_opportunities_page.html               |  60 ++++++
 app/job_opportunities/tests.py                |   3 +
 app/job_opportunities/views.py                |   3 +
 ...ividualmappinghubpage_partners_and_more.py |  25 +++
 app/mapping_hubs/models.py                    |   7 +-
 .../individual_mapping_hub_page.html          |   2 +-
 .../templates/members/member_group_page.html  |   2 +-
 .../migrations/0026_salaryframeworkpage.py    |  36 ++++
 app/misc/models.py                            |  31 ++++
 .../templates/misc/code_of_conduct_page.html  |   4 +-
 app/misc/templates/misc/contact_us_page.html  |   7 +-
 .../templates/misc/privacy_policy_page.html   |   4 +-
 .../templates/misc/salary_framework_page.html |  53 ++++++
 .../templates/misc/working_groups_page.html   |   2 +-
 ...ewsownerpage_view_all_news_url_and_more.py |  25 +++
 app/news/models.py                            |   8 +-
 .../templates/news/individual_news_page.html  | 174 +++++++++---------
 ..._ourpartnerspage_filter_by_hub_and_more.py |  23 +++
 app/partners/models.py                        |  25 ++-
 .../templates/partners/our_partners_page.html |  65 ++++++-
 ...0011_individualprogrampage_partner_list.py |  21 +++
 ...2_remove_individualprogrampage_partners.py |  17 ++
 app/programs/models.py                        |  11 +-
 .../programs/individual_program_page.html     |   8 +-
 ...ctpage_call_to_action_link_url_and_more.py |  61 ++++++
 ...idualprojectpage_partners_list_and_more.py |  25 +++
 app/projects/models.py                        |  27 +--
 .../projects/individual_project_page.html     |  16 +-
 ..._job_opportunities_button_link_and_more.py |  25 +++
 app/rfp/models.py                             |   6 +-
 .../individual_request_for_proposal_page.html |  14 +-
 .../rfp/request_for_proposal_owner_page.html  |   4 +-
 ...sourcespage_black_box_link_url_and_more.py |  61 ++++++
 app/tools_and_resources/models.py             |  20 +-
 .../tools_and_resources_page.html             |  21 +--
 .../components/BaseLinkNoUnderlineWhite.html  |   8 +-
 .../ui/components/PageOrLinkHrefText.html     |   6 +-
 .../events/EventPreviewBlockEvent.html        |  13 +-
 .../impact_areas/ImpactAreaPreviewBlock.html  |   8 +-
 .../ImpactAreaPreviewBlockMini.html           |   4 +-
 .../PagePreviewWithTabletDescription.html     |   9 +-
 .../navigation/FooterNavigation.html          |  13 +-
 .../components/navigation/HeaderNavbar.html   |  37 +++-
 .../navigation/HeaderNavbarButton.html        |   6 +-
 .../navigation/HeaderNavbarItemMobile.html    |  46 +++++
 .../ui/components/navigation/SearchModal.html |  23 ++-
 .../navigation/UpperHeaderNavbar.html         |  34 ++++
 .../components/partners/PartnerViewBlock.html |  24 ++-
 .../ui/components/sharers/ShareSection.html   |  19 +-
 ..._whowearepage_other_page_preview_blocks.py |  21 +++
 ...08_whowearepage_preview_learn_more_text.py |  18 ++
 app/who_we_are/models.py                      |   3 +
 .../templates/who_we_are/who_we_are_page.html |  14 +-
 ..._homepage_top_navigation_links_and_more.py |  27 +++
 ...age_top_navigation_donate_text_and_more.py |  26 +++
 .../0038_homepage_footer_certifications.py    |  22 +++
 .../0039_homepage_social_share_links.py       |  21 +++
 home/models.py                                |  41 ++++-
 .../home/components/ImpactAreasPanel.html     |   4 +-
 home/templatetags/homepage_tags.py            |  14 ++
 hot_osm/settings/base.py                      |   2 +
 hot_osm/static/css/hot_osm.css                |  87 +++++++++
 hot_osm/templates/base.html                   |   2 +-
 .../components/branded_elements/link.html     |   2 +-
 utils/templates/language_switcher.html        |   4 +-
 84 files changed, 1696 insertions(+), 273 deletions(-)
 create mode 100644 app/events/migrations/0010_remove_eventownerpage_view_all_events_url_and_more.py
 create mode 100644 app/get_involved/migrations/0004_remove_getinvolvedpage_black_box_link_url_and_more.py
 create mode 100644 app/impact_areas/migrations/0021_remove_impactareaspage_black_dogear_box_link_url_and_more.py
 create mode 100644 app/job_opportunities/__init__.py
 create mode 100644 app/job_opportunities/admin.py
 create mode 100644 app/job_opportunities/apps.py
 create mode 100644 app/job_opportunities/migrations/0001_initial.py
 create mode 100644 app/job_opportunities/migrations/0002_jobopportunitiespage_black_box_description_and_more.py
 create mode 100644 app/job_opportunities/migrations/__init__.py
 create mode 100644 app/job_opportunities/models.py
 create mode 100644 app/job_opportunities/templates/job_opportunities/components/AsideBlock.html
 create mode 100644 app/job_opportunities/templates/job_opportunities/components/BambooHRScript.html
 create mode 100644 app/job_opportunities/templates/job_opportunities/job_opportunities_page.html
 create mode 100644 app/job_opportunities/tests.py
 create mode 100644 app/job_opportunities/views.py
 create mode 100644 app/mapping_hubs/migrations/0019_remove_individualmappinghubpage_partners_and_more.py
 create mode 100644 app/misc/migrations/0026_salaryframeworkpage.py
 create mode 100644 app/misc/templates/misc/salary_framework_page.html
 create mode 100644 app/news/migrations/0021_remove_newsownerpage_view_all_news_url_and_more.py
 create mode 100644 app/partners/migrations/0012_ourpartnerspage_filter_by_hub_and_more.py
 create mode 100644 app/programs/migrations/0011_individualprogrampage_partner_list.py
 create mode 100644 app/programs/migrations/0012_remove_individualprogrampage_partners.py
 create mode 100644 app/projects/migrations/0036_remove_individualprojectpage_call_to_action_link_url_and_more.py
 create mode 100644 app/projects/migrations/0037_remove_individualprojectpage_partners_list_and_more.py
 create mode 100644 app/rfp/migrations/0006_remove_requestforproposalownerpage_job_opportunities_button_link_and_more.py
 create mode 100644 app/tools_and_resources/migrations/0007_remove_toolsandresourcespage_black_box_link_url_and_more.py
 create mode 100644 app/ui/templates/ui/components/navigation/HeaderNavbarItemMobile.html
 create mode 100644 app/ui/templates/ui/components/navigation/UpperHeaderNavbar.html
 create mode 100644 app/who_we_are/migrations/0007_alter_whowearepage_other_page_preview_blocks.py
 create mode 100644 app/who_we_are/migrations/0008_whowearepage_preview_learn_more_text.py
 create mode 100644 home/migrations/0036_homepage_top_navigation_links_and_more.py
 create mode 100644 home/migrations/0037_homepage_top_navigation_donate_text_and_more.py
 create mode 100644 home/migrations/0038_homepage_footer_certifications.py
 create mode 100644 home/migrations/0039_homepage_social_share_links.py

diff --git a/app/events/migrations/0010_remove_eventownerpage_view_all_events_url_and_more.py b/app/events/migrations/0010_remove_eventownerpage_view_all_events_url_and_more.py
new file mode 100644
index 0000000..fc9bd83
--- /dev/null
+++ b/app/events/migrations/0010_remove_eventownerpage_view_all_events_url_and_more.py
@@ -0,0 +1,35 @@
+# Generated by Django 4.2.7 on 2024-09-18 19:59
+
+from django.db import migrations, models
+import wagtail.blocks
+import wagtail.documents.blocks
+import wagtail.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('events', '0009_alter_eventownerpage_category_select_and_more'),
+    ]
+
+    operations = [
+        migrations.RemoveField(
+            model_name='eventownerpage',
+            name='view_all_events_url',
+        ),
+        migrations.AddField(
+            model_name='eventownerpage',
+            name='view_all_events_link',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock())], blank=True, use_json_field=True),
+        ),
+        migrations.AlterField(
+            model_name='individualeventpage',
+            name='end_date_time',
+            field=models.DateTimeField(help_text='This datetime is in UTC.'),
+        ),
+        migrations.AlterField(
+            model_name='individualeventpage',
+            name='start_date_time',
+            field=models.DateTimeField(help_text='This datetime is in UTC.'),
+        ),
+    ]
diff --git a/app/events/models.py b/app/events/models.py
index 1d48f22..3277efa 100644
--- a/app/events/models.py
+++ b/app/events/models.py
@@ -12,6 +12,7 @@
 from wagtail.snippets.models import register_snippet
 
 from app.members.models import IndividualMappingHubPage
+from app.core.models import LinkOrPageBlock
 
 
 class EventOwnerPage(Page):
@@ -88,7 +89,7 @@ def get_context(self, request, *args, **kwargs):
     rsvp_button_text = models.CharField(default="RSVP")
     more_events_title = models.CharField(default="More Events")
     view_all_events_text = models.CharField(default="View all Events")
-    view_all_events_url = models.URLField(blank=True)
+    view_all_events_link = StreamField(LinkOrPageBlock(), use_json_field=True, blank=True)
     event_read_more_text = models.CharField(default="Read more")
 
     keyword_search_hint = models.CharField(default="Search by keyword")
@@ -123,7 +124,7 @@ def get_context(self, request, *args, **kwargs):
             FieldPanel('rsvp_button_text'),
             FieldPanel('more_events_title'),
             FieldPanel('view_all_events_text'),
-            FieldPanel('view_all_events_url'),
+            FieldPanel('view_all_events_link'),
             FieldPanel('event_read_more_text'),
         ], heading="Individual Event Page"),
     ]
@@ -159,13 +160,13 @@ class Meta:
         verbose_name_plural = "Event Categories"
 
 
-class IndividualEventPage(Page):
+class IndividualEventPage(Page):    
     parent_page_types = [
         'events.EventOwnerPage'
     ]
 
-    start_date_time = models.DateTimeField()
-    end_date_time = models.DateTimeField()
+    start_date_time = models.DateTimeField(help_text="This datetime is in UTC.")
+    end_date_time = models.DateTimeField(help_text="This datetime is in UTC.")
 
     image = models.ForeignKey(
         "wagtailimages.Image",
diff --git a/app/events/templates/events/individual_event_page.html b/app/events/templates/events/individual_event_page.html
index 1f6d900..6c3cd1e 100644
--- a/app/events/templates/events/individual_event_page.html
+++ b/app/events/templates/events/individual_event_page.html
@@ -15,7 +15,7 @@
         <div class="base-article px-10 py-5">
             <h1>{{ page.title }}</h1>
             <p class="mt-2">
-                {{ page.start_date_time }} &#x2013; {% if page.start_date_time.date == page.end_date_time.date %}{{ page.end_date_time.time }} {% else %} {{page.end_date_time}} {% endif %}
+                {{ page.start_date_time }} {{page.start_date_time.tzinfo}} &#x2013; {% if page.start_date_time.date == page.end_date_time.date %}{{ page.end_date_time.time }} {% else %} {{page.end_date_time}} {% endif %} {{page.start_date_time.tzinfo}}
             </p>
         </div>
 
@@ -92,7 +92,7 @@ <h1>
                         {{page.get_parent.specific.more_events_title}}
                     </h1>
                     <div class="text-intro [&_span]:text-black my-4">
-                        {% include "ui/components/BaseLink.html" with linktext=page.get_parent.specific.view_all_events_text linkurl=page.get_parent.specific.view_all_events_url %}
+                        {% include "ui/components/BaseLink.html" with linktext=page.get_parent.specific.view_all_events_text linkurl=page.get_parent.specific.view_all_events_link %}
                     </div>
                     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-1 gap-12 mt-10">
                         {% for event in page.more_events %}
diff --git a/app/get_involved/migrations/0004_remove_getinvolvedpage_black_box_link_url_and_more.py b/app/get_involved/migrations/0004_remove_getinvolvedpage_black_box_link_url_and_more.py
new file mode 100644
index 0000000..b9641c2
--- /dev/null
+++ b/app/get_involved/migrations/0004_remove_getinvolvedpage_black_box_link_url_and_more.py
@@ -0,0 +1,67 @@
+# Generated by Django 4.2.7 on 2024-09-16 18:02
+
+from django.db import migrations
+import wagtail.blocks
+import wagtail.documents.blocks
+import wagtail.fields
+import wagtail.images.blocks
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('get_involved', '0003_getinvolvedpage_join_us_panel_read_more_and_more'),
+    ]
+
+    operations = [
+        migrations.RemoveField(
+            model_name='getinvolvedpage',
+            name='black_box_link_url',
+        ),
+        migrations.RemoveField(
+            model_name='getinvolvedpage',
+            name='dogear_box_link_url',
+        ),
+        migrations.RemoveField(
+            model_name='getinvolvedpage',
+            name='partner_with_us_button_link',
+        ),
+        migrations.RemoveField(
+            model_name='getinvolvedpage',
+            name='red_box_link_url',
+        ),
+        migrations.RemoveField(
+            model_name='getinvolvedpage',
+            name='view_all_events_link',
+        ),
+        migrations.AddField(
+            model_name='getinvolvedpage',
+            name='black_box_link',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock())], blank=True, use_json_field=True),
+        ),
+        migrations.AddField(
+            model_name='getinvolvedpage',
+            name='dogear_box_link',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock())], blank=True, use_json_field=True),
+        ),
+        migrations.AddField(
+            model_name='getinvolvedpage',
+            name='partner_with_us_button_url',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock())], blank=True, use_json_field=True),
+        ),
+        migrations.AddField(
+            model_name='getinvolvedpage',
+            name='red_box_link',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock())], blank=True, use_json_field=True),
+        ),
+        migrations.AddField(
+            model_name='getinvolvedpage',
+            name='view_all_events_url',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock())], blank=True, use_json_field=True),
+        ),
+        migrations.AlterField(
+            model_name='getinvolvedpage',
+            name='get_involved_large_panels',
+            field=wagtail.fields.StreamField([('panel', wagtail.blocks.StructBlock([('image', wagtail.images.blocks.ImageChooserBlock()), ('title', wagtail.blocks.CharBlock()), ('description', wagtail.blocks.RichTextBlock()), ('link_text', wagtail.blocks.CharBlock()), ('link', wagtail.blocks.StreamBlock([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock())], required=False))]))], blank=True, null=True, use_json_field=True),
+        ),
+    ]
diff --git a/app/get_involved/models.py b/app/get_involved/models.py
index 2cb2356..763ba42 100644
--- a/app/get_involved/models.py
+++ b/app/get_involved/models.py
@@ -7,13 +7,15 @@
 from wagtail.images.blocks import ImageChooserBlock
 from modelcluster.fields import ParentalKey, ParentalManyToManyField
 
+from app.core.models import LinkOrPageBlock
+
 
 class GetInvolvedLargePanel(StructBlock):
     image = ImageChooserBlock()
     title = CharBlock()
     description = RichTextBlock()
     link_text = CharBlock()
-    link_url = URLBlock(required=False)
+    link = LinkOrPageBlock(required=False)
 
 
 class JoinUsPanel(StructBlock):
@@ -45,16 +47,16 @@ class GetInvolvedPage(Page):
     partner_with_us_title = models.CharField(default="Partner With Us!")
     partner_with_us_description = RichTextField(blank=True)
     partner_with_us_button_text = models.CharField(default="Partner With Us")
-    partner_with_us_button_link = models.URLField(blank=True)
+    partner_with_us_button_url = StreamField(LinkOrPageBlock(), use_json_field=True, blank=True)
 
     get_involved_community_title = models.CharField(default="Get Involved in Our Community")
     get_involved_large_panels = StreamField([('panel', GetInvolvedLargePanel())], use_json_field=True, blank=True, null=True)
     dogear_box_title = models.CharField(default="Connect with our OSM community!")
     dogear_box_link_text = models.CharField(default="Contact by Country")
-    dogear_box_link_url = models.URLField(blank=True)
+    dogear_box_link = StreamField(LinkOrPageBlock(), use_json_field=True, blank=True)
     events_title = models.CharField(default="Events")
     view_all_events_text = models.CharField(default="View all Events")
-    view_all_events_link = models.URLField(blank=True)
+    view_all_events_url = StreamField(LinkOrPageBlock(), use_json_field=True, blank=True)
     events = StreamField([('event', PageChooserBlock(page_type="events.IndividualEventPage"))], use_json_field=True, null=True, blank=True, max_num=3)
 
     join_us_title = models.CharField(default="Join Us")
@@ -62,10 +64,10 @@ class GetInvolvedPage(Page):
     join_us_panel_read_more = models.CharField(default="Read More")
     red_box_title = models.CharField(default="Support HOT's work!")
     red_box_link_text = models.CharField(default="Donate Today")
-    red_box_link_url = models.URLField(null=True, blank=True)
+    red_box_link = StreamField(LinkOrPageBlock(), use_json_field=True, blank=True)
     black_box_title = models.CharField(default="Stay in Touch")
     black_box_link_text = models.CharField(default="Contact Us")
-    black_box_link_url = models.URLField(null=True, blank=True)
+    black_box_link = StreamField(LinkOrPageBlock(), use_json_field=True, blank=True)
     
     content_panels = Page.content_panels + [
         FieldPanel('header_image'),
@@ -74,17 +76,17 @@ class GetInvolvedPage(Page):
             FieldPanel('partner_with_us_title'),
             FieldPanel('partner_with_us_description'),
             FieldPanel('partner_with_us_button_text'),
-            FieldPanel('partner_with_us_button_link'),
+            FieldPanel('partner_with_us_button_url'),
         ], heading="Partner With Us"),
         MultiFieldPanel([
             FieldPanel('get_involved_community_title'),
             FieldPanel('get_involved_large_panels'),
             FieldPanel('dogear_box_title'),
             FieldPanel('dogear_box_link_text'),
-            FieldPanel('dogear_box_link_url'),
+            FieldPanel('dogear_box_link'),
             FieldPanel('events_title'),
             FieldPanel('view_all_events_text'),
-            FieldPanel('view_all_events_link'),
+            FieldPanel('view_all_events_url'),
             FieldPanel('events'),
         ], heading="Get Involved in Our Community"),
         MultiFieldPanel([
@@ -93,9 +95,9 @@ class GetInvolvedPage(Page):
             FieldPanel('join_us_panel_read_more'),
             FieldPanel('red_box_title'),
             FieldPanel('red_box_link_text'),
-            FieldPanel('red_box_link_url'),
+            FieldPanel('red_box_link'),
             FieldPanel('black_box_title'),
             FieldPanel('black_box_link_text'),
-            FieldPanel('black_box_link_url'),
+            FieldPanel('black_box_link'),
         ], heading="Bottom Area"),
     ]
diff --git a/app/get_involved/templates/get_involved/get_involved_page.html b/app/get_involved/templates/get_involved/get_involved_page.html
index 7343149..9d9f8b6 100644
--- a/app/get_involved/templates/get_involved/get_involved_page.html
+++ b/app/get_involved/templates/get_involved/get_involved_page.html
@@ -12,7 +12,7 @@
 {% block content %}
     {% include "ui/components/BasePageHeader.html" with title=page.title image=page.header_image %}
     <div class="my-10">
-        {% include "ui/components/sections/BaseSectionWithImage.html" with title=page.partner_with_us_title image=page.partner_with_us_image imageright=True title_underline=True red_button=True button_text=page.partner_with_us_button_text button_link=page.partner_with_us_button_link description=page.partner_with_us_description imagenotwide=True imagebottom=True%}
+        {% include "ui/components/sections/BaseSectionWithImage.html" with title=page.partner_with_us_title image=page.partner_with_us_image imageright=True title_underline=True red_button=True button_text=page.partner_with_us_button_text button_link=page.partner_with_us_button_url description=page.partner_with_us_description imagenotwide=True imagebottom=True%}
     </div>
 
     <div class="bg-hot-off-white py-20 my-20">
@@ -21,15 +21,15 @@
                 {% include "ui/components/TitleWithUnderline.html" with title=page.get_involved_community_title %}
                 <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 my-10">
                     {% for panel in page.get_involved_large_panels %}
-                        {% include "ui/components/misc_panels/LinkBlockWithImage.html" with title=panel.value.title image=panel.value.image description=panel.value.description linktext=panel.value.link_text linkurl=panel.value.link_url %}
+                        {% include "ui/components/misc_panels/LinkBlockWithImage.html" with title=panel.value.title image=panel.value.image description=panel.value.description linktext=panel.value.link_text linkurl=panel.value.link %}
                     {% endfor %}
                 </div>
 
                 <div class="my-20">
-                    {% include "ui/components/dogear_boxes/DogearAnyColourLong.html" with title=page.dogear_box_title linktext=page.dogear_box_link_text linkurl=page.dogear_box_link_url textcolour="black" colour="var(--hot-light-grey)" arrowcolour="black" %}
+                    {% include "ui/components/dogear_boxes/DogearAnyColourLong.html" with title=page.dogear_box_title linktext=page.dogear_box_link_text linkurl=page.dogear_box_link textcolour="black" colour="var(--hot-light-grey)" arrowcolour="black" %}
                 </div>
 
-                {% include "ui/components/FlexTitleWithLink.html" with title=page.events_title linktext=page.view_all_events_text linkurl=page.view_all_events_link class="my-4" %}
+                {% include "ui/components/FlexTitleWithLink.html" with title=page.events_title linktext=page.view_all_events_text linkurl=page.view_all_events_url class="my-4" %}
                 <div class="mt-8 md:mt-0 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 md:[&_div:nth-child(3)]:hidden lg:[&_div:nth-child(3)]:block [&_.image-hide-small]:hidden md:[&_.image-hide-small]:block">
                     {% for event in page.events %}
                         {% include "ui/components/events/EventPreviewBlockEvent.html" with event=event.value showimage=True %}
@@ -39,11 +39,11 @@
         </div>
     </div>
 
-    <div class="max-w-7xl mx-auto">
+    <div class="max-w-7xl mx-auto mb-20">
         <div class="px-6 md:px-10">
             {% include "ui/components/TitleWithUnderline.html" with title=page.join_us_title %}
 
-            <div class="mt-8 md:mt-4 mb-20 grid grid-cols-1 lg:grid-cols-3 gap-8">
+            <div class="mt-8 mb-20 grid grid-cols-1 lg:grid-cols-3 gap-8">
                 {% for panel in page.join_us_panels %}
                     {% include "ui/components/misc_panels/PagePreviewWithTabletDescription.html" with image=panel.value.image page=panel.value.page tablet_description=panel.value.tablet_description read_more_text=page.join_us_panel_read_more %}
                 {% endfor %}
@@ -51,10 +51,10 @@
 
             <div class="grid grid-cols-1 md:grid-cols-2 gap-8 text-white my-10">
                 <div>
-                    {% include "ui/components/dogear_boxes/DogearRed.html" with title=page.red_box_title linktext=page.red_box_link_text linkurl=page.red_box_link_url %}
+                    {% include "ui/components/dogear_boxes/DogearRed.html" with title=page.red_box_title linktext=page.red_box_link_text linkurl=page.red_box_link %}
                 </div>
                 <div>
-                    {% include "ui/components/dogear_boxes/DogearBlack.html" with title=page.black_box_title linktext=page.black_box_link_text linkurl=page.black_box_link_url %}
+                    {% include "ui/components/dogear_boxes/DogearBlack.html" with title=page.black_box_title linktext=page.black_box_link_text linkurl=page.black_box_link %}
                 </div>
             </div>
         </div>
diff --git a/app/impact_areas/migrations/0021_remove_impactareaspage_black_dogear_box_link_url_and_more.py b/app/impact_areas/migrations/0021_remove_impactareaspage_black_dogear_box_link_url_and_more.py
new file mode 100644
index 0000000..cc23f63
--- /dev/null
+++ b/app/impact_areas/migrations/0021_remove_impactareaspage_black_dogear_box_link_url_and_more.py
@@ -0,0 +1,48 @@
+# Generated by Django 4.2.7 on 2024-09-16 21:16
+
+from django.db import migrations, models
+import wagtail.blocks
+import wagtail.documents.blocks
+import wagtail.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('impact_areas', '0020_alter_individualimpactareapage_use_cases'),
+    ]
+
+    operations = [
+        migrations.RemoveField(
+            model_name='impactareaspage',
+            name='black_dogear_box_link_url',
+        ),
+        migrations.RemoveField(
+            model_name='impactareaspage',
+            name='red_dogear_box_link_url',
+        ),
+        migrations.RemoveField(
+            model_name='impactareaspage',
+            name='view_all_projects_link',
+        ),
+        migrations.AddField(
+            model_name='impactareaspage',
+            name='black_dogear_box_link',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock())], blank=True, use_json_field=True),
+        ),
+        migrations.AddField(
+            model_name='impactareaspage',
+            name='learn_more_text',
+            field=models.CharField(default='Learn more'),
+        ),
+        migrations.AddField(
+            model_name='impactareaspage',
+            name='red_dogear_box_link',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock())], blank=True, use_json_field=True),
+        ),
+        migrations.AddField(
+            model_name='impactareaspage',
+            name='view_all_projects_url',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock())], blank=True, use_json_field=True),
+        ),
+    ]
diff --git a/app/impact_areas/models.py b/app/impact_areas/models.py
index 620b938..145c72d 100644
--- a/app/impact_areas/models.py
+++ b/app/impact_areas/models.py
@@ -118,23 +118,25 @@ class ImpactAreasPage(Page):
     intro = RichTextField(blank=True)
     description = RichTextField(blank=True)
 
+    learn_more_text = models.CharField(default="Learn more")
+
     # > IMPACT AREA SHARED FIELDS
     use_cases_title = models.CharField(default="Use Cases")
 
     projects_title = models.CharField(default="Projects")
     view_all_projects_text = models.CharField(default="View all projects")
-    view_all_projects_link = models.URLField(blank=True)
+    view_all_projects_url = StreamField(LinkOrPageBlock(), use_json_field=True, blank=True)
     load_more_projects_text = models.CharField(default="Load More Projects")
 
     explore_impact_areas_text = models.CharField(default="Explore Other Impact Areas")
 
     red_dogear_box_title = models.CharField(default="Learn more about Tools & Resources and Data Access")
     red_dogear_box_link_text = models.CharField(default="View Tools & Resources")
-    red_dogear_box_link_url = models.URLField(blank=True)
+    red_dogear_box_link = StreamField(LinkOrPageBlock(), use_json_field=True, blank=True)
 
     black_dogear_box_title = models.CharField(default="Check many opportunities to get involved with HOT!")
     black_dogear_box_link_text = models.CharField(default="Get Involved with HOT")
-    black_dogear_box_link_url = models.URLField(blank=True)
+    black_dogear_box_link = StreamField(LinkOrPageBlock(), use_json_field=True, blank=True)
 
     content_panels = Page.content_panels + [
         MultiFieldPanel([
@@ -143,6 +145,7 @@ class ImpactAreasPage(Page):
         ], heading="Header section"),
         FieldPanel('intro'),
         FieldPanel('description'),
+        FieldPanel('learn_more_text'),
         MultiFieldPanel([
             MultiFieldPanel([
                 FieldPanel('use_cases_title'),
@@ -150,17 +153,17 @@ class ImpactAreasPage(Page):
             MultiFieldPanel([
                 FieldPanel('projects_title'),
                 FieldPanel('view_all_projects_text'),
-                FieldPanel('view_all_projects_link'),
+                FieldPanel('view_all_projects_url'),
                 FieldPanel('load_more_projects_text'),
             ], heading="Projects"),
             FieldPanel('explore_impact_areas_text'),
             MultiFieldPanel([
                 FieldPanel('red_dogear_box_title'),
                 FieldPanel('red_dogear_box_link_text'),
-                FieldPanel('red_dogear_box_link_url'),
+                FieldPanel('red_dogear_box_link'),
                 FieldPanel('black_dogear_box_title'),
                 FieldPanel('black_dogear_box_link_text'),
-                FieldPanel('black_dogear_box_link_url'),
+                FieldPanel('black_dogear_box_link'),
             ], heading="Dogear Boxes"),
         ], heading="Impact Area Shared Fields"),
     ]
diff --git a/app/impact_areas/templates/impact_areas/impact_areas_page.html b/app/impact_areas/templates/impact_areas/impact_areas_page.html
index f31ba28..d48d65d 100644
--- a/app/impact_areas/templates/impact_areas/impact_areas_page.html
+++ b/app/impact_areas/templates/impact_areas/impact_areas_page.html
@@ -25,7 +25,7 @@
     
     <div class="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-8 px-6 md:px-10 mt-6 mb-10">
         {% for child in page.get_children %}
-            {% include "ui/components/impact_areas/ImpactAreaPreviewBlock.html" with ia=child.specific %}
+            {% include "ui/components/impact_areas/ImpactAreaPreviewBlock.html" with ia=child.specific learn_more_text=page.learn_more_text %}
         {% endfor %}
     </div>
 {% endblock %}
\ No newline at end of file
diff --git a/app/impact_areas/templates/impact_areas/individual_impact_area_page.html b/app/impact_areas/templates/impact_areas/individual_impact_area_page.html
index 80ab398..c03f604 100644
--- a/app/impact_areas/templates/impact_areas/individual_impact_area_page.html
+++ b/app/impact_areas/templates/impact_areas/individual_impact_area_page.html
@@ -34,7 +34,7 @@
 
             {% comment %} PROJECTS {% endcomment %}
             <div class="my-20" id="projects-section">
-                {% include "ui/components/FlexTitleWithLink.html" with title=page.get_parent.specific.projects_title linktext=page.get_parent.specific.view_all_projects_text linkurl=page.view_all_projects_link titleclass="text-h2" %}
+                {% include "ui/components/FlexTitleWithLink.html" with title=page.get_parent.specific.projects_title linktext=page.get_parent.specific.view_all_projects_text linkurl=page.get_parent.specific.view_all_projects_url titleclass="text-h2" %}
                 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mt-10" id="projects-list">
                     {% for project in projects %}
                         {% include "ui/components/projects/ProjectPreviewBlockNews.html" with project=project showimage=True %}
diff --git a/app/job_opportunities/__init__.py b/app/job_opportunities/__init__.py
new file mode 100644
index 0000000..e69de29
diff --git a/app/job_opportunities/admin.py b/app/job_opportunities/admin.py
new file mode 100644
index 0000000..8c38f3f
--- /dev/null
+++ b/app/job_opportunities/admin.py
@@ -0,0 +1,3 @@
+from django.contrib import admin
+
+# Register your models here.
diff --git a/app/job_opportunities/apps.py b/app/job_opportunities/apps.py
new file mode 100644
index 0000000..95f6fef
--- /dev/null
+++ b/app/job_opportunities/apps.py
@@ -0,0 +1,6 @@
+from django.apps import AppConfig
+
+
+class JobOpportunitiesConfig(AppConfig):
+    default_auto_field = 'django.db.models.BigAutoField'
+    name = 'app.job_opportunities'
diff --git a/app/job_opportunities/migrations/0001_initial.py b/app/job_opportunities/migrations/0001_initial.py
new file mode 100644
index 0000000..4bc2842
--- /dev/null
+++ b/app/job_opportunities/migrations/0001_initial.py
@@ -0,0 +1,47 @@
+# Generated by Django 4.2.7 on 2024-09-24 21:19
+
+from django.db import migrations, models
+import django.db.models.deletion
+import wagtail.blocks
+import wagtail.documents.blocks
+import wagtail.fields
+
+
+class Migration(migrations.Migration):
+
+    initial = True
+
+    dependencies = [
+        ('wagtailimages', '0025_alter_image_file_alter_rendition_file'),
+        ('wagtailcore', '0089_log_entry_data_json_null_to_object'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='JobOpportunitiesPage',
+            fields=[
+                ('page_ptr', models.OneToOneField(auto_created=True, on_delete=django.db.models.deletion.CASCADE, parent_link=True, primary_key=True, serialize=False, to='wagtailcore.page')),
+                ('header_text', wagtail.fields.RichTextField(blank=True)),
+                ('intro', wagtail.fields.RichTextField(blank=True)),
+                ('description', wagtail.fields.RichTextField(blank=True)),
+                ('positions_title', models.CharField(default='Open Positions')),
+                ('sidebar_block_text', wagtail.fields.RichTextField(blank=True)),
+                ('rfp_banner_title', models.CharField(default='Request for Proposals')),
+                ('rfp_banner_description', wagtail.fields.RichTextField(blank=True)),
+                ('rfp_banner_button_text', models.CharField(default='View all request for proposals')),
+                ('rfp_banner_button_link', wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock())], blank=True, use_json_field=True)),
+                ('red_box_title', models.CharField(default='Join a working group')),
+                ('red_box_link_text', models.CharField(default='Working Groups')),
+                ('red_box_link_url', wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock())], blank=True, use_json_field=True)),
+                ('black_box_title', models.CharField(default='Contact a mapping community')),
+                ('black_box_link_text', models.CharField(default='Community Contact')),
+                ('black_box_link_url', wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock())], blank=True, use_json_field=True)),
+                ('header_image', models.ForeignKey(blank=True, help_text='Header image', null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='+', to='wagtailimages.image')),
+                ('rfp_banner_image', models.ForeignKey(blank=True, help_text='RFP banner image', null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='+', to='wagtailimages.image')),
+            ],
+            options={
+                'abstract': False,
+            },
+            bases=('wagtailcore.page',),
+        ),
+    ]
diff --git a/app/job_opportunities/migrations/0002_jobopportunitiespage_black_box_description_and_more.py b/app/job_opportunities/migrations/0002_jobopportunitiespage_black_box_description_and_more.py
new file mode 100644
index 0000000..bb8de99
--- /dev/null
+++ b/app/job_opportunities/migrations/0002_jobopportunitiespage_black_box_description_and_more.py
@@ -0,0 +1,44 @@
+# Generated by Django 4.2.7 on 2024-09-24 21:29
+
+from django.db import migrations, models
+import wagtail.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('job_opportunities', '0001_initial'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='jobopportunitiespage',
+            name='black_box_description',
+            field=wagtail.fields.RichTextField(blank=True),
+        ),
+        migrations.AddField(
+            model_name='jobopportunitiespage',
+            name='red_box_description',
+            field=wagtail.fields.RichTextField(blank=True),
+        ),
+        migrations.AlterField(
+            model_name='jobopportunitiespage',
+            name='black_box_link_text',
+            field=models.CharField(default='Learn the benefits of working for HOT'),
+        ),
+        migrations.AlterField(
+            model_name='jobopportunitiespage',
+            name='black_box_title',
+            field=models.CharField(default='Work Culture & Benefits'),
+        ),
+        migrations.AlterField(
+            model_name='jobopportunitiespage',
+            name='red_box_link_text',
+            field=models.CharField(default='Salary Framework'),
+        ),
+        migrations.AlterField(
+            model_name='jobopportunitiespage',
+            name='red_box_title',
+            field=models.CharField(default='HOT Salary Framework'),
+        ),
+    ]
diff --git a/app/job_opportunities/migrations/__init__.py b/app/job_opportunities/migrations/__init__.py
new file mode 100644
index 0000000..e69de29
diff --git a/app/job_opportunities/models.py b/app/job_opportunities/models.py
new file mode 100644
index 0000000..2a0f55b
--- /dev/null
+++ b/app/job_opportunities/models.py
@@ -0,0 +1,83 @@
+from django.db import models
+from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger
+
+from wagtail.admin.panels import FieldPanel, MultiFieldPanel
+from wagtail.fields import RichTextField, StreamField
+from wagtail.blocks import CharBlock, StreamBlock, StructBlock, URLBlock, RichTextBlock, PageChooserBlock, EmailBlock
+from wagtail.images.blocks import ImageChooserBlock
+from wagtail.models import Page
+from wagtail.documents.blocks import DocumentChooserBlock
+from wagtail.contrib.table_block.blocks import TableBlock
+
+from app.core.models import LinkOrPageBlock
+
+
+class JobOpportunitiesPage(Page):
+    max_count = 1
+
+    header_image = models.ForeignKey(
+        "wagtailimages.Image",
+        null=True,
+        blank=True,
+        on_delete=models.SET_NULL,
+        related_name="+",
+        help_text="Header image"
+    )
+    header_text = RichTextField(blank=True)
+
+    intro = RichTextField(blank=True)
+    description = RichTextField(blank=True)
+    positions_title = models.CharField(default="Open Positions")
+    sidebar_block_text = RichTextField(blank=True)
+
+    rfp_banner_image = models.ForeignKey(
+        "wagtailimages.Image",
+        null=True,
+        blank=True,
+        on_delete=models.SET_NULL,
+        related_name="+",
+        help_text="RFP banner image"
+    )
+    rfp_banner_title = models.CharField(default="Request for Proposals")
+    rfp_banner_description = RichTextField(blank=True)
+    rfp_banner_button_text = models.CharField(default="View all request for proposals")
+    rfp_banner_button_link = StreamField(LinkOrPageBlock(), use_json_field=True, blank=True)
+
+    red_box_title = models.CharField(default="HOT Salary Framework")
+    red_box_description = RichTextField(blank=True)
+    red_box_link_text = models.CharField(default="Salary Framework")
+    red_box_link_url = StreamField(LinkOrPageBlock(), use_json_field=True, blank=True)
+    black_box_title = models.CharField(default="Work Culture & Benefits")
+    black_box_description = RichTextField(blank=True)
+    black_box_link_text = models.CharField(default="Learn the benefits of working for HOT")
+    black_box_link_url = StreamField(LinkOrPageBlock(), use_json_field=True, blank=True)
+
+    content_panels = Page.content_panels + [
+        MultiFieldPanel([
+            FieldPanel('header_image'),
+            FieldPanel('header_text'),
+        ], heading="Header"),
+        MultiFieldPanel([
+            FieldPanel('intro'),
+            FieldPanel('description'),
+            FieldPanel('positions_title'),
+            FieldPanel('sidebar_block_text'),
+        ], heading="Main Body"),
+        MultiFieldPanel([
+            FieldPanel('rfp_banner_image'),
+            FieldPanel('rfp_banner_title'),
+            FieldPanel('rfp_banner_description'),
+            FieldPanel('rfp_banner_button_text'),
+            FieldPanel('rfp_banner_button_link'),
+        ], heading="RFP Banner"),
+        MultiFieldPanel([
+            FieldPanel('red_box_title'),
+            FieldPanel('red_box_description'),
+            FieldPanel('red_box_link_text'),
+            FieldPanel('red_box_link_url'),
+            FieldPanel('black_box_title'),
+            FieldPanel('black_box_description'),
+            FieldPanel('black_box_link_text'),
+            FieldPanel('black_box_link_url'),
+        ], heading="Dogear Box"),
+    ]
diff --git a/app/job_opportunities/templates/job_opportunities/components/AsideBlock.html b/app/job_opportunities/templates/job_opportunities/components/AsideBlock.html
new file mode 100644
index 0000000..0035e67
--- /dev/null
+++ b/app/job_opportunities/templates/job_opportunities/components/AsideBlock.html
@@ -0,0 +1,4 @@
+{% load wagtailcore_tags %}
+<div class="bg-hot-off-white p-6 md:px-10 lg:px-6 font-bold text-h3 [&_a]:underline [&_a:hover]:text-hot-red [&_a]:transition [&_a]:duration-100">
+    {{page.sidebar_block_text|richtext}}
+</div>
\ No newline at end of file
diff --git a/app/job_opportunities/templates/job_opportunities/components/BambooHRScript.html b/app/job_opportunities/templates/job_opportunities/components/BambooHRScript.html
new file mode 100644
index 0000000..71448db
--- /dev/null
+++ b/app/job_opportunities/templates/job_opportunities/components/BambooHRScript.html
@@ -0,0 +1,104 @@
+<script>
+(function() {
+
+	//add css file to dom so IE8 recognizes it
+	//document.write('<link href="https://hotosm.bamboohr.com/css/jobs-embed.css" rel="stylesheet" />');
+
+	var divId="BambooHR-ATS";
+	var el=document.getElementById(divId);
+	if(!el) {
+		document.write("<div id=\""+divId+"\"></div>");
+	}
+
+	var xmlhttp;
+	var ieFlag = 0;
+	if (('XDomainRequest' in window && window.XDomainRequest !== null) && document.documentMode < 10) {
+		xmlhttp=new XDomainRequest();
+		ieFlag = 1;
+	} else if (window.XMLHttpRequest) {
+		xmlhttp=new XMLHttpRequest();
+	} else {
+		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
+	}
+
+	var embedUrl = "https://hotosm.bamboohr.com/jobs/embed2.php";
+
+	var departmentId = "0";
+
+	if (departmentId) {
+		embedUrl += '?departmentId=' + encodeURIComponent(departmentId);
+	}
+
+	document.addEventListener('readystatechange', function(event) {
+		if (event.target.readyState === "complete") {
+			if (ieFlag == 1) { //needed for IE9 CORS
+				xmlhttp.onload = loadd;
+				xmlhttp.open("GET",embedUrl);
+				xmlhttp.send();
+			} else {
+				xmlhttp.onreadystatechange=function() {
+					if(xmlhttp.readyState==4 && xmlhttp.status==200) {
+
+						var content = xmlhttp.responseText;
+						var footerId="BambooHR-Footer";
+						var fel=document.getElementById(footerId);
+
+						el=document.getElementById(divId);
+
+						if(el && !fel) {
+							content += "<div id=\"BambooHR-Footer\">Powered by <a href=\"http://www.bamboohr.com\" target=\"_blank\" rel=\"external\"><img src=\"https://resources.bamboohr.com/images/footer-logo.png\" alt=\"BambooHR - HR software\"/></a></div>";
+                            content += `<ul class="BambooHR-ATS-Department-List">
+							<li id="bhrDepartmentID_18500" class="BambooHR-ATS-Department-Item">
+					<div id="department_18500" class="BambooHR-ATS-Department-Header">
+						Community
+					</div>
+					<ul class="BambooHR-ATS-Jobs-List">
+
+													<li id="bhrPositionID_124" class="BambooHR-ATS-Jobs-Item"><a href="//web.archive.org/web/20230313193508/https://hotosm.bamboohr.com/careers/124">Learning, Monitoring &amp; Evaluation Specialist [MERL] East &amp; Southern Africa Open Mapping Hub -REMOTE             </a><span class="BambooHR-ATS-Location">Maputo, Maputo</span></li>
+											</ul>
+				</li>
+							<li id="bhrDepartmentID_18473" class="BambooHR-ATS-Department-Item">
+					<div id="department_18473" class="BambooHR-ATS-Department-Header">
+						Leadership
+					</div>
+					<ul class="BambooHR-ATS-Jobs-List">
+
+													<li id="bhrPositionID_128" class="BambooHR-ATS-Jobs-Item"><a href="//web.archive.org/web/20230313193508/https://hotosm.bamboohr.com/careers/128">Executive Director - REMOTE</a><span class="BambooHR-ATS-Location">Remote, District of Columbia</span></li>
+											</ul>
+				</li>
+							<li id="bhrDepartmentID_18913" class="BambooHR-ATS-Department-Item">
+					<div id="department_18913" class="BambooHR-ATS-Department-Header">
+						Philantrophy
+					</div>
+					<ul class="BambooHR-ATS-Jobs-List">
+
+													<li id="bhrPositionID_127" class="BambooHR-ATS-Jobs-Item"><a href="//web.archive.org/web/20230313193508/https://hotosm.bamboohr.com/careers/127">Digital Communications Strategist Manager- REMOTE</a><span class="BambooHR-ATS-Location"></span></li>
+											</ul>
+				</li>
+					</ul>`
+						}
+
+						if(el) el.innerHTML=content;
+					}
+				}
+
+				xmlhttp.open("GET",embedUrl,true);
+				xmlhttp.send();
+			}
+		}
+	});
+
+	function loadd() { //needed for IE9 CORS
+		var content = xmlhttp.responseText;
+		var footerId="BambooHR-Footer";
+		var fel=document.getElementById(footerId);
+
+		el=document.getElementById(divId);
+
+		if(el && !fel) {
+			content += "<div id=\"BambooHR-Footer\">Powered by <a href=\"http://www.bamboohr.com\" target=\"_blank\" rel=\"external\"><img src=\"https://resources.bamboohr.com/images/footer-logo.png\" alt=\"BambooHR - HR software\"/></a></div>";
+		}
+		el.innerHTML=content;
+	}
+}) ();
+</script>
\ No newline at end of file
diff --git a/app/job_opportunities/templates/job_opportunities/job_opportunities_page.html b/app/job_opportunities/templates/job_opportunities/job_opportunities_page.html
new file mode 100644
index 0000000..adc9d82
--- /dev/null
+++ b/app/job_opportunities/templates/job_opportunities/job_opportunities_page.html
@@ -0,0 +1,60 @@
+{% extends "base.html" %}
+{% load static %}
+{% load wagtailcore_tags %}
+{% load wagtailimages_tags %}
+{% load compress %}
+{% block body_class %}template-jobopportunitiespage{% endblock %}
+{% block extra_css %}
+    {% compress css %}
+    {% endcompress css %}
+{% endblock extra_css %}
+
+{% block content %}
+    {% include "ui/components/PageHeaderWithBlur.html" with title=page.title subtitle=page.header_text image=page.header_image full_length=True smaller=True %}
+    
+    <div class="max-w-7xl mx-auto my-10">
+        <div class="px-6 md:px-10">
+            <div class="lg:grid lg:grid-cols-3 gap-8">
+                <div class="lg:col-span-2">
+                    <div class="text-intro font-bold mb-4">
+                        {{page.intro|richtext}}
+                    </div>
+                    <div class="base-article-m [&_a]:font-bold mb-10">
+                        {{page.description|richtext}}
+                    </div>
+
+                    {% include "ui/components/TitleWithUnderline.html" with title=page.positions_title %}
+                    <div class="grid gap-8 mt-8" id="BambooHR-ATS"></div>
+                </div>
+                <div class="hidden lg:block">
+                    {% include "./components/AsideBlock.html" %}
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="mt-10">
+        {% include "ui/components/sections/NavyBackgroundWithImage.html" with image=page.rfp_banner_image title=page.rfp_banner_title description=page.rfp_banner_description button_text=page.rfp_banner_button_text button_link=page.rfp_banner_button_link imageright=True %}
+    </div>
+
+    <div class="max-w-7xl mx-auto my-10">
+        <div class="px-6 md:px-10">
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-8 text-white my-20">
+                <div>
+                    {% include "ui/components/dogear_boxes/DogearRed.html" with title=page.red_box_title description=page.red_box_description linktext=page.red_box_link_text linkurl=page.red_box_link_url %}
+                </div>
+                <div>
+                    {% include "ui/components/dogear_boxes/DogearBlack.html" with title=page.black_box_title description=page.black_box_description linktext=page.black_box_link_text linkurl=page.black_box_link_url %}
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="bg-hot-off-white lg:hidden">
+        <div class="max-w-7xl mx-auto my-10">
+            {% include "./components/AsideBlock.html" %}
+        </div>
+    </div>
+
+    {% include "./components/BambooHRScript.html" %}
+{% endblock %}
\ No newline at end of file
diff --git a/app/job_opportunities/tests.py b/app/job_opportunities/tests.py
new file mode 100644
index 0000000..7ce503c
--- /dev/null
+++ b/app/job_opportunities/tests.py
@@ -0,0 +1,3 @@
+from django.test import TestCase
+
+# Create your tests here.
diff --git a/app/job_opportunities/views.py b/app/job_opportunities/views.py
new file mode 100644
index 0000000..91ea44a
--- /dev/null
+++ b/app/job_opportunities/views.py
@@ -0,0 +1,3 @@
+from django.shortcuts import render
+
+# Create your views here.
diff --git a/app/mapping_hubs/migrations/0019_remove_individualmappinghubpage_partners_and_more.py b/app/mapping_hubs/migrations/0019_remove_individualmappinghubpage_partners_and_more.py
new file mode 100644
index 0000000..364405e
--- /dev/null
+++ b/app/mapping_hubs/migrations/0019_remove_individualmappinghubpage_partners_and_more.py
@@ -0,0 +1,25 @@
+# Generated by Django 4.2.7 on 2024-09-17 19:56
+
+import app.core.models
+from django.db import migrations
+import wagtail.fields
+import wagtail.snippets.blocks
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('mapping_hubs', '0018_alter_individualmappinghubpage_contact_section_links_and_more'),
+    ]
+
+    operations = [
+        migrations.RemoveField(
+            model_name='individualmappinghubpage',
+            name='partners',
+        ),
+        migrations.AddField(
+            model_name='individualmappinghubpage',
+            name='partner_list',
+            field=wagtail.fields.StreamField([('partner', wagtail.snippets.blocks.SnippetChooserBlock(app.core.models.Partner))], blank=True, null=True, use_json_field=True),
+        ),
+    ]
diff --git a/app/mapping_hubs/models.py b/app/mapping_hubs/models.py
index 5b96bde..944edfb 100644
--- a/app/mapping_hubs/models.py
+++ b/app/mapping_hubs/models.py
@@ -5,12 +5,13 @@
 from wagtail.models import Page
 from wagtail.fields import RichTextField, StreamField
 from wagtail.admin.panels import FieldPanel, MultiFieldPanel, PageChooserPanel
+from wagtail.snippets.blocks import SnippetChooserBlock
 from wagtail.blocks import CharBlock, StreamBlock, StructBlock, URLBlock, RichTextBlock, PageChooserBlock
 from modelcluster.fields import ParentalKey, ParentalManyToManyField
 
 from app.projects.models import IndividualProjectPage
 from app.ui.models import CarouselBlock
-from app.core.models import LinkOrPageBlock
+from app.core.models import LinkOrPageBlock, Partner
 
 
 class ContactLinkStructBlock(StructBlock):
@@ -197,7 +198,7 @@ def get_context(self, request):
 
     dogear_boxes = StreamField(DogearBoxBlock(), blank=True, use_json_field=True, help_text="These are, for example, the 'Grants' and 'Map and Chat Hour' boxes in the Asia-Pacific page. Please only add these in pairs of 2!")
 
-    partners = ParentalManyToManyField('core.Partner', blank=True)
+    partner_list = StreamField([('partner', SnippetChooserBlock(Partner))], use_json_field=True, null=True, blank=True)
 
     contact_section_description = RichTextField(blank=True)
     contact_section_links = StreamField(ContactLinkBlock(), blank=True, use_json_field=True)
@@ -238,7 +239,7 @@ def get_context(self, request):
         ], heading="Events"),
         FieldPanel('dogear_boxes'),
         MultiFieldPanel([
-            FieldPanel("partners", widget=forms.CheckboxSelectMultiple),
+            FieldPanel("partner_list"),
         ], heading="Partners"),
         MultiFieldPanel([
             FieldPanel('contact_section_description'),
diff --git a/app/mapping_hubs/templates/mapping_hubs/individual_mapping_hub_page.html b/app/mapping_hubs/templates/mapping_hubs/individual_mapping_hub_page.html
index 283e05f..8297b3d 100644
--- a/app/mapping_hubs/templates/mapping_hubs/individual_mapping_hub_page.html
+++ b/app/mapping_hubs/templates/mapping_hubs/individual_mapping_hub_page.html
@@ -54,7 +54,7 @@
                     {% include "ui/components/BaseLink.html" with linktext=page.get_parent.specific.partners_section_link_text linkurl=page.get_parent.specific.partners_section_link %}
                 </div>
             </div>
-            {% include "ui/components/partners/PartnerViewBlock.html" with partners=page.partners.all %}
+            {% include "ui/components/partners/PartnerViewBlock.html" with partners=page.partner_list %}
 
             {% comment %} DOGEAR BOXES SECTION (OPTIONAL) {% endcomment %}
             {% if page.dogear_boxes %}
diff --git a/app/members/templates/members/member_group_page.html b/app/members/templates/members/member_group_page.html
index 1dae6d2..68c5861 100644
--- a/app/members/templates/members/member_group_page.html
+++ b/app/members/templates/members/member_group_page.html
@@ -10,7 +10,7 @@
 {% endblock extra_css %}
 
 {% block content %}
-    {% include "ui/components/PageHeaderWithBlur.html" with title=page.title subtitle=page.intro image=page.header_image %}
+    {% include "ui/components/PageHeaderWithBlur.html" with title=page.title subtitle=page.intro image=page.header_image smaller=True %}
 
     <div class="max-w-7xl mx-auto px-6 md:px-10 my-10" x-data="{ params: new URLSearchParams((new URL(window.location.href)).search), activeParams: {} }">
         <div class="max-w-3xl">
diff --git a/app/misc/migrations/0026_salaryframeworkpage.py b/app/misc/migrations/0026_salaryframeworkpage.py
new file mode 100644
index 0000000..586240a
--- /dev/null
+++ b/app/misc/migrations/0026_salaryframeworkpage.py
@@ -0,0 +1,36 @@
+# Generated by Django 4.2.7 on 2024-09-23 22:52
+
+from django.db import migrations, models
+import django.db.models.deletion
+import wagtail.blocks
+import wagtail.contrib.table_block.blocks
+import wagtail.documents.blocks
+import wagtail.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('wagtailcore', '0089_log_entry_data_json_null_to_object'),
+        ('misc', '0025_alter_workforhotpage_work_culture_subtitle_and_more'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='SalaryFrameworkPage',
+            fields=[
+                ('page_ptr', models.OneToOneField(auto_created=True, on_delete=django.db.models.deletion.CASCADE, parent_link=True, primary_key=True, serialize=False, to='wagtailcore.page')),
+                ('intro', wagtail.fields.RichTextField(blank=True)),
+                ('body', wagtail.fields.StreamField([('text', wagtail.blocks.RichTextBlock()), ('table', wagtail.contrib.table_block.blocks.TableBlock())], blank=True, use_json_field=True)),
+                ('go_back_prefix_text', models.CharField(default='Go Back to', help_text="This text will be a prefix to the parent page of this current page, and the attached link will always go to the parent page; i.e., if this page is a child of the 'Work for HOT' page, and this field is 'Go Back to', the link will read 'Go Back to Work for HOT'.")),
+                ('sidebar_block_title', models.CharField(default="HOT's Journey through Salary Transparency")),
+                ('sidebar_block_description', wagtail.fields.RichTextField(blank=True)),
+                ('sidebar_block_button_text', models.CharField(default='Read More')),
+                ('sidebar_block_button_link', wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock())], blank=True, use_json_field=True)),
+            ],
+            options={
+                'abstract': False,
+            },
+            bases=('wagtailcore.page',),
+        ),
+    ]
diff --git a/app/misc/models.py b/app/misc/models.py
index ada21b7..a97decf 100644
--- a/app/misc/models.py
+++ b/app/misc/models.py
@@ -7,6 +7,7 @@
 from wagtail.images.blocks import ImageChooserBlock
 from wagtail.models import Page
 from wagtail.documents.blocks import DocumentChooserBlock
+from wagtail.contrib.table_block.blocks import TableBlock
 
 from app.core.models import LinkOrPageBlock
 
@@ -534,3 +535,33 @@ class LivingStrategyPage(Page):
         FieldPanel('downloads'),
         FieldPanel('description'),
     ]
+
+
+class SalaryFrameworkPage(Page):
+    max_count = 1
+
+    intro = RichTextField(blank=True)
+    body = StreamField([
+        ('text', RichTextBlock()),
+        ('table', TableBlock()),
+    ], use_json_field=True, blank=True)
+    go_back_prefix_text = models.CharField(default="Go Back to", help_text="This text will be a prefix to the parent page of this current page, and the attached link will always go to the parent page; i.e., if this page is a child of the 'Work for HOT' page, and this field is 'Go Back to', the link will read 'Go Back to Work for HOT'.")
+
+    sidebar_block_title = models.CharField(default="HOT's Journey through Salary Transparency")
+    sidebar_block_description = RichTextField(blank=True)
+    sidebar_block_button_text = models.CharField(default="Read More")
+    sidebar_block_button_link = StreamField(LinkOrPageBlock(), use_json_field=True, blank=True)
+
+    content_panels = Page.content_panels + [
+        MultiFieldPanel([
+            FieldPanel('intro'),
+            FieldPanel('body'),
+            FieldPanel('go_back_prefix_text'),
+        ]),
+        MultiFieldPanel([
+            FieldPanel('sidebar_block_title'),
+            FieldPanel('sidebar_block_description'),
+            FieldPanel('sidebar_block_button_text'),
+            FieldPanel('sidebar_block_button_link'),
+        ]),
+    ]
diff --git a/app/misc/templates/misc/code_of_conduct_page.html b/app/misc/templates/misc/code_of_conduct_page.html
index a921052..e173c46 100644
--- a/app/misc/templates/misc/code_of_conduct_page.html
+++ b/app/misc/templates/misc/code_of_conduct_page.html
@@ -3,7 +3,7 @@
 {% load wagtailcore_tags %}
 {% load wagtailimages_tags %}
 {% load compress %}
-{% block body_class %}template-dataprinciplespage{% endblock %}
+{% block body_class %}template-codeofconductpage{% endblock %}
 {% block extra_css %}
     {% compress css %}
     {% endcompress css %}
@@ -59,7 +59,7 @@ <h1 class="text-h2 font-bold">
                         <h1 class="font-bold text-h3 mb-8">
                             {{page.question_block_title}}
                         </h1>
-                        <a href="{{page.question_block_button_link}}">
+                        <a href="{%include 'ui/components/PageOrLinkHrefText.html' with linkurl=page.question_block_button_link%}">
                             {% include "components/branded_elements/button.html" with text=page.question_block_button_text %}
                         </a>
                     </div>
diff --git a/app/misc/templates/misc/contact_us_page.html b/app/misc/templates/misc/contact_us_page.html
index 5373360..a3fc9d7 100644
--- a/app/misc/templates/misc/contact_us_page.html
+++ b/app/misc/templates/misc/contact_us_page.html
@@ -13,8 +13,11 @@
     {% include "ui/components/BasePageHeader.html" with title=page.title image=page.header_image endinlarge=True full_length=True %}
     
     {% image page.body_background_image original as bg_p %}
-    <div style="background-image: url('{{bg_p.url}}');" class="bg-bottom bg-no-repeat">
-        <div class="max-w-7xl mx-auto mt-10">
+    <div class="grid">
+        <div class="row-start-1 col-start-1 flex items-end">
+            {% image page.body_background_image original class="w-full h-auto object-cover" %}
+        </div>
+        <div class="max-w-7xl mx-auto mt-10 row-start-1 col-start-1">
             <div class="px-6 md:px-10">
                 <div class="grid lg:grid-cols-3 gap-8">
                     <div>
diff --git a/app/misc/templates/misc/privacy_policy_page.html b/app/misc/templates/misc/privacy_policy_page.html
index 950f0dd..d96f855 100644
--- a/app/misc/templates/misc/privacy_policy_page.html
+++ b/app/misc/templates/misc/privacy_policy_page.html
@@ -3,7 +3,7 @@
 {% load wagtailcore_tags %}
 {% load wagtailimages_tags %}
 {% load compress %}
-{% block body_class %}template-dataprinciplespage{% endblock %}
+{% block body_class %}template-privacypolicypage{% endblock %}
 {% block extra_css %}
     {% compress css %}
     {% endcompress css %}
@@ -62,7 +62,7 @@ <h1 class="text-h2 font-bold">
                         <h1 class="font-bold text-h3 mb-8">
                             {{page.question_block_title}}
                         </h1>
-                        <a href="{{page.question_block_button_link}}">
+                        <a href="{%include 'ui/components/PageOrLinkHrefText.html' with linkurl=page.question_block_button_link%}">
                             {% include "components/branded_elements/button.html" with text=page.question_block_button_text %}
                         </a>
                     </div>
diff --git a/app/misc/templates/misc/salary_framework_page.html b/app/misc/templates/misc/salary_framework_page.html
new file mode 100644
index 0000000..75ad289
--- /dev/null
+++ b/app/misc/templates/misc/salary_framework_page.html
@@ -0,0 +1,53 @@
+{% extends "base.html" %}
+{% load static %}
+{% load wagtailcore_tags %}
+{% load wagtailimages_tags %}
+{% load compress %}
+{% block body_class %}template-salaryframeworkpage{% endblock %}
+{% block extra_css %}
+    {% compress css %}
+    {% endcompress css %}
+{% endblock extra_css %}
+
+{% block content %}
+    <div class="max-w-7xl mx-auto my-10">
+        <div class="px-6 md:px-10">
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+                <div class="lg:col-span-2">
+                    <h1 class="font-semibold text-h1 mb-8">
+                        {{page.title}}
+                    </h1>
+                    <div class="text-intro font-medium">
+                        {{page.intro|richtext}}
+                    </div>
+
+                    <div class="base-article-m">
+                        {% for section in page.body %}
+                            <div class="salary-framework-table">
+                                {% include_block section %}
+                            </div>
+                        {% endfor %}
+                    </div>
+                </div>
+
+                <div>
+                    <div class="bg-hot-off-white p-8 mt-4">
+                        <h1 class="font-bold text-h3 mb-2">
+                            {{page.sidebar_block_title}}
+                        </h1>
+                        <div class="mb-4">
+                            {{page.sidebar_block_description|richtext}}
+                        </div>
+                        <a href="{%include 'ui/components/PageOrLinkHrefText.html' with linkurl=page.sidebar_block_button_link%}">
+                            {% include "components/branded_elements/button.html" with text=page.sidebar_block_button_text %}
+                        </a>
+                    </div>
+                </div>
+            </div>
+
+            <p class="my-20 text-intro">
+                {% include "ui/components/BaseLink.html" with linktext=page.go_back_prefix_text|add:" "|add:page.get_parent.title linkurl=page.get_parent.url %}
+            </p>
+        </div>
+    </div>
+{% endblock %}
diff --git a/app/misc/templates/misc/working_groups_page.html b/app/misc/templates/misc/working_groups_page.html
index 8a15473..eb173b5 100644
--- a/app/misc/templates/misc/working_groups_page.html
+++ b/app/misc/templates/misc/working_groups_page.html
@@ -12,7 +12,7 @@
 {% block content %}
     {% include "ui/components/PageHeaderWithBlur.html" with title=page.title subtitle=page.intro image=page.header_image smaller=True %}
     
-    <div class="max-w-5xl mx-auto my-10">
+    <div class="max-w-5xl mx-auto mt-10 mb-20">
         <div class="px-6 md:px-10 grid gap-16">
             {% for group in page.working_groups %}
                 <div>
diff --git a/app/news/migrations/0021_remove_newsownerpage_view_all_news_url_and_more.py b/app/news/migrations/0021_remove_newsownerpage_view_all_news_url_and_more.py
new file mode 100644
index 0000000..9727625
--- /dev/null
+++ b/app/news/migrations/0021_remove_newsownerpage_view_all_news_url_and_more.py
@@ -0,0 +1,25 @@
+# Generated by Django 4.2.7 on 2024-09-23 17:43
+
+from django.db import migrations
+import wagtail.blocks
+import wagtail.documents.blocks
+import wagtail.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('news', '0020_newsownerpage_category_select_and_more'),
+    ]
+
+    operations = [
+        migrations.RemoveField(
+            model_name='newsownerpage',
+            name='view_all_news_url',
+        ),
+        migrations.AddField(
+            model_name='newsownerpage',
+            name='view_all_news_link',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock())], blank=True, use_json_field=True),
+        ),
+    ]
diff --git a/app/news/models.py b/app/news/models.py
index 0cd3bbb..9f54b7a 100644
--- a/app/news/models.py
+++ b/app/news/models.py
@@ -14,6 +14,8 @@
 from wagtail.snippets.models import register_snippet
 from wagtail.search import index
 
+from app.core.models import LinkOrPageBlock
+
 
 class NewsOwnerPage(Page):
     def get_context(self, request, *args, **kwargs):
@@ -76,7 +78,7 @@ def get_context(self, request, *args, **kwargs):
     related_projects_title = models.CharField(default="Related Projects")
     related_news_title = models.CharField(default="Related News")
     view_all_news_text = models.CharField(default="View all News")
-    view_all_news_url = models.URLField(blank=True)
+    view_all_news_link = StreamField(LinkOrPageBlock(), use_json_field=True, blank=True)
     news_read_more_text = models.CharField(default="Read More")
     categories_title = models.CharField(default="Categories")
     tags_title = models.CharField(default="Tags")
@@ -114,12 +116,12 @@ def get_context(self, request, *args, **kwargs):
                 FieldPanel('related_projects_title'),
                 FieldPanel('related_news_title'),
                 FieldPanel('view_all_news_text'),
-                FieldPanel('view_all_news_url'),
+                FieldPanel('view_all_news_link'),
                 FieldPanel('news_read_more_text'),
                 FieldPanel('categories_title'),
                 FieldPanel('tags_title'),
             ], heading="Sidebar"),
-        ], heading="Individual Project Page"),
+        ], heading="Individual News Page"),
     ]
 
 
diff --git a/app/news/templates/news/individual_news_page.html b/app/news/templates/news/individual_news_page.html
index dde0869..18c1efd 100644
--- a/app/news/templates/news/individual_news_page.html
+++ b/app/news/templates/news/individual_news_page.html
@@ -12,100 +12,110 @@
 {% block content %}
     <div class="max-w-7xl mx-auto">
         {% comment %} HEADER {% endcomment %}
-        <div class="base-article px-10 py-5">
-            <h1>{{ page.title }}</h1>
+        <div class="px-6 md:px-10 py-5">
+            <h1 class="font-bold text-h2">{{ page.title }}</h1>
             <p>
-                {{page.get_parent.specific.authors_posted_by_text}}
-                {% for author in page.authors %}
-                    <a href="{{author.value.url}}"><b class="text-black">{{author.value.title}}</b></a>{% if not forloop.last %}, {% endif %}
-                {% endfor %}
-                {{page.get_parent.specific.authors_posted_on_text}} {{ page.date }}
+                {% if page.authors %}
+                    {{page.get_parent.specific.authors_posted_by_text}}
+                    {% for author in page.authors %}
+                        <a href="{{author.value.url}}" class="text-black font-bold hover:underline">{{author.value.title}}</a>{% if not forloop.last %}, {% endif %}
+                    {% endfor %}
+                    {{page.get_parent.specific.authors_posted_on_text}}
+                {% endif %}
+                {{ page.date }}
             </p>
-        </div>
-
-        <div class="grid grid-cols-1 lg:grid-cols-3">
-            {% comment %} BODY {% endcomment %}
-            <div class="base-article-m px-10 py-5 col-span-2">
-                {% image page.image original class="pb-8" %}
-                <div class="text-intro">
-                    {{ page.intro|safe }}
-                </div>
-                {{ page.article_body }}
 
-                <div class="mt-20">
-                    {% include "ui/components/sharers/ShareSection.html" %}
-                </div>
-            </div>
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mt-8">
+                {% comment %} BODY {% endcomment %}
+                <div class="col-span-2">
+                    <div class="base-article-m">
+                        <div class="[&_img]:mt-0">
+                            {% image page.image original class="pb-8" %}
+                        </div>
 
-            {% comment %} SIDEBAR {% endcomment %}
-            <div class="px-10 py-5 sidebar [&>div]:my-12 [&_div:first-child_hr]:hidden [&_hr]:mb-8">
-                {% if page.related_projects%}
-                    <div>
-                        <hr />
-                        <h1 class="text-h2 font-bold mb-4">
-                            {{ page.get_parent.specific.related_projects_title }}
-                        </h1>
-                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-1 gap-4">
-                            {% with projects=page.related_projects %}
-                                {% for project in projects %}
-                                    {% include "ui/components/projects/ProjectPreviewBlockNews.html" with project=project.value %}
-                                {% endfor %}
-                            {% endwith %}
+                        <div class="text-intro">
+                            {{ page.intro|safe }}
                         </div>
+                        {{ page.article_body }}
                     </div>
-                {% endif %}
 
-                {% if page.related_news %}
-                    <div>
-                        <hr />
-                        <h1 class="text-h2 font-bold mb-4">
-                            {{ page.get_parent.specific.related_news_title }}
-                        </h1>
-                        <div class="[&_span]:text-black text-intro">
-                            {% include "ui/components/BaseLink.html" with linkurl="#" linktext=page.get_parent.specific.view_all_news_text %}
+                    <div class="mt-20">
+                        {% include "ui/components/sharers/ShareSection.html" %}
+                    </div>
+                </div>
+
+                {% comment %} SIDEBAR {% endcomment %}
+                <div class="sidebar [&>div]:my-12 [&_div:first-child_hr]:hidden [&_hr]:mb-8">
+                    {% if page.related_projects%}
+                        <div>
+                            <hr />
+                            <h1 class="text-h2 font-bold mb-4">
+                                {{ page.get_parent.specific.related_projects_title }}
+                            </h1>
+                            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-1 gap-4">
+                                {% with projects=page.related_projects %}
+                                    {% for project in projects %}
+                                        {% include "ui/components/projects/ProjectPreviewBlockNews.html" with project=project.value %}
+                                    {% endfor %}
+                                {% endwith %}
+                            </div>
                         </div>
-                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-1 gap-4 mt-4">
-                            {% with allnews=page.related_news %}
-                                {% for news in allnews %}
-                                    {% include "ui/components/news/NewsPreviewBlockNews.html" with news=news.value readmoretext=page.get_parent.specific.read_more_text %}
-                                {% endfor %}
-                            {% endwith %}
+                    {% endif %}
+
+                    {% if page.related_news %}
+                        <div>
+                            <hr />
+                            <h1 class="text-h2 font-bold mb-4">
+                                {{ page.get_parent.specific.related_news_title }}
+                            </h1>
+                            <div class="[&_span]:text-black text-intro">
+                                {% include "ui/components/BaseLink.html" with linkurl=page.get_parent.specific.view_all_news_link linktext=page.get_parent.specific.view_all_news_text %}
+                            </div>
+                            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-1 gap-4 mt-4">
+                                {% with allnews=page.related_news %}
+                                    {% for news in allnews %}
+                                        {% include "ui/components/news/NewsPreviewBlockNews.html" with news=news.value readmoretext=page.get_parent.specific.read_more_text %}
+                                    {% endfor %}
+                                {% endwith %}
+                            </div>
                         </div>
-                    </div>
-                {% endif %}
+                    {% endif %}
 
-                {% if page.categories.all %}
-                    <div>
-                        <hr />
-                        <h1 class="text-h2 font-bold mb-4">
-                            {{ page.get_parent.specific.categories_title }}
-                        </h1>
-                        <p>
-                            {% with categories=page.categories.all %}
-                                {% for category in categories %}
-                                    <a href="#" class="text-hot-red hover:underline">{{ category.category_name }}</a>{% if not forloop.last %}, {% endif %}
-                                {% endfor %}
-                            {% endwith %}
-                        </p>
-                    </div>
-                {% endif %}
+                    {% if page.categories.all %}
+                        <div>
+                            <hr />
+                            <h1 class="text-h2 font-bold mb-4">
+                                {{ page.get_parent.specific.categories_title }}
+                            </h1>
+                            <p>
+                                {% with categories=page.categories.all %}
+                                    {% for category in categories %}
+                                        <a href="#" class="text-hot-red hover:underline">{{ category.category_name }}</a>{% if not forloop.last %}, {% endif %}
+                                    {% endfor %}
+                                {% endwith %}
+                            </p>
+                        </div>
+                    {% endif %}
 
-                {% if page.tags.all %}
-                    <div>
-                        <hr />
-                        <h1 class="text-h2 font-bold mb-4">
-                            {{ page.get_parent.specific.tags_title }}
-                        </h1>
-                        <p>
-                            {% with tags=page.tags.all %}
-                                {% for tag in tags %}
-                                    <a href="#" class="text-hot-red hover:underline">{{ tag }}</a>{% if not forloop.last %}, {% endif %}
-                                {% endfor %}
-                            {% endwith %}
-                        </p>
-                    </div>
-                {% endif %}
+                    {% if page.tags.all %}
+                        <div>
+                            <hr />
+                            <h1 class="text-h2 font-bold mb-4">
+                                {{ page.get_parent.specific.tags_title }}
+                            </h1>
+                            <p>
+                                {% with tags=page.tags.all %}
+                                    {% for tag in tags %}
+                                        <a href="#" class="text-hot-red hover:underline">{{ tag }}</a>{% if not forloop.last %}, {% endif %}
+                                    {% endfor %}
+                                {% endwith %}
+                            </p>
+                        </div>
+                    {% endif %}
+                </div>
             </div>
         </div>
+
+        
     </div>
 {% endblock %}
\ No newline at end of file
diff --git a/app/partners/migrations/0012_ourpartnerspage_filter_by_hub_and_more.py b/app/partners/migrations/0012_ourpartnerspage_filter_by_hub_and_more.py
new file mode 100644
index 0000000..10118e4
--- /dev/null
+++ b/app/partners/migrations/0012_ourpartnerspage_filter_by_hub_and_more.py
@@ -0,0 +1,23 @@
+# Generated by Django 4.2.7 on 2024-09-17 23:39
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('partners', '0011_alter_ourpartnerspage_black_box_link_url_and_more'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='ourpartnerspage',
+            name='filter_by_hub',
+            field=models.CharField(default='Filter by Hub'),
+        ),
+        migrations.AddField(
+            model_name='ourpartnerspage',
+            name='filter_by_program',
+            field=models.CharField(default='Filter by Program'),
+        ),
+    ]
diff --git a/app/partners/models.py b/app/partners/models.py
index b01feb8..ea44ad6 100644
--- a/app/partners/models.py
+++ b/app/partners/models.py
@@ -12,6 +12,8 @@
 from modelcluster.fields import ParentalKey, ParentalManyToManyField
 
 from app.core.models import LinkOrPageBlock, Partner
+from app.mapping_hubs.models import IndividualMappingHubPage
+from app.programs.models import IndividualProgramPage
 
 
 # The "partners" snippet is in the core app's models.
@@ -162,7 +164,7 @@ class OurPartnersPage(Page):
     def get_context(self, request, *args, **kwargs):
         context = super().get_context(request, *args, **kwargs)
 
-        partners = Partner.objects.all()
+        partners = Partner.objects.all().order_by('id')
         
         p_types = PartnershipTemplatePage.objects.live().filter(locale=context['page'].locale)
         query = Q()
@@ -170,6 +172,20 @@ def get_context(self, request, *args, **kwargs):
             if request.GET.get("pt" + str(p_type.id), ''):
                 query = query | Q(partner_type__contains=[{'type': 'type', 'value': p_type.id }])
         partners = partners.filter(query).distinct()
+        
+        hubs = IndividualMappingHubPage.objects.live().filter(locale=context['page'].locale)
+        query = Q()
+        for hub in hubs:
+            if request.GET.get("hub" + str(hub.id), ''):
+                query = query | Q(id__in=[x.value.id for x in hub.specific.partner_list])
+        partners = partners.filter(query).distinct()
+
+        programs = IndividualProgramPage.objects.live().filter(locale=context['page'].locale)
+        query = Q()
+        for program in programs:
+            if request.GET.get("prg" + str(program.id), ''):
+                query = query | Q(id__in=[x.value.id for x in program.specific.partner_list])
+        partners = partners.filter(query).distinct()
 
         page = request.GET.get('page', 1)
         paginator = Paginator(partners, 12)  # if you want more/less items per page (i.e., per load), change the number here to something else
@@ -182,6 +198,8 @@ def get_context(self, request, *args, **kwargs):
 
         context['partners'] = partners
         context['partner_types'] = p_types
+        context['hubs'] = hubs
+        context['programs'] = programs
         return context
     
     max_count = 1
@@ -197,7 +215,8 @@ def get_context(self, request, *args, **kwargs):
     intro = RichTextField(blank=True, help_text="This is shown in the header.")
 
     filter_by_type_text = models.CharField(default="Filter by Type")
-    
+    filter_by_program = models.CharField(default="Filter by Program")
+    filter_by_hub = models.CharField(default="Filter by Hub")
     filter_button_text = models.CharField(default="Submit")
 
     load_more_partners_text = models.CharField(default="Load More Partners")
@@ -215,6 +234,8 @@ def get_context(self, request, *args, **kwargs):
             FieldPanel('intro'),
         ], heading="Header"),
         FieldPanel('filter_by_type_text'),
+        FieldPanel('filter_by_program'),
+        FieldPanel('filter_by_hub'),
         FieldPanel('filter_button_text'),
         FieldPanel('load_more_partners_text'),
         MultiFieldPanel([
diff --git a/app/partners/templates/partners/our_partners_page.html b/app/partners/templates/partners/our_partners_page.html
index 9fb2da5..7e92052 100644
--- a/app/partners/templates/partners/our_partners_page.html
+++ b/app/partners/templates/partners/our_partners_page.html
@@ -10,11 +10,22 @@
 {% endblock extra_css %}
 
 {% block content %}
-    {% include "ui/components/PageHeaderWithBlur.html" with title=page.title subtitle=page.intro image=page.header_image full_length=True smaller=True %}
+    {% include "ui/components/PageHeaderWithBlur.html" with title=page.title image=page.header_image full_length=True smaller=True endinlarge=True %}
     
-    <div class="max-w-7xl mx-auto my-10" x-data="{ params: new URLSearchParams((new URL(window.location.href)).search) }">
+    <div class="max-w-7xl mx-auto my-10" x-data="{ params: new URLSearchParams((new URL(window.location.href)).search), activeParams: {} }">
         <div class="px-6 md:px-10">
-            <form>
+            <div class="max-w-5xl text-intro font-medium mb-20">
+                {{ page.intro|richtext }}
+            </div>
+
+            <form hx-get="{{page.url}}"
+                hx-trigger="submit"
+                hx-target="#partners-list, #next-partner"
+                hx-select="#partners-list, #next-partner"
+                hx-swap="innerHTML"
+                hx-select-oob="#partners-list:outerHTML, #next-partner:innerHTML"
+                @submit="activeParams = new FormData($el);"
+            >
                 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                     {% comment %} TYPES {% endcomment %}
                     <div class="relative" x-data="{ show: false }" @click.away="show = false">
@@ -35,6 +46,44 @@
                         </div>
                     </div>
 
+                    {% comment %} HUB {% endcomment %}
+                    <div class="relative" x-data="{ show: false }" @click.away="show = false">
+                        <div class="w-full h-full flex justify-between py-2 px-3 bg-hot-off-white items-center cursor-pointer" @click="show = !show">
+                            <p class="pointer-events-none">
+                                {{page.filter_by_hub}}
+                            </p>
+                            {% include "ui/components/icon_svgs/LinkCaret.html" with class="rotate-90 text-hot-red" %}
+                        </div>
+                        <div class="absolute z-20 bg-hot-off-white p-4 w-full" x-show="show">
+                            <hr class="border-b-2">
+                            {% for hub in hubs %}
+                                <div class="mt-4 flex">
+                                    <label for="hub-{{forloop.counter}}">{{hub.title}}</label>
+                                    <input class="ml-auto checked:bg-hot-red checked:hover:bg-hot-red checked:focus:bg-hot-red" id="hub-{{forloop.counter}}" type="checkbox" name="hub{{hub.id}}" :checked="params.get('hub{{hub.id}}')">
+                                </div>
+                            {% endfor %}
+                        </div>
+                    </div>
+
+                    {% comment %} PROGRAM {% endcomment %}
+                    <div class="relative" x-data="{ show: false }" @click.away="show = false">
+                        <div class="w-full h-full flex justify-between py-2 px-3 bg-hot-off-white items-center cursor-pointer" @click="show = !show">
+                            <p class="pointer-events-none">
+                                {{page.filter_by_program}}
+                            </p>
+                            {% include "ui/components/icon_svgs/LinkCaret.html" with class="rotate-90 text-hot-red" %}
+                        </div>
+                        <div class="absolute z-20 bg-hot-off-white p-4 w-full" x-show="show">
+                            <hr class="border-b-2">
+                            {% for program in programs %}
+                                <div class="mt-4 flex">
+                                    <label for="program-{{forloop.counter}}">{{program.title}}</label>
+                                    <input class="ml-auto checked:bg-hot-red checked:hover:bg-hot-red checked:focus:bg-hot-red" id="program-{{forloop.counter}}" type="checkbox" name="prg{{program.id}}" :checked="params.get('prg{{program.id}}')">
+                                </div>
+                            {% endfor %}
+                        </div>
+                    </div>
+
                     <div class="bg-hot-red text-white font-semibold">
                         <input type="submit" value="{{page.filter_button_text}}" class="bg-transparent w-full h-full cursor-pointer py-2">
                     </div>
@@ -43,15 +92,17 @@
 
             <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-8 mt-10" id="partners-list">
                 {% for partner in partners %}
-                    <div class="flex justify-center">
-                        {% image partner.partner_logo original class="max-h-24 max-w-full h-full w-auto" %}
-                    </div>
+                    <a href="{{partner.partner_url}}">
+                        <div class="flex justify-center">
+                            {% image partner.partner_logo original class="max-h-24 max-w-full h-full w-auto" %}
+                        </div>
+                    </a>
                 {% endfor %}
             </div>
             <p class="text-center mt-10" id="next-partner" class="{% if not partners.has_next %}hidden{% endif %}">
                 {% if partners.has_next %}
                         {% comment %} <a href="?page={{ projects.next_page_number }}"></a> {% endcomment %}
-                        <button hx-get="?page={{ partners.next_page_number }}"
+                        <button :hx-get="'?page={{ partners.next_page_number }}&' + `${(new URLSearchParams(activeParams)).toString()}`"
                             hx-trigger="click"
                             hx-select="#partners-list, #next-partner"
                             hx-swap="beforeend"
diff --git a/app/programs/migrations/0011_individualprogrampage_partner_list.py b/app/programs/migrations/0011_individualprogrampage_partner_list.py
new file mode 100644
index 0000000..deb48d4
--- /dev/null
+++ b/app/programs/migrations/0011_individualprogrampage_partner_list.py
@@ -0,0 +1,21 @@
+# Generated by Django 4.2.7 on 2024-09-17 19:39
+
+import app.core.models
+from django.db import migrations
+import wagtail.fields
+import wagtail.snippets.blocks
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('programs', '0010_alter_individualprogrampage_stats'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='individualprogrampage',
+            name='partner_list',
+            field=wagtail.fields.StreamField([('partner', wagtail.snippets.blocks.SnippetChooserBlock(app.core.models.Partner))], blank=True, null=True, use_json_field=True),
+        ),
+    ]
diff --git a/app/programs/migrations/0012_remove_individualprogrampage_partners.py b/app/programs/migrations/0012_remove_individualprogrampage_partners.py
new file mode 100644
index 0000000..b7f44dd
--- /dev/null
+++ b/app/programs/migrations/0012_remove_individualprogrampage_partners.py
@@ -0,0 +1,17 @@
+# Generated by Django 4.2.7 on 2024-09-17 19:48
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('programs', '0011_individualprogrampage_partner_list'),
+    ]
+
+    operations = [
+        migrations.RemoveField(
+            model_name='individualprogrampage',
+            name='partners',
+        ),
+    ]
diff --git a/app/programs/models.py b/app/programs/models.py
index 1fb2b6a..ed7a7cf 100644
--- a/app/programs/models.py
+++ b/app/programs/models.py
@@ -5,16 +5,15 @@
 from wagtail.models import Page
 from wagtail.fields import RichTextField, StreamField
 from wagtail.admin.panels import FieldPanel, MultiFieldPanel
+from wagtail.snippets.blocks import SnippetChooserBlock
 from wagtail.images.blocks import ImageChooserBlock
 from wagtail.blocks import CharBlock, StreamBlock, StructBlock, URLBlock, RichTextBlock, PageChooserBlock
 from wagtail.contrib.modeladmin.options import ModelAdmin, modeladmin_register
 from wagtail.search import index
-
-from app.projects.models import IndividualProjectPage
-
 from modelcluster.fields import ParentalKey, ParentalManyToManyField
 
-from app.core.models import LinkOrPageBlock
+from app.projects.models import IndividualProjectPage
+from app.core.models import LinkOrPageBlock, Partner
 
 
 class IndividualStatBlock(StructBlock):
@@ -119,7 +118,7 @@ def get_context(self, request):
 
     goals = StreamField(ProgramGoalBlock(), use_json_field=True, null=True, blank=True)
 
-    partners = ParentalManyToManyField('core.Partner', blank=True)
+    partner_list = StreamField([('partner', SnippetChooserBlock(Partner))], use_json_field=True, null=True, blank=True)
 
     more_programs = StreamField([
         ('program_page', PageChooserBlock(page_type="programs.IndividualProgramPage"))
@@ -148,7 +147,7 @@ def get_context(self, request):
             FieldPanel("goals"),
         ], heading="Goals"),
         MultiFieldPanel([
-            FieldPanel("partners", widget=forms.CheckboxSelectMultiple),
+            FieldPanel("partner_list"),
         ], heading="Partners"),
         MultiFieldPanel([
             FieldPanel("more_programs"),
diff --git a/app/programs/templates/programs/individual_program_page.html b/app/programs/templates/programs/individual_program_page.html
index 5a22951..93520db 100644
--- a/app/programs/templates/programs/individual_program_page.html
+++ b/app/programs/templates/programs/individual_program_page.html
@@ -20,7 +20,7 @@
                 </div>
                 {{ page.description|safe }}
             </div>
-            {% image page.intro_image original class="pb-8 lg:order-1 aspect-[3/2]" %}
+            {% image page.intro_image original class="pb-8 lg:order-1 aspect-[3/2] object-cover object-center" %}
         </div>
 
         <h1 class="text-h2 font-bold">
@@ -77,11 +77,13 @@ <h1 class="text-h2 font-bold">
                 </div>
 
                 <div class="text-right self-center text-intro">
-                    {% include "ui/components/BaseLink.html" with linkurl=page.get_parent.specific.view_all_partners_link_url linktext=page.get_parent.specific.view_all_partners_title %}
+                    {% with page.id|stringformat:"s" as id %}
+                        {% include "ui/components/BaseLink.html" with linkurl=page.get_parent.specific.view_all_partners_link_url linktext=page.get_parent.specific.view_all_partners_title linkappendage="?prg"|add:id|add:"=on" %}
+                    {% endwith %}
                 </div>
             </div>
             
-            {% include "ui/components/partners/PartnerViewBlock.html" with partners=page.partners.all %}
+            {% include "ui/components/partners/PartnerViewBlock.html" with partners=page.partner_list %}
         </div>
 
         <div class="py-6">
diff --git a/app/projects/migrations/0036_remove_individualprojectpage_call_to_action_link_url_and_more.py b/app/projects/migrations/0036_remove_individualprojectpage_call_to_action_link_url_and_more.py
new file mode 100644
index 0000000..a6358d8
--- /dev/null
+++ b/app/projects/migrations/0036_remove_individualprojectpage_call_to_action_link_url_and_more.py
@@ -0,0 +1,61 @@
+# Generated by Django 4.2.7 on 2024-09-18 21:59
+
+from django.db import migrations
+import wagtail.blocks
+import wagtail.documents.blocks
+import wagtail.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('projects', '0035_remove_individualprojectpage_tools_and_more'),
+    ]
+
+    operations = [
+        migrations.RemoveField(
+            model_name='individualprojectpage',
+            name='call_to_action_link_url',
+        ),
+        migrations.RemoveField(
+            model_name='projectownerpage',
+            name='black_box_link_url',
+        ),
+        migrations.RemoveField(
+            model_name='projectownerpage',
+            name='red_box_link_url',
+        ),
+        migrations.RemoveField(
+            model_name='projectownerpage',
+            name='view_all_events_url',
+        ),
+        migrations.RemoveField(
+            model_name='projectownerpage',
+            name='view_all_news_url',
+        ),
+        migrations.AddField(
+            model_name='individualprojectpage',
+            name='call_to_action_link',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock())], blank=True, use_json_field=True),
+        ),
+        migrations.AddField(
+            model_name='projectownerpage',
+            name='black_box_link',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock())], blank=True, use_json_field=True),
+        ),
+        migrations.AddField(
+            model_name='projectownerpage',
+            name='red_box_link',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock())], blank=True, use_json_field=True),
+        ),
+        migrations.AddField(
+            model_name='projectownerpage',
+            name='view_all_events_link',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock())], blank=True, use_json_field=True),
+        ),
+        migrations.AddField(
+            model_name='projectownerpage',
+            name='view_all_news_link',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock())], blank=True, use_json_field=True),
+        ),
+    ]
diff --git a/app/projects/migrations/0037_remove_individualprojectpage_partners_list_and_more.py b/app/projects/migrations/0037_remove_individualprojectpage_partners_list_and_more.py
new file mode 100644
index 0000000..74efe4f
--- /dev/null
+++ b/app/projects/migrations/0037_remove_individualprojectpage_partners_list_and_more.py
@@ -0,0 +1,25 @@
+# Generated by Django 4.2.7 on 2024-09-18 22:14
+
+import app.core.models
+from django.db import migrations
+import wagtail.fields
+import wagtail.snippets.blocks
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('projects', '0036_remove_individualprojectpage_call_to_action_link_url_and_more'),
+    ]
+
+    operations = [
+        migrations.RemoveField(
+            model_name='individualprojectpage',
+            name='partners_list',
+        ),
+        migrations.AddField(
+            model_name='individualprojectpage',
+            name='partner_list',
+            field=wagtail.fields.StreamField([('partner', wagtail.snippets.blocks.SnippetChooserBlock(app.core.models.Partner))], blank=True, null=True, use_json_field=True),
+        ),
+    ]
diff --git a/app/projects/models.py b/app/projects/models.py
index 1abb8a9..520e335 100644
--- a/app/projects/models.py
+++ b/app/projects/models.py
@@ -7,6 +7,7 @@
 from wagtail.fields import RichTextField, StreamField
 from wagtail.admin.panels import FieldPanel, MultiFieldPanel, PageChooserPanel
 from wagtail.blocks import CharBlock, StreamBlock, StructBlock, URLBlock, RichTextBlock, PageChooserBlock
+from wagtail.snippets.blocks import SnippetChooserBlock
 from wagtail.search import index
 from wagtail.snippets.models import register_snippet
 
@@ -14,6 +15,8 @@
 
 from modelcluster.fields import ParentalKey, ParentalManyToManyField
 
+from app.core.models import LinkOrPageBlock, Partner
+
 
 """
 This page should only be created as a child of an IndividualMappingHubPage!
@@ -63,17 +66,17 @@ def get_context(self, request, *args, **kwargs):
 
     related_news_title = models.CharField(default="Related News")
     view_all_news_text = models.CharField(default="View all News")
-    view_all_news_url = models.URLField(blank=True)
+    view_all_news_link = StreamField(LinkOrPageBlock(), use_json_field=True, blank=True)
     related_events_title = models.CharField(default="Related Events")
     view_all_events_text = models.CharField(default="View all Events")
-    view_all_events_url = models.URLField(blank=True)
+    view_all_events_link = StreamField(LinkOrPageBlock(), use_json_field=True, blank=True)
 
     red_box_title = models.CharField(default="Chat with Our Community")
     red_box_link_text = models.CharField(default="Get connected now")
-    red_box_link_url = models.URLField(null=True, blank=True)
+    red_box_link = StreamField(LinkOrPageBlock(), use_json_field=True, blank=True)
     black_box_title = models.CharField(default="Our Work")
     black_box_link_text = models.CharField(default="View Our Work")
-    black_box_link_url = models.URLField(null=True, blank=True)
+    black_box_link = StreamField(LinkOrPageBlock(), use_json_field=True, blank=True)
 
     content_panels = Page.content_panels + [
         MultiFieldPanel([
@@ -92,19 +95,19 @@ def get_context(self, request, *args, **kwargs):
                 MultiFieldPanel([
                     FieldPanel('related_news_title'),
                     FieldPanel('view_all_news_text'),
-                    FieldPanel('view_all_news_url'),
+                    FieldPanel('view_all_news_link'),
                     FieldPanel('related_events_title'),
                     FieldPanel('view_all_events_text'),
-                    FieldPanel('view_all_events_url'),
+                    FieldPanel('view_all_events_link'),
                 ], heading="Related Pages"),
             ], heading="Sidebar"),
             MultiFieldPanel([
                 FieldPanel('red_box_title'),
                 FieldPanel('red_box_link_text'),
-                FieldPanel('red_box_link_url'),
+                FieldPanel('red_box_link'),
                 FieldPanel('black_box_title'),
                 FieldPanel('black_box_link_text'),
-                FieldPanel('black_box_link_url'),
+                FieldPanel('black_box_link'),
             ], heading="Footer"),
         ], heading="Individual Project Page"),
     ]
@@ -176,7 +179,7 @@ class IndividualProjectPage(Page):
     call_to_action_title = models.CharField(default="Call to Action")
     call_to_action_description = RichTextField(null=True, blank=True)
     call_to_action_link_text = models.CharField(default="Call to Action Link")
-    call_to_action_link_url = models.URLField(null=True, blank=True)
+    call_to_action_link = StreamField(LinkOrPageBlock(), use_json_field=True, blank=True)
 
     # > SIDE BAR
     project_status = models.ForeignKey(
@@ -188,7 +191,7 @@ class IndividualProjectPage(Page):
     impact_area_list = StreamField([('impact_area', PageChooserBlock(page_type="impact_areas.IndividualImpactAreaPage"))], use_json_field=True, null=True, blank=True)
     region_hub_list = StreamField([('region_hub', PageChooserBlock(page_type="mapping_hubs.IndividualMappingHubPage"))], use_json_field=True, null=True, blank=True)
     duration = models.CharField(default="Ongoing", blank=True)
-    partners_list = ParentalManyToManyField('core.Partner', blank=True)
+    partner_list = StreamField([('partner', SnippetChooserBlock(Partner))], use_json_field=True, null=True, blank=True)
     tools_list = StreamField([('tool', PageChooserBlock(page_type="tech.IndividualTechStackPage"))], use_json_field=True, null=True, blank=True)
     contact = RichTextField(null=True, blank=True)
     types = ParentalManyToManyField('projects.ProjectType', blank=True)
@@ -221,7 +224,7 @@ class IndividualProjectPage(Page):
                 FieldPanel('call_to_action_title'),
                 FieldPanel('call_to_action_description'),
                 FieldPanel('call_to_action_link_text'),
-                FieldPanel('call_to_action_link_url'),
+                FieldPanel('call_to_action_link'),
             ], heading="Call to Action"),
         ], heading="Body"),
         MultiFieldPanel([
@@ -229,7 +232,7 @@ class IndividualProjectPage(Page):
             FieldPanel('impact_area_list'),
             FieldPanel('region_hub_list'),
             FieldPanel('duration'),
-            FieldPanel('partners_list', widget=forms.CheckboxSelectMultiple),
+            FieldPanel('partner_list'),
             FieldPanel('tools_list'),
             FieldPanel('contact'),
             FieldPanel('types', widget=forms.CheckboxSelectMultiple),
diff --git a/app/projects/templates/projects/individual_project_page.html b/app/projects/templates/projects/individual_project_page.html
index 612c23b..ba11c84 100644
--- a/app/projects/templates/projects/individual_project_page.html
+++ b/app/projects/templates/projects/individual_project_page.html
@@ -22,7 +22,7 @@
                     </div>
                     {{ page.description }}
                 </div>
-                {% include "ui/components/CTABodyPanelBase.html" with title=page.call_to_action_title text=page.call_to_action_description linktext=page.call_to_action_link_text linkurl=page.call_to_action_link_url %}
+                {% include "ui/components/CTABodyPanelBase.html" with title=page.call_to_action_title text=page.call_to_action_description linktext=page.call_to_action_link_text linkurl=page.call_to_action_link %}
             </div>
 
             {% comment %} SIDEBAR {% endcomment %}
@@ -54,11 +54,11 @@
                             {%if page.project_status%}<p>{{page.project_status}}</p>{%endif%}
                         </div>
 
-                        {% if page.partners_list.all %}
+                        {% if page.partner_list %}
                             <div>
                                 <p>{{page.get_parent.specific.partners_title}}</p>
-                                {% for partner in page.partners_list.all %}
-                                    <p><a href="{{partner.partner_url}}">{{partner.partner_name}}</a></p>
+                                {% for partner in page.partner_list %}
+                                    <p><a href="{{partner.value.partner_url}}">{{partner.value.partner_name}}</a></p>
                                 {% endfor %}
                             </div>
                         {% endif %}
@@ -97,7 +97,7 @@ <h1 class="text-h2 font-bold mb-4">
                             {{ page.get_parent.specific.related_news_title }}
                         </h1>
                         <div class="[&_span]:text-black text-intro">
-                            {% include "ui/components/BaseLink.html" with linkurl=page.get_parent.specific.view_all_news_url linktext=page.get_parent.specific.view_all_news_text %}
+                            {% include "ui/components/BaseLink.html" with linkurl=page.get_parent.specific.view_all_news_link linktext=page.get_parent.specific.view_all_news_text %}
                         </div>
                         <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-1 gap-4 mt-8">
                             {% with allnews=page.related_news %}
@@ -116,7 +116,7 @@ <h1 class="text-h2 font-bold mb-4">
                             {{ page.get_parent.specific.related_events_title }}
                         </h1>
                         <div class="[&_span]:text-black text-intro">
-                            {% include "ui/components/BaseLink.html" with linkurl=page.get_parent.specific.view_all_events_url linktext=page.get_parent.specific.view_all_events_text %}
+                            {% include "ui/components/BaseLink.html" with linkurl=page.get_parent.specific.view_all_events_link linktext=page.get_parent.specific.view_all_events_text %}
                         </div>
                         <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-1 gap-12 mt-10">
                             {% for event in page.related_events %}
@@ -131,10 +131,10 @@ <h1 class="text-h2 font-bold mb-4">
         {% comment %} BOTTOM AREA {% endcomment %}
         <div class="grid grid-cols-1 md:grid-cols-2 text-white my-10 mx-5">
             <div class="mx-5 mb-10 md:mb-0">
-                {% include "ui/components/dogear_boxes/DogearRed.html" with title=page.get_parent.specific.red_box_title linktext=page.get_parent.specific.red_box_link_text linkurl=page.get_parent.specific.red_box_link_url %}
+                {% include "ui/components/dogear_boxes/DogearRed.html" with title=page.get_parent.specific.red_box_title linktext=page.get_parent.specific.red_box_link_text linkurl=page.get_parent.specific.red_box_link %}
             </div>
             <div class="mx-5">
-                {% include "ui/components/dogear_boxes/DogearBlack.html" with title=page.get_parent.specific.black_box_title linktext=page.get_parent.specific.black_box_link_text linkurl=page.get_parent.specific.black_box_link_url %}
+                {% include "ui/components/dogear_boxes/DogearBlack.html" with title=page.get_parent.specific.black_box_title linktext=page.get_parent.specific.black_box_link_text linkurl=page.get_parent.specific.black_box_link %}
             </div>
         </div>
     </div>
diff --git a/app/rfp/migrations/0006_remove_requestforproposalownerpage_job_opportunities_button_link_and_more.py b/app/rfp/migrations/0006_remove_requestforproposalownerpage_job_opportunities_button_link_and_more.py
new file mode 100644
index 0000000..3793cf5
--- /dev/null
+++ b/app/rfp/migrations/0006_remove_requestforproposalownerpage_job_opportunities_button_link_and_more.py
@@ -0,0 +1,25 @@
+# Generated by Django 4.2.7 on 2024-09-17 17:47
+
+from django.db import migrations
+import wagtail.blocks
+import wagtail.documents.blocks
+import wagtail.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('rfp', '0005_individualrequestforproposalpage_is_active'),
+    ]
+
+    operations = [
+        migrations.RemoveField(
+            model_name='requestforproposalownerpage',
+            name='job_opportunities_button_link',
+        ),
+        migrations.AddField(
+            model_name='requestforproposalownerpage',
+            name='job_opportunities_button_url',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock())], blank=True, use_json_field=True),
+        ),
+    ]
diff --git a/app/rfp/models.py b/app/rfp/models.py
index 36fdfd6..79db899 100644
--- a/app/rfp/models.py
+++ b/app/rfp/models.py
@@ -6,6 +6,8 @@
 from wagtail.blocks import CharBlock, StreamBlock, StructBlock, URLBlock, RichTextBlock, PageChooserBlock
 from wagtail.models import Page
 
+from app.core.models import LinkOrPageBlock
+
 
 class RequestForProposalOwnerPage(Page):
     def get_context(self, request, *args, **kwargs):
@@ -53,7 +55,7 @@ def get_context(self, request, *args, **kwargs):
     job_opportunities_title = models.CharField(default="See Our Job Opportunities")
     job_opportunities_description = RichTextField(blank=True)
     job_opportunities_button_text = models.CharField(default="See All Job Opportunities")
-    job_opportunities_button_link = models.URLField(blank=True)
+    job_opportunities_button_url = StreamField(LinkOrPageBlock(), use_json_field=True, blank=True)
 
     posted_by_prefix_text = models.CharField(default="Posted by")
 
@@ -90,7 +92,7 @@ def get_context(self, request, *args, **kwargs):
             FieldPanel('job_opportunities_title'),
             FieldPanel('job_opportunities_description'),
             FieldPanel('job_opportunities_button_text'),
-            FieldPanel('job_opportunities_button_link'),
+            FieldPanel('job_opportunities_button_url'),
         ], heading="Footer banner"),
         MultiFieldPanel([
             FieldPanel('posted_by_prefix_text'),
diff --git a/app/rfp/templates/rfp/individual_request_for_proposal_page.html b/app/rfp/templates/rfp/individual_request_for_proposal_page.html
index 980ad1f..d77a3c2 100644
--- a/app/rfp/templates/rfp/individual_request_for_proposal_page.html
+++ b/app/rfp/templates/rfp/individual_request_for_proposal_page.html
@@ -12,8 +12,8 @@
 {% block content %}
     <div class="max-w-7xl mx-auto">
         {% comment %} HEADER {% endcomment %}
-        <div class="base-article px-6 md:px-10 py-5">
-            <h1>{{ page.title }} </h1>
+        <div class="px-6 md:px-10 py-5">
+            <h1 class="text-h2 font-bold">{{ page.title }} </h1>
             <p>
                 {{page.get_parent.specific.posted_by_prefix_text}}
                 {% for poster in page.posters %}
@@ -33,12 +33,10 @@ <h1>{{ page.title }} </h1>
             </div>
 
             {% comment %} SIDEBAR {% endcomment %}
-            <div class="py-5 sidebar [&>div]:my-12 [&_div:first-child_hr]:hidden [&_hr]:mb-8 md:w-1/2 lg:w-auto">
-                <div>
-                    <h1 class="text-h2 font-bold">
-                        {{ page.get_parent.specific.terms_of_reference_title }}
-                    </h1>
-                </div>
+            <div class="py-5 sidebar [&>div]:my-8 [&_div:first-child_hr]:hidden [&_hr]:mb-8 md:w-1/2 lg:w-auto">
+                <h1 class="text-h2 font-bold">
+                    {{ page.get_parent.specific.terms_of_reference_title }}
+                </h1>
 
                 {% include "./components/SidebarSection.html" with title=page.get_parent.specific.role_title text=page.role no_divider=True %}
                 {% include "./components/SidebarSection.html" with title=page.get_parent.specific.application_close_title text=page.application_close_date %}
diff --git a/app/rfp/templates/rfp/request_for_proposal_owner_page.html b/app/rfp/templates/rfp/request_for_proposal_owner_page.html
index 7367231..a1c07d7 100644
--- a/app/rfp/templates/rfp/request_for_proposal_owner_page.html
+++ b/app/rfp/templates/rfp/request_for_proposal_owner_page.html
@@ -10,7 +10,7 @@
 {% endblock extra_css %}
 
 {% block content %}
-    {% include "ui/components/PageHeaderWithBlur.html" with title=page.title subtitle=page.header_description image=page.header_image %}
+    {% include "ui/components/PageHeaderWithBlur.html" with title=page.title subtitle=page.header_description image=page.header_image full_length=True %}
     
     <div class="max-w-7xl mx-auto my-10">
         <div class="px-6 md:px-10">
@@ -57,7 +57,7 @@ <h1 class="text-h3 font-bold">
     </div>
     
     <div class="mt-20">
-        {% include "ui/components/sections/NavyBackgroundWithImage.html" with image=page.job_opportunities_image title=page.job_opportunities_title description=page.job_opportunities_description button_text=page.job_opportunities_button_text button_link=page.job_opportunities_button_link imageright=True %}
+        {% include "ui/components/sections/NavyBackgroundWithImage.html" with image=page.job_opportunities_image title=page.job_opportunities_title description=page.job_opportunities_description button_text=page.job_opportunities_button_text button_link=page.job_opportunities_button_url imageright=True %}
     </div>
 
     <div class="max-w-7xl mx-auto bg-hot-off-white lg:hidden">
diff --git a/app/tools_and_resources/migrations/0007_remove_toolsandresourcespage_black_box_link_url_and_more.py b/app/tools_and_resources/migrations/0007_remove_toolsandresourcespage_black_box_link_url_and_more.py
new file mode 100644
index 0000000..b9d6191
--- /dev/null
+++ b/app/tools_and_resources/migrations/0007_remove_toolsandresourcespage_black_box_link_url_and_more.py
@@ -0,0 +1,61 @@
+# Generated by Django 4.2.7 on 2024-09-23 20:51
+
+from django.db import migrations
+import wagtail.blocks
+import wagtail.documents.blocks
+import wagtail.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('tools_and_resources', '0006_alter_openmappingsolutionspage_cta_button_link_and_more'),
+    ]
+
+    operations = [
+        migrations.RemoveField(
+            model_name='toolsandresourcespage',
+            name='black_box_link_url',
+        ),
+        migrations.RemoveField(
+            model_name='toolsandresourcespage',
+            name='dogear_tech_news_link_url',
+        ),
+        migrations.RemoveField(
+            model_name='toolsandresourcespage',
+            name='get_connected_button_link',
+        ),
+        migrations.RemoveField(
+            model_name='toolsandresourcespage',
+            name='learn_more_data_principles_link',
+        ),
+        migrations.RemoveField(
+            model_name='toolsandresourcespage',
+            name='red_box_link_url',
+        ),
+        migrations.AddField(
+            model_name='toolsandresourcespage',
+            name='black_box_link',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock())], blank=True, use_json_field=True),
+        ),
+        migrations.AddField(
+            model_name='toolsandresourcespage',
+            name='dogear_tech_news_link',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock())], blank=True, use_json_field=True),
+        ),
+        migrations.AddField(
+            model_name='toolsandresourcespage',
+            name='get_connected_button_url',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock())], blank=True, use_json_field=True),
+        ),
+        migrations.AddField(
+            model_name='toolsandresourcespage',
+            name='learn_more_data_principles_url',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock())], blank=True, use_json_field=True),
+        ),
+        migrations.AddField(
+            model_name='toolsandresourcespage',
+            name='red_box_link',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock())], blank=True, use_json_field=True),
+        ),
+    ]
diff --git a/app/tools_and_resources/models.py b/app/tools_and_resources/models.py
index 5526039..529a573 100644
--- a/app/tools_and_resources/models.py
+++ b/app/tools_and_resources/models.py
@@ -42,7 +42,7 @@ class ToolsAndResourcesPage(Page):
     intro = RichTextField(blank=True)
     description = RichTextField(blank=True)
     learn_more_data_principles_text = models.CharField(default="Learn about our Data & Principles")
-    learn_more_data_principles_link = models.URLField(blank=True)
+    learn_more_data_principles_url = StreamField(LinkOrPageBlock(), use_json_field=True, blank=True)
 
     large_panels = StreamField([('panel', LargePanel())], use_json_field=True, null=True, blank=True)
 
@@ -57,18 +57,18 @@ class ToolsAndResourcesPage(Page):
     resource_learning_title = models.CharField(default="Resource and Learning Centre")
     resource_learning_description = RichTextField(blank=True)
     get_connected_button_text = models.CharField(default="Get connected now")
-    get_connected_button_link = models.URLField(blank=True)
+    get_connected_button_url = StreamField(LinkOrPageBlock(), use_json_field=True, blank=True)
 
     dogear_tech_news_title = models.CharField(blank=True)
     dogear_tech_news_link_text = models.CharField(default="View our Tech News")
-    dogear_tech_news_link_url = models.URLField(blank=True)
+    dogear_tech_news_link = StreamField(LinkOrPageBlock(), use_json_field=True, blank=True)
 
     red_box_title = models.CharField(default="Start Mapping")
     red_box_link_text = models.CharField(default="Start Mapping")
-    red_box_link_url = models.URLField(null=True, blank=True)
+    red_box_link = StreamField(LinkOrPageBlock(), use_json_field=True, blank=True)
     black_box_title = models.CharField(default="Check many opportunities to get involved with HOT!")
     black_box_link_text = models.CharField(default="Get Involved with HOT")
-    black_box_link_url = models.URLField(null=True, blank=True)
+    black_box_link = StreamField(LinkOrPageBlock(), use_json_field=True, blank=True)
 
     content_panels = Page.content_panels + [
         FieldPanel('header_image'),
@@ -78,7 +78,7 @@ class ToolsAndResourcesPage(Page):
             FieldPanel('intro'),
             FieldPanel('description'),
             FieldPanel('learn_more_data_principles_text'),
-            FieldPanel('learn_more_data_principles_link'),
+            FieldPanel('learn_more_data_principles_url'),
         ], heading="Intro"),
         FieldPanel('large_panels'),
         MultiFieldPanel([
@@ -86,18 +86,18 @@ class ToolsAndResourcesPage(Page):
             FieldPanel('resource_learning_title'),
             FieldPanel('resource_learning_description'),
             FieldPanel('get_connected_button_text'),
-            FieldPanel('get_connected_button_link'),
+            FieldPanel('get_connected_button_url'),
         ], heading="Resource and Learning Centre"),
         MultiFieldPanel([
             FieldPanel('dogear_tech_news_title'),
             FieldPanel('dogear_tech_news_link_text'),
-            FieldPanel('dogear_tech_news_link_url'),
+            FieldPanel('dogear_tech_news_link'),
             FieldPanel('red_box_title'),
             FieldPanel('red_box_link_text'),
-            FieldPanel('red_box_link_url'),
+            FieldPanel('red_box_link'),
             FieldPanel('black_box_title'),
             FieldPanel('black_box_link_text'),
-            FieldPanel('black_box_link_url'),
+            FieldPanel('black_box_link'),
         ], heading="Dogear Boxes"),
     ]
 
diff --git a/app/tools_and_resources/templates/tools_and_resources/tools_and_resources_page.html b/app/tools_and_resources/templates/tools_and_resources/tools_and_resources_page.html
index e666a9f..1db742b 100644
--- a/app/tools_and_resources/templates/tools_and_resources/tools_and_resources_page.html
+++ b/app/tools_and_resources/templates/tools_and_resources/tools_and_resources_page.html
@@ -18,20 +18,13 @@
                 <div class="lg:order-2">
                     <h1 class="text-h2 font-bold">{{page.intro_header}}</h1>
 
-                    <div class="my-2 text-intro font-medium">
-                        {{page.intro|safe}}
-                    </div>
-
                     <div class="base-article-m">
                         {{page.description|safe}}
                     </div>
 
-                    <a href="{{page.learn_more_data_principles_link}}">
-                        <p class="text-hot-red font-medium">
-                            {{page.learn_more_data_principles_text}}
-                            {% include "ui/components/icon_svgs/LinkCaret.html" with class="ml-4" %}
-                        </p>
-                    </a>
+                    <p class="mt-4">
+                        {% include "ui/components/BaseLinkNoUnderline.html" with linkurl=page.learn_more_data_principles_url linktext=page.learn_more_data_principles_text %}
+                    </p>
                 </div>
                 {% image page.intro_image original %}
             </div>
@@ -45,21 +38,21 @@ <h1 class="text-h2 font-bold">{{page.intro_header}}</h1>
     </div>
 
     <div class="my-10">
-        {% include "ui/components/sections/BaseSectionWithImage.html" with title=page.resource_learning_title image=page.resource_learning_image imageright=True red_button=True button_text=page.get_connected_button_text button_link=page.get_connected_button_link description=page.resource_learning_description imagenotwide=True %}
+        {% include "ui/components/sections/BaseSectionWithImage.html" with title=page.resource_learning_title image=page.resource_learning_image imageright=True red_button=True button_text=page.get_connected_button_text button_link=page.get_connected_button_url description=page.resource_learning_description imagenotwide=True %}
     </div>
 
     <div class="max-w-7xl mx-auto">
         <div class="px-6 md:px-10">
             <div class="my-20">
-                {% include "ui/components/dogear_boxes/DogearAnyColourLong.html" with title=page.dogear_tech_news_title linktext=page.dogear_tech_news_link_text linkurl=page.dogear_tech_news_link_url textcolour="black" colour="var(--hot-off-white)" arrowcolour="black" %}
+                {% include "ui/components/dogear_boxes/DogearAnyColourLong.html" with title=page.dogear_tech_news_title linktext=page.dogear_tech_news_link_text linkurl=page.dogear_tech_news_link textcolour="black" colour="var(--hot-off-white)" arrowcolour="black" %}
             </div>
 
             <div class="grid grid-cols-1 md:grid-cols-2 gap-8 text-white my-10">
                 <div>
-                    {% include "ui/components/dogear_boxes/DogearRed.html" with title=page.red_box_title linktext=page.red_box_link_text linkurl=page.red_box_link_url %}
+                    {% include "ui/components/dogear_boxes/DogearRed.html" with title=page.red_box_title linktext=page.red_box_link_text linkurl=page.red_box_link %}
                 </div>
                 <div>
-                    {% include "ui/components/dogear_boxes/DogearBlack.html" with title=page.black_box_title linktext=page.black_box_link_text linkurl=page.black_box_link_url %}
+                    {% include "ui/components/dogear_boxes/DogearBlack.html" with title=page.black_box_title linktext=page.black_box_link_text linkurl=page.black_box_link %}
                 </div>
             </div>
         </div>
diff --git a/app/ui/templates/ui/components/BaseLinkNoUnderlineWhite.html b/app/ui/templates/ui/components/BaseLinkNoUnderlineWhite.html
index c136e9f..1e3abb1 100644
--- a/app/ui/templates/ui/components/BaseLinkNoUnderlineWhite.html
+++ b/app/ui/templates/ui/components/BaseLinkNoUnderlineWhite.html
@@ -1,6 +1,10 @@
-<a href="{%include 'ui/components/PageOrLinkHrefText.html'%}" class="font-medium text-white [&:hover_span]:underline [&:hover_span]:decoration-2">
+{% if not anchorless %}
+    <a href="{%include 'ui/components/PageOrLinkHrefText.html'%}" class="font-medium text-white [&:hover_span]:underline [&:hover_span]:decoration-2">
+{% endif %}
     <span>{{linktext}}</span>
     <span class="{%if whitearrow%}text-white{%else%}text-hot-red{%endif%}">
         {% include "ui/components/icon_svgs/LinkCaret.html" with class="ml-2" %}
     </span>
-</a>
\ No newline at end of file
+{% if not anchorless %}
+    </a>
+{% endif %}
\ No newline at end of file
diff --git a/app/ui/templates/ui/components/PageOrLinkHrefText.html b/app/ui/templates/ui/components/PageOrLinkHrefText.html
index d832ee7..d7bda96 100644
--- a/app/ui/templates/ui/components/PageOrLinkHrefText.html
+++ b/app/ui/templates/ui/components/PageOrLinkHrefText.html
@@ -8,6 +8,10 @@
     {% endif %}
 {% else %}
     {% if linkurl %}
-        {{ linkurl }}{{linkappendage}}
+        {% if linkurl.url %}
+            {{ linkurl.url }}{{linkappendage}}
+        {% else %}
+            {{ linkurl }}{{linkappendage}}
+        {% endif %}
     {% endif %}
 {% endif %}
\ No newline at end of file
diff --git a/app/ui/templates/ui/components/events/EventPreviewBlockEvent.html b/app/ui/templates/ui/components/events/EventPreviewBlockEvent.html
index 868813d..747b48d 100644
--- a/app/ui/templates/ui/components/events/EventPreviewBlockEvent.html
+++ b/app/ui/templates/ui/components/events/EventPreviewBlockEvent.html
@@ -8,27 +8,26 @@
 {% image event.image original as image_p %}
 <div class="{{class}}">
     {% if showimage %}
-        <div class="image-hide-small w-full min-h-[9rem] mb-3 content-end bg-no-repeat bg-cover image-overshadow-gradient" style="background-image: url('{{ image_p.url }}')">
-            <div>
-            </div>
+        <div class="w-full min-h-[9rem] mb-3 image-overshadow-gradient">
+            {% image event.image original class="aspect-[8/5] object-cover object-center" %}
         </div>
     {% endif %}
 
-    <div class="flex w-full [&_p]:text-hot-dark-grey [&_p]:text-small justify-between flex-wrap">
+    <div class="flex w-full [&_p]:text-hot-dark-grey [&_p]:text-small justify-between flex-wrap gap-1">
         {% if event.start_date_time.date == event.end_date_time.date %}
             <p>
                 {{ event.start_date_time.date }}
             </p>
             <p>
-                {{event.start_date_time.time}} &#x2013; {{ event.end_date_time.time }}
+                {{event.start_date_time.time}} {{event.start_date_time.tzinfo}} &#x2013; {{ event.end_date_time.time }} {{event.end_date_time.tzinfo}}
             </p>
         {% else %}
             <p>
-                {{event.start_date_time}} 
+                {{event.start_date_time}} {{event.start_date_time.tzinfo}}
             </p>
             <p> &#x2013; </p>
             <p>
-                {{event.end_date_time}}
+                {{event.end_date_time}} {{event.end_date_time.tzinfo}}
             </p>
         {% endif %}
     </div>
diff --git a/app/ui/templates/ui/components/impact_areas/ImpactAreaPreviewBlock.html b/app/ui/templates/ui/components/impact_areas/ImpactAreaPreviewBlock.html
index 19ff9a1..cf48bf8 100644
--- a/app/ui/templates/ui/components/impact_areas/ImpactAreaPreviewBlock.html
+++ b/app/ui/templates/ui/components/impact_areas/ImpactAreaPreviewBlock.html
@@ -21,12 +21,6 @@ <h2 class="text-h3 font-bold py-1">
     </div>
 
     <p class="text-intro font-medium py-1">
-        <a href="{{ ia.url }}" class="[&:hover_span]:underline">
-            <span class="border-b-hot-red border-b-2 pb-1">Learn More about {{ ia.title }}</span>
-            
-            <svg class="inline ml-4" xmlns="http://www.w3.org/2000/svg" width="10.808" height="16.817" viewBox="0 0 10.808 16.817">
-                <path id="Path_13007" data-name="Path 13007" d="M0,8.4,7,0l7,8.4" transform="translate(9.808 1.408) rotate(90)" fill="none" stroke="#d43f3f" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
-            </svg>
-        </a>
+        {% include "ui/components/BaseLink.html" with linktext=learn_more_text linkurl=ia.url %}
     </p>
 </div>
\ No newline at end of file
diff --git a/app/ui/templates/ui/components/impact_areas/ImpactAreaPreviewBlockMini.html b/app/ui/templates/ui/components/impact_areas/ImpactAreaPreviewBlockMini.html
index c44b00e..4fb435a 100644
--- a/app/ui/templates/ui/components/impact_areas/ImpactAreaPreviewBlockMini.html
+++ b/app/ui/templates/ui/components/impact_areas/ImpactAreaPreviewBlockMini.html
@@ -1,8 +1,8 @@
 {% load wagtailimages_tags %}
 
 <a href="{{ area.url }}{{ link_addendum }}" class="rounded-2xl shadow-md hover:underline">
-    <div class="bg-hot-off-white p-6 text-center font-medium text-intro h-full flex flex-col justify-center">
-        {% image area.external_icon fill-200x200 class="px-10" %}
+    <div class="bg-hot-off-white p-6 text-center font-medium text-intro h-full flex flex-col justify-center items-center">
+        {% image area.external_icon original class="w-32 h-32" %}
         <p>
             {{ area.title }}
         </p>
diff --git a/app/ui/templates/ui/components/misc_panels/PagePreviewWithTabletDescription.html b/app/ui/templates/ui/components/misc_panels/PagePreviewWithTabletDescription.html
index eb1db9d..3fdf9fa 100644
--- a/app/ui/templates/ui/components/misc_panels/PagePreviewWithTabletDescription.html
+++ b/app/ui/templates/ui/components/misc_panels/PagePreviewWithTabletDescription.html
@@ -9,7 +9,7 @@
 
 {% image image original as previmg %}
 <a href="{{page.url}}">
-    <div class="bg-gradient-to-t from-black to-transparent to-30% grid">
+    <div class="bg-gradient-to-t from-black to-transparent to-30% grid lg:[&:hover_.hover-show]:pointer-events-auto lg:[&:hover_.hover-show]:opacity-100 w-full aspect-[3/2]">
         <div class="min-h-[16rem] bg-cover bg-no-repeat -z-10 relative row-start-1 col-start-1" style="background-image: url('{{previmg.url}}')">
         </div>
         <div class="row-start-1 col-start-1 flex-col justify-end p-4 hidden lg:flex">
@@ -17,6 +17,13 @@ <h1 class="font-semibold text-h3 text-white">
                 {{page.title}}
             </h1>
         </div>
+        <div class="hover-show row-start-1 col-start-1 opacity-0 pointer-events-none bg-hot-red text-white justify-center py-4 px-6 flex flex-col transition duration-100">
+            <h2 class="text-h3 font-bold">{{page.title}}</h2>
+            <p class="">{{tablet_description}}</p>
+            <p class="mt-2">
+                {% include "ui/components/BaseLinkNoUnderlineWhite.html" with anchorless=True linktext=read_more_text whitearrow=True %}
+            </p>
+        </div>
     </div>
     <div class="lg:hidden">
         <h1 class="font-bold text-h3 my-2">{{page.title}}</h1>
diff --git a/app/ui/templates/ui/components/navigation/FooterNavigation.html b/app/ui/templates/ui/components/navigation/FooterNavigation.html
index e90fc6e..179a6a8 100644
--- a/app/ui/templates/ui/components/navigation/FooterNavigation.html
+++ b/app/ui/templates/ui/components/navigation/FooterNavigation.html
@@ -34,7 +34,18 @@
             </div>
         </div>
 
-        {% image home_page.footer_candid_seal original %}
+        <div class="flex gap-4 flex-wrap">
+            {% for certification in home_page.footer_certifications %}
+                {% if certification.value.link %}
+                    <a href="{%include 'ui/components/PageOrLinkHrefText.html' with linkurl=certification.value.link%}">
+                {% endif %}
+                    {% image certification.value.icon original class="h-24 w-auto" %}
+                {% if certification.value.link %}
+                    </a>
+                {% endif %}
+            {% endfor %}
+        </div>
+
         <hr class="border-black my-6" />
 
         {% comment %} COPYRIGHT + ASSORTED LINKS {% endcomment %}
diff --git a/app/ui/templates/ui/components/navigation/HeaderNavbar.html b/app/ui/templates/ui/components/navigation/HeaderNavbar.html
index 161812b..2211d5f 100644
--- a/app/ui/templates/ui/components/navigation/HeaderNavbar.html
+++ b/app/ui/templates/ui/components/navigation/HeaderNavbar.html
@@ -1,6 +1,7 @@
 {% comment %}
 No parameters; it grabs directly from the home page (for the correct locale).
 {% endcomment %}
+{% load wagtailimages_tags %}
 {% load homepage_tags %}
 {% get_navigation as navigation %}
 {% get_home_page as home_page %}
@@ -9,7 +10,7 @@
     <div class="max-w-7xl mx-auto flex flex-wrap items-center justify-between" :class="{ 'absolute inset-x-0 top-0 z-50 text-white': isLandingPage }">
         <a class="" href="/">{% include "components/branded_elements/logo.html" with class="h-10 my-2" %}</a>
         <nav class="px-8 ml-auto my-2">
-            <ul class="flex text-base-18 p-0 flex-row py-0 gap-x-4 " aria-label="main">
+            <ul class="flex p-0 flex-row py-0 gap-x-4 " aria-label="main">
                 {% comment %} NAVBAR ITEMS THAT AREN'T BUTTONS {% endcomment %}
                 {% for item in navigation %}
                     <li class="hidden lg:block {%if forloop.last%}[&_.nav-grandchild]:left-auto [&_.nav-grandchild]:right-full lg:[&_.caret-arrow]:rotate-180{%endif%}">
@@ -50,12 +51,42 @@
     </div>
     
     {% comment %} MOBILE EXPANDED LIST {% endcomment %}
-    <ul class="text-black lg:hidden p-4" x-show="expanded" :class="{ 'pt-20 text-white': isLandingPage }">
+    <ul class="text-black lg:hidden p-4" x-show="expanded" :class="{ 'pt-20': isLandingPage }">
         <li class="border-b border-b-hot-off-white mb-2 md:hidden">{% include "ui/components/navigation/SearchForm.html" %}</li>
+
         {% for item in navigation %}
             <li class="text-black {%if item.value.is_button%}md:hidden{%endif%}">
-                {% include "ui/components/navigation/HeaderNavbarItem.html" with item=item.value %}
+                {% include "ui/components/navigation/HeaderNavbarItemMobile.html" with item=item.value %}
             </li>
         {% endfor %}
+
+        <div class="flex mt-2 gap-4 mb-8 flex-wrap md:hidden">
+            {% for item in home_page.navigation_buttons %}
+                <li class="w-fit">
+                    {% include "ui/components/navigation/HeaderNavbarButton.html" with item=item.value %}
+                </li>
+            {% endfor %}
+            <li class="[&_button]:text-small">
+                <a href="{%include 'ui/components/PageOrLinkHrefText.html' with linkurl=home_page.top_navigation_donate_url%}">
+                    {% include "components/branded_elements/button.html" with text=home_page.top_navigation_donate_text %}
+                </a>
+            </li>
+        </div>
+
+        <li class="mt-4 mb-1 flex justify-center [&_select]:text-base [&_input]:text-base">{% include "language_switcher.html" %}</li>
+
+        <ul class="mb-4 flex gap-4 text-base font-medium justify-center [&_a]:text-black">
+            {% for link in home_page.top_navigation_links %}
+                <li class="">{% include "components/branded_elements/link.html" with link=link.value.link text=link.value.text %}</li>
+            {% endfor %}
+        </ul>
+        
+        <div class="md:hidden flex gap-4 my-4 justify-center">
+            {% for social in home_page.top_navigation_socials %}
+                <a href="{%include 'ui/components/PageOrLinkHrefText.html' with linkurl=social.value.link%}">
+                    {% image social.value.icon original class="h-5 w-auto" %}
+                </a>
+            {% endfor %}
+        </div>
     </ul>
 </header>
diff --git a/app/ui/templates/ui/components/navigation/HeaderNavbarButton.html b/app/ui/templates/ui/components/navigation/HeaderNavbarButton.html
index 39a73a2..099fb17 100644
--- a/app/ui/templates/ui/components/navigation/HeaderNavbarButton.html
+++ b/app/ui/templates/ui/components/navigation/HeaderNavbarButton.html
@@ -3,9 +3,7 @@
 - item: a navigation item; has a title and a link_page OR link_url
 {% endcomment %}
 <a href="{%if item.link_page%}{{item.link_page.url}}{%elif item.link_url%}{{item.link_url}}{%else%}#{%endif%}">
-    <div class="text-small font-medium [&>.absolute]:hidden [&:hover>.absolute]:block p-2 bg-hot-red text-white px-6">
-        <p class="">
-            <span class="{%if item.children%}pr-2{%endif%}">{{item.title}}</span>   
-        </p>
+    <div class="[&_button]:text-small">
+        {% include "components/branded_elements/button.html" with text=item.title %}
     </div>
 </a>
\ No newline at end of file
diff --git a/app/ui/templates/ui/components/navigation/HeaderNavbarItemMobile.html b/app/ui/templates/ui/components/navigation/HeaderNavbarItemMobile.html
new file mode 100644
index 0000000..c9d240d
--- /dev/null
+++ b/app/ui/templates/ui/components/navigation/HeaderNavbarItemMobile.html
@@ -0,0 +1,46 @@
+{% comment %}
+==> PARAMETERS
+- item: a navigation item; has a title and a link_page OR link_url, as well as potentially children
+    - these children will have the same parameters, and those children's children will have the same except they cannot have children
+{% endcomment %}
+<div x-data="{ opened: false }" class="text-small font-medium p-2 [&>p]:hover:text-hot-red [&_p:hover]:text-hot-red text-left">
+    <p class="cursor-pointer" @click="opened = !opened">
+        <a href="{%if item.link_page%}{{item.link_page.url}}{%elif item.link_url%}{{item.link_url}}{%else%}#{%endif%}">
+            <span class="{%if item.children%}pr-2{%endif%}">{{item.title}}</span>
+        </a>
+        {% if item.children %}
+            {% include "ui/components/icon_svgs/LinkCaret.html" with class="rotate-90 text-hot-red" %}
+        {% endif %}
+    </p>
+
+    {% if item.children %}
+        <div class="show-at-large lg:absolute z-50 mt-2 bg-hot-off-white lg:py-4 text-black" x-show="opened">
+            {% comment %} CHILDREN NAVBAR ITEMS {% endcomment %}
+            {% for child in item.children %}
+                <div class="px-6 py-2" x-data="{ gcOpened: false }">
+                    <p class="cursor-pointer" @click="gcOpened = !gcOpened">
+                        <a class="hover:text-hot-red" href="{%if child.value.link_page%}{{child.value.link_page.url}}{%elif child.value.link_url%}{{child.value.link_url}}{%else%}#{%endif%}">
+                            {{child.value.title}}
+                        </a>
+                        {% if child.value.children %}
+                            {% include "ui/components/icon_svgs/LinkCaret.html" with class="text-hot-red caret-arrow ml-2 rotate-90 lg:rotate-0" %}
+                        {% endif %}
+                    </p>
+
+                    {% comment %} GRANDCHILDREN NAVBAR ITEMS {% endcomment %}
+                    {% if child.value.children%}
+                        <div class="show-at-large nav-grandchild lg:absolute lg:-mt-8 lg:left-full bg-hot-off-white px-6 lg:py-4 lg:w-fit" x-show="gcOpened">
+                            {% for gchild in child.value.children %}
+                                <p class="py-2 lg:w-fit">
+                                    <a href="{%if gchild.value.link_page%}{{gchild.value.link_page.url}}{%elif gchild.value.link_url%}{{gchild.value.link_url}}{%else%}#{%endif%}">
+                                        {{gchild.value.title}}
+                                    </a>
+                                </p>
+                            {% endfor %}
+                        </div>
+                    {% endif %}
+                </div>
+            {% endfor %}
+        </div>
+    {% endif %}
+</div>
\ No newline at end of file
diff --git a/app/ui/templates/ui/components/navigation/SearchModal.html b/app/ui/templates/ui/components/navigation/SearchModal.html
index 17d224f..7e33674 100644
--- a/app/ui/templates/ui/components/navigation/SearchModal.html
+++ b/app/ui/templates/ui/components/navigation/SearchModal.html
@@ -2,18 +2,21 @@
 No parameters; this component is only used for the search popup on desktop sizes.
 {% endcomment %}
 <div x-show="isSearchClicked"
-     @shown="$refs.searchforminput.focus(); console.log('hi')"
-     class="absolute top-0 left-0 z-[100] w-screen h-screen"
+     x-transition
+     @transitionend="if(isSearchClicked) $refs.searchforminput.focus(); $refs.searchforminput.value = ''"
+     class="absolute"
      role="dialog"
      aria-modal="true">
-    <!-- Background backdrop, show/hide based on modal state -->
-    <div class="fixed inset-0 bg-transparent bg-opacity-20 backdrop-blur-sm transition-opacity"></div>
-    <div class="fixed inset-0 z-10 w-screen overflow-y-auto p-4 sm:p-6 md:p-20 flex justify-center items-center bg-white/30">
-        <!-- Command palette, show/hide based on modal state -->
-        <div @click.outside="isSearchClicked = false"
-             @keydown.escape.window="isSearchClicked = false"
-             class="max-w-xl w-full m-8 py-2 transform divide-y divide-gray-100 overflow-hidden rounded-xl bg-white shadow-2xl ring-1 ring-black ring-opacity-5 transition-all">
-            {% include "./SearchForm.html" with has_ref=True %}
+    <div class="z-[100] top-0 left-0 absolute">
+        <!-- Background backdrop, show/hide based on modal state -->
+        <div class="fixed inset-0 bg-transparent bg-opacity-20 backdrop-blur-sm transition-opacity"></div>
+        <div class="fixed inset-0 z-10 w-screen overflow-y-auto p-4 sm:p-6 md:p-20 flex justify-center items-center bg-white/30">
+            <!-- Command palette, show/hide based on modal state -->
+            <div @click.outside="isSearchClicked = false"
+                @keydown.escape.window="isSearchClicked = false"
+                class="max-w-xl w-full m-8 py-2 transform divide-y divide-gray-100 overflow-hidden rounded-xl bg-white shadow-2xl ring-1 ring-black ring-opacity-5 transition-all">
+                {% include "./SearchForm.html" with has_ref=True %}
+            </div>
         </div>
     </div>
 </div>
diff --git a/app/ui/templates/ui/components/navigation/UpperHeaderNavbar.html b/app/ui/templates/ui/components/navigation/UpperHeaderNavbar.html
new file mode 100644
index 0000000..818798c
--- /dev/null
+++ b/app/ui/templates/ui/components/navigation/UpperHeaderNavbar.html
@@ -0,0 +1,34 @@
+{% load wagtailimages_tags %}
+{% load homepage_tags %}
+{% get_navigation as navigation %}
+{% get_home_page as home_page %}
+
+<div class="hidden md:block border-b border-hot-light">
+    <nav class="flex min-h-[3rem] mx-auto max-w-7xl px-4 justify-between items-center">
+        <!-- Social media icons -->
+        <div class="flex gap-4">
+            {% for social in home_page.top_navigation_socials %}
+                <a href="{%include 'ui/components/PageOrLinkHrefText.html' with linkurl=social.value.link%}">
+                    {% image social.value.icon original class="h-5 w-auto" %}
+                </a>
+            {% endfor %}
+        </div>
+        <!-- Search, Language, News, Contact Us -->
+        <ul class="[&_a]:text-black font-regular font-archivo text-small items-center gap-x-5 border-hot-dark-grey bg-transparent flex border-0 py-2 "
+            role="navigation"
+            aria-label="Secondary Menu">
+            {% comment %} Strings for Translations {% endcomment %}
+            <li class="hidden lg:block">{% include "components/search/search_icon.html" %}</li>
+            <li class="lg:hidden border-b border-b-hot-off-white">{% include "ui/components/navigation/SearchForm.html" %}</li>
+            <li class="hidden lg:block text-black [&_input]:text-black">{% include "language_switcher.html" %}</li>
+            {% for link in home_page.top_navigation_links %}
+                <li class="hidden lg:block">{% include "components/branded_elements/link.html" with link=link.value.link text=link.value.text %}</li>
+            {% endfor %}
+            <li class="[&_button]:text-small">
+                <a href="{%include 'ui/components/PageOrLinkHrefText.html' with linkurl=home_page.top_navigation_donate_url%}">
+                    {% include "components/branded_elements/button.html" with text=home_page.top_navigation_donate_text %}
+                </a>
+            </li>
+        </ul>
+    </nav>
+</div>
diff --git a/app/ui/templates/ui/components/partners/PartnerViewBlock.html b/app/ui/templates/ui/components/partners/PartnerViewBlock.html
index af10c5f..7c8c928 100644
--- a/app/ui/templates/ui/components/partners/PartnerViewBlock.html
+++ b/app/ui/templates/ui/components/partners/PartnerViewBlock.html
@@ -8,24 +8,30 @@
 {% load wagtailimages_tags %}
 <div x-data="{ partnerIndex: 0, fixedIndex(x) {return ({{partners|length}} + x + this.partnerIndex) % {{partners|length}}}, moveIndex(x) {this.partnerIndex = this.fixedIndex(x)} }">
     <div class="flex justify-between">
-        <div x-on:click="moveIndex(1)" class="p-4 order-first rotate-180 text-hot-red flex flex-col justify-center">
+        <div x-on:click="moveIndex(-1)" class="p-4 order-first rotate-180 text-hot-red flex flex-col justify-center">
             {% include "ui/components/icon_svgs/LinkCaretCircle.html" with styledhover=True %}
         </div>
         {% for partner in partners %}
-            <a href="{{partner.partner_url}}" aria-label="{{partner.partner_name}}">
-                <div :class="{ 'hidden md:block': fixedIndex({{forloop.counter0}}) > 0 && fixedIndex({{forloop.counter0}}) <= 2, 
+            <div :class="{ 'hidden md:block': fixedIndex({{forloop.counter0}}) > 0 && fixedIndex({{forloop.counter0}}) <= 2, 
                             'hidden lg:block': fixedIndex({{forloop.counter0}}) == 3,
                             'hidden': fixedIndex({{forloop.counter0}}) > 3,
                             }"
                     :style="`order: ${fixedIndex({{forloop.counter0}}) + 1}`"
                     class="p-4"
-                >
-                    {% image partner.partner_logo original class="max-h-16 max-w-full h-full w-auto" %}
-                </div>
-            </a>
+            >
+                {% if partner.value %}
+                        <a href="{{partner.value.partner_url}}" aria-label="{{partner.value.partner_name}}">
+                            {% image partner.value.partner_logo original class="max-h-16 max-w-full h-full w-auto" %}
+                        </a>
+                    {% else %}
+                        <a href="{{partner.partner_url}}" aria-label="{{partner.partner_name}}">
+                            {% image partner.partner_logo original class="max-h-16 max-w-full h-full w-auto" %}
+                        </a>
+                {% endif %}
+            </div>
         {% endfor %}
-        <div x-on:click="moveIndex(-1)" class="p-4 order-last text-hot-red flex flex-col justify-center">
+        <div x-on:click="moveIndex(1)" class="p-4 order-last text-hot-red flex flex-col justify-center">
             {% include "ui/components/icon_svgs/LinkCaretCircle.html" with styledhover=True %}
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/app/ui/templates/ui/components/sharers/ShareSection.html b/app/ui/templates/ui/components/sharers/ShareSection.html
index be28251..776e901 100644
--- a/app/ui/templates/ui/components/sharers/ShareSection.html
+++ b/app/ui/templates/ui/components/sharers/ShareSection.html
@@ -3,16 +3,23 @@
 - class: string; the classes for the containing div
 - sharetext: string; the text to be shown next to the share icons
 {% endcomment %}
+{% load wagtailimages_tags %}
+{% load homepage_tags %}
+{% get_share_links as links %}
+
 <div class="{{class}}">
-    <p class="text-h5 font-bold text-hot-black">
-        <span class="mr-4 text-black">
+    <div class="flex gap-4 flex-wrap items-center">
+        <p class="text-h5 font-bold text-black">
             {% if sharetext %}
                 {{ sharetext }}
             {% else %}
                 Share
             {% endif %}
-        </span>
-        
-        {% include "./FacebookSharer.html" %}
-    </p>
+        </p>
+        {% for link in links %}
+            <a href="{{link.link}}">
+                {% image link.icon original class="h-6 w-auto" %}
+            </a>
+        {% endfor %}
+    </div>
 </div>
\ No newline at end of file
diff --git a/app/who_we_are/migrations/0007_alter_whowearepage_other_page_preview_blocks.py b/app/who_we_are/migrations/0007_alter_whowearepage_other_page_preview_blocks.py
new file mode 100644
index 0000000..44db1e0
--- /dev/null
+++ b/app/who_we_are/migrations/0007_alter_whowearepage_other_page_preview_blocks.py
@@ -0,0 +1,21 @@
+# Generated by Django 4.2.7 on 2024-09-16 19:37
+
+from django.db import migrations
+import wagtail.blocks
+import wagtail.fields
+import wagtail.images.blocks
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('who_we_are', '0006_alter_whowearepage_black_box_link_and_more'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='whowearepage',
+            name='other_page_preview_blocks',
+            field=wagtail.fields.StreamField([('other_page_preview', wagtail.blocks.StructBlock([('image', wagtail.images.blocks.ImageChooserBlock()), ('description', wagtail.blocks.RichTextBlock(required=False)), ('page', wagtail.blocks.PageChooserBlock())]))], blank=True, null=True, use_json_field=True),
+        ),
+    ]
diff --git a/app/who_we_are/migrations/0008_whowearepage_preview_learn_more_text.py b/app/who_we_are/migrations/0008_whowearepage_preview_learn_more_text.py
new file mode 100644
index 0000000..9f07883
--- /dev/null
+++ b/app/who_we_are/migrations/0008_whowearepage_preview_learn_more_text.py
@@ -0,0 +1,18 @@
+# Generated by Django 4.2.7 on 2024-09-16 19:56
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('who_we_are', '0007_alter_whowearepage_other_page_preview_blocks'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='whowearepage',
+            name='preview_learn_more_text',
+            field=models.CharField(default='Learn more'),
+        ),
+    ]
diff --git a/app/who_we_are/models.py b/app/who_we_are/models.py
index f0c81c5..347bf9c 100644
--- a/app/who_we_are/models.py
+++ b/app/who_we_are/models.py
@@ -24,6 +24,7 @@ class TextAndLinkBlock(StructBlock):
 
 class OtherPagePreviewBlock(StructBlock):
     image = ImageChooserBlock()
+    description = RichTextBlock(required=False)
     page = PageChooserBlock()
 
 
@@ -61,6 +62,7 @@ class WhoWeArePage(Page):
     our_people_links = StreamField([('link_block', TextAndLinkBlock())], use_json_field=True, null=True, blank=True)
 
     other_page_preview_blocks = StreamField([('other_page_preview', OtherPagePreviewBlock())], use_json_field=True, null=True, blank=True)
+    preview_learn_more_text = models.CharField(default="Learn more")
 
     partners_title = models.CharField(default="Meet Our Partners")
     partners_view_all_text = models.CharField(default="View All Partners")
@@ -114,6 +116,7 @@ class WhoWeArePage(Page):
             FieldPanel('our_people_links'),
         ], heading="Our People"),
         FieldPanel('other_page_preview_blocks'),
+        FieldPanel('preview_learn_more_text'),
         MultiFieldPanel([
             FieldPanel('partners_title'),
             FieldPanel('partners_view_all_text'),
diff --git a/app/who_we_are/templates/who_we_are/who_we_are_page.html b/app/who_we_are/templates/who_we_are/who_we_are_page.html
index ba386b1..abc2e05 100644
--- a/app/who_we_are/templates/who_we_are/who_we_are_page.html
+++ b/app/who_we_are/templates/who_we_are/who_we_are_page.html
@@ -30,7 +30,9 @@
                             {% image block.value.image original class="h-10 w-auto" %}
                             <div class="flex-grow">
                                 <h1 class="text-h5 font-bold">{{block.value.title}}</h1>
-                                {{block.value.description|richtext}}
+                                <div class="base-article-m">
+                                    {{block.value.description|richtext}}
+                                </div>
                             </div>
                         </div>
                     {% endfor %}
@@ -54,7 +56,7 @@ <h1 class="text-h5 font-bold">{{block.value.title}}</h1>
             {% comment %} PAGE PREVIEWS {% endcomment %}
             <div class="grid lg:grid-cols-2 gap-8 my-20">
                 {% for prev in page.other_page_preview_blocks %}
-                    {% include "ui/components/misc_panels/PagePreviewBasic.html" with page=prev.value.page image=prev.value.image %}
+                    {% include "ui/components/misc_panels/PagePreviewWithTabletDescription.html" with page=prev.value.page image=prev.value.image tablet_description=prev.value.description read_more_text=page.preview_learn_more_text %}
                 {% endfor %}
             </div>
 
@@ -67,8 +69,8 @@ <h1 class="text-h2 font-bold">
                     <hr class="border-hot-red w-16 border-b-2" />
                 </div>
 
-                <div class="text-right self-center">
-                    {% include "ui/components/BaseLink.html" with linkurl=page.partners_view_all_url linktext=page.partners_view_all_text %}
+                <div class="text-right self-center text-intro">
+                    {% include "ui/components/BaseLink.html" with linkurl=page.partners_view_all_link linktext=page.partners_view_all_text %}
                 </div>
             </div>
             {% include "ui/components/partners/PartnerViewBlock.html" with partners=page.partners.all %}
@@ -89,8 +91,8 @@ <h1 class="text-h2 font-bold">
     <div class="max-w-7xl mx-auto my-20">
         <div class="px-6 md:px-10">
             <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
-                {% include "ui/components/dogear_boxes/DogearRed.html" with title=page.red_box_title description=page.red_box_description linktext=page.red_box_link_text linkurl=page.red_box_link_url %}
-                {% include "ui/components/dogear_boxes/DogearBlack.html" with title=page.black_box_title description=page.black_box_description linktext=page.black_box_link_text linkurl=page.black_box_link_url %}
+                {% include "ui/components/dogear_boxes/DogearRed.html" with title=page.red_box_title description=page.red_box_description linktext=page.red_box_link_text linkurl=page.red_box_link %}
+                {% include "ui/components/dogear_boxes/DogearBlack.html" with title=page.black_box_title description=page.black_box_description linktext=page.black_box_link_text linkurl=page.black_box_link %}
             </div>
         </div>
     </div>
diff --git a/home/migrations/0036_homepage_top_navigation_links_and_more.py b/home/migrations/0036_homepage_top_navigation_links_and_more.py
new file mode 100644
index 0000000..ac047f4
--- /dev/null
+++ b/home/migrations/0036_homepage_top_navigation_links_and_more.py
@@ -0,0 +1,27 @@
+# Generated by Django 4.2.7 on 2024-09-16 21:37
+
+from django.db import migrations
+import wagtail.blocks
+import wagtail.documents.blocks
+import wagtail.fields
+import wagtail.images.blocks
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('home', '0035_homepage_paginator_next_homepage_paginator_previous'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='homepage',
+            name='top_navigation_links',
+            field=wagtail.fields.StreamField([('link', wagtail.blocks.StructBlock([('text', wagtail.blocks.CharBlock()), ('link', wagtail.blocks.StreamBlock([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock())], required=False))]))], blank=True, help_text='Links to be shown in the topmost navigation bar.', null=True, use_json_field=True),
+        ),
+        migrations.AddField(
+            model_name='homepage',
+            name='top_navigation_socials',
+            field=wagtail.fields.StreamField([('social', wagtail.blocks.StructBlock([('service', wagtail.blocks.CharBlock()), ('icon', wagtail.images.blocks.ImageChooserBlock()), ('link', wagtail.blocks.StreamBlock([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock())], required=False))]))], blank=True, help_text='Social media links to be shown in the topmost navigation bar.', null=True, use_json_field=True),
+        ),
+    ]
diff --git a/home/migrations/0037_homepage_top_navigation_donate_text_and_more.py b/home/migrations/0037_homepage_top_navigation_donate_text_and_more.py
new file mode 100644
index 0000000..65eafc6
--- /dev/null
+++ b/home/migrations/0037_homepage_top_navigation_donate_text_and_more.py
@@ -0,0 +1,26 @@
+# Generated by Django 4.2.7 on 2024-09-16 22:40
+
+from django.db import migrations, models
+import wagtail.blocks
+import wagtail.documents.blocks
+import wagtail.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('home', '0036_homepage_top_navigation_links_and_more'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='homepage',
+            name='top_navigation_donate_text',
+            field=models.CharField(default='Donate'),
+        ),
+        migrations.AddField(
+            model_name='homepage',
+            name='top_navigation_donate_url',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock())], blank=True, use_json_field=True),
+        ),
+    ]
diff --git a/home/migrations/0038_homepage_footer_certifications.py b/home/migrations/0038_homepage_footer_certifications.py
new file mode 100644
index 0000000..bc8ac5f
--- /dev/null
+++ b/home/migrations/0038_homepage_footer_certifications.py
@@ -0,0 +1,22 @@
+# Generated by Django 4.2.7 on 2024-09-17 17:08
+
+from django.db import migrations
+import wagtail.blocks
+import wagtail.documents.blocks
+import wagtail.fields
+import wagtail.images.blocks
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('home', '0037_homepage_top_navigation_donate_text_and_more'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='homepage',
+            name='footer_certifications',
+            field=wagtail.fields.StreamField([('certification', wagtail.blocks.StructBlock([('name', wagtail.blocks.CharBlock()), ('icon', wagtail.images.blocks.ImageChooserBlock()), ('link', wagtail.blocks.StreamBlock([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock())], required=False))]))], blank=True, help_text='Certifications to be shown in the footer.', null=True, use_json_field=True),
+        ),
+    ]
diff --git a/home/migrations/0039_homepage_social_share_links.py b/home/migrations/0039_homepage_social_share_links.py
new file mode 100644
index 0000000..a6f288c
--- /dev/null
+++ b/home/migrations/0039_homepage_social_share_links.py
@@ -0,0 +1,21 @@
+# Generated by Django 4.2.7 on 2024-09-23 19:17
+
+from django.db import migrations
+import wagtail.blocks
+import wagtail.fields
+import wagtail.images.blocks
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('home', '0038_homepage_footer_certifications'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='homepage',
+            name='social_share_links',
+            field=wagtail.fields.StreamField([('social', wagtail.blocks.StructBlock([('icon', wagtail.images.blocks.ImageChooserBlock()), ('link', wagtail.blocks.URLBlock(required=False))]))], blank=True, help_text="These links will be shown in pages which have a sharing widget; link URLs should be the respective social media site's share link, with the place share message's content being replaced with {}. For example, Twitter's share link would be 'https://twitter.com/intent/tweet?text={}'.", null=True, use_json_field=True),
+        ),
+    ]
diff --git a/home/models.py b/home/models.py
index cfd374a..8d0b903 100644
--- a/home/models.py
+++ b/home/models.py
@@ -1,6 +1,7 @@
 from django.db import models
 from wagtail.admin.panels import FieldPanel, MultiFieldPanel
 from wagtail.blocks import CharBlock, StreamBlock, StructBlock, URLBlock, PageChooserBlock, ListBlock, BooleanBlock
+from wagtail.images.blocks import ImageChooserBlock
 from wagtail.fields import RichTextField, StreamField
 from wagtail.models import Page
 
@@ -64,8 +65,30 @@ def get_context(self, request, *args, **kwargs):
     templates = "home/home_page.html"
 
     # Navigation
+    top_navigation_socials = StreamField([
+        ('social', StructBlock([
+            ('service', CharBlock()),
+            ('icon', ImageChooserBlock()),
+            ('link', LinkOrPageBlock(required=False)),
+        ]))
+    ], use_json_field=True, null=True, blank=True, help_text="Social media links to be shown in the topmost navigation bar.")
+    top_navigation_links = StreamField([
+        ('link', StructBlock([
+            ('text', CharBlock()),
+            ('link', LinkOrPageBlock(required=False))
+        ]))
+    ], use_json_field=True, null=True, blank=True, help_text="Links to be shown in the topmost navigation bar.")
+    top_navigation_donate_text = models.CharField(default="Donate")
+    top_navigation_donate_url = StreamField(LinkOrPageBlock(), use_json_field=True, blank=True)
     navigation = StreamField(NavigationBlock(), use_json_field=True, null=True, blank=True, help_text="The items of the navigation; this is shown on all pages.")
     navigation_buttons = StreamField([('button', ThirdNavigationStructBlock())], use_json_field=True, null=True, blank=True, help_text="The buttons of the navigation; these show up last in the navbar, and, unlike regular navigation items, show up at all times on medium screens.")
+    footer_certifications =  StreamField([
+        ('certification', StructBlock([
+            ('name', CharBlock()),
+            ('icon', ImageChooserBlock()),
+            ('link', LinkOrPageBlock(required=False)),
+        ]))
+    ], use_json_field=True, null=True, blank=True, help_text="Certifications to be shown in the footer.")
     footer_candid_seal = models.ForeignKey(
         "wagtailimages.Image",
         null=True,
@@ -95,6 +118,13 @@ def get_context(self, request, *args, **kwargs):
     paginator_previous = models.CharField(default="Previous")
     paginator_next = models.CharField(default="Next")
 
+    social_share_links = StreamField([
+        ('social', StructBlock([
+            ('icon', ImageChooserBlock()),
+            ('link', URLBlock(required=False)),
+        ]))
+    ], use_json_field=True, null=True, blank=True, help_text="These links will be shown in pages which have a sharing widget; link URLs should be the respective social media site's share link, with the place share message's content being replaced with {}. For example, Twitter's share link would be 'https://twitter.com/intent/tweet?text={}'.")
+
     # Hero section
     image = models.ForeignKey(
         "wagtailimages.Image",
@@ -221,9 +251,13 @@ def get_context(self, request, *args, **kwargs):
     content_panels = Page.content_panels + [
         MultiFieldPanel([
             MultiFieldPanel([
+                FieldPanel('top_navigation_socials'),
+                FieldPanel('top_navigation_links'),
+                FieldPanel('top_navigation_donate_text'),
+                FieldPanel('top_navigation_donate_url'),
                 FieldPanel('navigation'),
                 FieldPanel('navigation_buttons'),
-                FieldPanel('footer_candid_seal'),
+                FieldPanel('footer_certifications'),
                 FieldPanel('footer_bottom_copyright'),
                 FieldPanel('footer_bottom_links'),
             ], heading="Navigation"),
@@ -235,7 +269,10 @@ def get_context(self, request, *args, **kwargs):
             MultiFieldPanel([
                 FieldPanel('paginator_previous'),
                 FieldPanel('paginator_next'),
-            ], heading="Paginator", help_text="This is used in instances where there's a previous/next button; i.e., the news page when flipping through pages.")
+            ], heading="Paginator", help_text="This is used in instances where there's a previous/next button; i.e., the news page when flipping through pages."),
+            MultiFieldPanel([
+                FieldPanel('social_share_links'),
+            ], heading="Misc")
         ], heading="Universal items"),
         MultiFieldPanel([
             FieldPanel("image"),
diff --git a/home/templates/home/components/ImpactAreasPanel.html b/home/templates/home/components/ImpactAreasPanel.html
index 9fc0a02..e29aac3 100644
--- a/home/templates/home/components/ImpactAreasPanel.html
+++ b/home/templates/home/components/ImpactAreasPanel.html
@@ -62,9 +62,7 @@ <h1 class="text-hot-red font-bold text-h4">
                             {% include "ui/components/BaseLinkNoUnderline.html" with linktext=page.impact_areas_learn_more linkurl=area.url %}
                         </p>
                     </div>
-                    {% image area.intro_image original as area_image %}
-                    <div class="col-span-2 bg-cover bg-no-repeat h-40" style="background-image: url('{{area_image.url}}')" >
-                    </div>
+                    {% image area.intro_image original class="col-span-2 w-full aspect-[2/1] object-cover object-center" %}
                 </div>
             </div>
         {% endfor %}
diff --git a/home/templatetags/homepage_tags.py b/home/templatetags/homepage_tags.py
index 0f85288..80ed747 100644
--- a/home/templatetags/homepage_tags.py
+++ b/home/templatetags/homepage_tags.py
@@ -33,6 +33,20 @@ def get_navigation(context):
     return navigation
 
 
+@register.simple_tag(takes_context=True)
+def get_share_links(context):
+    current_page = context.get('self')
+
+    if current_page is None:
+        return None
+
+    social_share_links = current_page.get_ancestors(inclusive=True).type(HomePage).first().specific.social_share_links
+
+    links = [{"icon": x.value["icon"], "link": str(x.value["link"]).replace("{}", current_page.full_url)} for x in social_share_links]
+
+    return links
+
+
 @register.simple_tag
 def get_mapbox_key():
     return settings.MAPBOX_ACCESS_TOKEN
diff --git a/hot_osm/settings/base.py b/hot_osm/settings/base.py
index 52503d1..cd91285 100644
--- a/hot_osm/settings/base.py
+++ b/hot_osm/settings/base.py
@@ -54,12 +54,14 @@
     "app.partners",
     "app.tech",
     "app.our_work",
+    "app.job_opportunities",
     "search",
     "users",
     "utils",
     "wagtail.contrib.forms",
     "wagtail.contrib.redirects",
     "wagtail.contrib.settings",
+    "wagtail.contrib.table_block",
     "wagtail.embeds",
     "wagtail.sites",
     "wagtail.users",
diff --git a/hot_osm/static/css/hot_osm.css b/hot_osm/static/css/hot_osm.css
index 6ff8175..7c5a667 100644
--- a/hot_osm/static/css/hot_osm.css
+++ b/hot_osm/static/css/hot_osm.css
@@ -253,4 +253,91 @@
 
 .link-hover-colourer:hover {
     color: var(--link-hover-colourer-colour);
+}
+
+.salary-framework-table th,
+.salary-framework-table td {
+    padding: 0.25em;
+    border: 1px solid black;
+}
+
+.salary-framework-table th {
+    text-align: center;
+}
+
+.salary-framework-table caption {
+    margin-bottom: 0.5em;
+    font-weight: bold;
+}
+
+.salary-framework-table table {
+    border-collapse: collapse;
+    margin: 2em 0;
+}
+
+.salary-framework-table th:nth-child(n+3),
+.salary-framework-table td:nth-child(n+3) {
+    color: var(--hot-red);
+    background-color: var(--hot-off-white);
+}
+
+.salary-framework-table th:nth-child(n+2),
+.salary-framework-table td:nth-child(n+2) {
+    padding-left: 1em;
+    padding-right: 1em;
+    text-align: center;
+}
+
+.salary-framework-table td:nth-child(2) {
+    font-weight: bold;
+}
+
+#BambooHR-ATS {
+    color: black;
+}
+
+#BambooHR-ATS>.BambooHR-ATS-board>h2 {
+    display: none;
+}
+
+#BambooHR-ATS .blankState {
+    padding: 1.5rem 1.5rem 2rem 1.5rem;
+    background-color: var(--hot-off-white);
+    line-height: 2.2;
+}
+
+#BambooHR-ATS .blankState strong {
+    font-size: var(--font-size-h3);
+}
+
+#BambooHR-Footer {
+    display: flex;
+    gap: 0.25rem;
+}
+
+.BambooHR-ATS-Department-List {
+    display: grid;
+    gap: 2rem;
+}
+
+.BambooHR-ATS-Department-List .BambooHR-ATS-Department-Item {
+    padding: 1.5rem;
+    background-color: var(--hot-off-white);
+}
+
+.BambooHR-ATS-Department-List .BambooHR-ATS-Department-Item .BambooHR-ATS-Jobs-Item {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    margin-top: 0.75rem;
+}
+
+.BambooHR-ATS-Department-List .BambooHR-ATS-Department-Item .BambooHR-ATS-Jobs-Item a {
+    font-size: var(--font-size-h3);
+    font-weight: bold;
+}
+
+.BambooHR-ATS-Department-List .BambooHR-ATS-Department-Item .BambooHR-ATS-Jobs-Item a:hover {
+    text-decoration: underline;
+    text-decoration-thickness: 2px;
 }
\ No newline at end of file
diff --git a/hot_osm/templates/base.html b/hot_osm/templates/base.html
index 66e0903..7e15e04 100644
--- a/hot_osm/templates/base.html
+++ b/hot_osm/templates/base.html
@@ -48,7 +48,7 @@
     </head>
     <body class="min-h-screen {% block body_class %}{% endblock body_class %}">
         <div x-data="{ isMenuOpen: false, isSearchClicked: false, isLandingPage: false, setIsLandingPage(x) {this.isLandingPage = x} }">
-            {% include "components/nav/secondary_desktop_nav.html" %}
+            {% include "ui/components/navigation/UpperHeaderNavbar.html" %}
             <div class="relative">
                 {% comment %} {% include "components/header/header.html" %} {% endcomment %}
                 {% include "ui/components/navigation/SearchModal.html" %}
diff --git a/hot_osm/templates/components/branded_elements/link.html b/hot_osm/templates/components/branded_elements/link.html
index 19b80cb..fd5b6da 100644
--- a/hot_osm/templates/components/branded_elements/link.html
+++ b/hot_osm/templates/components/branded_elements/link.html
@@ -1,4 +1,4 @@
-<a href="{{ link }}"
+<a href="{%include 'ui/components/PageOrLinkHrefText.html' with linkurl=link%}"
    x-bind:class="{'hover:underline inline-block font-regular font-archivo text-hot-white {{ classes }}': isLandingPage, 'hover:underline inline-block font-regular font-archivo text-hot-black {{ classes }}': !isLandingPage}"
    aria-label="{{ text }}{% if parent|default:False %}, submenu{% endif %}">
     <span class="flex items-center">
diff --git a/utils/templates/language_switcher.html b/utils/templates/language_switcher.html
index 8620e69..2d10f63 100644
--- a/utils/templates/language_switcher.html
+++ b/utils/templates/language_switcher.html
@@ -4,14 +4,14 @@
 <div x-data="{language: '{{ LANGUAGE_CODE }}'}">
     <form action="{% url "set_language" %}" method="post">
         {% csrf_token %}
-        <input name="next" type="hidden" value="{{ redirect_to }}">
+        <input name="next" type="hidden" value="{{ redirect_to }}" class="text-small">
         <!-- The select element with custom styling for language selection -->
         <select name="language"
                 aria-label="Language Select"
                 x-model="language"
                 @change="$event.target.form.submit()"
                 arial-labelledby="language-select-label"
-                class="language-select hover:underline border-none appearance-none focus:outline-none pl-4 cursor-pointer lg:pl-0">
+                class="language-select hover:underline border-none appearance-none focus:outline-none pl-4 cursor-pointer lg:pl-0 text-small">
             {% get_available_languages as LANGUAGES %} {# Fetches a list of available languages as tuples, e.g., ("en", "English") #}
             {% get_language_info_list for LANGUAGES as languages %}
             {% for language in languages %}

From a98ec682f2552047529d03925e1db0278264d1f4 Mon Sep 17 00:00:00 2001
From: luminaryFlowers <71102109+luminaryFlowers@users.noreply.github.com>
Date: Wed, 25 Sep 2024 09:56:53 -0700
Subject: [PATCH 06/15] removed placeholder things for testing styling on job
 opportunities

---
 .../components/BambooHRScript.html            | 29 -------------------
 1 file changed, 29 deletions(-)

diff --git a/app/job_opportunities/templates/job_opportunities/components/BambooHRScript.html b/app/job_opportunities/templates/job_opportunities/components/BambooHRScript.html
index 71448db..6979f20 100644
--- a/app/job_opportunities/templates/job_opportunities/components/BambooHRScript.html
+++ b/app/job_opportunities/templates/job_opportunities/components/BambooHRScript.html
@@ -47,35 +47,6 @@
 
 						if(el && !fel) {
 							content += "<div id=\"BambooHR-Footer\">Powered by <a href=\"http://www.bamboohr.com\" target=\"_blank\" rel=\"external\"><img src=\"https://resources.bamboohr.com/images/footer-logo.png\" alt=\"BambooHR - HR software\"/></a></div>";
-                            content += `<ul class="BambooHR-ATS-Department-List">
-							<li id="bhrDepartmentID_18500" class="BambooHR-ATS-Department-Item">
-					<div id="department_18500" class="BambooHR-ATS-Department-Header">
-						Community
-					</div>
-					<ul class="BambooHR-ATS-Jobs-List">
-
-													<li id="bhrPositionID_124" class="BambooHR-ATS-Jobs-Item"><a href="//web.archive.org/web/20230313193508/https://hotosm.bamboohr.com/careers/124">Learning, Monitoring &amp; Evaluation Specialist [MERL] East &amp; Southern Africa Open Mapping Hub -REMOTE             </a><span class="BambooHR-ATS-Location">Maputo, Maputo</span></li>
-											</ul>
-				</li>
-							<li id="bhrDepartmentID_18473" class="BambooHR-ATS-Department-Item">
-					<div id="department_18473" class="BambooHR-ATS-Department-Header">
-						Leadership
-					</div>
-					<ul class="BambooHR-ATS-Jobs-List">
-
-													<li id="bhrPositionID_128" class="BambooHR-ATS-Jobs-Item"><a href="//web.archive.org/web/20230313193508/https://hotosm.bamboohr.com/careers/128">Executive Director - REMOTE</a><span class="BambooHR-ATS-Location">Remote, District of Columbia</span></li>
-											</ul>
-				</li>
-							<li id="bhrDepartmentID_18913" class="BambooHR-ATS-Department-Item">
-					<div id="department_18913" class="BambooHR-ATS-Department-Header">
-						Philantrophy
-					</div>
-					<ul class="BambooHR-ATS-Jobs-List">
-
-													<li id="bhrPositionID_127" class="BambooHR-ATS-Jobs-Item"><a href="//web.archive.org/web/20230313193508/https://hotosm.bamboohr.com/careers/127">Digital Communications Strategist Manager- REMOTE</a><span class="BambooHR-ATS-Location"></span></li>
-											</ul>
-				</li>
-					</ul>`
 						}
 
 						if(el) el.innerHTML=content;

From 207076e3036c0c43be4caf48729d74d6bc549bb4 Mon Sep 17 00:00:00 2001
From: luminaryFlowers <71102109+luminaryFlowers@users.noreply.github.com>
Date: Fri, 27 Sep 2024 16:39:01 -0700
Subject: [PATCH 07/15] navbar overhaul, header changes, various small things

---
 .../get_involved/get_involved_page.html       |  2 +-
 ...ter_openmappinghubspage_learn_more_text.py | 18 +++++++++++++
 app/mapping_hubs/models.py                    |  2 +-
 .../mapping_hubs/components/header.html       | 19 +++++---------
 .../individual_mapping_hub_page.html          |  8 +++---
 .../mapping_hubs/open_mapping_hubs_page.html  |  2 +-
 ...nerpage_footer_box_button_link_and_more.py | 25 ++++++++++++++++++
 app/members/models.py                         |  6 +++--
 .../templates/members/member_group_page.html  |  6 ++---
 app/misc/templates/misc/contact_us_page.html  |  2 +-
 .../templates/misc/working_groups_page.html   |  2 +-
 app/news/models.py                            |  2 +-
 app/news/templates/news/news_owner_page.html  |  2 +-
 .../templates/partners/our_partners_page.html |  2 +-
 ...ption_requestforproposalownerpage_intro.py | 18 +++++++++++++
 app/rfp/models.py                             |  4 +--
 .../rfp/request_for_proposal_owner_page.html  |  2 +-
 ...oductsuitepage_category_filter_selector.py | 20 ++++++++++++++
 app/tech/models.py                            | 10 +++++++
 .../tech/tech_product_suite_page.html         |  4 ++-
 ...dresourcespage_category_filter_selector.py | 20 ++++++++++++++
 app/tools_and_resources/models.py             | 10 +++++++
 .../tools_and_resources_page.html             |  4 ++-
 .../components/BaseLinkNoUnderlineWhite.html  |  8 +++---
 .../ui/components/BasePageHeader.html         |  2 +-
 .../ui/components/PageHeaderWithBlur.html     |  4 +--
 .../ui/components/ThreeElementCarousel.html   | 16 +++---------
 .../dogear_boxes/DogearAnyColourLong.html     |  2 +-
 .../MappingHubPreviewExtendedBlock.html       |  2 +-
 .../PagePreviewWithTabletDescription.html     |  7 ++---
 .../navigation/FooterNavigation.html          | 12 +++++----
 .../navigation/HeaderNavbarItem.html          | 20 ++++++++------
 .../navigation/HeaderNavbarItemMobile.html    |  6 ++---
 .../templates/who_we_are/who_we_are_page.html |  2 +-
 ...0040_alter_homepage_navigation_and_more.py | 26 +++++++++++++++++++
 home/models.py                                |  9 +++----
 .../branded_elements/button_bordered.html     |  2 +-
 37 files changed, 226 insertions(+), 82 deletions(-)
 create mode 100644 app/mapping_hubs/migrations/0020_alter_openmappinghubspage_learn_more_text.py
 create mode 100644 app/members/migrations/0014_remove_membergroupownerpage_footer_box_button_link_and_more.py
 create mode 100644 app/rfp/migrations/0007_rename_header_description_requestforproposalownerpage_intro.py
 create mode 100644 app/tech/migrations/0005_techproductsuitepage_category_filter_selector.py
 create mode 100644 app/tools_and_resources/migrations/0008_toolsandresourcespage_category_filter_selector.py
 create mode 100644 home/migrations/0040_alter_homepage_navigation_and_more.py

diff --git a/app/get_involved/templates/get_involved/get_involved_page.html b/app/get_involved/templates/get_involved/get_involved_page.html
index 9d9f8b6..3237a9e 100644
--- a/app/get_involved/templates/get_involved/get_involved_page.html
+++ b/app/get_involved/templates/get_involved/get_involved_page.html
@@ -45,7 +45,7 @@
 
             <div class="mt-8 mb-20 grid grid-cols-1 lg:grid-cols-3 gap-8">
                 {% for panel in page.join_us_panels %}
-                    {% include "ui/components/misc_panels/PagePreviewWithTabletDescription.html" with image=panel.value.image page=panel.value.page tablet_description=panel.value.tablet_description read_more_text=page.join_us_panel_read_more %}
+                    {% include "ui/components/misc_panels/PagePreviewWithTabletDescription.html" with image=panel.value.image page=panel.value.page tablet_description=panel.value.page.specific.intro read_more_text=page.join_us_panel_read_more %}
                 {% endfor %}
             </div>
 
diff --git a/app/mapping_hubs/migrations/0020_alter_openmappinghubspage_learn_more_text.py b/app/mapping_hubs/migrations/0020_alter_openmappinghubspage_learn_more_text.py
new file mode 100644
index 0000000..d6a0819
--- /dev/null
+++ b/app/mapping_hubs/migrations/0020_alter_openmappinghubspage_learn_more_text.py
@@ -0,0 +1,18 @@
+# Generated by Django 4.2.7 on 2024-09-25 21:50
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('mapping_hubs', '0019_remove_individualmappinghubpage_partners_and_more'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='openmappinghubspage',
+            name='learn_more_text',
+            field=models.CharField(default='Learn More'),
+        ),
+    ]
diff --git a/app/mapping_hubs/models.py b/app/mapping_hubs/models.py
index 944edfb..f753455 100644
--- a/app/mapping_hubs/models.py
+++ b/app/mapping_hubs/models.py
@@ -94,7 +94,7 @@ class OpenMappingHubsPage(Page):
     )
     header_description = RichTextField(blank=True)
     hub_text = models.CharField(default="Hub", help_text="The text following a hub's name; i.e., if this field is 'Hub', the title for 'Asia-Pacific' would become 'Asia-Pacific Hub'.")
-    learn_more_text = models.CharField(default="Learn More about", help_text="The text preceeding the hub's name in the link text; i.e., if this field is 'Learn More about', the link text for 'Asia-Pacific Hub' would become 'Learn More about Asia-Pacific Hub'.")
+    learn_more_text = models.CharField(default="Learn More")
 
     header_hub_text_white = models.CharField(default="Open Mapping")
     header_hub_text_red = models.CharField(default="Hub")
diff --git a/app/mapping_hubs/templates/mapping_hubs/components/header.html b/app/mapping_hubs/templates/mapping_hubs/components/header.html
index c869311..8e16306 100644
--- a/app/mapping_hubs/templates/mapping_hubs/components/header.html
+++ b/app/mapping_hubs/templates/mapping_hubs/components/header.html
@@ -11,31 +11,24 @@
     <div class="bg-gradient-to-t from-black/70 to-transparent w-full">
         <div class="h-fit w-full pt-10 md:pb-16 text-white max-w-7xl mx-auto">
             <div class="grid grid-cols-1 lg:grid-cols-2 md:px-8 pt-10">
-                <div class="[&_a]:text-intro [&_a]:font-medium [&_a_p]:mt-2 [&_svg]:text-hot-red px-8 md:px-0">
+                <div class="[&_a]:text-intro [&_a]:font-medium [&_svg]:text-hot-red px-8 md:px-0">
                     <p class="font-bold text-h5">
                         {{ page.get_parent.specific.header_hub_text_white }} <span class="text-hot-red">{{ page.get_parent.specific.header_hub_text_red }}</span>
                     </p>
                     <h1 class="text-h1 font-semibold mb-4">
                         {{ page.title }}
                     </h1>
-                    <a href="{%include 'ui/components/PageOrLinkHrefText.html' with linkurl=page.header_project_link%}">
+                    <div class="grid gap-4">
                         <p>
-                            {{ page.get_parent.specific.header_project_link_text }}
-                            {% include "ui/components/icon_svgs/LinkCaret.html" %}
+                            {% include "ui/components/BaseLinkNoUnderlineWhite.html" with linkurl=page.header_project_link linktext=page.get_parent.specific.header_project_link_text %}
                         </p>
-                    </a>
-                    <a href="{%include 'ui/components/PageOrLinkHrefText.html' with linkurl=page.get_parent.specific.header_news_link%}">
                         <p>
-                            {{ page.get_parent.specific.header_news_link_text }}
-                            {% include "ui/components/icon_svgs/LinkCaret.html" %}
+                            {% include "ui/components/BaseLinkNoUnderlineWhite.html" with linkurl=page.get_parent.specific.header_news_link linktext=page.get_parent.specific.header_news_link_text %}
                         </p>
-                    </a>
-                    <a href="{%include 'ui/components/PageOrLinkHrefText.html' with linkurl=page.get_parent.specific.header_events_link%}">
                         <p>
-                            {{ page.get_parent.specific.header_events_link_text }}
-                            {% include "ui/components/icon_svgs/LinkCaret.html" %}
+                            {% include "ui/components/BaseLinkNoUnderlineWhite.html" with linkurl=page.get_parent.specific.header_events_link linktext=page.get_parent.specific.header_events_link_text %}
                         </p>
-                    </a>
+                    </div>
                 </div>
                 <div>
                     {% include "ui/components/ThreeElementCarousel.html" with carousel=page.header_carousel %}
diff --git a/app/mapping_hubs/templates/mapping_hubs/individual_mapping_hub_page.html b/app/mapping_hubs/templates/mapping_hubs/individual_mapping_hub_page.html
index 8297b3d..eed9abc 100644
--- a/app/mapping_hubs/templates/mapping_hubs/individual_mapping_hub_page.html
+++ b/app/mapping_hubs/templates/mapping_hubs/individual_mapping_hub_page.html
@@ -41,8 +41,8 @@
 
             {% comment %} NEWS AND EVENTS SECTIONS {% endcomment %}
             <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mt-10 mb-20">
-                {% include "ui/components/dogear_boxes/SpecialDogearLinkBox.html" with colour=page.main_colour title=page.news_section_title description=page.news_section_description linktext=page.news_section_link_text linkurl=page.news_section_link_url %}
-                {% include "ui/components/dogear_boxes/SpecialDogearLinkBox.html" with colour=page.main_colour title=page.events_section_title description=page.events_section_description linktext=page.events_section_link_text linkurl=page.events_section_link_url %}
+                {% include "ui/components/dogear_boxes/SpecialDogearLinkBox.html" with colour=page.main_colour title=page.news_section_title description=page.news_section_description linktext=page.news_section_link_text linkurl=page.news_section_link %}
+                {% include "ui/components/dogear_boxes/SpecialDogearLinkBox.html" with colour=page.main_colour title=page.events_section_title description=page.events_section_description linktext=page.events_section_link_text linkurl=page.events_section_link %}
             </div>
 
             {% comment %} PARTNERS SECTION {% endcomment %}
@@ -85,7 +85,9 @@ <h1 class="font-bold text-h2 border-b-hot-light-grey border-b-2 pb-4 mb-6">
             </div>
 
             {% comment %} SUBSCRIBE DOGEAR BOX SECTION {% endcomment %}
-            {% include "ui/components/dogear_boxes/DogearAnyColourLong.html" with colour=page.main_colour title=page.subscribe_box_text linktext=page.get_parent.specific.subscribe_box_signup_text linkurl=page.subscribe_box_signup_url %}
+            {% if page.subscribe_box_text %}
+                {% include "ui/components/dogear_boxes/DogearAnyColourLong.html" with colour=page.main_colour textcolor="[&_span]:text-white" title=page.subscribe_box_text linktext=page.get_parent.specific.subscribe_box_signup_text linkurl=page.subscribe_box_signup_url %}
+            {% endif %}
 
             {% comment %} EXPLORE OTHER HUBS SECTION {% endcomment %}
             <h1 class="text-h2 font-bold mt-20 mb-10">
diff --git a/app/mapping_hubs/templates/mapping_hubs/open_mapping_hubs_page.html b/app/mapping_hubs/templates/mapping_hubs/open_mapping_hubs_page.html
index 42a07e1..ca8d56f 100644
--- a/app/mapping_hubs/templates/mapping_hubs/open_mapping_hubs_page.html
+++ b/app/mapping_hubs/templates/mapping_hubs/open_mapping_hubs_page.html
@@ -10,7 +10,7 @@
 {% endblock extra_css %}
 
 {% block content %}
-    {% include "ui/components/BasePageHeader.html" with title=page.title image=page.header_image intro=page.header_description %}
+    {% include "ui/components/BasePageHeader.html" with title=page.title image=page.header_image intro=page.header_description smaller=True %}
 
     <div class="max-w-7xl mx-auto my-20">
         <div class="px-6 md:px-10">
diff --git a/app/members/migrations/0014_remove_membergroupownerpage_footer_box_button_link_and_more.py b/app/members/migrations/0014_remove_membergroupownerpage_footer_box_button_link_and_more.py
new file mode 100644
index 0000000..f24e4f5
--- /dev/null
+++ b/app/members/migrations/0014_remove_membergroupownerpage_footer_box_button_link_and_more.py
@@ -0,0 +1,25 @@
+# Generated by Django 4.2.7 on 2024-09-25 21:52
+
+from django.db import migrations
+import wagtail.blocks
+import wagtail.documents.blocks
+import wagtail.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('members', '0013_alter_membergroupownerpage_sort_by_titlea_and_more'),
+    ]
+
+    operations = [
+        migrations.RemoveField(
+            model_name='membergroupownerpage',
+            name='footer_box_button_link',
+        ),
+        migrations.AddField(
+            model_name='membergroupownerpage',
+            name='footer_box_button_url',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock())], blank=True, use_json_field=True),
+        ),
+    ]
diff --git a/app/members/models.py b/app/members/models.py
index ee59b9d..927dc3b 100644
--- a/app/members/models.py
+++ b/app/members/models.py
@@ -11,6 +11,8 @@
 from app.mapping_hubs.models import IndividualMappingHubPage
 from wagtail.search import index
 
+from app.core.models import LinkOrPageBlock
+
 class WebLinkStructBlock(StructBlock):
     link_text = CharBlock(required=True)
     link_url = URLBlock(required=False, blank=True)
@@ -40,7 +42,7 @@ class MemberGroupOwnerPage(Page):
     footer_box_title = models.CharField(default="Work for HOT")
     footer_box_description = RichTextField(blank=True)
     footer_box_button_text = models.CharField(default="Check our Job Opportunities")
-    footer_box_button_link = models.URLField(blank=True)
+    footer_box_button_url = StreamField(LinkOrPageBlock(), use_json_field=True, blank=True)
 
     content_panels = Page.content_panels + [
         MultiFieldPanel([
@@ -56,7 +58,7 @@ class MemberGroupOwnerPage(Page):
             FieldPanel('footer_box_title'),
             FieldPanel('footer_box_description'),
             FieldPanel('footer_box_button_text'),
-            FieldPanel('footer_box_button_link'),
+            FieldPanel('footer_box_button_url'),
         ], heading="Footer box"),
     ]
 
diff --git a/app/members/templates/members/member_group_page.html b/app/members/templates/members/member_group_page.html
index 68c5861..b750153 100644
--- a/app/members/templates/members/member_group_page.html
+++ b/app/members/templates/members/member_group_page.html
@@ -10,11 +10,11 @@
 {% endblock extra_css %}
 
 {% block content %}
-    {% include "ui/components/PageHeaderWithBlur.html" with title=page.title subtitle=page.intro image=page.header_image smaller=True %}
+    {% include "ui/components/PageHeaderWithBlur.html" with title=page.title subtitle=page.intro image=page.header_image smaller=True full_length=True %}
 
     <div class="max-w-7xl mx-auto px-6 md:px-10 my-10" x-data="{ params: new URLSearchParams((new URL(window.location.href)).search), activeParams: {} }">
         <div class="max-w-3xl">
-            <div class="text-intro">
+            <div class="text-intro font-medium">
                 {{page.body_intro|safe}}
             </div>
             <div class="base-article-m">
@@ -118,7 +118,7 @@
             {% endfor %}
         </div>
         <div class="my-10">
-            {% include "ui/components/FooterBannerWithTextAndLink.html" with text=page.get_parent.specific.footer_box_title url=page.get_parent.specific.footer_box_button_link buttontext=page.get_parent.specific.footer_box_button_text description=page.get_parent.specific.footer_box_description %}
+            {% include "ui/components/FooterBannerWithTextAndLink.html" with text=page.get_parent.specific.footer_box_title url=page.get_parent.specific.footer_box_button_url buttontext=page.get_parent.specific.footer_box_button_text description=page.get_parent.specific.footer_box_description %}
         </div>
     </div>
 {% endblock %}
diff --git a/app/misc/templates/misc/contact_us_page.html b/app/misc/templates/misc/contact_us_page.html
index a3fc9d7..f890d4a 100644
--- a/app/misc/templates/misc/contact_us_page.html
+++ b/app/misc/templates/misc/contact_us_page.html
@@ -66,7 +66,7 @@ <h1 class="text-h2 font-bold">
                                 <textarea class="mt-2 w-full bg-hot-off-white border-none px-4 min-h-48 resize-none" placeholder="{{page.message_field_text}}" type="text" name="message" required></textarea>
                             </div>
                             <div class="flex">
-                                <input type="submit" value="{{page.submit_button_text}}" class="bg-hot-red border-2 border-hot-red text-white cursor-pointer py-1 px-6 font-medium text-intro hover:bg-hot-off-white hover:text-hot-red">
+                                <input type="submit" value="{{page.submit_button_text}}" class="bg-hot-red border-2 border-hot-red text-white cursor-pointer py-1 px-hot-3 font-medium text-intro hover:bg-hot-burgundy hover:border-hot-burgundy duration-100">
                             </div>
                         </form>
                     </div>
diff --git a/app/misc/templates/misc/working_groups_page.html b/app/misc/templates/misc/working_groups_page.html
index eb173b5..655875e 100644
--- a/app/misc/templates/misc/working_groups_page.html
+++ b/app/misc/templates/misc/working_groups_page.html
@@ -10,7 +10,7 @@
 {% endblock extra_css %}
 
 {% block content %}
-    {% include "ui/components/PageHeaderWithBlur.html" with title=page.title subtitle=page.intro image=page.header_image smaller=True %}
+    {% include "ui/components/PageHeaderWithBlur.html" with title=page.title subtitle=page.intro image=page.header_image smaller=True full_length=True %}
     
     <div class="max-w-5xl mx-auto mt-10 mb-20">
         <div class="px-6 md:px-10 grid gap-16">
diff --git a/app/news/models.py b/app/news/models.py
index 9f54b7a..f1a9c1d 100644
--- a/app/news/models.py
+++ b/app/news/models.py
@@ -31,7 +31,7 @@ def get_context(self, request, *args, **kwargs):
         tags = [x[4:] for x in request.GET.keys() if x.startswith("tag.")]
         query = Q()
         for category in categories:
-            if request.GET.get(str(category), ''):
+            if request.GET.get("cat" + str(category.id), ''):
                 query = query | Q(categories=category)
         news_list = news_list.filter(query).distinct()
         
diff --git a/app/news/templates/news/news_owner_page.html b/app/news/templates/news/news_owner_page.html
index bb154b3..030a77e 100644
--- a/app/news/templates/news/news_owner_page.html
+++ b/app/news/templates/news/news_owner_page.html
@@ -42,7 +42,7 @@ <h1 class="text-h1 font-semibold my-10">{{page.title}}</h1>
                             {% for category in categories %}
                                 <div class="mt-4 flex">
                                     <label for="cat-{{forloop.counter}}">{{category.category_name}}</label>
-                                    <input class="ml-auto checked:bg-hot-red checked:hover:bg-hot-red checked:focus:bg-hot-red" id="cat-{{forloop.counter}}" type="checkbox" name="{{category.category_name}}" :checked="params.get('{{category.category_name}}')">
+                                    <input class="ml-auto checked:bg-hot-red checked:hover:bg-hot-red checked:focus:bg-hot-red" id="cat-{{forloop.counter}}" type="checkbox" name="cat{{category.id}}" :checked="params.get('cat{{category.id}}')">
                                 </div>
                             {% endfor %}
                         </div>
diff --git a/app/partners/templates/partners/our_partners_page.html b/app/partners/templates/partners/our_partners_page.html
index 7e92052..479199a 100644
--- a/app/partners/templates/partners/our_partners_page.html
+++ b/app/partners/templates/partners/our_partners_page.html
@@ -116,7 +116,7 @@
                 {% endif %}
             </p>
 
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-8 text-white my-20">
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-8 text-white mt-36 mb-20">
                 <div>
                     {% include "ui/components/dogear_boxes/DogearRed.html" with title=page.red_box_title linktext=page.red_box_link_text linkurl=page.red_box_link_url %}
                 </div>
diff --git a/app/rfp/migrations/0007_rename_header_description_requestforproposalownerpage_intro.py b/app/rfp/migrations/0007_rename_header_description_requestforproposalownerpage_intro.py
new file mode 100644
index 0000000..01c3b34
--- /dev/null
+++ b/app/rfp/migrations/0007_rename_header_description_requestforproposalownerpage_intro.py
@@ -0,0 +1,18 @@
+# Generated by Django 4.2.7 on 2024-09-27 19:15
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('rfp', '0006_remove_requestforproposalownerpage_job_opportunities_button_link_and_more'),
+    ]
+
+    operations = [
+        migrations.RenameField(
+            model_name='requestforproposalownerpage',
+            old_name='header_description',
+            new_name='intro',
+        ),
+    ]
diff --git a/app/rfp/models.py b/app/rfp/models.py
index 79db899..14326a2 100644
--- a/app/rfp/models.py
+++ b/app/rfp/models.py
@@ -33,7 +33,7 @@ def get_context(self, request, *args, **kwargs):
         related_name="+",
         help_text="Header image"
     )
-    header_description = RichTextField(blank=True)
+    intro = RichTextField(blank=True)
 
     current_rfps_title = models.CharField(default="Current RFPs")
     rfp_location_text = models.CharField(default="Location")
@@ -74,7 +74,7 @@ def get_context(self, request, *args, **kwargs):
     content_panels = Page.content_panels + [
         MultiFieldPanel([
             FieldPanel('header_image'),
-            FieldPanel('header_description'),
+            FieldPanel('intro'),
         ], heading="Header"),
         MultiFieldPanel([
             FieldPanel('current_rfps_title'),
diff --git a/app/rfp/templates/rfp/request_for_proposal_owner_page.html b/app/rfp/templates/rfp/request_for_proposal_owner_page.html
index a1c07d7..9d7bba9 100644
--- a/app/rfp/templates/rfp/request_for_proposal_owner_page.html
+++ b/app/rfp/templates/rfp/request_for_proposal_owner_page.html
@@ -10,7 +10,7 @@
 {% endblock extra_css %}
 
 {% block content %}
-    {% include "ui/components/PageHeaderWithBlur.html" with title=page.title subtitle=page.header_description image=page.header_image full_length=True %}
+    {% include "ui/components/PageHeaderWithBlur.html" with title=page.title subtitle=page.intro image=page.header_image full_length=True smaller=True %}
     
     <div class="max-w-7xl mx-auto my-10">
         <div class="px-6 md:px-10">
diff --git a/app/tech/migrations/0005_techproductsuitepage_category_filter_selector.py b/app/tech/migrations/0005_techproductsuitepage_category_filter_selector.py
new file mode 100644
index 0000000..6fecf25
--- /dev/null
+++ b/app/tech/migrations/0005_techproductsuitepage_category_filter_selector.py
@@ -0,0 +1,20 @@
+# Generated by Django 4.2.7 on 2024-09-27 21:54
+
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('news', '0021_remove_newsownerpage_view_all_news_url_and_more'),
+        ('tech', '0004_alter_individualtechstackpage_link_blocks_and_more'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='techproductsuitepage',
+            name='category_filter_selector',
+            field=models.ForeignKey(blank=True, help_text="The 'Tech News' link will be appended with a filter for this category. The selected category should be the Tech category.", null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='+', to='news.newscategory'),
+        ),
+    ]
diff --git a/app/tech/models.py b/app/tech/models.py
index 245cbbc..6acae4c 100644
--- a/app/tech/models.py
+++ b/app/tech/models.py
@@ -1,3 +1,4 @@
+from django import forms
 from django.db import models
 
 from wagtail.admin.panels import FieldPanel, MultiFieldPanel
@@ -101,6 +102,14 @@ class TechProductSuitePage(Page):
     black_box_title = models.CharField(default="Tech News")
     black_box_link_text = models.CharField(default="View tech news")
     black_box_link_url = StreamField(LinkOrPageBlock(), use_json_field=True, blank=True)
+    category_filter_selector = models.ForeignKey(
+        "news.NewsCategory",
+        null=True,
+        blank=True,
+        on_delete=models.SET_NULL,
+        related_name="+",
+        help_text="The 'Tech News' link will be appended with a filter for this category. The selected category should be the Tech category."
+    )
 
     go_back_text = models.CharField(default="Go Back to Tools & Resources")
     go_back_link = StreamField(LinkOrPageBlock(), use_json_field=True, blank=True)
@@ -126,6 +135,7 @@ class TechProductSuitePage(Page):
             FieldPanel('black_box_title'),
             FieldPanel('black_box_link_text'),
             FieldPanel('black_box_link_url'),
+            FieldPanel('category_filter_selector', widget=forms.RadioSelect),
         ], heading="Dogear Boxes"),
         MultiFieldPanel([
             FieldPanel('go_back_text'),
diff --git a/app/tech/templates/tech/tech_product_suite_page.html b/app/tech/templates/tech/tech_product_suite_page.html
index fddafd0..7b24cbd 100644
--- a/app/tech/templates/tech/tech_product_suite_page.html
+++ b/app/tech/templates/tech/tech_product_suite_page.html
@@ -46,7 +46,9 @@ <h1 class="text-h5 font-bold">
                     {% include "ui/components/dogear_boxes/DogearRed.html" with title=page.red_box_title linktext=page.red_box_link_text linkurl=page.red_box_link_url %}
                 </div>
                 <div>
-                    {% include "ui/components/dogear_boxes/DogearBlack.html" with title=page.black_box_title linktext=page.black_box_link_text linkurl=page.black_box_link_url %}
+                    {% with page.category_filter_selector.id|stringformat:"s" as id %}
+                        {% include "ui/components/dogear_boxes/DogearBlack.html" with title=page.black_box_title linktext=page.black_box_link_text linkurl=page.black_box_link_url linkappendage="?cat"|add:id|add:"=on" %}
+                    {% endwith %}
                 </div>
             </div>
 
diff --git a/app/tools_and_resources/migrations/0008_toolsandresourcespage_category_filter_selector.py b/app/tools_and_resources/migrations/0008_toolsandresourcespage_category_filter_selector.py
new file mode 100644
index 0000000..0265f76
--- /dev/null
+++ b/app/tools_and_resources/migrations/0008_toolsandresourcespage_category_filter_selector.py
@@ -0,0 +1,20 @@
+# Generated by Django 4.2.7 on 2024-09-27 23:25
+
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('news', '0021_remove_newsownerpage_view_all_news_url_and_more'),
+        ('tools_and_resources', '0007_remove_toolsandresourcespage_black_box_link_url_and_more'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='toolsandresourcespage',
+            name='category_filter_selector',
+            field=models.ForeignKey(blank=True, help_text="The 'Tech News' link will be appended with a filter for this category. The selected category should be the Tech category.", null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='+', to='news.newscategory'),
+        ),
+    ]
diff --git a/app/tools_and_resources/models.py b/app/tools_and_resources/models.py
index 529a573..bd8c236 100644
--- a/app/tools_and_resources/models.py
+++ b/app/tools_and_resources/models.py
@@ -1,3 +1,4 @@
+from django import forms
 from django.db import models
 
 from wagtail.models import Page
@@ -62,6 +63,14 @@ class ToolsAndResourcesPage(Page):
     dogear_tech_news_title = models.CharField(blank=True)
     dogear_tech_news_link_text = models.CharField(default="View our Tech News")
     dogear_tech_news_link = StreamField(LinkOrPageBlock(), use_json_field=True, blank=True)
+    category_filter_selector = models.ForeignKey(
+        "news.NewsCategory",
+        null=True,
+        blank=True,
+        on_delete=models.SET_NULL,
+        related_name="+",
+        help_text="The 'Tech News' link will be appended with a filter for this category. The selected category should be the Tech category."
+    )
 
     red_box_title = models.CharField(default="Start Mapping")
     red_box_link_text = models.CharField(default="Start Mapping")
@@ -92,6 +101,7 @@ class ToolsAndResourcesPage(Page):
             FieldPanel('dogear_tech_news_title'),
             FieldPanel('dogear_tech_news_link_text'),
             FieldPanel('dogear_tech_news_link'),
+            FieldPanel('category_filter_selector', widget=forms.RadioSelect),
             FieldPanel('red_box_title'),
             FieldPanel('red_box_link_text'),
             FieldPanel('red_box_link'),
diff --git a/app/tools_and_resources/templates/tools_and_resources/tools_and_resources_page.html b/app/tools_and_resources/templates/tools_and_resources/tools_and_resources_page.html
index 1db742b..0743d26 100644
--- a/app/tools_and_resources/templates/tools_and_resources/tools_and_resources_page.html
+++ b/app/tools_and_resources/templates/tools_and_resources/tools_and_resources_page.html
@@ -44,7 +44,9 @@ <h1 class="text-h2 font-bold">{{page.intro_header}}</h1>
     <div class="max-w-7xl mx-auto">
         <div class="px-6 md:px-10">
             <div class="my-20">
-                {% include "ui/components/dogear_boxes/DogearAnyColourLong.html" with title=page.dogear_tech_news_title linktext=page.dogear_tech_news_link_text linkurl=page.dogear_tech_news_link textcolour="black" colour="var(--hot-off-white)" arrowcolour="black" %}
+                {% with page.category_filter_selector.id|stringformat:"s" as id %}
+                    {% include "ui/components/dogear_boxes/DogearAnyColourLong.html" with title=page.dogear_tech_news_title linktext=page.dogear_tech_news_link_text linkurl=page.dogear_tech_news_link linkappendage="?cat"|add:id|add:"=on" textcolour="black" colour="var(--hot-off-white)" arrowcolour="black" %}
+                {% endwith %}
             </div>
 
             <div class="grid grid-cols-1 md:grid-cols-2 gap-8 text-white my-10">
diff --git a/app/ui/templates/ui/components/BaseLinkNoUnderlineWhite.html b/app/ui/templates/ui/components/BaseLinkNoUnderlineWhite.html
index 1e3abb1..b549726 100644
--- a/app/ui/templates/ui/components/BaseLinkNoUnderlineWhite.html
+++ b/app/ui/templates/ui/components/BaseLinkNoUnderlineWhite.html
@@ -2,9 +2,11 @@
     <a href="{%include 'ui/components/PageOrLinkHrefText.html'%}" class="font-medium text-white [&:hover_span]:underline [&:hover_span]:decoration-2">
 {% endif %}
     <span>{{linktext}}</span>
-    <span class="{%if whitearrow%}text-white{%else%}text-hot-red{%endif%}">
-        {% include "ui/components/icon_svgs/LinkCaret.html" with class="ml-2" %}
-    </span>
+    {% if whitearrow %}
+        {% include "ui/components/icon_svgs/LinkCaret.html" with class="ml-2 text-white" %}
+        {% else %}
+            {% include "ui/components/icon_svgs/LinkCaret.html" with class="ml-2 text-hot-red" %}
+    {% endif %}
 {% if not anchorless %}
     </a>
 {% endif %}
\ No newline at end of file
diff --git a/app/ui/templates/ui/components/BasePageHeader.html b/app/ui/templates/ui/components/BasePageHeader.html
index 7a80980..f5de7ce 100644
--- a/app/ui/templates/ui/components/BasePageHeader.html
+++ b/app/ui/templates/ui/components/BasePageHeader.html
@@ -11,7 +11,7 @@
 {% load wagtailimages_tags %}
 
 {% image image original as image_p %}
-<div class="w-full {%if smaller%}min-h-[20rem]{%else%}min-h-[24rem]{%endif%} content-end bg-no-repeat bg-cover bg-center" style="background-image: url('{{ image_p.url }}')">
+<div class="w-full min-h-[20rem] content-end bg-no-repeat bg-cover bg-center" style="background-image: url('{{ image_p.url }}')">
     <div class="bg-gradient-to-t from-black/70 to-transparent w-full">
         <div class="h-fit w-full py-10 text-white max-w-7xl mx-auto">
             <div class="grid grid-cols-1 lg:grid-cols-3">
diff --git a/app/ui/templates/ui/components/PageHeaderWithBlur.html b/app/ui/templates/ui/components/PageHeaderWithBlur.html
index 0e4d400..111f185 100644
--- a/app/ui/templates/ui/components/PageHeaderWithBlur.html
+++ b/app/ui/templates/ui/components/PageHeaderWithBlur.html
@@ -11,9 +11,9 @@
 
 {% image image original as image_p %}
 <div class="bg-no-repeat bg-cover relative bg-center" style="background-image: url('{{ image_p.url }}')">
-    <div class="{%if smaller%}min-h-[20rem]{%else%}min-h-[24rem]{%endif%} bg-gradient-to-r from-black/70 to-transparent before:w-full before:backdrop-blur-sm before:h-full before:block before:absolute {%if not full_length%}lg:before:w-5/6{%endif%}">
+    <div class="min-h-[20rem] bg-gradient-to-r from-black/70 to-transparent before:w-full before:backdrop-blur-sm before:h-full before:block before:absolute {%if not full_length%}lg:before:w-5/6{%endif%}">
         <div class="text-white max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-6 relative">
-            <div class="{%if smaller%}min-h-[20rem]{%else%}min-h-[24rem]{%endif%} py-10 px-10 pb-4 h-full col-span-5">
+            <div class="min-h-[20rem] py-10 px-10 pb-4 h-full col-span-5">
                 <div class="content-end {%if not endinlarge%}lg:content-center{%endif%} h-full py-10">
                     <h1 class="text-h1 font-bold lg:font-semibold text-wrap">
                         {{ title }}
diff --git a/app/ui/templates/ui/components/ThreeElementCarousel.html b/app/ui/templates/ui/components/ThreeElementCarousel.html
index a945c47..d615e85 100644
--- a/app/ui/templates/ui/components/ThreeElementCarousel.html
+++ b/app/ui/templates/ui/components/ThreeElementCarousel.html
@@ -16,19 +16,9 @@
             class="mt-20 lg:w-96 lg:mt-0 backdrop-blur-md p-8 shadow-md h-80 flex flex-col bg-hot-red md:bg-transparent">
             <div class="text-h4 font-bold h-fit">{{ block.value.header }}</div>
             <div class="text-lg font-regular h-fit my-2">{{ block.value.body }}</div>
-            <a href="{%include 'ui/components/PageOrLinkHrefText.html' with linkurl=block.value.action_button.link%}" class="mt-auto">
-                <div class="text-intro font-medium inline-flex space-x-5 items-center">
-                    <span>{{ block.value.action_button.text }}</span>
-                    
-                    <svg xmlns="http://www.w3.org/2000/svg"
-                        width="10.689"
-                        height="16.819"
-                        class="text-white md:text-hot-red"
-                        viewBox="0 0 10.689 16.819">
-                        <path id="Path_4671" data-name="Path 4671" d="M0,8.28,7,0l7,8.28" transform="translate(9.689 1.409) rotate(90)" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
-                    </svg>
-                </div>
-            </a>
+            <p class="mt-auto text-intro">
+                {% include "ui/components/BaseLinkNoUnderlineWhite.html" with linktext=block.value.action_button.text linkurl=block.value.action_button.link %}
+            </p>
         </div>
     {% endfor %}
     <div class="flex flex-row lg:flex-col justify-center lg:justify-normal bg-white md:bg-inherit [&_button]:text-hot-red [&_.selected]:text-white md:[&_button]:text-inherit">
diff --git a/app/ui/templates/ui/components/dogear_boxes/DogearAnyColourLong.html b/app/ui/templates/ui/components/dogear_boxes/DogearAnyColourLong.html
index ba9caaa..25b5033 100644
--- a/app/ui/templates/ui/components/dogear_boxes/DogearAnyColourLong.html
+++ b/app/ui/templates/ui/components/dogear_boxes/DogearAnyColourLong.html
@@ -11,7 +11,7 @@
     <h1 class="text-h3 font-bold col-span-3">
         {{ title }}
     </h1>
-    <p class="[&_span]:text-black self-center text-intro text-right">
+    <p class="{%if textcolor%}{{textcolor}}{%else%}[&_span]:text-black{%endif%} self-center text-intro text-right">
         {% include "ui/components/BaseLinkNoUnderline.html" %}
     </p>
 </div>
\ No newline at end of file
diff --git a/app/ui/templates/ui/components/mapping_hub/MappingHubPreviewExtendedBlock.html b/app/ui/templates/ui/components/mapping_hub/MappingHubPreviewExtendedBlock.html
index c246f0a..f1d4bd2 100644
--- a/app/ui/templates/ui/components/mapping_hub/MappingHubPreviewExtendedBlock.html
+++ b/app/ui/templates/ui/components/mapping_hub/MappingHubPreviewExtendedBlock.html
@@ -21,6 +21,6 @@ <h1 class="text-h3 font-semibold">
         {{hub.external_description_long|richtext}}
     </div>
     <p class="text-intro">
-        {% include "ui/components/BaseLink.html" with linktext=learn_more_text|add:" "|add:hub.title|add:" "|add:hub_text linkurl=hub.url %}
+        {% include "ui/components/BaseLink.html" with linktext=learn_more_text linkurl=hub.url %}
     </p>
 </div>
diff --git a/app/ui/templates/ui/components/misc_panels/PagePreviewWithTabletDescription.html b/app/ui/templates/ui/components/misc_panels/PagePreviewWithTabletDescription.html
index 3fdf9fa..f42a9b4 100644
--- a/app/ui/templates/ui/components/misc_panels/PagePreviewWithTabletDescription.html
+++ b/app/ui/templates/ui/components/misc_panels/PagePreviewWithTabletDescription.html
@@ -5,6 +5,7 @@
 - tablet_description: html element; the description of the block, which only shows on tablet sizes and smaller
 - read_more_text: string; the text to show for "read more"
 {% endcomment %}
+{% load wagtailcore_tags %}
 {% load wagtailimages_tags %}
 
 {% image image original as previmg %}
@@ -19,8 +20,8 @@ <h1 class="font-semibold text-h3 text-white">
         </div>
         <div class="hover-show row-start-1 col-start-1 opacity-0 pointer-events-none bg-hot-red text-white justify-center py-4 px-6 flex flex-col transition duration-100">
             <h2 class="text-h3 font-bold">{{page.title}}</h2>
-            <p class="">{{tablet_description}}</p>
-            <p class="mt-2">
+            <div class="w-full aspect-[3/1] overflow-hidden">{{tablet_description|richtext}}</div>
+            <p class="mt-4">
                 {% include "ui/components/BaseLinkNoUnderlineWhite.html" with anchorless=True linktext=read_more_text whitearrow=True %}
             </p>
         </div>
@@ -28,7 +29,7 @@ <h2 class="text-h3 font-bold">{{page.title}}</h2>
     <div class="lg:hidden">
         <h1 class="font-bold text-h3 my-2">{{page.title}}</h1>
         <div class="my-2">
-            {{tablet_description}}
+            {{tablet_description|richtext}}
         </div>
         <p class="text-hot-red font-medium">
             {{read_more_text}}
diff --git a/app/ui/templates/ui/components/navigation/FooterNavigation.html b/app/ui/templates/ui/components/navigation/FooterNavigation.html
index 179a6a8..f506214 100644
--- a/app/ui/templates/ui/components/navigation/FooterNavigation.html
+++ b/app/ui/templates/ui/components/navigation/FooterNavigation.html
@@ -18,15 +18,17 @@
             {% comment %} NAVIGATION ITEMS {% endcomment %}
             <div class="md:col-span-2 lg:col-span-3 md:columns-2 lg:columns-3">
                 {% for item in navigation %}
-                    {% if item.value.show_in_footer%}
+                    {% if item.value.show_in_footer %}
                         <div class="break-inside-avoid p-4">
                             <p class="font-bold text-intro hover:text-hot-red">
-                                <a href="{%if item.link_page%}{{item.link_page.url}}{%elif item.link_url%}{{item.link_url}}{%else%}#{%endif%}">{{item.value.title}}</a>
+                                <a href="{%include 'ui/components/PageOrLinkHrefText.html' with linkurl=item.value.link%}">{{item.value.title}}</a>
                             </p>
                             {% for child in item.value.children %}
-                                <p class="pt-1 text-small hover:text-hot-red">
-                                    <a href="{%if child.value.link_page%}{{child.value.link_page.url}}{%elif child.value.link_url%}{{child.value.link_url}}{%else%}#{%endif%}">{{child.value.title}}</a>
-                                </p>
+                                {% if child.value.link %}
+                                    <p class="pt-1 text-small hover:text-hot-red">
+                                        <a href="{%include 'ui/components/PageOrLinkHrefText.html' with linkurl=child.value.link%}">{{child.value.title}}</a>
+                                    </p>
+                                {% endif %}
                             {% endfor %}
                         </div>
                     {% endif %}
diff --git a/app/ui/templates/ui/components/navigation/HeaderNavbarItem.html b/app/ui/templates/ui/components/navigation/HeaderNavbarItem.html
index 3a9d72d..b50ffc5 100644
--- a/app/ui/templates/ui/components/navigation/HeaderNavbarItem.html
+++ b/app/ui/templates/ui/components/navigation/HeaderNavbarItem.html
@@ -5,21 +5,25 @@
 {% endcomment %}
 <div class="text-small font-medium [&>.show-at-large]:hidden [&:hover>.show-at-large]:block p-2 [&>p]:hover:text-hot-red [&_p:hover]:text-hot-red text-left">
     <p class="">
-        <a href="{%if item.link_page%}{{item.link_page.url}}{%elif item.link_url%}{{item.link_url}}{%else%}#{%endif%}">
+        {%if item.link%}
+            <a href="{%include 'ui/components/PageOrLinkHrefText.html' with linkurl=item.link%}">
+                <span class="{%if item.children%}pr-2{%endif%}">{{item.title}}</span>
+            </a>
+            {% else %}
             <span class="{%if item.children%}pr-2{%endif%}">{{item.title}}</span>
-        </a>
+        {%endif%}
         {% if item.children %}
             {% include "ui/components/icon_svgs/LinkCaret.html" with class="rotate-90 text-hot-red" %}
         {% endif %}
     </p>
 
     {% if item.children %}
-        <div class="show-at-large lg:absolute z-50 lg:mt-2 bg-hot-off-white lg:py-4 text-black">
+        <div class="show-at-large lg:absolute z-50 lg:mt-2 bg-white drop-shadow-md lg:py-4 text-black">
             {% comment %} CHILDREN NAVBAR ITEMS {% endcomment %}
             {% for child in item.children %}
-                <div class="[&>.show-at-large]:hidden [&:hover>.show-at-large]:block px-6 py-2 ">
+                <div class="[&>.show-at-large]:hidden [&:hover>.show-at-large]:block px-6 py-2">
                     <p class="">
-                        <a class="hover:text-hot-red" href="{%if child.value.link_page%}{{child.value.link_page.url}}{%elif child.value.link_url%}{{child.value.link_url}}{%else%}#{%endif%}">
+                        <a class="hover:text-hot-red" href="{%include 'ui/components/PageOrLinkHrefText.html' with linkurl=child.value.link%}">
                             {{child.value.title}}
                         </a>
                         {% if child.value.children %}
@@ -29,10 +33,10 @@
 
                     {% comment %} GRANDCHILDREN NAVBAR ITEMS {% endcomment %}
                     {% if child.value.children%}
-                        <div class="show-at-large nav-grandchild lg:absolute lg:-mt-8 lg:left-full bg-hot-off-white px-6 lg:py-4 lg:w-fit">
+                        <div class="show-at-large nav-grandchild lg:absolute lg:left-full -mt-11 bg-white px-6 lg:py-4 lg:w-fit" style="z-index: 49">
                             {% for gchild in child.value.children %}
-                                <p class="py-2 lg:w-fit">
-                                    <a href="{%if gchild.value.link_page%}{{gchild.value.link_page.url}}{%elif gchild.value.link_url%}{{gchild.value.link_url}}{%else%}#{%endif%}">
+                                <p class="py-2 lg:w-fit text-nowrap">
+                                    <a href="{%include 'ui/components/PageOrLinkHrefText.html' with linkurl=gchild.value.link%}">
                                         {{gchild.value.title}}
                                     </a>
                                 </p>
diff --git a/app/ui/templates/ui/components/navigation/HeaderNavbarItemMobile.html b/app/ui/templates/ui/components/navigation/HeaderNavbarItemMobile.html
index c9d240d..b18fecd 100644
--- a/app/ui/templates/ui/components/navigation/HeaderNavbarItemMobile.html
+++ b/app/ui/templates/ui/components/navigation/HeaderNavbarItemMobile.html
@@ -5,7 +5,7 @@
 {% endcomment %}
 <div x-data="{ opened: false }" class="text-small font-medium p-2 [&>p]:hover:text-hot-red [&_p:hover]:text-hot-red text-left">
     <p class="cursor-pointer" @click="opened = !opened">
-        <a href="{%if item.link_page%}{{item.link_page.url}}{%elif item.link_url%}{{item.link_url}}{%else%}#{%endif%}">
+        <a href="{%include 'ui/components/PageOrLinkHrefText.html' with linkurl=item.link%}">
             <span class="{%if item.children%}pr-2{%endif%}">{{item.title}}</span>
         </a>
         {% if item.children %}
@@ -19,7 +19,7 @@
             {% for child in item.children %}
                 <div class="px-6 py-2" x-data="{ gcOpened: false }">
                     <p class="cursor-pointer" @click="gcOpened = !gcOpened">
-                        <a class="hover:text-hot-red" href="{%if child.value.link_page%}{{child.value.link_page.url}}{%elif child.value.link_url%}{{child.value.link_url}}{%else%}#{%endif%}">
+                        <a class="hover:text-hot-red" href="{%include 'ui/components/PageOrLinkHrefText.html' with linkurl=child.value.link%}">
                             {{child.value.title}}
                         </a>
                         {% if child.value.children %}
@@ -32,7 +32,7 @@
                         <div class="show-at-large nav-grandchild lg:absolute lg:-mt-8 lg:left-full bg-hot-off-white px-6 lg:py-4 lg:w-fit" x-show="gcOpened">
                             {% for gchild in child.value.children %}
                                 <p class="py-2 lg:w-fit">
-                                    <a href="{%if gchild.value.link_page%}{{gchild.value.link_page.url}}{%elif gchild.value.link_url%}{{gchild.value.link_url}}{%else%}#{%endif%}">
+                                    <a href="{%include 'ui/components/PageOrLinkHrefText.html' with linkurl=gchild.value.link%}">
                                         {{gchild.value.title}}
                                     </a>
                                 </p>
diff --git a/app/who_we_are/templates/who_we_are/who_we_are_page.html b/app/who_we_are/templates/who_we_are/who_we_are_page.html
index abc2e05..7a846d2 100644
--- a/app/who_we_are/templates/who_we_are/who_we_are_page.html
+++ b/app/who_we_are/templates/who_we_are/who_we_are_page.html
@@ -19,7 +19,7 @@
                     <div class="base-article-m">
                         {{ page.intro|richtext }}
                     </div>
-                    <a href="{%include 'ui/components/PageOrLinkHrefText.html' with linkurl=page.learn_more_button_url%}">
+                    <a href="{%include 'ui/components/PageOrLinkHrefText.html' with linkurl=page.learn_more_button_link%}">
                         {% include "components/branded_elements/button.html" with text=page.learn_more_button_text classes="mt-4" %}
                     </a>
                 </div>
diff --git a/home/migrations/0040_alter_homepage_navigation_and_more.py b/home/migrations/0040_alter_homepage_navigation_and_more.py
new file mode 100644
index 0000000..fe2d6ed
--- /dev/null
+++ b/home/migrations/0040_alter_homepage_navigation_and_more.py
@@ -0,0 +1,26 @@
+# Generated by Django 4.2.7 on 2024-09-26 21:45
+
+from django.db import migrations
+import wagtail.blocks
+import wagtail.documents.blocks
+import wagtail.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('home', '0039_homepage_social_share_links'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='homepage',
+            name='navigation',
+            field=wagtail.fields.StreamField([('blocks', wagtail.blocks.StructBlock([('title', wagtail.blocks.CharBlock()), ('link', wagtail.blocks.StreamBlock([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock())], required=False)), ('show_in_footer', wagtail.blocks.BooleanBlock(help_text="If checked, this item (and its children) will show in the footer's navigation; otherwise, it will not show up.", required=False)), ('children', wagtail.blocks.StreamBlock([('nav_item', wagtail.blocks.StructBlock([('title', wagtail.blocks.CharBlock()), ('link', wagtail.blocks.StreamBlock([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock())], required=False)), ('children', wagtail.blocks.StreamBlock([('nav_item', wagtail.blocks.StructBlock([('title', wagtail.blocks.CharBlock()), ('link', wagtail.blocks.StreamBlock([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock())], required=False))]))], blank=True, null=True, required=False, use_json_field=True))]))], blank=True, null=True, required=False, use_json_field=True))]))], blank=True, help_text='The items of the navigation; this is shown on all pages.', null=True, use_json_field=True),
+        ),
+        migrations.AlterField(
+            model_name='homepage',
+            name='navigation_buttons',
+            field=wagtail.fields.StreamField([('button', wagtail.blocks.StructBlock([('title', wagtail.blocks.CharBlock()), ('link', wagtail.blocks.StreamBlock([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock())], required=False))]))], blank=True, help_text='The buttons of the navigation; these show up last in the navbar, and, unlike regular navigation items, show up at all times on medium screens.', null=True, use_json_field=True),
+        ),
+    ]
diff --git a/home/models.py b/home/models.py
index 8d0b903..9a90763 100644
--- a/home/models.py
+++ b/home/models.py
@@ -27,21 +27,18 @@ class CarouselBlock(StreamBlock):
 
 class ThirdNavigationStructBlock(StructBlock):
     title = CharBlock()
-    link_url = URLBlock(required=False, help_text="A link URL or page must be provided; if both are present, the link will default to the page.")
-    link_page = PageChooserBlock(required=False, help_text="A link URL or page must be provided; if both are present, the link will default to the page.")
+    link = LinkOrPageBlock(required=False)
 
 
 class SecondNavigationStructBlock(StructBlock):
     title = CharBlock()
-    link_url = URLBlock(required=False, help_text="A link URL or page must be provided; if both are present, the link will default to the page.")
-    link_page = PageChooserBlock(required=False, help_text="A link URL or page must be provided; if both are present, the link will default to the page.")
+    link = LinkOrPageBlock(required=False)
     children = StreamBlock([('nav_item',ThirdNavigationStructBlock())], use_json_field=True, null=True, blank=True, required=False)
 
 
 class NavigationStructBlock(StructBlock):
     title = CharBlock()
-    link_url = URLBlock(required=False, help_text="A link URL or page must be provided; if both are present, the link will default to the page.")
-    link_page = PageChooserBlock(required=False, help_text="A link URL or page must be provided; if both are present, the link will default to the page.")
+    link = LinkOrPageBlock(required=False)
     show_in_footer = BooleanBlock(required=False, help_text="If checked, this item (and its children) will show in the footer's navigation; otherwise, it will not show up.")
     children = StreamBlock([('nav_item',SecondNavigationStructBlock())], use_json_field=True, null=True, blank=True, required=False)
 
diff --git a/hot_osm/templates/components/branded_elements/button_bordered.html b/hot_osm/templates/components/branded_elements/button_bordered.html
index d311737..d56ca57 100644
--- a/hot_osm/templates/components/branded_elements/button_bordered.html
+++ b/hot_osm/templates/components/branded_elements/button_bordered.html
@@ -1,5 +1,5 @@
 <!-- Resolution: Added 'tabindex=0' to the element to fix an issue where the focus ring was not appearing in Safari. This makes the element focusable and ensures the focus ring is displayed. -->
 <button tabindex="0"
-        class="font-medium font-archivo transition duration-75 py-1 text-intro border-2 border-white text-white px-hot-3 hover:bg-hot-off-white hover:text-hot-red focus:bg-transparent focus:text-hot-red focus:ring-2 focus:ring-hot-red focus:ring-inset {{ classes }}">
+        class="font-medium font-archivo transition duration-75 py-1 text-intro border-2 border-white text-white px-hot-3 hover:bg-white hover:text-hot-red focus:bg-transparent focus:text-hot-red focus:ring-2 focus:ring-hot-red focus:ring-inset {{ classes }}">
     {{ text }}
 </button>

From 63bf37126f8056d4af3a987847bd44b9681dbe08 Mon Sep 17 00:00:00 2001
From: luminaryFlowers <71102109+luminaryFlowers@users.noreply.github.com>
Date: Thu, 3 Oct 2024 14:39:19 -0700
Subject: [PATCH 08/15] created donate page, added customisable home page
 statistics

---
 app/misc/migrations/0027_donatepage.py        | 25 +++++++
 ..._donatepage_banner_description_and_more.py | 43 +++++++++++
 ...9_alter_donatepage_other_ways_to_donate.py | 21 ++++++
 app/misc/models.py                            | 33 ++++++++
 app/misc/templates/misc/donate_page.html      | 75 +++++++++++++++++++
 .../our_work/components/MapboxScript.html     |  2 +-
 .../tools_and_resources_page.html             |  2 +-
 .../ui/components/PageHeaderWithBlur.html     |  2 +-
 .../news/NewsPreviewBlockProjects.html        |  4 +-
 home/migrations/0041_homepage_home_stats.py   | 20 +++++
 .../0042_alter_homepage_home_stats.py         | 20 +++++
 home/models.py                                | 57 ++++++++++++++
 home/templates/home/components/StatBlock.html | 20 ++++-
 home/templates/home/home_page.html            | 17 +++--
 home/templatetags/homepage_filters.py         | 16 ++++
 home/wagtail_hooks.py                         |  8 ++
 16 files changed, 353 insertions(+), 12 deletions(-)
 create mode 100644 app/misc/migrations/0027_donatepage.py
 create mode 100644 app/misc/migrations/0028_donatepage_banner_description_and_more.py
 create mode 100644 app/misc/migrations/0029_alter_donatepage_other_ways_to_donate.py
 create mode 100644 app/misc/templates/misc/donate_page.html
 create mode 100644 home/migrations/0041_homepage_home_stats.py
 create mode 100644 home/migrations/0042_alter_homepage_home_stats.py
 create mode 100644 home/templatetags/homepage_filters.py
 create mode 100644 home/wagtail_hooks.py

diff --git a/app/misc/migrations/0027_donatepage.py b/app/misc/migrations/0027_donatepage.py
new file mode 100644
index 0000000..0acd2e4
--- /dev/null
+++ b/app/misc/migrations/0027_donatepage.py
@@ -0,0 +1,25 @@
+# Generated by Django 4.2.7 on 2024-10-01 16:28
+
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('wagtailcore', '0089_log_entry_data_json_null_to_object'),
+        ('misc', '0026_salaryframeworkpage'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='DonatePage',
+            fields=[
+                ('page_ptr', models.OneToOneField(auto_created=True, on_delete=django.db.models.deletion.CASCADE, parent_link=True, primary_key=True, serialize=False, to='wagtailcore.page')),
+            ],
+            options={
+                'abstract': False,
+            },
+            bases=('wagtailcore.page',),
+        ),
+    ]
diff --git a/app/misc/migrations/0028_donatepage_banner_description_and_more.py b/app/misc/migrations/0028_donatepage_banner_description_and_more.py
new file mode 100644
index 0000000..dd14a77
--- /dev/null
+++ b/app/misc/migrations/0028_donatepage_banner_description_and_more.py
@@ -0,0 +1,43 @@
+# Generated by Django 4.2.7 on 2024-10-01 19:21
+
+from django.db import migrations, models
+import django.db.models.deletion
+import wagtail.blocks
+import wagtail.fields
+import wagtail.images.blocks
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('wagtailimages', '0025_alter_image_file_alter_rendition_file'),
+        ('misc', '0027_donatepage'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='donatepage',
+            name='banner_description',
+            field=wagtail.fields.RichTextField(blank=True),
+        ),
+        migrations.AddField(
+            model_name='donatepage',
+            name='banner_image',
+            field=models.ForeignKey(blank=True, help_text='Header image', null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='+', to='wagtailimages.image'),
+        ),
+        migrations.AddField(
+            model_name='donatepage',
+            name='intro',
+            field=wagtail.fields.RichTextField(blank=True),
+        ),
+        migrations.AddField(
+            model_name='donatepage',
+            name='other_ways_to_donate',
+            field=wagtail.fields.StreamField([('icon', wagtail.images.blocks.ImageChooserBlock()), ('title', wagtail.blocks.CharBlock()), ('text', wagtail.blocks.RichTextBlock())], blank=True, use_json_field=True),
+        ),
+        migrations.AddField(
+            model_name='donatepage',
+            name='other_ways_to_donate_title',
+            field=models.CharField(default='Other Ways to Donate'),
+        ),
+    ]
diff --git a/app/misc/migrations/0029_alter_donatepage_other_ways_to_donate.py b/app/misc/migrations/0029_alter_donatepage_other_ways_to_donate.py
new file mode 100644
index 0000000..863f696
--- /dev/null
+++ b/app/misc/migrations/0029_alter_donatepage_other_ways_to_donate.py
@@ -0,0 +1,21 @@
+# Generated by Django 4.2.7 on 2024-10-01 19:30
+
+from django.db import migrations
+import wagtail.blocks
+import wagtail.fields
+import wagtail.images.blocks
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('misc', '0028_donatepage_banner_description_and_more'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='donatepage',
+            name='other_ways_to_donate',
+            field=wagtail.fields.StreamField([('block', wagtail.blocks.StructBlock([('icon', wagtail.images.blocks.ImageChooserBlock()), ('title', wagtail.blocks.CharBlock()), ('text', wagtail.blocks.RichTextBlock())]))], blank=True, use_json_field=True),
+        ),
+    ]
diff --git a/app/misc/models.py b/app/misc/models.py
index a97decf..1a24d03 100644
--- a/app/misc/models.py
+++ b/app/misc/models.py
@@ -565,3 +565,36 @@ class SalaryFrameworkPage(Page):
             FieldPanel('sidebar_block_button_link'),
         ]),
     ]
+
+
+class DonatePage(Page):
+    max_count = 1
+
+    banner_image = models.ForeignKey(
+        "wagtailimages.Image",
+        null=True,
+        blank=True,
+        on_delete=models.SET_NULL,
+        related_name="+",
+        help_text="Header image"
+    )
+    banner_description = RichTextField(blank=True)
+
+    intro = RichTextField(blank=True)
+
+    other_ways_to_donate_title = models.CharField(default="Other Ways to Donate")
+    other_ways_to_donate = StreamField([
+        ('block', StructBlock([
+            ('icon', ImageChooserBlock()),
+            ('title', CharBlock()),
+            ('text', RichTextBlock()),
+        ]))
+    ], use_json_field=True, blank=True)
+
+    content_panels = Page.content_panels + [
+        FieldPanel('banner_image'),
+        FieldPanel('banner_description'),
+        FieldPanel('intro'),
+        FieldPanel('other_ways_to_donate_title'),
+        FieldPanel('other_ways_to_donate'),
+    ]
diff --git a/app/misc/templates/misc/donate_page.html b/app/misc/templates/misc/donate_page.html
new file mode 100644
index 0000000..d7ec77c
--- /dev/null
+++ b/app/misc/templates/misc/donate_page.html
@@ -0,0 +1,75 @@
+{% extends "base.html" %}
+{% load static %}
+{% load wagtailcore_tags %}
+{% load wagtailimages_tags %}
+{% load compress %}
+{% block body_class %}template-donatepage{% endblock %}
+{% block extra_css %}
+    {% compress css %}
+    {% endcompress css %}
+{% endblock extra_css %}
+
+{% block content %}
+    {% include "ui/components/PageHeaderWithBlur.html" with title=page.title image=page.banner_image subtitle=page.banner_description %}
+
+    <div class="max-w-7xl mx-auto">
+        <div class="px-6 md:px-10">
+            <div class="max-w-5xl mx-auto mt-10 mb-20">
+                <div class="text-intro font-medium mb-10">
+                    {{page.intro|richtext}}
+                </div>
+
+                <div id="donation-form"></div>
+            </div>
+            
+            <script src="https://cdn.donately.com/core/5.6/donately.min.js"></script>
+            <script>
+            document.addEventListener('DOMContentLoaded', function(){
+            Donately.init({
+                selector: '#donation-form',
+                options: {
+                "donately-id":"act_6050cafb6dc1",
+                "stripe-publishable-key":"pk_live_V98OphdHjflWilBEfL1IK28w",
+                "donately-form-id":"frm_d317bd5dd6fd",
+                "donately-presets":"20,50,100,500,1000",
+                "donately-amount":"{\"default\":\"50\"}",
+                "donately-currency":"USD,EUR,GBP,CAD",
+                "donately-payment-options":"cc,ach",
+                "donately-recurring-frequency":"[\"false\",\"1.month\"]",
+                "donately-donor-pays-fees":"{\"cc\":{\"processor_percent\":0.029,\"processor_fixed\":0.3,\"processor_cap\":\"\",\"dntly_percent\":0.02,\"complex_calc\":true},\"ach\":{\"processor_percent\":0.008,\"processor_fixed\":0,\"processor_cap\":5,\"dntly_percent\":0.02,\"complex_calc\":true},\"preselected\":true}",
+                "donately-billing-zip":"true",
+                "donately-comment":true,
+                "donately-anonymous":true,
+                "donately-i18n-locale":"en_US",
+                "donately-form-navigation":"{\"steps\":[[\"presets\",\"amount\",\"donorpaysfees\",\"recurringgroup\",\"paymentmethods\",\"namegroup\",\"email\",\"billingzip\",\"comment\",\"onbehalf\",\"anonymous\",\"submit\"]]}",
+                "donately-onbehalf":true,
+                },
+                afterFormLoad: function() {},
+                afterNavigateHook: function(stepNumber) {},
+                onSuccess: function(donation){},
+                onError: function(error){}
+            })
+            }, false);
+            </script>
+
+            <div class="mb-20">
+                <h2 class="text-h2 font-bold mb-8">{{page.other_ways_to_donate_title}}</h2>
+                <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+                    {% for block in page.other_ways_to_donate %}
+                        <div class="p-6 bg-hot-off-white">
+                            {% image block.value.icon original class="h-8 w-8 mt-2" %}
+                            <h1 class="text-h4 font-semibold mt-4">
+                                {{block.value.title}}
+                            </h1>
+                            <div class="base-article-m">
+                                {{block.value.text}}
+                            </div>
+                        </div>
+                    {% endfor %}
+                </div>
+            </div>
+        </div>
+    </div>
+{% endblock %}
+
+
diff --git a/app/our_work/templates/our_work/components/MapboxScript.html b/app/our_work/templates/our_work/components/MapboxScript.html
index 3b707c2..ef515a1 100644
--- a/app/our_work/templates/our_work/components/MapboxScript.html
+++ b/app/our_work/templates/our_work/components/MapboxScript.html
@@ -8,7 +8,7 @@
 
         const map = new mapboxgl.Map({
             container: 'map',
-            style: 'mapbox://styles/mapbox/streets-v12',
+            style: 'mapbox://styles/hot/ckjrx5rtn73xu19liyfan4ar4',
             center: [0, 0],
             zoom: 2
         });
diff --git a/app/tools_and_resources/templates/tools_and_resources/tools_and_resources_page.html b/app/tools_and_resources/templates/tools_and_resources/tools_and_resources_page.html
index 0743d26..c301772 100644
--- a/app/tools_and_resources/templates/tools_and_resources/tools_and_resources_page.html
+++ b/app/tools_and_resources/templates/tools_and_resources/tools_and_resources_page.html
@@ -19,7 +19,7 @@
                     <h1 class="text-h2 font-bold">{{page.intro_header}}</h1>
 
                     <div class="base-article-m">
-                        {{page.description|safe}}
+                        {{page.description|richtext}}
                     </div>
 
                     <p class="mt-4">
diff --git a/app/ui/templates/ui/components/PageHeaderWithBlur.html b/app/ui/templates/ui/components/PageHeaderWithBlur.html
index 111f185..d24cff8 100644
--- a/app/ui/templates/ui/components/PageHeaderWithBlur.html
+++ b/app/ui/templates/ui/components/PageHeaderWithBlur.html
@@ -11,7 +11,7 @@
 
 {% image image original as image_p %}
 <div class="bg-no-repeat bg-cover relative bg-center" style="background-image: url('{{ image_p.url }}')">
-    <div class="min-h-[20rem] bg-gradient-to-r from-black/70 to-transparent before:w-full before:backdrop-blur-sm before:h-full before:block before:absolute {%if not full_length%}lg:before:w-5/6{%endif%}">
+    <div class="min-h-[20rem] bg-gradient-to-r from-black/70 to-transparent before:w-full before:backdrop-blur-sm before:h-full before:block before:absolute">
         <div class="text-white max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-6 relative">
             <div class="min-h-[20rem] py-10 px-10 pb-4 h-full col-span-5">
                 <div class="content-end {%if not endinlarge%}lg:content-center{%endif%} h-full py-10">
diff --git a/app/ui/templates/ui/components/news/NewsPreviewBlockProjects.html b/app/ui/templates/ui/components/news/NewsPreviewBlockProjects.html
index ede4717..7214abf 100644
--- a/app/ui/templates/ui/components/news/NewsPreviewBlockProjects.html
+++ b/app/ui/templates/ui/components/news/NewsPreviewBlockProjects.html
@@ -17,7 +17,9 @@
         {% endif %}
 
         <p class="text-hot-red text-small font-semibold">
-            Blog
+            {% for category in news.categories.all %}
+                {{category.category_name}}{% if not forloop.last %}, {% endif %}
+            {% endfor %}
         </p>
 
         <hr class="my-2" />
diff --git a/home/migrations/0041_homepage_home_stats.py b/home/migrations/0041_homepage_home_stats.py
new file mode 100644
index 0000000..dd25d49
--- /dev/null
+++ b/home/migrations/0041_homepage_home_stats.py
@@ -0,0 +1,20 @@
+# Generated by Django 4.2.7 on 2024-10-03 16:59
+
+from django.db import migrations
+import wagtail.blocks
+import wagtail.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('home', '0040_alter_homepage_navigation_and_more'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='homepage',
+            name='home_stats',
+            field=wagtail.fields.StreamField([('stat', wagtail.blocks.StructBlock([('fallback_number', wagtail.blocks.CharBlock(help_text='Displays if no API is given, or if the API call fails.')), ('statistic', wagtail.blocks.CharBlock()), ('tooltip', wagtail.blocks.CharBlock(help_text="If this field is filled, an info 'i' will appear in this stat block, which will show this text when hovered.", required=False)), ('api', wagtail.blocks.StreamBlock([('api', wagtail.blocks.StructBlock([('name', wagtail.blocks.CharBlock(help_text='This name will be used for caching the result of this API, and as such, should be unique.')), ('endpoint', wagtail.blocks.CharBlock(help_text='This is the URL that will be called; should return a JSON object.')), ('key_path', wagtail.blocks.StreamBlock([('key', wagtail.blocks.CharBlock())], help_text="This should lead to the value that should be displayed for this API; i.e., if the result of calling the endpoint is a JSON object { 'result': {'stat': 10 } }, this field should have 'result' and 'stat' as keys, in that order (order matters)."))]))], help_text='', required=False))]))], blank=True, help_text='Do not touch this field unless you know what you are doing.', use_json_field=True),
+        ),
+    ]
diff --git a/home/migrations/0042_alter_homepage_home_stats.py b/home/migrations/0042_alter_homepage_home_stats.py
new file mode 100644
index 0000000..826f320
--- /dev/null
+++ b/home/migrations/0042_alter_homepage_home_stats.py
@@ -0,0 +1,20 @@
+# Generated by Django 4.2.7 on 2024-10-03 19:14
+
+from django.db import migrations
+import wagtail.blocks
+import wagtail.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('home', '0041_homepage_home_stats'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='homepage',
+            name='home_stats',
+            field=wagtail.fields.StreamField([('stat', wagtail.blocks.StructBlock([('fallback_number', wagtail.blocks.CharBlock(help_text='Displays if no API is given, or if the API call fails.')), ('statistic', wagtail.blocks.CharBlock()), ('tooltip', wagtail.blocks.CharBlock(help_text="If this field is filled, an info 'i' will appear in this stat block, which will show this text when hovered.", required=False)), ('api', wagtail.blocks.StreamBlock([('api', wagtail.blocks.StructBlock([('name', wagtail.blocks.CharBlock(help_text='This name will be used for caching the result of this API, and as such, should be unique.')), ('endpoint', wagtail.blocks.CharBlock(help_text='This is the URL that will be called; should return a JSON object.')), ('key_path', wagtail.blocks.StreamBlock([('key', wagtail.blocks.CharBlock())], help_text="This should lead to the value that should be displayed for this API; i.e., if the result of calling the endpoint is a JSON object { 'result': {'stat': 10 } }, this field should have 'result' and 'stat' as keys, in that order, so as to navigate to ['result']['stat']."))]))], help_text='', required=False))]))], blank=True, help_text='Do not touch this field unless you know what you are doing.', use_json_field=True),
+        ),
+    ]
diff --git a/home/models.py b/home/models.py
index 9a90763..e28ab1f 100644
--- a/home/models.py
+++ b/home/models.py
@@ -9,6 +9,9 @@
 from app.mapping_hubs.models import IndividualMappingHubPage
 from app.core.models import LinkOrPageBlock
 
+import requests
+from django.core.cache import cache
+
 
 class ActionButtonBlock(StructBlock):
     text = CharBlock(required=True, help_text="Text to display on the button")
@@ -47,6 +50,53 @@ class NavigationBlock(StreamBlock):
     blocks = NavigationStructBlock()
 
 
+def get_apis(stats):
+    responses = cache.get('home_page_stats')
+
+    if not responses:
+        responses = stats.raw_data
+
+        for stat in responses:
+            if stat['value']['api']:
+                api = stat['value']['api'][0]['value']
+                try:
+                    res = requests.get(str(api['endpoint'])).json()
+                    for key in api['key_path']:
+                        res = res[str(key['value'])]
+                    stat['value']['api'] = res
+                except:
+                    stat['value']['api'] = None
+        
+        # the "timeout" here controls how long the api calls are cached for (in seconds).
+        # additionally, updating the home page will immediately clear the cache; 
+        # this is controlled in the wagtail_hooks.py file in this directory.
+        cache.set('home_page_stats', responses, timeout=3600)
+
+    return responses
+
+
+class APIBlock(StreamBlock):
+    api = StructBlock([
+        ('name', CharBlock(help_text="This name will be used for caching the result of this API, and as such, should be unique.")),
+        ('endpoint', CharBlock(help_text="This is the URL that will be called; should return a JSON object.")),
+        ('key_path', StreamBlock([
+            ('key', CharBlock())
+        ], help_text="This should lead to the value that should be displayed for this API; i.e., if the result of calling the endpoint is a JSON object { 'result': {'stat': 10 } }, this field should have 'result' and 'stat' as keys, in that order, so as to navigate to ['result']['stat']."))
+    ])
+
+    class Meta:
+        max_num = 1
+
+
+class StatBlock(StreamBlock):
+    stat = StructBlock([
+        ('fallback_number', CharBlock(help_text="Displays if no API is given, or if the API call fails. This is a string so for numbers you'll want to format it (i.e., 1300 should be typed as 1.3K).")),
+        ('statistic', CharBlock(help_text="Displays as the description of the statistic.")),
+        ('tooltip', CharBlock(required=False, help_text="If this field is filled, an info 'i' will appear in this stat block, which will show this text when hovered.")),
+        ('api', APIBlock(required=False, help_text="Do not touch this field unless you know what you are doing."))
+    ])
+
+
 class HomePage(Page):
     def get_context(self, request, *args, **kwargs):
         context = super().get_context(request, *args, **kwargs)
@@ -55,6 +105,11 @@ def get_context(self, request, *args, **kwargs):
         context['impact_areas'] = impact_areas
         mapping_hubs = IndividualMappingHubPage.objects.live().filter(locale=context['page'].locale)
         context['mapping_hubs'] = mapping_hubs
+
+        responses = get_apis(context['page'].specific.home_stats)
+
+        context['api_responses'] = responses
+
         return context
     
     max_count = 1
@@ -154,6 +209,7 @@ def get_context(self, request, *args, **kwargs):
         blank=True,
         use_json_field=True,
     )
+    home_stats = StreamField(StatBlock(), use_json_field=True, blank=True)
 
     our_work_background = models.ForeignKey(
         "wagtailimages.Image",
@@ -277,6 +333,7 @@ def get_context(self, request, *args, **kwargs):
             FieldPanel("hero_cta"),
             FieldPanel("hero_cta_link"),
             FieldPanel("carousel"),
+            FieldPanel('home_stats'),
         ], heading="Banner"),
         MultiFieldPanel([
             FieldPanel('our_work_background'),
diff --git a/home/templates/home/components/StatBlock.html b/home/templates/home/components/StatBlock.html
index 7b253b6..2e9ded3 100644
--- a/home/templates/home/components/StatBlock.html
+++ b/home/templates/home/components/StatBlock.html
@@ -1,4 +1,18 @@
-<div class="md:backdrop-blur-lg md:shadow-md flex flex-col justify-center text-center h-32 p-4">
-    <div class="font-semibold text-h4">{{number}}</div>
-    <div>{{stat}}</div>
+{% load homepage_filters %}
+
+<div class="md:backdrop-blur-lg md:shadow-md flex flex-col justify-center text-center h-32 p-4 stat-block" :class="open ? 'z-30' : ''" x-data="{ open: false }">
+    <div x-text="`{{number|prettify_number}}`" class="font-semibold text-h4"></div>
+    <div class="flex justify-center gap-1 flex-wrap">
+        <p x-text="`{{stat}}`"></p>
+        {% if tooltiptext %}
+            <div class="relative" @click.away="open = false">
+                <p class="cursor-pointer" @click="open = !open">ⓘ</p>
+                <div class="absolute show-at-hover" :class="open ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none'">
+                    <p class="relative bg-white text-black shadow-md p-4 w-48">
+                        {{tooltiptext}}
+                    </p>
+                </div>
+            </div>
+        {% endif %}
+    </div>
 </div>
\ No newline at end of file
diff --git a/home/templates/home/home_page.html b/home/templates/home/home_page.html
index 0b6c75b..49774cc 100644
--- a/home/templates/home/home_page.html
+++ b/home/templates/home/home_page.html
@@ -39,11 +39,18 @@
                         {% include "home/components/HomeSpecificCarousel.html" %}
                     </div>
                     <!--CTA Statistics, TODO: Use HTMX to query endpoint for stats once the endpoint exists  -->
-                    <div class="grid grid-cols-2 md:grid-cols-4 h-full md:pt-16 bg-hot-red md:bg-transparent gap-8 max-w-5xl mx-auto md:px-4">
-                        {% include "./components/StatBlock.html" with number="468K" stat="Total Mappers ⓘ" %}
-                        {% include "./components/StatBlock.html" with number="246.7M" stat="Total Map Edits ⓘ" %}
-                        {% include "./components/StatBlock.html" with number="147.5M" stat="Buildings Mapped ⓘ" %}
-                        {% include "./components/StatBlock.html" with number="2.7M" stat="Roads Mapped(KM) ⓘ" %}
+                    <div class="grid grid-cols-2 md:grid-cols-4 h-full md:pt-16 bg-hot-red md:bg-transparent gap-8 max-w-5xl mx-auto md:px-4 [&_.stat-block:nth-child(odd)_.show-at-hover]:left-0 [&_.stat-block:nth-child(even)_.show-at-hover]:right-0 md:[&_.stat-block:nth-child(-n+2)_.show-at-hover]:left-0 md:[&_.stat-block:nth-child(n+1)_.show-at-hover]:right-0">
+                        {% for stat in api_responses %}
+                            {% if stat.value.api %}
+                                {% include "./components/StatBlock.html" with number=stat.value.api stat=stat.value.statistic tooltiptext=stat.value.tooltip %}
+                                {% else %}
+                                    {% include "./components/StatBlock.html" with number=stat.value.fallback_number stat=stat.value.statistic tooltiptext=stat.value.tooltip %}
+                            {% endif %}
+                        {% endfor %}
+                        {% comment %} {% include "./components/StatBlock.html" with number=tm_json.totalMappers stat="Total Mappers" %}
+                        {% include "./components/StatBlock.html" with number="246.7M" stat="Total Map Edits" %}
+                        {% include "./components/StatBlock.html" with number="147.5M" stat="Buildings Mapped" %}
+                        {% include "./components/StatBlock.html" with number="2.7M" stat="Roads Mapped(KM)" %} {% endcomment %}
                     </div>
                 </div>
             </div>
diff --git a/home/templatetags/homepage_filters.py b/home/templatetags/homepage_filters.py
new file mode 100644
index 0000000..62fc4e0
--- /dev/null
+++ b/home/templatetags/homepage_filters.py
@@ -0,0 +1,16 @@
+from django import template
+import numbers
+
+register = template.Library()
+
+@register.filter
+def prettify_number(value):
+    if not isinstance(value, numbers.Number):
+        return value
+    
+    if value >= 1000000:
+        value = "{value:.1f}M".format(value=value/1000000)
+    elif value >= 1000:
+        value = "{value:.1f}K".format(value=value/1000)
+    
+    return value
\ No newline at end of file
diff --git a/home/wagtail_hooks.py b/home/wagtail_hooks.py
new file mode 100644
index 0000000..e7d4001
--- /dev/null
+++ b/home/wagtail_hooks.py
@@ -0,0 +1,8 @@
+from wagtail import hooks
+from django.core.cache import cache
+from home.models import HomePage
+
+@hooks.register('after_edit_page')
+def after_edit_page(request, page):
+    if isinstance(page, HomePage):
+        cache.delete('home_page_stats')

From 883c49003f9e7785f9eccece500fc60c9bec0b2c Mon Sep 17 00:00:00 2001
From: luminaryFlowers <71102109+luminaryFlowers@users.noreply.github.com>
Date: Fri, 11 Oct 2024 09:50:12 -0700
Subject: [PATCH 09/15] various small changes, home page mailchimp integration

---
 app/core/models.py                            |   1 +
 ...0011_eventownerpage_remove_filters_text.py |  18 +++
 ...ter_eventownerpage_view_all_events_link.py |  21 ++++
 app/events/models.py                          |   4 +-
 .../templates/events/event_owner_page.html    |  11 +-
 .../events/individual_event_page.html         |  10 +-
 ...getinvolvedpage_black_box_link_and_more.py |  47 ++++++++
 .../get_involved/get_involved_page.html       |   2 +-
 ...reaspage_black_dogear_box_link_and_more.py |  36 ++++++
 .../impact_areas/impact_areas_page.html       |   6 +-
 .../individual_impact_area_page.html          |   4 +-
 ...unitiespage_black_box_link_url_and_more.py |  31 +++++
 ...ghubpage_contact_section_links_and_more.py |  76 +++++++++++++
 .../mapping_hubs/components/header.html       |  14 ++-
 .../individual_mapping_hub_page.html          |  12 +-
 ...embergroupownerpage_remove_filters_text.py |  18 +++
 ...bergroupownerpage_footer_box_button_url.py |  21 ++++
 app/members/models.py                         |   2 +
 .../templates/members/member_group_page.html  |  11 +-
 app/misc/migrations/0030_multimediapage.py    |  46 ++++++++
 ...031_alter_multimediapage_image_previews.py |  21 ++++
 ...banner_description_multimediapage_intro.py |  18 +++
 ...033_alter_multimediapage_video_previews.py |  20 ++++
 ...conductpage_our_policies_links_and_more.py | 107 ++++++++++++++++++
 app/misc/models.py                            |  79 +++++++++++++
 .../templates/misc/data_principles_page.html  |   2 +-
 .../templates/misc/living_strategy_page.html  |  24 ++--
 app/misc/templates/misc/multimedia_page.html  |  74 ++++++++++++
 app/misc/templatetags/multimedia_tags.py      |  22 ++++
 ...vidualnewspage_associated_hubs_and_more.py |  25 ++++
 .../0023_newsownerpage_filter_by_hub.py       |  18 +++
 ..._alter_newsownerpage_view_all_news_link.py |  21 ++++
 app/news/models.py                            |  18 ++-
 .../templates/news/individual_news_page.html  |  10 +-
 app/news/templates/news/news_owner_page.html  |  19 ++++
 ...ter_ourworkpage_black_box_link_and_more.py |  31 +++++
 .../templates/our_work/our_work_page.html     |   4 +-
 ...artnerspage_black_box_link_url_and_more.py |  46 ++++++++
 ...nerpage_bottom_banner_link_url_and_more.py |  31 +++++
 ...rojectpage_call_to_action_link_and_more.py |  41 +++++++
 ...lownerpage_job_opportunities_button_url.py |  21 ++++
 .../individual_request_for_proposal_page.html |  16 +--
 ...suitepage_product_suite_learn_more_text.py |  18 +++
 ...idualtechstackpage_link_blocks_and_more.py |  41 +++++++
 app/tech/models.py                            |   2 +-
 .../tech/individual_tech_stack_page.html      |   2 +-
 .../tech/tech_product_suite_page.html         |   2 +-
 ...gsolutionspage_cta_button_link_and_more.py |  62 ++++++++++
 .../open_mapping_solutions_page.html          |   2 +-
 .../tools_and_resources_page.html             |   2 +-
 .../events/EventPreviewBlockEvent.html        |   2 +-
 .../PagePreviewWithTabletDescription.html     |  16 +--
 .../components/navigation/HeaderNavbar.html   |   7 +-
 .../news/NewsPreviewBlockProjects.html        |   6 +-
 .../projects/ProjectPreviewBlockMapHub.html   |   2 +-
 .../projects/ProjectPreviewBlockNews.html     |   2 +-
 ...nityownerpage_aside_block_link_and_more.py |  31 +++++
 ...individual_volunteer_opportunity_page.html |  10 +-
 ...er_whowearepage_black_box_link_and_more.py |  56 +++++++++
 .../0043_alter_homepage_home_stats.py         |  20 ++++
 ...usel_alter_homepage_e404_links_and_more.py |  97 ++++++++++++++++
 .../home/components/SubscribeForm.html        |  67 +++++++++++
 home/templates/home/home_page.html            |  62 ++--------
 hot_osm/static/css/hot_osm.css                |  17 ++-
 64 files changed, 1446 insertions(+), 139 deletions(-)
 create mode 100644 app/events/migrations/0011_eventownerpage_remove_filters_text.py
 create mode 100644 app/events/migrations/0012_alter_eventownerpage_view_all_events_link.py
 create mode 100644 app/get_involved/migrations/0005_alter_getinvolvedpage_black_box_link_and_more.py
 create mode 100644 app/impact_areas/migrations/0022_alter_impactareaspage_black_dogear_box_link_and_more.py
 create mode 100644 app/job_opportunities/migrations/0003_alter_jobopportunitiespage_black_box_link_url_and_more.py
 create mode 100644 app/mapping_hubs/migrations/0021_alter_individualmappinghubpage_contact_section_links_and_more.py
 create mode 100644 app/members/migrations/0015_membergroupownerpage_remove_filters_text.py
 create mode 100644 app/members/migrations/0016_alter_membergroupownerpage_footer_box_button_url.py
 create mode 100644 app/misc/migrations/0030_multimediapage.py
 create mode 100644 app/misc/migrations/0031_alter_multimediapage_image_previews.py
 create mode 100644 app/misc/migrations/0032_rename_banner_description_multimediapage_intro.py
 create mode 100644 app/misc/migrations/0033_alter_multimediapage_video_previews.py
 create mode 100644 app/misc/migrations/0034_alter_codeofconductpage_our_policies_links_and_more.py
 create mode 100644 app/misc/templates/misc/multimedia_page.html
 create mode 100644 app/misc/templatetags/multimedia_tags.py
 create mode 100644 app/news/migrations/0022_individualnewspage_associated_hubs_and_more.py
 create mode 100644 app/news/migrations/0023_newsownerpage_filter_by_hub.py
 create mode 100644 app/news/migrations/0024_alter_newsownerpage_view_all_news_link.py
 create mode 100644 app/our_work/migrations/0005_alter_ourworkpage_black_box_link_and_more.py
 create mode 100644 app/partners/migrations/0013_alter_ourpartnerspage_black_box_link_url_and_more.py
 create mode 100644 app/programs/migrations/0013_alter_programownerpage_bottom_banner_link_url_and_more.py
 create mode 100644 app/projects/migrations/0038_alter_individualprojectpage_call_to_action_link_and_more.py
 create mode 100644 app/rfp/migrations/0008_alter_requestforproposalownerpage_job_opportunities_button_url.py
 create mode 100644 app/tech/migrations/0006_alter_techproductsuitepage_product_suite_learn_more_text.py
 create mode 100644 app/tech/migrations/0007_alter_individualtechstackpage_link_blocks_and_more.py
 create mode 100644 app/tools_and_resources/migrations/0009_alter_openmappingsolutionspage_cta_button_link_and_more.py
 create mode 100644 app/volunteer_opportunities/migrations/0007_alter_volunteeropportunityownerpage_aside_block_link_and_more.py
 create mode 100644 app/who_we_are/migrations/0009_alter_whowearepage_black_box_link_and_more.py
 create mode 100644 home/migrations/0043_alter_homepage_home_stats.py
 create mode 100644 home/migrations/0044_alter_homepage_carousel_alter_homepage_e404_links_and_more.py
 create mode 100644 home/templates/home/components/SubscribeForm.html

diff --git a/app/core/models.py b/app/core/models.py
index 638183c..3064bb4 100644
--- a/app/core/models.py
+++ b/app/core/models.py
@@ -44,6 +44,7 @@ class LinkOrPageBlock(StreamBlock):
     page = PageChooserBlock()
     url = URLBlock()
     document = DocumentChooserBlock()
+    other = CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live.")
 
     class Meta:
         max_num = 1
diff --git a/app/events/migrations/0011_eventownerpage_remove_filters_text.py b/app/events/migrations/0011_eventownerpage_remove_filters_text.py
new file mode 100644
index 0000000..520326e
--- /dev/null
+++ b/app/events/migrations/0011_eventownerpage_remove_filters_text.py
@@ -0,0 +1,18 @@
+# Generated by Django 4.2.7 on 2024-10-03 22:49
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('events', '0010_remove_eventownerpage_view_all_events_url_and_more'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='eventownerpage',
+            name='remove_filters_text',
+            field=models.CharField(default='Remove All Filters'),
+        ),
+    ]
diff --git a/app/events/migrations/0012_alter_eventownerpage_view_all_events_link.py b/app/events/migrations/0012_alter_eventownerpage_view_all_events_link.py
new file mode 100644
index 0000000..6d32813
--- /dev/null
+++ b/app/events/migrations/0012_alter_eventownerpage_view_all_events_link.py
@@ -0,0 +1,21 @@
+# Generated by Django 4.2.7 on 2024-10-10 17:41
+
+from django.db import migrations
+import wagtail.blocks
+import wagtail.documents.blocks
+import wagtail.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('events', '0011_eventownerpage_remove_filters_text'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='eventownerpage',
+            name='view_all_events_link',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], blank=True, use_json_field=True),
+        ),
+    ]
diff --git a/app/events/models.py b/app/events/models.py
index 3277efa..6211b5a 100644
--- a/app/events/models.py
+++ b/app/events/models.py
@@ -43,7 +43,7 @@ def get_context(self, request, *args, **kwargs):
         hubs = IndividualMappingHubPage.objects.live().filter(locale=context['page'].locale)
         query = Q()
         for hub in hubs:
-            if request.GET.get(str(hub), ''):
+            if request.GET.get("hub" + str(hub.id), ''):
                 query = query | Q(event_region_hub=hub)
         events_list = events_list.filter(query).distinct()
         
@@ -101,6 +101,7 @@ def get_context(self, request, *args, **kwargs):
     sort_by_titlea = models.CharField(default="Sort by Title Alphabetical")
     sort_by_titlez = models.CharField(default="Sort by Title Reverse Alphabetical")
     search_button_text = models.CharField(default="Search")
+    remove_filters_text = models.CharField(default="Remove All Filters")
     results_text = models.CharField(default="Results")
 
     content_panels = Page.content_panels + [
@@ -114,6 +115,7 @@ def get_context(self, request, *args, **kwargs):
             FieldPanel('sort_by_titlea'),
             FieldPanel('sort_by_titlez'),
             FieldPanel('search_button_text'),
+            FieldPanel('remove_filters_text'),
             FieldPanel('results_text'),
         ], heading="Event Search Page"),
         MultiFieldPanel([
diff --git a/app/events/templates/events/event_owner_page.html b/app/events/templates/events/event_owner_page.html
index 2882d36..6049c88 100644
--- a/app/events/templates/events/event_owner_page.html
+++ b/app/events/templates/events/event_owner_page.html
@@ -80,7 +80,7 @@ <h1 class="text-h1 font-semibold my-10">{{page.title}}</h1>
                             {% for hub in hubs %}
                                 <div class="mt-4 flex">
                                     <label for="hub-{{forloop.counter}}">{{hub.title}}</label>
-                                    <input class="ml-auto checked:bg-hot-red checked:hover:bg-hot-red checked:focus:bg-hot-red" id="hub-{{forloop.counter}}" type="checkbox" name="{{hub.title}}" :checked="params.get('{{hub.title}}')">
+                                    <input class="ml-auto checked:bg-hot-red checked:hover:bg-hot-red checked:focus:bg-hot-red" id="hub-{{forloop.counter}}" type="checkbox" name="hub{{hub.id}}" :checked="params.get('hub{{hub.id}}')">
                                 </div>
                             {% endfor %}
                         </div>
@@ -109,10 +109,17 @@ <h1 class="text-h1 font-semibold my-10">{{page.title}}</h1>
                 </div>
             </form>
 
+            <a href="{{page.url}}">
+                <p class="cursor-pointer inline-block">
+                    {{page.remove_filters_text}}
+                    {% include "ui/components/icon_svgs/RefreshIcon.html" with class="ml-4" %}
+                </p>
+            </a>
+
             {% comment %} EVENT ITEMS {% endcomment %}
             <div id="items-list">
                 <h2 class="text-h2 font-bold my-8">{{events_paginator.count}} {{page.results_text}}</h2>
-                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-10">
+                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-8 mb-10 gap-y-16 md:gap-y-12">
                     {% for event in events %}
                         {% include "ui/components/events/EventPreviewBlockEvent.html" with event=event showimage=True %}
                     {% endfor %}
diff --git a/app/events/templates/events/individual_event_page.html b/app/events/templates/events/individual_event_page.html
index 6c3cd1e..9e074e0 100644
--- a/app/events/templates/events/individual_event_page.html
+++ b/app/events/templates/events/individual_event_page.html
@@ -3,26 +3,26 @@
 {% load wagtailcore_tags %}
 {% load wagtailimages_tags %}
 {% load compress %}
-{% block body_class %}template-individualmappinghubpage{% endblock %}
+{% block body_class %}template-individualeventpage{% endblock %}
 {% block extra_css %}
     {% compress css %}
     {% endcompress css %}
 {% endblock extra_css %}
 
 {% block content %}
-    <div class="max-w-7xl mx-auto">
+    <div class="max-w-7xl mx-auto my-10">
         {% comment %} HEADER {% endcomment %}
-        <div class="base-article px-10 py-5">
+        <div class="base-article px-6 md:px-10">
             <h1>{{ page.title }}</h1>
             <p class="mt-2">
                 {{ page.start_date_time }} {{page.start_date_time.tzinfo}} &#x2013; {% if page.start_date_time.date == page.end_date_time.date %}{{ page.end_date_time.time }} {% else %} {{page.end_date_time}} {% endif %} {{page.start_date_time.tzinfo}}
             </p>
         </div>
 
-        <div class="grid grid-cols-1 lg:grid-cols-3 px-10 gap-8 pb-20">
+        <div class="grid grid-cols-1 lg:grid-cols-3 px-10 gap-8 mb-20">
             {% comment %} BODY {% endcomment %}
             <div class="base-article-m py-5 col-span-2">
-                {% image page.image original class="pb-8" %}
+                {% image page.image original class="mb-8 aspect-[8/5] object-cover" %}
                 <div class="text-intro">
                     {{ page.intro|safe }}
                 </div>
diff --git a/app/get_involved/migrations/0005_alter_getinvolvedpage_black_box_link_and_more.py b/app/get_involved/migrations/0005_alter_getinvolvedpage_black_box_link_and_more.py
new file mode 100644
index 0000000..799cae9
--- /dev/null
+++ b/app/get_involved/migrations/0005_alter_getinvolvedpage_black_box_link_and_more.py
@@ -0,0 +1,47 @@
+# Generated by Django 4.2.7 on 2024-10-10 17:41
+
+from django.db import migrations
+import wagtail.blocks
+import wagtail.documents.blocks
+import wagtail.fields
+import wagtail.images.blocks
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('get_involved', '0004_remove_getinvolvedpage_black_box_link_url_and_more'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='getinvolvedpage',
+            name='black_box_link',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], blank=True, use_json_field=True),
+        ),
+        migrations.AlterField(
+            model_name='getinvolvedpage',
+            name='dogear_box_link',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], blank=True, use_json_field=True),
+        ),
+        migrations.AlterField(
+            model_name='getinvolvedpage',
+            name='get_involved_large_panels',
+            field=wagtail.fields.StreamField([('panel', wagtail.blocks.StructBlock([('image', wagtail.images.blocks.ImageChooserBlock()), ('title', wagtail.blocks.CharBlock()), ('description', wagtail.blocks.RichTextBlock()), ('link_text', wagtail.blocks.CharBlock()), ('link', wagtail.blocks.StreamBlock([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], required=False))]))], blank=True, null=True, use_json_field=True),
+        ),
+        migrations.AlterField(
+            model_name='getinvolvedpage',
+            name='partner_with_us_button_url',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], blank=True, use_json_field=True),
+        ),
+        migrations.AlterField(
+            model_name='getinvolvedpage',
+            name='red_box_link',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], blank=True, use_json_field=True),
+        ),
+        migrations.AlterField(
+            model_name='getinvolvedpage',
+            name='view_all_events_url',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], blank=True, use_json_field=True),
+        ),
+    ]
diff --git a/app/get_involved/templates/get_involved/get_involved_page.html b/app/get_involved/templates/get_involved/get_involved_page.html
index 3237a9e..ede609b 100644
--- a/app/get_involved/templates/get_involved/get_involved_page.html
+++ b/app/get_involved/templates/get_involved/get_involved_page.html
@@ -45,7 +45,7 @@
 
             <div class="mt-8 mb-20 grid grid-cols-1 lg:grid-cols-3 gap-8">
                 {% for panel in page.join_us_panels %}
-                    {% include "ui/components/misc_panels/PagePreviewWithTabletDescription.html" with image=panel.value.image page=panel.value.page tablet_description=panel.value.page.specific.intro read_more_text=page.join_us_panel_read_more %}
+                    {% include "ui/components/misc_panels/PagePreviewWithTabletDescription.html" with image=panel.value.image page=panel.value.page tablet_description=panel.value.page.specific.intro read_more_text=page.join_us_panel_read_more hoverless=True %}
                 {% endfor %}
             </div>
 
diff --git a/app/impact_areas/migrations/0022_alter_impactareaspage_black_dogear_box_link_and_more.py b/app/impact_areas/migrations/0022_alter_impactareaspage_black_dogear_box_link_and_more.py
new file mode 100644
index 0000000..bfacce5
--- /dev/null
+++ b/app/impact_areas/migrations/0022_alter_impactareaspage_black_dogear_box_link_and_more.py
@@ -0,0 +1,36 @@
+# Generated by Django 4.2.7 on 2024-10-10 17:41
+
+from django.db import migrations
+import wagtail.blocks
+import wagtail.documents.blocks
+import wagtail.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('impact_areas', '0021_remove_impactareaspage_black_dogear_box_link_url_and_more'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='impactareaspage',
+            name='black_dogear_box_link',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], blank=True, use_json_field=True),
+        ),
+        migrations.AlterField(
+            model_name='impactareaspage',
+            name='red_dogear_box_link',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], blank=True, use_json_field=True),
+        ),
+        migrations.AlterField(
+            model_name='impactareaspage',
+            name='view_all_projects_url',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], blank=True, use_json_field=True),
+        ),
+        migrations.AlterField(
+            model_name='individualimpactareapage',
+            name='use_cases',
+            field=wagtail.fields.StreamField([('blocks', wagtail.blocks.StructBlock([('description', wagtail.blocks.RichTextBlock()), ('link_text', wagtail.blocks.CharBlock()), ('link', wagtail.blocks.StreamBlock([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], blank=True, null=True))]))], blank=True, null=True, use_json_field=True),
+        ),
+    ]
diff --git a/app/impact_areas/templates/impact_areas/impact_areas_page.html b/app/impact_areas/templates/impact_areas/impact_areas_page.html
index d48d65d..30b36a3 100644
--- a/app/impact_areas/templates/impact_areas/impact_areas_page.html
+++ b/app/impact_areas/templates/impact_areas/impact_areas_page.html
@@ -12,8 +12,8 @@
 {% block content %}
     {% include "ui/components/BasePageHeader.html" with title=page.title intro=page.header_text image=page.image %}
 
-    <div class="max-w-7xl mx-auto my-10 lg:grid lg:grid-cols-6">
-        <div class="px-6 md:px-10 col-span-5">
+    <div class="max-w-7xl mx-auto my-10">
+        <div class="px-6 md:px-10 max-w-5xl">
             <div class="text-intro font-semibold">
                 {{page.intro|richtext}}
             </div>
@@ -23,7 +23,7 @@
         </div>
     </div>
     
-    <div class="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-8 px-6 md:px-10 mt-6 mb-10">
+    <div class="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-x-8 gap-y-12 px-6 md:px-10 mt-6 mb-20">
         {% for child in page.get_children %}
             {% include "ui/components/impact_areas/ImpactAreaPreviewBlock.html" with ia=child.specific learn_more_text=page.learn_more_text %}
         {% endfor %}
diff --git a/app/impact_areas/templates/impact_areas/individual_impact_area_page.html b/app/impact_areas/templates/impact_areas/individual_impact_area_page.html
index c03f604..210980b 100644
--- a/app/impact_areas/templates/impact_areas/individual_impact_area_page.html
+++ b/app/impact_areas/templates/impact_areas/individual_impact_area_page.html
@@ -76,10 +76,10 @@ <h1 class="text-h2 font-bold">
             {% comment %} DOGEAR BOXES {% endcomment %}
             <div class="grid grid-cols-1 md:grid-cols-2 text-white my-10 gap-8">
                 <div>
-                    {% include "ui/components/dogear_boxes/DogearRed.html" with title=page.get_parent.specific.red_dogear_box_title linktext=page.get_parent.specific.red_dogear_box_link_text linkurl=page.get_parent.specific.red_dogear_box_link_url %}
+                    {% include "ui/components/dogear_boxes/DogearRed.html" with title=page.get_parent.specific.red_dogear_box_title linktext=page.get_parent.specific.red_dogear_box_link_text linkurl=page.get_parent.specific.red_dogear_box_link %}
                 </div>
                 <div>
-                    {% include "ui/components/dogear_boxes/DogearBlack.html" with title=page.get_parent.specific.black_dogear_box_title linktext=page.get_parent.specific.black_dogear_box_link_text linkurl=page.get_parent.specific.black_dogear_box_link_url %}
+                    {% include "ui/components/dogear_boxes/DogearBlack.html" with title=page.get_parent.specific.black_dogear_box_title linktext=page.get_parent.specific.black_dogear_box_link_text linkurl=page.get_parent.specific.black_dogear_box_link %}
                 </div>
             </div>
         </div>
diff --git a/app/job_opportunities/migrations/0003_alter_jobopportunitiespage_black_box_link_url_and_more.py b/app/job_opportunities/migrations/0003_alter_jobopportunitiespage_black_box_link_url_and_more.py
new file mode 100644
index 0000000..06f8b29
--- /dev/null
+++ b/app/job_opportunities/migrations/0003_alter_jobopportunitiespage_black_box_link_url_and_more.py
@@ -0,0 +1,31 @@
+# Generated by Django 4.2.7 on 2024-10-10 17:41
+
+from django.db import migrations
+import wagtail.blocks
+import wagtail.documents.blocks
+import wagtail.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('job_opportunities', '0002_jobopportunitiespage_black_box_description_and_more'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='jobopportunitiespage',
+            name='black_box_link_url',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], blank=True, use_json_field=True),
+        ),
+        migrations.AlterField(
+            model_name='jobopportunitiespage',
+            name='red_box_link_url',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], blank=True, use_json_field=True),
+        ),
+        migrations.AlterField(
+            model_name='jobopportunitiespage',
+            name='rfp_banner_button_link',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], blank=True, use_json_field=True),
+        ),
+    ]
diff --git a/app/mapping_hubs/migrations/0021_alter_individualmappinghubpage_contact_section_links_and_more.py b/app/mapping_hubs/migrations/0021_alter_individualmappinghubpage_contact_section_links_and_more.py
new file mode 100644
index 0000000..3d95c74
--- /dev/null
+++ b/app/mapping_hubs/migrations/0021_alter_individualmappinghubpage_contact_section_links_and_more.py
@@ -0,0 +1,76 @@
+# Generated by Django 4.2.7 on 2024-10-10 17:41
+
+from django.db import migrations
+import wagtail.blocks
+import wagtail.documents.blocks
+import wagtail.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('mapping_hubs', '0020_alter_openmappinghubspage_learn_more_text'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='individualmappinghubpage',
+            name='contact_section_links',
+            field=wagtail.fields.StreamField([('blocks', wagtail.blocks.StructBlock([('link_text', wagtail.blocks.CharBlock(required=True)), ('link_url', wagtail.blocks.StreamBlock([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], blank=True, required=False))]))], blank=True, use_json_field=True),
+        ),
+        migrations.AlterField(
+            model_name='individualmappinghubpage',
+            name='dogear_boxes',
+            field=wagtail.fields.StreamField([('blocks', wagtail.blocks.StructBlock([('title', wagtail.blocks.CharBlock(required=True)), ('description', wagtail.blocks.RichTextBlock(required=False)), ('link_text', wagtail.blocks.CharBlock(required=True)), ('link_url', wagtail.blocks.StreamBlock([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], blank=True, required=False))]))], blank=True, help_text="These are, for example, the 'Grants' and 'Map and Chat Hour' boxes in the Asia-Pacific page. Please only add these in pairs of 2!", use_json_field=True),
+        ),
+        migrations.AlterField(
+            model_name='individualmappinghubpage',
+            name='events_section_link',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], blank=True, use_json_field=True),
+        ),
+        migrations.AlterField(
+            model_name='individualmappinghubpage',
+            name='header_project_link',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], blank=True, use_json_field=True),
+        ),
+        migrations.AlterField(
+            model_name='individualmappinghubpage',
+            name='news_section_link',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], blank=True, use_json_field=True),
+        ),
+        migrations.AlterField(
+            model_name='individualmappinghubpage',
+            name='project_section_link',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], blank=True, use_json_field=True),
+        ),
+        migrations.AlterField(
+            model_name='individualmappinghubpage',
+            name='subscribe_box_signup_url',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], blank=True, use_json_field=True),
+        ),
+        migrations.AlterField(
+            model_name='mappinghubprojectspage',
+            name='black_box_link',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], blank=True, use_json_field=True),
+        ),
+        migrations.AlterField(
+            model_name='mappinghubprojectspage',
+            name='red_box_link',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], blank=True, use_json_field=True),
+        ),
+        migrations.AlterField(
+            model_name='openmappinghubspage',
+            name='header_events_link',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], blank=True, use_json_field=True),
+        ),
+        migrations.AlterField(
+            model_name='openmappinghubspage',
+            name='header_news_link',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], blank=True, use_json_field=True),
+        ),
+        migrations.AlterField(
+            model_name='openmappinghubspage',
+            name='partners_section_link',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], blank=True, use_json_field=True),
+        ),
+    ]
diff --git a/app/mapping_hubs/templates/mapping_hubs/components/header.html b/app/mapping_hubs/templates/mapping_hubs/components/header.html
index 8e16306..31ef65e 100644
--- a/app/mapping_hubs/templates/mapping_hubs/components/header.html
+++ b/app/mapping_hubs/templates/mapping_hubs/components/header.html
@@ -22,12 +22,14 @@ <h1 class="text-h1 font-semibold mb-4">
                         <p>
                             {% include "ui/components/BaseLinkNoUnderlineWhite.html" with linkurl=page.header_project_link linktext=page.get_parent.specific.header_project_link_text %}
                         </p>
-                        <p>
-                            {% include "ui/components/BaseLinkNoUnderlineWhite.html" with linkurl=page.get_parent.specific.header_news_link linktext=page.get_parent.specific.header_news_link_text %}
-                        </p>
-                        <p>
-                            {% include "ui/components/BaseLinkNoUnderlineWhite.html" with linkurl=page.get_parent.specific.header_events_link linktext=page.get_parent.specific.header_events_link_text %}
-                        </p>
+                        {% with page.id|stringformat:"s" as id %}
+                            <p>
+                                {% include "ui/components/BaseLinkNoUnderlineWhite.html" with linkurl=page.get_parent.specific.header_news_link linktext=page.get_parent.specific.header_news_link_text linkappendage="?hub"|add:id|add:"=on" %}
+                            </p>
+                            <p>
+                                {% include "ui/components/BaseLinkNoUnderlineWhite.html" with linkurl=page.get_parent.specific.header_events_link linktext=page.get_parent.specific.header_events_link_text linkappendage="?hub"|add:id|add:"=on" %}
+                            </p>
+                        {% endwith %}
                     </div>
                 </div>
                 <div>
diff --git a/app/mapping_hubs/templates/mapping_hubs/individual_mapping_hub_page.html b/app/mapping_hubs/templates/mapping_hubs/individual_mapping_hub_page.html
index eed9abc..a329850 100644
--- a/app/mapping_hubs/templates/mapping_hubs/individual_mapping_hub_page.html
+++ b/app/mapping_hubs/templates/mapping_hubs/individual_mapping_hub_page.html
@@ -41,8 +41,10 @@
 
             {% comment %} NEWS AND EVENTS SECTIONS {% endcomment %}
             <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mt-10 mb-20">
-                {% include "ui/components/dogear_boxes/SpecialDogearLinkBox.html" with colour=page.main_colour title=page.news_section_title description=page.news_section_description linktext=page.news_section_link_text linkurl=page.news_section_link %}
-                {% include "ui/components/dogear_boxes/SpecialDogearLinkBox.html" with colour=page.main_colour title=page.events_section_title description=page.events_section_description linktext=page.events_section_link_text linkurl=page.events_section_link %}
+                {% with page.id|stringformat:"s" as id %}
+                    {% include "ui/components/dogear_boxes/SpecialDogearLinkBox.html" with colour=page.main_colour title=page.news_section_title description=page.news_section_description linktext=page.news_section_link_text linkurl=page.news_section_link linkappendage="?hub"|add:id|add:"=on" %}
+                    {% include "ui/components/dogear_boxes/SpecialDogearLinkBox.html" with colour=page.main_colour title=page.events_section_title description=page.events_section_description linktext=page.events_section_link_text linkurl=page.events_section_link linkappendage="?hub"|add:id|add:"=on" %}
+                {% endwith %}
             </div>
 
             {% comment %} PARTNERS SECTION {% endcomment %}
@@ -51,7 +53,9 @@
                     {% include "ui/components/SectionHeadingWithUnderline.html" with title=page.get_parent.specific.partners_section_title %}
                 </div>
                 <div class="text-left md:text-right text-intro mt-4 md:mt-0 self-center">
-                    {% include "ui/components/BaseLink.html" with linktext=page.get_parent.specific.partners_section_link_text linkurl=page.get_parent.specific.partners_section_link %}
+                    {% with page.id|stringformat:"s" as id %}
+                        {% include "ui/components/BaseLink.html" with linktext=page.get_parent.specific.partners_section_link_text linkurl=page.get_parent.specific.partners_section_link linkappendage="?hub"|add:id|add:"=on" %}
+                    {% endwith %}
                 </div>
             </div>
             {% include "ui/components/partners/PartnerViewBlock.html" with partners=page.partner_list %}
@@ -77,7 +81,7 @@ <h1 class="font-bold text-h2 border-b-hot-light-grey border-b-2 pb-4 mb-6">
                     <div class="text-intro font-medium">
                         {% for link in page.contact_section_links %}
                             <p class="mb-4">
-                                {% include "ui/components/BaseLink.html" with linktext=link.value.link_text %}
+                                {% include "ui/components/BaseLink.html" with linktext=link.value.link_text linkurl=link.value.link_url %}
                             </p>
                         {% endfor %}
                     </div>
diff --git a/app/members/migrations/0015_membergroupownerpage_remove_filters_text.py b/app/members/migrations/0015_membergroupownerpage_remove_filters_text.py
new file mode 100644
index 0000000..1244e22
--- /dev/null
+++ b/app/members/migrations/0015_membergroupownerpage_remove_filters_text.py
@@ -0,0 +1,18 @@
+# Generated by Django 4.2.7 on 2024-10-04 19:15
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('members', '0014_remove_membergroupownerpage_footer_box_button_link_and_more'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='membergroupownerpage',
+            name='remove_filters_text',
+            field=models.CharField(default='Remove All Filters'),
+        ),
+    ]
diff --git a/app/members/migrations/0016_alter_membergroupownerpage_footer_box_button_url.py b/app/members/migrations/0016_alter_membergroupownerpage_footer_box_button_url.py
new file mode 100644
index 0000000..a4fec92
--- /dev/null
+++ b/app/members/migrations/0016_alter_membergroupownerpage_footer_box_button_url.py
@@ -0,0 +1,21 @@
+# Generated by Django 4.2.7 on 2024-10-10 17:41
+
+from django.db import migrations
+import wagtail.blocks
+import wagtail.documents.blocks
+import wagtail.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('members', '0015_membergroupownerpage_remove_filters_text'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='membergroupownerpage',
+            name='footer_box_button_url',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], blank=True, use_json_field=True),
+        ),
+    ]
diff --git a/app/members/models.py b/app/members/models.py
index 927dc3b..062fa1f 100644
--- a/app/members/models.py
+++ b/app/members/models.py
@@ -34,6 +34,7 @@ class MemberGroupOwnerPage(Page):
     sort_by_titlea = models.CharField(default="Sort by Name Alphabetical")
     sort_by_titlez = models.CharField(default="Sort by Name Reverse Alphabetical")
     search_button_text = models.CharField(default="Search")
+    remove_filters_text = models.CharField(default="Remove All Filters")
 
     load_more_text = models.CharField(default="Load more", help_text="This will be a prefix to the title of the page; i.e., if the page title is 'Voting members', and this field is 'Load more', this will end up appearing as 'Load more Voting members'.")
 
@@ -51,6 +52,7 @@ class MemberGroupOwnerPage(Page):
             FieldPanel('sort_by_titlea'),
             FieldPanel('sort_by_titlez'),
             FieldPanel('search_button_text'),
+            FieldPanel('remove_filters_text'),
         ], heading="Search options"),
         FieldPanel('load_more_text'),
         FieldPanel('view_all_text'),
diff --git a/app/members/templates/members/member_group_page.html b/app/members/templates/members/member_group_page.html
index b750153..f800c8a 100644
--- a/app/members/templates/members/member_group_page.html
+++ b/app/members/templates/members/member_group_page.html
@@ -78,10 +78,17 @@
                     </div>
                 </div>
             </form>
+
+            <a href="{{page.url}}">
+                <p class="cursor-pointer inline-block">
+                    {{page.get_parent.specific.remove_filters_text}}
+                    {% include "ui/components/icon_svgs/RefreshIcon.html" with class="ml-4" %}
+                </p>
+            </a>
         {% endif %}
 
         {% comment %} MEMBERS LIST {% endcomment %}
-        <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-{{page.desktop_size_items_per_row}} gap-8 lg:gap-y-16 mb-10" id="members-list">
+        <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-{{page.desktop_size_items_per_row}} gap-8 lg:gap-y-16 my-10" id="members-list">
             {% for member in members %}
                 {% include "ui/components/members/MemberPreviewBlock.html" with member=member position_shown=page.position_shown hub_shown=page.hub_shown %}
             {% endfor %}
@@ -104,7 +111,7 @@
         </p>
 
         {% comment %} BOTTOM AREA {% endcomment %}
-        <div class="grid grid-cols-1 md:grid-cols-2 text-white gap-8 mt-20">
+        <div class="grid grid-cols-1 md:grid-cols-2 text-white gap-8 mt-32">
             {% for group in groups %}
                 {% if forloop.counter0|divisibleby:2 %}
                     <div>
diff --git a/app/misc/migrations/0030_multimediapage.py b/app/misc/migrations/0030_multimediapage.py
new file mode 100644
index 0000000..982bdc4
--- /dev/null
+++ b/app/misc/migrations/0030_multimediapage.py
@@ -0,0 +1,46 @@
+# Generated by Django 4.2.7 on 2024-10-08 17:39
+
+from django.db import migrations, models
+import django.db.models.deletion
+import wagtail.blocks
+import wagtail.documents.blocks
+import wagtail.fields
+import wagtail.images.blocks
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('wagtailcore', '0089_log_entry_data_json_null_to_object'),
+        ('wagtailimages', '0025_alter_image_file_alter_rendition_file'),
+        ('misc', '0029_alter_donatepage_other_ways_to_donate'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='MultimediaPage',
+            fields=[
+                ('page_ptr', models.OneToOneField(auto_created=True, on_delete=django.db.models.deletion.CASCADE, parent_link=True, primary_key=True, serialize=False, to='wagtailcore.page')),
+                ('banner_description', wagtail.fields.RichTextField(blank=True)),
+                ('map_title', models.CharField(default='Map Gallery')),
+                ('map_view_all_text', models.CharField(default='View all maps')),
+                ('map_view_all_link', wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock())], blank=True, use_json_field=True)),
+                ('video_title', models.CharField(default='Videos')),
+                ('video_view_all_text', models.CharField(default='View more videos on YouTube')),
+                ('video_view_all_link', wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock())], blank=True, use_json_field=True)),
+                ('video_previews', wagtail.fields.StreamField([('preview', wagtail.blocks.StructBlock([('link', wagtail.blocks.URLBlock()), ('short_desc', wagtail.blocks.CharBlock(help_text='This will show beneath the image.', required=False))], max_num=8, min_num=8))], blank=True, use_json_field=True)),
+                ('image_title', models.CharField(default='Images')),
+                ('image_view_all_text', models.CharField(default='View more images on Flickr')),
+                ('image_view_all_link', wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock())], blank=True, use_json_field=True)),
+                ('image_previews', wagtail.fields.StreamField([('preview', wagtail.blocks.StructBlock([('link', wagtail.blocks.URLBlock()), ('image', wagtail.images.blocks.ImageChooserBlock()), ('short_desc', wagtail.blocks.CharBlock(help_text='This will show beneath the image.', required=False))], max_num=8, min_num=8))], blank=True, use_json_field=True)),
+                ('license_title', models.CharField(default='License and Attributions')),
+                ('license_block', wagtail.fields.RichTextField(blank=True)),
+                ('banner_image', models.ForeignKey(blank=True, help_text='Header image', null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='+', to='wagtailimages.image')),
+                ('video_overlay_icon', models.ForeignKey(blank=True, help_text='This icon will show on top of the video previews in this section; this should either be a play button, or nothing at all.', null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='+', to='wagtailimages.image')),
+            ],
+            options={
+                'abstract': False,
+            },
+            bases=('wagtailcore.page',),
+        ),
+    ]
diff --git a/app/misc/migrations/0031_alter_multimediapage_image_previews.py b/app/misc/migrations/0031_alter_multimediapage_image_previews.py
new file mode 100644
index 0000000..453edc6
--- /dev/null
+++ b/app/misc/migrations/0031_alter_multimediapage_image_previews.py
@@ -0,0 +1,21 @@
+# Generated by Django 4.2.7 on 2024-10-08 19:11
+
+from django.db import migrations
+import wagtail.blocks
+import wagtail.fields
+import wagtail.images.blocks
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('misc', '0030_multimediapage'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='multimediapage',
+            name='image_previews',
+            field=wagtail.fields.StreamField([('preview', wagtail.blocks.StructBlock([('link', wagtail.blocks.URLBlock(help_text='The link to the image source (if known).', required=False)), ('image', wagtail.images.blocks.ImageChooserBlock()), ('short_desc', wagtail.blocks.CharBlock(help_text='This will show beneath the image.', required=False))], max_num=8, min_num=8))], blank=True, use_json_field=True),
+        ),
+    ]
diff --git a/app/misc/migrations/0032_rename_banner_description_multimediapage_intro.py b/app/misc/migrations/0032_rename_banner_description_multimediapage_intro.py
new file mode 100644
index 0000000..648babf
--- /dev/null
+++ b/app/misc/migrations/0032_rename_banner_description_multimediapage_intro.py
@@ -0,0 +1,18 @@
+# Generated by Django 4.2.7 on 2024-10-08 19:32
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('misc', '0031_alter_multimediapage_image_previews'),
+    ]
+
+    operations = [
+        migrations.RenameField(
+            model_name='multimediapage',
+            old_name='banner_description',
+            new_name='intro',
+        ),
+    ]
diff --git a/app/misc/migrations/0033_alter_multimediapage_video_previews.py b/app/misc/migrations/0033_alter_multimediapage_video_previews.py
new file mode 100644
index 0000000..2c53645
--- /dev/null
+++ b/app/misc/migrations/0033_alter_multimediapage_video_previews.py
@@ -0,0 +1,20 @@
+# Generated by Django 4.2.7 on 2024-10-09 16:08
+
+from django.db import migrations
+import wagtail.blocks
+import wagtail.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('misc', '0032_rename_banner_description_multimediapage_intro'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='multimediapage',
+            name='video_previews',
+            field=wagtail.fields.StreamField([('preview', wagtail.blocks.StructBlock([('link', wagtail.blocks.URLBlock(help_text="This link should be in the format of 'https://www.youtube.com/watch?v=[code]', as opposed to a share link.")), ('short_desc', wagtail.blocks.CharBlock(help_text='This will show beneath the image.', required=False))], max_num=8, min_num=8))], blank=True, use_json_field=True),
+        ),
+    ]
diff --git a/app/misc/migrations/0034_alter_codeofconductpage_our_policies_links_and_more.py b/app/misc/migrations/0034_alter_codeofconductpage_our_policies_links_and_more.py
new file mode 100644
index 0000000..cb241c7
--- /dev/null
+++ b/app/misc/migrations/0034_alter_codeofconductpage_our_policies_links_and_more.py
@@ -0,0 +1,107 @@
+# Generated by Django 4.2.7 on 2024-10-10 17:41
+
+from django.db import migrations
+import wagtail.blocks
+import wagtail.documents.blocks
+import wagtail.fields
+import wagtail.images.blocks
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('misc', '0033_alter_multimediapage_video_previews'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='codeofconductpage',
+            name='our_policies_links',
+            field=wagtail.fields.StreamField([('blocks', wagtail.blocks.StructBlock([('text', wagtail.blocks.CharBlock()), ('link', wagtail.blocks.StreamBlock([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))]))]))], blank=True, help_text='Links to be shown under the Our Policies section.', null=True, use_json_field=True),
+        ),
+        migrations.AlterField(
+            model_name='codeofconductpage',
+            name='question_block_button_link',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], blank=True, use_json_field=True),
+        ),
+        migrations.AlterField(
+            model_name='contactuspage',
+            name='dogear_box_link',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], blank=True, use_json_field=True),
+        ),
+        migrations.AlterField(
+            model_name='contactuspage',
+            name='office_locations',
+            field=wagtail.fields.StreamField([('block', wagtail.blocks.StructBlock([('title', wagtail.blocks.CharBlock(blank=True, null=True, required=False)), ('link', wagtail.blocks.StreamBlock([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], blank=True, null=True, required=False)), ('description', wagtail.blocks.RichTextBlock(blank=True, null=True, required=False))]))], blank=True, null=True, use_json_field=True),
+        ),
+        migrations.AlterField(
+            model_name='dataprinciplespage',
+            name='footer_button_link',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], blank=True, use_json_field=True),
+        ),
+        migrations.AlterField(
+            model_name='documentcollectionpage',
+            name='documents',
+            field=wagtail.fields.StreamField([('block', wagtail.blocks.StructBlock([('icon', wagtail.images.blocks.ImageChooserBlock(blank=True, null=True, required=False)), ('title', wagtail.blocks.CharBlock()), ('link', wagtail.blocks.StreamBlock([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))])), ('description', wagtail.blocks.RichTextBlock(blank=True, null=True, required=False))]))], blank=True, null=True, use_json_field=True),
+        ),
+        migrations.AlterField(
+            model_name='documentcollectionpage',
+            name='sidebar_box_button_link',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], blank=True, use_json_field=True),
+        ),
+        migrations.AlterField(
+            model_name='joinourconversationpage',
+            name='black_box_link_url',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], blank=True, use_json_field=True),
+        ),
+        migrations.AlterField(
+            model_name='joinourconversationpage',
+            name='code_of_conduct_link_url',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], blank=True, use_json_field=True),
+        ),
+        migrations.AlterField(
+            model_name='joinourconversationpage',
+            name='red_box_link_url',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], blank=True, use_json_field=True),
+        ),
+        migrations.AlterField(
+            model_name='livingstrategypage',
+            name='downloads',
+            field=wagtail.fields.StreamField([('block', wagtail.blocks.StructBlock([('text', wagtail.blocks.CharBlock()), ('link', wagtail.blocks.StreamBlock([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], required=False))]))], blank=True, use_json_field=True),
+        ),
+        migrations.AlterField(
+            model_name='multimediapage',
+            name='image_view_all_link',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], blank=True, use_json_field=True),
+        ),
+        migrations.AlterField(
+            model_name='multimediapage',
+            name='map_view_all_link',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], blank=True, use_json_field=True),
+        ),
+        migrations.AlterField(
+            model_name='multimediapage',
+            name='video_view_all_link',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], blank=True, use_json_field=True),
+        ),
+        migrations.AlterField(
+            model_name='privacypolicypage',
+            name='our_policies_links',
+            field=wagtail.fields.StreamField([('blocks', wagtail.blocks.StructBlock([('text', wagtail.blocks.CharBlock()), ('link', wagtail.blocks.StreamBlock([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))]))]))], blank=True, help_text='Links to be shown under the Our Policies section.', null=True, use_json_field=True),
+        ),
+        migrations.AlterField(
+            model_name='privacypolicypage',
+            name='question_block_button_link',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], blank=True, use_json_field=True),
+        ),
+        migrations.AlterField(
+            model_name='salaryframeworkpage',
+            name='sidebar_block_button_link',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], blank=True, use_json_field=True),
+        ),
+        migrations.AlterField(
+            model_name='workforhotpage',
+            name='opportunities_button_link',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], blank=True, use_json_field=True),
+        ),
+    ]
diff --git a/app/misc/models.py b/app/misc/models.py
index 1a24d03..1ef1409 100644
--- a/app/misc/models.py
+++ b/app/misc/models.py
@@ -598,3 +598,82 @@ class DonatePage(Page):
         FieldPanel('other_ways_to_donate_title'),
         FieldPanel('other_ways_to_donate'),
     ]
+
+
+class MultimediaPage(Page):
+    max_count = 1
+
+    banner_image = models.ForeignKey(
+        "wagtailimages.Image",
+        null=True,
+        blank=True,
+        on_delete=models.SET_NULL,
+        related_name="+",
+        help_text="Header image"
+    )
+    intro = RichTextField(blank=True)
+
+    map_title = models.CharField(default="Map Gallery")
+    map_view_all_text = models.CharField(default="View all maps")
+    map_view_all_link = StreamField(LinkOrPageBlock(), use_json_field=True, blank=True)
+
+    video_title = models.CharField(default="Videos")
+    video_view_all_text = models.CharField(default="View more videos on YouTube")
+    video_view_all_link = StreamField(LinkOrPageBlock(), use_json_field=True, blank=True)
+    video_overlay_icon = models.ForeignKey(
+        "wagtailimages.Image",
+        null=True,
+        blank=True,
+        on_delete=models.SET_NULL,
+        related_name="+",
+        help_text="This icon will show on top of the video previews in this section; this should either be a play button, or nothing at all."
+    )
+    video_previews = StreamField([
+        ('preview', StructBlock([
+            ('link', URLBlock(help_text="This link should be in the format of 'https://www.youtube.com/watch?v=[code]', as opposed to a share link.")),
+            ('short_desc', CharBlock(required=False, help_text="This will show beneath the image.")),
+        ], min_num=8, max_num=8))
+    ], use_json_field=True, blank=True)
+
+    image_title = models.CharField(default="Images")
+    image_view_all_text = models.CharField(default="View more images on Flickr")
+    image_view_all_link = StreamField(LinkOrPageBlock(), use_json_field=True, blank=True)
+    image_previews = StreamField([
+        ('preview', StructBlock([
+            ('link', URLBlock(required=False, help_text="The link to the image source (if known).")),
+            ('image', ImageChooserBlock()),
+            ('short_desc', CharBlock(required=False, help_text="This will show beneath the image.")),
+        ], min_num=8, max_num=8))
+    ], use_json_field=True, blank=True)
+
+    license_title = models.CharField(default="License and Attributions")
+    license_block = RichTextField(blank=True)
+
+    content_panels = Page.content_panels + [
+        MultiFieldPanel([
+            FieldPanel('banner_image'),
+            FieldPanel('intro'),
+        ], heading="Header"),
+        MultiFieldPanel([
+            FieldPanel('map_title'),
+            FieldPanel('map_view_all_text'),
+            FieldPanel('map_view_all_link'),
+        ], heading="Map"),
+        MultiFieldPanel([
+            FieldPanel('video_title'),
+            FieldPanel('video_view_all_text'),
+            FieldPanel('video_view_all_link'),
+            FieldPanel('video_overlay_icon'),
+            FieldPanel('video_previews'),
+        ], heading="Video"),
+        MultiFieldPanel([
+            FieldPanel('image_title'),
+            FieldPanel('image_view_all_text'),
+            FieldPanel('image_view_all_link'),
+            FieldPanel('image_previews'),
+        ], heading="Image"),
+        MultiFieldPanel([
+            FieldPanel('license_title'),
+            FieldPanel('license_block'),
+        ], heading="License"),
+    ]
diff --git a/app/misc/templates/misc/data_principles_page.html b/app/misc/templates/misc/data_principles_page.html
index d293070..a0f1020 100644
--- a/app/misc/templates/misc/data_principles_page.html
+++ b/app/misc/templates/misc/data_principles_page.html
@@ -18,7 +18,7 @@
                 {{page.intro|richtext}}
             </div>
 
-            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 my-20">
                 <div class="base-article-m [&>*:first-child]:mt-0">
                     {{page.body_text|richtext}}
                 </div>
diff --git a/app/misc/templates/misc/living_strategy_page.html b/app/misc/templates/misc/living_strategy_page.html
index 62d8350..baf55b6 100644
--- a/app/misc/templates/misc/living_strategy_page.html
+++ b/app/misc/templates/misc/living_strategy_page.html
@@ -12,18 +12,22 @@
 {% block content %}
     <div class="max-w-7xl mx-auto mt-10 mb-20">
         <div class="px-6 md:px-10">
-            <div class="{%if page.desktop_size_non_full_body_width%}lg:w-2/3{%endif%}">
-                <h1 class="text-h1 font-bold mb-8">{{page.title}}</h1>
-                {% image page.banner_image original %}
+            <h1 class="text-h1 font-bold mb-8">{{page.title}}</h1>
 
-                <h2 class="text-h2 font-bold mt-10 mb-4">{{page.download_title}}</h2>
-                <div class="text-intro flex flex-wrap gap-x-16 gap-y-4 mb-10">
-                    {% for download in page.downloads %}
-                        {% include "ui/components/BaseLink.html" with linktext=download.value.text linkurl=download.value.link %}
-                    {% endfor %}
+            <div class="grid lg:grid-cols-3 gap-8">
+                <div class="lg:col-span-2">
+                    {% image page.banner_image original %}
+                    <div class="base-article-m">
+                        {{page.description|richtext}}
+                    </div>
                 </div>
-                <div class="base-article-m">
-                    {{page.description|richtext}}
+                <div>
+                    <h2 class="text-h2 font-bold mb-4 lg:col-span-1">{{page.download_title}}</h2>
+                    <div class="text-intro flex flex-col flex-wrap gap-4 mb-10">
+                        {% for download in page.downloads %}
+                            {% include "ui/components/BaseLink.html" with linktext=download.value.text linkurl=download.value.link %}
+                        {% endfor %}
+                    </div>
                 </div>
             </div>
         </div>
diff --git a/app/misc/templates/misc/multimedia_page.html b/app/misc/templates/misc/multimedia_page.html
new file mode 100644
index 0000000..5918342
--- /dev/null
+++ b/app/misc/templates/misc/multimedia_page.html
@@ -0,0 +1,74 @@
+{% extends "base.html" %}
+{% load static %}
+{% load wagtailcore_tags %}
+{% load wagtailimages_tags %}
+{% load compress %}
+{% block body_class %}template-multimediapage{% endblock %}
+{% block extra_css %}
+    {% compress css %}
+    {% endcompress css %}
+{% endblock extra_css %}
+{% load multimedia_tags %}
+
+{% block content %}
+    {% include "ui/components/PageHeaderWithBlur.html" with title=page.title subtitle=page.intro image=page.banner_image full_length=True endinlarge=True %}
+
+    <div class="max-w-7xl mx-auto mt-10 mb-20">
+        <div class="px-6 md:px-10">
+            {% include "ui/components/FlexTitleWithLink.html" with underline=True title=page.map_title linktext=page.map_view_all_text linkurl=page.map_view_all_link titleclass="text-h2" %}
+            <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8 mt-10 mb-20">
+                
+            </div>
+
+            {% include "ui/components/FlexTitleWithLink.html" with underline=True title=page.video_title linktext=page.video_view_all_text linkurl=page.video_view_all_link titleclass="text-h2" %}
+            <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8 mt-10 mb-20">
+                {% for preview in page.video_previews %}
+                    <a href="{{preview.value.link}}">
+                        <div>
+                            <div class="grid">
+                                <img src="https://img.youtube.com/vi/{{preview.value.link|get_youtube_video_code}}/0.jpg" class="w-full aspect-[3/2] object-cover col-start-1 row-start-1">
+                                <div class="flex items-center justify-center col-start-1 row-start-1">
+                                    {% image page.video_overlay_icon original class="w-1/5 h-auto max-h-full drop-shadow-md" %}
+                                </div>
+                            </div>
+                            {% if preview.value.short_desc %}
+                                <div class="text-small text-hot-dark-grey mt-2">
+                                    {{preview.value.short_desc|richtext}}
+                                </div>
+                            {% endif %}
+                        </div>
+                    </a>
+                {% endfor %}
+            </div>
+
+            {% include "ui/components/FlexTitleWithLink.html" with underline=True title=page.image_title linktext=page.image_view_all_text linkurl=page.image_view_all_link titleclass="text-h2" %}
+            <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8 mt-10 mb-20">
+                {% for preview in page.image_previews %}
+                    {% if preview.value.link %}
+                        <a href="{{preview.value.link}}">
+                    {% endif%}
+                        <div>
+                            {% image preview.value.image original class="w-full aspect-[3/2] object-cover" %}
+                            {% if preview.value.short_desc %}
+                                <div class="text-small text-hot-dark-grey mt-2">
+                                    {{preview.value.short_desc|richtext}}
+                                </div>
+                            {% endif %}
+                        </div>
+                    {% if preview.value.link %}
+                        </a>
+                    {% endif%}
+                {% endfor %}
+            </div>
+
+            <div class="max-w-3xl my-20">
+                <h1 class="text-h1 font-bold mb-8">
+                    {{page.license_title}}
+                </h1>
+                <div class="base-article-m">
+                    {{page.license_block|richtext}}
+                </div>
+            </div>
+        </div>
+    </div>
+{% endblock %}
diff --git a/app/misc/templatetags/multimedia_tags.py b/app/misc/templatetags/multimedia_tags.py
new file mode 100644
index 0000000..bb785b0
--- /dev/null
+++ b/app/misc/templatetags/multimedia_tags.py
@@ -0,0 +1,22 @@
+from wagtail.models import Page
+from django import template
+from django.utils.translation import get_language
+from home.models import HomePage
+from django.conf import settings
+import urllib.parse
+
+
+register = template.Library()
+
+@register.filter
+def get_youtube_video_code(value):
+    try:
+        params_string = value.split("?")[1]
+        params = urllib.parse.parse_qs(params_string)
+
+        if params['v']:
+            return params['v'][0]
+    except:
+        return None
+    
+    return None
diff --git a/app/news/migrations/0022_individualnewspage_associated_hubs_and_more.py b/app/news/migrations/0022_individualnewspage_associated_hubs_and_more.py
new file mode 100644
index 0000000..773c089
--- /dev/null
+++ b/app/news/migrations/0022_individualnewspage_associated_hubs_and_more.py
@@ -0,0 +1,25 @@
+# Generated by Django 4.2.7 on 2024-10-07 18:04
+
+from django.db import migrations, models
+import wagtail.blocks
+import wagtail.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('news', '0021_remove_newsownerpage_view_all_news_url_and_more'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='individualnewspage',
+            name='associated_hubs',
+            field=wagtail.fields.StreamField([('region_hub', wagtail.blocks.PageChooserBlock(page_type=['mapping_hubs.IndividualMappingHubPage']))], blank=True, null=True, use_json_field=True),
+        ),
+        migrations.AddField(
+            model_name='newsownerpage',
+            name='hubs_title',
+            field=models.CharField(default='Associated Hubs'),
+        ),
+    ]
diff --git a/app/news/migrations/0023_newsownerpage_filter_by_hub.py b/app/news/migrations/0023_newsownerpage_filter_by_hub.py
new file mode 100644
index 0000000..de647e1
--- /dev/null
+++ b/app/news/migrations/0023_newsownerpage_filter_by_hub.py
@@ -0,0 +1,18 @@
+# Generated by Django 4.2.7 on 2024-10-07 20:52
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('news', '0022_individualnewspage_associated_hubs_and_more'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='newsownerpage',
+            name='filter_by_hub',
+            field=models.CharField(default='Filter by Hub'),
+        ),
+    ]
diff --git a/app/news/migrations/0024_alter_newsownerpage_view_all_news_link.py b/app/news/migrations/0024_alter_newsownerpage_view_all_news_link.py
new file mode 100644
index 0000000..734efcd
--- /dev/null
+++ b/app/news/migrations/0024_alter_newsownerpage_view_all_news_link.py
@@ -0,0 +1,21 @@
+# Generated by Django 4.2.7 on 2024-10-10 17:41
+
+from django.db import migrations
+import wagtail.blocks
+import wagtail.documents.blocks
+import wagtail.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('news', '0023_newsownerpage_filter_by_hub'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='newsownerpage',
+            name='view_all_news_link',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], blank=True, use_json_field=True),
+        ),
+    ]
diff --git a/app/news/models.py b/app/news/models.py
index f1a9c1d..c0c9f9c 100644
--- a/app/news/models.py
+++ b/app/news/models.py
@@ -15,6 +15,7 @@
 from wagtail.search import index
 
 from app.core.models import LinkOrPageBlock
+from app.mapping_hubs.models import IndividualMappingHubPage
 
 
 class NewsOwnerPage(Page):
@@ -40,6 +41,13 @@ def get_context(self, request, *args, **kwargs):
             query = query | Q(tags__name=tag)
         news_list = news_list.filter(query).distinct()
 
+        hubs = IndividualMappingHubPage.objects.live().filter(locale=context['page'].locale)
+        query = Q()
+        for hub in hubs:
+            if request.GET.get(f"hub{hub.id}", ''):
+                query = query | Q(associated_hubs__contains=[{'type': 'region_hub', 'value': hub.id }])
+        news_list = news_list.filter(query).distinct()
+
         match request.GET.get('sort', ''):
             case 'sort.new':
                 news_list = news_list.order_by('-date')
@@ -65,6 +73,7 @@ def get_context(self, request, *args, **kwargs):
         context['news_paginator'] = paginator
         context['current_page'] = int(page)
         context['categories'] = categories
+        context['hubs'] = hubs
         return context
     
     max_count = 1
@@ -82,8 +91,10 @@ def get_context(self, request, *args, **kwargs):
     news_read_more_text = models.CharField(default="Read More")
     categories_title = models.CharField(default="Categories")
     tags_title = models.CharField(default="Tags")
+    hubs_title = models.CharField(default="Associated Hubs")
 
     keyword_search_hint = models.CharField(default="Search by keyword")
+    filter_by_hub = models.CharField(default="Filter by Hub")
     category_select = models.CharField(default="Select Categories")
     sort_by_new = models.CharField(default="Sort by New")
     sort_by_old = models.CharField(default="Sort by Old")
@@ -97,6 +108,7 @@ def get_context(self, request, *args, **kwargs):
     content_panels = Page.content_panels + [
         MultiFieldPanel([
             FieldPanel('keyword_search_hint'),
+            FieldPanel('filter_by_hub'),
             FieldPanel('category_select'),
             FieldPanel('sort_by_new'),
             FieldPanel('sort_by_old'),
@@ -186,6 +198,8 @@ class IndividualNewsPage(Page):
 
     tags = ClusterTaggableManager(through=NewsTag, blank=True)
 
+    associated_hubs = StreamField([('region_hub', PageChooserBlock(page_type="mapping_hubs.IndividualMappingHubPage"))], use_json_field=True, null=True, blank=True)
+
     search_fields = Page.search_fields + [
         index.SearchField('title'),
         index.SearchField('intro'),
@@ -207,8 +221,6 @@ class IndividualNewsPage(Page):
             FieldPanel('related_news'),
             FieldPanel('categories', widget=forms.CheckboxSelectMultiple),
             FieldPanel('tags'),
+            FieldPanel('associated_hubs'),
         ], heading="Sidebar"),
     ]
-
-
-
diff --git a/app/news/templates/news/individual_news_page.html b/app/news/templates/news/individual_news_page.html
index 18c1efd..7f8631c 100644
--- a/app/news/templates/news/individual_news_page.html
+++ b/app/news/templates/news/individual_news_page.html
@@ -10,11 +10,11 @@
 {% endblock extra_css %}
 
 {% block content %}
-    <div class="max-w-7xl mx-auto">
+    <div class="max-w-7xl mx-auto my-10">
         {% comment %} HEADER {% endcomment %}
-        <div class="px-6 md:px-10 py-5">
+        <div class="px-6 md:px-10">
             <h1 class="font-bold text-h2">{{ page.title }}</h1>
-            <p>
+            <p class="mt-2">
                 {% if page.authors %}
                     {{page.get_parent.specific.authors_posted_by_text}}
                     {% for author in page.authors %}
@@ -30,7 +30,7 @@ <h1 class="font-bold text-h2">{{ page.title }}</h1>
                 <div class="col-span-2">
                     <div class="base-article-m">
                         <div class="[&_img]:mt-0">
-                            {% image page.image original class="pb-8" %}
+                            {% image page.image original class="mb-8 aspect-[8/5] object-cover" %}
                         </div>
 
                         <div class="text-intro">
@@ -39,7 +39,7 @@ <h1 class="font-bold text-h2">{{ page.title }}</h1>
                         {{ page.article_body }}
                     </div>
 
-                    <div class="mt-20">
+                    <div class="my-20">
                         {% include "ui/components/sharers/ShareSection.html" %}
                     </div>
                 </div>
diff --git a/app/news/templates/news/news_owner_page.html b/app/news/templates/news/news_owner_page.html
index 030a77e..65af967 100644
--- a/app/news/templates/news/news_owner_page.html
+++ b/app/news/templates/news/news_owner_page.html
@@ -29,6 +29,25 @@ <h1 class="text-h1 font-semibold my-10">{{page.title}}</h1>
                         {% include "ui/components/icon_svgs/SearchIcon.html" with class="text-hot-red mx-3" %}
                     </div>
 
+                    {% comment %} HUB {% endcomment %}
+                    <div class="relative" x-data="{ show: false }" @click.away="show = false">
+                        <div class="w-full h-full flex justify-between py-2 px-3 bg-hot-off-white items-center cursor-pointer" @click="show = !show">
+                            <p class="pointer-events-none">
+                                {{page.filter_by_hub}}
+                            </p>
+                            {% include "ui/components/icon_svgs/LinkCaret.html" with class="rotate-90 text-hot-red" %}
+                        </div>
+                        <div class="absolute z-20 bg-hot-off-white p-4 w-full" x-show="show">
+                            <hr class="border-b-2">
+                            {% for hub in hubs %}
+                                <div class="mt-4 flex">
+                                    <label for="hub-{{forloop.counter}}">{{hub.title}}</label>
+                                    <input class="ml-auto checked:bg-hot-red checked:hover:bg-hot-red checked:focus:bg-hot-red" id="hub-{{forloop.counter}}" type="checkbox" name="hub{{hub.id}}" :checked="params.get('hub{{hub.id}}')">
+                                </div>
+                            {% endfor %}
+                        </div>
+                    </div>
+
                     {% comment %} CATEGORY {% endcomment %}
                     <div class="relative" x-data="{ show: false }" @click.away="show = false">
                         <div class="w-full h-full flex justify-between py-2 px-3 bg-hot-off-white items-center cursor-pointer" @click="show = !show">
diff --git a/app/our_work/migrations/0005_alter_ourworkpage_black_box_link_and_more.py b/app/our_work/migrations/0005_alter_ourworkpage_black_box_link_and_more.py
new file mode 100644
index 0000000..e835227
--- /dev/null
+++ b/app/our_work/migrations/0005_alter_ourworkpage_black_box_link_and_more.py
@@ -0,0 +1,31 @@
+# Generated by Django 4.2.7 on 2024-10-10 17:41
+
+from django.db import migrations
+import wagtail.blocks
+import wagtail.documents.blocks
+import wagtail.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('our_work', '0004_alter_ourworkpage_black_box_link_and_more'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='ourworkpage',
+            name='black_box_link',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], blank=True, use_json_field=True),
+        ),
+        migrations.AlterField(
+            model_name='ourworkpage',
+            name='red_box_link',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], blank=True, use_json_field=True),
+        ),
+        migrations.AlterField(
+            model_name='ourworkpage',
+            name='view_all_programs_link',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], blank=True, use_json_field=True),
+        ),
+    ]
diff --git a/app/our_work/templates/our_work/our_work_page.html b/app/our_work/templates/our_work/our_work_page.html
index fe93bcb..fe747e0 100644
--- a/app/our_work/templates/our_work/our_work_page.html
+++ b/app/our_work/templates/our_work/our_work_page.html
@@ -236,7 +236,7 @@ <h1 class="text-h2 font-bold mb-8">
                     {% include "ui/components/dogear_boxes/DogearRed.html" with title=page.red_box_title linktext=page.red_box_link_text linkurl=page.red_box_link %}
                 </div>
                 <div>
-                    {% include "ui/components/dogear_boxes/DogearBlack.html" with title=page.black_box_title linktext=page.black_box_link_text linkurl=black_box_link %}
+                    {% include "ui/components/dogear_boxes/DogearBlack.html" with title=page.black_box_title linktext=page.black_box_link_text linkurl=page.black_box_link %}
                 </div>
             </div>
         </div>
@@ -268,7 +268,5 @@ <h1 class="text-h2 font-bold mb-8">
                 }
             })
         }
-        
-        
     </script>
 {% endblock %}
diff --git a/app/partners/migrations/0013_alter_ourpartnerspage_black_box_link_url_and_more.py b/app/partners/migrations/0013_alter_ourpartnerspage_black_box_link_url_and_more.py
new file mode 100644
index 0000000..b0fb6dd
--- /dev/null
+++ b/app/partners/migrations/0013_alter_ourpartnerspage_black_box_link_url_and_more.py
@@ -0,0 +1,46 @@
+# Generated by Django 4.2.7 on 2024-10-10 17:41
+
+from django.db import migrations
+import wagtail.blocks
+import wagtail.documents.blocks
+import wagtail.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('partners', '0012_ourpartnerspage_filter_by_hub_and_more'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='ourpartnerspage',
+            name='black_box_link_url',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], blank=True, use_json_field=True),
+        ),
+        migrations.AlterField(
+            model_name='ourpartnerspage',
+            name='red_box_link_url',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], blank=True, use_json_field=True),
+        ),
+        migrations.AlterField(
+            model_name='partnerwithuspage',
+            name='call_to_action_link_url',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], blank=True, use_json_field=True),
+        ),
+        migrations.AlterField(
+            model_name='partnerwithuspage',
+            name='red_box_link_url',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], blank=True, use_json_field=True),
+        ),
+        migrations.AlterField(
+            model_name='partnerwithuspage',
+            name='view_all_partners_link',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], blank=True, use_json_field=True),
+        ),
+        migrations.AlterField(
+            model_name='partnerwithuspage',
+            name='view_partners_link',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], blank=True, use_json_field=True),
+        ),
+    ]
diff --git a/app/programs/migrations/0013_alter_programownerpage_bottom_banner_link_url_and_more.py b/app/programs/migrations/0013_alter_programownerpage_bottom_banner_link_url_and_more.py
new file mode 100644
index 0000000..9f4f149
--- /dev/null
+++ b/app/programs/migrations/0013_alter_programownerpage_bottom_banner_link_url_and_more.py
@@ -0,0 +1,31 @@
+# Generated by Django 4.2.7 on 2024-10-10 17:41
+
+from django.db import migrations
+import wagtail.blocks
+import wagtail.documents.blocks
+import wagtail.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('programs', '0012_remove_individualprogrampage_partners'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='programownerpage',
+            name='bottom_banner_link_url',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], blank=True, use_json_field=True),
+        ),
+        migrations.AlterField(
+            model_name='programownerpage',
+            name='view_all_partners_link_url',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], blank=True, use_json_field=True),
+        ),
+        migrations.AlterField(
+            model_name='programownerpage',
+            name='view_all_programs_link_url',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], blank=True, use_json_field=True),
+        ),
+    ]
diff --git a/app/projects/migrations/0038_alter_individualprojectpage_call_to_action_link_and_more.py b/app/projects/migrations/0038_alter_individualprojectpage_call_to_action_link_and_more.py
new file mode 100644
index 0000000..2aa742f
--- /dev/null
+++ b/app/projects/migrations/0038_alter_individualprojectpage_call_to_action_link_and_more.py
@@ -0,0 +1,41 @@
+# Generated by Django 4.2.7 on 2024-10-10 17:41
+
+from django.db import migrations
+import wagtail.blocks
+import wagtail.documents.blocks
+import wagtail.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('projects', '0037_remove_individualprojectpage_partners_list_and_more'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='individualprojectpage',
+            name='call_to_action_link',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], blank=True, use_json_field=True),
+        ),
+        migrations.AlterField(
+            model_name='projectownerpage',
+            name='black_box_link',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], blank=True, use_json_field=True),
+        ),
+        migrations.AlterField(
+            model_name='projectownerpage',
+            name='red_box_link',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], blank=True, use_json_field=True),
+        ),
+        migrations.AlterField(
+            model_name='projectownerpage',
+            name='view_all_events_link',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], blank=True, use_json_field=True),
+        ),
+        migrations.AlterField(
+            model_name='projectownerpage',
+            name='view_all_news_link',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], blank=True, use_json_field=True),
+        ),
+    ]
diff --git a/app/rfp/migrations/0008_alter_requestforproposalownerpage_job_opportunities_button_url.py b/app/rfp/migrations/0008_alter_requestforproposalownerpage_job_opportunities_button_url.py
new file mode 100644
index 0000000..e8db88d
--- /dev/null
+++ b/app/rfp/migrations/0008_alter_requestforproposalownerpage_job_opportunities_button_url.py
@@ -0,0 +1,21 @@
+# Generated by Django 4.2.7 on 2024-10-10 17:41
+
+from django.db import migrations
+import wagtail.blocks
+import wagtail.documents.blocks
+import wagtail.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('rfp', '0007_rename_header_description_requestforproposalownerpage_intro'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='requestforproposalownerpage',
+            name='job_opportunities_button_url',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], blank=True, use_json_field=True),
+        ),
+    ]
diff --git a/app/rfp/templates/rfp/individual_request_for_proposal_page.html b/app/rfp/templates/rfp/individual_request_for_proposal_page.html
index d77a3c2..19f8e2b 100644
--- a/app/rfp/templates/rfp/individual_request_for_proposal_page.html
+++ b/app/rfp/templates/rfp/individual_request_for_proposal_page.html
@@ -10,14 +10,14 @@
 {% endblock extra_css %}
 
 {% block content %}
-    <div class="max-w-7xl mx-auto">
+    <div class="max-w-7xl mx-auto my-10">
         {% comment %} HEADER {% endcomment %}
-        <div class="px-6 md:px-10 py-5">
-            <h1 class="text-h2 font-bold">{{ page.title }} </h1>
-            <p>
+        <div class="px-6 md:px-10 mb-5">
+            <h1 class="text-h1 font-bold">{{ page.title }} </h1>
+            <p class="mt-2">
                 {{page.get_parent.specific.posted_by_prefix_text}}
                 {% for poster in page.posters %}
-                    <a href="{{poster.value.url}}"><b class="text-black">{{poster.value.title}}</b></a>{% if not forloop.last %}, {% endif %}
+                    <a href="{{poster.value.url}}"><b class="text-black hover:underline">{{poster.value.title}}</b></a>{% if not forloop.last %}, {% endif %}
                 {% endfor %}
                 <span class="text-hot-red"> • </span>{{ page.post_date }}
             </p>
@@ -25,7 +25,7 @@ <h1 class="text-h2 font-bold">{{ page.title }} </h1>
 
         <div class="grid grid-cols-1 lg:grid-cols-3 gap-12 px-6 md:px-10">
             {% comment %} BODY {% endcomment %}
-            <div class="py-5 col-span-2 base-article-m">
+            <div class="col-span-2 base-article-m">
                 <div class="text-intro font-medium mb-4">
                     {{ page.intro|safe }}
                 </div>
@@ -33,7 +33,7 @@ <h1 class="text-h2 font-bold">{{ page.title }} </h1>
             </div>
 
             {% comment %} SIDEBAR {% endcomment %}
-            <div class="py-5 sidebar [&>div]:my-8 [&_div:first-child_hr]:hidden [&_hr]:mb-8 md:w-1/2 lg:w-auto">
+            <div class="sidebar [&>div]:my-8 [&_div:first-child_hr]:hidden [&_hr]:mb-8 md:w-1/2 lg:w-auto">
                 <h1 class="text-h2 font-bold">
                     {{ page.get_parent.specific.terms_of_reference_title }}
                 </h1>
@@ -56,7 +56,7 @@ <h1 class="text-h2 font-bold mb-6">
             </div>
         </div>
 
-        <div class="px-6 md:px-10mt-10 mb-20">
+        <div class="px-6 md:px-10 mt-10 mb-20">
             <p class="text-intro">
                 {% include "ui/components/BaseLink.html" with linktext=page.get_parent.specific.go_back_text linkurl=page.get_parent.url %}
             </p>
diff --git a/app/tech/migrations/0006_alter_techproductsuitepage_product_suite_learn_more_text.py b/app/tech/migrations/0006_alter_techproductsuitepage_product_suite_learn_more_text.py
new file mode 100644
index 0000000..adaec95
--- /dev/null
+++ b/app/tech/migrations/0006_alter_techproductsuitepage_product_suite_learn_more_text.py
@@ -0,0 +1,18 @@
+# Generated by Django 4.2.7 on 2024-10-09 16:08
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('tech', '0005_techproductsuitepage_category_filter_selector'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='techproductsuitepage',
+            name='product_suite_learn_more_text',
+            field=models.CharField(default='Learn more'),
+        ),
+    ]
diff --git a/app/tech/migrations/0007_alter_individualtechstackpage_link_blocks_and_more.py b/app/tech/migrations/0007_alter_individualtechstackpage_link_blocks_and_more.py
new file mode 100644
index 0000000..ed6fd27
--- /dev/null
+++ b/app/tech/migrations/0007_alter_individualtechstackpage_link_blocks_and_more.py
@@ -0,0 +1,41 @@
+# Generated by Django 4.2.7 on 2024-10-10 17:41
+
+from django.db import migrations
+import wagtail.blocks
+import wagtail.documents.blocks
+import wagtail.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('tech', '0006_alter_techproductsuitepage_product_suite_learn_more_text'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='individualtechstackpage',
+            name='link_blocks',
+            field=wagtail.fields.StreamField([('blocks', wagtail.blocks.StructBlock([('title', wagtail.blocks.CharBlock()), ('linktext', wagtail.blocks.CharBlock()), ('linkurl', wagtail.blocks.StreamBlock([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))]))]))], blank=True, null=True, use_json_field=True),
+        ),
+        migrations.AlterField(
+            model_name='techproductsuitepage',
+            name='black_box_link_url',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], blank=True, use_json_field=True),
+        ),
+        migrations.AlterField(
+            model_name='techproductsuitepage',
+            name='go_back_link',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], blank=True, use_json_field=True),
+        ),
+        migrations.AlterField(
+            model_name='techproductsuitepage',
+            name='red_box_link_url',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], blank=True, use_json_field=True),
+        ),
+        migrations.AlterField(
+            model_name='techproductsuitepage',
+            name='tech_stack_cta_button_link_url',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], blank=True, use_json_field=True),
+        ),
+    ]
diff --git a/app/tech/models.py b/app/tech/models.py
index 6acae4c..b8c6135 100644
--- a/app/tech/models.py
+++ b/app/tech/models.py
@@ -94,7 +94,7 @@ class TechProductSuitePage(Page):
     ], use_json_field=True, null=True, blank=True, help_text="Blocks to be shown under the Tech Principles section.")
 
     product_suite_title = models.CharField(default="Product Suite")
-    product_suite_learn_more_text = models.CharField(default="Learn more about", help_text="Prefix text to be shown in page previews for the product suite section; if the page being previewed is named 'Tasking Manager', and this field is 'Learn more about', they would combine to be 'Learn more about Tasking Manager'.")
+    product_suite_learn_more_text = models.CharField(default="Learn more")
 
     red_box_title = models.CharField(default="HOT GitHub")
     red_box_link_text = models.CharField(default="View HOT's GitHub")
diff --git a/app/tech/templates/tech/individual_tech_stack_page.html b/app/tech/templates/tech/individual_tech_stack_page.html
index 9e80a01..4a52d5c 100644
--- a/app/tech/templates/tech/individual_tech_stack_page.html
+++ b/app/tech/templates/tech/individual_tech_stack_page.html
@@ -71,7 +71,7 @@ <h1 class="text-h4 font-semibold">
 
             {% include "ui/components/FooterBannerWithTextAndLink.html" with text=page.get_parent.specific.tech_stack_cta_title description=page.get_parent.specific.tech_stack_cta_description buttontext=page.get_parent.specific.tech_stack_cta_button_link_text url=page.get_parent.specific.tech_stack_cta_button_link_url %}
 
-            <p class="my-20">
+            <p class="my-20 text-intro">
                 {% include "ui/components/BaseLink.html" with linktext=page.get_parent.specific.tech_stack_go_back_text|add:' '|add:page.get_parent.title linkurl=page.get_parent.url %}
             </p>
         </div>
diff --git a/app/tech/templates/tech/tech_product_suite_page.html b/app/tech/templates/tech/tech_product_suite_page.html
index 7b24cbd..46a3cb3 100644
--- a/app/tech/templates/tech/tech_product_suite_page.html
+++ b/app/tech/templates/tech/tech_product_suite_page.html
@@ -37,7 +37,7 @@ <h1 class="text-h5 font-bold">
             {% include "ui/components/TitleWithUnderline.html" with title=page.product_suite_title %}
             <div class="mt-8 mb-20 grid grid-cols-1 lg:grid-cols-2 gap-8">
                 {% for child in page.get_children %}
-                    {% include "ui/components/misc_panels/LinkBlockWithImage.html" with title=child.title description=child.specific.intro image=child.specific.header_image linktext=page.product_suite_learn_more_text|add:" "|add:child.title linkurl=child.url %}
+                    {% include "ui/components/misc_panels/LinkBlockWithImage.html" with title=child.title description=child.specific.intro image=child.specific.header_image linktext=page.product_suite_learn_more_text linkurl=child.url %}
                 {% endfor %}
             </div>
 
diff --git a/app/tools_and_resources/migrations/0009_alter_openmappingsolutionspage_cta_button_link_and_more.py b/app/tools_and_resources/migrations/0009_alter_openmappingsolutionspage_cta_button_link_and_more.py
new file mode 100644
index 0000000..bf0a8fb
--- /dev/null
+++ b/app/tools_and_resources/migrations/0009_alter_openmappingsolutionspage_cta_button_link_and_more.py
@@ -0,0 +1,62 @@
+# Generated by Django 4.2.7 on 2024-10-10 17:41
+
+from django.db import migrations
+import wagtail.blocks
+import wagtail.documents.blocks
+import wagtail.fields
+import wagtail.images.blocks
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('tools_and_resources', '0008_toolsandresourcespage_category_filter_selector'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='openmappingsolutionspage',
+            name='cta_button_link',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], blank=True, use_json_field=True),
+        ),
+        migrations.AlterField(
+            model_name='openmappingsolutionspage',
+            name='solutions',
+            field=wagtail.fields.StreamField([('solution', wagtail.blocks.StructBlock([('title', wagtail.blocks.CharBlock()), ('banner', wagtail.images.blocks.ImageChooserBlock()), ('description', wagtail.blocks.RichTextBlock()), ('items', wagtail.blocks.StreamBlock([('item', wagtail.blocks.StructBlock([('title', wagtail.blocks.CharBlock()), ('description', wagtail.blocks.RichTextBlock()), ('links', wagtail.blocks.StreamBlock([('link', wagtail.blocks.StructBlock([('linktext', wagtail.blocks.CharBlock()), ('linkurl', wagtail.blocks.StreamBlock([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], required=False))]))], required=False))]))]))]))], blank=True, null=True, use_json_field=True),
+        ),
+        migrations.AlterField(
+            model_name='resourceandlearningpage',
+            name='large_panels',
+            field=wagtail.fields.StreamField([('panel', wagtail.blocks.StructBlock([('image', wagtail.images.blocks.ImageChooserBlock()), ('title', wagtail.blocks.CharBlock()), ('description', wagtail.blocks.RichTextBlock()), ('link_text', wagtail.blocks.CharBlock()), ('link', wagtail.blocks.StreamBlock([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], required=False))]))], blank=True, null=True, use_json_field=True),
+        ),
+        migrations.AlterField(
+            model_name='toolsandresourcespage',
+            name='black_box_link',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], blank=True, use_json_field=True),
+        ),
+        migrations.AlterField(
+            model_name='toolsandresourcespage',
+            name='dogear_tech_news_link',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], blank=True, use_json_field=True),
+        ),
+        migrations.AlterField(
+            model_name='toolsandresourcespage',
+            name='get_connected_button_url',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], blank=True, use_json_field=True),
+        ),
+        migrations.AlterField(
+            model_name='toolsandresourcespage',
+            name='large_panels',
+            field=wagtail.fields.StreamField([('panel', wagtail.blocks.StructBlock([('image', wagtail.images.blocks.ImageChooserBlock()), ('title', wagtail.blocks.CharBlock()), ('description', wagtail.blocks.RichTextBlock()), ('link_text', wagtail.blocks.CharBlock()), ('link', wagtail.blocks.StreamBlock([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], required=False))]))], blank=True, null=True, use_json_field=True),
+        ),
+        migrations.AlterField(
+            model_name='toolsandresourcespage',
+            name='learn_more_data_principles_url',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], blank=True, use_json_field=True),
+        ),
+        migrations.AlterField(
+            model_name='toolsandresourcespage',
+            name='red_box_link',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], blank=True, use_json_field=True),
+        ),
+    ]
diff --git a/app/tools_and_resources/templates/tools_and_resources/open_mapping_solutions_page.html b/app/tools_and_resources/templates/tools_and_resources/open_mapping_solutions_page.html
index 12d7a73..c29b2e0 100644
--- a/app/tools_and_resources/templates/tools_and_resources/open_mapping_solutions_page.html
+++ b/app/tools_and_resources/templates/tools_and_resources/open_mapping_solutions_page.html
@@ -76,7 +76,7 @@ <h2 class="text-h4 font-semibold">
             </div>
 
             <div class="my-20">
-                {% include "ui/components/FooterBannerWithTextAndLink.html" with text=page.cta_title description=page.cta_description buttontext=page.cta_button_text buttonurl=page.cta_button_link %}
+                {% include "ui/components/FooterBannerWithTextAndLink.html" with text=page.cta_title description=page.cta_description buttontext=page.cta_button_text url=page.cta_button_link %}
             </div>
 
             <p class="text-intro font-medium my-20">
diff --git a/app/tools_and_resources/templates/tools_and_resources/tools_and_resources_page.html b/app/tools_and_resources/templates/tools_and_resources/tools_and_resources_page.html
index c301772..c5f95ab 100644
--- a/app/tools_and_resources/templates/tools_and_resources/tools_and_resources_page.html
+++ b/app/tools_and_resources/templates/tools_and_resources/tools_and_resources_page.html
@@ -26,7 +26,7 @@ <h1 class="text-h2 font-bold">{{page.intro_header}}</h1>
                         {% include "ui/components/BaseLinkNoUnderline.html" with linkurl=page.learn_more_data_principles_url linktext=page.learn_more_data_principles_text %}
                     </p>
                 </div>
-                {% image page.intro_image original %}
+                {% image page.intro_image original class="hidden lg:block" %}
             </div>
 
             <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 my-20">
diff --git a/app/ui/templates/ui/components/events/EventPreviewBlockEvent.html b/app/ui/templates/ui/components/events/EventPreviewBlockEvent.html
index 747b48d..3ecc6b6 100644
--- a/app/ui/templates/ui/components/events/EventPreviewBlockEvent.html
+++ b/app/ui/templates/ui/components/events/EventPreviewBlockEvent.html
@@ -34,7 +34,7 @@
     
     <hr class="border-b-2 my-2" />
 
-    <p class="text-h5 font-bold mt-4">{{event.title}}</p>
+    <a href="{{event.url}}" class="hover:text-hot-red"><p class="text-h5 font-bold mt-4">{{event.title}}</p></a>
     <div class="my-2 [&_p]:text-small">{{event.intro|richtext}}</div>
 
     <div class="flex gap-4 mt-4">
diff --git a/app/ui/templates/ui/components/misc_panels/PagePreviewWithTabletDescription.html b/app/ui/templates/ui/components/misc_panels/PagePreviewWithTabletDescription.html
index f42a9b4..4e62298 100644
--- a/app/ui/templates/ui/components/misc_panels/PagePreviewWithTabletDescription.html
+++ b/app/ui/templates/ui/components/misc_panels/PagePreviewWithTabletDescription.html
@@ -18,13 +18,15 @@ <h1 class="font-semibold text-h3 text-white">
                 {{page.title}}
             </h1>
         </div>
-        <div class="hover-show row-start-1 col-start-1 opacity-0 pointer-events-none bg-hot-red text-white justify-center py-4 px-6 flex flex-col transition duration-100">
-            <h2 class="text-h3 font-bold">{{page.title}}</h2>
-            <div class="w-full aspect-[3/1] overflow-hidden">{{tablet_description|richtext}}</div>
-            <p class="mt-4">
-                {% include "ui/components/BaseLinkNoUnderlineWhite.html" with anchorless=True linktext=read_more_text whitearrow=True %}
-            </p>
-        </div>
+        {% if not hoverless %}
+            <div class="hover-show row-start-1 col-start-1 opacity-0 pointer-events-none bg-hot-red text-white justify-center py-4 px-6 flex flex-col transition duration-100">
+                <h2 class="text-h3 font-bold">{{page.title}}</h2>
+                <div class="w-full aspect-[3/1] overflow-hidden">{{tablet_description|richtext}}</div>
+                <p class="mt-4">
+                    {% include "ui/components/BaseLinkNoUnderlineWhite.html" with anchorless=True linktext=read_more_text whitearrow=True %}
+                </p>
+            </div>
+        {% endif %}
     </div>
     <div class="lg:hidden">
         <h1 class="font-bold text-h3 my-2">{{page.title}}</h1>
diff --git a/app/ui/templates/ui/components/navigation/HeaderNavbar.html b/app/ui/templates/ui/components/navigation/HeaderNavbar.html
index 2211d5f..ebc82c6 100644
--- a/app/ui/templates/ui/components/navigation/HeaderNavbar.html
+++ b/app/ui/templates/ui/components/navigation/HeaderNavbar.html
@@ -20,8 +20,11 @@
 
                 {% comment %} NAVBAR ITEM BUTTONS {% endcomment %}
                 {% for item in home_page.navigation_buttons %}
-                    <li class="hidden md:block">
-                        {% include "ui/components/navigation/HeaderNavbarButton.html" with item=item.value %}
+                    <li class="hidden md:flex items-center text-small font-medium">
+                        {% comment %} {% include "ui/components/navigation/HeaderNavbarButton.html" with item=item.value %} {% endcomment %}
+                        <a class="hover:underline decoration-2 text-black" href="{%if item.value.link_page%}{{item.value.link_page.url}}{%elif item.value.link_url%}{{item.value.link_url}}{%else%}#{%endif%}">
+                            <span class="text-hot-red">{{item.value.title}}</span>
+                        </a>
                     </li>
                 {% endfor %}
 
diff --git a/app/ui/templates/ui/components/news/NewsPreviewBlockProjects.html b/app/ui/templates/ui/components/news/NewsPreviewBlockProjects.html
index 7214abf..b4fb544 100644
--- a/app/ui/templates/ui/components/news/NewsPreviewBlockProjects.html
+++ b/app/ui/templates/ui/components/news/NewsPreviewBlockProjects.html
@@ -7,10 +7,10 @@
 {% load wagtailimages_tags %}
 
 {% image news.image original as image_p %}
-<div class=" {{class}}">
+<div class="{{class}} [&:hover_.hover-title]:text-hot-red">
     <a href="{{ news.url }}">
         {% if showimage %}
-            <div class="image-hide-small w-full min-h-[9rem] mb-3 content-end bg-no-repeat bg-cover image-overshadow-gradient" style="background-image: url('{{ image_p.url }}')">
+            <div class="image-hide-small w-full min-h-[9rem] mb-3 content-end bg-no-repeat bg-cover bg-center image-overshadow-gradient aspect-[5/3]" style="background-image: url('{{ image_p.url }}')">
                 <div>
                 </div>
             </div>
@@ -24,7 +24,7 @@
 
         <hr class="my-2" />
 
-        <p class="text-h5 font-bold my-2">
+        <p class="text-h5 font-bold my-2 hover-title">
             {{ news.title }}
         </p>
 
diff --git a/app/ui/templates/ui/components/projects/ProjectPreviewBlockMapHub.html b/app/ui/templates/ui/components/projects/ProjectPreviewBlockMapHub.html
index 6eefaf4..be402b2 100644
--- a/app/ui/templates/ui/components/projects/ProjectPreviewBlockMapHub.html
+++ b/app/ui/templates/ui/components/projects/ProjectPreviewBlockMapHub.html
@@ -12,7 +12,7 @@
         <div>
             {% if showimage %}
                 <div class="w-full min-h-[9rem] mb-3 image-overshadow-gradient">
-                    {% image project.header_image original class="aspect-[3/2] object-cover object-center" %}
+                    {% image project.header_image original class="aspect-[5/3] object-cover object-center" %}
                 </div>
             {% endif %}
 
diff --git a/app/ui/templates/ui/components/projects/ProjectPreviewBlockNews.html b/app/ui/templates/ui/components/projects/ProjectPreviewBlockNews.html
index 485907b..c2068fd 100644
--- a/app/ui/templates/ui/components/projects/ProjectPreviewBlockNews.html
+++ b/app/ui/templates/ui/components/projects/ProjectPreviewBlockNews.html
@@ -12,7 +12,7 @@
         <div>
             {% if showimage %}
                 <div class="w-full min-h-[9rem] mb-3 image-overshadow-gradient">
-                    {% image project.header_image original class="aspect-[3/2] object-cover object-center" %}
+                    {% image project.header_image original class="aspect-[5/3] object-cover object-center" %}
                 </div>
             {% endif %}
 
diff --git a/app/volunteer_opportunities/migrations/0007_alter_volunteeropportunityownerpage_aside_block_link_and_more.py b/app/volunteer_opportunities/migrations/0007_alter_volunteeropportunityownerpage_aside_block_link_and_more.py
new file mode 100644
index 0000000..58edec1
--- /dev/null
+++ b/app/volunteer_opportunities/migrations/0007_alter_volunteeropportunityownerpage_aside_block_link_and_more.py
@@ -0,0 +1,31 @@
+# Generated by Django 4.2.7 on 2024-10-10 17:41
+
+from django.db import migrations
+import wagtail.blocks
+import wagtail.documents.blocks
+import wagtail.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('volunteer_opportunities', '0006_remove_volunteeropportunityownerpage_aside_block_link_url_and_more'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='volunteeropportunityownerpage',
+            name='aside_block_link',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], blank=True, use_json_field=True),
+        ),
+        migrations.AlterField(
+            model_name='volunteeropportunityownerpage',
+            name='black_box_link',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], blank=True, use_json_field=True),
+        ),
+        migrations.AlterField(
+            model_name='volunteeropportunityownerpage',
+            name='red_box_link',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], blank=True, use_json_field=True),
+        ),
+    ]
diff --git a/app/volunteer_opportunities/templates/volunteer_opportunities/individual_volunteer_opportunity_page.html b/app/volunteer_opportunities/templates/volunteer_opportunities/individual_volunteer_opportunity_page.html
index 01bafa8..ccb2868 100644
--- a/app/volunteer_opportunities/templates/volunteer_opportunities/individual_volunteer_opportunity_page.html
+++ b/app/volunteer_opportunities/templates/volunteer_opportunities/individual_volunteer_opportunity_page.html
@@ -10,14 +10,14 @@
 {% endblock extra_css %}
 
 {% block content %}
-    <div class="max-w-7xl mx-auto">
+    <div class="max-w-7xl mx-auto my-10">
         {% comment %} HEADER {% endcomment %}
-        <div class="base-article px-6 md:px-10 py-5">
-            <h1>{{ page.title }}</h1>
-            <p>
+        <div class="px-6 md:px-10">
+            <h1 class="font-bold text-h1">{{ page.title }}</h1>
+            <p class="mt-2">
                 {{page.get_parent.specific.posted_by_prefix_text}}
                 {% for poster in page.posters %}
-                    <a href="{{poster.value.url}}"><b class="text-black">{{poster.value.title}}</b></a>{% if not forloop.last %}, {% endif %}
+                    <a href="{{poster.value.url}}" class="text-black font-bold hover:underline">{{poster.value.title}}</a>{% if not forloop.last %}, {% endif %}
                 {% endfor %}
             </p>
         </div>
diff --git a/app/who_we_are/migrations/0009_alter_whowearepage_black_box_link_and_more.py b/app/who_we_are/migrations/0009_alter_whowearepage_black_box_link_and_more.py
new file mode 100644
index 0000000..bced562
--- /dev/null
+++ b/app/who_we_are/migrations/0009_alter_whowearepage_black_box_link_and_more.py
@@ -0,0 +1,56 @@
+# Generated by Django 4.2.7 on 2024-10-10 17:41
+
+from django.db import migrations
+import wagtail.blocks
+import wagtail.documents.blocks
+import wagtail.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('who_we_are', '0008_whowearepage_preview_learn_more_text'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='whowearepage',
+            name='black_box_link',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], blank=True, use_json_field=True),
+        ),
+        migrations.AlterField(
+            model_name='whowearepage',
+            name='learn_more_button_link',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], blank=True, use_json_field=True),
+        ),
+        migrations.AlterField(
+            model_name='whowearepage',
+            name='our_approach_button_link',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], blank=True, use_json_field=True),
+        ),
+        migrations.AlterField(
+            model_name='whowearepage',
+            name='our_people_links',
+            field=wagtail.fields.StreamField([('link_block', wagtail.blocks.StructBlock([('text', wagtail.blocks.CharBlock()), ('link', wagtail.blocks.StreamBlock([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], blank=True, required=False))]))], blank=True, null=True, use_json_field=True),
+        ),
+        migrations.AlterField(
+            model_name='whowearepage',
+            name='our_policies_links',
+            field=wagtail.fields.StreamField([('link_block', wagtail.blocks.StructBlock([('text', wagtail.blocks.CharBlock()), ('link', wagtail.blocks.StreamBlock([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], blank=True, required=False))]))], blank=True, null=True, use_json_field=True),
+        ),
+        migrations.AlterField(
+            model_name='whowearepage',
+            name='partners_view_all_link',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], blank=True, use_json_field=True),
+        ),
+        migrations.AlterField(
+            model_name='whowearepage',
+            name='red_box_link',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], blank=True, use_json_field=True),
+        ),
+        migrations.AlterField(
+            model_name='whowearepage',
+            name='work_hot_button_url',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], blank=True, use_json_field=True),
+        ),
+    ]
diff --git a/home/migrations/0043_alter_homepage_home_stats.py b/home/migrations/0043_alter_homepage_home_stats.py
new file mode 100644
index 0000000..f39c4a3
--- /dev/null
+++ b/home/migrations/0043_alter_homepage_home_stats.py
@@ -0,0 +1,20 @@
+# Generated by Django 4.2.7 on 2024-10-03 22:49
+
+from django.db import migrations
+import wagtail.blocks
+import wagtail.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('home', '0042_alter_homepage_home_stats'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='homepage',
+            name='home_stats',
+            field=wagtail.fields.StreamField([('stat', wagtail.blocks.StructBlock([('fallback_number', wagtail.blocks.CharBlock(help_text="Displays if no API is given, or if the API call fails. This is a string so for numbers you'll want to format it (i.e., 1300 should be typed as 1.3K).")), ('statistic', wagtail.blocks.CharBlock(help_text='Displays as the description of the statistic.')), ('tooltip', wagtail.blocks.CharBlock(help_text="If this field is filled, an info 'i' will appear in this stat block, which will show this text when hovered.", required=False)), ('api', wagtail.blocks.StreamBlock([('api', wagtail.blocks.StructBlock([('name', wagtail.blocks.CharBlock(help_text='This name will be used for caching the result of this API, and as such, should be unique.')), ('endpoint', wagtail.blocks.CharBlock(help_text='This is the URL that will be called; should return a JSON object.')), ('key_path', wagtail.blocks.StreamBlock([('key', wagtail.blocks.CharBlock())], help_text="This should lead to the value that should be displayed for this API; i.e., if the result of calling the endpoint is a JSON object { 'result': {'stat': 10 } }, this field should have 'result' and 'stat' as keys, in that order, so as to navigate to ['result']['stat']."))]))], help_text='Do not touch this field unless you know what you are doing.', required=False))]))], blank=True, use_json_field=True),
+        ),
+    ]
diff --git a/home/migrations/0044_alter_homepage_carousel_alter_homepage_e404_links_and_more.py b/home/migrations/0044_alter_homepage_carousel_alter_homepage_e404_links_and_more.py
new file mode 100644
index 0000000..3acf7d6
--- /dev/null
+++ b/home/migrations/0044_alter_homepage_carousel_alter_homepage_e404_links_and_more.py
@@ -0,0 +1,97 @@
+# Generated by Django 4.2.7 on 2024-10-10 17:41
+
+from django.db import migrations
+import wagtail.blocks
+import wagtail.documents.blocks
+import wagtail.fields
+import wagtail.images.blocks
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('home', '0043_alter_homepage_home_stats'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='homepage',
+            name='carousel',
+            field=wagtail.fields.StreamField([('slides', wagtail.blocks.StructBlock([('header', wagtail.blocks.CharBlock(help_text='Slide header', required=True)), ('body', wagtail.blocks.CharBlock(help_text='Slide body', required=True)), ('action_button', wagtail.blocks.StructBlock([('text', wagtail.blocks.CharBlock(help_text='Text to display on the button', required=True)), ('link', wagtail.blocks.StreamBlock([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], blank=True, help_text='URL to link to', required=False))], help_text='Button to display on the slide', required=False))]))], blank=True, use_json_field=True, verbose_name='Carousel'),
+        ),
+        migrations.AlterField(
+            model_name='homepage',
+            name='e404_links',
+            field=wagtail.fields.StreamField([('link', wagtail.blocks.StructBlock([('text', wagtail.blocks.CharBlock()), ('link', wagtail.blocks.StreamBlock([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], required=False))]))], blank=True, help_text='Links to be shown on the 404 page.', null=True, use_json_field=True),
+        ),
+        migrations.AlterField(
+            model_name='homepage',
+            name='footer_bottom_links',
+            field=wagtail.fields.StreamField([('link', wagtail.blocks.StructBlock([('text', wagtail.blocks.CharBlock()), ('link', wagtail.blocks.StreamBlock([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], required=False))]))], blank=True, help_text='The links which show in the bottom right corner of the footer; Privacy Policy, Terms and Conditions, etc.', null=True, use_json_field=True),
+        ),
+        migrations.AlterField(
+            model_name='homepage',
+            name='footer_certifications',
+            field=wagtail.fields.StreamField([('certification', wagtail.blocks.StructBlock([('name', wagtail.blocks.CharBlock()), ('icon', wagtail.images.blocks.ImageChooserBlock()), ('link', wagtail.blocks.StreamBlock([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], required=False))]))], blank=True, help_text='Certifications to be shown in the footer.', null=True, use_json_field=True),
+        ),
+        migrations.AlterField(
+            model_name='homepage',
+            name='get_involved_button_url',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], blank=True, use_json_field=True),
+        ),
+        migrations.AlterField(
+            model_name='homepage',
+            name='mapping_hubs_link_link',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], blank=True, use_json_field=True),
+        ),
+        migrations.AlterField(
+            model_name='homepage',
+            name='navigation',
+            field=wagtail.fields.StreamField([('blocks', wagtail.blocks.StructBlock([('title', wagtail.blocks.CharBlock()), ('link', wagtail.blocks.StreamBlock([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], required=False)), ('show_in_footer', wagtail.blocks.BooleanBlock(help_text="If checked, this item (and its children) will show in the footer's navigation; otherwise, it will not show up.", required=False)), ('children', wagtail.blocks.StreamBlock([('nav_item', wagtail.blocks.StructBlock([('title', wagtail.blocks.CharBlock()), ('link', wagtail.blocks.StreamBlock([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], required=False)), ('children', wagtail.blocks.StreamBlock([('nav_item', wagtail.blocks.StructBlock([('title', wagtail.blocks.CharBlock()), ('link', wagtail.blocks.StreamBlock([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], required=False))]))], blank=True, null=True, required=False, use_json_field=True))]))], blank=True, null=True, required=False, use_json_field=True))]))], blank=True, help_text='The items of the navigation; this is shown on all pages.', null=True, use_json_field=True),
+        ),
+        migrations.AlterField(
+            model_name='homepage',
+            name='navigation_buttons',
+            field=wagtail.fields.StreamField([('button', wagtail.blocks.StructBlock([('title', wagtail.blocks.CharBlock()), ('link', wagtail.blocks.StreamBlock([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], required=False))]))], blank=True, help_text='The buttons of the navigation; these show up last in the navbar, and, unlike regular navigation items, show up at all times on medium screens.', null=True, use_json_field=True),
+        ),
+        migrations.AlterField(
+            model_name='homepage',
+            name='partner_with_us_button_url',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], blank=True, use_json_field=True),
+        ),
+        migrations.AlterField(
+            model_name='homepage',
+            name='tools_resources_button_link',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], blank=True, use_json_field=True),
+        ),
+        migrations.AlterField(
+            model_name='homepage',
+            name='top_navigation_donate_url',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], blank=True, use_json_field=True),
+        ),
+        migrations.AlterField(
+            model_name='homepage',
+            name='top_navigation_links',
+            field=wagtail.fields.StreamField([('link', wagtail.blocks.StructBlock([('text', wagtail.blocks.CharBlock()), ('link', wagtail.blocks.StreamBlock([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], required=False))]))], blank=True, help_text='Links to be shown in the topmost navigation bar.', null=True, use_json_field=True),
+        ),
+        migrations.AlterField(
+            model_name='homepage',
+            name='top_navigation_socials',
+            field=wagtail.fields.StreamField([('social', wagtail.blocks.StructBlock([('service', wagtail.blocks.CharBlock()), ('icon', wagtail.images.blocks.ImageChooserBlock()), ('link', wagtail.blocks.StreamBlock([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], required=False))]))], blank=True, help_text='Social media links to be shown in the topmost navigation bar.', null=True, use_json_field=True),
+        ),
+        migrations.AlterField(
+            model_name='homepage',
+            name='view_all_news_link',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], blank=True, use_json_field=True),
+        ),
+        migrations.AlterField(
+            model_name='homepage',
+            name='view_all_programs_url',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], blank=True, use_json_field=True),
+        ),
+        migrations.AlterField(
+            model_name='homepage',
+            name='who_we_are_button_url',
+            field=wagtail.fields.StreamField([('page', wagtail.blocks.PageChooserBlock()), ('url', wagtail.blocks.URLBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock()), ('other', wagtail.blocks.CharBlock(help_text="Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."))], blank=True, use_json_field=True),
+        ),
+    ]
diff --git a/home/templates/home/components/SubscribeForm.html b/home/templates/home/components/SubscribeForm.html
new file mode 100644
index 0000000..3140fba
--- /dev/null
+++ b/home/templates/home/components/SubscribeForm.html
@@ -0,0 +1,67 @@
+{% load wagtailcore_tags %}
+
+<div id="mc_embed_shell">
+    <div id="mc_embed_signup">
+        <form action="https://hotosm.us9.list-manage.com/subscribe/post?u=5191e27b207136970f2a9ec1b&amp;id=033588d35b&amp;f_id=00a114e1f0" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate [&_label]:block [&_input]:border-none" target="_blank">
+            <div id="mc_embed_signup_scroll">
+                <h2 class="text-h4 md:text-h2 font-bold mb-4">{{ page.subscribe_title }}</h2>
+                <div class="flex gap-4">
+                    <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-4 grow">
+                        <div class="mc-field-group">
+                            <label for="mce-FNAME" class="font-medium mb-2">{{ page.subscribe_first_name_text }}</label>
+                            <div class="rounded-2xl shadow-md w-full">
+                                <input type="text" name="FNAME" class="w-full text" id="mce-FNAME" value="" placeholder="{{page.subscribe_first_name_field_hint}}">
+                            </div>
+                        </div>
+                        <div class="mc-field-group">
+                            <label for="mce-LNAME" class="font-medium mb-2">{{ page.subscribe_last_name_text }}</label>
+                            <div class="rounded-2xl shadow-md w-full">
+                                <input type="text" name="LNAME" class="w-full text" id="mce-LNAME" value="" placeholder="{{page.subscribe_last_name_field_hint}}">
+                            </div>
+                        </div>
+                        <div class="mc-field-group lg:w-full md:col-span-2 lg:col-span-1">
+                            <label for="mce-EMAIL" class="font-medium mb-2">
+                                {{ page.subscribe_email_text }}
+                                <span class="asterisk text-hot-red">*</span>
+                            </label>
+                            <div class="flex gap-4 w-full">
+                                <div class="rounded-2xl shadow-md w-full grow">
+                                    <input type="email" name="EMAIL" class="w-full required email" id="mce-EMAIL" required="" value="" placeholder="{{page.subscribe_email_field_hint}}">
+                                </div>
+                                <div class="hidden md:block lg:hidden self-end">
+                                    <input type="submit" name="subscribe" id="mc-embedded-subscribe" class="cursor-pointer button font-medium font-archivo transition duration-75 py-1.5 text-intro bg-hot-red border-2 border-hot-red text-hot-white px-hot-3 hover:bg-hot-burgundy hover:border-hot-burgundy focus:bg-transparent focus:text-hot-red focus:ring-2 focus:ring-hot-red focus:ring-inset" 
+                                        value="{{page.subscribe_submit_button_text}}">
+                                </div>
+                            </div>
+                        </div>
+                        
+                    </div>
+                    <div class="hidden lg:block self-end">
+                        <input type="submit" name="subscribe" id="mc-embedded-subscribe" class="cursor-pointer button font-medium font-archivo transition duration-75 py-1.5 text-intro bg-hot-red border-2 border-hot-red text-hot-white px-hot-3 hover:bg-hot-burgundy hover:border-hot-burgundy focus:bg-transparent focus:text-hot-red focus:ring-2 focus:ring-hot-red focus:ring-inset" 
+                            value="{{page.subscribe_submit_button_text}}">
+                    </div>
+                </div>
+                <div class="md:hidden mt-4">
+                    <input type="submit" name="subscribe" id="mc-embedded-subscribe" class="cursor-pointer button font-medium font-archivo transition duration-75 py-1.5 text-intro bg-hot-red border-2 border-hot-red text-hot-white px-hot-3 hover:bg-hot-burgundy hover:border-hot-burgundy focus:bg-transparent focus:text-hot-red focus:ring-2 focus:ring-hot-red focus:ring-inset" 
+                        value="{{page.subscribe_submit_button_text}}">
+                </div>
+                <div id="mce-responses" class="clear">
+                    <div class="response" id="mce-error-response" style="display: none;"></div>
+                    <div class="response" id="mce-success-response" style="display: none;"></div>
+                </div>
+                <div style="position: absolute; left: -5000px;" aria-hidden="true">
+                    <input type="text" name="b_5191e27b207136970f2a9ec1b_033588d35b" tabindex="-1" value="">
+                </div>
+                <div class="flex items-center mt-4 mb-4 md:mb-0">
+                    <input type="checkbox" id="agreecheckmark" name="agreecheckmark" value="Agree" class="rounded shadow-md" required>
+                    <label for="agreecheckmark" class="ml-2 [&_a]:font-medium [&_a:hover]:underline">
+                        {{page.subscribe_checkbox_text|richtext}}
+                    </label>
+                </div>
+            </div>
+        </form>
+    </div>
+    <script type="text/javascript" src="//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script><script type="text/javascript">(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';fnames[3]='ADDRESS';ftypes[3]='address';fnames[4]='PHONE';ftypes[4]='phone';fnames[5]='MMERGE5';ftypes[5]='number';fnames[6]='MMERGE6';ftypes[6]='number';fnames[7]='MMERGE7';ftypes[7]='number';fnames[8]='MMERGE8';ftypes[8]='number';fnames[9]='MMERGE9';ftypes[9]='text';fnames[10]='MMERGE10';ftypes[10]='date';fnames[11]='MMERGE11';ftypes[11]='number';fnames[12]='MMERGE12';ftypes[12]='number';fnames[13]='MMERGE13';ftypes[13]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
+</div>
+
+
diff --git a/home/templates/home/home_page.html b/home/templates/home/home_page.html
index 49774cc..7ee7b99 100644
--- a/home/templates/home/home_page.html
+++ b/home/templates/home/home_page.html
@@ -1,6 +1,7 @@
 {% extends "base.html" %}
 {% load static %}
 {% load compress %}
+{% load wagtailcore_tags %}
 {% load wagtailimages_tags %}
 {% block body_class %}
     template-homepage
@@ -67,7 +68,7 @@ <h2 class="text-h4 font-semibold mb-2">
                             {{ page.highlighted_programs_title }}
                         </h2>
                         <div class="text-intro">
-                            {{ page.highlighted_programs_description|safe }}
+                            {{ page.highlighted_programs_description|richtext }}
                         </div>
                     </div>
                     <div class="col-span-2 lg:text-right text-intro">
@@ -84,7 +85,7 @@ <h2 class="text-h4 font-semibold mb-2">
                         {{ page.impact_areas_title }}
                     </h2>
                     <div class="text-intro">
-                        {{ page.impact_areas_description|safe }}
+                        {{ page.impact_areas_description|richtext }}
                     </div>
                 </div>
                 {% include "home/components/ImpactAreasPanel.html" %}
@@ -98,10 +99,10 @@ <h2 class="text-h4 font-semibold mb-2">
                 {% image page.who_we_are_image original class="order-1 lg:order-2" %}
                 <div class="order-2 lg:order-1">
                     <div class="text-h2 [&_b]:text-hot-red bold-override font-bold lg:font-semibold">
-                        {{page.who_we_are_intro_title|safe}}
+                        {{page.who_we_are_intro_title|richtext}}
                     </div>
                     <div class="text-intro my-2">
-                        {{page.who_we_are_intro_description|safe}}
+                        {{page.who_we_are_intro_description|richtext}}
                     </div>
                     <a href="{%include 'ui/components/PageOrLinkHrefText.html' with linkurl=page.who_we_are_button_url%}">
                         {% include "components/branded_elements/button.html" with text=page.who_we_are_button_text classes="mt-4" %}
@@ -120,10 +121,10 @@ <h2 class="text-h4 font-semibold mb-2">
                 <div class="min-h-[20rem] bg-cover bg-no-repeat" style="background-image: url('{{tr_image.url}}')"></div>
                 <div class="flex flex-col justify-center lg:px-8 py-8 py:8">
                     <div class="text-h2 [&_b]:text-hot-red bold-override font-bold lg:font-semibold">
-                        {{page.tools_resources_title|safe}}
+                        {{page.tools_resources_title|richtext}}
                     </div>
                     <div class="text-intro font-medium my-4">
-                        {{page.tools_resources_description|safe}}
+                        {{page.tools_resources_description|richtext}}
                     </div>
                     <a href="{%include 'ui/components/PageOrLinkHrefText.html' with linkurl=page.tools_resources_button_link%}">
                         {% include "components/branded_elements/button.html" with text=page.tools_resources_button_text classes="mt-4" %}
@@ -157,54 +158,7 @@ <h2 class="text-h4 font-semibold mb-2">
             {% comment %} SUBSCRIBE {% endcomment %}
             <div class="rounded-2xl shadow-md">
                 <div class="bg-hot-off-white py-6 md:py-8 px-8 md:px-16 my-20">
-                    <h1 class="text-h4 md:text-h2 font-bold">
-                        {{ page.subscribe_title }}
-                    </h1>
-                    <form class=" mt-4 [&_label]:block 
-                                [&_input]:border-none
-                    ">
-                        <div class="flex gap-4">
-                            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 grow">
-                                <div>
-                                    <label for="firstname" class="font-medium mb-2">{{ page.subscribe_first_name_text }}</label>
-                                    <div class="rounded-2xl shadow-md">
-                                        <input name="firstname" id="firstname" type="text" placeholder="{{page.subscribe_first_name_field_hint}}" class="w-full" required>
-                                    </div>
-                                </div>
-                                <div>
-                                    <label for="lastname" class="font-medium mb-2">{{ page.subscribe_last_name_text }}</label>
-                                    <div class="rounded-2xl shadow-md">
-                                        <input name="lastname" id="lastname" type="text" placeholder="{{page.subscribe_last_name_field_hint}}" class="w-full" required>
-                                    </div>
-                                </div>
-                                <div class="md:col-span-2 lg:col-span-1 flex gap-4">
-                                    <div class="grow">
-                                        <label for="email" class="font-medium mb-2">{{ page.subscribe_email_text }}</label>
-                                        <div class="rounded-2xl shadow-md">
-                                            <input name="email" id="email" type="text" placeholder="{{page.subscribe_email_field_hint}}" class="w-full" required>
-                                        </div>
-                                    </div>
-                                    <div class="cursor-pointer hidden md:block lg:hidden self-end">
-                                        {% include "components/branded_elements/button.html" with text=page.subscribe_submit_button_text %}
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="cursor-pointer hidden lg:block self-end">
-                                {% include "components/branded_elements/button.html" with text=page.subscribe_submit_button_text %}
-                            </div>
-                        </div>
-                        
-                        <div class="flex items-center mt-4 mb-4 md:mb-0">
-                            <input type="checkbox" id="agreecheckmark" name="agreecheckmark" value="Agree" class="rounded shadow-md" required>
-                            <label for="agreecheckmark" class="ml-2 [&_a]:font-medium">
-                                {{page.subscribe_checkbox_text|safe}}
-                            </label>
-                        </div>
-
-                        <div class="cursor-pointer md:hidden">
-                            {% include "components/branded_elements/button.html" with text=page.subscribe_submit_button_text %}
-                        </div>
-                    </form>
+                    {% include "./components/SubscribeForm.html" %}
                 </div>
             </div>
         </div>
diff --git a/hot_osm/static/css/hot_osm.css b/hot_osm/static/css/hot_osm.css
index 7c5a667..ab220a1 100644
--- a/hot_osm/static/css/hot_osm.css
+++ b/hot_osm/static/css/hot_osm.css
@@ -320,21 +320,30 @@
     gap: 2rem;
 }
 
-.BambooHR-ATS-Department-List .BambooHR-ATS-Department-Item {
-    padding: 1.5rem;
-    background-color: var(--hot-off-white);
+.BambooHR-ATS-Department-List .BambooHR-ATS-Department-Header {
+    font-size: var(--font-size-h5);
+    font-weight: 500;
+    margin-bottom: 1rem;
+    margin-left: 1rem;
+}
+
+.BambooHR-ATS-Department-List .BambooHR-ATS-Department-Item .BambooHR-ATS-Jobs-List {
+    display: grid;
+    gap: 0.75rem;
 }
 
 .BambooHR-ATS-Department-List .BambooHR-ATS-Department-Item .BambooHR-ATS-Jobs-Item {
     display: flex;
     flex-direction: column;
     gap: 0.75rem;
-    margin-top: 0.75rem;
+    padding: 1.5rem;
+    background-color: var(--hot-off-white);
 }
 
 .BambooHR-ATS-Department-List .BambooHR-ATS-Department-Item .BambooHR-ATS-Jobs-Item a {
     font-size: var(--font-size-h3);
     font-weight: bold;
+    margin-top: 0.75rem;
 }
 
 .BambooHR-ATS-Department-List .BambooHR-ATS-Department-Item .BambooHR-ATS-Jobs-Item a:hover {

From b8235d98a63ad453c65c2b4b3ba224f3e66cf0c1 Mon Sep 17 00:00:00 2001
From: luminaryFlowers <71102109+luminaryFlowers@users.noreply.github.com>
Date: Fri, 11 Oct 2024 16:35:18 -0700
Subject: [PATCH 10/15] small changes to accommodate icons

---
 app/misc/templates/misc/data_principles_page.html             | 4 ++--
 app/misc/templates/misc/donate_page.html                      | 2 +-
 app/misc/templates/misc/join_our_conversation_page.html       | 2 +-
 app/partners/templates/partners/partner_with_us_page.html     | 2 +-
 .../ui/components/impact_areas/ImpactAreaPreviewBlock.html    | 4 ++--
 app/who_we_are/templates/who_we_are/who_we_are_page.html      | 2 +-
 6 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/app/misc/templates/misc/data_principles_page.html b/app/misc/templates/misc/data_principles_page.html
index a0f1020..2cf2e6e 100644
--- a/app/misc/templates/misc/data_principles_page.html
+++ b/app/misc/templates/misc/data_principles_page.html
@@ -30,8 +30,8 @@
             <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 my-10">
                 {% for block in page.info_blocks %}
                     <div class="bg-hot-off-white p-8">
-                        <h1 class="flex items-center gap-8 text-h3 font-bold pb-4">
-                            {% image block.value.icon original class="inline" %}
+                        <h1 class="flex items-center gap-4 text-h3 font-bold pb-4">
+                            {% image block.value.icon original class="inline h-12 w-auto" %}
                             <span>
                                 {{block.value.title}}
                             </span>
diff --git a/app/misc/templates/misc/donate_page.html b/app/misc/templates/misc/donate_page.html
index d7ec77c..e7a8d2c 100644
--- a/app/misc/templates/misc/donate_page.html
+++ b/app/misc/templates/misc/donate_page.html
@@ -57,7 +57,7 @@ <h2 class="text-h2 font-bold mb-8">{{page.other_ways_to_donate_title}}</h2>
                 <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                     {% for block in page.other_ways_to_donate %}
                         <div class="p-6 bg-hot-off-white">
-                            {% image block.value.icon original class="h-8 w-8 mt-2" %}
+                            {% image block.value.icon original class="h-12 w-auto mt-2" %}
                             <h1 class="text-h4 font-semibold mt-4">
                                 {{block.value.title}}
                             </h1>
diff --git a/app/misc/templates/misc/join_our_conversation_page.html b/app/misc/templates/misc/join_our_conversation_page.html
index 73a7f9a..a148296 100644
--- a/app/misc/templates/misc/join_our_conversation_page.html
+++ b/app/misc/templates/misc/join_our_conversation_page.html
@@ -18,7 +18,7 @@
             <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mt-6">
                 {% for block in page.get_connected_blocks %}
                     <div class="p-6 bg-hot-off-white">
-                        {% image block.value.icon original class="h-8 w-8 mt-2" %}
+                        {% image block.value.icon original class="h-12 w-auto mt-2" %}
                         <h1 class="text-h4 font-semibold mt-4">
                             {{block.value.title}}
                         </h1>
diff --git a/app/partners/templates/partners/partner_with_us_page.html b/app/partners/templates/partners/partner_with_us_page.html
index 63094ef..1784d7f 100644
--- a/app/partners/templates/partners/partner_with_us_page.html
+++ b/app/partners/templates/partners/partner_with_us_page.html
@@ -24,7 +24,7 @@
             <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mt-6 mb-20">
                 {% for ptype in page.get_children %}
                     <div class="p-6 bg-hot-off-white">
-                        {% image ptype.specific.external_icon original class="h-8 w-8 mt-2" %}
+                        {% image ptype.specific.external_icon original class="h-12 w-auto mt-2" %}
                         <a href="{{ptype.url}}" class="hover:underline">
                             <h1 class="text-h4 font-semibold mt-4">
                                 {{ptype.specific.title}}
diff --git a/app/ui/templates/ui/components/impact_areas/ImpactAreaPreviewBlock.html b/app/ui/templates/ui/components/impact_areas/ImpactAreaPreviewBlock.html
index cf48bf8..c3682dc 100644
--- a/app/ui/templates/ui/components/impact_areas/ImpactAreaPreviewBlock.html
+++ b/app/ui/templates/ui/components/impact_areas/ImpactAreaPreviewBlock.html
@@ -11,9 +11,9 @@
         <img class="w-full h-72 object-cover -z-10 relative" src="{{ image_p.url }}" />
     </div>
     
-    <h2 class="text-h3 font-bold py-1">
+    <h2 class="text-h3 font-bold py-1 my-1">
         {% image ia.external_icon original class="black-image-redifier h-16 w-auto inline" %}
-        {{ ia.title }}
+        <span class="ml-2">{{ ia.title }}</span>
     </h2>
 
     <div class="text-base py-1">
diff --git a/app/who_we_are/templates/who_we_are/who_we_are_page.html b/app/who_we_are/templates/who_we_are/who_we_are_page.html
index 7a846d2..23d0c5c 100644
--- a/app/who_we_are/templates/who_we_are/who_we_are_page.html
+++ b/app/who_we_are/templates/who_we_are/who_we_are_page.html
@@ -27,7 +27,7 @@
                 <div class="lg:col-span-3 grid gap-4">
                     {% for block in page.intro_info_blocks %}
                         <div class="flex gap-8">
-                            {% image block.value.image original class="h-10 w-auto" %}
+                            {% image block.value.image original class="h-12 w-auto" %}
                             <div class="flex-grow">
                                 <h1 class="text-h5 font-bold">{{block.value.title}}</h1>
                                 <div class="base-article-m">

From 5eafeea21ff44fdadef63bb5eed02b791945fe05 Mon Sep 17 00:00:00 2001
From: luminaryFlowers <71102109+luminaryFlowers@users.noreply.github.com>
Date: Tue, 15 Oct 2024 14:19:11 -0700
Subject: [PATCH 11/15] updated wagtail

---
 app/programs/models.py |   1 -
 hot_osm/urls.py        |   4 +-
 poetry.lock            | 138 +++++++++++++++++++----------------------
 pyproject.toml         |   2 +-
 search/views.py        |  62 +++++++++---------
 5 files changed, 97 insertions(+), 110 deletions(-)

diff --git a/app/programs/models.py b/app/programs/models.py
index ed7a7cf..04189aa 100644
--- a/app/programs/models.py
+++ b/app/programs/models.py
@@ -8,7 +8,6 @@
 from wagtail.snippets.blocks import SnippetChooserBlock
 from wagtail.images.blocks import ImageChooserBlock
 from wagtail.blocks import CharBlock, StreamBlock, StructBlock, URLBlock, RichTextBlock, PageChooserBlock
-from wagtail.contrib.modeladmin.options import ModelAdmin, modeladmin_register
 from wagtail.search import index
 from modelcluster.fields import ParentalKey, ParentalManyToManyField
 
diff --git a/hot_osm/urls.py b/hot_osm/urls.py
index 485fb3a..bfed830 100644
--- a/hot_osm/urls.py
+++ b/hot_osm/urls.py
@@ -7,7 +7,7 @@
 from wagtail.admin import urls as wagtailadmin_urls
 from wagtail.documents import urls as wagtaildocs_urls
 
-from search import views as search_views
+# from search import views as search_views
 
 urlpatterns = [
     path("i18n/", include("django.conf.urls.i18n")),
@@ -36,7 +36,7 @@
         # Wagtail's page serving mechanism. This should be the last pattern in
         # the list:
         path("", include(wagtail_urls)),
-        path("search/", search_views.search, name="search"),
+        # path("search/", search_views.search, name="search"),
         # Alternatively, if you want Wagtail pages to be served from a subpath
         # of your site, rather than the site root:
         #    path("pages/", include(wagtail_urls)),
diff --git a/poetry.lock b/poetry.lock
index 235ce5b..ba2b6b8 100644
--- a/poetry.lock
+++ b/poetry.lock
@@ -411,13 +411,13 @@ Django = ">=3.2"
 
 [[package]]
 name = "django-modelcluster"
-version = "6.1"
+version = "6.3"
 description = "Django extension to allow working with 'clusters' of models as a single unit, independently of the database"
 optional = false
 python-versions = ">=3.8"
 files = [
-    {file = "django-modelcluster-6.1.tar.gz", hash = "sha256:3b1791638046c73ae7415327cf54bfa0adad9d89d342a5b86d0ec29a2504e067"},
-    {file = "django_modelcluster-6.1-py2.py3-none-any.whl", hash = "sha256:8ce72635db4b90b34993afda5021ed8676ef94f1d4c607466d0f8d3f676c5b64"},
+    {file = "django-modelcluster-6.3.tar.gz", hash = "sha256:0caed8a0e889f3abb92f144670878a466ef954ffa6c4c7b9c80e6426b720a49d"},
+    {file = "django_modelcluster-6.3-py2.py3-none-any.whl", hash = "sha256:a8783d6565a0663f41cd6003ea361c3a5711e8a2a326160f1ec1eceb3e973d4f"},
 ]
 
 [package.dependencies]
@@ -425,7 +425,7 @@ django = ">=3.2"
 pytz = ">=2022.4"
 
 [package.extras]
-taggit = ["django-taggit (>=2.0)"]
+taggit = ["django-taggit (>=3.1)"]
 
 [[package]]
 name = "django-pattern-library"
@@ -485,17 +485,17 @@ sftp = ["paramiko (>=1.15)"]
 
 [[package]]
 name = "django-taggit"
-version = "4.0.0"
+version = "5.0.1"
 description = "django-taggit is a reusable Django application for simple tagging."
 optional = false
-python-versions = ">=3.6"
+python-versions = ">=3.8"
 files = [
-    {file = "django-taggit-4.0.0.tar.gz", hash = "sha256:4d52de9d37245a9b9f98c0ec71fdccf1d2283e38e8866d40a7ae6a3b6787a161"},
-    {file = "django_taggit-4.0.0-py3-none-any.whl", hash = "sha256:eb800dabef5f0a4e047ab0751f82cf805bc4a9e972037ef12bf519f52cd92480"},
+    {file = "django-taggit-5.0.1.tar.gz", hash = "sha256:edcd7db1e0f35c304e082a2f631ddac2e16ef5296029524eb792af7430cab4cc"},
+    {file = "django_taggit-5.0.1-py3-none-any.whl", hash = "sha256:a0ca8a28b03c4b26c2630fd762cb76ec39b5e41abf727a7b66f897a625c5e647"},
 ]
 
 [package.dependencies]
-Django = ">=3.2"
+Django = ">=4.1"
 
 [[package]]
 name = "django-treebeard"
@@ -513,18 +513,17 @@ Django = ">=3.2"
 
 [[package]]
 name = "djangorestframework"
-version = "3.14.0"
+version = "3.15.2"
 description = "Web APIs for Django, made easy."
 optional = false
-python-versions = ">=3.6"
+python-versions = ">=3.8"
 files = [
-    {file = "djangorestframework-3.14.0-py3-none-any.whl", hash = "sha256:eb63f58c9f218e1a7d064d17a70751f528ed4e1d35547fdade9aaf4cd103fd08"},
-    {file = "djangorestframework-3.14.0.tar.gz", hash = "sha256:579a333e6256b09489cbe0a067e66abe55c6595d8926be6b99423786334350c8"},
+    {file = "djangorestframework-3.15.2-py3-none-any.whl", hash = "sha256:2b8871b062ba1aefc2de01f773875441a961fefbf79f5eed1e32b2f096944b20"},
+    {file = "djangorestframework-3.15.2.tar.gz", hash = "sha256:36fe88cd2d6c6bec23dca9804bab2ba5517a8bb9d8f47ebc68981b56840107ad"},
 ]
 
 [package.dependencies]
-django = ">=3.0"
-pytz = "*"
+django = ">=4.2"
 
 [[package]]
 name = "docker"
@@ -653,27 +652,6 @@ gevent = ["gevent (>=1.4.0)"]
 setproctitle = ["setproctitle"]
 tornado = ["tornado (>=0.2)"]
 
-[[package]]
-name = "html5lib"
-version = "1.1"
-description = "HTML parser based on the WHATWG HTML specification"
-optional = false
-python-versions = ">=2.7, !=3.0.*, !=3.1.*, !=3.2.*, !=3.3.*, !=3.4.*"
-files = [
-    {file = "html5lib-1.1-py2.py3-none-any.whl", hash = "sha256:0d78f8fde1c230e99fe37986a60526d7049ed4bf8a9fadbad5f00e22e58e041d"},
-    {file = "html5lib-1.1.tar.gz", hash = "sha256:b2e5b40261e20f354d198eae92afc10d750afb487ed5e50f9c4eaf07c184146f"},
-]
-
-[package.dependencies]
-six = ">=1.9"
-webencodings = "*"
-
-[package.extras]
-all = ["chardet (>=2.2)", "genshi", "lxml"]
-chardet = ["chardet (>=2.2)"]
-genshi = ["genshi"]
-lxml = ["lxml"]
-
 [[package]]
 name = "identify"
 version = "2.5.32"
@@ -747,6 +725,24 @@ files = [
 pytz = ">=2020.1"
 six = "*"
 
+[[package]]
+name = "laces"
+version = "0.1.1"
+description = "Django components that know how to render themselves."
+optional = false
+python-versions = ">=3.8"
+files = [
+    {file = "laces-0.1.1-py3-none-any.whl", hash = "sha256:ae2c575b9aaa46154e5518c61c9f86f5a9478f753a51e9c5547c7d275d361242"},
+    {file = "laces-0.1.1.tar.gz", hash = "sha256:e45159c46f6adca33010d34e9af869e57201b70675c6dc088e919b16c89456a4"},
+]
+
+[package.dependencies]
+Django = ">=3.2"
+
+[package.extras]
+dev = ["black (==24.1.1)", "blacken-docs (==1.16.0)", "coverage (==7.3.4)", "django-stubs[compatible-mypy] (==4.2.7)", "flake8 (==7.0.0)", "flake8-bugbear", "flake8-comprehensions", "isort (==5.13.2)", "mypy (==1.7.1)", "pre-commit (==3.4.0)", "tox (==4.12.1)", "tox-gh-actions (==3.2.0)", "types-requests (==2.31.0.20240125)", "virtualenv-pyenv (==0.4.0)"]
+testing = ["coverage (==7.3.4)", "dj-database-url (==2.1.0)"]
+
 [[package]]
 name = "markdown"
 version = "3.6"
@@ -1439,59 +1435,60 @@ test = ["covdefaults (>=2.3)", "coverage (>=7.2.7)", "coverage-enable-subprocess
 
 [[package]]
 name = "wagtail"
-version = "5.2.1"
+version = "6.2.2"
 description = "A Django content management system."
 optional = false
 python-versions = ">=3.8"
 files = [
-    {file = "wagtail-5.2.1-py3-none-any.whl", hash = "sha256:fde8055e6988b5d88ff561535acfe1d10ca42334eea22bb5acd194f331f887e3"},
-    {file = "wagtail-5.2.1.tar.gz", hash = "sha256:1186b2baa74eee858f4b6b573324990f37a667c91afc439ba2651d8ac4be1a8d"},
+    {file = "wagtail-6.2.2-py3-none-any.whl", hash = "sha256:d0382603aef5d7e4a46529aa125857774a317c2870c9b6836767932969829429"},
+    {file = "wagtail-6.2.2.tar.gz", hash = "sha256:506ac2b59dae85069ae754b45bc13b91cbd86e92d4f5d663658773b0ed7a16b9"},
 ]
 
 [package.dependencies]
 anyascii = ">=0.1.5"
-beautifulsoup4 = ">=4.8,<4.12"
-Django = ">=3.2,<4.3"
-django-filter = ">=23.3,<24"
-django-modelcluster = ">=6.1,<7.0"
+beautifulsoup4 = ">=4.8,<4.13"
+Django = ">=4.2,<6.0"
+django-filter = ">=23.3,<25"
+django-modelcluster = ">=6.2.1,<7.0"
 django-permissionedforms = ">=0.1,<1.0"
-django-taggit = ">=2.0,<5.0"
+django-taggit = ">=5.0,<5.1"
 django-treebeard = ">=4.5.1,<5.0"
-djangorestframework = ">=3.11.1,<4.0"
-draftjs-exporter = ">=2.1.5,<3.0"
-html5lib = ">=0.999,<2"
+djangorestframework = ">=3.15.1,<4.0"
+draftjs-exporter = ">=2.1.5,<6.0"
 l18n = ">=2018.5"
+laces = ">=0.1,<0.2"
 openpyxl = ">=3.0.10,<4.0"
 Pillow = ">=9.1.0,<11.0.0"
 requests = ">=2.11.1,<3.0"
-telepath = ">=0.1.1,<1"
-Willow = {version = ">=1.6.2,<1.7", extras = ["heif"]}
+telepath = ">=0.3.1,<1"
+Willow = {version = ">=1.8.0,<2", extras = ["heif"]}
 
 [package.extras]
-docs = ["Sphinx (>=1.5.2)", "myst-parser (==0.18.1)", "pyenchant (>=3.1.1,<4)", "sphinx-autobuild (>=0.6.0)", "sphinx-copybutton (>=0.5,<1.0)", "sphinx-wagtail-theme (==6.1.1)", "sphinxcontrib-spelling (>=5.4.0,<6)"]
-testing = ["Jinja2 (>=3.0,<3.2)", "azure-mgmt-cdn (>=12.0,<13.0)", "azure-mgmt-frontdoor (>=1.0,<1.1)", "black (==22.3.0)", "boto3 (>=1.28,<2)", "coverage (>=3.7.0)", "curlylint (==0.13.1)", "django-pattern-library (>=0.7,<0.8)", "djhtml (==1.5.2)", "doc8 (==0.8.1)", "factory-boy (>=3.2)", "freezegun (>=0.3.8)", "polib (>=1.1,<2.0)", "python-dateutil (>=2.7)", "pytz (>=2014.7)", "ruff (==0.0.290)", "semgrep (==1.40.0)", "tblib (>=2.0,<3.0)"]
+docs = ["Sphinx (>=7.0)", "myst-parser (==2.0.0)", "pyenchant (>=3.1.1,<4)", "sphinx-autobuild (>=0.6.0)", "sphinx-copybutton (>=0.5,<1.0)", "sphinx-wagtail-theme (==6.3.0)", "sphinxcontrib-spelling (>=7,<8)"]
+testing = ["Jinja2 (>=3.0,<3.2)", "azure-mgmt-cdn (>=12.0,<13.0)", "azure-mgmt-frontdoor (>=1.0,<1.1)", "boto3 (>=1.28,<2)", "coverage (>=3.7.0)", "curlylint (==0.13.1)", "django-pattern-library (>=0.7)", "djhtml (==3.0.6)", "doc8 (==0.8.1)", "factory-boy (>=3.2)", "freezegun (>=0.3.8)", "polib (>=1.1,<2.0)", "python-dateutil (>=2.7)", "pytz (>=2014.7)", "ruff (==0.1.5)", "semgrep (==1.40.0)", "tblib (>=2.0,<3.0)"]
 
 [[package]]
 name = "wagtail-localize"
-version = "1.7"
+version = "1.10"
 description = "Translation plugin for Wagtail CMS"
 optional = false
-python-versions = ">=3.8"
+python-versions = ">=3.9"
 files = [
-    {file = "wagtail_localize-1.7-py3-none-any.whl", hash = "sha256:4c4a5792abb1ce5b75c287801bc5abeb704390936569629bc8ea9b0f58235bad"},
-    {file = "wagtail_localize-1.7.tar.gz", hash = "sha256:313d887fbc60d9a535e1778473e0aab1069eb1a51f23b12b5e02750a0c1f6eb5"},
+    {file = "wagtail_localize-1.10-py3-none-any.whl", hash = "sha256:11746223d5f20d898efff36042f730a3d499135b4a92945db01fc9769c47cb28"},
+    {file = "wagtail_localize-1.10.tar.gz", hash = "sha256:ecde7efd366485ea325904efbbae5e50297f094f4b91ca8ac94aec04dd3b0ded"},
 ]
 
 [package.dependencies]
-Django = ">=3.2,<5.0"
+Django = ">=4.2,<6.0"
 polib = ">=1.1,<2.0"
 typing_extensions = ">=4.0"
-Wagtail = ">=4.1"
+Wagtail = ">=5.2"
 
 [package.extras]
 documentation = ["mkdocs (==1.4.3)", "mkdocs-autorefs (>=0.4.0,<0.5)", "mkdocs-include-markdown-plugin (>=4.0.4,<5)", "mkdocs-material (>=9.1,<10)", "mkdocstrings[python] (==0.22.0)", "pygments (>=2.15,<2.16)"]
 google = ["google-cloud-translate (>=3.0.0)"]
-testing = ["dj-database-url (>=2.1.0,<3)", "django-rq (>=2.5,<3.0)", "freezegun (>=1.2,<2)", "google-cloud-translate (>=3.0.0)", "pre-commit (>=3.4,<4)"]
+linting = ["pre-commit (>=3.4,<4)"]
+testing = ["coverage (>=7.0,<8.0)", "dj-database-url (>=2.1.0,<3)", "django-rq (>=2.5,<3.0)", "freezegun (>=1.2,<2)", "google-cloud-translate (>=3.0.0)", "wagtail-modeladmin (>=2.0,<3.0)"]
 
 [[package]]
 name = "wagtail-modeladmin"
@@ -1548,17 +1545,6 @@ development = ["beautifulsoup4 (>=4.8,<4.10)", "coverage (>=4.5)", "django-debug
 docs = ["Sphinx (>=1.7.4)", "pyenchant (>=2.0)", "sphinx-rtd-theme (>=0.3)", "sphinxcontrib-spelling (>=1.4)"]
 testing = ["beautifulsoup4 (>=4.8,<4.10)", "coverage (>=4.5)", "django-webtest (>=1.9,<1.10)"]
 
-[[package]]
-name = "webencodings"
-version = "0.5.1"
-description = "Character encoding aliases for legacy web content"
-optional = false
-python-versions = "*"
-files = [
-    {file = "webencodings-0.5.1-py2.py3-none-any.whl", hash = "sha256:a0af1213f3c2226497a97e2b3aa01a7e4bee4f403f95be16fc9acd2947514a78"},
-    {file = "webencodings-0.5.1.tar.gz", hash = "sha256:b36a1c245f2d304965eb4e0a82848379241dc04b865afcc4aab16748587e1923"},
-]
-
 [[package]]
 name = "websocket-client"
 version = "1.6.4"
@@ -1591,13 +1577,13 @@ brotli = ["Brotli"]
 
 [[package]]
 name = "willow"
-version = "1.6.3"
+version = "1.8.0"
 description = "A Python image library that sits on top of Pillow, Wand and OpenCV"
 optional = false
 python-versions = ">=3.8"
 files = [
-    {file = "willow-1.6.3-py3-none-any.whl", hash = "sha256:f4b17a16c6315864604dadb6cdf2987d0b685e295cca74c6da28b94167a3126e"},
-    {file = "willow-1.6.3.tar.gz", hash = "sha256:143cefd30d3bb816cdff857c454da24991dda35a0315ea795101675e0b14262f"},
+    {file = "willow-1.8.0-py3-none-any.whl", hash = "sha256:48ccf5ce48ccd29c37a32497cd7af50983f8570543c4de2988b15d583efc66be"},
+    {file = "willow-1.8.0.tar.gz", hash = "sha256:ef3df6cde80d4914e719188147bef1d71c240edb118340e0c5957ecc8fe08315"},
 ]
 
 [package.dependencies]
@@ -1609,11 +1595,13 @@ pillow-heif = [
 ]
 
 [package.extras]
-docs = ["Sphinx (>=7.0)", "sphinx-wagtail-theme (==6.0.0)", "sphinx_copybutton (>=0.5)", "sphinxcontrib-spelling (>=8.0,<9.0)"]
+docs = ["Sphinx (>=7.0)", "sphinx-wagtail-theme (>=6.1.1,<7.0)", "sphinx_copybutton (>=0.5)", "sphinxcontrib-spelling (>=8.0,<9.0)"]
 heif = ["pillow-heif (>=0.10.0,<1.0.0)", "pillow-heif (>=0.13.0,<1.0.0)"]
-testing = ["Pillow (>=9.1.0,<11.0.0)", "Wand (>=0.6,<1.0)", "black (==22.3.0)", "coverage[toml] (>=7.2.7,<8.0)", "mock (>=3.0,<4.0)", "pillow-heif (>=0.10.0,<1.0.0)", "ruff (==0.0.275)"]
+pillow = ["Pillow (>=9.1.0,<11.0.0)"]
+testing = ["coverage[toml] (>=7.2.7,<8.0)", "pre-commit (>=3.4.0)", "willow[heif,pillow,wand]"]
+wand = ["Wand (>=0.6,<1.0)"]
 
 [metadata]
 lock-version = "2.0"
 python-versions = "^3.11"
-content-hash = "776b17be304318286f118cf6e4220cb1a41020338da110842179e2af7256b31d"
+content-hash = "cc69a531e28c25ab60f9c82a128adffdc0fe3a8c7acb8de298de064805340f53"
diff --git a/pyproject.toml b/pyproject.toml
index 7b734d2..ad6c90e 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -23,7 +23,7 @@ authors = ["Kat Olaguer <katherine.olaguer@gmail.com>"]
 
 [tool.poetry.dependencies]
 python = "^3.11"
-wagtail = "^5.2"
+wagtail = "^6.2.2"
 psycopg2 = "^2.9.9"
 python-dotenv = "^1.0.0"
 docker = "^6.1.3"
diff --git a/search/views.py b/search/views.py
index 0d21858..293be69 100644
--- a/search/views.py
+++ b/search/views.py
@@ -1,37 +1,37 @@
-from django.core.paginator import EmptyPage, PageNotAnInteger, Paginator
-from django.template.response import TemplateResponse
-from wagtail.models import Page
-from wagtail.search.models import Query
+# from django.core.paginator import EmptyPage, PageNotAnInteger, Paginator
+# from django.template.response import TemplateResponse
+# from wagtail.models import Page
+# from wagtail.search.models import Query
 
 
-def search(request):
-    search_query = request.GET.get("query", None)
-    page = request.GET.get("page", 1)
+# def search(request):
+#     search_query = request.GET.get("query", None)
+#     page = request.GET.get("page", 1)
 
-    # Search
-    if search_query:
-        search_results = Page.objects.live().search(search_query)
-        query = Query.get(search_query)
+#     # Search
+#     if search_query:
+#         search_results = Page.objects.live().search(search_query)
+#         query = Query.get(search_query)
 
-        # Record hit
-        query.add_hit()
-    else:
-        search_results = Page.objects.none()
+#         # Record hit
+#         query.add_hit()
+#     else:
+#         search_results = Page.objects.none()
 
-    # Pagination
-    paginator = Paginator(search_results, 10)
-    try:
-        search_results = paginator.page(page)
-    except PageNotAnInteger:
-        search_results = paginator.page(1)
-    except EmptyPage:
-        search_results = paginator.page(paginator.num_pages)
+#     # Pagination
+#     paginator = Paginator(search_results, 10)
+#     try:
+#         search_results = paginator.page(page)
+#     except PageNotAnInteger:
+#         search_results = paginator.page(1)
+#     except EmptyPage:
+#         search_results = paginator.page(paginator.num_pages)
 
-    return TemplateResponse(
-        request,
-        "search/search.html",
-        {
-            "search_query": search_query,
-            "search_results": search_results,
-        },
-    )
+#     return TemplateResponse(
+#         request,
+#         "search/search.html",
+#         {
+#             "search_query": search_query,
+#             "search_results": search_results,
+#         },
+#     )

From ce93799a6eda57dd837043a7ff33823bffb031b5 Mon Sep 17 00:00:00 2001
From: luminaryFlowers <71102109+luminaryFlowers@users.noreply.github.com>
Date: Fri, 25 Oct 2024 16:29:23 -0700
Subject: [PATCH 12/15] mvp feedback => tons of little things => search now has
 live search => wagtail-localize workaround to make it work less awful wrt
 links => our work smooth refresh

---
 Dockerfile                                    |  4 +-
 ...ndividualeventpage_extended_description.py | 19 +++++
 .../0014_eventownerpage_applied_text.py       | 18 +++++
 app/events/models.py                          |  8 +-
 .../templates/events/event_owner_page.html    | 12 +--
 app/impact_areas/models.py                    |  2 +-
 ...vidualmappinghubpage_hub_portrait_image.py | 20 +++++
 app/mapping_hubs/models.py                    | 19 ++++-
 .../mapping_hubs/components/header.html       |  6 +-
 .../individual_mapping_hub_page.html          |  6 +-
 .../0017_membergroupownerpage_applied_text.py | 18 +++++
 app/members/models.py                         |  8 +-
 .../templates/members/member_group_page.html  |  8 +-
 app/misc/migrations/0035_generalpolicypage.py | 36 +++++++++
 .../0036_generalpolicyownerpage_and_more.py   | 52 ++++++++++++
 app/misc/models.py                            | 79 +++++++++++++++----
 .../templates/misc/code_of_conduct_page.html  | 12 +--
 .../misc/components/PolicyLinks.html          | 15 ++++
 .../templates/misc/general_policy_page.html   | 71 +++++++++++++++++
 .../templates/misc/privacy_policy_page.html   | 12 +--
 app/misc/templatetags/policy_tags.py          | 23 ++++++
 ...5_alter_individualnewspage_article_body.py | 19 +++++
 .../0026_newsownerpage_applied_text.py        | 18 +++++
 app/news/models.py                            | 10 ++-
 .../templates/news/individual_news_page.html  |  9 ++-
 app/news/templates/news/news_owner_page.html  | 14 +++-
 app/our_work/models.py                        | 18 +++--
 .../components/FilterCategoryPage.html        |  2 +-
 .../our_work/components/MapboxScript.html     | 40 +++++++++-
 .../templates/our_work/our_work_page.html     | 55 +++++--------
 .../0014_ourpartnerspage_applied_text.py      | 18 +++++
 app/partners/models.py                        |  4 +-
 .../templates/partners/our_partners_page.html |  8 +-
 .../partners/partner_with_us_page.html        |  2 +-
 ...39_alter_projectstatus_options_and_more.py | 21 +++++
 ...alter_individualprojectpage_description.py | 19 +++++
 ...vidualprojectpage_country_text_and_more.py | 24 ++++++
 ...042_alter_individualprojectpage_contact.py | 19 +++++
 app/projects/models.py                        | 13 ++-
 .../projects/individual_project_page.html     |  7 +-
 ...dualrequestforproposalpage_article_body.py | 19 +++++
 app/rfp/models.py                             |  2 +-
 app/search_page/models.py                     | 24 ++++++
 .../tech/individual_tech_stack_page.html      |  2 +-
 ...lter_openmappingsolutionspage_solutions.py | 19 +++++
 ...page_get_connected_button_text_and_more.py | 40 ++++++++++
 app/tools_and_resources/models.py             | 23 ++++--
 .../open_mapping_solutions_page.html          | 14 ++--
 .../tools_and_resources_page.html             | 12 ++-
 .../ui/components/BaseLinkNoUnderline.html    |  8 +-
 .../ui/components/PageOrLinkHrefText.html     | 16 +++-
 .../icon_svgs/ExternalLinkIcon.html           |  2 +-
 .../icon_svgs/VariableLinkIcon.html           | 17 ++++
 .../impact_areas/ImpactAreaPreviewBlock.html  | 36 +++++----
 .../ImpactAreaPreviewBlockMini.html           | 18 +++--
 .../mapping_hub/MappingHubPreviewBlock.html   |  2 +-
 .../MappingHubPreviewBlockBase.html           | 16 ++--
 .../MappingHubPreviewExtendedBlock.html       | 36 +++++----
 .../MappingHubPreviewProjectsBlock.html       |  2 +-
 .../misc_panels/PagePreviewBasic.html         | 22 +++---
 .../PagePreviewWithTabletDescription.html     | 56 ++++++-------
 .../ui/components/navigation/SearchForm.html  |  1 +
 .../ui/components/navigation/SearchModal.html | 48 ++++++++++-
 .../components/news/NewsPreviewBlockNews.html | 42 +++++-----
 .../news/NewsPreviewBlockProjects.html        | 56 ++++++-------
 .../programs/ProgramPreviewBlockBase.html     | 24 +++---
 .../projects/ProjectPreviewBlockMapHub.html   | 54 +++++++------
 .../projects/ProjectPreviewBlockNews.html     | 56 ++++++-------
 .../sections/BaseSectionWithImage.html        |  9 +++
 .../utilities/FormAppliedSuffix.html          |  1 +
 .../utilities/FormGetActiveXData.js           |  1 +
 ...alvolunteeropportunitypage_article_body.py | 19 +++++
 app/volunteer_opportunities/models.py         |  2 +-
 .../home/components/MappingHubsPanel.html     |  2 +-
 home/templates/home/components/StatBlock.html |  4 +-
 hot_osm/static/css/hot_osm.css                |  8 +-
 hot_osm/templates/base.html                   |  4 +-
 .../global_scripts/ExternalLinkScript.html    | 13 +++
 poetry.lock                                   | 17 +++-
 pyproject.toml                                |  1 +
 80 files changed, 1155 insertions(+), 361 deletions(-)
 create mode 100644 app/events/migrations/0013_alter_individualeventpage_extended_description.py
 create mode 100644 app/events/migrations/0014_eventownerpage_applied_text.py
 create mode 100644 app/mapping_hubs/migrations/0022_individualmappinghubpage_hub_portrait_image.py
 create mode 100644 app/members/migrations/0017_membergroupownerpage_applied_text.py
 create mode 100644 app/misc/migrations/0035_generalpolicypage.py
 create mode 100644 app/misc/migrations/0036_generalpolicyownerpage_and_more.py
 create mode 100644 app/misc/templates/misc/components/PolicyLinks.html
 create mode 100644 app/misc/templates/misc/general_policy_page.html
 create mode 100644 app/misc/templatetags/policy_tags.py
 create mode 100644 app/news/migrations/0025_alter_individualnewspage_article_body.py
 create mode 100644 app/news/migrations/0026_newsownerpage_applied_text.py
 create mode 100644 app/partners/migrations/0014_ourpartnerspage_applied_text.py
 create mode 100644 app/projects/migrations/0039_alter_projectstatus_options_and_more.py
 create mode 100644 app/projects/migrations/0040_alter_individualprojectpage_description.py
 create mode 100644 app/projects/migrations/0041_individualprojectpage_country_text_and_more.py
 create mode 100644 app/projects/migrations/0042_alter_individualprojectpage_contact.py
 create mode 100644 app/rfp/migrations/0009_alter_individualrequestforproposalpage_article_body.py
 create mode 100644 app/tools_and_resources/migrations/0010_alter_openmappingsolutionspage_solutions.py
 create mode 100644 app/tools_and_resources/migrations/0011_remove_toolsandresourcespage_get_connected_button_text_and_more.py
 create mode 100644 app/ui/templates/ui/components/icon_svgs/VariableLinkIcon.html
 create mode 100644 app/ui/templates/ui/components/utilities/FormAppliedSuffix.html
 create mode 100644 app/ui/templates/ui/components/utilities/FormGetActiveXData.js
 create mode 100644 app/volunteer_opportunities/migrations/0008_alter_individualvolunteeropportunitypage_article_body.py
 create mode 100644 hot_osm/templates/components/global_scripts/ExternalLinkScript.html

diff --git a/Dockerfile b/Dockerfile
index 33a734a..3bbac6c 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -23,7 +23,7 @@ LABEL org.hotosm.fmtm.app-name="backend" \
 RUN set -ex \
     && apt-get update \
     && DEBIAN_FRONTEND=noninteractive apt-get install \
-    -y --no-install-recommends "locales" "ca-certificates" "gettext" \
+    -y --no-install-recommends "locales" "ca-certificates" "gettext" "libmagickwand-dev" \
     && DEBIAN_FRONTEND=noninteractive apt-get upgrade -y \
     && rm -rf /var/lib/apt/lists/* \
     && update-ca-certificates
@@ -61,6 +61,7 @@ RUN set -ex \
         "libwebp-dev" \
         "nodejs" \
         "npm" \
+        "libmagickwand-dev" \
     && rm -rf /var/lib/apt/lists/*
 COPY --from=extract-deps \
     /opt/python/requirements.txt /opt/python/
@@ -94,6 +95,7 @@ RUN set -ex \
         "libwebp-dev" \
         "nodejs" \
         "npm" \
+        "libmagickwand-dev" \
     && rm -rf /var/lib/apt/lists/*
 # Copy the entrypoint script into the Docker image
 COPY --chown=wagtail:wagtail container-entrypoint.sh /
diff --git a/app/events/migrations/0013_alter_individualeventpage_extended_description.py b/app/events/migrations/0013_alter_individualeventpage_extended_description.py
new file mode 100644
index 0000000..b61c1eb
--- /dev/null
+++ b/app/events/migrations/0013_alter_individualeventpage_extended_description.py
@@ -0,0 +1,19 @@
+# Generated by Django 4.2.7 on 2024-10-21 21:37
+
+from django.db import migrations
+import wagtail.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('events', '0012_alter_eventownerpage_view_all_events_link'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='individualeventpage',
+            name='extended_description',
+            field=wagtail.fields.StreamField([('text_block', 0)], block_lookup={0: ('wagtail.blocks.RichTextBlock', (), {'features': ['h2', 'h3', 'h4', 'bold', 'italic', 'link', 'ol', 'ul', 'hr', 'document-link', 'image', 'embed', 'code', 'blockquote']})}, null=True),
+        ),
+    ]
diff --git a/app/events/migrations/0014_eventownerpage_applied_text.py b/app/events/migrations/0014_eventownerpage_applied_text.py
new file mode 100644
index 0000000..2ec165d
--- /dev/null
+++ b/app/events/migrations/0014_eventownerpage_applied_text.py
@@ -0,0 +1,18 @@
+# Generated by Django 4.2.7 on 2024-10-24 18:38
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('events', '0013_alter_individualeventpage_extended_description'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='eventownerpage',
+            name='applied_text',
+            field=models.CharField(default='applied', help_text='This will be a suffix to a number, used to indicate how many filters are applied currently in some field.'),
+        ),
+    ]
diff --git a/app/events/models.py b/app/events/models.py
index 6211b5a..fe37410 100644
--- a/app/events/models.py
+++ b/app/events/models.py
@@ -28,7 +28,7 @@ def get_context(self, request, *args, **kwargs):
         categories = EventCategory.objects.all()
         query = Q()
         for category in categories:
-            if request.GET.get(str(category), ''):
+            if request.GET.get("cat" + str(category), ''):
                 query = query | Q(event_categories=category)
         events_list = events_list.filter(query)
 
@@ -36,7 +36,7 @@ def get_context(self, request, *args, **kwargs):
         event_host_types = EventHostType.objects.all()
         query = Q()
         for host_type in event_host_types:
-            if request.GET.get(str(host_type), ''):
+            if request.GET.get("htype" + str(host_type.id), ''):
                 query = query | Q(event_host_type=host_type)
         events_list = events_list.filter(query)
 
@@ -92,6 +92,7 @@ def get_context(self, request, *args, **kwargs):
     view_all_events_link = StreamField(LinkOrPageBlock(), use_json_field=True, blank=True)
     event_read_more_text = models.CharField(default="Read more")
 
+    applied_text = models.CharField(default="applied", help_text="This will be a suffix to a number, used to indicate how many filters are applied currently in some field.")
     keyword_search_hint = models.CharField(default="Search by keyword")
     filter_by_country = models.CharField(default="Filter by Country")
     host_type_select = models.CharField(default="Filter by Host Type")
@@ -106,6 +107,7 @@ def get_context(self, request, *args, **kwargs):
 
     content_panels = Page.content_panels + [
         MultiFieldPanel([
+            FieldPanel('applied_text'),
             FieldPanel('keyword_search_hint'),
             FieldPanel('filter_by_country'),
             FieldPanel('host_type_select'),
@@ -181,7 +183,7 @@ class IndividualEventPage(Page):
     intro = RichTextField(blank=True)
     extended_description = StreamField([
         ('text_block', RichTextBlock(features=[
-        'h1', 'h2', 'h3', 'h4', 'bold', 'italic', 'link', 'ol', 'ul', 'hr', 'document-link', 'image', 'embed', 'code', 'blockquote'
+        'h2', 'h3', 'h4', 'bold', 'italic', 'link', 'ol', 'ul', 'hr', 'document-link', 'image', 'embed', 'code', 'blockquote'
         ]))
     ], use_json_field=True, null=True)
 
diff --git a/app/events/templates/events/event_owner_page.html b/app/events/templates/events/event_owner_page.html
index 6049c88..4562cb9 100644
--- a/app/events/templates/events/event_owner_page.html
+++ b/app/events/templates/events/event_owner_page.html
@@ -10,7 +10,7 @@
 {% endblock extra_css %}
 
 {% block content %}
-    <div class="max-w-7xl mx-auto my-10" x-data="{ params: new URLSearchParams((new URL(window.location.href)).search), activeParams: {} }">
+    <div class="max-w-7xl mx-auto my-10" x-data="{ params: new URLSearchParams((new URL(window.location.href)).search), activeParams: new URLSearchParams((new URL(window.location.href)).search), {% include 'ui/components/utilities/FormGetActiveXData.js' %}, }">
         <div class="px-6 md:px-10">
             <h1 class="text-h1 font-semibold my-10">{{page.title}}</h1>
             <form class="my-10"
@@ -33,7 +33,7 @@ <h1 class="text-h1 font-semibold my-10">{{page.title}}</h1>
                     <div class="relative" x-data="{ show: false }" @click.away="show = false">
                         <div class="w-full h-full flex justify-between py-2 px-3 bg-hot-off-white items-center cursor-pointer" @click="show = !show">
                             <p class="pointer-events-none">
-                                {{page.host_type_select}}
+                                {{page.host_type_select}} {% include "ui/components/utilities/FormAppliedSuffix.html" with key="htype" applied_text=page.applied_text %}
                             </p>
                             {% include "ui/components/icon_svgs/LinkCaret.html" with class="rotate-90 text-hot-red" %}
                         </div>
@@ -42,7 +42,7 @@ <h1 class="text-h1 font-semibold my-10">{{page.title}}</h1>
                             {% for event_host_type in event_host_types %}
                                 <div class="mt-4 flex">
                                     <label for="htype-{{forloop.counter}}">{{event_host_type.type_name}}</label>
-                                    <input class="ml-auto checked:bg-hot-red checked:hover:bg-hot-red checked:focus:bg-hot-red" id="htype-{{forloop.counter}}" type="checkbox" name="{{event_host_type.type_name}}" :checked="params.get('{{event_host_type.type_name}}')">
+                                    <input class="ml-auto checked:bg-hot-red checked:hover:bg-hot-red checked:focus:bg-hot-red" id="htype-{{forloop.counter}}" type="checkbox" name="htype{{event_host_type.id}}" :checked="params.get('htype{{event_host_type.id}}')">
                                 </div>
                             {% endfor %}
                         </div>
@@ -52,7 +52,7 @@ <h1 class="text-h1 font-semibold my-10">{{page.title}}</h1>
                     <div class="relative" x-data="{ show: false }" @click.away="show = false">
                         <div class="w-full h-full flex justify-between py-2 px-3 bg-hot-off-white items-center cursor-pointer" @click="show = !show">
                             <p class="pointer-events-none">
-                                {{page.category_select}}
+                                {{page.category_select}} {% include "ui/components/utilities/FormAppliedSuffix.html" with key="cat" applied_text=page.applied_text %}
                             </p>
                             {% include "ui/components/icon_svgs/LinkCaret.html" with class="rotate-90 text-hot-red" %}
                         </div>
@@ -61,7 +61,7 @@ <h1 class="text-h1 font-semibold my-10">{{page.title}}</h1>
                             {% for category in categories %}
                                 <div class="mt-4 flex">
                                     <label for="cat-{{forloop.counter}}">{{category.category_name}}</label>
-                                    <input class="ml-auto checked:bg-hot-red checked:hover:bg-hot-red checked:focus:bg-hot-red" id="cat-{{forloop.counter}}" type="checkbox" name="{{category.category_name}}" :checked="params.get('{{category.category_name}}')">
+                                    <input class="ml-auto checked:bg-hot-red checked:hover:bg-hot-red checked:focus:bg-hot-red" id="cat-{{forloop.counter}}" type="checkbox" name="cat{{category.id}}" :checked="params.get('cat{{category.id}}')">
                                 </div>
                             {% endfor %}
                         </div>
@@ -71,7 +71,7 @@ <h1 class="text-h1 font-semibold my-10">{{page.title}}</h1>
                     <div class="relative" x-data="{ show: false }" @click.away="show = false">
                         <div class="w-full h-full flex justify-between py-2 px-3 bg-hot-off-white items-center cursor-pointer" @click="show = !show">
                             <p class="pointer-events-none">
-                                {{page.filter_by_country}}
+                                {{page.filter_by_country}} {% include "ui/components/utilities/FormAppliedSuffix.html" with key="hub" applied_text=page.applied_text %}
                             </p>
                             {% include "ui/components/icon_svgs/LinkCaret.html" with class="rotate-90 text-hot-red" %}
                         </div>
diff --git a/app/impact_areas/models.py b/app/impact_areas/models.py
index 145c72d..1791bf7 100644
--- a/app/impact_areas/models.py
+++ b/app/impact_areas/models.py
@@ -27,7 +27,7 @@ def get_context(self, request, *args, **kwargs):
         context = super().get_context(request, *args, **kwargs)
 
         projects_list = IndividualProjectPage.objects.live().filter(
-            Q(impact_area_list__contains=[{'type': 'impact_area', 'value': context['page'].id}])
+            Q(impact_area_list__contains=[{'type': 'impact_area', 'value': context['page'].get_translation(1).id}])
         ).filter(locale=context['page'].locale)
         page = request.GET.get('page', 1)
         paginator = Paginator(projects_list, 8)  # if you want more/less items per page (i.e., per load), change the number here to something else
diff --git a/app/mapping_hubs/migrations/0022_individualmappinghubpage_hub_portrait_image.py b/app/mapping_hubs/migrations/0022_individualmappinghubpage_hub_portrait_image.py
new file mode 100644
index 0000000..65777b3
--- /dev/null
+++ b/app/mapping_hubs/migrations/0022_individualmappinghubpage_hub_portrait_image.py
@@ -0,0 +1,20 @@
+# Generated by Django 4.2.7 on 2024-10-21 18:54
+
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('wagtailimages', '0026_delete_uploadedimage'),
+        ('mapping_hubs', '0021_alter_individualmappinghubpage_contact_section_links_and_more'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='individualmappinghubpage',
+            name='hub_portrait_image',
+            field=models.ForeignKey(blank=True, help_text="The image which shows for this hub on the home page in the 'Open Mapping Hubs' section in large screen sizes. This image should be more of a portrait, centered on what you want to be shown.", null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='+', to='wagtailimages.image'),
+        ),
+    ]
diff --git a/app/mapping_hubs/models.py b/app/mapping_hubs/models.py
index f753455..4e39d74 100644
--- a/app/mapping_hubs/models.py
+++ b/app/mapping_hubs/models.py
@@ -40,8 +40,10 @@ def get_context(self, request):
 
         parent_hub = context['page'].get_parent()
 
+        base_id = parent_hub.get_translation(1).id
+
         projects = IndividualProjectPage.objects.live().filter(
-            Q(region_hub_list__contains=[{'type': 'region_hub', 'value': parent_hub.id}])
+            Q(region_hub_list__contains=[{'type': 'region_hub', 'value': base_id}])
         ).filter(locale=context['page'].locale)
 
         other_hubs_projects = MappingHubProjectsPage.objects.live().filter(locale=context['page'].locale)
@@ -142,12 +144,16 @@ class OpenMappingHubsPage(Page):
 class IndividualMappingHubPage(Page):
     def get_context(self, request):
         context = super().get_context(request)
+        original_id = context['page'].get_translation(1).id
+        context['original_id'] = str(original_id)
+
         projects = IndividualProjectPage.objects.live().filter(
-            Q(region_hub_list__contains=[{'type': 'region_hub', 'value': context['page'].id}])
+            Q(region_hub_list__contains=[{'type': 'region_hub', 'value': original_id}])
         ).filter(locale=context['page'].locale)
         context['projects'] = projects
         other_hubs = IndividualMappingHubPage.objects.live().filter(locale=context['page'].locale)
         context['other_hubs'] = other_hubs
+
         return context
 
     main_colour = models.CharField(default="#FFFFFF", help_text="The main colour for this mapping hub. This should be a hex code (though any type of CSS colour format will work).")
@@ -167,6 +173,14 @@ def get_context(self, request):
         related_name="+",
         help_text="A larger image that represents this hub which may be shown on other pages. This should be in a 2:1 aspect ratio; ideally, at least 400x200 pixels.",
     )
+    hub_portrait_image = models.ForeignKey(
+        "wagtailimages.Image",
+        null=True,
+        blank=True,
+        on_delete=models.SET_NULL,
+        related_name="+",
+        help_text="The image which shows for this hub on the home page in the 'Open Mapping Hubs' section in large screen sizes. This image should be more of a portrait, centered on what you want to be shown.",
+    )
     external_description_long = RichTextField(blank=True, help_text="A long description of the page to be used in external pages, such as the Open Mapping Hubs page.")
     intro = RichTextField(blank=True)
     main_body_text = RichTextField(blank=True)
@@ -211,6 +225,7 @@ def get_context(self, request):
             FieldPanel('main_colour'),
             FieldPanel('main_icon'),
             FieldPanel('main_external_hub_image'),
+            FieldPanel('hub_portrait_image'),
             FieldPanel('external_description_long'),
             FieldPanel('intro'),
             FieldPanel('main_body_text'),
diff --git a/app/mapping_hubs/templates/mapping_hubs/components/header.html b/app/mapping_hubs/templates/mapping_hubs/components/header.html
index 31ef65e..b63df55 100644
--- a/app/mapping_hubs/templates/mapping_hubs/components/header.html
+++ b/app/mapping_hubs/templates/mapping_hubs/components/header.html
@@ -7,7 +7,7 @@
 {% load wagtailimages_tags %}
 
 {% image page.header_image original as image_p %}
-<div class="w-full min-h-[24rem] content-end bg-no-repeat bg-cover" style="background-image: url('{{ image_p.url }}')">
+<div class="w-full min-h-[24rem] content-end bg-no-repeat bg-cover bg-center" style="background-image: url('{{ image_p.url }}')">
     <div class="bg-gradient-to-t from-black/70 to-transparent w-full">
         <div class="h-fit w-full pt-10 md:pb-16 text-white max-w-7xl mx-auto">
             <div class="grid grid-cols-1 lg:grid-cols-2 md:px-8 pt-10">
@@ -24,10 +24,10 @@ <h1 class="text-h1 font-semibold mb-4">
                         </p>
                         {% with page.id|stringformat:"s" as id %}
                             <p>
-                                {% include "ui/components/BaseLinkNoUnderlineWhite.html" with linkurl=page.get_parent.specific.header_news_link linktext=page.get_parent.specific.header_news_link_text linkappendage="?hub"|add:id|add:"=on" %}
+                                {% include "ui/components/BaseLinkNoUnderlineWhite.html" with linkurl=page.get_parent.specific.header_news_link linktext=page.get_parent.specific.header_news_link_text linkappendage="?hub"|add:original_id|add:"=on" %}
                             </p>
                             <p>
-                                {% include "ui/components/BaseLinkNoUnderlineWhite.html" with linkurl=page.get_parent.specific.header_events_link linktext=page.get_parent.specific.header_events_link_text linkappendage="?hub"|add:id|add:"=on" %}
+                                {% include "ui/components/BaseLinkNoUnderlineWhite.html" with linkurl=page.get_parent.specific.header_events_link linktext=page.get_parent.specific.header_events_link_text linkappendage="?hub"|add:original_id|add:"=on" %}
                             </p>
                         {% endwith %}
                     </div>
diff --git a/app/mapping_hubs/templates/mapping_hubs/individual_mapping_hub_page.html b/app/mapping_hubs/templates/mapping_hubs/individual_mapping_hub_page.html
index a329850..2317633 100644
--- a/app/mapping_hubs/templates/mapping_hubs/individual_mapping_hub_page.html
+++ b/app/mapping_hubs/templates/mapping_hubs/individual_mapping_hub_page.html
@@ -42,8 +42,8 @@
             {% comment %} NEWS AND EVENTS SECTIONS {% endcomment %}
             <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mt-10 mb-20">
                 {% with page.id|stringformat:"s" as id %}
-                    {% include "ui/components/dogear_boxes/SpecialDogearLinkBox.html" with colour=page.main_colour title=page.news_section_title description=page.news_section_description linktext=page.news_section_link_text linkurl=page.news_section_link linkappendage="?hub"|add:id|add:"=on" %}
-                    {% include "ui/components/dogear_boxes/SpecialDogearLinkBox.html" with colour=page.main_colour title=page.events_section_title description=page.events_section_description linktext=page.events_section_link_text linkurl=page.events_section_link linkappendage="?hub"|add:id|add:"=on" %}
+                    {% include "ui/components/dogear_boxes/SpecialDogearLinkBox.html" with colour=page.main_colour title=page.news_section_title description=page.news_section_description linktext=page.news_section_link_text linkurl=page.news_section_link linkappendage="?hub"|add:original_id|add:"=on" %}
+                    {% include "ui/components/dogear_boxes/SpecialDogearLinkBox.html" with colour=page.main_colour title=page.events_section_title description=page.events_section_description linktext=page.events_section_link_text linkurl=page.events_section_link linkappendage="?hub"|add:original_id|add:"=on" %}
                 {% endwith %}
             </div>
 
@@ -54,7 +54,7 @@
                 </div>
                 <div class="text-left md:text-right text-intro mt-4 md:mt-0 self-center">
                     {% with page.id|stringformat:"s" as id %}
-                        {% include "ui/components/BaseLink.html" with linktext=page.get_parent.specific.partners_section_link_text linkurl=page.get_parent.specific.partners_section_link linkappendage="?hub"|add:id|add:"=on" %}
+                        {% include "ui/components/BaseLink.html" with linktext=page.get_parent.specific.partners_section_link_text linkurl=page.get_parent.specific.partners_section_link linkappendage="?hub"|add:original_id|add:"=on" %}
                     {% endwith %}
                 </div>
             </div>
diff --git a/app/members/migrations/0017_membergroupownerpage_applied_text.py b/app/members/migrations/0017_membergroupownerpage_applied_text.py
new file mode 100644
index 0000000..9794ff7
--- /dev/null
+++ b/app/members/migrations/0017_membergroupownerpage_applied_text.py
@@ -0,0 +1,18 @@
+# Generated by Django 4.2.7 on 2024-10-24 18:50
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('members', '0016_alter_membergroupownerpage_footer_box_button_url'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='membergroupownerpage',
+            name='applied_text',
+            field=models.CharField(default='applied', help_text='This will be a suffix to a number, used to indicate how many filters are applied currently in some field.'),
+        ),
+    ]
diff --git a/app/members/models.py b/app/members/models.py
index 062fa1f..5b299bf 100644
--- a/app/members/models.py
+++ b/app/members/models.py
@@ -29,6 +29,7 @@ class MemberGroupOwnerPage(Page):
         'members.MemberGroupPage'
     ]
 
+    applied_text = models.CharField(default="applied", help_text="This will be a suffix to a number, used to indicate how many filters are applied currently in some field.")
     search_placeholder = models.CharField(default="Search by name")
     filter_by_country = models.CharField(default="Filter by Country")
     sort_by_titlea = models.CharField(default="Sort by Name Alphabetical")
@@ -47,6 +48,7 @@ class MemberGroupOwnerPage(Page):
 
     content_panels = Page.content_panels + [
         MultiFieldPanel([
+            FieldPanel('applied_text'),
             FieldPanel('search_placeholder'),
             FieldPanel('filter_by_country'),
             FieldPanel('sort_by_titlea'),
@@ -70,7 +72,7 @@ def get_context(self, request, *args, **kwargs):
         context = super().get_context(request, *args, **kwargs)
 
         members = IndividualMemberPage.objects.live().filter(
-            Q(member_groups__contains=[{'type': 'member_group', 'value': { 'group': context['page'].id }}])
+            Q(member_groups__contains=[{'type': 'member_group', 'value': { 'group': context['page'].get_translation(1).id }}])
         ).filter(locale=context['page'].locale)
 
         keyword = request.GET.get('keyword', '')
@@ -78,10 +80,10 @@ def get_context(self, request, *args, **kwargs):
         if keyword:
             members = members.search(keyword, fields=["title"]).get_queryset()
         
-        hubs = IndividualMappingHubPage.objects.live().filter(locale=context['page'].locale)
+        hubs = IndividualMappingHubPage.objects.live().filter(locale=context['page'].get_translation(1).locale)
         query = Q()
         for hub in hubs:
-            if request.GET.get(str(hub), ''):
+            if request.GET.get("hub" + str(hub.id), ''):
                 query = query | Q(location_hub=hub)
         members = members.filter(query).distinct()
 
diff --git a/app/members/templates/members/member_group_page.html b/app/members/templates/members/member_group_page.html
index f800c8a..95ae270 100644
--- a/app/members/templates/members/member_group_page.html
+++ b/app/members/templates/members/member_group_page.html
@@ -12,7 +12,7 @@
 {% block content %}
     {% include "ui/components/PageHeaderWithBlur.html" with title=page.title subtitle=page.intro image=page.header_image smaller=True full_length=True %}
 
-    <div class="max-w-7xl mx-auto px-6 md:px-10 my-10" x-data="{ params: new URLSearchParams((new URL(window.location.href)).search), activeParams: {} }">
+    <div class="max-w-7xl mx-auto px-6 md:px-10 my-10" x-data="{ params: new URLSearchParams((new URL(window.location.href)).search), activeParams: new URLSearchParams((new URL(window.location.href)).search), {% include 'ui/components/utilities/FormGetActiveXData.js' %}, }">
         <div class="max-w-3xl">
             <div class="text-intro font-medium">
                 {{page.body_intro|safe}}
@@ -43,7 +43,7 @@
                     <div class="relative" x-data="{ show: false }" @click.away="show = false">
                         <div class="w-full h-full flex justify-between py-2 px-3 bg-hot-off-white items-center cursor-pointer" @click="show = !show">
                             <p class="pointer-events-none">
-                                {{page.get_parent.specific.filter_by_country}}
+                                {{page.get_parent.specific.filter_by_country}} {% include "ui/components/utilities/FormAppliedSuffix.html" with key="hub" applied_text=page.get_parent.specific.applied_text %}
                             </p>
                             {% include "ui/components/icon_svgs/LinkCaret.html" with class="rotate-90 text-hot-red" %}
                         </div>
@@ -51,8 +51,8 @@
                             <hr class="border-b-2">
                             {% for hub in hubs %}
                                 <div class="mt-4 flex">
-                                    <label for="cat-{{forloop.counter}}">{{hub.title}}</label>
-                                    <input class="ml-auto checked:bg-hot-red checked:hover:bg-hot-red checked:focus:bg-hot-red" id="cat-{{forloop.counter}}" type="checkbox" name="{{hub.title}}" :checked="params.get('{{hub.title}}')">
+                                    <label for="hub-{{forloop.counter}}">{{hub.localized.title}}</label>
+                                    <input class="ml-auto checked:bg-hot-red checked:hover:bg-hot-red checked:focus:bg-hot-red" id="hub-{{forloop.counter}}" type="checkbox" name="hub{{hub.id}}" :checked="params.get('hub{{hub.id}}')">
                                 </div>
                             {% endfor %}
                         </div>
diff --git a/app/misc/migrations/0035_generalpolicypage.py b/app/misc/migrations/0035_generalpolicypage.py
new file mode 100644
index 0000000..1609372
--- /dev/null
+++ b/app/misc/migrations/0035_generalpolicypage.py
@@ -0,0 +1,36 @@
+# Generated by Django 4.2.7 on 2024-10-21 22:04
+
+from django.db import migrations, models
+import django.db.models.deletion
+import wagtail.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('wagtailcore', '0094_alter_page_locale'),
+        ('misc', '0034_alter_codeofconductpage_our_policies_links_and_more'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='GeneralPolicyPage',
+            fields=[
+                ('page_ptr', models.OneToOneField(auto_created=True, on_delete=django.db.models.deletion.CASCADE, parent_link=True, primary_key=True, serialize=False, to='wagtailcore.page')),
+                ('intro', wagtail.fields.RichTextField(blank=True)),
+                ('brief_body_text', wagtail.fields.RichTextField(blank=True)),
+                ('table_of_contents_title', models.CharField(default='Table of Contents')),
+                ('show_table_of_contents', models.BooleanField()),
+                ('body_sections', wagtail.fields.StreamField([('blocks', 2)], blank=True, block_lookup={0: ('wagtail.blocks.CharBlock', (), {}), 1: ('wagtail.blocks.RichTextBlock', (), {}), 2: ('wagtail.blocks.StructBlock', [[('title', 0), ('body', 1)]], {})}, help_text='These sections will automatically populate the table of contents if the table of contents is set to show.', null=True)),
+                ('our_policies_title', models.CharField(default='Our Policies')),
+                ('our_policies_links', wagtail.fields.StreamField([('blocks', 6)], blank=True, block_lookup={0: ('wagtail.blocks.CharBlock', (), {}), 1: ('wagtail.blocks.PageChooserBlock', (), {}), 2: ('wagtail.blocks.URLBlock', (), {}), 3: ('wagtail.documents.blocks.DocumentChooserBlock', (), {}), 4: ('wagtail.blocks.CharBlock', (), {'help_text': "Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."}), 5: ('wagtail.blocks.StreamBlock', [[('page', 1), ('url', 2), ('document', 3), ('other', 4)]], {}), 6: ('wagtail.blocks.StructBlock', [[('text', 0), ('link', 5)]], {})}, help_text='Links to be shown under the Our Policies section.', null=True)),
+                ('question_block_title', models.CharField(default='Have a question about our policies?')),
+                ('question_block_button_text', models.CharField(default='Contact HOT')),
+                ('question_block_button_link', wagtail.fields.StreamField([('page', 0), ('url', 1), ('document', 2), ('other', 3)], blank=True, block_lookup={0: ('wagtail.blocks.PageChooserBlock', (), {}), 1: ('wagtail.blocks.URLBlock', (), {}), 2: ('wagtail.documents.blocks.DocumentChooserBlock', (), {}), 3: ('wagtail.blocks.CharBlock', (), {'help_text': "Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."})})),
+            ],
+            options={
+                'abstract': False,
+            },
+            bases=('wagtailcore.page',),
+        ),
+    ]
diff --git a/app/misc/migrations/0036_generalpolicyownerpage_and_more.py b/app/misc/migrations/0036_generalpolicyownerpage_and_more.py
new file mode 100644
index 0000000..074e21a
--- /dev/null
+++ b/app/misc/migrations/0036_generalpolicyownerpage_and_more.py
@@ -0,0 +1,52 @@
+# Generated by Django 4.2.7 on 2024-10-21 22:39
+
+from django.db import migrations, models
+import django.db.models.deletion
+import wagtail.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('wagtailcore', '0094_alter_page_locale'),
+        ('misc', '0035_generalpolicypage'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='GeneralPolicyOwnerPage',
+            fields=[
+                ('page_ptr', models.OneToOneField(auto_created=True, on_delete=django.db.models.deletion.CASCADE, parent_link=True, primary_key=True, serialize=False, to='wagtailcore.page')),
+                ('our_policies_title', models.CharField(default='Our Policies')),
+                ('our_policies_links', wagtail.fields.StreamField([('blocks', 6)], blank=True, block_lookup={0: ('wagtail.blocks.CharBlock', (), {}), 1: ('wagtail.blocks.PageChooserBlock', (), {}), 2: ('wagtail.blocks.URLBlock', (), {}), 3: ('wagtail.documents.blocks.DocumentChooserBlock', (), {}), 4: ('wagtail.blocks.CharBlock', (), {'help_text': "Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."}), 5: ('wagtail.blocks.StreamBlock', [[('page', 1), ('url', 2), ('document', 3), ('other', 4)]], {}), 6: ('wagtail.blocks.StructBlock', [[('text', 0), ('link', 5)]], {})}, help_text='Links to be shown under the Our Policies section of the child policy pages. This list will automatically include all pages that are a child of this page, so please only add links to any externally-hosted policies (or policies that are documents)! This list of policies will appear after the child pages.', null=True)),
+            ],
+            options={
+                'abstract': False,
+            },
+            bases=('wagtailcore.page',),
+        ),
+        migrations.RemoveField(
+            model_name='codeofconductpage',
+            name='our_policies_links',
+        ),
+        migrations.RemoveField(
+            model_name='codeofconductpage',
+            name='our_policies_title',
+        ),
+        migrations.RemoveField(
+            model_name='generalpolicypage',
+            name='our_policies_links',
+        ),
+        migrations.RemoveField(
+            model_name='generalpolicypage',
+            name='our_policies_title',
+        ),
+        migrations.RemoveField(
+            model_name='privacypolicypage',
+            name='our_policies_links',
+        ),
+        migrations.RemoveField(
+            model_name='privacypolicypage',
+            name='our_policies_title',
+        ),
+    ]
diff --git a/app/misc/models.py b/app/misc/models.py
index 1ef1409..38a9ac9 100644
--- a/app/misc/models.py
+++ b/app/misc/models.py
@@ -13,6 +13,10 @@
 
 
 class CodeOfConductPage(Page):
+    parent_page_type = [
+        'misc.GeneralPolicyOwnerPage'
+    ]
+
     max_count = 1
 
     intro = RichTextField(blank=True)
@@ -26,14 +30,6 @@ class CodeOfConductPage(Page):
     complaint_handling_title = models.CharField(default="Complaint Handling Process")
     complaint_handling_body = RichTextField(blank=True)
 
-    our_policies_title = models.CharField(default="Our Policies")
-    our_policies_links = StreamField([
-        ('blocks', StructBlock([
-            ('text', CharBlock()),
-            ('link', LinkOrPageBlock())
-        ]))
-    ], use_json_field=True, null=True, blank=True, help_text="Links to be shown under the Our Policies section.")
-
     question_block_title = models.CharField(default="Have a question about the code of conduct?")
     question_block_button_text = models.CharField(default="Contact Community Working Group")
     question_block_button_link = StreamField(LinkOrPageBlock(), use_json_field=True, blank=True)
@@ -49,8 +45,6 @@ class CodeOfConductPage(Page):
             FieldPanel('complaint_handling_body'),
         ], heading="Body"),
         MultiFieldPanel([
-            FieldPanel('our_policies_title'),
-            FieldPanel('our_policies_links'),
             FieldPanel('question_block_title'),
             FieldPanel('question_block_button_text'),
             FieldPanel('question_block_button_link'),
@@ -59,6 +53,10 @@ class CodeOfConductPage(Page):
 
 
 class PrivacyPolicyPage(Page):
+    parent_page_type = [
+        'misc.GeneralPolicyOwnerPage'
+    ]
+
     max_count = 1
 
     intro = RichTextField(blank=True)
@@ -71,15 +69,69 @@ class PrivacyPolicyPage(Page):
         ]))
     ], use_json_field=True, null=True, blank=True, help_text="Sections to be shown in the body following the table of contents; these sections will automatically populate the table of contents.")
 
+    question_block_title = models.CharField(default="Have a question about the privacy policy?")
+    question_block_button_text = models.CharField(default="Contact HOT")
+    question_block_button_link = StreamField(LinkOrPageBlock(), use_json_field=True, blank=True)
+
+    content_panels = Page.content_panels + [
+        MultiFieldPanel([
+            FieldPanel('intro'),
+            FieldPanel('brief_body_text'),
+            FieldPanel('table_of_contents_title'),
+            FieldPanel('body_sections'),
+        ], heading="Body"),
+        MultiFieldPanel([
+            FieldPanel('question_block_title'),
+            FieldPanel('question_block_button_text'),
+            FieldPanel('question_block_button_link'),
+        ], heading="Sidebar"),
+    ]
+
+
+class GeneralPolicyOwnerPage(Page):
+    max_count = 1
+
+    subpage_types = [
+        'misc.GeneralPolicyPage',
+        'misc.PrivacyPolicyPage',
+        'misc.CodeOfConductPage',
+    ]
+
     our_policies_title = models.CharField(default="Our Policies")
     our_policies_links = StreamField([
         ('blocks', StructBlock([
             ('text', CharBlock()),
             ('link', LinkOrPageBlock())
         ]))
-    ], use_json_field=True, null=True, blank=True, help_text="Links to be shown under the Our Policies section.")
+    ], use_json_field=True, null=True, blank=True, 
+        help_text="Links to be shown under the Our Policies section of the child policy pages. " +
+        "This list will automatically include all pages that are a child of this page, so please only add links to any externally-hosted " +
+        "policies (or policies that are documents)! This list of policies will appear after the child pages."
+    )
 
-    question_block_title = models.CharField(default="Have a question about the privacy policy?")
+    content_panels = Page.content_panels + [
+        FieldPanel('our_policies_title'),
+        FieldPanel('our_policies_links'),
+    ]
+
+
+class GeneralPolicyPage(Page):
+    parent_page_type = [
+        'misc.GeneralPolicyOwnerPage'
+    ]
+
+    intro = RichTextField(blank=True)
+    brief_body_text = RichTextField(blank=True)
+    table_of_contents_title = models.CharField(default="Table of Contents")
+    show_table_of_contents = models.BooleanField()
+    body_sections = StreamField([
+        ('blocks', StructBlock([
+            ('title', CharBlock()),
+            ('body', RichTextBlock())
+        ]))
+    ], use_json_field=True, null=True, blank=True, help_text="These sections will automatically populate the table of contents if the table of contents is set to show.")
+
+    question_block_title = models.CharField(default="Have a question about our policies?")
     question_block_button_text = models.CharField(default="Contact HOT")
     question_block_button_link = StreamField(LinkOrPageBlock(), use_json_field=True, blank=True)
 
@@ -88,11 +140,10 @@ class PrivacyPolicyPage(Page):
             FieldPanel('intro'),
             FieldPanel('brief_body_text'),
             FieldPanel('table_of_contents_title'),
+            FieldPanel('show_table_of_contents'),
             FieldPanel('body_sections'),
         ], heading="Body"),
         MultiFieldPanel([
-            FieldPanel('our_policies_title'),
-            FieldPanel('our_policies_links'),
             FieldPanel('question_block_title'),
             FieldPanel('question_block_button_text'),
             FieldPanel('question_block_button_link'),
diff --git a/app/misc/templates/misc/code_of_conduct_page.html b/app/misc/templates/misc/code_of_conduct_page.html
index e173c46..6d2d92c 100644
--- a/app/misc/templates/misc/code_of_conduct_page.html
+++ b/app/misc/templates/misc/code_of_conduct_page.html
@@ -45,15 +45,11 @@ <h2 class="font-bold text-h2 mt-8">
 
                 <div>
                     <h1 class="text-h2 font-bold">
-                        {{page.our_policies_title}}
+                        {{page.get_parent.specific.our_policies_title}}
                     </h1>
-                    <div class="grid gap-4 mt-4">
-                        {% for policy in page.our_policies_links %}
-                            <p>
-                                {% include "ui/components/BaseLink.html" with linktext=policy.value.text linkurl=policy.value.link %}
-                            </p>
-                        {% endfor %}
-                    </div>
+                    <ul class="grid gap-4 mt-4">
+                        {% include "./components/PolicyLinks.html" %}
+                    </ul>
 
                     <div class="bg-hot-off-white p-8 mt-16">
                         <h1 class="font-bold text-h3 mb-8">
diff --git a/app/misc/templates/misc/components/PolicyLinks.html b/app/misc/templates/misc/components/PolicyLinks.html
new file mode 100644
index 0000000..391f497
--- /dev/null
+++ b/app/misc/templates/misc/components/PolicyLinks.html
@@ -0,0 +1,15 @@
+{% load policy_tags %}
+{% get_internal_policy_links as internal_policy_links %}
+
+{% for policy in internal_policy_links %}
+    {% if policy.id != page.id %}
+        <li>
+            {% include "ui/components/BaseLink.html" with linktext=policy.title linkurl=policy.url %}
+        </li>
+    {% endif %}
+{% endfor %}
+{% for policy in page.get_parent.specific.our_policies_links %}
+    <li>
+        {% include "ui/components/BaseLink.html" with linktext=policy.value.text linkurl=policy.value.link %}
+    </li>
+{% endfor %}
\ No newline at end of file
diff --git a/app/misc/templates/misc/general_policy_page.html b/app/misc/templates/misc/general_policy_page.html
new file mode 100644
index 0000000..8cd77fb
--- /dev/null
+++ b/app/misc/templates/misc/general_policy_page.html
@@ -0,0 +1,71 @@
+{% extends "base.html" %}
+{% load static %}
+{% load wagtailcore_tags %}
+{% load wagtailimages_tags %}
+{% load compress %}
+{% block body_class %}template-generalpolicypage{% endblock %}
+{% block extra_css %}
+    {% compress css %}
+    {% endcompress css %}
+{% endblock extra_css %}
+
+{% block content %}
+    <div class="max-w-7xl mx-auto my-10">
+        <div class="px-6 md:px-10">
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+                <div class="lg:col-span-2 [&_h2]:mt-6 [&_h2]:mb-4 [&_h3]:mt-6 [&_h3]:mb-4">
+                    <h1 class="font-semibold text-h1">
+                        {{page.title}}
+                    </h1>
+                    <div class="text-intro font-medium">
+                        {{page.intro|richtext}}
+                    </div>
+
+                    <div class="base-article-m">
+                        {{page.brief_body_text|richtext}}
+
+                        {% if page.show_table_of_contents %}
+                            <h3>
+                                {{page.table_of_contents_title}}
+                            </h3>
+                            <ol>
+                                {% for section in page.body_sections %}
+                                    <a href="#section-{{forloop.counter}}">    
+                                        <li>
+                                            {{section.value.title}}
+                                        </li>
+                                    </a>
+                                {% endfor %}
+                            </ol>
+                        {% endif %}
+
+                        {% for section in page.body_sections %}
+                            <h2 id="section-{{forloop.counter}}">
+                                {{forloop.counter}}. {{section.value.title}}
+                            </h2>
+                            {{section.value.body|richtext}}
+                        {% endfor %}
+                    </div>
+                </div>
+
+                <div>
+                    <h1 class="text-h2 font-bold">
+                        {{page.get_parent.specific.our_policies_title}}
+                    </h1>
+                    <ul class="grid gap-4 mt-4">
+                        {% include "./components/PolicyLinks.html" %}
+                    </ul>
+
+                    <div class="bg-hot-off-white p-8 mt-16">
+                        <h1 class="font-bold text-h3 mb-8">
+                            {{page.question_block_title}}
+                        </h1>
+                        <a href="{%include 'ui/components/PageOrLinkHrefText.html' with linkurl=page.question_block_button_link%}">
+                            {% include "components/branded_elements/button.html" with text=page.question_block_button_text %}
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+{% endblock %}
\ No newline at end of file
diff --git a/app/misc/templates/misc/privacy_policy_page.html b/app/misc/templates/misc/privacy_policy_page.html
index d96f855..fd93a28 100644
--- a/app/misc/templates/misc/privacy_policy_page.html
+++ b/app/misc/templates/misc/privacy_policy_page.html
@@ -48,15 +48,11 @@ <h2 id="section-{{forloop.counter}}">
 
                 <div>
                     <h1 class="text-h2 font-bold">
-                        {{page.our_policies_title}}
+                        {{page.get_parent.specific.our_policies_title}}
                     </h1>
-                    <div class="grid gap-4 mt-4">
-                        {% for policy in page.our_policies_links %}
-                            <p>
-                                {% include "ui/components/BaseLink.html" with linktext=policy.value.text linkurl=policy.value.link %}
-                            </p>
-                        {% endfor %}
-                    </div>
+                    <ul class="grid gap-4 mt-4">
+                        {% include "./components/PolicyLinks.html" %}
+                    </ul>
 
                     <div class="bg-hot-off-white p-8 mt-16">
                         <h1 class="font-bold text-h3 mb-8">
diff --git a/app/misc/templatetags/policy_tags.py b/app/misc/templatetags/policy_tags.py
new file mode 100644
index 0000000..5346e4a
--- /dev/null
+++ b/app/misc/templatetags/policy_tags.py
@@ -0,0 +1,23 @@
+from wagtail.models import Page
+from django import template
+from django.utils.translation import get_language
+from home.models import HomePage
+from django.conf import settings
+from app.misc.models import GeneralPolicyOwnerPage
+
+register = template.Library()
+
+@register.simple_tag(takes_context=True)
+def get_internal_policy_links(context):
+    current_page = context.get('self')
+
+    if current_page is None:
+        return None
+
+    owners = GeneralPolicyOwnerPage.objects.live().filter(locale=current_page.locale)
+
+    if len(owners):
+        owner = owners[0]
+        return owner.get_children()
+
+    return None
\ No newline at end of file
diff --git a/app/news/migrations/0025_alter_individualnewspage_article_body.py b/app/news/migrations/0025_alter_individualnewspage_article_body.py
new file mode 100644
index 0000000..089cfaa
--- /dev/null
+++ b/app/news/migrations/0025_alter_individualnewspage_article_body.py
@@ -0,0 +1,19 @@
+# Generated by Django 4.2.7 on 2024-10-21 21:37
+
+from django.db import migrations
+import wagtail.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('news', '0024_alter_newsownerpage_view_all_news_link'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='individualnewspage',
+            name='article_body',
+            field=wagtail.fields.StreamField([('text_block', 0)], blank=True, block_lookup={0: ('wagtail.blocks.RichTextBlock', (), {'features': ['h2', 'h3', 'h4', 'bold', 'italic', 'link', 'ol', 'ul', 'hr', 'document-link', 'image', 'embed', 'code', 'blockquote']})}, null=True),
+        ),
+    ]
diff --git a/app/news/migrations/0026_newsownerpage_applied_text.py b/app/news/migrations/0026_newsownerpage_applied_text.py
new file mode 100644
index 0000000..bd2dcf2
--- /dev/null
+++ b/app/news/migrations/0026_newsownerpage_applied_text.py
@@ -0,0 +1,18 @@
+# Generated by Django 4.2.7 on 2024-10-24 17:04
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('news', '0025_alter_individualnewspage_article_body'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='newsownerpage',
+            name='applied_text',
+            field=models.CharField(default='applied', help_text='This will be a suffix to a number, used to indicate how many filters are applied currently in some field.'),
+        ),
+    ]
diff --git a/app/news/models.py b/app/news/models.py
index c0c9f9c..2ebcaf3 100644
--- a/app/news/models.py
+++ b/app/news/models.py
@@ -22,8 +22,10 @@ class NewsOwnerPage(Page):
     def get_context(self, request, *args, **kwargs):
         context = super().get_context(request, *args, **kwargs)
 
+        base_locale = context['page'].get_translation(1).locale
+
         keyword = request.GET.get('keyword', '')
-        news_list = IndividualNewsPage.objects.live().filter(locale=context['page'].locale)
+        news_list = IndividualNewsPage.objects.live().filter(locale=base_locale)
         
         if keyword:
             news_list = news_list.search(keyword).get_queryset()
@@ -41,7 +43,7 @@ def get_context(self, request, *args, **kwargs):
             query = query | Q(tags__name=tag)
         news_list = news_list.filter(query).distinct()
 
-        hubs = IndividualMappingHubPage.objects.live().filter(locale=context['page'].locale)
+        hubs = IndividualMappingHubPage.objects.live().filter(locale=base_locale)
         query = Q()
         for hub in hubs:
             if request.GET.get(f"hub{hub.id}", ''):
@@ -93,6 +95,7 @@ def get_context(self, request, *args, **kwargs):
     tags_title = models.CharField(default="Tags")
     hubs_title = models.CharField(default="Associated Hubs")
 
+    applied_text = models.CharField(default="applied", help_text="This will be a suffix to a number, used to indicate how many filters are applied currently in some field.")
     keyword_search_hint = models.CharField(default="Search by keyword")
     filter_by_hub = models.CharField(default="Filter by Hub")
     category_select = models.CharField(default="Select Categories")
@@ -107,6 +110,7 @@ def get_context(self, request, *args, **kwargs):
 
     content_panels = Page.content_panels + [
         MultiFieldPanel([
+            FieldPanel('applied_text'),
             FieldPanel('keyword_search_hint'),
             FieldPanel('filter_by_hub'),
             FieldPanel('category_select'),
@@ -182,7 +186,7 @@ class IndividualNewsPage(Page):
 
     article_body = StreamField([
         ('text_block', RichTextBlock(features=[
-        'h1', 'h2', 'h3', 'h4', 'bold', 'italic', 'link', 'ol', 'ul', 'hr', 'document-link', 'image', 'embed', 'code', 'blockquote'
+        'h2', 'h3', 'h4', 'bold', 'italic', 'link', 'ol', 'ul', 'hr', 'document-link', 'image', 'embed', 'code', 'blockquote'
         ]))
     ], use_json_field=True, null=True, blank=True)
 
diff --git a/app/news/templates/news/individual_news_page.html b/app/news/templates/news/individual_news_page.html
index 7f8631c..46d8beb 100644
--- a/app/news/templates/news/individual_news_page.html
+++ b/app/news/templates/news/individual_news_page.html
@@ -90,7 +90,10 @@ <h1 class="text-h2 font-bold mb-4">
                             <p>
                                 {% with categories=page.categories.all %}
                                     {% for category in categories %}
-                                        <a href="#" class="text-hot-red hover:underline">{{ category.category_name }}</a>{% if not forloop.last %}, {% endif %}
+                                        {% comment %} keep in one line so that the commas don't have spaces between them {% endcomment %}
+                                        {% with category.id|stringformat:"s" as id %}
+                                            <a href="{%include 'ui/components/PageOrLinkHrefText.html' with linkurl=page.get_parent linkappendage='?cat'|add:id|add:'=on'%}" class="text-hot-red hover:underline">{{ category.category_name }}</a>{% if not forloop.last %}, {% endif %}
+                                        {% endwith %}
                                     {% endfor %}
                                 {% endwith %}
                             </p>
@@ -106,7 +109,9 @@ <h1 class="text-h2 font-bold mb-4">
                             <p>
                                 {% with tags=page.tags.all %}
                                     {% for tag in tags %}
-                                        <a href="#" class="text-hot-red hover:underline">{{ tag }}</a>{% if not forloop.last %}, {% endif %}
+                                        {% with tag|stringformat:"s" as tagstring %}
+                                            <a href="{%include 'ui/components/PageOrLinkHrefText.html' with linkurl=page.get_parent linkappendage='?tag.'|add:tagstring|add:'=on'%}" class="text-hot-red hover:underline">{{ tag }}</a>{% if not forloop.last %}, {% endif %}
+                                        {% endwith %}
                                     {% endfor %}
                                 {% endwith %}
                             </p>
diff --git a/app/news/templates/news/news_owner_page.html b/app/news/templates/news/news_owner_page.html
index 65af967..84f1130 100644
--- a/app/news/templates/news/news_owner_page.html
+++ b/app/news/templates/news/news_owner_page.html
@@ -10,7 +10,11 @@
 {% endblock extra_css %}
 
 {% block content %}
-    <div class="max-w-7xl mx-auto my-10" x-data="{ params: new URLSearchParams((new URL(window.location.href)).search), activeParams: {} }">
+    <div class="max-w-7xl mx-auto my-10" x-data="{ 
+        params: new URLSearchParams((new URL(window.location.href)).search), 
+        activeParams: new URLSearchParams((new URL(window.location.href)).search), 
+        {% include 'ui/components/utilities/FormGetActiveXData.js' %}, 
+    }">
         <div class="px-6 md:px-10">
             <h1 class="text-h1 font-semibold my-10">{{page.title}}</h1>
             <form id="search-form"
@@ -33,7 +37,7 @@ <h1 class="text-h1 font-semibold my-10">{{page.title}}</h1>
                     <div class="relative" x-data="{ show: false }" @click.away="show = false">
                         <div class="w-full h-full flex justify-between py-2 px-3 bg-hot-off-white items-center cursor-pointer" @click="show = !show">
                             <p class="pointer-events-none">
-                                {{page.filter_by_hub}}
+                                {{page.filter_by_hub}} {% include "ui/components/utilities/FormAppliedSuffix.html" with key="hub" applied_text=page.applied_text %}
                             </p>
                             {% include "ui/components/icon_svgs/LinkCaret.html" with class="rotate-90 text-hot-red" %}
                         </div>
@@ -41,7 +45,9 @@ <h1 class="text-h1 font-semibold my-10">{{page.title}}</h1>
                             <hr class="border-b-2">
                             {% for hub in hubs %}
                                 <div class="mt-4 flex">
-                                    <label for="hub-{{forloop.counter}}">{{hub.title}}</label>
+                                    <label for="hub-{{forloop.counter}}">
+                                        {{hub.localized.title}}
+                                    </label>
                                     <input class="ml-auto checked:bg-hot-red checked:hover:bg-hot-red checked:focus:bg-hot-red" id="hub-{{forloop.counter}}" type="checkbox" name="hub{{hub.id}}" :checked="params.get('hub{{hub.id}}')">
                                 </div>
                             {% endfor %}
@@ -52,7 +58,7 @@ <h1 class="text-h1 font-semibold my-10">{{page.title}}</h1>
                     <div class="relative" x-data="{ show: false }" @click.away="show = false">
                         <div class="w-full h-full flex justify-between py-2 px-3 bg-hot-off-white items-center cursor-pointer" @click="show = !show">
                             <p class="pointer-events-none">
-                                {{page.category_select}}
+                                {{page.category_select}} {% include "ui/components/utilities/FormAppliedSuffix.html" with key="cat" applied_text=page.applied_text %}
                             </p>
                             {% include "ui/components/icon_svgs/LinkCaret.html" with class="rotate-90 text-hot-red" %}
                         </div>
diff --git a/app/our_work/models.py b/app/our_work/models.py
index e283b6f..88e7ded 100644
--- a/app/our_work/models.py
+++ b/app/our_work/models.py
@@ -44,21 +44,24 @@ def get_project_paginator(self, request, context):
                     break
             projects_list = projects_list.filter(query).distinct()
         
-        hubs = IndividualMappingHubPage.objects.live().filter(locale=context['page'].locale)
+        base_locale = context['page'].get_translation(1).locale
+        print(base_locale)
+        
+        hubs = IndividualMappingHubPage.objects.live().filter(locale=base_locale)
         query = Q()
         for hub in hubs:
             if request.GET.get(f"hub{hub.id}", ''):
                 query = query | Q(region_hub_list__contains=[{'type': 'region_hub', 'value': hub.id }])
         projects_list = projects_list.filter(query).distinct()
         
-        impact_areas = IndividualImpactAreaPage.objects.live().filter(locale=context['page'].locale)
+        impact_areas = IndividualImpactAreaPage.objects.live().filter(locale=base_locale)
         query = Q()
         for area in impact_areas:
             if request.GET.get(f"ia{area.id}", ''):
                 query = query | Q(impact_area_list__contains=[{'type': 'impact_area', 'value': area.id }])
         projects_list = projects_list.filter(query).distinct()
 
-        programs = IndividualProgramPage.objects.live().filter(locale=context['page'].locale)
+        programs = IndividualProgramPage.objects.live().filter(locale=base_locale)
         query = Q()
         for program in programs:
             if request.GET.get(f"pg{program.id}", ''):
@@ -88,13 +91,14 @@ def get_context(self, request, *args, **kwargs):
         context = super().get_context(request, *args, **kwargs)
 
         paginator, projects = self.get_project_paginator(request, context)
+        base_locale = context['page'].get_translation(1).locale
         
         context['projects'] = projects
         context['paginator'] = paginator
-        context['impact_areas'] = IndividualImpactAreaPage.objects.live().filter(locale=context['page'].locale)
-        context['hubs'] = IndividualMappingHubPage.objects.live().filter(locale=context['page'].locale)
-        context['hubs_projects'] = MappingHubProjectsPage.objects.live().filter(locale=context['page'].locale)
-        context['programs'] = IndividualProgramPage.objects.live().filter(locale=context['page'].locale)
+        context['impact_areas'] = IndividualImpactAreaPage.objects.live().filter(locale=base_locale)
+        context['hubs'] = IndividualMappingHubPage.objects.live().filter(locale=base_locale)
+        context['hubs_projects'] = MappingHubProjectsPage.objects.live().filter(locale=base_locale)
+        context['programs'] = IndividualProgramPage.objects.live().filter(locale=base_locale)
         context['types'] = ProjectType.objects.all()
         context['statuses'] = ProjectStatus.objects.all()
         return context
diff --git a/app/our_work/templates/our_work/components/FilterCategoryPage.html b/app/our_work/templates/our_work/components/FilterCategoryPage.html
index d8cadc7..7a548d9 100644
--- a/app/our_work/templates/our_work/components/FilterCategoryPage.html
+++ b/app/our_work/templates/our_work/components/FilterCategoryPage.html
@@ -6,7 +6,7 @@
         <hr class="border-b-2">
         {% for p in pages %}
             <div class="px-1 mt-4 flex">
-                <label for="{{denoter}}-{{forloop.counter}}">{{p.title}}</label>
+                <label for="{{denoter}}-{{forloop.counter}}">{{p.localized.title}}</label>
                 <input class="ml-auto checked:bg-hot-red checked:hover:bg-hot-red checked:focus:bg-hot-red" id="{{denoter}}-{{forloop.counter}}" type="checkbox" name="{{denoter}}{{p.id}}" :checked="params.get('{{denoter}}{{p.id}}')">
             </div>
         {% endfor %}
diff --git a/app/our_work/templates/our_work/components/MapboxScript.html b/app/our_work/templates/our_work/components/MapboxScript.html
index ef515a1..5db04df 100644
--- a/app/our_work/templates/our_work/components/MapboxScript.html
+++ b/app/our_work/templates/our_work/components/MapboxScript.html
@@ -8,8 +8,46 @@
 
         const map = new mapboxgl.Map({
             container: 'map',
-            style: 'mapbox://styles/hot/ckjrx5rtn73xu19liyfan4ar4',
+            style: 'mapbox://styles/hot/cm2dpp8lb000j01pb8chz3y15',
             center: [0, 0],
             zoom: 2
         });
+
+        const currentMarkers = [];
+
+        const callMapUpdate = async () => {
+            let params = new URLSearchParams(Alpine.store('formdata'));
+            if (!params) {
+                params = new URLSearchParams();
+            }
+            params.set('page', Alpine.store('pageNum'));
+            params.set('projects', true);
+            const apiUrl = '?' + params.toString();
+            fetch(apiUrl).then(response => {
+                if (response.ok)
+                    return response.json();
+                throw new Error("Failed to fetch projects.");
+            }).then(data => {
+                geojson = data;
+                
+                for (const feature of geojson.features) {
+                    const element = `
+                        <div class="" @click="$refs['project${feature.properties.id}'].scrollIntoView({block: 'nearest', behavior: 'smooth'}); selectedProject = 'project${feature.properties.id}';">
+                            {% include './MapboxMarker.html' %}
+                        </div>
+                    `;
+                    const el = document.createElement('div');
+                    el.innerHTML = element;
+                    var marker = new mapboxgl.Marker(el);
+                    marker.setLngLat(feature.geometry.coordinates).addTo(map);
+                    currentMarkers.push(marker);
+                }
+            })
+        }
+
+        const refreshWithSearch = () => {
+            for (const marker of currentMarkers) {
+                marker.remove();
+            }
+        }
 </script>
\ No newline at end of file
diff --git a/app/our_work/templates/our_work/our_work_page.html b/app/our_work/templates/our_work/our_work_page.html
index fe747e0..49552fb 100644
--- a/app/our_work/templates/our_work/our_work_page.html
+++ b/app/our_work/templates/our_work/our_work_page.html
@@ -38,11 +38,19 @@ <h2 class="text-h2 font-bold">
             </div>
 
             {% comment %} FILTERS {% endcomment %}
-            <div class="mt-20" x-data="{ mapView: params.get('mapView') ? params.get('mapView') : false, showFilters: params.get('showFilters') ? params.get('showFilters') : false }" id="projects-section">
+            <div class="mt-20" x-data="{ mapView: params.get('mapView') ? params.get('mapView') : true, showFilters: params.get('showFilters') ? params.get('showFilters') : false }" id="projects-section">
                 <h1 class="text-h2 font-bold">
                     {{ page.projects_title }}
                 </h1>
-                <form class="mt-8" action="#projects-section">
+                <form class="mt-8" action="#projects-section" 
+                    hx-get="{{page.url}}"
+                    hx-trigger="submit"
+                    hx-target="#projects-list, #next-project, #projects-list-map, #next-project-map"
+                    hx-select="#projects-list, #next-project, #projects-list-map, #next-project-map"
+                    hx-swap="innerHTML"
+                    hx-select-oob="#projects-list:outerHTML, #next-project:outerHTML, #projects-list-map:outerHTML, #next-project-map:outerHTML"
+                    @submit="$store.formdata = new FormData($el); refreshWithSearch();"
+                >
                     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-10 gap-8">
                         {% comment %} KEYWORD SEARCH {% endcomment %}
                         <div class="bg-hot-off-white flex items-center lg:col-span-3">
@@ -90,6 +98,7 @@ <h1 class="text-h2 font-bold">
                                 </div>
                             </div>
                         </div>
+                        
                     </div>
 
                     {% comment %} MAP AND FILTER CONTAINER {% endcomment %}
@@ -114,12 +123,12 @@ <h1 class="text-h2 font-bold">
                                             </p>
                                         {% endif %}
                                     </div>
-                                    <p class="text-center mt-4 mb-8" id="next-project-map" class="{% if not projects.has_next %}hidden{% endif %}">
+                                    <p class="text-center mt-4 mb-8 cursor-pointer" id="next-project-map" class="{% if not projects.has_next %}hidden{% endif %}">
                                         {% if projects.has_next %}
                                                 {% comment %} <a href="?page={{ projects.next_page_number }}"></a> {% endcomment %}
-                                                <button
-                                                    x-data="{ params: new URLSearchParams((new URL(window.location.href)).search), init() {this.params.set('page', '{{projects.next_page_number}}')} }"
-                                                    :hx-get="`?${params.toString()}`"
+                                                <span
+                                                    x-data="{ params: new URLSearchParams((new URL(window.location.href)).search) }"
+                                                    :hx-get="'?page={{ projects.next_page_number }}&' + `${(new URLSearchParams($store.formdata)).toString()}`"
                                                     hx-trigger="click"
                                                     hx-select="#projects-list-map, #next-project-map, #projects-list, #next-project"
                                                     hx-swap="beforeend"
@@ -129,7 +138,7 @@ <h1 class="text-h2 font-bold">
                                                         {{page.load_more_projects_text}}
                                                     </span>
                                                     {% include "ui/components/icon_svgs/LinkCaret.html" with class="rotate-90 text-hot-red" %}
-                                                </button>
+                                                </span>
                                         {% endif %}
                                     </p>
                                 </div>
@@ -189,11 +198,11 @@ <h1 class="text-h2 font-bold">
                             </p>
                         {% endif %}
                     </div>
-                    <p class="text-center mt-10" id="next-project" class="{% if not projects.has_next %}hidden{% endif %}" x-init="$store.pageNum = {{projects.number}}; callMapUpdate();">
+                    <p class="text-center mt-10" id="next-project" class="{% if not projects.has_next %}hidden{% endif %}" x-init="$store.pageNum = {{projects.number}}; callMapUpdate(); console.log($store.pageNum)">
                         {% if projects.has_next %}
                                 <button
-                                    x-data="{ params: new URLSearchParams((new URL(window.location.href)).search), init() {this.params.set('page', '{{projects.next_page_number}}')} }"
-                                    :hx-get="`?${params.toString()}`"
+                                    x-data="{ params: new URLSearchParams((new URL(window.location.href)).search) }"
+                                    :hx-get="'?page={{ projects.next_page_number }}&' + `${(new URLSearchParams($store.formdata)).toString()}`"
                                     hx-trigger="click"
                                     hx-select="#projects-list-map, #next-project-map, #projects-list, #next-project"
                                     hx-swap="beforeend"
@@ -243,30 +252,4 @@ <h1 class="text-h2 font-bold mb-8">
     </div>
     
     {% include "./components/MapboxScript.html" %}
-    <script>
-        const callMapUpdate = async () => {
-            const params = new URLSearchParams((new URL(window.location.href)).search);
-            params.set('page', Alpine.store('pageNum'));
-            params.set('projects', true);
-            const apiUrl = '?' + params.toString();
-            fetch(apiUrl).then(response => {
-                if (response.ok)
-                    return response.json();
-                throw new Error("Failed to fetch projects.");
-            }).then(data => {
-                geojson = data;
-                
-                for (const feature of geojson.features) {
-                    const element = `
-                        <div class="" @click="$refs['project${feature.properties.id}'].scrollIntoView({block: 'nearest', behavior: 'smooth'}); selectedProject = 'project${feature.properties.id}';">
-                            {% include './components/MapboxMarker.html' %}
-                        </div>
-                    `;
-                    const el = document.createElement('div');
-                    el.innerHTML = element;
-                    new mapboxgl.Marker(el).setLngLat(feature.geometry.coordinates).addTo(map);
-                }
-            })
-        }
-    </script>
 {% endblock %}
diff --git a/app/partners/migrations/0014_ourpartnerspage_applied_text.py b/app/partners/migrations/0014_ourpartnerspage_applied_text.py
new file mode 100644
index 0000000..cbee04a
--- /dev/null
+++ b/app/partners/migrations/0014_ourpartnerspage_applied_text.py
@@ -0,0 +1,18 @@
+# Generated by Django 4.2.7 on 2024-10-24 19:24
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('partners', '0013_alter_ourpartnerspage_black_box_link_url_and_more'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='ourpartnerspage',
+            name='applied_text',
+            field=models.CharField(default='applied', help_text='This will be a suffix to a number, used to indicate how many filters are applied currently in some field.'),
+        ),
+    ]
diff --git a/app/partners/models.py b/app/partners/models.py
index ea44ad6..07eed80 100644
--- a/app/partners/models.py
+++ b/app/partners/models.py
@@ -44,7 +44,7 @@ class PartnershipTemplatePage(Page):
 
     intro = RichTextField(blank=True)
     body = RichTextField(blank=True, features=[
-        'h1', 'h2', 'h3', 'h4', 'bold', 'italic', 'link', 'ol', 'ul', 'hr', 'document-link', 'image', 'embed', 'code', 'blockquote'
+        'h2', 'h3', 'h4', 'bold', 'italic', 'link', 'ol', 'ul', 'hr', 'document-link', 'image', 'embed', 'code', 'blockquote'
     ])
 
     related_projects = StreamField([
@@ -214,6 +214,7 @@ def get_context(self, request, *args, **kwargs):
     )
     intro = RichTextField(blank=True, help_text="This is shown in the header.")
 
+    applied_text = models.CharField(default="applied", help_text="This will be a suffix to a number, used to indicate how many filters are applied currently in some field.")
     filter_by_type_text = models.CharField(default="Filter by Type")
     filter_by_program = models.CharField(default="Filter by Program")
     filter_by_hub = models.CharField(default="Filter by Hub")
@@ -233,6 +234,7 @@ def get_context(self, request, *args, **kwargs):
             FieldPanel('header_image'),
             FieldPanel('intro'),
         ], heading="Header"),
+        FieldPanel('applied_text'),
         FieldPanel('filter_by_type_text'),
         FieldPanel('filter_by_program'),
         FieldPanel('filter_by_hub'),
diff --git a/app/partners/templates/partners/our_partners_page.html b/app/partners/templates/partners/our_partners_page.html
index 479199a..6130399 100644
--- a/app/partners/templates/partners/our_partners_page.html
+++ b/app/partners/templates/partners/our_partners_page.html
@@ -12,7 +12,7 @@
 {% block content %}
     {% include "ui/components/PageHeaderWithBlur.html" with title=page.title image=page.header_image full_length=True smaller=True endinlarge=True %}
     
-    <div class="max-w-7xl mx-auto my-10" x-data="{ params: new URLSearchParams((new URL(window.location.href)).search), activeParams: {} }">
+    <div class="max-w-7xl mx-auto my-10" x-data="{ params: new URLSearchParams((new URL(window.location.href)).search), activeParams: new URLSearchParams((new URL(window.location.href)).search), {% include 'ui/components/utilities/FormGetActiveXData.js' %}, }">
         <div class="px-6 md:px-10">
             <div class="max-w-5xl text-intro font-medium mb-20">
                 {{ page.intro|richtext }}
@@ -31,7 +31,7 @@
                     <div class="relative" x-data="{ show: false }" @click.away="show = false">
                         <div class="w-full h-full flex justify-between py-2 px-3 bg-hot-off-white items-center cursor-pointer" @click="show = !show">
                             <p class="pointer-events-none">
-                                {{page.filter_by_type_text}}
+                                {{page.filter_by_type_text}} {% include "ui/components/utilities/FormAppliedSuffix.html" with key="pt" applied_text=page.applied_text %}
                             </p>
                             {% include "ui/components/icon_svgs/LinkCaret.html" with class="rotate-90 text-hot-red" %}
                         </div>
@@ -50,7 +50,7 @@
                     <div class="relative" x-data="{ show: false }" @click.away="show = false">
                         <div class="w-full h-full flex justify-between py-2 px-3 bg-hot-off-white items-center cursor-pointer" @click="show = !show">
                             <p class="pointer-events-none">
-                                {{page.filter_by_hub}}
+                                {{page.filter_by_hub}} {% include "ui/components/utilities/FormAppliedSuffix.html" with key="hub" applied_text=page.applied_text %}
                             </p>
                             {% include "ui/components/icon_svgs/LinkCaret.html" with class="rotate-90 text-hot-red" %}
                         </div>
@@ -69,7 +69,7 @@
                     <div class="relative" x-data="{ show: false }" @click.away="show = false">
                         <div class="w-full h-full flex justify-between py-2 px-3 bg-hot-off-white items-center cursor-pointer" @click="show = !show">
                             <p class="pointer-events-none">
-                                {{page.filter_by_program}}
+                                {{page.filter_by_program}} {% include "ui/components/utilities/FormAppliedSuffix.html" with key="prg" applied_text=page.applied_text %}
                             </p>
                             {% include "ui/components/icon_svgs/LinkCaret.html" with class="rotate-90 text-hot-red" %}
                         </div>
diff --git a/app/partners/templates/partners/partner_with_us_page.html b/app/partners/templates/partners/partner_with_us_page.html
index 1784d7f..677fdfe 100644
--- a/app/partners/templates/partners/partner_with_us_page.html
+++ b/app/partners/templates/partners/partner_with_us_page.html
@@ -21,7 +21,7 @@
             </div>
 
             {% include "ui/components/SectionHeadingWithUnderline.html" with title=page.partnership_types_title %}
-            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mt-6 mb-20">
+            <div class="grid md:grid-cols-2 gap-8 mt-6 mb-20">
                 {% for ptype in page.get_children %}
                     <div class="p-6 bg-hot-off-white">
                         {% image ptype.specific.external_icon original class="h-12 w-auto mt-2" %}
diff --git a/app/projects/migrations/0039_alter_projectstatus_options_and_more.py b/app/projects/migrations/0039_alter_projectstatus_options_and_more.py
new file mode 100644
index 0000000..3498c06
--- /dev/null
+++ b/app/projects/migrations/0039_alter_projectstatus_options_and_more.py
@@ -0,0 +1,21 @@
+# Generated by Django 4.2.7 on 2024-10-21 16:25
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('projects', '0038_alter_individualprojectpage_call_to_action_link_and_more'),
+    ]
+
+    operations = [
+        migrations.AlterModelOptions(
+            name='projectstatus',
+            options={'verbose_name_plural': 'Project Statuses'},
+        ),
+        migrations.AlterModelOptions(
+            name='projecttype',
+            options={'verbose_name_plural': 'Project Types'},
+        ),
+    ]
diff --git a/app/projects/migrations/0040_alter_individualprojectpage_description.py b/app/projects/migrations/0040_alter_individualprojectpage_description.py
new file mode 100644
index 0000000..45efec2
--- /dev/null
+++ b/app/projects/migrations/0040_alter_individualprojectpage_description.py
@@ -0,0 +1,19 @@
+# Generated by Django 4.2.7 on 2024-10-21 21:37
+
+from django.db import migrations
+import wagtail.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('projects', '0039_alter_projectstatus_options_and_more'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='individualprojectpage',
+            name='description',
+            field=wagtail.fields.StreamField([('text_block', 0)], block_lookup={0: ('wagtail.blocks.RichTextBlock', (), {'features': ['h2', 'h3', 'h4', 'bold', 'italic', 'link', 'ol', 'ul', 'hr', 'document-link', 'image', 'embed', 'code', 'blockquote']})}, null=True),
+        ),
+    ]
diff --git a/app/projects/migrations/0041_individualprojectpage_country_text_and_more.py b/app/projects/migrations/0041_individualprojectpage_country_text_and_more.py
new file mode 100644
index 0000000..1b8cabe
--- /dev/null
+++ b/app/projects/migrations/0041_individualprojectpage_country_text_and_more.py
@@ -0,0 +1,24 @@
+# Generated by Django 4.2.7 on 2024-10-24 23:02
+
+from django.db import migrations, models
+import wagtail.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('projects', '0040_alter_individualprojectpage_description'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='individualprojectpage',
+            name='country_text',
+            field=wagtail.fields.RichTextField(blank=True, help_text='This field is not required; this field is mostly for projects with no specified region hub. Regardless, if region hub(s) and country are both provided, both fields will appear on the page.'),
+        ),
+        migrations.AlterField(
+            model_name='projectownerpage',
+            name='region_hub_title',
+            field=models.CharField(default='Region Hub/Country'),
+        ),
+    ]
diff --git a/app/projects/migrations/0042_alter_individualprojectpage_contact.py b/app/projects/migrations/0042_alter_individualprojectpage_contact.py
new file mode 100644
index 0000000..12d23f9
--- /dev/null
+++ b/app/projects/migrations/0042_alter_individualprojectpage_contact.py
@@ -0,0 +1,19 @@
+# Generated by Django 4.2.7 on 2024-10-25 17:12
+
+from django.db import migrations
+import wagtail.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('projects', '0041_individualprojectpage_country_text_and_more'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='individualprojectpage',
+            name='contact',
+            field=wagtail.fields.RichTextField(blank=True, help_text='If you provide an email here, make sure to turn it into an email link. This can be done by highlighting the text containing the email and pressing CTRL + K.', null=True),
+        ),
+    ]
diff --git a/app/projects/models.py b/app/projects/models.py
index 520e335..9b82689 100644
--- a/app/projects/models.py
+++ b/app/projects/models.py
@@ -57,7 +57,7 @@ def get_context(self, request, *args, **kwargs):
     load_more_projects_text = models.CharField(default="Load More Projects")
 
     impact_areas_title = models.CharField(default="Impact Areas")
-    region_hub_title = models.CharField(default="Region Hub")
+    region_hub_title = models.CharField(default="Region Hub/Country")
     duration_title = models.CharField(default="Duration")
     partners_title = models.CharField(default="Partners")
     tools_title = models.CharField(default="Tools")
@@ -123,6 +123,9 @@ class ProjectType(models.Model):
 
     def __str__(self):
         return self.type_name
+    
+    class Meta:
+        verbose_name_plural = "Project Types"
 
 
 @register_snippet
@@ -137,7 +140,7 @@ def __str__(self):
         return self.status_name
     
     class Meta:
-        verbose_name_plural = "Project statuses"
+        verbose_name_plural = "Project Statuses"
 
 
 """
@@ -172,7 +175,7 @@ class IndividualProjectPage(Page):
     intro = RichTextField(blank=True)
     description = StreamField([
         ('text_block', RichTextBlock(features=[
-        'h1', 'h2', 'h3', 'h4', 'bold', 'italic', 'link', 'ol', 'ul', 'hr', 'document-link', 'image', 'embed', 'code', 'blockquote'
+        'h2', 'h3', 'h4', 'bold', 'italic', 'link', 'ol', 'ul', 'hr', 'document-link', 'image', 'embed', 'code', 'blockquote'
         ]))
     ], use_json_field=True, null=True)
 
@@ -190,10 +193,11 @@ class IndividualProjectPage(Page):
     )
     impact_area_list = StreamField([('impact_area', PageChooserBlock(page_type="impact_areas.IndividualImpactAreaPage"))], use_json_field=True, null=True, blank=True)
     region_hub_list = StreamField([('region_hub', PageChooserBlock(page_type="mapping_hubs.IndividualMappingHubPage"))], use_json_field=True, null=True, blank=True)
+    country_text = RichTextField(blank=True, help_text="This field is not required; this field is mostly for projects with no specified region hub. Regardless, if region hub(s) and country are both provided, both fields will appear on the page.")
     duration = models.CharField(default="Ongoing", blank=True)
     partner_list = StreamField([('partner', SnippetChooserBlock(Partner))], use_json_field=True, null=True, blank=True)
     tools_list = StreamField([('tool', PageChooserBlock(page_type="tech.IndividualTechStackPage"))], use_json_field=True, null=True, blank=True)
-    contact = RichTextField(null=True, blank=True)
+    contact = RichTextField(null=True, blank=True, help_text="If you provide an email here, make sure to turn it into an email link. This can be done by highlighting the text containing the email and pressing CTRL + K.")
     types = ParentalManyToManyField('projects.ProjectType', blank=True)
     related_news = StreamField([
         ('news_page', PageChooserBlock(page_type="news.IndividualNewsPage"))
@@ -231,6 +235,7 @@ class IndividualProjectPage(Page):
             FieldPanel('project_status', widget=forms.RadioSelect),
             FieldPanel('impact_area_list'),
             FieldPanel('region_hub_list'),
+            FieldPanel('country_text'),
             FieldPanel('duration'),
             FieldPanel('partner_list'),
             FieldPanel('tools_list'),
diff --git a/app/projects/templates/projects/individual_project_page.html b/app/projects/templates/projects/individual_project_page.html
index ba11c84..966d7ea 100644
--- a/app/projects/templates/projects/individual_project_page.html
+++ b/app/projects/templates/projects/individual_project_page.html
@@ -18,7 +18,7 @@
             <div class="p-10 col-span-2">
                 <div class="base-article-m mb-20">
                     <div class="text-intro">
-                        {{ page.intro|safe }}
+                        {{ page.intro|richtext }}
                     </div>
                     {{ page.description }}
                 </div>
@@ -39,12 +39,13 @@
                             </div>
                         {% endif %}
 
-                        {% if page.region_hub_list %}
+                        {% if page.region_hub_list or page.country_text %}
                             <div>
                                 <p>{{page.get_parent.specific.region_hub_title}}</p>
                                 {% for hub in page.region_hub_list %}
                                     <p><a href="{{hub.value.url}}">{{hub.value.title}}</a></p>
                                 {% endfor %}
+                                {{page.country_text|richtext}}
                             </div>
                         {% endif %}
 
@@ -84,7 +85,7 @@
                         {% if page.contact %}
                             <div>
                                 <p>{{page.get_parent.specific.contact_title}}</p>
-                                <p>{{page.contact|safe}}</p>
+                                <p>{{page.contact|richtext}}</p>
                             </div>
                         {% endif %}
                     </div>
diff --git a/app/rfp/migrations/0009_alter_individualrequestforproposalpage_article_body.py b/app/rfp/migrations/0009_alter_individualrequestforproposalpage_article_body.py
new file mode 100644
index 0000000..876bced
--- /dev/null
+++ b/app/rfp/migrations/0009_alter_individualrequestforproposalpage_article_body.py
@@ -0,0 +1,19 @@
+# Generated by Django 4.2.7 on 2024-10-21 21:37
+
+from django.db import migrations
+import wagtail.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('rfp', '0008_alter_requestforproposalownerpage_job_opportunities_button_url'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='individualrequestforproposalpage',
+            name='article_body',
+            field=wagtail.fields.StreamField([('text_block', 0)], blank=True, block_lookup={0: ('wagtail.blocks.RichTextBlock', (), {'features': ['h2', 'h3', 'h4', 'bold', 'italic', 'link', 'ol', 'ul', 'hr', 'document-link', 'image', 'embed', 'code', 'blockquote']})}, null=True),
+        ),
+    ]
diff --git a/app/rfp/models.py b/app/rfp/models.py
index 14326a2..e7cc201 100644
--- a/app/rfp/models.py
+++ b/app/rfp/models.py
@@ -125,7 +125,7 @@ class IndividualRequestForProposalPage(Page):
     intro = RichTextField(blank=True)
     article_body = StreamField([
         ('text_block', RichTextBlock(features=[
-        'h1', 'h2', 'h3', 'h4', 'bold', 'italic', 'link', 'ol', 'ul', 'hr', 'document-link', 'image', 'embed', 'code', 'blockquote'
+        'h2', 'h3', 'h4', 'bold', 'italic', 'link', 'ol', 'ul', 'hr', 'document-link', 'image', 'embed', 'code', 'blockquote'
         ]))
     ], use_json_field=True, null=True, blank=True)
 
diff --git a/app/search_page/models.py b/app/search_page/models.py
index e9ecbbb..b0c952d 100644
--- a/app/search_page/models.py
+++ b/app/search_page/models.py
@@ -1,6 +1,9 @@
+import re
+
 from django.db import models
 from django.db.models import Q
 from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger
+from django.http import JsonResponse
 
 from wagtail.models import Page
 from wagtail.fields import RichTextField, StreamField
@@ -36,6 +39,27 @@ def get_context(self, request, *args, **kwargs):
         context['keyword'] = keyword
         return context
     
+    def serve(self, request, *args, **kwargs):
+        if request.GET.get('livesearch', False) and request.GET.get('keyword', False):
+            context = super().get_context(request, *args, **kwargs)
+            pages = Page.objects.live().filter(locale=context['page'].locale).autocomplete(request.GET.get('keyword')).get_queryset()
+
+            count = 0
+            results = []
+            for page in pages:
+                count += 1
+                result = {
+                    "title": page.title,
+                    "url": page.url,
+                }
+                results.append(result)
+                if count == 10:
+                    break
+
+            return JsonResponse({"results": results})
+            
+        return super().serve(request, *args, **kwargs)
+    
     page_description = "Search results will, by default, attempt to pull from an 'intro' field for the page description; otherwise, it will grab the page's meta search description."
 
     max_count = 1
diff --git a/app/tech/templates/tech/individual_tech_stack_page.html b/app/tech/templates/tech/individual_tech_stack_page.html
index 4a52d5c..4492b8a 100644
--- a/app/tech/templates/tech/individual_tech_stack_page.html
+++ b/app/tech/templates/tech/individual_tech_stack_page.html
@@ -63,7 +63,7 @@ <h1 class="text-h4 font-semibold">
                             {{block.value.title}}
                         </h1>
                         <p class="text-hot-red font-medium mt-4">
-                            {% include "ui/components/BaseLinkNoUnderline.html" with linkurl=block.value.linkurl linktext=block.value.linktext %}
+                            {% include "ui/components/BaseLinkNoUnderline.html" with linkurl=block.value.linkurl linktext=block.value.linktext variableicon=True %}
                         </p>
                     </div>
                 {% endfor %}
diff --git a/app/tools_and_resources/migrations/0010_alter_openmappingsolutionspage_solutions.py b/app/tools_and_resources/migrations/0010_alter_openmappingsolutionspage_solutions.py
new file mode 100644
index 0000000..4b0f67a
--- /dev/null
+++ b/app/tools_and_resources/migrations/0010_alter_openmappingsolutionspage_solutions.py
@@ -0,0 +1,19 @@
+# Generated by Django 4.2.7 on 2024-10-25 19:12
+
+from django.db import migrations
+import wagtail.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('tools_and_resources', '0009_alter_openmappingsolutionspage_cta_button_link_and_more'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='openmappingsolutionspage',
+            name='solutions',
+            field=wagtail.fields.StreamField([('solution', 13)], blank=True, block_lookup={0: ('wagtail.blocks.CharBlock', (), {}), 1: ('wagtail.images.blocks.ImageChooserBlock', (), {}), 2: ('wagtail.blocks.RichTextBlock', (), {}), 3: ('wagtail.images.blocks.ImageChooserBlock', (), {'required': False}), 4: ('wagtail.blocks.PageChooserBlock', (), {}), 5: ('wagtail.blocks.URLBlock', (), {}), 6: ('wagtail.documents.blocks.DocumentChooserBlock', (), {}), 7: ('wagtail.blocks.CharBlock', (), {'help_text': "Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."}), 8: ('wagtail.blocks.StreamBlock', [[('page', 4), ('url', 5), ('document', 6), ('other', 7)]], {'required': False}), 9: ('wagtail.blocks.StructBlock', [[('linktext', 0), ('linkurl', 8)]], {}), 10: ('wagtail.blocks.StreamBlock', [[('link', 9)]], {'required': False}), 11: ('wagtail.blocks.StructBlock', [[('icon', 3), ('title', 0), ('description', 2), ('links', 10)]], {}), 12: ('wagtail.blocks.StreamBlock', [[('item', 11)]], {}), 13: ('wagtail.blocks.StructBlock', [[('title', 0), ('banner', 1), ('description', 2), ('items', 12)]], {})}, null=True),
+        ),
+    ]
diff --git a/app/tools_and_resources/migrations/0011_remove_toolsandresourcespage_get_connected_button_text_and_more.py b/app/tools_and_resources/migrations/0011_remove_toolsandresourcespage_get_connected_button_text_and_more.py
new file mode 100644
index 0000000..6795ae9
--- /dev/null
+++ b/app/tools_and_resources/migrations/0011_remove_toolsandresourcespage_get_connected_button_text_and_more.py
@@ -0,0 +1,40 @@
+# Generated by Django 4.2.7 on 2024-10-25 22:46
+
+from django.db import migrations
+import wagtail.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('tools_and_resources', '0010_alter_openmappingsolutionspage_solutions'),
+    ]
+
+    operations = [
+        migrations.RemoveField(
+            model_name='toolsandresourcespage',
+            name='get_connected_button_text',
+        ),
+        migrations.RemoveField(
+            model_name='toolsandresourcespage',
+            name='get_connected_button_url',
+        ),
+        migrations.RemoveField(
+            model_name='toolsandresourcespage',
+            name='learn_more_data_principles_text',
+        ),
+        migrations.RemoveField(
+            model_name='toolsandresourcespage',
+            name='learn_more_data_principles_url',
+        ),
+        migrations.AddField(
+            model_name='toolsandresourcespage',
+            name='description_links',
+            field=wagtail.fields.StreamField([('link', 6)], blank=True, block_lookup={0: ('wagtail.blocks.CharBlock', (), {}), 1: ('wagtail.blocks.PageChooserBlock', (), {}), 2: ('wagtail.blocks.URLBlock', (), {}), 3: ('wagtail.documents.blocks.DocumentChooserBlock', (), {}), 4: ('wagtail.blocks.CharBlock', (), {'help_text': "Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."}), 5: ('wagtail.blocks.StreamBlock', [[('page', 1), ('url', 2), ('document', 3), ('other', 4)]], {'required': False}), 6: ('wagtail.blocks.StructBlock', [[('linktext', 0), ('linkurl', 5)]], {})}),
+        ),
+        migrations.AddField(
+            model_name='toolsandresourcespage',
+            name='resource_learning_links',
+            field=wagtail.fields.StreamField([('link', 6)], blank=True, block_lookup={0: ('wagtail.blocks.CharBlock', (), {}), 1: ('wagtail.blocks.PageChooserBlock', (), {}), 2: ('wagtail.blocks.URLBlock', (), {}), 3: ('wagtail.documents.blocks.DocumentChooserBlock', (), {}), 4: ('wagtail.blocks.CharBlock', (), {'help_text': "Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."}), 5: ('wagtail.blocks.StreamBlock', [[('page', 1), ('url', 2), ('document', 3), ('other', 4)]], {'required': False}), 6: ('wagtail.blocks.StructBlock', [[('linktext', 0), ('linkurl', 5)]], {})}),
+        ),
+    ]
diff --git a/app/tools_and_resources/models.py b/app/tools_and_resources/models.py
index bd8c236..d20ce7c 100644
--- a/app/tools_and_resources/models.py
+++ b/app/tools_and_resources/models.py
@@ -42,8 +42,12 @@ class ToolsAndResourcesPage(Page):
     intro_header = models.CharField(blank=True)
     intro = RichTextField(blank=True)
     description = RichTextField(blank=True)
-    learn_more_data_principles_text = models.CharField(default="Learn about our Data & Principles")
-    learn_more_data_principles_url = StreamField(LinkOrPageBlock(), use_json_field=True, blank=True)
+    description_links = StreamField([
+        ('link', StructBlock([
+            ('linktext', CharBlock()),
+            ('linkurl', LinkOrPageBlock(required=False)),
+        ]))
+    ], use_json_field=True, blank=True)
 
     large_panels = StreamField([('panel', LargePanel())], use_json_field=True, null=True, blank=True)
 
@@ -57,8 +61,12 @@ class ToolsAndResourcesPage(Page):
     )
     resource_learning_title = models.CharField(default="Resource and Learning Centre")
     resource_learning_description = RichTextField(blank=True)
-    get_connected_button_text = models.CharField(default="Get connected now")
-    get_connected_button_url = StreamField(LinkOrPageBlock(), use_json_field=True, blank=True)
+    resource_learning_links = StreamField([
+        ('link', StructBlock([
+            ('linktext', CharBlock()),
+            ('linkurl', LinkOrPageBlock(required=False)),
+        ]))
+    ], use_json_field=True, blank=True)
 
     dogear_tech_news_title = models.CharField(blank=True)
     dogear_tech_news_link_text = models.CharField(default="View our Tech News")
@@ -86,16 +94,14 @@ class ToolsAndResourcesPage(Page):
             FieldPanel('intro_header'),
             FieldPanel('intro'),
             FieldPanel('description'),
-            FieldPanel('learn_more_data_principles_text'),
-            FieldPanel('learn_more_data_principles_url'),
+            FieldPanel('description_links'),
         ], heading="Intro"),
         FieldPanel('large_panels'),
         MultiFieldPanel([
             FieldPanel('resource_learning_image'),
             FieldPanel('resource_learning_title'),
             FieldPanel('resource_learning_description'),
-            FieldPanel('get_connected_button_text'),
-            FieldPanel('get_connected_button_url'),
+            FieldPanel('resource_learning_links'),
         ], heading="Resource and Learning Centre"),
         MultiFieldPanel([
             FieldPanel('dogear_tech_news_title'),
@@ -139,6 +145,7 @@ class ResourceAndLearningPage(Page):
 
 
 class OpenMappingSolutionIndividualItemBlock(StructBlock):
+    icon = ImageChooserBlock(required=False)
     title = CharBlock()
     description = RichTextBlock()
     links = StreamBlock([
diff --git a/app/tools_and_resources/templates/tools_and_resources/open_mapping_solutions_page.html b/app/tools_and_resources/templates/tools_and_resources/open_mapping_solutions_page.html
index c29b2e0..7ede87e 100644
--- a/app/tools_and_resources/templates/tools_and_resources/open_mapping_solutions_page.html
+++ b/app/tools_and_resources/templates/tools_and_resources/open_mapping_solutions_page.html
@@ -47,18 +47,22 @@ <h1 class="text-h3 font-bold">
                                 <div class="md:col-span-2 lg:col-span-3">
                                     {% for item in solution.value.items %}
                                         <div x-show="selected == {{forloop.counter0}}" x-transition>
-                                            <h2 class="text-h4 font-semibold">
-                                                {{item.value.title}}
-                                            </h2>
+                                            <div class="flex items-center gap-4">
+                                                {% image item.value.icon original class="h-6 w-auto" %}
+                                                <h2 class="text-h4 font-semibold">
+                                                    {{item.value.title}}
+                                                </h2>
+                                            </div>
+                                            
                                             <div class="base-article-m mt-4 text-small">
                                                 {{item.value.description}}
                                             </div>
                                             <div class="flex gap-8 flex-wrap mt-8">
                                                 {% for link in item.value.links %}
                                                     <a href="{% include 'ui/components/PageOrLinkHrefText.html' with linkurl=link.value.linkurl %}">
-                                                        <div class="bg-hot-red font-medium text-intro text-white px-5 flex items-center hover:bg-hot-off-white hover:text-hot-red border-2 border-transparent hover:border-hot-red">
+                                                        <div class="bg-hot-red font-medium text-intro text-white py-1 px-5 flex items-center hover:bg-hot-off-white hover:text-hot-red border-2 border-transparent hover:border-hot-red">
                                                             <p>{{link.value.linktext}}</p>
-                                                            <span class="ml-2 mb-2">
+                                                            <span class="ml-2">
                                                                 {% include "ui/components/icon_svgs/ExternalLinkIcon.html" %}
                                                             </span>
                                                         </div>
diff --git a/app/tools_and_resources/templates/tools_and_resources/tools_and_resources_page.html b/app/tools_and_resources/templates/tools_and_resources/tools_and_resources_page.html
index c5f95ab..5497808 100644
--- a/app/tools_and_resources/templates/tools_and_resources/tools_and_resources_page.html
+++ b/app/tools_and_resources/templates/tools_and_resources/tools_and_resources_page.html
@@ -22,9 +22,13 @@ <h1 class="text-h2 font-bold">{{page.intro_header}}</h1>
                         {{page.description|richtext}}
                     </div>
 
-                    <p class="mt-4">
-                        {% include "ui/components/BaseLinkNoUnderline.html" with linkurl=page.learn_more_data_principles_url linktext=page.learn_more_data_principles_text %}
-                    </p>
+                    <div class="flex flex-wrap gap-4 gap-x-8 mt-4">
+                        {% for link in page.description_links %}
+                            <p class="text-intro">
+                                {% include "ui/components/BaseLink.html" with linkurl=link.value.linkurl linktext=link.value.linktext %}
+                            </p>
+                        {% endfor %}
+                    </div>
                 </div>
                 {% image page.intro_image original class="hidden lg:block" %}
             </div>
@@ -38,7 +42,7 @@ <h1 class="text-h2 font-bold">{{page.intro_header}}</h1>
     </div>
 
     <div class="my-10">
-        {% include "ui/components/sections/BaseSectionWithImage.html" with title=page.resource_learning_title image=page.resource_learning_image imageright=True red_button=True button_text=page.get_connected_button_text button_link=page.get_connected_button_url description=page.resource_learning_description imagenotwide=True %}
+        {% include "ui/components/sections/BaseSectionWithImage.html" with title=page.resource_learning_title image=page.resource_learning_image imageright=True linklist=page.resource_learning_links description=page.resource_learning_description imagenotwide=True %}
     </div>
 
     <div class="max-w-7xl mx-auto">
diff --git a/app/ui/templates/ui/components/BaseLinkNoUnderline.html b/app/ui/templates/ui/components/BaseLinkNoUnderline.html
index a70f652..243ae99 100644
--- a/app/ui/templates/ui/components/BaseLinkNoUnderline.html
+++ b/app/ui/templates/ui/components/BaseLinkNoUnderline.html
@@ -1,4 +1,8 @@
-<a href="{%include 'ui/components/PageOrLinkHrefText.html'%}" class="font-medium text-hot-red [&:hover_span]:underline [&:hover_span]:decoration-2">
+<a href="{%include 'ui/components/PageOrLinkHrefText.html'%}" class="font-medium text-hot-red [&:hover_span]:underline [&:hover_span]:decoration-2 flex items-center">
     <span>{{linktext}}</span>
-    {% include "ui/components/icon_svgs/LinkCaret.html" with class="ml-2" %}
+    {% if not variableicon %}
+            {% include "ui/components/icon_svgs/LinkCaret.html" with class="ml-2" %}
+        {% else %}
+            {% include "ui/components/icon_svgs/VariableLinkIcon.html" with class="ml-2" %}
+    {% endif %}
 </a>
\ No newline at end of file
diff --git a/app/ui/templates/ui/components/PageOrLinkHrefText.html b/app/ui/templates/ui/components/PageOrLinkHrefText.html
index d7bda96..143443c 100644
--- a/app/ui/templates/ui/components/PageOrLinkHrefText.html
+++ b/app/ui/templates/ui/components/PageOrLinkHrefText.html
@@ -1,17 +1,27 @@
+{% load wagtailcore_tags %}
+
 {% if linkurl.0 and linkurl.0.value %}
     {% if linkurl.0.value.page %}
         {{linkurl.0.value.page.url}}{{linkappendage}}
     {% elif linkurl.0.value.url %}
-        {{linkurl.0.value.url}}{{linkappendage}}
+        {% if linkurl.0.value.localized %}
+            {{linkurl.0.value.localized.url}}{{linkappendage}}
+            {% else %}
+            {{linkurl.0.value.url}}{{linkappendage}}
+        {% endif %}
     {% else %}
         {{linkurl.0.value}}{{linkappendage}}
     {% endif %}
 {% else %}
     {% if linkurl %}
         {% if linkurl.url %}
-            {{ linkurl.url }}{{linkappendage}}
+            {% if linkurl.localized %}
+                {{linkurl.localized.url}}{{linkappendage}}
+                {% else %}
+                {{linkurl.url}}{{linkappendage}}
+            {% endif %}
         {% else %}
-            {{ linkurl }}{{linkappendage}}
+            {{linkurl}}{{linkappendage}}
         {% endif %}
     {% endif %}
 {% endif %}
\ No newline at end of file
diff --git a/app/ui/templates/ui/components/icon_svgs/ExternalLinkIcon.html b/app/ui/templates/ui/components/icon_svgs/ExternalLinkIcon.html
index 4cca73a..f9f1ebb 100644
--- a/app/ui/templates/ui/components/icon_svgs/ExternalLinkIcon.html
+++ b/app/ui/templates/ui/components/icon_svgs/ExternalLinkIcon.html
@@ -1,4 +1,4 @@
-<svg class="inline overflow-visible {{class}}" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 19.167 17.242">
+<svg class="inline {{class}}" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 2.5 19.167 17.242">
   <path id="Path_13090" data-name="Path 13090" d="M2514.594-9984.769h-10.513v13.328h13.7v-6.157" transform="translate(-2503.081 9990.835)" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
   <path id="Path_13091" data-name="Path 13091" d="M2510.932-9979.3l8.179-8.164" transform="translate(-2501.358 9992.033)" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2"/>
   <path id="Path_13092" data-name="Path 13092" d="M0,2.7,2.7,0,5.391,2.7" transform="translate(16.8 1.707) rotate(45)" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
diff --git a/app/ui/templates/ui/components/icon_svgs/VariableLinkIcon.html b/app/ui/templates/ui/components/icon_svgs/VariableLinkIcon.html
new file mode 100644
index 0000000..5c52864
--- /dev/null
+++ b/app/ui/templates/ui/components/icon_svgs/VariableLinkIcon.html
@@ -0,0 +1,17 @@
+{% load wagtailcore_tags %}
+
+{% if linkurl.0 and linkurl.0.value %}
+    {% if linkurl.0.value.page or linkurl.0.value.url %}
+        {% include "ui/components/icon_svgs/LinkCaret.html" %}
+    {% else %}
+        {% include "ui/components/icon_svgs/ExternalLinkIcon.html" %}
+    {% endif %}
+{% else %}
+    {% if linkurl %}
+        {% if linkurl.url %}
+            {% include "ui/components/icon_svgs/LinkCaret.html" %}
+        {% else %}
+            {% include "ui/components/icon_svgs/ExternalLinkIcon.html" %}
+        {% endif %}
+    {% endif %}
+{% endif %}
\ No newline at end of file
diff --git a/app/ui/templates/ui/components/impact_areas/ImpactAreaPreviewBlock.html b/app/ui/templates/ui/components/impact_areas/ImpactAreaPreviewBlock.html
index c3682dc..37ac4da 100644
--- a/app/ui/templates/ui/components/impact_areas/ImpactAreaPreviewBlock.html
+++ b/app/ui/templates/ui/components/impact_areas/ImpactAreaPreviewBlock.html
@@ -5,22 +5,24 @@
 {% load wagtailcore_tags %}
 {% load wagtailimages_tags %}
 
-{% image ia.header_image original as image_p %}
-<div class="">
-    <div class="bg-gradient-to-t from-black/70 to-transparent to-30%">
-        <img class="w-full h-72 object-cover -z-10 relative" src="{{ image_p.url }}" />
-    </div>
-    
-    <h2 class="text-h3 font-bold py-1 my-1">
-        {% image ia.external_icon original class="black-image-redifier h-16 w-auto inline" %}
-        <span class="ml-2">{{ ia.title }}</span>
-    </h2>
+{% with ia.localized as ia %}
+    {% image ia.header_image original as image_p %}
+    <div class="">
+        <div class="bg-gradient-to-t from-black/70 to-transparent to-30%">
+            <img class="w-full h-72 object-cover -z-10 relative" src="{{ image_p.url }}" />
+        </div>
+        
+        <h2 class="text-h3 font-bold py-1 my-1">
+            {% image ia.external_icon original class="black-image-redifier h-16 w-auto inline" %}
+            <span class="ml-2">{{ ia.title }}</span>
+        </h2>
 
-    <div class="text-base py-1">
-        {{ ia.intro|richtext }}
-    </div>
+        <div class="text-base py-1">
+            {{ ia.intro|richtext }}
+        </div>
 
-    <p class="text-intro font-medium py-1">
-        {% include "ui/components/BaseLink.html" with linktext=learn_more_text linkurl=ia.url %}
-    </p>
-</div>
\ No newline at end of file
+        <p class="text-intro font-medium py-1">
+            {% include "ui/components/BaseLink.html" with linktext=learn_more_text linkurl=ia.url %}
+        </p>
+    </div>
+{% endwith %}
\ No newline at end of file
diff --git a/app/ui/templates/ui/components/impact_areas/ImpactAreaPreviewBlockMini.html b/app/ui/templates/ui/components/impact_areas/ImpactAreaPreviewBlockMini.html
index 4fb435a..f6e847b 100644
--- a/app/ui/templates/ui/components/impact_areas/ImpactAreaPreviewBlockMini.html
+++ b/app/ui/templates/ui/components/impact_areas/ImpactAreaPreviewBlockMini.html
@@ -1,10 +1,12 @@
 {% load wagtailimages_tags %}
 
-<a href="{{ area.url }}{{ link_addendum }}" class="rounded-2xl shadow-md hover:underline">
-    <div class="bg-hot-off-white p-6 text-center font-medium text-intro h-full flex flex-col justify-center items-center">
-        {% image area.external_icon original class="w-32 h-32" %}
-        <p>
-            {{ area.title }}
-        </p>
-    </div>
-</a>
\ No newline at end of file
+{% with area.localized as area %}
+    <a href="{{ area.url }}{{ link_addendum }}" class="rounded-2xl shadow-md hover:underline">
+        <div class="bg-hot-off-white p-6 text-center font-medium text-intro h-full flex flex-col justify-center items-center">
+            {% image area.external_icon original class="w-32 h-32" %}
+            <p>
+                {{ area.title }}
+            </p>
+        </div>
+    </a>
+{% endwith %}
\ No newline at end of file
diff --git a/app/ui/templates/ui/components/mapping_hub/MappingHubPreviewBlock.html b/app/ui/templates/ui/components/mapping_hub/MappingHubPreviewBlock.html
index 53dc78f..859d056 100644
--- a/app/ui/templates/ui/components/mapping_hub/MappingHubPreviewBlock.html
+++ b/app/ui/templates/ui/components/mapping_hub/MappingHubPreviewBlock.html
@@ -4,6 +4,6 @@
 {% endcomment %}
 {% load wagtailimages_tags %}
 
-<a href="{{ hub.url }}" class="hover:underline">
+<a href="{% include 'ui/components/PageOrLinkHrefText.html' with linkurl=hub %}" class="hover:underline">
     {% include "./MappingHubPreviewBlockBase.html" %}
 </a>
diff --git a/app/ui/templates/ui/components/mapping_hub/MappingHubPreviewBlockBase.html b/app/ui/templates/ui/components/mapping_hub/MappingHubPreviewBlockBase.html
index a6c44fd..bbbce53 100644
--- a/app/ui/templates/ui/components/mapping_hub/MappingHubPreviewBlockBase.html
+++ b/app/ui/templates/ui/components/mapping_hub/MappingHubPreviewBlockBase.html
@@ -4,10 +4,12 @@
 {% endcomment %}
 {% load wagtailimages_tags %}
 
-<div>
-    {% image hub.main_external_hub_image fill-600x300 %}
-    
-    <p class="text-h5 font-bold mt-4">
-        {{ hub.title }}
-    </p>
-</div>
+{% with hub.localized as hub %}
+    <div>
+        {% image hub.main_external_hub_image fill-600x300 %}
+        
+        <p class="text-h5 font-bold mt-4">
+            {{ hub.title }}
+        </p>
+    </div>
+{% endwith %}
\ No newline at end of file
diff --git a/app/ui/templates/ui/components/mapping_hub/MappingHubPreviewExtendedBlock.html b/app/ui/templates/ui/components/mapping_hub/MappingHubPreviewExtendedBlock.html
index f1d4bd2..9b25618 100644
--- a/app/ui/templates/ui/components/mapping_hub/MappingHubPreviewExtendedBlock.html
+++ b/app/ui/templates/ui/components/mapping_hub/MappingHubPreviewExtendedBlock.html
@@ -5,22 +5,24 @@
 {% load wagtailcore_tags %}
 {% load wagtailimages_tags %}
 
-<div>
-    <div class="grid">
-        {% image hub.header_image original class="col-start-1 row-start-1 aspect-[2/1] object-cover" %}
-        <div class="col-start-1 row-start-1 border-b-8" style="border-color: {{ hub.main_colour }}; background: linear-gradient(45deg, transparent 0%, transparent 92.4%, {{ hub.main_colour }} 92.5%, {{ hub.main_colour }} 100%);">
+{% with hub.localized as hub %}
+    <div class="flex flex-col gap-2">
+        <div class="grid">
+            {% image hub.header_image original class="col-start-1 row-start-1 aspect-[2/1] object-cover" %}
+            <div class="col-start-1 row-start-1 border-b-8" style="border-color: {{ hub.main_colour }}; background: linear-gradient(45deg, transparent 0%, transparent 92.4%, {{ hub.main_colour }} 92.5%, {{ hub.main_colour }} 100%);">
+            </div>
         </div>
+        <div class="flex items-center gap-4 mt-4">
+            {% image hub.main_icon original class="w-14 h-auto" %}
+            <h1 class="text-h3 font-semibold">
+                {{hub.title}} {{hub_text}}
+            </h1>
+        </div>
+        <div class="base-article-m">
+            {{hub.external_description_long|richtext}}
+        </div>
+        <p class="text-intro mt-auto">
+            {% include "ui/components/BaseLink.html" with linktext=learn_more_text linkurl=hub.url %}
+        </p>
     </div>
-    <div class="flex items-center gap-4 my-4">
-        {% image hub.main_icon original class="w-14 h-auto" %}
-        <h1 class="text-h3 font-semibold">
-            {{hub.title}} {{hub_text}}
-        </h1>
-    </div>
-    <div class="base-article my-4">
-        {{hub.external_description_long|richtext}}
-    </div>
-    <p class="text-intro">
-        {% include "ui/components/BaseLink.html" with linktext=learn_more_text linkurl=hub.url %}
-    </p>
-</div>
+{% endwith %}
\ No newline at end of file
diff --git a/app/ui/templates/ui/components/mapping_hub/MappingHubPreviewProjectsBlock.html b/app/ui/templates/ui/components/mapping_hub/MappingHubPreviewProjectsBlock.html
index 09b1450..c8932dd 100644
--- a/app/ui/templates/ui/components/mapping_hub/MappingHubPreviewProjectsBlock.html
+++ b/app/ui/templates/ui/components/mapping_hub/MappingHubPreviewProjectsBlock.html
@@ -4,6 +4,6 @@
 {% endcomment %}
 {% load wagtailimages_tags %}
 
-<a href="{{ hub_project.url }}" class="hover:underline">
+<a href="{% include 'ui/components/PageOrLinkHrefText.html' with linkurl=hub_project %}" class="hover:underline">
     {% include "./MappingHubPreviewBlockBase.html" with hub=hub_project.get_parent.specific %}
 </a>
diff --git a/app/ui/templates/ui/components/misc_panels/PagePreviewBasic.html b/app/ui/templates/ui/components/misc_panels/PagePreviewBasic.html
index 3c6429a..6a281db 100644
--- a/app/ui/templates/ui/components/misc_panels/PagePreviewBasic.html
+++ b/app/ui/templates/ui/components/misc_panels/PagePreviewBasic.html
@@ -6,14 +6,16 @@
 {% load wagtailimages_tags %}
 
 {% image image original as previmg %}
-<a href="{{page.url}}">
-    <div class="bg-gradient-to-t from-black to-transparent to-30% grid">
-        <div class="min-h-[20rem] bg-cover bg-no-repeat -z-10 relative row-start-1 col-start-1" style="background-image: url('{{previmg.url}}')">
+{% with page.localized as page %}
+    <a href="{{page.url}}">
+        <div class="bg-gradient-to-t from-black to-transparent to-30% grid">
+            <div class="min-h-[20rem] bg-cover bg-no-repeat -z-10 relative row-start-1 col-start-1" style="background-image: url('{{previmg.url}}')">
+            </div>
+            <div class="row-start-1 col-start-1 flex flex-col justify-end p-4">
+                <h1 class="font-semibold text-h2 text-white">
+                    {{page.title}}
+                </h1>
+            </div>
         </div>
-        <div class="row-start-1 col-start-1 flex flex-col justify-end p-4">
-            <h1 class="font-semibold text-h2 text-white">
-                {{page.title}}
-            </h1>
-        </div>
-    </div>
-</a>
\ No newline at end of file
+    </a>
+{% endwith %}
\ No newline at end of file
diff --git a/app/ui/templates/ui/components/misc_panels/PagePreviewWithTabletDescription.html b/app/ui/templates/ui/components/misc_panels/PagePreviewWithTabletDescription.html
index 4e62298..a3410b1 100644
--- a/app/ui/templates/ui/components/misc_panels/PagePreviewWithTabletDescription.html
+++ b/app/ui/templates/ui/components/misc_panels/PagePreviewWithTabletDescription.html
@@ -9,33 +9,35 @@
 {% load wagtailimages_tags %}
 
 {% image image original as previmg %}
-<a href="{{page.url}}">
-    <div class="bg-gradient-to-t from-black to-transparent to-30% grid lg:[&:hover_.hover-show]:pointer-events-auto lg:[&:hover_.hover-show]:opacity-100 w-full aspect-[3/2]">
-        <div class="min-h-[16rem] bg-cover bg-no-repeat -z-10 relative row-start-1 col-start-1" style="background-image: url('{{previmg.url}}')">
-        </div>
-        <div class="row-start-1 col-start-1 flex-col justify-end p-4 hidden lg:flex">
-            <h1 class="font-semibold text-h3 text-white">
-                {{page.title}}
-            </h1>
+{% with page.localized as page %}
+    <a href="{{page.url}}">
+        <div class="bg-gradient-to-t from-black to-transparent to-30% grid lg:[&:hover_.hover-show]:pointer-events-auto lg:[&:hover_.hover-show]:opacity-100 w-full aspect-[3/2]">
+            <div class="min-h-[16rem] bg-cover bg-no-repeat -z-10 relative row-start-1 col-start-1" style="background-image: url('{{previmg.url}}')">
+            </div>
+            <div class="row-start-1 col-start-1 flex-col justify-end p-4 hidden lg:flex">
+                <h1 class="font-semibold text-h3 text-white">
+                    {{page.title}}
+                </h1>
+            </div>
+            {% if not hoverless %}
+                <div class="hover-show row-start-1 col-start-1 opacity-0 pointer-events-none bg-hot-red text-white justify-center py-4 px-6 flex flex-col transition duration-100">
+                    <h2 class="text-h3 font-bold">{{page.title}}</h2>
+                    <div class="w-full aspect-[3/1] overflow-hidden">{{tablet_description|richtext}}</div>
+                    <p class="mt-4">
+                        {% include "ui/components/BaseLinkNoUnderlineWhite.html" with anchorless=True linktext=read_more_text whitearrow=True %}
+                    </p>
+                </div>
+            {% endif %}
         </div>
-        {% if not hoverless %}
-            <div class="hover-show row-start-1 col-start-1 opacity-0 pointer-events-none bg-hot-red text-white justify-center py-4 px-6 flex flex-col transition duration-100">
-                <h2 class="text-h3 font-bold">{{page.title}}</h2>
-                <div class="w-full aspect-[3/1] overflow-hidden">{{tablet_description|richtext}}</div>
-                <p class="mt-4">
-                    {% include "ui/components/BaseLinkNoUnderlineWhite.html" with anchorless=True linktext=read_more_text whitearrow=True %}
-                </p>
+        <div class="lg:hidden">
+            <h1 class="font-bold text-h3 my-2">{{page.title}}</h1>
+            <div class="my-2">
+                {{tablet_description|richtext}}
             </div>
-        {% endif %}
-    </div>
-    <div class="lg:hidden">
-        <h1 class="font-bold text-h3 my-2">{{page.title}}</h1>
-        <div class="my-2">
-            {{tablet_description|richtext}}
+            <p class="text-hot-red font-medium">
+                {{read_more_text}}
+                {% include "ui/components/icon_svgs/LinkCaret.html" with class="ml-2" %}
+            </p>
         </div>
-        <p class="text-hot-red font-medium">
-            {{read_more_text}}
-            {% include "ui/components/icon_svgs/LinkCaret.html" with class="ml-2" %}
-        </p>
-    </div>
-</a>
\ No newline at end of file
+    </a>
+{% endwith %}
\ No newline at end of file
diff --git a/app/ui/templates/ui/components/navigation/SearchForm.html b/app/ui/templates/ui/components/navigation/SearchForm.html
index f10fa9a..f88f0ef 100644
--- a/app/ui/templates/ui/components/navigation/SearchForm.html
+++ b/app/ui/templates/ui/components/navigation/SearchForm.html
@@ -14,6 +14,7 @@
             {% if has_ref %}
                 x-ref="searchforminput"
             {% endif %}
+            @input="makeLiveSearch($event.target.value); searchkeyword = $event.target.value;"
             placeholder="Search"
             role="combobox"
             aria-expanded="false"
diff --git a/app/ui/templates/ui/components/navigation/SearchModal.html b/app/ui/templates/ui/components/navigation/SearchModal.html
index 7e33674..b89111e 100644
--- a/app/ui/templates/ui/components/navigation/SearchModal.html
+++ b/app/ui/templates/ui/components/navigation/SearchModal.html
@@ -6,17 +6,57 @@
      @transitionend="if(isSearchClicked) $refs.searchforminput.focus(); $refs.searchforminput.value = ''"
      class="absolute"
      role="dialog"
-     aria-modal="true">
-    <div class="z-[100] top-0 left-0 absolute">
+     aria-modal="true"
+     style="--visible: none;"
+     >
+     {% comment %} the style alpine stuff is here to make it so the search bar doesn't appear for a split second upon loading the page {% endcomment %}
+    <div class="z-[100] top-0 left-0 absolute" style="display: var(--visible);" :style="isSearchClicked ? '--visible: block;' : '--visible: none;'">
         <!-- Background backdrop, show/hide based on modal state -->
         <div class="fixed inset-0 bg-transparent bg-opacity-20 backdrop-blur-sm transition-opacity"></div>
         <div class="fixed inset-0 z-10 w-screen overflow-y-auto p-4 sm:p-6 md:p-20 flex justify-center items-center bg-white/30">
             <!-- Command palette, show/hide based on modal state -->
-            <div @click.outside="isSearchClicked = false"
+            <div
+                @click.outside="isSearchClicked = false"
                 @keydown.escape.window="isSearchClicked = false"
-                class="max-w-xl w-full m-8 py-2 transform divide-y divide-gray-100 overflow-hidden rounded-xl bg-white shadow-2xl ring-1 ring-black ring-opacity-5 transition-all">
+                class="relative max-w-xl w-full m-8 py-2 transform rounded-xl bg-white shadow-2xl ring-1 ring-black ring-opacity-5 transition-all"
+            >
                 {% include "./SearchForm.html" with has_ref=True %}
+                <div class="absolute w-full py-8" x-show="searchkeyword">
+                    <ul id="result-container" class="[&_a:hover]:underline p-8 grid gap-6 max-h-48 overflow-y-scroll w-full rounded-xl bg-white shadow-2xl ring-1 ring-black ring-opacity-5">
+                    </ul>
+                </div>
             </div>
         </div>
     </div>
 </div>
+
+<script>
+    const makeLiveSearch = (keyword) => {
+        let params = new URLSearchParams();
+        params.set('keyword', keyword);
+        params.set('livesearch', true);
+
+        const apiUrl = '/search?' + params.toString();
+            fetch(apiUrl).then(response => {
+                if (response.ok)
+                    return response.json();
+                throw new Error("Failed to fetch search results.");
+            }).then(data => {
+                const container = document.getElementById('result-container');
+                container.innerHTML = '';
+                for (const item of data.results) {
+                    const element = `
+                        <li>
+                            <a href="${item.url}" class="">
+                                <h1 class="text-intro font-bold">${item.title}</h1>
+                                <p class="text-hot-red font-medium">${item.url}</p>
+                            </a>
+                        </li>
+                    `;
+                    const el = document.createElement('div');
+                    el.innerHTML = element;
+                    container.appendChild(el);
+                }
+            })
+    }
+</script>
\ No newline at end of file
diff --git a/app/ui/templates/ui/components/news/NewsPreviewBlockNews.html b/app/ui/templates/ui/components/news/NewsPreviewBlockNews.html
index 5d6ab03..474facf 100644
--- a/app/ui/templates/ui/components/news/NewsPreviewBlockNews.html
+++ b/app/ui/templates/ui/components/news/NewsPreviewBlockNews.html
@@ -4,26 +4,28 @@
 - readmoretext: a string; the text that should show for the "read more" button
 {% endcomment %}
 
-<div class="{{class}}">
-    <p>
-        <span class="text-small text-hot-dark-grey">
-            {{ news.date }}
-        </span>
-    </p>
+{% with news.localized as news %}
+    <div class="{{class}}">
+        <p>
+            <span class="text-small text-hot-dark-grey">
+                {{ news.date }}
+            </span>
+        </p>
 
-    <p class="text-h5 font-bold my-2">
-        {{ news.title }}
-    </p>
+        <p class="text-h5 font-bold my-2">
+            {{ news.title }}
+        </p>
 
-    <div class="[&_p]:max-h-20 [&_p]:text-ellipsis [&_p]:overflow-hidden [&_p]:text-small">
-        {{ news.intro|safe }}
-    </div>
+        <div class="[&_p]:max-h-20 [&_p]:text-ellipsis [&_p]:overflow-hidden [&_p]:text-small">
+            {{ news.intro|safe }}
+        </div>
 
-    <p class="mt-4 font-medium">
-        {% if readmoretext %}
-            {% include "ui/components/BaseLinkNoUnderline.html" with linkurl=news.url linktext=readmoretext %}
-        {% else %}
-            {% include "ui/components/BaseLinkNoUnderline.html" with linkurl=news.url linktext="Read More" %}
-        {% endif %}
-    </p>
-</div>
\ No newline at end of file
+        <p class="mt-4 font-medium">
+            {% if readmoretext %}
+                {% include "ui/components/BaseLinkNoUnderline.html" with linkurl=news linktext=readmoretext %}
+            {% else %}
+                {% include "ui/components/BaseLinkNoUnderline.html" with linkurl=news linktext="Read More" %}
+            {% endif %}
+        </p>
+    </div>
+{% endwith %}
\ No newline at end of file
diff --git a/app/ui/templates/ui/components/news/NewsPreviewBlockProjects.html b/app/ui/templates/ui/components/news/NewsPreviewBlockProjects.html
index b4fb544..83f1bab 100644
--- a/app/ui/templates/ui/components/news/NewsPreviewBlockProjects.html
+++ b/app/ui/templates/ui/components/news/NewsPreviewBlockProjects.html
@@ -6,36 +6,38 @@
 {% load wagtailcore_tags %}
 {% load wagtailimages_tags %}
 
-{% image news.image original as image_p %}
-<div class="{{class}} [&:hover_.hover-title]:text-hot-red">
-    <a href="{{ news.url }}">
-        {% if showimage %}
-            <div class="image-hide-small w-full min-h-[9rem] mb-3 content-end bg-no-repeat bg-cover bg-center image-overshadow-gradient aspect-[5/3]" style="background-image: url('{{ image_p.url }}')">
-                <div>
+{% with news.localized as news %}
+    {% image news.image original as image_p %}
+    <div class="{{class}} [&:hover_.hover-title]:text-hot-red">
+        <a href="{% include 'ui/components/PageOrLinkHrefText.html' with linkurl=news %}">
+            {% if showimage %}
+                <div class="image-hide-small w-full min-h-[9rem] mb-3 content-end bg-no-repeat bg-cover bg-center image-overshadow-gradient aspect-[5/3]" style="background-image: url('{{ image_p.url }}')">
+                    <div>
+                    </div>
                 </div>
-            </div>
-        {% endif %}
+            {% endif %}
 
-        <p class="text-hot-red text-small font-semibold">
-            {% for category in news.categories.all %}
-                {{category.category_name}}{% if not forloop.last %}, {% endif %}
-            {% endfor %}
-        </p>
+            <p class="text-hot-red text-small font-semibold">
+                {% for category in news.categories.all %}
+                    {{category.category_name}}{% if not forloop.last %}, {% endif %}
+                {% endfor %}
+            </p>
 
-        <hr class="my-2" />
+            <hr class="my-2" />
 
-        <p class="text-h5 font-bold my-2 hover-title">
-            {{ news.title }}
-        </p>
+            <p class="text-h5 font-bold my-2 hover-title">
+                {{ news.title }}
+            </p>
 
-        <div class="[&_p]:max-h-20 [&_p]:text-ellipsis [&_p]:overflow-hidden [&_p]:text-small">
-            {{ news.intro|richtext }}
-        </div>
+            <div class="[&_p]:max-h-20 [&_p]:text-ellipsis [&_p]:overflow-hidden [&_p]:text-small">
+                {{ news.intro|richtext }}
+            </div>
 
-        <p class="my-2">
-            <span class="text-small text-hot-dark-grey">
-                {{ news.date }}
-            </span>
-        </p>
-    </a>
-</div>
\ No newline at end of file
+            <p class="my-2">
+                <span class="text-small text-hot-dark-grey">
+                    {{ news.date }}
+                </span>
+            </p>
+        </a>
+    </div>
+{% endwith %}
\ No newline at end of file
diff --git a/app/ui/templates/ui/components/programs/ProgramPreviewBlockBase.html b/app/ui/templates/ui/components/programs/ProgramPreviewBlockBase.html
index f429526..e998e25 100644
--- a/app/ui/templates/ui/components/programs/ProgramPreviewBlockBase.html
+++ b/app/ui/templates/ui/components/programs/ProgramPreviewBlockBase.html
@@ -6,16 +6,18 @@
 {% load wagtailcore_tags %}
 {% load wagtailimages_tags %}
 
-<a href="{{ program.url }}">
-    <div class="w-full bg-no-repeat bg-cover aspect-[4/3] grid">
-        {% image program.header_image original class="h-full w-full object-cover object-center col-start-1 row-start-1" %}
-        <div class="bg-gradient-to-t from-black/90 to-black/15 w-full h-full flex items-end col-start-1 row-start-1">
-            <div class="text-white p-4 text-small">
-                <h1 class="text-h5 font-bold mb-2">
-                    {{ program.title }}
-                </h1>
-                {{ program.subtitle|richtext }}
+{% with program.localized as program %}
+    <a href="{% include 'ui/components/PageOrLinkHrefText.html' with linkurl=program %}">
+        <div class="w-full bg-no-repeat bg-cover aspect-[4/3] grid">
+            {% image program.header_image original class="h-full w-full object-cover object-center col-start-1 row-start-1" %}
+            <div class="bg-gradient-to-t from-black/90 to-black/15 w-full h-full flex items-end col-start-1 row-start-1">
+                <div class="text-white p-4 text-small">
+                    <h1 class="text-h5 font-bold mb-2">
+                        {{ program.title }}
+                    </h1>
+                    {{ program.subtitle|richtext }}
+                </div>
             </div>
         </div>
-    </div>
-</a>
+    </a>
+{% endwith %}
\ No newline at end of file
diff --git a/app/ui/templates/ui/components/projects/ProjectPreviewBlockMapHub.html b/app/ui/templates/ui/components/projects/ProjectPreviewBlockMapHub.html
index be402b2..debb17a 100644
--- a/app/ui/templates/ui/components/projects/ProjectPreviewBlockMapHub.html
+++ b/app/ui/templates/ui/components/projects/ProjectPreviewBlockMapHub.html
@@ -6,31 +6,33 @@
 
 {% load wagtailimages_tags %}
 
-{% image project.header_image original as image_p %}
-<div class="font-medium {{class}}">
-    <a href="{{ project.url }}" class="[&:hover_.project-preview-title]:underline">
-        <div>
-            {% if showimage %}
-                <div class="w-full min-h-[9rem] mb-3 image-overshadow-gradient">
-                    {% image project.header_image original class="aspect-[5/3] object-cover object-center" %}
-                </div>
-            {% endif %}
+{% with project.localized as project %}
+    {% image project.header_image original as image_p %}
+    <div class="font-medium {{class}}">
+        <a href="{% include 'ui/components/PageOrLinkHrefText.html' with linkurl=project %}" class="[&:hover_.project-preview-title]:underline">
+            <div>
+                {% if showimage %}
+                    <div class="w-full min-h-[9rem] mb-3 image-overshadow-gradient">
+                        {% image project.header_image original class="aspect-[5/3] object-cover object-center" %}
+                    </div>
+                {% endif %}
 
-            <p class="text-mini">
-                <span class="text-hot-dark-grey">
-                    {{ project.location }}
-                </span>
-            </p>
-            
-            <p class="my-1 project-preview-title">
-                {{ project.title }}
-            </p>
-        </div>
-    </a>
+                <p class="text-mini">
+                    <span class="text-hot-dark-grey">
+                        {{ project.location }}
+                    </span>
+                </p>
+                
+                <p class="my-1 project-preview-title">
+                    {{ project.title }}
+                </p>
+            </div>
+        </a>
 
-    <p class="text-mini">
-        {% for hub in project.region_hub_list %}
-            <a class="text-hot-red text-mini hover:underline" href="{{ hub.value.url }}">{{ hub.value.title }}</a>{% if not forloop.last %},{% endif %}
-        {% endfor %}
-    </p>
-</div>
\ No newline at end of file
+        <p class="text-mini">
+            {% for hub in project.region_hub_list %}
+                <a class="text-hot-red text-mini hover:underline" href="{{ hub.value.localized.url }}">{{ hub.value.title }}</a>{% if not forloop.last %},{% endif %}
+            {% endfor %}
+        </p>
+    </div>
+{% endwith %}
\ No newline at end of file
diff --git a/app/ui/templates/ui/components/projects/ProjectPreviewBlockNews.html b/app/ui/templates/ui/components/projects/ProjectPreviewBlockNews.html
index c2068fd..e53c8d3 100644
--- a/app/ui/templates/ui/components/projects/ProjectPreviewBlockNews.html
+++ b/app/ui/templates/ui/components/projects/ProjectPreviewBlockNews.html
@@ -6,33 +6,35 @@
 
 {% load wagtailimages_tags %}
 
-{% image project.header_image original as image_p %}
-<div class="font-medium {{class}}">
-    <a href="{{ project.url }}" class="[&:hover_.project-preview-title]:underline">
-        <div>
-            {% if showimage %}
-                <div class="w-full min-h-[9rem] mb-3 image-overshadow-gradient">
-                    {% image project.header_image original class="aspect-[5/3] object-cover object-center" %}
-                </div>
-            {% endif %}
+{% with project.localized as project %}
+    {% image project.header_image original as image_p %}
+    <div class="font-medium {{class}}">
+        <a href="{% include 'ui/components/PageOrLinkHrefText.html' with linkurl=project %}" class="[&:hover_.project-preview-title]:underline">
+            <div>
+                {% if showimage %}
+                    <div class="w-full min-h-[9rem] mb-3 image-overshadow-gradient">
+                        {% image project.header_image original class="aspect-[5/3] object-cover object-center" %}
+                    </div>
+                {% endif %}
 
-            <p class="text-mini">
-                <span class="text-hot-dark-grey">
-                    {{ project.location }}
-                </span>
-            </p>
-            
-            <p class="my-1 project-preview-title">
-                {{ project.title }}
-            </p>
-        </div>
-    </a>
+                <p class="text-mini">
+                    <span class="text-hot-dark-grey">
+                        {{ project.location }}
+                    </span>
+                </p>
+                
+                <p class="my-1 project-preview-title">
+                    {{ project.title }}
+                </p>
+            </div>
+        </a>
 
-    <div class="text-mini my-2">
-        {% for area in project.impact_area_list %}
-            <p>
-                <a class="text-hot-red text-mini hover:underline" href="{{ area.value.url }}">{{ area.value.title }}</a>{% if not forloop.last %},{% endif %}
-            </p>
-        {% endfor %}
+        <div class="text-mini my-2">
+            {% for area in project.impact_area_list %}
+                <p>
+                    <a class="text-hot-red text-mini hover:underline" href="{{ area.value.localized.url }}">{{ area.value.title }}</a>{% if not forloop.last %},{% endif %}
+                </p>
+            {% endfor %}
+        </div>
     </div>
-</div>
\ No newline at end of file
+{% endwith%}
\ No newline at end of file
diff --git a/app/ui/templates/ui/components/sections/BaseSectionWithImage.html b/app/ui/templates/ui/components/sections/BaseSectionWithImage.html
index bdf060d..e5fdb42 100644
--- a/app/ui/templates/ui/components/sections/BaseSectionWithImage.html
+++ b/app/ui/templates/ui/components/sections/BaseSectionWithImage.html
@@ -48,6 +48,15 @@
                     </a>
                 {% endif %}
             {% endif %}
+            {% if linklist %}
+                <div class="flex flex-wrap gap-4 gap-x-8 mt-4">
+                    {% for link in linklist %}
+                        <p class="text-intro">
+                            {% include "ui/components/BaseLink.html" with linkurl=link.value.linkurl linktext=link.value.linktext %}
+                        </p>
+                    {% endfor %}
+                </div>
+            {% endif %}
         </div>
     </div>
 </div>
\ No newline at end of file
diff --git a/app/ui/templates/ui/components/utilities/FormAppliedSuffix.html b/app/ui/templates/ui/components/utilities/FormAppliedSuffix.html
new file mode 100644
index 0000000..6c35e26
--- /dev/null
+++ b/app/ui/templates/ui/components/utilities/FormAppliedSuffix.html
@@ -0,0 +1 @@
+<span x-text="getActive('{{key}}') > 0 ? ' - ' + getActive('{{key}}') + ` {{applied_text}}` : ''"></span>
\ No newline at end of file
diff --git a/app/ui/templates/ui/components/utilities/FormGetActiveXData.js b/app/ui/templates/ui/components/utilities/FormGetActiveXData.js
new file mode 100644
index 0000000..f89755a
--- /dev/null
+++ b/app/ui/templates/ui/components/utilities/FormGetActiveXData.js
@@ -0,0 +1 @@
+getActive(x) { let count = 0; for (const e of this.activeParams) { if(e[0].includes(x) && e[1] == 'on') count++; }; return count; }
\ No newline at end of file
diff --git a/app/volunteer_opportunities/migrations/0008_alter_individualvolunteeropportunitypage_article_body.py b/app/volunteer_opportunities/migrations/0008_alter_individualvolunteeropportunitypage_article_body.py
new file mode 100644
index 0000000..b015273
--- /dev/null
+++ b/app/volunteer_opportunities/migrations/0008_alter_individualvolunteeropportunitypage_article_body.py
@@ -0,0 +1,19 @@
+# Generated by Django 4.2.7 on 2024-10-21 21:37
+
+from django.db import migrations
+import wagtail.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('volunteer_opportunities', '0007_alter_volunteeropportunityownerpage_aside_block_link_and_more'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='individualvolunteeropportunitypage',
+            name='article_body',
+            field=wagtail.fields.StreamField([('text_block', 0)], blank=True, block_lookup={0: ('wagtail.blocks.RichTextBlock', (), {'features': ['h2', 'h3', 'h4', 'bold', 'italic', 'link', 'ol', 'ul', 'hr', 'document-link', 'image', 'embed', 'code', 'blockquote']})}, null=True),
+        ),
+    ]
diff --git a/app/volunteer_opportunities/models.py b/app/volunteer_opportunities/models.py
index 8375420..499f9b9 100644
--- a/app/volunteer_opportunities/models.py
+++ b/app/volunteer_opportunities/models.py
@@ -121,7 +121,7 @@ class IndividualVolunteerOpportunityPage(Page):
     intro = RichTextField(blank=True)
     article_body = StreamField([
         ('text_block', RichTextBlock(features=[
-        'h1', 'h2', 'h3', 'h4', 'bold', 'italic', 'link', 'ol', 'ul', 'hr', 'document-link', 'image', 'embed', 'code', 'blockquote'
+        'h2', 'h3', 'h4', 'bold', 'italic', 'link', 'ol', 'ul', 'hr', 'document-link', 'image', 'embed', 'code', 'blockquote'
         ]))
     ], use_json_field=True, null=True, blank=True)
 
diff --git a/home/templates/home/components/MappingHubsPanel.html b/home/templates/home/components/MappingHubsPanel.html
index 9e3c016..a188661 100644
--- a/home/templates/home/components/MappingHubsPanel.html
+++ b/home/templates/home/components/MappingHubsPanel.html
@@ -26,7 +26,7 @@
         </div>
         {% for hub in mapping_hubs %}
             <div :class="selIndex == {{forloop.counter}} ? '' : 'invisible'" class="row-start-1 col-start-1 text-white lg:grid lg:grid-cols-3 md:block hidden" style="background-color: {{hub.main_colour}}">
-                {% image hub.header_image original as hub_image %}
+                {% image hub.hub_portrait_image original as hub_image %}
                 <div class="hidden lg:block bg-no-repeat bg-cover bg-center" style="background-image: url('{{hub_image.url}}')">
                 </div>
                 <div class="col-span-2 p-10 flex flex-col h-full">
diff --git a/home/templates/home/components/StatBlock.html b/home/templates/home/components/StatBlock.html
index 2e9ded3..a160034 100644
--- a/home/templates/home/components/StatBlock.html
+++ b/home/templates/home/components/StatBlock.html
@@ -5,8 +5,8 @@
     <div class="flex justify-center gap-1 flex-wrap">
         <p x-text="`{{stat}}`"></p>
         {% if tooltiptext %}
-            <div class="relative" @click.away="open = false">
-                <p class="cursor-pointer" @click="open = !open">ⓘ</p>
+            <div class="relative" @mouseover.away="open = false">
+                <p class="cursor-pointer" @mouseover="open = !open">ⓘ</p>
                 <div class="absolute show-at-hover" :class="open ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none'">
                     <p class="relative bg-white text-black shadow-md p-4 w-48">
                         {{tooltiptext}}
diff --git a/hot_osm/static/css/hot_osm.css b/hot_osm/static/css/hot_osm.css
index ab220a1..8e152b6 100644
--- a/hot_osm/static/css/hot_osm.css
+++ b/hot_osm/static/css/hot_osm.css
@@ -67,22 +67,22 @@
 
 .base-article h1,
 .base-article-m h1 {
-    font-size: var(--font-size-h2);
+    font-size: var(--font-size-h1);
 }
 
 .base-article h2,
 .base-article-m h2 {
-    font-size: var(--font-size-h3);
+    font-size: var(--font-size-h2);
 }
 
 .base-article h3,
 .base-article-m h3 {
-    font-size: var(--font-size-h4);
+    font-size: var(--font-size-h3);
 }
 
 .base-article h4,
 .base-article-m h4 {
-    font-size: var(--font-size-h5);
+    font-size: var(--font-size-h4);
 }
 
 .base-article h1,
diff --git a/hot_osm/templates/base.html b/hot_osm/templates/base.html
index 7e15e04..837c3ea 100644
--- a/hot_osm/templates/base.html
+++ b/hot_osm/templates/base.html
@@ -43,11 +43,13 @@
         <script defer
                 src="https://cdn.jsdelivr.net/npm/alpinejs@3.13.3/dist/cdn.min.js"></script>
         <script src="https://unpkg.com/htmx.org@1.9.12" integrity="sha384-ujb1lZYygJmzgSwoxRggbCHcjc0rB2XoQrxeTUQyRjrOnlCoYta87iKBWq3EsdM2" crossorigin="anonymous"></script>
+        {% include "components/global_scripts/ExternalLinkScript.html" %}
         {% block extra_head %}
         {% endblock %}
     </head>
     <body class="min-h-screen {% block body_class %}{% endblock body_class %}">
-        <div x-data="{ isMenuOpen: false, isSearchClicked: false, isLandingPage: false, setIsLandingPage(x) {this.isLandingPage = x} }">
+        <div x-data="{ isMenuOpen: false, isSearchClicked: false, searchkeyword: '', isLandingPage: false, setIsLandingPage(x) {this.isLandingPage = x}, test: false }" :style="test ? '--font-size-intro: 1.33rem;' : ''">
+            <p class="cursor-pointer" @click="test = !test">im the testing button for intro size</p>
             {% include "ui/components/navigation/UpperHeaderNavbar.html" %}
             <div class="relative">
                 {% comment %} {% include "components/header/header.html" %} {% endcomment %}
diff --git a/hot_osm/templates/components/global_scripts/ExternalLinkScript.html b/hot_osm/templates/components/global_scripts/ExternalLinkScript.html
new file mode 100644
index 0000000..7431965
--- /dev/null
+++ b/hot_osm/templates/components/global_scripts/ExternalLinkScript.html
@@ -0,0 +1,13 @@
+<script>
+    window.addEventListener("DOMContentLoaded", e =>
+    {
+        document.querySelectorAll('a[href]').forEach(a =>
+        {
+            if (location.hostname == new URL(a.href).hostname)
+                return;
+
+            a.target = "_blank";
+            a.rel = "noreferrer nofollow noopener";
+        });
+    });
+</script>
\ No newline at end of file
diff --git a/poetry.lock b/poetry.lock
index ba2b6b8..9281a54 100644
--- a/poetry.lock
+++ b/poetry.lock
@@ -1545,6 +1545,21 @@ development = ["beautifulsoup4 (>=4.8,<4.10)", "coverage (>=4.5)", "django-debug
 docs = ["Sphinx (>=1.7.4)", "pyenchant (>=2.0)", "sphinx-rtd-theme (>=0.3)", "sphinxcontrib-spelling (>=1.4)"]
 testing = ["beautifulsoup4 (>=4.8,<4.10)", "coverage (>=4.5)", "django-webtest (>=1.9,<1.10)"]
 
+[[package]]
+name = "wand"
+version = "0.6.13"
+description = "Ctypes-based simple MagickWand API binding for Python"
+optional = false
+python-versions = "*"
+files = [
+    {file = "Wand-0.6.13-py2.py3-none-any.whl", hash = "sha256:e5dda0ac2204a40c29ef5c4cb310770c95d3d05c37b1379e69c94ea79d7d19c0"},
+    {file = "Wand-0.6.13.tar.gz", hash = "sha256:f5013484eaf7a20eb22d1821aaefe60b50cc329722372b5f8565d46d4aaafcca"},
+]
+
+[package.extras]
+doc = ["Sphinx (>=5.3.0)"]
+test = ["pytest (>=7.2.0)"]
+
 [[package]]
 name = "websocket-client"
 version = "1.6.4"
@@ -1604,4 +1619,4 @@ wand = ["Wand (>=0.6,<1.0)"]
 [metadata]
 lock-version = "2.0"
 python-versions = "^3.11"
-content-hash = "cc69a531e28c25ab60f9c82a128adffdc0fe3a8c7acb8de298de064805340f53"
+content-hash = "a569c04df411a5ee5f1b591f20db37f424aed873a633aae447765ffc7f72bc7d"
diff --git a/pyproject.toml b/pyproject.toml
index ad6c90e..b3ab5e6 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -38,6 +38,7 @@ whitenoise = "^6.6.0"
 django-storages = "^1.14.3"
 boto3 = "^1.34.129"
 wagtailgeowidget = "^8.1.1"
+wand = "^0.6.13"
 
 [tool.poetry.dev-dependencies]
 

From 4e331fc6e0ad5552d4eb3a7ddf06383626aa7549 Mon Sep 17 00:00:00 2001
From: luminaryFlowers <71102109+luminaryFlowers@users.noreply.github.com>
Date: Mon, 4 Nov 2024 16:58:36 -0800
Subject: [PATCH 13/15] our approach, program pages

---
 app/misc/migrations/0037_ourapproachpage.py   |  29 +++++
 ...rapproachpage_what_we_do_items_and_more.py |  24 ++++
 ..._alter_ourapproachpage_what_we_do_items.py |  19 +++
 ...ourapproachpage_black_box_link_and_more.py |  74 ++++++++++++
 .../0041_ourapproachpage_hot_envisions_bg.py  |  20 +++
 ...approachpage_our_toolbox_items_and_more.py |  24 ++++
 app/misc/models.py                            |  86 +++++++++++++
 .../components/OurApproachHotEnvisions.html   |  34 ++++++
 .../misc/components/OurApproachScript.html    |  15 +++
 .../components/OurApproachWhatHappens.html    |  93 ++++++++++++++
 .../OurApproachWhatHappensMobile.html         |  19 +++
 .../OurApproachWhatHappensMobileTopic.html    |  14 +++
 .../misc/components/OurApproachWhatWeDo.html  |  51 ++++++++
 .../components/OurApproachWhatWeDoMobile.html |  44 +++++++
 .../templates/misc/our_approach_page.html     |  61 ++++++++++
 ...ndividualprogrampage_program_start_date.py |  20 +++
 ..._programownerpage_header_image_and_more.py |  55 +++++++++
 ...mownerpage_black_box_link_text_and_more.py |  44 +++++++
 app/programs/models.py                        | 114 +++++++++++++++---
 .../components/ProgramSortOption.html         |   4 +
 .../programs/program_owner_page.html          |  89 ++++++++++++++
 .../icon_svgs/DoubleDownChevron.html          |   6 +
 .../templates/who_we_are/who_we_are_page.html |   2 +-
 hot_osm/static/css/hot_osm.css                |  72 +++++++++++
 24 files changed, 994 insertions(+), 19 deletions(-)
 create mode 100644 app/misc/migrations/0037_ourapproachpage.py
 create mode 100644 app/misc/migrations/0038_ourapproachpage_what_we_do_items_and_more.py
 create mode 100644 app/misc/migrations/0039_alter_ourapproachpage_what_we_do_items.py
 create mode 100644 app/misc/migrations/0040_ourapproachpage_black_box_link_and_more.py
 create mode 100644 app/misc/migrations/0041_ourapproachpage_hot_envisions_bg.py
 create mode 100644 app/misc/migrations/0042_alter_ourapproachpage_our_toolbox_items_and_more.py
 create mode 100644 app/misc/templates/misc/components/OurApproachHotEnvisions.html
 create mode 100644 app/misc/templates/misc/components/OurApproachScript.html
 create mode 100644 app/misc/templates/misc/components/OurApproachWhatHappens.html
 create mode 100644 app/misc/templates/misc/components/OurApproachWhatHappensMobile.html
 create mode 100644 app/misc/templates/misc/components/OurApproachWhatHappensMobileTopic.html
 create mode 100644 app/misc/templates/misc/components/OurApproachWhatWeDo.html
 create mode 100644 app/misc/templates/misc/components/OurApproachWhatWeDoMobile.html
 create mode 100644 app/misc/templates/misc/our_approach_page.html
 create mode 100644 app/programs/migrations/0014_individualprogrampage_program_start_date.py
 create mode 100644 app/programs/migrations/0015_programownerpage_header_image_and_more.py
 create mode 100644 app/programs/migrations/0016_programownerpage_black_box_link_text_and_more.py
 create mode 100644 app/programs/templates/programs/components/ProgramSortOption.html
 create mode 100644 app/programs/templates/programs/program_owner_page.html
 create mode 100644 app/ui/templates/ui/components/icon_svgs/DoubleDownChevron.html

diff --git a/app/misc/migrations/0037_ourapproachpage.py b/app/misc/migrations/0037_ourapproachpage.py
new file mode 100644
index 0000000..b5c38cb
--- /dev/null
+++ b/app/misc/migrations/0037_ourapproachpage.py
@@ -0,0 +1,29 @@
+# Generated by Django 4.2.7 on 2024-10-29 16:49
+
+from django.db import migrations, models
+import django.db.models.deletion
+import wagtail.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('wagtailcore', '0094_alter_page_locale'),
+        ('wagtailimages', '0026_delete_uploadedimage'),
+        ('misc', '0036_generalpolicyownerpage_and_more'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='OurApproachPage',
+            fields=[
+                ('page_ptr', models.OneToOneField(auto_created=True, on_delete=django.db.models.deletion.CASCADE, parent_link=True, primary_key=True, serialize=False, to='wagtailcore.page')),
+                ('intro', wagtail.fields.RichTextField(blank=True)),
+                ('banner_image', models.ForeignKey(blank=True, help_text='Header image', null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='+', to='wagtailimages.image')),
+            ],
+            options={
+                'abstract': False,
+            },
+            bases=('wagtailcore.page',),
+        ),
+    ]
diff --git a/app/misc/migrations/0038_ourapproachpage_what_we_do_items_and_more.py b/app/misc/migrations/0038_ourapproachpage_what_we_do_items_and_more.py
new file mode 100644
index 0000000..c574000
--- /dev/null
+++ b/app/misc/migrations/0038_ourapproachpage_what_we_do_items_and_more.py
@@ -0,0 +1,24 @@
+# Generated by Django 4.2.7 on 2024-10-29 18:58
+
+from django.db import migrations, models
+import wagtail.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('misc', '0037_ourapproachpage'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='ourapproachpage',
+            name='what_we_do_items',
+            field=wagtail.fields.StreamField([('item', 0)], blank=True, block_lookup={0: ('wagtail.blocks.CharBlock', (), {})}),
+        ),
+        migrations.AddField(
+            model_name='ourapproachpage',
+            name='what_we_do_title',
+            field=models.CharField(default='What We Do'),
+        ),
+    ]
diff --git a/app/misc/migrations/0039_alter_ourapproachpage_what_we_do_items.py b/app/misc/migrations/0039_alter_ourapproachpage_what_we_do_items.py
new file mode 100644
index 0000000..c2fc2a7
--- /dev/null
+++ b/app/misc/migrations/0039_alter_ourapproachpage_what_we_do_items.py
@@ -0,0 +1,19 @@
+# Generated by Django 4.2.7 on 2024-10-29 18:58
+
+from django.db import migrations
+import wagtail.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('misc', '0038_ourapproachpage_what_we_do_items_and_more'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='ourapproachpage',
+            name='what_we_do_items',
+            field=wagtail.fields.StreamField([('item', 0)], blank=True, block_lookup={0: ('wagtail.blocks.CharBlock', (), {'max_num': 3, 'min_num': 3})}),
+        ),
+    ]
diff --git a/app/misc/migrations/0040_ourapproachpage_black_box_link_and_more.py b/app/misc/migrations/0040_ourapproachpage_black_box_link_and_more.py
new file mode 100644
index 0000000..23a133a
--- /dev/null
+++ b/app/misc/migrations/0040_ourapproachpage_black_box_link_and_more.py
@@ -0,0 +1,74 @@
+# Generated by Django 4.2.7 on 2024-10-29 19:43
+
+from django.db import migrations, models
+import wagtail.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('misc', '0039_alter_ourapproachpage_what_we_do_items'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='ourapproachpage',
+            name='black_box_link',
+            field=wagtail.fields.StreamField([('page', 0), ('url', 1), ('document', 2), ('other', 3)], blank=True, block_lookup={0: ('wagtail.blocks.PageChooserBlock', (), {}), 1: ('wagtail.blocks.URLBlock', (), {}), 2: ('wagtail.documents.blocks.DocumentChooserBlock', (), {}), 3: ('wagtail.blocks.CharBlock', (), {'help_text': "Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."})}),
+        ),
+        migrations.AddField(
+            model_name='ourapproachpage',
+            name='black_box_link_text',
+            field=models.CharField(default='Partner With Us'),
+        ),
+        migrations.AddField(
+            model_name='ourapproachpage',
+            name='black_box_title',
+            field=models.CharField(default='Partner with us to create and use open map data'),
+        ),
+        migrations.AddField(
+            model_name='ourapproachpage',
+            name='hot_envisions_items',
+            field=wagtail.fields.StreamField([('item', 0)], blank=True, block_lookup={0: ('wagtail.blocks.CharBlock', (), {'max_num': 3, 'min_num': 3})}),
+        ),
+        migrations.AddField(
+            model_name='ourapproachpage',
+            name='hot_envisions_title',
+            field=models.CharField(default='HOT Envisions a World in Which...'),
+        ),
+        migrations.AddField(
+            model_name='ourapproachpage',
+            name='our_toolbox_items',
+            field=wagtail.fields.StreamField([('block', 2)], blank=True, block_lookup={0: ('wagtail.images.blocks.ImageChooserBlock', (), {}), 1: ('wagtail.blocks.CharBlock', (), {}), 2: ('wagtail.blocks.StructBlock', [[('icon', 0), ('text', 1)]], {})}),
+        ),
+        migrations.AddField(
+            model_name='ourapproachpage',
+            name='our_toolbox_title',
+            field=models.CharField(default='Our Toolbox'),
+        ),
+        migrations.AddField(
+            model_name='ourapproachpage',
+            name='red_box_link',
+            field=wagtail.fields.StreamField([('page', 0), ('url', 1), ('document', 2), ('other', 3)], blank=True, block_lookup={0: ('wagtail.blocks.PageChooserBlock', (), {}), 1: ('wagtail.blocks.URLBlock', (), {}), 2: ('wagtail.documents.blocks.DocumentChooserBlock', (), {}), 3: ('wagtail.blocks.CharBlock', (), {'help_text': "Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."})}),
+        ),
+        migrations.AddField(
+            model_name='ourapproachpage',
+            name='red_box_link_text',
+            field=models.CharField(default='Get Involved'),
+        ),
+        migrations.AddField(
+            model_name='ourapproachpage',
+            name='red_box_title',
+            field=models.CharField(default='Check out the many opportunities to get involved with HOT'),
+        ),
+        migrations.AddField(
+            model_name='ourapproachpage',
+            name='what_happens_items',
+            field=wagtail.fields.StreamField([('block', 2)], blank=True, block_lookup={0: ('wagtail.images.blocks.ImageChooserBlock', (), {}), 1: ('wagtail.blocks.CharBlock', (), {}), 2: ('wagtail.blocks.StructBlock', [[('icon', 0), ('text', 1)]], {})}),
+        ),
+        migrations.AddField(
+            model_name='ourapproachpage',
+            name='what_happens_title',
+            field=models.CharField(default='What Happens Because of Our Work'),
+        ),
+    ]
diff --git a/app/misc/migrations/0041_ourapproachpage_hot_envisions_bg.py b/app/misc/migrations/0041_ourapproachpage_hot_envisions_bg.py
new file mode 100644
index 0000000..2c51947
--- /dev/null
+++ b/app/misc/migrations/0041_ourapproachpage_hot_envisions_bg.py
@@ -0,0 +1,20 @@
+# Generated by Django 4.2.7 on 2024-10-29 23:43
+
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('wagtailimages', '0026_delete_uploadedimage'),
+        ('misc', '0040_ourapproachpage_black_box_link_and_more'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='ourapproachpage',
+            name='hot_envisions_bg',
+            field=models.ForeignKey(blank=True, null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='+', to='wagtailimages.image'),
+        ),
+    ]
diff --git a/app/misc/migrations/0042_alter_ourapproachpage_our_toolbox_items_and_more.py b/app/misc/migrations/0042_alter_ourapproachpage_our_toolbox_items_and_more.py
new file mode 100644
index 0000000..6c0d0e1
--- /dev/null
+++ b/app/misc/migrations/0042_alter_ourapproachpage_our_toolbox_items_and_more.py
@@ -0,0 +1,24 @@
+# Generated by Django 4.2.7 on 2024-11-04 20:03
+
+from django.db import migrations
+import wagtail.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('misc', '0041_ourapproachpage_hot_envisions_bg'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='ourapproachpage',
+            name='our_toolbox_items',
+            field=wagtail.fields.StreamField([('block', 2)], blank=True, block_lookup={0: ('wagtail.images.blocks.ImageChooserBlock', (), {}), 1: ('wagtail.blocks.CharBlock', (), {}), 2: ('wagtail.blocks.StructBlock', [[('icon', 0), ('text', 1)]], {'max_num': 6, 'min_num': 6})}),
+        ),
+        migrations.AlterField(
+            model_name='ourapproachpage',
+            name='what_happens_items',
+            field=wagtail.fields.StreamField([('block', 2)], blank=True, block_lookup={0: ('wagtail.images.blocks.ImageChooserBlock', (), {}), 1: ('wagtail.blocks.CharBlock', (), {}), 2: ('wagtail.blocks.StructBlock', [[('icon', 0), ('text', 1)]], {'max_num': 4, 'min_num': 4})}),
+        ),
+    ]
diff --git a/app/misc/models.py b/app/misc/models.py
index 38a9ac9..f918aa5 100644
--- a/app/misc/models.py
+++ b/app/misc/models.py
@@ -728,3 +728,89 @@ class MultimediaPage(Page):
             FieldPanel('license_block'),
         ], heading="License"),
     ]
+
+
+class OurApproachPage(Page):
+    max_count = 1
+
+    banner_image = models.ForeignKey(
+        "wagtailimages.Image",
+        null=True,
+        blank=True,
+        on_delete=models.SET_NULL,
+        related_name="+",
+        help_text="Header image"
+    )
+    intro = RichTextField(blank=True)
+
+    what_we_do_title = models.CharField(default="What We Do")
+    what_we_do_items = StreamField([
+        ('item', CharBlock(min_num=3, max_num=3))
+    ], use_json_field=True, blank=True)
+
+    our_toolbox_title = models.CharField(default="Our Toolbox")
+    our_toolbox_items = StreamField([
+        ('block', StructBlock([
+            ('icon', ImageChooserBlock()),
+            ('text', CharBlock()),
+        ], min_num=6, max_num=6))
+    ], use_json_field=True, blank=True)
+
+    what_happens_title = models.CharField(default="What Happens Because of Our Work")
+    what_happens_items = StreamField([
+        ('block', StructBlock([
+            ('icon', ImageChooserBlock()),
+            ('text', CharBlock()),
+        ], min_num=4, max_num=4))
+    ], use_json_field=True, blank=True)
+
+    hot_envisions_title = models.CharField(default="HOT Envisions a World in Which...")
+    hot_envisions_bg = models.ForeignKey(
+        "wagtailimages.Image",
+        null=True,
+        blank=True,
+        on_delete=models.SET_NULL,
+        related_name="+",
+    )
+    hot_envisions_items = StreamField([
+        ('item', CharBlock(min_num=3, max_num=3))
+    ], use_json_field=True, blank=True)
+
+    red_box_title = models.CharField(default="Check out the many opportunities to get involved with HOT")
+    red_box_link_text = models.CharField(default="Get Involved")
+    red_box_link = StreamField(LinkOrPageBlock(), use_json_field=True, blank=True)
+    black_box_title = models.CharField(default="Partner with us to create and use open map data")
+    black_box_link_text = models.CharField(default="Partner With Us")
+    black_box_link = StreamField(LinkOrPageBlock(), use_json_field=True, blank=True)
+
+    content_panels = Page.content_panels + [
+        MultiFieldPanel([
+            FieldPanel('banner_image'),
+            FieldPanel('intro'),
+        ], heading="Banner"),
+        MultiFieldPanel([
+            FieldPanel('what_we_do_title'),
+            FieldPanel('what_we_do_items'),
+        ], heading="What We Do"),
+        MultiFieldPanel([
+            FieldPanel('our_toolbox_title'),
+            FieldPanel('our_toolbox_items'),
+        ], heading="Our Toolbox"),
+        MultiFieldPanel([
+            FieldPanel('what_happens_title'),
+            FieldPanel('what_happens_items'),
+        ], heading="What Happens"),
+        MultiFieldPanel([
+            FieldPanel('hot_envisions_title'),
+            FieldPanel('hot_envisions_bg'),
+            FieldPanel('hot_envisions_items'),
+        ], heading="HOT Envisions"),
+        MultiFieldPanel([
+            FieldPanel('red_box_title'),
+            FieldPanel('red_box_link_text'),
+            FieldPanel('red_box_link'),
+            FieldPanel('black_box_title'),
+            FieldPanel('black_box_link_text'),
+            FieldPanel('black_box_link'),
+        ], heading="Dogear Boxes"),
+    ]
\ No newline at end of file
diff --git a/app/misc/templates/misc/components/OurApproachHotEnvisions.html b/app/misc/templates/misc/components/OurApproachHotEnvisions.html
new file mode 100644
index 0000000..9fd8023
--- /dev/null
+++ b/app/misc/templates/misc/components/OurApproachHotEnvisions.html
@@ -0,0 +1,34 @@
+<div class="w-full hidden md:block max-w-5xl">
+    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="auto" viewBox="0 250 1052 150" class="[&>foreignObject>p]:text-[1.25rem]">
+        <foreignObject width="322px" height="1px" transform="translate(0 332.215)" class="overflow-visible relative flex items-center">
+            <p class="text-center text-intro-svg font-medium">{{page.hot_envisions_items.0.value}}</p>
+        </foreignObject>
+        <foreignObject width="322px" height="1px" transform="translate(364 332.215)" class="overflow-visible relative flex items-center">
+            <p class="text-center text-intro-svg font-medium">{{page.hot_envisions_items.1.value}}</p>
+        </foreignObject>
+        <foreignObject width="322px" height="1px" transform="translate(730 332.215)" class="overflow-visible relative flex items-center">
+            <p class="text-center text-intro-svg font-medium">{{page.hot_envisions_items.2.value}}</p>
+        </foreignObject>
+        <path id="Path_13438" data-name="Path 13438" d="M9479.991,20082.322l-565.975,276.045-91.038,44.4" transform="matrix(0.899, 0.438, -0.438, 0.899, 1173.542, -21916.111)" fill="none" stroke="#c4c4c4" stroke-width="3" stroke-dasharray="5 8"/>
+        <circle id="Ellipse_336" data-name="Ellipse 336" cx="12.5" cy="12.5" r="12.5" transform="translate(148 277.215)" fill="#d43f3f"/>
+        <circle id="Ellipse_337" data-name="Ellipse 337" cx="12.5" cy="12.5" r="12.5" transform="translate(513 277.215)" fill="#d43f3f"/>
+        <circle id="Ellipse_338" data-name="Ellipse 338" cx="12.5" cy="12.5" r="12.5" transform="translate(879 277.215)" fill="#d43f3f"/>
+    </svg>
+</div>
+<div class="w-full md:hidden flex flex-col text-left mt-8">
+    {% for item in page.hot_envisions_items %}
+        <div class="flex flex-row [&:last-child_.oa-list-dotted-side]:min-h-0 [&:last-child_.oa-list-dotted-owner]:hidden">
+            <div class="w-4 min-h-16 oa-list-dotted-side flex flex-col">
+                <div class="bg-hot-red w-4 h-4 rounded-full">&nbsp;</div>
+                <div class="flex flex-col items-center grow oa-list-dotted-owner">
+                    <div class="flex-grow border-l-2 oa-list-dotted w-0 pb-8">&nbsp;</div>
+                </div>
+            </div>
+            <div class="flex-grow">
+                <p class="text-intro font-medium ml-4 -mt-1">
+                    {{item.value}}
+                </p>
+            </div>
+        </div>
+    {% endfor %}
+</div>
\ No newline at end of file
diff --git a/app/misc/templates/misc/components/OurApproachScript.html b/app/misc/templates/misc/components/OurApproachScript.html
new file mode 100644
index 0000000..88f796c
--- /dev/null
+++ b/app/misc/templates/misc/components/OurApproachScript.html
@@ -0,0 +1,15 @@
+<script defer>
+    const observer = new IntersectionObserver((entries) => {
+        entries.forEach((entry) => {
+            if (entry.isIntersecting) {
+                entry.target.classList.add('oa-make-visible');
+            }
+        });
+    });
+
+    const elements = document.getElementsByClassName('oa-wh-topic');
+    console.log(elements)
+    for(const element of elements) {
+        observer.observe(element)
+    }
+</script>
\ No newline at end of file
diff --git a/app/misc/templates/misc/components/OurApproachWhatHappens.html b/app/misc/templates/misc/components/OurApproachWhatHappens.html
new file mode 100644
index 0000000..dfd0e2c
--- /dev/null
+++ b/app/misc/templates/misc/components/OurApproachWhatHappens.html
@@ -0,0 +1,93 @@
+{% load wagtailimages_tags %}
+
+<div class="hidden md:block">
+    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="auto" viewBox="13 0 1052 699">
+        <foreignObject width="270px" height="1px" transform="translate(30 499)" class="overflow-visible relative flex items-center">
+            <p class="text-center text-intro font-medium">{{page.what_happens_items.0.value.text}}</p>
+        </foreignObject>
+        <foreignObject width="270px" height="1px" transform="translate(218 619)" class="overflow-visible relative flex items-center">
+            <p class="text-center text-intro font-medium">{{page.what_happens_items.1.value.text}}</p>
+        </foreignObject>
+        <foreignObject width="270px" height="1px" transform="translate(545 619)" class="overflow-visible relative flex items-center">
+            <p class="text-center text-intro font-medium">{{page.what_happens_items.2.value.text}}</p>
+        </foreignObject>
+        <foreignObject width="270px" height="1px" transform="translate(763 499)" class="overflow-visible relative flex items-center">
+            <p class="text-center text-intro font-medium">{{page.what_happens_items.3.value.text}}</p>
+        </foreignObject>
+        
+        <ellipse id="Ellipse_323" data-name="Ellipse 323" cx="199.5" cy="200" rx="199.5" ry="200" transform="translate(726) rotate(90)" fill="#f0efef"/>
+        <foreignObject transform="translate(377 125)" width="295px" height="1px" class="overflow-visible relative flex items-center">
+            <div class="text-center flex items-center justify-center">
+                <p class="text-h1 font-bold">
+                    {{page.what_happens_title}}
+                </p>
+            </div>
+        </foreignObject>
+        <path id="Path_13401" data-name="Path 13401" d="M8910,20330l-62.183,75" transform="translate(-13727.506 -16665.02) rotate(-16)" fill="none" stroke="#c4c4c4" stroke-width="3" stroke-dasharray="5 8"/>
+        <path id="Path_13400" data-name="Path 13400" d="M8979.016,20330,8828,20406.5" transform="translate(-13938.332 -16758.848) rotate(-16)" fill="none" stroke="#c4c4c4" stroke-width="3" stroke-dasharray="5 8"/>
+        <g id="Mask_Group_12" data-name="Mask Group 12" transform="translate(-179 -1479)" style="clip-path: ellipse(500px 150px at 225px 480px);">
+            <g id="Ellipse_322" data-name="Ellipse 322" transform="translate(950.531 1426.865) rotate(90)" fill="none" stroke="#c4c4c4" stroke-width="3" stroke-dasharray="5 8">
+            <circle cx="245.266" cy="245.266" r="245.266" stroke="none"/>
+            <circle cx="245.266" cy="245.266" r="243.766" fill="none"/>
+            </g>
+        </g>
+        <circle id="Ellipse_325" data-name="Ellipse 325" cx="12.5" cy="12.5" r="12.5" transform="translate(423 411.891) rotate(-16)" fill="#d43f3f"/>
+        <g id="Group_35418" data-name="Group 35418" transform="translate(-687.787 -1585.92) rotate(-16)">
+            <circle id="Ellipse_324" data-name="Ellipse 324" cx="12.5" cy="12.5" r="12.5" transform="translate(425 2070)" fill="#d43f3f"/>
+        </g>
+        <g id="Group_35411" data-name="Group 35411" transform="translate(-609.414 -1658.072) rotate(-16)">
+            <circle id="Ellipse_329" data-name="Ellipse 329" cx="42.5" cy="42.5" r="42.5" transform="translate(128 2174)" fill="#d43f3f"/>
+        </g>
+        <g id="Group_35412" data-name="Group 35412" transform="translate(-390.414 -1538.072) rotate(-16)">
+            <circle id="Ellipse_329-2" data-name="Ellipse 329" cx="42.5" cy="42.5" r="42.5" transform="translate(128 2174)" fill="#d43f3f"/>
+        </g>
+        <path id="Path_13435" data-name="Path 13435" d="M62.184,75,0,0" transform="translate(652.044 510.738) rotate(-164)" fill="none" stroke="#c4c4c4" stroke-width="3" stroke-dasharray="5 8"/>
+        <path id="Path_13433" data-name="Path 13433" d="M151.015,76.5,0,0" transform="translate(883.758 423.813) rotate(-164)" fill="none" stroke="#c4c4c4" stroke-width="3" stroke-dasharray="5 8"/>
+        <g id="Group_35462" data-name="Group 35462" transform="translate(758.03 310.778) rotate(-164)">
+            <circle id="Ellipse_324-2" data-name="Ellipse 324" cx="12.5" cy="12.5" r="12.5" transform="translate(0 0)" fill="#d43f3f"/>
+        </g>
+        <g id="Group_35413" data-name="Group 35413" transform="translate(-102.414 -1538.072) rotate(-16)">
+            <circle id="Ellipse_329-3" data-name="Ellipse 329" cx="42.5" cy="42.5" r="42.5" transform="translate(128 2174)" fill="#d43f3f"/>
+        </g>
+        <circle id="Ellipse_326" data-name="Ellipse 326" cx="12.5" cy="12.5" r="12.5" transform="translate(597.871 411.891) rotate(-16)" fill="#d43f3f"/>
+        <g id="Group_35467" data-name="Group 35467" transform="translate(109.723 -1658.072) rotate(-16)">
+            <circle id="Ellipse_329-4" data-name="Ellipse 329" cx="42.5" cy="42.5" r="42.5" transform="translate(128 2174)" fill="#d43f3f"/>
+        </g>
+        <g id="Group_35507" data-name="Group 35507" transform="translate(143 400.568)">
+            <g id="Group_35506" data-name="Group 35506">
+                <foreignObject width="50px" height="50px">
+                    <div class="flex items-center justify-center w-full h-full">
+                        {% image page.what_happens_items.0.value.icon original class="w-auto h-12" %}
+                    </div>
+                </foreignObject>
+            </g>
+        </g>
+        <g id="Group_35509" data-name="Group 35509" transform="translate(360 518.717)">
+            <g id="Group_35508" data-name="Group 35508">
+                <foreignObject width="50px" height="50px">
+                    <div class="flex items-center justify-center w-full h-full">
+                        {% image page.what_happens_items.1.value.icon original class="w-auto h-12" %}
+                    </div>
+                </foreignObject>
+            </g>
+        </g>
+        <g id="Group_35511" data-name="Group 35511" transform="translate(646.782 518.717)">
+            <g id="Group_35510" data-name="Group 35510">
+                <foreignObject width="50px" height="50px">
+                    <div class="flex items-center justify-center w-full h-full">
+                        {% image page.what_happens_items.2.value.icon original class="w-auto h-12" %}
+                    </div>
+                </foreignObject>
+            </g>
+        </g>
+        <g id="Group_35513" data-name="Group 35513" transform="translate(860 403)">
+            <g id="Group_35512" data-name="Group 35512">
+                <foreignObject width="50px" height="50px">
+                    <div class="flex items-center justify-center w-full h-full">
+                        {% image page.what_happens_items.3.value.icon original class="w-auto h-12" %}
+                    </div>
+                </foreignObject>
+            </g>
+        </g>
+    </svg>
+</div>
\ No newline at end of file
diff --git a/app/misc/templates/misc/components/OurApproachWhatHappensMobile.html b/app/misc/templates/misc/components/OurApproachWhatHappensMobile.html
new file mode 100644
index 0000000..c855ccf
--- /dev/null
+++ b/app/misc/templates/misc/components/OurApproachWhatHappensMobile.html
@@ -0,0 +1,19 @@
+<div class="md:hidden max-w-lg mx-auto">
+    <div class="bg-hot-off-white rounded-full w-full aspect-square p-8 text-center grid mb-10">
+        <div class="col-start-1 row-start-1 flex items-center justify-center">
+            <h2 class="text-h3 font-bold max-w-sm">
+                {{page.what_happens_title}}
+            </h2>
+        </div>
+        <div class="col-start-1 row-start-1 w-full flex justify-center items-end text-hot-red text-h2">
+            {% include "ui/components/icon_svgs/DoubleDownChevron.html" %}
+        </div>
+    </div>
+
+    <div class="grid gap-8">
+        {% include "./OurApproachWhatHappensMobileTopic.html" with topic=page.what_happens_items.0.value %}
+        {% include "./OurApproachWhatHappensMobileTopic.html" with topic=page.what_happens_items.1.value %}
+        {% include "./OurApproachWhatHappensMobileTopic.html" with topic=page.what_happens_items.2.value %}
+        {% include "./OurApproachWhatHappensMobileTopic.html" with topic=page.what_happens_items.3.value %}
+    </div>
+</div>
\ No newline at end of file
diff --git a/app/misc/templates/misc/components/OurApproachWhatHappensMobileTopic.html b/app/misc/templates/misc/components/OurApproachWhatHappensMobileTopic.html
new file mode 100644
index 0000000..4c445b1
--- /dev/null
+++ b/app/misc/templates/misc/components/OurApproachWhatHappensMobileTopic.html
@@ -0,0 +1,14 @@
+{% load wagtailimages_tags %}
+
+<div class="oa-wh-topic">
+    <div class="flex gap-4 items-center">
+        <div class="w-16 h-16 aspect-square bg-hot-red rounded-full flex justify-center items-center">
+            {% image topic.icon original class="h-10 w-auto" %}
+        </div>
+        <p class="text-left text-intro font-medium flex-grow">{{topic.text}}</p>
+    </div>
+
+    <div class="flex justify-center text-h2 mt-8 oa-wh-topic-chevron">
+        {% include "ui/components/icon_svgs/DoubleDownChevron.html" with class="text-hot-off-white" %}
+    </div>
+</div>
\ No newline at end of file
diff --git a/app/misc/templates/misc/components/OurApproachWhatWeDo.html b/app/misc/templates/misc/components/OurApproachWhatWeDo.html
new file mode 100644
index 0000000..9ddbca7
--- /dev/null
+++ b/app/misc/templates/misc/components/OurApproachWhatWeDo.html
@@ -0,0 +1,51 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="auto" viewBox="0 0 1068 400" class="hidden md:block">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectangle_17322" data-name="Rectangle 17322" width="68" height="366" transform="translate(507 619)" fill="#fff" stroke="#707070" stroke-width="1"/>
+    </clipPath>
+  </defs>
+  <g id="Mask_Group_10" data-name="Mask Group 10" transform="translate(-71 -602)" clip-path="url(#clip-path)">
+    <g id="Ellipse_321" data-name="Ellipse 321" transform="translate(-33 506)" fill="none" stroke="#c4c4c4" stroke-width="3" stroke-dasharray="5 8">
+      <circle cx="294" cy="294" r="294" stroke="none"/>
+      <circle cx="294" cy="294" r="292.5" fill="none"/>
+    </g>
+  </g>
+  <g id="Group_35403" data-name="Group 35403" transform="translate(407.477 19)">
+    <rect id="Rectangle_17318" data-name="Rectangle 17318" width="67" height="67" rx="33.5" transform="translate(-0.477)" fill="#d43f3f"/>
+    <text id="_1" data-name="1" transform="translate(23.523 43)" fill="#fff" font-size="31" font-family="inherit" font-weight="700"><tspan x="0" y="0">1</tspan></text>
+  </g>
+  <text id="Co-create_open_map_data_with_communities" data-name="{{page.what_we_do_items.0.value}}" transform="translate(504 41)" font-size="20" font-family="inherit" font-weight="500"><tspan x="0" y="18">{{page.what_we_do_items.0.value}}</tspan></text>
+  <g id="Group_35402" data-name="Group 35402" transform="translate(449.477 166.162)">
+    <rect id="Rectangle_17320" data-name="Rectangle 17320" width="67" height="67" rx="33.5" transform="translate(-0.477 -0.162)" fill="#d43f3f"/>
+    <text id="_2" data-name="2" transform="translate(23.523 43.838)" fill="#fff" font-size="31" font-family="inherit" font-weight="700"><tspan x="0" y="0">2</tspan></text>
+  </g>
+  <text id="Connect_a_wide_network_of_partners_to_use_open_map_data" data-name="{{page.what_we_do_items.1.value}}" transform="translate(546 189)" font-size="20" font-family="inherit" font-weight="500"><tspan x="0" y="18">{{page.what_we_do_items.1.value}}</tspan></text>
+  <g id="Group_35405" data-name="Group 35405" transform="translate(407.477 313.477)">
+    <rect id="Rectangle_17319" data-name="Rectangle 17319" width="67" height="67" rx="33.5" transform="translate(-0.477 -0.477)" fill="#d43f3f"/>
+    <text id="_3" data-name="3" transform="translate(23.523 43.523)" fill="#fff" font-size="31" font-family="inherit" font-weight="700"><tspan x="0" y="0">3</tspan></text>
+  </g>
+  <text id="Develop_accessible_open-source_mapping_products" data-name="{{page.what_we_do_items.2.value}}" transform="translate(504 333)" font-size="20" font-family="inherit" font-weight="500"><tspan x="0" y="18">{{page.what_we_do_items.2.value}}</tspan></text>
+  <ellipse id="Ellipse_320" data-name="Ellipse 320" cx="199.5" cy="200" rx="199.5" ry="200" fill="#f0efef"/>
+  <text id="What_We_Do" data-name="What We Do" transform="translate(79 182)" font-size="38" font-family="inherit" font-weight="700" text-anchor="middle"><tspan x="125" y="33">What We Do</tspan></text>
+  <g id="Mask_Group_13" data-name="Mask Group 13" transform="translate(-71 -602)" clip-path="url(#clip-path)">
+    <g id="Ellipse_360" data-name="Ellipse 360" transform="translate(-33 506)" fill="none" stroke="#c4c4c4" stroke-width="3" stroke-dasharray="5 8">
+      <circle cx="294" cy="294" r="294" stroke="none"/>
+      <circle cx="294" cy="294" r="292.5" fill="none"/>
+    </g>
+  </g>
+  <g id="Group_35525" data-name="Group 35525" transform="translate(407.477 19)">
+    <rect id="Rectangle_17318-2" data-name="Rectangle 17318" width="67" height="67" rx="33.5" transform="translate(-0.477)" fill="#d43f3f"/>
+    <text id="_1-2" data-name="1" transform="translate(23.523 43)" fill="#fff" font-size="31" font-family="inherit" font-weight="700"><tspan x="0" y="0">1</tspan></text>
+  </g>
+  <text id="Co-create_open_map_data_with_communities-2" data-name="Co-create open map data with communities" transform="translate(504 41)" font-size="20" font-family="inherit" font-weight="500"></text>
+  <g id="Group_35526" data-name="Group 35526" transform="translate(449.477 166.162)">
+    <rect id="Rectangle_17320-2" data-name="Rectangle 17320" width="67" height="67" rx="33.5" transform="translate(-0.477 -0.162)" fill="#d43f3f"/>
+    <text id="_2-2" data-name="2" transform="translate(23.523 43.838)" fill="#fff" font-size="31" font-family="inherit" font-weight="700"><tspan x="0" y="0">2</tspan></text>
+  </g>
+  <text id="Connect_a_wide_network_of_partners_to_use_open_map_data-2" data-name="Connect a wide network of partners to use open map data" transform="translate(546 189)" font-size="20" font-family="inherit" font-weight="500"></text>
+  <g id="Group_35527" data-name="Group 35527" transform="translate(407.477 313.477)">
+    <rect id="Rectangle_17319-2" data-name="Rectangle 17319" width="67" height="67" rx="33.5" transform="translate(-0.477 -0.477)" fill="#d43f3f"/>
+    <text id="_3-2" data-name="3" transform="translate(23.523 43.523)" fill="#fff" font-size="31" font-family="inherit" font-weight="700"><tspan x="0" y="0">3</tspan></text>
+  </g>
+  <text id="Develop_accessible_open-source_mapping_products-2" data-name="Develop accessible open-source mapping products" transform="translate(504 333)" font-size="20" font-family="inherit" font-weight="500"></text>
+</svg>
diff --git a/app/misc/templates/misc/components/OurApproachWhatWeDoMobile.html b/app/misc/templates/misc/components/OurApproachWhatWeDoMobile.html
new file mode 100644
index 0000000..179b27a
--- /dev/null
+++ b/app/misc/templates/misc/components/OurApproachWhatWeDoMobile.html
@@ -0,0 +1,44 @@
+<div class="md:hidden max-w-lg mx-auto" x-data="{ selected: 1 }">
+    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="auto" viewBox="0 0 350 450">
+        <defs>
+            <clipPath id="clip-path">
+                <rect id="Rectangle_17435" data-name="Rectangle 17435" width="68" height="318" transform="translate(507 619)" fill="#fff" stroke="#707070" stroke-width="1"/>
+                <circle width="40%" height="40%" />
+            </clipPath>
+        </defs>
+        <circle id="Ellipse_320" data-name="Ellipse 320" cx="175" cy="175" r="175" fill="#f0efef"/>
+        <text id="What_We_Do" data-name="What We Do" transform="translate(54 157)" font-size="32" font-family="inherit" font-weight="700"><tspan x="29.352" y="28">What We Do</tspan></text>
+        <g id="Mask_Group_13" data-name="Mask Group 13" transform="translate(954 -140) rotate(90)" clip-path="url(#clip-path)" style="clip-path: ellipse(500px 150px);">
+            <g id="Ellipse_360" data-name="Ellipse 360" transform="translate(-33 521)" fill="none" stroke="#c4c4c4" stroke-width="3" stroke-dasharray="5 8">
+                <ellipse cx="294" cy="255" rx="294" ry="255" stroke="none"/>
+                <ellipse cx="294" cy="255" rx="292.5" ry="253.5" fill="none"/>
+            </g>
+        </g>
+        <g id="Component_267_1" data-name="Component 267 – 1" transform="translate(1 334)" @click="selected = 1" class="cursor-pointer transition" :class="selected == 1 ? 'fill-hot-red text-white' : 'fill-hot-off-white'">
+            <rect id="Rectangle_17318" data-name="Rectangle 17318" width="67" height="67" rx="33.5" fill="inherit"/>
+            <text id="_1" data-name="1" transform="translate(24 43)" fill="#fff" font-size="31" font-family="inherit" font-weight="700" :class="selected == 1 ? 'fill-white' : 'fill-black'"><tspan x="0" y="0">1</tspan></text>
+        </g>
+        <g id="Component_265_1" data-name="Component 265 – 1" transform="translate(143 381)" @click="selected = 2" class="cursor-pointer transition" :class="selected == 2 ? 'fill-hot-red text-white' : 'fill-hot-off-white'">
+            <rect id="Rectangle_17320" data-name="Rectangle 17320" width="67" height="67" rx="33.5" fill="inherit"/>
+            <text id="_2" data-name="2" transform="translate(24 44)" font-size="31" font-family="inherit" font-weight="700" :class="selected == 2 ? 'fill-white' : 'fill-black'"><tspan x="0" y="0">2</tspan></text>
+        </g>
+        <g id="Component_266_1" data-name="Component 266 – 1" transform="translate(283 334)" @click="selected = 3" class="cursor-pointer transition" :class="selected == 3 ? 'fill-hot-red text-white' : 'fill-hot-off-white'">
+            <rect id="Rectangle_17319" data-name="Rectangle 17319" width="67" height="67" rx="33.5" fill="inherit"/>
+            <text id="_3" data-name="3" transform="translate(24 44)" font-size="31" font-family="inherit" font-weight="700" :class="selected == 3 ? 'fill-white' : 'fill-black'"><tspan x="0" y="0">3</tspan></text>
+        </g>
+    </svg>
+    
+    <div class="grid text-center mt-10 text-intro font-medium">
+        <p class="col-start-1 row-start-1" :class="selected == 1 ? '' : 'hidden'">
+            {{page.what_we_do_items.0.value}}
+        </p>
+        
+        <p class="col-start-1 row-start-1" :class="selected == 2 ? '' : 'hidden'">
+            {{page.what_we_do_items.1.value}}
+        </p>
+
+        <p class="col-start-1 row-start-1" :class="selected == 3 ? '' : 'hidden'">
+            {{page.what_we_do_items.2.value}}
+        </p>
+    </div>
+</div>
\ No newline at end of file
diff --git a/app/misc/templates/misc/our_approach_page.html b/app/misc/templates/misc/our_approach_page.html
new file mode 100644
index 0000000..7973b88
--- /dev/null
+++ b/app/misc/templates/misc/our_approach_page.html
@@ -0,0 +1,61 @@
+{% extends "base.html" %}
+{% load static %}
+{% load wagtailcore_tags %}
+{% load wagtailimages_tags %}
+{% load compress %}
+{% block body_class %}template-ourapproachpage{% endblock %}
+{% block extra_css %}
+    {% compress css %}
+    {% endcompress css %}
+{% endblock extra_css %}
+
+{% block content %}
+    {% include "ui/components/PageHeaderWithBlur.html" with title=page.title image=page.banner_image subtitle=page.intro %}
+
+    <div class="max-w-7xl mx-auto">
+        <div class="px-6 md:px-10">
+            <div class="mt-10 mb-20 max-w-5xl mx-auto">
+                {% include "./components/OurApproachWhatWeDo.html" %}
+                {% include "./components/OurApproachWhatWeDoMobile.html" %}
+            </div>
+
+            <div class="my-20">
+                <h2 class="text-h2 font-bold text-center">{{page.our_toolbox_title}}</h2>
+                <div class="mt-8 grid md:grid-cols-3 lg:grid-cols-6 oa-wave-grid-items">
+                    {% for item in page.our_toolbox_items %}
+                        <div class="oa-wave-grid-item flex flex-col items-center w-full text-center gap-4 p-6">
+                            {% image item.value.icon original class="w-auto h-12" %}
+                            <p class="text-intro font-medium">{{item.value.text}}</p>
+                        </div>
+                    {% endfor %}
+                </div>
+            </div>
+
+            <div class="my-20 max-w-5xl mx-auto">
+                {% include "./components/OurApproachWhatHappens.html" %}
+                {% include "./components/OurApproachWhatHappensMobile.html" %}
+            </div>
+
+            <div class="my-20 bg-hot-off-white grid">
+                {% image page.hot_envisions_bg original as hot_envisions_bg %}
+                <div class="col-start-1 row-start-1 bg-no-repeat bg-cover px-8 py-16 flex flex-col items-center text-center" style="background-image: url('{{hot_envisions_bg.url}}')">
+                    <p class="text-h2 font-bold">
+                        {{page.hot_envisions_title}}
+                    </p>
+                    {% include "./components/OurApproachHotEnvisions.html" %}
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-8 text-white mt-10 mb-20">
+                <div>
+                    {% include "ui/components/dogear_boxes/DogearRed.html" with title=page.red_box_title linktext=page.red_box_link_text linkurl=page.red_box_link %}
+                </div>
+                <div>
+                    {% include "ui/components/dogear_boxes/DogearBlack.html" with title=page.black_box_title linktext=page.black_box_link_text linkurl=page.black_box_link %}
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    {% include "./components/OurApproachScript.html" %}
+{% endblock %}
diff --git a/app/programs/migrations/0014_individualprogrampage_program_start_date.py b/app/programs/migrations/0014_individualprogrampage_program_start_date.py
new file mode 100644
index 0000000..605cdc2
--- /dev/null
+++ b/app/programs/migrations/0014_individualprogrampage_program_start_date.py
@@ -0,0 +1,20 @@
+# Generated by Django 4.2.7 on 2024-11-04 23:12
+
+from django.db import migrations, models
+import django.utils.timezone
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('programs', '0013_alter_programownerpage_bottom_banner_link_url_and_more'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='individualprogrampage',
+            name='program_start_date',
+            field=models.DateField(default=django.utils.timezone.now, help_text='This is not shown on the program page itself, and is basically just used for sorting on the program owner page.'),
+            preserve_default=False,
+        ),
+    ]
diff --git a/app/programs/migrations/0015_programownerpage_header_image_and_more.py b/app/programs/migrations/0015_programownerpage_header_image_and_more.py
new file mode 100644
index 0000000..af3c3e6
--- /dev/null
+++ b/app/programs/migrations/0015_programownerpage_header_image_and_more.py
@@ -0,0 +1,55 @@
+# Generated by Django 4.2.7 on 2024-11-04 23:37
+
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('wagtailimages', '0026_delete_uploadedimage'),
+        ('programs', '0014_individualprogrampage_program_start_date'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='programownerpage',
+            name='header_image',
+            field=models.ForeignKey(blank=True, help_text='Header image', null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='+', to='wagtailimages.image'),
+        ),
+        migrations.AddField(
+            model_name='programownerpage',
+            name='keyword_search_hint',
+            field=models.CharField(default='Search by keyword'),
+        ),
+        migrations.AddField(
+            model_name='programownerpage',
+            name='remove_filters_text',
+            field=models.CharField(default='Reset Filters'),
+        ),
+        migrations.AddField(
+            model_name='programownerpage',
+            name='search_button_text',
+            field=models.CharField(default='Apply Filters'),
+        ),
+        migrations.AddField(
+            model_name='programownerpage',
+            name='sort_by_new',
+            field=models.CharField(default='Sort by New'),
+        ),
+        migrations.AddField(
+            model_name='programownerpage',
+            name='sort_by_old',
+            field=models.CharField(default='Sort by Old'),
+        ),
+        migrations.AddField(
+            model_name='programownerpage',
+            name='sort_by_titlea',
+            field=models.CharField(default='Sort by Title Alphabetical'),
+        ),
+        migrations.AddField(
+            model_name='programownerpage',
+            name='sort_by_titlez',
+            field=models.CharField(default='Sort by Title Reverse Alphabetical'),
+        ),
+    ]
diff --git a/app/programs/migrations/0016_programownerpage_black_box_link_text_and_more.py b/app/programs/migrations/0016_programownerpage_black_box_link_text_and_more.py
new file mode 100644
index 0000000..652dd46
--- /dev/null
+++ b/app/programs/migrations/0016_programownerpage_black_box_link_text_and_more.py
@@ -0,0 +1,44 @@
+# Generated by Django 4.2.7 on 2024-11-04 23:49
+
+from django.db import migrations, models
+import wagtail.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('programs', '0015_programownerpage_header_image_and_more'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='programownerpage',
+            name='black_box_link_text',
+            field=models.CharField(default='Get involved'),
+        ),
+        migrations.AddField(
+            model_name='programownerpage',
+            name='black_box_link_url',
+            field=wagtail.fields.StreamField([('page', 0), ('url', 1), ('document', 2), ('other', 3)], blank=True, block_lookup={0: ('wagtail.blocks.PageChooserBlock', (), {}), 1: ('wagtail.blocks.URLBlock', (), {}), 2: ('wagtail.documents.blocks.DocumentChooserBlock', (), {}), 3: ('wagtail.blocks.CharBlock', (), {'help_text': "Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."})}),
+        ),
+        migrations.AddField(
+            model_name='programownerpage',
+            name='black_box_title',
+            field=models.CharField(default='See the many ways to get involved with HOT and open mapping'),
+        ),
+        migrations.AddField(
+            model_name='programownerpage',
+            name='red_box_link_text',
+            field=models.CharField(default='Explore projects'),
+        ),
+        migrations.AddField(
+            model_name='programownerpage',
+            name='red_box_link_url',
+            field=wagtail.fields.StreamField([('page', 0), ('url', 1), ('document', 2), ('other', 3)], blank=True, block_lookup={0: ('wagtail.blocks.PageChooserBlock', (), {}), 1: ('wagtail.blocks.URLBlock', (), {}), 2: ('wagtail.documents.blocks.DocumentChooserBlock', (), {}), 3: ('wagtail.blocks.CharBlock', (), {'help_text': "Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."})}),
+        ),
+        migrations.AddField(
+            model_name='programownerpage',
+            name='red_box_title',
+            field=models.CharField(default='See all of HOT’s projects'),
+        ),
+    ]
diff --git a/app/programs/models.py b/app/programs/models.py
index 04189aa..a8fb7f8 100644
--- a/app/programs/models.py
+++ b/app/programs/models.py
@@ -1,6 +1,8 @@
 from django import forms
 from django.db import models
 from django.core.exceptions import ValidationError
+from django.db.models import Q
+from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger
 
 from wagtail.models import Page
 from wagtail.fields import RichTextField, StreamField
@@ -35,12 +37,63 @@ class ProgramGoalBlock(StreamBlock):
 
 
 class ProgramOwnerPage(Page):
+    def get_context(self, request, *args, **kwargs):
+        context = super().get_context(request, *args, **kwargs)
+
+        base_locale = context['page'].get_translation(1).locale
+
+        keyword = request.GET.get('keyword', '')
+        programs = IndividualProgramPage.objects.live().filter(locale=base_locale)
+        
+        if keyword:
+            programs = programs.search(keyword).get_queryset()
+
+        match request.GET.get('sort', ''):
+            case 'sort.new':
+                programs = programs.order_by('-program_start_date')
+            case 'sort.old':
+                programs = programs.order_by('program_start_date')
+            case 'sort.titlea':
+                programs = programs.order_by('title')
+            case 'sort.titlez':
+                programs = programs.order_by('-title')
+            case _:
+                programs = programs.order_by('-program_start_date')
+        
+        context['programs'] = programs
+        return context
+
     max_count = 1
 
     subpage_types = [
         'programs.IndividualProgramPage'
     ]
-    
+
+    header_image = models.ForeignKey(
+        "wagtailimages.Image",
+        null=True,
+        blank=True,
+        on_delete=models.SET_NULL,
+        related_name="+",
+        help_text="Header image"
+    )
+
+    keyword_search_hint = models.CharField(default="Search by keyword")
+    sort_by_new = models.CharField(default="Sort by New")
+    sort_by_old = models.CharField(default="Sort by Old")
+    sort_by_titlea = models.CharField(default="Sort by Title Alphabetical")
+    sort_by_titlez = models.CharField(default="Sort by Title Reverse Alphabetical")
+    search_button_text = models.CharField(default="Apply Filters")
+    remove_filters_text = models.CharField(default="Reset Filters")
+
+    red_box_title = models.CharField(default="See all of HOT’s projects")
+    red_box_link_text = models.CharField(default="Explore projects")
+    red_box_link_url = StreamField(LinkOrPageBlock(), use_json_field=True, blank=True)
+    black_box_title = models.CharField(default="See the many ways to get involved with HOT and open mapping")
+    black_box_link_text = models.CharField(default="Get involved")
+    black_box_link_url = StreamField(LinkOrPageBlock(), use_json_field=True, blank=True)
+
+    # v individual program page stuff v
     stats_title = models.CharField(default="Stats")
     goals_title = models.CharField(default="Goals")
     projects_title = models.CharField(default="Projects")
@@ -58,26 +111,46 @@ class ProgramOwnerPage(Page):
     bottom_banner_url_text = models.CharField(default="Get Involved with HOT")
 
     content_panels = Page.content_panels + [
+        FieldPanel('header_image'),
         MultiFieldPanel([
-            FieldPanel("stats_title"),
-            FieldPanel("goals_title"),
-            FieldPanel("projects_title"),
-        ], heading="Various Section Titles"),
-        MultiFieldPanel([
-            FieldPanel("partners_title"),
-            FieldPanel("view_all_partners_title"),
-            FieldPanel("view_all_partners_link_url"),
-        ], heading="Partners"),
+            FieldPanel('keyword_search_hint'),
+            FieldPanel('sort_by_new'),
+            FieldPanel('sort_by_old'),
+            FieldPanel('sort_by_titlea'),
+            FieldPanel('sort_by_titlez'),
+            FieldPanel('search_button_text'),
+            FieldPanel('remove_filters_text'),
+        ], heading="Filtering"),
         MultiFieldPanel([
-            FieldPanel("more_programs_title"),
-            FieldPanel("view_all_programs_title"),
-            FieldPanel("view_all_programs_link_url"),
-        ], heading="Programs"),
+            FieldPanel('red_box_title'),
+            FieldPanel('red_box_link_text'),
+            FieldPanel('red_box_link_url'),
+            FieldPanel('black_box_title'),
+            FieldPanel('black_box_link_text'),
+            FieldPanel('black_box_link_url'),
+        ], heading="Dogear Boxes"),
         MultiFieldPanel([
-            FieldPanel('bottom_banner_text'),
-            FieldPanel('bottom_banner_link_url'),
-            FieldPanel('bottom_banner_url_text'),
-        ]),
+            MultiFieldPanel([
+                FieldPanel("stats_title"),
+                FieldPanel("goals_title"),
+                FieldPanel("projects_title"),
+            ], heading="Various Section Titles"),
+            MultiFieldPanel([
+                FieldPanel("partners_title"),
+                FieldPanel("view_all_partners_title"),
+                FieldPanel("view_all_partners_link_url"),
+            ], heading="Partners"),
+            MultiFieldPanel([
+                FieldPanel("more_programs_title"),
+                FieldPanel("view_all_programs_title"),
+                FieldPanel("view_all_programs_link_url"),
+            ], heading="Programs"),
+            MultiFieldPanel([
+                FieldPanel('bottom_banner_text'),
+                FieldPanel('bottom_banner_link_url'),
+                FieldPanel('bottom_banner_url_text'),
+            ]),
+        ], heading="Individual Program Page Shared Fields"),
     ]
 
 
@@ -123,6 +196,8 @@ def get_context(self, request):
         ('program_page', PageChooserBlock(page_type="programs.IndividualProgramPage"))
     ], use_json_field=True, null=True, blank=True)
 
+    program_start_date = models.DateField(help_text="This is not shown on the program page itself, and is basically just used for sorting on the program owner page.")
+
     search_fields = Page.search_fields + [
         index.SearchField('title'),
         index.SearchField('search_description'),
@@ -151,4 +226,7 @@ def get_context(self, request):
         MultiFieldPanel([
             FieldPanel("more_programs"),
         ], heading="Programs"),
+        MultiFieldPanel([
+            FieldPanel('program_start_date'),
+        ], heading="Others"),
     ]
diff --git a/app/programs/templates/programs/components/ProgramSortOption.html b/app/programs/templates/programs/components/ProgramSortOption.html
new file mode 100644
index 0000000..d364b07
--- /dev/null
+++ b/app/programs/templates/programs/components/ProgramSortOption.html
@@ -0,0 +1,4 @@
+<div class="mt-4 flex items-center w-fit h-fit" @click="hit()" x-data="{ sort: '{{sort_id}}', hit() {setSortType('{{sort_by}}')} }" x-init="if(sort == params.get('sort')) hit()">
+    <input class="checked:bg-hot-red checked:hover:bg-hot-red checked:focus:bg-hot-red" type="radio" name="sort" :id="sort" :value="sort" :checked="(params.get('sort') == sort || (!params.get('sort')) && sort == 'sort.new') ? 'on' : ''">
+    <label class="pl-2" :for="sort">{{sort_by}}</label>
+</div>
\ No newline at end of file
diff --git a/app/programs/templates/programs/program_owner_page.html b/app/programs/templates/programs/program_owner_page.html
new file mode 100644
index 0000000..a213fff
--- /dev/null
+++ b/app/programs/templates/programs/program_owner_page.html
@@ -0,0 +1,89 @@
+{% extends "base.html" %}
+{% load static %}
+{% load wagtailcore_tags %}
+{% load wagtailimages_tags %}
+{% load compress %}
+{% block body_class %}template-programownerpage{% endblock %}
+{% block extra_css %}
+    {% compress css %}
+    {% endcompress css %}
+{% endblock extra_css %}
+
+{% block content %}
+    {% include "ui/components/PageHeaderWithBlur.html" with title=page.title image=page.header_image full_length=True %}
+
+    <div class="max-w-7xl mx-auto my-10" x-data="{ 
+        params: new URLSearchParams((new URL(window.location.href)).search), 
+        activeParams: new URLSearchParams((new URL(window.location.href)).search), 
+        {% include 'ui/components/utilities/FormGetActiveXData.js' %}, 
+    }">
+        <div class="px-6 md:px-10">
+            <form id="search-form"
+                hx-get="{{page.url}}"
+                hx-trigger="submit"
+                hx-target="#items-list"
+                hx-select="#items-list"
+                hx-swap="innerHTML"
+                hx-select-oob="#items-list:outerHTML"
+                @submit="activeParams = new FormData($el);"
+            >
+                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+                    {% comment %} KEYWORD SEARCH {% endcomment %}
+                    <div class="bg-hot-off-white flex items-center col-span-1">
+                        <input class="w-full bg-transparent border-none" placeholder="{{page.keyword_search_hint}}" type="text" name="keyword" :value="params.get('keyword')">
+                        {% include "ui/components/icon_svgs/SearchIcon.html" with class="text-hot-red mx-3" %}
+                    </div>
+
+                    {% comment %} SORT {% endcomment %}
+                    <div class="relative col-span-1" x-data="{ show: false, setSortType(text) {$refs.sorttype.innerText = text} }" @click.away="show = false">
+                        <div class="w-full h-full flex justify-between py-2 px-3 bg-hot-off-white items-center cursor-pointer" @click="show = !show">
+                            <p class="pointer-events-none" x-ref="sorttype">
+                                {{page.sort_by_new}}
+                            </p>
+                        {% include "ui/components/icon_svgs/LinkCaret.html" with class="rotate-90 text-hot-red" %}
+                        </div>
+                        <div class="absolute z-20 bg-hot-off-white p-4 w-full" x-show="show">
+                            <hr class="border-b-2">
+                            {% include "./components/ProgramSortOption.html" with sort_by=page.sort_by_new sort_id="sort.new" %}
+                            {% include "./components/ProgramSortOption.html" with sort_by=page.sort_by_old sort_id="sort.old" %}
+                            {% include "./components/ProgramSortOption.html" with sort_by=page.sort_by_titlea sort_id="sort.titlea" %}
+                            {% include "./components/ProgramSortOption.html" with sort_by=page.sort_by_titlez sort_id="sort.titlez" %}
+                        </div>
+                    </div>
+                    <div class="grid grid-cols-2 md:col-span-2 lg:col-span-1">
+                        <div class="bg-hot-red text-white font-medium text-intro">
+                            <input type="submit" value="{{page.search_button_text}}" class="bg-transparent w-full h-full cursor-pointer py-2">
+                        </div>
+                        <div class="flex items-center justify-center text-intro font-medium">
+                            <a href="{{page.url}}" class="hover:text-hot-red">
+                                <p class="cursor-pointer inline-block">
+                                    <span class="border-b-2 border-b-hot-red">{{page.remove_filters_text}}</span>
+                                    {% include "ui/components/icon_svgs/RefreshIcon.html" with class="ml-4" %}
+                                </p>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </form>
+
+            {% comment %} PROGRAM ITEMS {% endcomment %}
+            <div id="items-list" class="mt-10">
+                {% comment %} <h2 class="text-h2 font-bold my-8">{{page.results_text}}</h2> {% endcomment %}
+                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-10">
+                    {% for program in programs %}
+                        {% include "ui/components/programs/ProgramPreviewBlockBase.html" with program=program %}
+                    {% endfor %}
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-8 text-white my-20">
+                <div>
+                    {% include "ui/components/dogear_boxes/DogearRed.html" with title=page.red_box_title linktext=page.red_box_link_text linkurl=page.red_box_link_url %}
+                </div>
+                <div>
+                    {% include "ui/components/dogear_boxes/DogearBlack.html" with title=page.black_box_title linktext=page.black_box_link_text linkurl=page.black_box_link_url %}
+                </div>
+            </div>
+        </div>
+    </div>
+{% endblock %}
diff --git a/app/ui/templates/ui/components/icon_svgs/DoubleDownChevron.html b/app/ui/templates/ui/components/icon_svgs/DoubleDownChevron.html
new file mode 100644
index 0000000..81cf9c6
--- /dev/null
+++ b/app/ui/templates/ui/components/icon_svgs/DoubleDownChevron.html
@@ -0,0 +1,6 @@
+<svg class="{{class}}" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 39.23 30.615">
+    <g id="Group_36381" data-name="Group 36381" transform="translate(-175.385 -3106.346)">
+        <path id="Path_13160" data-name="Path 13160" d="M0,15,17.493,0,35,15" transform="translate(212.5 3123.461) rotate(180)" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
+        <path id="Path_13604" data-name="Path 13604" d="M0,15,17.493,0,35,15" transform="translate(212.5 3135.461) rotate(180)" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/app/who_we_are/templates/who_we_are/who_we_are_page.html b/app/who_we_are/templates/who_we_are/who_we_are_page.html
index 23d0c5c..73d2021 100644
--- a/app/who_we_are/templates/who_we_are/who_we_are_page.html
+++ b/app/who_we_are/templates/who_we_are/who_we_are_page.html
@@ -42,7 +42,7 @@ <h1 class="text-h5 font-bold">{{block.value.title}}</h1>
     </div>
 
     {% comment %} OUR APPROACH {% endcomment %}
-    {% include "ui/components/sections/NavyBackgroundWithImage.html" with title=page.our_approach_title description=page.our_approach_description button_text=page.our_approach_button_text button_link=page.our_approach_button_url image=page.our_approach_image title_underline=True %}
+    {% include "ui/components/sections/NavyBackgroundWithImage.html" with title=page.our_approach_title description=page.our_approach_description button_text=page.our_approach_button_text button_link=page.our_approach_button_link image=page.our_approach_image title_underline=True %}
 
     {% comment %} OUR PEOPLE {% endcomment %}
     <div class="max-w-5xl mx-auto my-20">
diff --git a/hot_osm/static/css/hot_osm.css b/hot_osm/static/css/hot_osm.css
index 8e152b6..47a25b9 100644
--- a/hot_osm/static/css/hot_osm.css
+++ b/hot_osm/static/css/hot_osm.css
@@ -349,4 +349,76 @@
 .BambooHR-ATS-Department-List .BambooHR-ATS-Department-Item .BambooHR-ATS-Jobs-Item a:hover {
     text-decoration: underline;
     text-decoration-thickness: 2px;
+}
+
+.oa-wave-grid-items .oa-wave-grid-item,
+.oa-list-dotted {
+    border-style: dashed;
+    border-color: var(--hot-light-grey);
+}
+
+.oa-wave-grid-items .oa-wave-grid-item,
+.oa-list-dotted {
+    border-style: dashed;
+    border-color: var(--hot-dark-grey);
+}
+
+.oa-wave-grid-items .oa-wave-grid-item:nth-child(odd) {
+    border-width: 0 0 0 2px;
+}
+
+.oa-wave-grid-items .oa-wave-grid-item:nth-child(even) {
+    border-width: 2px 2px 2px 0;
+}
+
+.oa-wave-grid-items .oa-wave-grid-item:last-child {
+    border-width: 2px 2px 0 0;
+}
+
+@media (min-width: 768px) {
+
+    .oa-wave-grid-items .oa-wave-grid-item:nth-child(-n + 3) {
+        border-width: 0 0 2px 0;
+    }
+
+    .oa-wave-grid-items .oa-wave-grid-item:nth-child(n + 4) {
+        border-width: 0 0 0 0;
+    }
+
+    .oa-wave-grid-items .oa-wave-grid-item:first-child {
+        border-width: 0 0 2px 2px;
+    }
+
+    .oa-wave-grid-items .oa-wave-grid-item:last-child {
+        border-width: 0 2px 0 0;
+    }
+}
+
+@media (min-width: 1024px) {
+    .oa-wave-grid-items .oa-wave-grid-item:nth-child(odd) {
+        border-width: 0 0 2px 0;
+    }
+
+    .oa-wave-grid-items .oa-wave-grid-item:nth-child(even) {
+        border-width: 2px 2px 0 2px;
+    }
+
+    .oa-wave-grid-items .oa-wave-grid-item:last-child {
+        border-width: 2px 0 0 2px;
+    }
+}
+
+.oa-wh-topic {
+    opacity: 0;
+    transform: translateX(-30%);
+    transition: all 1.5s;
+}
+
+.oa-make-visible {
+    opacity: 1;
+    transform: translateX(0);
+}
+
+.oa-wh-topic:last-child .oa-wh-topic-chevron {
+    display: none;
 }
\ No newline at end of file

From e7909977d731dfa9421a4d09518066652701990e Mon Sep 17 00:00:00 2001
From: luminaryFlowers <71102109+luminaryFlowers@users.noreply.github.com>
Date: Tue, 5 Nov 2024 16:48:10 -0800
Subject: [PATCH 14/15] updated individual program and individual impact area
 pages per new mockups

---
 .../events/individual_event_page.html         |  4 +-
 ...tareapage_description_extended_and_more.py | 31 +++++++++++++
 ...lter_individualimpactareapage_use_cases.py | 19 ++++++++
 app/impact_areas/models.py                    | 13 ++++--
 .../individual_impact_area_page.html          | 29 +++++++-----
 .../members/individual_member_page.html       |  2 +-
 .../templates/members/member_group_page.html  |  4 +-
 .../templates/news/individual_news_page.html  |  2 +-
 .../partners/partner_with_us_page.html        |  2 +-
 ...vidualprogrampage_bigger_intro_and_more.py | 24 ++++++++++
 ...ndividualprogrampage_stat_section_image.py | 20 ++++++++
 ...move_individualprogrampage_bigger_intro.py | 17 +++++++
 app/programs/models.py                        | 16 +++++--
 .../programs/individual_program_page.html     | 46 +++++++++++--------
 .../projects/individual_project_page.html     |  1 -
 .../rfp/components/AsideBlockContents.html    |  2 +-
 .../individual_request_for_proposal_page.html |  2 +-
 .../rfp/request_for_proposal_owner_page.html  |  2 +-
 .../templates/search_page/search_page.html    |  2 +-
 .../open_mapping_solutions_page.html          |  2 +-
 .../resource_and_learning_page.html           |  2 +-
 .../carousel/CarouselImpactAreaUseCases.html  |  5 ++
 .../carousel/CarouselShellGeneric.html        | 18 ++++----
 .../SpecialDogearLinkBoxNoEar.html            | 21 +++++++++
 .../components/news/NewsPreviewBlockNews.html |  2 +-
 .../components/AsideBlockContents.html        |  2 +-
 ...individual_volunteer_opportunity_page.html |  8 ++--
 27 files changed, 232 insertions(+), 66 deletions(-)
 create mode 100644 app/impact_areas/migrations/0023_individualimpactareapage_description_extended_and_more.py
 create mode 100644 app/impact_areas/migrations/0024_alter_individualimpactareapage_use_cases.py
 create mode 100644 app/programs/migrations/0017_individualprogrampage_bigger_intro_and_more.py
 create mode 100644 app/programs/migrations/0018_individualprogrampage_stat_section_image.py
 create mode 100644 app/programs/migrations/0019_remove_individualprogrampage_bigger_intro.py
 create mode 100644 app/ui/templates/ui/components/carousel/CarouselImpactAreaUseCases.html
 create mode 100644 app/ui/templates/ui/components/dogear_boxes/SpecialDogearLinkBoxNoEar.html

diff --git a/app/events/templates/events/individual_event_page.html b/app/events/templates/events/individual_event_page.html
index 9e074e0..3ff34b6 100644
--- a/app/events/templates/events/individual_event_page.html
+++ b/app/events/templates/events/individual_event_page.html
@@ -24,7 +24,7 @@ <h1>{{ page.title }}</h1>
             <div class="base-article-m py-5 col-span-2">
                 {% image page.image original class="mb-8 aspect-[8/5] object-cover" %}
                 <div class="text-intro">
-                    {{ page.intro|safe }}
+                    {{ page.intro|richtext }}
                 </div>
                 {{ page.extended_description }}
 
@@ -77,7 +77,7 @@ <h1>
                         <h1 class="mb-4">
                             {{page.get_parent.specific.join_event_title}}
                         </h1>
-                        {{page.rsvp_description|safe}}
+                        {{page.rsvp_description|richtext}}
 
                         {% if page.rsvp_link %}
                             <a href="{{page.rsvp_link}}" class="[&_button]:mt-4">
diff --git a/app/impact_areas/migrations/0023_individualimpactareapage_description_extended_and_more.py b/app/impact_areas/migrations/0023_individualimpactareapage_description_extended_and_more.py
new file mode 100644
index 0000000..6baec69
--- /dev/null
+++ b/app/impact_areas/migrations/0023_individualimpactareapage_description_extended_and_more.py
@@ -0,0 +1,31 @@
+# Generated by Django 4.2.7 on 2024-11-05 20:27
+
+from django.db import migrations, models
+import django.db.models.deletion
+import wagtail.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('wagtailimages', '0026_delete_uploadedimage'),
+        ('impact_areas', '0022_alter_impactareaspage_black_dogear_box_link_and_more'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='individualimpactareapage',
+            name='description_extended',
+            field=wagtail.fields.RichTextField(blank=True),
+        ),
+        migrations.AlterField(
+            model_name='individualimpactareapage',
+            name='external_icon',
+            field=models.ForeignKey(blank=True, help_text="The icon representing this page which is shown for previews of this page on other pages. This should be a purely black image which is ideally as wide as it is tall. It also appears in the first block of this impact area's page.", null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='+', to='wagtailimages.image'),
+        ),
+        migrations.AlterField(
+            model_name='individualimpactareapage',
+            name='intro_image',
+            field=models.ForeignKey(blank=True, help_text="This image will show on the home page's previews for impact areas.", null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='+', to='wagtailimages.image'),
+        ),
+    ]
diff --git a/app/impact_areas/migrations/0024_alter_individualimpactareapage_use_cases.py b/app/impact_areas/migrations/0024_alter_individualimpactareapage_use_cases.py
new file mode 100644
index 0000000..844315a
--- /dev/null
+++ b/app/impact_areas/migrations/0024_alter_individualimpactareapage_use_cases.py
@@ -0,0 +1,19 @@
+# Generated by Django 4.2.7 on 2024-11-05 22:47
+
+from django.db import migrations
+import wagtail.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('impact_areas', '0023_individualimpactareapage_description_extended_and_more'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='individualimpactareapage',
+            name='use_cases',
+            field=wagtail.fields.StreamField([('blocks', 7)], blank=True, block_lookup={0: ('wagtail.blocks.CharBlock', (), {}), 1: ('wagtail.blocks.RichTextBlock', (), {}), 2: ('wagtail.blocks.PageChooserBlock', (), {}), 3: ('wagtail.blocks.URLBlock', (), {}), 4: ('wagtail.documents.blocks.DocumentChooserBlock', (), {}), 5: ('wagtail.blocks.CharBlock', (), {'help_text': "Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."}), 6: ('wagtail.blocks.StreamBlock', [[('page', 2), ('url', 3), ('document', 4), ('other', 5)]], {'blank': True, 'null': True}), 7: ('wagtail.blocks.StructBlock', [[('title', 0), ('description', 1), ('link_text', 0), ('link', 6)]], {})}, null=True),
+        ),
+    ]
diff --git a/app/impact_areas/models.py b/app/impact_areas/models.py
index 1791bf7..d004555 100644
--- a/app/impact_areas/models.py
+++ b/app/impact_areas/models.py
@@ -13,6 +13,7 @@
 
 
 class UseCaseStructBlock(StructBlock):
+    title = CharBlock()
     description = RichTextBlock()
     link_text = CharBlock()
     link = LinkOrPageBlock(blank=True, null=True)
@@ -63,19 +64,20 @@ def get_context(self, request, *args, **kwargs):
         blank=True,
         on_delete=models.SET_NULL,
         related_name="+",
-        help_text="The icon representing this page which is shown for previews of this page on other pages. This should be a purely black image which is ideally as wide as it is tall."
+        help_text="The icon representing this page which is shown for previews of this page on other pages. This should be a purely black image which is ideally as wide as it is tall. It also appears in the first block of this impact area's page."
     )
-    intro = RichTextField(blank=True, help_text="This text will not be shown on the page itself, and will instead be shown as the short description for the page for instances such as the Search page or the Impact Areas page.")
-    
     intro_image = models.ForeignKey(
         "wagtailimages.Image",
         null=True,
         blank=True,
         on_delete=models.SET_NULL,
         related_name="+",
-        help_text="Intro image"
+        help_text="This image will show on the home page's previews for impact areas."
     )
+    intro = RichTextField(blank=True, help_text="This text will not be shown on the page itself, and will instead be shown as the short description for the page for instances such as the Search page or the Impact Areas page.")
+    
     description = RichTextField(blank=True)
+    description_extended = RichTextField(blank=True)
 
     use_cases = StreamField(UseCaseBlock(), use_json_field=True, blank=True, null=True)
 
@@ -87,10 +89,11 @@ def get_context(self, request, *args, **kwargs):
         MultiFieldPanel([
             FieldPanel('external_icon'),
             FieldPanel('intro'),
+            FieldPanel('intro_image'),
         ], heading="External"),
         MultiFieldPanel([
-            FieldPanel('intro_image'),
             FieldPanel('description'),
+            FieldPanel('description_extended'),
         ], heading="Body"),
         MultiFieldPanel([
             FieldPanel('use_cases'),
diff --git a/app/impact_areas/templates/impact_areas/individual_impact_area_page.html b/app/impact_areas/templates/impact_areas/individual_impact_area_page.html
index 210980b..c8c4672 100644
--- a/app/impact_areas/templates/impact_areas/individual_impact_area_page.html
+++ b/app/impact_areas/templates/impact_areas/individual_impact_area_page.html
@@ -12,24 +12,31 @@
 {% block content %}
     {% include "ui/components/PageHeaderWithBlur.html" with title=page.title subtitle=page.header_text image=page.header_image full_length=True endinlarge=True %}
 
-    <div class="max-w-7xl mx-auto mb-20">
-        <div class="px-8 my-10">
-            {% comment %} MAIN BODY {% endcomment %}
-            <div class="grid grid-cols-1 lg:grid-cols-2 gap-10 mb-10">
-                <div class="base-article-m [&_p:first-child]:mt-0 lg:order-2">
-                    <div class="text-intro font-medium">
+    <div class="bg-hot-off-white">
+        <div class="max-w-5xl mx-auto px-6 md:px-10 pt-20 pb-10">
+            <div class="flex flex-col lg:flex-row gap-10 mb-10">
+                {% image page.external_icon original class="h-28 w-auto black-image-redifier hidden lg:block" %}
+                <div class="lg:hidden">
+                    {% image page.external_icon original class="h-28 w-auto black-image-redifier" %}
+                </div>
+                <div class="flex-grow base-article-m [&_p:first-child]:mt-0 lg:order-2">
+                    <div class="text-h5 font-bold [&_b]:text-hot-red bold-override">
                         {{ page.description|richtext }}
                     </div>
+                    <div class="text-intro font-medium">
+                        {{ page.description_extended|richtext }}
+                    </div>
                 </div>
-                {% image page.intro_image original class="pb-8 lg:order-1 w-full h-auto aspect-[3/2] object-cover" %}
             </div>
+        </div>
+    </div>
 
+    <div class="max-w-7xl mx-auto mb-20">
+        <div class="px-6 md:px-10 my-20">
             {% comment %} USE CASES {% endcomment %}
             {% include "ui/components/SectionHeadingWithUnderline.html" with title=page.get_parent.specific.use_cases_title %}
-            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 my-10">
-                {% for case in page.use_cases %}
-                    {% include "./components/UseCaseBox.html" with number=forloop.counter body=case.value.description linktext=case.value.link_text linkurl=case.value.link %}
-                {% endfor %}
+            <div class="mt-4">
+                {% include "ui/components/carousel/CarouselImpactAreaUseCases.html" with items=page.use_cases %}
             </div>
 
             {% comment %} PROJECTS {% endcomment %}
diff --git a/app/members/templates/members/individual_member_page.html b/app/members/templates/members/individual_member_page.html
index 48e32c9..27e1d36 100644
--- a/app/members/templates/members/individual_member_page.html
+++ b/app/members/templates/members/individual_member_page.html
@@ -34,7 +34,7 @@ <h1 class="text-h1 font-semibold my-2">{{page.title}}</h1>
                     <a href="{{page.location_hub.url}}" class="text-hot-red">{{page.location_hub.title}}</a>
                 </p>
                 <div class="base-article-m">
-                    {{page.intro|safe}}
+                    {{page.intro|richtext}}
                 </div>
             </div>
         </div>
diff --git a/app/members/templates/members/member_group_page.html b/app/members/templates/members/member_group_page.html
index 95ae270..3d27353 100644
--- a/app/members/templates/members/member_group_page.html
+++ b/app/members/templates/members/member_group_page.html
@@ -15,10 +15,10 @@
     <div class="max-w-7xl mx-auto px-6 md:px-10 my-10" x-data="{ params: new URLSearchParams((new URL(window.location.href)).search), activeParams: new URLSearchParams((new URL(window.location.href)).search), {% include 'ui/components/utilities/FormGetActiveXData.js' %}, }">
         <div class="max-w-3xl">
             <div class="text-intro font-medium">
-                {{page.body_intro|safe}}
+                {{page.body_intro|richtext}}
             </div>
             <div class="base-article-m">
-                {{page.body_description|safe}}
+                {{page.body_description|richtext}}
             </div>
         </div>
 
diff --git a/app/news/templates/news/individual_news_page.html b/app/news/templates/news/individual_news_page.html
index 46d8beb..a54bb31 100644
--- a/app/news/templates/news/individual_news_page.html
+++ b/app/news/templates/news/individual_news_page.html
@@ -34,7 +34,7 @@ <h1 class="font-bold text-h2">{{ page.title }}</h1>
                         </div>
 
                         <div class="text-intro">
-                            {{ page.intro|safe }}
+                            {{ page.intro|richtext }}
                         </div>
                         {{ page.article_body }}
                     </div>
diff --git a/app/partners/templates/partners/partner_with_us_page.html b/app/partners/templates/partners/partner_with_us_page.html
index 677fdfe..855ef86 100644
--- a/app/partners/templates/partners/partner_with_us_page.html
+++ b/app/partners/templates/partners/partner_with_us_page.html
@@ -16,7 +16,7 @@
         <div class="px-6 md:px-10">
             <div class="lg:grid lg:grid-cols-6 mb-10">
                 <div class="col-span-5 text-intro font-medium">
-                    {{page.intro|safe}}
+                    {{page.intro|richtext}}
                 </div>
             </div>
 
diff --git a/app/programs/migrations/0017_individualprogrampage_bigger_intro_and_more.py b/app/programs/migrations/0017_individualprogrampage_bigger_intro_and_more.py
new file mode 100644
index 0000000..ae863e5
--- /dev/null
+++ b/app/programs/migrations/0017_individualprogrampage_bigger_intro_and_more.py
@@ -0,0 +1,24 @@
+# Generated by Django 4.2.7 on 2024-11-05 18:11
+
+from django.db import migrations, models
+import wagtail.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('programs', '0016_programownerpage_black_box_link_text_and_more'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='individualprogrampage',
+            name='bigger_intro',
+            field=wagtail.fields.RichTextField(blank=True),
+        ),
+        migrations.AddField(
+            model_name='programownerpage',
+            name='about_program_title',
+            field=models.CharField(default='About the Program'),
+        ),
+    ]
diff --git a/app/programs/migrations/0018_individualprogrampage_stat_section_image.py b/app/programs/migrations/0018_individualprogrampage_stat_section_image.py
new file mode 100644
index 0000000..1865cc1
--- /dev/null
+++ b/app/programs/migrations/0018_individualprogrampage_stat_section_image.py
@@ -0,0 +1,20 @@
+# Generated by Django 4.2.7 on 2024-11-05 18:13
+
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('wagtailimages', '0026_delete_uploadedimage'),
+        ('programs', '0017_individualprogrampage_bigger_intro_and_more'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='individualprogrampage',
+            name='stat_section_image',
+            field=models.ForeignKey(blank=True, null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='+', to='wagtailimages.image'),
+        ),
+    ]
diff --git a/app/programs/migrations/0019_remove_individualprogrampage_bigger_intro.py b/app/programs/migrations/0019_remove_individualprogrampage_bigger_intro.py
new file mode 100644
index 0000000..1b02884
--- /dev/null
+++ b/app/programs/migrations/0019_remove_individualprogrampage_bigger_intro.py
@@ -0,0 +1,17 @@
+# Generated by Django 4.2.7 on 2024-11-05 18:37
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('programs', '0018_individualprogrampage_stat_section_image'),
+    ]
+
+    operations = [
+        migrations.RemoveField(
+            model_name='individualprogrampage',
+            name='bigger_intro',
+        ),
+    ]
diff --git a/app/programs/models.py b/app/programs/models.py
index a8fb7f8..3c9339c 100644
--- a/app/programs/models.py
+++ b/app/programs/models.py
@@ -94,6 +94,7 @@ def get_context(self, request, *args, **kwargs):
     black_box_link_url = StreamField(LinkOrPageBlock(), use_json_field=True, blank=True)
 
     # v individual program page stuff v
+    about_program_title = models.CharField(default="About the Program")
     stats_title = models.CharField(default="Stats")
     goals_title = models.CharField(default="Goals")
     projects_title = models.CharField(default="Projects")
@@ -131,6 +132,7 @@ def get_context(self, request, *args, **kwargs):
         ], heading="Dogear Boxes"),
         MultiFieldPanel([
             MultiFieldPanel([
+                FieldPanel("about_program_title"),
                 FieldPanel("stats_title"),
                 FieldPanel("goals_title"),
                 FieldPanel("projects_title"),
@@ -164,8 +166,7 @@ def get_context(self, request):
     parent_page_type = [
         'programs.ProgramOwnerPage'
     ]
-
-    subtitle = RichTextField(blank=True)
+    
     header_image = models.ForeignKey(
         "wagtailimages.Image",
         null=True,
@@ -175,6 +176,7 @@ def get_context(self, request):
         help_text="Header image"
     )
 
+    subtitle = RichTextField(blank=True)
     intro = RichTextField(blank=True)
     description = RichTextField(blank=True)
     intro_image = models.ForeignKey(
@@ -187,6 +189,13 @@ def get_context(self, request):
     )
 
     stats = StreamField(ProgramStatBlock(), use_json_field=True, null=True, blank=True)
+    stat_section_image = models.ForeignKey(
+        "wagtailimages.Image",
+        null=True,
+        blank=True,
+        on_delete=models.SET_NULL,
+        related_name="+"
+    )
 
     goals = StreamField(ProgramGoalBlock(), use_json_field=True, null=True, blank=True)
 
@@ -206,16 +215,17 @@ def get_context(self, request):
 
     content_panels = Page.content_panels + [
         MultiFieldPanel([
-            FieldPanel("subtitle"),
             FieldPanel("header_image"),
         ], heading="Header"),
         MultiFieldPanel([
+            FieldPanel("subtitle"),
             FieldPanel("intro"),
             FieldPanel("description"),
             FieldPanel("intro_image"),
         ], heading="Intro"),
         MultiFieldPanel([
             FieldPanel("stats"),
+            FieldPanel("stat_section_image"),
         ], heading="Stats"),
         MultiFieldPanel([
             FieldPanel("goals"),
diff --git a/app/programs/templates/programs/individual_program_page.html b/app/programs/templates/programs/individual_program_page.html
index 93520db..6935d66 100644
--- a/app/programs/templates/programs/individual_program_page.html
+++ b/app/programs/templates/programs/individual_program_page.html
@@ -10,32 +10,43 @@
 {% endblock extra_css %}
 
 {% block content %}
-    {% include "ui/components/PageHeaderWithBlur.html" with title=page.title subtitle=page.subtitle image=page.header_image full_length=True %}
+    {% include "ui/components/PageHeaderWithBlur.html" with title=page.title image=page.header_image full_length=True endinlarge=True %}
 
     <div class="max-w-7xl mx-auto my-10 px-6 md:px-10">
+        <div class="text-h5 font-bold max-w-3xl my-10 [&_b]:text-hot-red bold-override">
+            {{page.subtitle|richtext}}
+        </div>
         <div class="grid grid-cols-1 lg:grid-cols-2 gap-x-10">
             <div class="base-article-m [&_p:first-child]:mt-0 lg:order-2">
+                <h2 style="margin-top:0">{{page.get_parent.specific.about_program_title}}</h2>
                 <div class="text-intro font-medium">
-                    {{ page.intro|safe }}
+                    {{ page.intro|richtext }}
                 </div>
-                {{ page.description|safe }}
+                {{ page.description|richtext }}
             </div>
             {% image page.intro_image original class="pb-8 lg:order-1 aspect-[3/2] object-cover object-center" %}
         </div>
+    </div>
+    <div class="bg-hot-off-white mt-20 mb-10">
+        <div class="max-w-7xl mx-auto px-6 md:px-10 pt-20 pb-10">
+            {% include "ui/components/TitleWithUnderline.html" with title=page.get_parent.specific.stats_title %}
 
-        <h1 class="text-h2 font-bold">
-            {{ page.get_parent.specific.stats_title }}
-        </h1>
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10 py-6">
-            {% for stat in page.stats %}
-                <div class="bg-hot-off-white p-8 flex items-center justify-center text-center">
-                    <h1 class="text-h5 font-bold">
-                        <span class="text-hot-red">{{ stat.value.title }}</span> {{ stat.value.description }}
-                    </h1>
-                </div>
-            {% endfor %}
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-{%if page.stats|length_is:4%}4{%else%}3{%endif%} gap-10 py-6 mt-2">
+                {% for stat in page.stats %}
+                    <div class="bg-white p-8 flex items-center justify-center text-center flex-col">
+                        <h1 class="text-h2 font-bold">
+                            <span class="text-hot-red">{{ stat.value.title }}</span> 
+                        </h1>
+                        <p class="text-h5 font-bold">
+                            {{ stat.value.description }}
+                        </p>
+                    </div>
+                {% endfor %}
+            </div>
         </div>
-
+        {% image page.stat_section_image original class="max-h-96 w-full object-cover object-center" %}
+    </div>
+    <div class="max-w-7xl mx-auto my-10 px-6 md:px-10">
         <div class="py-6">
             <h1 class="text-h2 font-bold">
                 {{ page.get_parent.specific.goals_title }}
@@ -44,12 +55,11 @@ <h1 class="text-h2 font-bold">
         </div>
         <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10 py-6">
             {% for goal in page.goals %}
-                <div class="[&_ul]:list-disc [&_li]:py-1 [&_ul]:p-4 [&_li::marker]:text-hot-red">
+                <div class="[&_ul]:list-disc [&_li]:py-1 [&_ul]:p-4 [&_li::marker]:text-hot-red bg-hot-off-white py-8 px-6">
                     <h1 class="text-h4 font-bold">
-                        {% image goal.value.icon original class="inline mr-3" %}
                         {{ goal.value.title }}
                     </h1>
-                    {{ goal.value.description|safe }}
+                    {{ goal.value.description|richtext }}
                 </div>
             {% endfor %}
         </div>
diff --git a/app/projects/templates/projects/individual_project_page.html b/app/projects/templates/projects/individual_project_page.html
index 966d7ea..a71f8b4 100644
--- a/app/projects/templates/projects/individual_project_page.html
+++ b/app/projects/templates/projects/individual_project_page.html
@@ -27,7 +27,6 @@
 
             {% comment %} SIDEBAR {% endcomment %}
             <div class="p-10 col-span-1">
-                {% comment %} NOTE TO SELF: the "safe" thing is only needed temporarily until everything is put in {% endcomment %}
                 <div class="project-sidebar">
                     <div class="project-sidebar [&_div:last-child]:border-b-0 [&_a:hover]:underline" style="padding-bottom: 0;">
                         {% if page.impact_area_list %}
diff --git a/app/rfp/templates/rfp/components/AsideBlockContents.html b/app/rfp/templates/rfp/components/AsideBlockContents.html
index e0b0ef4..be99988 100644
--- a/app/rfp/templates/rfp/components/AsideBlockContents.html
+++ b/app/rfp/templates/rfp/components/AsideBlockContents.html
@@ -3,6 +3,6 @@ <h1 class="text-h3 font-bold">
         {{page.aside_block_title}}
     </h1>
     <div class="base-article-m my-4 [&_a]:font-bold">
-        {{page.aside_block_description|safe}}
+        {{page.aside_block_description|richtext}}
     </div>
 </div>
\ No newline at end of file
diff --git a/app/rfp/templates/rfp/individual_request_for_proposal_page.html b/app/rfp/templates/rfp/individual_request_for_proposal_page.html
index 19f8e2b..899ccdb 100644
--- a/app/rfp/templates/rfp/individual_request_for_proposal_page.html
+++ b/app/rfp/templates/rfp/individual_request_for_proposal_page.html
@@ -27,7 +27,7 @@ <h1 class="text-h1 font-bold">{{ page.title }} </h1>
             {% comment %} BODY {% endcomment %}
             <div class="col-span-2 base-article-m">
                 <div class="text-intro font-medium mb-4">
-                    {{ page.intro|safe }}
+                    {{ page.intro|richtext }}
                 </div>
                 {{ page.article_body }}
             </div>
diff --git a/app/rfp/templates/rfp/request_for_proposal_owner_page.html b/app/rfp/templates/rfp/request_for_proposal_owner_page.html
index 9d7bba9..90246f5 100644
--- a/app/rfp/templates/rfp/request_for_proposal_owner_page.html
+++ b/app/rfp/templates/rfp/request_for_proposal_owner_page.html
@@ -43,7 +43,7 @@ <h1 class="text-h3 font-bold">
                                     {{page.no_rfps_title}}
                                 </h1>
                                 <div class="base-article-m [&_a]:font-bold mt-4">
-                                    {{page.no_rfps_description|safe}}
+                                    {{page.no_rfps_description|richtext}}
                                 </div>
                             </div>
                         {% endif %}
diff --git a/app/search_page/templates/search_page/search_page.html b/app/search_page/templates/search_page/search_page.html
index 508ed0e..888d2c1 100644
--- a/app/search_page/templates/search_page/search_page.html
+++ b/app/search_page/templates/search_page/search_page.html
@@ -34,7 +34,7 @@ <h2 class="text-h4 font-semibold">{{result.title}}</h2>
                             
                             {% if result.specific.intro %}
                                 <div>
-                                    {{result.specific.intro|safe}}
+                                    {{result.specific.intro|richtext}}
                                 </div>
                                 {% else %}
                                 {% if result.search_description %}
diff --git a/app/tools_and_resources/templates/tools_and_resources/open_mapping_solutions_page.html b/app/tools_and_resources/templates/tools_and_resources/open_mapping_solutions_page.html
index 7ede87e..5796b2c 100644
--- a/app/tools_and_resources/templates/tools_and_resources/open_mapping_solutions_page.html
+++ b/app/tools_and_resources/templates/tools_and_resources/open_mapping_solutions_page.html
@@ -15,7 +15,7 @@
     <div class="max-w-7xl mx-auto my-10">
         <div class="px-6 md:px-10">
             <div class="mb-10 text-intro font-medium lg:w-3/4">
-                {{page.intro|safe}}
+                {{page.intro|richtext}}
             </div>
 
             <div class="grid gap-8">
diff --git a/app/tools_and_resources/templates/tools_and_resources/resource_and_learning_page.html b/app/tools_and_resources/templates/tools_and_resources/resource_and_learning_page.html
index b3c6cd0..ab4703d 100644
--- a/app/tools_and_resources/templates/tools_and_resources/resource_and_learning_page.html
+++ b/app/tools_and_resources/templates/tools_and_resources/resource_and_learning_page.html
@@ -15,7 +15,7 @@
     <div class="max-w-7xl mx-auto my-10">
         <div class="px-6 md:px-10">
             <div class="max-w-5xl mb-10 text-intro font-medium">
-                {{page.intro|safe}}
+                {{page.intro|richtext}}
             </div>
 
             <div class="grid grid-cols-1 lg:grid-cols-2 gap-x-8 gap-y-16 mt-10 mb-20">
diff --git a/app/ui/templates/ui/components/carousel/CarouselImpactAreaUseCases.html b/app/ui/templates/ui/components/carousel/CarouselImpactAreaUseCases.html
new file mode 100644
index 0000000..888f8ee
--- /dev/null
+++ b/app/ui/templates/ui/components/carousel/CarouselImpactAreaUseCases.html
@@ -0,0 +1,5 @@
+{% extends "./CarouselShellGeneric.html" %}
+
+{% block individual_item %}
+    {% include "ui/components/dogear_boxes/SpecialDogearLinkBoxNoEar.html" with description=item.value.description colour="var(--hot-red)" linktext=page.get_parent.specific.learn_more_text link=item.value.link title=item.value.title %}
+{% endblock %}
\ No newline at end of file
diff --git a/app/ui/templates/ui/components/carousel/CarouselShellGeneric.html b/app/ui/templates/ui/components/carousel/CarouselShellGeneric.html
index ca1f692..4045728 100644
--- a/app/ui/templates/ui/components/carousel/CarouselShellGeneric.html
+++ b/app/ui/templates/ui/components/carousel/CarouselShellGeneric.html
@@ -1,7 +1,7 @@
 {% load wagtailimages_tags %}
 <div x-data="{ partnerIndex: 0, fixedIndex(x) {return ({{items|length}} + x + this.partnerIndex) % {{items|length}}}, moveIndex(x) {this.partnerIndex = this.fixedIndex(x)} }" 
      class="grid {{class}}">
-    <div class="flex justify-between gap-8 items-center">
+    <div class="flex justify-between gap-8 items-center ml-auto">
         {% if title %}
         <div>
             {% include "ui/components/SectionHeadingWithUnderline.html" %}
@@ -13,13 +13,13 @@
             }"
         >
             <div x-on:click="moveIndex(1)" class="pr-4 text-hot-red inline-flex flex-col justify-center">
-                <div class="border-hot-red border-2 rounded-full h-8 w-8 text-center">
-                    {% include "ui/components/icon_svgs/LinkCaret.html" with class="rotate-180" %}
+                <div class="rotate-180">
+                    {% include "ui/components/icon_svgs/LinkCaretCircle.html" with class="" styledhover=True %}
                 </div>
             </div>
             <div x-on:click="moveIndex(-1)" class="text-hot-red inline-flex flex-col justify-center">
-                <div class="border-hot-red border-2 rounded-full h-8 w-8 text-center">
-                    {% include "ui/components/icon_svgs/LinkCaret.html" %}
+                <div class="">
+                    {% include "ui/components/icon_svgs/LinkCaretCircle.html" with class="" styledhover=True %}
                 </div>
             </div>
         </div>
@@ -42,13 +42,13 @@
          :class="{ 'hidden': {{items|length}} == 1 }"
     >
         <div x-on:click="moveIndex(1)" class="pr-4 text-hot-red inline-flex flex-col justify-center">
-            <div class="border-hot-red border-2 rounded-full h-8 w-8 text-center">
-                {% include "ui/components/icon_svgs/LinkCaret.html" with class="rotate-180" %}
+            <div class="rotate-180">
+                {% include "ui/components/icon_svgs/LinkCaretCircle.html" with class="" styledhover=True %}
             </div>
         </div>
         <div x-on:click="moveIndex(-1)" class="text-hot-red inline-flex flex-col justify-center">
-            <div class="border-hot-red border-2 rounded-full h-8 w-8 text-center">
-                {% include "ui/components/icon_svgs/LinkCaret.html" %}
+            <div class="">
+                {% include "ui/components/icon_svgs/LinkCaretCircle.html" with class="" styledhover=True %}
             </div>
         </div>
     </div>
diff --git a/app/ui/templates/ui/components/dogear_boxes/SpecialDogearLinkBoxNoEar.html b/app/ui/templates/ui/components/dogear_boxes/SpecialDogearLinkBoxNoEar.html
new file mode 100644
index 0000000..b3be6f2
--- /dev/null
+++ b/app/ui/templates/ui/components/dogear_boxes/SpecialDogearLinkBoxNoEar.html
@@ -0,0 +1,21 @@
+{% comment %}
+==> PARAMETERS
+- title: a string; the title of the box
+- description: an HTML element (should really just be one <p> element)
+- colour: a string; the colour that the box's accents should be 
+          (can be hex code or any other CSS compatible colour thing)
+{% endcomment %}
+{% load wagtailcore_tags %}
+
+<div class="p-6 flex flex-col border-b-8 h-full" 
+     style="border-color: {{ colour }}; background: linear-gradient(45deg, var(--hot-off-white) 0%, var(--hot-off-white) 92.4%, transparent 92.5%, transparent 100%);">
+    <h1 class="text-h3 font-bold">
+        {{ title }}
+    </h1>
+    <div class="mt-4 mb-8">
+        {{ description|richtext }}
+    </div>
+    <div class="mt-auto text-intro mb-6">
+        {% include "ui/components/BaseLink.html" %}
+    </div>
+</div>
\ No newline at end of file
diff --git a/app/ui/templates/ui/components/news/NewsPreviewBlockNews.html b/app/ui/templates/ui/components/news/NewsPreviewBlockNews.html
index 474facf..944fa6f 100644
--- a/app/ui/templates/ui/components/news/NewsPreviewBlockNews.html
+++ b/app/ui/templates/ui/components/news/NewsPreviewBlockNews.html
@@ -17,7 +17,7 @@
         </p>
 
         <div class="[&_p]:max-h-20 [&_p]:text-ellipsis [&_p]:overflow-hidden [&_p]:text-small">
-            {{ news.intro|safe }}
+            {{ news.intro|richtext }}
         </div>
 
         <p class="mt-4 font-medium">
diff --git a/app/volunteer_opportunities/templates/volunteer_opportunities/components/AsideBlockContents.html b/app/volunteer_opportunities/templates/volunteer_opportunities/components/AsideBlockContents.html
index 3c8efed..1ae5185 100644
--- a/app/volunteer_opportunities/templates/volunteer_opportunities/components/AsideBlockContents.html
+++ b/app/volunteer_opportunities/templates/volunteer_opportunities/components/AsideBlockContents.html
@@ -3,7 +3,7 @@ <h1 class="text-h3 font-bold">
         {{page.aside_block_title}}
     </h1>
     <div class="base-article-m my-4">
-        {{page.aside_block_description|safe}}
+        {{page.aside_block_description|richtext}}
     </div>
     <p class="text-hot-red font-medium">
         {% include "ui/components/BaseLinkNoUnderline.html" with linkurl=page.aside_block_link linktext=page.aside_block_link_text %}
diff --git a/app/volunteer_opportunities/templates/volunteer_opportunities/individual_volunteer_opportunity_page.html b/app/volunteer_opportunities/templates/volunteer_opportunities/individual_volunteer_opportunity_page.html
index ccb2868..377412a 100644
--- a/app/volunteer_opportunities/templates/volunteer_opportunities/individual_volunteer_opportunity_page.html
+++ b/app/volunteer_opportunities/templates/volunteer_opportunities/individual_volunteer_opportunity_page.html
@@ -26,7 +26,7 @@ <h1 class="font-bold text-h1">{{ page.title }}</h1>
             {% comment %} BODY {% endcomment %}
             <div class="base-article-m py-5 col-span-2">
                 <div class="text-intro font-medium mb-4">
-                    {{ page.intro|safe }}
+                    {{ page.intro|richtext }}
                 </div>
                 {{ page.article_body }}
             </div>
@@ -37,14 +37,14 @@ <h1 class="font-bold text-h1">{{ page.title }}</h1>
                     <h1 class="text-h2 font-bold mb-4">
                         {{ page.get_parent.specific.contact_title }}
                     </h1>
-                    {{ page.contact_description|safe }}
+                    {{ page.contact_description|richtext }}
                 </div>
                 <div>
                     <hr />
                     <h1 class="text-h2 font-bold mb-4">
                         {{ page.get_parent.specific.application_date_title }}
                     </h1>
-                    {{ page.application_description|safe }}
+                    {{ page.application_description|richtext }}
                     <p>
                         {{ page.application_date }}
                     </p>
@@ -54,7 +54,7 @@ <h1 class="text-h2 font-bold mb-4">
                     <h1 class="text-h2 font-bold mb-4">
                         {{ page.get_parent.specific.location_title }}
                     </h1>
-                    {{ page.location_text|safe }}
+                    {{ page.location_text|richtext }}
                 </div>
             </div>
         </div>

From 26d0130e25d0d628f7bcc10d12be2014f365e5e5 Mon Sep 17 00:00:00 2001
From: luminaryFlowers <71102109+luminaryFlowers@users.noreply.github.com>
Date: Tue, 12 Nov 2024 10:48:34 -0800
Subject: [PATCH 15/15] various small things

---
 ..._eventownerpage_date_date_text_and_more.py |  28 +++
 ...016_alter_eventownerpage_date_date_text.py |  18 ++
 app/events/models.py                          |  14 ++
 .../templates/events/event_owner_page.html    |  20 ++
 app/impact_areas/models.py                    |   2 +
 .../individual_impact_area_page.html          |   2 +-
 ...openmappinghubspage_header_project_link.py |  19 ++
 .../0024_delete_mappinghubprojectspage.py     |  16 ++
 ...idualmappinghubpage_header_project_link.py |  17 ++
 app/mapping_hubs/models.py                    |  49 +----
 .../mapping_hubs/components/header.html       |   2 +-
 .../individual_mapping_hub_page.html          |   2 +-
 .../misc/components/OurApproachWhatWeDo.html  |   2 +-
 .../components/OurApproachWhatWeDoMobile.html |   2 +-
 app/misc/templates/misc/contact_us_page.html  |   2 +-
 .../0006_ourworkpage_projects_link.py         |  19 ++
 app/our_work/models.py                        |   5 +-
 .../templates/our_work/our_work_page.html     |  60 +++---
 ...ectownerpage_apply_filter_text_and_more.py |  73 +++++++
 ...projectownerpage_sort_new_text_and_more.py |  21 ++
 ..._projectownerpage_applied_text_and_more.py |  43 ++++
 .../0046_projectownerpage_results_text.py     |  18 ++
 ...ctownerpage_bottom_dogear_link_and_more.py |  29 +++
 app/projects/models.py                        | 108 +++++++++-
 .../projects/project_owner_page.html          | 184 ++++++++++++++++--
 .../rfp/components/AsideBlockContents.html    |   1 +
 .../dogear_boxes/DogearAnyColourLong.html     |   2 +-
 .../icon_svgs/ExternalLinkIcon.html           |   2 +-
 .../MappingHubPreviewProjectsBlock.html       |   8 +-
 .../components/navigation/HeaderNavbar.html   |   3 +-
 .../navigation/UpperHeaderNavbar.html         |   3 +-
 .../components/news/NewsPreviewBlockNews.html |   1 +
 .../components/AsideBlockContents.html        |   1 +
 ..._gdpr_tracking_consent_message_and_more.py |  34 ++++
 ...6_homepage_gdpr_tracking_title_and_more.py |  23 +++
 home/models.py                                |  15 +-
 36 files changed, 733 insertions(+), 115 deletions(-)
 create mode 100644 app/events/migrations/0015_eventownerpage_date_date_text_and_more.py
 create mode 100644 app/events/migrations/0016_alter_eventownerpage_date_date_text.py
 create mode 100644 app/mapping_hubs/migrations/0023_openmappinghubspage_header_project_link.py
 create mode 100644 app/mapping_hubs/migrations/0024_delete_mappinghubprojectspage.py
 create mode 100644 app/mapping_hubs/migrations/0025_remove_individualmappinghubpage_header_project_link.py
 create mode 100644 app/our_work/migrations/0006_ourworkpage_projects_link.py
 create mode 100644 app/projects/migrations/0043_projectownerpage_apply_filter_text_and_more.py
 create mode 100644 app/projects/migrations/0044_remove_projectownerpage_sort_new_text_and_more.py
 create mode 100644 app/projects/migrations/0045_projectownerpage_applied_text_and_more.py
 create mode 100644 app/projects/migrations/0046_projectownerpage_results_text.py
 create mode 100644 app/projects/migrations/0047_projectownerpage_bottom_dogear_link_and_more.py
 create mode 100644 home/migrations/0045_homepage_gdpr_tracking_consent_message_and_more.py
 create mode 100644 home/migrations/0046_homepage_gdpr_tracking_title_and_more.py

diff --git a/app/events/migrations/0015_eventownerpage_date_date_text_and_more.py b/app/events/migrations/0015_eventownerpage_date_date_text_and_more.py
new file mode 100644
index 0000000..b2c474d
--- /dev/null
+++ b/app/events/migrations/0015_eventownerpage_date_date_text_and_more.py
@@ -0,0 +1,28 @@
+# Generated by Django 4.2.7 on 2024-11-06 23:54
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('events', '0014_eventownerpage_applied_text'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='eventownerpage',
+            name='date_date_text',
+            field=models.CharField(default='date'),
+        ),
+        migrations.AddField(
+            model_name='eventownerpage',
+            name='date_from_text',
+            field=models.CharField(default='From'),
+        ),
+        migrations.AddField(
+            model_name='eventownerpage',
+            name='date_to_text',
+            field=models.CharField(default='To'),
+        ),
+    ]
diff --git a/app/events/migrations/0016_alter_eventownerpage_date_date_text.py b/app/events/migrations/0016_alter_eventownerpage_date_date_text.py
new file mode 100644
index 0000000..68ee471
--- /dev/null
+++ b/app/events/migrations/0016_alter_eventownerpage_date_date_text.py
@@ -0,0 +1,18 @@
+# Generated by Django 4.2.7 on 2024-11-07 17:06
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('events', '0015_eventownerpage_date_date_text_and_more'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='eventownerpage',
+            name='date_date_text',
+            field=models.CharField(default='Filter by Date'),
+        ),
+    ]
diff --git a/app/events/models.py b/app/events/models.py
index fe37410..72d0344 100644
--- a/app/events/models.py
+++ b/app/events/models.py
@@ -14,6 +14,8 @@
 from app.members.models import IndividualMappingHubPage
 from app.core.models import LinkOrPageBlock
 
+from datetime import datetime
+
 
 class EventOwnerPage(Page):
     def get_context(self, request, *args, **kwargs):
@@ -46,6 +48,12 @@ def get_context(self, request, *args, **kwargs):
             if request.GET.get("hub" + str(hub.id), ''):
                 query = query | Q(event_region_hub=hub)
         events_list = events_list.filter(query).distinct()
+
+        from_date = request.GET.get("fromdate")
+        from_date = datetime.strptime(from_date, "%Y-%m-%d") if from_date else datetime.min
+        to_date = request.GET.get("todate")
+        to_date = datetime.strptime(to_date, "%Y-%m-%d") if to_date else datetime.max
+        events_list = events_list.filter(Q(start_date_time__range=[from_date,to_date]) | Q(end_date_time__range=[from_date,to_date]))
         
         match request.GET.get('sort', ''):
             case 'sort.new':
@@ -101,6 +109,9 @@ def get_context(self, request, *args, **kwargs):
     sort_by_old = models.CharField(default="Sort by Old")
     sort_by_titlea = models.CharField(default="Sort by Title Alphabetical")
     sort_by_titlez = models.CharField(default="Sort by Title Reverse Alphabetical")
+    date_date_text = models.CharField(default="Filter by Date")
+    date_from_text = models.CharField(default="From")
+    date_to_text = models.CharField(default="To")
     search_button_text = models.CharField(default="Search")
     remove_filters_text = models.CharField(default="Remove All Filters")
     results_text = models.CharField(default="Results")
@@ -116,6 +127,9 @@ def get_context(self, request, *args, **kwargs):
             FieldPanel('sort_by_old'),
             FieldPanel('sort_by_titlea'),
             FieldPanel('sort_by_titlez'),
+            FieldPanel('date_from_text'),
+            FieldPanel('date_to_text'),
+            FieldPanel('date_date_text'),
             FieldPanel('search_button_text'),
             FieldPanel('remove_filters_text'),
             FieldPanel('results_text'),
diff --git a/app/events/templates/events/event_owner_page.html b/app/events/templates/events/event_owner_page.html
index 4562cb9..07ec418 100644
--- a/app/events/templates/events/event_owner_page.html
+++ b/app/events/templates/events/event_owner_page.html
@@ -103,6 +103,26 @@ <h1 class="text-h1 font-semibold my-10">{{page.title}}</h1>
                         </div>
                     </div>
 
+                    <div class="relative" x-data="{ show: false }" @click.away="show = false">
+                        <div class="w-full h-full flex justify-between py-2 px-3 bg-hot-off-white items-center cursor-pointer" @click="show = !show">
+                            <p class="pointer-events-none">
+                                {{page.date_date_text}}
+                            </p>
+                            {% include "ui/components/icon_svgs/LinkCaret.html" with class="rotate-90 text-hot-red" %}
+                        </div>
+                        <div class="absolute z-20 bg-hot-off-white p-4 w-full flex flex-col gap-2" x-show="show">
+                            <hr class="border-b-2 mb-2">
+                            <p>{{page.date_from_text}}</p>
+                            <div class="bg-white flex items-center mb-2">
+                                <input class="w-full bg-transparent border-none" type="date" name="fromdate" :value="params.get('fromdate')">
+                            </div>
+                            <p>{{page.date_to_text}}</p>
+                            <div class="bg-white flex items-center">
+                                <input class="w-full bg-transparent border-none" type="date" name="todate" :value="params.get('todate')">
+                            </div>
+                        </div>
+                    </div>
+
                     <div class="bg-hot-red text-white font-semibold">
                         <input type="submit" value="{{page.search_button_text}}" class="bg-transparent w-full h-full cursor-pointer py-2">
                     </div>
diff --git a/app/impact_areas/models.py b/app/impact_areas/models.py
index d004555..ed60ef1 100644
--- a/app/impact_areas/models.py
+++ b/app/impact_areas/models.py
@@ -27,6 +27,8 @@ class IndividualImpactAreaPage(Page):
     def get_context(self, request, *args, **kwargs):
         context = super().get_context(request, *args, **kwargs)
 
+        context['baseid'] = str(context['page'].get_translation(1).id)
+
         projects_list = IndividualProjectPage.objects.live().filter(
             Q(impact_area_list__contains=[{'type': 'impact_area', 'value': context['page'].get_translation(1).id}])
         ).filter(locale=context['page'].locale)
diff --git a/app/impact_areas/templates/impact_areas/individual_impact_area_page.html b/app/impact_areas/templates/impact_areas/individual_impact_area_page.html
index c8c4672..17d88d3 100644
--- a/app/impact_areas/templates/impact_areas/individual_impact_area_page.html
+++ b/app/impact_areas/templates/impact_areas/individual_impact_area_page.html
@@ -41,7 +41,7 @@
 
             {% comment %} PROJECTS {% endcomment %}
             <div class="my-20" id="projects-section">
-                {% include "ui/components/FlexTitleWithLink.html" with title=page.get_parent.specific.projects_title linktext=page.get_parent.specific.view_all_projects_text linkurl=page.get_parent.specific.view_all_projects_url titleclass="text-h2" %}
+                {% include "ui/components/FlexTitleWithLink.html" with title=page.get_parent.specific.projects_title linktext=page.get_parent.specific.view_all_projects_text linkurl=page.get_parent.specific.view_all_projects_url titleclass="text-h2" linkappendage="?ia"|add:baseid|add:"=on" %}
                 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mt-10" id="projects-list">
                     {% for project in projects %}
                         {% include "ui/components/projects/ProjectPreviewBlockNews.html" with project=project showimage=True %}
diff --git a/app/mapping_hubs/migrations/0023_openmappinghubspage_header_project_link.py b/app/mapping_hubs/migrations/0023_openmappinghubspage_header_project_link.py
new file mode 100644
index 0000000..7f885c8
--- /dev/null
+++ b/app/mapping_hubs/migrations/0023_openmappinghubspage_header_project_link.py
@@ -0,0 +1,19 @@
+# Generated by Django 4.2.7 on 2024-11-06 22:50
+
+from django.db import migrations
+import wagtail.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('mapping_hubs', '0022_individualmappinghubpage_hub_portrait_image'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='openmappinghubspage',
+            name='header_project_link',
+            field=wagtail.fields.StreamField([('page', 0), ('url', 1), ('document', 2), ('other', 3)], blank=True, block_lookup={0: ('wagtail.blocks.PageChooserBlock', (), {}), 1: ('wagtail.blocks.URLBlock', (), {}), 2: ('wagtail.documents.blocks.DocumentChooserBlock', (), {}), 3: ('wagtail.blocks.CharBlock', (), {'help_text': "Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."})}),
+        ),
+    ]
diff --git a/app/mapping_hubs/migrations/0024_delete_mappinghubprojectspage.py b/app/mapping_hubs/migrations/0024_delete_mappinghubprojectspage.py
new file mode 100644
index 0000000..28270ff
--- /dev/null
+++ b/app/mapping_hubs/migrations/0024_delete_mappinghubprojectspage.py
@@ -0,0 +1,16 @@
+# Generated by Django 4.2.7 on 2024-11-06 22:52
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('mapping_hubs', '0023_openmappinghubspage_header_project_link'),
+    ]
+
+    operations = [
+        migrations.DeleteModel(
+            name='MappingHubProjectsPage',
+        ),
+    ]
diff --git a/app/mapping_hubs/migrations/0025_remove_individualmappinghubpage_header_project_link.py b/app/mapping_hubs/migrations/0025_remove_individualmappinghubpage_header_project_link.py
new file mode 100644
index 0000000..4d89f60
--- /dev/null
+++ b/app/mapping_hubs/migrations/0025_remove_individualmappinghubpage_header_project_link.py
@@ -0,0 +1,17 @@
+# Generated by Django 4.2.7 on 2024-11-06 22:55
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('mapping_hubs', '0024_delete_mappinghubprojectspage'),
+    ]
+
+    operations = [
+        migrations.RemoveField(
+            model_name='individualmappinghubpage',
+            name='header_project_link',
+        ),
+    ]
diff --git a/app/mapping_hubs/models.py b/app/mapping_hubs/models.py
index 4e39d74..d1b8dd1 100644
--- a/app/mapping_hubs/models.py
+++ b/app/mapping_hubs/models.py
@@ -34,51 +34,6 @@ class DogearBoxBlock(StreamBlock):
     blocks = DogearBoxStructBlock()
 
 
-class MappingHubProjectsPage(Page):
-    def get_context(self, request):
-        context = super().get_context(request)
-
-        parent_hub = context['page'].get_parent()
-
-        base_id = parent_hub.get_translation(1).id
-
-        projects = IndividualProjectPage.objects.live().filter(
-            Q(region_hub_list__contains=[{'type': 'region_hub', 'value': base_id}])
-        ).filter(locale=context['page'].locale)
-
-        other_hubs_projects = MappingHubProjectsPage.objects.live().filter(locale=context['page'].locale)
-
-        context['projects'] = projects
-        context['other_hubs'] = other_hubs_projects
-        return context
-    
-    parent_page_types = [
-        'mapping_hubs.IndividualMappingHubPage'
-    ]
-
-    load_more_projects_text = models.CharField(default="Load More Projects")
-
-    projects_by_hub_title = models.CharField(default="See Projects by Open Mapping Hub")
-
-    red_box_title = models.CharField(default="See all of HOT's projects")
-    red_box_link_text = models.CharField(default="Explore projects")
-    red_box_link = StreamField(LinkOrPageBlock(), use_json_field=True, blank=True)
-    black_box_title = models.CharField(default="See the many ways to get involved with HOT and open mapping")
-    black_box_link_text = models.CharField(default="Get involved")
-    black_box_link = StreamField(LinkOrPageBlock(), use_json_field=True, blank=True)
-
-    content_panels = Page.content_panels + [
-        FieldPanel('load_more_projects_text'),
-        FieldPanel('projects_by_hub_title'),
-        FieldPanel('red_box_title'),
-        FieldPanel('red_box_link_text'),
-        FieldPanel('red_box_link'),
-        FieldPanel('black_box_title'),
-        FieldPanel('black_box_link_text'),
-        FieldPanel('black_box_link'),
-    ]
-
-
 class OpenMappingHubsPage(Page):
     max_count = 1
 
@@ -101,6 +56,7 @@ class OpenMappingHubsPage(Page):
     header_hub_text_white = models.CharField(default="Open Mapping")
     header_hub_text_red = models.CharField(default="Hub")
     header_project_link_text = models.CharField(default="Projects")
+    header_project_link = StreamField(LinkOrPageBlock(), use_json_field=True, blank=True)
     header_news_link_text = models.CharField(default="News")
     header_news_link = StreamField(LinkOrPageBlock(), use_json_field=True, blank=True)
     header_events_link_text = models.CharField(default="Events")
@@ -126,6 +82,7 @@ class OpenMappingHubsPage(Page):
                 FieldPanel('header_hub_text_white'),
                 FieldPanel('header_hub_text_red'),
                 FieldPanel('header_project_link_text'),
+                FieldPanel('header_project_link'),
                 FieldPanel('header_news_link_text'),
                 FieldPanel('header_news_link'),
                 FieldPanel('header_events_link_text'),
@@ -193,7 +150,6 @@ def get_context(self, request):
         related_name="+",
         help_text="Header image",
     )
-    header_project_link = StreamField(LinkOrPageBlock(), use_json_field=True, blank=True)
     header_carousel = StreamField(CarouselBlock(max_num=3, min_num=3), blank=True, use_json_field=True, null=True)
 
     project_section_title = models.CharField()
@@ -232,7 +188,6 @@ def get_context(self, request):
         ], heading="Main"),
         MultiFieldPanel([
             FieldPanel('header_image'),
-            FieldPanel('header_project_link'),
             FieldPanel('header_carousel'),
         ], heading="Header"),
         MultiFieldPanel([
diff --git a/app/mapping_hubs/templates/mapping_hubs/components/header.html b/app/mapping_hubs/templates/mapping_hubs/components/header.html
index b63df55..c4497d0 100644
--- a/app/mapping_hubs/templates/mapping_hubs/components/header.html
+++ b/app/mapping_hubs/templates/mapping_hubs/components/header.html
@@ -20,7 +20,7 @@ <h1 class="text-h1 font-semibold mb-4">
                     </h1>
                     <div class="grid gap-4">
                         <p>
-                            {% include "ui/components/BaseLinkNoUnderlineWhite.html" with linkurl=page.header_project_link linktext=page.get_parent.specific.header_project_link_text %}
+                            {% include "ui/components/BaseLinkNoUnderlineWhite.html" with linkurl=page.get_parent.specific.header_project_link linktext=page.get_parent.specific.header_project_link_text linkappendage="?hub"|add:original_id|add:"=on" %}
                         </p>
                         {% with page.id|stringformat:"s" as id %}
                             <p>
diff --git a/app/mapping_hubs/templates/mapping_hubs/individual_mapping_hub_page.html b/app/mapping_hubs/templates/mapping_hubs/individual_mapping_hub_page.html
index 2317633..a541ded 100644
--- a/app/mapping_hubs/templates/mapping_hubs/individual_mapping_hub_page.html
+++ b/app/mapping_hubs/templates/mapping_hubs/individual_mapping_hub_page.html
@@ -30,7 +30,7 @@
                     {% include "ui/components/SectionHeadingWithUnderline.html" with title=page.project_section_title %}
                 </div>
                 <div class="text-left lg:text-right text-intro mt-4 lg:mt-0 self-center">
-                    {% include "ui/components/BaseLink.html" with linktext=page.project_section_link_text linkurl=page.project_section_link %}
+                    {% include "ui/components/BaseLink.html" with linktext=page.project_section_link_text linkurl=page.get_parent.specific.header_project_link linkappendage="?hub"|add:original_id|add:"=on" %}
                 </div>
             </div>
             <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10 py-6">
diff --git a/app/misc/templates/misc/components/OurApproachWhatWeDo.html b/app/misc/templates/misc/components/OurApproachWhatWeDo.html
index 9ddbca7..e4112d1 100644
--- a/app/misc/templates/misc/components/OurApproachWhatWeDo.html
+++ b/app/misc/templates/misc/components/OurApproachWhatWeDo.html
@@ -26,7 +26,7 @@
   </g>
   <text id="Develop_accessible_open-source_mapping_products" data-name="{{page.what_we_do_items.2.value}}" transform="translate(504 333)" font-size="20" font-family="inherit" font-weight="500"><tspan x="0" y="18">{{page.what_we_do_items.2.value}}</tspan></text>
   <ellipse id="Ellipse_320" data-name="Ellipse 320" cx="199.5" cy="200" rx="199.5" ry="200" fill="#f0efef"/>
-  <text id="What_We_Do" data-name="What We Do" transform="translate(79 182)" font-size="38" font-family="inherit" font-weight="700" text-anchor="middle"><tspan x="125" y="33">What We Do</tspan></text>
+  <text id="What_We_Do" data-name="{{page.what_we_do_title}}" transform="translate(79 182)" font-size="38" font-family="inherit" font-weight="700" text-anchor="middle"><tspan x="125" y="33">{{page.what_we_do_title}}</tspan></text>
   <g id="Mask_Group_13" data-name="Mask Group 13" transform="translate(-71 -602)" clip-path="url(#clip-path)">
     <g id="Ellipse_360" data-name="Ellipse 360" transform="translate(-33 506)" fill="none" stroke="#c4c4c4" stroke-width="3" stroke-dasharray="5 8">
       <circle cx="294" cy="294" r="294" stroke="none"/>
diff --git a/app/misc/templates/misc/components/OurApproachWhatWeDoMobile.html b/app/misc/templates/misc/components/OurApproachWhatWeDoMobile.html
index 179b27a..160992e 100644
--- a/app/misc/templates/misc/components/OurApproachWhatWeDoMobile.html
+++ b/app/misc/templates/misc/components/OurApproachWhatWeDoMobile.html
@@ -7,7 +7,7 @@
             </clipPath>
         </defs>
         <circle id="Ellipse_320" data-name="Ellipse 320" cx="175" cy="175" r="175" fill="#f0efef"/>
-        <text id="What_We_Do" data-name="What We Do" transform="translate(54 157)" font-size="32" font-family="inherit" font-weight="700"><tspan x="29.352" y="28">What We Do</tspan></text>
+        <text id="What_We_Do" data-name="{{page.what_we_do_title}}" transform="translate(54 157)" font-size="32" font-family="inherit" font-weight="700"><tspan x="29.352" y="28">{{page.what_we_do_title}}</tspan></text>
         <g id="Mask_Group_13" data-name="Mask Group 13" transform="translate(954 -140) rotate(90)" clip-path="url(#clip-path)" style="clip-path: ellipse(500px 150px);">
             <g id="Ellipse_360" data-name="Ellipse 360" transform="translate(-33 521)" fill="none" stroke="#c4c4c4" stroke-width="3" stroke-dasharray="5 8">
                 <ellipse cx="294" cy="255" rx="294" ry="255" stroke="none"/>
diff --git a/app/misc/templates/misc/contact_us_page.html b/app/misc/templates/misc/contact_us_page.html
index f890d4a..f4ba53c 100644
--- a/app/misc/templates/misc/contact_us_page.html
+++ b/app/misc/templates/misc/contact_us_page.html
@@ -98,7 +98,7 @@ <h1 class="text-h2 font-bold">
                 </div>
 
                 <div class="text-black mt-20 pb-20 [&_h1]:text-black [&_a]:text-black">
-                    {% include "ui/components/dogear_boxes/DogearAnyColourLong.html" with colour="var(--hot-off-white)" title=page.dogear_box_title linktext=page.dogear_box_link_text linkurl=page.dogear_box_link %}
+                    {% include "ui/components/dogear_boxes/DogearAnyColourLong.html" with colour="var(--hot-off-white)" title=page.dogear_box_title linktext=page.dogear_box_link_text linkurl=page.dogear_box_link variableicon=True %}
                 </div>
             </div>
         </div>
diff --git a/app/our_work/migrations/0006_ourworkpage_projects_link.py b/app/our_work/migrations/0006_ourworkpage_projects_link.py
new file mode 100644
index 0000000..439a4c8
--- /dev/null
+++ b/app/our_work/migrations/0006_ourworkpage_projects_link.py
@@ -0,0 +1,19 @@
+# Generated by Django 4.2.7 on 2024-11-06 23:12
+
+from django.db import migrations
+import wagtail.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('our_work', '0005_alter_ourworkpage_black_box_link_and_more'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='ourworkpage',
+            name='projects_link',
+            field=wagtail.fields.StreamField([('page', 0), ('url', 1), ('document', 2), ('other', 3)], blank=True, block_lookup={0: ('wagtail.blocks.PageChooserBlock', (), {}), 1: ('wagtail.blocks.URLBlock', (), {}), 2: ('wagtail.documents.blocks.DocumentChooserBlock', (), {}), 3: ('wagtail.blocks.CharBlock', (), {'help_text': "Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."})}),
+        ),
+    ]
diff --git a/app/our_work/models.py b/app/our_work/models.py
index 88e7ded..0788340 100644
--- a/app/our_work/models.py
+++ b/app/our_work/models.py
@@ -14,7 +14,7 @@
 
 from app.projects.models import IndividualProjectPage, ProjectType, ProjectStatus
 from app.impact_areas.models import IndividualImpactAreaPage
-from app.mapping_hubs.models import MappingHubProjectsPage, IndividualMappingHubPage
+from app.mapping_hubs.models import IndividualMappingHubPage
 from app.programs.models import IndividualProgramPage
 from app.core.models import LinkOrPageBlock
 
@@ -97,7 +97,6 @@ def get_context(self, request, *args, **kwargs):
         context['paginator'] = paginator
         context['impact_areas'] = IndividualImpactAreaPage.objects.live().filter(locale=base_locale)
         context['hubs'] = IndividualMappingHubPage.objects.live().filter(locale=base_locale)
-        context['hubs_projects'] = MappingHubProjectsPage.objects.live().filter(locale=base_locale)
         context['programs'] = IndividualProgramPage.objects.live().filter(locale=base_locale)
         context['types'] = ProjectType.objects.all()
         context['statuses'] = ProjectStatus.objects.all()
@@ -176,6 +175,7 @@ def serve(self, request, *args, **kwargs):
     no_projects_found = models.CharField(default="No projects found with the applied filters.")
     impact_area_title = models.CharField(default="See Projects by Impact Area")
     open_mapping_hub_title = models.CharField(default="See Projects by Open Mapping Hub")
+    projects_link = StreamField(LinkOrPageBlock(), use_json_field=True, blank=True)
 
     red_box_title = models.CharField(default="Check our upcoming events!")
     red_box_link_text = models.CharField(default="View all events")
@@ -218,6 +218,7 @@ def serve(self, request, *args, **kwargs):
         MultiFieldPanel([
             FieldPanel('impact_area_title'),
             FieldPanel('open_mapping_hub_title'),
+            FieldPanel('projects_link'),
             FieldPanel('red_box_title'),
             FieldPanel('red_box_link_text'),
             FieldPanel('red_box_link'),
diff --git a/app/our_work/templates/our_work/our_work_page.html b/app/our_work/templates/our_work/our_work_page.html
index 49552fb..33647a4 100644
--- a/app/our_work/templates/our_work/our_work_page.html
+++ b/app/our_work/templates/our_work/our_work_page.html
@@ -30,7 +30,7 @@ <h2 class="text-h2 font-bold">
                     </div>
                 </div>
                 <div class="col-span-2 lg:text-right text-intro">
-                    {% include "ui/components/BaseLink.html" with linktext=page.view_all_programs_text linkurl=page.view_all_programs_url %}
+                    {% include "ui/components/BaseLink.html" with linktext=page.view_all_programs_text linkurl=page.view_all_programs_link %}
                 </div>
             </div>
             <div class="mb-10">
@@ -51,15 +51,15 @@ <h1 class="text-h2 font-bold">
                     hx-select-oob="#projects-list:outerHTML, #next-project:outerHTML, #projects-list-map:outerHTML, #next-project-map:outerHTML"
                     @submit="$store.formdata = new FormData($el); refreshWithSearch();"
                 >
-                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-10 gap-8">
+                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 lg:gap-y-4">
                         {% comment %} KEYWORD SEARCH {% endcomment %}
-                        <div class="bg-hot-off-white flex items-center lg:col-span-3">
+                        <div class="bg-hot-off-white flex items-center">
                             <input class="w-full bg-transparent border-none" placeholder="{{page.search_keyword_text}}" type="text" name="keyword" :value="params.get('keyword')">
                             {% include "ui/components/icon_svgs/SearchIcon.html" with class="text-hot-red mx-3" %}
                         </div>
 
                         {% comment %} SORT {% endcomment %}
-                        <div class="relative lg:col-span-3" x-data="{ show: false, setSortType(text) {$refs.sorttype.innerText = text} }" @click.away="show = false">
+                        <div class="relative" x-data="{ show: false, setSortType(text) {$refs.sorttype.innerText = text} }" @click.away="show = false">
                             <div class="w-full h-full flex justify-between py-2 px-3 bg-hot-off-white items-center cursor-pointer" @click="show = !show">
                                 <p class="pointer-events-none overflow-hidden text-nowrap" x-ref="sorttype">
                                     {{page.sort_titlea_text}}
@@ -73,37 +73,39 @@ <h1 class="text-h2 font-bold">
                             </div>
                         </div>
 
-                        <input class="hidden" id="showFilters" type="checkbox" name="showFilters" :checked="showFilters">
-                        <input class="hidden" id="mapView" type="checkbox" name="mapView" :checked="mapView">
-                        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8 md:col-span-2 lg:col-span-4">
-                            <div class="cursor-pointer lg:col-span-1 relative after:absolute after:h-10 after:w-full after:bg-hot-off-white after:hidden" :class="showFilters ? 'bg-hot-off-white md:after:block' : 'bg-hot-red text-white'" @click="showFilters = !showFilters">
-                                <p class="font-medium py-2 px-3 flex">
-                                    {{page.filters_text}}
-                                    <span class="ml-auto">{% include "ui/components/icon_svgs/FilterIcon.html" %}</span>
+                        <div class="text-white text-intro font-medium font-archivo py-1 bg-hot-red border-2 border-hot-red text-hot-white px-hot-3 hover:bg-hot-off-white hover:text-hot-red focus:bg-transparent focus:text-hot-red focus:ring-2 focus:ring-hot-red focus:ring-inset">
+                            <input type="submit" value="{{page.f_apply_filter_text}}" class="bg-transparent w-full h-full cursor-pointer">
+                        </div>
+
+                        <div class="grid grid-cols-2 lg:col-span-1">
+                            <div class="py-2 px-3 cursor-pointer" :class="mapView ? 'bg-hot-off-white' : 'bg-hot-red text-white'" @click="mapView = false">
+                                <p class="font-medium flex items-center">
+                                    <span class="mr-2">{% include "ui/components/icon_svgs/ViewGridIcon.html" %}</span>
+                                    {{page.view_grid_text}}
                                 </p>
                             </div>
-                            
-                            <div class="grid grid-cols-2 lg:col-span-2">
-                                <div class="py-2 px-3 cursor-pointer" :class="mapView ? 'bg-hot-off-white' : 'bg-hot-red text-white'" @click="mapView = false">
-                                    <p class="font-medium flex items-center">
-                                        <span class="mr-2">{% include "ui/components/icon_svgs/ViewGridIcon.html" %}</span>
-                                        {{page.view_grid_text}}
-                                    </p>
-                                </div>
-                                <div class="py-2 px-3 cursor-pointer" :class="!mapView ? 'bg-hot-off-white' : 'bg-hot-red text-white'" @click="mapView = true">
-                                    <p class="font-medium flex items-center">
-                                        <span class="mr-2">{% include "ui/components/icon_svgs/MapIcon.html" %}</span>
-                                        {{page.view_map_text}}
-                                    </p>
-                                </div>
+                            <div class="py-2 px-3 cursor-pointer" :class="!mapView ? 'bg-hot-off-white' : 'bg-hot-red text-white'" @click="mapView = true">
+                                <p class="font-medium flex items-center">
+                                    <span class="mr-2">{% include "ui/components/icon_svgs/MapIcon.html" %}</span>
+                                    {{page.view_map_text}}
+                                </p>
                             </div>
                         </div>
+
+                        <input class="hidden" id="showFilters" type="checkbox" name="showFilters" :checked="showFilters">
+                        <input class="hidden" id="mapView" type="checkbox" name="mapView" :checked="mapView">
                         
+                        <div class="cursor-pointer lg:col-span-1 relative after:absolute after:h-10 after:w-full after:bg-hot-off-white after:hidden" :class="showFilters ? 'bg-hot-off-white md:after:block' : 'bg-hot-red text-white'" @click="showFilters = !showFilters">
+                            <p class="font-medium py-2 px-3 flex">
+                                {{page.filters_text}}
+                                <span class="ml-auto">{% include "ui/components/icon_svgs/FilterIcon.html" %}</span>
+                            </p>
+                        </div>
                     </div>
 
                     {% comment %} MAP AND FILTER CONTAINER {% endcomment %}
                     <div class="grid mt-4" x-show="mapView || showFilters" x-data="{ selectedProject: undefined }">
-                        <div class="md:col-start-1 md:row-start-1 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 min-h-[30rem]" :class="mapView ? '' : 'invisible hidden md:block'">
+                        <div class="md:col-start-1 md:row-start-1 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 min-h-[30rem] order-2 md:order-1" :class="mapView ? '' : 'invisible hidden md:block'">
                             {% comment %} MAP {% endcomment %}
                             <div class="lg:col-span-2 md:order-2 min-h-[30rem] [&_.mapboxgl-marker_path]:fill-hot-red" id="map"></div>
                             {% comment %} PROJECTS {% endcomment %}
@@ -146,7 +148,7 @@ <h1 class="text-h2 font-bold">
                         </div>
                         
                         {% comment %} FILTERS {% endcomment %}
-                        <div class="md:col-start-1 md:row-start-1 min-h-[30rem] bg-hot-off-white z-10 px-12 py-10" :class="showFilters ? '' : 'invisible hidden md:block'">
+                        <div class="md:col-start-1 md:row-start-1 min-h-[30rem] bg-hot-off-white z-10 px-12 py-10 order-1 md:order-2" :class="showFilters ? '' : 'invisible hidden md:block'">
                             <div class="grid lg:grid-cols-3 gap-8">
                                 {% include "./components/FilterCategoryPage.html" with pages=impact_areas denoter="ia" title=page.f_impact_areas_text %}
                                 {% include "./components/FilterCategoryPage.html" with pages=hubs denoter="hub" title=page.f_open_mapping_hubs_text %}
@@ -234,8 +236,8 @@ <h1 class="text-h2 font-bold mb-8">
                     {{page.open_mapping_hub_title}}
                 </h1>
                 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
-                    {% for hub_project in hubs_projects %}
-                        {% include "ui/components/mapping_hub/MappingHubPreviewProjectsBlock.html" %}
+                    {% for hub in hubs %}
+                        {% include "ui/components/mapping_hub/MappingHubPreviewProjectsBlock.html" with baselink=page.projects_link %}
                     {% endfor %}
                 </div>
             </div>
diff --git a/app/projects/migrations/0043_projectownerpage_apply_filter_text_and_more.py b/app/projects/migrations/0043_projectownerpage_apply_filter_text_and_more.py
new file mode 100644
index 0000000..351a8c4
--- /dev/null
+++ b/app/projects/migrations/0043_projectownerpage_apply_filter_text_and_more.py
@@ -0,0 +1,73 @@
+# Generated by Django 4.2.7 on 2024-11-06 20:21
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('projects', '0042_alter_individualprojectpage_contact'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='projectownerpage',
+            name='apply_filter_text',
+            field=models.CharField(default='Apply Filter'),
+        ),
+        migrations.AddField(
+            model_name='projectownerpage',
+            name='impact_areas_text',
+            field=models.CharField(default='Impact Areas'),
+        ),
+        migrations.AddField(
+            model_name='projectownerpage',
+            name='open_mapping_hubs_text',
+            field=models.CharField(default='Open Mapping Hubs'),
+        ),
+        migrations.AddField(
+            model_name='projectownerpage',
+            name='project_status_text',
+            field=models.CharField(default='Project Status'),
+        ),
+        migrations.AddField(
+            model_name='projectownerpage',
+            name='projects_by_programme_text',
+            field=models.CharField(default='Projects by Programme'),
+        ),
+        migrations.AddField(
+            model_name='projectownerpage',
+            name='projects_by_type_text',
+            field=models.CharField(default='Projects by Type'),
+        ),
+        migrations.AddField(
+            model_name='projectownerpage',
+            name='reset_filters_text',
+            field=models.CharField(default='Reset Filters'),
+        ),
+        migrations.AddField(
+            model_name='projectownerpage',
+            name='search_keyword_text',
+            field=models.CharField(default='Search by keyword'),
+        ),
+        migrations.AddField(
+            model_name='projectownerpage',
+            name='sort_new_text',
+            field=models.CharField(default='Sort by New'),
+        ),
+        migrations.AddField(
+            model_name='projectownerpage',
+            name='sort_old_text',
+            field=models.CharField(default='Sort by Old'),
+        ),
+        migrations.AddField(
+            model_name='projectownerpage',
+            name='sort_titlea_text',
+            field=models.CharField(default='Sort by Name Alphabetical'),
+        ),
+        migrations.AddField(
+            model_name='projectownerpage',
+            name='sort_titlez_text',
+            field=models.CharField(default='Sort by Name Reverse Alphabetical'),
+        ),
+    ]
diff --git a/app/projects/migrations/0044_remove_projectownerpage_sort_new_text_and_more.py b/app/projects/migrations/0044_remove_projectownerpage_sort_new_text_and_more.py
new file mode 100644
index 0000000..a120b69
--- /dev/null
+++ b/app/projects/migrations/0044_remove_projectownerpage_sort_new_text_and_more.py
@@ -0,0 +1,21 @@
+# Generated by Django 4.2.7 on 2024-11-06 20:26
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('projects', '0043_projectownerpage_apply_filter_text_and_more'),
+    ]
+
+    operations = [
+        migrations.RemoveField(
+            model_name='projectownerpage',
+            name='sort_new_text',
+        ),
+        migrations.RemoveField(
+            model_name='projectownerpage',
+            name='sort_old_text',
+        ),
+    ]
diff --git a/app/projects/migrations/0045_projectownerpage_applied_text_and_more.py b/app/projects/migrations/0045_projectownerpage_applied_text_and_more.py
new file mode 100644
index 0000000..aea9416
--- /dev/null
+++ b/app/projects/migrations/0045_projectownerpage_applied_text_and_more.py
@@ -0,0 +1,43 @@
+# Generated by Django 4.2.7 on 2024-11-06 20:55
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('projects', '0044_remove_projectownerpage_sort_new_text_and_more'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='projectownerpage',
+            name='applied_text',
+            field=models.CharField(default='applied'),
+        ),
+        migrations.AlterField(
+            model_name='projectownerpage',
+            name='impact_areas_text',
+            field=models.CharField(default='Filter by Impact Area'),
+        ),
+        migrations.AlterField(
+            model_name='projectownerpage',
+            name='open_mapping_hubs_text',
+            field=models.CharField(default='Filter by Hub'),
+        ),
+        migrations.AlterField(
+            model_name='projectownerpage',
+            name='project_status_text',
+            field=models.CharField(default='Filter by Status'),
+        ),
+        migrations.AlterField(
+            model_name='projectownerpage',
+            name='projects_by_programme_text',
+            field=models.CharField(default='Filter by Program'),
+        ),
+        migrations.AlterField(
+            model_name='projectownerpage',
+            name='projects_by_type_text',
+            field=models.CharField(default='Filter by Type'),
+        ),
+    ]
diff --git a/app/projects/migrations/0046_projectownerpage_results_text.py b/app/projects/migrations/0046_projectownerpage_results_text.py
new file mode 100644
index 0000000..6c62ba1
--- /dev/null
+++ b/app/projects/migrations/0046_projectownerpage_results_text.py
@@ -0,0 +1,18 @@
+# Generated by Django 4.2.7 on 2024-11-06 22:16
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('projects', '0045_projectownerpage_applied_text_and_more'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='projectownerpage',
+            name='results_text',
+            field=models.CharField(default='Results'),
+        ),
+    ]
diff --git a/app/projects/migrations/0047_projectownerpage_bottom_dogear_link_and_more.py b/app/projects/migrations/0047_projectownerpage_bottom_dogear_link_and_more.py
new file mode 100644
index 0000000..342601c
--- /dev/null
+++ b/app/projects/migrations/0047_projectownerpage_bottom_dogear_link_and_more.py
@@ -0,0 +1,29 @@
+# Generated by Django 4.2.7 on 2024-11-07 22:09
+
+from django.db import migrations, models
+import wagtail.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('projects', '0046_projectownerpage_results_text'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='projectownerpage',
+            name='bottom_dogear_link',
+            field=wagtail.fields.StreamField([('page', 0), ('url', 1), ('document', 2), ('other', 3)], blank=True, block_lookup={0: ('wagtail.blocks.PageChooserBlock', (), {}), 1: ('wagtail.blocks.URLBlock', (), {}), 2: ('wagtail.documents.blocks.DocumentChooserBlock', (), {}), 3: ('wagtail.blocks.CharBlock', (), {'help_text': "Only use this option as a last resort. The other fields are preferred. In cases like email 'mailto' links, however, this field can be used. Ensure that your provided link will function as intended prior to publishing live."})}),
+        ),
+        migrations.AddField(
+            model_name='projectownerpage',
+            name='bottom_dogear_link_text',
+            field=models.CharField(default='Check our work'),
+        ),
+        migrations.AddField(
+            model_name='projectownerpage',
+            name='bottom_dogear_title',
+            field=models.CharField(default='See our projects on the map'),
+        ),
+    ]
diff --git a/app/projects/models.py b/app/projects/models.py
index 9b82689..b951852 100644
--- a/app/projects/models.py
+++ b/app/projects/models.py
@@ -16,6 +16,10 @@
 from modelcluster.fields import ParentalKey, ParentalManyToManyField
 
 from app.core.models import LinkOrPageBlock, Partner
+import importlib
+# from app.impact_areas.models import IndividualImpactAreaPage
+# from app.mapping_hubs.models import MappingHubProjectsPage, IndividualMappingHubPage
+# from app.programs.models import IndividualProgramPage
 
 
 """
@@ -26,8 +30,68 @@
 class ProjectOwnerPage(Page):
     def get_context(self, request, *args, **kwargs):
         context = super().get_context(request, *args, **kwargs)
+        
+        ia_module = importlib.import_module("app.impact_areas.models")
+        IndividualImpactAreaPage = getattr(ia_module, "IndividualImpactAreaPage")
+        hub_module = importlib.import_module("app.mapping_hubs.models")
+        IndividualMappingHubPage = getattr(hub_module, "IndividualMappingHubPage")
+        pr_module = importlib.import_module("app.programs.models")
+        IndividualProgramPage = getattr(pr_module, "IndividualProgramPage")
+
+        projects_list = IndividualProjectPage.objects.live().filter(locale=context['page'].locale)
+
+        keyword = request.GET.get('keyword', '')
+
+        if keyword:
+            projects_list = projects_list.search(keyword).get_queryset()
+        
+        p_types = ProjectType.objects.all()
+        query = Q()
+        for p_type in p_types:
+            if request.GET.get("pt" + str(p_type.id), ''):
+                query = query | Q(types=p_type)
+        projects_list = projects_list.filter(query).distinct()
+
+        if request.GET.get("status", 'statusnone') != "statusnone":
+            statuses = ProjectStatus.objects.all()
+            query = Q()
+            for status in statuses:
+                if request.GET.get("status", '') == f"status{status.id}":
+                    query = query | Q(project_status=status)
+                    break
+            projects_list = projects_list.filter(query).distinct()
+        
+        base_locale = context['page'].get_translation(1).locale
+        
+        hubs = IndividualMappingHubPage.objects.live().filter(locale=base_locale)
+        query = Q()
+        for hub in hubs:
+            if request.GET.get(f"hub{hub.id}", ''):
+                query = query | Q(region_hub_list__contains=[{'type': 'region_hub', 'value': hub.id }])
+        projects_list = projects_list.filter(query).distinct()
+        
+        impact_areas = IndividualImpactAreaPage.objects.live().filter(locale=base_locale)
+        query = Q()
+        for area in impact_areas:
+            if request.GET.get(f"ia{area.id}", ''):
+                query = query | Q(impact_area_list__contains=[{'type': 'impact_area', 'value': area.id }])
+        projects_list = projects_list.filter(query).distinct()
+
+        programs = IndividualProgramPage.objects.live().filter(locale=base_locale)
+        query = Q()
+        for program in programs:
+            if request.GET.get(f"pg{program.id}", ''):
+                query = query | Q(owner_program=program)
+        projects_list = projects_list.filter(query).distinct()
+
+        match request.GET.get('sort', ''):
+            case 'sort.titlea':
+                projects_list = projects_list.order_by('title')
+            case 'sort.titlez':
+                projects_list = projects_list.order_by('-title')
+            case _:
+                projects_list = projects_list.order_by('title')
 
-        projects_list = context['page'].get_children().filter(locale=context['page'].locale)
         page = request.GET.get('page', 1)
         paginator = Paginator(projects_list, 8)  # if you want more/less items per page (i.e., per load), change the number here to something else
         try:
@@ -36,7 +100,15 @@ def get_context(self, request, *args, **kwargs):
             projects = paginator.page(1)
         except EmptyPage:
             projects = paginator.page(paginator.num_pages)
+
         context['projects'] = projects
+        context['paginator'] = paginator
+        context['impact_areas'] = impact_areas
+        context['hubs'] = hubs
+        context['programs'] = programs
+        context['types'] = ProjectType.objects.all()
+        context['statuses'] = ProjectStatus.objects.all()
+        context['current_page'] = int(page)
         return context
     
     max_count = 1
@@ -54,8 +126,25 @@ def get_context(self, request, *args, **kwargs):
         help_text="Header image"
     )
 
+    search_keyword_text = models.CharField(default="Search by keyword")
+    sort_titlea_text = models.CharField(default="Sort by Name Alphabetical")
+    sort_titlez_text = models.CharField(default="Sort by Name Reverse Alphabetical")
+    impact_areas_text = models.CharField(default="Filter by Impact Area")
+    open_mapping_hubs_text = models.CharField(default="Filter by Hub")
+    projects_by_programme_text = models.CharField(default="Filter by Program")
+    projects_by_type_text = models.CharField(default="Filter by Type")
+    project_status_text = models.CharField(default="Filter by Status")
+    apply_filter_text = models.CharField(default="Apply Filter")
+    reset_filters_text = models.CharField(default="Reset Filters")
+    applied_text = models.CharField(default="applied")
+    
+    results_text = models.CharField(default="Results")
     load_more_projects_text = models.CharField(default="Load More Projects")
 
+    bottom_dogear_title = models.CharField(default="See our projects on the map")
+    bottom_dogear_link_text = models.CharField(default="Check our work")
+    bottom_dogear_link = StreamField(LinkOrPageBlock(), use_json_field=True, blank=True)
+
     impact_areas_title = models.CharField(default="Impact Areas")
     region_hub_title = models.CharField(default="Region Hub/Country")
     duration_title = models.CharField(default="Duration")
@@ -81,7 +170,24 @@ def get_context(self, request, *args, **kwargs):
     content_panels = Page.content_panels + [
         MultiFieldPanel([
             FieldPanel('header_image'),
+            MultiFieldPanel([
+                FieldPanel('search_keyword_text'),
+                FieldPanel('sort_titlea_text'),
+                FieldPanel('sort_titlez_text'),
+                FieldPanel('impact_areas_text'),
+                FieldPanel('open_mapping_hubs_text'),
+                FieldPanel('projects_by_programme_text'),
+                FieldPanel('projects_by_type_text'),
+                FieldPanel('project_status_text'),
+                FieldPanel('apply_filter_text'),
+                FieldPanel('reset_filters_text'),
+                FieldPanel('applied_text'),
+            ], heading="Filters"),
+            FieldPanel('results_text'),
             FieldPanel('load_more_projects_text'),
+            FieldPanel('bottom_dogear_title'),
+            FieldPanel('bottom_dogear_link_text'),
+            FieldPanel('bottom_dogear_link'),
         ], heading="Project Page"),
         MultiFieldPanel([
             MultiFieldPanel([
diff --git a/app/projects/templates/projects/project_owner_page.html b/app/projects/templates/projects/project_owner_page.html
index f110ee2..698ba9b 100644
--- a/app/projects/templates/projects/project_owner_page.html
+++ b/app/projects/templates/projects/project_owner_page.html
@@ -10,30 +10,172 @@
 {% endblock extra_css %}
 
 {% block content %}
-    {% include "ui/components/BasePageHeader.html" with title=page.title image=page.header_image %}
-    <div class="max-w-7xl mx-auto my-10" x-data="{ params: new URLSearchParams((new URL(window.location.href)).search) }">
+    {% include "ui/components/PageHeaderWithBlur.html" with title=page.title image=page.header_image endinlarge=True %}
+    <div class="max-w-7xl mx-auto mt-10 mb-20" x-data="{ 
+        params: new URLSearchParams((new URL(window.location.href)).search), 
+        activeParams: new URLSearchParams((new URL(window.location.href)).search), 
+        {% include 'ui/components/utilities/FormGetActiveXData.js' %}, 
+    }">
         <div class="px-6 md:px-10">
-            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8" id="projects-list">
-                {% for project in projects %}
-                    {% include "ui/components/projects/ProjectPreviewBlockNews.html" with project=project.specific showimage=True %}
-                {% endfor %}
-            </div>
-            <p class="text-center mt-10" id="next-project" class="{% if not projects.has_next %}hidden{% endif %}">
-                {% if projects.has_next %}
-                        {% comment %} <a href="?page={{ projects.next_page_number }}"></a> {% endcomment %}
-                        <button hx-get="?page={{ projects.next_page_number }}"
-                            hx-trigger="click"
-                            hx-select="#projects-list, #next-project"
-                            hx-swap="beforeend"
-                            hx-select-oob="#projects-list:beforeend, #next-project:outerHTML"
-                        >
-                            <span class="border-b-hot-red border-b-2 pb-1 font-medium mr-4 text-intro">
-                                {{page.load_more_projects_text}}
-                            </span>
+            <form id="search-form"
+                hx-get="{{page.url}}"
+                hx-trigger="submit"
+                hx-target="#items-list, #paginator-navigation"
+                hx-select="#items-list, #paginator-navigation"
+                hx-swap="innerHTML"
+                hx-select-oob="#items-list:outerHTML, #paginator-navigation:innerHTML"
+                @submit="activeParams = new FormData($el);"
+            >
+                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+                    {% comment %} KEYWORD SEARCH {% endcomment %}
+                    <div class="bg-hot-off-white flex items-center">
+                        <input class="w-full bg-transparent border-none" placeholder="{{page.search_keyword_text}}" type="text" name="keyword" :value="params.get('keyword')">
+                        {% include "ui/components/icon_svgs/SearchIcon.html" with class="text-hot-red mx-3" %}
+                    </div>
+
+                    {% comment %} SORT {% endcomment %}
+                    <div class="relative" x-data="{ show: false, setSortType(text) {$refs.sorttype.innerText = text} }" @click.away="show = false">
+                        <div class="w-full h-full flex justify-between py-2 px-3 bg-hot-off-white items-center cursor-pointer" @click="show = !show">
+                            <p class="pointer-events-none" x-ref="sorttype">
+                                {{page.sort_titlea_text}}
+                            </p>
+                        {% include "ui/components/icon_svgs/LinkCaret.html" with class="rotate-90 text-hot-red" %}
+                        </div>
+                        <div class="absolute z-20 bg-hot-off-white p-4 w-full" x-show="show">
+                            <hr class="border-b-2">
+                            {% include "our_work/components/ProjectSortOption.html" with sort_by=page.sort_titlea_text sort_id="sort.titlea" %}
+                            {% include "our_work/components/ProjectSortOption.html" with sort_by=page.sort_titlez_text sort_id="sort.titlez" %}
+                        </div>
+                    </div>
+
+                    {% comment %} HUB {% endcomment %}
+                    <div class="relative" x-data="{ show: false }" @click.away="show = false">
+                        <div class="w-full h-full flex justify-between py-2 px-3 bg-hot-off-white items-center cursor-pointer" @click="show = !show">
+                            <p class="pointer-events-none">
+                                {{page.open_mapping_hubs_text}} {% include "ui/components/utilities/FormAppliedSuffix.html" with key="hub" applied_text=page.applied_text %}
+                            </p>
+                            {% include "ui/components/icon_svgs/LinkCaret.html" with class="rotate-90 text-hot-red" %}
+                        </div>
+                        <div class="absolute z-20 bg-hot-off-white p-4 w-full" x-show="show">
+                            <hr class="border-b-2">
+                            {% for hub in hubs %}
+                                <div class="mt-4 flex">
+                                    <label for="hub-{{forloop.counter}}">
+                                        {{hub.localized.title}}
+                                    </label>
+                                    <input class="ml-auto checked:bg-hot-red checked:hover:bg-hot-red checked:focus:bg-hot-red" id="hub-{{forloop.counter}}" type="checkbox" name="hub{{hub.id}}" :checked="params.get('hub{{hub.id}}')">
+                                </div>
+                            {% endfor %}
+                        </div>
+                    </div>
+
+                    {% comment %} IMPACT AREA {% endcomment %}
+                    <div class="relative" x-data="{ show: false }" @click.away="show = false">
+                        <div class="w-full h-full flex justify-between py-2 px-3 bg-hot-off-white items-center cursor-pointer" @click="show = !show">
+                            <p class="pointer-events-none">
+                                {{page.impact_areas_text}} {% include "ui/components/utilities/FormAppliedSuffix.html" with key="ia" applied_text=page.applied_text %}
+                            </p>
+                            {% include "ui/components/icon_svgs/LinkCaret.html" with class="rotate-90 text-hot-red" %}
+                        </div>
+                        <div class="absolute z-20 bg-hot-off-white p-4 w-full" x-show="show">
+                            <hr class="border-b-2">
+                            {% for ia in impact_areas %}
+                                <div class="mt-4 flex">
+                                    <label for="ia-{{forloop.counter}}">
+                                        {{ia.localized.title}}
+                                    </label>
+                                    <input class="ml-auto checked:bg-hot-red checked:hover:bg-hot-red checked:focus:bg-hot-red" id="ia-{{forloop.counter}}" type="checkbox" name="ia{{ia.id}}" :checked="params.get('ia{{ia.id}}')">
+                                </div>
+                            {% endfor %}
+                        </div>
+                    </div>
+
+                    {% comment %} PROGRAMS {% endcomment %}
+                    <div class="relative" x-data="{ show: false }" @click.away="show = false">
+                        <div class="w-full h-full flex justify-between py-2 px-3 bg-hot-off-white items-center cursor-pointer" @click="show = !show">
+                            <p class="pointer-events-none">
+                                {{page.projects_by_programme_text}} {% include "ui/components/utilities/FormAppliedSuffix.html" with key="pg" applied_text=page.applied_text %}
+                            </p>
                             {% include "ui/components/icon_svgs/LinkCaret.html" with class="rotate-90 text-hot-red" %}
+                        </div>
+                        <div class="absolute z-20 bg-hot-off-white p-4 w-full" x-show="show">
+                            <hr class="border-b-2">
+                            {% for pg in programs %}
+                                <div class="mt-4 flex">
+                                    <label for="pg-{{forloop.counter}}">
+                                        {{pg.localized.title}}
+                                    </label>
+                                    <input class="ml-auto checked:bg-hot-red checked:hover:bg-hot-red checked:focus:bg-hot-red" id="pg-{{forloop.counter}}" type="checkbox" name="pg{{pg.id}}" :checked="params.get('pg{{pg.id}}')">
+                                </div>
+                            {% endfor %}
+                        </div>
+                    </div>
+
+                    {% comment %} TYPE {% endcomment %}
+                    <div class="relative" x-data="{ show: false }" @click.away="show = false">
+                        <div class="w-full h-full flex justify-between py-2 px-3 bg-hot-off-white items-center cursor-pointer" @click="show = !show">
+                            <p class="pointer-events-none">
+                                {{page.projects_by_type_text}} {% include "ui/components/utilities/FormAppliedSuffix.html" with key="pt" applied_text=page.applied_text %}
+                            </p>
+                            {% include "ui/components/icon_svgs/LinkCaret.html" with class="rotate-90 text-hot-red" %}
+                        </div>
+                        <div class="absolute z-20 bg-hot-off-white p-4 w-full" x-show="show">
+                            <hr class="border-b-2">
+                            {% for pt in types %}
+                                <div class="mt-4 flex">
+                                    <label for="pt-{{forloop.counter}}">
+                                        {{pt}}
+                                    </label>
+                                    <input class="ml-auto checked:bg-hot-red checked:hover:bg-hot-red checked:focus:bg-hot-red" id="pt-{{forloop.counter}}" type="checkbox" name="pt{{pt.id}}" :checked="params.get('pt{{pt.id}}')">
+                                </div>
+                            {% endfor %}
+                        </div>
+                    </div>
+
+                    {% comment %} STATUS {% endcomment %}
+                    <div class="relative" x-data="{ show: false }" @click.away="show = false">
+                        <div class="w-full h-full flex justify-between py-2 px-3 bg-hot-off-white items-center cursor-pointer" @click="show = !show">
+                            <p class="pointer-events-none">
+                                {{page.project_status_text}}
+                            </p>
+                            {% include "ui/components/icon_svgs/LinkCaret.html" with class="rotate-90 text-hot-red" %}
+                        </div>
+                        <div class="absolute z-20 bg-hot-off-white p-4 w-full" x-show="show">
+                            <hr class="border-b-2 mb-4">
+                            <div class="flex flex-col gap-2">
+                                {% include "our_work/components/ProjectStatusOption.html" with status_by="---" status_id="none" %}
+                                {% for status in statuses %}
+                                    {% include "our_work/components/ProjectStatusOption.html" with status_by=status status_id=status.id %}
+                                {% endfor %}
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="bg-hot-red text-white font-semibold">
+                        <button class="bg-transparent w-full h-full cursor-pointer py-2">
+                            {{page.apply_filter_text}}
                         </button>
-                {% endif %}
-            </p>
+                    </div>
+                </div>
+                <a href="{{page.url}}">
+                    <p class="cursor-pointer inline-block mt-4">
+                        {{page.reset_filters_text}}
+                        {% include "ui/components/icon_svgs/RefreshIcon.html" with class="ml-4" %}
+                    </p>
+                </a>
+            </form>
+            <div id="items-list">
+                <h2 class="text-h2 font-bold my-8">{{paginator.count}} {{page.results_text}}</h2>
+                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 my-10">
+                    {% for project in projects %}
+                        {% include "ui/components/projects/ProjectPreviewBlockNews.html" with project=project.specific showimage=True %}
+                    {% endfor %}
+                </div>
+            </div>
+            {% include "ui/components/utilities/PaginatorNavigationHTMX.html" with paginator=paginator current_page=current_page %}
+            <div class="text-black my-20 [&_h1]:text-black [&_a]:text-black">
+                {% include "ui/components/dogear_boxes/DogearAnyColourLong.html" with colour="var(--hot-off-white)" title=page.bottom_dogear_title linktext=page.bottom_dogear_link_text linkurl=page.bottom_dogear_link linkappendage="#projects-section" %}
+            </div>
         </div>
     </div>
 {% endblock %}
diff --git a/app/rfp/templates/rfp/components/AsideBlockContents.html b/app/rfp/templates/rfp/components/AsideBlockContents.html
index be99988..d8ccb8b 100644
--- a/app/rfp/templates/rfp/components/AsideBlockContents.html
+++ b/app/rfp/templates/rfp/components/AsideBlockContents.html
@@ -1,3 +1,4 @@
+{% load wagtailcore_tags %}
 <div class="bg-hot-off-white p-6">
     <h1 class="text-h3 font-bold">
         {{page.aside_block_title}}
diff --git a/app/ui/templates/ui/components/dogear_boxes/DogearAnyColourLong.html b/app/ui/templates/ui/components/dogear_boxes/DogearAnyColourLong.html
index 25b5033..2284b51 100644
--- a/app/ui/templates/ui/components/dogear_boxes/DogearAnyColourLong.html
+++ b/app/ui/templates/ui/components/dogear_boxes/DogearAnyColourLong.html
@@ -7,7 +7,7 @@
 - arrowcolour: a string; the colour the arrow should be
 {% endcomment %}
 
-<div class="p-10 text-white grid grid-cols-1 lg:grid-cols-4" style="background: linear-gradient(45deg, {{ colour }} 0%, {{ colour }} 98%, transparent 98%, transparent 100%); {%if textcolour%}color: {{textcolour}}{%endif%}">
+<div class="p-10 text-white flex gap-4 flex-wrap justify-between" style="background: linear-gradient(45deg, {{ colour }} 0%, {{ colour }} 98%, transparent 98%, transparent 100%); {%if textcolour%}color: {{textcolour}}{%endif%}">
     <h1 class="text-h3 font-bold col-span-3">
         {{ title }}
     </h1>
diff --git a/app/ui/templates/ui/components/icon_svgs/ExternalLinkIcon.html b/app/ui/templates/ui/components/icon_svgs/ExternalLinkIcon.html
index f9f1ebb..ea6f108 100644
--- a/app/ui/templates/ui/components/icon_svgs/ExternalLinkIcon.html
+++ b/app/ui/templates/ui/components/icon_svgs/ExternalLinkIcon.html
@@ -1,4 +1,4 @@
-<svg class="inline {{class}}" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 2.5 19.167 17.242">
+<svg class="inline overflow-visible {{class}}" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 2.5 19.167 17.242">
   <path id="Path_13090" data-name="Path 13090" d="M2514.594-9984.769h-10.513v13.328h13.7v-6.157" transform="translate(-2503.081 9990.835)" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
   <path id="Path_13091" data-name="Path 13091" d="M2510.932-9979.3l8.179-8.164" transform="translate(-2501.358 9992.033)" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2"/>
   <path id="Path_13092" data-name="Path 13092" d="M0,2.7,2.7,0,5.391,2.7" transform="translate(16.8 1.707) rotate(45)" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
diff --git a/app/ui/templates/ui/components/mapping_hub/MappingHubPreviewProjectsBlock.html b/app/ui/templates/ui/components/mapping_hub/MappingHubPreviewProjectsBlock.html
index c8932dd..09eaccb 100644
--- a/app/ui/templates/ui/components/mapping_hub/MappingHubPreviewProjectsBlock.html
+++ b/app/ui/templates/ui/components/mapping_hub/MappingHubPreviewProjectsBlock.html
@@ -4,6 +4,8 @@
 {% endcomment %}
 {% load wagtailimages_tags %}
 
-<a href="{% include 'ui/components/PageOrLinkHrefText.html' with linkurl=hub_project %}" class="hover:underline">
-    {% include "./MappingHubPreviewBlockBase.html" with hub=hub_project.get_parent.specific %}
-</a>
+{% with hub.id|stringformat:"s" as id %}
+    <a href="{% include 'ui/components/PageOrLinkHrefText.html' with linkurl=baselink linkappendage="?hub"|add:id|add:"=on" %}" class="hover:underline">
+        {% include "./MappingHubPreviewBlockBase.html" with hub=hub %}
+    </a>
+{% endwith %}
\ No newline at end of file
diff --git a/app/ui/templates/ui/components/navigation/HeaderNavbar.html b/app/ui/templates/ui/components/navigation/HeaderNavbar.html
index ebc82c6..4056ac5 100644
--- a/app/ui/templates/ui/components/navigation/HeaderNavbar.html
+++ b/app/ui/templates/ui/components/navigation/HeaderNavbar.html
@@ -29,6 +29,7 @@
                 {% endfor %}
 
                 {% comment %} MOBILE BURGER/X BUTTON FOR OPENING/CLOSING THE NAV MENU {% endcomment %}
+                <li class="md:hidden">{% include "components/search/search_icon.html" %}</li>
                 <li class="lg:hidden" @click="expanded = !expanded">
                     <svg x-show="!expanded"
                         class="h-6 w-6"
@@ -55,7 +56,7 @@
     
     {% comment %} MOBILE EXPANDED LIST {% endcomment %}
     <ul class="text-black lg:hidden p-4" x-show="expanded" :class="{ 'pt-20': isLandingPage }">
-        <li class="border-b border-b-hot-off-white mb-2 md:hidden">{% include "ui/components/navigation/SearchForm.html" %}</li>
+        {% comment %} <li class="border-b border-b-hot-off-white mb-2 md:hidden">{% include "ui/components/navigation/SearchForm.html" %}</li> {% endcomment %}
 
         {% for item in navigation %}
             <li class="text-black {%if item.value.is_button%}md:hidden{%endif%}">
diff --git a/app/ui/templates/ui/components/navigation/UpperHeaderNavbar.html b/app/ui/templates/ui/components/navigation/UpperHeaderNavbar.html
index 818798c..78224ca 100644
--- a/app/ui/templates/ui/components/navigation/UpperHeaderNavbar.html
+++ b/app/ui/templates/ui/components/navigation/UpperHeaderNavbar.html
@@ -18,8 +18,7 @@
             role="navigation"
             aria-label="Secondary Menu">
             {% comment %} Strings for Translations {% endcomment %}
-            <li class="hidden lg:block">{% include "components/search/search_icon.html" %}</li>
-            <li class="lg:hidden border-b border-b-hot-off-white">{% include "ui/components/navigation/SearchForm.html" %}</li>
+            <li class="">{% include "components/search/search_icon.html" %}</li>
             <li class="hidden lg:block text-black [&_input]:text-black">{% include "language_switcher.html" %}</li>
             {% for link in home_page.top_navigation_links %}
                 <li class="hidden lg:block">{% include "components/branded_elements/link.html" with link=link.value.link text=link.value.text %}</li>
diff --git a/app/ui/templates/ui/components/news/NewsPreviewBlockNews.html b/app/ui/templates/ui/components/news/NewsPreviewBlockNews.html
index 944fa6f..61db707 100644
--- a/app/ui/templates/ui/components/news/NewsPreviewBlockNews.html
+++ b/app/ui/templates/ui/components/news/NewsPreviewBlockNews.html
@@ -3,6 +3,7 @@
 - news: an IndividualNewsPage object; the news page to be previewed
 - readmoretext: a string; the text that should show for the "read more" button
 {% endcomment %}
+{% load wagtailcore_tags %}
 
 {% with news.localized as news %}
     <div class="{{class}}">
diff --git a/app/volunteer_opportunities/templates/volunteer_opportunities/components/AsideBlockContents.html b/app/volunteer_opportunities/templates/volunteer_opportunities/components/AsideBlockContents.html
index 1ae5185..5478403 100644
--- a/app/volunteer_opportunities/templates/volunteer_opportunities/components/AsideBlockContents.html
+++ b/app/volunteer_opportunities/templates/volunteer_opportunities/components/AsideBlockContents.html
@@ -1,3 +1,4 @@
+{% load wagtailcore_tags %}
 <div class="bg-hot-off-white p-6">
     <h1 class="text-h3 font-bold">
         {{page.aside_block_title}}
diff --git a/home/migrations/0045_homepage_gdpr_tracking_consent_message_and_more.py b/home/migrations/0045_homepage_gdpr_tracking_consent_message_and_more.py
new file mode 100644
index 0000000..da4321e
--- /dev/null
+++ b/home/migrations/0045_homepage_gdpr_tracking_consent_message_and_more.py
@@ -0,0 +1,34 @@
+# Generated by Django 4.2.7 on 2024-11-08 00:49
+
+from django.db import migrations, models
+import wagtail.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('home', '0044_alter_homepage_carousel_alter_homepage_e404_links_and_more'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='homepage',
+            name='gdpr_tracking_consent_message',
+            field=models.CharField(default='By clicking "I Agree", you consent to the use of cookies.'),
+        ),
+        migrations.AddField(
+            model_name='homepage',
+            name='gdpr_tracking_message',
+            field=wagtail.fields.RichTextField(blank=True),
+        ),
+        migrations.AddField(
+            model_name='homepage',
+            name='gdpr_tracking_option_agree',
+            field=models.CharField(default='I Agree'),
+        ),
+        migrations.AddField(
+            model_name='homepage',
+            name='gdpr_tracking_option_disagree',
+            field=models.CharField(default='I Disagree'),
+        ),
+    ]
diff --git a/home/migrations/0046_homepage_gdpr_tracking_title_and_more.py b/home/migrations/0046_homepage_gdpr_tracking_title_and_more.py
new file mode 100644
index 0000000..b1c3951
--- /dev/null
+++ b/home/migrations/0046_homepage_gdpr_tracking_title_and_more.py
@@ -0,0 +1,23 @@
+# Generated by Django 4.2.7 on 2024-11-08 00:50
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('home', '0045_homepage_gdpr_tracking_consent_message_and_more'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='homepage',
+            name='gdpr_tracking_title',
+            field=models.CharField(default='About the information we collect'),
+        ),
+        migrations.AlterField(
+            model_name='homepage',
+            name='gdpr_tracking_option_disagree',
+            field=models.CharField(default='I Do Not Agree'),
+        ),
+    ]
diff --git a/home/models.py b/home/models.py
index e28ab1f..9e53e05 100644
--- a/home/models.py
+++ b/home/models.py
@@ -170,6 +170,12 @@ def get_context(self, request, *args, **kwargs):
     paginator_previous = models.CharField(default="Previous")
     paginator_next = models.CharField(default="Next")
 
+    gdpr_tracking_title = models.CharField(default="About the information we collect")
+    gdpr_tracking_message = RichTextField(blank=True)
+    gdpr_tracking_consent_message = models.CharField(default='By clicking "I Agree", you consent to the use of cookies.')
+    gdpr_tracking_option_agree = models.CharField(default="I Agree")
+    gdpr_tracking_option_disagree = models.CharField(default="I Do Not Agree")
+
     social_share_links = StreamField([
         ('social', StructBlock([
             ('icon', ImageChooserBlock()),
@@ -323,9 +329,16 @@ def get_context(self, request, *args, **kwargs):
                 FieldPanel('paginator_previous'),
                 FieldPanel('paginator_next'),
             ], heading="Paginator", help_text="This is used in instances where there's a previous/next button; i.e., the news page when flipping through pages."),
+            MultiFieldPanel([
+                FieldPanel('gdpr_tracking_title'),
+                FieldPanel('gdpr_tracking_message'),
+                FieldPanel('gdpr_tracking_consent_message'),
+                FieldPanel('gdpr_tracking_option_agree'),
+                FieldPanel('gdpr_tracking_option_disagree'),
+            ], heading="GDPR Tracking Banner"),
             MultiFieldPanel([
                 FieldPanel('social_share_links'),
-            ], heading="Misc")
+            ], heading="Misc"),
         ], heading="Universal items"),
         MultiFieldPanel([
             FieldPanel("image"),