✨feature: Set up homepage hero

acf/group_60bfdb328901d.json

@@ -2,6 +2,32 @@
     "key": "group_60bfdb328901d",
     "title": "Homepage Hero",
     "fields": [
+        {
+            "key": "field_6a84d6008c2b1",
+            "label": "Hero Image",
+            "name": "hero_image",
+            "aria-label": "",
+            "type": "image",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "return_format": "array",
+            "library": "all",
+            "min_width": "",
+            "min_height": "",
+            "min_size": "",
+            "max_width": "",
+            "max_height": "",
+            "max_size": "",
+            "mime_types": "",
+            "allow_in_bindings": 0,
+            "preview_size": "medium"
+        },
         {
             "key": "field_60bfdb328cfae",
             "label": "Heading",
@@ -102,5 +128,8 @@
     "active": true,
     "description": "",
     "show_in_rest": 0,
-    "modified": 1742332828
+    "display_title": "",
+    "allow_ai_access": false,
+    "ai_description": "",
+    "modified": 1787090455
 }

views/blocks/homepage-hero/homepage-hero.php

@@ -8,6 +8,7 @@
 namespace KsPortfolio;
 
 // Retrieve ACF fields
+$imgHero = get_field( 'hero_image' );
 $heading = get_field( 'heading' );
 $intro   = get_field( 'intro' );
 $ctas    = get_field( 'calls_to_action' );
@@ -17,16 +18,16 @@ $wrapper = blockWrapperAttributes( $classes, $is_preview );
 ?>
 
 <section <?php echo wp_kses_post( $wrapper ); ?>>
-	<div class="container content-wrapper">
-	<div class="max-w-lg sm:text-center lg:text-left lg:items-center ml-0">
+	<div class="container content-wrapper flex flex-col lg:flex-row items-start justify-between">
+        <div class="max-w-2xl sm:text-center lg:text-left lg:items-center ml-0">
             <?php if ( ! empty( $heading ) ) : ?>
-		<h1 class="text-4xl lg:text-5xl font-bold leading-tight mb-4">
+                <h1 class="text-45px font-bold leading-tight mb-4">
                     <?php echo esc_html( $heading ); ?>
                 </h1>
             <?php endif; ?>
 
             <?php if ( ! empty( $intro ) ) : ?>
-		<div class="mt-3 text-base text-light sm:mt-5 sm:text-xl lg:text-lg xl:text-xl with:max-w-full">
+                <div class="mt-3 text-20p text-light sm:mt-5 sm:text-xl lg:text-lg xl:text-xl with:max-w-full">
                     <?php echo wp_kses_post( $intro ); ?>
                 </div>
             <?php endif; ?>
@@ -62,5 +63,17 @@ $wrapper = blockWrapperAttributes( $classes, $is_preview );
                 </div>
             <?php endif; ?>
         </div>
+
+        <div class="flex-1 max-w-2xl">
+            <?php if ( ! empty( $imgHero ) ) : ?>
+                <div class="">
+                    <img
+                        src="<?php echo esc_url( $imgHero['url'] ); ?>"
+                        alt="<?php echo esc_attr( $imgHero['alt'] ); ?>"
+                        class="w-full h-full object-cover rounded-lg shadow-lg"
+                    />
+                </div>
+            <?php endif; ?>
+        </div>
 	</div>
 </section>