Update landing page to include accordion and footer

app/assets/stylesheets/bootstrap-overrides.scss

@@ -14,6 +14,8 @@ $spacers: (
   8: ($spacer * 6),
   9: ($spacer * 7),
   10: ($spacer * 8),
+  11: ($spacer * 9),
+  12: ($spacer * 10),
 );
 
 $nav-link-color: $white;
@@ -21,5 +23,12 @@ $nav-link-font-weight: 600;
 $nav-tabs-border-color: transparent;
 $nav-tabs-border-radius: 15px;
 $font-family-base: 'Cabin', sans-serif;
+$headings-font-family: 'Bitter', serif;
+$headings-font-weight: 700;
 $body-color: $black;
+
 $btn-border-radius: 0;
+$input-btn-focus-color-opacity: 0.35;
+
+$accordion-border-radius: 8px;
+$accordion-button-active-bg: $gray-3;

app/assets/stylesheets/clear-margin-padding.scss

@@ -11,7 +11,6 @@ h3,
 h4,
 h5,
 h6,
-p,
 blockquote,
 pre,
 a,

app/assets/stylesheets/welcome.scss

@@ -19,12 +19,17 @@
   text-align: center;
 }
 
-.hero-description{
+.hero-description {
   max-width: 588px;
   margin: auto;
   font-size: 20px;
 }
 
+img.framework-wheel {
+  width: 442px;
+  max-width: 100%;
+}
+
 .welcome-controls {
   @extend .py-5;
 }
@@ -35,3 +40,20 @@
     $black, $black, $white,
     $gray-2, transparent, $white);
 }
+
+#landing-accordion {
+  max-width: 550px;
+}
+
+footer {
+  color: $white;
+  .btn {
+    @extend .font-bitter;
+    @extend .font-size-14;
+    @extend .weight-700;
+  }
+}
+.footer-content {
+  margin: auto;
+  max-width: 792px;
+}

app/controllers/home_controller.rb

@@ -2,5 +2,7 @@ class HomeController < ActionController::Base
   def index
     @districts = District.all.order(:name)
     @schools = School.all
+
+    @categories = SqmCategory.all
   end
 end

app/javascript/home.js

@@ -1,3 +1,5 @@
+import 'bootstrap';
+
 export function initializeListenersForHomeDropdowns() {
   const districtDropdown = document.querySelector("#district-dropdown");
   if (districtDropdown) {

app/views/home/index.html.erb

@@ -20,3 +20,54 @@
     </div>
   </div>
 </div>
+
+<div class="bg-color-light-blue pt-12 pb-11">
+  <div class="container">
+    <div class="row">
+      <div class="col-lg-5">
+        <%= image_tag('framework_wheel.png', alt: 'MCIEA School Quality Framework Wheel', class: 'framework-wheel') %>
+      </div>
+      <div class="col-lg-7">
+        <h2 class="mb-4">School Quality Measures Framework</h2>
+        <p>Through a strand of work led by professor Jack Schneider at the University of Massachusetts Lowell and a team
+          of researchers, MCIEA is reimagining how we measure the quality of our schools and the learning experiences of
+          our students.</p>
+        <p>To achieve this goal, MCIEA sought input from stakeholders in each consortium district to build a school
+          quality framework that reflects what the public wants to know about their schools.</p>
+        <p>The framework has been built around multiple measures, which include academic, social-emotional, and school
+          culture indicators, in order to piece together a fairer and more comprehensive picture of school performance.
+          It
+          consists of five major categories.</p>
+
+        <div id="landing-accordion" class="accordion mt-6">
+          <% @categories.each do |category| %>
+            <div class="accordion-item">
+              <h3 class="accordion-header" id="<%= category.slug %>-header">
+                <button class="accordion-button sub-header-4 collapsed" data-bs-toggle="collapse" data-bs-target="#<%= category.slug %>-item" aria-expanded="false" aria-controls="<%= category.slug %>-item">
+                  <%= category.name %>
+                </button>
+              </h3>
+              <div id="<%= category.slug %>-item" class="accordion-collapse collapse" aria-labelledby="<%= category.slug %>-header" data-bs-parent="#landing-accordion">
+                <div class="accordion-body">
+                  <%= category.description %>
+                </div>
+              </div>
+            </div>
+          <% end %>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<footer class="bg-color-blue text-center py-11 mt-12px">
+  <div class="footer-content">
+    <h2 class="mb-4">About MCIEA</h2>
+    <p>The Massachusetts Consortium for Innovative Education Assessment (MCIEA) is a partnership of Massachusetts public
+      school districts and their local teacher unions, joined together to create a fair and effective accountability
+      system that is guided by a set of principles and offers a more dynamic picture of student learning and school
+      quality than a single standardized test. MCIEA seeks to increase achievement for all students, close inequitable
+      achievement gaps, and better prepare students for college, career, and life.</p>
+    <a href="https://www.mciea.org/about.html" target="_blank" class="btn btn-secondary mt-4">Learn More</a>
+  </div>
+</footer>

app/views/sqm_categories/show.html.erb

@@ -11,7 +11,7 @@
 <% end %>
 
 <h1 class="sub-header font-bitter color-red"><%= @category.name %></h1>
-<h2 class="col-8 body-large"><%= @category.description %></h2>
+<p class="col-8 body-large"><%= @category.description %></p>
 
 <% @category.subcategories.each do |subcategory| %>
   <section class="subcategory-section">
@@ -23,7 +23,7 @@
       <div>
         <%= render partial: "gauge_graph", locals: { gauge: subcategory.gauge_presenter, gauge_class: 'gauge-graph-lg', font_class: 'sub-header-3' } %>
       </div>
-      <h2 class="body-large mx-7"><%= subcategory.description %></h2>
+      <p class="body-large mx-7"><%= subcategory.description %></p>
     </div>
     </div>
 

package.json

@@ -3,11 +3,13 @@
   "private": "true",
   "dependencies": {
     "@babel/preset-env": "^7.15.8",
-    "babel-preset-es2015": "^6.24.1",
+    "@popperjs/core": "^2.10.2",
-    "esbuild": "^0.13.6",
     "@rails/actioncable": "^6.0.0",
     "@rails/activestorage": "^6.0.0",
     "@rails/ujs": "^6.0.0",
+    "babel-preset-es2015": "^6.24.1",
+    "bootstrap": "^5.1.3",
+    "esbuild": "^0.13.6",
     "turbolinks": "^5.2.0"
   },
   "scripts": {

spec/features/school_dashboard_feature_spec.rb

@@ -70,6 +70,7 @@ feature 'School dashboard', type: feature do
     page.driver.basic_authorize(username, password)
 
     visit '/welcome'
+    expect(page).to have_text("Teachers & Leadership")
     go_to_school_dashboard_from_welcome_page(district, school)
 
     district_admin_sees_dashboard_content

spec/views/home/index.html.erb_spec.rb

@@ -5,6 +5,7 @@ describe 'home/index.html.erb' do
 
   before :each do
     assign :districts, [create(:district), create(:district)]
+    assign :categories, [create(:sqm_category)]
     render
   end
 

yarn.lock

@@ -1079,6 +1079,11 @@
     "@types/yargs" "^16.0.0"
     chalk "^4.0.0"
 
+"@popperjs/core@^2.10.2":
+  version "2.10.2"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.10.2.tgz#0798c03351f0dea1a5a4cabddf26a55a7cbee590"
+  integrity sha512-IXf3XA7+XyN7CP9gGh/XB0UxVMlvARGEgGXLubFICsUMGz6Q+DU+i4gGlpOxTjKvXjkJDJC8YdqdKkDj9qZHEQ==
+
 "@rails/actioncable@^6.0.0":
   version "6.1.4"
   resolved "https://registry.yarnpkg.com/@rails/actioncable/-/actioncable-6.1.4.tgz#c3c5a9f8302c429af9722b6c50ab48049016d2a3"
@@ -1777,6 +1782,11 @@ balanced-match@^1.0.0:
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
   integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
 
+bootstrap@^5.1.3:
+  version "5.1.3"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-5.1.3.tgz#ba081b0c130f810fa70900acbc1c6d3c28fa8f34"
+  integrity sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==
+
 brace-expansion@^1.1.7:
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"