From 6d25eb887c56d25ba81b3522f9f83e24cc123f1d Mon Sep 17 00:00:00 2001
From: Willie <williehemail@gmail.com>
Date: Tue, 30 Sep 2025 14:06:34 -0700
Subject: [PATCH 1/2] Add Program Area Pages Cards Example

---
 .../program-area-pages-cards-example.html     | 52 +++++++++++++++++++
 1 file changed, 52 insertions(+)
 create mode 100644 _includes/program-area-pages-cards-example.html

diff --git a/_includes/program-area-pages-cards-example.html b/_includes/program-area-pages-cards-example.html
new file mode 100644
index 0000000000..f9df84f7fd
--- /dev/null
+++ b/_includes/program-area-pages-cards-example.html
@@ -0,0 +1,52 @@
+<!-- These are the cards found on a program area page, such as the cards on https://www.hackforla.org/citizen-engagement webpage. -->
+
+{% assign visible_projects = site.projects | where: "program-area", "Citizen Engagement" | where: "visible", "true" %}
+             {% for item in visible_projects %}
+             {%- if
+                item.problem.size > 0 and
+                item.solution.size > 0 and
+                item.impact.size > 0 and
+                item.sdg.size > 0 and
+                item.sdg-image-src.size > 0
+                -%}
+                  <div class="page-card card-primary page-card-lg program-area" data-dropdown>
+                        <img class="card-image" src="{{ item.image }}" alt="">
+                           <div class="mobile-card-info-container">
+                               <div class="mobile-card-nav">
+                                {% assign project_relative_path = item.slug | prepend: "../projects/" %}
+                                <h3><a class="project-card-mini-title" href="{{ project_relative_path }}">{{ item.title }}</a></h3>
+                                   <input class="dropdown-arrow" data-dropdown-arrow type="image" src="/assets/images/citizen-engagement/arrow-button-icon.svg" alt="dropdown-arrow">
+                               </div>
+                               <div class="project-dropdown">
+                                    <div class="problem-info">
+                                        <h4>Problem</h4>
+                                        <p>{{ item.problem }}</p>
+                                    </div>
+                                    <div class="solution-info">
+                                        <h4>Solution</h4>
+                                        <p>{{ item.solution }}</p>
+                                    </div>
+                                    <div class="impact-info">
+                                        <h4>Impact</h4>
+                                        <p>{{ item.impact }}</p>
+                                    </div>
+                            </div>
+                        </div>
+                    <div class="sustainable-dev-goal">
+                        <h4>Sustainable Development Goal</h4>
+                        <div class="card-bottom-info">
+                            <img class="sdg-image" src="{{ item.sdg-image-src }}" alt="{{ item.sdg-image-alt }}">
+                                    <p>{{ item.sdg }}</p>
+                        </div>
+                    </div>
+                </div>
+                {%- else -%}
+                     <div class="page-card card-primary page-card-lg missing-area" data-dropdown>
+                        <div class="mobile-card-info-container">
+                            {% assign project_relative_path = item.slug | prepend: "../projects/" %}
+                            <h3><a class="project-card-mini-title" href="{{ project_relative_path }}">{{ item.title }}</a></h3>
+                            <p>We are currently drafting the Problem, Solution and Impact statements for this project.</p>
+                        </div>
+                   </div>
+                {%- endif -%}
+            {% endfor %}
\ No newline at end of file

From e76f4b4661c3c5894f2f0d7a08de0c06b227547b Mon Sep 17 00:00:00 2001
From: Willie <williehemail@gmail.com>
Date: Tue, 30 Sep 2025 14:07:01 -0700
Subject: [PATCH 2/2] Add Citizen Engagement Example Page

---
 pages/citizen-engagement-example.html | 62 +++++++++++++++++++++++++++
 1 file changed, 62 insertions(+)
 create mode 100644 pages/citizen-engagement-example.html

diff --git a/pages/citizen-engagement-example.html b/pages/citizen-engagement-example.html
new file mode 100644
index 0000000000..a3cf441657
--- /dev/null
+++ b/pages/citizen-engagement-example.html
@@ -0,0 +1,62 @@
+---
+layout: default
+title: Citizen Engagement
+permalink: /citizen-engagement-example
+---
+<!-- Header banner -->
+<div class="header-container flex-container program-header-container">
+    <div class="header-text">
+        <h1 class="title1">Citizen Engagement</h1>
+        <p>
+            We at Hack for LA are volunteers that believe in building technology
+            and analyzing data to make it easier to participate effectively in your community.
+        </p>
+        <p class="sub-p">
+            Below are our products that are making that happen.
+            If you have a new idea, want to submit feedback that will guide the next iteration
+            of an existing tool, or want to start working on a project team with us, please contact
+            us at <a href="mailto: citizenengagement@hackforla.org">citizenengagement@hackforla.org.</a>
+        </p>
+        <p class="bottom-header-paragraph">
+            Read more about <a href="https://sdg.lamayor.org/about/global-goals">LA’s Sustainable Development Goals</a>.
+        </p>
+    </div>
+    <img class="header-hero-image" src="/assets/images/citizen-engagement/citizen-engagement-header.svg"
+        alt="">
+</div>
+<!-- Header banner -->
+
+<!-- Page body -->
+<section class="content-section project-wrapper">
+    <div class="page-contain projects program-area-container">
+        <h2>Current Projects</h2>
+        <!-- Card -->
+        <!-- Cards have been standardized and can be found in _sass/elements/_cards-->
+        <!-- These cards utilize the previous standardized elements, plus new elements that I have integrated. -->
+        <!-- Specifically I have added data attributes to the page-card container, and the dropdown arrow.
+             We use the data attributes in JS to expand and close the cards. -->
+
+            {% include program-area-pages-cards-example.html %}
+
+            <div class="page-card card-primary page-card-lg organizations">
+                <div class="organizations-info">
+                    <h3>Organizations We Work With</h3>
+                    <p>None of what we do would be possible without the generous
+                        support of many organizations throughout our communities.
+                        A big thank you to:</p>
+                </div>
+                <div class="organizations-images">
+                    {% assign partners = site.data.internal.partners %}
+                    {% for partner in partners %}
+                      {% if partner.program-area contains "Citizen Engagement" %}
+                        <img class="org-img org-img-large" src="{{ partner.image }}" alt="{{ partner.name }}">
+                      {% endif %}
+                    {% endfor %}
+                </div>
+        </div>
+    </div>
+    <!-- Card -->
+</section>
+
+<!-- Include javaScript -->
+<script src="{{ '/assets/js/citizen-engagement.js' | absolute_url }}"></script>