🐞 fix: Update Calls to Action field label and name, adjust layout settings, and enhance page hero services structure

acf/group_60bfb84ae973c.json

@@ -158,22 +158,23 @@
         },
         {
             "key": "field_60bfb8614a421",
-            "label": "Call to Actions",
-            "name": "call_to_actions",
+            "label": "Calls to Action",
+            "name": "ctas",
             "aria-label": "",
             "type": "repeater",
             "instructions": "",
             "required": 0,
-            "conditional_logic": false,
+            "conditional_logic": 0,
             "wrapper": {
                 "width": "",
                 "class": "",
                 "id": ""
             },
-            "collapsed": "",
+            "layout": "table",
+            "pagination": 0,
             "min": 0,
             "max": 0,
-            "layout": "table",
+            "collapsed": "",
             "button_label": "Add Call to Action",
             "rows_per_page": 20,
             "sub_fields": [
@@ -293,5 +294,5 @@
     "display_title": "",
     "allow_ai_access": false,
     "ai_description": "",
-    "modified": 1783288661
+    "modified": 1784082334
 }

styles/blocks/page-hero.css

@@ -23,7 +23,7 @@
     background: linear-gradient(73.83deg, #8FC9E6 -8.7%, #006196 21.51%, #032F46 60.7%);
     isolation: isolate;
     margin-bottom: 10rem;
-    min-height: clamp(31rem, 38vw, 36rem);
+    min-height: clamp(31rem, 38.5417vw, 46.25rem);
     position: relative;
 }
 
@@ -62,7 +62,7 @@
     max-height: none;
     pointer-events: none;
     position: absolute;
-    right: 23vw;
+    right: 28vw;
     top: 3rem;
     width: auto;
     z-index: 1;
@@ -71,7 +71,8 @@
 }
 
 .page-hero-services__vector {
-    bottom: clamp(1.5rem, 4vw, 3rem);
+    /* bottom: clamp(1.5rem, 4vw, 3rem); */
+    bottom: 0;
     height: auto;
     left: 0;
     pointer-events: none;

views/partials/page-hero-services.php

@@ -14,23 +14,19 @@ $heading    = get_field( 'heading' );
 $heroImage  = get_field( 'hero_image' );
 $heroVector = get_field( 'hero_vector' );
 $intro      = get_field( 'intro' );
+$ctas       = get_field( 'ctas' );
 
 // Fallback for heading
 if ( ! $heading ) {
     $heading = getTheTitle();
 }
 
-// Additional logic for dark mode (if needed)
-if ( is_home() || is_single() || is_archive() || is_search() || is_404() ) {
-    $isDark = true;
-}
-
 // The wrapper color is the gradient from .page-hero in page-hero.css. The
 // editor's background_color ACF field overrides the gradient with a solid color.
 $wrapperStyle = $bgColor ? 'background-color: ' . esc_attr( $bgColor ) . ';' : '';
 ?>
 
-<div class="page-hero-services text-light <?php echo $isDark ? 'dark' : ''; ?>" style="<?php echo esc_attr( $wrapperStyle ); ?>">
+<div class="page-hero-services text-light" <?php if ( $wrapperStyle ) { // phpcs:ignore ?>style="<?php echo esc_attr( $wrapperStyle ); ?>"<?php } ?>>
     <div class="page-hero-services__content container mx-auto px-0!">
         <!-- <div id="breadcrumbs">
             <?php Breadcrumbs::render(); ?>
@@ -45,6 +41,31 @@ $wrapperStyle = $bgColor ? 'background-color: ' . esc_attr( $bgColor ) . ';' : '
                 <?php echo wp_kses_post( $intro ); ?>
             </div>
         <?php endif; ?>
+
+        <?php if ( $ctas ) : ?>
+            <div class="reset mt-4 sm:mt-6 flex flex-wrap justify-center lg:justify-start gap-4">
+                <?php foreach ( $ctas as $index => $cta ) : ?>
+                    <?php
+                    $ctaLink   = $cta['link'];
+                    $ctaURL    = $ctaLink['url'] ?? '#';
+                    $ctaTarget = $ctaLink['target'] ?? '_self';
+                    $ctaTitle  = $ctaLink['title'] ?? '';
+                    ?>
+
+                    <x-button
+                        btnclasses="button text-center min-w-32 dark"
+                        element="a"
+                        url="<?php echo esc_url( $ctaURL ); ?>"
+                        target="<?php echo esc_attr( $ctaTarget ); ?>"
+                        title="<?php echo esc_attr( $ctaTitle ); ?>"
+                        color="primary"
+                        <?php if ( $index !== 0 ) { ?>
+                            variant="outline"
+                        <?php } ?>
+                    ></x-button>
+                <?php endforeach; ?>
+            </div>
+        <?php endif; ?>
     </div>
 
     <?php if ( $heroImage ) : ?>