Update landing page (#81)

#187042038 Co-authored-by: Carlie <[email protected]> Co-authored-by: Cypress Borg <[email protected]> Co-authored-by: Carlie <[email protected]>
codeforamerica · Feb 28, 2024 · 258c4fc · 258c4fc
1 parent b4b4d4a
commit 258c4fc
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 13 deletions.
diff --git a/src/main/resources/messages.properties b/src/main/resources/messages.properties
@@ -44,7 +44,7 @@ errors.date-outside-of-supported-range=Please check the date entered. {0} is not
 errors.invalid-date-entered=Please check the date entered. It is not a valid date.
 #
 index.title=Get help paying for child care.
-index.notice-html=<strong>Our new online application is currently available to families using child care centers in DeKalb County.</strong> <a rel="noopener nofollow" target="_blank" href="https://www.illinoiscaresforkids.org/toddler-en/early-care-and-education/child-care-assistance-program">Check with your local resource agency or daycare</a> for more information.
+index.notice-html=Our new online application is currently available to families using child care centers in DeKalb County, Illinois. <a rel="noopener nofollow" target="_blank" href="https://www.illinoiscaresforkids.org/toddler-en/early-care-and-education/child-care-assistance-program">Check with your local resource agency or daycare</a> for more information.
 index.apply-for-benefits=Apply for Child Care Assistance online in 20 minutes.
 index.apply-now=Apply now
 index.apply-now-other-language=Aplica ya

diff --git a/src/main/resources/static/assets/css/custom.css b/src/main/resources/static/assets/css/custom.css
@@ -105,9 +105,17 @@ a, .button--link {
 }
 
 .img-center {
+  display: flex;
+  margin: 0;
+}
+
+img.img-center{
+  width: 462px;
+}
+.img-left {
   display: block;
-  margin-left: auto;
-  margin-right: auto;
+  margin-right: 0;
+  margin-bottom: 66px;
 }
 
 /* Same as .slab--grey, named to be used more generically */
@@ -131,13 +139,21 @@ a, .button--link {
   width: 100%;
   border-collapse: collapse;
 }
-
 .eligibility-table th {
   font-weight: normal;
   font-size: 1.6rem;
   color: var(--idhs-dark-blue);
   padding-bottom: 1rem;
 }
+.paragraph-large {
+  font-size: 2.5rem;
+  margin-bottom: 25px;
+}
+
+p.normal {
+  font-weight: normal;
+  font-size: 2.5rem;
+}
 
 .eligibility-table th.bold {
   font-weight: bold;

diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html
@@ -39,9 +39,10 @@ <h1 class="spacing-below-35 spacing-above-5" th:text="#{index.title}"></h1>
             <img src="/assets/images/seal-of-illinois.png" alt="" style="width: 141px; height: 141px;">
             <img src="/assets/images/IDHS-logo.png" alt="" style="width: 168px; height: auto">
         </div>
-        <div class="width-one-half">
+
+        <div class="width-two-thirds">
           <h2 th:text="#{index.child-care.title}"></h2>
-          <p th:text="#{index.child-care.paragraph}"></p>
+          <p class="h2 normal" th:text="#{index.child-care.paragraph}"></p>
           <a
               target="_blank" rel="noopener noreferrer"
               href="https://www.inccrra.org/about/sdasearch">
@@ -74,24 +75,26 @@ <h2 th:text="#{general.eligibility-table.title}"></h2>
     </section>
     <section class="slab slab--white">
       <div class="grid">
-        <div class="width-one-half">
+        <div class="width-one-whole">
           <h2 th:text="#{index.gather-docs.title}"></h2>
+        </div>
+        <div class="width-one-half">
           <div class="width-one-half is-desktop-hidden">
-            <img src="/assets/images/woman-with-paperwork.svg" alt="" class="img-center">
+            <img src="/assets/images/woman-with-paperwork.svg" alt="" class="img-left">
           </div>
-          <p th:text="#{index.gather-docs.first-paragraph}"></p>
-          <p th:text="#{index.gather-docs.second-paragraph}"></p>
+          <p class="paragraph-large normal" th:text="#{index.gather-docs.first-paragraph}"></p>
+          <p class="paragraph-large normal" th:text="#{index.gather-docs.second-paragraph}"></p>
           <div class="index-icon-list spacing-below-15">
             <th:block th:replace="~{fragments/gcc-icons :: blobWithPayStub}"></th:block>
-            <p th:text="#{index.gather-docs.icon-list.1}"></p>
+            <p class="h2 normal spacing-above-0" th:text="#{index.gather-docs.icon-list.1}"></p>
           </div>
           <div class="index-icon-list spacing-below-15">
             <th:block th:replace="~{fragments/gcc-icons :: blobWithW2}"></th:block>
-            <p th:text="#{index.gather-docs.icon-list.2}"></p>
+            <p class="h2 normal spacing-above-0" th:text="#{index.gather-docs.icon-list.2}"></p>
           </div>
           <div class="index-icon-list">
             <th:block th:replace="~{fragments/gcc-icons :: blobWithSchedule}"></th:block>
-            <p th:text="#{index.gather-docs.icon-list.3}"></p>
+            <p class="h2 normal spacing-above-0" th:text="#{index.gather-docs.icon-list.3}"></p>
           </div>
         </div>
         <div class="width-one-half is-tablet-hidden">