Update testimonials section to use bootstrap

Author: Sukhpreet-s

app/assets/stylesheets/landing_page.scss

@@ -64,6 +64,14 @@
   width: 100%;
 }
 
+#testimonials {
+  background-color: rgb(22, 163, 74);
+
+  .quote-image {
+    width: 300px;
+  }
+}
+
 // .text {
 
 //     &-header {

app/views/static/index.html.erb

@@ -176,28 +176,38 @@
       </div>
     </div>
 
-    <div class="py-5 px-0 bg-green-600 text-white" id="testimonials">
-      <div class="container max-w-7xl mx-auto flex flex-col md:flex-row py-5 justify-center items-center">
-        <div class="w-1/2 flex justify-center">
-          <%= image_tag("quote.svg", class: "quote-image", style: 'width: 300px') %>
-        </div>
-        <div class="pt-5 px-4 w-full sm:w-1/2">
-          <h3 class="text-4xl">Testimonials</h3>
-          <div class='mt-5'>
-            <div class='space-y-12'>
-              <div>
-                <p>Human Essentials has taken our diaper distribution to the next level. We no longer have to worry about how to track our incoming and outgoing inventory, and having all our products and data tracked in different ways in different documents and systems. Human Essentials has saved us time, money, energy and many, many headaches. The system is extremely intuitive and user-friendly and we are so grateful to have it.</p>
-                <strong class='mt-2'> - Megan, Sweet Cheeks Diaper Bank</strong>
-              </div>
-              <div>
-                <p class="text-testimonials">Finally, an inventory management system designed specifically for the unique needs of diaper banks!</p>
-                <strong> - Rachel Alston, PDX Diaper Bank </strong>
-              </div>
-            </div>
+    <div class="py-5 text-white" id="testimonials">
+      <div class="container-fluid">
+        <div class="row">
+
+          <div class="col-12 col-md-6 d-flex justify-content-center">
+            <%= image_tag("quote.svg", class: "quote-image") %>
           </div>
+
+          <div class="col-12 col-md-6 pt-5 px-4">
+            <h2 class="fs-1">Testimonials</h2>
+            <figure>
+              <blockquote class="blockquote">
+                <p class="fs-6">Human Essentials has taken our diaper distribution to the next level. We no longer have to worry about how to track our incoming and outgoing inventory, and having all our products and data tracked in different ways in different documents and systems. Human Essentials has saved us time, money, energy and many, many headaches. The system is extremely intuitive and user-friendly and we are so grateful to have it.</p>
+              </blockquote>
+              <figcaption class="blockquote-footer text-white fw-bold">
+                Megan, Sweet Cheeks Diaper Bank
+              </figcaption>
+            </figure>
+            <figure>
+              <blockquote class="blockquote">
+                <p class="fs-6">Finally, an inventory management system designed specifically for the unique needs of diaper banks!</p>
+              </blockquote>
+              <figcaption class="blockquote-footer text-white fw-bold">
+                Rachel Alston, PDX Diaper Bank
+              </figcaption>
+            </figure>
+          </div>
+
         </div>
       </div>
     </div>
+
     <div class="container max-w-7xl mx-auto py-32" id="contact">
       <div class="text-center">
         <h2 class="text-4xl">Want to use the Human Essentials App?</h2>