[CCAP-616] create homepage provider section (#1108)

src/main/resources/messages.properties

@@ -156,6 +156,10 @@ index.gather-docs.first-paragraph=You may be asked to submit documents to verify
 index.gather-docs.icon-list.1=Income
 index.gather-docs.icon-list.2=Self-employment
 index.gather-docs.icon-list.3=School enrollment
+index.are-you-a-child-care-provider.header=Are you a child care provider?
+index.are-you-a-child-care-provider.subheader=Complete a family's application by responding to their care request.
+index.enter-confirmation-code.input-header=Enter confirmation code
+index.respond-to-application.button=Respond to application
 #
 pilot-offboard.title=Sorry, you can't apply online right now.
 pilot-offboard.subtext-html=<p>We are working hard to make this online application available to everyone in Illinois. Please check back later.</p><p>You can still apply for Child Care Assistance using the paper application. <a href="https://www.illinoiscaresforkids.org/toddler-en/early-care-and-education/child-care-assistance-program" target="_blank" rel="noopener noreferrer">Reach out to your local resource agency or child care center to get started</a>.</p>

src/main/resources/static/assets/css/custom.css

@@ -61,6 +61,9 @@ html, body {
   background-size: 25rem;
 }
 
+.slab--tan {
+  background-color: #FFE8CE;
+}
 @media only screen and (min-width: 600px) {
   .slab--hero {
     background-image: none;

src/main/resources/templates/index.html

@@ -102,8 +102,58 @@ <h2 th:text="#{index.gather-docs.title}"></h2>
         </div>
       </div>
     </section>
+    <section class="slab slab--tan">
+      <div class="grid">
+        <div class="width-one-whole">
+          <h2 th:text="#{index.are-you-a-child-care-provider.header}"></h2>
+        </div>
+
+        <div class="width-one-half">
+          <p class="normal" th:text="#{index.are-you-a-child-care-provider.subheader}"></p>
+          <div class="form-group spacing-above-25">
+            <label class="form-question" for="homepage-provider-response-link">
+              <span th:text="#{index.enter-confirmation-code.input-header}"></span>
+            </label>
+            <input type="text" class="text-input" id="homepage-provider-response-link">
+            <a
+                th:href="'/providerresponse/submit'"
+                id="route-to-provider-response"
+                class="button--big button">
+              <span th:text="#{index.respond-to-application.button}"></span>
+            </a>
+            <div class="width-one-half is-desktop-hidden">
+              <img src="/assets/images/mother_baby_smiling.svg" loading="lazy" alt="" class="img-right">
+            </div>
+          </div>
+        </div>
+        <div class="width-one-half is-tablet-hidden">
+          <img src="/assets/images/mother_baby_smiling.svg" loading="lazy" alt="" class="img-center">
+        </div>
+
+      </div>
+
+    </section>
   </main>
 </div>
 <th:block th:replace="~{fragments/footer :: footer}"/>
 </body>
+<script th:inline="javascript">
+  $(document).ready(function () {
+    const domain = window.location.origin
+    const providerResponsePath = '/providerresponse/submit'
+    const $homepageProviderResponseLink = $('#homepage-provider-response-link')
+
+    const $respondToApplicationLink = $('#route-to-provider-response')
+    function updateRespondToApplicationLink(value) {
+      if (value.trim().length === 0){
+        $respondToApplicationLink.attr("href", (domain + providerResponsePath))
+      }else {
+        $respondToApplicationLink.attr("href",  (domain + providerResponsePath + '/' + encodeURIComponent(value)))
+      }
+    }
+    $homepageProviderResponseLink.change(function () {
+      updateRespondToApplicationLink($homepageProviderResponseLink.val());
+    });
+  });
+</script>
 </html>