🐞 fix: Update header/hero to swap based on service page children

views/partials/page-hero-services.php

@@ -0,0 +1,71 @@
+<?php
+/**
+ * Page Hero Partial
+ *
+ * @package CWC
+ */
+
+namespace CWC;
+
+// Set variables
+$bgColor    = get_field( 'background_color' );
+$isDark     = get_field( 'is_dark' );
+$heading    = get_field( 'heading' );
+$heroImage  = get_field( 'hero_image' );
+$heroVector = get_field( 'hero_vector' );
+$intro      = get_field( 'intro' );
+
+// 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__content container mx-auto px-0!">
+        <!-- <div id="breadcrumbs">
+            <?php Breadcrumbs::render(); ?>
+        </div> -->
+
+        <h1 class="page-hero-services__heading">
+            <?php echo wp_kses_post( $heading ); ?><em>.</em>
+        </h1>
+
+        <?php if ( $intro ) : ?>
+            <div class="page-hero-services__intro">
+                <?php echo wp_kses_post( $intro ); ?>
+            </div>
+        <?php endif; ?>
+    </div>
+
+    <?php if ( $heroImage ) : ?>
+        <img
+            class="page-hero-services__media"
+            src="<?php echo esc_url( $heroImage['url'] ); ?>"
+            alt=""
+            loading="lazy"
+            aria-hidden="true"
+            role="presentation"
+        />
+    <?php endif; ?>
+
+    <?php if ( $heroVector ) : ?>
+        <img
+            class="page-hero-services__vector"
+            src="<?php echo esc_url( $heroVector['url'] ); ?>"
+            alt=""
+            loading="lazy"
+            aria-hidden="true"
+            role="presentation"
+        />
+    <?php endif; ?>
+</div>

views/partials/page-hero.php

@@ -8,64 +8,39 @@
 namespace CWC;
 
 // Set variables
-$bgColor    = get_field( 'background_color' );
-$isDark     = get_field( 'is_dark' );
-$heading    = get_field( 'heading' );
-$heroImage  = get_field( 'hero_image' );
-$heroVector = get_field( 'hero_vector' );
-$intro      = get_field( 'intro' );
+$bgColor = get_field( 'background_color' );
+$isDark  = get_field( 'is_dark' );
+$heading = get_field( 'heading' );
+$intro   = get_field( 'intro' );
+
+if ( is_home() ) {
+    $intro = get_field( 'intro', get_option( 'page_for_posts' ) );
+}
 
 // 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 text-light <?php echo $isDark ? 'dark' : ''; ?>" style="<?php echo esc_attr( $wrapperStyle ); ?>">
-    <div class="page-hero__content container mx-auto px-0!">
+<div class="page-hero <?php echo $isDark ? 'dark' : ''; ?> lg:px-0 lg:mt-30 lg:mb-4" style="<?php echo esc_attr( $wrapperStyle ); ?>">
+    <div class="page-hero__content container flex flex-col lg:flex-row justify-between gap-20 mx-auto px-0!">
         <!-- <div id="breadcrumbs">
             <?php Breadcrumbs::render(); ?>
         </div> -->
 
-        <h1 class="page-hero__heading">
-            <?php echo wp_kses_post( $heading ); ?><em>.</em>
-        </h1>
+        <?php if ( $heading ) : ?>
+            <h1 class="page-hero__heading flex-0">
+                <?php echo wp_kses_post( $heading ); ?><em>.</em>
+            </h1>
+        <?php endif; ?>
 
         <?php if ( $intro ) : ?>
-            <div class="page-hero__intro">
+            <div class="page-hero__intro grow text-18px/6 pt-3">
                 <?php echo wp_kses_post( $intro ); ?>
             </div>
         <?php endif; ?>
     </div>
-
-    <?php if ( $heroImage ) : ?>
-        <img
-            class="page-hero__media"
-            src="<?php echo esc_url( $heroImage['url'] ); ?>"
-            alt=""
-            loading="lazy"
-            aria-hidden="true"
-            role="presentation"
-        />
-    <?php endif; ?>
-
-    <?php if ( $heroVector ) : ?>
-        <img
-            class="page-hero__vector"
-            src="<?php echo esc_url( $heroVector['url'] ); ?>"
-            alt=""
-            loading="lazy"
-            aria-hidden="true"
-            role="presentation"
-        />
-    <?php endif; ?>
 </div>