From b6dc236d6e6af274c5bc5b6fac0cd64c281ede75 Mon Sep 17 00:00:00 2001
From: luminaryFlowers <71102109+luminaryFlowers@users.noreply.github.com>
Date: Thu, 27 Jun 2024 12:43:18 -0700
Subject: [PATCH 01/10] events page basic search functionality => only has
 title/intro search, filters are pending until i know what's wanted for that
 wrt mockup and what filters should be available

---
 ...townerpage_keyword_search_hint_and_more.py | 48 ++++++++++
 app/events/models.py                          | 75 +++++++++++++--
 .../events/components/EventsSortOption.html   |  4 +
 .../templates/events/event_owner_page.html    | 96 +++++++++++++++++++
 app/news/models.py                            | 12 +--
 .../news/components/NewsSortOption.html       |  2 +-
 app/news/templates/news/news_owner_page.html  |  2 +-
 .../events/EventPreviewBlockEvent.html        | 10 ++
 8 files changed, 234 insertions(+), 15 deletions(-)
 create mode 100644 app/events/migrations/0004_eventownerpage_keyword_search_hint_and_more.py
 create mode 100644 app/events/templates/events/components/EventsSortOption.html
 create mode 100644 app/events/templates/events/event_owner_page.html

diff --git a/app/events/migrations/0004_eventownerpage_keyword_search_hint_and_more.py b/app/events/migrations/0004_eventownerpage_keyword_search_hint_and_more.py
new file mode 100644
index 0000000..634a82e
--- /dev/null
+++ b/app/events/migrations/0004_eventownerpage_keyword_search_hint_and_more.py
@@ -0,0 +1,48 @@
+# Generated by Django 4.2.7 on 2024-06-27 18:17
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('events', '0003_eventownerpage_event_read_more_text_and_more'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='eventownerpage',
+            name='keyword_search_hint',
+            field=models.CharField(default='Search by keyword'),
+        ),
+        migrations.AddField(
+            model_name='eventownerpage',
+            name='results_text',
+            field=models.CharField(default='Results'),
+        ),
+        migrations.AddField(
+            model_name='eventownerpage',
+            name='search_button_text',
+            field=models.CharField(default='Search'),
+        ),
+        migrations.AddField(
+            model_name='eventownerpage',
+            name='sort_by_new',
+            field=models.CharField(default='Sort by New'),
+        ),
+        migrations.AddField(
+            model_name='eventownerpage',
+            name='sort_by_old',
+            field=models.CharField(default='Sort by Old'),
+        ),
+        migrations.AddField(
+            model_name='eventownerpage',
+            name='sort_by_titlea',
+            field=models.CharField(default='Sort by Title Alphabetical'),
+        ),
+        migrations.AddField(
+            model_name='eventownerpage',
+            name='sort_by_titlez',
+            field=models.CharField(default='Sort by Title Reverse Alphabetical'),
+        ),
+    ]
diff --git a/app/events/models.py b/app/events/models.py
index 47a1d1c..de5f9ab 100644
--- a/app/events/models.py
+++ b/app/events/models.py
@@ -1,13 +1,50 @@
 from django.db import models
+from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger
 
 from wagtail.models import Page
 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 modelcluster.fields import ParentalKey, ParentalManyToManyField
+from wagtail.search import index
 
 
 class EventOwnerPage(Page):
+    def get_context(self, request, *args, **kwargs):
+        context = super().get_context(request, *args, **kwargs)
+
+        keyword = request.GET.get('keyword', '')
+        events_list = IndividualEventPage.objects.live().filter(locale=context['page'].locale)
+        
+        if keyword:
+            events_list = events_list.search(keyword).get_queryset()
+        
+        match request.GET.get('sort', ''):
+            case 'sort.new':
+                events_list = events_list.order_by('-start_date_time')
+            case 'sort.old':
+                events_list = events_list.order_by('start_date_time')
+            case 'sort.titlea':
+                events_list = events_list.order_by('title')
+            case 'sort.titlez':
+                events_list = events_list.order_by('-title')
+            case _:
+                events_list = events_list.order_by('-start_date_time')
+
+        page = request.GET.get('page', 1)
+        paginator = Paginator(events_list, 6)  # if you want more/less items per page (i.e., per load), change the number here to something else
+        try:
+            events = paginator.page(page)
+        except PageNotAnInteger:
+            events = paginator.page(1)
+        except EmptyPage:
+            events = paginator.page(paginator.num_pages)
+        
+        context['events'] = events
+        context['events_paginator'] = paginator
+        context['current_page'] = int(page)
+        return context
+    
     max_count = 1
 
     event_location_title = models.CharField(default="Event Location")
@@ -18,14 +55,33 @@ class EventOwnerPage(Page):
     view_all_events_url = models.URLField(blank=True)
     event_read_more_text = models.CharField(default="Read more")
 
+    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="Search")
+    results_text = models.CharField(default="Results")
+
     content_panels = Page.content_panels + [
-        FieldPanel('event_location_title'),
-        FieldPanel('join_event_title'),
-        FieldPanel('rsvp_button_text'),
-        FieldPanel('more_events_title'),
-        FieldPanel('view_all_events_text'),
-        FieldPanel('view_all_events_url'),
-        FieldPanel('event_read_more_text'),
+        MultiFieldPanel([
+            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('results_text'),
+        ], heading="Event Search Page"),
+        MultiFieldPanel([
+            FieldPanel('event_location_title'),
+            FieldPanel('join_event_title'),
+            FieldPanel('rsvp_button_text'),
+            FieldPanel('more_events_title'),
+            FieldPanel('view_all_events_text'),
+            FieldPanel('view_all_events_url'),
+            FieldPanel('event_read_more_text'),
+        ], heading="Individual Event Page"),
     ]
 
 
@@ -60,6 +116,11 @@ class IndividualEventPage(Page):
         ('event', PageChooserBlock(page_type="events.IndividualEventPage"))
     ], use_json_field=True, null=True, blank=True)
 
+    search_fields = Page.search_fields + [
+        index.SearchField('title'),
+        index.SearchField('intro'),
+    ]
+
     content_panels = Page.content_panels + [
         MultiFieldPanel([
             FieldPanel('start_date_time'),
diff --git a/app/events/templates/events/components/EventsSortOption.html b/app/events/templates/events/components/EventsSortOption.html
new file mode 100644
index 0000000..d364b07
--- /dev/null
+++ b/app/events/templates/events/components/EventsSortOption.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/events/templates/events/event_owner_page.html b/app/events/templates/events/event_owner_page.html
new file mode 100644
index 0000000..6eddd92
--- /dev/null
+++ b/app/events/templates/events/event_owner_page.html
@@ -0,0 +1,96 @@
+{% extends "base.html" %}
+{% load static %}
+{% load wagtailcore_tags %}
+{% load wagtailimages_tags %}
+{% load compress %}
+{% block body_class %}template-eventownerpage{% endblock %}
+{% block extra_css %}
+    {% compress css %}
+    {% endcompress css %}
+{% 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="px-6 md:px-10">
+            <h1 class="text-h1 font-semibold my-10">{{page.title}}</h1>
+            <form class="my-10">
+                <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.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" 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/EventsSortOption.html" with sort_by=page.sort_by_new sort_id="sort.new" %}
+                            {% include "./components/EventsSortOption.html" with sort_by=page.sort_by_old sort_id="sort.old" %}
+                            {% include "./components/EventsSortOption.html" with sort_by=page.sort_by_titlea sort_id="sort.titlea" %}
+                            {% include "./components/EventsSortOption.html" with sort_by=page.sort_by_titlez sort_id="sort.titlez" %}
+                        </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>
+                </div>
+            </form>
+
+            <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">
+                {% for event in events %}
+                    {% include "ui/components/events/EventPreviewBlockEvent.html" with event=event showimage=True %}
+                {% endfor %}
+            </div>
+
+            <div class="w-full flex justify-center items-center mt-10" 
+                 x-data="{
+                            page: params.get('page') ? params.get('page') : 1,
+                            paramsX: new URLSearchParams((new URL(window.location.href)).search),
+                            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>
+                </a>
+                <div class="flex gap-2 mx-4">
+                    {% with ''|center:events_paginator.num_pages as range %}
+                        {% for _ in range %}
+                            {% if forloop.counter == 1 or forloop.counter == events_paginator.num_pages or forloop.counter == current_page or forloop.counter|add:1 == current_page or forloop.counter|add:'-1' == current_page %}
+                                <a :href="getPageLink(parseInt({{forloop.counter}}))">
+                                    <p class="px-2 font-bold" :class="page == {{forloop.counter}} ? 'bg-hot-red text-white' : 'bg-hot-off-white'">
+                                        {{forloop.counter}}
+                                    </p>
+                                </a>
+                            {% 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>
+                <a :href="page < {{events_paginator.num_pages}} ? getPageLink(parseInt(page) + 1) : ''" aria-label="Next Page">
+                    <p class="cursor-pointer" :class="page == {{events_paginator.num_pages}} ? 'text-hot-slate-grey' : 'text-hot-red'">
+                        {% include "ui/components/icon_svgs/LinkCaret.html" %}
+                    </p>
+                </a>
+            </div>
+        </div>
+    </div>
+{% endblock %}
diff --git a/app/news/models.py b/app/news/models.py
index 279dda1..a58a56d 100644
--- a/app/news/models.py
+++ b/app/news/models.py
@@ -32,20 +32,20 @@ def get_context(self, request, *args, **kwargs):
             query = query | Q(tags__name=tag)
         news_list = news_list.filter(query).distinct()
 
+        if keyword:
+            news_list = news_list.search(keyword).get_queryset()
+
         match request.GET.get('sort', ''):
             case 'sort.new':
-                news_list = news_list.order_by('date')
-            case 'sort.old':
                 news_list = news_list.order_by('-date')
+            case 'sort.old':
+                news_list = news_list.order_by('date')
             case 'sort.titlea':
                 news_list = news_list.order_by('title')
             case 'sort.titlez':
                 news_list = news_list.order_by('-title')
             case _:
-                news_list = news_list.order_by('date')
-
-        if keyword:
-            news_list = news_list.search(keyword)
+                news_list = news_list.order_by('-date')
 
         page = request.GET.get('page', 1)
         paginator = Paginator(news_list, 6)  # if you want more/less items per page (i.e., per load), change the number here to something else
diff --git a/app/news/templates/news/components/NewsSortOption.html b/app/news/templates/news/components/NewsSortOption.html
index 8b30d23..d364b07 100644
--- a/app/news/templates/news/components/NewsSortOption.html
+++ b/app/news/templates/news/components/NewsSortOption.html
@@ -1,4 +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')) ? 'on' : ''">
+    <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/news/templates/news/news_owner_page.html b/app/news/templates/news/news_owner_page.html
index 90b6592..8a0280f 100644
--- a/app/news/templates/news/news_owner_page.html
+++ b/app/news/templates/news/news_owner_page.html
@@ -3,7 +3,7 @@
 {% load wagtailcore_tags %}
 {% load wagtailimages_tags %}
 {% load compress %}
-{% block body_class %}template-individualnewspage{% endblock %}
+{% block body_class %}template-newsownerpage{% endblock %}
 {% block extra_css %}
     {% compress css %}
     {% endcompress css %}
diff --git a/app/ui/templates/ui/components/events/EventPreviewBlockEvent.html b/app/ui/templates/ui/components/events/EventPreviewBlockEvent.html
index b117e8b..433fe8c 100644
--- a/app/ui/templates/ui/components/events/EventPreviewBlockEvent.html
+++ b/app/ui/templates/ui/components/events/EventPreviewBlockEvent.html
@@ -1,4 +1,14 @@
+{% load wagtailimages_tags %}
+
+{% 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>
+    {% endif %}
+
     <div class="flex w-full [&_p]:text-hot-dark-grey [&_p]:text-small justify-between flex-wrap">
         {% if event.start_date_time.date == event.end_date_time.date %}
             <p>

From 497c57e41c1a0cf66c1e14e16a5ef359b4f657e3 Mon Sep 17 00:00:00 2001
From: luminaryFlowers <71102109+luminaryFlowers@users.noreply.github.com>
Date: Thu, 27 Jun 2024 16:58:15 -0700
Subject: [PATCH 02/10] project - open mapping hub page done => worked on this
 while waiting for the event page stuff! => structure changed; project owner
 page is now made to be the child of a mapping hub, so projects are connected
 to a mapping hub via grandparentage => i had mistyped "parent_page_type" in
 multiple pages' models when it should have been "parent_page_types" so that's
 fixed

---
 app/events/models.py                          |   2 +-
 .../templates/events/event_owner_page.html    |   2 +
 app/impact_areas/models.py                    |   2 +-
 .../individual_impact_area_page.html          |   2 +-
 app/mapping_hubs/models.py                    |   2 +-
 .../individual_mapping_hub_page.html          |   2 +-
 .../templates/news/individual_news_page.html  | 108 +++++++++---------
 app/news/templates/news/news_owner_page.html  |   2 +
 ...rojectownerpage_load_more_projects_text.py |  18 +++
 ..._individualprojectpage_owner_region_hub.py |  17 +++
 app/projects/models.py                        |  92 +++++++++------
 .../templates/projects/components/header.html |  25 ++++
 .../projects/individual_project_page.html     |   4 +-
 .../projects/project_owner_page.html          |  39 +++++++
 .../components/news/NewsPreviewBlockNews.html |   2 +-
 .../news/NewsPreviewBlockProjects.html        |   2 +-
 .../components/news/NewsPreviewCarousel.html  |   2 +-
 .../projects/ProjectPreviewBlockMapHub.html   |   6 +-
 .../projects/ProjectPreviewBlockNews.html     |   2 +-
 .../projects/ProjectPreviewCarousel.html      |   2 +-
 home/templates/home/home_page.html            |   2 +-
 21 files changed, 232 insertions(+), 103 deletions(-)
 create mode 100644 app/projects/migrations/0022_projectownerpage_load_more_projects_text.py
 create mode 100644 app/projects/migrations/0023_remove_individualprojectpage_owner_region_hub.py
 create mode 100644 app/projects/templates/projects/components/header.html
 create mode 100644 app/projects/templates/projects/project_owner_page.html

diff --git a/app/events/models.py b/app/events/models.py
index de5f9ab..c486579 100644
--- a/app/events/models.py
+++ b/app/events/models.py
@@ -86,7 +86,7 @@ def get_context(self, request, *args, **kwargs):
 
 
 class IndividualEventPage(Page):
-    parent_page_type = [
+    parent_page_types = [
         'projects.ProjectOwnerPage'
     ]
 
diff --git a/app/events/templates/events/event_owner_page.html b/app/events/templates/events/event_owner_page.html
index 6eddd92..073f462 100644
--- a/app/events/templates/events/event_owner_page.html
+++ b/app/events/templates/events/event_owner_page.html
@@ -44,6 +44,7 @@ <h1 class="text-h1 font-semibold my-10">{{page.title}}</h1>
                 </div>
             </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">
                 {% for event in events %}
@@ -51,6 +52,7 @@ <h2 class="text-h2 font-bold my-8">{{events_paginator.count}} {{page.results_tex
                 {% endfor %}
             </div>
 
+            {% comment %} PAGE NAVIGATION {% endcomment %}
             <div class="w-full flex justify-center items-center mt-10" 
                  x-data="{
                             page: params.get('page') ? params.get('page') : 1,
diff --git a/app/impact_areas/models.py b/app/impact_areas/models.py
index d63017a..d636be8 100644
--- a/app/impact_areas/models.py
+++ b/app/impact_areas/models.py
@@ -42,7 +42,7 @@ def get_context(self, request, *args, **kwargs):
         context['other_impact_areas'] = other_impact_areas
         return context
 
-    parent_page_type = [
+    parent_page_types = [
         'impact_areas.ImpactAreasPage'
     ]
 
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 3a971b0..6ed0220 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
@@ -43,7 +43,7 @@
                         {% include "ui/components/BaseLink.html" with linktext=page.get_parent.specific.view_all_projects_text linkurl=page.view_all_projects_link %}
                     </p>
                 </div>
-                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-x-8 mt-10" id="projects-list">
+                <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 %}
                     {% endfor %}
diff --git a/app/mapping_hubs/models.py b/app/mapping_hubs/models.py
index b2e6256..b913f4f 100644
--- a/app/mapping_hubs/models.py
+++ b/app/mapping_hubs/models.py
@@ -33,7 +33,7 @@ class DogearBoxBlock(StreamBlock):
 class IndividualMappingHubPage(Page):
     def get_context(self, request):
         context = super().get_context(request)
-        projects = IndividualProjectPage.objects.filter(owner_region_hub=context['page'], locale=context['page'].locale)
+        projects = context['page'].get_children()[0].get_children().filter(locale=context['page'].locale)
         context['projects'] = projects
         other_hubs = IndividualMappingHubPage.objects.live().filter(locale=context['page'].locale)
         context['other_hubs'] = other_hubs
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 833a3b1..7e20464 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
@@ -35,7 +35,7 @@
             </div>
             <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10 py-6">
                 {% for project in projects %}
-                    {% include "ui/components/projects/ProjectPreviewBlockMapHub.html" with project=project showimage="True" %}
+                    {% include "ui/components/projects/ProjectPreviewBlockMapHub.html" with project=project.specific showimage="True" %}
                 {% endfor %}
             </div>
 
diff --git a/app/news/templates/news/individual_news_page.html b/app/news/templates/news/individual_news_page.html
index 26b25ac..c91346e 100644
--- a/app/news/templates/news/individual_news_page.html
+++ b/app/news/templates/news/individual_news_page.html
@@ -17,7 +17,7 @@ <h1>{{ page.title }}</h1>
             <p>
                 {{page.get_parent.specific.authors_posted_by_text}}
                 {% for author in page.authors %}
-                    <b>{{author.value.title}}</b>
+                    <a href="{{author.value.url}}"><b class="text-black">{{author.value.title}}</b></a>
                     {% if not forloop.last %}
                     ,
                     {% endif %}
@@ -41,70 +41,70 @@ <h1>{{ page.title }}</h1>
             {% comment %} SIDEBAR {% endcomment %}
             <div class="base-article 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-x-4">
-                        {% with projects=page.related_projects %}
-                            {% for project in projects %}
-                                {% include "ui/components/projects/ProjectPreviewBlockNews.html" with project=project.value %}
-                            {% endfor %}
-                        {% endwith %}
+                    <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>
                 {% 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>
-                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-1 gap-x-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>
+                        <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>
+                        <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 %}
 
                 {% 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">{{ category.category_name }}</a>{% if not forloop.last %}, {% endif %}
-                            {% endfor %}
-                        {% endwith %}
-                    </p>
-                </div>
+                    <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">{{ 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">{{ tag }}</a>{% if not forloop.last %}, {% endif %}
-                            {% endfor %}
-                        {% endwith %}
-                    </p>
-                </div>
+                    <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">{{ tag }}</a>{% if not forloop.last %}, {% endif %}
+                                {% endfor %}
+                            {% endwith %}
+                        </p>
+                    </div>
                 {% endif %}
             </div>
         </div>
diff --git a/app/news/templates/news/news_owner_page.html b/app/news/templates/news/news_owner_page.html
index 8a0280f..13ac88f 100644
--- a/app/news/templates/news/news_owner_page.html
+++ b/app/news/templates/news/news_owner_page.html
@@ -94,6 +94,7 @@ <h1 class="text-h1 font-semibold my-10">{{page.title}}</h1>
                 </div>
             </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">
                 {% for article in news %}
@@ -101,6 +102,7 @@ <h2 class="text-h2 font-bold my-8">{{news_paginator.count}} {{page.results_text}
                 {% endfor %}
             </div>
 
+            {% comment %} PAGE NAVIGATION {% endcomment %}
             <div class="w-full flex justify-center items-center" 
                  x-data="{
                             page: params.get('page') ? params.get('page') : 1,
diff --git a/app/projects/migrations/0022_projectownerpage_load_more_projects_text.py b/app/projects/migrations/0022_projectownerpage_load_more_projects_text.py
new file mode 100644
index 0000000..71a0e62
--- /dev/null
+++ b/app/projects/migrations/0022_projectownerpage_load_more_projects_text.py
@@ -0,0 +1,18 @@
+# Generated by Django 4.2.7 on 2024-06-27 22:51
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('projects', '0021_individualprojectpage_related_events'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='projectownerpage',
+            name='load_more_projects_text',
+            field=models.CharField(default='Load More Projects'),
+        ),
+    ]
diff --git a/app/projects/migrations/0023_remove_individualprojectpage_owner_region_hub.py b/app/projects/migrations/0023_remove_individualprojectpage_owner_region_hub.py
new file mode 100644
index 0000000..af8ea42
--- /dev/null
+++ b/app/projects/migrations/0023_remove_individualprojectpage_owner_region_hub.py
@@ -0,0 +1,17 @@
+# Generated by Django 4.2.7 on 2024-06-27 23:06
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('projects', '0022_projectownerpage_load_more_projects_text'),
+    ]
+
+    operations = [
+        migrations.RemoveField(
+            model_name='individualprojectpage',
+            name='owner_region_hub',
+        ),
+    ]
diff --git a/app/projects/models.py b/app/projects/models.py
index 70c6c75..6a12032 100644
--- a/app/projects/models.py
+++ b/app/projects/models.py
@@ -1,5 +1,7 @@
 from django import forms
 from django.db import models
+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
@@ -8,9 +10,37 @@
 from modelcluster.fields import ParentalKey, ParentalManyToManyField
 
 
+"""
+This page should only be created as a child of an IndividualMappingHubPage!
+Its template depends on fields from the IndividualMappingHubPage in order
+to create one unifying place where unchanging fields may be modified.
+"""
 class ProjectOwnerPage(Page):
-    max_count = 1
+    def get_context(self, request, *args, **kwargs):
+        context = super().get_context(request, *args, **kwargs)
+
+        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:
+            projects = paginator.page(page)
+        except PageNotAnInteger:
+            projects = paginator.page(1)
+        except EmptyPage:
+            projects = paginator.page(paginator.num_pages)
+        context['projects'] = projects
+        return context
     
+    parent_page_types = [
+        'mapping_hubs.IndividualMappingHubPage'
+    ]
+
+    subpage_types = [
+        'projects.IndividualProjectPage'
+    ]
+
+    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")
     duration_title = models.CharField(default="Duration")
@@ -34,29 +64,34 @@ class ProjectOwnerPage(Page):
 
     content_panels = Page.content_panels + [
         MultiFieldPanel([
-            FieldPanel('impact_areas_title'),
-            FieldPanel('region_hub_title'),
-            FieldPanel('duration_title'),
-            FieldPanel('partners_title'),
-            FieldPanel('tools_title'),
-            FieldPanel('contact_title'),
-            MultiFieldPanel([
-                FieldPanel('related_news_title'),
-                FieldPanel('view_all_news_text'),
-                FieldPanel('view_all_news_url'),
-                FieldPanel('related_events_title'),
-                FieldPanel('view_all_events_text'),
-                FieldPanel('view_all_events_url'),
-            ], heading="Related Pages"),
-        ], heading="Sidebar"),
+            FieldPanel('load_more_projects_text'),
+        ], heading="Project Open Mapping Hub Page"),
         MultiFieldPanel([
-            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="Footer"),
+            MultiFieldPanel([
+                FieldPanel('impact_areas_title'),
+                FieldPanel('region_hub_title'),
+                FieldPanel('duration_title'),
+                FieldPanel('partners_title'),
+                FieldPanel('tools_title'),
+                FieldPanel('contact_title'),
+                MultiFieldPanel([
+                    FieldPanel('related_news_title'),
+                    FieldPanel('view_all_news_text'),
+                    FieldPanel('view_all_news_url'),
+                    FieldPanel('related_events_title'),
+                    FieldPanel('view_all_events_text'),
+                    FieldPanel('view_all_events_url'),
+                ], heading="Related Pages"),
+            ], heading="Sidebar"),
+            MultiFieldPanel([
+                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="Footer"),
+        ], heading="Individual Project Page"),
     ]
 
 
@@ -66,7 +101,7 @@ class ProjectOwnerPage(Page):
 to create one unifying place where unchanging fields may be modified.
 """
 class IndividualProjectPage(Page):
-    parent_page_type = [
+    parent_page_types = [
         'projects.ProjectOwnerPage'
     ]
     # > HEADER
@@ -103,14 +138,6 @@ class IndividualProjectPage(Page):
     # > SIDE BAR
     impact_area_list = StreamField([('impact_area', PageChooserBlock(page_type="impact_areas.IndividualImpactAreaPage"))], use_json_field=True, null=True, blank=True)
     
-    owner_region_hub = models.ForeignKey(
-        'wagtailcore.Page',
-        null=True,
-        blank=True,
-        on_delete=models.SET_NULL,
-        related_name='+'
-    )
-    
     duration = models.CharField(default="Ongoing", blank=True)
     
     partners_list = ParentalManyToManyField('core.Partner', blank=True)
@@ -147,7 +174,6 @@ class IndividualProjectPage(Page):
         ], heading="Body"),
         MultiFieldPanel([
             FieldPanel('impact_area_list'),
-            PageChooserPanel('owner_region_hub', 'mapping_hubs.IndividualMappingHubPage'),
             FieldPanel('duration'),
             FieldPanel('partners_list', widget=forms.CheckboxSelectMultiple),
             FieldPanel('tools'),
diff --git a/app/projects/templates/projects/components/header.html b/app/projects/templates/projects/components/header.html
new file mode 100644
index 0000000..72d8327
--- /dev/null
+++ b/app/projects/templates/projects/components/header.html
@@ -0,0 +1,25 @@
+{% comment %}
+==> PARAMETERS
+- body: The content of the header
+- image: A Wagtail image
+{% endcomment %}
+
+{% load wagtailimages_tags %}
+
+{% image page.get_parent.specific.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="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">
+                    <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.get_parent.specific.project_section_title }}
+                    </h1>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/app/projects/templates/projects/individual_project_page.html b/app/projects/templates/projects/individual_project_page.html
index 630b04d..2cc3b2c 100644
--- a/app/projects/templates/projects/individual_project_page.html
+++ b/app/projects/templates/projects/individual_project_page.html
@@ -37,7 +37,7 @@
                     </div>
                     <div>
                         <p>{{page.get_parent.specific.region_hub_title}}</p>
-                        <p><a href="{{page.owner_region_hub.url}}">{{page.owner_region_hub.title}}</a></p>
+                        <p><a href="{{page.get_parent.get_parent.url}}">{{page.get_parent.get_parent.title}}</a></p>
                     </div>
                     <div>
                         <p>{{page.get_parent.specific.duration_title}}</p>
@@ -68,7 +68,7 @@ <h1 class="text-h2 font-bold mb-4">
                         <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 %}
                         </div>
-                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-1 gap-4 mt-4">
+                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-1 gap-4 mt-8">
                             {% with allnews=page.related_news %}
                                 {% for news in allnews %}
                                     {% include "ui/components/news/NewsPreviewBlockProjects.html" with news=news.value %}
diff --git a/app/projects/templates/projects/project_owner_page.html b/app/projects/templates/projects/project_owner_page.html
new file mode 100644
index 0000000..0191b6e
--- /dev/null
+++ b/app/projects/templates/projects/project_owner_page.html
@@ -0,0 +1,39 @@
+{% extends "base.html" %}
+{% load static %}
+{% load wagtailcore_tags %}
+{% load wagtailimages_tags %}
+{% load compress %}
+{% block body_class %}template-projectownerpage{% endblock %}
+{% block extra_css %}
+    {% compress css %}
+    {% endcompress css %}
+{% endblock extra_css %}
+
+{% block content %}
+    {% include "./components/header.html" %}
+    <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">
+            <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>
+                            {% include "ui/components/icon_svgs/LinkCaret.html" with class="rotate-90 text-hot-red" %}
+                        </button>
+                {% endif %}
+            </p>
+        </div>
+    </div>
+{% endblock %}
diff --git a/app/ui/templates/ui/components/news/NewsPreviewBlockNews.html b/app/ui/templates/ui/components/news/NewsPreviewBlockNews.html
index 075345d..f3aa44a 100644
--- a/app/ui/templates/ui/components/news/NewsPreviewBlockNews.html
+++ b/app/ui/templates/ui/components/news/NewsPreviewBlockNews.html
@@ -4,7 +4,7 @@
 - readmoretext: a string; the text that should show for the "read more" button
 {% endcomment %}
 
-<div class="my-4">
+<div class="{{class}}">
     <p>
         <span class="text-small text-hot-dark-grey">
             {{ news.date }}
diff --git a/app/ui/templates/ui/components/news/NewsPreviewBlockProjects.html b/app/ui/templates/ui/components/news/NewsPreviewBlockProjects.html
index 263fa54..6f8ed31 100644
--- a/app/ui/templates/ui/components/news/NewsPreviewBlockProjects.html
+++ b/app/ui/templates/ui/components/news/NewsPreviewBlockProjects.html
@@ -6,7 +6,7 @@
 {% load wagtailimages_tags %}
 
 {% image news.image original as image_p %}
-<div class="my-4 {{class}}">
+<div class=" {{class}}">
     <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 }}')">
diff --git a/app/ui/templates/ui/components/news/NewsPreviewCarousel.html b/app/ui/templates/ui/components/news/NewsPreviewCarousel.html
index 70da95e..b1064f1 100644
--- a/app/ui/templates/ui/components/news/NewsPreviewCarousel.html
+++ b/app/ui/templates/ui/components/news/NewsPreviewCarousel.html
@@ -27,7 +27,7 @@ <h1 class="text-h2 font-bold">
         </div>
     </div>
     
-    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mt-4">
         {% for article in news %}
             <div :class="{ 'hidden md:block': fixedIndex({{forloop.counter0}}) == 1, 
                            'hidden lg:block': fixedIndex({{forloop.counter0}}) == 2,
diff --git a/app/ui/templates/ui/components/projects/ProjectPreviewBlockMapHub.html b/app/ui/templates/ui/components/projects/ProjectPreviewBlockMapHub.html
index ab76a6e..6ce46cc 100644
--- a/app/ui/templates/ui/components/projects/ProjectPreviewBlockMapHub.html
+++ b/app/ui/templates/ui/components/projects/ProjectPreviewBlockMapHub.html
@@ -7,7 +7,7 @@
 {% load wagtailimages_tags %}
 
 {% image project.header_image original as image_p %}
-<div class="font-medium my-4">
+<div class="font-medium {{class}}">
     <a href="{{ project.url }}">
         <div>
             {% if showimage %}
@@ -30,8 +30,8 @@
     </a>
 
     <p class="text-mini">
-        <a class="text-hot-red" href="#">
-            {{ project.owner_region_hub.title }}
+        <a class="text-hot-red" href="{{project.get_parent.get_parent.url}}">
+            {{ project.get_parent.get_parent.title }}
         </a>
     </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 222ffed..1bb4cc9 100644
--- a/app/ui/templates/ui/components/projects/ProjectPreviewBlockNews.html
+++ b/app/ui/templates/ui/components/projects/ProjectPreviewBlockNews.html
@@ -7,7 +7,7 @@
 {% load wagtailimages_tags %}
 
 {% image project.header_image original as image_p %}
-<div class="font-medium my-4">
+<div class="font-medium {{class}}">
     <a href="{{ project.url }}">
         <div>
             {% if showimage %}
diff --git a/app/ui/templates/ui/components/projects/ProjectPreviewCarousel.html b/app/ui/templates/ui/components/projects/ProjectPreviewCarousel.html
index 05ac3cd..2cf2526 100644
--- a/app/ui/templates/ui/components/projects/ProjectPreviewCarousel.html
+++ b/app/ui/templates/ui/components/projects/ProjectPreviewCarousel.html
@@ -27,7 +27,7 @@ <h1 class="text-h2 font-bold">
         </div>
     </div>
     
-    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mt-4">
         {% for project in projects %}
             <div :class="{ 'hidden md:block': fixedIndex({{forloop.counter0}}) == 1, 
                            'hidden lg:block': fixedIndex({{forloop.counter0}}) == 2,
diff --git a/home/templates/home/home_page.html b/home/templates/home/home_page.html
index 1c9003d..8a5a899 100644
--- a/home/templates/home/home_page.html
+++ b/home/templates/home/home_page.html
@@ -170,7 +170,7 @@ <h2 class="text-h4 font-semibold">
                 </div>
             </div>
 
-            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 md:[&_.image-hide-small]:block [&_.image-hide-small]:hidden mt-4">
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 md:[&_.image-hide-small]:block [&_.image-hide-small]:hidden mt-8">
                 {% for news in page.displayed_news %}
                     <div class="{% if forloop.counter0 > 1 %}md:hidden lg:block{% endif %}">
                         {% include "ui/components/news/NewsPreviewBlockProjects.html" with news=news.value showimage=True %}

From f18444a212919d68aa68690272ea1550baa2d02d Mon Sep 17 00:00:00 2001
From: luminaryFlowers <71102109+luminaryFlowers@users.noreply.github.com>
Date: Fri, 28 Jun 2024 10:34:46 -0700
Subject: [PATCH 03/10] starting work on Who We Are, updated primary Impact
 Areas page

---
 .../impact_areas/impact_areas_page.html       |  4 +--
 .../impact_areas/ImpactAreaPreviewBlock.html  | 26 +++++++++++++++++++
 app/who_we_are/__init__.py                    |  0
 app/who_we_are/admin.py                       |  3 +++
 app/who_we_are/apps.py                        |  6 +++++
 app/who_we_are/migrations/__init__.py         |  0
 app/who_we_are/models.py                      |  3 +++
 app/who_we_are/tests.py                       |  3 +++
 app/who_we_are/views.py                       |  3 +++
 home/models.py                                | 17 +++++-------
 10 files changed, 53 insertions(+), 12 deletions(-)
 create mode 100644 app/ui/templates/ui/components/impact_areas/ImpactAreaPreviewBlock.html
 create mode 100644 app/who_we_are/__init__.py
 create mode 100644 app/who_we_are/admin.py
 create mode 100644 app/who_we_are/apps.py
 create mode 100644 app/who_we_are/migrations/__init__.py
 create mode 100644 app/who_we_are/models.py
 create mode 100644 app/who_we_are/tests.py
 create mode 100644 app/who_we_are/views.py

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 c5867f9..b406d8e 100644
--- a/app/impact_areas/templates/impact_areas/impact_areas_page.html
+++ b/app/impact_areas/templates/impact_areas/impact_areas_page.html
@@ -13,8 +13,8 @@
     {% include "ui/components/BasePageHeader.html" with title=page.title intro=page.intro image=page.image %}
     
     <div class="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-2 lg:gap-4 px-6 mt-6">
-        {% for block in page.impact_area_blocks %}
-            {% include "ui/components/LearnMoreAboutBlurbWithImage.html" with title=block.value.title description=block.value.description image=block.value.image link=block.value.link %}
+        {% for child in page.get_children %}
+            {% include "ui/components/impact_areas/ImpactAreaPreviewBlock.html" with ia=child.specific %}
         {% endfor %}
     </div>
 {% endblock %}
\ 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
new file mode 100644
index 0000000..000b954
--- /dev/null
+++ b/app/ui/templates/ui/components/impact_areas/ImpactAreaPreviewBlock.html
@@ -0,0 +1,26 @@
+{% load wagtailimages_tags %}
+
+{% image ia.header_image original as image_p %}
+<div class="mx-4 my-8 lg:my-4">
+    <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">
+        {{ ia.title }}
+    </h2>
+
+    <div class="text-base py-1">
+        {{ ia.intro|safe }}
+    </div>
+
+    <p class="text-intro py-1">
+        <a href="{{ ia.url }}">
+            <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>
+    </p>
+</div>
\ No newline at end of file
diff --git a/app/who_we_are/__init__.py b/app/who_we_are/__init__.py
new file mode 100644
index 0000000..e69de29
diff --git a/app/who_we_are/admin.py b/app/who_we_are/admin.py
new file mode 100644
index 0000000..8c38f3f
--- /dev/null
+++ b/app/who_we_are/admin.py
@@ -0,0 +1,3 @@
+from django.contrib import admin
+
+# Register your models here.
diff --git a/app/who_we_are/apps.py b/app/who_we_are/apps.py
new file mode 100644
index 0000000..9f7e86b
--- /dev/null
+++ b/app/who_we_are/apps.py
@@ -0,0 +1,6 @@
+from django.apps import AppConfig
+
+
+class WhoWeAreConfig(AppConfig):
+    default_auto_field = 'django.db.models.BigAutoField'
+    name = 'who_we_are'
diff --git a/app/who_we_are/migrations/__init__.py b/app/who_we_are/migrations/__init__.py
new file mode 100644
index 0000000..e69de29
diff --git a/app/who_we_are/models.py b/app/who_we_are/models.py
new file mode 100644
index 0000000..71a8362
--- /dev/null
+++ b/app/who_we_are/models.py
@@ -0,0 +1,3 @@
+from django.db import models
+
+# Create your models here.
diff --git a/app/who_we_are/tests.py b/app/who_we_are/tests.py
new file mode 100644
index 0000000..7ce503c
--- /dev/null
+++ b/app/who_we_are/tests.py
@@ -0,0 +1,3 @@
+from django.test import TestCase
+
+# Create your tests here.
diff --git a/app/who_we_are/views.py b/app/who_we_are/views.py
new file mode 100644
index 0000000..91ea44a
--- /dev/null
+++ b/app/who_we_are/views.py
@@ -0,0 +1,3 @@
+from django.shortcuts import render
+
+# Create your views here.
diff --git a/home/models.py b/home/models.py
index 21a59c0..d7580bd 100644
--- a/home/models.py
+++ b/home/models.py
@@ -210,16 +210,13 @@ def get_context(self, request, *args, **kwargs):
             FieldPanel('footer_bottom_copyright'),
             FieldPanel('footer_bottom_links'),
         ], heading="Navigation"),
-        MultiFieldPanel(
-            [
-                FieldPanel("image"),
-                FieldPanel("hero_text"),
-                FieldPanel("hero_cta"),
-                FieldPanel("hero_cta_link"),
-                FieldPanel("carousel"),
-            ],
-            heading="Banner",
-        ),
+        MultiFieldPanel([
+            FieldPanel("image"),
+            FieldPanel("hero_text"),
+            FieldPanel("hero_cta"),
+            FieldPanel("hero_cta_link"),
+            FieldPanel("carousel"),
+        ], heading="Banner"),
         MultiFieldPanel([
             FieldPanel('our_work_background'),
             FieldPanel('our_work_title'),

From e050f2f720dcd88f0c27801fcec97e29c3b0e996 Mon Sep 17 00:00:00 2001
From: luminaryFlowers <71102109+luminaryFlowers@users.noreply.github.com>
Date: Tue, 2 Jul 2024 10:36:18 -0700
Subject: [PATCH 04/10] impact areas + who we are pages done => impact areas
 only had a few little things to do so that's all good now => who we are done;
 takes the "opportunities" section from the home page

---
 ..._individualimpactareapage_external_icon.py |  20 +++
 app/impact_areas/models.py                    |   2 +-
 .../components/dogear_boxes/DogearBlack.html  |   2 +-
 .../dogear_boxes/DogearContent.html           |   4 +
 .../ui/components/dogear_boxes/DogearRed.html |   2 +-
 .../impact_areas/ImpactAreaPreviewBlock.html  |   3 +-
 .../sections/BaseSectionWithImage.html        |  35 +++++
 .../sections/GreyBackgroundWithImage.html     |   5 +
 .../components/sections/LinkListSection.html  |  14 ++
 .../sections/NavyBackgroundWithImage.html     |   5 +
 app/who_we_are/apps.py                        |   2 +-
 app/who_we_are/migrations/0001_initial.py     |  61 ++++++++
 .../0002_whowearepage_partners_and_more.py    |  43 ++++++
 ...earepage_black_box_description_and_more.py |  33 +++++
 ...earepage_black_box_description_and_more.py |  24 +++
 app/who_we_are/models.py                      | 140 +++++++++++++++++-
 .../templates/who_we_are/who_we_are_page.html | 108 ++++++++++++++
 .../CheckOutOpportunitiesSection.html         |  27 ++++
 home/templates/home/home_page.html            |  23 +--
 hot_osm/settings/base.py                      |   1 +
 hot_osm/static/css/hot_osm.css                |   4 +
 21 files changed, 530 insertions(+), 28 deletions(-)
 create mode 100644 app/impact_areas/migrations/0015_alter_individualimpactareapage_external_icon.py
 create mode 100644 app/ui/templates/ui/components/sections/BaseSectionWithImage.html
 create mode 100644 app/ui/templates/ui/components/sections/GreyBackgroundWithImage.html
 create mode 100644 app/ui/templates/ui/components/sections/LinkListSection.html
 create mode 100644 app/ui/templates/ui/components/sections/NavyBackgroundWithImage.html
 create mode 100644 app/who_we_are/migrations/0001_initial.py
 create mode 100644 app/who_we_are/migrations/0002_whowearepage_partners_and_more.py
 create mode 100644 app/who_we_are/migrations/0003_whowearepage_black_box_description_and_more.py
 create mode 100644 app/who_we_are/migrations/0004_alter_whowearepage_black_box_description_and_more.py
 create mode 100644 app/who_we_are/templates/who_we_are/who_we_are_page.html
 create mode 100644 home/templates/home/components/CheckOutOpportunitiesSection.html

diff --git a/app/impact_areas/migrations/0015_alter_individualimpactareapage_external_icon.py b/app/impact_areas/migrations/0015_alter_individualimpactareapage_external_icon.py
new file mode 100644
index 0000000..1a9ed94
--- /dev/null
+++ b/app/impact_areas/migrations/0015_alter_individualimpactareapage_external_icon.py
@@ -0,0 +1,20 @@
+# Generated by Django 4.2.7 on 2024-06-28 23:12
+
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('wagtailimages', '0025_alter_image_file_alter_rendition_file'),
+        ('impact_areas', '0014_remove_individualimpactareapage_black_dogear_box_link_text_and_more'),
+    ]
+
+    operations = [
+        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.', null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='+', to='wagtailimages.image'),
+        ),
+    ]
diff --git a/app/impact_areas/models.py b/app/impact_areas/models.py
index d636be8..9e0e9f3 100644
--- a/app/impact_areas/models.py
+++ b/app/impact_areas/models.py
@@ -62,7 +62,7 @@ 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."
+        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."
     )
     intro_image = models.ForeignKey(
         "wagtailimages.Image",
diff --git a/app/ui/templates/ui/components/dogear_boxes/DogearBlack.html b/app/ui/templates/ui/components/dogear_boxes/DogearBlack.html
index dd7a5a2..6a3d2fe 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">
+<div class="dogear-box-black p-6 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 15e7663..ca842a1 100644
--- a/app/ui/templates/ui/components/dogear_boxes/DogearContent.html
+++ b/app/ui/templates/ui/components/dogear_boxes/DogearContent.html
@@ -1,6 +1,7 @@
 {% comment %}
 ==> PARAMETERS
 - title: a string; the title of the box
+- description: an html element; a description under the title (optional)
 - linkurl: a string; the link's url
 - linktext: a string; the text that shows for the link
 - color: a string; the color that the caret next to the link text should show as
@@ -11,6 +12,9 @@
 <h1 class="font-bold text-h2 my-0">
     {{ title }}
 </h1>
+{% if description %}
+    <p class="font-medium mt-2">{{description|safe}}</p>
+{% endif %}
 <a href="{{ linkurl }}" class="mt-auto pt-6">
     <p class="text-h5 font-medium">
         {{ linktext }}
diff --git a/app/ui/templates/ui/components/dogear_boxes/DogearRed.html b/app/ui/templates/ui/components/dogear_boxes/DogearRed.html
index 3c30e75..384f924 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">
+<div class="dogear-box-red p-6 flex flex-col 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 000b954..c96d3d8 100644
--- a/app/ui/templates/ui/components/impact_areas/ImpactAreaPreviewBlock.html
+++ b/app/ui/templates/ui/components/impact_areas/ImpactAreaPreviewBlock.html
@@ -7,6 +7,7 @@
     </div>
     
     <h2 class="text-h3 font-bold py-1">
+        {% image ia.external_icon original class="black-image-redifier h-16 w-auto inline" %}
         {{ ia.title }}
     </h2>
 
@@ -14,7 +15,7 @@ <h2 class="text-h3 font-bold py-1">
         {{ ia.intro|safe }}
     </div>
 
-    <p class="text-intro py-1">
+    <p class="text-intro font-medium py-1">
         <a href="{{ ia.url }}">
             <span class="border-b-hot-red border-b-2 pb-1">Learn More about {{ ia.title }}</span>
             
diff --git a/app/ui/templates/ui/components/sections/BaseSectionWithImage.html b/app/ui/templates/ui/components/sections/BaseSectionWithImage.html
new file mode 100644
index 0000000..97eb495
--- /dev/null
+++ b/app/ui/templates/ui/components/sections/BaseSectionWithImage.html
@@ -0,0 +1,35 @@
+{% load wagtailimages_tags %}
+
+<div class="mx-auto max-w-7xl grid lg:grid-cols-5">
+    {% image image original as image_p %}
+    <div class="min-h-[20rem] bg-cover bg-no-repeat lg:col-span-2 {%if imageright%}lg:order-2{%endif%}" style="background-image: url('{{image_p.url}}')"></div>
+    <div class="px-6 md:px-10 py-10 flex flex-col justify-center lg:col-span-3 {%if imageright%}lg:order-1{%endif%}">
+        <div class="text-h2 [&_b]:text-hot-red bold-override font-bold lg:font-semibold">
+            {{title|safe}}
+        </div>
+        {% if title_underline %}
+            <hr class="border-hot-red w-20 border-b-2" />
+        {% endif %}
+        <div class="{%if bigdescription%}text-intro{%endif%} font-medium my-4 base-article-m">
+            {{description|safe}}
+        </div>
+        <div class="flex gap-4">
+            {% if button2_text %}
+                <a href="{{button2_link}}">
+                    {% include "components/branded_elements/button.html" with text=button2_text classes="mt-4" %}
+                </a>
+            {% endif %}
+            {% if button_text %}
+                {% if red_button %}
+                    <a href="{{button_link}}">
+                        {% include "components/branded_elements/button.html" with text=button_text classes="mt-4" %}
+                    </a>
+                {% else %}
+                    <a href="{{button_link}}">
+                        {% include "components/branded_elements/button_bordered.html" with text=button_text classes="mt-4" %}
+                    </a>
+                {% endif %}
+            {% endif %}
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/app/ui/templates/ui/components/sections/GreyBackgroundWithImage.html b/app/ui/templates/ui/components/sections/GreyBackgroundWithImage.html
new file mode 100644
index 0000000..f7fa3ad
--- /dev/null
+++ b/app/ui/templates/ui/components/sections/GreyBackgroundWithImage.html
@@ -0,0 +1,5 @@
+{% load wagtailimages_tags %}
+
+<div class="bg-hot-off-white text-black">
+    {% include "./BaseSectionWithImage.html" %}
+</div>
\ No newline at end of file
diff --git a/app/ui/templates/ui/components/sections/LinkListSection.html b/app/ui/templates/ui/components/sections/LinkListSection.html
new file mode 100644
index 0000000..64be542
--- /dev/null
+++ b/app/ui/templates/ui/components/sections/LinkListSection.html
@@ -0,0 +1,14 @@
+<h1 class="text-h2 font-bold">{{title}}</h1>
+<hr class="my-4 border-t-2">
+<div class="grid lg:grid-cols-5 gap-8">
+    <div class="lg:col-span-3 text-intro">
+        {{description|safe}}
+    </div>
+    <div class="lg:col-span-2 flex flex-wrap lg:flex-col gap-8 lg:gap-4 font-medium text-intro">
+        {% for link in links %}
+            <p>
+                {% include "ui/components/BaseLink.html" with linktext=link.value.text linkurl=link.value.link %}
+            </p>
+        {% endfor %}
+    </div>
+</div>
\ No newline at end of file
diff --git a/app/ui/templates/ui/components/sections/NavyBackgroundWithImage.html b/app/ui/templates/ui/components/sections/NavyBackgroundWithImage.html
new file mode 100644
index 0000000..4b66272
--- /dev/null
+++ b/app/ui/templates/ui/components/sections/NavyBackgroundWithImage.html
@@ -0,0 +1,5 @@
+{% load wagtailimages_tags %}
+
+<div class="bg-hot-navy-grey text-white">
+    {% include "./BaseSectionWithImage.html" %}
+</div>
\ No newline at end of file
diff --git a/app/who_we_are/apps.py b/app/who_we_are/apps.py
index 9f7e86b..3886c18 100644
--- a/app/who_we_are/apps.py
+++ b/app/who_we_are/apps.py
@@ -3,4 +3,4 @@
 
 class WhoWeAreConfig(AppConfig):
     default_auto_field = 'django.db.models.BigAutoField'
-    name = 'who_we_are'
+    name = 'app.who_we_are'
diff --git a/app/who_we_are/migrations/0001_initial.py b/app/who_we_are/migrations/0001_initial.py
new file mode 100644
index 0000000..24fa268
--- /dev/null
+++ b/app/who_we_are/migrations/0001_initial.py
@@ -0,0 +1,61 @@
+# Generated by Django 4.2.7 on 2024-06-28 19:58
+
+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):
+
+    initial = True
+
+    dependencies = [
+        ('wagtailimages', '0025_alter_image_file_alter_rendition_file'),
+        ('wagtailcore', '0089_log_entry_data_json_null_to_object'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='WhoWeArePage',
+            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)),
+                ('learn_more_button_text', models.CharField(default='Learn More About Our Living Strategy')),
+                ('learn_more_button_url', models.URLField(blank=True)),
+                ('intro_info_blocks', wagtail.fields.StreamField([('info_block', wagtail.blocks.StructBlock([('image', wagtail.images.blocks.ImageChooserBlock()), ('title', wagtail.blocks.CharBlock(blank=True)), ('description', wagtail.blocks.CharBlock(blank=True))]))], null=True, use_json_field=True)),
+                ('our_approach_title', models.CharField(default='Our Approach')),
+                ('our_approach_description', models.CharField(blank=True)),
+                ('our_approach_button_url', models.URLField(blank=True)),
+                ('our_approach_button_text', models.CharField(default='Our Approach')),
+                ('our_people_title', models.CharField(default='Our People')),
+                ('our_people_description', wagtail.fields.RichTextField(blank=True)),
+                ('our_people_links', wagtail.fields.StreamField([('link_block', wagtail.blocks.StructBlock([('text', wagtail.blocks.CharBlock()), ('link', wagtail.blocks.URLBlock(blank=True))]))], null=True, use_json_field=True)),
+                ('other_page_preview_blocks', wagtail.fields.StreamField([('other_page_preview', wagtail.blocks.StructBlock([('image', wagtail.images.blocks.ImageChooserBlock()), ('page', wagtail.blocks.PageChooserBlock())]))], null=True, use_json_field=True)),
+                ('partners_title', models.CharField(default='Meet Our Partners')),
+                ('partners_view_all_text', models.CharField(default='View All Partners')),
+                ('partners_view_all_url', models.URLField(blank=True)),
+                ('work_hot_title', models.CharField(default='Work for HOT')),
+                ('work_hot_description', wagtail.fields.RichTextField(blank=True)),
+                ('work_hot_button_text', models.CharField(default='View all Job Opportunities')),
+                ('work_hot_button_link', models.URLField(blank=True)),
+                ('our_policies_title', models.CharField(default='Our Policies')),
+                ('our_policies_description', wagtail.fields.RichTextField(blank=True)),
+                ('our_policies_links', wagtail.fields.StreamField([('link_block', wagtail.blocks.StructBlock([('text', wagtail.blocks.CharBlock()), ('link', wagtail.blocks.URLBlock(blank=True))]))], null=True, use_json_field=True)),
+                ('red_box_title', models.CharField(default='Annual Reports')),
+                ('red_box_link_text', models.CharField(default='Access our annual report archive.')),
+                ('red_box_link_url', models.URLField(blank=True, null=True)),
+                ('black_box_title', models.CharField(default='Our Financial Reports')),
+                ('black_box_link_text', models.CharField(default='Access older financial reports and organization bylaws in our archive.')),
+                ('black_box_link_url', models.URLField(blank=True, null=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')),
+                ('our_approach_image', models.ForeignKey(blank=True, help_text='Our approach image', null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='+', to='wagtailimages.image')),
+                ('work_hot_image', models.ForeignKey(blank=True, help_text='Work for HOT section 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/who_we_are/migrations/0002_whowearepage_partners_and_more.py b/app/who_we_are/migrations/0002_whowearepage_partners_and_more.py
new file mode 100644
index 0000000..c43c3c2
--- /dev/null
+++ b/app/who_we_are/migrations/0002_whowearepage_partners_and_more.py
@@ -0,0 +1,43 @@
+# Generated by Django 4.2.7 on 2024-06-28 23:12
+
+from django.db import migrations
+import modelcluster.fields
+import wagtail.blocks
+import wagtail.fields
+import wagtail.images.blocks
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('core', '0002_alter_partner_partner_logo_alter_partner_partner_url'),
+        ('who_we_are', '0001_initial'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='whowearepage',
+            name='partners',
+            field=modelcluster.fields.ParentalManyToManyField(blank=True, to='core.partner'),
+        ),
+        migrations.AlterField(
+            model_name='whowearepage',
+            name='intro_info_blocks',
+            field=wagtail.fields.StreamField([('info_block', wagtail.blocks.StructBlock([('image', wagtail.images.blocks.ImageChooserBlock()), ('title', wagtail.blocks.CharBlock(blank=True)), ('description', wagtail.blocks.RichTextBlock(blank=True, required=False))]))], blank=True, null=True, use_json_field=True),
+        ),
+        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()), ('page', wagtail.blocks.PageChooserBlock())]))], blank=True, null=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.URLBlock(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.URLBlock(blank=True, required=False))]))], blank=True, null=True, use_json_field=True),
+        ),
+    ]
diff --git a/app/who_we_are/migrations/0003_whowearepage_black_box_description_and_more.py b/app/who_we_are/migrations/0003_whowearepage_black_box_description_and_more.py
new file mode 100644
index 0000000..5e3cd78
--- /dev/null
+++ b/app/who_we_are/migrations/0003_whowearepage_black_box_description_and_more.py
@@ -0,0 +1,33 @@
+# Generated by Django 4.2.7 on 2024-07-02 17:15
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('who_we_are', '0002_whowearepage_partners_and_more'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='whowearepage',
+            name='black_box_description',
+            field=models.CharField(default='Access older financial reports and organization bylaws in our archive.'),
+        ),
+        migrations.AddField(
+            model_name='whowearepage',
+            name='red_box_description',
+            field=models.CharField(default='Access our annual report archive.'),
+        ),
+        migrations.AlterField(
+            model_name='whowearepage',
+            name='black_box_link_text',
+            field=models.CharField(default='Check all Financial Reports'),
+        ),
+        migrations.AlterField(
+            model_name='whowearepage',
+            name='red_box_link_text',
+            field=models.CharField(default='Check all Annual Reports'),
+        ),
+    ]
diff --git a/app/who_we_are/migrations/0004_alter_whowearepage_black_box_description_and_more.py b/app/who_we_are/migrations/0004_alter_whowearepage_black_box_description_and_more.py
new file mode 100644
index 0000000..d60c861
--- /dev/null
+++ b/app/who_we_are/migrations/0004_alter_whowearepage_black_box_description_and_more.py
@@ -0,0 +1,24 @@
+# Generated by Django 4.2.7 on 2024-07-02 17:17
+
+from django.db import migrations
+import wagtail.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('who_we_are', '0003_whowearepage_black_box_description_and_more'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='whowearepage',
+            name='black_box_description',
+            field=wagtail.fields.RichTextField(default='Access older financial reports and organization bylaws in our archive.'),
+        ),
+        migrations.AlterField(
+            model_name='whowearepage',
+            name='red_box_description',
+            field=wagtail.fields.RichTextField(default='Access our annual report archive.'),
+        ),
+    ]
diff --git a/app/who_we_are/models.py b/app/who_we_are/models.py
index 71a8362..721d86c 100644
--- a/app/who_we_are/models.py
+++ b/app/who_we_are/models.py
@@ -1,3 +1,141 @@
+from django import forms
 from django.db import models
 
-# Create your models here.
+from wagtail.models import Page
+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 modelcluster.fields import ParentalKey, ParentalManyToManyField
+from wagtail.images.blocks import ImageChooserBlock
+
+
+class IntroInfoBlock(StructBlock):
+    image = ImageChooserBlock()
+    title = CharBlock(blank=True)
+    description = RichTextBlock(blank=True, required=False)
+
+
+class TextAndLinkBlock(StructBlock):
+    text = CharBlock()
+    link = URLBlock(blank=True, required=False)
+
+
+class OtherPagePreviewBlock(StructBlock):
+    image = ImageChooserBlock()
+    page = PageChooserBlock()
+
+
+class WhoWeArePage(Page):
+    header_image = models.ForeignKey(
+        "wagtailimages.Image",
+        null=True,
+        blank=True,
+        on_delete=models.SET_NULL,
+        related_name="+",
+        help_text="Header image"
+    )
+    intro = RichTextField(blank=True)
+    learn_more_button_text = models.CharField(default="Learn More About Our Living Strategy")
+    learn_more_button_url = models.URLField(blank=True)
+    intro_info_blocks = StreamField([('info_block', IntroInfoBlock())], use_json_field=True, null=True, blank=True)
+
+    our_approach_image = models.ForeignKey(
+        "wagtailimages.Image",
+        null=True,
+        blank=True,
+        on_delete=models.SET_NULL,
+        related_name="+",
+        help_text="Our approach image"
+    )
+    our_approach_title = models.CharField(default="Our Approach")
+    our_approach_description = models.CharField(blank=True)
+    our_approach_button_url = models.URLField(blank=True)
+    our_approach_button_text = models.CharField(default="Our Approach")
+
+    our_people_title = models.CharField(default="Our People")
+    our_people_description = RichTextField(blank=True)
+    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)
+
+    partners_title = models.CharField(default="Meet Our Partners")
+    partners_view_all_text = models.CharField(default="View All Partners")
+    partners_view_all_url = models.URLField(blank=True)
+    partners = ParentalManyToManyField('core.Partner', blank=True)
+
+    work_hot_image = models.ForeignKey(
+        "wagtailimages.Image",
+        null=True,
+        blank=True,
+        on_delete=models.SET_NULL,
+        related_name="+",
+        help_text="Work for HOT section image",
+    )
+    work_hot_title = models.CharField(default="Work for HOT")
+    work_hot_description = RichTextField(blank=True)
+    work_hot_button_text = models.CharField(default="View all Job Opportunities")
+    work_hot_button_link = models.URLField(blank=True)
+
+    our_policies_title = models.CharField(default="Our Policies")
+    our_policies_description = RichTextField(blank=True)
+    our_policies_links = StreamField([('link_block', TextAndLinkBlock())], use_json_field=True, null=True, blank=True)
+
+    red_box_title = models.CharField(default="Annual Reports")
+    red_box_description = RichTextField(default="Access our annual report archive.")
+    red_box_link_text = models.CharField(default="Check all Annual Reports")
+    red_box_link_url = models.URLField(null=True, blank=True)
+    black_box_title = models.CharField(default="Our Financial Reports")
+    black_box_description = RichTextField(default="Access older financial reports and organization bylaws in our archive.")
+    black_box_link_text = models.CharField(default="Check all Financial Reports")
+    black_box_link_url = models.URLField(null=True, blank=True)
+
+    content_panels = Page.content_panels + [
+        MultiFieldPanel([
+            FieldPanel('header_image'),
+            FieldPanel('intro'),
+            FieldPanel('learn_more_button_text'),
+            FieldPanel('learn_more_button_url'),
+            FieldPanel('intro_info_blocks'),
+        ], heading="Introduction"),
+        MultiFieldPanel([
+            FieldPanel('our_approach_image'),
+            FieldPanel('our_approach_title'),
+            FieldPanel('our_approach_description'),
+            FieldPanel('our_approach_button_url'),
+            FieldPanel('our_approach_button_text'),
+        ], heading="Our Approach"),
+        MultiFieldPanel([
+            FieldPanel('our_people_title'),
+            FieldPanel('our_people_description'),
+            FieldPanel('our_people_links'),
+        ], heading="Our People"),
+        FieldPanel('other_page_preview_blocks'),
+        MultiFieldPanel([
+            FieldPanel('partners_title'),
+            FieldPanel('partners_view_all_text'),
+            FieldPanel('partners_view_all_url'),
+            FieldPanel('partners', widget=forms.CheckboxSelectMultiple),
+        ], heading="Partners"),
+        MultiFieldPanel([
+            FieldPanel('work_hot_image'),
+            FieldPanel('work_hot_title'),
+            FieldPanel('work_hot_description'),
+            FieldPanel('work_hot_button_text'),
+            FieldPanel('work_hot_button_link'),
+        ], heading="Work for HOT"),
+        MultiFieldPanel([
+            FieldPanel('our_policies_title'),
+            FieldPanel('our_policies_description'),
+            FieldPanel('our_policies_links'),
+        ], heading="Our Policies"),
+        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 Boxes"),
+    ]
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
new file mode 100644
index 0000000..0688dee
--- /dev/null
+++ b/app/who_we_are/templates/who_we_are/who_we_are_page.html
@@ -0,0 +1,108 @@
+{% extends "base.html" %}
+{% load static %}
+{% load wagtailcore_tags %}
+{% load wagtailimages_tags %}
+{% load compress %}
+{% block body_class %}template-individualprojectpage{% endblock %}
+{% block extra_css %}
+    {% compress css %}
+    {% endcompress css %}
+{% endblock extra_css %}
+
+{% block content %}
+    {% comment %} INTRO {% endcomment %}
+    {% include "ui/components/BasePageHeader.html" with title=page.title image=page.header_image %}
+    <div class="max-w-7xl mx-auto mt-10 mb-20">
+        <div class="px-6 md:px-10">
+            <div class="grid grid-cols-1 lg:grid-cols-5 gap-8">
+                <div class="lg:col-span-2">
+                    <div class="base-article-m">
+                        {{ page.intro|safe }}
+                    </div>
+                    <a href="{{page.learn_more_button_url}}">
+                        {% include "components/branded_elements/button.html" with text=page.learn_more_button_text classes="mt-4" %}
+                    </a>
+                </div>
+
+                <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" %}
+                            <div class="flex-grow">
+                                <h1 class="text-h5 font-bold">{{block.value.title}}</h1>
+                                {{block.value.description|safe}}
+                            </div>
+                        </div>
+                    {% endfor %}
+                </div>
+            </div>
+        </div>
+    </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 %}
+
+    {% comment %} OUR PEOPLE {% endcomment %}
+    <div class="max-w-5xl mx-auto my-20">
+        <div class="px-6 md:px-10">
+            {% include "ui/components/sections/LinkListSection.html" with title=page.our_people_title description=page.our_people_description links=page.our_people_links %}
+        </div>
+    </div>
+
+    <div class="max-w-7xl mx-auto my-20">
+        <div class="px-6 md:px-10">
+            {% comment %} PAGE PREVIEWS {% endcomment %}
+            <div class="grid lg:grid-cols-2 gap-8 my-20">
+                {% for prev in page.other_page_preview_blocks %}
+                    {% image prev.value.image original as previmg %}
+                    <a href="{{prev.value.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">
+                                    {{prev.value.page.title}}
+                                </h1>
+                            </div>
+                        </div>
+                    </a>
+                {% endfor %}
+            </div>
+
+            {% comment %} PARTNERS {% endcomment %}
+            <div class="grid grid-cols-1 md:grid-cols-2 mt-20 mb-5">
+                <div>
+                    <h1 class="text-h2 font-bold">
+                        {{ page.partners_title }}
+                    </h1>
+                    <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>
+            </div>
+            {% include "ui/components/partners/PartnerViewBlock.html" with partners=page.partners.all %}
+        </div>
+    </div>
+
+    {% comment %} OPPORTUNITIES {% endcomment %}
+    {% include "home/components/CheckOutOpportunitiesSection.html" %}
+    {% comment %} WORK FOR HOT {% endcomment %}
+    {% include "ui/components/sections/GreyBackgroundWithImage.html" with image=page.work_hot_image title=page.work_hot_title description=page.work_hot_description button_text=page.work_hot_button_text button_link=page.work_hot_button_url red_button=True %}
+
+    <div class="max-w-5xl mx-auto my-20">
+        <div class="px-6 md:px-10">
+            {% include "ui/components/sections/LinkListSection.html" with title=page.our_policies_title description=page.our_policies_description links=page.our_policies_links %}
+        </div>
+    </div>
+
+    <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 %}
+            </div>
+        </div>
+    </div>
+{% endblock %}
diff --git a/home/templates/home/components/CheckOutOpportunitiesSection.html b/home/templates/home/components/CheckOutOpportunitiesSection.html
new file mode 100644
index 0000000..5e10d54
--- /dev/null
+++ b/home/templates/home/components/CheckOutOpportunitiesSection.html
@@ -0,0 +1,27 @@
+{% load homepage_tags %}
+{% get_home_page as home_page %}
+{% load wagtailimages_tags %}
+
+{% comment %} OPPORTUNITIES {% endcomment %}
+<div class="bg-hot-navy-grey text-white">
+    <div class="mx-auto max-w-7xl grid lg:grid-cols-5">
+        {% image home_page.opportunities_image original as op_image %}
+        <div class="lg:order-2 min-h-[20rem] bg-cover bg-no-repeat lg:col-span-2" style="background-image: url('{{op_image.url}}')"></div>
+        <div class="lg:order-1 px-6 md:px-10 py-10 flex flex-col justify-center lg:col-span-3">
+            <div class="text-h2 [&_b]:text-hot-red bold-override font-bold lg:font-semibold">
+                {{home_page.opportunities_title|safe}}
+            </div>
+            <div class="text-intro font-medium my-4">
+                {{home_page.opportunities_description|safe}}
+            </div>
+            <div class="flex gap-4">
+                <a href="{{home_page.get_involved_button_link}}">
+                    {% include "components/branded_elements/button.html" with text=home_page.get_involved_button_text classes="mt-4" %}
+                </a>
+                <a href="{{home_page.partner_with_us_button_link}}">
+                    {% include "components/branded_elements/button_bordered.html" with text=home_page.partner_with_us_button_text classes="mt-4" %}
+                </a>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/home/templates/home/home_page.html b/home/templates/home/home_page.html
index 8a5a899..60ed227 100644
--- a/home/templates/home/home_page.html
+++ b/home/templates/home/home_page.html
@@ -136,28 +136,7 @@ <h2 class="text-h4 font-semibold">
         </div>
 
         {% comment %} OPPORTUNITIES {% endcomment %}
-        <div class="bg-hot-navy-grey text-white">
-            <div class="mx-auto max-w-7xl grid lg:grid-cols-5">
-                {% image page.opportunities_image original as op_image %}
-                <div class="lg:order-2 min-h-[20rem] bg-cover bg-no-repeat lg:col-span-2" style="background-image: url('{{op_image.url}}')"></div>
-                <div class="lg:order-1 px-6 md:px-10 py-10 flex flex-col justify-center lg:col-span-3">
-                    <div class="text-h2 [&_b]:text-hot-red bold-override font-bold lg:font-semibold">
-                        {{page.opportunities_title|safe}}
-                    </div>
-                    <div class="text-intro font-medium my-4">
-                        {{page.opportunities_description|safe}}
-                    </div>
-                    <div class="flex gap-4">
-                        <a href="{{page.get_involved_button_link}}">
-                            {% include "components/branded_elements/button.html" with text=page.get_involved_button_text classes="mt-4" %}
-                        </a>
-                        <a href="{{page.partner_with_us_button_link}}">
-                            {% include "components/branded_elements/button_bordered.html" with text=page.partner_with_us_button_text classes="mt-4" %}
-                        </a>
-                    </div>
-                </div>
-            </div>
-        </div>
+        {% include "home/components/CheckOutOpportunitiesSection.html" %}
 
         <div class="mx-auto max-w-7xl px-6 md:px-10 my-20">
             {% comment %} NEWS {% endcomment %}
diff --git a/hot_osm/settings/base.py b/hot_osm/settings/base.py
index 2a45387..c5b165c 100644
--- a/hot_osm/settings/base.py
+++ b/hot_osm/settings/base.py
@@ -44,6 +44,7 @@
     "app.mapping_hubs",
     "app.members",
     "app.events",
+    "app.who_we_are",
     "search",
     "users",
     "utils",
diff --git a/hot_osm/static/css/hot_osm.css b/hot_osm/static/css/hot_osm.css
index dfc811e..430b76b 100644
--- a/hot_osm/static/css/hot_osm.css
+++ b/hot_osm/static/css/hot_osm.css
@@ -199,4 +199,8 @@
 
 .bold-override b {
     font-weight: inherit;
+}
+
+.black-image-redifier {
+    filter: invert(23%) sepia(93%) saturate(1690%) hue-rotate(340deg) brightness(110%) contrast(81%);
 }
\ No newline at end of file

From 8f2bb9b5456deadaeb6383bc5d353d113b3d4176 Mon Sep 17 00:00:00 2001
From: luminaryFlowers <71102109+luminaryFlowers@users.noreply.github.com>
Date: Tue, 2 Jul 2024 16:49:39 -0700
Subject: [PATCH 05/10] open mapping hubs page + misc => also restricted child
 pages of various owner pages

---
 app/events/models.py                          |  6 ++++-
 app/impact_areas/models.py                    |  4 +++
 .../migrations/0009_openmappinghubspage.py    | 27 +++++++++++++++++++
 ...inghubspage_header_description_and_more.py | 25 +++++++++++++++++
 ...1_openmappinghubspage_hub_text_and_more.py | 23 ++++++++++++++++
 app/mapping_hubs/models.py                    | 27 +++++++++++++++++++
 .../mapping_hubs/open_mapping_hubs_page.html  | 26 ++++++++++++++++++
 app/news/models.py                            |  4 +++
 app/programs/models.py                        |  4 +++
 .../ui/components/BasePageHeader.html         |  4 +--
 .../MappingHubPreviewExtendedBlock.html       | 21 +++++++++++++++
 app/who_we_are/models.py                      |  2 ++
 home/models.py                                |  2 ++
 13 files changed, 172 insertions(+), 3 deletions(-)
 create mode 100644 app/mapping_hubs/migrations/0009_openmappinghubspage.py
 create mode 100644 app/mapping_hubs/migrations/0010_rename_banner_description_openmappinghubspage_header_description_and_more.py
 create mode 100644 app/mapping_hubs/migrations/0011_openmappinghubspage_hub_text_and_more.py
 create mode 100644 app/mapping_hubs/templates/mapping_hubs/open_mapping_hubs_page.html
 create mode 100644 app/ui/templates/ui/components/mapping_hub/MappingHubPreviewExtendedBlock.html

diff --git a/app/events/models.py b/app/events/models.py
index c486579..302fb90 100644
--- a/app/events/models.py
+++ b/app/events/models.py
@@ -47,6 +47,10 @@ def get_context(self, request, *args, **kwargs):
     
     max_count = 1
 
+    subpage_types = [
+        'events.IndividualEventPage'
+    ]
+
     event_location_title = models.CharField(default="Event Location")
     join_event_title = models.CharField(default="Join This Event")
     rsvp_button_text = models.CharField(default="RSVP")
@@ -87,7 +91,7 @@ def get_context(self, request, *args, **kwargs):
 
 class IndividualEventPage(Page):
     parent_page_types = [
-        'projects.ProjectOwnerPage'
+        'events.EventOwnerPage'
     ]
 
     start_date_time = models.DateTimeField()
diff --git a/app/impact_areas/models.py b/app/impact_areas/models.py
index 9e0e9f3..4410a28 100644
--- a/app/impact_areas/models.py
+++ b/app/impact_areas/models.py
@@ -108,6 +108,10 @@ class ImpactAreaBlock(StreamBlock):
 class ImpactAreasPage(Page):
     max_count = 1
     
+    subpage_types = [
+        'impact_areas.IndividualImpactAreaPage'
+    ]
+    
     intro = RichTextField(blank=True)
 
     image = models.ForeignKey(
diff --git a/app/mapping_hubs/migrations/0009_openmappinghubspage.py b/app/mapping_hubs/migrations/0009_openmappinghubspage.py
new file mode 100644
index 0000000..0da2ebf
--- /dev/null
+++ b/app/mapping_hubs/migrations/0009_openmappinghubspage.py
@@ -0,0 +1,27 @@
+# Generated by Django 4.2.7 on 2024-07-02 18:58
+
+from django.db import migrations, models
+import django.db.models.deletion
+import wagtail.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('wagtailcore', '0089_log_entry_data_json_null_to_object'),
+        ('mapping_hubs', '0008_alter_individualmappinghubpage_dogear_boxes'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='OpenMappingHubsPage',
+            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)),
+            ],
+            options={
+                'abstract': False,
+            },
+            bases=('wagtailcore.page',),
+        ),
+    ]
diff --git a/app/mapping_hubs/migrations/0010_rename_banner_description_openmappinghubspage_header_description_and_more.py b/app/mapping_hubs/migrations/0010_rename_banner_description_openmappinghubspage_header_description_and_more.py
new file mode 100644
index 0000000..765e9f6
--- /dev/null
+++ b/app/mapping_hubs/migrations/0010_rename_banner_description_openmappinghubspage_header_description_and_more.py
@@ -0,0 +1,25 @@
+# Generated by Django 4.2.7 on 2024-07-02 19:10
+
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('wagtailimages', '0025_alter_image_file_alter_rendition_file'),
+        ('mapping_hubs', '0009_openmappinghubspage'),
+    ]
+
+    operations = [
+        migrations.RenameField(
+            model_name='openmappinghubspage',
+            old_name='banner_description',
+            new_name='header_description',
+        ),
+        migrations.AddField(
+            model_name='openmappinghubspage',
+            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'),
+        ),
+    ]
diff --git a/app/mapping_hubs/migrations/0011_openmappinghubspage_hub_text_and_more.py b/app/mapping_hubs/migrations/0011_openmappinghubspage_hub_text_and_more.py
new file mode 100644
index 0000000..d70c35b
--- /dev/null
+++ b/app/mapping_hubs/migrations/0011_openmappinghubspage_hub_text_and_more.py
@@ -0,0 +1,23 @@
+# Generated by Django 4.2.7 on 2024-07-02 21:10
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('mapping_hubs', '0010_rename_banner_description_openmappinghubspage_header_description_and_more'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='openmappinghubspage',
+            name='hub_text',
+            field=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'."),
+        ),
+        migrations.AddField(
+            model_name='openmappinghubspage',
+            name='learn_more_text',
+            field=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'."),
+        ),
+    ]
diff --git a/app/mapping_hubs/models.py b/app/mapping_hubs/models.py
index b913f4f..cd7212d 100644
--- a/app/mapping_hubs/models.py
+++ b/app/mapping_hubs/models.py
@@ -30,6 +30,33 @@ class DogearBoxBlock(StreamBlock):
     blocks = DogearBoxStructBlock()
 
 
+class OpenMappingHubsPage(Page):
+    max_count = 1
+
+    subpage_types = [
+        'mapping_hubs.IndividualMappingHubPage'
+    ]
+
+    header_image = models.ForeignKey(
+        "wagtailimages.Image",
+        null=True,
+        blank=True,
+        on_delete=models.SET_NULL,
+        related_name="+",
+        help_text="Header image",
+    )
+    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'.")
+
+    content_panels = Page.content_panels + [
+        FieldPanel('header_image'),
+        FieldPanel('header_description'),
+        FieldPanel('hub_text'),
+        FieldPanel('learn_more_text'),
+    ]
+
+
 class IndividualMappingHubPage(Page):
     def get_context(self, request):
         context = super().get_context(request)
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
new file mode 100644
index 0000000..42a07e1
--- /dev/null
+++ b/app/mapping_hubs/templates/mapping_hubs/open_mapping_hubs_page.html
@@ -0,0 +1,26 @@
+{% extends "base.html" %}
+{% load static %}
+{% load wagtailcore_tags %}
+{% load wagtailimages_tags %}
+{% load compress %}
+{% block body_class %}template-openmappinghubspage{% endblock %}
+{% block extra_css %}
+    {% compress css %}
+    {% endcompress css %}
+{% endblock extra_css %}
+
+{% block content %}
+    {% include "ui/components/BasePageHeader.html" with title=page.title image=page.header_image intro=page.header_description %}
+
+    <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-x-8 gap-y-16">
+                {% for child in page.get_children %}
+                    {% include "ui/components/mapping_hub/MappingHubPreviewExtendedBlock.html" with hub=child.specific hub_text=page.hub_text learn_more_text=page.learn_more_text %}
+                {% endfor %}
+            </div>
+        </div>
+    </div>
+
+    {% include "home/components/CheckOutOpportunitiesSection.html" %}
+{% endblock %}
diff --git a/app/news/models.py b/app/news/models.py
index a58a56d..1152c85 100644
--- a/app/news/models.py
+++ b/app/news/models.py
@@ -64,6 +64,10 @@ def get_context(self, request, *args, **kwargs):
     
     max_count = 1
 
+    subpage_types = [
+        'news.IndividualNewsPage'
+    ]
+
     authors_posted_by_text = models.CharField(default="Posted by", help_text="The text which appears prior to the authors names; with 'posted by', the text displays as 'posted by [author]'.")
     authors_posted_on_text = models.CharField(default="on", help_text="The text which appears prior to the date; with 'on', it would display as 'on [date]'.")
     related_projects_title = models.CharField(default="Related Projects")
diff --git a/app/programs/models.py b/app/programs/models.py
index 9e55079..a8f252c 100644
--- a/app/programs/models.py
+++ b/app/programs/models.py
@@ -35,6 +35,10 @@ class ProgramGoalBlock(StreamBlock):
 
 class ProgramOwnerPage(Page):
     max_count = 1
+
+    subpage_types = [
+        'programs.IndividualProgramPage'
+    ]
     
     stats_title = models.CharField(default="Stats")
     goals_title = models.CharField(default="Goals")
diff --git a/app/ui/templates/ui/components/BasePageHeader.html b/app/ui/templates/ui/components/BasePageHeader.html
index 174943a..b536ebf 100644
--- a/app/ui/templates/ui/components/BasePageHeader.html
+++ b/app/ui/templates/ui/components/BasePageHeader.html
@@ -13,12 +13,12 @@
         <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">
                 <div class="px-10 pb-4 h-fit {% if intro %}col-span-1{% else %}col-span-3{% endif %}">
-                    <h1 class="text-h1 font-bold lg:font-normal text-wrap">
+                    <h1 class="text-h1 font-bold lg:font-semibold text-wrap">
                         {{ title }}
                     </h1>
                 </div>
                 {% if intro %}
-                    <div class="flex-1 text-intro px-10 h-fit col-span-2">
+                    <div class="flex-1 text-intro px-10 h-fit col-span-2 mt-auto">
                         {{ intro|safe }}
                     </div>
                 {% endif %}
diff --git a/app/ui/templates/ui/components/mapping_hub/MappingHubPreviewExtendedBlock.html b/app/ui/templates/ui/components/mapping_hub/MappingHubPreviewExtendedBlock.html
new file mode 100644
index 0000000..a1e0451
--- /dev/null
+++ b/app/ui/templates/ui/components/mapping_hub/MappingHubPreviewExtendedBlock.html
@@ -0,0 +1,21 @@
+{% 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%);">
+        </div>
+    </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.intro|safe}}
+    </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 %}
+    </p>
+</div>
diff --git a/app/who_we_are/models.py b/app/who_we_are/models.py
index 721d86c..f0f2029 100644
--- a/app/who_we_are/models.py
+++ b/app/who_we_are/models.py
@@ -26,6 +26,8 @@ class OtherPagePreviewBlock(StructBlock):
 
 
 class WhoWeArePage(Page):
+    max_count = 1
+    
     header_image = models.ForeignKey(
         "wagtailimages.Image",
         null=True,
diff --git a/home/models.py b/home/models.py
index d7580bd..8b2da06 100644
--- a/home/models.py
+++ b/home/models.py
@@ -58,6 +58,8 @@ def get_context(self, request, *args, **kwargs):
         context['mapping_hubs'] = mapping_hubs
         return context
     
+    max_count = 1
+    
     templates = "home/home_page.html"
 
     # Navigation

From eed2dcb74d57de417259d03632a1d5ae2be88bb2 Mon Sep 17 00:00:00 2001
From: luminaryFlowers <71102109+luminaryFlowers@users.noreply.github.com>
Date: Thu, 4 Jul 2024 09:12:37 -0700
Subject: [PATCH 06/10] get involved page done => still needs links of course
 but besides that

---
 app/get_involved/__init__.py                  |   0
 app/get_involved/admin.py                     |   3 +
 app/get_involved/apps.py                      |   6 +
 app/get_involved/migrations/0001_initial.py   |  26 ++++
 ...volvedpage_black_box_link_text_and_more.py | 133 ++++++++++++++++++
 ...edpage_join_us_panel_read_more_and_more.py |  26 ++++
 app/get_involved/migrations/__init__.py       |   0
 app/get_involved/models.py                    |  99 +++++++++++++
 .../get_involved/get_involved_page.html       |  62 ++++++++
 app/get_involved/tests.py                     |   3 +
 app/get_involved/views.py                     |   3 +
 app/mapping_hubs/models.py                    |   3 +-
 .../ui/components/FlexTitleWithLink.html      |   8 ++
 .../ui/components/TitleWithUnderline.html     |   4 +
 .../dogear_boxes/DogearAnyColourLong.html     |   4 +-
 .../misc_panels/LinkBlockWithImage.html       |  12 ++
 .../misc_panels/PagePreviewBasic.html         |  14 ++
 .../PagePreviewWithTabletDescription.html     |  24 ++++
 .../templates/who_we_are/who_we_are_page.html |  13 +-
 hot_osm/settings/base.py                      |   1 +
 20 files changed, 429 insertions(+), 15 deletions(-)
 create mode 100644 app/get_involved/__init__.py
 create mode 100644 app/get_involved/admin.py
 create mode 100644 app/get_involved/apps.py
 create mode 100644 app/get_involved/migrations/0001_initial.py
 create mode 100644 app/get_involved/migrations/0002_getinvolvedpage_black_box_link_text_and_more.py
 create mode 100644 app/get_involved/migrations/0003_getinvolvedpage_join_us_panel_read_more_and_more.py
 create mode 100644 app/get_involved/migrations/__init__.py
 create mode 100644 app/get_involved/models.py
 create mode 100644 app/get_involved/templates/get_involved/get_involved_page.html
 create mode 100644 app/get_involved/tests.py
 create mode 100644 app/get_involved/views.py
 create mode 100644 app/ui/templates/ui/components/FlexTitleWithLink.html
 create mode 100644 app/ui/templates/ui/components/TitleWithUnderline.html
 create mode 100644 app/ui/templates/ui/components/misc_panels/LinkBlockWithImage.html
 create mode 100644 app/ui/templates/ui/components/misc_panels/PagePreviewBasic.html
 create mode 100644 app/ui/templates/ui/components/misc_panels/PagePreviewWithTabletDescription.html

diff --git a/app/get_involved/__init__.py b/app/get_involved/__init__.py
new file mode 100644
index 0000000..e69de29
diff --git a/app/get_involved/admin.py b/app/get_involved/admin.py
new file mode 100644
index 0000000..8c38f3f
--- /dev/null
+++ b/app/get_involved/admin.py
@@ -0,0 +1,3 @@
+from django.contrib import admin
+
+# Register your models here.
diff --git a/app/get_involved/apps.py b/app/get_involved/apps.py
new file mode 100644
index 0000000..49f491e
--- /dev/null
+++ b/app/get_involved/apps.py
@@ -0,0 +1,6 @@
+from django.apps import AppConfig
+
+
+class GetInvolvedConfig(AppConfig):
+    default_auto_field = 'django.db.models.BigAutoField'
+    name = 'app.get_involved'
diff --git a/app/get_involved/migrations/0001_initial.py b/app/get_involved/migrations/0001_initial.py
new file mode 100644
index 0000000..7a8ff1a
--- /dev/null
+++ b/app/get_involved/migrations/0001_initial.py
@@ -0,0 +1,26 @@
+# Generated by Django 4.2.7 on 2024-07-03 18:17
+
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    initial = True
+
+    dependencies = [
+        ('wagtailcore', '0089_log_entry_data_json_null_to_object'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='GetInvolvedPage',
+            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/get_involved/migrations/0002_getinvolvedpage_black_box_link_text_and_more.py b/app/get_involved/migrations/0002_getinvolvedpage_black_box_link_text_and_more.py
new file mode 100644
index 0000000..b32523d
--- /dev/null
+++ b/app/get_involved/migrations/0002_getinvolvedpage_black_box_link_text_and_more.py
@@ -0,0 +1,133 @@
+# Generated by Django 4.2.7 on 2024-07-03 19:30
+
+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'),
+        ('get_involved', '0001_initial'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='getinvolvedpage',
+            name='black_box_link_text',
+            field=models.CharField(default='Contact Us'),
+        ),
+        migrations.AddField(
+            model_name='getinvolvedpage',
+            name='black_box_link_url',
+            field=models.URLField(blank=True, null=True),
+        ),
+        migrations.AddField(
+            model_name='getinvolvedpage',
+            name='black_box_title',
+            field=models.CharField(default='Stay in Touch'),
+        ),
+        migrations.AddField(
+            model_name='getinvolvedpage',
+            name='dogear_box_link_text',
+            field=models.CharField(default='Contact by Country'),
+        ),
+        migrations.AddField(
+            model_name='getinvolvedpage',
+            name='dogear_box_link_url',
+            field=models.URLField(blank=True),
+        ),
+        migrations.AddField(
+            model_name='getinvolvedpage',
+            name='dogear_box_title',
+            field=models.CharField(default='Connect with our OSM community!'),
+        ),
+        migrations.AddField(
+            model_name='getinvolvedpage',
+            name='events',
+            field=wagtail.fields.StreamField([('event', wagtail.blocks.PageChooserBlock(page_type=['events.IndividualEventPage']))], blank=True, null=True, use_json_field=True),
+        ),
+        migrations.AddField(
+            model_name='getinvolvedpage',
+            name='events_title',
+            field=models.CharField(default='Events'),
+        ),
+        migrations.AddField(
+            model_name='getinvolvedpage',
+            name='get_involved_community_title',
+            field=models.CharField(default='Get Involved in Our Community'),
+        ),
+        migrations.AddField(
+            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_url', wagtail.blocks.URLBlock(required=False))]))], blank=True, null=True, use_json_field=True),
+        ),
+        migrations.AddField(
+            model_name='getinvolvedpage',
+            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='getinvolvedpage',
+            name='join_us_panels',
+            field=wagtail.fields.StreamField([('panel', wagtail.blocks.StructBlock([('image', wagtail.images.blocks.ImageChooserBlock()), ('page', wagtail.blocks.PageChooserBlock())]))], blank=True, null=True, use_json_field=True),
+        ),
+        migrations.AddField(
+            model_name='getinvolvedpage',
+            name='join_us_title',
+            field=models.CharField(default='Join Us'),
+        ),
+        migrations.AddField(
+            model_name='getinvolvedpage',
+            name='partner_with_us_button_link',
+            field=models.URLField(blank=True),
+        ),
+        migrations.AddField(
+            model_name='getinvolvedpage',
+            name='partner_with_us_button_text',
+            field=models.CharField(default='Partner With Us'),
+        ),
+        migrations.AddField(
+            model_name='getinvolvedpage',
+            name='partner_with_us_description',
+            field=wagtail.fields.RichTextField(blank=True),
+        ),
+        migrations.AddField(
+            model_name='getinvolvedpage',
+            name='partner_with_us_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='getinvolvedpage',
+            name='partner_with_us_title',
+            field=models.CharField(default='Partner With Us!'),
+        ),
+        migrations.AddField(
+            model_name='getinvolvedpage',
+            name='red_box_link_text',
+            field=models.CharField(default='Donate Today'),
+        ),
+        migrations.AddField(
+            model_name='getinvolvedpage',
+            name='red_box_link_url',
+            field=models.URLField(blank=True, null=True),
+        ),
+        migrations.AddField(
+            model_name='getinvolvedpage',
+            name='red_box_title',
+            field=models.CharField(default="Support HOT's work!"),
+        ),
+        migrations.AddField(
+            model_name='getinvolvedpage',
+            name='view_all_events_link',
+            field=models.URLField(blank=True),
+        ),
+        migrations.AddField(
+            model_name='getinvolvedpage',
+            name='view_all_events_text',
+            field=models.CharField(default='View all Events'),
+        ),
+    ]
diff --git a/app/get_involved/migrations/0003_getinvolvedpage_join_us_panel_read_more_and_more.py b/app/get_involved/migrations/0003_getinvolvedpage_join_us_panel_read_more_and_more.py
new file mode 100644
index 0000000..f362606
--- /dev/null
+++ b/app/get_involved/migrations/0003_getinvolvedpage_join_us_panel_read_more_and_more.py
@@ -0,0 +1,26 @@
+# Generated by Django 4.2.7 on 2024-07-03 23:20
+
+from django.db import migrations, models
+import wagtail.blocks
+import wagtail.fields
+import wagtail.images.blocks
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('get_involved', '0002_getinvolvedpage_black_box_link_text_and_more'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='getinvolvedpage',
+            name='join_us_panel_read_more',
+            field=models.CharField(default='Read More'),
+        ),
+        migrations.AlterField(
+            model_name='getinvolvedpage',
+            name='join_us_panels',
+            field=wagtail.fields.StreamField([('panel', wagtail.blocks.StructBlock([('image', wagtail.images.blocks.ImageChooserBlock()), ('page', wagtail.blocks.PageChooserBlock()), ('tablet_description', wagtail.blocks.RichTextBlock(blank=True, required=False))]))], blank=True, null=True, use_json_field=True),
+        ),
+    ]
diff --git a/app/get_involved/migrations/__init__.py b/app/get_involved/migrations/__init__.py
new file mode 100644
index 0000000..e69de29
diff --git a/app/get_involved/models.py b/app/get_involved/models.py
new file mode 100644
index 0000000..8ba7adc
--- /dev/null
+++ b/app/get_involved/models.py
@@ -0,0 +1,99 @@
+from django.db import models
+
+from wagtail.models import Page
+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.images.blocks import ImageChooserBlock
+from modelcluster.fields import ParentalKey, ParentalManyToManyField
+
+
+class GetInvolvedLargePanel(StructBlock):
+    image = ImageChooserBlock()
+    title = CharBlock()
+    description = RichTextBlock()
+    link_text = CharBlock()
+    link_url = URLBlock(required=False)
+
+
+class JoinUsPanel(StructBlock):
+    image = ImageChooserBlock()
+    page = PageChooserBlock()
+    tablet_description = RichTextBlock(required=False, blank=True)
+
+
+class GetInvolvedPage(Page):
+    header_image = models.ForeignKey(
+        "wagtailimages.Image",
+        null=True,
+        blank=True,
+        on_delete=models.SET_NULL,
+        related_name="+",
+        help_text="Header image"
+    )
+
+    partner_with_us_image = models.ForeignKey(
+        "wagtailimages.Image",
+        null=True,
+        blank=True,
+        on_delete=models.SET_NULL,
+        related_name="+",
+        help_text="Header image"
+    )
+    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)
+
+    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)
+    events_title = models.CharField(default="Events")
+    view_all_events_text = models.CharField(default="View all Events")
+    view_all_events_link = models.URLField(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")
+    join_us_panels = StreamField([('panel', JoinUsPanel())], use_json_field=True, blank=True, null=True)
+    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)
+    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)
+    
+    content_panels = Page.content_panels + [
+        FieldPanel('header_image'),
+        MultiFieldPanel([
+            FieldPanel('partner_with_us_image'),
+            FieldPanel('partner_with_us_title'),
+            FieldPanel('partner_with_us_description'),
+            FieldPanel('partner_with_us_button_text'),
+            FieldPanel('partner_with_us_button_link'),
+        ], 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('events_title'),
+            FieldPanel('view_all_events_text'),
+            FieldPanel('view_all_events_link'),
+            FieldPanel('events'),
+        ], heading="Get Involved in Our Community"),
+        MultiFieldPanel([
+            FieldPanel('join_us_title'),
+            FieldPanel('join_us_panels'),
+            FieldPanel('join_us_panel_read_more'),
+            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="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
new file mode 100644
index 0000000..d23abf0
--- /dev/null
+++ b/app/get_involved/templates/get_involved/get_involved_page.html
@@ -0,0 +1,62 @@
+{% extends "base.html" %}
+{% load static %}
+{% load wagtailcore_tags %}
+{% load wagtailimages_tags %}
+{% load compress %}
+{% block body_class %}template-getinvolvedpage{% endblock %}
+{% block extra_css %}
+    {% compress css %}
+    {% endcompress css %}
+{% endblock extra_css %}
+
+{% 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 %}
+    </div>
+
+    <div class="bg-hot-off-white py-20 my-20">
+        <div class="max-w-7xl mx-auto">
+            <div class="px-6 md:px-10">
+                {% 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 %}
+                    {% 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" %}
+                </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" %}
+                <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 %}
+                    {% endfor %}
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="max-w-7xl mx-auto">
+        <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">
+                {% 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 %}
+            </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 %}
+                </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/get_involved/tests.py b/app/get_involved/tests.py
new file mode 100644
index 0000000..7ce503c
--- /dev/null
+++ b/app/get_involved/tests.py
@@ -0,0 +1,3 @@
+from django.test import TestCase
+
+# Create your tests here.
diff --git a/app/get_involved/views.py b/app/get_involved/views.py
new file mode 100644
index 0000000..91ea44a
--- /dev/null
+++ b/app/get_involved/views.py
@@ -0,0 +1,3 @@
+from django.shortcuts import render
+
+# Create your views here.
diff --git a/app/mapping_hubs/models.py b/app/mapping_hubs/models.py
index cd7212d..3daabad 100644
--- a/app/mapping_hubs/models.py
+++ b/app/mapping_hubs/models.py
@@ -60,7 +60,8 @@ class OpenMappingHubsPage(Page):
 class IndividualMappingHubPage(Page):
     def get_context(self, request):
         context = super().get_context(request)
-        projects = context['page'].get_children()[0].get_children().filter(locale=context['page'].locale)
+        projects = context['page'].get_children()
+        projects = projects[0].get_children().filter(locale=context['page'].locale) if projects else None
         context['projects'] = projects
         other_hubs = IndividualMappingHubPage.objects.live().filter(locale=context['page'].locale)
         context['other_hubs'] = other_hubs
diff --git a/app/ui/templates/ui/components/FlexTitleWithLink.html b/app/ui/templates/ui/components/FlexTitleWithLink.html
new file mode 100644
index 0000000..0f23d2a
--- /dev/null
+++ b/app/ui/templates/ui/components/FlexTitleWithLink.html
@@ -0,0 +1,8 @@
+<div class="md:flex md:justify-between gap-4 md:items-center {{class}}">
+    <h1 class="{%if titleclass%}{{titleclass}}{%else%}text-h3{%endif%} font-bold">
+        {{title}}
+    </h1>
+    <p class="text-intro mt-4 md:mt-0">
+        {% include "ui/components/BaseLink.html" %}
+    </p>
+</div>
\ No newline at end of file
diff --git a/app/ui/templates/ui/components/TitleWithUnderline.html b/app/ui/templates/ui/components/TitleWithUnderline.html
new file mode 100644
index 0000000..065f351
--- /dev/null
+++ b/app/ui/templates/ui/components/TitleWithUnderline.html
@@ -0,0 +1,4 @@
+<h1 class="text-h2 font-bold">
+    {{title}}
+</h1>
+<hr class="border-hot-red w-20 border-b-2" />
diff --git a/app/ui/templates/ui/components/dogear_boxes/DogearAnyColourLong.html b/app/ui/templates/ui/components/dogear_boxes/DogearAnyColourLong.html
index 3b0288b..de6d026 100644
--- a/app/ui/templates/ui/components/dogear_boxes/DogearAnyColourLong.html
+++ b/app/ui/templates/ui/components/dogear_boxes/DogearAnyColourLong.html
@@ -6,13 +6,13 @@
 - 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-10 text-white grid grid-cols-1 lg:grid-cols-4" style="background: linear-gradient(45deg, {{ colour }} 0%, {{ colour }} 98%, transparent 98%, transparent 100%);">
+<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%}">
     <h1 class="text-h3 font-bold col-span-3">
         {{ title }}
     </h1>
     <a href="{{ linkurl }}" 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">
+        <span class="ml-4 text-hot-red" style="{%if arrowcolour%}color: {{arrowcolour}}{%endif%}">
             {% include "ui/components/icon_svgs/LinkCaret.html" %}
         </span>
     </a>
diff --git a/app/ui/templates/ui/components/misc_panels/LinkBlockWithImage.html b/app/ui/templates/ui/components/misc_panels/LinkBlockWithImage.html
new file mode 100644
index 0000000..a61d172
--- /dev/null
+++ b/app/ui/templates/ui/components/misc_panels/LinkBlockWithImage.html
@@ -0,0 +1,12 @@
+{% load wagtailimages_tags %}
+
+<div>
+    {% image image original class="aspect-[2/1] object-cover" %}
+    <h1 class="my-2 text-h3 font-bold">{{title}}</h1>
+    <div class="my-2">
+        {{description}}
+    </div>
+    <p class="font-medium text-intro mt-2">
+        {% include "ui/components/BaseLink.html" %}
+    </p>
+</div>
\ No newline at end of file
diff --git a/app/ui/templates/ui/components/misc_panels/PagePreviewBasic.html b/app/ui/templates/ui/components/misc_panels/PagePreviewBasic.html
new file mode 100644
index 0000000..2bebce6
--- /dev/null
+++ b/app/ui/templates/ui/components/misc_panels/PagePreviewBasic.html
@@ -0,0 +1,14 @@
+{% 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}}')">
+        </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
diff --git a/app/ui/templates/ui/components/misc_panels/PagePreviewWithTabletDescription.html b/app/ui/templates/ui/components/misc_panels/PagePreviewWithTabletDescription.html
new file mode 100644
index 0000000..01f4a60
--- /dev/null
+++ b/app/ui/templates/ui/components/misc_panels/PagePreviewWithTabletDescription.html
@@ -0,0 +1,24 @@
+{% 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-[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>
+    </div>
+    <div class="lg:hidden">
+        <h1 class="font-bold text-h3 my-2">{{page.title}}</h1>
+        <div class="my-2">
+            {{tablet_description}}
+        </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
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 0688dee..8acaf8d 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
@@ -54,18 +54,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 %}
-                    {% image prev.value.image original as previmg %}
-                    <a href="{{prev.value.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">
-                                    {{prev.value.page.title}}
-                                </h1>
-                            </div>
-                        </div>
-                    </a>
+                    {% include "ui/components/misc_panels/PagePreviewBasic.html" with page=prev.value.page image=prev.value.image %}
                 {% endfor %}
             </div>
 
diff --git a/hot_osm/settings/base.py b/hot_osm/settings/base.py
index c5b165c..5647702 100644
--- a/hot_osm/settings/base.py
+++ b/hot_osm/settings/base.py
@@ -45,6 +45,7 @@
     "app.members",
     "app.events",
     "app.who_we_are",
+    "app.get_involved",
     "search",
     "users",
     "utils",

From a0a2f43e44a539606a2e559c173c71a60ac1afb4 Mon Sep 17 00:00:00 2001
From: luminaryFlowers <71102109+luminaryFlowers@users.noreply.github.com>
Date: Thu, 4 Jul 2024 17:00:52 -0700
Subject: [PATCH 07/10] tools and resources page done + projects misc =>
 projects now can have multiple hubs attached, page structure changed once
 more

---
 app/get_involved/models.py                    |   2 +
 .../get_involved/get_involved_page.html       |   2 +-
 .../migrations/0012_mappinghubprojectspage.py |  33 ++++++
 ...ojectspage_black_box_link_text_and_more.py |  33 ++++++
 app/mapping_hubs/models.py                    |  49 ++++++++-
 .../components/projects_header.html}          |   0
 .../mapping_hub_projects_page.html            |  61 +++++++++++
 ...4_individualprojectpage_region_hub_list.py |  20 ++++
 .../0025_projectownerpage_header_image.py     |  20 ++++
 app/projects/models.py                        |  20 +++-
 .../projects/individual_project_page.html     |   4 +-
 .../projects/project_owner_page.html          |   2 +-
 app/tools_and_resources/__init__.py           |   0
 app/tools_and_resources/admin.py              |   3 +
 app/tools_and_resources/apps.py               |   6 ++
 .../migrations/0001_initial.py                |  52 +++++++++
 ...resourcespage_get_connected_button_text.py |  18 ++++
 .../migrations/__init__.py                    |   0
 app/tools_and_resources/models.py             | 100 ++++++++++++++++++
 .../tools_and_resources_page.html             |  67 ++++++++++++
 app/tools_and_resources/tests.py              |   3 +
 app/tools_and_resources/views.py              |   3 +
 .../mapping_hub/MappingHubPreviewBlock.html   |   8 +-
 .../MappingHubPreviewBlockBase.html           |  14 +++
 .../projects/ProjectPreviewBlockMapHub.html   |   6 +-
 .../sections/BaseSectionWithImage.html        |   2 +-
 hot_osm/settings/base.py                      |   1 +
 27 files changed, 509 insertions(+), 20 deletions(-)
 create mode 100644 app/mapping_hubs/migrations/0012_mappinghubprojectspage.py
 create mode 100644 app/mapping_hubs/migrations/0013_alter_mappinghubprojectspage_black_box_link_text_and_more.py
 rename app/{projects/templates/projects/components/header.html => mapping_hubs/templates/mapping_hubs/components/projects_header.html} (100%)
 create mode 100644 app/mapping_hubs/templates/mapping_hubs/mapping_hub_projects_page.html
 create mode 100644 app/projects/migrations/0024_individualprojectpage_region_hub_list.py
 create mode 100644 app/projects/migrations/0025_projectownerpage_header_image.py
 create mode 100644 app/tools_and_resources/__init__.py
 create mode 100644 app/tools_and_resources/admin.py
 create mode 100644 app/tools_and_resources/apps.py
 create mode 100644 app/tools_and_resources/migrations/0001_initial.py
 create mode 100644 app/tools_and_resources/migrations/0002_alter_toolsandresourcespage_get_connected_button_text.py
 create mode 100644 app/tools_and_resources/migrations/__init__.py
 create mode 100644 app/tools_and_resources/models.py
 create mode 100644 app/tools_and_resources/templates/tools_and_resources/tools_and_resources_page.html
 create mode 100644 app/tools_and_resources/tests.py
 create mode 100644 app/tools_and_resources/views.py
 create mode 100644 app/ui/templates/ui/components/mapping_hub/MappingHubPreviewBlockBase.html

diff --git a/app/get_involved/models.py b/app/get_involved/models.py
index 8ba7adc..2cb2356 100644
--- a/app/get_involved/models.py
+++ b/app/get_involved/models.py
@@ -23,6 +23,8 @@ class JoinUsPanel(StructBlock):
 
 
 class GetInvolvedPage(Page):
+    max_count = 1
+
     header_image = models.ForeignKey(
         "wagtailimages.Image",
         null=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 d23abf0..7343149 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 %}
+        {% 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%}
     </div>
 
     <div class="bg-hot-off-white py-20 my-20">
diff --git a/app/mapping_hubs/migrations/0012_mappinghubprojectspage.py b/app/mapping_hubs/migrations/0012_mappinghubprojectspage.py
new file mode 100644
index 0000000..fca3cc1
--- /dev/null
+++ b/app/mapping_hubs/migrations/0012_mappinghubprojectspage.py
@@ -0,0 +1,33 @@
+# Generated by Django 4.2.7 on 2024-07-04 22:41
+
+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'),
+        ('mapping_hubs', '0011_openmappinghubspage_hub_text_and_more'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='MappingHubProjectsPage',
+            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')),
+                ('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='Start Mapping')),
+                ('red_box_link_text', models.CharField(default='Start Mapping')),
+                ('red_box_link_url', models.URLField(blank=True, null=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(blank=True, null=True)),
+            ],
+            options={
+                'abstract': False,
+            },
+            bases=('wagtailcore.page',),
+        ),
+    ]
diff --git a/app/mapping_hubs/migrations/0013_alter_mappinghubprojectspage_black_box_link_text_and_more.py b/app/mapping_hubs/migrations/0013_alter_mappinghubprojectspage_black_box_link_text_and_more.py
new file mode 100644
index 0000000..929575f
--- /dev/null
+++ b/app/mapping_hubs/migrations/0013_alter_mappinghubprojectspage_black_box_link_text_and_more.py
@@ -0,0 +1,33 @@
+# Generated by Django 4.2.7 on 2024-07-04 23:02
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('mapping_hubs', '0012_mappinghubprojectspage'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='mappinghubprojectspage',
+            name='black_box_link_text',
+            field=models.CharField(default='Get involved'),
+        ),
+        migrations.AlterField(
+            model_name='mappinghubprojectspage',
+            name='black_box_title',
+            field=models.CharField(default='See the many ways to get involved with HOT and open mapping'),
+        ),
+        migrations.AlterField(
+            model_name='mappinghubprojectspage',
+            name='red_box_link_text',
+            field=models.CharField(default='Explore projects'),
+        ),
+        migrations.AlterField(
+            model_name='mappinghubprojectspage',
+            name='red_box_title',
+            field=models.CharField(default="See all of HOT's projects"),
+        ),
+    ]
diff --git a/app/mapping_hubs/models.py b/app/mapping_hubs/models.py
index 3daabad..1f79b86 100644
--- a/app/mapping_hubs/models.py
+++ b/app/mapping_hubs/models.py
@@ -1,5 +1,6 @@
 from django import forms
 from django.db import models
+from django.db.models import Q
 
 from wagtail.models import Page
 from wagtail.fields import RichTextField, StreamField
@@ -30,6 +31,49 @@ class DogearBoxBlock(StreamBlock):
     blocks = DogearBoxStructBlock()
 
 
+class MappingHubProjectsPage(Page):
+    def get_context(self, request):
+        context = super().get_context(request)
+
+        parent_hub = context['page'].get_parent()
+
+        projects = IndividualProjectPage.objects.live().filter(
+            Q(region_hub_list__contains=[{'type': 'region_hub', 'value': parent_hub.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_url = models.URLField(null=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 = models.URLField(null=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_url'),
+        FieldPanel('black_box_title'),
+        FieldPanel('black_box_link_text'),
+        FieldPanel('black_box_link_url'),
+    ]
+
+
 class OpenMappingHubsPage(Page):
     max_count = 1
 
@@ -60,8 +104,9 @@ class OpenMappingHubsPage(Page):
 class IndividualMappingHubPage(Page):
     def get_context(self, request):
         context = super().get_context(request)
-        projects = context['page'].get_children()
-        projects = projects[0].get_children().filter(locale=context['page'].locale) if projects else None
+        projects = IndividualProjectPage.objects.live().filter(
+            Q(region_hub_list__contains=[{'type': 'region_hub', 'value': context['page'].id}])
+        ).filter(locale=context['page'].locale)
         context['projects'] = projects
         other_hubs = IndividualMappingHubPage.objects.live().filter(locale=context['page'].locale)
         context['other_hubs'] = other_hubs
diff --git a/app/projects/templates/projects/components/header.html b/app/mapping_hubs/templates/mapping_hubs/components/projects_header.html
similarity index 100%
rename from app/projects/templates/projects/components/header.html
rename to app/mapping_hubs/templates/mapping_hubs/components/projects_header.html
diff --git a/app/mapping_hubs/templates/mapping_hubs/mapping_hub_projects_page.html b/app/mapping_hubs/templates/mapping_hubs/mapping_hub_projects_page.html
new file mode 100644
index 0000000..40b6eba
--- /dev/null
+++ b/app/mapping_hubs/templates/mapping_hubs/mapping_hub_projects_page.html
@@ -0,0 +1,61 @@
+{% extends "base.html" %}
+{% load static %}
+{% load wagtailcore_tags %}
+{% load wagtailimages_tags %}
+{% load compress %}
+{% block body_class %}template-mappinghubprojectspage{% endblock %}
+{% block extra_css %}
+    {% compress css %}
+    {% endcompress css %}
+{% endblock extra_css %}
+
+{% block content %}
+    {% include "./components/projects_header.html" %}
+    <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">
+            <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 my-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>
+                            {% include "ui/components/icon_svgs/LinkCaret.html" with class="rotate-90 text-hot-red" %}
+                        </button>
+                {% endif %}
+            </p>
+
+            <h1 class="mt-20 mb-4 font-bold text-h2">
+                {{page.projects_by_hub_title}}
+            </h1>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
+                {% for hub in other_hubs %}
+                    {% if hub != page %}
+                        <a href="{{hub.url}}">
+                            {% include "ui/components/mapping_hub/MappingHubPreviewBlockBase.html" with hub=hub.get_parent.specific %}
+                        </a>
+                        {% endif %}
+                {% endfor %}
+            </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 %}
+                </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/projects/migrations/0024_individualprojectpage_region_hub_list.py b/app/projects/migrations/0024_individualprojectpage_region_hub_list.py
new file mode 100644
index 0000000..e1e2261
--- /dev/null
+++ b/app/projects/migrations/0024_individualprojectpage_region_hub_list.py
@@ -0,0 +1,20 @@
+# Generated by Django 4.2.7 on 2024-07-04 18:38
+
+from django.db import migrations
+import wagtail.blocks
+import wagtail.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('projects', '0023_remove_individualprojectpage_owner_region_hub'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='individualprojectpage',
+            name='region_hub_list',
+            field=wagtail.fields.StreamField([('region_hub', wagtail.blocks.PageChooserBlock(page_type=['mapping_hubs.IndividualMappingHubPage']))], blank=True, null=True, use_json_field=True),
+        ),
+    ]
diff --git a/app/projects/migrations/0025_projectownerpage_header_image.py b/app/projects/migrations/0025_projectownerpage_header_image.py
new file mode 100644
index 0000000..15e07d8
--- /dev/null
+++ b/app/projects/migrations/0025_projectownerpage_header_image.py
@@ -0,0 +1,20 @@
+# Generated by Django 4.2.7 on 2024-07-04 23:02
+
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('wagtailimages', '0025_alter_image_file_alter_rendition_file'),
+        ('projects', '0024_individualprojectpage_region_hub_list'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='projectownerpage',
+            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'),
+        ),
+    ]
diff --git a/app/projects/models.py b/app/projects/models.py
index 6a12032..a4f6209 100644
--- a/app/projects/models.py
+++ b/app/projects/models.py
@@ -31,14 +31,21 @@ def get_context(self, request, *args, **kwargs):
         context['projects'] = projects
         return context
     
-    parent_page_types = [
-        'mapping_hubs.IndividualMappingHubPage'
-    ]
+    max_count = 1
 
     subpage_types = [
         'projects.IndividualProjectPage'
     ]
 
+    header_image = models.ForeignKey(
+        "wagtailimages.Image",
+        null=True,
+        blank=True,
+        on_delete=models.SET_NULL,
+        related_name="+",
+        help_text="Header image"
+    )
+
     load_more_projects_text = models.CharField(default="Load More Projects")
 
     impact_areas_title = models.CharField(default="Impact Areas")
@@ -64,8 +71,9 @@ def get_context(self, request, *args, **kwargs):
 
     content_panels = Page.content_panels + [
         MultiFieldPanel([
+            FieldPanel('header_image'),
             FieldPanel('load_more_projects_text'),
-        ], heading="Project Open Mapping Hub Page"),
+        ], heading="Project Page"),
         MultiFieldPanel([
             MultiFieldPanel([
                 FieldPanel('impact_areas_title'),
@@ -104,6 +112,7 @@ class IndividualProjectPage(Page):
     parent_page_types = [
         'projects.ProjectOwnerPage'
     ]
+
     # > HEADER
     owner_program = models.ForeignKey(
         'wagtailcore.Page',
@@ -138,6 +147,8 @@ class IndividualProjectPage(Page):
     # > SIDE BAR
     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)
@@ -174,6 +185,7 @@ class IndividualProjectPage(Page):
         ], heading="Body"),
         MultiFieldPanel([
             FieldPanel('impact_area_list'),
+            FieldPanel('region_hub_list'),
             FieldPanel('duration'),
             FieldPanel('partners_list', widget=forms.CheckboxSelectMultiple),
             FieldPanel('tools'),
diff --git a/app/projects/templates/projects/individual_project_page.html b/app/projects/templates/projects/individual_project_page.html
index 2cc3b2c..1db1a43 100644
--- a/app/projects/templates/projects/individual_project_page.html
+++ b/app/projects/templates/projects/individual_project_page.html
@@ -37,7 +37,9 @@
                     </div>
                     <div>
                         <p>{{page.get_parent.specific.region_hub_title}}</p>
-                        <p><a href="{{page.get_parent.get_parent.url}}">{{page.get_parent.get_parent.title}}</a></p>
+                        {% for hub in page.region_hub_list %}
+                            <p><a href="{{hub.value.url}}">{{hub.value.title}}</a></p>
+                        {% endfor %}
                     </div>
                     <div>
                         <p>{{page.get_parent.specific.duration_title}}</p>
diff --git a/app/projects/templates/projects/project_owner_page.html b/app/projects/templates/projects/project_owner_page.html
index 0191b6e..f110ee2 100644
--- a/app/projects/templates/projects/project_owner_page.html
+++ b/app/projects/templates/projects/project_owner_page.html
@@ -10,7 +10,7 @@
 {% endblock extra_css %}
 
 {% block content %}
-    {% include "./components/header.html" %}
+    {% 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) }">
         <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">
diff --git a/app/tools_and_resources/__init__.py b/app/tools_and_resources/__init__.py
new file mode 100644
index 0000000..e69de29
diff --git a/app/tools_and_resources/admin.py b/app/tools_and_resources/admin.py
new file mode 100644
index 0000000..8c38f3f
--- /dev/null
+++ b/app/tools_and_resources/admin.py
@@ -0,0 +1,3 @@
+from django.contrib import admin
+
+# Register your models here.
diff --git a/app/tools_and_resources/apps.py b/app/tools_and_resources/apps.py
new file mode 100644
index 0000000..236d5fe
--- /dev/null
+++ b/app/tools_and_resources/apps.py
@@ -0,0 +1,6 @@
+from django.apps import AppConfig
+
+
+class ToolsAndResourcesConfig(AppConfig):
+    default_auto_field = 'django.db.models.BigAutoField'
+    name = 'app.tools_and_resources'
diff --git a/app/tools_and_resources/migrations/0001_initial.py b/app/tools_and_resources/migrations/0001_initial.py
new file mode 100644
index 0000000..ba742b4
--- /dev/null
+++ b/app/tools_and_resources/migrations/0001_initial.py
@@ -0,0 +1,52 @@
+# Generated by Django 4.2.7 on 2024-07-04 17:17
+
+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):
+
+    initial = True
+
+    dependencies = [
+        ('wagtailimages', '0025_alter_image_file_alter_rendition_file'),
+        ('wagtailcore', '0089_log_entry_data_json_null_to_object'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='ToolsAndResourcesPage',
+            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_header', models.CharField(blank=True)),
+                ('intro', wagtail.fields.RichTextField(blank=True)),
+                ('description', wagtail.fields.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)),
+                ('large_panels', 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_url', wagtail.blocks.URLBlock(required=False))]))], blank=True, null=True, use_json_field=True)),
+                ('resource_learning_title', models.CharField(default='Resource and Learning Centre')),
+                ('resource_learning_description', wagtail.fields.RichTextField(blank=True)),
+                ('get_connected_button_text', models.CharField(default='Get connect now')),
+                ('get_connected_button_link', models.URLField(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)),
+                ('red_box_title', models.CharField(default='Start Mapping')),
+                ('red_box_link_text', models.CharField(default='Start Mapping')),
+                ('red_box_link_url', models.URLField(blank=True, null=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(blank=True, null=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')),
+                ('intro_image', models.ForeignKey(blank=True, help_text='Intro image', null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='+', to='wagtailimages.image')),
+                ('resource_learning_image', models.ForeignKey(blank=True, help_text='Resource and Learning Centre 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/tools_and_resources/migrations/0002_alter_toolsandresourcespage_get_connected_button_text.py b/app/tools_and_resources/migrations/0002_alter_toolsandresourcespage_get_connected_button_text.py
new file mode 100644
index 0000000..c974feb
--- /dev/null
+++ b/app/tools_and_resources/migrations/0002_alter_toolsandresourcespage_get_connected_button_text.py
@@ -0,0 +1,18 @@
+# Generated by Django 4.2.7 on 2024-07-04 18:38
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('tools_and_resources', '0001_initial'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='toolsandresourcespage',
+            name='get_connected_button_text',
+            field=models.CharField(default='Get connected now'),
+        ),
+    ]
diff --git a/app/tools_and_resources/migrations/__init__.py b/app/tools_and_resources/migrations/__init__.py
new file mode 100644
index 0000000..e69de29
diff --git a/app/tools_and_resources/models.py b/app/tools_and_resources/models.py
new file mode 100644
index 0000000..75db779
--- /dev/null
+++ b/app/tools_and_resources/models.py
@@ -0,0 +1,100 @@
+from django.db import models
+
+from wagtail.models import Page
+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.images.blocks import ImageChooserBlock
+from modelcluster.fields import ParentalKey, ParentalManyToManyField
+
+
+class LargePanel(StructBlock):
+    image = ImageChooserBlock()
+    title = CharBlock()
+    description = RichTextBlock()
+    link_text = CharBlock()
+    link_url = URLBlock(required=False)
+
+
+class ToolsAndResourcesPage(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"
+    )
+
+    intro_image = models.ForeignKey(
+        "wagtailimages.Image",
+        null=True,
+        blank=True,
+        on_delete=models.SET_NULL,
+        related_name="+",
+        help_text="Intro image"
+    )
+    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_link = models.URLField(blank=True)
+
+    large_panels = StreamField([('panel', LargePanel())], use_json_field=True, null=True, blank=True)
+
+    resource_learning_image = models.ForeignKey(
+        "wagtailimages.Image",
+        null=True,
+        blank=True,
+        on_delete=models.SET_NULL,
+        related_name="+",
+        help_text="Resource and Learning Centre image"
+    )
+    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)
+
+    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)
+
+    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)
+    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)
+
+    content_panels = Page.content_panels + [
+        FieldPanel('header_image'),
+        MultiFieldPanel([
+            FieldPanel('intro_image'),
+            FieldPanel('intro_header'),
+            FieldPanel('intro'),
+            FieldPanel('description'),
+            FieldPanel('learn_more_data_principles_text'),
+            FieldPanel('learn_more_data_principles_link'),
+        ], 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_link'),
+        ], heading="Resource and Learning Centre"),
+        MultiFieldPanel([
+            FieldPanel('dogear_tech_news_title'),
+            FieldPanel('dogear_tech_news_link_text'),
+            FieldPanel('dogear_tech_news_link_url'),
+            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"),
+    ]
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
new file mode 100644
index 0000000..4eff124
--- /dev/null
+++ b/app/tools_and_resources/templates/tools_and_resources/tools_and_resources_page.html
@@ -0,0 +1,67 @@
+{% extends "base.html" %}
+{% load static %}
+{% load wagtailcore_tags %}
+{% load wagtailimages_tags %}
+{% load compress %}
+{% block body_class %}template-toolsandresourcespage{% endblock %}
+{% block extra_css %}
+    {% compress css %}
+    {% endcompress css %}
+{% 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">
+        <div class="px-6 md:px-10">
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 my-10">
+                <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>
+                </div>
+                {% image page.intro_image original %}
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 my-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_url %}
+                {% endfor %}
+            </div>
+        </div>
+    </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 %}
+    </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" %}
+            </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 %}
+                </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/tools_and_resources/tests.py b/app/tools_and_resources/tests.py
new file mode 100644
index 0000000..7ce503c
--- /dev/null
+++ b/app/tools_and_resources/tests.py
@@ -0,0 +1,3 @@
+from django.test import TestCase
+
+# Create your tests here.
diff --git a/app/tools_and_resources/views.py b/app/tools_and_resources/views.py
new file mode 100644
index 0000000..91ea44a
--- /dev/null
+++ b/app/tools_and_resources/views.py
@@ -0,0 +1,3 @@
+from django.shortcuts import render
+
+# Create your views here.
diff --git a/app/ui/templates/ui/components/mapping_hub/MappingHubPreviewBlock.html b/app/ui/templates/ui/components/mapping_hub/MappingHubPreviewBlock.html
index f20bfad..dba7278 100644
--- a/app/ui/templates/ui/components/mapping_hub/MappingHubPreviewBlock.html
+++ b/app/ui/templates/ui/components/mapping_hub/MappingHubPreviewBlock.html
@@ -6,11 +6,5 @@
 {% load wagtailimages_tags %}
 
 <a href="{{ hub.url }}">
-    <div>
-        {% image hub.main_external_hub_image fill-600x300 %}
-        
-        <p class="text-h5 font-bold mt-4">
-            {{ hub.title }}
-        </p>
-    </div>
+    {% 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
new file mode 100644
index 0000000..516b30b
--- /dev/null
+++ b/app/ui/templates/ui/components/mapping_hub/MappingHubPreviewBlockBase.html
@@ -0,0 +1,14 @@
+{% comment %}
+==> PARAMETERS
+- hub: An IndividualMappingHubPage object; the mapping hub page to be previewed
+{% 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>
diff --git a/app/ui/templates/ui/components/projects/ProjectPreviewBlockMapHub.html b/app/ui/templates/ui/components/projects/ProjectPreviewBlockMapHub.html
index 6ce46cc..6993601 100644
--- a/app/ui/templates/ui/components/projects/ProjectPreviewBlockMapHub.html
+++ b/app/ui/templates/ui/components/projects/ProjectPreviewBlockMapHub.html
@@ -30,8 +30,8 @@
     </a>
 
     <p class="text-mini">
-        <a class="text-hot-red" href="{{project.get_parent.get_parent.url}}">
-            {{ project.get_parent.get_parent.title }}
-        </a>
+        {% 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 %}
+        {% endfor %}
     </p>
 </div>
\ 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 97eb495..b268022 100644
--- a/app/ui/templates/ui/components/sections/BaseSectionWithImage.html
+++ b/app/ui/templates/ui/components/sections/BaseSectionWithImage.html
@@ -2,7 +2,7 @@
 
 <div class="mx-auto max-w-7xl grid lg:grid-cols-5">
     {% image image original as image_p %}
-    <div class="min-h-[20rem] bg-cover bg-no-repeat lg:col-span-2 {%if imageright%}lg:order-2{%endif%}" style="background-image: url('{{image_p.url}}')"></div>
+    <div class="min-h-[20rem] bg-cover bg-no-repeat lg:col-span-2 {%if imageright%}lg:order-2{%else%}lg:order-1{%endif%} {%if imagebottom%}order-2{%endif%} {%if imagenotwide%}mx-6 md:mx-10 lg:ml-0{%endif%}" style="background-image: url('{{image_p.url}}')"></div>
     <div class="px-6 md:px-10 py-10 flex flex-col justify-center lg:col-span-3 {%if imageright%}lg:order-1{%endif%}">
         <div class="text-h2 [&_b]:text-hot-red bold-override font-bold lg:font-semibold">
             {{title|safe}}
diff --git a/hot_osm/settings/base.py b/hot_osm/settings/base.py
index 5647702..b53f485 100644
--- a/hot_osm/settings/base.py
+++ b/hot_osm/settings/base.py
@@ -46,6 +46,7 @@
     "app.events",
     "app.who_we_are",
     "app.get_involved",
+    "app.tools_and_resources",
     "search",
     "users",
     "utils",

From ffe023482ff588673f739e7615e73666ec583ddb Mon Sep 17 00:00:00 2001
From: luminaryFlowers <71102109+luminaryFlowers@users.noreply.github.com>
Date: Mon, 8 Jul 2024 16:56:39 -0700
Subject: [PATCH 08/10] search functionality and page

---
 app/core/migrations/0003_hotsearchablepage.py | 27 +++++++++
 app/core/migrations/0004_testpagepage.py      | 24 ++++++++
 ...earchablepage_intro_delete_testpagepage.py | 20 +++++++
 app/core/models.py                            |  6 ++
 app/events/models.py                          |  1 +
 .../templates/events/event_owner_page.html    | 43 +------------
 ...introduction_individualmemberpage_intro.py | 18 ++++++
 app/members/models.py                         | 12 +++-
 app/news/models.py                            |  1 +
 app/news/templates/news/news_owner_page.html  | 43 +------------
 app/programs/models.py                        |  7 +++
 ...0026_remove_individualprojectpage_intro.py | 17 ++++++
 .../0027_individualprojectpage_intro.py       | 19 ++++++
 app/projects/models.py                        |  8 +++
 app/search_page/__init__.py                   |  0
 app/search_page/admin.py                      |  3 +
 app/search_page/apps.py                       |  6 ++
 app/search_page/migrations/0001_initial.py    | 26 ++++++++
 ..._searchpage_search_text_midfix_and_more.py | 28 +++++++++
 .../0003_searchpage_no_results_text.py        | 18 ++++++
 .../0004_searchpage_no_results_go_back.py     | 18 ++++++
 app/search_page/migrations/__init__.py        |  0
 app/search_page/models.py                     | 58 ++++++++++++++++++
 .../templates/search_page/search_page.html    | 60 +++++++++++++++++++
 app/search_page/tests.py                      |  3 +
 app/search_page/views.py                      |  3 +
 .../ui/components/icon_svgs/SearchIcon.html   |  2 +-
 .../components/navigation/HeaderNavbar.html   |  1 +
 .../ui/components/navigation/SearchForm.html  | 16 +++++
 .../ui/components/navigation/SearchModal.html | 16 +++++
 .../utilities/PaginatorNavigation.html        | 47 +++++++++++++++
 hot_osm/settings/base.py                      |  1 +
 hot_osm/templates/base.html                   |  1 +
 .../components/nav/secondary_desktop_nav.html | 13 ++--
 34 files changed, 475 insertions(+), 91 deletions(-)
 create mode 100644 app/core/migrations/0003_hotsearchablepage.py
 create mode 100644 app/core/migrations/0004_testpagepage.py
 create mode 100644 app/core/migrations/0005_remove_hotsearchablepage_intro_delete_testpagepage.py
 create mode 100644 app/members/migrations/0003_rename_introduction_individualmemberpage_intro.py
 create mode 100644 app/projects/migrations/0026_remove_individualprojectpage_intro.py
 create mode 100644 app/projects/migrations/0027_individualprojectpage_intro.py
 create mode 100644 app/search_page/__init__.py
 create mode 100644 app/search_page/admin.py
 create mode 100644 app/search_page/apps.py
 create mode 100644 app/search_page/migrations/0001_initial.py
 create mode 100644 app/search_page/migrations/0002_searchpage_search_text_midfix_and_more.py
 create mode 100644 app/search_page/migrations/0003_searchpage_no_results_text.py
 create mode 100644 app/search_page/migrations/0004_searchpage_no_results_go_back.py
 create mode 100644 app/search_page/migrations/__init__.py
 create mode 100644 app/search_page/models.py
 create mode 100644 app/search_page/templates/search_page/search_page.html
 create mode 100644 app/search_page/tests.py
 create mode 100644 app/search_page/views.py
 create mode 100644 app/ui/templates/ui/components/navigation/SearchForm.html
 create mode 100644 app/ui/templates/ui/components/navigation/SearchModal.html
 create mode 100644 app/ui/templates/ui/components/utilities/PaginatorNavigation.html

diff --git a/app/core/migrations/0003_hotsearchablepage.py b/app/core/migrations/0003_hotsearchablepage.py
new file mode 100644
index 0000000..bbe934b
--- /dev/null
+++ b/app/core/migrations/0003_hotsearchablepage.py
@@ -0,0 +1,27 @@
+# Generated by Django 4.2.7 on 2024-07-08 21:16
+
+from django.db import migrations, models
+import django.db.models.deletion
+import wagtail.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('wagtailcore', '0089_log_entry_data_json_null_to_object'),
+        ('core', '0002_alter_partner_partner_logo_alter_partner_partner_url'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='HOTSearchablePage',
+            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)),
+            ],
+            options={
+                'abstract': False,
+            },
+            bases=('wagtailcore.page',),
+        ),
+    ]
diff --git a/app/core/migrations/0004_testpagepage.py b/app/core/migrations/0004_testpagepage.py
new file mode 100644
index 0000000..dd1b55a
--- /dev/null
+++ b/app/core/migrations/0004_testpagepage.py
@@ -0,0 +1,24 @@
+# Generated by Django 4.2.7 on 2024-07-08 21:31
+
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('core', '0003_hotsearchablepage'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='TestPagePage',
+            fields=[
+                ('hotsearchablepage_ptr', models.OneToOneField(auto_created=True, on_delete=django.db.models.deletion.CASCADE, parent_link=True, primary_key=True, serialize=False, to='core.hotsearchablepage')),
+            ],
+            options={
+                'abstract': False,
+            },
+            bases=('core.hotsearchablepage',),
+        ),
+    ]
diff --git a/app/core/migrations/0005_remove_hotsearchablepage_intro_delete_testpagepage.py b/app/core/migrations/0005_remove_hotsearchablepage_intro_delete_testpagepage.py
new file mode 100644
index 0000000..ee4161d
--- /dev/null
+++ b/app/core/migrations/0005_remove_hotsearchablepage_intro_delete_testpagepage.py
@@ -0,0 +1,20 @@
+# Generated by Django 4.2.7 on 2024-07-08 21:35
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('core', '0004_testpagepage'),
+    ]
+
+    operations = [
+        migrations.RemoveField(
+            model_name='hotsearchablepage',
+            name='intro',
+        ),
+        migrations.DeleteModel(
+            name='TestPagePage',
+        ),
+    ]
diff --git a/app/core/models.py b/app/core/models.py
index dc01482..f5bc52c 100644
--- a/app/core/models.py
+++ b/app/core/models.py
@@ -1,4 +1,6 @@
 from django.db import models
+from wagtail.models import Page
+from wagtail.fields import RichTextField
 
 from wagtail.snippets.models import register_snippet
 from wagtail.admin.panels import FieldPanel, MultiFieldPanel, InlinePanel
@@ -27,3 +29,7 @@ def __str__(self):
     
     class Meta:
         verbose_name_plural = "Partners"
+
+
+class HotSearchablePage(Page):
+    pass
diff --git a/app/events/models.py b/app/events/models.py
index 302fb90..7acc034 100644
--- a/app/events/models.py
+++ b/app/events/models.py
@@ -123,6 +123,7 @@ class IndividualEventPage(Page):
     search_fields = Page.search_fields + [
         index.SearchField('title'),
         index.SearchField('intro'),
+        index.SearchField('search_description'),
     ]
 
     content_panels = Page.content_panels + [
diff --git a/app/events/templates/events/event_owner_page.html b/app/events/templates/events/event_owner_page.html
index 073f462..1d067b5 100644
--- a/app/events/templates/events/event_owner_page.html
+++ b/app/events/templates/events/event_owner_page.html
@@ -46,53 +46,14 @@ <h1 class="text-h1 font-semibold my-10">{{page.title}}</h1>
 
             {% 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">
+            <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>
 
             {% comment %} PAGE NAVIGATION {% endcomment %}
-            <div class="w-full flex justify-center items-center mt-10" 
-                 x-data="{
-                            page: params.get('page') ? params.get('page') : 1,
-                            paramsX: new URLSearchParams((new URL(window.location.href)).search),
-                            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>
-                </a>
-                <div class="flex gap-2 mx-4">
-                    {% with ''|center:events_paginator.num_pages as range %}
-                        {% for _ in range %}
-                            {% if forloop.counter == 1 or forloop.counter == events_paginator.num_pages or forloop.counter == current_page or forloop.counter|add:1 == current_page or forloop.counter|add:'-1' == current_page %}
-                                <a :href="getPageLink(parseInt({{forloop.counter}}))">
-                                    <p class="px-2 font-bold" :class="page == {{forloop.counter}} ? 'bg-hot-red text-white' : 'bg-hot-off-white'">
-                                        {{forloop.counter}}
-                                    </p>
-                                </a>
-                            {% 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>
-                <a :href="page < {{events_paginator.num_pages}} ? getPageLink(parseInt(page) + 1) : ''" aria-label="Next Page">
-                    <p class="cursor-pointer" :class="page == {{events_paginator.num_pages}} ? 'text-hot-slate-grey' : 'text-hot-red'">
-                        {% include "ui/components/icon_svgs/LinkCaret.html" %}
-                    </p>
-                </a>
-            </div>
+            {% include "ui/components/utilities/PaginatorNavigation.html" with paginator=events_paginator current_page=current_page %}
         </div>
     </div>
 {% endblock %}
diff --git a/app/members/migrations/0003_rename_introduction_individualmemberpage_intro.py b/app/members/migrations/0003_rename_introduction_individualmemberpage_intro.py
new file mode 100644
index 0000000..3dc041a
--- /dev/null
+++ b/app/members/migrations/0003_rename_introduction_individualmemberpage_intro.py
@@ -0,0 +1,18 @@
+# Generated by Django 4.2.7 on 2024-07-08 23:24
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('members', '0002_remove_individualmemberpage_location_and_more'),
+    ]
+
+    operations = [
+        migrations.RenameField(
+            model_name='individualmemberpage',
+            old_name='introduction',
+            new_name='intro',
+        ),
+    ]
diff --git a/app/members/models.py b/app/members/models.py
index 00e53fe..58047ab 100644
--- a/app/members/models.py
+++ b/app/members/models.py
@@ -6,6 +6,7 @@
 from django.db.models import Q
 from app.projects.models import IndividualProjectPage
 from app.news.models import IndividualNewsPage
+from wagtail.search import index
 
 class WebLinkStructBlock(StructBlock):
     link_text = CharBlock(required=True)
@@ -70,13 +71,20 @@ def get_context(self, request, *args, **kwargs):
         on_delete=models.SET_NULL,
         related_name='+'
     )
-    introduction = RichTextField()
+    intro = RichTextField()
     on_the_web_links = StreamField(WebLinkBlock(), blank=True, use_json_field=True)
 
+    
+    search_fields = Page.search_fields + [
+        index.SearchField('title'),
+        index.SearchField('search_description'),
+        index.SearchField('intro'),
+    ]
+
     content_panels = Page.content_panels + [
         FieldPanel('image'),
         FieldPanel('position'),
         FieldPanel('location_hub'),
-        FieldPanel('introduction'),
+        FieldPanel('intro'),
         FieldPanel('on_the_web_links'),
     ]
diff --git a/app/news/models.py b/app/news/models.py
index 1152c85..4b65d47 100644
--- a/app/news/models.py
+++ b/app/news/models.py
@@ -186,6 +186,7 @@ class IndividualNewsPage(Page):
         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'),
     ]
 
     content_panels = Page.content_panels + [
diff --git a/app/news/templates/news/news_owner_page.html b/app/news/templates/news/news_owner_page.html
index 13ac88f..e1e4d9d 100644
--- a/app/news/templates/news/news_owner_page.html
+++ b/app/news/templates/news/news_owner_page.html
@@ -96,53 +96,14 @@ <h1 class="text-h1 font-semibold my-10">{{page.title}}</h1>
 
             {% 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">
+            <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>
 
             {% comment %} PAGE NAVIGATION {% endcomment %}
-            <div class="w-full flex justify-center items-center" 
-                 x-data="{
-                            page: params.get('page') ? params.get('page') : 1,
-                            paramsX: new URLSearchParams((new URL(window.location.href)).search),
-                            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>
-                </a>
-                <div class="flex gap-2 mx-4">
-                    {% with ''|center:news_paginator.num_pages as range %}
-                        {% for _ in range %}
-                            {% if forloop.counter == 1 or forloop.counter == news_paginator.num_pages or forloop.counter == current_page or forloop.counter|add:1 == current_page or forloop.counter|add:'-1' == current_page %}
-                                <a :href="getPageLink(parseInt({{forloop.counter}}))">
-                                    <p class="px-2 font-bold" :class="page == {{forloop.counter}} ? 'bg-hot-red text-white' : 'bg-hot-off-white'">
-                                        {{forloop.counter}}
-                                    </p>
-                                </a>
-                            {% 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>
-                <a :href="page < {{news_paginator.num_pages}} ? getPageLink(parseInt(page) + 1) : ''" aria-label="Next Page">
-                    <p class="cursor-pointer" :class="page == {{news_paginator.num_pages}} ? 'text-hot-slate-grey' : 'text-hot-red'">
-                        {% include "ui/components/icon_svgs/LinkCaret.html" %}
-                    </p>
-                </a>
-            </div>
+            {% include "ui/components/utilities/PaginatorNavigation.html" with paginator=news_paginator current_page=current_page %}
         </div>
     </div>
 {% endblock %}
diff --git a/app/programs/models.py b/app/programs/models.py
index a8f252c..701c7f5 100644
--- a/app/programs/models.py
+++ b/app/programs/models.py
@@ -8,6 +8,7 @@
 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
 
@@ -122,6 +123,12 @@ def get_context(self, request):
         ('program_page', PageChooserBlock(page_type="programs.IndividualProgramPage"))
     ], use_json_field=True, null=True, blank=True)
 
+    search_fields = Page.search_fields + [
+        index.SearchField('title'),
+        index.SearchField('search_description'),
+        index.SearchField('intro'),
+    ]
+
     content_panels = Page.content_panels + [
         MultiFieldPanel([
             FieldPanel("subtitle"),
diff --git a/app/projects/migrations/0026_remove_individualprojectpage_intro.py b/app/projects/migrations/0026_remove_individualprojectpage_intro.py
new file mode 100644
index 0000000..3b3452b
--- /dev/null
+++ b/app/projects/migrations/0026_remove_individualprojectpage_intro.py
@@ -0,0 +1,17 @@
+# Generated by Django 4.2.7 on 2024-07-08 21:32
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('projects', '0025_projectownerpage_header_image'),
+    ]
+
+    operations = [
+        migrations.RemoveField(
+            model_name='individualprojectpage',
+            name='intro',
+        ),
+    ]
diff --git a/app/projects/migrations/0027_individualprojectpage_intro.py b/app/projects/migrations/0027_individualprojectpage_intro.py
new file mode 100644
index 0000000..aa40dcd
--- /dev/null
+++ b/app/projects/migrations/0027_individualprojectpage_intro.py
@@ -0,0 +1,19 @@
+# Generated by Django 4.2.7 on 2024-07-08 21:32
+
+from django.db import migrations
+import wagtail.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('projects', '0026_remove_individualprojectpage_intro'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='individualprojectpage',
+            name='intro',
+            field=wagtail.fields.RichTextField(blank=True),
+        ),
+    ]
diff --git a/app/projects/models.py b/app/projects/models.py
index a4f6209..8ab849b 100644
--- a/app/projects/models.py
+++ b/app/projects/models.py
@@ -7,7 +7,9 @@
 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.search import index
 from modelcluster.fields import ParentalKey, ParentalManyToManyField
+from app.core.models import HotSearchablePage
 
 
 """
@@ -167,6 +169,12 @@ class IndividualProjectPage(Page):
 
     project_contributors = StreamField([('contributor', PageChooserBlock(page_type="members.IndividualMemberPage"))], use_json_field=True, null=True, blank=True)
 
+    search_fields = Page.search_fields + [
+        index.SearchField('title'),
+        index.SearchField('search_description'),
+        index.SearchField('intro'),
+    ]
+
     content_panels = Page.content_panels + [
         MultiFieldPanel([
             PageChooserPanel('owner_program', 'programs.IndividualProgramPage'),
diff --git a/app/search_page/__init__.py b/app/search_page/__init__.py
new file mode 100644
index 0000000..e69de29
diff --git a/app/search_page/admin.py b/app/search_page/admin.py
new file mode 100644
index 0000000..8c38f3f
--- /dev/null
+++ b/app/search_page/admin.py
@@ -0,0 +1,3 @@
+from django.contrib import admin
+
+# Register your models here.
diff --git a/app/search_page/apps.py b/app/search_page/apps.py
new file mode 100644
index 0000000..6d87f0a
--- /dev/null
+++ b/app/search_page/apps.py
@@ -0,0 +1,6 @@
+from django.apps import AppConfig
+
+
+class SearchPageConfig(AppConfig):
+    default_auto_field = 'django.db.models.BigAutoField'
+    name = 'app.search_page'
diff --git a/app/search_page/migrations/0001_initial.py b/app/search_page/migrations/0001_initial.py
new file mode 100644
index 0000000..3089437
--- /dev/null
+++ b/app/search_page/migrations/0001_initial.py
@@ -0,0 +1,26 @@
+# Generated by Django 4.2.7 on 2024-07-08 19:38
+
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    initial = True
+
+    dependencies = [
+        ('wagtailcore', '0089_log_entry_data_json_null_to_object'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='SearchPage',
+            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/search_page/migrations/0002_searchpage_search_text_midfix_and_more.py b/app/search_page/migrations/0002_searchpage_search_text_midfix_and_more.py
new file mode 100644
index 0000000..e60451b
--- /dev/null
+++ b/app/search_page/migrations/0002_searchpage_search_text_midfix_and_more.py
@@ -0,0 +1,28 @@
+# Generated by Django 4.2.7 on 2024-07-08 20:02
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('search_page', '0001_initial'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='searchpage',
+            name='search_text_midfix',
+            field=models.CharField(default='returns'),
+        ),
+        migrations.AddField(
+            model_name='searchpage',
+            name='search_text_postfix',
+            field=models.CharField(default='results'),
+        ),
+        migrations.AddField(
+            model_name='searchpage',
+            name='search_text_prefix',
+            field=models.CharField(default='Your search for'),
+        ),
+    ]
diff --git a/app/search_page/migrations/0003_searchpage_no_results_text.py b/app/search_page/migrations/0003_searchpage_no_results_text.py
new file mode 100644
index 0000000..5885853
--- /dev/null
+++ b/app/search_page/migrations/0003_searchpage_no_results_text.py
@@ -0,0 +1,18 @@
+# Generated by Django 4.2.7 on 2024-07-08 23:23
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('search_page', '0002_searchpage_search_text_midfix_and_more'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='searchpage',
+            name='no_results_text',
+            field=models.CharField(default='No matching search results for', help_text='This field is a prefix to the current search result in the event no results are found; i.e., if the search keyword was \'Hello\' and this field is \'No matching result for\', the no-result page would show "No matching result for "Hello""'),
+        ),
+    ]
diff --git a/app/search_page/migrations/0004_searchpage_no_results_go_back.py b/app/search_page/migrations/0004_searchpage_no_results_go_back.py
new file mode 100644
index 0000000..82a570c
--- /dev/null
+++ b/app/search_page/migrations/0004_searchpage_no_results_go_back.py
@@ -0,0 +1,18 @@
+# Generated by Django 4.2.7 on 2024-07-08 23:34
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('search_page', '0003_searchpage_no_results_text'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='searchpage',
+            name='no_results_go_back',
+            field=models.CharField(default='Go Back'),
+        ),
+    ]
diff --git a/app/search_page/migrations/__init__.py b/app/search_page/migrations/__init__.py
new file mode 100644
index 0000000..e69de29
diff --git a/app/search_page/models.py b/app/search_page/models.py
new file mode 100644
index 0000000..e9ecbbb
--- /dev/null
+++ b/app/search_page/models.py
@@ -0,0 +1,58 @@
+from django.db import models
+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
+from wagtail.admin.panels import FieldPanel, MultiFieldPanel, PageChooserPanel
+from wagtail.blocks import CharBlock, StreamBlock, StructBlock, URLBlock, RichTextBlock, PageChooserBlock
+from modelcluster.fields import ParentalKey, ParentalManyToManyField
+
+
+class SearchPage(Page):
+    def get_context(self, request, *args, **kwargs):
+        context = super().get_context(request, *args, **kwargs)
+
+        keyword = request.GET.get('keyword', '')
+        results_list = Page.objects.live().filter(locale=context['page'].locale)
+        
+        if keyword:
+            results_list = results_list.search(keyword).get_queryset()
+        
+        results_list = results_list.exclude(id__in=[1, 2])
+
+        page = request.GET.get('page', 1)
+        paginator = Paginator(results_list, 6)  # if you want more/less items per page (i.e., per load), change the number here to something else
+        try:
+            results = paginator.page(page)
+        except PageNotAnInteger:
+            results = paginator.page(1)
+        except EmptyPage:
+            results = paginator.page(paginator.num_pages)
+        
+        context['results'] = results
+        context['results_paginator'] = paginator
+        context['current_page'] = int(page)
+        context['keyword'] = keyword
+        return context
+    
+    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
+
+    search_text_prefix = models.CharField(default="Your search for")
+    search_text_midfix = models.CharField(default="returns")
+    search_text_postfix = models.CharField(default="results")
+
+    no_results_text = models.CharField(default="No matching search results for", help_text="This field is a prefix to the current search result in the event no results are found; i.e., if the search keyword was 'Hello' and this field is 'No matching result for', the no-result page would show \"No matching result for \"Hello\"\"")
+    no_results_go_back = models.CharField(default="Go Back")
+
+    content_panels = Page.content_panels + [
+        MultiFieldPanel([
+            FieldPanel("search_text_prefix"),
+            FieldPanel("search_text_midfix"),
+            FieldPanel("search_text_postfix"),
+        ], heading="Search Result Text", help_text="These combine to make the search result text; i.e., if prefix is 'Your search for', midfix is 'returns', and postfix is 'results', the search result text will be \"Your search for \"example\" returns \"x\" results\""),
+        FieldPanel('no_results_text'),
+        FieldPanel('no_results_go_back'),
+    ]
diff --git a/app/search_page/templates/search_page/search_page.html b/app/search_page/templates/search_page/search_page.html
new file mode 100644
index 0000000..508ed0e
--- /dev/null
+++ b/app/search_page/templates/search_page/search_page.html
@@ -0,0 +1,60 @@
+{% extends "base.html" %}
+{% load static wagtailcore_tags %}
+{% block body_class %}
+    template-searchpage
+{% endblock body_class %}
+{% block content %}
+    <div class="max-w-7xl mx-auto my-10">
+        <div class="px-6 md:px-10">
+            <div class="flex flex-col lg:flex-row justify-between mb-10 gap-8">
+                <h1 class="font-bold text-h5">
+                    {% if results %}
+                        {{page.search_text_prefix}} <span class="text-hot-red">"{{keyword}}"</span> {{page.search_text_midfix}} {{results_paginator.count}} {{page.search_text_postfix}}
+                        {% else %}
+                        {{page.no_results_text}} <span class="text-hot-red">"{{keyword}}"</span>
+                    {% endif %}
+                </h1>
+                <div class="bg-hot-off-white [&_button]:order-2 [&_svg]:text-hot-red lg:w-96 max-w-[24rem]">
+                    {% include "ui/components/navigation/SearchForm.html" %}
+                </div>
+            </div>
+            {% if results %}
+                <div class="grid gap-8 max-w-3xl my-10">
+                    {% for result in results %}
+                        <div class="grid gap-2">
+                            <h2 class="text-h4 font-semibold">{{result.title}}</h2>
+                            {% if result.get_ancestors|length > 2 %}
+                                <p>
+                                    {% for ancestor in result.get_ancestors|slice:"2:" %}
+                                        <a href="{{ancestor.url}}" class="text-hot-red font-medium">{{ancestor.title}}</a>
+                                        {% if not forloop.last %} &gt; {% endif %}
+                                    {% endfor %}
+                                </p>
+                            {% endif %}
+                            
+                            {% if result.specific.intro %}
+                                <div>
+                                    {{result.specific.intro|safe}}
+                                </div>
+                                {% else %}
+                                {% if result.search_description %}
+                                    <p>{{result.search_description}}</p>
+                                {% endif %}
+                            {% endif %}
+                            
+                            <p>
+                                <a class="text-hot-red font-medium" href="{{result.url}}">{{result.full_url}}</a>
+                            </p>
+                        </div>
+                    {% endfor %}
+                </div>
+                {% include "ui/components/utilities/PaginatorNavigation.html" with paginator=results_paginator current_page=current_page %}
+                
+                {% else %}
+                <p class="text-intro mb-20">
+                    {% include "ui/components/BaseLink.html" with linktext=page.no_results_go_back linkurl="javascript:history.back()" %}
+                </p>
+            {% endif %}
+        </div>
+    </div>
+{% endblock content %}
diff --git a/app/search_page/tests.py b/app/search_page/tests.py
new file mode 100644
index 0000000..7ce503c
--- /dev/null
+++ b/app/search_page/tests.py
@@ -0,0 +1,3 @@
+from django.test import TestCase
+
+# Create your tests here.
diff --git a/app/search_page/views.py b/app/search_page/views.py
new file mode 100644
index 0000000..91ea44a
--- /dev/null
+++ b/app/search_page/views.py
@@ -0,0 +1,3 @@
+from django.shortcuts import render
+
+# Create your views here.
diff --git a/app/ui/templates/ui/components/icon_svgs/SearchIcon.html b/app/ui/templates/ui/components/icon_svgs/SearchIcon.html
index 1f594b4..fa049a1 100644
--- a/app/ui/templates/ui/components/icon_svgs/SearchIcon.html
+++ b/app/ui/templates/ui/components/icon_svgs/SearchIcon.html
@@ -1,3 +1,3 @@
 <svg class="inline {{class}}" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 13.99 13.993">
-  <path id="Icon_ionic-ios-search" data-name="Icon ionic-ios-search" d="M18.326,17.474l-3.891-3.927a5.545,5.545,0,1,0-.842.853l3.865,3.9a.6.6,0,0,0,.845.022A.6.6,0,0,0,18.326,17.474Zm-8.248-3.027a4.378,4.378,0,1,1,3.1-1.282A4.351,4.351,0,0,1,10.078,14.446Z" transform="translate(-4.5 -4.493)" fill="#d43f3f"/>
+  <path id="Icon_ionic-ios-search" data-name="Icon ionic-ios-search" d="M18.326,17.474l-3.891-3.927a5.545,5.545,0,1,0-.842.853l3.865,3.9a.6.6,0,0,0,.845.022A.6.6,0,0,0,18.326,17.474Zm-8.248-3.027a4.378,4.378,0,1,1,3.1-1.282A4.351,4.351,0,0,1,10.078,14.446Z" transform="translate(-4.5 -4.493)" fill="currentColor"/>
 </svg>
diff --git a/app/ui/templates/ui/components/navigation/HeaderNavbar.html b/app/ui/templates/ui/components/navigation/HeaderNavbar.html
index 3bfe9fc..1345f36 100644
--- a/app/ui/templates/ui/components/navigation/HeaderNavbar.html
+++ b/app/ui/templates/ui/components/navigation/HeaderNavbar.html
@@ -50,6 +50,7 @@
     
     {% comment %} MOBILE EXPANDED LIST {% endcomment %}
     <ul class="text-black lg:hidden p-4" x-show="expanded" :class="{ 'pt-20 text-white': 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 %}
diff --git a/app/ui/templates/ui/components/navigation/SearchForm.html b/app/ui/templates/ui/components/navigation/SearchForm.html
new file mode 100644
index 0000000..7cdf10d
--- /dev/null
+++ b/app/ui/templates/ui/components/navigation/SearchForm.html
@@ -0,0 +1,16 @@
+<form class="w-full flex items-center" action="/search">
+    <button class="px-4 py-2" aria-label="Search form submit button">
+        {% include "ui/components/icon_svgs/SearchIcon.html" with class="text-gray-400" %}
+    </button>
+    <input type="text"
+            id="keyword"
+            name="keyword"
+            class="w-full border-0 bg-transparent text-gray-900 placeholder:text-gray-400 focus:ring-0"
+            {% if has_ref %}
+                x-ref="searchforminput"
+            {% endif %}
+            placeholder="Search"
+            role="combobox"
+            aria-expanded="false"
+            aria-controls="options">
+</form>
\ 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
new file mode 100644
index 0000000..5e4b952
--- /dev/null
+++ b/app/ui/templates/ui/components/navigation/SearchModal.html
@@ -0,0 +1,16 @@
+<div x-show="isSearchClicked"
+     @shown="$refs.searchforminput.focus(); console.log('hi')"
+     class="absolute top-0 left-0 z-[100] w-screen h-screen"
+     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>
+    </div>
+</div>
diff --git a/app/ui/templates/ui/components/utilities/PaginatorNavigation.html b/app/ui/templates/ui/components/utilities/PaginatorNavigation.html
new file mode 100644
index 0000000..e2ed781
--- /dev/null
+++ b/app/ui/templates/ui/components/utilities/PaginatorNavigation.html
@@ -0,0 +1,47 @@
+{% 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) }">
+    <div class="w-full flex justify-center items-center" 
+            x-data="{
+                    page: params.get('page') ? params.get('page') : 1,
+                    paramsX: new URLSearchParams((new URL(window.location.href)).search),
+                    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>
+        </a>
+        <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 %}
+                        <a :href="getPageLink(parseInt({{forloop.counter}}))">
+                            <p class="px-2 font-bold" :class="page == {{forloop.counter}} ? 'bg-hot-red text-white' : 'bg-hot-off-white'">
+                                {{forloop.counter}}
+                            </p>
+                        </a>
+                    {% 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>
+        <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>
+        </a>
+    </div>
+</div>
diff --git a/hot_osm/settings/base.py b/hot_osm/settings/base.py
index b53f485..725d67c 100644
--- a/hot_osm/settings/base.py
+++ b/hot_osm/settings/base.py
@@ -47,6 +47,7 @@
     "app.who_we_are",
     "app.get_involved",
     "app.tools_and_resources",
+    "app.search_page",
     "search",
     "users",
     "utils",
diff --git a/hot_osm/templates/base.html b/hot_osm/templates/base.html
index 96a4c26..790dad1 100644
--- a/hot_osm/templates/base.html
+++ b/hot_osm/templates/base.html
@@ -49,6 +49,7 @@
             {% include "components/nav/secondary_desktop_nav.html" %}
             <div class="relative">
                 {% comment %} {% include "components/header/header.html" %} {% endcomment %}
+                {% include "ui/components/navigation/SearchModal.html" %}
                 {% include "ui/components/navigation/HeaderNavbar.html" %}
                 {% block content %}
                 {% endblock content %}
diff --git a/hot_osm/templates/components/nav/secondary_desktop_nav.html b/hot_osm/templates/components/nav/secondary_desktop_nav.html
index f61c929..916387b 100644
--- a/hot_osm/templates/components/nav/secondary_desktop_nav.html
+++ b/hot_osm/templates/components/nav/secondary_desktop_nav.html
@@ -1,6 +1,6 @@
 {% load i18n %}
-<div class="hidden lg:block border-b border-hot-light">
-    <nav class="flex h-12 mx-auto max-w-7xl px-4 justify-between items-center">
+<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 -->
         {% include "../branded_elements/social_icons.html" %}
         <!-- Search, Language, News, Contact Us -->
@@ -10,10 +10,11 @@
             {% comment %} Strings for Translations {% endcomment %}
             {% translate "News" as news %}
             {% translate "Contact Us" as contact_us %}
-            <li>{% include "../search/search_icon.html" %}</li>
-            <li>{% include "language_switcher.html" %}</li>
-            <li>{% include "../branded_elements/link.html" with link="#" text=news %}</li>
-            <li>{% include "../branded_elements/link.html" with link="#" text=contact_us %}</li>
+            <li class="hidden lg:block">{% include "../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">{% include "language_switcher.html" %}</li>
+            <li class="hidden lg:block">{% include "../branded_elements/link.html" with link="#" text=news %}</li>
+            <li class="hidden lg:block">{% include "../branded_elements/link.html" with link="#" text=contact_us %}</li>
         </ul>
     </nav>
 </div>

From 2e39194e7521bebffad42aa27c366a71dc573d1a Mon Sep 17 00:00:00 2001
From: luminaryFlowers <71102109+luminaryFlowers@users.noreply.github.com>
Date: Tue, 9 Jul 2024 11:43:50 -0700
Subject: [PATCH 09/10] catching up on component documentation

---
 .../templates/ui/components/BasePageHeader.html | 12 +++++++-----
 .../ui/components/CTABodyPanelBase.html         |  7 +++++++
 .../ui/components/FlexTitleWithLink.html        |  8 ++++++++
 .../ui/components/PageHeaderWithBlur.html       |  1 +
 .../components/SectionHeadingWithUnderline.html |  5 +++++
 .../ui/components/ThreeElementCarousel.html     | 10 ++++++++++
 .../ui/components/TitleWithUnderline.html       |  4 ++++
 .../dogear_boxes/DogearAnyColourLong.html       |  1 +
 .../events/EventPreviewBlockEvent.html          |  4 ++++
 .../ui/components/icon_svgs/RefreshIcon.html    |  4 ++++
 .../ui/components/icon_svgs/SearchIcon.html     |  4 ++++
 .../impact_areas/ImpactAreaPreviewBlock.html    |  4 ++++
 .../mapping_hub/MappingHubPreviewBlock.html     |  1 -
 .../mapping_hub/MappingHubPreviewBlockBase.html |  1 -
 .../MappingHubPreviewExtendedBlock.html         |  4 ++++
 .../misc_panels/LinkBlockWithImage.html         |  7 +++++++
 .../misc_panels/PagePreviewBasic.html           |  5 +++++
 .../PagePreviewWithTabletDescription.html       |  7 +++++++
 .../components/navigation/FooterNavigation.html |  3 +++
 .../ui/components/navigation/HeaderNavbar.html  |  3 +++
 .../navigation/HeaderNavbarButton.html          |  4 ++++
 .../components/navigation/HeaderNavbarItem.html |  5 +++++
 .../ui/components/navigation/SearchForm.html    |  5 +++++
 .../ui/components/navigation/SearchModal.html   |  3 +++
 .../news/NewsPreviewBlockProjects.html          |  2 +-
 .../ui/components/news/NewsPreviewCarousel.html |  5 +++++
 .../components/partners/PartnerViewBlock.html   |  3 ---
 .../programs/ProgramCarouselBlock.html          |  4 ++++
 .../projects/ProjectPreviewBlockMapHub.html     |  2 +-
 .../projects/ProjectPreviewBlockNews.html       |  2 +-
 .../projects/ProjectPreviewCarousel.html        |  5 +++++
 .../sections/BaseSectionWithImage.html          | 17 +++++++++++++++++
 .../sections/GreyBackgroundWithImage.html       | 16 ++++++++++++++++
 .../ui/components/sections/LinkListSection.html |  8 +++++++-
 .../sections/NavyBackgroundWithImage.html       | 16 ++++++++++++++++
 .../ui/components/sharers/ShareSection.html     |  5 +++++
 36 files changed, 183 insertions(+), 14 deletions(-)

diff --git a/app/ui/templates/ui/components/BasePageHeader.html b/app/ui/templates/ui/components/BasePageHeader.html
index b536ebf..cce8bb9 100644
--- a/app/ui/templates/ui/components/BasePageHeader.html
+++ b/app/ui/templates/ui/components/BasePageHeader.html
@@ -2,9 +2,11 @@
 ==> PARAMETERS
 - title: A string, the title shown in the header
 - intro: An HTML element (regular usage would be a <p> with some text in it)
+- subtitle: An HTML element
 - image: A Wagtail image
-{% endcomment %}
 
+Only one of either intro or subtitle should be present; you probably would not want both.
+{% endcomment %}
 {% load wagtailimages_tags %}
 
 {% image image original as image_p %}
@@ -23,11 +25,11 @@ <h1 class="text-h1 font-bold lg:font-semibold text-wrap">
                     </div>
                 {% endif %}
             </div>
-            <div class="px-10">
-                {% if subtitle %}
+            {% if subtitle %}
+                <div class="px-10">
                     {{ subtitle|safe }}
-                {% endif %}
-            </div>
+                </div>
+            {% endif %}
         </div>
     </div>
 </div>
\ No newline at end of file
diff --git a/app/ui/templates/ui/components/CTABodyPanelBase.html b/app/ui/templates/ui/components/CTABodyPanelBase.html
index 7136626..7d6e8df 100644
--- a/app/ui/templates/ui/components/CTABodyPanelBase.html
+++ b/app/ui/templates/ui/components/CTABodyPanelBase.html
@@ -1,3 +1,10 @@
+{% comment %}
+==> PARAMETERS
+- title: string; the title for the panel
+- text: html element; the description for the panel
+- linktext: string; the text shown for the link
+- linkurl: string; the url for the link
+{% endcomment %}
 <div class="bg-hot-off-white p-10">
     <h1 class="text-h2 font-bold">
         {{ title }}
diff --git a/app/ui/templates/ui/components/FlexTitleWithLink.html b/app/ui/templates/ui/components/FlexTitleWithLink.html
index 0f23d2a..ecf2dc6 100644
--- a/app/ui/templates/ui/components/FlexTitleWithLink.html
+++ b/app/ui/templates/ui/components/FlexTitleWithLink.html
@@ -1,3 +1,11 @@
+{% comment %}
+==> PARAMETERS
+- title: string; the title
+- class: string; the classes for the containing div
+- titleclass: string; the classes for the title specifically. If no class is provided, the title will be h3 title size
+- linktext: string; the text to be shown for the link
+- linkurl: string; the url for the link
+{% endcomment %}
 <div class="md:flex md:justify-between gap-4 md:items-center {{class}}">
     <h1 class="{%if titleclass%}{{titleclass}}{%else%}text-h3{%endif%} font-bold">
         {{title}}
diff --git a/app/ui/templates/ui/components/PageHeaderWithBlur.html b/app/ui/templates/ui/components/PageHeaderWithBlur.html
index 3aa41e6..e67f2ed 100644
--- a/app/ui/templates/ui/components/PageHeaderWithBlur.html
+++ b/app/ui/templates/ui/components/PageHeaderWithBlur.html
@@ -3,6 +3,7 @@
 - title: A string, the title shown in the header
 - subtitle: An HTML element (regular usage would be a <p> with some text in it)
 - image: A Wagtail image
+- full_length: If falsey/null, the content will not be entirely full length in the header; otherwise, it will be full length
 {% endcomment %}
 
 {% load wagtailimages_tags %}
diff --git a/app/ui/templates/ui/components/SectionHeadingWithUnderline.html b/app/ui/templates/ui/components/SectionHeadingWithUnderline.html
index a1b5a00..cd31bca 100644
--- a/app/ui/templates/ui/components/SectionHeadingWithUnderline.html
+++ b/app/ui/templates/ui/components/SectionHeadingWithUnderline.html
@@ -1,3 +1,8 @@
+{% comment %}
+==> PARAMETERS
+- title: string; the title
+{% endcomment %}
+
 <h1 class="text-h2 font-bold">
     {{ title }}
 </h1>
diff --git a/app/ui/templates/ui/components/ThreeElementCarousel.html b/app/ui/templates/ui/components/ThreeElementCarousel.html
index 0e3fed9..00ff572 100644
--- a/app/ui/templates/ui/components/ThreeElementCarousel.html
+++ b/app/ui/templates/ui/components/ThreeElementCarousel.html
@@ -1,3 +1,13 @@
+{% comment %}
+==> PARAMETERS
+- carousel: list of blocks; each block should have a .value, which should have:
+    - .header: string
+    - .body: string
+    - .action_button.text: string
+    - .action_button.link: string
+
+If you'd like, refer to app.ui.models to see the specifics of what makes up a carousel block.
+{% endcomment %}
 <div x-data="{ slide: 0, slides: [] }"
     x-init="slides = [...$el.children];"
     class="w-full lg:w-[30rem] flex flex-col lg:flex-row justify-center">
diff --git a/app/ui/templates/ui/components/TitleWithUnderline.html b/app/ui/templates/ui/components/TitleWithUnderline.html
index 065f351..af7adc9 100644
--- a/app/ui/templates/ui/components/TitleWithUnderline.html
+++ b/app/ui/templates/ui/components/TitleWithUnderline.html
@@ -1,3 +1,7 @@
+{% comment %}
+==> PARAMETERS
+- title: string; the title
+{% endcomment %}
 <h1 class="text-h2 font-bold">
     {{title}}
 </h1>
diff --git a/app/ui/templates/ui/components/dogear_boxes/DogearAnyColourLong.html b/app/ui/templates/ui/components/dogear_boxes/DogearAnyColourLong.html
index de6d026..b1f5fdd 100644
--- a/app/ui/templates/ui/components/dogear_boxes/DogearAnyColourLong.html
+++ b/app/ui/templates/ui/components/dogear_boxes/DogearAnyColourLong.html
@@ -4,6 +4,7 @@
 - linkurl: a string; the link's url
 - linktext: a string; the text that shows for the link
 - colour: a string; the colour that the box should be (can be hex code or any other CSS compatible colour thing)
+- 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%}">
diff --git a/app/ui/templates/ui/components/events/EventPreviewBlockEvent.html b/app/ui/templates/ui/components/events/EventPreviewBlockEvent.html
index 433fe8c..31f2099 100644
--- a/app/ui/templates/ui/components/events/EventPreviewBlockEvent.html
+++ b/app/ui/templates/ui/components/events/EventPreviewBlockEvent.html
@@ -1,3 +1,7 @@
+{% comment %}
+==> PARAMETERS
+- event: an IndividualEventPage object; should be passed directly here
+{% endcomment %}
 {% load wagtailimages_tags %}
 
 {% image event.image original as image_p %}
diff --git a/app/ui/templates/ui/components/icon_svgs/RefreshIcon.html b/app/ui/templates/ui/components/icon_svgs/RefreshIcon.html
index 404ea7b..d3b9f21 100644
--- a/app/ui/templates/ui/components/icon_svgs/RefreshIcon.html
+++ b/app/ui/templates/ui/components/icon_svgs/RefreshIcon.html
@@ -1,3 +1,7 @@
+{% comment %}
+==> PARAMETERS
+- class: string; the classes you want for this icon
+{% endcomment %}
 <svg class="inline {{class}}" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20.75 20.75">
   <path id="Icon_ionic-md-refresh" data-name="Icon ionic-md-refresh" d="M16,23.781A7.781,7.781,0,0,1,16,8.219a7.538,7.538,0,0,1,5.447,2.334L17.3,14.7h9.078V5.625L23.327,8.673A10.362,10.362,0,1,0,25.986,18.83H23.242A7.727,7.727,0,0,1,16,23.781Z" transform="translate(-5.625 -5.625)" fill="#d43f3f"/>
 </svg>
\ No newline at end of file
diff --git a/app/ui/templates/ui/components/icon_svgs/SearchIcon.html b/app/ui/templates/ui/components/icon_svgs/SearchIcon.html
index fa049a1..27f916a 100644
--- a/app/ui/templates/ui/components/icon_svgs/SearchIcon.html
+++ b/app/ui/templates/ui/components/icon_svgs/SearchIcon.html
@@ -1,3 +1,7 @@
+{% comment %}
+==> PARAMETERS
+- class: string; the classes you want for this icon
+{% endcomment %}
 <svg class="inline {{class}}" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 13.99 13.993">
   <path id="Icon_ionic-ios-search" data-name="Icon ionic-ios-search" d="M18.326,17.474l-3.891-3.927a5.545,5.545,0,1,0-.842.853l3.865,3.9a.6.6,0,0,0,.845.022A.6.6,0,0,0,18.326,17.474Zm-8.248-3.027a4.378,4.378,0,1,1,3.1-1.282A4.351,4.351,0,0,1,10.078,14.446Z" transform="translate(-4.5 -4.493)" fill="currentColor"/>
 </svg>
diff --git a/app/ui/templates/ui/components/impact_areas/ImpactAreaPreviewBlock.html b/app/ui/templates/ui/components/impact_areas/ImpactAreaPreviewBlock.html
index c96d3d8..67edbec 100644
--- a/app/ui/templates/ui/components/impact_areas/ImpactAreaPreviewBlock.html
+++ b/app/ui/templates/ui/components/impact_areas/ImpactAreaPreviewBlock.html
@@ -1,3 +1,7 @@
+{% comment %}
+==> PARAMETERS
+- ia: an IndividualImpactAreaPage; should be passed directly here
+{% endcomment %}
 {% load wagtailimages_tags %}
 
 {% image ia.header_image original as image_p %}
diff --git a/app/ui/templates/ui/components/mapping_hub/MappingHubPreviewBlock.html b/app/ui/templates/ui/components/mapping_hub/MappingHubPreviewBlock.html
index dba7278..affd498 100644
--- a/app/ui/templates/ui/components/mapping_hub/MappingHubPreviewBlock.html
+++ b/app/ui/templates/ui/components/mapping_hub/MappingHubPreviewBlock.html
@@ -2,7 +2,6 @@
 ==> PARAMETERS
 - hub: An IndividualMappingHubPage object; the mapping hub page to be previewed
 {% endcomment %}
-
 {% load wagtailimages_tags %}
 
 <a href="{{ hub.url }}">
diff --git a/app/ui/templates/ui/components/mapping_hub/MappingHubPreviewBlockBase.html b/app/ui/templates/ui/components/mapping_hub/MappingHubPreviewBlockBase.html
index 516b30b..a6c44fd 100644
--- a/app/ui/templates/ui/components/mapping_hub/MappingHubPreviewBlockBase.html
+++ b/app/ui/templates/ui/components/mapping_hub/MappingHubPreviewBlockBase.html
@@ -2,7 +2,6 @@
 ==> PARAMETERS
 - hub: An IndividualMappingHubPage object; the mapping hub page to be previewed
 {% endcomment %}
-
 {% load wagtailimages_tags %}
 
 <div>
diff --git a/app/ui/templates/ui/components/mapping_hub/MappingHubPreviewExtendedBlock.html b/app/ui/templates/ui/components/mapping_hub/MappingHubPreviewExtendedBlock.html
index a1e0451..851522d 100644
--- a/app/ui/templates/ui/components/mapping_hub/MappingHubPreviewExtendedBlock.html
+++ b/app/ui/templates/ui/components/mapping_hub/MappingHubPreviewExtendedBlock.html
@@ -1,3 +1,7 @@
+{% comment %}
+==> PARAMETERS
+- hub: An IndividualMappingHubPage object; the mapping hub page to be previewed
+{% endcomment %}
 {% load wagtailimages_tags %}
 
 <div>
diff --git a/app/ui/templates/ui/components/misc_panels/LinkBlockWithImage.html b/app/ui/templates/ui/components/misc_panels/LinkBlockWithImage.html
index a61d172..3eadf13 100644
--- a/app/ui/templates/ui/components/misc_panels/LinkBlockWithImage.html
+++ b/app/ui/templates/ui/components/misc_panels/LinkBlockWithImage.html
@@ -1,3 +1,10 @@
+{% comment %}
+==> PARAMETERS
+- title: string; the title
+- description: html element; the description of the block
+- linktext: string; the text to show for the link
+- linkurl: string; the desired url
+{% endcomment %}
 {% load wagtailimages_tags %}
 
 <div>
diff --git a/app/ui/templates/ui/components/misc_panels/PagePreviewBasic.html b/app/ui/templates/ui/components/misc_panels/PagePreviewBasic.html
index 2bebce6..3c6429a 100644
--- a/app/ui/templates/ui/components/misc_panels/PagePreviewBasic.html
+++ b/app/ui/templates/ui/components/misc_panels/PagePreviewBasic.html
@@ -1,3 +1,8 @@
+{% comment %}
+==> PARAMETERS
+- page: Page object; its link and title is used here
+- previmg: image object; the image for the preview
+{% endcomment %}
 {% load wagtailimages_tags %}
 
 {% image image original as previmg %}
diff --git a/app/ui/templates/ui/components/misc_panels/PagePreviewWithTabletDescription.html b/app/ui/templates/ui/components/misc_panels/PagePreviewWithTabletDescription.html
index 01f4a60..eb1db9d 100644
--- a/app/ui/templates/ui/components/misc_panels/PagePreviewWithTabletDescription.html
+++ b/app/ui/templates/ui/components/misc_panels/PagePreviewWithTabletDescription.html
@@ -1,3 +1,10 @@
+{% comment %}
+==> PARAMETERS
+- page: Page object; its link and title is used here
+- previmg: image object; the image for the preview
+- 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 wagtailimages_tags %}
 
 {% image image original as previmg %}
diff --git a/app/ui/templates/ui/components/navigation/FooterNavigation.html b/app/ui/templates/ui/components/navigation/FooterNavigation.html
index 38f5427..2aa3619 100644
--- a/app/ui/templates/ui/components/navigation/FooterNavigation.html
+++ b/app/ui/templates/ui/components/navigation/FooterNavigation.html
@@ -1,3 +1,6 @@
+{% comment %}
+No parameters; it grabs directly from the home page (for the correct locale).
+{% endcomment %}
 {% load homepage_tags %}
 {% get_home_page as home_page %}
 {% get_navigation as navigation %}
diff --git a/app/ui/templates/ui/components/navigation/HeaderNavbar.html b/app/ui/templates/ui/components/navigation/HeaderNavbar.html
index 1345f36..2a49392 100644
--- a/app/ui/templates/ui/components/navigation/HeaderNavbar.html
+++ b/app/ui/templates/ui/components/navigation/HeaderNavbar.html
@@ -1,3 +1,6 @@
+{% comment %}
+No parameters; it grabs directly from the home page (for the correct locale).
+{% endcomment %}
 {% load homepage_tags %}
 {% get_navigation as navigation %}
 {% get_home_page as home_page %}
diff --git a/app/ui/templates/ui/components/navigation/HeaderNavbarButton.html b/app/ui/templates/ui/components/navigation/HeaderNavbarButton.html
index 22f0dd0..39a73a2 100644
--- a/app/ui/templates/ui/components/navigation/HeaderNavbarButton.html
+++ b/app/ui/templates/ui/components/navigation/HeaderNavbarButton.html
@@ -1,3 +1,7 @@
+{% comment %}
+==> PARAMETERS
+- 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="">
diff --git a/app/ui/templates/ui/components/navigation/HeaderNavbarItem.html b/app/ui/templates/ui/components/navigation/HeaderNavbarItem.html
index 764ac4b..3a9d72d 100644
--- a/app/ui/templates/ui/components/navigation/HeaderNavbarItem.html
+++ b/app/ui/templates/ui/components/navigation/HeaderNavbarItem.html
@@ -1,3 +1,8 @@
+{% 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 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%}">
diff --git a/app/ui/templates/ui/components/navigation/SearchForm.html b/app/ui/templates/ui/components/navigation/SearchForm.html
index 7cdf10d..f10fa9a 100644
--- a/app/ui/templates/ui/components/navigation/SearchForm.html
+++ b/app/ui/templates/ui/components/navigation/SearchForm.html
@@ -1,3 +1,8 @@
+{% comment %}
+==> PARAMETERS
+- has_ref: optional; if Truthy, this will have an x-ref
+    - means that this form can be focused via alpinejs; if multiple have this ref it obviously won't work for all of them
+{% endcomment %}
 <form class="w-full flex items-center" action="/search">
     <button class="px-4 py-2" aria-label="Search form submit button">
         {% include "ui/components/icon_svgs/SearchIcon.html" with class="text-gray-400" %}
diff --git a/app/ui/templates/ui/components/navigation/SearchModal.html b/app/ui/templates/ui/components/navigation/SearchModal.html
index 5e4b952..17d224f 100644
--- a/app/ui/templates/ui/components/navigation/SearchModal.html
+++ b/app/ui/templates/ui/components/navigation/SearchModal.html
@@ -1,3 +1,6 @@
+{% comment %}
+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"
diff --git a/app/ui/templates/ui/components/news/NewsPreviewBlockProjects.html b/app/ui/templates/ui/components/news/NewsPreviewBlockProjects.html
index 6f8ed31..8a97511 100644
--- a/app/ui/templates/ui/components/news/NewsPreviewBlockProjects.html
+++ b/app/ui/templates/ui/components/news/NewsPreviewBlockProjects.html
@@ -1,8 +1,8 @@
 {% comment %}
 ==> PARAMETERS
 - news: an IndividualNewsPage object; the news page to be previewed
+- showimage: optional; if Truthy, the article's image will show up in the preview
 {% endcomment %}
-
 {% load wagtailimages_tags %}
 
 {% image news.image original as image_p %}
diff --git a/app/ui/templates/ui/components/news/NewsPreviewCarousel.html b/app/ui/templates/ui/components/news/NewsPreviewCarousel.html
index b1064f1..3bec76f 100644
--- a/app/ui/templates/ui/components/news/NewsPreviewCarousel.html
+++ b/app/ui/templates/ui/components/news/NewsPreviewCarousel.html
@@ -1,3 +1,8 @@
+{% comment %}
+==> PARAMETERS
+- news: list of IndividualNewsPages
+- title: string; an optional title for the section
+{% endcomment %}
 {% load wagtailimages_tags %}
 <div x-data="{ partnerIndex: 0, fixedIndex(x) {return ({{news|length}} + x + this.partnerIndex) % {{news|length}}}, moveIndex(x) {this.partnerIndex = this.fixedIndex(x)} }" 
      class="grid {{class}}">
diff --git a/app/ui/templates/ui/components/partners/PartnerViewBlock.html b/app/ui/templates/ui/components/partners/PartnerViewBlock.html
index ea655b6..a711017 100644
--- a/app/ui/templates/ui/components/partners/PartnerViewBlock.html
+++ b/app/ui/templates/ui/components/partners/PartnerViewBlock.html
@@ -3,9 +3,6 @@
 - partners: a list of partner snippets. 
             An example of how this should be accumulated can be found in the IndividualMappingHubPage.
             Alternatively, you can just do it like this: "ParentalManyToManyField('core.Partner', blank=True)"
-
-==> TODO:
-- make the system of assigning order smarter because it's kind of. unwieldy. as you can see
 {% endcomment %}
 
 {% load wagtailimages_tags %}
diff --git a/app/ui/templates/ui/components/programs/ProgramCarouselBlock.html b/app/ui/templates/ui/components/programs/ProgramCarouselBlock.html
index a9fca4d..1e29732 100644
--- a/app/ui/templates/ui/components/programs/ProgramCarouselBlock.html
+++ b/app/ui/templates/ui/components/programs/ProgramCarouselBlock.html
@@ -1,3 +1,7 @@
+{% comment %}
+==> PARAMETERS
+- programs: a list of IndividualProgramPages
+{% endcomment %}
 {% load wagtailimages_tags %}
 <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">
diff --git a/app/ui/templates/ui/components/projects/ProjectPreviewBlockMapHub.html b/app/ui/templates/ui/components/projects/ProjectPreviewBlockMapHub.html
index 6993601..a7c09bf 100644
--- a/app/ui/templates/ui/components/projects/ProjectPreviewBlockMapHub.html
+++ b/app/ui/templates/ui/components/projects/ProjectPreviewBlockMapHub.html
@@ -1,7 +1,7 @@
 {% comment %}
 ==> PARAMETERS
 - project: An IndividualProjectPage object; the project page to be previewed
-- showimage: a boolean; whether or not the image should be shown in the preview
+- showimage: optional; if truthy, the project's image will be shown in the preview
 {% endcomment %}
 
 {% load wagtailimages_tags %}
diff --git a/app/ui/templates/ui/components/projects/ProjectPreviewBlockNews.html b/app/ui/templates/ui/components/projects/ProjectPreviewBlockNews.html
index 1bb4cc9..b8b33f2 100644
--- a/app/ui/templates/ui/components/projects/ProjectPreviewBlockNews.html
+++ b/app/ui/templates/ui/components/projects/ProjectPreviewBlockNews.html
@@ -1,7 +1,7 @@
 {% comment %}
 ==> PARAMETERS
 - project: An IndividualProjectPage object; the project page to be previewed
-- showimage: a boolean; whether or not the image should be shown in the preview
+- showimage: optional; if truthy, the project's image will be shown in the preview
 {% endcomment %}
 
 {% load wagtailimages_tags %}
diff --git a/app/ui/templates/ui/components/projects/ProjectPreviewCarousel.html b/app/ui/templates/ui/components/projects/ProjectPreviewCarousel.html
index 2cf2526..2578fcc 100644
--- a/app/ui/templates/ui/components/projects/ProjectPreviewCarousel.html
+++ b/app/ui/templates/ui/components/projects/ProjectPreviewCarousel.html
@@ -1,3 +1,8 @@
+{% comment %}
+==> PARAMETERS
+- projects: list of IndividualProjectPages
+- title: string; an optional title for the section
+{% endcomment %}
 {% load wagtailimages_tags %}
 <div x-data="{ partnerIndex: 0, fixedIndex(x) {return ({{projects|length}} + x + this.partnerIndex) % {{projects|length}}}, moveIndex(x) {this.partnerIndex = this.fixedIndex(x)} }" 
      class="grid {{class}}">
diff --git a/app/ui/templates/ui/components/sections/BaseSectionWithImage.html b/app/ui/templates/ui/components/sections/BaseSectionWithImage.html
index b268022..71ed694 100644
--- a/app/ui/templates/ui/components/sections/BaseSectionWithImage.html
+++ b/app/ui/templates/ui/components/sections/BaseSectionWithImage.html
@@ -1,3 +1,20 @@
+{% comment %}
+==> PARAMETERS
+- image: image object; the image for the section
+- title: html element; the title for the section
+- description: html element; the description for the section
+- button2_text: string; the left button's text
+- button2_link: string; the left button's link
+- button_text: string; the right button's text
+- button_link: string; the right button's link
+
+- red_button: if truthy, the right button will be red; otherwise it will be outlined. 
+    - By default, the left button is red, and the right button is outlined.
+- bigdescription: if truthy, the description will have larger text
+- imagebottom: if truthy, the image will always be on the bottom in tablet/mobile sizes
+- imageright: if truthy, the image will always be on the right on desktop size
+- imagenotwide: if truthy, the image will not stretch to the edge of the screen in tablet/mobile sizes
+{% endcomment %}
 {% load wagtailimages_tags %}
 
 <div class="mx-auto max-w-7xl grid lg:grid-cols-5">
diff --git a/app/ui/templates/ui/components/sections/GreyBackgroundWithImage.html b/app/ui/templates/ui/components/sections/GreyBackgroundWithImage.html
index f7fa3ad..bd6f16d 100644
--- a/app/ui/templates/ui/components/sections/GreyBackgroundWithImage.html
+++ b/app/ui/templates/ui/components/sections/GreyBackgroundWithImage.html
@@ -1,3 +1,19 @@
+{% comment %}
+==> PARAMETERS
+- image: image object; the image for the section
+- title: html element; the title for the section
+- description: html element; the description for the section
+- button2_text: string; the left button's text
+- button2_link: string; the left button's link
+- button_text: string; the right button's text
+- button_link: string; the right button's link
+
+- red_button: if truthy, the right button will be red; otherwise it will be outlined
+- bigdescription: if truthy, the description will have larger text
+- imagebottom: if truthy, the image will always be on the bottom in tablet/mobile sizes
+- imageright: if truthy, the image will always be on the right on desktop size
+- imagenotwide: if truthy, the image will not stretch to the edge of the screen in tablet/mobile sizes
+{% endcomment %}
 {% load wagtailimages_tags %}
 
 <div class="bg-hot-off-white text-black">
diff --git a/app/ui/templates/ui/components/sections/LinkListSection.html b/app/ui/templates/ui/components/sections/LinkListSection.html
index 64be542..c2326d9 100644
--- a/app/ui/templates/ui/components/sections/LinkListSection.html
+++ b/app/ui/templates/ui/components/sections/LinkListSection.html
@@ -1,3 +1,9 @@
+{% comment %}
+==> PARAMETERS
+- title: string; the title
+- description: html element; the description for the section
+- links: list of link objects; these objects should have a .value.text and a .value.link
+{% endcomment %}
 <h1 class="text-h2 font-bold">{{title}}</h1>
 <hr class="my-4 border-t-2">
 <div class="grid lg:grid-cols-5 gap-8">
@@ -11,4 +17,4 @@ <h1 class="text-h2 font-bold">{{title}}</h1>
             </p>
         {% endfor %}
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/app/ui/templates/ui/components/sections/NavyBackgroundWithImage.html b/app/ui/templates/ui/components/sections/NavyBackgroundWithImage.html
index 4b66272..86801e5 100644
--- a/app/ui/templates/ui/components/sections/NavyBackgroundWithImage.html
+++ b/app/ui/templates/ui/components/sections/NavyBackgroundWithImage.html
@@ -1,3 +1,19 @@
+{% comment %}
+==> PARAMETERS
+- image: image object; the image for the section
+- title: html element; the title for the section
+- description: html element; the description for the section
+- button2_text: string; the left button's text
+- button2_link: string; the left button's link
+- button_text: string; the right button's text
+- button_link: string; the right button's link
+
+- red_button: if truthy, the right button will be red; otherwise it will be outlined
+- bigdescription: if truthy, the description will have larger text
+- imagebottom: if truthy, the image will always be on the bottom in tablet/mobile sizes
+- imageright: if truthy, the image will always be on the right on desktop size
+- imagenotwide: if truthy, the image will not stretch to the edge of the screen in tablet/mobile sizes
+{% endcomment %}
 {% load wagtailimages_tags %}
 
 <div class="bg-hot-navy-grey text-white">
diff --git a/app/ui/templates/ui/components/sharers/ShareSection.html b/app/ui/templates/ui/components/sharers/ShareSection.html
index a7782da..be28251 100644
--- a/app/ui/templates/ui/components/sharers/ShareSection.html
+++ b/app/ui/templates/ui/components/sharers/ShareSection.html
@@ -1,3 +1,8 @@
+{% comment %}
+==> PARAMETERS
+- class: string; the classes for the containing div
+- sharetext: string; the text to be shown next to the share icons
+{% endcomment %}
 <div class="{{class}}">
     <p class="text-h5 font-bold text-hot-black">
         <span class="mr-4 text-black">

From 4a98030055fb4ec64549ce4fecaa1cd5d656d08c Mon Sep 17 00:00:00 2001
From: luminaryFlowers <71102109+luminaryFlowers@users.noreply.github.com>
Date: Wed, 10 Jul 2024 16:57:07 -0700
Subject: [PATCH 10/10] member group pages => voting members, staff &
 implementing partners, board members

---
 .../0006_delete_hotsearchablepage.py          |  16 +++
 app/core/models.py                            |   4 -
 ...04_membergroupownerpage_membergrouppage.py |  52 +++++++
 ...0005_individualmemberpage_member_groups.py |  20 +++
 ...lter_individualmemberpage_member_groups.py |  20 +++
 ...lter_individualmemberpage_member_groups.py |  20 +++
 ...0008_membergrouppage_hub_shown_and_more.py |  23 +++
 ...lter_membergrouppage_hub_shown_and_more.py |  23 +++
 ...010_membergrouppage_show_search_options.py |  18 +++
 ...membergroupownerpage_search_button_text.py |  18 +++
 ...0012_membergroupownerpage_view_all_text.py |  18 +++
 app/members/models.py                         | 133 +++++++++++++++++-
 .../members/components/MembersSortOption.html |   4 +
 .../components/TailwindGridSizeAssurance.html |   9 ++
 .../members/individual_member_page.html       |  22 +--
 .../templates/members/member_group_page.html  | 116 +++++++++++++++
 app/news/models.py                            |  13 +-
 app/projects/models.py                        |   1 -
 .../FooterBannerWithTextAndLink.html          |   5 +
 .../members/MemberPreviewBlock.html           |  24 ++++
 20 files changed, 537 insertions(+), 22 deletions(-)
 create mode 100644 app/core/migrations/0006_delete_hotsearchablepage.py
 create mode 100644 app/members/migrations/0004_membergroupownerpage_membergrouppage.py
 create mode 100644 app/members/migrations/0005_individualmemberpage_member_groups.py
 create mode 100644 app/members/migrations/0006_alter_individualmemberpage_member_groups.py
 create mode 100644 app/members/migrations/0007_alter_individualmemberpage_member_groups.py
 create mode 100644 app/members/migrations/0008_membergrouppage_hub_shown_and_more.py
 create mode 100644 app/members/migrations/0009_alter_membergrouppage_hub_shown_and_more.py
 create mode 100644 app/members/migrations/0010_membergrouppage_show_search_options.py
 create mode 100644 app/members/migrations/0011_membergroupownerpage_search_button_text.py
 create mode 100644 app/members/migrations/0012_membergroupownerpage_view_all_text.py
 create mode 100644 app/members/templates/members/components/MembersSortOption.html
 create mode 100644 app/members/templates/members/components/TailwindGridSizeAssurance.html
 create mode 100644 app/members/templates/members/member_group_page.html
 create mode 100644 app/ui/templates/ui/components/members/MemberPreviewBlock.html

diff --git a/app/core/migrations/0006_delete_hotsearchablepage.py b/app/core/migrations/0006_delete_hotsearchablepage.py
new file mode 100644
index 0000000..052077b
--- /dev/null
+++ b/app/core/migrations/0006_delete_hotsearchablepage.py
@@ -0,0 +1,16 @@
+# Generated by Django 4.2.7 on 2024-07-09 22:09
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('core', '0005_remove_hotsearchablepage_intro_delete_testpagepage'),
+    ]
+
+    operations = [
+        migrations.DeleteModel(
+            name='HOTSearchablePage',
+        ),
+    ]
diff --git a/app/core/models.py b/app/core/models.py
index f5bc52c..cc04e8e 100644
--- a/app/core/models.py
+++ b/app/core/models.py
@@ -29,7 +29,3 @@ def __str__(self):
     
     class Meta:
         verbose_name_plural = "Partners"
-
-
-class HotSearchablePage(Page):
-    pass
diff --git a/app/members/migrations/0004_membergroupownerpage_membergrouppage.py b/app/members/migrations/0004_membergroupownerpage_membergrouppage.py
new file mode 100644
index 0000000..9cb5a03
--- /dev/null
+++ b/app/members/migrations/0004_membergroupownerpage_membergrouppage.py
@@ -0,0 +1,52 @@
+# Generated by Django 4.2.7 on 2024-07-09 21:59
+
+import django.core.validators
+from django.db import migrations, models
+import django.db.models.deletion
+import wagtail.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('wagtailcore', '0089_log_entry_data_json_null_to_object'),
+        ('wagtailimages', '0025_alter_image_file_alter_rendition_file'),
+        ('members', '0003_rename_introduction_individualmemberpage_intro'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='MemberGroupOwnerPage',
+            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')),
+                ('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 Title Alphabetical')),
+                ('sort_by_titlez', models.CharField(default='Sort by Title Reverse Alphabetical')),
+                ('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'.")),
+                ('footer_box_title', models.CharField(default='Work for HOT')),
+                ('footer_box_description', wagtail.fields.RichTextField(blank=True)),
+                ('footer_box_button_text', models.CharField(default='Check our Job Opportunities')),
+                ('footer_box_button_link', models.URLField(blank=True)),
+            ],
+            options={
+                'abstract': False,
+            },
+            bases=('wagtailcore.page',),
+        ),
+        migrations.CreateModel(
+            name='MemberGroupPage',
+            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, help_text='Appears in the header.')),
+                ('body_intro', wagtail.fields.RichTextField(blank=True)),
+                ('body_description', wagtail.fields.RichTextField(blank=True)),
+                ('desktop_size_items_per_row', models.SmallIntegerField(default=6, help_text='The number of members shown per row on desktop sizes.', validators=[django.core.validators.MinValueValidator(4), django.core.validators.MaxValueValidator(8)])),
+                ('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')),
+            ],
+            options={
+                'abstract': False,
+            },
+            bases=('wagtailcore.page',),
+        ),
+    ]
diff --git a/app/members/migrations/0005_individualmemberpage_member_groups.py b/app/members/migrations/0005_individualmemberpage_member_groups.py
new file mode 100644
index 0000000..e151dc3
--- /dev/null
+++ b/app/members/migrations/0005_individualmemberpage_member_groups.py
@@ -0,0 +1,20 @@
+# Generated by Django 4.2.7 on 2024-07-09 22:14
+
+from django.db import migrations
+import wagtail.blocks
+import wagtail.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('members', '0004_membergroupownerpage_membergrouppage'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='individualmemberpage',
+            name='member_groups',
+            field=wagtail.fields.StreamField([('member_group', wagtail.blocks.PageChooserBlock(page_type=['members.MemberGroupPage']))], blank=True, null=True, use_json_field=True),
+        ),
+    ]
diff --git a/app/members/migrations/0006_alter_individualmemberpage_member_groups.py b/app/members/migrations/0006_alter_individualmemberpage_member_groups.py
new file mode 100644
index 0000000..a981794
--- /dev/null
+++ b/app/members/migrations/0006_alter_individualmemberpage_member_groups.py
@@ -0,0 +1,20 @@
+# Generated by Django 4.2.7 on 2024-07-09 22:45
+
+from django.db import migrations
+import wagtail.blocks
+import wagtail.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('members', '0005_individualmemberpage_member_groups'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='individualmemberpage',
+            name='member_groups',
+            field=wagtail.fields.StreamField([('member_group', wagtail.blocks.StructBlock([('group', wagtail.blocks.PageChooserBlock(page_type=['members.MemberGroupPage'])), ('role', wagtail.blocks.CharBlock())]))], blank=True, null=True, use_json_field=True),
+        ),
+    ]
diff --git a/app/members/migrations/0007_alter_individualmemberpage_member_groups.py b/app/members/migrations/0007_alter_individualmemberpage_member_groups.py
new file mode 100644
index 0000000..14c8004
--- /dev/null
+++ b/app/members/migrations/0007_alter_individualmemberpage_member_groups.py
@@ -0,0 +1,20 @@
+# Generated by Django 4.2.7 on 2024-07-09 22:48
+
+from django.db import migrations
+import wagtail.blocks
+import wagtail.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('members', '0006_alter_individualmemberpage_member_groups'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='individualmemberpage',
+            name='member_groups',
+            field=wagtail.fields.StreamField([('member_group', wagtail.blocks.StructBlock([('group', wagtail.blocks.PageChooserBlock(page_type=['members.MemberGroupPage'])), ('role', wagtail.blocks.CharBlock(required=False))]))], blank=True, null=True, use_json_field=True),
+        ),
+    ]
diff --git a/app/members/migrations/0008_membergrouppage_hub_shown_and_more.py b/app/members/migrations/0008_membergrouppage_hub_shown_and_more.py
new file mode 100644
index 0000000..b032e78
--- /dev/null
+++ b/app/members/migrations/0008_membergrouppage_hub_shown_and_more.py
@@ -0,0 +1,23 @@
+# Generated by Django 4.2.7 on 2024-07-09 23:03
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('members', '0007_alter_individualmemberpage_member_groups'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='membergrouppage',
+            name='hub_shown',
+            field=models.BooleanField(blank=True, default=False, null=True),
+        ),
+        migrations.AddField(
+            model_name='membergrouppage',
+            name='position_shown',
+            field=models.BooleanField(blank=True, default=False, null=True),
+        ),
+    ]
diff --git a/app/members/migrations/0009_alter_membergrouppage_hub_shown_and_more.py b/app/members/migrations/0009_alter_membergrouppage_hub_shown_and_more.py
new file mode 100644
index 0000000..06f523c
--- /dev/null
+++ b/app/members/migrations/0009_alter_membergrouppage_hub_shown_and_more.py
@@ -0,0 +1,23 @@
+# Generated by Django 4.2.7 on 2024-07-09 23:05
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('members', '0008_membergrouppage_hub_shown_and_more'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='membergrouppage',
+            name='hub_shown',
+            field=models.BooleanField(default=False),
+        ),
+        migrations.AlterField(
+            model_name='membergrouppage',
+            name='position_shown',
+            field=models.BooleanField(default=False),
+        ),
+    ]
diff --git a/app/members/migrations/0010_membergrouppage_show_search_options.py b/app/members/migrations/0010_membergrouppage_show_search_options.py
new file mode 100644
index 0000000..d3c5861
--- /dev/null
+++ b/app/members/migrations/0010_membergrouppage_show_search_options.py
@@ -0,0 +1,18 @@
+# Generated by Django 4.2.7 on 2024-07-10 17:43
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('members', '0009_alter_membergrouppage_hub_shown_and_more'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='membergrouppage',
+            name='show_search_options',
+            field=models.BooleanField(default=True),
+        ),
+    ]
diff --git a/app/members/migrations/0011_membergroupownerpage_search_button_text.py b/app/members/migrations/0011_membergroupownerpage_search_button_text.py
new file mode 100644
index 0000000..60de3dc
--- /dev/null
+++ b/app/members/migrations/0011_membergroupownerpage_search_button_text.py
@@ -0,0 +1,18 @@
+# Generated by Django 4.2.7 on 2024-07-10 17:53
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('members', '0010_membergrouppage_show_search_options'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='membergroupownerpage',
+            name='search_button_text',
+            field=models.CharField(default='Search'),
+        ),
+    ]
diff --git a/app/members/migrations/0012_membergroupownerpage_view_all_text.py b/app/members/migrations/0012_membergroupownerpage_view_all_text.py
new file mode 100644
index 0000000..f1c7235
--- /dev/null
+++ b/app/members/migrations/0012_membergroupownerpage_view_all_text.py
@@ -0,0 +1,18 @@
+# Generated by Django 4.2.7 on 2024-07-10 19:21
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('members', '0011_membergroupownerpage_search_button_text'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='membergroupownerpage',
+            name='view_all_text',
+            field=models.CharField(default='View all'),
+        ),
+    ]
diff --git a/app/members/models.py b/app/members/models.py
index 58047ab..7121960 100644
--- a/app/members/models.py
+++ b/app/members/models.py
@@ -1,11 +1,14 @@
 from django.db import models
+from django.core.validators import MinValueValidator, MaxValueValidator
 from wagtail.admin.panels import FieldPanel, MultiFieldPanel
 from wagtail.blocks import CharBlock, StreamBlock, StructBlock, URLBlock, PageChooserBlock
 from wagtail.fields import RichTextField, StreamField
 from wagtail.models import Page
 from django.db.models import Q
+from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger
 from app.projects.models import IndividualProjectPage
 from app.news.models import IndividualNewsPage
+from app.mapping_hubs.models import IndividualMappingHubPage
 from wagtail.search import index
 
 class WebLinkStructBlock(StructBlock):
@@ -17,6 +20,127 @@ class WebLinkBlock(StreamBlock):
     blocks = WebLinkStructBlock()
 
 
+class MemberGroupOwnerPage(Page):
+    max_count = 1
+
+    subpage_types = [
+        'members.MemberGroupPage'
+    ]
+
+    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")
+    sort_by_titlez = models.CharField(default="Sort by Name Reverse Alphabetical")
+    search_button_text = models.CharField(default="Search")
+
+    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'.")
+
+    view_all_text = models.CharField(default="View all")
+
+    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)
+
+    content_panels = Page.content_panels + [
+        MultiFieldPanel([
+            FieldPanel('search_placeholder'),
+            FieldPanel('filter_by_country'),
+            FieldPanel('sort_by_titlea'),
+            FieldPanel('sort_by_titlez'),
+            FieldPanel('search_button_text'),
+        ], heading="Search options"),
+        FieldPanel('load_more_text'),
+        FieldPanel('view_all_text'),
+        MultiFieldPanel([
+            FieldPanel('footer_box_title'),
+            FieldPanel('footer_box_description'),
+            FieldPanel('footer_box_button_text'),
+            FieldPanel('footer_box_button_link'),
+        ], heading="Footer box"),
+    ]
+
+
+class MemberGroupPage(Page):
+    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 }}])
+        ).filter(locale=context['page'].locale)
+
+        keyword = request.GET.get('keyword', '')
+
+        if keyword:
+            members = members.search(keyword).get_queryset()
+        
+        hubs = IndividualMappingHubPage.objects.live().filter(locale=context['page'].locale)
+        query = Q()
+        for hub in hubs:
+            if request.GET.get(str(hub), ''):
+                query = query | Q(location_hub=hub)
+        members = members.filter(query).distinct()
+
+        match request.GET.get('sort', ''):
+            case 'sort.titlea':
+                members = members.order_by('title')
+            case 'sort.titlez':
+                members = members.order_by('-title')
+            case _:
+                members = members.order_by('title')
+
+        page = request.GET.get('page', 1)
+        paginator = Paginator(members, 12)  # if you want more/less items per page (i.e., per load), change the number here to something else
+        try:
+            members = paginator.page(page)
+        except PageNotAnInteger:
+            members = paginator.page(1)
+        except EmptyPage:
+            members = paginator.page(paginator.num_pages)
+
+        context['members'] = members
+        context['hubs'] = hubs
+        context['groups'] = MemberGroupPage.objects.live().filter(locale=context['page'].locale).exclude(id=context['page'].id)
+
+        return context
+    
+    parent_page_type = [
+        'members.MemberGroupOwnerPage'
+    ]
+
+    header_image = models.ForeignKey(
+        "wagtailimages.Image",
+        null=True,
+        blank=True,
+        on_delete=models.SET_NULL,
+        related_name="+",
+        help_text="Header image"
+    )
+    intro = RichTextField(blank=True, help_text="Appears in the header.")
+
+    body_intro = RichTextField(blank=True)
+    body_description = RichTextField(blank=True)
+
+    show_search_options = models.BooleanField(default=True)
+    desktop_size_items_per_row = models.SmallIntegerField(default=6, help_text="The number of members shown per row on desktop sizes.", validators=[
+        MinValueValidator(4),
+        MaxValueValidator(8),
+    ])
+    position_shown = models.BooleanField(default=False)
+    hub_shown = models.BooleanField(default=False)
+
+    content_panels = Page.content_panels + [
+        FieldPanel('header_image'),
+        FieldPanel('intro'),
+        FieldPanel('body_intro'),
+        FieldPanel('body_description'),
+        FieldPanel('show_search_options'),
+        FieldPanel('desktop_size_items_per_row'),
+        FieldPanel('position_shown'),
+        FieldPanel('hub_shown'),
+    ]
+
+
 class MemberOwnerPage(Page):
     max_count = 1
 
@@ -30,6 +154,12 @@ class MemberOwnerPage(Page):
         FieldPanel('project_contribution_title'),
     ]
 
+
+class MemberGroupBlock(StructBlock):
+    group = PageChooserBlock(page_type="members.MemberGroupPage")
+    role = CharBlock(required=False)
+
+
 """
 This page should only be created as a child of a MemberOwnerPage!
 Its template depends on fields from the MemberOwnerPage in order
@@ -63,6 +193,7 @@ def get_context(self, request, *args, **kwargs):
         related_name="+",
         help_text="An image of the member",
     )
+    member_groups = StreamField([('member_group', MemberGroupBlock())], use_json_field=True, null=True, blank=True)
     position = models.CharField()
     location_hub = models.ForeignKey(
         'mapping_hubs.IndividualMappingHubPage',
@@ -73,7 +204,6 @@ def get_context(self, request, *args, **kwargs):
     )
     intro = RichTextField()
     on_the_web_links = StreamField(WebLinkBlock(), blank=True, use_json_field=True)
-
     
     search_fields = Page.search_fields + [
         index.SearchField('title'),
@@ -83,6 +213,7 @@ def get_context(self, request, *args, **kwargs):
 
     content_panels = Page.content_panels + [
         FieldPanel('image'),
+        FieldPanel('member_groups'),
         FieldPanel('position'),
         FieldPanel('location_hub'),
         FieldPanel('intro'),
diff --git a/app/members/templates/members/components/MembersSortOption.html b/app/members/templates/members/components/MembersSortOption.html
new file mode 100644
index 0000000..8e3320f
--- /dev/null
+++ b/app/members/templates/members/components/MembersSortOption.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.titlea') ? 'on' : ''">
+    <label class="pl-2" :for="sort">{{sort_by}}</label>
+</div>
\ No newline at end of file
diff --git a/app/members/templates/members/components/TailwindGridSizeAssurance.html b/app/members/templates/members/components/TailwindGridSizeAssurance.html
new file mode 100644
index 0000000..09e7b65
--- /dev/null
+++ b/app/members/templates/members/components/TailwindGridSizeAssurance.html
@@ -0,0 +1,9 @@
+{% comment %}
+
+This file is just for making sure that the member_group_page's grid columns work right! 
+This ensures that all possible values for the grid column field will have its Tailwind
+class built.
+
+{% endcomment %}
+<div class="lg:grid-cols-4 lg:grid-cols-5 lg:grid-cols-6 lg:grid-cols-7 lg:grid-cols-8">
+</div>
\ No newline at end of file
diff --git a/app/members/templates/members/individual_member_page.html b/app/members/templates/members/individual_member_page.html
index ccd2c59..c090bfe 100644
--- a/app/members/templates/members/individual_member_page.html
+++ b/app/members/templates/members/individual_member_page.html
@@ -3,7 +3,7 @@
 {% load wagtailcore_tags %}
 {% load wagtailimages_tags %}
 {% load compress %}
-{% block body_class %}template-individualmappinghubpage{% endblock %}
+{% block body_class %}template-individualmemberpage{% endblock %}
 {% block extra_css %}
     {% compress css %}
     {% endcompress css %}
@@ -19,14 +19,14 @@
                 {% endif %}
             </div>
             <div class="col-span-2">
-                {% comment %} TODO: REMOVE PLACEHOLDER AND IMPLEMENT PROPER (BASICALLY REQUIRES OTHER PAGES COMPLETION) {% endcomment %}
-                <p class="text-intro font-medium">
-                    <span class="text-hot-red">Board</span>
-                    /
-                    <span class="text-hot-red">Voting Member</span>
-                    /
-                    <span class="text-hot-red">Staff</span>
-                </p>
+                {% if page.member_groups %}
+                    <p class="text-intro font-medium">
+                        {% for group in page.member_groups %}
+                            <a href="{{group.value.group.url}}" class="text-hot-red">{{group.value.role}}</a>
+                            {% if not forloop.last %} / {% endif %}
+                        {% endfor %}
+                    </p>
+                {% endif %}
                 <h1 class="text-h1 font-semibold my-2">{{page.title}}</h1>
                 <p class="text-intro font-medium my-4">
                     <span>{{page.position}}</span>
@@ -34,14 +34,14 @@ <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.introduction|safe}}
+                    {{page.intro|safe}}
                 </div>
             </div>
         </div>
 
         {% comment %} ON THE WEB LINKS {% endcomment %}
         {% if page.on_the_web_links %}
-            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mt-8">
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mt-8 lg:gap-y-16">
                 <div></div>
                 <div class="col-span-2">
                     <h1 class="text-h2 font-bold my-2">{{page.get_parent.specific.on_the_web_title}}</h1>
diff --git a/app/members/templates/members/member_group_page.html b/app/members/templates/members/member_group_page.html
new file mode 100644
index 0000000..3910f80
--- /dev/null
+++ b/app/members/templates/members/member_group_page.html
@@ -0,0 +1,116 @@
+{% extends "base.html" %}
+{% load static %}
+{% load wagtailcore_tags %}
+{% load wagtailimages_tags %}
+{% load compress %}
+{% block body_class %}template-membergrouppage{% endblock %}
+{% block extra_css %}
+    {% compress css %}
+    {% endcompress css %}
+{% endblock extra_css %}
+
+{% 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-3xl">
+            <div class="text-intro">
+                {{page.body_intro|safe}}
+            </div>
+            <div class="base-article-m">
+                {{page.body_description|safe}}
+            </div>
+        </div>
+
+        {% if page.show_search_options %}
+            <form class="mt-20 mb-10">
+                <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.get_parent.specific.search_placeholder}}" type="text" name="keyword" :value="params.get('keyword')">
+                        {% include "ui/components/icon_svgs/SearchIcon.html" with class="text-hot-red mx-3" %}
+                    </div>
+
+                    {% comment %} COUNTRY {% 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.get_parent.specific.filter_by_country}}
+                            </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="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}}')">
+                                </div>
+                            {% endfor %}
+                        </div>
+                    </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.get_parent.specific.sort_by_titlea}}
+                            </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/MembersSortOption.html" with sort_by=page.get_parent.specific.sort_by_titlea sort_id="sort.titlea" %}
+                            {% include "./components/MembersSortOption.html" with sort_by=page.get_parent.specific.sort_by_titlez sort_id="sort.titlez" %}
+                        </div>
+                    </div>
+
+                    <div class="bg-hot-red text-white font-semibold">
+                        <input type="submit" value="{{page.get_parent.specific.search_button_text}}" class="bg-transparent w-full h-full cursor-pointer py-2">
+                    </div>
+                </div>
+            </form>
+        {% 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">
+            {% for member in members %}
+                {% include "ui/components/members/MemberPreviewBlock.html" with member=member position_shown=page.position_shown hub_shown=page.hub_shown %}
+            {% endfor %}
+        </div>
+        <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 }}"
+                        hx-trigger="click"
+                        hx-select="#members-list, #next-project"
+                        hx-swap="beforeend"
+                        hx-select-oob="#members-list:beforeend, #next-member:outerHTML"
+                    >
+                        <span class="border-b-hot-red border-b-2 pb-1 font-medium mr-4 text-intro">
+                            {{page.get_parent.specific.load_more_text}} {{page.title}}
+                        </span>
+                        {% include "ui/components/icon_svgs/LinkCaret.html" with class="rotate-90 text-hot-red" %}
+                    </button>
+            {% endif %}
+        </p>
+
+        {% comment %} BOTTOM AREA {% endcomment %}
+        <div class="grid grid-cols-1 md:grid-cols-2 text-white gap-8 mt-20">
+            {% for group in groups %}
+                {% if forloop.counter0|divisibleby:2 %}
+                    <div>
+                        {% include "ui/components/dogear_boxes/DogearRed.html" with title=group.title linktext=page.get_parent.specific.view_all_text|add:' '|add:group.title linkurl=group.url %}
+                    </div>
+                    {% else %}
+                    <div>
+                        {% include "ui/components/dogear_boxes/DogearBlack.html" with title=group.title linktext=page.get_parent.specific.view_all_text|add:' '|add:group.title linkurl=group.url %}
+                    </div>
+                {% endif %}
+            {% 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 %}
+        </div>
+    </div>
+{% endblock %}
diff --git a/app/news/models.py b/app/news/models.py
index 4b65d47..c0887ae 100644
--- a/app/news/models.py
+++ b/app/news/models.py
@@ -21,6 +21,9 @@ def get_context(self, request, *args, **kwargs):
 
         keyword = request.GET.get('keyword', '')
         news_list = IndividualNewsPage.objects.live().filter(locale=context['page'].locale)
+        
+        if keyword:
+            news_list = news_list.search(keyword).get_queryset()
 
         categories = NewsCategory.objects.all()
         tags = [x[4:] for x in request.GET.keys() if x.startswith("tag.")]
@@ -28,13 +31,13 @@ def get_context(self, request, *args, **kwargs):
         for category in categories:
             if request.GET.get(str(category), ''):
                 query = query | Q(categories=category)
+        news_list = news_list.filter(query).distinct()
+        
+        query = Q()
         for tag in tags:
             query = query | Q(tags__name=tag)
         news_list = news_list.filter(query).distinct()
 
-        if keyword:
-            news_list = news_list.search(keyword).get_queryset()
-
         match request.GET.get('sort', ''):
             case 'sort.new':
                 news_list = news_list.order_by('-date')
@@ -184,8 +187,8 @@ 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.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/projects/models.py b/app/projects/models.py
index 8ab849b..ea22cf0 100644
--- a/app/projects/models.py
+++ b/app/projects/models.py
@@ -9,7 +9,6 @@
 from wagtail.blocks import CharBlock, StreamBlock, StructBlock, URLBlock, RichTextBlock, PageChooserBlock
 from wagtail.search import index
 from modelcluster.fields import ParentalKey, ParentalManyToManyField
-from app.core.models import HotSearchablePage
 
 
 """
diff --git a/app/ui/templates/ui/components/FooterBannerWithTextAndLink.html b/app/ui/templates/ui/components/FooterBannerWithTextAndLink.html
index b93d3e9..7b9cdf1 100644
--- a/app/ui/templates/ui/components/FooterBannerWithTextAndLink.html
+++ b/app/ui/templates/ui/components/FooterBannerWithTextAndLink.html
@@ -10,6 +10,11 @@
         <h1 class="text-h2 font-bold mb-8">
             {{ text }}
         </h1>
+        {% if description %}
+            <div class="my-6">
+                {{description|safe}}
+            </div>
+        {% endif %}
         <a href="{{ url }}">
             {% include "components/branded_elements/button.html" with text=buttontext %}
         </a>
diff --git a/app/ui/templates/ui/components/members/MemberPreviewBlock.html b/app/ui/templates/ui/components/members/MemberPreviewBlock.html
new file mode 100644
index 0000000..a1a5bbd
--- /dev/null
+++ b/app/ui/templates/ui/components/members/MemberPreviewBlock.html
@@ -0,0 +1,24 @@
+{% load wagtailimages_tags %}
+
+<div class="grid grid-cols-3 gap-4 md:block">
+    <a href="{{member.url}}">
+        {% image member.image original class="aspect-[4/5] object-cover w-full col-span-1" %}
+    </a>
+    <div class="col-span-2 flex md:block flex-col justify-center">
+        <a href="{{member.url}}">
+        <h2 class="text-intro md:text-h5 font-bold leading-snug mt-2 mb-1">{{member.title}}</h2>
+        {% if position_shown %}
+            <p class="text-small mt-1">
+                {{member.position}}
+            </p>
+        {% endif %}
+        </a>
+        {% if hub_shown and member.location_hub %}
+            <p class="mt-0.5">
+                <a href="{{member.location_hub.url}}" class="text-hot-red text-small">
+                    {{member.location_hub.title}}
+                </a>
+            </p>
+        {% endif %}
+    </div>
+</div>
\ No newline at end of file