Merge pull request #32 from PublicMapping/feature/mt/site-changes

Add new organization page
PublicMapping · Apr 8, 2022 · 26345a3 · 26345a3
2 parents e2467a9 + e0e1a46
commit 26345a3
Show file tree

Hide file tree

Showing 34 changed files with 271 additions and 34 deletions.
diff --git a/_data/nav.yml b/_data/nav.yml
@@ -20,6 +20,6 @@
         type: "fas fa-glasses"
         color: "plum"
 - title: "Organizations"
-  href: "https://medium.com/districtbuilder/engage-your-audience-with-a-custom-organization-page-e041e2127d28"
+  href: "/organizations"
 - title: "Contact"
   href: "/contact"
diff --git a/_includes/_home/_features.html b/_includes/_home/_features.html
@@ -8,9 +8,11 @@ <h2 class="section__title">
                 <div class="section__blurb">
                     {{ page.features.blurb || markdownify }}
                 </div>
+                {% if page.features.button-text %}
                 <a id="g-features-section-cta" href="{{ page.features.button-url }}" class="section__button button button--primary">
                     {{ page.features.button-text }}
                 </a>
+                {% endif %}
             </div>
 
             {% assign baseimage = page.features.image-url %}
@@ -73,5 +75,17 @@ <h3 class="card__blurb" markdown="1">
                        button-style = page.features.note.button.style
                     %}
             {% endif %}
+
+            {% if page.features.secondary-feature %}
+            {% include secondary-feature.html 
+                       image-url = page.features.secondary-feature.image-url
+                       image-alt = page.features.secondary-feature.image-alt
+                       title = page.features.secondary-feature.title
+                       blurb = page.features.secondary-feature.blurb
+                       button-text = page.features.secondary-feature.button-text
+                       button-url = page.features.secondary-feature.button-url
+                       button-style = page.features.secondary-feature.button-style
+                    %}
+            {% endif %}
     </div>
 </section>
diff --git a/_includes/_home/_resources.html b/_includes/_home/_resources.html
@@ -1,3 +1,4 @@
+{% if page.resources.title %}
 <section id="section-resources" class="section section--highlight section--centered">
     <div class="section__inner">
         <div class="section__text-container">
@@ -50,4 +51,5 @@ <h3 class="card__title">
             {% endfor %}
         </ul>
     </div>
-</section>
+</section>
+{% endif %}
diff --git a/_includes/_home/_testimonials.html b/_includes/_home/_testimonials.html
@@ -1,3 +1,4 @@
+{% if page.testimonials.title %}
 <section id="section-testimonials" class="section section--highlight section--centered">
     <div class="section__inner">
 
@@ -100,4 +101,5 @@ <h2 class="section__title">
             style = page.advocacy-groups.cta.style
         %}
     </div>
-</section>
+</section>
+{% endif %}
diff --git a/_includes/_home/_valueprop.html b/_includes/_home/_valueprop.html
@@ -0,0 +1,28 @@
+{% if page.value-prop.title %}
+<section id="section-valueprop" class="section">
+    <div class="section__inner">
+        <div class="section__text-container">
+            <div class="section__text-container">
+                <h2 class="section__title">
+                    {{ page.value-prop.title }}
+                </h2>
+                <div class="section__blurb">
+                    {{ page.value-prop.blurb || markdownify }}
+                </div>
+            </div>
+        </div>
+
+        <div class="card-container">
+            {% for value in page.value-prop.value-list %}
+            		{% assign baseimage = value.image-url %}
+		            {% assign imageending = baseimage | split: '.' | last %}
+		            {% assign size = baseimage | size | minus: 4 %}
+                <div class="card">
+	                <img data-src="{{ site.baseurl }}{{ baseimage }}" src="{{ baseimage | slice: 0, size }}_tiny.{{ imageending }}" alt="{{ value.image-alt }}" class="lazy">
+	                <h3 class="card__blurb" markdown="1">{{ value.blurb }}</h3>
+                </div>
+            {% endfor %}
+        </div>
+    </div>
+</section>
+{% endif %}
diff --git a/_includes/_home/home.html b/_includes/_home/home.html
@@ -2,6 +2,10 @@
 {% include {{ page.partials_location }}_hero.html %}
 <!-- Hero -->
 
+<!-- Value Prop -->
+{% include {{ page.partials_location }}_valueprop.html %}
+<!-- Value Prop -->
+
 <!-- Features -->
 {% include {{ page.partials_location }}_features.html %}
 <!-- Features -->

diff --git a/_includes/call-to-action.html b/_includes/call-to-action.html
@@ -1,3 +1,4 @@
+{% if include.cta-blurb %}
 <div id="
     {% if include.id %}
         g-{{ include.id }}-cta
@@ -22,4 +23,5 @@
             {{ include.cta-button-text }}
         </a>
     </div>
-</div>
+</div>
+{% endif %}
diff --git a/_includes/secondary-feature.html b/_includes/secondary-feature.html
@@ -0,0 +1,25 @@
+<div class="section__image-text-container">
+		{% assign baseimage = include.image-url %}
+    {% assign imageending = baseimage | split: '.' | last %}
+    {% assign size = baseimage | size | minus: 4 %}
+    <div class="section__image-container section__image-container__inverted">
+        <picture class="section__image">
+            <source media="(max-width: 799px)" data-srcset="{{ baseimage | slice: 0, size }}@0.5x.{{ imageending }}">
+            <source media="(min-width: 799px) and (max-width: 1000px)" data-srcset="{{ baseimage | slice: 0, size }}@0.75x.{{ imageending }}">
+            <source media="(min-width: 1000px)" data-srcset="{{ baseimage }}">
+            <img data-src="{{ site.baseurl }}/assets/images/projects/{{ baseimage }}" src="{{ baseimage | slice: 0, size }}_tiny.{{ imageending }}" alt="{{ include.image-alt }}" class="lazy">
+        </picture>
+    </div>
+
+    <div class="section__text-container section__text-container__inverted">
+        <h2 class="section__title">
+            {{ include.title }}
+        </h2>
+        <div class="section__blurb">
+            {{ include.blurb || markdownify }}
+        </div>
+        <a id="g-features-section-cta" href="{{ include.button-url }}" class="section__button button button--primary">
+            {{ include.button-text }}
+        </a>
+    </div>
+</div>
diff --git a/_pages/home.md b/_pages/home.md
@@ -59,37 +59,15 @@ features:
     - title: "Engage your audience"
       blurb: "Easily export your custom map and share in an article, on social media, or anywhere online."
       icon: "fal fa-users-class"
-  sp-cta:
-    image-url: "./assets/images/photo-organization.jpg"
+  secondary-feature:
+    image-url: "./assets/images/DistrictBuilder_ScreenshotOrganization.png"
     image-alt: "Group of people in an office around laptops while a woman presents."
-    mini-title: "New feature"
-    title: "Get the public involved with DistrictBuilder Organizations"
-    blurb: >
-      Public engagement in the redistricting process is key to creating fair districts. With DistrictBuilder Organizations, your redistricting commission, agency, or community group can collect maps and input from the public for redistricting. 
-        - Engage the public and collect maps they create, with unlimited users
-        - Custom region support for redistricting anywhere, at every level of government - city, county, school district or state
-        - Choose the best maps to feature on your custom-branded Organization page
-    button:
-      text: "Request a demo"
-      url: "mailto:districtbuilder@azavea.com"
-      style: "plum"
+    title: "Build your community with Organization Pages"
+    blurb: "Organizations give groups of concerned citizens, nonprofits, or redistricting commissions the tools to create their own community on DistrictBuilder and engage the public in the redistricting process. It's a place to map collaboratively, highlight the group's goals, showcase maps that the community has created, or display official proposed maps."
+    button-text: "Create an organization"
+    button-url: "/organizations"
 # features section
 
-# testimonials section
-testimonials:
-  mini-title: "Kind words"
-  icon: "fas fa-comments"
-  title: "What the redistricting community is saying"
-advocacy-groups:
-  icon: "fas fa-person-sign"
-  title: "Organizations are using DistrictBuilder to engage the public in redistricting"
-  cta:
-    blurb: "**Fight for fair and transparent redistricting.** DistrictBuilder empowers you to draw a better map."
-    button-text: "Try it out"
-    button-url: "https://app.districtbuilder.org/register"
-    button-style: "blue"
-# testimonials section
-
 # community section
 community:
   mini-title: "Join"

diff --git a/_pages/organizations.md b/_pages/organizations.md
@@ -0,0 +1,116 @@
+---
+# Feel free to add content and custom Front Matter to this file.
+# To modify the layout, see https://jekyllrb.com/docs/themes/#overriding-theme-defaults
+
+layout: home
+permalink: "/organizations"
+page_class: p-home
+partials_location: "_home/"
+
+# NO EDITING ABOVE THIS LINE
+# # # # # #
+
+title: "Engage your audience with a custom Organization Page"
+
+# # # # # #
+# Page copy
+
+# banner
+banner:
+  icon: "fas fa-bell-on"
+  blurb: "Check out winners of the #MapAcrossAmerica redistricting contest!"
+  button:
+    style: "plum"
+    url: "https://medium.com/districtbuilder/map-across-america/home"
+    text: "See the maps"
+# banner
+
+# hero section
+hero:
+  title: "Engage your audience with a custom Organization Page"
+  blurb: "Organizations give groups of concerned citizens, nonprofits, or redistricting commissions the tools to create their own community on DistrictBuilder and engage the public in the redistricting process."
+  image-url: "./assets/images/photo-organization.jpg"
+  image-alt: "Woman journalist in meeting with paper presenting to colleagues."
+  cta:
+    blurb: "Drive public engagement with DistrictBuilder Organizations."
+    button-text: "Create an organization"
+    button-url: "/contact"
+    button-style: "primary"
+    icon: "fas fa-sparkles"
+# hero section
+
+# value prop section
+value-prop:
+  title: "Completely Custom Redistricting"
+  blurb: "Organizations provide a customized way to engage the public with redistricting: your own logo, text, data, templates, and featured maps."
+  value-list:
+    - blurb: "Templates ensure that users start mapping with the correct settings for your organization: the right data, population deviation, and overlays. Templates can be set up for existing districts, blank maps to start from scratch, or to draw community of interest maps."
+      image-url: "./assets/images/icon-templates.png"
+      image-alt: "An icon of a several squares in a template design. "
+    - blurb: "Organization pages enable redistricting at every level: cities, counties, school boards, and special districts. We supply official Census data at the Block and Blockgroup level. Other aggregations are possible with your Organization's official data."
+      image-url: "./assets/images/icon-scale.png"
+      image-alt: "An icon of several squares showing scalability. "
+    - blurb: "We provide managed hosting for your Organization, which includes feature enhancements, security patches, and scaling of cloud infrastructure so you never need to worry about database storage. In addition, unlimited users can join your organization."
+      image-url: "./assets/images/icon-hostinig.png"
+      image-alt: "An icon of a server and cloud representing cloud hosting. "
+# value prop section
+
+# features section
+features:
+  title: "Publicly feature awesome maps"
+  blurb: "Feature your community or commission's best maps with our Featured Maps section. They can serve as a showcase for a public competition, highlight maps by special interest groups, or display official proposed maps. Featured maps are selected by the Organization administrator, giving them control over how to best curate maps."
+  image-url: "./assets/images/DistrictBuilder_ScreenshotOrganization.png"
+  image-alt: "Screenshot of DistrictBuilder."
+  sp-cta:
+    image-url: "./assets/images/photo-danecounty.png"
+    image-alt: "A screen capture of DistrictBuilders interface for Dane County. "
+    mini-title: "Case Study"
+    title: "Get the public involved with DistrictBuilder Organizations"
+    blurb: "The Dane County Redistricting Commission (Dane County, Wisconsin) used DistrictBuilder Organizations to collect and analyze public map submissions for redistricting of their county supervisory districts. Dane County collected dozens of map submission from the general public, who were able to draw maps using official Census data for county wards. Additionally, they showcased the eight proposed maps drawn by members of the commission. All the maps are grouped on one page so the public can view and analyze the different options."
+    button:
+      text: "Create an organization"
+      url: "/contact"
+      style: "plum"
+# features section
+
+# testimonials section
+testimonials:
+  mini-title: "Kind words"
+  icon: "fas fa-comments"
+  title: "What the redistricting community is saying"
+advocacy-groups:
+  icon: "fas fa-person-sign"
+  title: "Organizations are using DistrictBuilder to engage the public in redistricting"
+# testimonials section
+
+# community section
+community:
+  mini-title: "Join"
+  icon: "fas fa-users"
+  title: "Draw fair districts for every state"
+  buttons:
+    - text: "Draw your own"
+      url: "https://app.districtbuilder.org/register"
+    - text: "Share your project"
+      url: "mailto:districtbuilder@azavea.com"
+      icon: "fas fa-paper-plane"
+      style: "secondary"
+  cta:
+    style: "light"
+    blurb: "**Ask the right questions.** DistrictBuilder helps you understand the impact of partisan gerrymandering on redistricting"
+    button-text: "Sign up"
+    button-url: "https://app.districtbuilder.org/register"
+    button-style: "blue"
+# community section
+
+# closing call-to-action section
+closing:
+  image-url: "./assets/images/photo-aerial-photo-of-neighborhood.jpg"
+  image-alt: "Aerial imagery of a community of homes and apartment buildings."
+  blurb: "Build your redistricting community"
+  button-text: "Create an organization"
+  button-url: "/contact"
+# closing call-to-action section
+---
+
+{% include {{ page.partials_location }}home.html %}
diff --git a/_sass/06_components/_call-to-action.scss b/_sass/06_components/_call-to-action.scss
@@ -57,7 +57,7 @@
         margin: $pad-small auto 0;
 
         @media screen and (min-width: $bp-med) {
-            flex: 0 0 15rem;
+            //flex: 0 0 15rem;
             margin: 0 0 0 $pad-small;
             max-width: none;
         }

diff --git a/_sass/06_components/_testimonial.scss b/_sass/06_components/_testimonial.scss
@@ -7,6 +7,12 @@
     }
 }
 
+.advocacy-group-container {
+	//@media screen and (max-width: $bp-large) {
+		margin-bottom: $pad-large;
+	//}
+}
+
 .testimonial {
     display: flex;
     margin-bottom: $pad-normal;