From 4278021c2d1b96f87929e246d8de1faa48a7dff2 Mon Sep 17 00:00:00 2001
From: Liam Morley <lmorley@vmware.com>
Date: Mon, 25 Oct 2021 15:53:44 -0400
Subject: [PATCH] Finish styling for homepage

---
 app/assets/stylesheets/welcome.scss | 22 +++++++++++++++++++---
 app/views/home/index.html.erb       | 10 ++++++++--
 2 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/app/assets/stylesheets/welcome.scss b/app/assets/stylesheets/welcome.scss
index 9de44233..b3522ccb 100644
--- a/app/assets/stylesheets/welcome.scss
+++ b/app/assets/stylesheets/welcome.scss
@@ -25,9 +25,25 @@
   font-size: 20px;
 }
 
-img.framework-wheel {
-  width: 442px;
-  max-width: 100%;
+.framework-wheel-container {
+  @extend .d-flex;
+  @extend .flex-column;
+  @extend .align-items-center;
+
+  img {
+    width: 442px;
+    max-width: 100%;
+  }
+
+  p {
+    color: $gray-1;
+    font-size: 12px;
+    max-width: 410px;
+    @extend .text-center;
+    @extend .bg-color-gray-3;
+    @extend .p-3;
+    @extend .border-radius-8;
+  }
 }
 
 .welcome-controls {
diff --git a/app/views/home/index.html.erb b/app/views/home/index.html.erb
index f398f3aa..9feda49a 100644
--- a/app/views/home/index.html.erb
+++ b/app/views/home/index.html.erb
@@ -24,8 +24,14 @@
 <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 class="col-lg-5 framework-wheel-container">
+        <div>
+          <%= image_tag('framework_wheel.png', alt: 'MCIEA School Quality Framework Wheel') %>
+        </div>
+
+        <p class="mt-5">The School Quality Measures Framework aims to describe the full measure of what makes a good
+          school. The three outer categories are essential inputs to school quality that influence the center two key
+          outcomes.</p>
       </div>
       <div class="col-lg-7">
         <h2 class="mb-4">School Quality Measures Framework</h2>