From baf728b22b0d444dbeb5a66120691b79cdf30560 Mon Sep 17 00:00:00 2001
From: Haley <haley@openfunctioncomputers.com>
Date: Thu, 9 Jan 2025 10:31:03 -0800
Subject: [PATCH] WIP

---
 .../acf-json/group_625dc5c18c6d5.json         | 17 ++--
 .../themes/medicalalert/dist/app.css          | 16 ++--
 .../medicalalert/dist/mix-manifest.json       |  2 +-
 .../src/scss/testimonial-carousel.scss        | 18 +++--
 .../medicalalert/src/scss/testimonial.scss    |  3 +-
 .../tpl/image_with_icon_info_grid.tpl         |  4 +-
 .../themes/medicalalert/tpl/testimonial.tpl   |  6 +-
 .../medicalalert/tpl/testimonial_carousel.tpl | 81 ++++++++++---------
 .../medicalalert/tpl/text_highlights_col.tpl  | 64 +++++++--------
 9 files changed, 110 insertions(+), 101 deletions(-)

diff --git a/wp/wp-content/themes/medicalalert/acf-json/group_625dc5c18c6d5.json b/wp/wp-content/themes/medicalalert/acf-json/group_625dc5c18c6d5.json
index 8ce8df82..1120efa5 100644
--- a/wp/wp-content/themes/medicalalert/acf-json/group_625dc5c18c6d5.json
+++ b/wp/wp-content/themes/medicalalert/acf-json/group_625dc5c18c6d5.json
@@ -7272,16 +7272,15 @@
                                 "id": ""
                             },
                             "choices": {
-                                "none: No Border": "none: No Border",
-                                "white": "White",
-                                "red": "Red",
-                                "black": "Black"
+                                "none": "No Border",
+                                "g-purple-border": "Purple Gradient"
                             },
-                            "default_value": "red",
-                            "allow_null": 0,
-                            "multiple": 0,
-                            "ui": 0,
+                            "default_value": "g-purple-border",
                             "return_format": "value",
+                            "multiple": 0,
+                            "allow_null": 0,
+                            "allow_in_bindings": 1,
+                            "ui": 0,
                             "ajax": 0,
                             "placeholder": ""
                         },
@@ -8311,5 +8310,5 @@
     "active": true,
     "description": "",
     "show_in_rest": 0,
-    "modified": 1736391849
+    "modified": 1736445895
 }
diff --git a/wp/wp-content/themes/medicalalert/dist/app.css b/wp/wp-content/themes/medicalalert/dist/app.css
index 6d2e9256..d99406b2 100644
--- a/wp/wp-content/themes/medicalalert/dist/app.css
+++ b/wp/wp-content/themes/medicalalert/dist/app.css
@@ -12476,12 +12476,11 @@ body {
 }
 
 .testimonial-carousel-slice-container .testimonials .testimonial-image img {
-  width: 225px;
-  height: 225px;
-  border-radius: 50%;
+  width: 250px;
+  height: 250px;
 }
 .testimonial-carousel-slice-container .testimonials .title {
-  color: #000066;
+  color: #7e5bef !important;
   text-align: start;
 }
 .testimonial-carousel-slice-container .testimonials .quote-attribution {
@@ -12492,14 +12491,14 @@ body {
 }
 
 .consumer-brand .testimonial-carousel-slice-container .slick-dots li button::before {
-  color: rgba(102, 0, 55, 0.5);
+  color: #507CFF;
 }
 .consumer-brand .testimonial-carousel-slice-container .slick-dots .slick-active button::before {
-  color: #000066;
+  color: #507CFF;
 }
 
 .business-brand .testimonial-carousel-slice-container .slick-dots li button::before {
-  color: rgba(0, 68, 124, 0.5);
+  color: #507CFF;
 }
 .business-brand .testimonial-carousel-slice-container .slick-dots .slick-active button::before {
   color: #00447C;
@@ -12518,9 +12517,10 @@ body {
   width: 100%;
   -o-object-fit: cover;
      object-fit: cover;
+  max-width: 350px;
 }
 .testimonial-slice-container .testimonial-inner-content-wrapper {
-  padding-left: 3em;
+  padding-left: 2em;
 }
 .testimonial-slice-container .testimonial-inner-content-wrapper .testimonial-title {
   font-size: 32px;
diff --git a/wp/wp-content/themes/medicalalert/dist/mix-manifest.json b/wp/wp-content/themes/medicalalert/dist/mix-manifest.json
index 4fe900c3..a1a77299 100644
--- a/wp/wp-content/themes/medicalalert/dist/mix-manifest.json
+++ b/wp/wp-content/themes/medicalalert/dist/mix-manifest.json
@@ -1,4 +1,4 @@
 {
     "/app.js": "/app.js?id=def087bfee86b3ced20472c4fd21ee05",
-    "/app.css": "/app.css?id=ce0cb2dfa7a09d1c721b431100aa8cfe"
+    "/app.css": "/app.css?id=273836cfd783ff85befd47a49c8f0d58"
 }
diff --git a/wp/wp-content/themes/medicalalert/src/scss/testimonial-carousel.scss b/wp/wp-content/themes/medicalalert/src/scss/testimonial-carousel.scss
index cd038b6d..be3a96f1 100644
--- a/wp/wp-content/themes/medicalalert/src/scss/testimonial-carousel.scss
+++ b/wp/wp-content/themes/medicalalert/src/scss/testimonial-carousel.scss
@@ -2,18 +2,20 @@
     .testimonials {
         .testimonial-image {
             img {
-                width: 225px;
-                height: 225px;
-                border-radius: 50%;
+                width: 250px;
+                height: 250px;
             }
         }
+
         .title {
-            color: $consumer-primary;
+            color: $ma-purple !important;
             text-align: start;
         }
+
         .quote-attribution {
             text-align: start;
         }
+
         .slick-dots li button::before {
             font-size: 12px;
         }
@@ -26,12 +28,13 @@
             li {
                 button {
                     &::before {
-                        color: rgba(102, 0, 55, 0.5);
+                        color: #507CFF;
                     }
                 }
             }
+
             .slick-active button::before {
-                color: $consumer-primary;
+                color: #507CFF;
             }
         }
     }
@@ -43,10 +46,11 @@
             li {
                 button {
                     &::before {
-                        color: rgba(0, 68, 124, 0.5);
+                        color: #507CFF;
                     }
                 }
             }
+
             .slick-active button::before {
                 color: $business-primary;
             }
diff --git a/wp/wp-content/themes/medicalalert/src/scss/testimonial.scss b/wp/wp-content/themes/medicalalert/src/scss/testimonial.scss
index 7875e04d..2d4e51b9 100644
--- a/wp/wp-content/themes/medicalalert/src/scss/testimonial.scss
+++ b/wp/wp-content/themes/medicalalert/src/scss/testimonial.scss
@@ -11,10 +11,11 @@
     .testimonial-img {
         width: 100%;
         object-fit: cover;
+        max-width: 350px;
     }
 
     .testimonial-inner-content-wrapper {
-        padding-left: 3em;
+        padding-left: 2em;
 
         .testimonial-title {
             font-size: 32px;
diff --git a/wp/wp-content/themes/medicalalert/tpl/image_with_icon_info_grid.tpl b/wp/wp-content/themes/medicalalert/tpl/image_with_icon_info_grid.tpl
index a699937f..0ac0b8c0 100644
--- a/wp/wp-content/themes/medicalalert/tpl/image_with_icon_info_grid.tpl
+++ b/wp/wp-content/themes/medicalalert/tpl/image_with_icon_info_grid.tpl
@@ -1,9 +1,9 @@
 <!-- Image With Icon Info Grid BEGIN -->
 <section class="image-with-icon-info-grid-slice-container bg-color-{{background_color}} padding-top-{{padding_top}} padding-bottom-{{padding_bottom}}">
     <div class="container">
-        <div class="row gx-3">
+        <div class="row gx-5">
             <div class="col-12 col-md col-lg-4 order-md-{{alignment}} align-self-center py-3">
-                <div class="g-purple-border">
+                <div class="g-purple-border me-3">
                     <img class="w-100" src="{{image.url}}" alt="{{image.alt}}">
                 </div>
             </div>
diff --git a/wp/wp-content/themes/medicalalert/tpl/testimonial.tpl b/wp/wp-content/themes/medicalalert/tpl/testimonial.tpl
index ec4192d2..02f782b9 100644
--- a/wp/wp-content/themes/medicalalert/tpl/testimonial.tpl
+++ b/wp/wp-content/themes/medicalalert/tpl/testimonial.tpl
@@ -47,13 +47,13 @@
         </svg>
     </div>
     <div class="container rounded p-4 bg-color-{{background_color}}">
-        <div class="row gx-5">
-            <div class="col-lg-5 p-relative d-flex justify-content-center mb-4">
+        <div class="row">
+            <div class="col-lg-3 p-relative d-flex justify-content-center mb-4">
                 <div class="g-sky-border z-0 offset">
                     <img class="testimonial-img" src="{{image.url}}" alt="{{image.alt}}" />
                 </div>
             </div>
-            <div class="col-lg-7 my-auto testimonial-inner-content-wrapper">
+            <div class="col-lg-9 my-auto testimonial-inner-content-wrapper">
                 <svg width="35" height="29" viewBox="0 0 35 29" fill="none" xmlns="http://www.w3.org/2000/svg">
                     <path d="M19.93 28.57V18.49C19.93 13.99 21.16 10.06 23.62 6.7C26.08 3.28 29.86 1.18 34.96 0.399999V6.97C32.02 7.33 30.07 8.29 29.11 9.85C28.15 11.41 27.67 13.48 27.67 16.06L22.36 14.98H34.78V28.57H19.93ZM0.4 28.57V18.49C0.4 13.99 1.63 10.06 4.09 6.7C6.55 3.28 10.33 1.18 15.43 0.399999V6.97C12.49 7.33 10.54 8.29 9.58 9.85C8.62 11.41 8.14 13.48 8.14 16.06L2.83 14.98H15.25V28.57H0.4Z" fill="white" />
                 </svg>
diff --git a/wp/wp-content/themes/medicalalert/tpl/testimonial_carousel.tpl b/wp/wp-content/themes/medicalalert/tpl/testimonial_carousel.tpl
index c7cface6..f8c721d8 100644
--- a/wp/wp-content/themes/medicalalert/tpl/testimonial_carousel.tpl
+++ b/wp/wp-content/themes/medicalalert/tpl/testimonial_carousel.tpl
@@ -1,48 +1,53 @@
 <!-- Testimonial Carousel BEGIN -->
 <section class="testimonial-carousel-slice-container bg-color-{{background_color}} padding-top-{{padding_top}} padding-bottom-{{padding_bottom}}">
     <div class="container">
-      <div class="row justify-content-center">
-        <div class="col-10">
-          <div class="testimonials">
-            {{#each testimonials}}
-              <div class="testimonial">
-                <div class="row gx-4">
-                  <div class="col-auto pb-3">
-                    <div class="testimonial-image">
-                      <img class="border-color-{{../border_color}}" src="{{image.url}}" alt="{{image.alt}}">
+        <div class="row justify-content-center">
+            <div class="col-10">
+                <div class="testimonials">
+                    {{#each testimonials}}
+                    <div class="testimonial">
+                        <div class="row gx-4">
+                            <div class="col-auto d-flex align-items-center">
+                                <div class="testimonial-image {{../border_color}}">
+                                    <img class="w-100" src="{{image.url}}" alt="{{image.alt}}">
+                                </div>
+                            </div>
+                            <div class="col d-flex align-items-center">
+                                <div>
+                                    <svg width="35" height="29" viewBox="0 0 35 29" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                        <path d="M19.93 28.57V18.49C19.93 13.99 21.16 10.06 23.62 6.7C26.08 3.28 29.86 1.18 34.96 0.399999V6.97C32.02 7.33 30.07 8.29 29.11 9.85C28.15 11.41 27.67 13.48 27.67 16.06L22.36 14.98H34.78V28.57H19.93ZM0.4 28.57V18.49C0.4 13.99 1.63 10.06 4.09 6.7C6.55 3.28 10.33 1.18 15.43 0.399999V6.97C12.49 7.33 10.54 8.29 9.58 9.85C8.62 11.41 8.14 13.48 8.14 16.06L2.83 14.98H15.25V28.57H0.4Z" fill="#E0D6FB" />
+                                    </svg>
+                                    <div class="title mb-3 mt-1">
+                                        <h3 class="fw-bold f-purple">{{title}}</h3>
+                                    </div>
+                                    <div class="copy mb-3">
+                                        <p>{{copy}}</p>
+                                    </div>
+                                    <div class="quote-attribution">
+                                        <p>{{quote_attribution}}</p>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
                     </div>
-                  </div>
-                  <div class="col">
-                    <div class="title mb-3">
-                      <h3>{{title}}</h3>
-                    </div>
-                    <div class="copy mb-3">
-                      <p>{{copy}}</p>
-                    </div>
-                    <div class="quote-attribution pb-5">
-                      <p>{{quote_attribution}}</p>
-                    </div>
-                  </div>
+                    {{/each}}
                 </div>
-              </div>
-            {{/each}}
-          </div>
+            </div>
         </div>
-      </div>
     </div>
 
-  <!-- Slick Carousel -->
-  <script type="text/javascript">
-    $(window).on('load', function(){
-      $('.testimonials').slick({
-        slidesToShow: 1,
-        slidesToScroll: 1,
-        arrows: false,
-        dots: true,
-        autoplay: true,
-        arrows: true,
-      });
-    });
-  </script>
+    <!-- Slick Carousel -->
+    <script type="text/javascript">
+        $(window).on('load', function () {
+            $('.testimonials').slick({
+                slidesToShow: 1,
+                slidesToScroll: 1,
+                arrows: false,
+                dots: true,
+                autoplay: true,
+                arrows: true,
+            });
+        });
+    </script>
 </section>
 <!-- Testimonial Carousel END -->
\ No newline at end of file
diff --git a/wp/wp-content/themes/medicalalert/tpl/text_highlights_col.tpl b/wp/wp-content/themes/medicalalert/tpl/text_highlights_col.tpl
index c58e20aa..649d5d4d 100644
--- a/wp/wp-content/themes/medicalalert/tpl/text_highlights_col.tpl
+++ b/wp/wp-content/themes/medicalalert/tpl/text_highlights_col.tpl
@@ -1,39 +1,39 @@
 <!-- Text Highlights Col BEGIN -->
 <section class="text-highlights-col-slice-container bg-color-{{background_color}} padding-top-{{padding_top}} padding-bottom-{{padding_bottom}}">
-  <div class="container">
-    <div class="row gy-5">
-      {{#each text_blocks}}
-        <div class="col-12">
-          <div class="text-block">
-            <div class="title mb-4">
-              <h3>{{title}}</h3>
+    <div class="container">
+        <div class="row gy-5">
+            {{#each text_blocks}}
+            <div class="col-12">
+                <div class="text-block">
+                    <div class="title mb-4">
+                        <h4>{{title}}</h4>
+                    </div>
+                    {{#if has_two_columns}}
+                    <div class="two-column-section">
+                        <div class="row row-cols-lg-2 gx-5">
+                            <div class="col-12 col-lg-6">
+                                <div class="column-one-highlights">
+                                    {{{column_one_highlights}}}
+                                </div>
+                            </div>
+                            <div class="col-12 col-lg-6 pt-4 pt-lg-0">
+                                <div class="column-two-highlights">
+                                    {{{column_two_highlights}}}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    {{else}}
+                    <div class="one-column-section">
+                        <div class="highlights">
+                            {{{highlights}}}
+                        </div>
+                    </div>
+                    {{/if}}
+                </div>
             </div>
-              {{#if has_two_columns}}
-                <div class="two-column-section">
-                  <div class="row row-cols-lg-2 gx-5">
-                    <div class="col-12 col-lg-6">
-                      <div class="column-one-highlights">
-                        {{{column_one_highlights}}}
-                      </div>
-                    </div>
-                    <div class="col-12 col-lg-6 pt-4 pt-lg-0">
-                      <div class="column-two-highlights">
-                        {{{column_two_highlights}}}
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              {{else}}
-                <div class="one-column-section">
-                  <div class="highlights">
-                    {{{highlights}}}
-                  </div>
-                </div>
-              {{/if}}
-          </div>
+            {{/each}}
         </div>
-      {{/each}}
     </div>
-  </div>
 </section>
 <!-- Text Highlights Col END -->
\ No newline at end of file